{
	"$schema": "https://shadcn-svelte.com/schema/registry-item.json",
	"name": "ripple",
	"title": "Ripple",
	"type": "registry:block",
	"description": "A component that creates expanding ripple circles with customizable size, opacity, and number of circles.",
	"css": {
		"@keyframes ripple": {
			"0%, 100%": {
				"transform": "translate(-50%, -50%) scale(1)"
			},
			"50%": {
				"transform": "translate(-50%, -50%) scale(0.9)"
			}
		}
	},
	"cssVars": {
		"theme": {
			"animate-ripple": "ripple var(--duration, 2s) ease calc(var(--i, 0) * 0.2s) infinite"
		}
	},
	"files": [
		{
			"content": "<script lang=\"ts\">\n\timport { cn } from \"$UTILS$\";\n\timport type { HTMLAttributes } from \"svelte/elements\";\n\n\tinterface RippleProps extends HTMLAttributes<HTMLDivElement> {\n\t\tmainCircleSize?: number;\n\t\tmainCircleOpacity?: number;\n\t\tnumCircles?: number;\n\t\tclass?: string;\n\t}\n\n\tlet {\n\t\tmainCircleSize = 210,\n\t\tmainCircleOpacity = 0.24,\n\t\tnumCircles = 8,\n\t\tclass: className,\n\t\t...props\n\t}: RippleProps = $props();\n</script>\n\n<div\n\tclass={cn(\n\t\t\"pointer-events-none absolute inset-0 mask-[linear-gradient(to_bottom,white,transparent)] select-none\",\n\t\tclassName\n\t)}\n\t{...props}\n>\n\t{#each Array.from({ length: numCircles }) as _, i}\n\t\t{@const size = mainCircleSize + i * 70}\n\t\t{@const opacity = mainCircleOpacity - i * 0.03}\n\t\t{@const animationDelay = `${i * 0.06}s`}\n\t\t<div\n\t\t\tclass=\"animate-ripple bg-foreground/25 absolute rounded-full border shadow-xl\"\n\t\t\tstyle=\"\n\t\t\t\t--i: {i};\n\t\t\t\twidth: {size}px;\n\t\t\t\theight: {size}px;\n\t\t\t\topacity: {opacity};\n\t\t\t\tanimation-delay: {animationDelay};\n\t\t\t\tborder-style: solid;\n\t\t\t\tborder-width: 1px;\n\t\t\t\tborder-color: var(--foreground);\n\t\t\t\ttop: 50%;\n\t\t\t\tleft: 50%;\n\t\t\t\ttransform: translate(-50%, -50%) scale(1);\"\n\t\t></div>\n\t{/each}\n</div>\n\n<!--\nstyle:--i={i}\n\t\t\tstyle:width=\"{size}px\"\n\t\t\tstyle:height=\"{size}px\"\n\t\t\tstyle:opacity\n\t\t\tstyle:animation-delay={animationDelay}\n\t\t\tstyle:border-style=\"solid\"\n\t\t\tstyle:border-width=\"1px\"\n\t\t\tstyle:border-color=\"var(--foreground)\"\n\t\t\tstyle:top=\"50%\"\n\t\t\tstyle:left=\"50%\"\n\t\t\tstyle:transform=\"translate(-50%, -50%) scale(1)\"\n -->\n",
			"type": "registry:component",
			"target": "magic/ripple/ripple.svelte"
		},
		{
			"content": "import Ripple from \"./ripple.svelte\";\nexport { Ripple };\n",
			"type": "registry:file",
			"target": "magic/ripple/index.ts"
		}
	]
}