{
	"$schema": "https://shadcn-svelte.com/schema/registry-item.json",
	"name": "rainbow-button",
	"title": "Rainbow Button",
	"type": "registry:block",
	"description": "A button component with animated rainbow gradient borders and background that cycles through multiple colors.",
	"dependencies": [
		"bits-ui",
		"tailwind-variants"
	],
	"devDependencies": [
		"bits-ui@^2.16.3",
		"@internationalized/date@^3.12.0",
		"tailwind-variants@^3.2.2"
	],
	"css": {
		"@keyframes rainbow": {
			"0%": {
				"background-position": "0%"
			},
			"100%": {
				"background-position": "200%"
			}
		}
	},
	"cssVars": {
		"theme": {
			"animate-rainbow": "rainbow var(--speed, 2s) infinite linear"
		}
	},
	"files": [
		{
			"content": "<script lang=\"ts\" module>\n\texport const buttonVariants = tv({\n\t\tbase: cn(\n\t\t\t\"group animate-rainbow relative cursor-pointer transition-all\",\n\t\t\t\"inline-flex shrink-0 items-center justify-center gap-2\",\n\t\t\t\"aria-invalid:border-destructive rounded-sm outline-none focus-visible:ring-[3px]\",\n\t\t\t\"text-sm font-medium whitespace-nowrap\",\n\t\t\t\"disabled:pointer-events-none disabled:opacity-50\",\n\t\t\t\"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\"\n\t\t),\n\t\tvariants: {\n\t\t\tvariant: {\n\t\t\t\tdefault:\n\t\t\t\t\t\"text-primary-foreground before:animate-rainbow border-0 bg-[linear-gradient(#121213,#121213),linear-gradient(#121213_50%,rgba(18,18,19,0.6)_80%,rgba(18,18,19,0)),linear-gradient(90deg,var(--color-1),var(--color-5),var(--color-3),var(--color-4),var(--color-2))] bg-[length:200%] [background-clip:padding-box,border-box,border-box] [background-origin:border-box] [border:calc(0.125rem)_solid_transparent] before:absolute before:bottom-[-20%] before:left-1/2 before:z-0 before:h-1/5 before:w-3/5 before:-translate-x-1/2 before:bg-[linear-gradient(90deg,var(--color-1),var(--color-5),var(--color-3),var(--color-4),var(--color-2))] before:[filter:blur(0.75rem)] dark:bg-[linear-gradient(#fff,#fff),linear-gradient(#fff_50%,rgba(255,255,255,0.6)_80%,rgba(0,0,0,0)),linear-gradient(90deg,var(--color-1),var(--color-5),var(--color-3),var(--color-4),var(--color-2))]\",\n\t\t\t\toutline:\n\t\t\t\t\t\"border-input text-accent-foreground before:animate-rainbow border border-b-transparent bg-[linear-gradient(#ffffff,#ffffff),linear-gradient(#ffffff_50%,rgba(18,18,19,0.6)_80%,rgba(18,18,19,0)),linear-gradient(90deg,var(--color-1),var(--color-5),var(--color-3),var(--color-4),var(--color-2))] bg-[length:200%] [background-clip:padding-box,border-box,border-box] [background-origin:border-box] before:absolute before:bottom-[-20%] before:left-1/2 before:z-0 before:h-1/5 before:w-3/5 before:-translate-x-1/2 before:bg-[linear-gradient(90deg,var(--color-1),var(--color-5),var(--color-3),var(--color-4),var(--color-2))] before:[filter:blur(0.75rem)] dark:bg-[linear-gradient(#0a0a0a,#0a0a0a),linear-gradient(#0a0a0a_50%,rgba(255,255,255,0.6)_80%,rgba(0,0,0,0)),linear-gradient(90deg,var(--color-1),var(--color-5),var(--color-3),var(--color-4),var(--color-2))]\",\n\t\t\t},\n\t\t\tsize: {\n\t\t\t\tdefault: \"h-9 px-4 py-2\",\n\t\t\t\tsm: \"h-8 rounded-xl px-3 text-xs\",\n\t\t\t\tlg: \"h-11 rounded-xl px-8\",\n\t\t\t\ticon: \"size-9\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tvariant: \"default\",\n\t\t\tsize: \"default\",\n\t\t},\n\t});\n\texport type ButtonVariant = VariantProps<typeof buttonVariants>[\"variant\"];\n\texport type ButtonSize = VariantProps<typeof buttonVariants>[\"size\"];\n\n\texport type ButtonProps = WithElementRef<HTMLButtonAttributes> &\n\t\tWithElementRef<HTMLAnchorAttributes> & {\n\t\t\tvariant?: ButtonVariant;\n\t\t\tsize?: ButtonSize;\n\t\t};\n</script>\n\n<script lang=\"ts\">\n\timport { cn } from \"$UTILS$\";\n\timport type { WithElementRef } from \"bits-ui\";\n\timport type { HTMLAnchorAttributes, HTMLButtonAttributes } from \"svelte/elements\";\n\timport { tv, type VariantProps } from \"tailwind-variants\";\n\n\tlet {\n\t\tchildren,\n\t\tclass: className = \"\",\n\t\tvariant = \"default\",\n\t\tsize = \"default\",\n\t\t...props\n\t}: ButtonProps = $props();\n</script>\n\n<button class={cn(buttonVariants({ variant, size }), className)} {...props}>\n\t{@render children?.()}\n</button>\n",
			"type": "registry:component",
			"target": "magic/rainbow-button/rainbow-button.svelte"
		},
		{
			"content": "export { default as RainbowButton } from \"./rainbow-button.svelte\";\n",
			"type": "registry:file",
			"target": "magic/rainbow-button/index.ts"
		}
	]
}