# Color Picker

## Example

```svelte
<script lang="ts">
	import {
		ColorPicker,
		PopoverColorPicker,
		oklch_string_to_oklch,
		oklch_to_rgb
	} from '@foxui/all';
	import { ThemeWatcher } from '$lib/helper/ThemeWatcher.svelte';
	import { onMount } from 'svelte';

	let rgb = $state({
		r: 0,
		g: 0,
		b: 0
	});

	onMount(() => {
		const theme = new ThemeWatcher();
		const color = theme.getCSSVar('--color-accent-500');
		rgb = oklch_to_rgb(oklch_string_to_oklch(color));

		theme.subscribe(() => {
			const color = theme.getCSSVar('--color-accent-500');
			rgb = oklch_to_rgb(oklch_string_to_oklch(color));
		});
	});
</script>

<h3>Inline Color Picker</h3>

<ColorPicker
	bind:rgb
/>

<h3>Popover Color Picker</h3>

<PopoverColorPicker
	bind:rgb
	quickSelects={[
		{
			label: 'Red',
			rgb: {
				r: 1,
				g: 0,
				b: 0
			}
		},
		{
			label: 'Green',
			rgb: {
				r: 0,
				g: 1,
				b: 0
			}
		},
		{
			label: 'Blue',
			rgb: {
				r: 0,
				g: 0,
				b: 1
			}
		},
		{
			label: 'Yellow',
			rgb: {
				r: 1,
				g: 1,
				b: 0
			}
		},
		{
			label: 'Magenta',
			rgb: {
				r: 1,
				g: 0,
				b: 1
			}
		},
		{
			label: 'Cyan',
			rgb: {
				r: 0,
				g: 1,
				b: 1
			}
		},
		{
			label: 'White',
			rgb: {
				r: 1,
				g: 1,
				b: 1
			}
		}
	]}
/>
```

## Documentation

## Usage

```svelte
<!-- inline version -->
<ColorPicker bind:rgb />

<!-- popover version -->
<PopoverColorPicker bind:rgb />
```

### Credits

- Adapted from [svelte-color-select](https://github.com/CaptainCodeman/svelte-color-select).

## API Reference

### ColorPicker
A full color picker with a saturation/value area, hue slider, and optional quick-select swatches. Supports RGB, OKLab, and OKHsv color spaces.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| rgb | `{ r: number; g: number; b: number }` | `-` | The current color in RGB format (0-255). (bindable) |
| oklab | `{ l: number; a: number; b: number }` | `-` | The current color in OKLab format. (bindable) |
| okhsv | `{ h: number; s: number; v: number }` | `-` | The current color in OKHsv format. (bindable) |
| onchange | `(color: { hex: string; rgb: RGB; oklab: OKlab; okhsv: OKhsv; oklch: OKlch }) => void` | `-` | Callback invoked when the color changes. Provides the color in all supported formats. |
| quickSelects | `{ label: string; rgb?: RGB; oklab?: OKlab; okhsv?: OKhsv }[]` | `[]` | Quick-select color swatches displayed below the picker. (bindable) |
| class | `string` | `-` | Additional CSS classes to apply. |

### PopoverColorPicker
A color picker wrapped in a popover, triggered by a color swatch button.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| rgb | `{ r: number; g: number; b: number }` | `-` | The current color in RGB format (0-255). (bindable) |
| oklab | `{ l: number; a: number; b: number }` | `-` | The current color in OKLab format. (bindable) |
| okhsv | `{ h: number; s: number; v: number }` | `-` | The current color in OKHsv format. (bindable) |
| onchange | `(color: { hex: string; rgb: RGB; oklab: OKlab; okhsv: OKhsv; oklch: OKlch }) => void` | `-` | Callback invoked when the color changes. |
| quickSelects | `{ label: string; rgb?: RGB; oklab?: OKlab; okhsv?: OKhsv }[]` | `[]` | Quick-select color swatches. (bindable) |
| side | `'top' | 'right' | 'bottom' | 'left'` | `'bottom'` | The preferred side of the trigger to render the popover. |
| sideOffset | `number` | `10` | The distance in pixels from the trigger. |
| class | `string` | `-` | Additional CSS classes to apply. |