{
	"$schema": "https://shadcn-svelte.com/schema/registry-item.json",
	"name": "progressive-blur",
	"title": "Progressive Blur",
	"type": "registry:block",
	"description": "A component that creates a progressive blur effect at the top, bottom, or both edges of a container with customizable blur levels and positioning.",
	"files": [
		{
			"content": "<script lang=\"ts\">\n\timport { cn } from \"$UTILS$\";\n\timport type { HTMLAttributes } from \"svelte/elements\";\n\n\tinterface ProgressiveBlurProps extends HTMLAttributes<HTMLDivElement> {\n\t\t/**\n\t\t * Additional CSS classes\n\t\t */\n\t\tclass?: string;\n\t\t/**\n\t\t * Height of the blur area\n\t\t */\n\t\theight?: string;\n\t\t/**\n\t\t * Position of the blur effect\n\t\t */\n\t\tposition?: \"top\" | \"bottom\" | \"both\";\n\t\t/**\n\t\t * Array of blur levels in pixels\n\t\t */\n\t\tblurLevels?: number[];\n\t}\n\n\tlet {\n\t\tclass: className,\n\t\theight = \"30%\",\n\t\tposition = \"bottom\",\n\t\tblurLevels = [0.5, 1, 2, 4, 8, 16, 32, 64],\n\t\t...props\n\t}: ProgressiveBlurProps = $props();\n\n\t// Create array with length equal to blurLevels.length - 2 (for before/after pseudo elements)\n\tconst divElements = $derived(Array(blurLevels.length - 2).fill(null));\n\n\tconst getMaskGradient = (index: number) => {\n\t\tconst blurIndex = index + 1;\n\t\tconst startPercent = blurIndex * 12.5;\n\t\tconst midPercent = (blurIndex + 1) * 12.5;\n\t\tconst endPercent = (blurIndex + 2) * 12.5;\n\n\t\tif (position === \"bottom\") {\n\t\t\treturn `linear-gradient(to bottom, rgba(0,0,0,0) ${startPercent}%, rgba(0,0,0,1) ${midPercent}%, rgba(0,0,0,1) ${endPercent}%, rgba(0,0,0,0) ${endPercent + 12.5}%)`;\n\t\t} else if (position === \"top\") {\n\t\t\treturn `linear-gradient(to top, rgba(0,0,0,0) ${startPercent}%, rgba(0,0,0,1) ${midPercent}%, rgba(0,0,0,1) ${endPercent}%, rgba(0,0,0,0) ${endPercent + 12.5}%)`;\n\t\t} else {\n\t\t\treturn `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,1) 5%, rgba(0,0,0,1) 95%, rgba(0,0,0,0) 100%)`;\n\t\t}\n\t};\n\n\tconst getFirstLayerMask = () => {\n\t\tif (position === \"bottom\") {\n\t\t\treturn `linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 12.5%, rgba(0,0,0,1) 25%, rgba(0,0,0,0) 37.5%)`;\n\t\t} else if (position === \"top\") {\n\t\t\treturn `linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 12.5%, rgba(0,0,0,1) 25%, rgba(0,0,0,0) 37.5%)`;\n\t\t} else {\n\t\t\treturn `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,1) 5%, rgba(0,0,0,1) 95%, rgba(0,0,0,0) 100%)`;\n\t\t}\n\t};\n\n\tconst getLastLayerMask = () => {\n\t\tif (position === \"bottom\") {\n\t\t\treturn `linear-gradient(to bottom, rgba(0,0,0,0) 87.5%, rgba(0,0,0,1) 100%)`;\n\t\t} else if (position === \"top\") {\n\t\t\treturn `linear-gradient(to top, rgba(0,0,0,0) 87.5%, rgba(0,0,0,1) 100%)`;\n\t\t} else {\n\t\t\treturn `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,1) 5%, rgba(0,0,0,1) 95%, rgba(0,0,0,0) 100%)`;\n\t\t}\n\t};\n</script>\n\n<div\n\tclass={cn(\n\t\t\"gradient-blur pointer-events-none absolute inset-x-0 z-10\",\n\t\tclassName,\n\t\tposition === \"top\" ? \"top-0\" : position === \"bottom\" ? \"bottom-0\" : \"inset-y-0\"\n\t)}\n\tstyle:height={position === \"both\" ? \"100%\" : height}\n\t{...props}\n>\n\t<!-- First blur layer -->\n\t<div\n\t\tclass=\"absolute inset-0\"\n\t\tstyle:z-index={1}\n\t\tstyle:backdrop-filter=\"blur({blurLevels[0]}px)\"\n\t\tstyle:-webkit-backdrop-filter=\"blur({blurLevels[0]}px)\"\n\t\tstyle:mask-image={getFirstLayerMask()}\n\t\tstyle:-webkit-mask-image={getFirstLayerMask()}\n\t></div>\n\n\t<!-- Middle blur layers -->\n\t{#each divElements as _, index (index)}\n\t\t{@const blurIndex = index + 1}\n\t\t{@const maskGradient = getMaskGradient(index)}\n\t\t<div\n\t\t\tclass=\"absolute inset-0\"\n\t\t\tstyle:z-index={index + 2}\n\t\t\tstyle:backdrop-filter=\"blur({blurLevels[blurIndex]}px)\"\n\t\t\tstyle:-webkit-backdrop-filter=\"blur({blurLevels[blurIndex]}px)\"\n\t\t\tstyle:mask-image={maskGradient}\n\t\t\tstyle:-webkit-mask-image={maskGradient}\n\t\t></div>\n\t{/each}\n\n\t<!-- Last blur layer -->\n\t<div\n\t\tclass=\"absolute inset-0\"\n\t\tstyle:z-index={blurLevels.length}\n\t\tstyle:backdrop-filter=\"blur({blurLevels[blurLevels.length - 1]}px)\"\n\t\tstyle:-webkit-backdrop-filter=\"blur({blurLevels[blurLevels.length - 1]}px)\"\n\t\tstyle:mask-image={getLastLayerMask()}\n\t\tstyle:-webkit-mask-image={getLastLayerMask()}\n\t></div>\n</div>\n",
			"type": "registry:component",
			"target": "magic/progressive-blur/progressive-blur.svelte"
		},
		{
			"content": "export { default as ProgressiveBlur } from \"./progressive-blur.svelte\";\n",
			"type": "registry:file",
			"target": "magic/progressive-blur/index.ts"
		}
	]
}