@better-auth-ui/heroui 1.6.3 → 1.6.4

package/dist/components/auth/theme/appearance.js

@@ -0,0 +1,72 @@
+import { themePlugin as e } from "../../../lib/auth/theme-plugin.js";
+import { ThemePreviewDark as t, ThemePreviewLight as n, ThemePreviewSystem as r, useAuthPlugin as i } from "@better-auth-ui/react";
+import { Display as a, Moon as o, Sun as s } from "@gravity-ui/icons";
+import { Card as c, Label as l, Radio as u, RadioGroup as d, cn as f, useIsHydrated as p } from "@heroui/react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+//#region src/components/auth/theme/appearance.tsx
+function g({ className: g, variant: _, ...v }) {
+	let { useTheme: y, localization: b } = i(e), { theme: x, setTheme: S, themes: C = [] } = y(), w = p();
+	return /* @__PURE__ */ h("div", { children: [/* @__PURE__ */ m("h2", {
+		className: f("text-sm font-semibold mb-3"),
+		children: b.appearance
+	}), /* @__PURE__ */ m(c, {
+		className: f("p-4 gap-4", g),
+		variant: _,
+		...v,
+		children: /* @__PURE__ */ h(c.Content, { children: [/* @__PURE__ */ m(l, { children: b.theme }), /* @__PURE__ */ m(d, {
+			variant: _ === "transparent" ? "secondary" : "primary",
+			value: w ? x : "",
+			onChange: S,
+			isDisabled: !w || !x,
+			children: /* @__PURE__ */ h("div", {
+				className: "grid gap-3 grid-cols-2 sm:grid-cols-3",
+				children: [
+					C.includes("system") && /* @__PURE__ */ m(u, {
+						value: "system",
+						className: f("mt-0 px-4 pb-4 pt-3 rounded-xl", "border border-transparent data-[selected=true]:border-accent data-[selected=true]:bg-accent/10", "data-[focus-visible=true]:border-accent data-[focus-visible=true]:bg-accent/10", _ === "transparent" ? "bg-surface" : "bg-surface-secondary"),
+						children: /* @__PURE__ */ h(u.Content, {
+							className: "gap-2",
+							children: [/* @__PURE__ */ h("div", {
+								className: "flex gap-2 justify-between",
+								children: [/* @__PURE__ */ h(l, {
+									className: "flex gap-2 items-center",
+									children: [/* @__PURE__ */ m(a, { className: "text-muted" }), b.system]
+								}), /* @__PURE__ */ m(u.Control, { children: /* @__PURE__ */ m(u.Indicator, {}) })]
+							}), /* @__PURE__ */ m(r, { className: "w-full" })]
+						})
+					}),
+					C.includes("light") && /* @__PURE__ */ m(u, {
+						value: "light",
+						className: f("mt-0 px-4 pb-4 pt-3 rounded-xl", "border border-transparent data-[selected=true]:border-accent data-[selected=true]:bg-accent/10", "data-[focus-visible=true]:border-accent data-[focus-visible=true]:bg-accent/10", _ === "transparent" ? "bg-surface" : "bg-surface-secondary"),
+						children: /* @__PURE__ */ h(u.Content, {
+							className: "gap-2",
+							children: [/* @__PURE__ */ h("div", {
+								className: "flex gap-2 justify-between",
+								children: [/* @__PURE__ */ h(l, {
+									className: "flex gap-2 items-center",
+									children: [/* @__PURE__ */ m(s, { className: "text-muted" }), b.light]
+								}), /* @__PURE__ */ m(u.Control, { children: /* @__PURE__ */ m(u.Indicator, {}) })]
+							}), /* @__PURE__ */ m(n, { className: "w-full" })]
+						})
+					}),
+					C.includes("dark") && /* @__PURE__ */ m(u, {
+						value: "dark",
+						className: f("mt-0 px-4 pb-4 pt-3 rounded-xl", "border border-transparent data-[selected=true]:border-accent data-[selected=true]:bg-accent/10", "data-[focus-visible=true]:border-accent data-[focus-visible=true]:bg-accent/10", _ === "transparent" ? "bg-surface" : "bg-surface-secondary"),
+						children: /* @__PURE__ */ h(u.Content, {
+							className: "gap-2",
+							children: [/* @__PURE__ */ h("div", {
+								className: "flex gap-2 justify-between",
+								children: [/* @__PURE__ */ h(l, {
+									className: "flex gap-2 items-center",
+									children: [/* @__PURE__ */ m(o, { className: "text-muted" }), b.dark]
+								}), /* @__PURE__ */ m(u.Control, { children: /* @__PURE__ */ m(u.Indicator, {}) })]
+							}), /* @__PURE__ */ m(t, { className: "w-full" })]
+						})
+					})
+				]
+			})
+		})] })
+	})] });
+}
+//#endregion
+export { g as Appearance };

package/dist/components/auth/theme/theme-toggle-item.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Theme toggle dropdown item used inside `UserButton`. Callers are responsible
+ * for ensuring theming is configured before rendering this component.
+ */
+export declare function ThemeToggleItem(): import("react/jsx-runtime").JSX.Element;

package/dist/components/auth/theme/theme-toggle-item.js

@@ -0,0 +1,58 @@
+import { themePlugin as e } from "../../../lib/auth/theme-plugin.js";
+import { useAuthPlugin as t } from "@better-auth-ui/react";
+import { Display as n, Moon as r, Sun as i } from "@gravity-ui/icons";
+import { Dropdown as a, Label as o, Tabs as s } from "@heroui/react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/components/auth/theme/theme-toggle-item.tsx
+var u = "[role=\"tab\"][aria-selected=\"true\"]";
+function d() {
+	let { useTheme: d, localization: f } = t(e), { theme: p, setTheme: m, themes: h = [] } = d();
+	return /* @__PURE__ */ l(a.Item, {
+		className: "py-1 pe-2",
+		onFocus: (e) => {
+			e.target === e.currentTarget && e.currentTarget.querySelector(u)?.focus({ preventScroll: !0 });
+		},
+		shouldCloseOnSelect: !1,
+		children: [/* @__PURE__ */ c(o, { children: f.theme }), /* @__PURE__ */ c(s, {
+			className: "ml-auto",
+			selectedKey: p,
+			onSelectionChange: (e) => m(e),
+			children: /* @__PURE__ */ c(s.ListContainer, {
+				onKeyDown: (e) => {
+					if (e.key !== "ArrowUp" && e.key !== "ArrowDown") return;
+					let t = e.target;
+					if (t.getAttribute("role") !== "tab") return;
+					let n = t.closest("[role=\"menuitem\"]"), r = n?.closest("[role=\"menu\"]");
+					if (!n || !r) return;
+					let i = Array.from(r.querySelectorAll("[role=\"menuitem\"]:not([data-disabled])")), a = i.indexOf(n);
+					if (a === -1) return;
+					let o = i[e.key === "ArrowDown" ? a + 1 : a - 1];
+					o && (e.preventDefault(), o.focus());
+				},
+				children: /* @__PURE__ */ l(s.List, {
+					"aria-label": f.theme,
+					className: "*:h-5 *:w-5 *:p-0",
+					children: [
+						h.includes("system") && /* @__PURE__ */ l(s.Tab, {
+							id: "system",
+							"aria-label": f.system,
+							children: [/* @__PURE__ */ c(n, { className: "size-3" }), /* @__PURE__ */ c(s.Indicator, {})]
+						}),
+						h.includes("light") && /* @__PURE__ */ l(s.Tab, {
+							id: "light",
+							"aria-label": f.light,
+							children: [/* @__PURE__ */ c(i, { className: "size-3" }), /* @__PURE__ */ c(s.Indicator, {})]
+						}),
+						h.includes("dark") && /* @__PURE__ */ l(s.Tab, {
+							id: "dark",
+							"aria-label": f.dark,
+							children: [/* @__PURE__ */ c(r, { className: "size-3" }), /* @__PURE__ */ c(s.Indicator, {})]
+						})
+					]
+				})
+			})
+		})]
+	});
+}
+//#endregion
+export { d as ThemeToggleItem };

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

@@ -0,0 +1,29 @@
+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" })
+		})]
+	});
+}
+//#endregion
+export { c as UserAvatar };

package/dist/components/{user → auth/user}/user-button.d.ts

@@ -7,19 +7,15 @@ export type UserButtonProps = {
      * @default "bottom"
      */
     placement?: DropdownPopoverProps["placement"];
-    themeToggle?: boolean;
     variant?: ButtonProps["variant"];
 };
 /**
- * Render a user account dropdown button that shows account actions, session switching, and theme controls.
- *
- * Renders either an icon-only trigger or a full button showing the current user state; its dropdown contains account settings, multi-session switching (when enabled), theme selection (when enabled), and sign-in/sign-out flows depending on authentication state.
+ * 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 themeToggle - When true and theming is available, show theme selection controls in the menu
  * @returns The user button and its dropdown menu as a JSX element
  */
-export declare function UserButton({ className, placement, size, variant, themeToggle }: UserButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function UserButton({ className, placement, size, variant }: UserButtonProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,55 @@
+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, Separator as f, cn as p } from "@heroui/react";
+import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
+//#region src/components/auth/user/user-button.tsx
+function _({ className: _, placement: v = "bottom", size: y = "default", variant: b = "ghost" }) {
+	let { authClient: x, basePaths: S, viewPaths: C, localization: w, plugins: T } = n(), { data: E, isPending: D } = r(x), O = T.flatMap((e) => e.userMenuItems?.map((t, n) => /* @__PURE__ */ h(t, {}, `${e.id}-${n.toString()}`)) ?? []);
+	return /* @__PURE__ */ g(u, { children: [y === "icon" ? /* @__PURE__ */ h(u.Trigger, {
+		className: p("rounded-full", _),
+		children: /* @__PURE__ */ h(e, {})
+	}) : /* @__PURE__ */ g(l, {
+		variant: b,
+		className: p("h-auto font-normal justify-start px-3 py-2 text-left", _),
+		children: [E || D ? /* @__PURE__ */ h(t, { isPending: D }) : /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h(e, {}), /* @__PURE__ */ h("p", {
+			className: "text-sm font-medium",
+			children: w.auth.account
+		})] }), /* @__PURE__ */ h(o, { className: "ml-auto size-3.5" })]
+	}), /* @__PURE__ */ g(u.Popover, {
+		placement: v,
+		className: "min-w-40 md:min-w-56 max-w-[48svw]",
+		children: [E && /* @__PURE__ */ h("div", {
+			className: "px-3 pt-3 pb-1",
+			children: /* @__PURE__ */ h(t, {})
+		}), /* @__PURE__ */ h(u.Menu, { children: E ? /* @__PURE__ */ g(m, { children: [
+			/* @__PURE__ */ g(u.Item, {
+				textValue: w.settings.settings,
+				href: `${S.settings}/${C.settings.account}`,
+				children: [/* @__PURE__ */ h(s, { className: "text-muted" }), /* @__PURE__ */ h(d, { children: w.settings.settings })]
+			}),
+			O,
+			/* @__PURE__ */ h(f, {}),
+			/* @__PURE__ */ g(u.Item, {
+				textValue: w.auth.signOut,
+				href: `${S.auth}/${C.auth.signOut}`,
+				children: [/* @__PURE__ */ h(i, { className: "text-muted" }), /* @__PURE__ */ h(d, { children: w.auth.signOut })]
+			})
+		] }) : /* @__PURE__ */ g(m, { children: [
+			/* @__PURE__ */ g(u.Item, {
+				textValue: w.auth.signIn,
+				href: `${S.auth}/${C.auth.signIn}`,
+				children: [/* @__PURE__ */ h(a, { className: "text-muted" }), /* @__PURE__ */ h(d, { children: w.auth.signIn })]
+			}),
+			/* @__PURE__ */ g(u.Item, {
+				textValue: w.auth.signUp,
+				href: `${S.auth}/${C.auth.signUp}`,
+				children: [/* @__PURE__ */ h(c, { className: "text-muted" }), /* @__PURE__ */ h(d, { children: w.auth.signUp })]
+			}),
+			O
+		] }) })]
+	})] });
+}
+//#endregion
+export { _ as UserButton };

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

@@ -0,0 +1,37 @@
+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
+			})]
+		})]
+	});
+}
+//#endregion
+export { s as UserView };

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

@@ -0,0 +1,14 @@
+import { CardProps } from '@heroui/react';
+import { SocialLayout } from '../provider-buttons';
+export interface SignInUsernameProps {
+    className?: string;
+    socialLayout?: SocialLayout;
+    socialPosition?: "top" | "bottom";
+    variant?: CardProps["variant"];
+}
+/**
+ * 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 declare function SignInUsername({ className, socialLayout, socialPosition, variant, ...props }: SignInUsernameProps & Omit<CardProps, "children">): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,142 @@
+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, useSendVerificationEmail as o, useSignInEmail as s, useSignInUsername as c } from "@better-auth-ui/react";
+import { Button as l, Card as u, Checkbox as d, Description as f, FieldError as p, Form as m, Input as h, Label as g, Link as _, Spinner as v, TextField as y, cn as b, toast as x } from "@heroui/react";
+import { useState as S } from "react";
+import { Fragment as C, jsx as w, jsxs as T } from "react/jsx-runtime";
+import { useIsMutating as E } from "@tanstack/react-query";
+//#region src/components/auth/username/sign-in-username.tsx
+function D({ className: D, socialLayout: O, socialPosition: k = "bottom", variant: A, ...j }) {
+	let { authClient: M, basePaths: N, baseURL: P, emailAndPassword: F, localization: I, plugins: L, redirectTo: R, socialProviders: z, viewPaths: B, navigate: V } = i(), { localization: H } = a(n), [U, W] = S(""), { mutate: G } = o(M, { onSuccess: () => x.success(I.auth.verificationEmailSent) });
+	function K(e) {
+		return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e);
+	}
+	let { mutate: q } = s(M, {
+		onError: (e, { email: t }) => {
+			W(""), e.error?.code === "EMAIL_NOT_VERIFIED" ? x.danger(e.error?.message || e.message, { actionProps: {
+				children: I.auth.resend,
+				onClick: () => G({
+					email: t,
+					callbackURL: `${P}${R}`
+				})
+			} }) : x.danger(e.error?.message || e.message);
+		},
+		onSuccess: () => V({ to: R })
+	}), { mutate: J, isPending: Y } = c(M, {
+		onError: (e) => {
+			W(""), x.danger(e.error?.message || e.message);
+		},
+		onSuccess: () => V({ to: R })
+	}), X = (e) => {
+		e.preventDefault();
+		let t = new FormData(e.currentTarget), n = t.get("email"), r = t.get("rememberMe") === "on";
+		K(n) ? q({
+			email: n,
+			password: U,
+			...F?.rememberMe ? { rememberMe: r } : {}
+		}) : J({
+			username: n,
+			password: U,
+			...F?.rememberMe ? { rememberMe: r } : {}
+		});
+	}, Z = E({ mutationKey: r.signIn.all }) + E({ mutationKey: r.signUp.all }) > 0, Q = F?.enabled && !!z?.length;
+	return /* @__PURE__ */ T(u, {
+		className: b("w-full max-w-sm gap-4 md:p-6", D),
+		variant: A,
+		...j,
+		children: [
+			/* @__PURE__ */ w(u.Header, { children: /* @__PURE__ */ w(u.Title, {
+				className: "text-xl font-semibold mb-1",
+				children: I.auth.signIn
+			}) }),
+			/* @__PURE__ */ T(u.Content, {
+				className: "gap-4",
+				children: [
+					k === "top" && /* @__PURE__ */ T(C, { children: [!!z?.length && /* @__PURE__ */ w(t, { socialLayout: O }), Q && /* @__PURE__ */ w(e, { children: I.auth.or })] }),
+					F?.enabled && /* @__PURE__ */ T(m, {
+						onSubmit: X,
+						className: "flex flex-col gap-4",
+						children: [
+							/* @__PURE__ */ T(y, {
+								name: "email",
+								type: "text",
+								autoComplete: "username email",
+								isDisabled: Z,
+								children: [
+									/* @__PURE__ */ w(g, { children: H.username }),
+									/* @__PURE__ */ w(h, {
+										placeholder: H.usernameOrEmailPlaceholder,
+										variant: A === "transparent" ? "primary" : "secondary",
+										required: !0
+									}),
+									/* @__PURE__ */ w(p, {})
+								]
+							}),
+							/* @__PURE__ */ T(y, {
+								minLength: F?.minPasswordLength,
+								maxLength: F?.maxPasswordLength,
+								name: "password",
+								type: "password",
+								autoComplete: "current-password",
+								isDisabled: Z,
+								value: U,
+								onChange: W,
+								children: [
+									/* @__PURE__ */ w(g, { children: I.auth.password }),
+									/* @__PURE__ */ w(h, {
+										placeholder: I.auth.passwordPlaceholder,
+										variant: A === "transparent" ? "primary" : "secondary",
+										required: !0
+									}),
+									/* @__PURE__ */ w(p, {})
+								]
+							}),
+							F?.rememberMe && /* @__PURE__ */ T(d, {
+								name: "rememberMe",
+								isDisabled: Z,
+								variant: A === "transparent" ? "primary" : "secondary",
+								children: [/* @__PURE__ */ w(d.Control, { children: /* @__PURE__ */ w(d.Indicator, {}) }), /* @__PURE__ */ w(d.Content, { children: /* @__PURE__ */ w(g, { children: I.auth.rememberMe }) })]
+							}),
+							/* @__PURE__ */ T("div", {
+								className: "flex flex-col gap-3",
+								children: [/* @__PURE__ */ T(l, {
+									type: "submit",
+									className: "w-full",
+									isPending: Y || Z,
+									children: [Y && /* @__PURE__ */ w(v, {
+										color: "current",
+										size: "sm"
+									}), I.auth.signIn]
+								}), L.flatMap((e) => e.authButtons?.map((t, n) => /* @__PURE__ */ w(t, { view: "signIn" }, `${e.id}-${n.toString()}`)))]
+							})
+						]
+					}),
+					k === "bottom" && /* @__PURE__ */ T(C, { children: [Q && /* @__PURE__ */ w(e, { children: I.auth.or }), !!z?.length && /* @__PURE__ */ w(t, { socialLayout: O })] })
+				]
+			}),
+			/* @__PURE__ */ T(u.Footer, {
+				className: "flex-col gap-3",
+				children: [F?.forgotPassword && /* @__PURE__ */ w(_, {
+					href: `${N.auth}/${B.auth.forgotPassword}`,
+					className: "no-underline hover:underline",
+					children: I.auth.forgotPasswordLink
+				}), F?.enabled && /* @__PURE__ */ T(f, {
+					className: "text-sm",
+					children: [
+						I.auth.needToCreateAnAccount,
+						" ",
+						/* @__PURE__ */ w(_, {
+							href: `${N.auth}/${B.auth.signUp}`,
+							className: "text-accent no-underline hover:underline decoration-accent-hover",
+							children: I.auth.signUp
+						})
+					]
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { D as SignInUsername };

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

@@ -0,0 +1,8 @@
+import { AdditionalFieldProps } from '../additional-field';
+/**
+ * Renderer for the `username` additional field. Owns availability checking,
+ * length limits, and visual indicators. `FieldError` automatically surfaces
+ * native validation messages. Availability feedback is shown via the icon and
+ * aria-label without affecting the field's invalid state.
+ */
+export declare function UsernameField({ name, field, isPending, variant }: AdditionalFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/auth/username/username-field.js

@@ -0,0 +1,51 @@
+import { usernamePlugin as e } from "../../../lib/auth/username-plugin.js";
+import { useAuth as t, useAuthPlugin as n, useIsUsernameAvailable as r } from "@better-auth-ui/react";
+import { Check as i, Xmark as a } from "@gravity-ui/icons";
+import { FieldError as o, InputGroup as s, Label as c, Spinner as l, TextField as u } from "@heroui/react";
+import { useState as d } from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { useDebouncer as m } from "@tanstack/react-pacer";
+//#region src/components/auth/username/username-field.tsx
+function h({ name: h, field: g, isPending: _, variant: v }) {
+	let { authClient: y } = t(), { localization: b, minUsernameLength: x, maxUsernameLength: S, isUsernameAvailable: C } = n(e), w = String(g.defaultValue ?? ""), [T, E] = d(w), { mutate: D, data: O, error: k, reset: A } = r(y, { onError: () => {} }), j = m((e) => {
+		let t = e.trim();
+		if (!t || t === w) {
+			A();
+			return;
+		}
+		D({ username: t });
+	}, { wait: 500 });
+	function M(e) {
+		E(e), A(), C && j.maybeExecute(e);
+	}
+	let N = !!C && !!T.trim() && T.trim() !== w;
+	return /* @__PURE__ */ p(u, {
+		name: h,
+		type: "text",
+		autoComplete: "username",
+		minLength: x,
+		maxLength: S,
+		isDisabled: _,
+		isRequired: g.required,
+		isReadOnly: g.readOnly,
+		value: T,
+		onChange: M,
+		children: [
+			/* @__PURE__ */ f(c, { children: g.label }),
+			/* @__PURE__ */ p(s, {
+				variant: v === "transparent" ? "primary" : "secondary",
+				children: [/* @__PURE__ */ f(s.Input, { placeholder: g.placeholder }), N && /* @__PURE__ */ f(s.Suffix, {
+					"aria-label": O?.available ? b.usernameAvailable : O?.available === !1 ? b.usernameTaken : void 0,
+					className: "px-2",
+					children: O?.available ? /* @__PURE__ */ f(i, { className: "text-success" }) : k || O?.available === !1 ? /* @__PURE__ */ f(a, { className: "text-danger" }) : /* @__PURE__ */ f(l, {
+						size: "sm",
+						color: "current"
+					})
+				})]
+			}),
+			/* @__PURE__ */ f(o, {})
+		]
+	});
+}
+//#endregion
+export { h as UsernameField };

package/dist/email.d.ts

@@ -0,0 +1,7 @@
+export * from './components/auth/email/email-changed-email';
+export * from './components/auth/email/email-verification-email';
+export * from './components/auth/email/magic-link-email';
+export * from './components/auth/email/new-device-email';
+export * from './components/auth/email/otp-email';
+export * from './components/auth/email/password-changed-email';
+export * from './components/auth/email/reset-password-email';

package/dist/email.js

@@ -0,0 +1,9 @@
+"use client";
+import { EmailChangedEmail as e } from "./components/auth/email/email-changed-email.js";
+import { EmailVerificationEmail as t } from "./components/auth/email/email-verification-email.js";
+import { MagicLinkEmail as n } from "./components/auth/email/magic-link-email.js";
+import { NewDeviceEmail as r } from "./components/auth/email/new-device-email.js";
+import { OtpEmail as i } from "./components/auth/email/otp-email.js";
+import { PasswordChangedEmail as a } from "./components/auth/email/password-changed-email.js";
+import { ResetPasswordEmail as o } from "./components/auth/email/reset-password-email.js";
+export { e as EmailChangedEmail, t as EmailVerificationEmail, n as MagicLinkEmail, r as NewDeviceEmail, i as OtpEmail, a as PasswordChangedEmail, o as ResetPasswordEmail };

package/dist/index.d.ts

@@ -1,36 +1,21 @@
+export * from './components/auth/additional-field';
 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-button';
 export * from './components/auth/provider-buttons';
 export * from './components/auth/reset-password';
+export * from './components/auth/settings/account/account-settings';
+export * from './components/auth/settings/account/change-email';
+export * from './components/auth/settings/account/user-profile';
+export * from './components/auth/settings/security/active-sessions';
+export * from './components/auth/settings/security/change-password';
+export * from './components/auth/settings/security/linked-accounts';
+export * from './components/auth/settings/security/security-settings';
+export * from './components/auth/settings/settings';
 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/user/user-avatar';
+export * from './components/auth/user/user-button';
+export * from './components/auth/user/user-view';

package/dist/index.js

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