@better-auth-ui/heroui 1.6.1 → 1.6.3

package/dist/components/auth/provider-buttons.js

@@ -1,34 +1,20 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { getProviderName } from "@better-auth-ui/core";
-import { providerIcons, useAuth } from "@better-auth-ui/react";
-import { Button, cn } from "@heroui/react";
-import { useMemo } from "react";
-/**
- * Render social provider sign-in buttons and handle initiation and pending state.
- *
- * @param isPending - Disables all provider buttons when true.
- * @param socialLayout - Preferred layout for the buttons; `"auto"` picks `"horizontal"` when there are four or more providers, otherwise `"vertical"`.
- * @param signInSocial - Callback invoked with the provider and callbackURL when a button is clicked.
- * @returns The JSX element that renders the configured social provider buttons.
- */
-export function ProviderButtons({ isPending, socialLayout = "auto", signInSocial }) {
-    const { baseURL, localization, redirectTo, socialProviders } = useAuth();
-    const callbackURL = `${baseURL}${redirectTo}`;
-    const resolvedSocialLayout = useMemo(() => {
-        if (socialLayout === "auto") {
-            if (socialProviders?.length && socialProviders.length >= 4) {
-                return "horizontal";
-            }
-            return "vertical";
-        }
-        return socialLayout;
-    }, [socialLayout, socialProviders?.length]);
-    return (_jsx("div", { className: cn("gap-3", resolvedSocialLayout === "grid" && "grid grid-cols-2", resolvedSocialLayout === "vertical" && "flex flex-col", resolvedSocialLayout === "horizontal" && "flex flex-wrap"), children: socialProviders?.map((provider) => {
-            const ProviderIcon = providerIcons[provider];
-            return (_jsxs(Button, { className: cn("w-full", resolvedSocialLayout === "horizontal" && "flex-1"), variant: "tertiary", isPending: isPending, onPress: () => signInSocial({ provider, callbackURL }), children: [_jsx(ProviderIcon, {}), resolvedSocialLayout === "vertical"
-                        ? localization.auth.continueWith.replace("{{provider}}", getProviderName(provider))
-                        : resolvedSocialLayout === "grid"
-                            ? getProviderName(provider)
-                            : null] }, provider));
-        }) }));
+import { ProviderButton as e } from "./provider-button.js";
+import { useAuth as t } from "@better-auth-ui/react";
+import { cn as n } from "@heroui/react";
+import { jsx as r } from "react/jsx-runtime";
+import { useMemo as i } from "react";
+//#region src/components/auth/provider-buttons.tsx
+function a({ isPending: a, socialLayout: o = "auto" }) {
+	let { socialProviders: s } = t(), c = i(() => o === "auto" ? s?.length && s.length >= 4 ? "horizontal" : "vertical" : o, [o, s?.length]);
+	return /* @__PURE__ */ r("div", {
+		className: n("gap-3", c === "grid" && "grid grid-cols-2", c === "vertical" && "flex flex-col", c === "horizontal" && "flex flex-wrap"),
+		children: s?.map((t) => /* @__PURE__ */ r(e, {
+			provider: t,
+			isDisabled: a,
+			label: c === "vertical" ? "continueWith" : c === "grid" ? "providerName" : "none",
+			className: n("w-full", c === "horizontal" && "flex-1")
+		}, t))
+	});
 }
+//#endregion
+export { a as ProviderButtons };

package/dist/components/auth/reset-password.d.ts

@@ -1,4 +1,4 @@
-import { type CardProps } from "@heroui/react";
+import { CardProps } from '@heroui/react';
 export type ResetPasswordProps = {
     className?: string;
     variant?: CardProps["variant"];
@@ -8,4 +8,4 @@ export type ResetPasswordProps = {
  *
  * Renders password (and optional confirm-password) inputs with visibility toggles, applies min/max length constraints from the auth configuration, shows field errors, and submits the new password to the auth client.
  */
-export declare function ResetPassword({ className, variant, ...props }: ResetPasswordProps & CardProps): import("react/jsx-runtime").JSX.Element;
+export declare function ResetPassword({ className, variant, ...props }: ResetPasswordProps & Omit<CardProps, "children">): import("react/jsx-runtime").JSX.Element;

package/dist/components/auth/reset-password.js

@@ -1,58 +1,144 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useAuth, useResetPassword } from "@better-auth-ui/react";
-import { Eye, EyeSlash } from "@gravity-ui/icons";
-import { Button, Card, cn, Description, FieldError, Form, InputGroup, Label, Link, Spinner, TextField, toast } from "@heroui/react";
-import { useEffect, useState } from "react";
-/**
- * Renders a reset password form that verifies a "token" URL parameter on mount and redirects to sign-in if absent.
- *
- * Renders password (and optional confirm-password) inputs with visibility toggles, applies min/max length constraints from the auth configuration, shows field errors, and submits the new password to the auth client.
- */
-export function ResetPassword({ className, variant, ...props }) {
-    const { basePaths, emailAndPassword, localization, viewPaths, navigate } = useAuth();
-    const { mutate: resetPassword, isPending } = useResetPassword({
-        onError: (error) => toast.danger(error.error?.message || error.message),
-        onSuccess: () => {
-            toast.success(localization.auth.passwordResetSuccess);
-            navigate({ to: `${basePaths.auth}/${viewPaths.auth.signIn}` });
-        }
-    });
-    const [isPasswordVisible, setIsPasswordVisible] = useState(false);
-    const [isConfirmPasswordVisible, setIsConfirmPasswordVisible] = useState(false);
-    useEffect(() => {
-        const searchParams = new URLSearchParams(window.location.search);
-        const token = searchParams.get("token");
-        if (!token) {
-            toast.danger(localization.auth.invalidResetPasswordToken);
-            navigate({ to: `${basePaths.auth}/${viewPaths.auth.signIn}` });
-        }
-    }, [
-        basePaths.auth,
-        localization.auth.invalidResetPasswordToken,
-        viewPaths.auth.signIn,
-        navigate
-    ]);
-    function handleSubmit(e) {
-        e.preventDefault();
-        const searchParams = new URLSearchParams(window.location.search);
-        const token = searchParams.get("token");
-        if (!token) {
-            toast.danger(localization.auth.invalidResetPasswordToken);
-            navigate({ to: `${basePaths.auth}/${viewPaths.auth.signIn}` });
-            return;
-        }
-        const formData = new FormData(e.currentTarget);
-        const password = formData.get("password");
-        const confirmPassword = formData.get("confirmPassword");
-        if (emailAndPassword?.confirmPassword && password !== confirmPassword) {
-            toast.danger(localization.auth.passwordsDoNotMatch);
-            return;
-        }
-        resetPassword({ token, newPassword: password });
-    }
-    return (_jsxs(Card, { className: cn("w-full max-w-sm p-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.resetPassword }) }), _jsx(Card.Content, { children: _jsxs(Form, { onSubmit: handleSubmit, className: "flex flex-col gap-4", children: [_jsxs(TextField, { minLength: emailAndPassword?.minPasswordLength, maxLength: emailAndPassword?.maxPasswordLength, name: "password", autoComplete: "new-password", isDisabled: isPending, children: [_jsx(Label, { children: localization.auth.password }), _jsxs(InputGroup, { variant: variant === "transparent" ? "primary" : "secondary", children: [_jsx(InputGroup.Input, { name: "password", placeholder: localization.auth.newPasswordPlaceholder, type: isPasswordVisible ? "text" : "password", required: true }), _jsx(InputGroup.Suffix, { className: "px-0", children: _jsx(Button, { isIconOnly: true, "aria-label": isPasswordVisible
-                                                    ? localization.auth.hidePassword
-                                                    : localization.auth.showPassword, size: "sm", variant: "ghost", onPress: () => setIsPasswordVisible(!isPasswordVisible), isDisabled: isPending, children: isPasswordVisible ? _jsx(EyeSlash, {}) : _jsx(Eye, {}) }) })] }), _jsx(FieldError, {})] }), emailAndPassword?.confirmPassword && (_jsxs(TextField, { minLength: emailAndPassword?.minPasswordLength, maxLength: emailAndPassword?.maxPasswordLength, name: "confirmPassword", autoComplete: "new-password", isDisabled: isPending, children: [_jsx(Label, { children: localization.auth.confirmPassword }), _jsxs(InputGroup, { variant: variant === "transparent" ? "primary" : "secondary", children: [_jsx(InputGroup.Input, { placeholder: localization.auth.confirmPasswordPlaceholder, type: isConfirmPasswordVisible ? "text" : "password", required: true, name: "confirmPassword" }), _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, {}) }) })] }), _jsx(FieldError, {})] })), _jsx("div", { className: "flex flex-col gap-3", children: _jsxs(Button, { type: "submit", className: "w-full", isPending: isPending, children: [isPending && _jsx(Spinner, { color: "current", size: "sm" }), localization.auth.resetPassword] }) })] }) }), _jsx(Card.Footer, { className: "flex-col", children: _jsxs(Description, { className: "text-sm", children: [localization.auth.rememberYourPassword, " ", _jsx(Link, { href: `${basePaths.auth}/${viewPaths.auth.signIn}`, className: "text-accent decoration-accent no-underline hover:underline", children: localization.auth.signIn })] }) })] }));
+import { useAuth as e, useResetPassword as t } from "@better-auth-ui/react";
+import { Button as n, Card as r, Description as i, FieldError as a, Form as o, InputGroup as s, Label as c, Link as l, Spinner as u, TextField as d, cn as f, toast as p } from "@heroui/react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import { useEffect as g, useState as _ } from "react";
+import { Eye as v, EyeSlash as y } from "@gravity-ui/icons";
+//#region src/components/auth/reset-password.tsx
+function b({ className: b, variant: x, ...S }) {
+	let { basePaths: C, emailAndPassword: w, localization: T, viewPaths: E, navigate: D } = e(), { mutate: O, isPending: k } = t({ onSuccess: () => {
+		p.success(T.auth.passwordResetSuccess), D({ to: `${C.auth}/${E.auth.signIn}` });
+	} }), [A, j] = _(!1), [M, N] = _(!1);
+	g(() => {
+		new URLSearchParams(window.location.search).get("token") || (p.danger(T.auth.invalidResetPasswordToken), D({ to: `${C.auth}/${E.auth.signIn}` }));
+	}, [
+		C.auth,
+		T.auth.invalidResetPasswordToken,
+		E.auth.signIn,
+		D
+	]);
+	function P(e) {
+		e.preventDefault();
+		let t = new URLSearchParams(window.location.search).get("token");
+		if (!t) {
+			p.danger(T.auth.invalidResetPasswordToken), D({ to: `${C.auth}/${E.auth.signIn}` });
+			return;
+		}
+		let n = new FormData(e.currentTarget), r = n.get("password"), i = n.get("confirmPassword");
+		if (w?.confirmPassword && r !== i) {
+			p.danger(T.auth.passwordsDoNotMatch);
+			return;
+		}
+		O({
+			token: t,
+			newPassword: r
+		});
+	}
+	return /* @__PURE__ */ h(r, {
+		className: f("w-full max-w-sm p-4 md:p-6", b),
+		variant: x,
+		...S,
+		children: [
+			/* @__PURE__ */ m(r.Header, { children: /* @__PURE__ */ m(r.Title, {
+				className: "text-xl font-semibold mb-1",
+				children: T.auth.resetPassword
+			}) }),
+			/* @__PURE__ */ m(r.Content, { children: /* @__PURE__ */ h(o, {
+				onSubmit: P,
+				className: "flex flex-col gap-4",
+				children: [
+					/* @__PURE__ */ h(d, {
+						minLength: w?.minPasswordLength,
+						maxLength: w?.maxPasswordLength,
+						name: "password",
+						autoComplete: "new-password",
+						isDisabled: k,
+						children: [
+							/* @__PURE__ */ m(c, { children: T.auth.password }),
+							/* @__PURE__ */ h(s, {
+								variant: x === "transparent" ? "primary" : "secondary",
+								children: [/* @__PURE__ */ m(s.Input, {
+									name: "password",
+									placeholder: T.auth.newPasswordPlaceholder,
+									type: A ? "text" : "password",
+									required: !0
+								}), /* @__PURE__ */ m(s.Suffix, {
+									className: "px-0",
+									children: /* @__PURE__ */ m(n, {
+										isIconOnly: !0,
+										"aria-label": A ? T.auth.hidePassword : T.auth.showPassword,
+										size: "sm",
+										variant: "ghost",
+										onPress: () => j(!A),
+										isDisabled: k,
+										children: m(A ? y : v, {})
+									})
+								})]
+							}),
+							/* @__PURE__ */ m(a, {})
+						]
+					}),
+					w?.confirmPassword && /* @__PURE__ */ h(d, {
+						minLength: w?.minPasswordLength,
+						maxLength: w?.maxPasswordLength,
+						name: "confirmPassword",
+						autoComplete: "new-password",
+						isDisabled: k,
+						children: [
+							/* @__PURE__ */ m(c, { children: T.auth.confirmPassword }),
+							/* @__PURE__ */ h(s, {
+								variant: x === "transparent" ? "primary" : "secondary",
+								children: [/* @__PURE__ */ m(s.Input, {
+									placeholder: T.auth.confirmPasswordPlaceholder,
+									type: M ? "text" : "password",
+									required: !0,
+									name: "confirmPassword"
+								}), /* @__PURE__ */ m(s.Suffix, {
+									className: "px-0",
+									children: /* @__PURE__ */ m(n, {
+										isIconOnly: !0,
+										"aria-label": M ? T.auth.hidePassword : T.auth.showPassword,
+										size: "sm",
+										variant: "ghost",
+										onPress: () => N(!M),
+										isDisabled: k,
+										children: m(M ? y : v, {})
+									})
+								})]
+							}),
+							/* @__PURE__ */ m(a, {})
+						]
+					}),
+					/* @__PURE__ */ m("div", {
+						className: "flex flex-col gap-3",
+						children: /* @__PURE__ */ h(n, {
+							type: "submit",
+							className: "w-full",
+							isPending: k,
+							children: [k && /* @__PURE__ */ m(u, {
+								color: "current",
+								size: "sm"
+							}), T.auth.resetPassword]
+						})
+					})
+				]
+			}) }),
+			/* @__PURE__ */ m(r.Footer, {
+				className: "flex-col",
+				children: /* @__PURE__ */ h(i, {
+					className: "text-sm",
+					children: [
+						T.auth.rememberYourPassword,
+						" ",
+						/* @__PURE__ */ m(l, {
+							href: `${C.auth}/${E.auth.signIn}`,
+							className: "text-accent decoration-accent no-underline hover:underline",
+							children: T.auth.signIn
+						})
+					]
+				})
+			})
+		]
+	});
 }
+//#endregion
+export { b as ResetPassword };

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

@@ -1,5 +1,5 @@
-import { type CardProps } from "@heroui/react";
-import { type SocialLayout } from "./provider-buttons";
+import { CardProps } from '@heroui/react';
+import { SocialLayout } from './provider-buttons';
 export interface SignInProps {
     className?: string;
     socialLayout?: SocialLayout;
@@ -11,4 +11,4 @@ export interface SignInProps {
  *
  * @returns The sign-in JSX element containing email/password fields, optional magic-link button, and social provider buttons.
  */
-export declare function SignIn({ className, socialLayout, socialPosition, variant, ...props }: SignInProps & CardProps): import("react/jsx-runtime").JSX.Element;
+export declare function SignIn({ className, socialLayout, socialPosition, variant, ...props }: SignInProps & Omit<CardProps, "children">): import("react/jsx-runtime").JSX.Element;

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

@@ -1,65 +1,152 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useAuth, useSendVerificationEmail, useSignInEmail, useSignInSocial } from "@better-auth-ui/react";
-import { Button, Card, Checkbox, cn, Description, FieldError, Form, Input, Label, Link, Spinner, TextField, toast } from "@heroui/react";
-import { useState } from "react";
-import { FieldSeparator } from "./field-separator";
-import { MagicLinkButton } from "./magic-link-button";
-import { PasskeyButton } from "./passkey-button";
-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 { basePaths, baseURL, emailAndPassword, localization, magicLink, passkey, redirectTo, socialProviders, viewPaths, navigate } = useAuth();
-    const [password, setPassword] = useState("");
-    const { mutate: sendVerificationEmail } = useSendVerificationEmail({
-        onError: (error) => toast.danger(error.error?.message || error.message),
-        onSuccess: () => toast.success(localization.auth.verificationEmailSent)
-    });
-    const { mutate: signInEmail, isPending: signInPending } = useSignInEmail({
-        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);
-            }
-        },
-        onSuccess: () => navigate({ to: redirectTo })
-    });
-    const [socialRedirecting, setSocialRedirecting] = useState(false);
-    const { mutate: signInSocial, isPending: socialPending } = useSignInSocial({
-        onError: (error) => toast.danger(error.error?.message || error.message),
-        onSuccess: () => {
-            setSocialRedirecting(true);
-            setTimeout(() => {
-                setSocialRedirecting(false);
-            }, 5000);
-        }
-    });
-    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 } : {})
-        });
-    };
-    const isPending = signInPending || socialPending || socialRedirecting;
-    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, signInSocial: signInSocial, isPending: isPending })), 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 }) })] })), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs(Button, { type: "submit", className: "w-full", isPending: isPending, children: [isPending && _jsx(Spinner, { color: "current", size: "sm" }), localization.auth.signIn] }), magicLink && (_jsx(MagicLinkButton, { view: "signIn", isPending: isPending })), passkey && _jsx(PasskeyButton, { isPending: isPending })] })] })), socialPosition === "bottom" && (_jsxs(_Fragment, { children: [showSeparator && (_jsx(FieldSeparator, { children: localization.auth.or })), !!socialProviders?.length && (_jsx(ProviderButtons, { socialLayout: socialLayout, signInSocial: signInSocial, isPending: isPending }))] }))] }), _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 })] }))] })] }));
+import { FieldSeparator as e } from "./field-separator.js";
+import { MagicLinkButton as t } from "./magic-link-button.js";
+import { PasskeyButton as n } from "./passkey-button.js";
+import { ProviderButtons as r } from "./provider-buttons.js";
+import { useAuth as i, useSendVerificationEmail as a, useSignInEmail as o, useSignInUsername as s } from "@better-auth-ui/react";
+import { Button as c, Card as l, Checkbox as u, Description as d, FieldError as f, Form as p, Input as m, Label as h, Link as g, Spinner as _, TextField as v, cn as y, toast as b } from "@heroui/react";
+import { Fragment as x, jsx as S, jsxs as C } from "react/jsx-runtime";
+import { useState as w } from "react";
+//#region src/components/auth/sign-in.tsx
+function T(e) {
+	return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e);
 }
+function E({ className: E, socialLayout: D, socialPosition: O = "bottom", variant: k, ...A }) {
+	let { basePaths: j, baseURL: M, emailAndPassword: N, localization: P, magicLink: F, passkey: I, redirectTo: L, socialProviders: R, username: z, viewPaths: B, navigate: V } = i(), [H, U] = w(""), { mutate: W } = a({ onSuccess: () => b.success(P.auth.verificationEmailSent) }), { mutate: G, isPending: K } = o({
+		onError: (e, { email: t }) => {
+			U(""), e.error?.code === "EMAIL_NOT_VERIFIED" ? b.danger(e.error?.message || e.message, { actionProps: {
+				children: P.auth.resend,
+				onClick: () => W({
+					email: t,
+					callbackURL: `${M}${L}`
+				})
+			} }) : b.danger(e.error?.message || e.message);
+		},
+		onSuccess: () => V({ to: L })
+	}), { mutate: q, isPending: J } = s({
+		onError: (e) => {
+			U(""), b.danger(e.error?.message || e.message);
+		},
+		onSuccess: () => V({ to: L })
+	}), Y = (e) => {
+		e.preventDefault();
+		let t = new FormData(e.currentTarget), n = t.get("email"), r = t.get("rememberMe") === "on";
+		z?.enabled && !T(n) ? q({
+			username: n,
+			password: H
+		}) : G({
+			email: n,
+			password: H,
+			...N?.rememberMe ? { rememberMe: r } : {}
+		});
+	}, X = K || J, Z = N?.enabled && !!R?.length;
+	return /* @__PURE__ */ C(l, {
+		className: y("w-full max-w-sm gap-4 md:p-6", E),
+		variant: k,
+		...A,
+		children: [
+			/* @__PURE__ */ S(l.Header, { children: /* @__PURE__ */ S(l.Title, {
+				className: "text-xl font-semibold mb-1",
+				children: P.auth.signIn
+			}) }),
+			/* @__PURE__ */ C(l.Content, {
+				className: "gap-4",
+				children: [
+					O === "top" && /* @__PURE__ */ C(x, { children: [!!R?.length && /* @__PURE__ */ S(r, {
+						socialLayout: D,
+						isPending: X
+					}), Z && /* @__PURE__ */ S(e, { children: P.auth.or })] }),
+					N?.enabled && /* @__PURE__ */ C(p, {
+						onSubmit: Y,
+						className: "flex flex-col gap-4",
+						children: [
+							/* @__PURE__ */ C(v, {
+								name: "email",
+								type: z?.enabled ? "text" : "email",
+								autoComplete: z?.enabled ? "username" : "email",
+								isDisabled: X,
+								children: [
+									/* @__PURE__ */ S(h, { children: z?.enabled ? P.auth.username : P.auth.email }),
+									/* @__PURE__ */ S(m, {
+										placeholder: z?.enabled ? P.auth.usernameOrEmailPlaceholder : P.auth.emailPlaceholder,
+										variant: k === "transparent" ? "primary" : "secondary",
+										required: !0
+									}),
+									/* @__PURE__ */ S(f, {})
+								]
+							}),
+							/* @__PURE__ */ C(v, {
+								minLength: N?.minPasswordLength,
+								maxLength: N?.maxPasswordLength,
+								name: "password",
+								type: "password",
+								autoComplete: "current-password",
+								isDisabled: X,
+								value: H,
+								onChange: U,
+								children: [
+									/* @__PURE__ */ S(h, { children: P.auth.password }),
+									/* @__PURE__ */ S(m, {
+										placeholder: P.auth.passwordPlaceholder,
+										variant: k === "transparent" ? "primary" : "secondary",
+										required: !0
+									}),
+									/* @__PURE__ */ S(f, {})
+								]
+							}),
+							N?.rememberMe && /* @__PURE__ */ C(u, {
+								name: "rememberMe",
+								isDisabled: X,
+								variant: k === "transparent" ? "primary" : "secondary",
+								children: [/* @__PURE__ */ S(u.Control, { children: /* @__PURE__ */ S(u.Indicator, {}) }), /* @__PURE__ */ S(u.Content, { children: /* @__PURE__ */ S(h, { children: P.auth.rememberMe }) })]
+							}),
+							/* @__PURE__ */ C("div", {
+								className: "flex flex-col gap-3",
+								children: [
+									/* @__PURE__ */ C(c, {
+										type: "submit",
+										className: "w-full",
+										isPending: X,
+										children: [X && /* @__PURE__ */ S(_, {
+											color: "current",
+											size: "sm"
+										}), P.auth.signIn]
+									}),
+									F && /* @__PURE__ */ S(t, {
+										view: "signIn",
+										isPending: X
+									}),
+									I && /* @__PURE__ */ S(n, { isPending: X })
+								]
+							})
+						]
+					}),
+					O === "bottom" && /* @__PURE__ */ C(x, { children: [Z && /* @__PURE__ */ S(e, { children: P.auth.or }), !!R?.length && /* @__PURE__ */ S(r, {
+						socialLayout: D,
+						isPending: X
+					})] })
+				]
+			}),
+			/* @__PURE__ */ C(l.Footer, {
+				className: "flex-col gap-3",
+				children: [N?.forgotPassword && /* @__PURE__ */ S(g, {
+					href: `${j.auth}/${B.auth.forgotPassword}`,
+					className: "no-underline hover:underline",
+					children: P.auth.forgotPasswordLink
+				}), N?.enabled && /* @__PURE__ */ C(d, {
+					className: "text-sm",
+					children: [
+						P.auth.needToCreateAnAccount,
+						" ",
+						/* @__PURE__ */ S(g, {
+							href: `${j.auth}/${B.auth.signUp}`,
+							className: "text-accent no-underline hover:underline decoration-accent-hover",
+							children: P.auth.signUp
+						})
+					]
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { E as SignIn };

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

@@ -1,33 +1,27 @@
-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 { basePaths, navigate, viewPaths } = useAuth();
-    const { mutate: signOut } = useSignOut({
-        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" }));
+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 { jsx as a } from "react/jsx-runtime";
+import { useEffect as o, useRef as s } from "react";
+//#region src/components/auth/sign-out.tsx
+function c({ className: c }) {
+	let { basePaths: l, navigate: u, viewPaths: d } = e(), { mutate: f } = t({
+		onError: (e) => {
+			i.danger(e.error?.message || e.message), u({
+				to: `${l.auth}/${d.auth.signIn}`,
+				replace: !0
+			});
+		},
+		onSuccess: () => u({
+			to: `${l.auth}/${d.auth.signIn}`,
+			replace: !0
+		})
+	}), p = s(!1);
+	return o(() => {
+		p.current || (p.current = !0, f());
+	}, [f]), /* @__PURE__ */ a(n, {
+		className: r("mx-auto my-auto", c),
+		color: "current"
+	});
 }
+//#endregion
+export { c as SignOut };

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

@@ -1,5 +1,5 @@
-import { type CardProps } from "@heroui/react";
-import { type SocialLayout } from "./provider-buttons";
+import { CardProps } from '@heroui/react';
+import { SocialLayout } from './provider-buttons';
 export type SignUpProps = {
     className?: string;
     socialLayout?: SocialLayout;
@@ -16,4 +16,4 @@ export type SignUpProps = {
  * @param socialPosition - Position of social provider buttons relative to the form; `"top"` or `"bottom"` (default `"bottom"`)
  * @returns The sign-up form React element
  */
-export declare function SignUp({ className, socialLayout, socialPosition, variant, ...props }: SignUpProps & CardProps): import("react/jsx-runtime").JSX.Element;
+export declare function SignUp({ className, socialLayout, socialPosition, variant, ...props }: SignUpProps & Omit<CardProps, "children">): import("react/jsx-runtime").JSX.Element;