@better-auth-ui/heroui 1.6.19 → 1.6.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@better-auth-ui/heroui",
-  "version": "1.6.19",
+  "version": "1.6.21",
   "type": "module",
   "scripts": {
     "build": "vite build",
@@ -33,8 +33,8 @@
   },
   "devDependencies": {
     "@gravity-ui/icons": "^2.18.0",
-    "@heroui/react": "^3.1.0",
-    "@heroui/styles": "^3.1.0",
+    "@heroui/react": "^3.2.0",
+    "@heroui/styles": "^3.2.0",
     "@internationalized/date": "^3.12.2",
     "@tanstack/react-pacer": "^0.22.1",
     "@tanstack/react-query": "^5.100.14",
@@ -42,24 +42,24 @@
     "@testing-library/user-event": "^14.5.2",
     "@types/react": "^19.2.15",
     "@vitejs/plugin-react": "^6.0.2",
-    "@vitest/browser-playwright": "^4.1.7",
-    "better-auth": "^1.6.11",
+    "@vitest/browser-playwright": "^4.1.9",
+    "better-auth": "^1.6.19",
     "bowser": "^2.11.0",
-    "playwright": "^1.60.0",
+    "playwright": "^1.61.0",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
-    "vitest": "^4.1.7"
+    "vitest": "^4.1.9"
   },
   "peerDependencies": {
     "@better-auth-ui/core": "*",
     "@better-auth-ui/react": "*",
     "@gravity-ui/icons": ">=2.18.0",
-    "@heroui/react": ">=3.1.0",
-    "@heroui/styles": ">=3.1.0",
+    "@heroui/react": ">=3.2.0",
+    "@heroui/styles": ">=3.2.0",
     "@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.19",
     "react": ">=19.2.6",
     "react-dom": ">=19.2.6",
     "bowser": ">=2.11.0"

package/src/components/auth/additional-field.tsx

@@ -258,11 +258,13 @@ export function AdditionalField({
         isDisabled={isPending}
         isReadOnly={field.readOnly}
       >
-        <Switch.Control>
-          <Switch.Thumb />
-        </Switch.Control>
+        <Switch.Content>
+          <Switch.Control>
+            <Switch.Thumb />
+          </Switch.Control>
 
-        <Label>{field.label}</Label>
+          {field.label}
+        </Switch.Content>
       </Switch>
     )
   }
@@ -279,12 +281,12 @@ export function AdditionalField({
         isRequired={field.required}
         variant={inputVariant}
       >
-        <Checkbox.Control>
-          <Checkbox.Indicator />
-        </Checkbox.Control>
-
         <Checkbox.Content>
-          <Label>{field.label}</Label>
+          <Checkbox.Control>
+            <Checkbox.Indicator />
+          </Checkbox.Control>
+
+          {field.label}
         </Checkbox.Content>
       </Checkbox>
     )

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/organization/organization-invitations.tsx

@@ -6,7 +6,7 @@ import {
   useHasPermission,
   useListOrganizationInvitations
 } from "@better-auth-ui/react"
-import { ChevronUp, Funnel, Xmark } from "@gravity-ui/icons"
+import { Funnel, Xmark } from "@gravity-ui/icons"
 import {
   Button,
   Chip,
@@ -17,7 +17,7 @@ import {
   type SortDescriptor,
   Table
 } from "@heroui/react"
-import { type ComponentProps, type ReactNode, useMemo, useState } from "react"
+import { type ComponentProps, useMemo, useState } from "react"
 
 import { organizationPlugin } from "../../../lib/auth/organization-plugin"
 import { InviteMemberDialog } from "./invite-member-dialog"
@@ -264,33 +264,33 @@ export function OrganizationInvitations({
               <Table.Header>
                 <Table.Column allowsSorting isRowHeader id="email">
                   {({ sortDirection }) => (
-                    <SortableColumnHeader sortDirection={sortDirection}>
+                    <Table.SortableColumnHeader sortDirection={sortDirection}>
                       {localization.auth.email}
-                    </SortableColumnHeader>
+                    </Table.SortableColumnHeader>
                   )}
                 </Table.Column>
 
                 <Table.Column allowsSorting id="createdAt">
                   {({ sortDirection }) => (
-                    <SortableColumnHeader sortDirection={sortDirection}>
+                    <Table.SortableColumnHeader sortDirection={sortDirection}>
                       {organizationLocalization.invitedAt}
-                    </SortableColumnHeader>
+                    </Table.SortableColumnHeader>
                   )}
                 </Table.Column>
 
                 <Table.Column allowsSorting id="role">
                   {({ sortDirection }) => (
-                    <SortableColumnHeader sortDirection={sortDirection}>
+                    <Table.SortableColumnHeader sortDirection={sortDirection}>
                       {organizationLocalization.role}
-                    </SortableColumnHeader>
+                    </Table.SortableColumnHeader>
                   )}
                 </Table.Column>
 
                 <Table.Column allowsSorting id="status">
                   {({ sortDirection }) => (
-                    <SortableColumnHeader sortDirection={sortDirection}>
+                    <Table.SortableColumnHeader sortDirection={sortDirection}>
                       {organizationLocalization.status}
-                    </SortableColumnHeader>
+                    </Table.SortableColumnHeader>
                   )}
                 </Table.Column>
 
@@ -326,26 +326,3 @@ export function OrganizationInvitations({
     </div>
   )
 }
-
-function SortableColumnHeader({
-  children,
-  sortDirection
-}: {
-  children: ReactNode
-  sortDirection?: "ascending" | "descending"
-}) {
-  return (
-    <span className="flex items-center justify-between">
-      {children}
-
-      {!!sortDirection && (
-        <ChevronUp
-          className={cn(
-            "size-3 transform transition-transform duration-100 ease-out",
-            sortDirection === "descending" ? "rotate-180" : ""
-          )}
-        />
-      )}
-    </span>
-  )
-}

package/src/components/auth/organization/organization-members.tsx

@@ -7,7 +7,7 @@ import {
   useListOrganizationMembers,
   useSession
 } from "@better-auth-ui/react"
-import { ChevronUp, Funnel, Xmark } from "@gravity-ui/icons"
+import { Funnel, Xmark } from "@gravity-ui/icons"
 import {
   Button,
   Chip,
@@ -19,7 +19,7 @@ import {
   Table
 } from "@heroui/react"
 import type { Member } from "better-auth/client"
-import { type ComponentProps, type ReactNode, useMemo, useState } from "react"
+import { type ComponentProps, useMemo, useState } from "react"
 
 import { organizationPlugin } from "../../../lib/auth/organization-plugin"
 import { InviteMemberDialog } from "./invite-member-dialog"
@@ -216,17 +216,17 @@ export function OrganizationMembers({
               <Table.Header>
                 <Table.Column allowsSorting isRowHeader id="user">
                   {({ sortDirection }) => (
-                    <SortableColumnHeader sortDirection={sortDirection}>
+                    <Table.SortableColumnHeader sortDirection={sortDirection}>
                       {organizationLocalization.member}
-                    </SortableColumnHeader>
+                    </Table.SortableColumnHeader>
                   )}
                 </Table.Column>
 
                 <Table.Column allowsSorting id="role">
                   {({ sortDirection }) => (
-                    <SortableColumnHeader sortDirection={sortDirection}>
+                    <Table.SortableColumnHeader sortDirection={sortDirection}>
                       {organizationLocalization.role}
-                    </SortableColumnHeader>
+                    </Table.SortableColumnHeader>
                   )}
                 </Table.Column>
 
@@ -259,26 +259,3 @@ export function OrganizationMembers({
     </div>
   )
 }
-
-function SortableColumnHeader({
-  children,
-  sortDirection
-}: {
-  children: ReactNode
-  sortDirection?: "ascending" | "descending"
-}) {
-  return (
-    <span className="flex items-center justify-between">
-      {children}
-
-      {!!sortDirection && (
-        <ChevronUp
-          className={cn(
-            "size-3 transform transition-transform duration-100 ease-out",
-            sortDirection === "descending" ? "rotate-180" : ""
-          )}
-        />
-      )}
-    </span>
-  )
-}

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">
@@ -215,12 +213,12 @@ export function SignIn({
                 isDisabled={isPending}
                 variant={variant === "transparent" ? "primary" : "secondary"}
               >
-                <Checkbox.Control>
-                  <Checkbox.Indicator />
-                </Checkbox.Control>
-
                 <Checkbox.Content>
-                  <Label>{localization.auth.rememberMe}</Label>
+                  <Checkbox.Control>
+                    <Checkbox.Indicator />
+                  </Checkbox.Control>
+
+                  {localization.auth.rememberMe}
                 </Checkbox.Content>
               </Checkbox>
             )}
@@ -263,7 +261,7 @@ export function SignIn({
         {emailAndPassword?.enabled && emailAndPassword?.forgotPassword && (
           <Link
             href={`${basePaths.auth}/${viewPaths.auth.forgotPassword}`}
-            className="no-underline hover:underline"
+            className="text-sm no-underline hover:underline"
           >
             {localization.auth.forgotPasswordLink}
           </Link>

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/theme/appearance.tsx

@@ -69,10 +69,10 @@ export function Appearance({
                 >
                   <Radio.Content className="gap-2">
                     <div className="flex gap-2 justify-between">
-                      <Label className="flex gap-2 items-center">
+                      <span className="flex gap-2 items-center">
                         <Display className="text-muted" />
                         {localization.system}
-                      </Label>
+                      </span>
 
                       <Radio.Control>
                         <Radio.Indicator />
@@ -98,10 +98,10 @@ export function Appearance({
                 >
                   <Radio.Content className="gap-2">
                     <div className="flex gap-2 justify-between">
-                      <Label className="flex gap-2 items-center">
+                      <span className="flex gap-2 items-center">
                         <Sun className="text-muted" />
                         {localization.light}
-                      </Label>
+                      </span>
 
                       <Radio.Control>
                         <Radio.Indicator />
@@ -127,10 +127,10 @@ export function Appearance({
                 >
                   <Radio.Content className="gap-2">
                     <div className="flex gap-2 justify-between">
-                      <Label className="flex gap-2 items-center">
+                      <span className="flex gap-2 items-center">
                         <Moon className="text-muted" />
                         {localization.dark}
-                      </Label>
+                      </span>
 
                       <Radio.Control>
                         <Radio.Indicator />

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">
@@ -239,12 +237,12 @@ export function SignInUsername({
                 isDisabled={isPending}
                 variant={variant === "transparent" ? "primary" : "secondary"}
               >
-                <Checkbox.Control>
-                  <Checkbox.Indicator />
-                </Checkbox.Control>
-
                 <Checkbox.Content>
-                  <Label>{localization.auth.rememberMe}</Label>
+                  <Checkbox.Control>
+                    <Checkbox.Indicator />
+                  </Checkbox.Control>
+
+                  {localization.auth.rememberMe}
                 </Checkbox.Content>
               </Checkbox>
             )}
@@ -291,7 +289,7 @@ export function SignInUsername({
         {emailAndPassword?.enabled && emailAndPassword?.forgotPassword && (
           <Link
             href={`${basePaths.auth}/${viewPaths.auth.forgotPassword}`}
-            className="no-underline hover:underline"
+            className="text-sm no-underline hover:underline"
           >
             {localization.auth.forgotPasswordLink}
           </Link>

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. */