ColorField

ColorField muestra un botón cuadrado de color (o un placeholder vacío "toca para seleccionar" cuando no hay color). Al hacer clic abre un popover con:

• Una grilla de 10 colores base × 5 niveles de sombra
• Tonos neutros complementarios
• Colores semánticos del tema (primary, danger, warning, success, info)
• Un input hexadecimal libre para colores arbitrarios

Hacer clic en la muestra de color cuando ya hay un color seleccionado lo borra.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | value | string | Sí | — | Color actual (cadena CSS hexadecimal o nombre de color del tema). | | onChange | (color?: string \| null) => void | Sí | — | Llamado con el nuevo color, o null al borrar. | | label | string | No | — | Etiqueta mostrada sobre el campo. | | description | string | No | — | Texto de ayuda mostrado debajo del campo. | | disablePrimary | boolean | No | — | Si es true, la muestra de color semántico "primary" se deshabilita y no puede seleccionarse. | | containerStyle | React.CSSProperties | No | — | Estilos del FieldContainer exterior. | | headerStyle | React.CSSProperties | No | — | Estilos del área de encabezado del campo. | | bodyStyle | React.CSSProperties | No | — | Estilos del área de cuerpo del campo. | | 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 exterior. | | id | string | No | — | Atributo id del contenedor. |

Uso

Básico

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

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

  return (
    <ColorField
      label="Color de marca"
      value={color}
      onChange={(c) => setColor(c ?? '')}
    />
  );
}

Deshabilitando el color primario

<ColorField
  label="Color de acento"
  value={accentColor}
  onChange={(c) => setAccentColor(c ?? '')}
  disablePrimary={true}
  description="Selecciona cualquier color excepto el primario."
/>