@better-auth-ui/heroui 1.6.3 → 1.6.4

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

@@ -0,0 +1,106 @@
+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))]
+		})
+	})] });
+}
+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

@@ -2,14 +2,12 @@ import { ButtonProps } from '@heroui/react';
 import { SocialProvider } from 'better-auth/social-providers';
 export type ProviderButtonProps = {
     provider: SocialProvider;
-    label?: "continueWith" | "providerName" | "none";
-    isDisabled?: boolean;
-} & Omit<ButtonProps, "children" | "onPress" | "isPending">;
+    display?: "full" | "name" | "icon";
+} & Omit<ButtonProps, "children" | "onPress" | "isPending" | "isDisabled">;
 /**
- * Render a single social provider sign-in button with its own mutation and pending state.
+ * Social provider sign-in button.
  *
- * @param provider - The social provider this button signs in with.
- * @param label - Label style: `"continueWith"` (e.g. "Continue with Google"), `"providerName"` (e.g. "Google"), or `"none"` (icon only).
- * @param isDisabled - External disabled state (e.g. a sibling provider is mid-redirect).
+ * @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 declare function ProviderButton({ provider, label, isDisabled, variant, ...props }: ProviderButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function ProviderButton({ provider, display, variant, ...props }: ProviderButtonProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,29 +1,25 @@
-import { providerIcons as e, useAuth as t, useSignInSocial as n } from "@better-auth-ui/react";
-import { Button as r, Spinner as i } from "@heroui/react";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
-import { useState as s } from "react";
-import { getProviderName as c } from "@better-auth-ui/core";
+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 l({ provider: l, label: u = "continueWith", isDisabled: d, variant: f = "tertiary", ...p }) {
-	let { baseURL: m, localization: h, redirectTo: g } = t(), _ = `${m}${g}`, [v, y] = s(!1), { mutate: b, isPending: x } = n({ onSuccess: () => {
-		y(!0), setTimeout(() => {
-			y(!1);
-		}, 5e3);
-	} }), S = e[l], C = x || v;
-	return /* @__PURE__ */ o(r, {
+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,
-		isDisabled: d,
-		isPending: C,
-		onPress: () => b({
-			provider: l,
-			callbackURL: _
+		isPending: l({ mutationKey: e.signIn.all }) + l({ mutationKey: e.signUp.all }) > 0,
+		onPress: () => y({
+			provider: u,
+			callbackURL: v
 		}),
 		...p,
-		children: [C ? /* @__PURE__ */ a(i, {
+		"aria-label": t(u),
+		children: [b ? /* @__PURE__ */ s(o, {
 			color: "current",
 			size: "sm"
-		}) : /* @__PURE__ */ a(S, {}), u === "continueWith" ? h.auth.continueWith.replace("{{provider}}", c(l)) : u === "providerName" ? c(l) : null]
+		}) : /* @__PURE__ */ s(x, {}), d === "full" ? g.auth.continueWith.replace("{{provider}}", t(u)) : d === "name" ? t(u) : null]
 	});
 }
 //#endregion
-export { l as ProviderButton };
+export { u as ProviderButton };

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

@@ -1,13 +1,12 @@
 export type ProviderButtonsProps = {
-    isPending?: boolean;
     socialLayout?: SocialLayout;
 };
 export type SocialLayout = "auto" | "horizontal" | "vertical" | "grid";
 /**
- * Render social provider sign-in buttons. Each button owns its own sign-in mutation.
+ * Render social provider sign-in buttons. Each button owns its own sign-in
+ * mutation and reads shared auth pending state from React Query.
  *
- * @param isPending - External pending state (e.g. parent form submitting) that disables all buttons.
  * @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 declare function ProviderButtons({ isPending, socialLayout }: ProviderButtonsProps): import("react/jsx-runtime").JSX.Element;
+export declare function ProviderButtons({ socialLayout }: ProviderButtonsProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,18 +1,17 @@
 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 { jsx as r } from "react/jsx-runtime";
-import { useMemo as i } from "react";
+import { useMemo as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
 //#region src/components/auth/provider-buttons.tsx
-function a({ isPending: a, socialLayout: o = "auto" }) {
-	let { socialProviders: s } = t(), c = i(() => o === "auto" ? s?.length && s.length >= 4 ? "horizontal" : "vertical" : o, [o, s?.length]);
-	return /* @__PURE__ */ r("div", {
-		className: n("gap-3", c === "grid" && "grid grid-cols-2", c === "vertical" && "flex flex-col", c === "horizontal" && "flex flex-wrap"),
-		children: s?.map((t) => /* @__PURE__ */ r(e, {
+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,
-			isDisabled: a,
-			label: c === "vertical" ? "continueWith" : c === "grid" ? "providerName" : "none",
-			className: n("w-full", c === "horizontal" && "flex-1")
+			display: s === "vertical" ? "full" : s === "grid" ? "name" : "icon",
+			className: n("w-full", s === "horizontal" && "flex-1")
 		}, t))
 	});
 }

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

@@ -1,138 +1,141 @@
 import { useAuth as e, useResetPassword as t } from "@better-auth-ui/react";
-import { Button as n, Card as r, Description as i, FieldError as a, Form as o, InputGroup as s, Label as c, Link as l, Spinner as u, TextField as d, cn as f, toast as p } from "@heroui/react";
-import { jsx as m, jsxs as h } from "react/jsx-runtime";
+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 { Eye as v, EyeSlash as y } from "@gravity-ui/icons";
+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 { basePaths: C, emailAndPassword: w, localization: T, viewPaths: E, navigate: D } = e(), { mutate: O, isPending: k } = t({ onSuccess: () => {
-		p.success(T.auth.passwordResetSuccess), D({ to: `${C.auth}/${E.auth.signIn}` });
-	} }), [A, j] = _(!1), [M, N] = _(!1);
+	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") || (p.danger(T.auth.invalidResetPasswordToken), D({ to: `${C.auth}/${E.auth.signIn}` }));
+		new URLSearchParams(window.location.search).get("token") || (h.danger(E.auth.invalidResetPasswordToken), O({ to: `${w.auth}/${D.auth.signIn}` }));
 	}, [
-		C.auth,
-		T.auth.invalidResetPasswordToken,
-		E.auth.signIn,
-		D
+		w.auth,
+		E.auth.invalidResetPasswordToken,
+		D.auth.signIn,
+		O
 	]);
-	function P(e) {
+	function F(e) {
 		e.preventDefault();
 		let t = new URLSearchParams(window.location.search).get("token");
 		if (!t) {
-			p.danger(T.auth.invalidResetPasswordToken), D({ to: `${C.auth}/${E.auth.signIn}` });
+			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 (w?.confirmPassword && r !== i) {
-			p.danger(T.auth.passwordsDoNotMatch);
+		if (T?.confirmPassword && r !== i) {
+			h.danger(E.auth.passwordsDoNotMatch);
 			return;
 		}
-		O({
+		k({
 			token: t,
 			newPassword: r
 		});
 	}
-	return /* @__PURE__ */ h(r, {
-		className: f("w-full max-w-sm p-4 md:p-6", b),
+	return /* @__PURE__ */ y(a, {
+		className: m("w-full max-w-sm gap-4 md:p-6", b),
 		variant: x,
 		...S,
 		children: [
-			/* @__PURE__ */ m(r.Header, { children: /* @__PURE__ */ m(r.Title, {
+			/* @__PURE__ */ v(a.Header, { children: /* @__PURE__ */ v(a.Title, {
 				className: "text-xl font-semibold mb-1",
-				children: T.auth.resetPassword
+				children: E.auth.resetPassword
 			}) }),
-			/* @__PURE__ */ m(r.Content, { children: /* @__PURE__ */ h(o, {
-				onSubmit: P,
-				className: "flex flex-col gap-4",
-				children: [
-					/* @__PURE__ */ h(d, {
-						minLength: w?.minPasswordLength,
-						maxLength: w?.maxPasswordLength,
-						name: "password",
-						autoComplete: "new-password",
-						isDisabled: k,
-						children: [
-							/* @__PURE__ */ m(c, { children: T.auth.password }),
-							/* @__PURE__ */ h(s, {
-								variant: x === "transparent" ? "primary" : "secondary",
-								children: [/* @__PURE__ */ m(s.Input, {
-									name: "password",
-									placeholder: T.auth.newPasswordPlaceholder,
-									type: A ? "text" : "password",
-									required: !0
-								}), /* @__PURE__ */ m(s.Suffix, {
-									className: "px-0",
-									children: /* @__PURE__ */ m(n, {
-										isIconOnly: !0,
-										"aria-label": A ? T.auth.hidePassword : T.auth.showPassword,
-										size: "sm",
-										variant: "ghost",
-										onPress: () => j(!A),
-										isDisabled: k,
-										children: m(A ? y : v, {})
-									})
-								})]
-							}),
-							/* @__PURE__ */ m(a, {})
-						]
-					}),
-					w?.confirmPassword && /* @__PURE__ */ h(d, {
-						minLength: w?.minPasswordLength,
-						maxLength: w?.maxPasswordLength,
-						name: "confirmPassword",
-						autoComplete: "new-password",
-						isDisabled: k,
-						children: [
-							/* @__PURE__ */ m(c, { children: T.auth.confirmPassword }),
-							/* @__PURE__ */ h(s, {
-								variant: x === "transparent" ? "primary" : "secondary",
-								children: [/* @__PURE__ */ m(s.Input, {
-									placeholder: T.auth.confirmPasswordPlaceholder,
-									type: M ? "text" : "password",
-									required: !0,
-									name: "confirmPassword"
-								}), /* @__PURE__ */ m(s.Suffix, {
-									className: "px-0",
-									children: /* @__PURE__ */ m(n, {
-										isIconOnly: !0,
-										"aria-label": M ? T.auth.hidePassword : T.auth.showPassword,
-										size: "sm",
-										variant: "ghost",
-										onPress: () => N(!M),
-										isDisabled: k,
-										children: m(M ? y : v, {})
-									})
-								})]
-							}),
-							/* @__PURE__ */ m(a, {})
-						]
-					}),
-					/* @__PURE__ */ m("div", {
-						className: "flex flex-col gap-3",
-						children: /* @__PURE__ */ h(n, {
-							type: "submit",
-							className: "w-full",
-							isPending: k,
-							children: [k && /* @__PURE__ */ m(u, {
-								color: "current",
-								size: "sm"
-							}), T.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__ */ m(r.Footer, {
-				className: "flex-col",
-				children: /* @__PURE__ */ h(i, {
+					]
+				})
+			}),
+			/* @__PURE__ */ v(a.Footer, {
+				className: "flex-col gap-3",
+				children: /* @__PURE__ */ y(o, {
 					className: "text-sm",
 					children: [
-						T.auth.rememberYourPassword,
+						E.auth.rememberYourPassword,
 						" ",
-						/* @__PURE__ */ m(l, {
-							href: `${C.auth}/${E.auth.signIn}`,
-							className: "text-accent decoration-accent no-underline hover:underline",
-							children: T.auth.signIn
+						/* @__PURE__ */ v(d, {
+							href: `${w.auth}/${D.auth.signIn}`,
+							className: "text-accent no-underline hover:underline decoration-accent-hover",
+							children: E.auth.signIn
 						})
 					]
 				})

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

@@ -5,9 +5,12 @@ export type AccountSettingsProps = {
     variant?: CardProps["variant"];
 };
 /**
- * Renders the account settings layout including user profile, change email, appearance, and accounts management.
+ * Renders the account settings layout.
  *
- * UserProfile, ChangeEmail, and Appearance are always rendered; Accounts is rendered when `multiSession` is enabled.
+ * `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.

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

@@ -0,0 +1,20 @@
+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()}`)))
+		]
+	});
+}
+//#endregion
+export { o as AccountSettings };

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

@@ -0,0 +1,89 @@
+import { UserAvatar as e } from "../../user/user-avatar.js";
+import { fileToBase64 as t } from "@better-auth-ui/core";
+import { useAuth as n, useSession as r, useUpdateUser as i } from "@better-auth-ui/react";
+import { CloudArrowUpIn as a, TrashBin as o } from "@gravity-ui/icons";
+import { Button as s, Dropdown as c, Label as l, Spinner as u, cn as d, toast as f } from "@heroui/react";
+import { useRef as p, useState as m } from "react";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+//#region src/components/auth/settings/account/change-avatar.tsx
+function _({ className: _ }) {
+	let { authClient: v, localization: y, avatar: b } = n(), { data: x } = r(v), { mutate: S, isPending: C } = i(v), w = p(null), [T, E] = m(!1), [D, O] = m(!1), k = C || T || D;
+	async function A(e) {
+		let n = e.target.files?.[0];
+		if (n) {
+			e.target.value = "", E(!0);
+			try {
+				let e = await b.resize?.(n, b.size, b.extension) || n;
+				S({ image: await b.upload?.(e) || await t(e) }, { onSuccess: () => f.success(y.settings.avatarChangedSuccess) });
+			} catch (e) {
+				e instanceof Error && f.danger(e.message);
+			}
+			E(!1);
+		}
+	}
+	async function j() {
+		let e = x?.user.image;
+		S({ image: null }, { onSuccess: async () => {
+			if (e) {
+				O(!0);
+				try {
+					await b.delete?.(e);
+				} finally {
+					O(!1);
+				}
+			}
+			f.success(y.settings.avatarDeletedSuccess);
+		} });
+	}
+	return /* @__PURE__ */ g("div", {
+		className: d("flex flex-col gap-1", _),
+		children: [
+			/* @__PURE__ */ h(l, {
+				isDisabled: !x,
+				children: y.settings.avatar
+			}),
+			/* @__PURE__ */ h("input", {
+				ref: w,
+				type: "file",
+				accept: "image/*",
+				className: "hidden",
+				onChange: A
+			}),
+			/* @__PURE__ */ g("div", {
+				className: "flex items-center gap-4",
+				children: [/* @__PURE__ */ h(s, {
+					type: "button",
+					isIconOnly: !0,
+					variant: "ghost",
+					className: "p-0 h-auto w-auto rounded-full",
+					isDisabled: !x || k,
+					onPress: () => w.current?.click(),
+					children: /* @__PURE__ */ h(e, {
+						size: "lg",
+						isPending: k
+					})
+				}), /* @__PURE__ */ g(c, { children: [/* @__PURE__ */ g(s, {
+					isDisabled: !x || k,
+					size: "sm",
+					variant: "secondary",
+					children: [k && /* @__PURE__ */ h(u, { size: "sm" }), y.settings.changeAvatar]
+				}), /* @__PURE__ */ h(c.Popover, {
+					className: "min-w-fit",
+					children: /* @__PURE__ */ g(c.Menu, { children: [/* @__PURE__ */ g(c.Item, {
+						textValue: y.settings.uploadAvatar,
+						onAction: () => w.current?.click(),
+						children: [/* @__PURE__ */ h(a, { className: "text-muted" }), /* @__PURE__ */ h(l, { children: y.settings.uploadAvatar })]
+					}), /* @__PURE__ */ g(c.Item, {
+						textValue: y.settings.deleteAvatar,
+						isDisabled: !x?.user.image,
+						onAction: j,
+						variant: "danger",
+						children: [/* @__PURE__ */ h(o, { className: "text-danger" }), /* @__PURE__ */ h(l, { children: y.settings.deleteAvatar })]
+					})] })
+				})] })]
+			})
+		]
+	});
+}
+//#endregion
+export { _ as ChangeAvatar };