# Colorpicker

Color picker component with preset color palette, reactive value binding, and customizable appearance.

## Tag

`Colorpicker`

## Props

| Prop | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| `label` | `string` | `-` | Label text for the button |
| `value` | `string \| Signal<string>` | `'#000000'` | Selected color value (hex format) |
| `class` | `string` | `''` | Additional CSS classes (Tailwind + custom styling) |

## Styling

Colorpicker is a custom component built with Tailwind CSS. The button supports standard **daisyUI Button classes** for consistent styling:

| Category | Keywords | Description |
| :--- | :--- | :--- |
| Size | `btn-xs`, `btn-sm`, `btn-md`, `btn-lg` | Button scale |
| Style | `btn-outline`, `btn-soft`, `btn-ghost` | Visual style variants |

> For further details, check the [daisyUI Button Documentation](https://daisyui.com/components/button) – The color picker button accepts standard button styling classes.

### Example

```javascript
Colorpicker({ 
  class: "btn-outline btn-sm",
  label: "Pick color",
  value: selectedColor
});
```

## Live Examples

### Basic Colorpicker

<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
  <div class="card-body">
    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
    <div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
  </div>
</div>

```javascript
const BasicDemo = () => {
  const color = $('#3b82f6');
  
  return Colorpicker({
    label: 'Pick a color',
    value: color
  });
};
$mount(BasicDemo, '#demo-basic');
```

### With Reactive Preview

<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
  <div class="card-body">
    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
    <div id="demo-preview" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
  </div>
</div>

```javascript
const PreviewDemo = () => {
  const color = $('#10b981');
  
  return Div({ class: 'flex flex-col gap-4 w-full' }, [
    Colorpicker({
      label: 'Choose color',
      value: color
    }),
    Div({ 
      class: 'w-full h-20 rounded-lg shadow-inner transition-all duration-200 flex items-center justify-center',
      style: () => `background-color: ${color()}`
    }, [
      Div({ class: 'text-center font-mono text-sm bg-black/20 px-2 py-1 rounded' }, () => color())
    ])
  ]);
};
$mount(PreviewDemo, '#demo-preview');
```

### Color Palette Grid

<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
  <div class="card-body">
    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
    <div id="demo-palette" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
  </div>
</div>

```javascript
const PaletteDemo = () => {
  const selectedColor = $('#ef4444');
  const presets = [
    '#ef4444', '#f97316', '#f59e0b', '#eab308',
    '#84cc16', '#10b981', '#14b8a6', '#06b6d4',
    '#3b82f6', '#6366f1', '#8b5cf6', '#d946ef',
    '#ec489a', '#f43f5e', '#6b7280', '#1f2937'
  ];
  
  return Div({ class: 'flex flex-col gap-4' }, [
    Colorpicker({
      label: 'Custom color',
      value: selectedColor
    }),
    Div({ class: 'divider text-xs' }, 'Or choose from palette'),
    Div({ class: 'grid grid-cols-8 gap-2' }, presets.map(color => 
      Button({
        class: `w-8 h-8 rounded-lg shadow-sm transition-transform hover:scale-110`,
        style: `background-color: ${color}`,
        onclick: () => selectedColor(color)
      })
    )),
    Div({ class: 'mt-2 text-center text-sm font-mono' }, () => selectedColor())
  ]);
};
$mount(PaletteDemo, '#demo-palette');
```

### With Text Color Preview

<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
  <div class="card-body">
    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
    <div id="demo-text" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
  </div>
</div>

```javascript
const TextDemo = () => {
  const bgColor = $('#1e293b');
  const textColor = $('#f8fafc');
  
  return Div({ class: 'flex flex-col gap-4 w-full' }, [
    Div({ class: 'flex gap-4' }, [
      Colorpicker({
        label: 'Background',
        value: bgColor
      }),
      Colorpicker({
        label: 'Text',
        value: textColor
      })
    ]),
    Div({ 
      class: 'p-6 rounded-lg text-center font-bold transition-all duration-200',
      style: () => `background-color: ${bgColor()}; color: ${textColor()}`
    }, [
      'Preview text with your colors'
    ])
  ]);
};
$mount(TextDemo, '#demo-text');
```

### All Variants

<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
  <div class="card-body">
    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
    <div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-4"></div>
  </div>
</div>

```javascript
const VariantsDemo = () => {
  return Div({ class: 'flex flex-wrap gap-4 items-center' }, [
    Colorpicker({
      label: 'Primary',
      value: $('#3b82f6')
    }),
    Colorpicker({
      label: 'Success',
      value: $('#10b981')
    }),
    Colorpicker({
      label: 'Warning',
      value: $('#f59e0b')
    }),
    Colorpicker({
      label: 'Error',
      value: $('#ef4444')
    })
  ]);
};
$mount(VariantsDemo, '#demo-variants');
```

### Dynamic Color Swatch

<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
  <div class="card-body">
    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
    <div id="demo-dynamic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
  </div>
</div>

```javascript
const DynamicDemo = () => {
  const primary = $('#3b82f6');
  const secondary = $('#ef4444');
  const accent = $('#10b981');
  
  return Div({ class: 'flex flex-col gap-4 w-full' }, [
    Div({ class: 'flex flex-wrap gap-4' }, [
      Colorpicker({ label: 'Primary', value: primary }),
      Colorpicker({ label: 'Secondary', value: secondary }),
      Colorpicker({ label: 'Accent', value: accent })
    ]),
    Div({ class: 'grid grid-cols-3 gap-2 mt-2' }, [
      Div({ 
        class: 'h-12 rounded-lg shadow-sm flex items-center justify-center text-xs font-bold text-white',
        style: () => `background-color: ${primary()}`
      }, 'Primary'),
      Div({ 
        class: 'h-12 rounded-lg shadow-sm flex items-center justify-center text-xs font-bold text-white',
        style: () => `background-color: ${secondary()}`
      }, 'Secondary'),
      Div({ 
        class: 'h-12 rounded-lg shadow-sm flex items-center justify-center text-xs font-bold text-white',
        style: () => `background-color: ${accent()}`
      }, 'Accent')
    ])
  ]);
};
$mount(DynamicDemo, '#demo-dynamic');
```