ColorPicker

Selector de color con área de saturación y brillo, barra de tono, campo hexadecimal y muestras guardadas.

Cuándo usarlo

Props. defaultValue (hex), onChange(hex), swatches (lista de hex), swatchesLabel. Panel de 320px radius-2xl con shadow-xl; mandos blancos de 20px. Funciona con ratón, táctil y flechas del teclado.

Límites. Solo color sólido en hex. Los degradados, la subida de imagen y los modelos RGB/HSL del archivo no están.

Teclado. El área es un control de dos ejes: izquierda y derecha cambian la saturación, arriba y abajo el brillo. En la barra de tono, izquierda y derecha. El campo hex solo avisa cuando el color está completo.

Ejemplos

Colores guardados

Props

Prop	Tipo	Por defecto	Descripción
`defaultValue`	`string`	`#4f39f6`	Color inicial en hex. Por defecto, el índigo de la marca.
`onChange`	`((hex: string) => void)`	—	Recibe el hex en minúsculas con `#` en cada cambio.
`swatches`	`string[]`	—	Colores guardados, en hex.
`swatchesLabel`	`string`	`Colores guardados`
`hexLabel`	`string`	`Hex`	Nombre accesible del campo hexadecimal.
`className`	`string`	—

Código

import { ColorPicker } from "@jotis-me/react";

export default function Page() {
	return (
		<>
			<ColorPicker defaultValue="#4f39f6" swatches={["#4f39f6", "#00a63e"]} onChange={guardar} />
		</>
	);
}

---
import { ColorPicker } from "@jotis-me/react";
---

<ColorPicker client:load defaultValue="#4f39f6" swatches={["#4f39f6", "#00a63e"]} onChange={guardar} />

onChange es una función y no cruza de Astro a una isla: envuélvelo en un .tsx y úsalo con client:load.