import { ColorPicker } from '@hanzo/ui'
A swatch button opens a hue and saturation panel plus a hex field; drag either, or type a hex value, and the swatch and label update together.
export function Default() {return <ColorPicker value="#3b82f6" />}
`presets` renders a row of swatches under the fields for a one-click pick, alongside the hue, saturation and hex controls.
export function Presets() {return (<ColorPicker value="#f97316" presets={["#ef4444", "#f97316", "#eab308", "#22c55e", "#3b82f6", "#8b5cf6"]} />)}
`disabled` dims the trigger and ignores every drag, keystroke and preset click.
export function Disabled() {return <ColorPicker value="#22c55e" disabled />}
`onChange` fires on every hue drag, saturation drag, hex edit and preset click, so the picked value can drive anything else on the page.
export function Controlled() {const [color, setColor] = useState("#8b5cf6")return (<YStack gap="$3" items="flex-start"><ColorPicker value={color} onChange={setColor} /><Text fontFamily="$mono" fontSize="$2" color="$color11">{color}</Text></YStack>)}
export type ColorPickerProps = Omit<ComponentProps<typeof XStack>, 'onChange' | 'children'> & {/** Initial color, as any 3- or 6-digit hex string. The picker owns state from here on. */value?: string/** Fires on every change, hue drag, saturation drag and hex edit alike, as `#rrggbb`. */onChange?: (color: string) => voiddisabled?: boolean/** Swatches shown under the fields for one-click picks. */presets?: string[]}