@zag-js/color-picker 0.47.0 → 0.48.0

package/dist/index.d.mts

@@ -11,6 +11,20 @@ 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" | "transparencyGrid" | "swatchGroup" | "swatchTrigger" | "swatchIndicator" | "swatch" | "eyeDropperTrigger" | "formatTrigger" | "formatSelect">;
 
 type ExtendedColorChannel = ColorChannel | "hex" | "css";
+interface EyeDropper {
+    new (): EyeDropper;
+    open: (options?: {
+        signal?: AbortSignal;
+    }) => Promise<{
+        sRGBHex: string;
+    }>;
+    [Symbol.toStringTag]: "EyeDropper";
+}
+declare global {
+    interface Window {
+        EyeDropper: EyeDropper;
+    }
+}
 interface ValueChangeDetails {
     value: Color;
     valueAsString: string;
@@ -164,8 +178,8 @@ interface SwatchTriggerProps {
 interface SwatchTriggerState {
     value: Color;
     valueAsString: string;
-    isChecked: boolean;
-    isDisabled: boolean;
+    checked: boolean;
+    disabled: boolean;
 }
 interface SwatchProps {
     /**
@@ -184,11 +198,11 @@ interface MachineApi<T extends PropTypes = PropTypes> {
     /**
      * Whether the color picker is being dragged
      */
-    isDragging: boolean;
+    dragging: boolean;
     /**
      * Whether the color picker is open
      */
-    isOpen: boolean;
+    open: boolean;
     /**
      * The current color value (as a string)
      */
@@ -226,13 +240,9 @@ interface MachineApi<T extends PropTypes = PropTypes> {
      */
     setAlpha(value: number): void;
     /**
-     * Function to open the color picker
-     */
-    open(): void;
-    /**
-     * Function to close the color picker
+     * Function to open or close the color picker
      */
-    close(): void;
+    setOpen(open: boolean): void;
     rootProps: T["element"];
     labelProps: T["element"];
     controlProps: T["element"];

package/dist/index.d.ts

@@ -11,6 +11,20 @@ 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" | "transparencyGrid" | "swatchGroup" | "swatchTrigger" | "swatchIndicator" | "swatch" | "eyeDropperTrigger" | "formatTrigger" | "formatSelect">;
 
 type ExtendedColorChannel = ColorChannel | "hex" | "css";
+interface EyeDropper {
+    new (): EyeDropper;
+    open: (options?: {
+        signal?: AbortSignal;
+    }) => Promise<{
+        sRGBHex: string;
+    }>;
+    [Symbol.toStringTag]: "EyeDropper";
+}
+declare global {
+    interface Window {
+        EyeDropper: EyeDropper;
+    }
+}
 interface ValueChangeDetails {
     value: Color;
     valueAsString: string;
@@ -164,8 +178,8 @@ interface SwatchTriggerProps {
 interface SwatchTriggerState {
     value: Color;
     valueAsString: string;
-    isChecked: boolean;
-    isDisabled: boolean;
+    checked: boolean;
+    disabled: boolean;
 }
 interface SwatchProps {
     /**
@@ -184,11 +198,11 @@ interface MachineApi<T extends PropTypes = PropTypes> {
     /**
      * Whether the color picker is being dragged
      */
-    isDragging: boolean;
+    dragging: boolean;
     /**
      * Whether the color picker is open
      */
-    isOpen: boolean;
+    open: boolean;
     /**
      * The current color value (as a string)
      */
@@ -226,13 +240,9 @@ interface MachineApi<T extends PropTypes = PropTypes> {
      */
     setAlpha(value: number): void;
     /**
-     * Function to open the color picker
-     */
-    open(): void;
-    /**
-     * Function to close the color picker
+     * Function to open or close the color picker
      */
-    close(): void;
+    setOpen(open: boolean): void;
     rootProps: T["element"];
     labelProps: T["element"];
     controlProps: T["element"];

package/dist/index.js

@@ -59,7 +59,6 @@ var import_color_utils3 = require("@zag-js/color-utils");
 var import_dom_event2 = require("@zag-js/dom-event");
 var import_dom_query2 = require("@zag-js/dom-query");
 var import_popper = require("@zag-js/popper");
-var import_visually_hidden = require("@zag-js/visually-hidden");
 
 // src/color-picker.dom.ts
 var import_dom_event = require("@zag-js/dom-event");
@@ -250,11 +249,11 @@ function connect(state, send, normalize) {
   const value = state.context.value;
   const areaValue = state.context.areaValue;
   const valueAsString = state.context.valueAsString;
-  const isDisabled = state.context.isDisabled;
-  const isInteractive = state.context.isInteractive;
-  const isDragging = state.hasTag("dragging");
-  const isOpen = state.hasTag("open");
-  const isFocused = state.hasTag("focused");
+  const disabled = state.context.isDisabled;
+  const interactive = state.context.isInteractive;
+  const dragging = state.hasTag("dragging");
+  const open = state.hasTag("open");
+  const focused = state.hasTag("focused");
   const getAreaChannels = (props) => {
     const channels = areaValue.getChannels();
     return {
@@ -272,20 +271,19 @@ function connect(state, send, normalize) {
     return {
       value: color,
       valueAsString: color.toString("hex"),
-      isChecked: color.isEqual(value),
-      isDisabled: props.disabled || !isInteractive
+      checked: color.isEqual(value),
+      disabled: props.disabled || !interactive
     };
   }
   return {
-    isDragging,
-    isOpen,
+    dragging,
+    open,
     valueAsString,
     value,
-    open() {
-      send({ type: "OPEN" });
-    },
-    close() {
-      send({ type: "CLOSE" });
+    setOpen(_open) {
+      if (_open === open)
+        return;
+      send({ type: _open ? "OPEN" : "CLOSE" });
     },
     setValue(value2) {
       send({ type: "VALUE.SET", value: (0, import_color_utils3.normalizeColor)(value2), src: "set-color" });
@@ -311,7 +309,7 @@ function connect(state, send, normalize) {
       ...parts.root.attrs,
       dir: state.context.dir,
       id: dom.getRootId(state.context),
-      "data-disabled": (0, import_dom_query2.dataAttr)(isDisabled),
+      "data-disabled": (0, import_dom_query2.dataAttr)(disabled),
       "data-readonly": (0, import_dom_query2.dataAttr)(state.context.readOnly),
       style: {
         "--value": value.toString("css")
@@ -322,9 +320,9 @@ function connect(state, send, normalize) {
       dir: state.context.dir,
       id: dom.getLabelId(state.context),
       htmlFor: dom.getHiddenInputId(state.context),
-      "data-disabled": (0, import_dom_query2.dataAttr)(isDisabled),
+      "data-disabled": (0, import_dom_query2.dataAttr)(disabled),
       "data-readonly": (0, import_dom_query2.dataAttr)(state.context.readOnly),
-      "data-focus": (0, import_dom_query2.dataAttr)(isFocused),
+      "data-focus": (0, import_dom_query2.dataAttr)(focused),
       onClick(event) {
         event.preventDefault();
         const inputEl = (0, import_dom_query2.query)(dom.getControlEl(state.context), "[data-channel=hex]");
@@ -335,33 +333,33 @@ function connect(state, send, normalize) {
       ...parts.control.attrs,
       id: dom.getControlId(state.context),
       dir: state.context.dir,
-      "data-disabled": (0, import_dom_query2.dataAttr)(isDisabled),
+      "data-disabled": (0, import_dom_query2.dataAttr)(disabled),
       "data-readonly": (0, import_dom_query2.dataAttr)(state.context.readOnly),
-      "data-state": isOpen ? "open" : "closed",
-      "data-focus": (0, import_dom_query2.dataAttr)(isFocused)
+      "data-state": open ? "open" : "closed",
+      "data-focus": (0, import_dom_query2.dataAttr)(focused)
     }),
     triggerProps: normalize.button({
       ...parts.trigger.attrs,
       id: dom.getTriggerId(state.context),
       dir: state.context.dir,
-      disabled: isDisabled,
+      disabled,
       "aria-label": `select color. current color is ${valueAsString}`,
       "aria-controls": dom.getContentId(state.context),
       "aria-labelledby": dom.getLabelId(state.context),
-      "data-disabled": (0, import_dom_query2.dataAttr)(isDisabled),
+      "data-disabled": (0, import_dom_query2.dataAttr)(disabled),
       "data-readonly": (0, import_dom_query2.dataAttr)(state.context.readOnly),
       "data-placement": currentPlacement,
-      "aria-expanded": (0, import_dom_query2.dataAttr)(isOpen),
-      "data-state": isOpen ? "open" : "closed",
-      "data-focus": (0, import_dom_query2.dataAttr)(isFocused),
+      "aria-expanded": (0, import_dom_query2.dataAttr)(open),
+      "data-state": open ? "open" : "closed",
+      "data-focus": (0, import_dom_query2.dataAttr)(focused),
       type: "button",
       onClick() {
-        if (!isInteractive)
+        if (!interactive)
           return;
         send({ type: "TRIGGER.CLICK" });
       },
       onBlur() {
-        if (!isInteractive)
+        if (!interactive)
           return;
         send({ type: "TRIGGER.BLUR" });
       },
@@ -380,8 +378,8 @@ function connect(state, send, normalize) {
       id: dom.getContentId(state.context),
       dir: state.context.dir,
       "data-placement": currentPlacement,
-      "data-state": isOpen ? "open" : "closed",
-      hidden: !isOpen
+      "data-state": open ? "open" : "closed",
+      hidden: !open
     }),
     getAreaProps(props = {}) {
       const { xChannel, yChannel } = getAreaChannels(props);
@@ -395,10 +393,10 @@ function connect(state, send, normalize) {
         id: dom.getAreaId(state.context),
         role: "group",
         onPointerDown(event) {
-          if (!isInteractive)
+          if (!interactive)
             return;
           const evt = (0, import_dom_event2.getNativeEvent)(event);
-          if (!(0, import_dom_event2.isLeftClick)(evt) || (0, import_dom_event2.isModifiedEvent)(evt))
+          if (!(0, import_dom_event2.isLeftClick)(evt) || (0, import_dom_event2.isModifierKey)(evt))
             return;
           const point = (0, import_dom_event2.getEventPoint)(evt);
           const channel = { xChannel, yChannel };
@@ -442,8 +440,8 @@ function connect(state, send, normalize) {
         ...parts.areaThumb.attrs,
         id: dom.getAreaThumbId(state.context),
         dir: state.context.dir,
-        tabIndex: isDisabled ? void 0 : 0,
-        "data-disabled": (0, import_dom_query2.dataAttr)(isDisabled),
+        tabIndex: disabled ? void 0 : 0,
+        "data-disabled": (0, import_dom_query2.dataAttr)(disabled),
         role: "slider",
         "aria-valuemin": 0,
         "aria-valuemax": 100,
@@ -461,12 +459,14 @@ function connect(state, send, normalize) {
           background: areaValue.withChannelValue("alpha", 1).toString("css")
         },
         onFocus() {
-          if (!isInteractive)
+          if (!interactive)
             return;
           send({ type: "AREA.FOCUS", id: "area", channel });
         },
         onKeyDown(event) {
-          if (!isInteractive)
+          if (event.defaultPrevented)
+            return;
+          if (!interactive)
             return;
           const step = (0, import_dom_event2.getEventStep)(event);
           const keyMap = {
@@ -526,10 +526,10 @@ function connect(state, send, normalize) {
         "data-orientation": orientation,
         role: "presentation",
         onPointerDown(event) {
-          if (!isInteractive)
+          if (!interactive)
             return;
           const evt = (0, import_dom_event2.getNativeEvent)(event);
-          if (!(0, import_dom_event2.isLeftClick)(evt) || (0, import_dom_event2.isModifiedEvent)(evt))
+          if (!(0, import_dom_event2.isLeftClick)(evt) || (0, import_dom_event2.isModifierKey)(evt))
             return;
           const point = (0, import_dom_event2.getEventPoint)(evt);
           send({ type: "CHANNEL_SLIDER.POINTER_DOWN", channel, point, id: channel, orientation });
@@ -572,11 +572,11 @@ function connect(state, send, normalize) {
         id: dom.getChannelSliderThumbId(state.context, channel),
         role: "slider",
         "aria-label": channel,
-        tabIndex: isDisabled ? void 0 : 0,
+        tabIndex: disabled ? void 0 : 0,
         "data-channel": channel,
-        "data-disabled": (0, import_dom_query2.dataAttr)(isDisabled),
+        "data-disabled": (0, import_dom_query2.dataAttr)(disabled),
         "data-orientation": orientation,
-        "aria-disabled": (0, import_dom_query2.dataAttr)(isDisabled),
+        "aria-disabled": (0, import_dom_query2.dataAttr)(disabled),
         "aria-orientation": orientation,
         "aria-valuemax": maxValue,
         "aria-valuemin": minValue,
@@ -589,12 +589,14 @@ function connect(state, send, normalize) {
           ...placementStyles
         },
         onFocus() {
-          if (!isInteractive)
+          if (!interactive)
             return;
           send({ type: "CHANNEL_SLIDER.FOCUS", channel });
         },
         onKeyDown(event) {
-          if (!isInteractive)
+          if (event.defaultPrevented)
+            return;
+          if (!interactive)
             return;
           const step = (0, import_dom_event2.getEventStep)(event) * stepValue;
           const keyMap = {
@@ -646,15 +648,15 @@ function connect(state, send, normalize) {
         "aria-label": channel,
         spellCheck: false,
         autoComplete: "off",
-        disabled: isDisabled,
-        "data-disabled": (0, import_dom_query2.dataAttr)(isDisabled),
+        disabled,
+        "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,
         onBeforeInput(event) {
-          if (isTextField || !isInteractive)
+          if (isTextField || !interactive)
             return;
           const value2 = event.currentTarget.value;
           if (value2.match(/[^0-9.]/g)) {
@@ -662,19 +664,21 @@ function connect(state, send, normalize) {
           }
         },
         onFocus(event) {
-          if (!isInteractive)
+          if (!interactive)
             return;
           send({ type: "CHANNEL_INPUT.FOCUS", channel });
           event.target.select();
         },
         onBlur(event) {
-          if (!isInteractive)
+          if (!interactive)
             return;
           const value2 = isTextField ? event.currentTarget.value : event.currentTarget.valueAsNumber;
           send({ type: "CHANNEL_INPUT.BLUR", channel, value: value2, isTextField });
         },
         onKeyDown(event) {
-          if (!isInteractive)
+          if (event.defaultPrevented)
+            return;
+          if (!interactive)
             return;
           if (event.key === "Enter") {
             const value2 = isTextField ? event.currentTarget.value : event.currentTarget.valueAsNumber;
@@ -691,21 +695,21 @@ function connect(state, send, normalize) {
     },
     hiddenInputProps: normalize.input({
       type: "text",
-      disabled: isDisabled,
+      disabled,
       name: state.context.name,
       id: dom.getHiddenInputId(state.context),
-      style: import_visually_hidden.visuallyHiddenStyle,
+      style: import_dom_query2.visuallyHiddenStyle,
       defaultValue: valueAsString
     }),
     eyeDropperTriggerProps: normalize.button({
       ...parts.eyeDropperTrigger.attrs,
       type: "button",
       dir: state.context.dir,
-      disabled: isDisabled,
-      "data-disabled": (0, import_dom_query2.dataAttr)(isDisabled),
+      disabled,
+      "data-disabled": (0, import_dom_query2.dataAttr)(disabled),
       "aria-label": "Pick a color from the screen",
       onClick() {
-        if (!isInteractive)
+        if (!interactive)
           return;
         send("EYEDROPPER.CLICK");
       }
@@ -719,15 +723,15 @@ function connect(state, send, normalize) {
       const triggerState = getSwatchTriggerState(props);
       return normalize.button({
         ...parts.swatchTrigger.attrs,
-        disabled: triggerState.isDisabled,
+        disabled: triggerState.disabled,
         dir: state.context.dir,
         type: "button",
         "aria-label": `select ${triggerState.valueAsString} as the color`,
-        "data-state": triggerState.isChecked ? "checked" : "unchecked",
+        "data-state": triggerState.checked ? "checked" : "unchecked",
         "data-value": triggerState.valueAsString,
-        "data-disabled": (0, import_dom_query2.dataAttr)(triggerState.isDisabled),
+        "data-disabled": (0, import_dom_query2.dataAttr)(triggerState.disabled),
         onClick() {
-          if (triggerState.isDisabled)
+          if (triggerState.disabled)
             return;
           send({ type: "SWATCH_TRIGGER.CLICK", value: triggerState.value });
         },
@@ -741,7 +745,7 @@ function connect(state, send, normalize) {
       return normalize.element({
         ...parts.swatchIndicator.attrs,
         dir: state.context.dir,
-        hidden: !triggerState.isChecked
+        hidden: !triggerState.checked
       });
     },
     getSwatchProps(props) {
@@ -750,7 +754,7 @@ function connect(state, send, normalize) {
       return normalize.element({
         ...parts.swatch.attrs,
         dir: state.context.dir,
-        "data-state": triggerState.isChecked ? "checked" : "unchecked",
+        "data-state": triggerState.checked ? "checked" : "unchecked",
         "data-value": triggerState.valueAsString,
         style: {
           position: "relative",
@@ -775,7 +779,7 @@ function connect(state, send, normalize) {
       "aria-label": "change color format",
       dir: state.context.dir,
       defaultValue: state.context.format,
-      disabled: isDisabled,
+      disabled,
       onChange(event) {
         const format = assertFormat(event.currentTarget.value);
         send({ type: "FORMAT.SET", format, src: "format-select" });