@better-auth-ui/heroui 1.6.19 → 1.6.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@better-auth-ui/heroui",
-  "version": "1.6.19",
+  "version": "1.6.20",
   "type": "module",
   "scripts": {
     "build": "vite build",
@@ -43,7 +43,7 @@
     "@types/react": "^19.2.15",
     "@vitejs/plugin-react": "^6.0.2",
     "@vitest/browser-playwright": "^4.1.7",
-    "better-auth": "^1.6.11",
+    "better-auth": "^1.6.17",
     "bowser": "^2.11.0",
     "playwright": "^1.60.0",
     "react": "^19.2.6",
@@ -59,7 +59,7 @@
     "@internationalized/date": ">=3.12.2",
     "@tanstack/react-pacer": ">=0.22.1",
     "@tanstack/react-query": ">=5.100.14",
-    "better-auth": ">=1.6.11",
+    "better-auth": ">=1.6.17",
     "react": ">=19.2.6",
     "react-dom": ">=19.2.6",
     "bowser": ">=2.11.0"

package/src/components/auth/auth.tsx

@@ -37,6 +37,7 @@ const AUTH_VIEWS: Partial<Record<AuthView, ComponentType<AuthProps>>> = {
 /**
  * Render the appropriate authentication view based on the provided `view` or `path`.
  *
+ * @param className - Class name applied to the rendered view's card
  * @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")
@@ -45,12 +46,13 @@ const AUTH_VIEWS: Partial<Record<AuthView, ComponentType<AuthProps>>> = {
  * @returns The React element for the resolved authentication view
  */
 export function Auth({
+  className,
   path,
   socialLayout,
   socialPosition,
-  view,
-  ...props
-}: AuthProps & Omit<CardProps, "children">) {
+  variant,
+  view
+}: AuthProps) {
   const { basePaths, emailAndPassword, plugins, viewPaths, navigate } =
     useAuth()
 
@@ -107,9 +109,10 @@ export function Auth({
 
     return (
       <PluginView
+        className={className}
         socialLayout={socialLayout}
         socialPosition={socialPosition}
-        {...props}
+        variant={variant}
       />
     )
   }
@@ -125,9 +128,10 @@ export function Auth({
     if (Fallback) {
       return (
         <Fallback
+          className={className}
           socialLayout={socialLayout}
           socialPosition={socialPosition}
-          {...props}
+          variant={variant}
         />
       )
     }
@@ -143,9 +147,10 @@ export function Auth({
 
   return (
     <AuthView
+      className={className}
       socialLayout={socialLayout}
       socialPosition={socialPosition}
-      {...props}
+      variant={variant}
     />
   )
 }

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

@@ -34,11 +34,7 @@ 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 function ForgotPassword({
-  className,
-  variant,
-  ...props
-}: ForgotPasswordProps & Omit<CardProps, "children">) {
+export function ForgotPassword({ className, variant }: ForgotPasswordProps) {
   const {
     authClient,
     baseURL,
@@ -83,7 +79,6 @@ export function ForgotPassword({
     <Card
       className={cn("w-full max-w-sm gap-4 md:p-6", className)}
       variant={variant}
-      {...props}
     >
       <Card.Header>
         <Card.Title className="text-xl font-semibold mb-1">

package/src/components/auth/magic-link/magic-link.tsx

@@ -45,9 +45,8 @@ export function MagicLink({
   className,
   socialLayout,
   socialPosition = "bottom",
-  variant,
-  ...props
-}: MagicLinkProps & Omit<CardProps, "children">) {
+  variant
+}: MagicLinkProps) {
   const {
     authClient,
     basePaths,
@@ -90,7 +89,6 @@ export function MagicLink({
     <Card
       className={cn("w-full max-w-sm gap-4 md:p-6", className)}
       variant={variant}
-      {...props}
     >
       <Card.Header>
         <Card.Title className="text-xl font-semibold mb-1">

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

@@ -27,11 +27,7 @@ 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 function ResetPassword({
-  className,
-  variant,
-  ...props
-}: ResetPasswordProps & Omit<CardProps, "children">) {
+export function ResetPassword({ className, variant }: ResetPasswordProps) {
   const {
     authClient,
     basePaths,
@@ -95,7 +91,6 @@ export function ResetPassword({
     <Card
       className={cn("w-full max-w-sm gap-4 md:p-6", className)}
       variant={variant}
-      {...props}
     >
       <Card.Header>
         <Card.Title className="text-xl font-semibold mb-1">

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

@@ -43,9 +43,8 @@ export function SignIn({
   className,
   socialLayout,
   socialPosition = "bottom",
-  variant,
-  ...props
-}: SignInProps & Omit<CardProps, "children">) {
+  variant
+}: SignInProps) {
   const {
     authClient,
     basePaths,
@@ -128,7 +127,6 @@ export function SignIn({
     <Card
       className={cn("w-full max-w-sm gap-4 md:p-6", className)}
       variant={variant}
-      {...props}
     >
       <Card.Header>
         <Card.Title className="text-xl font-semibold mb-1">

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

@@ -47,9 +47,8 @@ export function SignUp({
   className,
   socialLayout,
   socialPosition = "bottom",
-  variant,
-  ...props
-}: SignUpProps & Omit<CardProps, "children">) {
+  variant
+}: SignUpProps) {
   const {
     additionalFields,
     authClient,
@@ -156,7 +155,6 @@ export function SignUp({
     <Card
       className={cn("w-full max-w-sm gap-4 md:p-6", className)}
       variant={variant}
-      {...props}
     >
       <Card.Header>
         <Card.Title className="text-xl font-semibold mb-1">

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

@@ -123,8 +123,8 @@ export function UserButton({
   return (
     <Dropdown>
       {size === "icon" ? (
-        <Dropdown.Trigger className={cn("rounded-full", className)}>
-          <UserAvatar />
+        <Dropdown.Trigger className={cn("rounded-full")}>
+          <UserAvatar className={className} />
         </Dropdown.Trigger>
       ) : (
         <Button

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

@@ -46,9 +46,8 @@ export function SignInUsername({
   className,
   socialLayout,
   socialPosition = "bottom",
-  variant,
-  ...props
-}: SignInUsernameProps & Omit<CardProps, "children">) {
+  variant
+}: SignInUsernameProps) {
   const {
     authClient,
     basePaths,
@@ -154,7 +153,6 @@ export function SignInUsername({
     <Card
       className={cn("w-full max-w-sm gap-4 md:p-6", className)}
       variant={variant}
-      {...props}
     >
       <Card.Header>
         <Card.Title className="text-xl font-semibold mb-1">

package/src/lib/auth/auth-plugin.ts

@@ -55,10 +55,12 @@ export type AuthPluginComponents = Omit<
   userMenuItems?: ComponentType<UserMenuItemProps>[]
 }
 
-/** Props the heroui `<Auth>` router spreads onto plugin-contributed auth views. */
-export type AuthViewProps = Omit<CardProps, "children"> & {
+/** Props the heroui `<Auth>` router passes to plugin-contributed auth views. */
+export type AuthViewProps = {
+  className?: string
   socialLayout?: SocialLayout
   socialPosition?: "top" | "bottom"
+  variant?: CardProps["variant"]
 }
 
 /** Props the heroui `<Settings>` router spreads onto plugin-contributed settings views. */