@better-auth-ui/heroui 1.6.0

package/dist/components/user/switch-account-submenu.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAuth, useListDeviceSessions, useSession, useSetActiveSession } from "@better-auth-ui/react";
+import { Check, CirclePlus } from "@gravity-ui/icons";
+import { Dropdown, Label, Separator } from "@heroui/react";
+import { UserView } from "./user-view";
+/**
+ * Render the popover content for switching between multiple authenticated sessions.
+ *
+ * Shows the current session with a checkmark, lists other device sessions that can be activated,
+ * and provides an option to add a new account. This component should be rendered inside a
+ * Dropdown.SubmenuTrigger to defer the useListDeviceSessions query until the submenu is opened.
+ *
+ * @returns The switch account submenu popover content as a JSX element
+ */
+export function SwitchAccountSubmenu() {
+    const { basePaths, viewPaths, localization } = useAuth();
+    const { settingActiveSession, setActiveSession } = useSetActiveSession();
+    const { data: sessionData } = useSession();
+    const { data: deviceSessions } = useListDeviceSessions();
+    return (_jsx(Dropdown.Popover, { className: "min-w-40 md:min-w-56 max-w-[48svw]", children: _jsxs(Dropdown.Menu, { children: [_jsxs(Dropdown.Item, { className: "px-2", children: [_jsx(UserView, {}), _jsx(Check, { className: "ml-auto" })] }), deviceSessions
+                    ?.filter((deviceSession) => deviceSession.session.id !== sessionData?.session?.id)
+                    .map((deviceSession) => {
+                    return (_jsx(Dropdown.Item, { className: "px-2", isDisabled: !!settingActiveSession, onPress: () => setActiveSession(deviceSession.session.token), children: _jsx(UserView, { user: deviceSession.user }) }, deviceSession.session.id));
+                }), _jsx(Separator, {}), _jsxs(Dropdown.Item, { textValue: localization.auth.addAccount, href: `${basePaths.auth}/${viewPaths.auth.signIn}`, children: [_jsx(CirclePlus, { className: "text-muted" }), _jsx(Label, { children: localization.auth.addAccount })] })] }) }));
+}

package/dist/components/user/user-avatar.d.ts

@@ -0,0 +1,25 @@
+import { type AvatarProps } from "@heroui/react";
+import type { User } from "better-auth";
+import type { ReactNode } from "react";
+export type UserAvatarProps = {
+    className?: string;
+    fallback?: ReactNode;
+    isPending?: boolean;
+    /** @remarks `User` */
+    user?: User & {
+        username?: string | null;
+        displayUsername?: string | null;
+    };
+    size?: AvatarProps["size"];
+};
+/**
+ * Render a user avatar that shows the user's image, initials, or a custom fallback; displays a circular skeleton while the session (or explicit pending flag) is pending.
+ *
+ * @param className - Additional CSS classes applied to the outer avatar container
+ * @param fallback - Custom fallback content to render when no image or initials are available
+ * @param isPending - When true, force rendering of the loading skeleton (unless an explicit `user` prop is provided)
+ * @param user - Optional user object to display; when omitted the current session user is used if available
+ * @param size - Visual size of the avatar; one of `"sm"`, `"md"`, or `"lg"` (default: `"sm"`)
+ * @returns A React element that displays the user's avatar image, initials, or the provided fallback; renders a circular skeleton while loading
+ */
+export declare function UserAvatar({ className, fallback, isPending, user, size, style, ...props }: UserAvatarProps & AvatarProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useSession } from "@better-auth-ui/react";
+import { Person } from "@gravity-ui/icons";
+import { Avatar, cn, Skeleton } from "@heroui/react";
+/**
+ * Render a user avatar that shows the user's image, initials, or a custom fallback; displays a circular skeleton while the session (or explicit pending flag) is pending.
+ *
+ * @param className - Additional CSS classes applied to the outer avatar container
+ * @param fallback - Custom fallback content to render when no image or initials are available
+ * @param isPending - When true, force rendering of the loading skeleton (unless an explicit `user` prop is provided)
+ * @param user - Optional user object to display; when omitted the current session user is used if available
+ * @param size - Visual size of the avatar; one of `"sm"`, `"md"`, or `"lg"` (default: `"sm"`)
+ * @returns A React element that displays the user's avatar image, initials, or the provided fallback; renders a circular skeleton while loading
+ */
+export function UserAvatar({ className, fallback, isPending, user, size = "sm", style, ...props }) {
+    const { data: session, isPending: sessionPending } = useSession({
+        enabled: !user && !isPending
+    });
+    if ((isPending || sessionPending) && !user) {
+        return (_jsx(Skeleton, { className: cn("rounded-full", size === "sm" ? "size-8" : size === "md" ? "size-10" : "size-12", className), style: style }));
+    }
+    const resolvedUser = user ?? session?.user;
+    const initials = (resolvedUser?.username ||
+        resolvedUser?.name ||
+        resolvedUser?.email)
+        ?.slice(0, 2)
+        .toUpperCase();
+    return (_jsxs(Avatar, { size: size, className: cn("rounded-full", className), style: style, ...props, children: [_jsx(Avatar.Image, { alt: resolvedUser?.displayUsername ||
+                    resolvedUser?.name ||
+                    resolvedUser?.email, src: resolvedUser?.image ?? undefined }), _jsx(Avatar.Fallback, { className: cn(size === "lg" ? "text-xl" : size === "md" ? "text-base" : "text-sm"), delayMs: resolvedUser?.image ? 600 : undefined, children: fallback || initials || _jsx(Person, { className: "size-4" }) })] }));
+}

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

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

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

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

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

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

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

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

package/dist/core.d.ts

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

package/dist/core.js

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

package/dist/hooks/use-auth.d.ts

@@ -0,0 +1,2 @@
+import { type AnyAuthConfig } from "@better-auth-ui/react";
+export declare function useAuth(config?: AnyAuthConfig): import("@better-auth-ui/react").AuthConfig;

package/dist/hooks/use-auth.js

@@ -0,0 +1,8 @@
+import { useAuth as useAuthPrimitive } from "@better-auth-ui/react";
+import { toast } from "sonner";
+const extendConfig = {
+    toast
+};
+export function useAuth(config) {
+    return useAuthPrimitive();
+}

package/dist/hooks/use-redirect-to.d.ts

@@ -0,0 +1,8 @@
+import type { AnyAuthConfig } from "@better-auth-ui/react";
+/**
+ * Redirects unauthenticated users to the sign-in page, preserving the current URL as a redirectTo query parameter.
+ *
+ * @param config - Optional partial AuthConfig used to customize auth behavior
+ * @param shouldRedirect - Condition to check before redirecting (default: when user is not authenticated and not loading)
+ */
+export declare function useRedirectTo(config?: AnyAuthConfig, shouldRedirect?: boolean): void;

package/dist/hooks/use-redirect-to.js

@@ -0,0 +1,19 @@
+import { useEffect } from "react";
+import { useAuth } from "./use-auth";
+/**
+ * Redirects unauthenticated users to the sign-in page, preserving the current URL as a redirectTo query parameter.
+ *
+ * @param config - Optional partial AuthConfig used to customize auth behavior
+ * @param shouldRedirect - Condition to check before redirecting (default: when user is not authenticated and not loading)
+ */
+export function useRedirectTo(config, shouldRedirect) {
+    const { basePaths, viewPaths, replace } = useAuth(config);
+    useEffect(() => {
+        if (shouldRedirect === false)
+            return;
+        const currentURL = window.location.pathname + window.location.search;
+        const redirectTo = encodeURIComponent(currentURL);
+        const signInPath = `${basePaths.auth}/${viewPaths.auth.signIn}?redirectTo=${redirectTo}`;
+        replace(signInPath);
+    }, [basePaths.auth, viewPaths.auth.signIn, replace, shouldRedirect]);
+}

package/dist/hooks/use-sign-in.d.ts

@@ -0,0 +1,8 @@
+import type { AuthConfig } from "@better-auth-ui/react";
+export declare function useSignIn(config: AuthConfig<{
+    RESEND: string;
+    VERIFICATION_EMAIL_SENT: string;
+}>): [state: {
+    email: string;
+    password: string;
+}, dispatch: (payload: FormData) => void, isPending: boolean];

package/dist/hooks/use-sign-in.js

@@ -0,0 +1,53 @@
+"use client";
+import { useActionState } from "react";
+export function useSignIn(config) {
+    const { authClient, baseURL, emailAndPassword, localization, redirectTo, navigate, toast } = config;
+    const { refetch } = authClient.useSession();
+    const signInAction = async (_, formData) => {
+        const email = formData.get("email");
+        const password = formData.get("password");
+        const rememberMe = formData.get("rememberMe") === "on";
+        const { error } = await authClient.signIn.email({
+            email,
+            password,
+            ...(emailAndPassword?.rememberMe ? { rememberMe } : {})
+        }, { disableSignal: true });
+        if (error) {
+            if (error.code === "EMAIL_NOT_VERIFIED") {
+                const toastId = toast.error(error.message, {
+                    action: {
+                        label: localization.RESEND,
+                        onClick: async () => {
+                            const callbackURL = `${baseURL ?? ""}${redirectTo}`;
+                            toast.dismiss?.(toastId);
+                            const { error } = await authClient.sendVerificationEmail({
+                                email,
+                                callbackURL
+                            });
+                            if (error) {
+                                toast.error(error.message);
+                            }
+                            else {
+                                toast.success(localization.VERIFICATION_EMAIL_SENT);
+                            }
+                        }
+                    }
+                });
+            }
+            else {
+                toast.error(error.message);
+            }
+            return {
+                email,
+                password: ""
+            };
+        }
+        await refetch();
+        navigate(redirectTo);
+        return { email, password };
+    };
+    return useActionState(signInAction, {
+        email: "",
+        password: ""
+    });
+}

package/dist/index.d.ts

@@ -0,0 +1,33 @@
+export * from "./components/auth/auth";
+export * from "./components/auth/auth-provider";
+export * from "./components/auth/forgot-password";
+export * from "./components/auth/magic-link";
+export * from "./components/auth/magic-link-button";
+export * from "./components/auth/provider-buttons";
+export * from "./components/auth/reset-password";
+export * from "./components/auth/sign-in";
+export * from "./components/auth/sign-out";
+export * from "./components/auth/sign-up";
+export * from "./components/email/email-changed-email";
+export * from "./components/email/email-verification-email";
+export * from "./components/email/magic-link-email";
+export * from "./components/email/new-device-email";
+export * from "./components/email/otp-email";
+export * from "./components/email/password-changed-email";
+export * from "./components/email/reset-password-email";
+export * from "./components/settings/account/account-settings";
+export * from "./components/settings/account/appearance";
+export * from "./components/settings/account/change-email";
+export * from "./components/settings/account/manage-account";
+export * from "./components/settings/account/manage-accounts";
+export * from "./components/settings/account/user-profile";
+export * from "./components/settings/security/active-sessions";
+export * from "./components/settings/security/change-password";
+export * from "./components/settings/security/danger-zone";
+export * from "./components/settings/security/delete-user";
+export * from "./components/settings/security/linked-accounts";
+export * from "./components/settings/security/security-settings";
+export * from "./components/settings/settings";
+export * from "./components/user/user-avatar";
+export * from "./components/user/user-button";
+export * from "./components/user/user-view";

package/dist/index.js

@@ -0,0 +1,34 @@
+"use client";
+export * from "./components/auth/auth";
+export * from "./components/auth/auth-provider";
+export * from "./components/auth/forgot-password";
+export * from "./components/auth/magic-link";
+export * from "./components/auth/magic-link-button";
+export * from "./components/auth/provider-buttons";
+export * from "./components/auth/reset-password";
+export * from "./components/auth/sign-in";
+export * from "./components/auth/sign-out";
+export * from "./components/auth/sign-up";
+export * from "./components/email/email-changed-email";
+export * from "./components/email/email-verification-email";
+export * from "./components/email/magic-link-email";
+export * from "./components/email/new-device-email";
+export * from "./components/email/otp-email";
+export * from "./components/email/password-changed-email";
+export * from "./components/email/reset-password-email";
+export * from "./components/settings/account/account-settings";
+export * from "./components/settings/account/appearance";
+export * from "./components/settings/account/change-email";
+export * from "./components/settings/account/manage-account";
+export * from "./components/settings/account/manage-accounts";
+export * from "./components/settings/account/user-profile";
+export * from "./components/settings/security/active-sessions";
+export * from "./components/settings/security/change-password";
+export * from "./components/settings/security/danger-zone";
+export * from "./components/settings/security/delete-user";
+export * from "./components/settings/security/linked-accounts";
+export * from "./components/settings/security/security-settings";
+export * from "./components/settings/settings";
+export * from "./components/user/user-avatar";
+export * from "./components/user/user-button";
+export * from "./components/user/user-view";

package/dist/lib/utils.d.ts

@@ -0,0 +1,2 @@
+import { type ClassValue } from "clsx";
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/lib/utils.js

@@ -0,0 +1,5 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}

package/dist/react-exports.d.ts

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

package/dist/react-exports.js

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

package/dist/server.d.ts

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

package/dist/server.js

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

package/dist/src/components/auth/auth-provider.d.ts

@@ -0,0 +1,8 @@
+import { type AuthProviderProps } from "@better-auth-ui/react";
+/**
+ * Provides an authentication context by rendering an auth provider with the sonner toast handler injected, forwarding remaining configuration and rendering `children` inside it.
+ *
+ * @param children - React nodes to render inside the authentication provider
+ * @returns A React element that renders an authentication provider configured with the provided props and toast handler
+ */
+export declare function AuthProvider({ children, navigate, ...config }: AuthProviderProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/auth/auth-provider.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AuthProvider as AuthProviderPrimitive } from "@better-auth-ui/react";
+import { RouterProvider } from "@heroui/react";
+import { toast } from "sonner";
+/**
+ * Provides an authentication context by rendering an auth provider with the sonner toast handler injected, forwarding remaining configuration and rendering `children` inside it.
+ *
+ * @param children - React nodes to render inside the authentication provider
+ * @returns A React element that renders an authentication provider configured with the provided props and toast handler
+ */
+export function AuthProvider({ children, navigate, ...config }) {
+    return (_jsx(AuthProviderPrimitive, { toast: toast, navigate: navigate, ...config, children: _jsx(RouterProvider, { navigate: (path) => navigate({ to: path }), children: children }) }));
+}

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

@@ -0,0 +1,22 @@
+import type { AuthView } from "@better-auth-ui/react/core";
+import type { CardProps } from "@heroui/react";
+import type { SocialLayout } from "./provider-buttons";
+export type AuthProps = {
+    className?: string;
+    path?: string;
+    socialLayout?: SocialLayout;
+    socialPosition?: "top" | "bottom";
+    variant?: CardProps["variant"];
+    view?: AuthView;
+};
+/**
+ * Render the appropriate authentication view based on the provided `view` or `path`.
+ *
+ * @param path - Route path used to resolve an auth view when `view` is not provided
+ * @param socialLayout - Social layout to apply to sign-in/sign-up/magic-link views
+ * @param socialPosition - Position for social buttons ("top" or "bottom")
+ * @param variant - Variant to apply to the card
+ * @param view - Explicit auth view to render (e.g., "signIn", "signUp")
+ * @returns The React element for the resolved authentication view
+ */
+export declare function Auth({ path, socialLayout, socialPosition, view, ...props }: AuthProps & CardProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/auth/auth.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useAuth } from "@better-auth-ui/react";
+import { ForgotPassword } from "./forgot-password";
+import { MagicLink } from "./magic-link";
+import { ResetPassword } from "./reset-password";
+import { SignIn } from "./sign-in";
+import { SignOut } from "./sign-out";
+import { SignUp } from "./sign-up";
+/**
+ * Render the appropriate authentication view based on the provided `view` or `path`.
+ *
+ * @param path - Route path used to resolve an auth view when `view` is not provided
+ * @param socialLayout - Social layout to apply to sign-in/sign-up/magic-link views
+ * @param socialPosition - Position for social buttons ("top" or "bottom")
+ * @param variant - Variant to apply to the card
+ * @param view - Explicit auth view to render (e.g., "signIn", "signUp")
+ * @returns The React element for the resolved authentication view
+ */
+export function Auth({ path, socialLayout, socialPosition, view, ...props }) {
+    const { viewPaths } = useAuth();
+    if (!view && !path) {
+        throw new Error("[Better Auth UI] Either `view` or `path` must be provided");
+    }
+    const authPathViews = Object.fromEntries(Object.entries(viewPaths.auth).map(([k, v]) => [v, k]));
+    const currentView = view || (path ? authPathViews[path] : undefined);
+    switch (currentView) {
+        case "signIn":
+            return (_jsx(SignIn, { socialLayout: socialLayout, socialPosition: socialPosition, ...props }));
+        case "signUp":
+            return (_jsx(SignUp, { socialLayout: socialLayout, socialPosition: socialPosition, ...props }));
+        case "magicLink":
+            return (_jsx(MagicLink, { socialLayout: socialLayout, socialPosition: socialPosition, ...props }));
+        case "forgotPassword":
+            return _jsx(ForgotPassword, { ...props });
+        case "resetPassword":
+            return _jsx(ResetPassword, { ...props });
+        case "signOut":
+            return _jsx(SignOut, { ...props });
+        default:
+            throw new Error(`[Better Auth UI] Valid views are: ${Object.keys(viewPaths.auth).join(", ")}`);
+    }
+}

package/dist/src/components/auth/field-separator.d.ts

@@ -0,0 +1,4 @@
+import type { ReactNode } from "react";
+export declare function FieldSeparator({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/auth/field-separator.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Separator } from "@heroui/react";
+export function FieldSeparator({ children }) {
+    return (_jsxs("div", { className: "flex items-center gap-4", children: [_jsx(Separator, { className: "flex-1" }), _jsx("p", { className: "text-xs text-muted shrink-0", children: children }), _jsx(Separator, { className: "flex-1" })] }));
+}

package/dist/src/components/auth/forgot-password.d.ts

@@ -0,0 +1,15 @@
+import { type CardProps } from "@heroui/react";
+export type ForgotPasswordProps = {
+    className?: string;
+    variant?: CardProps["variant"];
+};
+/**
+ * Render a card-based "Forgot Password" form that sends a password-reset email.
+ *
+ * The form displays an email input, submit button, and a link back to sign-in.
+ * Toasts are displayed on success or error via the `useForgotPassword` hook.
+ *
+ * @param className - Optional additional CSS class names applied to the card
+ * @returns The forgot-password form UI as a JSX element
+ */
+export declare function ForgotPassword({ className, variant, ...props }: ForgotPasswordProps & CardProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/auth/forgot-password.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAuth, useRequestPasswordReset } from "@better-auth-ui/react";
+import { Button, Card, Description, FieldError, Fieldset, Form, Input, Label, Link, Spinner, TextField, toast } from "@heroui/react";
+import { cn } from "../../lib/utils";
+/**
+ * Render a card-based "Forgot Password" form that sends a password-reset email.
+ *
+ * The form displays an email input, submit button, and a link back to sign-in.
+ * Toasts are displayed on success or error via the `useForgotPassword` hook.
+ *
+ * @param className - Optional additional CSS class names applied to the card
+ * @returns The forgot-password form UI as a JSX element
+ */
+export function ForgotPassword({ className, variant, ...props }) {
+    const { basePaths, localization, viewPaths, navigate } = useAuth();
+    const { mutate: requestPasswordReset, isPending } = useRequestPasswordReset({
+        onError: (error) => toast.danger(error.error?.message || error.message),
+        onSuccess: () => {
+            toast.success(localization.auth.passwordResetEmailSent);
+            navigate({ to: `${basePaths.auth}/${viewPaths.auth.signIn}` });
+        }
+    });
+    function handleSubmit(e) {
+        e.preventDefault();
+        const formData = new FormData(e.currentTarget);
+        requestPasswordReset({ email: formData.get("email") });
+    }
+    return (_jsx(Card, { className: cn("w-full max-w-sm p-4 md:p-6", className), variant: variant, ...props, children: _jsx(Card.Content, { children: _jsx(Form, { onSubmit: handleSubmit, children: _jsxs(Fieldset, { className: "gap-4", children: [_jsx(Label, { className: "text-xl", children: localization.auth.forgotPassword }), _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, { className: "text-wrap" })] }), _jsx(Fieldset.Actions, { children: _jsxs(Button, { type: "submit", className: "w-full", isPending: isPending, children: [isPending && _jsx(Spinner, { color: "current", size: "sm" }), localization.auth.sendResetLink] }) }), _jsxs(Description, { className: "text-center text-sm", children: [localization.auth.rememberYourPassword, " ", _jsx(Link, { href: `${basePaths.auth}/${viewPaths.auth.signIn}`, className: "text-accent decoration-accent no-underline hover:underline", children: localization.auth.signIn })] })] }) }) }) }));
+}

package/dist/src/components/auth/magic-link-button.d.ts

@@ -0,0 +1,13 @@
+import type { AuthView } from "@better-auth-ui/core";
+export type MagicLinkButtonProps = {
+    isPending: boolean;
+    view?: AuthView;
+};
+/**
+ * Renders a full-width tertiary link-style button that navigates to either the magic-link or sign-in route.
+ *
+ * @param isPending - If true, applies disabled styling and prevents interaction
+ * @param view - Current auth view; when `"magicLink"`, the button targets the sign-in/password variant
+ * @returns The rendered Link element with the appropriate href, icon, and label
+ */
+export declare function MagicLinkButton({ isPending, view }: MagicLinkButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/auth/magic-link-button.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAuth } from "@better-auth-ui/react";
+import { Envelope, Lock } from "@gravity-ui/icons";
+import { Link } from "@heroui/react";
+import { buttonVariants } from "@heroui/styles";
+import { cn } from "../../lib/utils";
+/**
+ * Renders a full-width tertiary link-style button that navigates to either the magic-link or sign-in route.
+ *
+ * @param isPending - If true, applies disabled styling and prevents interaction
+ * @param view - Current auth view; when `"magicLink"`, the button targets the sign-in/password variant
+ * @returns The rendered Link element with the appropriate href, icon, and label
+ */
+export function MagicLinkButton({ isPending, view }) {
+    const { basePaths, viewPaths, localization } = useAuth();
+    const isMagicLinkView = view === "magicLink";
+    return (_jsxs(Link, { href: `${basePaths.auth}/${isMagicLinkView ? viewPaths.auth.signIn : viewPaths.auth.magicLink}`, className: cn(buttonVariants({ variant: "tertiary" }), "w-full gap-2", isPending && "status-disabled pointer-events-none"), children: [isMagicLinkView ? _jsx(Lock, {}) : _jsx(Envelope, {}), localization.auth.continueWith.replace("{{provider}}", isMagicLinkView
+                ? localization.auth.password
+                : localization.auth.magicLink)] }));
+}

package/dist/src/components/auth/magic-link.d.ts

@@ -0,0 +1,17 @@
+import { type CardProps } from "@heroui/react";
+import { type SocialLayout } from "./provider-buttons";
+export type MagicLinkProps = {
+    className?: string;
+    socialLayout?: SocialLayout;
+    socialPosition?: "top" | "bottom";
+    variant?: CardProps["variant"];
+};
+/**
+ * Render a card-based sign-in form that sends an email magic link and optionally shows social provider buttons.
+ *
+ * @param className - Additional CSS class names applied to the card container
+ * @param socialLayout - Layout style for social provider buttons
+ * @param socialPosition - Position of social provider buttons; `"top"` or `"bottom"`. Defaults to `"bottom"`.
+ * @returns The magic-link sign-in UI as a JSX element
+ */
+export declare function MagicLink({ className, socialLayout, socialPosition, variant, ...props }: MagicLinkProps & CardProps): import("react/jsx-runtime").JSX.Element;