@better-auth-ui/heroui 1.6.0 → 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,33 +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/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";
+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,34 +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/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";
+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.0",
+  "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,11 +53,17 @@
     "@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"
   },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/better-auth-ui/better-auth-ui",
+    "directory": "packages/heroui"
+  },
   "publishConfig": {
     "access": "public"
   }

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/magic-link.tsx

@@ -22,6 +22,7 @@ import { type SyntheticEvent, useState } from "react"
 
 import { FieldSeparator } from "./field-separator"
 import { MagicLinkButton } from "./magic-link-button"
+import { PasskeyButton } from "./passkey-button"
 import { ProviderButtons, type SocialLayout } from "./provider-buttons"
 
 export type MagicLinkProps = {
@@ -50,6 +51,7 @@ export function MagicLink({
     basePaths,
     baseURL,
     localization,
+    passkey,
     redirectTo,
     socialProviders,
     viewPaths
@@ -145,6 +147,8 @@ export function MagicLink({
             </Button>
 
             <MagicLinkButton view="magicLink" isPending={isPending} />
+
+            {passkey && <PasskeyButton isPending={isPending} />}
           </div>
         </Form>
 

package/src/components/auth/passkey-button.tsx

@@ -0,0 +1,36 @@
+import { useAuth, useSignInPasskey } from "@better-auth-ui/react"
+import { Fingerprint } from "@gravity-ui/icons"
+import { Button, Spinner, toast } from "@heroui/react"
+
+export type PasskeyButtonProps = {
+  isPending: boolean
+}
+
+export function PasskeyButton({ isPending }: PasskeyButtonProps) {
+  const { localization, redirectTo, navigate } = useAuth()
+
+  const { mutate: signInPasskey, isPending: passkeyPending } = useSignInPasskey(
+    {
+      onError: (error) => toast.danger(error.error?.message || error.message),
+      onSuccess: () => navigate({ to: redirectTo })
+    }
+  )
+
+  const isDisabled = isPending || passkeyPending
+
+  return (
+    <Button
+      className="w-full"
+      variant="tertiary"
+      isDisabled={isDisabled}
+      isPending={passkeyPending}
+      onPress={() => signInPasskey()}
+    >
+      {passkeyPending ? <Spinner color="current" size="sm" /> : <Fingerprint />}
+      {localization.auth.continueWith.replace(
+        "{{provider}}",
+        localization.auth.passkey
+      )}
+    </Button>
+  )
+}