Color Picker Component

Seletor de cores avançado com suporte a múltiplos formatos, paletas predefinidas e criador de gradientes.

🎨 Recursos

✅ Sliders HSL interativos (Matiz, Saturação, Luminosidade)
✅ Formatos: HEX, RGB, HSL
✅ 3 paletas predefinidas (Material, Pastéis, Neutros)
✅ Criador de gradientes com ângulo ajustável
✅ Suporte a opacidade (alpha)
✅ Modo inline ou dropdown
✅ 3 tamanhos: small, medium, large
✅ Integração com Angular Forms (ngModel / FormControl)

📦 Instalação

import { ColorPickerComponent } from '@muxima-ui/color-picker';

@Component({
  imports: [ColorPickerComponent]
})

🚀 Uso Básico

<!-- Dropdown -->
<muxima-color-picker
  [(ngModel)]="selectedColor"
  (colorChange)="onColorChange($event)"
></muxima-color-picker>

<!-- Inline -->
<muxima-color-picker
  [inline]="true"
  [format]="'hex'"
  [(ngModel)]="color"
></muxima-color-picker>

📝 Propriedades

Propriedade	Tipo	Padrão	Descrição
`format`	`'hex' \| 'rgb' \| 'hsl'`	`'hex'`	Formato de exibição da cor
`showPalettes`	`boolean`	`true`	Mostrar paletas de cores
`showGradient`	`boolean`	`false`	Mostrar criador de gradientes
`showAlpha`	`boolean`	`false`	Mostrar controle de opacidade
`inline`	`boolean`	`false`	Exibir sempre aberto
`disabled`	`boolean`	`false`	Desabilitar o componente
`size`	`'small' \| 'medium' \| 'large'`	`'medium'`	Tamanho do botão trigger
`customPalettes`	`ColorPalette[]`	`[]`	Paletas personalizadas

🎯 Eventos

Evento	Tipo	Descrição
`colorChange`	`ColorFormat`	Emitido quando a cor muda
`formatChange`	`'hex' \| 'rgb' \| 'hsl'`	Emitido quando o formato muda

💡 Exemplos Avançados

Com Gradientes

<muxima-color-picker
  [showGradient]="true"
  [inline]="true"
></muxima-color-picker>

Com Opacidade

<muxima-color-picker
  [showAlpha]="true"
  [(ngModel)]="colorWithAlpha"
></muxima-color-picker>

Paletas Personalizadas

customPalettes: ColorPalette[] = [
  {
    name: 'Meu Tema',
    colors: ['#667eea', '#764ba2', '#f093fb', '#4facfe']
  }
];

<muxima-color-picker
  [customPalettes]="customPalettes"
></muxima-color-picker>

🎨 Interface ColorFormat

interface ColorFormat {
  hex: string;           // '#667eea'
  rgb: {                 // { r: 102, g: 126, b: 234 }
    r: number;
    g: number;
    b: number;
  };
  hsl: {                 // { h: 240, s: 76, l: 72 }
    h: number;
    s: number;
    l: number;
  };
}

🎨 Tema Muxima UI

Usa o gradiente característico: linear-gradient(135deg, #667eea 0%, #764ba2 100%)