@better-auth-ui/heroui 1.6.0

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

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAuth } from "@better-auth-ui/react";
+import { cn } from "../../../lib/utils";
+import { Appearance } from "./appearance";
+import { ChangeEmail } from "./change-email";
+import { ManageAccounts } from "./manage-accounts";
+import { UserProfile } from "./user-profile";
+/**
+ * Renders the account settings layout including user profile, change email, appearance, and accounts management.
+ *
+ * UserProfile, ChangeEmail, and Appearance are always rendered; Accounts is rendered when `multiSession` is enabled.
+ *
+ * @param className - Optional additional CSS class names for the outer container.
+ * @returns The account settings container as a JSX element.
+ */
+export function AccountSettings({ className, ...props }) {
+    const { multiSession } = useAuth();
+    return (_jsxs("div", { className: cn("flex w-full flex-col gap-4 md:gap-6", className), ...props, children: [_jsx(UserProfile, {}), _jsx(ChangeEmail, {}), _jsx(Appearance, {}), multiSession && _jsx(ManageAccounts, {})] }));
+}

package/dist/src/components/settings/account/appearance.d.ts

@@ -0,0 +1,16 @@
+import { type CardProps } from "@heroui/react";
+export type AppearanceProps = {
+    className?: string;
+    variant?: CardProps["variant"];
+};
+/**
+ * Renders a theme selector card with visual theme previews.
+ *
+ * Displays a card containing radio buttons for selecting between system, light,
+ * and dark themes. Each option shows a visual preview of the theme. Only renders
+ * if theme settings are configured (theme, setTheme, and themes are provided).
+ *
+ * @param className - Optional additional CSS class names for the card container.
+ * @returns A JSX element containing the theme selector card, or null if theme settings are not configured.
+ */
+export declare function Appearance({ className, variant, ...props }: AppearanceProps & CardProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/src/components/settings/account/appearance.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ThemePreviewDark, ThemePreviewLight, ThemePreviewSystem, useAuth } from "@better-auth-ui/react";
+import { Display, Moon, Sun } from "@gravity-ui/icons";
+import { Card, cn, Label, Radio, RadioGroup, useIsHydrated } from "@heroui/react";
+/**
+ * Renders a theme selector card with visual theme previews.
+ *
+ * Displays a card containing radio buttons for selecting between system, light,
+ * and dark themes. Each option shows a visual preview of the theme. Only renders
+ * if theme settings are configured (theme, setTheme, and themes are provided).
+ *
+ * @param className - Optional additional CSS class names for the card container.
+ * @returns A JSX element containing the theme selector card, or null if theme settings are not configured.
+ */
+export function Appearance({ className, variant, ...props }) {
+    const { localization, settings: { theme, setTheme, themes } } = useAuth();
+    const hydrated = useIsHydrated();
+    if (!setTheme || !themes?.length) {
+        return null;
+    }
+    return (_jsxs(Card, { className: cn("p-4 md:p-6 gap-4", className), variant: variant, ...props, children: [_jsx(Card.Header, { children: _jsx(Card.Title, { className: "text-xl", children: localization.settings.appearance }) }), _jsx(Card.Content, { children: _jsxs(RadioGroup, { variant: variant === "transparent" ? "secondary" : "primary", value: hydrated ? theme : undefined, onChange: setTheme, isDisabled: !hydrated || !theme, children: [_jsx(Label, { className: "mb-2", children: localization.settings.theme }), _jsxs("div", { className: "grid gap-3 sm:grid-cols-2 lg:grid-cols-3", children: [themes.includes("system") && (_jsxs(Radio, { value: "system", className: cn(variant === "transparent"
+                                        ? "bg-surface"
+                                        : "bg-surface-secondary", "mt-0 group relative flex-col gap-4 rounded-xl border border-transparent px-5 py-4 transition-all data-[selected=true]:border-accent data-[selected=true]:bg-accent/10", "data-[focus-visible=true]:border-accent data-[focus-visible=true]:bg-accent/10"), children: [_jsx(Radio.Control, { className: "absolute top-3 right-3 size-5", children: _jsx(Radio.Indicator, {}) }), _jsxs(Radio.Content, { className: "flex flex-col gap-3", children: [_jsxs(Label, { className: "cursor-pointer font-medium flex gap-2 items-center", children: [_jsx(Display, { className: "text-muted" }), localization.settings.system] }), _jsx(ThemePreviewSystem, { className: "w-full" })] })] })), themes.includes("light") && (_jsxs(Radio, { value: "light", className: cn(variant === "transparent"
+                                        ? "bg-surface"
+                                        : "bg-surface-secondary", "mt-0 group relative flex-col gap-4 rounded-xl border border-transparent px-5 py-4 transition-all data-[selected=true]:border-accent data-[selected=true]:bg-accent/10", "data-[focus-visible=true]:border-accent data-[focus-visible=true]:bg-accent/10"), children: [_jsx(Radio.Control, { className: "absolute top-3 right-3 size-5", children: _jsx(Radio.Indicator, {}) }), _jsxs(Radio.Content, { className: "flex flex-col gap-3", children: [_jsxs(Label, { className: "cursor-pointer font-medium flex gap-2 items-center", children: [_jsx(Sun, { className: "text-muted" }), localization.settings.light] }), _jsx(ThemePreviewLight, { className: "w-full" })] })] })), themes.includes("dark") && (_jsxs(Radio, { value: "dark", className: cn(variant === "transparent"
+                                        ? "bg-surface"
+                                        : "bg-surface-secondary", "mt-0 group relative flex-col gap-4 rounded-xl border border-transparent px-5 py-4 transition-all data-[selected=true]:border-accent data-[selected=true]:bg-accent/10", "data-[focus-visible=true]:border-accent data-[focus-visible=true]:bg-accent/10"), children: [_jsx(Radio.Control, { className: "absolute top-3 right-3 size-5", children: _jsx(Radio.Indicator, {}) }), _jsxs(Radio.Content, { className: "flex flex-col gap-3", children: [_jsxs(Label, { className: "cursor-pointer font-medium flex gap-2 items-center", children: [_jsx(Moon, { className: "text-muted" }), localization.settings.dark] }), _jsx(ThemePreviewDark, { className: "w-full" })] })] }))] })] }) })] }));
+}

package/dist/src/components/settings/account/change-email.d.ts

@@ -0,0 +1,15 @@
+import { type CardProps } from "@heroui/react";
+export type ChangeEmailProps = {
+    className?: string;
+    variant?: CardProps["variant"];
+};
+/**
+ * Render a card containing a form to view and update the authenticated user's email.
+ *
+ * Shows a loading skeleton until session data is available, displays the current
+ * email as the form's default value, and sends a verification email to the
+ * new address upon successful submission.
+ *
+ * @returns A JSX element rendering the change-email card and form
+ */
+export declare function ChangeEmail({ className, variant, ...props }: ChangeEmailProps & CardProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/settings/account/change-email.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAuth, useChangeEmail, useSession } from "@better-auth-ui/react";
+import { Check, Envelope } from "@gravity-ui/icons";
+import { Button, Card, cn, FieldError, Fieldset, Form, InputGroup, Label, Skeleton, Spinner, TextField, toast } from "@heroui/react";
+/**
+ * Render a card containing a form to view and update the authenticated user's email.
+ *
+ * Shows a loading skeleton until session data is available, displays the current
+ * email as the form's default value, and sends a verification email to the
+ * new address upon successful submission.
+ *
+ * @returns A JSX element rendering the change-email card and form
+ */
+export function ChangeEmail({ className, variant, ...props }) {
+    const { localization, baseURL, viewPaths } = useAuth();
+    const { data: sessionData } = useSession({
+        throwOnError: (error) => {
+            toast.danger(error.error?.message || error.message);
+            return false;
+        }
+    });
+    const { mutate: changeEmail, isPending } = useChangeEmail({
+        onSuccess: () => toast.success(localization.settings.changeEmailSuccess),
+        onError: (error) => toast.danger(error.error?.message || error.message)
+    });
+    function handleSubmit(e) {
+        e.preventDefault();
+        const formData = new FormData(e.currentTarget);
+        changeEmail({
+            newEmail: formData.get("email"),
+            callbackURL: `${baseURL}/${viewPaths.settings.account}`
+        });
+    }
+    return (_jsxs(Card, { className: cn("p-4 md:p-6 gap-4", className), variant: variant, ...props, children: [_jsx(Card.Header, { children: _jsx(Card.Title, { className: "text-xl", children: localization.settings.changeEmail }) }), _jsx(Card.Content, { children: _jsx(Form, { onSubmit: handleSubmit, children: _jsxs(Fieldset, { className: "w-full gap-4", children: [_jsx(Fieldset.Group, { children: _jsxs(TextField, { name: "email", type: "email", defaultValue: sessionData?.user.email, isDisabled: isPending || !sessionData, children: [_jsx(Label, { children: localization.auth.email }), sessionData ? (_jsxs(InputGroup, { variant: variant === "transparent" ? "primary" : "secondary", children: [_jsx(InputGroup.Prefix, { children: _jsx(Envelope, {}) }), _jsx(InputGroup.Input, { required: true, autoComplete: "email", placeholder: localization.auth.emailPlaceholder })] })) : (_jsx(Skeleton, { className: "h-10 md:h-9 w-full rounded-xl" })), _jsx(FieldError, {})] }, sessionData?.user.email) }), _jsx(Fieldset.Actions, { children: _jsxs(Button, { type: "submit", isPending: isPending, isDisabled: !sessionData, children: [isPending ? _jsx(Spinner, { color: "current", size: "sm" }) : _jsx(Check, {}), localization.settings.updateEmail] }) })] }) }) })] }));
+}

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

@@ -0,0 +1,19 @@
+import type { Session, User } from "better-auth";
+export type DeviceSession = {
+    session: Session;
+    user: User;
+};
+export type ManageAccountProps = {
+    deviceSession?: DeviceSession | null;
+    isPending?: boolean;
+};
+/**
+ * Render a single account card with user info and switch/revoke controls.
+ *
+ * Shows the user's avatar and info. For non-active sessions, provides a switch button.
+ * All sessions have a revoke/sign-out button.
+ *
+ * @param deviceSession - The device session object containing session and user data
+ * @returns A JSX element containing the account card
+ */
+export declare function ManageAccount({ deviceSession, isPending }: ManageAccountProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAuth, useRevokeMultiSession, useSession, useSetActiveSession } from "@better-auth-ui/react";
+import { ArrowRightArrowLeft, ArrowRightFromSquare } from "@gravity-ui/icons";
+import { Button, Card, Spinner, toast } from "@heroui/react";
+import { UserView } from "../../user/user-view";
+/**
+ * Render a single account card with user info and switch/revoke controls.
+ *
+ * Shows the user's avatar and info. For non-active sessions, provides a switch button.
+ * All sessions have a revoke/sign-out button.
+ *
+ * @param deviceSession - The device session object containing session and user data
+ * @returns A JSX element containing the account card
+ */
+export function ManageAccount({ deviceSession, isPending }) {
+    const { localization } = useAuth();
+    const { data: sessionData } = useSession();
+    const { mutate: setActiveSession, isPending: isSwitching } = useSetActiveSession({
+        onError: (error) => toast.danger(error.error?.message || error.message)
+    });
+    const { mutate: revokeSession, isPending: isRevoking } = useRevokeMultiSession({
+        onError: (error) => toast.danger(error.error?.message || error.message),
+        onSuccess: () => toast.success(localization.settings.revokeSessionSuccess)
+    });
+    const isActive = deviceSession?.session.userId === sessionData?.session.userId;
+    return (_jsxs(Card, { className: "flex-row items-center border p-3 shadow-none", children: [_jsx(UserView, { user: deviceSession?.user, isPending: isPending, size: "md" }), deviceSession && (_jsxs("div", { className: "flex items-center gap-1 shrink-0 ml-auto", children: [!isActive && (_jsx(Button, { isIconOnly: true, variant: "ghost", size: "sm", onPress: () => setActiveSession({ sessionToken: deviceSession.session.token }), isPending: isSwitching || isRevoking, "aria-label": localization.auth.switchAccount, children: isSwitching ? (_jsx(Spinner, { color: "current", size: "sm" })) : (_jsx(ArrowRightArrowLeft, {})) })), _jsx(Button, { isIconOnly: true, variant: "ghost", size: "sm", onPress: () => revokeSession({ sessionToken: deviceSession.session.token }), isPending: isSwitching || isRevoking, "aria-label": localization.auth.signOut, children: isRevoking ? (_jsx(Spinner, { color: "current", size: "sm" })) : (_jsx(ArrowRightFromSquare, {})) })] }))] }));
+}

package/dist/src/components/settings/account/manage-accounts.d.ts

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

package/dist/src/components/settings/account/manage-accounts.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAuth, useListDeviceSessions, useSession } from "@better-auth-ui/react";
+import { CirclePlus } from "@gravity-ui/icons";
+import { buttonVariants, Card, cn, Link, toast } from "@heroui/react";
+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, ...props }) {
+    const { basePaths, localization, viewPaths } = useAuth();
+    const { data: sessionData } = useSession();
+    const { data: deviceSessions, isPending } = useListDeviceSessions({
+        throwOnError: (error) => {
+            if (error.error)
+                toast.danger(error.error.message);
+            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.manageAccounts }) }), _jsxs(Card.Content, { className: "gap-3", children: [_jsx(ManageAccount, { isPending: isPending, deviceSession: !isPending ? sessionData : null }), deviceSessions
+                        ?.filter((deviceSession) => deviceSession.session.id !== sessionData?.session.id)
+                        .map((deviceSession) => (_jsx(ManageAccount, { deviceSession: deviceSession }, deviceSession.session.id)))] }), _jsx(Card.Footer, { children: _jsxs(Link, { href: `${basePaths.auth}/${viewPaths.auth.signIn}`, className: cn("gap-2", buttonVariants({ variant: "secondary" })), children: [_jsx(CirclePlus, {}), localization.auth.addAccount] }) })] }));
+}

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

@@ -0,0 +1,13 @@
+import { type CardProps } from "@heroui/react";
+export type UserProfileProps = {
+    className?: string;
+    variant?: CardProps["variant"];
+};
+/**
+ * Render a profile card that lets the authenticated user view and update their display name.
+ *
+ * The component uses auth localization for labels, reflects session loading state with skeletons, shows the best-available user identifier (display username, name, or email), and wires the form submission to the user update action from auth hooks.
+ *
+ * @returns A JSX element containing the user profile card and an editable name form
+ */
+export declare function UserProfile({ className, variant, ...props }: UserProfileProps & CardProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAuth, useSession, useUpdateUser } from "@better-auth-ui/react";
+import { FloppyDisk, Pencil } from "@gravity-ui/icons";
+import { Button, Card, cn, FieldError, Fieldset, Form, Input, Label, Skeleton, Spinner, TextField, toast } from "@heroui/react";
+import { UserAvatar } from "../../user/user-avatar";
+/**
+ * Render a profile card that lets the authenticated user view and update their display name.
+ *
+ * The component uses auth localization for labels, reflects session loading state with skeletons, shows the best-available user identifier (display username, name, or email), and wires the form submission to the user update action from auth hooks.
+ *
+ * @returns A JSX element containing the user profile card and an editable name form
+ */
+export function UserProfile({ className, variant, ...props }) {
+    const { localization } = useAuth();
+    const { data: sessionData } = useSession();
+    const { mutate: updateUser, isPending } = useUpdateUser({
+        onError: (error) => toast.danger(error.error?.message || error.message),
+        onSuccess: () => toast.success(localization.settings.profileUpdatedSuccess)
+    });
+    function handleSubmit(e) {
+        e.preventDefault();
+        const formData = new FormData(e.currentTarget);
+        updateUser({ name: formData.get("name") });
+    }
+    return (_jsxs(Card, { className: cn("p-4 md:p-6 gap-4", className), variant: variant, ...props, children: [_jsx(Card.Header, { children: _jsx(Card.Title, { className: "text-xl", children: localization.settings.profile }) }), _jsx(Card.Content, { children: _jsx(Form, { onSubmit: handleSubmit, children: _jsxs(Fieldset, { className: "w-full gap-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Button, { type: "button", isIconOnly: true, variant: "ghost", className: "p-0 h-auto w-auto rounded-full", isDisabled: !sessionData, children: [_jsx(UserAvatar, { size: "lg" }), _jsx("span", { className: "absolute right-0 bottom-0 size-4 rounded-full bg-background ring ring-2 ring-border flex items-center justify-center", children: _jsx(Pencil, { className: "size-2.5 text-muted" }) })] }), sessionData ? (_jsxs("div", { className: "flex flex-col", children: [_jsx("p", { className: "text-sm font-medium leading-tight", children: sessionData?.user?.displayUsername ||
+                                                    sessionData?.user?.name ||
+                                                    sessionData?.user?.email }), (sessionData?.user?.displayUsername ||
+                                                sessionData?.user?.name) && (_jsx("p", { className: "text-muted text-xs", children: sessionData?.user?.email }))] })) : (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Skeleton, { className: "h-3.5 w-24 rounded-lg" }), _jsx(Skeleton, { className: "h-3 w-32 rounded-lg" })] }))] }), _jsx(Fieldset.Group, { children: _jsxs(TextField, { name: "name", defaultValue: sessionData?.user?.name, isDisabled: isPending || !sessionData, children: [_jsx(Label, { children: localization.auth.name }), sessionData ? (_jsx(Input, { autoComplete: "name", placeholder: localization.auth.name, variant: variant === "transparent" ? "primary" : "secondary" })) : (_jsx(Skeleton, { className: "h-10 md:h-9 w-full rounded-xl" })), _jsx(FieldError, {})] }, sessionData?.user?.name) }), _jsx(Fieldset.Actions, { children: _jsxs(Button, { type: "submit", isPending: isPending, isDisabled: !sessionData, children: [isPending ? (_jsx(Spinner, { color: "current", size: "sm" })) : (_jsx(FloppyDisk, {})), localization.settings.saveChanges] }) })] }) }) })] }));
+}

package/dist/src/components/settings/security/active-session.d.ts

@@ -0,0 +1,14 @@
+import type { Session } from "better-auth";
+export type ActiveSessionProps = {
+    session: Session;
+};
+/**
+ * Render a single active session card with device info and revoke control.
+ *
+ * Shows the 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.
+ *
+ * @param session - The session object containing id, token, userAgent, ipAddress, and createdAt
+ * @returns A JSX element containing the active session card
+ */
+export declare function ActiveSession({ session }: ActiveSessionProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/settings/security/active-session.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useAuth, useRevokeSession, useSession } from "@better-auth-ui/react";
+import { ArrowRightFromSquare, Display, Smartphone } from "@gravity-ui/icons";
+import { Button, Card, Chip, Spinner, toast } from "@heroui/react";
+import { UAParser } from "ua-parser-js";
+/**
+ * Render a single active session card with device info and revoke control.
+ *
+ * Shows the 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.
+ *
+ * @param session - The session object containing id, token, userAgent, ipAddress, and createdAt
+ * @returns A JSX element containing the active session card
+ */
+export function ActiveSession({ session }) {
+    const { basePaths, localization, viewPaths, navigate } = useAuth();
+    const { data: sessionData } = useSession();
+    const { mutate: revokeSession, isPending: isRevoking } = useRevokeSession({
+        onError: (error) => toast.danger(error.error?.message || error.message),
+        onSuccess: () => toast.success(localization.settings.revokeSessionSuccess)
+    });
+    const isCurrentSession = session.token === sessionData?.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({ token: session.token }), isPending: isRevoking, "aria-label": localization.settings.revokeSession, children: isRevoking ? (_jsx(Spinner, { color: "current", size: "sm" })) : (_jsx(ArrowRightFromSquare, {})) })] }));
+}

package/dist/src/components/settings/security/active-sessions.d.ts

@@ -0,0 +1,14 @@
+import { type CardProps } from "@heroui/react";
+export type ActiveSessionsProps = {
+    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 ActiveSessions({ className, ...props }: ActiveSessionsProps & CardProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/settings/security/active-sessions.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAuth, useListSessions, useSession } from "@better-auth-ui/react";
+import { Card, cn, Skeleton, toast } from "@heroui/react";
+import { ActiveSession } from "./active-session";
+/**
+ * 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 ActiveSessions({ className, ...props }) {
+    const { localization } = useAuth();
+    const { data: sessionData } = useSession();
+    const { data: sessions, isPending } = useListSessions({
+        throwOnError: (error) => {
+            if (error.error)
+                toast.danger(error.error.message);
+            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.activeSessions }) }), _jsx(Card.Content, { className: "gap-3", children: isPending ? (_jsx(SessionRowSkeleton, {})) : (sessions
+                    ?.toSorted((session) => session.id === sessionData?.session.id ? -1 : 1)
+                    .map((session) => (_jsx(ActiveSession, { session: session }, 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/src/components/settings/security/change-password.d.ts

@@ -0,0 +1,15 @@
+import { type CardProps } from "@heroui/react";
+export type ChangePasswordProps = {
+    className?: string;
+    variant?: CardProps["variant"];
+};
+/**
+ * Render a card form for changing the authenticated user's password.
+ *
+ * Displays a card with fields for current password, new password, and optionally
+ * confirm password (based on `emailAndPassword.confirmPassword`). All other sessions
+ * are revoked upon successful password change.
+ *
+ * @returns A JSX element containing the change-password card and form
+ */
+export declare function ChangePassword({ className, variant, ...props }: ChangePasswordProps & CardProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/settings/security/change-password.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAuth, useChangePassword, useSession } from "@better-auth-ui/react";
+import { Check, Eye, EyeSlash } from "@gravity-ui/icons";
+import { Button, Card, cn, FieldError, Fieldset, Form, Input, InputGroup, Label, Skeleton, Spinner, TextField, toast } from "@heroui/react";
+import { useState } from "react";
+/**
+ * Render a card form for changing the authenticated user's password.
+ *
+ * Displays a card with fields for current password, new password, and optionally
+ * confirm password (based on `emailAndPassword.confirmPassword`). All other sessions
+ * are revoked upon successful password change.
+ *
+ * @returns A JSX element containing the change-password card and form
+ */
+export function ChangePassword({ className, variant, ...props }) {
+    const { emailAndPassword, localization } = useAuth();
+    const { data: sessionData } = useSession();
+    const [currentPassword, setCurrentPassword] = useState("");
+    const [newPassword, setNewPassword] = useState("");
+    const [confirmPassword, setConfirmPassword] = useState("");
+    const { mutate: changePassword, isPending } = useChangePassword({
+        onError: (error) => {
+            setCurrentPassword("");
+            setNewPassword("");
+            setConfirmPassword("");
+            toast.danger(error.error?.message || error.message);
+        },
+        onSuccess: () => {
+            setCurrentPassword("");
+            setNewPassword("");
+            setConfirmPassword("");
+            toast.success(localization.settings.changePasswordSuccess);
+        }
+    });
+    const [isNewPasswordVisible, setIsNewPasswordVisible] = useState(false);
+    const [isConfirmPasswordVisible, setIsConfirmPasswordVisible] = useState(false);
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        if (emailAndPassword?.confirmPassword && newPassword !== confirmPassword) {
+            setCurrentPassword("");
+            setNewPassword("");
+            setConfirmPassword("");
+            toast.danger(localization.auth.passwordsDoNotMatch);
+            return;
+        }
+        changePassword({
+            currentPassword,
+            newPassword,
+            revokeOtherSessions: true
+        });
+    };
+    return (_jsxs(Card, { className: cn("p-4 md:p-6 gap-4", className), variant: variant, ...props, children: [_jsx(Card.Header, { children: _jsx(Card.Title, { className: "text-xl", children: localization.settings.changePassword }) }), _jsx(Card.Content, { children: _jsx(Form, { onSubmit: handleSubmit, children: _jsxs(Fieldset, { className: "w-full gap-4", children: [_jsxs(Fieldset.Group, { children: [_jsxs(TextField, { name: "currentPassword", type: "password", isDisabled: isPending || !sessionData, value: currentPassword, onChange: setCurrentPassword, children: [_jsx(Label, { children: localization.settings.currentPassword }), sessionData ? (_jsx(Input, { autoComplete: "current-password", placeholder: localization.settings.currentPasswordPlaceholder, required: true, variant: variant === "transparent" ? "primary" : "secondary" })) : (_jsx(Skeleton, { className: "h-10 md:h-9 w-full rounded-xl" })), _jsx(FieldError, {})] }), _jsxs(TextField, { minLength: emailAndPassword?.minPasswordLength, maxLength: emailAndPassword?.maxPasswordLength, isDisabled: isPending || !sessionData, value: newPassword, onChange: setNewPassword, children: [_jsx(Label, { children: localization.auth.newPassword }), sessionData ? (_jsxs(InputGroup, { variant: variant === "transparent" ? "primary" : "secondary", children: [_jsx(InputGroup.Input, { name: "newPassword", type: isNewPasswordVisible ? "text" : "password", autoComplete: "new-password", placeholder: localization.auth.newPasswordPlaceholder, required: true }), _jsx(InputGroup.Suffix, { className: "px-0", children: _jsx(Button, { isIconOnly: true, "aria-label": isNewPasswordVisible
+                                                                ? localization.auth.hidePassword
+                                                                : localization.auth.showPassword, size: "sm", variant: "ghost", onPress: () => setIsNewPasswordVisible(!isNewPasswordVisible), isDisabled: isPending, children: isNewPasswordVisible ? _jsx(EyeSlash, {}) : _jsx(Eye, {}) }) })] })) : (_jsx(Skeleton, { className: "h-10 md:h-9 w-full rounded-xl" })), _jsx(FieldError, {})] }), emailAndPassword?.confirmPassword && (_jsxs(TextField, { minLength: emailAndPassword?.minPasswordLength, maxLength: emailAndPassword?.maxPasswordLength, isDisabled: isPending || !sessionData, isRequired: true, value: confirmPassword, onChange: setConfirmPassword, children: [_jsx(Label, { children: localization.auth.confirmPassword }), sessionData ? (_jsxs(InputGroup, { variant: variant === "transparent" ? "primary" : "secondary", children: [_jsx(InputGroup.Input, { name: "confirmPassword", type: isConfirmPasswordVisible ? "text" : "password", autoComplete: "new-password", placeholder: localization.auth.confirmPasswordPlaceholder, required: true }), _jsx(InputGroup.Suffix, { className: "px-0", children: _jsx(Button, { isIconOnly: true, "aria-label": isConfirmPasswordVisible
+                                                                ? localization.auth.hidePassword
+                                                                : localization.auth.showPassword, size: "sm", variant: "ghost", onPress: () => setIsConfirmPasswordVisible(!isConfirmPasswordVisible), isDisabled: isPending, children: isConfirmPasswordVisible ? _jsx(EyeSlash, {}) : _jsx(Eye, {}) }) })] })) : (_jsx(Skeleton, { className: "h-10 md:h-9 w-full rounded-xl" })), _jsx(FieldError, {})] }))] }), _jsx(Fieldset.Actions, { children: _jsxs(Button, { type: "submit", isPending: isPending, isDisabled: !sessionData, children: [isPending ? _jsx(Spinner, { color: "current", size: "sm" }) : _jsx(Check, {}), localization.settings.updatePassword] }) })] }) }) })] }));
+}

package/dist/src/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 card with provider info and unlink control.
+ *
+ * Fetches additional account information from the provider using the accountInfo API
+ * and displays the provider name, account details, and an 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 card
+ */
+export declare function LinkedAccount({ account, provider }: LinkedAccountProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,46 @@
+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, PlugConnection, Xmark } from "@gravity-ui/icons";
+import { Button, Card, cn, Skeleton, Spinner, toast } from "@heroui/react";
+/**
+ * Render a single linked social account card with provider info and unlink control.
+ *
+ * Fetches additional account information from the provider using the accountInfo API
+ * and displays the provider name, account details, and an 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 card
+ */
+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(Card, { className: cn("flex-row items-center border p-3 shadow-none", !account && "border-dashed"), children: [_jsx("div", { className: "flex size-10 items-center justify-center rounded-xl bg-surface-secondary", children: ProviderIcon ? (_jsx(ProviderIcon, { className: cn("size-5", !account && "opacity-50") })) : (_jsx(PlugConnection, { className: cn("size-5", !account && "opacity-50") })) }), _jsxs("div", { className: "flex flex-col", 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", children: account
+                            ? displayName
+                            : localization.settings.linkProvider.replace("{{provider}}", providerName) }))] }), account ? (_jsx(Button, { className: "ml-auto", isIconOnly: true, variant: "ghost", 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(Xmark, {}) })) : (_jsxs(Button, { className: "ml-auto", variant: "secondary", 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/src/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, ...props }: LinkedAccountsProps & CardProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/settings/security/linked-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 { 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, ...props }) {
+    const { localization, socialProviders } = useAuth();
+    const { data: accounts, isPending } = useListAccounts({
+        throwOnError: (error) => {
+            if (error.error)
+                toast.danger(error.error.message);
+            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.linkedAccounts }) }), _jsx(Card.Content, { className: "gap-3", children: isPending ? (_jsx(AccountRowSkeleton, {})) : (_jsxs(_Fragment, { children: [accounts
+                            ?.filter((account) => account.providerId !== "credential")
+                            .map((account) => (_jsx(LinkedAccount, { account: account, provider: account.providerId }, account.id))), socialProviders?.map((provider) => {
+                            return _jsx(LinkedAccount, { 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/src/components/settings/security/security-settings.d.ts

@@ -0,0 +1,15 @@
+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.
+ *
+ * @param className - Optional additional CSS class names for the outer container.
+ * @returns The security settings container as a JSX element.
+ */
+export declare function SecuritySettings({ className, ...props }: SecuritySettingsProps & ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAuth } from "@better-auth-ui/react";
+import { cn } from "../../../lib/utils";
+import { ActiveSessions } from "./active-sessions";
+import { ChangePassword } from "./change-password";
+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.
+ *
+ * @param className - Optional additional CSS class names for the outer container.
+ * @returns The security settings container as a JSX element.
+ */
+export function SecuritySettings({ className, ...props }) {
+    const { 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, {}), socialProviders?.length && _jsx(LinkedAccounts, {}), _jsx(ActiveSessions, {})] }));
+}