@zag-js/number-input 0.1.10 → 0.1.13

package/dist/index.js

@@ -1,25 +1,8 @@
 "use strict";
 var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-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));
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -49,36 +32,70 @@ var dataAttr = (guard) => {
 var ariaAttr = (guard) => {
   return guard ? "true" : void 0;
 };
-var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
+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 noop = () => {
+var callAll = (...fns) => (...a) => {
+  fns.forEach(function(fn) {
+    fn == null ? void 0 : fn(...a);
+  });
 };
-var pipe = (...fns) => (v) => fns.reduce((a, b) => b(a), v);
-var isRef = (v) => hasProp(v, "current");
-function addDomEvent(target, eventName, handler, options) {
-  const node = isRef(target) ? target.current : runIfFn(target);
-  node == null ? void 0 : node.addEventListener(eventName, handler, options);
-  return () => {
-    node == null ? void 0 : node.removeEventListener(eventName, handler, options);
-  };
+var isArray = (v) => Array.isArray(v);
+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() {
+  const agent = navigator.userAgentData;
+  return (agent == null ? void 0 : agent.platform) ?? navigator.platform;
 }
-function raf(fn) {
-  const id = globalThis.requestAnimationFrame(fn);
-  return function cleanup() {
-    globalThis.cancelAnimationFrame(id);
+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;
+}
+function isWindow(value) {
+  return (value == null ? void 0 : value.toString()) === "[object Window]";
+}
+function getDocument(el) {
+  if (isWindow(el))
+    return el.document;
+  if (isDocument(el))
+    return el;
+  return (el == null ? void 0 : el.ownerDocument) ?? document;
+}
+function defineDomHelpers(helpers) {
+  const dom2 = {
+    getRootNode: (ctx) => {
+      var _a;
+      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 {
+    ...dom2,
+    ...helpers
   };
 }
-var MAX_Z_INDEX = 2147483647;
 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 noop;
+    return;
   const attrs = Array.isArray(attributes) ? attributes : [attributes];
   const win = node.ownerDocument.defaultView || window;
   const obs = new win.MutationObserver((changes) => {
@@ -91,6 +108,16 @@ function observeAttributes(node, attributes, fn) {
   obs.observe(node, { attributes: true, attributeFilter: attrs });
   return () => obs.disconnect();
 }
+var fallback = {
+  pageX: 0,
+  pageY: 0,
+  clientX: 0,
+  clientY: 0
+};
+function getEventPoint(event, type = "page") {
+  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"]);
 var ARROW_KEYS = /* @__PURE__ */ new Set(["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"]);
 function getEventStep(event) {
@@ -102,6 +129,20 @@ function getEventStep(event) {
     return isSkipKey ? 10 : 1;
   }
 }
+var isRef = (v) => hasProp(v, "current");
+function addDomEvent(target, eventName, handler, options) {
+  const node = isRef(target) ? target.current : runIfFn(target);
+  node == null ? void 0 : node.addEventListener(eventName, handler, options);
+  return () => {
+    node == null ? void 0 : node.removeEventListener(eventName, handler, options);
+  };
+}
+function raf(fn) {
+  const id = globalThis.requestAnimationFrame(fn);
+  return function cleanup() {
+    globalThis.cancelAnimationFrame(id);
+  };
+}
 function addPointerlockChangeListener(doc, fn) {
   return addDomEvent(doc, "pointerlockchange", fn, false);
 }
@@ -134,7 +175,7 @@ function requestPointerLock(doc, handlers = {}) {
   if (!supported)
     return;
   body.requestPointerLock();
-  const cleanup = pipe(addPointerlockChangeListener(doc, onPointerChange), addPointerlockErrorListener(doc, onPointerError));
+  const cleanup = callAll(addPointerlockChangeListener(doc, onPointerChange), addPointerlockErrorListener(doc, onPointerError));
   return function dispose() {
     if (!supported)
       return;
@@ -144,7 +185,6 @@ function requestPointerLock(doc, handlers = {}) {
 }
 
 // ../../utilities/number/dist/index.mjs
-var __pow = Math.pow;
 function wrap(num, max) {
   return (num % max + max) % max;
 }
@@ -198,7 +238,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;
@@ -208,89 +248,37 @@ function decimalOperation(a, op, b) {
 }
 var nf = new Intl.NumberFormat("en-US", { style: "decimal", maximumFractionDigits: 20 });
 
-// ../../utilities/rect/dist/index.mjs
-var isArray = (v) => Array.isArray(v);
-var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
-var hasProp2 = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
-var isTouchEvent = (v) => isObject(v) && hasProp2(v, "touches");
-var fallback = { pageX: 0, pageY: 0, clientX: 0, clientY: 0 };
-function getEventPoint(e, t = "page") {
-  const p = isTouchEvent(e) ? e.touches[0] || e.changedTouches[0] || fallback : e;
-  return { x: p[`${t}X`], y: p[`${t}Y`] };
-}
-
-// ../../types/dist/index.mjs
-function createNormalizer(fn) {
-  return new Proxy({}, {
-    get() {
-      return fn;
-    }
-  });
-}
-var normalizeProp = createNormalizer((v) => v);
-
-// ../../utilities/core/dist/index.mjs
-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;
-}
-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();
-var supportsPointerEvent = () => isDom() && window.onpointerdown === null;
-var isLeftClick = (v) => v.button === 0;
-var isModifiedEvent = (v) => v.ctrlKey || v.altKey || v.metaKey;
-var pipe2 = (...fns) => (v) => fns.reduce((a, b) => b(a), v);
-
 // src/number-input.dom.ts
-var dom = {
-  getDoc: (ctx) => {
-    var _a;
-    return (_a = ctx.doc) != null ? _a : document;
-  },
-  getWin: (ctx) => {
-    var _a;
-    return (_a = dom.getDoc(ctx).defaultView) != null ? _a : window;
-  },
-  getRootNode: (ctx) => {
-    var _a;
-    return (_a = ctx.rootNode) != null ? _a : dom.getDoc(ctx);
-  },
+var dom = defineDomHelpers({
   getRootId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `number-input:${ctx.uid}`;
+    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.uid}: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.uid}: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.uid}: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.uid}:scrubber`;
+    var _a;
+    return ((_a = ctx.ids) == null ? void 0 : _a.scrubber) ?? `number-input:${ctx.id}:scrubber`;
   },
-  getCursorId: (ctx) => `number-input:${ctx.uid}:cursor`,
+  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.uid}:label`;
+    var _a;
+    return ((_a = ctx.ids) == null ? void 0 : _a.label) ?? `number-input:${ctx.id}:label`;
   },
-  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)),
+  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)),
   getMousementValue(ctx, event) {
     const x = roundToDevicePixel(event.movementX);
@@ -335,44 +323,43 @@ var dom = {
         </svg>`;
     doc.body.appendChild(el);
   }
-};
+});
 
 // 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);
@@ -380,16 +367,18 @@ var utils = {
 };
 
 // src/number-input.connect.ts
-function connect(state, send, normalize = normalizeProp) {
+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 messages = state.context.messages;
   return {
     isFocused,
     isInvalid,
+    isValueEmpty,
     value: state.context.formattedValue,
     valueAsNumber: state.context.valueAsNumber,
     setValue(value) {
@@ -569,13 +558,21 @@ function connect(state, send, normalize = normalizeProp) {
 
 // src/number-input.machine.ts
 var import_core = require("@zag-js/core");
+
+// ../../utilities/core/dist/index.mjs
+var callAll2 = (...fns) => (...a) => {
+  fns.forEach(function(fn) {
+    fn == null ? void 0 : fn(...a);
+  });
+};
+
+// src/number-input.machine.ts
 var { not, and } = import_core.guards;
-function machine(ctx = {}) {
+function machine(ctx) {
   return (0, import_core.createMachine)({
     id: "number-input",
     initial: "unknown",
-    context: __spreadProps(__spreadValues({
-      uid: "",
+    context: {
       dir: "ltr",
       focusInputOnChange: true,
       clampValueOnBlur: true,
@@ -588,19 +585,21 @@ function machine(ctx = {}) {
       min: Number.MIN_SAFE_INTEGER,
       max: Number.MAX_SAFE_INTEGER,
       scrubberCursorPoint: null,
-      invalid: false
-    }, ctx), {
-      messages: __spreadValues({
+      invalid: false,
+      ...ctx,
+      messages: {
         incrementLabel: "increment value",
-        decrementLabel: "decrease value"
-      }, ctx.messages)
-    }),
+        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) => {
@@ -608,8 +607,8 @@ function machine(ctx = {}) {
         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;
+        var _a;
+        return ((_a = ctx2.format) == null ? void 0 : _a.call(ctx2, ctx2.value).toString()) ?? ctx2.value;
       }
     },
     watch: {
@@ -635,7 +634,7 @@ function machine(ctx = {}) {
         on: {
           SETUP: {
             target: "idle",
-            actions: ["setupDocument", "syncInputValue"]
+            actions: "syncInputValue"
           }
         }
       },
@@ -687,7 +686,7 @@ function machine(ctx = {}) {
               actions: ["clearValue", "clearHint"]
             },
             {
-              guard: and("clampOnBlur", not("isInRange")),
+              guard: and("clampOnBlur", not("isInRange"), not("isEmptyValue")),
               target: "idle",
               actions: ["clampValue", "clearHint"]
             },
@@ -773,14 +772,9 @@ function machine(ctx = {}) {
       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";
-      },
-      isIncrementHint: (ctx2, evt) => {
-        var _a;
-        return ((_a = evt.hint) != null ? _a : ctx2.hint) === "increment";
-      },
+      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: {
@@ -836,17 +830,10 @@ function machine(ctx = {}) {
         function onMouseup() {
           send("POINTER_UP_SCRUBBER");
         }
-        return pipe2(addDomEvent(doc, "mousemove", onMousemove, false), addDomEvent(doc, "mouseup", onMouseup, false));
+        return callAll2(addDomEvent(doc, "mousemove", onMousemove, false), addDomEvent(doc, "mouseup", onMouseup, false));
       }
     },
     actions: {
-      setupDocument: (ctx2, evt) => {
-        if (evt.doc)
-          ctx2.doc = (0, import_core.ref)(evt.doc);
-        if (evt.root)
-          ctx2.rootNode = (0, import_core.ref)(evt.root);
-        ctx2.uid = evt.id;
-      },
       focusInput(ctx2) {
         if (!ctx2.focusInputOnChange)
           return;
@@ -868,9 +855,9 @@ function machine(ctx = {}) {
         }
       },
       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));
+        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 = "";
@@ -955,3 +942,8 @@ function machine(ctx = {}) {
     hookSync: true
   });
 }
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  connect,
+  machine
+});