@better-auth-ui/heroui 1.6.0

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

@@ -0,0 +1,29 @@
+import type { SettingsView } from "@better-auth-ui/react/core";
+import { type TabsProps } from "@heroui/react";
+import { type ComponentProps } from "react";
+export type SettingsProps = {
+    className?: string;
+    hideNav?: boolean;
+    path?: string;
+    view?: SettingsView;
+};
+/**
+ * Renders the settings UI and activates the appropriate settings view based on `view` or `path`.
+ *
+ * @param className - Additional CSS class names applied to the root container
+ * @param path - Route path used to resolve which settings view to activate when `view` is not provided
+ * @param view - Explicit settings view to activate, e.g. `"account"` or `"security"`
+ * @param hideNav - When `true`, hide the navigation tabs
+ * @returns A DOM tree containing the responsive settings tabs and the currently selected settings panel
+ *
+ * @throws Error if neither `view` nor `path` is provided
+ */
+export declare function Settings({ className, hideNav, path, view, ...props }: SettingsProps & ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+/**
+ * Renders a responsive pair of Tabs components: horizontal on small screens and vertical on medium-and-up screens.
+ *
+ * @param className - Additional CSS classes applied to both responsive tab containers.
+ * @param props - All other props are forwarded to each underlying Tabs component.
+ * @returns A JSX element containing the responsive Tabs pair.
+ */
+export declare function ResponsiveTabs({ className, ...props }: TabsProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useAuth, useAuthenticate } from "@better-auth-ui/react";
+import { Person, Shield } from "@gravity-ui/icons";
+import { cn, Tabs, useIsHydrated } from "@heroui/react";
+import { useMemo } from "react";
+import { AccountSettings } from "./account/account-settings";
+import { SecuritySettings } from "./security/security-settings";
+/**
+ * Renders the settings UI and activates the appropriate settings view based on `view` or `path`.
+ *
+ * @param className - Additional CSS class names applied to the root container
+ * @param path - Route path used to resolve which settings view to activate when `view` is not provided
+ * @param view - Explicit settings view to activate, e.g. `"account"` or `"security"`
+ * @param hideNav - When `true`, hide the navigation tabs
+ * @returns A DOM tree containing the responsive settings tabs and the currently selected settings panel
+ *
+ * @throws Error if neither `view` nor `path` is provided
+ */
+export function Settings({ className, hideNav, path, view, ...props }) {
+    const { basePaths, localization, viewPaths } = useAuth();
+    useAuthenticate();
+    if (!view && !path) {
+        throw new Error("[Better Auth UI] Either `view` or `path` must be provided");
+    }
+    const settingsPathViews = useMemo(() => Object.fromEntries(Object.entries(viewPaths.settings).map(([k, v]) => [v, k])), [viewPaths.settings]);
+    const currentView = view || (path ? settingsPathViews[path] : undefined);
+    const isHydrated = useIsHydrated();
+    return (_jsxs("div", { className: cn("w-full flex flex-col md:flex-row gap-4 md:gap-6", className), ...props, children: [_jsx(ResponsiveTabs, { selectedKey: currentView, className: cn(hideNav && "hidden"), children: _jsx(Tabs.ListContainer, { children: _jsxs(Tabs.List, { "aria-label": localization.settings.settings, className: "overflow-auto md:w-64 lg:w-72 xl:w-80", children: [_jsxs(Tabs.Tab, { id: "account", href: `${basePaths.settings}/${viewPaths.settings.account}`, className: "gap-2", children: [_jsx(Person, {}), localization.settings.account, _jsx(Tabs.Indicator, {})] }), _jsxs(Tabs.Tab, { id: "security", href: `${basePaths.settings}/${viewPaths.settings.security}`, className: "gap-2", children: [_jsx(Shield, {}), localization.settings.security, _jsx(Tabs.Indicator, {})] })] }) }) }), currentView === "account" && _jsx(AccountSettings, {}), currentView === "security" && _jsx(SecuritySettings, {})] }, `settings-${isHydrated}`));
+}
+/**
+ * Renders a responsive pair of Tabs components: horizontal on small screens and vertical on medium-and-up screens.
+ *
+ * @param className - Additional CSS classes applied to both responsive tab containers.
+ * @param props - All other props are forwarded to each underlying Tabs component.
+ * @returns A JSX element containing the responsive Tabs pair.
+ */
+export function ResponsiveTabs({ className, ...props }) {
+    return (_jsxs(_Fragment, { children: [_jsx(Tabs, { className: cn("md:hidden", className), orientation: "horizontal", ...props }), _jsx(Tabs, { className: cn("hidden md:flex", className), orientation: "vertical", ...props })] }));
+}

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

@@ -0,0 +1,16 @@
+import type { Session, User } from "better-auth";
+type DeviceSession = {
+    session: Session;
+    user: User;
+};
+export type SwitchAccountItemProps = {
+    deviceSession: DeviceSession;
+};
+/**
+ * Render a dropdown item for switching to a different authenticated session.
+ *
+ * @param deviceSession - The device session to display and switch to when pressed
+ * @returns The switch account dropdown item as a JSX element
+ */
+export declare function SwitchAccountItem({ deviceSession }: SwitchAccountItemProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/components/user/switch-account-item.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useSetActiveSession } from "@better-auth-ui/react";
+import { Dropdown, Spinner } from "@heroui/react";
+import { UserView } from "./user-view";
+/**
+ * Render a dropdown item for switching to a different authenticated session.
+ *
+ * @param deviceSession - The device session to display and switch to when pressed
+ * @returns The switch account dropdown item as a JSX element
+ */
+export function SwitchAccountItem({ deviceSession }) {
+    const { mutate: setActiveSession, isPending } = useSetActiveSession();
+    return (_jsxs(Dropdown.Item, { className: "px-2", isDisabled: isPending, onPress: () => setActiveSession({ sessionToken: deviceSession.session.token }), children: [_jsx(UserView, { user: deviceSession.user }), isPending && _jsx(Spinner, { color: "current", size: "sm", className: "ml-auto" })] }));
+}

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

@@ -0,0 +1,10 @@
+/**
+ * Render the menu content for switching between multiple authenticated sessions.
+ *
+ * Shows the current session with a checkmark, lists other device sessions that can be activated,
+ * and provides an option to add a new account. This component should be rendered inside a
+ * Dropdown.SubmenuTrigger to defer the useListDeviceSessions query until the submenu is opened.
+ *
+ * @returns The switch account menu content as a JSX element
+ */
+export declare function SwitchAccountMenu(): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/user/switch-account-menu.js

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

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

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

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

@@ -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: sessionData, isPending: sessionPending } = useSession({
+        enabled: !user && !isPending
+    });
+    if ((isPending || sessionPending) && !user) {
+        return (_jsx(Skeleton, { className: cn("rounded-full", size === "sm" ? "size-8" : size === "md" ? "size-10" : "size-12", className), style: style }));
+    }
+    const resolvedUser = user ?? sessionData?.user;
+    const initials = (resolvedUser?.username ||
+        resolvedUser?.name ||
+        resolvedUser?.email)
+        ?.slice(0, 2)
+        .toUpperCase();
+    return (_jsxs(Avatar, { size: size, className: cn("rounded-full", className), style: style, ...props, children: [_jsx(Avatar.Image, { alt: resolvedUser?.displayUsername ||
+                    resolvedUser?.name ||
+                    resolvedUser?.email, src: resolvedUser?.image ?? undefined }), _jsx(Avatar.Fallback, { className: cn(size === "lg" ? "text-xl" : size === "md" ? "text-base" : "text-sm"), delayMs: resolvedUser?.image ? 600 : undefined, children: fallback || initials || _jsx(Person, { className: "size-4" }) })] }));
+}

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

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

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

@@ -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, settings: { theme, setTheme, themes } } = useAuth();
+    const { data: sessionData, isPending: sessionPending } = useSession();
+    return (_jsxs(Dropdown, { children: [size === "icon" ? (_jsx(Dropdown.Trigger, { className: cn("rounded-full", className), children: _jsx(UserAvatar, {}) })) : (_jsxs(Button, { variant: variant, className: cn("h-auto font-normal justify-start px-3 py-2 text-left", className), children: [sessionData || sessionPending ? (_jsx(UserView, { isPending: sessionPending })) : (_jsxs(_Fragment, { children: [_jsx(UserAvatar, {}), _jsx("p", { className: "text-sm font-medium", children: localization.auth.account })] })), _jsx(ChevronsExpandVertical, { className: "ml-auto size-3.5" })] })), _jsxs(Dropdown.Popover, { placement: placement, className: "min-w-40 md:min-w-56 max-w-[48svw]", children: [sessionData && (_jsx("div", { className: "px-3 pt-3 pb-1", children: _jsx(UserView, {}) })), _jsx(Dropdown.Menu, { children: sessionData ? (_jsxs(_Fragment, { children: [_jsxs(Dropdown.Item, { textValue: localization.settings.settings, href: `${basePaths.settings}/${viewPaths.settings.account}`, children: [_jsx(Gear, { className: "text-muted" }), _jsx(Label, { children: localization.settings.settings })] }), multiSession && (_jsxs(Dropdown.SubmenuTrigger, { children: [_jsxs(Dropdown.Item, { textValue: localization.auth.switchAccount, children: [_jsx(Persons, { className: "text-muted" }), _jsx(Label, { children: localization.auth.switchAccount }), _jsx(Dropdown.SubmenuIndicator, {})] }), _jsx(Dropdown.Popover, { className: "min-w-40 md:min-w-56 max-w-[48svw]", children: _jsx(SwitchAccountMenu, {}) })] })), themeToggle && theme && setTheme && themes?.length && (_jsxs(Dropdown.Item, { className: "py-1 pe-2", children: [_jsx(Label, { children: localization.settings.theme }), _jsx(Tabs, { className: "ml-auto", selectedKey: theme, onSelectionChange: (key) => setTheme(key), children: _jsx(Tabs.ListContainer, { children: _jsxs(Tabs.List, { "aria-label": localization.settings.theme, className: "*:h-5 *:w-5 *:p-0", children: [themes.includes("system") && (_jsxs(Tabs.Tab, { id: "system", "aria-label": localization.settings.system, children: [_jsx(Display, { className: "size-3" }), _jsx(Tabs.Indicator, {})] })), themes.includes("light") && (_jsxs(Tabs.Tab, { id: "light", "aria-label": localization.settings.light, children: [_jsx(Sun, { className: "size-3" }), _jsx(Tabs.Indicator, {})] })), themes.includes("dark") && (_jsxs(Tabs.Tab, { id: "dark", "aria-label": localization.settings.dark, children: [_jsx(Moon, { className: "size-3" }), _jsx(Tabs.Indicator, {})] }))] }) }) })] })), _jsx(Separator, {}), _jsxs(Dropdown.Item, { textValue: localization.auth.signOut, href: `${basePaths.auth}/${viewPaths.auth.signOut}`, children: [_jsx(ArrowRightFromSquare, { className: "text-muted" }), _jsx(Label, { children: localization.auth.signOut })] })] })) : (_jsxs(_Fragment, { children: [_jsxs(Dropdown.Item, { textValue: localization.auth.signIn, href: `${basePaths.auth}/${viewPaths.auth.signIn}`, children: [_jsx(ArrowRightToSquare, { className: "text-muted" }), _jsx(Label, { children: localization.auth.signIn })] }), _jsxs(Dropdown.Item, { textValue: localization.auth.signUp, href: `${basePaths.auth}/${viewPaths.auth.signUp}`, children: [_jsx(PersonPlus, { className: "text-muted" }), _jsx(Label, { children: localization.auth.signUp })] })] })) })] })] }));
+}

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

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

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

@@ -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: sessionData, isPending: sessionPending } = useSession({
+        enabled: !user && !isPending
+    });
+    const resolvedUser = user ?? sessionData?.user;
+    if ((isPending || sessionPending) && !user) {
+        return (_jsxs("div", { className: cn("flex items-center gap-2 min-w-0", className), ...props, children: [_jsx(UserAvatar, { isPending: true, size: size }), _jsxs("div", { className: "flex flex-col gap-1 min-w-0", children: [_jsx(Skeleton, { className: "h-3.5 w-24 rounded-lg" }), _jsx(Skeleton, { className: "h-3 w-32 rounded-lg" })] })] }));
+    }
+    return (_jsxs("div", { className: cn("flex items-center gap-2 min-w-0", className), ...props, children: [_jsx(UserAvatar, { user: resolvedUser, size: size }), _jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-sm font-medium truncate leading-tight", children: resolvedUser?.displayUsername ||
+                            resolvedUser?.name ||
+                            resolvedUser?.email }), (resolvedUser?.displayUsername || resolvedUser?.name) && (_jsx("p", { className: "text-muted text-xs mb-0.5 truncate overflow-x-hidden", children: resolvedUser?.email }))] })] }));
+}

package/dist/src/core.d.ts

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

package/dist/src/core.js

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

package/dist/src/index.d.ts

@@ -0,0 +1,31 @@
+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/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/src/index.js

@@ -0,0 +1,32 @@
+"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/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/src/lib/utils.d.ts

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

package/dist/src/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/src/react-exports.d.ts

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

package/dist/src/react-exports.js

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

package/dist/styles.css

@@ -0,0 +1 @@
+@source ".";

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@better-auth-ui/heroui",
+  "version": "1.6.0",
+  "type": "module",
+  "scripts": {
+    "build": "tsc && bun styles",
+    "dev": "bun styles && tsc --watch",
+    "styles": "cpy src/styles.css dist/ --flat",
+    "test": "vitest"
+  },
+  "files": [
+    "src",
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./core": {
+      "import": "./dist/core.js",
+      "types": "./dist/core.d.ts"
+    },
+    "./react": {
+      "import": "./dist/react-exports.js",
+      "types": "./dist/react-exports.d.ts"
+    },
+    "./styles": "./dist/styles.css"
+  },
+  "devDependencies": {
+    "@gravity-ui/icons": "^2.18.0",
+    "@heroui/react": "^3.0.2",
+    "@heroui/styles": "^3.0.2",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/react": "^19.2.14",
+    "@vitejs/plugin-react": "^6.0.1",
+    "@vitest/browser-playwright": "^4.1.4",
+    "better-auth": "^1.6.4",
+    "cpy-cli": "^7.0.0",
+    "playwright": "^1.59.1",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
+    "bowser": "^2.11.0",
+    "vitest": "^4.1.4"
+  },
+  "dependencies": {
+    "@better-auth-ui/core": "*",
+    "@better-auth-ui/react": "*"
+  },
+  "peerDependencies": {
+    "@gravity-ui/icons": ">=2.18.0",
+    "@heroui/react": ">=3.0.2",
+    "@heroui/styles": ">=3.0.2",
+    "better-auth": ">=1.6.4",
+    "react": ">=19.2.5",
+    "react-dom": ">=19.2.5",
+    "bowser": ">=2.11.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/components/auth/auth-provider.tsx

@@ -0,0 +1,27 @@
+import {
+  AuthProvider as AuthProviderPrimitive,
+  type AuthProviderProps as AuthProviderPropsPrimitive
+} from "@better-auth-ui/react"
+import { RouterProvider } from "@heroui/react"
+
+export type AuthProviderProps = Omit<AuthProviderPropsPrimitive, "Link">
+
+/**
+ * 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
+}: AuthProviderProps) {
+  return (
+    <AuthProviderPrimitive navigate={navigate} {...config}>
+      <RouterProvider navigate={(path) => navigate({ to: path })}>
+        {children}
+      </RouterProvider>
+    </AuthProviderPrimitive>
+  )
+}

package/src/components/auth/auth.tsx

@@ -0,0 +1,87 @@
+import { useAuth } from "@better-auth-ui/react"
+import type { AuthView } from "@better-auth-ui/react/core"
+import type { CardProps } from "@heroui/react"
+import { ForgotPassword } from "./forgot-password"
+import { MagicLink } from "./magic-link"
+import type { SocialLayout } from "./provider-buttons"
+import { ResetPassword } from "./reset-password"
+import { SignIn } from "./sign-in"
+import { SignOut } from "./sign-out"
+import { SignUp } from "./sign-up"
+
+export type AuthProps = {
+  className?: string
+  path?: string
+  socialLayout?: SocialLayout
+  socialPosition?: "top" | "bottom"
+  variant?: CardProps["variant"]
+  /** @remarks `AuthView` */
+  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 function Auth({
+  path,
+  socialLayout,
+  socialPosition,
+  view,
+  ...props
+}: AuthProps & CardProps) {
+  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])
+  ) as Record<string, AuthView>
+
+  const currentView = view || (path ? authPathViews[path] : undefined)
+
+  switch (currentView) {
+    case "signIn":
+      return (
+        <SignIn
+          socialLayout={socialLayout}
+          socialPosition={socialPosition}
+          {...props}
+        />
+      )
+    case "signUp":
+      return (
+        <SignUp
+          socialLayout={socialLayout}
+          socialPosition={socialPosition}
+          {...props}
+        />
+      )
+    case "magicLink":
+      return (
+        <MagicLink
+          socialLayout={socialLayout}
+          socialPosition={socialPosition}
+          {...props}
+        />
+      )
+    case "forgotPassword":
+      return <ForgotPassword {...props} />
+    case "resetPassword":
+      return <ResetPassword {...props} />
+    case "signOut":
+      return <SignOut {...props} />
+    default:
+      throw new Error(
+        `[Better Auth UI] Valid views are: ${Object.keys(viewPaths.auth).join(", ")}`
+      )
+  }
+}

package/src/components/auth/field-separator.tsx

@@ -0,0 +1,14 @@
+import { Separator } from "@heroui/react"
+import type { ReactNode } from "react"
+
+export function FieldSeparator({ children }: { children: ReactNode }) {
+  return (
+    <div className="flex items-center gap-4">
+      <Separator className="flex-1" />
+
+      <p className="text-xs text-muted shrink-0">{children}</p>
+
+      <Separator className="flex-1" />
+    </div>
+  )
+}