@better-auth-ui/heroui 1.6.0

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

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

package/dist/components/settings/account/theme-selector.d.ts

@@ -0,0 +1,16 @@
+import type { AnyAuthConfig } from "@better-auth-ui/react";
+export type ThemeSelectorProps = AnyAuthConfig & {
+    className?: string;
+};
+/**
+ * Renders a theme selector card with visual theme previews.
+ *
+ * Displays a card containing radio buttons for selecting between system, light,
+ * and dark themes. Each option shows a visual preview of the theme. Only renders
+ * if theme settings are configured (theme, setTheme, and themes are provided).
+ *
+ * @param className - Optional additional CSS class names for the card container.
+ * @param config - Auth-related props forwarded to access theme settings.
+ * @returns A JSX element containing the theme selector card, or null if theme settings are not configured.
+ */
+export declare function ThemeSelector({ className, ...config }: ThemeSelectorProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/settings/account/theme-selector.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Display, Moon, Sun } from "@gravity-ui/icons";
+import { Card, cn, Label, Radio, RadioGroup, useIsHydrated } from "@heroui/react";
+import { useAuth } from "../../../hooks/use-auth";
+function ThemePreviewSystem() {
+    return (_jsxs("svg", { "aria-hidden": "true", className: "w-full h-auto", fill: "none", viewBox: "0 0 240 117", xmlns: "http://www.w3.org/2000/svg", children: [_jsxs("defs", { children: [_jsx("clipPath", { id: "systemDiagonalLight", children: _jsx("polygon", { points: "0,0 240,0 0,117" }) }), _jsx("clipPath", { id: "systemDiagonalDark", children: _jsx("polygon", { points: "240,0 240,117 0,117" }) })] }), _jsxs("g", { clipPath: "url(#systemDiagonalLight)", children: [_jsx("path", { d: "M12 0.5H228C234.351 0.5 239.5 5.64873 239.5 12V105C239.5 111.351 234.351 116.5 228 116.5H12C5.64873 116.5 0.5 111.351 0.5 105V12C0.5 5.64873 5.64873 0.5 12 0.5Z", fill: "white" }), _jsx("path", { d: "M12 0.5H228C234.351 0.5 239.5 5.64873 239.5 12V105C239.5 111.351 234.351 116.5 228 116.5H12C5.64873 116.5 0.5 111.351 0.5 105V12C0.5 5.64873 5.64873 0.5 12 0.5Z", stroke: "#E4E4E7" }), _jsx("path", { d: "M32 48.5C32 45.4624 34.4624 43 37.5 43H67.5C70.5376 43 73 45.4624 73 48.5C73 51.5376 70.5376 54 67.5 54H37.5C34.4624 54 32 51.5376 32 48.5Z", fill: "#F4F4F5" }), _jsx("path", { d: "M17 105C17 101.686 19.6863 99 23 99H67C70.3137 99 73 101.686 73 105C73 108.314 70.3137 111 67 111H23C19.6863 111 17 108.314 17 105Z", fill: "#F4F4F5" }), _jsx("path", { d: "M88 25.5C88 22.4624 90.4624 20 93.5 20H207.5C210.538 20 213 22.4624 213 25.5C213 28.5376 210.538 31 207.5 31H93.5C90.4624 31 88 28.5376 88 25.5Z", fill: "#E4E4E7" }), _jsx("path", { d: "M88 105C88 101.686 90.6863 99 94 99H189C192.314 99 195 101.686 195 105C195 108.314 192.314 111 189 111H94C90.6863 111 88 108.314 88 105Z", fill: "#F4F4F5" }), _jsx("path", { d: "M88 51C88 46.5817 91.5817 43 96 43H221C225.418 43 229 46.5817 229 51V85C229 89.4183 225.418 93 221 93H96C91.5817 93 88 89.4183 88 85V51Z", fill: "#F4F4F5" }), _jsx("path", { d: "M17 48.5C17 45.4624 19.4624 43 22.5 43C25.5376 43 28 45.4624 28 48.5C28 51.5376 25.5376 54 22.5 54C19.4624 54 17 51.5376 17 48.5Z", fill: "#F4F4F5" }), _jsx("path", { d: "M17 66.5C17 63.4624 19.4624 61 22.5 61C25.5376 61 28 63.4624 28 66.5C28 69.5376 25.5376 72 22.5 72C19.4624 72 17 69.5376 17 66.5Z", fill: "#F4F4F5" }), _jsx("path", { d: "M17 86.5C17 83.4624 19.4624 81 22.5 81C25.5376 81 28 83.4624 28 86.5V87.5C28 90.5376 25.5376 93 22.5 93C19.4624 93 17 90.5376 17 87.5V86.5Z", fill: "#F4F4F5" }), _jsx("path", { d: "M32 25.5C32 22.4624 34.4624 20 37.5 20H67.5C70.5376 20 73 22.4624 73 25.5C73 28.5376 70.5376 31 67.5 31H37.5C34.4624 31 32 28.5376 32 25.5Z", fill: "#E4E4E7" }), _jsx("path", { d: "M32 66.5C32 63.4624 34.4624 61 37.5 61H67.5C70.5376 61 73 63.4624 73 66.5C73 69.5376 70.5376 72 67.5 72H37.5C34.4624 72 32 69.5376 32 66.5Z", fill: "#F4F4F5" }), _jsx("path", { d: "M32 87C32 83.6863 34.6863 81 38 81H67C70.3137 81 73 83.6863 73 87C73 90.3137 70.3137 93 67 93H38C34.6863 93 32 90.3137 32 87Z", fill: "#F4F4F5" }), _jsx("circle", { cx: "22.5", cy: "25.5", fill: "#E4E4E7", r: "5.5" })] }), _jsxs("g", { clipPath: "url(#systemDiagonalDark)", children: [_jsx("path", { d: "M12 0.5H228C234.351 0.5 239.5 5.64873 239.5 12V105C239.5 111.351 234.351 116.5 228 116.5H12C5.64873 116.5 0.5 111.351 0.5 105V12C0.5 5.64873 5.64873 0.5 12 0.5Z", fill: "black" }), _jsx("path", { d: "M12 0.5H228C234.351 0.5 239.5 5.64873 239.5 12V105C239.5 111.351 234.351 116.5 228 116.5H12C5.64873 116.5 0.5 111.351 0.5 105V12C0.5 5.64873 5.64873 0.5 12 0.5Z", stroke: "#3F3F46" }), _jsx("path", { d: "M32 48.5C32 45.4624 34.4624 43 37.5 43H67.5C70.5376 43 73 45.4624 73 48.5C73 51.5376 70.5376 54 67.5 54H37.5C34.4624 54 32 51.5376 32 48.5Z", fill: "#27272A" }), _jsx("path", { d: "M17 105C17 101.686 19.6863 99 23 99H67C70.3137 99 73 101.686 73 105C73 108.314 70.3137 111 67 111H23C19.6863 111 17 108.314 17 105Z", fill: "#27272A" }), _jsx("path", { d: "M88 25.5C88 22.4624 90.4624 20 93.5 20H207.5C210.538 20 213 22.4624 213 25.5C213 28.5376 210.538 31 207.5 31H93.5C90.4624 31 88 28.5376 88 25.5Z", fill: "#3F3F46" }), _jsx("path", { d: "M88 105C88 101.686 90.6863 99 94 99H189C192.314 99 195 101.686 195 105C195 108.314 192.314 111 189 111H94C90.6863 111 88 108.314 88 105Z", fill: "#27272A" }), _jsx("path", { d: "M88 51C88 46.5817 91.5817 43 96 43H221C225.418 43 229 46.5817 229 51V85C229 89.4183 225.418 93 221 93H96C91.5817 93 88 89.4183 88 85V51Z", fill: "#27272A" }), _jsx("path", { d: "M17 48.5C17 45.4624 19.4624 43 22.5 43C25.5376 43 28 45.4624 28 48.5C28 51.5376 25.5376 54 22.5 54C19.4624 54 17 51.5376 17 48.5Z", fill: "#27272A" }), _jsx("path", { d: "M17 66.5C17 63.4624 19.4624 61 22.5 61C25.5376 61 28 63.4624 28 66.5C28 69.5376 25.5376 72 22.5 72C19.4624 72 17 69.5376 17 66.5Z", fill: "#27272A" }), _jsx("path", { d: "M17 86.5C17 83.4624 19.4624 81 22.5 81C25.5376 81 28 83.4624 28 86.5V87.5C28 90.5376 25.5376 93 22.5 93C19.4624 93 17 90.5376 17 87.5V86.5Z", fill: "#27272A" }), _jsx("path", { d: "M32 25.5C32 22.4624 34.4624 20 37.5 20H67.5C70.5376 20 73 22.4624 73 25.5C73 28.5376 70.5376 31 67.5 31H37.5C34.4624 31 32 28.5376 32 25.5Z", fill: "#3F3F46" }), _jsx("path", { d: "M32 66.5C32 63.4624 34.4624 61 37.5 61H67.5C70.5376 61 73 63.4624 73 66.5C73 69.5376 70.5376 72 67.5 72H37.5C34.4624 72 32 69.5376 32 66.5Z", fill: "#27272A" }), _jsx("path", { d: "M32 87C32 83.6863 34.6863 81 38 81H67C70.3137 81 73 83.6863 73 87C73 90.3137 70.3137 93 67 93H38C34.6863 93 32 90.3137 32 87Z", fill: "#27272A" }), _jsx("circle", { cx: "22.5", cy: "25.5", fill: "#3F3F46", r: "5.5" })] })] }));
+}
+function ThemePreviewLight() {
+    return (_jsxs("svg", { "aria-hidden": "true", className: "w-full h-auto", fill: "none", viewBox: "0 0 240 117", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M12 0.5H228C234.351 0.5 239.5 5.64873 239.5 12V105C239.5 111.351 234.351 116.5 228 116.5H12C5.64873 116.5 0.5 111.351 0.5 105V12C0.5 5.64873 5.64873 0.5 12 0.5Z", fill: "white" }), _jsx("path", { d: "M12 0.5H228C234.351 0.5 239.5 5.64873 239.5 12V105C239.5 111.351 234.351 116.5 228 116.5H12C5.64873 116.5 0.5 111.351 0.5 105V12C0.5 5.64873 5.64873 0.5 12 0.5Z", stroke: "#E4E4E7" }), _jsx("path", { d: "M32 48.5C32 45.4624 34.4624 43 37.5 43H67.5C70.5376 43 73 45.4624 73 48.5C73 51.5376 70.5376 54 67.5 54H37.5C34.4624 54 32 51.5376 32 48.5Z", fill: "#F4F4F5" }), _jsx("path", { d: "M17 105C17 101.686 19.6863 99 23 99H67C70.3137 99 73 101.686 73 105C73 108.314 70.3137 111 67 111H23C19.6863 111 17 108.314 17 105Z", fill: "#F4F4F5" }), _jsx("path", { d: "M88 25.5C88 22.4624 90.4624 20 93.5 20H207.5C210.538 20 213 22.4624 213 25.5C213 28.5376 210.538 31 207.5 31H93.5C90.4624 31 88 28.5376 88 25.5Z", fill: "#E4E4E7" }), _jsx("path", { d: "M88 105C88 101.686 90.6863 99 94 99H189C192.314 99 195 101.686 195 105C195 108.314 192.314 111 189 111H94C90.6863 111 88 108.314 88 105Z", fill: "#F4F4F5" }), _jsx("path", { d: "M88 51C88 46.5817 91.5817 43 96 43H221C225.418 43 229 46.5817 229 51V85C229 89.4183 225.418 93 221 93H96C91.5817 93 88 89.4183 88 85V51Z", fill: "#F4F4F5" }), _jsx("path", { d: "M17 48.5C17 45.4624 19.4624 43 22.5 43C25.5376 43 28 45.4624 28 48.5C28 51.5376 25.5376 54 22.5 54C19.4624 54 17 51.5376 17 48.5Z", fill: "#F4F4F5" }), _jsx("path", { d: "M17 66.5C17 63.4624 19.4624 61 22.5 61C25.5376 61 28 63.4624 28 66.5C28 69.5376 25.5376 72 22.5 72C19.4624 72 17 69.5376 17 66.5Z", fill: "#F4F4F5" }), _jsx("path", { d: "M17 86.5C17 83.4624 19.4624 81 22.5 81C25.5376 81 28 83.4624 28 86.5V87.5C28 90.5376 25.5376 93 22.5 93C19.4624 93 17 90.5376 17 87.5V86.5Z", fill: "#F4F4F5" }), _jsx("path", { d: "M32 25.5C32 22.4624 34.4624 20 37.5 20H67.5C70.5376 20 73 22.4624 73 25.5C73 28.5376 70.5376 31 67.5 31H37.5C34.4624 31 32 28.5376 32 25.5Z", fill: "#E4E4E7" }), _jsx("path", { d: "M32 66.5C32 63.4624 34.4624 61 37.5 61H67.5C70.5376 61 73 63.4624 73 66.5C73 69.5376 70.5376 72 67.5 72H37.5C34.4624 72 32 69.5376 32 66.5Z", fill: "#F4F4F5" }), _jsx("path", { d: "M32 87C32 83.6863 34.6863 81 38 81H67C70.3137 81 73 83.6863 73 87C73 90.3137 70.3137 93 67 93H38C34.6863 93 32 90.3137 32 87Z", fill: "#F4F4F5" }), _jsx("circle", { cx: "22.5", cy: "25.5", fill: "#E4E4E7", r: "5.5" })] }));
+}
+function ThemePreviewDark() {
+    return (_jsxs("svg", { "aria-hidden": "true", className: "w-full h-auto", fill: "none", viewBox: "0 0 240 117", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M12 0.5H228C234.351 0.5 239.5 5.64873 239.5 12V105C239.5 111.351 234.351 116.5 228 116.5H12C5.64873 116.5 0.5 111.351 0.5 105V12C0.5 5.64873 5.64873 0.5 12 0.5Z", fill: "black" }), _jsx("path", { d: "M12 0.5H228C234.351 0.5 239.5 5.64873 239.5 12V105C239.5 111.351 234.351 116.5 228 116.5H12C5.64873 116.5 0.5 111.351 0.5 105V12C0.5 5.64873 5.64873 0.5 12 0.5Z", stroke: "#3F3F46" }), _jsx("path", { d: "M32 48.5C32 45.4624 34.4624 43 37.5 43H67.5C70.5376 43 73 45.4624 73 48.5C73 51.5376 70.5376 54 67.5 54H37.5C34.4624 54 32 51.5376 32 48.5Z", fill: "#27272A" }), _jsx("path", { d: "M17 105C17 101.686 19.6863 99 23 99H67C70.3137 99 73 101.686 73 105C73 108.314 70.3137 111 67 111H23C19.6863 111 17 108.314 17 105Z", fill: "#27272A" }), _jsx("path", { d: "M88 25.5C88 22.4624 90.4624 20 93.5 20H207.5C210.538 20 213 22.4624 213 25.5C213 28.5376 210.538 31 207.5 31H93.5C90.4624 31 88 28.5376 88 25.5Z", fill: "#3F3F46" }), _jsx("path", { d: "M88 105C88 101.686 90.6863 99 94 99H189C192.314 99 195 101.686 195 105C195 108.314 192.314 111 189 111H94C90.6863 111 88 108.314 88 105Z", fill: "#27272A" }), _jsx("path", { d: "M88 51C88 46.5817 91.5817 43 96 43H221C225.418 43 229 46.5817 229 51V85C229 89.4183 225.418 93 221 93H96C91.5817 93 88 89.4183 88 85V51Z", fill: "#27272A" }), _jsx("path", { d: "M17 48.5C17 45.4624 19.4624 43 22.5 43C25.5376 43 28 45.4624 28 48.5C28 51.5376 25.5376 54 22.5 54C19.4624 54 17 51.5376 17 48.5Z", fill: "#27272A" }), _jsx("path", { d: "M17 66.5C17 63.4624 19.4624 61 22.5 61C25.5376 61 28 63.4624 28 66.5C28 69.5376 25.5376 72 22.5 72C19.4624 72 17 69.5376 17 66.5Z", fill: "#27272A" }), _jsx("path", { d: "M17 86.5C17 83.4624 19.4624 81 22.5 81C25.5376 81 28 83.4624 28 86.5V87.5C28 90.5376 25.5376 93 22.5 93C19.4624 93 17 90.5376 17 87.5V86.5Z", fill: "#27272A" }), _jsx("path", { d: "M32 25.5C32 22.4624 34.4624 20 37.5 20H67.5C70.5376 20 73 22.4624 73 25.5C73 28.5376 70.5376 31 67.5 31H37.5C34.4624 31 32 28.5376 32 25.5Z", fill: "#3F3F46" }), _jsx("path", { d: "M32 66.5C32 63.4624 34.4624 61 37.5 61H67.5C70.5376 61 73 63.4624 73 66.5C73 69.5376 70.5376 72 67.5 72H37.5C34.4624 72 32 69.5376 32 66.5Z", fill: "#27272A" }), _jsx("path", { d: "M32 87C32 83.6863 34.6863 81 38 81H67C70.3137 81 73 83.6863 73 87C73 90.3137 70.3137 93 67 93H38C34.6863 93 32 90.3137 32 87Z", fill: "#27272A" }), _jsx("circle", { cx: "22.5", cy: "25.5", fill: "#3F3F46", r: "5.5" })] }));
+}
+/**
+ * Renders a theme selector card with visual theme previews.
+ *
+ * Displays a card containing radio buttons for selecting between system, light,
+ * and dark themes. Each option shows a visual preview of the theme. Only renders
+ * if theme settings are configured (theme, setTheme, and themes are provided).
+ *
+ * @param className - Optional additional CSS class names for the card container.
+ * @param config - Auth-related props forwarded to access theme settings.
+ * @returns A JSX element containing the theme selector card, or null if theme settings are not configured.
+ */
+export function ThemeSelector({ className, ...config }) {
+    const context = useAuth(config);
+    const { localization, settings: { theme, setTheme, themes } } = context;
+    const hydrated = useIsHydrated();
+    if (!setTheme || !themes?.length) {
+        return null;
+    }
+    return (_jsxs(Card, { className: cn("p-4 md:p-6 gap-4 md:gap-6", className), children: [_jsx(Card.Header, { children: _jsx(Card.Title, { className: "text-xl", children: localization.settings.appearance }) }), _jsx(Card.Content, { children: _jsxs(RadioGroup, { isOnSurface: true, value: hydrated ? theme : undefined, onChange: setTheme, isDisabled: !hydrated || !theme, children: [_jsx(Label, { className: "mb-2", children: localization.settings.theme }), _jsxs("div", { className: "grid gap-4 md:grid-cols-2 lg:grid-cols-3", children: [themes.includes("system") && (_jsxs(Radio, { value: "system", className: cn("mt-0 group relative flex-col gap-4 rounded-xl border border-default px-5 py-4 hover:bg-default/20 transition-all data-[selected=true]:border-accent data-[selected=true]:bg-accent/10", "data-[focus-visible=true]:border-accent data-[focus-visible=true]:bg-accent/10"), children: [_jsx(Radio.Control, { className: "absolute top-3 right-3 size-5", children: _jsx(Radio.Indicator, {}) }), _jsxs(Radio.Content, { className: "flex flex-col gap-3", children: [_jsxs(Label, { className: "cursor-pointer font-medium flex gap-2 items-center", children: [_jsx(Display, { className: "text-muted" }), localization.settings.system] }), _jsx(ThemePreviewSystem, {})] })] })), themes.includes("light") && (_jsxs(Radio, { value: "light", className: cn("mt-0 group relative flex-col gap-4 rounded-xl border border-default px-5 py-4 hover:bg-default/20 transition-all data-[selected=true]:border-accent data-[selected=true]:bg-accent/10", "data-[focus-visible=true]:border-accent data-[focus-visible=true]:bg-accent/10"), children: [_jsx(Radio.Control, { className: "absolute top-3 right-3 size-5", children: _jsx(Radio.Indicator, {}) }), _jsxs(Radio.Content, { className: "flex flex-col gap-3", children: [_jsxs(Label, { className: "cursor-pointer font-medium flex gap-2 items-center", children: [_jsx(Sun, { className: "text-muted" }), localization.settings.light] }), _jsx(ThemePreviewLight, {})] })] })), themes.includes("dark") && (_jsxs(Radio, { value: "dark", className: cn("mt-0 group relative flex-col gap-4 rounded-xl border border-default px-5 py-4 hover:bg-default/20 transition-all data-[selected=true]:border-accent data-[selected=true]:bg-accent/10", "data-[focus-visible=true]:border-accent data-[focus-visible=true]:bg-accent/10"), children: [_jsx(Radio.Control, { className: "absolute top-3 right-3 size-5", children: _jsx(Radio.Indicator, {}) }), _jsxs(Radio.Content, { className: "flex flex-col gap-3", children: [_jsxs(Label, { className: "cursor-pointer font-medium flex gap-2 items-center", children: [_jsx(Moon, { className: "text-muted" }), localization.settings.dark] }), _jsx(ThemePreviewDark, {})] })] }))] })] }) })] }));
+}

package/dist/components/settings/account/theme-settings.d.ts

@@ -0,0 +1,16 @@
+import type { AnyAuthConfig } from "@better-auth-ui/react";
+export type ThemeSettingsProps = AnyAuthConfig & {
+    className?: string;
+};
+/**
+ * Renders the theme settings card with theme selection options.
+ *
+ * Displays a card containing radio buttons for selecting between system, light,
+ * and dark themes. Each option shows a visual preview of the theme. Only renders
+ * if theme settings are configured (theme, setTheme, and themes are provided).
+ *
+ * @param className - Optional additional CSS class names for the card container.
+ * @param config - Auth-related props forwarded to access theme settings.
+ * @returns A JSX element containing the theme settings card, or null if theme settings are not configured.
+ */
+export declare function ThemeSettings({ className, ...config }: ThemeSettingsProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card, cn, Label, Radio, RadioGroup } from "@heroui/react";
+import { useAuth } from "../../../hooks/use-auth";
+function ThemePreviewSystem() {
+    return (_jsxs("svg", { "aria-hidden": "true", className: "w-full h-full", fill: "none", viewBox: "0 0 240 117", xmlns: "http://www.w3.org/2000/svg", children: [_jsxs("defs", { children: [_jsx("clipPath", { id: "systemDiagonalLight", children: _jsx("polygon", { points: "0,0 240,0 0,117" }) }), _jsx("clipPath", { id: "systemDiagonalDark", children: _jsx("polygon", { points: "240,0 240,117 0,117" }) })] }), _jsxs("g", { clipPath: "url(#systemDiagonalLight)", children: [_jsx("path", { d: "M12 0.5H228C234.351 0.5 239.5 5.64873 239.5 12V116.5H0.5V12C0.5 5.64873 5.64873 0.5 12 0.5Z", fill: "white" }), _jsx("path", { d: "M12 0.5H228C234.351 0.5 239.5 5.64873 239.5 12V116.5H0.5V12C0.5 5.64873 5.64873 0.5 12 0.5Z", stroke: "#E4E4E7" }), _jsx("path", { d: "M32 48.5C32 45.4624 34.4624 43 37.5 43H67.5C70.5376 43 73 45.4624 73 48.5C73 51.5376 70.5376 54 67.5 54H37.5C34.4624 54 32 51.5376 32 48.5Z", fill: "#F4F4F5" }), _jsx("path", { d: "M17 105C17 101.686 19.6863 99 23 99H67C70.3137 99 73 101.686 73 105C73 108.314 70.3137 111 67 111H23C19.6863 111 17 108.314 17 105Z", fill: "#F4F4F5" }), _jsx("path", { d: "M88 25.5C88 22.4624 90.4624 20 93.5 20H207.5C210.538 20 213 22.4624 213 25.5C213 28.5376 210.538 31 207.5 31H93.5C90.4624 31 88 28.5376 88 25.5Z", fill: "#E4E4E7" }), _jsx("path", { d: "M88 105C88 101.686 90.6863 99 94 99H189C192.314 99 195 101.686 195 105C195 108.314 192.314 111 189 111H94C90.6863 111 88 108.314 88 105Z", fill: "#F4F4F5" }), _jsx("path", { d: "M88 51C88 46.5817 91.5817 43 96 43H221C225.418 43 229 46.5817 229 51V85C229 89.4183 225.418 93 221 93H96C91.5817 93 88 89.4183 88 85V51Z", fill: "#F4F4F5" }), _jsx("path", { d: "M17 48.5C17 45.4624 19.4624 43 22.5 43C25.5376 43 28 45.4624 28 48.5C28 51.5376 25.5376 54 22.5 54C19.4624 54 17 51.5376 17 48.5Z", fill: "#F4F4F5" }), _jsx("path", { d: "M17 66.5C17 63.4624 19.4624 61 22.5 61C25.5376 61 28 63.4624 28 66.5C28 69.5376 25.5376 72 22.5 72C19.4624 72 17 69.5376 17 66.5Z", fill: "#F4F4F5" }), _jsx("path", { d: "M17 86.5C17 83.4624 19.4624 81 22.5 81C25.5376 81 28 83.4624 28 86.5V87.5C28 90.5376 25.5376 93 22.5 93C19.4624 93 17 90.5376 17 87.5V86.5Z", fill: "#F4F4F5" }), _jsx("path", { d: "M32 25.5C32 22.4624 34.4624 20 37.5 20H67.5C70.5376 20 73 22.4624 73 25.5C73 28.5376 70.5376 31 67.5 31H37.5C34.4624 31 32 28.5376 32 25.5Z", fill: "#E4E4E7" }), _jsx("path", { d: "M32 66.5C32 63.4624 34.4624 61 37.5 61H67.5C70.5376 61 73 63.4624 73 66.5C73 69.5376 70.5376 72 67.5 72H37.5C34.4624 72 32 69.5376 32 66.5Z", fill: "#F4F4F5" }), _jsx("path", { d: "M32 87C32 83.6863 34.6863 81 38 81H67C70.3137 81 73 83.6863 73 87C73 90.3137 70.3137 93 67 93H38C34.6863 93 32 90.3137 32 87Z", fill: "#F4F4F5" }), _jsx("circle", { cx: "22.5", cy: "25.5", fill: "#E4E4E7", r: "5.5" })] }), _jsxs("g", { clipPath: "url(#systemDiagonalDark)", children: [_jsx("path", { d: "M12 0.5H228C234.351 0.5 239.5 5.64873 239.5 12V116.5H0.5V12C0.5 5.64873 5.64873 0.5 12 0.5Z", fill: "black" }), _jsx("path", { d: "M12 0.5H228C234.351 0.5 239.5 5.64873 239.5 12V116.5H0.5V12C0.5 5.64873 5.64873 0.5 12 0.5Z", stroke: "#3F3F46" }), _jsx("path", { d: "M32 48.5C32 45.4624 34.4624 43 37.5 43H67.5C70.5376 43 73 45.4624 73 48.5C73 51.5376 70.5376 54 67.5 54H37.5C34.4624 54 32 51.5376 32 48.5Z", fill: "#27272A" }), _jsx("path", { d: "M17 105C17 101.686 19.6863 99 23 99H67C70.3137 99 73 101.686 73 105C73 108.314 70.3137 111 67 111H23C19.6863 111 17 108.314 17 105Z", fill: "#27272A" }), _jsx("path", { d: "M88 25.5C88 22.4624 90.4624 20 93.5 20H207.5C210.538 20 213 22.4624 213 25.5C213 28.5376 210.538 31 207.5 31H93.5C90.4624 31 88 28.5376 88 25.5Z", fill: "#3F3F46" }), _jsx("path", { d: "M88 105C88 101.686 90.6863 99 94 99H189C192.314 99 195 101.686 195 105C195 108.314 192.314 111 189 111H94C90.6863 111 88 108.314 88 105Z", fill: "#27272A" }), _jsx("path", { d: "M88 51C88 46.5817 91.5817 43 96 43H221C225.418 43 229 46.5817 229 51V85C229 89.4183 225.418 93 221 93H96C91.5817 93 88 89.4183 88 85V51Z", fill: "#27272A" }), _jsx("path", { d: "M17 48.5C17 45.4624 19.4624 43 22.5 43C25.5376 43 28 45.4624 28 48.5C28 51.5376 25.5376 54 22.5 54C19.4624 54 17 51.5376 17 48.5Z", fill: "#27272A" }), _jsx("path", { d: "M17 66.5C17 63.4624 19.4624 61 22.5 61C25.5376 61 28 63.4624 28 66.5C28 69.5376 25.5376 72 22.5 72C19.4624 72 17 69.5376 17 66.5Z", fill: "#27272A" }), _jsx("path", { d: "M17 86.5C17 83.4624 19.4624 81 22.5 81C25.5376 81 28 83.4624 28 86.5V87.5C28 90.5376 25.5376 93 22.5 93C19.4624 93 17 90.5376 17 87.5V86.5Z", fill: "#27272A" }), _jsx("path", { d: "M32 25.5C32 22.4624 34.4624 20 37.5 20H67.5C70.5376 20 73 22.4624 73 25.5C73 28.5376 70.5376 31 67.5 31H37.5C34.4624 31 32 28.5376 32 25.5Z", fill: "#3F3F46" }), _jsx("path", { d: "M32 66.5C32 63.4624 34.4624 61 37.5 61H67.5C70.5376 61 73 63.4624 73 66.5C73 69.5376 70.5376 72 67.5 72H37.5C34.4624 72 32 69.5376 32 66.5Z", fill: "#27272A" }), _jsx("path", { d: "M32 87C32 83.6863 34.6863 81 38 81H67C70.3137 81 73 83.6863 73 87C73 90.3137 70.3137 93 67 93H38C34.6863 93 32 90.3137 32 87Z", fill: "#27272A" }), _jsx("circle", { cx: "22.5", cy: "25.5", fill: "#3F3F46", r: "5.5" })] })] }));
+}
+function ThemePreviewLight() {
+    return (_jsxs("svg", { "aria-hidden": "true", className: "w-full h-full", fill: "none", viewBox: "0 0 240 117", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M12 0.5H228C234.351 0.5 239.5 5.64873 239.5 12V116.5H0.5V12C0.5 5.64873 5.64873 0.5 12 0.5Z", fill: "white" }), _jsx("path", { d: "M12 0.5H228C234.351 0.5 239.5 5.64873 239.5 12V116.5H0.5V12C0.5 5.64873 5.64873 0.5 12 0.5Z", stroke: "#E4E4E7" }), _jsx("path", { d: "M32 48.5C32 45.4624 34.4624 43 37.5 43H67.5C70.5376 43 73 45.4624 73 48.5C73 51.5376 70.5376 54 67.5 54H37.5C34.4624 54 32 51.5376 32 48.5Z", fill: "#F4F4F5" }), _jsx("path", { d: "M17 105C17 101.686 19.6863 99 23 99H67C70.3137 99 73 101.686 73 105C73 108.314 70.3137 111 67 111H23C19.6863 111 17 108.314 17 105Z", fill: "#F4F4F5" }), _jsx("path", { d: "M88 25.5C88 22.4624 90.4624 20 93.5 20H207.5C210.538 20 213 22.4624 213 25.5C213 28.5376 210.538 31 207.5 31H93.5C90.4624 31 88 28.5376 88 25.5Z", fill: "#E4E4E7" }), _jsx("path", { d: "M88 105C88 101.686 90.6863 99 94 99H189C192.314 99 195 101.686 195 105C195 108.314 192.314 111 189 111H94C90.6863 111 88 108.314 88 105Z", fill: "#F4F4F5" }), _jsx("path", { d: "M88 51C88 46.5817 91.5817 43 96 43H221C225.418 43 229 46.5817 229 51V85C229 89.4183 225.418 93 221 93H96C91.5817 93 88 89.4183 88 85V51Z", fill: "#F4F4F5" }), _jsx("path", { d: "M17 48.5C17 45.4624 19.4624 43 22.5 43C25.5376 43 28 45.4624 28 48.5C28 51.5376 25.5376 54 22.5 54C19.4624 54 17 51.5376 17 48.5Z", fill: "#F4F4F5" }), _jsx("path", { d: "M17 66.5C17 63.4624 19.4624 61 22.5 61C25.5376 61 28 63.4624 28 66.5C28 69.5376 25.5376 72 22.5 72C19.4624 72 17 69.5376 17 66.5Z", fill: "#F4F4F5" }), _jsx("path", { d: "M17 86.5C17 83.4624 19.4624 81 22.5 81C25.5376 81 28 83.4624 28 86.5V87.5C28 90.5376 25.5376 93 22.5 93C19.4624 93 17 90.5376 17 87.5V86.5Z", fill: "#F4F4F5" }), _jsx("path", { d: "M32 25.5C32 22.4624 34.4624 20 37.5 20H67.5C70.5376 20 73 22.4624 73 25.5C73 28.5376 70.5376 31 67.5 31H37.5C34.4624 31 32 28.5376 32 25.5Z", fill: "#E4E4E7" }), _jsx("path", { d: "M32 66.5C32 63.4624 34.4624 61 37.5 61H67.5C70.5376 61 73 63.4624 73 66.5C73 69.5376 70.5376 72 67.5 72H37.5C34.4624 72 32 69.5376 32 66.5Z", fill: "#F4F4F5" }), _jsx("path", { d: "M32 87C32 83.6863 34.6863 81 38 81H67C70.3137 81 73 83.6863 73 87C73 90.3137 70.3137 93 67 93H38C34.6863 93 32 90.3137 32 87Z", fill: "#F4F4F5" }), _jsx("circle", { cx: "22.5", cy: "25.5", fill: "#E4E4E7", r: "5.5" })] }));
+}
+function ThemePreviewDark() {
+    return (_jsxs("svg", { "aria-hidden": "true", className: "w-full h-full", fill: "none", viewBox: "0 0 240 117", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M12 0.5H228C234.351 0.5 239.5 5.64873 239.5 12V116.5H0.5V12C0.5 5.64873 5.64873 0.5 12 0.5Z", fill: "black" }), _jsx("path", { d: "M12 0.5H228C234.351 0.5 239.5 5.64873 239.5 12V116.5H0.5V12C0.5 5.64873 5.64873 0.5 12 0.5Z", stroke: "#3F3F46" }), _jsx("path", { d: "M32 48.5C32 45.4624 34.4624 43 37.5 43H67.5C70.5376 43 73 45.4624 73 48.5C73 51.5376 70.5376 54 67.5 54H37.5C34.4624 54 32 51.5376 32 48.5Z", fill: "#27272A" }), _jsx("path", { d: "M17 105C17 101.686 19.6863 99 23 99H67C70.3137 99 73 101.686 73 105C73 108.314 70.3137 111 67 111H23C19.6863 111 17 108.314 17 105Z", fill: "#27272A" }), _jsx("path", { d: "M88 25.5C88 22.4624 90.4624 20 93.5 20H207.5C210.538 20 213 22.4624 213 25.5C213 28.5376 210.538 31 207.5 31H93.5C90.4624 31 88 28.5376 88 25.5Z", fill: "#3F3F46" }), _jsx("path", { d: "M88 105C88 101.686 90.6863 99 94 99H189C192.314 99 195 101.686 195 105C195 108.314 192.314 111 189 111H94C90.6863 111 88 108.314 88 105Z", fill: "#27272A" }), _jsx("path", { d: "M88 51C88 46.5817 91.5817 43 96 43H221C225.418 43 229 46.5817 229 51V85C229 89.4183 225.418 93 221 93H96C91.5817 93 88 89.4183 88 85V51Z", fill: "#27272A" }), _jsx("path", { d: "M17 48.5C17 45.4624 19.4624 43 22.5 43C25.5376 43 28 45.4624 28 48.5C28 51.5376 25.5376 54 22.5 54C19.4624 54 17 51.5376 17 48.5Z", fill: "#27272A" }), _jsx("path", { d: "M17 66.5C17 63.4624 19.4624 61 22.5 61C25.5376 61 28 63.4624 28 66.5C28 69.5376 25.5376 72 22.5 72C19.4624 72 17 69.5376 17 66.5Z", fill: "#27272A" }), _jsx("path", { d: "M17 86.5C17 83.4624 19.4624 81 22.5 81C25.5376 81 28 83.4624 28 86.5V87.5C28 90.5376 25.5376 93 22.5 93C19.4624 93 17 90.5376 17 87.5V86.5Z", fill: "#27272A" }), _jsx("path", { d: "M32 25.5C32 22.4624 34.4624 20 37.5 20H67.5C70.5376 20 73 22.4624 73 25.5C73 28.5376 70.5376 31 67.5 31H37.5C34.4624 31 32 28.5376 32 25.5Z", fill: "#3F3F46" }), _jsx("path", { d: "M32 66.5C32 63.4624 34.4624 61 37.5 61H67.5C70.5376 61 73 63.4624 73 66.5C73 69.5376 70.5376 72 67.5 72H37.5C34.4624 72 32 69.5376 32 66.5Z", fill: "#27272A" }), _jsx("path", { d: "M32 87C32 83.6863 34.6863 81 38 81H67C70.3137 81 73 83.6863 73 87C73 90.3137 70.3137 93 67 93H38C34.6863 93 32 90.3137 32 87Z", fill: "#27272A" }), _jsx("circle", { cx: "22.5", cy: "25.5", fill: "#3F3F46", r: "5.5" })] }));
+}
+/**
+ * Renders the theme settings card with theme selection options.
+ *
+ * Displays a card containing radio buttons for selecting between system, light,
+ * and dark themes. Each option shows a visual preview of the theme. Only renders
+ * if theme settings are configured (theme, setTheme, and themes are provided).
+ *
+ * @param className - Optional additional CSS class names for the card container.
+ * @param config - Auth-related props forwarded to access theme settings.
+ * @returns A JSX element containing the theme settings card, or null if theme settings are not configured.
+ */
+export function ThemeSettings({ className, ...config }) {
+    const context = useAuth(config);
+    const { localization, settings: { theme, setTheme, themes } } = context;
+    if (!theme || !setTheme || !themes?.length) {
+        return null;
+    }
+    return (_jsxs(Card, { className: cn("p-4 md:p-6 gap-4 md:gap-6", className), children: [_jsx(Card.Header, { children: _jsx(Card.Title, { className: "text-xl", children: localization.settings.theme }) }), _jsx(Card.Content, { children: _jsxs(RadioGroup, { orientation: "horizontal", value: theme, onChange: setTheme, className: "flex-wrap", children: [themes.includes("system") && (_jsx(Radio, { value: "system", className: "flex-1 min-w-[140px] max-w-[200px]", children: ({ isSelected }) => (_jsxs("div", { className: cn("flex flex-col gap-3 p-3 rounded-xl border cursor-pointer transition-colors", "hover:bg-surface-secondary", isSelected ? "border-foreground border-2" : "border-default"), children: [_jsx("div", { className: "rounded-lg overflow-hidden aspect-[240/117]", children: _jsx(ThemePreviewSystem, {}) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Radio.Control, { children: _jsx(Radio.Indicator, {}) }), _jsx(Label, { className: "cursor-pointer", children: localization.settings.system })] })] })) })), themes.includes("light") && (_jsx(Radio, { value: "light", className: "flex-1 min-w-[140px] max-w-[200px]", children: ({ isSelected }) => (_jsxs("div", { className: cn("flex flex-col gap-3 p-3 rounded-xl border cursor-pointer transition-colors", "hover:bg-surface-secondary", isSelected ? "border-foreground border-2" : "border-default"), children: [_jsx("div", { className: "rounded-lg overflow-hidden aspect-[240/117]", children: _jsx(ThemePreviewLight, {}) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Radio.Control, { children: _jsx(Radio.Indicator, {}) }), _jsx(Label, { className: "cursor-pointer", children: localization.settings.light })] })] })) })), themes.includes("dark") && (_jsx(Radio, { value: "dark", className: "flex-1 min-w-[140px] max-w-[200px]", children: ({ isSelected }) => (_jsxs("div", { className: cn("flex flex-col gap-3 p-3 rounded-xl border cursor-pointer transition-colors", "hover:bg-surface-secondary", isSelected ? "border-foreground border-2" : "border-default"), children: [_jsx("div", { className: "rounded-lg overflow-hidden aspect-[240/117]", children: _jsx(ThemePreviewDark, {}) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Radio.Control, { children: _jsx(Radio.Indicator, {}) }), _jsx(Label, { className: "cursor-pointer", children: localization.settings.dark })] })] })) }))] }) })] }));
+}

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

@@ -0,0 +1,11 @@
+import { type 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.
+ *
+ * @returns A JSX element containing the user profile card with avatar upload and an editable name form
+ */
+export declare function UserProfile({ className, variant, ...props }: UserProfileProps & CardProps): import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -0,0 +1,5 @@
+import type { AnyAuthConfig } from "@better-auth-ui/react";
+export type AccountSettingsProps = AnyAuthConfig & {
+    className?: string;
+};
+export declare function AccountSettings({ className, ...config }: AccountSettingsProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/utils";
+import { UserProfile } from "./user-profile";
+export function AccountSettings({ className, ...config }) {
+    return (_jsx("div", { className: cn("w-full flex flex-col gap-4 md:gap-6", className), children: _jsx(UserProfile, { ...config }) }));
+}

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

@@ -0,0 +1,18 @@
+import type { AnyAuthConfig } from "@better-auth-ui/react";
+import type { AccountView } from "@better-auth-ui/react/core";
+import { type TabsProps } from "@heroui/react";
+export type AccountProps = AnyAuthConfig & {
+    className?: string;
+    path?: string;
+    view?: AccountView;
+    hideNav?: boolean;
+};
+/**
+ * Selects and renders the appropriate account view component.
+ *
+ * @param path - Route path used to resolve an account view when `view` is not provided
+ * @param view - Explicit auth view to render (e.g., "userProfile")
+ * @param hideNav - Hide the navigation tabs
+ */
+export declare function Account({ className, view, path, hideNav, ...config }: AccountProps): import("react/jsx-runtime").JSX.Element;
+export declare function ResponsiveTabs({ className, ...props }: TabsProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/settings/account.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ShieldCheckIcon, UserCircleIcon } from "@heroicons/react/24/outline";
+import { cn, Tabs } from "@heroui/react";
+import { useAuth } from "../../hooks/use-auth";
+import { AccountSettings } from "./settings/account-settings";
+/**
+ * Selects and renders the appropriate account view component.
+ *
+ * @param path - Route path used to resolve an account view when `view` is not provided
+ * @param view - Explicit auth view to render (e.g., "userProfile")
+ * @param hideNav - Hide the navigation tabs
+ */
+export function Account({ className, view, path, hideNav, ...config }) {
+    const { basePaths, viewPaths } = useAuth(config);
+    if (!view && !path) {
+        throw new Error("[Better Auth UI] Either `view` or `path` must be provided");
+    }
+    const accountPathViews = Object.fromEntries(Object.entries(viewPaths.account).map(([k, v]) => [v, k]));
+    const currentView = view || (path ? accountPathViews[path] : undefined);
+    return (_jsxs(ResponsiveTabs, { selectedKey: currentView, className: "w-full", children: [_jsx(Tabs.ListContainer, { children: _jsxs(Tabs.List, { "aria-label": "Account", className: cn("overflow-auto md:w-64 lg:w-72 xl:w-80", hideNav && "hidden"), children: [_jsxs(Tabs.Tab, { id: "settings", href: `${basePaths.account}/${viewPaths.account.settings}`, className: "gap-1.5", children: [_jsx(UserCircleIcon, { className: "size-4" }), "Account", _jsx(Tabs.Indicator, {})] }), _jsxs(Tabs.Tab, { id: "security", href: `${basePaths.account}/${viewPaths.account.security}`, className: "gap-1.5", children: [_jsx(ShieldCheckIcon, { className: "size-4" }), "Security", _jsx(Tabs.Indicator, {})] })] }) }), _jsx(Tabs.Panel, { id: "settings", className: "md:pt-0 px-0 md:px-2", children: _jsx(AccountSettings, {}) }), _jsx(Tabs.Panel, { id: "security", children: "Security" })] }));
+}
+export function ResponsiveTabs({ className, ...props }) {
+    return (_jsxs(_Fragment, { children: [_jsx(Tabs, { className: cn("md:hidden", className), orientation: "horizontal", ...props }), _jsx(Tabs, { className: cn("hidden md:flex", className), orientation: "vertical", ...props })] }));
+}

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

@@ -0,0 +1,14 @@
+import type { Session } from "better-auth";
+export type ActiveSessionProps = {
+    activeSession: Session;
+};
+/**
+ * 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 declare function ActiveSession({ activeSession }: ActiveSessionProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,53 @@
+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");
+}
+/**
+ * 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] })] }));
+}

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

@@ -0,0 +1,14 @@
+import { type CardProps } from "@heroui/react";
+export type ActiveSessionsProps = {
+    className?: string;
+    variant?: CardProps["variant"];
+};
+/**
+ * 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 declare function ActiveSessions({ className, variant, ...props }: ActiveSessionsProps & CardProps): import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -0,0 +1,15 @@
+import { type CardProps } from "@heroui/react";
+export type ChangePasswordProps = {
+    className?: string;
+    variant?: CardProps["variant"];
+};
+/**
+ * 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 declare function ChangePassword({ className, variant, ...props }: ChangePasswordProps & CardProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,79 @@
+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 { emailAndPassword, localization } = useAuth();
+    const { data: session } = useSession();
+    const { data: accounts, isPending: isAccountsPending } = useListAccounts();
+    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 SetPassword({ className, variant, ...props }) {
+    const { localization } = useAuth();
+    const { data: session } = useSession();
+    const { mutate: requestPasswordReset, isPending } = useRequestPasswordReset({
+        onError: (error) => toast.danger(error.error?.message || error.message),
+        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 ChangePasswordForm({ className, variant, emailAndPassword, localization, session, ...props }) {
+    const [currentPassword, setCurrentPassword] = useState("");
+    const [newPassword, setNewPassword] = useState("");
+    const [confirmPassword, setConfirmPassword] = useState("");
+    const { mutate: changePassword, isPending } = useChangePassword({
+        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] }) })] }) }) }) })] }));
+}

package/dist/components/settings/security/connected-account.d.ts

@@ -0,0 +1,16 @@
+import type { Account, SocialProvider } from "better-auth";
+export type ConnectedAccountProps = {
+    account?: Account;
+    provider: SocialProvider;
+};
+/**
+ * Render a single connected social account card with provider info and unlink control.
+ *
+ * Fetches additional account information from the provider using the accountInfo API
+ * and displays the provider name, account details, and an unlink button.
+ *
+ * @param account - The account object containing id, accountId, and providerId
+ * @param provider - The provider id
+ * @returns A JSX element containing the connected account card
+ */
+export declare function ConnectedAccount({ account, provider }: ConnectedAccountProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/settings/security/connected-account.js

@@ -0,0 +1,46 @@
+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, PlugConnection, Xmark } from "@gravity-ui/icons";
+import { Button, Card, cn, Skeleton, Spinner, toast } from "@heroui/react";
+/**
+ * Render a single connected social account card with provider info and unlink control.
+ *
+ * Fetches additional account information from the provider using the accountInfo API
+ * and displays the provider name, account details, and an unlink button.
+ *
+ * @param account - The account object containing id, accountId, and providerId
+ * @param provider - The provider id
+ * @returns A JSX element containing the connected account card
+ */
+export function ConnectedAccount({ account, provider }) {
+    const { baseURL, localization } = useAuth();
+    const { data: accountInfo, isPending: isLoadingInfo } = useAccountInfo(account?.accountId, {
+        enabled: !!account,
+        throwOnError: (error) => {
+            if (error.error)
+                toast.danger(error.error.message, { timeout: 3000 });
+            return false;
+        }
+    });
+    const { mutate: linkSocial, isPending: isLinking } = useLinkSocial({
+        onError: (error) => toast.danger(error.error?.message || error.message, { timeout: 3000 })
+    });
+    const { mutate: unlinkAccount, isPending: isUnlinking } = useUnlinkAccount({
+        onError: (error) => toast.danger(error.error?.message || error.message, { timeout: 3000 }),
+        onSuccess: () => toast.success(localization.settings.accountUnlinked, { timeout: 3000 })
+    });
+    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(Card, { className: cn("flex-row items-center border p-3 shadow-none", !account && "border-dashed"), children: [_jsx("div", { className: "flex size-10 items-center justify-center rounded-xl bg-surface-secondary", children: ProviderIcon ? (_jsx(ProviderIcon, { className: cn("size-5", !account && "opacity-50") })) : (_jsx(PlugConnection, { className: cn("size-5", !account && "opacity-50") })) }), _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { className: "text-sm font-medium", children: providerName }), account && isLoadingInfo ? (_jsx(Skeleton, { className: "h-3 my-0.5 w-24 rounded-lg" })) : (_jsx("span", { className: "text-xs text-muted", children: account
+                            ? displayName
+                            : localization.settings.connectProvider.replace("{{provider}}", providerName) }))] }), account ? (_jsx(Button, { className: "ml-auto", isIconOnly: true, variant: "ghost", 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(Xmark, {}) })) : (_jsxs(Button, { className: "ml-auto", variant: "secondary", size: "sm", onPress: () => linkSocial({
+                    provider,
+                    callbackURL: `${baseURL}${window.location.pathname}`
+                }), isPending: isLinking, "aria-label": localization.settings.connectProvider.replace("{{provider}}", providerName), children: [isLinking ? _jsx(Spinner, { color: "current", size: "sm" }) : _jsx(Link, {}), localization.settings.connect] }))] }));
+}

package/dist/components/settings/security/connected-accounts.d.ts

@@ -0,0 +1,15 @@
+import { type CardProps } from "@heroui/react";
+export type ConnectedAccountsProps = {
+    className?: string;
+    variant?: CardProps["variant"];
+};
+/**
+ * Render a card showing linked social accounts and available social providers to connect.
+ *
+ * Linked accounts (excluding the "credential" provider) are shown with an unlink control;
+ * available providers are shown with a connect control. Button states and labels reflect
+ * ongoing link/unlink activity and use localization for provider-specific text.
+ *
+ * @returns A JSX element containing the connected accounts card
+ */
+export declare function ConnectedAccounts({ className, ...props }: ConnectedAccountsProps & CardProps): import("react/jsx-runtime").JSX.Element;