@zag-js/color-picker 0.19.0 → 0.20.0

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import * as _zag_js_anatomy from '@zag-js/anatomy';
-import { Orientation, RequiredBy, PropTypes, CommonProperties, Context, NormalizeProps } from '@zag-js/types';
+import { RequiredBy, Orientation, PropTypes, CommonProperties, Context, NormalizeProps } from '@zag-js/types';
 import { ColorChannel, Color, ColorFormat } 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';
@@ -7,27 +7,11 @@ import { StateMachine } from '@zag-js/core';
 
 declare const anatomy: _zag_js_anatomy.Anatomy<"area" | "areaThumb" | "areaGradient" | "channelSliderTrack" | "channelSliderTrackBackground" | "channelSliderThumb" | "channelInput" | "swatch" | "swatchBackground" | "content" | "label" | "eyeDropperTrigger">;
 
-type ColorChannelProps = {
-    channel: ColorChannel;
-    orientation?: Orientation;
-};
-type ExtendedColorChannel = ColorChannel | "hex" | "css";
-type ColorChannelInputProps = {
-    channel: ExtendedColorChannel;
-    orientation?: Orientation;
-};
-type ColorAreaProps = {
-    xChannel: ColorChannel;
-    yChannel: ColorChannel;
-};
-type ColorSwatchProps = {
-    readOnly?: boolean;
-    value: string | Color;
-};
-type ChangeDetails = {
+interface ValueChangeDetails {
     value: string;
     valueAsColor: Color;
-};
+}
+type ExtendedColorChannel = ColorChannel | "hex" | "css";
 type ElementIds = Partial<{
     content: string;
     area: string;
@@ -37,8 +21,7 @@ type ElementIds = Partial<{
     channelSliderTrack(id: ColorChannel): string;
     channelSliderThumb(id: ColorChannel): string;
 }>;
-
-type PublicContext = CommonProperties & {
+interface PublicContext extends CommonProperties {
     /**
      * The ids of the elements in the color picker. Useful for composition.
      */
@@ -62,16 +45,16 @@ type PublicContext = CommonProperties & {
     /**
      * Handler that is called when the value changes, as the user drags.
      */
-    onChange?: (details: ChangeDetails) => void;
+    onValueChange?: (details: ValueChangeDetails) => void;
     /**
      * Handler that is called when the user stops dragging.
      */
-    onChangeEnd?: (details: ChangeDetails) => void;
+    onValueChangeEnd?: (details: ValueChangeDetails) => void;
     /**
      *  The name for the form input
      */
     name?: string;
-};
+}
 type PrivateContext = Context<{}>;
 type ComputedContext = Readonly<{
     /**
@@ -96,13 +79,30 @@ type ComputedContext = Readonly<{
     isDisabled: boolean;
 }>;
 type UserDefinedContext = RequiredBy<PublicContext, "id">;
-type MachineContext = PublicContext & PrivateContext & ComputedContext;
-type MachineState = {
+interface MachineContext extends PublicContext, PrivateContext, ComputedContext {
+}
+interface MachineState {
     value: "idle" | "focused" | "dragging";
-};
+}
 type State = StateMachine.State<MachineContext, MachineState>;
 type Send = StateMachine.Send<StateMachine.AnyEventObject>;
-type MachineApi<T extends PropTypes = PropTypes> = {
+interface ColorChannelProps {
+    channel: ColorChannel;
+    orientation?: Orientation;
+}
+interface ColorChannelInputProps {
+    channel: ExtendedColorChannel;
+    orientation?: Orientation;
+}
+interface ColorAreaProps {
+    xChannel: ColorChannel;
+    yChannel: ColorChannel;
+}
+interface ColorSwatchProps {
+    readOnly?: boolean;
+    value: string | Color;
+}
+interface MachineApi<T extends PropTypes = PropTypes> {
     /**
      * Whether the color picker is being dragged
      */
@@ -151,7 +151,7 @@ type MachineApi<T extends PropTypes = PropTypes> = {
     eyeDropperTriggerProps: T["button"];
     getSwatchBackgroundProps(props: ColorSwatchProps): T["element"];
     getSwatchProps(props: ColorSwatchProps): T["element"];
-};
+}
 
 declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
 

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as _zag_js_anatomy from '@zag-js/anatomy';
-import { Orientation, RequiredBy, PropTypes, CommonProperties, Context, NormalizeProps } from '@zag-js/types';
+import { RequiredBy, Orientation, PropTypes, CommonProperties, Context, NormalizeProps } from '@zag-js/types';
 import { ColorChannel, Color, ColorFormat } 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';
@@ -7,27 +7,11 @@ import { StateMachine } from '@zag-js/core';
 
 declare const anatomy: _zag_js_anatomy.Anatomy<"area" | "areaThumb" | "areaGradient" | "channelSliderTrack" | "channelSliderTrackBackground" | "channelSliderThumb" | "channelInput" | "swatch" | "swatchBackground" | "content" | "label" | "eyeDropperTrigger">;
 
-type ColorChannelProps = {
-    channel: ColorChannel;
-    orientation?: Orientation;
-};
-type ExtendedColorChannel = ColorChannel | "hex" | "css";
-type ColorChannelInputProps = {
-    channel: ExtendedColorChannel;
-    orientation?: Orientation;
-};
-type ColorAreaProps = {
-    xChannel: ColorChannel;
-    yChannel: ColorChannel;
-};
-type ColorSwatchProps = {
-    readOnly?: boolean;
-    value: string | Color;
-};
-type ChangeDetails = {
+interface ValueChangeDetails {
     value: string;
     valueAsColor: Color;
-};
+}
+type ExtendedColorChannel = ColorChannel | "hex" | "css";
 type ElementIds = Partial<{
     content: string;
     area: string;
@@ -37,8 +21,7 @@ type ElementIds = Partial<{
     channelSliderTrack(id: ColorChannel): string;
     channelSliderThumb(id: ColorChannel): string;
 }>;
-
-type PublicContext = CommonProperties & {
+interface PublicContext extends CommonProperties {
     /**
      * The ids of the elements in the color picker. Useful for composition.
      */
@@ -62,16 +45,16 @@ type PublicContext = CommonProperties & {
     /**
      * Handler that is called when the value changes, as the user drags.
      */
-    onChange?: (details: ChangeDetails) => void;
+    onValueChange?: (details: ValueChangeDetails) => void;
     /**
      * Handler that is called when the user stops dragging.
      */
-    onChangeEnd?: (details: ChangeDetails) => void;
+    onValueChangeEnd?: (details: ValueChangeDetails) => void;
     /**
      *  The name for the form input
      */
     name?: string;
-};
+}
 type PrivateContext = Context<{}>;
 type ComputedContext = Readonly<{
     /**
@@ -96,13 +79,30 @@ type ComputedContext = Readonly<{
     isDisabled: boolean;
 }>;
 type UserDefinedContext = RequiredBy<PublicContext, "id">;
-type MachineContext = PublicContext & PrivateContext & ComputedContext;
-type MachineState = {
+interface MachineContext extends PublicContext, PrivateContext, ComputedContext {
+}
+interface MachineState {
     value: "idle" | "focused" | "dragging";
-};
+}
 type State = StateMachine.State<MachineContext, MachineState>;
 type Send = StateMachine.Send<StateMachine.AnyEventObject>;
-type MachineApi<T extends PropTypes = PropTypes> = {
+interface ColorChannelProps {
+    channel: ColorChannel;
+    orientation?: Orientation;
+}
+interface ColorChannelInputProps {
+    channel: ExtendedColorChannel;
+    orientation?: Orientation;
+}
+interface ColorAreaProps {
+    xChannel: ColorChannel;
+    yChannel: ColorChannel;
+}
+interface ColorSwatchProps {
+    readOnly?: boolean;
+    value: string | Color;
+}
+interface MachineApi<T extends PropTypes = PropTypes> {
     /**
      * Whether the color picker is being dragged
      */
@@ -151,7 +151,7 @@ type MachineApi<T extends PropTypes = PropTypes> = {
     eyeDropperTriggerProps: T["button"];
     getSwatchBackgroundProps(props: ColorSwatchProps): T["element"];
     getSwatchProps(props: ColorSwatchProps): T["element"];
-};
+}
 
 declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
 

package/dist/index.js

@@ -977,7 +977,7 @@ function machine(userContext) {
             const format = ctx2.valueAsColor.getColorSpace();
             const color = (0, import_color_utils3.parseColor)(sRGBHex).toFormat(format);
             set.value(ctx2, color);
-            ctx2.onChangeEnd?.({ value: ctx2.value, valueAsColor: color });
+            ctx2.onValueChangeEnd?.({ value: ctx2.value, valueAsColor: color });
           }).catch(() => void 0);
         },
         setActiveChannel(ctx2, evt) {
@@ -1105,20 +1105,24 @@ function machine(userContext) {
     }
   );
 }
-var getDetails = (ctx) => ({
-  value: ctx.value,
-  valueAsColor: ctx.valueAsColor
-});
 var invoke = {
   changeEnd(ctx) {
-    ctx.onChangeEnd?.(getDetails(ctx));
+    ctx.onValueChangeEnd?.({
+      value: ctx.value,
+      valueAsColor: ctx.valueAsColor
+    });
   },
   change(ctx) {
-    ctx.onChange?.(getDetails(ctx));
+    ctx.onValueChange?.({
+      value: ctx.value,
+      valueAsColor: ctx.valueAsColor
+    });
   }
 };
 var set = {
   value(ctx, color) {
+    if (ctx.valueAsColor.isEqual(color))
+      return;
     ctx.value = color.toString("css");
     invoke.change(ctx);
   }

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  ColorAxes,\n  ColorFormat,\n  ColorAreaProps,\n  ColorChannel,\n  ColorChannelProps,\n  ColorChannelInputProps,\n  ColorSwatchProps,\n  ColorType,\n  UserDefinedContext as Context,\n  MachineApi as Api,\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  \"channelSliderTrackBackground\",\n  \"channelSliderThumb\",\n  \"channelInput\",\n  \"swatch\",\n  \"swatchBackground\",\n  \"content\",\n  \"label\",\n  \"eyeDropperTrigger\",\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 { visuallyHiddenStyle } from \"@zag-js/visually-hidden\"\nimport { parts } from \"./color-picker.anatomy\"\nimport { dom } from \"./color-picker.dom\"\nimport type {\n  ColorAreaProps,\n  ColorChannelInputProps,\n  ColorChannelProps,\n  ColorSwatchProps,\n  MachineApi,\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>): MachineApi<T> {\n  const valueAsColor = state.context.valueAsColor\n  const value = state.context.value\n  const isDisabled = state.context.isDisabled\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,\n    valueAsColor,\n    alpha: valueAsColor.getChannelValue(\"alpha\"),\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    setAlpha(value: number) {\n      const color = valueAsColor.withChannelValue(\"alpha\", value)\n      send({ type: \"VALUE.SET\", value: color, src: \"set-alpha\" })\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        onFocus() {\n          send({ type: \"AREA.FOCUS\", id: \"area\" })\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.channelSliderTrackBackground.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    hiddenInputProps: normalize.input({\n      type: \"text\",\n      disabled: isDisabled,\n      name: state.context.name,\n      id: dom.getHiddenInputId(state.context),\n      style: visuallyHiddenStyle,\n      defaultValue: value,\n      onChange(event) {\n        const value = event.currentTarget.value\n        send({ type: \"VALUE.SET\", value, src: \"input.change\" })\n      },\n    }),\n\n    eyeDropperTriggerProps: normalize.button({\n      ...parts.eyeDropperTrigger.attrs,\n      disabled: isDisabled,\n      \"data-disabled\": dataAttr(isDisabled),\n      \"aria-label\": \"Pick a color from the screen\",\n      onClick() {\n        if (!isInteractive) return\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.swatchBackground.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 || !isInteractive) 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  getHiddenInputId: (ctx: Ctx) => `color-picker:${ctx.id}:hidden-input`,\n\n  getContentEl: (ctx: Ctx) => dom.getById(ctx, dom.getContentId(ctx)),\n  getAreaThumbEl: (ctx: Ctx) => dom.getById(ctx, dom.getAreaThumbId(ctx)),\n  getChannelSliderThumbEl: (ctx: Ctx, channel: ColorChannel) =>\n    dom.getById(ctx, dom.getChannelSliderThumbId(ctx, channel)),\n  getChannelInputEl: (ctx: Ctx, channel: string) =>\n    dom.getById<HTMLInputElement>(ctx, dom.getChannelInputId(ctx, channel)),\n\n  getHiddenInputEl: (ctx: Ctx) => dom.getById<HTMLInputElement>(ctx, dom.getHiddenInputId(ctx)),\n  getAreaEl: (ctx: Ctx) => dom.getById(ctx, dom.getAreaId(ctx)),\n  getAreaValueFromPoint(ctx: Ctx, point: Point) {\n    const areaEl = dom.getAreaEl(ctx)\n    if (!areaEl) return\n    const { percent } = getRelativePoint(point, areaEl)\n    return percent\n  },\n\n  getChannelSliderTrackEl: (ctx: Ctx, channel: ColorChannel) => {\n    return dom.getById(ctx, dom.getChannelSliderTrackId(ctx, channel))\n  },\n  getChannelSliderValueFromPoint(ctx: Ctx, point: Point, channel: ColorChannel) {\n    const trackEl = dom.getChannelSliderTrackEl(ctx, channel)\n    if (!trackEl) return\n    const { percent } = getRelativePoint(point, trackEl)\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 | null | undefined) {\n  if (channel == null) return\n\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 { parseColor, type Color } 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 { trackFormControl } from \"@zag-js/form-utils\"\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  return createMachine<MachineContext, MachineState>(\n    {\n      id: \"color-picker\",\n      initial: \"idle\",\n      context: {\n        dir: \"ltr\",\n        value: \"#D9D9D9\",\n        disabled: false,\n        ...ctx,\n        activeId: null,\n        activeChannel: null,\n        activeOrientation: null,\n        fieldsetDisabled: false,\n      },\n\n      computed: {\n        isRtl: (ctx) => ctx.dir === \"rtl\",\n        isDisabled: (ctx) => !!ctx.disabled || ctx.fieldsetDisabled,\n        isInteractive: (ctx) => !(ctx.isDisabled || ctx.readOnly),\n        valueAsColor: (ctx) => parseColor(ctx.value),\n      },\n\n      on: {\n        \"VALUE.SET\": {\n          actions: [\"setValue\"],\n        },\n      },\n\n      activities: [\"trackFormControl\"],\n\n      watch: {\n        value: [\"syncInputElements\"],\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            \"AREA.FOCUS\": {\n              target: \"focused\",\n              actions: [\"setActiveChannel\"],\n            },\n            \"CHANNEL_SLIDER.POINTER_DOWN\": {\n              target: \"dragging\",\n              actions: [\"setActiveChannel\", \"setChannelColorFromPoint\", \"focusChannelThumb\"],\n            },\n            \"CHANNEL_SLIDER.FOCUS\": {\n              target: \"focused\",\n              actions: [\"setActiveChannel\"],\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        trackFormControl(ctx, _evt, { send, initialContext }) {\n          const inputEl = dom.getHiddenInputEl(ctx)\n          return trackFormControl(inputEl, {\n            onFieldsetDisabledChange(disabled) {\n              ctx.fieldsetDisabled = disabled\n            },\n            onFormReset() {\n              send({ type: \"VALUE.SET\", value: initialContext.value, src: \"form.reset\" })\n            },\n          })\n        },\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              set.value(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          if (!percent) return\n\n          const { getColorFromPoint } = getChannelDetails(ctx.valueAsColor, xChannel, yChannel)\n          const color = getColorFromPoint(percent.x, percent.y)\n\n          if (!color) return\n          set.value(ctx, color)\n        },\n        setChannelColorFromPoint(ctx, evt) {\n          const channel = evt.channel || ctx.activeId\n\n          const percent = dom.getChannelSliderValueFromPoint(ctx, evt.point, channel)\n          if (!percent) return\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          set.value(ctx, newColor)\n        },\n        setValue(ctx, evt) {\n          set.value(ctx, evt.value)\n        },\n        syncInputElements(ctx) {\n          // sync channel inputs\n          const inputs = dom.getChannelInputEls(ctx)\n          inputs.forEach((input) => {\n            const channel = input.dataset.channel as ExtendedColorChannel | null\n            dom.setValue(input, getChannelInputValue(ctx.valueAsColor, channel))\n          })\n\n          // sync hidden input\n          dom.setValue(dom.getHiddenInputEl(ctx), ctx.value)\n        },\n        invokeOnChangeEnd(ctx) {\n          invoke.changeEnd(ctx)\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            set.value(ctx, newColor)\n            //\n          } catch {\n            // reset input value\n            const inputEl = dom.getChannelInputEl(ctx, channel)\n            dom.setValue(inputEl, 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 color = ctx.valueAsColor.withChannelValue(evt.channel, clampValue(value, minValue, maxValue))\n          set.value(ctx, color)\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 color = ctx.valueAsColor.withChannelValue(evt.channel, clampValue(value, minValue, maxValue))\n          set.value(ctx, color)\n        },\n\n        incrementXChannel(ctx, evt) {\n          const { xChannel, yChannel } = evt.channel\n          const { incrementX } = getChannelDetails(ctx.valueAsColor, xChannel, yChannel)\n          const color = ctx.valueAsColor.withChannelValue(xChannel, incrementX(evt.step))\n          set.value(ctx, color)\n        },\n        decrementXChannel(ctx, evt) {\n          const { xChannel, yChannel } = evt.channel\n          const { decrementX } = getChannelDetails(ctx.valueAsColor, xChannel, yChannel)\n          const color = ctx.valueAsColor.withChannelValue(xChannel, decrementX(evt.step))\n          set.value(ctx, color)\n        },\n\n        incrementYChannel(ctx, evt) {\n          const { xChannel, yChannel } = evt.channel\n          const { incrementY } = getChannelDetails(ctx.valueAsColor, xChannel, yChannel)\n          const color = ctx.valueAsColor.withChannelValue(yChannel, incrementY(evt.step))\n          set.value(ctx, color)\n        },\n        decrementYChannel(ctx, evt) {\n          const { xChannel, yChannel } = evt.channel\n          const { decrementY } = getChannelDetails(ctx.valueAsColor, xChannel, yChannel)\n          const color = ctx.valueAsColor.withChannelValue(yChannel, decrementY(evt.step))\n          set.value(ctx, color)\n        },\n\n        setChannelToMax(ctx, evt) {\n          const { maxValue } = ctx.valueAsColor.getChannelRange(evt.channel)\n          const color = ctx.valueAsColor.withChannelValue(evt.channel, maxValue)\n          set.value(ctx, color)\n        },\n        setChannelToMin(ctx, evt) {\n          const { minValue } = ctx.valueAsColor.getChannelRange(evt.channel)\n          const color = ctx.valueAsColor.withChannelValue(evt.channel, minValue)\n          set.value(ctx, color)\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 getDetails = (ctx: MachineContext) => ({\n  value: ctx.value,\n  valueAsColor: ctx.valueAsColor,\n})\n\nconst invoke = {\n  changeEnd(ctx: MachineContext) {\n    ctx.onChangeEnd?.(getDetails(ctx))\n  },\n  change(ctx: MachineContext) {\n    ctx.onChange?.(getDetails(ctx))\n  },\n}\n\nconst set = {\n  value(ctx: MachineContext, color: Color) {\n    ctx.value = color.toString(\"css\")\n    invoke.change(ctx)\n  },\n}\n"],"mappings":"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","names":["import_color_utils","import_dom_event","import_dom_query","value","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  MachineApi as Api,\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  \"channelSliderTrackBackground\",\n  \"channelSliderThumb\",\n  \"channelInput\",\n  \"swatch\",\n  \"swatchBackground\",\n  \"content\",\n  \"label\",\n  \"eyeDropperTrigger\",\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 { visuallyHiddenStyle } from \"@zag-js/visually-hidden\"\nimport { parts } from \"./color-picker.anatomy\"\nimport { dom } from \"./color-picker.dom\"\nimport type {\n  ColorAreaProps,\n  ColorChannelInputProps,\n  ColorChannelProps,\n  ColorSwatchProps,\n  MachineApi,\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>): MachineApi<T> {\n  const valueAsColor = state.context.valueAsColor\n  const value = state.context.value\n  const isDisabled = state.context.isDisabled\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,\n    valueAsColor,\n    alpha: valueAsColor.getChannelValue(\"alpha\"),\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    setAlpha(value: number) {\n      const color = valueAsColor.withChannelValue(\"alpha\", value)\n      send({ type: \"VALUE.SET\", value: color, src: \"set-alpha\" })\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        onFocus() {\n          send({ type: \"AREA.FOCUS\", id: \"area\" })\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.channelSliderTrackBackground.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    hiddenInputProps: normalize.input({\n      type: \"text\",\n      disabled: isDisabled,\n      name: state.context.name,\n      id: dom.getHiddenInputId(state.context),\n      style: visuallyHiddenStyle,\n      defaultValue: value,\n      onChange(event) {\n        const value = event.currentTarget.value\n        send({ type: \"VALUE.SET\", value, src: \"input.change\" })\n      },\n    }),\n\n    eyeDropperTriggerProps: normalize.button({\n      ...parts.eyeDropperTrigger.attrs,\n      disabled: isDisabled,\n      \"data-disabled\": dataAttr(isDisabled),\n      \"aria-label\": \"Pick a color from the screen\",\n      onClick() {\n        if (!isInteractive) return\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.swatchBackground.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 || !isInteractive) 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  getHiddenInputId: (ctx: Ctx) => `color-picker:${ctx.id}:hidden-input`,\n\n  getContentEl: (ctx: Ctx) => dom.getById(ctx, dom.getContentId(ctx)),\n  getAreaThumbEl: (ctx: Ctx) => dom.getById(ctx, dom.getAreaThumbId(ctx)),\n  getChannelSliderThumbEl: (ctx: Ctx, channel: ColorChannel) =>\n    dom.getById(ctx, dom.getChannelSliderThumbId(ctx, channel)),\n  getChannelInputEl: (ctx: Ctx, channel: string) =>\n    dom.getById<HTMLInputElement>(ctx, dom.getChannelInputId(ctx, channel)),\n\n  getHiddenInputEl: (ctx: Ctx) => dom.getById<HTMLInputElement>(ctx, dom.getHiddenInputId(ctx)),\n  getAreaEl: (ctx: Ctx) => dom.getById(ctx, dom.getAreaId(ctx)),\n  getAreaValueFromPoint(ctx: Ctx, point: Point) {\n    const areaEl = dom.getAreaEl(ctx)\n    if (!areaEl) return\n    const { percent } = getRelativePoint(point, areaEl)\n    return percent\n  },\n\n  getChannelSliderTrackEl: (ctx: Ctx, channel: ColorChannel) => {\n    return dom.getById(ctx, dom.getChannelSliderTrackId(ctx, channel))\n  },\n  getChannelSliderValueFromPoint(ctx: Ctx, point: Point, channel: ColorChannel) {\n    const trackEl = dom.getChannelSliderTrackEl(ctx, channel)\n    if (!trackEl) return\n    const { percent } = getRelativePoint(point, trackEl)\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 | null | undefined) {\n  if (channel == null) return\n\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 { parseColor, type Color } 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 { trackFormControl } from \"@zag-js/form-utils\"\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  return createMachine<MachineContext, MachineState>(\n    {\n      id: \"color-picker\",\n      initial: \"idle\",\n      context: {\n        dir: \"ltr\",\n        value: \"#D9D9D9\",\n        disabled: false,\n        ...ctx,\n        activeId: null,\n        activeChannel: null,\n        activeOrientation: null,\n        fieldsetDisabled: false,\n      },\n\n      computed: {\n        isRtl: (ctx) => ctx.dir === \"rtl\",\n        isDisabled: (ctx) => !!ctx.disabled || ctx.fieldsetDisabled,\n        isInteractive: (ctx) => !(ctx.isDisabled || ctx.readOnly),\n        valueAsColor: (ctx) => parseColor(ctx.value),\n      },\n\n      on: {\n        \"VALUE.SET\": {\n          actions: [\"setValue\"],\n        },\n      },\n\n      activities: [\"trackFormControl\"],\n\n      watch: {\n        value: [\"syncInputElements\"],\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            \"AREA.FOCUS\": {\n              target: \"focused\",\n              actions: [\"setActiveChannel\"],\n            },\n            \"CHANNEL_SLIDER.POINTER_DOWN\": {\n              target: \"dragging\",\n              actions: [\"setActiveChannel\", \"setChannelColorFromPoint\", \"focusChannelThumb\"],\n            },\n            \"CHANNEL_SLIDER.FOCUS\": {\n              target: \"focused\",\n              actions: [\"setActiveChannel\"],\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        trackFormControl(ctx, _evt, { send, initialContext }) {\n          const inputEl = dom.getHiddenInputEl(ctx)\n          return trackFormControl(inputEl, {\n            onFieldsetDisabledChange(disabled) {\n              ctx.fieldsetDisabled = disabled\n            },\n            onFormReset() {\n              send({ type: \"VALUE.SET\", value: initialContext.value, src: \"form.reset\" })\n            },\n          })\n        },\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              set.value(ctx, color)\n              ctx.onValueChangeEnd?.({ 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          if (!percent) return\n\n          const { getColorFromPoint } = getChannelDetails(ctx.valueAsColor, xChannel, yChannel)\n          const color = getColorFromPoint(percent.x, percent.y)\n\n          if (!color) return\n          set.value(ctx, color)\n        },\n        setChannelColorFromPoint(ctx, evt) {\n          const channel = evt.channel || ctx.activeId\n\n          const percent = dom.getChannelSliderValueFromPoint(ctx, evt.point, channel)\n          if (!percent) return\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          set.value(ctx, newColor)\n        },\n        setValue(ctx, evt) {\n          set.value(ctx, evt.value)\n        },\n        syncInputElements(ctx) {\n          // sync channel inputs\n          const inputs = dom.getChannelInputEls(ctx)\n          inputs.forEach((input) => {\n            const channel = input.dataset.channel as ExtendedColorChannel | null\n            dom.setValue(input, getChannelInputValue(ctx.valueAsColor, channel))\n          })\n\n          // sync hidden input\n          dom.setValue(dom.getHiddenInputEl(ctx), ctx.value)\n        },\n        invokeOnChangeEnd(ctx) {\n          invoke.changeEnd(ctx)\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            set.value(ctx, newColor)\n            //\n          } catch {\n            // reset input value\n            const inputEl = dom.getChannelInputEl(ctx, channel)\n            dom.setValue(inputEl, 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 color = ctx.valueAsColor.withChannelValue(evt.channel, clampValue(value, minValue, maxValue))\n          set.value(ctx, color)\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 color = ctx.valueAsColor.withChannelValue(evt.channel, clampValue(value, minValue, maxValue))\n          set.value(ctx, color)\n        },\n\n        incrementXChannel(ctx, evt) {\n          const { xChannel, yChannel } = evt.channel\n          const { incrementX } = getChannelDetails(ctx.valueAsColor, xChannel, yChannel)\n          const color = ctx.valueAsColor.withChannelValue(xChannel, incrementX(evt.step))\n          set.value(ctx, color)\n        },\n        decrementXChannel(ctx, evt) {\n          const { xChannel, yChannel } = evt.channel\n          const { decrementX } = getChannelDetails(ctx.valueAsColor, xChannel, yChannel)\n          const color = ctx.valueAsColor.withChannelValue(xChannel, decrementX(evt.step))\n          set.value(ctx, color)\n        },\n\n        incrementYChannel(ctx, evt) {\n          const { xChannel, yChannel } = evt.channel\n          const { incrementY } = getChannelDetails(ctx.valueAsColor, xChannel, yChannel)\n          const color = ctx.valueAsColor.withChannelValue(yChannel, incrementY(evt.step))\n          set.value(ctx, color)\n        },\n        decrementYChannel(ctx, evt) {\n          const { xChannel, yChannel } = evt.channel\n          const { decrementY } = getChannelDetails(ctx.valueAsColor, xChannel, yChannel)\n          const color = ctx.valueAsColor.withChannelValue(yChannel, decrementY(evt.step))\n          set.value(ctx, color)\n        },\n\n        setChannelToMax(ctx, evt) {\n          const { maxValue } = ctx.valueAsColor.getChannelRange(evt.channel)\n          const color = ctx.valueAsColor.withChannelValue(evt.channel, maxValue)\n          set.value(ctx, color)\n        },\n        setChannelToMin(ctx, evt) {\n          const { minValue } = ctx.valueAsColor.getChannelRange(evt.channel)\n          const color = ctx.valueAsColor.withChannelValue(evt.channel, minValue)\n          set.value(ctx, color)\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 invoke = {\n  changeEnd(ctx: MachineContext) {\n    ctx.onValueChangeEnd?.({\n      value: ctx.value,\n      valueAsColor: ctx.valueAsColor,\n    })\n  },\n  change(ctx: MachineContext) {\n    ctx.onValueChange?.({\n      value: ctx.value,\n      valueAsColor: ctx.valueAsColor,\n    })\n  },\n}\n\nconst set = {\n  value(ctx: MachineContext, color: Color) {\n    if (ctx.valueAsColor.isEqual(color)) return\n    ctx.value = color.toString(\"css\")\n    invoke.change(ctx)\n  },\n}\n"],"mappings":"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","names":["import_color_utils","import_dom_event","import_dom_query","value","import_color_utils","import_dom_event","import_dom_query","import_numeric_range","ctx"]}

package/dist/index.mjs

@@ -956,7 +956,7 @@ function machine(userContext) {
             const format = ctx2.valueAsColor.getColorSpace();
             const color = parseColor2(sRGBHex).toFormat(format);
             set.value(ctx2, color);
-            ctx2.onChangeEnd?.({ value: ctx2.value, valueAsColor: color });
+            ctx2.onValueChangeEnd?.({ value: ctx2.value, valueAsColor: color });
           }).catch(() => void 0);
         },
         setActiveChannel(ctx2, evt) {
@@ -1084,20 +1084,24 @@ function machine(userContext) {
     }
   );
 }
-var getDetails = (ctx) => ({
-  value: ctx.value,
-  valueAsColor: ctx.valueAsColor
-});
 var invoke = {
   changeEnd(ctx) {
-    ctx.onChangeEnd?.(getDetails(ctx));
+    ctx.onValueChangeEnd?.({
+      value: ctx.value,
+      valueAsColor: ctx.valueAsColor
+    });
   },
   change(ctx) {
-    ctx.onChange?.(getDetails(ctx));
+    ctx.onValueChange?.({
+      value: ctx.value,
+      valueAsColor: ctx.valueAsColor
+    });
   }
 };
 var set = {
   value(ctx, color) {
+    if (ctx.valueAsColor.isEqual(color))
+      return;
     ctx.value = color.toString("css");
     invoke.change(ctx);
   }

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  \"channelSliderTrackBackground\",\n  \"channelSliderThumb\",\n  \"channelInput\",\n  \"swatch\",\n  \"swatchBackground\",\n  \"content\",\n  \"label\",\n  \"eyeDropperTrigger\",\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 { visuallyHiddenStyle } from \"@zag-js/visually-hidden\"\nimport { parts } from \"./color-picker.anatomy\"\nimport { dom } from \"./color-picker.dom\"\nimport type {\n  ColorAreaProps,\n  ColorChannelInputProps,\n  ColorChannelProps,\n  ColorSwatchProps,\n  MachineApi,\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>): MachineApi<T> {\n  const valueAsColor = state.context.valueAsColor\n  const value = state.context.value\n  const isDisabled = state.context.isDisabled\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,\n    valueAsColor,\n    alpha: valueAsColor.getChannelValue(\"alpha\"),\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    setAlpha(value: number) {\n      const color = valueAsColor.withChannelValue(\"alpha\", value)\n      send({ type: \"VALUE.SET\", value: color, src: \"set-alpha\" })\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        onFocus() {\n          send({ type: \"AREA.FOCUS\", id: \"area\" })\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.channelSliderTrackBackground.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    hiddenInputProps: normalize.input({\n      type: \"text\",\n      disabled: isDisabled,\n      name: state.context.name,\n      id: dom.getHiddenInputId(state.context),\n      style: visuallyHiddenStyle,\n      defaultValue: value,\n      onChange(event) {\n        const value = event.currentTarget.value\n        send({ type: \"VALUE.SET\", value, src: \"input.change\" })\n      },\n    }),\n\n    eyeDropperTriggerProps: normalize.button({\n      ...parts.eyeDropperTrigger.attrs,\n      disabled: isDisabled,\n      \"data-disabled\": dataAttr(isDisabled),\n      \"aria-label\": \"Pick a color from the screen\",\n      onClick() {\n        if (!isInteractive) return\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.swatchBackground.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 || !isInteractive) 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  getHiddenInputId: (ctx: Ctx) => `color-picker:${ctx.id}:hidden-input`,\n\n  getContentEl: (ctx: Ctx) => dom.getById(ctx, dom.getContentId(ctx)),\n  getAreaThumbEl: (ctx: Ctx) => dom.getById(ctx, dom.getAreaThumbId(ctx)),\n  getChannelSliderThumbEl: (ctx: Ctx, channel: ColorChannel) =>\n    dom.getById(ctx, dom.getChannelSliderThumbId(ctx, channel)),\n  getChannelInputEl: (ctx: Ctx, channel: string) =>\n    dom.getById<HTMLInputElement>(ctx, dom.getChannelInputId(ctx, channel)),\n\n  getHiddenInputEl: (ctx: Ctx) => dom.getById<HTMLInputElement>(ctx, dom.getHiddenInputId(ctx)),\n  getAreaEl: (ctx: Ctx) => dom.getById(ctx, dom.getAreaId(ctx)),\n  getAreaValueFromPoint(ctx: Ctx, point: Point) {\n    const areaEl = dom.getAreaEl(ctx)\n    if (!areaEl) return\n    const { percent } = getRelativePoint(point, areaEl)\n    return percent\n  },\n\n  getChannelSliderTrackEl: (ctx: Ctx, channel: ColorChannel) => {\n    return dom.getById(ctx, dom.getChannelSliderTrackId(ctx, channel))\n  },\n  getChannelSliderValueFromPoint(ctx: Ctx, point: Point, channel: ColorChannel) {\n    const trackEl = dom.getChannelSliderTrackEl(ctx, channel)\n    if (!trackEl) return\n    const { percent } = getRelativePoint(point, trackEl)\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 | null | undefined) {\n  if (channel == null) return\n\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 { parseColor, type Color } 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 { trackFormControl } from \"@zag-js/form-utils\"\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  return createMachine<MachineContext, MachineState>(\n    {\n      id: \"color-picker\",\n      initial: \"idle\",\n      context: {\n        dir: \"ltr\",\n        value: \"#D9D9D9\",\n        disabled: false,\n        ...ctx,\n        activeId: null,\n        activeChannel: null,\n        activeOrientation: null,\n        fieldsetDisabled: false,\n      },\n\n      computed: {\n        isRtl: (ctx) => ctx.dir === \"rtl\",\n        isDisabled: (ctx) => !!ctx.disabled || ctx.fieldsetDisabled,\n        isInteractive: (ctx) => !(ctx.isDisabled || ctx.readOnly),\n        valueAsColor: (ctx) => parseColor(ctx.value),\n      },\n\n      on: {\n        \"VALUE.SET\": {\n          actions: [\"setValue\"],\n        },\n      },\n\n      activities: [\"trackFormControl\"],\n\n      watch: {\n        value: [\"syncInputElements\"],\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            \"AREA.FOCUS\": {\n              target: \"focused\",\n              actions: [\"setActiveChannel\"],\n            },\n            \"CHANNEL_SLIDER.POINTER_DOWN\": {\n              target: \"dragging\",\n              actions: [\"setActiveChannel\", \"setChannelColorFromPoint\", \"focusChannelThumb\"],\n            },\n            \"CHANNEL_SLIDER.FOCUS\": {\n              target: \"focused\",\n              actions: [\"setActiveChannel\"],\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        trackFormControl(ctx, _evt, { send, initialContext }) {\n          const inputEl = dom.getHiddenInputEl(ctx)\n          return trackFormControl(inputEl, {\n            onFieldsetDisabledChange(disabled) {\n              ctx.fieldsetDisabled = disabled\n            },\n            onFormReset() {\n              send({ type: \"VALUE.SET\", value: initialContext.value, src: \"form.reset\" })\n            },\n          })\n        },\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              set.value(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          if (!percent) return\n\n          const { getColorFromPoint } = getChannelDetails(ctx.valueAsColor, xChannel, yChannel)\n          const color = getColorFromPoint(percent.x, percent.y)\n\n          if (!color) return\n          set.value(ctx, color)\n        },\n        setChannelColorFromPoint(ctx, evt) {\n          const channel = evt.channel || ctx.activeId\n\n          const percent = dom.getChannelSliderValueFromPoint(ctx, evt.point, channel)\n          if (!percent) return\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          set.value(ctx, newColor)\n        },\n        setValue(ctx, evt) {\n          set.value(ctx, evt.value)\n        },\n        syncInputElements(ctx) {\n          // sync channel inputs\n          const inputs = dom.getChannelInputEls(ctx)\n          inputs.forEach((input) => {\n            const channel = input.dataset.channel as ExtendedColorChannel | null\n            dom.setValue(input, getChannelInputValue(ctx.valueAsColor, channel))\n          })\n\n          // sync hidden input\n          dom.setValue(dom.getHiddenInputEl(ctx), ctx.value)\n        },\n        invokeOnChangeEnd(ctx) {\n          invoke.changeEnd(ctx)\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            set.value(ctx, newColor)\n            //\n          } catch {\n            // reset input value\n            const inputEl = dom.getChannelInputEl(ctx, channel)\n            dom.setValue(inputEl, 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 color = ctx.valueAsColor.withChannelValue(evt.channel, clampValue(value, minValue, maxValue))\n          set.value(ctx, color)\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 color = ctx.valueAsColor.withChannelValue(evt.channel, clampValue(value, minValue, maxValue))\n          set.value(ctx, color)\n        },\n\n        incrementXChannel(ctx, evt) {\n          const { xChannel, yChannel } = evt.channel\n          const { incrementX } = getChannelDetails(ctx.valueAsColor, xChannel, yChannel)\n          const color = ctx.valueAsColor.withChannelValue(xChannel, incrementX(evt.step))\n          set.value(ctx, color)\n        },\n        decrementXChannel(ctx, evt) {\n          const { xChannel, yChannel } = evt.channel\n          const { decrementX } = getChannelDetails(ctx.valueAsColor, xChannel, yChannel)\n          const color = ctx.valueAsColor.withChannelValue(xChannel, decrementX(evt.step))\n          set.value(ctx, color)\n        },\n\n        incrementYChannel(ctx, evt) {\n          const { xChannel, yChannel } = evt.channel\n          const { incrementY } = getChannelDetails(ctx.valueAsColor, xChannel, yChannel)\n          const color = ctx.valueAsColor.withChannelValue(yChannel, incrementY(evt.step))\n          set.value(ctx, color)\n        },\n        decrementYChannel(ctx, evt) {\n          const { xChannel, yChannel } = evt.channel\n          const { decrementY } = getChannelDetails(ctx.valueAsColor, xChannel, yChannel)\n          const color = ctx.valueAsColor.withChannelValue(yChannel, decrementY(evt.step))\n          set.value(ctx, color)\n        },\n\n        setChannelToMax(ctx, evt) {\n          const { maxValue } = ctx.valueAsColor.getChannelRange(evt.channel)\n          const color = ctx.valueAsColor.withChannelValue(evt.channel, maxValue)\n          set.value(ctx, color)\n        },\n        setChannelToMin(ctx, evt) {\n          const { minValue } = ctx.valueAsColor.getChannelRange(evt.channel)\n          const color = ctx.valueAsColor.withChannelValue(evt.channel, minValue)\n          set.value(ctx, color)\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 getDetails = (ctx: MachineContext) => ({\n  value: ctx.value,\n  valueAsColor: ctx.valueAsColor,\n})\n\nconst invoke = {\n  changeEnd(ctx: MachineContext) {\n    ctx.onChangeEnd?.(getDetails(ctx))\n  },\n  change(ctx: MachineContext) {\n    ctx.onChange?.(getDetails(ctx))\n  },\n}\n\nconst set = {\n  value(ctx: MachineContext, color: Color) {\n    ctx.value = color.toString(\"css\")\n    invoke.change(ctx)\n  },\n}\n"],"mappings":";AAAA,SAAS,qBAAqB;AAEvB,IAAM,UAAU,cAAc,gBAAgB;AAAA,EACnD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAEM,IAAM,QAAQ,QAAQ,MAAM;;;ACjBnC,SAAS,sBAAuE;AAChF;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AACP,SAAS,gBAAgB;AAEzB,SAAS,2BAA2B;;;ACXpC,SAAS,wBAAoC;AAC7C,SAAS,aAAa,gBAAgB;AAG/B,IAAM,MAAM,YAAY;AAAA,EAC7B,cAAc,CAAC,QAAa,IAAI,KAAK,WAAW,gBAAgB,IAAI,EAAE;AAAA,EACtE,WAAW,CAAC,QAAa,IAAI,KAAK,QAAQ,gBAAgB,IAAI,EAAE;AAAA,EAChE,mBAAmB,CAAC,QAAa,IAAI,KAAK,gBAAgB,gBAAgB,IAAI,EAAE;AAAA,EAChF,gBAAgB,CAAC,QAAa,IAAI,KAAK,aAAa,gBAAgB,IAAI,EAAE;AAAA,EAC1E,yBAAyB,CAAC,KAAU,YAClC,IAAI,KAAK,qBAAqB,OAAO,KAAK,gBAAgB,IAAI,EAAE,iBAAiB,OAAO;AAAA,EAC1F,mBAAmB,CAAC,KAAU,YAC5B,IAAI,KAAK,eAAe,OAAO,KAAK,gBAAgB,IAAI,EAAE,UAAU,OAAO;AAAA,EAC7E,yBAAyB,CAAC,KAAU,YAClC,IAAI,KAAK,qBAAqB,OAAO,KAAK,gBAAgB,IAAI,EAAE,iBAAiB,OAAO;AAAA,EAC1F,kBAAkB,CAAC,QAAa,gBAAgB,IAAI,EAAE;AAAA,EAEtD,cAAc,CAAC,QAAa,IAAI,QAAQ,KAAK,IAAI,aAAa,GAAG,CAAC;AAAA,EAClE,gBAAgB,CAAC,QAAa,IAAI,QAAQ,KAAK,IAAI,eAAe,GAAG,CAAC;AAAA,EACtE,yBAAyB,CAAC,KAAU,YAClC,IAAI,QAAQ,KAAK,IAAI,wBAAwB,KAAK,OAAO,CAAC;AAAA,EAC5D,mBAAmB,CAAC,KAAU,YAC5B,IAAI,QAA0B,KAAK,IAAI,kBAAkB,KAAK,OAAO,CAAC;AAAA,EAExE,kBAAkB,CAAC,QAAa,IAAI,QAA0B,KAAK,IAAI,iBAAiB,GAAG,CAAC;AAAA,EAC5F,WAAW,CAAC,QAAa,IAAI,QAAQ,KAAK,IAAI,UAAU,GAAG,CAAC;AAAA,EAC5D,sBAAsB,KAAU,OAAc;AAC5C,UAAM,SAAS,IAAI,UAAU,GAAG;AAChC,QAAI,CAAC;AAAQ;AACb,UAAM,EAAE,QAAQ,IAAI,iBAAiB,OAAO,MAAM;AAClD,WAAO;AAAA,EACT;AAAA,EAEA,yBAAyB,CAAC,KAAU,YAA0B;AAC5D,WAAO,IAAI,QAAQ,KAAK,IAAI,wBAAwB,KAAK,OAAO,CAAC;AAAA,EACnE;AAAA,EACA,+BAA+B,KAAU,OAAc,SAAuB;AAC5E,UAAM,UAAU,IAAI,wBAAwB,KAAK,OAAO;AACxD,QAAI,CAAC;AAAS;AACd,UAAM,EAAE,QAAQ,IAAI,iBAAiB,OAAO,OAAO;AACnD,WAAO;AAAA,EACT;AAAA,EACA,oBAAoB,CAAC,QAAa;AAChC,WAAO,SAA2B,IAAI,aAAa,GAAG,GAAG,qBAAqB;AAAA,EAChF;AACF,CAAC;;;AC7CD,SAAS,iBAAiB,uBAAuB;AAE1C,SAAS,kBAAkB,OAAc,UAAwB,UAAwB;AAC9F,QAAM,WAAW,MAAM,kBAAkB,EAAE,UAAU,SAAS,CAAC;AAE/D,QAAM,gBAAgB,MAAM,gBAAgB,SAAS,QAAQ;AAC7D,QAAM,gBAAgB,MAAM,gBAAgB,SAAS,QAAQ;AAE7D,QAAM,EAAE,UAAU,WAAW,UAAU,WAAW,MAAM,OAAO,UAAU,UAAU,IAAI;AACvF,QAAM,EAAE,UAAU,WAAW,UAAU,WAAW,MAAM,OAAO,UAAU,UAAU,IAAI;AAEvF,QAAM,SAAS,MAAM,gBAAgB,SAAS,QAAQ;AACtD,QAAM,SAAS,MAAM,gBAAgB,SAAS,QAAQ;AAEtD,SAAO;AAAA,IACL;AAAA,IACA,cAAc;AAAA,IACd,cAAc;AAAA,IACd,kBAAkB;AAAA,IAClB,kBAAkB;AAAA,IAClB;AAAA,IACA;AAAA,IACA,mBAAmB;AACjB,UAAI,KAAK,SAAS,cAAc,YAAY;AAC5C,UAAI,IAAI,KAAK,SAAS,cAAc,YAAY;AAChD,aAAO,EAAE,GAAG,EAAE;AAAA,IAChB;AAAA,IACA,WAAW,UAAkB;AAC3B,aAAO,SAAS,WAAW,YAAY,YAAY,gBAAgB,SAAS,UAAU,WAAW,WAAW,KAAK;AAAA,IACnH;AAAA,IACA,WAAW,UAAkB;AAC3B,aAAO,SAAS,WAAW,YAAY,YAAY,gBAAgB,SAAS,UAAU,WAAW,WAAW,KAAK;AAAA,IACnH;AAAA,IACA,WAAW,UAAkB;AAC3B,aAAO,gBAAgB,SAAS,UAAU,WAAW,WAAW,KAAK;AAAA,IACvE;AAAA,IACA,WAAW,UAAkB;AAC3B,aAAO,gBAAgB,SAAS,UAAU,WAAW,WAAW,KAAK;AAAA,IACvE;AAAA,IACA,kBAAkB,GAAW,GAAW;AACtC,UAAI,YAAY,gBAAgB,GAAG,WAAW,WAAW,KAAK;AAC9D,UAAI,YAAY,gBAAgB,IAAI,GAAG,WAAW,WAAW,KAAK;AAElE,UAAI;AAEJ,UAAI,cAAc,QAAQ;AACxB,oBAAY,gBAAgB,WAAW,WAAW,WAAW,KAAK;AAClE,mBAAW,MAAM,iBAAiB,SAAS,UAAU,SAAS;AAAA,MAChE;AAEA,UAAI,cAAc,QAAQ;AACxB,oBAAY,gBAAgB,WAAW,WAAW,WAAW,KAAK;AAClE,oBAAY,YAAY,OAAO,iBAAiB,SAAS,UAAU,SAAS;AAAA,MAC9E;AAEA,aAAO;AAAA,IACT;AAAA,EACF;AACF;;;AC3DA,SAAS,kBAAiD;AAEnD,SAAS,uBAAuB,OAAc,SAAuB;AAC1E,UAAQ,SAAS;AAAA,IACf,KAAK;AACH,aAAO,WAAW,OAAO,MAAM,gBAAgB,KAAK,CAAC,cAAc;AAAA,IACrE,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AACH,aAAO,MAAM,iBAAiB,SAAS,CAAC;AAAA,IAC1C,KAAK,SAAS;AACZ,aAAO;AAAA,IACT;AAAA,IACA;AACE,YAAM,IAAI,MAAM,4BAA4B,OAAO;AAAA,EACvD;AACF;;;AChBO,SAAS,qBAAqB,OAAc,SAAkD;AACnG,MAAI,WAAW;AAAM;AAErB,UAAQ,SAAS;AAAA,IACf,KAAK;AACH,aAAO,MAAM,SAAS,KAAK;AAAA,IAC7B,KAAK;AACH,aAAO,MAAM,SAAS,KAAK;AAAA,IAC7B;AACE,aAAO,MAAM,gBAAgB,OAAO,EAAE,SAAS;AAAA,EACnD;AACF;AAEO,SAAS,qBAAqB,OAAc,SAA+B;AAChF,UAAQ,SAAS;AAAA,IACf,KAAK;AAAA,IACL,KAAK;AACH,aAAO;AAAA,IACT;AACE,aAAO,MAAM,gBAAgB,OAAO;AAAA,EACxC;AACF;;;ACxBO,IAAM,gBAAgB,CAAC,aAA+B,KAAc,WAAmB;AAC5F,QAAM,YAAY,sBAAsB,YAAY,OAAO,CAAC,GAAG,CAAC,CAAC;AACjE,QAAM,SAAS;AAAA,IACb,YAAY;AAAA,MACV,iBAAiB,sBAAsB,YAAY,OAAO,GAAG,CAAC,CAAC,QAAQ,MAAM,aAAa,MAAM;AAAA,IAClG;AAAA,IACA,oBAAoB;AAAA,MAClB,iBAAiB,sBAAsB,YAAY,OAAO,GAAG,CAAC,CAAC,QAAQ,MAAM,eAAe,MAAM;AAAA,MAClG,iBAAiB;AAAA,MACjB;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;AAEO,IAAM,gBAAgB,CAAC,aAA+B,KAAc,WAAmB;AAC5F,QAAM,YAAY,sBAAsB,YAAY,OAAO,CAAC,GAAG,CAAC,CAAC;AACjE,QAAM,SAAS;AAAA,IACb,YAAY;AAAA,MACV,iBAAiB,sBAAsB,YAAY,OAAO,GAAG,CAAC,CAAC,UAAU,MAAM,eAAe,MAAM;AAAA,IACtG;AAAA,IACA,oBAAoB;AAAA,MAClB,iBAAiB,sBAAsB,YAAY,OAAO,GAAG,CAAC,CAAC,UAAU,MAAM,iBAAiB,MAAM;AAAA,MACtG,iBAAiB;AAAA,MACjB;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;AAEO,IAAM,gBAAgB,CAAC,aAA+B,KAAc,WAAmB;AAC5F,QAAM,YAAY,sBAAsB,YAAY,OAAO,CAAC,GAAG,CAAC,CAAC;AACjE,QAAM,SAAS;AAAA,IACb,YAAY;AAAA,MACV,iBAAiB,sBAAsB,YAAY,OAAO,GAAG,CAAC,CAAC,YAAY,MAAM,eAAe,MAAM;AAAA,IACxG;AAAA,IACA,oBAAoB;AAAA,MAClB,iBAAiB,sBAAsB,YAAY,OAAO,GAAG,CAAC,CAAC,cAAc,MAAM,iBAAiB,MAAM;AAAA,MAC1G,iBAAiB;AAAA,MACjB;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;AAEO,IAAM,gBAAgB,CAAC,aAA+B,KAAc,WAAmB;AAC5F,QAAM,SAAS;AAAA,IACb,YAAY,CAAC;AAAA,IACb,oBAAoB;AAAA,MAClB,YAAY;AAAA,QACV,sBACE,YAAY,OAAO,GAAG,CAAC,CACzB;AAAA,QACA,sBAAsB,YAAY,OAAO,CAAC,GAAG,CAAC,CAAC;AAAA,QAC/C,OAAO,MAAM;AAAA,MACf,EAAE,KAAK,GAAG;AAAA,IACZ;AAAA,EACF;AACA,SAAO;AACT;AAEO,IAAM,gBAAgB,CAAC,aAA+B,KAAc,eAAuB;AAChG,QAAM,SAAS;AAAA,IACb,YAAY,CAAC;AAAA,IACb,oBAAoB;AAAA,MAClB,YAAY;AAAA,QACV,sBACE,YAAY,OAAO,CAAC,GAAG,CAAC,CAC1B,kBAAkB,UAAU,oEAAoE,UAAU;AAAA,QAC1G,sBACE,YAAY,OAAO,GAAG,CAAC,CACzB,oBAAoB,UAAU,sBAAsB,UAAU,uBAAuB,UAAU,uBAAuB,UAAU,uBAAuB,UAAU,uBAAuB,UAAU,uBAAuB,UAAU;AAAA,QACnO;AAAA,MACF,EAAE,KAAK,GAAG;AAAA,IACZ;AAAA,EACF;AACA,SAAO;AACT;AAEO,IAAM,gBAAgB,CAAC,aAA+B,KAAc,WAAmB;AAC5F,QAAM,SAAS;AAAA,IACb,YAAY,CAAC;AAAA,IACb,oBAAoB;AAAA,MAClB,iBAAiB;AAAA,QACf,sBAAsB,YAAY,OAAO,CAAC,GAAG,CAAC,CAAC,aAAa,MAAM,gBAAgB,MAAM;AAAA,QACxF,sBACE,YAAY,OAAO,GAAG,CAAC,CACzB,eAAe,MAAM,kBAAkB,MAAM,mBAAmB,MAAM,mBAAmB,MAAM,mBAAmB,MAAM,mBAAmB,MAAM,mBAAmB,MAAM;AAAA,MAC5K,EAAE,KAAK,GAAG;AAAA,IACZ;AAAA,EACF;AACA,SAAO;AACT;AAEO,IAAM,gBAAgB,CAAC,aAA+B,KAAc,WAAmB;AAC5F,QAAM,SAAS;AAAA,IACb,YAAY,CAAC;AAAA,IACb,oBAAoB;AAAA,MAClB,YAAY;AAAA,QACV,sBAAsB,YAAY,OAAO,GAAG,CAAC,CAAC;AAAA,QAC9C,sBAAsB,YAAY,OAAO,CAAC,GAAG,CAAC,CAAC;AAAA,QAC/C,OAAO,MAAM;AAAA,MACf,EAAE,KAAK,GAAG;AAAA,IACZ;AAAA,EACF;AACA,SAAO;AACT;AAEO,IAAM,gBAAgB,CAAC,aAA+B,KAAc,eAAuB;AAChG,QAAM,SAAS;AAAA,IACb,YAAY,CAAC;AAAA,IACb,oBAAoB;AAAA,MAClB,YAAY;AAAA,QACV,sBAAsB,YAAY,OAAO,CAAC,GAAG,CAAC,CAAC,iBAAiB,UAAU;AAAA,QAC1E,sBACE,YAAY,OAAO,GAAG,CAAC,CACzB,oBAAoB,UAAU,sBAAsB,UAAU,uBAAuB,UAAU,uBAAuB,UAAU,uBAAuB,UAAU,uBAAuB,UAAU,uBAAuB,UAAU;AAAA,QACnO,sBAAsB,YAAY,OAAO,CAAC,GAAG,CAAC,CAAC;AAAA,MACjD,EAAE,KAAK,GAAG;AAAA,IACZ;AAAA,EACF;AACA,SAAO;AACT;AAEO,IAAM,gBAAgB,CAAC,aAA+B,KAAc,eAAuB;AAChG,QAAM,SAAS;AAAA,IACb,YAAY,CAAC;AAAA,IACb,oBAAoB;AAAA,MAClB,YAAY;AAAA,QACV,sBAAsB,YAAY,OAAO,CAAC,GAAG,CAAC,CAAC,mBAAmB,UAAU;AAAA,QAC5E,sBACE,YAAY,OAAO,GAAG,CAAC,CACzB,oBAAoB,UAAU,sBAAsB,UAAU,uBAAuB,UAAU,uBAAuB,UAAU,uBAAuB,UAAU,uBAAuB,UAAU,uBAAuB,UAAU;AAAA,QACnO;AAAA,MACF,EAAE,KAAK,GAAG;AAAA,IACZ;AAAA,EACF;AACA,SAAO;AACT;;;AC3HO,SAAS,qBAAqB,KAAqB,UAAwB,UAAwB;AACxG,QAAM,QAAQ,IAAI;AAElB,QAAM,EAAE,SAAS,IAAI,MAAM,kBAAkB,EAAE,UAAU,SAAS,CAAC;AACnE,QAAM,SAAS,MAAM,gBAAgB,QAAQ;AAE7C,QAAM,EAAE,UAAU,MAAM,UAAU,KAAK,IAAI,MAAM,gBAAgB,QAAQ;AACzE,QAAM,cAAgC,CAAC,OAAO,IAAI,QAAQ,QAAQ,SAAS,OAAO;AAElF,MAAI,MAAM;AACV,MAAI,aAAa,EAAE,YAAY,CAAC,GAAY,oBAAoB,CAAC,EAAW;AAE5E,MAAI,cAAc,SAAS,SAAS,OAAO;AAC3C,MAAI,QAAQ,MAAM,cAAc,MAAM;AAEtC,UAAQ,UAAU;AAAA,IAChB,KAAK,OAAO;AACV,YAAM,aAAa;AACnB,mBAAa,cAAc,aAAa,KAAK,MAAM;AACnD;AAAA,IACF;AAAA,IAEA,KAAK,SAAS;AACZ,YAAM,aAAa;AACnB,mBAAa,cAAc,aAAa,KAAK,MAAM;AACnD;AAAA,IACF;AAAA,IAEA,KAAK,QAAQ;AACX,YAAM,aAAa;AACnB,mBAAa,cAAc,aAAa,KAAK,MAAM;AACnD;AAAA,IACF;AAAA,IAEA,KAAK,OAAO;AACV,YAAM,aAAa;AACnB,UAAI,OAAO;AACT,qBAAa,cAAc,aAAa,KAAK,MAAM;AAAA,MACrD,OAAO;AACL,qBAAa,cAAc,aAAa,KAAK,MAAM;AAAA,MACrD;AACA;AAAA,IACF;AAAA,IAEA,KAAK,cAAc;AACjB,YAAM,aAAa;AACnB,UAAI,OAAO;AACT,qBAAa,cAAc,aAAa,KAAK,UAAU;AAAA,MACzD,OAAO;AACL,qBAAa,cAAc,aAAa,KAAK,UAAU;AAAA,MACzD;AACA;AAAA,IACF;AAAA,IAEA,KAAK,cAAc;AACjB,YAAM,aAAa;AACnB,mBAAa,cAAc,aAAa,KAAK,UAAU;AACvD;AAAA,IACF;AAAA,IAEA,KAAK,aAAa;AAChB,YAAM,aAAa;AACnB,mBAAa,cAAc,aAAa,KAAK,MAAM;AACnD;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;;;ACjFA,SAAS,qBAAqB,aAAwC,KAAoB;AACxF,MAAI,gBAAgB,YAAY;AAC9B,WAAO;AAAA,EACT,WAAW,QAAQ,OAAO;AACxB,WAAO;AAAA,EACT,OAAO;AACL,WAAO;AAAA,EACT;AACF;AAEO,IAAM,mBAAmB,CAAC,KAAqB,UAAuC;AAC3F,QAAM,EAAE,QAAQ,IAAI;AAEpB,QAAM,MAAM,qBAAqB,MAAM,aAAa,IAAI,GAAI;AAC5D,QAAM,QAAQ,IAAI;AAElB,QAAM,EAAE,UAAU,SAAS,IAAI,IAAI,aAAa,gBAAgB,OAAO;AAEvE,UAAQ,SAAS;AAAA,IACf,KAAK;AACH,aAAO,sBAAsB,GAAG;AAAA,IAClC,KAAK,aAAa;AAChB,UAAI,QAAQ,IAAI,aAAa,iBAAiB,SAAS,QAAQ,EAAE,SAAS,KAAK;AAC/E,UAAI,SAAS,MAAM,iBAAiB,UAAU,WAAW,YAAY,CAAC,EAAE,SAAS,KAAK;AACtF,UAAI,MAAM,MAAM,iBAAiB,SAAS,QAAQ,EAAE,SAAS,KAAK;AAClE,aAAO,sBAAsB,GAAG,KAAK,KAAK,KAAK,MAAM,KAAK,GAAG;AAAA,IAC/D;AAAA,IACA,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK,SAAS;AACZ,UAAI,QAAQ,MAAM,iBAAiB,SAAS,QAAQ,EAAE,SAAS,KAAK;AACpE,UAAI,MAAM,MAAM,iBAAiB,SAAS,QAAQ,EAAE,SAAS,KAAK;AAClE,aAAO,sBAAsB,GAAG,KAAK,KAAK,KAAK,GAAG;AAAA,IACpD;AAAA,IACA;AACE,YAAM,IAAI,MAAM,4BAA4B,OAAO;AAAA,EACvD;AACF;;;APZO,SAAS,QAA6B,OAAc,MAAY,WAA6C;AAClH,QAAM,eAAe,MAAM,QAAQ;AACnC,QAAM,QAAQ,MAAM,QAAQ;AAC5B,QAAM,aAAa,MAAM,QAAQ;AACjC,QAAM,gBAAgB,MAAM,QAAQ;AACpC,QAAM,aAAa,MAAM,QAAQ,UAAU;AAE3C,QAAM,WAAW,aAAa,iBAAiB;AAE/C,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,aAAa,gBAAgB,OAAO;AAAA,IAC3C;AAAA,IAEA,SAASA,QAAuB;AAC9B,WAAK,EAAE,MAAM,aAAa,OAAO,eAAeA,MAAK,GAAG,KAAK,YAAY,CAAC;AAAA,IAC5E;AAAA,IAEA,gBAAgB,SAAuBA,QAAe;AACpD,YAAM,QAAQ,aAAa,iBAAiB,SAASA,MAAK;AAC1D,WAAK,EAAE,MAAM,aAAa,OAAO,OAAO,KAAK,cAAc,CAAC;AAAA,IAC9D;AAAA,IAEA,UAAU,QAAqB;AAC7B,YAAMA,SAAQ,aAAa,SAAS,MAAM;AAC1C,WAAK,EAAE,MAAM,aAAa,OAAAA,QAAO,KAAK,aAAa,CAAC;AAAA,IACtD;AAAA,IAEA,SAASA,QAAe;AACtB,YAAM,QAAQ,aAAa,iBAAiB,SAASA,MAAK;AAC1D,WAAK,EAAE,MAAM,aAAa,OAAO,OAAO,KAAK,YAAY,CAAC;AAAA,IAC5D;AAAA,IAEA,cAAc,UAAU,QAAQ;AAAA,MAC9B,GAAG,MAAM,QAAQ;AAAA,MACjB,IAAI,IAAI,aAAa,MAAM,OAAO;AAAA,IACpC,CAAC;AAAA,IAED,aAAa,OAAuB;AAClC,YAAM,EAAE,UAAU,SAAS,IAAI;AAC/B,YAAM,EAAE,WAAW,IAAI,qBAAqB,MAAM,SAAS,UAAU,QAAQ;AAE7E,aAAO,UAAU,QAAQ;AAAA,QACvB,GAAG,MAAM,KAAK;AAAA,QACd,IAAI,IAAI,UAAU,MAAM,OAAO;AAAA,QAC/B,MAAM;AAAA,QACN,cAAc,OAAO;AACnB,cAAI,CAAC;AAAe;AAEpB,gBAAM,MAAM,eAAe,KAAK;AAChC,cAAI,CAAC,YAAY,GAAG,KAAK,gBAAgB,GAAG;AAAG;AAE/C,gBAAM,QAAQ,cAAc,GAAG;AAC/B,gBAAM,UAAU,EAAE,UAAU,SAAS;AAErC,eAAK,EAAE,MAAM,qBAAqB,OAAO,SAAS,IAAI,OAAO,CAAC;AAAA,QAChE;AAAA,QACA,OAAO;AAAA,UACL,UAAU;AAAA,UACV,aAAa;AAAA,UACb,mBAAmB;AAAA,UACnB,GAAG;AAAA,QACL;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IAEA,qBAAqB,OAAuB;AAC1C,YAAM,EAAE,UAAU,SAAS,IAAI;AAC/B,YAAM,EAAE,mBAAmB,IAAI,qBAAqB,MAAM,SAAS,UAAU,QAAQ;AAErF,aAAO,UAAU,QAAQ;AAAA,QACvB,GAAG,MAAM,aAAa;AAAA,QACtB,IAAI,IAAI,kBAAkB,MAAM,OAAO;AAAA,QACvC,OAAO;AAAA,UACL,UAAU;AAAA,UACV,aAAa;AAAA,UACb,mBAAmB;AAAA,UACnB,GAAG;AAAA,QACL;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IAEA,kBAAkB,OAAuB;AACvC,YAAM,EAAE,UAAU,SAAS,IAAI;AAC/B,YAAM,EAAE,iBAAiB,IAAI,kBAAkB,cAAc,UAAU,QAAQ;AAC/E,YAAM,EAAE,GAAG,EAAE,IAAI,iBAAiB;AAElC,YAAM,UAAU,EAAE,UAAU,SAAS;AAErC,aAAO,UAAU,QAAQ;AAAA,QACvB,GAAG,MAAM,UAAU;AAAA,QACnB,IAAI,IAAI,eAAe,MAAM,OAAO;AAAA,QACpC,UAAU,aAAa,SAAY;AAAA,QACnC,iBAAiB,SAAS,UAAU;AAAA,QACpC,MAAM;AAAA,QACN,OAAO;AAAA,UACL,UAAU;AAAA,UACV,MAAM,GAAG,IAAI,GAAG;AAAA,UAChB,KAAK,GAAG,IAAI,GAAG;AAAA,UACf,WAAW;AAAA,UACX,aAAa;AAAA,UACb,mBAAmB;AAAA,UACnB,YAAY,aAAa,iBAAiB,SAAS,CAAC,EAAE,SAAS,KAAK;AAAA,QACtE;AAAA,QACA,SAAS;AACP,eAAK,WAAW;AAAA,QAClB;AAAA,QACA,UAAU;AACR,eAAK,EAAE,MAAM,cAAc,IAAI,OAAO,CAAC;AAAA,QACzC;AAAA,QACA,UAAU,OAAO;AACf,cAAI,CAAC;AAAe;AAEpB,gBAAM,OAAO,aAAa,KAAK;AAE/B,gBAAM,SAAsB;AAAA,YAC1B,UAAU;AACR,mBAAK,EAAE,MAAM,iBAAiB,SAAS,KAAK,CAAC;AAAA,YAC/C;AAAA,YACA,YAAY;AACV,mBAAK,EAAE,MAAM,mBAAmB,SAAS,KAAK,CAAC;AAAA,YACjD;AAAA,YACA,YAAY;AACV,mBAAK,EAAE,MAAM,mBAAmB,SAAS,KAAK,CAAC;AAAA,YACjD;AAAA,YACA,aAAa;AACX,mBAAK,EAAE,MAAM,oBAAoB,SAAS,KAAK,CAAC;AAAA,YAClD;AAAA,YACA,SAAS;AACP,mBAAK,EAAE,MAAM,gBAAgB,SAAS,KAAK,CAAC;AAAA,YAC9C;AAAA,YACA,WAAW;AACT,mBAAK,EAAE,MAAM,kBAAkB,SAAS,KAAK,CAAC;AAAA,YAChD;AAAA,UACF;AAEA,gBAAM,OAAO,OAAO,YAAY,OAAO,MAAM,OAAO,CAAC;AAErD,cAAI,MAAM;AACR,iBAAK,KAAK;AACV,kBAAM,eAAe;AAAA,UACvB;AAAA,QACF;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IAEA,2BAA2B,OAA0B;AACnD,YAAM,EAAE,cAAc,cAAc,QAAQ,IAAI;AAEhD,aAAO,UAAU,QAAQ;AAAA,QACvB,GAAG,MAAM,mBAAmB;AAAA,QAC5B,IAAI,IAAI,wBAAwB,MAAM,SAAS,OAAO;AAAA,QACtD,MAAM;AAAA,QACN,gBAAgB;AAAA,QAChB,oBAAoB;AAAA,QACpB,cAAc,OAAO;AACnB,cAAI,CAAC;AAAe;AAEpB,gBAAM,MAAM,eAAe,KAAK;AAChC,cAAI,CAAC,YAAY,GAAG,KAAK,gBAAgB,GAAG;AAAG;AAE/C,gBAAM,QAAQ,cAAc,GAAG;AAC/B,eAAK,EAAE,MAAM,+BAA+B,SAAS,OAAO,IAAI,SAAS,YAAY,CAAC;AAAA,QACxF;AAAA,QACA,OAAO;AAAA,UACL,UAAU;AAAA,UACV,aAAa;AAAA,UACb,mBAAmB;AAAA,UACnB,iBAAiB,iBAAiB,MAAM,SAAS,EAAE,aAAa,QAAQ,CAAC;AAAA,QAC3E;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IAEA,gCAAgC,OAA0B;AACxD,YAAM,EAAE,cAAc,cAAc,QAAQ,IAAI;AAChD,aAAO,UAAU,QAAQ;AAAA,QACvB,GAAG,MAAM,6BAA6B;AAAA,QACtC,oBAAoB;AAAA,QACpB,gBAAgB;AAAA,QAChB,OAAO;AAAA,UACL,UAAU;AAAA,UACV,iBAAiB;AAAA,UACjB,iBAAiB;AAAA,YACf;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UACF,EAAE,KAAK,GAAG;AAAA,UACV,gBAAgB;AAAA,UAChB,oBAAoB;AAAA,UACpB,OAAO;AAAA,UACP,QAAQ;AAAA,QACV;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IAEA,2BAA2B,OAA0B;AACnD,YAAM,EAAE,cAAc,cAAc,QAAQ,IAAI;AAChD,YAAM,EAAE,UAAU,UAAU,MAAM,UAAU,IAAI,aAAa,gBAAgB,OAAO;AACpF,YAAM,eAAe,aAAa,gBAAgB,OAAO;AAEzD,YAAM,UAAU,eAAe,aAAa,WAAW;AAEvD,YAAM,kBACJ,gBAAgB,eACZ,EAAE,MAAM,GAAG,SAAS,GAAG,KAAK,KAAK,MAAM,IACvC,EAAE,KAAK,GAAG,SAAS,GAAG,KAAK,MAAM,MAAM;AAE7C,aAAO,UAAU,QAAQ;AAAA,QACvB,GAAG,MAAM,mBAAmB;AAAA,QAC5B,IAAI,IAAI,wBAAwB,MAAM,SAAS,OAAO;AAAA,QACtD,MAAM;AAAA,QACN,cAAc;AAAA,QACd,UAAU,aAAa,SAAY;AAAA,QACnC,gBAAgB;AAAA,QAChB,iBAAiB,SAAS,UAAU;AAAA,QACpC,oBAAoB;AAAA,QACpB,iBAAiB,SAAS,UAAU;AAAA,QACpC,oBAAoB;AAAA,QACpB,iBAAiB;AAAA,QACjB,iBAAiB;AAAA,QACjB,iBAAiB;AAAA,QACjB,OAAO;AAAA,UACL,mBAAmB;AAAA,UACnB,UAAU;AAAA,UACV,YAAY,uBAAuB,cAAc,OAAO,EAAE,SAAS,KAAK;AAAA,UACxE,GAAG;AAAA,QACL;AAAA,QACA,UAAU;AACR,cAAI,CAAC;AAAe;AACpB,eAAK,EAAE,MAAM,wBAAwB,QAAQ,CAAC;AAAA,QAChD;AAAA,QACA,SAAS;AACP,cAAI,CAAC;AAAe;AACpB,eAAK,EAAE,MAAM,uBAAuB,QAAQ,CAAC;AAAA,QAC/C;AAAA,QACA,UAAU,OAAO;AACf,cAAI,CAAC;AAAe;AACpB,gBAAM,OAAO,aAAa,KAAK,IAAI;AAEnC,gBAAM,SAAsB;AAAA,YAC1B,UAAU;AACR,mBAAK,EAAE,MAAM,2BAA2B,SAAS,KAAK,CAAC;AAAA,YACzD;AAAA,YACA,YAAY;AACV,mBAAK,EAAE,MAAM,6BAA6B,SAAS,KAAK,CAAC;AAAA,YAC3D;AAAA,YACA,YAAY;AACV,mBAAK,EAAE,MAAM,6BAA6B,SAAS,KAAK,CAAC;AAAA,YAC3D;AAAA,YACA,aAAa;AACX,mBAAK,EAAE,MAAM,8BAA8B,SAAS,KAAK,CAAC;AAAA,YAC5D;AAAA,YACA,SAAS;AACP,mBAAK,EAAE,MAAM,0BAA0B,QAAQ,CAAC;AAAA,YAClD;AAAA,YACA,WAAW;AACT,mBAAK,EAAE,MAAM,4BAA4B,QAAQ,CAAC;AAAA,YACpD;AAAA,YACA,OAAO;AACL,mBAAK,EAAE,MAAM,uBAAuB,QAAQ,CAAC;AAAA,YAC/C;AAAA,YACA,MAAM;AACJ,mBAAK,EAAE,MAAM,sBAAsB,QAAQ,CAAC;AAAA,YAC9C;AAAA,UACF;AAEA,gBAAM,OAAO,OAAO,YAAY,OAAO,MAAM,OAAO,CAAC;AAErD,cAAI,MAAM;AACR,iBAAK,KAAK;AACV,kBAAM,eAAe;AAAA,UACvB;AAAA,QACF;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IAEA,qBAAqB,OAA+B;AAClD,YAAM,EAAE,QAAQ,IAAI;AACpB,YAAM,cAAc,YAAY,SAAS,YAAY;AACrD,YAAM,QAAQ,qBAAqB,cAAc,OAAO;AAExD,aAAO,UAAU,MAAM;AAAA,QACrB,GAAG,MAAM,aAAa;AAAA,QACtB,MAAM,cAAc,SAAS;AAAA,QAC7B,gBAAgB;AAAA,QAChB,cAAc;AAAA,QACd,UAAU;AAAA,QACV,iBAAiB,SAAS,UAAU;AAAA,QACpC,UAAU,MAAM,QAAQ;AAAA,QACxB,IAAI,IAAI,kBAAkB,MAAM,SAAS,OAAO;AAAA,QAChD,cAAc,qBAAqB,cAAc,OAAO;AAAA,QACxD,KAAK,OAAO;AAAA,QACZ,KAAK,OAAO;AAAA,QACZ,MAAM,OAAO;AAAA,QACb,UAAU;AACR,eAAK,EAAE,MAAM,uBAAuB,QAAQ,CAAC;AAAA,QAC/C;AAAA,QACA,SAAS,OAAO;AACd,cAAI;AAAa;AACjB,gBAAMA,SAAQ,MAAM,cAAc;AAClC,eAAK,EAAE,MAAM,wBAAwB,SAAS,OAAAA,QAAO,YAAY,CAAC;AAAA,QACpE;AAAA,QACA,OAAO,OAAO;AACZ,gBAAMA,SAAQ,MAAM,cAAc;AAClC,eAAK,EAAE,MAAM,sBAAsB,SAAS,OAAAA,QAAO,YAAY,CAAC;AAAA,QAClE;AAAA,QACA,UAAU,OAAO;AACf,cAAI,CAAC;AAAa;AAClB,cAAI,MAAM,QAAQ,SAAS;AACzB,kBAAMA,SAAQ,MAAM,cAAc;AAClC,iBAAK,EAAE,MAAM,wBAAwB,SAAS,OAAAA,QAAO,YAAY,CAAC;AAAA,UACpE;AAAA,QACF;AAAA,QACA,OAAO;AAAA,UACL,YAAY;AAAA,UACZ,kBAAkB;AAAA,UAClB,eAAe;AAAA,QACjB;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IAEA,kBAAkB,UAAU,MAAM;AAAA,MAChC,MAAM;AAAA,MACN,UAAU;AAAA,MACV,MAAM,MAAM,QAAQ;AAAA,MACpB,IAAI,IAAI,iBAAiB,MAAM,OAAO;AAAA,MACtC,OAAO;AAAA,MACP,cAAc;AAAA,MACd,SAAS,OAAO;AACd,cAAMA,SAAQ,MAAM,cAAc;AAClC,aAAK,EAAE,MAAM,aAAa,OAAAA,QAAO,KAAK,eAAe,CAAC;AAAA,MACxD;AAAA,IACF,CAAC;AAAA,IAED,wBAAwB,UAAU,OAAO;AAAA,MACvC,GAAG,MAAM,kBAAkB;AAAA,MAC3B,UAAU;AAAA,MACV,iBAAiB,SAAS,UAAU;AAAA,MACpC,cAAc;AAAA,MACd,UAAU;AACR,YAAI,CAAC;AAAe;AACpB,aAAK,kBAAkB;AAAA,MACzB;AAAA,IACF,CAAC;AAAA,IAED,yBAAyB,OAAyB;AAChD,YAAM,EAAE,OAAAA,OAAM,IAAI;AAClB,YAAM,QAAQ,eAAeA,MAAK,EAAE,gBAAgB,OAAO;AAC3D,aAAO,UAAU,QAAQ;AAAA,QACvB,GAAG,MAAM,iBAAiB;AAAA,QAC1B,cAAc;AAAA,QACd,OAAO;AAAA,UACL,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,YAAY;AAAA,UACZ,iBAAiB;AAAA,YACf;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UACF,EAAE,KAAK,GAAG;AAAA,UACV,oBAAoB;AAAA,UACpB,gBAAgB;AAAA,UAChB,UAAU;AAAA,UACV,OAAO;AAAA,UACP,QAAQ;AAAA,QACV;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IAEA,eAAe,OAAyB;AACtC,YAAM,EAAE,OAAAA,QAAO,SAAS,IAAI;AAC5B,YAAM,QAAQ,eAAeA,MAAK,EAAE,SAAS,aAAa,cAAc,CAAC;AACzE,aAAO,UAAU,QAAQ;AAAA,QACvB,GAAG,MAAM,OAAO;AAAA,QAChB,UAAU;AACR,cAAI,YAAY,CAAC;AAAe;AAChC,eAAK,EAAE,MAAM,aAAa,OAAO,MAAM,CAAC;AAAA,QAC1C;AAAA,QACA,OAAO;AAAA,UACL,UAAU;AAAA,UACV,YAAY,MAAM,SAAS,KAAK;AAAA,QAClC;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF;AACF;;;AQnaA,SAAS,cAAAC,mBAA8B;AACvC,SAAS,qBAAqB;AAC9B,SAAS,wBAAwB;AACjC,SAAS,WAAW;AACpB,SAAS,wBAAwB;AACjC,SAAS,YAAY,mBAAAC,kBAAiB,mBAAAC,wBAAuB;AAC7D,SAAS,4BAA4B;AACrC,SAAS,eAAe;AAMjB,SAAS,QAAQ,aAAiC;AACvD,QAAM,MAAM,QAAQ,WAAW;AAC/B,SAAO;AAAA,IACL;AAAA,MACE,IAAI;AAAA,MACJ,SAAS;AAAA,MACT,SAAS;AAAA,QACP,KAAK;AAAA,QACL,OAAO;AAAA,QACP,UAAU;AAAA,QACV,GAAG;AAAA,QACH,UAAU;AAAA,QACV,eAAe;AAAA,QACf,mBAAmB;AAAA,QACnB,kBAAkB;AAAA,MACpB;AAAA,MAEA,UAAU;AAAA,QACR,OAAO,CAACC,SAAQA,KAAI,QAAQ;AAAA,QAC5B,YAAY,CAACA,SAAQ,CAAC,CAACA,KAAI,YAAYA,KAAI;AAAA,QAC3C,eAAe,CAACA,SAAQ,EAAEA,KAAI,cAAcA,KAAI;AAAA,QAChD,cAAc,CAACA,SAAQC,YAAWD,KAAI,KAAK;AAAA,MAC7C;AAAA,MAEA,IAAI;AAAA,QACF,aAAa;AAAA,UACX,SAAS,CAAC,UAAU;AAAA,QACtB;AAAA,MACF;AAAA,MAEA,YAAY,CAAC,kBAAkB;AAAA,MAE/B,OAAO;AAAA,QACL,OAAO,CAAC,mBAAmB;AAAA,MAC7B;AAAA,MAEA,QAAQ;AAAA,QACN,MAAM;AAAA,UACJ,IAAI;AAAA,YACF,oBAAoB;AAAA,cAClB,SAAS,CAAC,gBAAgB;AAAA,YAC5B;AAAA,YACA,qBAAqB;AAAA,cACnB,QAAQ;AAAA,cACR,SAAS,CAAC,oBAAoB,yBAAyB,gBAAgB;AAAA,YACzE;AAAA,YACA,cAAc;AAAA,cACZ,QAAQ;AAAA,cACR,SAAS,CAAC,kBAAkB;AAAA,YAC9B;AAAA,YACA,+BAA+B;AAAA,cAC7B,QAAQ;AAAA,cACR,SAAS,CAAC,oBAAoB,4BAA4B,mBAAmB;AAAA,YAC/E;AAAA,YACA,wBAAwB;AAAA,cACtB,QAAQ;AAAA,cACR,SAAS,CAAC,kBAAkB;AAAA,YAC9B;AAAA,YACA,uBAAuB;AAAA,cACrB,QAAQ;AAAA,cACR,SAAS,CAAC,kBAAkB;AAAA,YAC9B;AAAA,YACA,wBAAwB;AAAA,cACtB,SAAS,CAAC,0BAA0B;AAAA,YACtC;AAAA,UACF;AAAA,QACF;AAAA,QAEA,SAAS;AAAA,UACP,IAAI;AAAA,YACF,qBAAqB;AAAA,cACnB,QAAQ;AAAA,cACR,SAAS,CAAC,oBAAoB,yBAAyB,gBAAgB;AAAA,YACzE;AAAA,YACA,+BAA+B;AAAA,cAC7B,QAAQ;AAAA,cACR,SAAS,CAAC,oBAAoB,4BAA4B,mBAAmB;AAAA,YAC/E;AAAA,YACA,mBAAmB;AAAA,cACjB,SAAS,CAAC,mBAAmB;AAAA,YAC/B;AAAA,YACA,oBAAoB;AAAA,cAClB,SAAS,CAAC,mBAAmB;AAAA,YAC/B;AAAA,YACA,iBAAiB;AAAA,cACf,SAAS,CAAC,mBAAmB;AAAA,YAC/B;AAAA,YACA,mBAAmB;AAAA,cACjB,SAAS,CAAC,mBAAmB;AAAA,YAC/B;AAAA,YACA,gBAAgB;AAAA,cACd,SAAS,CAAC,mBAAmB;AAAA,YAC/B;AAAA,YACA,kBAAkB;AAAA,cAChB,SAAS,CAAC,mBAAmB;AAAA,YAC/B;AAAA,YACA,6BAA6B;AAAA,cAC3B,SAAS,CAAC,kBAAkB;AAAA,YAC9B;AAAA,YACA,8BAA8B;AAAA,cAC5B,SAAS,CAAC,kBAAkB;AAAA,YAC9B;AAAA,YACA,2BAA2B;AAAA,cACzB,SAAS,CAAC,kBAAkB;AAAA,YAC9B;AAAA,YACA,6BAA6B;AAAA,cAC3B,SAAS,CAAC,kBAAkB;AAAA,YAC9B;AAAA,YACA,0BAA0B;AAAA,cACxB,SAAS,CAAC,kBAAkB;AAAA,YAC9B;AAAA,YACA,4BAA4B;AAAA,cAC1B,SAAS,CAAC,kBAAkB;AAAA,YAC9B;AAAA,YACA,uBAAuB;AAAA,cACrB,SAAS,CAAC,iBAAiB;AAAA,YAC7B;AAAA,YACA,sBAAsB;AAAA,cACpB,SAAS,CAAC,iBAAiB;AAAA,YAC7B;AAAA,YACA,uBAAuB;AAAA,cACrB,SAAS,CAAC,kBAAkB;AAAA,YAC9B;AAAA,YACA,wBAAwB;AAAA,cACtB,SAAS,CAAC,0BAA0B;AAAA,YACtC;AAAA,YACA,sBAAsB;AAAA,cACpB;AAAA,gBACE,OAAO;AAAA,gBACP,QAAQ;AAAA,gBACR,SAAS,CAAC,0BAA0B;AAAA,cACtC;AAAA,cACA,EAAE,QAAQ,OAAO;AAAA,YACnB;AAAA,YACA,uBAAuB;AAAA,cACrB,QAAQ;AAAA,YACV;AAAA,YACA,aAAa;AAAA,cACX,QAAQ;AAAA,YACV;AAAA,UACF;AAAA,QACF;AAAA,QAEA,UAAU;AAAA,UACR,MAAM,CAAC,oBAAoB;AAAA,UAC3B,YAAY,CAAC,oBAAoB,sBAAsB;AAAA,UACvD,IAAI;AAAA,YACF,qBAAqB;AAAA,cACnB,SAAS,CAAC,uBAAuB;AAAA,YACnC;AAAA,YACA,mBAAmB;AAAA,cACjB,QAAQ;AAAA,cACR,SAAS,CAAC,mBAAmB;AAAA,YAC/B;AAAA,YACA,+BAA+B;AAAA,cAC7B,SAAS,CAAC,0BAA0B;AAAA,YACtC;AAAA,YACA,6BAA6B;AAAA,cAC3B,QAAQ;AAAA,cACR,SAAS,CAAC,mBAAmB;AAAA,YAC/B;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IACA;AAAA,MACE,QAAQ;AAAA,QACN,aAAa,CAAC,MAAM,QAAQ,CAAC,CAAC,IAAI;AAAA,MACpC;AAAA,MACA,YAAY;AAAA,QACV,iBAAiBA,MAAK,MAAM,EAAE,MAAM,eAAe,GAAG;AACpD,gBAAM,UAAU,IAAI,iBAAiBA,IAAG;AACxC,iBAAO,iBAAiB,SAAS;AAAA,YAC/B,yBAAyB,UAAU;AACjC,cAAAA,KAAI,mBAAmB;AAAA,YACzB;AAAA,YACA,cAAc;AACZ,mBAAK,EAAE,MAAM,aAAa,OAAO,eAAe,OAAO,KAAK,aAAa,CAAC;AAAA,YAC5E;AAAA,UACF,CAAC;AAAA,QACH;AAAA,QACA,iBAAiBA,MAAK,MAAM,EAAE,KAAK,GAAG;AACpC,iBAAO,iBAAiB,IAAI,OAAOA,IAAG,GAAG;AAAA,YACvC,cAAc,EAAE,MAAM,GAAG;AACvB,oBAAM,OAAOA,KAAI,aAAa,SAAS,sBAAsB;AAC7D,mBAAK,EAAE,MAAM,MAAM,CAAC;AAAA,YACtB;AAAA,YACA,cAAc;AACZ,oBAAM,OAAOA,KAAI,aAAa,SAAS,oBAAoB;AAC3D,mBAAK,EAAE,KAAK,CAAC;AAAA,YACf;AAAA,UACF,CAAC;AAAA,QACH;AAAA,QACA,qBAAqBA,MAAK;AACxB,iBAAO,qBAAqB,EAAE,KAAK,IAAI,OAAOA,IAAG,GAAG,QAAQ,IAAI,aAAaA,IAAG,EAAE,CAAC;AAAA,QACrF;AAAA,MACF;AAAA,MACA,SAAS;AAAA,QACP,eAAeA,MAAK;AAClB,gBAAM,cAAc,gBAAgB,IAAI,OAAOA,IAAG;AAClD,cAAI,CAAC;AAAa;AAClB,gBAAM,MAAM,IAAI,OAAOA,IAAG;AAC1B,gBAAM,SAAS,IAAI,IAAI,WAAW;AAClC,iBACG,KAAK,EACL,KAAK,CAAC,EAAE,QAAQ,MAA2B;AAC1C,kBAAM,SAASA,KAAI,aAAa,cAAc;AAC9C,kBAAM,QAAQC,YAAW,OAAO,EAAE,SAAS,MAAM;AACjD,gBAAI,MAAMD,MAAK,KAAK;AACpB,YAAAA,KAAI,cAAc,EAAE,OAAOA,KAAI,OAAO,cAAc,MAAM,CAAC;AAAA,UAC7D,CAAC,EACA,MAAM,MAAM,MAAM;AAAA,QACvB;AAAA,QACA,iBAAiBA,MAAK,KAAK;AACzB,UAAAA,KAAI,WAAW,IAAI;AACnB,cAAI,IAAI,SAAS;AACf,YAAAA,KAAI,gBAAgB,IAAI;AAAA,UAC1B;AACA,cAAI,IAAI,aAAa;AACnB,YAAAA,KAAI,oBAAoB,IAAI;AAAA,UAC9B;AAAA,QACF;AAAA,QACA,mBAAmBA,MAAK;AACtB,UAAAA,KAAI,gBAAgB;AACpB,UAAAA,KAAI,WAAW;AACf,UAAAA,KAAI,oBAAoB;AAAA,QAC1B;AAAA,QACA,sBAAsBA,MAAK,KAAK;AAC9B,gBAAM,EAAE,UAAU,SAAS,IAAI,IAAI,WAAWA,KAAI;AAElD,gBAAM,UAAU,IAAI,sBAAsBA,MAAK,IAAI,KAAK;AACxD,cAAI,CAAC;AAAS;AAEd,gBAAM,EAAE,kBAAkB,IAAI,kBAAkBA,KAAI,cAAc,UAAU,QAAQ;AACpF,gBAAM,QAAQ,kBAAkB,QAAQ,GAAG,QAAQ,CAAC;AAEpD,cAAI,CAAC;AAAO;AACZ,cAAI,MAAMA,MAAK,KAAK;AAAA,QACtB;AAAA,QACA,yBAAyBA,MAAK,KAAK;AACjC,gBAAM,UAAU,IAAI,WAAWA,KAAI;AAEnC,gBAAM,UAAU,IAAI,+BAA+BA,MAAK,IAAI,OAAO,OAAO;AAC1E,cAAI,CAAC;AAAS;AAEd,gBAAM,EAAE,UAAU,UAAU,KAAK,IAAIA,KAAI,aAAa,gBAAgB,OAAO;AAC7E,gBAAM,cAAcA,KAAI,qBAAqB;AAE7C,gBAAM,QAAQ,gBAAgB,eAAe,QAAQ,IAAI,QAAQ;AACjE,gBAAM,eAAeE,iBAAgB,OAAO,UAAU,UAAU,IAAI;AAEpE,gBAAM,QAAQC,iBAAgB,eAAe,MAAM,UAAU,UAAU,IAAI;AAC3E,gBAAM,WAAWH,KAAI,aAAa,iBAAiB,SAAS,KAAK;AAEjE,cAAI,MAAMA,MAAK,QAAQ;AAAA,QACzB;AAAA,QACA,SAASA,MAAK,KAAK;AACjB,cAAI,MAAMA,MAAK,IAAI,KAAK;AAAA,QAC1B;AAAA,QACA,kBAAkBA,MAAK;AAErB,gBAAM,SAAS,IAAI,mBAAmBA,IAAG;AACzC,iBAAO,QAAQ,CAAC,UAAU;AACxB,kBAAM,UAAU,MAAM,QAAQ;AAC9B,gBAAI,SAAS,OAAO,qBAAqBA,KAAI,cAAc,OAAO,CAAC;AAAA,UACrE,CAAC;AAGD,cAAI,SAAS,IAAI,iBAAiBA,IAAG,GAAGA,KAAI,KAAK;AAAA,QACnD;AAAA,QACA,kBAAkBA,MAAK;AACrB,iBAAO,UAAUA,IAAG;AAAA,QACtB;AAAA,QACA,yBAAyBA,MAAK,KAAK;AACjC,gBAAM,EAAE,SAAS,aAAa,MAAM,IAAI;AACxC,cAAI;AACF,kBAAM,SAASA,KAAI,aAAa,cAAc;AAE9C,kBAAM,WAAW,cACbC,YAAW,KAAK,EAAE,SAAS,MAAM,IACjCD,KAAI,aAAa,iBAAiB,SAAS,KAAK;AAEpD,gBAAI,MAAMA,MAAK,QAAQ;AAAA,UAEzB,QAAQ;AAEN,kBAAM,UAAU,IAAI,kBAAkBA,MAAK,OAAO;AAClD,gBAAI,SAAS,SAAS,qBAAqBA,KAAI,cAAc,OAAO,CAAC;AAAA,UACvE;AAAA,QACF;AAAA,QAEA,iBAAiBA,MAAK,KAAK;AACzB,gBAAM,EAAE,UAAU,UAAU,KAAK,IAAIA,KAAI,aAAa,gBAAgB,IAAI,OAAO;AACjF,gBAAM,eAAeA,KAAI,aAAa,gBAAgB,IAAI,OAAO;AACjE,gBAAM,QAAQG,iBAAgB,eAAe,IAAI,MAAM,UAAU,UAAU,IAAI;AAC/E,gBAAM,QAAQH,KAAI,aAAa,iBAAiB,IAAI,SAAS,WAAW,OAAO,UAAU,QAAQ,CAAC;AAClG,cAAI,MAAMA,MAAK,KAAK;AAAA,QACtB;AAAA,QACA,iBAAiBA,MAAK,KAAK;AACzB,gBAAM,EAAE,UAAU,UAAU,KAAK,IAAIA,KAAI,aAAa,gBAAgB,IAAI,OAAO;AACjF,gBAAM,eAAeA,KAAI,aAAa,gBAAgB,IAAI,OAAO;AACjE,gBAAM,QAAQG,iBAAgB,eAAe,IAAI,MAAM,UAAU,UAAU,IAAI;AAC/E,gBAAM,QAAQH,KAAI,aAAa,iBAAiB,IAAI,SAAS,WAAW,OAAO,UAAU,QAAQ,CAAC;AAClG,cAAI,MAAMA,MAAK,KAAK;AAAA,QACtB;AAAA,QAEA,kBAAkBA,MAAK,KAAK;AAC1B,gBAAM,EAAE,UAAU,SAAS,IAAI,IAAI;AACnC,gBAAM,EAAE,WAAW,IAAI,kBAAkBA,KAAI,cAAc,UAAU,QAAQ;AAC7E,gBAAM,QAAQA,KAAI,aAAa,iBAAiB,UAAU,WAAW,IAAI,IAAI,CAAC;AAC9E,cAAI,MAAMA,MAAK,KAAK;AAAA,QACtB;AAAA,QACA,kBAAkBA,MAAK,KAAK;AAC1B,gBAAM,EAAE,UAAU,SAAS,IAAI,IAAI;AACnC,gBAAM,EAAE,WAAW,IAAI,kBAAkBA,KAAI,cAAc,UAAU,QAAQ;AAC7E,gBAAM,QAAQA,KAAI,aAAa,iBAAiB,UAAU,WAAW,IAAI,IAAI,CAAC;AAC9E,cAAI,MAAMA,MAAK,KAAK;AAAA,QACtB;AAAA,QAEA,kBAAkBA,MAAK,KAAK;AAC1B,gBAAM,EAAE,UAAU,SAAS,IAAI,IAAI;AACnC,gBAAM,EAAE,WAAW,IAAI,kBAAkBA,KAAI,cAAc,UAAU,QAAQ;AAC7E,gBAAM,QAAQA,KAAI,aAAa,iBAAiB,UAAU,WAAW,IAAI,IAAI,CAAC;AAC9E,cAAI,MAAMA,MAAK,KAAK;AAAA,QACtB;AAAA,QACA,kBAAkBA,MAAK,KAAK;AAC1B,gBAAM,EAAE,UAAU,SAAS,IAAI,IAAI;AACnC,gBAAM,EAAE,WAAW,IAAI,kBAAkBA,KAAI,cAAc,UAAU,QAAQ;AAC7E,gBAAM,QAAQA,KAAI,aAAa,iBAAiB,UAAU,WAAW,IAAI,IAAI,CAAC;AAC9E,cAAI,MAAMA,MAAK,KAAK;AAAA,QACtB;AAAA,QAEA,gBAAgBA,MAAK,KAAK;AACxB,gBAAM,EAAE,SAAS,IAAIA,KAAI,aAAa,gBAAgB,IAAI,OAAO;AACjE,gBAAM,QAAQA,KAAI,aAAa,iBAAiB,IAAI,SAAS,QAAQ;AACrE,cAAI,MAAMA,MAAK,KAAK;AAAA,QACtB;AAAA,QACA,gBAAgBA,MAAK,KAAK;AACxB,gBAAM,EAAE,SAAS,IAAIA,KAAI,aAAa,gBAAgB,IAAI,OAAO;AACjE,gBAAM,QAAQA,KAAI,aAAa,iBAAiB,IAAI,SAAS,QAAQ;AACrE,cAAI,MAAMA,MAAK,KAAK;AAAA,QACtB;AAAA,QACA,eAAeA,MAAK;AAClB,cAAI,MAAM;AACR,gBAAI,eAAeA,IAAG,GAAG,MAAM,EAAE,eAAe,KAAK,CAAC;AAAA,UACxD,CAAC;AAAA,QACH;AAAA,QACA,kBAAkBA,MAAK,KAAK;AAC1B,cAAI,MAAM;AACR,gBAAI,wBAAwBA,MAAK,IAAI,OAAO,GAAG,MAAM,EAAE,eAAe,KAAK,CAAC;AAAA,UAC9E,CAAC;AAAA,QACH;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;AAEA,IAAM,aAAa,CAAC,SAAyB;AAAA,EAC3C,OAAO,IAAI;AAAA,EACX,cAAc,IAAI;AACpB;AAEA,IAAM,SAAS;AAAA,EACb,UAAU,KAAqB;AAC7B,QAAI,cAAc,WAAW,GAAG,CAAC;AAAA,EACnC;AAAA,EACA,OAAO,KAAqB;AAC1B,QAAI,WAAW,WAAW,GAAG,CAAC;AAAA,EAChC;AACF;AAEA,IAAM,MAAM;AAAA,EACV,MAAM,KAAqB,OAAc;AACvC,QAAI,QAAQ,MAAM,SAAS,KAAK;AAChC,WAAO,OAAO,GAAG;AAAA,EACnB;AACF;","names":["value","parseColor","getPercentValue","snapValueToStep","ctx","parseColor","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  \"channelSliderTrackBackground\",\n  \"channelSliderThumb\",\n  \"channelInput\",\n  \"swatch\",\n  \"swatchBackground\",\n  \"content\",\n  \"label\",\n  \"eyeDropperTrigger\",\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 { visuallyHiddenStyle } from \"@zag-js/visually-hidden\"\nimport { parts } from \"./color-picker.anatomy\"\nimport { dom } from \"./color-picker.dom\"\nimport type {\n  ColorAreaProps,\n  ColorChannelInputProps,\n  ColorChannelProps,\n  ColorSwatchProps,\n  MachineApi,\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>): MachineApi<T> {\n  const valueAsColor = state.context.valueAsColor\n  const value = state.context.value\n  const isDisabled = state.context.isDisabled\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,\n    valueAsColor,\n    alpha: valueAsColor.getChannelValue(\"alpha\"),\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    setAlpha(value: number) {\n      const color = valueAsColor.withChannelValue(\"alpha\", value)\n      send({ type: \"VALUE.SET\", value: color, src: \"set-alpha\" })\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        onFocus() {\n          send({ type: \"AREA.FOCUS\", id: \"area\" })\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.channelSliderTrackBackground.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    hiddenInputProps: normalize.input({\n      type: \"text\",\n      disabled: isDisabled,\n      name: state.context.name,\n      id: dom.getHiddenInputId(state.context),\n      style: visuallyHiddenStyle,\n      defaultValue: value,\n      onChange(event) {\n        const value = event.currentTarget.value\n        send({ type: \"VALUE.SET\", value, src: \"input.change\" })\n      },\n    }),\n\n    eyeDropperTriggerProps: normalize.button({\n      ...parts.eyeDropperTrigger.attrs,\n      disabled: isDisabled,\n      \"data-disabled\": dataAttr(isDisabled),\n      \"aria-label\": \"Pick a color from the screen\",\n      onClick() {\n        if (!isInteractive) return\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.swatchBackground.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 || !isInteractive) 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  getHiddenInputId: (ctx: Ctx) => `color-picker:${ctx.id}:hidden-input`,\n\n  getContentEl: (ctx: Ctx) => dom.getById(ctx, dom.getContentId(ctx)),\n  getAreaThumbEl: (ctx: Ctx) => dom.getById(ctx, dom.getAreaThumbId(ctx)),\n  getChannelSliderThumbEl: (ctx: Ctx, channel: ColorChannel) =>\n    dom.getById(ctx, dom.getChannelSliderThumbId(ctx, channel)),\n  getChannelInputEl: (ctx: Ctx, channel: string) =>\n    dom.getById<HTMLInputElement>(ctx, dom.getChannelInputId(ctx, channel)),\n\n  getHiddenInputEl: (ctx: Ctx) => dom.getById<HTMLInputElement>(ctx, dom.getHiddenInputId(ctx)),\n  getAreaEl: (ctx: Ctx) => dom.getById(ctx, dom.getAreaId(ctx)),\n  getAreaValueFromPoint(ctx: Ctx, point: Point) {\n    const areaEl = dom.getAreaEl(ctx)\n    if (!areaEl) return\n    const { percent } = getRelativePoint(point, areaEl)\n    return percent\n  },\n\n  getChannelSliderTrackEl: (ctx: Ctx, channel: ColorChannel) => {\n    return dom.getById(ctx, dom.getChannelSliderTrackId(ctx, channel))\n  },\n  getChannelSliderValueFromPoint(ctx: Ctx, point: Point, channel: ColorChannel) {\n    const trackEl = dom.getChannelSliderTrackEl(ctx, channel)\n    if (!trackEl) return\n    const { percent } = getRelativePoint(point, trackEl)\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 | null | undefined) {\n  if (channel == null) return\n\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 { parseColor, type Color } 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 { trackFormControl } from \"@zag-js/form-utils\"\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  return createMachine<MachineContext, MachineState>(\n    {\n      id: \"color-picker\",\n      initial: \"idle\",\n      context: {\n        dir: \"ltr\",\n        value: \"#D9D9D9\",\n        disabled: false,\n        ...ctx,\n        activeId: null,\n        activeChannel: null,\n        activeOrientation: null,\n        fieldsetDisabled: false,\n      },\n\n      computed: {\n        isRtl: (ctx) => ctx.dir === \"rtl\",\n        isDisabled: (ctx) => !!ctx.disabled || ctx.fieldsetDisabled,\n        isInteractive: (ctx) => !(ctx.isDisabled || ctx.readOnly),\n        valueAsColor: (ctx) => parseColor(ctx.value),\n      },\n\n      on: {\n        \"VALUE.SET\": {\n          actions: [\"setValue\"],\n        },\n      },\n\n      activities: [\"trackFormControl\"],\n\n      watch: {\n        value: [\"syncInputElements\"],\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            \"AREA.FOCUS\": {\n              target: \"focused\",\n              actions: [\"setActiveChannel\"],\n            },\n            \"CHANNEL_SLIDER.POINTER_DOWN\": {\n              target: \"dragging\",\n              actions: [\"setActiveChannel\", \"setChannelColorFromPoint\", \"focusChannelThumb\"],\n            },\n            \"CHANNEL_SLIDER.FOCUS\": {\n              target: \"focused\",\n              actions: [\"setActiveChannel\"],\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        trackFormControl(ctx, _evt, { send, initialContext }) {\n          const inputEl = dom.getHiddenInputEl(ctx)\n          return trackFormControl(inputEl, {\n            onFieldsetDisabledChange(disabled) {\n              ctx.fieldsetDisabled = disabled\n            },\n            onFormReset() {\n              send({ type: \"VALUE.SET\", value: initialContext.value, src: \"form.reset\" })\n            },\n          })\n        },\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              set.value(ctx, color)\n              ctx.onValueChangeEnd?.({ 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          if (!percent) return\n\n          const { getColorFromPoint } = getChannelDetails(ctx.valueAsColor, xChannel, yChannel)\n          const color = getColorFromPoint(percent.x, percent.y)\n\n          if (!color) return\n          set.value(ctx, color)\n        },\n        setChannelColorFromPoint(ctx, evt) {\n          const channel = evt.channel || ctx.activeId\n\n          const percent = dom.getChannelSliderValueFromPoint(ctx, evt.point, channel)\n          if (!percent) return\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          set.value(ctx, newColor)\n        },\n        setValue(ctx, evt) {\n          set.value(ctx, evt.value)\n        },\n        syncInputElements(ctx) {\n          // sync channel inputs\n          const inputs = dom.getChannelInputEls(ctx)\n          inputs.forEach((input) => {\n            const channel = input.dataset.channel as ExtendedColorChannel | null\n            dom.setValue(input, getChannelInputValue(ctx.valueAsColor, channel))\n          })\n\n          // sync hidden input\n          dom.setValue(dom.getHiddenInputEl(ctx), ctx.value)\n        },\n        invokeOnChangeEnd(ctx) {\n          invoke.changeEnd(ctx)\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            set.value(ctx, newColor)\n            //\n          } catch {\n            // reset input value\n            const inputEl = dom.getChannelInputEl(ctx, channel)\n            dom.setValue(inputEl, 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 color = ctx.valueAsColor.withChannelValue(evt.channel, clampValue(value, minValue, maxValue))\n          set.value(ctx, color)\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 color = ctx.valueAsColor.withChannelValue(evt.channel, clampValue(value, minValue, maxValue))\n          set.value(ctx, color)\n        },\n\n        incrementXChannel(ctx, evt) {\n          const { xChannel, yChannel } = evt.channel\n          const { incrementX } = getChannelDetails(ctx.valueAsColor, xChannel, yChannel)\n          const color = ctx.valueAsColor.withChannelValue(xChannel, incrementX(evt.step))\n          set.value(ctx, color)\n        },\n        decrementXChannel(ctx, evt) {\n          const { xChannel, yChannel } = evt.channel\n          const { decrementX } = getChannelDetails(ctx.valueAsColor, xChannel, yChannel)\n          const color = ctx.valueAsColor.withChannelValue(xChannel, decrementX(evt.step))\n          set.value(ctx, color)\n        },\n\n        incrementYChannel(ctx, evt) {\n          const { xChannel, yChannel } = evt.channel\n          const { incrementY } = getChannelDetails(ctx.valueAsColor, xChannel, yChannel)\n          const color = ctx.valueAsColor.withChannelValue(yChannel, incrementY(evt.step))\n          set.value(ctx, color)\n        },\n        decrementYChannel(ctx, evt) {\n          const { xChannel, yChannel } = evt.channel\n          const { decrementY } = getChannelDetails(ctx.valueAsColor, xChannel, yChannel)\n          const color = ctx.valueAsColor.withChannelValue(yChannel, decrementY(evt.step))\n          set.value(ctx, color)\n        },\n\n        setChannelToMax(ctx, evt) {\n          const { maxValue } = ctx.valueAsColor.getChannelRange(evt.channel)\n          const color = ctx.valueAsColor.withChannelValue(evt.channel, maxValue)\n          set.value(ctx, color)\n        },\n        setChannelToMin(ctx, evt) {\n          const { minValue } = ctx.valueAsColor.getChannelRange(evt.channel)\n          const color = ctx.valueAsColor.withChannelValue(evt.channel, minValue)\n          set.value(ctx, color)\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 invoke = {\n  changeEnd(ctx: MachineContext) {\n    ctx.onValueChangeEnd?.({\n      value: ctx.value,\n      valueAsColor: ctx.valueAsColor,\n    })\n  },\n  change(ctx: MachineContext) {\n    ctx.onValueChange?.({\n      value: ctx.value,\n      valueAsColor: ctx.valueAsColor,\n    })\n  },\n}\n\nconst set = {\n  value(ctx: MachineContext, color: Color) {\n    if (ctx.valueAsColor.isEqual(color)) return\n    ctx.value = color.toString(\"css\")\n    invoke.change(ctx)\n  },\n}\n"],"mappings":"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","names":["value","parseColor","getPercentValue","snapValueToStep","ctx","parseColor","getPercentValue","snapValueToStep"]}

package/package.json

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

package/src/color-picker.machine.ts

@@ -220,7 +220,7 @@ export function machine(userContext: UserDefinedContext) {
               const format = ctx.valueAsColor.getColorSpace()
               const color = parseColor(sRGBHex).toFormat(format)
               set.value(ctx, color)
-              ctx.onChangeEnd?.({ value: ctx.value, valueAsColor: color })
+              ctx.onValueChangeEnd?.({ value: ctx.value, valueAsColor: color })
             })
             .catch(() => void 0)
         },
@@ -368,22 +368,24 @@ export function machine(userContext: UserDefinedContext) {
   )
 }
 
-const getDetails = (ctx: MachineContext) => ({
-  value: ctx.value,
-  valueAsColor: ctx.valueAsColor,
-})
-
 const invoke = {
   changeEnd(ctx: MachineContext) {
-    ctx.onChangeEnd?.(getDetails(ctx))
+    ctx.onValueChangeEnd?.({
+      value: ctx.value,
+      valueAsColor: ctx.valueAsColor,
+    })
   },
   change(ctx: MachineContext) {
-    ctx.onChange?.(getDetails(ctx))
+    ctx.onValueChange?.({
+      value: ctx.value,
+      valueAsColor: ctx.valueAsColor,
+    })
   },
 }
 
 const set = {
   value(ctx: MachineContext, color: Color) {
+    if (ctx.valueAsColor.isEqual(color)) return
     ctx.value = color.toString("css")
     invoke.change(ctx)
   },

package/src/color-picker.types.ts

@@ -2,33 +2,21 @@ import type { Color, ColorAxes, ColorChannel, ColorFormat, ColorType } from "@za
 import type { StateMachine as S } from "@zag-js/core"
 import type { CommonProperties, Context, Orientation, PropTypes, RequiredBy } from "@zag-js/types"
 
-export type ColorChannelProps = {
-  channel: ColorChannel
-  orientation?: Orientation
-}
-
-export type ExtendedColorChannel = ColorChannel | "hex" | "css"
-
-export type ColorChannelInputProps = {
-  channel: ExtendedColorChannel
-  orientation?: Orientation
-}
-
-export type ColorAreaProps = {
-  xChannel: ColorChannel
-  yChannel: ColorChannel
-}
-
-export type ColorSwatchProps = {
-  readOnly?: boolean
-  value: string | Color
-}
+/* -----------------------------------------------------------------------------
+ * Callback details
+ * -----------------------------------------------------------------------------*/
 
-type ChangeDetails = {
+export interface ValueChangeDetails {
   value: string
   valueAsColor: Color
 }
 
+/* -----------------------------------------------------------------------------
+ * Machine context
+ * -----------------------------------------------------------------------------*/
+
+export type ExtendedColorChannel = ColorChannel | "hex" | "css"
+
 type ElementIds = Partial<{
   content: string
   area: string
@@ -39,9 +27,7 @@ type ElementIds = Partial<{
   channelSliderThumb(id: ColorChannel): string
 }>
 
-export type { Color, ColorAxes, ColorChannel, ColorFormat, ColorType }
-
-type PublicContext = CommonProperties & {
+interface PublicContext extends CommonProperties {
   /**
    * The ids of the elements in the color picker. Useful for composition.
    */
@@ -65,11 +51,11 @@ type PublicContext = CommonProperties & {
   /**
    * Handler that is called when the value changes, as the user drags.
    */
-  onChange?: (details: ChangeDetails) => void
+  onValueChange?: (details: ValueChangeDetails) => void
   /**
    * Handler that is called when the user stops dragging.
    */
-  onChangeEnd?: (details: ChangeDetails) => void
+  onValueChangeEnd?: (details: ValueChangeDetails) => void
   /**
    *  The name for the form input
    */
@@ -124,9 +110,9 @@ type ComputedContext = Readonly<{
 
 export type UserDefinedContext = RequiredBy<PublicContext, "id">
 
-export type MachineContext = PublicContext & PrivateContext & ComputedContext
+export interface MachineContext extends PublicContext, PrivateContext, ComputedContext {}
 
-export type MachineState = {
+export interface MachineState {
   value: "idle" | "focused" | "dragging"
 }
 
@@ -134,7 +120,31 @@ export type State = S.State<MachineContext, MachineState>
 
 export type Send = S.Send<S.AnyEventObject>
 
-export type MachineApi<T extends PropTypes = PropTypes> = {
+/* -----------------------------------------------------------------------------
+ * Component API
+ * -----------------------------------------------------------------------------*/
+
+export interface ColorChannelProps {
+  channel: ColorChannel
+  orientation?: Orientation
+}
+
+export interface ColorChannelInputProps {
+  channel: ExtendedColorChannel
+  orientation?: Orientation
+}
+
+export interface ColorAreaProps {
+  xChannel: ColorChannel
+  yChannel: ColorChannel
+}
+
+export interface ColorSwatchProps {
+  readOnly?: boolean
+  value: string | Color
+}
+
+export interface MachineApi<T extends PropTypes = PropTypes> {
   /**
    * Whether the color picker is being dragged
    */
@@ -171,6 +181,7 @@ export type MachineApi<T extends PropTypes = PropTypes> = {
    * Function to set the color alpha
    */
   setAlpha(value: number): void
+
   contentProps: T["element"]
   hiddenInputProps: T["input"]
   getAreaProps(props: ColorAreaProps): T["element"]
@@ -184,3 +195,9 @@ export type MachineApi<T extends PropTypes = PropTypes> = {
   getSwatchBackgroundProps(props: ColorSwatchProps): T["element"]
   getSwatchProps(props: ColorSwatchProps): T["element"]
 }
+
+/* -----------------------------------------------------------------------------
+ * Re-exported types
+ * -----------------------------------------------------------------------------*/
+
+export type { Color, ColorAxes, ColorChannel, ColorFormat, ColorType }