@better-auth-ui/heroui 1.6.1 → 1.6.3

package/dist/components/settings/security/linked-accounts.js

@@ -1,42 +1,45 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useAuth, useListAccounts } from "@better-auth-ui/react";
-import { Card, cn, Skeleton, toast } from "@heroui/react";
-import { LinkedAccount } from "./linked-account";
-/**
- * Render a card showing linked social accounts and available social providers to link.
- *
- * Linked accounts (excluding the "credential" provider) are shown with an unlink control;
- * available providers are shown with a link control. Button states and labels reflect
- * ongoing link/unlink activity and use localization for provider-specific text.
- *
- * @returns A JSX element containing the linked accounts card
- */
-export function LinkedAccounts({ className, variant, ...props }) {
-    const { localization, socialProviders } = useAuth();
-    const { data: accounts, isPending } = useListAccounts({
-        throwOnError: (error) => {
-            if (error.error)
-                toast.danger(error.error.message);
-            return false;
-        }
-    });
-    const linkedAccounts = accounts?.filter((account) => account.providerId !== "credential");
-    const allRows = [
-        ...(linkedAccounts?.map((account) => ({
-            key: account.id,
-            account,
-            provider: account.providerId
-        })) ?? []),
-        ...(socialProviders?.map((provider) => ({
-            key: provider,
-            account: undefined,
-            provider
-        })) ?? [])
-    ];
-    return (_jsxs("div", { children: [_jsx("h2", { className: cn("text-sm font-semibold mb-3"), children: localization.settings.linkedAccounts }), _jsx(Card, { className: cn(className), variant: variant, ...props, children: _jsx(Card.Content, { className: "gap-0", children: isPending
-                        ? socialProviders?.map((provider, index) => (_jsxs("div", { children: [index > 0 && (_jsx("div", { className: "border-b border-dashed -mx-4 md:-mx-6 my-4" })), _jsx(AccountRowSkeleton, {})] }, provider)))
-                        : allRows.map((row, index) => (_jsxs("div", { children: [index > 0 && (_jsx("div", { className: "border-b border-dashed -mx-4 md:-mx-6 my-4" })), _jsx(LinkedAccount, { account: row.account, provider: row.provider })] }, row.key))) }) })] }));
+import { LinkedAccount as e } from "./linked-account.js";
+import { useAuth as t, useListAccounts as n } from "@better-auth-ui/react";
+import { Card as r, Skeleton as i, cn as a } from "@heroui/react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/settings/security/linked-accounts.tsx
+function c({ className: i, variant: c, ...u }) {
+	let { localization: d, socialProviders: f } = t(), { data: p, isPending: m } = n(), h = [...(p?.filter((e) => e.providerId !== "credential"))?.map((e) => ({
+		key: e.id,
+		account: e,
+		provider: e.providerId
+	})) ?? [], ...f?.map((e) => ({
+		key: e,
+		account: void 0,
+		provider: e
+	})) ?? []];
+	return /* @__PURE__ */ s("div", { children: [/* @__PURE__ */ o("h2", {
+		className: a("text-sm font-semibold mb-3"),
+		children: d.settings.linkedAccounts
+	}), /* @__PURE__ */ o(r, {
+		className: a(i),
+		variant: c,
+		...u,
+		children: /* @__PURE__ */ o(r.Content, {
+			className: "gap-0",
+			children: m ? f?.map((e, t) => /* @__PURE__ */ s("div", { children: [t > 0 && /* @__PURE__ */ o("div", { className: "border-b border-dashed -mx-4 md:-mx-6 my-4" }), /* @__PURE__ */ o(l, {})] }, e)) : h.map((t, n) => /* @__PURE__ */ s("div", { children: [n > 0 && /* @__PURE__ */ o("div", { className: "border-b border-dashed -mx-4 md:-mx-6 my-4" }), /* @__PURE__ */ o(e, {
+				account: t.account,
+				provider: t.provider
+			})] }, t.key))
+		})
+	})] });
 }
-function AccountRowSkeleton() {
-    return (_jsx("div", { className: "flex items-center justify-between", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Skeleton, { className: "size-10 rounded-xl" }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Skeleton, { className: "h-4 w-20 rounded-lg" }), _jsx(Skeleton, { className: "h-3 w-32 rounded-lg" })] })] }) }));
+function l() {
+	return /* @__PURE__ */ o("div", {
+		className: "flex items-center justify-between",
+		children: /* @__PURE__ */ s("div", {
+			className: "flex items-center gap-3",
+			children: [/* @__PURE__ */ o(i, { className: "size-10 rounded-xl" }), /* @__PURE__ */ s("div", {
+				className: "flex flex-col gap-1",
+				children: [/* @__PURE__ */ o(i, { className: "h-4 w-20 rounded-lg" }), /* @__PURE__ */ o(i, { className: "h-3 w-32 rounded-lg" })]
+			})]
+		})
+	});
 }
+//#endregion
+export { c as LinkedAccounts };

package/dist/components/settings/security/passkey.js

@@ -1,14 +1,43 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useAuth, useDeletePasskey } from "@better-auth-ui/react";
-import { Fingerprint, Xmark } from "@gravity-ui/icons";
-import { Button, Spinner, toast } from "@heroui/react";
-export function Passkey({ passkey }) {
-    const { localization } = useAuth();
-    const { mutate: deletePasskey, isPending } = useDeletePasskey({
-        onError: (error) => toast.danger(error.error?.message || error.message)
-    });
-    return (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex size-10 shrink-0 items-center justify-center rounded-xl bg-surface-secondary", children: _jsx(Fingerprint, { className: "size-4.5" }) }), _jsxs("div", { className: "flex flex-col min-w-0", children: [_jsx("span", { className: "text-sm font-medium leading-tight", children: passkey.name || localization.auth.passkey }), _jsx("span", { className: "text-xs text-muted", children: new Date(passkey.createdAt).toLocaleString(undefined, {
-                            dateStyle: "medium",
-                            timeStyle: "short"
-                        }) })] }), _jsxs(Button, { className: "ml-auto shrink-0", variant: "outline", size: "sm", isPending: isPending, onPress: () => deletePasskey({ id: passkey.id }), children: [isPending ? _jsx(Spinner, { color: "current", size: "sm" }) : _jsx(Xmark, {}), localization.settings.delete] })] }));
+import { useAuth as e, useDeletePasskey as t } from "@better-auth-ui/react";
+import { Button as n, Spinner as r } from "@heroui/react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { Fingerprint as o, Xmark as s } from "@gravity-ui/icons";
+//#region src/components/settings/security/passkey.tsx
+function c({ passkey: c }) {
+	let { localization: l } = e(), { mutate: u, isPending: d } = t();
+	return /* @__PURE__ */ a("div", {
+		className: "flex items-center gap-3",
+		children: [
+			/* @__PURE__ */ i("div", {
+				className: "flex size-10 shrink-0 items-center justify-center rounded-xl bg-surface-secondary",
+				children: /* @__PURE__ */ i(o, { className: "size-4.5" })
+			}),
+			/* @__PURE__ */ a("div", {
+				className: "flex flex-col min-w-0",
+				children: [/* @__PURE__ */ i("span", {
+					className: "text-sm font-medium leading-tight",
+					children: c.name || l.auth.passkey
+				}), /* @__PURE__ */ i("span", {
+					className: "text-xs text-muted",
+					children: new Date(c.createdAt).toLocaleString(void 0, {
+						dateStyle: "medium",
+						timeStyle: "short"
+					})
+				})]
+			}),
+			/* @__PURE__ */ a(n, {
+				className: "ml-auto shrink-0",
+				variant: "outline",
+				size: "sm",
+				isPending: d,
+				onPress: () => u({ id: c.id }),
+				children: [d ? /* @__PURE__ */ i(r, {
+					color: "current",
+					size: "sm"
+				}) : /* @__PURE__ */ i(s, {}), l.settings.delete]
+			})
+		]
+	});
 }
+//#endregion
+export { c as Passkey };

package/dist/components/settings/security/passkeys.d.ts

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

package/dist/components/settings/security/passkeys.js

@@ -1,21 +1,53 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useAddPasskey, useAuth, useListUserPasskeys } from "@better-auth-ui/react";
-import { Button, Card, cn, Skeleton, Spinner, toast } from "@heroui/react";
-import { Passkey } from "./passkey";
-export function Passkeys({ className, variant, ...props }) {
-    const { localization } = useAuth();
-    const { data: passkeys, isPending } = useListUserPasskeys({
-        throwOnError: (error) => {
-            if (error.error)
-                toast.danger(error.error.message);
-            return false;
-        }
-    });
-    const { mutate: addPasskey, isPending: isAdding } = useAddPasskey({
-        onError: (error) => toast.danger(error.error?.message || error.message)
-    });
-    return (_jsxs("div", { children: [_jsx("h2", { className: cn("text-sm font-semibold mb-3"), children: localization.settings.passkeys }), _jsx(Card, { className: cn(className), variant: variant, ...props, children: _jsxs(Card.Content, { className: "gap-0", children: [_jsxs("div", { className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between", children: [_jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium leading-tight", children: localization.settings.passkeysDescription }), _jsx("p", { className: "text-muted text-xs mt-0.5", children: localization.settings.passkeysInstructions })] }), _jsxs(Button, { className: "shrink-0", size: "sm", isPending: isAdding, isDisabled: isPending, onPress: () => addPasskey(), children: [isAdding && _jsx(Spinner, { color: "current", size: "sm" }), localization.settings.addPasskey] })] }), isPending ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "border-b border-dashed -mx-4 md:-mx-6 my-4" }), _jsx(PasskeySkeleton, {})] })) : (passkeys?.map((passkey) => (_jsxs("div", { children: [_jsx("div", { className: "border-b border-dashed -mx-4 md:-mx-6 my-4" }), _jsx(Passkey, { passkey: passkey })] }, passkey.id))))] }) })] }));
+import { Passkey as e } from "./passkey.js";
+import { useAddPasskey as t, useAuth as n, useListUserPasskeys as r } from "@better-auth-ui/react";
+import { Button as i, Card as a, Skeleton as o, Spinner as s, cn as c } from "@heroui/react";
+import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region src/components/settings/security/passkeys.tsx
+function f({ className: o, variant: f, ...m }) {
+	let { localization: h } = n(), { data: g, isPending: _ } = r(), { mutate: v, isPending: y } = t();
+	return /* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("h2", {
+		className: c("text-sm font-semibold mb-3"),
+		children: h.settings.passkeys
+	}), /* @__PURE__ */ u(a, {
+		className: c(o),
+		variant: f,
+		...m,
+		children: /* @__PURE__ */ d(a.Content, {
+			className: "gap-0",
+			children: [/* @__PURE__ */ d("div", {
+				className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between",
+				children: [/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("p", {
+					className: "text-sm font-medium leading-tight",
+					children: h.settings.passkeysDescription
+				}), /* @__PURE__ */ u("p", {
+					className: "text-muted text-xs mt-0.5",
+					children: h.settings.passkeysInstructions
+				})] }), /* @__PURE__ */ d(i, {
+					className: "shrink-0",
+					size: "sm",
+					isPending: y,
+					isDisabled: _,
+					onPress: () => v(),
+					children: [y && /* @__PURE__ */ u(s, {
+						color: "current",
+						size: "sm"
+					}), h.settings.addPasskey]
+				})]
+			}), _ ? /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u("div", { className: "border-b border-dashed -mx-4 md:-mx-6 my-4" }), /* @__PURE__ */ u(p, {})] }) : g?.map((t) => /* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("div", { className: "border-b border-dashed -mx-4 md:-mx-6 my-4" }), /* @__PURE__ */ u(e, { passkey: t })] }, t.id))]
+		})
+	})] });
 }
-function PasskeySkeleton() {
-    return (_jsx("div", { className: "flex items-center justify-between", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Skeleton, { className: "size-10 rounded-xl" }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Skeleton, { className: "h-4 w-24 rounded-lg" }), _jsx(Skeleton, { className: "h-3 w-20 rounded-lg" })] })] }) }));
+function p() {
+	return /* @__PURE__ */ u("div", {
+		className: "flex items-center justify-between",
+		children: /* @__PURE__ */ d("div", {
+			className: "flex items-center gap-3",
+			children: [/* @__PURE__ */ u(o, { className: "size-10 rounded-xl" }), /* @__PURE__ */ d("div", {
+				className: "flex flex-col gap-1",
+				children: [/* @__PURE__ */ u(o, { className: "h-4 w-24 rounded-lg" }), /* @__PURE__ */ u(o, { className: "h-3 w-20 rounded-lg" })]
+			})]
+		})
+	});
 }
+//#endregion
+export { f as Passkeys };

package/dist/components/settings/security/security-settings.d.ts

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

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

@@ -1,22 +1,25 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useAuth } from "@better-auth-ui/react";
-import { cn } from "@heroui/react";
-import { ActiveSessions } from "./active-sessions";
-import { ChangePassword } from "./change-password";
-import { DangerZone } from "./danger-zone";
-import { LinkedAccounts } from "./linked-accounts";
-import { Passkeys } from "./passkeys";
-/**
- * Renders the security settings layout including password management, linked accounts, and active sessions.
- *
- * ChangePassword is rendered when password authentication is enabled; LinkedAccounts is rendered when social providers are present.
- * DangerZone is rendered when `deleteUser.enabled` is true in auth config.
- *
- * @param className - Optional additional CSS class names for the outer container.
- * @param variant - Card variant forwarded to each security settings card.
- * @returns The security settings container as a JSX element.
- */
-export function SecuritySettings({ className, variant, ...props }) {
-    const { deleteUser, emailAndPassword, passkey, socialProviders } = useAuth();
-    return (_jsxs("div", { className: cn("flex w-full flex-col gap-4 md:gap-6", className), ...props, children: [emailAndPassword?.enabled && _jsx(ChangePassword, { variant: variant }), !!socialProviders?.length && _jsx(LinkedAccounts, { variant: variant }), passkey && _jsx(Passkeys, { variant: variant }), _jsx(ActiveSessions, { variant: variant }), deleteUser?.enabled && _jsx(DangerZone, { variant: variant })] }));
+import { ActiveSessions as e } from "./active-sessions.js";
+import { ChangePassword as t } from "./change-password.js";
+import { DangerZone as n } from "./danger-zone.js";
+import { LinkedAccounts as r } from "./linked-accounts.js";
+import { Passkeys as i } from "./passkeys.js";
+import { useAuth as a } from "@better-auth-ui/react";
+import { cn as o } from "@heroui/react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/settings/security/security-settings.tsx
+function l({ className: l, variant: u, ...d }) {
+	let { deleteUser: f, emailAndPassword: p, passkey: m, socialProviders: h } = a();
+	return /* @__PURE__ */ c("div", {
+		className: o("flex w-full flex-col gap-4 md:gap-6", l),
+		...d,
+		children: [
+			p?.enabled && /* @__PURE__ */ s(t, { variant: u }),
+			!!h?.length && /* @__PURE__ */ s(r, { variant: u }),
+			m && /* @__PURE__ */ s(i, { variant: u }),
+			/* @__PURE__ */ s(e, { variant: u }),
+			f?.enabled && /* @__PURE__ */ s(n, { variant: u })
+		]
+	});
 }
+//#endregion
+export { l as SecuritySettings };

package/dist/components/settings/settings.d.ts

@@ -1,6 +1,6 @@
-import type { SettingsView } from "@better-auth-ui/react/core";
-import { type CardProps } from "@heroui/react";
-import { type ComponentProps } from "react";
+import { SettingsView } from '@better-auth-ui/core';
+import { CardProps } from '@heroui/react';
+import { ComponentProps } from 'react';
 export type SettingsProps = {
     className?: string;
     hideNav?: boolean;

package/dist/components/settings/settings.js

@@ -1,28 +1,45 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useAuth, useAuthenticate } from "@better-auth-ui/react";
-import { cn, Tabs } from "@heroui/react";
-import { useMemo } from "react";
-import { AccountSettings } from "./account/account-settings";
-import { SecuritySettings } from "./security/security-settings";
-/**
- * Renders the settings UI and activates the appropriate settings view based on `view` or `path`.
- *
- * @param className - Additional CSS class names applied to the root container
- * @param path - Route path used to resolve which settings view to activate when `view` is not provided
- * @param view - Explicit settings view to activate, e.g. `"account"` or `"security"`
- * @param hideNav - When `true`, hide the navigation tabs
- * @param variant - Card variant forwarded to each settings section card
- * @returns A DOM tree containing the responsive settings tabs and the currently selected settings panel
- *
- * @throws Error if neither `view` nor `path` is provided
- */
-export function Settings({ className, hideNav, path, variant, view, ...props }) {
-    const { basePaths, localization, viewPaths } = useAuth();
-    useAuthenticate();
-    if (!view && !path) {
-        throw new Error("[Better Auth UI] Either `view` or `path` must be provided");
-    }
-    const settingsPathViews = useMemo(() => Object.fromEntries(Object.entries(viewPaths.settings).map(([k, v]) => [v, k])), [viewPaths.settings]);
-    const currentView = view || (path ? settingsPathViews[path] : undefined);
-    return (_jsxs(Tabs, { className: cn(className), orientation: "horizontal", selectedKey: currentView, ...props, children: [_jsx(Tabs.ListContainer, { children: _jsxs(Tabs.List, { "aria-label": localization.settings.settings, className: "overflow-auto w-fit", children: [_jsxs(Tabs.Tab, { id: "account", href: `${basePaths.settings}/${viewPaths.settings.account}`, children: [localization.settings.account, _jsx(Tabs.Indicator, {})] }), _jsxs(Tabs.Tab, { id: "security", href: `${basePaths.settings}/${viewPaths.settings.security}`, children: [localization.settings.security, _jsx(Tabs.Indicator, {})] })] }) }), _jsx(Tabs.Panel, { id: "account", className: "px-0", children: _jsx(AccountSettings, { variant: variant }) }), _jsx(Tabs.Panel, { id: "security", className: "px-0", children: _jsx(SecuritySettings, { variant: variant }) })] }));
+import { AccountSettings as e } from "./account/account-settings.js";
+import { SecuritySettings as t } from "./security/security-settings.js";
+import { useAuth as n, useAuthenticate as r } from "@better-auth-ui/react";
+import { Tabs as i, cn as a } from "@heroui/react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { useMemo as c } from "react";
+//#region src/components/settings/settings.tsx
+function l({ className: l, hideNav: u, path: d, variant: f, view: p, ...m }) {
+	let { basePaths: h, localization: g, viewPaths: _ } = n();
+	if (r(), !p && !d) throw Error("[Better Auth UI] Either `view` or `path` must be provided");
+	let v = c(() => Object.fromEntries(Object.entries(_.settings).map(([e, t]) => [t, e])), [_.settings]), y = p || (d ? v[d] : void 0);
+	return /* @__PURE__ */ s(i, {
+		className: a(l),
+		orientation: "horizontal",
+		selectedKey: y,
+		...m,
+		children: [
+			/* @__PURE__ */ o(i.ListContainer, { children: /* @__PURE__ */ s(i.List, {
+				"aria-label": g.settings.settings,
+				className: "overflow-auto w-fit",
+				children: [/* @__PURE__ */ s(i.Tab, {
+					id: "account",
+					href: `${h.settings}/${_.settings.account}`,
+					children: [g.settings.account, /* @__PURE__ */ o(i.Indicator, {})]
+				}), /* @__PURE__ */ s(i.Tab, {
+					id: "security",
+					href: `${h.settings}/${_.settings.security}`,
+					children: [g.settings.security, /* @__PURE__ */ o(i.Indicator, {})]
+				})]
+			}) }),
+			/* @__PURE__ */ o(i.Panel, {
+				id: "account",
+				className: "px-0",
+				children: /* @__PURE__ */ o(e, { variant: f })
+			}),
+			/* @__PURE__ */ o(i.Panel, {
+				id: "security",
+				className: "px-0",
+				children: /* @__PURE__ */ o(t, { variant: f })
+			})
+		]
+	});
 }
+//#endregion
+export { l as Settings };

package/dist/components/user/switch-account-item.d.ts

@@ -1,4 +1,4 @@
-import type { Session, User } from "better-auth";
+import { Session, User } from 'better-auth';
 type DeviceSession = {
     session: Session;
     user: User;

package/dist/components/user/switch-account-item.js

@@ -1,16 +1,20 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useSetActiveSession } from "@better-auth-ui/react";
-import { Dropdown, Spinner, toast } from "@heroui/react";
-import { UserView } from "./user-view";
-/**
- * Render a dropdown item for switching to a different authenticated session.
- *
- * @param deviceSession - The device session to display and switch to when pressed
- * @returns The switch account dropdown item as a JSX element
- */
-export function SwitchAccountItem({ deviceSession }) {
-    const { mutate: setActiveSession, isPending } = useSetActiveSession({
-        onError: (error) => toast.danger(error.error?.message || error.message)
-    });
-    return (_jsxs(Dropdown.Item, { className: "px-2", isDisabled: isPending, onPress: () => setActiveSession({ sessionToken: deviceSession.session.token }), children: [_jsx(UserView, { user: deviceSession.user }), isPending && _jsx(Spinner, { color: "current", size: "sm", className: "ml-auto" })] }));
+import { UserView as e } from "./user-view.js";
+import { useSetActiveSession as t } from "@better-auth-ui/react";
+import { Dropdown as n, Spinner as r } from "@heroui/react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/user/switch-account-item.tsx
+function o({ deviceSession: o }) {
+	let { mutate: s, isPending: c } = t();
+	return /* @__PURE__ */ a(n.Item, {
+		className: "px-2",
+		isDisabled: c,
+		onPress: () => s({ sessionToken: o.session.token }),
+		children: [/* @__PURE__ */ i(e, { user: o.user }), c && /* @__PURE__ */ i(r, {
+			color: "current",
+			size: "sm",
+			className: "ml-auto"
+		})]
+	});
 }
+//#endregion
+export { o as SwitchAccountItem };

package/dist/components/user/switch-account-menu.js

@@ -1,29 +1,28 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useAuth, useListDeviceSessions, useSession } from "@better-auth-ui/react";
-import { Check, CirclePlus } from "@gravity-ui/icons";
-import { Dropdown, Label, Separator, toast } from "@heroui/react";
-import { SwitchAccountItem } from "./switch-account-item";
-import { UserView } from "./user-view";
-/**
- * Render the menu 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 menu content as a JSX element
- */
-export function SwitchAccountMenu() {
-    const { basePaths, viewPaths, localization } = useAuth();
-    const { data: session } = useSession();
-    const { data: deviceSessions, isPending } = useListDeviceSessions({
-        throwOnError: (error) => {
-            if (error.error)
-                toast.danger(error.error.message);
-            return false;
-        }
-    });
-    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 }), !isPending && _jsx(Check, { className: "ml-auto" })] }), deviceSessions
-                    ?.filter((deviceSession) => deviceSession.session.id !== session?.session?.id)
-                    .map((deviceSession) => (_jsx(SwitchAccountItem, { deviceSession: deviceSession }, deviceSession.session.id))), _jsx(Separator, {}), _jsxs(Dropdown.Item, { textValue: localization.auth.addAccount, href: `${basePaths.auth}/${viewPaths.auth.signIn}`, children: [_jsx(CirclePlus, { className: "text-muted" }), _jsx(Label, { children: localization.auth.addAccount })] })] }) }));
+import { UserView as e } from "./user-view.js";
+import { SwitchAccountItem as t } from "./switch-account-item.js";
+import { useAuth as n, useListDeviceSessions as r, useSession as i } from "@better-auth-ui/react";
+import { Dropdown as a, Label as o, Separator as s } from "@heroui/react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { Check as u, CirclePlus as d } from "@gravity-ui/icons";
+//#region src/components/user/switch-account-menu.tsx
+function f() {
+	let { basePaths: f, viewPaths: p, localization: m } = n(), { data: h } = i(), { data: g, isPending: _ } = r();
+	return /* @__PURE__ */ c(a.Popover, {
+		className: "min-w-40 md:min-w-56 max-w-[48svw]",
+		children: /* @__PURE__ */ l(a.Menu, { children: [
+			/* @__PURE__ */ l(a.Item, {
+				className: "px-2",
+				children: [/* @__PURE__ */ c(e, { isPending: _ }), !_ && /* @__PURE__ */ c(u, { className: "ml-auto" })]
+			}),
+			g?.filter((e) => e.session.id !== h?.session?.id).map((e) => /* @__PURE__ */ c(t, { deviceSession: e }, e.session.id)),
+			/* @__PURE__ */ c(s, {}),
+			/* @__PURE__ */ l(a.Item, {
+				textValue: m.auth.addAccount,
+				href: `${f.auth}/${p.auth.signIn}`,
+				children: [/* @__PURE__ */ c(d, { className: "text-muted" }), /* @__PURE__ */ c(o, { children: m.auth.addAccount })]
+			})
+		] })
+	});
 }
+//#endregion
+export { f as SwitchAccountMenu };

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

@@ -1,6 +1,6 @@
-import { type AvatarProps } from "@heroui/react";
-import type { User } from "better-auth";
-import type { ReactNode } from "react";
+import { AvatarProps } from '@heroui/react';
+import { User } from 'better-auth';
+import { ReactNode } from 'react';
 export type UserAvatarProps = {
     className?: string;
     fallback?: ReactNode;

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

@@ -1,31 +1,29 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useSession } from "@better-auth-ui/react";
-import { Person } from "@gravity-ui/icons";
-import { Avatar, cn, Skeleton } from "@heroui/react";
-/**
- * Render a user avatar that shows the user's image, initials, or a custom fallback; displays a circular skeleton while the session (or explicit pending flag) is pending.
- *
- * @param className - Additional CSS classes applied to the outer avatar container
- * @param fallback - Custom fallback content to render when no image or initials are available
- * @param isPending - When true, force rendering of the loading skeleton (unless an explicit `user` prop is provided)
- * @param user - Optional user object to display; when omitted the current session user is used if available
- * @param size - Visual size of the avatar; one of `"sm"`, `"md"`, or `"lg"` (default: `"sm"`)
- * @returns A React element that displays the user's avatar image, initials, or the provided fallback; renders a circular skeleton while loading
- */
-export function UserAvatar({ className, fallback, isPending, user, size = "sm", style, ...props }) {
-    const { data: session, isPending: sessionPending } = useSession({
-        enabled: !user && !isPending
-    });
-    if ((isPending || sessionPending) && !user) {
-        return (_jsx(Skeleton, { className: cn("rounded-full", size === "sm" ? "size-8" : size === "md" ? "size-10" : "size-12", className), style: style }));
-    }
-    const resolvedUser = user ?? session?.user;
-    const initials = (resolvedUser?.username ||
-        resolvedUser?.name ||
-        resolvedUser?.email)
-        ?.slice(0, 2)
-        .toUpperCase();
-    return (_jsxs(Avatar, { size: size, className: cn("rounded-full", className), style: style, ...props, children: [_jsx(Avatar.Image, { alt: resolvedUser?.displayUsername ||
-                    resolvedUser?.name ||
-                    resolvedUser?.email, src: resolvedUser?.image ?? undefined }), _jsx(Avatar.Fallback, { className: cn(size === "lg" ? "text-xl" : size === "md" ? "text-base" : "text-sm"), delayMs: resolvedUser?.image ? 600 : undefined, children: fallback || initials || _jsx(Person, { className: "size-4" }) })] }));
+import { useSession as e } from "@better-auth-ui/react";
+import { Avatar as t, Skeleton as n, cn as r } from "@heroui/react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { Person as o } from "@gravity-ui/icons";
+//#region src/components/user/user-avatar.tsx
+function s({ className: s, fallback: c, isPending: l, user: u, size: d = "sm", style: f, ...p }) {
+	let { data: m, isPending: h } = e({ enabled: !u && !l });
+	if ((l || h) && !u) return /* @__PURE__ */ i(n, {
+		className: r("rounded-full", d === "sm" ? "size-8" : d === "md" ? "size-10" : "size-12", s),
+		style: f
+	});
+	let g = u ?? m?.user, _ = (g?.username || g?.name || g?.email)?.slice(0, 2).toUpperCase();
+	return /* @__PURE__ */ a(t, {
+		size: d,
+		className: r("rounded-full", s),
+		style: f,
+		...p,
+		children: [/* @__PURE__ */ i(t.Image, {
+			alt: g?.displayUsername || g?.name || g?.email,
+			src: g?.image ?? void 0
+		}), /* @__PURE__ */ i(t.Fallback, {
+			className: r(d === "lg" ? "text-xl" : d === "md" ? "text-base" : "text-sm"),
+			delayMs: g?.image ? 600 : void 0,
+			children: c || _ || /* @__PURE__ */ i(o, { className: "size-4" })
+		})]
+	});
 }
+//#endregion
+export { s as UserAvatar };

package/dist/components/user/user-button.d.ts

@@ -1,4 +1,4 @@
-import { type ButtonProps, type DropdownPopoverProps } from "@heroui/react";
+import { ButtonProps, DropdownPopoverProps } from '@heroui/react';
 export type UserButtonProps = {
     className?: string;
     size?: "default" | "icon";