@zag-js/color-picker 1.43.2 → 1.44.0

package/dist/color-picker.connect.js

@@ -86,9 +86,7 @@ function connect(service, normalize) {
     inline: !!prop("inline"),
     setOpen(nextOpen) {
       if (prop("inline")) return;
-      const open2 = state.hasTag("open");
-      if (open2 === nextOpen) return;
-      send({ type: nextOpen ? "OPEN" : "CLOSE" });
+      send({ type: nextOpen ? "OPEN" : "CLOSE", replaces: "open" });
     },
     setValue(value2) {
       send({ type: "VALUE.SET", value: (0, import_color_utils.normalizeColor)(value2), src: "set-color" });
@@ -288,6 +286,7 @@ function connect(service, normalize) {
         "data-invalid": (0, import_dom_query2.dataAttr)(invalid),
         "data-readonly": (0, import_dom_query2.dataAttr)(readOnly),
         role: "slider",
+        "aria-disabled": (0, import_dom_query2.ariaAttr)(disabled),
         "aria-valuemin": 0,
         "aria-valuemax": 100,
         "aria-valuenow": xValue,
@@ -446,7 +445,7 @@ function connect(service, normalize) {
         "data-channel": channel,
         "data-disabled": (0, import_dom_query2.dataAttr)(disabled),
         "data-orientation": orientation,
-        "aria-disabled": (0, import_dom_query2.dataAttr)(disabled),
+        "aria-disabled": (0, import_dom_query2.ariaAttr)(disabled),
         "aria-orientation": orientation,
         "aria-valuemax": channelRange.maxValue,
         "aria-valuemin": channelRange.minValue,

package/dist/color-picker.connect.mjs

@@ -1,7 +1,14 @@
 // src/color-picker.connect.ts
 import { getColorAreaGradient, normalizeColor } from "@zag-js/color-utils";
-import { getEventKey, getEventPoint, getEventStep, isComposingEvent, isLeftClick, isModifierKey } from "@zag-js/dom-query";
-import { dataAttr, query, visuallyHiddenStyle } from "@zag-js/dom-query";
+import {
+  getEventKey,
+  getEventPoint,
+  getEventStep,
+  isComposingEvent,
+  isLeftClick,
+  isModifierKey
+} from "@zag-js/dom-query";
+import { ariaAttr, dataAttr, query, visuallyHiddenStyle } from "@zag-js/dom-query";
 import { getPlacementSide, getPlacementStyles } from "@zag-js/popper";
 import { parts } from "./color-picker.anatomy.mjs";
 import * as dom from "./color-picker.dom.mjs";
@@ -52,9 +59,7 @@ function connect(service, normalize) {
     inline: !!prop("inline"),
     setOpen(nextOpen) {
       if (prop("inline")) return;
-      const open2 = state.hasTag("open");
-      if (open2 === nextOpen) return;
-      send({ type: nextOpen ? "OPEN" : "CLOSE" });
+      send({ type: nextOpen ? "OPEN" : "CLOSE", replaces: "open" });
     },
     setValue(value2) {
       send({ type: "VALUE.SET", value: normalizeColor(value2), src: "set-color" });
@@ -254,6 +259,7 @@ function connect(service, normalize) {
         "data-invalid": dataAttr(invalid),
         "data-readonly": dataAttr(readOnly),
         role: "slider",
+        "aria-disabled": ariaAttr(disabled),
         "aria-valuemin": 0,
         "aria-valuemax": 100,
         "aria-valuenow": xValue,
@@ -412,7 +418,7 @@ function connect(service, normalize) {
         "data-channel": channel,
         "data-disabled": dataAttr(disabled),
         "data-orientation": orientation,
-        "aria-disabled": dataAttr(disabled),
+        "aria-disabled": ariaAttr(disabled),
         "aria-orientation": orientation,
         "aria-valuemax": channelRange.maxValue,
         "aria-valuemin": channelRange.minValue,

package/dist/color-picker.types.d.mts

@@ -4,7 +4,7 @@ import { Service, EventObject, Machine } from '@zag-js/core';
 import { InteractOutsideHandlers } from '@zag-js/dismissable';
 import { PositioningOptions } from '@zag-js/popper';
 export { PositioningOptions } from '@zag-js/popper';
-import { RequiredBy, CommonProperties, DirectionProperty, Partial, Orientation, PropTypes } from '@zag-js/types';
+import { RequiredBy, CommonProperties, DirectionProperty, Orientation, PropTypes } from '@zag-js/types';
 
 type ExtendedColorChannel = ColorChannel | "hex" | "css";
 interface EyeDropper {
@@ -32,23 +32,23 @@ interface OpenChangeDetails {
 interface FormatChangeDetails {
     format: ColorFormat;
 }
-type ElementIds = Partial<{
-    root: string;
-    control: string;
-    trigger: string;
-    label: string;
-    input: string;
-    hiddenInput: string;
-    content: string;
-    area: string;
-    areaGradient: string;
-    positioner: string;
-    formatSelect: string;
-    areaThumb: string;
-    channelInput: (id: string) => string;
-    channelSliderTrack: (id: ColorChannel) => string;
-    channelSliderThumb: (id: ColorChannel) => string;
-}>;
+interface ElementIds {
+    root?: string | undefined;
+    control?: string | undefined;
+    trigger?: string | undefined;
+    label?: string | undefined;
+    input?: string | undefined;
+    hiddenInput?: string | undefined;
+    content?: string | undefined;
+    area?: string | undefined;
+    areaGradient?: string | undefined;
+    positioner?: string | undefined;
+    formatSelect?: string | undefined;
+    areaThumb?: string | undefined;
+    channelInput?: ((id: string) => string) | undefined;
+    channelSliderTrack?: ((id: ColorChannel) => string) | undefined;
+    channelSliderThumb?: ((id: ColorChannel) => string) | undefined;
+}
 interface ColorPickerProps extends CommonProperties, DirectionProperty, InteractOutsideHandlers {
     /**
      * The ids of the elements in the color picker. Useful for composition.

package/dist/color-picker.types.d.ts

@@ -4,7 +4,7 @@ import { Service, EventObject, Machine } from '@zag-js/core';
 import { InteractOutsideHandlers } from '@zag-js/dismissable';
 import { PositioningOptions } from '@zag-js/popper';
 export { PositioningOptions } from '@zag-js/popper';
-import { RequiredBy, CommonProperties, DirectionProperty, Partial, Orientation, PropTypes } from '@zag-js/types';
+import { RequiredBy, CommonProperties, DirectionProperty, Orientation, PropTypes } from '@zag-js/types';
 
 type ExtendedColorChannel = ColorChannel | "hex" | "css";
 interface EyeDropper {
@@ -32,23 +32,23 @@ interface OpenChangeDetails {
 interface FormatChangeDetails {
     format: ColorFormat;
 }
-type ElementIds = Partial<{
-    root: string;
-    control: string;
-    trigger: string;
-    label: string;
-    input: string;
-    hiddenInput: string;
-    content: string;
-    area: string;
-    areaGradient: string;
-    positioner: string;
-    formatSelect: string;
-    areaThumb: string;
-    channelInput: (id: string) => string;
-    channelSliderTrack: (id: ColorChannel) => string;
-    channelSliderThumb: (id: ColorChannel) => string;
-}>;
+interface ElementIds {
+    root?: string | undefined;
+    control?: string | undefined;
+    trigger?: string | undefined;
+    label?: string | undefined;
+    input?: string | undefined;
+    hiddenInput?: string | undefined;
+    content?: string | undefined;
+    area?: string | undefined;
+    areaGradient?: string | undefined;
+    positioner?: string | undefined;
+    formatSelect?: string | undefined;
+    areaThumb?: string | undefined;
+    channelInput?: ((id: string) => string) | undefined;
+    channelSliderTrack?: ((id: ColorChannel) => string) | undefined;
+    channelSliderThumb?: ((id: ColorChannel) => string) | undefined;
+}
 interface ColorPickerProps extends CommonProperties, DirectionProperty, InteractOutsideHandlers {
     /**
      * The ids of the elements in the color picker. Useful for composition.

package/dist/utils/get-channel-display-color.d.mts

@@ -1,5 +1,6 @@
+import * as _zag_js_color_utils from '@zag-js/color-utils';
 import { Color, ColorChannel } from '@zag-js/color-utils';
 
-declare function getChannelDisplayColor(color: Color, channel: ColorChannel): Color;
+declare function getChannelDisplayColor(color: Color, channel: ColorChannel): _zag_js_color_utils.ColorType;
 
 export { getChannelDisplayColor };

package/dist/utils/get-channel-display-color.d.ts

@@ -1,5 +1,6 @@
+import * as _zag_js_color_utils from '@zag-js/color-utils';
 import { Color, ColorChannel } from '@zag-js/color-utils';
 
-declare function getChannelDisplayColor(color: Color, channel: ColorChannel): Color;
+declare function getChannelDisplayColor(color: Color, channel: ColorChannel): _zag_js_color_utils.ColorType;
 
 export { getChannelDisplayColor };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/color-picker",
-  "version": "1.43.2",
+  "version": "1.44.0",
   "description": "Core logic for the color-picker widget implemented as a state machine",
   "keywords": [
     "js",
@@ -30,14 +30,14 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/core": "1.43.2",
-    "@zag-js/anatomy": "1.43.2",
-    "@zag-js/dom-query": "1.43.2",
-    "@zag-js/dismissable": "1.43.2",
-    "@zag-js/utils": "1.43.2",
-    "@zag-js/color-utils": "1.43.2",
-    "@zag-js/popper": "1.43.2",
-    "@zag-js/types": "1.43.2"
+    "@zag-js/core": "1.44.0",
+    "@zag-js/anatomy": "1.44.0",
+    "@zag-js/dom-query": "1.44.0",
+    "@zag-js/dismissable": "1.44.0",
+    "@zag-js/utils": "1.44.0",
+    "@zag-js/color-utils": "1.44.0",
+    "@zag-js/popper": "1.44.0",
+    "@zag-js/types": "1.44.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0"