{
	"$schema": "https://shadcn-svelte.com/schema/registry-item.json",
	"name": "border-beam",
	"title": "Border Beam",
	"type": "registry:block",
	"description": "A component for creating animated border beam effects around elements with customizable gradients, duration, and direction.",
	"dependencies": [
		"motion-sv"
	],
	"files": [
		{
			"content": "<script lang=\"ts\">\n\timport { motion, type Transition } from \"motion-sv\";\n\timport { cn } from \"$UTILS$\";\n\n\tinterface BorderBeamProps {\n\t\tsize?: number;\n\t\tduration?: number;\n\t\tdelay?: number;\n\t\tcolorFrom?: string;\n\t\tcolorTo?: string;\n\t\ttransition?: Transition;\n\t\tclass?: string;\n\t\tstyle?: string;\n\t\treverse?: boolean;\n\t\tinitialOffset?: number;\n\t\tborderWidth?: number;\n\t}\n\n\tlet {\n\t\tclass: className,\n\t\tsize = 50,\n\t\tdelay = 0,\n\t\tduration = 6,\n\t\tcolorFrom = \"#ffaa40\",\n\t\tcolorTo = \"#9c40ff\",\n\t\ttransition,\n\t\treverse = false,\n\t\tinitialOffset = 0,\n\t\tborderWidth = 1,\n\t}: BorderBeamProps = $props();\n\n\tconst containerStyle = $derived(`--border-beam-width: ${borderWidth}px;`);\n\n\tconst beamStyle = $derived({\n\t\twidth: size,\n\t\toffsetPath: `rect(0 auto auto 0 round ${size}px)`,\n\t\t\"--color-from\": colorFrom,\n\t\t\"--color-to\": colorTo,\n\t} as any);\n\n\tconst animateConfig = $derived({\n\t\toffsetDistance: reverse\n\t\t\t? [`${100 - initialOffset}%`, `${-initialOffset}%`]\n\t\t\t: [`${initialOffset}%`, `${100 + initialOffset}%`],\n\t});\n\n\tconst transitionConfig = $derived({\n\t\trepeat: Infinity,\n\t\tease: \"linear\" as const,\n\t\tduration,\n\t\tdelay: -delay,\n\t\t...transition,\n\t} as any);\n</script>\n\n<div\n\tclass=\"pointer-events-none absolute inset-0 rounded-[inherit] border-(length:--border-beam-width) border-transparent mask-[linear-gradient(transparent,transparent),linear-gradient(#000,#000)] mask-intersect [mask-clip:padding-box,border-box]\"\n\tstyle={containerStyle}\n>\n\t<motion.div\n\t\tclass={cn(\n\t\t\t\"absolute aspect-square\",\n\t\t\t\"bg-linear-to-l from-(--color-from) via-(--color-to) to-transparent\",\n\t\t\tclassName\n\t\t)}\n\t\tstyle={beamStyle}\n\t\tinitial={{ offsetDistance: `${initialOffset}%` }}\n\t\tanimate={animateConfig}\n\t\ttransition={transitionConfig}\n\t/>\n</div>\n",
			"type": "registry:component",
			"target": "magic/border-beam/border-beam.svelte"
		},
		{
			"content": "import BorderBeam from \"./border-beam.svelte\";\nexport { BorderBeam };\n",
			"type": "registry:file",
			"target": "magic/border-beam/index.ts"
		}
	]
}