@better-auth-ui/heroui 1.6.2 → 1.6.3

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

@@ -1,16 +1,17 @@
-import { AuthProvider as e } from "@better-auth-ui/react";
-import { RouterProvider as t } from "@heroui/react";
-import { jsx as n } from "react/jsx-runtime";
+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 r({ children: r, navigate: i, ...a }) {
-	return /* @__PURE__ */ n(e, {
-		navigate: i,
-		...a,
-		children: /* @__PURE__ */ n(t, {
-			navigate: (e) => i({ to: e }),
-			children: r
+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 { r as AuthProvider };
+export { a as AuthProvider };

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

@@ -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/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/forgot-password.d.ts

@@ -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

@@ -3,12 +3,9 @@ import { Button as n, Card as r, Description as i, FieldError as a, Form as o, I
 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({
-		onError: (e) => p.danger(e.error?.message || e.message),
-		onSuccess: () => {
-			p.success(b.auth.passwordResetEmailSent), S({ to: `${y.auth}/${x.auth.signIn}` });
-		}
-	});
+	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") });
 	}

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

@@ -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

@@ -2,104 +2,92 @@ 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, useSignInSocial as o } from "@better-auth-ui/react";
-import { Button as s, Card as c, Description as l, FieldError as u, Form as d, Input as f, Label as p, Link as m, Spinner as h, TextField as g, cn as _, toast as v } from "@heroui/react";
-import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
-import { useState as S } from "react";
+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 C({ className: C, socialLayout: w, socialPosition: T = "bottom", variant: E, ...D }) {
-	let { basePaths: O, baseURL: k, localization: A, passkey: j, redirectTo: M, socialProviders: N, viewPaths: P } = i(), [F, I] = S(""), { mutate: L, isPending: R } = a({
-		onError: (e) => v.danger(e.error?.message || e.message),
-		onSuccess: () => {
-			I(""), v.success(A.auth.magicLinkSent);
-		}
-	}), [z, B] = S(!1), { mutate: V, isPending: H } = o({
-		onError: (e) => v.danger(e.error?.message || e.message),
-		onSuccess: () => {
-			B(!0), setTimeout(() => {
-				B(!1);
-			}, 5e3);
-		}
-	}), U = R || H || z, W = (e) => {
-		e.preventDefault(), L({
-			email: F,
-			callbackURL: `${k}${M}`
+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}`
 		});
-	}, G = !!N?.length;
-	return /* @__PURE__ */ x(c, {
-		className: _("w-full max-w-sm p-4 md:p-6", C),
-		variant: E,
-		...D,
+	}, 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__ */ b(c.Header, { children: /* @__PURE__ */ b(c.Title, {
+			/* @__PURE__ */ y(s.Header, { children: /* @__PURE__ */ y(s.Title, {
 				className: "text-xl font-semibold mb-1",
-				children: A.auth.signIn
+				children: k.auth.signIn
 			}) }),
-			/* @__PURE__ */ x(c.Content, {
+			/* @__PURE__ */ b(s.Content, {
 				className: "gap-4",
 				children: [
-					T === "top" && /* @__PURE__ */ x(y, { children: [!!N?.length && /* @__PURE__ */ b(r, {
-						socialLayout: w,
-						signInSocial: V,
-						isPending: U
-					}), G && /* @__PURE__ */ b(e, { children: A.auth.or })] }),
-					/* @__PURE__ */ x(d, {
-						onSubmit: W,
+					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__ */ x(g, {
+						children: [/* @__PURE__ */ b(h, {
 							name: "email",
 							type: "email",
 							autoComplete: "email",
-							isDisabled: U,
-							value: F,
-							onChange: I,
+							isDisabled: R,
+							value: P,
+							onChange: F,
 							children: [
-								/* @__PURE__ */ b(p, { children: A.auth.email }),
-								/* @__PURE__ */ b(f, {
-									placeholder: A.auth.emailPlaceholder,
+								/* @__PURE__ */ y(f, { children: k.auth.email }),
+								/* @__PURE__ */ y(d, {
+									placeholder: k.auth.emailPlaceholder,
 									required: !0,
-									variant: E === "transparent" ? "primary" : "secondary"
+									variant: T === "transparent" ? "primary" : "secondary"
 								}),
-								/* @__PURE__ */ b(u, {})
+								/* @__PURE__ */ y(l, {})
 							]
-						}), /* @__PURE__ */ x("div", {
+						}), /* @__PURE__ */ b("div", {
 							className: "flex flex-col gap-3",
 							children: [
-								/* @__PURE__ */ x(s, {
+								/* @__PURE__ */ b(o, {
 									type: "submit",
 									className: "w-full",
-									isPending: U,
-									children: [U && /* @__PURE__ */ b(h, {
+									isPending: R,
+									children: [R && /* @__PURE__ */ y(m, {
 										color: "current",
 										size: "sm"
-									}), A.auth.sendMagicLink]
+									}), k.auth.sendMagicLink]
 								}),
-								/* @__PURE__ */ b(t, {
+								/* @__PURE__ */ y(t, {
 									view: "magicLink",
-									isPending: U
+									isPending: R
 								}),
-								j && /* @__PURE__ */ b(n, { isPending: U })
+								A && /* @__PURE__ */ y(n, { isPending: R })
 							]
 						})]
 					}),
-					T === "bottom" && /* @__PURE__ */ x(y, { children: [G && /* @__PURE__ */ b(e, { children: A.auth.or }), !!N?.length && /* @__PURE__ */ b(r, {
-						socialLayout: w,
-						signInSocial: V,
-						isPending: U
+					w === "bottom" && /* @__PURE__ */ b(v, { children: [B && /* @__PURE__ */ y(e, { children: k.auth.or }), !!M?.length && /* @__PURE__ */ y(r, {
+						socialLayout: C,
+						isPending: R
 					})] })
 				]
 			}),
-			/* @__PURE__ */ b(c.Footer, {
+			/* @__PURE__ */ y(s.Footer, {
 				className: "flex-col",
-				children: /* @__PURE__ */ x(l, {
+				children: /* @__PURE__ */ b(c, {
 					className: "text-sm",
 					children: [
-						A.auth.needToCreateAnAccount,
+						k.auth.needToCreateAnAccount,
 						" ",
-						/* @__PURE__ */ b(m, {
-							href: `${O.auth}/${P.auth.signUp}`,
+						/* @__PURE__ */ y(p, {
+							href: `${D.auth}/${N.auth.signUp}`,
 							className: "text-accent decoration-accent no-underline hover:underline",
-							children: A.auth.signUp
+							children: k.auth.signUp
 						})
 					]
 				})
@@ -108,4 +96,4 @@ function C({ className: C, socialLayout: w, socialPosition: T = "bottom", varian
 	});
 }
 //#endregion
-export { C as MagicLink };
+export { S as MagicLink };

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

@@ -1,24 +1,21 @@
 import { useAuth as e, useSignInPasskey as t } from "@better-auth-ui/react";
-import { Button as n, Spinner as r, toast as i } from "@heroui/react";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
-import { Fingerprint as s } from "@gravity-ui/icons";
+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 c({ isPending: c }) {
-	let { localization: l, redirectTo: u, navigate: d } = e(), { mutate: f, isPending: p } = t({
-		onError: (e) => i.danger(e.error?.message || e.message),
-		onSuccess: () => d({ to: u })
-	});
-	return /* @__PURE__ */ o(n, {
+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: c || p,
-		isPending: p,
-		onPress: () => f(),
-		children: [p ? /* @__PURE__ */ a(r, {
+		isDisabled: s || f,
+		isPending: f,
+		onPress: () => d(),
+		children: [f ? /* @__PURE__ */ i(r, {
 			color: "current",
 			size: "sm"
-		}) : /* @__PURE__ */ a(s, {}), l.auth.continueWith.replace("{{provider}}", l.auth.passkey)]
+		}) : /* @__PURE__ */ i(o, {}), c.auth.continueWith.replace("{{provider}}", c.auth.passkey)]
 	});
 }
 //#endregion
-export { c as PasskeyButton };
+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 { 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;

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

@@ -1,27 +1,20 @@
-import { providerIcons as e, useAuth as t } from "@better-auth-ui/react";
-import { Button as n, cn as r } from "@heroui/react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { useMemo as o } from "react";
-import { getProviderName as s } from "@better-auth-ui/core";
+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 c({ isPending: c, socialLayout: l = "auto", signInSocial: u }) {
-	let { baseURL: d, localization: f, redirectTo: p, socialProviders: m } = t(), h = `${d}${p}`, g = o(() => l === "auto" ? m?.length && m.length >= 4 ? "horizontal" : "vertical" : l, [l, m?.length]);
-	return /* @__PURE__ */ i("div", {
-		className: r("gap-3", g === "grid" && "grid grid-cols-2", g === "vertical" && "flex flex-col", g === "horizontal" && "flex flex-wrap"),
-		children: m?.map((t) => {
-			let o = e[t];
-			return /* @__PURE__ */ a(n, {
-				className: r("w-full", g === "horizontal" && "flex-1"),
-				variant: "tertiary",
-				isPending: c,
-				onPress: () => u({
-					provider: t,
-					callbackURL: h
-				}),
-				children: [/* @__PURE__ */ i(o, {}), g === "vertical" ? f.auth.continueWith.replace("{{provider}}", s(t)) : g === "grid" ? s(t) : null]
-			}, t);
-		})
+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 { c as ProviderButtons };
+export { a as ProviderButtons };

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

@@ -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

@@ -5,12 +5,9 @@ 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({
-		onError: (e) => p.danger(e.error?.message || e.message),
-		onSuccess: () => {
-			p.success(T.auth.passwordResetSuccess), D({ to: `${C.auth}/${E.auth.signIn}` });
-		}
-	}), [A, j] = _(!1), [M, N] = _(!1);
+	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}` }));
 	}, [

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

@@ -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;