{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "color-picker",
  "title": "Color Picker",
  "author": "Ballmac <https://ui.ballmac.com>",
  "description": "A native color chooser paired with an editable hex field and a live swatch.",
  "registryDependencies": [
    "utils",
    "https://ui.ballmac.com/r/i18n.json"
  ],
  "files": [
    {
      "path": "registry/ballmac/components/color-picker.tsx",
      "content": "// Ballmac UI: Color Picker. https://ui.ballmac.com/components/color-picker\n\"use client\"\n\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\nimport { useMessages } from \"@/lib/ballmac/i18n\"\n\ntype ColorPickerProps = Omit<\n  React.ComponentProps<\"div\">,\n  \"onChange\" | \"defaultValue\"\n> & {\n  /** Controlled six-digit hexadecimal color. */\n  value?: string\n  /** Initial color when uncontrolled. */\n  defaultValue?: string\n  /** Called when either control edits the color. */\n  onValueChange?: (value: string) => void\n  /** Accessible name of the picker. */\n  label?: string\n  /** Native form field name. */\n  name?: string\n  /** Disable editing. */\n  disabled?: boolean\n}\nfunction ColorPicker({\n  value,\n  defaultValue = \"\",\n  onValueChange,\n  label,\n  name,\n  disabled = false,\n  className,\n  ...props\n}: ColorPickerProps) {\n  const msg = useMessages()\n  label ??= msg(\"color-picker.label\", \"Color\")\n  const [internal, setInternal] = React.useState(defaultValue)\n  const current = value ?? internal\n  const valid = /^#[0-9a-fA-F]{6}$/.test(current)\n  function commit(next: string) {\n    if (value === undefined) setInternal(next)\n    onValueChange?.(next)\n  }\n  return (\n    <div\n      data-slot=\"color-picker\"\n      className={cn(\n        \"flex h-10 w-full min-w-0 items-center gap-2 rounded-md border border-input bg-background px-2 shadow-xs transition-[border-color,box-shadow] duration-150 motion-reduce:transition-none focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50\",\n        className,\n      )}\n      {...props}\n    >\n      <input\n        data-slot=\"color-picker-native\"\n        type=\"color\"\n        aria-label={msg(\"color-picker.choose\", \"Choose {label}\", { label: label.toLowerCase() })}\n        disabled={disabled}\n        value={current}\n        onChange={(event) => commit(event.currentTarget.value)}\n        className=\"size-7 shrink-0 cursor-pointer rounded border border-border bg-transparent p-0.5 disabled:opacity-50\"\n      />\n      <input\n        data-slot=\"color-picker-text\"\n        type=\"text\"\n        aria-label={msg(\"color-picker.hexValue\", \"{label} hex value\", { label })}\n        aria-invalid={current && !valid ? true : undefined}\n        name={name}\n        disabled={disabled}\n        value={current}\n        onChange={(event) => commit(event.currentTarget.value)}\n        placeholder={msg(\"color-picker.hexColor\", \"Hex color\")}\n        maxLength={7}\n        spellCheck={false}\n        className=\"min-w-0 flex-1 bg-transparent font-mono text-sm text-foreground outline-none placeholder:font-sans placeholder:text-muted-foreground disabled:opacity-50\"\n      />\n      <span\n        aria-hidden=\"true\"\n        className=\"size-6 shrink-0 rounded-md border border-border\"\n        style={{ backgroundColor: valid ? current : \"var(--muted)\" }}\n      />\n    </div>\n  )\n}\nexport { ColorPicker, type ColorPickerProps }\n",
      "type": "registry:ui",
      "target": "@components/ballmac/color-picker.tsx"
    }
  ],
  "meta": {
    "schema": 1,
    "tier": "free",
    "tags": [
      "color",
      "picker",
      "hex"
    ],
    "version": "1.0.0",
    "updated": "2026-09-30",
    "ai": {
      "summary": "A native color chooser paired with an editable hex field and a live swatch.",
      "whenToUse": [
        "Choose a custom brand or annotation color",
        "Edit a color precisely by hexadecimal value"
      ],
      "whenNotToUse": [
        "Use theme tokens for application chrome"
      ],
      "composesWith": [
        "input"
      ],
      "a11y": [
        {
          "keys": "Tab",
          "action": "Moves between color and text inputs"
        },
        {
          "keys": "Enter",
          "action": "Accepts a native color selection"
        }
      ],
      "customization": [
        "value / defaultValue and onValueChange",
        "name: form field name"
      ]
    },
    "examples": [
      "color-picker-demo",
      "color-picker-states"
    ],
    "url": "https://ui.ballmac.com/components/color-picker"
  },
  "categories": [
    "forms"
  ],
  "type": "registry:ui"
}