@zag-js/pin-input 0.82.2 → 1.0.0

package/dist/index.js

@@ -4,27 +4,25 @@ var anatomy$1 = require('@zag-js/anatomy');
 var domQuery = require('@zag-js/dom-query');
 var utils = require('@zag-js/utils');
 var core = require('@zag-js/core');
+var types = require('@zag-js/types');
 
 // src/pin-input.anatomy.ts
 var anatomy = anatomy$1.createAnatomy("pinInput").parts("root", "label", "input", "control");
 var parts = anatomy.build();
-var dom = domQuery.createScope({
-  getRootId: (ctx) => ctx.ids?.root ?? `pin-input:${ctx.id}`,
-  getInputId: (ctx, id) => ctx.ids?.input?.(id) ?? `pin-input:${ctx.id}:${id}`,
-  getHiddenInputId: (ctx) => ctx.ids?.hiddenInput ?? `pin-input:${ctx.id}:hidden`,
-  getLabelId: (ctx) => ctx.ids?.label ?? `pin-input:${ctx.id}:label`,
-  getControlId: (ctx) => ctx.ids?.control ?? `pin-input:${ctx.id}:control`,
-  getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
-  getInputEls: (ctx) => {
-    const ownerId = CSS.escape(dom.getRootId(ctx));
-    const selector = `input[data-ownedby=${ownerId}]`;
-    return domQuery.queryAll(dom.getRootEl(ctx), selector);
-  },
-  getInputEl: (ctx, id) => dom.getById(ctx, dom.getInputId(ctx, id)),
-  getFocusedInputEl: (ctx) => dom.getInputEls(ctx)[ctx.focusedIndex],
-  getFirstInputEl: (ctx) => dom.getInputEls(ctx)[0],
-  getHiddenInputEl: (ctx) => dom.getById(ctx, dom.getHiddenInputId(ctx))
-});
+var getRootId = (ctx) => ctx.ids?.root ?? `pin-input:${ctx.id}`;
+var getInputId = (ctx, id) => ctx.ids?.input?.(id) ?? `pin-input:${ctx.id}:${id}`;
+var getHiddenInputId = (ctx) => ctx.ids?.hiddenInput ?? `pin-input:${ctx.id}:hidden`;
+var getLabelId = (ctx) => ctx.ids?.label ?? `pin-input:${ctx.id}:label`;
+var getControlId = (ctx) => ctx.ids?.control ?? `pin-input:${ctx.id}:control`;
+var getRootEl = (ctx) => ctx.getById(getRootId(ctx));
+var getInputEls = (ctx) => {
+  const ownerId = CSS.escape(getRootId(ctx));
+  const selector = `input[data-ownedby=${ownerId}]`;
+  return domQuery.queryAll(getRootEl(ctx), selector);
+};
+var getInputElAtIndex = (ctx, index) => getInputEls(ctx)[index];
+var getFirstInputEl = (ctx) => getInputEls(ctx)[0];
+var getHiddenInputEl = (ctx) => ctx.getById(getHiddenInputId(ctx));
 
 // src/pin-input.utils.ts
 var REGEX = {
@@ -32,29 +30,30 @@ var REGEX = {
   alphabetic: /^[A-Za-z]+$/,
   alphanumeric: /^[a-zA-Z0-9]+$/i
 };
-function isValidType(ctx, value) {
-  if (!ctx.type) return true;
-  return !!REGEX[ctx.type]?.test(value);
+function isValidType(type, value) {
+  if (!type) return true;
+  return !!REGEX[type]?.test(value);
 }
-function isValidValue(ctx, value) {
-  if (!ctx.pattern) return isValidType(ctx, value);
-  const regex = new RegExp(ctx.pattern, "g");
+function isValidValue(value, type, pattern) {
+  if (!pattern) return isValidType(type, value);
+  const regex = new RegExp(pattern, "g");
   return regex.test(value);
 }
 
 // src/pin-input.connect.ts
-function connect(state, send, normalize) {
-  const complete = state.context.isValueComplete;
-  const invalid = state.context.invalid;
-  const focusedIndex = state.context.focusedIndex;
-  const translations = state.context.translations;
+function connect(service, normalize) {
+  const { send, context, computed, prop, scope } = service;
+  const complete = computed("isValueComplete");
+  const invalid = prop("invalid");
+  const translations = prop("translations");
+  const focusedIndex = context.get("focusedIndex");
   function focus() {
-    dom.getFirstInputEl(state.context)?.focus();
+    getFirstInputEl(scope)?.focus();
   }
   return {
     focus,
-    value: state.context.value,
-    valueAsString: state.context.valueAsString,
+    value: context.get("value"),
+    valueAsString: computed("valueAsString"),
     complete,
     setValue(value) {
       if (!Array.isArray(value)) {
@@ -70,25 +69,25 @@ function connect(state, send, normalize) {
     },
     getRootProps() {
       return normalize.element({
-        dir: state.context.dir,
+        dir: prop("dir"),
         ...parts.root.attrs,
-        id: dom.getRootId(state.context),
+        id: getRootId(scope),
         "data-invalid": domQuery.dataAttr(invalid),
-        "data-disabled": domQuery.dataAttr(state.context.disabled),
+        "data-disabled": domQuery.dataAttr(prop("disabled")),
         "data-complete": domQuery.dataAttr(complete),
-        "data-readonly": domQuery.dataAttr(state.context.readOnly)
+        "data-readonly": domQuery.dataAttr(prop("readOnly"))
       });
     },
     getLabelProps() {
       return normalize.label({
         ...parts.label.attrs,
-        dir: state.context.dir,
-        htmlFor: dom.getHiddenInputId(state.context),
-        id: dom.getLabelId(state.context),
+        dir: prop("dir"),
+        htmlFor: getHiddenInputId(scope),
+        id: getLabelId(scope),
         "data-invalid": domQuery.dataAttr(invalid),
-        "data-disabled": domQuery.dataAttr(state.context.disabled),
+        "data-disabled": domQuery.dataAttr(prop("disabled")),
         "data-complete": domQuery.dataAttr(complete),
-        "data-readonly": domQuery.dataAttr(state.context.readOnly),
+        "data-readonly": domQuery.dataAttr(prop("readOnly")),
         onClick(event) {
           event.preventDefault();
           focus();
@@ -100,49 +99,49 @@ function connect(state, send, normalize) {
         "aria-hidden": true,
         type: "text",
         tabIndex: -1,
-        id: dom.getHiddenInputId(state.context),
-        readOnly: state.context.readOnly,
-        disabled: state.context.disabled,
-        required: state.context.required,
-        name: state.context.name,
-        form: state.context.form,
+        id: getHiddenInputId(scope),
+        readOnly: prop("readOnly"),
+        disabled: prop("disabled"),
+        required: prop("required"),
+        name: prop("name"),
+        form: prop("form"),
         style: domQuery.visuallyHiddenStyle,
-        maxLength: state.context.valueLength,
-        defaultValue: state.context.valueAsString
+        maxLength: computed("valueLength"),
+        defaultValue: computed("valueAsString")
       });
     },
     getControlProps() {
       return normalize.element({
         ...parts.control.attrs,
-        dir: state.context.dir,
-        id: dom.getControlId(state.context)
+        dir: prop("dir"),
+        id: getControlId(scope)
       });
     },
-    getInputProps(props) {
-      const { index } = props;
-      const inputType = state.context.type === "numeric" ? "tel" : "text";
+    getInputProps(props2) {
+      const { index } = props2;
+      const inputType = prop("type") === "numeric" ? "tel" : "text";
       return normalize.input({
         ...parts.input.attrs,
-        dir: state.context.dir,
-        disabled: state.context.disabled,
-        "data-disabled": domQuery.dataAttr(state.context.disabled),
+        dir: prop("dir"),
+        disabled: prop("disabled"),
+        "data-disabled": domQuery.dataAttr(prop("disabled")),
         "data-complete": domQuery.dataAttr(complete),
-        id: dom.getInputId(state.context, index.toString()),
-        "data-ownedby": dom.getRootId(state.context),
-        "aria-label": translations.inputLabel(index, state.context.valueLength),
-        inputMode: state.context.otp || state.context.type === "numeric" ? "numeric" : "text",
+        id: getInputId(scope, index.toString()),
+        "data-ownedby": getRootId(scope),
+        "aria-label": translations?.inputLabel?.(index, computed("valueLength")),
+        inputMode: prop("otp") || prop("type") === "numeric" ? "numeric" : "text",
         "aria-invalid": domQuery.ariaAttr(invalid),
         "data-invalid": domQuery.dataAttr(invalid),
-        type: state.context.mask ? "password" : inputType,
-        defaultValue: state.context.value[index] || "",
-        readOnly: state.context.readOnly,
+        type: prop("mask") ? "password" : inputType,
+        defaultValue: context.get("value")[index] || "",
+        readOnly: prop("readOnly"),
         autoCapitalize: "none",
-        autoComplete: state.context.otp ? "one-time-code" : "off",
-        placeholder: focusedIndex === index ? "" : state.context.placeholder,
+        autoComplete: prop("otp") ? "one-time-code" : "off",
+        placeholder: focusedIndex === index ? "" : prop("placeholder"),
         onBeforeInput(event) {
           try {
             const value = domQuery.getBeforeInputValue(event);
-            const isValid = isValidValue(state.context, value);
+            const isValid = isValidValue(value, prop("type"), prop("pattern"));
             if (!isValid) {
               send({ type: "VALUE.INVALID", value });
               event.preventDefault();
@@ -163,7 +162,7 @@ function connect(state, send, normalize) {
             return;
           }
           if (evt.inputType === "deleteContentBackward") {
-            send("INPUT.BACKSPACE");
+            send({ type: "INPUT.BACKSPACE" });
             return;
           }
           send({ type: "INPUT.CHANGE", value, index });
@@ -174,29 +173,34 @@ function connect(state, send, normalize) {
           if (domQuery.isModifierKey(event)) return;
           const keyMap = {
             Backspace() {
-              send("INPUT.BACKSPACE");
+              send({ type: "INPUT.BACKSPACE" });
             },
             Delete() {
-              send("INPUT.DELETE");
+              send({ type: "INPUT.DELETE" });
             },
             ArrowLeft() {
-              send("INPUT.ARROW_LEFT");
+              send({ type: "INPUT.ARROW_LEFT" });
             },
             ArrowRight() {
-              send("INPUT.ARROW_RIGHT");
+              send({ type: "INPUT.ARROW_RIGHT" });
             },
             Enter() {
-              send("INPUT.ENTER");
+              send({ type: "INPUT.ENTER" });
             }
           };
-          const exec = keyMap[domQuery.getEventKey(event, state.context)];
+          const exec = keyMap[domQuery.getEventKey(event, {
+            dir: prop("dir"),
+            orientation: "horizontal"
+          })];
           if (exec) {
             exec(event);
             event.preventDefault();
           }
         },
         onFocus() {
-          send({ type: "INPUT.FOCUS", index });
+          queueMicrotask(() => {
+            send({ type: "INPUT.FOCUS", index });
+          });
         },
         onBlur() {
           send({ type: "INPUT.BLUR", index });
@@ -205,263 +209,314 @@ function connect(state, send, normalize) {
     }
   };
 }
-function machine(userContext) {
-  const ctx = utils.compact(userContext);
-  return core.createMachine(
-    {
-      id: "pin-input",
-      initial: "idle",
-      context: {
-        value: [],
-        placeholder: "\u25CB",
-        otp: false,
-        type: "numeric",
-        ...ctx,
-        focusedIndex: -1,
-        translations: {
-          inputLabel: (index, length) => `pin code ${index + 1} of ${length}`,
-          ...ctx.translations
+var { choose, createMachine } = core.setup();
+var machine = createMachine({
+  props({ props: props2 }) {
+    return {
+      placeholder: "\u25CB",
+      otp: false,
+      type: "numeric",
+      defaultValue: [],
+      ...props2,
+      translations: {
+        inputLabel: (index, length) => `pin code ${index + 1} of ${length}`,
+        ...props2.translations
+      }
+    };
+  },
+  initialState() {
+    return "idle";
+  },
+  context({ prop, bindable }) {
+    return {
+      value: bindable(() => ({
+        sync: true,
+        value: prop("value"),
+        defaultValue: prop("defaultValue"),
+        isEqual: utils.isEqual,
+        onChange(value) {
+          prop("onValueChange")?.({ value, valueAsString: value.join("") });
         }
+      })),
+      focusedIndex: bindable(() => ({
+        sync: true,
+        defaultValue: -1
+      }))
+    };
+  },
+  computed: {
+    valueLength: ({ context }) => context.get("value").length,
+    filledValueLength: ({ context }) => context.get("value").filter((v) => v?.trim() !== "").length,
+    isValueComplete: ({ context }) => {
+      const value = context.get("value");
+      const filledValueLength = value.filter((v) => v?.trim() !== "").length;
+      return value.length === filledValueLength;
+    },
+    valueAsString: ({ context }) => context.get("value").join(""),
+    focusedValue: ({ context }) => context.get("value")[context.get("focusedIndex")] || ""
+  },
+  entry: choose([
+    {
+      guard: "autoFocus",
+      actions: ["setupValue", "setFocusIndexToFirst"]
+    },
+    { actions: ["setupValue"] }
+  ]),
+  watch({ action, track, context, computed }) {
+    track([() => context.get("focusedIndex")], () => {
+      action(["focusInput", "selectInputIfNeeded"]);
+    });
+    track([() => context.get("value").join(",")], () => {
+      action(["syncInputElements", "dispatchInputEvent"]);
+    });
+    track([() => computed("isValueComplete")], () => {
+      action(["invokeOnComplete", "blurFocusedInputIfNeeded"]);
+    });
+  },
+  on: {
+    "VALUE.SET": [
+      {
+        guard: "hasIndex",
+        actions: ["setValueAtIndex"]
       },
-      computed: {
-        valueLength: (ctx2) => ctx2.value.length,
-        filledValueLength: (ctx2) => ctx2.value.filter((v) => v?.trim() !== "").length,
-        isValueComplete: (ctx2) => ctx2.valueLength === ctx2.filledValueLength,
-        valueAsString: (ctx2) => ctx2.value.join(""),
-        focusedValue: (ctx2) => ctx2.value[ctx2.focusedIndex] || ""
-      },
-      entry: core.choose([
-        {
-          guard: "autoFocus",
-          actions: ["setupValue", "setFocusIndexToFirst"]
-        },
-        { actions: ["setupValue"] }
-      ]),
-      watch: {
-        focusedIndex: ["focusInput", "selectInputIfNeeded"],
-        value: ["syncInputElements"],
-        isValueComplete: ["invokeOnComplete", "blurFocusedInputIfNeeded"]
-      },
+      { actions: ["setValue"] }
+    ],
+    "VALUE.CLEAR": {
+      actions: ["clearValue", "setFocusIndexToFirst"]
+    }
+  },
+  states: {
+    idle: {
       on: {
-        "VALUE.SET": [
-          {
-            guard: "hasIndex",
-            actions: ["setValueAtIndex"]
-          },
-          { actions: ["setValue"] }
-        ],
-        "VALUE.CLEAR": {
-          actions: ["clearValue", "setFocusIndexToFirst"]
-        }
-      },
-      states: {
-        idle: {
-          on: {
-            "INPUT.FOCUS": {
-              target: "focused",
-              actions: "setFocusedIndex"
-            }
-          }
-        },
-        focused: {
-          on: {
-            "INPUT.CHANGE": [
-              {
-                guard: "isFinalValue",
-                actions: ["setFocusedValue", "syncInputValue"]
-              },
-              {
-                actions: ["setFocusedValue", "setNextFocusedIndex", "syncInputValue"]
-              }
-            ],
-            "INPUT.PASTE": {
-              actions: ["setPastedValue", "setLastValueFocusIndex"]
-            },
-            "INPUT.BLUR": {
-              target: "idle",
-              actions: "clearFocusedIndex"
-            },
-            "INPUT.DELETE": {
-              guard: "hasValue",
-              actions: "clearFocusedValue"
-            },
-            "INPUT.ARROW_LEFT": {
-              actions: "setPrevFocusedIndex"
-            },
-            "INPUT.ARROW_RIGHT": {
-              actions: "setNextFocusedIndex"
-            },
-            "INPUT.BACKSPACE": [
-              {
-                guard: "hasValue",
-                actions: ["clearFocusedValue"]
-              },
-              {
-                actions: ["setPrevFocusedIndex", "clearFocusedValue"]
-              }
-            ],
-            "INPUT.ENTER": {
-              guard: "isValueComplete",
-              actions: "requestFormSubmit"
-            },
-            "VALUE.INVALID": {
-              actions: "invokeOnInvalid"
-            }
-          }
+        "INPUT.FOCUS": {
+          target: "focused",
+          actions: ["setFocusedIndex"]
         }
       }
     },
-    {
-      guards: {
-        autoFocus: (ctx2) => !!ctx2.autoFocus,
-        isValueEmpty: (_ctx, evt) => evt.value === "",
-        hasValue: (ctx2) => ctx2.value[ctx2.focusedIndex] !== "",
-        isValueComplete: (ctx2) => ctx2.isValueComplete,
-        isFinalValue: (ctx2) => ctx2.filledValueLength + 1 === ctx2.valueLength && ctx2.value.findIndex((v) => v.trim() === "") === ctx2.focusedIndex,
-        hasIndex: (_ctx, evt) => evt.index !== void 0,
-        isDisabled: (ctx2) => !!ctx2.disabled
-      },
-      actions: {
-        setupValue(ctx2) {
-          if (ctx2.value.length) return;
-          const inputEls = dom.getInputEls(ctx2);
-          const emptyValues = Array.from({ length: inputEls.length }).fill("");
-          assignValue(ctx2, emptyValues);
-        },
-        focusInput(ctx2) {
-          if (ctx2.focusedIndex === -1) return;
-          dom.getFocusedInputEl(ctx2)?.focus({ preventScroll: true });
-        },
-        selectInputIfNeeded(ctx2) {
-          if (!ctx2.selectOnFocus || ctx2.focusedIndex === -1) return;
-          domQuery.raf(() => {
-            dom.getFocusedInputEl(ctx2)?.select();
-          });
-        },
-        invokeOnComplete(ctx2) {
-          if (!ctx2.isValueComplete) return;
-          ctx2.onValueComplete?.({
-            value: Array.from(ctx2.value),
-            valueAsString: ctx2.valueAsString
-          });
-        },
-        invokeOnInvalid(ctx2, evt) {
-          ctx2.onValueInvalid?.({
-            value: evt.value,
-            index: ctx2.focusedIndex
-          });
-        },
-        clearFocusedIndex(ctx2) {
-          ctx2.focusedIndex = -1;
-        },
-        setFocusedIndex(ctx2, evt) {
-          ctx2.focusedIndex = evt.index;
-        },
-        setValue(ctx2, evt) {
-          set.value(ctx2, evt.value);
-        },
-        setFocusedValue(ctx2, evt) {
-          const nextValue = getNextValue(ctx2.focusedValue, evt.value);
-          set.valueAtIndex(ctx2, ctx2.focusedIndex, nextValue);
-        },
-        revertInputValue(ctx2) {
-          const inputEl = dom.getFocusedInputEl(ctx2);
-          dom.setValue(inputEl, ctx2.focusedValue);
-        },
-        syncInputValue(ctx2, evt) {
-          const inputEl = dom.getInputEl(ctx2, evt.index.toString());
-          dom.setValue(inputEl, ctx2.value[evt.index]);
-        },
-        syncInputElements(ctx2) {
-          const inputEls = dom.getInputEls(ctx2);
-          inputEls.forEach((inputEl, index) => {
-            dom.setValue(inputEl, ctx2.value[index]);
-          });
-        },
-        setPastedValue(ctx2, evt) {
-          domQuery.raf(() => {
-            const startIndex = Math.min(ctx2.focusedIndex, ctx2.filledValueLength);
-            const left = startIndex > 0 ? ctx2.valueAsString.substring(0, ctx2.focusedIndex) : "";
-            const right = evt.value.substring(0, ctx2.valueLength - startIndex);
-            const value = left + right;
-            set.value(ctx2, value.split(""));
-          });
-        },
-        setValueAtIndex(ctx2, evt) {
-          const nextValue = getNextValue(ctx2.focusedValue, evt.value);
-          set.valueAtIndex(ctx2, evt.index, nextValue);
-        },
-        clearValue(ctx2) {
-          const nextValue = Array.from({ length: ctx2.valueLength }).fill("");
-          set.value(ctx2, nextValue);
-        },
-        clearFocusedValue(ctx2) {
-          set.valueAtIndex(ctx2, ctx2.focusedIndex, "");
+    focused: {
+      on: {
+        "INPUT.CHANGE": [
+          {
+            guard: "isFinalValue",
+            actions: ["setFocusedValue", "syncInputValue"]
+          },
+          {
+            actions: ["setFocusedValue", "setNextFocusedIndex", "syncInputValue"]
+          }
+        ],
+        "INPUT.PASTE": {
+          actions: ["setPastedValue", "setLastValueFocusIndex"]
         },
-        setFocusIndexToFirst(ctx2) {
-          ctx2.focusedIndex = 0;
+        "INPUT.BLUR": {
+          target: "idle",
+          actions: ["clearFocusedIndex"]
         },
-        setNextFocusedIndex(ctx2) {
-          ctx2.focusedIndex = Math.min(ctx2.focusedIndex + 1, ctx2.valueLength - 1);
+        "INPUT.DELETE": {
+          guard: "hasValue",
+          actions: ["clearFocusedValue"]
         },
-        setPrevFocusedIndex(ctx2) {
-          ctx2.focusedIndex = Math.max(ctx2.focusedIndex - 1, 0);
+        "INPUT.ARROW_LEFT": {
+          actions: ["setPrevFocusedIndex"]
         },
-        setLastValueFocusIndex(ctx2) {
-          domQuery.raf(() => {
-            ctx2.focusedIndex = Math.min(ctx2.filledValueLength, ctx2.valueLength - 1);
-          });
+        "INPUT.ARROW_RIGHT": {
+          actions: ["setNextFocusedIndex"]
         },
-        blurFocusedInputIfNeeded(ctx2) {
-          if (!ctx2.blurOnComplete) return;
-          domQuery.raf(() => {
-            dom.getFocusedInputEl(ctx2)?.blur();
-          });
+        "INPUT.BACKSPACE": [
+          {
+            guard: "hasValue",
+            actions: ["clearFocusedValue"]
+          },
+          {
+            actions: ["setPrevFocusedIndex", "clearFocusedValue"]
+          }
+        ],
+        "INPUT.ENTER": {
+          guard: "isValueComplete",
+          actions: ["requestFormSubmit"]
         },
-        requestFormSubmit(ctx2) {
-          if (!ctx2.name || !ctx2.isValueComplete) return;
-          const inputEl = dom.getHiddenInputEl(ctx2);
-          inputEl?.form?.requestSubmit();
+        "VALUE.INVALID": {
+          actions: ["invokeOnInvalid"]
         }
       }
     }
-  );
-}
-function assignValue(ctx, value) {
-  const arr = Array.isArray(value) ? value : value.split("").filter(Boolean);
-  arr.forEach((value2, index) => {
-    ctx.value[index] = value2;
-  });
-}
+  },
+  implementations: {
+    guards: {
+      autoFocus: ({ prop }) => !!prop("autoFocus"),
+      hasValue: ({ context }) => context.get("value")[context.get("focusedIndex")] !== "",
+      isValueComplete: ({ computed }) => computed("isValueComplete"),
+      isFinalValue: ({ context, computed }) => computed("filledValueLength") + 1 === computed("valueLength") && context.get("value").findIndex((v) => v.trim() === "") === context.get("focusedIndex"),
+      hasIndex: ({ event }) => event.index !== void 0
+    },
+    actions: {
+      dispatchInputEvent({ computed, scope }) {
+        const inputEl = getHiddenInputEl(scope);
+        domQuery.dispatchInputValueEvent(inputEl, { value: computed("valueAsString") });
+      },
+      setupValue({ context, scope }) {
+        queueMicrotask(() => {
+          if (context.get("value").length) return;
+          const inputEls = getInputEls(scope);
+          const emptyValues = Array.from({ length: inputEls.length }).fill("");
+          context.set("value", emptyValues);
+        });
+      },
+      focusInput({ context, scope }) {
+        const focusedIndex = context.get("focusedIndex");
+        if (focusedIndex === -1) return;
+        getInputElAtIndex(scope, focusedIndex)?.focus({ preventScroll: true });
+      },
+      selectInputIfNeeded({ context, prop, scope }) {
+        const focusedIndex = context.get("focusedIndex");
+        if (!prop("selectOnFocus") || focusedIndex === -1) return;
+        domQuery.raf(() => {
+          getInputElAtIndex(scope, focusedIndex)?.select();
+        });
+      },
+      invokeOnComplete({ context, computed, prop }) {
+        if (!computed("isValueComplete")) return;
+        prop("onValueComplete")?.({
+          value: Array.from(context.get("value")),
+          valueAsString: computed("valueAsString")
+        });
+      },
+      invokeOnInvalid({ context, event, prop }) {
+        prop("onValueInvalid")?.({
+          value: event.value,
+          index: context.get("focusedIndex")
+        });
+      },
+      clearFocusedIndex({ context }) {
+        context.set("focusedIndex", -1);
+      },
+      setFocusedIndex({ context, event }) {
+        context.set("focusedIndex", event.index);
+      },
+      setValue({ context, event }) {
+        context.set("value", event.value);
+      },
+      setFocusedValue({ context, event, computed }) {
+        const focusedValue = computed("focusedValue");
+        const nextValue = getNextValue(focusedValue, event.value);
+        context.set("value", (prev) => {
+          const next = [...prev];
+          next[context.get("focusedIndex")] = nextValue;
+          return next;
+        });
+      },
+      revertInputValue({ context, computed, scope }) {
+        const inputEl = getInputElAtIndex(scope, context.get("focusedIndex"));
+        domQuery.setElementValue(inputEl, computed("focusedValue"));
+      },
+      syncInputValue({ context, event, scope }) {
+        const value = context.get("value");
+        const inputEl = getInputElAtIndex(scope, event.index);
+        domQuery.setElementValue(inputEl, value[event.index]);
+      },
+      syncInputElements({ context, scope }) {
+        const inputEls = getInputEls(scope);
+        inputEls.forEach((inputEl, index) => {
+          domQuery.setElementValue(inputEl, context.get("value")[index]);
+        });
+      },
+      setPastedValue({ context, event, computed }) {
+        domQuery.raf(() => {
+          const valueAsString = computed("valueAsString");
+          const focusedIndex = context.get("focusedIndex");
+          const filledValueLength = computed("filledValueLength");
+          const startIndex = Math.min(focusedIndex, filledValueLength);
+          const left = startIndex > 0 ? valueAsString.substring(0, focusedIndex) : "";
+          const right = event.value.substring(0, computed("valueLength") - startIndex);
+          const value = left + right;
+          context.set("value", value.split(""));
+        });
+      },
+      setValueAtIndex({ context, event, computed }) {
+        const nextValue = getNextValue(computed("focusedValue"), event.value);
+        context.set("value", (prev) => {
+          const next = [...prev];
+          next[event.index] = nextValue;
+          return next;
+        });
+      },
+      clearValue({ context, computed }) {
+        const nextValue = Array.from({ length: computed("valueLength") }).fill("");
+        context.set("value", nextValue);
+      },
+      clearFocusedValue({ context }) {
+        const focusedIndex = context.get("focusedIndex");
+        if (focusedIndex === -1) return;
+        context.set("value", (prev) => {
+          const next = [...prev];
+          next[focusedIndex] = "";
+          return next;
+        });
+      },
+      setFocusIndexToFirst({ context }) {
+        context.set("focusedIndex", 0);
+      },
+      setNextFocusedIndex({ context, computed }) {
+        context.set("focusedIndex", Math.min(context.get("focusedIndex") + 1, computed("valueLength") - 1));
+      },
+      setPrevFocusedIndex({ context }) {
+        context.set("focusedIndex", Math.max(context.get("focusedIndex") - 1, 0));
+      },
+      setLastValueFocusIndex({ context, computed }) {
+        domQuery.raf(() => {
+          context.set("focusedIndex", Math.min(computed("filledValueLength"), computed("valueLength") - 1));
+        });
+      },
+      blurFocusedInputIfNeeded({ context, prop, scope }) {
+        if (!prop("blurOnComplete")) return;
+        domQuery.raf(() => {
+          getInputElAtIndex(scope, context.get("focusedIndex"))?.blur();
+        });
+      },
+      requestFormSubmit({ computed, prop, scope }) {
+        if (!prop("name") || !computed("isValueComplete")) return;
+        const inputEl = getHiddenInputEl(scope);
+        inputEl?.form?.requestSubmit();
+      }
+    }
+  }
+});
 function getNextValue(current, next) {
   let nextValue = next;
   if (current[0] === next[0]) nextValue = next[1];
   else if (current[0] === next[1]) nextValue = next[0];
   return nextValue.split("")[nextValue.length - 1];
 }
-var invoke = {
-  change(ctx) {
-    ctx.onValueChange?.({
-      value: Array.from(ctx.value),
-      valueAsString: ctx.valueAsString
-    });
-    const inputEl = dom.getHiddenInputEl(ctx);
-    domQuery.dispatchInputValueEvent(inputEl, { value: ctx.valueAsString });
-  }
-};
-var set = {
-  value(ctx, value) {
-    if (utils.isEqual(ctx.value, value)) return;
-    assignValue(ctx, value);
-    invoke.change(ctx);
-  },
-  valueAtIndex(ctx, index, value) {
-    if (utils.isEqual(ctx.value[index], value)) return;
-    ctx.value[index] = value;
-    invoke.change(ctx);
-  }
-};
+var props = types.createProps()([
+  "autoFocus",
+  "blurOnComplete",
+  "dir",
+  "disabled",
+  "form",
+  "getRootNode",
+  "id",
+  "ids",
+  "invalid",
+  "mask",
+  "name",
+  "onValueChange",
+  "onValueComplete",
+  "onValueInvalid",
+  "otp",
+  "readOnly",
+  "pattern",
+  "placeholder",
+  "required",
+  "selectOnFocus",
+  "translations",
+  "type",
+  "value",
+  "defaultValue"
+]);
+var splitProps = utils.createSplitProps(props);
 
 exports.anatomy = anatomy;
 exports.connect = connect;
 exports.machine = machine;
+exports.props = props;
+exports.splitProps = splitProps;