Carregando…

Arc Color Picker

Inputs

Two-axis hue/opacity slider with grain preview and swatch palette.

Instalação via CLI

$ npx kikitocn add arc-color-picker

Interno:

@/lib/utils

Exemplo de uso

Arc Color PickerExample.tsx

import { ArcColorPicker } from "@/components/ui/cn/arc-color-picker/ArcColorPicker";

export function ArcColorPickerExample() {
  return (
    <ArcColorPicker />
  );
}

Props

Prop	Tipo	Padrão	Descrição
`value`	`string`	—	Cor selecionada (controlado, formato hsla)
`defaultValue`	`string`	—	Cor inicial (não-controlado)
`onChange`	`(color: string) => void`	—	Callback ao selecionar cor
`swatches`	`ArcColorPickerSwatch[]`	—	Paleta exibida acima do slider
`grain`	`number`	—	Intensidade do grão do preview (controlado), 0-100
`defaultGrain`	`number`	`30`	Intensidade inicial do grão
`onGrainChange`	`(grain: number) => void`	—	Callback ao arrastar o slider de grão
`className`	`string`	—	Classes CSS extras
`style`	`React.CSSProperties`	—	Estilos inline extras

Voltar para Inputs

Carregando…