@better-auth-ui/heroui 1.6.3 → 1.6.5

package/dist/components/auth/sign-up.js

@@ -1,226 +1,206 @@
-import { FieldSeparator as e } from "./field-separator.js";
-import { MagicLinkButton as t } from "./magic-link-button.js";
+import { AdditionalField as e } from "./additional-field.js";
+import { FieldSeparator as t } from "./field-separator.js";
 import { ProviderButtons as n } from "./provider-buttons.js";
-import { useAuth as r, useIsUsernameAvailable as i, useSignUpEmail as ee } from "@better-auth-ui/react";
-import { Button as a, Card as o, Description as te, FieldError as s, Form as ne, Input as c, InputGroup as l, Label as u, Link as re, Spinner as d, TextField as f, cn as p, toast as m } from "@heroui/react";
-import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
-import { useState as v } from "react";
-import { Check as y, Eye as b, EyeSlash as x, Xmark as S } from "@gravity-ui/icons";
-import { useDebouncer as C } from "@tanstack/react-pacer";
+import { authMutationKeys as r, parseAdditionalFieldValue as i } from "@better-auth-ui/core";
+import { useAuth as a, useFetchOptions as o, useSignUpEmail as ee } from "@better-auth-ui/react";
+import { Eye as s, EyeSlash as c } from "@gravity-ui/icons";
+import { Button as l, Card as u, Description as d, FieldError as f, Form as te, Input as p, InputGroup as m, Label as h, Link as g, Spinner as _, TextField as v, cn as y, toast as b } from "@heroui/react";
+import { useState as x } from "react";
+import { Fragment as S, jsx as C, jsxs as w } from "react/jsx-runtime";
+import { useIsMutating as T } from "@tanstack/react-query";
 //#region src/components/auth/sign-up.tsx
-function w({ className: w, socialLayout: T, socialPosition: E = "bottom", variant: D, ...O }) {
-	let { basePaths: k, emailAndPassword: A, localization: j, magicLink: M, redirectTo: N, socialProviders: P, username: F, viewPaths: I, navigate: L } = r(), [R, z] = v(""), [B, V] = v(""), [H, U] = v(""), { mutate: W, data: G, error: K, reset: q } = i(), J = C((e) => {
-		if (!e.trim()) {
-			q();
-			return;
-		}
-		W({ username: e.trim() });
-	}, { wait: 500 });
-	function Y(e) {
-		U(e), q(), F?.isUsernameAvailable && J.maybeExecute(e);
-	}
-	let { mutate: ie, isPending: ae } = ee({
+function E({ className: E, socialLayout: D, socialPosition: O = "bottom", variant: k, ...A }) {
+	let { additionalFields: j, authClient: M, basePaths: N, emailAndPassword: P, localization: F, plugins: I, redirectTo: L, socialProviders: R, viewPaths: z, navigate: B } = a(), { fetchOptions: V, resetFetchOptions: H } = o(), [U, W] = x(""), [G, K] = x(""), { mutate: q, isPending: J } = ee(M, {
 		onError: (e) => {
-			z(""), V(""), m.danger(e.error?.message || e.message);
+			W(""), K(""), b.danger(e.error?.message || e.message), H();
 		},
 		onSuccess: () => {
-			A?.requireEmailVerification ? (m.success(j.auth.verifyYourEmail), L({ to: `${k.auth}/${I.auth.signIn}` })) : L({ to: N });
+			P?.requireEmailVerification ? (b.success(F.auth.verifyYourEmail), B({ to: `${N.auth}/${z.auth.signIn}` })) : B({ to: L });
 		}
-	}), [X, oe] = v(!1), [Z, se] = v(!1), Q = ae, ce = (e) => {
+	}), [Y, ne] = x(!1), [X, re] = x(!1), Z = T({ mutationKey: r.signIn.all }) + T({ mutationKey: r.signUp.all }) > 0, Q = I.find((e) => e.captchaComponent)?.captchaComponent, ie = async (e) => {
 		e.preventDefault();
-		let t = new FormData(e.currentTarget), n = t.get("name"), r = t.get("email");
-		if (A?.confirmPassword && R !== B) {
-			m.danger(j.auth.passwordsDoNotMatch), z(""), V("");
+		let t = new FormData(e.currentTarget), n = t.get("name") ?? "", r = t.get("email");
+		if (P?.confirmPassword && U !== G) {
+			b.danger(F.auth.passwordsDoNotMatch), W(""), K("");
 			return;
 		}
-		ie({
+		let a = {};
+		for (let e of j ?? []) {
+			if (!e.signUp || e.readOnly) continue;
+			let n = i(e, t.get(e.name));
+			if (e.validate) try {
+				await e.validate(n);
+			} catch (e) {
+				b.danger(e instanceof Error ? e.message : String(e));
+				return;
+			}
+			n !== void 0 && (a[e.name] = n);
+		}
+		q({
 			name: n,
 			email: r,
-			password: R,
-			...F?.enabled ? {
-				username: H.trim(),
-				...F.displayUsername ? { displayUsername: H.trim() } : {}
-			} : {}
+			password: U,
+			...a,
+			fetchOptions: V
 		});
-	}, $ = A?.enabled && !!P?.length;
-	return /* @__PURE__ */ _(o, {
-		className: p("w-full max-w-sm p-4 md:p-6", w),
-		variant: D,
-		...O,
+	}, $ = P?.enabled && !!R?.length;
+	return /* @__PURE__ */ w(u, {
+		className: y("w-full max-w-sm gap-4 md:p-6", E),
+		variant: k,
+		...A,
 		children: [
-			/* @__PURE__ */ g(o.Header, { children: /* @__PURE__ */ g(o.Title, {
+			/* @__PURE__ */ C(u.Header, { children: /* @__PURE__ */ C(u.Title, {
 				className: "text-xl font-semibold mb-1",
-				children: j.auth.signUp
+				children: F.auth.signUp
 			}) }),
-			/* @__PURE__ */ _(o.Content, {
+			/* @__PURE__ */ w(u.Content, {
 				className: "gap-4",
 				children: [
-					E === "top" && /* @__PURE__ */ _(h, { children: [!!P?.length && /* @__PURE__ */ g(n, {
-						isPending: Q,
-						socialLayout: T
-					}), $ && /* @__PURE__ */ g(e, { children: j.auth.or })] }),
-					A?.enabled && /* @__PURE__ */ _(ne, {
-						onSubmit: ce,
+					O === "top" && /* @__PURE__ */ w(S, { children: [!!R?.length && /* @__PURE__ */ C(n, { socialLayout: D }), $ && /* @__PURE__ */ C(t, { children: F.auth.or })] }),
+					P?.enabled && /* @__PURE__ */ w(te, {
+						onSubmit: ie,
 						className: "flex flex-col gap-4",
 						children: [
-							/* @__PURE__ */ _(f, {
+							P.name !== !1 && /* @__PURE__ */ w(v, {
 								name: "name",
 								type: "text",
 								autoComplete: "name",
-								isDisabled: Q,
+								isDisabled: Z,
 								children: [
-									/* @__PURE__ */ g(u, { children: j.auth.name }),
-									/* @__PURE__ */ g(c, {
-										placeholder: j.auth.namePlaceholder,
+									/* @__PURE__ */ C(h, { children: F.auth.name }),
+									/* @__PURE__ */ C(p, {
+										placeholder: F.auth.namePlaceholder,
 										required: !0,
-										variant: D === "transparent" ? "primary" : "secondary"
+										variant: k === "transparent" ? "primary" : "secondary"
 									}),
-									/* @__PURE__ */ g(s, {})
+									/* @__PURE__ */ C(f, {})
 								]
 							}),
-							F?.enabled && /* @__PURE__ */ _(f, {
-								name: "username",
-								type: "text",
-								autoComplete: "username",
-								minLength: F.minUsernameLength,
-								maxLength: F.maxUsernameLength,
-								isDisabled: Q,
-								value: H,
-								onChange: Y,
-								isInvalid: !!K || G && !G.available,
-								children: [
-									/* @__PURE__ */ g(u, { children: j.auth.username }),
-									/* @__PURE__ */ _(l, {
-										variant: D === "transparent" ? "primary" : "secondary",
-										children: [/* @__PURE__ */ g(l.Input, {
-											placeholder: j.auth.usernamePlaceholder,
-											required: !0
-										}), F.isUsernameAvailable && H.trim() && /* @__PURE__ */ g(l.Suffix, {
-											className: "px-2",
-											children: G?.available ? /* @__PURE__ */ g(y, { className: "text-success" }) : K || G?.available === !1 ? /* @__PURE__ */ g(S, { className: "text-danger" }) : /* @__PURE__ */ g(d, {
-												size: "sm",
-												color: "current"
-											})
-										})]
-									}),
-									/* @__PURE__ */ g(s, { children: K?.error?.message || K?.message || (G?.available === !1 ? j.auth.usernameTaken : null) })
-								]
-							}),
-							/* @__PURE__ */ _(f, {
+							/* @__PURE__ */ w(v, {
 								name: "email",
 								type: "email",
 								autoComplete: "email",
-								isDisabled: Q,
+								isDisabled: Z,
 								children: [
-									/* @__PURE__ */ g(u, { children: j.auth.email }),
-									/* @__PURE__ */ g(c, {
-										placeholder: j.auth.emailPlaceholder,
+									/* @__PURE__ */ C(h, { children: F.auth.email }),
+									/* @__PURE__ */ C(p, {
+										placeholder: F.auth.emailPlaceholder,
 										required: !0,
-										variant: D === "transparent" ? "primary" : "secondary"
+										variant: k === "transparent" ? "primary" : "secondary"
 									}),
-									/* @__PURE__ */ g(s, {})
+									/* @__PURE__ */ C(f, {})
 								]
 							}),
-							/* @__PURE__ */ _(f, {
-								minLength: A?.minPasswordLength,
-								maxLength: A?.maxPasswordLength,
+							j?.map((t) => t.signUp === "above" && /* @__PURE__ */ C(e, {
+								name: t.name,
+								field: t,
+								isPending: Z,
+								variant: k
+							}, t.name)),
+							/* @__PURE__ */ w(v, {
+								minLength: P?.minPasswordLength,
+								maxLength: P?.maxPasswordLength,
 								name: "password",
 								autoComplete: "new-password",
-								isDisabled: Q,
-								value: R,
-								onChange: z,
+								isDisabled: Z,
+								value: U,
+								onChange: W,
 								children: [
-									/* @__PURE__ */ g(u, { children: j.auth.password }),
-									/* @__PURE__ */ _(l, {
-										variant: D === "transparent" ? "primary" : "secondary",
-										children: [/* @__PURE__ */ g(l.Input, {
-											placeholder: j.auth.passwordPlaceholder,
-											type: X ? "text" : "password",
+									/* @__PURE__ */ C(h, { children: F.auth.password }),
+									/* @__PURE__ */ w(m, {
+										variant: k === "transparent" ? "primary" : "secondary",
+										children: [/* @__PURE__ */ C(m.Input, {
+											placeholder: F.auth.passwordPlaceholder,
+											type: Y ? "text" : "password",
 											name: "password",
 											required: !0
-										}), /* @__PURE__ */ g(l.Suffix, {
+										}), /* @__PURE__ */ C(m.Suffix, {
 											className: "px-0",
-											children: /* @__PURE__ */ g(a, {
+											children: /* @__PURE__ */ C(l, {
 												isIconOnly: !0,
-												"aria-label": X ? j.auth.hidePassword : j.auth.showPassword,
+												"aria-label": Y ? F.auth.hidePassword : F.auth.showPassword,
 												size: "sm",
 												variant: "ghost",
-												onPress: () => oe(!X),
-												isDisabled: Q,
-												children: g(X ? x : b, {})
+												onPress: () => ne(!Y),
+												isDisabled: Z,
+												children: C(Y ? c : s, {})
 											})
 										})]
 									}),
-									/* @__PURE__ */ g(s, {})
+									/* @__PURE__ */ C(f, {})
 								]
 							}),
-							A?.confirmPassword && /* @__PURE__ */ _(f, {
-								minLength: A?.minPasswordLength,
-								maxLength: A?.maxPasswordLength,
+							P?.confirmPassword && /* @__PURE__ */ w(v, {
+								minLength: P?.minPasswordLength,
+								maxLength: P?.maxPasswordLength,
 								name: "confirmPassword",
 								autoComplete: "new-password",
-								isDisabled: Q,
-								value: B,
-								onChange: V,
+								isDisabled: Z,
+								value: G,
+								onChange: K,
 								children: [
-									/* @__PURE__ */ g(u, { children: j.auth.confirmPassword }),
-									/* @__PURE__ */ _(l, {
-										variant: D === "transparent" ? "primary" : "secondary",
-										children: [/* @__PURE__ */ g(l.Input, {
+									/* @__PURE__ */ C(h, { children: F.auth.confirmPassword }),
+									/* @__PURE__ */ w(m, {
+										variant: k === "transparent" ? "primary" : "secondary",
+										children: [/* @__PURE__ */ C(m.Input, {
 											name: "confirmPassword",
-											placeholder: j.auth.confirmPasswordPlaceholder,
-											type: Z ? "text" : "password",
+											placeholder: F.auth.confirmPasswordPlaceholder,
+											type: X ? "text" : "password",
 											required: !0
-										}), /* @__PURE__ */ g(l.Suffix, {
+										}), /* @__PURE__ */ C(m.Suffix, {
 											className: "px-0",
-											children: /* @__PURE__ */ g(a, {
+											children: /* @__PURE__ */ C(l, {
 												isIconOnly: !0,
-												"aria-label": Z ? j.auth.hidePassword : j.auth.showPassword,
+												"aria-label": X ? F.auth.hidePassword : F.auth.showPassword,
 												size: "sm",
 												variant: "ghost",
-												onPress: () => se(!Z),
-												isDisabled: Q,
-												children: g(Z ? x : b, {})
+												onPress: () => re(!X),
+												isDisabled: Z,
+												children: C(X ? c : s, {})
 											})
 										})]
 									}),
-									/* @__PURE__ */ g(s, {})
+									/* @__PURE__ */ C(f, {})
 								]
 							}),
-							/* @__PURE__ */ _("div", {
+							j?.map((t) => t.signUp && t.signUp !== "above" && /* @__PURE__ */ C(e, {
+								name: t.name,
+								field: t,
+								isPending: Z,
+								variant: k
+							}, t.name)),
+							Q && /* @__PURE__ */ C("div", {
+								className: "flex justify-center",
+								children: Q
+							}),
+							/* @__PURE__ */ w("div", {
 								className: "flex flex-col gap-3",
-								children: [/* @__PURE__ */ _(a, {
+								children: [/* @__PURE__ */ w(l, {
 									type: "submit",
 									className: "w-full",
-									isPending: Q,
-									children: [Q && /* @__PURE__ */ g(d, {
+									isPending: Z,
+									children: [J && /* @__PURE__ */ C(_, {
 										color: "current",
 										size: "sm"
-									}), j.auth.signUp]
-								}), M && /* @__PURE__ */ g(t, {
-									view: "signUp",
-									isPending: Q
-								})]
+									}), F.auth.signUp]
+								}), I.flatMap((e) => e.authButtons?.map((t, n) => /* @__PURE__ */ C(t, { view: "signUp" }, `${e.id}-${n.toString()}`)))]
 							})
 						]
 					}),
-					E === "bottom" && /* @__PURE__ */ _(h, { children: [$ && /* @__PURE__ */ g(e, { children: j.auth.or }), !!P?.length && /* @__PURE__ */ g(n, {
-						socialLayout: T,
-						isPending: Q
-					})] })
+					O === "bottom" && /* @__PURE__ */ w(S, { children: [$ && /* @__PURE__ */ C(t, { children: F.auth.or }), !!R?.length && /* @__PURE__ */ C(n, { socialLayout: D })] })
 				]
 			}),
-			/* @__PURE__ */ g(o.Footer, {
-				className: "flex-col",
-				children: /* @__PURE__ */ _(te, {
+			/* @__PURE__ */ C(u.Footer, {
+				className: "flex-col gap-3",
+				children: /* @__PURE__ */ w(d, {
 					className: "text-sm",
 					children: [
-						j.auth.alreadyHaveAnAccount,
+						F.auth.alreadyHaveAnAccount,
 						" ",
-						/* @__PURE__ */ g(re, {
-							href: `${k.auth}/${I.auth.signIn}`,
-							className: "text-accent decoration-accent no-underline hover:underline",
-							children: j.auth.signIn
+						/* @__PURE__ */ C(g, {
+							href: `${N.auth}/${z.auth.signIn}`,
+							className: "text-accent no-underline hover:underline decoration-accent-hover",
+							children: F.auth.signIn
 						})
 					]
 				})
@@ -229,4 +209,4 @@ function w({ className: w, socialLayout: T, socialPosition: E = "bottom", varian
 	});
 }
 //#endregion
-export { w as SignUp };
+export { E as SignUp };

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

@@ -7,10 +7,7 @@ export type AppearanceProps = {
  * Renders a theme selector card with visual theme previews.
  *
  * Displays a card containing radio buttons for selecting between system, light,
- * and dark themes. Each option shows a visual preview of the theme. Only renders
- * if theme settings are configured (theme, setTheme, and themes are provided).
- *
- * @param className - Optional additional CSS class names for the card container.
- * @returns A JSX element containing the theme selector card, or null if theme settings are not configured.
+ * and dark themes. Each option shows a visual preview of the theme. Theme options
+ * are conditionally shown based on the `themes` array provided via the theme plugin.
  */
-export declare function Appearance({ className, variant, ...props }: AppearanceProps & Omit<CardProps, "children">): import("react/jsx-runtime").JSX.Element | null;
+export declare function Appearance({ className, variant, ...props }: AppearanceProps & Omit<CardProps, "children">): import("react/jsx-runtime").JSX.Element;

package/dist/components/auth/theme/appearance.js

@@ -0,0 +1,72 @@
+import { themePlugin as e } from "../../../lib/auth/theme-plugin.js";
+import { ThemePreviewDark as t, ThemePreviewLight as n, ThemePreviewSystem as r, useAuthPlugin as i } from "@better-auth-ui/react";
+import { Display as a, Moon as o, Sun as s } from "@gravity-ui/icons";
+import { Card as c, Label as l, Radio as u, RadioGroup as d, cn as f, useIsHydrated as p } from "@heroui/react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+//#region src/components/auth/theme/appearance.tsx
+function g({ className: g, variant: _, ...v }) {
+	let { useTheme: y, localization: b } = i(e), { theme: x, setTheme: S, themes: C = [] } = y(), w = p();
+	return /* @__PURE__ */ h("div", { children: [/* @__PURE__ */ m("h2", {
+		className: f("text-sm font-semibold mb-3"),
+		children: b.appearance
+	}), /* @__PURE__ */ m(c, {
+		className: f("p-4 gap-4", g),
+		variant: _,
+		...v,
+		children: /* @__PURE__ */ h(c.Content, { children: [/* @__PURE__ */ m(l, { children: b.theme }), /* @__PURE__ */ m(d, {
+			variant: _ === "transparent" ? "secondary" : "primary",
+			value: w ? x : "",
+			onChange: S,
+			isDisabled: !w || !x,
+			children: /* @__PURE__ */ h("div", {
+				className: "grid gap-3 grid-cols-2 sm:grid-cols-3",
+				children: [
+					C.includes("system") && /* @__PURE__ */ m(u, {
+						value: "system",
+						className: f("mt-0 px-4 pb-4 pt-3 rounded-xl", "border border-transparent data-[selected=true]:border-accent data-[selected=true]:bg-accent/10", "data-[focus-visible=true]:border-accent data-[focus-visible=true]:bg-accent/10", _ === "transparent" ? "bg-surface" : "bg-surface-secondary"),
+						children: /* @__PURE__ */ h(u.Content, {
+							className: "gap-2",
+							children: [/* @__PURE__ */ h("div", {
+								className: "flex gap-2 justify-between",
+								children: [/* @__PURE__ */ h(l, {
+									className: "flex gap-2 items-center",
+									children: [/* @__PURE__ */ m(a, { className: "text-muted" }), b.system]
+								}), /* @__PURE__ */ m(u.Control, { children: /* @__PURE__ */ m(u.Indicator, {}) })]
+							}), /* @__PURE__ */ m(r, { className: "w-full" })]
+						})
+					}),
+					C.includes("light") && /* @__PURE__ */ m(u, {
+						value: "light",
+						className: f("mt-0 px-4 pb-4 pt-3 rounded-xl", "border border-transparent data-[selected=true]:border-accent data-[selected=true]:bg-accent/10", "data-[focus-visible=true]:border-accent data-[focus-visible=true]:bg-accent/10", _ === "transparent" ? "bg-surface" : "bg-surface-secondary"),
+						children: /* @__PURE__ */ h(u.Content, {
+							className: "gap-2",
+							children: [/* @__PURE__ */ h("div", {
+								className: "flex gap-2 justify-between",
+								children: [/* @__PURE__ */ h(l, {
+									className: "flex gap-2 items-center",
+									children: [/* @__PURE__ */ m(s, { className: "text-muted" }), b.light]
+								}), /* @__PURE__ */ m(u.Control, { children: /* @__PURE__ */ m(u.Indicator, {}) })]
+							}), /* @__PURE__ */ m(n, { className: "w-full" })]
+						})
+					}),
+					C.includes("dark") && /* @__PURE__ */ m(u, {
+						value: "dark",
+						className: f("mt-0 px-4 pb-4 pt-3 rounded-xl", "border border-transparent data-[selected=true]:border-accent data-[selected=true]:bg-accent/10", "data-[focus-visible=true]:border-accent data-[focus-visible=true]:bg-accent/10", _ === "transparent" ? "bg-surface" : "bg-surface-secondary"),
+						children: /* @__PURE__ */ h(u.Content, {
+							className: "gap-2",
+							children: [/* @__PURE__ */ h("div", {
+								className: "flex gap-2 justify-between",
+								children: [/* @__PURE__ */ h(l, {
+									className: "flex gap-2 items-center",
+									children: [/* @__PURE__ */ m(o, { className: "text-muted" }), b.dark]
+								}), /* @__PURE__ */ m(u.Control, { children: /* @__PURE__ */ m(u.Indicator, {}) })]
+							}), /* @__PURE__ */ m(t, { className: "w-full" })]
+						})
+					})
+				]
+			})
+		})] })
+	})] });
+}
+//#endregion
+export { g as Appearance };

package/dist/components/auth/theme/theme-toggle-item.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Theme toggle dropdown item used inside `UserButton`. Callers are responsible
+ * for ensuring theming is configured before rendering this component.
+ */
+export declare function ThemeToggleItem(): import("react/jsx-runtime").JSX.Element;

package/dist/components/auth/theme/theme-toggle-item.js

@@ -0,0 +1,58 @@
+import { themePlugin as e } from "../../../lib/auth/theme-plugin.js";
+import { useAuthPlugin as t } from "@better-auth-ui/react";
+import { Display as n, Moon as r, Sun as i } from "@gravity-ui/icons";
+import { Dropdown as a, Label as o, Tabs as s } from "@heroui/react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/components/auth/theme/theme-toggle-item.tsx
+var u = "[role=\"tab\"][aria-selected=\"true\"]";
+function d() {
+	let { useTheme: d, localization: f } = t(e), { theme: p, setTheme: m, themes: h = [] } = d();
+	return /* @__PURE__ */ l(a.Item, {
+		className: "py-1 pe-2",
+		onFocus: (e) => {
+			e.target === e.currentTarget && e.currentTarget.querySelector(u)?.focus({ preventScroll: !0 });
+		},
+		shouldCloseOnSelect: !1,
+		children: [/* @__PURE__ */ c(o, { children: f.theme }), /* @__PURE__ */ c(s, {
+			className: "ml-auto",
+			selectedKey: p,
+			onSelectionChange: (e) => m(e),
+			children: /* @__PURE__ */ c(s.ListContainer, {
+				onKeyDown: (e) => {
+					if (e.key !== "ArrowUp" && e.key !== "ArrowDown") return;
+					let t = e.target;
+					if (t.getAttribute("role") !== "tab") return;
+					let n = t.closest("[role=\"menuitem\"]"), r = n?.closest("[role=\"menu\"]");
+					if (!n || !r) return;
+					let i = Array.from(r.querySelectorAll("[role=\"menuitem\"]:not([data-disabled])")), a = i.indexOf(n);
+					if (a === -1) return;
+					let o = i[e.key === "ArrowDown" ? a + 1 : a - 1];
+					o && (e.preventDefault(), o.focus());
+				},
+				children: /* @__PURE__ */ l(s.List, {
+					"aria-label": f.theme,
+					className: "*:h-5 *:w-5 *:p-0",
+					children: [
+						h.includes("system") && /* @__PURE__ */ l(s.Tab, {
+							id: "system",
+							"aria-label": f.system,
+							children: [/* @__PURE__ */ c(n, { className: "size-3" }), /* @__PURE__ */ c(s.Indicator, {})]
+						}),
+						h.includes("light") && /* @__PURE__ */ l(s.Tab, {
+							id: "light",
+							"aria-label": f.light,
+							children: [/* @__PURE__ */ c(i, { className: "size-3" }), /* @__PURE__ */ c(s.Indicator, {})]
+						}),
+						h.includes("dark") && /* @__PURE__ */ l(s.Tab, {
+							id: "dark",
+							"aria-label": f.dark,
+							children: [/* @__PURE__ */ c(r, { className: "size-3" }), /* @__PURE__ */ c(s.Indicator, {})]
+						})
+					]
+				})
+			})
+		})]
+	});
+}
+//#endregion
+export { d as ThemeToggleItem };

package/dist/components/auth/user/user-avatar.js

@@ -0,0 +1,29 @@
+import { useAuth as e, useSession as t } from "@better-auth-ui/react";
+import { Person as n } from "@gravity-ui/icons";
+import { Avatar 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/auth/user/user-avatar.tsx
+function c({ className: c, fallback: l, isPending: u, user: d, size: f = "sm", style: p, ...m }) {
+	let { authClient: h } = e(), { data: g, isPending: _ } = t(h, { enabled: !d && !u });
+	if ((u || _) && !d) return /* @__PURE__ */ o(i, {
+		className: a("rounded-full", f === "sm" ? "size-8" : f === "md" ? "size-10" : "size-12", c),
+		style: p
+	});
+	let v = d ?? g?.user, y = (v?.username || v?.name || v?.email)?.slice(0, 2).toUpperCase();
+	return /* @__PURE__ */ s(r, {
+		size: f,
+		className: a("rounded-full", c),
+		style: p,
+		...m,
+		children: [/* @__PURE__ */ o(r.Image, {
+			alt: v?.displayUsername || v?.name || v?.email,
+			src: v?.image ?? void 0
+		}), /* @__PURE__ */ o(r.Fallback, {
+			className: a(f === "lg" ? "text-xl" : f === "md" ? "text-base" : "text-sm"),
+			delayMs: v?.image ? 600 : void 0,
+			children: l || y || /* @__PURE__ */ o(n, { className: "size-4" })
+		})]
+	});
+}
+//#endregion
+export { c as UserAvatar };

package/dist/components/{user → auth/user}/user-button.d.ts

@@ -7,19 +7,15 @@ export type UserButtonProps = {
      * @default "bottom"
      */
     placement?: DropdownPopoverProps["placement"];
-    themeToggle?: boolean;
     variant?: ButtonProps["variant"];
 };
 /**
- * Render a user account dropdown button that shows account actions, session switching, and theme controls.
- *
- * Renders either an icon-only trigger or a full button showing the current user state; its dropdown contains account settings, multi-session switching (when enabled), theme selection (when enabled), and sign-in/sign-out flows depending on authentication state.
+ * Render a user account dropdown button that shows account actions.
  *
  * @param className - Additional CSS classes applied to the trigger element
  * @param placement - Dropdown popover placement (e.g., "bottom", "top-start", "bottom-end")
  * @param size - "icon" renders an avatar-only trigger; "default" renders a button with label and chevron
  * @param variant - Button visual variant passed to the underlying Button component
- * @param themeToggle - When true and theming is available, show theme selection controls in the menu
  * @returns The user button and its dropdown menu as a JSX element
  */
-export declare function UserButton({ className, placement, size, variant, themeToggle }: UserButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function UserButton({ className, placement, size, variant }: UserButtonProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,55 @@
+import { UserAvatar as e } from "./user-avatar.js";
+import { UserView as t } from "./user-view.js";
+import { useAuth as n, useSession as r } from "@better-auth-ui/react";
+import { ArrowRightFromSquare as i, ArrowRightToSquare as a, ChevronsExpandVertical as o, Gear as s, PersonPlus as c } from "@gravity-ui/icons";
+import { Button as l, Dropdown as u, Label as d, Separator as f, cn as p } from "@heroui/react";
+import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
+//#region src/components/auth/user/user-button.tsx
+function _({ className: _, placement: v = "bottom", size: y = "default", variant: b = "ghost" }) {
+	let { authClient: x, basePaths: S, viewPaths: C, localization: w, plugins: T } = n(), { data: E, isPending: D } = r(x), O = T.flatMap((e) => e.userMenuItems?.map((t, n) => /* @__PURE__ */ h(t, {}, `${e.id}-${n.toString()}`)) ?? []);
+	return /* @__PURE__ */ g(u, { children: [y === "icon" ? /* @__PURE__ */ h(u.Trigger, {
+		className: p("rounded-full", _),
+		children: /* @__PURE__ */ h(e, {})
+	}) : /* @__PURE__ */ g(l, {
+		variant: b,
+		className: p("h-auto font-normal justify-start px-3 py-2 text-left", _),
+		children: [E || D ? /* @__PURE__ */ h(t, { isPending: D }) : /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h(e, {}), /* @__PURE__ */ h("p", {
+			className: "text-sm font-medium",
+			children: w.auth.account
+		})] }), /* @__PURE__ */ h(o, { className: "ml-auto size-3.5" })]
+	}), /* @__PURE__ */ g(u.Popover, {
+		placement: v,
+		className: "min-w-40 md:min-w-56 max-w-[48svw]",
+		children: [E && /* @__PURE__ */ h("div", {
+			className: "px-3 pt-3 pb-1",
+			children: /* @__PURE__ */ h(t, {})
+		}), /* @__PURE__ */ h(u.Menu, { children: E ? /* @__PURE__ */ g(m, { children: [
+			/* @__PURE__ */ g(u.Item, {
+				textValue: w.settings.settings,
+				href: `${S.settings}/${C.settings.account}`,
+				children: [/* @__PURE__ */ h(s, { className: "text-muted" }), /* @__PURE__ */ h(d, { children: w.settings.settings })]
+			}),
+			O,
+			/* @__PURE__ */ h(f, {}),
+			/* @__PURE__ */ g(u.Item, {
+				textValue: w.auth.signOut,
+				href: `${S.auth}/${C.auth.signOut}`,
+				children: [/* @__PURE__ */ h(i, { className: "text-muted" }), /* @__PURE__ */ h(d, { children: w.auth.signOut })]
+			})
+		] }) : /* @__PURE__ */ g(m, { children: [
+			/* @__PURE__ */ g(u.Item, {
+				textValue: w.auth.signIn,
+				href: `${S.auth}/${C.auth.signIn}`,
+				children: [/* @__PURE__ */ h(a, { className: "text-muted" }), /* @__PURE__ */ h(d, { children: w.auth.signIn })]
+			}),
+			/* @__PURE__ */ g(u.Item, {
+				textValue: w.auth.signUp,
+				href: `${S.auth}/${C.auth.signUp}`,
+				children: [/* @__PURE__ */ h(c, { className: "text-muted" }), /* @__PURE__ */ h(d, { children: w.auth.signUp })]
+			}),
+			O
+		] }) })]
+	})] });
+}
+//#endregion
+export { _ as UserButton };