@better-auth-ui/heroui 1.6.7 → 1.6.9

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

@@ -1,89 +1,54 @@
-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 })]
-					})] })
-				})] })]
-			})
-		]
-	});
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { fileToBase64 } from "@better-auth-ui/core";
+import { useAuth, useSession, useUpdateUser } from "@better-auth-ui/react";
+import { CloudArrowUpIn, TrashBin } from "@gravity-ui/icons";
+import { Button, cn, Dropdown, Label, Spinner, toast } from "@heroui/react";
+import { useRef, useState } from "react";
+import { UserAvatar } from "../../user/user-avatar";
+export function ChangeAvatar({ className }) {
+    const { authClient, localization, avatar } = useAuth();
+    const { data: session } = useSession(authClient);
+    const { mutate: updateUser, isPending: updatePending } = useUpdateUser(authClient);
+    const fileInputRef = useRef(null);
+    const [isUploading, setIsUploading] = useState(false);
+    const [isDeleting, setIsDeleting] = useState(false);
+    const isPending = updatePending || isUploading || isDeleting;
+    async function handleFileChange(e) {
+        const file = e.target.files?.[0];
+        if (!file)
+            return;
+        e.target.value = "";
+        setIsUploading(true);
+        try {
+            const resized = (await avatar.resize?.(file, avatar.size, avatar.extension)) || file;
+            const image = (await avatar.upload?.(resized)) || (await fileToBase64(resized));
+            updateUser({ image }, {
+                onSuccess: () => toast.success(localization.settings.avatarChangedSuccess)
+            });
+        }
+        catch (error) {
+            if (error instanceof Error) {
+                toast.danger(error.message);
+            }
+        }
+        setIsUploading(false);
+    }
+    async function handleDelete() {
+        const currentImage = session?.user.image;
+        updateUser({ image: null }, {
+            onSuccess: async () => {
+                if (currentImage) {
+                    setIsDeleting(true);
+                    try {
+                        await avatar.delete?.(currentImage);
+                    }
+                    finally {
+                        setIsDeleting(false);
+                    }
+                }
+                toast.success(localization.settings.avatarDeletedSuccess);
+            }
+        });
+    }
+    return (_jsxs("div", { className: cn("flex flex-col gap-1", className), children: [_jsx(Label, { isDisabled: !session, children: localization.settings.avatar }), _jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", className: "hidden", onChange: handleFileChange }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsx(Button, { type: "button", isIconOnly: true, variant: "ghost", className: "p-0 h-auto w-auto rounded-full", isDisabled: !session || isPending, onPress: () => fileInputRef.current?.click(), children: _jsx(UserAvatar, { size: "lg", isPending: isPending }) }), _jsxs(Dropdown, { children: [_jsxs(Button, { isDisabled: !session || isPending, size: "sm", variant: "secondary", children: [isPending && _jsx(Spinner, { size: "sm" }), localization.settings.changeAvatar] }), _jsx(Dropdown.Popover, { className: "min-w-fit", children: _jsxs(Dropdown.Menu, { children: [_jsxs(Dropdown.Item, { textValue: localization.settings.uploadAvatar, onAction: () => fileInputRef.current?.click(), children: [_jsx(CloudArrowUpIn, { className: "text-muted" }), _jsx(Label, { children: localization.settings.uploadAvatar })] }), _jsxs(Dropdown.Item, { textValue: localization.settings.deleteAvatar, isDisabled: !session?.user.image, onAction: handleDelete, variant: "danger", children: [_jsx(TrashBin, { className: "text-danger" }), _jsx(Label, { children: localization.settings.deleteAvatar })] })] }) })] })] })] }));
 }
-//#endregion
-export { _ as ChangeAvatar };

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

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

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

@@ -1,54 +1,28 @@
-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/auth/settings/account/change-email.tsx
-function _({ className: _, variant: v, ...y }) {
-	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: `${S}/${C.settings.account}`
-		});
-	}
-	return /* @__PURE__ */ g("div", { children: [/* @__PURE__ */ h("h2", {
-		className: p("text-sm font-semibold mb-3"),
-		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: D,
-			children: /* @__PURE__ */ g(o, {
-				className: "w-full gap-4",
-				children: [/* @__PURE__ */ h(o.Group, { children: /* @__PURE__ */ g(f, {
-					name: "email",
-					type: "email",
-					defaultValue: w?.user.email,
-					isDisabled: E || !w,
-					children: [
-						/* @__PURE__ */ h(l, { children: x.auth.email }),
-						w ? /* @__PURE__ */ h(c, {
-							required: !0,
-							variant: v === "transparent" ? "primary" : "secondary",
-							autoComplete: "email",
-							placeholder: x.auth.emailPlaceholder
-						}) : /* @__PURE__ */ h(u, { className: "h-10 md:h-9 w-full rounded-xl" }),
-						/* @__PURE__ */ h(a, {})
-					]
-				}, w?.user.email) }), /* @__PURE__ */ h(o.Actions, { children: /* @__PURE__ */ g(r, {
-					type: "submit",
-					isPending: E,
-					isDisabled: !w,
-					size: "sm",
-					children: [E && /* @__PURE__ */ h(d, {
-						color: "current",
-						size: "sm"
-					}), x.settings.updateEmail]
-				}) })]
-			})
-		}) })
-	})] });
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAuth, useChangeEmail, useSession } from "@better-auth-ui/react";
+import { Button, Card, cn, FieldError, Fieldset, Form, Input, Label, Skeleton, Spinner, TextField, toast } from "@heroui/react";
+/**
+ * Render a card containing a form to view and update the authenticated user's email.
+ *
+ * Shows a loading skeleton until session data is available, displays the current
+ * email as the form's default value, and sends a verification email to the
+ * new address upon successful submission.
+ *
+ * @returns A JSX element rendering the change-email card and form
+ */
+export function ChangeEmail({ className, variant, ...props }) {
+    const { authClient, localization, baseURL, viewPaths } = useAuth();
+    const { data: session } = useSession(authClient);
+    const { mutate: changeEmail, isPending } = useChangeEmail(authClient, {
+        onSuccess: () => toast.success(localization.settings.changeEmailSuccess)
+    });
+    function handleSubmit(e) {
+        e.preventDefault();
+        const formData = new FormData(e.currentTarget);
+        changeEmail({
+            newEmail: formData.get("email"),
+            callbackURL: `${baseURL}/${viewPaths.settings.account}`
+        });
+    }
+    return (_jsxs("div", { children: [_jsx("h2", { className: cn("text-sm font-semibold mb-3"), children: localization.settings.changeEmail }), _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: [_jsx(Fieldset.Group, { children: _jsxs(TextField, { name: "email", type: "email", defaultValue: session?.user.email, isDisabled: isPending || !session, children: [_jsx(Label, { children: localization.auth.email }), session ? (_jsx(Input, { required: true, variant: variant === "transparent" ? "primary" : "secondary", autoComplete: "email", placeholder: localization.auth.emailPlaceholder })) : (_jsx(Skeleton, { className: "h-10 md:h-9 w-full rounded-xl" })), _jsx(FieldError, {})] }, `${session?.user.id}-${session?.user.email}-email`) }), _jsx(Fieldset.Actions, { children: _jsxs(Button, { type: "submit", isPending: isPending, isDisabled: !session, size: "sm", children: [isPending && _jsx(Spinner, { color: "current", size: "sm" }), localization.settings.updateEmail] }) })] }) }) }) })] }));
 }
-//#endregion
-export { _ as ChangeEmail };

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

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

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

@@ -1,86 +1,65 @@
-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]
-				})
-			]
-		}) })
-	})] });
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { parseAdditionalFieldValue } from "@better-auth-ui/core";
+import { useAuth, useSession, useUpdateUser } from "@better-auth-ui/react";
+import { Button, Card, cn, FieldError, Form, Input, Label, Skeleton, Spinner, TextField, toast } from "@heroui/react";
+import { AdditionalField } from "../../additional-field";
+import { ChangeAvatar } from "./change-avatar";
+/**
+ * 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 function UserProfile({ className, variant, ...props }) {
+    const { additionalFields, authClient, localization } = useAuth();
+    const { data: session } = useSession(authClient);
+    const { mutate: updateUser, isPending } = useUpdateUser(authClient, {
+        onSuccess: () => toast.success(localization.settings.profileUpdatedSuccess)
+    });
+    async function handleSubmit(e) {
+        e.preventDefault();
+        const formData = new FormData(e.currentTarget);
+        const name = formData.get("name");
+        const additionalFieldValues = {};
+        for (const field of additionalFields ?? []) {
+            if (field.profile === false || field.readOnly)
+                continue;
+            const value = parseAdditionalFieldValue(field, formData.get(field.name));
+            if (field.validate) {
+                try {
+                    await field.validate(value);
+                }
+                catch (error) {
+                    toast.danger(error instanceof Error ? error.message : String(error));
+                    return;
+                }
+            }
+            // `null` = explicit clear (forward to backend); `undefined` = omitted.
+            if (value !== undefined) {
+                additionalFieldValues[field.name] = value;
+            }
+        }
+        updateUser({
+            name,
+            ...additionalFieldValues
+        });
+    }
+    return (_jsxs("div", { children: [_jsx("h2", { className: cn("text-sm font-semibold mb-3"), children: localization.settings.userProfile }), _jsx(Card, { className: cn("p-4 gap-4", className), variant: variant, ...props, children: _jsx(Card.Content, { children: _jsxs(Form, { onSubmit: handleSubmit, className: "flex flex-col gap-4", children: [_jsx(ChangeAvatar, {}), _jsxs(TextField, { name: "name", defaultValue: session?.user.name, isDisabled: isPending || !session, children: [_jsx(Label, { children: localization.auth.name }), _jsx(Input, { className: cn(!session && "hidden"), autoComplete: "name", placeholder: localization.auth.name, variant: variant === "transparent" ? "primary" : "secondary" }), !session && (_jsx(Skeleton, { className: "h-10 md:h-9 w-full rounded-xl" })), _jsx(FieldError, {})] }, `${session?.user?.id}-${session?.user?.name}-name`), additionalFields
+                                ?.filter((field) => field.profile !== false)
+                                .map((field) => {
+                                if (!session) {
+                                    if (field.inputType === "hidden") {
+                                        return null;
+                                    }
+                                    return (_jsx(Skeleton, { className: "h-10 md:h-9 w-full rounded-xl" }, field.name));
+                                }
+                                const value = session.user[field.name];
+                                // Re-mount when the user or the session value changes so the
+                                // field's uncontrolled `defaultValue` reflects the latest data.
+                                const key = `${session.user.id}-${field.name}-${value instanceof Date
+                                    ? value.toISOString()
+                                    : String(value ?? "")}`;
+                                return (_jsx(AdditionalField, { name: field.name, field: {
+                                        ...field,
+                                        defaultValue: value
+                                    }, isPending: isPending, variant: variant }, key));
+                            }), _jsxs(Button, { type: "submit", isPending: isPending, isDisabled: !session, size: "sm", className: "self-start mt-1", children: [isPending && _jsx(Spinner, { color: "current", size: "sm" }), localization.settings.saveChanges] })] }) }) })] }));
 }
-//#endregion
-export { y as UserProfile };

package/dist/components/auth/settings/security/active-session.d.ts

@@ -1,4 +1,4 @@
-import { Session } from 'better-auth';
+import type { Session } from "better-auth";
 export type ActiveSessionProps = {
     activeSession: Session;
 };

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

@@ -1,59 +1,52 @@
-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");
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAuth, useRevokeSession, useSession } from "@better-auth-ui/react";
+import { ArrowRightFromSquare, Display, Smartphone, Xmark } from "@gravity-ui/icons";
+import { Button, Chip, Spinner, toast } from "@heroui/react";
+import Bowser from "bowser";
+function timeAgo(date) {
+    const seconds = Math.floor((Date.now() - date.getTime()) / 1000);
+    const rtf = new Intl.RelativeTimeFormat(undefined, { numeric: "auto" });
+    const UNITS = [
+        ["year", 31536000],
+        ["month", 2592000],
+        ["week", 604800],
+        ["day", 86400],
+        ["hour", 3600],
+        ["minute", 60],
+        ["second", 1]
+    ];
+    for (const [unit, threshold] of UNITS) {
+        if (seconds >= threshold) {
+            return rtf.format(-Math.floor(seconds / threshold), unit);
+        }
+    }
+    return rtf.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]
-			})
-		]
-	});
+/**
+ * Render a single active session row with device info and revoke control.
+ *
+ * Shows the session's browser, OS, IP address, and creation time. The current session is marked
+ * and navigates to sign-out on click, while other sessions can be revoked individually.
+ *
+ * @param session - The session object containing id, token, userAgent, ipAddress, and createdAt
+ * @returns A JSX element containing the active session row
+ */
+export function ActiveSession({ activeSession }) {
+    const { authClient, basePaths, localization, viewPaths, navigate } = useAuth();
+    const { data: session } = useSession(authClient, { refetchOnMount: false });
+    const { mutate: revokeSession, isPending: isRevoking } = useRevokeSession(authClient, {
+        onSuccess: () => toast.success(localization.settings.revokeSessionSuccess)
+    });
+    const isCurrentSession = activeSession.token === session?.session.token;
+    const ua = Bowser.parse(activeSession.userAgent || "");
+    const isMobile = ua.platform.type === "mobile" || ua.platform.type === "tablet";
+    return (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex size-10 shrink-0 items-center justify-center rounded-xl bg-surface-secondary", children: isMobile ? (_jsx(Smartphone, { className: "size-4.5" })) : (_jsx(Display, { className: "size-4.5" })) }), _jsxs("div", { className: "flex flex-col min-w-0", children: [_jsxs("span", { className: "text-sm font-medium truncate", children: [ua.browser.name || "Unknown Browser", ua.os.name ? `, ${ua.os.name}` : ""] }), isCurrentSession ? (_jsx(Chip, { color: "accent", size: "sm", children: localization.settings.currentSession })) : (activeSession.createdAt && (_jsx("span", { className: "text-xs text-muted capitalize", children: timeAgo(activeSession.createdAt) })))] }), _jsxs(Button, { className: "ml-auto shrink-0", variant: "outline", size: "sm", onPress: () => isCurrentSession
+                    ? navigate({
+                        to: `${basePaths.auth}/${viewPaths.auth.signOut}`
+                    })
+                    : revokeSession(activeSession), isPending: isRevoking, "aria-label": isCurrentSession
+                    ? localization.auth.signOut
+                    : localization.settings.revokeSession, children: [isRevoking ? (_jsx(Spinner, { color: "current", size: "sm" })) : isCurrentSession ? (_jsx(ArrowRightFromSquare, {})) : (_jsx(Xmark, {})), isCurrentSession
+                        ? localization.auth.signOut
+                        : localization.settings.revoke] })] }));
 }
-//#endregion
-export { h as ActiveSession };

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

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

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

@@ -1,34 +1,23 @@
-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))
-		})
-	})] });
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAuth, useListSessions, useSession } from "@better-auth-ui/react";
+import { Card, cn, Skeleton } from "@heroui/react";
+import { ActiveSession } from "./active-session";
+/**
+ * Render a card listing all active sessions for the current user with revoke controls.
+ *
+ * Shows each session's browser, OS, IP address, and creation time. The current session is marked
+ * and navigates to sign-out on click, while other sessions can be revoked individually.
+ *
+ * @returns A JSX element containing the sessions card
+ */
+export function ActiveSessions({ className, variant, ...props }) {
+    const { authClient, localization } = useAuth();
+    const { data: session } = useSession(authClient);
+    const { data: sessions, isPending } = useListSessions(authClient);
+    const activeSessions = sessions &&
+        [...sessions].sort((a, b) => a.id === session?.session.id ? -1 : b.id === session?.session.id ? 1 : 0);
+    return (_jsxs("div", { children: [_jsx("h2", { className: cn("text-sm font-semibold mb-3"), children: localization.settings.activeSessions }), _jsx(Card, { className: cn(className), variant: variant, ...props, children: _jsx(Card.Content, { className: "gap-0", children: isPending ? (_jsx(SessionRowSkeleton, {})) : (activeSessions?.map((activeSession, index) => (_jsxs("div", { children: [index > 0 && (_jsx("div", { className: "border-b border-dashed -mx-4 my-4" })), _jsx(ActiveSession, { activeSession: activeSession })] }, activeSession.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" })]
-			})]
-		})
-	});
+function SessionRowSkeleton() {
+    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-32 rounded-lg" }), _jsx(Skeleton, { className: "h-3 w-24 rounded-lg" })] })] }) }));
 }
-//#endregion
-export { l as ActiveSessions };

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

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