{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "animated-button",
  "type": "registry:ui",
  "dependencies": [
    "framer-motion"
  ],
  "files": [
    {
      "path": "components/ui/animated-button.tsx",
      "content": "'use client'\r\n\r\nimport React from 'react'\r\nimport { motion, MotionProps } from 'framer-motion'\r\nimport { cn } from '@/lib/utils'\r\n\r\ntype AnimatedButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & MotionProps & {\r\n    children?: React.ReactNode\r\n    as?: any\r\n}\r\n\r\n/**\r\n * AnimatedButton\r\n * - theme-aware: uses Tailwind `dark:` classes so it works in both light and dark mode\r\n * - accepts all native button props (onClick, className, type, etc.)\r\n */\r\nconst AnimatedButton: React.FC<AnimatedButtonProps> = ({\r\n    children = 'Browse Components',\r\n    className = '',\r\n    as = 'button',\r\n    ...rest\r\n}) => {\r\n    const Component = (motion as any)[as] || motion.button\r\n\r\n    return (\r\n        <Component\r\n            {...rest}\r\n            whileTap={{ scale: 0.97 }}\r\n            transition={{\r\n                stiffness: 20,\r\n                damping: 15,\r\n                mass: 2,\r\n                scale: {\r\n                    type: 'spring',\r\n                    stiffness: 10,\r\n                    damping: 5,\r\n                    mass: 0.1,\r\n                },\r\n            }}\r\n            // Set a CSS variable `--shine` that we override for dark mode via Tailwind.\r\n            // Tailwind JIT allows arbitrary properties like `dark:[--shine:...]` if enabled.\r\n            className={cn(\r\n                \"group inline-flex items-center justify-center px-6 py-6 rounded-md relative overflow-hidden bg-neutral-50 dark:bg-black border border-neutral-200 dark:border-neutral-800\",\r\n                \"text-neutral-900 dark:text-neutral-100 font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-neutral-950 disabled:pointer-events-none disabled:opacity-50\",\r\n                \"[--shine:rgba(0,0,0,.66)] dark:[--shine:rgba(255,255,255,.66)]\",\r\n                className\r\n            )}\r\n        >\r\n            {/* Text with shine mask */}\r\n            <motion.span\r\n                className=\"tracking-wide font-light flex items-center justify-center h-full w-full relative z-10\"\r\n                style={{\r\n                    WebkitMaskImage:\r\n                        'linear-gradient(-75deg, white calc(var(--mask-x) + 20%), transparent calc(var(--mask-x) + 30%), white calc(var(--mask-x) + 100%))',\r\n                    maskImage:\r\n                        'linear-gradient(-75deg, white calc(var(--mask-x) + 20%), transparent calc(var(--mask-x) + 30%), white calc(var(--mask-x) + 100%))',\r\n                }}\r\n                initial={{ ['--mask-x' as any]: '100%' } as any}\r\n                animate={{ ['--mask-x' as any]: '-100%' } as any}\r\n                transition={{ repeat: Infinity, duration: 1, ease: 'linear', repeatDelay: 1 }}\r\n            >\r\n                {children}\r\n            </motion.span>\r\n\r\n            {/* Border shine effect uses the --shine variable so it adapts to theme */}\r\n            <motion.span\r\n                className=\"block absolute inset-0 rounded-md p-px\"\r\n                style={{\r\n                    background: 'linear-gradient(-75deg, transparent 30%, var(--shine) 50%, transparent 70%)',\r\n                    backgroundSize: '200% 100%',\r\n                    mask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',\r\n                    maskComposite: 'exclude',\r\n                    WebkitMask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',\r\n                    WebkitMaskComposite: 'xor',\r\n                }}\r\n                initial={{ backgroundPosition: '100% 0', opacity: 0 }}\r\n                animate={{ backgroundPosition: ['100% 0', '0% 0'], opacity: [0, 1, 0] }}\r\n                transition={{ duration: 1, repeat: Infinity, ease: 'linear', repeatDelay: 1 }}\r\n            />\r\n        </Component>\r\n    )\r\n}\r\n\r\nexport default AnimatedButton\r\n",
      "type": "registry:ui",
      "target": "components/ui/animated-button.tsx"
    }
  ]
}