{
  "$schema": "https://www.cooki-ui.design/schema/registry-item.json",
  "name": "color-palette-picker",
  "type": "registry:ui",
  "title": "Luminescent Color Palette Swatch",
  "description": "Interactive hex color picker with preset neon palettes, live RGB hex badge, and clipboard copy confirmation.",
  "category": "forms",
  "dependencies": [
    "@phosphor-icons/react"
  ],
  "files": [
    {
      "path": "registry/forms/color-palette-picker/color-palette-picker.tsx",
      "type": "registry:ui",
      "target": "components/ui/color-palette-picker.tsx",
      "content": "import React, { useState } from 'react';\nimport { Check, Copy } from '@phosphor-icons/react';\n\nconst PRESETS = [\n  { name: 'Indigo Pulse', hex: '#6366f1' },\n  { name: 'Cyan Glow', hex: '#06b6d4' },\n  { name: 'Emerald Spark', hex: '#10b981' },\n  { name: 'Amber Sun', hex: '#f59e0b' },\n  { name: 'Rose Neon', hex: '#f43f5e' },\n];\n\nexport const ColorPalettePicker: React.FC = () => {\n  const [selected, setSelected] = useState(PRESETS[0]);\n  const [copied, setCopied] = useState(false);\n\n  const handleCopy = () => {\n    navigator.clipboard.writeText(selected.hex);\n    setCopied(true);\n    setTimeout(() => setCopied(false), 2000);\n  };\n\n  return (\n    <div className=\"w-full max-w-xs mx-auto p-4 rounded-2xl border border-zinc-200 dark:border-white/10 bg-white/90 dark:bg-zinc-900/90 shadow-lg backdrop-blur-md font-mono text-xs\">\n      <div className=\"flex items-center justify-between mb-3\">\n        <span className=\"text-zinc-500 text-[11px] uppercase\">Active Hue</span>\n        <button\n          onClick={handleCopy}\n          className=\"flex items-center gap-1 text-[11px] font-bold text-zinc-700 dark:text-zinc-200 hover:text-indigo-500 cursor-pointer\"\n        >\n          <span>{selected.hex}</span>\n          {copied ? <Check size={11} className=\"text-emerald-500\" /> : <Copy size={11} />}\n        </button>\n      </div>\n\n      <div className=\"flex items-center justify-between gap-2\">\n        {PRESETS.map((p) => {\n          const isSelected = selected.hex === p.hex;\n          return (\n            <button\n              key={p.hex}\n              onClick={() => setSelected(p)}\n              style={{ backgroundColor: p.hex }}\n              className={`w-9 h-9 rounded-xl transition-transform cursor-pointer shadow-sm ${\n                isSelected ? 'scale-110 ring-2 ring-white ring-offset-2 ring-offset-zinc-900' : 'hover:scale-105 opacity-80 hover:opacity-100'\n              }`}\n            />\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n"
    }
  ]
}