@zag-js/pin-input 0.2.10 → 0.2.12

package/dist/{chunk-QVOI2QEW.mjs → chunk-IGE2OJGQ.mjs}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-BJXKBZJG.mjs";
 import {
   dom
-} from "./chunk-T5OKDF74.mjs";
+} from "./chunk-Y7IZ6OAH.mjs";
 
 // ../../utilities/dom/src/attrs.ts
 var dataAttr = (guard) => {
@@ -159,7 +159,7 @@ function connect(state, send, normalize) {
             send("BACKSPACE");
             return;
           }
-          send({ type: "INPUT", value });
+          send({ type: "INPUT", value, index });
         },
         onKeyDown(event) {
           const evt = getNativeEvent(event);

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

@@ -4,7 +4,7 @@ import {
 import {
   dom,
   getWindow
-} from "./chunk-T5OKDF74.mjs";
+} from "./chunk-Y7IZ6OAH.mjs";
 
 // src/pin-input.machine.ts
 import { createMachine, guards } from "@zag-js/core";
@@ -54,7 +54,7 @@ function machine(userContext) {
       initial: ctx.autoFocus ? "focused" : "idle",
       context: {
         value: [],
-        focusedIndex: ctx.autoFocus ? 0 : -1,
+        focusedIndex: -1,
         placeholder: "\u25CB",
         otp: false,
         type: "numeric",
@@ -73,10 +73,10 @@ function machine(userContext) {
       },
       watch: {
         focusedIndex: ["focusInput", "setInputSelection"],
-        value: ["dispatchInputEvent"],
+        value: ["dispatchInputEvent", "syncInputElements"],
         isValueComplete: ["invokeOnComplete", "blurFocusedInputIfNeeded"]
       },
-      entry: ["setupValue"],
+      entry: ctx.autoFocus ? ["setupValue", "setFocusIndexToFirst"] : ["setupValue"],
       on: {
         SET_VALUE: [
           {
@@ -187,14 +187,14 @@ function machine(userContext) {
           raf(() => {
             if (ctx2.focusedIndex === -1)
               return;
-            dom.getFocusedEl(ctx2)?.focus();
+            dom.getFocusedInputEl(ctx2)?.focus();
           });
         },
         setInputSelection: (ctx2) => {
           raf(() => {
             if (ctx2.focusedIndex === -1)
               return;
-            const input = dom.getFocusedEl(ctx2);
+            const input = dom.getFocusedInputEl(ctx2);
             const length = input.value.length;
             input.selectionStart = ctx2.selectOnFocus ? 0 : length;
             input.selectionEnd = length;
@@ -205,20 +205,11 @@ function machine(userContext) {
             return;
           ctx2.onComplete?.({ value: Array.from(ctx2.value), valueAsString: ctx2.valueAsString });
         },
-        invokeOnChange: (ctx2, evt) => {
-          if (evt.type === "SETUP")
-            return;
+        invokeOnChange: (ctx2) => {
           ctx2.onChange?.({ value: Array.from(ctx2.value) });
         },
-        dispatchInputEvent: (ctx2, evt) => {
-          if (evt.type === "SETUP")
-            return;
+        dispatchInputEvent: (ctx2) => {
           dispatchInputValueEvent(dom.getHiddenInputEl(ctx2), ctx2.valueAsString);
-          const inputs = dom.getElements(ctx2);
-          ctx2.value.forEach((val, index) => {
-            const input = inputs[index];
-            input.value = val || "";
-          });
         },
         invokeOnInvalid: (ctx2, evt) => {
           ctx2.onInvalid?.({ value: evt.value, index: ctx2.focusedIndex });
@@ -235,14 +226,17 @@ function machine(userContext) {
         setFocusedValue: (ctx2, evt) => {
           ctx2.value[ctx2.focusedIndex] = getNextValue(ctx2.focusedValue, evt.value);
         },
-        syncInputValue: (ctx2, evt) => {
-          const nextValue = getNextValue(ctx2.focusedValue, evt.value);
-          const changed = nextValue !== ctx2.focusedValue;
-          if (evt.value.length <= 1 || changed)
+        syncInputValue(ctx2, evt) {
+          const input = dom.getInputEl(ctx2, evt.index.toString());
+          if (!input)
             return;
+          input.value = ctx2.value[evt.index];
+        },
+        syncInputElements(ctx2) {
           const inputs = dom.getElements(ctx2);
-          const input = inputs[ctx2.focusedIndex];
-          input.value = nextValue;
+          inputs.forEach((input, index) => {
+            input.value = ctx2.value[index];
+          });
         },
         setPastedValue(ctx2, evt) {
           raf(() => {
@@ -262,7 +256,7 @@ function machine(userContext) {
           ctx2.value[ctx2.focusedIndex] = "";
         },
         resetFocusedValue: (ctx2) => {
-          const input = dom.getFocusedEl(ctx2);
+          const input = dom.getFocusedInputEl(ctx2);
           input.value = ctx2.focusedValue;
         },
         setFocusIndexToFirst: (ctx2) => {
@@ -286,7 +280,7 @@ function machine(userContext) {
           if (!ctx2.blurOnComplete)
             return;
           raf(() => {
-            dom.getFocusedEl(ctx2)?.blur();
+            dom.getFocusedInputEl(ctx2)?.blur();
           });
         },
         requestFormSubmit(ctx2) {

package/dist/{chunk-T5OKDF74.mjs → chunk-Y7IZ6OAH.mjs}

@@ -47,7 +47,8 @@ var dom = defineDomHelpers({
     const selector = `input[data-ownedby=${ownerId}]`;
     return queryAll(dom.getRootEl(ctx), selector);
   },
-  getFocusedEl: (ctx) => dom.getElements(ctx)[ctx.focusedIndex],
+  getInputEl: (ctx, id) => dom.getById(ctx, dom.getInputId(ctx, id)),
+  getFocusedInputEl: (ctx) => dom.getElements(ctx)[ctx.focusedIndex],
   getFirstInputEl: (ctx) => dom.getElements(ctx)[0],
   getHiddenInputEl: (ctx) => dom.getById(ctx, dom.getHiddenInputId(ctx))
 });

package/dist/index.js

@@ -163,7 +163,8 @@ var dom = defineDomHelpers({
     const selector = `input[data-ownedby=${ownerId}]`;
     return queryAll(dom.getRootEl(ctx), selector);
   },
-  getFocusedEl: (ctx) => dom.getElements(ctx)[ctx.focusedIndex],
+  getInputEl: (ctx, id) => dom.getById(ctx, dom.getInputId(ctx, id)),
+  getFocusedInputEl: (ctx) => dom.getElements(ctx)[ctx.focusedIndex],
   getFirstInputEl: (ctx) => dom.getElements(ctx)[0],
   getHiddenInputEl: (ctx) => dom.getById(ctx, dom.getHiddenInputId(ctx))
 });
@@ -260,7 +261,7 @@ function connect(state, send, normalize) {
             send("BACKSPACE");
             return;
           }
-          send({ type: "INPUT", value });
+          send({ type: "INPUT", value, index });
         },
         onKeyDown(event) {
           const evt = getNativeEvent(event);
@@ -336,7 +337,7 @@ function machine(userContext) {
       initial: ctx.autoFocus ? "focused" : "idle",
       context: {
         value: [],
-        focusedIndex: ctx.autoFocus ? 0 : -1,
+        focusedIndex: -1,
         placeholder: "\u25CB",
         otp: false,
         type: "numeric",
@@ -355,10 +356,10 @@ function machine(userContext) {
       },
       watch: {
         focusedIndex: ["focusInput", "setInputSelection"],
-        value: ["dispatchInputEvent"],
+        value: ["dispatchInputEvent", "syncInputElements"],
         isValueComplete: ["invokeOnComplete", "blurFocusedInputIfNeeded"]
       },
-      entry: ["setupValue"],
+      entry: ctx.autoFocus ? ["setupValue", "setFocusIndexToFirst"] : ["setupValue"],
       on: {
         SET_VALUE: [
           {
@@ -469,14 +470,14 @@ function machine(userContext) {
           raf(() => {
             if (ctx2.focusedIndex === -1)
               return;
-            dom.getFocusedEl(ctx2)?.focus();
+            dom.getFocusedInputEl(ctx2)?.focus();
           });
         },
         setInputSelection: (ctx2) => {
           raf(() => {
             if (ctx2.focusedIndex === -1)
               return;
-            const input = dom.getFocusedEl(ctx2);
+            const input = dom.getFocusedInputEl(ctx2);
             const length = input.value.length;
             input.selectionStart = ctx2.selectOnFocus ? 0 : length;
             input.selectionEnd = length;
@@ -487,20 +488,11 @@ function machine(userContext) {
             return;
           ctx2.onComplete?.({ value: Array.from(ctx2.value), valueAsString: ctx2.valueAsString });
         },
-        invokeOnChange: (ctx2, evt) => {
-          if (evt.type === "SETUP")
-            return;
+        invokeOnChange: (ctx2) => {
           ctx2.onChange?.({ value: Array.from(ctx2.value) });
         },
-        dispatchInputEvent: (ctx2, evt) => {
-          if (evt.type === "SETUP")
-            return;
+        dispatchInputEvent: (ctx2) => {
           dispatchInputValueEvent(dom.getHiddenInputEl(ctx2), ctx2.valueAsString);
-          const inputs = dom.getElements(ctx2);
-          ctx2.value.forEach((val, index) => {
-            const input = inputs[index];
-            input.value = val || "";
-          });
         },
         invokeOnInvalid: (ctx2, evt) => {
           ctx2.onInvalid?.({ value: evt.value, index: ctx2.focusedIndex });
@@ -517,14 +509,17 @@ function machine(userContext) {
         setFocusedValue: (ctx2, evt) => {
           ctx2.value[ctx2.focusedIndex] = getNextValue(ctx2.focusedValue, evt.value);
         },
-        syncInputValue: (ctx2, evt) => {
-          const nextValue = getNextValue(ctx2.focusedValue, evt.value);
-          const changed = nextValue !== ctx2.focusedValue;
-          if (evt.value.length <= 1 || changed)
+        syncInputValue(ctx2, evt) {
+          const input = dom.getInputEl(ctx2, evt.index.toString());
+          if (!input)
             return;
+          input.value = ctx2.value[evt.index];
+        },
+        syncInputElements(ctx2) {
           const inputs = dom.getElements(ctx2);
-          const input = inputs[ctx2.focusedIndex];
-          input.value = nextValue;
+          inputs.forEach((input, index) => {
+            input.value = ctx2.value[index];
+          });
         },
         setPastedValue(ctx2, evt) {
           raf(() => {
@@ -544,7 +539,7 @@ function machine(userContext) {
           ctx2.value[ctx2.focusedIndex] = "";
         },
         resetFocusedValue: (ctx2) => {
-          const input = dom.getFocusedEl(ctx2);
+          const input = dom.getFocusedInputEl(ctx2);
           input.value = ctx2.focusedValue;
         },
         setFocusIndexToFirst: (ctx2) => {
@@ -568,7 +563,7 @@ function machine(userContext) {
           if (!ctx2.blurOnComplete)
             return;
           raf(() => {
-            dom.getFocusedEl(ctx2)?.blur();
+            dom.getFocusedInputEl(ctx2)?.blur();
           });
         },
         requestFormSubmit(ctx2) {

package/dist/index.mjs

@@ -1,14 +1,14 @@
 import {
   connect
-} from "./chunk-QVOI2QEW.mjs";
+} from "./chunk-IGE2OJGQ.mjs";
 import {
   anatomy
 } from "./chunk-BJXKBZJG.mjs";
 import {
   machine
-} from "./chunk-53K4IC6M.mjs";
+} from "./chunk-VZQYAAIE.mjs";
 import "./chunk-NT4W6JYX.mjs";
-import "./chunk-T5OKDF74.mjs";
+import "./chunk-Y7IZ6OAH.mjs";
 export {
   anatomy,
   connect,

package/dist/pin-input.connect.js

@@ -137,7 +137,8 @@ var dom = defineDomHelpers({
     const selector = `input[data-ownedby=${ownerId}]`;
     return queryAll(dom.getRootEl(ctx), selector);
   },
-  getFocusedEl: (ctx) => dom.getElements(ctx)[ctx.focusedIndex],
+  getInputEl: (ctx, id) => dom.getById(ctx, dom.getInputId(ctx, id)),
+  getFocusedInputEl: (ctx) => dom.getElements(ctx)[ctx.focusedIndex],
   getFirstInputEl: (ctx) => dom.getElements(ctx)[0],
   getHiddenInputEl: (ctx) => dom.getById(ctx, dom.getHiddenInputId(ctx))
 });
@@ -234,7 +235,7 @@ function connect(state, send, normalize) {
             send("BACKSPACE");
             return;
           }
-          send({ type: "INPUT", value });
+          send({ type: "INPUT", value, index });
         },
         onKeyDown(event) {
           const evt = getNativeEvent(event);

package/dist/pin-input.connect.mjs

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

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

@@ -26,7 +26,8 @@ declare const dom: {
     getControlId: (ctx: MachineContext) => string;
     getRootEl: (ctx: MachineContext) => HTMLElement | null;
     getElements: (ctx: MachineContext) => HTMLInputElement[];
-    getFocusedEl: (ctx: MachineContext) => HTMLInputElement;
+    getInputEl: (ctx: MachineContext, id: string) => HTMLInputElement | null;
+    getFocusedInputEl: (ctx: MachineContext) => HTMLInputElement;
     getFirstInputEl: (ctx: MachineContext) => HTMLInputElement;
     getHiddenInputEl: (ctx: MachineContext) => HTMLInputElement | null;
 };

package/dist/pin-input.dom.js

@@ -70,7 +70,8 @@ var dom = defineDomHelpers({
     const selector = `input[data-ownedby=${ownerId}]`;
     return queryAll(dom.getRootEl(ctx), selector);
   },
-  getFocusedEl: (ctx) => dom.getElements(ctx)[ctx.focusedIndex],
+  getInputEl: (ctx, id) => dom.getById(ctx, dom.getInputId(ctx, id)),
+  getFocusedInputEl: (ctx) => dom.getElements(ctx)[ctx.focusedIndex],
   getFirstInputEl: (ctx) => dom.getElements(ctx)[0],
   getHiddenInputEl: (ctx) => dom.getById(ctx, dom.getHiddenInputId(ctx))
 });

package/dist/pin-input.dom.mjs

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

package/dist/pin-input.machine.js

@@ -113,7 +113,8 @@ var dom = defineDomHelpers({
     const selector = `input[data-ownedby=${ownerId}]`;
     return queryAll(dom.getRootEl(ctx), selector);
   },
-  getFocusedEl: (ctx) => dom.getElements(ctx)[ctx.focusedIndex],
+  getInputEl: (ctx, id) => dom.getById(ctx, dom.getInputId(ctx, id)),
+  getFocusedInputEl: (ctx) => dom.getElements(ctx)[ctx.focusedIndex],
   getFirstInputEl: (ctx) => dom.getElements(ctx)[0],
   getHiddenInputEl: (ctx) => dom.getById(ctx, dom.getHiddenInputId(ctx))
 });
@@ -128,7 +129,7 @@ function machine(userContext) {
       initial: ctx.autoFocus ? "focused" : "idle",
       context: {
         value: [],
-        focusedIndex: ctx.autoFocus ? 0 : -1,
+        focusedIndex: -1,
         placeholder: "\u25CB",
         otp: false,
         type: "numeric",
@@ -147,10 +148,10 @@ function machine(userContext) {
       },
       watch: {
         focusedIndex: ["focusInput", "setInputSelection"],
-        value: ["dispatchInputEvent"],
+        value: ["dispatchInputEvent", "syncInputElements"],
         isValueComplete: ["invokeOnComplete", "blurFocusedInputIfNeeded"]
       },
-      entry: ["setupValue"],
+      entry: ctx.autoFocus ? ["setupValue", "setFocusIndexToFirst"] : ["setupValue"],
       on: {
         SET_VALUE: [
           {
@@ -261,14 +262,14 @@ function machine(userContext) {
           raf(() => {
             if (ctx2.focusedIndex === -1)
               return;
-            dom.getFocusedEl(ctx2)?.focus();
+            dom.getFocusedInputEl(ctx2)?.focus();
           });
         },
         setInputSelection: (ctx2) => {
           raf(() => {
             if (ctx2.focusedIndex === -1)
               return;
-            const input = dom.getFocusedEl(ctx2);
+            const input = dom.getFocusedInputEl(ctx2);
             const length = input.value.length;
             input.selectionStart = ctx2.selectOnFocus ? 0 : length;
             input.selectionEnd = length;
@@ -279,20 +280,11 @@ function machine(userContext) {
             return;
           ctx2.onComplete?.({ value: Array.from(ctx2.value), valueAsString: ctx2.valueAsString });
         },
-        invokeOnChange: (ctx2, evt) => {
-          if (evt.type === "SETUP")
-            return;
+        invokeOnChange: (ctx2) => {
           ctx2.onChange?.({ value: Array.from(ctx2.value) });
         },
-        dispatchInputEvent: (ctx2, evt) => {
-          if (evt.type === "SETUP")
-            return;
+        dispatchInputEvent: (ctx2) => {
           dispatchInputValueEvent(dom.getHiddenInputEl(ctx2), ctx2.valueAsString);
-          const inputs = dom.getElements(ctx2);
-          ctx2.value.forEach((val, index) => {
-            const input = inputs[index];
-            input.value = val || "";
-          });
         },
         invokeOnInvalid: (ctx2, evt) => {
           ctx2.onInvalid?.({ value: evt.value, index: ctx2.focusedIndex });
@@ -309,14 +301,17 @@ function machine(userContext) {
         setFocusedValue: (ctx2, evt) => {
           ctx2.value[ctx2.focusedIndex] = getNextValue(ctx2.focusedValue, evt.value);
         },
-        syncInputValue: (ctx2, evt) => {
-          const nextValue = getNextValue(ctx2.focusedValue, evt.value);
-          const changed = nextValue !== ctx2.focusedValue;
-          if (evt.value.length <= 1 || changed)
+        syncInputValue(ctx2, evt) {
+          const input = dom.getInputEl(ctx2, evt.index.toString());
+          if (!input)
             return;
+          input.value = ctx2.value[evt.index];
+        },
+        syncInputElements(ctx2) {
           const inputs = dom.getElements(ctx2);
-          const input = inputs[ctx2.focusedIndex];
-          input.value = nextValue;
+          inputs.forEach((input, index) => {
+            input.value = ctx2.value[index];
+          });
         },
         setPastedValue(ctx2, evt) {
           raf(() => {
@@ -336,7 +331,7 @@ function machine(userContext) {
           ctx2.value[ctx2.focusedIndex] = "";
         },
         resetFocusedValue: (ctx2) => {
-          const input = dom.getFocusedEl(ctx2);
+          const input = dom.getFocusedInputEl(ctx2);
           input.value = ctx2.focusedValue;
         },
         setFocusIndexToFirst: (ctx2) => {
@@ -360,7 +355,7 @@ function machine(userContext) {
           if (!ctx2.blurOnComplete)
             return;
           raf(() => {
-            dom.getFocusedEl(ctx2)?.blur();
+            dom.getFocusedInputEl(ctx2)?.blur();
           });
         },
         requestFormSubmit(ctx2) {

package/dist/pin-input.machine.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/pin-input",
-  "version": "0.2.10",
+  "version": "0.2.12",
   "description": "Core logic for the pin-input widget implemented as a state machine",
   "keywords": [
     "js",
@@ -27,7 +27,7 @@
   },
   "dependencies": {
     "@zag-js/anatomy": "0.1.4",
-    "@zag-js/core": "0.2.7",
+    "@zag-js/core": "0.2.9",
     "@zag-js/types": "0.3.4"
   },
   "devDependencies": {