{
	"$schema": "https://shadcn-svelte.com/schema/registry-item.json",
	"name": "dot-pattern",
	"title": "Dot Pattern",
	"type": "registry:block",
	"description": "A customizable dot pattern background component with optional glow animations and mask effects.",
	"dependencies": [
		"motion-sv"
	],
	"files": [
		{
			"content": "<script lang=\"ts\">\n\timport { onMount } from \"svelte\";\n\timport { motion } from \"motion-sv\";\n\timport { cn } from \"$UTILS$\";\n\timport type { SVGAttributes } from \"svelte/elements\";\n\n\tinterface DotPatternProps extends SVGAttributes<SVGSVGElement> {\n\t\twidth?: number;\n\t\theight?: number;\n\t\tx?: number;\n\t\t/**\n\t\t * The y-offset of the entire pattern\n\t\t */\n\t\ty?: number;\n\t\t/**\n\t\t * The x-offset of individual dots\n\t\t */\n\t\tcx?: number;\n\t\t/**\n\t\t * The y-offset of individual dots\n\t\t */\n\t\tcy?: number;\n\t\t/**\n\t\t * The radius of each dot\n\t\t */\n\t\tcr?: number;\n\t\tclass?: string;\n\t\t/**\n\t\t * Whether dots should have a glowing animation effect\n\t\t */\n\t\tglow?: boolean;\n\t}\n\n\tlet {\n\t\twidth = 16,\n\t\theight = 16,\n\t\tx = 0,\n\t\ty = 0,\n\t\tcx = 1,\n\t\tcy = 1,\n\t\tcr = 1,\n\t\tclass: className,\n\t\tglow = false,\n\t\t...props\n\t}: DotPatternProps = $props();\n\n\tconst id = $props.id();\n\tlet containerRef: SVGSVGElement | null = $state(null);\n\tlet dimensions = $state({ width: 0, height: 0 });\n\n\tonMount(() => {\n\t\tconst updateDimensions = () => {\n\t\t\tif (containerRef) {\n\t\t\t\tconst rect = containerRef.getBoundingClientRect();\n\t\t\t\tdimensions = { width: rect.width, height: rect.height };\n\t\t\t}\n\t\t};\n\n\t\tupdateDimensions();\n\t\twindow.addEventListener(\"resize\", updateDimensions);\n\t\treturn () => window.removeEventListener(\"resize\", updateDimensions);\n\t});\n\n\tconst dots = $derived(\n\t\tArray.from(\n\t\t\t{\n\t\t\t\tlength: Math.ceil(dimensions.width / width) * Math.ceil(dimensions.height / height),\n\t\t\t},\n\t\t\t(_, i) => {\n\t\t\t\tconst col = i % Math.ceil(dimensions.width / width);\n\t\t\t\tconst row = Math.floor(i / Math.ceil(dimensions.width / width));\n\t\t\t\treturn {\n\t\t\t\t\tx: col * width + cx,\n\t\t\t\t\ty: row * height + cy,\n\t\t\t\t\tdelay: Math.random() * 5,\n\t\t\t\t\tduration: Math.random() * 3 + 2,\n\t\t\t\t};\n\t\t\t}\n\t\t)\n\t);\n</script>\n\n<svg\n\tbind:this={containerRef}\n\taria-hidden=\"true\"\n\tclass={cn(\"pointer-events-none absolute inset-0 h-full w-full text-neutral-400/80\", className)}\n\t{...props}\n>\n\t<defs>\n\t\t<radialGradient id={`${id}-gradient`}>\n\t\t\t<stop offset=\"0%\" stop-color=\"currentColor\" stop-opacity=\"1\" />\n\t\t\t<stop offset=\"100%\" stop-color=\"currentColor\" stop-opacity=\"0\" />\n\t\t</radialGradient>\n\t</defs>\n\t{#each dots as dot (dot.x + \"-\" + dot.y)}\n\t\t<motion.circle\n\t\t\tcx={dot.x}\n\t\t\tcy={dot.y}\n\t\t\tr={cr}\n\t\t\tfill={glow ? `url(#${id}-gradient)` : \"currentColor\"}\n\t\t\tinitial={glow ? { opacity: 0.4, scale: 1 } : {}}\n\t\t\tanimate={glow\n\t\t\t\t? {\n\t\t\t\t\t\topacity: [0.4, 1, 0.4],\n\t\t\t\t\t\tscale: [1, 1.5, 1],\n\t\t\t\t\t}\n\t\t\t\t: {}}\n\t\t\ttransition={glow\n\t\t\t\t? {\n\t\t\t\t\t\tduration: dot.duration,\n\t\t\t\t\t\trepeat: Infinity,\n\t\t\t\t\t\trepeatType: \"reverse\",\n\t\t\t\t\t\tdelay: dot.delay,\n\t\t\t\t\t\tease: \"easeInOut\",\n\t\t\t\t\t}\n\t\t\t\t: {}}\n\t\t/>\n\t{/each}\n</svg>\n",
			"type": "registry:component",
			"target": "magic/dot-pattern/dot-pattern.svelte"
		},
		{
			"content": "import DotPattern from \"./dot-pattern.svelte\";\nexport { DotPattern };\n",
			"type": "registry:file",
			"target": "magic/dot-pattern/index.ts"
		}
	]
}