@protobase/ui 0.3.4 → 0.4.1

package/dist/auth/email-code-page.js

@@ -0,0 +1,40 @@
+import { authMessage } from "./auth-messages.js";
+import { useAuth } from "./auth-provider.js";
+import { EmailCodeForm } from "./email-code-form.js";
+import { useState } from "react";
+import { AuthError } from "@protobase/client";
+import { jsx } from "react/jsx-runtime";
+//#region src/auth/email-code-page.tsx
+/** Signs in with the code emailed to `email`; the account's second step follows when it has one. */
+const EmailCodePage = ({ email, onBack }) => {
+	const { signInWithCode, sendSignInCode } = useAuth();
+	const [busy, setBusy] = useState(false);
+	const [error, setError] = useState();
+	const [notice, setNotice] = useState();
+	const attempt = async (step) => {
+		setBusy(true);
+		setError(void 0);
+		setNotice(void 0);
+		try {
+			await step();
+		} catch (failure) {
+			if (!(failure instanceof AuthError)) throw failure;
+			setError(authMessage(failure));
+		}
+		setBusy(false);
+	};
+	return /* @__PURE__ */ jsx(EmailCodeForm, {
+		email,
+		busy,
+		error,
+		notice,
+		onBack,
+		onSubmit: (code) => void attempt(() => signInWithCode(email, code)),
+		onResend: () => void attempt(async () => {
+			await sendSignInCode(email);
+			setNotice("A new code is on its way. Only the newest one works.");
+		})
+	});
+};
+//#endregion
+export { EmailCodePage };

package/dist/auth/first-run-page.js

@@ -1,8 +1,8 @@
 import { Button } from "../primitives/button.js";
 import { AuthLayout } from "./auth-layout.js";
 import { useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { Check, Copy } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/auth/first-run-page.tsx
 const createAdminCommand = "protobase users create you@example.com";
 /**

package/dist/auth/forgot-password-page.js

@@ -2,8 +2,8 @@ import { useAuth } from "./auth-provider.js";
 import { ForgotPasswordForm } from "./forgot-password-form.js";
 import { resetLinkTarget } from "./reset-link.js";
 import { useState } from "react";
-import { jsx } from "react/jsx-runtime";
 import { AuthError } from "@protobase/client";
+import { jsx } from "react/jsx-runtime";
 //#region src/auth/forgot-password-page.tsx
 /** Asks the server to email a reset link that leads back to this page. */
 const ForgotPasswordPage = ({ onBack }) => {

package/dist/auth/reset-password-page.js

@@ -1,8 +1,8 @@
 import { useAuth } from "./auth-provider.js";
 import { ResetPasswordForm } from "./reset-password-form.js";
 import { useState } from "react";
-import { jsx } from "react/jsx-runtime";
 import { AuthError } from "@protobase/client";
+import { jsx } from "react/jsx-runtime";
 //#region src/auth/reset-password-page.tsx
 /** Better Auth's answers to a new password, in words for the person at the keyboard. */
 const resetPasswordMessage = (error) => {

package/dist/auth/setup-required-form.js

@@ -0,0 +1,43 @@
+import { Button } from "../primitives/button.js";
+import { TwoFactorSetup } from "../account/two-factor-setup.js";
+import { AuthLayout } from "./auth-layout.js";
+import { KeyRound } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/auth/setup-required-form.tsx
+const titles = {
+	twoFactor: "Turn on two-factor authentication",
+	passkey: "Add a passkey"
+};
+/** Shown after signing in while the account lacks something the sign-in policy requires; the app opens once it is set up. */
+const SetupRequiredForm = ({ step, twoFactor, onAddPasskey, busy, error, onSignOut }) => /* @__PURE__ */ jsxs(AuthLayout, {
+	title: titles[step],
+	description: "This app requires it for every account.",
+	children: [step === "twoFactor" ? /* @__PURE__ */ jsx(TwoFactorSetup, { ...twoFactor }) : /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-4",
+		children: [
+			/* @__PURE__ */ jsx("p", {
+				className: "text-[13px] text-muted-foreground",
+				children: "A passkey signs you in with Face ID, Touch ID, Windows Hello, your phone or a security key. Your browser asks which one to use."
+			}),
+			error && /* @__PURE__ */ jsx("p", {
+				role: "alert",
+				className: "text-xs font-medium text-danger-text",
+				children: error
+			}),
+			/* @__PURE__ */ jsxs(Button, {
+				variant: "primary",
+				loading: busy,
+				onClick: onAddPasskey,
+				className: "min-h-10",
+				children: [/* @__PURE__ */ jsx(KeyRound, { className: "size-4" }), "Add a passkey"]
+			})
+		]
+	}), /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick: onSignOut,
+		className: "mt-4 w-full text-center text-[13px] font-medium text-muted-foreground hover:underline",
+		children: "Sign out"
+	})]
+});
+//#endregion
+export { SetupRequiredForm };

package/dist/auth/setup-required-page.js

@@ -0,0 +1,51 @@
+import { Spinner } from "../primitives/spinner.js";
+import { authMessage } from "./auth-messages.js";
+import { useAuth } from "./auth-provider.js";
+import { SetupRequiredForm } from "./setup-required-form.js";
+import { useEffect, useState } from "react";
+import { AuthError } from "@protobase/client";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/auth/setup-required-page.tsx
+/** Sets up what the sign-in policy requires, one thing at a time, then reads the account again to open the app. */
+const SetupRequiredPage = ({ missing }) => {
+	const { session, recheck, signOut } = useAuth();
+	const [methods, setMethods] = useState();
+	const [busy, setBusy] = useState(false);
+	const [error, setError] = useState();
+	useEffect(() => {
+		session.account.signInMethods().then(setMethods, (failure) => setError(failure instanceof AuthError ? authMessage(failure) : "Could not read your account"));
+	}, [session]);
+	const addPasskey = async () => {
+		setBusy(true);
+		setError(void 0);
+		try {
+			await session.account.addPasskey();
+			recheck();
+		} catch (failure) {
+			if (!(failure instanceof AuthError)) throw failure;
+			setError(authMessage(failure));
+			setBusy(false);
+		}
+	};
+	if (!methods && !error) return /* @__PURE__ */ jsxs("div", {
+		className: "flex h-full min-h-48 items-center justify-center gap-2 text-[13px] text-muted-foreground",
+		children: [/* @__PURE__ */ jsx(Spinner, {}), " Loading"]
+	});
+	return /* @__PURE__ */ jsx(SetupRequiredForm, {
+		step: missing[0],
+		busy,
+		error,
+		onAddPasskey: () => void addPasskey(),
+		onSignOut: () => void signOut(),
+		twoFactor: {
+			offerEmailedCodes: methods?.mail ?? false,
+			needsPassword: methods?.account.password ?? true,
+			onStartApp: (password) => session.account.startAuthenticatorApp(password),
+			onConfirmApp: (code) => session.account.confirmAuthenticatorApp(code),
+			onEmailedCodes: (password) => session.account.turnOnEmailedCodes(password),
+			onDone: recheck
+		}
+	});
+};
+//#endregion
+export { SetupRequiredPage };

package/dist/auth/sign-in-form.js

@@ -1,12 +1,29 @@
 import { Input } from "../primitives/input.js";
 import { Button } from "../primitives/button.js";
 import { AuthLayout } from "./auth-layout.js";
-import { useState } from "react";
+import { useRef, useState } from "react";
+import { KeyRound, Mail } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/auth/sign-in-form.tsx
-const SignInForm = ({ onSubmit, busy, error, workspace, notice, onForgotPassword, onContinueWithGitHub }) => {
+const Divider = () => /* @__PURE__ */ jsxs("div", {
+	className: "my-4 flex items-center gap-3 text-xs text-muted-foreground",
+	children: [
+		/* @__PURE__ */ jsx("span", { className: "h-px flex-1 bg-border" }),
+		"or",
+		/* @__PURE__ */ jsx("span", { className: "h-px flex-1 bg-border" })
+	]
+});
+const SignInForm = ({ onSubmit, busy, error, workspace, notice, methods = ["password"], onSendCode, onPasskey, onForgotPassword, onContinueWithGitHub }) => {
 	const [email, setEmail] = useState("");
 	const [password, setPassword] = useState("");
+	const emailInput = useRef(null);
+	const withPassword = methods.includes("password");
+	const withCode = methods.includes("emailCode") && onSendCode !== void 0;
+	const withPasskey = methods.includes("passkey") && onPasskey !== void 0;
+	const sendCode = () => {
+		if (!emailInput.current?.reportValidity()) return;
+		onSendCode?.(email.trim());
+	};
 	return /* @__PURE__ */ jsxs(AuthLayout, {
 		title: "Sign in to Protobase",
 		description: workspace,
@@ -16,32 +33,39 @@ const SignInForm = ({ onSubmit, busy, error, workspace, notice, onForgotPassword
 				className: "mb-4 rounded-md bg-success-soft px-3 py-2 text-xs font-medium text-success-text",
 				children: notice
 			}),
-			onContinueWithGitHub && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
-				onClick: onContinueWithGitHub,
-				disabled: busy,
-				className: "min-h-10 w-full",
-				children: "Continue with GitHub"
-			}), /* @__PURE__ */ jsxs("div", {
-				className: "my-4 flex items-center gap-3 text-xs text-muted-foreground",
-				children: [
-					/* @__PURE__ */ jsx("span", { className: "h-px flex-1 bg-border" }),
-					"or",
-					/* @__PURE__ */ jsx("span", { className: "h-px flex-1 bg-border" })
-				]
+			(onContinueWithGitHub || withPasskey) && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-2",
+				children: [onContinueWithGitHub && /* @__PURE__ */ jsx(Button, {
+					onClick: onContinueWithGitHub,
+					disabled: busy,
+					className: "min-h-10 w-full",
+					children: "Continue with GitHub"
+				}), withPasskey && /* @__PURE__ */ jsxs(Button, {
+					onClick: onPasskey,
+					disabled: busy,
+					className: "min-h-10 w-full",
+					children: [/* @__PURE__ */ jsx(KeyRound, { className: "size-4" }), "Sign in with a passkey"]
+				})]
+			}), withPassword || withCode ? /* @__PURE__ */ jsx(Divider, {}) : error && /* @__PURE__ */ jsx("p", {
+				role: "alert",
+				className: "mt-4 text-xs font-medium text-danger-text",
+				children: error
 			})] }),
-			/* @__PURE__ */ jsxs("form", {
+			(withPassword || withCode) && /* @__PURE__ */ jsxs("form", {
 				className: "flex flex-col gap-4",
 				onSubmit: (event) => {
 					event.preventDefault();
-					onSubmit(email.trim(), password);
+					if (withPassword) onSubmit(email.trim(), password);
+					else sendCode();
 				},
 				children: [
 					/* @__PURE__ */ jsxs("label", {
 						className: "flex flex-col gap-1.5 text-[13px] font-medium",
 						children: ["Email", /* @__PURE__ */ jsx(Input, {
+							ref: emailInput,
 							type: "email",
 							name: "email",
-							autoComplete: "username",
+							autoComplete: "username webauthn",
 							required: true,
 							autoFocus: true,
 							value: email,
@@ -50,7 +74,7 @@ const SignInForm = ({ onSubmit, busy, error, workspace, notice, onForgotPassword
 							className: "min-h-6"
 						})]
 					}),
-					/* @__PURE__ */ jsxs("label", {
+					withPassword && /* @__PURE__ */ jsxs("label", {
 						className: "flex flex-col gap-1.5 text-[13px] font-medium",
 						children: ["Password", /* @__PURE__ */ jsx(Input, {
 							type: "password",
@@ -68,14 +92,23 @@ const SignInForm = ({ onSubmit, busy, error, workspace, notice, onForgotPassword
 						className: "text-xs font-medium text-danger-text",
 						children: error
 					}),
-					/* @__PURE__ */ jsx(Button, {
+					withPassword && /* @__PURE__ */ jsx(Button, {
 						variant: "primary",
 						type: "submit",
 						loading: busy,
 						className: "min-h-10",
 						children: "Sign in"
 					}),
-					onForgotPassword && /* @__PURE__ */ jsx("button", {
+					withCode && /* @__PURE__ */ jsxs(Button, {
+						variant: withPassword ? "secondary" : "primary",
+						type: withPassword ? "button" : "submit",
+						onClick: withPassword ? sendCode : void 0,
+						loading: busy && !withPassword,
+						disabled: busy,
+						className: "min-h-10",
+						children: [/* @__PURE__ */ jsx(Mail, { className: "size-4" }), "Email me a sign-in code"]
+					}),
+					withPassword && onForgotPassword && /* @__PURE__ */ jsx("button", {
 						type: "button",
 						onClick: onForgotPassword,
 						className: "self-center text-[13px] font-medium text-primary-text hover:underline",

package/dist/auth/sign-in-page.js

@@ -1,27 +1,22 @@
+import { authMessage, signInMessage } from "./auth-messages.js";
 import { useAuth } from "./auth-provider.js";
 import { SignInForm } from "./sign-in-form.js";
 import { useState } from "react";
-import { jsx } from "react/jsx-runtime";
 import { AuthError } from "@protobase/client";
+import { jsx } from "react/jsx-runtime";
 //#region src/auth/sign-in-page.tsx
-/** Better Auth's messages, in words for the person at the keyboard. */
-const signInMessage = (error) => {
-	if (error.status === 429) return "Too many attempts. Wait a minute and try again.";
-	if (error.status === 401 || error.code === "INVALID_EMAIL_OR_PASSWORD") return "The email or password is not right.";
-	return error.message;
-};
-const SignInPage = ({ workspace, notice, onForgotPassword }) => {
-	const { signIn, signInSocial, socialProviders } = useAuth();
+const SignInPage = ({ workspace, notice, onForgotPassword, onCodeSent }) => {
+	const { signIn, signInSocial, socialProviders, signInMethods, sendSignInCode, signInWithPasskey } = useAuth();
 	const [busy, setBusy] = useState(false);
 	const [error, setError] = useState();
-	const attempt = async (start) => {
+	const attempt = async (start, message) => {
 		setBusy(true);
 		setError(void 0);
 		try {
 			await start();
 		} catch (failure) {
 			if (!(failure instanceof AuthError)) throw failure;
-			setError(signInMessage(failure));
+			setError(message(failure));
 			setBusy(false);
 		}
 	};
@@ -30,9 +25,15 @@ const SignInPage = ({ workspace, notice, onForgotPassword }) => {
 		error,
 		workspace,
 		notice,
+		methods: signInMethods,
 		onForgotPassword,
-		onContinueWithGitHub: socialProviders.includes("github") ? () => void attempt(() => signInSocial("github")) : void 0,
-		onSubmit: (email, password) => void attempt(() => signIn(email, password))
+		onContinueWithGitHub: socialProviders.includes("github") ? () => void attempt(() => signInSocial("github"), signInMessage) : void 0,
+		onPasskey: () => void attempt(signInWithPasskey, authMessage),
+		onSendCode: (email) => void attempt(async () => {
+			await sendSignInCode(email);
+			onCodeSent(email);
+		}, authMessage),
+		onSubmit: (email, password) => void attempt(() => signIn(email, password), signInMessage)
 	});
 };
 //#endregion

package/dist/auth/staff-link.js

@@ -0,0 +1,30 @@
+//#region src/auth/staff-link.ts
+/** Marks a link to the staff sign-in page, for example `/?staff-sign-in&email=sanne@example.com&reason=Ticket+4211`. */
+const staffMarker = "staff-sign-in";
+/** Where the server's staff callback says why a staff sign-in did not go through. */
+const errorParam = "staff-error";
+/** The staff sign-in this page was opened for, or `undefined`. */
+const readStaffLink = (href) => {
+	const params = new URL(href).searchParams;
+	const error = params.get(errorParam);
+	if (!params.has("staff-sign-in") && !error) return void 0;
+	const marked = params.has(staffMarker);
+	return {
+		email: marked && params.get("email") || "",
+		reason: marked && params.get("reason") || "",
+		...error && { error }
+	};
+};
+/** The address without the staff link's parameters: for the address bar, and the page staff come back to. */
+const withoutStaffLink = (href) => {
+	const url = new URL(href);
+	if (url.searchParams.has("staff-sign-in")) for (const name of [
+		staffMarker,
+		"email",
+		"reason"
+	]) url.searchParams.delete(name);
+	url.searchParams.delete(errorParam);
+	return `${url.pathname}${url.search}${url.hash}`;
+};
+//#endregion
+export { readStaffLink, staffMarker, withoutStaffLink };

package/dist/auth/staff-sign-in-form.js

@@ -0,0 +1,93 @@
+import { cn } from "../lib/cn.js";
+import { Input } from "../primitives/input.js";
+import { Button } from "../primitives/button.js";
+import { AuthLayout } from "./auth-layout.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/auth/staff-sign-in-form.tsx
+const minimumReason = 10;
+/** For staff of the operator: sign in as a person of this app, with a reason the app's admins see in their log. */
+const StaffSignInForm = ({ operator, email: givenEmail = "", reason: givenReason = "", onSubmit, onBack, busy, error }) => {
+	const [email, setEmail] = useState(givenEmail);
+	const [reason, setReason] = useState(givenReason);
+	if (!operator) return /* @__PURE__ */ jsxs(AuthLayout, {
+		title: "Staff sign-in",
+		description: "Staff of the team that runs this app cannot sign in as people here.",
+		children: [error && /* @__PURE__ */ jsx("p", {
+			role: "alert",
+			className: "mb-4 text-xs font-medium text-danger-text",
+			children: error
+		}), /* @__PURE__ */ jsx(Button, {
+			variant: "primary",
+			className: "min-h-10 w-full",
+			onClick: onBack,
+			children: "Back to sign in"
+		})]
+	});
+	return /* @__PURE__ */ jsx(AuthLayout, {
+		title: "Sign in as a person",
+		description: `For staff of ${operator}, to help someone with this app.`,
+		children: /* @__PURE__ */ jsxs("form", {
+			className: "flex flex-col gap-4",
+			onSubmit: (event) => {
+				event.preventDefault();
+				onSubmit(email.trim(), reason.trim());
+			},
+			children: [
+				/* @__PURE__ */ jsxs("label", {
+					className: "flex flex-col gap-1.5 text-[13px] font-medium",
+					children: ["Their email", /* @__PURE__ */ jsx(Input, {
+						type: "email",
+						name: "email",
+						required: true,
+						autoFocus: !givenEmail,
+						value: email,
+						onChange: (event) => setEmail(event.target.value),
+						className: "min-h-6"
+					})]
+				}),
+				/* @__PURE__ */ jsxs("label", {
+					className: "flex flex-col gap-1.5 text-[13px] font-medium",
+					children: ["Reason", /* @__PURE__ */ jsx("textarea", {
+						name: "reason",
+						required: true,
+						minLength: minimumReason,
+						rows: 3,
+						value: reason,
+						placeholder: "Ticket 4211: the invoice totals look wrong",
+						onChange: (event) => setReason(event.target.value),
+						className: cn("resize-y rounded-md border bg-background px-2.5 py-1.5 text-[13px] font-normal shadow-sm outline-none placeholder:text-faint-foreground focus:border-primary focus:ring-2 focus:ring-primary/20", error ? "border-danger" : "border-border-strong")
+					})]
+				}),
+				/* @__PURE__ */ jsxs("p", {
+					className: "text-xs text-muted-foreground",
+					children: [
+						"You sign in at ",
+						operator,
+						" with a passkey or a second step. The session is short, shows a banner, and cannot change their sign-in. The app's admins see who signed in as whom, and why."
+					]
+				}),
+				error && /* @__PURE__ */ jsx("p", {
+					role: "alert",
+					className: "text-xs font-medium text-danger-text",
+					children: error
+				}),
+				/* @__PURE__ */ jsxs(Button, {
+					variant: "primary",
+					type: "submit",
+					loading: busy,
+					className: "min-h-10",
+					children: ["Continue with ", operator]
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					onClick: onBack,
+					className: "min-h-10",
+					children: "Back to sign in"
+				})
+			]
+		})
+	});
+};
+//#endregion
+export { StaffSignInForm };

package/dist/auth/staff-sign-in-page.js

@@ -0,0 +1,41 @@
+import { staffSignInMessage } from "./auth-messages.js";
+import { useAuth } from "./auth-provider.js";
+import { withoutStaffLink } from "./staff-link.js";
+import { StaffSignInForm } from "./staff-sign-in-form.js";
+import { useState } from "react";
+import { AuthError } from "@protobase/client";
+import { jsx } from "react/jsx-runtime";
+//#region src/auth/staff-sign-in-page.tsx
+/** Starts a staff sign-in and leaves for the operator provider, which comes back to this page without the staff link. */
+const StaffSignInPage = ({ link, onBack }) => {
+	const { session, staffSignIn } = useAuth();
+	const [busy, setBusy] = useState(false);
+	const [error, setError] = useState(link.error && staffSignInMessage(link.error));
+	const submit = async (email, reason) => {
+		setBusy(true);
+		setError(void 0);
+		try {
+			const callbackURL = `${window.location.origin}${withoutStaffLink(window.location.href)}`;
+			window.location.assign(await session.staff.start({
+				email,
+				reason,
+				callbackURL
+			}));
+		} catch (failure) {
+			if (!(failure instanceof AuthError)) throw failure;
+			setError(staffSignInMessage(failure));
+			setBusy(false);
+		}
+	};
+	return /* @__PURE__ */ jsx(StaffSignInForm, {
+		operator: staffSignIn,
+		email: link.email,
+		reason: link.reason,
+		busy,
+		error,
+		onBack,
+		onSubmit: (email, reason) => void submit(email, reason)
+	});
+};
+//#endregion
+export { StaffSignInPage };

package/dist/auth/two-factor-form.js

@@ -0,0 +1,137 @@
+import { Input } from "../primitives/input.js";
+import { Button } from "../primitives/button.js";
+import { CodeInput } from "./code-input.js";
+import { AuthLayout } from "./auth-layout.js";
+import { Checkbox } from "../primitives/checkbox.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/auth/two-factor-form.tsx
+const instructions = {
+	totp: "Enter the 6-digit code from your authenticator app.",
+	otp: "Enter the 6-digit code we emailed you. It works for 5 minutes.",
+	backup: "Enter one of the backup codes you saved when you set up the authenticator app. Each works once."
+};
+/** The second step of a sign-in, for an account with two-factor authentication. */
+const TwoFactorForm = ({ methods, onVerify, onSendCode, onBack, busy, error, codeSent, initialStep }) => {
+	const [step, setStep] = useState(initialStep ?? (methods.includes("totp") ? "totp" : "otp"));
+	const [code, setCode] = useState("");
+	const [trustDevice, setTrustDevice] = useState(false);
+	const waitingForEmail = step === "otp" && !codeSent;
+	const switchTo = (next) => {
+		setStep(next);
+		setCode("");
+		if (next === "otp" && !codeSent) onSendCode();
+	};
+	return /* @__PURE__ */ jsxs(AuthLayout, {
+		title: "Two-factor authentication",
+		description: "One more step to sign in.",
+		children: [waitingForEmail ? /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-4",
+			children: [
+				/* @__PURE__ */ jsx("p", {
+					className: "text-[13px] text-muted-foreground",
+					children: "We email you a code to finish signing in."
+				}),
+				error && /* @__PURE__ */ jsx("p", {
+					role: "alert",
+					className: "text-xs font-medium text-danger-text",
+					children: error
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					variant: "primary",
+					loading: busy,
+					onClick: onSendCode,
+					className: "min-h-10",
+					children: "Email me a code"
+				})
+			]
+		}) : /* @__PURE__ */ jsxs("form", {
+			className: "flex flex-col gap-4",
+			onSubmit: (event) => {
+				event.preventDefault();
+				onVerify({
+					method: step,
+					code: code.trim(),
+					trustDevice
+				});
+			},
+			children: [
+				/* @__PURE__ */ jsx("p", {
+					className: "text-[13px] text-muted-foreground",
+					children: instructions[step]
+				}),
+				/* @__PURE__ */ jsxs("label", {
+					className: "flex flex-col gap-1.5 text-[13px] font-medium",
+					children: [step === "backup" ? "Backup code" : "Code", step === "backup" ? /* @__PURE__ */ jsx(Input, {
+						name: "code",
+						autoComplete: "off",
+						spellCheck: false,
+						required: true,
+						autoFocus: true,
+						value: code,
+						invalid: Boolean(error),
+						onChange: (event) => setCode(event.target.value),
+						className: "min-h-6 font-mono"
+					}) : /* @__PURE__ */ jsx(CodeInput, {
+						name: "code",
+						required: true,
+						autoFocus: true,
+						value: code,
+						invalid: Boolean(error),
+						onChange: (event) => setCode(event.target.value)
+					})]
+				}),
+				/* @__PURE__ */ jsxs("label", {
+					className: "flex items-center gap-2 text-[13px] text-muted-foreground",
+					children: [/* @__PURE__ */ jsx(Checkbox, {
+						checked: trustDevice,
+						onChange: setTrustDevice,
+						label: "Trust this browser"
+					}), "Don't ask again in this browser for 30 days"]
+				}),
+				error && /* @__PURE__ */ jsx("p", {
+					role: "alert",
+					className: "text-xs font-medium text-danger-text",
+					children: error
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					variant: "primary",
+					type: "submit",
+					loading: busy,
+					className: "min-h-10",
+					children: "Verify"
+				})
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "mt-4 flex flex-col items-center gap-2 border-t pt-4 text-[13px]",
+			children: [
+				step !== "totp" && methods.includes("totp") && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: () => switchTo("totp"),
+					className: "font-medium text-primary-text hover:underline",
+					children: "Use the authenticator app"
+				}),
+				step !== "otp" && methods.includes("otp") && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: () => switchTo("otp"),
+					className: "font-medium text-primary-text hover:underline",
+					children: "Email me a code instead"
+				}),
+				step !== "backup" && methods.includes("totp") && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: () => switchTo("backup"),
+					className: "font-medium text-primary-text hover:underline",
+					children: "Use a backup code"
+				}),
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: onBack,
+					className: "font-medium text-muted-foreground hover:underline",
+					children: "Back to sign in"
+				})
+			]
+		})]
+	});
+};
+//#endregion
+export { TwoFactorForm };