@zag-js/pin-input 0.0.0-dev-20220415160434 → 0.0.0-dev-20220417135151

package/dist/index.d.ts

@@ -1,4 +1,4 @@
 export { connect } from "./pin-input.connect";
 export { machine } from "./pin-input.machine";
-export type { MachineContext, MachineState } from "./pin-input.types";
+export type { UserDefinedContext as Context } from "./pin-input.types";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAA;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAA;AAC7C,YAAY,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAA;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAA;AAC7C,YAAY,EAAE,kBAAkB,IAAI,OAAO,EAAE,MAAM,mBAAmB,CAAA"}

package/dist/index.js

@@ -1,7 +1,24 @@
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -104,11 +121,11 @@ var dom = {
   },
   getRootId: (ctx) => {
     var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `pin-input-${ctx.uid}`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `pin-input:${ctx.uid}`;
   },
   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.uid}-${id}`;
+    return (_c = (_b = (_a = ctx.ids) == null ? void 0 : _a.input) == null ? void 0 : _b.call(_a, id)) != null ? _c : `pin-input:${ctx.uid}:${id}`;
   },
   getRootEl: (ctx) => dom.getDoc(ctx).getElementById(dom.getRootId(ctx)),
   getElements: (ctx) => {
@@ -229,232 +246,235 @@ function connect(state, send, normalize = normalizeProp) {
 // src/pin-input.machine.ts
 var import_core = require("@zag-js/core");
 var { and, not } = import_core.guards;
-var machine = (0, import_core.createMachine)({
-  id: "pin-input",
-  initial: "unknown",
-  context: {
-    uid: "pin-input",
-    value: [],
-    focusedIndex: -1,
-    placeholder: "\u25CB",
-    otp: false,
-    type: "numeric",
-    messages: {
-      inputLabel: (index, length) => `pin code ${index + 1} of ${length}`
-    }
-  },
-  computed: {
-    valueLength: (ctx) => ctx.value.length,
-    filledValueLength: (ctx) => ctx.value.filter((v) => (v == null ? void 0 : v.trim()) !== "").length,
-    isValueComplete: (ctx) => ctx.valueLength === ctx.filledValueLength,
-    valueAsString: (ctx) => ctx.value.join("")
-  },
-  watch: {
-    focusedIndex: "focusInput",
-    value: "invokeOnChange",
-    isValueComplete: ["invokeComplete", "blurFocusedInputIfNeeded"]
-  },
-  on: {
-    SET_VALUE: [
-      {
-        guard: "hasIndex",
-        actions: "setValueAtIndex"
-      },
-      { actions: "setValue" }
-    ],
-    CLEAR_VALUE: [
-      {
-        guard: "isDisabled",
-        actions: "clearValue"
+function machine(ctx = {}) {
+  return (0, import_core.createMachine)({
+    id: "pin-input",
+    initial: "unknown",
+    context: __spreadProps(__spreadValues({
+      uid: "pin-input",
+      value: [],
+      focusedIndex: -1,
+      placeholder: "\u25CB",
+      otp: false,
+      type: "numeric"
+    }, ctx), {
+      messages: __spreadValues({
+        inputLabel: (index, length) => `pin code ${index + 1} of ${length}`
+      }, ctx.messages)
+    }),
+    computed: {
+      valueLength: (ctx2) => ctx2.value.length,
+      filledValueLength: (ctx2) => ctx2.value.filter((v) => (v == null ? void 0 : v.trim()) !== "").length,
+      isValueComplete: (ctx2) => ctx2.valueLength === ctx2.filledValueLength,
+      valueAsString: (ctx2) => ctx2.value.join("")
+    },
+    watch: {
+      focusedIndex: "focusInput",
+      value: "invokeOnChange",
+      isValueComplete: ["invokeComplete", "blurFocusedInputIfNeeded"]
+    },
+    on: {
+      SET_VALUE: [
+        {
+          guard: "hasIndex",
+          actions: "setValueAtIndex"
+        },
+        { actions: "setValue" }
+      ],
+      CLEAR_VALUE: [
+        {
+          guard: "isDisabled",
+          actions: "clearValue"
+        },
+        {
+          actions: ["clearValue", "setFocusIndexToFirst"]
+        }
+      ]
+    },
+    states: {
+      unknown: {
+        on: {
+          SETUP: [
+            {
+              guard: "autoFocus",
+              target: "focused",
+              actions: ["setupDocument", "setupValue", "setFocusIndexToFirst"]
+            },
+            {
+              target: "idle",
+              actions: ["setupDocument", "setupValue"]
+            }
+          ]
+        }
       },
-      {
-        actions: ["clearValue", "setFocusIndexToFirst"]
-      }
-    ]
-  },
-  states: {
-    unknown: {
-      on: {
-        SETUP: [
-          {
-            guard: "autoFocus",
+      idle: {
+        on: {
+          FOCUS: {
             target: "focused",
-            actions: ["setupDocument", "setupValue", "setFocusIndexToFirst"]
-          },
-          {
-            target: "idle",
-            actions: ["setupDocument", "setupValue"]
+            actions: "setFocusedIndex"
           }
-        ]
-      }
-    },
-    idle: {
-      on: {
-        FOCUS: {
-          target: "focused",
-          actions: "setFocusedIndex"
         }
-      }
-    },
-    focused: {
-      on: {
-        INPUT: [
-          {
-            guard: and("isFinalValue", "isValidValue"),
-            actions: "setFocusedValue"
+      },
+      focused: {
+        on: {
+          INPUT: [
+            {
+              guard: and("isFinalValue", "isValidValue"),
+              actions: "setFocusedValue"
+            },
+            {
+              guard: and("hasValue", "isValidValue"),
+              actions: ["replaceFocusedValue", "setNextFocusedIndex"]
+            },
+            {
+              guard: "isValidValue",
+              actions: ["setFocusedValue", "setNextFocusedIndex"]
+            }
+          ],
+          PASTE: {
+            guard: "isValidValue",
+            actions: ["setPastedValue", "setLastValueFocusIndex"]
           },
-          {
-            guard: and("hasValue", "isValidValue"),
-            actions: ["replaceFocusedValue", "setNextFocusedIndex"]
+          BLUR: {
+            target: "idle",
+            actions: "clearFocusedIndex"
           },
-          {
-            guard: "isValidValue",
-            actions: ["setFocusedValue", "setNextFocusedIndex"]
-          }
-        ],
-        PASTE: {
-          guard: "isValidValue",
-          actions: ["setPastedValue", "setLastValueFocusIndex"]
-        },
-        BLUR: {
-          target: "idle",
-          actions: "clearFocusedIndex"
-        },
-        DELETE: {
-          guard: "hasValue",
-          actions: "clearFocusedValue"
-        },
-        ARROW_LEFT: {
-          actions: "setPrevFocusedIndex"
-        },
-        ARROW_RIGHT: {
-          actions: "setNextFocusedIndex"
-        },
-        BACKSPACE: [
-          {
+          DELETE: {
             guard: "hasValue",
             actions: "clearFocusedValue"
           },
-          {
-            actions: ["setPrevFocusedIndex", "clearFocusedValue"]
+          ARROW_LEFT: {
+            actions: "setPrevFocusedIndex"
+          },
+          ARROW_RIGHT: {
+            actions: "setNextFocusedIndex"
+          },
+          BACKSPACE: [
+            {
+              guard: "hasValue",
+              actions: "clearFocusedValue"
+            },
+            {
+              actions: ["setPrevFocusedIndex", "clearFocusedValue"]
+            }
+          ],
+          KEY_DOWN: {
+            guard: not("isValidValue"),
+            actions: ["preventDefault", "invokeOnInvalid"]
           }
-        ],
-        KEY_DOWN: {
-          guard: not("isValidValue"),
-          actions: ["preventDefault", "invokeOnInvalid"]
         }
       }
     }
-  }
-}, {
-  guards: {
-    autoFocus: (ctx) => !!ctx.autoFocus,
-    isValueEmpty: (_ctx, evt) => evt.value === "",
-    hasValue: (ctx) => ctx.value[ctx.focusedIndex] !== "",
-    isValueComplete: (ctx) => ctx.isValueComplete,
-    isValidValue: (ctx, evt) => isValidType(evt.value, ctx.type),
-    isFinalValue: (ctx) => {
-      return ctx.filledValueLength + 1 === ctx.valueLength && ctx.value.findIndex((v) => v.trim() === "") === ctx.focusedIndex;
-    },
-    isLastInputFocused: (ctx) => ctx.focusedIndex === ctx.valueLength - 1,
-    hasIndex: (_ctx, evt) => evt.index !== void 0,
-    isDisabled: (ctx) => !!ctx.disabled
-  },
-  actions: {
-    setupDocument: (ctx, evt) => {
-      if (evt.doc)
-        ctx.doc = (0, import_core.ref)(evt.doc);
-      ctx.uid = evt.id;
-    },
-    setupValue: (ctx) => {
-      nextTick(() => {
-        const inputs = dom.getElements(ctx);
-        const empty = fromLength(inputs.length).map(() => "");
-        ctx.value = Object.assign(empty, ctx.value);
-      });
+  }, {
+    guards: {
+      autoFocus: (ctx2) => !!ctx2.autoFocus,
+      isValueEmpty: (_ctx, evt) => evt.value === "",
+      hasValue: (ctx2) => ctx2.value[ctx2.focusedIndex] !== "",
+      isValueComplete: (ctx2) => ctx2.isValueComplete,
+      isValidValue: (ctx2, evt) => isValidType(evt.value, ctx2.type),
+      isFinalValue: (ctx2) => {
+        return ctx2.filledValueLength + 1 === ctx2.valueLength && ctx2.value.findIndex((v) => v.trim() === "") === ctx2.focusedIndex;
+      },
+      isLastInputFocused: (ctx2) => ctx2.focusedIndex === ctx2.valueLength - 1,
+      hasIndex: (_ctx, evt) => evt.index !== void 0,
+      isDisabled: (ctx2) => !!ctx2.disabled
     },
-    focusInput: (ctx) => {
-      nextTick(() => {
+    actions: {
+      setupDocument: (ctx2, evt) => {
+        if (evt.doc)
+          ctx2.doc = (0, import_core.ref)(evt.doc);
+        ctx2.uid = evt.id;
+      },
+      setupValue: (ctx2) => {
+        nextTick(() => {
+          const inputs = dom.getElements(ctx2);
+          const empty = fromLength(inputs.length).map(() => "");
+          ctx2.value = Object.assign(empty, ctx2.value);
+        });
+      },
+      focusInput: (ctx2) => {
+        nextTick(() => {
+          var _a;
+          if (ctx2.focusedIndex === -1)
+            return;
+          (_a = dom.getFocusedEl(ctx2)) == null ? void 0 : _a.focus();
+        });
+      },
+      invokeComplete: (ctx2) => {
+        var _a;
+        if (ctx2.isValueComplete) {
+          (_a = ctx2.onComplete) == null ? void 0 : _a.call(ctx2, { value: Array.from(ctx2.value), valueAsString: ctx2.valueAsString });
+        }
+      },
+      invokeOnChange: (ctx2, evt) => {
+        var _a;
+        if (evt.type !== "SETUP") {
+          (_a = ctx2.onChange) == null ? void 0 : _a.call(ctx2, { value: Array.from(ctx2.value) });
+        }
+      },
+      invokeOnInvalid: (ctx2, evt) => {
         var _a;
-        if (ctx.focusedIndex === -1)
+        (_a = ctx2.onInvalid) == null ? void 0 : _a.call(ctx2, { value: evt.value, index: ctx2.focusedIndex });
+      },
+      clearFocusedIndex: (ctx2) => {
+        ctx2.focusedIndex = -1;
+      },
+      setValue: (ctx2, event) => {
+        assign(ctx2, event.value);
+      },
+      setFocusedIndex: (ctx2, event) => {
+        ctx2.focusedIndex = event.index;
+      },
+      setFocusedValue: (ctx2, event) => {
+        ctx2.value[ctx2.focusedIndex] = event.value;
+      },
+      replaceFocusedValue: (ctx2, evt) => {
+        const val = ctx2.value[ctx2.focusedIndex];
+        ctx2.value[ctx2.focusedIndex] = evt.value.replace(val, "").charAt(0);
+      },
+      setPastedValue(ctx2, evt) {
+        nextTick(() => {
+          const value = evt.value.substr(0, ctx2.valueLength);
+          assign(ctx2, value.split("").filter(Boolean));
+        });
+      },
+      setValueAtIndex: (ctx2, evt) => {
+        ctx2.value[evt.index] = evt.value;
+      },
+      clearValue: (ctx2) => {
+        assign(ctx2, "");
+      },
+      clearFocusedValue: (ctx2) => {
+        ctx2.value[ctx2.focusedIndex] = "";
+      },
+      setFocusIndexToFirst: (ctx2) => {
+        ctx2.focusedIndex = 0;
+      },
+      setNextFocusedIndex: (ctx2) => {
+        ctx2.focusedIndex = Math.min(ctx2.focusedIndex + 1, ctx2.valueLength - 1);
+      },
+      setPrevFocusedIndex: (ctx2) => {
+        ctx2.focusedIndex = Math.max(ctx2.focusedIndex - 1, 0);
+      },
+      setLastValueFocusIndex: (ctx2) => {
+        nextTick(() => {
+          ctx2.focusedIndex = Math.min(ctx2.filledValueLength, ctx2.valueLength - 1);
+        });
+      },
+      preventDefault(_, evt) {
+        evt.preventDefault();
+      },
+      blurFocusedInputIfNeeded(ctx2) {
+        if (!ctx2.blurOnComplete)
           return;
-        (_a = dom.getFocusedEl(ctx)) == null ? void 0 : _a.focus();
-      });
-    },
-    invokeComplete: (ctx) => {
-      var _a;
-      if (ctx.isValueComplete) {
-        (_a = ctx.onComplete) == null ? void 0 : _a.call(ctx, { value: Array.from(ctx.value), valueAsString: ctx.valueAsString });
-      }
-    },
-    invokeOnChange: (ctx, evt) => {
-      var _a;
-      if (evt.type !== "SETUP") {
-        (_a = ctx.onChange) == null ? void 0 : _a.call(ctx, { value: Array.from(ctx.value) });
+        nextTick(() => {
+          var _a;
+          (_a = dom.getFocusedEl(ctx2)) == null ? void 0 : _a.blur();
+        });
       }
-    },
-    invokeOnInvalid: (ctx, evt) => {
-      var _a;
-      (_a = ctx.onInvalid) == null ? void 0 : _a.call(ctx, { value: evt.value, index: ctx.focusedIndex });
-    },
-    clearFocusedIndex: (ctx) => {
-      ctx.focusedIndex = -1;
-    },
-    setValue: (ctx, event) => {
-      assign(ctx, event.value);
-    },
-    setFocusedIndex: (ctx, event) => {
-      ctx.focusedIndex = event.index;
-    },
-    setFocusedValue: (ctx, event) => {
-      ctx.value[ctx.focusedIndex] = event.value;
-    },
-    replaceFocusedValue: (ctx, evt) => {
-      const val = ctx.value[ctx.focusedIndex];
-      ctx.value[ctx.focusedIndex] = evt.value.replace(val, "").charAt(0);
-    },
-    setPastedValue(ctx, evt) {
-      nextTick(() => {
-        const value = evt.value.substr(0, ctx.valueLength);
-        assign(ctx, value.split("").filter(Boolean));
-      });
-    },
-    setValueAtIndex: (ctx, evt) => {
-      ctx.value[evt.index] = evt.value;
-    },
-    clearValue: (ctx) => {
-      assign(ctx, "");
-    },
-    clearFocusedValue: (ctx) => {
-      ctx.value[ctx.focusedIndex] = "";
-    },
-    setFocusIndexToFirst: (ctx) => {
-      ctx.focusedIndex = 0;
-    },
-    setNextFocusedIndex: (ctx) => {
-      ctx.focusedIndex = Math.min(ctx.focusedIndex + 1, ctx.valueLength - 1);
-    },
-    setPrevFocusedIndex: (ctx) => {
-      ctx.focusedIndex = Math.max(ctx.focusedIndex - 1, 0);
-    },
-    setLastValueFocusIndex: (ctx) => {
-      nextTick(() => {
-        ctx.focusedIndex = Math.min(ctx.filledValueLength, ctx.valueLength - 1);
-      });
-    },
-    preventDefault(_, evt) {
-      evt.preventDefault();
-    },
-    blurFocusedInputIfNeeded(ctx) {
-      if (!ctx.blurOnComplete)
-        return;
-      nextTick(() => {
-        var _a;
-        (_a = dom.getFocusedEl(ctx)) == null ? void 0 : _a.blur();
-      });
     }
-  }
-});
+  });
+}
 var REGEX = {
   numeric: /^[0-9]+$/,
   alphabetic: /^[A-Za-z]+$/,