@better-auth-ui/heroui 1.6.8 → 1.6.9

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

@@ -1,189 +1,79 @@
-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
-	});
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAuth, useChangePassword, useListAccounts, useRequestPasswordReset, useSession } from "@better-auth-ui/react";
+import { Eye, EyeSlash } from "@gravity-ui/icons";
+import { Button, Card, cn, FieldError, Fieldset, Form, Input, InputGroup, Label, Skeleton, Spinner, TextField, toast } from "@heroui/react";
+import { useState } from "react";
+/**
+ * Render a card form for changing the authenticated user's password.
+ *
+ * When the user has a credential account, displays fields for current password,
+ * new password, and optionally confirm password. When the user only has social
+ * accounts, displays a prompt to set a password via the reset flow.
+ *
+ * @returns A JSX element containing the change-password or set-password card
+ */
+export function ChangePassword({ className, variant, ...props }) {
+    const { authClient, emailAndPassword, localization } = useAuth();
+    const { data: session } = useSession(authClient);
+    const { data: accounts, isPending: isAccountsPending } = useListAccounts(authClient);
+    const hasCredentialAccount = accounts?.some((account) => account.providerId === "credential");
+    if (!isAccountsPending && !hasCredentialAccount) {
+        return _jsx(SetPassword, { className: className, variant: variant, ...props });
+    }
+    return (_jsx(ChangePasswordForm, { className: className, variant: variant, emailAndPassword: emailAndPassword, localization: localization, session: isAccountsPending ? undefined : session, ...props }));
 }
-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 SetPassword({ className, variant, ...props }) {
+    const { authClient, localization } = useAuth();
+    const { data: session } = useSession(authClient);
+    const { mutate: requestPasswordReset, isPending } = useRequestPasswordReset(authClient, {
+        onSuccess: () => toast.success(localization.auth.passwordResetEmailSent)
+    });
+    const handleSetPassword = () => {
+        if (!session?.user.email)
+            return;
+        requestPasswordReset({ email: session.user.email });
+    };
+    return (_jsxs("div", { children: [_jsx("h2", { className: cn("text-sm font-semibold mb-3"), children: localization.settings.changePassword }), _jsx(Card, { className: cn(className), variant: variant, ...props, children: _jsxs(Card.Content, { className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between", children: [_jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium leading-tight", children: localization.settings.setPassword }), _jsx("p", { className: "text-muted text-xs mt-0.5", children: localization.settings.setPasswordDescription })] }), _jsxs(Button, { size: "sm", isPending: isPending, isDisabled: !session, onPress: handleSetPassword, children: [isPending && _jsx(Spinner, { color: "current", size: "sm" }), localization.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]
-				}) })]
-			})
-		}) })
-	})] });
+function ChangePasswordForm({ className, variant, emailAndPassword, localization, session, ...props }) {
+    const { authClient } = useAuth();
+    const [currentPassword, setCurrentPassword] = useState("");
+    const [newPassword, setNewPassword] = useState("");
+    const [confirmPassword, setConfirmPassword] = useState("");
+    const { mutate: changePassword, isPending } = useChangePassword(authClient, {
+        onError: (error) => {
+            setCurrentPassword("");
+            setNewPassword("");
+            setConfirmPassword("");
+            toast.danger(error.error?.message || error.message);
+        },
+        onSuccess: () => {
+            setCurrentPassword("");
+            setNewPassword("");
+            setConfirmPassword("");
+            toast.success(localization.settings.changePasswordSuccess);
+        }
+    });
+    const [isNewPasswordVisible, setIsNewPasswordVisible] = useState(false);
+    const [isConfirmPasswordVisible, setIsConfirmPasswordVisible] = useState(false);
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        if (emailAndPassword?.confirmPassword && newPassword !== confirmPassword) {
+            setCurrentPassword("");
+            setNewPassword("");
+            setConfirmPassword("");
+            toast.danger(localization.auth.passwordsDoNotMatch);
+            return;
+        }
+        changePassword({
+            currentPassword,
+            newPassword,
+            revokeOtherSessions: true
+        });
+    };
+    return (_jsxs("div", { children: [_jsx("h2", { className: cn("text-sm font-semibold mb-3"), children: localization.settings.changePassword }), _jsx(Card, { className: cn("p-4 gap-4", className), variant: variant, ...props, children: _jsx(Card.Content, { children: _jsx(Form, { onSubmit: handleSubmit, children: _jsxs(Fieldset, { className: "w-full gap-4", children: [_jsxs(Fieldset.Group, { children: [_jsxs(TextField, { name: "currentPassword", type: "password", isDisabled: isPending || !session, defaultValue: "", value: currentPassword, onChange: setCurrentPassword, children: [_jsx(Label, { children: localization.settings.currentPassword }), _jsx(Input, { className: cn(!session && "hidden"), autoComplete: "current-password", placeholder: localization.settings.currentPasswordPlaceholder, required: true, variant: variant === "transparent" ? "primary" : "secondary" }), !session && (_jsx(Skeleton, { className: "h-10 md:h-9 w-full rounded-xl" })), _jsx(FieldError, {})] }), _jsxs(TextField, { minLength: emailAndPassword?.minPasswordLength, maxLength: emailAndPassword?.maxPasswordLength, isDisabled: isPending || !session, value: newPassword, onChange: setNewPassword, children: [_jsx(Label, { children: localization.auth.newPassword }), _jsxs(InputGroup, { className: cn(!session && "hidden"), variant: variant === "transparent" ? "primary" : "secondary", children: [_jsx(InputGroup.Input, { name: "newPassword", type: isNewPasswordVisible ? "text" : "password", autoComplete: "new-password", placeholder: localization.auth.newPasswordPlaceholder, required: true }), _jsx(InputGroup.Suffix, { className: "px-0", children: _jsx(Button, { isIconOnly: true, "aria-label": isNewPasswordVisible
+                                                                    ? localization.auth.hidePassword
+                                                                    : localization.auth.showPassword, size: "sm", variant: "ghost", onPress: () => setIsNewPasswordVisible(!isNewPasswordVisible), isDisabled: isPending, children: isNewPasswordVisible ? _jsx(EyeSlash, {}) : _jsx(Eye, {}) }) })] }), !session && (_jsx(Skeleton, { className: "h-10 md:h-9 w-full rounded-xl" })), _jsx(FieldError, {})] }), emailAndPassword?.confirmPassword && (_jsxs(TextField, { minLength: emailAndPassword?.minPasswordLength, maxLength: emailAndPassword?.maxPasswordLength, isDisabled: isPending || !session, isRequired: true, value: confirmPassword, onChange: setConfirmPassword, children: [_jsx(Label, { children: localization.auth.confirmPassword }), _jsxs(InputGroup, { className: cn(!session && "hidden"), variant: variant === "transparent" ? "primary" : "secondary", children: [_jsx(InputGroup.Input, { name: "confirmPassword", type: isConfirmPasswordVisible ? "text" : "password", autoComplete: "new-password", placeholder: localization.auth.confirmPasswordPlaceholder, required: true }), _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, {}) }) })] }), !session && (_jsx(Skeleton, { className: "h-10 md:h-9 w-full rounded-xl" })), _jsx(FieldError, {})] }))] }), _jsx(Fieldset.Actions, { children: _jsxs(Button, { type: "submit", isPending: isPending, isDisabled: !session, size: "sm", children: [isPending && _jsx(Spinner, { color: "current", size: "sm" }), localization.settings.updatePassword] }) })] }) }) }) })] }));
 }
-//#endregion
-export { C as ChangePassword };

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

@@ -1,4 +1,4 @@
-import { Account, SocialProvider } from 'better-auth';
+import type { Account, SocialProvider } from "better-auth";
 export type LinkedAccountProps = {
     account?: Account;
     provider: SocialProvider;

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

@@ -1,56 +1,38 @@
-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: "size-4.5" })
-			}),
-			/* @__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]
-			})
-		]
-	});
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getProviderName } from "@better-auth-ui/core";
+import { providerIcons, useAccountInfo, useAuth, useLinkSocial, useUnlinkAccount } from "@better-auth-ui/react";
+import { Link, LinkSlash, PlugConnection } from "@gravity-ui/icons";
+import { Button, cn, Skeleton, Spinner, toast } from "@heroui/react";
+/**
+ * Render a single linked social account row with provider info and link/unlink control.
+ *
+ * Fetches additional account information from the provider using the accountInfo API
+ * and displays the provider name, account details, and a link/unlink button.
+ *
+ * @param account - The account object containing id, accountId, and providerId
+ * @param provider - The provider id
+ * @returns A JSX element containing the linked account row
+ */
+export function LinkedAccount({ account, provider }) {
+    const { authClient, baseURL, localization } = useAuth();
+    const { data: accountInfo, isPending: isLoadingInfo } = useAccountInfo(authClient, { query: { accountId: account?.accountId } });
+    const { mutate: linkSocial, isPending: isLinking } = useLinkSocial(authClient);
+    const { mutate: unlinkAccount, isPending: isUnlinking } = useUnlinkAccount(authClient, {
+        onSuccess: () => toast.success(localization.settings.accountUnlinked)
+    });
+    const ProviderIcon = providerIcons[provider];
+    const providerName = getProviderName(provider);
+    const displayName = accountInfo?.data?.login ||
+        accountInfo?.data?.username ||
+        accountInfo?.user?.email ||
+        accountInfo?.user?.name ||
+        account?.accountId;
+    return (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: cn("flex size-10 shrink-0 items-center justify-center rounded-xl bg-surface-secondary"), children: ProviderIcon ? (_jsx(ProviderIcon, { className: "size-4.5" })) : (_jsx(PlugConnection, { className: "size-4.5" })) }), _jsxs("div", { className: "flex flex-col min-w-0", children: [_jsx("span", { className: "text-sm font-medium leading-tight", children: providerName }), account && isLoadingInfo ? (_jsx(Skeleton, { className: "h-3 w-24 my-0.5 rounded-lg" })) : (_jsx("span", { className: "text-xs text-muted truncate", children: account
+                            ? displayName
+                            : localization.settings.linkProvider.replace("{{provider}}", providerName) }))] }), account ? (_jsxs(Button, { className: "ml-auto shrink-0", variant: "outline", size: "sm", onPress: () => unlinkAccount({ providerId: account.providerId }), isPending: isUnlinking, "aria-label": localization.settings.unlinkProvider.replace("{{provider}}", providerName), children: [isUnlinking ? _jsx(Spinner, { color: "current", size: "sm" }) : _jsx(LinkSlash, {}), localization.settings.unlinkProvider
+                        .replace("{{provider}}", "")
+                        .trim()] })) : (_jsxs(Button, { className: "ml-auto shrink-0", variant: "outline", size: "sm", onPress: () => linkSocial({
+                    provider,
+                    callbackURL: `${baseURL}${window.location.pathname}`
+                }), isPending: isLinking, "aria-label": localization.settings.linkProvider.replace("{{provider}}", providerName), children: [isLinking ? _jsx(Spinner, { color: "current", size: "sm" }) : _jsx(Link, {}), localization.settings.link] }))] }));
 }
-//#endregion
-export { g as LinkedAccount };

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

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

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

@@ -1,45 +1,36 @@
-import { LinkedAccount as e } from "./linked-account.js";
-import { useAuth as t, useListAccounts as n } from "@better-auth-ui/react";
-import { Card 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/settings/security/linked-accounts.tsx
-function c({ className: i, variant: c, ...u }) {
-	let { authClient: d, localization: f, socialProviders: p } = t(), { data: m, isPending: h } = n(d), g = [...(m?.filter((e) => e.providerId !== "credential"))?.map((e) => ({
-		key: e.id,
-		account: e,
-		provider: e.providerId
-	})) ?? [], ...p?.map((e) => ({
-		key: e,
-		account: void 0,
-		provider: e
-	})) ?? []];
-	return /* @__PURE__ */ s("div", { children: [/* @__PURE__ */ o("h2", {
-		className: a("text-sm font-semibold mb-3"),
-		children: f.settings.linkedAccounts
-	}), /* @__PURE__ */ o(r, {
-		className: a(i),
-		variant: c,
-		...u,
-		children: /* @__PURE__ */ o(r.Content, {
-			className: "gap-0",
-			children: h ? p?.map((e, t) => /* @__PURE__ */ s("div", { children: [t > 0 && /* @__PURE__ */ o("div", { className: "border-b border-dashed -mx-4 md:-mx-6 my-4" }), /* @__PURE__ */ o(l, {})] }, e)) : g.map((t, n) => /* @__PURE__ */ s("div", { children: [n > 0 && /* @__PURE__ */ o("div", { className: "border-b border-dashed -mx-4 md:-mx-6 my-4" }), /* @__PURE__ */ o(e, {
-				account: t.account,
-				provider: t.provider
-			})] }, t.key))
-		})
-	})] });
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAuth, useListAccounts } from "@better-auth-ui/react";
+import { Card, cn, Skeleton } from "@heroui/react";
+import { LinkedAccount } from "./linked-account";
+/**
+ * Render a card showing linked social accounts and available social providers to link.
+ *
+ * Linked accounts (excluding the "credential" provider) are shown with an unlink control;
+ * available providers are shown with a link control. Button states and labels reflect
+ * ongoing link/unlink activity and use localization for provider-specific text.
+ *
+ * @returns A JSX element containing the linked accounts card
+ */
+export function LinkedAccounts({ className, variant, ...props }) {
+    const { authClient, localization, socialProviders } = useAuth();
+    const { data: accounts, isPending } = useListAccounts(authClient);
+    const linkedAccounts = accounts?.filter((account) => account.providerId !== "credential");
+    const allRows = [
+        ...(linkedAccounts?.map((account) => ({
+            key: account.id,
+            account,
+            provider: account.providerId
+        })) ?? []),
+        ...(socialProviders?.map((provider) => ({
+            key: provider,
+            account: undefined,
+            provider
+        })) ?? [])
+    ];
+    return (_jsxs("div", { children: [_jsx("h2", { className: cn("text-sm font-semibold mb-3"), children: localization.settings.linkedAccounts }), _jsx(Card, { className: cn(className), variant: variant, ...props, children: _jsx(Card.Content, { className: "gap-0", children: isPending
+                        ? socialProviders?.map((provider, index) => (_jsxs("div", { children: [index > 0 && (_jsx("div", { className: "border-b border-dashed -mx-4 my-4" })), _jsx(AccountRowSkeleton, {})] }, provider)))
+                        : allRows.map((row, index) => (_jsxs("div", { children: [index > 0 && (_jsx("div", { className: "border-b border-dashed -mx-4 my-4" })), _jsx(LinkedAccount, { account: row.account, provider: row.provider })] }, row.key))) }) })] }));
 }
-function l() {
-	return /* @__PURE__ */ o("div", {
-		className: "flex items-center justify-between",
-		children: /* @__PURE__ */ s("div", {
-			className: "flex items-center gap-3",
-			children: [/* @__PURE__ */ o(i, { className: "size-10 rounded-xl" }), /* @__PURE__ */ s("div", {
-				className: "flex flex-col gap-1",
-				children: [/* @__PURE__ */ o(i, { className: "h-4 w-20 rounded-lg" }), /* @__PURE__ */ o(i, { className: "h-3 w-32 rounded-lg" })]
-			})]
-		})
-	});
+function AccountRowSkeleton() {
+    return (_jsx("div", { className: "flex items-center justify-between", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Skeleton, { className: "size-10 rounded-xl" }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Skeleton, { className: "h-4 w-20 rounded-lg" }), _jsx(Skeleton, { className: "h-3 w-32 rounded-lg" })] })] }) }));
 }
-//#endregion
-export { c as LinkedAccounts };

package/dist/components/auth/settings/security/security-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 SecuritySettingsProps = {
     className?: string;
     variant?: CardProps["variant"];

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

@@ -1,22 +1,20 @@
-import { ActiveSessions as e } from "./active-sessions.js";
-import { ChangePassword as t } from "./change-password.js";
-import { LinkedAccounts as n } from "./linked-accounts.js";
-import { useAuth as r } from "@better-auth-ui/react";
-import { cn as i } from "@heroui/react";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
-//#region src/components/auth/settings/security/security-settings.tsx
-function s({ className: s, variant: c, ...l }) {
-	let { emailAndPassword: u, plugins: d, socialProviders: f } = r();
-	return /* @__PURE__ */ o("div", {
-		className: i("flex w-full flex-col gap-4 md:gap-6", s),
-		...l,
-		children: [
-			u?.enabled && /* @__PURE__ */ a(t, { variant: c }),
-			!!f?.length && /* @__PURE__ */ a(n, { variant: c }),
-			/* @__PURE__ */ a(e, { variant: c }),
-			d.flatMap((e) => e.securityCards?.map((t, n) => /* @__PURE__ */ a(t, { variant: c }, `${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 { ActiveSessions } from "./active-sessions";
+import { ChangePassword } from "./change-password";
+import { LinkedAccounts } from "./linked-accounts";
+/**
+ * Renders the security settings layout including password management, linked accounts, and active sessions.
+ *
+ * ChangePassword is rendered when password authentication is enabled; LinkedAccounts is rendered when social providers are present.
+ * Each registered auth plugin may contribute `securityCards` (for example delete-user, passkeys).
+ *
+ * @param className - Optional additional CSS class names for the outer container.
+ * @param variant - Card variant forwarded to each security settings card.
+ * @returns The security settings container as a JSX element.
+ */
+export function SecuritySettings({ className, variant, ...props }) {
+    const { emailAndPassword, plugins, socialProviders } = useAuth();
+    return (_jsxs("div", { className: cn("flex w-full flex-col gap-4 md:gap-6", className), ...props, children: [emailAndPassword?.enabled && _jsx(ChangePassword, { variant: variant }), !!socialProviders?.length && _jsx(LinkedAccounts, { variant: variant }), _jsx(ActiveSessions, { variant: variant }), plugins.flatMap((plugin) => plugin.securityCards?.map((Card, index) => (_jsx(Card, { variant: variant }, `${plugin.id}-${index.toString()}`))))] }));
 }
-//#endregion
-export { s as SecuritySettings };

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

@@ -1,6 +1,6 @@
-import { SettingsView } from '@better-auth-ui/core';
-import { CardProps } from '@heroui/react';
-import { ComponentProps } from 'react';
+import type { SettingsView } from "@better-auth-ui/core";
+import { type CardProps } from "@heroui/react";
+import { type ComponentProps } from "react";
 export type SettingsProps = {
     className?: string;
     hideNav?: boolean;
@@ -19,6 +19,6 @@ export type SettingsProps = {
  * @param variant - Card variant forwarded to each settings section card
  * @returns A DOM tree containing the responsive settings tabs and the currently selected settings panel
  *
- * @throws Error if neither `view` nor `path` is provided
+ * @throws Error if neither `view` nor `path` is provided, or if `path` does not match any settings view
  */
 export declare function Settings({ className, hideNav, path, variant, view, ...props }: SettingsProps & ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;