@zag-js/number-input 0.0.0-dev-20230925133045 → 0.0.0-dev-20230926100120

package/dist/index.js

@@ -40,9 +40,9 @@ var anatomy = (0, import_anatomy.createAnatomy)("numberInput").parts(
 var parts = anatomy.build();
 
 // src/number-input.connect.ts
-var import_dom_event2 = require("@zag-js/dom-event");
+var import_dom_event = require("@zag-js/dom-event");
 var import_dom_query2 = require("@zag-js/dom-query");
-var import_number_utils3 = require("@zag-js/number-utils");
+var import_number_utils2 = require("@zag-js/number-utils");
 
 // src/number-input.dom.ts
 var import_dom_query = require("@zag-js/dom-query");
@@ -142,54 +142,15 @@ var dom = (0, import_dom_query.createScope)({
   }
 });
 
-// src/number-input.utils.ts
-var import_dom_event = require("@zag-js/dom-event");
-var import_number_utils2 = require("@zag-js/number-utils");
-var utils = {
-  isValidNumericEvent: (ctx, event) => {
-    if (event.key == null)
-      return true;
-    const isModifier = (0, import_dom_event.isModifiedEvent)(event);
-    const isSingleKey = event.key.length === 1;
-    if (isModifier || !isSingleKey)
-      return true;
-    return ctx.validateCharacter?.(event.key) ?? utils.isFloatingPoint(event.key);
-  },
-  isFloatingPoint: (v) => /^[0-9+\-.]$/.test(v),
-  sanitize: (ctx, value) => {
-    return value.split("").filter(ctx.validateCharacter ?? utils.isFloatingPoint).join("");
-  },
-  increment: (ctx, step) => {
-    const value = (0, import_number_utils2.increment)(ctx.value, step ?? ctx.step);
-    return (0, import_number_utils2.formatDecimal)((0, import_number_utils2.clamp)(value, ctx), ctx);
-  },
-  decrement: (ctx, step) => {
-    const value = (0, import_number_utils2.decrement)(ctx.value, step ?? ctx.step);
-    return (0, import_number_utils2.formatDecimal)((0, import_number_utils2.clamp)(value, ctx), ctx);
-  },
-  clamp: (ctx) => {
-    return (0, import_number_utils2.formatDecimal)((0, import_number_utils2.clamp)(ctx.value, ctx), ctx);
-  },
-  parse: (ctx, value) => {
-    return ctx.parse?.(value) ?? value;
-  },
-  format: (ctx, value) => {
-    const _val = value.toString();
-    return ctx.format?.(_val) ?? _val;
-  },
-  round: (ctx) => {
-    return (0, import_number_utils2.formatDecimal)(ctx.value, ctx);
-  }
-};
-
 // src/number-input.connect.ts
 function connect(state, send, normalize) {
   const isFocused = state.hasTag("focus");
   const isInvalid = state.context.isOutOfRange || !!state.context.invalid;
-  const isDisabled = !!state.context.disabled;
   const isValueEmpty = state.context.isValueEmpty;
-  const isIncrementDisabled = isDisabled || !state.context.canIncrement;
-  const isDecrementDisabled = isDisabled || !state.context.canDecrement;
+  const isDisabled = state.context.isDisabled;
+  const isReadOnly = state.context.readOnly;
+  const isIncrementDisabled = isDisabled || !state.context.canIncrement || isReadOnly;
+  const isDecrementDisabled = isDisabled || !state.context.canDecrement || isReadOnly;
   const translations = state.context.translations;
   return {
     isFocused,
@@ -198,29 +159,26 @@ function connect(state, send, normalize) {
     value: state.context.formattedValue,
     valueAsNumber: state.context.valueAsNumber,
     setValue(value) {
-      send({ type: "SET_VALUE", value: value.toString() });
+      send({ type: "VALUE.SET", value: value.toString() });
     },
     clearValue() {
-      send("CLEAR_VALUE");
+      send("VALUE.CLEAR");
     },
     increment() {
-      send("INCREMENT");
+      send("VALUE.INCREMENT");
     },
     decrement() {
-      send("DECREMENT");
+      send("VALUE.DECREMENT");
     },
     setToMax() {
-      send({ type: "SET_VALUE", value: state.context.max });
+      send({ type: "VALUE.SET", value: state.context.max });
     },
     setToMin() {
-      send({ type: "SET_VALUE", value: state.context.min });
+      send({ type: "VALUE.SET", value: state.context.min });
     },
     focus() {
       dom.getInputEl(state.context)?.focus();
     },
-    blur() {
-      dom.getInputEl(state.context)?.blur();
-    },
     rootProps: normalize.element({
       id: dom.getRootId(state.context),
       ...parts.root.attrs,
@@ -270,44 +228,63 @@ function connect(state, send, normalize) {
       "aria-roledescription": "numberfield",
       "aria-valuemin": state.context.min,
       "aria-valuemax": state.context.max,
-      "aria-valuenow": isNaN(state.context.valueAsNumber) ? void 0 : state.context.valueAsNumber,
+      "aria-valuenow": Number.isNaN(state.context.valueAsNumber) ? void 0 : state.context.valueAsNumber,
       "aria-valuetext": state.context.valueText,
+      onCompositionStart() {
+        send("INPUT.COMPOSITION_START");
+      },
+      onCompositionEnd() {
+        send("INPUT.COMPOSITION_END");
+      },
       onFocus() {
-        send("FOCUS");
+        send("INPUT.FOCUS");
       },
       onBlur() {
-        send("BLUR");
+        send({ type: "INPUT.COMMIT", src: "blur" });
       },
       onChange(event) {
-        send({ type: "CHANGE", target: event.currentTarget, hint: "set" });
+        send({ type: "INPUT.CHANGE", target: event.currentTarget, hint: "set" });
+      },
+      onBeforeInput(event) {
+        try {
+          const { selectionStart, selectionEnd, value } = event.currentTarget;
+          const nextValue = value.slice(0, selectionStart) + event.data + value.slice(selectionEnd);
+          const isValid = state.context.parser.isValidPartialNumber(nextValue);
+          if (!isValid) {
+            event.preventDefault();
+          }
+        } catch {
+        }
       },
       onKeyDown(event) {
-        const evt = (0, import_dom_event2.getNativeEvent)(event);
-        if (evt.isComposing)
+        if (state.context.readOnly)
           return;
-        if (!utils.isValidNumericEvent(state.context, event)) {
-          event.preventDefault();
-        }
-        const step = (0, import_dom_event2.getEventStep)(event) * state.context.step;
+        const step = (0, import_dom_event.getEventStep)(event) * state.context.step;
         const keyMap = {
           ArrowUp() {
-            send({ type: "ARROW_UP", step });
+            send({ type: "INPUT.ARROW_UP", step });
+            event.preventDefault();
           },
           ArrowDown() {
-            send({ type: "ARROW_DOWN", step });
+            send({ type: "INPUT.ARROW_DOWN", step });
+            event.preventDefault();
           },
           Home() {
-            send("HOME");
+            send("INPUT.HOME");
+            event.preventDefault();
           },
           End() {
-            send("END");
+            send("INPUT.END");
+            event.preventDefault();
+          },
+          Enter() {
+            if (state.context.composing)
+              return;
+            send({ type: "INPUT.COMMIT", src: "enter" });
           }
         };
         const exec = keyMap[event.key];
-        if (exec) {
-          exec(event);
-          event.preventDefault();
-        }
+        exec?.(event);
       }
     }),
     decrementTriggerProps: normalize.button({
@@ -321,18 +298,23 @@ function connect(state, send, normalize) {
       tabIndex: -1,
       "aria-controls": dom.getInputId(state.context),
       onPointerDown(event) {
-        if (isDecrementDisabled)
+        if (isDecrementDisabled || !(0, import_dom_event.isLeftClick)(event))
           return;
-        send((0, import_dom_event2.isLeftClick)(event) ? { type: "PRESS_DOWN", hint: "decrement" } : { type: "FOCUS" });
-        event.preventDefault();
+        if (event.pointerType === "mouse") {
+          send({ type: "TRIGGER.PRESS_DOWN", hint: "decrement" });
+          return event.preventDefault();
+        }
+        if ((0, import_dom_query2.isHTMLElement)(event.target)) {
+          event.target?.focus();
+        }
       },
       onPointerUp() {
-        send({ type: "PRESS_UP", hint: "decrement" });
+        send({ type: "TRIGGER.PRESS_UP", hint: "decrement" });
       },
       onPointerLeave() {
         if (isDecrementDisabled)
           return;
-        send({ type: "PRESS_UP", hint: "decrement" });
+        send({ type: "TRIGGER.PRESS_UP", hint: "decrement" });
       }
     }),
     incrementTriggerProps: normalize.button({
@@ -346,16 +328,21 @@ function connect(state, send, normalize) {
       tabIndex: -1,
       "aria-controls": dom.getInputId(state.context),
       onPointerDown(event) {
-        if (isIncrementDisabled)
+        if (isIncrementDisabled || !(0, import_dom_event.isLeftClick)(event))
           return;
-        send((0, import_dom_event2.isLeftClick)(event) ? { type: "PRESS_DOWN", hint: "increment" } : { type: "FOCUS" });
-        event.preventDefault();
+        if (event.pointerType === "mouse") {
+          send({ type: "TRIGGER.PRESS_DOWN", hint: "increment" });
+          return event.preventDefault();
+        }
+        if ((0, import_dom_query2.isHTMLElement)(event.target)) {
+          event.target?.focus();
+        }
       },
       onPointerUp() {
-        send({ type: "PRESS_UP", hint: "increment" });
+        send({ type: "TRIGGER.PRESS_UP", hint: "increment" });
       },
       onPointerLeave() {
-        send({ type: "PRESS_UP", hint: "increment" });
+        send({ type: "TRIGGER.PRESS_UP", hint: "increment" });
       }
     }),
     scrubberProps: normalize.element({
@@ -366,11 +353,11 @@ function connect(state, send, normalize) {
       onMouseDown(event) {
         if (isDisabled)
           return;
-        const evt = (0, import_dom_event2.getNativeEvent)(event);
-        const point = (0, import_dom_event2.getEventPoint)(evt);
-        point.x = point.x - (0, import_number_utils3.roundToDevicePixel)(7.5);
-        point.y = point.y - (0, import_number_utils3.roundToDevicePixel)(7.5);
-        send({ type: "PRESS_DOWN_SCRUBBER", point });
+        const evt = (0, import_dom_event.getNativeEvent)(event);
+        const point = (0, import_dom_event.getEventPoint)(evt);
+        point.x = point.x - (0, import_number_utils2.roundToDevicePixel)(7.5);
+        point.y = point.y - (0, import_number_utils2.roundToDevicePixel)(7.5);
+        send({ type: "SCRUBBER.PRESS_DOWN", point });
         event.preventDefault();
       },
       style: {
@@ -381,12 +368,57 @@ function connect(state, send, normalize) {
 }
 
 // src/number-input.machine.ts
+var import_number = require("@internationalized/number");
 var import_core = require("@zag-js/core");
-var import_dom_event3 = require("@zag-js/dom-event");
+var import_dom_event2 = require("@zag-js/dom-event");
 var import_dom_query3 = require("@zag-js/dom-query");
+var import_form_utils = require("@zag-js/form-utils");
 var import_mutation_observer = require("@zag-js/mutation-observer");
-var import_number_utils4 = require("@zag-js/number-utils");
+var import_number_utils3 = require("@zag-js/number-utils");
 var import_utils = require("@zag-js/utils");
+
+// src/cursor.ts
+function recordCursor(inputEl) {
+  if (inputEl.ownerDocument.activeElement !== inputEl)
+    return;
+  try {
+    const { selectionStart: start, selectionEnd: end, value } = inputEl;
+    const beforeTxt = value.substring(0, start);
+    const afterTxt = value.substring(end);
+    return {
+      start,
+      end,
+      value,
+      beforeTxt,
+      afterTxt
+    };
+  } catch {
+  }
+}
+function restoreCursor(inputEl, selection) {
+  if (inputEl.ownerDocument.activeElement !== inputEl || !selection)
+    return;
+  try {
+    const { value } = inputEl;
+    const { beforeTxt = "", afterTxt = "", start } = selection;
+    let startPos = value.length;
+    if (value.endsWith(afterTxt)) {
+      startPos = value.length - afterTxt.length;
+    } else if (value.startsWith(beforeTxt)) {
+      startPos = beforeTxt.length;
+    } else if (start != null) {
+      const beforeLastChar = beforeTxt[start - 1];
+      const newIndex = value.indexOf(beforeLastChar, start - 1);
+      if (newIndex !== -1) {
+        startPos = newIndex + 1;
+      }
+    }
+    inputEl.setSelectionRange(startPos, startPos);
+  } catch {
+  }
+}
+
+// src/number-input.machine.ts
 var { not, and } = import_core.guards;
 function machine(userContext) {
   const ctx = (0, import_utils.compact)(userContext);
@@ -396,20 +428,25 @@ function machine(userContext) {
       initial: "idle",
       context: {
         dir: "ltr",
+        locale: "en-US",
         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,
+        hint: null,
+        scrubberCursorPoint: null,
+        composing: false,
+        fieldsetDisabled: false,
+        formatter: createFormatter(ctx.locale || "en-US", ctx.formatOptions),
+        parser: createParser(ctx.locale || "en-US", ctx.formatOptions),
         translations: {
           incrementLabel: "increment value",
           decrementLabel: "decrease value",
@@ -418,48 +455,56 @@ function machine(userContext) {
       },
       computed: {
         isRtl: (ctx2) => ctx2.dir === "rtl",
-        valueAsNumber: (ctx2) => (0, import_number_utils4.valueOf)(ctx2.value),
-        isAtMin: (ctx2) => (0, import_number_utils4.isAtMin)(ctx2.value, ctx2),
-        isAtMax: (ctx2) => (0, import_number_utils4.isAtMax)(ctx2.value, ctx2),
-        isOutOfRange: (ctx2) => !(0, import_number_utils4.isWithinRange)(ctx2.value, ctx2),
+        valueAsNumber: (ctx2) => ctx2.parser.parse(String(ctx2.value)) ?? 0,
+        isAtMin: (ctx2) => (0, import_number_utils3.isAtMin)(ctx2.value, ctx2),
+        isAtMax: (ctx2) => (0, import_number_utils3.isAtMax)(ctx2.value, ctx2),
+        isOutOfRange: (ctx2) => !(0, import_number_utils3.isWithinRange)(ctx2.value, ctx2),
         isValueEmpty: (ctx2) => ctx2.value === "",
+        isDisabled: (ctx2) => !!ctx2.disabled || ctx2.fieldsetDisabled,
         canIncrement: (ctx2) => ctx2.allowOverflow || !ctx2.isAtMax,
         canDecrement: (ctx2) => ctx2.allowOverflow || !ctx2.isAtMin,
         valueText: (ctx2) => ctx2.translations.valueText?.(ctx2.value),
-        formattedValue: (ctx2) => ctx2.format?.(ctx2.value).toString() ?? ctx2.value
+        formattedValue: (ctx2) => {
+          if (Number.isNaN(ctx2.valueAsNumber))
+            return ctx2.value;
+          return ctx2.formatter.format(ctx2.valueAsNumber);
+        }
       },
       watch: {
+        formatOptions: ["setFormatterAndParser", "syncInputElement"],
+        locale: ["setFormatterAndParser", "syncInputElement"],
         value: ["syncInputElement"],
         isOutOfRange: ["invokeOnInvalid"],
         scrubberCursorPoint: ["setVirtualCursorPosition"]
       },
       entry: ["syncInputValue"],
+      activities: ["trackFormControl"],
       on: {
-        SET_VALUE: {
+        "VALUE.SET": {
           actions: ["setValue", "clampValue", "setHintToSet"]
         },
-        CLEAR_VALUE: {
+        "VALUE.CLEAR": {
           actions: ["clearValue"]
         },
-        INCREMENT: {
+        "VALUE.INCREMENT": {
           actions: ["increment"]
         },
-        DECREMENT: {
+        "VALUE.DECREMENT": {
           actions: ["decrement"]
         }
       },
       states: {
         idle: {
           on: {
-            PRESS_DOWN: {
+            "TRIGGER.PRESS_DOWN": {
               target: "before:spin",
               actions: ["focusInput", "invokeOnFocus", "setHint"]
             },
-            PRESS_DOWN_SCRUBBER: {
+            "SCRUBBER.PRESS_DOWN": {
               target: "scrubbing",
               actions: ["focusInput", "invokeOnFocus", "setHint", "setCursorPoint"]
             },
-            FOCUS: {
+            "INPUT.FOCUS": {
               target: "focused",
               actions: ["focusInput", "invokeOnFocus"]
             }
@@ -470,45 +515,46 @@ function machine(userContext) {
           entry: "focusInput",
           activities: "attachWheelListener",
           on: {
-            PRESS_DOWN: {
+            "TRIGGER.PRESS_DOWN": {
               target: "before:spin",
               actions: ["focusInput", "setHint"]
             },
-            PRESS_DOWN_SCRUBBER: {
+            "SCRUBBER.PRESS_DOWN": {
               target: "scrubbing",
               actions: ["focusInput", "setHint", "setCursorPoint"]
             },
-            ARROW_UP: {
+            "INPUT.ARROW_UP": {
               actions: "increment"
             },
-            ARROW_DOWN: {
+            "INPUT.ARROW_DOWN": {
               actions: "decrement"
             },
-            HOME: {
-              actions: "setToMin"
+            "INPUT.HOME": {
+              actions: "decrementToMin"
             },
-            END: {
-              actions: "setToMax"
+            "INPUT.END": {
+              actions: "incrementToMax"
             },
-            CHANGE: {
+            "INPUT.CHANGE": {
               actions: ["setValue", "setHint"]
             },
-            BLUR: [
+            "INPUT.COMMIT": [
               {
-                guard: "isInvalidExponential",
+                guard: and("clampValueOnBlur", not("isInRange")),
                 target: "idle",
-                actions: ["clearValue", "clearHint", "invokeOnBlur"]
+                actions: ["clampValue", "syncInputElement", "clearHint", "invokeOnBlur"]
               },
               {
-                guard: and("clampOnBlur", not("isInRange"), not("isEmptyValue")),
                 target: "idle",
-                actions: ["clampValue", "clearHint", "invokeOnBlur"]
-              },
-              {
-                target: "idle",
-                actions: ["roundValue", "invokeOnBlur"]
+                actions: ["syncInputElement", "invokeOnBlur"]
               }
-            ]
+            ],
+            "INPUT.COMPOSITION_START": {
+              actions: "setComposing"
+            },
+            "INPUT.COMPOSITION_END": {
+              actions: "clearComposing"
+            }
           }
         },
         "before:spin": {
@@ -525,7 +571,7 @@ function machine(userContext) {
             }
           },
           on: {
-            PRESS_UP: {
+            "TRIGGER.PRESS_UP": {
               target: "focused",
               actions: "clearHint"
             }
@@ -547,7 +593,7 @@ function machine(userContext) {
             }
           ],
           on: {
-            PRESS_UP: {
+            "TRIGGER.PRESS_UP": {
               target: "focused",
               actions: "clearHint"
             }
@@ -558,8 +604,8 @@ function machine(userContext) {
           exit: "clearCursorPoint",
           activities: ["activatePointerLock", "trackMousemove", "setupVirtualCursor", "preventTextSelection"],
           on: {
-            POINTER_UP_SCRUBBER: "focused",
-            POINTER_MOVE_SCRUBBER: [
+            "SCRUBBER.POINTER_UP": "focused",
+            "SCRUBBER.POINTER_MOVE": [
               {
                 guard: "isIncrementHint",
                 actions: ["increment", "setCursorPoint"]
@@ -579,17 +625,26 @@ function machine(userContext) {
         CHANGE_DELAY: 300
       },
       guards: {
-        clampOnBlur: (ctx2) => !!ctx2.clampValueOnBlur,
+        clampValueOnBlur: (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")
+        isIncrementHint: (ctx2, evt) => (evt.hint ?? ctx2.hint) === "increment"
       },
       activities: {
+        trackFormControl(ctx2, _evt, { initialContext }) {
+          const inputEl = dom.getInputEl(ctx2);
+          return (0, import_form_utils.trackFormControl)(inputEl, {
+            onFieldsetDisabledChange(disabled) {
+              ctx2.fieldsetDisabled = disabled;
+            },
+            onFormReset() {
+              set.value(ctx2, initialContext.value);
+            }
+          });
+        },
         setupVirtualCursor(ctx2) {
           return dom.setupVirtualCursor(ctx2);
         },
@@ -599,31 +654,28 @@ function machine(userContext) {
         trackButtonDisabled(ctx2, _evt, { send }) {
           const btn = dom.getPressedTriggerEl(ctx2, ctx2.hint);
           return (0, import_mutation_observer.observeAttributes)(btn, ["disabled"], () => {
-            send("PRESS_UP");
+            send({ type: "TRIGGER.PRESS_UP", src: "attr" });
           });
         },
         attachWheelListener(ctx2, _evt, { send }) {
-          const input = dom.getInputEl(ctx2);
-          if (!input)
+          const inputEl = dom.getInputEl(ctx2);
+          if (!inputEl || !dom.isActiveElement(ctx2, inputEl) || !ctx2.allowMouseWheel)
             return;
           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");
+              send("VALUE.INCREMENT");
             } else if (dir === -1) {
-              send("DECREMENT");
+              send("VALUE.DECREMENT");
             }
           }
-          return (0, import_dom_event3.addDomEvent)(input, "wheel", onWheel, { passive: false });
+          return (0, import_dom_event2.addDomEvent)(inputEl, "wheel", onWheel, { passive: false });
         },
         activatePointerLock(ctx2) {
           if ((0, import_dom_query3.isSafari)())
             return;
-          return (0, import_dom_event3.requestPointerLock)(dom.getDoc(ctx2));
+          return (0, import_dom_event2.requestPointerLock)(dom.getDoc(ctx2));
         },
         trackMousemove(ctx2, _evt, { send }) {
           const doc = dom.getDoc(ctx2);
@@ -634,17 +686,17 @@ function machine(userContext) {
             if (!value.hint)
               return;
             send({
-              type: "POINTER_MOVE_SCRUBBER",
+              type: "SCRUBBER.POINTER_MOVE",
               hint: value.hint,
               point: value.point
             });
           }
           function onMouseup() {
-            send("POINTER_UP_SCRUBBER");
+            send("SCRUBBER.POINTER_UP");
           }
           return (0, import_utils.callAll)(
-            (0, import_dom_event3.addDomEvent)(doc, "mousemove", onMousemove, false),
-            (0, import_dom_event3.addDomEvent)(doc, "mouseup", onMouseup, false)
+            (0, import_dom_event2.addDomEvent)(doc, "mousemove", onMousemove, false),
+            (0, import_dom_event2.addDomEvent)(doc, "mouseup", onMouseup, false)
           );
         }
       },
@@ -653,37 +705,34 @@ function machine(userContext) {
           if (!ctx2.focusInputOnChange)
             return;
           const inputEl = dom.getInputEl(ctx2);
-          (0, import_dom_query3.raf)(() => {
-            inputEl?.focus();
-          });
+          if (dom.isActiveElement(ctx2, inputEl))
+            return;
+          (0, import_dom_query3.raf)(() => inputEl?.focus({ preventScroll: true }));
         },
         increment(ctx2, evt) {
-          set.value(ctx2, utils.increment(ctx2, evt.step));
+          const nextValue = (0, import_number_utils3.increment)(ctx2.value, evt.step ?? ctx2.step);
+          set.value(ctx2, String((0, import_number_utils3.clamp)(nextValue, ctx2)));
         },
         decrement(ctx2, evt) {
-          set.value(ctx2, utils.decrement(ctx2, evt.step));
+          const nextValue = (0, import_number_utils3.decrement)(ctx2.value, evt.step ?? ctx2.step);
+          set.value(ctx2, String((0, import_number_utils3.clamp)(nextValue, ctx2)));
         },
         clampValue(ctx2) {
-          set.value(ctx2, utils.clamp(ctx2));
-        },
-        roundValue(ctx2) {
-          if (ctx2.value === "")
-            return;
-          set.value(ctx2, utils.round(ctx2));
+          const nextValue = (0, import_number_utils3.clamp)(ctx2.value, ctx2);
+          set.value(ctx2, String(nextValue));
         },
         setValue(ctx2, evt) {
-          let value = evt.target?.value ?? evt.value;
-          value = utils.sanitize(ctx2, utils.parse(ctx2, value.toString()));
+          const value = evt.target?.value ?? evt.value;
           set.value(ctx2, value);
         },
         clearValue(ctx2) {
           set.value(ctx2, "");
         },
-        setToMax(ctx2) {
-          set.value(ctx2, ctx2.max.toString());
+        incrementToMax(ctx2) {
+          set.value(ctx2, String(ctx2.max));
         },
-        setToMin(ctx2) {
-          set.value(ctx2, ctx2.min.toString());
+        decrementToMin(ctx2) {
+          set.value(ctx2, String(ctx2.min));
         },
         setHint(ctx2, evt) {
           ctx2.hint = evt.hint;
@@ -694,15 +743,9 @@ function machine(userContext) {
         setHintToSet(ctx2) {
           ctx2.hint = "set";
         },
-        invokeOnFocus(ctx2, evt) {
-          const srcElement = (0, import_utils.match)(evt.type, {
-            PRESS_DOWN: dom.getPressedTriggerEl(ctx2, evt.hint),
-            FOCUS: dom.getInputEl(ctx2),
-            PRESS_DOWN_SCRUBBER: dom.getScrubberEl(ctx2)
-          });
+        invokeOnFocus(ctx2) {
           ctx2.onFocusChange?.({
             focused: true,
-            srcElement,
             value: ctx2.formattedValue,
             valueAsNumber: ctx2.valueAsNumber
           });
@@ -724,16 +767,20 @@ function machine(userContext) {
             valueAsNumber: ctx2.valueAsNumber
           });
         },
-        syncInputElement(ctx2) {
+        syncInputElement(ctx2, evt) {
           const inputEl = dom.getInputEl(ctx2);
-          dom.setValue(inputEl, ctx2.formattedValue);
+          const inputValue = evt.type.endsWith("CHANGE") ? ctx2.value : ctx2.formattedValue;
+          const sel = recordCursor(inputEl);
+          dom.setValue(inputEl, inputValue);
+          (0, import_dom_query3.raf)(() => {
+            restoreCursor(inputEl, sel);
+          });
         },
         syncInputValue(ctx2) {
           const inputEl = dom.getInputEl(ctx2);
           if (!inputEl || inputEl.value == ctx2.value)
             return;
-          const value = utils.parse(ctx2, inputEl.value);
-          set.value(ctx2, utils.sanitize(ctx2, value));
+          set.value(ctx2, ctx2.formattedValue);
         },
         setCursorPoint(ctx2, evt) {
           ctx2.scrubberCursorPoint = evt.point;
@@ -742,19 +789,50 @@ function machine(userContext) {
           ctx2.scrubberCursorPoint = null;
         },
         setVirtualCursorPosition(ctx2) {
-          const cursor = dom.getCursorEl(ctx2);
-          if (!cursor || !ctx2.scrubberCursorPoint)
+          const cursorEl = dom.getCursorEl(ctx2);
+          if (!cursorEl || !ctx2.scrubberCursorPoint)
             return;
           const { x, y } = ctx2.scrubberCursorPoint;
-          cursor.style.transform = `translate3d(${x}px, ${y}px, 0px)`;
+          cursorEl.style.transform = `translate3d(${x}px, ${y}px, 0px)`;
+        },
+        setComposing(ctx2) {
+          ctx2.composing = true;
+        },
+        clearComposing(ctx2) {
+          ctx2.composing = false;
+        },
+        setFormatterAndParser(ctx2) {
+          if (!ctx2.locale)
+            return;
+          ctx2.formatter = createFormatter(ctx2.locale, ctx2.formatOptions);
+          ctx2.parser = createParser(ctx2.locale, ctx2.formatOptions);
         }
+      },
+      compareFns: {
+        formatOptions: (a, b) => (0, import_utils.isEqual)(a, b)
       }
     }
   );
 }
+var defaultFormatOptions = {
+  style: "decimal",
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 20
+};
+var createFormatter = (locale, options = {}) => {
+  const formatOptions = Object.assign({}, defaultFormatOptions, options);
+  return (0, import_core.ref)(new Intl.NumberFormat(locale, formatOptions));
+};
+var createParser = (locale, options = {}) => {
+  const formatOptions = Object.assign({}, defaultFormatOptions, options);
+  return (0, import_core.ref)(new import_number.NumberParser(locale, formatOptions));
+};
 var invoke = {
   onChange: (ctx) => {
-    ctx.onValueChange?.({ value: ctx.value, valueAsNumber: ctx.valueAsNumber });
+    ctx.onValueChange?.({
+      value: ctx.value,
+      valueAsNumber: ctx.valueAsNumber
+    });
   }
 };
 var set = {