@zag-js/number-input 0.1.12 → 0.1.15

package/dist/index.mjs

@@ -1,40 +1,4 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-
 // ../../utilities/dom/dist/index.mjs
-var __defProp2 = Object.defineProperty;
-var __getOwnPropSymbols2 = Object.getOwnPropertySymbols;
-var __hasOwnProp2 = Object.prototype.hasOwnProperty;
-var __propIsEnum2 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues2 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp2.call(b, prop))
-      __defNormalProp2(a, prop, b[prop]);
-  if (__getOwnPropSymbols2)
-    for (var prop of __getOwnPropSymbols2(b)) {
-      if (__propIsEnum2.call(b, prop))
-        __defNormalProp2(a, prop, b[prop]);
-    }
-  return a;
-};
 var dataAttr = (guard) => {
   return guard ? "" : void 0;
 };
@@ -44,7 +8,7 @@ var ariaAttr = (guard) => {
 var MAX_Z_INDEX = 2147483647;
 var runIfFn = (v, ...a) => {
   const res = typeof v === "function" ? v(...a) : v;
-  return res != null ? res : void 0;
+  return res ?? void 0;
 };
 var callAll = (...fns) => (...a) => {
   fns.forEach(function(fn) {
@@ -56,17 +20,13 @@ var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
 var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
 var isDom = () => typeof window !== "undefined";
 function getPlatform() {
-  var _a;
   const agent = navigator.userAgentData;
-  return (_a = agent == null ? void 0 : agent.platform) != null ? _a : navigator.platform;
+  return (agent == null ? void 0 : agent.platform) ?? navigator.platform;
 }
 var pt = (v) => isDom() && v.test(getPlatform());
 var vn = (v) => isDom() && v.test(navigator.vendor);
-var isTouchDevice = () => isDom() && !!navigator.maxTouchPoints;
-var isMac = () => pt(/^Mac/) && !isTouchDevice;
 var isSafari = () => isApple() && vn(/apple/i);
 var isApple = () => pt(/mac|iphone|ipad|ipod/i);
-var isIos = () => isApple() && !isMac();
 function isDocument(el) {
   return el.nodeType === Node.DOCUMENT_NODE;
 }
@@ -74,52 +34,35 @@ function isWindow(value) {
   return (value == null ? void 0 : value.toString()) === "[object Window]";
 }
 function getDocument(el) {
-  var _a;
   if (isWindow(el))
     return el.document;
   if (isDocument(el))
     return el;
-  return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
+  return (el == null ? void 0 : el.ownerDocument) ?? document;
 }
 function defineDomHelpers(helpers) {
   const dom2 = {
     getRootNode: (ctx) => {
-      var _a, _b;
-      return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
-    },
-    getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
-    getWin: (ctx) => {
       var _a;
-      return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
+      return ((_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) ?? document;
     },
+    getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
+    getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
     getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
     getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
   };
-  return __spreadValues2(__spreadValues2({}, dom2), helpers);
+  return {
+    ...dom2,
+    ...helpers
+  };
 }
 function getNativeEvent(e) {
-  var _a;
-  return (_a = e.nativeEvent) != null ? _a : e;
+  return e.nativeEvent ?? e;
 }
 var supportsPointerEvent = () => isDom() && window.onpointerdown === null;
 var isTouchEvent = (v) => isObject(v) && hasProp(v, "touches");
 var isLeftClick = (v) => v.button === 0;
 var isModifiedEvent = (v) => v.ctrlKey || v.altKey || v.metaKey;
-function observeAttributes(node, attributes, fn) {
-  if (!node)
-    return;
-  const attrs = Array.isArray(attributes) ? attributes : [attributes];
-  const win = node.ownerDocument.defaultView || window;
-  const obs = new win.MutationObserver((changes) => {
-    for (const change of changes) {
-      if (change.type === "attributes" && change.attributeName && attrs.includes(change.attributeName)) {
-        fn(change);
-      }
-    }
-  });
-  obs.observe(node, { attributes: true, attributeFilter: attrs });
-  return () => obs.disconnect();
-}
 var fallback = {
   pageX: 0,
   pageY: 0,
@@ -127,8 +70,7 @@ var fallback = {
   clientY: 0
 };
 function getEventPoint(event, type = "page") {
-  var _a, _b;
-  const point = isTouchEvent(event) ? (_b = (_a = event.touches[0]) != null ? _a : event.changedTouches[0]) != null ? _b : fallback : event;
+  const point = isTouchEvent(event) ? event.touches[0] ?? event.changedTouches[0] ?? fallback : event;
   return { x: point[`${type}X`], y: point[`${type}Y`] };
 }
 var PAGE_KEYS = /* @__PURE__ */ new Set(["PageUp", "PageDown"]);
@@ -150,6 +92,21 @@ function addDomEvent(target, eventName, handler, options) {
     node == null ? void 0 : node.removeEventListener(eventName, handler, options);
   };
 }
+function observeAttributes(node, attributes, fn) {
+  if (!node)
+    return;
+  const attrs = Array.isArray(attributes) ? attributes : [attributes];
+  const win = node.ownerDocument.defaultView || window;
+  const obs = new win.MutationObserver((changes) => {
+    for (const change of changes) {
+      if (change.type === "attributes" && change.attributeName && attrs.includes(change.attributeName)) {
+        fn(change);
+      }
+    }
+  });
+  obs.observe(node, { attributes: true, attributeFilter: attrs });
+  return () => obs.disconnect();
+}
 function raf(fn) {
   const id = globalThis.requestAnimationFrame(fn);
   return function cleanup() {
@@ -188,7 +145,10 @@ function requestPointerLock(doc, handlers = {}) {
   if (!supported)
     return;
   body.requestPointerLock();
-  const cleanup = callAll(addPointerlockChangeListener(doc, onPointerChange), addPointerlockErrorListener(doc, onPointerError));
+  const cleanup = callAll(
+    addPointerlockChangeListener(doc, onPointerChange),
+    addPointerlockErrorListener(doc, onPointerError)
+  );
   return function dispose() {
     if (!supported)
       return;
@@ -198,7 +158,6 @@ function requestPointerLock(doc, handlers = {}) {
 }
 
 // ../../utilities/number/dist/index.mjs
-var __pow = Math.pow;
 function wrap(num, max) {
   return (num % max + max) % max;
 }
@@ -252,7 +211,7 @@ function isWithinRange(v, o) {
 function decimalOperation(a, op, b) {
   let result = op === "+" ? a + b : a - b;
   if (a % 1 !== 0 || b % 1 !== 0) {
-    const multiplier = __pow(10, Math.max(countDecimals(a), countDecimals(b)));
+    const multiplier = 10 ** Math.max(countDecimals(a), countDecimals(b));
     a = Math.round(a * multiplier);
     b = Math.round(b * multiplier);
     result = op === "+" ? a + b : a - b;
@@ -265,35 +224,73 @@ var nf = new Intl.NumberFormat("en-US", { style: "decimal", maximumFractionDigit
 // src/number-input.dom.ts
 var dom = defineDomHelpers({
   getRootId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `number-input:${ctx.id}`;
+    var _a;
+    return ((_a = ctx.ids) == null ? void 0 : _a.root) ?? `number-input:${ctx.id}`;
   },
   getInputId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.input) != null ? _b : `number-input:${ctx.id}:input`;
+    var _a;
+    return ((_a = ctx.ids) == null ? void 0 : _a.input) ?? `number-input:${ctx.id}:input`;
   },
   getIncButtonId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.incBtn) != null ? _b : `number-input:${ctx.id}:inc-btn`;
+    var _a;
+    return ((_a = ctx.ids) == null ? void 0 : _a.incBtn) ?? `number-input:${ctx.id}:inc-btn`;
   },
   getDecButtonId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.decBtn) != null ? _b : `number-input:${ctx.id}:dec-btn`;
+    var _a;
+    return ((_a = ctx.ids) == null ? void 0 : _a.decBtn) ?? `number-input:${ctx.id}:dec-btn`;
   },
   getScrubberId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.scrubber) != null ? _b : `number-input:${ctx.id}:scrubber`;
+    var _a;
+    return ((_a = ctx.ids) == null ? void 0 : _a.scrubber) ?? `number-input:${ctx.id}:scrubber`;
   },
   getCursorId: (ctx) => `number-input:${ctx.id}:cursor`,
   getLabelId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.label) != null ? _b : `number-input:${ctx.id}:label`;
+    var _a;
+    return ((_a = ctx.ids) == null ? void 0 : _a.label) ?? `number-input:${ctx.id}:label`;
   },
   getInputEl: (ctx) => dom.getById(ctx, dom.getInputId(ctx)),
   getIncButtonEl: (ctx) => dom.getById(ctx, dom.getIncButtonId(ctx)),
   getDecButtonEl: (ctx) => dom.getById(ctx, dom.getDecButtonId(ctx)),
   getScrubberEl: (ctx) => dom.getById(ctx, dom.getScrubberId(ctx)),
   getCursorEl: (ctx) => dom.getDoc(ctx).getElementById(dom.getCursorId(ctx)),
+  getActiveButton: (ctx, hint = ctx.hint) => {
+    let btnEl = null;
+    if (hint === "increment") {
+      btnEl = dom.getIncButtonEl(ctx);
+    }
+    if (hint === "decrement") {
+      btnEl = dom.getDecButtonEl(ctx);
+    }
+    return btnEl;
+  },
+  setupVirtualCursor(ctx) {
+    if (isSafari() || !supportsPointerEvent())
+      return;
+    dom.createVirtualCursor(ctx);
+    return () => {
+      var _a;
+      (_a = dom.getCursorEl(ctx)) == null ? void 0 : _a.remove();
+    };
+  },
+  preventTextSelection(ctx) {
+    const doc = dom.getDoc(ctx);
+    const html = doc.documentElement;
+    const body = doc.body;
+    body.style.pointerEvents = "none";
+    html.style.userSelect = "none";
+    html.style.cursor = "ew-resize";
+    return () => {
+      body.style.pointerEvents = "";
+      html.style.userSelect = "";
+      html.style.cursor = "";
+      if (!html.style.length) {
+        html.removeAttribute("style");
+      }
+      if (!body.style.length) {
+        body.removeAttribute("style");
+      }
+    };
+  },
   getMousementValue(ctx, event) {
     const x = roundToDevicePixel(event.movementX);
     const y = roundToDevicePixel(event.movementY);
@@ -342,39 +339,38 @@ var dom = defineDomHelpers({
 // src/number-input.utils.ts
 var utils = {
   isValidNumericEvent: (ctx, event) => {
-    var _a, _b;
+    var _a;
     if (event.key == null)
       return true;
     const isModifier = isModifiedEvent(event);
     const isSingleKey = event.key.length === 1;
     if (isModifier || !isSingleKey)
       return true;
-    return (_b = (_a = ctx.validateCharacter) == null ? void 0 : _a.call(ctx, event.key)) != null ? _b : utils.isFloatingPoint(event.key);
+    return ((_a = ctx.validateCharacter) == null ? void 0 : _a.call(ctx, event.key)) ?? utils.isFloatingPoint(event.key);
   },
   isFloatingPoint: (v) => /^[Ee0-9+\-.]$/.test(v),
   sanitize: (ctx, value) => {
-    var _a;
-    return value.split("").filter((_a = ctx.validateCharacter) != null ? _a : utils.isFloatingPoint).join("");
+    return value.split("").filter(ctx.validateCharacter ?? utils.isFloatingPoint).join("");
   },
   increment: (ctx, step) => {
-    const value = increment(ctx.value, step != null ? step : ctx.step);
+    const value = increment(ctx.value, step ?? ctx.step);
     return formatDecimal(clamp(value, ctx), ctx);
   },
   decrement: (ctx, step) => {
-    const value = decrement(ctx.value, step != null ? step : ctx.step);
+    const value = decrement(ctx.value, step ?? ctx.step);
     return formatDecimal(clamp(value, ctx), ctx);
   },
   clamp: (ctx) => {
     return formatDecimal(clamp(ctx.value, ctx), ctx);
   },
   parse: (ctx, value) => {
-    var _a, _b;
-    return (_b = (_a = ctx.parse) == null ? void 0 : _a.call(ctx, value)) != null ? _b : value;
+    var _a;
+    return ((_a = ctx.parse) == null ? void 0 : _a.call(ctx, value)) ?? value;
   },
   format: (ctx, value) => {
-    var _a, _b;
+    var _a;
     const _val = value.toString();
-    return (_b = (_a = ctx.format) == null ? void 0 : _a.call(ctx, _val)) != null ? _b : _val;
+    return ((_a = ctx.format) == null ? void 0 : _a.call(ctx, _val)) ?? _val;
   },
   round: (ctx) => {
     return formatDecimal(ctx.value, ctx);
@@ -418,6 +414,10 @@ function connect(state, send, normalize) {
       var _a;
       (_a = dom.getInputEl(state.context)) == null ? void 0 : _a.focus();
     },
+    blur() {
+      var _a;
+      (_a = dom.getInputEl(state.context)) == null ? void 0 : _a.blur();
+    },
     rootProps: normalize.element({
       id: dom.getRootId(state.context),
       "data-part": "root",
@@ -443,7 +443,7 @@ function connect(state, send, normalize) {
       name: state.context.name,
       id: dom.getInputId(state.context),
       role: "spinbutton",
-      value: state.context.formattedValue,
+      defaultValue: state.context.formattedValue,
       pattern: state.context.pattern,
       inputMode: state.context.inputMode,
       "aria-invalid": isInvalid || void 0,
@@ -455,7 +455,7 @@ function connect(state, send, normalize) {
       autoCorrect: "off",
       spellCheck: "false",
       type: "text",
-      "aria-roledescription": !isIos() ? "number field" : void 0,
+      "aria-roledescription": "numberfield",
       "aria-valuemin": state.context.min,
       "aria-valuemax": state.context.max,
       "aria-valuenow": isNaN(state.context.valueAsNumber) ? void 0 : state.context.valueAsNumber,
@@ -581,386 +581,416 @@ var callAll2 = (...fns) => (...a) => {
   });
 };
 
+// ../../utilities/form-utils/dist/index.mjs
+function getWindow(el) {
+  return (el == null ? void 0 : el.ownerDocument.defaultView) ?? window;
+}
+function getDescriptor(el, options) {
+  const { type, property } = options;
+  const proto = getWindow(el)[type].prototype;
+  return Object.getOwnPropertyDescriptor(proto, property) ?? {};
+}
+function dispatchInputValueEvent(el, value) {
+  var _a;
+  if (!el)
+    return;
+  const win = getWindow(el);
+  if (!(el instanceof win.HTMLInputElement))
+    return;
+  const desc = getDescriptor(el, { type: "HTMLInputElement", property: "value" });
+  (_a = desc.set) == null ? void 0 : _a.call(el, value);
+  const event = new win.Event("input", { bubbles: true });
+  el.dispatchEvent(event);
+}
+
 // src/number-input.machine.ts
 var { not, and } = guards;
 function machine(ctx) {
-  return createMachine({
-    id: "number-input",
-    initial: "unknown",
-    context: __spreadProps(__spreadValues({
-      dir: "ltr",
-      focusInputOnChange: true,
-      clampValueOnBlur: true,
-      allowOverflow: false,
-      inputMode: "decimal",
-      pattern: "[0-9]*(.[0-9]+)?",
-      hint: null,
-      value: "",
-      step: 1,
-      min: Number.MIN_SAFE_INTEGER,
-      max: Number.MAX_SAFE_INTEGER,
-      scrubberCursorPoint: null,
-      invalid: false
-    }, ctx), {
-      messages: __spreadValues({
-        incrementLabel: "increment value",
-        decrementLabel: "decrease value"
-      }, ctx.messages)
-    }),
-    computed: {
-      isRtl: (ctx2) => ctx2.dir === "rtl",
-      valueAsNumber: (ctx2) => valueOf(ctx2.value),
-      isAtMin: (ctx2) => isAtMin(ctx2.value, ctx2),
-      isAtMax: (ctx2) => isAtMax(ctx2.value, ctx2),
-      isOutOfRange: (ctx2) => !isWithinRange(ctx2.value, ctx2),
-      isValueEmpty: (ctx2) => ctx2.value === "",
-      canIncrement: (ctx2) => ctx2.allowOverflow || !ctx2.isAtMax,
-      canDecrement: (ctx2) => ctx2.allowOverflow || !ctx2.isAtMin,
-      valueText: (ctx2) => {
-        var _a, _b;
-        return (_b = (_a = ctx2.messages).valueText) == null ? void 0 : _b.call(_a, ctx2.value);
-      },
-      formattedValue: (ctx2) => {
-        var _a, _b;
-        return (_b = (_a = ctx2.format) == null ? void 0 : _a.call(ctx2, ctx2.value).toString()) != null ? _b : ctx2.value;
-      }
-    },
-    watch: {
-      value: ["invokeOnChange"],
-      isOutOfRange: ["invokeOnInvalid"]
-    },
-    on: {
-      SET_VALUE: {
-        actions: ["setValue", "setHintToSet"]
-      },
-      CLEAR_VALUE: {
-        actions: ["clearValue"]
-      },
-      INCREMENT: {
-        actions: ["increment"]
+  return createMachine(
+    {
+      id: "number-input",
+      initial: "unknown",
+      context: {
+        dir: "ltr",
+        focusInputOnChange: true,
+        clampValueOnBlur: true,
+        allowOverflow: false,
+        inputMode: "decimal",
+        pattern: "[0-9]*(.[0-9]+)?",
+        hint: null,
+        value: "",
+        step: 1,
+        min: Number.MIN_SAFE_INTEGER,
+        max: Number.MAX_SAFE_INTEGER,
+        scrubberCursorPoint: null,
+        invalid: false,
+        spinOnPress: true,
+        ...ctx,
+        messages: {
+          incrementLabel: "increment value",
+          decrementLabel: "decrease value",
+          ...ctx.messages
+        }
       },
-      DECREMENT: {
-        actions: ["decrement"]
-      }
-    },
-    states: {
-      unknown: {
-        on: {
-          SETUP: {
-            target: "idle",
-            actions: "syncInputValue"
-          }
+      computed: {
+        isRtl: (ctx2) => ctx2.dir === "rtl",
+        valueAsNumber: (ctx2) => valueOf(ctx2.value),
+        isAtMin: (ctx2) => isAtMin(ctx2.value, ctx2),
+        isAtMax: (ctx2) => isAtMax(ctx2.value, ctx2),
+        isOutOfRange: (ctx2) => !isWithinRange(ctx2.value, ctx2),
+        isValueEmpty: (ctx2) => ctx2.value === "",
+        canIncrement: (ctx2) => ctx2.allowOverflow || !ctx2.isAtMax,
+        canDecrement: (ctx2) => ctx2.allowOverflow || !ctx2.isAtMin,
+        valueText: (ctx2) => {
+          var _a, _b;
+          return (_b = (_a = ctx2.messages).valueText) == null ? void 0 : _b.call(_a, ctx2.value);
+        },
+        formattedValue: (ctx2) => {
+          var _a;
+          return ((_a = ctx2.format) == null ? void 0 : _a.call(ctx2, ctx2.value).toString()) ?? ctx2.value;
         }
       },
-      idle: {
-        on: {
-          PRESS_DOWN: {
-            target: "before:spin",
-            actions: ["focusInput", "setHint"]
-          },
-          PRESS_DOWN_SCRUBBER: {
-            target: "scrubbing",
-            actions: ["focusInput", "setHint", "setCursorPoint"]
+      watch: {
+        value: ["invokeOnChange", "dispatchChangeEvent"],
+        isOutOfRange: ["invokeOnInvalid"],
+        scrubberCursorPoint: ["setVirtualCursorPosition"]
+      },
+      on: {
+        SET_VALUE: [
+          {
+            guard: "clampOnBlur",
+            actions: ["setValue", "clampValue", "setHintToSet"]
           },
-          FOCUS: "focused"
+          {
+            actions: ["setValue", "setHintToSet"]
+          }
+        ],
+        CLEAR_VALUE: {
+          actions: ["clearValue"]
+        },
+        INCREMENT: {
+          actions: ["increment"]
+        },
+        DECREMENT: {
+          actions: ["decrement"]
         }
       },
-      focused: {
-        tags: ["focus"],
-        entry: "focusInput",
-        activities: "attachWheelListener",
-        on: {
-          PRESS_DOWN: {
-            target: "before:spin",
-            actions: ["focusInput", "setHint"]
-          },
-          PRESS_DOWN_SCRUBBER: {
-            target: "scrubbing",
-            actions: ["focusInput", "setHint", "setCursorPoint"]
-          },
-          ARROW_UP: {
-            actions: "increment"
-          },
-          ARROW_DOWN: {
-            actions: "decrement"
-          },
-          HOME: {
-            actions: "setToMin"
-          },
-          END: {
-            actions: "setToMax"
-          },
-          CHANGE: {
-            actions: ["setValue", "setHint"]
-          },
-          BLUR: [
-            {
-              guard: "isInvalidExponential",
+      states: {
+        unknown: {
+          on: {
+            SETUP: {
               target: "idle",
-              actions: ["clearValue", "clearHint"]
+              actions: "syncInputValue"
+            }
+          }
+        },
+        idle: {
+          exit: "invokeOnFocus",
+          on: {
+            PRESS_DOWN: {
+              target: "before:spin",
+              actions: ["focusInput", "setHint"]
             },
-            {
-              guard: and("clampOnBlur", not("isInRange"), not("isEmptyValue")),
-              target: "idle",
-              actions: ["clampValue", "clearHint"]
+            PRESS_DOWN_SCRUBBER: {
+              target: "scrubbing",
+              actions: ["focusInput", "setHint", "setCursorPoint"]
             },
-            {
-              target: "idle",
-              actions: "roundValue"
-            }
-          ]
-        }
-      },
-      "before:spin": {
-        tags: ["focus"],
-        activities: "trackButtonDisabled",
-        entry: choose([
-          { guard: "isIncrementHint", actions: "increment" },
-          { guard: "isDecrementHint", actions: "decrement" }
-        ]),
-        after: {
-          CHANGE_DELAY: {
-            target: "spinning",
-            guard: "isInRange"
+            FOCUS: "focused"
           }
         },
-        on: {
-          PRESS_UP: {
-            target: "focused",
-            actions: "clearHint"
+        focused: {
+          tags: "focus",
+          entry: "focusInput",
+          activities: "attachWheelListener",
+          on: {
+            PRESS_DOWN: {
+              target: "before:spin",
+              actions: ["focusInput", "setHint"]
+            },
+            PRESS_DOWN_SCRUBBER: {
+              target: "scrubbing",
+              actions: ["focusInput", "setHint", "setCursorPoint"]
+            },
+            ARROW_UP: {
+              actions: "increment"
+            },
+            ARROW_DOWN: {
+              actions: "decrement"
+            },
+            HOME: {
+              actions: "setToMin"
+            },
+            END: {
+              actions: "setToMax"
+            },
+            CHANGE: {
+              actions: ["setValue", "setHint"]
+            },
+            BLUR: [
+              {
+                guard: "isInvalidExponential",
+                target: "idle",
+                actions: ["clearValue", "clearHint", "invokeOnBlur"]
+              },
+              {
+                guard: and("clampOnBlur", not("isInRange"), not("isEmptyValue")),
+                target: "idle",
+                actions: ["clampValue", "clearHint", "invokeOnBlur"]
+              },
+              {
+                target: "idle",
+                actions: ["roundValue", "invokeOnBlur"]
+              }
+            ]
           }
-        }
-      },
-      spinning: {
-        tags: ["focus"],
-        activities: "trackButtonDisabled",
-        every: [
-          {
-            delay: "CHANGE_INTERVAL",
-            guard: and(not("isAtMin"), "isIncrementHint"),
-            actions: "increment"
+        },
+        "before:spin": {
+          tags: "focus",
+          activities: "trackButtonDisabled",
+          entry: choose([
+            { guard: "isIncrementHint", actions: "increment" },
+            { guard: "isDecrementHint", actions: "decrement" }
+          ]),
+          after: {
+            CHANGE_DELAY: {
+              target: "spinning",
+              guard: and("isInRange", "spinOnPress")
+            }
           },
-          {
-            delay: "CHANGE_INTERVAL",
-            guard: and(not("isAtMax"), "isDecrementHint"),
-            actions: "decrement"
-          }
-        ],
-        on: {
-          PRESS_UP: {
-            target: "focused",
-            actions: "clearHint"
+          on: {
+            PRESS_UP: {
+              target: "focused",
+              actions: "clearHint"
+            }
           }
-        }
-      },
-      scrubbing: {
-        tags: ["focus"],
-        entry: ["addCustomCursor", "disableTextSelection"],
-        exit: ["removeCustomCursor", "restoreTextSelection"],
-        activities: ["activatePointerLock", "trackMousemove"],
-        on: {
-          POINTER_UP_SCRUBBER: {
-            target: "focused",
-            actions: "clearCursorPoint"
-          },
-          POINTER_MOVE_SCRUBBER: [
+        },
+        spinning: {
+          tags: "focus",
+          activities: "trackButtonDisabled",
+          every: [
             {
-              guard: "isIncrementHint",
-              actions: ["increment", "setCursorPoint", "updateCursor"]
+              delay: "CHANGE_INTERVAL",
+              guard: and(not("isAtMin"), "isIncrementHint"),
+              actions: "increment"
             },
             {
-              guard: "isDecrementHint",
-              actions: ["decrement", "setCursorPoint", "updateCursor"]
+              delay: "CHANGE_INTERVAL",
+              guard: and(not("isAtMax"), "isDecrementHint"),
+              actions: "decrement"
+            }
+          ],
+          on: {
+            PRESS_UP: {
+              target: "focused",
+              actions: "clearHint"
             }
-          ]
+          }
+        },
+        scrubbing: {
+          tags: "focus",
+          exit: "clearCursorPoint",
+          activities: ["activatePointerLock", "trackMousemove", "setupVirtualCursor", "preventTextSelection"],
+          on: {
+            POINTER_UP_SCRUBBER: "focused",
+            POINTER_MOVE_SCRUBBER: [
+              {
+                guard: "isIncrementHint",
+                actions: ["increment", "setCursorPoint"]
+              },
+              {
+                guard: "isDecrementHint",
+                actions: ["decrement", "setCursorPoint"]
+              }
+            ]
+          }
         }
       }
-    }
-  }, {
-    delays: {
-      CHANGE_INTERVAL: 50,
-      CHANGE_DELAY: 300
-    },
-    guards: {
-      clampOnBlur: (ctx2) => !!ctx2.clampValueOnBlur,
-      isAtMin: (ctx2) => ctx2.isAtMin,
-      isAtMax: (ctx2) => ctx2.isAtMax,
-      isInRange: (ctx2) => !ctx2.isOutOfRange,
-      isDecrementHint: (ctx2, evt) => {
-        var _a;
-        return ((_a = evt.hint) != null ? _a : ctx2.hint) === "decrement";
-      },
-      isEmptyValue: (ctx2) => ctx2.isValueEmpty,
-      isIncrementHint: (ctx2, evt) => {
-        var _a;
-        return ((_a = evt.hint) != null ? _a : ctx2.hint) === "increment";
-      },
-      isInvalidExponential: (ctx2) => ctx2.value.toString().startsWith("e")
     },
-    activities: {
-      trackButtonDisabled(ctx2, _evt, { send }) {
-        let btnEl = null;
-        if (ctx2.hint === "increment") {
-          btnEl = dom.getIncButtonEl(ctx2);
-        }
-        if (ctx2.hint === "decrement") {
-          btnEl = dom.getDecButtonEl(ctx2);
-        }
-        return observeAttributes(btnEl, "disabled", function onDisable() {
-          send("PRESS_UP");
-        });
-      },
-      attachWheelListener(ctx2, _evt, { send }) {
-        const input = dom.getInputEl(ctx2);
-        if (!input)
-          return;
-        function onWheel(event) {
-          const isInputFocused = dom.getDoc(ctx2).activeElement === input;
-          if (!ctx2.allowMouseWheel || !isInputFocused)
+    {
+      delays: {
+        CHANGE_INTERVAL: 50,
+        CHANGE_DELAY: 300
+      },
+      guards: {
+        clampOnBlur: (ctx2) => !!ctx2.clampValueOnBlur,
+        isAtMin: (ctx2) => ctx2.isAtMin,
+        spinOnPress: (ctx2) => !!ctx2.spinOnPress,
+        isAtMax: (ctx2) => ctx2.isAtMax,
+        isInRange: (ctx2) => !ctx2.isOutOfRange,
+        isDecrementHint: (ctx2, evt) => (evt.hint ?? ctx2.hint) === "decrement",
+        isEmptyValue: (ctx2) => ctx2.isValueEmpty,
+        isIncrementHint: (ctx2, evt) => (evt.hint ?? ctx2.hint) === "increment",
+        isInvalidExponential: (ctx2) => ctx2.value.toString().startsWith("e")
+      },
+      activities: {
+        setupVirtualCursor(ctx2) {
+          return dom.setupVirtualCursor(ctx2);
+        },
+        preventTextSelection(ctx2) {
+          return dom.preventTextSelection(ctx2);
+        },
+        trackButtonDisabled(ctx2, _evt, { send }) {
+          const btn = dom.getActiveButton(ctx2, ctx2.hint);
+          return observeAttributes(btn, "disabled", () => send("PRESS_UP"));
+        },
+        attachWheelListener(ctx2, _evt, { send }) {
+          const input = dom.getInputEl(ctx2);
+          if (!input)
             return;
-          event.preventDefault();
-          const dir = Math.sign(event.deltaY) * -1;
-          if (dir === 1) {
-            send("INCREMENT");
-          } else if (dir === -1) {
-            send("DECREMENT");
+          function onWheel(event) {
+            const isInputFocused = dom.getDoc(ctx2).activeElement === input;
+            if (!ctx2.allowMouseWheel || !isInputFocused)
+              return;
+            event.preventDefault();
+            const dir = Math.sign(event.deltaY) * -1;
+            if (dir === 1) {
+              send("INCREMENT");
+            } else if (dir === -1) {
+              send("DECREMENT");
+            }
           }
+          return addDomEvent(input, "wheel", onWheel, { passive: false });
+        },
+        activatePointerLock(ctx2) {
+          if (isSafari() || !supportsPointerEvent())
+            return;
+          return requestPointerLock(dom.getDoc(ctx2));
+        },
+        trackMousemove(ctx2, _evt, { send }) {
+          const doc = dom.getDoc(ctx2);
+          function onMousemove(event) {
+            if (!ctx2.scrubberCursorPoint)
+              return;
+            const value = dom.getMousementValue(ctx2, event);
+            if (!value.hint)
+              return;
+            send({
+              type: "POINTER_MOVE_SCRUBBER",
+              hint: value.hint,
+              point: value.point
+            });
+          }
+          function onMouseup() {
+            send("POINTER_UP_SCRUBBER");
+          }
+          return callAll2(
+            addDomEvent(doc, "mousemove", onMousemove, false),
+            addDomEvent(doc, "mouseup", onMouseup, false)
+          );
         }
-        return addDomEvent(input, "wheel", onWheel, { passive: false });
       },
-      activatePointerLock(ctx2) {
-        if (isSafari() || !supportsPointerEvent())
-          return;
-        return requestPointerLock(dom.getDoc(ctx2));
-      },
-      trackMousemove(ctx2, _evt, { send }) {
-        const doc = dom.getDoc(ctx2);
-        function onMousemove(event) {
-          if (!ctx2.scrubberCursorPoint)
+      actions: {
+        focusInput(ctx2) {
+          if (!ctx2.focusInputOnChange)
             return;
-          const value = dom.getMousementValue(ctx2, event);
-          if (!value.hint)
+          const input = dom.getInputEl(ctx2);
+          raf(() => input == null ? void 0 : input.focus());
+        },
+        increment(ctx2, evt) {
+          ctx2.value = utils.increment(ctx2, evt.step);
+        },
+        decrement(ctx2, evt) {
+          ctx2.value = utils.decrement(ctx2, evt.step);
+        },
+        clampValue(ctx2) {
+          ctx2.value = utils.clamp(ctx2);
+        },
+        roundValue(ctx2) {
+          if (ctx2.value !== "") {
+            ctx2.value = utils.round(ctx2);
+          }
+        },
+        setValue(ctx2, evt) {
+          var _a;
+          const value = ((_a = evt.target) == null ? void 0 : _a.value) ?? evt.value;
+          ctx2.value = utils.sanitize(ctx2, utils.parse(ctx2, value.toString()));
+        },
+        clearValue(ctx2) {
+          ctx2.value = "";
+        },
+        setToMax(ctx2) {
+          ctx2.value = ctx2.max.toString();
+        },
+        setToMin(ctx2) {
+          ctx2.value = ctx2.min.toString();
+        },
+        setHint(ctx2, evt) {
+          ctx2.hint = evt.hint;
+        },
+        clearHint(ctx2) {
+          ctx2.hint = null;
+        },
+        setHintToSet(ctx2) {
+          ctx2.hint = "set";
+        },
+        invokeOnChange(ctx2) {
+          var _a;
+          (_a = ctx2.onChange) == null ? void 0 : _a.call(ctx2, {
+            value: ctx2.value,
+            valueAsNumber: ctx2.valueAsNumber
+          });
+        },
+        invokeOnFocus(ctx2, evt) {
+          var _a;
+          let srcElement = null;
+          if (evt.type === "PRESS_DOWN") {
+            srcElement = dom.getActiveButton(ctx2, evt.hint);
+          } else if (evt.type === "FOCUS") {
+            srcElement = dom.getInputEl(ctx2);
+          } else if (evt.type === "PRESS_DOWN_SCRUBBER") {
+            srcElement = dom.getScrubberEl(ctx2);
+          }
+          (_a = ctx2.onFocus) == null ? void 0 : _a.call(ctx2, {
+            value: ctx2.value,
+            valueAsNumber: ctx2.valueAsNumber,
+            srcElement
+          });
+        },
+        invokeOnBlur(ctx2) {
+          var _a;
+          (_a = ctx2.onBlur) == null ? void 0 : _a.call(ctx2, {
+            value: ctx2.value,
+            valueAsNumber: ctx2.valueAsNumber
+          });
+        },
+        invokeOnInvalid(ctx2) {
+          var _a;
+          if (!ctx2.isOutOfRange)
             return;
-          send({
-            type: "POINTER_MOVE_SCRUBBER",
-            hint: value.hint,
-            point: value.point
+          const reason = ctx2.valueAsNumber > ctx2.max ? "rangeOverflow" : "rangeUnderflow";
+          (_a = ctx2.onInvalid) == null ? void 0 : _a.call(ctx2, {
+            reason,
+            value: ctx2.formattedValue,
+            valueAsNumber: ctx2.valueAsNumber
           });
+        },
+        syncInputValue(ctx2) {
+          const input = dom.getInputEl(ctx2);
+          if (!input || input.value == ctx2.value)
+            return;
+          const value = utils.parse(ctx2, input.value);
+          ctx2.value = utils.sanitize(ctx2, value);
+        },
+        setCursorPoint(ctx2, evt) {
+          ctx2.scrubberCursorPoint = evt.point;
+        },
+        clearCursorPoint(ctx2) {
+          ctx2.scrubberCursorPoint = null;
+        },
+        setVirtualCursorPosition(ctx2) {
+          const cursor = dom.getCursorEl(ctx2);
+          if (!cursor || !ctx2.scrubberCursorPoint)
+            return;
+          const { x, y } = ctx2.scrubberCursorPoint;
+          cursor.style.transform = `translate3d(${x}px, ${y}px, 0px)`;
+        },
+        dispatchChangeEvent(ctx2) {
+          dispatchInputValueEvent(dom.getInputEl(ctx2), ctx2.formattedValue);
         }
-        function onMouseup() {
-          send("POINTER_UP_SCRUBBER");
-        }
-        return callAll2(addDomEvent(doc, "mousemove", onMousemove, false), addDomEvent(doc, "mouseup", onMouseup, false));
-      }
-    },
-    actions: {
-      focusInput(ctx2) {
-        if (!ctx2.focusInputOnChange)
-          return;
-        const input = dom.getInputEl(ctx2);
-        raf(() => input == null ? void 0 : input.focus());
-      },
-      increment(ctx2, evt) {
-        ctx2.value = utils.increment(ctx2, evt.step);
-      },
-      decrement(ctx2, evt) {
-        ctx2.value = utils.decrement(ctx2, evt.step);
-      },
-      clampValue(ctx2) {
-        ctx2.value = utils.clamp(ctx2);
-      },
-      roundValue(ctx2) {
-        if (ctx2.value !== "") {
-          ctx2.value = utils.round(ctx2);
-        }
-      },
-      setValue(ctx2, evt) {
-        var _a, _b;
-        const value = (_b = (_a = evt.target) == null ? void 0 : _a.value) != null ? _b : evt.value;
-        ctx2.value = utils.sanitize(ctx2, utils.parse(ctx2, value.toString()));
-      },
-      clearValue(ctx2) {
-        ctx2.value = "";
-      },
-      setToMax(ctx2) {
-        ctx2.value = ctx2.max.toString();
-      },
-      setToMin(ctx2) {
-        ctx2.value = ctx2.min.toString();
-      },
-      setHint(ctx2, evt) {
-        ctx2.hint = evt.hint;
-      },
-      clearHint(ctx2) {
-        ctx2.hint = null;
-      },
-      setHintToSet(ctx2) {
-        ctx2.hint = "set";
-      },
-      invokeOnChange(ctx2) {
-        var _a;
-        (_a = ctx2.onChange) == null ? void 0 : _a.call(ctx2, {
-          value: ctx2.value,
-          valueAsNumber: ctx2.valueAsNumber
-        });
-      },
-      invokeOnInvalid(ctx2) {
-        var _a;
-        if (!ctx2.isOutOfRange)
-          return;
-        const reason = ctx2.valueAsNumber > ctx2.max ? "rangeOverflow" : "rangeUnderflow";
-        (_a = ctx2.onInvalid) == null ? void 0 : _a.call(ctx2, {
-          reason,
-          value: ctx2.formattedValue,
-          valueAsNumber: ctx2.valueAsNumber
-        });
-      },
-      syncInputValue(ctx2) {
-        const input = dom.getInputEl(ctx2);
-        if (!input || input.value == ctx2.value)
-          return;
-        const value = utils.parse(ctx2, input.value);
-        ctx2.value = utils.sanitize(ctx2, value);
       },
-      setCursorPoint(ctx2, evt) {
-        ctx2.scrubberCursorPoint = evt.point;
-      },
-      clearCursorPoint(ctx2) {
-        ctx2.scrubberCursorPoint = null;
-      },
-      updateCursor(ctx2) {
-        const cursor = dom.getCursorEl(ctx2);
-        if (!cursor || !ctx2.scrubberCursorPoint)
-          return;
-        const { x, y } = ctx2.scrubberCursorPoint;
-        cursor.style.transform = `translate3d(${x}px, ${y}px, 0px)`;
-      },
-      addCustomCursor(ctx2) {
-        if (isSafari() || !supportsPointerEvent())
-          return;
-        dom.createVirtualCursor(ctx2);
-      },
-      removeCustomCursor(ctx2) {
-        var _a;
-        if (isSafari() || !supportsPointerEvent())
-          return;
-        (_a = dom.getCursorEl(ctx2)) == null ? void 0 : _a.remove();
-      },
-      disableTextSelection(ctx2) {
-        const doc = dom.getDoc(ctx2);
-        doc.body.style.pointerEvents = "none";
-        doc.documentElement.style.userSelect = "none";
-        doc.documentElement.style.cursor = "ew-resize";
-      },
-      restoreTextSelection(ctx2) {
-        const doc = dom.getDoc(ctx2);
-        doc.body.style.pointerEvents = "";
-        doc.documentElement.style.userSelect = "";
-        doc.documentElement.style.cursor = "";
-      }
-    },
-    hookSync: true
-  });
+      hookSync: true
+    }
+  );
 }
 export {
   connect,