@better-auth-ui/heroui 1.6.20 → 1.6.22
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.
- package/dist/index.js +295 -295
- package/dist/plugins.js +908 -918
- package/package.json +10 -10
- package/src/components/auth/additional-field.tsx +11 -9
- package/src/components/auth/organization/create-organization-dialog.tsx +8 -2
- package/src/components/auth/organization/organization-invitations.tsx +10 -33
- package/src/components/auth/organization/organization-members.tsx +6 -29
- package/src/components/auth/sign-in.tsx +6 -6
- package/src/components/auth/theme/appearance.tsx +6 -6
- package/src/components/auth/username/sign-in-username.tsx +6 -6
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@better-auth-ui/heroui",
|
|
3
|
-
"version": "1.6.
|
|
3
|
+
"version": "1.6.22",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"build": "vite build",
|
|
@@ -33,8 +33,8 @@
|
|
|
33
33
|
},
|
|
34
34
|
"devDependencies": {
|
|
35
35
|
"@gravity-ui/icons": "^2.18.0",
|
|
36
|
-
"@heroui/react": "^3.
|
|
37
|
-
"@heroui/styles": "^3.
|
|
36
|
+
"@heroui/react": "^3.2.0",
|
|
37
|
+
"@heroui/styles": "^3.2.0",
|
|
38
38
|
"@internationalized/date": "^3.12.2",
|
|
39
39
|
"@tanstack/react-pacer": "^0.22.1",
|
|
40
40
|
"@tanstack/react-query": "^5.100.14",
|
|
@@ -42,24 +42,24 @@
|
|
|
42
42
|
"@testing-library/user-event": "^14.5.2",
|
|
43
43
|
"@types/react": "^19.2.15",
|
|
44
44
|
"@vitejs/plugin-react": "^6.0.2",
|
|
45
|
-
"@vitest/browser-playwright": "^4.1.
|
|
46
|
-
"better-auth": "^1.6.
|
|
45
|
+
"@vitest/browser-playwright": "^4.1.9",
|
|
46
|
+
"better-auth": "^1.6.19",
|
|
47
47
|
"bowser": "^2.11.0",
|
|
48
|
-
"playwright": "^1.
|
|
48
|
+
"playwright": "^1.61.0",
|
|
49
49
|
"react": "^19.2.6",
|
|
50
50
|
"react-dom": "^19.2.6",
|
|
51
|
-
"vitest": "^4.1.
|
|
51
|
+
"vitest": "^4.1.9"
|
|
52
52
|
},
|
|
53
53
|
"peerDependencies": {
|
|
54
54
|
"@better-auth-ui/core": "*",
|
|
55
55
|
"@better-auth-ui/react": "*",
|
|
56
56
|
"@gravity-ui/icons": ">=2.18.0",
|
|
57
|
-
"@heroui/react": ">=3.
|
|
58
|
-
"@heroui/styles": ">=3.
|
|
57
|
+
"@heroui/react": ">=3.2.0",
|
|
58
|
+
"@heroui/styles": ">=3.2.0",
|
|
59
59
|
"@internationalized/date": ">=3.12.2",
|
|
60
60
|
"@tanstack/react-pacer": ">=0.22.1",
|
|
61
61
|
"@tanstack/react-query": ">=5.100.14",
|
|
62
|
-
"better-auth": ">=1.6.
|
|
62
|
+
"better-auth": ">=1.6.19",
|
|
63
63
|
"react": ">=19.2.6",
|
|
64
64
|
"react-dom": ">=19.2.6",
|
|
65
65
|
"bowser": ">=2.11.0"
|
|
@@ -258,11 +258,13 @@ export function AdditionalField({
|
|
|
258
258
|
isDisabled={isPending}
|
|
259
259
|
isReadOnly={field.readOnly}
|
|
260
260
|
>
|
|
261
|
-
<Switch.
|
|
262
|
-
<Switch.
|
|
263
|
-
|
|
261
|
+
<Switch.Content>
|
|
262
|
+
<Switch.Control>
|
|
263
|
+
<Switch.Thumb />
|
|
264
|
+
</Switch.Control>
|
|
264
265
|
|
|
265
|
-
|
|
266
|
+
{field.label}
|
|
267
|
+
</Switch.Content>
|
|
266
268
|
</Switch>
|
|
267
269
|
)
|
|
268
270
|
}
|
|
@@ -279,12 +281,12 @@ export function AdditionalField({
|
|
|
279
281
|
isRequired={field.required}
|
|
280
282
|
variant={inputVariant}
|
|
281
283
|
>
|
|
282
|
-
<Checkbox.Control>
|
|
283
|
-
<Checkbox.Indicator />
|
|
284
|
-
</Checkbox.Control>
|
|
285
|
-
|
|
286
284
|
<Checkbox.Content>
|
|
287
|
-
<
|
|
285
|
+
<Checkbox.Control>
|
|
286
|
+
<Checkbox.Indicator />
|
|
287
|
+
</Checkbox.Control>
|
|
288
|
+
|
|
289
|
+
{field.label}
|
|
288
290
|
</Checkbox.Content>
|
|
289
291
|
</Checkbox>
|
|
290
292
|
)
|
|
@@ -43,6 +43,7 @@ export function CreateOrganizationDialog({
|
|
|
43
43
|
|
|
44
44
|
const [name, setName] = useState("")
|
|
45
45
|
const [slug, setSlug] = useState("")
|
|
46
|
+
const [slugEdited, setSlugEdited] = useState(false)
|
|
46
47
|
|
|
47
48
|
const { mutate: createOrganization, isPending: isCreating } =
|
|
48
49
|
useCreateOrganization(authClient as OrganizationAuthClient, {
|
|
@@ -58,12 +59,14 @@ export function CreateOrganizationDialog({
|
|
|
58
59
|
if (!isOpen) {
|
|
59
60
|
setSlug("")
|
|
60
61
|
setName("")
|
|
62
|
+
setSlugEdited(false)
|
|
61
63
|
}
|
|
62
64
|
}, [isOpen])
|
|
63
65
|
|
|
64
66
|
useEffect(() => {
|
|
67
|
+
if (slugEdited) return
|
|
65
68
|
setSlug(sanitizeSlug(name))
|
|
66
|
-
}, [name])
|
|
69
|
+
}, [name, slugEdited])
|
|
67
70
|
|
|
68
71
|
return (
|
|
69
72
|
<AlertDialog.Backdrop isOpen={isOpen} onOpenChange={onOpenChange}>
|
|
@@ -111,7 +114,10 @@ export function CreateOrganizationDialog({
|
|
|
111
114
|
|
|
112
115
|
<SlugField
|
|
113
116
|
value={slug}
|
|
114
|
-
onChange={
|
|
117
|
+
onChange={(value) => {
|
|
118
|
+
setSlug(value)
|
|
119
|
+
setSlugEdited(true)
|
|
120
|
+
}}
|
|
115
121
|
isDisabled={isCreating}
|
|
116
122
|
variant="secondary"
|
|
117
123
|
/>
|
|
@@ -6,7 +6,7 @@ import {
|
|
|
6
6
|
useHasPermission,
|
|
7
7
|
useListOrganizationInvitations
|
|
8
8
|
} from "@better-auth-ui/react"
|
|
9
|
-
import {
|
|
9
|
+
import { Funnel, Xmark } from "@gravity-ui/icons"
|
|
10
10
|
import {
|
|
11
11
|
Button,
|
|
12
12
|
Chip,
|
|
@@ -17,7 +17,7 @@ import {
|
|
|
17
17
|
type SortDescriptor,
|
|
18
18
|
Table
|
|
19
19
|
} from "@heroui/react"
|
|
20
|
-
import { type ComponentProps,
|
|
20
|
+
import { type ComponentProps, useMemo, useState } from "react"
|
|
21
21
|
|
|
22
22
|
import { organizationPlugin } from "../../../lib/auth/organization-plugin"
|
|
23
23
|
import { InviteMemberDialog } from "./invite-member-dialog"
|
|
@@ -264,33 +264,33 @@ export function OrganizationInvitations({
|
|
|
264
264
|
<Table.Header>
|
|
265
265
|
<Table.Column allowsSorting isRowHeader id="email">
|
|
266
266
|
{({ sortDirection }) => (
|
|
267
|
-
<SortableColumnHeader sortDirection={sortDirection}>
|
|
267
|
+
<Table.SortableColumnHeader sortDirection={sortDirection}>
|
|
268
268
|
{localization.auth.email}
|
|
269
|
-
</SortableColumnHeader>
|
|
269
|
+
</Table.SortableColumnHeader>
|
|
270
270
|
)}
|
|
271
271
|
</Table.Column>
|
|
272
272
|
|
|
273
273
|
<Table.Column allowsSorting id="createdAt">
|
|
274
274
|
{({ sortDirection }) => (
|
|
275
|
-
<SortableColumnHeader sortDirection={sortDirection}>
|
|
275
|
+
<Table.SortableColumnHeader sortDirection={sortDirection}>
|
|
276
276
|
{organizationLocalization.invitedAt}
|
|
277
|
-
</SortableColumnHeader>
|
|
277
|
+
</Table.SortableColumnHeader>
|
|
278
278
|
)}
|
|
279
279
|
</Table.Column>
|
|
280
280
|
|
|
281
281
|
<Table.Column allowsSorting id="role">
|
|
282
282
|
{({ sortDirection }) => (
|
|
283
|
-
<SortableColumnHeader sortDirection={sortDirection}>
|
|
283
|
+
<Table.SortableColumnHeader sortDirection={sortDirection}>
|
|
284
284
|
{organizationLocalization.role}
|
|
285
|
-
</SortableColumnHeader>
|
|
285
|
+
</Table.SortableColumnHeader>
|
|
286
286
|
)}
|
|
287
287
|
</Table.Column>
|
|
288
288
|
|
|
289
289
|
<Table.Column allowsSorting id="status">
|
|
290
290
|
{({ sortDirection }) => (
|
|
291
|
-
<SortableColumnHeader sortDirection={sortDirection}>
|
|
291
|
+
<Table.SortableColumnHeader sortDirection={sortDirection}>
|
|
292
292
|
{organizationLocalization.status}
|
|
293
|
-
</SortableColumnHeader>
|
|
293
|
+
</Table.SortableColumnHeader>
|
|
294
294
|
)}
|
|
295
295
|
</Table.Column>
|
|
296
296
|
|
|
@@ -326,26 +326,3 @@ export function OrganizationInvitations({
|
|
|
326
326
|
</div>
|
|
327
327
|
)
|
|
328
328
|
}
|
|
329
|
-
|
|
330
|
-
function SortableColumnHeader({
|
|
331
|
-
children,
|
|
332
|
-
sortDirection
|
|
333
|
-
}: {
|
|
334
|
-
children: ReactNode
|
|
335
|
-
sortDirection?: "ascending" | "descending"
|
|
336
|
-
}) {
|
|
337
|
-
return (
|
|
338
|
-
<span className="flex items-center justify-between">
|
|
339
|
-
{children}
|
|
340
|
-
|
|
341
|
-
{!!sortDirection && (
|
|
342
|
-
<ChevronUp
|
|
343
|
-
className={cn(
|
|
344
|
-
"size-3 transform transition-transform duration-100 ease-out",
|
|
345
|
-
sortDirection === "descending" ? "rotate-180" : ""
|
|
346
|
-
)}
|
|
347
|
-
/>
|
|
348
|
-
)}
|
|
349
|
-
</span>
|
|
350
|
-
)
|
|
351
|
-
}
|
|
@@ -7,7 +7,7 @@ import {
|
|
|
7
7
|
useListOrganizationMembers,
|
|
8
8
|
useSession
|
|
9
9
|
} from "@better-auth-ui/react"
|
|
10
|
-
import {
|
|
10
|
+
import { Funnel, Xmark } from "@gravity-ui/icons"
|
|
11
11
|
import {
|
|
12
12
|
Button,
|
|
13
13
|
Chip,
|
|
@@ -19,7 +19,7 @@ import {
|
|
|
19
19
|
Table
|
|
20
20
|
} from "@heroui/react"
|
|
21
21
|
import type { Member } from "better-auth/client"
|
|
22
|
-
import { type ComponentProps,
|
|
22
|
+
import { type ComponentProps, useMemo, useState } from "react"
|
|
23
23
|
|
|
24
24
|
import { organizationPlugin } from "../../../lib/auth/organization-plugin"
|
|
25
25
|
import { InviteMemberDialog } from "./invite-member-dialog"
|
|
@@ -216,17 +216,17 @@ export function OrganizationMembers({
|
|
|
216
216
|
<Table.Header>
|
|
217
217
|
<Table.Column allowsSorting isRowHeader id="user">
|
|
218
218
|
{({ sortDirection }) => (
|
|
219
|
-
<SortableColumnHeader sortDirection={sortDirection}>
|
|
219
|
+
<Table.SortableColumnHeader sortDirection={sortDirection}>
|
|
220
220
|
{organizationLocalization.member}
|
|
221
|
-
</SortableColumnHeader>
|
|
221
|
+
</Table.SortableColumnHeader>
|
|
222
222
|
)}
|
|
223
223
|
</Table.Column>
|
|
224
224
|
|
|
225
225
|
<Table.Column allowsSorting id="role">
|
|
226
226
|
{({ sortDirection }) => (
|
|
227
|
-
<SortableColumnHeader sortDirection={sortDirection}>
|
|
227
|
+
<Table.SortableColumnHeader sortDirection={sortDirection}>
|
|
228
228
|
{organizationLocalization.role}
|
|
229
|
-
</SortableColumnHeader>
|
|
229
|
+
</Table.SortableColumnHeader>
|
|
230
230
|
)}
|
|
231
231
|
</Table.Column>
|
|
232
232
|
|
|
@@ -259,26 +259,3 @@ export function OrganizationMembers({
|
|
|
259
259
|
</div>
|
|
260
260
|
)
|
|
261
261
|
}
|
|
262
|
-
|
|
263
|
-
function SortableColumnHeader({
|
|
264
|
-
children,
|
|
265
|
-
sortDirection
|
|
266
|
-
}: {
|
|
267
|
-
children: ReactNode
|
|
268
|
-
sortDirection?: "ascending" | "descending"
|
|
269
|
-
}) {
|
|
270
|
-
return (
|
|
271
|
-
<span className="flex items-center justify-between">
|
|
272
|
-
{children}
|
|
273
|
-
|
|
274
|
-
{!!sortDirection && (
|
|
275
|
-
<ChevronUp
|
|
276
|
-
className={cn(
|
|
277
|
-
"size-3 transform transition-transform duration-100 ease-out",
|
|
278
|
-
sortDirection === "descending" ? "rotate-180" : ""
|
|
279
|
-
)}
|
|
280
|
-
/>
|
|
281
|
-
)}
|
|
282
|
-
</span>
|
|
283
|
-
)
|
|
284
|
-
}
|
|
@@ -213,12 +213,12 @@ export function SignIn({
|
|
|
213
213
|
isDisabled={isPending}
|
|
214
214
|
variant={variant === "transparent" ? "primary" : "secondary"}
|
|
215
215
|
>
|
|
216
|
-
<Checkbox.Control>
|
|
217
|
-
<Checkbox.Indicator />
|
|
218
|
-
</Checkbox.Control>
|
|
219
|
-
|
|
220
216
|
<Checkbox.Content>
|
|
221
|
-
<
|
|
217
|
+
<Checkbox.Control>
|
|
218
|
+
<Checkbox.Indicator />
|
|
219
|
+
</Checkbox.Control>
|
|
220
|
+
|
|
221
|
+
{localization.auth.rememberMe}
|
|
222
222
|
</Checkbox.Content>
|
|
223
223
|
</Checkbox>
|
|
224
224
|
)}
|
|
@@ -261,7 +261,7 @@ export function SignIn({
|
|
|
261
261
|
{emailAndPassword?.enabled && emailAndPassword?.forgotPassword && (
|
|
262
262
|
<Link
|
|
263
263
|
href={`${basePaths.auth}/${viewPaths.auth.forgotPassword}`}
|
|
264
|
-
className="no-underline hover:underline"
|
|
264
|
+
className="text-sm no-underline hover:underline"
|
|
265
265
|
>
|
|
266
266
|
{localization.auth.forgotPasswordLink}
|
|
267
267
|
</Link>
|
|
@@ -69,10 +69,10 @@ export function Appearance({
|
|
|
69
69
|
>
|
|
70
70
|
<Radio.Content className="gap-2">
|
|
71
71
|
<div className="flex gap-2 justify-between">
|
|
72
|
-
<
|
|
72
|
+
<span className="flex gap-2 items-center">
|
|
73
73
|
<Display className="text-muted" />
|
|
74
74
|
{localization.system}
|
|
75
|
-
</
|
|
75
|
+
</span>
|
|
76
76
|
|
|
77
77
|
<Radio.Control>
|
|
78
78
|
<Radio.Indicator />
|
|
@@ -98,10 +98,10 @@ export function Appearance({
|
|
|
98
98
|
>
|
|
99
99
|
<Radio.Content className="gap-2">
|
|
100
100
|
<div className="flex gap-2 justify-between">
|
|
101
|
-
<
|
|
101
|
+
<span className="flex gap-2 items-center">
|
|
102
102
|
<Sun className="text-muted" />
|
|
103
103
|
{localization.light}
|
|
104
|
-
</
|
|
104
|
+
</span>
|
|
105
105
|
|
|
106
106
|
<Radio.Control>
|
|
107
107
|
<Radio.Indicator />
|
|
@@ -127,10 +127,10 @@ export function Appearance({
|
|
|
127
127
|
>
|
|
128
128
|
<Radio.Content className="gap-2">
|
|
129
129
|
<div className="flex gap-2 justify-between">
|
|
130
|
-
<
|
|
130
|
+
<span className="flex gap-2 items-center">
|
|
131
131
|
<Moon className="text-muted" />
|
|
132
132
|
{localization.dark}
|
|
133
|
-
</
|
|
133
|
+
</span>
|
|
134
134
|
|
|
135
135
|
<Radio.Control>
|
|
136
136
|
<Radio.Indicator />
|
|
@@ -237,12 +237,12 @@ export function SignInUsername({
|
|
|
237
237
|
isDisabled={isPending}
|
|
238
238
|
variant={variant === "transparent" ? "primary" : "secondary"}
|
|
239
239
|
>
|
|
240
|
-
<Checkbox.Control>
|
|
241
|
-
<Checkbox.Indicator />
|
|
242
|
-
</Checkbox.Control>
|
|
243
|
-
|
|
244
240
|
<Checkbox.Content>
|
|
245
|
-
<
|
|
241
|
+
<Checkbox.Control>
|
|
242
|
+
<Checkbox.Indicator />
|
|
243
|
+
</Checkbox.Control>
|
|
244
|
+
|
|
245
|
+
{localization.auth.rememberMe}
|
|
246
246
|
</Checkbox.Content>
|
|
247
247
|
</Checkbox>
|
|
248
248
|
)}
|
|
@@ -289,7 +289,7 @@ export function SignInUsername({
|
|
|
289
289
|
{emailAndPassword?.enabled && emailAndPassword?.forgotPassword && (
|
|
290
290
|
<Link
|
|
291
291
|
href={`${basePaths.auth}/${viewPaths.auth.forgotPassword}`}
|
|
292
|
-
className="no-underline hover:underline"
|
|
292
|
+
className="text-sm no-underline hover:underline"
|
|
293
293
|
>
|
|
294
294
|
{localization.auth.forgotPasswordLink}
|
|
295
295
|
</Link>
|