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

Stanford Biodesign Digital Health Spezi Web Design System

import { jsx as y, 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-CHmrAmhc.mjs";
import Ie from "./minus-DTh_lic_.mjs";
var je = Object.defineProperty, Ae = Object.defineProperties, We = Object.getOwnPropertyDescriptors, Q = Object.getOwnPropertySymbols, ve = Object.prototype.hasOwnProperty, he = Object.prototype.propertyIsEnumerable, fe = (e, r, l) => r in e ? je(e, r, { enumerable: !0, configurable: !0, writable: !0, value: l }) : e[r] = l, Be = (e, r) => {
  for (var l in r || (r = {})) ve.call(r, l) && fe(e, l, r[l]);
  if (Q) for (var l of Q(r)) he.call(r, l) && fe(e, l, r[l]);
  return e;
}, _e = (e, r) => Ae(e, We(r)), Fe = (e, r) => {
  var l = {};
  for (var u in e) ve.call(e, u) && r.indexOf(u) < 0 && (l[u] = e[u]);
  if (e != null && Q) for (var u of Q(e)) r.indexOf(u) < 0 && he.call(e, u) && (l[u] = e[u]);
  return l;
};
function Ne(e) {
  let r = setTimeout(e, 0), l = setTimeout(e, 10), u = setTimeout(e, 50);
  return [r, l, u];
}
function He(e) {
  let r = n.useRef();
  return n.useEffect(() => {
    r.current = e;
  }), r.current;
}
var Le = 18, ge = 40, Ge = `${ge}px`, $e = ["[data-lastpass-icon-root]", "com-1password-button", "[data-dashlanecreated]", '[style$="2147483647 !important;"]'].join(",");
function ze({ containerRef: e, inputRef: r, pushPasswordManagerStrategy: l, isFocused: u }) {
  let [S, p] = n.useState(!1), [k, T] = n.useState(!1), [A, N] = n.useState(!1), H = n.useMemo(() => l === "none" ? !1 : (l === "increase-width" || l === "experimental-no-flickering") && S && k, [S, k, l]), W = n.useCallback(() => {
    let f = e.current, C = r.current;
    if (!f || !C || A || l === "none") return;
    let g = f, E = g.getBoundingClientRect().left + g.offsetWidth, B = g.getBoundingClientRect().top + g.offsetHeight / 2, i = E - Le, L = B;
    document.querySelectorAll($e).length === 0 && document.elementFromPoint(i, L) === f || (p(!0), N(!0));
  }, [e, r, A, l]);
  return n.useEffect(() => {
    let f = e.current;
    if (!f || l === "none") return;
    function C() {
      let E = window.innerWidth - f.getBoundingClientRect().right;
      T(E >= ge);
    }
    C();
    let g = setInterval(C, 1e3);
    return () => {
      clearInterval(g);
    };
  }, [e, l]), n.useEffect(() => {
    let f = u || document.activeElement === r.current;
    if (l === "none" || !f) return;
    let C = setTimeout(W, 0), g = setTimeout(W, 2e3), E = setTimeout(W, 5e3), B = setTimeout(() => {
      N(!0);
    }, 6e3);
    return () => {
      clearTimeout(C), clearTimeout(g), clearTimeout(E), clearTimeout(B);
    };
  }, [r, u, l, W]), { hasPWMBadge: S, willPushPWMBadge: H, PWM_BADGE_SPACE_WIDTH: Ge };
}
var be = n.createContext({}), we = n.forwardRef((e, r) => {
  var l = e, { value: u, onChange: S, maxLength: p, textAlign: k = "left", pattern: T, placeholder: A, inputMode: N = "numeric", onComplete: H, pushPasswordManagerStrategy: W = "increase-width", pasteTransformer: f, containerClassName: C, noScriptCSSFallback: g = Ve, render: E, children: B } = l, i = Fe(l, ["value", "onChange", "maxLength", "textAlign", "pattern", "placeholder", "inputMode", "onComplete", "pushPasswordManagerStrategy", "pasteTransformer", "containerClassName", "noScriptCSSFallback", "render", "children"]), L, ne, re, ae, le;
  let [Se, Ee] = n.useState(typeof i.defaultValue == "string" ? i.defaultValue : ""), s = u ?? Se, R = He(s), G = n.useCallback((t) => {
    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?.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, (ae = c.current) == null ? void 0 : ae.selectionEnd, (le = c.current) == null ? void 0 : le.selectionDirection] });
  n.useImperativeHandle(r, () => c.current, []), n.useEffect(() => {
    let t = c.current, a = U.current;
    if (!t || !a) 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, P = 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 (P[0] !== null && P[1] !== null) {
              I = j < P[1] ? "backward" : "forward";
              let Te = P[0] === P[1] && P[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 = () => {
      a && a.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(() => {
    Ne(() => {
      var t, a, d, v;
      (t = c.current) == null || t.dispatchEvent(new Event("input"));
      let h = (a = c.current) == null ? void 0 : a.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?.(s);
  }, [p, H, R, s]);
  let F = ze({ containerRef: U, inputRef: c, pushPasswordManagerStrategy: W, isFocused: $ }), ue = n.useCallback((t) => {
    let a = t.currentTarget.value.slice(0, p);
    if (a.length > 0 && w && !w.test(a)) {
      t.preventDefault();
      return;
    }
    typeof R == "string" && a.length < R.length && document.dispatchEvent(new Event("selectionchange")), G(a);
  }, [p, G, R, w]), se = n.useCallback(() => {
    var t;
    if (c.current) {
      let a = Math.min(c.current.value.length, p - 1), d = c.current.value.length;
      (t = c.current) == null || t.setSelectionRange(a, d), z(a), V(d);
    }
    Y(!0);
  }, [p]), ce = n.useCallback((t) => {
    var a, 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 = (a = c.current) == null ? void 0 : a.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), P = b.length;
    v.setSelectionRange(D, P), z(D), V(P);
  }, [p, G, w, s]), Pe = 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: F.willPushPWMBadge ? `calc(100% + ${F.PWM_BADGE_SPACE_WIDTH})` : "100%", clipPath: F.willPushPWMBadge ? `inset(0 ${F.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" }), [F.PWM_BADGE_SPACE_WIDTH, F.willPushPWMBadge, k]), ye = n.useMemo(() => n.createElement("input", _e(Be({ 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: N, pattern: w?.source, "aria-placeholder": A, style: pe, maxLength: p, value: s, ref: c, onPaste: (t) => {
    var a;
    ce(t), (a = i.onPaste) == null || a.call(i, t);
  }, onChange: ue, onMouseOver: (t) => {
    var a;
    ie(!0), (a = i.onMouseOver) == null || a.call(i, t);
  }, onMouseLeave: (t) => {
    var a;
    ie(!1), (a = i.onMouseLeave) == null || a.call(i, t);
  }, onFocus: (t) => {
    var a;
    se(), (a = i.onFocus) == null || a.call(i, t);
  }, onBlur: (t) => {
    var a;
    Y(!1), (a = i.onBlur) == null || a.call(i, t);
  } })), [ue, se, ce, N, pe, p, _, O, i, w?.source, s]), ee = n.useMemo(() => ({ slots: Array.from({ length: p }).map((t, a) => {
    var d;
    let v = $ && O !== null && _ !== null && (O === _ && a === O || a >= O && a < _), h = s[a] !== void 0 ? s[a] : null, o = s[0] !== void 0 ? null : (d = A?.[a]) != 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: Pe, className: C }, Ce, n.createElement("div", { style: { position: "absolute", inset: 0, pointerEvents: "none" } }, ye)));
});
we.displayName = "Input";
function q(e, r) {
  try {
    e.insertRule(r);
  } catch {
    console.error("input-otp could not insert CSS rule:", r);
  }
}
var Ve = `
[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 qe = ({
  className: e,
  containerClassName: r,
  ...l
}) => /* @__PURE__ */ y(
  we,
  {
    "data-slot": "input-otp",
    containerClassName: K(
      "flex items-center gap-1.5 has-disabled:opacity-50",
      r
    ),
    className: K("disabled:cursor-not-allowed", e),
    ...l
  }
), Ze = ({
  className: e,
  ...r
}) => /* @__PURE__ */ y(
  "div",
  {
    "data-slot": "input-otp-group",
    className: K("flex items-center", e),
    ...r
  }
), Je = ({
  index: e,
  className: r,
  ...l
}) => {
  const u = Oe(be), { char: S, hasFakeCaret: p, isActive: k } = u.slots[e];
  return /* @__PURE__ */ Re(
    "div",
    {
      "data-slot": "input-otp-slot",
      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
      ),
      ...l,
      children: [
        S,
        p && /* @__PURE__ */ y("div", { className: "flex-center pointer-events-none absolute inset-0", children: /* @__PURE__ */ y("div", { className: "animate-caret-blink bg-foreground h-4 w-px duration-1000" }) })
      ]
    }
  );
}, et = ({ ...e }) => /* @__PURE__ */ y("div", { "data-slot": "input-otp-separator", role: "separator", ...e, children: /* @__PURE__ */ y(Ie, { className: "text-muted-foreground w-4" }) }), tt = ({ maxLength: e, ...r }) => /* @__PURE__ */ y(qe, { maxLength: e, ...r, children: /* @__PURE__ */ y(Ze, { children: De(e, (l) => /* @__PURE__ */ y(Je, { index: l }, l)) }) });
export {
  tt as I,
  Ze as a,
  qe as b,
  et as c,
  Je as d
};