ColorPaletteField

ColorPaletteField renderiza un botón de barra de color que abre un popover con 13 colores pastel fijos. Al montar, el primer color de la paleta se selecciona automáticamente. Este componente es adecuado cuando se quiere ofrecer un conjunto curado y limitado de colores suaves (ej. para fondos de eventos de calendario o badges de categoría).

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | value | string | Sí | — | Color seleccionado actualmente (cadena CSS hexadecimal). | | onChange | (color: string) => void | Sí | — | Llamado con el color hexadecimal seleccionado. | | label | string | No | — | Etiqueta mostrada sobre la barra de color. | | description | string | No | — | Texto de ayuda mostrado debajo del componente. | | containerStyle | React.CSSProperties | No | — | Estilos del contenedor raíz. | | labelStyle | React.CSSProperties | No | — | Estilos del elemento de etiqueta. | | descriptionStyle | React.CSSProperties | No | — | Estilos del párrafo de descripción. | | className | string | No | — | Clase CSS del contenedor raíz. | | id | string | No | — | Atributo id del contenedor raíz. |

Uso

Básico

import React, { useState } from 'react';
import ColorPaletteField from '@/components/fields/ColorPaletteField';

export default function Example() {
  const [color, setColor] = useState('');

  return (
    <ColorPaletteField
      label="Color del evento"
      value={color}
      onChange={setColor}
    />
  );
}