@zag-js/color-picker 1.31.1 → 1.33.0

package/dist/index.js

@@ -848,12 +848,19 @@ function prefixHex(value) {
 
 // src/color-picker.machine.ts
 var { and } = core.createGuards();
+var hashObject = (obj) => {
+  let hash = "";
+  for (const key in obj) hash += `${key}:${obj[key] ?? ""};`;
+  return hash;
+};
+var DEFAULT_COLOR = parse("#000000");
 var machine = core.createMachine({
   props({ props: props2 }) {
+    const color = props2.value ?? props2.defaultValue ?? DEFAULT_COLOR;
     return {
       dir: "ltr",
-      defaultValue: parse("#000000"),
-      defaultFormat: "rgba",
+      defaultValue: DEFAULT_COLOR,
+      defaultFormat: color.getFormat(),
       openAutoFocus: true,
       ...props2,
       positioning: {
@@ -872,15 +879,15 @@ var machine = core.createMachine({
         defaultValue: prop("defaultValue"),
         value: prop("value"),
         isEqual(a, b) {
-          return a.toString("css") === b?.toString("css");
+          return b != null && a.isEqual(b);
         },
         hash(a) {
-          return a.toString("css");
+          return hashObject(a.toJSON());
         },
         onChange(value) {
           const ctx = getContext();
-          const valueAsString = value.toString(ctx.get("format"));
-          prop("onValueChange")?.({ value, valueAsString });
+          const format = ctx.get("format");
+          prop("onValueChange")?.({ value, valueAsString: value.toString(format) });
         }
       })),
       format: bindable(() => ({
@@ -916,7 +923,7 @@ var machine = core.createMachine({
       action(["syncInputElements", "dispatchChangeEvent"]);
     });
     track([() => context.get("format")], () => {
-      action(["syncFormatSelectElement"]);
+      action(["syncFormatSelectElement", "syncValueWithFormat"]);
     });
     track([() => prop("open")], () => {
       action(["toggleVisibility"]);
@@ -1421,6 +1428,12 @@ var machine = core.createMachine({
       syncFormatSelectElement({ context, scope }) {
         syncFormatSelect(scope, context.get("format"));
       },
+      syncValueWithFormat({ context }) {
+        const value = context.get("value");
+        const newValue = value.toFormat(context.get("format"));
+        if (newValue.isEqual(value)) return;
+        context.set("value", newValue);
+      },
       invokeOnOpen({ prop, context }) {
         if (prop("inline")) return;
         prop("onOpenChange")?.({ open: true, value: context.get("value") });

package/dist/index.mjs

@@ -846,12 +846,19 @@ function prefixHex(value) {
 
 // src/color-picker.machine.ts
 var { and } = createGuards();
+var hashObject = (obj) => {
+  let hash = "";
+  for (const key in obj) hash += `${key}:${obj[key] ?? ""};`;
+  return hash;
+};
+var DEFAULT_COLOR = parse("#000000");
 var machine = createMachine({
   props({ props: props2 }) {
+    const color = props2.value ?? props2.defaultValue ?? DEFAULT_COLOR;
     return {
       dir: "ltr",
-      defaultValue: parse("#000000"),
-      defaultFormat: "rgba",
+      defaultValue: DEFAULT_COLOR,
+      defaultFormat: color.getFormat(),
       openAutoFocus: true,
       ...props2,
       positioning: {
@@ -870,15 +877,15 @@ var machine = createMachine({
         defaultValue: prop("defaultValue"),
         value: prop("value"),
         isEqual(a, b) {
-          return a.toString("css") === b?.toString("css");
+          return b != null && a.isEqual(b);
         },
         hash(a) {
-          return a.toString("css");
+          return hashObject(a.toJSON());
         },
         onChange(value) {
           const ctx = getContext();
-          const valueAsString = value.toString(ctx.get("format"));
-          prop("onValueChange")?.({ value, valueAsString });
+          const format = ctx.get("format");
+          prop("onValueChange")?.({ value, valueAsString: value.toString(format) });
         }
       })),
       format: bindable(() => ({
@@ -914,7 +921,7 @@ var machine = createMachine({
       action(["syncInputElements", "dispatchChangeEvent"]);
     });
     track([() => context.get("format")], () => {
-      action(["syncFormatSelectElement"]);
+      action(["syncFormatSelectElement", "syncValueWithFormat"]);
     });
     track([() => prop("open")], () => {
       action(["toggleVisibility"]);
@@ -1419,6 +1426,12 @@ var machine = createMachine({
       syncFormatSelectElement({ context, scope }) {
         syncFormatSelect(scope, context.get("format"));
       },
+      syncValueWithFormat({ context }) {
+        const value = context.get("value");
+        const newValue = value.toFormat(context.get("format"));
+        if (newValue.isEqual(value)) return;
+        context.set("value", newValue);
+      },
       invokeOnOpen({ prop, context }) {
         if (prop("inline")) return;
         prop("onOpenChange")?.({ open: true, value: context.get("value") });

package/package.json

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