{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "ripple-click-button-shadcnui",
  "type": "registry:ui",
  "title": "Ripple Click Effect",
  "description": "Material design inspired ripple effect on click",
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/micro/buttons/ripple-click.tsx",
      "content": "\"use client\";\n\nimport { motion } from \"framer-motion\";\nimport { useState } from \"react\";\n\ntype Ripple = {\n  x: number;\n  y: number;\n  id: number;\n};\n\nexport function RippleClickButton() {\n  const [ripples, setRipples] = useState<Ripple[]>([]);\n\n  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n    const button = e.currentTarget;\n    const rect = button.getBoundingClientRect();\n    const x = e.clientX - rect.left;\n    const y = e.clientY - rect.top;\n\n    const newRipple = { x, y, id: Date.now() };\n    setRipples([...ripples, newRipple]);\n\n    setTimeout(() => {\n      setRipples((prev) => prev.filter((r) => r.id !== newRipple.id));\n    }, 600);\n  };\n\n  return (\n    <div className=\"flex items-center justify-center p-12\">\n      <button\n        onClick={handleClick}\n        className=\"relative overflow-hidden rounded-lg bg-accent px-8 py-3 font-semibold text-[var(--muted-foreground)] shadow-lg\"\n      >\n        Click Me\n        {ripples.map((ripple) => (\n          <motion.span\n            key={ripple.id}\n            initial={{ scale: 0, opacity: 1 }}\n            animate={{ scale: 4, opacity: 0 }}\n            transition={{ duration: 0.6, ease: \"easeOut\" }}\n            style={{\n              position: \"absolute\",\n              left: ripple.x,\n              top: ripple.y,\n              width: 20,\n              height: 20,\n              borderRadius: \"50%\",\n              backgroundColor: \"rgba(255, 255, 255, 0.6)\",\n              transform: \"translate(-50%, -50%)\",\n            }}\n          />\n        ))}\n      </button>\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/uitripled/ripple-click-button-shadcnui.tsx"
    }
  ]
}