@protobase/ui 0.15.5 → 0.16.0

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 };

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

@@ -1,129 +1,99 @@
 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 { useId, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/auth/sign-up-details-form.tsx
-/** The second step of making an account: the emailed code, the person's name and how they will sign in. */
-const SignUpDetailsForm = ({ email, onSubmit, onResend, onBack, methods, busy, error, notice }) => {
-	const [code, setCode] = useState("");
+/** The last step of making an account, once the emailed code was right: the person's name and how they will sign in. */
+const SignUpDetailsForm = ({ email, onSubmit, onBack, methods, busy, error }) => {
 	const [name, setName] = useState("");
 	const [password, setPassword] = useState("");
 	const passwordHint = useId();
 	const withPassword = methods.includes("password");
 	const passwordOptional = methods.includes("emailCode");
 	return /* @__PURE__ */ jsxs(AuthLayout, {
-		title: "Check your email",
-		description: "Enter the code we sent to create your account.",
-		children: [
-			/* @__PURE__ */ jsxs("p", {
-				className: "mb-4 text-[13px] text-muted-foreground",
-				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."
-				]
-			}),
-			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: code.trim(),
-						name: name.trim(),
-						...withPassword && password && { password }
-					});
-				},
-				children: [
-					/* @__PURE__ */ jsxs("label", {
+		title: "Your details",
+		description: "One last step to create your account.",
+		children: [/* @__PURE__ */ jsxs("p", {
+			className: "mb-4 text-[13px] text-muted-foreground",
+			children: [
+				"The code was right: the account is for ",
+				/* @__PURE__ */ jsx("span", {
+					className: "font-medium text-foreground",
+					children: email
+				}),
+				"."
+			]
+		}), /* @__PURE__ */ jsxs("form", {
+			className: "flex flex-col gap-4",
+			onSubmit: (event) => {
+				event.preventDefault();
+				onSubmit({
+					name: name.trim(),
+					...withPassword && password && { password }
+				});
+			},
+			children: [
+				/* @__PURE__ */ jsxs("label", {
+					className: "flex flex-col gap-1.5 text-[13px] font-medium",
+					children: ["Your name", /* @__PURE__ */ jsx(Input, {
+						name: "name",
+						autoComplete: "name",
+						required: true,
+						autoFocus: true,
+						maxLength: 200,
+						value: name,
+						onChange: (event) => setName(event.target.value),
+						className: "min-h-6"
+					})]
+				}),
+				withPassword && /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col gap-1.5",
+					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)
-						})]
-					}),
-					/* @__PURE__ */ jsxs("label", {
-						className: "flex flex-col gap-1.5 text-[13px] font-medium",
-						children: ["Your name", /* @__PURE__ */ jsx(Input, {
-							name: "name",
-							autoComplete: "name",
-							required: true,
-							maxLength: 200,
-							value: name,
-							onChange: (event) => setName(event.target.value),
+						children: [passwordOptional ? "Password (optional)" : "Password", /* @__PURE__ */ jsx(Input, {
+							type: "password",
+							name: "password",
+							autoComplete: "new-password",
+							"aria-describedby": passwordHint,
+							required: !passwordOptional,
+							minLength: 12,
+							maxLength: 128,
+							value: password,
+							onChange: (event) => setPassword(event.target.value),
 							className: "min-h-6"
 						})]
-					}),
-					withPassword && /* @__PURE__ */ jsxs("div", {
-						className: "flex flex-col gap-1.5",
-						children: [/* @__PURE__ */ jsxs("label", {
-							className: "flex flex-col gap-1.5 text-[13px] font-medium",
-							children: [passwordOptional ? "Password (optional)" : "Password", /* @__PURE__ */ jsx(Input, {
-								type: "password",
-								name: "password",
-								autoComplete: "new-password",
-								"aria-describedby": passwordHint,
-								required: !passwordOptional,
-								minLength: 12,
-								maxLength: 128,
-								value: password,
-								onChange: (event) => setPassword(event.target.value),
-								className: "min-h-6"
-							})]
-						}), /* @__PURE__ */ jsxs("p", {
-							id: passwordHint,
-							className: "text-xs text-muted-foreground",
-							children: [
-								"At least ",
-								12,
-								" characters.",
-								passwordOptional && " Without one, you sign in with a code we email you."
-							]
-						})]
-					}),
-					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: "Create account"
-					}),
-					/* @__PURE__ */ jsxs("div", {
-						className: "flex justify-between gap-2",
-						children: [/* @__PURE__ */ jsx(Button, {
-							variant: "ghost",
-							onClick: onBack,
-							className: "min-h-10",
-							children: "Use another address"
-						}), /* @__PURE__ */ jsx(Button, {
-							variant: "ghost",
-							onClick: onResend,
-							disabled: busy,
-							className: "min-h-10",
-							children: "Send a new code"
-						})]
-					})
-				]
-			})
-		]
+					}), /* @__PURE__ */ jsxs("p", {
+						id: passwordHint,
+						className: "text-xs text-muted-foreground",
+						children: [
+							"At least ",
+							12,
+							" characters.",
+							passwordOptional && " Without one, you sign in with a code we email you."
+						]
+					})]
+				}),
+				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: "Create account"
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					onClick: onBack,
+					className: "min-h-10",
+					children: "Use another address"
+				})
+			]
+		})]
 	});
 };
 //#endregion