Colors

import { ColorSwatch } from "@/components/ui/color-swatch";
import { ColorPicker } from "@/components/ui/color-picker";

import * as React from "react";
import { ColorPicker } from "@/components/ui/color-picker";

export function Example() {
  const [color, setColor] = React.useState("#F5B81E");
  // Pass label/caption/error for the uniform field shell shared with
  // DurationInput / FileSizeInput.
  return <ColorPicker value={color} onChange={setColor} />;
}

ColorSwatch (button)
└── visual chip — copies hex on click by default

ColorPicker (inline display/edit field — same h-9 rounded-md cards as DurationInput / FileSizeInput)
├── Swatch card — click to grow the flower wheel out of its centre
├── Hex card — display mode: #HEX + ✏️ → edit mode: hex input card + ✓ commit card
└── Popover panel (portaled to <body>, scales up from the swatch centre)
    ├── Mode tabs (sm) — "Color Wheel" / "Classic Picker" (showModeSwitch={false} hides them)
    ├── Wheel mode — flower wheel
    │   ├── Tinted plate + petal rings (12 saturated + 8 softer hues)
    │   ├── Center petal — live color preview, click to confirm + close
    │   └── Curved lightness arc (white → hue → black) with draggable thumb
    ├── Picker mode — ColorPickerPanel
    │   ├── Saturation / brightness square
    │   ├── Hue + alpha gradient tracks
    │   └── Format select (HEX/RGB/HSL/OKLCH) + value field + eyedropper
    └── Footer — hex readout bottom left · selection progress bottom right

ColorPicker multiple (selection summary + wheel)
├── Swatch card — live color, opens the wheel
├── Summary card — stacked chips + "Select X more" / "n of max"
└── Wheel panel
    ├── Center petal — ＋ adds the live color (✓ when already picked, locked at max)
    ├── Selected swatch row — click a chip to remove it
    └── Progress line — "Select X more" → "n of max" + Done