@better-auth-ui/heroui 1.6.4 → 1.6.6

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

@@ -2,135 +2,141 @@ import { FieldSeparator as e } from "../field-separator.js";
 import { ProviderButtons as t } from "../provider-buttons.js";
 import { usernamePlugin as n } from "../../../lib/auth/username-plugin.js";
 import { authMutationKeys as r } from "@better-auth-ui/core";
-import { useAuth as i, useAuthPlugin as a, useSendVerificationEmail as o, useSignInEmail as s, useSignInUsername as c } from "@better-auth-ui/react";
-import { Button as l, Card as u, Checkbox as d, Description as f, FieldError as p, Form as m, Input as h, Label as g, Link as _, Spinner as v, TextField as y, cn as b, toast as x } from "@heroui/react";
-import { useState as S } from "react";
-import { Fragment as C, jsx as w, jsxs as T } from "react/jsx-runtime";
-import { useIsMutating as E } from "@tanstack/react-query";
+import { useAuth as i, useAuthPlugin as a, useFetchOptions as o, useSendVerificationEmail as s, useSignInEmail as c, useSignInUsername as l } from "@better-auth-ui/react";
+import { Button as ee, Card as u, Checkbox as d, Description as f, FieldError as p, Form as te, Input as m, Label as h, Link as g, Spinner as ne, TextField as _, cn as v, toast as y } from "@heroui/react";
+import { useState as re } from "react";
+import { Fragment as b, jsx as x, jsxs as S } from "react/jsx-runtime";
+import { useIsMutating as C } from "@tanstack/react-query";
 //#region src/components/auth/username/sign-in-username.tsx
-function D({ className: D, socialLayout: O, socialPosition: k = "bottom", variant: A, ...j }) {
-	let { authClient: M, basePaths: N, baseURL: P, emailAndPassword: F, localization: I, plugins: L, redirectTo: R, socialProviders: z, viewPaths: B, navigate: V } = i(), { localization: H } = a(n), [U, W] = S(""), { mutate: G } = o(M, { onSuccess: () => x.success(I.auth.verificationEmailSent) });
-	function K(e) {
+function w({ className: w, socialLayout: T, socialPosition: E = "bottom", variant: D, ...O }) {
+	let { authClient: k, basePaths: A, baseURL: j, emailAndPassword: M, localization: N, plugins: P, redirectTo: F, socialProviders: I, viewPaths: L, navigate: R } = i(), { fetchOptions: z, resetFetchOptions: B } = o(), { localization: V } = a(n), [H, U] = re(""), { mutate: W } = s(k, { onSuccess: () => y.success(N.auth.verificationEmailSent) });
+	function G(e) {
 		return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e);
 	}
-	let { mutate: q } = s(M, {
+	let { mutate: K, isPending: q } = c(k, {
 		onError: (e, { email: t }) => {
-			W(""), e.error?.code === "EMAIL_NOT_VERIFIED" ? x.danger(e.error?.message || e.message, { actionProps: {
-				children: I.auth.resend,
-				onClick: () => G({
+			U(""), e.error?.code === "EMAIL_NOT_VERIFIED" ? y.danger(e.error?.message || e.message, { actionProps: {
+				children: N.auth.resend,
+				onClick: () => W({
 					email: t,
-					callbackURL: `${P}${R}`
+					callbackURL: `${j}${F}`
 				})
-			} }) : x.danger(e.error?.message || e.message);
+			} }) : y.danger(e.error?.message || e.message), B();
 		},
-		onSuccess: () => V({ to: R })
-	}), { mutate: J, isPending: Y } = c(M, {
+		onSuccess: () => R({ to: F })
+	}), { mutate: J, isPending: Y } = l(k, {
 		onError: (e) => {
-			W(""), x.danger(e.error?.message || e.message);
+			U(""), y.danger(e.error?.message || e.message), B();
 		},
-		onSuccess: () => V({ to: R })
-	}), X = (e) => {
+		onSuccess: () => R({ to: F })
+	}), ie = (e) => {
 		e.preventDefault();
 		let t = new FormData(e.currentTarget), n = t.get("email"), r = t.get("rememberMe") === "on";
-		K(n) ? q({
+		G(n) ? K({
 			email: n,
-			password: U,
-			...F?.rememberMe ? { rememberMe: r } : {}
+			password: H,
+			...M?.rememberMe ? { rememberMe: r } : {},
+			fetchOptions: z
 		}) : J({
 			username: n,
-			password: U,
-			...F?.rememberMe ? { rememberMe: r } : {}
+			password: H,
+			...M?.rememberMe ? { rememberMe: r } : {},
+			fetchOptions: z
 		});
-	}, Z = E({ mutationKey: r.signIn.all }) + E({ mutationKey: r.signUp.all }) > 0, Q = F?.enabled && !!z?.length;
-	return /* @__PURE__ */ T(u, {
-		className: b("w-full max-w-sm gap-4 md:p-6", D),
-		variant: A,
-		...j,
+	}, X = C({ mutationKey: r.signIn.all }) + C({ mutationKey: r.signUp.all }) > 0, Z = q || Y, Q = P.find((e) => e.captchaComponent)?.captchaComponent, $ = M?.enabled && !!I?.length;
+	return /* @__PURE__ */ S(u, {
+		className: v("w-full max-w-sm gap-4 md:p-6", w),
+		variant: D,
+		...O,
 		children: [
-			/* @__PURE__ */ w(u.Header, { children: /* @__PURE__ */ w(u.Title, {
+			/* @__PURE__ */ x(u.Header, { children: /* @__PURE__ */ x(u.Title, {
 				className: "text-xl font-semibold mb-1",
-				children: I.auth.signIn
+				children: N.auth.signIn
 			}) }),
-			/* @__PURE__ */ T(u.Content, {
+			/* @__PURE__ */ S(u.Content, {
 				className: "gap-4",
 				children: [
-					k === "top" && /* @__PURE__ */ T(C, { children: [!!z?.length && /* @__PURE__ */ w(t, { socialLayout: O }), Q && /* @__PURE__ */ w(e, { children: I.auth.or })] }),
-					F?.enabled && /* @__PURE__ */ T(m, {
-						onSubmit: X,
+					E === "top" && /* @__PURE__ */ S(b, { children: [!!I?.length && /* @__PURE__ */ x(t, { socialLayout: T }), $ && /* @__PURE__ */ x(e, { children: N.auth.or })] }),
+					M?.enabled && /* @__PURE__ */ S(te, {
+						onSubmit: ie,
 						className: "flex flex-col gap-4",
 						children: [
-							/* @__PURE__ */ T(y, {
+							/* @__PURE__ */ S(_, {
 								name: "email",
 								type: "text",
 								autoComplete: "username email",
-								isDisabled: Z,
+								isDisabled: X,
 								children: [
-									/* @__PURE__ */ w(g, { children: H.username }),
-									/* @__PURE__ */ w(h, {
-										placeholder: H.usernameOrEmailPlaceholder,
-										variant: A === "transparent" ? "primary" : "secondary",
+									/* @__PURE__ */ x(h, { children: V.username }),
+									/* @__PURE__ */ x(m, {
+										placeholder: V.usernameOrEmailPlaceholder,
+										variant: D === "transparent" ? "primary" : "secondary",
 										required: !0
 									}),
-									/* @__PURE__ */ w(p, {})
+									/* @__PURE__ */ x(p, {})
 								]
 							}),
-							/* @__PURE__ */ T(y, {
-								minLength: F?.minPasswordLength,
-								maxLength: F?.maxPasswordLength,
+							/* @__PURE__ */ S(_, {
+								minLength: M?.minPasswordLength,
+								maxLength: M?.maxPasswordLength,
 								name: "password",
 								type: "password",
 								autoComplete: "current-password",
-								isDisabled: Z,
-								value: U,
-								onChange: W,
+								isDisabled: X,
+								value: H,
+								onChange: U,
 								children: [
-									/* @__PURE__ */ w(g, { children: I.auth.password }),
-									/* @__PURE__ */ w(h, {
-										placeholder: I.auth.passwordPlaceholder,
-										variant: A === "transparent" ? "primary" : "secondary",
+									/* @__PURE__ */ x(h, { children: N.auth.password }),
+									/* @__PURE__ */ x(m, {
+										placeholder: N.auth.passwordPlaceholder,
+										variant: D === "transparent" ? "primary" : "secondary",
 										required: !0
 									}),
-									/* @__PURE__ */ w(p, {})
+									/* @__PURE__ */ x(p, {})
 								]
 							}),
-							F?.rememberMe && /* @__PURE__ */ T(d, {
+							M?.rememberMe && /* @__PURE__ */ S(d, {
 								name: "rememberMe",
-								isDisabled: Z,
-								variant: A === "transparent" ? "primary" : "secondary",
-								children: [/* @__PURE__ */ w(d.Control, { children: /* @__PURE__ */ w(d.Indicator, {}) }), /* @__PURE__ */ w(d.Content, { children: /* @__PURE__ */ w(g, { children: I.auth.rememberMe }) })]
+								isDisabled: X,
+								variant: D === "transparent" ? "primary" : "secondary",
+								children: [/* @__PURE__ */ x(d.Control, { children: /* @__PURE__ */ x(d.Indicator, {}) }), /* @__PURE__ */ x(d.Content, { children: /* @__PURE__ */ x(h, { children: N.auth.rememberMe }) })]
 							}),
-							/* @__PURE__ */ T("div", {
+							Q && /* @__PURE__ */ x("div", {
+								className: "flex justify-center",
+								children: Q
+							}),
+							/* @__PURE__ */ S("div", {
 								className: "flex flex-col gap-3",
-								children: [/* @__PURE__ */ T(l, {
+								children: [/* @__PURE__ */ S(ee, {
 									type: "submit",
 									className: "w-full",
-									isPending: Y || Z,
-									children: [Y && /* @__PURE__ */ w(v, {
+									isPending: Z || X,
+									children: [Z && /* @__PURE__ */ x(ne, {
 										color: "current",
 										size: "sm"
-									}), I.auth.signIn]
-								}), L.flatMap((e) => e.authButtons?.map((t, n) => /* @__PURE__ */ w(t, { view: "signIn" }, `${e.id}-${n.toString()}`)))]
+									}), N.auth.signIn]
+								}), P.flatMap((e) => e.authButtons?.map((t, n) => /* @__PURE__ */ x(t, { view: "signIn" }, `${e.id}-${n.toString()}`)))]
 							})
 						]
 					}),
-					k === "bottom" && /* @__PURE__ */ T(C, { children: [Q && /* @__PURE__ */ w(e, { children: I.auth.or }), !!z?.length && /* @__PURE__ */ w(t, { socialLayout: O })] })
+					E === "bottom" && /* @__PURE__ */ S(b, { children: [$ && /* @__PURE__ */ x(e, { children: N.auth.or }), !!I?.length && /* @__PURE__ */ x(t, { socialLayout: T })] })
 				]
 			}),
-			/* @__PURE__ */ T(u.Footer, {
+			/* @__PURE__ */ S(u.Footer, {
 				className: "flex-col gap-3",
-				children: [F?.forgotPassword && /* @__PURE__ */ w(_, {
-					href: `${N.auth}/${B.auth.forgotPassword}`,
+				children: [M?.forgotPassword && /* @__PURE__ */ x(g, {
+					href: `${A.auth}/${L.auth.forgotPassword}`,
 					className: "no-underline hover:underline",
-					children: I.auth.forgotPasswordLink
-				}), F?.enabled && /* @__PURE__ */ T(f, {
+					children: N.auth.forgotPasswordLink
+				}), M?.enabled && /* @__PURE__ */ S(f, {
 					className: "text-sm",
 					children: [
-						I.auth.needToCreateAnAccount,
+						N.auth.needToCreateAnAccount,
 						" ",
-						/* @__PURE__ */ w(_, {
-							href: `${N.auth}/${B.auth.signUp}`,
+						/* @__PURE__ */ x(g, {
+							href: `${A.auth}/${L.auth.signUp}`,
 							className: "text-accent no-underline hover:underline decoration-accent-hover",
-							children: I.auth.signUp
+							children: N.auth.signUp
 						})
 					]
 				})]
@@ -139,4 +145,4 @@ function D({ className: D, socialLayout: O, socialPosition: k = "bottom", varian
 	});
 }
 //#endregion
-export { D as SignInUsername };
+export { w as SignInUsername };

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

@@ -26,7 +26,6 @@ function h({ name: h, field: g, isPending: _, variant: v }) {
 		minLength: x,
 		maxLength: S,
 		isDisabled: _,
-		isRequired: g.required,
 		isReadOnly: g.readOnly,
 		value: T,
 		onChange: M,
@@ -34,7 +33,10 @@ function h({ name: h, field: g, isPending: _, variant: v }) {
 			/* @__PURE__ */ f(c, { children: g.label }),
 			/* @__PURE__ */ p(s, {
 				variant: v === "transparent" ? "primary" : "secondary",
-				children: [/* @__PURE__ */ f(s.Input, { placeholder: g.placeholder }), N && /* @__PURE__ */ f(s.Suffix, {
+				children: [/* @__PURE__ */ f(s.Input, {
+					placeholder: g.placeholder,
+					required: g.required
+				}), N && /* @__PURE__ */ f(s.Suffix, {
 					"aria-label": O?.available ? b.usernameAvailable : O?.available === !1 ? b.usernameTaken : void 0,
 					className: "px-2",
 					children: O?.available ? /* @__PURE__ */ f(i, { className: "text-success" }) : k || O?.available === !1 ? /* @__PURE__ */ f(a, { className: "text-danger" }) : /* @__PURE__ */ f(l, {

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@better-auth-ui/heroui",
-  "version": "1.6.4",
+  "version": "1.6.6",
   "type": "module",
   "scripts": {
     "build": "vite build",
-    "dev": "vite build --watch",
+    "dev": "tsc --watch",
     "test": "vitest"
   },
   "files": [
@@ -28,11 +28,11 @@
   },
   "devDependencies": {
     "@gravity-ui/icons": "^2.18.0",
-    "@heroui/react": "^3.0.2",
-    "@heroui/styles": "^3.0.2",
+    "@heroui/react": "^3.0.4",
+    "@heroui/styles": "^3.0.4",
     "@internationalized/date": "^3.12.1",
     "@tanstack/react-pacer": "^0.22.0",
-    "@tanstack/react-query": "^5.100.8",
+    "@tanstack/react-query": "^5.100.9",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.5.2",
     "@types/react": "^19.2.14",
@@ -41,22 +41,22 @@
     "better-auth": "^1.6.9",
     "bowser": "^2.11.0",
     "playwright": "^1.59.1",
-    "react": "^19.2.5",
-    "react-dom": "^19.2.5",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
     "vitest": "^4.1.5"
   },
   "peerDependencies": {
     "@better-auth-ui/core": "*",
     "@better-auth-ui/react": "*",
     "@gravity-ui/icons": ">=2.18.0",
-    "@heroui/react": ">=3.0.2",
-    "@heroui/styles": ">=3.0.2",
+    "@heroui/react": ">=3.0.4",
+    "@heroui/styles": ">=3.0.4",
     "@internationalized/date": ">=3.12.1",
     "@tanstack/react-pacer": ">=0.22.0",
-    "@tanstack/react-query": ">=5.100.8",
+    "@tanstack/react-query": ">=5.100.9",
     "better-auth": ">=1.6.9",
-    "react": ">=19.2.5",
-    "react-dom": ">=19.2.5",
+    "react": ">=19.2.6",
+    "react-dom": ">=19.2.6",
     "bowser": ">=2.11.0"
   },
   "repository": {

package/src/components/auth/delete-user/danger-zone.tsx

@@ -1,8 +1,11 @@
 import { useAuth } from "@better-auth-ui/react"
 import { type CardProps, cn } from "@heroui/react"
 import type { ComponentProps } from "react"
+
 import { DeleteUser } from "./delete-user"
-export type DangerZoneProps = Omit<ComponentProps<"div">, "children"> & {
+
+export type DangerZoneProps = {
+  className?: string
   variant?: CardProps["variant"]
 }
 
@@ -10,12 +13,16 @@ export type DangerZoneProps = Omit<ComponentProps<"div">, "children"> & {
  * Renders the danger zone heading and {@link DeleteUser}.
  * Registered as a `securityCard` by `deleteUserPlugin()`; gate by registering the plugin.
  */
-export function DangerZone({ className, variant, ...props }: DangerZoneProps) {
+export function DangerZone({
+  className,
+  variant,
+  ...props
+}: DangerZoneProps & ComponentProps<"div">) {
   const { localization } = useAuth()
 
   return (
     <div className={cn("flex w-full flex-col", className)} {...props}>
-      <h2 className={cn("text-sm font-semibold mb-3")}>
+      <h2 className={cn("text-sm font-semibold mb-3 text-danger")}>
         {localization.settings.dangerZone}
       </h2>
 

package/src/components/auth/delete-user/delete-user.tsx

@@ -11,7 +11,6 @@ import {
   Button,
   Card,
   type CardProps,
-  cn,
   FieldError,
   Form,
   Input,
@@ -91,11 +90,7 @@ export function DeleteUser({
   }
 
   return (
-    <Card
-      className={cn("border border-danger", className)}
-      variant={variant}
-      {...props}
-    >
+    <Card className={className} variant={variant} {...props}>
       <Card.Content className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
         <div>
           <p className="text-sm font-medium leading-tight">
@@ -111,7 +106,7 @@ export function DeleteUser({
           <Button
             isDisabled={!accounts}
             size="sm"
-            variant="danger"
+            variant="danger-soft"
             onPress={() => setConfirmOpen(true)}
           >
             {deleteUserLocalization.deleteUser}

package/src/components/auth/forgot-password.tsx

@@ -1,4 +1,8 @@
-import { useAuth, useRequestPasswordReset } from "@better-auth-ui/react"
+import {
+  useAuth,
+  useFetchOptions,
+  useRequestPasswordReset
+} from "@better-auth-ui/react"
 import {
   Button,
   Card,
@@ -35,11 +39,18 @@ export function ForgotPassword({
   variant,
   ...props
 }: ForgotPasswordProps & Omit<CardProps, "children">) {
-  const { authClient, basePaths, localization, viewPaths, navigate } = useAuth()
+  const { authClient, basePaths, localization, viewPaths, navigate, plugins } =
+    useAuth()
+
+  const { fetchOptions, resetFetchOptions } = useFetchOptions()
 
   const { mutate: requestPasswordReset, isPending } = useRequestPasswordReset(
     authClient,
     {
+      onError: (error) => {
+        toast.danger(error.error?.message || error.message)
+        resetFetchOptions()
+      },
       onSuccess: () => {
         toast.success(localization.auth.passwordResetEmailSent)
         navigate({ to: `${basePaths.auth}/${viewPaths.auth.signIn}` })
@@ -51,9 +62,16 @@ export function ForgotPassword({
     e.preventDefault()
 
     const formData = new FormData(e.currentTarget)
-    requestPasswordReset({ email: formData.get("email") as string })
+    requestPasswordReset({
+      email: formData.get("email") as string,
+      fetchOptions
+    })
   }
 
+  const Captcha = plugins.find(
+    (plugin) => plugin.captchaComponent
+  )?.captchaComponent
+
   return (
     <Card
       className={cn("w-full max-w-sm gap-4 md:p-6", className)}
@@ -85,11 +103,15 @@ export function ForgotPassword({
             <FieldError />
           </TextField>
 
-          <Button type="submit" className="w-full" isPending={isPending}>
-            {isPending && <Spinner color="current" size="sm" />}
+          {Captcha && <div className="flex justify-center">{Captcha}</div>}
+
+          <div className="flex flex-col gap-3">
+            <Button type="submit" className="w-full" isPending={isPending}>
+              {isPending && <Spinner color="current" size="sm" />}
 
-            {localization.auth.sendResetLink}
-          </Button>
+              {localization.auth.sendResetLink}
+            </Button>
+          </div>
         </Form>
       </Card.Content>
 

package/src/components/auth/sign-in.tsx

@@ -1,6 +1,7 @@
 import { authMutationKeys } from "@better-auth-ui/core"
 import {
   useAuth,
+  useFetchOptions,
   useSendVerificationEmail,
   useSignInEmail
 } from "@better-auth-ui/react"
@@ -58,6 +59,8 @@ export function SignIn({
     navigate
   } = useAuth()
 
+  const { fetchOptions, resetFetchOptions } = useFetchOptions()
+
   const [password, setPassword] = useState("")
 
   const { mutate: sendVerificationEmail } = useSendVerificationEmail(
@@ -87,6 +90,8 @@ export function SignIn({
         } else {
           toast.danger(error.error?.message || error.message)
         }
+
+        resetFetchOptions()
       },
       onSuccess: () => navigate({ to: redirectTo })
     }
@@ -102,7 +107,8 @@ export function SignIn({
     signInEmail({
       email,
       password,
-      ...(emailAndPassword?.rememberMe ? { rememberMe } : {})
+      ...(emailAndPassword?.rememberMe ? { rememberMe } : {}),
+      fetchOptions
     })
   }
 
@@ -114,6 +120,10 @@ export function SignIn({
   })
   const isPending = signInMutating + signUpMutating > 0
 
+  const Captcha = plugins.find(
+    (plugin) => plugin.captchaComponent
+  )?.captchaComponent
+
   const showSeparator = emailAndPassword?.enabled && !!socialProviders?.length
 
   return (
@@ -197,6 +207,8 @@ export function SignIn({
               </Checkbox>
             )}
 
+            {Captcha && <div className="flex justify-center">{Captcha}</div>}
+
             <div className="flex flex-col gap-3">
               <Button type="submit" className="w-full" isPending={isPending}>
                 {signInEmailPending && <Spinner color="current" size="sm" />}

package/src/components/auth/sign-up.tsx

@@ -2,7 +2,7 @@ import {
   authMutationKeys,
   parseAdditionalFieldValue
 } from "@better-auth-ui/core"
-import { useAuth, useSignUpEmail } from "@better-auth-ui/react"
+import { useAuth, useFetchOptions, useSignUpEmail } from "@better-auth-ui/react"
 import { Eye, EyeSlash } from "@gravity-ui/icons"
 import {
   Button,
@@ -63,6 +63,8 @@ export function SignUp({
     navigate
   } = useAuth()
 
+  const { fetchOptions, resetFetchOptions } = useFetchOptions()
+
   const [password, setPassword] = useState("")
   const [confirmPassword, setConfirmPassword] = useState("")
 
@@ -73,6 +75,7 @@ export function SignUp({
         setPassword("")
         setConfirmPassword("")
         toast.danger(error.error?.message || error.message)
+        resetFetchOptions()
       },
       onSuccess: () => {
         if (emailAndPassword?.requireEmailVerification) {
@@ -97,6 +100,10 @@ export function SignUp({
   })
   const isPending = signInMutating + signUpMutating > 0
 
+  const Captcha = plugins.find(
+    (plugin) => plugin.captchaComponent
+  )?.captchaComponent
+
   const handleSubmit = async (e: SyntheticEvent<HTMLFormElement>) => {
     e.preventDefault()
 
@@ -139,7 +146,8 @@ export function SignUp({
       name,
       email,
       password,
-      ...additionalFieldValues
+      ...additionalFieldValues,
+      fetchOptions
     })
   }
 
@@ -323,6 +331,8 @@ export function SignUp({
                 )
             )}
 
+            {Captcha && <div className="flex justify-center">{Captcha}</div>}
+
             <div className="flex flex-col gap-3">
               <Button type="submit" className="w-full" isPending={isPending}>
                 {signUpEmailPending && <Spinner color="current" size="sm" />}

package/src/components/auth/theme/theme-toggle-item.tsx

@@ -1,5 +1,5 @@
 import { useAuthPlugin } from "@better-auth-ui/react"
-import { Display, Moon, Sun } from "@gravity-ui/icons"
+import { Display, Moon, Palette, Sun } from "@gravity-ui/icons"
 import { Dropdown, Label, Tabs } from "@heroui/react"
 
 import { themePlugin } from "../../../lib/auth/theme-plugin"
@@ -67,6 +67,7 @@ export function ThemeToggleItem() {
       // menu-item activation.
       shouldCloseOnSelect={false}
     >
+      <Palette className="text-muted" />
       <Label>{localization.theme}</Label>
 
       <Tabs