{
  "name": "particle-button",
  "type": "registry:component",
  "dependencies": [
    "lucide-react",
    "motion"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "type": "registry:component",
      "content": "\"use client\";\n\n/**\n * @author: @dorianbaffier\n * @description: Particle Button\n * @version: 1.0.0\n * @date: 2025-06-26\n * @license: MIT\n * @website: https://kokonutui.com\n * @github: https://github.com/kokonut-labs/kokonutui\n */\n\nimport { MousePointerClick } from \"lucide-react\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport { type RefObject, useRef, useState } from \"react\";\nimport type { ButtonProps } from \"@/components/ui/button\";\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\n\ninterface ParticleButtonProps extends ButtonProps {\n  onSuccess?: () => void;\n  successDuration?: number;\n}\n\nfunction SuccessParticles({\n  buttonRef,\n}: {\n  buttonRef: React.RefObject<HTMLButtonElement>;\n}) {\n  const rect = buttonRef.current?.getBoundingClientRect();\n  if (!rect) return null;\n\n  const centerX = rect.left + rect.width / 2;\n  const centerY = rect.top + rect.height / 2;\n\n  return (\n    <AnimatePresence>\n      {[...Array(6)].map((_, i) => (\n        <motion.div\n          animate={{\n            scale: [0, 1, 0],\n            x: [0, (i % 2 ? 1 : -1) * (Math.random() * 50 + 20)],\n            y: [0, -Math.random() * 50 - 20],\n          }}\n          className=\"fixed h-1 w-1 rounded-full bg-black dark:bg-white\"\n          initial={{\n            scale: 0,\n            x: 0,\n            y: 0,\n          }}\n          key={i}\n          style={{ left: centerX, top: centerY }}\n          transition={{\n            duration: 0.6,\n            delay: i * 0.1,\n            ease: \"easeOut\",\n          }}\n        />\n      ))}\n    </AnimatePresence>\n  );\n}\n\nexport default function ParticleButton({\n  children,\n  onClick,\n  onSuccess,\n  successDuration = 1000,\n  className,\n  ...props\n}: ParticleButtonProps) {\n  const [showParticles, setShowParticles] = useState(false);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n\n  const handleClick = async (e: React.MouseEvent<HTMLButtonElement>) => {\n    setShowParticles(true);\n\n    setTimeout(() => {\n      setShowParticles(false);\n    }, successDuration);\n  };\n\n  return (\n    <>\n      {showParticles && (\n        <SuccessParticles\n          buttonRef={buttonRef as RefObject<HTMLButtonElement>}\n        />\n      )}\n      <Button\n        className={cn(\n          \"relative\",\n          showParticles && \"scale-95\",\n          \"transition-transform duration-100\",\n          className\n        )}\n        onClick={handleClick}\n        ref={buttonRef}\n        {...props}\n      >\n        {children}\n        <MousePointerClick className=\"h-4 w-4\" />\n      </Button>\n    </>\n  );\n}\n",
      "path": "/components/kokonutui/particle-button.tsx",
      "target": "components/kokonutui/particle-button.tsx"
    }
  ]
}