{
	"$schema": "https://shadcn-svelte.com/schema/registry-item.json",
	"name": "qr-code",
	"title": "QR Code",
	"type": "registry:ui",
	"description": "A vector-based QR generator with support for colors and logos.",
	"dependencies": [
		"qrcode-generator@^2.0.4"
	],
	"devDependencies": [
		"@types/qrcode-generator@^0.0.16"
	],
	"files": [
		{
			"content": "<script lang=\"ts\">\n\timport { cn } from '$UTILS$';\n\timport qrcode from 'qrcode-generator';\n\timport type { Snippet } from 'svelte';\n\n\tlet {\n\t\tvalue,\n\t\tsize = 128,\n\t\tcolor = '#000000',\n\t\tbackgroundColor = '#FFFFFF',\n\t\terrorCorrection = 'M',\n\t\tmargin = 2,\n\t\tclass: className,\n\t\tlogo,\n\t\tlogoSize = 0.2\n\t}: {\n\t\tvalue: string;\n\t\tsize?: number;\n\t\tcolor?: string;\n\t\tbackgroundColor?: string;\n\t\terrorCorrection?: 'L' | 'M' | 'Q' | 'H';\n\t\tmargin?: number;\n\t\tclass?: string;\n\t\tlogo?: string | Snippet;\n\t\tlogoSize?: number;\n\t} = $props();\n\n\tlet matrix = $derived.by(() => {\n\t\tif (!value) return [];\n\t\ttry {\n\t\t\tconst qr = qrcode(0, errorCorrection);\n\t\t\tqr.addData(value);\n\t\t\tqr.make();\n\n\t\t\tconst count = qr.getModuleCount();\n\t\t\tconst rows = [];\n\t\t\tfor (let r = 0; r < count; r++) {\n\t\t\t\tconst row = [];\n\t\t\t\tfor (let c = 0; c < count; c++) {\n\t\t\t\t\trow.push(qr.isDark(r, c));\n\t\t\t\t}\n\t\t\t\trows.push(row);\n\t\t\t}\n\t\t\treturn rows;\n\t\t} catch (e) {\n\t\t\tconsole.error('QR Generation failed', e);\n\t\t\treturn [];\n\t\t}\n\t});\n\n\tlet moduleCount = $derived(matrix.length);\n\tlet viewBoxSize = $derived(moduleCount + margin * 2);\n</script>\n\n<div\n\tclass={cn('relative inline-flex items-center justify-center shrink-0', className)}\n\tstyle:width={`${size}px`}\n\tstyle:height={`${size}px`}\n>\n\t<svg\n\t\tviewBox={`0 0 ${viewBoxSize} ${viewBoxSize}`}\n\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\tshape-rendering=\"crispEdges\"\n\t\tclass=\"h-full w-full\"\n\t>\n\t\t<rect width={viewBoxSize} height={viewBoxSize} fill={backgroundColor} />\n\n\t\t{#each matrix as row, r}\n\t\t\t{#each row as isDark, c}\n\t\t\t\t{#if isDark}\n\t\t\t\t\t<rect x={c + margin} y={r + margin} width=\"1\" height=\"1\" fill={color} />\n\t\t\t\t{/if}\n\t\t\t{/each}\n\t\t{/each}\n\t</svg>\n\n\t{#if logo}\n\t\t<div\n\t\t\tclass=\"absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 flex items-center justify-center bg-background rounded-full p-1 shadow-sm\"\n\t\t\tstyle:width={`${size * logoSize}px`}\n\t\t\tstyle:height={`${size * logoSize}px`}\n\t\t>\n\t\t\t{#if typeof logo === 'string'}\n\t\t\t\t<img src={logo} alt=\"QR Logo\" class=\"h-full w-full object-contain\" />\n\t\t\t{:else}\n\t\t\t\t{@render logo()}\n\t\t\t{/if}\n\t\t</div>\n\t{/if}\n</div>\n",
			"type": "registry:ui",
			"target": "qr-code/qr-code.svelte"
		},
		{
			"content": "import QRCode from \"./qr-code.svelte\";\r\n\r\nexport { QRCode as Root };",
			"type": "registry:ui",
			"target": "qr-code/index.ts"
		}
	]
}