@better-auth-ui/heroui 1.6.8 → 1.6.9

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

@@ -1,29 +1,32 @@
-import { useAuth as e, useSession as t } from "@better-auth-ui/react";
-import { Person as n } from "@gravity-ui/icons";
-import { Avatar as r, Skeleton as i, cn as a } from "@heroui/react";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-//#region src/components/auth/user/user-avatar.tsx
-function c({ className: c, fallback: l, isPending: u, user: d, size: f = "sm", style: p, ...m }) {
-	let { authClient: h } = e(), { data: g, isPending: _ } = t(h, { enabled: !d && !u });
-	if ((u || _) && !d) return /* @__PURE__ */ o(i, {
-		className: a("rounded-full", f === "sm" ? "size-8" : f === "md" ? "size-10" : "size-12", c),
-		style: p
-	});
-	let v = d ?? g?.user, y = (v?.username || v?.name || v?.email)?.slice(0, 2).toUpperCase();
-	return /* @__PURE__ */ s(r, {
-		size: f,
-		className: a("rounded-full", c),
-		style: p,
-		...m,
-		children: [/* @__PURE__ */ o(r.Image, {
-			alt: v?.displayUsername || v?.name || v?.email,
-			src: v?.image ?? void 0
-		}), /* @__PURE__ */ o(r.Fallback, {
-			className: a(f === "lg" ? "text-xl" : f === "md" ? "text-base" : "text-sm"),
-			delayMs: v?.image ? 600 : void 0,
-			children: l || y || /* @__PURE__ */ o(n, { className: "size-4" })
-		})]
-	});
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAuth, 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 { authClient } = useAuth();
+    const { data: session, isPending: sessionPending } = useSession(authClient, {
+        enabled: !user && !isPending
+    });
+    if ((isPending || sessionPending) && !user) {
+        return (_jsx(Skeleton, { className: cn("rounded-full", size === "sm" ? "size-8" : size === "md" ? "size-10" : "size-12", className), style: style }));
+    }
+    const resolvedUser = user ?? session?.user;
+    const initials = (resolvedUser?.username ||
+        resolvedUser?.name ||
+        resolvedUser?.email)
+        ?.slice(0, 2)
+        .toUpperCase();
+    return (_jsxs(Avatar, { size: size, className: cn("rounded-full", className), style: style, ...props, children: [_jsx(Avatar.Image, { alt: resolvedUser?.displayUsername ||
+                    resolvedUser?.name ||
+                    resolvedUser?.email, src: resolvedUser?.image ?? undefined }), _jsx(Avatar.Fallback, { className: cn(size === "lg" ? "text-xl" : size === "md" ? "text-base" : "text-sm"), delayMs: resolvedUser?.image ? 600 : undefined, children: fallback || initials || _jsx(Person, { className: "size-4" }) })] }));
 }
-//#endregion
-export { c as UserAvatar };

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

@@ -1,5 +1,5 @@
-import { ButtonProps, DropdownItemProps, DropdownPopoverProps } from '@heroui/react';
-import { ReactElement, ReactNode } from 'react';
+import { type ButtonProps, type DropdownItemProps, type DropdownPopoverProps } from "@heroui/react";
+import { type ReactElement, type ReactNode } from "react";
 /** Auth states a `UserButton` link can be visible in. */
 export type UserButtonLinkVisibility = "authenticated" | "unauthenticated" | "always";
 /** A simple link entry rendered as a `Dropdown.Item` in the `UserButton` menu. */
@@ -21,16 +21,15 @@ export type UserButtonLink = {
 export type UserButtonProps = {
     className?: string;
     size?: "default" | "icon";
-    /**
-     * The placement of the element with respect to its anchor element.
-     * @default "bottom"
-     */
+    /** The placement of the element with respect to its anchor element. */
     placement?: DropdownPopoverProps["placement"];
     variant?: ButtonProps["variant"];
     /** Additional menu entries rendered above the built-in items. */
     links?: (UserButtonLink | ReactElement)[];
     /** Hide the built-in "Settings" link. Useful when replacing it via `links`. */
     hideSettings?: boolean;
+    /** When true, the subtitle line (email when name/username is shown) is hidden. */
+    hideSubtitle?: boolean;
 };
 /**
  * Render a user account dropdown button that shows account actions.
@@ -43,4 +42,4 @@ export type UserButtonProps = {
  * @param hideSettings - Hide the built-in "Settings" link
  * @returns The user button and its dropdown menu as a JSX element
  */
-export declare function UserButton({ className, placement, size, variant, links, hideSettings }: UserButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function UserButton({ className, placement, size, variant, links, hideSettings, hideSubtitle }: UserButtonProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,74 +1,40 @@
-import { UserAvatar as e } from "./user-avatar.js";
-import { UserView as t } from "./user-view.js";
-import { useAuth as n, useSession as r } from "@better-auth-ui/react";
-import { ArrowRightFromSquare as i, ArrowRightToSquare as a, ChevronsExpandVertical as o, Gear as s, PersonPlus as c } from "@gravity-ui/icons";
-import { Button as l, Dropdown as u, Label as d, cn as f } from "@heroui/react";
-import { isValidElement as p } from "react";
-import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
-//#region src/components/auth/user/user-button.tsx
-function _(e, t) {
-	if (p(e)) return e;
-	let { label: n, href: r, icon: i, variant: a } = e;
-	return /* @__PURE__ */ g(u.Item, {
-		href: r,
-		variant: a,
-		textValue: typeof n == "string" ? n : void 0,
-		children: [i, /* @__PURE__ */ h(d, { children: n })]
-	}, t);
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useAuth, useSession } from "@better-auth-ui/react";
+import { ArrowRightFromSquare, ArrowRightToSquare, ChevronsExpandVertical, Gear, PersonPlus } from "@gravity-ui/icons";
+import { Button, cn, Dropdown, Label } from "@heroui/react";
+import { isValidElement } from "react";
+import { UserAvatar } from "./user-avatar";
+import { UserView } from "./user-view";
+function renderUserLink(link, fallbackKey) {
+    if (isValidElement(link))
+        return link;
+    const { label, href, icon, variant } = link;
+    return (_jsxs(Dropdown.Item, { href: href, variant: variant, textValue: typeof label === "string" ? label : undefined, children: [icon, _jsx(Label, { children: label })] }, fallbackKey));
 }
-function v({ className: v, placement: y = "bottom", size: b = "default", variant: x = "ghost", links: S, hideSettings: C = !1 }) {
-	let { authClient: w, basePaths: T, viewPaths: E, localization: D, plugins: O } = n(), { data: k, isPending: A } = r(w), j = O.flatMap((e) => e.userMenuItems?.map((t, n) => /* @__PURE__ */ h(t, {}, `${e.id}-${n.toString()}`)) ?? []), M = S?.flatMap((e, t) => {
-		if (!p(e)) {
-			let t = e.visibility ?? "always";
-			if (t === "authenticated" && !k || t === "unauthenticated" && k) return [];
-		}
-		return [_(e, `user-button-link-${t.toString()}`)];
-	});
-	return /* @__PURE__ */ g(u, { children: [b === "icon" ? /* @__PURE__ */ h(u.Trigger, {
-		className: f("rounded-full", v),
-		children: /* @__PURE__ */ h(e, {})
-	}) : /* @__PURE__ */ g(l, {
-		variant: x,
-		className: f("h-auto font-normal justify-start px-3 py-2 text-left", v),
-		children: [k || A ? /* @__PURE__ */ h(t, { isPending: A }) : /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h(e, {}), /* @__PURE__ */ h("p", {
-			className: "text-sm font-medium",
-			children: D.auth.account
-		})] }), /* @__PURE__ */ h(o, { className: "ml-auto size-3.5" })]
-	}), /* @__PURE__ */ g(u.Popover, {
-		placement: y,
-		className: "min-w-40 md:min-w-56 max-w-[48svw]",
-		children: [k && /* @__PURE__ */ h("div", {
-			className: "px-3 pt-3 pb-1",
-			children: /* @__PURE__ */ h(t, {})
-		}), /* @__PURE__ */ h(u.Menu, { children: k ? /* @__PURE__ */ g(m, { children: [
-			M,
-			!C && /* @__PURE__ */ g(u.Item, {
-				textValue: D.settings.settings,
-				href: `${T.settings}/${E.settings.account}`,
-				children: [/* @__PURE__ */ h(s, { className: "text-muted" }), /* @__PURE__ */ h(d, { children: D.settings.settings })]
-			}),
-			j,
-			/* @__PURE__ */ g(u.Item, {
-				textValue: D.auth.signOut,
-				href: `${T.auth}/${E.auth.signOut}`,
-				variant: "danger",
-				children: [/* @__PURE__ */ h(i, { className: "text-danger" }), /* @__PURE__ */ h(d, { children: D.auth.signOut })]
-			})
-		] }) : /* @__PURE__ */ g(m, { children: [
-			M,
-			/* @__PURE__ */ g(u.Item, {
-				textValue: D.auth.signIn,
-				href: `${T.auth}/${E.auth.signIn}`,
-				children: [/* @__PURE__ */ h(a, { className: "text-muted" }), /* @__PURE__ */ h(d, { children: D.auth.signIn })]
-			}),
-			/* @__PURE__ */ g(u.Item, {
-				textValue: D.auth.signUp,
-				href: `${T.auth}/${E.auth.signUp}`,
-				children: [/* @__PURE__ */ h(c, { className: "text-muted" }), /* @__PURE__ */ h(d, { children: D.auth.signUp })]
-			}),
-			j
-		] }) })]
-	})] });
+/**
+ * Render a user account dropdown button that shows account actions.
+ *
+ * @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 links - Additional menu entries rendered above the built-in items
+ * @param hideSettings - Hide the built-in "Settings" link
+ * @returns The user button and its dropdown menu as a JSX element
+ */
+export function UserButton({ className, placement, size = "default", variant = "ghost", links, hideSettings, hideSubtitle }) {
+    const { authClient, basePaths, viewPaths, localization, plugins } = useAuth();
+    const { data: session, isPending: sessionPending } = useSession(authClient);
+    const userMenuItems = plugins.flatMap((plugin) => plugin.userMenuItems?.map((Item, index) => (_jsx(Item, { hideSubtitle: hideSubtitle }, `${plugin.id}-${index.toString()}`))) ?? []);
+    const userLinks = links?.flatMap((link, index) => {
+        if (!isValidElement(link)) {
+            const visibility = link.visibility ?? "always";
+            if (visibility === "authenticated" && !session)
+                return [];
+            if (visibility === "unauthenticated" && session)
+                return [];
+        }
+        return [renderUserLink(link, `user-button-link-${index.toString()}`)];
+    });
+    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-2 py-2 text-left", className), children: [session || sessionPending ? (_jsx(UserView, { isPending: sessionPending, hideSubtitle: hideSubtitle })) : (_jsxs(_Fragment, { children: [_jsx(UserAvatar, {}), _jsx("p", { className: "text-sm font-medium", children: localization.auth.account })] })), _jsx(ChevronsExpandVertical, { className: "ml-auto size-3 text-muted" })] })), _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, { hideSubtitle: hideSubtitle }) })), _jsx(Dropdown.Menu, { children: session ? (_jsxs(_Fragment, { children: [userLinks, !hideSettings && (_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 })] })), userMenuItems, _jsxs(Dropdown.Item, { textValue: localization.auth.signOut, href: `${basePaths.auth}/${viewPaths.auth.signOut}`, variant: "danger", children: [_jsx(ArrowRightFromSquare, { className: "text-danger" }), _jsx(Label, { children: localization.auth.signOut })] })] })) : (_jsxs(_Fragment, { children: [userLinks, _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 })] }), userMenuItems] })) })] })] }));
 }
-//#endregion
-export { v as UserButton };

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

@@ -1,22 +1,28 @@
-import { AvatarProps } from '@heroui/react';
-import { User } from 'better-auth';
-import { ComponentProps } from 'react';
+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"];
+    /**
+     * When true, the subtitle line (email when name/username is shown) is hidden.
+     * @default false
+     */
+    hideSubtitle?: boolean;
     /** @remarks `User` */
-    user?: User & {
+    user?: Partial<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.
+ * Render a compact user item with an avatar, a primary label (display username, name, or email), and an optional subtitle (email).
  *
  * @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 size - Avatar size variant; defaults to `"md"`
+ * @param hideSubtitle - When true, omits the muted subtitle row under the primary label
  * @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;
+export declare function UserView({ className, isPending, size, hideSubtitle, user, ...props }: UserViewProps & ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;

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

@@ -1,37 +1,27 @@
-import { UserAvatar as e } from "./user-avatar.js";
-import { useAuth as t, useSession as n } from "@better-auth-ui/react";
-import { Skeleton as r, cn as i } from "@heroui/react";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
-//#region src/components/auth/user/user-view.tsx
-function s({ className: s, isPending: c, size: l = "sm", user: u, ...d }) {
-	let { authClient: f } = t(), { data: p, isPending: m } = n(f, { enabled: !u && !c }), h = u ?? p?.user;
-	return (c || m) && !u ? /* @__PURE__ */ o("div", {
-		className: i("flex items-center gap-2 min-w-0", s),
-		...d,
-		children: [/* @__PURE__ */ a(e, {
-			isPending: !0,
-			size: l
-		}), /* @__PURE__ */ o("div", {
-			className: "flex flex-col gap-1 min-w-0",
-			children: [/* @__PURE__ */ a(r, { className: "h-3.5 w-24 rounded-lg" }), /* @__PURE__ */ a(r, { className: "h-3 w-32 rounded-lg" })]
-		})]
-	}) : /* @__PURE__ */ o("div", {
-		className: i("flex items-center gap-2 min-w-0", s),
-		...d,
-		children: [/* @__PURE__ */ a(e, {
-			user: h,
-			size: l
-		}), /* @__PURE__ */ o("div", {
-			className: "min-w-0",
-			children: [/* @__PURE__ */ a("p", {
-				className: "text-sm font-medium truncate leading-tight",
-				children: h?.displayUsername || h?.name || h?.email
-			}), (h?.displayUsername || h?.name) && /* @__PURE__ */ a("p", {
-				className: "text-muted text-xs mb-0.5 truncate overflow-x-hidden",
-				children: h?.email
-			})]
-		})]
-	});
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAuth, 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 subtitle (email).
+ *
+ * @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 `"md"`
+ * @param hideSubtitle - When true, omits the muted subtitle row under the primary label
+ * @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 = "md", hideSubtitle = false, user, ...props }) {
+    const { authClient } = useAuth();
+    const { data: session, isPending: sessionPending } = useSession(authClient, {
+        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, className: size === "sm" ? "size-5 [&>span]:text-xs" : undefined, size: size === "lg" ? "md" : "sm" }), _jsxs("div", { className: "flex flex-col gap-1 min-w-0", children: [_jsx(Skeleton, { className: "h-3.5 w-24 rounded-lg" }), !hideSubtitle ? _jsx(Skeleton, { className: "h-3 w-32 rounded-lg" }) : null] })] }));
+    }
+    return (_jsxs("div", { className: cn("flex items-center gap-2 min-w-0", className), ...props, children: [_jsx(UserAvatar, { className: size === "sm" ? "size-5 [&>span]:text-xs" : undefined, user: resolvedUser, size: size === "lg" ? "md" : "sm" }), _jsxs("div", { className: "flex flex-col min-w-0", children: [_jsx("p", { className: "text-foreground text-sm font-medium leading-tight truncate", children: resolvedUser?.displayUsername ||
+                            resolvedUser?.name ||
+                            resolvedUser?.email }), !hideSubtitle &&
+                        (resolvedUser?.displayUsername || resolvedUser?.name) ? (_jsx("p", { className: "text-muted text-xs leading-tight truncate overflow-x-hidden", children: resolvedUser?.email })) : null] })] }));
 }
-//#endregion
-export { s as UserView };

package/dist/components/auth/username/sign-in-username.d.ts

@@ -1,5 +1,5 @@
-import { CardProps } from '@heroui/react';
-import { SocialLayout } from '../provider-buttons';
+import { type CardProps } from "@heroui/react";
+import { type SocialLayout } from "../provider-buttons";
 export interface SignInUsernameProps {
     className?: string;
     socialLayout?: SocialLayout;

package/dist/components/auth/username/sign-in-username.js

@@ -1,148 +1,88 @@
-import { FieldSeparator as e } from "../field-separator.js";
-import { ProviderButtons as t } from "../provider-buttons.js";
-import { usernamePlugin as n } from "../../../lib/auth/username-plugin.js";
-import { authMutationKeys as r } from "@better-auth-ui/core";
-import { useAuth as i, useAuthPlugin as a, useFetchOptions as o, useSendVerificationEmail as s, useSignInEmail as c, useSignInUsername as l } from "@better-auth-ui/react";
-import { Button as ee, Card as u, Checkbox as d, Description as f, FieldError as p, Form as te, Input as m, Label as h, Link as g, Spinner as ne, TextField as _, cn as v, toast as y } from "@heroui/react";
-import { useState as re } 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/username/sign-in-username.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, navigate: R } = i(), { fetchOptions: z, resetFetchOptions: B } = o(), { localization: V } = a(n), [H, U] = re(""), { mutate: W } = s(k, { onSuccess: () => y.success(N.auth.verificationEmailSent) });
-	function G(e) {
-		return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e);
-	}
-	let { mutate: K, isPending: q } = c(k, {
-		onError: (e, { email: t }) => {
-			U(""), e.error?.code === "EMAIL_NOT_VERIFIED" ? y.danger(e.error?.message || e.message, { actionProps: {
-				children: N.auth.resend,
-				onClick: () => W({
-					email: t,
-					callbackURL: `${j}${F}`
-				})
-			} }) : y.danger(e.error?.message || e.message), B();
-		},
-		onSuccess: () => R({ to: F })
-	}), { mutate: J, isPending: Y } = l(k, {
-		onError: (e) => {
-			U(""), y.danger(e.error?.message || e.message), B();
-		},
-		onSuccess: () => R({ to: F })
-	}), ie = (e) => {
-		e.preventDefault();
-		let t = new FormData(e.currentTarget), n = t.get("email"), r = t.get("rememberMe") === "on";
-		G(n) ? K({
-			email: n,
-			password: H,
-			...M?.rememberMe ? { rememberMe: r } : {},
-			fetchOptions: z
-		}) : J({
-			username: n,
-			password: H,
-			...M?.rememberMe ? { rememberMe: r } : {},
-			fetchOptions: z
-		});
-	}, X = C({ mutationKey: r.signIn.all }) + C({ mutationKey: r.signUp.all }) > 0, Z = q || Y, Q = P.find((e) => e.captchaComponent)?.captchaComponent, $ = M?.enabled && !!I?.length;
-	return /* @__PURE__ */ S(u, {
-		className: v("w-full max-w-sm gap-4 md:p-6", w),
-		variant: D,
-		...O,
-		children: [
-			/* @__PURE__ */ x(u.Header, { children: /* @__PURE__ */ x(u.Title, {
-				className: "text-xl font-semibold mb-1",
-				children: N.auth.signIn
-			}) }),
-			/* @__PURE__ */ S(u.Content, {
-				className: "gap-4",
-				children: [
-					E === "top" && /* @__PURE__ */ S(b, { children: [!!I?.length && /* @__PURE__ */ x(t, { socialLayout: T }), $ && /* @__PURE__ */ x(e, { children: N.auth.or })] }),
-					M?.enabled && /* @__PURE__ */ S(te, {
-						onSubmit: ie,
-						className: "flex flex-col gap-4",
-						children: [
-							/* @__PURE__ */ S(_, {
-								name: "email",
-								type: "text",
-								autoComplete: "username email",
-								isDisabled: X,
-								children: [
-									/* @__PURE__ */ x(h, { children: V.username }),
-									/* @__PURE__ */ x(m, {
-										placeholder: V.usernameOrEmailPlaceholder,
-										variant: D === "transparent" ? "primary" : "secondary",
-										required: !0
-									}),
-									/* @__PURE__ */ x(p, {})
-								]
-							}),
-							/* @__PURE__ */ S(_, {
-								minLength: M?.minPasswordLength,
-								maxLength: M?.maxPasswordLength,
-								name: "password",
-								type: "password",
-								autoComplete: "current-password",
-								isDisabled: X,
-								value: H,
-								onChange: U,
-								children: [
-									/* @__PURE__ */ x(h, { children: N.auth.password }),
-									/* @__PURE__ */ x(m, {
-										placeholder: N.auth.passwordPlaceholder,
-										variant: D === "transparent" ? "primary" : "secondary",
-										required: !0
-									}),
-									/* @__PURE__ */ x(p, {})
-								]
-							}),
-							M?.rememberMe && /* @__PURE__ */ S(d, {
-								name: "rememberMe",
-								isDisabled: X,
-								variant: D === "transparent" ? "primary" : "secondary",
-								children: [/* @__PURE__ */ x(d.Control, { children: /* @__PURE__ */ x(d.Indicator, {}) }), /* @__PURE__ */ x(d.Content, { children: /* @__PURE__ */ x(h, { children: N.auth.rememberMe }) })]
-							}),
-							Q && /* @__PURE__ */ x("div", {
-								className: "flex justify-center",
-								children: Q
-							}),
-							/* @__PURE__ */ S("div", {
-								className: "flex flex-col gap-3",
-								children: [/* @__PURE__ */ S(ee, {
-									type: "submit",
-									className: "w-full",
-									isPending: Z || X,
-									children: [Z && /* @__PURE__ */ x(ne, {
-										color: "current",
-										size: "sm"
-									}), N.auth.signIn]
-								}), P.flatMap((e) => e.authButtons?.map((t, n) => /* @__PURE__ */ x(t, { view: "signIn" }, `${e.id}-${n.toString()}`)))]
-							})
-						]
-					}),
-					E === "bottom" && /* @__PURE__ */ S(b, { children: [$ && /* @__PURE__ */ x(e, { children: N.auth.or }), !!I?.length && /* @__PURE__ */ x(t, { socialLayout: T })] })
-				]
-			}),
-			/* @__PURE__ */ S(u.Footer, {
-				className: "flex-col gap-3",
-				children: [M?.forgotPassword && /* @__PURE__ */ x(g, {
-					href: `${A.auth}/${L.auth.forgotPassword}`,
-					className: "no-underline hover:underline",
-					children: N.auth.forgotPasswordLink
-				}), M?.enabled && /* @__PURE__ */ S(f, {
-					className: "text-sm",
-					children: [
-						N.auth.needToCreateAnAccount,
-						" ",
-						/* @__PURE__ */ x(g, {
-							href: `${A.auth}/${L.auth.signUp}`,
-							className: "text-accent no-underline hover:underline decoration-accent-hover",
-							children: N.auth.signUp
-						})
-					]
-				})]
-			})
-		]
-	});
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { authMutationKeys } from "@better-auth-ui/core";
+import { useAuth, useAuthPlugin, useFetchOptions, useSendVerificationEmail, useSignInEmail, useSignInUsername } from "@better-auth-ui/react";
+import { Button, Card, Checkbox, cn, Description, FieldError, Form, Input, Label, Link, Spinner, TextField, toast } from "@heroui/react";
+import { useIsMutating } from "@tanstack/react-query";
+import { useState } from "react";
+import { usernamePlugin } from "../../../lib/auth/username-plugin";
+import { FieldSeparator } from "../field-separator";
+import { ProviderButtons } from "../provider-buttons";
+/**
+ * Render the username-based sign-in UI.
+ *
+ * @returns The sign-in JSX element containing username/password fields, optional magic-link button, and social provider buttons.
+ */
+export function SignInUsername({ className, socialLayout, socialPosition = "bottom", variant, ...props }) {
+    const { authClient, basePaths, baseURL, emailAndPassword, localization, plugins, redirectTo, socialProviders, viewPaths, navigate } = useAuth();
+    const { fetchOptions, resetFetchOptions } = useFetchOptions();
+    const { localization: usernameLocalization } = useAuthPlugin(usernamePlugin);
+    const [password, setPassword] = useState("");
+    const { mutate: sendVerificationEmail } = useSendVerificationEmail(authClient, {
+        onSuccess: () => toast.success(localization.auth.verificationEmailSent)
+    });
+    function isEmail(value) {
+        return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
+    }
+    const { mutate: signInEmail, isPending: isSignInEmailPending } = useSignInEmail(authClient, {
+        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);
+            }
+            resetFetchOptions();
+        },
+        onSuccess: () => navigate({ to: redirectTo })
+    });
+    const { mutate: signInUsername, isPending: isSignInUsernamePending } = useSignInUsername(authClient, {
+        onError: (error) => {
+            setPassword("");
+            toast.danger(error.error?.message || error.message);
+            resetFetchOptions();
+        },
+        onSuccess: () => navigate({ to: redirectTo })
+    });
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        const formData = new FormData(e.currentTarget);
+        const email = formData.get("email");
+        const rememberMe = formData.get("rememberMe") === "on";
+        if (isEmail(email)) {
+            signInEmail({
+                email,
+                password,
+                ...(emailAndPassword?.rememberMe ? { rememberMe } : {}),
+                fetchOptions
+            });
+        }
+        else {
+            signInUsername({
+                username: email,
+                password,
+                ...(emailAndPassword?.rememberMe ? { rememberMe } : {}),
+                fetchOptions
+            });
+        }
+    };
+    const signInMutating = useIsMutating({
+        mutationKey: authMutationKeys.signIn.all
+    });
+    const signUpMutating = useIsMutating({
+        mutationKey: authMutationKeys.signUp.all
+    });
+    const isPending = signInMutating + signUpMutating > 0;
+    const isSignInPending = isSignInEmailPending || isSignInUsernamePending;
+    const Captcha = plugins.find((plugin) => plugin.captchaComponent)?.captchaComponent;
+    const showSeparator = emailAndPassword?.enabled && !!socialProviders?.length;
+    return (_jsxs(Card, { className: cn("w-full max-w-sm gap-4 md:p-6", className), variant: variant, ...props, children: [_jsx(Card.Header, { children: _jsx(Card.Title, { className: "text-xl font-semibold mb-1", children: localization.auth.signIn }) }), _jsxs(Card.Content, { className: "gap-4", children: [socialPosition === "top" && (_jsxs(_Fragment, { children: [!!socialProviders?.length && (_jsx(ProviderButtons, { socialLayout: socialLayout })), showSeparator && (_jsx(FieldSeparator, { children: localization.auth.or }))] })), emailAndPassword?.enabled && (_jsxs(Form, { onSubmit: handleSubmit, className: "flex flex-col gap-4", children: [_jsxs(TextField, { name: "email", type: "text", autoComplete: "username email", isDisabled: isPending, children: [_jsx(Label, { children: usernameLocalization.username }), _jsx(Input, { placeholder: usernameLocalization.usernameOrEmailPlaceholder, variant: variant === "transparent" ? "primary" : "secondary", required: true }), _jsx(FieldError, {})] }), _jsxs(TextField, { minLength: emailAndPassword?.minPasswordLength, maxLength: emailAndPassword?.maxPasswordLength, name: "password", type: "password", autoComplete: "current-password", isDisabled: isPending, value: password, onChange: setPassword, children: [_jsx(Label, { children: localization.auth.password }), _jsx(Input, { placeholder: localization.auth.passwordPlaceholder, variant: variant === "transparent" ? "primary" : "secondary", required: true }), _jsx(FieldError, {})] }), emailAndPassword?.rememberMe && (_jsxs(Checkbox, { name: "rememberMe", isDisabled: isPending, variant: variant === "transparent" ? "primary" : "secondary", children: [_jsx(Checkbox.Control, { children: _jsx(Checkbox.Indicator, {}) }), _jsx(Checkbox.Content, { children: _jsx(Label, { children: localization.auth.rememberMe }) })] })), Captcha && _jsx("div", { className: "flex justify-center", children: Captcha }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs(Button, { type: "submit", className: "w-full", isPending: isSignInPending || isPending, children: [isSignInPending && _jsx(Spinner, { color: "current", size: "sm" }), localization.auth.signIn] }), plugins.flatMap((plugin) => plugin.authButtons?.map((AuthButton, index) => (_jsx(AuthButton, { view: "signIn" }, `${plugin.id}-${index.toString()}`))))] })] })), socialPosition === "bottom" && (_jsxs(_Fragment, { children: [showSeparator && (_jsx(FieldSeparator, { children: localization.auth.or })), !!socialProviders?.length && (_jsx(ProviderButtons, { socialLayout: socialLayout }))] }))] }), _jsxs(Card.Footer, { className: "flex-col gap-3", children: [emailAndPassword?.forgotPassword && (_jsx(Link, { href: `${basePaths.auth}/${viewPaths.auth.forgotPassword}`, className: "no-underline hover:underline", children: localization.auth.forgotPasswordLink })), emailAndPassword?.enabled && (_jsxs(Description, { className: "text-sm", children: [localization.auth.needToCreateAnAccount, " ", _jsx(Link, { href: `${basePaths.auth}/${viewPaths.auth.signUp}`, className: "text-accent no-underline hover:underline decoration-accent-hover", children: localization.auth.signUp })] }))] })] }));
 }
-//#endregion
-export { w as SignInUsername };

package/dist/components/auth/username/username-field.d.ts

@@ -1,4 +1,4 @@
-import { AdditionalFieldProps } from '../additional-field';
+import type { AdditionalFieldProps } from "../additional-field";
 /**
  * Renderer for the `username` additional field. Owns availability checking,
  * length limits, and visual indicators. `FieldError` automatically surfaces