@zag-js/color-picker 0.9.2 → 0.10.0

package/src/color-picker.machine.ts

@@ -0,0 +1,358 @@
+import { Color, parseColor } from "@zag-js/color-utils"
+import { createMachine } from "@zag-js/core"
+import { trackPointerMove } from "@zag-js/dom-event"
+import { raf } from "@zag-js/dom-query"
+import { clampValue, getPercentValue, snapValueToStep } from "@zag-js/numeric-range"
+import { disableTextSelection } from "@zag-js/text-selection"
+import { compact } from "@zag-js/utils"
+import { dom } from "./color-picker.dom"
+import { ExtendedColorChannel, MachineContext, MachineState, UserDefinedContext } from "./color-picker.types"
+import { getChannelDetails } from "./utils/get-channel-details"
+import { getChannelInputValue } from "./utils/get-channel-input-value"
+
+export function machine(userContext: UserDefinedContext) {
+  const ctx = compact(userContext)
+
+  return createMachine<MachineContext, MachineState>(
+    {
+      id: "color-picker",
+      initial: "idle",
+      context: {
+        dir: "ltr",
+        activeId: null,
+        activeChannel: null,
+        activeOrientation: null,
+        value: "#D9D9D9",
+        ...ctx,
+        valueAsColor: parseColor(ctx.value || "#D9D9D9"),
+      },
+
+      computed: {
+        isRtl: (ctx) => ctx.dir === "rtl",
+        isInteractive: (ctx) => !(ctx.disabled || ctx.readOnly),
+      },
+
+      on: {
+        "VALUE.SET": {
+          actions: ["setValue"],
+        },
+      },
+
+      created: ["setValueAsColor"],
+
+      watch: {
+        value: ["setValueAsColor", "syncChannelInputs", "invokeOnChange"],
+      },
+
+      states: {
+        idle: {
+          on: {
+            "EYEDROPPER.CLICK": {
+              actions: ["openEyeDropper"],
+            },
+            "AREA.POINTER_DOWN": {
+              target: "dragging",
+              actions: ["setActiveChannel", "setAreaColorFromPoint", "focusAreaThumb"],
+            },
+            "CHANNEL_SLIDER.POINTER_DOWN": {
+              target: "dragging",
+              actions: ["setActiveChannel", "setChannelColorFromPoint", "focusChannelThumb"],
+            },
+            "CHANNEL_INPUT.FOCUS": {
+              target: "focused",
+              actions: ["setActiveChannel"],
+            },
+            "CHANNEL_INPUT.CHANGE": {
+              actions: ["setChannelColorFromInput"],
+            },
+          },
+        },
+
+        focused: {
+          on: {
+            "AREA.POINTER_DOWN": {
+              target: "dragging",
+              actions: ["setActiveChannel", "setAreaColorFromPoint", "focusAreaThumb"],
+            },
+            "CHANNEL_SLIDER.POINTER_DOWN": {
+              target: "dragging",
+              actions: ["setActiveChannel", "setChannelColorFromPoint", "focusChannelThumb"],
+            },
+            "AREA.ARROW_LEFT": {
+              actions: ["decrementXChannel"],
+            },
+            "AREA.ARROW_RIGHT": {
+              actions: ["incrementXChannel"],
+            },
+            "AREA.ARROW_UP": {
+              actions: ["incrementYChannel"],
+            },
+            "AREA.ARROW_DOWN": {
+              actions: ["decrementYChannel"],
+            },
+            "AREA.PAGE_UP": {
+              actions: ["incrementXChannel"],
+            },
+            "AREA.PAGE_DOWN": {
+              actions: ["decrementXChannel"],
+            },
+            "CHANNEL_SLIDER.ARROW_LEFT": {
+              actions: ["decrementChannel"],
+            },
+            "CHANNEL_SLIDER.ARROW_RIGHT": {
+              actions: ["incrementChannel"],
+            },
+            "CHANNEL_SLIDER.ARROW_UP": {
+              actions: ["incrementChannel"],
+            },
+            "CHANNEL_SLIDER.ARROW_DOWN": {
+              actions: ["decrementChannel"],
+            },
+            "CHANNEL_SLIDER.PAGE_UP": {
+              actions: ["incrementChannel"],
+            },
+            "CHANNEL_SLIDER.PAGE_DOWN": {
+              actions: ["decrementChannel"],
+            },
+            "CHANNEL_SLIDER.HOME": {
+              actions: ["setChannelToMin"],
+            },
+            "CHANNEL_SLIDER.END": {
+              actions: ["setChannelToMax"],
+            },
+            "CHANNEL_INPUT.FOCUS": {
+              actions: ["setActiveChannel"],
+            },
+            "CHANNEL_INPUT.CHANGE": {
+              actions: ["setChannelColorFromInput"],
+            },
+            "CHANNEL_INPUT.BLUR": [
+              {
+                guard: "isTextField",
+                target: "idle",
+                actions: ["setChannelColorFromInput"],
+              },
+              { target: "idle" },
+            ],
+            "CHANNEL_SLIDER.BLUR": {
+              target: "idle",
+            },
+            "AREA.BLUR": {
+              target: "idle",
+            },
+          },
+        },
+
+        dragging: {
+          exit: ["clearActiveChannel"],
+          activities: ["trackPointerMove", "disableTextSelection"],
+          on: {
+            "AREA.POINTER_MOVE": {
+              actions: ["setAreaColorFromPoint"],
+            },
+            "AREA.POINTER_UP": {
+              target: "focused",
+              actions: ["invokeOnChangeEnd"],
+            },
+            "CHANNEL_SLIDER.POINTER_MOVE": {
+              actions: ["setChannelColorFromPoint"],
+            },
+            "CHANNEL_SLIDER.POINTER_UP": {
+              target: "focused",
+              actions: ["invokeOnChangeEnd"],
+            },
+          },
+        },
+      },
+    },
+    {
+      guards: {
+        isTextField: (_ctx, evt) => !!evt.isTextField,
+      },
+      activities: {
+        trackPointerMove(ctx, _evt, { send }) {
+          return trackPointerMove(dom.getDoc(ctx), {
+            onPointerMove({ point }) {
+              const type = ctx.activeId === "area" ? "AREA.POINTER_MOVE" : "CHANNEL_SLIDER.POINTER_MOVE"
+              send({ type, point })
+            },
+            onPointerUp() {
+              const type = ctx.activeId === "area" ? "AREA.POINTER_UP" : "CHANNEL_SLIDER.POINTER_UP"
+              send({ type })
+            },
+          })
+        },
+        disableTextSelection(ctx) {
+          return disableTextSelection({ doc: dom.getDoc(ctx), target: dom.getContentEl(ctx) })
+        },
+      },
+      actions: {
+        openEyeDropper(ctx) {
+          const isSupported = "EyeDropper" in dom.getWin(ctx)
+          if (!isSupported) return
+          const win = dom.getWin(ctx) as any
+          const picker = new win.EyeDropper()
+          picker
+            .open()
+            .then(({ sRGBHex }: { sRGBHex: string }) => {
+              const format = ctx.valueAsColor.getColorSpace()
+              const color = parseColor(sRGBHex).toFormat(format)
+              setColor(ctx, color)
+              ctx.onChangeEnd?.({ value: ctx.value, valueAsColor: color })
+            })
+            .catch(() => void 0)
+        },
+        setActiveChannel(ctx, evt) {
+          ctx.activeId = evt.id
+          if (evt.channel) {
+            ctx.activeChannel = evt.channel
+          }
+          if (evt.orientation) {
+            ctx.activeOrientation = evt.orientation
+          }
+        },
+        clearActiveChannel(ctx) {
+          ctx.activeChannel = null
+          ctx.activeId = null
+          ctx.activeOrientation = null
+        },
+        setAreaColorFromPoint(ctx, evt) {
+          const { xChannel, yChannel } = evt.channel || ctx.activeChannel
+
+          const percent = dom.getAreaValueFromPoint(ctx, evt.point)
+          const { getColorFromPoint } = getChannelDetails(ctx.valueAsColor, xChannel, yChannel)
+          const color = getColorFromPoint(percent.x, percent.y)
+
+          if (!color) return
+          setColor(ctx, color)
+        },
+        setChannelColorFromPoint(ctx, evt) {
+          const channel = evt.channel || ctx.activeId
+          const percent = dom.getChannelSliderValueFromPoint(ctx, evt.point, channel)
+
+          const { minValue, maxValue, step } = ctx.valueAsColor.getChannelRange(channel)
+          const orientation = ctx.activeOrientation || "horizontal"
+
+          const point = orientation === "horizontal" ? percent.x : percent.y
+          const channelValue = getPercentValue(point, minValue, maxValue, step)
+
+          const value = snapValueToStep(channelValue - step, minValue, maxValue, step)
+          const newColor = ctx.valueAsColor.withChannelValue(channel, value)
+
+          setColor(ctx, newColor)
+        },
+        setValue(ctx, evt) {
+          setColor(ctx, evt.value)
+        },
+        setValueAsColor(ctx) {
+          try {
+            const color = parseColor(ctx.value)
+            if (color.isEqual(ctx.valueAsColor)) return
+            ctx.valueAsColor = color
+          } catch {}
+        },
+        syncChannelInputs(ctx) {
+          const inputs = dom.getChannelInputEls(ctx)
+          inputs.forEach((input) => {
+            const channel = input.getAttribute("data-channel") as ExtendedColorChannel | null
+            if (!channel) return
+            const value = getChannelInputValue(ctx.valueAsColor, channel)
+            input.value = value.toString()
+          })
+        },
+        setChannelColorFromInput(ctx, evt) {
+          const { channel, isTextField, value } = evt
+          try {
+            const format = ctx.valueAsColor.getColorSpace()
+
+            const newColor = isTextField
+              ? parseColor(value).toFormat(format)
+              : ctx.valueAsColor.withChannelValue(channel, value)
+
+            setColor(ctx, newColor)
+            //
+          } catch {
+            // reset input value
+            const input = dom.getChannelInputEl(ctx, channel)
+            if (!input) return
+            input.value = getChannelInputValue(ctx.valueAsColor, channel)
+          }
+        },
+
+        incrementChannel(ctx, evt) {
+          const { minValue, maxValue, step } = ctx.valueAsColor.getChannelRange(evt.channel)
+          const channelValue = ctx.valueAsColor.getChannelValue(evt.channel)
+          const value = snapValueToStep(channelValue + evt.step, minValue, maxValue, step)
+          const newColor = ctx.valueAsColor.withChannelValue(evt.channel, clampValue(value, minValue, maxValue))
+          setColor(ctx, newColor)
+        },
+        decrementChannel(ctx, evt) {
+          const { minValue, maxValue, step } = ctx.valueAsColor.getChannelRange(evt.channel)
+          const channelValue = ctx.valueAsColor.getChannelValue(evt.channel)
+          const value = snapValueToStep(channelValue - evt.step, minValue, maxValue, step)
+          const newColor = ctx.valueAsColor.withChannelValue(evt.channel, clampValue(value, minValue, maxValue))
+          setColor(ctx, newColor)
+        },
+
+        incrementXChannel(ctx, evt) {
+          const { xChannel, yChannel } = evt.channel
+          const { incrementX } = getChannelDetails(ctx.valueAsColor, xChannel, yChannel)
+          const newColor = ctx.valueAsColor.withChannelValue(xChannel, incrementX(evt.step))
+          setColor(ctx, newColor)
+        },
+        decrementXChannel(ctx, evt) {
+          const { xChannel, yChannel } = evt.channel
+          const { decrementX } = getChannelDetails(ctx.valueAsColor, xChannel, yChannel)
+          const newColor = ctx.valueAsColor.withChannelValue(xChannel, decrementX(evt.step))
+          setColor(ctx, newColor)
+        },
+
+        incrementYChannel(ctx, evt) {
+          const { xChannel, yChannel } = evt.channel
+          const { incrementY } = getChannelDetails(ctx.valueAsColor, xChannel, yChannel)
+          const newColor = ctx.valueAsColor.withChannelValue(yChannel, incrementY(evt.step))
+          setColor(ctx, newColor)
+        },
+        decrementYChannel(ctx, evt) {
+          const { xChannel, yChannel } = evt.channel
+          const { decrementY } = getChannelDetails(ctx.valueAsColor, xChannel, yChannel)
+          const newColor = ctx.valueAsColor.withChannelValue(yChannel, decrementY(evt.step))
+          setColor(ctx, newColor)
+        },
+
+        setChannelToMax(ctx, evt) {
+          const { maxValue } = ctx.valueAsColor.getChannelRange(evt.channel)
+          const newColor = ctx.valueAsColor.withChannelValue(evt.channel, maxValue)
+          setColor(ctx, newColor)
+        },
+        setChannelToMin(ctx, evt) {
+          const { minValue } = ctx.valueAsColor.getChannelRange(evt.channel)
+          const newColor = ctx.valueAsColor.withChannelValue(evt.channel, minValue)
+          setColor(ctx, newColor)
+        },
+
+        invokeOnChangeEnd(ctx) {
+          ctx.onChangeEnd?.({ value: ctx.value, valueAsColor: ctx.valueAsColor })
+        },
+        invokeOnChange(ctx) {
+          ctx.onChange?.({ value: ctx.value, valueAsColor: ctx.valueAsColor })
+        },
+        focusAreaThumb(ctx) {
+          raf(() => {
+            dom.getAreaThumbEl(ctx)?.focus({ preventScroll: true })
+          })
+        },
+        focusChannelThumb(ctx, evt) {
+          raf(() => {
+            dom.getChannelSliderThumbEl(ctx, evt.channel)?.focus({ preventScroll: true })
+          })
+        },
+      },
+    },
+  )
+}
+
+const setColor = (ctx: MachineContext, color: Color) => {
+  ctx.value = color.toString("css")
+  ctx.valueAsColor = color
+}

package/src/color-picker.types.ts

@@ -0,0 +1,113 @@
+import { Color, ColorAxes, ColorChannel } from "@zag-js/color-utils"
+import type { StateMachine as S } from "@zag-js/core"
+import type { CommonProperties, Context, Orientation, RequiredBy } from "@zag-js/types"
+
+export type ColorChannelProps = {
+  channel: ColorChannel
+  orientation?: Orientation
+}
+
+export type ExtendedColorChannel = ColorChannel | "hex" | "css"
+
+export type ColorChannelInputProps = {
+  channel: ExtendedColorChannel
+  orientation?: Orientation
+}
+
+export type ColorAreaProps = {
+  xChannel: ColorChannel
+  yChannel: ColorChannel
+}
+
+export type ColorSwatchProps = {
+  readOnly?: boolean
+  value: string | Color
+}
+
+type ChangeDetails = {
+  value: string
+  valueAsColor: Color
+}
+
+type ElementIds = Partial<{
+  content: string
+  area: string
+  areaGradient: string
+  areaThumb: string
+  channelInput(id: string): string
+  channelSliderTrack(id: ColorChannel): string
+  channelSliderThumb(id: ColorChannel): string
+}>
+
+type PublicContext = CommonProperties & {
+  /**
+   * The ids of the elements in the color picker. Useful for composition.
+   */
+  ids?: ElementIds
+  /**
+   * The direction of the color picker
+   */
+  dir: "ltr" | "rtl"
+  /**
+   * The current color value
+   */
+  value: string
+  /**
+   * Whether the color picker is disabled
+   */
+  disabled?: boolean
+  /**
+   * Whether the color picker is read-only
+   */
+  readOnly?: boolean
+  /**
+   * Handler that is called when the value changes, as the user drags.
+   */
+  onChange?: (details: ChangeDetails) => void
+  /**
+   * Handler that is called when the user stops dragging.
+   */
+  onChangeEnd?: (details: ChangeDetails) => void
+}
+
+type PrivateContext = Context<{
+  /**
+   * The id of the thumb that is currently being dragged
+   */
+  activeId: string | null
+  /**
+   * The color value as a Color object
+   */
+  valueAsColor: Color
+  /**
+   * The channel that is currently being interacted with
+   */
+  activeChannel: Partial<ColorAxes> | null
+  /**
+   * The orientation of the channel that is currently being interacted with
+   */
+  activeOrientation: Orientation | null
+}>
+
+type ComputedContext = Readonly<{
+  /**
+   * Whether the color picker is in RTL mode
+   */
+  isRtl: boolean
+  /**
+   * Whether the color picker is interactive
+   */
+  isInteractive: boolean
+}>
+
+export type UserDefinedContext = RequiredBy<PublicContext, "id">
+
+export type MachineContext = PublicContext & PrivateContext & ComputedContext
+
+export type MachineState = {
+  value: "idle" | "focused" | "dragging"
+}
+
+export type State = S.State<MachineContext, MachineState>
+
+export type Send = S.Send<S.AnyEventObject>

package/src/index.ts

@@ -0,0 +1,9 @@
+export { anatomy } from "./color-picker.anatomy"
+export { connect } from "./color-picker.connect"
+export { machine } from "./color-picker.machine"
+export type {
+  ColorAreaProps,
+  ColorChannelProps,
+  ColorSwatchProps,
+  UserDefinedContext as Context,
+} from "./color-picker.types"

package/src/utils/generate-format-background.ts

@@ -0,0 +1,139 @@
+export const generateRGB_R = (orientation: [string, string], dir: boolean, zValue: number) => {
+  const maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`
+  const result = {
+    areaStyles: {
+      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(${zValue},0,0),rgb(${zValue},255,0))`,
+    },
+    areaGradientStyles: {
+      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(${zValue},0,255),rgb(${zValue},255,255))`,
+      WebkitMaskImage: maskImage,
+      maskImage,
+    },
+  }
+  return result
+}
+
+export const generateRGB_G = (orientation: [string, string], dir: boolean, zValue: number) => {
+  const maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`
+  const result = {
+    areaStyles: {
+      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,${zValue},0),rgb(255,${zValue},0))`,
+    },
+    areaGradientStyles: {
+      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,${zValue},255),rgb(255,${zValue},255))`,
+      WebkitMaskImage: maskImage,
+      maskImage,
+    },
+  }
+  return result
+}
+
+export const generateRGB_B = (orientation: [string, string], dir: boolean, zValue: number) => {
+  const maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`
+  const result = {
+    areaStyles: {
+      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,0,${zValue}),rgb(255,0,${zValue}))`,
+    },
+    areaGradientStyles: {
+      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,255,${zValue}),rgb(255,255,${zValue}))`,
+      WebkitMaskImage: maskImage,
+      maskImage,
+    },
+  }
+  return result
+}
+
+export const generateHSL_H = (orientation: [string, string], dir: boolean, zValue: number) => {
+  const result = {
+    areaStyles: {},
+    areaGradientStyles: {
+      background: [
+        `linear-gradient(to ${
+          orientation[Number(dir)]
+        }, hsla(0,0%,0%,1) 0%, hsla(0,0%,0%,0) 50%, hsla(0,0%,100%,0) 50%, hsla(0,0%,100%,1) 100%)`,
+        `linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,50%),hsla(0,0%,50%,0))`,
+        `hsl(${zValue}, 100%, 50%)`,
+      ].join(","),
+    },
+  }
+  return result
+}
+
+export const generateHSL_S = (orientation: [string, string], dir: boolean, alphaValue: number) => {
+  const result = {
+    areaStyles: {},
+    areaGradientStyles: {
+      background: [
+        `linear-gradient(to ${
+          orientation[Number(!dir)]
+        }, hsla(0,0%,0%,${alphaValue}) 0%, hsla(0,0%,0%,0) 50%, hsla(0,0%,100%,0) 50%, hsla(0,0%,100%,${alphaValue}) 100%)`,
+        `linear-gradient(to ${
+          orientation[Number(dir)]
+        },hsla(0,100%,50%,${alphaValue}),hsla(60,100%,50%,${alphaValue}),hsla(120,100%,50%,${alphaValue}),hsla(180,100%,50%,${alphaValue}),hsla(240,100%,50%,${alphaValue}),hsla(300,100%,50%,${alphaValue}),hsla(359,100%,50%,${alphaValue}))`,
+        "hsl(0, 0%, 50%)",
+      ].join(","),
+    },
+  }
+  return result
+}
+
+export const generateHSL_L = (orientation: [string, string], dir: boolean, zValue: number) => {
+  const result = {
+    areaStyles: {},
+    areaGradientStyles: {
+      backgroundImage: [
+        `linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,${zValue}%),hsla(0,0%,${zValue}%,0))`,
+        `linear-gradient(to ${
+          orientation[Number(dir)]
+        },hsl(0,100%,${zValue}%),hsl(60,100%,${zValue}%),hsl(120,100%,${zValue}%),hsl(180,100%,${zValue}%),hsl(240,100%,${zValue}%),hsl(300,100%,${zValue}%),hsl(360,100%,${zValue}%))`,
+      ].join(","),
+    },
+  }
+  return result
+}
+
+export const generateHSB_H = (orientation: [string, string], dir: boolean, zValue: number) => {
+  const result = {
+    areaStyles: {},
+    areaGradientStyles: {
+      background: [
+        `linear-gradient(to ${orientation[Number(dir)]},hsl(0,0%,0%),hsla(0,0%,0%,0))`,
+        `linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,100%),hsla(0,0%,100%,0))`,
+        `hsl(${zValue}, 100%, 50%)`,
+      ].join(","),
+    },
+  }
+  return result
+}
+
+export const generateHSB_S = (orientation: [string, string], dir: boolean, alphaValue: number) => {
+  const result = {
+    areaStyles: {},
+    areaGradientStyles: {
+      background: [
+        `linear-gradient(to ${orientation[Number(!dir)]},hsla(0,0%,0%,${alphaValue}),hsla(0,0%,0%,0))`,
+        `linear-gradient(to ${
+          orientation[Number(dir)]
+        },hsla(0,100%,50%,${alphaValue}),hsla(60,100%,50%,${alphaValue}),hsla(120,100%,50%,${alphaValue}),hsla(180,100%,50%,${alphaValue}),hsla(240,100%,50%,${alphaValue}),hsla(300,100%,50%,${alphaValue}),hsla(359,100%,50%,${alphaValue}))`,
+        `linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,0%),hsl(0,0%,100%))`,
+      ].join(","),
+    },
+  }
+  return result
+}
+
+export const generateHSB_B = (orientation: [string, string], dir: boolean, alphaValue: number) => {
+  const result = {
+    areaStyles: {},
+    areaGradientStyles: {
+      background: [
+        `linear-gradient(to ${orientation[Number(!dir)]},hsla(0,0%,100%,${alphaValue}),hsla(0,0%,100%,0))`,
+        `linear-gradient(to ${
+          orientation[Number(dir)]
+        },hsla(0,100%,50%,${alphaValue}),hsla(60,100%,50%,${alphaValue}),hsla(120,100%,50%,${alphaValue}),hsla(180,100%,50%,${alphaValue}),hsla(240,100%,50%,${alphaValue}),hsla(300,100%,50%,${alphaValue}),hsla(359,100%,50%,${alphaValue}))`,
+        "#000",
+      ].join(","),
+    },
+  }
+  return result
+}

package/src/utils/get-channel-details.ts

@@ -0,0 +1,60 @@
+import { Color, ColorChannel } from "@zag-js/color-utils"
+import { snapValueToStep, getPercentValue } from "@zag-js/numeric-range"
+
+export function getChannelDetails(color: Color, xChannel: ColorChannel, yChannel: ColorChannel) {
+  const channels = color.getColorSpaceAxes({ xChannel, yChannel })
+
+  const xChannelRange = color.getChannelRange(channels.xChannel)
+  const yChannelRange = color.getChannelRange(channels.yChannel)
+
+  const { minValue: minValueX, maxValue: maxValueX, step: stepX, pageSize: pageSizeX } = xChannelRange
+  const { minValue: minValueY, maxValue: maxValueY, step: stepY, pageSize: pageSizeY } = yChannelRange
+
+  const xValue = color.getChannelValue(channels.xChannel)
+  const yValue = color.getChannelValue(channels.yChannel)
+
+  return {
+    channels,
+    xChannelStep: stepX,
+    yChannelStep: stepY,
+    xChannelPageStep: pageSizeX,
+    yChannelPageStep: pageSizeY,
+    xValue,
+    yValue,
+    getThumbPosition() {
+      let x = (xValue - minValueX) / (maxValueX - minValueX)
+      let y = 1 - (yValue - minValueY) / (maxValueY - minValueY)
+      return { x, y }
+    },
+    incrementX(stepSize: number) {
+      return xValue + stepSize > maxValueX ? maxValueX : snapValueToStep(xValue + stepSize, minValueX, maxValueX, stepX)
+    },
+    incrementY(stepSize: number) {
+      return yValue + stepSize > maxValueY ? maxValueY : snapValueToStep(yValue + stepSize, minValueY, maxValueY, stepY)
+    },
+    decrementX(stepSize: number) {
+      return snapValueToStep(xValue - stepSize, minValueX, maxValueX, stepX)
+    },
+    decrementY(stepSize: number) {
+      return snapValueToStep(yValue - stepSize, minValueY, maxValueY, stepY)
+    },
+    getColorFromPoint(x: number, y: number) {
+      let newXValue = getPercentValue(x, minValueX, maxValueX, stepX)
+      let newYValue = getPercentValue(1 - y, minValueY, maxValueY, stepY)
+
+      let newColor: Color | undefined
+
+      if (newXValue !== xValue) {
+        newXValue = snapValueToStep(newXValue, minValueX, maxValueX, stepX)
+        newColor = color.withChannelValue(channels.xChannel, newXValue)
+      }
+
+      if (newYValue !== yValue) {
+        newYValue = snapValueToStep(newYValue, minValueY, maxValueY, stepY)
+        newColor = (newColor || color).withChannelValue(channels.yChannel, newYValue)
+      }
+
+      return newColor
+    },
+  }
+}

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

@@ -0,0 +1,20 @@
+import { Color, ColorChannel, parseColor } 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)
+  }
+}