@better-auth-ui/heroui 1.6.0

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

@@ -0,0 +1,31 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAuth, useListAccounts } from "@better-auth-ui/react";
+import { Card, cn, Skeleton, toast } from "@heroui/react";
+import { ConnectedAccount } from "./connected-account";
+/**
+ * Render a card showing linked social accounts and available social providers to connect.
+ *
+ * Linked accounts (excluding the "credential" provider) are shown with an unlink control;
+ * available providers are shown with a connect control. Button states and labels reflect
+ * ongoing link/unlink activity and use localization for provider-specific text.
+ *
+ * @returns A JSX element containing the connected accounts card
+ */
+export function ConnectedAccounts({ className, ...props }) {
+    const { localization, socialProviders } = useAuth();
+    const { data: accounts, isPending } = useListAccounts({
+        throwOnError: (error) => {
+            if (error.error)
+                toast.danger(error.error.message, { timeout: 3000 });
+            return false;
+        }
+    });
+    return (_jsxs(Card, { className: cn("p-4 md:p-6 gap-4", className), ...props, children: [_jsx(Card.Header, { children: _jsx(Card.Title, { className: "text-xl", children: localization.settings.connectedAccounts }) }), _jsx(Card.Content, { className: "gap-3", children: isPending ? (_jsx(AccountRowSkeleton, {})) : (_jsxs(_Fragment, { children: [accounts
+                            ?.filter((account) => account.providerId !== "credential")
+                            .map((account) => (_jsx(ConnectedAccount, { account: account, provider: account.providerId }, account.id))), socialProviders?.map((provider) => {
+                            return _jsx(ConnectedAccount, { provider: provider }, provider);
+                        })] })) })] }));
+}
+function AccountRowSkeleton() {
+    return (_jsx("div", { className: "flex items-center rounded-3xl border p-3 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" })] })] }) }));
+}

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

@@ -0,0 +1,11 @@
+import { type CardProps } from "@heroui/react";
+import type { ComponentProps } from "react";
+export type DangerZoneProps = {
+    className?: string;
+    variant?: CardProps["variant"];
+};
+/**
+ * Renders the danger zone heading and {@link DeleteUser}.
+ * Gate with `deleteUser.enabled` at the call site (e.g. {@link SecuritySettings}).
+ */
+export declare function DangerZone({ className, variant, ...props }: DangerZoneProps & ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAuth } from "@better-auth-ui/react";
+import { cn } from "@heroui/react";
+import { DeleteUser } from "./delete-user";
+/**
+ * Renders the danger zone heading and {@link DeleteUser}.
+ * Gate with `deleteUser.enabled` at the call site (e.g. {@link SecuritySettings}).
+ */
+export function DangerZone({ className, variant, ...props }) {
+    const { localization } = useAuth();
+    return (_jsxs("div", { className: cn("flex w-full flex-col", className), ...props, children: [_jsx("h2", { className: cn("text-sm font-semibold mb-3"), children: localization.settings.dangerZone }), _jsx(DeleteUser, { variant: variant })] }));
+}

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

@@ -0,0 +1,9 @@
+import { type CardProps } from "@heroui/react";
+export type DeleteUserProps = {
+    className?: string;
+    variant?: CardProps["variant"];
+};
+/**
+ * Danger-zone card to delete the authenticated account, with a confirmation dialog and toasts.
+ */
+export declare function DeleteUser({ className, variant, ...props }: DeleteUserProps & CardProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAuth, useDeleteUser, useListAccounts } from "@better-auth-ui/react";
+import { TriangleExclamation } from "@gravity-ui/icons";
+import { AlertDialog, Button, Card, cn, FieldError, Form, Input, Label, Spinner, TextField, toast } from "@heroui/react";
+import { useState } from "react";
+/**
+ * Danger-zone card to delete the authenticated account, with a confirmation dialog and toasts.
+ */
+export function DeleteUser({ className, variant, ...props }) {
+    const { basePaths, deleteUser: deleteUserConfig, localization, navigate, viewPaths } = useAuth();
+    const { data: accounts } = useListAccounts();
+    const [confirmOpen, setConfirmOpen] = useState(false);
+    const [password, setPassword] = useState("");
+    const hasCredentialAccount = accounts?.some((account) => account.providerId === "credential");
+    const needsPassword = !deleteUserConfig?.sendDeleteAccountVerification && hasCredentialAccount;
+    const { mutate: deleteUser, isPending } = useDeleteUser();
+    const handleDialogOpenChange = (open) => {
+        setConfirmOpen(open);
+        setPassword("");
+    };
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        const params = {
+            ...(needsPassword ? { password } : {})
+        };
+        deleteUser(params, {
+            onSuccess: () => {
+                setConfirmOpen(false);
+                setPassword("");
+                if (deleteUserConfig?.sendDeleteAccountVerification) {
+                    toast.success(localization.settings.deleteUserVerificationSent);
+                }
+                else {
+                    toast.success(localization.settings.deleteUserSuccess);
+                    navigate({
+                        to: `${basePaths.auth}/${viewPaths.auth.signIn}`,
+                        replace: true
+                    });
+                }
+            },
+            onError: (error) => {
+                toast.danger(error.error?.message || error.message);
+            }
+        });
+    };
+    return (_jsx(Card, { className: cn("border border-danger", className), variant: variant, ...props, children: _jsxs(Card.Content, { 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.deleteUser }), _jsx("p", { className: "text-muted text-xs mt-0.5", children: localization.settings.deleteUserDescription })] }), _jsxs(AlertDialog, { children: [_jsx(Button, { isDisabled: !accounts, size: "sm", variant: "danger", onPress: () => setConfirmOpen(true), children: localization.settings.deleteUser }), _jsx(AlertDialog.Backdrop, { isOpen: confirmOpen, onOpenChange: handleDialogOpenChange, children: _jsx(AlertDialog.Container, { children: _jsx(AlertDialog.Dialog, { children: _jsxs(Form, { onSubmit: handleSubmit, children: [_jsx(AlertDialog.CloseTrigger, {}), _jsxs(AlertDialog.Header, { children: [_jsx(AlertDialog.Icon, { status: "danger", children: _jsx(TriangleExclamation, {}) }), _jsx(AlertDialog.Heading, { children: localization.settings.deleteUser })] }), _jsxs(AlertDialog.Body, { className: "overflow-visible", children: [_jsx("p", { className: "text-muted text-sm", children: localization.settings.deleteUserDescription }), needsPassword && (_jsxs(TextField, { className: "mt-4", name: "password", type: "password", isDisabled: isPending, value: password, onChange: setPassword, children: [_jsx(Label, { children: localization.auth.password }), _jsx(Input, { autoComplete: "current-password", placeholder: localization.auth.passwordPlaceholder, required: true, variant: "secondary" }), _jsx(FieldError, {})] }))] }), _jsxs(AlertDialog.Footer, { children: [_jsx(Button, { slot: "close", variant: "tertiary", isDisabled: isPending, children: localization.settings.cancel }), _jsxs(Button, { type: "submit", variant: "danger", isPending: isPending, children: [isPending && _jsx(Spinner, { color: "current", size: "sm" }), localization.settings.deleteUser] })] })] }) }) }) })] })] }) }));
+}

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

@@ -0,0 +1,16 @@
+import type { Account, SocialProvider } from "better-auth";
+export type LinkedAccountProps = {
+    account?: Account;
+    provider: SocialProvider;
+};
+/**
+ * Render a single linked social account row with provider info and link/unlink control.
+ *
+ * Fetches additional account information from the provider using the accountInfo API
+ * and displays the provider name, account details, and a link/unlink button.
+ *
+ * @param account - The account object containing id, accountId, and providerId
+ * @param provider - The provider id
+ * @returns A JSX element containing the linked account row
+ */
+export declare function LinkedAccount({ account, provider }: LinkedAccountProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getProviderName } from "@better-auth-ui/core";
+import { providerIcons, useAccountInfo, useAuth, useLinkSocial, useUnlinkAccount } from "@better-auth-ui/react";
+import { Link, LinkSlash, PlugConnection } from "@gravity-ui/icons";
+import { Button, cn, Skeleton, Spinner, toast } from "@heroui/react";
+/**
+ * Render a single linked social account row with provider info and link/unlink control.
+ *
+ * Fetches additional account information from the provider using the accountInfo API
+ * and displays the provider name, account details, and a link/unlink button.
+ *
+ * @param account - The account object containing id, accountId, and providerId
+ * @param provider - The provider id
+ * @returns A JSX element containing the linked account row
+ */
+export function LinkedAccount({ account, provider }) {
+    const { baseURL, localization } = useAuth();
+    const { data: accountInfo, isPending: isLoadingInfo } = useAccountInfo(account?.accountId, {
+        enabled: !!account,
+        throwOnError: (error) => {
+            if (error.error)
+                toast.danger(error.error.message);
+            return false;
+        }
+    });
+    const { mutate: linkSocial, isPending: isLinking } = useLinkSocial({
+        onError: (error) => toast.danger(error.error?.message || error.message)
+    });
+    const { mutate: unlinkAccount, isPending: isUnlinking } = useUnlinkAccount({
+        onError: (error) => toast.danger(error.error?.message || error.message),
+        onSuccess: () => toast.success(localization.settings.accountUnlinked)
+    });
+    const ProviderIcon = providerIcons[provider];
+    const providerName = getProviderName(provider);
+    const displayName = accountInfo?.data?.login ||
+        accountInfo?.data?.username ||
+        accountInfo?.user?.email ||
+        accountInfo?.user?.name ||
+        account?.accountId;
+    return (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: cn("flex size-10 shrink-0 items-center justify-center rounded-xl bg-surface-secondary"), children: ProviderIcon ? (_jsx(ProviderIcon, { className: cn("size-4.5", !account && "opacity-50") })) : (_jsx(PlugConnection, { className: cn("size-4.5", !account && "opacity-50") })) }), _jsxs("div", { className: "flex flex-col min-w-0", children: [_jsx("span", { className: "text-sm font-medium leading-tight", children: providerName }), account && isLoadingInfo ? (_jsx(Skeleton, { className: "h-3 w-24 my-0.5 rounded-lg" })) : (_jsx("span", { className: "text-xs text-muted truncate", children: account
+                            ? displayName
+                            : localization.settings.linkProvider.replace("{{provider}}", providerName) }))] }), account ? (_jsxs(Button, { className: "ml-auto shrink-0", variant: "outline", size: "sm", onPress: () => unlinkAccount({ providerId: account.providerId }), isPending: isUnlinking, "aria-label": localization.settings.unlinkProvider.replace("{{provider}}", providerName), children: [isUnlinking ? _jsx(Spinner, { color: "current", size: "sm" }) : _jsx(LinkSlash, {}), localization.settings.unlinkProvider
+                        .replace("{{provider}}", "")
+                        .trim()] })) : (_jsxs(Button, { className: "ml-auto shrink-0", variant: "outline", size: "sm", onPress: () => linkSocial({
+                    provider,
+                    callbackURL: `${baseURL}${window.location.pathname}`
+                }), isPending: isLinking, "aria-label": localization.settings.linkProvider.replace("{{provider}}", providerName), children: [isLinking ? _jsx(Spinner, { color: "current", size: "sm" }) : _jsx(Link, {}), localization.settings.link] }))] }));
+}

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

@@ -0,0 +1,15 @@
+import { type CardProps } from "@heroui/react";
+export type LinkedAccountsProps = {
+    className?: string;
+    variant?: CardProps["variant"];
+};
+/**
+ * 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 declare function LinkedAccounts({ className, variant, ...props }: LinkedAccountsProps & CardProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,42 @@
+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))) }) })] }));
+}
+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" })] })] }) }));
+}

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

@@ -0,0 +1,17 @@
+import { type CardProps } from "@heroui/react";
+import type { ComponentProps } from "react";
+export type SecuritySettingsProps = {
+    className?: string;
+    variant?: CardProps["variant"];
+};
+/**
+ * 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 declare function SecuritySettings({ className, variant, ...props }: SecuritySettingsProps & ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,21 @@
+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";
+/**
+ * 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, 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 }), _jsx(ActiveSessions, { variant: variant }), deleteUser?.enabled && _jsx(DangerZone, { variant: variant })] }));
+}

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

@@ -0,0 +1,14 @@
+import { type CardProps } from "@heroui/react";
+export type SessionsProps = {
+    className?: string;
+    variant?: CardProps["variant"];
+};
+/**
+ * Render a card listing all active sessions for the current user with revoke controls.
+ *
+ * Shows each session's browser, OS, IP address, and creation time. The current session is marked
+ * and navigates to sign-out on click, while other sessions can be revoked individually.
+ *
+ * @returns A JSX element containing the sessions card
+ */
+export declare function Sessions({ className, ...props }: SessionsProps & CardProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useAuth, useListSessions, useRevokeSession, useSession } from "@better-auth-ui/react";
+import { ArrowRightFromSquare, Display, Smartphone } from "@gravity-ui/icons";
+import { Button, Card, Chip, cn, Skeleton, Spinner } from "@heroui/react";
+import { UAParser } from "ua-parser-js";
+/**
+ * Render a card listing all active sessions for the current user with revoke controls.
+ *
+ * Shows each session's browser, OS, IP address, and creation time. The current session is marked
+ * and navigates to sign-out on click, while other sessions can be revoked individually.
+ *
+ * @returns A JSX element containing the sessions card
+ */
+export function Sessions({ className, ...props }) {
+    const { basePaths, localization, viewPaths, navigate } = useAuth();
+    const { data: sessionData } = useSession();
+    const { data: sessions, isPending } = useListSessions();
+    const { revokingSession, revokeSession } = useRevokeSession();
+    return (_jsxs(Card, { className: cn("p-4 md:p-6 gap-4", className), ...props, children: [_jsx(Card.Header, { children: _jsx(Card.Title, { className: "text-xl", children: localization.settings.sessions }) }), _jsx(Card.Content, { className: "gap-3", children: isPending ? (_jsx(SessionRowSkeleton, {})) : (sessions
+                    ?.toSorted((session) => session.id === sessionData?.session.id ? -1 : 1)
+                    .map((session) => {
+                    const isCurrentSession = session.token === sessionData?.session.token;
+                    const isRevoking = revokingSession === session.token;
+                    const ua = new UAParser(session.userAgent || "").getResult();
+                    const isMobile = ua.device.type === "mobile" ||
+                        ua.device.type === "tablet" ||
+                        ua.device.type === "wearable";
+                    return (_jsxs(Card, { className: "flex-row border items-center p-3 shadow-none", children: [_jsx("div", { className: "flex size-10 items-center justify-center rounded-xl bg-surface-secondary", children: isMobile ? (_jsx(Smartphone, { className: "size-5" })) : (_jsx(Display, { className: "size-5" })) }), _jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsxs("span", { className: "text-sm font-medium truncate", children: [ua.browser.name || "Unknown Browser", ua.os.name ? `, ${ua.os.name}` : ""] }), isCurrentSession && (_jsx(Chip, { color: "accent", size: "sm", className: "px-1.5", children: localization.settings.currentSession }))] }), _jsxs("div", { className: "flex items-center gap-1.5 text-xs text-muted", children: [session.ipAddress && _jsx("span", { children: session.ipAddress }), session.createdAt && (_jsxs(_Fragment, { children: [session.ipAddress && _jsx("span", { children: "\u2022" }), _jsx("span", { children: session.createdAt.toLocaleString([], {
+                                                            dateStyle: "short",
+                                                            timeStyle: "short"
+                                                        }) })] }))] })] }), _jsx(Button, { isIconOnly: true, className: "ml-auto", variant: "ghost", size: "sm", onPress: () => isCurrentSession
+                                    ? navigate({
+                                        to: `${basePaths.auth}/${viewPaths.auth.signOut}`
+                                    })
+                                    : revokeSession(session.token), isPending: !!revokingSession, "aria-label": localization.settings.revokeSession, children: isRevoking ? (_jsx(Spinner, { color: "current", size: "sm" })) : (_jsx(ArrowRightFromSquare, {})) })] }, session.id));
+                })) })] }));
+}
+function SessionRowSkeleton() {
+    return (_jsx("div", { className: "flex items-center rounded-3xl border p-3 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-32 rounded-lg" }), _jsx(Skeleton, { className: "h-3 w-24 rounded-lg" })] })] }) }));
+}

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

@@ -0,0 +1,5 @@
+import type { AnyAuthConfig } from "@better-auth-ui/react";
+export type AccountSettingsProps = AnyAuthConfig & {
+    className?: string;
+};
+export declare function AccountSettings({ className, ...config }: AccountSettingsProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../../lib/utils";
+import { UserProfile } from "./user-profile";
+export function AccountSettings({ className, ...config }) {
+    return (_jsx("div", { className: cn("w-full flex flex-col gap-4 md:gap-6", className), children: _jsx(UserProfile, { ...config }) }));
+}

package/dist/components/settings/settings/user-profile.d.ts

@@ -0,0 +1,5 @@
+import { type AnyAuthConfig } from "@better-auth-ui/react";
+export type UserProfileProps = AnyAuthConfig & {
+    className?: string;
+};
+export declare function UserProfile({ className, ...config }: UserProfileProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAuth, useUpdateUser } from "@better-auth-ui/react";
+import { CheckIcon, PencilIcon } from "@heroicons/react/24/outline";
+import { Button, Card, Description, FieldError, Fieldset, Form, Input, Label, Skeleton, Spinner, TextField } from "@heroui/react";
+import { UserAvatar } from "../../user/user-avatar";
+export function UserProfile({ className, ...config }) {
+    const { authClient, localization } = useAuth(config);
+    const { data: sessionData, isPending: isSessionPending } = authClient.useSession();
+    const [state, formAction, isPending] = useUpdateUser(config);
+    if (isSessionPending) {
+        return _jsx(UserProfileSkeleton, {});
+    }
+    return (_jsx(Card, { className: "p-4 md:p-6", children: _jsx(Form, { action: formAction, children: _jsxs(Fieldset, { className: "w-full gap-4 md:gap-6", children: [_jsx(Fieldset.Legend, { className: "text-xl", children: localization.settings.profile }), _jsx(Description, {}), _jsxs("div", { className: "flex items-center gap-3", children: [_jsxs(Button, { isIconOnly: true, variant: "ghost", className: "p-0 h-auto w-auto rounded-full", children: [_jsx(UserAvatar, { size: "lg" }), _jsx("span", { className: "absolute right-0 bottom-0 size-3.5 rounded-full bg-background ring-2 ring-surface-quaternary flex items-center justify-center", children: _jsx(PencilIcon, { className: "size-2 text-muted" }) })] }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("p", { className: "text-sm font-medium", children: sessionData?.user?.displayUsername ||
+                                            sessionData?.user?.name ||
+                                            sessionData?.user?.email }), (sessionData?.user?.displayUsername ||
+                                        sessionData?.user?.name) && (_jsx("p", { className: "text-muted text-xs leading-none", children: sessionData?.user?.email }))] })] }), _jsx(Fieldset.Group, { children: _jsxs(TextField, { name: "name", defaultValue: sessionData?.user?.name || state.name, isDisabled: isPending, children: [_jsx(Label, { children: localization.auth.name }), _jsx(Input, { placeholder: localization.auth.name }), _jsx(FieldError, {})] }) }), _jsx(Fieldset.Actions, { children: _jsxs(Button, { type: "submit", isPending: isPending, children: [isPending ? (_jsx(Spinner, { color: "current", size: "sm" })) : (_jsx(CheckIcon, { className: "size-4" })), localization.settings.saveChanges] }) })] }) }) }));
+}
+function UserProfileSkeleton() {
+    return (_jsxs(Card, { className: "p-4 md:p-6 gap-4 md:gap-6", children: [_jsx(Skeleton, { className: "h-7 w-16 rounded-xl" }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Skeleton, { className: "size-12 rounded-full" }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Skeleton, { className: "h-4 mt-0.5 w-24 rounded-lg" }), _jsx(Skeleton, { className: "h-3 mt-0.5 w-32 rounded-lg" })] })] }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Skeleton, { className: "h-4 w-12 my-0.5 rounded-lg" }), _jsx(Skeleton, { className: "h-9 w-full rounded-xl" })] }), _jsx(Skeleton, { className: "h-10 md:h-9 w-36 rounded-full mt-1" })] }));
+}

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

@@ -0,0 +1,24 @@
+import type { SettingsView } from "@better-auth-ui/react/core";
+import { type CardProps } from "@heroui/react";
+import { type ComponentProps } from "react";
+export type SettingsProps = {
+    className?: string;
+    hideNav?: boolean;
+    path?: string;
+    variant?: CardProps["variant"];
+    /** @remarks `SettingsView` */
+    view?: SettingsView;
+};
+/**
+ * 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 declare function Settings({ className, hideNav, path, variant, view, ...props }: SettingsProps & ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;

package/dist/components/settings/settings.js

@@ -0,0 +1,28 @@
+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 }) })] }));
+}

package/dist/components/settings/user-profile.d.ts

@@ -0,0 +1,5 @@
+import { type AnyAuthConfig } from "@better-auth-ui/react";
+export type UserProfileProps = AnyAuthConfig & {
+    className?: string;
+};
+export declare function UserProfile({ className, ...config }: UserProfileProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAuth, useUpdateUser } from "@better-auth-ui/react";
+import { CheckIcon, PencilIcon } from "@heroicons/react/24/outline";
+import { Button, Card, Description, FieldError, Fieldset, Form, Input, Label, Skeleton, Spinner, TextField } from "@heroui/react";
+import { UserAvatar } from "../user/user-avatar";
+export function UserProfile({ className, ...config }) {
+    const { authClient, localization } = useAuth(config);
+    const { data: sessionData, isPending: isSessionPending } = authClient.useSession();
+    const [state, formAction, isPending] = useUpdateUser(config);
+    if (isSessionPending) {
+        return _jsx(UserProfileSkeleton, {});
+    }
+    return (_jsx(Card, { className: "p-4 md:p-6", children: _jsx(Form, { action: formAction, children: _jsxs(Fieldset, { className: "w-full gap-4 md:gap-6", children: [_jsx(Fieldset.Legend, { className: "text-xl", children: localization.settings.profile }), _jsx(Description, {}), _jsxs("div", { className: "flex items-center gap-3", children: [_jsxs(Button, { type: "button", isIconOnly: true, variant: "ghost", className: "p-0 h-auto w-auto rounded-full", children: [_jsx(UserAvatar, { ...config, size: "lg" }), _jsx("span", { className: "absolute right-0 bottom-0 size-3.5 rounded-full bg-background ring-2 ring-surface-quaternary flex items-center justify-center", children: _jsx(PencilIcon, { className: "size-2 text-muted" }) })] }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("p", { className: "text-sm font-medium", children: sessionData?.user?.displayUsername ||
+                                            sessionData?.user?.name ||
+                                            sessionData?.user?.email }), (sessionData?.user?.displayUsername ||
+                                        sessionData?.user?.name) && (_jsx("p", { className: "text-muted text-xs leading-none", children: sessionData?.user?.email }))] })] }), _jsx(Fieldset.Group, { children: _jsxs(TextField, { name: "name", defaultValue: sessionData?.user?.name || state.name, isDisabled: isPending, children: [_jsx(Label, { children: localization.auth.name }), _jsx(Input, { placeholder: localization.auth.name }), _jsx(FieldError, {})] }) }), _jsx(Fieldset.Actions, { children: _jsxs(Button, { type: "submit", isPending: isPending, children: [isPending ? (_jsx(Spinner, { color: "current", size: "sm" })) : (_jsx(CheckIcon, { className: "size-4" })), localization.settings.saveChanges] }) })] }) }) }));
+}
+function UserProfileSkeleton() {
+    return (_jsxs(Card, { className: "p-4 md:p-6 gap-4 md:gap-6", children: [_jsx(Skeleton, { className: "h-7 w-16 rounded-xl" }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Skeleton, { className: "size-12 rounded-full" }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Skeleton, { className: "h-4 mt-0.5 w-24 rounded-lg" }), _jsx(Skeleton, { className: "h-3 mt-0.5 w-32 rounded-lg" })] })] }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Skeleton, { className: "h-4 w-12 my-0.5 rounded-lg" }), _jsx(Skeleton, { className: "h-9 w-full rounded-xl" })] }), _jsx(Skeleton, { className: "h-10 md:h-9 w-36 rounded-full mt-1" })] }));
+}

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

@@ -0,0 +1,16 @@
+import type { Session, User } from "better-auth";
+type DeviceSession = {
+    session: Session;
+    user: User;
+};
+export type SwitchAccountItemProps = {
+    deviceSession: DeviceSession;
+};
+/**
+ * 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 declare function SwitchAccountItem({ deviceSession }: SwitchAccountItemProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,16 @@
+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" })] }));
+}

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

@@ -0,0 +1,10 @@
+/**
+ * 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 declare function SwitchAccountMenu(): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,29 @@
+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 })] })] }) }));
+}

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

@@ -0,0 +1,10 @@
+/**
+ * Render the popover 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 popover content as a JSX element
+ */
+export declare function SwitchAccountPopover(): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAuth, useListDeviceSessions, useSession, useSetActiveSession } from "@better-auth-ui/react";
+import { Check, CirclePlus } from "@gravity-ui/icons";
+import { Dropdown, Label, Separator } from "@heroui/react";
+import { UserView } from "./user-view";
+/**
+ * Render the popover 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 popover content as a JSX element
+ */
+export function SwitchAccountPopover() {
+    const { basePaths, viewPaths, localization } = useAuth();
+    const { settingActiveSession, setActiveSession } = useSetActiveSession();
+    const { data: sessionData } = useSession();
+    const { data: deviceSessions } = useListDeviceSessions();
+    return (_jsxs(Dropdown.Menu, { children: [_jsxs(Dropdown.Item, { className: "px-2", children: [_jsx(UserView, {}), _jsx(Check, { className: "ml-auto" })] }), deviceSessions
+                ?.filter((deviceSession) => deviceSession.session.id !== sessionData?.session?.id)
+                .map((deviceSession) => {
+                return (_jsx(Dropdown.Item, { className: "px-2", isDisabled: !!settingActiveSession, onPress: () => setActiveSession(deviceSession.session.token), children: _jsx(UserView, { user: deviceSession.user }) }, 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 })] })] }));
+}

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

@@ -0,0 +1,10 @@
+/**
+ * Render the popover 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 popover content as a JSX element
+ */
+export declare function SwitchAccountSubmenu(): import("react/jsx-runtime").JSX.Element;