@zag-js/color-picker 0.11.1 → 0.11.2

package/dist/index.d.mts

@@ -1,7 +1,7 @@
 import * as _zag_js_anatomy from '@zag-js/anatomy';
-import { ColorChannel, Color, ColorAxes, ColorFormat } from '@zag-js/color-utils';
-export { Color, ColorChannel } from '@zag-js/color-utils';
-import { Orientation, RequiredBy, CommonProperties, Context, PropTypes, NormalizeProps } from '@zag-js/types';
+import { Orientation, PropTypes, RequiredBy, CommonProperties, Context, NormalizeProps } from '@zag-js/types';
+import { ColorChannel, Color, ColorFormat, ColorAxes } from '@zag-js/color-utils';
+export { Color, ColorAxes, ColorChannel, ColorFormat, ColorType } from '@zag-js/color-utils';
 import * as _zag_js_core from '@zag-js/core';
 import { StateMachine } from '@zag-js/core';
 
@@ -67,43 +67,7 @@ type PublicContext = CommonProperties & {
      */
     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;
-}>;
-type UserDefinedContext = RequiredBy<PublicContext, "id">;
-type MachineContext = PublicContext & PrivateContext & ComputedContext;
-type MachineState = {
-    value: "idle" | "focused" | "dragging";
-};
-type State = StateMachine.State<MachineContext, MachineState>;
-type Send = StateMachine.Send<StateMachine.AnyEventObject>;
-
-declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): {
+type PublicApi<T extends PropTypes = PropTypes> = {
     /**
      * Whether the color picker is being dragged
      */
@@ -144,7 +108,44 @@ declare function connect<T extends PropTypes>(state: State, send: Send, normaliz
     getSwatchBackgroundProps(props: ColorSwatchProps): T["element"];
     getSwatchProps(props: ColorSwatchProps): T["element"];
 };
+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;
+}>;
+type UserDefinedContext = RequiredBy<PublicContext, "id">;
+type MachineContext = PublicContext & PrivateContext & ComputedContext;
+type MachineState = {
+    value: "idle" | "focused" | "dragging";
+};
+type State = StateMachine.State<MachineContext, MachineState>;
+type Send = StateMachine.Send<StateMachine.AnyEventObject>;
+
+declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): PublicApi<T>;
 
 declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
 
-export { ColorAreaProps, ColorChannelInputProps, ColorChannelProps, ColorSwatchProps, UserDefinedContext as Context, anatomy, connect, machine };
+export { ColorAreaProps, ColorChannelInputProps, ColorChannelProps, ColorSwatchProps, UserDefinedContext as Context, PublicApi, anatomy, connect, machine };

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as _zag_js_anatomy from '@zag-js/anatomy';
-import { ColorChannel, Color, ColorAxes, ColorFormat } from '@zag-js/color-utils';
-export { Color, ColorChannel } from '@zag-js/color-utils';
-import { Orientation, RequiredBy, CommonProperties, Context, PropTypes, NormalizeProps } from '@zag-js/types';
+import { Orientation, PropTypes, RequiredBy, CommonProperties, Context, NormalizeProps } from '@zag-js/types';
+import { ColorChannel, Color, ColorFormat, ColorAxes } from '@zag-js/color-utils';
+export { Color, ColorAxes, ColorChannel, ColorFormat, ColorType } from '@zag-js/color-utils';
 import * as _zag_js_core from '@zag-js/core';
 import { StateMachine } from '@zag-js/core';
 
@@ -67,43 +67,7 @@ type PublicContext = CommonProperties & {
      */
     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;
-}>;
-type UserDefinedContext = RequiredBy<PublicContext, "id">;
-type MachineContext = PublicContext & PrivateContext & ComputedContext;
-type MachineState = {
-    value: "idle" | "focused" | "dragging";
-};
-type State = StateMachine.State<MachineContext, MachineState>;
-type Send = StateMachine.Send<StateMachine.AnyEventObject>;
-
-declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): {
+type PublicApi<T extends PropTypes = PropTypes> = {
     /**
      * Whether the color picker is being dragged
      */
@@ -144,7 +108,44 @@ declare function connect<T extends PropTypes>(state: State, send: Send, normaliz
     getSwatchBackgroundProps(props: ColorSwatchProps): T["element"];
     getSwatchProps(props: ColorSwatchProps): T["element"];
 };
+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;
+}>;
+type UserDefinedContext = RequiredBy<PublicContext, "id">;
+type MachineContext = PublicContext & PrivateContext & ComputedContext;
+type MachineState = {
+    value: "idle" | "focused" | "dragging";
+};
+type State = StateMachine.State<MachineContext, MachineState>;
+type Send = StateMachine.Send<StateMachine.AnyEventObject>;
+
+declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): PublicApi<T>;
 
 declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
 
-export { ColorAreaProps, ColorChannelInputProps, ColorChannelProps, ColorSwatchProps, UserDefinedContext as Context, anatomy, connect, machine };
+export { ColorAreaProps, ColorChannelInputProps, ColorChannelProps, ColorSwatchProps, UserDefinedContext as Context, PublicApi, anatomy, connect, machine };

package/dist/index.js

@@ -402,38 +402,17 @@ function connect(state, send, normalize) {
   const isDragging = state.matches("dragging");
   const channels = valueAsColor.getColorChannels();
   return {
-    /**
-     * Whether the color picker is being dragged
-     */
     isDragging,
-    /**
-     * The current color value (as a string)
-     */
     value: state.context.value,
-    /**
-     * The current color value (as a Color object)
-     */
     valueAsColor,
-    /**
-     * The current color channels of the color
-     */
     channels,
-    /**
-     * Function to set the color value
-     */
     setColor(value) {
       send({ type: "VALUE.SET", value: (0, import_color_utils2.normalizeColor)(value), src: "set-color" });
     },
-    /**
-     * Function to set the color value of a specific channel
-     */
     setChannelValue(channel, value) {
       const color = valueAsColor.withChannelValue(channel, value);
       send({ type: "VALUE.SET", value: color, src: "set-channel" });
     },
-    /**
-     * Function to set the color format
-     */
     setFormat(format) {
       const value = valueAsColor.toFormat(format);
       send({ type: "VALUE.SET", value, src: "set-format" });

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/color-picker.anatomy.ts","../src/color-picker.connect.ts","../src/color-picker.dom.ts","../src/utils/get-channel-details.ts","../src/utils/get-channel-display-color.ts","../src/utils/get-channel-input-value.ts","../src/utils/generate-format-background.ts","../src/utils/get-color-area-gradient.ts","../src/utils/get-slider-background.ts","../src/color-picker.machine.ts"],"sourcesContent":["export { anatomy } from \"./color-picker.anatomy\"\nexport { connect } from \"./color-picker.connect\"\nexport { machine } from \"./color-picker.machine\"\nexport type {\n  Color,\n  ColorAreaProps,\n  ColorChannel,\n  ColorChannelProps,\n  ColorChannelInputProps,\n  ColorSwatchProps,\n  UserDefinedContext as Context,\n} from \"./color-picker.types\"\n","import { createAnatomy } from \"@zag-js/anatomy\"\n\nexport const anatomy = createAnatomy(\"color-picker\", [\n  \"area\",\n  \"areaThumb\",\n  \"areaGradient\",\n  \"channelSliderTrack\",\n  \"channelSliderTrackBg\",\n  \"channelSliderThumb\",\n  \"channelInput\",\n  \"swatch\",\n  \"swatchBg\",\n  \"content\",\n  \"label\",\n  \"eyeDropTrigger\",\n])\n\nexport const parts = anatomy.build()\n","import { Color, normalizeColor, type ColorChannel, type ColorFormat } from \"@zag-js/color-utils\"\nimport {\n  EventKeyMap,\n  getEventKey,\n  getEventPoint,\n  getEventStep,\n  getNativeEvent,\n  isLeftClick,\n  isModifiedEvent,\n} from \"@zag-js/dom-event\"\nimport { dataAttr } from \"@zag-js/dom-query\"\nimport { NormalizeProps, type PropTypes } from \"@zag-js/types\"\nimport { parts } from \"./color-picker.anatomy\"\nimport { dom } from \"./color-picker.dom\"\nimport {\n  ColorAreaProps,\n  ColorChannelInputProps,\n  ColorChannelProps,\n  ColorSwatchProps,\n  Send,\n  State,\n} from \"./color-picker.types\"\nimport { getChannelDetails } from \"./utils/get-channel-details\"\nimport { getChannelDisplayColor } from \"./utils/get-channel-display-color\"\nimport { getChannelInputRange, getChannelInputValue } from \"./utils/get-channel-input-value\"\nimport { getColorAreaGradient } from \"./utils/get-color-area-gradient\"\nimport { getSliderBgImage } from \"./utils/get-slider-background\"\n\nexport function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>) {\n  const valueAsColor = state.context.valueAsColor\n  const isDisabled = state.context.disabled\n  const isInteractive = state.context.isInteractive\n  const isDragging = state.matches(\"dragging\")\n\n  const channels = valueAsColor.getColorChannels()\n\n  return {\n    /**\n     * Whether the color picker is being dragged\n     */\n    isDragging,\n    /**\n     * The current color value (as a string)\n     */\n    value: state.context.value,\n    /**\n     * The current color value (as a Color object)\n     */\n    valueAsColor,\n    /**\n     * The current color channels of the color\n     */\n    channels,\n    /**\n     * Function to set the color value\n     */\n    setColor(value: string | Color) {\n      send({ type: \"VALUE.SET\", value: normalizeColor(value), src: \"set-color\" })\n    },\n    /**\n     * Function to set the color value of a specific channel\n     */\n    setChannelValue(channel: ColorChannel, value: number) {\n      const color = valueAsColor.withChannelValue(channel, value)\n      send({ type: \"VALUE.SET\", value: color, src: \"set-channel\" })\n    },\n    /**\n     * Function to set the color format\n     */\n    setFormat(format: ColorFormat) {\n      const value = valueAsColor.toFormat(format)\n      send({ type: \"VALUE.SET\", value, src: \"set-format\" })\n    },\n\n    contentProps: normalize.element({\n      ...parts.content.attrs,\n      id: dom.getContentId(state.context),\n    }),\n\n    getAreaProps(props: ColorAreaProps) {\n      const { xChannel, yChannel } = props\n      const { areaStyles } = getColorAreaGradient(state.context, xChannel, yChannel)\n\n      return normalize.element({\n        ...parts.area.attrs,\n        id: dom.getAreaId(state.context),\n        role: \"group\",\n        onPointerDown(event) {\n          if (!isInteractive) return\n\n          const evt = getNativeEvent(event)\n          if (!isLeftClick(evt) || isModifiedEvent(evt)) return\n\n          const point = getEventPoint(evt)\n          const channel = { xChannel, yChannel }\n\n          send({ type: \"AREA.POINTER_DOWN\", point, channel, id: \"area\" })\n        },\n        style: {\n          position: \"relative\",\n          touchAction: \"none\",\n          forcedColorAdjust: \"none\",\n          ...areaStyles,\n        },\n      })\n    },\n\n    getAreaGradientProps(props: ColorAreaProps) {\n      const { xChannel, yChannel } = props\n      const { areaGradientStyles } = getColorAreaGradient(state.context, xChannel, yChannel)\n\n      return normalize.element({\n        ...parts.areaGradient.attrs,\n        id: dom.getAreaGradientId(state.context),\n        style: {\n          position: \"relative\",\n          touchAction: \"none\",\n          forcedColorAdjust: \"none\",\n          ...areaGradientStyles,\n        },\n      })\n    },\n\n    getAreaThumbProps(props: ColorAreaProps) {\n      const { xChannel, yChannel } = props\n      const { getThumbPosition } = getChannelDetails(valueAsColor, xChannel, yChannel)\n      const { x, y } = getThumbPosition()\n\n      const channel = { xChannel, yChannel }\n\n      return normalize.element({\n        ...parts.areaThumb.attrs,\n        id: dom.getAreaThumbId(state.context),\n        tabIndex: isDisabled ? undefined : 0,\n        \"data-disabled\": dataAttr(isDisabled),\n        role: \"presentation\",\n        style: {\n          position: \"absolute\",\n          left: `${x * 100}%`,\n          top: `${y * 100}%`,\n          transform: \"translate(-50%, -50%)\",\n          touchAction: \"none\",\n          forcedColorAdjust: \"none\",\n          background: valueAsColor.withChannelValue(\"alpha\", 1).toString(\"css\"),\n        },\n        onBlur() {\n          send(\"AREA.BLUR\")\n        },\n        onKeyDown(event) {\n          if (!isInteractive) return\n\n          const step = getEventStep(event)\n\n          const keyMap: EventKeyMap = {\n            ArrowUp() {\n              send({ type: \"AREA.ARROW_UP\", channel, step })\n            },\n            ArrowDown() {\n              send({ type: \"AREA.ARROW_DOWN\", channel, step })\n            },\n            ArrowLeft() {\n              send({ type: \"AREA.ARROW_LEFT\", channel, step })\n            },\n            ArrowRight() {\n              send({ type: \"AREA.ARROW_RIGHT\", channel, step })\n            },\n            PageUp() {\n              send({ type: \"AREA.PAGE_UP\", channel, step })\n            },\n            PageDown() {\n              send({ type: \"AREA.PAGE_DOWN\", channel, step })\n            },\n          }\n\n          const exec = keyMap[getEventKey(event, state.context)]\n\n          if (exec) {\n            exec(event)\n            event.preventDefault()\n          }\n        },\n      })\n    },\n\n    getChannelSliderTrackProps(props: ColorChannelProps) {\n      const { orientation = \"horizontal\", channel } = props\n\n      return normalize.element({\n        ...parts.channelSliderTrack.attrs,\n        id: dom.getChannelSliderTrackId(state.context, channel),\n        role: \"group\",\n        \"data-channel\": channel,\n        \"data-orientation\": orientation,\n        onPointerDown(event) {\n          if (!isInteractive) return\n\n          const evt = getNativeEvent(event)\n          if (!isLeftClick(evt) || isModifiedEvent(evt)) return\n\n          const point = getEventPoint(evt)\n          send({ type: \"CHANNEL_SLIDER.POINTER_DOWN\", channel, point, id: channel, orientation })\n        },\n        style: {\n          position: \"relative\",\n          touchAction: \"none\",\n          forcedColorAdjust: \"none\",\n          backgroundImage: getSliderBgImage(state.context, { orientation, channel }),\n        },\n      })\n    },\n\n    getChannelSliderBackgroundProps(props: ColorChannelProps) {\n      const { orientation = \"horizontal\", channel } = props\n      return normalize.element({\n        ...parts.channelSliderTrackBg.attrs,\n        \"data-orientation\": orientation,\n        \"data-channel\": channel,\n        style: {\n          position: \"absolute\",\n          backgroundColor: \"#fff\",\n          backgroundImage: [\n            \"linear-gradient(-45deg,#0000 75.5%,#bcbcbc 75.5%)\",\n            \"linear-gradient(45deg,#0000 75.5%,#bcbcbc 75.5%)\",\n            \"linear-gradient(-45deg,#bcbcbc 25.5%,#0000 25.5%)\",\n            \"linear-gradient(45deg,#bcbcbc 25.5%,#0000 25.5%)\",\n          ].join(\",\"),\n          backgroundSize: \"16px 16px\",\n          backgroundPosition: \"-2px -2px,-2px 6px,6px -10px,-10px -2px\",\n          inset: 0,\n          zIndex: -1,\n        },\n      })\n    },\n\n    getChannelSliderThumbProps(props: ColorChannelProps) {\n      const { orientation = \"horizontal\", channel } = props\n      const { minValue, maxValue, step: stepValue } = valueAsColor.getChannelRange(channel)\n      const channelValue = valueAsColor.getChannelValue(channel)\n\n      const offset = (channelValue - minValue) / (maxValue - minValue)\n\n      const placementStyles =\n        orientation === \"horizontal\"\n          ? { left: `${offset * 100}%`, top: \"50%\" }\n          : { top: `${offset * 100}%`, left: \"50%\" }\n\n      return normalize.element({\n        ...parts.channelSliderThumb.attrs,\n        id: dom.getChannelSliderThumbId(state.context, channel),\n        role: \"slider\",\n        \"aria-label\": channel,\n        tabIndex: isDisabled ? undefined : 0,\n        \"data-channel\": channel,\n        \"data-disabled\": dataAttr(isDisabled),\n        \"data-orientation\": orientation,\n        \"aria-disabled\": dataAttr(isDisabled),\n        \"aria-orientation\": orientation,\n        \"aria-valuemax\": maxValue,\n        \"aria-valuemin\": minValue,\n        \"aria-valuenow\": channelValue,\n        style: {\n          forcedColorAdjust: \"none\",\n          position: \"absolute\",\n          background: getChannelDisplayColor(valueAsColor, channel).toString(\"css\"),\n          ...placementStyles,\n        },\n        onFocus() {\n          if (!isInteractive) return\n          send({ type: \"CHANNEL_SLIDER.FOCUS\", channel })\n        },\n        onBlur() {\n          if (!isInteractive) return\n          send({ type: \"CHANNEL_SLIDER.BLUR\", channel })\n        },\n        onKeyDown(event) {\n          if (!isInteractive) return\n          const step = getEventStep(event) * stepValue\n\n          const keyMap: EventKeyMap = {\n            ArrowUp() {\n              send({ type: \"CHANNEL_SLIDER.ARROW_UP\", channel, step })\n            },\n            ArrowDown() {\n              send({ type: \"CHANNEL_SLIDER.ARROW_DOWN\", channel, step })\n            },\n            ArrowLeft() {\n              send({ type: \"CHANNEL_SLIDER.ARROW_LEFT\", channel, step })\n            },\n            ArrowRight() {\n              send({ type: \"CHANNEL_SLIDER.ARROW_RIGHT\", channel, step })\n            },\n            PageUp() {\n              send({ type: \"CHANNEL_SLIDER.PAGE_UP\", channel })\n            },\n            PageDown() {\n              send({ type: \"CHANNEL_SLIDER.PAGE_DOWN\", channel })\n            },\n            Home() {\n              send({ type: \"CHANNEL_SLIDER.HOME\", channel })\n            },\n            End() {\n              send({ type: \"CHANNEL_SLIDER.END\", channel })\n            },\n          }\n\n          const exec = keyMap[getEventKey(event, state.context)]\n\n          if (exec) {\n            exec(event)\n            event.preventDefault()\n          }\n        },\n      })\n    },\n\n    getChannelInputProps(props: ColorChannelInputProps) {\n      const { channel } = props\n      const isTextField = channel === \"hex\" || channel === \"css\"\n      const range = getChannelInputRange(valueAsColor, channel)\n\n      return normalize.input({\n        ...parts.channelInput.attrs,\n        type: isTextField ? \"text\" : \"number\",\n        \"data-channel\": channel,\n        \"aria-label\": channel,\n        disabled: isDisabled,\n        \"data-disabled\": dataAttr(isDisabled),\n        readOnly: state.context.readOnly,\n        id: dom.getChannelInputId(state.context, channel),\n        defaultValue: getChannelInputValue(valueAsColor, channel),\n        min: range?.minValue,\n        max: range?.maxValue,\n        step: range?.step,\n        onFocus() {\n          send({ type: \"CHANNEL_INPUT.FOCUS\", channel })\n        },\n        onChange(event) {\n          if (isTextField) return\n          const value = event.currentTarget.value\n          send({ type: \"CHANNEL_INPUT.CHANGE\", channel, value, isTextField })\n        },\n        onBlur(event) {\n          const value = event.currentTarget.value\n          send({ type: \"CHANNEL_INPUT.BLUR\", channel, value, isTextField })\n        },\n        onKeyDown(event) {\n          if (!isTextField) return\n          if (event.key === \"Enter\") {\n            const value = event.currentTarget.value\n            send({ type: \"CHANNEL_INPUT.CHANGE\", channel, value, isTextField })\n          }\n        },\n        style: {\n          appearance: \"none\",\n          WebkitAppearance: \"none\",\n          MozAppearance: \"textfield\",\n        },\n      })\n    },\n\n    eyeDropperTriggerProps: normalize.button({\n      ...parts.eyeDropTrigger.attrs,\n      onClick() {\n        send(\"EYEDROPPER.CLICK\")\n      },\n    }),\n\n    getSwatchBackgroundProps(props: ColorSwatchProps) {\n      const { value } = props\n      const alpha = normalizeColor(value).getChannelValue(\"alpha\")\n      return normalize.element({\n        ...parts.swatchBg.attrs,\n        \"data-alpha\": alpha,\n        style: {\n          width: \"100%\",\n          height: \"100%\",\n          background: \"#fff\",\n          backgroundImage: [\n            \"linear-gradient(-45deg,#0000 75.5%,#bcbcbc 75.5%)\",\n            \"linear-gradient(45deg,#0000 75.5%,#bcbcbc 75.5%)\",\n            \"linear-gradient(-45deg,#bcbcbc 25.5%,#0000 25.5%)\",\n            \"linear-gradient(45deg,#bcbcbc 25.5%,#0000 25.5%)\",\n          ].join(\",\"),\n          backgroundPosition: \"-2px -2px,-2px 6px,6px -10px,-10px -2px\",\n          backgroundSize: \"16px 16px\",\n          position: \"absolute\",\n          inset: \"0px\",\n          zIndex: -1,\n        },\n      })\n    },\n\n    getSwatchProps(props: ColorSwatchProps) {\n      const { value, readOnly } = props\n      const color = normalizeColor(value).toFormat(valueAsColor.getColorSpace())\n      return normalize.element({\n        ...parts.swatch.attrs,\n        onClick() {\n          if (readOnly) return\n          send({ type: \"VALUE.SET\", value: color })\n        },\n        style: {\n          position: \"relative\",\n          background: color.toString(\"css\"),\n        },\n      })\n    },\n  }\n}\n","import { type ColorChannel } from \"@zag-js/color-utils\"\nimport { getRelativePoint, type Point } from \"@zag-js/dom-event\"\nimport { createScope, queryAll } from \"@zag-js/dom-query\"\nimport type { MachineContext as Ctx } from \"./color-picker.types\"\n\nexport const dom = createScope({\n  getContentId: (ctx: Ctx) => ctx.ids?.content ?? `color-picker:${ctx.id}:content`,\n  getAreaId: (ctx: Ctx) => ctx.ids?.area ?? `color-picker:${ctx.id}:area`,\n  getAreaGradientId: (ctx: Ctx) => ctx.ids?.areaGradient ?? `color-picker:${ctx.id}:area-gradient`,\n  getAreaThumbId: (ctx: Ctx) => ctx.ids?.areaThumb ?? `color-picker:${ctx.id}:area-thumb`,\n  getChannelSliderTrackId: (ctx: Ctx, channel: ColorChannel) =>\n    ctx.ids?.channelSliderTrack?.(channel) ?? `color-picker:${ctx.id}:slider-track:${channel}`,\n  getChannelInputId: (ctx: Ctx, channel: string) =>\n    ctx.ids?.channelInput?.(channel) ?? `color-picker:${ctx.id}:input:${channel}`,\n  getChannelSliderThumbId: (ctx: Ctx, channel: ColorChannel) =>\n    ctx.ids?.channelSliderThumb?.(channel) ?? `color-picker:${ctx.id}:slider-thumb:${channel}`,\n\n  getContentEl: (ctx: Ctx) => dom.queryById(ctx, dom.getContentId(ctx)),\n  getAreaThumbEl: (ctx: Ctx) => dom.queryById(ctx, dom.getAreaThumbId(ctx)),\n  getChannelSliderThumbEl: (ctx: Ctx, channel: ColorChannel) =>\n    dom.queryById(ctx, dom.getChannelSliderThumbId(ctx, channel)),\n  getChannelInputEl: (ctx: Ctx, channel: string) =>\n    dom.queryById<HTMLInputElement>(ctx, dom.getChannelInputId(ctx, channel)),\n\n  getAreaEl: (ctx: Ctx) => dom.queryById(ctx, dom.getAreaId(ctx)),\n  getAreaValueFromPoint(ctx: Ctx, point: Point) {\n    const { percent } = getRelativePoint(point, dom.getAreaEl(ctx))\n    return percent\n  },\n\n  getChannelSliderTrackEl: (ctx: Ctx, channel: ColorChannel) => {\n    return dom.queryById(ctx, dom.getChannelSliderTrackId(ctx, channel))\n  },\n  getChannelSliderValueFromPoint(ctx: Ctx, point: Point, channel: ColorChannel) {\n    const { percent } = getRelativePoint(point, dom.getChannelSliderTrackEl(ctx, channel))\n    return percent\n  },\n  getChannelInputEls: (ctx: Ctx) => {\n    return queryAll<HTMLInputElement>(dom.getContentEl(ctx), \"input[data-channel]\")\n  },\n})\n","import { Color, type ColorChannel } from \"@zag-js/color-utils\"\nimport { getPercentValue, snapValueToStep } from \"@zag-js/numeric-range\"\n\nexport function getChannelDetails(color: Color, xChannel: ColorChannel, yChannel: ColorChannel) {\n  const channels = color.getColorSpaceAxes({ xChannel, yChannel })\n\n  const xChannelRange = color.getChannelRange(channels.xChannel)\n  const yChannelRange = color.getChannelRange(channels.yChannel)\n\n  const { minValue: minValueX, maxValue: maxValueX, step: stepX, pageSize: pageSizeX } = xChannelRange\n  const { minValue: minValueY, maxValue: maxValueY, step: stepY, pageSize: pageSizeY } = yChannelRange\n\n  const xValue = color.getChannelValue(channels.xChannel)\n  const yValue = color.getChannelValue(channels.yChannel)\n\n  return {\n    channels,\n    xChannelStep: stepX,\n    yChannelStep: stepY,\n    xChannelPageStep: pageSizeX,\n    yChannelPageStep: pageSizeY,\n    xValue,\n    yValue,\n    getThumbPosition() {\n      let x = (xValue - minValueX) / (maxValueX - minValueX)\n      let y = 1 - (yValue - minValueY) / (maxValueY - minValueY)\n      return { x, y }\n    },\n    incrementX(stepSize: number) {\n      return xValue + stepSize > maxValueX ? maxValueX : snapValueToStep(xValue + stepSize, minValueX, maxValueX, stepX)\n    },\n    incrementY(stepSize: number) {\n      return yValue + stepSize > maxValueY ? maxValueY : snapValueToStep(yValue + stepSize, minValueY, maxValueY, stepY)\n    },\n    decrementX(stepSize: number) {\n      return snapValueToStep(xValue - stepSize, minValueX, maxValueX, stepX)\n    },\n    decrementY(stepSize: number) {\n      return snapValueToStep(yValue - stepSize, minValueY, maxValueY, stepY)\n    },\n    getColorFromPoint(x: number, y: number) {\n      let newXValue = getPercentValue(x, minValueX, maxValueX, stepX)\n      let newYValue = getPercentValue(1 - y, minValueY, maxValueY, stepY)\n\n      let newColor: Color | undefined\n\n      if (newXValue !== xValue) {\n        newXValue = snapValueToStep(newXValue, minValueX, maxValueX, stepX)\n        newColor = color.withChannelValue(channels.xChannel, newXValue)\n      }\n\n      if (newYValue !== yValue) {\n        newYValue = snapValueToStep(newYValue, minValueY, maxValueY, stepY)\n        newColor = (newColor || color).withChannelValue(channels.yChannel, newYValue)\n      }\n\n      return newColor\n    },\n  }\n}\n","import { Color, parseColor, type ColorChannel } from \"@zag-js/color-utils\"\n\nexport function getChannelDisplayColor(color: Color, channel: ColorChannel) {\n  switch (channel) {\n    case \"hue\":\n      return parseColor(`hsl(${color.getChannelValue(\"hue\")}, 100%, 50%)`)\n    case \"lightness\":\n    case \"brightness\":\n    case \"saturation\":\n    case \"red\":\n    case \"green\":\n    case \"blue\":\n      return color.withChannelValue(\"alpha\", 1)\n    case \"alpha\": {\n      return color\n    }\n    default:\n      throw new Error(\"Unknown color channel: \" + channel)\n  }\n}\n","import { Color } from \"@zag-js/color-utils\"\nimport { ExtendedColorChannel } from \"../color-picker.types\"\n\nexport function getChannelInputValue(color: Color, channel: ExtendedColorChannel) {\n  switch (channel) {\n    case \"hex\":\n      return color.toString(\"hex\")\n    case \"css\":\n      return color.toString(\"css\")\n    default:\n      return color.getChannelValue(channel).toString()\n  }\n}\n\nexport function getChannelInputRange(color: Color, channel: ExtendedColorChannel) {\n  switch (channel) {\n    case \"hex\":\n    case \"css\":\n      return undefined\n    default:\n      return color.getChannelRange(channel)\n  }\n}\n","export const generateRGB_R = (orientation: [string, string], dir: boolean, zValue: number) => {\n  const maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`\n  const result = {\n    areaStyles: {\n      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(${zValue},0,0),rgb(${zValue},255,0))`,\n    },\n    areaGradientStyles: {\n      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(${zValue},0,255),rgb(${zValue},255,255))`,\n      WebkitMaskImage: maskImage,\n      maskImage,\n    },\n  }\n  return result\n}\n\nexport const generateRGB_G = (orientation: [string, string], dir: boolean, zValue: number) => {\n  const maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`\n  const result = {\n    areaStyles: {\n      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,${zValue},0),rgb(255,${zValue},0))`,\n    },\n    areaGradientStyles: {\n      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,${zValue},255),rgb(255,${zValue},255))`,\n      WebkitMaskImage: maskImage,\n      maskImage,\n    },\n  }\n  return result\n}\n\nexport const generateRGB_B = (orientation: [string, string], dir: boolean, zValue: number) => {\n  const maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`\n  const result = {\n    areaStyles: {\n      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,0,${zValue}),rgb(255,0,${zValue}))`,\n    },\n    areaGradientStyles: {\n      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,255,${zValue}),rgb(255,255,${zValue}))`,\n      WebkitMaskImage: maskImage,\n      maskImage,\n    },\n  }\n  return result\n}\n\nexport const generateHSL_H = (orientation: [string, string], dir: boolean, zValue: number) => {\n  const result = {\n    areaStyles: {},\n    areaGradientStyles: {\n      background: [\n        `linear-gradient(to ${\n          orientation[Number(dir)]\n        }, hsla(0,0%,0%,1) 0%, hsla(0,0%,0%,0) 50%, hsla(0,0%,100%,0) 50%, hsla(0,0%,100%,1) 100%)`,\n        `linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,50%),hsla(0,0%,50%,0))`,\n        `hsl(${zValue}, 100%, 50%)`,\n      ].join(\",\"),\n    },\n  }\n  return result\n}\n\nexport const generateHSL_S = (orientation: [string, string], dir: boolean, alphaValue: number) => {\n  const result = {\n    areaStyles: {},\n    areaGradientStyles: {\n      background: [\n        `linear-gradient(to ${\n          orientation[Number(!dir)]\n        }, hsla(0,0%,0%,${alphaValue}) 0%, hsla(0,0%,0%,0) 50%, hsla(0,0%,100%,0) 50%, hsla(0,0%,100%,${alphaValue}) 100%)`,\n        `linear-gradient(to ${\n          orientation[Number(dir)]\n        },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}))`,\n        \"hsl(0, 0%, 50%)\",\n      ].join(\",\"),\n    },\n  }\n  return result\n}\n\nexport const generateHSL_L = (orientation: [string, string], dir: boolean, zValue: number) => {\n  const result = {\n    areaStyles: {},\n    areaGradientStyles: {\n      backgroundImage: [\n        `linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,${zValue}%),hsla(0,0%,${zValue}%,0))`,\n        `linear-gradient(to ${\n          orientation[Number(dir)]\n        },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}%))`,\n      ].join(\",\"),\n    },\n  }\n  return result\n}\n\nexport const generateHSB_H = (orientation: [string, string], dir: boolean, zValue: number) => {\n  const result = {\n    areaStyles: {},\n    areaGradientStyles: {\n      background: [\n        `linear-gradient(to ${orientation[Number(dir)]},hsl(0,0%,0%),hsla(0,0%,0%,0))`,\n        `linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,100%),hsla(0,0%,100%,0))`,\n        `hsl(${zValue}, 100%, 50%)`,\n      ].join(\",\"),\n    },\n  }\n  return result\n}\n\nexport const generateHSB_S = (orientation: [string, string], dir: boolean, alphaValue: number) => {\n  const result = {\n    areaStyles: {},\n    areaGradientStyles: {\n      background: [\n        `linear-gradient(to ${orientation[Number(!dir)]},hsla(0,0%,0%,${alphaValue}),hsla(0,0%,0%,0))`,\n        `linear-gradient(to ${\n          orientation[Number(dir)]\n        },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}))`,\n        `linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,0%),hsl(0,0%,100%))`,\n      ].join(\",\"),\n    },\n  }\n  return result\n}\n\nexport const generateHSB_B = (orientation: [string, string], dir: boolean, alphaValue: number) => {\n  const result = {\n    areaStyles: {},\n    areaGradientStyles: {\n      background: [\n        `linear-gradient(to ${orientation[Number(!dir)]},hsla(0,0%,100%,${alphaValue}),hsla(0,0%,100%,0))`,\n        `linear-gradient(to ${\n          orientation[Number(dir)]\n        },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}))`,\n        \"#000\",\n      ].join(\",\"),\n    },\n  }\n  return result\n}\n","import { type ColorChannel } from \"@zag-js/color-utils\"\nimport { Style } from \"@zag-js/types\"\nimport { MachineContext } from \"../color-picker.types\"\nimport {\n  generateHSB_B,\n  generateHSB_H,\n  generateHSB_S,\n  generateHSL_H,\n  generateHSL_L,\n  generateHSL_S,\n  generateRGB_B,\n  generateRGB_G,\n  generateRGB_R,\n} from \"./generate-format-background\"\n\nexport function getColorAreaGradient(ctx: MachineContext, xChannel: ColorChannel, yChannel: ColorChannel) {\n  const value = ctx.valueAsColor\n\n  const { zChannel } = value.getColorSpaceAxes({ xChannel, yChannel })\n  const zValue = value.getChannelValue(zChannel)\n\n  const { minValue: zMin, maxValue: zMax } = value.getChannelRange(zChannel)\n  const orientation: [string, string] = [\"top\", ctx.dir === \"rtl\" ? \"left\" : \"right\"]\n\n  let dir = false\n  let background = { areaStyles: {} as Style, areaGradientStyles: {} as Style }\n\n  let alphaValue = (zValue - zMin) / (zMax - zMin)\n  let isHSL = value.getColorSpace() === \"hsl\"\n\n  switch (zChannel) {\n    case \"red\": {\n      dir = xChannel === \"green\"\n      background = generateRGB_R(orientation, dir, zValue)\n      break\n    }\n\n    case \"green\": {\n      dir = xChannel === \"red\"\n      background = generateRGB_G(orientation, dir, zValue)\n      break\n    }\n\n    case \"blue\": {\n      dir = xChannel === \"red\"\n      background = generateRGB_B(orientation, dir, zValue)\n      break\n    }\n\n    case \"hue\": {\n      dir = xChannel !== \"saturation\"\n      if (isHSL) {\n        background = generateHSL_H(orientation, dir, zValue)\n      } else {\n        background = generateHSB_H(orientation, dir, zValue)\n      }\n      break\n    }\n\n    case \"saturation\": {\n      dir = xChannel === \"hue\"\n      if (isHSL) {\n        background = generateHSL_S(orientation, dir, alphaValue)\n      } else {\n        background = generateHSB_S(orientation, dir, alphaValue)\n      }\n      break\n    }\n\n    case \"brightness\": {\n      dir = xChannel === \"hue\"\n      background = generateHSB_B(orientation, dir, alphaValue)\n      break\n    }\n\n    case \"lightness\": {\n      dir = xChannel === \"hue\"\n      background = generateHSL_L(orientation, dir, zValue)\n      break\n    }\n  }\n\n  return background\n}\n","import { ColorChannelProps, MachineContext } from \"../color-picker.types\"\n\nfunction getSliderBgDirection(orientation: \"vertical\" | \"horizontal\", dir: \"ltr\" | \"rtl\") {\n  if (orientation === \"vertical\") {\n    return \"top\"\n  } else if (dir === \"ltr\") {\n    return \"right\"\n  } else {\n    return \"left\"\n  }\n}\n\nexport const getSliderBgImage = (ctx: MachineContext, props: Required<ColorChannelProps>) => {\n  const { channel } = props\n\n  const dir = getSliderBgDirection(props.orientation, ctx.dir!)\n  const value = ctx.valueAsColor\n\n  const { minValue, maxValue } = ctx.valueAsColor.getChannelRange(channel)\n\n  switch (channel) {\n    case \"hue\":\n      return `linear-gradient(to ${dir}, 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%)`\n    case \"lightness\": {\n      let start = ctx.valueAsColor.withChannelValue(channel, minValue).toString(\"css\")\n      let middle = value.withChannelValue(channel, (maxValue - minValue) / 2).toString(\"css\")\n      let end = value.withChannelValue(channel, maxValue).toString(\"css\")\n      return `linear-gradient(to ${dir}, ${start}, ${middle}, ${end})`\n    }\n    case \"saturation\":\n    case \"brightness\":\n    case \"red\":\n    case \"green\":\n    case \"blue\":\n    case \"alpha\": {\n      let start = value.withChannelValue(channel, minValue).toString(\"css\")\n      let end = value.withChannelValue(channel, maxValue).toString(\"css\")\n      return `linear-gradient(to ${dir}, ${start}, ${end})`\n    }\n    default:\n      throw new Error(\"Unknown color channel: \" + channel)\n  }\n}\n","import { Color, parseColor } from \"@zag-js/color-utils\"\nimport { createMachine } from \"@zag-js/core\"\nimport { trackPointerMove } from \"@zag-js/dom-event\"\nimport { raf } from \"@zag-js/dom-query\"\nimport { clampValue, getPercentValue, snapValueToStep } from \"@zag-js/numeric-range\"\nimport { disableTextSelection } from \"@zag-js/text-selection\"\nimport { compact } from \"@zag-js/utils\"\nimport { dom } from \"./color-picker.dom\"\nimport { ExtendedColorChannel, MachineContext, MachineState, UserDefinedContext } from \"./color-picker.types\"\nimport { getChannelDetails } from \"./utils/get-channel-details\"\nimport { getChannelInputValue } from \"./utils/get-channel-input-value\"\n\nexport function machine(userContext: UserDefinedContext) {\n  const ctx = compact(userContext)\n\n  return createMachine<MachineContext, MachineState>(\n    {\n      id: \"color-picker\",\n      initial: \"idle\",\n      context: {\n        dir: \"ltr\",\n        activeId: null,\n        activeChannel: null,\n        activeOrientation: null,\n        value: \"#D9D9D9\",\n        ...ctx,\n        valueAsColor: parseColor(ctx.value || \"#D9D9D9\"),\n      },\n\n      computed: {\n        isRtl: (ctx) => ctx.dir === \"rtl\",\n        isInteractive: (ctx) => !(ctx.disabled || ctx.readOnly),\n      },\n\n      on: {\n        \"VALUE.SET\": {\n          actions: [\"setValue\"],\n        },\n      },\n\n      created: [\"setValueAsColor\"],\n\n      watch: {\n        value: [\"setValueAsColor\", \"syncChannelInputs\", \"invokeOnChange\"],\n      },\n\n      states: {\n        idle: {\n          on: {\n            \"EYEDROPPER.CLICK\": {\n              actions: [\"openEyeDropper\"],\n            },\n            \"AREA.POINTER_DOWN\": {\n              target: \"dragging\",\n              actions: [\"setActiveChannel\", \"setAreaColorFromPoint\", \"focusAreaThumb\"],\n            },\n            \"CHANNEL_SLIDER.POINTER_DOWN\": {\n              target: \"dragging\",\n              actions: [\"setActiveChannel\", \"setChannelColorFromPoint\", \"focusChannelThumb\"],\n            },\n            \"CHANNEL_INPUT.FOCUS\": {\n              target: \"focused\",\n              actions: [\"setActiveChannel\"],\n            },\n            \"CHANNEL_INPUT.CHANGE\": {\n              actions: [\"setChannelColorFromInput\"],\n            },\n          },\n        },\n\n        focused: {\n          on: {\n            \"AREA.POINTER_DOWN\": {\n              target: \"dragging\",\n              actions: [\"setActiveChannel\", \"setAreaColorFromPoint\", \"focusAreaThumb\"],\n            },\n            \"CHANNEL_SLIDER.POINTER_DOWN\": {\n              target: \"dragging\",\n              actions: [\"setActiveChannel\", \"setChannelColorFromPoint\", \"focusChannelThumb\"],\n            },\n            \"AREA.ARROW_LEFT\": {\n              actions: [\"decrementXChannel\"],\n            },\n            \"AREA.ARROW_RIGHT\": {\n              actions: [\"incrementXChannel\"],\n            },\n            \"AREA.ARROW_UP\": {\n              actions: [\"incrementYChannel\"],\n            },\n            \"AREA.ARROW_DOWN\": {\n              actions: [\"decrementYChannel\"],\n            },\n            \"AREA.PAGE_UP\": {\n              actions: [\"incrementXChannel\"],\n            },\n            \"AREA.PAGE_DOWN\": {\n              actions: [\"decrementXChannel\"],\n            },\n            \"CHANNEL_SLIDER.ARROW_LEFT\": {\n              actions: [\"decrementChannel\"],\n            },\n            \"CHANNEL_SLIDER.ARROW_RIGHT\": {\n              actions: [\"incrementChannel\"],\n            },\n            \"CHANNEL_SLIDER.ARROW_UP\": {\n              actions: [\"incrementChannel\"],\n            },\n            \"CHANNEL_SLIDER.ARROW_DOWN\": {\n              actions: [\"decrementChannel\"],\n            },\n            \"CHANNEL_SLIDER.PAGE_UP\": {\n              actions: [\"incrementChannel\"],\n            },\n            \"CHANNEL_SLIDER.PAGE_DOWN\": {\n              actions: [\"decrementChannel\"],\n            },\n            \"CHANNEL_SLIDER.HOME\": {\n              actions: [\"setChannelToMin\"],\n            },\n            \"CHANNEL_SLIDER.END\": {\n              actions: [\"setChannelToMax\"],\n            },\n            \"CHANNEL_INPUT.FOCUS\": {\n              actions: [\"setActiveChannel\"],\n            },\n            \"CHANNEL_INPUT.CHANGE\": {\n              actions: [\"setChannelColorFromInput\"],\n            },\n            \"CHANNEL_INPUT.BLUR\": [\n              {\n                guard: \"isTextField\",\n                target: \"idle\",\n                actions: [\"setChannelColorFromInput\"],\n              },\n              { target: \"idle\" },\n            ],\n            \"CHANNEL_SLIDER.BLUR\": {\n              target: \"idle\",\n            },\n            \"AREA.BLUR\": {\n              target: \"idle\",\n            },\n          },\n        },\n\n        dragging: {\n          exit: [\"clearActiveChannel\"],\n          activities: [\"trackPointerMove\", \"disableTextSelection\"],\n          on: {\n            \"AREA.POINTER_MOVE\": {\n              actions: [\"setAreaColorFromPoint\"],\n            },\n            \"AREA.POINTER_UP\": {\n              target: \"focused\",\n              actions: [\"invokeOnChangeEnd\"],\n            },\n            \"CHANNEL_SLIDER.POINTER_MOVE\": {\n              actions: [\"setChannelColorFromPoint\"],\n            },\n            \"CHANNEL_SLIDER.POINTER_UP\": {\n              target: \"focused\",\n              actions: [\"invokeOnChangeEnd\"],\n            },\n          },\n        },\n      },\n    },\n    {\n      guards: {\n        isTextField: (_ctx, evt) => !!evt.isTextField,\n      },\n      activities: {\n        trackPointerMove(ctx, _evt, { send }) {\n          return trackPointerMove(dom.getDoc(ctx), {\n            onPointerMove({ point }) {\n              const type = ctx.activeId === \"area\" ? \"AREA.POINTER_MOVE\" : \"CHANNEL_SLIDER.POINTER_MOVE\"\n              send({ type, point })\n            },\n            onPointerUp() {\n              const type = ctx.activeId === \"area\" ? \"AREA.POINTER_UP\" : \"CHANNEL_SLIDER.POINTER_UP\"\n              send({ type })\n            },\n          })\n        },\n        disableTextSelection(ctx) {\n          return disableTextSelection({ doc: dom.getDoc(ctx), target: dom.getContentEl(ctx) })\n        },\n      },\n      actions: {\n        openEyeDropper(ctx) {\n          const isSupported = \"EyeDropper\" in dom.getWin(ctx)\n          if (!isSupported) return\n          const win = dom.getWin(ctx) as any\n          const picker = new win.EyeDropper()\n          picker\n            .open()\n            .then(({ sRGBHex }: { sRGBHex: string }) => {\n              const format = ctx.valueAsColor.getColorSpace()\n              const color = parseColor(sRGBHex).toFormat(format)\n              setColor(ctx, color)\n              ctx.onChangeEnd?.({ value: ctx.value, valueAsColor: color })\n            })\n            .catch(() => void 0)\n        },\n        setActiveChannel(ctx, evt) {\n          ctx.activeId = evt.id\n          if (evt.channel) {\n            ctx.activeChannel = evt.channel\n          }\n          if (evt.orientation) {\n            ctx.activeOrientation = evt.orientation\n          }\n        },\n        clearActiveChannel(ctx) {\n          ctx.activeChannel = null\n          ctx.activeId = null\n          ctx.activeOrientation = null\n        },\n        setAreaColorFromPoint(ctx, evt) {\n          const { xChannel, yChannel } = evt.channel || ctx.activeChannel\n\n          const percent = dom.getAreaValueFromPoint(ctx, evt.point)\n          const { getColorFromPoint } = getChannelDetails(ctx.valueAsColor, xChannel, yChannel)\n          const color = getColorFromPoint(percent.x, percent.y)\n\n          if (!color) return\n          setColor(ctx, color)\n        },\n        setChannelColorFromPoint(ctx, evt) {\n          const channel = evt.channel || ctx.activeId\n          const percent = dom.getChannelSliderValueFromPoint(ctx, evt.point, channel)\n\n          const { minValue, maxValue, step } = ctx.valueAsColor.getChannelRange(channel)\n          const orientation = ctx.activeOrientation || \"horizontal\"\n\n          const point = orientation === \"horizontal\" ? percent.x : percent.y\n          const channelValue = getPercentValue(point, minValue, maxValue, step)\n\n          const value = snapValueToStep(channelValue - step, minValue, maxValue, step)\n          const newColor = ctx.valueAsColor.withChannelValue(channel, value)\n\n          setColor(ctx, newColor)\n        },\n        setValue(ctx, evt) {\n          setColor(ctx, evt.value)\n        },\n        setValueAsColor(ctx) {\n          try {\n            const color = parseColor(ctx.value)\n            if (color.isEqual(ctx.valueAsColor)) return\n            ctx.valueAsColor = color\n          } catch {}\n        },\n        syncChannelInputs(ctx) {\n          const inputs = dom.getChannelInputEls(ctx)\n          inputs.forEach((input) => {\n            const channel = input.getAttribute(\"data-channel\") as ExtendedColorChannel | null\n            if (!channel) return\n            const value = getChannelInputValue(ctx.valueAsColor, channel)\n            input.value = value.toString()\n          })\n        },\n        setChannelColorFromInput(ctx, evt) {\n          const { channel, isTextField, value } = evt\n          try {\n            const format = ctx.valueAsColor.getColorSpace()\n\n            const newColor = isTextField\n              ? parseColor(value).toFormat(format)\n              : ctx.valueAsColor.withChannelValue(channel, value)\n\n            setColor(ctx, newColor)\n            //\n          } catch {\n            // reset input value\n            const input = dom.getChannelInputEl(ctx, channel)\n            if (!input) return\n            input.value = getChannelInputValue(ctx.valueAsColor, channel)\n          }\n        },\n\n        incrementChannel(ctx, evt) {\n          const { minValue, maxValue, step } = ctx.valueAsColor.getChannelRange(evt.channel)\n          const channelValue = ctx.valueAsColor.getChannelValue(evt.channel)\n          const value = snapValueToStep(channelValue + evt.step, minValue, maxValue, step)\n          const newColor = ctx.valueAsColor.withChannelValue(evt.channel, clampValue(value, minValue, maxValue))\n          setColor(ctx, newColor)\n        },\n        decrementChannel(ctx, evt) {\n          const { minValue, maxValue, step } = ctx.valueAsColor.getChannelRange(evt.channel)\n          const channelValue = ctx.valueAsColor.getChannelValue(evt.channel)\n          const value = snapValueToStep(channelValue - evt.step, minValue, maxValue, step)\n          const newColor = ctx.valueAsColor.withChannelValue(evt.channel, clampValue(value, minValue, maxValue))\n          setColor(ctx, newColor)\n        },\n\n        incrementXChannel(ctx, evt) {\n          const { xChannel, yChannel } = evt.channel\n          const { incrementX } = getChannelDetails(ctx.valueAsColor, xChannel, yChannel)\n          const newColor = ctx.valueAsColor.withChannelValue(xChannel, incrementX(evt.step))\n          setColor(ctx, newColor)\n        },\n        decrementXChannel(ctx, evt) {\n          const { xChannel, yChannel } = evt.channel\n          const { decrementX } = getChannelDetails(ctx.valueAsColor, xChannel, yChannel)\n          const newColor = ctx.valueAsColor.withChannelValue(xChannel, decrementX(evt.step))\n          setColor(ctx, newColor)\n        },\n\n        incrementYChannel(ctx, evt) {\n          const { xChannel, yChannel } = evt.channel\n          const { incrementY } = getChannelDetails(ctx.valueAsColor, xChannel, yChannel)\n          const newColor = ctx.valueAsColor.withChannelValue(yChannel, incrementY(evt.step))\n          setColor(ctx, newColor)\n        },\n        decrementYChannel(ctx, evt) {\n          const { xChannel, yChannel } = evt.channel\n          const { decrementY } = getChannelDetails(ctx.valueAsColor, xChannel, yChannel)\n          const newColor = ctx.valueAsColor.withChannelValue(yChannel, decrementY(evt.step))\n          setColor(ctx, newColor)\n        },\n\n        setChannelToMax(ctx, evt) {\n          const { maxValue } = ctx.valueAsColor.getChannelRange(evt.channel)\n          const newColor = ctx.valueAsColor.withChannelValue(evt.channel, maxValue)\n          setColor(ctx, newColor)\n        },\n        setChannelToMin(ctx, evt) {\n          const { minValue } = ctx.valueAsColor.getChannelRange(evt.channel)\n          const newColor = ctx.valueAsColor.withChannelValue(evt.channel, minValue)\n          setColor(ctx, newColor)\n        },\n\n        invokeOnChangeEnd(ctx) {\n          ctx.onChangeEnd?.({ value: ctx.value, valueAsColor: ctx.valueAsColor })\n        },\n        invokeOnChange(ctx) {\n          ctx.onChange?.({ value: ctx.value, valueAsColor: ctx.valueAsColor })\n        },\n        focusAreaThumb(ctx) {\n          raf(() => {\n            dom.getAreaThumbEl(ctx)?.focus({ preventScroll: true })\n          })\n        },\n        focusChannelThumb(ctx, evt) {\n          raf(() => {\n            dom.getChannelSliderThumbEl(ctx, evt.channel)?.focus({ preventScroll: true })\n          })\n        },\n      },\n    },\n  )\n}\n\nconst setColor = (ctx: MachineContext, color: Color) => {\n  ctx.value = color.toString(\"css\")\n  ctx.valueAsColor = color\n}\n"],"mappings":"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","names":["import_color_utils","import_dom_event","import_dom_query","import_color_utils","import_dom_event","import_dom_query","import_numeric_range","ctx"]}
+{"version":3,"sources":["../src/index.ts","../src/color-picker.anatomy.ts","../src/color-picker.connect.ts","../src/color-picker.dom.ts","../src/utils/get-channel-details.ts","../src/utils/get-channel-display-color.ts","../src/utils/get-channel-input-value.ts","../src/utils/generate-format-background.ts","../src/utils/get-color-area-gradient.ts","../src/utils/get-slider-background.ts","../src/color-picker.machine.ts"],"sourcesContent":["export { anatomy } from \"./color-picker.anatomy\"\nexport { connect } from \"./color-picker.connect\"\nexport { machine } from \"./color-picker.machine\"\nexport type {\n  Color,\n  ColorAxes,\n  ColorFormat,\n  ColorAreaProps,\n  ColorChannel,\n  ColorChannelProps,\n  ColorChannelInputProps,\n  ColorSwatchProps,\n  ColorType,\n  UserDefinedContext as Context,\n  PublicApi,\n} from \"./color-picker.types\"\n","import { createAnatomy } from \"@zag-js/anatomy\"\n\nexport const anatomy = createAnatomy(\"color-picker\", [\n  \"area\",\n  \"areaThumb\",\n  \"areaGradient\",\n  \"channelSliderTrack\",\n  \"channelSliderTrackBg\",\n  \"channelSliderThumb\",\n  \"channelInput\",\n  \"swatch\",\n  \"swatchBg\",\n  \"content\",\n  \"label\",\n  \"eyeDropTrigger\",\n])\n\nexport const parts = anatomy.build()\n","import { normalizeColor, type Color, type ColorChannel, type ColorFormat } from \"@zag-js/color-utils\"\nimport {\n  getEventKey,\n  getEventPoint,\n  getEventStep,\n  getNativeEvent,\n  isLeftClick,\n  isModifiedEvent,\n  type EventKeyMap,\n} from \"@zag-js/dom-event\"\nimport { dataAttr } from \"@zag-js/dom-query\"\nimport type { NormalizeProps, PropTypes } from \"@zag-js/types\"\nimport { parts } from \"./color-picker.anatomy\"\nimport { dom } from \"./color-picker.dom\"\nimport type {\n  ColorAreaProps,\n  ColorChannelInputProps,\n  ColorChannelProps,\n  ColorSwatchProps,\n  PublicApi,\n  Send,\n  State,\n} from \"./color-picker.types\"\nimport { getChannelDetails } from \"./utils/get-channel-details\"\nimport { getChannelDisplayColor } from \"./utils/get-channel-display-color\"\nimport { getChannelInputRange, getChannelInputValue } from \"./utils/get-channel-input-value\"\nimport { getColorAreaGradient } from \"./utils/get-color-area-gradient\"\nimport { getSliderBgImage } from \"./utils/get-slider-background\"\n\nexport function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): PublicApi<T> {\n  const valueAsColor = state.context.valueAsColor\n  const isDisabled = state.context.disabled\n  const isInteractive = state.context.isInteractive\n  const isDragging = state.matches(\"dragging\")\n\n  const channels = valueAsColor.getColorChannels()\n\n  return {\n    isDragging,\n    value: state.context.value,\n    valueAsColor,\n    channels,\n\n    setColor(value: string | Color) {\n      send({ type: \"VALUE.SET\", value: normalizeColor(value), src: \"set-color\" })\n    },\n\n    setChannelValue(channel: ColorChannel, value: number) {\n      const color = valueAsColor.withChannelValue(channel, value)\n      send({ type: \"VALUE.SET\", value: color, src: \"set-channel\" })\n    },\n\n    setFormat(format: ColorFormat) {\n      const value = valueAsColor.toFormat(format)\n      send({ type: \"VALUE.SET\", value, src: \"set-format\" })\n    },\n\n    contentProps: normalize.element({\n      ...parts.content.attrs,\n      id: dom.getContentId(state.context),\n    }),\n\n    getAreaProps(props: ColorAreaProps) {\n      const { xChannel, yChannel } = props\n      const { areaStyles } = getColorAreaGradient(state.context, xChannel, yChannel)\n\n      return normalize.element({\n        ...parts.area.attrs,\n        id: dom.getAreaId(state.context),\n        role: \"group\",\n        onPointerDown(event) {\n          if (!isInteractive) return\n\n          const evt = getNativeEvent(event)\n          if (!isLeftClick(evt) || isModifiedEvent(evt)) return\n\n          const point = getEventPoint(evt)\n          const channel = { xChannel, yChannel }\n\n          send({ type: \"AREA.POINTER_DOWN\", point, channel, id: \"area\" })\n        },\n        style: {\n          position: \"relative\",\n          touchAction: \"none\",\n          forcedColorAdjust: \"none\",\n          ...areaStyles,\n        },\n      })\n    },\n\n    getAreaGradientProps(props: ColorAreaProps) {\n      const { xChannel, yChannel } = props\n      const { areaGradientStyles } = getColorAreaGradient(state.context, xChannel, yChannel)\n\n      return normalize.element({\n        ...parts.areaGradient.attrs,\n        id: dom.getAreaGradientId(state.context),\n        style: {\n          position: \"relative\",\n          touchAction: \"none\",\n          forcedColorAdjust: \"none\",\n          ...areaGradientStyles,\n        },\n      })\n    },\n\n    getAreaThumbProps(props: ColorAreaProps) {\n      const { xChannel, yChannel } = props\n      const { getThumbPosition } = getChannelDetails(valueAsColor, xChannel, yChannel)\n      const { x, y } = getThumbPosition()\n\n      const channel = { xChannel, yChannel }\n\n      return normalize.element({\n        ...parts.areaThumb.attrs,\n        id: dom.getAreaThumbId(state.context),\n        tabIndex: isDisabled ? undefined : 0,\n        \"data-disabled\": dataAttr(isDisabled),\n        role: \"presentation\",\n        style: {\n          position: \"absolute\",\n          left: `${x * 100}%`,\n          top: `${y * 100}%`,\n          transform: \"translate(-50%, -50%)\",\n          touchAction: \"none\",\n          forcedColorAdjust: \"none\",\n          background: valueAsColor.withChannelValue(\"alpha\", 1).toString(\"css\"),\n        },\n        onBlur() {\n          send(\"AREA.BLUR\")\n        },\n        onKeyDown(event) {\n          if (!isInteractive) return\n\n          const step = getEventStep(event)\n\n          const keyMap: EventKeyMap = {\n            ArrowUp() {\n              send({ type: \"AREA.ARROW_UP\", channel, step })\n            },\n            ArrowDown() {\n              send({ type: \"AREA.ARROW_DOWN\", channel, step })\n            },\n            ArrowLeft() {\n              send({ type: \"AREA.ARROW_LEFT\", channel, step })\n            },\n            ArrowRight() {\n              send({ type: \"AREA.ARROW_RIGHT\", channel, step })\n            },\n            PageUp() {\n              send({ type: \"AREA.PAGE_UP\", channel, step })\n            },\n            PageDown() {\n              send({ type: \"AREA.PAGE_DOWN\", channel, step })\n            },\n          }\n\n          const exec = keyMap[getEventKey(event, state.context)]\n\n          if (exec) {\n            exec(event)\n            event.preventDefault()\n          }\n        },\n      })\n    },\n\n    getChannelSliderTrackProps(props: ColorChannelProps) {\n      const { orientation = \"horizontal\", channel } = props\n\n      return normalize.element({\n        ...parts.channelSliderTrack.attrs,\n        id: dom.getChannelSliderTrackId(state.context, channel),\n        role: \"group\",\n        \"data-channel\": channel,\n        \"data-orientation\": orientation,\n        onPointerDown(event) {\n          if (!isInteractive) return\n\n          const evt = getNativeEvent(event)\n          if (!isLeftClick(evt) || isModifiedEvent(evt)) return\n\n          const point = getEventPoint(evt)\n          send({ type: \"CHANNEL_SLIDER.POINTER_DOWN\", channel, point, id: channel, orientation })\n        },\n        style: {\n          position: \"relative\",\n          touchAction: \"none\",\n          forcedColorAdjust: \"none\",\n          backgroundImage: getSliderBgImage(state.context, { orientation, channel }),\n        },\n      })\n    },\n\n    getChannelSliderBackgroundProps(props: ColorChannelProps) {\n      const { orientation = \"horizontal\", channel } = props\n      return normalize.element({\n        ...parts.channelSliderTrackBg.attrs,\n        \"data-orientation\": orientation,\n        \"data-channel\": channel,\n        style: {\n          position: \"absolute\",\n          backgroundColor: \"#fff\",\n          backgroundImage: [\n            \"linear-gradient(-45deg,#0000 75.5%,#bcbcbc 75.5%)\",\n            \"linear-gradient(45deg,#0000 75.5%,#bcbcbc 75.5%)\",\n            \"linear-gradient(-45deg,#bcbcbc 25.5%,#0000 25.5%)\",\n            \"linear-gradient(45deg,#bcbcbc 25.5%,#0000 25.5%)\",\n          ].join(\",\"),\n          backgroundSize: \"16px 16px\",\n          backgroundPosition: \"-2px -2px,-2px 6px,6px -10px,-10px -2px\",\n          inset: 0,\n          zIndex: -1,\n        },\n      })\n    },\n\n    getChannelSliderThumbProps(props: ColorChannelProps) {\n      const { orientation = \"horizontal\", channel } = props\n      const { minValue, maxValue, step: stepValue } = valueAsColor.getChannelRange(channel)\n      const channelValue = valueAsColor.getChannelValue(channel)\n\n      const offset = (channelValue - minValue) / (maxValue - minValue)\n\n      const placementStyles =\n        orientation === \"horizontal\"\n          ? { left: `${offset * 100}%`, top: \"50%\" }\n          : { top: `${offset * 100}%`, left: \"50%\" }\n\n      return normalize.element({\n        ...parts.channelSliderThumb.attrs,\n        id: dom.getChannelSliderThumbId(state.context, channel),\n        role: \"slider\",\n        \"aria-label\": channel,\n        tabIndex: isDisabled ? undefined : 0,\n        \"data-channel\": channel,\n        \"data-disabled\": dataAttr(isDisabled),\n        \"data-orientation\": orientation,\n        \"aria-disabled\": dataAttr(isDisabled),\n        \"aria-orientation\": orientation,\n        \"aria-valuemax\": maxValue,\n        \"aria-valuemin\": minValue,\n        \"aria-valuenow\": channelValue,\n        style: {\n          forcedColorAdjust: \"none\",\n          position: \"absolute\",\n          background: getChannelDisplayColor(valueAsColor, channel).toString(\"css\"),\n          ...placementStyles,\n        },\n        onFocus() {\n          if (!isInteractive) return\n          send({ type: \"CHANNEL_SLIDER.FOCUS\", channel })\n        },\n        onBlur() {\n          if (!isInteractive) return\n          send({ type: \"CHANNEL_SLIDER.BLUR\", channel })\n        },\n        onKeyDown(event) {\n          if (!isInteractive) return\n          const step = getEventStep(event) * stepValue\n\n          const keyMap: EventKeyMap = {\n            ArrowUp() {\n              send({ type: \"CHANNEL_SLIDER.ARROW_UP\", channel, step })\n            },\n            ArrowDown() {\n              send({ type: \"CHANNEL_SLIDER.ARROW_DOWN\", channel, step })\n            },\n            ArrowLeft() {\n              send({ type: \"CHANNEL_SLIDER.ARROW_LEFT\", channel, step })\n            },\n            ArrowRight() {\n              send({ type: \"CHANNEL_SLIDER.ARROW_RIGHT\", channel, step })\n            },\n            PageUp() {\n              send({ type: \"CHANNEL_SLIDER.PAGE_UP\", channel })\n            },\n            PageDown() {\n              send({ type: \"CHANNEL_SLIDER.PAGE_DOWN\", channel })\n            },\n            Home() {\n              send({ type: \"CHANNEL_SLIDER.HOME\", channel })\n            },\n            End() {\n              send({ type: \"CHANNEL_SLIDER.END\", channel })\n            },\n          }\n\n          const exec = keyMap[getEventKey(event, state.context)]\n\n          if (exec) {\n            exec(event)\n            event.preventDefault()\n          }\n        },\n      })\n    },\n\n    getChannelInputProps(props: ColorChannelInputProps) {\n      const { channel } = props\n      const isTextField = channel === \"hex\" || channel === \"css\"\n      const range = getChannelInputRange(valueAsColor, channel)\n\n      return normalize.input({\n        ...parts.channelInput.attrs,\n        type: isTextField ? \"text\" : \"number\",\n        \"data-channel\": channel,\n        \"aria-label\": channel,\n        disabled: isDisabled,\n        \"data-disabled\": dataAttr(isDisabled),\n        readOnly: state.context.readOnly,\n        id: dom.getChannelInputId(state.context, channel),\n        defaultValue: getChannelInputValue(valueAsColor, channel),\n        min: range?.minValue,\n        max: range?.maxValue,\n        step: range?.step,\n        onFocus() {\n          send({ type: \"CHANNEL_INPUT.FOCUS\", channel })\n        },\n        onChange(event) {\n          if (isTextField) return\n          const value = event.currentTarget.value\n          send({ type: \"CHANNEL_INPUT.CHANGE\", channel, value, isTextField })\n        },\n        onBlur(event) {\n          const value = event.currentTarget.value\n          send({ type: \"CHANNEL_INPUT.BLUR\", channel, value, isTextField })\n        },\n        onKeyDown(event) {\n          if (!isTextField) return\n          if (event.key === \"Enter\") {\n            const value = event.currentTarget.value\n            send({ type: \"CHANNEL_INPUT.CHANGE\", channel, value, isTextField })\n          }\n        },\n        style: {\n          appearance: \"none\",\n          WebkitAppearance: \"none\",\n          MozAppearance: \"textfield\",\n        },\n      })\n    },\n\n    eyeDropperTriggerProps: normalize.button({\n      ...parts.eyeDropTrigger.attrs,\n      onClick() {\n        send(\"EYEDROPPER.CLICK\")\n      },\n    }),\n\n    getSwatchBackgroundProps(props: ColorSwatchProps) {\n      const { value } = props\n      const alpha = normalizeColor(value).getChannelValue(\"alpha\")\n      return normalize.element({\n        ...parts.swatchBg.attrs,\n        \"data-alpha\": alpha,\n        style: {\n          width: \"100%\",\n          height: \"100%\",\n          background: \"#fff\",\n          backgroundImage: [\n            \"linear-gradient(-45deg,#0000 75.5%,#bcbcbc 75.5%)\",\n            \"linear-gradient(45deg,#0000 75.5%,#bcbcbc 75.5%)\",\n            \"linear-gradient(-45deg,#bcbcbc 25.5%,#0000 25.5%)\",\n            \"linear-gradient(45deg,#bcbcbc 25.5%,#0000 25.5%)\",\n          ].join(\",\"),\n          backgroundPosition: \"-2px -2px,-2px 6px,6px -10px,-10px -2px\",\n          backgroundSize: \"16px 16px\",\n          position: \"absolute\",\n          inset: \"0px\",\n          zIndex: -1,\n        },\n      })\n    },\n\n    getSwatchProps(props: ColorSwatchProps) {\n      const { value, readOnly } = props\n      const color = normalizeColor(value).toFormat(valueAsColor.getColorSpace())\n      return normalize.element({\n        ...parts.swatch.attrs,\n        onClick() {\n          if (readOnly) return\n          send({ type: \"VALUE.SET\", value: color })\n        },\n        style: {\n          position: \"relative\",\n          background: color.toString(\"css\"),\n        },\n      })\n    },\n  }\n}\n","import type { ColorChannel } from \"@zag-js/color-utils\"\nimport { getRelativePoint, type Point } from \"@zag-js/dom-event\"\nimport { createScope, queryAll } from \"@zag-js/dom-query\"\nimport type { MachineContext as Ctx } from \"./color-picker.types\"\n\nexport const dom = createScope({\n  getContentId: (ctx: Ctx) => ctx.ids?.content ?? `color-picker:${ctx.id}:content`,\n  getAreaId: (ctx: Ctx) => ctx.ids?.area ?? `color-picker:${ctx.id}:area`,\n  getAreaGradientId: (ctx: Ctx) => ctx.ids?.areaGradient ?? `color-picker:${ctx.id}:area-gradient`,\n  getAreaThumbId: (ctx: Ctx) => ctx.ids?.areaThumb ?? `color-picker:${ctx.id}:area-thumb`,\n  getChannelSliderTrackId: (ctx: Ctx, channel: ColorChannel) =>\n    ctx.ids?.channelSliderTrack?.(channel) ?? `color-picker:${ctx.id}:slider-track:${channel}`,\n  getChannelInputId: (ctx: Ctx, channel: string) =>\n    ctx.ids?.channelInput?.(channel) ?? `color-picker:${ctx.id}:input:${channel}`,\n  getChannelSliderThumbId: (ctx: Ctx, channel: ColorChannel) =>\n    ctx.ids?.channelSliderThumb?.(channel) ?? `color-picker:${ctx.id}:slider-thumb:${channel}`,\n\n  getContentEl: (ctx: Ctx) => dom.queryById(ctx, dom.getContentId(ctx)),\n  getAreaThumbEl: (ctx: Ctx) => dom.queryById(ctx, dom.getAreaThumbId(ctx)),\n  getChannelSliderThumbEl: (ctx: Ctx, channel: ColorChannel) =>\n    dom.queryById(ctx, dom.getChannelSliderThumbId(ctx, channel)),\n  getChannelInputEl: (ctx: Ctx, channel: string) =>\n    dom.queryById<HTMLInputElement>(ctx, dom.getChannelInputId(ctx, channel)),\n\n  getAreaEl: (ctx: Ctx) => dom.queryById(ctx, dom.getAreaId(ctx)),\n  getAreaValueFromPoint(ctx: Ctx, point: Point) {\n    const { percent } = getRelativePoint(point, dom.getAreaEl(ctx))\n    return percent\n  },\n\n  getChannelSliderTrackEl: (ctx: Ctx, channel: ColorChannel) => {\n    return dom.queryById(ctx, dom.getChannelSliderTrackId(ctx, channel))\n  },\n  getChannelSliderValueFromPoint(ctx: Ctx, point: Point, channel: ColorChannel) {\n    const { percent } = getRelativePoint(point, dom.getChannelSliderTrackEl(ctx, channel))\n    return percent\n  },\n  getChannelInputEls: (ctx: Ctx) => {\n    return queryAll<HTMLInputElement>(dom.getContentEl(ctx), \"input[data-channel]\")\n  },\n})\n","import type { Color, ColorChannel } from \"@zag-js/color-utils\"\nimport { getPercentValue, snapValueToStep } from \"@zag-js/numeric-range\"\n\nexport function getChannelDetails(color: Color, xChannel: ColorChannel, yChannel: ColorChannel) {\n  const channels = color.getColorSpaceAxes({ xChannel, yChannel })\n\n  const xChannelRange = color.getChannelRange(channels.xChannel)\n  const yChannelRange = color.getChannelRange(channels.yChannel)\n\n  const { minValue: minValueX, maxValue: maxValueX, step: stepX, pageSize: pageSizeX } = xChannelRange\n  const { minValue: minValueY, maxValue: maxValueY, step: stepY, pageSize: pageSizeY } = yChannelRange\n\n  const xValue = color.getChannelValue(channels.xChannel)\n  const yValue = color.getChannelValue(channels.yChannel)\n\n  return {\n    channels,\n    xChannelStep: stepX,\n    yChannelStep: stepY,\n    xChannelPageStep: pageSizeX,\n    yChannelPageStep: pageSizeY,\n    xValue,\n    yValue,\n    getThumbPosition() {\n      let x = (xValue - minValueX) / (maxValueX - minValueX)\n      let y = 1 - (yValue - minValueY) / (maxValueY - minValueY)\n      return { x, y }\n    },\n    incrementX(stepSize: number) {\n      return xValue + stepSize > maxValueX ? maxValueX : snapValueToStep(xValue + stepSize, minValueX, maxValueX, stepX)\n    },\n    incrementY(stepSize: number) {\n      return yValue + stepSize > maxValueY ? maxValueY : snapValueToStep(yValue + stepSize, minValueY, maxValueY, stepY)\n    },\n    decrementX(stepSize: number) {\n      return snapValueToStep(xValue - stepSize, minValueX, maxValueX, stepX)\n    },\n    decrementY(stepSize: number) {\n      return snapValueToStep(yValue - stepSize, minValueY, maxValueY, stepY)\n    },\n    getColorFromPoint(x: number, y: number) {\n      let newXValue = getPercentValue(x, minValueX, maxValueX, stepX)\n      let newYValue = getPercentValue(1 - y, minValueY, maxValueY, stepY)\n\n      let newColor: Color | undefined\n\n      if (newXValue !== xValue) {\n        newXValue = snapValueToStep(newXValue, minValueX, maxValueX, stepX)\n        newColor = color.withChannelValue(channels.xChannel, newXValue)\n      }\n\n      if (newYValue !== yValue) {\n        newYValue = snapValueToStep(newYValue, minValueY, maxValueY, stepY)\n        newColor = (newColor || color).withChannelValue(channels.yChannel, newYValue)\n      }\n\n      return newColor\n    },\n  }\n}\n","import { parseColor, type Color, type ColorChannel } from \"@zag-js/color-utils\"\n\nexport function getChannelDisplayColor(color: Color, channel: ColorChannel) {\n  switch (channel) {\n    case \"hue\":\n      return parseColor(`hsl(${color.getChannelValue(\"hue\")}, 100%, 50%)`)\n    case \"lightness\":\n    case \"brightness\":\n    case \"saturation\":\n    case \"red\":\n    case \"green\":\n    case \"blue\":\n      return color.withChannelValue(\"alpha\", 1)\n    case \"alpha\": {\n      return color\n    }\n    default:\n      throw new Error(\"Unknown color channel: \" + channel)\n  }\n}\n","import type { Color } from \"@zag-js/color-utils\"\nimport type { ExtendedColorChannel } from \"../color-picker.types\"\n\nexport function getChannelInputValue(color: Color, channel: ExtendedColorChannel) {\n  switch (channel) {\n    case \"hex\":\n      return color.toString(\"hex\")\n    case \"css\":\n      return color.toString(\"css\")\n    default:\n      return color.getChannelValue(channel).toString()\n  }\n}\n\nexport function getChannelInputRange(color: Color, channel: ExtendedColorChannel) {\n  switch (channel) {\n    case \"hex\":\n    case \"css\":\n      return undefined\n    default:\n      return color.getChannelRange(channel)\n  }\n}\n","export const generateRGB_R = (orientation: [string, string], dir: boolean, zValue: number) => {\n  const maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`\n  const result = {\n    areaStyles: {\n      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(${zValue},0,0),rgb(${zValue},255,0))`,\n    },\n    areaGradientStyles: {\n      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(${zValue},0,255),rgb(${zValue},255,255))`,\n      WebkitMaskImage: maskImage,\n      maskImage,\n    },\n  }\n  return result\n}\n\nexport const generateRGB_G = (orientation: [string, string], dir: boolean, zValue: number) => {\n  const maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`\n  const result = {\n    areaStyles: {\n      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,${zValue},0),rgb(255,${zValue},0))`,\n    },\n    areaGradientStyles: {\n      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,${zValue},255),rgb(255,${zValue},255))`,\n      WebkitMaskImage: maskImage,\n      maskImage,\n    },\n  }\n  return result\n}\n\nexport const generateRGB_B = (orientation: [string, string], dir: boolean, zValue: number) => {\n  const maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`\n  const result = {\n    areaStyles: {\n      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,0,${zValue}),rgb(255,0,${zValue}))`,\n    },\n    areaGradientStyles: {\n      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,255,${zValue}),rgb(255,255,${zValue}))`,\n      WebkitMaskImage: maskImage,\n      maskImage,\n    },\n  }\n  return result\n}\n\nexport const generateHSL_H = (orientation: [string, string], dir: boolean, zValue: number) => {\n  const result = {\n    areaStyles: {},\n    areaGradientStyles: {\n      background: [\n        `linear-gradient(to ${\n          orientation[Number(dir)]\n        }, hsla(0,0%,0%,1) 0%, hsla(0,0%,0%,0) 50%, hsla(0,0%,100%,0) 50%, hsla(0,0%,100%,1) 100%)`,\n        `linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,50%),hsla(0,0%,50%,0))`,\n        `hsl(${zValue}, 100%, 50%)`,\n      ].join(\",\"),\n    },\n  }\n  return result\n}\n\nexport const generateHSL_S = (orientation: [string, string], dir: boolean, alphaValue: number) => {\n  const result = {\n    areaStyles: {},\n    areaGradientStyles: {\n      background: [\n        `linear-gradient(to ${\n          orientation[Number(!dir)]\n        }, hsla(0,0%,0%,${alphaValue}) 0%, hsla(0,0%,0%,0) 50%, hsla(0,0%,100%,0) 50%, hsla(0,0%,100%,${alphaValue}) 100%)`,\n        `linear-gradient(to ${\n          orientation[Number(dir)]\n        },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}))`,\n        \"hsl(0, 0%, 50%)\",\n      ].join(\",\"),\n    },\n  }\n  return result\n}\n\nexport const generateHSL_L = (orientation: [string, string], dir: boolean, zValue: number) => {\n  const result = {\n    areaStyles: {},\n    areaGradientStyles: {\n      backgroundImage: [\n        `linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,${zValue}%),hsla(0,0%,${zValue}%,0))`,\n        `linear-gradient(to ${\n          orientation[Number(dir)]\n        },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}%))`,\n      ].join(\",\"),\n    },\n  }\n  return result\n}\n\nexport const generateHSB_H = (orientation: [string, string], dir: boolean, zValue: number) => {\n  const result = {\n    areaStyles: {},\n    areaGradientStyles: {\n      background: [\n        `linear-gradient(to ${orientation[Number(dir)]},hsl(0,0%,0%),hsla(0,0%,0%,0))`,\n        `linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,100%),hsla(0,0%,100%,0))`,\n        `hsl(${zValue}, 100%, 50%)`,\n      ].join(\",\"),\n    },\n  }\n  return result\n}\n\nexport const generateHSB_S = (orientation: [string, string], dir: boolean, alphaValue: number) => {\n  const result = {\n    areaStyles: {},\n    areaGradientStyles: {\n      background: [\n        `linear-gradient(to ${orientation[Number(!dir)]},hsla(0,0%,0%,${alphaValue}),hsla(0,0%,0%,0))`,\n        `linear-gradient(to ${\n          orientation[Number(dir)]\n        },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}))`,\n        `linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,0%),hsl(0,0%,100%))`,\n      ].join(\",\"),\n    },\n  }\n  return result\n}\n\nexport const generateHSB_B = (orientation: [string, string], dir: boolean, alphaValue: number) => {\n  const result = {\n    areaStyles: {},\n    areaGradientStyles: {\n      background: [\n        `linear-gradient(to ${orientation[Number(!dir)]},hsla(0,0%,100%,${alphaValue}),hsla(0,0%,100%,0))`,\n        `linear-gradient(to ${\n          orientation[Number(dir)]\n        },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}))`,\n        \"#000\",\n      ].join(\",\"),\n    },\n  }\n  return result\n}\n","import type { ColorChannel } from \"@zag-js/color-utils\"\nimport type { Style } from \"@zag-js/types\"\nimport type { MachineContext } from \"../color-picker.types\"\nimport {\n  generateHSB_B,\n  generateHSB_H,\n  generateHSB_S,\n  generateHSL_H,\n  generateHSL_L,\n  generateHSL_S,\n  generateRGB_B,\n  generateRGB_G,\n  generateRGB_R,\n} from \"./generate-format-background\"\n\nexport function getColorAreaGradient(ctx: MachineContext, xChannel: ColorChannel, yChannel: ColorChannel) {\n  const value = ctx.valueAsColor\n\n  const { zChannel } = value.getColorSpaceAxes({ xChannel, yChannel })\n  const zValue = value.getChannelValue(zChannel)\n\n  const { minValue: zMin, maxValue: zMax } = value.getChannelRange(zChannel)\n  const orientation: [string, string] = [\"top\", ctx.dir === \"rtl\" ? \"left\" : \"right\"]\n\n  let dir = false\n  let background = { areaStyles: {} as Style, areaGradientStyles: {} as Style }\n\n  let alphaValue = (zValue - zMin) / (zMax - zMin)\n  let isHSL = value.getColorSpace() === \"hsl\"\n\n  switch (zChannel) {\n    case \"red\": {\n      dir = xChannel === \"green\"\n      background = generateRGB_R(orientation, dir, zValue)\n      break\n    }\n\n    case \"green\": {\n      dir = xChannel === \"red\"\n      background = generateRGB_G(orientation, dir, zValue)\n      break\n    }\n\n    case \"blue\": {\n      dir = xChannel === \"red\"\n      background = generateRGB_B(orientation, dir, zValue)\n      break\n    }\n\n    case \"hue\": {\n      dir = xChannel !== \"saturation\"\n      if (isHSL) {\n        background = generateHSL_H(orientation, dir, zValue)\n      } else {\n        background = generateHSB_H(orientation, dir, zValue)\n      }\n      break\n    }\n\n    case \"saturation\": {\n      dir = xChannel === \"hue\"\n      if (isHSL) {\n        background = generateHSL_S(orientation, dir, alphaValue)\n      } else {\n        background = generateHSB_S(orientation, dir, alphaValue)\n      }\n      break\n    }\n\n    case \"brightness\": {\n      dir = xChannel === \"hue\"\n      background = generateHSB_B(orientation, dir, alphaValue)\n      break\n    }\n\n    case \"lightness\": {\n      dir = xChannel === \"hue\"\n      background = generateHSL_L(orientation, dir, zValue)\n      break\n    }\n  }\n\n  return background\n}\n","import type { ColorChannelProps, MachineContext } from \"../color-picker.types\"\n\nfunction getSliderBgDirection(orientation: \"vertical\" | \"horizontal\", dir: \"ltr\" | \"rtl\") {\n  if (orientation === \"vertical\") {\n    return \"top\"\n  } else if (dir === \"ltr\") {\n    return \"right\"\n  } else {\n    return \"left\"\n  }\n}\n\nexport const getSliderBgImage = (ctx: MachineContext, props: Required<ColorChannelProps>) => {\n  const { channel } = props\n\n  const dir = getSliderBgDirection(props.orientation, ctx.dir!)\n  const value = ctx.valueAsColor\n\n  const { minValue, maxValue } = ctx.valueAsColor.getChannelRange(channel)\n\n  switch (channel) {\n    case \"hue\":\n      return `linear-gradient(to ${dir}, 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%)`\n    case \"lightness\": {\n      let start = ctx.valueAsColor.withChannelValue(channel, minValue).toString(\"css\")\n      let middle = value.withChannelValue(channel, (maxValue - minValue) / 2).toString(\"css\")\n      let end = value.withChannelValue(channel, maxValue).toString(\"css\")\n      return `linear-gradient(to ${dir}, ${start}, ${middle}, ${end})`\n    }\n    case \"saturation\":\n    case \"brightness\":\n    case \"red\":\n    case \"green\":\n    case \"blue\":\n    case \"alpha\": {\n      let start = value.withChannelValue(channel, minValue).toString(\"css\")\n      let end = value.withChannelValue(channel, maxValue).toString(\"css\")\n      return `linear-gradient(to ${dir}, ${start}, ${end})`\n    }\n    default:\n      throw new Error(\"Unknown color channel: \" + channel)\n  }\n}\n","import { type Color, parseColor } from \"@zag-js/color-utils\"\nimport { createMachine } from \"@zag-js/core\"\nimport { trackPointerMove } from \"@zag-js/dom-event\"\nimport { raf } from \"@zag-js/dom-query\"\nimport { clampValue, getPercentValue, snapValueToStep } from \"@zag-js/numeric-range\"\nimport { disableTextSelection } from \"@zag-js/text-selection\"\nimport { compact } from \"@zag-js/utils\"\nimport { dom } from \"./color-picker.dom\"\nimport type { ExtendedColorChannel, MachineContext, MachineState, UserDefinedContext } from \"./color-picker.types\"\nimport { getChannelDetails } from \"./utils/get-channel-details\"\nimport { getChannelInputValue } from \"./utils/get-channel-input-value\"\n\nexport function machine(userContext: UserDefinedContext) {\n  const ctx = compact(userContext)\n\n  return createMachine<MachineContext, MachineState>(\n    {\n      id: \"color-picker\",\n      initial: \"idle\",\n      context: {\n        dir: \"ltr\",\n        activeId: null,\n        activeChannel: null,\n        activeOrientation: null,\n        value: \"#D9D9D9\",\n        ...ctx,\n        valueAsColor: parseColor(ctx.value || \"#D9D9D9\"),\n      },\n\n      computed: {\n        isRtl: (ctx) => ctx.dir === \"rtl\",\n        isInteractive: (ctx) => !(ctx.disabled || ctx.readOnly),\n      },\n\n      on: {\n        \"VALUE.SET\": {\n          actions: [\"setValue\"],\n        },\n      },\n\n      created: [\"setValueAsColor\"],\n\n      watch: {\n        value: [\"setValueAsColor\", \"syncChannelInputs\", \"invokeOnChange\"],\n      },\n\n      states: {\n        idle: {\n          on: {\n            \"EYEDROPPER.CLICK\": {\n              actions: [\"openEyeDropper\"],\n            },\n            \"AREA.POINTER_DOWN\": {\n              target: \"dragging\",\n              actions: [\"setActiveChannel\", \"setAreaColorFromPoint\", \"focusAreaThumb\"],\n            },\n            \"CHANNEL_SLIDER.POINTER_DOWN\": {\n              target: \"dragging\",\n              actions: [\"setActiveChannel\", \"setChannelColorFromPoint\", \"focusChannelThumb\"],\n            },\n            \"CHANNEL_INPUT.FOCUS\": {\n              target: \"focused\",\n              actions: [\"setActiveChannel\"],\n            },\n            \"CHANNEL_INPUT.CHANGE\": {\n              actions: [\"setChannelColorFromInput\"],\n            },\n          },\n        },\n\n        focused: {\n          on: {\n            \"AREA.POINTER_DOWN\": {\n              target: \"dragging\",\n              actions: [\"setActiveChannel\", \"setAreaColorFromPoint\", \"focusAreaThumb\"],\n            },\n            \"CHANNEL_SLIDER.POINTER_DOWN\": {\n              target: \"dragging\",\n              actions: [\"setActiveChannel\", \"setChannelColorFromPoint\", \"focusChannelThumb\"],\n            },\n            \"AREA.ARROW_LEFT\": {\n              actions: [\"decrementXChannel\"],\n            },\n            \"AREA.ARROW_RIGHT\": {\n              actions: [\"incrementXChannel\"],\n            },\n            \"AREA.ARROW_UP\": {\n              actions: [\"incrementYChannel\"],\n            },\n            \"AREA.ARROW_DOWN\": {\n              actions: [\"decrementYChannel\"],\n            },\n            \"AREA.PAGE_UP\": {\n              actions: [\"incrementXChannel\"],\n            },\n            \"AREA.PAGE_DOWN\": {\n              actions: [\"decrementXChannel\"],\n            },\n            \"CHANNEL_SLIDER.ARROW_LEFT\": {\n              actions: [\"decrementChannel\"],\n            },\n            \"CHANNEL_SLIDER.ARROW_RIGHT\": {\n              actions: [\"incrementChannel\"],\n            },\n            \"CHANNEL_SLIDER.ARROW_UP\": {\n              actions: [\"incrementChannel\"],\n            },\n            \"CHANNEL_SLIDER.ARROW_DOWN\": {\n              actions: [\"decrementChannel\"],\n            },\n            \"CHANNEL_SLIDER.PAGE_UP\": {\n              actions: [\"incrementChannel\"],\n            },\n            \"CHANNEL_SLIDER.PAGE_DOWN\": {\n              actions: [\"decrementChannel\"],\n            },\n            \"CHANNEL_SLIDER.HOME\": {\n              actions: [\"setChannelToMin\"],\n            },\n            \"CHANNEL_SLIDER.END\": {\n              actions: [\"setChannelToMax\"],\n            },\n            \"CHANNEL_INPUT.FOCUS\": {\n              actions: [\"setActiveChannel\"],\n            },\n            \"CHANNEL_INPUT.CHANGE\": {\n              actions: [\"setChannelColorFromInput\"],\n            },\n            \"CHANNEL_INPUT.BLUR\": [\n              {\n                guard: \"isTextField\",\n                target: \"idle\",\n                actions: [\"setChannelColorFromInput\"],\n              },\n              { target: \"idle\" },\n            ],\n            \"CHANNEL_SLIDER.BLUR\": {\n              target: \"idle\",\n            },\n            \"AREA.BLUR\": {\n              target: \"idle\",\n            },\n          },\n        },\n\n        dragging: {\n          exit: [\"clearActiveChannel\"],\n          activities: [\"trackPointerMove\", \"disableTextSelection\"],\n          on: {\n            \"AREA.POINTER_MOVE\": {\n              actions: [\"setAreaColorFromPoint\"],\n            },\n            \"AREA.POINTER_UP\": {\n              target: \"focused\",\n              actions: [\"invokeOnChangeEnd\"],\n            },\n            \"CHANNEL_SLIDER.POINTER_MOVE\": {\n              actions: [\"setChannelColorFromPoint\"],\n            },\n            \"CHANNEL_SLIDER.POINTER_UP\": {\n              target: \"focused\",\n              actions: [\"invokeOnChangeEnd\"],\n            },\n          },\n        },\n      },\n    },\n    {\n      guards: {\n        isTextField: (_ctx, evt) => !!evt.isTextField,\n      },\n      activities: {\n        trackPointerMove(ctx, _evt, { send }) {\n          return trackPointerMove(dom.getDoc(ctx), {\n            onPointerMove({ point }) {\n              const type = ctx.activeId === \"area\" ? \"AREA.POINTER_MOVE\" : \"CHANNEL_SLIDER.POINTER_MOVE\"\n              send({ type, point })\n            },\n            onPointerUp() {\n              const type = ctx.activeId === \"area\" ? \"AREA.POINTER_UP\" : \"CHANNEL_SLIDER.POINTER_UP\"\n              send({ type })\n            },\n          })\n        },\n        disableTextSelection(ctx) {\n          return disableTextSelection({ doc: dom.getDoc(ctx), target: dom.getContentEl(ctx) })\n        },\n      },\n      actions: {\n        openEyeDropper(ctx) {\n          const isSupported = \"EyeDropper\" in dom.getWin(ctx)\n          if (!isSupported) return\n          const win = dom.getWin(ctx) as any\n          const picker = new win.EyeDropper()\n          picker\n            .open()\n            .then(({ sRGBHex }: { sRGBHex: string }) => {\n              const format = ctx.valueAsColor.getColorSpace()\n              const color = parseColor(sRGBHex).toFormat(format)\n              setColor(ctx, color)\n              ctx.onChangeEnd?.({ value: ctx.value, valueAsColor: color })\n            })\n            .catch(() => void 0)\n        },\n        setActiveChannel(ctx, evt) {\n          ctx.activeId = evt.id\n          if (evt.channel) {\n            ctx.activeChannel = evt.channel\n          }\n          if (evt.orientation) {\n            ctx.activeOrientation = evt.orientation\n          }\n        },\n        clearActiveChannel(ctx) {\n          ctx.activeChannel = null\n          ctx.activeId = null\n          ctx.activeOrientation = null\n        },\n        setAreaColorFromPoint(ctx, evt) {\n          const { xChannel, yChannel } = evt.channel || ctx.activeChannel\n\n          const percent = dom.getAreaValueFromPoint(ctx, evt.point)\n          const { getColorFromPoint } = getChannelDetails(ctx.valueAsColor, xChannel, yChannel)\n          const color = getColorFromPoint(percent.x, percent.y)\n\n          if (!color) return\n          setColor(ctx, color)\n        },\n        setChannelColorFromPoint(ctx, evt) {\n          const channel = evt.channel || ctx.activeId\n          const percent = dom.getChannelSliderValueFromPoint(ctx, evt.point, channel)\n\n          const { minValue, maxValue, step } = ctx.valueAsColor.getChannelRange(channel)\n          const orientation = ctx.activeOrientation || \"horizontal\"\n\n          const point = orientation === \"horizontal\" ? percent.x : percent.y\n          const channelValue = getPercentValue(point, minValue, maxValue, step)\n\n          const value = snapValueToStep(channelValue - step, minValue, maxValue, step)\n          const newColor = ctx.valueAsColor.withChannelValue(channel, value)\n\n          setColor(ctx, newColor)\n        },\n        setValue(ctx, evt) {\n          setColor(ctx, evt.value)\n        },\n        setValueAsColor(ctx) {\n          try {\n            const color = parseColor(ctx.value)\n            if (color.isEqual(ctx.valueAsColor)) return\n            ctx.valueAsColor = color\n          } catch {}\n        },\n        syncChannelInputs(ctx) {\n          const inputs = dom.getChannelInputEls(ctx)\n          inputs.forEach((input) => {\n            const channel = input.getAttribute(\"data-channel\") as ExtendedColorChannel | null\n            if (!channel) return\n            const value = getChannelInputValue(ctx.valueAsColor, channel)\n            input.value = value.toString()\n          })\n        },\n        setChannelColorFromInput(ctx, evt) {\n          const { channel, isTextField, value } = evt\n          try {\n            const format = ctx.valueAsColor.getColorSpace()\n\n            const newColor = isTextField\n              ? parseColor(value).toFormat(format)\n              : ctx.valueAsColor.withChannelValue(channel, value)\n\n            setColor(ctx, newColor)\n            //\n          } catch {\n            // reset input value\n            const input = dom.getChannelInputEl(ctx, channel)\n            if (!input) return\n            input.value = getChannelInputValue(ctx.valueAsColor, channel)\n          }\n        },\n\n        incrementChannel(ctx, evt) {\n          const { minValue, maxValue, step } = ctx.valueAsColor.getChannelRange(evt.channel)\n          const channelValue = ctx.valueAsColor.getChannelValue(evt.channel)\n          const value = snapValueToStep(channelValue + evt.step, minValue, maxValue, step)\n          const newColor = ctx.valueAsColor.withChannelValue(evt.channel, clampValue(value, minValue, maxValue))\n          setColor(ctx, newColor)\n        },\n        decrementChannel(ctx, evt) {\n          const { minValue, maxValue, step } = ctx.valueAsColor.getChannelRange(evt.channel)\n          const channelValue = ctx.valueAsColor.getChannelValue(evt.channel)\n          const value = snapValueToStep(channelValue - evt.step, minValue, maxValue, step)\n          const newColor = ctx.valueAsColor.withChannelValue(evt.channel, clampValue(value, minValue, maxValue))\n          setColor(ctx, newColor)\n        },\n\n        incrementXChannel(ctx, evt) {\n          const { xChannel, yChannel } = evt.channel\n          const { incrementX } = getChannelDetails(ctx.valueAsColor, xChannel, yChannel)\n          const newColor = ctx.valueAsColor.withChannelValue(xChannel, incrementX(evt.step))\n          setColor(ctx, newColor)\n        },\n        decrementXChannel(ctx, evt) {\n          const { xChannel, yChannel } = evt.channel\n          const { decrementX } = getChannelDetails(ctx.valueAsColor, xChannel, yChannel)\n          const newColor = ctx.valueAsColor.withChannelValue(xChannel, decrementX(evt.step))\n          setColor(ctx, newColor)\n        },\n\n        incrementYChannel(ctx, evt) {\n          const { xChannel, yChannel } = evt.channel\n          const { incrementY } = getChannelDetails(ctx.valueAsColor, xChannel, yChannel)\n          const newColor = ctx.valueAsColor.withChannelValue(yChannel, incrementY(evt.step))\n          setColor(ctx, newColor)\n        },\n        decrementYChannel(ctx, evt) {\n          const { xChannel, yChannel } = evt.channel\n          const { decrementY } = getChannelDetails(ctx.valueAsColor, xChannel, yChannel)\n          const newColor = ctx.valueAsColor.withChannelValue(yChannel, decrementY(evt.step))\n          setColor(ctx, newColor)\n        },\n\n        setChannelToMax(ctx, evt) {\n          const { maxValue } = ctx.valueAsColor.getChannelRange(evt.channel)\n          const newColor = ctx.valueAsColor.withChannelValue(evt.channel, maxValue)\n          setColor(ctx, newColor)\n        },\n        setChannelToMin(ctx, evt) {\n          const { minValue } = ctx.valueAsColor.getChannelRange(evt.channel)\n          const newColor = ctx.valueAsColor.withChannelValue(evt.channel, minValue)\n          setColor(ctx, newColor)\n        },\n\n        invokeOnChangeEnd(ctx) {\n          ctx.onChangeEnd?.({ value: ctx.value, valueAsColor: ctx.valueAsColor })\n        },\n        invokeOnChange(ctx) {\n          ctx.onChange?.({ value: ctx.value, valueAsColor: ctx.valueAsColor })\n        },\n        focusAreaThumb(ctx) {\n          raf(() => {\n            dom.getAreaThumbEl(ctx)?.focus({ preventScroll: true })\n          })\n        },\n        focusChannelThumb(ctx, evt) {\n          raf(() => {\n            dom.getChannelSliderThumbEl(ctx, evt.channel)?.focus({ preventScroll: true })\n          })\n        },\n      },\n    },\n  )\n}\n\nconst setColor = (ctx: MachineContext, color: Color) => {\n  ctx.value = color.toString(\"css\")\n  ctx.valueAsColor = color\n}\n"],"mappings":"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","names":["import_color_utils","import_dom_event","import_dom_query","import_color_utils","import_dom_event","import_dom_query","import_numeric_range","ctx"]}

package/dist/index.mjs

@@ -381,38 +381,17 @@ function connect(state, send, normalize) {
   const isDragging = state.matches("dragging");
   const channels = valueAsColor.getColorChannels();
   return {
-    /**
-     * Whether the color picker is being dragged
-     */
     isDragging,
-    /**
-     * The current color value (as a string)
-     */
     value: state.context.value,
-    /**
-     * The current color value (as a Color object)
-     */
     valueAsColor,
-    /**
-     * The current color channels of the color
-     */
     channels,
-    /**
-     * Function to set the color value
-     */
     setColor(value) {
       send({ type: "VALUE.SET", value: normalizeColor(value), src: "set-color" });
     },
-    /**
-     * Function to set the color value of a specific channel
-     */
     setChannelValue(channel, value) {
       const color = valueAsColor.withChannelValue(channel, value);
       send({ type: "VALUE.SET", value: color, src: "set-channel" });
     },
-    /**
-     * Function to set the color format
-     */
     setFormat(format) {
       const value = valueAsColor.toFormat(format);
       send({ type: "VALUE.SET", value, src: "set-format" });

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/color-picker.anatomy.ts","../src/color-picker.connect.ts","../src/color-picker.dom.ts","../src/utils/get-channel-details.ts","../src/utils/get-channel-display-color.ts","../src/utils/get-channel-input-value.ts","../src/utils/generate-format-background.ts","../src/utils/get-color-area-gradient.ts","../src/utils/get-slider-background.ts","../src/color-picker.machine.ts"],"sourcesContent":["import { createAnatomy } from \"@zag-js/anatomy\"\n\nexport const anatomy = createAnatomy(\"color-picker\", [\n  \"area\",\n  \"areaThumb\",\n  \"areaGradient\",\n  \"channelSliderTrack\",\n  \"channelSliderTrackBg\",\n  \"channelSliderThumb\",\n  \"channelInput\",\n  \"swatch\",\n  \"swatchBg\",\n  \"content\",\n  \"label\",\n  \"eyeDropTrigger\",\n])\n\nexport const parts = anatomy.build()\n","import { Color, normalizeColor, type ColorChannel, type ColorFormat } from \"@zag-js/color-utils\"\nimport {\n  EventKeyMap,\n  getEventKey,\n  getEventPoint,\n  getEventStep,\n  getNativeEvent,\n  isLeftClick,\n  isModifiedEvent,\n} from \"@zag-js/dom-event\"\nimport { dataAttr } from \"@zag-js/dom-query\"\nimport { NormalizeProps, type PropTypes } from \"@zag-js/types\"\nimport { parts } from \"./color-picker.anatomy\"\nimport { dom } from \"./color-picker.dom\"\nimport {\n  ColorAreaProps,\n  ColorChannelInputProps,\n  ColorChannelProps,\n  ColorSwatchProps,\n  Send,\n  State,\n} from \"./color-picker.types\"\nimport { getChannelDetails } from \"./utils/get-channel-details\"\nimport { getChannelDisplayColor } from \"./utils/get-channel-display-color\"\nimport { getChannelInputRange, getChannelInputValue } from \"./utils/get-channel-input-value\"\nimport { getColorAreaGradient } from \"./utils/get-color-area-gradient\"\nimport { getSliderBgImage } from \"./utils/get-slider-background\"\n\nexport function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>) {\n  const valueAsColor = state.context.valueAsColor\n  const isDisabled = state.context.disabled\n  const isInteractive = state.context.isInteractive\n  const isDragging = state.matches(\"dragging\")\n\n  const channels = valueAsColor.getColorChannels()\n\n  return {\n    /**\n     * Whether the color picker is being dragged\n     */\n    isDragging,\n    /**\n     * The current color value (as a string)\n     */\n    value: state.context.value,\n    /**\n     * The current color value (as a Color object)\n     */\n    valueAsColor,\n    /**\n     * The current color channels of the color\n     */\n    channels,\n    /**\n     * Function to set the color value\n     */\n    setColor(value: string | Color) {\n      send({ type: \"VALUE.SET\", value: normalizeColor(value), src: \"set-color\" })\n    },\n    /**\n     * Function to set the color value of a specific channel\n     */\n    setChannelValue(channel: ColorChannel, value: number) {\n      const color = valueAsColor.withChannelValue(channel, value)\n      send({ type: \"VALUE.SET\", value: color, src: \"set-channel\" })\n    },\n    /**\n     * Function to set the color format\n     */\n    setFormat(format: ColorFormat) {\n      const value = valueAsColor.toFormat(format)\n      send({ type: \"VALUE.SET\", value, src: \"set-format\" })\n    },\n\n    contentProps: normalize.element({\n      ...parts.content.attrs,\n      id: dom.getContentId(state.context),\n    }),\n\n    getAreaProps(props: ColorAreaProps) {\n      const { xChannel, yChannel } = props\n      const { areaStyles } = getColorAreaGradient(state.context, xChannel, yChannel)\n\n      return normalize.element({\n        ...parts.area.attrs,\n        id: dom.getAreaId(state.context),\n        role: \"group\",\n        onPointerDown(event) {\n          if (!isInteractive) return\n\n          const evt = getNativeEvent(event)\n          if (!isLeftClick(evt) || isModifiedEvent(evt)) return\n\n          const point = getEventPoint(evt)\n          const channel = { xChannel, yChannel }\n\n          send({ type: \"AREA.POINTER_DOWN\", point, channel, id: \"area\" })\n        },\n        style: {\n          position: \"relative\",\n          touchAction: \"none\",\n          forcedColorAdjust: \"none\",\n          ...areaStyles,\n        },\n      })\n    },\n\n    getAreaGradientProps(props: ColorAreaProps) {\n      const { xChannel, yChannel } = props\n      const { areaGradientStyles } = getColorAreaGradient(state.context, xChannel, yChannel)\n\n      return normalize.element({\n        ...parts.areaGradient.attrs,\n        id: dom.getAreaGradientId(state.context),\n        style: {\n          position: \"relative\",\n          touchAction: \"none\",\n          forcedColorAdjust: \"none\",\n          ...areaGradientStyles,\n        },\n      })\n    },\n\n    getAreaThumbProps(props: ColorAreaProps) {\n      const { xChannel, yChannel } = props\n      const { getThumbPosition } = getChannelDetails(valueAsColor, xChannel, yChannel)\n      const { x, y } = getThumbPosition()\n\n      const channel = { xChannel, yChannel }\n\n      return normalize.element({\n        ...parts.areaThumb.attrs,\n        id: dom.getAreaThumbId(state.context),\n        tabIndex: isDisabled ? undefined : 0,\n        \"data-disabled\": dataAttr(isDisabled),\n        role: \"presentation\",\n        style: {\n          position: \"absolute\",\n          left: `${x * 100}%`,\n          top: `${y * 100}%`,\n          transform: \"translate(-50%, -50%)\",\n          touchAction: \"none\",\n          forcedColorAdjust: \"none\",\n          background: valueAsColor.withChannelValue(\"alpha\", 1).toString(\"css\"),\n        },\n        onBlur() {\n          send(\"AREA.BLUR\")\n        },\n        onKeyDown(event) {\n          if (!isInteractive) return\n\n          const step = getEventStep(event)\n\n          const keyMap: EventKeyMap = {\n            ArrowUp() {\n              send({ type: \"AREA.ARROW_UP\", channel, step })\n            },\n            ArrowDown() {\n              send({ type: \"AREA.ARROW_DOWN\", channel, step })\n            },\n            ArrowLeft() {\n              send({ type: \"AREA.ARROW_LEFT\", channel, step })\n            },\n            ArrowRight() {\n              send({ type: \"AREA.ARROW_RIGHT\", channel, step })\n            },\n            PageUp() {\n              send({ type: \"AREA.PAGE_UP\", channel, step })\n            },\n            PageDown() {\n              send({ type: \"AREA.PAGE_DOWN\", channel, step })\n            },\n          }\n\n          const exec = keyMap[getEventKey(event, state.context)]\n\n          if (exec) {\n            exec(event)\n            event.preventDefault()\n          }\n        },\n      })\n    },\n\n    getChannelSliderTrackProps(props: ColorChannelProps) {\n      const { orientation = \"horizontal\", channel } = props\n\n      return normalize.element({\n        ...parts.channelSliderTrack.attrs,\n        id: dom.getChannelSliderTrackId(state.context, channel),\n        role: \"group\",\n        \"data-channel\": channel,\n        \"data-orientation\": orientation,\n        onPointerDown(event) {\n          if (!isInteractive) return\n\n          const evt = getNativeEvent(event)\n          if (!isLeftClick(evt) || isModifiedEvent(evt)) return\n\n          const point = getEventPoint(evt)\n          send({ type: \"CHANNEL_SLIDER.POINTER_DOWN\", channel, point, id: channel, orientation })\n        },\n        style: {\n          position: \"relative\",\n          touchAction: \"none\",\n          forcedColorAdjust: \"none\",\n          backgroundImage: getSliderBgImage(state.context, { orientation, channel }),\n        },\n      })\n    },\n\n    getChannelSliderBackgroundProps(props: ColorChannelProps) {\n      const { orientation = \"horizontal\", channel } = props\n      return normalize.element({\n        ...parts.channelSliderTrackBg.attrs,\n        \"data-orientation\": orientation,\n        \"data-channel\": channel,\n        style: {\n          position: \"absolute\",\n          backgroundColor: \"#fff\",\n          backgroundImage: [\n            \"linear-gradient(-45deg,#0000 75.5%,#bcbcbc 75.5%)\",\n            \"linear-gradient(45deg,#0000 75.5%,#bcbcbc 75.5%)\",\n            \"linear-gradient(-45deg,#bcbcbc 25.5%,#0000 25.5%)\",\n            \"linear-gradient(45deg,#bcbcbc 25.5%,#0000 25.5%)\",\n          ].join(\",\"),\n          backgroundSize: \"16px 16px\",\n          backgroundPosition: \"-2px -2px,-2px 6px,6px -10px,-10px -2px\",\n          inset: 0,\n          zIndex: -1,\n        },\n      })\n    },\n\n    getChannelSliderThumbProps(props: ColorChannelProps) {\n      const { orientation = \"horizontal\", channel } = props\n      const { minValue, maxValue, step: stepValue } = valueAsColor.getChannelRange(channel)\n      const channelValue = valueAsColor.getChannelValue(channel)\n\n      const offset = (channelValue - minValue) / (maxValue - minValue)\n\n      const placementStyles =\n        orientation === \"horizontal\"\n          ? { left: `${offset * 100}%`, top: \"50%\" }\n          : { top: `${offset * 100}%`, left: \"50%\" }\n\n      return normalize.element({\n        ...parts.channelSliderThumb.attrs,\n        id: dom.getChannelSliderThumbId(state.context, channel),\n        role: \"slider\",\n        \"aria-label\": channel,\n        tabIndex: isDisabled ? undefined : 0,\n        \"data-channel\": channel,\n        \"data-disabled\": dataAttr(isDisabled),\n        \"data-orientation\": orientation,\n        \"aria-disabled\": dataAttr(isDisabled),\n        \"aria-orientation\": orientation,\n        \"aria-valuemax\": maxValue,\n        \"aria-valuemin\": minValue,\n        \"aria-valuenow\": channelValue,\n        style: {\n          forcedColorAdjust: \"none\",\n          position: \"absolute\",\n          background: getChannelDisplayColor(valueAsColor, channel).toString(\"css\"),\n          ...placementStyles,\n        },\n        onFocus() {\n          if (!isInteractive) return\n          send({ type: \"CHANNEL_SLIDER.FOCUS\", channel })\n        },\n        onBlur() {\n          if (!isInteractive) return\n          send({ type: \"CHANNEL_SLIDER.BLUR\", channel })\n        },\n        onKeyDown(event) {\n          if (!isInteractive) return\n          const step = getEventStep(event) * stepValue\n\n          const keyMap: EventKeyMap = {\n            ArrowUp() {\n              send({ type: \"CHANNEL_SLIDER.ARROW_UP\", channel, step })\n            },\n            ArrowDown() {\n              send({ type: \"CHANNEL_SLIDER.ARROW_DOWN\", channel, step })\n            },\n            ArrowLeft() {\n              send({ type: \"CHANNEL_SLIDER.ARROW_LEFT\", channel, step })\n            },\n            ArrowRight() {\n              send({ type: \"CHANNEL_SLIDER.ARROW_RIGHT\", channel, step })\n            },\n            PageUp() {\n              send({ type: \"CHANNEL_SLIDER.PAGE_UP\", channel })\n            },\n            PageDown() {\n              send({ type: \"CHANNEL_SLIDER.PAGE_DOWN\", channel })\n            },\n            Home() {\n              send({ type: \"CHANNEL_SLIDER.HOME\", channel })\n            },\n            End() {\n              send({ type: \"CHANNEL_SLIDER.END\", channel })\n            },\n          }\n\n          const exec = keyMap[getEventKey(event, state.context)]\n\n          if (exec) {\n            exec(event)\n            event.preventDefault()\n          }\n        },\n      })\n    },\n\n    getChannelInputProps(props: ColorChannelInputProps) {\n      const { channel } = props\n      const isTextField = channel === \"hex\" || channel === \"css\"\n      const range = getChannelInputRange(valueAsColor, channel)\n\n      return normalize.input({\n        ...parts.channelInput.attrs,\n        type: isTextField ? \"text\" : \"number\",\n        \"data-channel\": channel,\n        \"aria-label\": channel,\n        disabled: isDisabled,\n        \"data-disabled\": dataAttr(isDisabled),\n        readOnly: state.context.readOnly,\n        id: dom.getChannelInputId(state.context, channel),\n        defaultValue: getChannelInputValue(valueAsColor, channel),\n        min: range?.minValue,\n        max: range?.maxValue,\n        step: range?.step,\n        onFocus() {\n          send({ type: \"CHANNEL_INPUT.FOCUS\", channel })\n        },\n        onChange(event) {\n          if (isTextField) return\n          const value = event.currentTarget.value\n          send({ type: \"CHANNEL_INPUT.CHANGE\", channel, value, isTextField })\n        },\n        onBlur(event) {\n          const value = event.currentTarget.value\n          send({ type: \"CHANNEL_INPUT.BLUR\", channel, value, isTextField })\n        },\n        onKeyDown(event) {\n          if (!isTextField) return\n          if (event.key === \"Enter\") {\n            const value = event.currentTarget.value\n            send({ type: \"CHANNEL_INPUT.CHANGE\", channel, value, isTextField })\n          }\n        },\n        style: {\n          appearance: \"none\",\n          WebkitAppearance: \"none\",\n          MozAppearance: \"textfield\",\n        },\n      })\n    },\n\n    eyeDropperTriggerProps: normalize.button({\n      ...parts.eyeDropTrigger.attrs,\n      onClick() {\n        send(\"EYEDROPPER.CLICK\")\n      },\n    }),\n\n    getSwatchBackgroundProps(props: ColorSwatchProps) {\n      const { value } = props\n      const alpha = normalizeColor(value).getChannelValue(\"alpha\")\n      return normalize.element({\n        ...parts.swatchBg.attrs,\n        \"data-alpha\": alpha,\n        style: {\n          width: \"100%\",\n          height: \"100%\",\n          background: \"#fff\",\n          backgroundImage: [\n            \"linear-gradient(-45deg,#0000 75.5%,#bcbcbc 75.5%)\",\n            \"linear-gradient(45deg,#0000 75.5%,#bcbcbc 75.5%)\",\n            \"linear-gradient(-45deg,#bcbcbc 25.5%,#0000 25.5%)\",\n            \"linear-gradient(45deg,#bcbcbc 25.5%,#0000 25.5%)\",\n          ].join(\",\"),\n          backgroundPosition: \"-2px -2px,-2px 6px,6px -10px,-10px -2px\",\n          backgroundSize: \"16px 16px\",\n          position: \"absolute\",\n          inset: \"0px\",\n          zIndex: -1,\n        },\n      })\n    },\n\n    getSwatchProps(props: ColorSwatchProps) {\n      const { value, readOnly } = props\n      const color = normalizeColor(value).toFormat(valueAsColor.getColorSpace())\n      return normalize.element({\n        ...parts.swatch.attrs,\n        onClick() {\n          if (readOnly) return\n          send({ type: \"VALUE.SET\", value: color })\n        },\n        style: {\n          position: \"relative\",\n          background: color.toString(\"css\"),\n        },\n      })\n    },\n  }\n}\n","import { type ColorChannel } from \"@zag-js/color-utils\"\nimport { getRelativePoint, type Point } from \"@zag-js/dom-event\"\nimport { createScope, queryAll } from \"@zag-js/dom-query\"\nimport type { MachineContext as Ctx } from \"./color-picker.types\"\n\nexport const dom = createScope({\n  getContentId: (ctx: Ctx) => ctx.ids?.content ?? `color-picker:${ctx.id}:content`,\n  getAreaId: (ctx: Ctx) => ctx.ids?.area ?? `color-picker:${ctx.id}:area`,\n  getAreaGradientId: (ctx: Ctx) => ctx.ids?.areaGradient ?? `color-picker:${ctx.id}:area-gradient`,\n  getAreaThumbId: (ctx: Ctx) => ctx.ids?.areaThumb ?? `color-picker:${ctx.id}:area-thumb`,\n  getChannelSliderTrackId: (ctx: Ctx, channel: ColorChannel) =>\n    ctx.ids?.channelSliderTrack?.(channel) ?? `color-picker:${ctx.id}:slider-track:${channel}`,\n  getChannelInputId: (ctx: Ctx, channel: string) =>\n    ctx.ids?.channelInput?.(channel) ?? `color-picker:${ctx.id}:input:${channel}`,\n  getChannelSliderThumbId: (ctx: Ctx, channel: ColorChannel) =>\n    ctx.ids?.channelSliderThumb?.(channel) ?? `color-picker:${ctx.id}:slider-thumb:${channel}`,\n\n  getContentEl: (ctx: Ctx) => dom.queryById(ctx, dom.getContentId(ctx)),\n  getAreaThumbEl: (ctx: Ctx) => dom.queryById(ctx, dom.getAreaThumbId(ctx)),\n  getChannelSliderThumbEl: (ctx: Ctx, channel: ColorChannel) =>\n    dom.queryById(ctx, dom.getChannelSliderThumbId(ctx, channel)),\n  getChannelInputEl: (ctx: Ctx, channel: string) =>\n    dom.queryById<HTMLInputElement>(ctx, dom.getChannelInputId(ctx, channel)),\n\n  getAreaEl: (ctx: Ctx) => dom.queryById(ctx, dom.getAreaId(ctx)),\n  getAreaValueFromPoint(ctx: Ctx, point: Point) {\n    const { percent } = getRelativePoint(point, dom.getAreaEl(ctx))\n    return percent\n  },\n\n  getChannelSliderTrackEl: (ctx: Ctx, channel: ColorChannel) => {\n    return dom.queryById(ctx, dom.getChannelSliderTrackId(ctx, channel))\n  },\n  getChannelSliderValueFromPoint(ctx: Ctx, point: Point, channel: ColorChannel) {\n    const { percent } = getRelativePoint(point, dom.getChannelSliderTrackEl(ctx, channel))\n    return percent\n  },\n  getChannelInputEls: (ctx: Ctx) => {\n    return queryAll<HTMLInputElement>(dom.getContentEl(ctx), \"input[data-channel]\")\n  },\n})\n","import { Color, type ColorChannel } from \"@zag-js/color-utils\"\nimport { getPercentValue, snapValueToStep } from \"@zag-js/numeric-range\"\n\nexport function getChannelDetails(color: Color, xChannel: ColorChannel, yChannel: ColorChannel) {\n  const channels = color.getColorSpaceAxes({ xChannel, yChannel })\n\n  const xChannelRange = color.getChannelRange(channels.xChannel)\n  const yChannelRange = color.getChannelRange(channels.yChannel)\n\n  const { minValue: minValueX, maxValue: maxValueX, step: stepX, pageSize: pageSizeX } = xChannelRange\n  const { minValue: minValueY, maxValue: maxValueY, step: stepY, pageSize: pageSizeY } = yChannelRange\n\n  const xValue = color.getChannelValue(channels.xChannel)\n  const yValue = color.getChannelValue(channels.yChannel)\n\n  return {\n    channels,\n    xChannelStep: stepX,\n    yChannelStep: stepY,\n    xChannelPageStep: pageSizeX,\n    yChannelPageStep: pageSizeY,\n    xValue,\n    yValue,\n    getThumbPosition() {\n      let x = (xValue - minValueX) / (maxValueX - minValueX)\n      let y = 1 - (yValue - minValueY) / (maxValueY - minValueY)\n      return { x, y }\n    },\n    incrementX(stepSize: number) {\n      return xValue + stepSize > maxValueX ? maxValueX : snapValueToStep(xValue + stepSize, minValueX, maxValueX, stepX)\n    },\n    incrementY(stepSize: number) {\n      return yValue + stepSize > maxValueY ? maxValueY : snapValueToStep(yValue + stepSize, minValueY, maxValueY, stepY)\n    },\n    decrementX(stepSize: number) {\n      return snapValueToStep(xValue - stepSize, minValueX, maxValueX, stepX)\n    },\n    decrementY(stepSize: number) {\n      return snapValueToStep(yValue - stepSize, minValueY, maxValueY, stepY)\n    },\n    getColorFromPoint(x: number, y: number) {\n      let newXValue = getPercentValue(x, minValueX, maxValueX, stepX)\n      let newYValue = getPercentValue(1 - y, minValueY, maxValueY, stepY)\n\n      let newColor: Color | undefined\n\n      if (newXValue !== xValue) {\n        newXValue = snapValueToStep(newXValue, minValueX, maxValueX, stepX)\n        newColor = color.withChannelValue(channels.xChannel, newXValue)\n      }\n\n      if (newYValue !== yValue) {\n        newYValue = snapValueToStep(newYValue, minValueY, maxValueY, stepY)\n        newColor = (newColor || color).withChannelValue(channels.yChannel, newYValue)\n      }\n\n      return newColor\n    },\n  }\n}\n","import { Color, parseColor, type ColorChannel } from \"@zag-js/color-utils\"\n\nexport function getChannelDisplayColor(color: Color, channel: ColorChannel) {\n  switch (channel) {\n    case \"hue\":\n      return parseColor(`hsl(${color.getChannelValue(\"hue\")}, 100%, 50%)`)\n    case \"lightness\":\n    case \"brightness\":\n    case \"saturation\":\n    case \"red\":\n    case \"green\":\n    case \"blue\":\n      return color.withChannelValue(\"alpha\", 1)\n    case \"alpha\": {\n      return color\n    }\n    default:\n      throw new Error(\"Unknown color channel: \" + channel)\n  }\n}\n","import { Color } from \"@zag-js/color-utils\"\nimport { ExtendedColorChannel } from \"../color-picker.types\"\n\nexport function getChannelInputValue(color: Color, channel: ExtendedColorChannel) {\n  switch (channel) {\n    case \"hex\":\n      return color.toString(\"hex\")\n    case \"css\":\n      return color.toString(\"css\")\n    default:\n      return color.getChannelValue(channel).toString()\n  }\n}\n\nexport function getChannelInputRange(color: Color, channel: ExtendedColorChannel) {\n  switch (channel) {\n    case \"hex\":\n    case \"css\":\n      return undefined\n    default:\n      return color.getChannelRange(channel)\n  }\n}\n","export const generateRGB_R = (orientation: [string, string], dir: boolean, zValue: number) => {\n  const maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`\n  const result = {\n    areaStyles: {\n      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(${zValue},0,0),rgb(${zValue},255,0))`,\n    },\n    areaGradientStyles: {\n      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(${zValue},0,255),rgb(${zValue},255,255))`,\n      WebkitMaskImage: maskImage,\n      maskImage,\n    },\n  }\n  return result\n}\n\nexport const generateRGB_G = (orientation: [string, string], dir: boolean, zValue: number) => {\n  const maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`\n  const result = {\n    areaStyles: {\n      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,${zValue},0),rgb(255,${zValue},0))`,\n    },\n    areaGradientStyles: {\n      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,${zValue},255),rgb(255,${zValue},255))`,\n      WebkitMaskImage: maskImage,\n      maskImage,\n    },\n  }\n  return result\n}\n\nexport const generateRGB_B = (orientation: [string, string], dir: boolean, zValue: number) => {\n  const maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`\n  const result = {\n    areaStyles: {\n      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,0,${zValue}),rgb(255,0,${zValue}))`,\n    },\n    areaGradientStyles: {\n      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,255,${zValue}),rgb(255,255,${zValue}))`,\n      WebkitMaskImage: maskImage,\n      maskImage,\n    },\n  }\n  return result\n}\n\nexport const generateHSL_H = (orientation: [string, string], dir: boolean, zValue: number) => {\n  const result = {\n    areaStyles: {},\n    areaGradientStyles: {\n      background: [\n        `linear-gradient(to ${\n          orientation[Number(dir)]\n        }, hsla(0,0%,0%,1) 0%, hsla(0,0%,0%,0) 50%, hsla(0,0%,100%,0) 50%, hsla(0,0%,100%,1) 100%)`,\n        `linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,50%),hsla(0,0%,50%,0))`,\n        `hsl(${zValue}, 100%, 50%)`,\n      ].join(\",\"),\n    },\n  }\n  return result\n}\n\nexport const generateHSL_S = (orientation: [string, string], dir: boolean, alphaValue: number) => {\n  const result = {\n    areaStyles: {},\n    areaGradientStyles: {\n      background: [\n        `linear-gradient(to ${\n          orientation[Number(!dir)]\n        }, hsla(0,0%,0%,${alphaValue}) 0%, hsla(0,0%,0%,0) 50%, hsla(0,0%,100%,0) 50%, hsla(0,0%,100%,${alphaValue}) 100%)`,\n        `linear-gradient(to ${\n          orientation[Number(dir)]\n        },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}))`,\n        \"hsl(0, 0%, 50%)\",\n      ].join(\",\"),\n    },\n  }\n  return result\n}\n\nexport const generateHSL_L = (orientation: [string, string], dir: boolean, zValue: number) => {\n  const result = {\n    areaStyles: {},\n    areaGradientStyles: {\n      backgroundImage: [\n        `linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,${zValue}%),hsla(0,0%,${zValue}%,0))`,\n        `linear-gradient(to ${\n          orientation[Number(dir)]\n        },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}%))`,\n      ].join(\",\"),\n    },\n  }\n  return result\n}\n\nexport const generateHSB_H = (orientation: [string, string], dir: boolean, zValue: number) => {\n  const result = {\n    areaStyles: {},\n    areaGradientStyles: {\n      background: [\n        `linear-gradient(to ${orientation[Number(dir)]},hsl(0,0%,0%),hsla(0,0%,0%,0))`,\n        `linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,100%),hsla(0,0%,100%,0))`,\n        `hsl(${zValue}, 100%, 50%)`,\n      ].join(\",\"),\n    },\n  }\n  return result\n}\n\nexport const generateHSB_S = (orientation: [string, string], dir: boolean, alphaValue: number) => {\n  const result = {\n    areaStyles: {},\n    areaGradientStyles: {\n      background: [\n        `linear-gradient(to ${orientation[Number(!dir)]},hsla(0,0%,0%,${alphaValue}),hsla(0,0%,0%,0))`,\n        `linear-gradient(to ${\n          orientation[Number(dir)]\n        },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}))`,\n        `linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,0%),hsl(0,0%,100%))`,\n      ].join(\",\"),\n    },\n  }\n  return result\n}\n\nexport const generateHSB_B = (orientation: [string, string], dir: boolean, alphaValue: number) => {\n  const result = {\n    areaStyles: {},\n    areaGradientStyles: {\n      background: [\n        `linear-gradient(to ${orientation[Number(!dir)]},hsla(0,0%,100%,${alphaValue}),hsla(0,0%,100%,0))`,\n        `linear-gradient(to ${\n          orientation[Number(dir)]\n        },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}))`,\n        \"#000\",\n      ].join(\",\"),\n    },\n  }\n  return result\n}\n","import { type ColorChannel } from \"@zag-js/color-utils\"\nimport { Style } from \"@zag-js/types\"\nimport { MachineContext } from \"../color-picker.types\"\nimport {\n  generateHSB_B,\n  generateHSB_H,\n  generateHSB_S,\n  generateHSL_H,\n  generateHSL_L,\n  generateHSL_S,\n  generateRGB_B,\n  generateRGB_G,\n  generateRGB_R,\n} from \"./generate-format-background\"\n\nexport function getColorAreaGradient(ctx: MachineContext, xChannel: ColorChannel, yChannel: ColorChannel) {\n  const value = ctx.valueAsColor\n\n  const { zChannel } = value.getColorSpaceAxes({ xChannel, yChannel })\n  const zValue = value.getChannelValue(zChannel)\n\n  const { minValue: zMin, maxValue: zMax } = value.getChannelRange(zChannel)\n  const orientation: [string, string] = [\"top\", ctx.dir === \"rtl\" ? \"left\" : \"right\"]\n\n  let dir = false\n  let background = { areaStyles: {} as Style, areaGradientStyles: {} as Style }\n\n  let alphaValue = (zValue - zMin) / (zMax - zMin)\n  let isHSL = value.getColorSpace() === \"hsl\"\n\n  switch (zChannel) {\n    case \"red\": {\n      dir = xChannel === \"green\"\n      background = generateRGB_R(orientation, dir, zValue)\n      break\n    }\n\n    case \"green\": {\n      dir = xChannel === \"red\"\n      background = generateRGB_G(orientation, dir, zValue)\n      break\n    }\n\n    case \"blue\": {\n      dir = xChannel === \"red\"\n      background = generateRGB_B(orientation, dir, zValue)\n      break\n    }\n\n    case \"hue\": {\n      dir = xChannel !== \"saturation\"\n      if (isHSL) {\n        background = generateHSL_H(orientation, dir, zValue)\n      } else {\n        background = generateHSB_H(orientation, dir, zValue)\n      }\n      break\n    }\n\n    case \"saturation\": {\n      dir = xChannel === \"hue\"\n      if (isHSL) {\n        background = generateHSL_S(orientation, dir, alphaValue)\n      } else {\n        background = generateHSB_S(orientation, dir, alphaValue)\n      }\n      break\n    }\n\n    case \"brightness\": {\n      dir = xChannel === \"hue\"\n      background = generateHSB_B(orientation, dir, alphaValue)\n      break\n    }\n\n    case \"lightness\": {\n      dir = xChannel === \"hue\"\n      background = generateHSL_L(orientation, dir, zValue)\n      break\n    }\n  }\n\n  return background\n}\n","import { ColorChannelProps, MachineContext } from \"../color-picker.types\"\n\nfunction getSliderBgDirection(orientation: \"vertical\" | \"horizontal\", dir: \"ltr\" | \"rtl\") {\n  if (orientation === \"vertical\") {\n    return \"top\"\n  } else if (dir === \"ltr\") {\n    return \"right\"\n  } else {\n    return \"left\"\n  }\n}\n\nexport const getSliderBgImage = (ctx: MachineContext, props: Required<ColorChannelProps>) => {\n  const { channel } = props\n\n  const dir = getSliderBgDirection(props.orientation, ctx.dir!)\n  const value = ctx.valueAsColor\n\n  const { minValue, maxValue } = ctx.valueAsColor.getChannelRange(channel)\n\n  switch (channel) {\n    case \"hue\":\n      return `linear-gradient(to ${dir}, 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%)`\n    case \"lightness\": {\n      let start = ctx.valueAsColor.withChannelValue(channel, minValue).toString(\"css\")\n      let middle = value.withChannelValue(channel, (maxValue - minValue) / 2).toString(\"css\")\n      let end = value.withChannelValue(channel, maxValue).toString(\"css\")\n      return `linear-gradient(to ${dir}, ${start}, ${middle}, ${end})`\n    }\n    case \"saturation\":\n    case \"brightness\":\n    case \"red\":\n    case \"green\":\n    case \"blue\":\n    case \"alpha\": {\n      let start = value.withChannelValue(channel, minValue).toString(\"css\")\n      let end = value.withChannelValue(channel, maxValue).toString(\"css\")\n      return `linear-gradient(to ${dir}, ${start}, ${end})`\n    }\n    default:\n      throw new Error(\"Unknown color channel: \" + channel)\n  }\n}\n","import { Color, parseColor } from \"@zag-js/color-utils\"\nimport { createMachine } from \"@zag-js/core\"\nimport { trackPointerMove } from \"@zag-js/dom-event\"\nimport { raf } from \"@zag-js/dom-query\"\nimport { clampValue, getPercentValue, snapValueToStep } from \"@zag-js/numeric-range\"\nimport { disableTextSelection } from \"@zag-js/text-selection\"\nimport { compact } from \"@zag-js/utils\"\nimport { dom } from \"./color-picker.dom\"\nimport { ExtendedColorChannel, MachineContext, MachineState, UserDefinedContext } from \"./color-picker.types\"\nimport { getChannelDetails } from \"./utils/get-channel-details\"\nimport { getChannelInputValue } from \"./utils/get-channel-input-value\"\n\nexport function machine(userContext: UserDefinedContext) {\n  const ctx = compact(userContext)\n\n  return createMachine<MachineContext, MachineState>(\n    {\n      id: \"color-picker\",\n      initial: \"idle\",\n      context: {\n        dir: \"ltr\",\n        activeId: null,\n        activeChannel: null,\n        activeOrientation: null,\n        value: \"#D9D9D9\",\n        ...ctx,\n        valueAsColor: parseColor(ctx.value || \"#D9D9D9\"),\n      },\n\n      computed: {\n        isRtl: (ctx) => ctx.dir === \"rtl\",\n        isInteractive: (ctx) => !(ctx.disabled || ctx.readOnly),\n      },\n\n      on: {\n        \"VALUE.SET\": {\n          actions: [\"setValue\"],\n        },\n      },\n\n      created: [\"setValueAsColor\"],\n\n      watch: {\n        value: [\"setValueAsColor\", \"syncChannelInputs\", \"invokeOnChange\"],\n      },\n\n      states: {\n        idle: {\n          on: {\n            \"EYEDROPPER.CLICK\": {\n              actions: [\"openEyeDropper\"],\n            },\n            \"AREA.POINTER_DOWN\": {\n              target: \"dragging\",\n              actions: [\"setActiveChannel\", \"setAreaColorFromPoint\", \"focusAreaThumb\"],\n            },\n            \"CHANNEL_SLIDER.POINTER_DOWN\": {\n              target: \"dragging\",\n              actions: [\"setActiveChannel\", \"setChannelColorFromPoint\", \"focusChannelThumb\"],\n            },\n            \"CHANNEL_INPUT.FOCUS\": {\n              target: \"focused\",\n              actions: [\"setActiveChannel\"],\n            },\n            \"CHANNEL_INPUT.CHANGE\": {\n              actions: [\"setChannelColorFromInput\"],\n            },\n          },\n        },\n\n        focused: {\n          on: {\n            \"AREA.POINTER_DOWN\": {\n              target: \"dragging\",\n              actions: [\"setActiveChannel\", \"setAreaColorFromPoint\", \"focusAreaThumb\"],\n            },\n            \"CHANNEL_SLIDER.POINTER_DOWN\": {\n              target: \"dragging\",\n              actions: [\"setActiveChannel\", \"setChannelColorFromPoint\", \"focusChannelThumb\"],\n            },\n            \"AREA.ARROW_LEFT\": {\n              actions: [\"decrementXChannel\"],\n            },\n            \"AREA.ARROW_RIGHT\": {\n              actions: [\"incrementXChannel\"],\n            },\n            \"AREA.ARROW_UP\": {\n              actions: [\"incrementYChannel\"],\n            },\n            \"AREA.ARROW_DOWN\": {\n              actions: [\"decrementYChannel\"],\n            },\n            \"AREA.PAGE_UP\": {\n              actions: [\"incrementXChannel\"],\n            },\n            \"AREA.PAGE_DOWN\": {\n              actions: [\"decrementXChannel\"],\n            },\n            \"CHANNEL_SLIDER.ARROW_LEFT\": {\n              actions: [\"decrementChannel\"],\n            },\n            \"CHANNEL_SLIDER.ARROW_RIGHT\": {\n              actions: [\"incrementChannel\"],\n            },\n            \"CHANNEL_SLIDER.ARROW_UP\": {\n              actions: [\"incrementChannel\"],\n            },\n            \"CHANNEL_SLIDER.ARROW_DOWN\": {\n              actions: [\"decrementChannel\"],\n            },\n            \"CHANNEL_SLIDER.PAGE_UP\": {\n              actions: [\"incrementChannel\"],\n            },\n            \"CHANNEL_SLIDER.PAGE_DOWN\": {\n              actions: [\"decrementChannel\"],\n            },\n            \"CHANNEL_SLIDER.HOME\": {\n              actions: [\"setChannelToMin\"],\n            },\n            \"CHANNEL_SLIDER.END\": {\n              actions: [\"setChannelToMax\"],\n            },\n            \"CHANNEL_INPUT.FOCUS\": {\n              actions: [\"setActiveChannel\"],\n            },\n            \"CHANNEL_INPUT.CHANGE\": {\n              actions: [\"setChannelColorFromInput\"],\n            },\n            \"CHANNEL_INPUT.BLUR\": [\n              {\n                guard: \"isTextField\",\n                target: \"idle\",\n                actions: [\"setChannelColorFromInput\"],\n              },\n              { target: \"idle\" },\n            ],\n            \"CHANNEL_SLIDER.BLUR\": {\n              target: \"idle\",\n            },\n            \"AREA.BLUR\": {\n              target: \"idle\",\n            },\n          },\n        },\n\n        dragging: {\n          exit: [\"clearActiveChannel\"],\n          activities: [\"trackPointerMove\", \"disableTextSelection\"],\n          on: {\n            \"AREA.POINTER_MOVE\": {\n              actions: [\"setAreaColorFromPoint\"],\n            },\n            \"AREA.POINTER_UP\": {\n              target: \"focused\",\n              actions: [\"invokeOnChangeEnd\"],\n            },\n            \"CHANNEL_SLIDER.POINTER_MOVE\": {\n              actions: [\"setChannelColorFromPoint\"],\n            },\n            \"CHANNEL_SLIDER.POINTER_UP\": {\n              target: \"focused\",\n              actions: [\"invokeOnChangeEnd\"],\n            },\n          },\n        },\n      },\n    },\n    {\n      guards: {\n        isTextField: (_ctx, evt) => !!evt.isTextField,\n      },\n      activities: {\n        trackPointerMove(ctx, _evt, { send }) {\n          return trackPointerMove(dom.getDoc(ctx), {\n            onPointerMove({ point }) {\n              const type = ctx.activeId === \"area\" ? \"AREA.POINTER_MOVE\" : \"CHANNEL_SLIDER.POINTER_MOVE\"\n              send({ type, point })\n            },\n            onPointerUp() {\n              const type = ctx.activeId === \"area\" ? \"AREA.POINTER_UP\" : \"CHANNEL_SLIDER.POINTER_UP\"\n              send({ type })\n            },\n          })\n        },\n        disableTextSelection(ctx) {\n          return disableTextSelection({ doc: dom.getDoc(ctx), target: dom.getContentEl(ctx) })\n        },\n      },\n      actions: {\n        openEyeDropper(ctx) {\n          const isSupported = \"EyeDropper\" in dom.getWin(ctx)\n          if (!isSupported) return\n          const win = dom.getWin(ctx) as any\n          const picker = new win.EyeDropper()\n          picker\n            .open()\n            .then(({ sRGBHex }: { sRGBHex: string }) => {\n              const format = ctx.valueAsColor.getColorSpace()\n              const color = parseColor(sRGBHex).toFormat(format)\n              setColor(ctx, color)\n              ctx.onChangeEnd?.({ value: ctx.value, valueAsColor: color })\n            })\n            .catch(() => void 0)\n        },\n        setActiveChannel(ctx, evt) {\n          ctx.activeId = evt.id\n          if (evt.channel) {\n            ctx.activeChannel = evt.channel\n          }\n          if (evt.orientation) {\n            ctx.activeOrientation = evt.orientation\n          }\n        },\n        clearActiveChannel(ctx) {\n          ctx.activeChannel = null\n          ctx.activeId = null\n          ctx.activeOrientation = null\n        },\n        setAreaColorFromPoint(ctx, evt) {\n          const { xChannel, yChannel } = evt.channel || ctx.activeChannel\n\n          const percent = dom.getAreaValueFromPoint(ctx, evt.point)\n          const { getColorFromPoint } = getChannelDetails(ctx.valueAsColor, xChannel, yChannel)\n          const color = getColorFromPoint(percent.x, percent.y)\n\n          if (!color) return\n          setColor(ctx, color)\n        },\n        setChannelColorFromPoint(ctx, evt) {\n          const channel = evt.channel || ctx.activeId\n          const percent = dom.getChannelSliderValueFromPoint(ctx, evt.point, channel)\n\n          const { minValue, maxValue, step } = ctx.valueAsColor.getChannelRange(channel)\n          const orientation = ctx.activeOrientation || \"horizontal\"\n\n          const point = orientation === \"horizontal\" ? percent.x : percent.y\n          const channelValue = getPercentValue(point, minValue, maxValue, step)\n\n          const value = snapValueToStep(channelValue - step, minValue, maxValue, step)\n          const newColor = ctx.valueAsColor.withChannelValue(channel, value)\n\n          setColor(ctx, newColor)\n        },\n        setValue(ctx, evt) {\n          setColor(ctx, evt.value)\n        },\n        setValueAsColor(ctx) {\n          try {\n            const color = parseColor(ctx.value)\n            if (color.isEqual(ctx.valueAsColor)) return\n            ctx.valueAsColor = color\n          } catch {}\n        },\n        syncChannelInputs(ctx) {\n          const inputs = dom.getChannelInputEls(ctx)\n          inputs.forEach((input) => {\n            const channel = input.getAttribute(\"data-channel\") as ExtendedColorChannel | null\n            if (!channel) return\n            const value = getChannelInputValue(ctx.valueAsColor, channel)\n            input.value = value.toString()\n          })\n        },\n        setChannelColorFromInput(ctx, evt) {\n          const { channel, isTextField, value } = evt\n          try {\n            const format = ctx.valueAsColor.getColorSpace()\n\n            const newColor = isTextField\n              ? parseColor(value).toFormat(format)\n              : ctx.valueAsColor.withChannelValue(channel, value)\n\n            setColor(ctx, newColor)\n            //\n          } catch {\n            // reset input value\n            const input = dom.getChannelInputEl(ctx, channel)\n            if (!input) return\n            input.value = getChannelInputValue(ctx.valueAsColor, channel)\n          }\n        },\n\n        incrementChannel(ctx, evt) {\n          const { minValue, maxValue, step } = ctx.valueAsColor.getChannelRange(evt.channel)\n          const channelValue = ctx.valueAsColor.getChannelValue(evt.channel)\n          const value = snapValueToStep(channelValue + evt.step, minValue, maxValue, step)\n          const newColor = ctx.valueAsColor.withChannelValue(evt.channel, clampValue(value, minValue, maxValue))\n          setColor(ctx, newColor)\n        },\n        decrementChannel(ctx, evt) {\n          const { minValue, maxValue, step } = ctx.valueAsColor.getChannelRange(evt.channel)\n          const channelValue = ctx.valueAsColor.getChannelValue(evt.channel)\n          const value = snapValueToStep(channelValue - evt.step, minValue, maxValue, step)\n          const newColor = ctx.valueAsColor.withChannelValue(evt.channel, clampValue(value, minValue, maxValue))\n          setColor(ctx, newColor)\n        },\n\n        incrementXChannel(ctx, evt) {\n          const { xChannel, yChannel } = evt.channel\n          const { incrementX } = getChannelDetails(ctx.valueAsColor, xChannel, yChannel)\n          const newColor = ctx.valueAsColor.withChannelValue(xChannel, incrementX(evt.step))\n          setColor(ctx, newColor)\n        },\n        decrementXChannel(ctx, evt) {\n          const { xChannel, yChannel } = evt.channel\n          const { decrementX } = getChannelDetails(ctx.valueAsColor, xChannel, yChannel)\n          const newColor = ctx.valueAsColor.withChannelValue(xChannel, decrementX(evt.step))\n          setColor(ctx, newColor)\n        },\n\n        incrementYChannel(ctx, evt) {\n          const { xChannel, yChannel } = evt.channel\n          const { incrementY } = getChannelDetails(ctx.valueAsColor, xChannel, yChannel)\n          const newColor = ctx.valueAsColor.withChannelValue(yChannel, incrementY(evt.step))\n          setColor(ctx, newColor)\n        },\n        decrementYChannel(ctx, evt) {\n          const { xChannel, yChannel } = evt.channel\n          const { decrementY } = getChannelDetails(ctx.valueAsColor, xChannel, yChannel)\n          const newColor = ctx.valueAsColor.withChannelValue(yChannel, decrementY(evt.step))\n          setColor(ctx, newColor)\n        },\n\n        setChannelToMax(ctx, evt) {\n          const { maxValue } = ctx.valueAsColor.getChannelRange(evt.channel)\n          const newColor = ctx.valueAsColor.withChannelValue(evt.channel, maxValue)\n          setColor(ctx, newColor)\n        },\n        setChannelToMin(ctx, evt) {\n          const { minValue } = ctx.valueAsColor.getChannelRange(evt.channel)\n          const newColor = ctx.valueAsColor.withChannelValue(evt.channel, minValue)\n          setColor(ctx, newColor)\n        },\n\n        invokeOnChangeEnd(ctx) {\n          ctx.onChangeEnd?.({ value: ctx.value, valueAsColor: ctx.valueAsColor })\n        },\n        invokeOnChange(ctx) {\n          ctx.onChange?.({ value: ctx.value, valueAsColor: ctx.valueAsColor })\n        },\n        focusAreaThumb(ctx) {\n          raf(() => {\n            dom.getAreaThumbEl(ctx)?.focus({ preventScroll: true })\n          })\n        },\n        focusChannelThumb(ctx, evt) {\n          raf(() => {\n            dom.getChannelSliderThumbEl(ctx, evt.channel)?.focus({ preventScroll: true })\n          })\n        },\n      },\n    },\n  )\n}\n\nconst setColor = (ctx: MachineContext, color: Color) => {\n  ctx.value = color.toString(\"css\")\n  ctx.valueAsColor = color\n}\n"],"mappings":"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","names":["parseColor","getPercentValue","snapValueToStep","parseColor","ctx","getPercentValue","snapValueToStep"]}
+{"version":3,"sources":["../src/color-picker.anatomy.ts","../src/color-picker.connect.ts","../src/color-picker.dom.ts","../src/utils/get-channel-details.ts","../src/utils/get-channel-display-color.ts","../src/utils/get-channel-input-value.ts","../src/utils/generate-format-background.ts","../src/utils/get-color-area-gradient.ts","../src/utils/get-slider-background.ts","../src/color-picker.machine.ts"],"sourcesContent":["import { createAnatomy } from \"@zag-js/anatomy\"\n\nexport const anatomy = createAnatomy(\"color-picker\", [\n  \"area\",\n  \"areaThumb\",\n  \"areaGradient\",\n  \"channelSliderTrack\",\n  \"channelSliderTrackBg\",\n  \"channelSliderThumb\",\n  \"channelInput\",\n  \"swatch\",\n  \"swatchBg\",\n  \"content\",\n  \"label\",\n  \"eyeDropTrigger\",\n])\n\nexport const parts = anatomy.build()\n","import { normalizeColor, type Color, type ColorChannel, type ColorFormat } from \"@zag-js/color-utils\"\nimport {\n  getEventKey,\n  getEventPoint,\n  getEventStep,\n  getNativeEvent,\n  isLeftClick,\n  isModifiedEvent,\n  type EventKeyMap,\n} from \"@zag-js/dom-event\"\nimport { dataAttr } from \"@zag-js/dom-query\"\nimport type { NormalizeProps, PropTypes } from \"@zag-js/types\"\nimport { parts } from \"./color-picker.anatomy\"\nimport { dom } from \"./color-picker.dom\"\nimport type {\n  ColorAreaProps,\n  ColorChannelInputProps,\n  ColorChannelProps,\n  ColorSwatchProps,\n  PublicApi,\n  Send,\n  State,\n} from \"./color-picker.types\"\nimport { getChannelDetails } from \"./utils/get-channel-details\"\nimport { getChannelDisplayColor } from \"./utils/get-channel-display-color\"\nimport { getChannelInputRange, getChannelInputValue } from \"./utils/get-channel-input-value\"\nimport { getColorAreaGradient } from \"./utils/get-color-area-gradient\"\nimport { getSliderBgImage } from \"./utils/get-slider-background\"\n\nexport function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): PublicApi<T> {\n  const valueAsColor = state.context.valueAsColor\n  const isDisabled = state.context.disabled\n  const isInteractive = state.context.isInteractive\n  const isDragging = state.matches(\"dragging\")\n\n  const channels = valueAsColor.getColorChannels()\n\n  return {\n    isDragging,\n    value: state.context.value,\n    valueAsColor,\n    channels,\n\n    setColor(value: string | Color) {\n      send({ type: \"VALUE.SET\", value: normalizeColor(value), src: \"set-color\" })\n    },\n\n    setChannelValue(channel: ColorChannel, value: number) {\n      const color = valueAsColor.withChannelValue(channel, value)\n      send({ type: \"VALUE.SET\", value: color, src: \"set-channel\" })\n    },\n\n    setFormat(format: ColorFormat) {\n      const value = valueAsColor.toFormat(format)\n      send({ type: \"VALUE.SET\", value, src: \"set-format\" })\n    },\n\n    contentProps: normalize.element({\n      ...parts.content.attrs,\n      id: dom.getContentId(state.context),\n    }),\n\n    getAreaProps(props: ColorAreaProps) {\n      const { xChannel, yChannel } = props\n      const { areaStyles } = getColorAreaGradient(state.context, xChannel, yChannel)\n\n      return normalize.element({\n        ...parts.area.attrs,\n        id: dom.getAreaId(state.context),\n        role: \"group\",\n        onPointerDown(event) {\n          if (!isInteractive) return\n\n          const evt = getNativeEvent(event)\n          if (!isLeftClick(evt) || isModifiedEvent(evt)) return\n\n          const point = getEventPoint(evt)\n          const channel = { xChannel, yChannel }\n\n          send({ type: \"AREA.POINTER_DOWN\", point, channel, id: \"area\" })\n        },\n        style: {\n          position: \"relative\",\n          touchAction: \"none\",\n          forcedColorAdjust: \"none\",\n          ...areaStyles,\n        },\n      })\n    },\n\n    getAreaGradientProps(props: ColorAreaProps) {\n      const { xChannel, yChannel } = props\n      const { areaGradientStyles } = getColorAreaGradient(state.context, xChannel, yChannel)\n\n      return normalize.element({\n        ...parts.areaGradient.attrs,\n        id: dom.getAreaGradientId(state.context),\n        style: {\n          position: \"relative\",\n          touchAction: \"none\",\n          forcedColorAdjust: \"none\",\n          ...areaGradientStyles,\n        },\n      })\n    },\n\n    getAreaThumbProps(props: ColorAreaProps) {\n      const { xChannel, yChannel } = props\n      const { getThumbPosition } = getChannelDetails(valueAsColor, xChannel, yChannel)\n      const { x, y } = getThumbPosition()\n\n      const channel = { xChannel, yChannel }\n\n      return normalize.element({\n        ...parts.areaThumb.attrs,\n        id: dom.getAreaThumbId(state.context),\n        tabIndex: isDisabled ? undefined : 0,\n        \"data-disabled\": dataAttr(isDisabled),\n        role: \"presentation\",\n        style: {\n          position: \"absolute\",\n          left: `${x * 100}%`,\n          top: `${y * 100}%`,\n          transform: \"translate(-50%, -50%)\",\n          touchAction: \"none\",\n          forcedColorAdjust: \"none\",\n          background: valueAsColor.withChannelValue(\"alpha\", 1).toString(\"css\"),\n        },\n        onBlur() {\n          send(\"AREA.BLUR\")\n        },\n        onKeyDown(event) {\n          if (!isInteractive) return\n\n          const step = getEventStep(event)\n\n          const keyMap: EventKeyMap = {\n            ArrowUp() {\n              send({ type: \"AREA.ARROW_UP\", channel, step })\n            },\n            ArrowDown() {\n              send({ type: \"AREA.ARROW_DOWN\", channel, step })\n            },\n            ArrowLeft() {\n              send({ type: \"AREA.ARROW_LEFT\", channel, step })\n            },\n            ArrowRight() {\n              send({ type: \"AREA.ARROW_RIGHT\", channel, step })\n            },\n            PageUp() {\n              send({ type: \"AREA.PAGE_UP\", channel, step })\n            },\n            PageDown() {\n              send({ type: \"AREA.PAGE_DOWN\", channel, step })\n            },\n          }\n\n          const exec = keyMap[getEventKey(event, state.context)]\n\n          if (exec) {\n            exec(event)\n            event.preventDefault()\n          }\n        },\n      })\n    },\n\n    getChannelSliderTrackProps(props: ColorChannelProps) {\n      const { orientation = \"horizontal\", channel } = props\n\n      return normalize.element({\n        ...parts.channelSliderTrack.attrs,\n        id: dom.getChannelSliderTrackId(state.context, channel),\n        role: \"group\",\n        \"data-channel\": channel,\n        \"data-orientation\": orientation,\n        onPointerDown(event) {\n          if (!isInteractive) return\n\n          const evt = getNativeEvent(event)\n          if (!isLeftClick(evt) || isModifiedEvent(evt)) return\n\n          const point = getEventPoint(evt)\n          send({ type: \"CHANNEL_SLIDER.POINTER_DOWN\", channel, point, id: channel, orientation })\n        },\n        style: {\n          position: \"relative\",\n          touchAction: \"none\",\n          forcedColorAdjust: \"none\",\n          backgroundImage: getSliderBgImage(state.context, { orientation, channel }),\n        },\n      })\n    },\n\n    getChannelSliderBackgroundProps(props: ColorChannelProps) {\n      const { orientation = \"horizontal\", channel } = props\n      return normalize.element({\n        ...parts.channelSliderTrackBg.attrs,\n        \"data-orientation\": orientation,\n        \"data-channel\": channel,\n        style: {\n          position: \"absolute\",\n          backgroundColor: \"#fff\",\n          backgroundImage: [\n            \"linear-gradient(-45deg,#0000 75.5%,#bcbcbc 75.5%)\",\n            \"linear-gradient(45deg,#0000 75.5%,#bcbcbc 75.5%)\",\n            \"linear-gradient(-45deg,#bcbcbc 25.5%,#0000 25.5%)\",\n            \"linear-gradient(45deg,#bcbcbc 25.5%,#0000 25.5%)\",\n          ].join(\",\"),\n          backgroundSize: \"16px 16px\",\n          backgroundPosition: \"-2px -2px,-2px 6px,6px -10px,-10px -2px\",\n          inset: 0,\n          zIndex: -1,\n        },\n      })\n    },\n\n    getChannelSliderThumbProps(props: ColorChannelProps) {\n      const { orientation = \"horizontal\", channel } = props\n      const { minValue, maxValue, step: stepValue } = valueAsColor.getChannelRange(channel)\n      const channelValue = valueAsColor.getChannelValue(channel)\n\n      const offset = (channelValue - minValue) / (maxValue - minValue)\n\n      const placementStyles =\n        orientation === \"horizontal\"\n          ? { left: `${offset * 100}%`, top: \"50%\" }\n          : { top: `${offset * 100}%`, left: \"50%\" }\n\n      return normalize.element({\n        ...parts.channelSliderThumb.attrs,\n        id: dom.getChannelSliderThumbId(state.context, channel),\n        role: \"slider\",\n        \"aria-label\": channel,\n        tabIndex: isDisabled ? undefined : 0,\n        \"data-channel\": channel,\n        \"data-disabled\": dataAttr(isDisabled),\n        \"data-orientation\": orientation,\n        \"aria-disabled\": dataAttr(isDisabled),\n        \"aria-orientation\": orientation,\n        \"aria-valuemax\": maxValue,\n        \"aria-valuemin\": minValue,\n        \"aria-valuenow\": channelValue,\n        style: {\n          forcedColorAdjust: \"none\",\n          position: \"absolute\",\n          background: getChannelDisplayColor(valueAsColor, channel).toString(\"css\"),\n          ...placementStyles,\n        },\n        onFocus() {\n          if (!isInteractive) return\n          send({ type: \"CHANNEL_SLIDER.FOCUS\", channel })\n        },\n        onBlur() {\n          if (!isInteractive) return\n          send({ type: \"CHANNEL_SLIDER.BLUR\", channel })\n        },\n        onKeyDown(event) {\n          if (!isInteractive) return\n          const step = getEventStep(event) * stepValue\n\n          const keyMap: EventKeyMap = {\n            ArrowUp() {\n              send({ type: \"CHANNEL_SLIDER.ARROW_UP\", channel, step })\n            },\n            ArrowDown() {\n              send({ type: \"CHANNEL_SLIDER.ARROW_DOWN\", channel, step })\n            },\n            ArrowLeft() {\n              send({ type: \"CHANNEL_SLIDER.ARROW_LEFT\", channel, step })\n            },\n            ArrowRight() {\n              send({ type: \"CHANNEL_SLIDER.ARROW_RIGHT\", channel, step })\n            },\n            PageUp() {\n              send({ type: \"CHANNEL_SLIDER.PAGE_UP\", channel })\n            },\n            PageDown() {\n              send({ type: \"CHANNEL_SLIDER.PAGE_DOWN\", channel })\n            },\n            Home() {\n              send({ type: \"CHANNEL_SLIDER.HOME\", channel })\n            },\n            End() {\n              send({ type: \"CHANNEL_SLIDER.END\", channel })\n            },\n          }\n\n          const exec = keyMap[getEventKey(event, state.context)]\n\n          if (exec) {\n            exec(event)\n            event.preventDefault()\n          }\n        },\n      })\n    },\n\n    getChannelInputProps(props: ColorChannelInputProps) {\n      const { channel } = props\n      const isTextField = channel === \"hex\" || channel === \"css\"\n      const range = getChannelInputRange(valueAsColor, channel)\n\n      return normalize.input({\n        ...parts.channelInput.attrs,\n        type: isTextField ? \"text\" : \"number\",\n        \"data-channel\": channel,\n        \"aria-label\": channel,\n        disabled: isDisabled,\n        \"data-disabled\": dataAttr(isDisabled),\n        readOnly: state.context.readOnly,\n        id: dom.getChannelInputId(state.context, channel),\n        defaultValue: getChannelInputValue(valueAsColor, channel),\n        min: range?.minValue,\n        max: range?.maxValue,\n        step: range?.step,\n        onFocus() {\n          send({ type: \"CHANNEL_INPUT.FOCUS\", channel })\n        },\n        onChange(event) {\n          if (isTextField) return\n          const value = event.currentTarget.value\n          send({ type: \"CHANNEL_INPUT.CHANGE\", channel, value, isTextField })\n        },\n        onBlur(event) {\n          const value = event.currentTarget.value\n          send({ type: \"CHANNEL_INPUT.BLUR\", channel, value, isTextField })\n        },\n        onKeyDown(event) {\n          if (!isTextField) return\n          if (event.key === \"Enter\") {\n            const value = event.currentTarget.value\n            send({ type: \"CHANNEL_INPUT.CHANGE\", channel, value, isTextField })\n          }\n        },\n        style: {\n          appearance: \"none\",\n          WebkitAppearance: \"none\",\n          MozAppearance: \"textfield\",\n        },\n      })\n    },\n\n    eyeDropperTriggerProps: normalize.button({\n      ...parts.eyeDropTrigger.attrs,\n      onClick() {\n        send(\"EYEDROPPER.CLICK\")\n      },\n    }),\n\n    getSwatchBackgroundProps(props: ColorSwatchProps) {\n      const { value } = props\n      const alpha = normalizeColor(value).getChannelValue(\"alpha\")\n      return normalize.element({\n        ...parts.swatchBg.attrs,\n        \"data-alpha\": alpha,\n        style: {\n          width: \"100%\",\n          height: \"100%\",\n          background: \"#fff\",\n          backgroundImage: [\n            \"linear-gradient(-45deg,#0000 75.5%,#bcbcbc 75.5%)\",\n            \"linear-gradient(45deg,#0000 75.5%,#bcbcbc 75.5%)\",\n            \"linear-gradient(-45deg,#bcbcbc 25.5%,#0000 25.5%)\",\n            \"linear-gradient(45deg,#bcbcbc 25.5%,#0000 25.5%)\",\n          ].join(\",\"),\n          backgroundPosition: \"-2px -2px,-2px 6px,6px -10px,-10px -2px\",\n          backgroundSize: \"16px 16px\",\n          position: \"absolute\",\n          inset: \"0px\",\n          zIndex: -1,\n        },\n      })\n    },\n\n    getSwatchProps(props: ColorSwatchProps) {\n      const { value, readOnly } = props\n      const color = normalizeColor(value).toFormat(valueAsColor.getColorSpace())\n      return normalize.element({\n        ...parts.swatch.attrs,\n        onClick() {\n          if (readOnly) return\n          send({ type: \"VALUE.SET\", value: color })\n        },\n        style: {\n          position: \"relative\",\n          background: color.toString(\"css\"),\n        },\n      })\n    },\n  }\n}\n","import type { ColorChannel } from \"@zag-js/color-utils\"\nimport { getRelativePoint, type Point } from \"@zag-js/dom-event\"\nimport { createScope, queryAll } from \"@zag-js/dom-query\"\nimport type { MachineContext as Ctx } from \"./color-picker.types\"\n\nexport const dom = createScope({\n  getContentId: (ctx: Ctx) => ctx.ids?.content ?? `color-picker:${ctx.id}:content`,\n  getAreaId: (ctx: Ctx) => ctx.ids?.area ?? `color-picker:${ctx.id}:area`,\n  getAreaGradientId: (ctx: Ctx) => ctx.ids?.areaGradient ?? `color-picker:${ctx.id}:area-gradient`,\n  getAreaThumbId: (ctx: Ctx) => ctx.ids?.areaThumb ?? `color-picker:${ctx.id}:area-thumb`,\n  getChannelSliderTrackId: (ctx: Ctx, channel: ColorChannel) =>\n    ctx.ids?.channelSliderTrack?.(channel) ?? `color-picker:${ctx.id}:slider-track:${channel}`,\n  getChannelInputId: (ctx: Ctx, channel: string) =>\n    ctx.ids?.channelInput?.(channel) ?? `color-picker:${ctx.id}:input:${channel}`,\n  getChannelSliderThumbId: (ctx: Ctx, channel: ColorChannel) =>\n    ctx.ids?.channelSliderThumb?.(channel) ?? `color-picker:${ctx.id}:slider-thumb:${channel}`,\n\n  getContentEl: (ctx: Ctx) => dom.queryById(ctx, dom.getContentId(ctx)),\n  getAreaThumbEl: (ctx: Ctx) => dom.queryById(ctx, dom.getAreaThumbId(ctx)),\n  getChannelSliderThumbEl: (ctx: Ctx, channel: ColorChannel) =>\n    dom.queryById(ctx, dom.getChannelSliderThumbId(ctx, channel)),\n  getChannelInputEl: (ctx: Ctx, channel: string) =>\n    dom.queryById<HTMLInputElement>(ctx, dom.getChannelInputId(ctx, channel)),\n\n  getAreaEl: (ctx: Ctx) => dom.queryById(ctx, dom.getAreaId(ctx)),\n  getAreaValueFromPoint(ctx: Ctx, point: Point) {\n    const { percent } = getRelativePoint(point, dom.getAreaEl(ctx))\n    return percent\n  },\n\n  getChannelSliderTrackEl: (ctx: Ctx, channel: ColorChannel) => {\n    return dom.queryById(ctx, dom.getChannelSliderTrackId(ctx, channel))\n  },\n  getChannelSliderValueFromPoint(ctx: Ctx, point: Point, channel: ColorChannel) {\n    const { percent } = getRelativePoint(point, dom.getChannelSliderTrackEl(ctx, channel))\n    return percent\n  },\n  getChannelInputEls: (ctx: Ctx) => {\n    return queryAll<HTMLInputElement>(dom.getContentEl(ctx), \"input[data-channel]\")\n  },\n})\n","import type { Color, ColorChannel } from \"@zag-js/color-utils\"\nimport { getPercentValue, snapValueToStep } from \"@zag-js/numeric-range\"\n\nexport function getChannelDetails(color: Color, xChannel: ColorChannel, yChannel: ColorChannel) {\n  const channels = color.getColorSpaceAxes({ xChannel, yChannel })\n\n  const xChannelRange = color.getChannelRange(channels.xChannel)\n  const yChannelRange = color.getChannelRange(channels.yChannel)\n\n  const { minValue: minValueX, maxValue: maxValueX, step: stepX, pageSize: pageSizeX } = xChannelRange\n  const { minValue: minValueY, maxValue: maxValueY, step: stepY, pageSize: pageSizeY } = yChannelRange\n\n  const xValue = color.getChannelValue(channels.xChannel)\n  const yValue = color.getChannelValue(channels.yChannel)\n\n  return {\n    channels,\n    xChannelStep: stepX,\n    yChannelStep: stepY,\n    xChannelPageStep: pageSizeX,\n    yChannelPageStep: pageSizeY,\n    xValue,\n    yValue,\n    getThumbPosition() {\n      let x = (xValue - minValueX) / (maxValueX - minValueX)\n      let y = 1 - (yValue - minValueY) / (maxValueY - minValueY)\n      return { x, y }\n    },\n    incrementX(stepSize: number) {\n      return xValue + stepSize > maxValueX ? maxValueX : snapValueToStep(xValue + stepSize, minValueX, maxValueX, stepX)\n    },\n    incrementY(stepSize: number) {\n      return yValue + stepSize > maxValueY ? maxValueY : snapValueToStep(yValue + stepSize, minValueY, maxValueY, stepY)\n    },\n    decrementX(stepSize: number) {\n      return snapValueToStep(xValue - stepSize, minValueX, maxValueX, stepX)\n    },\n    decrementY(stepSize: number) {\n      return snapValueToStep(yValue - stepSize, minValueY, maxValueY, stepY)\n    },\n    getColorFromPoint(x: number, y: number) {\n      let newXValue = getPercentValue(x, minValueX, maxValueX, stepX)\n      let newYValue = getPercentValue(1 - y, minValueY, maxValueY, stepY)\n\n      let newColor: Color | undefined\n\n      if (newXValue !== xValue) {\n        newXValue = snapValueToStep(newXValue, minValueX, maxValueX, stepX)\n        newColor = color.withChannelValue(channels.xChannel, newXValue)\n      }\n\n      if (newYValue !== yValue) {\n        newYValue = snapValueToStep(newYValue, minValueY, maxValueY, stepY)\n        newColor = (newColor || color).withChannelValue(channels.yChannel, newYValue)\n      }\n\n      return newColor\n    },\n  }\n}\n","import { parseColor, type Color, type ColorChannel } from \"@zag-js/color-utils\"\n\nexport function getChannelDisplayColor(color: Color, channel: ColorChannel) {\n  switch (channel) {\n    case \"hue\":\n      return parseColor(`hsl(${color.getChannelValue(\"hue\")}, 100%, 50%)`)\n    case \"lightness\":\n    case \"brightness\":\n    case \"saturation\":\n    case \"red\":\n    case \"green\":\n    case \"blue\":\n      return color.withChannelValue(\"alpha\", 1)\n    case \"alpha\": {\n      return color\n    }\n    default:\n      throw new Error(\"Unknown color channel: \" + channel)\n  }\n}\n","import type { Color } from \"@zag-js/color-utils\"\nimport type { ExtendedColorChannel } from \"../color-picker.types\"\n\nexport function getChannelInputValue(color: Color, channel: ExtendedColorChannel) {\n  switch (channel) {\n    case \"hex\":\n      return color.toString(\"hex\")\n    case \"css\":\n      return color.toString(\"css\")\n    default:\n      return color.getChannelValue(channel).toString()\n  }\n}\n\nexport function getChannelInputRange(color: Color, channel: ExtendedColorChannel) {\n  switch (channel) {\n    case \"hex\":\n    case \"css\":\n      return undefined\n    default:\n      return color.getChannelRange(channel)\n  }\n}\n","export const generateRGB_R = (orientation: [string, string], dir: boolean, zValue: number) => {\n  const maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`\n  const result = {\n    areaStyles: {\n      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(${zValue},0,0),rgb(${zValue},255,0))`,\n    },\n    areaGradientStyles: {\n      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(${zValue},0,255),rgb(${zValue},255,255))`,\n      WebkitMaskImage: maskImage,\n      maskImage,\n    },\n  }\n  return result\n}\n\nexport const generateRGB_G = (orientation: [string, string], dir: boolean, zValue: number) => {\n  const maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`\n  const result = {\n    areaStyles: {\n      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,${zValue},0),rgb(255,${zValue},0))`,\n    },\n    areaGradientStyles: {\n      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,${zValue},255),rgb(255,${zValue},255))`,\n      WebkitMaskImage: maskImage,\n      maskImage,\n    },\n  }\n  return result\n}\n\nexport const generateRGB_B = (orientation: [string, string], dir: boolean, zValue: number) => {\n  const maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`\n  const result = {\n    areaStyles: {\n      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,0,${zValue}),rgb(255,0,${zValue}))`,\n    },\n    areaGradientStyles: {\n      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,255,${zValue}),rgb(255,255,${zValue}))`,\n      WebkitMaskImage: maskImage,\n      maskImage,\n    },\n  }\n  return result\n}\n\nexport const generateHSL_H = (orientation: [string, string], dir: boolean, zValue: number) => {\n  const result = {\n    areaStyles: {},\n    areaGradientStyles: {\n      background: [\n        `linear-gradient(to ${\n          orientation[Number(dir)]\n        }, hsla(0,0%,0%,1) 0%, hsla(0,0%,0%,0) 50%, hsla(0,0%,100%,0) 50%, hsla(0,0%,100%,1) 100%)`,\n        `linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,50%),hsla(0,0%,50%,0))`,\n        `hsl(${zValue}, 100%, 50%)`,\n      ].join(\",\"),\n    },\n  }\n  return result\n}\n\nexport const generateHSL_S = (orientation: [string, string], dir: boolean, alphaValue: number) => {\n  const result = {\n    areaStyles: {},\n    areaGradientStyles: {\n      background: [\n        `linear-gradient(to ${\n          orientation[Number(!dir)]\n        }, hsla(0,0%,0%,${alphaValue}) 0%, hsla(0,0%,0%,0) 50%, hsla(0,0%,100%,0) 50%, hsla(0,0%,100%,${alphaValue}) 100%)`,\n        `linear-gradient(to ${\n          orientation[Number(dir)]\n        },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}))`,\n        \"hsl(0, 0%, 50%)\",\n      ].join(\",\"),\n    },\n  }\n  return result\n}\n\nexport const generateHSL_L = (orientation: [string, string], dir: boolean, zValue: number) => {\n  const result = {\n    areaStyles: {},\n    areaGradientStyles: {\n      backgroundImage: [\n        `linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,${zValue}%),hsla(0,0%,${zValue}%,0))`,\n        `linear-gradient(to ${\n          orientation[Number(dir)]\n        },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}%))`,\n      ].join(\",\"),\n    },\n  }\n  return result\n}\n\nexport const generateHSB_H = (orientation: [string, string], dir: boolean, zValue: number) => {\n  const result = {\n    areaStyles: {},\n    areaGradientStyles: {\n      background: [\n        `linear-gradient(to ${orientation[Number(dir)]},hsl(0,0%,0%),hsla(0,0%,0%,0))`,\n        `linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,100%),hsla(0,0%,100%,0))`,\n        `hsl(${zValue}, 100%, 50%)`,\n      ].join(\",\"),\n    },\n  }\n  return result\n}\n\nexport const generateHSB_S = (orientation: [string, string], dir: boolean, alphaValue: number) => {\n  const result = {\n    areaStyles: {},\n    areaGradientStyles: {\n      background: [\n        `linear-gradient(to ${orientation[Number(!dir)]},hsla(0,0%,0%,${alphaValue}),hsla(0,0%,0%,0))`,\n        `linear-gradient(to ${\n          orientation[Number(dir)]\n        },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}))`,\n        `linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,0%),hsl(0,0%,100%))`,\n      ].join(\",\"),\n    },\n  }\n  return result\n}\n\nexport const generateHSB_B = (orientation: [string, string], dir: boolean, alphaValue: number) => {\n  const result = {\n    areaStyles: {},\n    areaGradientStyles: {\n      background: [\n        `linear-gradient(to ${orientation[Number(!dir)]},hsla(0,0%,100%,${alphaValue}),hsla(0,0%,100%,0))`,\n        `linear-gradient(to ${\n          orientation[Number(dir)]\n        },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}))`,\n        \"#000\",\n      ].join(\",\"),\n    },\n  }\n  return result\n}\n","import type { ColorChannel } from \"@zag-js/color-utils\"\nimport type { Style } from \"@zag-js/types\"\nimport type { MachineContext } from \"../color-picker.types\"\nimport {\n  generateHSB_B,\n  generateHSB_H,\n  generateHSB_S,\n  generateHSL_H,\n  generateHSL_L,\n  generateHSL_S,\n  generateRGB_B,\n  generateRGB_G,\n  generateRGB_R,\n} from \"./generate-format-background\"\n\nexport function getColorAreaGradient(ctx: MachineContext, xChannel: ColorChannel, yChannel: ColorChannel) {\n  const value = ctx.valueAsColor\n\n  const { zChannel } = value.getColorSpaceAxes({ xChannel, yChannel })\n  const zValue = value.getChannelValue(zChannel)\n\n  const { minValue: zMin, maxValue: zMax } = value.getChannelRange(zChannel)\n  const orientation: [string, string] = [\"top\", ctx.dir === \"rtl\" ? \"left\" : \"right\"]\n\n  let dir = false\n  let background = { areaStyles: {} as Style, areaGradientStyles: {} as Style }\n\n  let alphaValue = (zValue - zMin) / (zMax - zMin)\n  let isHSL = value.getColorSpace() === \"hsl\"\n\n  switch (zChannel) {\n    case \"red\": {\n      dir = xChannel === \"green\"\n      background = generateRGB_R(orientation, dir, zValue)\n      break\n    }\n\n    case \"green\": {\n      dir = xChannel === \"red\"\n      background = generateRGB_G(orientation, dir, zValue)\n      break\n    }\n\n    case \"blue\": {\n      dir = xChannel === \"red\"\n      background = generateRGB_B(orientation, dir, zValue)\n      break\n    }\n\n    case \"hue\": {\n      dir = xChannel !== \"saturation\"\n      if (isHSL) {\n        background = generateHSL_H(orientation, dir, zValue)\n      } else {\n        background = generateHSB_H(orientation, dir, zValue)\n      }\n      break\n    }\n\n    case \"saturation\": {\n      dir = xChannel === \"hue\"\n      if (isHSL) {\n        background = generateHSL_S(orientation, dir, alphaValue)\n      } else {\n        background = generateHSB_S(orientation, dir, alphaValue)\n      }\n      break\n    }\n\n    case \"brightness\": {\n      dir = xChannel === \"hue\"\n      background = generateHSB_B(orientation, dir, alphaValue)\n      break\n    }\n\n    case \"lightness\": {\n      dir = xChannel === \"hue\"\n      background = generateHSL_L(orientation, dir, zValue)\n      break\n    }\n  }\n\n  return background\n}\n","import type { ColorChannelProps, MachineContext } from \"../color-picker.types\"\n\nfunction getSliderBgDirection(orientation: \"vertical\" | \"horizontal\", dir: \"ltr\" | \"rtl\") {\n  if (orientation === \"vertical\") {\n    return \"top\"\n  } else if (dir === \"ltr\") {\n    return \"right\"\n  } else {\n    return \"left\"\n  }\n}\n\nexport const getSliderBgImage = (ctx: MachineContext, props: Required<ColorChannelProps>) => {\n  const { channel } = props\n\n  const dir = getSliderBgDirection(props.orientation, ctx.dir!)\n  const value = ctx.valueAsColor\n\n  const { minValue, maxValue } = ctx.valueAsColor.getChannelRange(channel)\n\n  switch (channel) {\n    case \"hue\":\n      return `linear-gradient(to ${dir}, 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%)`\n    case \"lightness\": {\n      let start = ctx.valueAsColor.withChannelValue(channel, minValue).toString(\"css\")\n      let middle = value.withChannelValue(channel, (maxValue - minValue) / 2).toString(\"css\")\n      let end = value.withChannelValue(channel, maxValue).toString(\"css\")\n      return `linear-gradient(to ${dir}, ${start}, ${middle}, ${end})`\n    }\n    case \"saturation\":\n    case \"brightness\":\n    case \"red\":\n    case \"green\":\n    case \"blue\":\n    case \"alpha\": {\n      let start = value.withChannelValue(channel, minValue).toString(\"css\")\n      let end = value.withChannelValue(channel, maxValue).toString(\"css\")\n      return `linear-gradient(to ${dir}, ${start}, ${end})`\n    }\n    default:\n      throw new Error(\"Unknown color channel: \" + channel)\n  }\n}\n","import { type Color, parseColor } from \"@zag-js/color-utils\"\nimport { createMachine } from \"@zag-js/core\"\nimport { trackPointerMove } from \"@zag-js/dom-event\"\nimport { raf } from \"@zag-js/dom-query\"\nimport { clampValue, getPercentValue, snapValueToStep } from \"@zag-js/numeric-range\"\nimport { disableTextSelection } from \"@zag-js/text-selection\"\nimport { compact } from \"@zag-js/utils\"\nimport { dom } from \"./color-picker.dom\"\nimport type { ExtendedColorChannel, MachineContext, MachineState, UserDefinedContext } from \"./color-picker.types\"\nimport { getChannelDetails } from \"./utils/get-channel-details\"\nimport { getChannelInputValue } from \"./utils/get-channel-input-value\"\n\nexport function machine(userContext: UserDefinedContext) {\n  const ctx = compact(userContext)\n\n  return createMachine<MachineContext, MachineState>(\n    {\n      id: \"color-picker\",\n      initial: \"idle\",\n      context: {\n        dir: \"ltr\",\n        activeId: null,\n        activeChannel: null,\n        activeOrientation: null,\n        value: \"#D9D9D9\",\n        ...ctx,\n        valueAsColor: parseColor(ctx.value || \"#D9D9D9\"),\n      },\n\n      computed: {\n        isRtl: (ctx) => ctx.dir === \"rtl\",\n        isInteractive: (ctx) => !(ctx.disabled || ctx.readOnly),\n      },\n\n      on: {\n        \"VALUE.SET\": {\n          actions: [\"setValue\"],\n        },\n      },\n\n      created: [\"setValueAsColor\"],\n\n      watch: {\n        value: [\"setValueAsColor\", \"syncChannelInputs\", \"invokeOnChange\"],\n      },\n\n      states: {\n        idle: {\n          on: {\n            \"EYEDROPPER.CLICK\": {\n              actions: [\"openEyeDropper\"],\n            },\n            \"AREA.POINTER_DOWN\": {\n              target: \"dragging\",\n              actions: [\"setActiveChannel\", \"setAreaColorFromPoint\", \"focusAreaThumb\"],\n            },\n            \"CHANNEL_SLIDER.POINTER_DOWN\": {\n              target: \"dragging\",\n              actions: [\"setActiveChannel\", \"setChannelColorFromPoint\", \"focusChannelThumb\"],\n            },\n            \"CHANNEL_INPUT.FOCUS\": {\n              target: \"focused\",\n              actions: [\"setActiveChannel\"],\n            },\n            \"CHANNEL_INPUT.CHANGE\": {\n              actions: [\"setChannelColorFromInput\"],\n            },\n          },\n        },\n\n        focused: {\n          on: {\n            \"AREA.POINTER_DOWN\": {\n              target: \"dragging\",\n              actions: [\"setActiveChannel\", \"setAreaColorFromPoint\", \"focusAreaThumb\"],\n            },\n            \"CHANNEL_SLIDER.POINTER_DOWN\": {\n              target: \"dragging\",\n              actions: [\"setActiveChannel\", \"setChannelColorFromPoint\", \"focusChannelThumb\"],\n            },\n            \"AREA.ARROW_LEFT\": {\n              actions: [\"decrementXChannel\"],\n            },\n            \"AREA.ARROW_RIGHT\": {\n              actions: [\"incrementXChannel\"],\n            },\n            \"AREA.ARROW_UP\": {\n              actions: [\"incrementYChannel\"],\n            },\n            \"AREA.ARROW_DOWN\": {\n              actions: [\"decrementYChannel\"],\n            },\n            \"AREA.PAGE_UP\": {\n              actions: [\"incrementXChannel\"],\n            },\n            \"AREA.PAGE_DOWN\": {\n              actions: [\"decrementXChannel\"],\n            },\n            \"CHANNEL_SLIDER.ARROW_LEFT\": {\n              actions: [\"decrementChannel\"],\n            },\n            \"CHANNEL_SLIDER.ARROW_RIGHT\": {\n              actions: [\"incrementChannel\"],\n            },\n            \"CHANNEL_SLIDER.ARROW_UP\": {\n              actions: [\"incrementChannel\"],\n            },\n            \"CHANNEL_SLIDER.ARROW_DOWN\": {\n              actions: [\"decrementChannel\"],\n            },\n            \"CHANNEL_SLIDER.PAGE_UP\": {\n              actions: [\"incrementChannel\"],\n            },\n            \"CHANNEL_SLIDER.PAGE_DOWN\": {\n              actions: [\"decrementChannel\"],\n            },\n            \"CHANNEL_SLIDER.HOME\": {\n              actions: [\"setChannelToMin\"],\n            },\n            \"CHANNEL_SLIDER.END\": {\n              actions: [\"setChannelToMax\"],\n            },\n            \"CHANNEL_INPUT.FOCUS\": {\n              actions: [\"setActiveChannel\"],\n            },\n            \"CHANNEL_INPUT.CHANGE\": {\n              actions: [\"setChannelColorFromInput\"],\n            },\n            \"CHANNEL_INPUT.BLUR\": [\n              {\n                guard: \"isTextField\",\n                target: \"idle\",\n                actions: [\"setChannelColorFromInput\"],\n              },\n              { target: \"idle\" },\n            ],\n            \"CHANNEL_SLIDER.BLUR\": {\n              target: \"idle\",\n            },\n            \"AREA.BLUR\": {\n              target: \"idle\",\n            },\n          },\n        },\n\n        dragging: {\n          exit: [\"clearActiveChannel\"],\n          activities: [\"trackPointerMove\", \"disableTextSelection\"],\n          on: {\n            \"AREA.POINTER_MOVE\": {\n              actions: [\"setAreaColorFromPoint\"],\n            },\n            \"AREA.POINTER_UP\": {\n              target: \"focused\",\n              actions: [\"invokeOnChangeEnd\"],\n            },\n            \"CHANNEL_SLIDER.POINTER_MOVE\": {\n              actions: [\"setChannelColorFromPoint\"],\n            },\n            \"CHANNEL_SLIDER.POINTER_UP\": {\n              target: \"focused\",\n              actions: [\"invokeOnChangeEnd\"],\n            },\n          },\n        },\n      },\n    },\n    {\n      guards: {\n        isTextField: (_ctx, evt) => !!evt.isTextField,\n      },\n      activities: {\n        trackPointerMove(ctx, _evt, { send }) {\n          return trackPointerMove(dom.getDoc(ctx), {\n            onPointerMove({ point }) {\n              const type = ctx.activeId === \"area\" ? \"AREA.POINTER_MOVE\" : \"CHANNEL_SLIDER.POINTER_MOVE\"\n              send({ type, point })\n            },\n            onPointerUp() {\n              const type = ctx.activeId === \"area\" ? \"AREA.POINTER_UP\" : \"CHANNEL_SLIDER.POINTER_UP\"\n              send({ type })\n            },\n          })\n        },\n        disableTextSelection(ctx) {\n          return disableTextSelection({ doc: dom.getDoc(ctx), target: dom.getContentEl(ctx) })\n        },\n      },\n      actions: {\n        openEyeDropper(ctx) {\n          const isSupported = \"EyeDropper\" in dom.getWin(ctx)\n          if (!isSupported) return\n          const win = dom.getWin(ctx) as any\n          const picker = new win.EyeDropper()\n          picker\n            .open()\n            .then(({ sRGBHex }: { sRGBHex: string }) => {\n              const format = ctx.valueAsColor.getColorSpace()\n              const color = parseColor(sRGBHex).toFormat(format)\n              setColor(ctx, color)\n              ctx.onChangeEnd?.({ value: ctx.value, valueAsColor: color })\n            })\n            .catch(() => void 0)\n        },\n        setActiveChannel(ctx, evt) {\n          ctx.activeId = evt.id\n          if (evt.channel) {\n            ctx.activeChannel = evt.channel\n          }\n          if (evt.orientation) {\n            ctx.activeOrientation = evt.orientation\n          }\n        },\n        clearActiveChannel(ctx) {\n          ctx.activeChannel = null\n          ctx.activeId = null\n          ctx.activeOrientation = null\n        },\n        setAreaColorFromPoint(ctx, evt) {\n          const { xChannel, yChannel } = evt.channel || ctx.activeChannel\n\n          const percent = dom.getAreaValueFromPoint(ctx, evt.point)\n          const { getColorFromPoint } = getChannelDetails(ctx.valueAsColor, xChannel, yChannel)\n          const color = getColorFromPoint(percent.x, percent.y)\n\n          if (!color) return\n          setColor(ctx, color)\n        },\n        setChannelColorFromPoint(ctx, evt) {\n          const channel = evt.channel || ctx.activeId\n          const percent = dom.getChannelSliderValueFromPoint(ctx, evt.point, channel)\n\n          const { minValue, maxValue, step } = ctx.valueAsColor.getChannelRange(channel)\n          const orientation = ctx.activeOrientation || \"horizontal\"\n\n          const point = orientation === \"horizontal\" ? percent.x : percent.y\n          const channelValue = getPercentValue(point, minValue, maxValue, step)\n\n          const value = snapValueToStep(channelValue - step, minValue, maxValue, step)\n          const newColor = ctx.valueAsColor.withChannelValue(channel, value)\n\n          setColor(ctx, newColor)\n        },\n        setValue(ctx, evt) {\n          setColor(ctx, evt.value)\n        },\n        setValueAsColor(ctx) {\n          try {\n            const color = parseColor(ctx.value)\n            if (color.isEqual(ctx.valueAsColor)) return\n            ctx.valueAsColor = color\n          } catch {}\n        },\n        syncChannelInputs(ctx) {\n          const inputs = dom.getChannelInputEls(ctx)\n          inputs.forEach((input) => {\n            const channel = input.getAttribute(\"data-channel\") as ExtendedColorChannel | null\n            if (!channel) return\n            const value = getChannelInputValue(ctx.valueAsColor, channel)\n            input.value = value.toString()\n          })\n        },\n        setChannelColorFromInput(ctx, evt) {\n          const { channel, isTextField, value } = evt\n          try {\n            const format = ctx.valueAsColor.getColorSpace()\n\n            const newColor = isTextField\n              ? parseColor(value).toFormat(format)\n              : ctx.valueAsColor.withChannelValue(channel, value)\n\n            setColor(ctx, newColor)\n            //\n          } catch {\n            // reset input value\n            const input = dom.getChannelInputEl(ctx, channel)\n            if (!input) return\n            input.value = getChannelInputValue(ctx.valueAsColor, channel)\n          }\n        },\n\n        incrementChannel(ctx, evt) {\n          const { minValue, maxValue, step } = ctx.valueAsColor.getChannelRange(evt.channel)\n          const channelValue = ctx.valueAsColor.getChannelValue(evt.channel)\n          const value = snapValueToStep(channelValue + evt.step, minValue, maxValue, step)\n          const newColor = ctx.valueAsColor.withChannelValue(evt.channel, clampValue(value, minValue, maxValue))\n          setColor(ctx, newColor)\n        },\n        decrementChannel(ctx, evt) {\n          const { minValue, maxValue, step } = ctx.valueAsColor.getChannelRange(evt.channel)\n          const channelValue = ctx.valueAsColor.getChannelValue(evt.channel)\n          const value = snapValueToStep(channelValue - evt.step, minValue, maxValue, step)\n          const newColor = ctx.valueAsColor.withChannelValue(evt.channel, clampValue(value, minValue, maxValue))\n          setColor(ctx, newColor)\n        },\n\n        incrementXChannel(ctx, evt) {\n          const { xChannel, yChannel } = evt.channel\n          const { incrementX } = getChannelDetails(ctx.valueAsColor, xChannel, yChannel)\n          const newColor = ctx.valueAsColor.withChannelValue(xChannel, incrementX(evt.step))\n          setColor(ctx, newColor)\n        },\n        decrementXChannel(ctx, evt) {\n          const { xChannel, yChannel } = evt.channel\n          const { decrementX } = getChannelDetails(ctx.valueAsColor, xChannel, yChannel)\n          const newColor = ctx.valueAsColor.withChannelValue(xChannel, decrementX(evt.step))\n          setColor(ctx, newColor)\n        },\n\n        incrementYChannel(ctx, evt) {\n          const { xChannel, yChannel } = evt.channel\n          const { incrementY } = getChannelDetails(ctx.valueAsColor, xChannel, yChannel)\n          const newColor = ctx.valueAsColor.withChannelValue(yChannel, incrementY(evt.step))\n          setColor(ctx, newColor)\n        },\n        decrementYChannel(ctx, evt) {\n          const { xChannel, yChannel } = evt.channel\n          const { decrementY } = getChannelDetails(ctx.valueAsColor, xChannel, yChannel)\n          const newColor = ctx.valueAsColor.withChannelValue(yChannel, decrementY(evt.step))\n          setColor(ctx, newColor)\n        },\n\n        setChannelToMax(ctx, evt) {\n          const { maxValue } = ctx.valueAsColor.getChannelRange(evt.channel)\n          const newColor = ctx.valueAsColor.withChannelValue(evt.channel, maxValue)\n          setColor(ctx, newColor)\n        },\n        setChannelToMin(ctx, evt) {\n          const { minValue } = ctx.valueAsColor.getChannelRange(evt.channel)\n          const newColor = ctx.valueAsColor.withChannelValue(evt.channel, minValue)\n          setColor(ctx, newColor)\n        },\n\n        invokeOnChangeEnd(ctx) {\n          ctx.onChangeEnd?.({ value: ctx.value, valueAsColor: ctx.valueAsColor })\n        },\n        invokeOnChange(ctx) {\n          ctx.onChange?.({ value: ctx.value, valueAsColor: ctx.valueAsColor })\n        },\n        focusAreaThumb(ctx) {\n          raf(() => {\n            dom.getAreaThumbEl(ctx)?.focus({ preventScroll: true })\n          })\n        },\n        focusChannelThumb(ctx, evt) {\n          raf(() => {\n            dom.getChannelSliderThumbEl(ctx, evt.channel)?.focus({ preventScroll: true })\n          })\n        },\n      },\n    },\n  )\n}\n\nconst setColor = (ctx: MachineContext, color: Color) => {\n  ctx.value = color.toString(\"css\")\n  ctx.valueAsColor = color\n}\n"],"mappings":"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","names":["parseColor","getPercentValue","snapValueToStep","parseColor","ctx","getPercentValue","snapValueToStep"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/color-picker",
-  "version": "0.11.1",
+  "version": "0.11.2",
   "description": "Core logic for the color-picker widget implemented as a state machine",
   "keywords": [
     "js",
@@ -28,15 +28,15 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/core": "0.11.1",
-    "@zag-js/anatomy": "0.11.1",
-    "@zag-js/dom-query": "0.11.1",
-    "@zag-js/dom-event": "0.11.1",
-    "@zag-js/utils": "0.11.1",
-    "@zag-js/color-utils": "0.11.1",
-    "@zag-js/numeric-range": "0.11.1",
-    "@zag-js/text-selection": "0.11.1",
-    "@zag-js/types": "0.11.1"
+    "@zag-js/core": "0.11.2",
+    "@zag-js/anatomy": "0.11.2",
+    "@zag-js/dom-query": "0.11.2",
+    "@zag-js/dom-event": "0.11.2",
+    "@zag-js/utils": "0.11.2",
+    "@zag-js/color-utils": "0.11.2",
+    "@zag-js/numeric-range": "0.11.2",
+    "@zag-js/text-selection": "0.11.2",
+    "@zag-js/types": "0.11.2"
   },
   "devDependencies": {
     "clean-package": "2.2.0"

package/src/color-picker.connect.ts

@@ -1,22 +1,23 @@
-import { Color, normalizeColor, type ColorChannel, type ColorFormat } from "@zag-js/color-utils"
+import { normalizeColor, type Color, type ColorChannel, type ColorFormat } from "@zag-js/color-utils"
 import {
-  EventKeyMap,
   getEventKey,
   getEventPoint,
   getEventStep,
   getNativeEvent,
   isLeftClick,
   isModifiedEvent,
+  type EventKeyMap,
 } from "@zag-js/dom-event"
 import { dataAttr } from "@zag-js/dom-query"
-import { NormalizeProps, type PropTypes } from "@zag-js/types"
+import type { NormalizeProps, PropTypes } from "@zag-js/types"
 import { parts } from "./color-picker.anatomy"
 import { dom } from "./color-picker.dom"
-import {
+import type {
   ColorAreaProps,
   ColorChannelInputProps,
   ColorChannelProps,
   ColorSwatchProps,
+  PublicApi,
   Send,
   State,
 } from "./color-picker.types"
@@ -26,7 +27,7 @@ import { getChannelInputRange, getChannelInputValue } from "./utils/get-channel-
 import { getColorAreaGradient } from "./utils/get-color-area-gradient"
 import { getSliderBgImage } from "./utils/get-slider-background"
 
-export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>) {
+export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): PublicApi<T> {
   const valueAsColor = state.context.valueAsColor
   const isDisabled = state.context.disabled
   const isInteractive = state.context.isInteractive
@@ -35,38 +36,20 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
   const channels = valueAsColor.getColorChannels()
 
   return {
-    /**
-     * Whether the color picker is being dragged
-     */
     isDragging,
-    /**
-     * The current color value (as a string)
-     */
     value: state.context.value,
-    /**
-     * The current color value (as a Color object)
-     */
     valueAsColor,
-    /**
-     * The current color channels of the color
-     */
     channels,
-    /**
-     * Function to set the color value
-     */
+
     setColor(value: string | Color) {
       send({ type: "VALUE.SET", value: normalizeColor(value), src: "set-color" })
     },
-    /**
-     * Function to set the color value of a specific channel
-     */
+
     setChannelValue(channel: ColorChannel, value: number) {
       const color = valueAsColor.withChannelValue(channel, value)
       send({ type: "VALUE.SET", value: color, src: "set-channel" })
     },
-    /**
-     * Function to set the color format
-     */
+
     setFormat(format: ColorFormat) {
       const value = valueAsColor.toFormat(format)
       send({ type: "VALUE.SET", value, src: "set-format" })

package/src/color-picker.dom.ts

@@ -1,4 +1,4 @@
-import { type ColorChannel } from "@zag-js/color-utils"
+import type { ColorChannel } from "@zag-js/color-utils"
 import { getRelativePoint, type Point } from "@zag-js/dom-event"
 import { createScope, queryAll } from "@zag-js/dom-query"
 import type { MachineContext as Ctx } from "./color-picker.types"

package/src/color-picker.machine.ts

@@ -1,4 +1,4 @@
-import { Color, parseColor } from "@zag-js/color-utils"
+import { type 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"
@@ -6,7 +6,7 @@ import { clampValue, getPercentValue, snapValueToStep } from "@zag-js/numeric-ra
 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 type { ExtendedColorChannel, MachineContext, MachineState, UserDefinedContext } from "./color-picker.types"
 import { getChannelDetails } from "./utils/get-channel-details"
 import { getChannelInputValue } from "./utils/get-channel-input-value"
 

package/src/color-picker.types.ts

@@ -1,6 +1,6 @@
-import { Color, type ColorAxes, type ColorChannel, type ColorFormat } from "@zag-js/color-utils"
+import type { Color, ColorAxes, ColorChannel, ColorFormat, ColorType } from "@zag-js/color-utils"
 import type { StateMachine as S } from "@zag-js/core"
-import type { CommonProperties, Context, Orientation, RequiredBy } from "@zag-js/types"
+import type { CommonProperties, Context, Orientation, PropTypes, RequiredBy } from "@zag-js/types"
 
 export type ColorChannelProps = {
   channel: ColorChannel
@@ -70,6 +70,48 @@ type PublicContext = CommonProperties & {
   onChangeEnd?: (details: ChangeDetails) => void
 }
 
+export type PublicApi<T extends PropTypes = PropTypes> = {
+  /**
+   * Whether the color picker is being dragged
+   */
+  isDragging: boolean
+  /**
+   * The current color value (as a string)
+   */
+  value: string
+  /**
+   * The current color value (as a Color object)
+   */
+  valueAsColor: Color
+  /**
+   * The current color channels of the color
+   */
+  channels: [ColorChannel, ColorChannel, ColorChannel]
+  /**
+   * Function to set the color value
+   */
+  setColor(value: string | Color): void
+  /**
+   * Function to set the color value of a specific channel
+   */
+  setChannelValue(channel: ColorChannel, value: number): void
+  /**
+   * Function to set the color format
+   */
+  setFormat(format: ColorFormat): void
+  contentProps: T["element"]
+  getAreaProps(props: ColorAreaProps): T["element"]
+  getAreaGradientProps(props: ColorAreaProps): T["element"]
+  getAreaThumbProps(props: ColorAreaProps): T["element"]
+  getChannelSliderTrackProps(props: ColorChannelProps): T["element"]
+  getChannelSliderBackgroundProps(props: ColorChannelProps): T["element"]
+  getChannelSliderThumbProps(props: ColorChannelProps): T["element"]
+  getChannelInputProps(props: ColorChannelInputProps): T["input"]
+  eyeDropperTriggerProps: T["button"]
+  getSwatchBackgroundProps(props: ColorSwatchProps): T["element"]
+  getSwatchProps(props: ColorSwatchProps): T["element"]
+}
+
 type PrivateContext = Context<{
   /**
    * The id of the thumb that is currently being dragged
@@ -112,4 +154,4 @@ export type State = S.State<MachineContext, MachineState>
 
 export type Send = S.Send<S.AnyEventObject>
 
-export type { Color, ColorChannel, ColorFormat }
+export type { Color, ColorAxes, ColorChannel, ColorFormat, ColorType }

package/src/index.ts

@@ -3,10 +3,14 @@ export { connect } from "./color-picker.connect"
 export { machine } from "./color-picker.machine"
 export type {
   Color,
+  ColorAxes,
+  ColorFormat,
   ColorAreaProps,
   ColorChannel,
   ColorChannelProps,
   ColorChannelInputProps,
   ColorSwatchProps,
+  ColorType,
   UserDefinedContext as Context,
+  PublicApi,
 } from "./color-picker.types"

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

@@ -1,4 +1,4 @@
-import { Color, type ColorChannel } from "@zag-js/color-utils"
+import type { Color, ColorChannel } from "@zag-js/color-utils"
 import { getPercentValue, snapValueToStep } from "@zag-js/numeric-range"
 
 export function getChannelDetails(color: Color, xChannel: ColorChannel, yChannel: ColorChannel) {

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

@@ -1,4 +1,4 @@
-import { Color, parseColor, type ColorChannel } from "@zag-js/color-utils"
+import { parseColor, type Color, type ColorChannel } from "@zag-js/color-utils"
 
 export function getChannelDisplayColor(color: Color, channel: ColorChannel) {
   switch (channel) {

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

@@ -1,5 +1,5 @@
-import { Color } from "@zag-js/color-utils"
-import { ExtendedColorChannel } from "../color-picker.types"
+import type { Color } from "@zag-js/color-utils"
+import type { ExtendedColorChannel } from "../color-picker.types"
 
 export function getChannelInputValue(color: Color, channel: ExtendedColorChannel) {
   switch (channel) {

package/src/utils/get-color-area-gradient.ts

@@ -1,6 +1,6 @@
-import { type ColorChannel } from "@zag-js/color-utils"
-import { Style } from "@zag-js/types"
-import { MachineContext } from "../color-picker.types"
+import type { ColorChannel } from "@zag-js/color-utils"
+import type { Style } from "@zag-js/types"
+import type { MachineContext } from "../color-picker.types"
 import {
   generateHSB_B,
   generateHSB_H,

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

@@ -1,4 +1,4 @@
-import { ColorChannelProps, MachineContext } from "../color-picker.types"
+import type { ColorChannelProps, MachineContext } from "../color-picker.types"
 
 function getSliderBgDirection(orientation: "vertical" | "horizontal", dir: "ltr" | "rtl") {
   if (orientation === "vertical") {