@zag-js/color-picker 0.56.1 → 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",
@@ -256,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" });
@@ -489,7 +494,7 @@ 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,
@@ -500,7 +505,7 @@ function connect(state, send, normalize) {
           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: {
@@ -510,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),
@@ -524,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,
@@ -546,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: {
@@ -563,7 +593,7 @@ function connect(state, send, normalize) {
         onKeyDown(event) {
           if (event.defaultPrevented) return;
           if (!interactive) return;
-          const step = getEventStep(event) * stepValue;
+          const step = getEventStep(event) * channelRange.step;
           const keyMap = {
             ArrowUp() {
               send({ type: "CHANNEL_SLIDER.ARROW_UP", channel, step });
@@ -604,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,
@@ -617,9 +647,9 @@ 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;
           const value2 = event.currentTarget.value;
@@ -949,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"]
@@ -1139,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";
@@ -1179,22 +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);
+          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;
           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) {
@@ -1238,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);