{
	"$schema": "https://shadcn-svelte.com/schema/registry-item.json",
	"name": "blur-fade",
	"title": "Blur Fade",
	"type": "registry:block",
	"description": "A component that animates content with blur and fade effects, supporting directional movement and intersection observer triggering.",
	"dependencies": [
		"runed",
		"motion-sv"
	],
	"files": [
		{
			"content": "<script lang=\"ts\">\n\timport { motion, AnimatePresence, useInView, type Variants } from \"motion-sv\";\n\timport { cn } from \"$UTILS$\";\n\timport type { Snippet } from \"svelte\";\n\n\ttype MarginType = string;\n\n\tinterface BlurFadeProps {\n\t\tchildren: Snippet;\n\t\tclass?: string;\n\t\tvariant?: Variants;\n\t\texit?: boolean;\n\t\tduration?: number;\n\t\tdelay?: number;\n\t\toffset?: number;\n\t\tdirection?: \"up\" | \"down\" | \"left\" | \"right\";\n\t\ttriggerOnView?: boolean;\n\t\tinViewMargin?: MarginType;\n\t\tblur?: string;\n\t\tonce?: boolean;\n\t}\n\n\tlet {\n\t\tchildren,\n\t\tclass: className,\n\t\tvariant,\n\t\texit = false,\n\t\tduration = 0.4,\n\t\tdelay = 0,\n\t\toffset = 6,\n\t\tdirection = \"down\",\n\t\ttriggerOnView = true,\n\t\tinViewMargin = \"-50px\",\n\t\tblur = \"6px\",\n\t\tonce = true,\n\t}: BlurFadeProps = $props();\n\n\tlet containerRef: HTMLDivElement | null = $state(null);\n\tlet view = useInView(\n\t\t() => containerRef!,\n\t\t() =>\n\t\t\t({\n\t\t\t\tonce,\n\t\t\t\tamount: 0.1,\n\t\t\t\tmargin: inViewMargin,\n\t\t\t}) as any\n\t);\n\n\tconst defaultVariants = $derived.by(() => {\n\t\treturn {\n\t\t\thidden: {\n\t\t\t\t[direction === \"left\" || direction === \"right\" ? \"x\" : \"y\"]:\n\t\t\t\t\tdirection === \"right\" || direction === \"down\" ? -offset : offset,\n\t\t\t\topacity: 0,\n\t\t\t\tfilter: `blur(${blur})`,\n\t\t\t},\n\t\t\tvisible: {\n\t\t\t\t[direction === \"left\" || direction === \"right\" ? \"x\" : \"y\"]: 0,\n\t\t\t\topacity: 1,\n\t\t\t\tfilter: `blur(0px)`,\n\t\t\t},\n\t\t} as Variants;\n\t});\n\n\tconst combinedVariants = $derived(variant || defaultVariants);\n\tconst shouldAnimate = $derived(!triggerOnView || view.current);\n</script>\n\n<div bind:this={containerRef}>\n\t<AnimatePresence>\n\t\t<motion.div\n\t\t\tinitial=\"hidden\"\n\t\t\tanimate={shouldAnimate ? \"visible\" : \"hidden\"}\n\t\t\texit={exit ? \"hidden\" : undefined}\n\t\t\tvariants={combinedVariants}\n\t\t\ttransition={{\n\t\t\t\tdelay: 0.04 + delay,\n\t\t\t\tduration,\n\t\t\t\tease: \"easeOut\",\n\t\t\t}}\n\t\t\tclass={cn(className)}\n\t\t>\n\t\t\t{@render children()}\n\t\t</motion.div>\n\t</AnimatePresence>\n</div>\n",
			"type": "registry:component",
			"target": "magic/blur-fade/blur-fade.svelte"
		},
		{
			"content": "export { default as BlurFade } from \"./blur-fade.svelte\";\n",
			"type": "registry:file",
			"target": "magic/blur-fade/index.ts"
		}
	]
}