# SwatchPicker

> A color for something the person owns: a category, an account, a tag. One native radio per palette color, so the value is the key, such as chart-3, never a hex, and the color follows every theme. Each swatch is named after the hue it shows in the current theme, since the palette turns with the brand, and the chosen one carries a check. It takes colors of your own too, each standing for an id: the AGENTS.md builder on the home page picks its theme with one.

Section: Forms. Docs: https://entrepta.vercel.app/docs/components/swatch-picker

## Install

```bash
npx @entrepta/cli@latest add swatch-picker
```

Files: `primitives/swatch-picker.tsx`, `lib/color-contrast.ts`, `lib/palette.ts`, `content/diamond.tsx`, `lib/icon.tsx`, `primitives/field.tsx`.
npm packages: `@phosphor-icons/react`.
Comes with: `color-contrast`, `palette-lib`, `diamond`, `icon-lib`, `field`.

## Usage

```tsx
import { SwatchPicker } from "@/components/entrepta/swatch-picker"

<SwatchPicker legend="Color" value={category.color} onValueChange={setColor} />

// later, anywhere: <IconTile color={category.color} … />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `legend` | `ReactNode` | - | The question; hideLegend keeps it for screen readers |
| `value, defaultValue, onValueChange` | `"chart-1" … "chart-8"` | - | The palette key |
| `options` | `palette keys \| { value, color, name }[]` | the eight palette keys | Palette keys, named after their hue, or colors of your own, such as themes |
| `names` | `Record<key, string>` | - | Names of your own, in place of the hue names |