{
  "name": "button",
  "dependencies": [
    "@radix-ui/react-slot",
    "class-variance-authority",
    "motion"
  ],
  "files": [
    {
      "path": "ui/button.tsx",
      "content": "import { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { motion, useMotionTemplate, useMotionValue } from \"motion/react\";\nimport * as React from \"react\";\n\nconst buttonVariants = cva(\n  \"group relative inline-flex items-center justify-center gap-2 overflow-hidden whitespace-nowrap rounded-xl font-semibold text-sm transition-all duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"bg-gradient-to-br from-primary via-primary to-primary/80 text-primary-foreground shadow-lg shadow-primary/25 before:absolute before:inset-0 before:bg-gradient-to-br before:from-white/20 before:to-transparent before:opacity-0 before:transition-opacity hover:scale-[1.02] hover:shadow-primary/30 hover:shadow-xl hover:before:opacity-100 active:scale-[0.98]\",\n        destructive:\n          \"bg-gradient-to-br from-destructive via-destructive to-destructive/80 text-destructive-foreground shadow-destructive/25 shadow-lg before:absolute before:inset-0 before:bg-gradient-to-br before:from-white/20 before:to-transparent before:opacity-0 before:transition-opacity hover:scale-[1.02] hover:shadow-destructive/30 hover:shadow-xl hover:before:opacity-100 active:scale-[0.98]\",\n        outline:\n          \"border-2 border-input bg-background/50 shadow-sm backdrop-blur-sm hover:scale-[1.02] hover:border-accent hover:bg-accent hover:text-accent-foreground hover:shadow-md active:scale-[0.98]\",\n        secondary:\n          \"bg-gradient-to-br from-secondary via-secondary to-secondary/80 text-secondary-foreground shadow-lg shadow-secondary/25 before:absolute before:inset-0 before:bg-gradient-to-br before:from-white/20 before:to-transparent before:opacity-0 before:transition-opacity hover:scale-[1.02] hover:shadow-secondary/30 hover:shadow-xl hover:before:opacity-100 active:scale-[0.98]\",\n        ghost:\n          \"backdrop-blur-sm hover:scale-[1.02] hover:bg-accent/80 hover:text-accent-foreground active:scale-[0.98]\",\n        link: \"text-primary underline-offset-4 transition-colors hover:text-primary/80 hover:underline\",\n        shimmer:\n          \"relative animate-shimmer border border-slate-800/50 bg-[length:200%_100%] bg-[linear-gradient(110deg,#000103,45%,#1e2631,55%,#000103)] text-white shadow-2xl shadow-primary/30 before:absolute before:inset-0 before:translate-x-[-200%] before:animate-shimmer-slide before:bg-gradient-to-r before:from-transparent before:via-white/10 before:to-transparent hover:scale-[1.02] hover:shadow-primary/50 active:scale-[0.98]\",\n        glow: \"relative animate-gradient-x bg-gradient-to-r from-violet-600 via-purple-600 to-fuchsia-600 text-white shadow-lg shadow-purple-500/50 before:absolute before:inset-[-2px] before:-z-10 before:rounded-xl before:bg-gradient-to-r before:from-violet-600 before:via-purple-600 before:to-fuchsia-600 before:opacity-75 before:blur-md hover:scale-[1.02] hover:shadow-2xl hover:shadow-purple-500/60 active:scale-[0.98]\",\n      },\n      size: {\n        default: \"h-10 px-6 py-2\",\n        sm: \"h-8 rounded-lg px-4 text-xs\",\n        lg: \"h-12 rounded-xl px-10 text-base\",\n        icon: \"h-10 w-10\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  },\n);\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean;\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ className, variant, size, asChild = false, children, ...props }, ref) => {\n    const Comp = asChild ? Slot : \"button\";\n    const mouseX = useMotionValue(0);\n    const mouseY = useMotionValue(0);\n\n    const handleMouseMove = (e: React.MouseEvent<HTMLButtonElement>) => {\n      const { left, top } = e.currentTarget.getBoundingClientRect();\n      mouseX.set(e.clientX - left);\n      mouseY.set(e.clientY - top);\n    };\n\n    const background = useMotionTemplate`radial-gradient(circle at ${mouseX}px ${mouseY}px, rgba(255,255,255,0.15), transparent 80%)`;\n\n    if (asChild) {\n      return (\n        <Comp\n          className={`${buttonVariants({ variant, size })} ${className || \"\"}`}\n          ref={ref}\n          {...props}\n        >\n          {children}\n        </Comp>\n      );\n    }\n\n    const MotionButton = motion.button;\n\n    return (\n      <MotionButton\n        className={`${buttonVariants({ variant, size })} ${className || \"\"}`}\n        ref={ref}\n        onMouseMove={handleMouseMove}\n        whileHover={{ scale: variant === \"link\" ? 1 : 1.02 }}\n        whileTap={{ scale: variant === \"link\" ? 1 : 0.98 }}\n        transition={{ type: \"spring\", stiffness: 400, damping: 17 }}\n        // biome-ignore lint/suspicious/noExplicitAny: Motion button requires any for props compatibility\n        {...(props as any)}\n      >\n        {variant !== \"link\" && variant !== \"ghost\" && (\n          <motion.div\n            className=\"pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100\"\n            style={{ background }}\n          />\n        )}\n        <span className=\"relative z-10 flex items-center justify-center gap-2\">\n          {children}\n        </span>\n      </MotionButton>\n    );\n  },\n);\nButton.displayName = \"Button\";\n\nexport { Button, buttonVariants };\n",
      "type": "registry:ui",
      "target": ""
    }
  ],
  "type": "registry:ui"
}