@zag-js/number-input 0.1.8 → 0.1.11

package/dist/index.mjs

@@ -25,92 +25,43 @@ var dataAttr = (guard) => {
 var ariaAttr = (guard) => {
   return guard ? "true" : void 0;
 };
-function raf(fn) {
-  const id = globalThis.requestAnimationFrame(fn);
-  return function cleanup() {
-    globalThis.cancelAnimationFrame(id);
-  };
-}
-var noop = () => {
+var MAX_Z_INDEX = 2147483647;
+var runIfFn = (v, ...a) => {
+  const res = typeof v === "function" ? v(...a) : v;
+  return res != null ? res : void 0;
 };
-var pipe = (...fns) => (v) => fns.reduce((a, b) => b(a), v);
-function getListenerElements() {
-  ;
-  globalThis.__listenerElements__ = globalThis.__listenerElements__ || /* @__PURE__ */ new Map();
-  return globalThis.__listenerElements__;
-}
-function getListenerCache() {
-  ;
-  globalThis.__listenerCache__ = globalThis.__listenerCache__ || /* @__PURE__ */ new Map();
-  return globalThis.__listenerCache__;
-}
-function globalEventBus(node, type, handler, options) {
+var callAll = (...fns) => (...a) => {
+  fns.forEach(function(fn) {
+    fn == null ? void 0 : fn(...a);
+  });
+};
+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;
-  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);
-      }
-    }
-  };
-}
-var t = (v) => Object.prototype.toString.call(v).slice(8, -1);
-var isRef = (v) => t(v) === "Object" && "current" in v;
-var runIfFn = (fn) => t(fn) === "Function" ? fn() : fn;
-function addDomEvent(target, event, listener, options) {
-  const node = isRef(target) ? target.current : runIfFn(target);
-  return globalEventBus(node, event, listener, options);
+  const agent = navigator.userAgentData;
+  return (_a = agent == null ? void 0 : agent.platform) != null ? _a : navigator.platform;
 }
-var MAX_Z_INDEX = 2147483647;
-function getNativeEvent(event) {
+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 getNativeEvent(e) {
   var _a;
-  return (_a = event.nativeEvent) != null ? _a : event;
+  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) => {
@@ -123,6 +74,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) {
@@ -134,29 +96,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);
@@ -190,7 +142,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;
@@ -198,38 +150,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) {
@@ -292,40 +216,6 @@ 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 isTouchEvent = (v) => isObject(v) && "touches" in v;
-var fallback = { pageX: 0, pageY: 0, clientX: 0, clientY: 0 };
-function getEventPoint(e, t2 = "page") {
-  const p = isTouchEvent(e) ? e.touches[0] || e.changedTouches[0] || fallback : e;
-  return { x: p[`${t2}X`], y: p[`${t2}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 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 isLeftClick = (v) => v.button === 0;
-var isModifiedEvent = (v) => v.ctrlKey || v.altKey || v.metaKey;
-
 // src/number-input.dom.ts
 var dom = {
   getDoc: (ctx) => {
@@ -385,7 +275,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) {
@@ -458,16 +348,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) {
@@ -647,6 +539,15 @@ function connect(state, send, normalize = normalizeProp) {
 
 // src/number-input.machine.ts
 import { choose, createMachine, guards, ref } from "@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 } = guards;
 function machine(ctx = {}) {
   return createMachine({
@@ -679,6 +580,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) => {
@@ -765,7 +667,7 @@ function machine(ctx = {}) {
               actions: ["clearValue", "clearHint"]
             },
             {
-              guard: and("clampOnBlur", not("isInRange")),
+              guard: and("clampOnBlur", not("isInRange"), not("isEmptyValue")),
               target: "idle",
               actions: ["clampValue", "clearHint"]
             },
@@ -855,6 +757,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";
@@ -914,7 +817,7 @@ 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: {
@@ -948,7 +851,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 = "";
@@ -1037,4 +940,3 @@ export {
   connect,
   machine
 };
-//# sourceMappingURL=index.mjs.map

package/dist/number-input.connect.d.ts

@@ -1,8 +1,9 @@
-import { PropTypes, ReactPropTypes } from "@zag-js/types";
-import { Send, State } from "./number-input.types";
-export declare function connect<T extends PropTypes = ReactPropTypes>(state: State, send: Send, normalize?: import("@zag-js/types").NormalizeProps): {
+import type { NormalizeProps, PropTypes } from "@zag-js/types";
+import type { Send, State } from "./number-input.types";
+export declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): {
     isFocused: boolean;
     isInvalid: boolean;
+    isValueEmpty: boolean;
     value: string;
     valueAsNumber: number;
     setValue(value: string | number): void;
@@ -20,4 +21,3 @@ export declare function connect<T extends PropTypes = ReactPropTypes>(state: Sta
     incrementButtonProps: T["button"];
     scrubberProps: T["element"];
 };
-//# sourceMappingURL=number-input.connect.d.ts.map

package/dist/number-input.dom.d.ts

@@ -1,4 +1,4 @@
-import { MachineContext as Ctx } from "./number-input.types";
+import type { MachineContext as Ctx } from "./number-input.types";
 export declare const dom: {
     getDoc: (ctx: Ctx) => Document;
     getWin: (ctx: Ctx) => Window & typeof globalThis;
@@ -24,4 +24,3 @@ export declare const dom: {
     };
     createVirtualCursor(ctx: Ctx): void;
 };
-//# sourceMappingURL=number-input.dom.d.ts.map

package/dist/number-input.machine.d.ts

@@ -1,3 +1,2 @@
 import type { MachineContext, MachineState, UserDefinedContext } from "./number-input.types";
 export declare function machine(ctx?: UserDefinedContext): import("@zag-js/core").Machine<MachineContext, MachineState, import("@zag-js/core").StateMachine.AnyEventObject>;
-//# sourceMappingURL=number-input.machine.d.ts.map

package/dist/number-input.types.d.ts

@@ -1,6 +1,5 @@
 import type { StateMachine as S } from "@zag-js/core";
-import { FormatDecimalOptions } from "@zag-js/number-utils";
-import type { Point } from "@zag-js/rect-utils";
+import type { FormatDecimalOptions } from "@zag-js/number-utils";
 import type { Context, DirectionProperty } from "@zag-js/types";
 declare type ValidityState = "rangeUnderflow" | "rangeOverflow";
 declare type ElementIds = Partial<{
@@ -150,6 +149,11 @@ declare type ComputedContext = Readonly<{
      * Whether the value is out of the min/max range
      */
     isOutOfRange: boolean;
+    /**
+     * @computed
+     * Whether the value is empty
+     */
+    isValueEmpty: boolean;
     /**
      * @computed
      * Whether the increment button is enabled
@@ -186,7 +190,10 @@ declare type PrivateContext = Context<{
      * @internal
      * The scrubber cursor position
      */
-    scrubberCursorPoint: Point | null;
+    scrubberCursorPoint: {
+        x: number;
+        y: number;
+    } | null;
 }>;
 export declare type MachineContext = PublicContext & PrivateContext & ComputedContext;
 export declare type MachineState = {
@@ -196,4 +203,3 @@ export declare type MachineState = {
 export declare type State = S.State<MachineContext, MachineState>;
 export declare type Send = S.Send<S.AnyEventObject>;
 export {};
-//# sourceMappingURL=number-input.types.d.ts.map

package/dist/number-input.utils.d.ts

@@ -1,7 +1,6 @@
-import type { KeyboardEvent } from "react";
 import type { MachineContext as Ctx } from "./number-input.types";
 export declare const utils: {
-    isValidNumericEvent: (ctx: Ctx, event: KeyboardEvent) => boolean;
+    isValidNumericEvent: (ctx: Ctx, event: JSX.KeyboardEvent) => boolean;
     isFloatingPoint: (v: string) => boolean;
     sanitize: (ctx: Ctx, value: string) => string;
     increment: (ctx: Ctx, step?: number) => string;
@@ -11,4 +10,3 @@ export declare const utils: {
     format: (ctx: Ctx, value: string | number) => string | number;
     round: (ctx: Ctx) => string;
 };
-//# sourceMappingURL=number-input.utils.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/number-input",
-  "version": "0.1.8",
+  "version": "0.1.11",
   "description": "Core logic for the number-input widget implemented as a state machine",
   "keywords": [
     "js",
@@ -29,12 +29,11 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/core": "0.1.5",
-    "@zag-js/dom-utils": "0.1.3",
+    "@zag-js/core": "0.1.7",
+    "@zag-js/dom-utils": "0.1.6",
     "@zag-js/number-utils": "0.1.2",
-    "@zag-js/rect-utils": "0.1.1",
-    "@zag-js/types": "0.1.2",
-    "@zag-js/utils": "0.1.1"
+    "@zag-js/types": "0.2.1",
+    "@zag-js/utils": "0.1.2"
   },
   "scripts": {
     "build:fast": "zag build",

package/dist/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAA;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAA;AAChD,YAAY,EAAE,kBAAkB,IAAI,OAAO,EAAE,MAAM,sBAAsB,CAAA"}