@zag-js/color-picker 0.10.4 → 0.11.0

package/dist/index.mjs

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