@better-auth-ui/heroui 1.6.3 → 1.6.4

package/dist/components/{settings → auth/settings}/account/change-email.js

@@ -1,50 +1,50 @@
 import { useAuth as e, useChangeEmail as t, useSession as n } from "@better-auth-ui/react";
 import { Button as r, Card as i, FieldError as a, Fieldset as o, Form as s, Input as c, Label as l, Skeleton as u, Spinner as d, TextField as f, cn as p, toast as m } from "@heroui/react";
 import { jsx as h, jsxs as g } from "react/jsx-runtime";
-//#region src/components/settings/account/change-email.tsx
+//#region src/components/auth/settings/account/change-email.tsx
 function _({ className: _, variant: v, ...y }) {
-	let { localization: b, baseURL: x, viewPaths: S } = e(), { data: C } = n(), { mutate: w, isPending: T } = t({ onSuccess: () => m.success(b.settings.changeEmailSuccess) });
-	function E(e) {
-		e.preventDefault(), w({
+	let { authClient: b, localization: x, baseURL: S, viewPaths: C } = e(), { data: w } = n(b), { mutate: T, isPending: E } = t(b, { onSuccess: () => m.success(x.settings.changeEmailSuccess) });
+	function D(e) {
+		e.preventDefault(), T({
 			newEmail: new FormData(e.currentTarget).get("email"),
-			callbackURL: `${x}/${S.settings.account}`
+			callbackURL: `${S}/${C.settings.account}`
 		});
 	}
 	return /* @__PURE__ */ g("div", { children: [/* @__PURE__ */ h("h2", {
 		className: p("text-sm font-semibold mb-3"),
-		children: b.settings.changeEmail
+		children: x.settings.changeEmail
 	}), /* @__PURE__ */ h(i, {
 		className: p("p-4 gap-4", _),
 		variant: v,
 		...y,
 		children: /* @__PURE__ */ h(i.Content, { children: /* @__PURE__ */ h(s, {
-			onSubmit: E,
+			onSubmit: D,
 			children: /* @__PURE__ */ g(o, {
 				className: "w-full gap-4",
 				children: [/* @__PURE__ */ h(o.Group, { children: /* @__PURE__ */ g(f, {
 					name: "email",
 					type: "email",
-					defaultValue: C?.user.email,
-					isDisabled: T || !C,
+					defaultValue: w?.user.email,
+					isDisabled: E || !w,
 					children: [
-						/* @__PURE__ */ h(l, { children: b.auth.email }),
-						C ? /* @__PURE__ */ h(c, {
+						/* @__PURE__ */ h(l, { children: x.auth.email }),
+						w ? /* @__PURE__ */ h(c, {
 							required: !0,
 							variant: v === "transparent" ? "primary" : "secondary",
 							autoComplete: "email",
-							placeholder: b.auth.emailPlaceholder
+							placeholder: x.auth.emailPlaceholder
 						}) : /* @__PURE__ */ h(u, { className: "h-10 md:h-9 w-full rounded-xl" }),
 						/* @__PURE__ */ h(a, {})
 					]
-				}, C?.user.email) }), /* @__PURE__ */ h(o.Actions, { children: /* @__PURE__ */ g(r, {
+				}, w?.user.email) }), /* @__PURE__ */ h(o.Actions, { children: /* @__PURE__ */ g(r, {
 					type: "submit",
-					isPending: T,
-					isDisabled: !C,
+					isPending: E,
+					isDisabled: !w,
 					size: "sm",
-					children: [T && /* @__PURE__ */ h(d, {
+					children: [E && /* @__PURE__ */ h(d, {
 						color: "current",
 						size: "sm"
-					}), b.settings.updateEmail]
+					}), x.settings.updateEmail]
 				}) })]
 			})
 		}) })

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

@@ -4,8 +4,7 @@ export type UserProfileProps = {
     variant?: CardProps["variant"];
 };
 /**
- * Render a profile card that lets the authenticated user view and update their display name, username, and avatar.
- *
- * @returns A JSX element containing the user profile card with avatar upload and editable form fields
+ * Render a profile card that lets the authenticated user view and update their
+ * display name, avatar, and any plugin- or user-supplied additional fields.
  */
 export declare function UserProfile({ className, variant, ...props }: UserProfileProps & Omit<CardProps, "children">): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,86 @@
+import { AdditionalField as e } from "../../additional-field.js";
+import { ChangeAvatar as t } from "./change-avatar.js";
+import { parseAdditionalFieldValue as n } from "@better-auth-ui/core";
+import { useAuth as r, useSession as i, useUpdateUser as a } from "@better-auth-ui/react";
+import { Button as o, Card as s, FieldError as c, Form as l, Input as u, Label as d, Skeleton as f, Spinner as p, TextField as m, cn as h, toast as g } from "@heroui/react";
+import { jsx as _, jsxs as v } from "react/jsx-runtime";
+//#region src/components/auth/settings/account/user-profile.tsx
+function y({ className: y, variant: b, ...x }) {
+	let { additionalFields: S, authClient: C, localization: w } = r(), { data: T } = i(C), { mutate: E, isPending: D } = a(C, { onSuccess: () => g.success(w.settings.profileUpdatedSuccess) });
+	async function O(e) {
+		e.preventDefault();
+		let t = new FormData(e.currentTarget), r = t.get("name"), i = {};
+		for (let e of S ?? []) {
+			if (e.profile === !1 || e.readOnly) continue;
+			let r = n(e, t.get(e.name));
+			if (e.validate) try {
+				await e.validate(r);
+			} catch (e) {
+				g.danger(e instanceof Error ? e.message : String(e));
+				return;
+			}
+			r !== void 0 && (i[e.name] = r);
+		}
+		E({
+			name: r,
+			...i
+		});
+	}
+	return /* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("h2", {
+		className: h("text-sm font-semibold mb-3"),
+		children: w.settings.profile
+	}), /* @__PURE__ */ _(s, {
+		className: h("p-4 gap-4", y),
+		variant: b,
+		...x,
+		children: /* @__PURE__ */ _(s.Content, { children: /* @__PURE__ */ v(l, {
+			onSubmit: O,
+			className: "flex flex-col gap-4",
+			children: [
+				/* @__PURE__ */ _(t, {}),
+				/* @__PURE__ */ v(m, {
+					name: "name",
+					defaultValue: T?.user.name,
+					isDisabled: D || !T,
+					children: [
+						/* @__PURE__ */ _(d, { children: w.auth.name }),
+						/* @__PURE__ */ _(u, {
+							className: h(!T && "hidden"),
+							autoComplete: "name",
+							placeholder: w.auth.name,
+							variant: b === "transparent" ? "primary" : "secondary"
+						}),
+						!T && /* @__PURE__ */ _(f, { className: "h-10 md:h-9 w-full rounded-xl" }),
+						/* @__PURE__ */ _(c, {})
+					]
+				}, T?.user?.name),
+				S?.filter((e) => e.profile !== !1).map((t) => {
+					if (!T) return t.inputType === "hidden" ? null : /* @__PURE__ */ _(f, { className: "h-10 md:h-9 w-full rounded-xl" }, t.name);
+					let n = T.user[t.name], r = `${t.name}:${n instanceof Date ? n.toISOString() : String(n ?? "")}`;
+					return /* @__PURE__ */ _(e, {
+						name: t.name,
+						field: {
+							...t,
+							defaultValue: n
+						},
+						isPending: D,
+						variant: b
+					}, r);
+				}),
+				/* @__PURE__ */ v(o, {
+					type: "submit",
+					isPending: D,
+					isDisabled: !T,
+					size: "sm",
+					className: "self-start mt-1",
+					children: [D && /* @__PURE__ */ _(p, {
+						color: "current",
+						size: "sm"
+					}), w.settings.saveChanges]
+				})
+			]
+		}) })
+	})] });
+}
+//#endregion
+export { y as UserProfile };

package/dist/components/auth/settings/security/active-session.js

@@ -0,0 +1,59 @@
+import { useAuth as e, useRevokeSession as t, useSession as n } from "@better-auth-ui/react";
+import { ArrowRightFromSquare as r, Display as i, Smartphone as a, Xmark as o } from "@gravity-ui/icons";
+import { Button as s, Chip as c, Spinner as l, toast as u } from "@heroui/react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import p from "bowser";
+//#region src/components/auth/settings/security/active-session.tsx
+function m(e) {
+	let t = Math.floor((Date.now() - e.getTime()) / 1e3), n = new Intl.RelativeTimeFormat(void 0, { numeric: "auto" });
+	for (let [e, r] of [
+		["year", 31536e3],
+		["month", 2592e3],
+		["week", 604800],
+		["day", 86400],
+		["hour", 3600],
+		["minute", 60],
+		["second", 1]
+	]) if (t >= r) return n.format(-Math.floor(t / r), e);
+	return n.format(0, "second");
+}
+function h({ activeSession: h }) {
+	let { authClient: g, basePaths: _, localization: v, viewPaths: y, navigate: b } = e(), { data: x } = n(g, { refetchOnMount: !1 }), { mutate: S, isPending: C } = t(g, { onSuccess: () => u.success(v.settings.revokeSessionSuccess) }), w = h.token === x?.session.token, T = p.parse(h.userAgent || "");
+	return /* @__PURE__ */ f("div", {
+		className: "flex items-center gap-3",
+		children: [
+			/* @__PURE__ */ d("div", {
+				className: "flex size-10 shrink-0 items-center justify-center rounded-xl bg-surface-secondary",
+				children: T.platform.type === "mobile" || T.platform.type === "tablet" ? /* @__PURE__ */ d(a, { className: "size-4.5" }) : /* @__PURE__ */ d(i, { className: "size-4.5" })
+			}),
+			/* @__PURE__ */ f("div", {
+				className: "flex flex-col min-w-0",
+				children: [/* @__PURE__ */ f("span", {
+					className: "text-sm font-medium truncate",
+					children: [T.browser.name || "Unknown Browser", T.os.name ? `, ${T.os.name}` : ""]
+				}), w ? /* @__PURE__ */ d(c, {
+					color: "accent",
+					size: "sm",
+					children: v.settings.currentSession
+				}) : h.createdAt && /* @__PURE__ */ d("span", {
+					className: "text-xs text-muted capitalize",
+					children: m(h.createdAt)
+				})]
+			}),
+			/* @__PURE__ */ f(s, {
+				className: "ml-auto shrink-0",
+				variant: "outline",
+				size: "sm",
+				onPress: () => w ? b({ to: `${_.auth}/${y.auth.signOut}` }) : S(h),
+				isPending: C,
+				"aria-label": w ? v.auth.signOut : v.settings.revokeSession,
+				children: [C ? /* @__PURE__ */ d(l, {
+					color: "current",
+					size: "sm"
+				}) : d(w ? r : o, {}), w ? v.auth.signOut : v.settings.revoke]
+			})
+		]
+	});
+}
+//#endregion
+export { h as ActiveSession };

package/dist/components/{settings → auth/settings}/security/active-sessions.js

@@ -2,19 +2,19 @@ import { ActiveSession as e } from "./active-session.js";
 import { useAuth as t, useListSessions as n, useSession as r } from "@better-auth-ui/react";
 import { Card as i, Skeleton as a, cn as o } from "@heroui/react";
 import { jsx as s, jsxs as c } from "react/jsx-runtime";
-//#region src/components/settings/security/active-sessions.tsx
+//#region src/components/auth/settings/security/active-sessions.tsx
 function l({ className: a, variant: l, ...d }) {
-	let { localization: f } = t(), { data: p } = r(), { data: m, isPending: h } = n(), g = m?.toSorted((e) => e.id === p?.session.id ? -1 : 1);
+	let { authClient: f, localization: p } = t(), { data: m } = r(f), { data: h, isPending: g } = n(f), _ = h?.toSorted((e) => e.id === m?.session.id ? -1 : 1);
 	return /* @__PURE__ */ c("div", { children: [/* @__PURE__ */ s("h2", {
 		className: o("text-sm font-semibold mb-3"),
-		children: f.settings.activeSessions
+		children: p.settings.activeSessions
 	}), /* @__PURE__ */ s(i, {
 		className: o(a),
 		variant: l,
 		...d,
 		children: /* @__PURE__ */ s(i.Content, {
 			className: "gap-0",
-			children: h ? /* @__PURE__ */ s(u, {}) : g?.map((t, n) => /* @__PURE__ */ c("div", { children: [n > 0 && /* @__PURE__ */ s("div", { className: "border-b border-dashed -mx-4 md:-mx-6 my-4" }), /* @__PURE__ */ s(e, { activeSession: t })] }, t.id))
+			children: g ? /* @__PURE__ */ s(u, {}) : _?.map((t, n) => /* @__PURE__ */ c("div", { children: [n > 0 && /* @__PURE__ */ s("div", { className: "border-b border-dashed -mx-4 md:-mx-6 my-4" }), /* @__PURE__ */ s(e, { activeSession: t })] }, t.id))
 		})
 	})] });
 }

package/dist/components/auth/settings/security/change-password.js

@@ -0,0 +1,189 @@
+import { useAuth as e, useChangePassword as t, useListAccounts as n, useRequestPasswordReset as r, useSession as i } from "@better-auth-ui/react";
+import { Eye as a, EyeSlash as o } from "@gravity-ui/icons";
+import { Button as s, Card as c, FieldError as l, Fieldset as u, Form as d, Input as f, InputGroup as p, Label as m, Skeleton as h, Spinner as g, TextField as _, cn as v, toast as y } from "@heroui/react";
+import { useState as b } from "react";
+import { jsx as x, jsxs as S } from "react/jsx-runtime";
+//#region src/components/auth/settings/security/change-password.tsx
+function C({ className: t, variant: r, ...a }) {
+	let { authClient: o, emailAndPassword: s, localization: c } = e(), { data: l } = i(o), { data: u, isPending: d } = n(o), f = u?.some((e) => e.providerId === "credential");
+	return !d && !f ? /* @__PURE__ */ x(w, {
+		className: t,
+		variant: r,
+		...a
+	}) : /* @__PURE__ */ x(T, {
+		className: t,
+		variant: r,
+		emailAndPassword: s,
+		localization: c,
+		session: d ? void 0 : l,
+		...a
+	});
+}
+function w({ className: t, variant: n, ...a }) {
+	let { authClient: o, localization: l } = e(), { data: u } = i(o), { mutate: d, isPending: f } = r(o, { onSuccess: () => y.success(l.auth.passwordResetEmailSent) }), p = () => {
+		u?.user.email && d({ email: u.user.email });
+	};
+	return /* @__PURE__ */ S("div", { children: [/* @__PURE__ */ x("h2", {
+		className: v("text-sm font-semibold mb-3"),
+		children: l.settings.changePassword
+	}), /* @__PURE__ */ x(c, {
+		className: v(t),
+		variant: n,
+		...a,
+		children: /* @__PURE__ */ S(c.Content, {
+			className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between",
+			children: [/* @__PURE__ */ S("div", { children: [/* @__PURE__ */ x("p", {
+				className: "text-sm font-medium leading-tight",
+				children: l.settings.setPassword
+			}), /* @__PURE__ */ x("p", {
+				className: "text-muted text-xs mt-0.5",
+				children: l.settings.setPasswordDescription
+			})] }), /* @__PURE__ */ S(s, {
+				size: "sm",
+				isPending: f,
+				isDisabled: !u,
+				onPress: p,
+				children: [f && /* @__PURE__ */ x(g, {
+					color: "current",
+					size: "sm"
+				}), l.auth.sendResetLink]
+			})]
+		})
+	})] });
+}
+function T({ className: n, variant: r, emailAndPassword: i, localization: C, session: w, ...T }) {
+	let { authClient: E } = e(), [D, O] = b(""), [k, A] = b(""), [j, M] = b(""), { mutate: N, isPending: P } = t(E, {
+		onError: (e) => {
+			O(""), A(""), M(""), y.danger(e.error?.message || e.message);
+		},
+		onSuccess: () => {
+			O(""), A(""), M(""), y.success(C.settings.changePasswordSuccess);
+		}
+	}), [F, I] = b(!1), [L, R] = b(!1), z = (e) => {
+		if (e.preventDefault(), i?.confirmPassword && k !== j) {
+			O(""), A(""), M(""), y.danger(C.auth.passwordsDoNotMatch);
+			return;
+		}
+		N({
+			currentPassword: D,
+			newPassword: k,
+			revokeOtherSessions: !0
+		});
+	};
+	return /* @__PURE__ */ S("div", { children: [/* @__PURE__ */ x("h2", {
+		className: v("text-sm font-semibold mb-3"),
+		children: C.settings.changePassword
+	}), /* @__PURE__ */ x(c, {
+		className: v("p-4 gap-4", n),
+		variant: r,
+		...T,
+		children: /* @__PURE__ */ x(c.Content, { children: /* @__PURE__ */ x(d, {
+			onSubmit: z,
+			children: /* @__PURE__ */ S(u, {
+				className: "w-full gap-4",
+				children: [/* @__PURE__ */ S(u.Group, { children: [
+					/* @__PURE__ */ S(_, {
+						name: "currentPassword",
+						type: "password",
+						isDisabled: P || !w,
+						defaultValue: "",
+						value: D,
+						onChange: O,
+						children: [
+							/* @__PURE__ */ x(m, { children: C.settings.currentPassword }),
+							/* @__PURE__ */ x(f, {
+								className: v(!w && "hidden"),
+								autoComplete: "current-password",
+								placeholder: C.settings.currentPasswordPlaceholder,
+								required: !0,
+								variant: r === "transparent" ? "primary" : "secondary"
+							}),
+							!w && /* @__PURE__ */ x(h, { className: "h-10 md:h-9 w-full rounded-xl" }),
+							/* @__PURE__ */ x(l, {})
+						]
+					}),
+					/* @__PURE__ */ S(_, {
+						minLength: i?.minPasswordLength,
+						maxLength: i?.maxPasswordLength,
+						isDisabled: P || !w,
+						value: k,
+						onChange: A,
+						children: [
+							/* @__PURE__ */ x(m, { children: C.auth.newPassword }),
+							/* @__PURE__ */ S(p, {
+								className: v(!w && "hidden"),
+								variant: r === "transparent" ? "primary" : "secondary",
+								children: [/* @__PURE__ */ x(p.Input, {
+									name: "newPassword",
+									type: F ? "text" : "password",
+									autoComplete: "new-password",
+									placeholder: C.auth.newPasswordPlaceholder,
+									required: !0
+								}), /* @__PURE__ */ x(p.Suffix, {
+									className: "px-0",
+									children: /* @__PURE__ */ x(s, {
+										isIconOnly: !0,
+										"aria-label": F ? C.auth.hidePassword : C.auth.showPassword,
+										size: "sm",
+										variant: "ghost",
+										onPress: () => I(!F),
+										isDisabled: P,
+										children: x(F ? o : a, {})
+									})
+								})]
+							}),
+							!w && /* @__PURE__ */ x(h, { className: "h-10 md:h-9 w-full rounded-xl" }),
+							/* @__PURE__ */ x(l, {})
+						]
+					}),
+					i?.confirmPassword && /* @__PURE__ */ S(_, {
+						minLength: i?.minPasswordLength,
+						maxLength: i?.maxPasswordLength,
+						isDisabled: P || !w,
+						isRequired: !0,
+						value: j,
+						onChange: M,
+						children: [
+							/* @__PURE__ */ x(m, { children: C.auth.confirmPassword }),
+							/* @__PURE__ */ S(p, {
+								className: v(!w && "hidden"),
+								variant: r === "transparent" ? "primary" : "secondary",
+								children: [/* @__PURE__ */ x(p.Input, {
+									name: "confirmPassword",
+									type: L ? "text" : "password",
+									autoComplete: "new-password",
+									placeholder: C.auth.confirmPasswordPlaceholder,
+									required: !0
+								}), /* @__PURE__ */ x(p.Suffix, {
+									className: "px-0",
+									children: /* @__PURE__ */ x(s, {
+										isIconOnly: !0,
+										"aria-label": L ? C.auth.hidePassword : C.auth.showPassword,
+										size: "sm",
+										variant: "ghost",
+										onPress: () => R(!L),
+										isDisabled: P,
+										children: x(L ? o : a, {})
+									})
+								})]
+							}),
+							!w && /* @__PURE__ */ x(h, { className: "h-10 md:h-9 w-full rounded-xl" }),
+							/* @__PURE__ */ x(l, {})
+						]
+					})
+				] }), /* @__PURE__ */ x(u.Actions, { children: /* @__PURE__ */ S(s, {
+					type: "submit",
+					isPending: P,
+					isDisabled: !w,
+					size: "sm",
+					children: [P && /* @__PURE__ */ x(g, {
+						color: "current",
+						size: "sm"
+					}), C.settings.updatePassword]
+				}) })]
+			})
+		}) })
+	})] });
+}
+//#endregion
+export { C as ChangePassword };

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

@@ -0,0 +1,56 @@
+import { getProviderName as e } from "@better-auth-ui/core";
+import { providerIcons as t, useAccountInfo as n, useAuth as r, useLinkSocial as i, useUnlinkAccount as a } from "@better-auth-ui/react";
+import { Link as o, LinkSlash as s, PlugConnection as c } from "@gravity-ui/icons";
+import { Button as l, Skeleton as u, Spinner as d, cn as f, toast as p } from "@heroui/react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+//#region src/components/auth/settings/security/linked-account.tsx
+function g({ account: g, provider: _ }) {
+	let { authClient: v, baseURL: y, localization: b } = r(), { data: x, isPending: S } = n(v, { query: { accountId: g?.accountId } }), { mutate: C, isPending: w } = i(v), { mutate: T, isPending: E } = a(v, { onSuccess: () => p.success(b.settings.accountUnlinked) }), D = t[_], O = e(_), k = x?.data?.login || x?.data?.username || x?.user?.email || x?.user?.name || g?.accountId;
+	return /* @__PURE__ */ h("div", {
+		className: "flex items-center gap-3",
+		children: [
+			/* @__PURE__ */ m("div", {
+				className: f("flex size-10 shrink-0 items-center justify-center rounded-xl bg-surface-secondary"),
+				children: m(D || c, { className: f("size-4.5", !g && "opacity-50") })
+			}),
+			/* @__PURE__ */ h("div", {
+				className: "flex flex-col min-w-0",
+				children: [/* @__PURE__ */ m("span", {
+					className: "text-sm font-medium leading-tight",
+					children: O
+				}), g && S ? /* @__PURE__ */ m(u, { className: "h-3 w-24 my-0.5 rounded-lg" }) : /* @__PURE__ */ m("span", {
+					className: "text-xs text-muted truncate",
+					children: g ? k : b.settings.linkProvider.replace("{{provider}}", O)
+				})]
+			}),
+			g ? /* @__PURE__ */ h(l, {
+				className: "ml-auto shrink-0",
+				variant: "outline",
+				size: "sm",
+				onPress: () => T({ providerId: g.providerId }),
+				isPending: E,
+				"aria-label": b.settings.unlinkProvider.replace("{{provider}}", O),
+				children: [E ? /* @__PURE__ */ m(d, {
+					color: "current",
+					size: "sm"
+				}) : /* @__PURE__ */ m(s, {}), b.settings.unlinkProvider.replace("{{provider}}", "").trim()]
+			}) : /* @__PURE__ */ h(l, {
+				className: "ml-auto shrink-0",
+				variant: "outline",
+				size: "sm",
+				onPress: () => C({
+					provider: _,
+					callbackURL: `${y}${window.location.pathname}`
+				}),
+				isPending: w,
+				"aria-label": b.settings.linkProvider.replace("{{provider}}", O),
+				children: [w ? /* @__PURE__ */ m(d, {
+					color: "current",
+					size: "sm"
+				}) : /* @__PURE__ */ m(o, {}), b.settings.link]
+			})
+		]
+	});
+}
+//#endregion
+export { g as LinkedAccount };

package/dist/components/{settings → auth/settings}/security/linked-accounts.js

@@ -2,27 +2,27 @@ import { LinkedAccount as e } from "./linked-account.js";
 import { useAuth as t, useListAccounts as n } from "@better-auth-ui/react";
 import { Card as r, Skeleton as i, cn as a } from "@heroui/react";
 import { jsx as o, jsxs as s } from "react/jsx-runtime";
-//#region src/components/settings/security/linked-accounts.tsx
+//#region src/components/auth/settings/security/linked-accounts.tsx
 function c({ className: i, variant: c, ...u }) {
-	let { localization: d, socialProviders: f } = t(), { data: p, isPending: m } = n(), h = [...(p?.filter((e) => e.providerId !== "credential"))?.map((e) => ({
+	let { authClient: d, localization: f, socialProviders: p } = t(), { data: m, isPending: h } = n(d), g = [...(m?.filter((e) => e.providerId !== "credential"))?.map((e) => ({
 		key: e.id,
 		account: e,
 		provider: e.providerId
-	})) ?? [], ...f?.map((e) => ({
+	})) ?? [], ...p?.map((e) => ({
 		key: e,
 		account: void 0,
 		provider: e
 	})) ?? []];
 	return /* @__PURE__ */ s("div", { children: [/* @__PURE__ */ o("h2", {
 		className: a("text-sm font-semibold mb-3"),
-		children: d.settings.linkedAccounts
+		children: f.settings.linkedAccounts
 	}), /* @__PURE__ */ o(r, {
 		className: a(i),
 		variant: c,
 		...u,
 		children: /* @__PURE__ */ o(r.Content, {
 			className: "gap-0",
-			children: m ? f?.map((e, t) => /* @__PURE__ */ s("div", { children: [t > 0 && /* @__PURE__ */ o("div", { className: "border-b border-dashed -mx-4 md:-mx-6 my-4" }), /* @__PURE__ */ o(l, {})] }, e)) : h.map((t, n) => /* @__PURE__ */ s("div", { children: [n > 0 && /* @__PURE__ */ o("div", { className: "border-b border-dashed -mx-4 md:-mx-6 my-4" }), /* @__PURE__ */ o(e, {
+			children: h ? p?.map((e, t) => /* @__PURE__ */ s("div", { children: [t > 0 && /* @__PURE__ */ o("div", { className: "border-b border-dashed -mx-4 md:-mx-6 my-4" }), /* @__PURE__ */ o(l, {})] }, e)) : g.map((t, n) => /* @__PURE__ */ s("div", { children: [n > 0 && /* @__PURE__ */ o("div", { className: "border-b border-dashed -mx-4 md:-mx-6 my-4" }), /* @__PURE__ */ o(e, {
 				account: t.account,
 				provider: t.provider
 			})] }, t.key))

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

@@ -8,7 +8,7 @@ export type SecuritySettingsProps = {
  * Renders the security settings layout including password management, linked accounts, and active sessions.
  *
  * ChangePassword is rendered when password authentication is enabled; LinkedAccounts is rendered when social providers are present.
- * DangerZone is rendered when `deleteUser.enabled` is true in auth config.
+ * Each registered auth plugin may contribute `securityCards` (for example delete-user, passkeys).
  *
  * @param className - Optional additional CSS class names for the outer container.
  * @param variant - Card variant forwarded to each security settings card.

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

@@ -0,0 +1,22 @@
+import { ActiveSessions as e } from "./active-sessions.js";
+import { ChangePassword as t } from "./change-password.js";
+import { LinkedAccounts as n } from "./linked-accounts.js";
+import { useAuth as r } from "@better-auth-ui/react";
+import { cn as i } from "@heroui/react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/auth/settings/security/security-settings.tsx
+function s({ className: s, variant: c, ...l }) {
+	let { emailAndPassword: u, plugins: d, socialProviders: f } = r();
+	return /* @__PURE__ */ o("div", {
+		className: i("flex w-full flex-col gap-4 md:gap-6", s),
+		...l,
+		children: [
+			u?.enabled && /* @__PURE__ */ a(t, { variant: c }),
+			!!f?.length && /* @__PURE__ */ a(n, { variant: c }),
+			/* @__PURE__ */ a(e, { variant: c }),
+			d.flatMap((e) => e.securityCards?.map((t, n) => /* @__PURE__ */ a(t, { variant: c }, `${e.id}-${n.toString()}`)))
+		]
+	});
+}
+//#endregion
+export { s as SecuritySettings };

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

@@ -0,0 +1,45 @@
+import { AccountSettings as e } from "./account/account-settings.js";
+import { SecuritySettings as t } from "./security/security-settings.js";
+import { useAuth as n, useAuthenticate as r } from "@better-auth-ui/react";
+import { Tabs as i, cn as a } from "@heroui/react";
+import { useMemo as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/auth/settings/settings.tsx
+function l({ className: l, hideNav: u, path: d, variant: f, view: p, ...m }) {
+	let { authClient: h, basePaths: g, localization: _, viewPaths: v } = n();
+	if (r(h), !p && !d) throw Error("[Better Auth UI] Either `view` or `path` must be provided");
+	let y = o(() => Object.fromEntries(Object.entries(v.settings).map(([e, t]) => [t, e])), [v.settings]), b = p || (d ? y[d] : void 0);
+	return /* @__PURE__ */ c(i, {
+		className: a(l),
+		orientation: "horizontal",
+		selectedKey: b,
+		...m,
+		children: [
+			/* @__PURE__ */ s(i.ListContainer, { children: /* @__PURE__ */ c(i.List, {
+				"aria-label": _.settings.settings,
+				className: "overflow-auto w-fit",
+				children: [/* @__PURE__ */ c(i.Tab, {
+					id: "account",
+					href: `${g.settings}/${v.settings.account}`,
+					children: [_.settings.account, /* @__PURE__ */ s(i.Indicator, {})]
+				}), /* @__PURE__ */ c(i.Tab, {
+					id: "security",
+					href: `${g.settings}/${v.settings.security}`,
+					children: [_.settings.security, /* @__PURE__ */ s(i.Indicator, {})]
+				})]
+			}) }),
+			/* @__PURE__ */ s(i.Panel, {
+				id: "account",
+				className: "px-0",
+				children: /* @__PURE__ */ s(e, { variant: f })
+			}),
+			/* @__PURE__ */ s(i.Panel, {
+				id: "security",
+				className: "px-0",
+				children: /* @__PURE__ */ s(t, { variant: f })
+			})
+		]
+	});
+}
+//#endregion
+export { l as Settings };