@protobase/ui 0.15.4 → 0.16.0

package/dist/app-shell/sidebar.js

@@ -1,4 +1,5 @@
 import { cn } from "../lib/cn.js";
+import { RouteLink } from "../primitives/route-link.js";
 import { Logo } from "./logo.js";
 import { navGroups } from "./nav.js";
 import { ThemeSwitch } from "./theme-switch.js";
@@ -9,7 +10,7 @@ import { SidebarGroup } from "./sidebar-group.js";
 import { LogIn } from "lucide-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/app-shell/sidebar.tsx
-const Sidebar = ({ mode, activeItem, user, workspace, forceExpanded, profileMenuOpen, groups = navGroups, userMenu, onNavigate, onSignOut, onSignIn, organizations, roles, theme, sticky }) => {
+const Sidebar = ({ mode, activeItem, user, workspace, forceExpanded, profileMenuOpen, groups = navGroups, userMenu, onNavigate, onSignOut, signIn, organizations, roles, theme, sticky }) => {
 	const expanding = mode === "icon-expand";
 	const expanded = expanding && forceExpanded;
 	const inline = isTextMode(mode) || expanding;
@@ -62,9 +63,8 @@ const Sidebar = ({ mode, activeItem, user, workspace, forceExpanded, profileMenu
 					}) : /* @__PURE__ */ jsxs(Fragment, { children: [theme && inline && /* @__PURE__ */ jsx(ThemeSwitch, {
 						theme,
 						className: "flex min-h-11 w-full items-center gap-2.5 whitespace-nowrap p-1.5 text-[13px] text-muted-foreground md:min-h-0"
-					}), onSignIn && /* @__PURE__ */ jsxs("button", {
-						type: "button",
-						onClick: onSignIn,
+					}), signIn && /* @__PURE__ */ jsxs(RouteLink, {
+						to: signIn,
 						"aria-label": "Sign in",
 						className: "flex min-h-11 w-full items-center gap-2.5 rounded-md p-1.5 text-left text-[13px] font-medium text-muted-foreground hover:bg-muted hover:text-foreground md:min-h-0",
 						children: [/* @__PURE__ */ jsx(LogIn, { className: "size-4 shrink-0" }), inline && /* @__PURE__ */ jsx("span", {

package/dist/app-shell/top-bar.js

@@ -1,6 +1,6 @@
 import { cn } from "../lib/cn.js";
-import { backTarget } from "./back-target.js";
 import { Breadcrumb, inApp } from "./breadcrumb.js";
+import { backTarget } from "./back-target.js";
 import { GlobalSearch } from "./global-search.js";
 import { useEffect, useRef, useState } from "react";
 import { ChevronLeft, Menu, Search, X } from "lucide-react";
@@ -25,7 +25,7 @@ const TopBar = ({ breadcrumb, onNavigate, actions, onMenu, menuOpen, menuControl
 	}, [search]);
 	return /* @__PURE__ */ jsxs("header", {
 		ref,
-		className: cn(sticky ? "sticky top-0 z-30" : "relative", "flex h-12 shrink-0 items-center gap-1 border-b bg-background px-2 md:gap-4 md:px-5"),
+		className: cn(sticky ? "sticky top-0 z-30" : "relative", "flex h-12 shrink-0 items-center gap-1 border-b bg-background pl-4 pr-2 md:gap-4 md:px-5"),
 		children: [
 			onMenu && /* @__PURE__ */ jsx("button", {
 				type: "button",
@@ -33,7 +33,7 @@ const TopBar = ({ breadcrumb, onNavigate, actions, onMenu, menuOpen, menuControl
 				"aria-expanded": Boolean(menuOpen),
 				"aria-controls": menuControls,
 				onClick: onMenu,
-				className: cn(iconButton, "-ml-0.5"),
+				className: cn(iconButton, "-ml-3"),
 				children: /* @__PURE__ */ jsx(Menu, { className: "size-5" })
 			}),
 			back && /* @__PURE__ */ jsx("a", {
@@ -44,7 +44,7 @@ const TopBar = ({ breadcrumb, onNavigate, actions, onMenu, menuOpen, menuControl
 					event.preventDefault();
 					onNavigate(back.href);
 				},
-				className: cn(iconButton, !onMenu && "-ml-0.5"),
+				className: cn(iconButton, !onMenu && "-ml-3"),
 				children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-5" })
 			}),
 			/* @__PURE__ */ jsx(Breadcrumb, {

package/dist/auth/auth-gate.js

@@ -11,7 +11,6 @@ import { ForgotPasswordPage } from "./forgot-password-page.js";
 import { ProviderSignInPage } from "./provider-sign-in-page.js";
 import { ResetPasswordPage } from "./reset-password-page.js";
 import { SetupRequiredPage } from "./setup-required-page.js";
-import { signInPath } from "./sign-in-address.js";
 import { SignInPage } from "./sign-in-page.js";
 import { SignUpPage } from "./sign-up-page.js";
 import { readStaffLink, withoutStaffLink } from "./staff-link.js";
@@ -22,6 +21,7 @@ import { readInvitationLink, withoutInvitationLink } from "../organizations/invi
 import { InvitationPage } from "../organizations/invitation-page.js";
 import { useCallback, useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { signInPath } from "@protobase/schema";
 //#region src/auth/auth-gate.tsx
 const firstPage = () => {
 	const href = window.location.href;
@@ -67,10 +67,11 @@ const Redirect = ({ to }) => {
 const AuthGate = ({ workspace, children }) => {
 	const { state, recheck, passwordReset, signOut, signInProviders, canSignUp, browse } = useAuth();
 	const { path, params, basePath, navigate } = useRouter();
-	const { address, next, open, leave } = useSignInAddress();
+	const { address, next, open, link, leave } = useSignInAddress();
 	const [page, setPage] = useState(firstPage);
 	const [codeEmail, setCodeEmail] = useState();
 	const [signUpEmail, setSignUpEmail] = useState();
+	const [signUpTicket, setSignUpTicket] = useState();
 	const href = new URL(`${basePath}${path}${params.size > 0 ? `?${params}` : ""}`, window.location.origin).href;
 	const forget = useCallback((without) => {
 		const below = without(href).slice(basePath.length);
@@ -87,6 +88,7 @@ const AuthGate = ({ workspace, children }) => {
 		if (page.kind === "provider-sign-in" || page.kind === "sign-in" && (page.notice || page.error || page.providerError)) setPage({ kind: "sign-in" });
 		setCodeEmail(void 0);
 		setSignUpEmail(void 0);
+		setSignUpTicket(void 0);
 	}, [
 		entered,
 		page,
@@ -161,7 +163,7 @@ const AuthGate = ({ workspace, children }) => {
 			forget(withoutInvitationLink);
 			setPage({ kind: "sign-in" });
 		},
-		onSignIn: () => open()
+		signIn: link()
 	});
 	if (state.kind === "signed-in") return children;
 	if (state.kind === "two-factor") return /* @__PURE__ */ jsx(TwoFactorPage, {
@@ -184,25 +186,32 @@ const AuthGate = ({ workspace, children }) => {
 		"forgot-password": passwordReset,
 		"email-code": codeEmail !== void 0,
 		"sign-up": canSignUp,
-		"sign-up-code": canSignUp && signUpEmail !== void 0
+		"sign-up-code": canSignUp && signUpEmail !== void 0,
+		"sign-up-details": canSignUp && signUpTicket !== void 0
 	}[address.step] ? address.step : "sign-in";
 	const backTo = (target) => () => open(target, { replace: true });
 	const onBrowse = browse && (() => {
 		browse();
 		leave();
 	});
-	if (step === "forgot-password") return /* @__PURE__ */ jsx(ForgotPasswordPage, { onBack: backTo("sign-in") });
+	if (step === "forgot-password") return /* @__PURE__ */ jsx(ForgotPasswordPage, { back: link("sign-in", { replace: true }) });
 	if (step === "email-code") return /* @__PURE__ */ jsx(EmailCodePage, {
 		email: codeEmail,
 		onBack: backTo("sign-in")
 	});
-	if (step === "sign-up" || step === "sign-up-code") return /* @__PURE__ */ jsx(SignUpPage, {
+	if (step === "sign-up" || step === "sign-up-code" || step === "sign-up-details") return /* @__PURE__ */ jsx(SignUpPage, {
 		workspace,
-		email: step === "sign-up-code" ? signUpEmail : void 0,
+		email: step === "sign-up" ? void 0 : signUpEmail,
+		ticket: step === "sign-up-details" ? signUpTicket : void 0,
 		onCodeSent: (email) => {
 			setSignUpEmail(email);
+			setSignUpTicket(void 0);
 			open("sign-up-code");
 		},
+		onVerified: (ticket) => {
+			setSignUpTicket(ticket);
+			open("sign-up-details", { replace: true });
+		},
 		onBack: backTo("sign-up"),
 		onSignIn: () => open("sign-in"),
 		onBrowse
@@ -213,12 +222,12 @@ const AuthGate = ({ workspace, children }) => {
 		workspace,
 		notice: signIn.notice,
 		error,
-		onForgotPassword: passwordReset ? () => open("forgot-password") : void 0,
+		forgotPassword: passwordReset ? link("forgot-password") : void 0,
 		onCodeSent: (email) => {
 			setCodeEmail(email);
 			open("email-code");
 		},
-		onSignUp: canSignUp ? () => open("sign-up") : void 0,
+		signUp: canSignUp ? link("sign-up") : void 0,
 		onBrowse
 	}, error);
 };

package/dist/auth/auth-provider.js

@@ -86,6 +86,7 @@ const AuthProvider = ({ session: given, children }) => {
 		sendSignInCode: (email) => session.sendSignInCode(email),
 		signInWithCode: async (email, code) => finish(await session.signInWithCode(email, code)),
 		sendSignUpCode: (email) => session.sendSignUpCode(email),
+		verifySignUpCode: (email, code) => session.verifySignUpCode(email, code),
 		signUp: async (input) => enter(await session.signUp(input)),
 		signInWithPasskey: async (domain) => enter(await session.signInWithPasskey(domain)),
 		verifyTwoFactor: async (input) => enter(await session.verifyTwoFactor(input)),

package/dist/auth/code-form.js

@@ -0,0 +1,77 @@
+import { Button } from "../primitives/button.js";
+import { OtpInput } from "../primitives/otp-input.js";
+import { AuthLayout } from "./auth-layout.js";
+import { ResendCodeButton } from "./resend-code-button.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/auth/code-form.tsx
+/**
+* A step that checks an emailed code on its own: where it went, a box per digit, a new code after a wait, and a way back
+* to another address. Nothing else is asked for until the code is right.
+*/
+const CodeForm = ({ title, description, explanation, submitLabel, onSubmit, onResend, onChangeAddress, changeAddressLabel, busy, error, notice, resendCooldown }) => {
+	const [code, setCode] = useState("");
+	return /* @__PURE__ */ jsxs(AuthLayout, {
+		title,
+		description,
+		children: [
+			/* @__PURE__ */ jsx("p", {
+				className: "mb-4 text-[13px] text-muted-foreground",
+				children: explanation
+			}),
+			notice && /* @__PURE__ */ jsx("p", {
+				role: "status",
+				className: "mb-4 rounded-md bg-success-soft px-3 py-2 text-xs font-medium text-success-text",
+				children: notice
+			}),
+			/* @__PURE__ */ jsxs("form", {
+				className: "flex flex-col gap-4",
+				onSubmit: (event) => {
+					event.preventDefault();
+					onSubmit(code);
+				},
+				children: [
+					/* @__PURE__ */ jsxs("label", {
+						className: "flex flex-col gap-1.5 text-[13px] font-medium",
+						children: ["Code", /* @__PURE__ */ jsx(OtpInput, {
+							name: "code",
+							required: true,
+							autoFocus: true,
+							value: code,
+							invalid: Boolean(error),
+							onChange: setCode,
+							onComplete: (complete) => !busy && onSubmit(complete)
+						})]
+					}),
+					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: submitLabel
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex flex-wrap justify-center gap-x-2 sm:justify-between",
+						children: [/* @__PURE__ */ jsx(Button, {
+							variant: "ghost",
+							onClick: onChangeAddress,
+							className: "min-h-10",
+							children: changeAddressLabel
+						}), /* @__PURE__ */ jsx(ResendCodeButton, {
+							onResend,
+							disabled: busy,
+							cooldown: resendCooldown
+						})]
+					})
+				]
+			})
+		]
+	});
+};
+//#endregion
+export { CodeForm };

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

@@ -1,81 +1,22 @@
-import { Button } from "../primitives/button.js";
-import { CodeInput } from "./code-input.js";
-import { AuthLayout } from "./auth-layout.js";
-import { useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { CodeForm } from "./code-form.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/auth/email-code-form.tsx
 /** The second half of signing in with an emailed code: the code from the email. */
-const EmailCodeForm = ({ email, onSubmit, onResend, onBack, busy, error, notice }) => {
-	const [code, setCode] = useState("");
-	return /* @__PURE__ */ jsxs(AuthLayout, {
-		title: "Check your email",
-		description: "Enter the code we sent to sign in.",
-		children: [
-			/* @__PURE__ */ jsxs("p", {
-				className: "mb-4 text-[13px] text-muted-foreground",
-				children: [
-					"If ",
-					/* @__PURE__ */ jsx("span", {
-						className: "font-medium text-foreground",
-						children: email
-					}),
-					" has an account, a 6-digit code is on its way. It works for 5 minutes, once."
-				]
-			}),
-			notice && /* @__PURE__ */ jsx("p", {
-				role: "status",
-				className: "mb-4 rounded-md bg-success-soft px-3 py-2 text-xs font-medium text-success-text",
-				children: notice
-			}),
-			/* @__PURE__ */ jsxs("form", {
-				className: "flex flex-col gap-4",
-				onSubmit: (event) => {
-					event.preventDefault();
-					onSubmit(code.trim());
-				},
-				children: [
-					/* @__PURE__ */ jsxs("label", {
-						className: "flex flex-col gap-1.5 text-[13px] font-medium",
-						children: ["Code", /* @__PURE__ */ jsx(CodeInput, {
-							name: "code",
-							required: true,
-							autoFocus: true,
-							value: code,
-							invalid: Boolean(error),
-							onChange: (event) => setCode(event.target.value)
-						})]
-					}),
-					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: "Sign in"
-					}),
-					/* @__PURE__ */ jsxs("div", {
-						className: "flex justify-between gap-2",
-						children: [/* @__PURE__ */ jsx(Button, {
-							variant: "ghost",
-							onClick: onBack,
-							className: "min-h-10",
-							children: "Back to sign in"
-						}), /* @__PURE__ */ jsx(Button, {
-							variant: "ghost",
-							onClick: onResend,
-							disabled: busy,
-							className: "min-h-10",
-							children: "Send a new code"
-						})]
-					})
-				]
-			})
-		]
-	});
-};
+const EmailCodeForm = ({ email, onBack, ...rest }) => /* @__PURE__ */ jsx(CodeForm, {
+	title: "Check your email",
+	description: "Enter the code we sent to sign in.",
+	explanation: /* @__PURE__ */ jsxs(Fragment, { children: [
+		"If ",
+		/* @__PURE__ */ jsx("span", {
+			className: "font-medium text-foreground",
+			children: email
+		}),
+		" has an account, a 6-digit code is on its way. It works for 5 minutes, once."
+	] }),
+	submitLabel: "Sign in",
+	onChangeAddress: onBack,
+	changeAddressLabel: "Back to sign in",
+	...rest
+});
 //#endregion
 export { EmailCodeForm };

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

@@ -1,10 +1,12 @@
+import { cn } from "../lib/cn.js";
+import { RouteLink } from "../primitives/route-link.js";
 import { Input } from "../primitives/input.js";
-import { Button } from "../primitives/button.js";
+import { Button, buttonClass } from "../primitives/button.js";
 import { AuthLayout } from "./auth-layout.js";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/auth/forgot-password-form.tsx
-const ForgotPasswordForm = ({ onSubmit, onBack, busy, error, sentTo }) => {
+const ForgotPasswordForm = ({ onSubmit, back, busy, error, sentTo }) => {
 	const [email, setEmail] = useState("");
 	if (sentTo) return /* @__PURE__ */ jsxs(AuthLayout, {
 		title: "Check your email",
@@ -18,10 +20,9 @@ const ForgotPasswordForm = ({ onSubmit, onBack, busy, error, sentTo }) => {
 				}),
 				" has an account, an email with a link to choose a new password is on its way. The link works once, for a limited time."
 			]
-		}), /* @__PURE__ */ jsx(Button, {
-			variant: "primary",
-			className: "mt-4 min-h-10 w-full",
-			onClick: onBack,
+		}), /* @__PURE__ */ jsx(RouteLink, {
+			to: back,
+			className: cn(buttonClass({ variant: "primary" }), "mt-4 min-h-10 w-full"),
 			children: "Back to sign in"
 		})]
 	});
@@ -61,10 +62,9 @@ const ForgotPasswordForm = ({ onSubmit, onBack, busy, error, sentTo }) => {
 					className: "min-h-10",
 					children: "Send reset link"
 				}),
-				/* @__PURE__ */ jsx(Button, {
-					variant: "ghost",
-					onClick: onBack,
-					className: "min-h-10",
+				/* @__PURE__ */ jsx(RouteLink, {
+					to: back,
+					className: cn(buttonClass({ variant: "ghost" }), "min-h-10"),
 					children: "Back to sign in"
 				})
 			]

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

@@ -6,7 +6,7 @@ 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 }) => {
+const ForgotPasswordPage = ({ back }) => {
 	const { session } = useAuth();
 	const [busy, setBusy] = useState(false);
 	const [error, setError] = useState();
@@ -27,7 +27,7 @@ const ForgotPasswordPage = ({ onBack }) => {
 		busy,
 		error,
 		sentTo,
-		onBack,
+		back,
 		onSubmit: (email) => void submit(email)
 	});
 };

package/dist/auth/resend-code-button.js

@@ -0,0 +1,29 @@
+import { Button } from "../primitives/button.js";
+import { useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/auth/resend-code-button.tsx
+/** "Send a new code", counting down first: the screen opens right after a code went out, and so does every resend. */
+const ResendCodeButton = ({ onResend, cooldown = 30, disabled }) => {
+	const [until, setUntil] = useState(() => Date.now() + cooldown * 1e3);
+	const [now, setNow] = useState(() => Date.now());
+	const left = Math.max(0, Math.ceil((until - now) / 1e3));
+	useEffect(() => {
+		if (left === 0) return;
+		const timer = setInterval(() => setNow(Date.now()), 1e3);
+		return () => clearInterval(timer);
+	}, [left]);
+	return /* @__PURE__ */ jsx(Button, {
+		variant: "ghost",
+		disabled: disabled || left > 0,
+		onClick: () => {
+			const sent = Date.now();
+			setUntil(sent + cooldown * 1e3);
+			setNow(sent);
+			onResend();
+		},
+		className: "min-h-10",
+		children: left > 0 ? `Send a new code in ${left}s` : "Send a new code"
+	});
+};
+//#endregion
+export { ResendCodeButton };

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

@@ -1,3 +1,4 @@
+import { RouteLink } from "../primitives/route-link.js";
 import { Input } from "../primitives/input.js";
 import { Button } from "../primitives/button.js";
 import { AuthLayout } from "./auth-layout.js";
@@ -14,7 +15,7 @@ const Divider = () => /* @__PURE__ */ jsxs("div", {
 		/* @__PURE__ */ jsx("span", { className: "h-px flex-1 bg-border" })
 	]
 });
-const SignInForm = ({ onSubmit, busy, error, workspace, notice, methods = ["password"], onSendCode, onPasskey, passkeyDomains = [], onForgotPassword, providers = [], onContinueWith, onSignUp, onBrowse }) => {
+const SignInForm = ({ onSubmit, busy, error, workspace, notice, methods = ["password"], onSendCode, onPasskey, passkeyDomains = [], forgotPassword, providers = [], onContinueWith, signUp, onBrowse }) => {
 	const [email, setEmail] = useState("");
 	const [password, setPassword] = useState("");
 	const emailInput = useRef(null);
@@ -125,22 +126,20 @@ const SignInForm = ({ onSubmit, busy, error, workspace, notice, methods = ["pass
 						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,
+					withPassword && forgotPassword && /* @__PURE__ */ jsx(RouteLink, {
+						to: forgotPassword,
 						className: "self-center text-[13px] font-medium text-primary-text hover:underline",
 						children: "Forgot password?"
 					})
 				]
 			}),
-			onSignUp && /* @__PURE__ */ jsxs("p", {
+			signUp && /* @__PURE__ */ jsxs("p", {
 				className: "mt-4 text-center text-[13px] text-muted-foreground",
 				children: [
 					"New here?",
 					" ",
-					/* @__PURE__ */ jsx("button", {
-						type: "button",
-						onClick: onSignUp,
+					/* @__PURE__ */ jsx(RouteLink, {
+						to: signUp,
 						className: "font-medium text-primary-text hover:underline",
 						children: "Create an account"
 					})

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

@@ -5,7 +5,7 @@ import { useState } from "react";
 import { AuthError } from "@protobase/client";
 import { jsx } from "react/jsx-runtime";
 //#region src/auth/sign-in-page.tsx
-const SignInPage = ({ workspace, notice, onForgotPassword, onSignUp, onBrowse, onCodeSent, error: initialError }) => {
+const SignInPage = ({ workspace, notice, forgotPassword, signUp, onBrowse, onCodeSent, error: initialError }) => {
 	const { signIn, signInSocial, signInProviders, signInMethods, passkeyDomains, sendSignInCode, signInWithPasskey } = useAuth();
 	const [busy, setBusy] = useState(false);
 	const [error, setError] = useState(initialError);
@@ -26,8 +26,8 @@ const SignInPage = ({ workspace, notice, onForgotPassword, onSignUp, onBrowse, o
 		workspace,
 		notice,
 		methods: signInMethods,
-		onForgotPassword,
-		onSignUp,
+		forgotPassword,
+		signUp,
 		onBrowse,
 		providers: signInProviders,
 		onContinueWith: (provider) => void attempt(() => signInSocial(provider), signInMessage),

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

@@ -1,3 +1,4 @@
+import { RouteLink } from "../primitives/route-link.js";
 import { useAuth } from "./auth-provider.js";
 import { Button, buttonClass } from "../primitives/button.js";
 import { useSignInAddress } from "./use-sign-in-address.js";
@@ -19,21 +20,24 @@ const Benefits = ({ benefits }) => benefits && benefits.length > 0 ? /* @__PURE_
 }) : null;
 const Actions = ({ prompt }) => {
 	const { canSignUp } = useAuth();
-	const { open } = useSignInAddress();
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [prompt.signUp ? /* @__PURE__ */ jsx("a", {
+	const { link } = useSignInAddress();
+	const primary = buttonClass({ variant: "primary" });
+	const signUp = prompt.signUp ? /* @__PURE__ */ jsx("a", {
 		href: prompt.signUp.href,
 		target: "_blank",
 		rel: "noreferrer",
-		className: buttonClass(),
+		className: primary,
 		children: prompt.signUp.label
-	}) : canSignUp && /* @__PURE__ */ jsx(Button, {
-		onClick: () => open("sign-up"),
+	}) : canSignUp && /* @__PURE__ */ jsx(RouteLink, {
+		to: link("sign-up"),
+		className: primary,
 		children: "Create an account"
-	}), /* @__PURE__ */ jsx(Button, {
-		variant: "primary",
-		onClick: () => open(),
+	});
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(RouteLink, {
+		to: link(),
+		className: signUp ? buttonClass() : primary,
 		children: "Sign in"
-	})] });
+	}), signUp] });
 };
 /**
 * What a visitor who is not signed in is told about something they could use once signed in: the prompt's title, what

package/dist/auth/sign-up-code-form.js

@@ -0,0 +1,22 @@
+import { CodeForm } from "./code-form.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/auth/sign-up-code-form.tsx
+/** The second step of making an account: the emailed code on its own, before the name and password. */
+const SignUpCodeForm = ({ email, onBack, ...rest }) => /* @__PURE__ */ jsx(CodeForm, {
+	title: "Check your email",
+	description: "Enter the code we sent to create your account.",
+	explanation: /* @__PURE__ */ jsxs(Fragment, { children: [
+		"A 6-digit code is on its way to ",
+		/* @__PURE__ */ jsx("span", {
+			className: "font-medium text-foreground",
+			children: email
+		}),
+		". It works for 5 minutes, once. If the address has an account already, the email says so instead."
+	] }),
+	submitLabel: "Continue",
+	onChangeAddress: onBack,
+	changeAddressLabel: "Use another address",
+	...rest
+});
+//#endregion
+export { SignUpCodeForm };