{
  "$schema": "https://www.cooki-ui.design/schema/registry-item.json",
  "name": "neon-pulse-button",
  "type": "registry:ui",
  "title": "Neon Pulse Button",
  "description": "High-voltage illuminated action button featuring interactive magnetic tracking, rotating edge tracer gradient, and spring ripple activation.",
  "category": "buttons",
  "dependencies": [
    "framer-motion",
    "@phosphor-icons/react"
  ],
  "files": [
    {
      "path": "registry/buttons/neon-pulse-button/neon-pulse-button.tsx",
      "type": "registry:ui",
      "target": "components/ui/neon-pulse-button.tsx",
      "content": "import React, { useRef, useState } from 'react';\nimport { motion, useSpring, useMotionValue } from 'framer-motion';\nimport { Lightning, ArrowRight, Play, Flame } from '@phosphor-icons/react';\n\nexport interface NeonPulseButtonProps {\n  label?: string;\n  colorTheme?: 'cyan' | 'emerald' | 'violet' | 'amber';\n  size?: 'sm' | 'md' | 'lg';\n  magnetic?: boolean;\n  onClick?: () => void;\n  className?: string;\n}\n\nexport const NeonPulseButton: React.FC<NeonPulseButtonProps> = ({\n  label = 'Activate Superconductor',\n  colorTheme = 'cyan',\n  size = 'md',\n  magnetic = true,\n  onClick,\n  className = '',\n}) => {\n  const btnRef = useRef<HTMLButtonElement>(null);\n  const [isHovered, setIsHovered] = useState(false);\n  const [clicked, setClicked] = useState(false);\n\n  // Magnetic spring pull\n  const mouseX = useMotionValue(0);\n  const mouseY = useMotionValue(0);\n\n  const springConfig = { damping: 18, stiffness: 220 };\n  const springX = useSpring(mouseX, springConfig);\n  const springY = useSpring(mouseY, springConfig);\n\n  const handleMouseMove = (e: React.MouseEvent<HTMLButtonElement>) => {\n    if (!magnetic || !btnRef.current) return;\n    const rect = btnRef.current.getBoundingClientRect();\n    const centerX = rect.left + rect.width / 2;\n    const centerY = rect.top + rect.height / 2;\n    mouseX.set((e.clientX - centerX) * 0.35);\n    mouseY.set((e.clientY - centerY) * 0.35);\n  };\n\n  const handleMouseLeave = () => {\n    setIsHovered(false);\n    mouseX.set(0);\n    mouseY.set(0);\n  };\n\n  const handleClick = () => {\n    setClicked(true);\n    setTimeout(() => setClicked(false), 500);\n    onClick?.();\n  };\n\n  const themeConfig = {\n    cyan: {\n      neonGlow: 'shadow-[0_0_30px_rgba(6,182,212,0.4)]',\n      tracer: 'from-cyan-400 via-sky-400 to-transparent',\n      text: 'text-cyan-400',\n      aura: 'bg-cyan-500/20',\n      activeRing: 'border-cyan-400',\n    },\n    emerald: {\n      neonGlow: 'shadow-[0_0_30px_rgba(16,185,129,0.4)]',\n      tracer: 'from-emerald-400 via-teal-400 to-transparent',\n      text: 'text-emerald-400',\n      aura: 'bg-emerald-500/20',\n      activeRing: 'border-emerald-400',\n    },\n    violet: {\n      neonGlow: 'shadow-[0_0_30px_rgba(139,92,246,0.4)]',\n      tracer: 'from-violet-400 via-purple-400 to-transparent',\n      text: 'text-violet-400',\n      aura: 'bg-violet-500/20',\n      activeRing: 'border-violet-400',\n    },\n    amber: {\n      neonGlow: 'shadow-[0_0_30px_rgba(245,158,11,0.4)]',\n      tracer: 'from-amber-400 via-orange-400 to-transparent',\n      text: 'text-amber-400',\n      aura: 'bg-amber-500/20',\n      activeRing: 'border-amber-400',\n    },\n  }[colorTheme];\n\n  const sizeClasses = {\n    sm: 'px-4 py-2 text-xs gap-2',\n    md: 'px-6 py-3 text-xs sm:text-sm gap-2.5',\n    lg: 'px-8 py-4 text-sm sm:text-base gap-3',\n  }[size];\n\n  return (\n    <div className=\"relative inline-flex items-center justify-center p-2 select-none\">\n      {/* Dynamic Ambient Aura */}\n      <div \n        className={`absolute inset-0 rounded-full blur-xl transition-all duration-300 pointer-events-none ${\n          isHovered ? `${themeConfig.aura} scale-110 opacity-100` : 'opacity-0 scale-90'\n        }`} \n      />\n\n      {/* Button Motion Container */}\n      <motion.button\n        ref={btnRef}\n        style={{ x: springX, y: springY }}\n        onMouseMove={handleMouseMove}\n        onMouseEnter={() => setIsHovered(true)}\n        onMouseLeave={handleMouseLeave}\n        onClick={handleClick}\n        className={`relative group inline-flex items-center justify-center font-mono font-bold uppercase tracking-wider rounded-full bg-zinc-950 text-white overflow-hidden border border-white/10 transition-all duration-200 cursor-pointer ${sizeClasses} ${\n          isHovered ? themeConfig.neonGlow : ''\n        } ${className}`}\n      >\n        {/* Rotating Edge Tracer Gradient Border */}\n        <div className=\"absolute inset-[-150%] animate-[spin_4s_linear_infinite] pointer-events-none opacity-80 group-hover:opacity-100 transition-opacity\">\n          <div className={`w-full h-full bg-[conic-gradient(from_0deg,transparent_0_300deg,currentColor_360deg)] ${themeConfig.text}`} />\n        </div>\n\n        {/* Inner Solid Capsule Backdrop */}\n        <div className=\"absolute inset-[1.5px] rounded-full bg-[#090a0f] z-0 transition-colors group-hover:bg-[#0c0e17]\" />\n\n        {/* Content Elements */}\n        <div className=\"relative z-10 flex items-center gap-2\">\n          <Lightning size={16} weight=\"fill\" className={`${themeConfig.text} transition-transform group-hover:scale-125`} />\n          <span className=\"text-zinc-100 tracking-wider\">{label}</span>\n          <ArrowRight size={14} weight=\"bold\" className=\"text-zinc-400 transition-transform group-hover:translate-x-1\" />\n        </div>\n\n        {/* Click Shockwave Burst Ring */}\n        {clicked && (\n          <div className={`absolute inset-0 rounded-full border-2 ${themeConfig.activeRing} animate-ping pointer-events-none`} />\n        )}\n      </motion.button>\n    </div>\n  );\n};\n"
    }
  ]
}