@zag-js/color-picker 0.70.0 → 0.72.0

package/src/color-picker.props.ts

@@ -1,53 +0,0 @@
-import { createProps } from "@zag-js/types"
-import { createSplitProps } from "@zag-js/utils"
-import type {
-  AreaProps,
-  ChannelProps,
-  SwatchProps,
-  SwatchTriggerProps,
-  TransparencyGridProps,
-  UserDefinedContext,
-} from "./color-picker.types"
-
-export const props = createProps<UserDefinedContext>()([
-  "closeOnSelect",
-  "dir",
-  "disabled",
-  "format",
-  "getRootNode",
-  "id",
-  "ids",
-  "initialFocusEl",
-  "name",
-  "name",
-  "onFocusOutside",
-  "onFormatChange",
-  "onInteractOutside",
-  "onOpenChange",
-  "onPointerDownOutside",
-  "onValueChange",
-  "onValueChangeEnd",
-  "open.controlled",
-  "open",
-  "positioning",
-  "required",
-  "readOnly",
-  "value",
-])
-
-export const splitProps = createSplitProps<Partial<UserDefinedContext>>(props)
-
-export const areaProps = createProps<AreaProps>()(["xChannel", "yChannel"])
-export const splitAreaProps = createSplitProps<AreaProps>(areaProps)
-
-export const channelProps = createProps<ChannelProps>()(["channel", "orientation"])
-export const splitChannelProps = createSplitProps<ChannelProps>(channelProps)
-
-export const swatchTriggerProps = createProps<SwatchTriggerProps>()(["value", "disabled"])
-export const splitSwatchTriggerProps = createSplitProps<SwatchTriggerProps>(swatchTriggerProps)
-
-export const swatchProps = createProps<SwatchProps>()(["value", "respectAlpha"])
-export const splitSwatchProps = createSplitProps<SwatchProps>(swatchProps)
-
-export const transparencyGridProps = createProps<TransparencyGridProps>()(["size"])
-export const splitTransparencyGridProps = createSplitProps<TransparencyGridProps>(transparencyGridProps)

package/src/color-picker.types.ts

@@ -1,355 +0,0 @@
-import type { Color, ColorAxes, ColorChannel, ColorFormat, ColorType } from "@zag-js/color-utils"
-import type { Machine, StateMachine as S } from "@zag-js/core"
-import type { InteractOutsideHandlers } from "@zag-js/dismissable"
-import type { PositioningOptions } from "@zag-js/popper"
-import type { CommonProperties, DirectionProperty, Orientation, PropTypes, RequiredBy } from "@zag-js/types"
-
-export type ExtendedColorChannel = ColorChannel | "hex" | "css"
-
-interface EyeDropper {
-  new (): EyeDropper
-  open: (options?: { signal?: AbortSignal }) => Promise<{ sRGBHex: string }>
-  [Symbol.toStringTag]: "EyeDropper"
-}
-
-declare global {
-  interface Window {
-    EyeDropper: EyeDropper
-  }
-}
-
-/* -----------------------------------------------------------------------------
- * Callback details
- * -----------------------------------------------------------------------------*/
-
-export interface ValueChangeDetails {
-  value: Color
-  valueAsString: string
-}
-
-export interface OpenChangeDetails {
-  open: boolean
-}
-
-export interface FormatChangeDetails {
-  format: ColorFormat
-}
-
-/* -----------------------------------------------------------------------------
- * Machine context
- * -----------------------------------------------------------------------------*/
-
-export type ElementIds = 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
-  channelSliderThumb(id: ColorChannel): string
-}>
-
-interface PublicContext extends CommonProperties, DirectionProperty, InteractOutsideHandlers {
-  /**
-   * The ids of the elements in the color picker. Useful for composition.
-   */
-  ids?: ElementIds
-  /**
-   * The current color value
-   * @default #000000
-   */
-  value: Color
-  /**
-   * Whether the color picker is disabled
-   */
-  disabled?: boolean
-  /**
-   * Whether the color picker is read-only
-   */
-  readOnly?: boolean
-  /**
-   * Whether the color picker is required
-   */
-  required?: boolean
-  /**
-   * Handler that is called when the value changes, as the user drags.
-   */
-  onValueChange?: (details: ValueChangeDetails) => void
-  /**
-   * Handler that is called when the user stops dragging.
-   */
-  onValueChangeEnd?: (details: ValueChangeDetails) => void
-  /**
-   * Handler that is called when the user opens or closes the color picker.
-   */
-  onOpenChange?: (details: OpenChangeDetails) => void
-  /**
-   * The name for the form input
-   */
-  name?: string
-  /**
-   * The positioning options for the color picker
-   */
-  positioning: PositioningOptions
-  /**
-   * The initial focus element when the color picker is opened.
-   */
-  initialFocusEl?: () => HTMLElement | null
-  /**
-   * Whether the color picker is open
-   */
-  open?: boolean
-  /**
-   * Whether the color picker open state is controlled by the user
-   */
-  "open.controlled"?: boolean
-  /**
-   * The color format to use
-   * @default "rgba"
-   */
-  format: ColorFormat
-  /**
-   * Function called when the color format changes
-   */
-  onFormatChange?: (details: FormatChangeDetails) => void
-  /**
-   * Whether to close the color picker when a swatch is selected
-   * @default false
-   */
-  closeOnSelect?: boolean
-}
-
-interface PrivateContext {
-  /**
-   * @internal
-   * The id of the thumb that is currently being dragged
-   */
-  activeId: string | null
-  /**
-   * @internal
-   * The channel that is currently being interacted with
-   */
-  activeChannel: Partial<ColorAxes> | null
-  /**
-   * @internal
-   * The orientation of the channel that is currently being interacted with
-   */
-  activeOrientation: Orientation | null
-  /**
-   * @internal
-   * Whether the checkbox's fieldset is disabled
-   */
-  fieldsetDisabled: boolean
-  /**
-   * @internal
-   * The current placement of the color picker
-   */
-  currentPlacement?: PositioningOptions["placement"]
-  /**
-   *  @internal
-   * Whether the color picker should return focus to the trigger when closed
-   */
-  restoreFocus?: boolean
-}
-
-type ComputedContext = Readonly<{
-  /**
-   * @computed
-   * Whether the color picker is in RTL mode
-   */
-  isRtl: boolean
-  /**
-   * @computed
-   * Whether the color picker is interactive
-   */
-  isInteractive: boolean
-  /**
-   * @computed
-   * The color value as a Color object
-   */
-  valueAsString: string
-  /**
-   * @computed
-   * Whether the color picker is disabled
-   */
-  isDisabled: boolean
-  /**
-   * @computed
-   * The area value as a Color object
-   */
-  areaValue: Color
-}>
-
-export type UserDefinedContext = RequiredBy<PublicContext, "id">
-
-export interface MachineContext extends PublicContext, PrivateContext, ComputedContext {}
-
-export interface MachineState {
-  tags: "open" | "closed" | "dragging" | "focused"
-  value: "idle" | "focused" | "open" | "open:dragging"
-}
-
-export type State = S.State<MachineContext, MachineState>
-
-export type Send = S.Send<S.AnyEventObject>
-
-export type Service = Machine<MachineContext, MachineState, S.AnyEventObject>
-
-/* -----------------------------------------------------------------------------
- * Component API
- * -----------------------------------------------------------------------------*/
-
-export interface ChannelProps {
-  channel: ColorChannel
-  orientation?: Orientation
-}
-
-export interface ChannelSliderProps extends ChannelProps {
-  format?: ColorFormat
-}
-
-export interface ChannelInputProps {
-  channel: ExtendedColorChannel
-  orientation?: Orientation
-}
-
-export interface AreaProps {
-  xChannel?: ColorChannel
-  yChannel?: ColorChannel
-}
-
-export interface SwatchTriggerProps {
-  /**
-   * The color value
-   */
-  value: string | Color
-  /**
-   * Whether the swatch trigger is disabled
-   */
-  disabled?: boolean
-}
-
-export interface SwatchTriggerState {
-  value: Color
-  valueAsString: string
-  checked: boolean
-  disabled: boolean
-}
-
-export interface SwatchProps {
-  /**
-   * The color value
-   */
-  value: string | Color
-  /**
-   * Whether to include the alpha channel in the color
-   */
-  respectAlpha?: boolean
-}
-
-export interface TransparencyGridProps {
-  size?: string
-}
-
-export interface MachineApi<T extends PropTypes = PropTypes> {
-  /**
-   * Whether the color picker is being dragged
-   */
-  dragging: boolean
-  /**
-   * Whether the color picker is open
-   */
-  open: boolean
-  /**
-   * The current color value (as a string)
-   */
-  value: Color
-  /**
-   * The current color value (as a Color object)
-   */
-  valueAsString: string
-  /**
-   * Function to set the color value
-   */
-  setValue(value: string | Color): void
-  /**
-   * Function to set the color value
-   */
-  getChannelValue(channel: ColorChannel): string
-  /**
-   * Function to get the formatted and localized value of a specific channel
-   */
-  getChannelValueText(channel: ColorChannel, locale: string): string
-  /**
-   * Function to set the color value of a specific channel
-   */
-  setChannelValue(channel: ColorChannel, value: number): void
-  /**
-   * The current color format
-   */
-  format: ColorFormat
-  /**
-   * Function to set the color format
-   */
-  setFormat(format: ColorFormat): void
-  /**
-   * The alpha value of the color
-   */
-  alpha: number
-  /**
-   * Function to set the color alpha
-   */
-  setAlpha(value: number): void
-  /**
-   * Function to open or close the color picker
-   */
-  setOpen(open: boolean): void
-
-  getRootProps(): T["element"]
-  getLabelProps(): T["element"]
-  getControlProps(): T["element"]
-  getTriggerProps(): T["button"]
-  getPositionerProps(): T["element"]
-  getContentProps(): T["element"]
-  getHiddenInputProps(): T["input"]
-  getValueTextProps(): T["element"]
-
-  getAreaProps(props?: AreaProps): T["element"]
-  getAreaBackgroundProps(props?: AreaProps): T["element"]
-  getAreaThumbProps(props?: AreaProps): T["element"]
-
-  getChannelInputProps(props: ChannelInputProps): T["input"]
-
-  getChannelSliderProps(props: ChannelSliderProps): T["element"]
-  getChannelSliderTrackProps(props: ChannelSliderProps): T["element"]
-  getChannelSliderThumbProps(props: ChannelSliderProps): T["element"]
-  getChannelSliderLabelProps(props: ChannelProps): T["element"]
-  getChannelSliderValueTextProps(props: ChannelProps): T["element"]
-
-  getTransparencyGridProps(props?: TransparencyGridProps): T["element"]
-
-  getEyeDropperTriggerProps(): T["button"]
-
-  getSwatchGroupProps(): T["element"]
-  getSwatchTriggerProps(props: SwatchTriggerProps): T["button"]
-  getSwatchTriggerState(props: SwatchTriggerProps): SwatchTriggerState
-  getSwatchProps(props: SwatchProps): T["element"]
-  getSwatchIndicatorProps(props: SwatchProps): T["element"]
-
-  getFormatSelectProps(): T["select"]
-  getFormatTriggerProps(): T["button"]
-}
-
-/* -----------------------------------------------------------------------------
- * Re-exported types
- * -----------------------------------------------------------------------------*/
-
-export type { Color, ColorAxes, ColorChannel, ColorFormat, ColorType, PositioningOptions }

package/src/index.ts

@@ -1,28 +0,0 @@
-export type { FocusOutsideEvent, InteractOutsideEvent, PointerDownOutsideEvent } from "@zag-js/dismissable"
-export { anatomy } from "./color-picker.anatomy"
-export { connect } from "./color-picker.connect"
-export { machine } from "./color-picker.machine"
-export { parse } from "./color-picker.parse"
-export type {
-  MachineApi as Api,
-  AreaProps,
-  ChannelSliderProps,
-  ChannelInputProps,
-  ChannelProps,
-  Color,
-  ColorAxes,
-  ColorChannel,
-  ColorFormat,
-  ColorType,
-  UserDefinedContext as Context,
-  ElementIds,
-  FormatChangeDetails,
-  OpenChangeDetails,
-  PositioningOptions,
-  SwatchProps,
-  SwatchTriggerProps,
-  SwatchTriggerState,
-  TransparencyGridProps,
-  ValueChangeDetails,
-  Service,
-} from "./color-picker.types"

package/src/utils/get-channel-display-color.ts

@@ -1,20 +0,0 @@
-import { parseColor, type Color, type ColorChannel } from "@zag-js/color-utils"
-
-export function getChannelDisplayColor(color: Color, channel: ColorChannel) {
-  switch (channel) {
-    case "hue":
-      return parseColor(`hsl(${color.getChannelValue("hue")}, 100%, 50%)`)
-    case "lightness":
-    case "brightness":
-    case "saturation":
-    case "red":
-    case "green":
-    case "blue":
-      return color.withChannelValue("alpha", 1)
-    case "alpha": {
-      return color
-    }
-    default:
-      throw new Error("Unknown color channel: " + channel)
-  }
-}

package/src/utils/get-channel-input-value.ts

@@ -1,79 +0,0 @@
-import { parseColor, type Color, type ColorChannelRange } from "@zag-js/color-utils"
-import type { ExtendedColorChannel } from "../color-picker.types"
-
-export function getChannelValue(color: Color, channel: ExtendedColorChannel | null | undefined): string {
-  if (channel == null) return ""
-
-  if (channel === "hex") {
-    return color.toString("hex")
-  }
-
-  if (channel === "css") {
-    return color.toString("css")
-  }
-
-  if (channel in color) {
-    return color.getChannelValue(channel).toString()
-  }
-
-  const isHSL = color.getFormat() === "hsla"
-
-  switch (channel) {
-    case "hue":
-      return isHSL
-        ? color.toFormat("hsla").getChannelValue("hue").toString()
-        : color.toFormat("hsba").getChannelValue("hue").toString()
-
-    case "saturation":
-      return isHSL
-        ? color.toFormat("hsla").getChannelValue("saturation").toString()
-        : color.toFormat("hsba").getChannelValue("saturation").toString()
-
-    case "lightness":
-      return color.toFormat("hsla").getChannelValue("lightness").toString()
-
-    case "brightness":
-      return color.toFormat("hsba").getChannelValue("brightness").toString()
-
-    case "red":
-    case "green":
-    case "blue":
-      return color.toFormat("rgba").getChannelValue(channel).toString()
-
-    default:
-      return color.getChannelValue(channel).toString()
-  }
-}
-
-export function getChannelRange(color: Color, channel: ExtendedColorChannel): ColorChannelRange | undefined {
-  switch (channel) {
-    case "hex":
-      const minColor = parseColor("#000000")
-      const maxColor = parseColor("#FFFFFF")
-      return {
-        minValue: minColor.toHexInt(),
-        maxValue: maxColor.toHexInt(),
-        pageSize: 10,
-        step: 1,
-      }
-
-    case "css":
-      return undefined
-
-    case "hue":
-    case "saturation":
-    case "lightness":
-      return color.toFormat("hsla").getChannelRange(channel)
-
-    case "brightness":
-      return color.toFormat("hsba").getChannelRange(channel)
-
-    case "red":
-    case "green":
-    case "blue":
-      return color.toFormat("rgba").getChannelRange(channel)
-
-    default:
-      return color.getChannelRange(channel)
-  }
-}

package/src/utils/get-slider-background.ts

@@ -1,45 +0,0 @@
-import type { ChannelProps, Color, MachineContext } from "../color-picker.types"
-
-function getSliderBackgroundDirection(orientation: "vertical" | "horizontal", dir: "ltr" | "rtl") {
-  if (orientation === "vertical") {
-    return "top"
-  } else if (dir === "ltr") {
-    return "right"
-  } else {
-    return "left"
-  }
-}
-
-interface SliderBackgroundProps extends Required<ChannelProps> {
-  value: Color
-  dir: MachineContext["dir"]
-}
-
-export const getSliderBackground = (props: SliderBackgroundProps) => {
-  const { channel, value, dir } = props
-  const bgDirection = getSliderBackgroundDirection(props.orientation, dir!)
-  const { minValue, maxValue } = value.getChannelRange(channel)
-
-  switch (channel) {
-    case "hue":
-      return `linear-gradient(to ${bgDirection}, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%)`
-    case "lightness": {
-      let start = value.withChannelValue(channel, minValue).toString("css")
-      let middle = value.withChannelValue(channel, (maxValue - minValue) / 2).toString("css")
-      let end = value.withChannelValue(channel, maxValue).toString("css")
-      return `linear-gradient(to ${bgDirection}, ${start}, ${middle}, ${end})`
-    }
-    case "saturation":
-    case "brightness":
-    case "red":
-    case "green":
-    case "blue":
-    case "alpha": {
-      let start = value.withChannelValue(channel, minValue).toString("css")
-      let end = value.withChannelValue(channel, maxValue).toString("css")
-      return `linear-gradient(to ${bgDirection}, ${start}, ${end})`
-    }
-    default:
-      throw new Error("Unknown color channel: " + channel)
-  }
-}