better-auth-ui 3.2.5 → 3.2.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. package/LICENSE +1 -1
  2. package/README.md +31 -3
  3. package/dist/index.cjs +653 -661
  4. package/dist/index.d.cts +19 -15
  5. package/dist/index.d.ts +19 -15
  6. package/dist/index.js +665 -673
  7. package/dist/metafile-cjs.json +1 -1
  8. package/dist/metafile-esm.json +1 -1
  9. package/dist/tanstack.cjs +1 -1
  10. package/dist/tanstack.js +1 -1
  11. package/package.json +161 -156
  12. package/src/components/organization/organization-cell-view.tsx +2 -2
  13. package/src/components/organization/organization-invitations-card.tsx +3 -1
  14. package/src/components/organization/organization-view.tsx +6 -6
  15. package/src/components/organization/organizations-card.tsx +3 -1
  16. package/src/components/organization/user-invitations-card.tsx +3 -1
  17. package/src/components/ui/alert.tsx +37 -44
  18. package/src/components/ui/avatar.tsx +39 -44
  19. package/src/components/ui/button.tsx +28 -30
  20. package/src/components/ui/card.tsx +66 -82
  21. package/src/components/ui/checkbox.tsx +20 -24
  22. package/src/components/ui/dialog.tsx +92 -113
  23. package/src/components/ui/drawer.tsx +82 -101
  24. package/src/components/ui/dropdown-menu.tsx +183 -224
  25. package/src/components/ui/form.tsx +50 -41
  26. package/src/components/ui/input-otp.tsx +43 -51
  27. package/src/components/ui/input.tsx +16 -15
  28. package/src/components/ui/label.tsx +17 -17
  29. package/src/components/ui/select.tsx +130 -156
  30. package/src/components/ui/separator.tsx +13 -12
  31. package/src/components/ui/skeleton.tsx +5 -3
  32. package/src/components/ui/tabs.tsx +43 -54
  33. package/src/components/ui/textarea.tsx +8 -4
  34. package/src/lib/tanstack/use-tanstack-options.ts +1 -1
package/dist/tanstack.cjs CHANGED
@@ -10,7 +10,7 @@ var _react = require('react');
10
10
 
11
11
 
12
12
 
13
- var _betterauthtanstack = require('@daveyplate/better-auth-tanstack');
13
+ var _betterauthtanstack = require('better-auth-tanstack');
14
14
  var _reactquery = require('@tanstack/react-query');
15
15
 
16
16
  function useTanstackOptions({
package/dist/tanstack.js CHANGED
@@ -10,7 +10,7 @@ import { useCallback as useCallback2, useMemo as useMemo2 } from "react";
10
10
  import {
11
11
  AuthQueryContext,
12
12
  createAuthHooks
13
- } from "@daveyplate/better-auth-tanstack";
13
+ } from "better-auth-tanstack";
14
14
  import { useIsRestoring, useQueryClient } from "@tanstack/react-query";
15
15
  import { useCallback, useContext, useMemo } from "react";
16
16
  function useTanstackOptions({
package/package.json CHANGED
@@ -1,156 +1,161 @@
1
- {
2
- "name": "better-auth-ui",
3
- "homepage": "https://better-auth-ui.com",
4
- "version": "3.2.5",
5
- "description": "Plug & play shadcn/ui components for better-auth",
6
- "type": "module",
7
- "main": "./dist/index.cjs",
8
- "module": "./dist/index.js",
9
- "exports": {
10
- "./css": "./dist/style.css",
11
- ".": {
12
- "import": {
13
- "types": "./dist/index.d.ts",
14
- "default": "./dist/index.js"
15
- },
16
- "require": {
17
- "types": "./dist/index.d.cts",
18
- "default": "./dist/index.cjs"
19
- }
20
- },
21
- "./server": {
22
- "import": {
23
- "types": "./dist/server.d.ts",
24
- "default": "./dist/server.js"
25
- },
26
- "require": {
27
- "types": "./dist/server.d.cts",
28
- "default": "./dist/server.cjs"
29
- }
30
- },
31
- "./tanstack": {
32
- "import": {
33
- "types": "./dist/tanstack.d.ts",
34
- "default": "./dist/tanstack.js"
35
- },
36
- "require": {
37
- "types": "./dist/tanstack.d.cts",
38
- "default": "./dist/tanstack.cjs"
39
- }
40
- },
41
- "./instantdb": {
42
- "import": {
43
- "types": "./dist/instantdb.d.ts",
44
- "default": "./dist/instantdb.js"
45
- },
46
- "require": {
47
- "types": "./dist/instantdb.d.cts",
48
- "default": "./dist/instantdb.cjs"
49
- }
50
- },
51
- "./triplit": {
52
- "import": {
53
- "types": "./dist/triplit.d.ts",
54
- "default": "./dist/triplit.js"
55
- },
56
- "require": {
57
- "types": "./dist/triplit.d.cts",
58
- "default": "./dist/triplit.cjs"
59
- }
60
- }
61
- },
62
- "files": [
63
- "src",
64
- "dist"
65
- ],
66
- "keywords": [
67
- "typescript",
68
- "react",
69
- "better-auth",
70
- "shadcn",
71
- "nextjs"
72
- ],
73
- "author": "daveycodez",
74
- "license": "MIT",
75
- "devDependencies": {
76
- "@biomejs/biome": "2.2.4",
77
- "@radix-ui/react-checkbox": "^1.3.3",
78
- "@radix-ui/react-context": "^1.1.2",
79
- "@radix-ui/react-dialog": "^1.1.15",
80
- "@radix-ui/react-label": "^2.1.7",
81
- "@radix-ui/react-primitive": "^2.1.3",
82
- "@radix-ui/react-separator": "^1.1.7",
83
- "@radix-ui/react-slot": "^1.2.3",
84
- "@radix-ui/react-tabs": "^1.1.13",
85
- "@radix-ui/react-use-callback-ref": "^1.1.1",
86
- "@radix-ui/react-use-layout-effect": "^1.1.1",
87
- "@tanstack/react-query": "^5.90.2",
88
- "@types/node": "^24.5.2",
89
- "@types/react": "^19.1.13",
90
- "@types/react-dom": "^19.1.9",
91
- "@types/react-google-recaptcha": "^2.1.9",
92
- "better-auth": "^1.3.14",
93
- "class-variance-authority": "^0.7.1",
94
- "clsx": "^2.1.1",
95
- "esbuild-plugin-preserve-directives": "^0.0.11",
96
- "lucide-react": "^0.544.0",
97
- "shx": "^0.4.0",
98
- "tailwind-merge": "^3.3.1",
99
- "tailwindcss-animate": "^1.0.7",
100
- "tsc-watch": "^7.1.1",
101
- "tsup": "^8.5.0",
102
- "tsx": "^4.20.5",
103
- "turbo": "^2.5.7",
104
- "typescript": "^5.9.2",
105
- "zod": "^4.1.11"
106
- },
107
- "peerDependencies": {
108
- "@daveyplate/better-auth-tanstack": "^1.3.6",
109
- "@hookform/resolvers": ">=5.2.0",
110
- "@instantdb/react": ">=0.18.0",
111
- "@marsidev/react-turnstile": ">=1.1.0",
112
- "@radix-ui/react-avatar": ">=1.1.0",
113
- "@radix-ui/react-checkbox": ">=1.1.0",
114
- "@radix-ui/react-context": ">=1.1.0",
115
- "@radix-ui/react-dialog": ">=1.1.0",
116
- "@radix-ui/react-dropdown-menu": ">=2.1.0",
117
- "@radix-ui/react-label": ">=2.1.0",
118
- "@radix-ui/react-primitive": ">=2.0.0",
119
- "@radix-ui/react-select": ">=2.2.0",
120
- "@radix-ui/react-separator": ">=1.1.0",
121
- "@radix-ui/react-slot": ">=1.1.0",
122
- "@radix-ui/react-tabs": ">=1.1.0",
123
- "@radix-ui/react-use-callback-ref": ">=1.1.0",
124
- "@radix-ui/react-use-layout-effect": ">=1.1.0",
125
- "@tanstack/react-query": ">=5.66.0",
126
- "@triplit/client": ">=1.0.0",
127
- "@triplit/react": ">=1.0.0",
128
- "better-auth": "^1.3.13",
129
- "class-variance-authority": ">=0.7.0",
130
- "clsx": ">=2.1.0",
131
- "input-otp": ">=1.4.0",
132
- "lucide-react": ">=0.469.0",
133
- "react": ">=18.0.0",
134
- "react-dom": ">=18.0.0",
135
- "react-hook-form": ">=7.55.0",
136
- "sonner": ">=1.7.0",
137
- "tailwind-merge": ">=2.6.0",
138
- "tailwindcss": ">=3.0.0",
139
- "zod": ">=3.0.0"
140
- },
141
- "dependencies": {
142
- "@better-fetch/fetch": "^1.1.18",
143
- "@hcaptcha/react-hcaptcha": "^1.12.1",
144
- "@noble/hashes": "^2.0.1",
145
- "@react-email/components": "^0.5.4",
146
- "@wojtekmaj/react-recaptcha-v3": "^0.1.4",
147
- "react-google-recaptcha": "^3.1.0",
148
- "react-qr-code": "^2.0.18",
149
- "ua-parser-js": "^2.0.5",
150
- "vaul": "^1.1.2"
151
- },
152
- "scripts": {
153
- "build": "tsup --clean --dts && shx cp src/style.css dist/style.css",
154
- "dev": "tsc-watch"
155
- }
156
- }
1
+ {
2
+ "name": "better-auth-ui",
3
+ "homepage": "https://better-auth-ui.com",
4
+ "version": "3.2.11",
5
+ "description": "Plug & play shadcn/ui components for better-auth",
6
+ "scripts": {
7
+ "build": "tsup --clean --dts && shx cp src/style.css dist/style.css",
8
+ "dev": "tsc-watch",
9
+ "prepublishOnly": "shx rm -rf dist && turbo build"
10
+ },
11
+ "type": "module",
12
+ "main": "./dist/index.cjs",
13
+ "module": "./dist/index.js",
14
+ "exports": {
15
+ "./css": "./dist/style.css",
16
+ ".": {
17
+ "import": {
18
+ "types": "./dist/index.d.ts",
19
+ "default": "./dist/index.js"
20
+ },
21
+ "require": {
22
+ "types": "./dist/index.d.cts",
23
+ "default": "./dist/index.cjs"
24
+ }
25
+ },
26
+ "./server": {
27
+ "import": {
28
+ "types": "./dist/server.d.ts",
29
+ "default": "./dist/server.js"
30
+ },
31
+ "require": {
32
+ "types": "./dist/server.d.cts",
33
+ "default": "./dist/server.cjs"
34
+ }
35
+ },
36
+ "./tanstack": {
37
+ "import": {
38
+ "types": "./dist/tanstack.d.ts",
39
+ "default": "./dist/tanstack.js"
40
+ },
41
+ "require": {
42
+ "types": "./dist/tanstack.d.cts",
43
+ "default": "./dist/tanstack.cjs"
44
+ }
45
+ },
46
+ "./instantdb": {
47
+ "import": {
48
+ "types": "./dist/instantdb.d.ts",
49
+ "default": "./dist/instantdb.js"
50
+ },
51
+ "require": {
52
+ "types": "./dist/instantdb.d.cts",
53
+ "default": "./dist/instantdb.cjs"
54
+ }
55
+ },
56
+ "./triplit": {
57
+ "import": {
58
+ "types": "./dist/triplit.d.ts",
59
+ "default": "./dist/triplit.js"
60
+ },
61
+ "require": {
62
+ "types": "./dist/triplit.d.cts",
63
+ "default": "./dist/triplit.cjs"
64
+ }
65
+ }
66
+ },
67
+ "files": [
68
+ "src",
69
+ "dist"
70
+ ],
71
+ "keywords": [
72
+ "typescript",
73
+ "react",
74
+ "better-auth",
75
+ "shadcn",
76
+ "nextjs"
77
+ ],
78
+ "author": "daveycodez",
79
+ "license": "MIT",
80
+ "devDependencies": {
81
+ "@biomejs/biome": "2.2.4",
82
+ "@radix-ui/react-checkbox": "^1.3.3",
83
+ "@radix-ui/react-context": "^1.1.2",
84
+ "@radix-ui/react-dialog": "^1.1.15",
85
+ "@radix-ui/react-label": "^2.1.7",
86
+ "@radix-ui/react-primitive": "^2.1.3",
87
+ "@radix-ui/react-separator": "^1.1.7",
88
+ "@radix-ui/react-slot": "^1.2.3",
89
+ "@radix-ui/react-tabs": "^1.1.13",
90
+ "@radix-ui/react-use-callback-ref": "^1.1.1",
91
+ "@radix-ui/react-use-layout-effect": "^1.1.1",
92
+ "@tanstack/react-query": "^5.90.2",
93
+ "@types/node": "^24.5.2",
94
+ "@types/react": "^19.1.13",
95
+ "@types/react-dom": "^19.1.9",
96
+ "@types/react-google-recaptcha": "^2.1.9",
97
+ "better-auth": "^1.3.14",
98
+ "class-variance-authority": "^0.7.1",
99
+ "clsx": "^2.1.1",
100
+ "esbuild-plugin-preserve-directives": "^0.0.11",
101
+ "lucide-react": "^0.544.0",
102
+ "shx": "^0.4.0",
103
+ "tailwind-merge": "^3.3.1",
104
+ "tailwindcss-animate": "^1.0.7",
105
+ "tsc-watch": "^7.1.1",
106
+ "tsup": "^8.5.0",
107
+ "tsx": "^4.20.5",
108
+ "turbo": "^2.5.7",
109
+ "typescript": "^5.9.2",
110
+ "zod": "^4.1.11"
111
+ },
112
+ "peerDependencies": {
113
+ "@daveyplate/better-auth-tanstack": "^1.3.6",
114
+ "@hookform/resolvers": ">=5.2.0",
115
+ "@instantdb/react": ">=0.18.0",
116
+ "@marsidev/react-turnstile": ">=1.1.0",
117
+ "@radix-ui/react-avatar": ">=1.1.0",
118
+ "@radix-ui/react-checkbox": ">=1.1.0",
119
+ "@radix-ui/react-context": ">=1.1.0",
120
+ "@radix-ui/react-dialog": ">=1.1.0",
121
+ "@radix-ui/react-dropdown-menu": ">=2.1.0",
122
+ "@radix-ui/react-label": ">=2.1.0",
123
+ "@radix-ui/react-primitive": ">=2.0.0",
124
+ "@radix-ui/react-select": ">=2.2.0",
125
+ "@radix-ui/react-separator": ">=1.1.0",
126
+ "@radix-ui/react-slot": ">=1.1.0",
127
+ "@radix-ui/react-tabs": ">=1.1.0",
128
+ "@radix-ui/react-use-callback-ref": ">=1.1.0",
129
+ "@radix-ui/react-use-layout-effect": ">=1.1.0",
130
+ "@tanstack/react-query": ">=5.66.0",
131
+ "@triplit/client": ">=1.0.0",
132
+ "@triplit/react": ">=1.0.0",
133
+ "better-auth": "^1.3.13",
134
+ "class-variance-authority": ">=0.7.0",
135
+ "clsx": ">=2.1.0",
136
+ "input-otp": ">=1.4.0",
137
+ "lucide-react": ">=0.469.0",
138
+ "react": ">=18.0.0",
139
+ "react-dom": ">=18.0.0",
140
+ "react-hook-form": ">=7.55.0",
141
+ "sonner": ">=1.7.0",
142
+ "tailwind-merge": ">=2.6.0",
143
+ "tailwindcss": ">=3.0.0",
144
+ "zod": ">=3.0.0"
145
+ },
146
+ "dependencies": {
147
+ "@better-fetch/fetch": "^1.1.18",
148
+ "@hcaptcha/react-hcaptcha": "^1.12.1",
149
+ "@noble/hashes": "^2.0.1",
150
+ "@react-email/components": "^0.5.4",
151
+ "@wojtekmaj/react-recaptcha-v3": "^0.1.4",
152
+ "react-google-recaptcha": "^3.1.0",
153
+ "react-qr-code": "^2.0.18",
154
+ "ua-parser-js": "^2.0.5",
155
+ "vaul": "^1.1.2"
156
+ },
157
+ "pnpm": {
158
+ "overrides": {}
159
+ },
160
+ "packageManager": "pnpm@10.16.1"
161
+ }
@@ -21,7 +21,7 @@ export interface OrganizationViewClassNames {
21
21
  skeleton?: string
22
22
  }
23
23
 
24
- export interface OrganizationViewProps {
24
+ export interface OrganizationCellViewProps {
25
25
  className?: string
26
26
  classNames?: OrganizationViewClassNames
27
27
  isPending?: boolean
@@ -41,7 +41,7 @@ export function OrganizationCellView({
41
41
  size,
42
42
  organization,
43
43
  localization: propLocalization
44
- }: OrganizationViewProps) {
44
+ }: OrganizationCellViewProps) {
45
45
  const { localization: contextLocalization } = useContext(AuthUIContext)
46
46
 
47
47
  const localization = { ...contextLocalization, ...propLocalization }
@@ -10,13 +10,15 @@ import { SettingsCard } from "../settings/shared/settings-card"
10
10
  import { CardContent } from "../ui/card"
11
11
  import { InvitationCell } from "./invitation-cell"
12
12
 
13
+ export type OrganizationInvitationsCardProps = SettingsCardProps & { slug?: string }
14
+
13
15
  export function OrganizationInvitationsCard({
14
16
  className,
15
17
  classNames,
16
18
  localization: localizationProp,
17
19
  slug: slugProp,
18
20
  ...props
19
- }: SettingsCardProps & { slug?: string }) {
21
+ }: OrganizationInvitationsCardProps) {
20
22
  const {
21
23
  localization: contextLocalization,
22
24
  organization: organizationOptions
@@ -22,7 +22,7 @@ import { OrganizationInvitationsCard } from "./organization-invitations-card"
22
22
  import { OrganizationMembersCard } from "./organization-members-card"
23
23
  import { OrganizationSettingsCards } from "./organization-settings-cards"
24
24
 
25
- export type OrganizationViewPageProps = Omit<AccountViewProps, "view"> & {
25
+ export type OrganizationViewProps = Omit<AccountViewProps, "view"> & {
26
26
  slug?: string
27
27
  view?: OrganizationViewPath
28
28
  }
@@ -36,7 +36,7 @@ export function OrganizationView({
36
36
  view: viewProp,
37
37
  hideNav,
38
38
  slug: slugProp
39
- }: OrganizationViewPageProps) {
39
+ }: OrganizationViewProps) {
40
40
  const {
41
41
  organization: organizationOptions,
42
42
  localization: contextLocalization,
@@ -70,9 +70,9 @@ export function OrganizationView({
70
70
  view: OrganizationViewPath
71
71
  label: string
72
72
  }[] = [
73
- { view: "SETTINGS", label: localization.SETTINGS },
74
- { view: "MEMBERS", label: localization.MEMBERS }
75
- ]
73
+ { view: "SETTINGS", label: localization.SETTINGS },
74
+ { view: "MEMBERS", label: localization.MEMBERS }
75
+ ]
76
76
 
77
77
  if (apiKey) {
78
78
  navItems.push({
@@ -173,7 +173,7 @@ export function OrganizationView({
173
173
  ? "font-semibold"
174
174
  : "text-foreground/70",
175
175
  view === item.view &&
176
- classNames?.sidebar?.buttonActive
176
+ classNames?.sidebar?.buttonActive
177
177
  )}
178
178
  variant="ghost"
179
179
  >
@@ -11,12 +11,14 @@ import { CardContent } from "../ui/card"
11
11
  import { CreateOrganizationDialog } from "./create-organization-dialog"
12
12
  import { OrganizationCell } from "./organization-cell"
13
13
 
14
+ export type OrganizationsCardProps = SettingsCardProps
15
+
14
16
  export function OrganizationsCard({
15
17
  className,
16
18
  classNames,
17
19
  localization,
18
20
  ...props
19
- }: SettingsCardProps) {
21
+ }: OrganizationsCardProps) {
20
22
  const {
21
23
  hooks: { useListOrganizations },
22
24
  localization: contextLocalization
@@ -17,12 +17,14 @@ import {
17
17
  } from "../ui/dropdown-menu"
18
18
  import { UserAvatar } from "../user-avatar"
19
19
 
20
+ export type UserInvitationsCardProps = SettingsCardProps
21
+
20
22
  export function UserInvitationsCard({
21
23
  className,
22
24
  classNames,
23
25
  localization: localizationProp,
24
26
  ...props
25
- }: SettingsCardProps) {
27
+ }: UserInvitationsCardProps) {
26
28
  const {
27
29
  hooks: { useListUserInvitations, useListOrganizations },
28
30
  localization: contextLocalization
@@ -4,13 +4,13 @@ import { cva, type VariantProps } from "class-variance-authority"
4
4
  import { cn } from "../../lib/utils"
5
5
 
6
6
  const alertVariants = cva(
7
- "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",
7
+ "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",
8
8
  {
9
9
  variants: {
10
10
  variant: {
11
- default: "bg-card text-card-foreground",
11
+ default: "bg-background text-foreground",
12
12
  destructive:
13
- "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
13
+ "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
14
14
  },
15
15
  },
16
16
  defaultVariants: {
@@ -19,48 +19,41 @@ const alertVariants = cva(
19
19
  }
20
20
  )
21
21
 
22
- function Alert({
23
- className,
24
- variant,
25
- ...props
26
- }: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
27
- return (
28
- <div
29
- data-slot="alert"
30
- role="alert"
31
- className={cn(alertVariants({ variant }), className)}
32
- {...props}
33
- />
34
- )
35
- }
22
+ const Alert = React.forwardRef<
23
+ HTMLDivElement,
24
+ React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
25
+ >(({ className, variant, ...props }, ref) => (
26
+ <div
27
+ ref={ref}
28
+ role="alert"
29
+ className={cn(alertVariants({ variant }), className)}
30
+ {...props}
31
+ />
32
+ ))
33
+ Alert.displayName = "Alert"
36
34
 
37
- function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
38
- return (
39
- <div
40
- data-slot="alert-title"
41
- className={cn(
42
- "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
43
- className
44
- )}
45
- {...props}
46
- />
47
- )
48
- }
35
+ const AlertTitle = React.forwardRef<
36
+ HTMLParagraphElement,
37
+ React.HTMLAttributes<HTMLHeadingElement>
38
+ >(({ className, ...props }, ref) => (
39
+ <h5
40
+ ref={ref}
41
+ className={cn("mb-1 font-medium leading-none tracking-tight", className)}
42
+ {...props}
43
+ />
44
+ ))
45
+ AlertTitle.displayName = "AlertTitle"
49
46
 
50
- function AlertDescription({
51
- className,
52
- ...props
53
- }: React.ComponentProps<"div">) {
54
- return (
55
- <div
56
- data-slot="alert-description"
57
- className={cn(
58
- "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
59
- className
60
- )}
61
- {...props}
62
- />
63
- )
64
- }
47
+ const AlertDescription = React.forwardRef<
48
+ HTMLParagraphElement,
49
+ React.HTMLAttributes<HTMLParagraphElement>
50
+ >(({ className, ...props }, ref) => (
51
+ <div
52
+ ref={ref}
53
+ className={cn("text-sm [&_p]:leading-relaxed", className)}
54
+ {...props}
55
+ />
56
+ ))
57
+ AlertDescription.displayName = "AlertDescription"
65
58
 
66
59
  export { Alert, AlertTitle, AlertDescription }