@zag-js/number-input 1.43.0 → 2.0.0-next.1

package/dist/number-input.machine.mjs

@@ -2,6 +2,7 @@
 import { memo, setup } from "@zag-js/core";
 import {
   addDomEvent,
+  isFirefox,
   isSafari,
   observeAttributes,
   raf,
@@ -16,7 +17,8 @@ import {
   incrementValue,
   isValueAtMax,
   isValueAtMin,
-  isValueWithinRange
+  isValueWithinRange,
+  snapValueToStep
 } from "@zag-js/utils";
 import { recordCursor, restoreCursor } from "./cursor.mjs";
 import * as dom from "./number-input.dom.mjs";
@@ -39,6 +41,9 @@ var machine = createMachine({
       min: Number.MIN_SAFE_INTEGER,
       max: Number.MAX_SAFE_INTEGER,
       spinOnPress: true,
+      scrubberPixelSensitivity: 2,
+      scrubberDirection: "horizontal",
+      snapOnStep: false,
       ...props,
       largeStep: props.largeStep ?? 10 * step,
       smallStep: props.smallStep ?? step / 10,
@@ -70,7 +75,10 @@ var machine = createMachine({
           return value ? `x:${value.x}, y:${value.y}` : "";
         }
       })),
-      fieldsetDisabled: bindable(() => ({ defaultValue: false }))
+      fieldsetDisabled: bindable(() => ({ defaultValue: false })),
+      cumulativeDelta: bindable(() => ({ defaultValue: 0 })),
+      isPointerLockSupported: bindable(() => ({ defaultValue: false })),
+      visualScale: bindable(() => ({ defaultValue: 1 }))
     };
   },
   computed: {
@@ -105,7 +113,7 @@ var machine = createMachine({
       action(["setVirtualCursorPosition"]);
     });
   },
-  effects: ["trackFormControl"],
+  effects: ["trackFormControl", "detectPointerLock"],
   on: {
     "VALUE.SET": {
       actions: ["setRawValue"]
@@ -228,22 +236,16 @@ var machine = createMachine({
     },
     scrubbing: {
       tags: ["focus"],
-      effects: ["activatePointerLock", "trackMousemove", "setupVirtualCursor", "preventTextSelection"],
+      effects: ["activatePointerLock", "trackMousemove", "preventTextSelection", "trackVisualViewport"],
+      entry: ["clearCumulativeDelta"],
       on: {
         "SCRUBBER.POINTER_UP": {
           target: "focused",
-          actions: ["focusInput", "clearCursorPoint"]
+          actions: ["focusInput", "clearCursorPoint", "clearCumulativeDelta"]
         },
-        "SCRUBBER.POINTER_MOVE": [
-          {
-            guard: "isIncrementHint",
-            actions: ["increment", "setCursorPoint"]
-          },
-          {
-            guard: "isDecrementHint",
-            actions: ["decrement", "setCursorPoint"]
-          }
-        ]
+        "SCRUBBER.POINTER_MOVE": {
+          actions: ["accumulateDelta", "setCursorPoint"]
+        }
       }
     }
   },
@@ -270,6 +272,9 @@ var machine = createMachine({
         }, 50);
         return () => clearInterval(id);
       },
+      detectPointerLock({ context }) {
+        context.set("isPointerLockSupported", !isSafari());
+      },
       trackFormControl({ context, scope }) {
         const inputEl = dom.getInputEl(scope);
         return trackFormControl(inputEl, {
@@ -281,12 +286,8 @@ var machine = createMachine({
           }
         });
       },
-      setupVirtualCursor({ context, scope }) {
-        const point = context.get("scrubberCursorPoint");
-        return dom.setupVirtualCursor(scope, point);
-      },
-      preventTextSelection({ scope }) {
-        return dom.preventTextSelection(scope);
+      preventTextSelection({ scope, prop }) {
+        return dom.preventTextSelection(scope, prop("scrubberDirection"));
       },
       trackButtonDisabled({ context, scope, send }) {
         const hint = context.get("hint");
@@ -312,21 +313,39 @@ var machine = createMachine({
         }
         return addDomEvent(inputEl, "wheel", onWheel, { passive: false });
       },
+      trackVisualViewport({ scope, context }) {
+        const vV = scope.getWin().visualViewport;
+        if (!vV) return;
+        function onResize() {
+          context.set("visualScale", vV.scale);
+        }
+        onResize();
+        return addDomEvent(vV, "resize", onResize);
+      },
       activatePointerLock({ scope }) {
         if (isSafari()) return;
-        return requestPointerLock(scope.getDoc());
+        const cleanup = requestPointerLock(scope.getDoc());
+        return () => {
+          if (isFirefox()) {
+            setTimeout(() => cleanup?.(), 20);
+          } else {
+            cleanup?.();
+          }
+        };
       },
-      trackMousemove({ scope, send, context, computed }) {
+      trackMousemove({ scope, send, context, computed, prop }) {
         const doc = scope.getDoc();
         function onMousemove(event) {
           const point = context.get("scrubberCursorPoint");
           const isRtl = computed("isRtl");
-          const value = dom.getMousemoveValue(scope, { point, isRtl, event });
-          if (!value.hint) return;
+          const direction = prop("scrubberDirection");
+          const teleportDistance = prop("scrubberTeleportDistance");
+          const value = dom.getMousemoveValue(scope, { point, isRtl, event, direction, teleportDistance });
           send({
             type: "SCRUBBER.POINTER_MOVE",
             hint: value.hint,
-            point: value.point
+            point: value.point,
+            delta: value.delta
           });
         }
         function onMouseup() {
@@ -345,11 +364,15 @@ var machine = createMachine({
       increment({ context, event, prop, computed }) {
         let nextValue = incrementValue(computed("valueAsNumber"), event.step ?? prop("step"));
         if (!prop("allowOverflow")) nextValue = clampValue(nextValue, prop("min"), prop("max"));
+        if (prop("snapOnStep"))
+          nextValue = snapValueToStep(nextValue, prop("min"), prop("max"), event.step ?? prop("step"));
         context.set("value", formatValue(nextValue, { computed, prop }));
       },
       decrement({ context, event, prop, computed }) {
         let nextValue = decrementValue(computed("valueAsNumber"), event.step ?? prop("step"));
         if (!prop("allowOverflow")) nextValue = clampValue(nextValue, prop("min"), prop("max"));
+        if (prop("snapOnStep"))
+          nextValue = snapValueToStep(nextValue, prop("min"), prop("max"), event.step ?? prop("step"));
         context.set("value", formatValue(nextValue, { computed, prop }));
       },
       setClampedValue({ context, prop, computed }) {
@@ -431,10 +454,31 @@ var machine = createMachine({
         context.set("scrubberCursorPoint", null);
       },
       setVirtualCursorPosition({ context, scope }) {
-        const cursorEl = dom.getCursorEl(scope);
+        const scrubberEl = dom.getScrubberEl(scope);
         const point = context.get("scrubberCursorPoint");
-        if (!cursorEl || !point) return;
-        cursorEl.style.transform = `translate3d(${point.x}px, ${point.y}px, 0px)`;
+        if (!scrubberEl || !point) return;
+        scrubberEl.style.setProperty("--scrubber-x", `${point.x}px`);
+        scrubberEl.style.setProperty("--scrubber-y", `${point.y}px`);
+      },
+      accumulateDelta({ context, event, prop, send }) {
+        const delta = event.delta ?? 0;
+        const newDelta = context.get("cumulativeDelta") + delta;
+        const sensitivity = prop("scrubberPixelSensitivity");
+        if (Math.abs(newDelta) >= sensitivity) {
+          const step = prop("step");
+          const hint = event.hint;
+          if (hint === "increment") {
+            send({ type: "VALUE.INCREMENT", step });
+          } else if (hint === "decrement") {
+            send({ type: "VALUE.DECREMENT", step });
+          }
+          context.set("cumulativeDelta", newDelta % sensitivity);
+        } else {
+          context.set("cumulativeDelta", newDelta);
+        }
+      },
+      clearCumulativeDelta({ context }) {
+        context.set("cumulativeDelta", 0);
       }
     }
   }

package/dist/number-input.props.js

@@ -52,7 +52,11 @@ var props = (0, import_types.createProps)()([
   "pattern",
   "required",
   "readOnly",
+  "scrubberDirection",
+  "scrubberPixelSensitivity",
+  "scrubberTeleportDistance",
   "smallStep",
+  "snapOnStep",
   "spinOnPress",
   "step",
   "translations",

package/dist/number-input.props.mjs

@@ -27,7 +27,11 @@ var props = createProps()([
   "pattern",
   "required",
   "readOnly",
+  "scrubberDirection",
+  "scrubberPixelSensitivity",
+  "scrubberTeleportDistance",
   "smallStep",
+  "snapOnStep",
   "spinOnPress",
   "step",
   "translations",

package/dist/number-input.types.d.mts

@@ -21,6 +21,7 @@ type ElementIds = Partial<{
     incrementTrigger: string;
     decrementTrigger: string;
     scrubber: string;
+    scrubberCursor: string;
 }>;
 interface IntlTranslations {
     /**
@@ -96,16 +97,6 @@ interface NumberInputProps extends LocaleProperties, CommonProperties {
      * @default 1
      */
     step?: number | undefined;
-    /**
-     * The amount to increment or decrement the value by when the `Shift` key is held.
-     * @default 10 * step
-     */
-    largeStep?: number | undefined;
-    /**
-     * The amount to increment or decrement the value by when the `Alt` key is held.
-     * @default step / 10
-     */
-    smallStep?: number | undefined;
     /**
      * Whether to allow mouse wheel to change the value
      */
@@ -160,8 +151,39 @@ interface NumberInputProps extends LocaleProperties, CommonProperties {
      * @default true
      */
     spinOnPress?: boolean | undefined;
+    /**
+     * Step value when Shift key is held (large increments).
+     * @default step * 10
+     */
+    largeStep?: number | undefined;
+    /**
+     * Step value when Alt/Option key is held (fine control).
+     * @default step * 0.1
+     */
+    smallStep?: number | undefined;
+    /**
+     * How many pixels the pointer must move to change the value by one step.
+     * Higher values mean more precise control. Lower values mean more sensitivity.
+     * @default 2
+     */
+    scrubberPixelSensitivity?: number | undefined;
+    /**
+     * Distance in pixels before the virtual cursor wraps around.
+     * When not set, the viewport bounds are used (default behavior).
+     */
+    scrubberTeleportDistance?: number | undefined;
+    /**
+     * The direction of scrubbing.
+     * @default "horizontal"
+     */
+    scrubberDirection?: "horizontal" | "vertical" | undefined;
+    /**
+     * Whether values snap to step multiples when scrubbing.
+     * @default false
+     */
+    snapOnStep?: boolean | undefined;
 }
-type PropsWithDefault = "dir" | "locale" | "focusInputOnChange" | "clampValueOnBlur" | "allowOverflow" | "inputMode" | "pattern" | "translations" | "step" | "largeStep" | "smallStep" | "spinOnPress" | "min" | "max";
+type PropsWithDefault = "dir" | "locale" | "focusInputOnChange" | "clampValueOnBlur" | "allowOverflow" | "inputMode" | "pattern" | "translations" | "step" | "largeStep" | "smallStep" | "spinOnPress" | "min" | "max" | "scrubberPixelSensitivity" | "scrubberDirection" | "snapOnStep";
 type ComputedContext = Readonly<{
     /**
      * The value of the input as a number
@@ -237,6 +259,18 @@ interface PrivateContext {
      * The value of the input
      */
     value: string;
+    /**
+     * The accumulated delta for pixel sensitivity tracking
+     */
+    cumulativeDelta: number;
+    /**
+     * Whether the browser supports pointer lock (false on Safari, false during SSR)
+     */
+    isPointerLockSupported: boolean;
+    /**
+     * The visual viewport scale (for pinch-zoom compensation on the cursor)
+     */
+    visualScale: number;
 }
 interface NumberInputSchema {
     state: "idle" | "focused" | "spinning" | "before:spin" | "scrubbing";
@@ -251,11 +285,63 @@ interface NumberInputSchema {
 }
 type NumberInputService = Service<NumberInputSchema>;
 type NumberInputMachine = Machine<NumberInputSchema>;
+interface RootState {
+    /**
+     * Whether the number input is disabled.
+     */
+    disabled: boolean;
+    /**
+     * Whether the number input is focused.
+     */
+    focused: boolean;
+    /**
+     * Whether the number input is invalid.
+     */
+    invalid: boolean;
+    /**
+     * Whether the number input is being scrubbed.
+     */
+    scrubbing: boolean;
+}
+interface InputState {
+    /**
+     * Whether the input is disabled.
+     */
+    disabled: boolean;
+    /**
+     * Whether the input is invalid.
+     */
+    invalid: boolean;
+    /**
+     * Whether the input is read-only.
+     */
+    readOnly: boolean;
+    /**
+     * Whether the input is being scrubbed.
+     */
+    scrubbing: boolean;
+}
+interface IncrementTriggerState {
+    /**
+     * Whether the increment trigger is disabled.
+     */
+    disabled: boolean;
+}
+interface DecrementTriggerState {
+    /**
+     * Whether the decrement trigger is disabled.
+     */
+    disabled: boolean;
+}
 interface NumberInputApi<T extends PropTypes = PropTypes> {
     /**
      * Whether the input is focused.
      */
     focused: boolean;
+    /**
+     * Whether the input is being scrubbed.
+     */
+    scrubbing: boolean;
     /**
      * Whether the input is invalid.
      */
@@ -300,14 +386,31 @@ interface NumberInputApi<T extends PropTypes = PropTypes> {
      * Function to focus the input.
      */
     focus: VoidFunction;
+    /**
+     * Returns the state of the root.
+     */
+    getRootState: () => RootState;
     getRootProps: () => T["element"];
     getLabelProps: () => T["label"];
     getControlProps: () => T["element"];
     getValueTextProps: () => T["element"];
+    /**
+     * Returns the state of the input.
+     */
+    getInputState: () => InputState;
     getInputProps: () => T["input"];
+    /**
+     * Returns the state of the decrement trigger.
+     */
+    getDecrementTriggerState: () => DecrementTriggerState;
     getDecrementTriggerProps: () => T["button"];
+    /**
+     * Returns the state of the increment trigger.
+     */
+    getIncrementTriggerState: () => IncrementTriggerState;
     getIncrementTriggerProps: () => T["button"];
     getScrubberProps: () => T["element"];
+    getScrubberCursorProps: () => T["element"];
 }
 
-export type { ElementIds, FocusChangeDetails, HintValue, InputMode, IntlTranslations, NumberInputApi, NumberInputMachine, NumberInputProps, NumberInputSchema, NumberInputService, ValidityState, ValueChangeDetails, ValueInvalidDetails };
+export type { DecrementTriggerState, ElementIds, FocusChangeDetails, HintValue, IncrementTriggerState, InputMode, InputState, IntlTranslations, NumberInputApi, NumberInputMachine, NumberInputProps, NumberInputSchema, NumberInputService, RootState, ValidityState, ValueChangeDetails, ValueInvalidDetails };

package/dist/number-input.types.d.ts

@@ -21,6 +21,7 @@ type ElementIds = Partial<{
     incrementTrigger: string;
     decrementTrigger: string;
     scrubber: string;
+    scrubberCursor: string;
 }>;
 interface IntlTranslations {
     /**
@@ -96,16 +97,6 @@ interface NumberInputProps extends LocaleProperties, CommonProperties {
      * @default 1
      */
     step?: number | undefined;
-    /**
-     * The amount to increment or decrement the value by when the `Shift` key is held.
-     * @default 10 * step
-     */
-    largeStep?: number | undefined;
-    /**
-     * The amount to increment or decrement the value by when the `Alt` key is held.
-     * @default step / 10
-     */
-    smallStep?: number | undefined;
     /**
      * Whether to allow mouse wheel to change the value
      */
@@ -160,8 +151,39 @@ interface NumberInputProps extends LocaleProperties, CommonProperties {
      * @default true
      */
     spinOnPress?: boolean | undefined;
+    /**
+     * Step value when Shift key is held (large increments).
+     * @default step * 10
+     */
+    largeStep?: number | undefined;
+    /**
+     * Step value when Alt/Option key is held (fine control).
+     * @default step * 0.1
+     */
+    smallStep?: number | undefined;
+    /**
+     * How many pixels the pointer must move to change the value by one step.
+     * Higher values mean more precise control. Lower values mean more sensitivity.
+     * @default 2
+     */
+    scrubberPixelSensitivity?: number | undefined;
+    /**
+     * Distance in pixels before the virtual cursor wraps around.
+     * When not set, the viewport bounds are used (default behavior).
+     */
+    scrubberTeleportDistance?: number | undefined;
+    /**
+     * The direction of scrubbing.
+     * @default "horizontal"
+     */
+    scrubberDirection?: "horizontal" | "vertical" | undefined;
+    /**
+     * Whether values snap to step multiples when scrubbing.
+     * @default false
+     */
+    snapOnStep?: boolean | undefined;
 }
-type PropsWithDefault = "dir" | "locale" | "focusInputOnChange" | "clampValueOnBlur" | "allowOverflow" | "inputMode" | "pattern" | "translations" | "step" | "largeStep" | "smallStep" | "spinOnPress" | "min" | "max";
+type PropsWithDefault = "dir" | "locale" | "focusInputOnChange" | "clampValueOnBlur" | "allowOverflow" | "inputMode" | "pattern" | "translations" | "step" | "largeStep" | "smallStep" | "spinOnPress" | "min" | "max" | "scrubberPixelSensitivity" | "scrubberDirection" | "snapOnStep";
 type ComputedContext = Readonly<{
     /**
      * The value of the input as a number
@@ -237,6 +259,18 @@ interface PrivateContext {
      * The value of the input
      */
     value: string;
+    /**
+     * The accumulated delta for pixel sensitivity tracking
+     */
+    cumulativeDelta: number;
+    /**
+     * Whether the browser supports pointer lock (false on Safari, false during SSR)
+     */
+    isPointerLockSupported: boolean;
+    /**
+     * The visual viewport scale (for pinch-zoom compensation on the cursor)
+     */
+    visualScale: number;
 }
 interface NumberInputSchema {
     state: "idle" | "focused" | "spinning" | "before:spin" | "scrubbing";
@@ -251,11 +285,63 @@ interface NumberInputSchema {
 }
 type NumberInputService = Service<NumberInputSchema>;
 type NumberInputMachine = Machine<NumberInputSchema>;
+interface RootState {
+    /**
+     * Whether the number input is disabled.
+     */
+    disabled: boolean;
+    /**
+     * Whether the number input is focused.
+     */
+    focused: boolean;
+    /**
+     * Whether the number input is invalid.
+     */
+    invalid: boolean;
+    /**
+     * Whether the number input is being scrubbed.
+     */
+    scrubbing: boolean;
+}
+interface InputState {
+    /**
+     * Whether the input is disabled.
+     */
+    disabled: boolean;
+    /**
+     * Whether the input is invalid.
+     */
+    invalid: boolean;
+    /**
+     * Whether the input is read-only.
+     */
+    readOnly: boolean;
+    /**
+     * Whether the input is being scrubbed.
+     */
+    scrubbing: boolean;
+}
+interface IncrementTriggerState {
+    /**
+     * Whether the increment trigger is disabled.
+     */
+    disabled: boolean;
+}
+interface DecrementTriggerState {
+    /**
+     * Whether the decrement trigger is disabled.
+     */
+    disabled: boolean;
+}
 interface NumberInputApi<T extends PropTypes = PropTypes> {
     /**
      * Whether the input is focused.
      */
     focused: boolean;
+    /**
+     * Whether the input is being scrubbed.
+     */
+    scrubbing: boolean;
     /**
      * Whether the input is invalid.
      */
@@ -300,14 +386,31 @@ interface NumberInputApi<T extends PropTypes = PropTypes> {
      * Function to focus the input.
      */
     focus: VoidFunction;
+    /**
+     * Returns the state of the root.
+     */
+    getRootState: () => RootState;
     getRootProps: () => T["element"];
     getLabelProps: () => T["label"];
     getControlProps: () => T["element"];
     getValueTextProps: () => T["element"];
+    /**
+     * Returns the state of the input.
+     */
+    getInputState: () => InputState;
     getInputProps: () => T["input"];
+    /**
+     * Returns the state of the decrement trigger.
+     */
+    getDecrementTriggerState: () => DecrementTriggerState;
     getDecrementTriggerProps: () => T["button"];
+    /**
+     * Returns the state of the increment trigger.
+     */
+    getIncrementTriggerState: () => IncrementTriggerState;
     getIncrementTriggerProps: () => T["button"];
     getScrubberProps: () => T["element"];
+    getScrubberCursorProps: () => T["element"];
 }
 
-export type { ElementIds, FocusChangeDetails, HintValue, InputMode, IntlTranslations, NumberInputApi, NumberInputMachine, NumberInputProps, NumberInputSchema, NumberInputService, ValidityState, ValueChangeDetails, ValueInvalidDetails };
+export type { DecrementTriggerState, ElementIds, FocusChangeDetails, HintValue, IncrementTriggerState, InputMode, InputState, IntlTranslations, NumberInputApi, NumberInputMachine, NumberInputProps, NumberInputSchema, NumberInputService, RootState, ValidityState, ValueChangeDetails, ValueInvalidDetails };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/number-input",
-  "version": "1.43.0",
+  "version": "2.0.0-next.1",
   "description": "Core logic for the number-input widget implemented as a state machine",
   "keywords": [
     "js",
@@ -30,11 +30,11 @@
   },
   "dependencies": {
     "@internationalized/number": "3.6.7",
-    "@zag-js/anatomy": "1.43.0",
-    "@zag-js/core": "1.43.0",
-    "@zag-js/dom-query": "1.43.0",
-    "@zag-js/types": "1.43.0",
-    "@zag-js/utils": "1.43.0"
+    "@zag-js/anatomy": "2.0.0-next.1",
+    "@zag-js/core": "2.0.0-next.1",
+    "@zag-js/dom-query": "2.0.0-next.1",
+    "@zag-js/types": "2.0.0-next.1",
+    "@zag-js/utils": "2.0.0-next.1"
   },
   "devDependencies": {
     "clean-package": "2.2.0"