# ColorSelector


`src/lib/components/ui/color-selector/ColorSelector.svelte`

## Purpose

A color picker with a Popover trigger button showing a color swatch and the
current hex value. Opens to the more-shadcn `color-picker` primitive. Created
to consolidate the duplicated Popover + Button + swatch + label block across
Profile, Create User, and Edit User pages.

Not avatar-specific — can be used for any color selection field.

## Origin

**Custom** — Primebrick-written wrapper composing shadcn-svelte™ `Popover` +
`Button` and the more-shadcn-svelte™ `color-picker` primitive
(`src/lib/components/ui/color-picker/`). Not vendored as a unit from any
registry.

## Usage

### Default (bindable value)

```svelte
<ColorSelector
  bind:value={formData.avatar_color}
  labelKey="profile.avatarColor"
  placeholderKey="profile.selectColor"
/>
```

### With a fallback color

```svelte
<ColorSelector
  bind:value={formData.avatar_color}
  labelKey="profile.avatarColor"
  fallbackColor="#0ea5e9"
/>
```

## Props

Full prop table: see [API reference — colorselector](/frontend/dev/api-reference#colorselector).

Props: `value` (bindable, `string | undefined`), `labelKey: string`,
`placeholderKey?: string`, `fallbackColor?: string = "#000000"`,
`triggerId?: string`.

## Picker formats

`ColorPicker.Root` accepts a `formats` prop (`hex`, `rgb`, `hsl`, `oklch`,
`system`; default all five). The first four show the classic
saturation/hue area plus a format selector and a free-form text input —
all in `ghost` chrome (borderless at rest, faint border on hover).

`system` mode swaps the fine-grain area for the full Tailwind palette
grid (every family × shades 50–950) and replaces the text input with a
searchable `ComboSelect` listing every `family-shade` token. Selecting a
swatch or token binds the token string (e.g. `"emerald-500"`) as the
value — consumers like `badgeClassesFromToken` resolve both tokens and
raw CSS colors.

## Next steps

- [Component catalog](/frontend/dev/components)
- [Color picker (more-shadcn)](https://more-shadcn.noair.fun/r/color-picker.json) — the underlying primitive
- [API reference](/frontend/dev/api-reference#colorselector)