@better-auth-ui/heroui 1.6.1 → 1.6.2

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

@@ -1,23 +1,30 @@
-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 }));
+import { PasswordChangedEmail as e } from "@better-auth-ui/react";
+import { cn as t } from "@heroui/react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/email/password-changed-email.tsx
+function r({ colors: r, classNames: i, ...a }) {
+	return /* @__PURE__ */ n(e, {
+		colors: {
+			light: {
+				background: "#F5F5F5",
+				primary: "#0285F7",
+				primaryForeground: "#FCFCFC",
+				...r?.light
+			},
+			dark: {
+				background: "#060607",
+				primary: "#0584F6",
+				primaryForeground: "#FCFCFC",
+				...r?.dark
+			}
+		},
+		classNames: {
+			...i,
+			card: t("border-none rounded-3xl", i?.card),
+			button: t("rounded-full", i?.button)
+		},
+		...a
+	});
 }
+//#endregion
+export { r as PasswordChangedEmail };

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

@@ -1,3 +1,3 @@
-import { type ResetPasswordEmailProps } from "@better-auth-ui/react";
-export type { ResetPasswordEmailProps } from "@better-auth-ui/react";
+import { 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

@@ -1,23 +1,30 @@
-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 }));
+import { ResetPasswordEmail as e } from "@better-auth-ui/react";
+import { cn as t } from "@heroui/react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/email/reset-password-email.tsx
+function r({ colors: r, classNames: i, ...a }) {
+	return /* @__PURE__ */ n(e, {
+		colors: {
+			light: {
+				background: "#F5F5F5",
+				primary: "#0285F7",
+				primaryForeground: "#FCFCFC",
+				...r?.light
+			},
+			dark: {
+				background: "#060607",
+				primary: "#0584F6",
+				primaryForeground: "#FCFCFC",
+				...r?.dark
+			}
+		},
+		classNames: {
+			...i,
+			card: t("border-none rounded-3xl", i?.card),
+			button: t("rounded-full", i?.button)
+		},
+		...a
+	});
 }
+//#endregion
+export { r as ResetPasswordEmail };

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

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

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

@@ -1,20 +1,23 @@
-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 })] }));
+import { Appearance as e } from "./appearance.js";
+import { ChangeEmail as t } from "./change-email.js";
+import { ManageAccounts as n } from "./manage-accounts.js";
+import { UserProfile as r } from "./user-profile.js";
+import { useAuth as i } from "@better-auth-ui/react";
+import { cn as a } from "@heroui/react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/settings/account/account-settings.tsx
+function c({ className: c, variant: l, ...u }) {
+	let { multiSession: d, emailAndPassword: f, magicLink: p, appearance: { setTheme: m } } = i();
+	return /* @__PURE__ */ s("div", {
+		className: a("flex w-full flex-col gap-4 md:gap-6", c),
+		...u,
+		children: [
+			/* @__PURE__ */ o(r, { variant: l }),
+			(f?.enabled || p) && /* @__PURE__ */ o(t, { variant: l }),
+			m && /* @__PURE__ */ o(e, { variant: l }),
+			d && /* @__PURE__ */ o(n, { variant: l })
+		]
+	});
 }
+//#endregion
+export { c as AccountSettings };

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

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

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

@@ -1,28 +1,71 @@
-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" })] }) }))] }) })] }) })] }));
+import { ThemePreviewDark as e, ThemePreviewLight as t, ThemePreviewSystem as n, useAuth as r, useSession as i } from "@better-auth-ui/react";
+import { Card as a, Label as o, Radio as s, RadioGroup as c, cn as l } from "@heroui/react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { Display as f, Moon as p, Sun as m } from "@gravity-ui/icons";
+//#region src/components/settings/account/appearance.tsx
+function h({ className: h, variant: g, ..._ }) {
+	let { localization: v, appearance: { theme: y, setTheme: b, themes: x } } = r(), { data: S } = i();
+	return !b || !x?.length ? null : /* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("h2", {
+		className: l("text-sm font-semibold mb-3"),
+		children: v.settings.appearance
+	}), /* @__PURE__ */ u(a, {
+		className: l("p-4 gap-4", h),
+		variant: g,
+		..._,
+		children: /* @__PURE__ */ d(a.Content, { children: [/* @__PURE__ */ u(o, { children: v.settings.theme }), /* @__PURE__ */ u(c, {
+			variant: g === "transparent" ? "secondary" : "primary",
+			value: S ? y : "",
+			onChange: b,
+			isDisabled: !S || !y,
+			children: /* @__PURE__ */ d("div", {
+				className: "grid gap-3 grid-cols-2 sm:grid-cols-3",
+				children: [
+					x.includes("system") && /* @__PURE__ */ u(s, {
+						value: "system",
+						className: l("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", g === "transparent" ? "bg-surface" : "bg-surface-secondary"),
+						children: /* @__PURE__ */ d(s.Content, {
+							className: "gap-2",
+							children: [/* @__PURE__ */ d("div", {
+								className: "flex gap-2 justify-between",
+								children: [/* @__PURE__ */ d(o, {
+									className: "flex gap-2 items-center",
+									children: [/* @__PURE__ */ u(f, { className: "text-muted" }), v.settings.system]
+								}), /* @__PURE__ */ u(s.Control, { children: /* @__PURE__ */ u(s.Indicator, {}) })]
+							}), /* @__PURE__ */ u(n, { className: "w-full" })]
+						})
+					}),
+					x.includes("light") && /* @__PURE__ */ u(s, {
+						value: "light",
+						className: l("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", g === "transparent" ? "bg-surface" : "bg-surface-secondary"),
+						children: /* @__PURE__ */ d(s.Content, {
+							className: "gap-2",
+							children: [/* @__PURE__ */ d("div", {
+								className: "flex gap-2 justify-between",
+								children: [/* @__PURE__ */ d(o, {
+									className: "flex gap-2 items-center",
+									children: [/* @__PURE__ */ u(m, { className: "text-muted" }), v.settings.light]
+								}), /* @__PURE__ */ u(s.Control, { children: /* @__PURE__ */ u(s.Indicator, {}) })]
+							}), /* @__PURE__ */ u(t, { className: "w-full" })]
+						})
+					}),
+					x.includes("dark") && /* @__PURE__ */ u(s, {
+						value: "dark",
+						className: l("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", g === "transparent" ? "bg-surface" : "bg-surface-secondary"),
+						children: /* @__PURE__ */ d(s.Content, {
+							className: "gap-2",
+							children: [/* @__PURE__ */ d("div", {
+								className: "flex gap-2 justify-between",
+								children: [/* @__PURE__ */ d(o, {
+									className: "flex gap-2 items-center",
+									children: [/* @__PURE__ */ u(p, { className: "text-muted" }), v.settings.dark]
+								}), /* @__PURE__ */ u(s.Control, { children: /* @__PURE__ */ u(s.Indicator, {}) })]
+							}), /* @__PURE__ */ u(e, { className: "w-full" })]
+						})
+					})
+				]
+			})
+		})] })
+	})] });
 }
+//#endregion
+export { h as Appearance };

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

@@ -1,56 +1,89 @@
-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 })] })] }) })] })] })] }));
+import { UserAvatar as e } from "../../user/user-avatar.js";
+import { useAuth as t, useSession as n, useUpdateUser as r } from "@better-auth-ui/react";
+import { Button as i, Dropdown as a, Label as o, Spinner as s, cn as c, toast as l } from "@heroui/react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { useRef as f, useState as p } from "react";
+import { CloudArrowUpIn as m, TrashBin as h } from "@gravity-ui/icons";
+import { fileToBase64 as g } from "@better-auth-ui/core";
+//#region src/components/settings/account/change-avatar.tsx
+function _({ className: _ }) {
+	let { localization: v, avatar: y } = t(), { data: b } = n(), { mutate: x, isPending: S } = r({ onError: (e) => l.danger(e.error?.message || e.message) }), C = f(null), [w, T] = p(!1), [E, D] = p(!1), O = S || w || E;
+	async function k(e) {
+		let t = e.target.files?.[0];
+		if (t) {
+			e.target.value = "", T(!0);
+			try {
+				let e = await y.resize?.(t, y.size, y.extension) || t;
+				x({ image: await y.upload?.(e) || await g(e) }, { onSuccess: () => l.success(v.settings.avatarChangedSuccess) });
+			} catch (e) {
+				e instanceof Error && l.danger(e.message);
+			}
+			T(!1);
+		}
+	}
+	async function A() {
+		let e = b?.user.image;
+		x({ image: null }, { onSuccess: async () => {
+			if (e) {
+				D(!0);
+				try {
+					await y.delete?.(e);
+				} finally {
+					D(!1);
+				}
+			}
+			l.success(v.settings.avatarDeletedSuccess);
+		} });
+	}
+	return /* @__PURE__ */ d("div", {
+		className: c("flex flex-col gap-1", _),
+		children: [
+			/* @__PURE__ */ u(o, {
+				isDisabled: !b,
+				children: v.settings.avatar
+			}),
+			/* @__PURE__ */ u("input", {
+				ref: C,
+				type: "file",
+				accept: "image/*",
+				className: "hidden",
+				onChange: k
+			}),
+			/* @__PURE__ */ d("div", {
+				className: "flex items-center gap-4",
+				children: [/* @__PURE__ */ u(i, {
+					type: "button",
+					isIconOnly: !0,
+					variant: "ghost",
+					className: "p-0 h-auto w-auto rounded-full",
+					isDisabled: !b || O,
+					onPress: () => C.current?.click(),
+					children: /* @__PURE__ */ u(e, {
+						size: "lg",
+						isPending: O
+					})
+				}), /* @__PURE__ */ d(a, { children: [/* @__PURE__ */ d(i, {
+					isDisabled: !b || O,
+					size: "sm",
+					variant: "secondary",
+					children: [O && /* @__PURE__ */ u(s, { size: "sm" }), v.settings.changeAvatar]
+				}), /* @__PURE__ */ u(a.Popover, {
+					className: "min-w-fit",
+					children: /* @__PURE__ */ d(a.Menu, { children: [/* @__PURE__ */ d(a.Item, {
+						textValue: v.settings.uploadAvatar,
+						onAction: () => C.current?.click(),
+						children: [/* @__PURE__ */ u(m, { className: "text-muted" }), /* @__PURE__ */ u(o, { children: v.settings.uploadAvatar })]
+					}), /* @__PURE__ */ d(a.Item, {
+						textValue: v.settings.deleteAvatar,
+						isDisabled: !b?.user.image,
+						onAction: A,
+						variant: "danger",
+						children: [/* @__PURE__ */ u(h, { className: "text-danger" }), /* @__PURE__ */ u(o, { children: v.settings.deleteAvatar })]
+					})] })
+				})] })]
+			})
+		]
+	});
 }
+//#endregion
+export { _ as ChangeAvatar };

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

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

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

@@ -1,29 +1,57 @@
-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] }) })] }) }) }) })] }));
+import { useAuth as e, useChangeEmail as t, useSession as n } from "@better-auth-ui/react";
+import { Button as r, Card as i, FieldError as a, Fieldset as o, Form as s, Input as c, Label as l, Skeleton as u, Spinner as d, TextField as f, cn as p, toast as m } from "@heroui/react";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+//#region src/components/settings/account/change-email.tsx
+function _({ className: _, variant: v, ...y }) {
+	let { localization: b, baseURL: x, viewPaths: S } = e(), { data: C } = n(), { mutate: w, isPending: T } = t({
+		onSuccess: () => m.success(b.settings.changeEmailSuccess),
+		onError: (e) => m.danger(e.error?.message || e.message)
+	});
+	function E(e) {
+		e.preventDefault(), w({
+			newEmail: new FormData(e.currentTarget).get("email"),
+			callbackURL: `${x}/${S.settings.account}`
+		});
+	}
+	return /* @__PURE__ */ g("div", { children: [/* @__PURE__ */ h("h2", {
+		className: p("text-sm font-semibold mb-3"),
+		children: b.settings.changeEmail
+	}), /* @__PURE__ */ h(i, {
+		className: p("p-4 gap-4", _),
+		variant: v,
+		...y,
+		children: /* @__PURE__ */ h(i.Content, { children: /* @__PURE__ */ h(s, {
+			onSubmit: E,
+			children: /* @__PURE__ */ g(o, {
+				className: "w-full gap-4",
+				children: [/* @__PURE__ */ h(o.Group, { children: /* @__PURE__ */ g(f, {
+					name: "email",
+					type: "email",
+					defaultValue: C?.user.email,
+					isDisabled: T || !C,
+					children: [
+						/* @__PURE__ */ h(l, { children: b.auth.email }),
+						C ? /* @__PURE__ */ h(c, {
+							required: !0,
+							variant: v === "transparent" ? "primary" : "secondary",
+							autoComplete: "email",
+							placeholder: b.auth.emailPlaceholder
+						}) : /* @__PURE__ */ h(u, { className: "h-10 md:h-9 w-full rounded-xl" }),
+						/* @__PURE__ */ h(a, {})
+					]
+				}, C?.user.email) }), /* @__PURE__ */ h(o.Actions, { children: /* @__PURE__ */ g(r, {
+					type: "submit",
+					isPending: T,
+					isDisabled: !C,
+					size: "sm",
+					children: [T && /* @__PURE__ */ h(d, {
+						color: "current",
+						size: "sm"
+					}), b.settings.updateEmail]
+				}) })]
+			})
+		}) })
+	})] });
 }
+//#endregion
+export { _ as ChangeEmail };

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

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