@stanfordspezi/spezi-web-design-system/dist/InputOTP-B3TYYEOh.mjs

Stanford Biodesign Digital Health Spezi Web Design System

import { jsx as P, jsxs as Re } from "react/jsx-runtime";
import * as n from "react";
import { useContext as Oe } from "react";
import { c as K } from "./index-2NvaPZWc.mjs";
import { t as De } from "./misc-Ci6Z8ZmP.mjs";
import { c as Ie } from "./createLucideIcon-C8GTh_Qx.mjs";
/**
 * @license lucide-react v0.488.0 - ISC
 *
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
const je = [["path", { d: "M5 12h14", key: "1ays0h" }]], Ae = Ie("minus", je);
var We = Object.defineProperty, Be = Object.defineProperties, _e = Object.getOwnPropertyDescriptors, Q = Object.getOwnPropertySymbols, ve = Object.prototype.hasOwnProperty, he = Object.prototype.propertyIsEnumerable, fe = (e, r, a) => r in e ? We(e, r, { enumerable: !0, configurable: !0, writable: !0, value: a }) : e[r] = a, Ne = (e, r) => {
  for (var a in r || (r = {})) ve.call(r, a) && fe(e, a, r[a]);
  if (Q) for (var a of Q(r)) he.call(r, a) && fe(e, a, r[a]);
  return e;
}, Fe = (e, r) => Be(e, _e(r)), He = (e, r) => {
  var a = {};
  for (var u in e) ve.call(e, u) && r.indexOf(u) < 0 && (a[u] = e[u]);
  if (e != null && Q) for (var u of Q(e)) r.indexOf(u) < 0 && he.call(e, u) && (a[u] = e[u]);
  return a;
};
function Le(e) {
  let r = setTimeout(e, 0), a = setTimeout(e, 10), u = setTimeout(e, 50);
  return [r, a, u];
}
function Ge(e) {
  let r = n.useRef();
  return n.useEffect(() => {
    r.current = e;
  }), r.current;
}
var $e = 18, ge = 40, ze = `${ge}px`, Ve = ["[data-lastpass-icon-root]", "com-1password-button", "[data-dashlanecreated]", '[style$="2147483647 !important;"]'].join(",");
function qe({ containerRef: e, inputRef: r, pushPasswordManagerStrategy: a, isFocused: u }) {
  let [S, p] = n.useState(!1), [k, T] = n.useState(!1), [A, F] = n.useState(!1), H = n.useMemo(() => a === "none" ? !1 : (a === "increase-width" || a === "experimental-no-flickering") && S && k, [S, k, a]), W = n.useCallback(() => {
    let f = e.current, C = r.current;
    if (!f || !C || A || a === "none") return;
    let g = f, E = g.getBoundingClientRect().left + g.offsetWidth, B = g.getBoundingClientRect().top + g.offsetHeight / 2, i = E - $e, L = B;
    document.querySelectorAll(Ve).length === 0 && document.elementFromPoint(i, L) === f || (p(!0), F(!0));
  }, [e, r, A, a]);
  return n.useEffect(() => {
    let f = e.current;
    if (!f || a === "none") return;
    function C() {
      let E = window.innerWidth - f.getBoundingClientRect().right;
      T(E >= ge);
    }
    C();
    let g = setInterval(C, 1e3);
    return () => {
      clearInterval(g);
    };
  }, [e, a]), n.useEffect(() => {
    let f = u || document.activeElement === r.current;
    if (a === "none" || !f) return;
    let C = setTimeout(W, 0), g = setTimeout(W, 2e3), E = setTimeout(W, 5e3), B = setTimeout(() => {
      F(!0);
    }, 6e3);
    return () => {
      clearTimeout(C), clearTimeout(g), clearTimeout(E), clearTimeout(B);
    };
  }, [r, u, a, W]), { hasPWMBadge: S, willPushPWMBadge: H, PWM_BADGE_SPACE_WIDTH: ze };
}
var be = n.createContext({}), we = n.forwardRef((e, r) => {
  var a = e, { value: u, onChange: S, maxLength: p, textAlign: k = "left", pattern: T, placeholder: A, inputMode: F = "numeric", onComplete: H, pushPasswordManagerStrategy: W = "increase-width", pasteTransformer: f, containerClassName: C, noScriptCSSFallback: g = Ze, render: E, children: B } = a, i = He(a, ["value", "onChange", "maxLength", "textAlign", "pattern", "placeholder", "inputMode", "onComplete", "pushPasswordManagerStrategy", "pasteTransformer", "containerClassName", "noScriptCSSFallback", "render", "children"]), L, ne, re, le, ae;
  let [Se, Ee] = n.useState(typeof i.defaultValue == "string" ? i.defaultValue : ""), s = u ?? Se, R = Ge(s), G = n.useCallback((t) => {
    S == null || S(t), Ee(t);
  }, [S]), w = n.useMemo(() => T ? typeof T == "string" ? new RegExp(T) : T : null, [T]), c = n.useRef(null), U = n.useRef(null), X = n.useRef({ value: s, onChange: G, isIOS: typeof window < "u" && ((ne = (L = window == null ? void 0 : window.CSS) == null ? void 0 : L.supports) == null ? void 0 : ne.call(L, "-webkit-touch-callout", "none")) }), Z = n.useRef({ prev: [(re = c.current) == null ? void 0 : re.selectionStart, (le = c.current) == null ? void 0 : le.selectionEnd, (ae = c.current) == null ? void 0 : ae.selectionDirection] });
  n.useImperativeHandle(r, () => c.current, []), n.useEffect(() => {
    let t = c.current, l = U.current;
    if (!t || !l) return;
    X.current.value !== t.value && X.current.onChange(t.value), Z.current.prev = [t.selectionStart, t.selectionEnd, t.selectionDirection];
    function d() {
      if (document.activeElement !== t) {
        z(null), V(null);
        return;
      }
      let o = t.selectionStart, m = t.selectionEnd, J = t.selectionDirection, b = t.maxLength, D = t.value, y = Z.current.prev, x = -1, M = -1, I;
      if (D.length !== 0 && o !== null && m !== null) {
        let Me = o === m, ke = o === D.length && D.length < b;
        if (Me && !ke) {
          let j = o;
          if (j === 0) x = 0, M = 1, I = "forward";
          else if (j === b) x = j - 1, M = j, I = "backward";
          else if (b > 1 && D.length > 1) {
            let te = 0;
            if (y[0] !== null && y[1] !== null) {
              I = j < y[1] ? "backward" : "forward";
              let Te = y[0] === y[1] && y[0] < b;
              I === "backward" && !Te && (te = -1);
            }
            x = te + j, M = te + j + 1;
          }
        }
        x !== -1 && M !== -1 && x !== M && c.current.setSelectionRange(x, M, I);
      }
      let de = x !== -1 ? x : o, me = M !== -1 ? M : m, xe = I ?? J;
      z(de), V(me), Z.current.prev = [de, me, xe];
    }
    if (document.addEventListener("selectionchange", d, { capture: !0 }), d(), document.activeElement === t && Y(!0), !document.getElementById("input-otp-style")) {
      let o = document.createElement("style");
      if (o.id = "input-otp-style", document.head.appendChild(o), o.sheet) {
        let m = "background: transparent !important; color: transparent !important; border-color: transparent !important; opacity: 0 !important; box-shadow: none !important; -webkit-box-shadow: none !important; -webkit-text-fill-color: transparent !important;";
        q(o.sheet, "[data-input-otp]::selection { background: transparent !important; color: transparent !important; }"), q(o.sheet, `[data-input-otp]:autofill { ${m} }`), q(o.sheet, `[data-input-otp]:-webkit-autofill { ${m} }`), q(o.sheet, "@supports (-webkit-touch-callout: none) { [data-input-otp] { letter-spacing: -.6em !important; font-weight: 100 !important; font-stretch: ultra-condensed; font-optical-sizing: none !important; left: -1px !important; right: 1px !important; } }"), q(o.sheet, "[data-input-otp] + * { pointer-events: all !important; }");
      }
    }
    let v = () => {
      l && l.style.setProperty("--root-height", `${t.clientHeight}px`);
    };
    v();
    let h = new ResizeObserver(v);
    return h.observe(t), () => {
      document.removeEventListener("selectionchange", d, { capture: !0 }), h.disconnect();
    };
  }, []);
  let [oe, ie] = n.useState(!1), [$, Y] = n.useState(!1), [O, z] = n.useState(null), [_, V] = n.useState(null);
  n.useEffect(() => {
    Le(() => {
      var t, l, d, v;
      (t = c.current) == null || t.dispatchEvent(new Event("input"));
      let h = (l = c.current) == null ? void 0 : l.selectionStart, o = (d = c.current) == null ? void 0 : d.selectionEnd, m = (v = c.current) == null ? void 0 : v.selectionDirection;
      h !== null && o !== null && (z(h), V(o), Z.current.prev = [h, o, m]);
    });
  }, [s, $]), n.useEffect(() => {
    R !== void 0 && s !== R && R.length < p && s.length === p && (H == null || H(s));
  }, [p, H, R, s]);
  let N = qe({ containerRef: U, inputRef: c, pushPasswordManagerStrategy: W, isFocused: $ }), ue = n.useCallback((t) => {
    let l = t.currentTarget.value.slice(0, p);
    if (l.length > 0 && w && !w.test(l)) {
      t.preventDefault();
      return;
    }
    typeof R == "string" && l.length < R.length && document.dispatchEvent(new Event("selectionchange")), G(l);
  }, [p, G, R, w]), se = n.useCallback(() => {
    var t;
    if (c.current) {
      let l = Math.min(c.current.value.length, p - 1), d = c.current.value.length;
      (t = c.current) == null || t.setSelectionRange(l, d), z(l), V(d);
    }
    Y(!0);
  }, [p]), ce = n.useCallback((t) => {
    var l, d;
    let v = c.current;
    if (!f && (!X.current.isIOS || !t.clipboardData || !v)) return;
    let h = t.clipboardData.getData("text/plain"), o = f ? f(h) : h;
    t.preventDefault();
    let m = (l = c.current) == null ? void 0 : l.selectionStart, J = (d = c.current) == null ? void 0 : d.selectionEnd, b = (m !== J ? s.slice(0, m) + o + s.slice(J) : s.slice(0, m) + o + s.slice(m)).slice(0, p);
    if (b.length > 0 && w && !w.test(b)) return;
    v.value = b, G(b);
    let D = Math.min(b.length, p - 1), y = b.length;
    v.setSelectionRange(D, y), z(D), V(y);
  }, [p, G, w, s]), ye = n.useMemo(() => ({ position: "relative", cursor: i.disabled ? "default" : "text", userSelect: "none", WebkitUserSelect: "none", pointerEvents: "none" }), [i.disabled]), pe = n.useMemo(() => ({ position: "absolute", inset: 0, width: N.willPushPWMBadge ? `calc(100% + ${N.PWM_BADGE_SPACE_WIDTH})` : "100%", clipPath: N.willPushPWMBadge ? `inset(0 ${N.PWM_BADGE_SPACE_WIDTH} 0 0)` : void 0, height: "100%", display: "flex", textAlign: k, opacity: "1", color: "transparent", pointerEvents: "all", background: "transparent", caretColor: "transparent", border: "0 solid transparent", outline: "0 solid transparent", boxShadow: "none", lineHeight: "1", letterSpacing: "-.5em", fontSize: "var(--root-height)", fontFamily: "monospace", fontVariantNumeric: "tabular-nums" }), [N.PWM_BADGE_SPACE_WIDTH, N.willPushPWMBadge, k]), Pe = n.useMemo(() => n.createElement("input", Fe(Ne({ autoComplete: i.autoComplete || "one-time-code" }, i), { "data-input-otp": !0, "data-input-otp-placeholder-shown": s.length === 0 || void 0, "data-input-otp-mss": O, "data-input-otp-mse": _, inputMode: F, pattern: w == null ? void 0 : w.source, "aria-placeholder": A, style: pe, maxLength: p, value: s, ref: c, onPaste: (t) => {
    var l;
    ce(t), (l = i.onPaste) == null || l.call(i, t);
  }, onChange: ue, onMouseOver: (t) => {
    var l;
    ie(!0), (l = i.onMouseOver) == null || l.call(i, t);
  }, onMouseLeave: (t) => {
    var l;
    ie(!1), (l = i.onMouseLeave) == null || l.call(i, t);
  }, onFocus: (t) => {
    var l;
    se(), (l = i.onFocus) == null || l.call(i, t);
  }, onBlur: (t) => {
    var l;
    Y(!1), (l = i.onBlur) == null || l.call(i, t);
  } })), [ue, se, ce, F, pe, p, _, O, i, w == null ? void 0 : w.source, s]), ee = n.useMemo(() => ({ slots: Array.from({ length: p }).map((t, l) => {
    var d;
    let v = $ && O !== null && _ !== null && (O === _ && l === O || l >= O && l < _), h = s[l] !== void 0 ? s[l] : null, o = s[0] !== void 0 ? null : (d = A == null ? void 0 : A[l]) != null ? d : null;
    return { char: h, placeholderChar: o, isActive: v, hasFakeCaret: v && h === null };
  }), isFocused: $, isHovering: !i.disabled && oe }), [$, oe, p, _, O, i.disabled, s]), Ce = n.useMemo(() => E ? E(ee) : n.createElement(be.Provider, { value: ee }, B), [B, ee, E]);
  return n.createElement(n.Fragment, null, g !== null && n.createElement("noscript", null, n.createElement("style", null, g)), n.createElement("div", { ref: U, "data-input-otp-container": !0, style: ye, className: C }, Ce, n.createElement("div", { style: { position: "absolute", inset: 0, pointerEvents: "none" } }, Pe)));
});
we.displayName = "Input";
function q(e, r) {
  try {
    e.insertRule(r);
  } catch {
    console.error("input-otp could not insert CSS rule:", r);
  }
}
var Ze = `
[data-input-otp] {
  --nojs-bg: white !important;
  --nojs-fg: black !important;

  background-color: var(--nojs-bg) !important;
  color: var(--nojs-fg) !important;
  caret-color: var(--nojs-fg) !important;
  letter-spacing: .25em !important;
  text-align: center !important;
  border: 1px solid var(--nojs-fg) !important;
  border-radius: 4px !important;
  width: 100% !important;
}
@media (prefers-color-scheme: dark) {
  [data-input-otp] {
    --nojs-bg: black !important;
    --nojs-fg: white !important;
  }
}`;
const Je = ({
  className: e,
  containerClassName: r,
  ...a
}) => /* @__PURE__ */ P(
  we,
  {
    containerClassName: K(
      "flex items-center gap-1.5 has-disabled:opacity-50",
      r
    ),
    className: K("disabled:cursor-not-allowed", e),
    ...a
  }
), Ke = ({
  className: e,
  ...r
}) => /* @__PURE__ */ P("div", { className: K("flex items-center", e), ...r }), Qe = ({
  index: e,
  className: r,
  ...a
}) => {
  const u = Oe(be), { char: S, hasFakeCaret: p, isActive: k } = u.slots[e];
  return /* @__PURE__ */ Re(
    "div",
    {
      className: K(
        "flex-center border-input relative size-10 border-y border-r text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
        k && "ring-ring z-10 ring-2",
        r
      ),
      ...a,
      children: [
        S,
        p && /* @__PURE__ */ P("div", { className: "flex-center pointer-events-none absolute inset-0", children: /* @__PURE__ */ P("div", { className: "animate-caret-blink bg-foreground h-4 w-px duration-1000" }) })
      ]
    }
  );
}, nt = ({ ...e }) => /* @__PURE__ */ P("div", { role: "separator", ...e, children: /* @__PURE__ */ P(Ae, { className: "text-muted-foreground w-4" }) }), rt = ({
  maxLength: e,
  ...r
}) => /* @__PURE__ */ P(Je, { maxLength: e, ...r, children: /* @__PURE__ */ P(Ke, { children: De(e, (a) => /* @__PURE__ */ P(Qe, { index: a }, a)) }) });
export {
  Je as I,
  Ke as a,
  Qe as b,
  nt as c,
  rt as d
};