@zag-js/number-input 0.82.2 → 1.0.1

package/dist/index.js

@@ -5,6 +5,7 @@ var domQuery = require('@zag-js/dom-query');
 var utils = require('@zag-js/utils');
 var core = require('@zag-js/core');
 var number = require('@internationalized/number');
+var types = require('@zag-js/types');
 
 // src/number-input.anatomy.ts
 var anatomy = anatomy$1.createAnatomy("numberInput").parts(
@@ -18,140 +19,136 @@ var anatomy = anatomy$1.createAnatomy("numberInput").parts(
   "scrubber"
 );
 var parts = anatomy.build();
-var dom = domQuery.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);
+var getRootId = (ctx) => ctx.ids?.root ?? `number-input:${ctx.id}`;
+var getInputId = (ctx) => ctx.ids?.input ?? `number-input:${ctx.id}:input`;
+var getIncrementTriggerId = (ctx) => ctx.ids?.incrementTrigger ?? `number-input:${ctx.id}:inc`;
+var getDecrementTriggerId = (ctx) => ctx.ids?.decrementTrigger ?? `number-input:${ctx.id}:dec`;
+var getScrubberId = (ctx) => ctx.ids?.scrubber ?? `number-input:${ctx.id}:scrubber`;
+var getCursorId = (ctx) => `number-input:${ctx.id}:cursor`;
+var getLabelId = (ctx) => ctx.ids?.label ?? `number-input:${ctx.id}:label`;
+var getInputEl = (ctx) => ctx.getById(getInputId(ctx));
+var getIncrementTriggerEl = (ctx) => ctx.getById(getIncrementTriggerId(ctx));
+var getDecrementTriggerEl = (ctx) => ctx.getById(getDecrementTriggerId(ctx));
+var getCursorEl = (ctx) => ctx.getDoc().getElementById(getCursorId(ctx));
+var getPressedTriggerEl = (ctx, hint) => {
+  let btnEl = null;
+  if (hint === "increment") {
+    btnEl = getIncrementTriggerEl(ctx);
+  }
+  if (hint === "decrement") {
+    btnEl = getDecrementTriggerEl(ctx);
+  }
+  return btnEl;
+};
+var setupVirtualCursor = (ctx, point) => {
+  if (domQuery.isSafari()) return;
+  createVirtualCursor(ctx, point);
+  return () => {
+    getCursorEl(ctx)?.remove();
+  };
+};
+var preventTextSelection = (ctx) => {
+  const doc = ctx.getDoc();
+  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 (hint === "decrement") {
-      btnEl = dom.getDecrementTriggerEl(ctx);
+    if (!body.style.length) {
+      body.removeAttribute("style");
     }
-    return btnEl;
-  },
-  setupVirtualCursor(ctx) {
-    if (domQuery.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");
-      }
-    };
-  },
-  getMousemoveValue(ctx, event) {
-    const win = dom.getWin(ctx);
-    const x = utils.roundToDpr(event.movementX, win.devicePixelRatio);
-    const y = utils.roundToDpr(event.movementY, win.devicePixelRatio);
-    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 width = win.innerWidth;
-    const half = utils.roundToDpr(7.5, win.devicePixelRatio);
-    point.x = utils.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: domQuery.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);
-  }
-});
+  };
+};
+var getMousemoveValue = (ctx, opts) => {
+  const { point, isRtl, event } = opts;
+  const win = ctx.getWin();
+  const x = utils.roundToDpr(event.movementX, win.devicePixelRatio);
+  const y = utils.roundToDpr(event.movementY, win.devicePixelRatio);
+  let hint = x > 0 ? "increment" : x < 0 ? "decrement" : null;
+  if (isRtl && hint === "increment") hint = "decrement";
+  if (isRtl && hint === "decrement") hint = "increment";
+  const newPoint = { x: point.x + x, y: point.y + y };
+  const width = win.innerWidth;
+  const half = utils.roundToDpr(7.5, win.devicePixelRatio);
+  newPoint.x = utils.wrap(newPoint.x + half, width) - half;
+  return { hint, point: newPoint };
+};
+var createVirtualCursor = (ctx, point) => {
+  const doc = ctx.getDoc();
+  const el = doc.createElement("div");
+  el.className = "scrubber--cursor";
+  el.id = getCursorId(ctx);
+  Object.assign(el.style, {
+    width: "15px",
+    height: "15px",
+    position: "fixed",
+    pointerEvents: "none",
+    left: "0px",
+    top: "0px",
+    zIndex: domQuery.MAX_Z_INDEX,
+    transform: point ? `translate3d(${point.x}px, ${point.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.connect.ts
-function connect(state, send, normalize) {
+function connect(service, normalize) {
+  const { state, send, prop, scope, computed } = service;
   const focused = state.hasTag("focus");
-  const disabled = state.context.isDisabled;
-  const readOnly = state.context.readOnly;
-  const empty = state.context.isValueEmpty;
-  const invalid = state.context.isOutOfRange || !!state.context.invalid;
-  const isIncrementDisabled = disabled || !state.context.canIncrement || readOnly;
-  const isDecrementDisabled = disabled || !state.context.canDecrement || readOnly;
-  const translations = state.context.translations;
+  const disabled = computed("isDisabled");
+  const readOnly = prop("readOnly");
+  const empty = computed("isValueEmpty");
+  const invalid = computed("isOutOfRange") || !!prop("invalid");
+  const isIncrementDisabled = disabled || !computed("canIncrement") || readOnly;
+  const isDecrementDisabled = disabled || !computed("canDecrement") || readOnly;
+  const translations = prop("translations");
   return {
     focused,
     invalid,
     empty,
-    value: state.context.formattedValue,
-    valueAsNumber: state.context.valueAsNumber,
+    value: computed("formattedValue"),
+    valueAsNumber: computed("valueAsNumber"),
     setValue(value) {
       send({ type: "VALUE.SET", value });
     },
     clearValue() {
-      send("VALUE.CLEAR");
+      send({ type: "VALUE.CLEAR" });
     },
     increment() {
-      send("VALUE.INCREMENT");
+      send({ type: "VALUE.INCREMENT" });
     },
     decrement() {
-      send("VALUE.DECREMENT");
+      send({ type: "VALUE.DECREMENT" });
     },
     setToMax() {
-      send({ type: "VALUE.SET", value: state.context.max });
+      send({ type: "VALUE.SET", value: prop("max") });
     },
     setToMin() {
-      send({ type: "VALUE.SET", value: state.context.min });
+      send({ type: "VALUE.SET", value: prop("min") });
     },
     focus() {
-      dom.getInputEl(state.context)?.focus();
+      getInputEl(scope)?.focus();
     },
     getRootProps() {
       return normalize.element({
-        id: dom.getRootId(state.context),
+        id: getRootId(scope),
         ...parts.root.attrs,
-        dir: state.context.dir,
+        dir: prop("dir"),
         "data-disabled": domQuery.dataAttr(disabled),
         "data-focus": domQuery.dataAttr(focused),
         "data-invalid": domQuery.dataAttr(invalid)
@@ -160,30 +157,30 @@ function connect(state, send, normalize) {
     getLabelProps() {
       return normalize.label({
         ...parts.label.attrs,
-        dir: state.context.dir,
+        dir: prop("dir"),
         "data-disabled": domQuery.dataAttr(disabled),
         "data-focus": domQuery.dataAttr(focused),
         "data-invalid": domQuery.dataAttr(invalid),
-        id: dom.getLabelId(state.context),
-        htmlFor: dom.getInputId(state.context)
+        id: getLabelId(scope),
+        htmlFor: getInputId(scope)
       });
     },
     getControlProps() {
       return normalize.element({
         ...parts.control.attrs,
-        dir: state.context.dir,
+        dir: prop("dir"),
         role: "group",
         "aria-disabled": disabled,
         "data-focus": domQuery.dataAttr(focused),
         "data-disabled": domQuery.dataAttr(disabled),
         "data-invalid": domQuery.dataAttr(invalid),
-        "aria-invalid": domQuery.ariaAttr(state.context.invalid)
+        "aria-invalid": domQuery.ariaAttr(invalid)
       });
     },
     getValueTextProps() {
       return normalize.element({
         ...parts.valueText.attrs,
-        dir: state.context.dir,
+        dir: prop("dir"),
         "data-disabled": domQuery.dataAttr(disabled),
         "data-invalid": domQuery.dataAttr(invalid),
         "data-focus": domQuery.dataAttr(focused)
@@ -192,34 +189,34 @@ function connect(state, send, normalize) {
     getInputProps() {
       return normalize.input({
         ...parts.input.attrs,
-        dir: state.context.dir,
-        name: state.context.name,
-        form: state.context.form,
-        id: dom.getInputId(state.context),
+        dir: prop("dir"),
+        name: prop("name"),
+        form: prop("form"),
+        id: getInputId(scope),
         role: "spinbutton",
-        defaultValue: state.context.formattedValue,
-        pattern: state.context.pattern,
-        inputMode: state.context.inputMode,
+        defaultValue: computed("formattedValue"),
+        pattern: prop("pattern"),
+        inputMode: prop("inputMode"),
         "aria-invalid": domQuery.ariaAttr(invalid),
         "data-invalid": domQuery.dataAttr(invalid),
         disabled,
         "data-disabled": domQuery.dataAttr(disabled),
-        readOnly: state.context.readOnly,
-        required: state.context.required,
+        readOnly,
+        required: prop("required"),
         autoComplete: "off",
         autoCorrect: "off",
         spellCheck: "false",
         type: "text",
         "aria-roledescription": "numberfield",
-        "aria-valuemin": state.context.min,
-        "aria-valuemax": state.context.max,
-        "aria-valuenow": Number.isNaN(state.context.valueAsNumber) ? void 0 : state.context.valueAsNumber,
-        "aria-valuetext": state.context.valueText,
+        "aria-valuemin": prop("min"),
+        "aria-valuemax": prop("max"),
+        "aria-valuenow": Number.isNaN(computed("valueAsNumber")) ? void 0 : computed("valueAsNumber"),
+        "aria-valuetext": computed("valueText"),
         onFocus() {
-          send("INPUT.FOCUS");
+          send({ type: "INPUT.FOCUS" });
         },
         onBlur() {
-          send("INPUT.BLUR");
+          send({ type: "INPUT.BLUR" });
         },
         onInput(event) {
           send({ type: "INPUT.CHANGE", target: event.currentTarget, hint: "set" });
@@ -228,7 +225,7 @@ function connect(state, send, normalize) {
           try {
             const { selectionStart, selectionEnd, value } = event.currentTarget;
             const nextValue = value.slice(0, selectionStart) + (event.data ?? "") + value.slice(selectionEnd);
-            const isValid = state.context.parser.isValidPartialNumber(nextValue);
+            const isValid = computed("parser").isValidPartialNumber(nextValue);
             if (!isValid) {
               event.preventDefault();
             }
@@ -239,7 +236,7 @@ function connect(state, send, normalize) {
           if (event.defaultPrevented) return;
           if (readOnly) return;
           if (domQuery.isComposingEvent(event)) return;
-          const step = domQuery.getEventStep(event) * state.context.step;
+          const step = domQuery.getEventStep(event) * prop("step");
           const keyMap = {
             ArrowUp() {
               send({ type: "INPUT.ARROW_UP", step });
@@ -251,16 +248,16 @@ function connect(state, send, normalize) {
             },
             Home() {
               if (domQuery.isModifierKey(event)) return;
-              send("INPUT.HOME");
+              send({ type: "INPUT.HOME" });
               event.preventDefault();
             },
             End() {
               if (domQuery.isModifierKey(event)) return;
-              send("INPUT.END");
+              send({ type: "INPUT.END" });
               event.preventDefault();
             },
             Enter() {
-              send("INPUT.ENTER");
+              send({ type: "INPUT.ENTER" });
             }
           };
           const exec = keyMap[event.key];
@@ -271,14 +268,14 @@ function connect(state, send, normalize) {
     getDecrementTriggerProps() {
       return normalize.button({
         ...parts.decrementTrigger.attrs,
-        dir: state.context.dir,
-        id: dom.getDecrementTriggerId(state.context),
+        dir: prop("dir"),
+        id: getDecrementTriggerId(scope),
         disabled: isDecrementDisabled,
         "data-disabled": domQuery.dataAttr(isDecrementDisabled),
         "aria-label": translations.decrementLabel,
         type: "button",
         tabIndex: -1,
-        "aria-controls": dom.getInputId(state.context),
+        "aria-controls": getInputId(scope),
         onPointerDown(event) {
           if (isDecrementDisabled || !domQuery.isLeftClick(event)) return;
           send({ type: "TRIGGER.PRESS_DOWN", hint: "decrement", pointerType: event.pointerType });
@@ -301,14 +298,14 @@ function connect(state, send, normalize) {
     getIncrementTriggerProps() {
       return normalize.button({
         ...parts.incrementTrigger.attrs,
-        dir: state.context.dir,
-        id: dom.getIncrementTriggerId(state.context),
+        dir: prop("dir"),
+        id: getIncrementTriggerId(scope),
         disabled: isIncrementDisabled,
         "data-disabled": domQuery.dataAttr(isIncrementDisabled),
         "aria-label": translations.incrementLabel,
         type: "button",
         tabIndex: -1,
-        "aria-controls": dom.getInputId(state.context),
+        "aria-controls": getInputId(scope),
         onPointerDown(event) {
           if (isIncrementDisabled || !domQuery.isLeftClick(event)) return;
           send({ type: "TRIGGER.PRESS_DOWN", hint: "increment", pointerType: event.pointerType });
@@ -330,9 +327,9 @@ function connect(state, send, normalize) {
     getScrubberProps() {
       return normalize.element({
         ...parts.scrubber.attrs,
-        dir: state.context.dir,
+        dir: prop("dir"),
         "data-disabled": domQuery.dataAttr(disabled),
-        id: dom.getScrubberId(state.context),
+        id: getScrubberId(scope),
         role: "presentation",
         onMouseDown(event) {
           if (disabled) return;
@@ -354,7 +351,7 @@ function connect(state, send, normalize) {
 
 // src/cursor.ts
 function recordCursor(inputEl) {
-  if (inputEl.ownerDocument.activeElement !== inputEl) return;
+  if (!inputEl || inputEl.ownerDocument.activeElement !== inputEl) return;
   try {
     const { selectionStart: start, selectionEnd: end, value } = inputEl;
     const beforeTxt = value.substring(0, start);
@@ -370,7 +367,7 @@ function recordCursor(inputEl) {
   }
 }
 function restoreCursor(inputEl, selection) {
-  if (inputEl.ownerDocument.activeElement !== inputEl) return;
+  if (!inputEl || inputEl.ownerDocument.activeElement !== inputEl) return;
   if (!selection) {
     inputEl.setSelectionRange(inputEl.value.length, inputEl.value.length);
     return;
@@ -395,432 +392,464 @@ function restoreCursor(inputEl, selection) {
   }
 }
 var createFormatter = (locale, options = {}) => {
-  return core.ref(new Intl.NumberFormat(locale, options));
+  return new Intl.NumberFormat(locale, options);
 };
 var createParser = (locale, options = {}) => {
-  return core.ref(new number.NumberParser(locale, options));
+  return new number.NumberParser(locale, options);
 };
-var parseValue = (ctx, value) => {
-  if (!ctx.formatOptions) return parseFloat(value);
-  return ctx.parser.parse(String(value));
+var parseValue = (value, params) => {
+  const { prop, computed } = params;
+  if (!prop("formatOptions")) return parseFloat(value);
+  return computed("parser").parse(String(value));
 };
-var formatValue = (ctx, value) => {
+var formatValue = (value, params) => {
+  const { prop, computed } = params;
   if (Number.isNaN(value)) return "";
-  if (!ctx.formatOptions) return value.toString();
-  return ctx.formatter.format(value);
+  if (!prop("formatOptions")) return value.toString();
+  return computed("formatter").format(value);
 };
 
 // src/number-input.machine.ts
-var { not, and } = core.guards;
-function machine(userContext) {
-  const ctx = utils.compact(userContext);
-  return core.createMachine(
-    {
-      id: "number-input",
-      initial: "idle",
-      context: {
-        dir: "ltr",
-        locale: "en-US",
-        focusInputOnChange: true,
-        clampValueOnBlur: true,
-        allowOverflow: false,
-        inputMode: "decimal",
-        pattern: "[0-9]*(.[0-9]+)?",
-        value: "",
-        step: 1,
-        min: Number.MIN_SAFE_INTEGER,
-        max: Number.MAX_SAFE_INTEGER,
-        invalid: false,
-        spinOnPress: true,
-        disabled: false,
-        readOnly: false,
-        ...ctx,
-        hint: null,
-        scrubberCursorPoint: null,
-        fieldsetDisabled: false,
-        formatter: createFormatter(ctx.locale || "en-US", ctx.formatOptions),
-        parser: createParser(ctx.locale || "en-US", ctx.formatOptions),
-        translations: {
-          incrementLabel: "increment value",
-          decrementLabel: "decrease value",
-          ...ctx.translations
+var { choose, guards, createMachine } = core.setup();
+var { not, and } = guards;
+var machine = createMachine({
+  props({ props: props2 }) {
+    return {
+      dir: "ltr",
+      locale: "en-US",
+      focusInputOnChange: true,
+      clampValueOnBlur: true,
+      allowOverflow: false,
+      inputMode: "decimal",
+      pattern: "[0-9]*(.[0-9]+)?",
+      defaultValue: "",
+      step: 1,
+      min: Number.MIN_SAFE_INTEGER,
+      max: Number.MAX_SAFE_INTEGER,
+      spinOnPress: true,
+      ...utils.compact(props2),
+      translations: {
+        incrementLabel: "increment value",
+        decrementLabel: "decrease value",
+        ...props2.translations
+      }
+    };
+  },
+  initialState() {
+    return "idle";
+  },
+  context({ prop, bindable, getComputed }) {
+    return {
+      value: bindable(() => ({
+        defaultValue: prop("defaultValue"),
+        prop: prop("value"),
+        onChange(value) {
+          const computed = getComputed();
+          prop("onValueChange")?.({ value, valueAsNumber: computed("valueAsNumber") });
         }
-      },
-      computed: {
-        isRtl: (ctx2) => ctx2.dir === "rtl",
-        valueAsNumber: (ctx2) => parseValue(ctx2, ctx2.value),
-        formattedValue: (ctx2) => formatValue(ctx2, ctx2.valueAsNumber),
-        isAtMin: (ctx2) => utils.isValueAtMin(ctx2.valueAsNumber, ctx2.min),
-        isAtMax: (ctx2) => utils.isValueAtMax(ctx2.valueAsNumber, ctx2.max),
-        isOutOfRange: (ctx2) => !utils.isValueWithinRange(ctx2.valueAsNumber, ctx2.min, ctx2.max),
-        isValueEmpty: (ctx2) => ctx2.value === "",
-        isDisabled: (ctx2) => !!ctx2.disabled || ctx2.fieldsetDisabled,
-        canIncrement: (ctx2) => ctx2.allowOverflow || !ctx2.isAtMax,
-        canDecrement: (ctx2) => ctx2.allowOverflow || !ctx2.isAtMin,
-        valueText: (ctx2) => ctx2.translations.valueText?.(ctx2.value)
-      },
-      watch: {
-        formatOptions: ["setFormatterAndParser", "syncInputElement"],
-        locale: ["setFormatterAndParser", "syncInputElement"],
-        value: ["syncInputElement"],
-        isOutOfRange: ["invokeOnInvalid"],
-        scrubberCursorPoint: ["setVirtualCursorPosition"]
-      },
-      activities: ["trackFormControl"],
+      })),
+      hint: bindable(() => ({ defaultValue: null })),
+      scrubberCursorPoint: bindable(() => ({
+        defaultValue: null,
+        hash(value) {
+          return value ? `x:${value.x}, y:${value.y}` : "";
+        }
+      })),
+      fieldsetDisabled: bindable(() => ({ defaultValue: false }))
+    };
+  },
+  computed: {
+    isRtl: ({ prop }) => prop("dir") === "rtl",
+    valueAsNumber: ({ context, computed, prop }) => parseValue(context.get("value"), { computed, prop }),
+    formattedValue: ({ computed, prop }) => formatValue(computed("valueAsNumber"), { computed, prop }),
+    isAtMin: ({ computed, prop }) => utils.isValueAtMin(computed("valueAsNumber"), prop("min")),
+    isAtMax: ({ computed, prop }) => utils.isValueAtMax(computed("valueAsNumber"), prop("max")),
+    isOutOfRange: ({ computed, prop }) => !utils.isValueWithinRange(computed("valueAsNumber"), prop("min"), prop("max")),
+    isValueEmpty: ({ context }) => context.get("value") === "",
+    isDisabled: ({ prop, context }) => !!prop("disabled") || context.get("fieldsetDisabled"),
+    canIncrement: ({ prop, computed }) => prop("allowOverflow") || !computed("isAtMax"),
+    canDecrement: ({ prop, computed }) => prop("allowOverflow") || !computed("isAtMin"),
+    valueText: ({ prop, context }) => prop("translations").valueText?.(context.get("value")),
+    formatter: core.memo(
+      ({ prop }) => [prop("locale"), prop("formatOptions")],
+      (locale, formatOptions) => createFormatter(locale, formatOptions)
+    ),
+    parser: core.memo(
+      ({ prop }) => [prop("locale"), prop("formatOptions")],
+      (locale, formatOptions) => createParser(locale, formatOptions)
+    )
+  },
+  watch({ track, action, context, computed, prop }) {
+    track([() => context.get("value"), () => prop("locale")], () => {
+      action(["syncInputElement"]);
+    });
+    track([() => computed("isOutOfRange")], () => {
+      action(["invokeOnInvalid"]);
+    });
+    track([() => context.hash("scrubberCursorPoint")], () => {
+      action(["setVirtualCursorPosition"]);
+    });
+  },
+  effects: ["trackFormControl"],
+  on: {
+    "VALUE.SET": {
+      actions: ["setRawValue", "setHintToSet"]
+    },
+    "VALUE.CLEAR": {
+      actions: ["clearValue"]
+    },
+    "VALUE.INCREMENT": {
+      actions: ["increment"]
+    },
+    "VALUE.DECREMENT": {
+      actions: ["decrement"]
+    }
+  },
+  states: {
+    idle: {
       on: {
-        "VALUE.SET": {
-          actions: ["setRawValue", "setHintToSet"]
-        },
-        "VALUE.CLEAR": {
-          actions: ["clearValue"]
-        },
-        "VALUE.INCREMENT": {
+        "TRIGGER.PRESS_DOWN": [
+          { guard: "isTouchPointer", target: "before:spin", actions: ["setHint"] },
+          {
+            target: "before:spin",
+            actions: ["focusInput", "invokeOnFocus", "setHint"]
+          }
+        ],
+        "SCRUBBER.PRESS_DOWN": {
+          target: "scrubbing",
+          actions: ["focusInput", "invokeOnFocus", "setHint", "setCursorPoint"]
+        },
+        "INPUT.FOCUS": {
+          target: "focused",
+          actions: ["focusInput", "invokeOnFocus"]
+        }
+      }
+    },
+    focused: {
+      tags: ["focus"],
+      effects: ["attachWheelListener"],
+      on: {
+        "TRIGGER.PRESS_DOWN": [
+          { guard: "isTouchPointer", target: "before:spin", actions: ["setHint"] },
+          { target: "before:spin", actions: ["focusInput", "setHint"] }
+        ],
+        "SCRUBBER.PRESS_DOWN": {
+          target: "scrubbing",
+          actions: ["focusInput", "setHint", "setCursorPoint"]
+        },
+        "INPUT.ARROW_UP": {
           actions: ["increment"]
         },
-        "VALUE.DECREMENT": {
+        "INPUT.ARROW_DOWN": {
           actions: ["decrement"]
-        }
-      },
-      states: {
-        idle: {
-          on: {
-            "TRIGGER.PRESS_DOWN": [
-              { guard: "isTouchPointer", target: "before:spin", actions: ["setHint"] },
-              {
-                target: "before:spin",
-                actions: ["focusInput", "invokeOnFocus", "setHint"]
-              }
-            ],
-            "SCRUBBER.PRESS_DOWN": {
-              target: "scrubbing",
-              actions: ["focusInput", "invokeOnFocus", "setHint", "setCursorPoint"]
-            },
-            "INPUT.FOCUS": {
-              target: "focused",
-              actions: ["focusInput", "invokeOnFocus"]
-            }
-          }
         },
-        focused: {
-          tags: "focus",
-          activities: "attachWheelListener",
-          on: {
-            "TRIGGER.PRESS_DOWN": [
-              { guard: "isTouchPointer", target: "before:spin", actions: ["setHint"] },
-              { target: "before:spin", actions: ["focusInput", "setHint"] }
-            ],
-            "SCRUBBER.PRESS_DOWN": {
-              target: "scrubbing",
-              actions: ["focusInput", "setHint", "setCursorPoint"]
-            },
-            "INPUT.ARROW_UP": {
-              actions: "increment"
-            },
-            "INPUT.ARROW_DOWN": {
-              actions: "decrement"
-            },
-            "INPUT.HOME": {
-              actions: "decrementToMin"
-            },
-            "INPUT.END": {
-              actions: "incrementToMax"
-            },
-            "INPUT.CHANGE": {
-              actions: ["setValue", "setHint"]
-            },
-            "INPUT.BLUR": [
-              {
-                guard: and("clampValueOnBlur", not("isInRange")),
-                target: "idle",
-                actions: ["setClampedValue", "clearHint", "invokeOnBlur"]
-              },
-              {
-                target: "idle",
-                actions: ["setFormattedValue", "clearHint", "invokeOnBlur"]
-              }
-            ],
-            "INPUT.ENTER": {
-              actions: ["setFormattedValue", "clearHint", "invokeOnBlur"]
-            }
-          }
+        "INPUT.HOME": {
+          actions: ["decrementToMin"]
         },
-        "before:spin": {
-          tags: "focus",
-          activities: "trackButtonDisabled",
-          entry: core.choose([
-            { guard: "isIncrementHint", actions: "increment" },
-            { guard: "isDecrementHint", actions: "decrement" }
-          ]),
-          after: {
-            CHANGE_DELAY: {
-              target: "spinning",
-              guard: and("isInRange", "spinOnPress")
-            }
-          },
-          on: {
-            "TRIGGER.PRESS_UP": [
-              { guard: "isTouchPointer", target: "focused", actions: "clearHint" },
-              { target: "focused", actions: ["focusInput", "clearHint"] }
-            ]
-          }
+        "INPUT.END": {
+          actions: ["incrementToMax"]
         },
-        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: {
-            "TRIGGER.PRESS_UP": {
-              target: "focused",
-              actions: ["focusInput", "clearHint"]
-            }
-          }
+        "INPUT.CHANGE": {
+          actions: ["setValue", "setHint"]
         },
-        scrubbing: {
-          tags: "focus",
-          activities: ["activatePointerLock", "trackMousemove", "setupVirtualCursor", "preventTextSelection"],
-          on: {
-            "SCRUBBER.POINTER_UP": {
-              target: "focused",
-              actions: ["focusInput", "clearCursorPoint"]
-            },
-            "SCRUBBER.POINTER_MOVE": [
-              {
-                guard: "isIncrementHint",
-                actions: ["increment", "setCursorPoint"]
-              },
-              {
-                guard: "isDecrementHint",
-                actions: ["decrement", "setCursorPoint"]
-              }
-            ]
+        "INPUT.BLUR": [
+          {
+            guard: and("clampValueOnBlur", not("isInRange")),
+            target: "idle",
+            actions: ["setClampedValue", "clearHint", "invokeOnBlur"]
+          },
+          {
+            target: "idle",
+            actions: ["setFormattedValue", "clearHint", "invokeOnBlur"]
+          }
+        ],
+        "INPUT.ENTER": {
+          actions: ["setFormattedValue", "clearHint", "invokeOnBlur"]
+        }
+      }
+    },
+    "before:spin": {
+      tags: ["focus"],
+      effects: ["trackButtonDisabled", "waitForChangeDelay"],
+      entry: choose([
+        { guard: "isIncrementHint", actions: ["increment"] },
+        { guard: "isDecrementHint", actions: ["decrement"] }
+      ]),
+      on: {
+        CHANGE_DELAY: {
+          target: "spinning",
+          guard: and("isInRange", "spinOnPress")
+        },
+        "TRIGGER.PRESS_UP": [
+          { guard: "isTouchPointer", target: "focused", actions: ["clearHint"] },
+          { target: "focused", actions: ["focusInput", "clearHint"] }
+        ]
+      }
+    },
+    spinning: {
+      tags: ["focus"],
+      effects: ["trackButtonDisabled", "spinValue"],
+      on: {
+        SPIN: [
+          {
+            guard: and(not("isAtMin"), "isIncrementHint"),
+            actions: ["increment"]
+          },
+          {
+            guard: and(not("isAtMax"), "isDecrementHint"),
+            actions: ["decrement"]
           }
+        ],
+        "TRIGGER.PRESS_UP": {
+          target: "focused",
+          actions: ["focusInput", "clearHint"]
         }
       }
     },
-    {
-      delays: {
-        CHANGE_INTERVAL: 50,
-        CHANGE_DELAY: 300
+    scrubbing: {
+      tags: ["focus"],
+      effects: ["activatePointerLock", "trackMousemove", "setupVirtualCursor", "preventTextSelection"],
+      on: {
+        "SCRUBBER.POINTER_UP": {
+          target: "focused",
+          actions: ["focusInput", "clearCursorPoint"]
+        },
+        "SCRUBBER.POINTER_MOVE": [
+          {
+            guard: "isIncrementHint",
+            actions: ["increment", "setCursorPoint"]
+          },
+          {
+            guard: "isDecrementHint",
+            actions: ["decrement", "setCursorPoint"]
+          }
+        ]
+      }
+    }
+  },
+  implementations: {
+    guards: {
+      clampValueOnBlur: ({ prop }) => prop("clampValueOnBlur"),
+      isAtMin: ({ computed }) => computed("isAtMin"),
+      spinOnPress: ({ prop }) => !!prop("spinOnPress"),
+      isAtMax: ({ computed }) => computed("isAtMax"),
+      isInRange: ({ computed }) => !computed("isOutOfRange"),
+      isDecrementHint: ({ context, event }) => (event.hint ?? context.get("hint")) === "decrement",
+      isIncrementHint: ({ context, event }) => (event.hint ?? context.get("hint")) === "increment",
+      isTouchPointer: ({ event }) => event.pointerType === "touch"
+    },
+    effects: {
+      waitForChangeDelay({ send }) {
+        const id = setTimeout(() => {
+          send({ type: "CHANGE_DELAY" });
+        }, 300);
+        return () => clearTimeout(id);
       },
-      guards: {
-        clampValueOnBlur: (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",
-        isIncrementHint: (ctx2, evt) => (evt.hint ?? ctx2.hint) === "increment",
-        isTouchPointer: (_ctx, evt) => evt.pointerType === "touch"
+      spinValue({ send }) {
+        const id = setInterval(() => {
+          send({ type: "SPIN" });
+        }, 50);
+        return () => clearInterval(id);
       },
-      activities: {
-        trackFormControl(ctx2, _evt, { initialContext }) {
-          const inputEl = dom.getInputEl(ctx2);
-          return domQuery.trackFormControl(inputEl, {
-            onFieldsetDisabledChange(disabled) {
-              ctx2.fieldsetDisabled = disabled;
-            },
-            onFormReset() {
-              set.value(ctx2, initialContext.value);
-            }
-          });
-        },
-        setupVirtualCursor(ctx2) {
-          return dom.setupVirtualCursor(ctx2);
-        },
-        preventTextSelection(ctx2) {
-          return dom.preventTextSelection(ctx2);
-        },
-        trackButtonDisabled(ctx2, _evt, { send }) {
-          const btn = dom.getPressedTriggerEl(ctx2, ctx2.hint);
-          return domQuery.observeAttributes(btn, {
-            attributes: ["disabled"],
-            callback() {
-              send({ type: "TRIGGER.PRESS_UP", src: "attr" });
-            }
-          });
-        },
-        attachWheelListener(ctx2, _evt, { send }) {
-          const inputEl = dom.getInputEl(ctx2);
-          if (!inputEl || !dom.isActiveElement(ctx2, inputEl) || !ctx2.allowMouseWheel) return;
-          function onWheel(event) {
-            event.preventDefault();
-            const dir = Math.sign(event.deltaY) * -1;
-            if (dir === 1) {
-              send("VALUE.INCREMENT");
-            } else if (dir === -1) {
-              send("VALUE.DECREMENT");
-            }
+      trackFormControl({ context, scope }) {
+        const inputEl = getInputEl(scope);
+        return domQuery.trackFormControl(inputEl, {
+          onFieldsetDisabledChange(disabled) {
+            context.set("fieldsetDisabled", disabled);
+          },
+          onFormReset() {
+            context.set("value", context.initial("value"));
           }
-          return domQuery.addDomEvent(inputEl, "wheel", onWheel, { passive: false });
-        },
-        activatePointerLock(ctx2) {
-          if (domQuery.isSafari()) return;
-          return domQuery.requestPointerLock(dom.getDoc(ctx2));
-        },
-        trackMousemove(ctx2, _evt, { send }) {
-          const doc = dom.getDoc(ctx2);
-          function onMousemove(event) {
-            if (!ctx2.scrubberCursorPoint) return;
-            const value = dom.getMousemoveValue(ctx2, event);
-            if (!value.hint) return;
-            send({
-              type: "SCRUBBER.POINTER_MOVE",
-              hint: value.hint,
-              point: value.point
-            });
+        });
+      },
+      setupVirtualCursor({ context, scope }) {
+        const point = context.get("scrubberCursorPoint");
+        return setupVirtualCursor(scope, point);
+      },
+      preventTextSelection({ scope }) {
+        return preventTextSelection(scope);
+      },
+      trackButtonDisabled({ context, scope, send }) {
+        const hint = context.get("hint");
+        const btn = getPressedTriggerEl(scope, hint);
+        return domQuery.observeAttributes(btn, {
+          attributes: ["disabled"],
+          callback() {
+            send({ type: "TRIGGER.PRESS_UP", src: "attr" });
           }
-          function onMouseup() {
-            send("SCRUBBER.POINTER_UP");
+        });
+      },
+      attachWheelListener({ scope, send, prop }) {
+        const inputEl = getInputEl(scope);
+        if (!inputEl || !scope.isActiveElement(inputEl) || !prop("allowMouseWheel")) return;
+        function onWheel(event) {
+          event.preventDefault();
+          const dir = Math.sign(event.deltaY) * -1;
+          if (dir === 1) {
+            send({ type: "VALUE.INCREMENT" });
+          } else if (dir === -1) {
+            send({ type: "VALUE.DECREMENT" });
           }
-          return utils.callAll(
-            domQuery.addDomEvent(doc, "mousemove", onMousemove, false),
-            domQuery.addDomEvent(doc, "mouseup", onMouseup, false)
-          );
         }
+        return domQuery.addDomEvent(inputEl, "wheel", onWheel, { passive: false });
       },
-      actions: {
-        focusInput(ctx2) {
-          if (!ctx2.focusInputOnChange) return;
-          const inputEl = dom.getInputEl(ctx2);
-          if (dom.isActiveElement(ctx2, inputEl)) return;
-          domQuery.raf(() => inputEl?.focus({ preventScroll: true }));
-        },
-        increment(ctx2, evt) {
-          const nextValue = utils.incrementValue(ctx2.valueAsNumber, evt.step ?? ctx2.step);
-          const value = formatValue(ctx2, utils.clampValue(nextValue, ctx2.min, ctx2.max));
-          set.value(ctx2, value);
-        },
-        decrement(ctx2, evt) {
-          const nextValue = utils.decrementValue(ctx2.valueAsNumber, evt.step ?? ctx2.step);
-          const value = formatValue(ctx2, utils.clampValue(nextValue, ctx2.min, ctx2.max));
-          set.value(ctx2, value);
-        },
-        setClampedValue(ctx2) {
-          const nextValue = utils.clampValue(ctx2.valueAsNumber, ctx2.min, ctx2.max);
-          set.value(ctx2, formatValue(ctx2, nextValue));
-        },
-        setRawValue(ctx2, evt) {
-          const parsedValue = parseValue(ctx2, evt.value);
-          const value = formatValue(ctx2, utils.clampValue(parsedValue, ctx2.min, ctx2.max));
-          set.value(ctx2, value);
-        },
-        setValue(ctx2, evt) {
-          const value = evt.target?.value ?? evt.value;
-          set.value(ctx2, value);
-        },
-        clearValue(ctx2) {
-          set.value(ctx2, "");
-        },
-        incrementToMax(ctx2) {
-          const value = formatValue(ctx2, ctx2.max);
-          set.value(ctx2, value);
-        },
-        decrementToMin(ctx2) {
-          const value = formatValue(ctx2, ctx2.min);
-          set.value(ctx2, value);
-        },
-        setHint(ctx2, evt) {
-          ctx2.hint = evt.hint;
-        },
-        clearHint(ctx2) {
-          ctx2.hint = null;
-        },
-        setHintToSet(ctx2) {
-          ctx2.hint = "set";
-        },
-        invokeOnFocus(ctx2) {
-          ctx2.onFocusChange?.({
-            focused: true,
-            value: ctx2.formattedValue,
-            valueAsNumber: ctx2.valueAsNumber
-          });
-        },
-        invokeOnBlur(ctx2) {
-          ctx2.onFocusChange?.({
-            focused: false,
-            value: ctx2.formattedValue,
-            valueAsNumber: ctx2.valueAsNumber
-          });
-        },
-        invokeOnInvalid(ctx2) {
-          if (!ctx2.isOutOfRange) return;
-          const reason = ctx2.valueAsNumber > ctx2.max ? "rangeOverflow" : "rangeUnderflow";
-          ctx2.onValueInvalid?.({
-            reason,
-            value: ctx2.formattedValue,
-            valueAsNumber: ctx2.valueAsNumber
+      activatePointerLock({ scope }) {
+        if (domQuery.isSafari()) return;
+        return domQuery.requestPointerLock(scope.getDoc());
+      },
+      trackMousemove({ scope, send, context, computed }) {
+        const doc = scope.getDoc();
+        function onMousemove(event) {
+          const point = context.get("scrubberCursorPoint");
+          const isRtl = computed("isRtl");
+          const value = getMousemoveValue(scope, { point, isRtl, event });
+          if (!value.hint) return;
+          send({
+            type: "SCRUBBER.POINTER_MOVE",
+            hint: value.hint,
+            point: value.point
           });
-        },
-        syncInputElement(ctx2, evt) {
-          const value = evt.type.endsWith("CHANGE") ? ctx2.value : ctx2.formattedValue;
-          sync.input(ctx2, value);
-        },
-        setFormattedValue(ctx2) {
-          set.value(ctx2, ctx2.formattedValue);
-        },
-        setCursorPoint(ctx2, evt) {
-          ctx2.scrubberCursorPoint = evt.point;
-        },
-        clearCursorPoint(ctx2) {
-          ctx2.scrubberCursorPoint = null;
-        },
-        setVirtualCursorPosition(ctx2) {
-          const cursorEl = dom.getCursorEl(ctx2);
-          if (!cursorEl || !ctx2.scrubberCursorPoint) return;
-          const { x, y } = ctx2.scrubberCursorPoint;
-          cursorEl.style.transform = `translate3d(${x}px, ${y}px, 0px)`;
-        },
-        setFormatterAndParser(ctx2) {
-          if (!ctx2.locale) return;
-          ctx2.formatter = createFormatter(ctx2.locale, ctx2.formatOptions);
-          ctx2.parser = createParser(ctx2.locale, ctx2.formatOptions);
         }
+        function onMouseup() {
+          send({ type: "SCRUBBER.POINTER_UP" });
+        }
+        return utils.callAll(domQuery.addDomEvent(doc, "mousemove", onMousemove, false), domQuery.addDomEvent(doc, "mouseup", onMouseup, false));
+      }
+    },
+    actions: {
+      focusInput({ scope, prop }) {
+        if (!prop("focusInputOnChange")) return;
+        const inputEl = getInputEl(scope);
+        if (scope.isActiveElement(inputEl)) return;
+        domQuery.raf(() => inputEl?.focus({ preventScroll: true }));
+      },
+      increment({ context, event, prop, computed }) {
+        const nextValue = utils.incrementValue(computed("valueAsNumber"), event.step ?? prop("step"));
+        const value = formatValue(utils.clampValue(nextValue, prop("min"), prop("max")), { computed, prop });
+        context.set("value", value);
+      },
+      decrement({ context, event, prop, computed }) {
+        const nextValue = utils.decrementValue(computed("valueAsNumber"), event.step ?? prop("step"));
+        const value = formatValue(utils.clampValue(nextValue, prop("min"), prop("max")), { computed, prop });
+        context.set("value", value);
+      },
+      setClampedValue({ context, prop, computed }) {
+        const nextValue = utils.clampValue(computed("valueAsNumber"), prop("min"), prop("max"));
+        context.set("value", formatValue(nextValue, { computed, prop }));
+      },
+      setRawValue({ context, event, prop, computed }) {
+        const parsedValue = parseValue(event.value, { computed, prop });
+        const value = formatValue(utils.clampValue(parsedValue, prop("min"), prop("max")), { computed, prop });
+        context.set("value", value);
+      },
+      setValue({ context, event }) {
+        const value = event.target?.value ?? event.value;
+        context.set("value", value);
+      },
+      clearValue({ context }) {
+        context.set("value", "");
+      },
+      incrementToMax({ context, prop, computed }) {
+        const value = formatValue(prop("max"), { computed, prop });
+        context.set("value", value);
       },
-      compareFns: {
-        formatOptions: (a, b) => utils.isEqual(a, b),
-        scrubberCursorPoint: (a, b) => utils.isEqual(a, b)
+      decrementToMin({ context, prop, computed }) {
+        const value = formatValue(prop("min"), { computed, prop });
+        context.set("value", value);
+      },
+      setHint({ context, event }) {
+        context.set("hint", event.hint);
+      },
+      clearHint({ context }) {
+        context.set("hint", null);
+      },
+      setHintToSet({ context }) {
+        context.set("hint", "set");
+      },
+      invokeOnFocus({ computed, prop }) {
+        prop("onFocusChange")?.({
+          focused: true,
+          value: computed("formattedValue"),
+          valueAsNumber: computed("valueAsNumber")
+        });
+      },
+      invokeOnBlur({ computed, prop }) {
+        prop("onFocusChange")?.({
+          focused: false,
+          value: computed("formattedValue"),
+          valueAsNumber: computed("valueAsNumber")
+        });
+      },
+      invokeOnInvalid({ computed, prop }) {
+        if (!computed("isOutOfRange")) return;
+        const reason = computed("valueAsNumber") > prop("max") ? "rangeOverflow" : "rangeUnderflow";
+        prop("onValueInvalid")?.({
+          reason,
+          value: computed("formattedValue"),
+          valueAsNumber: computed("valueAsNumber")
+        });
+      },
+      syncInputElement({ context, event, computed, scope }) {
+        const value = event.type.endsWith("CHANGE") ? context.get("value") : computed("formattedValue");
+        const inputEl = getInputEl(scope);
+        const sel = recordCursor(inputEl);
+        domQuery.raf(() => {
+          domQuery.setElementValue(inputEl, value);
+          restoreCursor(inputEl, sel);
+        });
+      },
+      setFormattedValue({ context, computed }) {
+        context.set("value", computed("formattedValue"));
+      },
+      setCursorPoint({ context, event }) {
+        context.set("scrubberCursorPoint", event.point);
+      },
+      clearCursorPoint({ context }) {
+        context.set("scrubberCursorPoint", null);
+      },
+      setVirtualCursorPosition({ context, scope }) {
+        const cursorEl = getCursorEl(scope);
+        const point = context.get("scrubberCursorPoint");
+        if (!cursorEl || !point) return;
+        cursorEl.style.transform = `translate3d(${point.x}px, ${point.y}px, 0px)`;
       }
     }
-  );
-}
-var sync = {
-  input(ctx, value) {
-    const inputEl = dom.getInputEl(ctx);
-    if (!inputEl) return;
-    const sel = recordCursor(inputEl);
-    domQuery.raf(() => {
-      domQuery.setElementValue(inputEl, value);
-      restoreCursor(inputEl, sel);
-    });
-  }
-};
-var invoke = {
-  onChange: (ctx) => {
-    ctx.onValueChange?.({
-      value: ctx.value,
-      valueAsNumber: ctx.valueAsNumber
-    });
-  }
-};
-var set = {
-  value: (ctx, value) => {
-    if (utils.isEqual(ctx.value, value)) return;
-    ctx.value = value;
-    invoke.onChange(ctx);
   }
-};
+});
+var props = types.createProps()([
+  "allowMouseWheel",
+  "allowOverflow",
+  "clampValueOnBlur",
+  "dir",
+  "disabled",
+  "focusInputOnChange",
+  "form",
+  "formatOptions",
+  "getRootNode",
+  "id",
+  "ids",
+  "inputMode",
+  "invalid",
+  "locale",
+  "max",
+  "min",
+  "name",
+  "onFocusChange",
+  "onValueChange",
+  "onValueInvalid",
+  "pattern",
+  "required",
+  "readOnly",
+  "spinOnPress",
+  "step",
+  "translations",
+  "value",
+  "defaultValue"
+]);
+var splitProps = utils.createSplitProps(props);
 
 exports.anatomy = anatomy;
 exports.connect = connect;
 exports.machine = machine;
+exports.props = props;
+exports.splitProps = splitProps;