@zag-js/color-picker 0.56.1 → 0.57.0

package/dist/index.d.mts

@@ -9,7 +9,7 @@ import { StateMachine } from '@zag-js/core';
 import { PositioningOptions } from '@zag-js/popper';
 export { PositioningOptions } from '@zag-js/popper';
 
-declare const anatomy: _zag_js_anatomy.Anatomy<"area" | "label" | "root" | "content" | "control" | "trigger" | "positioner" | "areaThumb" | "areaBackground" | "channelSlider" | "channelSliderTrack" | "channelSliderThumb" | "channelInput" | "transparencyGrid" | "swatchGroup" | "swatchTrigger" | "swatchIndicator" | "swatch" | "eyeDropperTrigger" | "formatTrigger" | "formatSelect">;
+declare const anatomy: _zag_js_anatomy.Anatomy<"area" | "label" | "root" | "content" | "control" | "trigger" | "positioner" | "areaThumb" | "areaBackground" | "channelSlider" | "channelSliderLabel" | "channelSliderTrack" | "channelSliderThumb" | "channelSliderValueText" | "channelInput" | "transparencyGrid" | "swatchGroup" | "swatchTrigger" | "swatchIndicator" | "swatch" | "eyeDropperTrigger" | "formatTrigger" | "formatSelect">;
 
 type ExtendedColorChannel = ColorChannel | "hex" | "css";
 interface EyeDropper {
@@ -157,6 +157,9 @@ interface ChannelProps {
     channel: ColorChannel;
     orientation?: Orientation;
 }
+interface ChannelSliderProps extends ChannelProps {
+    format?: ColorFormat;
+}
 interface ChannelInputProps {
     channel: ExtendedColorChannel;
     orientation?: Orientation;
@@ -219,6 +222,10 @@ interface MachineApi<T extends PropTypes = PropTypes> {
      * Function to set the color value
      */
     getChannelValue(channel: ColorChannel): string;
+    /**
+     * Function to get the formatted and localized value of a specific channel
+     */
+    getChannelValueText(channel: ColorChannel, locale: string): string;
     /**
      * Function to set the color value of a specific channel
      */
@@ -253,10 +260,12 @@ interface MachineApi<T extends PropTypes = PropTypes> {
     getAreaProps(props?: AreaProps): T["element"];
     getAreaBackgroundProps(props?: AreaProps): T["element"];
     getAreaThumbProps(props?: AreaProps): T["element"];
-    getChannelSliderProps(props: ChannelProps): T["element"];
-    getChannelSliderTrackProps(props: ChannelProps): T["element"];
-    getChannelSliderThumbProps(props: ChannelProps): T["element"];
     getChannelInputProps(props: ChannelInputProps): T["input"];
+    getChannelSliderProps(props: ChannelSliderProps): T["element"];
+    getChannelSliderTrackProps(props: ChannelSliderProps): T["element"];
+    getChannelSliderThumbProps(props: ChannelSliderProps): T["element"];
+    getChannelSliderLabelProps(props: ChannelProps): T["element"];
+    getChannelSliderValueTextProps(props: ChannelProps): T["element"];
     getTransparencyGridProps(props?: TransparencyGridProps): T["element"];
     getEyeDropperTriggerProps(): T["button"];
     getSwatchGroupProps(): T["element"];
@@ -274,4 +283,4 @@ declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<
 
 declare const parse: (colorString: string) => Color;
 
-export { type MachineApi as Api, type AreaProps, type ChannelInputProps, type ChannelProps, type UserDefinedContext as Context, type ElementIds, type FormatChangeDetails, type OpenChangeDetails, type SwatchProps, type SwatchTriggerProps, type SwatchTriggerState, type TransparencyGridProps, type ValueChangeDetails, anatomy, connect, machine, parse };
+export { type MachineApi as Api, type AreaProps, type ChannelInputProps, type ChannelProps, type ChannelSliderProps, type UserDefinedContext as Context, type ElementIds, type FormatChangeDetails, type OpenChangeDetails, type SwatchProps, type SwatchTriggerProps, type SwatchTriggerState, type TransparencyGridProps, type ValueChangeDetails, anatomy, connect, machine, parse };

package/dist/index.d.ts

@@ -9,7 +9,7 @@ import { StateMachine } from '@zag-js/core';
 import { PositioningOptions } from '@zag-js/popper';
 export { PositioningOptions } from '@zag-js/popper';
 
-declare const anatomy: _zag_js_anatomy.Anatomy<"area" | "label" | "root" | "content" | "control" | "trigger" | "positioner" | "areaThumb" | "areaBackground" | "channelSlider" | "channelSliderTrack" | "channelSliderThumb" | "channelInput" | "transparencyGrid" | "swatchGroup" | "swatchTrigger" | "swatchIndicator" | "swatch" | "eyeDropperTrigger" | "formatTrigger" | "formatSelect">;
+declare const anatomy: _zag_js_anatomy.Anatomy<"area" | "label" | "root" | "content" | "control" | "trigger" | "positioner" | "areaThumb" | "areaBackground" | "channelSlider" | "channelSliderLabel" | "channelSliderTrack" | "channelSliderThumb" | "channelSliderValueText" | "channelInput" | "transparencyGrid" | "swatchGroup" | "swatchTrigger" | "swatchIndicator" | "swatch" | "eyeDropperTrigger" | "formatTrigger" | "formatSelect">;
 
 type ExtendedColorChannel = ColorChannel | "hex" | "css";
 interface EyeDropper {
@@ -157,6 +157,9 @@ interface ChannelProps {
     channel: ColorChannel;
     orientation?: Orientation;
 }
+interface ChannelSliderProps extends ChannelProps {
+    format?: ColorFormat;
+}
 interface ChannelInputProps {
     channel: ExtendedColorChannel;
     orientation?: Orientation;
@@ -219,6 +222,10 @@ interface MachineApi<T extends PropTypes = PropTypes> {
      * Function to set the color value
      */
     getChannelValue(channel: ColorChannel): string;
+    /**
+     * Function to get the formatted and localized value of a specific channel
+     */
+    getChannelValueText(channel: ColorChannel, locale: string): string;
     /**
      * Function to set the color value of a specific channel
      */
@@ -253,10 +260,12 @@ interface MachineApi<T extends PropTypes = PropTypes> {
     getAreaProps(props?: AreaProps): T["element"];
     getAreaBackgroundProps(props?: AreaProps): T["element"];
     getAreaThumbProps(props?: AreaProps): T["element"];
-    getChannelSliderProps(props: ChannelProps): T["element"];
-    getChannelSliderTrackProps(props: ChannelProps): T["element"];
-    getChannelSliderThumbProps(props: ChannelProps): T["element"];
     getChannelInputProps(props: ChannelInputProps): T["input"];
+    getChannelSliderProps(props: ChannelSliderProps): T["element"];
+    getChannelSliderTrackProps(props: ChannelSliderProps): T["element"];
+    getChannelSliderThumbProps(props: ChannelSliderProps): T["element"];
+    getChannelSliderLabelProps(props: ChannelProps): T["element"];
+    getChannelSliderValueTextProps(props: ChannelProps): T["element"];
     getTransparencyGridProps(props?: TransparencyGridProps): T["element"];
     getEyeDropperTriggerProps(): T["button"];
     getSwatchGroupProps(): T["element"];
@@ -274,4 +283,4 @@ declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<
 
 declare const parse: (colorString: string) => Color;
 
-export { type MachineApi as Api, type AreaProps, type ChannelInputProps, type ChannelProps, type UserDefinedContext as Context, type ElementIds, type FormatChangeDetails, type OpenChangeDetails, type SwatchProps, type SwatchTriggerProps, type SwatchTriggerState, type TransparencyGridProps, type ValueChangeDetails, anatomy, connect, machine, parse };
+export { type MachineApi as Api, type AreaProps, type ChannelInputProps, type ChannelProps, type ChannelSliderProps, type UserDefinedContext as Context, type ElementIds, type FormatChangeDetails, type OpenChangeDetails, type SwatchProps, type SwatchTriggerProps, type SwatchTriggerState, type TransparencyGridProps, type ValueChangeDetails, anatomy, connect, machine, parse };

package/dist/index.js

@@ -40,8 +40,10 @@ var anatomy = (0, import_anatomy.createAnatomy)("color-picker", [
   "areaThumb",
   "areaBackground",
   "channelSlider",
+  "channelSliderLabel",
   "channelSliderTrack",
   "channelSliderThumb",
+  "channelSliderValueText",
   "channelInput",
   "transparencyGrid",
   "swatchGroup",
@@ -279,6 +281,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" });
@@ -512,7 +517,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,
@@ -523,7 +528,7 @@ function connect(state, send, normalize) {
           if (!(0, import_dom_event2.isLeftClick)(event)) return;
           if ((0, import_dom_event2.isModifierKey)(event)) return;
           const point = (0, import_dom_event2.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: {
@@ -533,7 +538,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),
@@ -547,16 +553,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,
@@ -569,8 +599,8 @@ function connect(state, send, normalize) {
         "data-orientation": orientation,
         "aria-disabled": (0, import_dom_query2.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: {
@@ -586,7 +616,7 @@ function connect(state, send, normalize) {
         onKeyDown(event) {
           if (event.defaultPrevented) return;
           if (!interactive) return;
-          const step = (0, import_dom_event2.getEventStep)(event) * stepValue;
+          const step = (0, import_dom_event2.getEventStep)(event) * channelRange.step;
           const keyMap = {
             ArrowUp() {
               send({ type: "CHANNEL_SLIDER.ARROW_UP", channel, step });
@@ -627,7 +657,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,
@@ -640,9 +670,9 @@ function connect(state, send, normalize) {
         "data-disabled": (0, import_dom_query2.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;
@@ -972,22 +1002,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"]
@@ -1162,11 +1192,11 @@ function machine(userContext) {
             }
           });
         },
-        trackPointerMove(ctx2, _evt, { send }) {
+        trackPointerMove(ctx2, evt, { send }) {
           return (0, import_dom_event3.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";
@@ -1202,22 +1232,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) {
@@ -1261,22 +1293,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);