@particle-network/auth-core-modal/esm/chunk-2YNXOG72.js

Auth Core provides MPC (Multi-Party Computation)-based threshold signatures.

"use client";
import {
  isAutoFocusSupported
} from "./chunk-LKAVNLWK.js";

// src/components/react-auth-code-input/index.tsx
import React, { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
var allowedCharactersValues = ["alpha", "numeric", "alphanumeric"];
var propsMap = {
  alpha: {
    type: "text",
    inputMode: "text",
    pattern: "[a-zA-Z]{1}"
  },
  alphanumeric: {
    type: "text",
    inputMode: "text",
    pattern: "[a-zA-Z0-9]{1}"
  },
  numeric: {
    type: "tel",
    inputMode: "numeric",
    pattern: "[0-9]{1}",
    min: "0",
    max: "9"
  }
};
var AuthCode = forwardRef(
  ({
    allowedCharacters = "alphanumeric",
    ariaLabel,
    autoFocus = true,
    containerClassName,
    disabled,
    inputClassName,
    isPassword = false,
    length = 6,
    placeholder,
    onChange,
    code = ""
  }, ref) => {
    if (isNaN(length) || length < 1) {
      throw new Error("Length should be a number and greater than 0");
    }
    if (!allowedCharactersValues.some((value) => value === allowedCharacters)) {
      throw new Error("Invalid value for allowedCharacters. Use alpha, numeric, or alphanumeric");
    }
    const inputsRef = useRef([]);
    const inputProps = propsMap[allowedCharacters];
    useImperativeHandle(ref, () => ({
      focus: () => {
        if (inputsRef.current) {
          inputsRef.current[0].focus();
        }
      },
      clear: () => {
        if (inputsRef.current) {
          for (let i = 0; i < inputsRef.current.length; i++) {
            inputsRef.current[i].value = "";
          }
          inputsRef.current[0].focus();
        }
        sendResult();
      }
    }));
    useEffect(() => {
      if (autoFocus && isAutoFocusSupported()) {
        inputsRef.current[0].focus();
      }
    }, []);
    useEffect(() => {
      if (code) {
        for (let i = 0; i < inputsRef.current.length; i++) {
          inputsRef.current[i].value = "";
        }
        for (let i = 0; i < code.length; i++) {
          inputsRef.current[i].value = code[i];
        }
        sendResult();
      }
    }, [code]);
    let oldValue = inputsRef.current.map((input) => input.value).join("") || "";
    const sendResult = () => {
      const res = inputsRef.current.map((input) => input.value).join("");
      if (oldValue !== res) {
        console.log("sendResult", res);
        onChange && onChange(res);
        oldValue = res;
      }
    };
    const handleOnChange = (e) => {
      var _a;
      const {
        target: { value, nextElementSibling }
      } = e;
      if (value.length == 1) {
        if (value.match(inputProps.pattern)) {
          if (nextElementSibling !== null) {
            nextElementSibling.focus();
          }
        } else {
          e.target.value = "";
        }
      } else if (value.length > 1) {
        const pastedValue = value;
        let currentInput = Number(e.target.getAttribute("data-index")) || 0;
        for (let i = 0; i < pastedValue.length; i++) {
          const pastedCharacter = pastedValue.charAt(i);
          if (pastedCharacter.match(inputProps.pattern) && ((_a = inputsRef.current) == null ? void 0 : _a[currentInput])) {
            inputsRef.current[currentInput].value = pastedCharacter;
            if (inputsRef.current[currentInput].nextElementSibling !== null) {
              inputsRef.current[currentInput].nextElementSibling.focus();
              currentInput++;
            }
          }
        }
      }
      setTimeout(() => {
        sendResult();
      });
    };
    const handleOnKeyDown = (e) => {
      const { key } = e;
      const target = e.target;
      if (key === "Backspace") {
        if (target.value === "") {
          if (target.previousElementSibling !== null) {
            const t = target.previousElementSibling;
            t.value = "";
            t.focus();
            e.preventDefault();
          }
        } else {
          target.value = "";
        }
        setTimeout(() => {
          sendResult();
        });
      }
    };
    const handleOnFocus = (e) => {
      e.target.select();
    };
    const handleOnPaste = (e) => {
      var _a;
      let pastedValue = (_a = e.clipboardData.getData("Text")) != null ? _a : "";
      pastedValue = pastedValue.replace(/\s/g, "").substring(0, 6);
      let currentInput = 0;
      for (let i = 0; i < pastedValue.length; i++) {
        const pastedCharacter = pastedValue.charAt(i);
        const currentValue = inputsRef.current[currentInput].value;
        if (pastedCharacter.match(inputProps.pattern)) {
          if (!currentValue) {
            inputsRef.current[currentInput].value = pastedCharacter;
            if (inputsRef.current[currentInput].nextElementSibling !== null) {
              inputsRef.current[currentInput].nextElementSibling.focus();
              currentInput++;
            }
          }
        }
      }
      sendResult();
      e.preventDefault();
    };
    return /* @__PURE__ */ React.createElement("div", { className: containerClassName }, new Array(6).fill(0).map((_, i) => {
      return /* @__PURE__ */ React.createElement(
        "input",
        {
          key: i,
          "data-index": i,
          onChange: handleOnChange,
          onKeyDown: handleOnKeyDown,
          onFocus: handleOnFocus,
          onPaste: handleOnPaste,
          ...inputProps,
          type: isPassword ? "password" : inputProps.type,
          ref: (el) => {
            inputsRef.current[i] = el;
          },
          className: inputClassName,
          autoComplete: i === 0 ? "one-time-code" : "off",
          "aria-label": ariaLabel ? `${ariaLabel}. Character ${i + 1}.` : `Character ${i + 1}.`,
          disabled,
          placeholder
        }
      );
    }), /* @__PURE__ */ React.createElement(
      "div",
      {
        className: "input-code-mask",
        onClick: (e) => {
          e.preventDefault();
          e.stopPropagation();
          for (let i = inputsRef.current.length - 1; i >= 0; i--) {
            if (i > 0 && !inputsRef.current[i].value && inputsRef.current[i - 1].value || i === 0 && !inputsRef.current[i].value || i == inputsRef.current.length - 1 && inputsRef.current[i].value) {
              inputsRef.current[i].focus();
              inputsRef.current[i].setSelectionRange(
                inputsRef.current[i].value.length,
                inputsRef.current[i].value.length
              );
              break;
            }
          }
        }
      }
    ));
  }
);
var react_auth_code_input_default = AuthCode;

export {
  react_auth_code_input_default
};
//# sourceMappingURL=chunk-2YNXOG72.js.map