@zag-js/color-picker 0.56.0 → 0.57.0

package/dist/index.mjs

@@ -11,8 +11,10 @@ var anatomy = createAnatomy("color-picker", [
   "areaThumb",
   "areaBackground",
   "channelSlider",
+  "channelSliderLabel",
   "channelSliderTrack",
   "channelSliderThumb",
+  "channelSliderValueText",
   "channelInput",
   "transparencyGrid",
   "swatchGroup",
@@ -68,8 +70,7 @@ var dom = createScope({
   getAreaEl: (ctx) => dom.getById(ctx, dom.getAreaId(ctx)),
   getAreaValueFromPoint(ctx, point) {
     const areaEl = dom.getAreaEl(ctx);
-    if (!areaEl)
-      return;
+    if (!areaEl) return;
     const { percent } = getRelativePoint(point, areaEl);
     return percent;
   },
@@ -81,8 +82,7 @@ var dom = createScope({
   },
   getChannelSliderValueFromPoint(ctx, point, channel) {
     const trackEl = dom.getChannelSliderTrackEl(ctx, channel);
-    if (!trackEl)
-      return;
+    if (!trackEl) return;
     const { percent } = getRelativePoint(point, trackEl);
     return percent;
   },
@@ -118,8 +118,7 @@ function getChannelDisplayColor(color, 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 == null) return "";
   if (channel === "hex") {
     return color.toString("hex");
   }
@@ -250,8 +249,7 @@ function connect(state, send, normalize) {
     valueAsString,
     value,
     setOpen(nextOpen) {
-      if (nextOpen === open)
-        return;
+      if (nextOpen === open) return;
       send({ type: nextOpen ? "OPEN" : "CLOSE" });
     },
     setValue(value2) {
@@ -260,6 +258,9 @@ function connect(state, send, normalize) {
     getChannelValue(channel) {
       return getChannelValue(value, channel);
     },
+    getChannelValueText(channel, locale) {
+      return value.formatChannelValue(channel, locale);
+    },
     setChannelValue(channel, channelValue) {
       const color = value.withChannelValue(channel, channelValue);
       send({ type: "VALUE.SET", value: color, src: "set-channel" });
@@ -330,13 +331,11 @@ function connect(state, send, normalize) {
         "data-focus": dataAttr(focused),
         type: "button",
         onClick() {
-          if (!interactive)
-            return;
+          if (!interactive) return;
           send({ type: "TRIGGER.CLICK" });
         },
         onBlur() {
-          if (!interactive)
-            return;
+          if (!interactive) return;
           send({ type: "TRIGGER.BLUR" });
         },
         style: {
@@ -374,12 +373,9 @@ function connect(state, send, normalize) {
         id: dom.getAreaId(state.context),
         role: "group",
         onPointerDown(event) {
-          if (!interactive)
-            return;
-          if (!isLeftClick(event))
-            return;
-          if (isModifierKey(event))
-            return;
+          if (!interactive) return;
+          if (!isLeftClick(event)) return;
+          if (isModifierKey(event)) return;
           const point = getEventPoint(event);
           const channel = { xChannel, yChannel };
           send({ type: "AREA.POINTER_DOWN", point, channel, id: "area" });
@@ -441,15 +437,12 @@ function connect(state, send, normalize) {
           background: areaValue.withChannelValue("alpha", 1).toString("css")
         },
         onFocus() {
-          if (!interactive)
-            return;
+          if (!interactive) return;
           send({ type: "AREA.FOCUS", id: "area", channel });
         },
         onKeyDown(event) {
-          if (event.defaultPrevented)
-            return;
-          if (!interactive)
-            return;
+          if (event.defaultPrevented) return;
+          if (!interactive) return;
           const step = getEventStep(event);
           const keyMap = {
             ArrowUp() {
@@ -501,21 +494,18 @@ function connect(state, send, normalize) {
       });
     },
     getChannelSliderProps(props) {
-      const { orientation = "horizontal", channel } = props;
+      const { orientation = "horizontal", channel, format } = props;
       return normalize.element({
         ...parts.channelSlider.attrs,
         "data-channel": channel,
         "data-orientation": orientation,
         role: "presentation",
         onPointerDown(event) {
-          if (!interactive)
-            return;
-          if (!isLeftClick(event))
-            return;
-          if (isModifierKey(event))
-            return;
+          if (!interactive) return;
+          if (!isLeftClick(event)) return;
+          if (isModifierKey(event)) return;
           const point = getEventPoint(event);
-          send({ type: "CHANNEL_SLIDER.POINTER_DOWN", channel, point, id: channel, orientation });
+          send({ type: "CHANNEL_SLIDER.POINTER_DOWN", channel, format, point, id: channel, orientation });
           event.preventDefault();
         },
         style: {
@@ -525,7 +515,8 @@ function connect(state, send, normalize) {
       });
     },
     getChannelSliderTrackProps(props) {
-      const { orientation = "horizontal", channel } = props;
+      const { orientation = "horizontal", channel, format } = props;
+      const normalizedValue = format ? value.toFormat(format) : areaValue;
       return normalize.element({
         ...parts.channelSliderTrack.attrs,
         id: dom.getChannelSliderId(state.context, channel),
@@ -539,16 +530,40 @@ function connect(state, send, normalize) {
             orientation,
             channel,
             dir: state.context.dir,
-            value: areaValue
+            value: normalizedValue
           })
         }
       });
     },
+    getChannelSliderLabelProps(props) {
+      const { channel } = props;
+      return normalize.element({
+        ...parts.channelSliderLabel.attrs,
+        "data-channel": channel,
+        onClick(event) {
+          if (!interactive) return;
+          event.preventDefault();
+          const thumbId = dom.getChannelSliderThumbId(state.context, channel);
+          dom.getById(state.context, thumbId)?.focus({ preventScroll: true });
+        },
+        style: {
+          userSelect: "none",
+          WebkitUserSelect: "none"
+        }
+      });
+    },
+    getChannelSliderValueTextProps(props) {
+      return normalize.element({
+        ...parts.channelSliderValueText.attrs,
+        "data-channel": props.channel
+      });
+    },
     getChannelSliderThumbProps(props) {
-      const { orientation = "horizontal", channel } = props;
-      const { minValue, maxValue, step: stepValue } = areaValue.getChannelRange(channel);
-      const channelValue = areaValue.getChannelValue(channel);
-      const offset = (channelValue - minValue) / (maxValue - minValue);
+      const { orientation = "horizontal", channel, format } = props;
+      const normalizedValue = format ? value.toFormat(format) : areaValue;
+      const channelRange = normalizedValue.getChannelRange(channel);
+      const channelValue = normalizedValue.getChannelValue(channel);
+      const offset = (channelValue - channelRange.minValue) / (channelRange.maxValue - channelRange.minValue);
       const placementStyles = orientation === "horizontal" ? { left: `${offset * 100}%`, top: "50%" } : { top: `${offset * 100}%`, left: "50%" };
       return normalize.element({
         ...parts.channelSliderThumb.attrs,
@@ -561,8 +576,8 @@ function connect(state, send, normalize) {
         "data-orientation": orientation,
         "aria-disabled": dataAttr(disabled),
         "aria-orientation": orientation,
-        "aria-valuemax": maxValue,
-        "aria-valuemin": minValue,
+        "aria-valuemax": channelRange.maxValue,
+        "aria-valuemin": channelRange.minValue,
         "aria-valuenow": channelValue,
         "aria-valuetext": `${channel} ${channelValue}`,
         style: {
@@ -572,16 +587,13 @@ function connect(state, send, normalize) {
           ...placementStyles
         },
         onFocus() {
-          if (!interactive)
-            return;
+          if (!interactive) return;
           send({ type: "CHANNEL_SLIDER.FOCUS", channel });
         },
         onKeyDown(event) {
-          if (event.defaultPrevented)
-            return;
-          if (!interactive)
-            return;
-          const step = getEventStep(event) * stepValue;
+          if (event.defaultPrevented) return;
+          if (!interactive) return;
+          const step = getEventStep(event) * channelRange.step;
           const keyMap = {
             ArrowUp() {
               send({ type: "CHANNEL_SLIDER.ARROW_UP", channel, step });
@@ -622,7 +634,7 @@ function connect(state, send, normalize) {
     getChannelInputProps(props) {
       const { channel } = props;
       const isTextField = channel === "hex" || channel === "css";
-      const range = getChannelRange(value, channel);
+      const channelRange = getChannelRange(value, channel);
       return normalize.input({
         ...parts.channelInput.attrs,
         dir: state.context.dir,
@@ -635,34 +647,29 @@ function connect(state, send, normalize) {
         "data-disabled": dataAttr(disabled),
         readOnly: state.context.readOnly,
         defaultValue: getChannelValue(value, channel),
-        min: range?.minValue,
-        max: range?.maxValue,
-        step: range?.step,
+        min: channelRange?.minValue,
+        max: channelRange?.maxValue,
+        step: channelRange?.step,
         onBeforeInput(event) {
-          if (isTextField || !interactive)
-            return;
+          if (isTextField || !interactive) return;
           const value2 = event.currentTarget.value;
           if (value2.match(/[^0-9.]/g)) {
             event.preventDefault();
           }
         },
         onFocus(event) {
-          if (!interactive)
-            return;
+          if (!interactive) return;
           send({ type: "CHANNEL_INPUT.FOCUS", channel });
           event.target.select();
         },
         onBlur(event) {
-          if (!interactive)
-            return;
+          if (!interactive) return;
           const value2 = isTextField ? event.currentTarget.value : event.currentTarget.valueAsNumber;
           send({ type: "CHANNEL_INPUT.BLUR", channel, value: value2, isTextField });
         },
         onKeyDown(event) {
-          if (event.defaultPrevented)
-            return;
-          if (!interactive)
-            return;
+          if (event.defaultPrevented) return;
+          if (!interactive) return;
           if (event.key === "Enter") {
             const value2 = isTextField ? event.currentTarget.value : event.currentTarget.valueAsNumber;
             send({ type: "CHANNEL_INPUT.CHANGE", channel, value: value2, isTextField });
@@ -695,8 +702,7 @@ function connect(state, send, normalize) {
         "data-disabled": dataAttr(disabled),
         "aria-label": "Pick a color from the screen",
         onClick() {
-          if (!interactive)
-            return;
+          if (!interactive) return;
           send("EYEDROPPER.CLICK");
         }
       });
@@ -720,8 +726,7 @@ function connect(state, send, normalize) {
         "data-value": swatchState.valueAsString,
         "data-disabled": dataAttr(swatchState.disabled),
         onClick() {
-          if (swatchState.disabled)
-            return;
+          if (swatchState.disabled) return;
           send({ type: "SWATCH_TRIGGER.CLICK", value: swatchState.value });
         },
         style: {
@@ -758,8 +763,7 @@ function connect(state, send, normalize) {
         type: "button",
         "aria-label": `change color format to ${getNextFormat(state.context.format)}`,
         onClick(event) {
-          if (event.currentTarget.disabled)
-            return;
+          if (event.currentTarget.disabled) return;
           const nextFormat = getNextFormat(state.context.format);
           send({ type: "FORMAT.SET", format: nextFormat, src: "format-trigger" });
         }
@@ -787,8 +791,7 @@ function getNextFormat(format) {
   return formats[index + 1] ?? formats[0];
 }
 function assertFormat(format) {
-  if (formatRegex.test(format))
-    return format;
+  if (formatRegex.test(format)) return format;
   throw new Error(`Unsupported color format: ${format}`);
 }
 
@@ -976,22 +979,22 @@ function machine(userContext) {
               actions: ["setActiveChannel"]
             },
             "AREA.ARROW_LEFT": {
-              actions: ["decrementXChannel"]
+              actions: ["decrementAreaXChannel"]
             },
             "AREA.ARROW_RIGHT": {
-              actions: ["incrementXChannel"]
+              actions: ["incrementAreaXChannel"]
             },
             "AREA.ARROW_UP": {
-              actions: ["incrementYChannel"]
+              actions: ["incrementAreaYChannel"]
             },
             "AREA.ARROW_DOWN": {
-              actions: ["decrementYChannel"]
+              actions: ["decrementAreaYChannel"]
             },
             "AREA.PAGE_UP": {
-              actions: ["incrementXChannel"]
+              actions: ["incrementAreaXChannel"]
             },
             "AREA.PAGE_DOWN": {
-              actions: ["decrementXChannel"]
+              actions: ["decrementAreaXChannel"]
             },
             "CHANNEL_SLIDER.ARROW_LEFT": {
               actions: ["decrementChannel"]
@@ -1145,8 +1148,7 @@ function machine(userContext) {
             defer: true,
             onInteractOutside(event) {
               ctx2.onInteractOutside?.(event);
-              if (event.defaultPrevented)
-                return;
+              if (event.defaultPrevented) return;
               ctx2.restoreFocus = !(event.detail.focusable || event.detail.contextmenu);
             },
             onPointerDownOutside: ctx2.onPointerDownOutside,
@@ -1167,11 +1169,11 @@ function machine(userContext) {
             }
           });
         },
-        trackPointerMove(ctx2, _evt, { send }) {
+        trackPointerMove(ctx2, evt, { send }) {
           return trackPointerMove(dom.getDoc(ctx2), {
             onPointerMove({ point }) {
               const type = ctx2.activeId === "area" ? "AREA.POINTER_MOVE" : "CHANNEL_SLIDER.POINTER_MOVE";
-              send({ type, point });
+              send({ type, point, format: evt.format });
             },
             onPointerUp() {
               const type = ctx2.activeId === "area" ? "AREA.POINTER_UP" : "CHANNEL_SLIDER.POINTER_UP";
@@ -1186,8 +1188,7 @@ function machine(userContext) {
       actions: {
         openEyeDropper(ctx2) {
           const isSupported = "EyeDropper" in dom.getWin(ctx2);
-          if (!isSupported)
-            return;
+          if (!isSupported) return;
           const win = dom.getWin(ctx2);
           const picker = new win.EyeDropper();
           picker.open().then(({ sRGBHex }) => {
@@ -1199,10 +1200,8 @@ function machine(userContext) {
         },
         setActiveChannel(ctx2, evt) {
           ctx2.activeId = evt.id;
-          if (evt.channel)
-            ctx2.activeChannel = evt.channel;
-          if (evt.orientation)
-            ctx2.activeOrientation = evt.orientation;
+          if (evt.channel) ctx2.activeChannel = evt.channel;
+          if (evt.orientation) ctx2.activeOrientation = evt.orientation;
         },
         clearActiveChannel(ctx2) {
           ctx2.activeChannel = null;
@@ -1210,24 +1209,24 @@ function machine(userContext) {
           ctx2.activeOrientation = null;
         },
         setAreaColorFromPoint(ctx2, evt) {
+          const normalizedValue = evt.format ? ctx2.value.toFormat(evt.format) : ctx2.areaValue;
           const { xChannel, yChannel } = evt.channel || ctx2.activeChannel;
           const percent = dom.getAreaValueFromPoint(ctx2, evt.point);
-          if (!percent)
-            return;
-          const xValue = ctx2.areaValue.getChannelPercentValue(xChannel, percent.x);
-          const yValue = ctx2.areaValue.getChannelPercentValue(yChannel, 1 - percent.y);
-          const color = ctx2.areaValue.withChannelValue(xChannel, xValue).withChannelValue(yChannel, yValue);
+          if (!percent) return;
+          const xValue = normalizedValue.getChannelPercentValue(xChannel, percent.x);
+          const yValue = normalizedValue.getChannelPercentValue(yChannel, 1 - percent.y);
+          const color = normalizedValue.withChannelValue(xChannel, xValue).withChannelValue(yChannel, yValue);
           set.value(ctx2, color);
         },
         setChannelColorFromPoint(ctx2, evt) {
           const channel = evt.channel || ctx2.activeId;
+          const normalizedValue = evt.format ? ctx2.value.toFormat(evt.format) : ctx2.areaValue;
           const percent = dom.getChannelSliderValueFromPoint(ctx2, evt.point, channel);
-          if (!percent)
-            return;
+          if (!percent) return;
           const orientation = ctx2.activeOrientation || "horizontal";
           const channelPercent = orientation === "horizontal" ? percent.x : percent.y;
-          const value = ctx2.areaValue.getChannelPercentValue(channel, channelPercent);
-          const color = ctx2.areaValue.withChannelValue(channel, value);
+          const value = normalizedValue.getChannelPercentValue(channel, channelPercent);
+          const color = normalizedValue.withChannelValue(channel, value);
           set.value(ctx2, color);
         },
         setValue(ctx2, evt) {
@@ -1271,22 +1270,22 @@ function machine(userContext) {
           const color = ctx2.value.decrementChannel(evt.channel, evt.step);
           set.value(ctx2, color);
         },
-        incrementXChannel(ctx2, evt) {
+        incrementAreaXChannel(ctx2, evt) {
           const { xChannel } = evt.channel;
           const color = ctx2.areaValue.incrementChannel(xChannel, evt.step);
           set.value(ctx2, color);
         },
-        decrementXChannel(ctx2, evt) {
+        decrementAreaXChannel(ctx2, evt) {
           const { xChannel } = evt.channel;
           const color = ctx2.areaValue.decrementChannel(xChannel, evt.step);
           set.value(ctx2, color);
         },
-        incrementYChannel(ctx2, evt) {
+        incrementAreaYChannel(ctx2, evt) {
           const { yChannel } = evt.channel;
           const color = ctx2.areaValue.incrementChannel(yChannel, evt.step);
           set.value(ctx2, color);
         },
-        decrementYChannel(ctx2, evt) {
+        decrementAreaYChannel(ctx2, evt) {
           const { yChannel } = evt.channel;
           const color = ctx2.areaValue.decrementChannel(yChannel, evt.step);
           set.value(ctx2, color);
@@ -1385,14 +1384,12 @@ var invoke = {
 };
 var set = {
   value(ctx, color) {
-    if (!color || ctx.value.isEqual(color))
-      return;
+    if (!color || ctx.value.isEqual(color)) return;
     ctx.value = color;
     invoke.change(ctx);
   },
   format(ctx, format) {
-    if (ctx.format === format)
-      return;
+    if (ctx.format === format) return;
     ctx.format = format;
     invoke.formatChange(ctx);
   }