@zag-js/number-input 0.2.5 → 0.2.7

package/dist/chunk-DDNK5RLW.mjs

@@ -0,0 +1,169 @@
+// ../../utilities/dom/src/platform.ts
+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 isSafari = () => isApple() && vn(/apple/i);
+var isApple = () => pt(/mac|iphone|ipad|ipod/i);
+
+// ../../utilities/dom/src/query.ts
+function isDocument(el) {
+  return el.nodeType === Node.DOCUMENT_NODE;
+}
+function isWindow(value) {
+  return (value == null ? void 0 : value.toString()) === "[object Window]";
+}
+function getDocument(el) {
+  var _a;
+  if (isWindow(el))
+    return el.document;
+  if (isDocument(el))
+    return el;
+  return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
+}
+function getWindow(el) {
+  var _a;
+  return (_a = el == null ? void 0 : el.ownerDocument.defaultView) != null ? _a : window;
+}
+function defineDomHelpers(helpers) {
+  const dom = {
+    getRootNode: (ctx) => {
+      var _a, _b;
+      return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
+    },
+    getDoc: (ctx) => getDocument(dom.getRootNode(ctx)),
+    getWin: (ctx) => {
+      var _a;
+      return (_a = dom.getDoc(ctx).defaultView) != null ? _a : window;
+    },
+    getActiveElement: (ctx) => dom.getDoc(ctx).activeElement,
+    getById: (ctx, id) => dom.getRootNode(ctx).getElementById(id),
+    createEmitter: (ctx, target) => {
+      const win = dom.getWin(ctx);
+      return function emit(evt, detail, options) {
+        const { bubbles = true, cancelable, composed = true } = options != null ? options : {};
+        const eventName = `zag:${evt}`;
+        const init = { bubbles, cancelable, composed, detail };
+        const event = new win.CustomEvent(eventName, init);
+        target.dispatchEvent(event);
+      };
+    },
+    createListener: (target) => {
+      return function listen(evt, handler) {
+        const eventName = `zag:${evt}`;
+        const listener = (e) => handler(e);
+        target.addEventListener(eventName, listener);
+        return () => target.removeEventListener(eventName, listener);
+      };
+    }
+  };
+  return {
+    ...dom,
+    ...helpers
+  };
+}
+
+// ../../utilities/core/src/guard.ts
+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);
+
+// ../../utilities/dom/src/event.ts
+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;
+
+// ../../utilities/number/src/number.ts
+function wrap(num, max) {
+  return (num % max + max) % max;
+}
+function roundToDevicePixel(num) {
+  if (typeof window === "undefined")
+    return Math.round(num);
+  const dp = window.devicePixelRatio;
+  return Math.floor(num * dp + 0.5) / dp;
+}
+function clamp(v, o) {
+  return Math.min(Math.max(valueOf(v), o.min), o.max);
+}
+function countDecimals(value) {
+  if (!Number.isFinite(value))
+    return 0;
+  let e = 1, p = 0;
+  while (Math.round(value * e) / e !== value) {
+    e *= 10;
+    p += 1;
+  }
+  return p;
+}
+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 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);
+  return val >= o.max;
+}
+function isAtMin(v, o) {
+  const val = valueOf(v);
+  return val <= o.min;
+}
+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 = 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;
+}
+
+export {
+  isObject,
+  hasProp,
+  isSafari,
+  getWindow,
+  defineDomHelpers,
+  getNativeEvent,
+  supportsPointerEvent,
+  isTouchEvent,
+  isLeftClick,
+  isModifiedEvent,
+  wrap,
+  roundToDevicePixel,
+  clamp,
+  increment,
+  decrement,
+  valueOf,
+  formatDecimal,
+  isAtMax,
+  isAtMin,
+  isWithinRange
+};

package/dist/chunk-GWZPUXGU.mjs

@@ -0,0 +1,53 @@
+import {
+  clamp,
+  decrement,
+  formatDecimal,
+  increment,
+  isModifiedEvent
+} from "./chunk-DDNK5RLW.mjs";
+
+// src/number-input.utils.ts
+var utils = {
+  isValidNumericEvent: (ctx, event) => {
+    var _a, _b;
+    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);
+  },
+  isFloatingPoint: (v) => /^[0-9+\-.]$/.test(v),
+  sanitize: (ctx, value) => {
+    var _a;
+    return value.split("").filter((_a = ctx.validateCharacter) != null ? _a : utils.isFloatingPoint).join("");
+  },
+  increment: (ctx, step) => {
+    const value = increment(ctx.value, step != null ? step : ctx.step);
+    return formatDecimal(clamp(value, ctx), ctx);
+  },
+  decrement: (ctx, step) => {
+    const value = decrement(ctx.value, step != null ? 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;
+  },
+  format: (ctx, value) => {
+    var _a, _b;
+    const _val = value.toString();
+    return (_b = (_a = ctx.format) == null ? void 0 : _a.call(ctx, _val)) != null ? _b : _val;
+  },
+  round: (ctx) => {
+    return formatDecimal(ctx.value, ctx);
+  }
+};
+
+export {
+  utils
+};

package/dist/chunk-TSELS3UE.mjs

@@ -0,0 +1,246 @@
+import {
+  parts
+} from "./chunk-XHRILSH3.mjs";
+import {
+  dom
+} from "./chunk-2SIS62IB.mjs";
+import {
+  utils
+} from "./chunk-GWZPUXGU.mjs";
+import {
+  getNativeEvent,
+  isLeftClick,
+  isTouchEvent,
+  roundToDevicePixel
+} from "./chunk-DDNK5RLW.mjs";
+
+// ../../utilities/dom/src/attrs.ts
+var dataAttr = (guard) => {
+  return guard ? "" : void 0;
+};
+var ariaAttr = (guard) => {
+  return guard ? "true" : void 0;
+};
+
+// ../../utilities/dom/src/get-event-point.ts
+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`] };
+}
+
+// ../../utilities/dom/src/keyboard-event.ts
+var PAGE_KEYS = /* @__PURE__ */ new Set(["PageUp", "PageDown"]);
+var ARROW_KEYS = /* @__PURE__ */ new Set(["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"]);
+function getEventStep(event) {
+  if (event.ctrlKey || event.metaKey) {
+    return 0.1;
+  } else {
+    const isPageKey = PAGE_KEYS.has(event.key);
+    const isSkipKey = isPageKey || event.shiftKey && ARROW_KEYS.has(event.key);
+    return isSkipKey ? 10 : 1;
+  }
+}
+
+// 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 translations = state.context.translations;
+  return {
+    isFocused,
+    isInvalid,
+    isValueEmpty,
+    value: state.context.formattedValue,
+    valueAsNumber: state.context.valueAsNumber,
+    setValue(value) {
+      send({ type: "SET_VALUE", value: value.toString() });
+    },
+    clearValue() {
+      send("CLEAR_VALUE");
+    },
+    increment() {
+      send("INCREMENT");
+    },
+    decrement() {
+      send("DECREMENT");
+    },
+    setToMax() {
+      send({ type: "SET_VALUE", value: state.context.max });
+    },
+    setToMin() {
+      send({ type: "SET_VALUE", value: state.context.min });
+    },
+    focus() {
+      var _a;
+      (_a = dom.getInputEl(state.context)) == null ? void 0 : _a.focus();
+    },
+    blur() {
+      var _a;
+      (_a = dom.getInputEl(state.context)) == null ? void 0 : _a.blur();
+    },
+    rootProps: normalize.element({
+      id: dom.getRootId(state.context),
+      ...parts.root.attrs,
+      "data-disabled": dataAttr(isDisabled)
+    }),
+    labelProps: normalize.label({
+      ...parts.label.attrs,
+      "data-disabled": dataAttr(isDisabled),
+      "data-invalid": dataAttr(isInvalid),
+      id: dom.getLabelId(state.context),
+      htmlFor: dom.getInputId(state.context)
+    }),
+    controlProps: normalize.element({
+      ...parts.control.attrs,
+      role: "group",
+      "aria-disabled": isDisabled,
+      "data-disabled": dataAttr(isDisabled),
+      "data-invalid": dataAttr(isInvalid),
+      "aria-invalid": ariaAttr(state.context.invalid)
+    }),
+    inputProps: normalize.input({
+      ...parts.input.attrs,
+      name: state.context.name,
+      form: state.context.form,
+      id: dom.getInputId(state.context),
+      role: "spinbutton",
+      defaultValue: state.context.formattedValue,
+      pattern: state.context.pattern,
+      inputMode: state.context.inputMode,
+      "aria-invalid": isInvalid || void 0,
+      "data-invalid": dataAttr(isInvalid),
+      disabled: isDisabled,
+      "data-disabled": dataAttr(isDisabled),
+      readOnly: !!state.context.readOnly,
+      autoComplete: "off",
+      autoCorrect: "off",
+      spellCheck: "false",
+      type: "text",
+      "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-valuetext": state.context.valueText,
+      onFocus() {
+        send("FOCUS");
+      },
+      onBlur() {
+        send("BLUR");
+      },
+      onChange(event) {
+        const evt = getNativeEvent(event);
+        if (evt.isComposing)
+          return;
+        send({ type: "CHANGE", target: event.currentTarget, hint: "set" });
+      },
+      onKeyDown(event) {
+        const evt = getNativeEvent(event);
+        if (evt.isComposing)
+          return;
+        if (!utils.isValidNumericEvent(state.context, event)) {
+          event.preventDefault();
+        }
+        const step = getEventStep(event) * state.context.step;
+        const keyMap = {
+          ArrowUp() {
+            send({ type: "ARROW_UP", step });
+          },
+          ArrowDown() {
+            send({ type: "ARROW_DOWN", step });
+          },
+          Home() {
+            send("HOME");
+          },
+          End() {
+            send("END");
+          }
+        };
+        const exec = keyMap[event.key];
+        if (exec) {
+          exec(event);
+          event.preventDefault();
+        }
+      }
+    }),
+    decrementTriggerProps: normalize.button({
+      ...parts.decrementTrigger.attrs,
+      id: dom.getDecrementTriggerId(state.context),
+      disabled: isDecrementDisabled,
+      "data-disabled": dataAttr(isDecrementDisabled),
+      "aria-label": translations.decrementLabel,
+      type: "button",
+      tabIndex: -1,
+      "aria-controls": dom.getInputId(state.context),
+      onPointerDown(event) {
+        if (isDecrementDisabled)
+          return;
+        send(isLeftClick(event) ? { type: "PRESS_DOWN", hint: "decrement" } : { type: "FOCUS" });
+        event.preventDefault();
+      },
+      onPointerUp() {
+        send({ type: "PRESS_UP", hint: "decrement" });
+      },
+      onPointerLeave() {
+        if (isDecrementDisabled)
+          return;
+        send({ type: "PRESS_UP", hint: "decrement" });
+      }
+    }),
+    incrementTriggerProps: normalize.button({
+      ...parts.incrementTrigger.attrs,
+      id: dom.getIncrementTriggerId(state.context),
+      disabled: isIncrementDisabled,
+      "data-disabled": dataAttr(isIncrementDisabled),
+      "aria-label": translations.incrementLabel,
+      type: "button",
+      tabIndex: -1,
+      "aria-controls": dom.getInputId(state.context),
+      onPointerDown(event) {
+        if (isIncrementDisabled)
+          return;
+        send(isLeftClick(event) ? { type: "PRESS_DOWN", hint: "increment" } : { type: "FOCUS" });
+        event.preventDefault();
+      },
+      onPointerUp() {
+        send({ type: "PRESS_UP", hint: "increment" });
+      },
+      onPointerLeave() {
+        send({ type: "PRESS_UP", hint: "increment" });
+      }
+    }),
+    scrubberProps: normalize.element({
+      ...parts.scrubber.attrs,
+      "data-disabled": dataAttr(isDisabled),
+      id: dom.getScrubberId(state.context),
+      role: "presentation",
+      onMouseDown(event) {
+        if (isDisabled)
+          return;
+        const evt = getNativeEvent(event);
+        event.preventDefault();
+        const point = getEventPoint(evt);
+        point.x = point.x - roundToDevicePixel(7.5);
+        point.y = point.y - roundToDevicePixel(7.5);
+        send({ type: "PRESS_DOWN_SCRUBBER", point });
+      },
+      style: {
+        cursor: isDisabled ? void 0 : "ew-resize"
+      }
+    })
+  };
+}
+
+export {
+  connect
+};

package/dist/chunk-XHRILSH3.mjs

@@ -0,0 +1,17 @@
+// src/number-input.anatomy.ts
+import { createAnatomy } from "@zag-js/anatomy";
+var anatomy = createAnatomy("numberInput").parts(
+  "root",
+  "label",
+  "input",
+  "control",
+  "incrementTrigger",
+  "decrementTrigger",
+  "scrubber"
+);
+var parts = anatomy.build();
+
+export {
+  anatomy,
+  parts
+};