{
	"$schema": "https://shadcn-svelte.com/schema/registry-item.json",
	"name": "progressive-blur",
	"type": "registry:component",
	"description": "Progressive layered blur overlay component",
	"files": [
		{
			"content": "<script lang=\"ts\">\n\timport { cn } from \"$UTILS$\";\n\n\texport const GRADIENT_ANGLES = {\n\t\ttop: 0,\n\t\tright: 90,\n\t\tbottom: 180,\n\t\tleft: 270,\n\t};\n\n\ttype ProgressiveBlurProps = {\n\t\tdirection?: keyof typeof GRADIENT_ANGLES;\n\t\tblurLayers?: number;\n\t\tclass?: string;\n\t\tblurIntensity?: number;\n\t};\n\n\tlet {\n\t\tdirection = \"bottom\",\n\t\tblurLayers = 8,\n\t\tclass: _class = \"\",\n\t\tblurIntensity = 0.25,\n\t}: ProgressiveBlurProps = $props();\n\n\tlet layers = $derived(Math.max(blurLayers, 2));\n\tlet segmentSize = $derived(1 / (blurLayers + 1));\n</script>\n\n<div class={cn(\"relative\", _class)}>\n\t{#each { length: layers } as _, index}\n\t\t{@const angle = GRADIENT_ANGLES[direction]}\n\t\t{@const gradientStops = [\n\t\t\tindex * segmentSize,\n\t\t\t(index + 1) * segmentSize,\n\t\t\t(index + 2) * segmentSize,\n\t\t\t(index + 3) * segmentSize,\n\t\t].map(\n\t\t\t(pos, posIndex) =>\n\t\t\t\t`rgba(255, 255, 255, ${posIndex === 1 || posIndex === 2 ? 1 : 0}) ${pos * 100}%`\n\t\t)}\n\t\t{@const gradient = `linear-gradient(${angle}deg, ${gradientStops.join(\", \")})`}\n\n\t\t<div\n\t\t\tclass=\"pointer-events-none absolute inset-0 rounded-[inherit]\"\n\t\t\tstyle=\"mask-image: {gradient};\n  -webkit-mask-image: {gradient};\n  backdrop-filter: blur({index * blurIntensity}px); z-index: {index * 10};\"\n\t\t></div>\n\t{/each}\n</div>\n",
			"type": "registry:component",
			"target": "magic/progressive-blur/progressive-blur.svelte"
		},
		{
			"content": "import ProgressiveBlur from \"./progressive-blur.svelte\";\nexport { ProgressiveBlur };\n",
			"type": "registry:file",
			"target": "magic/progressive-blur/index.ts"
		}
	]
}