@zag-js/color-picker 0.10.2 → 0.10.4

package/dist/color-picker.connect.js

@@ -1,396 +1,18 @@
-"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/color-picker.connect.ts
-var color_picker_connect_exports = {};
-__export(color_picker_connect_exports, {
-  connect: () => connect
-});
-module.exports = __toCommonJS(color_picker_connect_exports);
-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");
+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 colorUtils = require('@zag-js/color-utils');
+const domEvent = require('@zag-js/dom-event');
+const domQuery = require('@zag-js/dom-query');
+const colorPicker_anatomy = require('./color-picker.anatomy.js');
+const colorPicker_dom = require('./color-picker.dom.js');
+const getChannelDetails = require('./utils/get-channel-details.js');
+const getChannelDisplayColor = require('./utils/get-channel-display-color.js');
+const getChannelInputValue = require('./utils/get-channel-input-value.js');
+const getColorAreaGradient = require('./utils/get-color-area-gradient.js');
+const getSliderBackground = require('./utils/get-slider-background.js');
 
-// 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;
@@ -418,7 +40,7 @@ function connect(state, send, normalize) {
      * Function to set the color value
      */
     setColor(value) {
-      send({ type: "VALUE.SET", value: (0, import_color_utils2.normalizeColor)(value), src: "set-color" });
+      send({ type: "VALUE.SET", value: colorUtils.normalizeColor(value), src: "set-color" });
     },
     /**
      * Function to set the color value of a specific channel
@@ -435,23 +57,23 @@ function connect(state, send, normalize) {
       send({ type: "VALUE.SET", value, src: "set-format" });
     },
     contentProps: normalize.element({
-      ...parts.content.attrs,
-      id: dom.getContentId(state.context)
+      ...colorPicker_anatomy.parts.content.attrs,
+      id: colorPicker_dom.dom.getContentId(state.context)
     }),
     getAreaProps(props) {
       const { xChannel, yChannel } = props;
-      const { areaStyles } = getColorAreaGradient(state.context, xChannel, yChannel);
+      const { areaStyles } = getColorAreaGradient.getColorAreaGradient(state.context, xChannel, yChannel);
       return normalize.element({
-        ...parts.area.attrs,
-        id: dom.getAreaId(state.context),
+        ...colorPicker_anatomy.parts.area.attrs,
+        id: colorPicker_dom.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))
+          const evt = domEvent.getNativeEvent(event);
+          if (!domEvent.isLeftClick(evt) || domEvent.isModifiedEvent(evt))
             return;
-          const point = (0, import_dom_event2.getEventPoint)(evt);
+          const point = domEvent.getEventPoint(evt);
           const channel = { xChannel, yChannel };
           send({ type: "AREA.POINTER_DOWN", point, channel, id: "area" });
         },
@@ -465,10 +87,10 @@ function connect(state, send, normalize) {
     },
     getAreaGradientProps(props) {
       const { xChannel, yChannel } = props;
-      const { areaGradientStyles } = getColorAreaGradient(state.context, xChannel, yChannel);
+      const { areaGradientStyles } = getColorAreaGradient.getColorAreaGradient(state.context, xChannel, yChannel);
       return normalize.element({
-        ...parts.areaGradient.attrs,
-        id: dom.getAreaGradientId(state.context),
+        ...colorPicker_anatomy.parts.areaGradient.attrs,
+        id: colorPicker_dom.dom.getAreaGradientId(state.context),
         style: {
           position: "relative",
           touchAction: "none",
@@ -479,14 +101,14 @@ function connect(state, send, normalize) {
     },
     getAreaThumbProps(props) {
       const { xChannel, yChannel } = props;
-      const { getThumbPosition } = getChannelDetails(valueAsColor, xChannel, yChannel);
+      const { getThumbPosition } = getChannelDetails.getChannelDetails(valueAsColor, xChannel, yChannel);
       const { x, y } = getThumbPosition();
       const channel = { xChannel, yChannel };
       return normalize.element({
-        ...parts.areaThumb.attrs,
-        id: dom.getAreaThumbId(state.context),
+        ...colorPicker_anatomy.parts.areaThumb.attrs,
+        id: colorPicker_dom.dom.getAreaThumbId(state.context),
         tabIndex: isDisabled ? void 0 : 0,
-        "data-disabled": (0, import_dom_query2.dataAttr)(isDisabled),
+        "data-disabled": domQuery.dataAttr(isDisabled),
         role: "presentation",
         style: {
           position: "absolute",
@@ -503,7 +125,7 @@ function connect(state, send, normalize) {
         onKeyDown(event) {
           if (!isInteractive)
             return;
-          const step = (0, import_dom_event2.getEventStep)(event);
+          const step = domEvent.getEventStep(event);
           const keyMap = {
             ArrowUp() {
               send({ type: "AREA.ARROW_UP", channel, step });
@@ -524,7 +146,7 @@ function connect(state, send, normalize) {
               send({ type: "AREA.PAGE_DOWN", channel, step });
             }
           };
-          const exec = keyMap[(0, import_dom_event2.getEventKey)(event, state.context)];
+          const exec = keyMap[domEvent.getEventKey(event, state.context)];
           if (exec) {
             exec(event);
             event.preventDefault();
@@ -535,32 +157,32 @@ function connect(state, send, normalize) {
     getChannelSliderTrackProps(props) {
       const { orientation = "horizontal", channel } = props;
       return normalize.element({
-        ...parts.channelSliderTrack.attrs,
-        id: dom.getChannelSliderTrackId(state.context, channel),
+        ...colorPicker_anatomy.parts.channelSliderTrack.attrs,
+        id: colorPicker_dom.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))
+          const evt = domEvent.getNativeEvent(event);
+          if (!domEvent.isLeftClick(evt) || domEvent.isModifiedEvent(evt))
             return;
-          const point = (0, import_dom_event2.getEventPoint)(evt);
+          const point = domEvent.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 })
+          backgroundImage: getSliderBackground.getSliderBgImage(state.context, { orientation, channel })
         }
       });
     },
     getChannelSliderBackgroundProps(props) {
       const { orientation = "horizontal", channel } = props;
       return normalize.element({
-        ...parts.channelSliderTrackBg.attrs,
+        ...colorPicker_anatomy.parts.channelSliderTrackBg.attrs,
         "data-orientation": orientation,
         "data-channel": channel,
         style: {
@@ -586,15 +208,15 @@ function connect(state, send, normalize) {
       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),
+        ...colorPicker_anatomy.parts.channelSliderThumb.attrs,
+        id: colorPicker_dom.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-disabled": domQuery.dataAttr(isDisabled),
         "data-orientation": orientation,
-        "aria-disabled": (0, import_dom_query2.dataAttr)(isDisabled),
+        "aria-disabled": domQuery.dataAttr(isDisabled),
         "aria-orientation": orientation,
         "aria-valuemax": maxValue,
         "aria-valuemin": minValue,
@@ -602,7 +224,7 @@ function connect(state, send, normalize) {
         style: {
           forcedColorAdjust: "none",
           position: "absolute",
-          background: getChannelDisplayColor(valueAsColor, channel).toString("css"),
+          background: getChannelDisplayColor.getChannelDisplayColor(valueAsColor, channel).toString("css"),
           ...placementStyles
         },
         onFocus() {
@@ -618,7 +240,7 @@ function connect(state, send, normalize) {
         onKeyDown(event) {
           if (!isInteractive)
             return;
-          const step = (0, import_dom_event2.getEventStep)(event) * stepValue;
+          const step = domEvent.getEventStep(event) * stepValue;
           const keyMap = {
             ArrowUp() {
               send({ type: "CHANNEL_SLIDER.ARROW_UP", channel, step });
@@ -645,7 +267,7 @@ function connect(state, send, normalize) {
               send({ type: "CHANNEL_SLIDER.END", channel });
             }
           };
-          const exec = keyMap[(0, import_dom_event2.getEventKey)(event, state.context)];
+          const exec = keyMap[domEvent.getEventKey(event, state.context)];
           if (exec) {
             exec(event);
             event.preventDefault();
@@ -656,17 +278,17 @@ function connect(state, send, normalize) {
     getChannelInputProps(props) {
       const { channel } = props;
       const isTextField = channel === "hex" || channel === "css";
-      const range = getChannelInputRange(valueAsColor, channel);
+      const range = getChannelInputValue.getChannelInputRange(valueAsColor, channel);
       return normalize.input({
-        ...parts.channelInput.attrs,
+        ...colorPicker_anatomy.parts.channelInput.attrs,
         type: isTextField ? "text" : "number",
         "data-channel": channel,
         "aria-label": channel,
         disabled: isDisabled,
-        "data-disabled": (0, import_dom_query2.dataAttr)(isDisabled),
+        "data-disabled": domQuery.dataAttr(isDisabled),
         readOnly: state.context.readOnly,
-        id: dom.getChannelInputId(state.context, channel),
-        defaultValue: getChannelInputValue(valueAsColor, channel),
+        id: colorPicker_dom.dom.getChannelInputId(state.context, channel),
+        defaultValue: getChannelInputValue.getChannelInputValue(valueAsColor, channel),
         min: range?.minValue,
         max: range?.maxValue,
         step: range?.step,
@@ -699,16 +321,16 @@ function connect(state, send, normalize) {
       });
     },
     eyeDropperTriggerProps: normalize.button({
-      ...parts.eyeDropTrigger.attrs,
+      ...colorPicker_anatomy.parts.eyeDropTrigger.attrs,
       onClick() {
         send("EYEDROPPER.CLICK");
       }
     }),
     getSwatchBackgroundProps(props) {
       const { value } = props;
-      const alpha = (0, import_color_utils2.normalizeColor)(value).getChannelValue("alpha");
+      const alpha = colorUtils.normalizeColor(value).getChannelValue("alpha");
       return normalize.element({
-        ...parts.swatchBg.attrs,
+        ...colorPicker_anatomy.parts.swatchBg.attrs,
         "data-alpha": alpha,
         style: {
           width: "100%",
@@ -730,9 +352,9 @@ function connect(state, send, normalize) {
     },
     getSwatchProps(props) {
       const { value, readOnly } = props;
-      const color = (0, import_color_utils2.normalizeColor)(value).toFormat(valueAsColor.getColorSpace());
+      const color = colorUtils.normalizeColor(value).toFormat(valueAsColor.getColorSpace());
       return normalize.element({
-        ...parts.swatch.attrs,
+        ...colorPicker_anatomy.parts.swatch.attrs,
         onClick() {
           if (readOnly)
             return;
@@ -746,7 +368,5 @@ function connect(state, send, normalize) {
     }
   };
 }
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  connect
-});
+
+exports.connect = connect;