{
  "$schema": "https://www.cooki-ui.design/schema/registry-item.json",
  "name": "confetti-button",
  "type": "registry:ui",
  "title": "Celebration Confetti Burst Button",
  "description": "Multi-color physics confetti explosion upon click with spring recoil.",
  "category": "buttons",
  "dependencies": [
    "framer-motion",
    "@phosphor-icons/react"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "tags": [
    "button",
    "confetti",
    "celebrate",
    "particles"
  ],
  "files": [
    {
      "path": "registry/buttons/confetti-button/confetti-button.tsx",
      "type": "registry:ui",
      "target": "components/ui/confetti-button.tsx",
      "content": "import React, { useState } from 'react';\nimport { motion, AnimatePresence } from 'framer-motion';\nimport { Lightning } from '@phosphor-icons/react';\n\ninterface ConfettiPiece {\n  id: number;\n  x: number;\n  y: number;\n  rotation: number;\n  scale: number;\n  color: string;\n  shape: 'rect' | 'circle';\n}\n\ninterface ConfettiButtonProps {\n  children?: React.ReactNode;\n  className?: string;\n  particleCount?: number;\n  colors?: string[];\n  onClick?: () => void;\n}\n\nconst DEFAULT_COLORS = ['#38bdf8', '#818cf8', '#c084fc', '#f472b6', '#34d399', '#fbbf24'];\n\nexport const ConfettiButton: React.FC<ConfettiButtonProps> = ({\n  children = 'Celebrate Action',\n  className = '',\n  particleCount = 36,\n  colors = DEFAULT_COLORS,\n  onClick,\n}) => {\n  const [particles, setParticles] = useState<ConfettiPiece[]>([]);\n\n  const triggerConfetti = (e: React.MouseEvent<HTMLButtonElement>) => {\n    const rect = e.currentTarget.getBoundingClientRect();\n    const centerX = rect.width / 2;\n    const centerY = rect.height / 2;\n\n    const newParticles: ConfettiPiece[] = Array.from({ length: particleCount }).map((_, i) => {\n      const angle = (Math.PI * 2 * i) / particleCount + (Math.random() - 0.5) * 0.5;\n      const velocity = 80 + Math.random() * 120;\n      return {\n        id: Date.now() + i,\n        x: centerX + Math.cos(angle) * velocity,\n        y: centerY + Math.sin(angle) * velocity - 30, // upward bias\n        rotation: Math.random() * 720 - 360,\n        scale: 0.5 + Math.random() * 0.8,\n        color: colors[i % colors.length],\n        shape: Math.random() > 0.4 ? 'rect' : 'circle',\n      };\n    });\n\n    setParticles(newParticles);\n    onClick?.();\n\n    setTimeout(() => {\n      setParticles([]);\n    }, 1200);\n  };\n\n  return (\n    <div className=\"relative inline-block overflow-visible\">\n      <motion.button\n        whileHover={{ scale: 1.04 }}\n        whileTap={{ scale: 0.94 }}\n        onClick={triggerConfetti}\n        className={`relative z-10 inline-flex items-center gap-2 px-6 py-3 rounded-full font-medium text-sm text-white bg-gradient-to-r from-violet-600 via-indigo-600 to-pink-500 shadow-lg shadow-indigo-500/25 hover:shadow-indigo-500/40 border border-white/20 transition-all select-none cursor-pointer ${className}`}\n      >\n        <Lightning size={18} weight=\"fill\" className=\"text-yellow-300\" />\n        <span>{children}</span>\n      </motion.button>\n\n      <AnimatePresence>\n        {particles.map((p) => (\n          <motion.div\n            key={p.id}\n            initial={{ opacity: 1, x: 0, y: 0, scale: 0, rotate: 0 }}\n            animate={{\n              opacity: [1, 1, 0],\n              x: p.x - 60,\n              y: p.y - 30,\n              scale: [0, p.scale, p.scale * 0.4],\n              rotate: p.rotation,\n            }}\n            exit={{ opacity: 0 }}\n            transition={{ duration: 1, ease: [0.25, 1, 0.5, 1] }}\n            style={{\n              position: 'absolute',\n              top: '50%',\n              left: '50%',\n              width: p.shape === 'rect' ? 8 : 7,\n              height: p.shape === 'rect' ? 14 : 7,\n              backgroundColor: p.color,\n              borderRadius: p.shape === 'circle' ? '50%' : 2,\n              pointerEvents: 'none',\n              zIndex: 30,\n            }}\n          />\n        ))}\n      </AnimatePresence>\n    </div>\n  );\n};\n"
    }
  ],
  "tailwind": {
    "required": true
  },
  "framework": [
    "react",
    "nextjs",
    "vite"
  ]
}