# Color Select

## Example

```svelte
<script>
	import { ColorSelect } from '@foxui/all';
</script>

<ColorSelect
	colors={[
		{ class: 'text-accent-500', label: '1' },
		{ label: '2', value: 'oklch(from var(--color-accent-500) l c calc(h + 20))' },
		{ label: '3', value: 'oklch(from var(--color-accent-500) l c calc(h + 40))' },
		{ label: '4', value: 'oklch(from var(--color-accent-500) l c calc(h + 60))' }
	]}
/>
```

## Documentation

## Usage

```svelte
<ColorSelect
	colors={[
		{ class: 'text-red-700', label: 'red' },
		{ class: 'text-green-700', label: 'green' },
		{ class: 'text-blue-700', label: 'blue' },
		{ class: 'text-yellow-700', label: 'yellow' }
	]}
/>

<!-- with custom colors -->
<ColorSelect
	colors={[
		{ value: '#ff0000', label: 'red' },
		{ value: '#00ff00', label: 'green' },
		{ value: '#0000ff', label: 'blue' },
		{ value: '#ffff00', label: 'yellow' }
	]}
/>
```

## API Reference

### ColorSelect
A group of color swatches that allows selecting a single color.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| colors | `(string | { class?: string; label: string; value?: string })[]` | `-` | The list of selectable colors. Can be simple strings or objects with custom class, label, and value. (required, bindable) |
| selected | `string | { class?: string; label: string; value?: string }` | `-` | The currently selected color. Defaults to the first color. (bindable) |
| name | `string` | `-` | The name attribute for the underlying radio inputs (auto-generated if not provided). (bindable) |
| onselected | `(color: Color, previous: Color) => void` | `-` | Callback invoked when the selected color changes. |
| colorsClass | `string` | `-` | Additional CSS classes for the color swatches container. |
| class | `string` | `-` | Additional CSS classes to apply to the root element. |
| ref | `HTMLDivElement` | `-` | The underlying DOM element. (bindable) |