{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "color-selector",
  "title": "Color Selector",
  "description": "Interactive color picker component.",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/spell-ui/color-selector.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\ninterface ColorSelectorProps {\n  colors: string[];\n  size?: \"default\" | \"sm\" | \"lg\";\n  defaultValue: string;\n  name?: string;\n  onColorSelect?: (color: string) => void;\n  className?: string;\n}\n\nconst colorMap = {\n  default: \"var(--foreground)\",\n  red: \"var(--color-red-500)\",\n  green: \"var(--color-green-500)\",\n  blue: \"var(--color-blue-500)\",\n  yellow: \"var(--color-yellow-500)\",\n  purple: \"var(--color-purple-500)\",\n  pink: \"var(--color-pink-500)\",\n  indigo: \"var(--color-indigo-500)\",\n  orange: \"var(--color-orange-500)\",\n  teal: \"var(--color-teal-500)\",\n  cyan: \"var(--color-cyan-500)\",\n  lime: \"var(--color-lime-500)\",\n  emerald: \"var(--color-emerald-500)\",\n  violet: \"var(--color-violet-500)\",\n  fuchsia: \"var(--color-fuchsia-500)\",\n  rose: \"var(--color-rose-500)\",\n  sky: \"var(--color-sky-500)\",\n  amber: \"var(--color-amber-500)\",\n} as const;\n\nexport function ColorSelector(\n  { colors, size = \"default\", defaultValue, name, onColorSelect, className }:\n    ColorSelectorProps,\n) {\n  const [selectedColor, setSelectedColor] = useState<string>(defaultValue);\n\n  const handleColorSelect = (color: string) => {\n    setSelectedColor(color);\n    onColorSelect?.(color);\n  };\n\n  const getSizeClass = (size: \"default\" | \"sm\" | \"lg\") => {\n    switch (size) {\n      case \"sm\":\n        return \"size-4\";\n      case \"default\":\n        return \"size-5\";\n      case \"lg\":\n        return \"size-6\";\n      default:\n        return \"size-5\";\n    }\n  };\n\n  const getColorValue = (color: string): string => {\n    return colorMap[color as keyof typeof colorMap] || color;\n  };\n\n  const sizeClass = getSizeClass(size);\n\n  return (\n    <div className={cn(\"flex gap-2\", className)}>\n      {name && (\n        <input\n          type=\"hidden\"\n          name={name}\n          value={selectedColor}\n        />\n      )}\n      {colors.map((color) => {\n        const colorValue = getColorValue(color);\n        return (\n          <div\n            key={color}\n            className={`${sizeClass} rounded-full cursor-pointer transition-transform duration-200 active:scale-90 ${\n              selectedColor === color\n                ? \"ring-2 ring-offset-2 ring-gray-400\"\n                : \"\"\n            }`}\n            style={{\n              backgroundColor: colorValue,\n              ...(selectedColor === color && {\n                boxShadow:\n                  `inset 0 0 0 2px var(--background), 0 0 0 2px ${colorValue}`,\n              }),\n            }}\n            onClick={() => handleColorSelect(color)}\n            onKeyDown={(e) => {\n              if (e.key === \"Enter\" || e.key === \" \") {\n                e.preventDefault();\n                handleColorSelect(color);\n              }\n            }}\n            tabIndex={0}\n            role=\"button\"\n            aria-label={`Select ${color} color`}\n            aria-pressed={selectedColor === color}\n          />\n        );\n      })}\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}