@zag-js/number-input 0.10.4 → 0.11.0

package/dist/index.mjs

@@ -1,3 +1,771 @@
-export { anatomy } from './number-input.anatomy.mjs';
-export { connect } from './number-input.connect.mjs';
-export { machine } from './number-input.machine.mjs';
+// 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();
+
+// src/number-input.connect.ts
+import { getEventPoint, getEventStep, getNativeEvent, isLeftClick } from "@zag-js/dom-event";
+import { ariaAttr, dataAttr } from "@zag-js/dom-query";
+import { roundToDevicePixel as roundToDevicePixel2 } from "@zag-js/number-utils";
+
+// src/number-input.dom.ts
+import { createScope, isSafari, MAX_Z_INDEX } from "@zag-js/dom-query";
+import { roundToDevicePixel, wrap } from "@zag-js/number-utils";
+var dom = createScope({
+  getRootId: (ctx) => ctx.ids?.root ?? `number-input:${ctx.id}`,
+  getInputId: (ctx) => ctx.ids?.input ?? `number-input:${ctx.id}:input`,
+  getIncrementTriggerId: (ctx) => ctx.ids?.incrementTrigger ?? `number-input:${ctx.id}:inc`,
+  getDecrementTriggerId: (ctx) => ctx.ids?.decrementTrigger ?? `number-input:${ctx.id}:dec`,
+  getScrubberId: (ctx) => ctx.ids?.scrubber ?? `number-input:${ctx.id}:scrubber`,
+  getCursorId: (ctx) => `number-input:${ctx.id}:cursor`,
+  getLabelId: (ctx) => ctx.ids?.label ?? `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())
+      return;
+    dom.createVirtualCursor(ctx);
+    return () => {
+      dom.getCursorEl(ctx)?.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);
+  }
+});
+
+// src/number-input.utils.ts
+import { isModifiedEvent } from "@zag-js/dom-event";
+import { clamp, decrement, formatDecimal, increment } from "@zag-js/number-utils";
+var utils = {
+  isValidNumericEvent: (ctx, event) => {
+    if (event.key == null)
+      return true;
+    const isModifier = isModifiedEvent(event);
+    const isSingleKey = event.key.length === 1;
+    if (isModifier || !isSingleKey)
+      return true;
+    return ctx.validateCharacter?.(event.key) ?? utils.isFloatingPoint(event.key);
+  },
+  isFloatingPoint: (v) => /^[0-9+\-.]$/.test(v),
+  sanitize: (ctx, value) => {
+    return value.split("").filter(ctx.validateCharacter ?? utils.isFloatingPoint).join("");
+  },
+  increment: (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 ?? ctx.step);
+    return formatDecimal(clamp(value, ctx), ctx);
+  },
+  clamp: (ctx) => {
+    return formatDecimal(clamp(ctx.value, ctx), ctx);
+  },
+  parse: (ctx, value) => {
+    return ctx.parse?.(value) ?? value;
+  },
+  format: (ctx, value) => {
+    const _val = value.toString();
+    return ctx.format?.(_val) ?? _val;
+  },
+  round: (ctx) => {
+    return formatDecimal(ctx.value, ctx);
+  }
+};
+
+// 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 {
+    /**
+     * Whether the input is focused.
+     */
+    isFocused,
+    /**
+     * Whether the input is invalid.
+     */
+    isInvalid,
+    /**
+     * Whether the input value is empty.
+     */
+    isValueEmpty,
+    /**
+     * The formatted value of the input.
+     */
+    value: state.context.formattedValue,
+    /**
+     * The value of the input as a number.
+     */
+    valueAsNumber: state.context.valueAsNumber,
+    /**
+     * Function to set the value of the input.
+     */
+    setValue(value) {
+      send({ type: "SET_VALUE", value: value.toString() });
+    },
+    /**
+     * Function to clear the value of the input.
+     */
+    clearValue() {
+      send("CLEAR_VALUE");
+    },
+    /**
+     * Function to increment the value of the input by the step.
+     */
+    increment() {
+      send("INCREMENT");
+    },
+    /**
+     * Function to decrement the value of the input by the step.
+     */
+    decrement() {
+      send("DECREMENT");
+    },
+    /**
+     * Function to set the value of the input to the max.
+     */
+    setToMax() {
+      send({ type: "SET_VALUE", value: state.context.max });
+    },
+    /**
+     * Function to set the value of the input to the min.
+     */
+    setToMin() {
+      send({ type: "SET_VALUE", value: state.context.min });
+    },
+    /**
+     * Function to focus the input.
+     */
+    focus() {
+      dom.getInputEl(state.context)?.focus();
+    },
+    /**
+     * Function to blur the input.
+     */
+    blur() {
+      dom.getInputEl(state.context)?.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": ariaAttr(isInvalid),
+      "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) {
+        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);
+        const point = getEventPoint(evt);
+        point.x = point.x - roundToDevicePixel2(7.5);
+        point.y = point.y - roundToDevicePixel2(7.5);
+        send({ type: "PRESS_DOWN_SCRUBBER", point });
+        event.preventDefault();
+      },
+      style: {
+        cursor: isDisabled ? void 0 : "ew-resize"
+      }
+    })
+  };
+}
+
+// src/number-input.machine.ts
+import { choose, createMachine, guards } from "@zag-js/core";
+import { addDomEvent, requestPointerLock } from "@zag-js/dom-event";
+import { isSafari as isSafari2, raf } from "@zag-js/dom-query";
+import { dispatchInputValueEvent } from "@zag-js/form-utils";
+import { observeAttributes } from "@zag-js/mutation-observer";
+import { isAtMax, isAtMin, isWithinRange, valueOf } from "@zag-js/number-utils";
+import { callAll, compact } from "@zag-js/utils";
+var { not, and } = guards;
+function machine(userContext) {
+  const ctx = compact(userContext);
+  return createMachine(
+    {
+      id: "number-input",
+      initial: "idle",
+      context: {
+        dir: "ltr",
+        focusInputOnChange: true,
+        clampValueOnBlur: true,
+        allowOverflow: false,
+        inputMode: "decimal",
+        pattern: "[0-9]*(.[0-9]+)?",
+        hint: null,
+        value: "",
+        step: 1,
+        min: Number.MIN_SAFE_INTEGER,
+        max: Number.MAX_SAFE_INTEGER,
+        scrubberCursorPoint: null,
+        invalid: false,
+        spinOnPress: true,
+        ...ctx,
+        translations: {
+          incrementLabel: "increment value",
+          decrementLabel: "decrease value",
+          ...ctx.translations
+        }
+      },
+      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) => ctx2.translations.valueText?.(ctx2.value),
+        formattedValue: (ctx2) => ctx2.format?.(ctx2.value).toString() ?? ctx2.value
+      },
+      watch: {
+        value: ["invokeOnChange", "dispatchChangeEvent"],
+        isOutOfRange: ["invokeOnInvalid"],
+        scrubberCursorPoint: ["setVirtualCursorPosition"]
+      },
+      entry: ["syncInputValue"],
+      on: {
+        SET_VALUE: [
+          {
+            guard: "clampOnBlur",
+            actions: ["setValue", "clampValue", "setHintToSet"]
+          },
+          {
+            actions: ["setValue", "setHintToSet"]
+          }
+        ],
+        CLEAR_VALUE: {
+          actions: ["clearValue"]
+        },
+        INCREMENT: {
+          actions: ["increment"]
+        },
+        DECREMENT: {
+          actions: ["decrement"]
+        }
+      },
+      states: {
+        idle: {
+          exit: "invokeOnFocus",
+          on: {
+            PRESS_DOWN: {
+              target: "before:spin",
+              actions: ["focusInput", "setHint"]
+            },
+            PRESS_DOWN_SCRUBBER: {
+              target: "scrubbing",
+              actions: ["focusInput", "setHint", "setCursorPoint"]
+            },
+            FOCUS: "focused"
+          }
+        },
+        focused: {
+          tags: "focus",
+          entry: "focusInput",
+          activities: "attachWheelListener",
+          on: {
+            PRESS_DOWN: {
+              target: "before:spin",
+              actions: ["focusInput", "setHint"]
+            },
+            PRESS_DOWN_SCRUBBER: {
+              target: "scrubbing",
+              actions: ["focusInput", "setHint", "setCursorPoint"]
+            },
+            ARROW_UP: {
+              actions: "increment"
+            },
+            ARROW_DOWN: {
+              actions: "decrement"
+            },
+            HOME: {
+              actions: "setToMin"
+            },
+            END: {
+              actions: "setToMax"
+            },
+            CHANGE: {
+              actions: ["setValue", "setHint"]
+            },
+            BLUR: [
+              {
+                guard: "isInvalidExponential",
+                target: "idle",
+                actions: ["clearValue", "clearHint", "invokeOnBlur"]
+              },
+              {
+                guard: and("clampOnBlur", not("isInRange"), not("isEmptyValue")),
+                target: "idle",
+                actions: ["clampValue", "clearHint", "invokeOnBlur"]
+              },
+              {
+                target: "idle",
+                actions: ["roundValue", "invokeOnBlur"]
+              }
+            ]
+          }
+        },
+        "before:spin": {
+          tags: "focus",
+          activities: "trackButtonDisabled",
+          entry: choose([
+            { guard: "isIncrementHint", actions: "increment" },
+            { guard: "isDecrementHint", actions: "decrement" }
+          ]),
+          after: {
+            CHANGE_DELAY: {
+              target: "spinning",
+              guard: and("isInRange", "spinOnPress")
+            }
+          },
+          on: {
+            PRESS_UP: {
+              target: "focused",
+              actions: "clearHint"
+            }
+          }
+        },
+        spinning: {
+          tags: "focus",
+          activities: "trackButtonDisabled",
+          every: [
+            {
+              delay: "CHANGE_INTERVAL",
+              guard: and(not("isAtMin"), "isIncrementHint"),
+              actions: "increment"
+            },
+            {
+              delay: "CHANGE_INTERVAL",
+              guard: and(not("isAtMax"), "isDecrementHint"),
+              actions: "decrement"
+            }
+          ],
+          on: {
+            PRESS_UP: {
+              target: "focused",
+              actions: "clearHint"
+            }
+          }
+        },
+        scrubbing: {
+          tags: "focus",
+          exit: "clearCursorPoint",
+          activities: ["activatePointerLock", "trackMousemove", "setupVirtualCursor", "preventTextSelection"],
+          on: {
+            POINTER_UP_SCRUBBER: "focused",
+            POINTER_MOVE_SCRUBBER: [
+              {
+                guard: "isIncrementHint",
+                actions: ["increment", "setCursorPoint"]
+              },
+              {
+                guard: "isDecrementHint",
+                actions: ["decrement", "setCursorPoint"]
+              }
+            ]
+          }
+        }
+      }
+    },
+    {
+      delays: {
+        CHANGE_INTERVAL: 50,
+        CHANGE_DELAY: 300
+      },
+      guards: {
+        clampOnBlur: (ctx2) => !!ctx2.clampValueOnBlur,
+        isAtMin: (ctx2) => ctx2.isAtMin,
+        spinOnPress: (ctx2) => !!ctx2.spinOnPress,
+        isAtMax: (ctx2) => ctx2.isAtMax,
+        isInRange: (ctx2) => !ctx2.isOutOfRange,
+        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: {
+        setupVirtualCursor(ctx2) {
+          return dom.setupVirtualCursor(ctx2);
+        },
+        preventTextSelection(ctx2) {
+          return dom.preventTextSelection(ctx2);
+        },
+        trackButtonDisabled(ctx2, _evt, { send }) {
+          const btn = dom.getPressedTriggerEl(ctx2, ctx2.hint);
+          return observeAttributes(btn, ["disabled"], () => {
+            send("PRESS_UP");
+          });
+        },
+        attachWheelListener(ctx2, _evt, { send }) {
+          const input = dom.getInputEl(ctx2);
+          if (!input)
+            return;
+          function onWheel(event) {
+            const isInputFocused = dom.getDoc(ctx2).activeElement === input;
+            if (!ctx2.allowMouseWheel || !isInputFocused)
+              return;
+            event.preventDefault();
+            const dir = Math.sign(event.deltaY) * -1;
+            if (dir === 1) {
+              send("INCREMENT");
+            } else if (dir === -1) {
+              send("DECREMENT");
+            }
+          }
+          return addDomEvent(input, "wheel", onWheel, { passive: false });
+        },
+        activatePointerLock(ctx2) {
+          if (isSafari2())
+            return;
+          return requestPointerLock(dom.getDoc(ctx2));
+        },
+        trackMousemove(ctx2, _evt, { send }) {
+          const doc = dom.getDoc(ctx2);
+          function onMousemove(event) {
+            if (!ctx2.scrubberCursorPoint)
+              return;
+            const value = dom.getMousementValue(ctx2, event);
+            if (!value.hint)
+              return;
+            send({
+              type: "POINTER_MOVE_SCRUBBER",
+              hint: value.hint,
+              point: value.point
+            });
+          }
+          function onMouseup() {
+            send("POINTER_UP_SCRUBBER");
+          }
+          return callAll(
+            addDomEvent(doc, "mousemove", onMousemove, false),
+            addDomEvent(doc, "mouseup", onMouseup, false)
+          );
+        }
+      },
+      actions: {
+        focusInput(ctx2) {
+          if (!ctx2.focusInputOnChange)
+            return;
+          const input = dom.getInputEl(ctx2);
+          raf(() => input?.focus());
+        },
+        increment(ctx2, evt) {
+          ctx2.value = utils.increment(ctx2, evt.step);
+        },
+        decrement(ctx2, evt) {
+          ctx2.value = utils.decrement(ctx2, evt.step);
+        },
+        clampValue(ctx2) {
+          ctx2.value = utils.clamp(ctx2);
+        },
+        roundValue(ctx2) {
+          if (ctx2.value !== "") {
+            ctx2.value = utils.round(ctx2);
+          }
+        },
+        setValue(ctx2, evt) {
+          const value = evt.target?.value ?? evt.value;
+          ctx2.value = utils.sanitize(ctx2, utils.parse(ctx2, value.toString()));
+        },
+        clearValue(ctx2) {
+          ctx2.value = "";
+        },
+        setToMax(ctx2) {
+          ctx2.value = ctx2.max.toString();
+        },
+        setToMin(ctx2) {
+          ctx2.value = ctx2.min.toString();
+        },
+        setHint(ctx2, evt) {
+          ctx2.hint = evt.hint;
+        },
+        clearHint(ctx2) {
+          ctx2.hint = null;
+        },
+        setHintToSet(ctx2) {
+          ctx2.hint = "set";
+        },
+        invokeOnChange(ctx2) {
+          ctx2.onChange?.({
+            value: ctx2.value,
+            valueAsNumber: ctx2.valueAsNumber
+          });
+        },
+        invokeOnFocus(ctx2, evt) {
+          let srcElement = null;
+          if (evt.type === "PRESS_DOWN") {
+            srcElement = dom.getPressedTriggerEl(ctx2, evt.hint);
+          } else if (evt.type === "FOCUS") {
+            srcElement = dom.getInputEl(ctx2);
+          } else if (evt.type === "PRESS_DOWN_SCRUBBER") {
+            srcElement = dom.getScrubberEl(ctx2);
+          }
+          ctx2.onFocus?.({
+            value: ctx2.value,
+            valueAsNumber: ctx2.valueAsNumber,
+            srcElement
+          });
+        },
+        invokeOnBlur(ctx2) {
+          ctx2.onBlur?.({
+            value: ctx2.value,
+            valueAsNumber: ctx2.valueAsNumber
+          });
+        },
+        invokeOnInvalid(ctx2) {
+          if (!ctx2.isOutOfRange)
+            return;
+          const reason = ctx2.valueAsNumber > ctx2.max ? "rangeOverflow" : "rangeUnderflow";
+          ctx2.onInvalid?.({
+            reason,
+            value: ctx2.formattedValue,
+            valueAsNumber: ctx2.valueAsNumber
+          });
+        },
+        // sync input value, in event it was set from form libraries via `ref`, `bind:this`, etc.
+        syncInputValue(ctx2) {
+          const input = dom.getInputEl(ctx2);
+          if (!input || input.value == ctx2.value)
+            return;
+          const value = utils.parse(ctx2, input.value);
+          ctx2.value = utils.sanitize(ctx2, value);
+        },
+        setCursorPoint(ctx2, evt) {
+          ctx2.scrubberCursorPoint = evt.point;
+        },
+        clearCursorPoint(ctx2) {
+          ctx2.scrubberCursorPoint = null;
+        },
+        setVirtualCursorPosition(ctx2) {
+          const cursor = dom.getCursorEl(ctx2);
+          if (!cursor || !ctx2.scrubberCursorPoint)
+            return;
+          const { x, y } = ctx2.scrubberCursorPoint;
+          cursor.style.transform = `translate3d(${x}px, ${y}px, 0px)`;
+        },
+        dispatchChangeEvent(ctx2) {
+          const inputEl = dom.getInputEl(ctx2);
+          dispatchInputValueEvent(inputEl, { value: ctx2.formattedValue });
+        }
+      }
+    }
+  );
+}
+export {
+  anatomy,
+  connect,
+  machine
+};
+//# sourceMappingURL=index.mjs.map