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

package/dist/index.d.mts

@@ -2,7 +2,7 @@ export { anatomy } from './number-input.anatomy.mjs';
 export { connect } from './number-input.connect.mjs';
 export { machine } from './number-input.machine.mjs';
 export { props, splitProps } from './number-input.props.mjs';
-export { NumberInputApi as Api, ElementIds, FocusChangeDetails, HintValue, InputMode, IntlTranslations, NumberInputMachine as Machine, NumberInputProps as Props, NumberInputService as Service, ValidityState, ValueChangeDetails, ValueInvalidDetails } from './number-input.types.mjs';
+export { NumberInputApi as Api, DecrementTriggerState, ElementIds, FocusChangeDetails, HintValue, IncrementTriggerState, InputMode, InputState, IntlTranslations, NumberInputMachine as Machine, NumberInputProps as Props, RootState, NumberInputService as Service, ValidityState, ValueChangeDetails, ValueInvalidDetails } from './number-input.types.mjs';
 import '@zag-js/anatomy';
 import '@zag-js/types';
 import '@zag-js/core';

package/dist/index.d.ts

@@ -2,7 +2,7 @@ export { anatomy } from './number-input.anatomy.js';
 export { connect } from './number-input.connect.js';
 export { machine } from './number-input.machine.js';
 export { props, splitProps } from './number-input.props.js';
-export { NumberInputApi as Api, ElementIds, FocusChangeDetails, HintValue, InputMode, IntlTranslations, NumberInputMachine as Machine, NumberInputProps as Props, NumberInputService as Service, ValidityState, ValueChangeDetails, ValueInvalidDetails } from './number-input.types.js';
+export { NumberInputApi as Api, DecrementTriggerState, ElementIds, FocusChangeDetails, HintValue, IncrementTriggerState, InputMode, InputState, IntlTranslations, NumberInputMachine as Machine, NumberInputProps as Props, RootState, NumberInputService as Service, ValidityState, ValueChangeDetails, ValueInvalidDetails } from './number-input.types.js';
 import '@zag-js/anatomy';
 import '@zag-js/types';
 import '@zag-js/core';

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

@@ -1,6 +1,6 @@
 import * as _zag_js_anatomy from '@zag-js/anatomy';
 
-declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "label" | "input" | "control" | "valueText" | "incrementTrigger" | "decrementTrigger" | "scrubber">;
-declare const parts: Record<"root" | "label" | "input" | "control" | "valueText" | "incrementTrigger" | "decrementTrigger" | "scrubber", _zag_js_anatomy.AnatomyPart>;
+declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "label" | "input" | "control" | "valueText" | "incrementTrigger" | "decrementTrigger" | "scrubber" | "scrubberCursor">;
+declare const parts: Record<"root" | "label" | "input" | "control" | "valueText" | "incrementTrigger" | "decrementTrigger" | "scrubber" | "scrubberCursor", _zag_js_anatomy.AnatomyPart>;
 
 export { anatomy, parts };

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

@@ -1,6 +1,6 @@
 import * as _zag_js_anatomy from '@zag-js/anatomy';
 
-declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "label" | "input" | "control" | "valueText" | "incrementTrigger" | "decrementTrigger" | "scrubber">;
-declare const parts: Record<"root" | "label" | "input" | "control" | "valueText" | "incrementTrigger" | "decrementTrigger" | "scrubber", _zag_js_anatomy.AnatomyPart>;
+declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "label" | "input" | "control" | "valueText" | "incrementTrigger" | "decrementTrigger" | "scrubber" | "scrubberCursor">;
+declare const parts: Record<"root" | "label" | "input" | "control" | "valueText" | "incrementTrigger" | "decrementTrigger" | "scrubber" | "scrubberCursor", _zag_js_anatomy.AnatomyPart>;
 
 export { anatomy, parts };

package/dist/number-input.anatomy.js

@@ -33,7 +33,8 @@ var anatomy = (0, import_anatomy.createAnatomy)("numberInput").parts(
   "valueText",
   "incrementTrigger",
   "decrementTrigger",
-  "scrubber"
+  "scrubber",
+  "scrubberCursor"
 );
 var parts = anatomy.build();
 // Annotate the CommonJS export names for ESM import in node:

package/dist/number-input.anatomy.mjs

@@ -8,7 +8,8 @@ var anatomy = createAnatomy("numberInput").parts(
   "valueText",
   "incrementTrigger",
   "decrementTrigger",
-  "scrubber"
+  "scrubber",
+  "scrubberCursor"
 );
 var parts = anatomy.build();
 export {

package/dist/number-input.connect.js

@@ -39,7 +39,7 @@ var import_cursor = require("./cursor.js");
 var import_number_input = require("./number-input.anatomy.js");
 var dom = __toESM(require("./number-input.dom.js"));
 function connect(service, normalize) {
-  const { state, send, prop, scope, computed } = service;
+  const { state, send, prop, scope, computed, context } = service;
   const focused = state.hasTag("focus");
   const disabled = computed("isDisabled");
   const readOnly = !!prop("readOnly");
@@ -50,8 +50,21 @@ function connect(service, normalize) {
   const isIncrementDisabled = disabled || !computed("canIncrement") || readOnly;
   const isDecrementDisabled = disabled || !computed("canDecrement") || readOnly;
   const translations = prop("translations");
+  function getRootState() {
+    return { disabled, focused, invalid, scrubbing };
+  }
+  function getInputState() {
+    return { disabled, invalid, readOnly, scrubbing };
+  }
+  function getIncrementTriggerState() {
+    return { disabled: isIncrementDisabled };
+  }
+  function getDecrementTriggerState() {
+    return { disabled: isDecrementDisabled };
+  }
   return {
     focused,
+    scrubbing,
     invalid,
     empty,
     value: computed("formattedValue"),
@@ -77,20 +90,21 @@ function connect(service, normalize) {
     focus() {
       dom.getInputEl(scope)?.focus();
     },
+    getRootState,
     getRootProps() {
+      const rootState = getRootState();
       return normalize.element({
-        id: dom.getRootId(scope),
-        ...import_number_input.parts.root.attrs,
+        ...import_number_input.parts.root.attrs(scope.id),
         dir: prop("dir"),
-        "data-disabled": (0, import_dom_query.dataAttr)(disabled),
-        "data-focus": (0, import_dom_query.dataAttr)(focused),
-        "data-invalid": (0, import_dom_query.dataAttr)(invalid),
-        "data-scrubbing": (0, import_dom_query.dataAttr)(scrubbing)
+        "data-disabled": (0, import_dom_query.dataAttr)(rootState.disabled),
+        "data-focus": (0, import_dom_query.dataAttr)(rootState.focused),
+        "data-invalid": (0, import_dom_query.dataAttr)(rootState.invalid),
+        "data-scrubbing": (0, import_dom_query.dataAttr)(rootState.scrubbing)
       });
     },
     getLabelProps() {
       return normalize.label({
-        ...import_number_input.parts.label.attrs,
+        ...import_number_input.parts.label.attrs(scope.id),
         dir: prop("dir"),
         "data-disabled": (0, import_dom_query.dataAttr)(disabled),
         "data-focus": (0, import_dom_query.dataAttr)(focused),
@@ -108,7 +122,7 @@ function connect(service, normalize) {
     },
     getControlProps() {
       return normalize.element({
-        ...import_number_input.parts.control.attrs,
+        ...import_number_input.parts.control.attrs(scope.id),
         dir: prop("dir"),
         role: "group",
         "aria-disabled": disabled,
@@ -121,7 +135,7 @@ function connect(service, normalize) {
     },
     getValueTextProps() {
       return normalize.element({
-        ...import_number_input.parts.valueText.attrs,
+        ...import_number_input.parts.valueText.attrs(scope.id),
         dir: prop("dir"),
         "data-disabled": (0, import_dom_query.dataAttr)(disabled),
         "data-invalid": (0, import_dom_query.dataAttr)(invalid),
@@ -129,9 +143,11 @@ function connect(service, normalize) {
         "data-scrubbing": (0, import_dom_query.dataAttr)(scrubbing)
       });
     },
+    getInputState,
     getInputProps() {
+      const inputState = getInputState();
       return normalize.input({
-        ...import_number_input.parts.input.attrs,
+        ...import_number_input.parts.input.attrs(scope.id),
         dir: prop("dir"),
         name: prop("name"),
         form: prop("form"),
@@ -140,11 +156,11 @@ function connect(service, normalize) {
         defaultValue: computed("formattedValue"),
         pattern: prop("formatOptions") ? void 0 : prop("pattern"),
         inputMode: prop("inputMode"),
-        "aria-invalid": (0, import_dom_query.ariaAttr)(invalid),
-        "data-invalid": (0, import_dom_query.dataAttr)(invalid),
-        disabled,
-        "data-disabled": (0, import_dom_query.dataAttr)(disabled),
-        readOnly,
+        "aria-invalid": (0, import_dom_query.ariaAttr)(inputState.invalid),
+        "data-invalid": (0, import_dom_query.dataAttr)(inputState.invalid),
+        disabled: inputState.disabled,
+        "data-disabled": (0, import_dom_query.dataAttr)(inputState.disabled),
+        readOnly: inputState.readOnly,
         required: prop("required"),
         autoComplete: "off",
         autoCorrect: "off",
@@ -155,7 +171,7 @@ function connect(service, normalize) {
         "aria-valuemax": prop("max"),
         "aria-valuenow": Number.isNaN(computed("valueAsNumber")) ? void 0 : computed("valueAsNumber"),
         "aria-valuetext": computed("valueText"),
-        "data-scrubbing": (0, import_dom_query.dataAttr)(scrubbing),
+        "data-scrubbing": (0, import_dom_query.dataAttr)(inputState.scrubbing),
         onFocus() {
           send({ type: "INPUT.FOCUS" });
         },
@@ -190,20 +206,24 @@ function connect(service, normalize) {
             ArrowUp() {
               send({ type: "INPUT.ARROW_UP", step });
               event.preventDefault();
+              event.stopPropagation();
             },
             ArrowDown() {
               send({ type: "INPUT.ARROW_DOWN", step });
               event.preventDefault();
+              event.stopPropagation();
             },
             Home() {
               if ((0, import_dom_query.isModifierKey)(event)) return;
               send({ type: "INPUT.HOME" });
               event.preventDefault();
+              event.stopPropagation();
             },
             End() {
               if ((0, import_dom_query.isModifierKey)(event)) return;
               send({ type: "INPUT.END" });
               event.preventDefault();
+              event.stopPropagation();
             },
             Enter(event2) {
               const selection = (0, import_cursor.recordCursor)(event2.currentTarget, scope);
@@ -215,20 +235,21 @@ function connect(service, normalize) {
         }
       });
     },
+    getDecrementTriggerState,
     getDecrementTriggerProps() {
+      const decrementTriggerState = getDecrementTriggerState();
       return normalize.button({
-        ...import_number_input.parts.decrementTrigger.attrs,
+        ...import_number_input.parts.decrementTrigger.attrs(scope.id),
         dir: prop("dir"),
-        id: dom.getDecrementTriggerId(scope),
-        disabled: isDecrementDisabled,
-        "data-disabled": (0, import_dom_query.dataAttr)(isDecrementDisabled),
+        disabled: decrementTriggerState.disabled,
+        "data-disabled": (0, import_dom_query.dataAttr)(decrementTriggerState.disabled),
         "aria-label": translations.decrementLabel,
         type: "button",
         tabIndex: -1,
         "aria-controls": dom.getInputId(scope),
         "data-scrubbing": (0, import_dom_query.dataAttr)(scrubbing),
         onPointerDown(event) {
-          if (isDecrementDisabled) return;
+          if (decrementTriggerState.disabled) return;
           if (!(0, import_dom_query.isLeftClick)(event)) return;
           send({ type: "TRIGGER.PRESS_DOWN", hint: "decrement", pointerType: event.pointerType });
           if (event.pointerType === "mouse") {
@@ -242,25 +263,26 @@ function connect(service, normalize) {
           send({ type: "TRIGGER.PRESS_UP", hint: "decrement", pointerType: event.pointerType });
         },
         onPointerLeave() {
-          if (isDecrementDisabled) return;
+          if (decrementTriggerState.disabled) return;
           send({ type: "TRIGGER.PRESS_UP", hint: "decrement" });
         }
       });
     },
+    getIncrementTriggerState,
     getIncrementTriggerProps() {
+      const incrementTriggerState = getIncrementTriggerState();
       return normalize.button({
-        ...import_number_input.parts.incrementTrigger.attrs,
+        ...import_number_input.parts.incrementTrigger.attrs(scope.id),
         dir: prop("dir"),
-        id: dom.getIncrementTriggerId(scope),
-        disabled: isIncrementDisabled,
-        "data-disabled": (0, import_dom_query.dataAttr)(isIncrementDisabled),
+        disabled: incrementTriggerState.disabled,
+        "data-disabled": (0, import_dom_query.dataAttr)(incrementTriggerState.disabled),
         "aria-label": translations.incrementLabel,
         type: "button",
         tabIndex: -1,
         "aria-controls": dom.getInputId(scope),
         "data-scrubbing": (0, import_dom_query.dataAttr)(scrubbing),
         onPointerDown(event) {
-          if (isIncrementDisabled || !(0, import_dom_query.isLeftClick)(event)) return;
+          if (incrementTriggerState.disabled || !(0, import_dom_query.isLeftClick)(event)) return;
           send({ type: "TRIGGER.PRESS_DOWN", hint: "increment", pointerType: event.pointerType });
           if (event.pointerType === "mouse") {
             event.preventDefault();
@@ -278,29 +300,48 @@ function connect(service, normalize) {
       });
     },
     getScrubberProps() {
+      const direction = prop("scrubberDirection");
+      const point = context.get("scrubberCursorPoint");
       return normalize.element({
-        ...import_number_input.parts.scrubber.attrs,
+        ...import_number_input.parts.scrubber.attrs(scope.id),
         dir: prop("dir"),
         "data-disabled": (0, import_dom_query.dataAttr)(disabled),
-        id: dom.getScrubberId(scope),
         role: "presentation",
         "data-scrubbing": (0, import_dom_query.dataAttr)(scrubbing),
         onMouseDown(event) {
           if (disabled) return;
           if (!(0, import_dom_query.isLeftClick)(event)) return;
-          const point = (0, import_dom_query.getEventPoint)(event);
+          const pt = (0, import_dom_query.getEventPoint)(event);
           const win = (0, import_dom_query.getWindow)(event.currentTarget);
           const dpr = win.devicePixelRatio;
-          point.x = point.x - (0, import_utils.roundToDpr)(7.5, dpr);
-          point.y = point.y - (0, import_utils.roundToDpr)(7.5, dpr);
-          send({ type: "SCRUBBER.PRESS_DOWN", point });
+          pt.x = pt.x - (0, import_utils.roundToDpr)(7.5, dpr);
+          pt.y = pt.y - (0, import_utils.roundToDpr)(7.5, dpr);
+          send({ type: "SCRUBBER.PRESS_DOWN", point: pt });
           event.preventDefault();
           (0, import_dom_query.raf)(() => {
             (0, import_dom_query.setCaretToEnd)(dom.getInputEl(scope));
           });
         },
         style: {
-          cursor: disabled ? void 0 : "ew-resize"
+          cursor: disabled ? void 0 : direction === "vertical" ? "ns-resize" : "ew-resize",
+          "--scrubber-x": point ? (0, import_utils.toPx)(point.x) : void 0,
+          "--scrubber-y": point ? (0, import_utils.toPx)(point.y) : void 0,
+          "--scrubber-scale": `${1 / context.get("visualScale")}`
+        }
+      });
+    },
+    getScrubberCursorProps() {
+      return normalize.element({
+        ...import_number_input.parts.scrubberCursor.attrs(scope.id),
+        hidden: !scrubbing || !context.get("isPointerLockSupported"),
+        style: {
+          position: "fixed",
+          pointerEvents: "none",
+          left: "0px",
+          top: "0px",
+          zIndex: import_dom_query.MAX_Z_INDEX,
+          transform: "translate3d(var(--scrubber-x, 0px), var(--scrubber-y, 0px), 0px) scale(var(--scrubber-scale, 1))",
+          willChange: "transform"
         }
       });
     }

package/dist/number-input.connect.mjs

@@ -5,18 +5,19 @@ import {
   getEventPoint,
   getEventStepValue,
   getWindow,
+  MAX_Z_INDEX,
   isComposingEvent,
   isLeftClick,
   isModifierKey,
   raf,
   setCaretToEnd
 } from "@zag-js/dom-query";
-import { roundToDpr } from "@zag-js/utils";
+import { roundToDpr, toPx } from "@zag-js/utils";
 import { recordCursor } from "./cursor.mjs";
 import { parts } from "./number-input.anatomy.mjs";
 import * as dom from "./number-input.dom.mjs";
 function connect(service, normalize) {
-  const { state, send, prop, scope, computed } = service;
+  const { state, send, prop, scope, computed, context } = service;
   const focused = state.hasTag("focus");
   const disabled = computed("isDisabled");
   const readOnly = !!prop("readOnly");
@@ -27,8 +28,21 @@ function connect(service, normalize) {
   const isIncrementDisabled = disabled || !computed("canIncrement") || readOnly;
   const isDecrementDisabled = disabled || !computed("canDecrement") || readOnly;
   const translations = prop("translations");
+  function getRootState() {
+    return { disabled, focused, invalid, scrubbing };
+  }
+  function getInputState() {
+    return { disabled, invalid, readOnly, scrubbing };
+  }
+  function getIncrementTriggerState() {
+    return { disabled: isIncrementDisabled };
+  }
+  function getDecrementTriggerState() {
+    return { disabled: isDecrementDisabled };
+  }
   return {
     focused,
+    scrubbing,
     invalid,
     empty,
     value: computed("formattedValue"),
@@ -54,20 +68,21 @@ function connect(service, normalize) {
     focus() {
       dom.getInputEl(scope)?.focus();
     },
+    getRootState,
     getRootProps() {
+      const rootState = getRootState();
       return normalize.element({
-        id: dom.getRootId(scope),
-        ...parts.root.attrs,
+        ...parts.root.attrs(scope.id),
         dir: prop("dir"),
-        "data-disabled": dataAttr(disabled),
-        "data-focus": dataAttr(focused),
-        "data-invalid": dataAttr(invalid),
-        "data-scrubbing": dataAttr(scrubbing)
+        "data-disabled": dataAttr(rootState.disabled),
+        "data-focus": dataAttr(rootState.focused),
+        "data-invalid": dataAttr(rootState.invalid),
+        "data-scrubbing": dataAttr(rootState.scrubbing)
       });
     },
     getLabelProps() {
       return normalize.label({
-        ...parts.label.attrs,
+        ...parts.label.attrs(scope.id),
         dir: prop("dir"),
         "data-disabled": dataAttr(disabled),
         "data-focus": dataAttr(focused),
@@ -85,7 +100,7 @@ function connect(service, normalize) {
     },
     getControlProps() {
       return normalize.element({
-        ...parts.control.attrs,
+        ...parts.control.attrs(scope.id),
         dir: prop("dir"),
         role: "group",
         "aria-disabled": disabled,
@@ -98,7 +113,7 @@ function connect(service, normalize) {
     },
     getValueTextProps() {
       return normalize.element({
-        ...parts.valueText.attrs,
+        ...parts.valueText.attrs(scope.id),
         dir: prop("dir"),
         "data-disabled": dataAttr(disabled),
         "data-invalid": dataAttr(invalid),
@@ -106,9 +121,11 @@ function connect(service, normalize) {
         "data-scrubbing": dataAttr(scrubbing)
       });
     },
+    getInputState,
     getInputProps() {
+      const inputState = getInputState();
       return normalize.input({
-        ...parts.input.attrs,
+        ...parts.input.attrs(scope.id),
         dir: prop("dir"),
         name: prop("name"),
         form: prop("form"),
@@ -117,11 +134,11 @@ function connect(service, normalize) {
         defaultValue: computed("formattedValue"),
         pattern: prop("formatOptions") ? void 0 : prop("pattern"),
         inputMode: prop("inputMode"),
-        "aria-invalid": ariaAttr(invalid),
-        "data-invalid": dataAttr(invalid),
-        disabled,
-        "data-disabled": dataAttr(disabled),
-        readOnly,
+        "aria-invalid": ariaAttr(inputState.invalid),
+        "data-invalid": dataAttr(inputState.invalid),
+        disabled: inputState.disabled,
+        "data-disabled": dataAttr(inputState.disabled),
+        readOnly: inputState.readOnly,
         required: prop("required"),
         autoComplete: "off",
         autoCorrect: "off",
@@ -132,7 +149,7 @@ function connect(service, normalize) {
         "aria-valuemax": prop("max"),
         "aria-valuenow": Number.isNaN(computed("valueAsNumber")) ? void 0 : computed("valueAsNumber"),
         "aria-valuetext": computed("valueText"),
-        "data-scrubbing": dataAttr(scrubbing),
+        "data-scrubbing": dataAttr(inputState.scrubbing),
         onFocus() {
           send({ type: "INPUT.FOCUS" });
         },
@@ -167,20 +184,24 @@ function connect(service, normalize) {
             ArrowUp() {
               send({ type: "INPUT.ARROW_UP", step });
               event.preventDefault();
+              event.stopPropagation();
             },
             ArrowDown() {
               send({ type: "INPUT.ARROW_DOWN", step });
               event.preventDefault();
+              event.stopPropagation();
             },
             Home() {
               if (isModifierKey(event)) return;
               send({ type: "INPUT.HOME" });
               event.preventDefault();
+              event.stopPropagation();
             },
             End() {
               if (isModifierKey(event)) return;
               send({ type: "INPUT.END" });
               event.preventDefault();
+              event.stopPropagation();
             },
             Enter(event2) {
               const selection = recordCursor(event2.currentTarget, scope);
@@ -192,20 +213,21 @@ function connect(service, normalize) {
         }
       });
     },
+    getDecrementTriggerState,
     getDecrementTriggerProps() {
+      const decrementTriggerState = getDecrementTriggerState();
       return normalize.button({
-        ...parts.decrementTrigger.attrs,
+        ...parts.decrementTrigger.attrs(scope.id),
         dir: prop("dir"),
-        id: dom.getDecrementTriggerId(scope),
-        disabled: isDecrementDisabled,
-        "data-disabled": dataAttr(isDecrementDisabled),
+        disabled: decrementTriggerState.disabled,
+        "data-disabled": dataAttr(decrementTriggerState.disabled),
         "aria-label": translations.decrementLabel,
         type: "button",
         tabIndex: -1,
         "aria-controls": dom.getInputId(scope),
         "data-scrubbing": dataAttr(scrubbing),
         onPointerDown(event) {
-          if (isDecrementDisabled) return;
+          if (decrementTriggerState.disabled) return;
           if (!isLeftClick(event)) return;
           send({ type: "TRIGGER.PRESS_DOWN", hint: "decrement", pointerType: event.pointerType });
           if (event.pointerType === "mouse") {
@@ -219,25 +241,26 @@ function connect(service, normalize) {
           send({ type: "TRIGGER.PRESS_UP", hint: "decrement", pointerType: event.pointerType });
         },
         onPointerLeave() {
-          if (isDecrementDisabled) return;
+          if (decrementTriggerState.disabled) return;
           send({ type: "TRIGGER.PRESS_UP", hint: "decrement" });
         }
       });
     },
+    getIncrementTriggerState,
     getIncrementTriggerProps() {
+      const incrementTriggerState = getIncrementTriggerState();
       return normalize.button({
-        ...parts.incrementTrigger.attrs,
+        ...parts.incrementTrigger.attrs(scope.id),
         dir: prop("dir"),
-        id: dom.getIncrementTriggerId(scope),
-        disabled: isIncrementDisabled,
-        "data-disabled": dataAttr(isIncrementDisabled),
+        disabled: incrementTriggerState.disabled,
+        "data-disabled": dataAttr(incrementTriggerState.disabled),
         "aria-label": translations.incrementLabel,
         type: "button",
         tabIndex: -1,
         "aria-controls": dom.getInputId(scope),
         "data-scrubbing": dataAttr(scrubbing),
         onPointerDown(event) {
-          if (isIncrementDisabled || !isLeftClick(event)) return;
+          if (incrementTriggerState.disabled || !isLeftClick(event)) return;
           send({ type: "TRIGGER.PRESS_DOWN", hint: "increment", pointerType: event.pointerType });
           if (event.pointerType === "mouse") {
             event.preventDefault();
@@ -255,29 +278,48 @@ function connect(service, normalize) {
       });
     },
     getScrubberProps() {
+      const direction = prop("scrubberDirection");
+      const point = context.get("scrubberCursorPoint");
       return normalize.element({
-        ...parts.scrubber.attrs,
+        ...parts.scrubber.attrs(scope.id),
         dir: prop("dir"),
         "data-disabled": dataAttr(disabled),
-        id: dom.getScrubberId(scope),
         role: "presentation",
         "data-scrubbing": dataAttr(scrubbing),
         onMouseDown(event) {
           if (disabled) return;
           if (!isLeftClick(event)) return;
-          const point = getEventPoint(event);
+          const pt = getEventPoint(event);
           const win = getWindow(event.currentTarget);
           const dpr = win.devicePixelRatio;
-          point.x = point.x - roundToDpr(7.5, dpr);
-          point.y = point.y - roundToDpr(7.5, dpr);
-          send({ type: "SCRUBBER.PRESS_DOWN", point });
+          pt.x = pt.x - roundToDpr(7.5, dpr);
+          pt.y = pt.y - roundToDpr(7.5, dpr);
+          send({ type: "SCRUBBER.PRESS_DOWN", point: pt });
           event.preventDefault();
           raf(() => {
             setCaretToEnd(dom.getInputEl(scope));
           });
         },
         style: {
-          cursor: disabled ? void 0 : "ew-resize"
+          cursor: disabled ? void 0 : direction === "vertical" ? "ns-resize" : "ew-resize",
+          "--scrubber-x": point ? toPx(point.x) : void 0,
+          "--scrubber-y": point ? toPx(point.y) : void 0,
+          "--scrubber-scale": `${1 / context.get("visualScale")}`
+        }
+      });
+    },
+    getScrubberCursorProps() {
+      return normalize.element({
+        ...parts.scrubberCursor.attrs(scope.id),
+        hidden: !scrubbing || !context.get("isPointerLockSupported"),
+        style: {
+          position: "fixed",
+          pointerEvents: "none",
+          left: "0px",
+          top: "0px",
+          zIndex: MAX_Z_INDEX,
+          transform: "translate3d(var(--scrubber-x, 0px), var(--scrubber-y, 0px), 0px) scale(var(--scrubber-scale, 1))",
+          willChange: "transform"
         }
       });
     }

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

@@ -8,27 +8,29 @@ declare const getInputId: (ctx: Scope) => any;
 declare const getIncrementTriggerId: (ctx: Scope) => any;
 declare const getDecrementTriggerId: (ctx: Scope) => any;
 declare const getScrubberId: (ctx: Scope) => any;
-declare const getCursorId: (ctx: Scope) => string;
+declare const getScrubberCursorId: (ctx: Scope) => any;
 declare const getLabelId: (ctx: Scope) => any;
 declare const getInputEl: (ctx: Scope) => HTMLInputElement | null;
 declare const getIncrementTriggerEl: (ctx: Scope) => HTMLButtonElement | null;
 declare const getDecrementTriggerEl: (ctx: Scope) => HTMLButtonElement | null;
 declare const getScrubberEl: (ctx: Scope) => HTMLElement | null;
-declare const getCursorEl: (ctx: Scope) => HTMLElement | null;
+declare const getScrubberCursorEl: (ctx: Scope) => HTMLElement | null;
 declare const getPressedTriggerEl: (ctx: Scope, hint: HintValue | null) => HTMLButtonElement | null;
-declare const setupVirtualCursor: (ctx: Scope, point: Point | null) => (() => void) | undefined;
-declare const preventTextSelection: (ctx: Scope) => () => void;
-declare const getMousemoveValue: (ctx: Scope, opts: {
+declare const preventTextSelection: (ctx: Scope, direction: "horizontal" | "vertical") => () => void;
+interface MousemoveOpts {
     point: Point | null;
     isRtl: boolean;
     event: MouseEvent;
-}) => {
+    direction: "horizontal" | "vertical";
+    teleportDistance?: number | undefined;
+}
+declare const getMousemoveValue: (ctx: Scope, opts: MousemoveOpts) => {
     hint: string | null;
     point: {
         x: number;
         y: number;
     };
+    delta: number;
 };
-declare const createVirtualCursor: (ctx: Scope, point: Point | null) => void;
 
-export { createVirtualCursor, getCursorEl, getCursorId, getDecrementTriggerEl, getDecrementTriggerId, getIncrementTriggerEl, getIncrementTriggerId, getInputEl, getInputId, getLabelId, getMousemoveValue, getPressedTriggerEl, getRootId, getScrubberEl, getScrubberId, preventTextSelection, setupVirtualCursor };
+export { getDecrementTriggerEl, getDecrementTriggerId, getIncrementTriggerEl, getIncrementTriggerId, getInputEl, getInputId, getLabelId, getMousemoveValue, getPressedTriggerEl, getRootId, getScrubberCursorEl, getScrubberCursorId, getScrubberEl, getScrubberId, preventTextSelection };