{
	"$schema": "https://shadcn-svelte.com/schema/registry-item.json",
	"name": "shine-border",
	"title": "Shine Border",
	"type": "registry:block",
	"description": "A component that adds a shining animated border effect with customizable colors, duration, and border width.",
	"css": {
		"@keyframes shine": {
			"0%": {
				"background-position": "0% 0%"
			},
			"50%": {
				"background-position": "100% 100%"
			},
			"100%": {
				"background-position": "0% 0%"
			}
		}
	},
	"cssVars": {
		"theme": {
			"animate-shine": "shine var(--duration) infinite linear"
		}
	},
	"files": [
		{
			"content": "<script lang=\"ts\">\n\timport { cn } from \"$UTILS$\";\n\timport type { HTMLAttributes } from \"svelte/elements\";\n\n\tinterface Props extends HTMLAttributes<HTMLDivElement> {\n\t\tborderWidth?: number;\n\t\tduration?: number;\n\t\tshineColor?: string | string[];\n\t}\n\n\tlet {\n\t\tborderWidth = 1,\n\t\tduration = 14,\n\t\tshineColor = \"#000000\",\n\t\tclass: className,\n\t\tstyle,\n\t\t...restProps\n\t}: Props = $props();\n\n\tlet computedStyle = $derived.by(() => {\n\t\tconst shineColorValue = Array.isArray(shineColor) ? shineColor.join(\",\") : shineColor;\n\n\t\tconst baseStyles = `\n\t\t\t--border-width: ${borderWidth}px;\n\t\t\t--duration: ${duration}s;\n\t\t\tbackground-image: radial-gradient(transparent,transparent, ${shineColorValue},transparent,transparent);\n\t\t\tbackground-size: 300% 300%;\n\t\t\tmask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n\t\t\t-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n\t\t\t-webkit-mask-composite: xor;\n\t\t\tmask-composite: exclude;\n\t\t\tpadding: var(--border-width);\n\t\t`;\n\n\t\treturn style ? `${baseStyles} ${style}` : baseStyles;\n\t});\n</script>\n\n<!-- svelte-ignore element_invalid_self_closing_tag -->\n<div\n\tstyle={computedStyle}\n\tclass={cn(\n\t\t\"motion-safe:animate-shine pointer-events-none absolute inset-0 size-full rounded-[inherit] will-change-[background-position]\",\n\t\tclassName\n\t)}\n\t{...restProps}\n/>\n",
			"type": "registry:component",
			"target": "magic/shine-border/shine-border.svelte"
		},
		{
			"content": "import ShineBorder from \"./shine-border.svelte\";\nexport { ShineBorder };\n",
			"type": "registry:file",
			"target": "magic/shine-border/index.ts"
		}
	]
}