@zag-js/pin-input 0.10.2 → 0.10.4

package/dist/pin-input.machine.js

@@ -1,65 +1,24 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+'use strict';
 
-// src/pin-input.machine.ts
-var pin_input_machine_exports = {};
-__export(pin_input_machine_exports, {
-  machine: () => machine
-});
-module.exports = __toCommonJS(pin_input_machine_exports);
-var import_core = require("@zag-js/core");
-var import_dom_query2 = require("@zag-js/dom-query");
-var import_form_utils = require("@zag-js/form-utils");
-var import_utils = require("@zag-js/utils");
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-// src/pin-input.dom.ts
-var import_dom_query = require("@zag-js/dom-query");
-var dom = (0, import_dom_query.createScope)({
-  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 (0, import_dom_query.queryAll)(dom.getRootEl(ctx), selector);
-  },
-  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))
-});
+const core = require('@zag-js/core');
+const domQuery = require('@zag-js/dom-query');
+const formUtils = require('@zag-js/form-utils');
+const utils = require('@zag-js/utils');
+const pinInput_dom = require('./pin-input.dom.js');
 
-// src/pin-input.machine.ts
-var { and, not } = import_core.guards;
+const { and, not } = core.guards;
 function machine(userContext) {
-  const ctx = (0, import_utils.compact)(userContext);
-  return (0, import_core.createMachine)(
+  const ctx = utils.compact(userContext);
+  return core.createMachine(
     {
       id: "pin-input",
       initial: ctx.autoFocus ? "focused" : "idle",
       context: {
         value: [],
         focusedIndex: -1,
-        placeholder: "\u25CB",
+        placeholder: "○",
         otp: false,
         type: "numeric",
         ...ctx,
@@ -185,22 +144,22 @@ function machine(userContext) {
         setupValue: (ctx2) => {
           if (ctx2.value.length)
             return;
-          const inputs = dom.getElements(ctx2);
+          const inputs = pinInput_dom.dom.getElements(ctx2);
           const emptyValues = Array.from({ length: inputs.length }).fill("");
           assign(ctx2, emptyValues);
         },
         focusInput: (ctx2) => {
-          (0, import_dom_query2.raf)(() => {
+          domQuery.raf(() => {
             if (ctx2.focusedIndex === -1)
               return;
-            dom.getFocusedInputEl(ctx2)?.focus();
+            pinInput_dom.dom.getFocusedInputEl(ctx2)?.focus();
           });
         },
         setInputSelection: (ctx2) => {
-          (0, import_dom_query2.raf)(() => {
+          domQuery.raf(() => {
             if (ctx2.focusedIndex === -1)
               return;
-            const input = dom.getFocusedInputEl(ctx2);
+            const input = pinInput_dom.dom.getFocusedInputEl(ctx2);
             const length = input.value.length;
             input.selectionStart = ctx2.selectOnFocus ? 0 : length;
             input.selectionEnd = length;
@@ -215,8 +174,8 @@ function machine(userContext) {
           ctx2.onChange?.({ value: Array.from(ctx2.value) });
         },
         dispatchInputEvent: (ctx2) => {
-          const inputEl = dom.getHiddenInputEl(ctx2);
-          (0, import_form_utils.dispatchInputValueEvent)(inputEl, { value: ctx2.valueAsString });
+          const inputEl = pinInput_dom.dom.getHiddenInputEl(ctx2);
+          formUtils.dispatchInputValueEvent(inputEl, { value: ctx2.valueAsString });
         },
         invokeOnInvalid: (ctx2, evt) => {
           ctx2.onInvalid?.({ value: evt.value, index: ctx2.focusedIndex });
@@ -234,19 +193,19 @@ function machine(userContext) {
           ctx2.value[ctx2.focusedIndex] = getNextValue(ctx2.focusedValue, evt.value);
         },
         syncInputValue(ctx2, evt) {
-          const input = dom.getInputEl(ctx2, evt.index.toString());
+          const input = pinInput_dom.dom.getInputEl(ctx2, evt.index.toString());
           if (!input)
             return;
           input.value = ctx2.value[evt.index];
         },
         syncInputElements(ctx2) {
-          const inputs = dom.getElements(ctx2);
+          const inputs = pinInput_dom.dom.getElements(ctx2);
           inputs.forEach((input, index) => {
             input.value = ctx2.value[index];
           });
         },
         setPastedValue(ctx2, evt) {
-          (0, import_dom_query2.raf)(() => {
+          domQuery.raf(() => {
             const startIndex = ctx2.focusedValue ? 1 : 0;
             const value = evt.value.substring(startIndex, startIndex + ctx2.valueLength);
             assign(ctx2, value);
@@ -263,7 +222,7 @@ function machine(userContext) {
           ctx2.value[ctx2.focusedIndex] = "";
         },
         resetFocusedValue: (ctx2) => {
-          const input = dom.getFocusedInputEl(ctx2);
+          const input = pinInput_dom.dom.getFocusedInputEl(ctx2);
           input.value = ctx2.focusedValue;
         },
         setFocusIndexToFirst: (ctx2) => {
@@ -276,7 +235,7 @@ function machine(userContext) {
           ctx2.focusedIndex = Math.max(ctx2.focusedIndex - 1, 0);
         },
         setLastValueFocusIndex: (ctx2) => {
-          (0, import_dom_query2.raf)(() => {
+          domQuery.raf(() => {
             ctx2.focusedIndex = Math.min(ctx2.filledValueLength, ctx2.valueLength - 1);
           });
         },
@@ -286,21 +245,21 @@ function machine(userContext) {
         blurFocusedInputIfNeeded(ctx2) {
           if (!ctx2.blurOnComplete)
             return;
-          (0, import_dom_query2.raf)(() => {
-            dom.getFocusedInputEl(ctx2)?.blur();
+          domQuery.raf(() => {
+            pinInput_dom.dom.getFocusedInputEl(ctx2)?.blur();
           });
         },
         requestFormSubmit(ctx2) {
           if (!ctx2.name || !ctx2.isValueComplete)
             return;
-          const input = dom.getHiddenInputEl(ctx2);
+          const input = pinInput_dom.dom.getHiddenInputEl(ctx2);
           input?.form?.requestSubmit();
         }
       }
     }
   );
 }
-var REGEX = {
+const REGEX = {
   numeric: /^[0-9]+$/,
   alphabetic: /^[A-Za-z]+$/,
   alphanumeric: /^[a-zA-Z0-9]+$/i
@@ -324,7 +283,5 @@ function getNextValue(current, next) {
     nextValue = next[0];
   return nextValue;
 }
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  machine
-});
+
+exports.machine = machine;

package/dist/pin-input.machine.mjs

@@ -1,7 +1,283 @@
-import {
-  machine
-} from "./chunk-RXPBAYJD.mjs";
-import "./chunk-CPXMEVTH.mjs";
-export {
-  machine
+import { createMachine, guards } from '@zag-js/core';
+import { raf } from '@zag-js/dom-query';
+import { dispatchInputValueEvent } from '@zag-js/form-utils';
+import { compact } from '@zag-js/utils';
+import { dom } from './pin-input.dom.mjs';
+
+const { and, not } = guards;
+function machine(userContext) {
+  const ctx = compact(userContext);
+  return createMachine(
+    {
+      id: "pin-input",
+      initial: ctx.autoFocus ? "focused" : "idle",
+      context: {
+        value: [],
+        focusedIndex: -1,
+        placeholder: "○",
+        otp: false,
+        type: "numeric",
+        ...ctx,
+        translations: {
+          inputLabel: (index, length) => `pin code ${index + 1} of ${length}`,
+          ...ctx.translations
+        }
+      },
+      computed: {
+        valueLength: (ctx2) => ctx2.value.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]
+      },
+      watch: {
+        focusedIndex: ["focusInput", "setInputSelection"],
+        value: ["dispatchInputEvent", "syncInputElements"],
+        isValueComplete: ["invokeOnComplete", "blurFocusedInputIfNeeded"]
+      },
+      entry: ctx.autoFocus ? ["setupValue", "setFocusIndexToFirst"] : ["setupValue"],
+      on: {
+        SET_VALUE: [
+          {
+            guard: "hasIndex",
+            actions: ["setValueAtIndex", "invokeOnChange"]
+          },
+          { actions: ["setValue", "invokeOnChange"] }
+        ],
+        CLEAR_VALUE: [
+          {
+            guard: "isDisabled",
+            actions: ["clearValue", "invokeOnChange"]
+          },
+          {
+            actions: ["clearValue", "invokeOnChange", "setFocusIndexToFirst"]
+          }
+        ]
+      },
+      states: {
+        idle: {
+          on: {
+            FOCUS: {
+              target: "focused",
+              actions: "setFocusedIndex"
+            }
+          }
+        },
+        focused: {
+          on: {
+            INPUT: [
+              {
+                guard: and("isFinalValue", "isValidValue"),
+                actions: ["setFocusedValue", "invokeOnChange", "syncInputValue"]
+              },
+              {
+                guard: "isValidValue",
+                actions: ["setFocusedValue", "invokeOnChange", "setNextFocusedIndex", "syncInputValue"]
+              }
+            ],
+            PASTE: [
+              {
+                guard: "isValidValue",
+                actions: ["setPastedValue", "invokeOnChange", "setLastValueFocusIndex"]
+              },
+              { actions: ["resetFocusedValue", "invokeOnChange"] }
+            ],
+            BLUR: {
+              target: "idle",
+              actions: "clearFocusedIndex"
+            },
+            DELETE: {
+              guard: "hasValue",
+              actions: ["clearFocusedValue", "invokeOnChange"]
+            },
+            ARROW_LEFT: {
+              actions: "setPrevFocusedIndex"
+            },
+            ARROW_RIGHT: {
+              actions: "setNextFocusedIndex"
+            },
+            BACKSPACE: [
+              {
+                guard: "hasValue",
+                actions: ["clearFocusedValue", "invokeOnChange"]
+              },
+              {
+                actions: ["setPrevFocusedIndex", "clearFocusedValue", "invokeOnChange"]
+              }
+            ],
+            ENTER: {
+              guard: "isValueComplete",
+              actions: "requestFormSubmit"
+            },
+            KEY_DOWN: {
+              guard: not("isValidValue"),
+              actions: ["preventDefault", "invokeOnInvalid"]
+            }
+          }
+        }
+      }
+    },
+    {
+      guards: {
+        autoFocus: (ctx2) => !!ctx2.autoFocus,
+        isValueEmpty: (_ctx, evt) => evt.value === "",
+        hasValue: (ctx2) => ctx2.value[ctx2.focusedIndex] !== "",
+        isValueComplete: (ctx2) => ctx2.isValueComplete,
+        isValidValue: (ctx2, evt) => {
+          if (!ctx2.pattern)
+            return isValidType(evt.value, ctx2.type);
+          const regex = new RegExp(ctx2.pattern, "g");
+          return regex.test(evt.value);
+        },
+        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
+      },
+      actions: {
+        setupValue: (ctx2) => {
+          if (ctx2.value.length)
+            return;
+          const inputs = dom.getElements(ctx2);
+          const emptyValues = Array.from({ length: inputs.length }).fill("");
+          assign(ctx2, emptyValues);
+        },
+        focusInput: (ctx2) => {
+          raf(() => {
+            if (ctx2.focusedIndex === -1)
+              return;
+            dom.getFocusedInputEl(ctx2)?.focus();
+          });
+        },
+        setInputSelection: (ctx2) => {
+          raf(() => {
+            if (ctx2.focusedIndex === -1)
+              return;
+            const input = dom.getFocusedInputEl(ctx2);
+            const length = input.value.length;
+            input.selectionStart = ctx2.selectOnFocus ? 0 : length;
+            input.selectionEnd = length;
+          });
+        },
+        invokeOnComplete: (ctx2) => {
+          if (!ctx2.isValueComplete)
+            return;
+          ctx2.onComplete?.({ value: Array.from(ctx2.value), valueAsString: ctx2.valueAsString });
+        },
+        invokeOnChange: (ctx2) => {
+          ctx2.onChange?.({ value: Array.from(ctx2.value) });
+        },
+        dispatchInputEvent: (ctx2) => {
+          const inputEl = dom.getHiddenInputEl(ctx2);
+          dispatchInputValueEvent(inputEl, { value: ctx2.valueAsString });
+        },
+        invokeOnInvalid: (ctx2, evt) => {
+          ctx2.onInvalid?.({ value: evt.value, index: ctx2.focusedIndex });
+        },
+        clearFocusedIndex: (ctx2) => {
+          ctx2.focusedIndex = -1;
+        },
+        setValue: (ctx2, evt) => {
+          assign(ctx2, evt.value);
+        },
+        setFocusedIndex: (ctx2, evt) => {
+          ctx2.focusedIndex = evt.index;
+        },
+        setFocusedValue: (ctx2, evt) => {
+          ctx2.value[ctx2.focusedIndex] = getNextValue(ctx2.focusedValue, evt.value);
+        },
+        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);
+          inputs.forEach((input, index) => {
+            input.value = ctx2.value[index];
+          });
+        },
+        setPastedValue(ctx2, evt) {
+          raf(() => {
+            const startIndex = ctx2.focusedValue ? 1 : 0;
+            const value = evt.value.substring(startIndex, startIndex + ctx2.valueLength);
+            assign(ctx2, value);
+          });
+        },
+        setValueAtIndex: (ctx2, evt) => {
+          ctx2.value[evt.index] = getNextValue(ctx2.focusedValue, evt.value);
+        },
+        clearValue: (ctx2) => {
+          const nextValue = Array.from({ length: ctx2.valueLength }).fill("");
+          assign(ctx2, nextValue);
+        },
+        clearFocusedValue: (ctx2) => {
+          ctx2.value[ctx2.focusedIndex] = "";
+        },
+        resetFocusedValue: (ctx2) => {
+          const input = dom.getFocusedInputEl(ctx2);
+          input.value = ctx2.focusedValue;
+        },
+        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) => {
+          raf(() => {
+            ctx2.focusedIndex = Math.min(ctx2.filledValueLength, ctx2.valueLength - 1);
+          });
+        },
+        preventDefault(_, evt) {
+          evt.preventDefault();
+        },
+        blurFocusedInputIfNeeded(ctx2) {
+          if (!ctx2.blurOnComplete)
+            return;
+          raf(() => {
+            dom.getFocusedInputEl(ctx2)?.blur();
+          });
+        },
+        requestFormSubmit(ctx2) {
+          if (!ctx2.name || !ctx2.isValueComplete)
+            return;
+          const input = dom.getHiddenInputEl(ctx2);
+          input?.form?.requestSubmit();
+        }
+      }
+    }
+  );
+}
+const REGEX = {
+  numeric: /^[0-9]+$/,
+  alphabetic: /^[A-Za-z]+$/,
+  alphanumeric: /^[a-zA-Z0-9]+$/i
 };
+function isValidType(value, type) {
+  if (!type)
+    return true;
+  return !!REGEX[type]?.test(value);
+}
+function assign(ctx, value) {
+  const arr = Array.isArray(value) ? value : value.split("").filter(Boolean);
+  arr.forEach((value2, index) => {
+    ctx.value[index] = value2;
+  });
+}
+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 { machine };

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

@@ -1,6 +1,5 @@
-import { StateMachine } from '@zag-js/core';
-import { RequiredBy, DirectionProperty, CommonProperties, Context } from '@zag-js/types';
-
+import type { StateMachine as S } from "@zag-js/core";
+import type { CommonProperties, Context, DirectionProperty, RequiredBy } from "@zag-js/types";
 type IntlTranslations = {
     inputLabel: (index: number, length: number) => string;
 };
@@ -94,7 +93,7 @@ type PublicContext = DirectionProperty & CommonProperties & {
      */
     translations: IntlTranslations;
 };
-type UserDefinedContext = RequiredBy<PublicContext, "id">;
+export type UserDefinedContext = RequiredBy<PublicContext, "id">;
 type ComputedContext = Readonly<{
     /**
      * @computed
@@ -123,11 +122,10 @@ type ComputedContext = Readonly<{
     focusedValue: string;
 }>;
 type PrivateContext = Context<{}>;
-type MachineContext = PublicContext & PrivateContext & ComputedContext;
-type MachineState = {
+export type MachineContext = PublicContext & PrivateContext & ComputedContext;
+export type MachineState = {
     value: "idle" | "focused";
 };
-type State = StateMachine.State<MachineContext, MachineState>;
-type Send = StateMachine.Send<StateMachine.AnyEventObject>;
-
-export { MachineContext, MachineState, Send, State, UserDefinedContext };
+export type State = S.State<MachineContext, MachineState>;
+export type Send = S.Send<S.AnyEventObject>;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/pin-input",
-  "version": "0.10.2",
+  "version": "0.10.4",
   "description": "Core logic for the pin-input widget implemented as a state machine",
   "keywords": [
     "js",
@@ -27,14 +27,14 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/anatomy": "0.10.2",
-    "@zag-js/dom-query": "0.10.2",
-    "@zag-js/dom-event": "0.10.2",
-    "@zag-js/form-utils": "0.10.2",
-    "@zag-js/visually-hidden": "0.10.2",
-    "@zag-js/utils": "0.10.2",
-    "@zag-js/core": "0.10.2",
-    "@zag-js/types": "0.10.2"
+    "@zag-js/anatomy": "0.10.4",
+    "@zag-js/dom-query": "0.10.4",
+    "@zag-js/dom-event": "0.10.4",
+    "@zag-js/form-utils": "0.10.4",
+    "@zag-js/visually-hidden": "0.10.4",
+    "@zag-js/utils": "0.10.4",
+    "@zag-js/core": "0.10.4",
+    "@zag-js/types": "0.10.4"
   },
   "devDependencies": {
     "clean-package": "2.2.0"
@@ -52,13 +52,8 @@
     "./package.json": "./package.json"
   },
   "scripts": {
-    "build-fast": "tsup src",
-    "start": "pnpm build --watch",
-    "build": "tsup src --dts",
-    "test": "jest --config ../../../jest.config.js --rootDir . --passWithNoTests",
+    "build": "vite build -c ../../../vite.config.ts",
     "lint": "eslint src --ext .ts,.tsx",
-    "test-ci": "pnpm test --ci --runInBand",
-    "test-watch": "pnpm test --watch -u",
     "typecheck": "tsc --noEmit"
   }
 }

package/dist/chunk-BJXKBZJG.mjs

@@ -1,9 +0,0 @@
-// src/pin-input.anatomy.ts
-import { createAnatomy } from "@zag-js/anatomy";
-var anatomy = createAnatomy("pinInput").parts("root", "label", "hiddenInput", "input", "control");
-var parts = anatomy.build();
-
-export {
-  anatomy,
-  parts
-};

package/dist/chunk-CPXMEVTH.mjs

@@ -1,23 +0,0 @@
-// src/pin-input.dom.ts
-import { createScope, queryAll } from "@zag-js/dom-query";
-var dom = createScope({
-  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);
-  },
-  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))
-});
-
-export {
-  dom
-};