@mankindui/core/dist/components/InputOtp/index.js

- a react component library - you can see how @mankindui/core can be used via examples: [usage examples](https://github.com/clarklindev/mankindui-test)

import { j as n } from "../../_virtual/jsx-runtime.js";
import i, { useState as g, useRef as h } from "react";
const y = ({ length: c = 6, dashPositions: f = [] }) => {
  const [u, l] = g(Array(c).fill("")), o = Array.from({ length: c }, () => h(null)), p = (s, e) => {
    var a;
    let t = s.target.value.replace(/[^A-Za-z0-9]/g, "");
    const r = [...u];
    r[e] = t, l(r), t && e < c - 1 && ((a = o[e + 1].current) == null || a.focus());
  }, m = (s, e) => {
    s.key === "Backspace" && (s.preventDefault(), l((t) => {
      var a;
      const r = [...t];
      return r[e] ? r[e] = "" : e > 0 && (r[e - 1] = "", (a = o[e - 1].current) == null || a.focus()), r;
    }));
  };
  return /* @__PURE__ */ n.jsx("div", { className: "flex items-center gap-2", children: u.map((s, e) => /* @__PURE__ */ n.jsxs(i.Fragment, { children: [
    /* @__PURE__ */ n.jsx(
      "input",
      {
        ref: o[e],
        value: s,
        onChange: (t) => p(t, e),
        onKeyDown: (t) => m(t, e),
        maxLength: 1,
        type: "text",
        className: "w-12 h-12 text-center border-1 rounded-md focus:outline-none focus:ring-1 focus:ring-black dark:focus:ring-white"
      }
    ),
    f.includes(e + 1) && /* @__PURE__ */ n.jsx("span", { className: "mx-1 text-xl", children: "-" })
  ] }, e)) });
};
export {
  y as InputOtp
};
//# sourceMappingURL=index.js.map