@better-auth-ui/heroui 1.6.2 → 1.6.4

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 };

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

@@ -12,4 +12,4 @@ export type ChangeEmailProps = {
  *
  * @returns A JSX element rendering the change-email card and form
  */
-export declare function ChangeEmail({ className, variant, ...props }: ChangeEmailProps & CardProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChangeEmail({ className, variant, ...props }: ChangeEmailProps & Omit<CardProps, "children">): import("react/jsx-runtime").JSX.Element;

package/dist/components/{settings → auth/settings}/account/change-email.js

@@ -1,53 +1,50 @@
 import { useAuth as e, useChangeEmail as t, useSession as n } from "@better-auth-ui/react";
 import { Button as r, Card as i, FieldError as a, Fieldset as o, Form as s, Input as c, Label as l, Skeleton as u, Spinner as d, TextField as f, cn as p, toast as m } from "@heroui/react";
 import { jsx as h, jsxs as g } from "react/jsx-runtime";
-//#region src/components/settings/account/change-email.tsx
+//#region src/components/auth/settings/account/change-email.tsx
 function _({ className: _, variant: v, ...y }) {
-	let { localization: b, baseURL: x, viewPaths: S } = e(), { data: C } = n(), { mutate: w, isPending: T } = t({
-		onSuccess: () => m.success(b.settings.changeEmailSuccess),
-		onError: (e) => m.danger(e.error?.message || e.message)
-	});
-	function E(e) {
-		e.preventDefault(), w({
+	let { authClient: b, localization: x, baseURL: S, viewPaths: C } = e(), { data: w } = n(b), { mutate: T, isPending: E } = t(b, { onSuccess: () => m.success(x.settings.changeEmailSuccess) });
+	function D(e) {
+		e.preventDefault(), T({
 			newEmail: new FormData(e.currentTarget).get("email"),
-			callbackURL: `${x}/${S.settings.account}`
+			callbackURL: `${S}/${C.settings.account}`
 		});
 	}
 	return /* @__PURE__ */ g("div", { children: [/* @__PURE__ */ h("h2", {
 		className: p("text-sm font-semibold mb-3"),
-		children: b.settings.changeEmail
+		children: x.settings.changeEmail
 	}), /* @__PURE__ */ h(i, {
 		className: p("p-4 gap-4", _),
 		variant: v,
 		...y,
 		children: /* @__PURE__ */ h(i.Content, { children: /* @__PURE__ */ h(s, {
-			onSubmit: E,
+			onSubmit: D,
 			children: /* @__PURE__ */ g(o, {
 				className: "w-full gap-4",
 				children: [/* @__PURE__ */ h(o.Group, { children: /* @__PURE__ */ g(f, {
 					name: "email",
 					type: "email",
-					defaultValue: C?.user.email,
-					isDisabled: T || !C,
+					defaultValue: w?.user.email,
+					isDisabled: E || !w,
 					children: [
-						/* @__PURE__ */ h(l, { children: b.auth.email }),
-						C ? /* @__PURE__ */ h(c, {
+						/* @__PURE__ */ h(l, { children: x.auth.email }),
+						w ? /* @__PURE__ */ h(c, {
 							required: !0,
 							variant: v === "transparent" ? "primary" : "secondary",
 							autoComplete: "email",
-							placeholder: b.auth.emailPlaceholder
+							placeholder: x.auth.emailPlaceholder
 						}) : /* @__PURE__ */ h(u, { className: "h-10 md:h-9 w-full rounded-xl" }),
 						/* @__PURE__ */ h(a, {})
 					]
-				}, C?.user.email) }), /* @__PURE__ */ h(o.Actions, { children: /* @__PURE__ */ g(r, {
+				}, w?.user.email) }), /* @__PURE__ */ h(o.Actions, { children: /* @__PURE__ */ g(r, {
 					type: "submit",
-					isPending: T,
-					isDisabled: !C,
+					isPending: E,
+					isDisabled: !w,
 					size: "sm",
-					children: [T && /* @__PURE__ */ h(d, {
+					children: [E && /* @__PURE__ */ h(d, {
 						color: "current",
 						size: "sm"
-					}), b.settings.updateEmail]
+					}), x.settings.updateEmail]
 				}) })]
 			})
 		}) })

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

@@ -4,8 +4,7 @@ export type UserProfileProps = {
     variant?: CardProps["variant"];
 };
 /**
- * Render a profile card that lets the authenticated user view and update their display name, username, and avatar.
- *
- * @returns A JSX element containing the user profile card with avatar upload and editable form fields
+ * Render a profile card that lets the authenticated user view and update their
+ * display name, avatar, and any plugin- or user-supplied additional fields.
  */
-export declare function UserProfile({ className, variant, ...props }: UserProfileProps & CardProps): import("react/jsx-runtime").JSX.Element;
+export declare function UserProfile({ className, variant, ...props }: UserProfileProps & Omit<CardProps, "children">): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,86 @@
+import { AdditionalField as e } from "../../additional-field.js";
+import { ChangeAvatar as t } from "./change-avatar.js";
+import { parseAdditionalFieldValue as n } from "@better-auth-ui/core";
+import { useAuth as r, useSession as i, useUpdateUser as a } from "@better-auth-ui/react";
+import { Button as o, Card as s, FieldError as c, Form as l, Input as u, Label as d, Skeleton as f, Spinner as p, TextField as m, cn as h, toast as g } from "@heroui/react";
+import { jsx as _, jsxs as v } from "react/jsx-runtime";
+//#region src/components/auth/settings/account/user-profile.tsx
+function y({ className: y, variant: b, ...x }) {
+	let { additionalFields: S, authClient: C, localization: w } = r(), { data: T } = i(C), { mutate: E, isPending: D } = a(C, { onSuccess: () => g.success(w.settings.profileUpdatedSuccess) });
+	async function O(e) {
+		e.preventDefault();
+		let t = new FormData(e.currentTarget), r = t.get("name"), i = {};
+		for (let e of S ?? []) {
+			if (e.profile === !1 || e.readOnly) continue;
+			let r = n(e, t.get(e.name));
+			if (e.validate) try {
+				await e.validate(r);
+			} catch (e) {
+				g.danger(e instanceof Error ? e.message : String(e));
+				return;
+			}
+			r !== void 0 && (i[e.name] = r);
+		}
+		E({
+			name: r,
+			...i
+		});
+	}
+	return /* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("h2", {
+		className: h("text-sm font-semibold mb-3"),
+		children: w.settings.profile
+	}), /* @__PURE__ */ _(s, {
+		className: h("p-4 gap-4", y),
+		variant: b,
+		...x,
+		children: /* @__PURE__ */ _(s.Content, { children: /* @__PURE__ */ v(l, {
+			onSubmit: O,
+			className: "flex flex-col gap-4",
+			children: [
+				/* @__PURE__ */ _(t, {}),
+				/* @__PURE__ */ v(m, {
+					name: "name",
+					defaultValue: T?.user.name,
+					isDisabled: D || !T,
+					children: [
+						/* @__PURE__ */ _(d, { children: w.auth.name }),
+						/* @__PURE__ */ _(u, {
+							className: h(!T && "hidden"),
+							autoComplete: "name",
+							placeholder: w.auth.name,
+							variant: b === "transparent" ? "primary" : "secondary"
+						}),
+						!T && /* @__PURE__ */ _(f, { className: "h-10 md:h-9 w-full rounded-xl" }),
+						/* @__PURE__ */ _(c, {})
+					]
+				}, T?.user?.name),
+				S?.filter((e) => e.profile !== !1).map((t) => {
+					if (!T) return t.inputType === "hidden" ? null : /* @__PURE__ */ _(f, { className: "h-10 md:h-9 w-full rounded-xl" }, t.name);
+					let n = T.user[t.name], r = `${t.name}:${n instanceof Date ? n.toISOString() : String(n ?? "")}`;
+					return /* @__PURE__ */ _(e, {
+						name: t.name,
+						field: {
+							...t,
+							defaultValue: n
+						},
+						isPending: D,
+						variant: b
+					}, r);
+				}),
+				/* @__PURE__ */ v(o, {
+					type: "submit",
+					isPending: D,
+					isDisabled: !T,
+					size: "sm",
+					className: "self-start mt-1",
+					children: [D && /* @__PURE__ */ _(p, {
+						color: "current",
+						size: "sm"
+					}), w.settings.saveChanges]
+				})
+			]
+		}) })
+	})] });
+}
+//#endregion
+export { y as UserProfile };

package/dist/components/auth/settings/security/active-session.js

@@ -0,0 +1,59 @@
+import { useAuth as e, useRevokeSession as t, useSession as n } from "@better-auth-ui/react";
+import { ArrowRightFromSquare as r, Display as i, Smartphone as a, Xmark as o } from "@gravity-ui/icons";
+import { Button as s, Chip as c, Spinner as l, toast as u } from "@heroui/react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import p from "bowser";
+//#region src/components/auth/settings/security/active-session.tsx
+function m(e) {
+	let t = Math.floor((Date.now() - e.getTime()) / 1e3), n = new Intl.RelativeTimeFormat(void 0, { numeric: "auto" });
+	for (let [e, r] of [
+		["year", 31536e3],
+		["month", 2592e3],
+		["week", 604800],
+		["day", 86400],
+		["hour", 3600],
+		["minute", 60],
+		["second", 1]
+	]) if (t >= r) return n.format(-Math.floor(t / r), e);
+	return n.format(0, "second");
+}
+function h({ activeSession: h }) {
+	let { authClient: g, basePaths: _, localization: v, viewPaths: y, navigate: b } = e(), { data: x } = n(g, { refetchOnMount: !1 }), { mutate: S, isPending: C } = t(g, { onSuccess: () => u.success(v.settings.revokeSessionSuccess) }), w = h.token === x?.session.token, T = p.parse(h.userAgent || "");
+	return /* @__PURE__ */ f("div", {
+		className: "flex items-center gap-3",
+		children: [
+			/* @__PURE__ */ d("div", {
+				className: "flex size-10 shrink-0 items-center justify-center rounded-xl bg-surface-secondary",
+				children: T.platform.type === "mobile" || T.platform.type === "tablet" ? /* @__PURE__ */ d(a, { className: "size-4.5" }) : /* @__PURE__ */ d(i, { className: "size-4.5" })
+			}),
+			/* @__PURE__ */ f("div", {
+				className: "flex flex-col min-w-0",
+				children: [/* @__PURE__ */ f("span", {
+					className: "text-sm font-medium truncate",
+					children: [T.browser.name || "Unknown Browser", T.os.name ? `, ${T.os.name}` : ""]
+				}), w ? /* @__PURE__ */ d(c, {
+					color: "accent",
+					size: "sm",
+					children: v.settings.currentSession
+				}) : h.createdAt && /* @__PURE__ */ d("span", {
+					className: "text-xs text-muted capitalize",
+					children: m(h.createdAt)
+				})]
+			}),
+			/* @__PURE__ */ f(s, {
+				className: "ml-auto shrink-0",
+				variant: "outline",
+				size: "sm",
+				onPress: () => w ? b({ to: `${_.auth}/${y.auth.signOut}` }) : S(h),
+				isPending: C,
+				"aria-label": w ? v.auth.signOut : v.settings.revokeSession,
+				children: [C ? /* @__PURE__ */ d(l, {
+					color: "current",
+					size: "sm"
+				}) : d(w ? r : o, {}), w ? v.auth.signOut : v.settings.revoke]
+			})
+		]
+	});
+}
+//#endregion
+export { h as ActiveSession };

package/dist/components/{settings → auth/settings}/security/active-sessions.d.ts

@@ -11,4 +11,4 @@ export type ActiveSessionsProps = {
  *
  * @returns A JSX element containing the sessions card
  */
-export declare function ActiveSessions({ className, variant, ...props }: ActiveSessionsProps & CardProps): import("react/jsx-runtime").JSX.Element;
+export declare function ActiveSessions({ className, variant, ...props }: ActiveSessionsProps & Omit<CardProps, "children">): import("react/jsx-runtime").JSX.Element;

package/dist/components/auth/settings/security/active-sessions.js

@@ -0,0 +1,34 @@
+import { ActiveSession as e } from "./active-session.js";
+import { useAuth as t, useListSessions as n, useSession as r } from "@better-auth-ui/react";
+import { Card as i, Skeleton as a, cn as o } from "@heroui/react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/auth/settings/security/active-sessions.tsx
+function l({ className: a, variant: l, ...d }) {
+	let { authClient: f, localization: p } = t(), { data: m } = r(f), { data: h, isPending: g } = n(f), _ = h?.toSorted((e) => e.id === m?.session.id ? -1 : 1);
+	return /* @__PURE__ */ c("div", { children: [/* @__PURE__ */ s("h2", {
+		className: o("text-sm font-semibold mb-3"),
+		children: p.settings.activeSessions
+	}), /* @__PURE__ */ s(i, {
+		className: o(a),
+		variant: l,
+		...d,
+		children: /* @__PURE__ */ s(i.Content, {
+			className: "gap-0",
+			children: g ? /* @__PURE__ */ s(u, {}) : _?.map((t, n) => /* @__PURE__ */ c("div", { children: [n > 0 && /* @__PURE__ */ s("div", { className: "border-b border-dashed -mx-4 md:-mx-6 my-4" }), /* @__PURE__ */ s(e, { activeSession: t })] }, t.id))
+		})
+	})] });
+}
+function u() {
+	return /* @__PURE__ */ s("div", {
+		className: "flex items-center justify-between",
+		children: /* @__PURE__ */ c("div", {
+			className: "flex items-center gap-3",
+			children: [/* @__PURE__ */ s(a, { className: "size-10 rounded-xl" }), /* @__PURE__ */ c("div", {
+				className: "flex flex-col gap-1",
+				children: [/* @__PURE__ */ s(a, { className: "h-4 w-32 rounded-lg" }), /* @__PURE__ */ s(a, { className: "h-3 w-24 rounded-lg" })]
+			})]
+		})
+	});
+}
+//#endregion
+export { l as ActiveSessions };

package/dist/components/{settings → auth/settings}/security/change-password.d.ts

@@ -12,4 +12,4 @@ export type ChangePasswordProps = {
  *
  * @returns A JSX element containing the change-password or set-password card
  */
-export declare function ChangePassword({ className, variant, ...props }: ChangePasswordProps & CardProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChangePassword({ className, variant, ...props }: ChangePasswordProps & Omit<CardProps, "children">): import("react/jsx-runtime").JSX.Element;

package/dist/components/auth/settings/security/change-password.js

@@ -0,0 +1,189 @@
+import { useAuth as e, useChangePassword as t, useListAccounts as n, useRequestPasswordReset as r, useSession as i } from "@better-auth-ui/react";
+import { Eye as a, EyeSlash as o } from "@gravity-ui/icons";
+import { Button as s, Card as c, FieldError as l, Fieldset as u, Form as d, Input as f, InputGroup as p, Label as m, Skeleton as h, Spinner as g, TextField as _, cn as v, toast as y } from "@heroui/react";
+import { useState as b } from "react";
+import { jsx as x, jsxs as S } from "react/jsx-runtime";
+//#region src/components/auth/settings/security/change-password.tsx
+function C({ className: t, variant: r, ...a }) {
+	let { authClient: o, emailAndPassword: s, localization: c } = e(), { data: l } = i(o), { data: u, isPending: d } = n(o), f = u?.some((e) => e.providerId === "credential");
+	return !d && !f ? /* @__PURE__ */ x(w, {
+		className: t,
+		variant: r,
+		...a
+	}) : /* @__PURE__ */ x(T, {
+		className: t,
+		variant: r,
+		emailAndPassword: s,
+		localization: c,
+		session: d ? void 0 : l,
+		...a
+	});
+}
+function w({ className: t, variant: n, ...a }) {
+	let { authClient: o, localization: l } = e(), { data: u } = i(o), { mutate: d, isPending: f } = r(o, { onSuccess: () => y.success(l.auth.passwordResetEmailSent) }), p = () => {
+		u?.user.email && d({ email: u.user.email });
+	};
+	return /* @__PURE__ */ S("div", { children: [/* @__PURE__ */ x("h2", {
+		className: v("text-sm font-semibold mb-3"),
+		children: l.settings.changePassword
+	}), /* @__PURE__ */ x(c, {
+		className: v(t),
+		variant: n,
+		...a,
+		children: /* @__PURE__ */ S(c.Content, {
+			className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between",
+			children: [/* @__PURE__ */ S("div", { children: [/* @__PURE__ */ x("p", {
+				className: "text-sm font-medium leading-tight",
+				children: l.settings.setPassword
+			}), /* @__PURE__ */ x("p", {
+				className: "text-muted text-xs mt-0.5",
+				children: l.settings.setPasswordDescription
+			})] }), /* @__PURE__ */ S(s, {
+				size: "sm",
+				isPending: f,
+				isDisabled: !u,
+				onPress: p,
+				children: [f && /* @__PURE__ */ x(g, {
+					color: "current",
+					size: "sm"
+				}), l.auth.sendResetLink]
+			})]
+		})
+	})] });
+}
+function T({ className: n, variant: r, emailAndPassword: i, localization: C, session: w, ...T }) {
+	let { authClient: E } = e(), [D, O] = b(""), [k, A] = b(""), [j, M] = b(""), { mutate: N, isPending: P } = t(E, {
+		onError: (e) => {
+			O(""), A(""), M(""), y.danger(e.error?.message || e.message);
+		},
+		onSuccess: () => {
+			O(""), A(""), M(""), y.success(C.settings.changePasswordSuccess);
+		}
+	}), [F, I] = b(!1), [L, R] = b(!1), z = (e) => {
+		if (e.preventDefault(), i?.confirmPassword && k !== j) {
+			O(""), A(""), M(""), y.danger(C.auth.passwordsDoNotMatch);
+			return;
+		}
+		N({
+			currentPassword: D,
+			newPassword: k,
+			revokeOtherSessions: !0
+		});
+	};
+	return /* @__PURE__ */ S("div", { children: [/* @__PURE__ */ x("h2", {
+		className: v("text-sm font-semibold mb-3"),
+		children: C.settings.changePassword
+	}), /* @__PURE__ */ x(c, {
+		className: v("p-4 gap-4", n),
+		variant: r,
+		...T,
+		children: /* @__PURE__ */ x(c.Content, { children: /* @__PURE__ */ x(d, {
+			onSubmit: z,
+			children: /* @__PURE__ */ S(u, {
+				className: "w-full gap-4",
+				children: [/* @__PURE__ */ S(u.Group, { children: [
+					/* @__PURE__ */ S(_, {
+						name: "currentPassword",
+						type: "password",
+						isDisabled: P || !w,
+						defaultValue: "",
+						value: D,
+						onChange: O,
+						children: [
+							/* @__PURE__ */ x(m, { children: C.settings.currentPassword }),
+							/* @__PURE__ */ x(f, {
+								className: v(!w && "hidden"),
+								autoComplete: "current-password",
+								placeholder: C.settings.currentPasswordPlaceholder,
+								required: !0,
+								variant: r === "transparent" ? "primary" : "secondary"
+							}),
+							!w && /* @__PURE__ */ x(h, { className: "h-10 md:h-9 w-full rounded-xl" }),
+							/* @__PURE__ */ x(l, {})
+						]
+					}),
+					/* @__PURE__ */ S(_, {
+						minLength: i?.minPasswordLength,
+						maxLength: i?.maxPasswordLength,
+						isDisabled: P || !w,
+						value: k,
+						onChange: A,
+						children: [
+							/* @__PURE__ */ x(m, { children: C.auth.newPassword }),
+							/* @__PURE__ */ S(p, {
+								className: v(!w && "hidden"),
+								variant: r === "transparent" ? "primary" : "secondary",
+								children: [/* @__PURE__ */ x(p.Input, {
+									name: "newPassword",
+									type: F ? "text" : "password",
+									autoComplete: "new-password",
+									placeholder: C.auth.newPasswordPlaceholder,
+									required: !0
+								}), /* @__PURE__ */ x(p.Suffix, {
+									className: "px-0",
+									children: /* @__PURE__ */ x(s, {
+										isIconOnly: !0,
+										"aria-label": F ? C.auth.hidePassword : C.auth.showPassword,
+										size: "sm",
+										variant: "ghost",
+										onPress: () => I(!F),
+										isDisabled: P,
+										children: x(F ? o : a, {})
+									})
+								})]
+							}),
+							!w && /* @__PURE__ */ x(h, { className: "h-10 md:h-9 w-full rounded-xl" }),
+							/* @__PURE__ */ x(l, {})
+						]
+					}),
+					i?.confirmPassword && /* @__PURE__ */ S(_, {
+						minLength: i?.minPasswordLength,
+						maxLength: i?.maxPasswordLength,
+						isDisabled: P || !w,
+						isRequired: !0,
+						value: j,
+						onChange: M,
+						children: [
+							/* @__PURE__ */ x(m, { children: C.auth.confirmPassword }),
+							/* @__PURE__ */ S(p, {
+								className: v(!w && "hidden"),
+								variant: r === "transparent" ? "primary" : "secondary",
+								children: [/* @__PURE__ */ x(p.Input, {
+									name: "confirmPassword",
+									type: L ? "text" : "password",
+									autoComplete: "new-password",
+									placeholder: C.auth.confirmPasswordPlaceholder,
+									required: !0
+								}), /* @__PURE__ */ x(p.Suffix, {
+									className: "px-0",
+									children: /* @__PURE__ */ x(s, {
+										isIconOnly: !0,
+										"aria-label": L ? C.auth.hidePassword : C.auth.showPassword,
+										size: "sm",
+										variant: "ghost",
+										onPress: () => R(!L),
+										isDisabled: P,
+										children: x(L ? o : a, {})
+									})
+								})]
+							}),
+							!w && /* @__PURE__ */ x(h, { className: "h-10 md:h-9 w-full rounded-xl" }),
+							/* @__PURE__ */ x(l, {})
+						]
+					})
+				] }), /* @__PURE__ */ x(u.Actions, { children: /* @__PURE__ */ S(s, {
+					type: "submit",
+					isPending: P,
+					isDisabled: !w,
+					size: "sm",
+					children: [P && /* @__PURE__ */ x(g, {
+						color: "current",
+						size: "sm"
+					}), C.settings.updatePassword]
+				}) })]
+			})
+		}) })
+	})] });
+}
+//#endregion
+export { C as ChangePassword };

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

@@ -0,0 +1,56 @@
+import { getProviderName as e } from "@better-auth-ui/core";
+import { providerIcons as t, useAccountInfo as n, useAuth as r, useLinkSocial as i, useUnlinkAccount as a } from "@better-auth-ui/react";
+import { Link as o, LinkSlash as s, PlugConnection as c } from "@gravity-ui/icons";
+import { Button as l, Skeleton as u, Spinner as d, cn as f, toast as p } from "@heroui/react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+//#region src/components/auth/settings/security/linked-account.tsx
+function g({ account: g, provider: _ }) {
+	let { authClient: v, baseURL: y, localization: b } = r(), { data: x, isPending: S } = n(v, { query: { accountId: g?.accountId } }), { mutate: C, isPending: w } = i(v), { mutate: T, isPending: E } = a(v, { onSuccess: () => p.success(b.settings.accountUnlinked) }), D = t[_], O = e(_), k = x?.data?.login || x?.data?.username || x?.user?.email || x?.user?.name || g?.accountId;
+	return /* @__PURE__ */ h("div", {
+		className: "flex items-center gap-3",
+		children: [
+			/* @__PURE__ */ m("div", {
+				className: f("flex size-10 shrink-0 items-center justify-center rounded-xl bg-surface-secondary"),
+				children: m(D || c, { className: f("size-4.5", !g && "opacity-50") })
+			}),
+			/* @__PURE__ */ h("div", {
+				className: "flex flex-col min-w-0",
+				children: [/* @__PURE__ */ m("span", {
+					className: "text-sm font-medium leading-tight",
+					children: O
+				}), g && S ? /* @__PURE__ */ m(u, { className: "h-3 w-24 my-0.5 rounded-lg" }) : /* @__PURE__ */ m("span", {
+					className: "text-xs text-muted truncate",
+					children: g ? k : b.settings.linkProvider.replace("{{provider}}", O)
+				})]
+			}),
+			g ? /* @__PURE__ */ h(l, {
+				className: "ml-auto shrink-0",
+				variant: "outline",
+				size: "sm",
+				onPress: () => T({ providerId: g.providerId }),
+				isPending: E,
+				"aria-label": b.settings.unlinkProvider.replace("{{provider}}", O),
+				children: [E ? /* @__PURE__ */ m(d, {
+					color: "current",
+					size: "sm"
+				}) : /* @__PURE__ */ m(s, {}), b.settings.unlinkProvider.replace("{{provider}}", "").trim()]
+			}) : /* @__PURE__ */ h(l, {
+				className: "ml-auto shrink-0",
+				variant: "outline",
+				size: "sm",
+				onPress: () => C({
+					provider: _,
+					callbackURL: `${y}${window.location.pathname}`
+				}),
+				isPending: w,
+				"aria-label": b.settings.linkProvider.replace("{{provider}}", O),
+				children: [w ? /* @__PURE__ */ m(d, {
+					color: "current",
+					size: "sm"
+				}) : /* @__PURE__ */ m(o, {}), b.settings.link]
+			})
+		]
+	});
+}
+//#endregion
+export { g as LinkedAccount };

package/dist/components/{settings → auth/settings}/security/linked-accounts.d.ts

@@ -12,4 +12,4 @@ export type LinkedAccountsProps = {
  *
  * @returns A JSX element containing the linked accounts card
  */
-export declare function LinkedAccounts({ className, variant, ...props }: LinkedAccountsProps & CardProps): import("react/jsx-runtime").JSX.Element;
+export declare function LinkedAccounts({ className, variant, ...props }: LinkedAccountsProps & Omit<CardProps, "children">): import("react/jsx-runtime").JSX.Element;