@zag-js/number-input 1.41.0 → 2.0.0-next.0

package/dist/number-input.dom.mjs

@@ -1,18 +1,18 @@
 // src/number-input.dom.ts
-import { isSafari, MAX_Z_INDEX } from "@zag-js/dom-query";
 import { roundToDpr, wrap } from "@zag-js/utils";
-var getRootId = (ctx) => ctx.ids?.root ?? `number-input:${ctx.id}`;
-var getInputId = (ctx) => ctx.ids?.input ?? `number-input:${ctx.id}:input`;
-var getIncrementTriggerId = (ctx) => ctx.ids?.incrementTrigger ?? `number-input:${ctx.id}:inc`;
-var getDecrementTriggerId = (ctx) => ctx.ids?.decrementTrigger ?? `number-input:${ctx.id}:dec`;
-var getScrubberId = (ctx) => ctx.ids?.scrubber ?? `number-input:${ctx.id}:scrubber`;
-var getCursorId = (ctx) => `number-input:${ctx.id}:cursor`;
-var getLabelId = (ctx) => ctx.ids?.label ?? `number-input:${ctx.id}:label`;
-var getInputEl = (ctx) => ctx.getById(getInputId(ctx));
-var getIncrementTriggerEl = (ctx) => ctx.getById(getIncrementTriggerId(ctx));
-var getDecrementTriggerEl = (ctx) => ctx.getById(getDecrementTriggerId(ctx));
-var getScrubberEl = (ctx) => ctx.getById(getScrubberId(ctx));
-var getCursorEl = (ctx) => ctx.getDoc().getElementById(getCursorId(ctx));
+import { parts } from "./number-input.anatomy.mjs";
+var getRootId = (ctx) => ctx.ids?.root ?? `${ctx.id}`;
+var getInputId = (ctx) => ctx.ids?.input ?? `${ctx.id}:input`;
+var getIncrementTriggerId = (ctx) => ctx.ids?.incrementTrigger ?? `${ctx.id}:inc`;
+var getDecrementTriggerId = (ctx) => ctx.ids?.decrementTrigger ?? `${ctx.id}:dec`;
+var getScrubberId = (ctx) => ctx.ids?.scrubber ?? `${ctx.id}:scrubber`;
+var getScrubberCursorId = (ctx) => ctx.ids?.scrubberCursor ?? `${ctx.id}:scrubber-cursor`;
+var getLabelId = (ctx) => ctx.ids?.label ?? `${ctx.id}:label`;
+var getInputEl = (ctx) => ctx.query(ctx.selector(parts.input));
+var getIncrementTriggerEl = (ctx) => ctx.query(ctx.selector(parts.incrementTrigger));
+var getDecrementTriggerEl = (ctx) => ctx.query(ctx.selector(parts.decrementTrigger));
+var getScrubberEl = (ctx) => ctx.query(ctx.selector(parts.scrubber));
+var getScrubberCursorEl = (ctx) => ctx.query(ctx.selector(parts.scrubberCursor));
 var getPressedTriggerEl = (ctx, hint) => {
   let btnEl = null;
   if (hint === "increment") {
@@ -23,20 +23,13 @@ var getPressedTriggerEl = (ctx, hint) => {
   }
   return btnEl;
 };
-var setupVirtualCursor = (ctx, point) => {
-  if (isSafari()) return;
-  createVirtualCursor(ctx, point);
-  return () => {
-    getCursorEl(ctx)?.remove();
-  };
-};
-var preventTextSelection = (ctx) => {
+var preventTextSelection = (ctx, direction) => {
   const doc = ctx.getDoc();
   const html = doc.documentElement;
   const body = doc.body;
   body.style.pointerEvents = "none";
   html.style.userSelect = "none";
-  html.style.cursor = "ew-resize";
+  html.style.cursor = direction === "vertical" ? "ns-resize" : "ew-resize";
   return () => {
     body.style.pointerEvents = "";
     html.style.userSelect = "";
@@ -50,48 +43,52 @@ var preventTextSelection = (ctx) => {
   };
 };
 var getMousemoveValue = (ctx, opts) => {
-  const { point, isRtl, event } = opts;
+  const { point, isRtl, event, direction, teleportDistance } = opts;
   const win = ctx.getWin();
   const x = roundToDpr(event.movementX, win.devicePixelRatio);
   const y = roundToDpr(event.movementY, win.devicePixelRatio);
-  let hint = x > 0 ? "increment" : x < 0 ? "decrement" : null;
-  if (isRtl && hint === "increment") hint = "decrement";
-  if (isRtl && hint === "decrement") hint = "increment";
+  const isVertical = direction === "vertical";
+  const delta = isVertical ? y : x;
+  let hint;
+  if (isVertical) {
+    hint = delta < 0 ? "increment" : delta > 0 ? "decrement" : null;
+  } else {
+    hint = delta > 0 ? "increment" : delta < 0 ? "decrement" : null;
+  }
+  if (!isVertical && isRtl) {
+    if (hint === "increment") hint = "decrement";
+    else if (hint === "decrement") hint = "increment";
+  }
   const newPoint = { x: point.x + x, y: point.y + y };
-  const width = win.innerWidth;
   const half = roundToDpr(7.5, win.devicePixelRatio);
-  newPoint.x = wrap(newPoint.x + half, width) - half;
-  return { hint, point: newPoint };
-};
-var createVirtualCursor = (ctx, point) => {
-  const doc = ctx.getDoc();
-  const el = doc.createElement("div");
-  el.className = "scrubber--cursor";
-  el.id = getCursorId(ctx);
-  Object.assign(el.style, {
-    width: "15px",
-    height: "15px",
-    position: "fixed",
-    pointerEvents: "none",
-    left: "0px",
-    top: "0px",
-    zIndex: MAX_Z_INDEX,
-    transform: point ? `translate3d(${point.x}px, ${point.y}px, 0px)` : void 0,
-    willChange: "transform"
-  });
-  el.innerHTML = `
-      <svg width="46" height="15" style="left: -15.5px; position: absolute; top: 0; filter: drop-shadow(rgba(0, 0, 0, 0.4) 0px 1px 1.1px);">
-        <g transform="translate(2 3)">
-          <path fill-rule="evenodd" d="M 15 4.5L 15 2L 11.5 5.5L 15 9L 15 6.5L 31 6.5L 31 9L 34.5 5.5L 31 2L 31 4.5Z" style="stroke-width: 2px; stroke: white;"></path>
-          <path fill-rule="evenodd" d="M 15 4.5L 15 2L 11.5 5.5L 15 9L 15 6.5L 31 6.5L 31 9L 34.5 5.5L 31 2L 31 4.5Z"></path>
-        </g>
-      </svg>`;
-  doc.body.appendChild(el);
+  if (teleportDistance != null) {
+    const scrubberEl = getScrubberEl(ctx);
+    if (scrubberEl) {
+      const rect = scrubberEl.getBoundingClientRect();
+      if (isVertical) {
+        const center = rect.top + rect.height / 2;
+        const min = center - teleportDistance / 2;
+        const max = center + teleportDistance / 2;
+        newPoint.y = wrap(newPoint.y + half - min, max - min) + min - half;
+      } else {
+        const center = rect.left + rect.width / 2;
+        const min = center - teleportDistance / 2;
+        const max = center + teleportDistance / 2;
+        newPoint.x = wrap(newPoint.x + half - min, max - min) + min - half;
+      }
+    }
+  } else {
+    if (isVertical) {
+      const height = win.innerHeight;
+      newPoint.y = wrap(newPoint.y + half, height) - half;
+    } else {
+      const width = win.innerWidth;
+      newPoint.x = wrap(newPoint.x + half, width) - half;
+    }
+  }
+  return { hint, point: newPoint, delta };
 };
 export {
-  createVirtualCursor,
-  getCursorEl,
-  getCursorId,
   getDecrementTriggerEl,
   getDecrementTriggerId,
   getIncrementTriggerEl,
@@ -102,8 +99,9 @@ export {
   getMousemoveValue,
   getPressedTriggerEl,
   getRootId,
+  getScrubberCursorEl,
+  getScrubberCursorId,
   getScrubberEl,
   getScrubberId,
-  preventTextSelection,
-  setupVirtualCursor
+  preventTextSelection
 };

package/dist/number-input.machine.js

@@ -54,9 +54,14 @@ var machine = createMachine({
       pattern: "-?[0-9]*(.[0-9]+)?",
       defaultValue: "",
       step,
+      largeStep: props.largeStep ?? step * 10,
+      smallStep: props.smallStep ?? step * 0.1,
       min: Number.MIN_SAFE_INTEGER,
       max: Number.MAX_SAFE_INTEGER,
       spinOnPress: true,
+      scrubberPixelSensitivity: 2,
+      scrubberDirection: "horizontal",
+      snapOnStep: false,
       ...props,
       translations: {
         incrementLabel: "increment value",
@@ -86,7 +91,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: {
@@ -121,7 +129,7 @@ var machine = createMachine({
       action(["setVirtualCursorPosition"]);
     });
   },
-  effects: ["trackFormControl"],
+  effects: ["trackFormControl", "detectPointerLock"],
   on: {
     "VALUE.SET": {
       actions: ["setRawValue"]
@@ -244,22 +252,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"]
+        }
       }
     }
   },
@@ -286,6 +288,9 @@ var machine = createMachine({
         }, 50);
         return () => clearInterval(id);
       },
+      detectPointerLock({ context }) {
+        context.set("isPointerLockSupported", !(0, import_dom_query.isSafari)());
+      },
       trackFormControl({ context, scope }) {
         const inputEl = dom.getInputEl(scope);
         return (0, import_dom_query.trackFormControl)(inputEl, {
@@ -297,12 +302,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");
@@ -328,21 +329,39 @@ var machine = createMachine({
         }
         return (0, import_dom_query.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 (0, import_dom_query.addDomEvent)(vV, "resize", onResize);
+      },
       activatePointerLock({ scope }) {
         if ((0, import_dom_query.isSafari)()) return;
-        return (0, import_dom_query.requestPointerLock)(scope.getDoc());
+        const cleanup = (0, import_dom_query.requestPointerLock)(scope.getDoc());
+        return () => {
+          if ((0, import_dom_query.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() {
@@ -361,11 +380,15 @@ var machine = createMachine({
       increment({ context, event, prop, computed }) {
         let nextValue = (0, import_utils.incrementValue)(computed("valueAsNumber"), event.step ?? prop("step"));
         if (!prop("allowOverflow")) nextValue = (0, import_utils.clampValue)(nextValue, prop("min"), prop("max"));
+        if (prop("snapOnStep"))
+          nextValue = (0, import_utils.snapValueToStep)(nextValue, prop("min"), prop("max"), event.step ?? prop("step"));
         context.set("value", (0, import_number_input.formatValue)(nextValue, { computed, prop }));
       },
       decrement({ context, event, prop, computed }) {
         let nextValue = (0, import_utils.decrementValue)(computed("valueAsNumber"), event.step ?? prop("step"));
         if (!prop("allowOverflow")) nextValue = (0, import_utils.clampValue)(nextValue, prop("min"), prop("max"));
+        if (prop("snapOnStep"))
+          nextValue = (0, import_utils.snapValueToStep)(nextValue, prop("min"), prop("max"), event.step ?? prop("step"));
         context.set("value", (0, import_number_input.formatValue)(nextValue, { computed, prop }));
       },
       setClampedValue({ context, prop, computed }) {
@@ -447,10 +470,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.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";
@@ -36,9 +38,14 @@ var machine = createMachine({
       pattern: "-?[0-9]*(.[0-9]+)?",
       defaultValue: "",
       step,
+      largeStep: props.largeStep ?? step * 10,
+      smallStep: props.smallStep ?? step * 0.1,
       min: Number.MIN_SAFE_INTEGER,
       max: Number.MAX_SAFE_INTEGER,
       spinOnPress: true,
+      scrubberPixelSensitivity: 2,
+      scrubberDirection: "horizontal",
+      snapOnStep: false,
       ...props,
       translations: {
         incrementLabel: "increment value",
@@ -68,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: {
@@ -103,7 +113,7 @@ var machine = createMachine({
       action(["setVirtualCursorPosition"]);
     });
   },
-  effects: ["trackFormControl"],
+  effects: ["trackFormControl", "detectPointerLock"],
   on: {
     "VALUE.SET": {
       actions: ["setRawValue"]
@@ -226,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"]
+        }
       }
     }
   },
@@ -268,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, {
@@ -279,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");
@@ -310,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() {
@@ -343,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 }) {
@@ -429,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

@@ -40,6 +40,7 @@ var props = (0, import_types.createProps)()([
   "ids",
   "inputMode",
   "invalid",
+  "largeStep",
   "locale",
   "max",
   "min",
@@ -51,6 +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

@@ -15,6 +15,7 @@ var props = createProps()([
   "ids",
   "inputMode",
   "invalid",
+  "largeStep",
   "locale",
   "max",
   "min",
@@ -26,6 +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 {
     /**
@@ -150,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" | "spinOnPress" | "min" | "max" | "step" | "translations";
+type PropsWithDefault = "dir" | "locale" | "focusInputOnChange" | "clampValueOnBlur" | "allowOverflow" | "inputMode" | "pattern" | "translations" | "step" | "spinOnPress" | "min" | "max" | "largeStep" | "smallStep" | "scrubberPixelSensitivity" | "scrubberDirection" | "snapOnStep";
 type ComputedContext = Readonly<{
     /**
      * The value of the input as a number
@@ -227,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";
@@ -246,6 +290,10 @@ 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.
      */
@@ -298,6 +346,7 @@ interface NumberInputApi<T extends PropTypes = PropTypes> {
     getDecrementTriggerProps: () => T["button"];
     getIncrementTriggerProps: () => T["button"];
     getScrubberProps: () => T["element"];
+    getScrubberCursorProps: () => T["element"];
 }
 
 export type { ElementIds, FocusChangeDetails, HintValue, InputMode, IntlTranslations, NumberInputApi, NumberInputMachine, NumberInputProps, NumberInputSchema, NumberInputService, ValidityState, ValueChangeDetails, ValueInvalidDetails };