@zag-js/pin-input 0.2.7 → 0.2.9

package/dist/{chunk-OI3DK2PT.mjs → chunk-I5GCVNBL.mjs}

@@ -29,25 +29,7 @@ function defineDomHelpers(helpers) {
       return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
     },
     getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
-    getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id),
-    createEmitter: (ctx, target) => {
-      const win = dom2.getWin(ctx);
-      return function emit(evt, detail, options) {
-        const { bubbles = true, cancelable, composed = true } = options != null ? options : {};
-        const eventName = `zag:${evt}`;
-        const init = { bubbles, cancelable, composed, detail };
-        const event = new win.CustomEvent(eventName, init);
-        target.dispatchEvent(event);
-      };
-    },
-    createListener: (target) => {
-      return function listen(evt, handler) {
-        const eventName = `zag:${evt}`;
-        const listener = (e) => handler(e);
-        target.addEventListener(eventName, listener);
-        return () => target.removeEventListener(eventName, listener);
-      };
-    }
+    getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
   };
   return {
     ...dom2,

package/dist/{chunk-6HKN4SOY.mjs → chunk-IOTDORZW.mjs}

@@ -1,10 +1,10 @@
 import {
   isObject
-} from "./chunk-NT4W6JYX.mjs";
+} from "./chunk-KV727BEF.mjs";
 import {
   dom,
   getWindow
-} from "./chunk-OI3DK2PT.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,28 +253,30 @@ 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(() => {
             const startIndex = ctx2.focusedValue ? 1 : 0;
-            const value = evt.value.substring(startIndex, ctx2.valueLength);
+            const value = evt.value.substring(startIndex, startIndex + ctx2.valueLength);
             assign(ctx2, value);
           });
         },
         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-QX3A66VS.mjs → chunk-THBDCFBU.mjs}

@@ -1,9 +1,9 @@
 import {
   parts
-} from "./chunk-BJXKBZJG.mjs";
+} from "./chunk-LUBGS2VH.mjs";
 import {
   dom
-} from "./chunk-OI3DK2PT.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);
   }
 }
@@ -92,25 +92,7 @@ function defineDomHelpers(helpers) {
       return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
     },
     getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
-    getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id),
-    createEmitter: (ctx, target) => {
-      const win = dom2.getWin(ctx);
-      return function emit(evt, detail, options) {
-        const { bubbles = true, cancelable, composed = true } = options != null ? options : {};
-        const eventName = `zag:${evt}`;
-        const init = { bubbles, cancelable, composed, detail };
-        const event = new win.CustomEvent(eventName, init);
-        target.dispatchEvent(event);
-      };
-    },
-    createListener: (target) => {
-      return function listen(evt, handler) {
-        const eventName = `zag:${evt}`;
-        const listener = (e) => handler(e);
-        target.addEventListener(eventName, listener);
-        return () => target.removeEventListener(eventName, listener);
-      };
-    }
+    getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
   };
   return {
     ...dom2,
@@ -452,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: [
@@ -523,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(() => {
@@ -580,28 +562,30 @@ 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(() => {
             const startIndex = ctx2.focusedValue ? 1 : 0;
-            const value = evt.value.substring(startIndex, ctx2.valueLength);
+            const value = evt.value.substring(startIndex, startIndex + ctx2.valueLength);
             assign(ctx2, value);
           });
         },
         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] = "";
@@ -637,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();
@@ -658,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-QX3A66VS.mjs";
+} from "./chunk-THBDCFBU.mjs";
 import {
   anatomy
-} from "./chunk-BJXKBZJG.mjs";
+} from "./chunk-LUBGS2VH.mjs";
 import {
   machine
-} from "./chunk-6HKN4SOY.mjs";
-import "./chunk-NT4W6JYX.mjs";
-import "./chunk-OI3DK2PT.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);
   }
 }
@@ -68,25 +68,7 @@ function defineDomHelpers(helpers) {
       return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
     },
     getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
-    getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id),
-    createEmitter: (ctx, target) => {
-      const win = dom2.getWin(ctx);
-      return function emit(evt, detail, options) {
-        const { bubbles = true, cancelable, composed = true } = options != null ? options : {};
-        const eventName = `zag:${evt}`;
-        const init = { bubbles, cancelable, composed, detail };
-        const event = new win.CustomEvent(eventName, init);
-        target.dispatchEvent(event);
-      };
-    },
-    createListener: (target) => {
-      return function listen(evt, handler) {
-        const eventName = `zag:${evt}`;
-        const listener = (e) => handler(e);
-        target.addEventListener(eventName, listener);
-        return () => target.removeEventListener(eventName, listener);
-      };
-    }
+    getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
   };
   return {
     ...dom2,

package/dist/pin-input.connect.mjs

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

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

@@ -18,10 +18,6 @@ declare const dom: {
     getById: <T = HTMLElement>(ctx: {
         getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
     }, id: string) => T | null;
-    createEmitter: (ctx: {
-        getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
-    }, target: HTMLElement) => (evt: string, detail: Record<string, any>, options?: EventInit | undefined) => void;
-    createListener: (target: HTMLElement) => <T_1 = any>(evt: string, handler: (e: CustomEvent<T_1>) => void) => () => void;
 } & {
     getRootId: (ctx: MachineContext) => string;
     getInputId: (ctx: MachineContext, id: string) => string;

package/dist/pin-input.dom.js

@@ -51,25 +51,7 @@ function defineDomHelpers(helpers) {
       return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
     },
     getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
-    getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id),
-    createEmitter: (ctx, target) => {
-      const win = dom2.getWin(ctx);
-      return function emit(evt, detail, options) {
-        const { bubbles = true, cancelable, composed = true } = options != null ? options : {};
-        const eventName = `zag:${evt}`;
-        const init = { bubbles, cancelable, composed, detail };
-        const event = new win.CustomEvent(eventName, init);
-        target.dispatchEvent(event);
-      };
-    },
-    createListener: (target) => {
-      return function listen(evt, handler) {
-        const eventName = `zag:${evt}`;
-        const listener = (e) => handler(e);
-        target.addEventListener(eventName, listener);
-        return () => target.removeEventListener(eventName, listener);
-      };
-    }
+    getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
   };
   return {
     ...dom2,

package/dist/pin-input.dom.mjs

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

package/dist/pin-input.machine.js

@@ -69,25 +69,7 @@ function defineDomHelpers(helpers) {
       return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
     },
     getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
-    getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id),
-    createEmitter: (ctx, target) => {
-      const win = dom2.getWin(ctx);
-      return function emit(evt, detail, options) {
-        const { bubbles = true, cancelable, composed = true } = options != null ? options : {};
-        const eventName = `zag:${evt}`;
-        const init = { bubbles, cancelable, composed, detail };
-        const event = new win.CustomEvent(eventName, init);
-        target.dispatchEvent(event);
-      };
-    },
-    createListener: (target) => {
-      return function listen(evt, handler) {
-        const eventName = `zag:${evt}`;
-        const listener = (e) => handler(e);
-        target.addEventListener(eventName, listener);
-        return () => target.removeEventListener(eventName, listener);
-      };
-    }
+    getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
   };
   return {
     ...dom2,
@@ -241,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: [
@@ -312,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(() => {
@@ -369,28 +351,30 @@ 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(() => {
             const startIndex = ctx2.focusedValue ? 1 : 0;
-            const value = evt.value.substring(startIndex, ctx2.valueLength);
+            const value = evt.value.substring(startIndex, startIndex + ctx2.valueLength);
             assign(ctx2, value);
           });
         },
         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] = "";
@@ -426,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();
@@ -447,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-6HKN4SOY.mjs";
-import "./chunk-NT4W6JYX.mjs";
-import "./chunk-OI3DK2PT.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.7",
+  "version": "0.2.9",
   "description": "Core logic for the pin-input widget implemented as a state machine",
   "keywords": [
     "js",
@@ -27,12 +27,12 @@
   },
   "dependencies": {
     "@zag-js/anatomy": "0.1.3",
-    "@zag-js/core": "0.2.4",
-    "@zag-js/types": "0.3.2"
+    "@zag-js/core": "0.2.6",
+    "@zag-js/types": "0.3.3"
   },
   "devDependencies": {
     "clean-package": "2.2.0",
-    "@zag-js/dom-utils": "0.2.2",
+    "@zag-js/dom-utils": "0.2.3",
     "@zag-js/form-utils": "0.2.3",
     "@zag-js/utils": "0.3.2"
   },