@zag-js/color-picker 0.50.0 → 0.51.0

package/dist/index.mjs

@@ -1,1380 +1,2 @@
-// src/color-picker.anatomy.ts
-import { createAnatomy } from "@zag-js/anatomy";
-var anatomy = createAnatomy("color-picker", [
-  "root",
-  "label",
-  "control",
-  "trigger",
-  "positioner",
-  "content",
-  "area",
-  "areaThumb",
-  "areaBackground",
-  "channelSlider",
-  "channelSliderTrack",
-  "channelSliderThumb",
-  "channelInput",
-  "transparencyGrid",
-  "swatchGroup",
-  "swatchTrigger",
-  "swatchIndicator",
-  "swatch",
-  "eyeDropperTrigger",
-  "formatTrigger",
-  "formatSelect"
-]);
-var parts = anatomy.build();
-
-// src/color-picker.connect.ts
-import { getColorAreaGradient, normalizeColor } from "@zag-js/color-utils";
-import {
-  getEventKey,
-  getEventPoint,
-  getEventStep,
-  getNativeEvent,
-  isLeftClick,
-  isModifierKey
-} from "@zag-js/dom-event";
-import { dataAttr, query, visuallyHiddenStyle } from "@zag-js/dom-query";
-import { getPlacementStyles } from "@zag-js/popper";
-
-// src/color-picker.dom.ts
-import { getRelativePoint } from "@zag-js/dom-event";
-import { createScope, queryAll } from "@zag-js/dom-query";
-var dom = createScope({
-  getRootId: (ctx) => ctx.ids?.root ?? `color-picker:${ctx.id}`,
-  getLabelId: (ctx) => ctx.ids?.label ?? `color-picker:${ctx.id}:label`,
-  getHiddenInputId: (ctx) => `color-picker:${ctx.id}:hidden-input`,
-  getControlId: (ctx) => ctx.ids?.control ?? `color-picker:${ctx.id}:control`,
-  getTriggerId: (ctx) => ctx.ids?.trigger ?? `color-picker:${ctx.id}:trigger`,
-  getContentId: (ctx) => ctx.ids?.content ?? `color-picker:${ctx.id}:content`,
-  getPositionerId: (ctx) => `color-picker:${ctx.id}:positioner`,
-  getFormatSelectId: (ctx) => `color-picker:${ctx.id}:format-select`,
-  getAreaId: (ctx) => ctx.ids?.area ?? `color-picker:${ctx.id}:area`,
-  getAreaGradientId: (ctx) => ctx.ids?.areaGradient ?? `color-picker:${ctx.id}:area-gradient`,
-  getAreaThumbId: (ctx) => ctx.ids?.areaThumb ?? `color-picker:${ctx.id}:area-thumb`,
-  getChannelSliderId: (ctx, channel) => ctx.ids?.channelSliderTrack?.(channel) ?? `color-picker:${ctx.id}:slider-track:${channel}`,
-  getChannelSliderThumbId: (ctx, channel) => ctx.ids?.channelSliderThumb?.(channel) ?? `color-picker:${ctx.id}:slider-thumb:${channel}`,
-  getContentEl: (ctx) => dom.getById(ctx, dom.getContentId(ctx)),
-  getAreaThumbEl: (ctx) => dom.getById(ctx, dom.getAreaThumbId(ctx)),
-  getChannelSliderThumbEl: (ctx, channel) => dom.getById(ctx, dom.getChannelSliderThumbId(ctx, channel)),
-  getChannelInputEl: (ctx, channel) => {
-    return [
-      ...queryAll(dom.getContentEl(ctx), `input[data-channel="${channel}"]`),
-      ...queryAll(dom.getControlEl(ctx), `input[data-channel="${channel}"]`)
-    ];
-  },
-  getFormatSelectEl: (ctx) => dom.getById(ctx, dom.getFormatSelectId(ctx)),
-  getHiddenInputEl: (ctx) => dom.getById(ctx, dom.getHiddenInputId(ctx)),
-  getAreaEl: (ctx) => dom.getById(ctx, dom.getAreaId(ctx)),
-  getAreaValueFromPoint(ctx, point) {
-    const areaEl = dom.getAreaEl(ctx);
-    if (!areaEl)
-      return;
-    const { percent } = getRelativePoint(point, areaEl);
-    return percent;
-  },
-  getControlEl: (ctx) => dom.getById(ctx, dom.getControlId(ctx)),
-  getTriggerEl: (ctx) => dom.getById(ctx, dom.getTriggerId(ctx)),
-  getPositionerEl: (ctx) => dom.getById(ctx, dom.getPositionerId(ctx)),
-  getChannelSliderTrackEl: (ctx, channel) => {
-    return dom.getById(ctx, dom.getChannelSliderId(ctx, channel));
-  },
-  getChannelSliderValueFromPoint(ctx, point, channel) {
-    const trackEl = dom.getChannelSliderTrackEl(ctx, channel);
-    if (!trackEl)
-      return;
-    const { percent } = getRelativePoint(point, trackEl);
-    return percent;
-  },
-  getChannelInputEls: (ctx) => {
-    return [
-      ...queryAll(dom.getContentEl(ctx), "input[data-channel]"),
-      ...queryAll(dom.getControlEl(ctx), "input[data-channel]")
-    ];
-  }
-});
-
-// src/utils/get-channel-display-color.ts
-import { parseColor } from "@zag-js/color-utils";
-function getChannelDisplayColor(color, channel) {
-  switch (channel) {
-    case "hue":
-      return parseColor(`hsl(${color.getChannelValue("hue")}, 100%, 50%)`);
-    case "lightness":
-    case "brightness":
-    case "saturation":
-    case "red":
-    case "green":
-    case "blue":
-      return color.withChannelValue("alpha", 1);
-    case "alpha": {
-      return color;
-    }
-    default:
-      throw new Error("Unknown color channel: " + channel);
-  }
-}
-
-// src/utils/get-channel-input-value.ts
-import { parseColor as parseColor2 } from "@zag-js/color-utils";
-function getChannelValue(color, channel) {
-  if (channel == null)
-    return "";
-  if (channel === "hex") {
-    return color.toString("hex");
-  }
-  if (channel === "css") {
-    return color.toString("css");
-  }
-  if (channel in color) {
-    return color.getChannelValue(channel).toString();
-  }
-  const isHSL = color.getFormat() === "hsla";
-  switch (channel) {
-    case "hue":
-      return isHSL ? color.toFormat("hsla").getChannelValue("hue").toString() : color.toFormat("hsba").getChannelValue("hue").toString();
-    case "saturation":
-      return isHSL ? color.toFormat("hsla").getChannelValue("saturation").toString() : color.toFormat("hsba").getChannelValue("saturation").toString();
-    case "lightness":
-      return color.toFormat("hsla").getChannelValue("lightness").toString();
-    case "brightness":
-      return color.toFormat("hsba").getChannelValue("brightness").toString();
-    case "red":
-    case "green":
-    case "blue":
-      return color.toFormat("rgba").getChannelValue(channel).toString();
-    default:
-      return color.getChannelValue(channel).toString();
-  }
-}
-function getChannelRange(color, channel) {
-  switch (channel) {
-    case "hex":
-      const minColor = parseColor2("#000000");
-      const maxColor = parseColor2("#FFFFFF");
-      return {
-        minValue: minColor.toHexInt(),
-        maxValue: maxColor.toHexInt(),
-        pageSize: 10,
-        step: 1
-      };
-    case "css":
-      return void 0;
-    case "hue":
-    case "saturation":
-    case "lightness":
-      return color.toFormat("hsla").getChannelRange(channel);
-    case "brightness":
-      return color.toFormat("hsba").getChannelRange(channel);
-    case "red":
-    case "green":
-    case "blue":
-      return color.toFormat("rgba").getChannelRange(channel);
-    default:
-      return color.getChannelRange(channel);
-  }
-}
-
-// src/utils/get-slider-background.ts
-function getSliderBackgroundDirection(orientation, dir) {
-  if (orientation === "vertical") {
-    return "top";
-  } else if (dir === "ltr") {
-    return "right";
-  } else {
-    return "left";
-  }
-}
-var getSliderBackground = (props) => {
-  const { channel, value, dir } = props;
-  const bgDirection = getSliderBackgroundDirection(props.orientation, dir);
-  const { minValue, maxValue } = value.getChannelRange(channel);
-  switch (channel) {
-    case "hue":
-      return `linear-gradient(to ${bgDirection}, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%)`;
-    case "lightness": {
-      let start = value.withChannelValue(channel, minValue).toString("css");
-      let middle = value.withChannelValue(channel, (maxValue - minValue) / 2).toString("css");
-      let end = value.withChannelValue(channel, maxValue).toString("css");
-      return `linear-gradient(to ${bgDirection}, ${start}, ${middle}, ${end})`;
-    }
-    case "saturation":
-    case "brightness":
-    case "red":
-    case "green":
-    case "blue":
-    case "alpha": {
-      let start = value.withChannelValue(channel, minValue).toString("css");
-      let end = value.withChannelValue(channel, maxValue).toString("css");
-      return `linear-gradient(to ${bgDirection}, ${start}, ${end})`;
-    }
-    default:
-      throw new Error("Unknown color channel: " + channel);
-  }
-};
-
-// src/color-picker.connect.ts
-function connect(state, send, normalize) {
-  const value = state.context.value;
-  const areaValue = state.context.areaValue;
-  const valueAsString = state.context.valueAsString;
-  const disabled = state.context.isDisabled;
-  const interactive = state.context.isInteractive;
-  const dragging = state.hasTag("dragging");
-  const open = state.hasTag("open");
-  const focused = state.hasTag("focused");
-  const getAreaChannels = (props) => {
-    const channels = areaValue.getChannels();
-    return {
-      xChannel: props.xChannel ?? channels[1],
-      yChannel: props.yChannel ?? channels[2]
-    };
-  };
-  const currentPlacement = state.context.currentPlacement;
-  const popperStyles = getPlacementStyles({
-    ...state.context.positioning,
-    placement: currentPlacement
-  });
-  function getSwatchTriggerState(props) {
-    const color = normalizeColor(props.value).toFormat(state.context.format);
-    return {
-      value: color,
-      valueAsString: color.toString("hex"),
-      checked: color.isEqual(value),
-      disabled: props.disabled || !interactive
-    };
-  }
-  return {
-    dragging,
-    open,
-    valueAsString,
-    value,
-    setOpen(nextOpen) {
-      if (nextOpen === open)
-        return;
-      send({ type: nextOpen ? "OPEN" : "CLOSE" });
-    },
-    setValue(value2) {
-      send({ type: "VALUE.SET", value: normalizeColor(value2), src: "set-color" });
-    },
-    getChannelValue(channel) {
-      return getChannelValue(value, channel);
-    },
-    setChannelValue(channel, channelValue) {
-      const color = value.withChannelValue(channel, channelValue);
-      send({ type: "VALUE.SET", value: color, src: "set-channel" });
-    },
-    format: state.context.format,
-    setFormat(format) {
-      const formatValue = value.toFormat(format);
-      send({ type: "VALUE.SET", value: formatValue, src: "set-format" });
-    },
-    alpha: value.getChannelValue("alpha"),
-    setAlpha(alphaValue) {
-      const color = value.withChannelValue("alpha", alphaValue);
-      send({ type: "VALUE.SET", value: color, src: "set-alpha" });
-    },
-    rootProps: normalize.element({
-      ...parts.root.attrs,
-      dir: state.context.dir,
-      id: dom.getRootId(state.context),
-      "data-disabled": dataAttr(disabled),
-      "data-readonly": dataAttr(state.context.readOnly),
-      style: {
-        "--value": value.toString("css")
-      }
-    }),
-    labelProps: normalize.element({
-      ...parts.label.attrs,
-      dir: state.context.dir,
-      id: dom.getLabelId(state.context),
-      htmlFor: dom.getHiddenInputId(state.context),
-      "data-disabled": dataAttr(disabled),
-      "data-readonly": dataAttr(state.context.readOnly),
-      "data-focus": dataAttr(focused),
-      onClick(event) {
-        event.preventDefault();
-        const inputEl = query(dom.getControlEl(state.context), "[data-channel=hex]");
-        inputEl?.focus({ preventScroll: true });
-      }
-    }),
-    controlProps: normalize.element({
-      ...parts.control.attrs,
-      id: dom.getControlId(state.context),
-      dir: state.context.dir,
-      "data-disabled": dataAttr(disabled),
-      "data-readonly": dataAttr(state.context.readOnly),
-      "data-state": open ? "open" : "closed",
-      "data-focus": dataAttr(focused)
-    }),
-    triggerProps: normalize.button({
-      ...parts.trigger.attrs,
-      id: dom.getTriggerId(state.context),
-      dir: state.context.dir,
-      disabled,
-      "aria-label": `select color. current color is ${valueAsString}`,
-      "aria-controls": dom.getContentId(state.context),
-      "aria-labelledby": dom.getLabelId(state.context),
-      "data-disabled": dataAttr(disabled),
-      "data-readonly": dataAttr(state.context.readOnly),
-      "data-placement": currentPlacement,
-      "aria-expanded": dataAttr(open),
-      "data-state": open ? "open" : "closed",
-      "data-focus": dataAttr(focused),
-      type: "button",
-      onClick() {
-        if (!interactive)
-          return;
-        send({ type: "TRIGGER.CLICK" });
-      },
-      onBlur() {
-        if (!interactive)
-          return;
-        send({ type: "TRIGGER.BLUR" });
-      },
-      style: {
-        position: "relative"
-      }
-    }),
-    positionerProps: normalize.element({
-      ...parts.positioner.attrs,
-      id: dom.getPositionerId(state.context),
-      dir: state.context.dir,
-      style: popperStyles.floating
-    }),
-    contentProps: normalize.element({
-      ...parts.content.attrs,
-      id: dom.getContentId(state.context),
-      dir: state.context.dir,
-      "data-placement": currentPlacement,
-      "data-state": open ? "open" : "closed",
-      hidden: !open
-    }),
-    getAreaProps(props = {}) {
-      const { xChannel, yChannel } = getAreaChannels(props);
-      const { areaStyles } = getColorAreaGradient(areaValue, {
-        xChannel,
-        yChannel,
-        dir: state.context.dir
-      });
-      return normalize.element({
-        ...parts.area.attrs,
-        id: dom.getAreaId(state.context),
-        role: "group",
-        onPointerDown(event) {
-          if (!interactive)
-            return;
-          const evt = getNativeEvent(event);
-          if (!isLeftClick(evt) || isModifierKey(evt))
-            return;
-          const point = getEventPoint(evt);
-          const channel = { xChannel, yChannel };
-          send({ type: "AREA.POINTER_DOWN", point, channel, id: "area" });
-          event.preventDefault();
-        },
-        style: {
-          position: "relative",
-          touchAction: "none",
-          forcedColorAdjust: "none",
-          ...areaStyles
-        }
-      });
-    },
-    getAreaBackgroundProps(props = {}) {
-      const { xChannel, yChannel } = getAreaChannels(props);
-      const { areaGradientStyles } = getColorAreaGradient(areaValue, {
-        xChannel,
-        yChannel,
-        dir: state.context.dir
-      });
-      return normalize.element({
-        ...parts.areaBackground.attrs,
-        id: dom.getAreaGradientId(state.context),
-        style: {
-          position: "relative",
-          touchAction: "none",
-          forcedColorAdjust: "none",
-          ...areaGradientStyles
-        }
-      });
-    },
-    getAreaThumbProps(props = {}) {
-      const { xChannel, yChannel } = getAreaChannels(props);
-      const channel = { xChannel, yChannel };
-      const xPercent = areaValue.getChannelValuePercent(xChannel);
-      const yPercent = 1 - areaValue.getChannelValuePercent(yChannel);
-      const xValue = areaValue.getChannelValue(xChannel);
-      const yValue = areaValue.getChannelValue(yChannel);
-      return normalize.element({
-        ...parts.areaThumb.attrs,
-        id: dom.getAreaThumbId(state.context),
-        dir: state.context.dir,
-        tabIndex: disabled ? void 0 : 0,
-        "data-disabled": dataAttr(disabled),
-        role: "slider",
-        "aria-valuemin": 0,
-        "aria-valuemax": 100,
-        "aria-valuenow": xValue,
-        "aria-label": `${xChannel} and ${yChannel}`,
-        "aria-roledescription": "2d slider",
-        "aria-valuetext": `${xChannel} ${xValue}, ${yChannel} ${yValue}`,
-        style: {
-          position: "absolute",
-          left: `${xPercent * 100}%`,
-          top: `${yPercent * 100}%`,
-          transform: "translate(-50%, -50%)",
-          touchAction: "none",
-          forcedColorAdjust: "none",
-          background: areaValue.withChannelValue("alpha", 1).toString("css")
-        },
-        onFocus() {
-          if (!interactive)
-            return;
-          send({ type: "AREA.FOCUS", id: "area", channel });
-        },
-        onKeyDown(event) {
-          if (event.defaultPrevented)
-            return;
-          if (!interactive)
-            return;
-          const step = getEventStep(event);
-          const keyMap = {
-            ArrowUp() {
-              send({ type: "AREA.ARROW_UP", channel, step });
-            },
-            ArrowDown() {
-              send({ type: "AREA.ARROW_DOWN", channel, step });
-            },
-            ArrowLeft() {
-              send({ type: "AREA.ARROW_LEFT", channel, step });
-            },
-            ArrowRight() {
-              send({ type: "AREA.ARROW_RIGHT", channel, step });
-            },
-            PageUp() {
-              send({ type: "AREA.PAGE_UP", channel, step });
-            },
-            PageDown() {
-              send({ type: "AREA.PAGE_DOWN", channel, step });
-            },
-            Escape(event2) {
-              event2.stopPropagation();
-            }
-          };
-          const exec = keyMap[getEventKey(event, state.context)];
-          if (exec) {
-            exec(event);
-            event.preventDefault();
-          }
-        }
-      });
-    },
-    getTransparencyGridProps(props = {}) {
-      const { size = "12px" } = props;
-      return normalize.element({
-        ...parts.transparencyGrid.attrs,
-        style: {
-          "--size": size,
-          width: "100%",
-          height: "100%",
-          position: "absolute",
-          backgroundColor: "#fff",
-          backgroundImage: "conic-gradient(#eeeeee 0 25%, transparent 0 50%, #eeeeee 0 75%, transparent 0)",
-          backgroundSize: "var(--size) var(--size)",
-          inset: "0px",
-          zIndex: "auto",
-          pointerEvents: "none"
-        }
-      });
-    },
-    getChannelSliderProps(props) {
-      const { orientation = "horizontal", channel } = props;
-      return normalize.element({
-        ...parts.channelSlider.attrs,
-        "data-channel": channel,
-        "data-orientation": orientation,
-        role: "presentation",
-        onPointerDown(event) {
-          if (!interactive)
-            return;
-          const evt = getNativeEvent(event);
-          if (!isLeftClick(evt) || isModifierKey(evt))
-            return;
-          const point = getEventPoint(evt);
-          send({ type: "CHANNEL_SLIDER.POINTER_DOWN", channel, point, id: channel, orientation });
-          event.preventDefault();
-        },
-        style: {
-          position: "relative",
-          touchAction: "none"
-        }
-      });
-    },
-    getChannelSliderTrackProps(props) {
-      const { orientation = "horizontal", channel } = props;
-      return normalize.element({
-        ...parts.channelSliderTrack.attrs,
-        id: dom.getChannelSliderId(state.context, channel),
-        role: "group",
-        "data-channel": channel,
-        "data-orientation": orientation,
-        style: {
-          position: "relative",
-          forcedColorAdjust: "none",
-          backgroundImage: getSliderBackground({
-            orientation,
-            channel,
-            dir: state.context.dir,
-            value: areaValue
-          })
-        }
-      });
-    },
-    getChannelSliderThumbProps(props) {
-      const { orientation = "horizontal", channel } = props;
-      const { minValue, maxValue, step: stepValue } = areaValue.getChannelRange(channel);
-      const channelValue = areaValue.getChannelValue(channel);
-      const offset = (channelValue - minValue) / (maxValue - minValue);
-      const placementStyles = orientation === "horizontal" ? { left: `${offset * 100}%`, top: "50%" } : { top: `${offset * 100}%`, left: "50%" };
-      return normalize.element({
-        ...parts.channelSliderThumb.attrs,
-        id: dom.getChannelSliderThumbId(state.context, channel),
-        role: "slider",
-        "aria-label": channel,
-        tabIndex: disabled ? void 0 : 0,
-        "data-channel": channel,
-        "data-disabled": dataAttr(disabled),
-        "data-orientation": orientation,
-        "aria-disabled": dataAttr(disabled),
-        "aria-orientation": orientation,
-        "aria-valuemax": maxValue,
-        "aria-valuemin": minValue,
-        "aria-valuenow": channelValue,
-        "aria-valuetext": `${channel} ${channelValue}`,
-        style: {
-          forcedColorAdjust: "none",
-          position: "absolute",
-          background: getChannelDisplayColor(areaValue, channel).toString("css"),
-          ...placementStyles
-        },
-        onFocus() {
-          if (!interactive)
-            return;
-          send({ type: "CHANNEL_SLIDER.FOCUS", channel });
-        },
-        onKeyDown(event) {
-          if (event.defaultPrevented)
-            return;
-          if (!interactive)
-            return;
-          const step = getEventStep(event) * stepValue;
-          const keyMap = {
-            ArrowUp() {
-              send({ type: "CHANNEL_SLIDER.ARROW_UP", channel, step });
-            },
-            ArrowDown() {
-              send({ type: "CHANNEL_SLIDER.ARROW_DOWN", channel, step });
-            },
-            ArrowLeft() {
-              send({ type: "CHANNEL_SLIDER.ARROW_LEFT", channel, step });
-            },
-            ArrowRight() {
-              send({ type: "CHANNEL_SLIDER.ARROW_RIGHT", channel, step });
-            },
-            PageUp() {
-              send({ type: "CHANNEL_SLIDER.PAGE_UP", channel });
-            },
-            PageDown() {
-              send({ type: "CHANNEL_SLIDER.PAGE_DOWN", channel });
-            },
-            Home() {
-              send({ type: "CHANNEL_SLIDER.HOME", channel });
-            },
-            End() {
-              send({ type: "CHANNEL_SLIDER.END", channel });
-            },
-            Escape(event2) {
-              event2.stopPropagation();
-            }
-          };
-          const exec = keyMap[getEventKey(event, state.context)];
-          if (exec) {
-            exec(event);
-            event.preventDefault();
-          }
-        }
-      });
-    },
-    getChannelInputProps(props) {
-      const { channel } = props;
-      const isTextField = channel === "hex" || channel === "css";
-      const range = getChannelRange(value, channel);
-      return normalize.input({
-        ...parts.channelInput.attrs,
-        dir: state.context.dir,
-        type: isTextField ? "text" : "number",
-        "data-channel": channel,
-        "aria-label": channel,
-        spellCheck: false,
-        autoComplete: "off",
-        disabled,
-        "data-disabled": dataAttr(disabled),
-        readOnly: state.context.readOnly,
-        defaultValue: getChannelValue(value, channel),
-        min: range?.minValue,
-        max: range?.maxValue,
-        step: range?.step,
-        onBeforeInput(event) {
-          if (isTextField || !interactive)
-            return;
-          const value2 = event.currentTarget.value;
-          if (value2.match(/[^0-9.]/g)) {
-            event.preventDefault();
-          }
-        },
-        onFocus(event) {
-          if (!interactive)
-            return;
-          send({ type: "CHANNEL_INPUT.FOCUS", channel });
-          event.target.select();
-        },
-        onBlur(event) {
-          if (!interactive)
-            return;
-          const value2 = isTextField ? event.currentTarget.value : event.currentTarget.valueAsNumber;
-          send({ type: "CHANNEL_INPUT.BLUR", channel, value: value2, isTextField });
-        },
-        onKeyDown(event) {
-          if (event.defaultPrevented)
-            return;
-          if (!interactive)
-            return;
-          if (event.key === "Enter") {
-            const value2 = isTextField ? event.currentTarget.value : event.currentTarget.valueAsNumber;
-            send({ type: "CHANNEL_INPUT.CHANGE", channel, value: value2, isTextField });
-            event.preventDefault();
-          }
-        },
-        style: {
-          appearance: "none",
-          WebkitAppearance: "none",
-          MozAppearance: "textfield"
-        }
-      });
-    },
-    hiddenInputProps: normalize.input({
-      type: "text",
-      disabled,
-      name: state.context.name,
-      id: dom.getHiddenInputId(state.context),
-      style: visuallyHiddenStyle,
-      defaultValue: valueAsString
-    }),
-    eyeDropperTriggerProps: normalize.button({
-      ...parts.eyeDropperTrigger.attrs,
-      type: "button",
-      dir: state.context.dir,
-      disabled,
-      "data-disabled": dataAttr(disabled),
-      "aria-label": "Pick a color from the screen",
-      onClick() {
-        if (!interactive)
-          return;
-        send("EYEDROPPER.CLICK");
-      }
-    }),
-    swatchGroupProps: normalize.element({
-      ...parts.swatchGroup.attrs,
-      role: "group"
-    }),
-    getSwatchTriggerState,
-    getSwatchTriggerProps(props) {
-      const triggerState = getSwatchTriggerState(props);
-      return normalize.button({
-        ...parts.swatchTrigger.attrs,
-        disabled: triggerState.disabled,
-        dir: state.context.dir,
-        type: "button",
-        "aria-label": `select ${triggerState.valueAsString} as the color`,
-        "data-state": triggerState.checked ? "checked" : "unchecked",
-        "data-value": triggerState.valueAsString,
-        "data-disabled": dataAttr(triggerState.disabled),
-        onClick() {
-          if (triggerState.disabled)
-            return;
-          send({ type: "SWATCH_TRIGGER.CLICK", value: triggerState.value });
-        },
-        style: {
-          position: "relative"
-        }
-      });
-    },
-    getSwatchIndicatorProps(props) {
-      const triggerState = getSwatchTriggerState(props);
-      return normalize.element({
-        ...parts.swatchIndicator.attrs,
-        dir: state.context.dir,
-        hidden: !triggerState.checked
-      });
-    },
-    getSwatchProps(props) {
-      const { respectAlpha = true } = props;
-      const triggerState = getSwatchTriggerState(props);
-      return normalize.element({
-        ...parts.swatch.attrs,
-        dir: state.context.dir,
-        "data-state": triggerState.checked ? "checked" : "unchecked",
-        "data-value": triggerState.valueAsString,
-        style: {
-          position: "relative",
-          background: triggerState.value.toString(respectAlpha ? "css" : "hex")
-        }
-      });
-    },
-    formatTriggerProps: normalize.button({
-      ...parts.formatTrigger.attrs,
-      dir: state.context.dir,
-      type: "button",
-      "aria-label": `change color format to ${getNextFormat(state.context.format)}`,
-      onClick(event) {
-        if (event.currentTarget.disabled)
-          return;
-        const nextFormat = getNextFormat(state.context.format);
-        send({ type: "FORMAT.SET", format: nextFormat, src: "format-trigger" });
-      }
-    }),
-    formatSelectProps: normalize.select({
-      ...parts.formatSelect.attrs,
-      "aria-label": "change color format",
-      dir: state.context.dir,
-      defaultValue: state.context.format,
-      disabled,
-      onChange(event) {
-        const format = assertFormat(event.currentTarget.value);
-        send({ type: "FORMAT.SET", format, src: "format-select" });
-      }
-    })
-  };
-}
-var formats = ["hsba", "hsla", "rgba"];
-var formatRegex = new RegExp(`^(${formats.join("|")})$`);
-function getNextFormat(format) {
-  const index = formats.indexOf(format);
-  return formats[index + 1] ?? formats[0];
-}
-function assertFormat(format) {
-  if (formatRegex.test(format))
-    return format;
-  throw new Error(`Unsupported color format: ${format}`);
-}
-
-// src/color-picker.machine.ts
-import { parseColor as parseColor4 } from "@zag-js/color-utils";
-import { createMachine, guards } from "@zag-js/core";
-import { trackDismissableElement } from "@zag-js/dismissable";
-import { trackPointerMove } from "@zag-js/dom-event";
-import { getInitialFocus, raf } from "@zag-js/dom-query";
-import { dispatchInputValueEvent, trackFormControl } from "@zag-js/form-utils";
-import { getPlacement } from "@zag-js/popper";
-import { disableTextSelection } from "@zag-js/text-selection";
-import { compact, tryCatch } from "@zag-js/utils";
-
-// src/color-picker.parse.ts
-import { parseColor as parseColor3 } from "@zag-js/color-utils";
-var parse = (colorString) => {
-  return parseColor3(colorString);
-};
-
-// src/color-picker.machine.ts
-var { and } = guards;
-function machine(userContext) {
-  const ctx = compact(userContext);
-  return createMachine(
-    {
-      id: "color-picker",
-      initial: ctx.open ? "open" : "idle",
-      context: {
-        dir: "ltr",
-        value: parse("#000000"),
-        format: "rgba",
-        disabled: false,
-        closeOnSelect: false,
-        ...ctx,
-        activeId: null,
-        activeChannel: null,
-        activeOrientation: null,
-        fieldsetDisabled: false,
-        restoreFocus: true,
-        positioning: {
-          ...ctx.positioning,
-          placement: "bottom"
-        }
-      },
-      computed: {
-        isRtl: (ctx2) => ctx2.dir === "rtl",
-        isDisabled: (ctx2) => !!ctx2.disabled || ctx2.fieldsetDisabled,
-        isInteractive: (ctx2) => !(ctx2.isDisabled || ctx2.readOnly),
-        valueAsString: (ctx2) => ctx2.value.toString(ctx2.format),
-        areaValue: (ctx2) => {
-          const format = ctx2.format.startsWith("hsl") ? "hsla" : "hsba";
-          return ctx2.value.toFormat(format);
-        }
-      },
-      activities: ["trackFormControl"],
-      watch: {
-        value: ["syncInputElements"],
-        format: ["syncFormatSelectElement"],
-        open: ["toggleVisibility"]
-      },
-      on: {
-        "VALUE.SET": {
-          actions: ["setValue"]
-        },
-        "FORMAT.SET": {
-          actions: ["setFormat"]
-        },
-        "CHANNEL_INPUT.CHANGE": {
-          actions: ["setChannelColorFromInput"]
-        },
-        "EYEDROPPER.CLICK": {
-          actions: ["openEyeDropper"]
-        }
-      },
-      states: {
-        idle: {
-          tags: ["closed"],
-          on: {
-            "CONTROLLED.OPEN": {
-              target: "open",
-              actions: ["setInitialFocus"]
-            },
-            OPEN: [
-              {
-                guard: "isOpenControlled",
-                actions: ["invokeOnOpen"]
-              },
-              {
-                target: "open",
-                actions: ["invokeOnOpen", "setInitialFocus"]
-              }
-            ],
-            "TRIGGER.CLICK": [
-              {
-                guard: "isOpenControlled",
-                actions: ["invokeOnOpen"]
-              },
-              {
-                target: "open",
-                actions: ["invokeOnOpen", "setInitialFocus"]
-              }
-            ],
-            "CHANNEL_INPUT.FOCUS": {
-              target: "focused",
-              actions: ["setActiveChannel"]
-            }
-          }
-        },
-        focused: {
-          tags: ["closed", "focused"],
-          on: {
-            "CONTROLLED.OPEN": {
-              target: "open",
-              actions: ["setInitialFocus"]
-            },
-            OPEN: [
-              {
-                guard: "isOpenControlled",
-                actions: ["invokeOnOpen"]
-              },
-              {
-                target: "open",
-                actions: ["invokeOnOpen", "setInitialFocus"]
-              }
-            ],
-            "TRIGGER.CLICK": [
-              {
-                guard: "isOpenControlled",
-                actions: ["invokeOnOpen"]
-              },
-              {
-                target: "open",
-                actions: ["invokeOnOpen", "setInitialFocus"]
-              }
-            ],
-            "CHANNEL_INPUT.FOCUS": {
-              actions: ["setActiveChannel"]
-            },
-            "CHANNEL_INPUT.BLUR": {
-              target: "idle",
-              actions: ["setChannelColorFromInput"]
-            },
-            "TRIGGER.BLUR": {
-              target: "idle"
-            }
-          }
-        },
-        open: {
-          tags: ["open"],
-          activities: ["trackPositioning", "trackDismissableElement"],
-          on: {
-            "CONTROLLED.CLOSE": [
-              {
-                guard: "shouldRestoreFocus",
-                target: "focused",
-                actions: ["setReturnFocus"]
-              },
-              {
-                target: "idle"
-              }
-            ],
-            "TRIGGER.CLICK": [
-              {
-                guard: "isOpenControlled",
-                actions: ["invokeOnClose"]
-              },
-              {
-                target: "idle",
-                actions: ["invokeOnClose"]
-              }
-            ],
-            "AREA.POINTER_DOWN": {
-              target: "open:dragging",
-              actions: ["setActiveChannel", "setAreaColorFromPoint", "focusAreaThumb"]
-            },
-            "AREA.FOCUS": {
-              actions: ["setActiveChannel"]
-            },
-            "CHANNEL_SLIDER.POINTER_DOWN": {
-              target: "open:dragging",
-              actions: ["setActiveChannel", "setChannelColorFromPoint", "focusChannelThumb"]
-            },
-            "CHANNEL_SLIDER.FOCUS": {
-              actions: ["setActiveChannel"]
-            },
-            "AREA.ARROW_LEFT": {
-              actions: ["decrementXChannel"]
-            },
-            "AREA.ARROW_RIGHT": {
-              actions: ["incrementXChannel"]
-            },
-            "AREA.ARROW_UP": {
-              actions: ["incrementYChannel"]
-            },
-            "AREA.ARROW_DOWN": {
-              actions: ["decrementYChannel"]
-            },
-            "AREA.PAGE_UP": {
-              actions: ["incrementXChannel"]
-            },
-            "AREA.PAGE_DOWN": {
-              actions: ["decrementXChannel"]
-            },
-            "CHANNEL_SLIDER.ARROW_LEFT": {
-              actions: ["decrementChannel"]
-            },
-            "CHANNEL_SLIDER.ARROW_RIGHT": {
-              actions: ["incrementChannel"]
-            },
-            "CHANNEL_SLIDER.ARROW_UP": {
-              actions: ["incrementChannel"]
-            },
-            "CHANNEL_SLIDER.ARROW_DOWN": {
-              actions: ["decrementChannel"]
-            },
-            "CHANNEL_SLIDER.PAGE_UP": {
-              actions: ["incrementChannel"]
-            },
-            "CHANNEL_SLIDER.PAGE_DOWN": {
-              actions: ["decrementChannel"]
-            },
-            "CHANNEL_SLIDER.HOME": {
-              actions: ["setChannelToMin"]
-            },
-            "CHANNEL_SLIDER.END": {
-              actions: ["setChannelToMax"]
-            },
-            "CHANNEL_INPUT.BLUR": {
-              actions: ["setChannelColorFromInput"]
-            },
-            INTERACT_OUTSIDE: [
-              {
-                guard: "isOpenControlled",
-                actions: ["invokeOnClose"]
-              },
-              {
-                guard: "shouldRestoreFocus",
-                target: "focused",
-                actions: ["invokeOnClose", "setReturnFocus"]
-              },
-              {
-                target: "idle",
-                actions: ["invokeOnClose"]
-              }
-            ],
-            CLOSE: [
-              {
-                guard: "isOpenControlled",
-                actions: ["invokeOnClose"]
-              },
-              {
-                target: "idle",
-                actions: ["invokeOnClose"]
-              }
-            ],
-            "SWATCH_TRIGGER.CLICK": [
-              {
-                guard: and("isOpenControlled", "closeOnSelect"),
-                actions: ["setValue", "invokeOnClose"]
-              },
-              {
-                guard: "closeOnSelect",
-                target: "focused",
-                actions: ["setValue", "invokeOnClose", "setReturnFocus"]
-              },
-              {
-                actions: ["setValue"]
-              }
-            ]
-          }
-        },
-        "open:dragging": {
-          tags: ["open"],
-          exit: ["clearActiveChannel"],
-          activities: ["trackPointerMove", "disableTextSelection", "trackPositioning", "trackDismissableElement"],
-          on: {
-            "CONTROLLED.CLOSE": [
-              {
-                guard: "shouldRestoreFocus",
-                target: "focused",
-                actions: ["setReturnFocus"]
-              },
-              {
-                target: "idle"
-              }
-            ],
-            "AREA.POINTER_MOVE": {
-              actions: ["setAreaColorFromPoint", "focusAreaThumb"]
-            },
-            "AREA.POINTER_UP": {
-              target: "open",
-              actions: ["invokeOnChangeEnd"]
-            },
-            "CHANNEL_SLIDER.POINTER_MOVE": {
-              actions: ["setChannelColorFromPoint", "focusChannelThumb"]
-            },
-            "CHANNEL_SLIDER.POINTER_UP": {
-              target: "open",
-              actions: ["invokeOnChangeEnd"]
-            },
-            INTERACT_OUTSIDE: [
-              {
-                guard: "isOpenControlled",
-                actions: ["invokeOnClose"]
-              },
-              {
-                guard: "shouldRestoreFocus",
-                target: "focused",
-                actions: ["invokeOnClose", "setReturnFocus"]
-              },
-              {
-                target: "idle",
-                actions: ["invokeOnClose"]
-              }
-            ],
-            CLOSE: [
-              {
-                guard: "isOpenControlled",
-                actions: ["invokeOnClose"]
-              },
-              {
-                target: "idle",
-                actions: ["invokeOnClose"]
-              }
-            ]
-          }
-        }
-      }
-    },
-    {
-      guards: {
-        closeOnSelect: (ctx2) => !!ctx2.closeOnSelect,
-        isOpenControlled: (ctx2) => !!ctx2["open.controlled"],
-        shouldRestoreFocus: (ctx2) => !!ctx2.restoreFocus
-      },
-      activities: {
-        trackPositioning(ctx2) {
-          ctx2.currentPlacement = ctx2.positioning.placement;
-          const anchorEl = dom.getTriggerEl(ctx2);
-          const getPositionerEl = () => dom.getPositionerEl(ctx2);
-          return getPlacement(anchorEl, getPositionerEl, {
-            ...ctx2.positioning,
-            defer: true,
-            onComplete(data) {
-              ctx2.currentPlacement = data.placement;
-            }
-          });
-        },
-        trackDismissableElement(ctx2, _evt, { send }) {
-          const getContentEl = () => dom.getContentEl(ctx2);
-          return trackDismissableElement(getContentEl, {
-            exclude: dom.getTriggerEl(ctx2),
-            defer: true,
-            onInteractOutside(event) {
-              ctx2.onInteractOutside?.(event);
-              if (event.defaultPrevented)
-                return;
-              ctx2.restoreFocus = !(event.detail.focusable || event.detail.contextmenu);
-            },
-            onPointerDownOutside: ctx2.onPointerDownOutside,
-            onFocusOutside: ctx2.onFocusOutside,
-            onDismiss() {
-              send({ type: "INTERACT_OUTSIDE" });
-            }
-          });
-        },
-        trackFormControl(ctx2, _evt, { send, initialContext }) {
-          const inputEl = dom.getHiddenInputEl(ctx2);
-          return trackFormControl(inputEl, {
-            onFieldsetDisabledChange(disabled) {
-              ctx2.fieldsetDisabled = disabled;
-            },
-            onFormReset() {
-              send({ type: "VALUE.SET", value: initialContext.value, src: "form.reset" });
-            }
-          });
-        },
-        trackPointerMove(ctx2, _evt, { send }) {
-          return trackPointerMove(dom.getDoc(ctx2), {
-            onPointerMove({ point }) {
-              const type = ctx2.activeId === "area" ? "AREA.POINTER_MOVE" : "CHANNEL_SLIDER.POINTER_MOVE";
-              send({ type, point });
-            },
-            onPointerUp() {
-              const type = ctx2.activeId === "area" ? "AREA.POINTER_UP" : "CHANNEL_SLIDER.POINTER_UP";
-              send({ type });
-            }
-          });
-        },
-        disableTextSelection(ctx2) {
-          return disableTextSelection({ doc: dom.getDoc(ctx2), target: dom.getContentEl(ctx2) });
-        }
-      },
-      actions: {
-        openEyeDropper(ctx2) {
-          const isSupported = "EyeDropper" in dom.getWin(ctx2);
-          if (!isSupported)
-            return;
-          const win = dom.getWin(ctx2);
-          const picker = new win.EyeDropper();
-          picker.open().then(({ sRGBHex }) => {
-            const format = ctx2.value.getFormat();
-            const color = parseColor4(sRGBHex).toFormat(format);
-            set.value(ctx2, color);
-            ctx2.onValueChangeEnd?.({ value: ctx2.value, valueAsString: ctx2.valueAsString });
-          }).catch(() => void 0);
-        },
-        setActiveChannel(ctx2, evt) {
-          ctx2.activeId = evt.id;
-          if (evt.channel)
-            ctx2.activeChannel = evt.channel;
-          if (evt.orientation)
-            ctx2.activeOrientation = evt.orientation;
-        },
-        clearActiveChannel(ctx2) {
-          ctx2.activeChannel = null;
-          ctx2.activeId = null;
-          ctx2.activeOrientation = null;
-        },
-        setAreaColorFromPoint(ctx2, evt) {
-          const { xChannel, yChannel } = evt.channel || ctx2.activeChannel;
-          const percent = dom.getAreaValueFromPoint(ctx2, evt.point);
-          if (!percent)
-            return;
-          const xValue = ctx2.areaValue.getChannelPercentValue(xChannel, percent.x);
-          const yValue = ctx2.areaValue.getChannelPercentValue(yChannel, 1 - percent.y);
-          const color = ctx2.areaValue.withChannelValue(xChannel, xValue).withChannelValue(yChannel, yValue);
-          set.value(ctx2, color);
-        },
-        setChannelColorFromPoint(ctx2, evt) {
-          const channel = evt.channel || ctx2.activeId;
-          const percent = dom.getChannelSliderValueFromPoint(ctx2, evt.point, channel);
-          if (!percent)
-            return;
-          const orientation = ctx2.activeOrientation || "horizontal";
-          const channelPercent = orientation === "horizontal" ? percent.x : percent.y;
-          const value = ctx2.areaValue.getChannelPercentValue(channel, channelPercent);
-          const color = ctx2.areaValue.withChannelValue(channel, value);
-          set.value(ctx2, color);
-        },
-        setValue(ctx2, evt) {
-          set.value(ctx2, evt.value);
-        },
-        setFormat(ctx2, evt) {
-          set.format(ctx2, evt.format);
-        },
-        syncInputElements(ctx2) {
-          sync.inputs(ctx2);
-        },
-        invokeOnChangeEnd(ctx2) {
-          invoke.changeEnd(ctx2);
-        },
-        setChannelColorFromInput(ctx2, evt) {
-          const { channel, isTextField, value } = evt;
-          const currentAlpha = ctx2.value.getChannelValue("alpha");
-          let color;
-          if (channel === "alpha") {
-            let valueAsNumber = parseFloat(value);
-            valueAsNumber = Number.isNaN(valueAsNumber) ? currentAlpha : valueAsNumber;
-            color = ctx2.value.withChannelValue("alpha", valueAsNumber);
-          } else if (isTextField) {
-            color = tryCatch(
-              () => parse(value).withChannelValue("alpha", currentAlpha),
-              () => ctx2.value
-            );
-          } else {
-            const current = ctx2.value.toFormat(ctx2.format);
-            const valueAsNumber = Number.isNaN(value) ? current.getChannelValue(channel) : value;
-            color = current.withChannelValue(channel, valueAsNumber);
-          }
-          sync.inputs(ctx2, color);
-          set.value(ctx2, color);
-        },
-        incrementChannel(ctx2, evt) {
-          const color = ctx2.value.incrementChannel(evt.channel, evt.step);
-          set.value(ctx2, color);
-        },
-        decrementChannel(ctx2, evt) {
-          const color = ctx2.value.decrementChannel(evt.channel, evt.step);
-          set.value(ctx2, color);
-        },
-        incrementXChannel(ctx2, evt) {
-          const { xChannel } = evt.channel;
-          const color = ctx2.areaValue.incrementChannel(xChannel, evt.step);
-          set.value(ctx2, color);
-        },
-        decrementXChannel(ctx2, evt) {
-          const { xChannel } = evt.channel;
-          const color = ctx2.areaValue.decrementChannel(xChannel, evt.step);
-          set.value(ctx2, color);
-        },
-        incrementYChannel(ctx2, evt) {
-          const { yChannel } = evt.channel;
-          const color = ctx2.areaValue.incrementChannel(yChannel, evt.step);
-          set.value(ctx2, color);
-        },
-        decrementYChannel(ctx2, evt) {
-          const { yChannel } = evt.channel;
-          const color = ctx2.areaValue.decrementChannel(yChannel, evt.step);
-          set.value(ctx2, color);
-        },
-        setChannelToMax(ctx2, evt) {
-          const range = ctx2.value.getChannelRange(evt.channel);
-          const color = ctx2.value.withChannelValue(evt.channel, range.maxValue);
-          set.value(ctx2, color);
-        },
-        setChannelToMin(ctx2, evt) {
-          const range = ctx2.value.getChannelRange(evt.channel);
-          const color = ctx2.value.withChannelValue(evt.channel, range.minValue);
-          set.value(ctx2, color);
-        },
-        focusAreaThumb(ctx2) {
-          raf(() => {
-            dom.getAreaThumbEl(ctx2)?.focus({ preventScroll: true });
-          });
-        },
-        focusChannelThumb(ctx2, evt) {
-          raf(() => {
-            dom.getChannelSliderThumbEl(ctx2, evt.channel)?.focus({ preventScroll: true });
-          });
-        },
-        setInitialFocus(ctx2) {
-          raf(() => {
-            const element = getInitialFocus(dom.getContentEl(ctx2), ctx2.initialFocusEl);
-            element?.focus({ preventScroll: true });
-          });
-        },
-        setReturnFocus(ctx2) {
-          raf(() => {
-            dom.getTriggerEl(ctx2)?.focus({ preventScroll: true });
-          });
-        },
-        syncFormatSelectElement(ctx2) {
-          sync.formatSelect(ctx2);
-        },
-        invokeOnOpen(ctx2) {
-          ctx2.onOpenChange?.({ open: true });
-        },
-        invokeOnClose(ctx2) {
-          ctx2.onOpenChange?.({ open: false });
-        },
-        toggleVisibility(ctx2, evt, { send }) {
-          send({ type: ctx2.open ? "CONTROLLED.OPEN" : "CONTROLLED.CLOSE", previousEvent: evt });
-        }
-      },
-      compareFns: {
-        value: (a, b) => a.isEqual(b)
-      }
-    }
-  );
-}
-var sync = {
-  // sync channel inputs
-  inputs(ctx, color) {
-    const channelInputs = dom.getChannelInputEls(ctx);
-    raf(() => {
-      channelInputs.forEach((inputEl) => {
-        const channel = inputEl.dataset.channel;
-        dom.setValue(inputEl, getChannelValue(color || ctx.value, channel));
-      });
-    });
-  },
-  // sync format select
-  formatSelect(ctx) {
-    const selectEl = dom.getFormatSelectEl(ctx);
-    raf(() => {
-      dom.setValue(selectEl, ctx.format);
-    });
-  }
-};
-var invoke = {
-  changeEnd(ctx) {
-    const value = ctx.value.toFormat(ctx.format);
-    ctx.onValueChangeEnd?.({
-      value,
-      valueAsString: ctx.valueAsString
-    });
-  },
-  change(ctx) {
-    const value = ctx.value.toFormat(ctx.format);
-    ctx.onValueChange?.({
-      value,
-      valueAsString: ctx.valueAsString
-    });
-    dispatchInputValueEvent(dom.getHiddenInputEl(ctx), { value: ctx.valueAsString });
-  },
-  formatChange(ctx) {
-    ctx.onFormatChange?.({ format: ctx.format });
-  }
-};
-var set = {
-  value(ctx, color) {
-    if (!color || ctx.value.isEqual(color))
-      return;
-    ctx.value = color;
-    invoke.change(ctx);
-  },
-  format(ctx, format) {
-    if (ctx.format === format)
-      return;
-    ctx.format = format;
-    invoke.formatChange(ctx);
-  }
-};
-export {
-  anatomy,
-  connect,
-  machine,
-  parse
-};
+import{createAnatomy}from"@zag-js/anatomy";var anatomy=createAnatomy("color-picker",["root","label","control","trigger","positioner","content","area","areaThumb","areaBackground","channelSlider","channelSliderTrack","channelSliderThumb","channelInput","transparencyGrid","swatchGroup","swatchTrigger","swatchIndicator","swatch","eyeDropperTrigger","formatTrigger","formatSelect"]);var parts=anatomy.build();import{getColorAreaGradient,normalizeColor}from"@zag-js/color-utils";import{getEventKey,getEventPoint,getEventStep,getNativeEvent,isLeftClick,isModifierKey}from"@zag-js/dom-event";import{dataAttr,query,visuallyHiddenStyle}from"@zag-js/dom-query";import{getPlacementStyles}from"@zag-js/popper";import{getRelativePoint}from"@zag-js/dom-event";import{createScope,queryAll}from"@zag-js/dom-query";var dom=createScope({getRootId:ctx=>ctx.ids?.root??`color-picker:${ctx.id}`,getLabelId:ctx=>ctx.ids?.label??`color-picker:${ctx.id}:label`,getHiddenInputId:ctx=>`color-picker:${ctx.id}:hidden-input`,getControlId:ctx=>ctx.ids?.control??`color-picker:${ctx.id}:control`,getTriggerId:ctx=>ctx.ids?.trigger??`color-picker:${ctx.id}:trigger`,getContentId:ctx=>ctx.ids?.content??`color-picker:${ctx.id}:content`,getPositionerId:ctx=>`color-picker:${ctx.id}:positioner`,getFormatSelectId:ctx=>`color-picker:${ctx.id}:format-select`,getAreaId:ctx=>ctx.ids?.area??`color-picker:${ctx.id}:area`,getAreaGradientId:ctx=>ctx.ids?.areaGradient??`color-picker:${ctx.id}:area-gradient`,getAreaThumbId:ctx=>ctx.ids?.areaThumb??`color-picker:${ctx.id}:area-thumb`,getChannelSliderId:(ctx,channel)=>ctx.ids?.channelSliderTrack?.(channel)??`color-picker:${ctx.id}:slider-track:${channel}`,getChannelSliderThumbId:(ctx,channel)=>ctx.ids?.channelSliderThumb?.(channel)??`color-picker:${ctx.id}:slider-thumb:${channel}`,getContentEl:ctx=>dom.getById(ctx,dom.getContentId(ctx)),getAreaThumbEl:ctx=>dom.getById(ctx,dom.getAreaThumbId(ctx)),getChannelSliderThumbEl:(ctx,channel)=>dom.getById(ctx,dom.getChannelSliderThumbId(ctx,channel)),getChannelInputEl:(ctx,channel)=>{return[...queryAll(dom.getContentEl(ctx),`input[data-channel="${channel}"]`),...queryAll(dom.getControlEl(ctx),`input[data-channel="${channel}"]`)]},getFormatSelectEl:ctx=>dom.getById(ctx,dom.getFormatSelectId(ctx)),getHiddenInputEl:ctx=>dom.getById(ctx,dom.getHiddenInputId(ctx)),getAreaEl:ctx=>dom.getById(ctx,dom.getAreaId(ctx)),getAreaValueFromPoint(ctx,point){const areaEl=dom.getAreaEl(ctx);if(!areaEl)return;const{percent}=getRelativePoint(point,areaEl);return percent},getControlEl:ctx=>dom.getById(ctx,dom.getControlId(ctx)),getTriggerEl:ctx=>dom.getById(ctx,dom.getTriggerId(ctx)),getPositionerEl:ctx=>dom.getById(ctx,dom.getPositionerId(ctx)),getChannelSliderTrackEl:(ctx,channel)=>{return dom.getById(ctx,dom.getChannelSliderId(ctx,channel))},getChannelSliderValueFromPoint(ctx,point,channel){const trackEl=dom.getChannelSliderTrackEl(ctx,channel);if(!trackEl)return;const{percent}=getRelativePoint(point,trackEl);return percent},getChannelInputEls:ctx=>{return[...queryAll(dom.getContentEl(ctx),"input[data-channel]"),...queryAll(dom.getControlEl(ctx),"input[data-channel]")]}});import{parseColor}from"@zag-js/color-utils";function getChannelDisplayColor(color,channel){switch(channel){case"hue":return parseColor(`hsl(${color.getChannelValue("hue")}, 100%, 50%)`);case"lightness":case"brightness":case"saturation":case"red":case"green":case"blue":return color.withChannelValue("alpha",1);case"alpha":{return color}default:throw new Error("Unknown color channel: "+channel)}}import{parseColor as parseColor2}from"@zag-js/color-utils";function getChannelValue(color,channel){if(channel==null)return"";if(channel==="hex"){return color.toString("hex")}if(channel==="css"){return color.toString("css")}if(channel in color){return color.getChannelValue(channel).toString()}const isHSL=color.getFormat()==="hsla";switch(channel){case"hue":return isHSL?color.toFormat("hsla").getChannelValue("hue").toString():color.toFormat("hsba").getChannelValue("hue").toString();case"saturation":return isHSL?color.toFormat("hsla").getChannelValue("saturation").toString():color.toFormat("hsba").getChannelValue("saturation").toString();case"lightness":return color.toFormat("hsla").getChannelValue("lightness").toString();case"brightness":return color.toFormat("hsba").getChannelValue("brightness").toString();case"red":case"green":case"blue":return color.toFormat("rgba").getChannelValue(channel).toString();default:return color.getChannelValue(channel).toString()}}function getChannelRange(color,channel){switch(channel){case"hex":const minColor=parseColor2("#000000");const maxColor=parseColor2("#FFFFFF");return{minValue:minColor.toHexInt(),maxValue:maxColor.toHexInt(),pageSize:10,step:1};case"css":return void 0;case"hue":case"saturation":case"lightness":return color.toFormat("hsla").getChannelRange(channel);case"brightness":return color.toFormat("hsba").getChannelRange(channel);case"red":case"green":case"blue":return color.toFormat("rgba").getChannelRange(channel);default:return color.getChannelRange(channel)}}function getSliderBackgroundDirection(orientation,dir){if(orientation==="vertical"){return"top"}else if(dir==="ltr"){return"right"}else{return"left"}}var getSliderBackground=props=>{const{channel,value,dir}=props;const bgDirection=getSliderBackgroundDirection(props.orientation,dir);const{minValue,maxValue}=value.getChannelRange(channel);switch(channel){case"hue":return`linear-gradient(to ${bgDirection}, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%)`;case"lightness":{let start=value.withChannelValue(channel,minValue).toString("css");let middle=value.withChannelValue(channel,(maxValue-minValue)/2).toString("css");let end=value.withChannelValue(channel,maxValue).toString("css");return`linear-gradient(to ${bgDirection}, ${start}, ${middle}, ${end})`}case"saturation":case"brightness":case"red":case"green":case"blue":case"alpha":{let start=value.withChannelValue(channel,minValue).toString("css");let end=value.withChannelValue(channel,maxValue).toString("css");return`linear-gradient(to ${bgDirection}, ${start}, ${end})`}default:throw new Error("Unknown color channel: "+channel)}};function connect(state,send,normalize){const value=state.context.value;const areaValue=state.context.areaValue;const valueAsString=state.context.valueAsString;const disabled=state.context.isDisabled;const interactive=state.context.isInteractive;const dragging=state.hasTag("dragging");const open=state.hasTag("open");const focused=state.hasTag("focused");const getAreaChannels=props=>{const channels=areaValue.getChannels();return{xChannel:props.xChannel??channels[1],yChannel:props.yChannel??channels[2]}};const currentPlacement=state.context.currentPlacement;const popperStyles=getPlacementStyles({...state.context.positioning,placement:currentPlacement});function getSwatchTriggerState(props){const color=normalizeColor(props.value).toFormat(state.context.format);return{value:color,valueAsString:color.toString("hex"),checked:color.isEqual(value),disabled:props.disabled||!interactive}}return{dragging,open,valueAsString,value,setOpen(nextOpen){if(nextOpen===open)return;send({type:nextOpen?"OPEN":"CLOSE"})},setValue(value2){send({type:"VALUE.SET",value:normalizeColor(value2),src:"set-color"})},getChannelValue(channel){return getChannelValue(value,channel)},setChannelValue(channel,channelValue){const color=value.withChannelValue(channel,channelValue);send({type:"VALUE.SET",value:color,src:"set-channel"})},format:state.context.format,setFormat(format){const formatValue=value.toFormat(format);send({type:"VALUE.SET",value:formatValue,src:"set-format"})},alpha:value.getChannelValue("alpha"),setAlpha(alphaValue){const color=value.withChannelValue("alpha",alphaValue);send({type:"VALUE.SET",value:color,src:"set-alpha"})},rootProps:normalize.element({...parts.root.attrs,dir:state.context.dir,id:dom.getRootId(state.context),"data-disabled":dataAttr(disabled),"data-readonly":dataAttr(state.context.readOnly),style:{"--value":value.toString("css")}}),labelProps:normalize.element({...parts.label.attrs,dir:state.context.dir,id:dom.getLabelId(state.context),htmlFor:dom.getHiddenInputId(state.context),"data-disabled":dataAttr(disabled),"data-readonly":dataAttr(state.context.readOnly),"data-focus":dataAttr(focused),onClick(event){event.preventDefault();const inputEl=query(dom.getControlEl(state.context),"[data-channel=hex]");inputEl?.focus({preventScroll:true})}}),controlProps:normalize.element({...parts.control.attrs,id:dom.getControlId(state.context),dir:state.context.dir,"data-disabled":dataAttr(disabled),"data-readonly":dataAttr(state.context.readOnly),"data-state":open?"open":"closed","data-focus":dataAttr(focused)}),triggerProps:normalize.button({...parts.trigger.attrs,id:dom.getTriggerId(state.context),dir:state.context.dir,disabled,"aria-label":`select color. current color is ${valueAsString}`,"aria-controls":dom.getContentId(state.context),"aria-labelledby":dom.getLabelId(state.context),"data-disabled":dataAttr(disabled),"data-readonly":dataAttr(state.context.readOnly),"data-placement":currentPlacement,"aria-expanded":dataAttr(open),"data-state":open?"open":"closed","data-focus":dataAttr(focused),type:"button",onClick(){if(!interactive)return;send({type:"TRIGGER.CLICK"})},onBlur(){if(!interactive)return;send({type:"TRIGGER.BLUR"})},style:{position:"relative"}}),positionerProps:normalize.element({...parts.positioner.attrs,id:dom.getPositionerId(state.context),dir:state.context.dir,style:popperStyles.floating}),contentProps:normalize.element({...parts.content.attrs,id:dom.getContentId(state.context),dir:state.context.dir,"data-placement":currentPlacement,"data-state":open?"open":"closed",hidden:!open}),getAreaProps(props={}){const{xChannel,yChannel}=getAreaChannels(props);const{areaStyles}=getColorAreaGradient(areaValue,{xChannel,yChannel,dir:state.context.dir});return normalize.element({...parts.area.attrs,id:dom.getAreaId(state.context),role:"group",onPointerDown(event){if(!interactive)return;const evt=getNativeEvent(event);if(!isLeftClick(evt)||isModifierKey(evt))return;const point=getEventPoint(evt);const channel={xChannel,yChannel};send({type:"AREA.POINTER_DOWN",point,channel,id:"area"});event.preventDefault()},style:{position:"relative",touchAction:"none",forcedColorAdjust:"none",...areaStyles}})},getAreaBackgroundProps(props={}){const{xChannel,yChannel}=getAreaChannels(props);const{areaGradientStyles}=getColorAreaGradient(areaValue,{xChannel,yChannel,dir:state.context.dir});return normalize.element({...parts.areaBackground.attrs,id:dom.getAreaGradientId(state.context),style:{position:"relative",touchAction:"none",forcedColorAdjust:"none",...areaGradientStyles}})},getAreaThumbProps(props={}){const{xChannel,yChannel}=getAreaChannels(props);const channel={xChannel,yChannel};const xPercent=areaValue.getChannelValuePercent(xChannel);const yPercent=1-areaValue.getChannelValuePercent(yChannel);const xValue=areaValue.getChannelValue(xChannel);const yValue=areaValue.getChannelValue(yChannel);return normalize.element({...parts.areaThumb.attrs,id:dom.getAreaThumbId(state.context),dir:state.context.dir,tabIndex:disabled?void 0:0,"data-disabled":dataAttr(disabled),role:"slider","aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":xValue,"aria-label":`${xChannel} and ${yChannel}`,"aria-roledescription":"2d slider","aria-valuetext":`${xChannel} ${xValue}, ${yChannel} ${yValue}`,style:{position:"absolute",left:`${xPercent*100}%`,top:`${yPercent*100}%`,transform:"translate(-50%, -50%)",touchAction:"none",forcedColorAdjust:"none",background:areaValue.withChannelValue("alpha",1).toString("css")},onFocus(){if(!interactive)return;send({type:"AREA.FOCUS",id:"area",channel})},onKeyDown(event){if(event.defaultPrevented)return;if(!interactive)return;const step=getEventStep(event);const keyMap={ArrowUp(){send({type:"AREA.ARROW_UP",channel,step})},ArrowDown(){send({type:"AREA.ARROW_DOWN",channel,step})},ArrowLeft(){send({type:"AREA.ARROW_LEFT",channel,step})},ArrowRight(){send({type:"AREA.ARROW_RIGHT",channel,step})},PageUp(){send({type:"AREA.PAGE_UP",channel,step})},PageDown(){send({type:"AREA.PAGE_DOWN",channel,step})},Escape(event2){event2.stopPropagation()}};const exec=keyMap[getEventKey(event,state.context)];if(exec){exec(event);event.preventDefault()}}})},getTransparencyGridProps(props={}){const{size="12px"}=props;return normalize.element({...parts.transparencyGrid.attrs,style:{"--size":size,width:"100%",height:"100%",position:"absolute",backgroundColor:"#fff",backgroundImage:"conic-gradient(#eeeeee 0 25%, transparent 0 50%, #eeeeee 0 75%, transparent 0)",backgroundSize:"var(--size) var(--size)",inset:"0px",zIndex:"auto",pointerEvents:"none"}})},getChannelSliderProps(props){const{orientation="horizontal",channel}=props;return normalize.element({...parts.channelSlider.attrs,"data-channel":channel,"data-orientation":orientation,role:"presentation",onPointerDown(event){if(!interactive)return;const evt=getNativeEvent(event);if(!isLeftClick(evt)||isModifierKey(evt))return;const point=getEventPoint(evt);send({type:"CHANNEL_SLIDER.POINTER_DOWN",channel,point,id:channel,orientation});event.preventDefault()},style:{position:"relative",touchAction:"none"}})},getChannelSliderTrackProps(props){const{orientation="horizontal",channel}=props;return normalize.element({...parts.channelSliderTrack.attrs,id:dom.getChannelSliderId(state.context,channel),role:"group","data-channel":channel,"data-orientation":orientation,style:{position:"relative",forcedColorAdjust:"none",backgroundImage:getSliderBackground({orientation,channel,dir:state.context.dir,value:areaValue})}})},getChannelSliderThumbProps(props){const{orientation="horizontal",channel}=props;const{minValue,maxValue,step:stepValue}=areaValue.getChannelRange(channel);const channelValue=areaValue.getChannelValue(channel);const offset=(channelValue-minValue)/(maxValue-minValue);const placementStyles=orientation==="horizontal"?{left:`${offset*100}%`,top:"50%"}:{top:`${offset*100}%`,left:"50%"};return normalize.element({...parts.channelSliderThumb.attrs,id:dom.getChannelSliderThumbId(state.context,channel),role:"slider","aria-label":channel,tabIndex:disabled?void 0:0,"data-channel":channel,"data-disabled":dataAttr(disabled),"data-orientation":orientation,"aria-disabled":dataAttr(disabled),"aria-orientation":orientation,"aria-valuemax":maxValue,"aria-valuemin":minValue,"aria-valuenow":channelValue,"aria-valuetext":`${channel} ${channelValue}`,style:{forcedColorAdjust:"none",position:"absolute",background:getChannelDisplayColor(areaValue,channel).toString("css"),...placementStyles},onFocus(){if(!interactive)return;send({type:"CHANNEL_SLIDER.FOCUS",channel})},onKeyDown(event){if(event.defaultPrevented)return;if(!interactive)return;const step=getEventStep(event)*stepValue;const keyMap={ArrowUp(){send({type:"CHANNEL_SLIDER.ARROW_UP",channel,step})},ArrowDown(){send({type:"CHANNEL_SLIDER.ARROW_DOWN",channel,step})},ArrowLeft(){send({type:"CHANNEL_SLIDER.ARROW_LEFT",channel,step})},ArrowRight(){send({type:"CHANNEL_SLIDER.ARROW_RIGHT",channel,step})},PageUp(){send({type:"CHANNEL_SLIDER.PAGE_UP",channel})},PageDown(){send({type:"CHANNEL_SLIDER.PAGE_DOWN",channel})},Home(){send({type:"CHANNEL_SLIDER.HOME",channel})},End(){send({type:"CHANNEL_SLIDER.END",channel})},Escape(event2){event2.stopPropagation()}};const exec=keyMap[getEventKey(event,state.context)];if(exec){exec(event);event.preventDefault()}}})},getChannelInputProps(props){const{channel}=props;const isTextField=channel==="hex"||channel==="css";const range=getChannelRange(value,channel);return normalize.input({...parts.channelInput.attrs,dir:state.context.dir,type:isTextField?"text":"number","data-channel":channel,"aria-label":channel,spellCheck:false,autoComplete:"off",disabled,"data-disabled":dataAttr(disabled),readOnly:state.context.readOnly,defaultValue:getChannelValue(value,channel),min:range?.minValue,max:range?.maxValue,step:range?.step,onBeforeInput(event){if(isTextField||!interactive)return;const value2=event.currentTarget.value;if(value2.match(/[^0-9.]/g)){event.preventDefault()}},onFocus(event){if(!interactive)return;send({type:"CHANNEL_INPUT.FOCUS",channel});event.target.select()},onBlur(event){if(!interactive)return;const value2=isTextField?event.currentTarget.value:event.currentTarget.valueAsNumber;send({type:"CHANNEL_INPUT.BLUR",channel,value:value2,isTextField})},onKeyDown(event){if(event.defaultPrevented)return;if(!interactive)return;if(event.key==="Enter"){const value2=isTextField?event.currentTarget.value:event.currentTarget.valueAsNumber;send({type:"CHANNEL_INPUT.CHANGE",channel,value:value2,isTextField});event.preventDefault()}},style:{appearance:"none",WebkitAppearance:"none",MozAppearance:"textfield"}})},hiddenInputProps:normalize.input({type:"text",disabled,name:state.context.name,id:dom.getHiddenInputId(state.context),style:visuallyHiddenStyle,defaultValue:valueAsString}),eyeDropperTriggerProps:normalize.button({...parts.eyeDropperTrigger.attrs,type:"button",dir:state.context.dir,disabled,"data-disabled":dataAttr(disabled),"aria-label":"Pick a color from the screen",onClick(){if(!interactive)return;send("EYEDROPPER.CLICK")}}),swatchGroupProps:normalize.element({...parts.swatchGroup.attrs,role:"group"}),getSwatchTriggerState,getSwatchTriggerProps(props){const triggerState=getSwatchTriggerState(props);return normalize.button({...parts.swatchTrigger.attrs,disabled:triggerState.disabled,dir:state.context.dir,type:"button","aria-label":`select ${triggerState.valueAsString} as the color`,"data-state":triggerState.checked?"checked":"unchecked","data-value":triggerState.valueAsString,"data-disabled":dataAttr(triggerState.disabled),onClick(){if(triggerState.disabled)return;send({type:"SWATCH_TRIGGER.CLICK",value:triggerState.value})},style:{position:"relative"}})},getSwatchIndicatorProps(props){const triggerState=getSwatchTriggerState(props);return normalize.element({...parts.swatchIndicator.attrs,dir:state.context.dir,hidden:!triggerState.checked})},getSwatchProps(props){const{respectAlpha=true}=props;const triggerState=getSwatchTriggerState(props);return normalize.element({...parts.swatch.attrs,dir:state.context.dir,"data-state":triggerState.checked?"checked":"unchecked","data-value":triggerState.valueAsString,style:{position:"relative",background:triggerState.value.toString(respectAlpha?"css":"hex")}})},formatTriggerProps:normalize.button({...parts.formatTrigger.attrs,dir:state.context.dir,type:"button","aria-label":`change color format to ${getNextFormat(state.context.format)}`,onClick(event){if(event.currentTarget.disabled)return;const nextFormat=getNextFormat(state.context.format);send({type:"FORMAT.SET",format:nextFormat,src:"format-trigger"})}}),formatSelectProps:normalize.select({...parts.formatSelect.attrs,"aria-label":"change color format",dir:state.context.dir,defaultValue:state.context.format,disabled,onChange(event){const format=assertFormat(event.currentTarget.value);send({type:"FORMAT.SET",format,src:"format-select"})}})}}var formats=["hsba","hsla","rgba"];var formatRegex=new RegExp(`^(${formats.join("|")})$`);function getNextFormat(format){const index=formats.indexOf(format);return formats[index+1]??formats[0]}function assertFormat(format){if(formatRegex.test(format))return format;throw new Error(`Unsupported color format: ${format}`)}import{parseColor as parseColor4}from"@zag-js/color-utils";import{createMachine,guards}from"@zag-js/core";import{trackDismissableElement}from"@zag-js/dismissable";import{trackPointerMove}from"@zag-js/dom-event";import{getInitialFocus,raf}from"@zag-js/dom-query";import{dispatchInputValueEvent,trackFormControl}from"@zag-js/form-utils";import{getPlacement}from"@zag-js/popper";import{disableTextSelection}from"@zag-js/text-selection";import{compact,tryCatch}from"@zag-js/utils";import{parseColor as parseColor3}from"@zag-js/color-utils";var parse=colorString=>{return parseColor3(colorString)};var{and}=guards;function machine(userContext){const ctx=compact(userContext);return createMachine({id:"color-picker",initial:ctx.open?"open":"idle",context:{dir:"ltr",value:parse("#000000"),format:"rgba",disabled:false,closeOnSelect:false,...ctx,activeId:null,activeChannel:null,activeOrientation:null,fieldsetDisabled:false,restoreFocus:true,positioning:{...ctx.positioning,placement:"bottom"}},computed:{isRtl:ctx2=>ctx2.dir==="rtl",isDisabled:ctx2=>!!ctx2.disabled||ctx2.fieldsetDisabled,isInteractive:ctx2=>!(ctx2.isDisabled||ctx2.readOnly),valueAsString:ctx2=>ctx2.value.toString(ctx2.format),areaValue:ctx2=>{const format=ctx2.format.startsWith("hsl")?"hsla":"hsba";return ctx2.value.toFormat(format)}},activities:["trackFormControl"],watch:{value:["syncInputElements"],format:["syncFormatSelectElement"],open:["toggleVisibility"]},on:{"VALUE.SET":{actions:["setValue"]},"FORMAT.SET":{actions:["setFormat"]},"CHANNEL_INPUT.CHANGE":{actions:["setChannelColorFromInput"]},"EYEDROPPER.CLICK":{actions:["openEyeDropper"]}},states:{idle:{tags:["closed"],on:{"CONTROLLED.OPEN":{target:"open",actions:["setInitialFocus"]},OPEN:[{guard:"isOpenControlled",actions:["invokeOnOpen"]},{target:"open",actions:["invokeOnOpen","setInitialFocus"]}],"TRIGGER.CLICK":[{guard:"isOpenControlled",actions:["invokeOnOpen"]},{target:"open",actions:["invokeOnOpen","setInitialFocus"]}],"CHANNEL_INPUT.FOCUS":{target:"focused",actions:["setActiveChannel"]}}},focused:{tags:["closed","focused"],on:{"CONTROLLED.OPEN":{target:"open",actions:["setInitialFocus"]},OPEN:[{guard:"isOpenControlled",actions:["invokeOnOpen"]},{target:"open",actions:["invokeOnOpen","setInitialFocus"]}],"TRIGGER.CLICK":[{guard:"isOpenControlled",actions:["invokeOnOpen"]},{target:"open",actions:["invokeOnOpen","setInitialFocus"]}],"CHANNEL_INPUT.FOCUS":{actions:["setActiveChannel"]},"CHANNEL_INPUT.BLUR":{target:"idle",actions:["setChannelColorFromInput"]},"TRIGGER.BLUR":{target:"idle"}}},open:{tags:["open"],activities:["trackPositioning","trackDismissableElement"],on:{"CONTROLLED.CLOSE":[{guard:"shouldRestoreFocus",target:"focused",actions:["setReturnFocus"]},{target:"idle"}],"TRIGGER.CLICK":[{guard:"isOpenControlled",actions:["invokeOnClose"]},{target:"idle",actions:["invokeOnClose"]}],"AREA.POINTER_DOWN":{target:"open:dragging",actions:["setActiveChannel","setAreaColorFromPoint","focusAreaThumb"]},"AREA.FOCUS":{actions:["setActiveChannel"]},"CHANNEL_SLIDER.POINTER_DOWN":{target:"open:dragging",actions:["setActiveChannel","setChannelColorFromPoint","focusChannelThumb"]},"CHANNEL_SLIDER.FOCUS":{actions:["setActiveChannel"]},"AREA.ARROW_LEFT":{actions:["decrementXChannel"]},"AREA.ARROW_RIGHT":{actions:["incrementXChannel"]},"AREA.ARROW_UP":{actions:["incrementYChannel"]},"AREA.ARROW_DOWN":{actions:["decrementYChannel"]},"AREA.PAGE_UP":{actions:["incrementXChannel"]},"AREA.PAGE_DOWN":{actions:["decrementXChannel"]},"CHANNEL_SLIDER.ARROW_LEFT":{actions:["decrementChannel"]},"CHANNEL_SLIDER.ARROW_RIGHT":{actions:["incrementChannel"]},"CHANNEL_SLIDER.ARROW_UP":{actions:["incrementChannel"]},"CHANNEL_SLIDER.ARROW_DOWN":{actions:["decrementChannel"]},"CHANNEL_SLIDER.PAGE_UP":{actions:["incrementChannel"]},"CHANNEL_SLIDER.PAGE_DOWN":{actions:["decrementChannel"]},"CHANNEL_SLIDER.HOME":{actions:["setChannelToMin"]},"CHANNEL_SLIDER.END":{actions:["setChannelToMax"]},"CHANNEL_INPUT.BLUR":{actions:["setChannelColorFromInput"]},INTERACT_OUTSIDE:[{guard:"isOpenControlled",actions:["invokeOnClose"]},{guard:"shouldRestoreFocus",target:"focused",actions:["invokeOnClose","setReturnFocus"]},{target:"idle",actions:["invokeOnClose"]}],CLOSE:[{guard:"isOpenControlled",actions:["invokeOnClose"]},{target:"idle",actions:["invokeOnClose"]}],"SWATCH_TRIGGER.CLICK":[{guard:and("isOpenControlled","closeOnSelect"),actions:["setValue","invokeOnClose"]},{guard:"closeOnSelect",target:"focused",actions:["setValue","invokeOnClose","setReturnFocus"]},{actions:["setValue"]}]}},"open:dragging":{tags:["open"],exit:["clearActiveChannel"],activities:["trackPointerMove","disableTextSelection","trackPositioning","trackDismissableElement"],on:{"CONTROLLED.CLOSE":[{guard:"shouldRestoreFocus",target:"focused",actions:["setReturnFocus"]},{target:"idle"}],"AREA.POINTER_MOVE":{actions:["setAreaColorFromPoint","focusAreaThumb"]},"AREA.POINTER_UP":{target:"open",actions:["invokeOnChangeEnd"]},"CHANNEL_SLIDER.POINTER_MOVE":{actions:["setChannelColorFromPoint","focusChannelThumb"]},"CHANNEL_SLIDER.POINTER_UP":{target:"open",actions:["invokeOnChangeEnd"]},INTERACT_OUTSIDE:[{guard:"isOpenControlled",actions:["invokeOnClose"]},{guard:"shouldRestoreFocus",target:"focused",actions:["invokeOnClose","setReturnFocus"]},{target:"idle",actions:["invokeOnClose"]}],CLOSE:[{guard:"isOpenControlled",actions:["invokeOnClose"]},{target:"idle",actions:["invokeOnClose"]}]}}}},{guards:{closeOnSelect:ctx2=>!!ctx2.closeOnSelect,isOpenControlled:ctx2=>!!ctx2["open.controlled"],shouldRestoreFocus:ctx2=>!!ctx2.restoreFocus},activities:{trackPositioning(ctx2){ctx2.currentPlacement=ctx2.positioning.placement;const anchorEl=dom.getTriggerEl(ctx2);const getPositionerEl=()=>dom.getPositionerEl(ctx2);return getPlacement(anchorEl,getPositionerEl,{...ctx2.positioning,defer:true,onComplete(data){ctx2.currentPlacement=data.placement}})},trackDismissableElement(ctx2,_evt,{send}){const getContentEl=()=>dom.getContentEl(ctx2);return trackDismissableElement(getContentEl,{exclude:dom.getTriggerEl(ctx2),defer:true,onInteractOutside(event){ctx2.onInteractOutside?.(event);if(event.defaultPrevented)return;ctx2.restoreFocus=!(event.detail.focusable||event.detail.contextmenu)},onPointerDownOutside:ctx2.onPointerDownOutside,onFocusOutside:ctx2.onFocusOutside,onDismiss(){send({type:"INTERACT_OUTSIDE"})}})},trackFormControl(ctx2,_evt,{send,initialContext}){const inputEl=dom.getHiddenInputEl(ctx2);return trackFormControl(inputEl,{onFieldsetDisabledChange(disabled){ctx2.fieldsetDisabled=disabled},onFormReset(){send({type:"VALUE.SET",value:initialContext.value,src:"form.reset"})}})},trackPointerMove(ctx2,_evt,{send}){return trackPointerMove(dom.getDoc(ctx2),{onPointerMove({point}){const type=ctx2.activeId==="area"?"AREA.POINTER_MOVE":"CHANNEL_SLIDER.POINTER_MOVE";send({type,point})},onPointerUp(){const type=ctx2.activeId==="area"?"AREA.POINTER_UP":"CHANNEL_SLIDER.POINTER_UP";send({type})}})},disableTextSelection(ctx2){return disableTextSelection({doc:dom.getDoc(ctx2),target:dom.getContentEl(ctx2)})}},actions:{openEyeDropper(ctx2){const isSupported="EyeDropper"in dom.getWin(ctx2);if(!isSupported)return;const win=dom.getWin(ctx2);const picker=new win.EyeDropper;picker.open().then(({sRGBHex})=>{const format=ctx2.value.getFormat();const color=parseColor4(sRGBHex).toFormat(format);set.value(ctx2,color);ctx2.onValueChangeEnd?.({value:ctx2.value,valueAsString:ctx2.valueAsString})}).catch(()=>void 0)},setActiveChannel(ctx2,evt){ctx2.activeId=evt.id;if(evt.channel)ctx2.activeChannel=evt.channel;if(evt.orientation)ctx2.activeOrientation=evt.orientation},clearActiveChannel(ctx2){ctx2.activeChannel=null;ctx2.activeId=null;ctx2.activeOrientation=null},setAreaColorFromPoint(ctx2,evt){const{xChannel,yChannel}=evt.channel||ctx2.activeChannel;const percent=dom.getAreaValueFromPoint(ctx2,evt.point);if(!percent)return;const xValue=ctx2.areaValue.getChannelPercentValue(xChannel,percent.x);const yValue=ctx2.areaValue.getChannelPercentValue(yChannel,1-percent.y);const color=ctx2.areaValue.withChannelValue(xChannel,xValue).withChannelValue(yChannel,yValue);set.value(ctx2,color)},setChannelColorFromPoint(ctx2,evt){const channel=evt.channel||ctx2.activeId;const percent=dom.getChannelSliderValueFromPoint(ctx2,evt.point,channel);if(!percent)return;const orientation=ctx2.activeOrientation||"horizontal";const channelPercent=orientation==="horizontal"?percent.x:percent.y;const value=ctx2.areaValue.getChannelPercentValue(channel,channelPercent);const color=ctx2.areaValue.withChannelValue(channel,value);set.value(ctx2,color)},setValue(ctx2,evt){set.value(ctx2,evt.value)},setFormat(ctx2,evt){set.format(ctx2,evt.format)},syncInputElements(ctx2){sync.inputs(ctx2)},invokeOnChangeEnd(ctx2){invoke.changeEnd(ctx2)},setChannelColorFromInput(ctx2,evt){const{channel,isTextField,value}=evt;const currentAlpha=ctx2.value.getChannelValue("alpha");let color;if(channel==="alpha"){let valueAsNumber=parseFloat(value);valueAsNumber=Number.isNaN(valueAsNumber)?currentAlpha:valueAsNumber;color=ctx2.value.withChannelValue("alpha",valueAsNumber)}else if(isTextField){color=tryCatch(()=>parse(value).withChannelValue("alpha",currentAlpha),()=>ctx2.value)}else{const current=ctx2.value.toFormat(ctx2.format);const valueAsNumber=Number.isNaN(value)?current.getChannelValue(channel):value;color=current.withChannelValue(channel,valueAsNumber)}sync.inputs(ctx2,color);set.value(ctx2,color)},incrementChannel(ctx2,evt){const color=ctx2.value.incrementChannel(evt.channel,evt.step);set.value(ctx2,color)},decrementChannel(ctx2,evt){const color=ctx2.value.decrementChannel(evt.channel,evt.step);set.value(ctx2,color)},incrementXChannel(ctx2,evt){const{xChannel}=evt.channel;const color=ctx2.areaValue.incrementChannel(xChannel,evt.step);set.value(ctx2,color)},decrementXChannel(ctx2,evt){const{xChannel}=evt.channel;const color=ctx2.areaValue.decrementChannel(xChannel,evt.step);set.value(ctx2,color)},incrementYChannel(ctx2,evt){const{yChannel}=evt.channel;const color=ctx2.areaValue.incrementChannel(yChannel,evt.step);set.value(ctx2,color)},decrementYChannel(ctx2,evt){const{yChannel}=evt.channel;const color=ctx2.areaValue.decrementChannel(yChannel,evt.step);set.value(ctx2,color)},setChannelToMax(ctx2,evt){const range=ctx2.value.getChannelRange(evt.channel);const color=ctx2.value.withChannelValue(evt.channel,range.maxValue);set.value(ctx2,color)},setChannelToMin(ctx2,evt){const range=ctx2.value.getChannelRange(evt.channel);const color=ctx2.value.withChannelValue(evt.channel,range.minValue);set.value(ctx2,color)},focusAreaThumb(ctx2){raf(()=>{dom.getAreaThumbEl(ctx2)?.focus({preventScroll:true})})},focusChannelThumb(ctx2,evt){raf(()=>{dom.getChannelSliderThumbEl(ctx2,evt.channel)?.focus({preventScroll:true})})},setInitialFocus(ctx2){raf(()=>{const element=getInitialFocus(dom.getContentEl(ctx2),ctx2.initialFocusEl);element?.focus({preventScroll:true})})},setReturnFocus(ctx2){raf(()=>{dom.getTriggerEl(ctx2)?.focus({preventScroll:true})})},syncFormatSelectElement(ctx2){sync.formatSelect(ctx2)},invokeOnOpen(ctx2){ctx2.onOpenChange?.({open:true})},invokeOnClose(ctx2){ctx2.onOpenChange?.({open:false})},toggleVisibility(ctx2,evt,{send}){send({type:ctx2.open?"CONTROLLED.OPEN":"CONTROLLED.CLOSE",previousEvent:evt})}},compareFns:{value:(a,b)=>a.isEqual(b)}})}var sync={inputs(ctx,color){const channelInputs=dom.getChannelInputEls(ctx);raf(()=>{channelInputs.forEach(inputEl=>{const channel=inputEl.dataset.channel;dom.setValue(inputEl,getChannelValue(color||ctx.value,channel))})})},formatSelect(ctx){const selectEl=dom.getFormatSelectEl(ctx);raf(()=>{dom.setValue(selectEl,ctx.format)})}};var invoke={changeEnd(ctx){const value=ctx.value.toFormat(ctx.format);ctx.onValueChangeEnd?.({value,valueAsString:ctx.valueAsString})},change(ctx){const value=ctx.value.toFormat(ctx.format);ctx.onValueChange?.({value,valueAsString:ctx.valueAsString});dispatchInputValueEvent(dom.getHiddenInputEl(ctx),{value:ctx.valueAsString})},formatChange(ctx){ctx.onFormatChange?.({format:ctx.format})}};var set={value(ctx,color){if(!color||ctx.value.isEqual(color))return;ctx.value=color;invoke.change(ctx)},format(ctx,format){if(ctx.format===format)return;ctx.format=format;invoke.formatChange(ctx)}};export{anatomy,connect,machine,parse};
 //# sourceMappingURL=index.mjs.map