@zag-js/pin-input 0.2.8 → 0.2.9

package/dist/{chunk-CDDLX3AG.mjs → chunk-IOTDORZW.mjs}

@@ -1,10 +1,10 @@
 import {
   isObject
-} from "./chunk-NT4W6JYX.mjs";
+} from "./chunk-KV727BEF.mjs";
 import {
   dom,
   getWindow
-} from "./chunk-APRO2TYE.mjs";
+} from "./chunk-I5GCVNBL.mjs";
 
 // src/pin-input.machine.ts
 import { createMachine, guards } from "@zag-js/core";
@@ -125,11 +125,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,8 +196,8 @@ 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(() => {
@@ -253,15 +253,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 +272,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] = "";
@@ -310,7 +312,7 @@ function machine(userContext) {
         },
         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();
@@ -331,12 +333,18 @@ function isValidType(value, type) {
   return !!((_a = REGEX[type]) == null ? void 0 : _a.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-THBDCFBU.mjs}

@@ -1,9 +1,9 @@
 import {
   parts
-} from "./chunk-BJXKBZJG.mjs";
+} from "./chunk-LUBGS2VH.mjs";
 import {
   dom
-} from "./chunk-APRO2TYE.mjs";
+} from "./chunk-I5GCVNBL.mjs";
 
 // ../../utilities/dom/src/attrs.ts
 var dataAttr = (guard) => {
@@ -17,7 +17,7 @@ var ariaAttr = (guard) => {
 function invariant(...a) {
   const m = a.length === 1 ? a[0] : a[1];
   const c = a.length === 2 ? a[0] : true;
-  if (c && process.env.NODE_ENV !== "production") {
+  if (c && true) {
     throw new Error(m);
   }
 }

package/dist/index.js

@@ -56,7 +56,7 @@ function compact(obj) {
 function invariant(...a) {
   const m = a.length === 1 ? a[0] : a[1];
   const c = a.length === 2 ? a[0] : true;
-  if (c && process.env.NODE_ENV !== "production") {
+  if (c && true) {
     throw new Error(m);
   }
 }
@@ -434,11 +434,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,8 +505,8 @@ 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(() => {
@@ -562,15 +562,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 +581,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] = "";
@@ -619,7 +621,7 @@ function machine(userContext) {
         },
         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();
@@ -640,12 +642,18 @@ function isValidType(value, type) {
   return !!((_a = REGEX[type]) == null ? void 0 : _a.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-THBDCFBU.mjs";
 import {
   anatomy
-} from "./chunk-BJXKBZJG.mjs";
+} from "./chunk-LUBGS2VH.mjs";
 import {
   machine
-} from "./chunk-CDDLX3AG.mjs";
-import "./chunk-NT4W6JYX.mjs";
-import "./chunk-APRO2TYE.mjs";
+} from "./chunk-IOTDORZW.mjs";
+import "./chunk-KV727BEF.mjs";
+import "./chunk-I5GCVNBL.mjs";
 export {
   anatomy,
   connect,

package/dist/pin-input.anatomy.mjs

@@ -1,7 +1,7 @@
 import {
   anatomy,
   parts
-} from "./chunk-BJXKBZJG.mjs";
+} from "./chunk-LUBGS2VH.mjs";
 export {
   anatomy,
   parts

package/dist/pin-input.connect.js

@@ -36,7 +36,7 @@ var ariaAttr = (guard) => {
 function invariant(...a) {
   const m = a.length === 1 ? a[0] : a[1];
   const c = a.length === 2 ? a[0] : true;
-  if (c && process.env.NODE_ENV !== "production") {
+  if (c && true) {
     throw new Error(m);
   }
 }

package/dist/pin-input.connect.mjs

@@ -1,9 +1,9 @@
 import {
   connect
-} from "./chunk-3SENCEI3.mjs";
-import "./chunk-BJXKBZJG.mjs";
-import "./chunk-NT4W6JYX.mjs";
-import "./chunk-APRO2TYE.mjs";
+} from "./chunk-THBDCFBU.mjs";
+import "./chunk-LUBGS2VH.mjs";
+import "./chunk-KV727BEF.mjs";
+import "./chunk-I5GCVNBL.mjs";
 export {
   connect
 };

package/dist/pin-input.dom.mjs

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

package/dist/pin-input.machine.js

@@ -223,11 +223,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,8 +294,8 @@ 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(() => {
@@ -351,15 +351,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 +370,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] = "";
@@ -408,7 +410,7 @@ function machine(userContext) {
         },
         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();
@@ -429,12 +431,18 @@ function isValidType(value, type) {
   return !!((_a = REGEX[type]) == null ? void 0 : _a.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";
-import "./chunk-NT4W6JYX.mjs";
-import "./chunk-APRO2TYE.mjs";
+} from "./chunk-IOTDORZW.mjs";
+import "./chunk-KV727BEF.mjs";
+import "./chunk-I5GCVNBL.mjs";
 export {
   machine
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/pin-input",
-  "version": "0.2.8",
+  "version": "0.2.9",
   "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.3",
-    "@zag-js/core": "0.2.5",
+    "@zag-js/core": "0.2.6",
     "@zag-js/types": "0.3.3"
   },
   "devDependencies": {