@better-auth-ui/heroui 1.6.3 → 1.6.4

package/dist/components/{email → auth/email}/otp-email.js

@@ -1,9 +1,9 @@
-import { OtpEmail as e } from "@better-auth-ui/react";
-import { cn as t } from "@heroui/react";
-import { jsx as n } from "react/jsx-runtime";
-//#region src/components/email/otp-email.tsx
+import { cn as e } from "@heroui/react";
+import { jsx as t } from "react/jsx-runtime";
+import { OtpEmail as n } from "@better-auth-ui/react/email";
+//#region src/components/auth/email/otp-email.tsx
 function r({ colors: r, classNames: i, ...a }) {
-	return /* @__PURE__ */ n(e, {
+	return /* @__PURE__ */ t(n, {
 		colors: {
 			light: {
 				background: "#F5F5F5",
@@ -20,7 +20,7 @@ function r({ colors: r, classNames: i, ...a }) {
 		},
 		classNames: {
 			...i,
-			card: t("border-none rounded-3xl", i?.card)
+			card: e("border-none rounded-3xl", i?.card)
 		},
 		...a
 	});

package/dist/components/{email → auth/email}/password-changed-email.d.ts

@@ -1,3 +1,3 @@
-import { PasswordChangedEmailProps } from '@better-auth-ui/react';
-export type { PasswordChangedEmailProps } from '@better-auth-ui/react';
+import { PasswordChangedEmailProps } from '@better-auth-ui/react/email';
+export type { PasswordChangedEmailProps } from '@better-auth-ui/react/email';
 export declare function PasswordChangedEmail({ colors, classNames, ...props }: PasswordChangedEmailProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/{email → auth/email}/password-changed-email.js

@@ -1,9 +1,9 @@
-import { PasswordChangedEmail as e } from "@better-auth-ui/react";
-import { cn as t } from "@heroui/react";
-import { jsx as n } from "react/jsx-runtime";
-//#region src/components/email/password-changed-email.tsx
+import { cn as e } from "@heroui/react";
+import { jsx as t } from "react/jsx-runtime";
+import { PasswordChangedEmail as n } from "@better-auth-ui/react/email";
+//#region src/components/auth/email/password-changed-email.tsx
 function r({ colors: r, classNames: i, ...a }) {
-	return /* @__PURE__ */ n(e, {
+	return /* @__PURE__ */ t(n, {
 		colors: {
 			light: {
 				background: "#F5F5F5",
@@ -20,8 +20,8 @@ function r({ colors: r, classNames: i, ...a }) {
 		},
 		classNames: {
 			...i,
-			card: t("border-none rounded-3xl", i?.card),
-			button: t("rounded-full", i?.button)
+			card: e("border-none rounded-3xl", i?.card),
+			button: e("rounded-full", i?.button)
 		},
 		...a
 	});

package/dist/components/{email → auth/email}/reset-password-email.d.ts

@@ -1,3 +1,3 @@
-import { ResetPasswordEmailProps } from '@better-auth-ui/react';
-export type { ResetPasswordEmailProps } from '@better-auth-ui/react';
+import { ResetPasswordEmailProps } from '@better-auth-ui/react/email';
+export type { ResetPasswordEmailProps } from '@better-auth-ui/react/email';
 export declare function ResetPasswordEmail({ colors, classNames, ...props }: ResetPasswordEmailProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/{email → auth/email}/reset-password-email.js

@@ -1,9 +1,9 @@
-import { ResetPasswordEmail as e } from "@better-auth-ui/react";
-import { cn as t } from "@heroui/react";
-import { jsx as n } from "react/jsx-runtime";
-//#region src/components/email/reset-password-email.tsx
+import { cn as e } from "@heroui/react";
+import { jsx as t } from "react/jsx-runtime";
+import { ResetPasswordEmail as n } from "@better-auth-ui/react/email";
+//#region src/components/auth/email/reset-password-email.tsx
 function r({ colors: r, classNames: i, ...a }) {
-	return /* @__PURE__ */ n(e, {
+	return /* @__PURE__ */ t(n, {
 		colors: {
 			light: {
 				background: "#F5F5F5",
@@ -20,8 +20,8 @@ function r({ colors: r, classNames: i, ...a }) {
 		},
 		classNames: {
 			...i,
-			card: t("border-none rounded-3xl", i?.card),
-			button: t("rounded-full", i?.button)
+			card: e("border-none rounded-3xl", i?.card),
+			button: e("rounded-full", i?.button)
 		},
 		...a
 	});

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

@@ -7,7 +7,7 @@ export type ForgotPasswordProps = {
  * 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.
+ * Toasts are displayed on success or error via the `useRequestPasswordReset` hook.
  *
  * @param className - Optional additional CSS class names applied to the card
  * @returns The forgot-password form UI as a JSX element

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

@@ -3,59 +3,62 @@ import { Button as n, Card as r, Description as i, FieldError as a, Form as o, I
 import { jsx as m, jsxs as h } from "react/jsx-runtime";
 //#region src/components/auth/forgot-password.tsx
 function g({ className: g, variant: _, ...v }) {
-	let { basePaths: y, localization: b, viewPaths: x, navigate: S } = e(), { mutate: C, isPending: w } = t({ onSuccess: () => {
-		p.success(b.auth.passwordResetEmailSent), S({ to: `${y.auth}/${x.auth.signIn}` });
+	let { authClient: y, basePaths: b, localization: x, viewPaths: S, navigate: C } = e(), { mutate: w, isPending: T } = t(y, { onSuccess: () => {
+		p.success(x.auth.passwordResetEmailSent), C({ to: `${b.auth}/${S.auth.signIn}` });
 	} });
-	function T(e) {
-		e.preventDefault(), C({ email: new FormData(e.currentTarget).get("email") });
+	function E(e) {
+		e.preventDefault(), w({ email: new FormData(e.currentTarget).get("email") });
 	}
 	return /* @__PURE__ */ h(r, {
-		className: f("w-full max-w-sm p-4 md:p-6", g),
+		className: f("w-full max-w-sm gap-4 md:p-6", g),
 		variant: _,
 		...v,
 		children: [
 			/* @__PURE__ */ m(r.Header, { children: /* @__PURE__ */ m(r.Title, {
 				className: "text-xl font-semibold mb-1",
-				children: b.auth.forgotPassword
-			}) }),
-			/* @__PURE__ */ m(r.Content, { children: /* @__PURE__ */ h(o, {
-				onSubmit: T,
-				className: "flex flex-col gap-4",
-				children: [/* @__PURE__ */ h(d, {
-					name: "email",
-					type: "email",
-					autoComplete: "email",
-					isDisabled: w,
-					children: [
-						/* @__PURE__ */ m(c, { children: b.auth.email }),
-						/* @__PURE__ */ m(s, {
-							placeholder: b.auth.emailPlaceholder,
-							required: !0,
-							variant: _ === "transparent" ? "primary" : "secondary"
-						}),
-						/* @__PURE__ */ m(a, {})
-					]
-				}), /* @__PURE__ */ h(n, {
-					type: "submit",
-					className: "w-full",
-					isPending: w,
-					children: [w && /* @__PURE__ */ m(u, {
-						color: "current",
-						size: "sm"
-					}), b.auth.sendResetLink]
-				})]
+				children: x.auth.forgotPassword
 			}) }),
+			/* @__PURE__ */ m(r.Content, {
+				className: "gap-4",
+				children: /* @__PURE__ */ h(o, {
+					onSubmit: E,
+					className: "flex flex-col gap-4",
+					children: [/* @__PURE__ */ h(d, {
+						name: "email",
+						type: "email",
+						autoComplete: "email",
+						isDisabled: T,
+						children: [
+							/* @__PURE__ */ m(c, { children: x.auth.email }),
+							/* @__PURE__ */ m(s, {
+								placeholder: x.auth.emailPlaceholder,
+								required: !0,
+								variant: _ === "transparent" ? "primary" : "secondary"
+							}),
+							/* @__PURE__ */ m(a, {})
+						]
+					}), /* @__PURE__ */ h(n, {
+						type: "submit",
+						className: "w-full",
+						isPending: T,
+						children: [T && /* @__PURE__ */ m(u, {
+							color: "current",
+							size: "sm"
+						}), x.auth.sendResetLink]
+					})]
+				})
+			}),
 			/* @__PURE__ */ m(r.Footer, {
-				className: "flex-col",
+				className: "flex-col gap-3",
 				children: /* @__PURE__ */ h(i, {
 					className: "text-sm",
 					children: [
-						b.auth.rememberYourPassword,
+						x.auth.rememberYourPassword,
 						" ",
 						/* @__PURE__ */ m(l, {
-							href: `${y.auth}/${x.auth.signIn}`,
-							className: "text-accent decoration-accent no-underline hover:underline",
-							children: b.auth.signIn
+							href: `${b.auth}/${S.auth.signIn}`,
+							className: "text-accent no-underline hover:underline decoration-accent-hover",
+							children: x.auth.signIn
 						})
 					]
 				})

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

@@ -0,0 +1,11 @@
+import { AuthView } from '@better-auth-ui/core';
+export type MagicLinkButtonProps = {
+    /** @remarks `AuthView` */
+    view?: AuthView;
+};
+/**
+ * Toggle button between the password sign-in and magic-link routes.
+ *
+ * @param view - Current auth view. On `"magicLink"` this links back to password sign-in.
+ */
+export declare function MagicLinkButton({ view }: MagicLinkButtonProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,20 @@
+import { magicLinkPlugin as e } from "../../../lib/auth/magic-link-plugin.js";
+import { authMutationKeys as t } from "@better-auth-ui/core";
+import { useAuth as n, useAuthPlugin as r } from "@better-auth-ui/react";
+import { Envelope as i, Lock as a } from "@gravity-ui/icons";
+import { Link as o, cn as s } from "@heroui/react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { useIsMutating as u } from "@tanstack/react-query";
+import { buttonVariants as d } from "@heroui/styles";
+//#region src/components/auth/magic-link/magic-link-button.tsx
+function f({ view: f }) {
+	let { basePaths: p, emailAndPassword: m, viewPaths: h, localization: g } = n(), _ = u({ mutationKey: t.signIn.all }) + u({ mutationKey: t.signUp.all }) > 0, { localization: v, viewPaths: y } = r(e), b = f === "magicLink";
+	return b && !m?.enabled ? null : /* @__PURE__ */ l(o, {
+		href: `${p.auth}/${b ? h.auth.signIn : y.auth.magicLink}`,
+		isDisabled: _,
+		className: s(d({ variant: "tertiary" }), "w-full gap-2", _ && "status-disabled"),
+		children: [c(b ? a : i, {}), g.auth.continueWith.replace("{{provider}}", b ? g.auth.password : v.magicLink)]
+	});
+}
+//#endregion
+export { f as MagicLinkButton };

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

@@ -0,0 +1,16 @@
+import { CardProps } from '@heroui/react';
+import { SocialLayout } from '../provider-buttons';
+export type MagicLinkProps = {
+    className?: string;
+    socialLayout?: SocialLayout;
+    socialPosition?: "top" | "bottom";
+    variant?: CardProps["variant"];
+};
+/**
+ * Magic-link sign-in form.
+ *
+ * @param socialLayout - Provider button layout.
+ * @param socialPosition - `"top"` or `"bottom"`. Defaults to `"bottom"`.
+ * @param variant - Card variant.
+ */
+export declare function MagicLink({ className, socialLayout, socialPosition, variant, ...props }: MagicLinkProps & Omit<CardProps, "children">): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,87 @@
+import { FieldSeparator as e } from "../field-separator.js";
+import { ProviderButtons as t } from "../provider-buttons.js";
+import { magicLinkPlugin as n } from "../../../lib/auth/magic-link-plugin.js";
+import { authMutationKeys as r } from "@better-auth-ui/core";
+import { useAuth as i, useAuthPlugin as a, useSignInMagicLink as o } from "@better-auth-ui/react";
+import { Button as s, Card as c, Description as l, FieldError as u, Form as d, Input as f, Label as p, Link as m, Spinner as h, TextField as g, cn as _, toast as v } from "@heroui/react";
+import { useState as y } from "react";
+import { Fragment as b, jsx as x, jsxs as S } from "react/jsx-runtime";
+import { useIsMutating as C } from "@tanstack/react-query";
+//#region src/components/auth/magic-link/magic-link.tsx
+function w({ className: w, socialLayout: T, socialPosition: E = "bottom", variant: D, ...O }) {
+	let { authClient: k, basePaths: A, baseURL: j, emailAndPassword: M, localization: N, plugins: P, redirectTo: F, socialProviders: I, viewPaths: L } = i(), { localization: R } = a(n), [z, B] = y(""), { mutate: V, isPending: H } = o(k, { onSuccess: () => {
+		B(""), v.success(R.magicLinkSent);
+	} }), U = C({ mutationKey: r.signIn.all }) + C({ mutationKey: r.signUp.all }) > 0, W = (e) => {
+		e.preventDefault(), V({
+			email: z,
+			callbackURL: `${j}${F}`
+		});
+	}, G = !!I?.length;
+	return /* @__PURE__ */ S(c, {
+		className: _("w-full max-w-sm gap-4 md:p-6", w),
+		variant: D,
+		...O,
+		children: [
+			/* @__PURE__ */ x(c.Header, { children: /* @__PURE__ */ x(c.Title, {
+				className: "text-xl font-semibold mb-1",
+				children: N.auth.signIn
+			}) }),
+			/* @__PURE__ */ S(c.Content, {
+				className: "gap-4",
+				children: [
+					E === "top" && /* @__PURE__ */ S(b, { children: [!!I?.length && /* @__PURE__ */ x(t, { socialLayout: T }), G && /* @__PURE__ */ x(e, { children: N.auth.or })] }),
+					/* @__PURE__ */ S(d, {
+						onSubmit: W,
+						className: "flex flex-col gap-4",
+						children: [/* @__PURE__ */ S(g, {
+							name: "email",
+							type: "email",
+							autoComplete: "email",
+							isDisabled: U,
+							value: z,
+							onChange: B,
+							children: [
+								/* @__PURE__ */ x(p, { children: N.auth.email }),
+								/* @__PURE__ */ x(f, {
+									placeholder: N.auth.emailPlaceholder,
+									required: !0,
+									variant: D === "transparent" ? "primary" : "secondary"
+								}),
+								/* @__PURE__ */ x(u, {})
+							]
+						}), /* @__PURE__ */ S("div", {
+							className: "flex flex-col gap-3",
+							children: [/* @__PURE__ */ S(s, {
+								type: "submit",
+								className: "w-full",
+								isPending: U,
+								children: [H && /* @__PURE__ */ x(h, {
+									color: "current",
+									size: "sm"
+								}), R.sendMagicLink]
+							}), P.flatMap((e) => (e.authButtons ?? []).map((t, n) => /* @__PURE__ */ x(t, { view: "magicLink" }, `${e.id}-${n.toString()}`)))]
+						})]
+					}),
+					E === "bottom" && /* @__PURE__ */ S(b, { children: [G && /* @__PURE__ */ x(e, { children: N.auth.or }), !!I?.length && /* @__PURE__ */ x(t, { socialLayout: T })] })
+				]
+			}),
+			M?.enabled && /* @__PURE__ */ x(c.Footer, {
+				className: "flex-col gap-3",
+				children: /* @__PURE__ */ S(l, {
+					className: "text-sm",
+					children: [
+						N.auth.needToCreateAnAccount,
+						" ",
+						/* @__PURE__ */ x(m, {
+							href: `${A.auth}/${L.auth.signUp}`,
+							className: "text-accent no-underline hover:underline decoration-accent-hover",
+							children: N.auth.signUp
+						})
+					]
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { w as MagicLink };

package/dist/components/{settings/account → auth/multi-session}/manage-account.d.ts

@@ -1,10 +1,6 @@
-import { Session, User } from 'better-auth';
-export type DeviceSession = {
-    session: Session;
-    user: User;
-};
+import { ListDeviceSession } from '@better-auth-ui/react';
 export type ManageAccountProps = {
-    deviceSession?: DeviceSession | null;
+    deviceSession?: ListDeviceSession | null;
     isPending?: boolean;
 };
 /**

package/dist/components/auth/multi-session/manage-account.js

@@ -0,0 +1,49 @@
+import { UserView as e } from "../user/user-view.js";
+import { multiSessionPlugin as t } from "../../../lib/auth/multi-session-plugin.js";
+import { useAuth as n, useAuthPlugin as r, useRevokeMultiSession as i, useSetActiveSession as a, useUser as o } from "@better-auth-ui/react";
+import { ArrowRightArrowLeft as s, ArrowRightFromSquare as c, Ellipsis as l } from "@gravity-ui/icons";
+import { Button as u, Dropdown as d, Spinner as f, toast as p } from "@heroui/react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+//#region src/components/auth/multi-session/manage-account.tsx
+function g({ deviceSession: g, isPending: _ }) {
+	let { authClient: v, localization: y } = n(), { localization: b } = r(t), { data: x } = o(v), { mutate: S, isPending: C } = a(v, { onSuccess: () => window.scrollTo({ top: 0 }) }), { mutate: w, isPending: T } = i(v, { onSuccess: () => p.success(y.settings.revokeSessionSuccess) }), E = g?.session.userId === x?.id, D = C || T;
+	return /* @__PURE__ */ h("div", {
+		className: "flex items-center justify-between gap-3",
+		children: [
+			/* @__PURE__ */ m(e, {
+				user: g?.user,
+				isPending: _,
+				size: "md"
+			}),
+			g && E && /* @__PURE__ */ h(u, {
+				className: "shrink-0",
+				variant: "outline",
+				size: "sm",
+				onPress: () => w({ sessionToken: g.session.token }),
+				isDisabled: D,
+				children: [T ? /* @__PURE__ */ m(f, {
+					color: "current",
+					size: "sm"
+				}) : /* @__PURE__ */ m(c, {}), y.auth.signOut]
+			}),
+			g && !E && /* @__PURE__ */ h(d, { children: [/* @__PURE__ */ m(u, {
+				isIconOnly: !0,
+				variant: "ghost",
+				className: "shrink-0",
+				size: "sm",
+				isDisabled: D,
+				children: /* @__PURE__ */ m(l, {})
+			}), /* @__PURE__ */ m(d.Popover, { children: /* @__PURE__ */ h(d.Menu, { children: [/* @__PURE__ */ h(d.Item, {
+				textValue: b.switchAccount,
+				onAction: () => S({ sessionToken: g.session.token }),
+				children: [/* @__PURE__ */ m(s, { className: "text-muted" }), b.switchAccount]
+			}), /* @__PURE__ */ h(d.Item, {
+				textValue: y.auth.signOut,
+				onAction: () => w({ sessionToken: g.session.token }),
+				children: [/* @__PURE__ */ m(c, { className: "text-muted" }), y.auth.signOut]
+			})] }) })] })
+		]
+	});
+}
+//#endregion
+export { g as ManageAccount };

package/dist/components/auth/multi-session/manage-accounts.js

@@ -0,0 +1,34 @@
+import { multiSessionPlugin as e } from "../../../lib/auth/multi-session-plugin.js";
+import { ManageAccount as t } from "./manage-account.js";
+import { useAuth as n, useAuthPlugin as r, useListDeviceSessions as i, useSession as a } from "@better-auth-ui/react";
+import { Card as o, cn as s } from "@heroui/react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/components/auth/multi-session/manage-accounts.tsx
+function u({ className: u, variant: d, ...f }) {
+	let { authClient: p } = n(), { localization: m } = r(e), { data: h } = a(p), { data: g, isPending: _ } = i(p), v = g?.filter((e) => e.session.id !== h?.session.id), y = [{
+		key: h?.session.id ?? "current",
+		deviceSession: _ ? null : h,
+		isPending: _
+	}, ...v?.map((e) => ({
+		key: e.session.id,
+		deviceSession: e,
+		isPending: !1
+	})) ?? []];
+	return /* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("h2", {
+		className: s("text-sm font-semibold mb-3"),
+		children: m.manageAccounts
+	}), /* @__PURE__ */ c(o, {
+		className: s(u),
+		variant: d,
+		...f,
+		children: /* @__PURE__ */ c(o.Content, {
+			className: "gap-0",
+			children: y.map((e, n) => /* @__PURE__ */ l("div", { children: [n > 0 && /* @__PURE__ */ c("div", { className: "border-b border-dashed -mx-4 md:-mx-6 my-4" }), /* @__PURE__ */ c(t, {
+				deviceSession: e.deviceSession,
+				isPending: e.isPending
+			})] }, e.key))
+		})
+	})] });
+}
+//#endregion
+export { u as ManageAccounts };

package/dist/components/{user/switch-account-menu.d.ts → auth/multi-session/switch-account-submenu-content.d.ts}

@@ -1,10 +1,10 @@
 /**
- * Render the menu content for switching between multiple authenticated sessions.
+ * Render the submenu 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
+ * @returns The switch account submenu content as a JSX element
  */
-export declare function SwitchAccountMenu(): import("react/jsx-runtime").JSX.Element;
+export declare function SwitchAccountSubmenuContent(): import("react/jsx-runtime").JSX.Element;

package/dist/components/auth/multi-session/switch-account-submenu-content.js

@@ -0,0 +1,29 @@
+import { UserView as e } from "../user/user-view.js";
+import { SwitchAccountSubmenuItem as t } from "./switch-account-submenu-item.js";
+import { multiSessionPlugin as n } from "../../../lib/auth/multi-session-plugin.js";
+import { useAuth as r, useAuthPlugin as i, useListDeviceSessions as a, useSession as o } from "@better-auth-ui/react";
+import { Check as s, CirclePlus as c } from "@gravity-ui/icons";
+import { Dropdown as l, Label as u, Separator as d } from "@heroui/react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+//#region src/components/auth/multi-session/switch-account-submenu-content.tsx
+function m() {
+	let { authClient: m, basePaths: h, viewPaths: g } = r(), { localization: _ } = i(n), { data: v } = o(m), { data: y, isPending: b } = a(m);
+	return /* @__PURE__ */ f(l.Popover, {
+		className: "min-w-40 md:min-w-56 max-w-[48svw]",
+		children: /* @__PURE__ */ p(l.Menu, { children: [
+			/* @__PURE__ */ p(l.Item, {
+				className: "px-2",
+				children: [/* @__PURE__ */ f(e, { isPending: b }), !b && /* @__PURE__ */ f(s, { className: "ml-auto" })]
+			}),
+			y?.filter((e) => e.session.id !== v?.session?.id).map((e) => /* @__PURE__ */ f(t, { deviceSession: e }, e.session.id)),
+			/* @__PURE__ */ f(d, {}),
+			/* @__PURE__ */ p(l.Item, {
+				textValue: _.addAccount,
+				href: `${h.auth}/${g.auth.signIn}`,
+				children: [/* @__PURE__ */ f(c, { className: "text-muted" }), /* @__PURE__ */ f(u, { children: _.addAccount })]
+			})
+		] })
+	});
+}
+//#endregion
+export { m as SwitchAccountSubmenuContent };

package/dist/components/{user/switch-account-item.d.ts → auth/multi-session/switch-account-submenu-item.d.ts}

@@ -3,7 +3,7 @@ type DeviceSession = {
     session: Session;
     user: User;
 };
-export type SwitchAccountItemProps = {
+export type SwitchAccountSubmenuItemProps = {
     deviceSession: DeviceSession;
 };
 /**
@@ -12,5 +12,5 @@ export type SwitchAccountItemProps = {
  * @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 declare function SwitchAccountSubmenuItem({ deviceSession }: SwitchAccountSubmenuItemProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/auth/multi-session/switch-account-submenu-item.js

@@ -0,0 +1,20 @@
+import { UserView as e } from "../user/user-view.js";
+import { useAuth as t, useSetActiveSession as n } from "@better-auth-ui/react";
+import { Dropdown as r, Spinner as i } from "@heroui/react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/auth/multi-session/switch-account-submenu-item.tsx
+function s({ deviceSession: s }) {
+	let { authClient: c } = t(), { mutate: l, isPending: u } = n(c, { onSuccess: () => window.scrollTo({ top: 0 }) });
+	return /* @__PURE__ */ o(r.Item, {
+		className: "px-2",
+		isDisabled: u,
+		onPress: () => l({ sessionToken: s.session.token }),
+		children: [/* @__PURE__ */ a(e, { user: s.user }), u && /* @__PURE__ */ a(i, {
+			color: "current",
+			size: "sm",
+			className: "ml-auto"
+		})]
+	});
+}
+//#endregion
+export { s as SwitchAccountSubmenuItem };

package/dist/components/auth/multi-session/switch-account-submenu.d.ts

@@ -0,0 +1,13 @@
+export type SwitchAccountSubmenuProps = {
+    className?: string;
+};
+/**
+ * Render a dropdown submenu for switching between multiple authenticated sessions.
+ *
+ * This component renders as a submenu trigger that opens the switch account menu.
+ * It should be rendered inside a Dropdown.Menu.
+ *
+ * @param className - Optional additional CSS class names
+ * @returns The switch account submenu as a JSX element
+ */
+export declare function SwitchAccountSubmenu({ className }: SwitchAccountSubmenuProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/auth/multi-session/switch-account-submenu.js

@@ -0,0 +1,24 @@
+import { SwitchAccountSubmenuContent as e } from "./switch-account-submenu-content.js";
+import { multiSessionPlugin as t } from "../../../lib/auth/multi-session-plugin.js";
+import { useAuth as n, useAuthPlugin as r, useSession as i } from "@better-auth-ui/react";
+import { Persons as a } from "@gravity-ui/icons";
+import { Dropdown as o, Label as s } from "@heroui/react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/components/auth/multi-session/switch-account-submenu.tsx
+function u({ className: u }) {
+	let { authClient: d } = n(), { data: f } = i(d), { localization: p } = r(t);
+	return f ? /* @__PURE__ */ l(o.SubmenuTrigger, { children: [/* @__PURE__ */ l(o.Item, {
+		className: u,
+		textValue: p.switchAccount,
+		children: [
+			/* @__PURE__ */ c(a, { className: "text-muted" }),
+			/* @__PURE__ */ c(s, { children: p.switchAccount }),
+			/* @__PURE__ */ c(o.SubmenuIndicator, {})
+		]
+	}), /* @__PURE__ */ c(o.Popover, {
+		className: "min-w-40 md:min-w-56 max-w-[48svw]",
+		children: /* @__PURE__ */ c(e, {})
+	})] }) : null;
+}
+//#endregion
+export { u as SwitchAccountSubmenu };

package/dist/components/auth/passkey/passkey-button.d.ts

@@ -0,0 +1,6 @@
+import { AuthView } from '@better-auth-ui/core';
+export type PasskeyButtonProps = {
+    /** @remarks `AuthView` */
+    view?: AuthView;
+};
+export declare function PasskeyButton({ view }: PasskeyButtonProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/auth/passkey/passkey-button.js

@@ -0,0 +1,24 @@
+import { passkeyPlugin as e } from "../../../lib/auth/passkey-plugin.js";
+import { authMutationKeys as t } from "@better-auth-ui/core";
+import { useAuth as n, useAuthPlugin as r, useSignInPasskey as i } from "@better-auth-ui/react";
+import { Fingerprint as a } from "@gravity-ui/icons";
+import { Button as o, Spinner as s } from "@heroui/react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { useIsMutating as u } from "@tanstack/react-query";
+//#region src/components/auth/passkey/passkey-button.tsx
+function d({ view: d }) {
+	let { authClient: f, localization: p, redirectTo: m, navigate: h } = n(), { localization: g } = r(e), { mutate: _, isPending: v } = i(f, { onSuccess: () => h({ to: m }) }), y = u({ mutationKey: t.signIn.all }) + u({ mutationKey: t.signUp.all }) > 0;
+	return d === "signUp" ? null : /* @__PURE__ */ l(o, {
+		className: "w-full",
+		variant: "tertiary",
+		isDisabled: y,
+		isPending: v,
+		onPress: () => _(),
+		children: [v ? /* @__PURE__ */ c(s, {
+			color: "current",
+			size: "sm"
+		}) : /* @__PURE__ */ c(a, {}), p.auth.continueWith.replace("{{provider}}", g.passkey)]
+	});
+}
+//#endregion
+export { d as PasskeyButton };

package/dist/components/auth/passkey/passkey.js

@@ -0,0 +1,45 @@
+import { passkeyPlugin as e } from "../../../lib/auth/passkey-plugin.js";
+import { useAuth as t, useAuthPlugin as n, useDeletePasskey as r } from "@better-auth-ui/react";
+import { Fingerprint as i, Xmark as a } from "@gravity-ui/icons";
+import { Button as o, Spinner as s } from "@heroui/react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/components/auth/passkey/passkey.tsx
+function u({ passkey: u }) {
+	let { authClient: d, localization: f } = t(), { localization: p } = n(e), { mutate: m, isPending: h } = r(d), g = u.name || p.passkey;
+	return /* @__PURE__ */ l("div", {
+		className: "flex items-center gap-3",
+		children: [
+			/* @__PURE__ */ c("div", {
+				className: "flex size-10 shrink-0 items-center justify-center rounded-xl bg-surface-secondary",
+				children: /* @__PURE__ */ c(i, { className: "size-4.5" })
+			}),
+			/* @__PURE__ */ l("div", {
+				className: "flex flex-col min-w-0",
+				children: [/* @__PURE__ */ c("span", {
+					className: "text-sm font-medium leading-tight",
+					children: g
+				}), /* @__PURE__ */ c("span", {
+					className: "text-xs text-muted",
+					children: new Date(u.createdAt).toLocaleString(void 0, {
+						dateStyle: "medium",
+						timeStyle: "short"
+					})
+				})]
+			}),
+			/* @__PURE__ */ l(o, {
+				className: "ml-auto shrink-0",
+				variant: "outline",
+				size: "sm",
+				isPending: h,
+				onPress: () => m({ id: u.id }),
+				"aria-label": p.deletePasskey.replace("{{name}}", g),
+				children: [h ? /* @__PURE__ */ c(s, {
+					color: "current",
+					size: "sm"
+				}) : /* @__PURE__ */ c(a, {}), f.settings.delete]
+			})
+		]
+	});
+}
+//#endregion
+export { u as Passkey };