{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "ripple-button",
  "title": "Ripple Button",
  "description": "Button with an expanding ripple animation on click, in three variants.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/pioneerui/ripple-button.tsx",
      "content": "\"use client\"\n\nimport React, { useRef, useState } from \"react\"\nimport { AnimatePresence, motion } from \"motion/react\"\nimport { cn } from \"@/lib/utils\"\n\ninterface RipplePoint {\n  id: number\n  x: number\n  y: number\n}\n\nexport interface RippleButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  children?: React.ReactNode\n  rippleColor?: string\n  variant?: \"default\" | \"outline\" | \"ghost\"\n}\n\nconst variantClasses = {\n  default: \"bg-primary text-primary-foreground hover:bg-primary/90\",\n  outline: \"border border-input bg-background hover:bg-accent hover:text-accent-foreground\",\n  ghost: \"hover:bg-accent hover:text-accent-foreground\",\n}\n\nexport function RippleButton({\n  children,\n  className,\n  rippleColor = \"rgba(255,255,255,0.35)\",\n  variant = \"default\",\n  onClick,\n  ...props\n}: RippleButtonProps) {\n  const [ripples, setRipples] = useState<RipplePoint[]>([])\n  const btnRef = useRef<HTMLButtonElement>(null)\n  const nextId = useRef(0)\n\n  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n    if (!btnRef.current) return\n    const rect = btnRef.current.getBoundingClientRect()\n    const x = e.clientX - rect.left\n    const y = e.clientY - rect.top\n    const id = nextId.current++\n    setRipples((prev) => [...prev, { id, x, y }])\n    setTimeout(() => {\n      setRipples((prev) => prev.filter((r) => r.id !== id))\n    }, 700)\n    onClick?.(e)\n  }\n\n  return (\n    <button\n      ref={btnRef}\n      onClick={handleClick}\n      className={cn(\n        \"relative inline-flex cursor-pointer items-center justify-center overflow-hidden rounded-lg px-6 py-2.5 text-sm font-semibold transition-colors\",\n        variantClasses[variant],\n        className,\n      )}\n      {...props}\n    >\n      <AnimatePresence>\n        {ripples.map((r) => (\n          <motion.span\n            key={r.id}\n            className=\"pointer-events-none absolute rounded-full\"\n            style={{\n              left: r.x,\n              top: r.y,\n              x: \"-50%\",\n              y: \"-50%\",\n              background: rippleColor,\n            }}\n            initial={{ width: 0, height: 0, opacity: 1 }}\n            animate={{ width: 400, height: 400, opacity: 0 }}\n            exit={{ opacity: 0 }}\n            transition={{ duration: 0.6, ease: \"easeOut\" }}\n          />\n        ))}\n      </AnimatePresence>\n      <span className=\"relative z-10\">{children}</span>\n    </button>\n  )\n}\n",
      "type": "registry:ui",
      "target": "components/pioneerui/ripple-button.tsx"
    }
  ],
  "type": "registry:ui"
}