better-auth-ui 3.2.6 → 3.2.12

package/package.json

@@ -1,156 +1,161 @@
-{
-  "name": "better-auth-ui",
-  "homepage": "https://better-auth-ui.com",
-  "version": "3.2.6",
-  "description": "Plug & play shadcn/ui components for better-auth",
-  "type": "module",
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
-  "exports": {
-    "./css": "./dist/style.css",
-    ".": {
-      "import": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/index.js"
-      },
-      "require": {
-        "types": "./dist/index.d.cts",
-        "default": "./dist/index.cjs"
-      }
-    },
-    "./server": {
-      "import": {
-        "types": "./dist/server.d.ts",
-        "default": "./dist/server.js"
-      },
-      "require": {
-        "types": "./dist/server.d.cts",
-        "default": "./dist/server.cjs"
-      }
-    },
-    "./tanstack": {
-      "import": {
-        "types": "./dist/tanstack.d.ts",
-        "default": "./dist/tanstack.js"
-      },
-      "require": {
-        "types": "./dist/tanstack.d.cts",
-        "default": "./dist/tanstack.cjs"
-      }
-    },
-    "./instantdb": {
-      "import": {
-        "types": "./dist/instantdb.d.ts",
-        "default": "./dist/instantdb.js"
-      },
-      "require": {
-        "types": "./dist/instantdb.d.cts",
-        "default": "./dist/instantdb.cjs"
-      }
-    },
-    "./triplit": {
-      "import": {
-        "types": "./dist/triplit.d.ts",
-        "default": "./dist/triplit.js"
-      },
-      "require": {
-        "types": "./dist/triplit.d.cts",
-        "default": "./dist/triplit.cjs"
-      }
-    }
-  },
-  "files": [
-    "src",
-    "dist"
-  ],
-  "keywords": [
-    "typescript",
-    "react",
-    "better-auth",
-    "shadcn",
-    "nextjs"
-  ],
-  "author": "daveycodez",
-  "license": "MIT",
-  "devDependencies": {
-    "@biomejs/biome": "2.2.4",
-    "@radix-ui/react-checkbox": "^1.3.3",
-    "@radix-ui/react-context": "^1.1.2",
-    "@radix-ui/react-dialog": "^1.1.15",
-    "@radix-ui/react-label": "^2.1.7",
-    "@radix-ui/react-primitive": "^2.1.3",
-    "@radix-ui/react-separator": "^1.1.7",
-    "@radix-ui/react-slot": "^1.2.3",
-    "@radix-ui/react-tabs": "^1.1.13",
-    "@radix-ui/react-use-callback-ref": "^1.1.1",
-    "@radix-ui/react-use-layout-effect": "^1.1.1",
-    "@tanstack/react-query": "^5.90.2",
-    "@types/node": "^24.5.2",
-    "@types/react": "^19.1.13",
-    "@types/react-dom": "^19.1.9",
-    "@types/react-google-recaptcha": "^2.1.9",
-    "better-auth": "^1.3.14",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "esbuild-plugin-preserve-directives": "^0.0.11",
-    "lucide-react": "^0.544.0",
-    "shx": "^0.4.0",
-    "tailwind-merge": "^3.3.1",
-    "tailwindcss-animate": "^1.0.7",
-    "tsc-watch": "^7.1.1",
-    "tsup": "^8.5.0",
-    "tsx": "^4.20.5",
-    "turbo": "^2.5.7",
-    "typescript": "^5.9.2",
-    "zod": "^4.1.11"
-  },
-  "peerDependencies": {
-    "@daveyplate/better-auth-tanstack": "^1.3.6",
-    "@hookform/resolvers": ">=5.2.0",
-    "@instantdb/react": ">=0.18.0",
-    "@marsidev/react-turnstile": ">=1.1.0",
-    "@radix-ui/react-avatar": ">=1.1.0",
-    "@radix-ui/react-checkbox": ">=1.1.0",
-    "@radix-ui/react-context": ">=1.1.0",
-    "@radix-ui/react-dialog": ">=1.1.0",
-    "@radix-ui/react-dropdown-menu": ">=2.1.0",
-    "@radix-ui/react-label": ">=2.1.0",
-    "@radix-ui/react-primitive": ">=2.0.0",
-    "@radix-ui/react-select": ">=2.2.0",
-    "@radix-ui/react-separator": ">=1.1.0",
-    "@radix-ui/react-slot": ">=1.1.0",
-    "@radix-ui/react-tabs": ">=1.1.0",
-    "@radix-ui/react-use-callback-ref": ">=1.1.0",
-    "@radix-ui/react-use-layout-effect": ">=1.1.0",
-    "@tanstack/react-query": ">=5.66.0",
-    "@triplit/client": ">=1.0.0",
-    "@triplit/react": ">=1.0.0",
-    "better-auth": "^1.3.13",
-    "class-variance-authority": ">=0.7.0",
-    "clsx": ">=2.1.0",
-    "input-otp": ">=1.4.0",
-    "lucide-react": ">=0.469.0",
-    "react": ">=18.0.0",
-    "react-dom": ">=18.0.0",
-    "react-hook-form": ">=7.55.0",
-    "sonner": ">=1.7.0",
-    "tailwind-merge": ">=2.6.0",
-    "tailwindcss": ">=3.0.0",
-    "zod": ">=3.0.0"
-  },
-  "dependencies": {
-    "@better-fetch/fetch": "^1.1.18",
-    "@hcaptcha/react-hcaptcha": "^1.12.1",
-    "@noble/hashes": "^2.0.1",
-    "@react-email/components": "^0.5.4",
-    "@wojtekmaj/react-recaptcha-v3": "^0.1.4",
-    "react-google-recaptcha": "^3.1.0",
-    "react-qr-code": "^2.0.18",
-    "ua-parser-js": "^2.0.5",
-    "vaul": "^1.1.2"
-  },
-  "scripts": {
-    "build": "tsup --clean --dts && shx cp src/style.css dist/style.css",
-    "dev": "tsc-watch"
-  }
-}
+{
+    "name": "better-auth-ui",
+    "homepage": "https://better-auth-ui.com",
+    "version": "3.2.12",
+    "description": "Plug & play shadcn/ui components for better-auth",
+    "scripts": {
+        "build": "tsup --clean --dts && shx cp src/style.css dist/style.css",
+        "dev": "tsc-watch",
+        "prepublishOnly": "shx rm -rf dist && turbo build"
+    },
+    "type": "module",
+    "main": "./dist/index.cjs",
+    "module": "./dist/index.js",
+    "exports": {
+        "./css": "./dist/style.css",
+        ".": {
+            "import": {
+                "types": "./dist/index.d.ts",
+                "default": "./dist/index.js"
+            },
+            "require": {
+                "types": "./dist/index.d.cts",
+                "default": "./dist/index.cjs"
+            }
+        },
+        "./server": {
+            "import": {
+                "types": "./dist/server.d.ts",
+                "default": "./dist/server.js"
+            },
+            "require": {
+                "types": "./dist/server.d.cts",
+                "default": "./dist/server.cjs"
+            }
+        },
+        "./tanstack": {
+            "import": {
+                "types": "./dist/tanstack.d.ts",
+                "default": "./dist/tanstack.js"
+            },
+            "require": {
+                "types": "./dist/tanstack.d.cts",
+                "default": "./dist/tanstack.cjs"
+            }
+        },
+        "./instantdb": {
+            "import": {
+                "types": "./dist/instantdb.d.ts",
+                "default": "./dist/instantdb.js"
+            },
+            "require": {
+                "types": "./dist/instantdb.d.cts",
+                "default": "./dist/instantdb.cjs"
+            }
+        },
+        "./triplit": {
+            "import": {
+                "types": "./dist/triplit.d.ts",
+                "default": "./dist/triplit.js"
+            },
+            "require": {
+                "types": "./dist/triplit.d.cts",
+                "default": "./dist/triplit.cjs"
+            }
+        }
+    },
+    "files": [
+        "src",
+        "dist"
+    ],
+    "keywords": [
+        "typescript",
+        "react",
+        "better-auth",
+        "shadcn",
+        "nextjs"
+    ],
+    "author": "daveycodez",
+    "license": "MIT",
+    "devDependencies": {
+        "@biomejs/biome": "2.2.4",
+        "@radix-ui/react-checkbox": "^1.3.3",
+        "@radix-ui/react-context": "^1.1.2",
+        "@radix-ui/react-dialog": "^1.1.15",
+        "@radix-ui/react-label": "^2.1.7",
+        "@radix-ui/react-primitive": "^2.1.3",
+        "@radix-ui/react-separator": "^1.1.7",
+        "@radix-ui/react-slot": "^1.2.3",
+        "@radix-ui/react-tabs": "^1.1.13",
+        "@radix-ui/react-use-callback-ref": "^1.1.1",
+        "@radix-ui/react-use-layout-effect": "^1.1.1",
+        "@tanstack/react-query": "^5.90.2",
+        "@types/node": "^24.5.2",
+        "@types/react": "^19.1.13",
+        "@types/react-dom": "^19.1.9",
+        "@types/react-google-recaptcha": "^2.1.9",
+        "better-auth": "^1.3.14",
+        "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
+        "esbuild-plugin-preserve-directives": "^0.0.11",
+        "lucide-react": "^0.544.0",
+        "shx": "^0.4.0",
+        "tailwind-merge": "^3.3.1",
+        "tailwindcss-animate": "^1.0.7",
+        "tsc-watch": "^7.1.1",
+        "tsup": "^8.5.0",
+        "tsx": "^4.20.5",
+        "turbo": "^2.5.7",
+        "typescript": "^5.9.2",
+        "zod": "^4.1.11"
+    },
+    "peerDependencies": {
+        "@daveyplate/better-auth-tanstack": "^1.3.6",
+        "@hookform/resolvers": ">=5.2.0",
+        "@instantdb/react": ">=0.18.0",
+        "@marsidev/react-turnstile": ">=1.1.0",
+        "@radix-ui/react-avatar": ">=1.1.0",
+        "@radix-ui/react-checkbox": ">=1.1.0",
+        "@radix-ui/react-context": ">=1.1.0",
+        "@radix-ui/react-dialog": ">=1.1.0",
+        "@radix-ui/react-dropdown-menu": ">=2.1.0",
+        "@radix-ui/react-label": ">=2.1.0",
+        "@radix-ui/react-primitive": ">=2.0.0",
+        "@radix-ui/react-select": ">=2.2.0",
+        "@radix-ui/react-separator": ">=1.1.0",
+        "@radix-ui/react-slot": ">=1.1.0",
+        "@radix-ui/react-tabs": ">=1.1.0",
+        "@radix-ui/react-use-callback-ref": ">=1.1.0",
+        "@radix-ui/react-use-layout-effect": ">=1.1.0",
+        "@tanstack/react-query": ">=5.66.0",
+        "@triplit/client": ">=1.0.0",
+        "@triplit/react": ">=1.0.0",
+        "better-auth": "^1.3.13",
+        "class-variance-authority": ">=0.7.0",
+        "clsx": ">=2.1.0",
+        "input-otp": ">=1.4.0",
+        "lucide-react": ">=0.469.0",
+        "react": ">=18.0.0",
+        "react-dom": ">=18.0.0",
+        "react-hook-form": ">=7.55.0",
+        "sonner": ">=1.7.0",
+        "tailwind-merge": ">=2.6.0",
+        "tailwindcss": ">=3.0.0",
+        "zod": ">=3.0.0"
+    },
+    "dependencies": {
+        "@better-fetch/fetch": "^1.1.18",
+        "@hcaptcha/react-hcaptcha": "^1.12.1",
+        "@noble/hashes": "^2.0.1",
+        "@react-email/components": "^0.5.4",
+        "@wojtekmaj/react-recaptcha-v3": "^0.1.4",
+        "react-google-recaptcha": "^3.1.0",
+        "react-qr-code": "^2.0.18",
+        "ua-parser-js": "^2.0.5",
+        "vaul": "^1.1.2"
+    },
+    "pnpm": {
+        "overrides": {}
+    },
+    "packageManager": "pnpm@10.16.1"
+}

package/src/components/organization/organization-cell-view.tsx

@@ -21,7 +21,7 @@ export interface OrganizationViewClassNames {
     skeleton?: string
 }
 
-export interface OrganizationViewProps {
+export interface OrganizationCellViewProps {
     className?: string
     classNames?: OrganizationViewClassNames
     isPending?: boolean
@@ -41,7 +41,7 @@ export function OrganizationCellView({
     size,
     organization,
     localization: propLocalization
-}: OrganizationViewProps) {
+}: OrganizationCellViewProps) {
     const { localization: contextLocalization } = useContext(AuthUIContext)
 
     const localization = { ...contextLocalization, ...propLocalization }

package/src/components/organization/organization-invitations-card.tsx

@@ -10,13 +10,15 @@ import { SettingsCard } from "../settings/shared/settings-card"
 import { CardContent } from "../ui/card"
 import { InvitationCell } from "./invitation-cell"
 
+export type OrganizationInvitationsCardProps = SettingsCardProps & { slug?: string }
+
 export function OrganizationInvitationsCard({
     className,
     classNames,
     localization: localizationProp,
     slug: slugProp,
     ...props
-}: SettingsCardProps & { slug?: string }) {
+}: OrganizationInvitationsCardProps) {
     const {
         localization: contextLocalization,
         organization: organizationOptions

package/src/components/organization/organization-view.tsx

@@ -22,7 +22,7 @@ import { OrganizationInvitationsCard } from "./organization-invitations-card"
 import { OrganizationMembersCard } from "./organization-members-card"
 import { OrganizationSettingsCards } from "./organization-settings-cards"
 
-export type OrganizationViewPageProps = Omit<AccountViewProps, "view"> & {
+export type OrganizationViewProps = Omit<AccountViewProps, "view"> & {
     slug?: string
     view?: OrganizationViewPath
 }
@@ -36,7 +36,7 @@ export function OrganizationView({
     view: viewProp,
     hideNav,
     slug: slugProp
-}: OrganizationViewPageProps) {
+}: OrganizationViewProps) {
     const {
         organization: organizationOptions,
         localization: contextLocalization,
@@ -70,9 +70,9 @@ export function OrganizationView({
         view: OrganizationViewPath
         label: string
     }[] = [
-        { view: "SETTINGS", label: localization.SETTINGS },
-        { view: "MEMBERS", label: localization.MEMBERS }
-    ]
+            { view: "SETTINGS", label: localization.SETTINGS },
+            { view: "MEMBERS", label: localization.MEMBERS }
+        ]
 
     if (apiKey) {
         navItems.push({
@@ -173,7 +173,7 @@ export function OrganizationView({
                                             ? "font-semibold"
                                             : "text-foreground/70",
                                         view === item.view &&
-                                            classNames?.sidebar?.buttonActive
+                                        classNames?.sidebar?.buttonActive
                                     )}
                                     variant="ghost"
                                 >

package/src/components/organization/organizations-card.tsx

@@ -11,12 +11,14 @@ import { CardContent } from "../ui/card"
 import { CreateOrganizationDialog } from "./create-organization-dialog"
 import { OrganizationCell } from "./organization-cell"
 
+export type OrganizationsCardProps = SettingsCardProps
+
 export function OrganizationsCard({
     className,
     classNames,
     localization,
     ...props
-}: SettingsCardProps) {
+}: OrganizationsCardProps) {
     const {
         hooks: { useListOrganizations },
         localization: contextLocalization

package/src/components/organization/user-invitations-card.tsx

@@ -17,12 +17,14 @@ import {
 } from "../ui/dropdown-menu"
 import { UserAvatar } from "../user-avatar"
 
+export type UserInvitationsCardProps = SettingsCardProps
+
 export function UserInvitationsCard({
     className,
     classNames,
     localization: localizationProp,
     ...props
-}: SettingsCardProps) {
+}: UserInvitationsCardProps) {
     const {
         hooks: { useListUserInvitations, useListOrganizations },
         localization: contextLocalization

package/src/components/ui/alert.tsx

@@ -4,13 +4,13 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "../../lib/utils"
 
 const alertVariants = cva(
-  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
   {
     variants: {
       variant: {
-        default: "bg-card text-card-foreground",
+        default: "bg-background text-foreground",
         destructive:
-          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
       },
     },
     defaultVariants: {
@@ -19,48 +19,41 @@ const alertVariants = cva(
   }
 )
 
-function Alert({
-  className,
-  variant,
-  ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
-  return (
-    <div
-      data-slot="alert"
-      role="alert"
-      className={cn(alertVariants({ variant }), className)}
-      {...props}
-    />
-  )
-}
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+  />
+))
+Alert.displayName = "Alert"
 
-function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="alert-title"
-      className={cn(
-        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
-        className
-      )}
-      {...props}
-    />
-  )
-}
+const AlertTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+AlertTitle.displayName = "AlertTitle"
 
-function AlertDescription({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="alert-description"
-      className={cn(
-        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
-        className
-      )}
-      {...props}
-    />
-  )
-}
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm [&_p]:leading-relaxed", className)}
+    {...props}
+  />
+))
+AlertDescription.displayName = "AlertDescription"
 
 export { Alert, AlertTitle, AlertDescription }

package/src/components/ui/avatar.tsx

@@ -1,53 +1,48 @@
-"use client"
-
 import * as React from "react"
 import * as AvatarPrimitive from "@radix-ui/react-avatar"
 
 import { cn } from "../../lib/utils"
 
-function Avatar({
-  className,
-  ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
-  return (
-    <AvatarPrimitive.Root
-      data-slot="avatar"
-      className={cn(
-        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
-        className
-      )}
-      {...props}
-    />
-  )
-}
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className
+    )}
+    {...props}
+  />
+))
+Avatar.displayName = AvatarPrimitive.Root.displayName
 
-function AvatarImage({
-  className,
-  ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
-  return (
-    <AvatarPrimitive.Image
-      data-slot="avatar-image"
-      className={cn("aspect-square size-full", className)}
-      {...props}
-    />
-  )
-}
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props}
+  />
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
 
-function AvatarFallback({
-  className,
-  ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
-  return (
-    <AvatarPrimitive.Fallback
-      data-slot="avatar-fallback"
-      className={cn(
-        "bg-muted flex size-full items-center justify-center rounded-full",
-        className
-      )}
-      {...props}
-    />
-  )
-}
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
 
 export { Avatar, AvatarImage, AvatarFallback }