PastelColorField

PastelColorField renderiza un botón de barra de color que abre un popover con 13 círculos de color pastel. Al montar, el primer color de la paleta (#A597CC) se selecciona automáticamente y se emite via onChange. Este componente es funcionalmente idéntico a ColorPaletteField.

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 PastelColorField from '@/components/fields/PastelColorField';

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

  return (
    <PastelColorField
      label="Color de etiqueta"
      value={color}
      onChange={setColor}
    />
  );
}