AccentPicker

Exclusive swatch picker. Controlled or uncontrolled; the root exposes data-accent with the active option so consumers can read it. Applying the value to the document is the consumer’s responsibility.

Import

import { AccentPicker } from "@jcsoftdev/ui/forms";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/forms/accent-picker.

Usage

<AccentPicker
  options={options}
  defaultValue="coral"
  aria-label="Color de la barbería"
/>

Props

Prop	Type	Default	Description
options *	AccentOption[]
value	string
defaultValue	string
onValueChange	((value: string) => void)

* marks a required prop.

It also accepts the native props of the element or primitive it renders (for example className, id, aria-* and event handlers).

Storybook stories

• Default
• Disabled
• Controlled

Source

packages/ui/src/forms/accent-picker/accent-picker.tsx