{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "neon-button",
  "title": "Neon Button",
  "description": "Glowing neon-bordered button with corner accent animations and multiple color themes.",
  "files": [
    {
      "path": "registry/pioneerui/neon-button.tsx",
      "content": "\"use client\"\n\nimport React, { type CSSProperties } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\ntype NeonColor = \"purple\" | \"cyan\" | \"green\" | \"pink\" | \"orange\"\n\nconst colorMap: Record<NeonColor, { glow: string; border: string; text: string; shadow: string }> = {\n  purple: {\n    glow: \"rgba(168,85,247,0.5)\",\n    border: \"#a855f7\",\n    text: \"#a855f7\",\n    shadow: \"0 0 5px #a855f7, 0 0 20px #a855f7, 0 0 40px #7c3aed\",\n  },\n  cyan: {\n    glow: \"rgba(6,182,212,0.5)\",\n    border: \"#06b6d4\",\n    text: \"#06b6d4\",\n    shadow: \"0 0 5px #06b6d4, 0 0 20px #06b6d4, 0 0 40px #0891b2\",\n  },\n  green: {\n    glow: \"rgba(34,197,94,0.5)\",\n    border: \"#22c55e\",\n    text: \"#22c55e\",\n    shadow: \"0 0 5px #22c55e, 0 0 20px #22c55e, 0 0 40px #16a34a\",\n  },\n  pink: {\n    glow: \"rgba(236,72,153,0.5)\",\n    border: \"#ec4899\",\n    text: \"#ec4899\",\n    shadow: \"0 0 5px #ec4899, 0 0 20px #ec4899, 0 0 40px #db2777\",\n  },\n  orange: {\n    glow: \"rgba(249,115,22,0.5)\",\n    border: \"#f97316\",\n    text: \"#f97316\",\n    shadow: \"0 0 5px #f97316, 0 0 20px #f97316, 0 0 40px #ea580c\",\n  },\n}\n\nexport interface NeonButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  color?: NeonColor\n  size?: \"sm\" | \"md\" | \"lg\"\n  children?: React.ReactNode\n}\n\nconst sizeClasses = {\n  sm: \"px-5 py-2 text-xs tracking-widest\",\n  md: \"px-8 py-3 text-sm tracking-widest\",\n  lg: \"px-10 py-4 text-base tracking-widest\",\n}\n\nexport function NeonButton({\n  color = \"purple\",\n  size = \"md\",\n  className,\n  children,\n  style,\n  ...props\n}: NeonButtonProps) {\n  const c = colorMap[color]\n\n  return (\n    <button\n      className={cn(\n        \"group relative cursor-pointer rounded border bg-transparent font-mono font-bold uppercase transition-all duration-300\",\n        \"hover:bg-current/5 hover:text-white\",\n        sizeClasses[size],\n        className,\n      )}\n      style={\n        {\n          color: c.text,\n          borderColor: c.border,\n          \"--neon-shadow\": c.shadow,\n          \"--neon-glow\": c.glow,\n          ...style,\n        } as CSSProperties\n      }\n      {...props}\n    >\n      {/* Top-left corner accent */}\n      <span\n        className=\"pointer-events-none absolute -left-px -top-px h-3 w-3 border-l-2 border-t-2 transition-all duration-300 group-hover:h-full group-hover:w-full\"\n        style={{ borderColor: c.border }}\n      />\n      {/* Bottom-right corner accent */}\n      <span\n        className=\"pointer-events-none absolute -bottom-px -right-px h-3 w-3 border-b-2 border-r-2 transition-all duration-300 group-hover:h-full group-hover:w-full\"\n        style={{ borderColor: c.border }}\n      />\n      <span\n        className=\"relative z-10 transition-all duration-300 group-hover:drop-shadow-[0_0_8px_currentColor]\"\n        style={\n          {\n            textShadow: \"none\",\n          } as CSSProperties\n        }\n      >\n        {children}\n      </span>\n    </button>\n  )\n}\n",
      "type": "registry:ui",
      "target": "components/pioneerui/neon-button.tsx"
    }
  ],
  "type": "registry:ui"
}