@better-auth-ui/heroui 1.6.8 → 1.6.9

package/dist/components/auth/field-separator.js

@@ -1,18 +1,5 @@
-import { Separator as e } from "@heroui/react";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-//#region src/components/auth/field-separator.tsx
-function r({ children: r }) {
-	return /* @__PURE__ */ n("div", {
-		className: "flex items-center gap-4",
-		children: [
-			/* @__PURE__ */ t(e, { className: "flex-1" }),
-			/* @__PURE__ */ t("p", {
-				className: "text-xs text-muted shrink-0",
-				children: r
-			}),
-			/* @__PURE__ */ t(e, { className: "flex-1" })
-		]
-	});
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Separator } from "@heroui/react";
+export function FieldSeparator({ children }) {
+    return (_jsxs("div", { className: "flex items-center gap-4", children: [_jsx(Separator, { className: "flex-1" }), _jsx("p", { className: "text-xs text-muted shrink-0", children: children }), _jsx(Separator, { className: "flex-1" })] }));
 }
-//#endregion
-export { r as FieldSeparator };

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

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

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

@@ -1,89 +1,37 @@
-import { useAuth as e, useFetchOptions as t, useRequestPasswordReset as n } from "@better-auth-ui/react";
-import { Button as r, Card as i, Description as a, FieldError as o, Form as s, Input as c, Label as l, Link 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/auth/forgot-password.tsx
-function _({ className: _, variant: v, ...y }) {
-	let { authClient: b, basePaths: x, localization: S, viewPaths: C, navigate: w, plugins: T } = e(), { fetchOptions: E, resetFetchOptions: D } = t(), { mutate: O, isPending: k } = n(b, {
-		onError: (e) => {
-			m.danger(e.error?.message || e.message), D();
-		},
-		onSuccess: () => {
-			m.success(S.auth.passwordResetEmailSent), w({ to: `${x.auth}/${C.auth.signIn}` });
-		}
-	});
-	function A(e) {
-		e.preventDefault(), O({
-			email: new FormData(e.currentTarget).get("email"),
-			fetchOptions: E
-		});
-	}
-	let j = T.find((e) => e.captchaComponent)?.captchaComponent;
-	return /* @__PURE__ */ g(i, {
-		className: p("w-full max-w-sm gap-4 md:p-6", _),
-		variant: v,
-		...y,
-		children: [
-			/* @__PURE__ */ h(i.Header, { children: /* @__PURE__ */ h(i.Title, {
-				className: "text-xl font-semibold mb-1",
-				children: S.auth.forgotPassword
-			}) }),
-			/* @__PURE__ */ h(i.Content, {
-				className: "gap-4",
-				children: /* @__PURE__ */ g(s, {
-					onSubmit: A,
-					className: "flex flex-col gap-4",
-					children: [
-						/* @__PURE__ */ g(f, {
-							name: "email",
-							type: "email",
-							autoComplete: "email",
-							isDisabled: k,
-							children: [
-								/* @__PURE__ */ h(l, { children: S.auth.email }),
-								/* @__PURE__ */ h(c, {
-									placeholder: S.auth.emailPlaceholder,
-									required: !0,
-									variant: v === "transparent" ? "primary" : "secondary"
-								}),
-								/* @__PURE__ */ h(o, {})
-							]
-						}),
-						j && /* @__PURE__ */ h("div", {
-							className: "flex justify-center",
-							children: j
-						}),
-						/* @__PURE__ */ h("div", {
-							className: "flex flex-col gap-3",
-							children: /* @__PURE__ */ g(r, {
-								type: "submit",
-								className: "w-full",
-								isPending: k,
-								children: [k && /* @__PURE__ */ h(d, {
-									color: "current",
-									size: "sm"
-								}), S.auth.sendResetLink]
-							})
-						})
-					]
-				})
-			}),
-			/* @__PURE__ */ h(i.Footer, {
-				className: "flex-col gap-3",
-				children: /* @__PURE__ */ g(a, {
-					className: "text-sm",
-					children: [
-						S.auth.rememberYourPassword,
-						" ",
-						/* @__PURE__ */ h(u, {
-							href: `${x.auth}/${C.auth.signIn}`,
-							className: "text-accent no-underline hover:underline decoration-accent-hover",
-							children: S.auth.signIn
-						})
-					]
-				})
-			})
-		]
-	});
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAuth, useFetchOptions, useRequestPasswordReset } from "@better-auth-ui/react";
+import { Button, Card, cn, Description, FieldError, Form, Input, Label, Link, Spinner, TextField, toast } from "@heroui/react";
+/**
+ * Render a card-based "Forgot Password" form that sends a password-reset email.
+ *
+ * The form displays an email input, submit button, and a link back to sign-in.
+ * Toasts are displayed on success or error via the `useRequestPasswordReset` hook.
+ *
+ * @param className - Optional additional CSS class names applied to the card
+ * @returns The forgot-password form UI as a JSX element
+ */
+export function ForgotPassword({ className, variant, ...props }) {
+    const { authClient, baseURL, basePaths, localization, viewPaths, navigate, plugins } = useAuth();
+    const { fetchOptions, resetFetchOptions } = useFetchOptions();
+    const { mutate: requestPasswordReset, isPending } = useRequestPasswordReset(authClient, {
+        onError: (error) => {
+            toast.danger(error.error?.message || error.message);
+            resetFetchOptions();
+        },
+        onSuccess: () => {
+            toast.success(localization.auth.passwordResetEmailSent);
+            navigate({ to: `${basePaths.auth}/${viewPaths.auth.signIn}` });
+        }
+    });
+    function handleSubmit(e) {
+        e.preventDefault();
+        const formData = new FormData(e.currentTarget);
+        requestPasswordReset({
+            email: formData.get("email"),
+            redirectTo: `${baseURL}${basePaths.auth}/${viewPaths.auth.resetPassword}`,
+            fetchOptions
+        });
+    }
+    const Captcha = plugins.find((plugin) => plugin.captchaComponent)?.captchaComponent;
+    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.forgotPassword }) }), _jsx(Card.Content, { className: "gap-4", children: _jsxs(Form, { onSubmit: handleSubmit, className: "flex flex-col gap-4", children: [_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, {})] }), Captcha && _jsx("div", { className: "flex justify-center", children: Captcha }), _jsx("div", { className: "flex flex-col gap-3", children: _jsxs(Button, { type: "submit", className: "w-full", isPending: isPending, children: [isPending && _jsx(Spinner, { color: "current", size: "sm" }), localization.auth.sendResetLink] }) })] }) }), _jsx(Card.Footer, { className: "flex-col gap-3", children: _jsxs(Description, { className: "text-sm", children: [localization.auth.rememberYourPassword, " ", _jsx(Link, { href: `${basePaths.auth}/${viewPaths.auth.signIn}`, className: "text-accent no-underline hover:underline decoration-accent-hover", children: localization.auth.signIn })] }) })] }));
 }
-//#endregion
-export { _ as ForgotPassword };

package/dist/components/auth/magic-link/magic-link-button.d.ts

@@ -1,4 +1,4 @@
-import { AuthView } from '@better-auth-ui/core';
+import { type AuthView } from "@better-auth-ui/core";
 export type MagicLinkButtonProps = {
     /** @remarks `AuthView` */
     view?: AuthView;

package/dist/components/auth/magic-link/magic-link-button.js

@@ -1,20 +1,34 @@
-import { magicLinkPlugin as e } from "../../../lib/auth/magic-link-plugin.js";
-import { authMutationKeys as t } from "@better-auth-ui/core";
-import { useAuth as n, useAuthPlugin as r } from "@better-auth-ui/react";
-import { Envelope as i, Lock as a } from "@gravity-ui/icons";
-import { Link as o, cn as s } from "@heroui/react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
-import { useIsMutating as u } from "@tanstack/react-query";
-import { buttonVariants as d } from "@heroui/styles";
-//#region src/components/auth/magic-link/magic-link-button.tsx
-function f({ view: f }) {
-	let { basePaths: p, emailAndPassword: m, viewPaths: h, localization: g } = n(), _ = u({ mutationKey: t.signIn.all }) + u({ mutationKey: t.signUp.all }) > 0, { localization: v, viewPaths: y } = r(e), b = f === "magicLink";
-	return b && !m?.enabled ? null : /* @__PURE__ */ l(o, {
-		href: `${p.auth}/${b ? h.auth.signIn : y.auth.magicLink}`,
-		isDisabled: _,
-		className: s(d({ variant: "tertiary" }), "w-full gap-2", _ && "status-disabled"),
-		children: [c(b ? a : i, {}), g.auth.continueWith.replace("{{provider}}", b ? g.auth.password : v.magicLink)]
-	});
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { authMutationKeys } from "@better-auth-ui/core";
+import { useAuth, useAuthPlugin } from "@better-auth-ui/react";
+import { Envelope, Lock } from "@gravity-ui/icons";
+import { cn, Link } from "@heroui/react";
+import { buttonVariants } from "@heroui/styles";
+import { useIsMutating } from "@tanstack/react-query";
+import { magicLinkPlugin } from "../../../lib/auth/magic-link-plugin";
+/**
+ * Toggle button between the password sign-in and magic-link routes.
+ *
+ * @param view - Current auth view. On `"magicLink"` this links back to password sign-in.
+ */
+export function MagicLinkButton({ view }) {
+    const { basePaths, emailAndPassword, viewPaths, localization } = useAuth();
+    const signInMutating = useIsMutating({
+        mutationKey: authMutationKeys.signIn.all
+    });
+    const signUpMutating = useIsMutating({
+        mutationKey: authMutationKeys.signUp.all
+    });
+    const isPending = signInMutating + signUpMutating > 0;
+    const { localization: magicLinkLocalization, viewPaths: magicLinkViewPaths } = useAuthPlugin(magicLinkPlugin);
+    const isMagicLinkView = view === "magicLink";
+    // On the magic-link view this button switches back to password sign-in.
+    // With password auth disabled there's nowhere to switch to, so hide it.
+    // (Other views — e.g. a phone-number plugin's surface — still get a
+    // "Continue with Magic Link" link.)
+    if (isMagicLinkView && !emailAndPassword?.enabled)
+        return null;
+    return (_jsxs(Link, { href: `${basePaths.auth}/${isMagicLinkView ? viewPaths.auth.signIn : magicLinkViewPaths.auth.magicLink}`, isDisabled: isPending, className: cn(buttonVariants({ variant: "tertiary" }), "w-full gap-2", isPending && "status-disabled"), children: [isMagicLinkView ? _jsx(Lock, {}) : _jsx(Envelope, {}), localization.auth.continueWith.replace("{{provider}}", isMagicLinkView
+                ? localization.auth.password
+                : magicLinkLocalization.magicLink)] }));
 }
-//#endregion
-export { f as MagicLinkButton };

package/dist/components/auth/magic-link/magic-link.d.ts

@@ -1,5 +1,5 @@
-import { CardProps } from '@heroui/react';
-import { SocialLayout } from '../provider-buttons';
+import { type CardProps } from "@heroui/react";
+import { type SocialLayout } from "../provider-buttons";
 export type MagicLinkProps = {
     className?: string;
     socialLayout?: SocialLayout;

package/dist/components/auth/magic-link/magic-link.js

@@ -1,87 +1,40 @@
-import { FieldSeparator as e } from "../field-separator.js";
-import { ProviderButtons as t } from "../provider-buttons.js";
-import { magicLinkPlugin as n } from "../../../lib/auth/magic-link-plugin.js";
-import { authMutationKeys as r } from "@better-auth-ui/core";
-import { useAuth as i, useAuthPlugin as a, useSignInMagicLink as o } from "@better-auth-ui/react";
-import { Button as s, Card as c, Description as l, FieldError as u, Form as d, Input as f, Label as p, Link as m, Spinner as h, TextField as g, cn as _, toast as v } from "@heroui/react";
-import { useState as y } from "react";
-import { Fragment as b, jsx as x, jsxs as S } from "react/jsx-runtime";
-import { useIsMutating as C } from "@tanstack/react-query";
-//#region src/components/auth/magic-link/magic-link.tsx
-function w({ className: w, socialLayout: T, socialPosition: E = "bottom", variant: D, ...O }) {
-	let { authClient: k, basePaths: A, baseURL: j, emailAndPassword: M, localization: N, plugins: P, redirectTo: F, socialProviders: I, viewPaths: L } = i(), { localization: R } = a(n), [z, B] = y(""), { mutate: V, isPending: H } = o(k, { onSuccess: () => {
-		B(""), v.success(R.magicLinkSent);
-	} }), U = C({ mutationKey: r.signIn.all }) + C({ mutationKey: r.signUp.all }) > 0, W = (e) => {
-		e.preventDefault(), V({
-			email: z,
-			callbackURL: `${j}${F}`
-		});
-	}, G = !!I?.length;
-	return /* @__PURE__ */ S(c, {
-		className: _("w-full max-w-sm gap-4 md:p-6", w),
-		variant: D,
-		...O,
-		children: [
-			/* @__PURE__ */ x(c.Header, { children: /* @__PURE__ */ x(c.Title, {
-				className: "text-xl font-semibold mb-1",
-				children: N.auth.signIn
-			}) }),
-			/* @__PURE__ */ S(c.Content, {
-				className: "gap-4",
-				children: [
-					E === "top" && /* @__PURE__ */ S(b, { children: [!!I?.length && /* @__PURE__ */ x(t, { socialLayout: T }), G && /* @__PURE__ */ x(e, { children: N.auth.or })] }),
-					/* @__PURE__ */ S(d, {
-						onSubmit: W,
-						className: "flex flex-col gap-4",
-						children: [/* @__PURE__ */ S(g, {
-							name: "email",
-							type: "email",
-							autoComplete: "email",
-							isDisabled: U,
-							value: z,
-							onChange: B,
-							children: [
-								/* @__PURE__ */ x(p, { children: N.auth.email }),
-								/* @__PURE__ */ x(f, {
-									placeholder: N.auth.emailPlaceholder,
-									required: !0,
-									variant: D === "transparent" ? "primary" : "secondary"
-								}),
-								/* @__PURE__ */ x(u, {})
-							]
-						}), /* @__PURE__ */ S("div", {
-							className: "flex flex-col gap-3",
-							children: [/* @__PURE__ */ S(s, {
-								type: "submit",
-								className: "w-full",
-								isPending: U,
-								children: [H && /* @__PURE__ */ x(h, {
-									color: "current",
-									size: "sm"
-								}), R.sendMagicLink]
-							}), P.flatMap((e) => (e.authButtons ?? []).map((t, n) => /* @__PURE__ */ x(t, { view: "magicLink" }, `${e.id}-${n.toString()}`)))]
-						})]
-					}),
-					E === "bottom" && /* @__PURE__ */ S(b, { children: [G && /* @__PURE__ */ x(e, { children: N.auth.or }), !!I?.length && /* @__PURE__ */ x(t, { socialLayout: T })] })
-				]
-			}),
-			M?.enabled && /* @__PURE__ */ x(c.Footer, {
-				className: "flex-col gap-3",
-				children: /* @__PURE__ */ S(l, {
-					className: "text-sm",
-					children: [
-						N.auth.needToCreateAnAccount,
-						" ",
-						/* @__PURE__ */ x(m, {
-							href: `${A.auth}/${L.auth.signUp}`,
-							className: "text-accent no-underline hover:underline decoration-accent-hover",
-							children: N.auth.signUp
-						})
-					]
-				})
-			})
-		]
-	});
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { authMutationKeys } from "@better-auth-ui/core";
+import { useAuth, useAuthPlugin, useSignInMagicLink } from "@better-auth-ui/react";
+import { Button, Card, cn, Description, FieldError, Form, Input, Label, Link, Spinner, TextField, toast } from "@heroui/react";
+import { useIsMutating } from "@tanstack/react-query";
+import { useState } from "react";
+import { magicLinkPlugin } from "../../../lib/auth/magic-link-plugin";
+import { FieldSeparator } from "../field-separator";
+import { ProviderButtons } from "../provider-buttons";
+/**
+ * Magic-link sign-in form.
+ *
+ * @param socialLayout - Provider button layout.
+ * @param socialPosition - `"top"` or `"bottom"`. Defaults to `"bottom"`.
+ * @param variant - Card variant.
+ */
+export function MagicLink({ className, socialLayout, socialPosition = "bottom", variant, ...props }) {
+    const { authClient, basePaths, baseURL, emailAndPassword, localization, plugins, redirectTo, socialProviders, viewPaths } = useAuth();
+    const { localization: magicLinkLocalization } = useAuthPlugin(magicLinkPlugin);
+    const [email, setEmail] = useState("");
+    const { mutate: signInMagicLink, isPending: signInMagicLinkPending } = useSignInMagicLink(authClient, {
+        onSuccess: () => {
+            setEmail("");
+            toast.success(magicLinkLocalization.magicLinkSent);
+        }
+    });
+    const signInMutating = useIsMutating({
+        mutationKey: authMutationKeys.signIn.all
+    });
+    const signUpMutating = useIsMutating({
+        mutationKey: authMutationKeys.signUp.all
+    });
+    const isPending = signInMutating + signUpMutating > 0;
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        signInMagicLink({ email, callbackURL: `${baseURL}${redirectTo}` });
+    };
+    const showSeparator = !!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.signIn }) }), _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 }))] })), _jsxs(Form, { onSubmit: handleSubmit, className: "flex flex-col gap-4", children: [_jsxs(TextField, { name: "email", type: "email", autoComplete: "email", isDisabled: isPending, value: email, onChange: setEmail, children: [_jsx(Label, { children: localization.auth.email }), _jsx(Input, { placeholder: localization.auth.emailPlaceholder, required: true, variant: variant === "transparent" ? "primary" : "secondary" }), _jsx(FieldError, {})] }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs(Button, { type: "submit", className: "w-full", isPending: isPending, children: [signInMagicLinkPending && _jsx(Spinner, { color: "current", size: "sm" }), magicLinkLocalization.sendMagicLink] }), plugins.flatMap((plugin) => (plugin.authButtons ?? []).map((AuthButton, index) => (_jsx(AuthButton, { view: "magicLink" }, `${plugin.id}-${index.toString()}`))))] })] }), socialPosition === "bottom" && (_jsxs(_Fragment, { children: [showSeparator && (_jsx(FieldSeparator, { children: localization.auth.or })), !!socialProviders?.length && (_jsx(ProviderButtons, { socialLayout: socialLayout }))] }))] }), emailAndPassword?.enabled && (_jsx(Card.Footer, { className: "flex-col gap-3", children: _jsxs(Description, { className: "text-sm", children: [localization.auth.needToCreateAnAccount, " ", _jsx(Link, { href: `${basePaths.auth}/${viewPaths.auth.signUp}`, className: "text-accent no-underline hover:underline decoration-accent-hover", children: localization.auth.signUp })] }) }))] }));
 }
-//#endregion
-export { w as MagicLink };

package/dist/components/auth/multi-session/manage-account.d.ts

@@ -1,4 +1,4 @@
-import { ListDeviceSession } from '@better-auth-ui/react';
+import { type ListDeviceSession } from "@better-auth-ui/react";
 export type ManageAccountProps = {
     deviceSession?: ListDeviceSession | null;
     isPending?: boolean;

package/dist/components/auth/multi-session/manage-account.js

@@ -1,49 +1,33 @@
-import { UserView as e } from "../user/user-view.js";
-import { multiSessionPlugin as t } from "../../../lib/auth/multi-session-plugin.js";
-import { useAuth as n, useAuthPlugin as r, useRevokeMultiSession as i, useSetActiveSession as a, useUser as o } from "@better-auth-ui/react";
-import { ArrowRightArrowLeft as s, ArrowRightFromSquare as c, Ellipsis as l } from "@gravity-ui/icons";
-import { Button as u, Dropdown as d, Spinner as f, toast as p } from "@heroui/react";
-import { jsx as m, jsxs as h } from "react/jsx-runtime";
-//#region src/components/auth/multi-session/manage-account.tsx
-function g({ deviceSession: g, isPending: _ }) {
-	let { authClient: v, localization: y } = n(), { localization: b } = r(t), { data: x } = o(v), { mutate: S, isPending: C } = a(v, { onSuccess: () => window.scrollTo({ top: 0 }) }), { mutate: w, isPending: T } = i(v, { onSuccess: () => p.success(y.settings.revokeSessionSuccess) }), E = g?.session.userId === x?.id, D = C || T;
-	return /* @__PURE__ */ h("div", {
-		className: "flex items-center justify-between gap-3",
-		children: [
-			/* @__PURE__ */ m(e, {
-				user: g?.user,
-				isPending: _,
-				size: "md"
-			}),
-			g && E && /* @__PURE__ */ h(u, {
-				className: "shrink-0",
-				variant: "outline",
-				size: "sm",
-				onPress: () => w({ sessionToken: g.session.token }),
-				isDisabled: D,
-				children: [T ? /* @__PURE__ */ m(f, {
-					color: "current",
-					size: "sm"
-				}) : /* @__PURE__ */ m(c, {}), y.auth.signOut]
-			}),
-			g && !E && /* @__PURE__ */ h(d, { children: [/* @__PURE__ */ m(u, {
-				isIconOnly: !0,
-				variant: "ghost",
-				className: "shrink-0",
-				size: "sm",
-				isDisabled: D,
-				children: /* @__PURE__ */ m(l, {})
-			}), /* @__PURE__ */ m(d.Popover, { children: /* @__PURE__ */ h(d.Menu, { children: [/* @__PURE__ */ h(d.Item, {
-				textValue: b.switchAccount,
-				onAction: () => S({ sessionToken: g.session.token }),
-				children: [/* @__PURE__ */ m(s, { className: "text-muted" }), b.switchAccount]
-			}), /* @__PURE__ */ h(d.Item, {
-				textValue: y.auth.signOut,
-				onAction: () => w({ sessionToken: g.session.token }),
-				children: [/* @__PURE__ */ m(c, { className: "text-muted" }), y.auth.signOut]
-			})] }) })] })
-		]
-	});
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAuth, useAuthPlugin, useRevokeMultiSession, useSetActiveSession, useUser } from "@better-auth-ui/react";
+import { ArrowRightArrowLeft, ArrowRightFromSquare, Ellipsis } from "@gravity-ui/icons";
+import { Button, Dropdown, Spinner, toast } from "@heroui/react";
+import { multiSessionPlugin } from "../../../lib/auth/multi-session-plugin";
+import { UserView } from "../user/user-view";
+/**
+ * Render a single account row with user info and a dropdown for switch/sign-out actions.
+ *
+ * Shows the user's avatar and info. A three-dot menu provides options to
+ * switch account (for non-active sessions) and sign out.
+ *
+ * @param deviceSession - The device session object containing session and user data
+ * @returns A JSX element containing the account row
+ */
+export function ManageAccount({ deviceSession, isPending }) {
+    const { authClient, localization } = useAuth();
+    const { localization: multiSessionLocalization } = useAuthPlugin(multiSessionPlugin);
+    const { data: user } = useUser(authClient);
+    const { mutate: setActiveSession, isPending: isSwitching } = useSetActiveSession(authClient, {
+        onSuccess: () => window.scrollTo({ top: 0 })
+    });
+    const { mutate: revokeSession, isPending: isRevoking } = useRevokeMultiSession(authClient, {
+        onSuccess: () => toast.success(localization.settings.revokeSessionSuccess)
+    });
+    const isActive = deviceSession?.session.userId === user?.id;
+    const isBusy = isSwitching || isRevoking;
+    return (_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx(UserView, { user: deviceSession?.user, isPending: isPending, size: "md" }), deviceSession && isActive && (_jsxs(Button, { className: "shrink-0", variant: "outline", size: "sm", onPress: () => revokeSession({ sessionToken: deviceSession.session.token }), isDisabled: isBusy, children: [isRevoking ? (_jsx(Spinner, { color: "current", size: "sm" })) : (_jsx(ArrowRightFromSquare, {})), localization.auth.signOut] })), deviceSession && !isActive && (_jsxs(Dropdown, { children: [_jsx(Button, { isIconOnly: true, variant: "ghost", className: "shrink-0", size: "sm", isDisabled: isBusy, children: _jsx(Ellipsis, {}) }), _jsx(Dropdown.Popover, { children: _jsxs(Dropdown.Menu, { children: [_jsxs(Dropdown.Item, { textValue: multiSessionLocalization.switchAccount, onAction: () => setActiveSession({
+                                        sessionToken: deviceSession.session.token
+                                    }), children: [_jsx(ArrowRightArrowLeft, { className: "text-muted" }), multiSessionLocalization.switchAccount] }), _jsxs(Dropdown.Item, { textValue: localization.auth.signOut, onAction: () => revokeSession({
+                                        sessionToken: deviceSession.session.token
+                                    }), children: [_jsx(ArrowRightFromSquare, { className: "text-muted" }), localization.auth.signOut] })] }) })] }))] }));
 }
-//#endregion
-export { g as ManageAccount };

package/dist/components/auth/multi-session/manage-accounts.d.ts

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

package/dist/components/auth/multi-session/manage-accounts.js

@@ -1,34 +1,33 @@
-import { multiSessionPlugin as e } from "../../../lib/auth/multi-session-plugin.js";
-import { ManageAccount as t } from "./manage-account.js";
-import { useAuth as n, useAuthPlugin as r, useListDeviceSessions as i, useSession as a } from "@better-auth-ui/react";
-import { Card as o, cn as s } from "@heroui/react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
-//#region src/components/auth/multi-session/manage-accounts.tsx
-function u({ className: u, variant: d, ...f }) {
-	let { authClient: p } = n(), { localization: m } = r(e), { data: h } = a(p), { data: g, isPending: _ } = i(p), v = g?.filter((e) => e.session.id !== h?.session.id), y = [{
-		key: h?.session.id ?? "current",
-		deviceSession: _ ? null : h,
-		isPending: _
-	}, ...v?.map((e) => ({
-		key: e.session.id,
-		deviceSession: e,
-		isPending: !1
-	})) ?? []];
-	return /* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("h2", {
-		className: s("text-sm font-semibold mb-3"),
-		children: m.manageAccounts
-	}), /* @__PURE__ */ c(o, {
-		className: s(u),
-		variant: d,
-		...f,
-		children: /* @__PURE__ */ c(o.Content, {
-			className: "gap-0",
-			children: y.map((e, n) => /* @__PURE__ */ l("div", { children: [n > 0 && /* @__PURE__ */ c("div", { className: "border-b border-dashed -mx-4 md:-mx-6 my-4" }), /* @__PURE__ */ c(t, {
-				deviceSession: e.deviceSession,
-				isPending: e.isPending
-			})] }, e.key))
-		})
-	})] });
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAuth, useAuthPlugin, useListDeviceSessions, useSession } from "@better-auth-ui/react";
+import { Card, cn } from "@heroui/react";
+import { multiSessionPlugin } from "../../../lib/auth/multi-session-plugin";
+import { ManageAccount } from "./manage-account";
+/**
+ * Render a card that lists and manages all device sessions for the current user.
+ *
+ * Shows each session with user information and actions to switch to or revoke a session.
+ * When device session data is loading, a pending placeholder row is displayed.
+ *
+ * @returns A JSX element containing the accounts management card
+ */
+export function ManageAccounts({ className, variant, ...props }) {
+    const { authClient } = useAuth();
+    const { localization: multiSessionLocalization } = useAuthPlugin(multiSessionPlugin);
+    const { data: session } = useSession(authClient);
+    const { data: deviceSessions, isPending } = useListDeviceSessions(authClient);
+    const otherSessions = deviceSessions?.filter((deviceSession) => deviceSession.session.id !== session?.session.id);
+    const allRows = [
+        {
+            key: session?.session.id ?? "current",
+            deviceSession: !isPending ? session : null,
+            isPending
+        },
+        ...(otherSessions?.map((deviceSession) => ({
+            key: deviceSession.session.id,
+            deviceSession,
+            isPending: false
+        })) ?? [])
+    ];
+    return (_jsxs("div", { children: [_jsx("h2", { className: cn("text-sm font-semibold mb-3"), children: multiSessionLocalization.manageAccounts }), _jsx(Card, { className: cn(className), variant: variant, ...props, children: _jsx(Card.Content, { className: "gap-0", children: allRows.map((row, index) => (_jsxs("div", { children: [index > 0 && (_jsx("div", { className: "border-b border-dashed -mx-4 my-4" })), _jsx(ManageAccount, { deviceSession: row.deviceSession, isPending: row.isPending })] }, row.key))) }) })] }));
 }
-//#endregion
-export { u as ManageAccounts };

package/dist/components/auth/multi-session/switch-account-submenu-content.d.ts

@@ -7,4 +7,6 @@
  *
  * @returns The switch account submenu content as a JSX element
  */
-export declare function SwitchAccountSubmenuContent(): import("react/jsx-runtime").JSX.Element;
+export declare function SwitchAccountSubmenuContent({ hideSubtitle }: {
+    hideSubtitle?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/auth/multi-session/switch-account-submenu-content.js

@@ -1,28 +1,25 @@
-import { UserView as e } from "../user/user-view.js";
-import { SwitchAccountSubmenuItem as t } from "./switch-account-submenu-item.js";
-import { multiSessionPlugin as n } from "../../../lib/auth/multi-session-plugin.js";
-import { useAuth as r, useAuthPlugin as i, useListDeviceSessions as a, useSession as o } from "@better-auth-ui/react";
-import { Check as s, CirclePlus as c } from "@gravity-ui/icons";
-import { Dropdown as l, Label as u } from "@heroui/react";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
-//#region src/components/auth/multi-session/switch-account-submenu-content.tsx
-function p() {
-	let { authClient: p, basePaths: m, viewPaths: h } = r(), { localization: g } = i(n), { data: _ } = o(p), { data: v, isPending: y } = a(p);
-	return /* @__PURE__ */ d(l.Popover, {
-		className: "min-w-40 md:min-w-56 max-w-[48svw]",
-		children: /* @__PURE__ */ f(l.Menu, { children: [
-			/* @__PURE__ */ f(l.Item, {
-				className: "px-2",
-				children: [/* @__PURE__ */ d(e, { isPending: y }), !y && /* @__PURE__ */ d(s, { className: "ml-auto" })]
-			}),
-			v?.filter((e) => e.session.id !== _?.session?.id).map((e) => /* @__PURE__ */ d(t, { deviceSession: e }, e.session.id)),
-			/* @__PURE__ */ f(l.Item, {
-				textValue: g.addAccount,
-				href: `${m.auth}/${h.auth.signIn}`,
-				children: [/* @__PURE__ */ d(c, { className: "text-muted" }), /* @__PURE__ */ d(u, { children: g.addAccount })]
-			})
-		] })
-	});
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAuth, useAuthPlugin, useListDeviceSessions, useSession } from "@better-auth-ui/react";
+import { Check, CirclePlus } from "@gravity-ui/icons";
+import { Dropdown, Label } from "@heroui/react";
+import { multiSessionPlugin } from "../../../lib/auth/multi-session-plugin";
+import { UserView } from "../user/user-view";
+import { SwitchAccountSubmenuItem } from "./switch-account-submenu-item";
+/**
+ * Render the submenu content for switching between multiple authenticated sessions.
+ *
+ * Shows the current session with a checkmark, lists other device sessions that can be activated,
+ * and provides an option to add a new account. This component should be rendered inside a
+ * Dropdown.SubmenuTrigger to defer the useListDeviceSessions query until the submenu is opened.
+ *
+ * @returns The switch account submenu content as a JSX element
+ */
+export function SwitchAccountSubmenuContent({ hideSubtitle }) {
+    const { authClient, basePaths, viewPaths } = useAuth();
+    const { localization: multiSessionLocalization } = useAuthPlugin(multiSessionPlugin);
+    const { data: session } = useSession(authClient);
+    const { data: deviceSessions, isPending } = useListDeviceSessions(authClient);
+    return (_jsx(Dropdown.Popover, { className: "min-w-40 md:min-w-56 max-w-[48svw]", children: _jsxs(Dropdown.Menu, { children: [_jsxs(Dropdown.Item, { className: "px-2", children: [_jsx(UserView, { isPending: isPending, hideSubtitle: hideSubtitle }), !isPending && _jsx(Check, { className: "ml-auto" })] }), deviceSessions
+                    ?.filter((deviceSession) => deviceSession.session.id !== session?.session?.id)
+                    .map((deviceSession) => (_jsx(SwitchAccountSubmenuItem, { deviceSession: deviceSession, hideSubtitle: hideSubtitle }, deviceSession.session.id))), _jsxs(Dropdown.Item, { textValue: multiSessionLocalization.addAccount, href: `${basePaths.auth}/${viewPaths.auth.signIn}`, children: [_jsx(CirclePlus, { className: "text-muted" }), _jsx(Label, { children: multiSessionLocalization.addAccount })] })] }) }));
 }
-//#endregion
-export { p as SwitchAccountSubmenuContent };