@zag-js/color-picker 0.70.0 → 0.72.0

package/dist/index.js

@@ -1,35 +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/index.ts
-var src_exports = {};
-__export(src_exports, {
-  anatomy: () => anatomy,
-  connect: () => connect,
-  machine: () => machine,
-  parse: () => parse
-});
-module.exports = __toCommonJS(src_exports);
+var anatomy$1 = require('@zag-js/anatomy');
+var colorUtils = require('@zag-js/color-utils');
+var domEvent = require('@zag-js/dom-event');
+var domQuery = require('@zag-js/dom-query');
+var popper = require('@zag-js/popper');
+var core = require('@zag-js/core');
+var dismissable = require('@zag-js/dismissable');
+var formUtils = require('@zag-js/form-utils');
+var textSelection = require('@zag-js/text-selection');
+var utils = require('@zag-js/utils');
 
 // src/color-picker.anatomy.ts
-var import_anatomy = require("@zag-js/anatomy");
-var anatomy = (0, import_anatomy.createAnatomy)("color-picker", [
+var anatomy = anatomy$1.createAnatomy("color-picker", [
   "root",
   "label",
   "control",
@@ -56,17 +39,7 @@ var anatomy = (0, import_anatomy.createAnatomy)("color-picker", [
   "formatSelect"
 ]);
 var parts = anatomy.build();
-
-// src/color-picker.connect.ts
-var import_color_utils3 = require("@zag-js/color-utils");
-var import_dom_event2 = require("@zag-js/dom-event");
-var import_dom_query2 = require("@zag-js/dom-query");
-var import_popper = require("@zag-js/popper");
-
-// 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)({
+var dom = domQuery.createScope({
   getRootId: (ctx) => ctx.ids?.root ?? `color-picker:${ctx.id}`,
   getLabelId: (ctx) => ctx.ids?.label ?? `color-picker:${ctx.id}:label`,
   getHiddenInputId: (ctx) => ctx.ids?.hiddenInput ?? `color-picker:${ctx.id}:hidden-input`,
@@ -86,8 +59,8 @@ var dom = (0, import_dom_query.createScope)({
   getChannelInputEl: (ctx, channel) => {
     const selector = `input[data-channel="${channel}"]`;
     return [
-      ...(0, import_dom_query.queryAll)(dom.getContentEl(ctx), selector),
-      ...(0, import_dom_query.queryAll)(dom.getControlEl(ctx), selector)
+      ...domQuery.queryAll(dom.getContentEl(ctx), selector),
+      ...domQuery.queryAll(dom.getControlEl(ctx), selector)
     ];
   },
   getFormatSelectEl: (ctx) => dom.getById(ctx, dom.getFormatSelectId(ctx)),
@@ -96,7 +69,7 @@ var dom = (0, import_dom_query.createScope)({
   getAreaValueFromPoint(ctx, point) {
     const areaEl = dom.getAreaEl(ctx);
     if (!areaEl) return;
-    const { percent } = (0, import_dom_event.getRelativePoint)(point, areaEl);
+    const { percent } = domEvent.getRelativePoint(point, areaEl);
     return percent;
   },
   getControlEl: (ctx) => dom.getById(ctx, dom.getControlId(ctx)),
@@ -108,23 +81,20 @@ var dom = (0, import_dom_query.createScope)({
   getChannelSliderValueFromPoint(ctx, point, channel) {
     const trackEl = dom.getChannelSliderTrackEl(ctx, channel);
     if (!trackEl) return;
-    const { percent } = (0, import_dom_event.getRelativePoint)(point, trackEl);
+    const { percent } = domEvent.getRelativePoint(point, trackEl);
     return percent;
   },
   getChannelInputEls: (ctx) => {
     return [
-      ...(0, import_dom_query.queryAll)(dom.getContentEl(ctx), "input[data-channel]"),
-      ...(0, import_dom_query.queryAll)(dom.getControlEl(ctx), "input[data-channel]")
+      ...domQuery.queryAll(dom.getContentEl(ctx), "input[data-channel]"),
+      ...domQuery.queryAll(dom.getControlEl(ctx), "input[data-channel]")
     ];
   }
 });
-
-// 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%)`);
+      return colorUtils.parseColor(`hsl(${color.getChannelValue("hue")}, 100%, 50%)`);
     case "lightness":
     case "brightness":
     case "saturation":
@@ -139,9 +109,6 @@ function getChannelDisplayColor(color, channel) {
       throw new Error("Unknown color channel: " + channel);
   }
 }
-
-// src/utils/get-channel-input-value.ts
-var import_color_utils2 = require("@zag-js/color-utils");
 function getChannelValue(color, channel) {
   if (channel == null) return "";
   if (channel === "hex") {
@@ -174,8 +141,8 @@ function getChannelValue(color, channel) {
 function getChannelRange(color, channel) {
   switch (channel) {
     case "hex":
-      const minColor = (0, import_color_utils2.parseColor)("#000000");
-      const maxColor = (0, import_color_utils2.parseColor)("#FFFFFF");
+      const minColor = colorUtils.parseColor("#000000");
+      const maxColor = colorUtils.parseColor("#FFFFFF");
       return {
         minValue: minColor.toHexInt(),
         maxValue: maxColor.toHexInt(),
@@ -255,12 +222,12 @@ function connect(state, send, normalize) {
     };
   };
   const currentPlacement = state.context.currentPlacement;
-  const popperStyles = (0, import_popper.getPlacementStyles)({
+  const popperStyles = popper.getPlacementStyles({
     ...state.context.positioning,
     placement: currentPlacement
   });
   function getSwatchTriggerState(props) {
-    const color = (0, import_color_utils3.normalizeColor)(props.value).toFormat(state.context.format);
+    const color = colorUtils.normalizeColor(props.value).toFormat(state.context.format);
     return {
       value: color,
       valueAsString: color.toString("hex"),
@@ -278,7 +245,7 @@ function connect(state, send, normalize) {
       send({ type: nextOpen ? "OPEN" : "CLOSE" });
     },
     setValue(value2) {
-      send({ type: "VALUE.SET", value: (0, import_color_utils3.normalizeColor)(value2), src: "set-color" });
+      send({ type: "VALUE.SET", value: colorUtils.normalizeColor(value2), src: "set-color" });
     },
     getChannelValue(channel) {
       return getChannelValue(value, channel);
@@ -305,8 +272,8 @@ function connect(state, send, normalize) {
         ...parts.root.attrs,
         dir: state.context.dir,
         id: dom.getRootId(state.context),
-        "data-disabled": (0, import_dom_query2.dataAttr)(disabled),
-        "data-readonly": (0, import_dom_query2.dataAttr)(state.context.readOnly),
+        "data-disabled": domQuery.dataAttr(disabled),
+        "data-readonly": domQuery.dataAttr(state.context.readOnly),
         style: {
           "--value": value.toString("css")
         }
@@ -318,12 +285,12 @@ function connect(state, send, normalize) {
         dir: state.context.dir,
         id: dom.getLabelId(state.context),
         htmlFor: dom.getHiddenInputId(state.context),
-        "data-disabled": (0, import_dom_query2.dataAttr)(disabled),
-        "data-readonly": (0, import_dom_query2.dataAttr)(state.context.readOnly),
-        "data-focus": (0, import_dom_query2.dataAttr)(focused),
+        "data-disabled": domQuery.dataAttr(disabled),
+        "data-readonly": domQuery.dataAttr(state.context.readOnly),
+        "data-focus": domQuery.dataAttr(focused),
         onClick(event) {
           event.preventDefault();
-          const inputEl = (0, import_dom_query2.query)(dom.getControlEl(state.context), "[data-channel=hex]");
+          const inputEl = domQuery.query(dom.getControlEl(state.context), "[data-channel=hex]");
           inputEl?.focus({ preventScroll: true });
         }
       });
@@ -333,10 +300,10 @@ function connect(state, send, normalize) {
         ...parts.control.attrs,
         id: dom.getControlId(state.context),
         dir: state.context.dir,
-        "data-disabled": (0, import_dom_query2.dataAttr)(disabled),
-        "data-readonly": (0, import_dom_query2.dataAttr)(state.context.readOnly),
+        "data-disabled": domQuery.dataAttr(disabled),
+        "data-readonly": domQuery.dataAttr(state.context.readOnly),
         "data-state": open ? "open" : "closed",
-        "data-focus": (0, import_dom_query2.dataAttr)(focused)
+        "data-focus": domQuery.dataAttr(focused)
       });
     },
     getTriggerProps() {
@@ -348,12 +315,12 @@ function connect(state, send, normalize) {
         "aria-label": `select color. current color is ${valueAsString}`,
         "aria-controls": dom.getContentId(state.context),
         "aria-labelledby": dom.getLabelId(state.context),
-        "data-disabled": (0, import_dom_query2.dataAttr)(disabled),
-        "data-readonly": (0, import_dom_query2.dataAttr)(state.context.readOnly),
+        "data-disabled": domQuery.dataAttr(disabled),
+        "data-readonly": domQuery.dataAttr(state.context.readOnly),
         "data-placement": currentPlacement,
-        "aria-expanded": (0, import_dom_query2.dataAttr)(open),
+        "aria-expanded": domQuery.dataAttr(open),
         "data-state": open ? "open" : "closed",
-        "data-focus": (0, import_dom_query2.dataAttr)(focused),
+        "data-focus": domQuery.dataAttr(focused),
         type: "button",
         onClick() {
           if (!interactive) return;
@@ -390,13 +357,13 @@ function connect(state, send, normalize) {
       return normalize.element({
         ...parts.valueText.attrs,
         dir: state.context.dir,
-        "data-disabled": (0, import_dom_query2.dataAttr)(disabled),
-        "data-focus": (0, import_dom_query2.dataAttr)(focused)
+        "data-disabled": domQuery.dataAttr(disabled),
+        "data-focus": domQuery.dataAttr(focused)
       });
     },
     getAreaProps(props = {}) {
       const { xChannel, yChannel } = getAreaChannels(props);
-      const { areaStyles } = (0, import_color_utils3.getColorAreaGradient)(areaValue, {
+      const { areaStyles } = colorUtils.getColorAreaGradient(areaValue, {
         xChannel,
         yChannel,
         dir: state.context.dir
@@ -407,9 +374,9 @@ function connect(state, send, normalize) {
         role: "group",
         onPointerDown(event) {
           if (!interactive) return;
-          if (!(0, import_dom_event2.isLeftClick)(event)) return;
-          if ((0, import_dom_event2.isModifierKey)(event)) return;
-          const point = (0, import_dom_event2.getEventPoint)(event);
+          if (!domEvent.isLeftClick(event)) return;
+          if (domEvent.isModifierKey(event)) return;
+          const point = domEvent.getEventPoint(event);
           const channel = { xChannel, yChannel };
           send({ type: "AREA.POINTER_DOWN", point, channel, id: "area" });
           event.preventDefault();
@@ -424,7 +391,7 @@ function connect(state, send, normalize) {
     },
     getAreaBackgroundProps(props = {}) {
       const { xChannel, yChannel } = getAreaChannels(props);
-      const { areaGradientStyles } = (0, import_color_utils3.getColorAreaGradient)(areaValue, {
+      const { areaGradientStyles } = colorUtils.getColorAreaGradient(areaValue, {
         xChannel,
         yChannel,
         dir: state.context.dir
@@ -452,7 +419,7 @@ function connect(state, send, normalize) {
         id: dom.getAreaThumbId(state.context),
         dir: state.context.dir,
         tabIndex: disabled ? void 0 : 0,
-        "data-disabled": (0, import_dom_query2.dataAttr)(disabled),
+        "data-disabled": domQuery.dataAttr(disabled),
         role: "slider",
         "aria-valuemin": 0,
         "aria-valuemax": 100,
@@ -476,7 +443,7 @@ function connect(state, send, normalize) {
         onKeyDown(event) {
           if (event.defaultPrevented) return;
           if (!interactive) return;
-          const step = (0, import_dom_event2.getEventStep)(event);
+          const step = domEvent.getEventStep(event);
           const keyMap = {
             ArrowUp() {
               send({ type: "AREA.ARROW_UP", channel, step });
@@ -500,7 +467,7 @@ function connect(state, send, normalize) {
               event2.stopPropagation();
             }
           };
-          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,9 +502,9 @@ function connect(state, send, normalize) {
         role: "presentation",
         onPointerDown(event) {
           if (!interactive) return;
-          if (!(0, import_dom_event2.isLeftClick)(event)) return;
-          if ((0, import_dom_event2.isModifierKey)(event)) return;
-          const point = (0, import_dom_event2.getEventPoint)(event);
+          if (!domEvent.isLeftClick(event)) return;
+          if (domEvent.isModifierKey(event)) return;
+          const point = domEvent.getEventPoint(event);
           send({ type: "CHANNEL_SLIDER.POINTER_DOWN", channel, format, point, id: channel, orientation });
           event.preventDefault();
         },
@@ -605,9 +572,9 @@ function connect(state, send, normalize) {
         "aria-label": channel,
         tabIndex: disabled ? void 0 : 0,
         "data-channel": channel,
-        "data-disabled": (0, import_dom_query2.dataAttr)(disabled),
+        "data-disabled": domQuery.dataAttr(disabled),
         "data-orientation": orientation,
-        "aria-disabled": (0, import_dom_query2.dataAttr)(disabled),
+        "aria-disabled": domQuery.dataAttr(disabled),
         "aria-orientation": orientation,
         "aria-valuemax": channelRange.maxValue,
         "aria-valuemin": channelRange.minValue,
@@ -626,7 +593,7 @@ function connect(state, send, normalize) {
         onKeyDown(event) {
           if (event.defaultPrevented) return;
           if (!interactive) return;
-          const step = (0, import_dom_event2.getEventStep)(event) * channelRange.step;
+          const step = domEvent.getEventStep(event) * channelRange.step;
           const keyMap = {
             ArrowUp() {
               send({ type: "CHANNEL_SLIDER.ARROW_UP", channel, step });
@@ -656,7 +623,7 @@ function connect(state, send, normalize) {
               event2.stopPropagation();
             }
           };
-          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();
@@ -677,7 +644,7 @@ function connect(state, send, normalize) {
         spellCheck: false,
         autoComplete: "off",
         disabled,
-        "data-disabled": (0, import_dom_query2.dataAttr)(disabled),
+        "data-disabled": domQuery.dataAttr(disabled),
         readOnly: state.context.readOnly,
         defaultValue: getChannelValue(value, channel),
         min: channelRange?.minValue,
@@ -693,7 +660,7 @@ function connect(state, send, normalize) {
         onFocus(event) {
           if (!interactive) return;
           send({ type: "CHANNEL_INPUT.FOCUS", channel });
-          event.target.select();
+          event.currentTarget.select();
         },
         onBlur(event) {
           if (!interactive) return;
@@ -724,7 +691,7 @@ function connect(state, send, normalize) {
         readOnly: state.context.readOnly,
         required: state.context.required,
         id: dom.getHiddenInputId(state.context),
-        style: import_dom_query2.visuallyHiddenStyle,
+        style: domQuery.visuallyHiddenStyle,
         defaultValue: valueAsString
       });
     },
@@ -734,7 +701,7 @@ function connect(state, send, normalize) {
         type: "button",
         dir: state.context.dir,
         disabled,
-        "data-disabled": (0, import_dom_query2.dataAttr)(disabled),
+        "data-disabled": domQuery.dataAttr(disabled),
         "aria-label": "Pick a color from the screen",
         onClick() {
           if (!interactive) return;
@@ -759,7 +726,7 @@ function connect(state, send, normalize) {
         "aria-label": `select ${swatchState.valueAsString} as the color`,
         "data-state": swatchState.checked ? "checked" : "unchecked",
         "data-value": swatchState.valueAsString,
-        "data-disabled": (0, import_dom_query2.dataAttr)(swatchState.disabled),
+        "data-disabled": domQuery.dataAttr(swatchState.disabled),
         onClick() {
           if (swatchState.disabled) return;
           send({ type: "SWATCH_TRIGGER.CLICK", value: swatchState.value });
@@ -829,29 +796,15 @@ function assertFormat(format) {
   if (formatRegex.test(format)) return format;
   throw new Error(`Unsupported color format: ${format}`);
 }
-
-// src/color-picker.machine.ts
-var import_color_utils5 = require("@zag-js/color-utils");
-var import_core = require("@zag-js/core");
-var import_dismissable = require("@zag-js/dismissable");
-var import_dom_event3 = require("@zag-js/dom-event");
-var import_dom_query3 = require("@zag-js/dom-query");
-var import_form_utils = require("@zag-js/form-utils");
-var import_popper2 = require("@zag-js/popper");
-var import_text_selection = require("@zag-js/text-selection");
-var import_utils = require("@zag-js/utils");
-
-// src/color-picker.parse.ts
-var import_color_utils4 = require("@zag-js/color-utils");
 var parse = (colorString) => {
-  return (0, import_color_utils4.parseColor)(colorString);
+  return colorUtils.parseColor(colorString);
 };
 
 // src/color-picker.machine.ts
-var { and } = import_core.guards;
+var { and } = core.guards;
 function machine(userContext) {
-  const ctx = (0, import_utils.compact)(userContext);
-  return (0, import_core.createMachine)(
+  const ctx = utils.compact(userContext);
+  return core.createMachine(
     {
       id: "color-picker",
       initial: ctx.open ? "open" : "idle",
@@ -1168,7 +1121,7 @@ function machine(userContext) {
           ctx2.currentPlacement = ctx2.positioning.placement;
           const anchorEl = dom.getTriggerEl(ctx2);
           const getPositionerEl = () => dom.getPositionerEl(ctx2);
-          return (0, import_popper2.getPlacement)(anchorEl, getPositionerEl, {
+          return popper.getPlacement(anchorEl, getPositionerEl, {
             ...ctx2.positioning,
             defer: true,
             onComplete(data) {
@@ -1178,7 +1131,7 @@ function machine(userContext) {
         },
         trackDismissableElement(ctx2, _evt, { send }) {
           const getContentEl = () => dom.getContentEl(ctx2);
-          return (0, import_dismissable.trackDismissableElement)(getContentEl, {
+          return dismissable.trackDismissableElement(getContentEl, {
             exclude: dom.getTriggerEl(ctx2),
             defer: true,
             onInteractOutside(event) {
@@ -1195,7 +1148,7 @@ function machine(userContext) {
         },
         trackFormControl(ctx2, _evt, { send, initialContext }) {
           const inputEl = dom.getHiddenInputEl(ctx2);
-          return (0, import_form_utils.trackFormControl)(inputEl, {
+          return formUtils.trackFormControl(inputEl, {
             onFieldsetDisabledChange(disabled) {
               ctx2.fieldsetDisabled = disabled;
             },
@@ -1205,7 +1158,7 @@ function machine(userContext) {
           });
         },
         trackPointerMove(ctx2, evt, { send }) {
-          return (0, import_dom_event3.trackPointerMove)(dom.getDoc(ctx2), {
+          return domEvent.trackPointerMove(dom.getDoc(ctx2), {
             onPointerMove({ point }) {
               const type = ctx2.activeId === "area" ? "AREA.POINTER_MOVE" : "CHANNEL_SLIDER.POINTER_MOVE";
               send({ type, point, format: evt.format });
@@ -1217,7 +1170,7 @@ function machine(userContext) {
           });
         },
         disableTextSelection(ctx2) {
-          return (0, import_text_selection.disableTextSelection)({ doc: dom.getDoc(ctx2), target: dom.getContentEl(ctx2) });
+          return textSelection.disableTextSelection({ doc: dom.getDoc(ctx2), target: dom.getContentEl(ctx2) });
         }
       },
       actions: {
@@ -1228,7 +1181,7 @@ function machine(userContext) {
           const picker = new win.EyeDropper();
           picker.open().then(({ sRGBHex }) => {
             const format = ctx2.value.getFormat();
-            const color = (0, import_color_utils5.parseColor)(sRGBHex).toFormat(format);
+            const color = colorUtils.parseColor(sRGBHex).toFormat(format);
             set.value(ctx2, color);
             ctx2.onValueChangeEnd?.({ value: ctx2.value, valueAsString: ctx2.valueAsString });
           }).catch(() => void 0);
@@ -1285,7 +1238,7 @@ function machine(userContext) {
             valueAsNumber = Number.isNaN(valueAsNumber) ? currentAlpha : valueAsNumber;
             color = ctx2.value.withChannelValue("alpha", valueAsNumber);
           } else if (isTextField) {
-            color = (0, import_utils.tryCatch)(
+            color = utils.tryCatch(
               () => parse(value).withChannelValue("alpha", currentAlpha),
               () => ctx2.value
             );
@@ -1336,18 +1289,18 @@ function machine(userContext) {
           set.value(ctx2, color);
         },
         focusAreaThumb(ctx2) {
-          (0, import_dom_query3.raf)(() => {
+          domQuery.raf(() => {
             dom.getAreaThumbEl(ctx2)?.focus({ preventScroll: true });
           });
         },
         focusChannelThumb(ctx2, evt) {
-          (0, import_dom_query3.raf)(() => {
+          domQuery.raf(() => {
             dom.getChannelSliderThumbEl(ctx2, evt.channel)?.focus({ preventScroll: true });
           });
         },
         setInitialFocus(ctx2) {
-          (0, import_dom_query3.raf)(() => {
-            const element = (0, import_dom_query3.getInitialFocus)({
+          domQuery.raf(() => {
+            const element = domQuery.getInitialFocus({
               root: dom.getContentEl(ctx2),
               getInitialEl: ctx2.initialFocusEl
             });
@@ -1355,7 +1308,7 @@ function machine(userContext) {
           });
         },
         setReturnFocus(ctx2) {
-          (0, import_dom_query3.raf)(() => {
+          domQuery.raf(() => {
             dom.getTriggerEl(ctx2)?.focus({ preventScroll: true });
           });
         },
@@ -1382,7 +1335,7 @@ var sync = {
   // sync channel inputs
   inputs(ctx, color) {
     const channelInputs = dom.getChannelInputEls(ctx);
-    (0, import_dom_query3.raf)(() => {
+    domQuery.raf(() => {
       channelInputs.forEach((inputEl) => {
         const channel = inputEl.dataset.channel;
         dom.setValue(inputEl, getChannelValue(color || ctx.value, channel));
@@ -1392,7 +1345,7 @@ var sync = {
   // sync format select
   formatSelect(ctx) {
     const selectEl = dom.getFormatSelectEl(ctx);
-    (0, import_dom_query3.raf)(() => {
+    domQuery.raf(() => {
       dom.setValue(selectEl, ctx.format);
     });
   }
@@ -1411,7 +1364,7 @@ var invoke = {
       value,
       valueAsString: ctx.valueAsString
     });
-    (0, import_form_utils.dispatchInputValueEvent)(dom.getHiddenInputEl(ctx), { value: ctx.valueAsString });
+    formUtils.dispatchInputValueEvent(dom.getHiddenInputEl(ctx), { value: ctx.valueAsString });
   },
   formatChange(ctx) {
     ctx.onFormatChange?.({ format: ctx.format });
@@ -1429,11 +1382,8 @@ var set = {
     invoke.formatChange(ctx);
   }
 };
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  anatomy,
-  connect,
-  machine,
-  parse
-});
-//# sourceMappingURL=index.js.map
+
+exports.anatomy = anatomy;
+exports.connect = connect;
+exports.machine = machine;
+exports.parse = parse;

package/dist/index.mjs

@@ -1,5 +1,15 @@
+import { createAnatomy } from '@zag-js/anatomy';
+import { normalizeColor, getColorAreaGradient, parseColor } from '@zag-js/color-utils';
+import { getRelativePoint, isLeftClick, isModifierKey, getEventPoint, getEventStep, getEventKey, trackPointerMove } from '@zag-js/dom-event';
+import { createScope, queryAll, dataAttr, query, visuallyHiddenStyle, raf, getInitialFocus } from '@zag-js/dom-query';
+import { getPlacementStyles, getPlacement } from '@zag-js/popper';
+import { createMachine, guards } from '@zag-js/core';
+import { trackDismissableElement } from '@zag-js/dismissable';
+import { trackFormControl, dispatchInputValueEvent } from '@zag-js/form-utils';
+import { disableTextSelection } from '@zag-js/text-selection';
+import { compact, tryCatch } from '@zag-js/utils';
+
 // src/color-picker.anatomy.ts
-import { createAnatomy } from "@zag-js/anatomy";
 var anatomy = createAnatomy("color-picker", [
   "root",
   "label",
@@ -27,22 +37,6 @@ var anatomy = createAnatomy("color-picker", [
   "formatSelect"
 ]);
 var parts = anatomy.build();
-
-// src/color-picker.connect.ts
-import { getColorAreaGradient, normalizeColor } from "@zag-js/color-utils";
-import {
-  getEventKey,
-  getEventPoint,
-  getEventStep,
-  isLeftClick,
-  isModifierKey
-} from "@zag-js/dom-event";
-import { dataAttr, query, visuallyHiddenStyle } from "@zag-js/dom-query";
-import { getPlacementStyles } from "@zag-js/popper";
-
-// src/color-picker.dom.ts
-import { getRelativePoint } from "@zag-js/dom-event";
-import { createScope, queryAll } from "@zag-js/dom-query";
 var dom = createScope({
   getRootId: (ctx) => ctx.ids?.root ?? `color-picker:${ctx.id}`,
   getLabelId: (ctx) => ctx.ids?.label ?? `color-picker:${ctx.id}:label`,
@@ -95,9 +89,6 @@ var dom = createScope({
     ];
   }
 });
-
-// src/utils/get-channel-display-color.ts
-import { parseColor } from "@zag-js/color-utils";
 function getChannelDisplayColor(color, channel) {
   switch (channel) {
     case "hue":
@@ -116,9 +107,6 @@ function getChannelDisplayColor(color, channel) {
       throw new Error("Unknown color channel: " + channel);
   }
 }
-
-// src/utils/get-channel-input-value.ts
-import { parseColor as parseColor2 } from "@zag-js/color-utils";
 function getChannelValue(color, channel) {
   if (channel == null) return "";
   if (channel === "hex") {
@@ -151,8 +139,8 @@ function getChannelValue(color, channel) {
 function getChannelRange(color, channel) {
   switch (channel) {
     case "hex":
-      const minColor = parseColor2("#000000");
-      const maxColor = parseColor2("#FFFFFF");
+      const minColor = parseColor("#000000");
+      const maxColor = parseColor("#FFFFFF");
       return {
         minValue: minColor.toHexInt(),
         maxValue: maxColor.toHexInt(),
@@ -670,7 +658,7 @@ function connect(state, send, normalize) {
         onFocus(event) {
           if (!interactive) return;
           send({ type: "CHANNEL_INPUT.FOCUS", channel });
-          event.target.select();
+          event.currentTarget.select();
         },
         onBlur(event) {
           if (!interactive) return;
@@ -806,22 +794,8 @@ function assertFormat(format) {
   if (formatRegex.test(format)) return format;
   throw new Error(`Unsupported color format: ${format}`);
 }
-
-// src/color-picker.machine.ts
-import { parseColor as parseColor4 } from "@zag-js/color-utils";
-import { createMachine, guards } from "@zag-js/core";
-import { trackDismissableElement } from "@zag-js/dismissable";
-import { trackPointerMove } from "@zag-js/dom-event";
-import { getInitialFocus, raf } from "@zag-js/dom-query";
-import { dispatchInputValueEvent, trackFormControl } from "@zag-js/form-utils";
-import { getPlacement } from "@zag-js/popper";
-import { disableTextSelection } from "@zag-js/text-selection";
-import { compact, tryCatch } from "@zag-js/utils";
-
-// src/color-picker.parse.ts
-import { parseColor as parseColor3 } from "@zag-js/color-utils";
 var parse = (colorString) => {
-  return parseColor3(colorString);
+  return parseColor(colorString);
 };
 
 // src/color-picker.machine.ts
@@ -1205,7 +1179,7 @@ function machine(userContext) {
           const picker = new win.EyeDropper();
           picker.open().then(({ sRGBHex }) => {
             const format = ctx2.value.getFormat();
-            const color = parseColor4(sRGBHex).toFormat(format);
+            const color = parseColor(sRGBHex).toFormat(format);
             set.value(ctx2, color);
             ctx2.onValueChangeEnd?.({ value: ctx2.value, valueAsString: ctx2.valueAsString });
           }).catch(() => void 0);
@@ -1406,10 +1380,5 @@ var set = {
     invoke.formatChange(ctx);
   }
 };
-export {
-  anatomy,
-  connect,
-  machine,
-  parse
-};
-//# sourceMappingURL=index.mjs.map
+
+export { anatomy, connect, machine, parse };