@zag-js/number-input 0.1.3 → 0.1.6

package/dist/index.mjs

@@ -22,19 +22,9 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var dataAttr = (guard) => {
   return guard ? "" : void 0;
 };
-function nextTick(fn) {
-  const set = /* @__PURE__ */ new Set();
-  function raf2(fn2) {
-    const id = globalThis.requestAnimationFrame(fn2);
-    set.add(() => globalThis.cancelAnimationFrame(id));
-  }
-  raf2(() => raf2(fn));
-  return function cleanup() {
-    set.forEach(function(fn2) {
-      fn2();
-    });
-  };
-}
+var ariaAttr = (guard) => {
+  return guard ? "true" : void 0;
+};
 function raf(fn) {
   const id = globalThis.requestAnimationFrame(fn);
   return function cleanup() {
@@ -113,11 +103,11 @@ function addDomEvent(target, event, listener, options) {
   const node = isRef(target) ? target.current : runIfFn(target);
   return globalEventBus(node, event, listener, options);
 }
+var MAX_Z_INDEX = 2147483647;
 function getNativeEvent(event) {
   var _a;
   return (_a = event.nativeEvent) != null ? _a : event;
 }
-var MAX_Z_INDEX = 2147483647;
 var PAGE_KEYS = /* @__PURE__ */ new Set(["PageUp", "PageDown"]);
 var ARROW_KEYS = /* @__PURE__ */ new Set(["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"]);
 function getEventStep(event) {
@@ -238,40 +228,11 @@ findByTypeahead.defaultOptions = {
 };
 
 // ../../utilities/number/dist/index.mjs
-var __defProp2 = Object.defineProperty;
-var __defProps2 = Object.defineProperties;
-var __getOwnPropDescs2 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols2 = Object.getOwnPropertySymbols;
-var __hasOwnProp2 = Object.prototype.hasOwnProperty;
-var __propIsEnum2 = Object.prototype.propertyIsEnumerable;
 var __pow = Math.pow;
-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 __spreadProps2 = (a, b) => __defProps2(a, __getOwnPropDescs2(b));
-var nf = new Intl.NumberFormat("en-US", { style: "decimal", maximumFractionDigits: 20 });
-function formatter(n) {
-  return parseFloat(nf.format(n));
-}
 function wrap2(num, max) {
   return (num % max + max) % max;
 }
-function round(v, t2) {
-  let num = valueOf(v);
-  const p = __pow(10, t2 != null ? t2 : 10);
-  num = Math.round(num * p) / p;
-  return t2 ? num.toFixed(t2) : v.toString();
-}
-function roundToPx(num) {
+function roundToDevicePixel(num) {
   if (typeof window === "undefined")
     return Math.round(num);
   const dp = window.devicePixelRatio;
@@ -283,30 +244,28 @@ function clamp(v, o) {
 function countDecimals(value) {
   if (!Number.isFinite(value))
     return 0;
-  let e = 1;
-  let p = 0;
+  let e = 1, p = 0;
   while (Math.round(value * e) / e !== value) {
     e *= 10;
     p += 1;
   }
   return p;
 }
-var increment = (v, s) => formatter(valueOf(v) + s);
-var decrement = (v, s) => formatter(valueOf(v) - s);
-var multiply = (v, s) => formatter(valueOf(v) * s);
+var increment = (v, s) => decimalOperation(valueOf(v), "+", s);
+var decrement = (v, s) => decimalOperation(valueOf(v), "-", s);
 function valueOf(v) {
   if (typeof v === "number")
     return v;
   const num = parseFloat(v.toString().replace(/[^\w.-]+/g, ""));
   return !Number.isNaN(num) ? num : 0;
 }
-function getMaxPrecision(o) {
-  var _a;
-  const stepPrecision = countDecimals(o.step);
-  return Math.max(stepPrecision, (_a = o.precision) != null ? _a : 0);
-}
-function roundToPrecision(v, o) {
-  return round(v, getMaxPrecision(__spreadProps2(__spreadValues2({}, o), { value: v })));
+function formatDecimal(v, o) {
+  return new Intl.NumberFormat("en-US", {
+    useGrouping: false,
+    style: "decimal",
+    minimumFractionDigits: o.minFractionDigits,
+    maximumFractionDigits: o.maxFractionDigits
+  }).format(valueOf(v));
 }
 function isAtMax(v, o) {
   const val = valueOf(v);
@@ -320,6 +279,18 @@ function isWithinRange(v, o) {
   const val = valueOf(v);
   return val >= o.min && val <= o.max;
 }
+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)));
+    a = Math.round(a * multiplier);
+    b = Math.round(b * multiplier);
+    result = op === "+" ? a + b : a - b;
+    result /= multiplier;
+  }
+  return result;
+}
+var nf = new Intl.NumberFormat("en-US", { style: "decimal", maximumFractionDigits: 20 });
 
 // ../../utilities/rect/dist/index.mjs
 var isArray = (v) => Array.isArray(v);
@@ -337,6 +308,19 @@ function createNormalizer(fn) {
 }
 var normalizeProp = createNormalizer((v) => v);
 
+// ../../utilities/core/dist/index.mjs
+var pipe2 = (...fns) => (v) => fns.reduce((a, b) => b(a), v);
+var platform = (v) => isDom() && v.test(navigator.platform);
+var ua = (v) => isDom() && v.test(navigator.userAgent);
+var isDom = () => !!(typeof window !== "undefined");
+var isMac = () => platform(/^Mac/);
+var isIPhone = () => platform(/^iPhone/);
+var isIPad = () => platform(/^iPad/) || isMac() && navigator.maxTouchPoints > 1;
+var isIos = () => isIPhone() || isIPad();
+var isSafari = () => ua(/^((?!chrome|android).)*safari/i);
+var supportsPointerEvent = () => isDom() && window.onpointerdown === null;
+var isModifiedEvent = (v) => v.ctrlKey || v.altKey || v.metaKey;
+
 // src/number-input.dom.ts
 var dom = {
   getDoc: (ctx) => {
@@ -347,6 +331,10 @@ var dom = {
     var _a;
     return (_a = dom.getDoc(ctx).defaultView) != null ? _a : window;
   },
+  getRootNode: (ctx) => {
+    var _a;
+    return (_a = ctx.rootNode) != null ? _a : dom.getDoc(ctx);
+  },
   getRootId: (ctx) => {
     var _a, _b;
     return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `number-input:${ctx.uid}`;
@@ -372,14 +360,14 @@ var dom = {
     var _a, _b;
     return (_b = (_a = ctx.ids) == null ? void 0 : _a.label) != null ? _b : `number-input:${ctx.uid}:label`;
   },
-  getInputEl: (ctx) => dom.getDoc(ctx).getElementById(dom.getInputId(ctx)),
-  getIncButtonEl: (ctx) => dom.getDoc(ctx).getElementById(dom.getIncButtonId(ctx)),
-  getDecButtonEl: (ctx) => dom.getDoc(ctx).getElementById(dom.getDecButtonId(ctx)),
-  getScrubberEl: (ctx) => dom.getDoc(ctx).getElementById(dom.getScrubberId(ctx)),
+  getInputEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getInputId(ctx)),
+  getIncButtonEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getIncButtonId(ctx)),
+  getDecButtonEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getDecButtonId(ctx)),
+  getScrubberEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getScrubberId(ctx)),
   getCursorEl: (ctx) => dom.getDoc(ctx).getElementById(dom.getCursorId(ctx)),
   getMousementValue(ctx, event) {
-    const x = roundToPx(event.movementX);
-    const y = roundToPx(event.movementY);
+    const x = roundToDevicePixel(event.movementX);
+    const y = roundToDevicePixel(event.movementY);
     let hint = x > 0 ? "increment" : x < 0 ? "decrement" : null;
     if (ctx.isRtl && hint === "increment")
       hint = "decrement";
@@ -391,7 +379,7 @@ var dom = {
     };
     const win = dom.getWin(ctx);
     const width = win.innerWidth;
-    const half = roundToPx(7.5);
+    const half = roundToDevicePixel(7.5);
     point.x = wrap2(point.x + half, width) - half;
     return { hint, point };
   },
@@ -422,14 +410,6 @@ var dom = {
   }
 };
 
-// ../../utilities/core/dist/index.mjs
-var pipe2 = (...fns) => (v) => fns.reduce((a, b) => b(a), v);
-var ua = (v) => isDom() && v.test(navigator.userAgent);
-var isDom = () => !!(typeof window !== "undefined");
-var isSafari = () => ua(/^((?!chrome|android).)*safari/i);
-var supportsPointerEvent = () => isDom() && window.onpointerdown === null;
-var isModifiedEvent = (v) => v.ctrlKey || v.altKey || v.metaKey;
-
 // src/number-input.utils.ts
 var utils = {
   isValidNumericEvent: (ctx, event) => {
@@ -448,18 +428,15 @@ var utils = {
     return value.split("").filter((_a = ctx.validateCharacter) != null ? _a : utils.isFloatingPoint).join("");
   },
   increment: (ctx, step) => {
-    let value = increment(ctx.value, step != null ? step : ctx.step);
-    value = clamp(value, ctx);
-    return roundToPrecision(value, ctx);
+    const value = increment(ctx.value, step != null ? step : ctx.step);
+    return formatDecimal(clamp(value, ctx), ctx);
   },
   decrement: (ctx, step) => {
-    let value = decrement(ctx.value, step != null ? step : ctx.step);
-    value = clamp(value, ctx);
-    return roundToPrecision(value, ctx);
+    const value = decrement(ctx.value, step != null ? step : ctx.step);
+    return formatDecimal(clamp(value, ctx), ctx);
   },
   clamp: (ctx) => {
-    let value = clamp(ctx.value, ctx);
-    return roundToPrecision(value, ctx);
+    return formatDecimal(clamp(ctx.value, ctx), ctx);
   },
   parse: (ctx, value) => {
     var _a, _b;
@@ -471,7 +448,7 @@ var utils = {
     return (_b = (_a = ctx.format) == null ? void 0 : _a.call(ctx, _val)) != null ? _b : _val;
   },
   round: (ctx) => {
-    return roundToPrecision(ctx.value, ctx);
+    return formatDecimal(ctx.value, ctx);
   }
 };
 
@@ -492,7 +469,7 @@ function connect(state, send, normalize = normalizeProp) {
       send({ type: "SET_VALUE", value: value.toString() });
     },
     clearValue() {
-      send({ type: "SET_VALUE", value: "" });
+      send("CLEAR_VALUE");
     },
     increment() {
       send("INCREMENT");
@@ -522,6 +499,14 @@ function connect(state, send, normalize = normalizeProp) {
       id: dom.getLabelId(state.context),
       htmlFor: dom.getInputId(state.context)
     }),
+    groupProps: normalize.element({
+      "data-part": "group",
+      role: "group",
+      "aria-disabled": isDisabled,
+      "data-disabled": dataAttr(isDisabled),
+      "data-invalid": dataAttr(isInvalid),
+      "aria-invalid": ariaAttr(state.context.invalid)
+    }),
     inputProps: normalize.input({
       "data-part": "input",
       name: state.context.name,
@@ -539,7 +524,7 @@ function connect(state, send, normalize = normalizeProp) {
       autoCorrect: "off",
       spellCheck: "false",
       type: "text",
-      "aria-roledescription": "number field",
+      "aria-roledescription": !isIos() ? "number field" : void 0,
       "aria-valuemin": state.context.min,
       "aria-valuemax": state.context.max,
       "aria-valuenow": isNaN(state.context.valueAsNumber) ? void 0 : state.context.valueAsNumber,
@@ -563,7 +548,7 @@ function connect(state, send, normalize = normalizeProp) {
         if (!utils.isValidNumericEvent(state.context, event)) {
           event.preventDefault();
         }
-        const step = multiply(getEventStep(event), state.context.step);
+        const step = getEventStep(event) * state.context.step;
         const keyMap = {
           ArrowUp() {
             send({ type: "ARROW_UP", step });
@@ -587,6 +572,7 @@ function connect(state, send, normalize = normalizeProp) {
     }),
     decrementButtonProps: normalize.button({
       "data-part": "spin-button",
+      "data-type": "decrement",
       id: dom.getDecButtonId(state.context),
       disabled: isDecrementDisabled,
       "data-disabled": dataAttr(isDecrementDisabled),
@@ -611,6 +597,7 @@ function connect(state, send, normalize = normalizeProp) {
     }),
     incrementButtonProps: normalize.button({
       "data-part": "spin-button",
+      "data-type": "increment",
       id: dom.getIncButtonId(state.context),
       disabled: isIncrementDisabled,
       "data-disabled": dataAttr(isIncrementDisabled),
@@ -642,8 +629,8 @@ function connect(state, send, normalize = normalizeProp) {
         const evt = getNativeEvent(event);
         event.preventDefault();
         const point = getEventPoint(evt);
-        point.x = point.x - roundToPx(7.5);
-        point.y = point.y - roundToPx(7.5);
+        point.x = point.x - roundToDevicePixel(7.5);
+        point.y = point.y - roundToDevicePixel(7.5);
         send({ type: "PRESS_DOWN_SCRUBBER", point });
       },
       style: {
@@ -673,8 +660,6 @@ function machine(ctx = {}) {
       step: 1,
       min: Number.MIN_SAFE_INTEGER,
       max: Number.MAX_SAFE_INTEGER,
-      precision: 0,
-      inputSelection: null,
       scrubberCursorPoint: null,
       invalid: false
     }, ctx), {
@@ -704,20 +689,26 @@ function machine(ctx = {}) {
       value: ["invokeOnChange"],
       isOutOfRange: ["invokeOnInvalid"]
     },
-    entry: ["syncInputValue"],
     on: {
       SET_VALUE: {
         actions: ["setValue", "setHintToSet"]
       },
-      INCREMENT: { actions: ["increment"] },
-      DECREMENT: { actions: ["decrement"] }
+      CLEAR_VALUE: {
+        actions: ["clearValue"]
+      },
+      INCREMENT: {
+        actions: ["increment"]
+      },
+      DECREMENT: {
+        actions: ["decrement"]
+      }
     },
     states: {
       unknown: {
         on: {
           SETUP: {
             target: "idle",
-            actions: "setupDocument"
+            actions: ["setupDocument", "syncInputValue"]
           }
         }
       },
@@ -781,6 +772,7 @@ function machine(ctx = {}) {
       },
       "before:spin": {
         tags: ["focus"],
+        activities: "trackButtonDisabled",
         entry: choose([
           { guard: "isIncrementHint", actions: "increment" },
           { guard: "isDecrementHint", actions: "decrement" }
@@ -876,26 +868,23 @@ function machine(ctx = {}) {
           send("PRESS_UP");
         });
       },
-      attachWheelListener(ctx2) {
-        const cleanups = [];
-        cleanups.push(nextTick(() => {
-          const input = dom.getInputEl(ctx2);
-          if (!input)
+      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)
             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)
-              ctx2.value = utils.increment(ctx2);
-            else if (dir === -1)
-              ctx2.value = utils.decrement(ctx2);
+          event.preventDefault();
+          const dir = Math.sign(event.deltaY) * -1;
+          if (dir === 1) {
+            send("INCREMENT");
+          } else if (dir === -1) {
+            send("DECREMENT");
           }
-          cleanups.push(addDomEvent(input, "wheel", onWheel, { passive: false }));
-        }));
-        return () => cleanups.forEach((c) => c());
+        }
+        return addDomEvent(input, "wheel", onWheel, { passive: false });
       },
       activatePointerLock(ctx2) {
         if (isSafari() || !supportsPointerEvent())
@@ -910,7 +899,11 @@ function machine(ctx = {}) {
           const value = dom.getMousementValue(ctx2, event);
           if (!value.hint)
             return;
-          send({ type: "POINTER_MOVE_SCRUBBER", hint: value.hint, point: value.point });
+          send({
+            type: "POINTER_MOVE_SCRUBBER",
+            hint: value.hint,
+            point: value.point
+          });
         }
         function onMouseup() {
           send("POINTER_UP_SCRUBBER");
@@ -922,6 +915,8 @@ function machine(ctx = {}) {
       setupDocument: (ctx2, evt) => {
         if (evt.doc)
           ctx2.doc = ref(evt.doc);
+        if (evt.root)
+          ctx2.rootNode = ref(evt.root);
         ctx2.uid = evt.id;
       },
       focusInput(ctx2) {
@@ -940,7 +935,9 @@ function machine(ctx = {}) {
         ctx2.value = utils.clamp(ctx2);
       },
       roundValue(ctx2) {
-        ctx2.value = utils.round(ctx2);
+        if (ctx2.value !== "") {
+          ctx2.value = utils.round(ctx2);
+        }
       },
       setValue(ctx2, evt) {
         var _a, _b;
@@ -967,14 +964,21 @@ function machine(ctx = {}) {
       },
       invokeOnChange(ctx2) {
         var _a;
-        (_a = ctx2.onChange) == null ? void 0 : _a.call(ctx2, { value: ctx2.value, valueAsNumber: ctx2.valueAsNumber });
+        (_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 });
+        (_a = ctx2.onInvalid) == null ? void 0 : _a.call(ctx2, {
+          reason,
+          value: ctx2.formattedValue,
+          valueAsNumber: ctx2.valueAsNumber
+        });
       },
       syncInputValue(ctx2) {
         const input = dom.getInputEl(ctx2);
@@ -993,7 +997,8 @@ function machine(ctx = {}) {
         const cursor = dom.getCursorEl(ctx2);
         if (!cursor || !ctx2.scrubberCursorPoint)
           return;
-        cursor.style.transform = `translate3d(${ctx2.scrubberCursorPoint.x}px, ${ctx2.scrubberCursorPoint.y}px, 0px)`;
+        const { x, y } = ctx2.scrubberCursorPoint;
+        cursor.style.transform = `translate3d(${x}px, ${y}px, 0px)`;
       },
       addCustomCursor(ctx2) {
         if (isSafari() || !supportsPointerEvent())
@@ -1001,11 +1006,10 @@ function machine(ctx = {}) {
         dom.createVirtualCursor(ctx2);
       },
       removeCustomCursor(ctx2) {
+        var _a;
         if (isSafari() || !supportsPointerEvent())
           return;
-        const doc = dom.getDoc(ctx2);
-        const el = doc.getElementById(dom.getCursorId(ctx2));
-        el == null ? void 0 : el.remove();
+        (_a = dom.getCursorEl(ctx2)) == null ? void 0 : _a.remove();
       },
       disableTextSelection(ctx2) {
         const doc = dom.getDoc(ctx2);