Color Picker (WIP)

Color

rgba(235, 94, 65, 1)

React

Usage

import { ColorPicker } from '@zalify-ui/react'

<ColorPicker.Root>
  <ColorPicker.Control>
    <ColorPicker.ChannelInput channel="hex" />
    <ColorPicker.Trigger>
      <ColorPicker.Swatch value="#000000" />
    </ColorPicker.Trigger>
  </ColorPicker.Control>
</ColorPicker.Root>

Props

Root

Prop	Default	Type
`closeOnSelect`	`false`	`boolean` Whether to close the color picker when a swatch is selected
`defaultFormat`	`\rgba\`	`ColorFormat` The initial color format when rendered. Use when you don't need to control the color format of the color picker.
`defaultValue`	`#000000`	`Color` The initial color value when rendered. Use when you don't need to control the color value of the color picker.
`lazyMount`	`false`	`boolean` Whether to enable lazy mounting
`openAutoFocus`	`true`	`boolean` Whether to auto focus the color picker when it is opened
`skipAnimationOnMount`	`false`	`boolean` Whether to allow the initial presence animation.
`unmountOnExit`	`false`	`boolean` Whether to unmount on exit.
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior.
`defaultOpen`		`boolean` The initial open state of the color picker when rendered. Use when you don't need to control the open state of the color picker.
`disabled`		`boolean` Whether the color picker is disabled
`format`		`ColorFormat` The controlled color format to use
`id`		`string` The unique identifier of the machine.
`ids`		`Partial<{ root: string; control: string; trigger: string; label: string; input: string; hiddenInput: string; content: string; area: string; areaGradient: string; positioner: string; formatSelect: string; areaThumb: string; channelInput: (id: string) => string; channelSliderTrack: (id: ColorChannel) => string; channe...` The ids of the elements in the color picker. Useful for composition.
`immediate`		`boolean` Whether to synchronize the present change immediately or defer it to the next frame
`initialFocusEl`		`() => HTMLElement \| null` The initial focus element when the color picker is opened.
`inline`		`boolean` Whether to render the color picker inline
`invalid`		`boolean` Whether the color picker is invalid
`name`		`string` The name for the form input
`onExitComplete`		`VoidFunction` Function called when the animation ends in the closed state
`onFocusOutside`		`(event: FocusOutsideEvent) => void` Function called when the focus is moved outside the component
`onFormatChange`		`(details: FormatChangeDetails) => void` Function called when the color format changes
`onInteractOutside`		`(event: InteractOutsideEvent) => void` Function called when an interaction happens outside the component
`onOpenChange`		`(details: OpenChangeDetails) => void` Handler that is called when the user opens or closes the color picker.
`onPointerDownOutside`		`(event: PointerDownOutsideEvent) => void` Function called when the pointer is pressed down outside the component
`onValueChange`		`(details: ValueChangeDetails) => void` Handler that is called when the value changes, as the user drags.
`onValueChangeEnd`		`(details: ValueChangeDetails) => void` Handler that is called when the user stops dragging.
`open`		`boolean` The controlled open state of the color picker
`positioning`		`PositioningOptions` The positioning options for the color picker
`present`		`boolean` Whether the node is present (controlled by the user)
`readOnly`		`boolean` Whether the color picker is read-only
`required`		`boolean` Whether the color picker is required
`value`		`Color` The controlled color value of the color picker

Area

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior.
`xChannel`		`ColorChannel`
`yChannel`		`ColorChannel`

ChannelInput

Prop	Default	Type
`channel`*		`ExtendedColorChannel`
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior.
`orientation`		`Orientation`

ChannelSlider

Prop	Default	Type
`channel`*		`ColorChannel`
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior.
`orientation`		`Orientation`

Swatch

Prop	Default	Type
`value`*		`string \| Color` The color value
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior.
`respectAlpha`		`boolean` Whether to include the alpha channel in the color

SwatchTrigger

Prop	Default	Type
`value`*		`string \| Color` The color value
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior.
`disabled`		`boolean` Whether the swatch trigger is disabled

TransparencyGrid

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior.
`size`		`string`

ValueSwatch

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior.
`respectAlpha`		`boolean` Whether to include the alpha channel in the color

ValueText

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior.
`format`		`ColorStringFormat`

View

Prop	Default	Type
`format`*		`ColorFormat`
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior.