@zag-js/pin-input 0.2.8 → 0.2.10

package/dist/{chunk-CDDLX3AG.mjs → chunk-53K4IC6M.mjs}

@@ -4,7 +4,7 @@ import {
 import {
   dom,
   getWindow
-} from "./chunk-APRO2TYE.mjs";
+} from "./chunk-T5OKDF74.mjs";
 
 // src/pin-input.machine.ts
 import { createMachine, guards } from "@zag-js/core";
@@ -28,20 +28,18 @@ function raf(fn) {
 
 // ../../utilities/form-utils/src/input-event.ts
 function getDescriptor(el, options) {
-  var _a;
   const { type, property = "value" } = options;
   const proto = getWindow(el)[type].prototype;
-  return (_a = Object.getOwnPropertyDescriptor(proto, property)) != null ? _a : {};
+  return Object.getOwnPropertyDescriptor(proto, property) ?? {};
 }
 function dispatchInputValueEvent(el, value) {
-  var _a;
   if (!el)
     return;
   const win = getWindow(el);
   if (!(el instanceof win.HTMLInputElement))
     return;
   const desc = getDescriptor(el, { type: "HTMLInputElement", property: "value" });
-  (_a = desc.set) == null ? void 0 : _a.call(el, value);
+  desc.set?.call(el, value);
   const event = new win.Event("input", { bubbles: true });
   el.dispatchEvent(event);
 }
@@ -53,10 +51,10 @@ function machine(userContext) {
   return createMachine(
     {
       id: "pin-input",
-      initial: "unknown",
+      initial: ctx.autoFocus ? "focused" : "idle",
       context: {
         value: [],
-        focusedIndex: -1,
+        focusedIndex: ctx.autoFocus ? 0 : -1,
         placeholder: "\u25CB",
         otp: false,
         type: "numeric",
@@ -68,7 +66,7 @@ function machine(userContext) {
       },
       computed: {
         valueLength: (ctx2) => ctx2.value.length,
-        filledValueLength: (ctx2) => ctx2.value.filter((v) => (v == null ? void 0 : v.trim()) !== "").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]
@@ -78,6 +76,7 @@ function machine(userContext) {
         value: ["dispatchInputEvent"],
         isValueComplete: ["invokeOnComplete", "blurFocusedInputIfNeeded"]
       },
+      entry: ["setupValue"],
       on: {
         SET_VALUE: [
           {
@@ -97,21 +96,6 @@ function machine(userContext) {
         ]
       },
       states: {
-        unknown: {
-          on: {
-            SETUP: [
-              {
-                guard: "autoFocus",
-                target: "focused",
-                actions: ["setupValue", "setFocusIndexToFirst"]
-              },
-              {
-                target: "idle",
-                actions: "setupValue"
-              }
-            ]
-          }
-        },
         idle: {
           on: {
             FOCUS: {
@@ -125,11 +109,11 @@ function machine(userContext) {
             INPUT: [
               {
                 guard: and("isFinalValue", "isValidValue"),
-                actions: ["setFocusedValue", "invokeOnChange", "dispatchInputEventIfNeeded"]
+                actions: ["setFocusedValue", "invokeOnChange", "syncInputValue"]
               },
               {
                 guard: "isValidValue",
-                actions: ["setFocusedValue", "invokeOnChange", "setNextFocusedIndex", "dispatchInputEventIfNeeded"]
+                actions: ["setFocusedValue", "invokeOnChange", "setNextFocusedIndex", "syncInputValue"]
               }
             ],
             PASTE: [
@@ -196,15 +180,14 @@ function machine(userContext) {
       actions: {
         setupValue: (ctx2) => {
           const inputs = dom.getElements(ctx2);
-          const empty = Array.from({ length: inputs.length }).map(() => "");
-          ctx2.value = Object.assign(empty, ctx2.value);
+          const emptyValues = Array.from({ length: inputs.length }).fill("");
+          assign(ctx2, emptyValues);
         },
         focusInput: (ctx2) => {
           raf(() => {
-            var _a;
             if (ctx2.focusedIndex === -1)
               return;
-            (_a = dom.getFocusedEl(ctx2)) == null ? void 0 : _a.focus();
+            dom.getFocusedEl(ctx2)?.focus();
           });
         },
         setInputSelection: (ctx2) => {
@@ -218,16 +201,14 @@ function machine(userContext) {
           });
         },
         invokeOnComplete: (ctx2) => {
-          var _a;
           if (!ctx2.isValueComplete)
             return;
-          (_a = ctx2.onComplete) == null ? void 0 : _a.call(ctx2, { value: Array.from(ctx2.value), valueAsString: ctx2.valueAsString });
+          ctx2.onComplete?.({ value: Array.from(ctx2.value), valueAsString: ctx2.valueAsString });
         },
         invokeOnChange: (ctx2, evt) => {
-          var _a;
           if (evt.type === "SETUP")
             return;
-          (_a = ctx2.onChange) == null ? void 0 : _a.call(ctx2, { value: Array.from(ctx2.value) });
+          ctx2.onChange?.({ value: Array.from(ctx2.value) });
         },
         dispatchInputEvent: (ctx2, evt) => {
           if (evt.type === "SETUP")
@@ -240,8 +221,7 @@ function machine(userContext) {
           });
         },
         invokeOnInvalid: (ctx2, evt) => {
-          var _a;
-          (_a = ctx2.onInvalid) == null ? void 0 : _a.call(ctx2, { value: evt.value, index: ctx2.focusedIndex });
+          ctx2.onInvalid?.({ value: evt.value, index: ctx2.focusedIndex });
         },
         clearFocusedIndex: (ctx2) => {
           ctx2.focusedIndex = -1;
@@ -253,15 +233,16 @@ function machine(userContext) {
           ctx2.focusedIndex = evt.index;
         },
         setFocusedValue: (ctx2, evt) => {
-          ctx2.value[ctx2.focusedIndex] = lastChar(evt.value);
+          ctx2.value[ctx2.focusedIndex] = getNextValue(ctx2.focusedValue, evt.value);
         },
-        dispatchInputEventIfNeeded: (ctx2, evt) => {
-          const valueIsChanged = lastChar(evt.value) !== ctx2.focusedValue;
-          if (evt.value.length <= 1 || valueIsChanged)
+        syncInputValue: (ctx2, evt) => {
+          const nextValue = getNextValue(ctx2.focusedValue, evt.value);
+          const changed = nextValue !== ctx2.focusedValue;
+          if (evt.value.length <= 1 || changed)
             return;
           const inputs = dom.getElements(ctx2);
           const input = inputs[ctx2.focusedIndex];
-          input.value = lastChar(evt.value);
+          input.value = nextValue;
         },
         setPastedValue(ctx2, evt) {
           raf(() => {
@@ -271,10 +252,11 @@ function machine(userContext) {
           });
         },
         setValueAtIndex: (ctx2, evt) => {
-          ctx2.value[evt.index] = lastChar(evt.value);
+          ctx2.value[evt.index] = getNextValue(ctx2.focusedValue, evt.value);
         },
         clearValue: (ctx2) => {
-          ctx2.value = ctx2.value.map(() => "");
+          const nextValue = Array.from({ length: ctx2.valueLength }).fill("");
+          assign(ctx2, nextValue);
         },
         clearFocusedValue: (ctx2) => {
           ctx2.value[ctx2.focusedIndex] = "";
@@ -304,16 +286,14 @@ function machine(userContext) {
           if (!ctx2.blurOnComplete)
             return;
           raf(() => {
-            var _a;
-            (_a = dom.getFocusedEl(ctx2)) == null ? void 0 : _a.blur();
+            dom.getFocusedEl(ctx2)?.blur();
           });
         },
         requestFormSubmit(ctx2) {
-          var _a;
-          if (!ctx2.name)
+          if (!ctx2.name || !ctx2.isValueComplete)
             return;
           const input = dom.getHiddenInputEl(ctx2);
-          (_a = input == null ? void 0 : input.form) == null ? void 0 : _a.requestSubmit();
+          input?.form?.requestSubmit();
         }
       }
     }
@@ -325,18 +305,23 @@ var REGEX = {
   alphanumeric: /^[a-zA-Z0-9]+$/i
 };
 function isValidType(value, type) {
-  var _a;
   if (!type)
     return true;
-  return !!((_a = REGEX[type]) == null ? void 0 : _a.test(value));
+  return !!REGEX[type]?.test(value);
 }
 function assign(ctx, value) {
-  const valueArr = Array.isArray(value) ? value : value.split("").filter(Boolean);
-  const valueObj = Object.assign({}, ctx.value, valueArr);
-  ctx.value = Object.values(valueObj);
+  const arr = Array.isArray(value) ? value : value.split("").filter(Boolean);
+  arr.forEach((value2, index) => {
+    ctx.value[index] = value2;
+  });
 }
-function lastChar(value) {
-  return value.charAt(value.length - 1);
+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;
 }
 
 export {

package/dist/{chunk-3SENCEI3.mjs → chunk-QVOI2QEW.mjs}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-BJXKBZJG.mjs";
 import {
   dom
-} from "./chunk-APRO2TYE.mjs";
+} from "./chunk-T5OKDF74.mjs";
 
 // ../../utilities/dom/src/attrs.ts
 var dataAttr = (guard) => {
@@ -24,8 +24,7 @@ function invariant(...a) {
 
 // ../../utilities/dom/src/event.ts
 function getNativeEvent(e) {
-  var _a;
-  return (_a = e.nativeEvent) != null ? _a : e;
+  return e.nativeEvent ?? e;
 }
 var isModifiedEvent = (v) => v.ctrlKey || v.altKey || v.metaKey;
 
@@ -44,10 +43,9 @@ var sameKeyMap = {
   Right: "ArrowRight"
 };
 function getEventKey(event, options = {}) {
-  var _a;
   const { dir = "ltr", orientation = "horizontal" } = options;
   let { key } = event;
-  key = (_a = sameKeyMap[key]) != null ? _a : key;
+  key = sameKeyMap[key] ?? key;
   const isRtl = dir === "rtl" && orientation === "horizontal";
   if (isRtl && key in rtlKeyMap) {
     key = rtlKeyMap[key];
@@ -76,8 +74,7 @@ function connect(state, send, normalize) {
   const focusedIndex = state.context.focusedIndex;
   const translations = state.context.translations;
   function focus() {
-    var _a;
-    (_a = dom.getFirstInputEl(state.context)) == null ? void 0 : _a.focus();
+    dom.getFirstInputEl(state.context)?.focus();
   }
   return {
     value: state.context.value,

package/dist/chunk-T5OKDF74.mjs

@@ -0,0 +1,58 @@
+// ../../utilities/dom/src/query.ts
+function isDocument(el) {
+  return el.nodeType === Node.DOCUMENT_NODE;
+}
+function isWindow(value) {
+  return value?.toString() === "[object Window]";
+}
+function getDocument(el) {
+  if (isWindow(el))
+    return el.document;
+  if (isDocument(el))
+    return el;
+  return el?.ownerDocument ?? document;
+}
+function getWindow(el) {
+  return el?.ownerDocument.defaultView ?? window;
+}
+function defineDomHelpers(helpers) {
+  const dom2 = {
+    getRootNode: (ctx) => ctx.getRootNode?.() ?? document,
+    getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
+    getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
+    getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
+    getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
+  };
+  return {
+    ...dom2,
+    ...helpers
+  };
+}
+
+// ../../utilities/dom/src/nodelist.ts
+function queryAll(root, selector) {
+  return Array.from(root?.querySelectorAll(selector) ?? []);
+}
+
+// src/pin-input.dom.ts
+var dom = defineDomHelpers({
+  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)),
+  getElements: (ctx) => {
+    const ownerId = CSS.escape(dom.getRootId(ctx));
+    const selector = `input[data-ownedby=${ownerId}]`;
+    return queryAll(dom.getRootEl(ctx), selector);
+  },
+  getFocusedEl: (ctx) => dom.getElements(ctx)[ctx.focusedIndex],
+  getFirstInputEl: (ctx) => dom.getElements(ctx)[0],
+  getHiddenInputEl: (ctx) => dom.getById(ctx, dom.getHiddenInputId(ctx))
+});
+
+export {
+  getWindow,
+  dom
+};

package/dist/index.js

@@ -66,31 +66,23 @@ function isDocument(el) {
   return el.nodeType === Node.DOCUMENT_NODE;
 }
 function isWindow(value) {
-  return (value == null ? void 0 : value.toString()) === "[object Window]";
+  return value?.toString() === "[object Window]";
 }
 function getDocument(el) {
-  var _a;
   if (isWindow(el))
     return el.document;
   if (isDocument(el))
     return el;
-  return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
+  return el?.ownerDocument ?? document;
 }
 function getWindow(el) {
-  var _a;
-  return (_a = el == null ? void 0 : el.ownerDocument.defaultView) != null ? _a : window;
+  return el?.ownerDocument.defaultView ?? window;
 }
 function defineDomHelpers(helpers) {
   const dom2 = {
-    getRootNode: (ctx) => {
-      var _a, _b;
-      return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
-    },
+    getRootNode: (ctx) => ctx.getRootNode?.() ?? document,
     getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
-    getWin: (ctx) => {
-      var _a;
-      return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
-    },
+    getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
     getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
     getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
   };
@@ -102,8 +94,7 @@ function defineDomHelpers(helpers) {
 
 // ../../utilities/dom/src/event.ts
 function getNativeEvent(e) {
-  var _a;
-  return (_a = e.nativeEvent) != null ? _a : e;
+  return e.nativeEvent ?? e;
 }
 var isModifiedEvent = (v) => v.ctrlKey || v.altKey || v.metaKey;
 
@@ -122,10 +113,9 @@ var sameKeyMap = {
   Right: "ArrowRight"
 };
 function getEventKey(event, options = {}) {
-  var _a;
   const { dir = "ltr", orientation = "horizontal" } = options;
   let { key } = event;
-  key = (_a = sameKeyMap[key]) != null ? _a : key;
+  key = sameKeyMap[key] ?? key;
   const isRtl = dir === "rtl" && orientation === "horizontal";
   if (isRtl && key in rtlKeyMap) {
     key = rtlKeyMap[key];
@@ -143,8 +133,7 @@ function raf(fn) {
 
 // ../../utilities/dom/src/nodelist.ts
 function queryAll(root, selector) {
-  var _a;
-  return Array.from((_a = root == null ? void 0 : root.querySelectorAll(selector)) != null ? _a : []);
+  return Array.from(root?.querySelectorAll(selector) ?? []);
 }
 
 // ../../utilities/dom/src/visually-hidden.ts
@@ -163,26 +152,11 @@ var visuallyHiddenStyle = {
 
 // src/pin-input.dom.ts
 var dom = defineDomHelpers({
-  getRootId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `pin-input:${ctx.id}`;
-  },
-  getInputId: (ctx, id) => {
-    var _a, _b, _c;
-    return (_c = (_b = (_a = ctx.ids) == null ? void 0 : _a.input) == null ? void 0 : _b.call(_a, id)) != null ? _c : `pin-input:${ctx.id}:${id}`;
-  },
-  getHiddenInputId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.hiddenInput) != null ? _b : `pin-input:${ctx.id}:hidden`;
-  },
-  getLabelId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.label) != null ? _b : `pin-input:${ctx.id}:label`;
-  },
-  getControlId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.control) != null ? _b : `pin-input:${ctx.id}:control`;
-  },
+  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)),
   getElements: (ctx) => {
     const ownerId = CSS.escape(dom.getRootId(ctx));
@@ -201,8 +175,7 @@ function connect(state, send, normalize) {
   const focusedIndex = state.context.focusedIndex;
   const translations = state.context.translations;
   function focus() {
-    var _a;
-    (_a = dom.getFirstInputEl(state.context)) == null ? void 0 : _a.focus();
+    dom.getFirstInputEl(state.context)?.focus();
   }
   return {
     value: state.context.value,
@@ -337,20 +310,18 @@ var import_core = require("@zag-js/core");
 
 // ../../utilities/form-utils/src/input-event.ts
 function getDescriptor(el, options) {
-  var _a;
   const { type, property = "value" } = options;
   const proto = getWindow(el)[type].prototype;
-  return (_a = Object.getOwnPropertyDescriptor(proto, property)) != null ? _a : {};
+  return Object.getOwnPropertyDescriptor(proto, property) ?? {};
 }
 function dispatchInputValueEvent(el, value) {
-  var _a;
   if (!el)
     return;
   const win = getWindow(el);
   if (!(el instanceof win.HTMLInputElement))
     return;
   const desc = getDescriptor(el, { type: "HTMLInputElement", property: "value" });
-  (_a = desc.set) == null ? void 0 : _a.call(el, value);
+  desc.set?.call(el, value);
   const event = new win.Event("input", { bubbles: true });
   el.dispatchEvent(event);
 }
@@ -362,10 +333,10 @@ function machine(userContext) {
   return (0, import_core.createMachine)(
     {
       id: "pin-input",
-      initial: "unknown",
+      initial: ctx.autoFocus ? "focused" : "idle",
       context: {
         value: [],
-        focusedIndex: -1,
+        focusedIndex: ctx.autoFocus ? 0 : -1,
         placeholder: "\u25CB",
         otp: false,
         type: "numeric",
@@ -377,7 +348,7 @@ function machine(userContext) {
       },
       computed: {
         valueLength: (ctx2) => ctx2.value.length,
-        filledValueLength: (ctx2) => ctx2.value.filter((v) => (v == null ? void 0 : v.trim()) !== "").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]
@@ -387,6 +358,7 @@ function machine(userContext) {
         value: ["dispatchInputEvent"],
         isValueComplete: ["invokeOnComplete", "blurFocusedInputIfNeeded"]
       },
+      entry: ["setupValue"],
       on: {
         SET_VALUE: [
           {
@@ -406,21 +378,6 @@ function machine(userContext) {
         ]
       },
       states: {
-        unknown: {
-          on: {
-            SETUP: [
-              {
-                guard: "autoFocus",
-                target: "focused",
-                actions: ["setupValue", "setFocusIndexToFirst"]
-              },
-              {
-                target: "idle",
-                actions: "setupValue"
-              }
-            ]
-          }
-        },
         idle: {
           on: {
             FOCUS: {
@@ -434,11 +391,11 @@ function machine(userContext) {
             INPUT: [
               {
                 guard: and("isFinalValue", "isValidValue"),
-                actions: ["setFocusedValue", "invokeOnChange", "dispatchInputEventIfNeeded"]
+                actions: ["setFocusedValue", "invokeOnChange", "syncInputValue"]
               },
               {
                 guard: "isValidValue",
-                actions: ["setFocusedValue", "invokeOnChange", "setNextFocusedIndex", "dispatchInputEventIfNeeded"]
+                actions: ["setFocusedValue", "invokeOnChange", "setNextFocusedIndex", "syncInputValue"]
               }
             ],
             PASTE: [
@@ -505,15 +462,14 @@ function machine(userContext) {
       actions: {
         setupValue: (ctx2) => {
           const inputs = dom.getElements(ctx2);
-          const empty = Array.from({ length: inputs.length }).map(() => "");
-          ctx2.value = Object.assign(empty, ctx2.value);
+          const emptyValues = Array.from({ length: inputs.length }).fill("");
+          assign(ctx2, emptyValues);
         },
         focusInput: (ctx2) => {
           raf(() => {
-            var _a;
             if (ctx2.focusedIndex === -1)
               return;
-            (_a = dom.getFocusedEl(ctx2)) == null ? void 0 : _a.focus();
+            dom.getFocusedEl(ctx2)?.focus();
           });
         },
         setInputSelection: (ctx2) => {
@@ -527,16 +483,14 @@ function machine(userContext) {
           });
         },
         invokeOnComplete: (ctx2) => {
-          var _a;
           if (!ctx2.isValueComplete)
             return;
-          (_a = ctx2.onComplete) == null ? void 0 : _a.call(ctx2, { value: Array.from(ctx2.value), valueAsString: ctx2.valueAsString });
+          ctx2.onComplete?.({ value: Array.from(ctx2.value), valueAsString: ctx2.valueAsString });
         },
         invokeOnChange: (ctx2, evt) => {
-          var _a;
           if (evt.type === "SETUP")
             return;
-          (_a = ctx2.onChange) == null ? void 0 : _a.call(ctx2, { value: Array.from(ctx2.value) });
+          ctx2.onChange?.({ value: Array.from(ctx2.value) });
         },
         dispatchInputEvent: (ctx2, evt) => {
           if (evt.type === "SETUP")
@@ -549,8 +503,7 @@ function machine(userContext) {
           });
         },
         invokeOnInvalid: (ctx2, evt) => {
-          var _a;
-          (_a = ctx2.onInvalid) == null ? void 0 : _a.call(ctx2, { value: evt.value, index: ctx2.focusedIndex });
+          ctx2.onInvalid?.({ value: evt.value, index: ctx2.focusedIndex });
         },
         clearFocusedIndex: (ctx2) => {
           ctx2.focusedIndex = -1;
@@ -562,15 +515,16 @@ function machine(userContext) {
           ctx2.focusedIndex = evt.index;
         },
         setFocusedValue: (ctx2, evt) => {
-          ctx2.value[ctx2.focusedIndex] = lastChar(evt.value);
+          ctx2.value[ctx2.focusedIndex] = getNextValue(ctx2.focusedValue, evt.value);
         },
-        dispatchInputEventIfNeeded: (ctx2, evt) => {
-          const valueIsChanged = lastChar(evt.value) !== ctx2.focusedValue;
-          if (evt.value.length <= 1 || valueIsChanged)
+        syncInputValue: (ctx2, evt) => {
+          const nextValue = getNextValue(ctx2.focusedValue, evt.value);
+          const changed = nextValue !== ctx2.focusedValue;
+          if (evt.value.length <= 1 || changed)
             return;
           const inputs = dom.getElements(ctx2);
           const input = inputs[ctx2.focusedIndex];
-          input.value = lastChar(evt.value);
+          input.value = nextValue;
         },
         setPastedValue(ctx2, evt) {
           raf(() => {
@@ -580,10 +534,11 @@ function machine(userContext) {
           });
         },
         setValueAtIndex: (ctx2, evt) => {
-          ctx2.value[evt.index] = lastChar(evt.value);
+          ctx2.value[evt.index] = getNextValue(ctx2.focusedValue, evt.value);
         },
         clearValue: (ctx2) => {
-          ctx2.value = ctx2.value.map(() => "");
+          const nextValue = Array.from({ length: ctx2.valueLength }).fill("");
+          assign(ctx2, nextValue);
         },
         clearFocusedValue: (ctx2) => {
           ctx2.value[ctx2.focusedIndex] = "";
@@ -613,16 +568,14 @@ function machine(userContext) {
           if (!ctx2.blurOnComplete)
             return;
           raf(() => {
-            var _a;
-            (_a = dom.getFocusedEl(ctx2)) == null ? void 0 : _a.blur();
+            dom.getFocusedEl(ctx2)?.blur();
           });
         },
         requestFormSubmit(ctx2) {
-          var _a;
-          if (!ctx2.name)
+          if (!ctx2.name || !ctx2.isValueComplete)
             return;
           const input = dom.getHiddenInputEl(ctx2);
-          (_a = input == null ? void 0 : input.form) == null ? void 0 : _a.requestSubmit();
+          input?.form?.requestSubmit();
         }
       }
     }
@@ -634,18 +587,23 @@ var REGEX = {
   alphanumeric: /^[a-zA-Z0-9]+$/i
 };
 function isValidType(value, type) {
-  var _a;
   if (!type)
     return true;
-  return !!((_a = REGEX[type]) == null ? void 0 : _a.test(value));
+  return !!REGEX[type]?.test(value);
 }
 function assign(ctx, value) {
-  const valueArr = Array.isArray(value) ? value : value.split("").filter(Boolean);
-  const valueObj = Object.assign({}, ctx.value, valueArr);
-  ctx.value = Object.values(valueObj);
+  const arr = Array.isArray(value) ? value : value.split("").filter(Boolean);
+  arr.forEach((value2, index) => {
+    ctx.value[index] = value2;
+  });
 }
-function lastChar(value) {
-  return value.charAt(value.length - 1);
+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;
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/index.mjs

@@ -1,14 +1,14 @@
 import {
   connect
-} from "./chunk-3SENCEI3.mjs";
+} from "./chunk-QVOI2QEW.mjs";
 import {
   anatomy
 } from "./chunk-BJXKBZJG.mjs";
 import {
   machine
-} from "./chunk-CDDLX3AG.mjs";
+} from "./chunk-53K4IC6M.mjs";
 import "./chunk-NT4W6JYX.mjs";
-import "./chunk-APRO2TYE.mjs";
+import "./chunk-T5OKDF74.mjs";
 export {
   anatomy,
   connect,

package/dist/pin-input.connect.js

@@ -46,27 +46,20 @@ function isDocument(el) {
   return el.nodeType === Node.DOCUMENT_NODE;
 }
 function isWindow(value) {
-  return (value == null ? void 0 : value.toString()) === "[object Window]";
+  return value?.toString() === "[object Window]";
 }
 function getDocument(el) {
-  var _a;
   if (isWindow(el))
     return el.document;
   if (isDocument(el))
     return el;
-  return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
+  return el?.ownerDocument ?? document;
 }
 function defineDomHelpers(helpers) {
   const dom2 = {
-    getRootNode: (ctx) => {
-      var _a, _b;
-      return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
-    },
+    getRootNode: (ctx) => ctx.getRootNode?.() ?? document,
     getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
-    getWin: (ctx) => {
-      var _a;
-      return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
-    },
+    getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
     getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
     getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
   };
@@ -78,8 +71,7 @@ function defineDomHelpers(helpers) {
 
 // ../../utilities/dom/src/event.ts
 function getNativeEvent(e) {
-  var _a;
-  return (_a = e.nativeEvent) != null ? _a : e;
+  return e.nativeEvent ?? e;
 }
 var isModifiedEvent = (v) => v.ctrlKey || v.altKey || v.metaKey;
 
@@ -98,10 +90,9 @@ var sameKeyMap = {
   Right: "ArrowRight"
 };
 function getEventKey(event, options = {}) {
-  var _a;
   const { dir = "ltr", orientation = "horizontal" } = options;
   let { key } = event;
-  key = (_a = sameKeyMap[key]) != null ? _a : key;
+  key = sameKeyMap[key] ?? key;
   const isRtl = dir === "rtl" && orientation === "horizontal";
   if (isRtl && key in rtlKeyMap) {
     key = rtlKeyMap[key];
@@ -111,8 +102,7 @@ function getEventKey(event, options = {}) {
 
 // ../../utilities/dom/src/nodelist.ts
 function queryAll(root, selector) {
-  var _a;
-  return Array.from((_a = root == null ? void 0 : root.querySelectorAll(selector)) != null ? _a : []);
+  return Array.from(root?.querySelectorAll(selector) ?? []);
 }
 
 // ../../utilities/dom/src/visually-hidden.ts
@@ -136,26 +126,11 @@ var parts = anatomy.build();
 
 // src/pin-input.dom.ts
 var dom = defineDomHelpers({
-  getRootId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `pin-input:${ctx.id}`;
-  },
-  getInputId: (ctx, id) => {
-    var _a, _b, _c;
-    return (_c = (_b = (_a = ctx.ids) == null ? void 0 : _a.input) == null ? void 0 : _b.call(_a, id)) != null ? _c : `pin-input:${ctx.id}:${id}`;
-  },
-  getHiddenInputId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.hiddenInput) != null ? _b : `pin-input:${ctx.id}:hidden`;
-  },
-  getLabelId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.label) != null ? _b : `pin-input:${ctx.id}:label`;
-  },
-  getControlId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.control) != null ? _b : `pin-input:${ctx.id}:control`;
-  },
+  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)),
   getElements: (ctx) => {
     const ownerId = CSS.escape(dom.getRootId(ctx));
@@ -174,8 +149,7 @@ function connect(state, send, normalize) {
   const focusedIndex = state.context.focusedIndex;
   const translations = state.context.translations;
   function focus() {
-    var _a;
-    (_a = dom.getFirstInputEl(state.context)) == null ? void 0 : _a.focus();
+    dom.getFirstInputEl(state.context)?.focus();
   }
   return {
     value: state.context.value,

package/dist/pin-input.connect.mjs

@@ -1,9 +1,9 @@
 import {
   connect
-} from "./chunk-3SENCEI3.mjs";
+} from "./chunk-QVOI2QEW.mjs";
 import "./chunk-BJXKBZJG.mjs";
 import "./chunk-NT4W6JYX.mjs";
-import "./chunk-APRO2TYE.mjs";
+import "./chunk-T5OKDF74.mjs";
 export {
   connect
 };

package/dist/pin-input.dom.js

@@ -29,27 +29,20 @@ function isDocument(el) {
   return el.nodeType === Node.DOCUMENT_NODE;
 }
 function isWindow(value) {
-  return (value == null ? void 0 : value.toString()) === "[object Window]";
+  return value?.toString() === "[object Window]";
 }
 function getDocument(el) {
-  var _a;
   if (isWindow(el))
     return el.document;
   if (isDocument(el))
     return el;
-  return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
+  return el?.ownerDocument ?? document;
 }
 function defineDomHelpers(helpers) {
   const dom2 = {
-    getRootNode: (ctx) => {
-      var _a, _b;
-      return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
-    },
+    getRootNode: (ctx) => ctx.getRootNode?.() ?? document,
     getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
-    getWin: (ctx) => {
-      var _a;
-      return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
-    },
+    getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
     getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
     getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
   };
@@ -61,32 +54,16 @@ function defineDomHelpers(helpers) {
 
 // ../../utilities/dom/src/nodelist.ts
 function queryAll(root, selector) {
-  var _a;
-  return Array.from((_a = root == null ? void 0 : root.querySelectorAll(selector)) != null ? _a : []);
+  return Array.from(root?.querySelectorAll(selector) ?? []);
 }
 
 // src/pin-input.dom.ts
 var dom = defineDomHelpers({
-  getRootId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `pin-input:${ctx.id}`;
-  },
-  getInputId: (ctx, id) => {
-    var _a, _b, _c;
-    return (_c = (_b = (_a = ctx.ids) == null ? void 0 : _a.input) == null ? void 0 : _b.call(_a, id)) != null ? _c : `pin-input:${ctx.id}:${id}`;
-  },
-  getHiddenInputId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.hiddenInput) != null ? _b : `pin-input:${ctx.id}:hidden`;
-  },
-  getLabelId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.label) != null ? _b : `pin-input:${ctx.id}:label`;
-  },
-  getControlId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.control) != null ? _b : `pin-input:${ctx.id}:control`;
-  },
+  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)),
   getElements: (ctx) => {
     const ownerId = CSS.escape(dom.getRootId(ctx));

package/dist/pin-input.dom.mjs

@@ -1,6 +1,6 @@
 import {
   dom
-} from "./chunk-APRO2TYE.mjs";
+} from "./chunk-T5OKDF74.mjs";
 export {
   dom
 };

package/dist/pin-input.machine.js

@@ -43,31 +43,23 @@ function isDocument(el) {
   return el.nodeType === Node.DOCUMENT_NODE;
 }
 function isWindow(value) {
-  return (value == null ? void 0 : value.toString()) === "[object Window]";
+  return value?.toString() === "[object Window]";
 }
 function getDocument(el) {
-  var _a;
   if (isWindow(el))
     return el.document;
   if (isDocument(el))
     return el;
-  return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
+  return el?.ownerDocument ?? document;
 }
 function getWindow(el) {
-  var _a;
-  return (_a = el == null ? void 0 : el.ownerDocument.defaultView) != null ? _a : window;
+  return el?.ownerDocument.defaultView ?? window;
 }
 function defineDomHelpers(helpers) {
   const dom2 = {
-    getRootNode: (ctx) => {
-      var _a, _b;
-      return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
-    },
+    getRootNode: (ctx) => ctx.getRootNode?.() ?? document,
     getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
-    getWin: (ctx) => {
-      var _a;
-      return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
-    },
+    getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
     getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
     getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
   };
@@ -87,52 +79,34 @@ function raf(fn) {
 
 // ../../utilities/dom/src/nodelist.ts
 function queryAll(root, selector) {
-  var _a;
-  return Array.from((_a = root == null ? void 0 : root.querySelectorAll(selector)) != null ? _a : []);
+  return Array.from(root?.querySelectorAll(selector) ?? []);
 }
 
 // ../../utilities/form-utils/src/input-event.ts
 function getDescriptor(el, options) {
-  var _a;
   const { type, property = "value" } = options;
   const proto = getWindow(el)[type].prototype;
-  return (_a = Object.getOwnPropertyDescriptor(proto, property)) != null ? _a : {};
+  return Object.getOwnPropertyDescriptor(proto, property) ?? {};
 }
 function dispatchInputValueEvent(el, value) {
-  var _a;
   if (!el)
     return;
   const win = getWindow(el);
   if (!(el instanceof win.HTMLInputElement))
     return;
   const desc = getDescriptor(el, { type: "HTMLInputElement", property: "value" });
-  (_a = desc.set) == null ? void 0 : _a.call(el, value);
+  desc.set?.call(el, value);
   const event = new win.Event("input", { bubbles: true });
   el.dispatchEvent(event);
 }
 
 // src/pin-input.dom.ts
 var dom = defineDomHelpers({
-  getRootId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `pin-input:${ctx.id}`;
-  },
-  getInputId: (ctx, id) => {
-    var _a, _b, _c;
-    return (_c = (_b = (_a = ctx.ids) == null ? void 0 : _a.input) == null ? void 0 : _b.call(_a, id)) != null ? _c : `pin-input:${ctx.id}:${id}`;
-  },
-  getHiddenInputId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.hiddenInput) != null ? _b : `pin-input:${ctx.id}:hidden`;
-  },
-  getLabelId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.label) != null ? _b : `pin-input:${ctx.id}:label`;
-  },
-  getControlId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.control) != null ? _b : `pin-input:${ctx.id}:control`;
-  },
+  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)),
   getElements: (ctx) => {
     const ownerId = CSS.escape(dom.getRootId(ctx));
@@ -151,10 +125,10 @@ function machine(userContext) {
   return (0, import_core.createMachine)(
     {
       id: "pin-input",
-      initial: "unknown",
+      initial: ctx.autoFocus ? "focused" : "idle",
       context: {
         value: [],
-        focusedIndex: -1,
+        focusedIndex: ctx.autoFocus ? 0 : -1,
         placeholder: "\u25CB",
         otp: false,
         type: "numeric",
@@ -166,7 +140,7 @@ function machine(userContext) {
       },
       computed: {
         valueLength: (ctx2) => ctx2.value.length,
-        filledValueLength: (ctx2) => ctx2.value.filter((v) => (v == null ? void 0 : v.trim()) !== "").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]
@@ -176,6 +150,7 @@ function machine(userContext) {
         value: ["dispatchInputEvent"],
         isValueComplete: ["invokeOnComplete", "blurFocusedInputIfNeeded"]
       },
+      entry: ["setupValue"],
       on: {
         SET_VALUE: [
           {
@@ -195,21 +170,6 @@ function machine(userContext) {
         ]
       },
       states: {
-        unknown: {
-          on: {
-            SETUP: [
-              {
-                guard: "autoFocus",
-                target: "focused",
-                actions: ["setupValue", "setFocusIndexToFirst"]
-              },
-              {
-                target: "idle",
-                actions: "setupValue"
-              }
-            ]
-          }
-        },
         idle: {
           on: {
             FOCUS: {
@@ -223,11 +183,11 @@ function machine(userContext) {
             INPUT: [
               {
                 guard: and("isFinalValue", "isValidValue"),
-                actions: ["setFocusedValue", "invokeOnChange", "dispatchInputEventIfNeeded"]
+                actions: ["setFocusedValue", "invokeOnChange", "syncInputValue"]
               },
               {
                 guard: "isValidValue",
-                actions: ["setFocusedValue", "invokeOnChange", "setNextFocusedIndex", "dispatchInputEventIfNeeded"]
+                actions: ["setFocusedValue", "invokeOnChange", "setNextFocusedIndex", "syncInputValue"]
               }
             ],
             PASTE: [
@@ -294,15 +254,14 @@ function machine(userContext) {
       actions: {
         setupValue: (ctx2) => {
           const inputs = dom.getElements(ctx2);
-          const empty = Array.from({ length: inputs.length }).map(() => "");
-          ctx2.value = Object.assign(empty, ctx2.value);
+          const emptyValues = Array.from({ length: inputs.length }).fill("");
+          assign(ctx2, emptyValues);
         },
         focusInput: (ctx2) => {
           raf(() => {
-            var _a;
             if (ctx2.focusedIndex === -1)
               return;
-            (_a = dom.getFocusedEl(ctx2)) == null ? void 0 : _a.focus();
+            dom.getFocusedEl(ctx2)?.focus();
           });
         },
         setInputSelection: (ctx2) => {
@@ -316,16 +275,14 @@ function machine(userContext) {
           });
         },
         invokeOnComplete: (ctx2) => {
-          var _a;
           if (!ctx2.isValueComplete)
             return;
-          (_a = ctx2.onComplete) == null ? void 0 : _a.call(ctx2, { value: Array.from(ctx2.value), valueAsString: ctx2.valueAsString });
+          ctx2.onComplete?.({ value: Array.from(ctx2.value), valueAsString: ctx2.valueAsString });
         },
         invokeOnChange: (ctx2, evt) => {
-          var _a;
           if (evt.type === "SETUP")
             return;
-          (_a = ctx2.onChange) == null ? void 0 : _a.call(ctx2, { value: Array.from(ctx2.value) });
+          ctx2.onChange?.({ value: Array.from(ctx2.value) });
         },
         dispatchInputEvent: (ctx2, evt) => {
           if (evt.type === "SETUP")
@@ -338,8 +295,7 @@ function machine(userContext) {
           });
         },
         invokeOnInvalid: (ctx2, evt) => {
-          var _a;
-          (_a = ctx2.onInvalid) == null ? void 0 : _a.call(ctx2, { value: evt.value, index: ctx2.focusedIndex });
+          ctx2.onInvalid?.({ value: evt.value, index: ctx2.focusedIndex });
         },
         clearFocusedIndex: (ctx2) => {
           ctx2.focusedIndex = -1;
@@ -351,15 +307,16 @@ function machine(userContext) {
           ctx2.focusedIndex = evt.index;
         },
         setFocusedValue: (ctx2, evt) => {
-          ctx2.value[ctx2.focusedIndex] = lastChar(evt.value);
+          ctx2.value[ctx2.focusedIndex] = getNextValue(ctx2.focusedValue, evt.value);
         },
-        dispatchInputEventIfNeeded: (ctx2, evt) => {
-          const valueIsChanged = lastChar(evt.value) !== ctx2.focusedValue;
-          if (evt.value.length <= 1 || valueIsChanged)
+        syncInputValue: (ctx2, evt) => {
+          const nextValue = getNextValue(ctx2.focusedValue, evt.value);
+          const changed = nextValue !== ctx2.focusedValue;
+          if (evt.value.length <= 1 || changed)
             return;
           const inputs = dom.getElements(ctx2);
           const input = inputs[ctx2.focusedIndex];
-          input.value = lastChar(evt.value);
+          input.value = nextValue;
         },
         setPastedValue(ctx2, evt) {
           raf(() => {
@@ -369,10 +326,11 @@ function machine(userContext) {
           });
         },
         setValueAtIndex: (ctx2, evt) => {
-          ctx2.value[evt.index] = lastChar(evt.value);
+          ctx2.value[evt.index] = getNextValue(ctx2.focusedValue, evt.value);
         },
         clearValue: (ctx2) => {
-          ctx2.value = ctx2.value.map(() => "");
+          const nextValue = Array.from({ length: ctx2.valueLength }).fill("");
+          assign(ctx2, nextValue);
         },
         clearFocusedValue: (ctx2) => {
           ctx2.value[ctx2.focusedIndex] = "";
@@ -402,16 +360,14 @@ function machine(userContext) {
           if (!ctx2.blurOnComplete)
             return;
           raf(() => {
-            var _a;
-            (_a = dom.getFocusedEl(ctx2)) == null ? void 0 : _a.blur();
+            dom.getFocusedEl(ctx2)?.blur();
           });
         },
         requestFormSubmit(ctx2) {
-          var _a;
-          if (!ctx2.name)
+          if (!ctx2.name || !ctx2.isValueComplete)
             return;
           const input = dom.getHiddenInputEl(ctx2);
-          (_a = input == null ? void 0 : input.form) == null ? void 0 : _a.requestSubmit();
+          input?.form?.requestSubmit();
         }
       }
     }
@@ -423,18 +379,23 @@ var REGEX = {
   alphanumeric: /^[a-zA-Z0-9]+$/i
 };
 function isValidType(value, type) {
-  var _a;
   if (!type)
     return true;
-  return !!((_a = REGEX[type]) == null ? void 0 : _a.test(value));
+  return !!REGEX[type]?.test(value);
 }
 function assign(ctx, value) {
-  const valueArr = Array.isArray(value) ? value : value.split("").filter(Boolean);
-  const valueObj = Object.assign({}, ctx.value, valueArr);
-  ctx.value = Object.values(valueObj);
+  const arr = Array.isArray(value) ? value : value.split("").filter(Boolean);
+  arr.forEach((value2, index) => {
+    ctx.value[index] = value2;
+  });
 }
-function lastChar(value) {
-  return value.charAt(value.length - 1);
+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;
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/pin-input.machine.mjs

@@ -1,8 +1,8 @@
 import {
   machine
-} from "./chunk-CDDLX3AG.mjs";
+} from "./chunk-53K4IC6M.mjs";
 import "./chunk-NT4W6JYX.mjs";
-import "./chunk-APRO2TYE.mjs";
+import "./chunk-T5OKDF74.mjs";
 export {
   machine
 };

package/dist/pin-input.types.d.ts

@@ -125,7 +125,7 @@ type ComputedContext = Readonly<{
 type PrivateContext = Context<{}>;
 type MachineContext = PublicContext & PrivateContext & ComputedContext;
 type MachineState = {
-    value: "unknown" | "idle" | "focused";
+    value: "idle" | "focused";
 };
 type State = StateMachine.State<MachineContext, MachineState>;
 type Send = StateMachine.Send<StateMachine.AnyEventObject>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/pin-input",
-  "version": "0.2.8",
+  "version": "0.2.10",
   "description": "Core logic for the pin-input widget implemented as a state machine",
   "keywords": [
     "js",
@@ -26,15 +26,15 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/anatomy": "0.1.3",
-    "@zag-js/core": "0.2.5",
-    "@zag-js/types": "0.3.3"
+    "@zag-js/anatomy": "0.1.4",
+    "@zag-js/core": "0.2.7",
+    "@zag-js/types": "0.3.4"
   },
   "devDependencies": {
     "clean-package": "2.2.0",
-    "@zag-js/dom-utils": "0.2.3",
-    "@zag-js/form-utils": "0.2.3",
-    "@zag-js/utils": "0.3.2"
+    "@zag-js/dom-utils": "0.2.4",
+    "@zag-js/form-utils": "0.2.4",
+    "@zag-js/utils": "0.3.3"
   },
   "clean-package": "../../../clean-package.config.json",
   "main": "dist/index.js",

package/dist/chunk-APRO2TYE.mjs

@@ -1,82 +0,0 @@
-// ../../utilities/dom/src/query.ts
-function isDocument(el) {
-  return el.nodeType === Node.DOCUMENT_NODE;
-}
-function isWindow(value) {
-  return (value == null ? void 0 : value.toString()) === "[object Window]";
-}
-function getDocument(el) {
-  var _a;
-  if (isWindow(el))
-    return el.document;
-  if (isDocument(el))
-    return el;
-  return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
-}
-function getWindow(el) {
-  var _a;
-  return (_a = el == null ? void 0 : el.ownerDocument.defaultView) != null ? _a : window;
-}
-function defineDomHelpers(helpers) {
-  const dom2 = {
-    getRootNode: (ctx) => {
-      var _a, _b;
-      return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
-    },
-    getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
-    getWin: (ctx) => {
-      var _a;
-      return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
-    },
-    getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
-    getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
-  };
-  return {
-    ...dom2,
-    ...helpers
-  };
-}
-
-// ../../utilities/dom/src/nodelist.ts
-function queryAll(root, selector) {
-  var _a;
-  return Array.from((_a = root == null ? void 0 : root.querySelectorAll(selector)) != null ? _a : []);
-}
-
-// src/pin-input.dom.ts
-var dom = defineDomHelpers({
-  getRootId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `pin-input:${ctx.id}`;
-  },
-  getInputId: (ctx, id) => {
-    var _a, _b, _c;
-    return (_c = (_b = (_a = ctx.ids) == null ? void 0 : _a.input) == null ? void 0 : _b.call(_a, id)) != null ? _c : `pin-input:${ctx.id}:${id}`;
-  },
-  getHiddenInputId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.hiddenInput) != null ? _b : `pin-input:${ctx.id}:hidden`;
-  },
-  getLabelId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.label) != null ? _b : `pin-input:${ctx.id}:label`;
-  },
-  getControlId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.control) != null ? _b : `pin-input:${ctx.id}:control`;
-  },
-  getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
-  getElements: (ctx) => {
-    const ownerId = CSS.escape(dom.getRootId(ctx));
-    const selector = `input[data-ownedby=${ownerId}]`;
-    return queryAll(dom.getRootEl(ctx), selector);
-  },
-  getFocusedEl: (ctx) => dom.getElements(ctx)[ctx.focusedIndex],
-  getFirstInputEl: (ctx) => dom.getElements(ctx)[0],
-  getHiddenInputEl: (ctx) => dom.getById(ctx, dom.getHiddenInputId(ctx))
-});
-
-export {
-  getWindow,
-  dom
-};