@zag-js/number-input 0.1.9 → 0.1.12

package/dist/index.d.ts

@@ -1,4 +1,3 @@
 export { connect } from "./number-input.connect";
 export { machine } from "./number-input.machine";
 export type { UserDefinedContext as Context } from "./number-input.types";
-//# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -1,3 +1,4 @@
+"use strict";
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -42,103 +43,95 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // ../../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;
 };
 var ariaAttr = (guard) => {
   return guard ? "true" : void 0;
 };
-function raf(fn) {
-  const id = globalThis.requestAnimationFrame(fn);
-  return function cleanup() {
-    globalThis.cancelAnimationFrame(id);
-  };
-}
-var isDom = () => typeof window !== "undefined";
-var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
-var isTouchDevice = isDom() && !!navigator.maxTouchPoints;
+var MAX_Z_INDEX = 2147483647;
 var runIfFn = (v, ...a) => {
   const res = typeof v === "function" ? v(...a) : v;
   return res != null ? 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);
-function getListenerElements() {
-  ;
-  globalThis.__listenerElements__ = globalThis.__listenerElements__ || /* @__PURE__ */ new Map();
-  return globalThis.__listenerElements__;
+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() {
+  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();
+function isDocument(el) {
+  return el.nodeType === Node.DOCUMENT_NODE;
 }
-function getListenerCache() {
-  ;
-  globalThis.__listenerCache__ = globalThis.__listenerCache__ || /* @__PURE__ */ new Map();
-  return globalThis.__listenerCache__;
+function isWindow(value) {
+  return (value == null ? void 0 : value.toString()) === "[object Window]";
 }
-function addGlobalEventListener(node, type, handler, options) {
+function getDocument(el) {
   var _a;
-  if (!node)
-    return noop;
-  const hash = JSON.stringify({ type, options });
-  const listenerElements = getListenerElements();
-  const listenerCache = getListenerCache();
-  const group = listenerElements.get(node);
-  if (!listenerElements.has(node)) {
-    const group2 = /* @__PURE__ */ new Map([[hash, /* @__PURE__ */ new Set([handler])]]);
-    listenerElements.set(node, group2);
-  } else if (group == null ? void 0 : group.has(hash)) {
-    (_a = group == null ? void 0 : group.get(hash)) == null ? void 0 : _a.add(handler);
-  } else {
-    group == null ? void 0 : group.set(hash, /* @__PURE__ */ new Set([handler]));
-  }
-  function attach(node2) {
-    var _a2, _b;
-    function listener(event) {
-      var _a3;
-      const group2 = listenerElements.get(node2);
-      (_a3 = group2 == null ? void 0 : group2.get(hash)) == null ? void 0 : _a3.forEach((fn) => fn(event));
-    }
-    if (!(listenerCache == null ? void 0 : listenerCache.has(node2))) {
-      listenerCache.set(node2, /* @__PURE__ */ new Map([[hash, listener]]));
-      node2.addEventListener(type, listener, options);
-      return;
-    }
-    if (!((_a2 = listenerCache == null ? void 0 : listenerCache.get(node2)) == null ? void 0 : _a2.has(hash))) {
-      (_b = listenerCache.get(node2)) == null ? void 0 : _b.set(hash, listener);
-      node2.addEventListener(type, listener, options);
-    }
-  }
-  attach(node);
-  return function remove() {
-    var _a2, _b, _c, _d;
-    if (!listenerElements.has(node))
-      return;
-    const group2 = listenerElements.get(node);
-    (_a2 = group2 == null ? void 0 : group2.get(hash)) == null ? void 0 : _a2.delete(handler);
-    if (((_b = group2 == null ? void 0 : group2.get(hash)) == null ? void 0 : _b.size) === 0) {
-      const listener = (_c = listenerCache.get(node)) == null ? void 0 : _c.get(hash);
-      node.removeEventListener(type, listener, options);
-      group2 == null ? void 0 : group2.delete(hash);
-      (_d = listenerCache.get(node)) == null ? void 0 : _d.delete(hash);
-      if ((group2 == null ? void 0 : group2.size) === 0) {
-        listenerElements.delete(node);
-        listenerCache.delete(node);
-      }
-    }
-  };
+  if (isWindow(el))
+    return el.document;
+  if (isDocument(el))
+    return el;
+  return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
 }
-var isRef = (v) => hasProp(v, "current");
-function addDomEvent(target, event, listener, options) {
-  const node = isRef(target) ? target.current : runIfFn(target);
-  return addGlobalEventListener(node, event, listener, options);
+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;
+    },
+    getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
+    getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
+  };
+  return __spreadValues2(__spreadValues2({}, dom2), helpers);
 }
-var MAX_Z_INDEX = 2147483647;
 function getNativeEvent(e) {
   var _a;
   return (_a = e.nativeEvent) != null ? _a : 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) => {
@@ -151,6 +144,17 @@ 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") {
+  var _a, _b;
+  const point = isTouchEvent(event) ? (_b = (_a = event.touches[0]) != null ? _a : event.changedTouches[0]) != null ? _b : 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) {
@@ -162,29 +166,19 @@ function getEventStep(event) {
     return isSkipKey ? 10 : 1;
   }
 }
-function itemById(v, id) {
-  return v.find((node) => node.id === id);
-}
-function indexOfId(v, id) {
-  const item = itemById(v, id);
-  return item ? v.indexOf(item) : -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);
+  };
 }
-var getValueText = (item) => {
-  var _a, _b;
-  return (_b = (_a = item.dataset.valuetext) != null ? _a : item.textContent) != null ? _b : "";
-};
-var match = (valueText, query2) => valueText.toLowerCase().startsWith(query2.toLowerCase());
-var wrap = (v, idx) => {
-  return v.map((_, index) => v[(Math.max(idx, 0) + index) % v.length]);
-};
-function findByText(v, text, currentId) {
-  const index = currentId ? indexOfId(v, currentId) : -1;
-  let items = currentId ? wrap(v, index) : v;
-  const isSingleKey = text.length === 1;
-  if (isSingleKey) {
-    items = items.filter((item) => item.id !== currentId);
-  }
-  return items.find((item) => match(getValueText(item), text));
+function raf(fn) {
+  const id = globalThis.requestAnimationFrame(fn);
+  return function cleanup() {
+    globalThis.cancelAnimationFrame(id);
+  };
 }
 function addPointerlockChangeListener(doc, fn) {
   return addDomEvent(doc, "pointerlockchange", fn, false);
@@ -218,7 +212,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;
@@ -226,38 +220,10 @@ function requestPointerLock(doc, handlers = {}) {
     exit();
   };
 }
-function findByTypeahead(_items, options) {
-  const { state: state2, activeId, key, timeout = 350 } = options;
-  const search = state2.keysSoFar + key;
-  const isRepeated = search.length > 1 && Array.from(search).every((char) => char === search[0]);
-  const query2 = isRepeated ? search[0] : search;
-  let items = _items.slice();
-  const next = findByText(items, query2, activeId);
-  function cleanup() {
-    clearTimeout(state2.timer);
-    state2.timer = -1;
-  }
-  function update(value) {
-    state2.keysSoFar = value;
-    cleanup();
-    if (value !== "") {
-      state2.timer = +setTimeout(() => {
-        update("");
-        cleanup();
-      }, timeout);
-    }
-  }
-  update(search);
-  return next;
-}
-findByTypeahead.defaultOptions = {
-  keysSoFar: "",
-  timer: -1
-};
 
 // ../../utilities/number/dist/index.mjs
 var __pow = Math.pow;
-function wrap2(num, max) {
+function wrap(num, max) {
   return (num % max + max) % max;
 }
 function roundToDevicePixel(num) {
@@ -320,91 +286,37 @@ function decimalOperation(a, op, b) {
 }
 var nf = new Intl.NumberFormat("en-US", { style: "decimal", maximumFractionDigits: 20 });
 
-// ../../utilities/rect/dist/index.mjs
-var isDom2 = () => typeof window !== "undefined";
-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 isTouchDevice2 = isDom2() && !!navigator.maxTouchPoints;
-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 isDom3 = () => 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) => isDom3() && v.test(getPlatform());
-var vn = (v) => isDom3() && v.test(navigator.vendor);
-var isTouchDevice3 = isDom3() && !!navigator.maxTouchPoints;
-var isMac = () => pt(/^Mac/) && !isTouchDevice3;
-var isSafari = () => isApple() && vn(/apple/i);
-var isApple = () => pt(/mac|iphone|ipad|ipod/i);
-var isIos = () => isApple() && !isMac();
-var supportsPointerEvent = () => isDom3() && 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}`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `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`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.input) != null ? _b : `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`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.incBtn) != null ? _b : `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`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.decBtn) != null ? _b : `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`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.scrubber) != null ? _b : `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`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.label) != null ? _b : `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);
@@ -421,7 +333,7 @@ var dom = {
     const win = dom.getWin(ctx);
     const width = win.innerWidth;
     const half = roundToDevicePixel(7.5);
-    point.x = wrap2(point.x + half, width) - half;
+    point.x = wrap(point.x + half, width) - half;
     return { hint, point };
   },
   createVirtualCursor(ctx) {
@@ -449,7 +361,7 @@ var dom = {
         </svg>`;
     doc.body.appendChild(el);
   }
-};
+});
 
 // src/number-input.utils.ts
 var utils = {
@@ -494,16 +406,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) {
@@ -683,13 +597,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: "",
       dir: "ltr",
       focusInputOnChange: true,
       clampValueOnBlur: true,
@@ -715,6 +637,7 @@ function machine(ctx = {}) {
       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) => {
@@ -749,7 +672,7 @@ function machine(ctx = {}) {
         on: {
           SETUP: {
             target: "idle",
-            actions: ["setupDocument", "syncInputValue"]
+            actions: "syncInputValue"
           }
         }
       },
@@ -801,7 +724,7 @@ function machine(ctx = {}) {
               actions: ["clearValue", "clearHint"]
             },
             {
-              guard: and("clampOnBlur", not("isInRange")),
+              guard: and("clampOnBlur", not("isInRange"), not("isEmptyValue")),
               target: "idle",
               actions: ["clampValue", "clearHint"]
             },
@@ -891,6 +814,7 @@ function machine(ctx = {}) {
         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";
@@ -950,17 +874,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;
@@ -984,7 +901,7 @@ 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));
+        ctx2.value = utils.sanitize(ctx2, utils.parse(ctx2, value.toString()));
       },
       clearValue(ctx2) {
         ctx2.value = "";
@@ -1069,4 +986,3 @@ function machine(ctx = {}) {
     hookSync: true
   });
 }
-//# sourceMappingURL=index.js.map