@better-auth-ui/heroui 1.6.0 → 1.6.2

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

@@ -1,32 +1,51 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useAuth, useRevokeMultiSession, useSetActiveSession, useUser } from "@better-auth-ui/react";
-import { ArrowRightArrowLeft, ArrowRightFromSquare, Ellipsis } from "@gravity-ui/icons";
-import { Button, Dropdown, Spinner, toast } from "@heroui/react";
-import { UserView } from "../../user/user-view";
-/**
- * Render a single account row with user info and a dropdown for switch/sign-out actions.
- *
- * Shows the user's avatar and info. A three-dot menu provides options to
- * switch account (for non-active sessions) and sign out.
- *
- * @param deviceSession - The device session object containing session and user data
- * @returns A JSX element containing the account row
- */
-export function ManageAccount({ deviceSession, isPending }) {
-    const { localization } = useAuth();
-    const { data: user } = useUser();
-    const { mutate: setActiveSession, isPending: isSwitching } = useSetActiveSession({
-        onError: (error) => toast.danger(error.error?.message || error.message)
-    });
-    const { mutate: revokeSession, isPending: isRevoking } = useRevokeMultiSession({
-        onError: (error) => toast.danger(error.error?.message || error.message),
-        onSuccess: () => toast.success(localization.settings.revokeSessionSuccess)
-    });
-    const isActive = deviceSession?.session.userId === user?.id;
-    const isBusy = isSwitching || isRevoking;
-    return (_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx(UserView, { user: deviceSession?.user, isPending: isPending, size: "md" }), deviceSession && isActive && (_jsxs(Button, { className: "shrink-0", variant: "outline", size: "sm", onPress: () => revokeSession({ sessionToken: deviceSession.session.token }), isDisabled: isBusy, children: [isRevoking ? (_jsx(Spinner, { color: "current", size: "sm" })) : (_jsx(ArrowRightFromSquare, {})), localization.auth.signOut] })), deviceSession && !isActive && (_jsxs(Dropdown, { children: [_jsx(Button, { isIconOnly: true, variant: "ghost", className: "shrink-0", size: "sm", isDisabled: isBusy, children: _jsx(Ellipsis, {}) }), _jsx(Dropdown.Popover, { children: _jsxs(Dropdown.Menu, { children: [_jsxs(Dropdown.Item, { textValue: localization.auth.switchAccount, onAction: () => setActiveSession({
-                                        sessionToken: deviceSession.session.token
-                                    }), children: [_jsx(ArrowRightArrowLeft, { className: "text-muted" }), localization.auth.switchAccount] }), _jsxs(Dropdown.Item, { textValue: localization.auth.signOut, onAction: () => revokeSession({
-                                        sessionToken: deviceSession.session.token
-                                    }), children: [_jsx(ArrowRightFromSquare, { className: "text-muted" }), localization.auth.signOut] })] }) })] }))] }));
+import { UserView as e } from "../../user/user-view.js";
+import { useAuth as t, useRevokeMultiSession as n, useSetActiveSession as r, useUser as i } from "@better-auth-ui/react";
+import { Button as a, Dropdown as o, Spinner as s, toast as c } from "@heroui/react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { ArrowRightArrowLeft as d, ArrowRightFromSquare as f, Ellipsis as p } from "@gravity-ui/icons";
+//#region src/components/settings/account/manage-account.tsx
+function m({ deviceSession: m, isPending: h }) {
+	let { localization: g } = t(), { data: _ } = i(), { mutate: v, isPending: y } = r({ onError: (e) => c.danger(e.error?.message || e.message) }), { mutate: b, isPending: x } = n({
+		onError: (e) => c.danger(e.error?.message || e.message),
+		onSuccess: () => c.success(g.settings.revokeSessionSuccess)
+	}), S = m?.session.userId === _?.id, C = y || x;
+	return /* @__PURE__ */ u("div", {
+		className: "flex items-center justify-between gap-3",
+		children: [
+			/* @__PURE__ */ l(e, {
+				user: m?.user,
+				isPending: h,
+				size: "md"
+			}),
+			m && S && /* @__PURE__ */ u(a, {
+				className: "shrink-0",
+				variant: "outline",
+				size: "sm",
+				onPress: () => b({ sessionToken: m.session.token }),
+				isDisabled: C,
+				children: [x ? /* @__PURE__ */ l(s, {
+					color: "current",
+					size: "sm"
+				}) : /* @__PURE__ */ l(f, {}), g.auth.signOut]
+			}),
+			m && !S && /* @__PURE__ */ u(o, { children: [/* @__PURE__ */ l(a, {
+				isIconOnly: !0,
+				variant: "ghost",
+				className: "shrink-0",
+				size: "sm",
+				isDisabled: C,
+				children: /* @__PURE__ */ l(p, {})
+			}), /* @__PURE__ */ l(o.Popover, { children: /* @__PURE__ */ u(o.Menu, { children: [/* @__PURE__ */ u(o.Item, {
+				textValue: g.auth.switchAccount,
+				onAction: () => v({ sessionToken: m.session.token }),
+				children: [/* @__PURE__ */ l(d, { className: "text-muted" }), g.auth.switchAccount]
+			}), /* @__PURE__ */ u(o.Item, {
+				textValue: g.auth.signOut,
+				onAction: () => b({ sessionToken: m.session.token }),
+				children: [/* @__PURE__ */ l(f, { className: "text-muted" }), g.auth.signOut]
+			})] }) })] })
+		]
+	});
 }
+//#endregion
+export { m as ManageAccount };

package/dist/components/settings/account/manage-accounts.d.ts

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

package/dist/components/settings/account/manage-accounts.js

@@ -1,37 +1,33 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useAuth, useListDeviceSessions, useSession } from "@better-auth-ui/react";
-import { Card, cn, toast } from "@heroui/react";
-import { ManageAccount } from "./manage-account";
-/**
- * Render a card that lists and manages all device sessions for the current user.
- *
- * Shows each session with user information and actions to switch to or revoke a session.
- * When device session data is loading, a pending placeholder row is displayed.
- *
- * @returns A JSX element containing the accounts management card
- */
-export function ManageAccounts({ className, variant, ...props }) {
-    const { localization } = useAuth();
-    const { data: session } = useSession();
-    const { data: deviceSessions, isPending } = useListDeviceSessions({
-        throwOnError: (error) => {
-            if (error.error)
-                toast.danger(error.error.message);
-            return false;
-        }
-    });
-    const otherSessions = deviceSessions?.filter((deviceSession) => deviceSession.session.id !== session?.session.id);
-    const allRows = [
-        {
-            key: "current",
-            deviceSession: !isPending ? session : null,
-            isPending
-        },
-        ...(otherSessions?.map((deviceSession) => ({
-            key: deviceSession.session.id,
-            deviceSession,
-            isPending: false
-        })) ?? [])
-    ];
-    return (_jsxs("div", { children: [_jsx("h2", { className: cn("text-sm font-semibold mb-3"), children: localization.settings.manageAccounts }), _jsx(Card, { className: cn(className), variant: variant, ...props, children: _jsx(Card.Content, { className: "gap-0", children: allRows.map((row, index) => (_jsxs("div", { children: [index > 0 && (_jsx("div", { className: "border-b border-dashed -mx-4 md:-mx-6 my-4" })), _jsx(ManageAccount, { deviceSession: row.deviceSession, isPending: row.isPending })] }, row.key))) }) })] }));
+import { ManageAccount as e } from "./manage-account.js";
+import { useAuth as t, useListDeviceSessions as n, useSession as r } from "@better-auth-ui/react";
+import { Card as i, cn as a, toast as o } from "@heroui/react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/settings/account/manage-accounts.tsx
+function l({ className: l, variant: u, ...d }) {
+	let { localization: f } = t(), { data: p } = r(), { data: m, isPending: h } = n({ throwOnError: (e) => (e.error && o.danger(e.error.message), !1) }), g = m?.filter((e) => e.session.id !== p?.session.id), _ = [{
+		key: "current",
+		deviceSession: h ? null : p,
+		isPending: h
+	}, ...g?.map((e) => ({
+		key: e.session.id,
+		deviceSession: e,
+		isPending: !1
+	})) ?? []];
+	return /* @__PURE__ */ c("div", { children: [/* @__PURE__ */ s("h2", {
+		className: a("text-sm font-semibold mb-3"),
+		children: f.settings.manageAccounts
+	}), /* @__PURE__ */ s(i, {
+		className: a(l),
+		variant: u,
+		...d,
+		children: /* @__PURE__ */ s(i.Content, {
+			className: "gap-0",
+			children: _.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, {
+				deviceSession: t.deviceSession,
+				isPending: t.isPending
+			})] }, t.key))
+		})
+	})] });
 }
+//#endregion
+export { l as ManageAccounts };

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

@@ -1,11 +1,11 @@
-import { type CardProps } from "@heroui/react";
+import { CardProps } from '@heroui/react';
 export type UserProfileProps = {
     className?: string;
     variant?: CardProps["variant"];
 };
 /**
- * Render a profile card that lets the authenticated user view and update their display name and avatar.
+ * 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 an editable name form
+ * @returns A JSX element containing the user profile card with avatar upload and editable form fields
  */
 export declare function UserProfile({ className, variant, ...props }: UserProfileProps & CardProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,23 +1,106 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useAuth, useSession, useUpdateUser } from "@better-auth-ui/react";
-import { Button, Card, cn, FieldError, Fieldset, Form, Input, Label, Skeleton, Spinner, TextField, toast } from "@heroui/react";
-import { ChangeAvatar } from "./change-avatar";
-/**
- * Render a profile card that lets the authenticated user view and update their display name and avatar.
- *
- * @returns A JSX element containing the user profile card with avatar upload and an editable name form
- */
-export function UserProfile({ className, variant, ...props }) {
-    const { localization } = useAuth();
-    const { data: session } = useSession();
-    const { mutate: updateUser, isPending } = useUpdateUser({
-        onError: (error) => toast.danger(error.error?.message || error.message),
-        onSuccess: () => toast.success(localization.settings.profileUpdatedSuccess)
-    });
-    function handleSubmit(e) {
-        e.preventDefault();
-        const formData = new FormData(e.currentTarget);
-        updateUser({ name: formData.get("name") });
-    }
-    return (_jsxs("div", { children: [_jsx("h2", { className: cn("text-sm font-semibold mb-3"), children: localization.settings.profile }), _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(ChangeAvatar, {}), _jsx(Fieldset.Group, { children: _jsxs(TextField, { name: "name", defaultValue: session?.user.name, isDisabled: isPending || !session, children: [_jsx(Label, { children: localization.auth.name }), session ? (_jsx(Input, { autoComplete: "name", placeholder: localization.auth.name, variant: variant === "transparent" ? "primary" : "secondary" })) : (_jsx(Skeleton, { className: "h-10 md:h-9 w-full rounded-xl" })), _jsx(FieldError, {})] }, session?.user?.name) }), _jsx(Fieldset.Actions, { children: _jsxs(Button, { type: "submit", isPending: isPending, isDisabled: !session, size: "sm", children: [isPending && _jsx(Spinner, { color: "current", size: "sm" }), localization.settings.saveChanges] }) })] }) }) }) })] }));
+import { ChangeAvatar as e } from "./change-avatar.js";
+import { useAuth as t, useIsUsernameAvailable as n, useSession as r, useUpdateUser as i } from "@better-auth-ui/react";
+import { Button as a, Card as o, FieldError as s, Fieldset as c, Form as l, Input as u, InputGroup as d, Label as f, Skeleton as p, Spinner as m, TextField as h, cn as g, toast as _ } from "@heroui/react";
+import { jsx as v, jsxs as y } from "react/jsx-runtime";
+import { useEffect as b, useState as x } from "react";
+import { Check as S, Xmark as C } from "@gravity-ui/icons";
+import { useDebouncer as w } from "@tanstack/react-pacer";
+//#region src/components/settings/account/user-profile.tsx
+function T({ className: T, variant: E, ...D }) {
+	let { localization: O, username: k } = t(), { data: A } = r(), j = (k?.displayUsername ? A?.user?.displayUsername : A?.user?.username) || "", [M, N] = x(j);
+	b(() => {
+		N(j);
+	}, [j]);
+	let { mutate: P, data: F, error: I, reset: L } = n(), R = w((e) => {
+		if (!e.trim() || e.trim() === j) {
+			L();
+			return;
+		}
+		P({ username: e.trim() });
+	}, { wait: 500 });
+	function z(e) {
+		N(e), L(), k?.isUsernameAvailable && R.maybeExecute(e);
+	}
+	let { mutate: B, isPending: V } = i({
+		onError: (e) => _.danger(e.error?.message || e.message),
+		onSuccess: () => _.success(O.settings.profileUpdatedSuccess)
+	});
+	function H(e) {
+		e.preventDefault(), B({
+			name: new FormData(e.currentTarget).get("name"),
+			...k?.enabled ? {
+				username: M.trim(),
+				...k.displayUsername ? { displayUsername: M.trim() } : {}
+			} : {}
+		});
+	}
+	return /* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("h2", {
+		className: g("text-sm font-semibold mb-3"),
+		children: O.settings.profile
+	}), /* @__PURE__ */ v(o, {
+		className: g("p-4 gap-4", T),
+		variant: E,
+		...D,
+		children: /* @__PURE__ */ v(o.Content, { children: /* @__PURE__ */ v(l, {
+			onSubmit: H,
+			children: /* @__PURE__ */ y(c, {
+				className: "w-full gap-4",
+				children: [
+					/* @__PURE__ */ v(e, {}),
+					/* @__PURE__ */ y(c.Group, { children: [k?.enabled && /* @__PURE__ */ y(h, {
+						type: "text",
+						autoComplete: "username",
+						minLength: k.minUsernameLength,
+						maxLength: k.maxUsernameLength,
+						isDisabled: V || !A,
+						value: M,
+						onChange: z,
+						isInvalid: !!I || F && !F.available,
+						children: [
+							/* @__PURE__ */ v(f, { children: O.auth.username }),
+							A ? /* @__PURE__ */ y(d, {
+								variant: E === "transparent" ? "primary" : "secondary",
+								children: [/* @__PURE__ */ v(d.Input, {
+									placeholder: O.auth.usernamePlaceholder,
+									name: "username"
+								}), k.isUsernameAvailable && M.trim() && M.trim() !== j && /* @__PURE__ */ v(d.Suffix, {
+									className: "px-2",
+									children: F?.available ? /* @__PURE__ */ v(S, { className: "text-success" }) : I || F?.available === !1 ? /* @__PURE__ */ v(C, { className: "text-danger" }) : /* @__PURE__ */ v(m, {
+										size: "sm",
+										color: "current"
+									})
+								})]
+							}) : /* @__PURE__ */ v(p, { className: "h-10 md:h-9 w-full rounded-xl" }),
+							/* @__PURE__ */ v(s, { children: I?.error?.message || I?.message || F?.available === !1 && O.auth.usernameTaken })
+						]
+					}), /* @__PURE__ */ y(h, {
+						name: "name",
+						defaultValue: A?.user.name,
+						isDisabled: V || !A,
+						children: [
+							/* @__PURE__ */ v(f, { children: O.auth.name }),
+							A ? /* @__PURE__ */ v(u, {
+								autoComplete: "name",
+								placeholder: O.auth.name,
+								variant: E === "transparent" ? "primary" : "secondary"
+							}) : /* @__PURE__ */ v(p, { className: "h-10 md:h-9 w-full rounded-xl" }),
+							/* @__PURE__ */ v(s, {})
+						]
+					}, A?.user?.name)] }),
+					/* @__PURE__ */ v(c.Actions, { children: /* @__PURE__ */ y(a, {
+						type: "submit",
+						isPending: V,
+						isDisabled: !A,
+						size: "sm",
+						children: [V && /* @__PURE__ */ v(m, {
+							color: "current",
+							size: "sm"
+						}), O.settings.saveChanges]
+					}) })
+				]
+			})
+		}) })
+	})] });
 }
+//#endregion
+export { T as UserProfile };

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

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

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

@@ -1,53 +1,62 @@
-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");
+import { useAuth as e, useRevokeSession as t, useSession as n } from "@better-auth-ui/react";
+import { Button as r, Chip as i, Spinner as a, toast as o } from "@heroui/react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { ArrowRightFromSquare as l, Display as u, Smartphone as d, Xmark as f } from "@gravity-ui/icons";
+import p from "bowser";
+//#region src/components/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");
 }
-/**
- * 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 { basePaths, localization, viewPaths, navigate } = useAuth();
-    const { data: session } = useSession({ refetchOnMount: false });
-    const { mutate: revokeSession, isPending: isRevoking } = useRevokeSession({
-        onError: (error) => toast.danger(error.error?.message || error.message),
-        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] })] }));
+function h({ activeSession: h }) {
+	let { basePaths: g, localization: _, viewPaths: v, navigate: y } = e(), { data: b } = n({ refetchOnMount: !1 }), { mutate: x, isPending: S } = t({
+		onError: (e) => o.danger(e.error?.message || e.message),
+		onSuccess: () => o.success(_.settings.revokeSessionSuccess)
+	}), C = h.token === b?.session.token, w = p.parse(h.userAgent || "");
+	return /* @__PURE__ */ c("div", {
+		className: "flex items-center gap-3",
+		children: [
+			/* @__PURE__ */ s("div", {
+				className: "flex size-10 shrink-0 items-center justify-center rounded-xl bg-surface-secondary",
+				children: w.platform.type === "mobile" || w.platform.type === "tablet" ? /* @__PURE__ */ s(d, { className: "size-4.5" }) : /* @__PURE__ */ s(u, { className: "size-4.5" })
+			}),
+			/* @__PURE__ */ c("div", {
+				className: "flex flex-col min-w-0",
+				children: [/* @__PURE__ */ c("span", {
+					className: "text-sm font-medium truncate",
+					children: [w.browser.name || "Unknown Browser", w.os.name ? `, ${w.os.name}` : ""]
+				}), C ? /* @__PURE__ */ s(i, {
+					color: "accent",
+					size: "sm",
+					children: _.settings.currentSession
+				}) : h.createdAt && /* @__PURE__ */ s("span", {
+					className: "text-xs text-muted capitalize",
+					children: m(h.createdAt)
+				})]
+			}),
+			/* @__PURE__ */ c(r, {
+				className: "ml-auto shrink-0",
+				variant: "outline",
+				size: "sm",
+				onPress: () => C ? y({ to: `${g.auth}/${v.auth.signOut}` }) : x(h),
+				isPending: S,
+				"aria-label": C ? _.auth.signOut : _.settings.revokeSession,
+				children: [S ? /* @__PURE__ */ s(a, {
+					color: "current",
+					size: "sm"
+				}) : s(C ? l : f, {}), C ? _.auth.signOut : _.settings.revoke]
+			})
+		]
+	});
 }
+//#endregion
+export { h as ActiveSession };

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

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

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

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

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

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