@brightweblabs/ui 1.0.0 → 1.0.2
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/package.json +2 -2
- package/src/components/alert-dialog.tsx +2 -2
- package/src/components/badge.tsx +1 -1
- package/src/components/button-variants.ts +2 -2
- package/src/components/calendar.tsx +2 -2
- package/src/components/chart.tsx +3 -3
- package/src/components/dropdown-menu.tsx +2 -2
- package/src/components/kpi-breakdown-bar.tsx +2 -2
- package/src/components/phone-input.tsx +1 -1
- package/src/components/sheet.tsx +3 -3
- package/src/components/skeleton-table.tsx +2 -2
- package/src/components/skeleton.tsx +2 -2
- package/src/components/sonner.tsx +10 -10
- package/src/components/table-pagination.tsx +10 -8
- package/src/components/tooltip.tsx +1 -1
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightweblabs/ui",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "1.0.
|
|
4
|
+
"version": "1.0.2",
|
|
5
5
|
"main": "./src/index.ts",
|
|
6
6
|
"types": "./src/index.ts",
|
|
7
7
|
"files": [
|
|
@@ -76,7 +76,7 @@
|
|
|
76
76
|
"recharts": "^2.15.4",
|
|
77
77
|
"sonner": "^2.0.7",
|
|
78
78
|
"tailwind-merge": "^3.4.0",
|
|
79
|
-
"@brightweblabs/theme": "0.
|
|
79
|
+
"@brightweblabs/theme": "0.3.0"
|
|
80
80
|
},
|
|
81
81
|
"peerDependencies": {
|
|
82
82
|
"lucide-react": "^1.8.0",
|
|
@@ -30,7 +30,7 @@ function AlertDialogOverlay({
|
|
|
30
30
|
<AlertDialogPrimitive.Overlay
|
|
31
31
|
data-slot="alert-dialog-overlay"
|
|
32
32
|
className={cn(
|
|
33
|
-
"fixed inset-0 z-50 bg-[color:
|
|
33
|
+
"fixed inset-0 z-50 bg-[color:var(--surface-overlay-strong)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
|
34
34
|
className
|
|
35
35
|
)}
|
|
36
36
|
{...props}
|
|
@@ -48,7 +48,7 @@ function AlertDialogContent({
|
|
|
48
48
|
<AlertDialogPrimitive.Content
|
|
49
49
|
data-slot="alert-dialog-content"
|
|
50
50
|
className={cn(
|
|
51
|
-
"fixed left-1/2 top-1/2 z-50 grid w-full max-w-[
|
|
51
|
+
"fixed left-1/2 top-1/2 z-50 grid w-full max-w-[var(--dialog-width)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-[var(--radius-panel)] border border-[color:var(--hairline-strong)] bg-background p-6 shadow-[var(--shadow-dialog)] duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
|
|
52
52
|
className
|
|
53
53
|
)}
|
|
54
54
|
{...props}
|
package/src/components/badge.tsx
CHANGED
|
@@ -16,7 +16,7 @@ const badgeVariants = cva(
|
|
|
16
16
|
outline: "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
|
|
17
17
|
ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
|
|
18
18
|
link: "text-primary underline-offset-4 [a&]:hover:underline",
|
|
19
|
-
tint: "text-current [background-color:
|
|
19
|
+
tint: "text-current [background-color:var(--surface-badge-tint)]",
|
|
20
20
|
},
|
|
21
21
|
size: {
|
|
22
22
|
default: "gap-1 px-2 py-0.5 text-xs font-semibold",
|
|
@@ -13,9 +13,9 @@ const buttonVariants = cva(
|
|
|
13
13
|
destructive:
|
|
14
14
|
"bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
|
|
15
15
|
brand:
|
|
16
|
-
"bg-[color:var(--brand-accent)] text-[color:var(--accent-foreground)] !font-extrabold shadow-[
|
|
16
|
+
"bg-[color:var(--brand-accent)] text-[color:var(--accent-foreground)] !font-extrabold shadow-[var(--shadow-accent-control)] hover:brightness-[1.05]",
|
|
17
17
|
soft:
|
|
18
|
-
"border border-[color:var(--border)] bg-[color:
|
|
18
|
+
"border border-[color:var(--border)] bg-[color:var(--surface-button-soft)] text-foreground hover:border-[color:var(--border-button-soft-hover)] hover:bg-[color:var(--surface-button-soft-hover)]",
|
|
19
19
|
outline:
|
|
20
20
|
"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:hover:bg-input/50",
|
|
21
21
|
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
|
@@ -92,7 +92,7 @@ function Calendar({
|
|
|
92
92
|
table: "w-full border-collapse",
|
|
93
93
|
weekdays: cn("flex", defaultClassNames.weekdays),
|
|
94
94
|
weekday: cn(
|
|
95
|
-
"text-muted-foreground rounded-md flex-1 font-normal text-[
|
|
95
|
+
"text-muted-foreground rounded-md flex-1 font-normal text-[length:var(--text-ui-calendar)] select-none",
|
|
96
96
|
defaultClassNames.weekday
|
|
97
97
|
),
|
|
98
98
|
week: cn("flex w-full mt-2", defaultClassNames.week),
|
|
@@ -101,7 +101,7 @@ function Calendar({
|
|
|
101
101
|
defaultClassNames.week_number_header
|
|
102
102
|
),
|
|
103
103
|
week_number: cn(
|
|
104
|
-
"text-[
|
|
104
|
+
"text-[length:var(--text-ui-calendar)] select-none text-muted-foreground",
|
|
105
105
|
defaultClassNames.week_number
|
|
106
106
|
),
|
|
107
107
|
day: cn(
|
package/src/components/chart.tsx
CHANGED
|
@@ -197,7 +197,7 @@ function ChartTooltipContent({
|
|
|
197
197
|
return (
|
|
198
198
|
<div
|
|
199
199
|
className={cn(
|
|
200
|
-
"border-border/50 bg-background grid min-w-[
|
|
200
|
+
"border-border/50 bg-background grid min-w-[var(--chart-tooltip-min-width)] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
|
|
201
201
|
className
|
|
202
202
|
)}
|
|
203
203
|
>
|
|
@@ -228,7 +228,7 @@ function ChartTooltipContent({
|
|
|
228
228
|
!hideIndicator && (
|
|
229
229
|
<div
|
|
230
230
|
className={cn(
|
|
231
|
-
"shrink-0 rounded-[
|
|
231
|
+
"shrink-0 rounded-[var(--radius-swatch)] border-(--color-border) bg-(--color-bg)",
|
|
232
232
|
{
|
|
233
233
|
"h-2.5 w-2.5": indicator === "dot",
|
|
234
234
|
"w-1": indicator === "line",
|
|
@@ -318,7 +318,7 @@ function ChartLegendContent({
|
|
|
318
318
|
<itemConfig.icon />
|
|
319
319
|
) : (
|
|
320
320
|
<div
|
|
321
|
-
className="h-2 w-2 shrink-0 rounded-[
|
|
321
|
+
className="h-2 w-2 shrink-0 rounded-[var(--radius-swatch)]"
|
|
322
322
|
style={{
|
|
323
323
|
backgroundColor: item.color,
|
|
324
324
|
}}
|
|
@@ -42,7 +42,7 @@ function DropdownMenuContent({
|
|
|
42
42
|
data-slot="dropdown-menu-content"
|
|
43
43
|
sideOffset={sideOffset}
|
|
44
44
|
className={cn(
|
|
45
|
-
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-[1300] max-h-(--radix-dropdown-menu-content-available-height) min-w-[
|
|
45
|
+
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-[1300] max-h-(--radix-dropdown-menu-content-available-height) min-w-[var(--menu-min-width)] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
|
|
46
46
|
className
|
|
47
47
|
)}
|
|
48
48
|
{...props}
|
|
@@ -230,7 +230,7 @@ function DropdownMenuSubContent({
|
|
|
230
230
|
<DropdownMenuPrimitive.SubContent
|
|
231
231
|
data-slot="dropdown-menu-sub-content"
|
|
232
232
|
className={cn(
|
|
233
|
-
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-[1300] min-w-[
|
|
233
|
+
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-[1300] min-w-[var(--menu-min-width)] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
|
|
234
234
|
className
|
|
235
235
|
)}
|
|
236
236
|
{...props}
|
|
@@ -42,7 +42,7 @@ export function KpiBreakdownBar({ items, toneTokens, className }: KpiBreakdownBa
|
|
|
42
42
|
</TooltipTrigger>
|
|
43
43
|
<TooltipContent>
|
|
44
44
|
<span className="flex items-center gap-2">
|
|
45
|
-
<span className="size-2 rounded-[
|
|
45
|
+
<span className="size-2 rounded-[var(--radius-swatch)]" style={tokenStyle(token)} />
|
|
46
46
|
<span>{item.label}</span>
|
|
47
47
|
<span className="font-bold tabular-nums">{item.value}</span>
|
|
48
48
|
</span>
|
|
@@ -58,7 +58,7 @@ export function KpiBreakdownBar({ items, toneTokens, className }: KpiBreakdownBa
|
|
|
58
58
|
return (
|
|
59
59
|
<div key={`${item.tone}:${item.label}`} className="flex items-center justify-between gap-2 text-ui-meta">
|
|
60
60
|
<span className="flex min-w-0 items-center gap-2 text-muted-foreground">
|
|
61
|
-
<span className="size-1.5 shrink-0 rounded-[
|
|
61
|
+
<span className="size-1.5 shrink-0 rounded-[var(--radius-swatch)]" style={token ? tokenStyle(token) : undefined} />
|
|
62
62
|
<span className="truncate">{item.label}</span>
|
|
63
63
|
</span>
|
|
64
64
|
<span className="font-mono font-bold tabular-nums text-foreground">{item.value}</span>
|
|
@@ -74,7 +74,7 @@ export function PhoneInput({ value, onChange, onBlur, defaultCountry = "pt", dis
|
|
|
74
74
|
</button>
|
|
75
75
|
|
|
76
76
|
{open ? (
|
|
77
|
-
<div ref={dropdownRef} className="absolute left-0 top-full z-50 mt-1.5 w-56 rounded-[var(--radius-card)] border border-[color:var(--hairline-strong)] bg-popover text-popover-foreground shadow-[
|
|
77
|
+
<div ref={dropdownRef} className="absolute left-0 top-full z-50 mt-1.5 w-56 rounded-[var(--radius-card)] border border-[color:var(--hairline-strong)] bg-popover text-popover-foreground shadow-[var(--shadow-phone-dropdown)]">
|
|
78
78
|
<div className="border-b border-[color:var(--hairline)] px-2.5 py-2">
|
|
79
79
|
<input autoFocus value={search} onChange={(event) => setSearch(event.target.value)} placeholder="Search…" className="w-full border-0 bg-transparent text-ui-meta text-foreground outline-none placeholder:text-foreground/40" />
|
|
80
80
|
</div>
|
package/src/components/sheet.tsx
CHANGED
|
@@ -65,7 +65,7 @@ function SheetOverlay({
|
|
|
65
65
|
<SheetPrimitive.Overlay
|
|
66
66
|
data-slot="sheet-overlay"
|
|
67
67
|
className={cn(
|
|
68
|
-
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-[color:
|
|
68
|
+
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-[color:var(--surface-overlay)]",
|
|
69
69
|
className
|
|
70
70
|
)}
|
|
71
71
|
{...props}
|
|
@@ -91,9 +91,9 @@ function SheetContent({
|
|
|
91
91
|
className={cn(
|
|
92
92
|
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
|
|
93
93
|
side === "right" &&
|
|
94
|
-
"data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-[
|
|
94
|
+
"data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-[var(--sheet-width)]",
|
|
95
95
|
side === "left" &&
|
|
96
|
-
"data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-[
|
|
96
|
+
"data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-[var(--sheet-width)]",
|
|
97
97
|
side === "top" &&
|
|
98
98
|
"data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
|
|
99
99
|
side === "bottom" &&
|
|
@@ -12,11 +12,11 @@ export function TableRowsSkeleton({ rows = 6, columns }: {
|
|
|
12
12
|
{columns.map((kind, columnIndex) => (
|
|
13
13
|
<TableCell key={columnIndex}>
|
|
14
14
|
{kind === "chip" ? (
|
|
15
|
-
<Skeleton rounded="
|
|
15
|
+
<Skeleton rounded="var(--radius-pill)" className="h-5 w-14" />
|
|
16
16
|
) : kind === "action" ? (
|
|
17
17
|
<Skeleton rounded="var(--radius)" className="ml-auto size-7" />
|
|
18
18
|
) : (
|
|
19
|
-
<Skeleton rounded="
|
|
19
|
+
<Skeleton rounded="var(--radius-pill)" className="h-[var(--skeleton-line-height)] w-[72%]" />
|
|
20
20
|
)}
|
|
21
21
|
</TableCell>
|
|
22
22
|
))}
|
|
@@ -9,7 +9,7 @@ export function Skeleton({ className = "", rounded = "var(--radius)", style }: {
|
|
|
9
9
|
}
|
|
10
10
|
|
|
11
11
|
export function SkeletonLine({ w = "100%", className = "" }: { w?: string; className?: string }) {
|
|
12
|
-
return <Skeleton rounded="
|
|
12
|
+
return <Skeleton rounded="var(--radius-pill)" className={`h-[var(--skeleton-line-height)] ${className}`} style={{ width: w }} />;
|
|
13
13
|
}
|
|
14
14
|
|
|
15
15
|
export function SkeletonText({ lines = 3, className = "" }: { lines?: number; className?: string }) {
|
|
@@ -32,7 +32,7 @@ export function SkeletonCard({ lines = 3, meta = true, className = "", bodyClass
|
|
|
32
32
|
return (
|
|
33
33
|
<div className={`flex flex-col gap-4 rounded-[var(--radius-card)] border border-border bg-card p-5 shadow-[0_1px_2px_var(--hairline)] ${className}`}>
|
|
34
34
|
<div className="flex flex-col gap-2">
|
|
35
|
-
<SkeletonLine w="45%" className="h-[
|
|
35
|
+
<SkeletonLine w="45%" className="h-[var(--skeleton-line-height-lg)]" />
|
|
36
36
|
{meta ? <SkeletonLine w="28%" /> : null}
|
|
37
37
|
</div>
|
|
38
38
|
<SkeletonText lines={lines} className={bodyClassName} />
|
|
@@ -25,18 +25,18 @@ const Toaster = ({ ...props }: ToasterProps) => {
|
|
|
25
25
|
"--normal-bg": "var(--popover)",
|
|
26
26
|
"--normal-text": "var(--popover-foreground)",
|
|
27
27
|
"--normal-border": "var(--border)",
|
|
28
|
-
"--success-bg": "
|
|
28
|
+
"--success-bg": "var(--toast-success-bg)",
|
|
29
29
|
"--success-text": "var(--primary)",
|
|
30
|
-
"--success-border": "
|
|
31
|
-
"--warning-bg": "
|
|
32
|
-
"--warning-text": "
|
|
33
|
-
"--warning-border": "
|
|
34
|
-
"--error-bg": "
|
|
30
|
+
"--success-border": "var(--toast-success-border)",
|
|
31
|
+
"--warning-bg": "var(--toast-warning-bg)",
|
|
32
|
+
"--warning-text": "var(--toast-warning-text)",
|
|
33
|
+
"--warning-border": "var(--toast-warning-border)",
|
|
34
|
+
"--error-bg": "var(--toast-error-bg)",
|
|
35
35
|
"--error-text": "var(--destructive)",
|
|
36
|
-
"--error-border": "
|
|
37
|
-
"--info-bg": "
|
|
38
|
-
"--info-text": "
|
|
39
|
-
"--info-border": "
|
|
36
|
+
"--error-border": "var(--toast-error-border)",
|
|
37
|
+
"--info-bg": "var(--toast-info-bg)",
|
|
38
|
+
"--info-text": "var(--toast-info-text)",
|
|
39
|
+
"--info-border": "var(--toast-info-border)",
|
|
40
40
|
"--border-radius": "var(--radius)",
|
|
41
41
|
} as React.CSSProperties
|
|
42
42
|
}
|
|
@@ -37,11 +37,11 @@ export function TablePagination({
|
|
|
37
37
|
};
|
|
38
38
|
|
|
39
39
|
return (
|
|
40
|
-
<div className={cn("flex min-w-0 flex-col gap-2 border-t border-
|
|
40
|
+
<div className={cn("flex min-w-0 flex-col gap-2 border-t border-[color:var(--border)] px-4 py-2 md:flex-row md:items-center md:justify-between", className)}>
|
|
41
41
|
{summary ? (
|
|
42
|
-
<p className="min-w-0 truncate text-
|
|
43
|
-
<span className="font-semibold text-foreground">{pageLabel(safePage, safeTotalPages)}</span>
|
|
44
|
-
<span className="px-1.5 text-border">·</span>
|
|
42
|
+
<p className="min-w-0 truncate portal-meta leading-tight text-[color:var(--muted-foreground)]">
|
|
43
|
+
<span className="font-semibold text-[color:var(--foreground)]">{pageLabel(safePage, safeTotalPages)}</span>
|
|
44
|
+
<span className="px-1.5 text-[color:var(--border)]">·</span>
|
|
45
45
|
{summary}
|
|
46
46
|
</p>
|
|
47
47
|
) : null}
|
|
@@ -57,7 +57,7 @@ export function TablePagination({
|
|
|
57
57
|
event.preventDefault();
|
|
58
58
|
changePage(safePage - 1);
|
|
59
59
|
}}
|
|
60
|
-
className={cn("size-8 rounded-full border border-transparent text-muted-foreground hover:border-
|
|
60
|
+
className={cn("size-8 rounded-full border border-transparent text-[color:var(--muted-foreground)] hover:border-[color:var(--border)] hover:bg-[color:var(--muted)] hover:text-[color:var(--foreground)]", safePage === 1 && "pointer-events-none opacity-45")}
|
|
61
61
|
>
|
|
62
62
|
<ChevronLeft className="size-4" />
|
|
63
63
|
</PaginationLink>
|
|
@@ -73,8 +73,10 @@ export function TablePagination({
|
|
|
73
73
|
changePage(item);
|
|
74
74
|
}}
|
|
75
75
|
className={cn(
|
|
76
|
-
"size-8 rounded-full text-ui-label
|
|
77
|
-
item === safePage
|
|
76
|
+
"size-8 rounded-full text-[length:var(--text-ui-label)] font-semibold",
|
|
77
|
+
item === safePage
|
|
78
|
+
? "border-[color:var(--border-pagination-active)] bg-[color:var(--surface-pagination-active)] text-[color:var(--foreground)]"
|
|
79
|
+
: "text-[color:var(--muted-foreground)] hover:bg-[color:var(--muted)] hover:text-[color:var(--foreground)]",
|
|
78
80
|
)}
|
|
79
81
|
>
|
|
80
82
|
{item}
|
|
@@ -95,7 +97,7 @@ export function TablePagination({
|
|
|
95
97
|
event.preventDefault();
|
|
96
98
|
changePage(safePage + 1);
|
|
97
99
|
}}
|
|
98
|
-
className={cn("size-8 rounded-full border border-transparent text-muted-foreground hover:border-
|
|
100
|
+
className={cn("size-8 rounded-full border border-transparent text-[color:var(--muted-foreground)] hover:border-[color:var(--border)] hover:bg-[color:var(--muted)] hover:text-[color:var(--foreground)]", safePage === safeTotalPages && "pointer-events-none opacity-45")}
|
|
99
101
|
>
|
|
100
102
|
<ChevronRight className="size-4" />
|
|
101
103
|
</PaginationLink>
|
|
@@ -41,7 +41,7 @@ function TooltipContent({
|
|
|
41
41
|
data-slot="tooltip-content"
|
|
42
42
|
sideOffset={sideOffset}
|
|
43
43
|
className={cn(
|
|
44
|
-
"z-[1300] overflow-hidden rounded-[var(--radius-card)] border border-[color:var(--hairline-strong)] bg-[color:
|
|
44
|
+
"z-[1300] overflow-hidden rounded-[var(--radius-card)] border border-[color:var(--hairline-strong)] bg-[color:var(--surface-tooltip)] px-2.5 py-1.5 text-ui-meta !font-semibold text-popover-foreground shadow-[var(--shadow-tooltip)] backdrop-blur-xl data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
|
|
45
45
|
className
|
|
46
46
|
)}
|
|
47
47
|
{...props}
|