# ColorPicker

A color picker component that provides an intuitive interface for selecting colors using the native HTML5 color input.

## Features

- **Native Picker**: Uses browser's native color picker for consistent UX
- **Visual Preview**: Color swatch showing current selection
- **Hex Display**: Shows the hex color code
- **Multiple Variants**: Plain, outlined, and filled styles
- **Compact Mode**: Space-saving option for dense UIs
- **Disabled & Readonly**: Full support for disabled and readonly states

## Installation

```bash
npm install @ticatec/uniface-element
```

```typescript
import ColorPicker from '@ticatec/uniface-element/ColorPicker';
```

## Basic Usage

```svelte
<script>
  import ColorPicker from '@ticatec/uniface-element/ColorPicker';

  let selectedColor = '#ff3e00';
</script>

<ColorPicker bind:value={selectedColor} />
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `value` | `string` | `'#ff3e00'` | Selected color (hex format) |
| `variant` | `'' \| 'plain' \| 'outlined' \| 'filled'` | `''` | Visual style variant |
| `disabled` | `boolean` | `false` | Disable the picker |
| `readonly` | `boolean` | `false` | Show in read-only mode |
| `compact` | `boolean` | `false` | Use compact layout |
| `style` | `string` | `''` | Additional CSS styles |
| `onChange` | `(value: string) => void` | - | Callback when color changes |

## Examples

### Basic Color Picker

```svelte
<script>
  import ColorPicker from '@ticatec/uniface-element/ColorPicker';

  let color = '#007acc';
</script>

<ColorPicker bind:value={color} />
<p>Selected: {color}</p>
```

### With Change Handler

```svelte
<script>
  import ColorPicker from '@ticatec/uniface-element/ColorPicker';

  let color = '#ff5722';

  function handleColorChange(newColor) {
    console.log('Color changed to:', newColor);
    color = newColor;
  }
</script>

<ColorPicker value={color} onChange={handleColorChange} />
```

### Different Variants

```svelte
<script>
  import ColorPicker from '@ticatec/uniface-element/ColorPicker';

  let color1 = '#e91e63';
  let color2 = '#9c27b0';
  let color3 = '#673ab7';
</script>

<div style="display: flex; flex-direction: column; gap: 16px;">
  <!-- Default -->
  <ColorPicker bind:value={color1} />

  <!-- Plain -->
  <ColorPicker bind:value={color2} variant="plain" />

  <!-- Outlined -->
  <ColorPicker bind:value={color3} variant="outlined" />

  <!-- Filled -->
  <ColorPicker bind:value={color1} variant="filled" />
</div>
```

### Compact Mode

```svelte
<script>
  import ColorPicker from '@ticatec/uniface-element/ColorPicker';

  let color = '#4caf50';
</script>

<ColorPicker bind:value={color} compact />
```

### Disabled & Readonly

```svelte
<script>
  import ColorPicker from '@ticatec/uniface-element/ColorPicker';

  let disabledColor = '#f44336';
  let readonlyColor = '#2196f3';
</script>

<div style="display: flex; gap: 16px;">
  <ColorPicker bind:value={disabledColor} disabled />
  <ColorPicker bind:value={readonlyColor} readonly />
</div>
```

### Color Theming Example

```svelte
<script>
  import ColorPicker from '@ticatec/uniface-element/ColorPicker';

  let primaryColor = '#007acc';
  let secondaryColor = '#22bdff';
  let backgroundColor = '#f5f5f5';
  let textColor = '#374151';
</script>

<div style="padding: 24px;">
  <FormField label="Primary Color">
    <ColorPicker bind:value={primaryColor} />
  </FormField>

  <FormField label="Secondary Color">
    <ColorPicker bind:value={secondaryColor} />
  </FormField>

  <FormField label="Background">
    <ColorPicker bind:value={backgroundColor} />
  </FormField>

  <FormField label="Text Color">
    <ColorPicker bind:value={textColor} />
  </FormField>
</div>
```

## Best Practices

1. **Hex Format**: Always use hex color codes (#RRGGBB)
2. **Default Colors**: Provide sensible defaults for better UX
3. **Live Preview**: Show the selected color in context when possible
4. **Validation**: Ensure valid hex format when accepting user input
5. **Accessibility**: Consider color contrast for accessibility requirements

## Browser Support

- Modern browsers with HTML5 color input support
- Chrome, Firefox, Safari, Edge (recent versions)
- Falls back gracefully on older browsers

## Notes

- The component uses the native color picker for optimal performance and consistency
- Color values should be in hex format (#RRGGBB)
- The color swatch displays the currently selected color
- Click the color swatch to open the native color picker dialog