Color Picker (WIP)

Color

rgba(235, 94, 65, 1)

Installation

npx @zuish/cli add color-picker

Add Component

Copy the code snippet below into you components folder.

'use client'
import { ColorPicker } from '@ark-ui/react/color-picker'
import type { ComponentProps } from 'react'
import { createStyleContext } from 'styled-system/jsx'
import { colorPicker } from 'styled-system/recipes'

const { withProvider, withContext } = createStyleContext(colorPicker)

export type RootProps = ComponentProps<typeof Root>
export const Root = withProvider(ColorPicker.Root, 'root')
export const RootProvider = withProvider(ColorPicker.RootProvider, 'root')
export const Area = withContext(ColorPicker.Area, 'area')
export const AreaBackground = withContext(ColorPicker.AreaBackground, 'areaBackground')
export const AreaThumb = withContext(ColorPicker.AreaThumb, 'areaThumb')
export const ChannelInput = withContext(ColorPicker.ChannelInput, 'channelInput')
export const ChannelSlider = withContext(ColorPicker.ChannelSlider, 'channelSlider')
export const ChannelSliderLabel = withContext(ColorPicker.ChannelSliderLabel, 'channelSliderLabel')
export const ChannelSliderThumb = withContext(ColorPicker.ChannelSliderThumb, 'channelSliderThumb')
export const ChannelSliderTrack = withContext(ColorPicker.ChannelSliderTrack, 'channelSliderTrack')
export const ChannelSliderValueText = withContext(
  ColorPicker.ChannelSliderValueText,
  'channelSliderValueText',
)
export const Content = withContext(ColorPicker.Content, 'content')
export const Control = withContext(ColorPicker.Control, 'control')
export const EyeDropperTrigger = withContext(ColorPicker.EyeDropperTrigger, 'eyeDropperTrigger')
export const FormatSelect = withContext(ColorPicker.FormatSelect, 'formatSelect')
export const FormatTrigger = withContext(ColorPicker.FormatTrigger, 'formatTrigger')
export const HiddenInput = ColorPicker.HiddenInput
export const Label = withContext(ColorPicker.Label, 'label')
export const Positioner = withContext(ColorPicker.Positioner, 'positioner')
export const Swatch = withContext(ColorPicker.Swatch, 'swatch')
export const SwatchGroup = withContext(ColorPicker.SwatchGroup, 'swatchGroup')
export const SwatchIndicator = withContext(ColorPicker.SwatchIndicator, 'swatchIndicator')
export const SwatchTrigger = withContext(ColorPicker.SwatchTrigger, 'swatchTrigger')
export const TransparencyGrid = withContext(ColorPicker.TransparencyGrid, 'transparencyGrid')
export const Trigger = withContext(ColorPicker.Trigger, 'trigger')
export const ValueSwatch = ColorPicker.ValueSwatch
export const ValueText = withContext(ColorPicker.ValueText, 'valueText')
export const View = withContext(ColorPicker.View, 'view')

export { ColorPickerContext as Context } from '@ark-ui/react/color-picker'

Integrate Recipe

Integrate this recipe in to your Panda config.

import { colorPickerAnatomy } from '@ark-ui/react/anatomy'
import { defineSlotRecipe } from '@pandacss/dev'

export const colorPicker = defineSlotRecipe({
  className: 'color-picker',
  slots: colorPickerAnatomy.keys(),
  base: {
    root: {
      display: 'flex',
      flexDirection: 'column',
      gap: '1.5',
    },
    label: {
      color: 'fg.default',
      fontWeight: 'medium',
      textStyle: 'sm',
    },
    control: {
      display: 'flex',
      flexDirection: 'row',
      gap: '2',
    },
    content: {
      background: 'gray.surface.bg',
      borderRadius: 'l3',
      boxShadow: 'lg',
      display: 'flex',
      flexDirection: 'column',
      maxWidth: 'sm',
      p: '4',
      zIndex: 'dropdown',
      _open: {
        animation: 'fadeIn 0.25s ease-out',
      },
      _closed: {
        animation: 'fadeOut 0.2s ease-out',
      },
      _hidden: {
        display: 'none',
      },
    },
    area: {
      height: '36',
      borderRadius: 'l2',
      overflow: 'hidden',
    },
    areaThumb: {
      borderRadius: 'full',
      height: '2.5',
      width: '2.5',
      boxShadow: 'white 0px 0px 0px 2px, black 0px 0px 2px 1px',
      outline: 'none',
    },
    areaBackground: {
      height: 'full',
    },
    channelSlider: {
      borderRadius: 'l2',
    },
    channelSliderTrack: {
      height: '3',
      borderRadius: 'l2',
    },
    swatchGroup: {
      display: 'grid',
      gridTemplateColumns: 'repeat(7, 1fr)',
      gap: '2',
      background: 'gray.surface.bg',
    },
    swatch: {
      height: '6',
      width: '6',
      borderRadius: 'l2',
      boxShadow:
        '0 0 0 1px var(--colors-border-emphasized), 0 0 0 2px var(--colors-bg-default) inset',
    },
    channelSliderThumb: {
      borderRadius: 'full',
      height: '2.5',
      width: '2.5',
      boxShadow: 'white 0px 0px 0px 2px, black 0px 0px 2px 1px',
      transform: 'translate(-50%, -50%)',
      outline: 'none',
    },
    transparencyGrid: {
      borderRadius: 'l2',
    },
  },
})

Usage

import { ColorPicker } from '@/components/ui'

<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.