@better-auth-ui/heroui 1.6.1 → 1.6.3

package/dist/components/auth/auth-provider.d.ts

@@ -1,4 +1,4 @@
-import { type AuthProviderProps as AuthProviderPropsPrimitive } from "@better-auth-ui/react";
+import { AuthProviderProps as AuthProviderPropsPrimitive } from '@better-auth-ui/react';
 export type AuthProviderProps = Omit<AuthProviderPropsPrimitive, "Link">;
 /**
  * Provides an authentication context by rendering an auth provider with the sonner toast handler injected, forwarding remaining configuration and rendering `children` inside it.

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

@@ -1,12 +1,17 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { AuthProvider as AuthProviderPrimitive } from "@better-auth-ui/react";
-import { RouterProvider } from "@heroui/react";
-/**
- * Provides an authentication context by rendering an auth provider with the sonner toast handler injected, forwarding remaining configuration and rendering `children` inside it.
- *
- * @param children - React nodes to render inside the authentication provider
- * @returns A React element that renders an authentication provider configured with the provided props and toast handler
- */
-export function AuthProvider({ children, navigate, ...config }) {
-    return (_jsx(AuthProviderPrimitive, { navigate: navigate, ...config, children: _jsx(RouterProvider, { navigate: (path) => navigate({ to: path }), children: children }) }));
+import { ErrorToaster as e } from "./error-toaster.js";
+import { AuthProvider as t } from "@better-auth-ui/react";
+import { RouterProvider as n } from "@heroui/react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/auth/auth-provider.tsx
+function a({ children: a, navigate: o, ...s }) {
+	return /* @__PURE__ */ r(t, {
+		navigate: o,
+		...s,
+		children: /* @__PURE__ */ i(n, {
+			navigate: (e) => o({ to: e }),
+			children: [a, /* @__PURE__ */ r(e, {})]
+		})
+	});
 }
+//#endregion
+export { a as AuthProvider };

package/dist/components/auth/auth.d.ts

@@ -1,6 +1,6 @@
-import type { AuthView } from "@better-auth-ui/react/core";
-import type { CardProps } from "@heroui/react";
-import type { SocialLayout } from "./provider-buttons";
+import { AuthView } from '@better-auth-ui/core';
+import { CardProps } from '@heroui/react';
+import { SocialLayout } from './provider-buttons';
 export type AuthProps = {
     className?: string;
     path?: string;
@@ -20,4 +20,4 @@ export type AuthProps = {
  * @param view - Explicit auth view to render (e.g., "signIn", "signUp")
  * @returns The React element for the resolved authentication view
  */
-export declare function Auth({ path, socialLayout, socialPosition, view, ...props }: AuthProps & CardProps): import("react/jsx-runtime").JSX.Element;
+export declare function Auth({ path, socialLayout, socialPosition, view, ...props }: AuthProps & Omit<CardProps, "children">): import("react/jsx-runtime").JSX.Element;

package/dist/components/auth/auth.js

@@ -1,42 +1,37 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useAuth } from "@better-auth-ui/react";
-import { ForgotPassword } from "./forgot-password";
-import { MagicLink } from "./magic-link";
-import { ResetPassword } from "./reset-password";
-import { SignIn } from "./sign-in";
-import { SignOut } from "./sign-out";
-import { SignUp } from "./sign-up";
-/**
- * Render the appropriate authentication view based on the provided `view` or `path`.
- *
- * @param path - Route path used to resolve an auth view when `view` is not provided
- * @param socialLayout - Social layout to apply to sign-in/sign-up/magic-link views
- * @param socialPosition - Position for social buttons ("top" or "bottom")
- * @param variant - Variant to apply to the card
- * @param view - Explicit auth view to render (e.g., "signIn", "signUp")
- * @returns The React element for the resolved authentication view
- */
-export function Auth({ path, socialLayout, socialPosition, view, ...props }) {
-    const { viewPaths } = useAuth();
-    if (!view && !path) {
-        throw new Error("[Better Auth UI] Either `view` or `path` must be provided");
-    }
-    const authPathViews = Object.fromEntries(Object.entries(viewPaths.auth).map(([k, v]) => [v, k]));
-    const currentView = view || (path ? authPathViews[path] : undefined);
-    switch (currentView) {
-        case "signIn":
-            return (_jsx(SignIn, { socialLayout: socialLayout, socialPosition: socialPosition, ...props }));
-        case "signUp":
-            return (_jsx(SignUp, { socialLayout: socialLayout, socialPosition: socialPosition, ...props }));
-        case "magicLink":
-            return (_jsx(MagicLink, { socialLayout: socialLayout, socialPosition: socialPosition, ...props }));
-        case "forgotPassword":
-            return _jsx(ForgotPassword, { ...props });
-        case "resetPassword":
-            return _jsx(ResetPassword, { ...props });
-        case "signOut":
-            return _jsx(SignOut, { ...props });
-        default:
-            throw new Error(`[Better Auth UI] Valid views are: ${Object.keys(viewPaths.auth).join(", ")}`);
-    }
+import { ForgotPassword as e } from "./forgot-password.js";
+import { MagicLink as t } from "./magic-link.js";
+import { ResetPassword as n } from "./reset-password.js";
+import { SignIn as r } from "./sign-in.js";
+import { SignOut as i } from "./sign-out.js";
+import { SignUp as a } from "./sign-up.js";
+import { useAuth as o } from "@better-auth-ui/react";
+import { jsx as s } from "react/jsx-runtime";
+//#region src/components/auth/auth.tsx
+function c({ path: c, socialLayout: l, socialPosition: u, view: d, ...f }) {
+	let { viewPaths: p } = o();
+	if (!d && !c) throw Error("[Better Auth UI] Either `view` or `path` must be provided");
+	let m = Object.fromEntries(Object.entries(p.auth).map(([e, t]) => [t, e]));
+	switch (d || (c ? m[c] : void 0)) {
+		case "signIn": return /* @__PURE__ */ s(r, {
+			socialLayout: l,
+			socialPosition: u,
+			...f
+		});
+		case "signUp": return /* @__PURE__ */ s(a, {
+			socialLayout: l,
+			socialPosition: u,
+			...f
+		});
+		case "magicLink": return /* @__PURE__ */ s(t, {
+			socialLayout: l,
+			socialPosition: u,
+			...f
+		});
+		case "forgotPassword": return /* @__PURE__ */ s(e, { ...f });
+		case "resetPassword": return /* @__PURE__ */ s(n, { ...f });
+		case "signOut": return /* @__PURE__ */ s(i, { ...f });
+		default: throw Error(`[Better Auth UI] Valid views are: ${Object.keys(p.auth).join(", ")}`);
+	}
 }
+//#endregion
+export { c as Auth };

package/dist/components/auth/error-toaster.d.ts

@@ -0,0 +1 @@
+export declare function ErrorToaster(): null;

package/dist/components/auth/error-toaster.js

@@ -0,0 +1,17 @@
+import { toast as e } from "@heroui/react";
+import { useEffect as t } from "react";
+import { useQueryClient as n } from "@tanstack/react-query";
+//#region src/components/auth/error-toaster.tsx
+function r() {
+	let r = n();
+	return t(() => {
+		r.getQueryCache().config.onError = (t) => {
+			let n = t;
+			n?.error && e.danger(n.error.message);
+		}, r.setMutationDefaults([], { onError: (t) => {
+			e.danger(t?.error?.message || t.message);
+		} });
+	}, [r]), null;
+}
+//#endregion
+export { r as ErrorToaster };

package/dist/components/auth/field-separator.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import { ReactNode } from 'react';
 export declare function FieldSeparator({ children }: {
     children: ReactNode;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/components/auth/field-separator.js

@@ -1,5 +1,18 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Separator } from "@heroui/react";
-export function FieldSeparator({ children }) {
-    return (_jsxs("div", { className: "flex items-center gap-4", children: [_jsx(Separator, { className: "flex-1" }), _jsx("p", { className: "text-xs text-muted shrink-0", children: children }), _jsx(Separator, { className: "flex-1" })] }));
+import { Separator as e } from "@heroui/react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/auth/field-separator.tsx
+function r({ children: r }) {
+	return /* @__PURE__ */ n("div", {
+		className: "flex items-center gap-4",
+		children: [
+			/* @__PURE__ */ t(e, { className: "flex-1" }),
+			/* @__PURE__ */ t("p", {
+				className: "text-xs text-muted shrink-0",
+				children: r
+			}),
+			/* @__PURE__ */ t(e, { className: "flex-1" })
+		]
+	});
 }
+//#endregion
+export { r as FieldSeparator };

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

@@ -1,4 +1,4 @@
-import { type CardProps } from "@heroui/react";
+import { CardProps } from '@heroui/react';
 export type ForgotPasswordProps = {
     className?: string;
     variant?: CardProps["variant"];
@@ -12,4 +12,4 @@ export type ForgotPasswordProps = {
  * @param className - Optional additional CSS class names applied to the card
  * @returns The forgot-password form UI as a JSX element
  */
-export declare function ForgotPassword({ className, variant, ...props }: ForgotPasswordProps & CardProps): import("react/jsx-runtime").JSX.Element;
+export declare function ForgotPassword({ className, variant, ...props }: ForgotPasswordProps & Omit<CardProps, "children">): import("react/jsx-runtime").JSX.Element;

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

@@ -1,28 +1,67 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useAuth, useRequestPasswordReset } from "@better-auth-ui/react";
-import { Button, Card, cn, Description, FieldError, Form, Input, Label, Link, Spinner, TextField, toast } from "@heroui/react";
-/**
- * Render a card-based "Forgot Password" form that sends a password-reset email.
- *
- * The form displays an email input, submit button, and a link back to sign-in.
- * Toasts are displayed on success or error via the `useForgotPassword` hook.
- *
- * @param className - Optional additional CSS class names applied to the card
- * @returns The forgot-password form UI as a JSX element
- */
-export function ForgotPassword({ className, variant, ...props }) {
-    const { basePaths, localization, viewPaths, navigate } = useAuth();
-    const { mutate: requestPasswordReset, isPending } = useRequestPasswordReset({
-        onError: (error) => toast.danger(error.error?.message || error.message),
-        onSuccess: () => {
-            toast.success(localization.auth.passwordResetEmailSent);
-            navigate({ to: `${basePaths.auth}/${viewPaths.auth.signIn}` });
-        }
-    });
-    function handleSubmit(e) {
-        e.preventDefault();
-        const formData = new FormData(e.currentTarget);
-        requestPasswordReset({ email: formData.get("email") });
-    }
-    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.forgotPassword }) }), _jsx(Card.Content, { children: _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, required: true, variant: variant === "transparent" ? "primary" : "secondary" }), _jsx(FieldError, {})] }), _jsxs(Button, { type: "submit", className: "w-full", isPending: isPending, children: [isPending && _jsx(Spinner, { color: "current", size: "sm" }), localization.auth.sendResetLink] })] }) }), _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, useRequestPasswordReset as t } from "@better-auth-ui/react";
+import { Button as n, Card as r, Description as i, FieldError as a, Form as o, Input 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";
+//#region src/components/auth/forgot-password.tsx
+function g({ className: g, variant: _, ...v }) {
+	let { basePaths: y, localization: b, viewPaths: x, navigate: S } = e(), { mutate: C, isPending: w } = t({ onSuccess: () => {
+		p.success(b.auth.passwordResetEmailSent), S({ to: `${y.auth}/${x.auth.signIn}` });
+	} });
+	function T(e) {
+		e.preventDefault(), C({ email: new FormData(e.currentTarget).get("email") });
+	}
+	return /* @__PURE__ */ h(r, {
+		className: f("w-full max-w-sm p-4 md:p-6", g),
+		variant: _,
+		...v,
+		children: [
+			/* @__PURE__ */ m(r.Header, { children: /* @__PURE__ */ m(r.Title, {
+				className: "text-xl font-semibold mb-1",
+				children: b.auth.forgotPassword
+			}) }),
+			/* @__PURE__ */ m(r.Content, { children: /* @__PURE__ */ h(o, {
+				onSubmit: T,
+				className: "flex flex-col gap-4",
+				children: [/* @__PURE__ */ h(d, {
+					name: "email",
+					type: "email",
+					autoComplete: "email",
+					isDisabled: w,
+					children: [
+						/* @__PURE__ */ m(c, { children: b.auth.email }),
+						/* @__PURE__ */ m(s, {
+							placeholder: b.auth.emailPlaceholder,
+							required: !0,
+							variant: _ === "transparent" ? "primary" : "secondary"
+						}),
+						/* @__PURE__ */ m(a, {})
+					]
+				}), /* @__PURE__ */ h(n, {
+					type: "submit",
+					className: "w-full",
+					isPending: w,
+					children: [w && /* @__PURE__ */ m(u, {
+						color: "current",
+						size: "sm"
+					}), b.auth.sendResetLink]
+				})]
+			}) }),
+			/* @__PURE__ */ m(r.Footer, {
+				className: "flex-col",
+				children: /* @__PURE__ */ h(i, {
+					className: "text-sm",
+					children: [
+						b.auth.rememberYourPassword,
+						" ",
+						/* @__PURE__ */ m(l, {
+							href: `${y.auth}/${x.auth.signIn}`,
+							className: "text-accent decoration-accent no-underline hover:underline",
+							children: b.auth.signIn
+						})
+					]
+				})
+			})
+		]
+	});
 }
+//#endregion
+export { g as ForgotPassword };

package/dist/components/auth/magic-link-button.d.ts

@@ -1,4 +1,4 @@
-import type { AuthView } from "@better-auth-ui/core";
+import { AuthView } from '@better-auth-ui/core';
 export type MagicLinkButtonProps = {
     isPending: boolean;
     view?: AuthView;

package/dist/components/auth/magic-link-button.js

@@ -1,19 +1,16 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useAuth } from "@better-auth-ui/react";
-import { Envelope, Lock } from "@gravity-ui/icons";
-import { cn, Link } from "@heroui/react";
-import { buttonVariants } from "@heroui/styles";
-/**
- * Renders a full-width tertiary link-style button that navigates to either the magic-link or sign-in route.
- *
- * @param isPending - If true, applies disabled styling and prevents interaction
- * @param view - Current auth view; when `"magicLink"`, the button targets the sign-in/password variant
- * @returns The rendered Link element with the appropriate href, icon, and label
- */
-export function MagicLinkButton({ isPending, view }) {
-    const { basePaths, viewPaths, localization } = useAuth();
-    const isMagicLinkView = view === "magicLink";
-    return (_jsxs(Link, { href: `${basePaths.auth}/${isMagicLinkView ? viewPaths.auth.signIn : viewPaths.auth.magicLink}`, className: cn(buttonVariants({ variant: "tertiary" }), "w-full gap-2", isPending && "status-disabled pointer-events-none"), children: [isMagicLinkView ? _jsx(Lock, {}) : _jsx(Envelope, {}), localization.auth.continueWith.replace("{{provider}}", isMagicLinkView
-                ? localization.auth.password
-                : localization.auth.magicLink)] }));
+import { useAuth as e } from "@better-auth-ui/react";
+import { Link as t, cn as n } from "@heroui/react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { Envelope as a, Lock as o } from "@gravity-ui/icons";
+import { buttonVariants as s } from "@heroui/styles";
+//#region src/components/auth/magic-link-button.tsx
+function c({ isPending: c, view: l }) {
+	let { basePaths: u, viewPaths: d, localization: f } = e(), p = l === "magicLink";
+	return /* @__PURE__ */ i(t, {
+		href: `${u.auth}/${p ? d.auth.signIn : d.auth.magicLink}`,
+		className: n(s({ variant: "tertiary" }), "w-full gap-2", c && "status-disabled pointer-events-none"),
+		children: [r(p ? o : a, {}), f.auth.continueWith.replace("{{provider}}", p ? f.auth.password : f.auth.magicLink)]
+	});
 }
+//#endregion
+export { c as MagicLinkButton };

package/dist/components/auth/magic-link.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 MagicLinkProps = {
     className?: string;
     socialLayout?: SocialLayout;
@@ -14,4 +14,4 @@ export type MagicLinkProps = {
  * @param socialPosition - Position of social provider buttons; `"top"` or `"bottom"`. Defaults to `"bottom"`.
  * @returns The magic-link sign-in UI as a JSX element
  */
-export declare function MagicLink({ className, socialLayout, socialPosition, variant, ...props }: MagicLinkProps & CardProps): import("react/jsx-runtime").JSX.Element;
+export declare function MagicLink({ className, socialLayout, socialPosition, variant, ...props }: MagicLinkProps & Omit<CardProps, "children">): import("react/jsx-runtime").JSX.Element;

package/dist/components/auth/magic-link.js

@@ -1,44 +1,99 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useAuth, useSignInMagicLink, useSignInSocial } from "@better-auth-ui/react";
-import { Button, Card, 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 a card-based sign-in form that sends an email magic link and optionally shows social provider buttons.
- *
- * @param className - Additional CSS class names applied to the card container
- * @param socialLayout - Layout style for social provider buttons
- * @param socialPosition - Position of social provider buttons; `"top"` or `"bottom"`. Defaults to `"bottom"`.
- * @returns The magic-link sign-in UI as a JSX element
- */
-export function MagicLink({ className, socialLayout, socialPosition = "bottom", variant, ...props }) {
-    const { basePaths, baseURL, localization, passkey, redirectTo, socialProviders, viewPaths } = useAuth();
-    const [email, setEmail] = useState("");
-    const { mutate: signInMagicLink, isPending: magicLinkPending } = useSignInMagicLink({
-        onError: (error) => toast.danger(error.error?.message || error.message),
-        onSuccess: () => {
-            setEmail("");
-            toast.success(localization.auth.magicLinkSent);
-        }
-    });
-    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 isPending = magicLinkPending || socialPending || socialRedirecting;
-    const handleSubmit = (e) => {
-        e.preventDefault();
-        signInMagicLink({ email, callbackURL: `${baseURL}${redirectTo}` });
-    };
-    const showSeparator = !!socialProviders?.length;
-    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.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 }))] })), _jsxs(Form, { onSubmit: handleSubmit, className: "flex flex-col gap-4", children: [_jsxs(TextField, { name: "email", type: "email", autoComplete: "email", isDisabled: isPending, value: email, onChange: setEmail, children: [_jsx(Label, { children: localization.auth.email }), _jsx(Input, { placeholder: localization.auth.emailPlaceholder, required: true, variant: variant === "transparent" ? "primary" : "secondary" }), _jsx(FieldError, {})] }), _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.sendMagicLink] }), _jsx(MagicLinkButton, { view: "magicLink", 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 }))] }))] }), _jsx(Card.Footer, { className: "flex-col", children: _jsxs(Description, { className: "text-sm", children: [localization.auth.needToCreateAnAccount, " ", _jsx(Link, { href: `${basePaths.auth}/${viewPaths.auth.signUp}`, className: "text-accent decoration-accent no-underline hover:underline", 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, useSignInMagicLink as a } from "@better-auth-ui/react";
+import { Button as o, Card as s, Description as c, FieldError as l, Form as u, Input as d, Label as f, Link as p, Spinner as m, TextField as h, cn as g, toast as _ } from "@heroui/react";
+import { Fragment as v, jsx as y, jsxs as b } from "react/jsx-runtime";
+import { useState as x } from "react";
+//#region src/components/auth/magic-link.tsx
+function S({ className: S, socialLayout: C, socialPosition: w = "bottom", variant: T, ...E }) {
+	let { basePaths: D, baseURL: O, localization: k, passkey: A, redirectTo: j, socialProviders: M, viewPaths: N } = i(), [P, F] = x(""), { mutate: I, isPending: L } = a({ onSuccess: () => {
+		F(""), _.success(k.auth.magicLinkSent);
+	} }), R = L, z = (e) => {
+		e.preventDefault(), I({
+			email: P,
+			callbackURL: `${O}${j}`
+		});
+	}, B = !!M?.length;
+	return /* @__PURE__ */ b(s, {
+		className: g("w-full max-w-sm p-4 md:p-6", S),
+		variant: T,
+		...E,
+		children: [
+			/* @__PURE__ */ y(s.Header, { children: /* @__PURE__ */ y(s.Title, {
+				className: "text-xl font-semibold mb-1",
+				children: k.auth.signIn
+			}) }),
+			/* @__PURE__ */ b(s.Content, {
+				className: "gap-4",
+				children: [
+					w === "top" && /* @__PURE__ */ b(v, { children: [!!M?.length && /* @__PURE__ */ y(r, {
+						socialLayout: C,
+						isPending: R
+					}), B && /* @__PURE__ */ y(e, { children: k.auth.or })] }),
+					/* @__PURE__ */ b(u, {
+						onSubmit: z,
+						className: "flex flex-col gap-4",
+						children: [/* @__PURE__ */ b(h, {
+							name: "email",
+							type: "email",
+							autoComplete: "email",
+							isDisabled: R,
+							value: P,
+							onChange: F,
+							children: [
+								/* @__PURE__ */ y(f, { children: k.auth.email }),
+								/* @__PURE__ */ y(d, {
+									placeholder: k.auth.emailPlaceholder,
+									required: !0,
+									variant: T === "transparent" ? "primary" : "secondary"
+								}),
+								/* @__PURE__ */ y(l, {})
+							]
+						}), /* @__PURE__ */ b("div", {
+							className: "flex flex-col gap-3",
+							children: [
+								/* @__PURE__ */ b(o, {
+									type: "submit",
+									className: "w-full",
+									isPending: R,
+									children: [R && /* @__PURE__ */ y(m, {
+										color: "current",
+										size: "sm"
+									}), k.auth.sendMagicLink]
+								}),
+								/* @__PURE__ */ y(t, {
+									view: "magicLink",
+									isPending: R
+								}),
+								A && /* @__PURE__ */ y(n, { isPending: R })
+							]
+						})]
+					}),
+					w === "bottom" && /* @__PURE__ */ b(v, { children: [B && /* @__PURE__ */ y(e, { children: k.auth.or }), !!M?.length && /* @__PURE__ */ y(r, {
+						socialLayout: C,
+						isPending: R
+					})] })
+				]
+			}),
+			/* @__PURE__ */ y(s.Footer, {
+				className: "flex-col",
+				children: /* @__PURE__ */ b(c, {
+					className: "text-sm",
+					children: [
+						k.auth.needToCreateAnAccount,
+						" ",
+						/* @__PURE__ */ y(p, {
+							href: `${D.auth}/${N.auth.signUp}`,
+							className: "text-accent decoration-accent no-underline hover:underline",
+							children: k.auth.signUp
+						})
+					]
+				})
+			})
+		]
+	});
 }
+//#endregion
+export { S as MagicLink };

package/dist/components/auth/passkey-button.js

@@ -1,13 +1,21 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useAuth, useSignInPasskey } from "@better-auth-ui/react";
-import { Fingerprint } from "@gravity-ui/icons";
-import { Button, Spinner, toast } from "@heroui/react";
-export function PasskeyButton({ isPending }) {
-    const { localization, redirectTo, navigate } = useAuth();
-    const { mutate: signInPasskey, isPending: passkeyPending } = useSignInPasskey({
-        onError: (error) => toast.danger(error.error?.message || error.message),
-        onSuccess: () => navigate({ to: redirectTo })
-    });
-    const isDisabled = isPending || passkeyPending;
-    return (_jsxs(Button, { className: "w-full", variant: "tertiary", isDisabled: isDisabled, isPending: passkeyPending, onPress: () => signInPasskey(), children: [passkeyPending ? _jsx(Spinner, { color: "current", size: "sm" }) : _jsx(Fingerprint, {}), localization.auth.continueWith.replace("{{provider}}", localization.auth.passkey)] }));
+import { useAuth as e, useSignInPasskey as t } from "@better-auth-ui/react";
+import { Button as n, Spinner as r } from "@heroui/react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { Fingerprint as o } from "@gravity-ui/icons";
+//#region src/components/auth/passkey-button.tsx
+function s({ isPending: s }) {
+	let { localization: c, redirectTo: l, navigate: u } = e(), { mutate: d, isPending: f } = t({ onSuccess: () => u({ to: l }) });
+	return /* @__PURE__ */ a(n, {
+		className: "w-full",
+		variant: "tertiary",
+		isDisabled: s || f,
+		isPending: f,
+		onPress: () => d(),
+		children: [f ? /* @__PURE__ */ i(r, {
+			color: "current",
+			size: "sm"
+		}) : /* @__PURE__ */ i(o, {}), c.auth.continueWith.replace("{{provider}}", c.auth.passkey)]
+	});
 }
+//#endregion
+export { s as PasskeyButton };

package/dist/components/auth/provider-button.d.ts

@@ -0,0 +1,15 @@
+import { ButtonProps } from '@heroui/react';
+import { SocialProvider } from 'better-auth/social-providers';
+export type ProviderButtonProps = {
+    provider: SocialProvider;
+    label?: "continueWith" | "providerName" | "none";
+    isDisabled?: boolean;
+} & Omit<ButtonProps, "children" | "onPress" | "isPending">;
+/**
+ * Render a single social provider sign-in button with its own mutation and pending state.
+ *
+ * @param provider - The social provider this button signs in with.
+ * @param label - Label style: `"continueWith"` (e.g. "Continue with Google"), `"providerName"` (e.g. "Google"), or `"none"` (icon only).
+ * @param isDisabled - External disabled state (e.g. a sibling provider is mid-redirect).
+ */
+export declare function ProviderButton({ provider, label, isDisabled, variant, ...props }: ProviderButtonProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,29 @@
+import { providerIcons as e, useAuth as t, useSignInSocial as n } from "@better-auth-ui/react";
+import { Button as r, Spinner as i } from "@heroui/react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { useState as s } from "react";
+import { getProviderName as c } from "@better-auth-ui/core";
+//#region src/components/auth/provider-button.tsx
+function l({ provider: l, label: u = "continueWith", isDisabled: d, variant: f = "tertiary", ...p }) {
+	let { baseURL: m, localization: h, redirectTo: g } = t(), _ = `${m}${g}`, [v, y] = s(!1), { mutate: b, isPending: x } = n({ onSuccess: () => {
+		y(!0), setTimeout(() => {
+			y(!1);
+		}, 5e3);
+	} }), S = e[l], C = x || v;
+	return /* @__PURE__ */ o(r, {
+		variant: f,
+		isDisabled: d,
+		isPending: C,
+		onPress: () => b({
+			provider: l,
+			callbackURL: _
+		}),
+		...p,
+		children: [C ? /* @__PURE__ */ a(i, {
+			color: "current",
+			size: "sm"
+		}) : /* @__PURE__ */ a(S, {}), u === "continueWith" ? h.auth.continueWith.replace("{{provider}}", c(l)) : u === "providerName" ? c(l) : null]
+	});
+}
+//#endregion
+export { l as ProviderButton };

package/dist/components/auth/provider-buttons.d.ts

@@ -1,19 +1,13 @@
-import type { SocialProvider } from "better-auth/social-providers";
 export type ProviderButtonsProps = {
-    isPending: boolean;
+    isPending?: boolean;
     socialLayout?: SocialLayout;
-    signInSocial: (params: {
-        provider: SocialProvider;
-        callbackURL: string;
-    }) => void;
 };
 export type SocialLayout = "auto" | "horizontal" | "vertical" | "grid";
 /**
- * Render social provider sign-in buttons and handle initiation and pending state.
+ * Render social provider sign-in buttons. Each button owns its own sign-in mutation.
  *
- * @param isPending - Disables all provider buttons when true.
+ * @param isPending - External pending state (e.g. parent form submitting) that disables all buttons.
  * @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 declare function ProviderButtons({ isPending, socialLayout, signInSocial }: ProviderButtonsProps): import("react/jsx-runtime").JSX.Element;
+export declare function ProviderButtons({ isPending, socialLayout }: ProviderButtonsProps): import("react/jsx-runtime").JSX.Element;