@zag-js/color-picker 0.10.2 → 0.10.4

package/dist/index.js

@@ -1,1090 +1,13 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+'use strict';
 
-// src/index.ts
-var src_exports = {};
-__export(src_exports, {
-  anatomy: () => anatomy,
-  connect: () => connect,
-  machine: () => machine
-});
-module.exports = __toCommonJS(src_exports);
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-// src/color-picker.anatomy.ts
-var import_anatomy = require("@zag-js/anatomy");
-var anatomy = (0, import_anatomy.createAnatomy)("color-picker", [
-  "area",
-  "areaThumb",
-  "areaGradient",
-  "channelSliderTrack",
-  "channelSliderTrackBg",
-  "channelSliderThumb",
-  "channelInput",
-  "swatch",
-  "swatchBg",
-  "content",
-  "label",
-  "eyeDropTrigger"
-]);
-var parts = anatomy.build();
+const colorPicker_anatomy = require('./color-picker.anatomy.js');
+const colorPicker_connect = require('./color-picker.connect.js');
+const colorPicker_machine = require('./color-picker.machine.js');
 
-// src/color-picker.connect.ts
-var import_color_utils2 = require("@zag-js/color-utils");
-var import_dom_event2 = require("@zag-js/dom-event");
-var import_dom_query2 = require("@zag-js/dom-query");
 
-// src/color-picker.dom.ts
-var import_dom_event = require("@zag-js/dom-event");
-var import_dom_query = require("@zag-js/dom-query");
-var dom = (0, import_dom_query.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 } = (0, import_dom_event.getRelativePoint)(point, dom.getAreaEl(ctx));
-    return percent;
-  },
-  getChannelSliderTrackEl: (ctx, channel) => {
-    return dom.queryById(ctx, dom.getChannelSliderTrackId(ctx, channel));
-  },
-  getChannelSliderValueFromPoint(ctx, point, channel) {
-    const { percent } = (0, import_dom_event.getRelativePoint)(point, dom.getChannelSliderTrackEl(ctx, channel));
-    return percent;
-  },
-  getChannelInputEls: (ctx) => {
-    return (0, import_dom_query.queryAll)(dom.getContentEl(ctx), "input[data-channel]");
-  }
-});
 
-// src/utils/get-channel-details.ts
-var import_numeric_range = require("@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 : (0, import_numeric_range.snapValueToStep)(xValue + stepSize, minValueX, maxValueX, stepX);
-    },
-    incrementY(stepSize) {
-      return yValue + stepSize > maxValueY ? maxValueY : (0, import_numeric_range.snapValueToStep)(yValue + stepSize, minValueY, maxValueY, stepY);
-    },
-    decrementX(stepSize) {
-      return (0, import_numeric_range.snapValueToStep)(xValue - stepSize, minValueX, maxValueX, stepX);
-    },
-    decrementY(stepSize) {
-      return (0, import_numeric_range.snapValueToStep)(yValue - stepSize, minValueY, maxValueY, stepY);
-    },
-    getColorFromPoint(x, y) {
-      let newXValue = (0, import_numeric_range.getPercentValue)(x, minValueX, maxValueX, stepX);
-      let newYValue = (0, import_numeric_range.getPercentValue)(1 - y, minValueY, maxValueY, stepY);
-      let newColor;
-      if (newXValue !== xValue) {
-        newXValue = (0, import_numeric_range.snapValueToStep)(newXValue, minValueX, maxValueX, stepX);
-        newColor = color.withChannelValue(channels.xChannel, newXValue);
-      }
-      if (newYValue !== yValue) {
-        newYValue = (0, import_numeric_range.snapValueToStep)(newYValue, minValueY, maxValueY, stepY);
-        newColor = (newColor || color).withChannelValue(channels.yChannel, newYValue);
-      }
-      return newColor;
-    }
-  };
-}
-
-// src/utils/get-channel-display-color.ts
-var import_color_utils = require("@zag-js/color-utils");
-function getChannelDisplayColor(color, channel) {
-  switch (channel) {
-    case "hue":
-      return (0, import_color_utils.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: (0, import_color_utils2.normalizeColor)(value), src: "set-color" });
-    },
-    /**
-     * Function to set the color value of a specific channel
-     */
-    setChannelValue(channel, value) {
-      const color = valueAsColor.withChannelValue(channel, value);
-      send({ type: "VALUE.SET", value: color, src: "set-channel" });
-    },
-    /**
-     * Function to set the color format
-     */
-    setFormat(format) {
-      const value = valueAsColor.toFormat(format);
-      send({ type: "VALUE.SET", value, src: "set-format" });
-    },
-    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 = (0, import_dom_event2.getNativeEvent)(event);
-          if (!(0, import_dom_event2.isLeftClick)(evt) || (0, import_dom_event2.isModifiedEvent)(evt))
-            return;
-          const point = (0, import_dom_event2.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": (0, import_dom_query2.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 = (0, import_dom_event2.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[(0, import_dom_event2.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 = (0, import_dom_event2.getNativeEvent)(event);
-          if (!(0, import_dom_event2.isLeftClick)(evt) || (0, import_dom_event2.isModifiedEvent)(evt))
-            return;
-          const point = (0, import_dom_event2.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": (0, import_dom_query2.dataAttr)(isDisabled),
-        "data-orientation": orientation,
-        "aria-disabled": (0, import_dom_query2.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 = (0, import_dom_event2.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[(0, import_dom_event2.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": (0, import_dom_query2.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 = (0, import_color_utils2.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 = (0, import_color_utils2.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
-var import_color_utils3 = require("@zag-js/color-utils");
-var import_core = require("@zag-js/core");
-var import_dom_event3 = require("@zag-js/dom-event");
-var import_dom_query3 = require("@zag-js/dom-query");
-var import_numeric_range2 = require("@zag-js/numeric-range");
-var import_text_selection = require("@zag-js/text-selection");
-var import_utils = require("@zag-js/utils");
-function machine(userContext) {
-  const ctx = (0, import_utils.compact)(userContext);
-  return (0, import_core.createMachine)(
-    {
-      id: "color-picker",
-      initial: "idle",
-      context: {
-        dir: "ltr",
-        activeId: null,
-        activeChannel: null,
-        activeOrientation: null,
-        value: "#D9D9D9",
-        ...ctx,
-        valueAsColor: (0, import_color_utils3.parseColor)(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 (0, import_dom_event3.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 (0, import_text_selection.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 = (0, import_color_utils3.parseColor)(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 = (0, import_numeric_range2.getPercentValue)(point, minValue, maxValue, step);
-          const value = (0, import_numeric_range2.snapValueToStep)(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 = (0, import_color_utils3.parseColor)(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 ? (0, import_color_utils3.parseColor)(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 = (0, import_numeric_range2.snapValueToStep)(channelValue + evt.step, minValue, maxValue, step);
-          const newColor = ctx2.valueAsColor.withChannelValue(evt.channel, (0, import_numeric_range2.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 = (0, import_numeric_range2.snapValueToStep)(channelValue - evt.step, minValue, maxValue, step);
-          const newColor = ctx2.valueAsColor.withChannelValue(evt.channel, (0, import_numeric_range2.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) {
-          (0, import_dom_query3.raf)(() => {
-            dom.getAreaThumbEl(ctx2)?.focus({ preventScroll: true });
-          });
-        },
-        focusChannelThumb(ctx2, evt) {
-          (0, import_dom_query3.raf)(() => {
-            dom.getChannelSliderThumbEl(ctx2, evt.channel)?.focus({ preventScroll: true });
-          });
-        }
-      }
-    }
-  );
-}
-var setColor = (ctx, color) => {
-  ctx.value = color.toString("css");
-  ctx.valueAsColor = color;
-};
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  anatomy,
-  connect,
-  machine
-});
+exports.anatomy = colorPicker_anatomy.anatomy;
+exports.connect = colorPicker_connect.connect;
+exports.machine = colorPicker_machine.machine;