@zag-js/pin-input 1.34.1 → 1.35.0

package/dist/pin-input.connect.js

@@ -0,0 +1,235 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/pin-input.connect.ts
+var pin_input_connect_exports = {};
+__export(pin_input_connect_exports, {
+  connect: () => connect
+});
+module.exports = __toCommonJS(pin_input_connect_exports);
+var import_dom_query = require("@zag-js/dom-query");
+var import_utils = require("@zag-js/utils");
+var import_pin_input = require("./pin-input.anatomy.cjs");
+var dom = __toESM(require("./pin-input.dom.cjs"));
+var import_pin_input2 = require("./pin-input.utils.cjs");
+function connect(service, normalize) {
+  const { send, context, computed, prop, scope } = service;
+  const complete = computed("isValueComplete");
+  const disabled = !!prop("disabled");
+  const readOnly = !!prop("readOnly");
+  const invalid = !!prop("invalid");
+  const required = !!prop("required");
+  const translations = prop("translations");
+  const focusedIndex = context.get("focusedIndex");
+  function focus() {
+    dom.getFirstInputEl(scope)?.focus();
+  }
+  return {
+    focus,
+    count: context.get("count"),
+    items: Array.from({ length: context.get("count") }).map((_, i) => i),
+    value: context.get("value"),
+    valueAsString: computed("valueAsString"),
+    complete,
+    setValue(value) {
+      if (!Array.isArray(value)) {
+        (0, import_utils.invariant)("[pin-input/setValue] value must be an array");
+      }
+      send({ type: "VALUE.SET", value });
+    },
+    clearValue() {
+      send({ type: "VALUE.CLEAR" });
+    },
+    setValueAtIndex(index, value) {
+      send({ type: "VALUE.SET", value, index });
+    },
+    getRootProps() {
+      return normalize.element({
+        dir: prop("dir"),
+        ...import_pin_input.parts.root.attrs,
+        id: dom.getRootId(scope),
+        "data-invalid": (0, import_dom_query.dataAttr)(invalid),
+        "data-disabled": (0, import_dom_query.dataAttr)(disabled),
+        "data-complete": (0, import_dom_query.dataAttr)(complete),
+        "data-readonly": (0, import_dom_query.dataAttr)(readOnly)
+      });
+    },
+    getLabelProps() {
+      return normalize.label({
+        ...import_pin_input.parts.label.attrs,
+        dir: prop("dir"),
+        htmlFor: dom.getHiddenInputId(scope),
+        id: dom.getLabelId(scope),
+        "data-invalid": (0, import_dom_query.dataAttr)(invalid),
+        "data-disabled": (0, import_dom_query.dataAttr)(disabled),
+        "data-complete": (0, import_dom_query.dataAttr)(complete),
+        "data-required": (0, import_dom_query.dataAttr)(required),
+        "data-readonly": (0, import_dom_query.dataAttr)(readOnly),
+        onClick(event) {
+          event.preventDefault();
+          focus();
+        }
+      });
+    },
+    getHiddenInputProps() {
+      return normalize.input({
+        "aria-hidden": true,
+        type: "text",
+        tabIndex: -1,
+        id: dom.getHiddenInputId(scope),
+        readOnly,
+        disabled,
+        required,
+        name: prop("name"),
+        form: prop("form"),
+        style: import_dom_query.visuallyHiddenStyle,
+        maxLength: computed("valueLength"),
+        defaultValue: computed("valueAsString")
+      });
+    },
+    getControlProps() {
+      return normalize.element({
+        ...import_pin_input.parts.control.attrs,
+        dir: prop("dir"),
+        id: dom.getControlId(scope)
+      });
+    },
+    getInputProps(props) {
+      const { index } = props;
+      const inputType = prop("type") === "numeric" ? "tel" : "text";
+      return normalize.input({
+        ...import_pin_input.parts.input.attrs,
+        dir: prop("dir"),
+        disabled,
+        "data-disabled": (0, import_dom_query.dataAttr)(disabled),
+        "data-complete": (0, import_dom_query.dataAttr)(complete),
+        id: dom.getInputId(scope, index.toString()),
+        "data-index": index,
+        "data-ownedby": dom.getRootId(scope),
+        "aria-label": translations?.inputLabel?.(index, computed("valueLength")),
+        inputMode: prop("otp") || prop("type") === "numeric" ? "numeric" : "text",
+        "aria-invalid": (0, import_dom_query.ariaAttr)(invalid),
+        "data-invalid": (0, import_dom_query.dataAttr)(invalid),
+        type: prop("mask") ? "password" : inputType,
+        defaultValue: context.get("value")[index] || "",
+        readOnly,
+        autoCapitalize: "none",
+        autoComplete: prop("otp") ? "one-time-code" : "off",
+        placeholder: focusedIndex === index ? "" : prop("placeholder"),
+        onPaste(event) {
+          const pastedValue = event.clipboardData?.getData("text/plain");
+          if (!pastedValue) return;
+          const isValid = (0, import_pin_input2.isValidValue)(pastedValue, prop("type"), prop("pattern"));
+          if (!isValid) {
+            send({ type: "VALUE.INVALID", value: pastedValue });
+            event.preventDefault();
+            return;
+          }
+          event.preventDefault();
+          send({ type: "INPUT.PASTE", value: pastedValue });
+        },
+        onBeforeInput(event) {
+          try {
+            const value = (0, import_dom_query.getBeforeInputValue)(event);
+            const isValid = (0, import_pin_input2.isValidValue)(value, prop("type"), prop("pattern"));
+            if (!isValid) {
+              send({ type: "VALUE.INVALID", value });
+              event.preventDefault();
+            }
+            if (value.length > 1) {
+              event.currentTarget.setSelectionRange(0, 1, "forward");
+            }
+          } catch {
+          }
+        },
+        onChange(event) {
+          const evt = (0, import_dom_query.getNativeEvent)(event);
+          const { value } = event.currentTarget;
+          if (evt.inputType === "insertFromPaste") {
+            event.currentTarget.value = value[0] || "";
+            return;
+          }
+          if (value.length > 2) {
+            send({ type: "INPUT.PASTE", value });
+            event.currentTarget.value = value[0];
+            event.preventDefault();
+            return;
+          }
+          if (evt.inputType === "deleteContentBackward") {
+            send({ type: "INPUT.BACKSPACE" });
+            return;
+          }
+          send({ type: "INPUT.CHANGE", value, index });
+        },
+        onKeyDown(event) {
+          if (event.defaultPrevented) return;
+          if ((0, import_dom_query.isComposingEvent)(event)) return;
+          if ((0, import_dom_query.isModifierKey)(event)) return;
+          const keyMap = {
+            Backspace() {
+              send({ type: "INPUT.BACKSPACE" });
+            },
+            Delete() {
+              send({ type: "INPUT.DELETE" });
+            },
+            ArrowLeft() {
+              send({ type: "INPUT.ARROW_LEFT" });
+            },
+            ArrowRight() {
+              send({ type: "INPUT.ARROW_RIGHT" });
+            },
+            Enter() {
+              send({ type: "INPUT.ENTER" });
+            }
+          };
+          const exec = keyMap[(0, import_dom_query.getEventKey)(event, {
+            dir: prop("dir"),
+            orientation: "horizontal"
+          })];
+          if (exec) {
+            exec(event);
+            event.preventDefault();
+          }
+        },
+        onFocus() {
+          send({ type: "INPUT.FOCUS", index });
+        },
+        onBlur(event) {
+          const target = event.relatedTarget;
+          if ((0, import_dom_query.isHTMLElement)(target) && target.dataset.ownedby === dom.getRootId(scope)) return;
+          send({ type: "INPUT.BLUR", index });
+        }
+      });
+    }
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  connect
+});

package/dist/pin-input.connect.mjs

@@ -0,0 +1,210 @@
+// src/pin-input.connect.ts
+import {
+  ariaAttr,
+  dataAttr,
+  getBeforeInputValue,
+  getEventKey,
+  getNativeEvent,
+  isComposingEvent,
+  isHTMLElement,
+  isModifierKey,
+  visuallyHiddenStyle
+} from "@zag-js/dom-query";
+import { invariant } from "@zag-js/utils";
+import { parts } from "./pin-input.anatomy.mjs";
+import * as dom from "./pin-input.dom.mjs";
+import { isValidValue } from "./pin-input.utils.mjs";
+function connect(service, normalize) {
+  const { send, context, computed, prop, scope } = service;
+  const complete = computed("isValueComplete");
+  const disabled = !!prop("disabled");
+  const readOnly = !!prop("readOnly");
+  const invalid = !!prop("invalid");
+  const required = !!prop("required");
+  const translations = prop("translations");
+  const focusedIndex = context.get("focusedIndex");
+  function focus() {
+    dom.getFirstInputEl(scope)?.focus();
+  }
+  return {
+    focus,
+    count: context.get("count"),
+    items: Array.from({ length: context.get("count") }).map((_, i) => i),
+    value: context.get("value"),
+    valueAsString: computed("valueAsString"),
+    complete,
+    setValue(value) {
+      if (!Array.isArray(value)) {
+        invariant("[pin-input/setValue] value must be an array");
+      }
+      send({ type: "VALUE.SET", value });
+    },
+    clearValue() {
+      send({ type: "VALUE.CLEAR" });
+    },
+    setValueAtIndex(index, value) {
+      send({ type: "VALUE.SET", value, index });
+    },
+    getRootProps() {
+      return normalize.element({
+        dir: prop("dir"),
+        ...parts.root.attrs,
+        id: dom.getRootId(scope),
+        "data-invalid": dataAttr(invalid),
+        "data-disabled": dataAttr(disabled),
+        "data-complete": dataAttr(complete),
+        "data-readonly": dataAttr(readOnly)
+      });
+    },
+    getLabelProps() {
+      return normalize.label({
+        ...parts.label.attrs,
+        dir: prop("dir"),
+        htmlFor: dom.getHiddenInputId(scope),
+        id: dom.getLabelId(scope),
+        "data-invalid": dataAttr(invalid),
+        "data-disabled": dataAttr(disabled),
+        "data-complete": dataAttr(complete),
+        "data-required": dataAttr(required),
+        "data-readonly": dataAttr(readOnly),
+        onClick(event) {
+          event.preventDefault();
+          focus();
+        }
+      });
+    },
+    getHiddenInputProps() {
+      return normalize.input({
+        "aria-hidden": true,
+        type: "text",
+        tabIndex: -1,
+        id: dom.getHiddenInputId(scope),
+        readOnly,
+        disabled,
+        required,
+        name: prop("name"),
+        form: prop("form"),
+        style: visuallyHiddenStyle,
+        maxLength: computed("valueLength"),
+        defaultValue: computed("valueAsString")
+      });
+    },
+    getControlProps() {
+      return normalize.element({
+        ...parts.control.attrs,
+        dir: prop("dir"),
+        id: dom.getControlId(scope)
+      });
+    },
+    getInputProps(props) {
+      const { index } = props;
+      const inputType = prop("type") === "numeric" ? "tel" : "text";
+      return normalize.input({
+        ...parts.input.attrs,
+        dir: prop("dir"),
+        disabled,
+        "data-disabled": dataAttr(disabled),
+        "data-complete": dataAttr(complete),
+        id: dom.getInputId(scope, index.toString()),
+        "data-index": index,
+        "data-ownedby": dom.getRootId(scope),
+        "aria-label": translations?.inputLabel?.(index, computed("valueLength")),
+        inputMode: prop("otp") || prop("type") === "numeric" ? "numeric" : "text",
+        "aria-invalid": ariaAttr(invalid),
+        "data-invalid": dataAttr(invalid),
+        type: prop("mask") ? "password" : inputType,
+        defaultValue: context.get("value")[index] || "",
+        readOnly,
+        autoCapitalize: "none",
+        autoComplete: prop("otp") ? "one-time-code" : "off",
+        placeholder: focusedIndex === index ? "" : prop("placeholder"),
+        onPaste(event) {
+          const pastedValue = event.clipboardData?.getData("text/plain");
+          if (!pastedValue) return;
+          const isValid = isValidValue(pastedValue, prop("type"), prop("pattern"));
+          if (!isValid) {
+            send({ type: "VALUE.INVALID", value: pastedValue });
+            event.preventDefault();
+            return;
+          }
+          event.preventDefault();
+          send({ type: "INPUT.PASTE", value: pastedValue });
+        },
+        onBeforeInput(event) {
+          try {
+            const value = getBeforeInputValue(event);
+            const isValid = isValidValue(value, prop("type"), prop("pattern"));
+            if (!isValid) {
+              send({ type: "VALUE.INVALID", value });
+              event.preventDefault();
+            }
+            if (value.length > 1) {
+              event.currentTarget.setSelectionRange(0, 1, "forward");
+            }
+          } catch {
+          }
+        },
+        onChange(event) {
+          const evt = getNativeEvent(event);
+          const { value } = event.currentTarget;
+          if (evt.inputType === "insertFromPaste") {
+            event.currentTarget.value = value[0] || "";
+            return;
+          }
+          if (value.length > 2) {
+            send({ type: "INPUT.PASTE", value });
+            event.currentTarget.value = value[0];
+            event.preventDefault();
+            return;
+          }
+          if (evt.inputType === "deleteContentBackward") {
+            send({ type: "INPUT.BACKSPACE" });
+            return;
+          }
+          send({ type: "INPUT.CHANGE", value, index });
+        },
+        onKeyDown(event) {
+          if (event.defaultPrevented) return;
+          if (isComposingEvent(event)) return;
+          if (isModifierKey(event)) return;
+          const keyMap = {
+            Backspace() {
+              send({ type: "INPUT.BACKSPACE" });
+            },
+            Delete() {
+              send({ type: "INPUT.DELETE" });
+            },
+            ArrowLeft() {
+              send({ type: "INPUT.ARROW_LEFT" });
+            },
+            ArrowRight() {
+              send({ type: "INPUT.ARROW_RIGHT" });
+            },
+            Enter() {
+              send({ type: "INPUT.ENTER" });
+            }
+          };
+          const exec = keyMap[getEventKey(event, {
+            dir: prop("dir"),
+            orientation: "horizontal"
+          })];
+          if (exec) {
+            exec(event);
+            event.preventDefault();
+          }
+        },
+        onFocus() {
+          send({ type: "INPUT.FOCUS", index });
+        },
+        onBlur(event) {
+          const target = event.relatedTarget;
+          if (isHTMLElement(target) && target.dataset.ownedby === dom.getRootId(scope)) return;
+          send({ type: "INPUT.BLUR", index });
+        }
+      });
+    }
+  };
+}
+export {
+  connect
+};

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

@@ -0,0 +1,16 @@
+import { Scope } from '@zag-js/core';
+
+declare const getRootId: (ctx: Scope) => any;
+declare const getInputId: (ctx: Scope, id: string) => any;
+declare const getHiddenInputId: (ctx: Scope) => any;
+declare const getLabelId: (ctx: Scope) => any;
+declare const getControlId: (ctx: Scope) => any;
+declare const getRootEl: (ctx: Scope) => HTMLElement | null;
+declare const getInputEls: (ctx: Scope) => HTMLInputElement[];
+declare const getInputEl: (ctx: Scope, id: string) => HTMLInputElement | null;
+declare const getInputElAtIndex: (ctx: Scope, index: number) => HTMLInputElement;
+declare const getFirstInputEl: (ctx: Scope) => HTMLInputElement;
+declare const getHiddenInputEl: (ctx: Scope) => HTMLInputElement | null;
+declare const setInputValue: (inputEl: HTMLInputElement, value: string) => void;
+
+export { getControlId, getFirstInputEl, getHiddenInputEl, getHiddenInputId, getInputEl, getInputElAtIndex, getInputEls, getInputId, getLabelId, getRootEl, getRootId, setInputValue };

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

@@ -0,0 +1,16 @@
+import { Scope } from '@zag-js/core';
+
+declare const getRootId: (ctx: Scope) => any;
+declare const getInputId: (ctx: Scope, id: string) => any;
+declare const getHiddenInputId: (ctx: Scope) => any;
+declare const getLabelId: (ctx: Scope) => any;
+declare const getControlId: (ctx: Scope) => any;
+declare const getRootEl: (ctx: Scope) => HTMLElement | null;
+declare const getInputEls: (ctx: Scope) => HTMLInputElement[];
+declare const getInputEl: (ctx: Scope, id: string) => HTMLInputElement | null;
+declare const getInputElAtIndex: (ctx: Scope, index: number) => HTMLInputElement;
+declare const getFirstInputEl: (ctx: Scope) => HTMLInputElement;
+declare const getHiddenInputEl: (ctx: Scope) => HTMLInputElement | null;
+declare const setInputValue: (inputEl: HTMLInputElement, value: string) => void;
+
+export { getControlId, getFirstInputEl, getHiddenInputEl, getHiddenInputId, getInputEl, getInputElAtIndex, getInputEls, getInputId, getLabelId, getRootEl, getRootId, setInputValue };

package/dist/pin-input.dom.js

@@ -0,0 +1,71 @@
+"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);
+
+// src/pin-input.dom.ts
+var pin_input_dom_exports = {};
+__export(pin_input_dom_exports, {
+  getControlId: () => getControlId,
+  getFirstInputEl: () => getFirstInputEl,
+  getHiddenInputEl: () => getHiddenInputEl,
+  getHiddenInputId: () => getHiddenInputId,
+  getInputEl: () => getInputEl,
+  getInputElAtIndex: () => getInputElAtIndex,
+  getInputEls: () => getInputEls,
+  getInputId: () => getInputId,
+  getLabelId: () => getLabelId,
+  getRootEl: () => getRootEl,
+  getRootId: () => getRootId,
+  setInputValue: () => setInputValue
+});
+module.exports = __toCommonJS(pin_input_dom_exports);
+var import_dom_query = require("@zag-js/dom-query");
+var getRootId = (ctx) => ctx.ids?.root ?? `pin-input:${ctx.id}`;
+var getInputId = (ctx, id) => ctx.ids?.input?.(id) ?? `pin-input:${ctx.id}:${id}`;
+var getHiddenInputId = (ctx) => ctx.ids?.hiddenInput ?? `pin-input:${ctx.id}:hidden`;
+var getLabelId = (ctx) => ctx.ids?.label ?? `pin-input:${ctx.id}:label`;
+var getControlId = (ctx) => ctx.ids?.control ?? `pin-input:${ctx.id}:control`;
+var getRootEl = (ctx) => ctx.getById(getRootId(ctx));
+var getInputEls = (ctx) => {
+  const ownerId = CSS.escape(getRootId(ctx));
+  const selector = `input[data-ownedby=${ownerId}]`;
+  return (0, import_dom_query.queryAll)(getRootEl(ctx), selector);
+};
+var getInputEl = (ctx, id) => ctx.getById(getInputId(ctx, id));
+var getInputElAtIndex = (ctx, index) => getInputEls(ctx)[index];
+var getFirstInputEl = (ctx) => getInputEls(ctx)[0];
+var getHiddenInputEl = (ctx) => ctx.getById(getHiddenInputId(ctx));
+var setInputValue = (inputEl, value) => {
+  inputEl.value = value;
+  inputEl.setAttribute("value", value);
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getControlId,
+  getFirstInputEl,
+  getHiddenInputEl,
+  getHiddenInputId,
+  getInputEl,
+  getInputElAtIndex,
+  getInputEls,
+  getInputId,
+  getLabelId,
+  getRootEl,
+  getRootId,
+  setInputValue
+});

package/dist/pin-input.dom.mjs

@@ -0,0 +1,35 @@
+// src/pin-input.dom.ts
+import { queryAll } from "@zag-js/dom-query";
+var getRootId = (ctx) => ctx.ids?.root ?? `pin-input:${ctx.id}`;
+var getInputId = (ctx, id) => ctx.ids?.input?.(id) ?? `pin-input:${ctx.id}:${id}`;
+var getHiddenInputId = (ctx) => ctx.ids?.hiddenInput ?? `pin-input:${ctx.id}:hidden`;
+var getLabelId = (ctx) => ctx.ids?.label ?? `pin-input:${ctx.id}:label`;
+var getControlId = (ctx) => ctx.ids?.control ?? `pin-input:${ctx.id}:control`;
+var getRootEl = (ctx) => ctx.getById(getRootId(ctx));
+var getInputEls = (ctx) => {
+  const ownerId = CSS.escape(getRootId(ctx));
+  const selector = `input[data-ownedby=${ownerId}]`;
+  return queryAll(getRootEl(ctx), selector);
+};
+var getInputEl = (ctx, id) => ctx.getById(getInputId(ctx, id));
+var getInputElAtIndex = (ctx, index) => getInputEls(ctx)[index];
+var getFirstInputEl = (ctx) => getInputEls(ctx)[0];
+var getHiddenInputEl = (ctx) => ctx.getById(getHiddenInputId(ctx));
+var setInputValue = (inputEl, value) => {
+  inputEl.value = value;
+  inputEl.setAttribute("value", value);
+};
+export {
+  getControlId,
+  getFirstInputEl,
+  getHiddenInputEl,
+  getHiddenInputId,
+  getInputEl,
+  getInputElAtIndex,
+  getInputEls,
+  getInputId,
+  getLabelId,
+  getRootEl,
+  getRootId,
+  setInputValue
+};

package/dist/pin-input.machine.d.mts

@@ -0,0 +1,7 @@
+import * as _zag_js_core from '@zag-js/core';
+import { PinInputSchema } from './pin-input.types.mjs';
+import '@zag-js/types';
+
+declare const machine: _zag_js_core.Machine<PinInputSchema>;
+
+export { machine };

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

@@ -0,0 +1,7 @@
+import * as _zag_js_core from '@zag-js/core';
+import { PinInputSchema } from './pin-input.types.js';
+import '@zag-js/types';
+
+declare const machine: _zag_js_core.Machine<PinInputSchema>;
+
+export { machine };