@better-auth-ui/heroui 1.6.0 → 1.6.1

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

@@ -1,35 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,57 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,46 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

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

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

@@ -1,29 +0,0 @@
-import type { SettingsView } from "@better-auth-ui/react/core";
-import { type TabsProps } from "@heroui/react";
-import { type ComponentProps } from "react";
-export type SettingsProps = {
-    className?: string;
-    hideNav?: boolean;
-    path?: string;
-    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
- * @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, view, ...props }: SettingsProps & ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
-/**
- * Renders a responsive pair of Tabs components: horizontal on small screens and vertical on medium-and-up screens.
- *
- * @param className - Additional CSS classes applied to both responsive tab containers.
- * @param props - All other props are forwarded to each underlying Tabs component.
- * @returns A JSX element containing the responsive Tabs pair.
- */
-export declare function ResponsiveTabs({ className, ...props }: TabsProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,39 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useAuth, useAuthenticate } from "@better-auth-ui/react";
-import { Person, Shield } from "@gravity-ui/icons";
-import { cn, Tabs, useIsHydrated } 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
- * @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, 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);
-    const isHydrated = useIsHydrated();
-    return (_jsxs("div", { className: cn("w-full flex flex-col md:flex-row gap-4 md:gap-6", className), ...props, children: [_jsx(ResponsiveTabs, { selectedKey: currentView, className: cn(hideNav && "hidden"), children: _jsx(Tabs.ListContainer, { children: _jsxs(Tabs.List, { "aria-label": localization.settings.settings, className: "overflow-auto md:w-64 lg:w-72 xl:w-80", children: [_jsxs(Tabs.Tab, { id: "account", href: `${basePaths.settings}/${viewPaths.settings.account}`, className: "gap-2", children: [_jsx(Person, {}), localization.settings.account, _jsx(Tabs.Indicator, {})] }), _jsxs(Tabs.Tab, { id: "security", href: `${basePaths.settings}/${viewPaths.settings.security}`, className: "gap-2", children: [_jsx(Shield, {}), localization.settings.security, _jsx(Tabs.Indicator, {})] })] }) }) }), currentView === "account" && _jsx(AccountSettings, {}), currentView === "security" && _jsx(SecuritySettings, {})] }, `settings-${isHydrated}`));
-}
-/**
- * Renders a responsive pair of Tabs components: horizontal on small screens and vertical on medium-and-up screens.
- *
- * @param className - Additional CSS classes applied to both responsive tab containers.
- * @param props - All other props are forwarded to each underlying Tabs component.
- * @returns A JSX element containing the responsive Tabs pair.
- */
-export function ResponsiveTabs({ className, ...props }) {
-    return (_jsxs(_Fragment, { children: [_jsx(Tabs, { className: cn("md:hidden", className), orientation: "horizontal", ...props }), _jsx(Tabs, { className: cn("hidden md:flex", className), orientation: "vertical", ...props })] }));
-}

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

@@ -1,16 +0,0 @@
-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/src/components/user/switch-account-item.js

@@ -1,14 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useSetActiveSession } from "@better-auth-ui/react";
-import { Dropdown, Spinner } 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();
-    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/src/components/user/switch-account-menu.d.ts

@@ -1,10 +0,0 @@
-/**
- * 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/src/components/user/switch-account-menu.js

@@ -1,23 +0,0 @@
-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 } 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: sessionData } = useSession();
-    const { data: deviceSessions, isPending } = useListDeviceSessions();
-    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 !== sessionData?.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/src/components/user/user-avatar.d.ts

@@ -1,24 +0,0 @@
-import { type AvatarProps } from "@heroui/react";
-import type { User } from "better-auth";
-import type { ReactNode } from "react";
-export type UserAvatarProps = {
-    className?: string;
-    fallback?: ReactNode;
-    isPending?: boolean;
-    user?: User & {
-        username?: string | null;
-        displayUsername?: string | null;
-    };
-    size?: AvatarProps["size"];
-};
-/**
- * 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 declare function UserAvatar({ className, fallback, isPending, user, size, style, ...props }: UserAvatarProps & AvatarProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,31 +0,0 @@
-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: sessionData, 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 ?? sessionData?.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" }) })] }));
-}

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

@@ -1,21 +0,0 @@
-import { type ButtonProps, type DropdownPopoverProps } from "@heroui/react";
-export type UserButtonProps = {
-    className?: string;
-    size?: "default" | "icon";
-    placement?: DropdownPopoverProps["placement"];
-    themeToggle?: boolean;
-    variant?: ButtonProps["variant"];
-};
-/**
- * Render a user account dropdown button that shows account actions, session switching, and theme controls.
- *
- * Renders either an icon-only trigger or a full button showing the current user state; its dropdown contains account settings, multi-session switching (when enabled), theme selection (when enabled), and sign-in/sign-out flows depending on authentication state.
- *
- * @param className - Additional CSS classes applied to the trigger element
- * @param placement - Dropdown popover placement (e.g., "bottom", "top-start", "bottom-end")
- * @param size - "icon" renders an avatar-only trigger; "default" renders a button with label and chevron
- * @param variant - Button visual variant passed to the underlying Button component
- * @param themeToggle - When true and theming is available, show theme selection controls in the menu
- * @returns The user button and its dropdown menu as a JSX element
- */
-export declare function UserButton({ className, placement, size, variant, themeToggle }: UserButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/user/user-button.js

@@ -1,24 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useAuth, useSession } from "@better-auth-ui/react";
-import { ArrowRightFromSquare, ArrowRightToSquare, ChevronsExpandVertical, Display, Gear, Moon, PersonPlus, Persons, Sun } from "@gravity-ui/icons";
-import { Button, cn, Dropdown, Label, Separator, Tabs } from "@heroui/react";
-import { SwitchAccountMenu } from "./switch-account-menu";
-import { UserAvatar } from "./user-avatar";
-import { UserView } from "./user-view";
-/**
- * Render a user account dropdown button that shows account actions, session switching, and theme controls.
- *
- * Renders either an icon-only trigger or a full button showing the current user state; its dropdown contains account settings, multi-session switching (when enabled), theme selection (when enabled), and sign-in/sign-out flows depending on authentication state.
- *
- * @param className - Additional CSS classes applied to the trigger element
- * @param placement - Dropdown popover placement (e.g., "bottom", "top-start", "bottom-end")
- * @param size - "icon" renders an avatar-only trigger; "default" renders a button with label and chevron
- * @param variant - Button visual variant passed to the underlying Button component
- * @param themeToggle - When true and theming is available, show theme selection controls in the menu
- * @returns The user button and its dropdown menu as a JSX element
- */
-export function UserButton({ className, placement = "bottom", size = "default", variant = "ghost", themeToggle = true }) {
-    const { basePaths, viewPaths, localization, multiSession, settings: { theme, setTheme, themes } } = useAuth();
-    const { data: sessionData, isPending: sessionPending } = useSession();
-    return (_jsxs(Dropdown, { children: [size === "icon" ? (_jsx(Dropdown.Trigger, { className: cn("rounded-full", className), children: _jsx(UserAvatar, {}) })) : (_jsxs(Button, { variant: variant, className: cn("h-auto font-normal justify-start px-3 py-2 text-left", className), children: [sessionData || sessionPending ? (_jsx(UserView, { isPending: sessionPending })) : (_jsxs(_Fragment, { children: [_jsx(UserAvatar, {}), _jsx("p", { className: "text-sm font-medium", children: localization.auth.account })] })), _jsx(ChevronsExpandVertical, { className: "ml-auto size-3.5" })] })), _jsxs(Dropdown.Popover, { placement: placement, className: "min-w-40 md:min-w-56 max-w-[48svw]", children: [sessionData && (_jsx("div", { className: "px-3 pt-3 pb-1", children: _jsx(UserView, {}) })), _jsx(Dropdown.Menu, { children: sessionData ? (_jsxs(_Fragment, { children: [_jsxs(Dropdown.Item, { textValue: localization.settings.settings, href: `${basePaths.settings}/${viewPaths.settings.account}`, children: [_jsx(Gear, { className: "text-muted" }), _jsx(Label, { children: localization.settings.settings })] }), multiSession && (_jsxs(Dropdown.SubmenuTrigger, { children: [_jsxs(Dropdown.Item, { textValue: localization.auth.switchAccount, children: [_jsx(Persons, { className: "text-muted" }), _jsx(Label, { children: localization.auth.switchAccount }), _jsx(Dropdown.SubmenuIndicator, {})] }), _jsx(Dropdown.Popover, { className: "min-w-40 md:min-w-56 max-w-[48svw]", children: _jsx(SwitchAccountMenu, {}) })] })), themeToggle && theme && setTheme && themes?.length && (_jsxs(Dropdown.Item, { className: "py-1 pe-2", children: [_jsx(Label, { children: localization.settings.theme }), _jsx(Tabs, { className: "ml-auto", selectedKey: theme, onSelectionChange: (key) => setTheme(key), children: _jsx(Tabs.ListContainer, { children: _jsxs(Tabs.List, { "aria-label": localization.settings.theme, className: "*:h-5 *:w-5 *:p-0", children: [themes.includes("system") && (_jsxs(Tabs.Tab, { id: "system", "aria-label": localization.settings.system, children: [_jsx(Display, { className: "size-3" }), _jsx(Tabs.Indicator, {})] })), themes.includes("light") && (_jsxs(Tabs.Tab, { id: "light", "aria-label": localization.settings.light, children: [_jsx(Sun, { className: "size-3" }), _jsx(Tabs.Indicator, {})] })), themes.includes("dark") && (_jsxs(Tabs.Tab, { id: "dark", "aria-label": localization.settings.dark, children: [_jsx(Moon, { className: "size-3" }), _jsx(Tabs.Indicator, {})] }))] }) }) })] })), _jsx(Separator, {}), _jsxs(Dropdown.Item, { textValue: localization.auth.signOut, href: `${basePaths.auth}/${viewPaths.auth.signOut}`, children: [_jsx(ArrowRightFromSquare, { className: "text-muted" }), _jsx(Label, { children: localization.auth.signOut })] })] })) : (_jsxs(_Fragment, { children: [_jsxs(Dropdown.Item, { textValue: localization.auth.signIn, href: `${basePaths.auth}/${viewPaths.auth.signIn}`, children: [_jsx(ArrowRightToSquare, { className: "text-muted" }), _jsx(Label, { children: localization.auth.signIn })] }), _jsxs(Dropdown.Item, { textValue: localization.auth.signUp, href: `${basePaths.auth}/${viewPaths.auth.signUp}`, children: [_jsx(PersonPlus, { className: "text-muted" }), _jsx(Label, { children: localization.auth.signUp })] })] })) })] })] }));
-}

package/dist/src/components/user/user-view.d.ts

@@ -1,21 +0,0 @@
-import { type AvatarProps } from "@heroui/react";
-import type { User } from "better-auth";
-import type { ComponentProps } from "react";
-export type UserViewProps = {
-    className?: string;
-    isPending?: boolean;
-    size?: AvatarProps["size"];
-    user?: User & {
-        username?: string | null;
-        displayUsername?: string | null;
-    };
-};
-/**
- * Render a compact user item with an avatar, a primary label (display username, name, or email), and an optional secondary email line.
- *
- * @param isPending - If true and no `user` prop is provided, renders a loading skeleton instead of user details
- * @param size - Avatar size variant; defaults to `"sm"`
- * @param user - Optional user to display; when omitted the current session user is used if available
- * @returns A React element containing the user's avatar and text labels
- */
-export declare function UserView({ className, isPending, size, user, ...props }: UserViewProps & ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/user/user-view.js

@@ -1,24 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useSession } from "@better-auth-ui/react";
-import { cn, Skeleton } from "@heroui/react";
-import { UserAvatar } from "./user-avatar";
-/**
- * Render a compact user item with an avatar, a primary label (display username, name, or email), and an optional secondary email line.
- *
- * @param isPending - If true and no `user` prop is provided, renders a loading skeleton instead of user details
- * @param size - Avatar size variant; defaults to `"sm"`
- * @param user - Optional user to display; when omitted the current session user is used if available
- * @returns A React element containing the user's avatar and text labels
- */
-export function UserView({ className, isPending, size = "sm", user, ...props }) {
-    const { data: sessionData, isPending: sessionPending } = useSession({
-        enabled: !user && !isPending
-    });
-    const resolvedUser = user ?? sessionData?.user;
-    if ((isPending || sessionPending) && !user) {
-        return (_jsxs("div", { className: cn("flex items-center gap-2 min-w-0", className), ...props, children: [_jsx(UserAvatar, { isPending: true, size: size }), _jsxs("div", { className: "flex flex-col gap-1 min-w-0", children: [_jsx(Skeleton, { className: "h-3.5 w-24 rounded-lg" }), _jsx(Skeleton, { className: "h-3 w-32 rounded-lg" })] })] }));
-    }
-    return (_jsxs("div", { className: cn("flex items-center gap-2 min-w-0", className), ...props, children: [_jsx(UserAvatar, { user: resolvedUser, size: size }), _jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-sm font-medium truncate leading-tight", children: resolvedUser?.displayUsername ||
-                            resolvedUser?.name ||
-                            resolvedUser?.email }), (resolvedUser?.displayUsername || resolvedUser?.name) && (_jsx("p", { className: "text-muted text-xs mb-0.5 truncate overflow-x-hidden", children: resolvedUser?.email }))] })] }));
-}

package/dist/src/core.d.ts

@@ -1 +0,0 @@
-export * from "@better-auth-ui/react/core";