{
  "$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\";\n\nimport React from \"react\";\nimport { motion, MotionProps } from \"framer-motion\";\nimport { cn } from \"@/lib/utils\";\n\ntype AnimatedButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> &\n  MotionProps & {\n    children?: React.ReactNode;\n    as?: any;\n  };\n\n/**\n * AnimatedButton\n * - theme-aware: uses Tailwind `dark:` classes so it works in both light and dark mode\n * - accepts all native button props (onClick, className, type, etc.)\n */\nconst AnimatedButton: React.FC<AnimatedButtonProps> = ({\n  children = \"Browse Components\",\n  className = \"\",\n  as = \"button\",\n  ...rest\n}) => {\n  const Component = (motion as any)[as] || motion.button;\n\n  return (\n    <Component\n      {...rest}\n      whileHover={{ scale: 1.01 }}\n      whileTap={{ scale: 0.97 }}\n      transition={{\n        type: \"spring\",\n        stiffness: 500,\n        damping: 30,\n        mass: 0.5,\n      }}\n      // Set a CSS variable `--shine` that we override for dark mode via Tailwind.\n      className={cn(\n        \"group inline-flex items-center justify-center px-6 py-2 rounded-md relative overflow-hidden bg-neutral-50 dark:bg-black border border-neutral-200 dark:border-[#222]\",\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\",\n        \"[--shine:rgba(0,0,0,.66)] dark:[--shine:rgba(255,255,255,.66)]\",\n        className,\n      )}\n    >\n      {/* Text with shine mask */}\n      <motion.span\n        className=\"tracking-wide font-light flex items-center justify-center h-full w-full relative z-10\"\n        style={{\n          WebkitMaskImage:\n            \"linear-gradient(-75deg, white calc(var(--mask-x) + 20%), transparent calc(var(--mask-x) + 30%), white calc(var(--mask-x) + 100%))\",\n          maskImage:\n            \"linear-gradient(-75deg, white calc(var(--mask-x) + 20%), transparent calc(var(--mask-x) + 30%), white calc(var(--mask-x) + 100%))\",\n        }}\n        initial={{ [\"--mask-x\" as any]: \"100%\" } as any}\n        animate={{ [\"--mask-x\" as any]: \"-100%\" } as any}\n        transition={{\n          repeat: Infinity,\n          duration: 1,\n          ease: \"linear\",\n          repeatDelay: 1,\n        }}\n      >\n        {children}\n      </motion.span>\n\n      {/* Border shine effect uses the --shine variable so it adapts to theme */}\n      <motion.span\n        className=\"block absolute inset-0 rounded-md p-px\"\n        style={{\n          background:\n            \"linear-gradient(-75deg, transparent 30%, var(--shine) 50%, transparent 70%)\",\n          backgroundSize: \"200% 100%\",\n          mask: \"linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)\",\n          maskComposite: \"exclude\",\n          WebkitMask:\n            \"linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)\",\n          WebkitMaskComposite: \"xor\",\n        }}\n        initial={{ backgroundPosition: \"100% 0\", opacity: 0 }}\n        animate={{ backgroundPosition: [\"100% 0\", \"0% 0\"], opacity: [0, 1, 0] }}\n        transition={{\n          duration: 1,\n          repeat: Infinity,\n          ease: \"linear\",\n          repeatDelay: 1,\n        }}\n      />\n    </Component>\n  );\n};\n\nexport default AnimatedButton;\n",
      "type": "registry:ui",
      "target": "components/ui/animated-button.tsx"
    }
  ]
}