{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "color-picker",
  "title": "Color Picker",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-react/components/color-picker/color-picker.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { cn } from '@/lib/utils'\n\nconst DEFAULT_PRESETS = [\n  '#ef4444',\n  '#f97316',\n  '#eab308',\n  '#22c55e',\n  '#14b8a6',\n  '#3b82f6',\n  '#8b5cf6',\n  '#ec4899',\n  '#ffffff',\n  '#d4d4d4',\n  '#737373',\n  '#171717',\n]\n\nexport interface ColorPickerProps {\n  value?: string\n  onValueChange?: (value: string) => void\n  disabled?: boolean\n  /** Override the swatches shown below the color input. Pass [] to hide entirely. */\n  presets?: string[]\n  /** Hide the hex text field next to the color trigger. */\n  hideHexInput?: boolean\n  className?: string\n}\n\nconst ColorPicker = React.forwardRef<HTMLDivElement, ColorPickerProps>(\n  ({ value, onValueChange, disabled, presets = DEFAULT_PRESETS, hideHexInput = false, className }, ref) => {\n    const swatches = presets ?? []\n\n    return (\n      <div ref={ref} className={cn('space-y-3', className)}>\n        {/* Color trigger + hex field */}\n        <div className=\"flex items-center gap-2\">\n          <div\n            className=\"border-input relative h-10 w-10 shrink-0 overflow-hidden rounded-md border shadow-xs\"\n            style={{ backgroundColor: value || '#ffffff' }}\n          >\n            <input\n              type=\"color\"\n              value={value || '#ffffff'}\n              disabled={disabled}\n              aria-label=\"Pick color\"\n              className=\"absolute inset-0 h-full w-full cursor-pointer opacity-0 disabled:cursor-not-allowed\"\n              onInput={(e) => onValueChange?.((e.target as HTMLInputElement).value)}\n            />\n          </div>\n          {!hideHexInput && (\n            <input\n              type=\"text\"\n              value={value || ''}\n              placeholder=\"#000000\"\n              disabled={disabled}\n              className=\"bg-background border-input text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 h-10 flex-1 rounded-md border px-3 text-sm uppercase shadow-xs outline-none focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-50\"\n              onChange={(e) => onValueChange?.(e.target.value)}\n            />\n          )}\n        </div>\n\n        {/* Preset swatches */}\n        {swatches.length > 0 && (\n          <div className=\"flex flex-wrap gap-1.5\">\n            {swatches.map((color) => (\n              <button\n                type=\"button\"\n                key={color}\n                disabled={disabled}\n                aria-label={`Select ${color}`}\n                style={{ backgroundColor: color }}\n                className={cn(\n                  'ring-offset-background focus-visible:ring-ring/40 size-6 shrink-0 rounded-md shadow-sm transition-transform outline-none hover:scale-110 focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100',\n                  value?.toLowerCase() === color.toLowerCase()\n                    ? 'ring-foreground ring-2 ring-offset-2'\n                    : 'ring-border/50 ring-1',\n                  color.toLowerCase() === '#ffffff' && 'ring-border',\n                )}\n                onClick={() => onValueChange?.(color)}\n              />\n            ))}\n          </div>\n        )}\n      </div>\n    )\n  },\n)\nColorPicker.displayName = 'ColorPicker'\n\nexport { ColorPicker }\n",
      "type": "registry:ui",
      "target": "~/components/ui/color-picker/color-picker.tsx"
    },
    {
      "path": "packages/registry-react/components/color-picker/index.ts",
      "content": "export { ColorPicker, type ColorPickerProps } from './color-picker'\n",
      "type": "registry:ui",
      "target": "~/components/ui/color-picker/index.ts"
    }
  ],
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [],
  "description": "Hex / RGB color input with a popover swatch grid. Supports controlled and uncontrolled modes, alpha channel, and a recent-colors row.",
  "categories": [
    "form"
  ]
}