@zag-js/color-picker 0.56.1 → 0.58.0

package/dist/index.mjs

@@ -11,8 +11,10 @@ var anatomy = createAnatomy("color-picker", [
   "areaThumb",
   "areaBackground",
   "channelSlider",
+  "channelSliderLabel",
   "channelSliderTrack",
   "channelSliderThumb",
+  "channelSliderValueText",
   "channelInput",
   "transparencyGrid",
   "swatchGroup",
@@ -43,24 +45,25 @@ 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`,
-  getHiddenInputId: (ctx) => `color-picker:${ctx.id}:hidden-input`,
+  getHiddenInputId: (ctx) => ctx.ids?.hiddenInput ?? `color-picker:${ctx.id}:hidden-input`,
   getControlId: (ctx) => ctx.ids?.control ?? `color-picker:${ctx.id}:control`,
   getTriggerId: (ctx) => ctx.ids?.trigger ?? `color-picker:${ctx.id}:trigger`,
   getContentId: (ctx) => ctx.ids?.content ?? `color-picker:${ctx.id}:content`,
-  getPositionerId: (ctx) => `color-picker:${ctx.id}:positioner`,
-  getFormatSelectId: (ctx) => `color-picker:${ctx.id}:format-select`,
+  getPositionerId: (ctx) => ctx.ids?.positioner ?? `color-picker:${ctx.id}:positioner`,
+  getFormatSelectId: (ctx) => ctx.ids?.formatSelect ?? `color-picker:${ctx.id}:format-select`,
   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`,
-  getChannelSliderId: (ctx, channel) => ctx.ids?.channelSliderTrack?.(channel) ?? `color-picker:${ctx.id}:slider-track:${channel}`,
+  getChannelSliderTrackId: (ctx, channel) => ctx.ids?.channelSliderTrack?.(channel) ?? `color-picker:${ctx.id}:slider-track:${channel}`,
   getChannelSliderThumbId: (ctx, channel) => ctx.ids?.channelSliderThumb?.(channel) ?? `color-picker:${ctx.id}:slider-thumb:${channel}`,
   getContentEl: (ctx) => dom.getById(ctx, dom.getContentId(ctx)),
   getAreaThumbEl: (ctx) => dom.getById(ctx, dom.getAreaThumbId(ctx)),
   getChannelSliderThumbEl: (ctx, channel) => dom.getById(ctx, dom.getChannelSliderThumbId(ctx, channel)),
   getChannelInputEl: (ctx, channel) => {
+    const selector = `input[data-channel="${channel}"]`;
     return [
-      ...queryAll(dom.getContentEl(ctx), `input[data-channel="${channel}"]`),
-      ...queryAll(dom.getControlEl(ctx), `input[data-channel="${channel}"]`)
+      ...queryAll(dom.getContentEl(ctx), selector),
+      ...queryAll(dom.getControlEl(ctx), selector)
     ];
   },
   getFormatSelectEl: (ctx) => dom.getById(ctx, dom.getFormatSelectId(ctx)),
@@ -76,7 +79,7 @@ var dom = createScope({
   getTriggerEl: (ctx) => dom.getById(ctx, dom.getTriggerId(ctx)),
   getPositionerEl: (ctx) => dom.getById(ctx, dom.getPositionerId(ctx)),
   getChannelSliderTrackEl: (ctx, channel) => {
-    return dom.getById(ctx, dom.getChannelSliderId(ctx, channel));
+    return dom.getById(ctx, dom.getChannelSliderTrackId(ctx, channel));
   },
   getChannelSliderValueFromPoint(ctx, point, channel) {
     const trackEl = dom.getChannelSliderTrackEl(ctx, channel);
@@ -256,6 +259,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 +495,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 +506,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,10 +516,11 @@ 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),
+        id: dom.getChannelSliderTrackId(state.context, channel),
         role: "group",
         "data-channel": channel,
         "data-orientation": orientation,
@@ -524,16 +531,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 +577,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 +594,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 +635,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 +648,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;
@@ -658,6 +689,8 @@ function connect(state, send, normalize) {
         type: "text",
         disabled,
         name: state.context.name,
+        readOnly: state.context.readOnly,
+        required: state.context.required,
         id: dom.getHiddenInputId(state.context),
         style: visuallyHiddenStyle,
         defaultValue: valueAsString
@@ -949,22 +982,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 +1172,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 +1212,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 +1273,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);