@zag-js/pin-input 1.34.1 → 1.35.1

package/dist/pin-input.props.mjs

@@ -0,0 +1,35 @@
+// src/pin-input.props.ts
+import { createProps } from "@zag-js/types";
+import { createSplitProps } from "@zag-js/utils";
+var props = createProps()([
+  "autoFocus",
+  "blurOnComplete",
+  "count",
+  "defaultValue",
+  "dir",
+  "disabled",
+  "form",
+  "getRootNode",
+  "id",
+  "ids",
+  "invalid",
+  "mask",
+  "name",
+  "onValueChange",
+  "onValueComplete",
+  "onValueInvalid",
+  "otp",
+  "pattern",
+  "placeholder",
+  "readOnly",
+  "required",
+  "selectOnFocus",
+  "translations",
+  "type",
+  "value"
+]);
+var splitProps = createSplitProps(props);
+export {
+  props,
+  splitProps
+};

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

@@ -0,0 +1,188 @@
+import { Machine, EventObject, Service } from '@zag-js/core';
+import { PropTypes, RequiredBy, DirectionProperty, CommonProperties } from '@zag-js/types';
+
+interface ValueChangeDetails {
+    value: string[];
+    valueAsString: string;
+}
+interface ValueInvalidDetails {
+    value: string;
+    index: number;
+}
+type IntlTranslations = {
+    inputLabel: (index: number, length: number) => string;
+};
+type ElementIds = Partial<{
+    root: string;
+    hiddenInput: string;
+    label: string;
+    control: string;
+    input: (id: string) => string;
+}>;
+interface PinInputProps extends DirectionProperty, CommonProperties {
+    /**
+     * The name of the input element. Useful for form submission.
+     */
+    name?: string | undefined;
+    /**
+     * The associate form of the underlying input element.
+     */
+    form?: string | undefined;
+    /**
+     * The regular expression that the user-entered input value is checked against.
+     */
+    pattern?: string | undefined;
+    /**
+     * The ids of the elements in the pin input. Useful for composition.
+     */
+    ids?: ElementIds | undefined;
+    /**
+     * Whether the inputs are disabled
+     */
+    disabled?: boolean | undefined;
+    /**
+     * The placeholder text for the input
+     * @default "○"
+     */
+    placeholder?: string | undefined;
+    /**
+     * Whether to auto-focus the first input.
+     */
+    autoFocus?: boolean | undefined;
+    /**
+     * Whether the pin input is in the invalid state
+     */
+    invalid?: boolean | undefined;
+    /**
+     * Whether the pin input is required
+     */
+    required?: boolean | undefined;
+    /**
+     * Whether the pin input is in the valid state
+     */
+    readOnly?: boolean | undefined;
+    /**
+     * If `true`, the pin input component signals to its fields that they should
+     * use `autocomplete="one-time-code"`.
+     */
+    otp?: boolean | undefined;
+    /**
+     * The controlled value of the the pin input.
+     */
+    value?: string[] | undefined;
+    /**
+     * The initial value of the the pin input when rendered.
+     * Use when you don't need to control the value of the pin input.
+     */
+    defaultValue?: string[] | undefined;
+    /**
+     * The type of value the pin-input should allow
+     * @default "numeric"
+     */
+    type?: "alphanumeric" | "numeric" | "alphabetic" | undefined;
+    /**
+     * Function called when all inputs have valid values
+     */
+    onValueComplete?: ((details: ValueChangeDetails) => void) | undefined;
+    /**
+     * Function called on input change
+     */
+    onValueChange?: ((details: ValueChangeDetails) => void) | undefined;
+    /**
+     * Function called when an invalid value is entered
+     */
+    onValueInvalid?: ((details: ValueInvalidDetails) => void) | undefined;
+    /**
+     * If `true`, the input's value will be masked just like `type=password`
+     */
+    mask?: boolean | undefined;
+    /**
+     * Whether to blur the input when the value is complete
+     */
+    blurOnComplete?: boolean | undefined;
+    /**
+     * Whether to select input value when input is focused
+     */
+    selectOnFocus?: boolean | undefined;
+    /**
+     * Specifies the localized strings that identifies the accessibility elements and their states
+     */
+    translations?: IntlTranslations | undefined;
+    /**
+     * The number of inputs to render to improve SSR aria attributes.
+     * This will be required in next major version.
+     */
+    count?: number | undefined;
+}
+type PropsWithDefault = "placeholder" | "otp" | "type" | "defaultValue";
+interface PinInputSchema {
+    state: "idle" | "focused";
+    props: RequiredBy<PinInputProps, PropsWithDefault>;
+    context: {
+        value: string[];
+        focusedIndex: number;
+        count: number;
+    };
+    computed: {
+        _value: string[];
+        valueLength: number;
+        filledValueLength: number;
+        isValueComplete: boolean;
+        valueAsString: string;
+        focusedValue: string;
+    };
+    event: EventObject;
+    action: string;
+    effect: string;
+    guard: string;
+}
+type PinInputService = Service<PinInputSchema>;
+type PinInputMachine = Machine<PinInputSchema>;
+interface InputProps {
+    index: number;
+}
+interface PinInputApi<T extends PropTypes = PropTypes> {
+    /**
+     * The value of the input as an array of strings.
+     */
+    value: string[];
+    /**
+     * The value of the input as a string.
+     */
+    valueAsString: string;
+    /**
+     * Whether all inputs are filled.
+     */
+    complete: boolean;
+    /**
+     * The number of inputs to render
+     */
+    count: number;
+    /**
+     * The array of input values.
+     */
+    items: number[];
+    /**
+     * Function to set the value of the inputs.
+     */
+    setValue: (value: string[]) => void;
+    /**
+     * Function to clear the value of the inputs.
+     */
+    clearValue: VoidFunction;
+    /**
+     * Function to set the value of the input at a specific index.
+     */
+    setValueAtIndex: (index: number, value: string) => void;
+    /**
+     * Function to focus the pin-input. This will focus the first input.
+     */
+    focus: VoidFunction;
+    getRootProps: () => T["element"];
+    getLabelProps: () => T["label"];
+    getHiddenInputProps: () => T["input"];
+    getControlProps: () => T["element"];
+    getInputProps: (props: InputProps) => T["input"];
+}
+
+export type { ElementIds, InputProps, IntlTranslations, PinInputApi, PinInputMachine, PinInputProps, PinInputSchema, PinInputService, ValueChangeDetails, ValueInvalidDetails };

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

@@ -0,0 +1,188 @@
+import { Machine, EventObject, Service } from '@zag-js/core';
+import { PropTypes, RequiredBy, DirectionProperty, CommonProperties } from '@zag-js/types';
+
+interface ValueChangeDetails {
+    value: string[];
+    valueAsString: string;
+}
+interface ValueInvalidDetails {
+    value: string;
+    index: number;
+}
+type IntlTranslations = {
+    inputLabel: (index: number, length: number) => string;
+};
+type ElementIds = Partial<{
+    root: string;
+    hiddenInput: string;
+    label: string;
+    control: string;
+    input: (id: string) => string;
+}>;
+interface PinInputProps extends DirectionProperty, CommonProperties {
+    /**
+     * The name of the input element. Useful for form submission.
+     */
+    name?: string | undefined;
+    /**
+     * The associate form of the underlying input element.
+     */
+    form?: string | undefined;
+    /**
+     * The regular expression that the user-entered input value is checked against.
+     */
+    pattern?: string | undefined;
+    /**
+     * The ids of the elements in the pin input. Useful for composition.
+     */
+    ids?: ElementIds | undefined;
+    /**
+     * Whether the inputs are disabled
+     */
+    disabled?: boolean | undefined;
+    /**
+     * The placeholder text for the input
+     * @default "○"
+     */
+    placeholder?: string | undefined;
+    /**
+     * Whether to auto-focus the first input.
+     */
+    autoFocus?: boolean | undefined;
+    /**
+     * Whether the pin input is in the invalid state
+     */
+    invalid?: boolean | undefined;
+    /**
+     * Whether the pin input is required
+     */
+    required?: boolean | undefined;
+    /**
+     * Whether the pin input is in the valid state
+     */
+    readOnly?: boolean | undefined;
+    /**
+     * If `true`, the pin input component signals to its fields that they should
+     * use `autocomplete="one-time-code"`.
+     */
+    otp?: boolean | undefined;
+    /**
+     * The controlled value of the the pin input.
+     */
+    value?: string[] | undefined;
+    /**
+     * The initial value of the the pin input when rendered.
+     * Use when you don't need to control the value of the pin input.
+     */
+    defaultValue?: string[] | undefined;
+    /**
+     * The type of value the pin-input should allow
+     * @default "numeric"
+     */
+    type?: "alphanumeric" | "numeric" | "alphabetic" | undefined;
+    /**
+     * Function called when all inputs have valid values
+     */
+    onValueComplete?: ((details: ValueChangeDetails) => void) | undefined;
+    /**
+     * Function called on input change
+     */
+    onValueChange?: ((details: ValueChangeDetails) => void) | undefined;
+    /**
+     * Function called when an invalid value is entered
+     */
+    onValueInvalid?: ((details: ValueInvalidDetails) => void) | undefined;
+    /**
+     * If `true`, the input's value will be masked just like `type=password`
+     */
+    mask?: boolean | undefined;
+    /**
+     * Whether to blur the input when the value is complete
+     */
+    blurOnComplete?: boolean | undefined;
+    /**
+     * Whether to select input value when input is focused
+     */
+    selectOnFocus?: boolean | undefined;
+    /**
+     * Specifies the localized strings that identifies the accessibility elements and their states
+     */
+    translations?: IntlTranslations | undefined;
+    /**
+     * The number of inputs to render to improve SSR aria attributes.
+     * This will be required in next major version.
+     */
+    count?: number | undefined;
+}
+type PropsWithDefault = "placeholder" | "otp" | "type" | "defaultValue";
+interface PinInputSchema {
+    state: "idle" | "focused";
+    props: RequiredBy<PinInputProps, PropsWithDefault>;
+    context: {
+        value: string[];
+        focusedIndex: number;
+        count: number;
+    };
+    computed: {
+        _value: string[];
+        valueLength: number;
+        filledValueLength: number;
+        isValueComplete: boolean;
+        valueAsString: string;
+        focusedValue: string;
+    };
+    event: EventObject;
+    action: string;
+    effect: string;
+    guard: string;
+}
+type PinInputService = Service<PinInputSchema>;
+type PinInputMachine = Machine<PinInputSchema>;
+interface InputProps {
+    index: number;
+}
+interface PinInputApi<T extends PropTypes = PropTypes> {
+    /**
+     * The value of the input as an array of strings.
+     */
+    value: string[];
+    /**
+     * The value of the input as a string.
+     */
+    valueAsString: string;
+    /**
+     * Whether all inputs are filled.
+     */
+    complete: boolean;
+    /**
+     * The number of inputs to render
+     */
+    count: number;
+    /**
+     * The array of input values.
+     */
+    items: number[];
+    /**
+     * Function to set the value of the inputs.
+     */
+    setValue: (value: string[]) => void;
+    /**
+     * Function to clear the value of the inputs.
+     */
+    clearValue: VoidFunction;
+    /**
+     * Function to set the value of the input at a specific index.
+     */
+    setValueAtIndex: (index: number, value: string) => void;
+    /**
+     * Function to focus the pin-input. This will focus the first input.
+     */
+    focus: VoidFunction;
+    getRootProps: () => T["element"];
+    getLabelProps: () => T["label"];
+    getHiddenInputProps: () => T["input"];
+    getControlProps: () => T["element"];
+    getInputProps: (props: InputProps) => T["input"];
+}
+
+export type { ElementIds, InputProps, IntlTranslations, PinInputApi, PinInputMachine, PinInputProps, PinInputSchema, PinInputService, ValueChangeDetails, ValueInvalidDetails };

package/dist/pin-input.types.js

@@ -0,0 +1,18 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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.types.ts
+var pin_input_types_exports = {};
+module.exports = __toCommonJS(pin_input_types_exports);

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

@@ -0,0 +1,10 @@
+declare const REGEX: {
+    numeric: RegExp;
+    alphabetic: RegExp;
+    alphanumeric: RegExp;
+};
+type PinInputType = keyof typeof REGEX;
+declare function isValidType(type: string, value: string): boolean;
+declare function isValidValue(value: string, type: PinInputType, pattern?: string): boolean;
+
+export { isValidType, isValidValue };

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

@@ -0,0 +1,10 @@
+declare const REGEX: {
+    numeric: RegExp;
+    alphabetic: RegExp;
+    alphanumeric: RegExp;
+};
+type PinInputType = keyof typeof REGEX;
+declare function isValidType(type: string, value: string): boolean;
+declare function isValidValue(value: string, type: PinInputType, pattern?: string): boolean;
+
+export { isValidType, isValidValue };

package/dist/pin-input.utils.js

@@ -0,0 +1,45 @@
+"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.utils.ts
+var pin_input_utils_exports = {};
+__export(pin_input_utils_exports, {
+  isValidType: () => isValidType,
+  isValidValue: () => isValidValue
+});
+module.exports = __toCommonJS(pin_input_utils_exports);
+var REGEX = {
+  numeric: /^[0-9]+$/,
+  alphabetic: /^[A-Za-z]+$/,
+  alphanumeric: /^[a-zA-Z0-9]+$/i
+};
+function isValidType(type, value) {
+  if (!type) return true;
+  return !!REGEX[type]?.test(value);
+}
+function isValidValue(value, type, pattern) {
+  if (!pattern) return isValidType(type, value);
+  const regex = new RegExp(pattern, "g");
+  return regex.test(value);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  isValidType,
+  isValidValue
+});

package/dist/pin-input.utils.mjs

@@ -0,0 +1,19 @@
+// src/pin-input.utils.ts
+var REGEX = {
+  numeric: /^[0-9]+$/,
+  alphabetic: /^[A-Za-z]+$/,
+  alphanumeric: /^[a-zA-Z0-9]+$/i
+};
+function isValidType(type, value) {
+  if (!type) return true;
+  return !!REGEX[type]?.test(value);
+}
+function isValidValue(value, type, pattern) {
+  if (!pattern) return isValidType(type, value);
+  const regex = new RegExp(pattern, "g");
+  return regex.test(value);
+}
+export {
+  isValidType,
+  isValidValue
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/pin-input",
-  "version": "1.34.1",
+  "version": "1.35.1",
   "description": "Core logic for the pin-input widget implemented as a state machine",
   "keywords": [
     "js",
@@ -26,16 +26,16 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/anatomy": "1.34.1",
-    "@zag-js/dom-query": "1.34.1",
-    "@zag-js/utils": "1.34.1",
-    "@zag-js/core": "1.34.1",
-    "@zag-js/types": "1.34.1"
+    "@zag-js/anatomy": "1.35.1",
+    "@zag-js/dom-query": "1.35.1",
+    "@zag-js/utils": "1.35.1",
+    "@zag-js/core": "1.35.1",
+    "@zag-js/types": "1.35.1"
   },
   "devDependencies": {
     "clean-package": "2.2.0"
   },
-  "clean-package": "../../../clean-package.config.json",
+  "clean-package": "./clean-package.config.json",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
@@ -50,6 +50,16 @@
         "default": "./dist/index.js"
       }
     },
+    "./anatomy": {
+      "import": {
+        "types": "./dist/pin-input.anatomy.d.mts",
+        "default": "./dist/pin-input.anatomy.mjs"
+      },
+      "require": {
+        "types": "./dist/pin-input.anatomy.d.ts",
+        "default": "./dist/pin-input.anatomy.js"
+      }
+    },
     "./package.json": "./package.json"
   },
   "scripts": {