@better-auth-ui/heroui 1.6.7 → 1.6.9

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

@@ -1,106 +1,16 @@
-import { passkeyPlugin as e } from "../../../lib/auth/passkey-plugin.js";
-import { Passkey as t } from "./passkey.js";
-import { useAddPasskey as n, useAuth as r, useAuthPlugin as i, useListPasskeys as a } from "@better-auth-ui/react";
-import { Fingerprint as o } from "@gravity-ui/icons";
-import { AlertDialog as s, Button as c, Card as l, FieldError as u, Form as d, Input as f, Label as p, Skeleton as m, Spinner as h, TextField as g, cn as _ } from "@heroui/react";
-import { useState as v } from "react";
-import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
-//#region src/components/auth/passkey/passkeys.tsx
-function S({ className: m, variant: S, ...w }) {
-	let { authClient: T, localization: E } = r(), { localization: D } = i(e), { data: O, isPending: k } = a(T), { mutate: A, isPending: j } = n(T), [M, N] = v(!1), [P, F] = v(""), I = (e) => {
-		N(e), F("");
-	}, L = async (e) => {
-		e.preventDefault(), A({ name: P.trim() || void 0 }, { onSuccess: () => {
-			N(!1), F("");
-		} });
-	};
-	return /* @__PURE__ */ x("div", { children: [/* @__PURE__ */ b("h2", {
-		className: _("text-sm font-semibold mb-3"),
-		children: D.passkeys
-	}), /* @__PURE__ */ b(l, {
-		className: _(m),
-		variant: S,
-		...w,
-		children: /* @__PURE__ */ x(l.Content, {
-			className: "gap-0",
-			children: [/* @__PURE__ */ x("div", {
-				className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between",
-				children: [/* @__PURE__ */ x("div", { children: [/* @__PURE__ */ b("p", {
-					className: "text-sm font-medium leading-tight",
-					children: D.passkeysDescription
-				}), /* @__PURE__ */ b("p", {
-					className: "text-muted text-xs mt-0.5",
-					children: D.passkeysInstructions
-				})] }), /* @__PURE__ */ x(s, { children: [/* @__PURE__ */ b(c, {
-					className: "shrink-0",
-					size: "sm",
-					isDisabled: k,
-					onPress: () => N(!0),
-					children: D.addPasskey
-				}), /* @__PURE__ */ b(s.Backdrop, {
-					isOpen: M,
-					onOpenChange: I,
-					children: /* @__PURE__ */ b(s.Container, { children: /* @__PURE__ */ b(s.Dialog, { children: /* @__PURE__ */ x(d, {
-						onSubmit: L,
-						children: [
-							/* @__PURE__ */ b(s.CloseTrigger, {}),
-							/* @__PURE__ */ x(s.Header, { children: [/* @__PURE__ */ b(s.Icon, {
-								status: "default",
-								children: /* @__PURE__ */ b(o, {})
-							}), /* @__PURE__ */ b(s.Heading, { children: D.addPasskey })] }),
-							/* @__PURE__ */ x(s.Body, {
-								className: "overflow-visible",
-								children: [/* @__PURE__ */ b("p", {
-									className: "text-muted text-sm",
-									children: D.passkeysInstructions
-								}), /* @__PURE__ */ x(g, {
-									className: "mt-4",
-									name: "passkey-name",
-									isDisabled: j,
-									value: P,
-									onChange: F,
-									children: [
-										/* @__PURE__ */ b(p, { children: D.passkey }),
-										/* @__PURE__ */ b(f, {
-											autoFocus: !0,
-											placeholder: E.settings.optional,
-											variant: "secondary"
-										}),
-										/* @__PURE__ */ b(u, {})
-									]
-								})]
-							}),
-							/* @__PURE__ */ x(s.Footer, { children: [/* @__PURE__ */ b(c, {
-								slot: "close",
-								variant: "tertiary",
-								isDisabled: j,
-								children: E.settings.cancel
-							}), /* @__PURE__ */ x(c, {
-								type: "submit",
-								isPending: j,
-								children: [j && /* @__PURE__ */ b(h, {
-									color: "current",
-									size: "sm"
-								}), D.addPasskey]
-							})] })
-						]
-					}) }) })
-				})] })]
-			}), k ? /* @__PURE__ */ x(y, { children: [/* @__PURE__ */ b("div", { className: "border-b border-dashed -mx-4 md:-mx-6 my-4" }), /* @__PURE__ */ b(C, {})] }) : O?.map((e) => /* @__PURE__ */ x("div", { children: [/* @__PURE__ */ b("div", { className: "border-b border-dashed -mx-4 md:-mx-6 my-4" }), /* @__PURE__ */ b(t, { passkey: e })] }, e.id))]
-		})
-	})] });
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAuth, useAuthPlugin, useListPasskeys } from "@better-auth-ui/react";
+import { Button, Card, cn } from "@heroui/react";
+import { useState } from "react";
+import { passkeyPlugin } from "../../../lib/auth/passkey-plugin";
+import { AddPasskeyDialog } from "./add-passkey-dialog";
+import { Passkey } from "./passkey";
+import { PasskeySkeleton } from "./passkey-skeleton";
+import { PasskeysEmpty } from "./passkeys-empty";
+export function Passkeys({ className, variant, ...props }) {
+    const { authClient } = useAuth();
+    const { localization: passkeyLocalization } = useAuthPlugin(passkeyPlugin);
+    const { data: passkeys, isPending } = useListPasskeys(authClient);
+    const [addOpen, setAddOpen] = useState(false);
+    return (_jsxs("div", { className: cn("flex flex-col gap-3", className), children: [_jsxs("div", { className: "flex items-end justify-between gap-3", children: [_jsx("h2", { className: "text-sm font-semibold truncate", children: passkeyLocalization.passkeys }), _jsx(Button, { className: "shrink-0", size: "sm", isDisabled: isPending, onPress: () => setAddOpen(true), children: passkeyLocalization.addPasskey })] }), _jsx(Card, { variant: variant, ...props, children: _jsx(Card.Content, { children: isPending ? (_jsx(PasskeySkeleton, {})) : !passkeys?.length ? (_jsx(PasskeysEmpty, { onAddPress: () => setAddOpen(true) })) : (passkeys.map((passkey, index) => (_jsxs("div", { children: [index > 0 && (_jsx("div", { className: "border-b border-dashed -mx-4 my-4" })), _jsx(Passkey, { passkey: passkey })] }, passkey.id)))) }) }), _jsx(AddPasskeyDialog, { isOpen: addOpen, onOpenChange: setAddOpen })] }));
 }
-function C() {
-	return /* @__PURE__ */ b("div", {
-		className: "flex items-center justify-between",
-		children: /* @__PURE__ */ x("div", {
-			className: "flex items-center gap-3",
-			children: [/* @__PURE__ */ b(m, { className: "size-10 rounded-xl" }), /* @__PURE__ */ x("div", {
-				className: "flex flex-col gap-1",
-				children: [/* @__PURE__ */ b(m, { className: "h-4 w-24 rounded-lg" }), /* @__PURE__ */ b(m, { className: "h-3 w-20 rounded-lg" })]
-			})]
-		})
-	});
-}
-//#endregion
-export { S as Passkeys };

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

@@ -1,5 +1,5 @@
-import { ButtonProps } from '@heroui/react';
-import { SocialProvider } from 'better-auth/social-providers';
+import { type ButtonProps } from "@heroui/react";
+import type { SocialProvider } from "better-auth/social-providers";
 export type ProviderButtonProps = {
     provider: SocialProvider;
     display?: "full" | "name" | "icon";

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

@@ -1,25 +1,29 @@
-import { authMutationKeys as e, getProviderName as t } from "@better-auth-ui/core";
-import { providerIcons as n, useAuth as r, useSignInSocial as i } from "@better-auth-ui/react";
-import { Button as a, Spinner as o } from "@heroui/react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
-import { useIsMutating as l } from "@tanstack/react-query";
-//#region src/components/auth/provider-button.tsx
-function u({ provider: u, display: d = "full", variant: f = "tertiary", ...p }) {
-	let { authClient: m, baseURL: h, localization: g, redirectTo: _ } = r(), v = `${h}${_}`, { mutate: y, isPending: b } = i(m), x = n[u];
-	return /* @__PURE__ */ c(a, {
-		variant: f,
-		isPending: l({ mutationKey: e.signIn.all }) + l({ mutationKey: e.signUp.all }) > 0,
-		onPress: () => y({
-			provider: u,
-			callbackURL: v
-		}),
-		...p,
-		"aria-label": t(u),
-		children: [b ? /* @__PURE__ */ s(o, {
-			color: "current",
-			size: "sm"
-		}) : /* @__PURE__ */ s(x, {}), d === "full" ? g.auth.continueWith.replace("{{provider}}", t(u)) : d === "name" ? t(u) : null]
-	});
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { authMutationKeys, getProviderName } from "@better-auth-ui/core";
+import { providerIcons, useAuth, useSignInSocial } from "@better-auth-ui/react";
+import { Button, Spinner } from "@heroui/react";
+import { useIsMutating } from "@tanstack/react-query";
+/**
+ * Social provider sign-in button.
+ *
+ * @param provider - Provider to sign in with.
+ * @param display - `"full"` (e.g. "Continue with Google"), `"name"` (just the provider name), or `"icon"` (icon only).
+ */
+export function ProviderButton({ provider, display = "full", variant = "tertiary", ...props }) {
+    const { authClient, baseURL, localization, redirectTo } = useAuth();
+    const callbackURL = `${baseURL}${redirectTo}`;
+    const { mutate: signInSocial, isPending: signInSocialPending } = useSignInSocial(authClient);
+    const ProviderIcon = providerIcons[provider];
+    const signInMutating = useIsMutating({
+        mutationKey: authMutationKeys.signIn.all
+    });
+    const signUpMutating = useIsMutating({
+        mutationKey: authMutationKeys.signUp.all
+    });
+    const isPending = signInMutating + signUpMutating > 0;
+    return (_jsxs(Button, { variant: variant, isPending: isPending, onPress: () => signInSocial({ provider, callbackURL }), ...props, "aria-label": getProviderName(provider), children: [signInSocialPending ? (_jsx(Spinner, { color: "current", size: "sm" })) : (_jsx(ProviderIcon, {})), display === "full"
+                ? localization.auth.continueWith.replace("{{provider}}", getProviderName(provider))
+                : display === "name"
+                    ? getProviderName(provider)
+                    : null] }));
 }
-//#endregion
-export { u as ProviderButton };

package/dist/components/auth/provider-buttons.js

@@ -1,19 +1,29 @@
-import { ProviderButton as e } from "./provider-button.js";
-import { useAuth as t } from "@better-auth-ui/react";
-import { cn as n } from "@heroui/react";
-import { useMemo as r } from "react";
-import { jsx as i } from "react/jsx-runtime";
-//#region src/components/auth/provider-buttons.tsx
-function a({ socialLayout: a = "auto" }) {
-	let { socialProviders: o } = t(), s = r(() => a === "auto" ? o?.length && o.length >= 4 ? "horizontal" : "vertical" : a, [a, o?.length]);
-	return /* @__PURE__ */ i("div", {
-		className: n("gap-3", s === "grid" && "grid grid-cols-2", s === "vertical" && "flex flex-col", s === "horizontal" && "flex flex-wrap"),
-		children: o?.map((t) => /* @__PURE__ */ i(e, {
-			provider: t,
-			display: s === "vertical" ? "full" : s === "grid" ? "name" : "icon",
-			className: n("w-full", s === "horizontal" && "flex-1")
-		}, t))
-	});
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useAuth } from "@better-auth-ui/react";
+import { cn } from "@heroui/react";
+import { useMemo } from "react";
+import { ProviderButton } from "./provider-button";
+/**
+ * Render social provider sign-in buttons. Each button owns its own sign-in
+ * mutation and reads shared auth pending state from React Query.
+ *
+ * @param socialLayout - Preferred layout for the buttons; `"auto"` picks `"horizontal"` when there are four or more providers, otherwise `"vertical"`.
+ * @returns The JSX element that renders the configured social provider buttons.
+ */
+export function ProviderButtons({ socialLayout = "auto" }) {
+    const { socialProviders } = useAuth();
+    const resolvedSocialLayout = useMemo(() => {
+        if (socialLayout === "auto") {
+            if (socialProviders?.length && socialProviders.length >= 4) {
+                return "horizontal";
+            }
+            return "vertical";
+        }
+        return socialLayout;
+    }, [socialLayout, socialProviders?.length]);
+    return (_jsx("div", { className: cn("gap-3", resolvedSocialLayout === "grid" && "grid grid-cols-2", resolvedSocialLayout === "vertical" && "flex flex-col", resolvedSocialLayout === "horizontal" && "flex flex-wrap"), children: socialProviders?.map((provider) => (_jsx(ProviderButton, { provider: provider, display: resolvedSocialLayout === "vertical"
+                ? "full"
+                : resolvedSocialLayout === "grid"
+                    ? "name"
+                    : "icon", className: cn("w-full", resolvedSocialLayout === "horizontal" && "flex-1") }, provider))) }));
 }
-//#endregion
-export { a as ProviderButtons };

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

@@ -1,4 +1,4 @@
-import { CardProps } from '@heroui/react';
+import { type CardProps } from "@heroui/react";
 export type ResetPasswordProps = {
     className?: string;
     variant?: CardProps["variant"];

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

@@ -1,147 +1,57 @@
-import { useAuth as e, useResetPassword as t } from "@better-auth-ui/react";
-import { Eye as n, EyeSlash as r } from "@gravity-ui/icons";
-import { Button as i, Card as a, Description as o, FieldError as s, Form as c, InputGroup as l, Label as u, Link as d, Spinner as f, TextField as p, cn as m, toast as h } from "@heroui/react";
-import { useEffect as g, useState as _ } from "react";
-import { jsx as v, jsxs as y } from "react/jsx-runtime";
-//#region src/components/auth/reset-password.tsx
-function b({ className: b, variant: x, ...S }) {
-	let { authClient: C, basePaths: w, emailAndPassword: T, localization: E, viewPaths: D, navigate: O } = e(), { mutate: k, isPending: A } = t(C, { onSuccess: () => {
-		h.success(E.auth.passwordResetSuccess), O({ to: `${w.auth}/${D.auth.signIn}` });
-	} }), [j, M] = _(!1), [N, P] = _(!1);
-	g(() => {
-		new URLSearchParams(window.location.search).get("token") || (h.danger(E.auth.invalidResetPasswordToken), O({ to: `${w.auth}/${D.auth.signIn}` }));
-	}, [
-		w.auth,
-		E.auth.invalidResetPasswordToken,
-		D.auth.signIn,
-		O
-	]);
-	function F(e) {
-		e.preventDefault();
-		let t = new URLSearchParams(window.location.search).get("token");
-		if (!t) {
-			h.danger(E.auth.invalidResetPasswordToken), O({ to: `${w.auth}/${D.auth.signIn}` });
-			return;
-		}
-		let n = new FormData(e.currentTarget), r = n.get("password"), i = n.get("confirmPassword");
-		if (T?.confirmPassword && r !== i) {
-			h.danger(E.auth.passwordsDoNotMatch);
-			return;
-		}
-		k({
-			token: t,
-			newPassword: r
-		});
-	}
-	return /* @__PURE__ */ y(a, {
-		className: m("w-full max-w-sm gap-4 md:p-6", b),
-		variant: x,
-		...S,
-		children: [
-			/* @__PURE__ */ v(a.Header, { children: /* @__PURE__ */ v(a.Title, {
-				className: "text-xl font-semibold mb-1",
-				children: E.auth.resetPassword
-			}) }),
-			/* @__PURE__ */ v(a.Content, {
-				className: "gap-4",
-				children: /* @__PURE__ */ y(c, {
-					onSubmit: F,
-					className: "flex flex-col gap-4",
-					children: [
-						/* @__PURE__ */ y(p, {
-							minLength: T?.minPasswordLength,
-							maxLength: T?.maxPasswordLength,
-							name: "password",
-							autoComplete: "new-password",
-							isDisabled: A,
-							children: [
-								/* @__PURE__ */ v(u, { children: E.auth.password }),
-								/* @__PURE__ */ y(l, {
-									variant: x === "transparent" ? "primary" : "secondary",
-									children: [/* @__PURE__ */ v(l.Input, {
-										name: "password",
-										placeholder: E.auth.newPasswordPlaceholder,
-										type: j ? "text" : "password",
-										required: !0
-									}), /* @__PURE__ */ v(l.Suffix, {
-										className: "px-0",
-										children: /* @__PURE__ */ v(i, {
-											isIconOnly: !0,
-											"aria-label": j ? E.auth.hidePassword : E.auth.showPassword,
-											size: "sm",
-											variant: "ghost",
-											onPress: () => M(!j),
-											isDisabled: A,
-											children: v(j ? r : n, {})
-										})
-									})]
-								}),
-								/* @__PURE__ */ v(s, {})
-							]
-						}),
-						T?.confirmPassword && /* @__PURE__ */ y(p, {
-							minLength: T?.minPasswordLength,
-							maxLength: T?.maxPasswordLength,
-							name: "confirmPassword",
-							autoComplete: "new-password",
-							isDisabled: A,
-							children: [
-								/* @__PURE__ */ v(u, { children: E.auth.confirmPassword }),
-								/* @__PURE__ */ y(l, {
-									variant: x === "transparent" ? "primary" : "secondary",
-									children: [/* @__PURE__ */ v(l.Input, {
-										placeholder: E.auth.confirmPasswordPlaceholder,
-										type: N ? "text" : "password",
-										required: !0,
-										name: "confirmPassword"
-									}), /* @__PURE__ */ v(l.Suffix, {
-										className: "px-0",
-										children: /* @__PURE__ */ v(i, {
-											isIconOnly: !0,
-											"aria-label": N ? E.auth.hidePassword : E.auth.showPassword,
-											size: "sm",
-											variant: "ghost",
-											onPress: () => P(!N),
-											isDisabled: A,
-											children: v(N ? r : n, {})
-										})
-									})]
-								}),
-								/* @__PURE__ */ v(s, {})
-							]
-						}),
-						/* @__PURE__ */ v("div", {
-							className: "flex flex-col gap-3",
-							children: /* @__PURE__ */ y(i, {
-								type: "submit",
-								className: "w-full",
-								isPending: A,
-								children: [A && /* @__PURE__ */ v(f, {
-									color: "current",
-									size: "sm"
-								}), E.auth.resetPassword]
-							})
-						})
-					]
-				})
-			}),
-			/* @__PURE__ */ v(a.Footer, {
-				className: "flex-col gap-3",
-				children: /* @__PURE__ */ y(o, {
-					className: "text-sm",
-					children: [
-						E.auth.rememberYourPassword,
-						" ",
-						/* @__PURE__ */ v(d, {
-							href: `${w.auth}/${D.auth.signIn}`,
-							className: "text-accent no-underline hover:underline decoration-accent-hover",
-							children: E.auth.signIn
-						})
-					]
-				})
-			})
-		]
-	});
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAuth, useResetPassword } from "@better-auth-ui/react";
+import { Eye, EyeSlash } from "@gravity-ui/icons";
+import { Button, Card, cn, Description, FieldError, Form, InputGroup, Label, Link, Spinner, TextField, toast } from "@heroui/react";
+import { useEffect, useState } from "react";
+/**
+ * Renders a reset password form that verifies a "token" URL parameter on mount and redirects to sign-in if absent.
+ *
+ * Renders password (and optional confirm-password) inputs with visibility toggles, applies min/max length constraints from the auth configuration, shows field errors, and submits the new password to the auth client.
+ */
+export function ResetPassword({ className, variant, ...props }) {
+    const { authClient, basePaths, emailAndPassword, localization, viewPaths, navigate } = useAuth();
+    const { mutate: resetPassword, isPending } = useResetPassword(authClient, {
+        onSuccess: () => {
+            toast.success(localization.auth.passwordResetSuccess);
+            navigate({ to: `${basePaths.auth}/${viewPaths.auth.signIn}` });
+        }
+    });
+    const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+    const [isConfirmPasswordVisible, setIsConfirmPasswordVisible] = useState(false);
+    useEffect(() => {
+        const searchParams = new URLSearchParams(window.location.search);
+        const token = searchParams.get("token");
+        if (!token) {
+            toast.danger(localization.auth.invalidResetPasswordToken);
+            navigate({ to: `${basePaths.auth}/${viewPaths.auth.signIn}` });
+        }
+    }, [
+        basePaths.auth,
+        localization.auth.invalidResetPasswordToken,
+        viewPaths.auth.signIn,
+        navigate
+    ]);
+    function handleSubmit(e) {
+        e.preventDefault();
+        const searchParams = new URLSearchParams(window.location.search);
+        const token = searchParams.get("token");
+        if (!token) {
+            toast.danger(localization.auth.invalidResetPasswordToken);
+            navigate({ to: `${basePaths.auth}/${viewPaths.auth.signIn}` });
+            return;
+        }
+        const formData = new FormData(e.currentTarget);
+        const password = formData.get("password");
+        const confirmPassword = formData.get("confirmPassword");
+        if (emailAndPassword?.confirmPassword && password !== confirmPassword) {
+            toast.danger(localization.auth.passwordsDoNotMatch);
+            return;
+        }
+        resetPassword({ token, newPassword: password });
+    }
+    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.resetPassword }) }), _jsx(Card.Content, { className: "gap-4", children: _jsxs(Form, { onSubmit: handleSubmit, className: "flex flex-col gap-4", children: [_jsxs(TextField, { minLength: emailAndPassword?.minPasswordLength, maxLength: emailAndPassword?.maxPasswordLength, name: "password", autoComplete: "new-password", isDisabled: isPending, children: [_jsx(Label, { children: localization.auth.password }), _jsxs(InputGroup, { variant: variant === "transparent" ? "primary" : "secondary", children: [_jsx(InputGroup.Input, { name: "password", placeholder: localization.auth.newPasswordPlaceholder, type: isPasswordVisible ? "text" : "password", required: true }), _jsx(InputGroup.Suffix, { className: "px-0", children: _jsx(Button, { isIconOnly: true, "aria-label": isPasswordVisible
+                                                    ? localization.auth.hidePassword
+                                                    : localization.auth.showPassword, size: "sm", variant: "ghost", onPress: () => setIsPasswordVisible(!isPasswordVisible), isDisabled: isPending, children: isPasswordVisible ? _jsx(EyeSlash, {}) : _jsx(Eye, {}) }) })] }), _jsx(FieldError, {})] }), emailAndPassword?.confirmPassword && (_jsxs(TextField, { minLength: emailAndPassword?.minPasswordLength, maxLength: emailAndPassword?.maxPasswordLength, name: "confirmPassword", autoComplete: "new-password", isDisabled: isPending, children: [_jsx(Label, { children: localization.auth.confirmPassword }), _jsxs(InputGroup, { variant: variant === "transparent" ? "primary" : "secondary", children: [_jsx(InputGroup.Input, { placeholder: localization.auth.confirmPasswordPlaceholder, type: isConfirmPasswordVisible ? "text" : "password", required: true, name: "confirmPassword" }), _jsx(InputGroup.Suffix, { className: "px-0", children: _jsx(Button, { isIconOnly: true, "aria-label": isConfirmPasswordVisible
+                                                    ? localization.auth.hidePassword
+                                                    : localization.auth.showPassword, size: "sm", variant: "ghost", onPress: () => setIsConfirmPasswordVisible(!isConfirmPasswordVisible), isDisabled: isPending, children: isConfirmPasswordVisible ? _jsx(EyeSlash, {}) : _jsx(Eye, {}) }) })] }), _jsx(FieldError, {})] })), _jsx("div", { className: "flex flex-col gap-3", children: _jsxs(Button, { type: "submit", className: "w-full", isPending: isPending, children: [isPending && _jsx(Spinner, { color: "current", size: "sm" }), localization.auth.resetPassword] }) })] }) }), _jsx(Card.Footer, { className: "flex-col gap-3", children: _jsxs(Description, { className: "text-sm", children: [localization.auth.rememberYourPassword, " ", _jsx(Link, { href: `${basePaths.auth}/${viewPaths.auth.signIn}`, className: "text-accent no-underline hover:underline decoration-accent-hover", children: localization.auth.signIn })] }) })] }));
 }
-//#endregion
-export { b as ResetPassword };

package/dist/components/auth/settings/account/account-settings.d.ts

@@ -1,5 +1,5 @@
-import { CardProps } from '@heroui/react';
-import { ComponentProps } from 'react';
+import { type CardProps } from "@heroui/react";
+import type { ComponentProps } from "react";
 export type AccountSettingsProps = {
     className?: string;
     variant?: CardProps["variant"];

package/dist/components/auth/settings/account/account-settings.js

@@ -1,20 +1,22 @@
-import { ChangeEmail as e } from "./change-email.js";
-import { UserProfile as t } from "./user-profile.js";
-import { useAuth as n } from "@better-auth-ui/react";
-import { cn as r } from "@heroui/react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-//#region src/components/auth/settings/account/account-settings.tsx
-function o({ className: o, variant: s, ...c }) {
-	let { emailAndPassword: l, plugins: u } = n(), d = u.some((e) => e.id === "magicLink");
-	return /* @__PURE__ */ a("div", {
-		className: r("flex w-full flex-col gap-4 md:gap-6", o),
-		...c,
-		children: [
-			/* @__PURE__ */ i(t, { variant: s }),
-			(l?.enabled || d) && /* @__PURE__ */ i(e, { variant: s }),
-			u.flatMap((e) => e.accountCards?.map((t, n) => /* @__PURE__ */ i(t, { variant: s }, `${e.id}-${n.toString()}`)))
-		]
-	});
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAuth } from "@better-auth-ui/react";
+import { cn } from "@heroui/react";
+import { ChangeEmail } from "./change-email";
+import { UserProfile } from "./user-profile";
+/**
+ * Renders the account settings layout.
+ *
+ * `UserProfile` always renders. `ChangeEmail` renders when password auth is
+ * enabled or the `magicLink` plugin is registered. Plugin-contributed account
+ * cards (e.g. `Appearance` from the theme plugin, multi-session accounts) are
+ * rendered via the plugins array.
+ *
+ * @param className - Optional additional CSS class names for the outer container.
+ * @param variant - Card variant forwarded to each account settings card.
+ * @returns The account settings container as a JSX element.
+ */
+export function AccountSettings({ className, variant, ...props }) {
+    const { emailAndPassword, plugins } = useAuth();
+    const hasMagicLink = plugins.some((plugin) => plugin.id === "magicLink");
+    return (_jsxs("div", { className: cn("flex w-full flex-col gap-4 md:gap-6", className), ...props, children: [_jsx(UserProfile, { variant: variant }), (emailAndPassword?.enabled || hasMagicLink) && (_jsx(ChangeEmail, { variant: variant })), plugins.flatMap((plugin) => plugin.accountCards?.map((Card, index) => (_jsx(Card, { variant: variant }, `${plugin.id}-${index.toString()}`))))] }));
 }
-//#endregion
-export { o as AccountSettings };