@spear-ai/spectral 1.9.0 → 1.10.0

package/dist/InputOTP-XUWW9xcI.js

@@ -0,0 +1,461 @@
+import "./styles/main.css";
+import { MinusIcon as e } from "./Icons/MinusIcon.js";
+import { t } from "./twUtils-VNWgstKL.js";
+import { ErrorMessage as n, getErrorMessageId as r, useFormFieldId as i, useFormFieldState as a } from "./utils/formFieldUtils.js";
+import * as o from "react";
+import { createContext as s, useContext as c } from "react";
+import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region node_modules/.pnpm/input-otp@1.4.2_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/input-otp/dist/index.mjs
+var f = Object.defineProperty, p = Object.defineProperties, m = Object.getOwnPropertyDescriptors, h = Object.getOwnPropertySymbols, g = Object.prototype.hasOwnProperty, _ = Object.prototype.propertyIsEnumerable, v = (e, t, n) => t in e ? f(e, t, {
+	enumerable: !0,
+	configurable: !0,
+	writable: !0,
+	value: n
+}) : e[t] = n, y = (e, t) => {
+	for (var n in t ||= {}) g.call(t, n) && v(e, n, t[n]);
+	if (h) for (var n of h(t)) _.call(t, n) && v(e, n, t[n]);
+	return e;
+}, b = (e, t) => p(e, m(t)), x = (e, t) => {
+	var n = {};
+	for (var r in e) g.call(e, r) && t.indexOf(r) < 0 && (n[r] = e[r]);
+	if (e != null && h) for (var r of h(e)) t.indexOf(r) < 0 && _.call(e, r) && (n[r] = e[r]);
+	return n;
+};
+function S(e) {
+	return [
+		setTimeout(e, 0),
+		setTimeout(e, 10),
+		setTimeout(e, 50)
+	];
+}
+function C(e) {
+	let t = o.useRef();
+	return o.useEffect(() => {
+		t.current = e;
+	}), t.current;
+}
+var w = 18, T = 40, E = `${T}px`, D = [
+	"[data-lastpass-icon-root]",
+	"com-1password-button",
+	"[data-dashlanecreated]",
+	"[style$=\"2147483647 !important;\"]"
+].join(",");
+function ee({ containerRef: e, inputRef: t, pushPasswordManagerStrategy: n, isFocused: r }) {
+	let [i, a] = o.useState(!1), [s, c] = o.useState(!1), [l, u] = o.useState(!1), d = o.useMemo(() => n === "none" ? !1 : (n === "increase-width" || n === "experimental-no-flickering") && i && s, [
+		i,
+		s,
+		n
+	]), f = o.useCallback(() => {
+		let r = e.current, i = t.current;
+		if (!r || !i || l || n === "none") return;
+		let o = r, s = o.getBoundingClientRect().left + o.offsetWidth, c = o.getBoundingClientRect().top + o.offsetHeight / 2, d = s - w, f = c;
+		document.querySelectorAll(D).length === 0 && document.elementFromPoint(d, f) === r || (a(!0), u(!0));
+	}, [
+		e,
+		t,
+		l,
+		n
+	]);
+	return o.useEffect(() => {
+		let t = e.current;
+		if (!t || n === "none") return;
+		function r() {
+			c(window.innerWidth - t.getBoundingClientRect().right >= T);
+		}
+		r();
+		let i = setInterval(r, 1e3);
+		return () => {
+			clearInterval(i);
+		};
+	}, [e, n]), o.useEffect(() => {
+		let e = r || document.activeElement === t.current;
+		if (n === "none" || !e) return;
+		let i = setTimeout(f, 0), a = setTimeout(f, 2e3), o = setTimeout(f, 5e3), s = setTimeout(() => {
+			u(!0);
+		}, 6e3);
+		return () => {
+			clearTimeout(i), clearTimeout(a), clearTimeout(o), clearTimeout(s);
+		};
+	}, [
+		t,
+		r,
+		n,
+		f
+	]), {
+		hasPWMBadge: i,
+		willPushPWMBadge: d,
+		PWM_BADGE_SPACE_WIDTH: E
+	};
+}
+var O = o.createContext({}), k = o.forwardRef((e, t) => {
+	var n = e, { value: r, onChange: i, maxLength: a, textAlign: s = "left", pattern: c, placeholder: l, inputMode: u = "numeric", onComplete: d, pushPasswordManagerStrategy: f = "increase-width", pasteTransformer: p, containerClassName: m, noScriptCSSFallback: h = j, render: g, children: _ } = n, v = x(n, [
+		"value",
+		"onChange",
+		"maxLength",
+		"textAlign",
+		"pattern",
+		"placeholder",
+		"inputMode",
+		"onComplete",
+		"pushPasswordManagerStrategy",
+		"pasteTransformer",
+		"containerClassName",
+		"noScriptCSSFallback",
+		"render",
+		"children"
+	]), w;
+	let [T, E] = o.useState(typeof v.defaultValue == "string" ? v.defaultValue : ""), D = r ?? T, k = C(D), M = o.useCallback((e) => {
+		i?.(e), E(e);
+	}, [i]), N = o.useMemo(() => c ? typeof c == "string" ? new RegExp(c) : c : null, [c]), P = o.useRef(null), F = o.useRef(null), I = o.useRef({
+		value: D,
+		onChange: M,
+		isIOS: typeof window < "u" && ((w = window == null ? void 0 : window.CSS)?.supports)?.call(w, "-webkit-touch-callout", "none")
+	}), L = o.useRef({ prev: [
+		P.current?.selectionStart,
+		P.current?.selectionEnd,
+		P.current?.selectionDirection
+	] });
+	o.useImperativeHandle(t, () => P.current, []), o.useEffect(() => {
+		let e = P.current, t = F.current;
+		if (!e || !t) return;
+		I.current.value !== e.value && I.current.onChange(e.value), L.current.prev = [
+			e.selectionStart,
+			e.selectionEnd,
+			e.selectionDirection
+		];
+		function n() {
+			if (document.activeElement !== e) {
+				U(null), G(null);
+				return;
+			}
+			let t = e.selectionStart, n = e.selectionEnd, r = e.selectionDirection, i = e.maxLength, a = e.value, o = L.current.prev, s = -1, c = -1, l;
+			if (a.length !== 0 && t !== null && n !== null) {
+				let e = t === n, r = t === a.length && a.length < i;
+				if (e && !r) {
+					let e = t;
+					if (e === 0) s = 0, c = 1, l = "forward";
+					else if (e === i) s = e - 1, c = e, l = "backward";
+					else if (i > 1 && a.length > 1) {
+						let t = 0;
+						if (o[0] !== null && o[1] !== null) {
+							l = e < o[1] ? "backward" : "forward";
+							let n = o[0] === o[1] && o[0] < i;
+							l === "backward" && !n && (t = -1);
+						}
+						s = t + e, c = t + e + 1;
+					}
+				}
+				s !== -1 && c !== -1 && s !== c && P.current.setSelectionRange(s, c, l);
+			}
+			let u = s === -1 ? t : s, d = c === -1 ? n : c, f = l ?? r;
+			U(u), G(d), L.current.prev = [
+				u,
+				d,
+				f
+			];
+		}
+		if (document.addEventListener("selectionchange", n, { capture: !0 }), n(), document.activeElement === e && V(!0), !document.getElementById("input-otp-style")) {
+			let e = document.createElement("style");
+			if (e.id = "input-otp-style", document.head.appendChild(e), e.sheet) {
+				let t = "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;";
+				A(e.sheet, "[data-input-otp]::selection { background: transparent !important; color: transparent !important; }"), A(e.sheet, `[data-input-otp]:autofill { ${t} }`), A(e.sheet, `[data-input-otp]:-webkit-autofill { ${t} }`), A(e.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; } }"), A(e.sheet, "[data-input-otp] + * { pointer-events: all !important; }");
+			}
+		}
+		let r = () => {
+			t && t.style.setProperty("--root-height", `${e.clientHeight}px`);
+		};
+		r();
+		let i = new ResizeObserver(r);
+		return i.observe(e), () => {
+			document.removeEventListener("selectionchange", n, { capture: !0 }), i.disconnect();
+		};
+	}, []);
+	let [R, z] = o.useState(!1), [B, V] = o.useState(!1), [H, U] = o.useState(null), [W, G] = o.useState(null);
+	o.useEffect(() => {
+		S(() => {
+			var e;
+			(e = P.current) == null || e.dispatchEvent(new Event("input"));
+			let t = P.current?.selectionStart, n = P.current?.selectionEnd, r = P.current?.selectionDirection;
+			t !== null && n !== null && (U(t), G(n), L.current.prev = [
+				t,
+				n,
+				r
+			]);
+		});
+	}, [D, B]), o.useEffect(() => {
+		k !== void 0 && D !== k && k.length < a && D.length === a && d?.(D);
+	}, [
+		a,
+		d,
+		k,
+		D
+	]);
+	let K = ee({
+		containerRef: F,
+		inputRef: P,
+		pushPasswordManagerStrategy: f,
+		isFocused: B
+	}), q = o.useCallback((e) => {
+		let t = e.currentTarget.value.slice(0, a);
+		if (t.length > 0 && N && !N.test(t)) {
+			e.preventDefault();
+			return;
+		}
+		typeof k == "string" && t.length < k.length && document.dispatchEvent(new Event("selectionchange")), M(t);
+	}, [
+		a,
+		M,
+		k,
+		N
+	]), J = o.useCallback(() => {
+		var e;
+		if (P.current) {
+			let t = Math.min(P.current.value.length, a - 1), n = P.current.value.length;
+			(e = P.current) == null || e.setSelectionRange(t, n), U(t), G(n);
+		}
+		V(!0);
+	}, [a]), Y = o.useCallback((e) => {
+		let t = P.current;
+		if (!p && (!I.current.isIOS || !e.clipboardData || !t)) return;
+		let n = e.clipboardData.getData("text/plain"), r = p ? p(n) : n;
+		e.preventDefault();
+		let i = P.current?.selectionStart, o = P.current?.selectionEnd, s = (i === o ? D.slice(0, i) + r + D.slice(i) : D.slice(0, i) + r + D.slice(o)).slice(0, a);
+		if (s.length > 0 && N && !N.test(s)) return;
+		t.value = s, M(s);
+		let c = Math.min(s.length, a - 1), l = s.length;
+		t.setSelectionRange(c, l), U(c), G(l);
+	}, [
+		a,
+		M,
+		N,
+		D
+	]), X = o.useMemo(() => ({
+		position: "relative",
+		cursor: v.disabled ? "default" : "text",
+		userSelect: "none",
+		WebkitUserSelect: "none",
+		pointerEvents: "none"
+	}), [v.disabled]), Z = o.useMemo(() => ({
+		position: "absolute",
+		inset: 0,
+		width: K.willPushPWMBadge ? `calc(100% + ${K.PWM_BADGE_SPACE_WIDTH})` : "100%",
+		clipPath: K.willPushPWMBadge ? `inset(0 ${K.PWM_BADGE_SPACE_WIDTH} 0 0)` : void 0,
+		height: "100%",
+		display: "flex",
+		textAlign: s,
+		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"
+	}), [
+		K.PWM_BADGE_SPACE_WIDTH,
+		K.willPushPWMBadge,
+		s
+	]), Q = o.useMemo(() => o.createElement("input", b(y({ autoComplete: v.autoComplete || "one-time-code" }, v), {
+		"data-input-otp": !0,
+		"data-input-otp-placeholder-shown": D.length === 0 || void 0,
+		"data-input-otp-mss": H,
+		"data-input-otp-mse": W,
+		inputMode: u,
+		pattern: N?.source,
+		"aria-placeholder": l,
+		style: Z,
+		maxLength: a,
+		value: D,
+		ref: P,
+		onPaste: (e) => {
+			var t;
+			Y(e), (t = v.onPaste) == null || t.call(v, e);
+		},
+		onChange: q,
+		onMouseOver: (e) => {
+			var t;
+			z(!0), (t = v.onMouseOver) == null || t.call(v, e);
+		},
+		onMouseLeave: (e) => {
+			var t;
+			z(!1), (t = v.onMouseLeave) == null || t.call(v, e);
+		},
+		onFocus: (e) => {
+			var t;
+			J(), (t = v.onFocus) == null || t.call(v, e);
+		},
+		onBlur: (e) => {
+			var t;
+			V(!1), (t = v.onBlur) == null || t.call(v, e);
+		}
+	})), [
+		q,
+		J,
+		Y,
+		u,
+		Z,
+		a,
+		W,
+		H,
+		v,
+		N?.source,
+		D
+	]), $ = o.useMemo(() => ({
+		slots: Array.from({ length: a }).map((e, t) => {
+			let n = B && H !== null && W !== null && (H === W && t === H || t >= H && t < W), r = D[t] === void 0 ? null : D[t];
+			return {
+				char: r,
+				placeholderChar: D[0] === void 0 ? l?.[t] ?? null : null,
+				isActive: n,
+				hasFakeCaret: n && r === null
+			};
+		}),
+		isFocused: B,
+		isHovering: !v.disabled && R
+	}), [
+		B,
+		R,
+		a,
+		W,
+		H,
+		v.disabled,
+		D
+	]), te = o.useMemo(() => g ? g($) : o.createElement(O.Provider, { value: $ }, _), [
+		_,
+		$,
+		g
+	]);
+	return o.createElement(o.Fragment, null, h !== null && o.createElement("noscript", null, o.createElement("style", null, h)), o.createElement("div", {
+		ref: F,
+		"data-input-otp-container": !0,
+		style: X,
+		className: m
+	}, te, o.createElement("div", { style: {
+		position: "absolute",
+		inset: 0,
+		pointerEvents: "none"
+	} }, Q)));
+});
+k.displayName = "Input";
+function A(e, t) {
+	try {
+		e.insertRule(t);
+	} catch {
+		console.error("input-otp could not insert CSS rule:", t);
+	}
+}
+var j = "\n[data-input-otp] {\n  --nojs-bg: white !important;\n  --nojs-fg: black !important;\n\n  background-color: var(--nojs-bg) !important;\n  color: var(--nojs-fg) !important;\n  caret-color: var(--nojs-fg) !important;\n  letter-spacing: .25em !important;\n  text-align: center !important;\n  border: 1px solid var(--nojs-fg) !important;\n  border-radius: 4px !important;\n  width: 100% !important;\n}\n@media (prefers-color-scheme: dark) {\n  [data-input-otp] {\n    --nojs-bg: black !important;\n    --nojs-fg: white !important;\n  }\n}", M = s({}), N = s(null), P = () => {
+	let e = c(N);
+	if (!e) throw Error("useRoot must be used within an InputOTP");
+	return e;
+}, F = ({ autoFocus: e = !1, children: o, className: s, errorMessage: c, id: l, inputMode: f = "numeric", maxLength: p, name: m, onChange: h, onComplete: g, pattern: _, ref: v, state: y = "default", value: b, variant: x = "outlined", ...S }) => {
+	let C = i(l, m), { isInvalid: w } = a(!1, y), T = _ ?? (f === "numeric" ? "^\\d+$" : void 0), E = (e) => {
+		let t = e.clipboardData.getData("text/plain").trim().replaceAll("-", "");
+		f === "numeric" && (t = t.replace(/\D/g, "")), t.length === p && typeof h == "function" && h(t);
+	};
+	return /* @__PURE__ */ u(M.Provider, {
+		value: { isInvalid: w },
+		children: /* @__PURE__ */ d("div", {
+			className: "gap-y-1 flex w-max flex-col",
+			children: [/* @__PURE__ */ u(k, {
+				autoFocus: e,
+				containerClassName: t("gap-2 flex items-center disabled:cursor-not-allowed has-[disabled]:opacity-50", s),
+				"data-1p-ignore": "true",
+				"data-dashlane-disabled-on-field": "true",
+				"data-lpignore": "true",
+				"data-protonpass-ignore": "true",
+				"data-testid": "spectral-input-otp",
+				id: C,
+				inputMode: f,
+				maxLength: p,
+				onChange: h,
+				onComplete: g,
+				onPaste: E,
+				pasteTransformer: (e) => e.replaceAll("-", ""),
+				pattern: T,
+				pushPasswordManagerStrategy: "none",
+				ref: v,
+				role: "textbox",
+				textAlign: "center",
+				value: b,
+				...S,
+				render: ({ slots: e }) => /* @__PURE__ */ u(N.Provider, {
+					value: {
+						slots: e,
+						variant: x,
+						maxLength: p
+					},
+					children: o ?? /* @__PURE__ */ u(I, { children: /* @__PURE__ */ u(R, {}) })
+				})
+			}), w && c && /* @__PURE__ */ u(n, {
+				dataTestId: "spectral-input-otp-error-message",
+				id: r(C),
+				message: c
+			})]
+		})
+	});
+};
+F.displayName = "InputOTP";
+var I = ({ ref: e, ...t }) => /* @__PURE__ */ u("div", {
+	className: "gap-x-2 flex items-center justify-center",
+	"data-testid": "spectral-input-otp-group",
+	ref: e,
+	...t
+});
+I.displayName = "InputOTP.Group";
+var L = ({ className: e, index: n, ref: r, ...i }) => {
+	let { variant: a = "outlined", slots: o = [] } = P(), { isInvalid: s } = c(M), l = o[n] || {
+		char: "",
+		hasFakeCaret: !0,
+		isActive: !1
+	};
+	return /* @__PURE__ */ d("div", {
+		className: t("h-12 w-10 relative z-10 flex items-center justify-center rounded-[8px] border transition duration-200 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2", a === "filled" ? "border-level-one bg-level-one" : "border-input-otp-border bg-transparent", !s && "border", s && "border-2 border-danger-400 focus-visible:outline-danger-400", l.isActive && !s && "z-10 outline-2 outline-offset-2 outline-input-otp-border--focus", l.isActive && s && "outline-2 outline-offset-2 outline-danger-400", e),
+		"data-index": n,
+		"data-testid": "spectral-input-otp-slot",
+		"data-variant": a,
+		ref: r,
+		...i,
+		children: [l.char, l.hasFakeCaret && /* @__PURE__ */ u("div", {
+			className: "inset-0 pointer-events-none absolute flex items-center justify-center motion-safe:animate-caret-blink",
+			children: /* @__PURE__ */ u("div", { className: "h-8 w-px bg-input-otp-caret" })
+		})]
+	});
+};
+L.displayName = "InputOTP.Slot";
+var R = ({ start: e = 0, count: t, className: n }) => {
+	let { maxLength: r = 0 } = P(), i = t === void 0 ? r : e + t;
+	return /* @__PURE__ */ u(l, { children: Array.from({ length: i - e }, (t, n) => e + n).map((e) => /* @__PURE__ */ u(L, {
+		index: e,
+		className: n
+	}, e)) });
+};
+R.displayName = "InputOTP.Slots";
+var z = ({ ref: t, ...n }) => {
+	let { variant: r = "outlined" } = P();
+	return /* @__PURE__ */ u("div", {
+		ref: t,
+		role: "separator",
+		...n,
+		"data-testid": "spectral-input-otp-separator",
+		"data-variant": r,
+		children: /* @__PURE__ */ u(e, {
+			size: 24,
+			color: r === "filled" ? "var(--color-input-otp-filled-separator)" : "var(--color-input-otp-border)"
+		})
+	});
+};
+z.displayName = "InputOTP.Separator";
+var B = Object.assign(F, {
+	Group: I,
+	Slot: L,
+	Slots: R,
+	Separator: z
+});
+//#endregion
+export { B as t };