@better-auth-ui/heroui 1.6.0

package/dist/components/auth/sign-up.d.ts

@@ -0,0 +1,19 @@
+import { type CardProps } from "@heroui/react";
+import { type SocialLayout } from "./provider-buttons";
+export type SignUpProps = {
+    className?: string;
+    socialLayout?: SocialLayout;
+    socialPosition?: "top" | "bottom";
+    variant?: CardProps["variant"];
+};
+/**
+ * Render a sign-up form with name, email, password (and optional confirm password) fields, optional social provider buttons, and password visibility controls.
+ *
+ * The component reflects request state by disabling inputs and showing a pending indicator during sign-up or social sign-in.
+ *
+ * @param className - Additional CSS classes applied to the outer card container
+ * @param socialLayout - Social layout to apply to the provider buttons component
+ * @param socialPosition - Position of social provider buttons relative to the form; `"top"` or `"bottom"` (default `"bottom"`)
+ * @returns The sign-up form React element
+ */
+export declare function SignUp({ className, socialLayout, socialPosition, variant, ...props }: SignUpProps & CardProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/auth/sign-up.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAuth, useSignInSocial, useSignUpEmail } from "@better-auth-ui/react";
+import { Eye, EyeSlash } from "@gravity-ui/icons";
+import { Button, Card, cn, Description, FieldError, Form, Input, InputGroup, Label, Link, Spinner, TextField, toast } from "@heroui/react";
+import { useState } from "react";
+import { FieldSeparator } from "./field-separator";
+import { MagicLinkButton } from "./magic-link-button";
+import { ProviderButtons } from "./provider-buttons";
+/**
+ * Render a sign-up form with name, email, password (and optional confirm password) fields, optional social provider buttons, and password visibility controls.
+ *
+ * The component reflects request state by disabling inputs and showing a pending indicator during sign-up or social sign-in.
+ *
+ * @param className - Additional CSS classes applied to the outer card container
+ * @param socialLayout - Social layout to apply to the provider buttons component
+ * @param socialPosition - Position of social provider buttons relative to the form; `"top"` or `"bottom"` (default `"bottom"`)
+ * @returns The sign-up form React element
+ */
+export function SignUp({ className, socialLayout, socialPosition = "bottom", variant, ...props }) {
+    const { basePaths, emailAndPassword, localization, magicLink, redirectTo, socialProviders, viewPaths, navigate } = useAuth();
+    const [password, setPassword] = useState("");
+    const [confirmPassword, setConfirmPassword] = useState("");
+    const { mutate: signUpEmail, isPending: signUpPending } = useSignUpEmail({
+        onError: (error) => {
+            setPassword("");
+            setConfirmPassword("");
+            toast.danger(error.error?.message || error.message);
+        },
+        onSuccess: () => {
+            if (emailAndPassword?.requireEmailVerification) {
+                toast.success(localization.auth.verifyYourEmail);
+                navigate({ to: `${basePaths.auth}/${viewPaths.auth.signIn}` });
+            }
+            else {
+                navigate({ to: redirectTo });
+            }
+        }
+    });
+    const [socialRedirecting, setSocialRedirecting] = useState(false);
+    const { mutate: signInSocial, isPending: socialPending } = useSignInSocial({
+        onError: (error) => toast.danger(error.error?.message || error.message),
+        onSuccess: () => {
+            setSocialRedirecting(true);
+            setTimeout(() => {
+                setSocialRedirecting(false);
+            }, 5000);
+        }
+    });
+    const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+    const [isConfirmPasswordVisible, setIsConfirmPasswordVisible] = useState(false);
+    const isPending = signUpPending || socialPending || socialRedirecting;
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        const formData = new FormData(e.currentTarget);
+        const name = formData.get("name");
+        const email = formData.get("email");
+        if (emailAndPassword?.confirmPassword && password !== confirmPassword) {
+            toast.danger(localization.auth.passwordsDoNotMatch);
+            setPassword("");
+            setConfirmPassword("");
+            return;
+        }
+        signUpEmail({ name, email, password });
+    };
+    const showSeparator = emailAndPassword?.enabled && !!socialProviders?.length;
+    return (_jsxs(Card, { className: cn("w-full max-w-sm p-4 md:p-6", className), variant: variant, ...props, children: [_jsx(Card.Header, { children: _jsx(Card.Title, { className: "text-xl font-semibold mb-1", children: localization.auth.signUp }) }), _jsxs(Card.Content, { className: "gap-4", children: [socialPosition === "top" && (_jsxs(_Fragment, { children: [!!socialProviders?.length && (_jsx(ProviderButtons, { isPending: isPending, socialLayout: socialLayout, signInSocial: signInSocial })), showSeparator && (_jsx(FieldSeparator, { children: localization.auth.or }))] })), emailAndPassword?.enabled && (_jsxs(Form, { onSubmit: handleSubmit, className: "flex flex-col gap-4", children: [_jsxs(TextField, { name: "name", type: "text", autoComplete: "name", isDisabled: isPending, children: [_jsx(Label, { children: localization.auth.name }), _jsx(Input, { placeholder: localization.auth.namePlaceholder, required: true, variant: variant === "transparent" ? "primary" : "secondary" }), _jsx(FieldError, {})] }), _jsxs(TextField, { name: "email", type: "email", autoComplete: "email", isDisabled: isPending, children: [_jsx(Label, { children: localization.auth.email }), _jsx(Input, { placeholder: localization.auth.emailPlaceholder, required: true, variant: variant === "transparent" ? "primary" : "secondary" }), _jsx(FieldError, {})] }), _jsxs(TextField, { minLength: emailAndPassword?.minPasswordLength, maxLength: emailAndPassword?.maxPasswordLength, name: "password", autoComplete: "new-password", isDisabled: isPending, value: password, onChange: setPassword, children: [_jsx(Label, { children: localization.auth.password }), _jsxs(InputGroup, { variant: variant === "transparent" ? "primary" : "secondary", children: [_jsx(InputGroup.Input, { placeholder: localization.auth.passwordPlaceholder, type: isPasswordVisible ? "text" : "password", name: "password", required: true }), _jsx(InputGroup.Suffix, { className: "px-0", children: _jsx(Button, { isIconOnly: true, "aria-label": isPasswordVisible
+                                                        ? localization.auth.hidePassword
+                                                        : localization.auth.showPassword, size: "sm", variant: "ghost", onPress: () => setIsPasswordVisible(!isPasswordVisible), isDisabled: isPending, children: isPasswordVisible ? _jsx(EyeSlash, {}) : _jsx(Eye, {}) }) })] }), _jsx(FieldError, {})] }), emailAndPassword?.confirmPassword && (_jsxs(TextField, { minLength: emailAndPassword?.minPasswordLength, maxLength: emailAndPassword?.maxPasswordLength, name: "confirmPassword", autoComplete: "new-password", isDisabled: isPending, value: confirmPassword, onChange: setConfirmPassword, children: [_jsx(Label, { children: localization.auth.confirmPassword }), _jsxs(InputGroup, { variant: variant === "transparent" ? "primary" : "secondary", children: [_jsx(InputGroup.Input, { name: "confirmPassword", placeholder: localization.auth.confirmPasswordPlaceholder, type: isConfirmPasswordVisible ? "text" : "password", 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(FieldError, {})] })), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs(Button, { type: "submit", className: "w-full", isPending: isPending, children: [isPending && _jsx(Spinner, { color: "current", size: "sm" }), localization.auth.signUp] }), magicLink && (_jsx(MagicLinkButton, { view: "signUp", isPending: isPending }))] })] })), socialPosition === "bottom" && (_jsxs(_Fragment, { children: [showSeparator && (_jsx(FieldSeparator, { children: localization.auth.or })), !!socialProviders?.length && (_jsx(ProviderButtons, { socialLayout: socialLayout, signInSocial: signInSocial, isPending: isPending }))] }))] }), _jsx(Card.Footer, { className: "flex-col", children: _jsxs(Description, { className: "text-sm", children: [localization.auth.alreadyHaveAnAccount, " ", _jsx(Link, { href: `${basePaths.auth}/${viewPaths.auth.signIn}`, className: "text-accent decoration-accent no-underline hover:underline", children: localization.auth.signIn })] }) })] }));
+}

package/dist/components/email/email-changed-email.d.ts

@@ -0,0 +1,3 @@
+import { type EmailChangedEmailProps } from "@better-auth-ui/react";
+export type { EmailChangedEmailProps } from "@better-auth-ui/react";
+export declare function EmailChangedEmail({ colors, classNames, ...props }: EmailChangedEmailProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/email/email-changed-email.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { EmailChangedEmail as EmailChangedEmailPrimitive } from "@better-auth-ui/react";
+import { cn } from "@heroui/react";
+export function EmailChangedEmail({ colors, classNames, ...props }) {
+    return (_jsx(EmailChangedEmailPrimitive, { colors: {
+            light: {
+                background: "#F5F5F5",
+                primary: "#0285F7",
+                primaryForeground: "#FCFCFC",
+                ...colors?.light
+            },
+            dark: {
+                background: "#060607",
+                primary: "#0584F6",
+                primaryForeground: "#FCFCFC",
+                ...colors?.dark
+            }
+        }, classNames: {
+            ...classNames,
+            card: cn("border-none rounded-3xl", classNames?.card),
+            button: cn("rounded-full", classNames?.button)
+        }, ...props }));
+}

package/dist/components/email/email-verification-email.d.ts

@@ -0,0 +1,3 @@
+import { type EmailVerificationEmailProps } from "@better-auth-ui/react";
+export type { EmailVerificationEmailProps } from "@better-auth-ui/react";
+export declare function EmailVerificationEmail({ colors, classNames, ...props }: EmailVerificationEmailProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/email/email-verification-email.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { EmailVerificationEmail as EmailVerificationEmailPrimitive } from "@better-auth-ui/react";
+import { cn } from "@heroui/react";
+export function EmailVerificationEmail({ colors, classNames, ...props }) {
+    return (_jsx(EmailVerificationEmailPrimitive, { colors: {
+            light: {
+                background: "#F5F5F5",
+                primary: "#0285F7",
+                primaryForeground: "#FCFCFC",
+                ...colors?.light
+            },
+            dark: {
+                background: "#060607",
+                primary: "#0584F6",
+                primaryForeground: "#FCFCFC",
+                ...colors?.dark
+            }
+        }, classNames: {
+            ...classNames,
+            card: cn("border-none rounded-3xl", classNames?.card),
+            button: cn("rounded-full", classNames?.button)
+        }, ...props }));
+}

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

@@ -0,0 +1,3 @@
+import { type MagicLinkEmailProps } from "@better-auth-ui/react";
+export type { MagicLinkEmailProps } from "@better-auth-ui/react";
+export declare function MagicLinkEmail({ colors, classNames, ...props }: MagicLinkEmailProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MagicLinkEmail as MagicLinkEmailPrimitive } from "@better-auth-ui/react";
+import { cn } from "@heroui/react";
+export function MagicLinkEmail({ colors, classNames, ...props }) {
+    return (_jsx(MagicLinkEmailPrimitive, { colors: {
+            light: {
+                background: "#F5F5F5",
+                primary: "#0285F7",
+                primaryForeground: "#FCFCFC",
+                ...colors?.light
+            },
+            dark: {
+                background: "#060607",
+                primary: "#0584F6",
+                primaryForeground: "#FCFCFC",
+                ...colors?.dark
+            }
+        }, classNames: {
+            ...classNames,
+            card: cn("border-none rounded-3xl", classNames?.card),
+            button: cn("rounded-full", classNames?.button)
+        }, ...props }));
+}

package/dist/components/email/new-device-email.d.ts

@@ -0,0 +1,3 @@
+import { type NewDeviceEmailProps } from "@better-auth-ui/react";
+export type { NewDeviceEmailProps } from "@better-auth-ui/react";
+export declare function NewDeviceEmail({ colors, classNames, ...props }: NewDeviceEmailProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/email/new-device-email.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { NewDeviceEmail as NewDeviceEmailPrimitive } from "@better-auth-ui/react";
+import { cn } from "@heroui/react";
+export function NewDeviceEmail({ colors, classNames, ...props }) {
+    return (_jsx(NewDeviceEmailPrimitive, { colors: {
+            light: {
+                background: "#F5F5F5",
+                primary: "#0285F7",
+                primaryForeground: "#FCFCFC",
+                ...colors?.light
+            },
+            dark: {
+                background: "#060607",
+                primary: "#0584F6",
+                primaryForeground: "#FCFCFC",
+                ...colors?.dark
+            }
+        }, classNames: {
+            ...classNames,
+            card: cn("border-none rounded-3xl", classNames?.card),
+            button: cn("rounded-full", classNames?.button)
+        }, ...props }));
+}

package/dist/components/email/otp-email.d.ts

@@ -0,0 +1,3 @@
+import { type OtpEmailProps } from "@better-auth-ui/react";
+export type { OtpEmailProps } from "@better-auth-ui/react";
+export declare function OtpEmail({ colors, classNames, ...props }: OtpEmailProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/email/otp-email.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { OtpEmail as OtpEmailPrimitive } from "@better-auth-ui/react";
+import { cn } from "@heroui/react";
+export function OtpEmail({ colors, classNames, ...props }) {
+    return (_jsx(OtpEmailPrimitive, { colors: {
+            light: {
+                background: "#F5F5F5",
+                primary: "#0285F7",
+                primaryForeground: "#FCFCFC",
+                ...colors?.light
+            },
+            dark: {
+                background: "#060607",
+                primary: "#0584F6",
+                primaryForeground: "#FCFCFC",
+                ...colors?.dark
+            }
+        }, classNames: {
+            ...classNames,
+            card: cn("border-none rounded-3xl", classNames?.card)
+        }, ...props }));
+}

package/dist/components/email/password-changed-email.d.ts

@@ -0,0 +1,3 @@
+import { type PasswordChangedEmailProps } from "@better-auth-ui/react";
+export type { PasswordChangedEmailProps } from "@better-auth-ui/react";
+export declare function PasswordChangedEmail({ colors, classNames, ...props }: PasswordChangedEmailProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/email/password-changed-email.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PasswordChangedEmail as PasswordChangedEmailPrimitive } from "@better-auth-ui/react";
+import { cn } from "@heroui/react";
+export function PasswordChangedEmail({ colors, classNames, ...props }) {
+    return (_jsx(PasswordChangedEmailPrimitive, { colors: {
+            light: {
+                background: "#F5F5F5",
+                primary: "#0285F7",
+                primaryForeground: "#FCFCFC",
+                ...colors?.light
+            },
+            dark: {
+                background: "#060607",
+                primary: "#0584F6",
+                primaryForeground: "#FCFCFC",
+                ...colors?.dark
+            }
+        }, classNames: {
+            ...classNames,
+            card: cn("border-none rounded-3xl", classNames?.card),
+            button: cn("rounded-full", classNames?.button)
+        }, ...props }));
+}

package/dist/components/email/reset-password-email.d.ts

@@ -0,0 +1,3 @@
+import { type ResetPasswordEmailProps } from "@better-auth-ui/react";
+export type { ResetPasswordEmailProps } from "@better-auth-ui/react";
+export declare function ResetPasswordEmail({ colors, classNames, ...props }: ResetPasswordEmailProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/email/reset-password-email.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ResetPasswordEmail as ResetPasswordEmailPrimitive } from "@better-auth-ui/react";
+import { cn } from "@heroui/react";
+export function ResetPasswordEmail({ colors, classNames, ...props }) {
+    return (_jsx(ResetPasswordEmailPrimitive, { colors: {
+            light: {
+                background: "#F5F5F5",
+                primary: "#0285F7",
+                primaryForeground: "#FCFCFC",
+                ...colors?.light
+            },
+            dark: {
+                background: "#060607",
+                primary: "#0584F6",
+                primaryForeground: "#FCFCFC",
+                ...colors?.dark
+            }
+        }, classNames: {
+            ...classNames,
+            card: cn("border-none rounded-3xl", classNames?.card),
+            button: cn("rounded-full", classNames?.button)
+        }, ...props }));
+}

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

@@ -0,0 +1,16 @@
+import { type CardProps } from "@heroui/react";
+import type { ComponentProps } from "react";
+export type AccountSettingsProps = {
+    className?: string;
+    variant?: CardProps["variant"];
+};
+/**
+ * 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.
+ * @param variant - Card variant forwarded to each account settings card.
+ * @returns The account settings container as a JSX element.
+ */
+export declare function AccountSettings({ className, variant, ...props }: AccountSettingsProps & ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAuth } from "@better-auth-ui/react";
+import { cn } from "@heroui/react";
+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.
+ * @param variant - Card variant forwarded to each account settings card.
+ * @returns The account settings container as a JSX element.
+ */
+export function AccountSettings({ className, variant, ...props }) {
+    const { multiSession, emailAndPassword, magicLink, appearance: { setTheme } } = useAuth();
+    return (_jsxs("div", { className: cn("flex w-full flex-col gap-4 md:gap-6", className), ...props, children: [_jsx(UserProfile, { variant: variant }), (emailAndPassword?.enabled || magicLink) && (_jsx(ChangeEmail, { variant: variant })), setTheme && _jsx(Appearance, { variant: variant }), multiSession && _jsx(ManageAccounts, { variant: variant })] }));
+}

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

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

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

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAuth, useListDeviceSessions, useRevokeMultiSession, useSession, useSetActiveSession } from "@better-auth-ui/react";
+import { ArrowRightArrowLeft, ArrowRightFromSquare, CirclePlus } from "@gravity-ui/icons";
+import { Button, buttonVariants, Card, cn, Spinner } from "@heroui/react";
+import { UserView } from "../../user/user-view";
+/**
+ * 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 Accounts({ className, ...props }) {
+    const { basePaths, localization, viewPaths, Link } = useAuth();
+    const { data: sessionData } = useSession();
+    const { data: deviceSessions, isPending } = useListDeviceSessions();
+    const { settingActiveSession, setActiveSession } = useSetActiveSession();
+    const { revokingSession, revokeSession } = useRevokeMultiSession();
+    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.accounts }) }), _jsx(Card.Content, { className: "gap-3", children: !isPending ? (deviceSessions?.map((deviceSession) => {
+                    const isActive = deviceSession.session.userId === sessionData?.session.userId;
+                    const isSwitching = settingActiveSession === deviceSession.session.token;
+                    const isRevoking = revokingSession === deviceSession.session.token;
+                    return (_jsxs(Card, { className: "flex-row items-center border p-3 shadow-none", children: [_jsx(UserView, { user: deviceSession.user, size: "md" }), _jsxs("div", { className: "flex items-center gap-1 shrink-0 ml-auto", children: [!isActive && (_jsx(Button, { isIconOnly: true, variant: "ghost", size: "sm", onPress: () => setActiveSession(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(deviceSession.session.token), isPending: isSwitching || isRevoking, "aria-label": localization.auth.signOut, children: isRevoking ? (_jsx(Spinner, { color: "current", size: "sm" })) : (_jsx(ArrowRightFromSquare, {})) })] })] }, deviceSession.session.id));
+                })) : (_jsx("div", { className: "flex items-center rounded-3xl border p-3", children: _jsx(UserView, { isPending: true, size: "md" }) })) }), _jsx(Card.Footer, { children: _jsxs(Link, { href: `${basePaths.auth}/${viewPaths.auth.signIn}`, className: cn(buttonVariants({ variant: "secondary" })), children: [_jsx(CirclePlus, {}), localization.auth.addAccount] }) })] }));
+}

package/dist/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/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, useSession } from "@better-auth-ui/react";
+import { Display, Moon, Sun } from "@gravity-ui/icons";
+import { Card, cn, Label, Radio, RadioGroup } 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, appearance: { theme, setTheme, themes } } = useAuth();
+    const { data: session } = useSession();
+    if (!setTheme || !themes?.length) {
+        return null;
+    }
+    return (_jsxs("div", { children: [_jsx("h2", { className: cn("text-sm font-semibold mb-3"), children: localization.settings.appearance }), _jsx(Card, { className: cn("p-4 gap-4", className), variant: variant, ...props, children: _jsxs(Card.Content, { children: [_jsx(Label, { children: localization.settings.theme }), _jsx(RadioGroup, { variant: variant === "transparent" ? "secondary" : "primary", value: session ? theme : "", onChange: setTheme, isDisabled: !session || !theme, children: _jsxs("div", { className: "grid gap-3 grid-cols-2 sm:grid-cols-3", children: [themes.includes("system") && (_jsx(Radio, { value: "system", className: cn("mt-0 px-4 pb-4 pt-3 rounded-xl", "border border-transparent data-[selected=true]:border-accent data-[selected=true]:bg-accent/10", "data-[focus-visible=true]:border-accent data-[focus-visible=true]:bg-accent/10", variant === "transparent"
+                                            ? "bg-surface"
+                                            : "bg-surface-secondary"), children: _jsxs(Radio.Content, { className: "gap-2", children: [_jsxs("div", { className: "flex gap-2 justify-between", children: [_jsxs(Label, { className: "flex gap-2 items-center", children: [_jsx(Display, { className: "text-muted" }), localization.settings.system] }), _jsx(Radio.Control, { children: _jsx(Radio.Indicator, {}) })] }), _jsx(ThemePreviewSystem, { className: "w-full" })] }) })), themes.includes("light") && (_jsx(Radio, { value: "light", className: cn("mt-0 px-4 pb-4 pt-3 rounded-xl", "border border-transparent data-[selected=true]:border-accent data-[selected=true]:bg-accent/10", "data-[focus-visible=true]:border-accent data-[focus-visible=true]:bg-accent/10", variant === "transparent"
+                                            ? "bg-surface"
+                                            : "bg-surface-secondary"), children: _jsxs(Radio.Content, { className: "gap-2", children: [_jsxs("div", { className: "flex gap-2 justify-between", children: [_jsxs(Label, { className: "flex gap-2 items-center", children: [_jsx(Sun, { className: "text-muted" }), localization.settings.light] }), _jsx(Radio.Control, { children: _jsx(Radio.Indicator, {}) })] }), _jsx(ThemePreviewLight, { className: "w-full" })] }) })), themes.includes("dark") && (_jsx(Radio, { value: "dark", className: cn("mt-0 px-4 pb-4 pt-3 rounded-xl", "border border-transparent data-[selected=true]:border-accent data-[selected=true]:bg-accent/10", "data-[focus-visible=true]:border-accent data-[focus-visible=true]:bg-accent/10", variant === "transparent"
+                                            ? "bg-surface"
+                                            : "bg-surface-secondary"), children: _jsxs(Radio.Content, { className: "gap-2", children: [_jsxs("div", { className: "flex gap-2 justify-between", children: [_jsxs(Label, { className: "flex gap-2 items-center", children: [_jsx(Moon, { className: "text-muted" }), localization.settings.dark] }), _jsx(Radio.Control, { children: _jsx(Radio.Indicator, {}) })] }), _jsx(ThemePreviewDark, { className: "w-full" })] }) }))] }) })] }) })] }));
+}

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

@@ -0,0 +1,4 @@
+export type ChangeAvatarProps = {
+    className?: string;
+};
+export declare function ChangeAvatar({ className }: ChangeAvatarProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { fileToBase64 } from "@better-auth-ui/core";
+import { useAuth, useSession, useUpdateUser } from "@better-auth-ui/react";
+import { CloudArrowUpIn, TrashBin } from "@gravity-ui/icons";
+import { Button, cn, Dropdown, Label, Spinner, toast } from "@heroui/react";
+import { useRef, useState } from "react";
+import { UserAvatar } from "../../user/user-avatar";
+export function ChangeAvatar({ className }) {
+    const { localization, avatar } = useAuth();
+    const { data: session } = useSession();
+    const { mutate: updateUser, isPending: updatePending } = useUpdateUser({
+        onError: (error) => toast.danger(error.error?.message || error.message)
+    });
+    const fileInputRef = useRef(null);
+    const [isUploading, setIsUploading] = useState(false);
+    const [isDeleting, setIsDeleting] = useState(false);
+    const isPending = updatePending || isUploading || isDeleting;
+    async function handleFileChange(e) {
+        const file = e.target.files?.[0];
+        if (!file)
+            return;
+        e.target.value = "";
+        setIsUploading(true);
+        try {
+            const resized = (await avatar.resize?.(file, avatar.size, avatar.extension)) || file;
+            const image = (await avatar.upload?.(resized)) || (await fileToBase64(resized));
+            updateUser({ image }, {
+                onSuccess: () => toast.success(localization.settings.avatarChangedSuccess)
+            });
+        }
+        catch (error) {
+            if (error instanceof Error) {
+                toast.danger(error.message);
+            }
+        }
+        setIsUploading(false);
+    }
+    async function handleDelete() {
+        const currentImage = session?.user.image;
+        updateUser({ image: null }, {
+            onSuccess: async () => {
+                if (currentImage) {
+                    setIsDeleting(true);
+                    try {
+                        await avatar.delete?.(currentImage);
+                    }
+                    finally {
+                        setIsDeleting(false);
+                    }
+                }
+                toast.success(localization.settings.avatarDeletedSuccess);
+            }
+        });
+    }
+    return (_jsxs("div", { className: cn("flex flex-col gap-1", className), children: [_jsx(Label, { isDisabled: !session, children: localization.settings.avatar }), _jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", className: "hidden", onChange: handleFileChange }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsx(Button, { type: "button", isIconOnly: true, variant: "ghost", className: "p-0 h-auto w-auto rounded-full", isDisabled: !session || isPending, onPress: () => fileInputRef.current?.click(), children: _jsx(UserAvatar, { size: "lg", isPending: isPending }) }), _jsxs(Dropdown, { children: [_jsxs(Button, { isDisabled: !session || isPending, size: "sm", variant: "secondary", children: [isPending && _jsx(Spinner, { size: "sm" }), localization.settings.changeAvatar] }), _jsx(Dropdown.Popover, { className: "min-w-fit", children: _jsxs(Dropdown.Menu, { children: [_jsxs(Dropdown.Item, { textValue: localization.settings.uploadAvatar, onAction: () => fileInputRef.current?.click(), children: [_jsx(CloudArrowUpIn, { className: "text-muted" }), _jsx(Label, { children: localization.settings.uploadAvatar })] }), _jsxs(Dropdown.Item, { textValue: localization.settings.deleteAvatar, isDisabled: !session?.user.image, onAction: handleDelete, variant: "danger", children: [_jsx(TrashBin, { className: "text-danger" }), _jsx(Label, { children: localization.settings.deleteAvatar })] })] }) })] })] })] }));
+}

package/dist/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/components/settings/account/change-email.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAuth, useChangeEmail, useSession } from "@better-auth-ui/react";
+import { Button, Card, cn, FieldError, Fieldset, Form, Input, 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: session } = useSession();
+    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("div", { children: [_jsx("h2", { className: cn("text-sm font-semibold mb-3"), children: localization.settings.changeEmail }), _jsx(Card, { className: cn("p-4 gap-4", className), variant: variant, ...props, children: _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: session?.user.email, isDisabled: isPending || !session, children: [_jsx(Label, { children: localization.auth.email }), session ? (_jsx(Input, { required: true, variant: variant === "transparent" ? "primary" : "secondary", autoComplete: "email", placeholder: localization.auth.emailPlaceholder })) : (_jsx(Skeleton, { className: "h-10 md:h-9 w-full rounded-xl" })), _jsx(FieldError, {})] }, session?.user.email) }), _jsx(Fieldset.Actions, { children: _jsxs(Button, { type: "submit", isPending: isPending, isDisabled: !session, size: "sm", children: [isPending && _jsx(Spinner, { color: "current", size: "sm" }), localization.settings.updateEmail] }) })] }) }) }) })] }));
+}

package/dist/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 row with user info and a dropdown for switch/sign-out actions.
+ *
+ * Shows the user's avatar and info. A three-dot menu provides options to
+ * switch account (for non-active sessions) and sign out.
+ *
+ * @param deviceSession - The device session object containing session and user data
+ * @returns A JSX element containing the account row
+ */
+export declare function ManageAccount({ deviceSession, isPending }: ManageAccountProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAuth, useRevokeMultiSession, useSetActiveSession, useUser } from "@better-auth-ui/react";
+import { ArrowRightArrowLeft, ArrowRightFromSquare, Ellipsis } from "@gravity-ui/icons";
+import { Button, Dropdown, Spinner, toast } from "@heroui/react";
+import { UserView } from "../../user/user-view";
+/**
+ * Render a single account row with user info and a dropdown for switch/sign-out actions.
+ *
+ * Shows the user's avatar and info. A three-dot menu provides options to
+ * switch account (for non-active sessions) and sign out.
+ *
+ * @param deviceSession - The device session object containing session and user data
+ * @returns A JSX element containing the account row
+ */
+export function ManageAccount({ deviceSession, isPending }) {
+    const { localization } = useAuth();
+    const { data: user } = useUser();
+    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 === user?.id;
+    const isBusy = isSwitching || isRevoking;
+    return (_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx(UserView, { user: deviceSession?.user, isPending: isPending, size: "md" }), deviceSession && isActive && (_jsxs(Button, { className: "shrink-0", variant: "outline", size: "sm", onPress: () => revokeSession({ sessionToken: deviceSession.session.token }), isDisabled: isBusy, children: [isRevoking ? (_jsx(Spinner, { color: "current", size: "sm" })) : (_jsx(ArrowRightFromSquare, {})), localization.auth.signOut] })), deviceSession && !isActive && (_jsxs(Dropdown, { children: [_jsx(Button, { isIconOnly: true, variant: "ghost", className: "shrink-0", size: "sm", isDisabled: isBusy, children: _jsx(Ellipsis, {}) }), _jsx(Dropdown.Popover, { children: _jsxs(Dropdown.Menu, { children: [_jsxs(Dropdown.Item, { textValue: localization.auth.switchAccount, onAction: () => setActiveSession({
+                                        sessionToken: deviceSession.session.token
+                                    }), children: [_jsx(ArrowRightArrowLeft, { className: "text-muted" }), localization.auth.switchAccount] }), _jsxs(Dropdown.Item, { textValue: localization.auth.signOut, onAction: () => revokeSession({
+                                        sessionToken: deviceSession.session.token
+                                    }), children: [_jsx(ArrowRightFromSquare, { className: "text-muted" }), localization.auth.signOut] })] }) })] }))] }));
+}

package/dist/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, variant, ...props }: ManageAccountsProps & CardProps): import("react/jsx-runtime").JSX.Element;