@better-auth-ui/heroui 1.6.8 → 1.6.9

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

@@ -1,45 +1,53 @@
-import { AccountSettings as e } from "./account/account-settings.js";
-import { SecuritySettings as t } from "./security/security-settings.js";
-import { useAuth as n, useAuthenticate as r } from "@better-auth-ui/react";
-import { Tabs as i, cn as a } from "@heroui/react";
-import { useMemo as o } from "react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
-//#region src/components/auth/settings/settings.tsx
-function l({ className: l, hideNav: u, path: d, variant: f, view: p, ...m }) {
-	let { authClient: h, basePaths: g, localization: _, viewPaths: v } = n();
-	if (r(h), !p && !d) throw Error("[Better Auth UI] Either `view` or `path` must be provided");
-	let y = o(() => Object.fromEntries(Object.entries(v.settings).map(([e, t]) => [t, e])), [v.settings]), b = p || (d ? y[d] : void 0);
-	return /* @__PURE__ */ c(i, {
-		className: a(l),
-		orientation: "horizontal",
-		selectedKey: b,
-		...m,
-		children: [
-			/* @__PURE__ */ s(i.ListContainer, { children: /* @__PURE__ */ c(i.List, {
-				"aria-label": _.settings.settings,
-				className: "overflow-auto w-fit",
-				children: [/* @__PURE__ */ c(i.Tab, {
-					id: "account",
-					href: `${g.settings}/${v.settings.account}`,
-					children: [_.settings.account, /* @__PURE__ */ s(i.Indicator, {})]
-				}), /* @__PURE__ */ c(i.Tab, {
-					id: "security",
-					href: `${g.settings}/${v.settings.security}`,
-					children: [_.settings.security, /* @__PURE__ */ s(i.Indicator, {})]
-				})]
-			}) }),
-			/* @__PURE__ */ s(i.Panel, {
-				id: "account",
-				className: "px-0",
-				children: /* @__PURE__ */ s(e, { variant: f })
-			}),
-			/* @__PURE__ */ s(i.Panel, {
-				id: "security",
-				className: "px-0",
-				children: /* @__PURE__ */ s(t, { variant: f })
-			})
-		]
-	});
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAuth, useAuthenticate } from "@better-auth-ui/react";
+import { Person, Shield } from "@gravity-ui/icons";
+import { cn, Tabs } from "@heroui/react";
+import { useMemo } from "react";
+import { AccountSettings } from "./account/account-settings";
+import { SecuritySettings } from "./security/security-settings";
+/**
+ * Renders the settings UI and activates the appropriate settings view based on `view` or `path`.
+ *
+ * @param className - Additional CSS class names applied to the root container
+ * @param path - Route path used to resolve which settings view to activate when `view` is not provided
+ * @param view - Explicit settings view to activate, e.g. `"account"` or `"security"`
+ * @param hideNav - When `true`, hide the navigation tabs
+ * @param variant - Card variant forwarded to each settings section card
+ * @returns A DOM tree containing the responsive settings tabs and the currently selected settings panel
+ *
+ * @throws Error if neither `view` nor `path` is provided, or if `path` does not match any settings view
+ */
+export function Settings({ className, hideNav, path, variant, view, ...props }) {
+    if (!view && !path) {
+        throw new Error("[Better Auth UI] Either `view` or `path` must be provided");
+    }
+    const { authClient, basePaths, localization, viewPaths, plugins } = useAuth();
+    useAuthenticate(authClient);
+    // Built-ins first, then plugin segments
+    const currentView = useMemo(() => {
+        if (view)
+            return view;
+        if (!path)
+            return undefined;
+        const match = [
+            viewPaths.settings,
+            ...plugins.map((plugin) => plugin.viewPaths?.settings)
+        ]
+            .flatMap((source) => Object.entries(source ?? {}))
+            .find(([, segment]) => segment === path);
+        return match?.[0];
+    }, [view, path, viewPaths.settings, plugins]);
+    if (!currentView) {
+        const validPaths = [
+            viewPaths.settings,
+            ...plugins.map((plugin) => plugin.viewPaths?.settings)
+        ]
+            .flatMap((source) => Object.values(source ?? {}))
+            .join(", ");
+        throw new Error(`[Better Auth UI] Unknown settings path "${path}". Valid paths are: ${validPaths}`);
+    }
+    return (_jsxs(Tabs, { className: cn(className), orientation: "horizontal", selectedKey: currentView, ...props, children: [_jsx(Tabs.ListContainer, { children: _jsxs(Tabs.List, { "aria-label": localization.settings.settings, className: "max-w-fit overflow-x-auto [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden", children: [_jsxs(Tabs.Tab, { id: "account", href: `${basePaths.settings}/${viewPaths.settings.account}`, className: "gap-2", onPress: (e) => e.target.scrollIntoView({ behavior: "smooth", inline: "center" }), children: [_jsx(Person, { className: "text-muted" }), localization.settings.account, _jsx(Tabs.Indicator, {})] }), _jsxs(Tabs.Tab, { id: "security", href: `${basePaths.settings}/${viewPaths.settings.security}`, className: "gap-2", onPress: (e) => e.target.scrollIntoView({ behavior: "smooth", inline: "center" }), children: [_jsx(Shield, { className: "text-muted" }), localization.settings.security, _jsx(Tabs.Indicator, {})] }), plugins.flatMap((plugin) => plugin.settingsTabs?.map((settingsTab, index) => (_jsxs(Tabs.Tab, { id: settingsTab.view, href: `${basePaths.settings}/${plugin.viewPaths?.settings?.[settingsTab.view]}`, className: "gap-2", onPress: (e) => e.target.scrollIntoView({
+                                behavior: "smooth",
+                                inline: "center"
+                            }), children: [settingsTab.label, _jsx(Tabs.Indicator, {})] }, `${plugin.id}-${index.toString()}`))) ?? [])] }) }), _jsx(Tabs.Panel, { id: "account", className: "px-0", children: _jsx(AccountSettings, { variant: variant }) }), _jsx(Tabs.Panel, { id: "security", className: "px-0", children: _jsx(SecuritySettings, { variant: variant }) }), plugins.flatMap((plugin) => plugin.settingsTabs?.map((settingsTab, index) => (_jsx(Tabs.Panel, { id: settingsTab.view, className: "px-0", children: _jsx(settingsTab.component, { variant: variant }) }, `${plugin.id}-${index.toString()}`))))] }));
 }
-//#endregion
-export { l as Settings };

package/dist/components/auth/sign-in.d.ts

@@ -1,5 +1,5 @@
-import { CardProps } from '@heroui/react';
-import { SocialLayout } from './provider-buttons';
+import { type CardProps } from "@heroui/react";
+import { type SocialLayout } from "./provider-buttons";
 export interface SignInProps {
     className?: string;
     socialLayout?: SocialLayout;

package/dist/components/auth/sign-in.js

@@ -1,133 +1,64 @@
-import { FieldSeparator as e } from "./field-separator.js";
-import { ProviderButtons as t } from "./provider-buttons.js";
-import { authMutationKeys as n } from "@better-auth-ui/core";
-import { useAuth as r, useFetchOptions as i, useSendVerificationEmail as a, useSignInEmail as o } from "@better-auth-ui/react";
-import { Button as s, Card as c, Checkbox as l, Description as u, FieldError as d, Form as f, Input as p, Label as m, Link as h, Spinner as g, TextField as _, cn as v, toast as y } from "@heroui/react";
-import { useState as b } from "react";
-import { Fragment as x, jsx as S, jsxs as C } from "react/jsx-runtime";
-import { useIsMutating as w } from "@tanstack/react-query";
-//#region src/components/auth/sign-in.tsx
-function T({ className: T, socialLayout: E, socialPosition: D = "bottom", variant: O, ...k }) {
-	let { authClient: A, basePaths: j, baseURL: M, emailAndPassword: N, localization: P, plugins: F, redirectTo: I, socialProviders: L, viewPaths: R, navigate: z } = r(), { fetchOptions: B, resetFetchOptions: V } = i(), [H, U] = b(""), { mutate: W } = a(A, { onSuccess: () => y.success(P.auth.verificationEmailSent) }), { mutate: G, isPending: K } = o(A, {
-		onError: (e, { email: t }) => {
-			U(""), e.error?.code === "EMAIL_NOT_VERIFIED" ? y.danger(e.error?.message || e.message, { actionProps: {
-				children: P.auth.resend,
-				onClick: () => W({
-					email: t,
-					callbackURL: `${M}${I}`
-				})
-			} }) : y.danger(e.error?.message || e.message), V();
-		},
-		onSuccess: () => z({ to: I })
-	}), q = (e) => {
-		e.preventDefault();
-		let t = new FormData(e.currentTarget), n = t.get("email"), r = t.get("rememberMe") === "on";
-		G({
-			email: n,
-			password: H,
-			...N?.rememberMe ? { rememberMe: r } : {},
-			fetchOptions: B
-		});
-	}, J = w({ mutationKey: n.signIn.all }) + w({ mutationKey: n.signUp.all }) > 0, Y = F.find((e) => e.captchaComponent)?.captchaComponent, X = N?.enabled && !!L?.length;
-	return /* @__PURE__ */ C(c, {
-		className: v("w-full max-w-sm gap-4 md:p-6", T),
-		variant: O,
-		...k,
-		children: [
-			/* @__PURE__ */ S(c.Header, { children: /* @__PURE__ */ S(c.Title, {
-				className: "text-xl font-semibold mb-1",
-				children: P.auth.signIn
-			}) }),
-			/* @__PURE__ */ C(c.Content, {
-				className: "gap-4",
-				children: [
-					D === "top" && /* @__PURE__ */ C(x, { children: [!!L?.length && /* @__PURE__ */ S(t, { socialLayout: E }), X && /* @__PURE__ */ S(e, { children: P.auth.or })] }),
-					N?.enabled && /* @__PURE__ */ C(f, {
-						onSubmit: q,
-						className: "flex flex-col gap-4",
-						children: [
-							/* @__PURE__ */ C(_, {
-								name: "email",
-								type: "email",
-								autoComplete: "email",
-								isDisabled: J,
-								children: [
-									/* @__PURE__ */ S(m, { children: P.auth.email }),
-									/* @__PURE__ */ S(p, {
-										placeholder: P.auth.emailPlaceholder,
-										variant: O === "transparent" ? "primary" : "secondary",
-										required: !0
-									}),
-									/* @__PURE__ */ S(d, {})
-								]
-							}),
-							/* @__PURE__ */ C(_, {
-								minLength: N?.minPasswordLength,
-								maxLength: N?.maxPasswordLength,
-								name: "password",
-								type: "password",
-								autoComplete: "current-password",
-								isDisabled: J,
-								value: H,
-								onChange: U,
-								children: [
-									/* @__PURE__ */ S(m, { children: P.auth.password }),
-									/* @__PURE__ */ S(p, {
-										placeholder: P.auth.passwordPlaceholder,
-										variant: O === "transparent" ? "primary" : "secondary",
-										required: !0
-									}),
-									/* @__PURE__ */ S(d, {})
-								]
-							}),
-							N?.rememberMe && /* @__PURE__ */ C(l, {
-								name: "rememberMe",
-								isDisabled: J,
-								variant: O === "transparent" ? "primary" : "secondary",
-								children: [/* @__PURE__ */ S(l.Control, { children: /* @__PURE__ */ S(l.Indicator, {}) }), /* @__PURE__ */ S(l.Content, { children: /* @__PURE__ */ S(m, { children: P.auth.rememberMe }) })]
-							}),
-							Y && /* @__PURE__ */ S("div", {
-								className: "flex justify-center",
-								children: Y
-							}),
-							/* @__PURE__ */ C("div", {
-								className: "flex flex-col gap-3",
-								children: [/* @__PURE__ */ C(s, {
-									type: "submit",
-									className: "w-full",
-									isPending: J,
-									children: [K && /* @__PURE__ */ S(g, {
-										color: "current",
-										size: "sm"
-									}), P.auth.signIn]
-								}), F.flatMap((e) => e.authButtons?.map((t, n) => /* @__PURE__ */ S(t, { view: "signIn" }, `${e.id}-${n.toString()}`)))]
-							})
-						]
-					}),
-					D === "bottom" && /* @__PURE__ */ C(x, { children: [X && /* @__PURE__ */ S(e, { children: P.auth.or }), !!L?.length && /* @__PURE__ */ S(t, { socialLayout: E })] })
-				]
-			}),
-			/* @__PURE__ */ C(c.Footer, {
-				className: "flex-col gap-3",
-				children: [N?.forgotPassword && /* @__PURE__ */ S(h, {
-					href: `${j.auth}/${R.auth.forgotPassword}`,
-					className: "no-underline hover:underline",
-					children: P.auth.forgotPasswordLink
-				}), N?.enabled && /* @__PURE__ */ C(u, {
-					className: "text-sm",
-					children: [
-						P.auth.needToCreateAnAccount,
-						" ",
-						/* @__PURE__ */ S(h, {
-							href: `${j.auth}/${R.auth.signUp}`,
-							className: "text-accent no-underline hover:underline decoration-accent-hover",
-							children: P.auth.signUp
-						})
-					]
-				})]
-			})
-		]
-	});
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { authMutationKeys } from "@better-auth-ui/core";
+import { useAuth, useFetchOptions, useSendVerificationEmail, useSignInEmail } from "@better-auth-ui/react";
+import { Button, Card, Checkbox, cn, Description, FieldError, Form, Input, Label, Link, Spinner, TextField, toast } from "@heroui/react";
+import { useIsMutating } from "@tanstack/react-query";
+import { useState } from "react";
+import { FieldSeparator } from "./field-separator";
+import { ProviderButtons } from "./provider-buttons";
+/**
+ * Render the sign-in UI using auth context for configuration and localization.
+ *
+ * @returns The sign-in JSX element containing email/password fields, optional magic-link button, and social provider buttons.
+ */
+export function SignIn({ className, socialLayout, socialPosition = "bottom", variant, ...props }) {
+    const { authClient, basePaths, baseURL, emailAndPassword, localization, plugins, redirectTo, socialProviders, viewPaths, navigate } = useAuth();
+    const { fetchOptions, resetFetchOptions } = useFetchOptions();
+    const [password, setPassword] = useState("");
+    const { mutate: sendVerificationEmail } = useSendVerificationEmail(authClient, {
+        onSuccess: () => toast.success(localization.auth.verificationEmailSent)
+    });
+    const { mutate: signInEmail, isPending: signInEmailPending } = useSignInEmail(authClient, {
+        onError: (error, { email }) => {
+            setPassword("");
+            if (error.error?.code === "EMAIL_NOT_VERIFIED") {
+                toast.danger(error.error?.message || error.message, {
+                    actionProps: {
+                        children: localization.auth.resend,
+                        onClick: () => sendVerificationEmail({
+                            email,
+                            callbackURL: `${baseURL}${redirectTo}`
+                        })
+                    }
+                });
+            }
+            else {
+                toast.danger(error.error?.message || error.message);
+            }
+            resetFetchOptions();
+        },
+        onSuccess: () => navigate({ to: redirectTo })
+    });
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        const formData = new FormData(e.currentTarget);
+        const email = formData.get("email");
+        const rememberMe = formData.get("rememberMe") === "on";
+        signInEmail({
+            email,
+            password,
+            ...(emailAndPassword?.rememberMe ? { rememberMe } : {}),
+            fetchOptions
+        });
+    };
+    const signInMutating = useIsMutating({
+        mutationKey: authMutationKeys.signIn.all
+    });
+    const signUpMutating = useIsMutating({
+        mutationKey: authMutationKeys.signUp.all
+    });
+    const isPending = signInMutating + signUpMutating > 0;
+    const Captcha = plugins.find((plugin) => plugin.captchaComponent)?.captchaComponent;
+    const showSeparator = emailAndPassword?.enabled && !!socialProviders?.length;
+    return (_jsxs(Card, { className: cn("w-full max-w-sm gap-4 md:p-6", className), variant: variant, ...props, children: [_jsx(Card.Header, { children: _jsx(Card.Title, { className: "text-xl font-semibold mb-1", children: localization.auth.signIn }) }), _jsxs(Card.Content, { className: "gap-4", children: [socialPosition === "top" && (_jsxs(_Fragment, { children: [!!socialProviders?.length && (_jsx(ProviderButtons, { socialLayout: socialLayout })), showSeparator && (_jsx(FieldSeparator, { children: localization.auth.or }))] })), emailAndPassword?.enabled && (_jsxs(Form, { onSubmit: handleSubmit, className: "flex flex-col gap-4", children: [_jsxs(TextField, { name: "email", type: "email", autoComplete: "email", isDisabled: isPending, children: [_jsx(Label, { children: localization.auth.email }), _jsx(Input, { placeholder: localization.auth.emailPlaceholder, variant: variant === "transparent" ? "primary" : "secondary", required: true }), _jsx(FieldError, {})] }), _jsxs(TextField, { minLength: emailAndPassword?.minPasswordLength, maxLength: emailAndPassword?.maxPasswordLength, name: "password", type: "password", autoComplete: "current-password", isDisabled: isPending, value: password, onChange: setPassword, children: [_jsx(Label, { children: localization.auth.password }), _jsx(Input, { placeholder: localization.auth.passwordPlaceholder, variant: variant === "transparent" ? "primary" : "secondary", required: true }), _jsx(FieldError, {})] }), emailAndPassword?.rememberMe && (_jsxs(Checkbox, { name: "rememberMe", isDisabled: isPending, variant: variant === "transparent" ? "primary" : "secondary", children: [_jsx(Checkbox.Control, { children: _jsx(Checkbox.Indicator, {}) }), _jsx(Checkbox.Content, { children: _jsx(Label, { children: localization.auth.rememberMe }) })] })), Captcha && _jsx("div", { className: "flex justify-center", children: Captcha }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs(Button, { type: "submit", className: "w-full", isPending: isPending, children: [signInEmailPending && _jsx(Spinner, { color: "current", size: "sm" }), localization.auth.signIn] }), plugins.flatMap((plugin) => plugin.authButtons?.map((AuthButton, index) => (_jsx(AuthButton, { view: "signIn" }, `${plugin.id}-${index.toString()}`))))] })] })), socialPosition === "bottom" && (_jsxs(_Fragment, { children: [showSeparator && (_jsx(FieldSeparator, { children: localization.auth.or })), !!socialProviders?.length && (_jsx(ProviderButtons, { socialLayout: socialLayout }))] }))] }), _jsxs(Card.Footer, { className: "flex-col gap-3", children: [emailAndPassword?.forgotPassword && (_jsx(Link, { href: `${basePaths.auth}/${viewPaths.auth.forgotPassword}`, className: "no-underline hover:underline", children: localization.auth.forgotPasswordLink })), emailAndPassword?.enabled && (_jsxs(Description, { className: "text-sm", children: [localization.auth.needToCreateAnAccount, " ", _jsx(Link, { href: `${basePaths.auth}/${viewPaths.auth.signUp}`, className: "text-accent no-underline hover:underline decoration-accent-hover", children: localization.auth.signUp })] }))] })] }));
 }
-//#endregion
-export { T as SignIn };

package/dist/components/auth/sign-out.js

@@ -1,27 +1,33 @@
-import { useAuth as e, useSignOut as t } from "@better-auth-ui/react";
-import { Spinner as n, cn as r, toast as i } from "@heroui/react";
-import { useEffect as a, useRef as o } from "react";
-import { jsx as s } from "react/jsx-runtime";
-//#region src/components/auth/sign-out.tsx
-function c({ className: c }) {
-	let { authClient: l, basePaths: u, navigate: d, viewPaths: f } = e(), { mutate: p } = t(l, {
-		onError: (e) => {
-			i.danger(e.error?.message || e.message), d({
-				to: `${u.auth}/${f.auth.signIn}`,
-				replace: !0
-			});
-		},
-		onSuccess: () => d({
-			to: `${u.auth}/${f.auth.signIn}`,
-			replace: !0
-		})
-	}), m = o(!1);
-	return a(() => {
-		m.current || (m.current = !0, p());
-	}, [p]), /* @__PURE__ */ s(n, {
-		className: r("mx-auto my-auto", c),
-		color: "current"
-	});
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useAuth, useSignOut } from "@better-auth-ui/react";
+import { cn, Spinner, toast } from "@heroui/react";
+import { useEffect, useRef } from "react";
+/**
+ * Initiates sign-out on mount and renders a loading card while sign-out proceeds.
+ *
+ * @returns A Card containing a centered Spinner shown during the sign-out process
+ */
+export function SignOut({ className }) {
+    const { authClient, basePaths, navigate, viewPaths } = useAuth();
+    const { mutate: signOut } = useSignOut(authClient, {
+        onError: (error) => {
+            toast.danger(error.error?.message || error.message);
+            navigate({
+                to: `${basePaths.auth}/${viewPaths.auth.signIn}`,
+                replace: true
+            });
+        },
+        onSuccess: () => navigate({
+            to: `${basePaths.auth}/${viewPaths.auth.signIn}`,
+            replace: true
+        })
+    });
+    const hasSignedOut = useRef(false);
+    useEffect(() => {
+        if (hasSignedOut.current)
+            return;
+        hasSignedOut.current = true;
+        signOut();
+    }, [signOut]);
+    return (_jsx(Spinner, { className: cn("mx-auto my-auto", className), color: "current" }));
 }
-//#endregion
-export { c as SignOut };

package/dist/components/auth/sign-up.d.ts

@@ -1,5 +1,5 @@
-import { CardProps } from '@heroui/react';
-import { SocialLayout } from './provider-buttons';
+import { type CardProps } from "@heroui/react";
+import { type SocialLayout } from "./provider-buttons";
 export type SignUpProps = {
     className?: string;
     socialLayout?: SocialLayout;