@zag-js/number-input 0.2.6 → 0.2.8

package/dist/chunk-2UDY2X4M.mjs

@@ -0,0 +1,246 @@
+import {
+  parts
+} from "./chunk-XHRILSH3.mjs";
+import {
+  dom
+} from "./chunk-EUVYGWZ6.mjs";
+import {
+  utils
+} from "./chunk-HP6F2HUY.mjs";
+import {
+  getNativeEvent,
+  isLeftClick,
+  isTouchEvent,
+  roundToDevicePixel
+} from "./chunk-VCZUWKJT.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-EUVYGWZ6.mjs

@@ -0,0 +1,129 @@
+import {
+  defineDomHelpers,
+  isSafari,
+  roundToDevicePixel,
+  supportsPointerEvent,
+  wrap
+} from "./chunk-VCZUWKJT.mjs";
+
+// ../../utilities/dom/src/constants.ts
+var MAX_Z_INDEX = 2147483647;
+
+// src/number-input.dom.ts
+var dom = defineDomHelpers({
+  getRootId: (ctx) => {
+    var _a, _b;
+    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.id}:input`;
+  },
+  getIncrementTriggerId: (ctx) => {
+    var _a, _b;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.incrementTrigger) != null ? _b : `number-input:${ctx.id}:inc`;
+  },
+  getDecrementTriggerId: (ctx) => {
+    var _a, _b;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.decrementTrigger) != null ? _b : `number-input:${ctx.id}:dec`;
+  },
+  getScrubberId: (ctx) => {
+    var _a, _b;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.scrubber) != null ? _b : `number-input:${ctx.id}:scrubber`;
+  },
+  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.id}:label`;
+  },
+  getInputEl: (ctx) => dom.getById(ctx, dom.getInputId(ctx)),
+  getIncrementTriggerEl: (ctx) => dom.getById(ctx, dom.getIncrementTriggerId(ctx)),
+  getDecrementTriggerEl: (ctx) => dom.getById(ctx, dom.getDecrementTriggerId(ctx)),
+  getScrubberEl: (ctx) => dom.getById(ctx, dom.getScrubberId(ctx)),
+  getCursorEl: (ctx) => dom.getDoc(ctx).getElementById(dom.getCursorId(ctx)),
+  getPressedTriggerEl: (ctx, hint = ctx.hint) => {
+    let btnEl = null;
+    if (hint === "increment") {
+      btnEl = dom.getIncrementTriggerEl(ctx);
+    }
+    if (hint === "decrement") {
+      btnEl = dom.getDecrementTriggerEl(ctx);
+    }
+    return btnEl;
+  },
+  setupVirtualCursor(ctx) {
+    if (isSafari() || !supportsPointerEvent())
+      return;
+    dom.createVirtualCursor(ctx);
+    return () => {
+      var _a;
+      (_a = dom.getCursorEl(ctx)) == null ? void 0 : _a.remove();
+    };
+  },
+  preventTextSelection(ctx) {
+    const doc = dom.getDoc(ctx);
+    const html = doc.documentElement;
+    const body = doc.body;
+    body.style.pointerEvents = "none";
+    html.style.userSelect = "none";
+    html.style.cursor = "ew-resize";
+    return () => {
+      body.style.pointerEvents = "";
+      html.style.userSelect = "";
+      html.style.cursor = "";
+      if (!html.style.length) {
+        html.removeAttribute("style");
+      }
+      if (!body.style.length) {
+        body.removeAttribute("style");
+      }
+    };
+  },
+  getMousementValue(ctx, event) {
+    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";
+    if (ctx.isRtl && hint === "decrement")
+      hint = "increment";
+    const point = {
+      x: ctx.scrubberCursorPoint.x + x,
+      y: ctx.scrubberCursorPoint.y + y
+    };
+    const win = dom.getWin(ctx);
+    const width = win.innerWidth;
+    const half = roundToDevicePixel(7.5);
+    point.x = wrap(point.x + half, width) - half;
+    return { hint, point };
+  },
+  createVirtualCursor(ctx) {
+    const doc = dom.getDoc(ctx);
+    const el = doc.createElement("div");
+    el.className = "scrubber--cursor";
+    el.id = dom.getCursorId(ctx);
+    Object.assign(el.style, {
+      width: "15px",
+      height: "15px",
+      position: "fixed",
+      pointerEvents: "none",
+      left: "0px",
+      top: "0px",
+      zIndex: MAX_Z_INDEX,
+      transform: ctx.scrubberCursorPoint ? `translate3d(${ctx.scrubberCursorPoint.x}px, ${ctx.scrubberCursorPoint.y}px, 0px)` : void 0,
+      willChange: "transform"
+    });
+    el.innerHTML = `
+        <svg width="46" height="15" style="left: -15.5px; position: absolute; top: 0; filter: drop-shadow(rgba(0, 0, 0, 0.4) 0px 1px 1.1px);">
+          <g transform="translate(2 3)">
+            <path fill-rule="evenodd" d="M 15 4.5L 15 2L 11.5 5.5L 15 9L 15 6.5L 31 6.5L 31 9L 34.5 5.5L 31 2L 31 4.5Z" style="stroke-width: 2px; stroke: white;"></path>
+            <path fill-rule="evenodd" d="M 15 4.5L 15 2L 11.5 5.5L 15 9L 15 6.5L 31 6.5L 31 9L 34.5 5.5L 31 2L 31 4.5Z"></path>
+          </g>
+        </svg>`;
+    doc.body.appendChild(el);
+  }
+});
+
+export {
+  dom
+};

package/dist/chunk-HP6F2HUY.mjs

@@ -0,0 +1,53 @@
+import {
+  clamp,
+  decrement,
+  formatDecimal,
+  increment,
+  isModifiedEvent
+} from "./chunk-VCZUWKJT.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
+};