@zag-js/number-input 0.16.0 → 0.18.0

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import * as _zag_js_anatomy from '@zag-js/anatomy';
-import { PropTypes, RequiredBy, DirectionProperty, CommonProperties, Context, NormalizeProps } from '@zag-js/types';
+import { RequiredBy, PropTypes, DirectionProperty, CommonProperties, Context, NormalizeProps } from '@zag-js/types';
 import * as _zag_js_core from '@zag-js/core';
 import { StateMachine } from '@zag-js/core';
 
@@ -156,67 +156,6 @@ type PublicContext = DirectionProperty & CommonProperties & {
      */
     spinOnPress?: boolean;
 };
-type PublicApi<T extends PropTypes = PropTypes> = {
-    /**
-     * Whether the input is focused.
-     */
-    isFocused: boolean;
-    /**
-     * Whether the input is invalid.
-     */
-    isInvalid: boolean;
-    /**
-     * Whether the input value is empty.
-     */
-    isValueEmpty: boolean;
-    /**
-     * The formatted value of the input.
-     */
-    value: string;
-    /**
-     * The value of the input as a number.
-     */
-    valueAsNumber: number;
-    /**
-     * Function to set the value of the input.
-     */
-    setValue(value: string | number): void;
-    /**
-     * Function to clear the value of the input.
-     */
-    clearValue(): void;
-    /**
-     * Function to increment the value of the input by the step.
-     */
-    increment(): void;
-    /**
-     * Function to decrement the value of the input by the step.
-     */
-    decrement(): void;
-    /**
-     * Function to set the value of the input to the max.
-     */
-    setToMax(): void;
-    /**
-     * Function to set the value of the input to the min.
-     */
-    setToMin(): void;
-    /**
-     * Function to focus the input.
-     */
-    focus(): void;
-    /**
-     * Function to blur the input.
-     */
-    blur(): void;
-    rootProps: T["element"];
-    labelProps: T["label"];
-    controlProps: T["element"];
-    inputProps: T["input"];
-    decrementTriggerProps: T["button"];
-    incrementTriggerProps: T["button"];
-    scrubberProps: T["element"];
-};
 type UserDefinedContext = RequiredBy<PublicContext, "id">;
 type ComputedContext = Readonly<{
     /**
@@ -278,9 +217,70 @@ type MachineState = {
 };
 type State = StateMachine.State<MachineContext, MachineState>;
 type Send = StateMachine.Send<StateMachine.AnyEventObject>;
+type MachineApi<T extends PropTypes = PropTypes> = {
+    /**
+     * Whether the input is focused.
+     */
+    isFocused: boolean;
+    /**
+     * Whether the input is invalid.
+     */
+    isInvalid: boolean;
+    /**
+     * Whether the input value is empty.
+     */
+    isValueEmpty: boolean;
+    /**
+     * The formatted value of the input.
+     */
+    value: string;
+    /**
+     * The value of the input as a number.
+     */
+    valueAsNumber: number;
+    /**
+     * Function to set the value of the input.
+     */
+    setValue(value: string | number): void;
+    /**
+     * Function to clear the value of the input.
+     */
+    clearValue(): void;
+    /**
+     * Function to increment the value of the input by the step.
+     */
+    increment(): void;
+    /**
+     * Function to decrement the value of the input by the step.
+     */
+    decrement(): void;
+    /**
+     * Function to set the value of the input to the max.
+     */
+    setToMax(): void;
+    /**
+     * Function to set the value of the input to the min.
+     */
+    setToMin(): void;
+    /**
+     * Function to focus the input.
+     */
+    focus(): void;
+    /**
+     * Function to blur the input.
+     */
+    blur(): void;
+    rootProps: T["element"];
+    labelProps: T["label"];
+    controlProps: T["element"];
+    inputProps: T["input"];
+    decrementTriggerProps: T["button"];
+    incrementTriggerProps: T["button"];
+    scrubberProps: T["element"];
+};
 
-declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): PublicApi<T>;
+declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
 
 declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
 
-export { UserDefinedContext as Context, PublicApi, anatomy, connect, machine };
+export { MachineApi as Api, UserDefinedContext as Context, anatomy, connect, machine };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as _zag_js_anatomy from '@zag-js/anatomy';
-import { PropTypes, RequiredBy, DirectionProperty, CommonProperties, Context, NormalizeProps } from '@zag-js/types';
+import { RequiredBy, PropTypes, DirectionProperty, CommonProperties, Context, NormalizeProps } from '@zag-js/types';
 import * as _zag_js_core from '@zag-js/core';
 import { StateMachine } from '@zag-js/core';
 
@@ -156,67 +156,6 @@ type PublicContext = DirectionProperty & CommonProperties & {
      */
     spinOnPress?: boolean;
 };
-type PublicApi<T extends PropTypes = PropTypes> = {
-    /**
-     * Whether the input is focused.
-     */
-    isFocused: boolean;
-    /**
-     * Whether the input is invalid.
-     */
-    isInvalid: boolean;
-    /**
-     * Whether the input value is empty.
-     */
-    isValueEmpty: boolean;
-    /**
-     * The formatted value of the input.
-     */
-    value: string;
-    /**
-     * The value of the input as a number.
-     */
-    valueAsNumber: number;
-    /**
-     * Function to set the value of the input.
-     */
-    setValue(value: string | number): void;
-    /**
-     * Function to clear the value of the input.
-     */
-    clearValue(): void;
-    /**
-     * Function to increment the value of the input by the step.
-     */
-    increment(): void;
-    /**
-     * Function to decrement the value of the input by the step.
-     */
-    decrement(): void;
-    /**
-     * Function to set the value of the input to the max.
-     */
-    setToMax(): void;
-    /**
-     * Function to set the value of the input to the min.
-     */
-    setToMin(): void;
-    /**
-     * Function to focus the input.
-     */
-    focus(): void;
-    /**
-     * Function to blur the input.
-     */
-    blur(): void;
-    rootProps: T["element"];
-    labelProps: T["label"];
-    controlProps: T["element"];
-    inputProps: T["input"];
-    decrementTriggerProps: T["button"];
-    incrementTriggerProps: T["button"];
-    scrubberProps: T["element"];
-};
 type UserDefinedContext = RequiredBy<PublicContext, "id">;
 type ComputedContext = Readonly<{
     /**
@@ -278,9 +217,70 @@ type MachineState = {
 };
 type State = StateMachine.State<MachineContext, MachineState>;
 type Send = StateMachine.Send<StateMachine.AnyEventObject>;
+type MachineApi<T extends PropTypes = PropTypes> = {
+    /**
+     * Whether the input is focused.
+     */
+    isFocused: boolean;
+    /**
+     * Whether the input is invalid.
+     */
+    isInvalid: boolean;
+    /**
+     * Whether the input value is empty.
+     */
+    isValueEmpty: boolean;
+    /**
+     * The formatted value of the input.
+     */
+    value: string;
+    /**
+     * The value of the input as a number.
+     */
+    valueAsNumber: number;
+    /**
+     * Function to set the value of the input.
+     */
+    setValue(value: string | number): void;
+    /**
+     * Function to clear the value of the input.
+     */
+    clearValue(): void;
+    /**
+     * Function to increment the value of the input by the step.
+     */
+    increment(): void;
+    /**
+     * Function to decrement the value of the input by the step.
+     */
+    decrement(): void;
+    /**
+     * Function to set the value of the input to the max.
+     */
+    setToMax(): void;
+    /**
+     * Function to set the value of the input to the min.
+     */
+    setToMin(): void;
+    /**
+     * Function to focus the input.
+     */
+    focus(): void;
+    /**
+     * Function to blur the input.
+     */
+    blur(): void;
+    rootProps: T["element"];
+    labelProps: T["label"];
+    controlProps: T["element"];
+    inputProps: T["input"];
+    decrementTriggerProps: T["button"];
+    incrementTriggerProps: T["button"];
+    scrubberProps: T["element"];
+};
 
-declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): PublicApi<T>;
+declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
 
 declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
 
-export { UserDefinedContext as Context, PublicApi, anatomy, connect, machine };
+export { MachineApi as Api, UserDefinedContext as Context, anatomy, connect, machine };

package/dist/index.js

@@ -378,7 +378,6 @@ function connect(state, send, normalize) {
 var import_core = require("@zag-js/core");
 var import_dom_event3 = require("@zag-js/dom-event");
 var import_dom_query3 = require("@zag-js/dom-query");
-var import_form_utils = require("@zag-js/form-utils");
 var import_mutation_observer = require("@zag-js/mutation-observer");
 var import_number_utils4 = require("@zag-js/number-utils");
 var import_utils = require("@zag-js/utils");
@@ -424,21 +423,15 @@ function machine(userContext) {
         formattedValue: (ctx2) => ctx2.format?.(ctx2.value).toString() ?? ctx2.value
       },
       watch: {
-        value: ["invokeOnChange", "dispatchChangeEvent"],
+        value: ["syncInputElement"],
         isOutOfRange: ["invokeOnInvalid"],
         scrubberCursorPoint: ["setVirtualCursorPosition"]
       },
       entry: ["syncInputValue"],
       on: {
-        SET_VALUE: [
-          {
-            guard: "clampOnBlur",
-            actions: ["setValue", "clampValue", "setHintToSet"]
-          },
-          {
-            actions: ["setValue", "setHintToSet"]
-          }
-        ],
+        SET_VALUE: {
+          actions: ["setValue", "clampValue", "setHintToSet"]
+        },
         CLEAR_VALUE: {
           actions: ["clearValue"]
         },
@@ -451,17 +444,19 @@ function machine(userContext) {
       },
       states: {
         idle: {
-          exit: "invokeOnFocus",
           on: {
             PRESS_DOWN: {
               target: "before:spin",
-              actions: ["focusInput", "setHint"]
+              actions: ["focusInput", "invokeOnFocus", "setHint"]
             },
             PRESS_DOWN_SCRUBBER: {
               target: "scrubbing",
-              actions: ["focusInput", "setHint", "setCursorPoint"]
+              actions: ["focusInput", "invokeOnFocus", "setHint", "setCursorPoint"]
             },
-            FOCUS: "focused"
+            FOCUS: {
+              target: "focused",
+              actions: ["focusInput", "invokeOnFocus"]
+            }
           }
         },
         focused: {
@@ -651,35 +646,38 @@ function machine(userContext) {
         focusInput(ctx2) {
           if (!ctx2.focusInputOnChange)
             return;
-          const input = dom.getInputEl(ctx2);
-          (0, import_dom_query3.raf)(() => input?.focus());
+          const inputEl = dom.getInputEl(ctx2);
+          (0, import_dom_query3.raf)(() => {
+            inputEl?.focus();
+          });
         },
         increment(ctx2, evt) {
-          ctx2.value = utils.increment(ctx2, evt.step);
+          set.value(ctx2, utils.increment(ctx2, evt.step));
         },
         decrement(ctx2, evt) {
-          ctx2.value = utils.decrement(ctx2, evt.step);
+          set.value(ctx2, utils.decrement(ctx2, evt.step));
         },
         clampValue(ctx2) {
-          ctx2.value = utils.clamp(ctx2);
+          set.value(ctx2, utils.clamp(ctx2));
         },
         roundValue(ctx2) {
-          if (ctx2.value !== "") {
-            ctx2.value = utils.round(ctx2);
-          }
+          if (ctx2.value === "")
+            return;
+          set.value(ctx2, utils.round(ctx2));
         },
         setValue(ctx2, evt) {
-          const value = evt.target?.value ?? evt.value;
-          ctx2.value = utils.sanitize(ctx2, utils.parse(ctx2, value.toString()));
+          let value = evt.target?.value ?? evt.value;
+          value = utils.sanitize(ctx2, utils.parse(ctx2, value.toString()));
+          set.value(ctx2, value);
         },
         clearValue(ctx2) {
-          ctx2.value = "";
+          set.value(ctx2, "");
         },
         setToMax(ctx2) {
-          ctx2.value = ctx2.max.toString();
+          set.value(ctx2, ctx2.max.toString());
         },
         setToMin(ctx2) {
-          ctx2.value = ctx2.min.toString();
+          set.value(ctx2, ctx2.min.toString());
         },
         setHint(ctx2, evt) {
           ctx2.hint = evt.hint;
@@ -690,12 +688,6 @@ function machine(userContext) {
         setHintToSet(ctx2) {
           ctx2.hint = "set";
         },
-        invokeOnChange(ctx2) {
-          ctx2.onChange?.({
-            value: ctx2.value,
-            valueAsNumber: ctx2.valueAsNumber
-          });
-        },
         invokeOnFocus(ctx2, evt) {
           let srcElement = null;
           if (evt.type === "PRESS_DOWN") {
@@ -712,10 +704,7 @@ function machine(userContext) {
           });
         },
         invokeOnBlur(ctx2) {
-          ctx2.onBlur?.({
-            value: ctx2.value,
-            valueAsNumber: ctx2.valueAsNumber
-          });
+          ctx2.onBlur?.({ value: ctx2.value, valueAsNumber: ctx2.valueAsNumber });
         },
         invokeOnInvalid(ctx2) {
           if (!ctx2.isOutOfRange)
@@ -727,13 +716,16 @@ function machine(userContext) {
             valueAsNumber: ctx2.valueAsNumber
           });
         },
-        // sync input value, in event it was set from form libraries via `ref`, `bind:this`, etc.
+        syncInputElement(ctx2) {
+          const inputEl = dom.getInputEl(ctx2);
+          dom.setValue(inputEl, ctx2.formattedValue);
+        },
         syncInputValue(ctx2) {
-          const input = dom.getInputEl(ctx2);
-          if (!input || input.value == ctx2.value)
+          const inputEl = dom.getInputEl(ctx2);
+          if (!inputEl || inputEl.value == ctx2.value)
             return;
-          const value = utils.parse(ctx2, input.value);
-          ctx2.value = utils.sanitize(ctx2, value);
+          const value = utils.parse(ctx2, inputEl.value);
+          set.value(ctx2, utils.sanitize(ctx2, value));
         },
         setCursorPoint(ctx2, evt) {
           ctx2.scrubberCursorPoint = evt.point;
@@ -747,15 +739,22 @@ function machine(userContext) {
             return;
           const { x, y } = ctx2.scrubberCursorPoint;
           cursor.style.transform = `translate3d(${x}px, ${y}px, 0px)`;
-        },
-        dispatchChangeEvent(ctx2) {
-          const inputEl = dom.getInputEl(ctx2);
-          (0, import_form_utils.dispatchInputValueEvent)(inputEl, { value: ctx2.formattedValue });
         }
       }
     }
   );
 }
+var invoke = {
+  onChange: (ctx) => {
+    ctx.onChange?.({ value: ctx.value, valueAsNumber: ctx.valueAsNumber });
+  }
+};
+var set = {
+  value: (ctx, value) => {
+    ctx.value = value;
+    invoke.onChange(ctx);
+  }
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   anatomy,