@better-auth-ui/heroui 1.6.7 → 1.6.9

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

@@ -1,212 +1,98 @@
-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 { 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 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) => {
-			W(""), K(""), b.danger(e.error?.message || e.message), H();
-		},
-		onSuccess: () => {
-			P?.requireEmailVerification ? (b.success(F.auth.verifyYourEmail), B({ to: `${N.auth}/${z.auth.signIn}` })) : B({ to: L });
-		}
-	}), [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 (P?.confirmPassword && U !== G) {
-			b.danger(F.auth.passwordsDoNotMatch), W(""), K("");
-			return;
-		}
-		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: U,
-			...a,
-			fetchOptions: V
-		});
-	}, $ = 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__ */ C(u.Header, { children: /* @__PURE__ */ C(u.Title, {
-				className: "text-xl font-semibold mb-1",
-				children: F.auth.signUp
-			}) }),
-			/* @__PURE__ */ w(u.Content, {
-				className: "gap-4",
-				children: [
-					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: [
-							P.name !== !1 && /* @__PURE__ */ w(v, {
-								name: "name",
-								type: "text",
-								autoComplete: "name",
-								isDisabled: Z,
-								children: [
-									/* @__PURE__ */ C(h, { children: F.auth.name }),
-									/* @__PURE__ */ C(p, {
-										placeholder: F.auth.namePlaceholder,
-										required: !0,
-										variant: k === "transparent" ? "primary" : "secondary"
-									}),
-									/* @__PURE__ */ C(f, {})
-								]
-							}),
-							/* @__PURE__ */ w(v, {
-								name: "email",
-								type: "email",
-								autoComplete: "email",
-								isDisabled: Z,
-								children: [
-									/* @__PURE__ */ C(h, { children: F.auth.email }),
-									/* @__PURE__ */ C(p, {
-										placeholder: F.auth.emailPlaceholder,
-										required: !0,
-										variant: k === "transparent" ? "primary" : "secondary"
-									}),
-									/* @__PURE__ */ C(f, {})
-								]
-							}),
-							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: Z,
-								value: U,
-								onChange: W,
-								children: [
-									/* @__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__ */ C(m.Suffix, {
-											className: "px-0",
-											children: /* @__PURE__ */ C(l, {
-												isIconOnly: !0,
-												"aria-label": Y ? F.auth.hidePassword : F.auth.showPassword,
-												size: "sm",
-												variant: "ghost",
-												onPress: () => ne(!Y),
-												isDisabled: Z,
-												children: C(Y ? c : s, {})
-											})
-										})]
-									}),
-									/* @__PURE__ */ C(f, {})
-								]
-							}),
-							P?.confirmPassword && /* @__PURE__ */ w(v, {
-								minLength: P?.minPasswordLength,
-								maxLength: P?.maxPasswordLength,
-								name: "confirmPassword",
-								autoComplete: "new-password",
-								isDisabled: Z,
-								value: G,
-								onChange: K,
-								children: [
-									/* @__PURE__ */ C(h, { children: F.auth.confirmPassword }),
-									/* @__PURE__ */ w(m, {
-										variant: k === "transparent" ? "primary" : "secondary",
-										children: [/* @__PURE__ */ C(m.Input, {
-											name: "confirmPassword",
-											placeholder: F.auth.confirmPasswordPlaceholder,
-											type: X ? "text" : "password",
-											required: !0
-										}), /* @__PURE__ */ C(m.Suffix, {
-											className: "px-0",
-											children: /* @__PURE__ */ C(l, {
-												isIconOnly: !0,
-												"aria-label": X ? F.auth.hidePassword : F.auth.showPassword,
-												size: "sm",
-												variant: "ghost",
-												onPress: () => re(!X),
-												isDisabled: Z,
-												children: C(X ? c : s, {})
-											})
-										})]
-									}),
-									/* @__PURE__ */ C(f, {})
-								]
-							}),
-							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__ */ w(l, {
-									type: "submit",
-									className: "w-full",
-									isPending: Z,
-									children: [J && /* @__PURE__ */ C(_, {
-										color: "current",
-										size: "sm"
-									}), F.auth.signUp]
-								}), I.flatMap((e) => e.authButtons?.map((t, n) => /* @__PURE__ */ C(t, { view: "signUp" }, `${e.id}-${n.toString()}`)))]
-							})
-						]
-					}),
-					O === "bottom" && /* @__PURE__ */ w(S, { children: [$ && /* @__PURE__ */ C(t, { children: F.auth.or }), !!R?.length && /* @__PURE__ */ C(n, { socialLayout: D })] })
-				]
-			}),
-			/* @__PURE__ */ C(u.Footer, {
-				className: "flex-col gap-3",
-				children: /* @__PURE__ */ w(d, {
-					className: "text-sm",
-					children: [
-						F.auth.alreadyHaveAnAccount,
-						" ",
-						/* @__PURE__ */ C(g, {
-							href: `${N.auth}/${z.auth.signIn}`,
-							className: "text-accent no-underline hover:underline decoration-accent-hover",
-							children: F.auth.signIn
-						})
-					]
-				})
-			})
-		]
-	});
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { authMutationKeys, parseAdditionalFieldValue } from "@better-auth-ui/core";
+import { useAuth, useFetchOptions, useSignUpEmail } from "@better-auth-ui/react";
+import { Eye, EyeSlash } from "@gravity-ui/icons";
+import { Button, Card, cn, Description, FieldError, Form, Input, InputGroup, Label, Link, Spinner, TextField, toast } from "@heroui/react";
+import { useIsMutating } from "@tanstack/react-query";
+import { useState } from "react";
+import { AdditionalField } from "./additional-field";
+import { FieldSeparator } from "./field-separator";
+import { ProviderButtons } from "./provider-buttons";
+/**
+ * Render a sign-up form with name, email, password (and optional confirm password) fields, optional social provider buttons, and password visibility controls.
+ *
+ * The component reflects request state by disabling inputs and showing a pending indicator during sign-up or social sign-in.
+ *
+ * @param className - Additional CSS classes applied to the outer card container
+ * @param socialLayout - Social layout to apply to the provider buttons component
+ * @param socialPosition - Position of social provider buttons relative to the form; `"top"` or `"bottom"` (default `"bottom"`)
+ * @returns The sign-up form React element
+ */
+export function SignUp({ className, socialLayout, socialPosition = "bottom", variant, ...props }) {
+    const { additionalFields, authClient, basePaths, emailAndPassword, localization, plugins, redirectTo, socialProviders, viewPaths, navigate } = useAuth();
+    const { fetchOptions, resetFetchOptions } = useFetchOptions();
+    const [password, setPassword] = useState("");
+    const [confirmPassword, setConfirmPassword] = useState("");
+    const { mutate: signUpEmail, isPending: signUpEmailPending } = useSignUpEmail(authClient, {
+        onError: (error) => {
+            setPassword("");
+            setConfirmPassword("");
+            toast.danger(error.error?.message || error.message);
+            resetFetchOptions();
+        },
+        onSuccess: () => {
+            if (emailAndPassword?.requireEmailVerification) {
+                toast.success(localization.auth.verifyYourEmail);
+                navigate({ to: `${basePaths.auth}/${viewPaths.auth.signIn}` });
+            }
+            else {
+                navigate({ to: redirectTo });
+            }
+        }
+    });
+    const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+    const [isConfirmPasswordVisible, setIsConfirmPasswordVisible] = useState(false);
+    const signInMutating = useIsMutating({
+        mutationKey: authMutationKeys.signIn.all
+    });
+    const signUpMutating = useIsMutating({
+        mutationKey: authMutationKeys.signUp.all
+    });
+    const isPending = signInMutating + signUpMutating > 0;
+    const Captcha = plugins.find((plugin) => plugin.captchaComponent)?.captchaComponent;
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        const formData = new FormData(e.currentTarget);
+        // `emailAndPassword.name === false` hides the name field and submits "".
+        const name = formData.get("name") ?? "";
+        const email = formData.get("email");
+        if (emailAndPassword?.confirmPassword && password !== confirmPassword) {
+            toast.danger(localization.auth.passwordsDoNotMatch);
+            setPassword("");
+            setConfirmPassword("");
+            return;
+        }
+        const additionalFieldValues = {};
+        for (const field of additionalFields ?? []) {
+            if (!field.signUp || field.readOnly)
+                continue;
+            const value = parseAdditionalFieldValue(field, formData.get(field.name));
+            if (field.validate) {
+                try {
+                    await field.validate(value);
+                }
+                catch (error) {
+                    toast.danger(error instanceof Error ? error.message : String(error));
+                    return;
+                }
+            }
+            if (value !== undefined) {
+                additionalFieldValues[field.name] = value;
+            }
+        }
+        signUpEmail({
+            name,
+            email,
+            password,
+            ...additionalFieldValues,
+            fetchOptions
+        });
+    };
+    const showSeparator = emailAndPassword?.enabled && !!socialProviders?.length;
+    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.signUp }) }), _jsxs(Card.Content, { className: "gap-4", children: [socialPosition === "top" && (_jsxs(_Fragment, { children: [!!socialProviders?.length && (_jsx(ProviderButtons, { socialLayout: socialLayout })), showSeparator && (_jsx(FieldSeparator, { children: localization.auth.or }))] })), emailAndPassword?.enabled && (_jsxs(Form, { onSubmit: handleSubmit, className: "flex flex-col gap-4", children: [emailAndPassword.name !== false && (_jsxs(TextField, { name: "name", type: "text", autoComplete: "name", isDisabled: isPending, children: [_jsx(Label, { children: localization.auth.name }), _jsx(Input, { placeholder: localization.auth.namePlaceholder, required: true, variant: variant === "transparent" ? "primary" : "secondary" }), _jsx(FieldError, {})] })), _jsxs(TextField, { name: "email", type: "email", autoComplete: "email", isDisabled: isPending, children: [_jsx(Label, { children: localization.auth.email }), _jsx(Input, { placeholder: localization.auth.emailPlaceholder, required: true, variant: variant === "transparent" ? "primary" : "secondary" }), _jsx(FieldError, {})] }), additionalFields?.map((field) => field.signUp === "above" && (_jsx(AdditionalField, { name: field.name, field: field, isPending: isPending, variant: variant }, field.name))), _jsxs(TextField, { minLength: emailAndPassword?.minPasswordLength, maxLength: emailAndPassword?.maxPasswordLength, name: "password", autoComplete: "new-password", isDisabled: isPending, value: password, onChange: setPassword, children: [_jsx(Label, { children: localization.auth.password }), _jsxs(InputGroup, { variant: variant === "transparent" ? "primary" : "secondary", children: [_jsx(InputGroup.Input, { placeholder: localization.auth.passwordPlaceholder, type: isPasswordVisible ? "text" : "password", name: "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, value: confirmPassword, onChange: setConfirmPassword, children: [_jsx(Label, { children: localization.auth.confirmPassword }), _jsxs(InputGroup, { variant: variant === "transparent" ? "primary" : "secondary", children: [_jsx(InputGroup.Input, { name: "confirmPassword", placeholder: localization.auth.confirmPasswordPlaceholder, type: isConfirmPasswordVisible ? "text" : "password", required: true }), _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, {})] })), additionalFields?.map((field) => field.signUp &&
+                                field.signUp !== "above" && (_jsx(AdditionalField, { name: field.name, field: field, isPending: isPending, variant: variant }, field.name))), Captcha && _jsx("div", { className: "flex justify-center", children: Captcha }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs(Button, { type: "submit", className: "w-full", isPending: isPending, children: [signUpEmailPending && _jsx(Spinner, { color: "current", size: "sm" }), localization.auth.signUp] }), plugins.flatMap((plugin) => plugin.authButtons?.map((AuthButton, index) => (_jsx(AuthButton, { view: "signUp" }, `${plugin.id}-${index.toString()}`))))] })] })), socialPosition === "bottom" && (_jsxs(_Fragment, { children: [showSeparator && (_jsx(FieldSeparator, { children: localization.auth.or })), !!socialProviders?.length && (_jsx(ProviderButtons, { socialLayout: socialLayout }))] }))] }), _jsx(Card.Footer, { className: "flex-col gap-3", children: _jsxs(Description, { className: "text-sm", children: [localization.auth.alreadyHaveAnAccount, " ", _jsx(Link, { href: `${basePaths.auth}/${viewPaths.auth.signIn}`, className: "text-accent no-underline hover:underline decoration-accent-hover", children: localization.auth.signIn })] }) })] }));
 }
-//#endregion
-export { E as SignUp };

package/dist/components/auth/theme/appearance.d.ts

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

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

@@ -1,72 +1,24 @@
-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" })]
-						})
-					})
-				]
-			})
-		})] })
-	})] });
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ThemePreviewDark, ThemePreviewLight, ThemePreviewSystem, useAuthPlugin } from "@better-auth-ui/react";
+import { Display, Moon, Sun } from "@gravity-ui/icons";
+import { Card, cn, Label, Radio, RadioGroup, useIsHydrated } from "@heroui/react";
+import { themePlugin } from "../../../lib/auth/theme-plugin";
+/**
+ * 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. Theme options
+ * are conditionally shown based on the `themes` array provided via the theme plugin.
+ */
+export function Appearance({ className, variant, ...props }) {
+    const { useTheme, localization } = useAuthPlugin(themePlugin);
+    const { theme, setTheme, themes = [] } = useTheme();
+    const hydrated = useIsHydrated();
+    return (_jsxs("div", { children: [_jsx("h2", { className: cn("text-sm font-semibold mb-3"), children: localization.appearance }), _jsx(Card, { className: cn("p-4 gap-4", className), variant: variant, ...props, children: _jsxs(Card.Content, { children: [_jsx(Label, { children: localization.theme }), _jsx(RadioGroup, { variant: variant === "transparent" ? "secondary" : "primary", value: hydrated ? theme : "", onChange: setTheme, isDisabled: !hydrated || !theme, children: _jsxs("div", { className: "grid gap-3 grid-cols-2 sm:grid-cols-3", children: [themes.includes("system") && (_jsx(Radio, { value: "system", className: cn("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", variant === "transparent"
+                                            ? "bg-surface"
+                                            : "bg-surface-secondary"), children: _jsxs(Radio.Content, { className: "gap-2", children: [_jsxs("div", { className: "flex gap-2 justify-between", children: [_jsxs(Label, { className: "flex gap-2 items-center", children: [_jsx(Display, { className: "text-muted" }), localization.system] }), _jsx(Radio.Control, { children: _jsx(Radio.Indicator, {}) })] }), _jsx(ThemePreviewSystem, { className: "w-full" })] }) })), themes.includes("light") && (_jsx(Radio, { value: "light", className: cn("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", variant === "transparent"
+                                            ? "bg-surface"
+                                            : "bg-surface-secondary"), children: _jsxs(Radio.Content, { className: "gap-2", children: [_jsxs("div", { className: "flex gap-2 justify-between", children: [_jsxs(Label, { className: "flex gap-2 items-center", children: [_jsx(Sun, { className: "text-muted" }), localization.light] }), _jsx(Radio.Control, { children: _jsx(Radio.Indicator, {}) })] }), _jsx(ThemePreviewLight, { className: "w-full" })] }) })), themes.includes("dark") && (_jsx(Radio, { value: "dark", className: cn("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", variant === "transparent"
+                                            ? "bg-surface"
+                                            : "bg-surface-secondary"), children: _jsxs(Radio.Content, { className: "gap-2", children: [_jsxs("div", { className: "flex gap-2 justify-between", children: [_jsxs(Label, { className: "flex gap-2 items-center", children: [_jsx(Moon, { className: "text-muted" }), localization.dark] }), _jsx(Radio.Control, { children: _jsx(Radio.Indicator, {}) })] }), _jsx(ThemePreviewDark, { className: "w-full" })] }) }))] }) })] }) })] }));
 }
-//#endregion
-export { g as Appearance };

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

@@ -1,62 +1,57 @@
-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, Palette as i, Sun as a } from "@gravity-ui/icons";
-import { Dropdown as o, Label as s, Tabs as c } from "@heroui/react";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
-//#region src/components/auth/theme/theme-toggle-item.tsx
-var d = "[role=\"tab\"][aria-selected=\"true\"]";
-function f() {
-	let { useTheme: f, localization: p } = t(e), { theme: m, setTheme: h, themes: g = [] } = f();
-	return /* @__PURE__ */ u(o.Item, {
-		className: "py-1 pe-2",
-		onFocus: (e) => {
-			e.target === e.currentTarget && e.currentTarget.querySelector(d)?.focus({ preventScroll: !0 });
-		},
-		shouldCloseOnSelect: !1,
-		children: [
-			/* @__PURE__ */ l(i, { className: "text-muted" }),
-			/* @__PURE__ */ l(s, { children: p.theme }),
-			/* @__PURE__ */ l(c, {
-				className: "ml-auto",
-				selectedKey: m,
-				onSelectionChange: (e) => h(e),
-				children: /* @__PURE__ */ l(c.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__ */ u(c.List, {
-						"aria-label": p.theme,
-						className: "*:h-5 *:w-5 *:p-0",
-						children: [
-							g.includes("system") && /* @__PURE__ */ u(c.Tab, {
-								id: "system",
-								"aria-label": p.system,
-								children: [/* @__PURE__ */ l(n, { className: "size-3" }), /* @__PURE__ */ l(c.Indicator, {})]
-							}),
-							g.includes("light") && /* @__PURE__ */ u(c.Tab, {
-								id: "light",
-								"aria-label": p.light,
-								children: [/* @__PURE__ */ l(a, { className: "size-3" }), /* @__PURE__ */ l(c.Indicator, {})]
-							}),
-							g.includes("dark") && /* @__PURE__ */ u(c.Tab, {
-								id: "dark",
-								"aria-label": p.dark,
-								children: [/* @__PURE__ */ l(r, { className: "size-3" }), /* @__PURE__ */ l(c.Indicator, {})]
-							})
-						]
-					})
-				})
-			})
-		]
-	});
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAuthPlugin } from "@better-auth-ui/react";
+import { Display, Moon, Palette, Sun } from "@gravity-ui/icons";
+import { Dropdown, Label, Tabs } from "@heroui/react";
+import { themePlugin } from "../../../lib/auth/theme-plugin";
+const ACTIVE_TAB_SELECTOR = '[role="tab"][aria-selected="true"]';
+/**
+ * Theme toggle dropdown item used inside `UserButton`. Callers are responsible
+ * for ensuring theming is configured before rendering this component.
+ */
+export function ThemeToggleItem() {
+    const { useTheme, localization } = useAuthPlugin(themePlugin);
+    const { theme, setTheme, themes = [] } = useTheme();
+    // The Tabs aren't part of the menu's keyboard-navigation list, so arrow-key
+    // nav can't reach them on its own. When the wrapper menu item receives focus
+    // we delegate focus to the active Tab so the user can switch themes with the
+    // Left/Right arrows. React's synthetic `onFocus` bubbles (it's wired to
+    // `focusin`), so we must guard against child-originated events: without the
+    // `target === currentTarget` check, an arrow-key focus move between tabs
+    // bubbles up here and the still-stale `aria-selected="true"` lookup yanks
+    // focus back to the previously selected tab.
+    const focusActiveTab = (event) => {
+        if (event.target !== event.currentTarget)
+            return;
+        const activeTab = event.currentTarget.querySelector(ACTIVE_TAB_SELECTOR);
+        activeTab?.focus({ preventScroll: true });
+    };
+    // Up/Down on a Tab escapes back to the previous/next sibling menu item so
+    // users can keep navigating the menu with the arrow keys after they've
+    // entered the Tabs.
+    const handleTabsKeyDown = (event) => {
+        if (event.key !== "ArrowUp" && event.key !== "ArrowDown")
+            return;
+        const target = event.target;
+        if (target.getAttribute("role") !== "tab")
+            return;
+        const wrapper = target.closest('[role="menuitem"]');
+        const menu = wrapper?.closest('[role="menu"]');
+        if (!wrapper || !menu)
+            return;
+        const items = Array.from(menu.querySelectorAll('[role="menuitem"]:not([data-disabled])'));
+        const currentIndex = items.indexOf(wrapper);
+        if (currentIndex === -1)
+            return;
+        const nextIndex = event.key === "ArrowDown" ? currentIndex + 1 : currentIndex - 1;
+        const next = items[nextIndex];
+        if (!next)
+            return;
+        event.preventDefault();
+        next.focus();
+    };
+    return (_jsxs(Dropdown.Item, { className: "py-1 pe-2", onFocus: focusActiveTab, 
+        // Without `shouldCloseOnSelect={false}` the menu auto-closes after the
+        // user changes themes, because clicking on a Tab bubbles up as a
+        // menu-item activation.
+        shouldCloseOnSelect: false, children: [_jsx(Palette, { className: "text-muted" }), _jsx(Label, { children: localization.theme }), _jsx(Tabs, { className: "ml-auto", selectedKey: theme, onSelectionChange: (key) => setTheme(key), children: _jsx(Tabs.ListContainer, { onKeyDown: handleTabsKeyDown, children: _jsxs(Tabs.List, { "aria-label": localization.theme, className: "*:h-5 *:w-5 *:p-0", children: [themes.includes("system") && (_jsxs(Tabs.Tab, { id: "system", "aria-label": localization.system, children: [_jsx(Display, { className: "size-3" }), _jsx(Tabs.Indicator, {})] })), themes.includes("light") && (_jsxs(Tabs.Tab, { id: "light", "aria-label": localization.light, children: [_jsx(Sun, { className: "size-3" }), _jsx(Tabs.Indicator, {})] })), themes.includes("dark") && (_jsxs(Tabs.Tab, { id: "dark", "aria-label": localization.dark, children: [_jsx(Moon, { className: "size-3" }), _jsx(Tabs.Indicator, {})] }))] }) }) })] }));
 }
-//#endregion
-export { f as ThemeToggleItem };

package/dist/components/auth/user/user-avatar.d.ts

@@ -1,12 +1,12 @@
-import { AvatarProps } from '@heroui/react';
-import { User } from 'better-auth';
-import { ReactNode } from 'react';
+import { type AvatarProps } from "@heroui/react";
+import type { User } from "better-auth";
+import type { ReactNode } from "react";
 export type UserAvatarProps = {
     className?: string;
     fallback?: ReactNode;
     isPending?: boolean;
     /** @remarks `User` */
-    user?: User & {
+    user?: Partial<User> & {
         username?: string | null;
         displayUsername?: string | null;
     };