{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "reaction-button",
  "type": "registry:ui",
  "dependencies": [
    "motion",
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/new-york/animations/specials/reaction-button.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { motion } from \"motion/react\";\nimport type { Easing } from \"motion/react\";\nimport { cn } from \"@/lib/utils\";\nimport { LucideIcon } from \"lucide-react\";\n\nexport interface ReactionButtonProps {\n    Icon: LucideIcon;\n    size?: number;\n    colors?: {\n        initial?: string;\n        liked?: string;\n    };\n    isLiked?: boolean;\n    onToggle?: (isLiked: boolean) => void;\n    className?: string;\n}\n\nexport function ReactionButton({\n    Icon,\n    size = 24,\n    colors = {\n        initial: \"currentColor\",\n        liked: \"#ef4444\",\n    },\n    isLiked = false,\n    onToggle,\n    className,\n}: ReactionButtonProps) {\n    const [liked, setLiked] = React.useState(isLiked);\n\n    const handleClick = () => {\n        const newState = !liked;\n        setLiked(newState);\n        onToggle?.(newState);\n    };\n\n    const MotionIcon = motion(Icon);\n\n    return (\n        <div className={cn(\"relative inline-flex items-center justify-center\", className)} style={{ width: size, height: size }}>\n            <MotionIcon\n                size={size}\n                onClick={handleClick}\n                className=\"cursor-pointer z-10 relative outline-none focus:ring-0 focus:outline-none\"\n                initial={false}\n                whileTap={{ scale: 0.8 }}\n                animate={{\n                    scale: liked ? [0.8, 1.2, 1] : 1, // Subtle pop\n                    fill: liked ? colors.liked : \"transparent\",\n                    stroke: liked ? colors.liked : colors.initial,\n                }}\n                transition={{\n                    duration: 0.3,\n                    times: [0, 0.4, 1],\n                    ease: \"easeOut\",\n                }}\n            />\n\n            {/* Sparkle effects when liked */}\n            {liked && (\n                <div className=\"absolute inset-0 pointer-events-none\">\n                    {/* Center sparkle (Cross) */}\n                    <motion.div\n                        className=\"absolute inset-0 flex items-center justify-center\"\n                        initial={{ scale: 0, opacity: 0, rotate: 0 }}\n                        animate={{\n                            scale: [0, 1.2, 0],\n                            opacity: [0, 1, 0],\n                            rotate: [0, 45]\n                        }}\n                        transition={{ duration: 0.4 }}\n                    >\n                        <svg width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" strokeWidth=\"2\" strokeLinecap=\"round\">\n                            <path d=\"M12 2 L12 6 M12 18 L12 22 M2 12 L6 12 M18 12 L22 12\" />\n                        </svg>\n                    </motion.div>\n\n                    {/* Top-left sparkle (Dot) */}\n                    <motion.div\n                        className=\"absolute top-0 left-0 rounded-full bg-white\"\n                        style={{ width: size * 0.1, height: size * 0.1 }}\n                        initial={{ scale: 0, opacity: 0, x: size * 0.2, y: size * 0.2 }}\n                        animate={{\n                            scale: [0, 1, 0],\n                            opacity: [0, 1, 0],\n                            x: -size * 0.3,\n                            y: -size * 0.3\n                        }}\n                        transition={{ duration: 0.3, delay: 0.05, ease: \"easeOut\" }}\n                    />\n\n                    {/* Top-right sparkle (Dot) */}\n                    <motion.div\n                        className=\"absolute top-0 right-0 rounded-full bg-white\"\n                        style={{ width: size * 0.1, height: size * 0.1 }}\n                        initial={{ scale: 0, opacity: 0, x: -size * 0.2, y: size * 0.2 }}\n                        animate={{\n                            scale: [0, 1, 0],\n                            opacity: [0, 1, 0],\n                            x: size * 0.3,\n                            y: -size * 0.3\n                        }}\n                        transition={{ duration: 0.3, delay: 0.1, ease: \"easeOut\" }}\n                    />\n                </div>\n            )}\n        </div>\n    );\n}\n",
      "type": "registry:ui"
    }
  ]
}