componente · @solu30/ui-kit/input

ColorPicker

Grilla de muestras de color para elegir una, con la semántica de teclado de un grupo de radios.

Seguir leyendo — 2 párrafos más

Color swatch picker with full radiogroup accessibility.

Each swatch is a button with role="radio" and aria-checked. Selected swatch shows a white Check icon with drop-shadow. Uses design tokens for ring/offset chrome — never hardcoded colors.

9 sitios de import en 4 de 15 verticales — un archivo que la importa cuenta una vez, monte una instancia o veinte.

TheCharterPanel
gestorsalon
luigi
zentrya

El componente, montado

Cargando el espécimen…

export function ColorPickerMatrix() {
  const [temporada, setTemporada] = useState<string>(SEASON_COLORS[0])
  const [etiqueta, setEtiqueta] = useState<string>(SEASON_COLORS[3])

  return (
    <Stage label="ColorPicker · md y sm, alimentado con SEASON_COLORS del propio kit" wide>
      <div className="flex w-full flex-col gap-5">
        <div className="flex flex-col gap-2">
          <Label>Color de la temporada (size md)</Label>
          <ColorPicker
            colors={[...SEASON_COLORS]}
            value={temporada}
            onChange={setTemporada}
            aria-label="Color de la temporada"
          />
        </div>
        <div className="flex flex-col gap-2">
          <Label>Color de la etiqueta (size sm)</Label>
          <ColorPicker
            colors={[...SEASON_COLORS]}
            value={etiqueta}
            onChange={setEtiqueta}
            size="sm"
            aria-label="Color de la etiqueta"
          />
        </div>
      </div>
    </Stage>
  )
}

De specimens/input.tsx · ColorPickerMatrix: el espécimen del Muestrario, no un ejemplo oficial del paquete. Muestra cómo se usa la pieza de verdad, montada contra los tipos instalados —eso es lo que vale— pero no es documentación del kit.

Cómo se usa

import { ColorPicker } from '@solu30/ui-kit/input'

Props

6 props declaradas en los tipos de la versión instalada.
Prop	Requerida	Tipo	Qué hace
colors	sí	`string[]`	Available colors to choose from
value	sí	`string`	Currently selected color (hex string)
onChange	sí	`(color: string) => void`	Callback when color changes
size	opcional	`"sm" \| "md"`	Swatch size
className	opcional	`string`	Additional CSS class
aria-label	opcional	`string`	Accessibility label

Ejemplo del paquete

<ColorPicker
  colors={['var(--color-primary)', 'var(--color-ui-success)']}
  value={selectedColor}
  onChange={setSelectedColor}
  size="md"
  aria-label="Choose color"
/>

Del @example del JSDoc de @solu30/ui-kit, sin editar: son 65 de los 541 símbolos. La sangría y los renglones en blanco son los del paquete.