@better-auth-ui/heroui 1.6.9 → 1.6.10

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

@@ -1,28 +0,0 @@
-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 { authClient, localization, baseURL, viewPaths } = useAuth();
-    const { data: session } = useSession(authClient);
-    const { mutate: changeEmail, isPending } = useChangeEmail(authClient, {
-        onSuccess: () => toast.success(localization.settings.changeEmailSuccess)
-    });
-    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.id}-${session?.user.email}-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/auth/settings/account/user-profile.js

@@ -1,65 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { parseAdditionalFieldValue } from "@better-auth-ui/core";
-import { useAuth, useSession, useUpdateUser } from "@better-auth-ui/react";
-import { Button, Card, cn, FieldError, Form, Input, Label, Skeleton, Spinner, TextField, toast } from "@heroui/react";
-import { AdditionalField } from "../../additional-field";
-import { ChangeAvatar } from "./change-avatar";
-/**
- * Render a profile card that lets the authenticated user view and update their
- * display name, avatar, and any plugin- or user-supplied additional fields.
- */
-export function UserProfile({ className, variant, ...props }) {
-    const { additionalFields, authClient, localization } = useAuth();
-    const { data: session } = useSession(authClient);
-    const { mutate: updateUser, isPending } = useUpdateUser(authClient, {
-        onSuccess: () => toast.success(localization.settings.profileUpdatedSuccess)
-    });
-    async function handleSubmit(e) {
-        e.preventDefault();
-        const formData = new FormData(e.currentTarget);
-        const name = formData.get("name");
-        const additionalFieldValues = {};
-        for (const field of additionalFields ?? []) {
-            if (field.profile === false || field.readOnly)
-                continue;
-            const value = parseAdditionalFieldValue(field, formData.get(field.name));
-            if (field.validate) {
-                try {
-                    await field.validate(value);
-                }
-                catch (error) {
-                    toast.danger(error instanceof Error ? error.message : String(error));
-                    return;
-                }
-            }
-            // `null` = explicit clear (forward to backend); `undefined` = omitted.
-            if (value !== undefined) {
-                additionalFieldValues[field.name] = value;
-            }
-        }
-        updateUser({
-            name,
-            ...additionalFieldValues
-        });
-    }
-    return (_jsxs("div", { children: [_jsx("h2", { className: cn("text-sm font-semibold mb-3"), children: localization.settings.userProfile }), _jsx(Card, { className: cn("p-4 gap-4", className), variant: variant, ...props, children: _jsx(Card.Content, { children: _jsxs(Form, { onSubmit: handleSubmit, className: "flex flex-col gap-4", children: [_jsx(ChangeAvatar, {}), _jsxs(TextField, { name: "name", defaultValue: session?.user.name, isDisabled: isPending || !session, children: [_jsx(Label, { children: localization.auth.name }), _jsx(Input, { className: cn(!session && "hidden"), autoComplete: "name", placeholder: localization.auth.name, variant: variant === "transparent" ? "primary" : "secondary" }), !session && (_jsx(Skeleton, { className: "h-10 md:h-9 w-full rounded-xl" })), _jsx(FieldError, {})] }, `${session?.user?.id}-${session?.user?.name}-name`), additionalFields
-                                ?.filter((field) => field.profile !== false)
-                                .map((field) => {
-                                if (!session) {
-                                    if (field.inputType === "hidden") {
-                                        return null;
-                                    }
-                                    return (_jsx(Skeleton, { className: "h-10 md:h-9 w-full rounded-xl" }, field.name));
-                                }
-                                const value = session.user[field.name];
-                                // Re-mount when the user or the session value changes so the
-                                // field's uncontrolled `defaultValue` reflects the latest data.
-                                const key = `${session.user.id}-${field.name}-${value instanceof Date
-                                    ? value.toISOString()
-                                    : String(value ?? "")}`;
-                                return (_jsx(AdditionalField, { name: field.name, field: {
-                                        ...field,
-                                        defaultValue: value
-                                    }, isPending: isPending, variant: variant }, key));
-                            }), _jsxs(Button, { type: "submit", isPending: isPending, isDisabled: !session, size: "sm", className: "self-start mt-1", children: [isPending && _jsx(Spinner, { color: "current", size: "sm" }), localization.settings.saveChanges] })] }) }) })] }));
-}

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

@@ -1,52 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useAuth, useRevokeSession, useSession } from "@better-auth-ui/react";
-import { ArrowRightFromSquare, Display, Smartphone, Xmark } from "@gravity-ui/icons";
-import { Button, Chip, Spinner, toast } from "@heroui/react";
-import Bowser from "bowser";
-function timeAgo(date) {
-    const seconds = Math.floor((Date.now() - date.getTime()) / 1000);
-    const rtf = new Intl.RelativeTimeFormat(undefined, { numeric: "auto" });
-    const UNITS = [
-        ["year", 31536000],
-        ["month", 2592000],
-        ["week", 604800],
-        ["day", 86400],
-        ["hour", 3600],
-        ["minute", 60],
-        ["second", 1]
-    ];
-    for (const [unit, threshold] of UNITS) {
-        if (seconds >= threshold) {
-            return rtf.format(-Math.floor(seconds / threshold), unit);
-        }
-    }
-    return rtf.format(0, "second");
-}
-/**
- * Render a single active session row 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 row
- */
-export function ActiveSession({ activeSession }) {
-    const { authClient, basePaths, localization, viewPaths, navigate } = useAuth();
-    const { data: session } = useSession(authClient, { refetchOnMount: false });
-    const { mutate: revokeSession, isPending: isRevoking } = useRevokeSession(authClient, {
-        onSuccess: () => toast.success(localization.settings.revokeSessionSuccess)
-    });
-    const isCurrentSession = activeSession.token === session?.session.token;
-    const ua = Bowser.parse(activeSession.userAgent || "");
-    const isMobile = ua.platform.type === "mobile" || ua.platform.type === "tablet";
-    return (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex size-10 shrink-0 items-center justify-center rounded-xl bg-surface-secondary", children: isMobile ? (_jsx(Smartphone, { className: "size-4.5" })) : (_jsx(Display, { className: "size-4.5" })) }), _jsxs("div", { className: "flex flex-col min-w-0", 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", children: localization.settings.currentSession })) : (activeSession.createdAt && (_jsx("span", { className: "text-xs text-muted capitalize", children: timeAgo(activeSession.createdAt) })))] }), _jsxs(Button, { className: "ml-auto shrink-0", variant: "outline", size: "sm", onPress: () => isCurrentSession
-                    ? navigate({
-                        to: `${basePaths.auth}/${viewPaths.auth.signOut}`
-                    })
-                    : revokeSession(activeSession), isPending: isRevoking, "aria-label": isCurrentSession
-                    ? localization.auth.signOut
-                    : localization.settings.revokeSession, children: [isRevoking ? (_jsx(Spinner, { color: "current", size: "sm" })) : isCurrentSession ? (_jsx(ArrowRightFromSquare, {})) : (_jsx(Xmark, {})), isCurrentSession
-                        ? localization.auth.signOut
-                        : localization.settings.revoke] })] }));
-}

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

@@ -1,23 +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 } 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, variant, ...props }) {
-    const { authClient, localization } = useAuth();
-    const { data: session } = useSession(authClient);
-    const { data: sessions, isPending } = useListSessions(authClient);
-    const activeSessions = sessions &&
-        [...sessions].sort((a, b) => a.id === session?.session.id ? -1 : b.id === session?.session.id ? 1 : 0);
-    return (_jsxs("div", { children: [_jsx("h2", { className: cn("text-sm font-semibold mb-3"), children: localization.settings.activeSessions }), _jsx(Card, { className: cn(className), variant: variant, ...props, children: _jsx(Card.Content, { className: "gap-0", children: isPending ? (_jsx(SessionRowSkeleton, {})) : (activeSessions?.map((activeSession, index) => (_jsxs("div", { children: [index > 0 && (_jsx("div", { className: "border-b border-dashed -mx-4 my-4" })), _jsx(ActiveSession, { activeSession: activeSession })] }, activeSession.id)))) }) })] }));
-}
-function SessionRowSkeleton() {
-    return (_jsx("div", { className: "flex items-center justify-between", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Skeleton, { className: "size-10 rounded-xl" }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Skeleton, { className: "h-4 w-32 rounded-lg" }), _jsx(Skeleton, { className: "h-3 w-24 rounded-lg" })] })] }) }));
-}

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

@@ -1,79 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useAuth, useChangePassword, useListAccounts, useRequestPasswordReset, useSession } from "@better-auth-ui/react";
-import { 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.
- *
- * When the user has a credential account, displays fields for current password,
- * new password, and optionally confirm password. When the user only has social
- * accounts, displays a prompt to set a password via the reset flow.
- *
- * @returns A JSX element containing the change-password or set-password card
- */
-export function ChangePassword({ className, variant, ...props }) {
-    const { authClient, emailAndPassword, localization } = useAuth();
-    const { data: session } = useSession(authClient);
-    const { data: accounts, isPending: isAccountsPending } = useListAccounts(authClient);
-    const hasCredentialAccount = accounts?.some((account) => account.providerId === "credential");
-    if (!isAccountsPending && !hasCredentialAccount) {
-        return _jsx(SetPassword, { className: className, variant: variant, ...props });
-    }
-    return (_jsx(ChangePasswordForm, { className: className, variant: variant, emailAndPassword: emailAndPassword, localization: localization, session: isAccountsPending ? undefined : session, ...props }));
-}
-function SetPassword({ className, variant, ...props }) {
-    const { authClient, localization } = useAuth();
-    const { data: session } = useSession(authClient);
-    const { mutate: requestPasswordReset, isPending } = useRequestPasswordReset(authClient, {
-        onSuccess: () => toast.success(localization.auth.passwordResetEmailSent)
-    });
-    const handleSetPassword = () => {
-        if (!session?.user.email)
-            return;
-        requestPasswordReset({ email: session.user.email });
-    };
-    return (_jsxs("div", { children: [_jsx("h2", { className: cn("text-sm font-semibold mb-3"), children: localization.settings.changePassword }), _jsx(Card, { className: cn(className), variant: variant, ...props, children: _jsxs(Card.Content, { className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between", children: [_jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium leading-tight", children: localization.settings.setPassword }), _jsx("p", { className: "text-muted text-xs mt-0.5", children: localization.settings.setPasswordDescription })] }), _jsxs(Button, { size: "sm", isPending: isPending, isDisabled: !session, onPress: handleSetPassword, children: [isPending && _jsx(Spinner, { color: "current", size: "sm" }), localization.auth.sendResetLink] })] }) })] }));
-}
-function ChangePasswordForm({ className, variant, emailAndPassword, localization, session, ...props }) {
-    const { authClient } = useAuth();
-    const [currentPassword, setCurrentPassword] = useState("");
-    const [newPassword, setNewPassword] = useState("");
-    const [confirmPassword, setConfirmPassword] = useState("");
-    const { mutate: changePassword, isPending } = useChangePassword(authClient, {
-        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("div", { children: [_jsx("h2", { className: cn("text-sm font-semibold mb-3"), children: localization.settings.changePassword }), _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: [_jsxs(Fieldset.Group, { children: [_jsxs(TextField, { name: "currentPassword", type: "password", isDisabled: isPending || !session, defaultValue: "", value: currentPassword, onChange: setCurrentPassword, children: [_jsx(Label, { children: localization.settings.currentPassword }), _jsx(Input, { className: cn(!session && "hidden"), autoComplete: "current-password", placeholder: localization.settings.currentPasswordPlaceholder, required: true, variant: variant === "transparent" ? "primary" : "secondary" }), !session && (_jsx(Skeleton, { className: "h-10 md:h-9 w-full rounded-xl" })), _jsx(FieldError, {})] }), _jsxs(TextField, { minLength: emailAndPassword?.minPasswordLength, maxLength: emailAndPassword?.maxPasswordLength, isDisabled: isPending || !session, value: newPassword, onChange: setNewPassword, children: [_jsx(Label, { children: localization.auth.newPassword }), _jsxs(InputGroup, { className: cn(!session && "hidden"), 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, {}) }) })] }), !session && (_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 || !session, isRequired: true, value: confirmPassword, onChange: setConfirmPassword, children: [_jsx(Label, { children: localization.auth.confirmPassword }), _jsxs(InputGroup, { className: cn(!session && "hidden"), 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, {}) }) })] }), !session && (_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: !session, size: "sm", children: [isPending && _jsx(Spinner, { color: "current", size: "sm" }), localization.settings.updatePassword] }) })] }) }) }) })] }));
-}

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

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

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

@@ -1,36 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useAuth, useListAccounts } from "@better-auth-ui/react";
-import { Card, cn, Skeleton } from "@heroui/react";
-import { LinkedAccount } from "./linked-account";
-/**
- * Render a card showing linked social accounts and available social providers to link.
- *
- * Linked accounts (excluding the "credential" provider) are shown with an unlink control;
- * available providers are shown with a link control. Button states and labels reflect
- * ongoing link/unlink activity and use localization for provider-specific text.
- *
- * @returns A JSX element containing the linked accounts card
- */
-export function LinkedAccounts({ className, variant, ...props }) {
-    const { authClient, localization, socialProviders } = useAuth();
-    const { data: accounts, isPending } = useListAccounts(authClient);
-    const linkedAccounts = accounts?.filter((account) => account.providerId !== "credential");
-    const allRows = [
-        ...(linkedAccounts?.map((account) => ({
-            key: account.id,
-            account,
-            provider: account.providerId
-        })) ?? []),
-        ...(socialProviders?.map((provider) => ({
-            key: provider,
-            account: undefined,
-            provider
-        })) ?? [])
-    ];
-    return (_jsxs("div", { children: [_jsx("h2", { className: cn("text-sm font-semibold mb-3"), children: localization.settings.linkedAccounts }), _jsx(Card, { className: cn(className), variant: variant, ...props, children: _jsx(Card.Content, { className: "gap-0", children: isPending
-                        ? socialProviders?.map((provider, index) => (_jsxs("div", { children: [index > 0 && (_jsx("div", { className: "border-b border-dashed -mx-4 my-4" })), _jsx(AccountRowSkeleton, {})] }, provider)))
-                        : allRows.map((row, index) => (_jsxs("div", { children: [index > 0 && (_jsx("div", { className: "border-b border-dashed -mx-4 my-4" })), _jsx(LinkedAccount, { account: row.account, provider: row.provider })] }, row.key))) }) })] }));
-}
-function AccountRowSkeleton() {
-    return (_jsx("div", { className: "flex items-center justify-between", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Skeleton, { className: "size-10 rounded-xl" }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Skeleton, { className: "h-4 w-20 rounded-lg" }), _jsx(Skeleton, { className: "h-3 w-32 rounded-lg" })] })] }) }));
-}

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

@@ -1,20 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useAuth } from "@better-auth-ui/react";
-import { cn } from "@heroui/react";
-import { ActiveSessions } from "./active-sessions";
-import { ChangePassword } from "./change-password";
-import { 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.
- * Each registered auth plugin may contribute `securityCards` (for example delete-user, passkeys).
- *
- * @param className - Optional additional CSS class names for the outer container.
- * @param variant - Card variant forwarded to each security settings card.
- * @returns The security settings container as a JSX element.
- */
-export function SecuritySettings({ className, variant, ...props }) {
-    const { emailAndPassword, plugins, socialProviders } = useAuth();
-    return (_jsxs("div", { className: cn("flex w-full flex-col gap-4 md:gap-6", className), ...props, children: [emailAndPassword?.enabled && _jsx(ChangePassword, { variant: variant }), !!socialProviders?.length && _jsx(LinkedAccounts, { variant: variant }), _jsx(ActiveSessions, { variant: variant }), plugins.flatMap((plugin) => plugin.securityCards?.map((Card, index) => (_jsx(Card, { variant: variant }, `${plugin.id}-${index.toString()}`))))] }));
-}

package/dist/components/auth/settings/settings.js

@@ -1,53 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useAuth, useAuthenticate } from "@better-auth-ui/react";
-import { Person, Shield } from "@gravity-ui/icons";
-import { cn, Tabs } from "@heroui/react";
-import { useMemo } from "react";
-import { AccountSettings } from "./account/account-settings";
-import { SecuritySettings } from "./security/security-settings";
-/**
- * Renders the settings UI and activates the appropriate settings view based on `view` or `path`.
- *
- * @param className - Additional CSS class names applied to the root container
- * @param path - Route path used to resolve which settings view to activate when `view` is not provided
- * @param view - Explicit settings view to activate, e.g. `"account"` or `"security"`
- * @param hideNav - When `true`, hide the navigation tabs
- * @param variant - Card variant forwarded to each settings section card
- * @returns A DOM tree containing the responsive settings tabs and the currently selected settings panel
- *
- * @throws Error if neither `view` nor `path` is provided, or if `path` does not match any settings view
- */
-export function Settings({ className, hideNav, path, variant, view, ...props }) {
-    if (!view && !path) {
-        throw new Error("[Better Auth UI] Either `view` or `path` must be provided");
-    }
-    const { authClient, basePaths, localization, viewPaths, plugins } = useAuth();
-    useAuthenticate(authClient);
-    // Built-ins first, then plugin segments
-    const currentView = useMemo(() => {
-        if (view)
-            return view;
-        if (!path)
-            return undefined;
-        const match = [
-            viewPaths.settings,
-            ...plugins.map((plugin) => plugin.viewPaths?.settings)
-        ]
-            .flatMap((source) => Object.entries(source ?? {}))
-            .find(([, segment]) => segment === path);
-        return match?.[0];
-    }, [view, path, viewPaths.settings, plugins]);
-    if (!currentView) {
-        const validPaths = [
-            viewPaths.settings,
-            ...plugins.map((plugin) => plugin.viewPaths?.settings)
-        ]
-            .flatMap((source) => Object.values(source ?? {}))
-            .join(", ");
-        throw new Error(`[Better Auth UI] Unknown settings path "${path}". Valid paths are: ${validPaths}`);
-    }
-    return (_jsxs(Tabs, { className: cn(className), orientation: "horizontal", selectedKey: currentView, ...props, children: [_jsx(Tabs.ListContainer, { children: _jsxs(Tabs.List, { "aria-label": localization.settings.settings, className: "max-w-fit overflow-x-auto [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden", children: [_jsxs(Tabs.Tab, { id: "account", href: `${basePaths.settings}/${viewPaths.settings.account}`, className: "gap-2", onPress: (e) => e.target.scrollIntoView({ behavior: "smooth", inline: "center" }), children: [_jsx(Person, { className: "text-muted" }), localization.settings.account, _jsx(Tabs.Indicator, {})] }), _jsxs(Tabs.Tab, { id: "security", href: `${basePaths.settings}/${viewPaths.settings.security}`, className: "gap-2", onPress: (e) => e.target.scrollIntoView({ behavior: "smooth", inline: "center" }), children: [_jsx(Shield, { className: "text-muted" }), localization.settings.security, _jsx(Tabs.Indicator, {})] }), plugins.flatMap((plugin) => plugin.settingsTabs?.map((settingsTab, index) => (_jsxs(Tabs.Tab, { id: settingsTab.view, href: `${basePaths.settings}/${plugin.viewPaths?.settings?.[settingsTab.view]}`, className: "gap-2", onPress: (e) => e.target.scrollIntoView({
-                                behavior: "smooth",
-                                inline: "center"
-                            }), children: [settingsTab.label, _jsx(Tabs.Indicator, {})] }, `${plugin.id}-${index.toString()}`))) ?? [])] }) }), _jsx(Tabs.Panel, { id: "account", className: "px-0", children: _jsx(AccountSettings, { variant: variant }) }), _jsx(Tabs.Panel, { id: "security", className: "px-0", children: _jsx(SecuritySettings, { variant: variant }) }), plugins.flatMap((plugin) => plugin.settingsTabs?.map((settingsTab, index) => (_jsx(Tabs.Panel, { id: settingsTab.view, className: "px-0", children: _jsx(settingsTab.component, { variant: variant }) }, `${plugin.id}-${index.toString()}`))))] }));
-}

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

@@ -1,64 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { authMutationKeys } from "@better-auth-ui/core";
-import { useAuth, useFetchOptions, useSendVerificationEmail, useSignInEmail } from "@better-auth-ui/react";
-import { Button, Card, Checkbox, cn, Description, FieldError, Form, Input, Label, Link, Spinner, TextField, toast } from "@heroui/react";
-import { useIsMutating } from "@tanstack/react-query";
-import { useState } from "react";
-import { FieldSeparator } from "./field-separator";
-import { ProviderButtons } from "./provider-buttons";
-/**
- * Render the sign-in UI using auth context for configuration and localization.
- *
- * @returns The sign-in JSX element containing email/password fields, optional magic-link button, and social provider buttons.
- */
-export function SignIn({ className, socialLayout, socialPosition = "bottom", variant, ...props }) {
-    const { authClient, basePaths, baseURL, emailAndPassword, localization, plugins, redirectTo, socialProviders, viewPaths, navigate } = useAuth();
-    const { fetchOptions, resetFetchOptions } = useFetchOptions();
-    const [password, setPassword] = useState("");
-    const { mutate: sendVerificationEmail } = useSendVerificationEmail(authClient, {
-        onSuccess: () => toast.success(localization.auth.verificationEmailSent)
-    });
-    const { mutate: signInEmail, isPending: signInEmailPending } = useSignInEmail(authClient, {
-        onError: (error, { email }) => {
-            setPassword("");
-            if (error.error?.code === "EMAIL_NOT_VERIFIED") {
-                toast.danger(error.error?.message || error.message, {
-                    actionProps: {
-                        children: localization.auth.resend,
-                        onClick: () => sendVerificationEmail({
-                            email,
-                            callbackURL: `${baseURL}${redirectTo}`
-                        })
-                    }
-                });
-            }
-            else {
-                toast.danger(error.error?.message || error.message);
-            }
-            resetFetchOptions();
-        },
-        onSuccess: () => navigate({ to: redirectTo })
-    });
-    const handleSubmit = (e) => {
-        e.preventDefault();
-        const formData = new FormData(e.currentTarget);
-        const email = formData.get("email");
-        const rememberMe = formData.get("rememberMe") === "on";
-        signInEmail({
-            email,
-            password,
-            ...(emailAndPassword?.rememberMe ? { rememberMe } : {}),
-            fetchOptions
-        });
-    };
-    const signInMutating = useIsMutating({
-        mutationKey: authMutationKeys.signIn.all
-    });
-    const signUpMutating = useIsMutating({
-        mutationKey: authMutationKeys.signUp.all
-    });
-    const isPending = signInMutating + signUpMutating > 0;
-    const Captcha = plugins.find((plugin) => plugin.captchaComponent)?.captchaComponent;
-    const showSeparator = emailAndPassword?.enabled && !!socialProviders?.length;
-    return (_jsxs(Card, { className: cn("w-full max-w-sm gap-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.signIn }) }), _jsxs(Card.Content, { className: "gap-4", children: [socialPosition === "top" && (_jsxs(_Fragment, { children: [!!socialProviders?.length && (_jsx(ProviderButtons, { socialLayout: socialLayout })), showSeparator && (_jsx(FieldSeparator, { children: localization.auth.or }))] })), emailAndPassword?.enabled && (_jsxs(Form, { onSubmit: handleSubmit, className: "flex flex-col gap-4", children: [_jsxs(TextField, { name: "email", type: "email", autoComplete: "email", isDisabled: isPending, children: [_jsx(Label, { children: localization.auth.email }), _jsx(Input, { placeholder: localization.auth.emailPlaceholder, variant: variant === "transparent" ? "primary" : "secondary", required: true }), _jsx(FieldError, {})] }), _jsxs(TextField, { minLength: emailAndPassword?.minPasswordLength, maxLength: emailAndPassword?.maxPasswordLength, name: "password", type: "password", autoComplete: "current-password", isDisabled: isPending, value: password, onChange: setPassword, children: [_jsx(Label, { children: localization.auth.password }), _jsx(Input, { placeholder: localization.auth.passwordPlaceholder, variant: variant === "transparent" ? "primary" : "secondary", required: true }), _jsx(FieldError, {})] }), emailAndPassword?.rememberMe && (_jsxs(Checkbox, { name: "rememberMe", isDisabled: isPending, variant: variant === "transparent" ? "primary" : "secondary", children: [_jsx(Checkbox.Control, { children: _jsx(Checkbox.Indicator, {}) }), _jsx(Checkbox.Content, { children: _jsx(Label, { children: localization.auth.rememberMe }) })] })), Captcha && _jsx("div", { className: "flex justify-center", children: Captcha }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs(Button, { type: "submit", className: "w-full", isPending: isPending, children: [signInEmailPending && _jsx(Spinner, { color: "current", size: "sm" }), localization.auth.signIn] }), plugins.flatMap((plugin) => plugin.authButtons?.map((AuthButton, index) => (_jsx(AuthButton, { view: "signIn" }, `${plugin.id}-${index.toString()}`))))] })] })), socialPosition === "bottom" && (_jsxs(_Fragment, { children: [showSeparator && (_jsx(FieldSeparator, { children: localization.auth.or })), !!socialProviders?.length && (_jsx(ProviderButtons, { socialLayout: socialLayout }))] }))] }), _jsxs(Card.Footer, { className: "flex-col gap-3", children: [emailAndPassword?.forgotPassword && (_jsx(Link, { href: `${basePaths.auth}/${viewPaths.auth.forgotPassword}`, className: "no-underline hover:underline", children: localization.auth.forgotPasswordLink })), emailAndPassword?.enabled && (_jsxs(Description, { className: "text-sm", children: [localization.auth.needToCreateAnAccount, " ", _jsx(Link, { href: `${basePaths.auth}/${viewPaths.auth.signUp}`, className: "text-accent no-underline hover:underline decoration-accent-hover", children: localization.auth.signUp })] }))] })] }));
-}

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

@@ -1,33 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useAuth, useSignOut } from "@better-auth-ui/react";
-import { cn, Spinner, toast } from "@heroui/react";
-import { useEffect, useRef } from "react";
-/**
- * Initiates sign-out on mount and renders a loading card while sign-out proceeds.
- *
- * @returns A Card containing a centered Spinner shown during the sign-out process
- */
-export function SignOut({ className }) {
-    const { authClient, basePaths, navigate, viewPaths } = useAuth();
-    const { mutate: signOut } = useSignOut(authClient, {
-        onError: (error) => {
-            toast.danger(error.error?.message || error.message);
-            navigate({
-                to: `${basePaths.auth}/${viewPaths.auth.signIn}`,
-                replace: true
-            });
-        },
-        onSuccess: () => navigate({
-            to: `${basePaths.auth}/${viewPaths.auth.signIn}`,
-            replace: true
-        })
-    });
-    const hasSignedOut = useRef(false);
-    useEffect(() => {
-        if (hasSignedOut.current)
-            return;
-        hasSignedOut.current = true;
-        signOut();
-    }, [signOut]);
-    return (_jsx(Spinner, { className: cn("mx-auto my-auto", className), color: "current" }));
-}

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

@@ -1,98 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { authMutationKeys, parseAdditionalFieldValue } from "@better-auth-ui/core";
-import { useAuth, useFetchOptions, 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 { useIsMutating } from "@tanstack/react-query";
-import { useState } from "react";
-import { AdditionalField } from "./additional-field";
-import { FieldSeparator } from "./field-separator";
-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 { additionalFields, authClient, basePaths, emailAndPassword, localization, plugins, redirectTo, socialProviders, viewPaths, navigate } = useAuth();
-    const { fetchOptions, resetFetchOptions } = useFetchOptions();
-    const [password, setPassword] = useState("");
-    const [confirmPassword, setConfirmPassword] = useState("");
-    const { mutate: signUpEmail, isPending: signUpEmailPending } = useSignUpEmail(authClient, {
-        onError: (error) => {
-            setPassword("");
-            setConfirmPassword("");
-            toast.danger(error.error?.message || error.message);
-            resetFetchOptions();
-        },
-        onSuccess: () => {
-            if (emailAndPassword?.requireEmailVerification) {
-                toast.success(localization.auth.verifyYourEmail);
-                navigate({ to: `${basePaths.auth}/${viewPaths.auth.signIn}` });
-            }
-            else {
-                navigate({ to: redirectTo });
-            }
-        }
-    });
-    const [isPasswordVisible, setIsPasswordVisible] = useState(false);
-    const [isConfirmPasswordVisible, setIsConfirmPasswordVisible] = useState(false);
-    const signInMutating = useIsMutating({
-        mutationKey: authMutationKeys.signIn.all
-    });
-    const signUpMutating = useIsMutating({
-        mutationKey: authMutationKeys.signUp.all
-    });
-    const isPending = signInMutating + signUpMutating > 0;
-    const Captcha = plugins.find((plugin) => plugin.captchaComponent)?.captchaComponent;
-    const handleSubmit = async (e) => {
-        e.preventDefault();
-        const formData = new FormData(e.currentTarget);
-        // `emailAndPassword.name === false` hides the name field and submits "".
-        const name = formData.get("name") ?? "";
-        const email = formData.get("email");
-        if (emailAndPassword?.confirmPassword && password !== confirmPassword) {
-            toast.danger(localization.auth.passwordsDoNotMatch);
-            setPassword("");
-            setConfirmPassword("");
-            return;
-        }
-        const additionalFieldValues = {};
-        for (const field of additionalFields ?? []) {
-            if (!field.signUp || field.readOnly)
-                continue;
-            const value = parseAdditionalFieldValue(field, formData.get(field.name));
-            if (field.validate) {
-                try {
-                    await field.validate(value);
-                }
-                catch (error) {
-                    toast.danger(error instanceof Error ? error.message : String(error));
-                    return;
-                }
-            }
-            if (value !== undefined) {
-                additionalFieldValues[field.name] = value;
-            }
-        }
-        signUpEmail({
-            name,
-            email,
-            password,
-            ...additionalFieldValues,
-            fetchOptions
-        });
-    };
-    const showSeparator = emailAndPassword?.enabled && !!socialProviders?.length;
-    return (_jsxs(Card, { className: cn("w-full max-w-sm gap-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, { socialLayout: socialLayout })), showSeparator && (_jsx(FieldSeparator, { children: localization.auth.or }))] })), emailAndPassword?.enabled && (_jsxs(Form, { onSubmit: handleSubmit, className: "flex flex-col gap-4", children: [emailAndPassword.name !== false && (_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, {})] }), additionalFields?.map((field) => field.signUp === "above" && (_jsx(AdditionalField, { name: field.name, field: field, isPending: isPending, variant: variant }, field.name))), _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, {})] })), additionalFields?.map((field) => field.signUp &&
-                                field.signUp !== "above" && (_jsx(AdditionalField, { name: field.name, field: field, isPending: isPending, variant: variant }, field.name))), Captcha && _jsx("div", { className: "flex justify-center", children: Captcha }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs(Button, { type: "submit", className: "w-full", isPending: isPending, children: [signUpEmailPending && _jsx(Spinner, { color: "current", size: "sm" }), localization.auth.signUp] }), plugins.flatMap((plugin) => plugin.authButtons?.map((AuthButton, index) => (_jsx(AuthButton, { view: "signUp" }, `${plugin.id}-${index.toString()}`))))] })] })), socialPosition === "bottom" && (_jsxs(_Fragment, { children: [showSeparator && (_jsx(FieldSeparator, { children: localization.auth.or })), !!socialProviders?.length && (_jsx(ProviderButtons, { socialLayout: socialLayout }))] }))] }), _jsx(Card.Footer, { className: "flex-col gap-3", children: _jsxs(Description, { className: "text-sm", children: [localization.auth.alreadyHaveAnAccount, " ", _jsx(Link, { href: `${basePaths.auth}/${viewPaths.auth.signIn}`, className: "text-accent no-underline hover:underline decoration-accent-hover", children: localization.auth.signIn })] }) })] }));
-}