@zag-js/color-picker 0.24.0 → 0.26.0

package/dist/index.d.mts

@@ -8,7 +8,7 @@ import { InteractOutsideHandlers } from '@zag-js/dismissable';
 import { PositioningOptions } from '@zag-js/popper';
 import { MaybeFunction } from '@zag-js/utils';
 
-declare const anatomy: _zag_js_anatomy.Anatomy<"root" | "label" | "control" | "trigger" | "positioner" | "content" | "area" | "areaThumb" | "areaBackground" | "channelSlider" | "channelSliderTrack" | "channelSliderThumb" | "channelInput" | "transparancyGrid" | "swatchGroup" | "swatchTrigger" | "swatch" | "eyeDropperTrigger">;
+declare const anatomy: _zag_js_anatomy.Anatomy<"root" | "label" | "control" | "trigger" | "positioner" | "content" | "area" | "areaThumb" | "areaBackground" | "channelSlider" | "channelSliderTrack" | "channelSliderThumb" | "channelInput" | "transparencyGrid" | "swatchGroup" | "swatchTrigger" | "swatch" | "eyeDropperTrigger">;
 
 interface ValueChangeDetails {
     value: Color;
@@ -69,16 +69,6 @@ interface PublicContext extends CommonProperties, InteractOutsideHandlers {
      * The name for the form input
      */
     name?: string;
-    /**
-     * The color format to use (rgb, hsl, hsb)
-     * @default "hsl"
-     */
-    format?: ColorFormat;
-    /**
-     * The alpha format to use (decimal, percent)
-     * @default "decimal"
-     */
-    alphaFormat?: "decimal" | "percent";
     /**
      * The positioning options for the color picker
      */
@@ -157,8 +147,8 @@ interface SwatchProps {
      */
     respectAlpha?: boolean;
 }
-interface TransparancyGridProps {
-    size: string;
+interface TransparencyGridProps {
+    size?: string;
 }
 interface MachineApi<T extends PropTypes = PropTypes> {
     /**
@@ -193,6 +183,10 @@ interface MachineApi<T extends PropTypes = PropTypes> {
      * Function to set the color value of a specific channel
      */
     setChannelValue(channel: ColorChannel, value: number): void;
+    /**
+     * The current color format
+     */
+    format: ColorFormat;
     /**
      * Function to set the color format
      */
@@ -200,7 +194,7 @@ interface MachineApi<T extends PropTypes = PropTypes> {
     /**
      * The alpha value of the color
      */
-    getAlpha(): number;
+    alpha: number;
     /**
      * Function to set the color alpha
      */
@@ -219,7 +213,7 @@ interface MachineApi<T extends PropTypes = PropTypes> {
     getChannelSliderTrackProps(props: ChannelProps): T["element"];
     getChannelSliderThumbProps(props: ChannelProps): T["element"];
     getChannelInputProps(props: ChannelInputProps): T["input"];
-    getTransparencyGridProps(props: TransparancyGridProps): T["element"];
+    getTransparencyGridProps(props?: TransparencyGridProps): T["element"];
     eyeDropperTriggerProps: T["button"];
     swatchGroupProps: T["element"];
     getSwatchTriggerProps(props: SwatchTriggerProps): T["button"];
@@ -232,4 +226,4 @@ declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<
 
 declare const parse: (color: string) => Color;
 
-export { MachineApi as Api, AreaProps, ChannelInputProps, ChannelProps, UserDefinedContext as Context, SwatchProps, anatomy, connect, machine, parse };
+export { MachineApi as Api, AreaProps, ChannelInputProps, ChannelProps, UserDefinedContext as Context, SwatchProps, SwatchTriggerProps, TransparencyGridProps, anatomy, connect, machine, parse };

package/dist/index.d.ts

@@ -8,7 +8,7 @@ import { InteractOutsideHandlers } from '@zag-js/dismissable';
 import { PositioningOptions } from '@zag-js/popper';
 import { MaybeFunction } from '@zag-js/utils';
 
-declare const anatomy: _zag_js_anatomy.Anatomy<"root" | "label" | "control" | "trigger" | "positioner" | "content" | "area" | "areaThumb" | "areaBackground" | "channelSlider" | "channelSliderTrack" | "channelSliderThumb" | "channelInput" | "transparancyGrid" | "swatchGroup" | "swatchTrigger" | "swatch" | "eyeDropperTrigger">;
+declare const anatomy: _zag_js_anatomy.Anatomy<"root" | "label" | "control" | "trigger" | "positioner" | "content" | "area" | "areaThumb" | "areaBackground" | "channelSlider" | "channelSliderTrack" | "channelSliderThumb" | "channelInput" | "transparencyGrid" | "swatchGroup" | "swatchTrigger" | "swatch" | "eyeDropperTrigger">;
 
 interface ValueChangeDetails {
     value: Color;
@@ -69,16 +69,6 @@ interface PublicContext extends CommonProperties, InteractOutsideHandlers {
      * The name for the form input
      */
     name?: string;
-    /**
-     * The color format to use (rgb, hsl, hsb)
-     * @default "hsl"
-     */
-    format?: ColorFormat;
-    /**
-     * The alpha format to use (decimal, percent)
-     * @default "decimal"
-     */
-    alphaFormat?: "decimal" | "percent";
     /**
      * The positioning options for the color picker
      */
@@ -157,8 +147,8 @@ interface SwatchProps {
      */
     respectAlpha?: boolean;
 }
-interface TransparancyGridProps {
-    size: string;
+interface TransparencyGridProps {
+    size?: string;
 }
 interface MachineApi<T extends PropTypes = PropTypes> {
     /**
@@ -193,6 +183,10 @@ interface MachineApi<T extends PropTypes = PropTypes> {
      * Function to set the color value of a specific channel
      */
     setChannelValue(channel: ColorChannel, value: number): void;
+    /**
+     * The current color format
+     */
+    format: ColorFormat;
     /**
      * Function to set the color format
      */
@@ -200,7 +194,7 @@ interface MachineApi<T extends PropTypes = PropTypes> {
     /**
      * The alpha value of the color
      */
-    getAlpha(): number;
+    alpha: number;
     /**
      * Function to set the color alpha
      */
@@ -219,7 +213,7 @@ interface MachineApi<T extends PropTypes = PropTypes> {
     getChannelSliderTrackProps(props: ChannelProps): T["element"];
     getChannelSliderThumbProps(props: ChannelProps): T["element"];
     getChannelInputProps(props: ChannelInputProps): T["input"];
-    getTransparencyGridProps(props: TransparancyGridProps): T["element"];
+    getTransparencyGridProps(props?: TransparencyGridProps): T["element"];
     eyeDropperTriggerProps: T["button"];
     swatchGroupProps: T["element"];
     getSwatchTriggerProps(props: SwatchTriggerProps): T["button"];
@@ -232,4 +226,4 @@ declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<
 
 declare const parse: (color: string) => Color;
 
-export { MachineApi as Api, AreaProps, ChannelInputProps, ChannelProps, UserDefinedContext as Context, SwatchProps, anatomy, connect, machine, parse };
+export { MachineApi as Api, AreaProps, ChannelInputProps, ChannelProps, UserDefinedContext as Context, SwatchProps, SwatchTriggerProps, TransparencyGridProps, anatomy, connect, machine, parse };

package/dist/index.js

@@ -43,7 +43,7 @@ var anatomy = (0, import_anatomy.createAnatomy)("color-picker", [
   "channelSliderTrack",
   "channelSliderThumb",
   "channelInput",
-  "transparancyGrid",
+  "transparencyGrid",
   "swatchGroup",
   "swatchTrigger",
   "swatch",
@@ -104,7 +104,10 @@ var dom = (0, import_dom_query.createScope)({
     return percent;
   },
   getChannelInputEls: (ctx) => {
-    return (0, import_dom_query.queryAll)(dom.getContentEl(ctx), "input[data-channel]");
+    return [
+      ...(0, import_dom_query.queryAll)(dom.getContentEl(ctx), "input[data-channel]"),
+      ...(0, import_dom_query.queryAll)(dom.getControlEl(ctx), "input[data-channel]")
+    ];
   },
   getFirstFocusableEl: (ctx) => (0, import_tabbable.getFirstFocusable)(dom.getContentEl(ctx), "if-empty"),
   getInitialFocusEl: (ctx) => {
@@ -208,19 +211,18 @@ function getSliderBackgroundDirection(orientation, dir) {
     return "left";
   }
 }
-var getSliderBackground = (ctx, props) => {
-  const { channel } = props;
-  const dir = getSliderBackgroundDirection(props.orientation, ctx.dir);
-  const value = ctx.value;
+var getSliderBackground = (props) => {
+  const { channel, value, dir } = props;
+  const bgDirection = getSliderBackgroundDirection(props.orientation, dir);
   const { minValue, maxValue } = value.getChannelRange(channel);
   switch (channel) {
     case "hue":
-      return `linear-gradient(to ${dir}, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%)`;
+      return `linear-gradient(to ${bgDirection}, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%)`;
     case "lightness": {
       let start = value.withChannelValue(channel, minValue).toString("css");
       let middle = value.withChannelValue(channel, (maxValue - minValue) / 2).toString("css");
       let end = value.withChannelValue(channel, maxValue).toString("css");
-      return `linear-gradient(to ${dir}, ${start}, ${middle}, ${end})`;
+      return `linear-gradient(to ${bgDirection}, ${start}, ${middle}, ${end})`;
     }
     case "saturation":
     case "brightness":
@@ -230,7 +232,7 @@ var getSliderBackground = (ctx, props) => {
     case "alpha": {
       let start = value.withChannelValue(channel, minValue).toString("css");
       let end = value.withChannelValue(channel, maxValue).toString("css");
-      return `linear-gradient(to ${dir}, ${start}, ${end})`;
+      return `linear-gradient(to ${bgDirection}, ${start}, ${end})`;
     }
     default:
       throw new Error("Unknown color channel: " + channel);
@@ -246,11 +248,13 @@ function connect(state, send, normalize) {
   const isDragging = state.hasTag("dragging");
   const isOpen = state.hasTag("open");
   const channels = value.getChannels();
-  const getAreaChannels = (props) => ({
-    value: value.toFormat("hsl"),
-    xChannel: props.xChannel ?? "saturation",
-    yChannel: props.yChannel ?? "lightness"
-  });
+  const getAreaChannels = (props) => {
+    const channels2 = value.getChannels();
+    return {
+      xChannel: props.xChannel ?? channels2[1],
+      yChannel: props.yChannel ?? channels2[2]
+    };
+  };
   const currentPlacement = state.context.currentPlacement;
   const popperStyles = (0, import_popper.getPlacementStyles)({
     ...state.context.positioning,
@@ -272,13 +276,12 @@ function connect(state, send, normalize) {
       const color = value.withChannelValue(channel, channelValue);
       send({ type: "VALUE.SET", value: color, src: "set-channel" });
     },
+    format: value.outputFormat ?? value.getFormat(),
     setFormat(format) {
       const formatValue = value.toFormat(format);
       send({ type: "VALUE.SET", value: formatValue, src: "set-format" });
     },
-    getAlpha() {
-      return value.getChannelValue("alpha");
-    },
+    alpha: value.getChannelValue("alpha"),
     setAlpha(alphaValue) {
       const color = value.withChannelValue("alpha", alphaValue);
       send({ type: "VALUE.SET", value: color, src: "set-alpha" });
@@ -391,10 +394,10 @@ function connect(state, send, normalize) {
       });
     },
     getAreaThumbProps(props = {}) {
-      const { xChannel, yChannel, value: valueAsHSL } = getAreaChannels(props);
+      const { xChannel, yChannel } = getAreaChannels(props);
       const channel = { xChannel, yChannel };
-      const x = valueAsHSL.getChannelValuePercent(xChannel);
-      const y = 1 - valueAsHSL.getChannelValuePercent(yChannel);
+      const x = value.getChannelValuePercent(xChannel);
+      const y = 1 - value.getChannelValuePercent(yChannel);
       return normalize.element({
         ...parts.areaThumb.attrs,
         id: dom.getAreaThumbId(state.context),
@@ -449,10 +452,10 @@ function connect(state, send, normalize) {
         }
       });
     },
-    getTransparencyGridProps(props) {
-      const { size } = props;
+    getTransparencyGridProps(props = {}) {
+      const { size = "12px" } = props;
       return normalize.element({
-        ...parts.transparancyGrid.attrs,
+        ...parts.transparencyGrid.attrs,
         style: {
           "--size": size,
           width: "100%",
@@ -501,7 +504,12 @@ function connect(state, send, normalize) {
         style: {
           position: "relative",
           forcedColorAdjust: "none",
-          backgroundImage: getSliderBackground(state.context, { orientation, channel })
+          backgroundImage: getSliderBackground({
+            orientation,
+            channel,
+            dir: state.context.dir,
+            value
+          })
         }
       });
     },
@@ -583,6 +591,7 @@ function connect(state, send, normalize) {
       const range = getChannelRange(value, channel);
       return normalize.input({
         ...parts.channelInput.attrs,
+        dir: state.context.dir,
         type: isTextField ? "text" : "number",
         "data-channel": channel,
         "aria-label": channel,
@@ -635,6 +644,7 @@ function connect(state, send, normalize) {
     eyeDropperTriggerProps: normalize.button({
       ...parts.eyeDropperTrigger.attrs,
       type: "button",
+      dir: state.context.dir,
       disabled: isDisabled,
       "data-disabled": (0, import_dom_query2.dataAttr)(isDisabled),
       "aria-label": "Pick a color from the screen",
@@ -654,6 +664,7 @@ function connect(state, send, normalize) {
       return normalize.button({
         ...parts.swatchTrigger.attrs,
         disabled: isDisabled,
+        dir: state.context.dir,
         type: "button",
         "data-value": color.toString("hex"),
         onClick() {
@@ -672,6 +683,7 @@ function connect(state, send, normalize) {
       const color = colorValue.toFormat(value.getFormat());
       return normalize.element({
         ...parts.swatch.attrs,
+        dir: state.context.dir,
         "data-state": colorValue.isEqual(value) ? "selected" : "unselected",
         "data-value": color.toString("hex"),
         style: {
@@ -697,7 +709,14 @@ var import_utils2 = require("@zag-js/utils");
 // src/color-picker.parse.ts
 var import_color_utils4 = require("@zag-js/color-utils");
 var import_core = require("@zag-js/core");
-var parse = (color) => (0, import_core.ref)((0, import_color_utils4.parseColor)(color));
+var parse = (color) => {
+  const value = (0, import_color_utils4.parseColor)(color);
+  const colorFormat = value.getFormat();
+  const lockedFormat = colorFormat.startsWith("hsl") ? "hsla" : "hsba";
+  const result = value.toFormat(lockedFormat);
+  result.outputFormat = colorFormat;
+  return (0, import_core.ref)(result);
+};
 
 // src/color-picker.machine.ts
 var { stateIn } = import_core2.guards;
@@ -726,7 +745,10 @@ function machine(userContext) {
         isRtl: (ctx2) => ctx2.dir === "rtl",
         isDisabled: (ctx2) => !!ctx2.disabled || ctx2.fieldsetDisabled,
         isInteractive: (ctx2) => !(ctx2.isDisabled || ctx2.readOnly),
-        valueAsString: (ctx2) => ctx2.value.toString("css")
+        valueAsString: (ctx2) => {
+          const color = ctx2.value.outputFormat ? ctx2.value.toFormat(ctx2.value.outputFormat) : ctx2.value;
+          return color.toString("css");
+        }
       },
       activities: ["trackFormControl"],
       watch: {
@@ -1040,10 +1062,9 @@ function machine(userContext) {
             return;
           }
           if (isTextField) {
-            const format = "hsl";
             const currentAlpha = ctx2.value.getChannelValue("alpha");
             const color2 = (0, import_utils2.tryCatch)(
-              () => (0, import_color_utils5.parseColor)(value).toFormat(format).withChannelValue("alpha", currentAlpha),
+              () => parse(value).withChannelValue("alpha", currentAlpha),
               () => ctx2.value
             );
             const inputEl = dom.getChannelInputEl(ctx2, channel);
@@ -1051,7 +1072,7 @@ function machine(userContext) {
             set.value(ctx2, color2);
             return;
           }
-          const color = ctx2.value.withChannelValue(channel, value);
+          const color = ctx2.value.toFormat(ctx2.value.outputFormat).withChannelValue(channel, value);
           set.value(ctx2, color);
         },
         incrementChannel(ctx2, evt) {
@@ -1121,6 +1142,9 @@ function machine(userContext) {
         toggleVisibility(ctx2, _evt, { send }) {
           send({ type: ctx2.open ? "OPEN" : "CLOSE", src: "controlled" });
         }
+      },
+      compareFns: {
+        value: (a, b) => a.isEqual(b)
       }
     }
   );
@@ -1154,7 +1178,13 @@ var set = {
     sync.inputs(ctx);
     if (!color || ctx.value.isEqual(color))
       return;
-    ctx.value = (0, import_core2.ref)(color);
+    const currentFormat = ctx.value.getFormat();
+    const outputColor = color.toFormat(currentFormat);
+    try {
+      outputColor.outputFormat = ctx.value.outputFormat;
+    } catch {
+    }
+    ctx.value = (0, import_core2.ref)(outputColor);
     invoke.change(ctx);
   }
 };