{
	"$schema": "https://shadcn-svelte.com/schema/registry-item.json",
	"name": "grid-pattern",
	"title": "Grid Pattern",
	"type": "registry:block",
	"description": "An SVG-based grid pattern background component with support for highlighted squares and customizable grid dimensions.",
	"files": [
		{
			"content": "<script lang=\"ts\">\n\timport { cn } from \"$UTILS$\";\n\timport type { SVGAttributes } from \"svelte/elements\";\n\n\tinterface GridPatternProps extends SVGAttributes<SVGSVGElement> {\n\t\twidth?: number;\n\t\theight?: number;\n\t\t/**\n\t\t * The x-offset of the pattern\n\t\t */\n\t\tx?: number;\n\t\t/**\n\t\t * The y-offset of the pattern\n\t\t */\n\t\ty?: number;\n\t\t/**\n\t\t * Array of [x, y] coordinates for highlighted squares\n\t\t */\n\t\tsquares?: Array<[x: number, y: number]>;\n\t\t/**\n\t\t * Stroke dash array for dashed lines\n\t\t */\n\t\tstrokeDashArray?: string;\n\t\tclass?: string;\n\t}\n\n\tlet {\n\t\twidth = 40,\n\t\theight = 40,\n\t\tx = -1,\n\t\ty = -1,\n\t\tstrokeDashArray = \"0\",\n\t\tsquares,\n\t\tclass: className,\n\t\t...props\n\t}: GridPatternProps = $props();\n\n\tconst id = $props.id();\n</script>\n\n<svg\n\taria-hidden=\"true\"\n\tclass={cn(\n\t\t\"pointer-events-none absolute inset-0 h-full w-full fill-gray-400/30 stroke-gray-400/30\",\n\t\tclassName\n\t)}\n\t{...props}\n>\n\t<defs>\n\t\t<pattern {id} {width} {height} patternUnits=\"userSpaceOnUse\" {x} {y}>\n\t\t\t<path d={`M.5 ${height}V.5H${width}`} fill=\"none\" stroke-dasharray={strokeDashArray} />\n\t\t</pattern>\n\t</defs>\n\t<rect width=\"100%\" height=\"100%\" stroke-width={0} fill={`url(#${id})`} />\n\t{#if squares}\n\t\t<svg {x} {y} class=\"overflow-visible\">\n\t\t\t{#each squares as [squareX, squareY], i (`${squareX}-${squareY}-${i}`)}\n\t\t\t\t<rect\n\t\t\t\t\tstroke-width=\"0\"\n\t\t\t\t\twidth={width - 1}\n\t\t\t\t\theight={height - 1}\n\t\t\t\t\tx={squareX * width + 1}\n\t\t\t\t\ty={squareY * height + 1}\n\t\t\t\t/>\n\t\t\t{/each}\n\t\t</svg>\n\t{/if}\n</svg>\n",
			"type": "registry:component",
			"target": "magic/grid-pattern/grid-pattern.svelte"
		},
		{
			"content": "export { default as GridPattern } from \"./grid-pattern.svelte\";\n",
			"type": "registry:file",
			"target": "magic/grid-pattern/index.ts"
		}
	]
}