@better-auth-ui/heroui 1.6.2 → 1.6.4

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

@@ -0,0 +1,24 @@
+import { passkeyPlugin as e } from "../../../lib/auth/passkey-plugin.js";
+import { authMutationKeys as t } from "@better-auth-ui/core";
+import { useAuth as n, useAuthPlugin as r, useSignInPasskey as i } from "@better-auth-ui/react";
+import { Fingerprint as a } from "@gravity-ui/icons";
+import { Button as o, Spinner as s } from "@heroui/react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { useIsMutating as u } from "@tanstack/react-query";
+//#region src/components/auth/passkey/passkey-button.tsx
+function d({ view: d }) {
+	let { authClient: f, localization: p, redirectTo: m, navigate: h } = n(), { localization: g } = r(e), { mutate: _, isPending: v } = i(f, { onSuccess: () => h({ to: m }) }), y = u({ mutationKey: t.signIn.all }) + u({ mutationKey: t.signUp.all }) > 0;
+	return d === "signUp" ? null : /* @__PURE__ */ l(o, {
+		className: "w-full",
+		variant: "tertiary",
+		isDisabled: y,
+		isPending: v,
+		onPress: () => _(),
+		children: [v ? /* @__PURE__ */ c(s, {
+			color: "current",
+			size: "sm"
+		}) : /* @__PURE__ */ c(a, {}), p.auth.continueWith.replace("{{provider}}", g.passkey)]
+	});
+}
+//#endregion
+export { d as PasskeyButton };

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

@@ -0,0 +1,45 @@
+import { passkeyPlugin as e } from "../../../lib/auth/passkey-plugin.js";
+import { useAuth as t, useAuthPlugin as n, useDeletePasskey as r } from "@better-auth-ui/react";
+import { Fingerprint as i, Xmark as a } from "@gravity-ui/icons";
+import { Button as o, Spinner as s } from "@heroui/react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/components/auth/passkey/passkey.tsx
+function u({ passkey: u }) {
+	let { authClient: d, localization: f } = t(), { localization: p } = n(e), { mutate: m, isPending: h } = r(d), g = u.name || p.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 flex-col min-w-0",
+				children: [/* @__PURE__ */ c("span", {
+					className: "text-sm font-medium leading-tight",
+					children: g
+				}), /* @__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",
+				isPending: h,
+				onPress: () => m({ id: u.id }),
+				"aria-label": p.deletePasskey.replace("{{name}}", g),
+				children: [h ? /* @__PURE__ */ c(s, {
+					color: "current",
+					size: "sm"
+				}) : /* @__PURE__ */ c(a, {}), f.settings.delete]
+			})
+		]
+	});
+}
+//#endregion
+export { u as Passkey };

package/dist/components/{settings/security → auth/passkey}/passkeys.d.ts

@@ -3,4 +3,4 @@ export type PasskeysProps = {
     className?: string;
     variant?: CardProps["variant"];
 };
-export declare function Passkeys({ className, variant, ...props }: PasskeysProps & CardProps): import("react/jsx-runtime").JSX.Element;
+export declare function Passkeys({ className, variant, ...props }: PasskeysProps & Omit<CardProps, "children">): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,106 @@
+import { passkeyPlugin as e } from "../../../lib/auth/passkey-plugin.js";
+import { Passkey as t } from "./passkey.js";
+import { useAddPasskey as n, useAuth as r, useAuthPlugin as i, useListPasskeys as a } from "@better-auth-ui/react";
+import { Fingerprint as o } from "@gravity-ui/icons";
+import { AlertDialog as s, Button as c, Card as l, FieldError as u, Form as d, Input as f, Label as p, Skeleton as m, Spinner as h, TextField as g, cn as _ } from "@heroui/react";
+import { useState as v } from "react";
+import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
+//#region src/components/auth/passkey/passkeys.tsx
+function S({ className: m, variant: S, ...w }) {
+	let { authClient: T, localization: E } = r(), { localization: D } = i(e), { data: O, isPending: k } = a(T), { mutate: A, isPending: j } = n(T), [M, N] = v(!1), [P, F] = v(""), I = (e) => {
+		N(e), F("");
+	}, L = async (e) => {
+		e.preventDefault(), A({ name: P.trim() || void 0 }, { onSuccess: () => {
+			N(!1), F("");
+		} });
+	};
+	return /* @__PURE__ */ x("div", { children: [/* @__PURE__ */ b("h2", {
+		className: _("text-sm font-semibold mb-3"),
+		children: D.passkeys
+	}), /* @__PURE__ */ b(l, {
+		className: _(m),
+		variant: S,
+		...w,
+		children: /* @__PURE__ */ x(l.Content, {
+			className: "gap-0",
+			children: [/* @__PURE__ */ x("div", {
+				className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between",
+				children: [/* @__PURE__ */ x("div", { children: [/* @__PURE__ */ b("p", {
+					className: "text-sm font-medium leading-tight",
+					children: D.passkeysDescription
+				}), /* @__PURE__ */ b("p", {
+					className: "text-muted text-xs mt-0.5",
+					children: D.passkeysInstructions
+				})] }), /* @__PURE__ */ x(s, { children: [/* @__PURE__ */ b(c, {
+					className: "shrink-0",
+					size: "sm",
+					isDisabled: k,
+					onPress: () => N(!0),
+					children: D.addPasskey
+				}), /* @__PURE__ */ b(s.Backdrop, {
+					isOpen: M,
+					onOpenChange: I,
+					children: /* @__PURE__ */ b(s.Container, { children: /* @__PURE__ */ b(s.Dialog, { children: /* @__PURE__ */ x(d, {
+						onSubmit: L,
+						children: [
+							/* @__PURE__ */ b(s.CloseTrigger, {}),
+							/* @__PURE__ */ x(s.Header, { children: [/* @__PURE__ */ b(s.Icon, {
+								status: "default",
+								children: /* @__PURE__ */ b(o, {})
+							}), /* @__PURE__ */ b(s.Heading, { children: D.addPasskey })] }),
+							/* @__PURE__ */ x(s.Body, {
+								className: "overflow-visible",
+								children: [/* @__PURE__ */ b("p", {
+									className: "text-muted text-sm",
+									children: D.passkeysInstructions
+								}), /* @__PURE__ */ x(g, {
+									className: "mt-4",
+									name: "passkey-name",
+									isDisabled: j,
+									value: P,
+									onChange: F,
+									children: [
+										/* @__PURE__ */ b(p, { children: D.passkey }),
+										/* @__PURE__ */ b(f, {
+											autoFocus: !0,
+											placeholder: E.settings.optional,
+											variant: "secondary"
+										}),
+										/* @__PURE__ */ b(u, {})
+									]
+								})]
+							}),
+							/* @__PURE__ */ x(s.Footer, { children: [/* @__PURE__ */ b(c, {
+								slot: "close",
+								variant: "tertiary",
+								isDisabled: j,
+								children: E.settings.cancel
+							}), /* @__PURE__ */ x(c, {
+								type: "submit",
+								isPending: j,
+								children: [j && /* @__PURE__ */ b(h, {
+									color: "current",
+									size: "sm"
+								}), D.addPasskey]
+							})] })
+						]
+					}) }) })
+				})] })]
+			}), k ? /* @__PURE__ */ x(y, { children: [/* @__PURE__ */ b("div", { className: "border-b border-dashed -mx-4 md:-mx-6 my-4" }), /* @__PURE__ */ b(C, {})] }) : O?.map((e) => /* @__PURE__ */ x("div", { children: [/* @__PURE__ */ b("div", { className: "border-b border-dashed -mx-4 md:-mx-6 my-4" }), /* @__PURE__ */ b(t, { passkey: e })] }, e.id))]
+		})
+	})] });
+}
+function C() {
+	return /* @__PURE__ */ b("div", {
+		className: "flex items-center justify-between",
+		children: /* @__PURE__ */ x("div", {
+			className: "flex items-center gap-3",
+			children: [/* @__PURE__ */ b(m, { className: "size-10 rounded-xl" }), /* @__PURE__ */ x("div", {
+				className: "flex flex-col gap-1",
+				children: [/* @__PURE__ */ b(m, { className: "h-4 w-24 rounded-lg" }), /* @__PURE__ */ b(m, { className: "h-3 w-20 rounded-lg" })]
+			})]
+		})
+	});
+}
+//#endregion
+export { S as Passkeys };

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

@@ -0,0 +1,13 @@
+import { ButtonProps } from '@heroui/react';
+import { SocialProvider } from 'better-auth/social-providers';
+export type ProviderButtonProps = {
+    provider: SocialProvider;
+    display?: "full" | "name" | "icon";
+} & Omit<ButtonProps, "children" | "onPress" | "isPending" | "isDisabled">;
+/**
+ * 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 declare function ProviderButton({ provider, display, variant, ...props }: ProviderButtonProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,25 @@
+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]
+	});
+}
+//#endregion
+export { u as ProviderButton };

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

@@ -1,19 +1,12 @@
-import { SocialProvider } from 'better-auth/social-providers';
 export type ProviderButtonsProps = {
-    isPending: boolean;
     socialLayout?: SocialLayout;
-    signInSocial: (params: {
-        provider: SocialProvider;
-        callbackURL: string;
-    }) => void;
 };
 export type SocialLayout = "auto" | "horizontal" | "vertical" | "grid";
 /**
- * Render social provider sign-in buttons and handle initiation and pending state.
+ * Render social provider sign-in buttons. Each button owns its own sign-in
+ * mutation and reads shared auth pending state from React Query.
  *
- * @param isPending - Disables all provider buttons when true.
  * @param socialLayout - Preferred layout for the buttons; `"auto"` picks `"horizontal"` when there are four or more providers, otherwise `"vertical"`.
- * @param signInSocial - Callback invoked with the provider and callbackURL when a button is clicked.
  * @returns The JSX element that renders the configured social provider buttons.
  */
-export declare function ProviderButtons({ isPending, socialLayout, signInSocial }: ProviderButtonsProps): import("react/jsx-runtime").JSX.Element;
+export declare function ProviderButtons({ socialLayout }: ProviderButtonsProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,27 +1,19 @@
-import { providerIcons as e, useAuth as t } from "@better-auth-ui/react";
-import { Button as n, cn as r } from "@heroui/react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { useMemo as o } from "react";
-import { getProviderName as s } from "@better-auth-ui/core";
+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 c({ isPending: c, socialLayout: l = "auto", signInSocial: u }) {
-	let { baseURL: d, localization: f, redirectTo: p, socialProviders: m } = t(), h = `${d}${p}`, g = o(() => l === "auto" ? m?.length && m.length >= 4 ? "horizontal" : "vertical" : l, [l, m?.length]);
+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: r("gap-3", g === "grid" && "grid grid-cols-2", g === "vertical" && "flex flex-col", g === "horizontal" && "flex flex-wrap"),
-		children: m?.map((t) => {
-			let o = e[t];
-			return /* @__PURE__ */ a(n, {
-				className: r("w-full", g === "horizontal" && "flex-1"),
-				variant: "tertiary",
-				isPending: c,
-				onPress: () => u({
-					provider: t,
-					callbackURL: h
-				}),
-				children: [/* @__PURE__ */ i(o, {}), g === "vertical" ? f.auth.continueWith.replace("{{provider}}", s(t)) : g === "grid" ? s(t) : null]
-			}, t);
-		})
+		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))
 	});
 }
 //#endregion
-export { c as ProviderButtons };
+export { a as ProviderButtons };

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

@@ -8,4 +8,4 @@ export type ResetPasswordProps = {
  *
  * 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 declare function ResetPassword({ className, variant, ...props }: ResetPasswordProps & CardProps): import("react/jsx-runtime").JSX.Element;
+export declare function ResetPassword({ className, variant, ...props }: ResetPasswordProps & Omit<CardProps, "children">): import("react/jsx-runtime").JSX.Element;

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

@@ -1,141 +1,141 @@
 import { useAuth as e, useResetPassword as t } from "@better-auth-ui/react";
-import { Button as n, Card as r, Description as i, FieldError as a, Form as o, InputGroup as s, Label as c, Link as l, Spinner as u, TextField as d, cn as f, toast as p } from "@heroui/react";
-import { jsx as m, jsxs as h } from "react/jsx-runtime";
+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 { Eye as v, EyeSlash as y } from "@gravity-ui/icons";
+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 { basePaths: C, emailAndPassword: w, localization: T, viewPaths: E, navigate: D } = e(), { mutate: O, isPending: k } = t({
-		onError: (e) => p.danger(e.error?.message || e.message),
-		onSuccess: () => {
-			p.success(T.auth.passwordResetSuccess), D({ to: `${C.auth}/${E.auth.signIn}` });
-		}
-	}), [A, j] = _(!1), [M, N] = _(!1);
+	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") || (p.danger(T.auth.invalidResetPasswordToken), D({ to: `${C.auth}/${E.auth.signIn}` }));
+		new URLSearchParams(window.location.search).get("token") || (h.danger(E.auth.invalidResetPasswordToken), O({ to: `${w.auth}/${D.auth.signIn}` }));
 	}, [
-		C.auth,
-		T.auth.invalidResetPasswordToken,
-		E.auth.signIn,
-		D
+		w.auth,
+		E.auth.invalidResetPasswordToken,
+		D.auth.signIn,
+		O
 	]);
-	function P(e) {
+	function F(e) {
 		e.preventDefault();
 		let t = new URLSearchParams(window.location.search).get("token");
 		if (!t) {
-			p.danger(T.auth.invalidResetPasswordToken), D({ to: `${C.auth}/${E.auth.signIn}` });
+			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 (w?.confirmPassword && r !== i) {
-			p.danger(T.auth.passwordsDoNotMatch);
+		if (T?.confirmPassword && r !== i) {
+			h.danger(E.auth.passwordsDoNotMatch);
 			return;
 		}
-		O({
+		k({
 			token: t,
 			newPassword: r
 		});
 	}
-	return /* @__PURE__ */ h(r, {
-		className: f("w-full max-w-sm p-4 md:p-6", b),
+	return /* @__PURE__ */ y(a, {
+		className: m("w-full max-w-sm gap-4 md:p-6", b),
 		variant: x,
 		...S,
 		children: [
-			/* @__PURE__ */ m(r.Header, { children: /* @__PURE__ */ m(r.Title, {
+			/* @__PURE__ */ v(a.Header, { children: /* @__PURE__ */ v(a.Title, {
 				className: "text-xl font-semibold mb-1",
-				children: T.auth.resetPassword
+				children: E.auth.resetPassword
 			}) }),
-			/* @__PURE__ */ m(r.Content, { children: /* @__PURE__ */ h(o, {
-				onSubmit: P,
-				className: "flex flex-col gap-4",
-				children: [
-					/* @__PURE__ */ h(d, {
-						minLength: w?.minPasswordLength,
-						maxLength: w?.maxPasswordLength,
-						name: "password",
-						autoComplete: "new-password",
-						isDisabled: k,
-						children: [
-							/* @__PURE__ */ m(c, { children: T.auth.password }),
-							/* @__PURE__ */ h(s, {
-								variant: x === "transparent" ? "primary" : "secondary",
-								children: [/* @__PURE__ */ m(s.Input, {
-									name: "password",
-									placeholder: T.auth.newPasswordPlaceholder,
-									type: A ? "text" : "password",
-									required: !0
-								}), /* @__PURE__ */ m(s.Suffix, {
-									className: "px-0",
-									children: /* @__PURE__ */ m(n, {
-										isIconOnly: !0,
-										"aria-label": A ? T.auth.hidePassword : T.auth.showPassword,
-										size: "sm",
-										variant: "ghost",
-										onPress: () => j(!A),
-										isDisabled: k,
-										children: m(A ? y : v, {})
-									})
-								})]
-							}),
-							/* @__PURE__ */ m(a, {})
-						]
-					}),
-					w?.confirmPassword && /* @__PURE__ */ h(d, {
-						minLength: w?.minPasswordLength,
-						maxLength: w?.maxPasswordLength,
-						name: "confirmPassword",
-						autoComplete: "new-password",
-						isDisabled: k,
-						children: [
-							/* @__PURE__ */ m(c, { children: T.auth.confirmPassword }),
-							/* @__PURE__ */ h(s, {
-								variant: x === "transparent" ? "primary" : "secondary",
-								children: [/* @__PURE__ */ m(s.Input, {
-									placeholder: T.auth.confirmPasswordPlaceholder,
-									type: M ? "text" : "password",
-									required: !0,
-									name: "confirmPassword"
-								}), /* @__PURE__ */ m(s.Suffix, {
-									className: "px-0",
-									children: /* @__PURE__ */ m(n, {
-										isIconOnly: !0,
-										"aria-label": M ? T.auth.hidePassword : T.auth.showPassword,
-										size: "sm",
-										variant: "ghost",
-										onPress: () => N(!M),
-										isDisabled: k,
-										children: m(M ? y : v, {})
-									})
-								})]
-							}),
-							/* @__PURE__ */ m(a, {})
-						]
-					}),
-					/* @__PURE__ */ m("div", {
-						className: "flex flex-col gap-3",
-						children: /* @__PURE__ */ h(n, {
-							type: "submit",
-							className: "w-full",
-							isPending: k,
-							children: [k && /* @__PURE__ */ m(u, {
-								color: "current",
-								size: "sm"
-							}), T.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__ */ m(r.Footer, {
-				className: "flex-col",
-				children: /* @__PURE__ */ h(i, {
+					]
+				})
+			}),
+			/* @__PURE__ */ v(a.Footer, {
+				className: "flex-col gap-3",
+				children: /* @__PURE__ */ y(o, {
 					className: "text-sm",
 					children: [
-						T.auth.rememberYourPassword,
+						E.auth.rememberYourPassword,
 						" ",
-						/* @__PURE__ */ m(l, {
-							href: `${C.auth}/${E.auth.signIn}`,
-							className: "text-accent decoration-accent no-underline hover:underline",
-							children: T.auth.signIn
+						/* @__PURE__ */ v(d, {
+							href: `${w.auth}/${D.auth.signIn}`,
+							className: "text-accent no-underline hover:underline decoration-accent-hover",
+							children: E.auth.signIn
 						})
 					]
 				})

package/dist/components/{settings → auth/settings}/account/account-settings.d.ts

@@ -5,9 +5,12 @@ export type AccountSettingsProps = {
     variant?: CardProps["variant"];
 };
 /**
- * Renders the account settings layout including user profile, change email, appearance, and accounts management.
+ * Renders the account settings layout.
  *
- * UserProfile, ChangeEmail, and Appearance are always rendered; Accounts is rendered when `multiSession` is enabled.
+ * `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.

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

@@ -0,0 +1,20 @@
+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()}`)))
+		]
+	});
+}
+//#endregion
+export { o as AccountSettings };