@yamada-ui/pin-input 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Hirotomo Yamada
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,28 @@
+# @yamada-ui/pin-input
+
+## Installation
+
+```sh
+$ pnpm add @yamada-ui/pin-input
+```
+
+or
+
+```sh
+$ yarn add @yamada-ui/pin-input
+```
+
+or
+
+```sh
+$ npm install @yamada-ui/pin-input
+```
+
+## Contribution
+
+Wouldn't you like to contribute? That's amazing! We have prepared a [contribution guide](https://github.com/hirotomoyamada/yamada-ui/blob/main/CONTRIBUTING.md) to assist you.
+
+## Licence
+
+This package is licensed under the terms of the
+[MIT license](https://github.com/hirotomoyamada/yamada-ui/blob/main/LICENSE).

package/dist/chunk-WNHBQS2L.mjs

@@ -0,0 +1,228 @@
+// src/pin-input.tsx
+import {
+  ui,
+  forwardRef,
+  useMultiComponentStyle,
+  omitThemeProps
+} from "@yamada-ui/core";
+import {
+  useFormControlProps,
+  formControlProperties
+} from "@yamada-ui/form-control";
+import { useControllableState } from "@yamada-ui/use-controllable-state";
+import { createDescendant } from "@yamada-ui/use-descendant";
+import {
+  createContext,
+  cx,
+  handlerAll,
+  mergeRefs,
+  pickObject,
+  filterUndefined,
+  getValidChildren
+} from "@yamada-ui/utils";
+import { useCallback, useEffect, useId, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var toArray = (value) => value == null ? void 0 : value.split("");
+var validate = (value, type) => {
+  const NUMERIC_REGEX = /^[0-9]+$/;
+  const ALPHA_NUMERIC_REGEX = /^[a-zA-Z0-9]+$/i;
+  const regex = type === "alphanumeric" ? ALPHA_NUMERIC_REGEX : NUMERIC_REGEX;
+  return regex.test(value);
+};
+var [PinInputProvider, usePinInputContext] = createContext({
+  strict: false,
+  name: "PinInputContext"
+});
+var { DescendantsContextProvider, useDescendants, useDescendant } = createDescendant();
+var PinInput = forwardRef(
+  ({ focusBorderColor, errorBorderColor, ...props }, ref) => {
+    const [styles, mergedProps] = useMultiComponentStyle("PinInput", {
+      focusBorderColor,
+      errorBorderColor,
+      ...props
+    });
+    let {
+      id,
+      className,
+      type = "number",
+      placeholder = "\u25CB",
+      value,
+      defaultValue,
+      autoFocus,
+      manageFocus = true,
+      otp = false,
+      mask,
+      onChange,
+      onComplete,
+      fileds = 4,
+      children,
+      ...rest
+    } = useFormControlProps(omitThemeProps(mergedProps));
+    id = id != null ? id : useId();
+    const descendants = useDescendants();
+    const [moveFocus, setMoveFocus] = useState(true);
+    const [focusedIndex, setFocusedIndex] = useState(-1);
+    useEffect(() => {
+      if (!autoFocus)
+        return;
+      const firstValue = descendants.firstValue();
+      if (!firstValue)
+        return;
+      requestAnimationFrame(() => firstValue.node.focus());
+    }, [autoFocus, descendants]);
+    const [values, setValues] = useControllableState({
+      value: toArray(value),
+      defaultValue: toArray(defaultValue) || [],
+      onChange: (values2) => onChange == null ? void 0 : onChange(values2.join(""))
+    });
+    const focusNext = useCallback(
+      (index) => {
+        if (!moveFocus || !manageFocus)
+          return;
+        const next = descendants.nextValue(index, void 0, false);
+        if (!next)
+          return;
+        requestAnimationFrame(() => next.node.focus());
+      },
+      [descendants, moveFocus, manageFocus]
+    );
+    const setValue = useCallback(
+      (value2, index, isFocus = true) => {
+        var _a;
+        let nextValues = [...values];
+        nextValues[index] = value2;
+        setValues(nextValues);
+        nextValues = nextValues.filter(Boolean);
+        const isComplete = value2 !== "" && nextValues.length === descendants.count() && nextValues.every((value3) => value3 != null && value3 !== "");
+        if (isComplete) {
+          onComplete == null ? void 0 : onComplete(nextValues.join(""));
+          (_a = descendants.value(index)) == null ? void 0 : _a.node.blur();
+        } else if (isFocus) {
+          focusNext(index);
+        }
+      },
+      [values, setValues, descendants, onComplete, focusNext]
+    );
+    const getNextValue = useCallback((value2, eventValue) => {
+      let nextValue = eventValue;
+      if (!(value2 == null ? void 0 : value2.length))
+        return nextValue;
+      if (value2[0] === eventValue.charAt(0)) {
+        nextValue = eventValue.charAt(1);
+      } else if (value2[0] === eventValue.charAt(1)) {
+        nextValue = eventValue.charAt(0);
+      }
+      return nextValue;
+    }, []);
+    const getInputProps = useCallback(
+      ({
+        index,
+        ...props2
+      }) => {
+        const onChange2 = ({ target }) => {
+          var _a;
+          const eventValue = target.value;
+          const currentValue = values[index];
+          const nextValue = getNextValue(currentValue, eventValue);
+          if (nextValue === "") {
+            setValue("", index);
+            return;
+          }
+          if (eventValue.length > 2) {
+            if (!validate(eventValue, type))
+              return;
+            const nextValue2 = eventValue.split("").filter((_, index2) => index2 < descendants.count());
+            setValues(nextValue2);
+            if (nextValue2.length === descendants.count()) {
+              onComplete == null ? void 0 : onComplete(nextValue2.join(""));
+              (_a = descendants.value(index)) == null ? void 0 : _a.node.blur();
+            }
+          } else {
+            if (validate(nextValue, type))
+              setValue(nextValue, index);
+            setMoveFocus(true);
+          }
+        };
+        const onKeyDown = ({ key, target }) => {
+          var _a;
+          if (key !== "Backspace" || !manageFocus)
+            return;
+          if (target.value === "") {
+            const prevInput = descendants.prevValue(index, void 0, false);
+            if (!prevInput)
+              return;
+            setValue("", index - 1, false);
+            (_a = prevInput.node) == null ? void 0 : _a.focus();
+            setMoveFocus(true);
+          } else {
+            setMoveFocus(false);
+          }
+        };
+        const onFocus = () => setFocusedIndex(index);
+        const onBlur = () => setFocusedIndex(-1);
+        return {
+          inputMode: type === "number" ? "numeric" : "text",
+          type: mask ? "password" : type === "number" ? "tel" : "text",
+          ...pickObject(rest, formControlProperties),
+          ...filterUndefined(props2),
+          id: `${id}-${index}`,
+          value: values[index] || "",
+          onChange: handlerAll(props2.onChange, onChange2),
+          onKeyDown: handlerAll(props2.onKeyDown, onKeyDown),
+          onFocus: handlerAll(props2.onFocus, onFocus),
+          onBlur: handlerAll(props2.onBlur, onBlur),
+          autoComplete: otp ? "one-time-code" : "off",
+          placeholder: focusedIndex === index && !rest.readOnly && !props2.readOnly ? "" : placeholder
+        };
+      },
+      [
+        descendants,
+        focusedIndex,
+        getNextValue,
+        id,
+        manageFocus,
+        mask,
+        onComplete,
+        otp,
+        placeholder,
+        rest,
+        setValue,
+        setValues,
+        type,
+        values
+      ]
+    );
+    const css = {
+      display: "flex",
+      alignItems: "center",
+      ...styles.container
+    };
+    let cloneChildren = getValidChildren(children);
+    if (!cloneChildren.length)
+      for (let i = 0; i < fileds; i++) {
+        cloneChildren.push(/* @__PURE__ */ jsx(PinInputField, {}, i));
+      }
+    return /* @__PURE__ */ jsx(DescendantsContextProvider, { value: descendants, children: /* @__PURE__ */ jsx(PinInputProvider, { value: { getInputProps, styles }, children: /* @__PURE__ */ jsx(ui.div, { ref, className: cx("ui-pin-input", className), ...rest, __css: css, children: cloneChildren }) }) });
+  }
+);
+var PinInputField = forwardRef(
+  ({ className, ...rest }, ref) => {
+    const { getInputProps, styles } = usePinInputContext();
+    const { index, register } = useDescendant();
+    rest = useFormControlProps(rest);
+    const css = { ...styles.field };
+    return /* @__PURE__ */ jsx(
+      ui.input,
+      {
+        className: cx("ui-pin-input-field", className),
+        ...getInputProps({ ...rest, ref: mergeRefs(register, ref), index }),
+        __css: css
+      }
+    );
+  }
+);
+
+export {
+  PinInput,
+  PinInputField
+};

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { PinInput, PinInputField, PinInputFieldProps, PinInputProps } from './pin-input.js';
+import '@yamada-ui/core';
+import '@yamada-ui/form-control';

package/dist/index.js

@@ -0,0 +1,239 @@
+"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/index.ts
+var src_exports = {};
+__export(src_exports, {
+  PinInput: () => PinInput,
+  PinInputField: () => PinInputField
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/pin-input.tsx
+var import_core = require("@yamada-ui/core");
+var import_form_control = require("@yamada-ui/form-control");
+var import_use_controllable_state = require("@yamada-ui/use-controllable-state");
+var import_use_descendant = require("@yamada-ui/use-descendant");
+var import_utils = require("@yamada-ui/utils");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var toArray = (value) => value == null ? void 0 : value.split("");
+var validate = (value, type) => {
+  const NUMERIC_REGEX = /^[0-9]+$/;
+  const ALPHA_NUMERIC_REGEX = /^[a-zA-Z0-9]+$/i;
+  const regex = type === "alphanumeric" ? ALPHA_NUMERIC_REGEX : NUMERIC_REGEX;
+  return regex.test(value);
+};
+var [PinInputProvider, usePinInputContext] = (0, import_utils.createContext)({
+  strict: false,
+  name: "PinInputContext"
+});
+var { DescendantsContextProvider, useDescendants, useDescendant } = (0, import_use_descendant.createDescendant)();
+var PinInput = (0, import_core.forwardRef)(
+  ({ focusBorderColor, errorBorderColor, ...props }, ref) => {
+    const [styles, mergedProps] = (0, import_core.useMultiComponentStyle)("PinInput", {
+      focusBorderColor,
+      errorBorderColor,
+      ...props
+    });
+    let {
+      id,
+      className,
+      type = "number",
+      placeholder = "\u25CB",
+      value,
+      defaultValue,
+      autoFocus,
+      manageFocus = true,
+      otp = false,
+      mask,
+      onChange,
+      onComplete,
+      fileds = 4,
+      children,
+      ...rest
+    } = (0, import_form_control.useFormControlProps)((0, import_core.omitThemeProps)(mergedProps));
+    id = id != null ? id : (0, import_react.useId)();
+    const descendants = useDescendants();
+    const [moveFocus, setMoveFocus] = (0, import_react.useState)(true);
+    const [focusedIndex, setFocusedIndex] = (0, import_react.useState)(-1);
+    (0, import_react.useEffect)(() => {
+      if (!autoFocus)
+        return;
+      const firstValue = descendants.firstValue();
+      if (!firstValue)
+        return;
+      requestAnimationFrame(() => firstValue.node.focus());
+    }, [autoFocus, descendants]);
+    const [values, setValues] = (0, import_use_controllable_state.useControllableState)({
+      value: toArray(value),
+      defaultValue: toArray(defaultValue) || [],
+      onChange: (values2) => onChange == null ? void 0 : onChange(values2.join(""))
+    });
+    const focusNext = (0, import_react.useCallback)(
+      (index) => {
+        if (!moveFocus || !manageFocus)
+          return;
+        const next = descendants.nextValue(index, void 0, false);
+        if (!next)
+          return;
+        requestAnimationFrame(() => next.node.focus());
+      },
+      [descendants, moveFocus, manageFocus]
+    );
+    const setValue = (0, import_react.useCallback)(
+      (value2, index, isFocus = true) => {
+        var _a;
+        let nextValues = [...values];
+        nextValues[index] = value2;
+        setValues(nextValues);
+        nextValues = nextValues.filter(Boolean);
+        const isComplete = value2 !== "" && nextValues.length === descendants.count() && nextValues.every((value3) => value3 != null && value3 !== "");
+        if (isComplete) {
+          onComplete == null ? void 0 : onComplete(nextValues.join(""));
+          (_a = descendants.value(index)) == null ? void 0 : _a.node.blur();
+        } else if (isFocus) {
+          focusNext(index);
+        }
+      },
+      [values, setValues, descendants, onComplete, focusNext]
+    );
+    const getNextValue = (0, import_react.useCallback)((value2, eventValue) => {
+      let nextValue = eventValue;
+      if (!(value2 == null ? void 0 : value2.length))
+        return nextValue;
+      if (value2[0] === eventValue.charAt(0)) {
+        nextValue = eventValue.charAt(1);
+      } else if (value2[0] === eventValue.charAt(1)) {
+        nextValue = eventValue.charAt(0);
+      }
+      return nextValue;
+    }, []);
+    const getInputProps = (0, import_react.useCallback)(
+      ({
+        index,
+        ...props2
+      }) => {
+        const onChange2 = ({ target }) => {
+          var _a;
+          const eventValue = target.value;
+          const currentValue = values[index];
+          const nextValue = getNextValue(currentValue, eventValue);
+          if (nextValue === "") {
+            setValue("", index);
+            return;
+          }
+          if (eventValue.length > 2) {
+            if (!validate(eventValue, type))
+              return;
+            const nextValue2 = eventValue.split("").filter((_, index2) => index2 < descendants.count());
+            setValues(nextValue2);
+            if (nextValue2.length === descendants.count()) {
+              onComplete == null ? void 0 : onComplete(nextValue2.join(""));
+              (_a = descendants.value(index)) == null ? void 0 : _a.node.blur();
+            }
+          } else {
+            if (validate(nextValue, type))
+              setValue(nextValue, index);
+            setMoveFocus(true);
+          }
+        };
+        const onKeyDown = ({ key, target }) => {
+          var _a;
+          if (key !== "Backspace" || !manageFocus)
+            return;
+          if (target.value === "") {
+            const prevInput = descendants.prevValue(index, void 0, false);
+            if (!prevInput)
+              return;
+            setValue("", index - 1, false);
+            (_a = prevInput.node) == null ? void 0 : _a.focus();
+            setMoveFocus(true);
+          } else {
+            setMoveFocus(false);
+          }
+        };
+        const onFocus = () => setFocusedIndex(index);
+        const onBlur = () => setFocusedIndex(-1);
+        return {
+          inputMode: type === "number" ? "numeric" : "text",
+          type: mask ? "password" : type === "number" ? "tel" : "text",
+          ...(0, import_utils.pickObject)(rest, import_form_control.formControlProperties),
+          ...(0, import_utils.filterUndefined)(props2),
+          id: `${id}-${index}`,
+          value: values[index] || "",
+          onChange: (0, import_utils.handlerAll)(props2.onChange, onChange2),
+          onKeyDown: (0, import_utils.handlerAll)(props2.onKeyDown, onKeyDown),
+          onFocus: (0, import_utils.handlerAll)(props2.onFocus, onFocus),
+          onBlur: (0, import_utils.handlerAll)(props2.onBlur, onBlur),
+          autoComplete: otp ? "one-time-code" : "off",
+          placeholder: focusedIndex === index && !rest.readOnly && !props2.readOnly ? "" : placeholder
+        };
+      },
+      [
+        descendants,
+        focusedIndex,
+        getNextValue,
+        id,
+        manageFocus,
+        mask,
+        onComplete,
+        otp,
+        placeholder,
+        rest,
+        setValue,
+        setValues,
+        type,
+        values
+      ]
+    );
+    const css = {
+      display: "flex",
+      alignItems: "center",
+      ...styles.container
+    };
+    let cloneChildren = (0, import_utils.getValidChildren)(children);
+    if (!cloneChildren.length)
+      for (let i = 0; i < fileds; i++) {
+        cloneChildren.push(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(PinInputField, {}, i));
+      }
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DescendantsContextProvider, { value: descendants, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PinInputProvider, { value: { getInputProps, styles }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.div, { ref, className: (0, import_utils.cx)("ui-pin-input", className), ...rest, __css: css, children: cloneChildren }) }) });
+  }
+);
+var PinInputField = (0, import_core.forwardRef)(
+  ({ className, ...rest }, ref) => {
+    const { getInputProps, styles } = usePinInputContext();
+    const { index, register } = useDescendant();
+    rest = (0, import_form_control.useFormControlProps)(rest);
+    const css = { ...styles.field };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_core.ui.input,
+      {
+        className: (0, import_utils.cx)("ui-pin-input-field", className),
+        ...getInputProps({ ...rest, ref: (0, import_utils.mergeRefs)(register, ref), index }),
+        __css: css
+      }
+    );
+  }
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PinInput,
+  PinInputField
+});

package/dist/index.mjs

@@ -0,0 +1,8 @@
+import {
+  PinInput,
+  PinInputField
+} from "./chunk-WNHBQS2L.mjs";
+export {
+  PinInput,
+  PinInputField
+};

package/dist/pin-input.d.ts

@@ -0,0 +1,26 @@
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { HTMLUIProps, ThemeProps, CSSUIProps } from '@yamada-ui/core';
+import { FormControlOptions } from '@yamada-ui/form-control';
+
+type PinInputOptions = {
+    id?: string;
+    type?: 'alphanumeric' | 'number';
+    placeholder?: string;
+    value?: string;
+    defaultValue?: string;
+    autoFocus?: boolean;
+    manageFocus?: boolean;
+    otp?: boolean;
+    mask?: boolean;
+    onChange?: (value: string) => void;
+    onComplete?: (value: string) => void;
+    fileds?: number;
+    focusBorderColor?: CSSUIProps<'unresponsive'>['borderColor'];
+    errorBorderColor?: CSSUIProps<'unresponsive'>['borderColor'];
+};
+type PinInputProps = Omit<HTMLUIProps<'div'>, 'onChange'> & ThemeProps<'PinInput'> & FormControlOptions & PinInputOptions;
+declare const PinInput: _yamada_ui_core.Component<"div", PinInputProps>;
+type PinInputFieldProps = HTMLUIProps<'input'> & FormControlOptions;
+declare const PinInputField: _yamada_ui_core.Component<"input", PinInputFieldProps>;
+
+export { PinInput, PinInputField, PinInputFieldProps, PinInputProps };

package/dist/pin-input.js

@@ -0,0 +1,237 @@
+"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.tsx
+var pin_input_exports = {};
+__export(pin_input_exports, {
+  PinInput: () => PinInput,
+  PinInputField: () => PinInputField
+});
+module.exports = __toCommonJS(pin_input_exports);
+var import_core = require("@yamada-ui/core");
+var import_form_control = require("@yamada-ui/form-control");
+var import_use_controllable_state = require("@yamada-ui/use-controllable-state");
+var import_use_descendant = require("@yamada-ui/use-descendant");
+var import_utils = require("@yamada-ui/utils");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var toArray = (value) => value == null ? void 0 : value.split("");
+var validate = (value, type) => {
+  const NUMERIC_REGEX = /^[0-9]+$/;
+  const ALPHA_NUMERIC_REGEX = /^[a-zA-Z0-9]+$/i;
+  const regex = type === "alphanumeric" ? ALPHA_NUMERIC_REGEX : NUMERIC_REGEX;
+  return regex.test(value);
+};
+var [PinInputProvider, usePinInputContext] = (0, import_utils.createContext)({
+  strict: false,
+  name: "PinInputContext"
+});
+var { DescendantsContextProvider, useDescendants, useDescendant } = (0, import_use_descendant.createDescendant)();
+var PinInput = (0, import_core.forwardRef)(
+  ({ focusBorderColor, errorBorderColor, ...props }, ref) => {
+    const [styles, mergedProps] = (0, import_core.useMultiComponentStyle)("PinInput", {
+      focusBorderColor,
+      errorBorderColor,
+      ...props
+    });
+    let {
+      id,
+      className,
+      type = "number",
+      placeholder = "\u25CB",
+      value,
+      defaultValue,
+      autoFocus,
+      manageFocus = true,
+      otp = false,
+      mask,
+      onChange,
+      onComplete,
+      fileds = 4,
+      children,
+      ...rest
+    } = (0, import_form_control.useFormControlProps)((0, import_core.omitThemeProps)(mergedProps));
+    id = id != null ? id : (0, import_react.useId)();
+    const descendants = useDescendants();
+    const [moveFocus, setMoveFocus] = (0, import_react.useState)(true);
+    const [focusedIndex, setFocusedIndex] = (0, import_react.useState)(-1);
+    (0, import_react.useEffect)(() => {
+      if (!autoFocus)
+        return;
+      const firstValue = descendants.firstValue();
+      if (!firstValue)
+        return;
+      requestAnimationFrame(() => firstValue.node.focus());
+    }, [autoFocus, descendants]);
+    const [values, setValues] = (0, import_use_controllable_state.useControllableState)({
+      value: toArray(value),
+      defaultValue: toArray(defaultValue) || [],
+      onChange: (values2) => onChange == null ? void 0 : onChange(values2.join(""))
+    });
+    const focusNext = (0, import_react.useCallback)(
+      (index) => {
+        if (!moveFocus || !manageFocus)
+          return;
+        const next = descendants.nextValue(index, void 0, false);
+        if (!next)
+          return;
+        requestAnimationFrame(() => next.node.focus());
+      },
+      [descendants, moveFocus, manageFocus]
+    );
+    const setValue = (0, import_react.useCallback)(
+      (value2, index, isFocus = true) => {
+        var _a;
+        let nextValues = [...values];
+        nextValues[index] = value2;
+        setValues(nextValues);
+        nextValues = nextValues.filter(Boolean);
+        const isComplete = value2 !== "" && nextValues.length === descendants.count() && nextValues.every((value3) => value3 != null && value3 !== "");
+        if (isComplete) {
+          onComplete == null ? void 0 : onComplete(nextValues.join(""));
+          (_a = descendants.value(index)) == null ? void 0 : _a.node.blur();
+        } else if (isFocus) {
+          focusNext(index);
+        }
+      },
+      [values, setValues, descendants, onComplete, focusNext]
+    );
+    const getNextValue = (0, import_react.useCallback)((value2, eventValue) => {
+      let nextValue = eventValue;
+      if (!(value2 == null ? void 0 : value2.length))
+        return nextValue;
+      if (value2[0] === eventValue.charAt(0)) {
+        nextValue = eventValue.charAt(1);
+      } else if (value2[0] === eventValue.charAt(1)) {
+        nextValue = eventValue.charAt(0);
+      }
+      return nextValue;
+    }, []);
+    const getInputProps = (0, import_react.useCallback)(
+      ({
+        index,
+        ...props2
+      }) => {
+        const onChange2 = ({ target }) => {
+          var _a;
+          const eventValue = target.value;
+          const currentValue = values[index];
+          const nextValue = getNextValue(currentValue, eventValue);
+          if (nextValue === "") {
+            setValue("", index);
+            return;
+          }
+          if (eventValue.length > 2) {
+            if (!validate(eventValue, type))
+              return;
+            const nextValue2 = eventValue.split("").filter((_, index2) => index2 < descendants.count());
+            setValues(nextValue2);
+            if (nextValue2.length === descendants.count()) {
+              onComplete == null ? void 0 : onComplete(nextValue2.join(""));
+              (_a = descendants.value(index)) == null ? void 0 : _a.node.blur();
+            }
+          } else {
+            if (validate(nextValue, type))
+              setValue(nextValue, index);
+            setMoveFocus(true);
+          }
+        };
+        const onKeyDown = ({ key, target }) => {
+          var _a;
+          if (key !== "Backspace" || !manageFocus)
+            return;
+          if (target.value === "") {
+            const prevInput = descendants.prevValue(index, void 0, false);
+            if (!prevInput)
+              return;
+            setValue("", index - 1, false);
+            (_a = prevInput.node) == null ? void 0 : _a.focus();
+            setMoveFocus(true);
+          } else {
+            setMoveFocus(false);
+          }
+        };
+        const onFocus = () => setFocusedIndex(index);
+        const onBlur = () => setFocusedIndex(-1);
+        return {
+          inputMode: type === "number" ? "numeric" : "text",
+          type: mask ? "password" : type === "number" ? "tel" : "text",
+          ...(0, import_utils.pickObject)(rest, import_form_control.formControlProperties),
+          ...(0, import_utils.filterUndefined)(props2),
+          id: `${id}-${index}`,
+          value: values[index] || "",
+          onChange: (0, import_utils.handlerAll)(props2.onChange, onChange2),
+          onKeyDown: (0, import_utils.handlerAll)(props2.onKeyDown, onKeyDown),
+          onFocus: (0, import_utils.handlerAll)(props2.onFocus, onFocus),
+          onBlur: (0, import_utils.handlerAll)(props2.onBlur, onBlur),
+          autoComplete: otp ? "one-time-code" : "off",
+          placeholder: focusedIndex === index && !rest.readOnly && !props2.readOnly ? "" : placeholder
+        };
+      },
+      [
+        descendants,
+        focusedIndex,
+        getNextValue,
+        id,
+        manageFocus,
+        mask,
+        onComplete,
+        otp,
+        placeholder,
+        rest,
+        setValue,
+        setValues,
+        type,
+        values
+      ]
+    );
+    const css = {
+      display: "flex",
+      alignItems: "center",
+      ...styles.container
+    };
+    let cloneChildren = (0, import_utils.getValidChildren)(children);
+    if (!cloneChildren.length)
+      for (let i = 0; i < fileds; i++) {
+        cloneChildren.push(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(PinInputField, {}, i));
+      }
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DescendantsContextProvider, { value: descendants, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PinInputProvider, { value: { getInputProps, styles }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.div, { ref, className: (0, import_utils.cx)("ui-pin-input", className), ...rest, __css: css, children: cloneChildren }) }) });
+  }
+);
+var PinInputField = (0, import_core.forwardRef)(
+  ({ className, ...rest }, ref) => {
+    const { getInputProps, styles } = usePinInputContext();
+    const { index, register } = useDescendant();
+    rest = (0, import_form_control.useFormControlProps)(rest);
+    const css = { ...styles.field };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_core.ui.input,
+      {
+        className: (0, import_utils.cx)("ui-pin-input-field", className),
+        ...getInputProps({ ...rest, ref: (0, import_utils.mergeRefs)(register, ref), index }),
+        __css: css
+      }
+    );
+  }
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PinInput,
+  PinInputField
+});

package/dist/pin-input.mjs

@@ -0,0 +1,8 @@
+import {
+  PinInput,
+  PinInputField
+} from "./chunk-WNHBQS2L.mjs";
+export {
+  PinInput,
+  PinInputField
+};

package/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "@yamada-ui/pin-input",
+  "version": "0.1.0",
+  "description": "Yamada UI pin input component",
+  "keywords": [
+    "yamada",
+    "yamada ui",
+    "react",
+    "emotion",
+    "component",
+    "pin-input",
+    "ui",
+    "uikit",
+    "styled",
+    "style-props",
+    "styled-component",
+    "css-in-js"
+  ],
+  "author": "Hirotomo Yamada <hirotomo.yamada@avap.co.jp>",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hirotomoyamada/yamada-ui",
+    "directory": "packages/components/pin-input"
+  },
+  "bugs": {
+    "url": "https://github.com/hirotomoyamada/yamada-ui/issues"
+  },
+  "dependencies": {
+    "@yamada-ui/core": "0.1.0",
+    "@yamada-ui/form-control": "0.1.0",
+    "@yamada-ui/utils": "0.1.0",
+    "@yamada-ui/use-controllable-state": "0.1.0",
+    "@yamada-ui/use-descendant": "0.1.0"
+  },
+  "devDependencies": {
+    "react": "^18.0.0",
+    "clean-package": "2.2.0"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "clean-package": "../../../clean-package.config.json",
+  "tsup": {
+    "clean": true,
+    "target": "es2019",
+    "format": [
+      "cjs",
+      "esm"
+    ]
+  },
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "dev": "pnpm build:fast -- --watch",
+    "build": "tsup src --dts",
+    "build:fast": "tsup src",
+    "clean": "rimraf dist .turbo",
+    "typecheck": "tsc --noEmit",
+    "gen:docs": "tsx ../../../scripts/generate-docs"
+  }
+}