@poly-x/react 0.1.0-alpha.6 → 0.1.0-alpha.7

package/dist/index.cjs

@@ -352,7 +352,7 @@ function Protected({ children, fallback = null, loading = null }) {
 }
 //#endregion
 //#region src/components/sign-in.tsx
-const DEFAULT_LABELS = {
+const DEFAULT_LABELS$2 = {
 	heading: "Sign in",
 	subheading: "Enter your credentials to continue.",
 	tagline: "",
@@ -393,7 +393,7 @@ function SignIn(props) {
 	const action = props.action ?? "/api/polyx/authenticate";
 	const variant = props.variant ?? "card";
 	const labels = {
-		...DEFAULT_LABELS,
+		...DEFAULT_LABELS$2,
 		...props.labels
 	};
 	const [email, setEmail] = (0, react.useState)("");
@@ -668,6 +668,486 @@ function SignIn(props) {
 	});
 }
 //#endregion
+//#region src/components/_recovery-status.tsx
+const ICONS = {
+	mail: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.75",
+		"aria-hidden": "true",
+		focusable: "false",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+			x: "3",
+			y: "5",
+			width: "18",
+			height: "14",
+			rx: "2.5"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+			d: "m4 7 8 6 8-6",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})]
+	}),
+	check: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		"aria-hidden": "true",
+		focusable: "false",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+			d: "m5 12.5 4.5 4.5L19 7",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})
+	}),
+	warning: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.75",
+		"aria-hidden": "true",
+		focusable: "false",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+				cx: "12",
+				cy: "12",
+				r: "9"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+				d: "M12 7.5v5",
+				strokeLinecap: "round"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+				cx: "12",
+				cy: "16",
+				r: "0.6",
+				fill: "currentColor",
+				stroke: "none"
+			})
+		]
+	})
+};
+/**
+* A centered, icon-topped confirmation card — the shape every recovery terminal
+* state shares (link sent, password updated, link expired). Reuses the `<SignIn/>`
+* class anatomy so it themes from the same `--polyx-*` custom properties.
+*/
+function RecoveryStatus(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "polyx-signin__card",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "polyx-signin__header polyx-signin__header--center",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: `polyx-signin__status-icon polyx-signin__status-icon--${props.tone ?? "brand"}`,
+						children: ICONS[props.icon]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
+						className: "polyx-signin__heading",
+						children: props.heading
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "polyx-signin__subheading",
+						children: props.children
+					})
+				]
+			}),
+			props.actions ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "polyx-signin__actions",
+				children: props.actions
+			}) : null,
+			props.footer
+		]
+	});
+}
+//#endregion
+//#region src/components/forgot-password.tsx
+const DEFAULT_LABELS$1 = {
+	heading: "Reset your password",
+	subheading: "Enter your email and we'll send you a reset link.",
+	emailLabel: "Email",
+	emailPlaceholder: "you@company.com",
+	submit: "Send reset link",
+	submitting: "Sending…",
+	sentHeading: "Check your email",
+	sentSubheading: "If an account exists for {email}, a password reset link is on its way. It expires in 30 minutes.",
+	differentEmail: "Use a different email",
+	backToSignIn: "Back to sign in",
+	securedBy: "Secured by PolyX",
+	genericError: "Something went wrong. Please try again."
+};
+/** Splits a label on `{email}` and drops the entered address in, emphasized. */
+function withEmail(template, email) {
+	return template.split("{email}").map((chunk, index, all) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [chunk, index < all.length - 1 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: "polyx-signin__email",
+		children: email || "that address"
+	}) : null] }, index));
+}
+/**
+* The self-service "forgot password" form (poly-x v5 / F040). Renders an email field
+* inside the consuming app and POSTs to the SDK's BFF (`@poly-x/next` `forgotPassword`),
+* which asks poly-auth to email a single-use reset link SERVER-SIDE. The response is
+* always the same — no token, no account-existence signal — so after submit the form
+* shows an identical "check your email" state whether or not the account exists.
+*
+* Reuses the `<SignIn/>` styling: `import "@poly-x/react/styles.css"` once, then theme
+* via the `--polyx-*` custom properties. Target `.polyx-forgot` for form-specific tweaks.
+*/
+function ForgotPassword(props) {
+	const action = props.action ?? "/api/polyx/forgot-password";
+	const signInPath = props.signInPath ?? "/sign-in";
+	const labels = {
+		...DEFAULT_LABELS$1,
+		...props.labels
+	};
+	const [email, setEmail] = (0, react.useState)("");
+	const [submitting, setSubmitting] = (0, react.useState)(false);
+	const [sent, setSent] = (0, react.useState)(false);
+	const [error, setError] = (0, react.useState)(null);
+	async function onSubmit(event) {
+		event.preventDefault();
+		setSubmitting(true);
+		setError(null);
+		try {
+			if ((await (await fetch(action, {
+				method: "POST",
+				headers: { "content-type": "application/json" },
+				body: JSON.stringify({ email })
+			})).json().catch(() => ({}))).status === "accepted") {
+				setSent(true);
+				return;
+			}
+			setError(labels.genericError);
+		} catch {
+			setError(labels.genericError);
+		} finally {
+			setSubmitting(false);
+		}
+	}
+	const rootClass = [
+		"polyx-signin",
+		"polyx-forgot",
+		props.className
+	].filter(Boolean).join(" ");
+	const footer = props.showSecuredBy === false ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+		className: "polyx-signin__footer",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+			className: "polyx-signin__shield",
+			viewBox: "0 0 16 16",
+			fill: "currentColor",
+			"aria-hidden": "true",
+			focusable: "false",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M8 0.5 2 3v4.2c0 3.5 2.5 6.7 6 7.8 3.5-1.1 6-4.3 6-7.8V3L8 .5Zm2.9 5.6-3.4 3.4a.7.7 0 0 1-1 0L5.1 8.1a.7.7 0 1 1 1-1l.9.9 2.9-2.9a.7.7 0 0 1 1 1Z" })
+		}), labels.securedBy]
+	});
+	const header = (heading, subheading) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "polyx-signin__header",
+		children: [
+			props.logo ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "polyx-signin__logo",
+				children: props.logo
+			}) : null,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
+				className: "polyx-signin__heading",
+				children: heading
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "polyx-signin__subheading",
+				children: subheading
+			})
+		]
+	});
+	if (sent) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: rootClass,
+		"data-polyx-forgot": "sent",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RecoveryStatus, {
+			icon: "mail",
+			heading: labels.sentHeading,
+			footer,
+			actions: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				className: "polyx-signin__link",
+				onClick: () => setSent(false),
+				children: labels.differentEmail
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+				className: "polyx-signin__link",
+				href: signInPath,
+				children: labels.backToSignIn
+			})] }),
+			children: withEmail(labels.sentSubheading, email)
+		})
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: rootClass,
+		"data-polyx-forgot": "request",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "polyx-signin__card",
+			children: [
+				header(labels.heading, labels.subheading),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
+					className: "polyx-signin__form",
+					onSubmit,
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+							className: "polyx-signin__field",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "polyx-signin__label",
+								children: labels.emailLabel
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+								className: "polyx-signin__input",
+								type: "email",
+								name: "email",
+								autoComplete: "username",
+								placeholder: labels.emailPlaceholder,
+								required: true,
+								value: email,
+								disabled: submitting,
+								onChange: (event) => setEmail(event.target.value)
+							})]
+						}),
+						error ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							role: "alert",
+							className: "polyx-signin__error",
+							children: error
+						}) : null,
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "submit",
+							className: "polyx-signin__submit",
+							disabled: submitting,
+							children: submitting ? labels.submitting : labels.submit
+						})
+					]
+				}),
+				footer
+			]
+		})
+	});
+}
+//#endregion
+//#region src/components/reset-password.tsx
+const DEFAULT_LABELS = {
+	heading: "Choose a new password",
+	subheading: "Enter and confirm your new password.",
+	newPasswordLabel: "New password",
+	confirmPasswordLabel: "Confirm new password",
+	passwordPlaceholder: "••••••••",
+	submit: "Reset password",
+	submitting: "Resetting…",
+	successHeading: "Password updated",
+	successSubheading: "You can now sign in with your new password.",
+	invalidHeading: "This link is invalid or expired",
+	invalidSubheading: "Password reset links can be used once and expire quickly. Request a new one.",
+	requestNewLink: "Request a new link",
+	backToSignIn: "Back to sign in",
+	securedBy: "Secured by PolyX",
+	passwordMismatch: "Those passwords don't match.",
+	weakPassword: "Password must be at least 8 characters.",
+	genericError: "Something went wrong. Please try again."
+};
+/** Matches poly-auth's v5 reset floor (F040). */
+const DEFAULT_MIN_LENGTH = 8;
+/**
+* The reset-completion form (poly-x v5 / F040). Reads the opaque token from the URL,
+* collects a new password, and POSTs to the SDK's BFF (`@poly-x/next` `resetPassword`),
+* which redeems the token single-use server-side. The token is never decoded in the
+* browser — identity, validity, and expiry are all enforced by the backend.
+*
+* Reuses the `<SignIn/>` styling: `import "@poly-x/react/styles.css"` once, then theme
+* via the `--polyx-*` custom properties. Target `.polyx-reset` for form-specific tweaks.
+*/
+function ResetPassword(props) {
+	const action = props.action ?? "/api/polyx/reset-password";
+	const minLength = props.minLength ?? DEFAULT_MIN_LENGTH;
+	const signInPath = props.signInPath ?? "/sign-in";
+	const forgotPasswordPath = props.forgotPasswordPath ?? "/forgot-password";
+	const labels = {
+		...DEFAULT_LABELS,
+		...props.labels
+	};
+	const [token] = (0, react.useState)(() => props.token ?? (typeof window !== "undefined" ? new URLSearchParams(window.location.search).get("token") ?? "" : ""));
+	const [newPassword, setNewPassword] = (0, react.useState)("");
+	const [confirmPassword, setConfirmPassword] = (0, react.useState)("");
+	const [submitting, setSubmitting] = (0, react.useState)(false);
+	const [error, setError] = (0, react.useState)(null);
+	const [step, setStep] = (0, react.useState)(token ? "form" : "invalid");
+	async function onSubmit(event) {
+		event.preventDefault();
+		if (newPassword !== confirmPassword) {
+			setError(labels.passwordMismatch);
+			return;
+		}
+		setSubmitting(true);
+		setError(null);
+		try {
+			switch ((await (await fetch(action, {
+				method: "POST",
+				headers: { "content-type": "application/json" },
+				body: JSON.stringify({
+					token,
+					newPassword,
+					confirmPassword
+				})
+			})).json().catch(() => ({}))).status) {
+				case "success":
+					setStep("success");
+					if (props.afterResetPath) window.location.assign(props.afterResetPath);
+					return;
+				case "weak_password":
+					setError(labels.weakPassword);
+					return;
+				case "password_mismatch":
+					setError(labels.passwordMismatch);
+					return;
+				case "invalid_or_expired":
+					setStep("invalid");
+					return;
+				default:
+					setError(labels.genericError);
+					return;
+			}
+		} catch {
+			setError(labels.genericError);
+		} finally {
+			setSubmitting(false);
+		}
+	}
+	const rootClass = [
+		"polyx-signin",
+		"polyx-reset",
+		props.className
+	].filter(Boolean).join(" ");
+	const footer = props.showSecuredBy === false ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+		className: "polyx-signin__footer",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+			className: "polyx-signin__shield",
+			viewBox: "0 0 16 16",
+			fill: "currentColor",
+			"aria-hidden": "true",
+			focusable: "false",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M8 0.5 2 3v4.2c0 3.5 2.5 6.7 6 7.8 3.5-1.1 6-4.3 6-7.8V3L8 .5Zm2.9 5.6-3.4 3.4a.7.7 0 0 1-1 0L5.1 8.1a.7.7 0 1 1 1-1l.9.9 2.9-2.9a.7.7 0 0 1 1 1Z" })
+		}), labels.securedBy]
+	});
+	const header = (heading, subheading) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "polyx-signin__header",
+		children: [
+			props.logo ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "polyx-signin__logo",
+				children: props.logo
+			}) : null,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
+				className: "polyx-signin__heading",
+				children: heading
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "polyx-signin__subheading",
+				children: subheading
+			})
+		]
+	});
+	if (step === "success") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: rootClass,
+		"data-polyx-reset": "success",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RecoveryStatus, {
+			icon: "check",
+			heading: labels.successHeading,
+			footer,
+			actions: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+				className: "polyx-signin__link",
+				href: signInPath,
+				children: labels.backToSignIn
+			}),
+			children: labels.successSubheading
+		})
+	});
+	if (step === "invalid") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: rootClass,
+		"data-polyx-reset": "invalid",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RecoveryStatus, {
+			icon: "warning",
+			tone: "danger",
+			heading: labels.invalidHeading,
+			footer,
+			actions: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+				className: "polyx-signin__link",
+				href: forgotPasswordPath,
+				children: labels.requestNewLink
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+				className: "polyx-signin__link",
+				href: signInPath,
+				children: labels.backToSignIn
+			})] }),
+			children: labels.invalidSubheading
+		})
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: rootClass,
+		"data-polyx-reset": step,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "polyx-signin__card",
+			children: [
+				header(labels.heading, labels.subheading),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
+					className: "polyx-signin__form",
+					onSubmit,
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+							className: "polyx-signin__field",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "polyx-signin__label",
+								children: labels.newPasswordLabel
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+								className: "polyx-signin__input",
+								type: "password",
+								name: "newPassword",
+								autoComplete: "new-password",
+								placeholder: labels.passwordPlaceholder,
+								required: true,
+								minLength,
+								value: newPassword,
+								disabled: submitting,
+								onChange: (event) => setNewPassword(event.target.value)
+							})]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+							className: "polyx-signin__field",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "polyx-signin__label",
+								children: labels.confirmPasswordLabel
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+								className: "polyx-signin__input",
+								type: "password",
+								name: "confirmPassword",
+								autoComplete: "new-password",
+								placeholder: labels.passwordPlaceholder,
+								required: true,
+								minLength,
+								value: confirmPassword,
+								disabled: submitting,
+								onChange: (event) => setConfirmPassword(event.target.value)
+							})]
+						}),
+						error ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							role: "alert",
+							className: "polyx-signin__error",
+							children: error
+						}) : null,
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "submit",
+							className: "polyx-signin__submit",
+							disabled: submitting,
+							children: submitting ? labels.submitting : labels.submit
+						})
+					]
+				}),
+				footer
+			]
+		})
+	});
+}
+//#endregion
 //#region src/components/auth-callback.tsx
 /** Drop on your `/auth/callback` route: completes the sign-in exchange on mount. */
 function AuthCallback({ children = null }) {
@@ -689,11 +1169,13 @@ const version = "0.0.0";
 exports.AuthCallback = AuthCallback;
 exports.BroadcastAuthChannel = BroadcastAuthChannel;
 exports.BroadcastChannelSessionChannel = BroadcastChannelSessionChannel;
+exports.ForgotPassword = ForgotPassword;
 exports.PACKAGE_NAME = PACKAGE_NAME;
 exports.PolyXContext = PolyXContext;
 exports.PolyXProvider = PolyXProvider;
 exports.PopupCancelledError = PopupCancelledError;
 exports.Protected = Protected;
+exports.ResetPassword = ResetPassword;
 exports.SessionStoragePkceStore = SessionStoragePkceStore;
 exports.SignIn = SignIn;
 exports.WebLocksLock = WebLocksLock;

package/dist/index.d.cts

@@ -261,6 +261,101 @@ interface SignInProps {
  */
 declare function SignIn(props: SignInProps): ReactNode;
 //#endregion
+//#region src/components/forgot-password.d.ts
+/** Every user-facing string, overridable for i18n / white-labelling. */
+interface ForgotPasswordLabels {
+  heading: string;
+  subheading: string;
+  emailLabel: string;
+  emailPlaceholder: string;
+  submit: string;
+  submitting: string;
+  /** Shown after submit — always, regardless of whether the account exists. */
+  sentHeading: string;
+  /** Confirmation body. `{email}` is replaced with the entered address, emphasized. */
+  sentSubheading: string;
+  differentEmail: string;
+  backToSignIn: string;
+  securedBy: string;
+  genericError: string;
+}
+interface ForgotPasswordProps {
+  /** BFF endpoint backed by `createAuthHandlers().forgotPassword`. Default `/api/polyx/forgot-password`. */
+  action?: string;
+  /** Where the "back to sign in" link points. Default `/sign-in`. */
+  signInPath?: string;
+  /** Rendered above the heading — your wordmark or logo. */
+  logo?: ReactNode;
+  /** Show the "Secured by PolyX" attribution under the form. Default true. */
+  showSecuredBy?: boolean;
+  /** Appended to the root element's class list, for escape-hatch styling. */
+  className?: string;
+  labels?: Partial<ForgotPasswordLabels>;
+}
+/**
+ * The self-service "forgot password" form (poly-x v5 / F040). Renders an email field
+ * inside the consuming app and POSTs to the SDK's BFF (`@poly-x/next` `forgotPassword`),
+ * which asks poly-auth to email a single-use reset link SERVER-SIDE. The response is
+ * always the same — no token, no account-existence signal — so after submit the form
+ * shows an identical "check your email" state whether or not the account exists.
+ *
+ * Reuses the `<SignIn/>` styling: `import "@poly-x/react/styles.css"` once, then theme
+ * via the `--polyx-*` custom properties. Target `.polyx-forgot` for form-specific tweaks.
+ */
+declare function ForgotPassword(props: ForgotPasswordProps): ReactNode;
+//#endregion
+//#region src/components/reset-password.d.ts
+/** Every user-facing string, overridable for i18n / white-labelling. */
+interface ResetPasswordLabels {
+  heading: string;
+  subheading: string;
+  newPasswordLabel: string;
+  confirmPasswordLabel: string;
+  passwordPlaceholder: string;
+  submit: string;
+  submitting: string;
+  successHeading: string;
+  successSubheading: string;
+  invalidHeading: string;
+  invalidSubheading: string;
+  requestNewLink: string;
+  backToSignIn: string;
+  securedBy: string;
+  passwordMismatch: string;
+  weakPassword: string;
+  genericError: string;
+}
+interface ResetPasswordProps {
+  /** BFF endpoint backed by `createAuthHandlers().resetPassword`. Default `/api/polyx/reset-password`. */
+  action?: string;
+  /** The opaque reset token. Defaults to `?token=` from the URL (client-side). */
+  token?: string;
+  /** Where to send the browser after a successful reset. Default `/sign-in`. */
+  afterResetPath?: string;
+  /** Where "request a new link" / "back to sign in" point. Default `/forgot-password` and `/sign-in`. */
+  forgotPasswordPath?: string;
+  signInPath?: string;
+  /** Rendered above the heading — your wordmark or logo. */
+  logo?: ReactNode;
+  /** Show the "Secured by PolyX" attribution under the form. Default true. */
+  showSecuredBy?: boolean;
+  /** Client-side minimum password length (the backend enforces the real floor). Default 8. */
+  minLength?: number;
+  /** Appended to the root element's class list, for escape-hatch styling. */
+  className?: string;
+  labels?: Partial<ResetPasswordLabels>;
+}
+/**
+ * The reset-completion form (poly-x v5 / F040). Reads the opaque token from the URL,
+ * collects a new password, and POSTs to the SDK's BFF (`@poly-x/next` `resetPassword`),
+ * which redeems the token single-use server-side. The token is never decoded in the
+ * browser — identity, validity, and expiry are all enforced by the backend.
+ *
+ * Reuses the `<SignIn/>` styling: `import "@poly-x/react/styles.css"` once, then theme
+ * via the `--polyx-*` custom properties. Target `.polyx-reset` for form-specific tweaks.
+ */
+declare function ResetPassword(props: ResetPasswordProps): ReactNode;
+//#endregion
 //#region src/components/auth-callback.d.ts
 interface AuthCallbackProps {
   /** Rendered while the exchange completes (e.g. a spinner). */
@@ -279,4 +374,4 @@ declare function AuthCallback({
 declare const PACKAGE_NAME = "@poly-x/react";
 declare const version = "0.0.0";
 //#endregion
-export { AuthCallback, type AuthCallbackMessage, type AuthCallbackProps, type AuthChannel, BroadcastAuthChannel, BroadcastChannelSessionChannel, type BrowserBridge, type CallbackParams, type LoginController, type LoginControllerDeps, PACKAGE_NAME, PolyXContext, type PolyXContextValue, PolyXProvider, type PolyXProviderProps, PopupCancelledError, type PopupHandle, Protected, type ProtectedProps, SessionStoragePkceStore, SignIn, type SignInLabels, type SignInOptions, type SignInProps, type SignInVariant, type UseAuth, WebLocksLock, WindowBrowserBridge, createLoginController, useAuth, useAuthCallback, useSession, useUser, version };
+export { AuthCallback, type AuthCallbackMessage, type AuthCallbackProps, type AuthChannel, BroadcastAuthChannel, BroadcastChannelSessionChannel, type BrowserBridge, type CallbackParams, ForgotPassword, type ForgotPasswordLabels, type ForgotPasswordProps, type LoginController, type LoginControllerDeps, PACKAGE_NAME, PolyXContext, type PolyXContextValue, PolyXProvider, type PolyXProviderProps, PopupCancelledError, type PopupHandle, Protected, type ProtectedProps, ResetPassword, type ResetPasswordLabels, type ResetPasswordProps, SessionStoragePkceStore, SignIn, type SignInLabels, type SignInOptions, type SignInProps, type SignInVariant, type UseAuth, WebLocksLock, WindowBrowserBridge, createLoginController, useAuth, useAuthCallback, useSession, useUser, version };

package/dist/index.d.mts

@@ -261,6 +261,101 @@ interface SignInProps {
  */
 declare function SignIn(props: SignInProps): ReactNode;
 //#endregion
+//#region src/components/forgot-password.d.ts
+/** Every user-facing string, overridable for i18n / white-labelling. */
+interface ForgotPasswordLabels {
+  heading: string;
+  subheading: string;
+  emailLabel: string;
+  emailPlaceholder: string;
+  submit: string;
+  submitting: string;
+  /** Shown after submit — always, regardless of whether the account exists. */
+  sentHeading: string;
+  /** Confirmation body. `{email}` is replaced with the entered address, emphasized. */
+  sentSubheading: string;
+  differentEmail: string;
+  backToSignIn: string;
+  securedBy: string;
+  genericError: string;
+}
+interface ForgotPasswordProps {
+  /** BFF endpoint backed by `createAuthHandlers().forgotPassword`. Default `/api/polyx/forgot-password`. */
+  action?: string;
+  /** Where the "back to sign in" link points. Default `/sign-in`. */
+  signInPath?: string;
+  /** Rendered above the heading — your wordmark or logo. */
+  logo?: ReactNode;
+  /** Show the "Secured by PolyX" attribution under the form. Default true. */
+  showSecuredBy?: boolean;
+  /** Appended to the root element's class list, for escape-hatch styling. */
+  className?: string;
+  labels?: Partial<ForgotPasswordLabels>;
+}
+/**
+ * The self-service "forgot password" form (poly-x v5 / F040). Renders an email field
+ * inside the consuming app and POSTs to the SDK's BFF (`@poly-x/next` `forgotPassword`),
+ * which asks poly-auth to email a single-use reset link SERVER-SIDE. The response is
+ * always the same — no token, no account-existence signal — so after submit the form
+ * shows an identical "check your email" state whether or not the account exists.
+ *
+ * Reuses the `<SignIn/>` styling: `import "@poly-x/react/styles.css"` once, then theme
+ * via the `--polyx-*` custom properties. Target `.polyx-forgot` for form-specific tweaks.
+ */
+declare function ForgotPassword(props: ForgotPasswordProps): ReactNode;
+//#endregion
+//#region src/components/reset-password.d.ts
+/** Every user-facing string, overridable for i18n / white-labelling. */
+interface ResetPasswordLabels {
+  heading: string;
+  subheading: string;
+  newPasswordLabel: string;
+  confirmPasswordLabel: string;
+  passwordPlaceholder: string;
+  submit: string;
+  submitting: string;
+  successHeading: string;
+  successSubheading: string;
+  invalidHeading: string;
+  invalidSubheading: string;
+  requestNewLink: string;
+  backToSignIn: string;
+  securedBy: string;
+  passwordMismatch: string;
+  weakPassword: string;
+  genericError: string;
+}
+interface ResetPasswordProps {
+  /** BFF endpoint backed by `createAuthHandlers().resetPassword`. Default `/api/polyx/reset-password`. */
+  action?: string;
+  /** The opaque reset token. Defaults to `?token=` from the URL (client-side). */
+  token?: string;
+  /** Where to send the browser after a successful reset. Default `/sign-in`. */
+  afterResetPath?: string;
+  /** Where "request a new link" / "back to sign in" point. Default `/forgot-password` and `/sign-in`. */
+  forgotPasswordPath?: string;
+  signInPath?: string;
+  /** Rendered above the heading — your wordmark or logo. */
+  logo?: ReactNode;
+  /** Show the "Secured by PolyX" attribution under the form. Default true. */
+  showSecuredBy?: boolean;
+  /** Client-side minimum password length (the backend enforces the real floor). Default 8. */
+  minLength?: number;
+  /** Appended to the root element's class list, for escape-hatch styling. */
+  className?: string;
+  labels?: Partial<ResetPasswordLabels>;
+}
+/**
+ * The reset-completion form (poly-x v5 / F040). Reads the opaque token from the URL,
+ * collects a new password, and POSTs to the SDK's BFF (`@poly-x/next` `resetPassword`),
+ * which redeems the token single-use server-side. The token is never decoded in the
+ * browser — identity, validity, and expiry are all enforced by the backend.
+ *
+ * Reuses the `<SignIn/>` styling: `import "@poly-x/react/styles.css"` once, then theme
+ * via the `--polyx-*` custom properties. Target `.polyx-reset` for form-specific tweaks.
+ */
+declare function ResetPassword(props: ResetPasswordProps): ReactNode;
+//#endregion
 //#region src/components/auth-callback.d.ts
 interface AuthCallbackProps {
   /** Rendered while the exchange completes (e.g. a spinner). */
@@ -279,4 +374,4 @@ declare function AuthCallback({
 declare const PACKAGE_NAME = "@poly-x/react";
 declare const version = "0.0.0";
 //#endregion
-export { AuthCallback, type AuthCallbackMessage, type AuthCallbackProps, type AuthChannel, BroadcastAuthChannel, BroadcastChannelSessionChannel, type BrowserBridge, type CallbackParams, type LoginController, type LoginControllerDeps, PACKAGE_NAME, PolyXContext, type PolyXContextValue, PolyXProvider, type PolyXProviderProps, PopupCancelledError, type PopupHandle, Protected, type ProtectedProps, SessionStoragePkceStore, SignIn, type SignInLabels, type SignInOptions, type SignInProps, type SignInVariant, type UseAuth, WebLocksLock, WindowBrowserBridge, createLoginController, useAuth, useAuthCallback, useSession, useUser, version };
+export { AuthCallback, type AuthCallbackMessage, type AuthCallbackProps, type AuthChannel, BroadcastAuthChannel, BroadcastChannelSessionChannel, type BrowserBridge, type CallbackParams, ForgotPassword, type ForgotPasswordLabels, type ForgotPasswordProps, type LoginController, type LoginControllerDeps, PACKAGE_NAME, PolyXContext, type PolyXContextValue, PolyXProvider, type PolyXProviderProps, PopupCancelledError, type PopupHandle, Protected, type ProtectedProps, ResetPassword, type ResetPasswordLabels, type ResetPasswordProps, SessionStoragePkceStore, SignIn, type SignInLabels, type SignInOptions, type SignInProps, type SignInVariant, type UseAuth, WebLocksLock, WindowBrowserBridge, createLoginController, useAuth, useAuthCallback, useSession, useUser, version };

package/dist/index.mjs

@@ -1,7 +1,7 @@
 "use client";
 import { AuthClient, FetchTransport, InMemoryLock, InMemoryPkceStore, InMemorySessionChannel, InMemorySessionStore, createSessionEngine, generatePkce, randomState, resolveConfig } from "@poly-x/core";
-import { createContext, useCallback, useContext, useEffect, useMemo, useState, useSyncExternalStore } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, createContext, useCallback, useContext, useEffect, useMemo, useState, useSyncExternalStore } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/auth-channel.ts
 var BroadcastAuthChannel = class {
 	supported;
@@ -351,7 +351,7 @@ function Protected({ children, fallback = null, loading = null }) {
 }
 //#endregion
 //#region src/components/sign-in.tsx
-const DEFAULT_LABELS = {
+const DEFAULT_LABELS$2 = {
 	heading: "Sign in",
 	subheading: "Enter your credentials to continue.",
 	tagline: "",
@@ -392,7 +392,7 @@ function SignIn(props) {
 	const action = props.action ?? "/api/polyx/authenticate";
 	const variant = props.variant ?? "card";
 	const labels = {
-		...DEFAULT_LABELS,
+		...DEFAULT_LABELS$2,
 		...props.labels
 	};
 	const [email, setEmail] = useState("");
@@ -648,7 +648,7 @@ function SignIn(props) {
 		"data-polyx-signin": step,
 		children: [/* @__PURE__ */ jsx("aside", {
 			className: "polyx-signin__panel",
-			children: props.panel ?? /* @__PURE__ */ jsxs(Fragment, { children: [props.logo ? /* @__PURE__ */ jsx("div", {
+			children: props.panel ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [props.logo ? /* @__PURE__ */ jsx("div", {
 				className: "polyx-signin__panel-logo",
 				children: props.logo
 			}) : null, labels.tagline ? /* @__PURE__ */ jsx("p", {
@@ -667,6 +667,486 @@ function SignIn(props) {
 	});
 }
 //#endregion
+//#region src/components/_recovery-status.tsx
+const ICONS = {
+	mail: /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.75",
+		"aria-hidden": "true",
+		focusable: "false",
+		children: [/* @__PURE__ */ jsx("rect", {
+			x: "3",
+			y: "5",
+			width: "18",
+			height: "14",
+			rx: "2.5"
+		}), /* @__PURE__ */ jsx("path", {
+			d: "m4 7 8 6 8-6",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})]
+	}),
+	check: /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		"aria-hidden": "true",
+		focusable: "false",
+		children: /* @__PURE__ */ jsx("path", {
+			d: "m5 12.5 4.5 4.5L19 7",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})
+	}),
+	warning: /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.75",
+		"aria-hidden": "true",
+		focusable: "false",
+		children: [
+			/* @__PURE__ */ jsx("circle", {
+				cx: "12",
+				cy: "12",
+				r: "9"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M12 7.5v5",
+				strokeLinecap: "round"
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: "12",
+				cy: "16",
+				r: "0.6",
+				fill: "currentColor",
+				stroke: "none"
+			})
+		]
+	})
+};
+/**
+* A centered, icon-topped confirmation card — the shape every recovery terminal
+* state shares (link sent, password updated, link expired). Reuses the `<SignIn/>`
+* class anatomy so it themes from the same `--polyx-*` custom properties.
+*/
+function RecoveryStatus(props) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "polyx-signin__card",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "polyx-signin__header polyx-signin__header--center",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: `polyx-signin__status-icon polyx-signin__status-icon--${props.tone ?? "brand"}`,
+						children: ICONS[props.icon]
+					}),
+					/* @__PURE__ */ jsx("h1", {
+						className: "polyx-signin__heading",
+						children: props.heading
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "polyx-signin__subheading",
+						children: props.children
+					})
+				]
+			}),
+			props.actions ? /* @__PURE__ */ jsx("div", {
+				className: "polyx-signin__actions",
+				children: props.actions
+			}) : null,
+			props.footer
+		]
+	});
+}
+//#endregion
+//#region src/components/forgot-password.tsx
+const DEFAULT_LABELS$1 = {
+	heading: "Reset your password",
+	subheading: "Enter your email and we'll send you a reset link.",
+	emailLabel: "Email",
+	emailPlaceholder: "you@company.com",
+	submit: "Send reset link",
+	submitting: "Sending…",
+	sentHeading: "Check your email",
+	sentSubheading: "If an account exists for {email}, a password reset link is on its way. It expires in 30 minutes.",
+	differentEmail: "Use a different email",
+	backToSignIn: "Back to sign in",
+	securedBy: "Secured by PolyX",
+	genericError: "Something went wrong. Please try again."
+};
+/** Splits a label on `{email}` and drops the entered address in, emphasized. */
+function withEmail(template, email) {
+	return template.split("{email}").map((chunk, index, all) => /* @__PURE__ */ jsxs(Fragment, { children: [chunk, index < all.length - 1 ? /* @__PURE__ */ jsx("span", {
+		className: "polyx-signin__email",
+		children: email || "that address"
+	}) : null] }, index));
+}
+/**
+* The self-service "forgot password" form (poly-x v5 / F040). Renders an email field
+* inside the consuming app and POSTs to the SDK's BFF (`@poly-x/next` `forgotPassword`),
+* which asks poly-auth to email a single-use reset link SERVER-SIDE. The response is
+* always the same — no token, no account-existence signal — so after submit the form
+* shows an identical "check your email" state whether or not the account exists.
+*
+* Reuses the `<SignIn/>` styling: `import "@poly-x/react/styles.css"` once, then theme
+* via the `--polyx-*` custom properties. Target `.polyx-forgot` for form-specific tweaks.
+*/
+function ForgotPassword(props) {
+	const action = props.action ?? "/api/polyx/forgot-password";
+	const signInPath = props.signInPath ?? "/sign-in";
+	const labels = {
+		...DEFAULT_LABELS$1,
+		...props.labels
+	};
+	const [email, setEmail] = useState("");
+	const [submitting, setSubmitting] = useState(false);
+	const [sent, setSent] = useState(false);
+	const [error, setError] = useState(null);
+	async function onSubmit(event) {
+		event.preventDefault();
+		setSubmitting(true);
+		setError(null);
+		try {
+			if ((await (await fetch(action, {
+				method: "POST",
+				headers: { "content-type": "application/json" },
+				body: JSON.stringify({ email })
+			})).json().catch(() => ({}))).status === "accepted") {
+				setSent(true);
+				return;
+			}
+			setError(labels.genericError);
+		} catch {
+			setError(labels.genericError);
+		} finally {
+			setSubmitting(false);
+		}
+	}
+	const rootClass = [
+		"polyx-signin",
+		"polyx-forgot",
+		props.className
+	].filter(Boolean).join(" ");
+	const footer = props.showSecuredBy === false ? null : /* @__PURE__ */ jsxs("p", {
+		className: "polyx-signin__footer",
+		children: [/* @__PURE__ */ jsx("svg", {
+			className: "polyx-signin__shield",
+			viewBox: "0 0 16 16",
+			fill: "currentColor",
+			"aria-hidden": "true",
+			focusable: "false",
+			children: /* @__PURE__ */ jsx("path", { d: "M8 0.5 2 3v4.2c0 3.5 2.5 6.7 6 7.8 3.5-1.1 6-4.3 6-7.8V3L8 .5Zm2.9 5.6-3.4 3.4a.7.7 0 0 1-1 0L5.1 8.1a.7.7 0 1 1 1-1l.9.9 2.9-2.9a.7.7 0 0 1 1 1Z" })
+		}), labels.securedBy]
+	});
+	const header = (heading, subheading) => /* @__PURE__ */ jsxs("div", {
+		className: "polyx-signin__header",
+		children: [
+			props.logo ? /* @__PURE__ */ jsx("div", {
+				className: "polyx-signin__logo",
+				children: props.logo
+			}) : null,
+			/* @__PURE__ */ jsx("h1", {
+				className: "polyx-signin__heading",
+				children: heading
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "polyx-signin__subheading",
+				children: subheading
+			})
+		]
+	});
+	if (sent) return /* @__PURE__ */ jsx("div", {
+		className: rootClass,
+		"data-polyx-forgot": "sent",
+		children: /* @__PURE__ */ jsx(RecoveryStatus, {
+			icon: "mail",
+			heading: labels.sentHeading,
+			footer,
+			actions: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "polyx-signin__link",
+				onClick: () => setSent(false),
+				children: labels.differentEmail
+			}), /* @__PURE__ */ jsx("a", {
+				className: "polyx-signin__link",
+				href: signInPath,
+				children: labels.backToSignIn
+			})] }),
+			children: withEmail(labels.sentSubheading, email)
+		})
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: rootClass,
+		"data-polyx-forgot": "request",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "polyx-signin__card",
+			children: [
+				header(labels.heading, labels.subheading),
+				/* @__PURE__ */ jsxs("form", {
+					className: "polyx-signin__form",
+					onSubmit,
+					children: [
+						/* @__PURE__ */ jsxs("label", {
+							className: "polyx-signin__field",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "polyx-signin__label",
+								children: labels.emailLabel
+							}), /* @__PURE__ */ jsx("input", {
+								className: "polyx-signin__input",
+								type: "email",
+								name: "email",
+								autoComplete: "username",
+								placeholder: labels.emailPlaceholder,
+								required: true,
+								value: email,
+								disabled: submitting,
+								onChange: (event) => setEmail(event.target.value)
+							})]
+						}),
+						error ? /* @__PURE__ */ jsx("p", {
+							role: "alert",
+							className: "polyx-signin__error",
+							children: error
+						}) : null,
+						/* @__PURE__ */ jsx("button", {
+							type: "submit",
+							className: "polyx-signin__submit",
+							disabled: submitting,
+							children: submitting ? labels.submitting : labels.submit
+						})
+					]
+				}),
+				footer
+			]
+		})
+	});
+}
+//#endregion
+//#region src/components/reset-password.tsx
+const DEFAULT_LABELS = {
+	heading: "Choose a new password",
+	subheading: "Enter and confirm your new password.",
+	newPasswordLabel: "New password",
+	confirmPasswordLabel: "Confirm new password",
+	passwordPlaceholder: "••••••••",
+	submit: "Reset password",
+	submitting: "Resetting…",
+	successHeading: "Password updated",
+	successSubheading: "You can now sign in with your new password.",
+	invalidHeading: "This link is invalid or expired",
+	invalidSubheading: "Password reset links can be used once and expire quickly. Request a new one.",
+	requestNewLink: "Request a new link",
+	backToSignIn: "Back to sign in",
+	securedBy: "Secured by PolyX",
+	passwordMismatch: "Those passwords don't match.",
+	weakPassword: "Password must be at least 8 characters.",
+	genericError: "Something went wrong. Please try again."
+};
+/** Matches poly-auth's v5 reset floor (F040). */
+const DEFAULT_MIN_LENGTH = 8;
+/**
+* The reset-completion form (poly-x v5 / F040). Reads the opaque token from the URL,
+* collects a new password, and POSTs to the SDK's BFF (`@poly-x/next` `resetPassword`),
+* which redeems the token single-use server-side. The token is never decoded in the
+* browser — identity, validity, and expiry are all enforced by the backend.
+*
+* Reuses the `<SignIn/>` styling: `import "@poly-x/react/styles.css"` once, then theme
+* via the `--polyx-*` custom properties. Target `.polyx-reset` for form-specific tweaks.
+*/
+function ResetPassword(props) {
+	const action = props.action ?? "/api/polyx/reset-password";
+	const minLength = props.minLength ?? DEFAULT_MIN_LENGTH;
+	const signInPath = props.signInPath ?? "/sign-in";
+	const forgotPasswordPath = props.forgotPasswordPath ?? "/forgot-password";
+	const labels = {
+		...DEFAULT_LABELS,
+		...props.labels
+	};
+	const [token] = useState(() => props.token ?? (typeof window !== "undefined" ? new URLSearchParams(window.location.search).get("token") ?? "" : ""));
+	const [newPassword, setNewPassword] = useState("");
+	const [confirmPassword, setConfirmPassword] = useState("");
+	const [submitting, setSubmitting] = useState(false);
+	const [error, setError] = useState(null);
+	const [step, setStep] = useState(token ? "form" : "invalid");
+	async function onSubmit(event) {
+		event.preventDefault();
+		if (newPassword !== confirmPassword) {
+			setError(labels.passwordMismatch);
+			return;
+		}
+		setSubmitting(true);
+		setError(null);
+		try {
+			switch ((await (await fetch(action, {
+				method: "POST",
+				headers: { "content-type": "application/json" },
+				body: JSON.stringify({
+					token,
+					newPassword,
+					confirmPassword
+				})
+			})).json().catch(() => ({}))).status) {
+				case "success":
+					setStep("success");
+					if (props.afterResetPath) window.location.assign(props.afterResetPath);
+					return;
+				case "weak_password":
+					setError(labels.weakPassword);
+					return;
+				case "password_mismatch":
+					setError(labels.passwordMismatch);
+					return;
+				case "invalid_or_expired":
+					setStep("invalid");
+					return;
+				default:
+					setError(labels.genericError);
+					return;
+			}
+		} catch {
+			setError(labels.genericError);
+		} finally {
+			setSubmitting(false);
+		}
+	}
+	const rootClass = [
+		"polyx-signin",
+		"polyx-reset",
+		props.className
+	].filter(Boolean).join(" ");
+	const footer = props.showSecuredBy === false ? null : /* @__PURE__ */ jsxs("p", {
+		className: "polyx-signin__footer",
+		children: [/* @__PURE__ */ jsx("svg", {
+			className: "polyx-signin__shield",
+			viewBox: "0 0 16 16",
+			fill: "currentColor",
+			"aria-hidden": "true",
+			focusable: "false",
+			children: /* @__PURE__ */ jsx("path", { d: "M8 0.5 2 3v4.2c0 3.5 2.5 6.7 6 7.8 3.5-1.1 6-4.3 6-7.8V3L8 .5Zm2.9 5.6-3.4 3.4a.7.7 0 0 1-1 0L5.1 8.1a.7.7 0 1 1 1-1l.9.9 2.9-2.9a.7.7 0 0 1 1 1Z" })
+		}), labels.securedBy]
+	});
+	const header = (heading, subheading) => /* @__PURE__ */ jsxs("div", {
+		className: "polyx-signin__header",
+		children: [
+			props.logo ? /* @__PURE__ */ jsx("div", {
+				className: "polyx-signin__logo",
+				children: props.logo
+			}) : null,
+			/* @__PURE__ */ jsx("h1", {
+				className: "polyx-signin__heading",
+				children: heading
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "polyx-signin__subheading",
+				children: subheading
+			})
+		]
+	});
+	if (step === "success") return /* @__PURE__ */ jsx("div", {
+		className: rootClass,
+		"data-polyx-reset": "success",
+		children: /* @__PURE__ */ jsx(RecoveryStatus, {
+			icon: "check",
+			heading: labels.successHeading,
+			footer,
+			actions: /* @__PURE__ */ jsx("a", {
+				className: "polyx-signin__link",
+				href: signInPath,
+				children: labels.backToSignIn
+			}),
+			children: labels.successSubheading
+		})
+	});
+	if (step === "invalid") return /* @__PURE__ */ jsx("div", {
+		className: rootClass,
+		"data-polyx-reset": "invalid",
+		children: /* @__PURE__ */ jsx(RecoveryStatus, {
+			icon: "warning",
+			tone: "danger",
+			heading: labels.invalidHeading,
+			footer,
+			actions: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("a", {
+				className: "polyx-signin__link",
+				href: forgotPasswordPath,
+				children: labels.requestNewLink
+			}), /* @__PURE__ */ jsx("a", {
+				className: "polyx-signin__link",
+				href: signInPath,
+				children: labels.backToSignIn
+			})] }),
+			children: labels.invalidSubheading
+		})
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: rootClass,
+		"data-polyx-reset": step,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "polyx-signin__card",
+			children: [
+				header(labels.heading, labels.subheading),
+				/* @__PURE__ */ jsxs("form", {
+					className: "polyx-signin__form",
+					onSubmit,
+					children: [
+						/* @__PURE__ */ jsxs("label", {
+							className: "polyx-signin__field",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "polyx-signin__label",
+								children: labels.newPasswordLabel
+							}), /* @__PURE__ */ jsx("input", {
+								className: "polyx-signin__input",
+								type: "password",
+								name: "newPassword",
+								autoComplete: "new-password",
+								placeholder: labels.passwordPlaceholder,
+								required: true,
+								minLength,
+								value: newPassword,
+								disabled: submitting,
+								onChange: (event) => setNewPassword(event.target.value)
+							})]
+						}),
+						/* @__PURE__ */ jsxs("label", {
+							className: "polyx-signin__field",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "polyx-signin__label",
+								children: labels.confirmPasswordLabel
+							}), /* @__PURE__ */ jsx("input", {
+								className: "polyx-signin__input",
+								type: "password",
+								name: "confirmPassword",
+								autoComplete: "new-password",
+								placeholder: labels.passwordPlaceholder,
+								required: true,
+								minLength,
+								value: confirmPassword,
+								disabled: submitting,
+								onChange: (event) => setConfirmPassword(event.target.value)
+							})]
+						}),
+						error ? /* @__PURE__ */ jsx("p", {
+							role: "alert",
+							className: "polyx-signin__error",
+							children: error
+						}) : null,
+						/* @__PURE__ */ jsx("button", {
+							type: "submit",
+							className: "polyx-signin__submit",
+							disabled: submitting,
+							children: submitting ? labels.submitting : labels.submit
+						})
+					]
+				}),
+				footer
+			]
+		})
+	});
+}
+//#endregion
 //#region src/components/auth-callback.tsx
 /** Drop on your `/auth/callback` route: completes the sign-in exchange on mount. */
 function AuthCallback({ children = null }) {
@@ -685,4 +1165,4 @@ function AuthCallback({ children = null }) {
 const PACKAGE_NAME = "@poly-x/react";
 const version = "0.0.0";
 //#endregion
-export { AuthCallback, BroadcastAuthChannel, BroadcastChannelSessionChannel, PACKAGE_NAME, PolyXContext, PolyXProvider, PopupCancelledError, Protected, SessionStoragePkceStore, SignIn, WebLocksLock, WindowBrowserBridge, createLoginController, useAuth, useAuthCallback, useSession, useUser, version };
+export { AuthCallback, BroadcastAuthChannel, BroadcastChannelSessionChannel, ForgotPassword, PACKAGE_NAME, PolyXContext, PolyXProvider, PopupCancelledError, Protected, ResetPassword, SessionStoragePkceStore, SignIn, WebLocksLock, WindowBrowserBridge, createLoginController, useAuth, useAuthCallback, useSession, useUser, version };

package/dist/styles.css

@@ -339,6 +339,77 @@
 	opacity: 0.85;
 }
 
+/* --- Recovery confirmation states (ForgotPassword / ResetPassword) ------- */
+
+.polyx-signin__header--center {
+	align-items: center;
+	text-align: center;
+}
+
+.polyx-signin__status-icon {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 3rem;
+	height: 3rem;
+	margin-bottom: 0.25rem;
+	border-radius: 999px;
+}
+
+.polyx-signin__status-icon svg {
+	width: 1.5rem;
+	height: 1.5rem;
+}
+
+.polyx-signin__status-icon--brand {
+	color: var(--polyx-brand);
+	background: color-mix(in srgb, var(--polyx-brand) 12%, transparent);
+}
+
+.polyx-signin__status-icon--danger {
+	color: var(--polyx-danger);
+	background: var(--polyx-danger-bg);
+}
+
+/* The entered email, emphasized inside the confirmation copy. */
+.polyx-signin__email {
+	color: var(--polyx-fg);
+	font-weight: 600;
+	word-break: break-all;
+}
+
+/* Secondary text-link actions under a confirmation screen — quieter than the CTA. */
+.polyx-signin__actions {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 0.75rem;
+	margin-top: 1.5rem;
+}
+
+.polyx-signin__link {
+	padding: 0;
+	font: inherit;
+	font-size: 0.875rem;
+	font-weight: 500;
+	color: var(--polyx-brand);
+	background: none;
+	border: none;
+	cursor: pointer;
+	text-decoration: none;
+}
+
+.polyx-signin__link:hover {
+	color: var(--polyx-brand-hover);
+	text-decoration: underline;
+}
+
+.polyx-signin__link:focus-visible {
+	outline: none;
+	border-radius: 2px;
+	box-shadow: 0 0 0 3px var(--polyx-ring);
+}
+
 /* --- Workspace picker ---------------------------------------------------- */
 
 .polyx-signin__tenants {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@poly-x/react",
-  "version": "0.1.0-alpha.6",
+  "version": "0.1.0-alpha.7",
   "description": "PolyX SDK for React SPAs - provider, hooks, drop-in auth UI",
   "license": "MIT",
   "type": "module",
@@ -27,7 +27,7 @@
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.cts",
   "dependencies": {
-    "@poly-x/core": "0.1.0-alpha.6"
+    "@poly-x/core": "0.1.0-alpha.7"
   },
   "peerDependencies": {
     "react": ">=18",