@better-auth-ui/heroui 1.6.8 → 1.6.9

package/dist/components/auth/passkey/passkey.js

@@ -1,48 +1,17 @@
-import { passkeyPlugin as e } from "../../../lib/auth/passkey-plugin.js";
-import { DeletePasskeyDialog as t } from "./delete-passkey-dialog.js";
-import { useAuth as n, useAuthPlugin as r } from "@better-auth-ui/react";
-import { Fingerprint as i, Xmark as a } from "@gravity-ui/icons";
-import { Button as o } from "@heroui/react";
-import { useState as s } from "react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
-//#region src/components/auth/passkey/passkey.tsx
-function u({ passkey: u }) {
-	let { localization: d } = n(), { localization: f } = r(e), [p, m] = s(!1), h = u.name || f.passkey;
-	return /* @__PURE__ */ l("div", {
-		className: "flex items-center gap-3",
-		children: [
-			/* @__PURE__ */ c("div", {
-				className: "flex size-10 shrink-0 items-center justify-center rounded-xl bg-surface-secondary",
-				children: /* @__PURE__ */ c(i, { className: "size-4.5" })
-			}),
-			/* @__PURE__ */ l("div", {
-				className: "flex min-w-0 flex-col",
-				children: [/* @__PURE__ */ c("span", {
-					className: "truncate text-sm font-medium leading-tight",
-					children: h
-				}), /* @__PURE__ */ c("span", {
-					className: "text-xs text-muted",
-					children: new Date(u.createdAt).toLocaleString(void 0, {
-						dateStyle: "medium",
-						timeStyle: "short"
-					})
-				})]
-			}),
-			/* @__PURE__ */ l(o, {
-				className: "ml-auto shrink-0",
-				variant: "outline",
-				size: "sm",
-				onPress: () => m(!0),
-				"aria-label": f.deletePasskey.replace("{{name}}", h),
-				children: [/* @__PURE__ */ c(a, {}), d.settings.delete]
-			}),
-			/* @__PURE__ */ c(t, {
-				isOpen: p,
-				onOpenChange: m,
-				passkey: u
-			})
-		]
-	});
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAuth, useAuthPlugin } from "@better-auth-ui/react";
+import { Fingerprint, Xmark } from "@gravity-ui/icons";
+import { Button } from "@heroui/react";
+import { useState } from "react";
+import { passkeyPlugin } from "../../../lib/auth/passkey-plugin";
+import { DeletePasskeyDialog } from "./delete-passkey-dialog";
+export function Passkey({ passkey }) {
+    const { localization } = useAuth();
+    const { localization: passkeyLocalization } = useAuthPlugin(passkeyPlugin);
+    const [deleteOpen, setDeleteOpen] = useState(false);
+    const passkeyName = passkey.name || passkeyLocalization.passkey;
+    return (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex size-10 shrink-0 items-center justify-center rounded-xl bg-surface-secondary", children: _jsx(Fingerprint, { className: "size-4.5" }) }), _jsxs("div", { className: "flex min-w-0 flex-col", children: [_jsx("span", { className: "truncate text-sm font-medium leading-tight", children: passkeyName }), _jsx("span", { className: "text-xs text-muted", children: new Date(passkey.createdAt).toLocaleString(undefined, {
+                            dateStyle: "medium",
+                            timeStyle: "short"
+                        }) })] }), _jsxs(Button, { className: "ml-auto shrink-0", variant: "outline", size: "sm", onPress: () => setDeleteOpen(true), "aria-label": passkeyLocalization.deletePasskey.replace("{{name}}", passkeyName), children: [_jsx(Xmark, {}), localization.settings.delete] }), _jsx(DeletePasskeyDialog, { isOpen: deleteOpen, onOpenChange: setDeleteOpen, passkey: passkey })] }));
 }
-//#endregion
-export { u as Passkey };

package/dist/components/auth/passkey/passkeys-empty.js

@@ -1,35 +1,9 @@
-import { passkeyPlugin as e } from "../../../lib/auth/passkey-plugin.js";
-import { useAuthPlugin as t } from "@better-auth-ui/react";
-import { Fingerprint as n } from "@gravity-ui/icons";
-import { Button as r } from "@heroui/react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-//#region src/components/auth/passkey/passkeys-empty.tsx
-function o({ onAddPress: o }) {
-	let { localization: s } = t(e);
-	return /* @__PURE__ */ a("div", {
-		className: "flex flex-col items-center justify-center gap-4",
-		children: [
-			/* @__PURE__ */ i("div", {
-				className: "flex size-10 items-center justify-center rounded-xl bg-surface-secondary",
-				children: /* @__PURE__ */ i(n, { className: "size-4.5" })
-			}),
-			/* @__PURE__ */ a("div", {
-				className: "flex flex-col items-center justify-center gap-1 text-center",
-				children: [/* @__PURE__ */ i("p", {
-					className: "text-sm font-semibold",
-					children: s.noPasskeys
-				}), /* @__PURE__ */ i("p", {
-					className: "text-muted text-xs",
-					children: s.passkeysDescription
-				})]
-			}),
-			/* @__PURE__ */ i(r, {
-				size: "sm",
-				onPress: o,
-				children: s.addPasskey
-			})
-		]
-	});
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAuthPlugin } from "@better-auth-ui/react";
+import { Fingerprint } from "@gravity-ui/icons";
+import { Button } from "@heroui/react";
+import { passkeyPlugin } from "../../../lib/auth/passkey-plugin";
+export function PasskeysEmpty({ onAddPress }) {
+    const { localization: passkeyLocalization } = useAuthPlugin(passkeyPlugin);
+    return (_jsxs("div", { className: "flex flex-col items-center justify-center gap-4", children: [_jsx("div", { className: "flex size-10 items-center justify-center rounded-xl bg-surface-secondary", children: _jsx(Fingerprint, { className: "size-4.5" }) }), _jsxs("div", { className: "flex flex-col items-center justify-center gap-1 text-center", children: [_jsx("p", { className: "text-sm font-semibold", children: passkeyLocalization.noPasskeys }), _jsx("p", { className: "text-muted text-xs", children: passkeyLocalization.passkeysDescription })] }), _jsx(Button, { size: "sm", onPress: onAddPress, children: passkeyLocalization.addPasskey })] }));
 }
-//#endregion
-export { o as PasskeysEmpty };

package/dist/components/auth/passkey/passkeys.d.ts

@@ -1,4 +1,4 @@
-import { CardProps } from '@heroui/react';
+import { type CardProps } from "@heroui/react";
 export type PasskeysProps = {
     className?: string;
     variant?: CardProps["variant"];

package/dist/components/auth/passkey/passkeys.js

@@ -1,42 +1,16 @@
-import { passkeyPlugin as e } from "../../../lib/auth/passkey-plugin.js";
-import { AddPasskeyDialog as t } from "./add-passkey-dialog.js";
-import { Passkey as n } from "./passkey.js";
-import { PasskeySkeleton as r } from "./passkey-skeleton.js";
-import { PasskeysEmpty as i } from "./passkeys-empty.js";
-import { useAuth as a, useAuthPlugin as o, useListPasskeys as s } from "@better-auth-ui/react";
-import { Button as c, Card as l, cn as u } from "@heroui/react";
-import { useState as d } from "react";
-import { jsx as f, jsxs as p } from "react/jsx-runtime";
-//#region src/components/auth/passkey/passkeys.tsx
-function m({ className: m, variant: h, ...g }) {
-	let { authClient: _ } = a(), { localization: v } = o(e), { data: y, isPending: b } = s(_), [x, S] = d(!1);
-	return /* @__PURE__ */ p("div", {
-		className: u("flex flex-col gap-3", m),
-		children: [
-			/* @__PURE__ */ p("div", {
-				className: "flex items-end justify-between gap-3",
-				children: [/* @__PURE__ */ f("h2", {
-					className: "text-sm font-semibold truncate",
-					children: v.passkeys
-				}), /* @__PURE__ */ f(c, {
-					className: "shrink-0",
-					size: "sm",
-					isDisabled: b,
-					onPress: () => S(!0),
-					children: v.addPasskey
-				})]
-			}),
-			/* @__PURE__ */ f(l, {
-				variant: h,
-				...g,
-				children: /* @__PURE__ */ f(l.Content, { children: b ? /* @__PURE__ */ f(r, {}) : y?.length ? y.map((e, t) => /* @__PURE__ */ p("div", { children: [t > 0 && /* @__PURE__ */ f("div", { className: "border-b border-dashed -mx-4 my-4" }), /* @__PURE__ */ f(n, { passkey: e })] }, e.id)) : /* @__PURE__ */ f(i, { onAddPress: () => S(!0) }) })
-			}),
-			/* @__PURE__ */ f(t, {
-				isOpen: x,
-				onOpenChange: S
-			})
-		]
-	});
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAuth, useAuthPlugin, useListPasskeys } from "@better-auth-ui/react";
+import { Button, Card, cn } from "@heroui/react";
+import { useState } from "react";
+import { passkeyPlugin } from "../../../lib/auth/passkey-plugin";
+import { AddPasskeyDialog } from "./add-passkey-dialog";
+import { Passkey } from "./passkey";
+import { PasskeySkeleton } from "./passkey-skeleton";
+import { PasskeysEmpty } from "./passkeys-empty";
+export function Passkeys({ className, variant, ...props }) {
+    const { authClient } = useAuth();
+    const { localization: passkeyLocalization } = useAuthPlugin(passkeyPlugin);
+    const { data: passkeys, isPending } = useListPasskeys(authClient);
+    const [addOpen, setAddOpen] = useState(false);
+    return (_jsxs("div", { className: cn("flex flex-col gap-3", className), children: [_jsxs("div", { className: "flex items-end justify-between gap-3", children: [_jsx("h2", { className: "text-sm font-semibold truncate", children: passkeyLocalization.passkeys }), _jsx(Button, { className: "shrink-0", size: "sm", isDisabled: isPending, onPress: () => setAddOpen(true), children: passkeyLocalization.addPasskey })] }), _jsx(Card, { variant: variant, ...props, children: _jsx(Card.Content, { children: isPending ? (_jsx(PasskeySkeleton, {})) : !passkeys?.length ? (_jsx(PasskeysEmpty, { onAddPress: () => setAddOpen(true) })) : (passkeys.map((passkey, index) => (_jsxs("div", { children: [index > 0 && (_jsx("div", { className: "border-b border-dashed -mx-4 my-4" })), _jsx(Passkey, { passkey: passkey })] }, passkey.id)))) }) }), _jsx(AddPasskeyDialog, { isOpen: addOpen, onOpenChange: setAddOpen })] }));
 }
-//#endregion
-export { m as Passkeys };

package/dist/components/auth/provider-button.d.ts

@@ -1,5 +1,5 @@
-import { ButtonProps } from '@heroui/react';
-import { SocialProvider } from 'better-auth/social-providers';
+import { type ButtonProps } from "@heroui/react";
+import type { SocialProvider } from "better-auth/social-providers";
 export type ProviderButtonProps = {
     provider: SocialProvider;
     display?: "full" | "name" | "icon";

package/dist/components/auth/provider-button.js

@@ -1,25 +1,29 @@
-import { authMutationKeys as e, getProviderName as t } from "@better-auth-ui/core";
-import { providerIcons as n, useAuth as r, useSignInSocial as i } from "@better-auth-ui/react";
-import { Button as a, Spinner as o } from "@heroui/react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
-import { useIsMutating as l } from "@tanstack/react-query";
-//#region src/components/auth/provider-button.tsx
-function u({ provider: u, display: d = "full", variant: f = "tertiary", ...p }) {
-	let { authClient: m, baseURL: h, localization: g, redirectTo: _ } = r(), v = `${h}${_}`, { mutate: y, isPending: b } = i(m), x = n[u];
-	return /* @__PURE__ */ c(a, {
-		variant: f,
-		isPending: l({ mutationKey: e.signIn.all }) + l({ mutationKey: e.signUp.all }) > 0,
-		onPress: () => y({
-			provider: u,
-			callbackURL: v
-		}),
-		...p,
-		"aria-label": t(u),
-		children: [b ? /* @__PURE__ */ s(o, {
-			color: "current",
-			size: "sm"
-		}) : /* @__PURE__ */ s(x, {}), d === "full" ? g.auth.continueWith.replace("{{provider}}", t(u)) : d === "name" ? t(u) : null]
-	});
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { authMutationKeys, getProviderName } from "@better-auth-ui/core";
+import { providerIcons, useAuth, useSignInSocial } from "@better-auth-ui/react";
+import { Button, Spinner } from "@heroui/react";
+import { useIsMutating } from "@tanstack/react-query";
+/**
+ * Social provider sign-in button.
+ *
+ * @param provider - Provider to sign in with.
+ * @param display - `"full"` (e.g. "Continue with Google"), `"name"` (just the provider name), or `"icon"` (icon only).
+ */
+export function ProviderButton({ provider, display = "full", variant = "tertiary", ...props }) {
+    const { authClient, baseURL, localization, redirectTo } = useAuth();
+    const callbackURL = `${baseURL}${redirectTo}`;
+    const { mutate: signInSocial, isPending: signInSocialPending } = useSignInSocial(authClient);
+    const ProviderIcon = providerIcons[provider];
+    const signInMutating = useIsMutating({
+        mutationKey: authMutationKeys.signIn.all
+    });
+    const signUpMutating = useIsMutating({
+        mutationKey: authMutationKeys.signUp.all
+    });
+    const isPending = signInMutating + signUpMutating > 0;
+    return (_jsxs(Button, { variant: variant, isPending: isPending, onPress: () => signInSocial({ provider, callbackURL }), ...props, "aria-label": getProviderName(provider), children: [signInSocialPending ? (_jsx(Spinner, { color: "current", size: "sm" })) : (_jsx(ProviderIcon, {})), display === "full"
+                ? localization.auth.continueWith.replace("{{provider}}", getProviderName(provider))
+                : display === "name"
+                    ? getProviderName(provider)
+                    : null] }));
 }
-//#endregion
-export { u as ProviderButton };

package/dist/components/auth/provider-buttons.js

@@ -1,19 +1,29 @@
-import { ProviderButton as e } from "./provider-button.js";
-import { useAuth as t } from "@better-auth-ui/react";
-import { cn as n } from "@heroui/react";
-import { useMemo as r } from "react";
-import { jsx as i } from "react/jsx-runtime";
-//#region src/components/auth/provider-buttons.tsx
-function a({ socialLayout: a = "auto" }) {
-	let { socialProviders: o } = t(), s = r(() => a === "auto" ? o?.length && o.length >= 4 ? "horizontal" : "vertical" : a, [a, o?.length]);
-	return /* @__PURE__ */ i("div", {
-		className: n("gap-3", s === "grid" && "grid grid-cols-2", s === "vertical" && "flex flex-col", s === "horizontal" && "flex flex-wrap"),
-		children: o?.map((t) => /* @__PURE__ */ i(e, {
-			provider: t,
-			display: s === "vertical" ? "full" : s === "grid" ? "name" : "icon",
-			className: n("w-full", s === "horizontal" && "flex-1")
-		}, t))
-	});
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useAuth } from "@better-auth-ui/react";
+import { cn } from "@heroui/react";
+import { useMemo } from "react";
+import { ProviderButton } from "./provider-button";
+/**
+ * Render social provider sign-in buttons. Each button owns its own sign-in
+ * mutation and reads shared auth pending state from React Query.
+ *
+ * @param socialLayout - Preferred layout for the buttons; `"auto"` picks `"horizontal"` when there are four or more providers, otherwise `"vertical"`.
+ * @returns The JSX element that renders the configured social provider buttons.
+ */
+export function ProviderButtons({ socialLayout = "auto" }) {
+    const { socialProviders } = useAuth();
+    const resolvedSocialLayout = useMemo(() => {
+        if (socialLayout === "auto") {
+            if (socialProviders?.length && socialProviders.length >= 4) {
+                return "horizontal";
+            }
+            return "vertical";
+        }
+        return socialLayout;
+    }, [socialLayout, socialProviders?.length]);
+    return (_jsx("div", { className: cn("gap-3", resolvedSocialLayout === "grid" && "grid grid-cols-2", resolvedSocialLayout === "vertical" && "flex flex-col", resolvedSocialLayout === "horizontal" && "flex flex-wrap"), children: socialProviders?.map((provider) => (_jsx(ProviderButton, { provider: provider, display: resolvedSocialLayout === "vertical"
+                ? "full"
+                : resolvedSocialLayout === "grid"
+                    ? "name"
+                    : "icon", className: cn("w-full", resolvedSocialLayout === "horizontal" && "flex-1") }, provider))) }));
 }
-//#endregion
-export { a as ProviderButtons };

package/dist/components/auth/reset-password.d.ts

@@ -1,4 +1,4 @@
-import { CardProps } from '@heroui/react';
+import { type CardProps } from "@heroui/react";
 export type ResetPasswordProps = {
     className?: string;
     variant?: CardProps["variant"];

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

@@ -1,147 +1,57 @@
-import { useAuth as e, useResetPassword as t } from "@better-auth-ui/react";
-import { Eye as n, EyeSlash as r } from "@gravity-ui/icons";
-import { Button as i, Card as a, Description as o, FieldError as s, Form as c, InputGroup as l, Label as u, Link as d, Spinner as f, TextField as p, cn as m, toast as h } from "@heroui/react";
-import { useEffect as g, useState as _ } from "react";
-import { jsx as v, jsxs as y } from "react/jsx-runtime";
-//#region src/components/auth/reset-password.tsx
-function b({ className: b, variant: x, ...S }) {
-	let { authClient: C, basePaths: w, emailAndPassword: T, localization: E, viewPaths: D, navigate: O } = e(), { mutate: k, isPending: A } = t(C, { onSuccess: () => {
-		h.success(E.auth.passwordResetSuccess), O({ to: `${w.auth}/${D.auth.signIn}` });
-	} }), [j, M] = _(!1), [N, P] = _(!1);
-	g(() => {
-		new URLSearchParams(window.location.search).get("token") || (h.danger(E.auth.invalidResetPasswordToken), O({ to: `${w.auth}/${D.auth.signIn}` }));
-	}, [
-		w.auth,
-		E.auth.invalidResetPasswordToken,
-		D.auth.signIn,
-		O
-	]);
-	function F(e) {
-		e.preventDefault();
-		let t = new URLSearchParams(window.location.search).get("token");
-		if (!t) {
-			h.danger(E.auth.invalidResetPasswordToken), O({ to: `${w.auth}/${D.auth.signIn}` });
-			return;
-		}
-		let n = new FormData(e.currentTarget), r = n.get("password"), i = n.get("confirmPassword");
-		if (T?.confirmPassword && r !== i) {
-			h.danger(E.auth.passwordsDoNotMatch);
-			return;
-		}
-		k({
-			token: t,
-			newPassword: r
-		});
-	}
-	return /* @__PURE__ */ y(a, {
-		className: m("w-full max-w-sm gap-4 md:p-6", b),
-		variant: x,
-		...S,
-		children: [
-			/* @__PURE__ */ v(a.Header, { children: /* @__PURE__ */ v(a.Title, {
-				className: "text-xl font-semibold mb-1",
-				children: E.auth.resetPassword
-			}) }),
-			/* @__PURE__ */ v(a.Content, {
-				className: "gap-4",
-				children: /* @__PURE__ */ y(c, {
-					onSubmit: F,
-					className: "flex flex-col gap-4",
-					children: [
-						/* @__PURE__ */ y(p, {
-							minLength: T?.minPasswordLength,
-							maxLength: T?.maxPasswordLength,
-							name: "password",
-							autoComplete: "new-password",
-							isDisabled: A,
-							children: [
-								/* @__PURE__ */ v(u, { children: E.auth.password }),
-								/* @__PURE__ */ y(l, {
-									variant: x === "transparent" ? "primary" : "secondary",
-									children: [/* @__PURE__ */ v(l.Input, {
-										name: "password",
-										placeholder: E.auth.newPasswordPlaceholder,
-										type: j ? "text" : "password",
-										required: !0
-									}), /* @__PURE__ */ v(l.Suffix, {
-										className: "px-0",
-										children: /* @__PURE__ */ v(i, {
-											isIconOnly: !0,
-											"aria-label": j ? E.auth.hidePassword : E.auth.showPassword,
-											size: "sm",
-											variant: "ghost",
-											onPress: () => M(!j),
-											isDisabled: A,
-											children: v(j ? r : n, {})
-										})
-									})]
-								}),
-								/* @__PURE__ */ v(s, {})
-							]
-						}),
-						T?.confirmPassword && /* @__PURE__ */ y(p, {
-							minLength: T?.minPasswordLength,
-							maxLength: T?.maxPasswordLength,
-							name: "confirmPassword",
-							autoComplete: "new-password",
-							isDisabled: A,
-							children: [
-								/* @__PURE__ */ v(u, { children: E.auth.confirmPassword }),
-								/* @__PURE__ */ y(l, {
-									variant: x === "transparent" ? "primary" : "secondary",
-									children: [/* @__PURE__ */ v(l.Input, {
-										placeholder: E.auth.confirmPasswordPlaceholder,
-										type: N ? "text" : "password",
-										required: !0,
-										name: "confirmPassword"
-									}), /* @__PURE__ */ v(l.Suffix, {
-										className: "px-0",
-										children: /* @__PURE__ */ v(i, {
-											isIconOnly: !0,
-											"aria-label": N ? E.auth.hidePassword : E.auth.showPassword,
-											size: "sm",
-											variant: "ghost",
-											onPress: () => P(!N),
-											isDisabled: A,
-											children: v(N ? r : n, {})
-										})
-									})]
-								}),
-								/* @__PURE__ */ v(s, {})
-							]
-						}),
-						/* @__PURE__ */ v("div", {
-							className: "flex flex-col gap-3",
-							children: /* @__PURE__ */ y(i, {
-								type: "submit",
-								className: "w-full",
-								isPending: A,
-								children: [A && /* @__PURE__ */ v(f, {
-									color: "current",
-									size: "sm"
-								}), E.auth.resetPassword]
-							})
-						})
-					]
-				})
-			}),
-			/* @__PURE__ */ v(a.Footer, {
-				className: "flex-col gap-3",
-				children: /* @__PURE__ */ y(o, {
-					className: "text-sm",
-					children: [
-						E.auth.rememberYourPassword,
-						" ",
-						/* @__PURE__ */ v(d, {
-							href: `${w.auth}/${D.auth.signIn}`,
-							className: "text-accent no-underline hover:underline decoration-accent-hover",
-							children: E.auth.signIn
-						})
-					]
-				})
-			})
-		]
-	});
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAuth, useResetPassword } from "@better-auth-ui/react";
+import { Eye, EyeSlash } from "@gravity-ui/icons";
+import { Button, Card, cn, Description, FieldError, Form, InputGroup, Label, Link, Spinner, TextField, toast } from "@heroui/react";
+import { useEffect, useState } from "react";
+/**
+ * Renders a reset password form that verifies a "token" URL parameter on mount and redirects to sign-in if absent.
+ *
+ * Renders password (and optional confirm-password) inputs with visibility toggles, applies min/max length constraints from the auth configuration, shows field errors, and submits the new password to the auth client.
+ */
+export function ResetPassword({ className, variant, ...props }) {
+    const { authClient, basePaths, emailAndPassword, localization, viewPaths, navigate } = useAuth();
+    const { mutate: resetPassword, isPending } = useResetPassword(authClient, {
+        onSuccess: () => {
+            toast.success(localization.auth.passwordResetSuccess);
+            navigate({ to: `${basePaths.auth}/${viewPaths.auth.signIn}` });
+        }
+    });
+    const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+    const [isConfirmPasswordVisible, setIsConfirmPasswordVisible] = useState(false);
+    useEffect(() => {
+        const searchParams = new URLSearchParams(window.location.search);
+        const token = searchParams.get("token");
+        if (!token) {
+            toast.danger(localization.auth.invalidResetPasswordToken);
+            navigate({ to: `${basePaths.auth}/${viewPaths.auth.signIn}` });
+        }
+    }, [
+        basePaths.auth,
+        localization.auth.invalidResetPasswordToken,
+        viewPaths.auth.signIn,
+        navigate
+    ]);
+    function handleSubmit(e) {
+        e.preventDefault();
+        const searchParams = new URLSearchParams(window.location.search);
+        const token = searchParams.get("token");
+        if (!token) {
+            toast.danger(localization.auth.invalidResetPasswordToken);
+            navigate({ to: `${basePaths.auth}/${viewPaths.auth.signIn}` });
+            return;
+        }
+        const formData = new FormData(e.currentTarget);
+        const password = formData.get("password");
+        const confirmPassword = formData.get("confirmPassword");
+        if (emailAndPassword?.confirmPassword && password !== confirmPassword) {
+            toast.danger(localization.auth.passwordsDoNotMatch);
+            return;
+        }
+        resetPassword({ token, newPassword: password });
+    }
+    return (_jsxs(Card, { className: cn("w-full max-w-sm gap-4 md:p-6", className), variant: variant, ...props, children: [_jsx(Card.Header, { children: _jsx(Card.Title, { className: "text-xl font-semibold mb-1", children: localization.auth.resetPassword }) }), _jsx(Card.Content, { className: "gap-4", children: _jsxs(Form, { onSubmit: handleSubmit, className: "flex flex-col gap-4", children: [_jsxs(TextField, { minLength: emailAndPassword?.minPasswordLength, maxLength: emailAndPassword?.maxPasswordLength, name: "password", autoComplete: "new-password", isDisabled: isPending, children: [_jsx(Label, { children: localization.auth.password }), _jsxs(InputGroup, { variant: variant === "transparent" ? "primary" : "secondary", children: [_jsx(InputGroup.Input, { name: "password", placeholder: localization.auth.newPasswordPlaceholder, type: isPasswordVisible ? "text" : "password", required: true }), _jsx(InputGroup.Suffix, { className: "px-0", children: _jsx(Button, { isIconOnly: true, "aria-label": isPasswordVisible
+                                                    ? localization.auth.hidePassword
+                                                    : localization.auth.showPassword, size: "sm", variant: "ghost", onPress: () => setIsPasswordVisible(!isPasswordVisible), isDisabled: isPending, children: isPasswordVisible ? _jsx(EyeSlash, {}) : _jsx(Eye, {}) }) })] }), _jsx(FieldError, {})] }), emailAndPassword?.confirmPassword && (_jsxs(TextField, { minLength: emailAndPassword?.minPasswordLength, maxLength: emailAndPassword?.maxPasswordLength, name: "confirmPassword", autoComplete: "new-password", isDisabled: isPending, children: [_jsx(Label, { children: localization.auth.confirmPassword }), _jsxs(InputGroup, { variant: variant === "transparent" ? "primary" : "secondary", children: [_jsx(InputGroup.Input, { placeholder: localization.auth.confirmPasswordPlaceholder, type: isConfirmPasswordVisible ? "text" : "password", required: true, name: "confirmPassword" }), _jsx(InputGroup.Suffix, { className: "px-0", children: _jsx(Button, { isIconOnly: true, "aria-label": isConfirmPasswordVisible
+                                                    ? localization.auth.hidePassword
+                                                    : localization.auth.showPassword, size: "sm", variant: "ghost", onPress: () => setIsConfirmPasswordVisible(!isConfirmPasswordVisible), isDisabled: isPending, children: isConfirmPasswordVisible ? _jsx(EyeSlash, {}) : _jsx(Eye, {}) }) })] }), _jsx(FieldError, {})] })), _jsx("div", { className: "flex flex-col gap-3", children: _jsxs(Button, { type: "submit", className: "w-full", isPending: isPending, children: [isPending && _jsx(Spinner, { color: "current", size: "sm" }), localization.auth.resetPassword] }) })] }) }), _jsx(Card.Footer, { className: "flex-col gap-3", children: _jsxs(Description, { className: "text-sm", children: [localization.auth.rememberYourPassword, " ", _jsx(Link, { href: `${basePaths.auth}/${viewPaths.auth.signIn}`, className: "text-accent no-underline hover:underline decoration-accent-hover", children: localization.auth.signIn })] }) })] }));
 }
-//#endregion
-export { b as ResetPassword };

package/dist/components/auth/settings/account/account-settings.d.ts

@@ -1,5 +1,5 @@
-import { CardProps } from '@heroui/react';
-import { ComponentProps } from 'react';
+import { type CardProps } from "@heroui/react";
+import type { ComponentProps } from "react";
 export type AccountSettingsProps = {
     className?: string;
     variant?: CardProps["variant"];

package/dist/components/auth/settings/account/account-settings.js

@@ -1,20 +1,22 @@
-import { ChangeEmail as e } from "./change-email.js";
-import { UserProfile as t } from "./user-profile.js";
-import { useAuth as n } from "@better-auth-ui/react";
-import { cn as r } from "@heroui/react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-//#region src/components/auth/settings/account/account-settings.tsx
-function o({ className: o, variant: s, ...c }) {
-	let { emailAndPassword: l, plugins: u } = n(), d = u.some((e) => e.id === "magicLink");
-	return /* @__PURE__ */ a("div", {
-		className: r("flex w-full flex-col gap-4 md:gap-6", o),
-		...c,
-		children: [
-			/* @__PURE__ */ i(t, { variant: s }),
-			(l?.enabled || d) && /* @__PURE__ */ i(e, { variant: s }),
-			u.flatMap((e) => e.accountCards?.map((t, n) => /* @__PURE__ */ i(t, { variant: s }, `${e.id}-${n.toString()}`)))
-		]
-	});
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAuth } from "@better-auth-ui/react";
+import { cn } from "@heroui/react";
+import { ChangeEmail } from "./change-email";
+import { UserProfile } from "./user-profile";
+/**
+ * Renders the account settings layout.
+ *
+ * `UserProfile` always renders. `ChangeEmail` renders when password auth is
+ * enabled or the `magicLink` plugin is registered. Plugin-contributed account
+ * cards (e.g. `Appearance` from the theme plugin, multi-session accounts) are
+ * rendered via the plugins array.
+ *
+ * @param className - Optional additional CSS class names for the outer container.
+ * @param variant - Card variant forwarded to each account settings card.
+ * @returns The account settings container as a JSX element.
+ */
+export function AccountSettings({ className, variant, ...props }) {
+    const { emailAndPassword, plugins } = useAuth();
+    const hasMagicLink = plugins.some((plugin) => plugin.id === "magicLink");
+    return (_jsxs("div", { className: cn("flex w-full flex-col gap-4 md:gap-6", className), ...props, children: [_jsx(UserProfile, { variant: variant }), (emailAndPassword?.enabled || hasMagicLink) && (_jsx(ChangeEmail, { variant: variant })), plugins.flatMap((plugin) => plugin.accountCards?.map((Card, index) => (_jsx(Card, { variant: variant }, `${plugin.id}-${index.toString()}`))))] }));
 }
-//#endregion
-export { o as AccountSettings };