{
	"$schema": "https://shadcn-svelte.com/schema/registry-item.json",
	"name": "shiny-button",
	"title": "Shiny Button",
	"type": "registry:block",
	"description": "A button component with a shiny gradient mask effect that animates across the text on hover and press.",
	"dependencies": [
		"motion-sv"
	],
	"files": [
		{
			"content": "<script lang=\"ts\">\n\timport { motion, type MotionProps, type Transition } from \"motion-sv\";\n\timport { cn } from \"$UTILS$\";\n\timport type { Snippet } from \"svelte\";\n\timport type { HTMLButtonAttributes } from \"svelte/elements\";\n\n\tinterface ShinyButtonProps extends HTMLButtonAttributes {\n\t\tchildren: Snippet;\n\t\tclass?: string;\n\t}\n\n\tlet { children, class: className, ...props }: ShinyButtonProps = $props();\n\n\tlet animationProps: MotionProps = {\n\t\tinitial: { \"--x\": \"100%\", scale: 0.8 },\n\t\tanimate: { \"--x\": \"-100%\", scale: 1 },\n\t\t// whileTap: { scale: 0.95 },\n\t\twhilePress: { scale: 0.95 },\n\t\ttransition: {\n\t\t\trepeat: Infinity,\n\t\t\trepeatType: \"loop\",\n\t\t\trepeatDelay: 1,\n\t\t\ttype: \"spring\",\n\t\t\tstiffness: 20,\n\t\t\tdamping: 15,\n\t\t\tmass: 2,\n\t\t\tscale: {\n\t\t\t\ttype: \"spring\",\n\t\t\t\tstiffness: 200,\n\t\t\t\tdamping: 5,\n\t\t\t\tmass: 0.5,\n\t\t\t},\n\t\t},\n\t};\n</script>\n\n<motion.button\n\tclass={cn(\n\t\t\"relative cursor-pointer rounded-lg border px-6 py-2 font-medium backdrop-blur-xl transition-shadow duration-300 ease-in-out hover:shadow dark:bg-[radial-gradient(circle_at_50%_0%,var(--primary)/10%_0%,transparent_60%)] dark:hover:shadow-[0_0_20px_var(--primary)/10%]\",\n\t\tclassName\n\t)}\n\t{...animationProps}\n>\n\t<span\n\t\tclass=\"relative block size-full text-sm tracking-wide text-[rgb(0,0,0,65%)] uppercase dark:font-light dark:text-[rgb(255,255,255,90%)]\"\n\t\tstyle=\"mask-image: linear-gradient(-75deg,var(--primary) calc(var(--x) + 20%),transparent calc(var(--x) + 30%),var(--primary) calc(var(--x) + 100%));\"\n\t>\n\t\t{@render children()}\n\t</span>\n\t<span\n\t\tstyle=\"mask: linear-gradient(rgb(0,0,0), rgb(0,0,0)) content-box exclude,linear-gradient(rgb(0,0,0), rgb(0,0,0));\n\t\t-webkit-mask: linear-gradient(rgb(0,0,0), rgb(0,0,0)) content-box exclude,linear-gradient(rgb(0,0,0), rgb(0,0,0));\n\t\tbackground-image: linear-gradient(-75deg,var(--primary)/10% calc(var(--x)+20%),var(--primary)/50% calc(var(--x)+25%),var(--primary)/10% calc(var(--x)+100%))\"\n\t\tclass=\"absolute inset-0 z-10 block rounded-[inherit] p-px\"\n\t>\n\t</span>\n</motion.button>\n",
			"type": "registry:component",
			"target": "magic/shiny-button/shiny-button.svelte"
		},
		{
			"content": "export { default as ShinyButton } from \"./shiny-button.svelte\";\n",
			"type": "registry:file",
			"target": "magic/shiny-button/index.ts"
		}
	]
}