@better-auth-ui/heroui 1.6.1 → 1.6.2

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

@@ -1,24 +1,91 @@
-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 })] })] })) })] })] }));
+import { UserAvatar as e } from "./user-avatar.js";
+import { UserView as t } from "./user-view.js";
+import { SwitchAccountMenu as n } from "./switch-account-menu.js";
+import { useAuth as r, useSession as i } from "@better-auth-ui/react";
+import { Button as a, Dropdown as o, Label as s, Separator as c, Tabs as l, cn as u } from "@heroui/react";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+import { ArrowRightFromSquare as m, ArrowRightToSquare as h, ChevronsExpandVertical as g, Display as _, Gear as v, Moon as y, PersonPlus as b, Persons as x, Sun as S } from "@gravity-ui/icons";
+//#region src/components/user/user-button.tsx
+function C({ className: C, placement: w = "bottom", size: T = "default", variant: E = "ghost", themeToggle: D = !0 }) {
+	let { basePaths: O, viewPaths: k, localization: A, multiSession: j, appearance: { theme: M, setTheme: N, themes: P } } = r(), { data: F, isPending: I } = i();
+	return /* @__PURE__ */ p(o, { children: [T === "icon" ? /* @__PURE__ */ f(o.Trigger, {
+		className: u("rounded-full", C),
+		children: /* @__PURE__ */ f(e, {})
+	}) : /* @__PURE__ */ p(a, {
+		variant: E,
+		className: u("h-auto font-normal justify-start px-3 py-2 text-left", C),
+		children: [F || I ? /* @__PURE__ */ f(t, { isPending: I }) : /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f(e, {}), /* @__PURE__ */ f("p", {
+			className: "text-sm font-medium",
+			children: A.auth.account
+		})] }), /* @__PURE__ */ f(g, { className: "ml-auto size-3.5" })]
+	}), /* @__PURE__ */ p(o.Popover, {
+		placement: w,
+		className: "min-w-40 md:min-w-56 max-w-[48svw]",
+		children: [F && /* @__PURE__ */ f("div", {
+			className: "px-3 pt-3 pb-1",
+			children: /* @__PURE__ */ f(t, {})
+		}), /* @__PURE__ */ f(o.Menu, { children: F ? /* @__PURE__ */ p(d, { children: [
+			/* @__PURE__ */ p(o.Item, {
+				textValue: A.settings.settings,
+				href: `${O.settings}/${k.settings.account}`,
+				children: [/* @__PURE__ */ f(v, { className: "text-muted" }), /* @__PURE__ */ f(s, { children: A.settings.settings })]
+			}),
+			j && /* @__PURE__ */ p(o.SubmenuTrigger, { children: [/* @__PURE__ */ p(o.Item, {
+				textValue: A.auth.switchAccount,
+				children: [
+					/* @__PURE__ */ f(x, { className: "text-muted" }),
+					/* @__PURE__ */ f(s, { children: A.auth.switchAccount }),
+					/* @__PURE__ */ f(o.SubmenuIndicator, {})
+				]
+			}), /* @__PURE__ */ f(o.Popover, {
+				className: "min-w-40 md:min-w-56 max-w-[48svw]",
+				children: /* @__PURE__ */ f(n, {})
+			})] }),
+			D && M && N && !!P?.length && /* @__PURE__ */ p(o.Item, {
+				className: "py-1 pe-2",
+				children: [/* @__PURE__ */ f(s, { children: A.settings.theme }), /* @__PURE__ */ f(l, {
+					className: "ml-auto",
+					selectedKey: M,
+					onSelectionChange: (e) => N(e),
+					children: /* @__PURE__ */ f(l.ListContainer, { children: /* @__PURE__ */ p(l.List, {
+						"aria-label": A.settings.theme,
+						className: "*:h-5 *:w-5 *:p-0",
+						children: [
+							P.includes("system") && /* @__PURE__ */ p(l.Tab, {
+								id: "system",
+								"aria-label": A.settings.system,
+								children: [/* @__PURE__ */ f(_, { className: "size-3" }), /* @__PURE__ */ f(l.Indicator, {})]
+							}),
+							P.includes("light") && /* @__PURE__ */ p(l.Tab, {
+								id: "light",
+								"aria-label": A.settings.light,
+								children: [/* @__PURE__ */ f(S, { className: "size-3" }), /* @__PURE__ */ f(l.Indicator, {})]
+							}),
+							P.includes("dark") && /* @__PURE__ */ p(l.Tab, {
+								id: "dark",
+								"aria-label": A.settings.dark,
+								children: [/* @__PURE__ */ f(y, { className: "size-3" }), /* @__PURE__ */ f(l.Indicator, {})]
+							})
+						]
+					}) })
+				})]
+			}),
+			/* @__PURE__ */ f(c, {}),
+			/* @__PURE__ */ p(o.Item, {
+				textValue: A.auth.signOut,
+				href: `${O.auth}/${k.auth.signOut}`,
+				children: [/* @__PURE__ */ f(m, { className: "text-muted" }), /* @__PURE__ */ f(s, { children: A.auth.signOut })]
+			})
+		] }) : /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ p(o.Item, {
+			textValue: A.auth.signIn,
+			href: `${O.auth}/${k.auth.signIn}`,
+			children: [/* @__PURE__ */ f(h, { className: "text-muted" }), /* @__PURE__ */ f(s, { children: A.auth.signIn })]
+		}), /* @__PURE__ */ p(o.Item, {
+			textValue: A.auth.signUp,
+			href: `${O.auth}/${k.auth.signUp}`,
+			children: [/* @__PURE__ */ f(b, { className: "text-muted" }), /* @__PURE__ */ f(s, { children: A.auth.signUp })]
+		})] }) })]
+	})] });
 }
+//#endregion
+export { C as UserButton };

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

@@ -1,6 +1,6 @@
-import { type AvatarProps } from "@heroui/react";
-import type { User } from "better-auth";
-import type { ComponentProps } from "react";
+import { AvatarProps } from '@heroui/react';
+import { User } from 'better-auth';
+import { ComponentProps } from 'react';
 export type UserViewProps = {
     className?: string;
     isPending?: boolean;

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

@@ -1,24 +1,37 @@
-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 }))] })] }));
+import { UserAvatar as e } from "./user-avatar.js";
+import { useSession as t } from "@better-auth-ui/react";
+import { Skeleton as n, cn as r } from "@heroui/react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/user/user-view.tsx
+function o({ className: o, isPending: s, size: c = "sm", user: l, ...u }) {
+	let { data: d, isPending: f } = t({ enabled: !l && !s }), p = l ?? d?.user;
+	return (s || f) && !l ? /* @__PURE__ */ a("div", {
+		className: r("flex items-center gap-2 min-w-0", o),
+		...u,
+		children: [/* @__PURE__ */ i(e, {
+			isPending: !0,
+			size: c
+		}), /* @__PURE__ */ a("div", {
+			className: "flex flex-col gap-1 min-w-0",
+			children: [/* @__PURE__ */ i(n, { className: "h-3.5 w-24 rounded-lg" }), /* @__PURE__ */ i(n, { className: "h-3 w-32 rounded-lg" })]
+		})]
+	}) : /* @__PURE__ */ a("div", {
+		className: r("flex items-center gap-2 min-w-0", o),
+		...u,
+		children: [/* @__PURE__ */ i(e, {
+			user: p,
+			size: c
+		}), /* @__PURE__ */ a("div", {
+			className: "min-w-0",
+			children: [/* @__PURE__ */ i("p", {
+				className: "text-sm font-medium truncate leading-tight",
+				children: p?.displayUsername || p?.name || p?.email
+			}), (p?.displayUsername || p?.name) && /* @__PURE__ */ i("p", {
+				className: "text-muted text-xs mb-0.5 truncate overflow-x-hidden",
+				children: p?.email
+			})]
+		})]
+	});
 }
+//#endregion
+export { o as UserView };

package/dist/core.d.ts

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

package/dist/index.d.ts

@@ -1,35 +1,35 @@
-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/passkey-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/passkeys";
-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";
+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/passkey-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/passkeys';
+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

@@ -1,36 +1,37 @@
 "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/passkey-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/passkeys";
-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";
+import { ForgotPassword as e } from "./components/auth/forgot-password.js";
+import { MagicLinkButton as t } from "./components/auth/magic-link-button.js";
+import { PasskeyButton as n } from "./components/auth/passkey-button.js";
+import { ProviderButtons as r } from "./components/auth/provider-buttons.js";
+import { MagicLink as i } from "./components/auth/magic-link.js";
+import { ResetPassword as a } from "./components/auth/reset-password.js";
+import { SignIn as o } from "./components/auth/sign-in.js";
+import { SignOut as s } from "./components/auth/sign-out.js";
+import { SignUp as c } from "./components/auth/sign-up.js";
+import { Auth as l } from "./components/auth/auth.js";
+import { AuthProvider as u } from "./components/auth/auth-provider.js";
+import { EmailChangedEmail as d } from "./components/email/email-changed-email.js";
+import { EmailVerificationEmail as f } from "./components/email/email-verification-email.js";
+import { MagicLinkEmail as p } from "./components/email/magic-link-email.js";
+import { NewDeviceEmail as m } from "./components/email/new-device-email.js";
+import { OtpEmail as h } from "./components/email/otp-email.js";
+import { PasswordChangedEmail as g } from "./components/email/password-changed-email.js";
+import { ResetPasswordEmail as _ } from "./components/email/reset-password-email.js";
+import { Appearance as v } from "./components/settings/account/appearance.js";
+import { ChangeEmail as y } from "./components/settings/account/change-email.js";
+import { UserAvatar as b } from "./components/user/user-avatar.js";
+import { UserView as x } from "./components/user/user-view.js";
+import { ManageAccount as S } from "./components/settings/account/manage-account.js";
+import { ManageAccounts as C } from "./components/settings/account/manage-accounts.js";
+import { UserProfile as w } from "./components/settings/account/user-profile.js";
+import { AccountSettings as T } from "./components/settings/account/account-settings.js";
+import { ActiveSessions as E } from "./components/settings/security/active-sessions.js";
+import { ChangePassword as D } from "./components/settings/security/change-password.js";
+import { DeleteUser as O } from "./components/settings/security/delete-user.js";
+import { DangerZone as k } from "./components/settings/security/danger-zone.js";
+import { LinkedAccounts as A } from "./components/settings/security/linked-accounts.js";
+import { Passkeys as j } from "./components/settings/security/passkeys.js";
+import { SecuritySettings as M } from "./components/settings/security/security-settings.js";
+import { Settings as N } from "./components/settings/settings.js";
+import { UserButton as P } from "./components/user/user-button.js";
+export { T as AccountSettings, E as ActiveSessions, v as Appearance, l as Auth, u as AuthProvider, y as ChangeEmail, D as ChangePassword, k as DangerZone, O as DeleteUser, d as EmailChangedEmail, f as EmailVerificationEmail, e as ForgotPassword, A as LinkedAccounts, i as MagicLink, t as MagicLinkButton, p as MagicLinkEmail, S as ManageAccount, C as ManageAccounts, m as NewDeviceEmail, h as OtpEmail, n as PasskeyButton, j as Passkeys, g as PasswordChangedEmail, r as ProviderButtons, a as ResetPassword, _ as ResetPasswordEmail, M as SecuritySettings, N as Settings, o as SignIn, s as SignOut, c as SignUp, b as UserAvatar, P as UserButton, w as UserProfile, x as UserView };

package/dist/react-exports.d.ts

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

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@better-auth-ui/heroui",
-  "version": "1.6.1",
+  "version": "1.6.2",
   "type": "module",
   "scripts": {
-    "build": "tsc && bun styles",
+    "build": "vite build && bun styles",
     "dev": "bun styles && tsc --watch",
     "styles": "cpy src/styles.css dist/ --flat",
     "test": "vitest"
@@ -14,16 +14,16 @@
   ],
   "exports": {
     ".": {
-      "import": "./dist/index.js",
-      "types": "./dist/index.d.ts"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
     },
     "./core": {
-      "import": "./dist/core.js",
-      "types": "./dist/core.d.ts"
+      "types": "./dist/core.d.ts",
+      "import": "./dist/core.js"
     },
     "./react": {
-      "import": "./dist/react-exports.js",
-      "types": "./dist/react-exports.d.ts"
+      "types": "./dist/react-exports.d.ts",
+      "import": "./dist/react-exports.js"
     },
     "./styles": "./dist/styles.css"
   },
@@ -31,12 +31,13 @@
     "@gravity-ui/icons": "^2.18.0",
     "@heroui/react": "^3.0.2",
     "@heroui/styles": "^3.0.2",
+    "@tanstack/react-pacer": "^0.21.1",
     "@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",
+    "better-auth": "^1.6.5",
     "cpy-cli": "^7.0.0",
     "playwright": "^1.59.1",
     "react": "^19.2.5",
@@ -52,7 +53,8 @@
     "@gravity-ui/icons": ">=2.18.0",
     "@heroui/react": ">=3.0.2",
     "@heroui/styles": ">=3.0.2",
-    "better-auth": ">=1.6.4",
+    "@tanstack/react-pacer": ">=0.21.0",
+    "better-auth": ">=1.6.5",
     "react": ">=19.2.5",
     "react-dom": ">=19.2.5",
     "bowser": ">=2.11.0"

package/src/components/auth/auth.tsx

@@ -1,5 +1,5 @@
+import type { AuthView } from "@better-auth-ui/core"
 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"

package/src/components/auth/sign-in.tsx

@@ -2,7 +2,8 @@ import {
   useAuth,
   useSendVerificationEmail,
   useSignInEmail,
-  useSignInSocial
+  useSignInSocial,
+  useSignInUsername
 } from "@better-auth-ui/react"
 import {
   Button,
@@ -34,6 +35,10 @@ export interface SignInProps {
   variant?: CardProps["variant"]
 }
 
+function isEmail(value: string): boolean {
+  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)
+}
+
 /**
  * Render the sign-in UI using auth context for configuration and localization.
  *
@@ -55,6 +60,7 @@ export function SignIn({
     passkey,
     redirectTo,
     socialProviders,
+    username: usernameConfig,
     viewPaths,
     navigate
   } = useAuth()
@@ -66,27 +72,38 @@ export function SignIn({
     onSuccess: () => toast.success(localization.auth.verificationEmailSent)
   })
 
-  const { mutate: signInEmail, isPending: signInPending } = useSignInEmail({
-    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 {
+  const { mutate: signInEmail, isPending: signInEmailPending } = useSignInEmail(
+    {
+      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)
+        }
+      },
+      onSuccess: () => navigate({ to: redirectTo })
+    }
+  )
+
+  const { mutate: signInUsername, isPending: signInUsernamePending } =
+    useSignInUsername({
+      onError: (error) => {
+        setPassword("")
         toast.danger(error.error?.message || error.message)
-      }
-    },
-    onSuccess: () => navigate({ to: redirectTo })
-  })
+      },
+      onSuccess: () => navigate({ to: redirectTo })
+    })
 
   const [socialRedirecting, setSocialRedirecting] = useState(false)
 
@@ -108,13 +125,21 @@ export function SignIn({
     const email = formData.get("email") as string
     const rememberMe = formData.get("rememberMe") === "on"
 
-    signInEmail({
-      email,
-      password,
-      ...(emailAndPassword?.rememberMe ? { rememberMe } : {})
-    })
+    if (usernameConfig?.enabled && !isEmail(email)) {
+      signInUsername({
+        username: email,
+        password
+      })
+    } else {
+      signInEmail({
+        email,
+        password,
+        ...(emailAndPassword?.rememberMe ? { rememberMe } : {})
+      })
+    }
   }
 
+  const signInPending = signInEmailPending || signInUsernamePending
   const isPending = signInPending || socialPending || socialRedirecting
 
   const showSeparator = emailAndPassword?.enabled && !!socialProviders?.length
@@ -152,14 +177,22 @@ export function SignIn({
           <Form onSubmit={handleSubmit} className="flex flex-col gap-4">
             <TextField
               name="email"
-              type="email"
-              autoComplete="email"
+              type={usernameConfig?.enabled ? "text" : "email"}
+              autoComplete={usernameConfig?.enabled ? "username" : "email"}
               isDisabled={isPending}
             >
-              <Label>{localization.auth.email}</Label>
+              <Label>
+                {usernameConfig?.enabled
+                  ? localization.auth.username
+                  : localization.auth.email}
+              </Label>
 
               <Input
-                placeholder={localization.auth.emailPlaceholder}
+                placeholder={
+                  usernameConfig?.enabled
+                    ? localization.auth.usernameOrEmailPlaceholder
+                    : localization.auth.emailPlaceholder
+                }
                 variant={variant === "transparent" ? "primary" : "secondary"}
                 required
               />