@zag-js/color-picker 1.0.0 → 1.0.2

package/dist/index.d.mts

@@ -5,7 +5,7 @@ import { CommonProperties, DirectionProperty, Orientation, PropTypes, RequiredBy
 import { Color, ColorFormat, ColorChannel, ColorAxes } from '@zag-js/color-utils';
 export { Color, ColorAxes, ColorChannel, ColorFormat, ColorType } from '@zag-js/color-utils';
 import * as _zag_js_core from '@zag-js/core';
-import { Service, EventObject } from '@zag-js/core';
+import { Service, Machine, EventObject } from '@zag-js/core';
 import { PositioningOptions } from '@zag-js/popper';
 export { PositioningOptions } from '@zag-js/popper';
 
@@ -170,6 +170,7 @@ type ColorPickerSchema = {
     guard: string;
 };
 type ColorPickerService = Service<ColorPickerSchema>;
+type ColorPickerMachine = Machine<ColorPickerSchema>;
 interface ChannelProps {
     channel: ColorChannel;
     orientation?: Orientation | undefined;
@@ -297,7 +298,7 @@ interface ColorPickerApi<T extends PropTypes = PropTypes> {
 
 declare function connect<T extends PropTypes>(service: ColorPickerService, normalize: NormalizeProps<T>): ColorPickerApi<T>;
 
-declare const machine: _zag_js_core.MachineConfig<ColorPickerSchema>;
+declare const machine: _zag_js_core.Machine<ColorPickerSchema>;
 
 declare const parse: (colorString: string) => Color;
 
@@ -314,4 +315,4 @@ declare const splitSwatchProps: <Props extends SwatchProps>(props: Props) => [Sw
 declare const transparencyGridProps: "size"[];
 declare const splitTransparencyGridProps: <Props extends TransparencyGridProps>(props: Props) => [TransparencyGridProps, Omit<Props, "size">];
 
-export { type ColorPickerApi as Api, type AreaProps, type ChannelInputProps, type ChannelProps, type ChannelSliderProps, type ElementIds, type FormatChangeDetails, type OpenChangeDetails, type ColorPickerProps as Props, type ColorPickerService as Service, type SwatchProps, type SwatchTriggerProps, type SwatchTriggerState, type TransparencyGridProps, type ValueChangeDetails, anatomy, areaProps, channelProps, connect, machine, parse, props, splitAreaProps, splitChannelProps, splitProps, splitSwatchProps, splitSwatchTriggerProps, splitTransparencyGridProps, swatchProps, swatchTriggerProps, transparencyGridProps };
+export { type ColorPickerApi as Api, type AreaProps, type ChannelInputProps, type ChannelProps, type ChannelSliderProps, type ElementIds, type FormatChangeDetails, type ColorPickerMachine as Machine, type OpenChangeDetails, type ColorPickerProps as Props, type ColorPickerService as Service, type SwatchProps, type SwatchTriggerProps, type SwatchTriggerState, type TransparencyGridProps, type ValueChangeDetails, anatomy, areaProps, channelProps, connect, machine, parse, props, splitAreaProps, splitChannelProps, splitProps, splitSwatchProps, splitSwatchTriggerProps, splitTransparencyGridProps, swatchProps, swatchTriggerProps, transparencyGridProps };

package/dist/index.d.ts

@@ -5,7 +5,7 @@ import { CommonProperties, DirectionProperty, Orientation, PropTypes, RequiredBy
 import { Color, ColorFormat, ColorChannel, ColorAxes } from '@zag-js/color-utils';
 export { Color, ColorAxes, ColorChannel, ColorFormat, ColorType } from '@zag-js/color-utils';
 import * as _zag_js_core from '@zag-js/core';
-import { Service, EventObject } from '@zag-js/core';
+import { Service, Machine, EventObject } from '@zag-js/core';
 import { PositioningOptions } from '@zag-js/popper';
 export { PositioningOptions } from '@zag-js/popper';
 
@@ -170,6 +170,7 @@ type ColorPickerSchema = {
     guard: string;
 };
 type ColorPickerService = Service<ColorPickerSchema>;
+type ColorPickerMachine = Machine<ColorPickerSchema>;
 interface ChannelProps {
     channel: ColorChannel;
     orientation?: Orientation | undefined;
@@ -297,7 +298,7 @@ interface ColorPickerApi<T extends PropTypes = PropTypes> {
 
 declare function connect<T extends PropTypes>(service: ColorPickerService, normalize: NormalizeProps<T>): ColorPickerApi<T>;
 
-declare const machine: _zag_js_core.MachineConfig<ColorPickerSchema>;
+declare const machine: _zag_js_core.Machine<ColorPickerSchema>;
 
 declare const parse: (colorString: string) => Color;
 
@@ -314,4 +315,4 @@ declare const splitSwatchProps: <Props extends SwatchProps>(props: Props) => [Sw
 declare const transparencyGridProps: "size"[];
 declare const splitTransparencyGridProps: <Props extends TransparencyGridProps>(props: Props) => [TransparencyGridProps, Omit<Props, "size">];
 
-export { type ColorPickerApi as Api, type AreaProps, type ChannelInputProps, type ChannelProps, type ChannelSliderProps, type ElementIds, type FormatChangeDetails, type OpenChangeDetails, type ColorPickerProps as Props, type ColorPickerService as Service, type SwatchProps, type SwatchTriggerProps, type SwatchTriggerState, type TransparencyGridProps, type ValueChangeDetails, anatomy, areaProps, channelProps, connect, machine, parse, props, splitAreaProps, splitChannelProps, splitProps, splitSwatchProps, splitSwatchTriggerProps, splitTransparencyGridProps, swatchProps, swatchTriggerProps, transparencyGridProps };
+export { type ColorPickerApi as Api, type AreaProps, type ChannelInputProps, type ChannelProps, type ChannelSliderProps, type ElementIds, type FormatChangeDetails, type ColorPickerMachine as Machine, type OpenChangeDetails, type ColorPickerProps as Props, type ColorPickerService as Service, type SwatchProps, type SwatchTriggerProps, type SwatchTriggerState, type TransparencyGridProps, type ValueChangeDetails, anatomy, areaProps, channelProps, connect, machine, parse, props, splitAreaProps, splitChannelProps, splitProps, splitSwatchProps, splitSwatchTriggerProps, splitTransparencyGridProps, swatchProps, swatchTriggerProps, transparencyGridProps };

package/dist/index.js

@@ -835,7 +835,7 @@ var machine = core.createMachine({
     const open = prop("open") || prop("defaultOpen");
     return open ? "open" : "idle";
   },
-  context({ prop, bindable, getContext, scope }) {
+  context({ prop, bindable, getContext }) {
     return {
       value: bindable(() => ({
         defaultValue: prop("defaultValue"),
@@ -850,7 +850,6 @@ var machine = core.createMachine({
           const ctx = getContext();
           const valueAsString = value.toString(ctx.get("format"));
           prop("onValueChange")?.({ value, valueAsString });
-          domQuery.dispatchInputValueEvent(getHiddenInputEl(scope), { value: valueAsString });
         }
       })),
       format: bindable(() => ({
@@ -883,7 +882,7 @@ var machine = core.createMachine({
   effects: ["trackFormControl"],
   watch({ prop, context, action, track }) {
     track([() => context.hash("value")], () => {
-      action(["syncInputElements"]);
+      action(["syncInputElements", "dispatchChangeEvent"]);
     });
     track([() => context.get("format")], () => {
       action(["syncFormatSelectElement"]);
@@ -1280,8 +1279,11 @@ var machine = core.createMachine({
       setFormat({ context, event }) {
         context.set("format", event.format);
       },
+      dispatchChangeEvent({ scope, computed }) {
+        domQuery.dispatchInputValueEvent(getHiddenInputEl(scope), { value: computed("valueAsString") });
+      },
       syncInputElements({ context, scope }) {
-        syncInputs(scope, context.get("value"));
+        syncChannelInputs(scope, context.get("value"));
       },
       invokeOnChangeEnd({ context, prop, computed }) {
         prop("onValueChangeEnd")?.({
@@ -1307,7 +1309,7 @@ var machine = core.createMachine({
           const valueAsNumber = Number.isNaN(value) ? current.getChannelValue(channel) : value;
           color = current.withChannelValue(channel, valueAsNumber);
         }
-        syncInputs(scope, context.get("value"), color);
+        syncChannelInputs(scope, context.get("value"), color);
         context.set("value", color);
       },
       incrementChannel({ context, event }) {
@@ -1390,7 +1392,7 @@ var machine = core.createMachine({
     }
   }
 });
-function syncInputs(scope, currentValue, nextValue) {
+function syncChannelInputs(scope, currentValue, nextValue) {
   const channelInputEls = getChannelInputEls(scope);
   domQuery.raf(() => {
     channelInputEls.forEach((inputEl) => {

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import { createAnatomy } from '@zag-js/anatomy';
 import { parseColor, normalizeColor, getColorAreaGradient } from '@zag-js/color-utils';
-import { dispatchInputValueEvent, trackFormControl, trackPointerMove, disableTextSelection, raf, getInitialFocus, setElementValue, getRelativePoint, queryAll, dataAttr, query, isLeftClick, isModifierKey, getEventPoint, getEventStep, getEventKey, visuallyHiddenStyle } from '@zag-js/dom-query';
+import { trackFormControl, trackPointerMove, disableTextSelection, dispatchInputValueEvent, raf, getInitialFocus, setElementValue, getRelativePoint, queryAll, dataAttr, query, isLeftClick, isModifierKey, getEventPoint, getEventStep, getEventKey, visuallyHiddenStyle } from '@zag-js/dom-query';
 import { getPlacement, getPlacementStyles } from '@zag-js/popper';
 import { createGuards, createMachine } from '@zag-js/core';
 import { trackDismissableElement } from '@zag-js/dismissable';
@@ -833,7 +833,7 @@ var machine = createMachine({
     const open = prop("open") || prop("defaultOpen");
     return open ? "open" : "idle";
   },
-  context({ prop, bindable, getContext, scope }) {
+  context({ prop, bindable, getContext }) {
     return {
       value: bindable(() => ({
         defaultValue: prop("defaultValue"),
@@ -848,7 +848,6 @@ var machine = createMachine({
           const ctx = getContext();
           const valueAsString = value.toString(ctx.get("format"));
           prop("onValueChange")?.({ value, valueAsString });
-          dispatchInputValueEvent(getHiddenInputEl(scope), { value: valueAsString });
         }
       })),
       format: bindable(() => ({
@@ -881,7 +880,7 @@ var machine = createMachine({
   effects: ["trackFormControl"],
   watch({ prop, context, action, track }) {
     track([() => context.hash("value")], () => {
-      action(["syncInputElements"]);
+      action(["syncInputElements", "dispatchChangeEvent"]);
     });
     track([() => context.get("format")], () => {
       action(["syncFormatSelectElement"]);
@@ -1278,8 +1277,11 @@ var machine = createMachine({
       setFormat({ context, event }) {
         context.set("format", event.format);
       },
+      dispatchChangeEvent({ scope, computed }) {
+        dispatchInputValueEvent(getHiddenInputEl(scope), { value: computed("valueAsString") });
+      },
       syncInputElements({ context, scope }) {
-        syncInputs(scope, context.get("value"));
+        syncChannelInputs(scope, context.get("value"));
       },
       invokeOnChangeEnd({ context, prop, computed }) {
         prop("onValueChangeEnd")?.({
@@ -1305,7 +1307,7 @@ var machine = createMachine({
           const valueAsNumber = Number.isNaN(value) ? current.getChannelValue(channel) : value;
           color = current.withChannelValue(channel, valueAsNumber);
         }
-        syncInputs(scope, context.get("value"), color);
+        syncChannelInputs(scope, context.get("value"), color);
         context.set("value", color);
       },
       incrementChannel({ context, event }) {
@@ -1388,7 +1390,7 @@ var machine = createMachine({
     }
   }
 });
-function syncInputs(scope, currentValue, nextValue) {
+function syncChannelInputs(scope, currentValue, nextValue) {
   const channelInputEls = getChannelInputEls(scope);
   raf(() => {
     channelInputEls.forEach((inputEl) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/color-picker",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "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.0.0",
-    "@zag-js/anatomy": "1.0.0",
-    "@zag-js/dom-query": "1.0.0",
-    "@zag-js/dismissable": "1.0.0",
-    "@zag-js/utils": "1.0.0",
-    "@zag-js/color-utils": "1.0.0",
-    "@zag-js/popper": "1.0.0",
-    "@zag-js/types": "1.0.0"
+    "@zag-js/core": "1.0.2",
+    "@zag-js/anatomy": "1.0.2",
+    "@zag-js/dom-query": "1.0.2",
+    "@zag-js/dismissable": "1.0.2",
+    "@zag-js/utils": "1.0.2",
+    "@zag-js/color-utils": "1.0.2",
+    "@zag-js/popper": "1.0.2",
+    "@zag-js/types": "1.0.2"
   },
   "devDependencies": {
     "clean-package": "2.2.0"