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

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");
@@ -52,6 +52,7 @@ function connect(service, normalize) {
   const translations = prop("translations");
   return {
     focused,
+    scrubbing,
     invalid,
     empty,
     value: computed("formattedValue"),
@@ -79,8 +80,7 @@ function connect(service, normalize) {
     },
     getRootProps() {
       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),
@@ -90,7 +90,7 @@ function connect(service, normalize) {
     },
     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 +108,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 +121,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),
@@ -131,7 +131,7 @@ function connect(service, normalize) {
     },
     getInputProps() {
       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"),
@@ -181,7 +181,11 @@ function connect(service, normalize) {
           if (event.defaultPrevented) return;
           if (readOnly) return;
           if ((0, import_dom_query.isComposingEvent)(event)) return;
-          const step = (0, import_dom_query.getEventStep)(event) * prop("step");
+          const step = (0, import_dom_query.getEventStep)(event, {
+            step: prop("step"),
+            largeStep: prop("largeStep"),
+            smallStep: prop("smallStep")
+          });
           const keyMap = {
             ArrowUp() {
               send({ type: "INPUT.ARROW_UP", step });
@@ -213,9 +217,8 @@ function connect(service, normalize) {
     },
     getDecrementTriggerProps() {
       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),
         "aria-label": translations.decrementLabel,
@@ -245,9 +248,8 @@ function connect(service, normalize) {
     },
     getIncrementTriggerProps() {
       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),
         "aria-label": translations.incrementLabel,
@@ -274,29 +276,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,
   getEventStep,
   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");
@@ -29,6 +30,7 @@ function connect(service, normalize) {
   const translations = prop("translations");
   return {
     focused,
+    scrubbing,
     invalid,
     empty,
     value: computed("formattedValue"),
@@ -56,8 +58,7 @@ function connect(service, normalize) {
     },
     getRootProps() {
       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),
@@ -67,7 +68,7 @@ function connect(service, normalize) {
     },
     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 +86,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 +99,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),
@@ -108,7 +109,7 @@ function connect(service, normalize) {
     },
     getInputProps() {
       return normalize.input({
-        ...parts.input.attrs,
+        ...parts.input.attrs(scope.id),
         dir: prop("dir"),
         name: prop("name"),
         form: prop("form"),
@@ -158,7 +159,11 @@ function connect(service, normalize) {
           if (event.defaultPrevented) return;
           if (readOnly) return;
           if (isComposingEvent(event)) return;
-          const step = getEventStep(event) * prop("step");
+          const step = getEventStep(event, {
+            step: prop("step"),
+            largeStep: prop("largeStep"),
+            smallStep: prop("smallStep")
+          });
           const keyMap = {
             ArrowUp() {
               send({ type: "INPUT.ARROW_UP", step });
@@ -190,9 +195,8 @@ function connect(service, normalize) {
     },
     getDecrementTriggerProps() {
       return normalize.button({
-        ...parts.decrementTrigger.attrs,
+        ...parts.decrementTrigger.attrs(scope.id),
         dir: prop("dir"),
-        id: dom.getDecrementTriggerId(scope),
         disabled: isDecrementDisabled,
         "data-disabled": dataAttr(isDecrementDisabled),
         "aria-label": translations.decrementLabel,
@@ -222,9 +226,8 @@ function connect(service, normalize) {
     },
     getIncrementTriggerProps() {
       return normalize.button({
-        ...parts.incrementTrigger.attrs,
+        ...parts.incrementTrigger.attrs(scope.id),
         dir: prop("dir"),
-        id: dom.getIncrementTriggerId(scope),
         disabled: isIncrementDisabled,
         "data-disabled": dataAttr(isIncrementDisabled),
         "aria-label": translations.incrementLabel,
@@ -251,29 +254,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 };

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

@@ -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 };

package/dist/number-input.dom.js

@@ -20,9 +20,6 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/number-input.dom.ts
 var number_input_dom_exports = {};
 __export(number_input_dom_exports, {
-  createVirtualCursor: () => createVirtualCursor,
-  getCursorEl: () => getCursorEl,
-  getCursorId: () => getCursorId,
   getDecrementTriggerEl: () => getDecrementTriggerEl,
   getDecrementTriggerId: () => getDecrementTriggerId,
   getIncrementTriggerEl: () => getIncrementTriggerEl,
@@ -33,26 +30,27 @@ __export(number_input_dom_exports, {
   getMousemoveValue: () => getMousemoveValue,
   getPressedTriggerEl: () => getPressedTriggerEl,
   getRootId: () => getRootId,
+  getScrubberCursorEl: () => getScrubberCursorEl,
+  getScrubberCursorId: () => getScrubberCursorId,
   getScrubberEl: () => getScrubberEl,
   getScrubberId: () => getScrubberId,
-  preventTextSelection: () => preventTextSelection,
-  setupVirtualCursor: () => setupVirtualCursor
+  preventTextSelection: () => preventTextSelection
 });
 module.exports = __toCommonJS(number_input_dom_exports);
-var import_dom_query = require("@zag-js/dom-query");
 var import_utils = require("@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));
+var import_number_input = require("./number-input.anatomy.js");
+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(import_number_input.parts.input));
+var getIncrementTriggerEl = (ctx) => ctx.query(ctx.selector(import_number_input.parts.incrementTrigger));
+var getDecrementTriggerEl = (ctx) => ctx.query(ctx.selector(import_number_input.parts.decrementTrigger));
+var getScrubberEl = (ctx) => ctx.query(ctx.selector(import_number_input.parts.scrubber));
+var getScrubberCursorEl = (ctx) => ctx.query(ctx.selector(import_number_input.parts.scrubberCursor));
 var getPressedTriggerEl = (ctx, hint) => {
   let btnEl = null;
   if (hint === "increment") {
@@ -63,20 +61,13 @@ var getPressedTriggerEl = (ctx, hint) => {
   }
   return btnEl;
 };
-var setupVirtualCursor = (ctx, point) => {
-  if ((0, import_dom_query.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 = "";
@@ -90,49 +81,53 @@ 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 = (0, import_utils.roundToDpr)(event.movementX, win.devicePixelRatio);
   const y = (0, import_utils.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 = (0, import_utils.roundToDpr)(7.5, win.devicePixelRatio);
-  newPoint.x = (0, import_utils.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: import_dom_query.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 = (0, import_utils.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 = (0, import_utils.wrap)(newPoint.x + half - min, max - min) + min - half;
+      }
+    }
+  } else {
+    if (isVertical) {
+      const height = win.innerHeight;
+      newPoint.y = (0, import_utils.wrap)(newPoint.y + half, height) - half;
+    } else {
+      const width = win.innerWidth;
+      newPoint.x = (0, import_utils.wrap)(newPoint.x + half, width) - half;
+    }
+  }
+  return { hint, point: newPoint, delta };
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  createVirtualCursor,
-  getCursorEl,
-  getCursorId,
   getDecrementTriggerEl,
   getDecrementTriggerId,
   getIncrementTriggerEl,
@@ -143,8 +138,9 @@ var createVirtualCursor = (ctx, point) => {
   getMousemoveValue,
   getPressedTriggerEl,
   getRootId,
+  getScrubberCursorEl,
+  getScrubberCursorId,
   getScrubberEl,
   getScrubberId,
-  preventTextSelection,
-  setupVirtualCursor
+  preventTextSelection
 });