{
	"$schema": "https://shadcn-svelte.com/schema/registry-item.json",
	"name": "shimmer-button",
	"title": "Shimmer Button",
	"type": "registry:block",
	"description": "A button component with an animated shimmer effect that slides across the button surface.",
	"css": {
		"@keyframes shimmer-slide": {
			"to": {
				"transform": "translate(calc(100cqw - 100%), 0)"
			}
		},
		"@keyframes spin-around": {
			"0%": {
				"transform": "translateZ(0) rotate(0)"
			},
			"15%, 35%": {
				"transform": "translateZ(0) rotate(90deg)"
			},
			"65%, 85%": {
				"transform": "translateZ(0) rotate(270deg)"
			},
			"100%": {
				"transform": "translateZ(0) rotate(360deg)"
			}
		}
	},
	"cssVars": {
		"theme": {
			"animate-shimmer-slide": "shimmer-slide var(--speed) ease-in-out infinite alternate",
			"animate-spin-around": "spin-around calc(var(--speed) * 2) infinite linear"
		}
	},
	"files": [
		{
			"content": "<script lang=\"ts\">\n\timport { cn } from \"$UTILS$\";\n\timport type { Snippet } from \"svelte\";\n\timport type { HTMLButtonAttributes } from \"svelte/elements\";\n\n\tinterface ShimmerButtonProps extends HTMLButtonAttributes {\n\t\tchildren: Snippet;\n\t\tclass?: string;\n\t\tshimmerColor?: string;\n\t\tshimmerSize?: string;\n\t\tborderRadius?: string;\n\t\tshimmerDuration?: string;\n\t\tbackground?: string;\n\t}\n\n\tlet {\n\t\tchildren,\n\t\tclass: className,\n\t\tshimmerColor = \"#ffffff\",\n\t\tshimmerSize = \"0.05em\",\n\t\tshimmerDuration = \"3s\",\n\t\tborderRadius = \"100px\",\n\t\tbackground = \"rgba(0, 0, 0, 1)\",\n\t\t...props\n\t}: ShimmerButtonProps = $props();\n</script>\n\n<button\n\tstyle=\"\n\t--spread: 90deg;\n\t--shimmer-color: {shimmerColor};\n\t--radius: {borderRadius};\n\t--speed: {shimmerDuration};\n\t--cut: {shimmerSize};\n\t--bg: {background};\n\t\"\n\tclass={cn(\n\t\t\"group relative z-0 flex cursor-pointer items-center justify-center overflow-hidden [border-radius:var(--radius)] border border-white/10 px-6 py-3 whitespace-nowrap text-white [background:var(--bg)]\",\n\t\t\"transform-gpu transition-transform duration-300 ease-in-out active:translate-y-px\",\n\t\tclassName\n\t)}\n\t{...props}\n>\n\t<!-- spark container -->\n\t<div class={cn(\"-z-30 blur-[2px]\", \"@container-[size] absolute inset-0 overflow-visible\")}>\n\t\t<!-- spark -->\n\t\t<div\n\t\t\tclass=\"animate-shimmer-slide absolute inset-0 aspect-[1] h-[100cqh] rounded-none [mask:none]\"\n\t\t>\n\t\t\t<!-- spark before -->\n\t\t\t<div\n\t\t\t\tclass=\"animate-spin-around absolute -inset-full w-auto [translate:0_0] rotate-0 [background:conic-gradient(from_calc(270deg-(var(--spread)*0.5)),transparent_0,var(--shimmer-color)_var(--spread),transparent_var(--spread))]\"\n\t\t\t></div>\n\t\t</div>\n\t</div>\n\t{@render children()}\n\n\t<!-- Highlight -->\n\t<div\n\t\tclass={cn(\n\t\t\t\"absolute inset-0 size-full\",\n\n\t\t\t\"rounded-2xl px-4 py-1.5 text-sm font-medium shadow-[inset_0_-8px_10px_#ffffff1f]\",\n\n\t\t\t// transition\n\t\t\t\"transform-gpu transition-all duration-300 ease-in-out\",\n\n\t\t\t// on hover\n\t\t\t\"group-hover:shadow-[inset_0_-6px_10px_#ffffff3f]\",\n\n\t\t\t// on click\n\t\t\t\"group-active:shadow-[inset_0_-10px_10px_#ffffff3f]\"\n\t\t)}\n\t></div>\n\n\t<!-- backdrop -->\n\t<div\n\t\tclass={cn(\n\t\t\t\"absolute inset-(--cut) -z-20 [border-radius:var(--radius)] [background:var(--bg)]\"\n\t\t)}\n\t></div>\n</button>\n",
			"type": "registry:component",
			"target": "magic/shimmer-button/shimmer-button.svelte"
		},
		{
			"content": "export { default as ShimmerButton } from \"./shimmer-button.svelte\";\n",
			"type": "registry:file",
			"target": "magic/shimmer-button/index.ts"
		}
	]
}