{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "color-picker",
  "type": "registry:ui",
  "title": "Color picker",
  "description": "Swatch color picker with eight OKLCH presets, a ring on the selected swatch and listbox semantics. Works controlled or uncontrolled for theme or label colors.",
  "dependencies": [],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/color-picker.tsx",
      "type": "registry:ui",
      "target": "components/ui/color-picker.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nconst SWATCHES = [\n  \"oklch(0.55 0.15 285)\",\n  \"oklch(0.55 0.15 250)\",\n  \"oklch(0.55 0.14 200)\",\n  \"oklch(0.52 0.12 150)\",\n  \"oklch(0.62 0.13 75)\",\n  \"oklch(0.55 0.19 25)\",\n  \"oklch(0.45 0.02 250)\",\n  \"oklch(0.85 0.01 250)\",\n]\n\ntype ColorPickerProps = {\n  value?: string\n  onChange?: (value: string) => void\n  className?: string\n}\n\nfunction ColorPicker({ value, onChange, className }: ColorPickerProps) {\n  const [internal, setInternal] = React.useState(SWATCHES[0])\n  const current = value ?? internal\n  return (\n    <div role=\"listbox\" aria-label=\"Color\" data-slot=\"color-picker\" className={cn(\"flex flex-wrap gap-2\", className)}>\n      {SWATCHES.map((c) => {\n        const selected = c === current\n        return (\n          <button\n            key={c}\n            type=\"button\"\n            role=\"option\"\n            aria-selected={selected}\n            aria-label={c}\n            className={cn(\n              \"size-8 rounded-lg border border-border outline-none\",\n              \"transition-[box-shadow,transform] duration-[70ms] active:translate-y-[0.5px]\",\n              \"focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-bg\",\n              selected && \"ring-2 ring-accent ring-offset-2 ring-offset-bg\"\n            )}\n            style={{ background: c }}\n            onClick={() => { if (value === undefined) setInternal(c); onChange?.(c) }}\n          />\n        )\n      })}\n    </div>\n  )\n}\nexport { ColorPicker }\n"
    }
  ]
}