# ColorPicker

Full HSV color picker with a saturation panel, hue slider, optional alpha slider, and built-in preset swatches. This page also documents `ColorSwatch` — a compact chip for external palettes wired to the same controlled color.

## Examples

### Default

Seed with `defaultValue` (or control via `value` / `onChange`). A Mantine-compatible preset palette is shown unless you pass `swatches`.

```tsx
import { ColorPicker } from '@var-ui/react';

<ColorPicker defaultValue="#228be6" />
```

```astro
<!-- No Astro binding yet — use @var-ui/react -->
```

```html
<!-- No HTML demo yet — use @var-ui/react -->
```

### With ColorSwatch

Hide the picker’s built-in row (`swatches={[]}`) and drive the color from standalone `ColorSwatch` buttons — useful when presets live outside the picker chrome.

```tsx
import { ColorPicker, ColorSwatch, HStack } from '@var-ui/react';

<ColorPicker value={color} onChange={setColor} swatches={[]} />
<HStack gap="sm">
  <ColorSwatch
    color="#228be6"
    selected={color === '#228be6'}
    aria-label="Blue"
    onClick={() => setColor('#228be6')}
  />
  <ColorSwatch
    color="#40c057"
    selected={color === '#40c057'}
    aria-label="Green"
    onClick={() => setColor('#40c057')}
  />
</HStack>
```

```astro
<!-- No Astro binding yet — use @var-ui/react -->
```

```html
<!-- No HTML demo yet — use @var-ui/react -->
```

## Props

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| className | string \| undefined | no |  |  |
| defaultValue | string \| undefined | no | #228be6 | Uncontrolled initial color. |
| onChange | ((value: string) => void) \| undefined | no |  |  |
| swatches | string[] \| undefined | no | Mantine-compatible preset palette | Preset swatches below the sliders. |
| swatchesPerRow | 7 \| 10 \| undefined | no | 7 | Swatches per row. |
| value | string \| undefined | no |  | Controlled hex color (e.g. `#228be6` or `#228be680` with alpha). |
| withAlpha | boolean \| undefined | no | false | Show an alpha slider and emit 8-digit hex. |

## Accessibility

Saturation uses `role="application"` with arrow-key nudges; hue and alpha are `role="slider"`. Built-in swatches are a `listbox` of `option`s with `aria-selected`. Standalone `ColorSwatch` is a button with `aria-pressed` when `selected`. Give every external swatch an `aria-label` (the hex or a color name).