@wakastellar/ui 4.0.0-dev.0 → 4.0.1

package/dist/components/waka-two-factor-setup/index.es.js

@@ -0,0 +1,610 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import * as t from "react";
+import { AlertCircle as n, Check as r, ChevronLeft as i, ChevronRight as a, Copy as o, Download as s, ExternalLink as c, Eye as l, EyeOff as u, Key as d, Loader2 as f, QrCode as p, RefreshCw as m, Shield as h, Smartphone as g } from "lucide-react";
+import { Fragment as _, jsx as v, jsxs as y } from "react/jsx-runtime";
+//#region src/components/waka-two-factor-setup/index.tsx
+var b = [
+	{
+		name: "Google Authenticator",
+		iosUrl: "https://apps.apple.com/app/google-authenticator/id388497605",
+		androidUrl: "https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2"
+	},
+	{
+		name: "Authy",
+		iosUrl: "https://apps.apple.com/app/authy/id494168017",
+		androidUrl: "https://play.google.com/store/apps/details?id=com.authy.authy"
+	},
+	{
+		name: "1Password",
+		iosUrl: "https://apps.apple.com/app/1password-password-manager/id568903335",
+		androidUrl: "https://play.google.com/store/apps/details?id=com.onepassword.android"
+	}
+], x = [
+	"intro",
+	"qr-code",
+	"backup-codes",
+	"verify",
+	"success"
+];
+function S(e) {
+	let { config: n, onVerify: r, onRegenerateBackupCodes: i, onRegenerateSecret: a, onComplete: o, initialStep: s = "intro" } = e, [c, l] = t.useState(s), [u, d] = t.useState(""), [f, p] = t.useState(!1), [m, h] = t.useState(null), [g, _] = t.useState(!1), [v, y] = t.useState(!1), [b, S] = t.useState(!1), [C, w] = t.useState(!1), [T, E] = t.useState(n.backupCodes), [D, O] = t.useState(n.secretKey), [k, A] = t.useState(n.qrCodeUrl), [j, M] = t.useState(!1), N = t.useCallback((e) => {
+		l(e), h(null);
+	}, []);
+	return {
+		currentStep: c,
+		setStep: N,
+		nextStep: t.useCallback(() => {
+			let e = x.indexOf(c);
+			e < x.length - 1 && N(x[e + 1]);
+		}, [c, N]),
+		prevStep: t.useCallback(() => {
+			let e = x.indexOf(c);
+			e > 0 && N(x[e - 1]);
+		}, [c, N]),
+		verificationCode: u,
+		setVerificationCode: d,
+		isVerifying: f,
+		verifyError: m,
+		handleVerify: t.useCallback(async () => {
+			if (u.length !== 6) {
+				h("Please enter a 6-digit code");
+				return;
+			}
+			p(!0), h(null);
+			try {
+				await r(u) ? (M(!0), N("success"), o?.()) : h("Invalid verification code. Please try again.");
+			} catch (e) {
+				h(e instanceof Error ? e.message : "Verification failed");
+			} finally {
+				p(!1);
+			}
+		}, [
+			u,
+			r,
+			o,
+			N
+		]),
+		secretKeyCopied: g,
+		copySecretKey: t.useCallback(() => {
+			navigator.clipboard.writeText(D), _(!0), setTimeout(() => _(!1), 2e3);
+		}, [D]),
+		backupCodesCopied: v,
+		copyBackupCodes: t.useCallback(() => {
+			let e = T.map((e) => e.code).join("\n");
+			navigator.clipboard.writeText(e), y(!0), setTimeout(() => y(!1), 2e3);
+		}, [T]),
+		downloadBackupCodes: t.useCallback(() => {
+			let e = [
+				`${n.issuer} - Backup Codes`,
+				`Account: ${n.accountName}`,
+				`Generated: ${(/* @__PURE__ */ new Date()).toISOString()}`,
+				"",
+				"Keep these codes safe. Each code can only be used once.",
+				"",
+				...T.map((e, t) => `${t + 1}. ${e.code}`)
+			].join("\n"), t = new Blob([e], { type: "text/plain" }), r = URL.createObjectURL(t), i = document.createElement("a");
+			i.href = r, i.download = `${n.issuer.toLowerCase().replace(/\s+/g, "-")}-backup-codes.txt`, document.body.appendChild(i), i.click(), document.body.removeChild(i), URL.revokeObjectURL(r);
+		}, [
+			T,
+			n.issuer,
+			n.accountName
+		]),
+		isRegeneratingCodes: b,
+		regenerateBackupCodes: t.useCallback(async () => {
+			if (i) {
+				S(!0);
+				try {
+					E(await i());
+				} catch (e) {
+					console.error("Failed to regenerate backup codes:", e);
+				} finally {
+					S(!1);
+				}
+			}
+		}, [i]),
+		isRegeneratingSecret: C,
+		regenerateSecret: t.useCallback(async () => {
+			if (a) {
+				w(!0);
+				try {
+					let e = await a();
+					O(e.secretKey), A(e.qrCodeUrl);
+				} catch (e) {
+					console.error("Failed to regenerate secret:", e);
+				} finally {
+					w(!1);
+				}
+			}
+		}, [a]),
+		backupCodes: T,
+		secretKey: D,
+		qrCodeUrl: k,
+		isComplete: j
+	};
+}
+function C({ currentStep: n, className: i }) {
+	let a = [
+		{
+			key: "intro",
+			label: "Start"
+		},
+		{
+			key: "qr-code",
+			label: "Scan"
+		},
+		{
+			key: "backup-codes",
+			label: "Backup"
+		},
+		{
+			key: "verify",
+			label: "Verify"
+		},
+		{
+			key: "success",
+			label: "Done"
+		}
+	], o = x.indexOf(n);
+	return /* @__PURE__ */ v("div", {
+		className: e("flex items-center justify-center gap-2", i),
+		children: a.map((n, i) => /* @__PURE__ */ y(t.Fragment, { children: [/* @__PURE__ */ y("div", {
+			className: "flex flex-col items-center gap-1",
+			children: [/* @__PURE__ */ v("div", {
+				className: e("w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium transition-all duration-300", i < o && "bg-primary text-primary-foreground", i === o && "bg-primary text-primary-foreground ring-4 ring-primary/20", i > o && "bg-muted text-muted-foreground"),
+				children: i < o ? /* @__PURE__ */ v(r, { className: "w-4 h-4" }) : i + 1
+			}), /* @__PURE__ */ v("span", {
+				className: e("text-xs hidden sm:block", i <= o ? "text-foreground" : "text-muted-foreground"),
+				children: n.label
+			})]
+		}), i < a.length - 1 && /* @__PURE__ */ v("div", { className: e("w-8 sm:w-12 h-0.5 transition-colors duration-300", i < o ? "bg-primary" : "bg-muted") })] }, n.key))
+	});
+}
+function w({ authenticatorApps: e, onNext: t, onCancel: n }) {
+	return /* @__PURE__ */ y("div", {
+		className: "space-y-6 animate-in fade-in slide-in-from-right-4 duration-300",
+		children: [
+			/* @__PURE__ */ y("div", {
+				className: "text-center space-y-2",
+				children: [
+					/* @__PURE__ */ v("div", {
+						className: "mx-auto w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center",
+						children: /* @__PURE__ */ v(h, { className: "w-8 h-8 text-primary" })
+					}),
+					/* @__PURE__ */ v("h3", {
+						className: "text-xl font-semibold",
+						children: "Enable Two-Factor Authentication"
+					}),
+					/* @__PURE__ */ v("p", {
+						className: "text-muted-foreground text-sm max-w-md mx-auto",
+						children: "Add an extra layer of security to your account by requiring a verification code in addition to your password."
+					})
+				]
+			}),
+			/* @__PURE__ */ y("div", {
+				className: "space-y-3",
+				children: [/* @__PURE__ */ v("h4", {
+					className: "text-sm font-medium",
+					children: "You will need an authenticator app:"
+				}), /* @__PURE__ */ v("div", {
+					className: "grid gap-2",
+					children: e.map((e) => /* @__PURE__ */ y("div", {
+						className: "flex items-center justify-between p-3 bg-muted/50 rounded-lg",
+						children: [/* @__PURE__ */ y("div", {
+							className: "flex items-center gap-3",
+							children: [/* @__PURE__ */ v(g, { className: "w-5 h-5 text-muted-foreground" }), /* @__PURE__ */ v("span", {
+								className: "text-sm font-medium",
+								children: e.name
+							})]
+						}), /* @__PURE__ */ y("div", {
+							className: "flex gap-2",
+							children: [/* @__PURE__ */ y("a", {
+								href: e.iosUrl,
+								target: "_blank",
+								rel: "noopener noreferrer",
+								className: "text-xs text-primary hover:underline flex items-center gap-1",
+								children: ["iOS ", /* @__PURE__ */ v(c, { className: "w-3 h-3" })]
+							}), /* @__PURE__ */ y("a", {
+								href: e.androidUrl,
+								target: "_blank",
+								rel: "noopener noreferrer",
+								className: "text-xs text-primary hover:underline flex items-center gap-1",
+								children: ["Android ", /* @__PURE__ */ v(c, { className: "w-3 h-3" })]
+							})]
+						})]
+					}, e.name))
+				})]
+			}),
+			/* @__PURE__ */ y("div", {
+				className: "flex gap-3 pt-4",
+				children: [n && /* @__PURE__ */ v("button", {
+					onClick: n,
+					className: "flex-1 px-4 py-2 text-sm font-medium rounded-lg border border-input bg-background hover:bg-accent hover:text-accent-foreground transition-colors",
+					children: "Cancel"
+				}), /* @__PURE__ */ y("button", {
+					onClick: t,
+					className: "flex-1 px-4 py-2 text-sm font-medium rounded-lg bg-primary text-primary-foreground hover:bg-primary/90 transition-colors flex items-center justify-center gap-2",
+					children: ["Get Started", /* @__PURE__ */ v(a, { className: "w-4 h-4" })]
+				})]
+			})
+		]
+	});
+}
+function T({ qrCodeUrl: n, secretKey: s, issuer: c, secretKeyCopied: h, onCopySecret: g, onRegenerateSecret: _, isRegeneratingSecret: b, onNext: x, onBack: S }) {
+	let [C, w] = t.useState(!1);
+	return /* @__PURE__ */ y("div", {
+		className: "space-y-6 animate-in fade-in slide-in-from-right-4 duration-300",
+		children: [
+			/* @__PURE__ */ y("div", {
+				className: "text-center space-y-2",
+				children: [/* @__PURE__ */ v("h3", {
+					className: "text-xl font-semibold",
+					children: "Scan QR Code"
+				}), /* @__PURE__ */ v("p", {
+					className: "text-muted-foreground text-sm",
+					children: "Open your authenticator app and scan this QR code to add your account."
+				})]
+			}),
+			/* @__PURE__ */ y("div", {
+				className: "flex flex-col items-center gap-4",
+				children: [/* @__PURE__ */ y("div", {
+					className: "relative p-4 bg-white rounded-xl shadow-sm",
+					children: [n ? /* @__PURE__ */ v("img", {
+						src: n,
+						alt: "2FA QR Code",
+						className: e("w-48 h-48 transition-opacity", b && "opacity-50")
+					}) : /* @__PURE__ */ v("div", {
+						className: "w-48 h-48 flex items-center justify-center bg-muted rounded-lg",
+						children: /* @__PURE__ */ v(p, { className: "w-16 h-16 text-muted-foreground" })
+					}), b && /* @__PURE__ */ v("div", {
+						className: "absolute inset-0 flex items-center justify-center",
+						children: /* @__PURE__ */ v(f, { className: "w-8 h-8 animate-spin text-primary" })
+					})]
+				}), _ && /* @__PURE__ */ y("button", {
+					onClick: _,
+					disabled: b,
+					className: "text-sm text-primary hover:underline flex items-center gap-1 disabled:opacity-50",
+					children: [/* @__PURE__ */ v(m, { className: e("w-4 h-4", b && "animate-spin") }), "Generate new code"]
+				})]
+			}),
+			/* @__PURE__ */ y("div", {
+				className: "space-y-2",
+				children: [
+					/* @__PURE__ */ y("div", {
+						className: "flex items-center justify-between",
+						children: [/* @__PURE__ */ y("span", {
+							className: "text-sm font-medium flex items-center gap-2",
+							children: [/* @__PURE__ */ v(d, { className: "w-4 h-4" }), "Manual entry key"]
+						}), /* @__PURE__ */ y("button", {
+							onClick: () => w(!C),
+							className: "text-sm text-muted-foreground hover:text-foreground flex items-center gap-1",
+							children: [v(C ? u : l, { className: "w-4 h-4" }), C ? "Hide" : "Show"]
+						})]
+					}),
+					/* @__PURE__ */ y("div", {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ v("code", {
+							className: e("flex-1 px-3 py-2 bg-muted rounded-lg text-sm font-mono break-all", !C && "tracking-[0.5em] select-none"),
+							children: C ? s : "••••••••••••••••"
+						}), /* @__PURE__ */ v("button", {
+							onClick: g,
+							className: "p-2 rounded-lg border border-input hover:bg-accent transition-colors",
+							title: "Copy to clipboard",
+							children: h ? /* @__PURE__ */ v(r, { className: "w-4 h-4 text-green-500" }) : /* @__PURE__ */ v(o, { className: "w-4 h-4" })
+						})]
+					}),
+					/* @__PURE__ */ y("p", {
+						className: "text-xs text-muted-foreground",
+						children: [
+							"Account: ",
+							c,
+							" (",
+							s.substring(0, 4),
+							"...)"
+						]
+					})
+				]
+			}),
+			/* @__PURE__ */ y("div", {
+				className: "flex gap-3 pt-4",
+				children: [/* @__PURE__ */ y("button", {
+					onClick: S,
+					className: "flex-1 px-4 py-2 text-sm font-medium rounded-lg border border-input bg-background hover:bg-accent hover:text-accent-foreground transition-colors flex items-center justify-center gap-2",
+					children: [/* @__PURE__ */ v(i, { className: "w-4 h-4" }), "Back"]
+				}), /* @__PURE__ */ y("button", {
+					onClick: x,
+					className: "flex-1 px-4 py-2 text-sm font-medium rounded-lg bg-primary text-primary-foreground hover:bg-primary/90 transition-colors flex items-center justify-center gap-2",
+					children: ["Continue", /* @__PURE__ */ v(a, { className: "w-4 h-4" })]
+				})]
+			})
+		]
+	});
+}
+function E({ backupCodes: t, backupCodesCopied: c, onCopyBackupCodes: l, onDownloadBackupCodes: u, onRegenerateBackupCodes: f, isRegeneratingCodes: p, onNext: h, onBack: g }) {
+	return /* @__PURE__ */ y("div", {
+		className: "space-y-6 animate-in fade-in slide-in-from-right-4 duration-300",
+		children: [
+			/* @__PURE__ */ y("div", {
+				className: "text-center space-y-2",
+				children: [
+					/* @__PURE__ */ v("div", {
+						className: "mx-auto w-16 h-16 bg-amber-500/10 rounded-full flex items-center justify-center",
+						children: /* @__PURE__ */ v(d, { className: "w-8 h-8 text-amber-500" })
+					}),
+					/* @__PURE__ */ v("h3", {
+						className: "text-xl font-semibold",
+						children: "Save Backup Codes"
+					}),
+					/* @__PURE__ */ v("p", {
+						className: "text-muted-foreground text-sm max-w-md mx-auto",
+						children: "Save these codes in a safe place. You can use them to access your account if you lose your authenticator device."
+					})
+				]
+			}),
+			/* @__PURE__ */ y("div", {
+				className: "space-y-3",
+				children: [
+					/* @__PURE__ */ v("div", {
+						className: e("grid grid-cols-2 gap-2 p-4 bg-muted/50 rounded-lg font-mono text-sm", p && "opacity-50"),
+						children: t.map((t, n) => /* @__PURE__ */ v("div", {
+							className: e("px-3 py-2 bg-background rounded border text-center", t.used && "line-through text-muted-foreground"),
+							children: t.code
+						}, n))
+					}),
+					/* @__PURE__ */ y("div", {
+						className: "flex gap-2",
+						children: [/* @__PURE__ */ v("button", {
+							onClick: l,
+							disabled: p,
+							className: "flex-1 px-3 py-2 text-sm font-medium rounded-lg border border-input bg-background hover:bg-accent hover:text-accent-foreground transition-colors flex items-center justify-center gap-2 disabled:opacity-50",
+							children: c ? /* @__PURE__ */ y(_, { children: [/* @__PURE__ */ v(r, { className: "w-4 h-4 text-green-500" }), "Copied!"] }) : /* @__PURE__ */ y(_, { children: [/* @__PURE__ */ v(o, { className: "w-4 h-4" }), "Copy All"] })
+						}), /* @__PURE__ */ y("button", {
+							onClick: u,
+							disabled: p,
+							className: "flex-1 px-3 py-2 text-sm font-medium rounded-lg border border-input bg-background hover:bg-accent hover:text-accent-foreground transition-colors flex items-center justify-center gap-2 disabled:opacity-50",
+							children: [/* @__PURE__ */ v(s, { className: "w-4 h-4" }), "Download"]
+						})]
+					}),
+					f && /* @__PURE__ */ y("button", {
+						onClick: f,
+						disabled: p,
+						className: "w-full text-sm text-primary hover:underline flex items-center justify-center gap-1 disabled:opacity-50",
+						children: [/* @__PURE__ */ v(m, { className: e("w-4 h-4", p && "animate-spin") }), "Generate new codes"]
+					})
+				]
+			}),
+			/* @__PURE__ */ v("div", {
+				className: "p-3 bg-amber-50 dark:bg-amber-950/30 border border-amber-200 dark:border-amber-800 rounded-lg",
+				children: /* @__PURE__ */ y("p", {
+					className: "text-sm text-amber-800 dark:text-amber-200 flex items-start gap-2",
+					children: [/* @__PURE__ */ v(n, { className: "w-4 h-4 mt-0.5 flex-shrink-0" }), /* @__PURE__ */ y("span", { children: [/* @__PURE__ */ v("strong", { children: "Important:" }), " Each code can only be used once. Store them securely and do not share them with anyone."] })]
+				})
+			}),
+			/* @__PURE__ */ y("div", {
+				className: "flex gap-3 pt-4",
+				children: [/* @__PURE__ */ y("button", {
+					onClick: g,
+					className: "flex-1 px-4 py-2 text-sm font-medium rounded-lg border border-input bg-background hover:bg-accent hover:text-accent-foreground transition-colors flex items-center justify-center gap-2",
+					children: [/* @__PURE__ */ v(i, { className: "w-4 h-4" }), "Back"]
+				}), /* @__PURE__ */ y("button", {
+					onClick: h,
+					className: "flex-1 px-4 py-2 text-sm font-medium rounded-lg bg-primary text-primary-foreground hover:bg-primary/90 transition-colors flex items-center justify-center gap-2",
+					children: ["I have saved these codes", /* @__PURE__ */ v(a, { className: "w-4 h-4" })]
+				})]
+			})
+		]
+	});
+}
+function D({ verificationCode: r, onCodeChange: o, onVerify: s, isVerifying: c, error: l, onBack: u }) {
+	let d = t.useRef([]), [p, m] = t.useState(r.split("").concat(Array(6 - r.length).fill(""))), h = (e, t) => {
+		if (!/^\d*$/.test(t)) return;
+		let n = [...p];
+		n[e] = t.slice(-1), m(n), o(n.join("")), t && e < 5 && d.current[e + 1]?.focus();
+	}, b = (e, t) => {
+		t.key === "Backspace" && !p[e] && e > 0 && d.current[e - 1]?.focus(), t.key === "Enter" && r.length === 6 && s();
+	}, x = (e) => {
+		e.preventDefault();
+		let t = e.clipboardData.getData("text").replace(/\D/g, "").slice(0, 6);
+		m(t.split("").concat(Array(6 - t.length).fill(""))), o(t), d.current[Math.min(t.length, 5)]?.focus();
+	};
+	return /* @__PURE__ */ y("div", {
+		className: "space-y-6 animate-in fade-in slide-in-from-right-4 duration-300",
+		children: [
+			/* @__PURE__ */ y("div", {
+				className: "text-center space-y-2",
+				children: [
+					/* @__PURE__ */ v("div", {
+						className: "mx-auto w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center",
+						children: /* @__PURE__ */ v(g, { className: "w-8 h-8 text-primary" })
+					}),
+					/* @__PURE__ */ v("h3", {
+						className: "text-xl font-semibold",
+						children: "Verify Your Code"
+					}),
+					/* @__PURE__ */ v("p", {
+						className: "text-muted-foreground text-sm max-w-md mx-auto",
+						children: "Enter the 6-digit code from your authenticator app to complete the setup."
+					})
+				]
+			}),
+			/* @__PURE__ */ y("div", {
+				className: "space-y-4",
+				children: [/* @__PURE__ */ v("div", {
+					className: "flex justify-center gap-2",
+					children: p.map((t, n) => /* @__PURE__ */ v("input", {
+						ref: (e) => {
+							d.current[n] = e;
+						},
+						type: "text",
+						inputMode: "numeric",
+						maxLength: 1,
+						value: t,
+						onChange: (e) => h(n, e.target.value),
+						onKeyDown: (e) => b(n, e),
+						onPaste: x,
+						className: e("w-12 h-14 text-center text-xl font-semibold rounded-lg border bg-background", "focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent", "transition-all duration-200", l && "border-destructive focus:ring-destructive"),
+						disabled: c
+					}, n))
+				}), l && /* @__PURE__ */ y("div", {
+					className: "flex items-center justify-center gap-2 text-sm text-destructive animate-in fade-in slide-in-from-top-2",
+					children: [/* @__PURE__ */ v(n, { className: "w-4 h-4" }), l]
+				})]
+			}),
+			/* @__PURE__ */ y("div", {
+				className: "flex gap-3 pt-4",
+				children: [/* @__PURE__ */ y("button", {
+					onClick: u,
+					disabled: c,
+					className: "flex-1 px-4 py-2 text-sm font-medium rounded-lg border border-input bg-background hover:bg-accent hover:text-accent-foreground transition-colors flex items-center justify-center gap-2 disabled:opacity-50",
+					children: [/* @__PURE__ */ v(i, { className: "w-4 h-4" }), "Back"]
+				}), /* @__PURE__ */ v("button", {
+					onClick: s,
+					disabled: c || r.length !== 6,
+					className: "flex-1 px-4 py-2 text-sm font-medium rounded-lg bg-primary text-primary-foreground hover:bg-primary/90 transition-colors flex items-center justify-center gap-2 disabled:opacity-50",
+					children: c ? /* @__PURE__ */ y(_, { children: [/* @__PURE__ */ v(f, { className: "w-4 h-4 animate-spin" }), "Verifying..."] }) : /* @__PURE__ */ y(_, { children: ["Verify", /* @__PURE__ */ v(a, { className: "w-4 h-4" })] })
+				})]
+			})
+		]
+	});
+}
+function O({ onComplete: e }) {
+	return /* @__PURE__ */ y("div", {
+		className: "space-y-6 animate-in fade-in zoom-in-95 duration-500",
+		children: [
+			/* @__PURE__ */ y("div", {
+				className: "text-center space-y-4",
+				children: [
+					/* @__PURE__ */ v("div", {
+						className: "mx-auto w-20 h-20 bg-green-500/10 rounded-full flex items-center justify-center animate-in zoom-in duration-500",
+						children: /* @__PURE__ */ v("div", {
+							className: "w-16 h-16 bg-green-500 rounded-full flex items-center justify-center",
+							children: /* @__PURE__ */ v(r, { className: "w-8 h-8 text-white" })
+						})
+					}),
+					/* @__PURE__ */ v("h3", {
+						className: "text-xl font-semibold",
+						children: "Two-Factor Authentication Enabled!"
+					}),
+					/* @__PURE__ */ v("p", {
+						className: "text-muted-foreground text-sm max-w-md mx-auto",
+						children: "Your account is now protected with two-factor authentication. You will need to enter a verification code each time you sign in."
+					})
+				]
+			}),
+			/* @__PURE__ */ y("div", {
+				className: "p-4 bg-muted/50 rounded-lg space-y-2",
+				children: [/* @__PURE__ */ y("h4", {
+					className: "text-sm font-medium flex items-center gap-2",
+					children: [/* @__PURE__ */ v(h, { className: "w-4 h-4 text-green-500" }), "What happens next?"]
+				}), /* @__PURE__ */ y("ul", {
+					className: "text-sm text-muted-foreground space-y-1 list-disc list-inside",
+					children: [
+						/* @__PURE__ */ v("li", { children: "You will be prompted for a code when signing in" }),
+						/* @__PURE__ */ v("li", { children: "Use your authenticator app to generate codes" }),
+						/* @__PURE__ */ v("li", { children: "Keep your backup codes safe for emergencies" })
+					]
+				})]
+			}),
+			e && /* @__PURE__ */ v("button", {
+				onClick: e,
+				className: "w-full px-4 py-2 text-sm font-medium rounded-lg bg-primary text-primary-foreground hover:bg-primary/90 transition-colors",
+				children: "Done"
+			})
+		]
+	});
+}
+function k({ config: t, onComplete: r, onCancel: i, onVerify: a, onRegenerateBackupCodes: o, onRegenerateSecret: s, initialStep: c = "intro", showStepIndicator: l = !0, allowSkipBackupCodes: u = !1, className: d, isLoading: p = !1, error: m }) {
+	let h = S({
+		config: t,
+		onVerify: a,
+		onRegenerateBackupCodes: o,
+		onRegenerateSecret: s,
+		onComplete: r,
+		initialStep: c
+	}), g = t.authenticatorApps || b;
+	return p ? /* @__PURE__ */ v("div", {
+		className: e("w-full max-w-md mx-auto p-6", d),
+		children: /* @__PURE__ */ y("div", {
+			className: "flex flex-col items-center justify-center py-12 gap-4",
+			children: [/* @__PURE__ */ v(f, { className: "w-8 h-8 animate-spin text-primary" }), /* @__PURE__ */ v("p", {
+				className: "text-sm text-muted-foreground",
+				children: "Setting up two-factor authentication..."
+			})]
+		})
+	}) : m ? /* @__PURE__ */ v("div", {
+		className: e("w-full max-w-md mx-auto p-6", d),
+		children: /* @__PURE__ */ y("div", {
+			className: "flex flex-col items-center justify-center py-12 gap-4 text-center",
+			children: [
+				/* @__PURE__ */ v("div", {
+					className: "w-16 h-16 bg-destructive/10 rounded-full flex items-center justify-center",
+					children: /* @__PURE__ */ v(n, { className: "w-8 h-8 text-destructive" })
+				}),
+				/* @__PURE__ */ y("div", {
+					className: "space-y-2",
+					children: [/* @__PURE__ */ v("h3", {
+						className: "text-lg font-semibold",
+						children: "Setup Failed"
+					}), /* @__PURE__ */ v("p", {
+						className: "text-sm text-muted-foreground max-w-sm",
+						children: m
+					})]
+				}),
+				i && /* @__PURE__ */ v("button", {
+					onClick: i,
+					className: "px-4 py-2 text-sm font-medium rounded-lg border border-input bg-background hover:bg-accent hover:text-accent-foreground transition-colors",
+					children: "Go Back"
+				})
+			]
+		})
+	}) : /* @__PURE__ */ y("div", {
+		className: e("w-full max-w-md mx-auto p-6", d),
+		children: [
+			l && h.currentStep !== "success" && /* @__PURE__ */ v(C, {
+				currentStep: h.currentStep,
+				className: "mb-8"
+			}),
+			h.currentStep === "intro" && /* @__PURE__ */ v(w, {
+				authenticatorApps: g,
+				onNext: h.nextStep,
+				onCancel: i
+			}),
+			h.currentStep === "qr-code" && /* @__PURE__ */ v(T, {
+				qrCodeUrl: h.qrCodeUrl,
+				secretKey: h.secretKey,
+				issuer: t.issuer,
+				accountName: t.accountName,
+				secretKeyCopied: h.secretKeyCopied,
+				onCopySecret: h.copySecretKey,
+				onRegenerateSecret: s ? h.regenerateSecret : void 0,
+				isRegeneratingSecret: h.isRegeneratingSecret,
+				onNext: h.nextStep,
+				onBack: h.prevStep
+			}),
+			h.currentStep === "backup-codes" && /* @__PURE__ */ v(E, {
+				backupCodes: h.backupCodes,
+				issuer: t.issuer,
+				backupCodesCopied: h.backupCodesCopied,
+				onCopyBackupCodes: h.copyBackupCodes,
+				onDownloadBackupCodes: h.downloadBackupCodes,
+				onRegenerateBackupCodes: o ? h.regenerateBackupCodes : void 0,
+				isRegeneratingCodes: h.isRegeneratingCodes,
+				onNext: h.nextStep,
+				onBack: h.prevStep,
+				allowSkip: u
+			}),
+			h.currentStep === "verify" && /* @__PURE__ */ v(D, {
+				verificationCode: h.verificationCode,
+				onCodeChange: h.setVerificationCode,
+				onVerify: h.handleVerify,
+				isVerifying: h.isVerifying,
+				error: h.verifyError,
+				onBack: h.prevStep
+			}),
+			h.currentStep === "success" && /* @__PURE__ */ v(O, { onComplete: r })
+		]
+	});
+}
+//#endregion
+export { k as default, S as useTwoFactorSetup };

package/dist/components/waka-typewriter/index.cjs.js

@@ -0,0 +1,29 @@
+"use client";"use client";const e=require(`../../_virtual/_rolldown/runtime.cjs.js`),t=require(`../../utils/cn.cjs.js`);let n=require(`react`);n=e.__toESM(n);let r=require(`react/jsx-runtime`);var i={slow:100,normal:50,fast:25};function a(e){return typeof e==`number`?e:i[e]??50}function o(e){let{strings:t,typeSpeed:r,deleteSpeed:i,startDelay:a,pauseDelay:o,nextDelay:s,loop:c,pauseOnChars:l,charPauseDuration:u,onTypeComplete:d,onDeleteComplete:f,onComplete:p,active:m}=e,[h,g]=n.useState(``),[_,v]=n.useState(0),[y,b]=n.useState(!0),[x,S]=n.useState(!1),C=n.useRef(null),w=n.useRef(0),T=n.useRef(!1),E=n.useCallback(()=>{C.current&&=(clearTimeout(C.current),null)},[]),D=n.useCallback(()=>{if(!m||x)return;let e=t[_];if(e)if(y)if(w.current<e.length){let t=e[w.current],n=l.includes(t)?r+u:r;w.current++,g(e.slice(0,w.current)),C.current=setTimeout(D,n)}else d?.(_),_===t.length-1&&!c?p?.():C.current=setTimeout(()=>{b(!1),D()},o);else w.current>0?(w.current--,g(e.slice(0,w.current)),C.current=setTimeout(D,i)):(f?.(_),v((_+1)%t.length),b(!0),C.current=setTimeout(D,s))},[m,x,t,_,y,r,i,o,s,l,u,c,d,f,p]);n.useEffect(()=>{if(!(!m||T.current))return T.current=!0,C.current=setTimeout(D,a),()=>{E()}},[m,a,D,E]);let O=n.useCallback(()=>{E(),T.current=!1,w.current=0,g(``),v(0),b(!0),S(!1),T.current=!0,C.current=setTimeout(D,a)},[E,D,a]),k=n.useCallback(()=>{S(!0),E()},[E]),A=n.useCallback(()=>{x&&(S(!1),C.current=setTimeout(D,0))},[x,D]),j=n.useCallback(e=>{e<0||e>=t.length||(E(),w.current=0,g(``),v(e),b(!0),C.current=setTimeout(D,0))},[t.length,E,D]);return n.useEffect(()=>()=>{E()},[E]),{text:h,currentIndex:_,isTyping:y,isActive:m&&!x,restart:O,pause:k,resume:A,skipTo:j}}function s({char:e,blinkSpeed:i,className:a}){let[o,s]=n.useState(!0);return n.useEffect(()=>{let e=setInterval(()=>{s(e=>!e)},i);return()=>clearInterval(e)},[i]),(0,r.jsx)(`span`,{className:t.cn(`inline-block`,a),style:{opacity:+!!o},"aria-hidden":`true`,children:e})}var c=n.forwardRef(({className:e,strings:n,typeSpeed:i=`normal`,deleteSpeed:c=`fast`,startDelay:l=500,pauseDelay:u=2e3,nextDelay:d=500,loop:f=!0,cursor:p=!0,cursorChar:m=`|`,cursorBlinkSpeed:h=500,pauseOnChars:g=`.,!?`,charPauseDuration:_=300,onTypeComplete:v,onDeleteComplete:y,onComplete:b,active:x=!0,as:S=`span`,...C},w)=>{let{text:T}=o({strings:n,typeSpeed:a(i),deleteSpeed:a(c),startDelay:l,pauseDelay:u,nextDelay:d,loop:f,pauseOnChars:g,charPauseDuration:_,onTypeComplete:v,onDeleteComplete:y,onComplete:b,active:x});return(0,r.jsxs)(S,{ref:w,className:t.cn(`inline`,e),...C,children:[(0,r.jsx)(`span`,{className:`whitespace-pre-wrap`,children:T}),p&&(0,r.jsx)(s,{char:m,blinkSpeed:h,className:`ml-0.5`})]})});c.displayName=`WakaTypewriter`;var l=n.forwardRef(({level:e=1,className:n,...i},a)=>(0,r.jsx)(c,{ref:a,className:t.cn({1:`text-4xl font-bold tracking-tight`,2:`text-3xl font-semibold tracking-tight`,3:`text-2xl font-semibold`,4:`text-xl font-semibold`,5:`text-lg font-medium`,6:`text-base font-medium`}[e],n),as:`h${e}`,...i}));l.displayName=`WakaTypewriterHeading`;var u=n.forwardRef(({className:e,lines:i,staggerDelay:a=1500,typeSpeed:o=`normal`,cursor:l=!0,cursorChar:u=`|`,activeLineCursorOnly:d=!0,...f},p)=>{let[m,h]=n.useState(0),[g,_]=n.useState(new Set),v=n.useCallback(e=>{_(t=>new Set([...t,e])),e<i.length-1&&setTimeout(()=>{h(e+1)},a/3)},[i.length,a]);return(0,r.jsx)(`div`,{ref:p,className:t.cn(`space-y-2`,e),...f,children:i.map((e,t)=>{let n=t===m,i=g.has(t);return t<=m?i?(0,r.jsxs)(`div`,{className:`flex items-center`,children:[(0,r.jsx)(`span`,{children:e}),l&&!d&&(0,r.jsx)(s,{char:u,blinkSpeed:500,className:`ml-0.5 opacity-0`})]},t):(0,r.jsx)(`div`,{children:(0,r.jsx)(c,{strings:[e],typeSpeed:o,startDelay:t===0?500:0,loop:!1,cursor:l&&(d?n:!0),cursorChar:u,onTypeComplete:()=>v(t),active:n})},t):(0,r.jsx)(`div`,{className:`h-6`},t)})})});u.displayName=`WakaTypewriterLines`;var d=n.forwardRef(({className:e,language:n,...i},a)=>(0,r.jsx)(c,{ref:a,className:t.cn(`font-mono text-sm bg-muted px-1.5 py-0.5 rounded`,e),as:`code`,cursorChar:`_`,cursorBlinkSpeed:400,typeSpeed:`fast`,...i}));if(d.displayName=`WakaTypewriterCode`,typeof document<`u`){let e=`waka-typewriter-styles`;if(!document.getElementById(e)){let t=document.createElement(`style`);t.id=e,t.textContent=`
+      @keyframes typewriter-blink {
+        0%, 50% {
+          opacity: 1;
+        }
+        51%, 100% {
+          opacity: 0;
+        }
+      }
+
+      .animate-typewriter-blink {
+        animation: typewriter-blink 1s step-end infinite;
+      }
+
+      @keyframes typewriter-reveal {
+        from {
+          width: 0;
+        }
+        to {
+          width: 100%;
+        }
+      }
+
+      .animate-typewriter-reveal {
+        overflow: hidden;
+        white-space: nowrap;
+        animation: typewriter-reveal steps(40, end);
+      }
+    `,document.head.appendChild(t)}}exports.WakaTypewriter=c,exports.WakaTypewriterCode=d,exports.WakaTypewriterHeading=l,exports.WakaTypewriterLines=u,exports.useTypewriter=o;