adminium 1.0.1-beta.8 → 1.0.1-patch.1
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.cjs +2956 -1041
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +352 -48
- package/dist/index.d.ts +352 -48
- package/dist/index.js +2886 -1059
- package/dist/index.js.map +1 -1
- package/dist/styles/adminium.css +1443 -275
- package/package.json +5 -3
package/dist/index.js
CHANGED
|
@@ -1,484 +1,203 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { clsx } from 'clsx';
|
|
3
3
|
import { twMerge } from 'tailwind-merge';
|
|
4
|
+
import { AlertDialog as AlertDialog$1, Dialog as Dialog$1, Popover as Popover$1, Select as Select$1, Label, ScrollArea as ScrollArea$1 } from 'radix-ui';
|
|
4
5
|
import { cva } from 'class-variance-authority';
|
|
5
|
-
import {
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import {
|
|
6
|
+
import { ChevronDown, X, Check, Minus, ChevronRight, Circle, ChevronUp, ChevronLeftIcon, ChevronRightIcon, ArrowDown, ArrowUp, ChevronsUpDown, ArrowLeftToLine, ArrowRightToLine, ArrowLeft, ArrowRight, Settings2, PinOff } from 'lucide-react';
|
|
7
|
+
import * as SlotPrimitive2 from '@radix-ui/react-slot';
|
|
8
|
+
import { Slot } from '@radix-ui/react-slot';
|
|
9
|
+
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
10
|
+
import { Drawer as Drawer$1 } from 'vaul';
|
|
11
|
+
import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
|
|
9
12
|
import * as React from 'react';
|
|
13
|
+
import { createContext, useContext, Fragment as Fragment$1, isValidElement, useRef, useCallback, useEffect } from 'react';
|
|
14
|
+
import { useMotionValue, useSpring, useTransform, AnimatePresence, motion } from 'motion/react';
|
|
10
15
|
import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
|
|
16
|
+
import { flexRender } from '@tanstack/react-table';
|
|
11
17
|
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
|
|
18
|
+
import { FormProvider, Controller, useFormContext } from 'react-hook-form';
|
|
12
19
|
|
|
13
20
|
// src/lib/utils.ts
|
|
14
21
|
function cn(...inputs) {
|
|
15
22
|
return twMerge(clsx(inputs));
|
|
16
23
|
}
|
|
17
|
-
var
|
|
18
|
-
"flex items-center
|
|
19
|
-
{
|
|
20
|
-
variants: {
|
|
21
|
-
variant: {
|
|
22
|
-
online: "bg-green-600",
|
|
23
|
-
offline: "bg-zinc-600 dark:bg-zinc-300",
|
|
24
|
-
busy: "bg-yellow-600",
|
|
25
|
-
away: "bg-blue-600"
|
|
26
|
-
}
|
|
27
|
-
},
|
|
28
|
-
defaultVariants: {
|
|
29
|
-
variant: "online"
|
|
30
|
-
}
|
|
31
|
-
}
|
|
32
|
-
);
|
|
33
|
-
function Avatar({
|
|
34
|
-
className,
|
|
35
|
-
...props
|
|
36
|
-
}) {
|
|
37
|
-
return /* @__PURE__ */ jsx(
|
|
38
|
-
Avatar$1.Root,
|
|
39
|
-
{
|
|
40
|
-
"data-slot": "avatar",
|
|
41
|
-
className: cn("relative flex shrink-0 size-10", className),
|
|
42
|
-
...props
|
|
43
|
-
}
|
|
44
|
-
);
|
|
45
|
-
}
|
|
46
|
-
function AvatarImage({
|
|
47
|
-
className,
|
|
48
|
-
...props
|
|
49
|
-
}) {
|
|
50
|
-
return /* @__PURE__ */ jsx("div", { className: cn("relative overflow-hidden rounded-full", className), children: /* @__PURE__ */ jsx(
|
|
51
|
-
Avatar$1.Image,
|
|
52
|
-
{
|
|
53
|
-
"data-slot": "avatar-image",
|
|
54
|
-
className: cn("aspect-square h-full w-full"),
|
|
55
|
-
...props
|
|
56
|
-
}
|
|
57
|
-
) });
|
|
58
|
-
}
|
|
59
|
-
function AvatarFallback({
|
|
60
|
-
className,
|
|
61
|
-
...props
|
|
62
|
-
}) {
|
|
63
|
-
return /* @__PURE__ */ jsx(
|
|
64
|
-
Avatar$1.Fallback,
|
|
65
|
-
{
|
|
66
|
-
"data-slot": "avatar-fallback",
|
|
67
|
-
className: cn(
|
|
68
|
-
"flex h-full w-full items-center justify-center rounded-full border border-border bg-accent text-accent-foreground text-xs",
|
|
69
|
-
className
|
|
70
|
-
),
|
|
71
|
-
...props
|
|
72
|
-
}
|
|
73
|
-
);
|
|
74
|
-
}
|
|
75
|
-
function AvatarIndicator({
|
|
76
|
-
className,
|
|
77
|
-
...props
|
|
78
|
-
}) {
|
|
79
|
-
return /* @__PURE__ */ jsx(
|
|
80
|
-
"div",
|
|
81
|
-
{
|
|
82
|
-
"data-slot": "avatar-indicator",
|
|
83
|
-
className: cn(
|
|
84
|
-
"absolute flex size-6 items-center justify-center",
|
|
85
|
-
className
|
|
86
|
-
),
|
|
87
|
-
...props
|
|
88
|
-
}
|
|
89
|
-
);
|
|
90
|
-
}
|
|
91
|
-
function AvatarStatus({
|
|
92
|
-
className,
|
|
93
|
-
variant,
|
|
94
|
-
...props
|
|
95
|
-
}) {
|
|
96
|
-
return /* @__PURE__ */ jsx(
|
|
97
|
-
"div",
|
|
98
|
-
{
|
|
99
|
-
"data-slot": "avatar-status",
|
|
100
|
-
className: cn(avatarStatusVariants({ variant }), className),
|
|
101
|
-
...props
|
|
102
|
-
}
|
|
103
|
-
);
|
|
104
|
-
}
|
|
105
|
-
var badgeVariants = cva(
|
|
106
|
-
"inline-flex items-center justify-center border border-transparent font-medium focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 [&_svg]:-ms-px [&_svg]:shrink-0",
|
|
24
|
+
var buttonVariants = cva(
|
|
25
|
+
"cursor-pointer group whitespace-nowrap focus-visible:outline-hidden inline-flex items-center justify-center has-data-[arrow=true]:justify-between whitespace-nowrap text-sm font-medium ring-offset-background transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-60 [&_svg]:shrink-0",
|
|
107
26
|
{
|
|
108
27
|
variants: {
|
|
109
28
|
variant: {
|
|
110
|
-
primary: "bg-primary text-primary-foreground",
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
outline: "bg-
|
|
116
|
-
|
|
29
|
+
primary: "bg-primary text-primary-foreground hover:bg-primary/90 data-[state=open]:bg-primary/90",
|
|
30
|
+
mono: "bg-zinc-950 text-white dark:bg-zinc-300 dark:text-black hover:bg-zinc-950/90 dark:hover:bg-zinc-300/90 data-[state=open]:bg-zinc-950/90 dark:data-[state=open]:bg-zinc-300/90",
|
|
31
|
+
destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 data-[state=open]:bg-destructive/90",
|
|
32
|
+
success: "bg-emerald-500 text-white hover:bg-emerald-600 data-[state=open]:bg-emerald-600",
|
|
33
|
+
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/90 data-[state=open]:bg-secondary/90",
|
|
34
|
+
outline: "bg-background text-accent-foreground border border-input hover:bg-accent data-[state=open]:bg-accent",
|
|
35
|
+
dashed: "text-accent-foreground border border-input border-dashed bg-background hover:bg-accent hover:text-accent-foreground data-[state=open]:text-accent-foreground",
|
|
36
|
+
ghost: "text-accent-foreground hover:bg-accent hover:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
|
|
37
|
+
dim: "text-muted-foreground hover:text-foreground data-[state=open]:text-foreground",
|
|
38
|
+
foreground: "",
|
|
39
|
+
inverse: ""
|
|
117
40
|
},
|
|
118
41
|
appearance: {
|
|
119
42
|
default: "",
|
|
120
|
-
|
|
121
|
-
outline: "",
|
|
122
|
-
ghost: "border-transparent bg-transparent"
|
|
43
|
+
ghost: ""
|
|
123
44
|
},
|
|
124
|
-
|
|
125
|
-
|
|
45
|
+
underline: {
|
|
46
|
+
solid: "",
|
|
47
|
+
dashed: ""
|
|
48
|
+
},
|
|
49
|
+
underlined: {
|
|
50
|
+
solid: "",
|
|
51
|
+
dashed: ""
|
|
126
52
|
},
|
|
127
53
|
size: {
|
|
128
|
-
lg: "rounded-md px-
|
|
129
|
-
md: "rounded-md px-
|
|
130
|
-
sm: "rounded-
|
|
131
|
-
|
|
54
|
+
lg: "h-10 rounded-md px-4 text-sm gap-1.5 [&_svg:not([class*=size-])]:size-4",
|
|
55
|
+
md: "h-8.5 rounded-md px-3 gap-1.5 text-[0.8125rem] leading-[var(--text-sm--line-height)] [&_svg:not([class*=size-])]:size-4",
|
|
56
|
+
sm: "h-7 rounded-md px-2.5 gap-1.25 text-xs [&_svg:not([class*=size-])]:size-3.5",
|
|
57
|
+
icon: "size-8.5 rounded-md [&_svg:not([class*=size-])]:size-4 shrink-0"
|
|
58
|
+
},
|
|
59
|
+
autoHeight: {
|
|
60
|
+
true: "",
|
|
61
|
+
false: ""
|
|
132
62
|
},
|
|
133
63
|
shape: {
|
|
134
64
|
default: "",
|
|
135
65
|
circle: "rounded-full"
|
|
66
|
+
},
|
|
67
|
+
mode: {
|
|
68
|
+
default: "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
|
|
69
|
+
icon: "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 shrink-0",
|
|
70
|
+
link: "text-primary h-auto p-0 bg-transparent rounded-none hover:bg-transparent data-[state=open]:bg-transparent",
|
|
71
|
+
input: `
|
|
72
|
+
justify-start font-normal hover:bg-background [&_svg]:transition-colors [&_svg]:hover:text-foreground data-[state=open]:bg-background
|
|
73
|
+
focus-visible:border-ring focus-visible:outline-hidden focus-visible:ring-[3px] focus-visible:ring-ring/30
|
|
74
|
+
[[data-state=open]>&]:border-ring [[data-state=open]>&]:outline-hidden [[data-state=open]>&]:ring-[3px]
|
|
75
|
+
[[data-state=open]>&]:ring-ring/30
|
|
76
|
+
aria-invalid:border-destructive/60 aria-invalid:ring-destructive/10 dark:aria-invalid:border-destructive dark:aria-invalid:ring-destructive/20
|
|
77
|
+
in-data-[invalid=true]:border-destructive/60 in-data-[invalid=true]:ring-destructive/10 dark:in-data-[invalid=true]:border-destructive dark:in-data-[invalid=true]:ring-destructive/20
|
|
78
|
+
`
|
|
79
|
+
},
|
|
80
|
+
placeholder: {
|
|
81
|
+
true: "text-muted-foreground",
|
|
82
|
+
false: ""
|
|
136
83
|
}
|
|
137
84
|
},
|
|
138
85
|
compoundVariants: [
|
|
139
|
-
|
|
86
|
+
// Icons opacity for default mode
|
|
140
87
|
{
|
|
141
|
-
variant: "
|
|
142
|
-
|
|
143
|
-
className: "
|
|
88
|
+
variant: "ghost",
|
|
89
|
+
mode: "default",
|
|
90
|
+
className: "[&_svg:not([role=img]):not([class*=text-]):not([class*=opacity-])]:opacity-60"
|
|
91
|
+
},
|
|
92
|
+
{
|
|
93
|
+
variant: "outline",
|
|
94
|
+
mode: "default",
|
|
95
|
+
className: "[&_svg:not([role=img]):not([class*=text-]):not([class*=opacity-])]:opacity-60"
|
|
96
|
+
},
|
|
97
|
+
{
|
|
98
|
+
variant: "dashed",
|
|
99
|
+
mode: "default",
|
|
100
|
+
className: "[&_svg:not([role=img]):not([class*=text-]):not([class*=opacity-])]:opacity-60"
|
|
144
101
|
},
|
|
145
102
|
{
|
|
146
103
|
variant: "secondary",
|
|
147
|
-
|
|
148
|
-
className: "
|
|
104
|
+
mode: "default",
|
|
105
|
+
className: "[&_svg:not([role=img]):not([class*=text-]):not([class*=opacity-])]:opacity-60"
|
|
149
106
|
},
|
|
107
|
+
// Icons opacity for default mode
|
|
150
108
|
{
|
|
151
|
-
variant: "
|
|
152
|
-
|
|
153
|
-
className: "
|
|
109
|
+
variant: "outline",
|
|
110
|
+
mode: "input",
|
|
111
|
+
className: "[&_svg:not([role=img]):not([class*=text-]):not([class*=opacity-])]:opacity-60"
|
|
154
112
|
},
|
|
155
113
|
{
|
|
156
|
-
variant: "
|
|
157
|
-
|
|
158
|
-
className: "
|
|
114
|
+
variant: "outline",
|
|
115
|
+
mode: "icon",
|
|
116
|
+
className: "[&_svg:not([role=img]):not([class*=text-]):not([class*=opacity-])]:opacity-60"
|
|
159
117
|
},
|
|
118
|
+
// Auto height
|
|
160
119
|
{
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
className: "
|
|
120
|
+
size: "md",
|
|
121
|
+
autoHeight: true,
|
|
122
|
+
className: "h-auto min-h-8.5"
|
|
164
123
|
},
|
|
165
124
|
{
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
className: "
|
|
125
|
+
size: "sm",
|
|
126
|
+
autoHeight: true,
|
|
127
|
+
className: "h-auto min-h-7"
|
|
169
128
|
},
|
|
170
|
-
|
|
129
|
+
{
|
|
130
|
+
size: "lg",
|
|
131
|
+
autoHeight: true,
|
|
132
|
+
className: "h-auto min-h-10"
|
|
133
|
+
},
|
|
134
|
+
// Shadow support
|
|
171
135
|
{
|
|
172
136
|
variant: "primary",
|
|
173
|
-
|
|
174
|
-
|
|
137
|
+
mode: "default",
|
|
138
|
+
appearance: "default",
|
|
139
|
+
className: "shadow-xs shadow-black/5"
|
|
175
140
|
},
|
|
176
141
|
{
|
|
177
|
-
variant: "
|
|
178
|
-
|
|
179
|
-
|
|
142
|
+
variant: "mono",
|
|
143
|
+
mode: "default",
|
|
144
|
+
appearance: "default",
|
|
145
|
+
className: "shadow-xs shadow-black/5"
|
|
180
146
|
},
|
|
181
147
|
{
|
|
182
|
-
variant: "
|
|
183
|
-
|
|
184
|
-
|
|
148
|
+
variant: "secondary",
|
|
149
|
+
mode: "default",
|
|
150
|
+
appearance: "default",
|
|
151
|
+
className: "shadow-xs shadow-black/5"
|
|
185
152
|
},
|
|
186
153
|
{
|
|
187
|
-
variant: "
|
|
188
|
-
|
|
189
|
-
|
|
154
|
+
variant: "outline",
|
|
155
|
+
mode: "default",
|
|
156
|
+
appearance: "default",
|
|
157
|
+
className: "shadow-xs shadow-black/5"
|
|
158
|
+
},
|
|
159
|
+
{
|
|
160
|
+
variant: "dashed",
|
|
161
|
+
mode: "default",
|
|
162
|
+
appearance: "default",
|
|
163
|
+
className: "shadow-xs shadow-black/5"
|
|
190
164
|
},
|
|
191
165
|
{
|
|
192
166
|
variant: "destructive",
|
|
193
|
-
|
|
194
|
-
|
|
167
|
+
mode: "default",
|
|
168
|
+
appearance: "default",
|
|
169
|
+
className: "shadow-xs shadow-black/5"
|
|
195
170
|
},
|
|
196
|
-
|
|
171
|
+
// Shadow support
|
|
197
172
|
{
|
|
198
173
|
variant: "primary",
|
|
199
|
-
|
|
200
|
-
|
|
174
|
+
mode: "icon",
|
|
175
|
+
appearance: "default",
|
|
176
|
+
className: "shadow-xs shadow-black/5"
|
|
201
177
|
},
|
|
202
178
|
{
|
|
203
|
-
variant: "
|
|
204
|
-
|
|
205
|
-
|
|
179
|
+
variant: "mono",
|
|
180
|
+
mode: "icon",
|
|
181
|
+
appearance: "default",
|
|
182
|
+
className: "shadow-xs shadow-black/5"
|
|
206
183
|
},
|
|
207
184
|
{
|
|
208
|
-
variant: "
|
|
209
|
-
|
|
210
|
-
|
|
185
|
+
variant: "secondary",
|
|
186
|
+
mode: "icon",
|
|
187
|
+
appearance: "default",
|
|
188
|
+
className: "shadow-xs shadow-black/5"
|
|
211
189
|
},
|
|
212
190
|
{
|
|
213
|
-
variant: "
|
|
214
|
-
|
|
215
|
-
|
|
191
|
+
variant: "outline",
|
|
192
|
+
mode: "icon",
|
|
193
|
+
appearance: "default",
|
|
194
|
+
className: "shadow-xs shadow-black/5"
|
|
216
195
|
},
|
|
217
196
|
{
|
|
218
|
-
variant: "
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
{
|
|
223
|
-
variant: "destructive",
|
|
224
|
-
appearance: "ghost",
|
|
225
|
-
className: "text-destructive"
|
|
226
|
-
},
|
|
227
|
-
{ size: "lg", appearance: "ghost", className: "px-0" },
|
|
228
|
-
{ size: "md", appearance: "ghost", className: "px-0" },
|
|
229
|
-
{ size: "sm", appearance: "ghost", className: "px-0" },
|
|
230
|
-
{ size: "xs", appearance: "ghost", className: "px-0" }
|
|
231
|
-
],
|
|
232
|
-
defaultVariants: {
|
|
233
|
-
variant: "primary",
|
|
234
|
-
appearance: "default",
|
|
235
|
-
size: "md"
|
|
236
|
-
}
|
|
237
|
-
}
|
|
238
|
-
);
|
|
239
|
-
var badgeButtonVariants = cva(
|
|
240
|
-
"cursor-pointer transition-all inline-flex items-center justify-center leading-none size-3.5 [&>svg]:opacity-100! [&>svg]:size-3.5! p-0 rounded-md -me-0.5 opacity-60 hover:opacity-100",
|
|
241
|
-
{
|
|
242
|
-
variants: {
|
|
243
|
-
variant: {
|
|
244
|
-
default: ""
|
|
245
|
-
}
|
|
246
|
-
},
|
|
247
|
-
defaultVariants: {
|
|
248
|
-
variant: "default"
|
|
249
|
-
}
|
|
250
|
-
}
|
|
251
|
-
);
|
|
252
|
-
function Badge({
|
|
253
|
-
className,
|
|
254
|
-
variant,
|
|
255
|
-
size,
|
|
256
|
-
appearance,
|
|
257
|
-
shape,
|
|
258
|
-
asChild = false,
|
|
259
|
-
disabled,
|
|
260
|
-
...props
|
|
261
|
-
}) {
|
|
262
|
-
const Comp = asChild ? SlotPrimitive.Slot : "span";
|
|
263
|
-
return /* @__PURE__ */ jsx(
|
|
264
|
-
Comp,
|
|
265
|
-
{
|
|
266
|
-
"data-slot": "badge",
|
|
267
|
-
className: cn(
|
|
268
|
-
badgeVariants({ variant, size, appearance, shape, disabled }),
|
|
269
|
-
className
|
|
270
|
-
),
|
|
271
|
-
...props
|
|
272
|
-
}
|
|
273
|
-
);
|
|
274
|
-
}
|
|
275
|
-
function BadgeButton({
|
|
276
|
-
className,
|
|
277
|
-
variant,
|
|
278
|
-
asChild = false,
|
|
279
|
-
...props
|
|
280
|
-
}) {
|
|
281
|
-
const Comp = asChild ? SlotPrimitive.Slot : "span";
|
|
282
|
-
return /* @__PURE__ */ jsx(
|
|
283
|
-
Comp,
|
|
284
|
-
{
|
|
285
|
-
"data-slot": "badge-button",
|
|
286
|
-
className: cn(badgeButtonVariants({ variant, className })),
|
|
287
|
-
role: "button",
|
|
288
|
-
...props
|
|
289
|
-
}
|
|
290
|
-
);
|
|
291
|
-
}
|
|
292
|
-
function BadgeDot({ className, ...props }) {
|
|
293
|
-
return /* @__PURE__ */ jsx(
|
|
294
|
-
"span",
|
|
295
|
-
{
|
|
296
|
-
"data-slot": "badge-dot",
|
|
297
|
-
className: cn(
|
|
298
|
-
"size-1.5 rounded-full bg-[currentColor] opacity-75",
|
|
299
|
-
className
|
|
300
|
-
),
|
|
301
|
-
...props
|
|
302
|
-
}
|
|
303
|
-
);
|
|
304
|
-
}
|
|
305
|
-
var buttonVariants = cva(
|
|
306
|
-
"cursor-pointer group whitespace-nowrap focus-visible:outline-hidden inline-flex items-center justify-center has-data-[arrow=true]:justify-between whitespace-nowrap text-sm font-medium ring-offset-background transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-60 [&_svg]:shrink-0",
|
|
307
|
-
{
|
|
308
|
-
variants: {
|
|
309
|
-
variant: {
|
|
310
|
-
primary: "bg-primary text-primary-foreground hover:bg-primary/90 data-[state=open]:bg-primary/90",
|
|
311
|
-
mono: "bg-zinc-950 text-white dark:bg-zinc-300 dark:text-black hover:bg-zinc-950/90 dark:hover:bg-zinc-300/90 data-[state=open]:bg-zinc-950/90 dark:data-[state=open]:bg-zinc-300/90",
|
|
312
|
-
destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 data-[state=open]:bg-destructive/90",
|
|
313
|
-
success: "bg-emerald-500 text-white hover:bg-emerald-600 data-[state=open]:bg-emerald-600",
|
|
314
|
-
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/90 data-[state=open]:bg-secondary/90",
|
|
315
|
-
outline: "bg-background text-accent-foreground border border-input hover:bg-accent data-[state=open]:bg-accent",
|
|
316
|
-
dashed: "text-accent-foreground border border-input border-dashed bg-background hover:bg-accent hover:text-accent-foreground data-[state=open]:text-accent-foreground",
|
|
317
|
-
ghost: "text-accent-foreground hover:bg-accent hover:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
|
|
318
|
-
dim: "text-muted-foreground hover:text-foreground data-[state=open]:text-foreground",
|
|
319
|
-
foreground: "",
|
|
320
|
-
inverse: ""
|
|
321
|
-
},
|
|
322
|
-
appearance: {
|
|
323
|
-
default: "",
|
|
324
|
-
ghost: ""
|
|
325
|
-
},
|
|
326
|
-
underline: {
|
|
327
|
-
solid: "",
|
|
328
|
-
dashed: ""
|
|
329
|
-
},
|
|
330
|
-
underlined: {
|
|
331
|
-
solid: "",
|
|
332
|
-
dashed: ""
|
|
333
|
-
},
|
|
334
|
-
size: {
|
|
335
|
-
lg: "h-10 rounded-md px-4 text-sm gap-1.5 [&_svg:not([class*=size-])]:size-4",
|
|
336
|
-
md: "h-8.5 rounded-md px-3 gap-1.5 text-[0.8125rem] leading-[var(--text-sm--line-height)] [&_svg:not([class*=size-])]:size-4",
|
|
337
|
-
sm: "h-7 rounded-md px-2.5 gap-1.25 text-xs [&_svg:not([class*=size-])]:size-3.5",
|
|
338
|
-
icon: "size-8.5 rounded-md [&_svg:not([class*=size-])]:size-4 shrink-0"
|
|
339
|
-
},
|
|
340
|
-
autoHeight: {
|
|
341
|
-
true: "",
|
|
342
|
-
false: ""
|
|
343
|
-
},
|
|
344
|
-
shape: {
|
|
345
|
-
default: "",
|
|
346
|
-
circle: "rounded-full"
|
|
347
|
-
},
|
|
348
|
-
mode: {
|
|
349
|
-
default: "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
|
|
350
|
-
icon: "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 shrink-0",
|
|
351
|
-
link: "text-primary h-auto p-0 bg-transparent rounded-none hover:bg-transparent data-[state=open]:bg-transparent",
|
|
352
|
-
input: `
|
|
353
|
-
justify-start font-normal hover:bg-background [&_svg]:transition-colors [&_svg]:hover:text-foreground data-[state=open]:bg-background
|
|
354
|
-
focus-visible:border-ring focus-visible:outline-hidden focus-visible:ring-[3px] focus-visible:ring-ring/30
|
|
355
|
-
[[data-state=open]>&]:border-ring [[data-state=open]>&]:outline-hidden [[data-state=open]>&]:ring-[3px]
|
|
356
|
-
[[data-state=open]>&]:ring-ring/30
|
|
357
|
-
aria-invalid:border-destructive/60 aria-invalid:ring-destructive/10 dark:aria-invalid:border-destructive dark:aria-invalid:ring-destructive/20
|
|
358
|
-
in-data-[invalid=true]:border-destructive/60 in-data-[invalid=true]:ring-destructive/10 dark:in-data-[invalid=true]:border-destructive dark:in-data-[invalid=true]:ring-destructive/20
|
|
359
|
-
`
|
|
360
|
-
},
|
|
361
|
-
placeholder: {
|
|
362
|
-
true: "text-muted-foreground",
|
|
363
|
-
false: ""
|
|
364
|
-
}
|
|
365
|
-
},
|
|
366
|
-
compoundVariants: [
|
|
367
|
-
// Icons opacity for default mode
|
|
368
|
-
{
|
|
369
|
-
variant: "ghost",
|
|
370
|
-
mode: "default",
|
|
371
|
-
className: "[&_svg:not([role=img]):not([class*=text-]):not([class*=opacity-])]:opacity-60"
|
|
372
|
-
},
|
|
373
|
-
{
|
|
374
|
-
variant: "outline",
|
|
375
|
-
mode: "default",
|
|
376
|
-
className: "[&_svg:not([role=img]):not([class*=text-]):not([class*=opacity-])]:opacity-60"
|
|
377
|
-
},
|
|
378
|
-
{
|
|
379
|
-
variant: "dashed",
|
|
380
|
-
mode: "default",
|
|
381
|
-
className: "[&_svg:not([role=img]):not([class*=text-]):not([class*=opacity-])]:opacity-60"
|
|
382
|
-
},
|
|
383
|
-
{
|
|
384
|
-
variant: "secondary",
|
|
385
|
-
mode: "default",
|
|
386
|
-
className: "[&_svg:not([role=img]):not([class*=text-]):not([class*=opacity-])]:opacity-60"
|
|
387
|
-
},
|
|
388
|
-
// Icons opacity for default mode
|
|
389
|
-
{
|
|
390
|
-
variant: "outline",
|
|
391
|
-
mode: "input",
|
|
392
|
-
className: "[&_svg:not([role=img]):not([class*=text-]):not([class*=opacity-])]:opacity-60"
|
|
393
|
-
},
|
|
394
|
-
{
|
|
395
|
-
variant: "outline",
|
|
396
|
-
mode: "icon",
|
|
397
|
-
className: "[&_svg:not([role=img]):not([class*=text-]):not([class*=opacity-])]:opacity-60"
|
|
398
|
-
},
|
|
399
|
-
// Auto height
|
|
400
|
-
{
|
|
401
|
-
size: "md",
|
|
402
|
-
autoHeight: true,
|
|
403
|
-
className: "h-auto min-h-8.5"
|
|
404
|
-
},
|
|
405
|
-
{
|
|
406
|
-
size: "sm",
|
|
407
|
-
autoHeight: true,
|
|
408
|
-
className: "h-auto min-h-7"
|
|
409
|
-
},
|
|
410
|
-
{
|
|
411
|
-
size: "lg",
|
|
412
|
-
autoHeight: true,
|
|
413
|
-
className: "h-auto min-h-10"
|
|
414
|
-
},
|
|
415
|
-
// Shadow support
|
|
416
|
-
{
|
|
417
|
-
variant: "primary",
|
|
418
|
-
mode: "default",
|
|
419
|
-
appearance: "default",
|
|
420
|
-
className: "shadow-xs shadow-black/5"
|
|
421
|
-
},
|
|
422
|
-
{
|
|
423
|
-
variant: "mono",
|
|
424
|
-
mode: "default",
|
|
425
|
-
appearance: "default",
|
|
426
|
-
className: "shadow-xs shadow-black/5"
|
|
427
|
-
},
|
|
428
|
-
{
|
|
429
|
-
variant: "secondary",
|
|
430
|
-
mode: "default",
|
|
431
|
-
appearance: "default",
|
|
432
|
-
className: "shadow-xs shadow-black/5"
|
|
433
|
-
},
|
|
434
|
-
{
|
|
435
|
-
variant: "outline",
|
|
436
|
-
mode: "default",
|
|
437
|
-
appearance: "default",
|
|
438
|
-
className: "shadow-xs shadow-black/5"
|
|
439
|
-
},
|
|
440
|
-
{
|
|
441
|
-
variant: "dashed",
|
|
442
|
-
mode: "default",
|
|
443
|
-
appearance: "default",
|
|
444
|
-
className: "shadow-xs shadow-black/5"
|
|
445
|
-
},
|
|
446
|
-
{
|
|
447
|
-
variant: "destructive",
|
|
448
|
-
mode: "default",
|
|
449
|
-
appearance: "default",
|
|
450
|
-
className: "shadow-xs shadow-black/5"
|
|
451
|
-
},
|
|
452
|
-
// Shadow support
|
|
453
|
-
{
|
|
454
|
-
variant: "primary",
|
|
455
|
-
mode: "icon",
|
|
456
|
-
appearance: "default",
|
|
457
|
-
className: "shadow-xs shadow-black/5"
|
|
458
|
-
},
|
|
459
|
-
{
|
|
460
|
-
variant: "mono",
|
|
461
|
-
mode: "icon",
|
|
462
|
-
appearance: "default",
|
|
463
|
-
className: "shadow-xs shadow-black/5"
|
|
464
|
-
},
|
|
465
|
-
{
|
|
466
|
-
variant: "secondary",
|
|
467
|
-
mode: "icon",
|
|
468
|
-
appearance: "default",
|
|
469
|
-
className: "shadow-xs shadow-black/5"
|
|
470
|
-
},
|
|
471
|
-
{
|
|
472
|
-
variant: "outline",
|
|
473
|
-
mode: "icon",
|
|
474
|
-
appearance: "default",
|
|
475
|
-
className: "shadow-xs shadow-black/5"
|
|
476
|
-
},
|
|
477
|
-
{
|
|
478
|
-
variant: "dashed",
|
|
479
|
-
mode: "icon",
|
|
480
|
-
appearance: "default",
|
|
481
|
-
className: "shadow-xs shadow-black/5"
|
|
197
|
+
variant: "dashed",
|
|
198
|
+
mode: "icon",
|
|
199
|
+
appearance: "default",
|
|
200
|
+
className: "shadow-xs shadow-black/5"
|
|
482
201
|
},
|
|
483
202
|
{
|
|
484
203
|
variant: "destructive",
|
|
@@ -524,167 +243,2485 @@ var buttonVariants = cva(
|
|
|
524
243
|
className: "font-medium text-inherit [&_svg:not([role=img]):not([class*=text-])]:opacity-60 hover:underline hover:underline-offset-4 hover:decoration-dashed decoration-1"
|
|
525
244
|
},
|
|
526
245
|
{
|
|
527
|
-
variant: "inverse",
|
|
528
|
-
mode: "link",
|
|
529
|
-
underlined: "solid",
|
|
530
|
-
className: "font-medium text-inherit [&_svg:not([role=img]):not([class*=text-])]:opacity-60 underline underline-offset-4 decoration-solid"
|
|
246
|
+
variant: "inverse",
|
|
247
|
+
mode: "link",
|
|
248
|
+
underlined: "solid",
|
|
249
|
+
className: "font-medium text-inherit [&_svg:not([role=img]):not([class*=text-])]:opacity-60 underline underline-offset-4 decoration-solid"
|
|
250
|
+
},
|
|
251
|
+
{
|
|
252
|
+
variant: "inverse",
|
|
253
|
+
mode: "link",
|
|
254
|
+
underlined: "dashed",
|
|
255
|
+
className: "font-medium text-inherit [&_svg:not([role=img]):not([class*=text-])]:opacity-60 underline underline-offset-4 decoration-dashed decoration-1"
|
|
256
|
+
},
|
|
257
|
+
{
|
|
258
|
+
variant: "foreground",
|
|
259
|
+
mode: "link",
|
|
260
|
+
underline: "solid",
|
|
261
|
+
className: "font-medium text-foreground [&_svg:not([role=img]):not([class*=text-])]:opacity-60 hover:underline hover:underline-offset-4 hover:decoration-solid"
|
|
262
|
+
},
|
|
263
|
+
{
|
|
264
|
+
variant: "foreground",
|
|
265
|
+
mode: "link",
|
|
266
|
+
underline: "dashed",
|
|
267
|
+
className: "font-medium text-foreground [&_svg:not([role=img]):not([class*=text-])]:opacity-60 hover:underline hover:underline-offset-4 hover:decoration-dashed decoration-1"
|
|
268
|
+
},
|
|
269
|
+
{
|
|
270
|
+
variant: "foreground",
|
|
271
|
+
mode: "link",
|
|
272
|
+
underlined: "solid",
|
|
273
|
+
className: "font-medium text-foreground [&_svg:not([role=img]):not([class*=text-])]:opacity-60 underline underline-offset-4 decoration-solid"
|
|
274
|
+
},
|
|
275
|
+
{
|
|
276
|
+
variant: "foreground",
|
|
277
|
+
mode: "link",
|
|
278
|
+
underlined: "dashed",
|
|
279
|
+
className: "font-medium text-foreground [&_svg:not([role=img]):not([class*=text-])]:opacity-60 underline underline-offset-4 decoration-dashed decoration-1"
|
|
280
|
+
},
|
|
281
|
+
// Ghost
|
|
282
|
+
{
|
|
283
|
+
variant: "primary",
|
|
284
|
+
appearance: "ghost",
|
|
285
|
+
className: "bg-transparent text-primary/90 hover:bg-primary/5 data-[state=open]:bg-primary/5"
|
|
286
|
+
},
|
|
287
|
+
{
|
|
288
|
+
variant: "destructive",
|
|
289
|
+
appearance: "ghost",
|
|
290
|
+
className: "bg-transparent text-destructive/90 hover:bg-destructive/5 data-[state=open]:bg-destructive/5"
|
|
291
|
+
},
|
|
292
|
+
{
|
|
293
|
+
variant: "success",
|
|
294
|
+
appearance: "ghost",
|
|
295
|
+
className: "bg-transparent text-emerald-500 hover:bg-emerald-500/5 data-[state=open]:bg-emerald-500/5"
|
|
296
|
+
},
|
|
297
|
+
{
|
|
298
|
+
variant: "ghost",
|
|
299
|
+
mode: "icon",
|
|
300
|
+
className: "text-muted-foreground"
|
|
301
|
+
},
|
|
302
|
+
// Size
|
|
303
|
+
{
|
|
304
|
+
size: "sm",
|
|
305
|
+
mode: "icon",
|
|
306
|
+
className: "w-7 h-7 p-0 [[&_svg:not([class*=size-])]:size-3.5"
|
|
307
|
+
},
|
|
308
|
+
{
|
|
309
|
+
size: "md",
|
|
310
|
+
mode: "icon",
|
|
311
|
+
className: "w-8.5 h-8.5 p-0 [&_svg:not([class*=size-])]:size-4"
|
|
312
|
+
},
|
|
313
|
+
{
|
|
314
|
+
size: "icon",
|
|
315
|
+
className: "w-8.5 h-8.5 p-0 [&_svg:not([class*=size-])]:size-4"
|
|
316
|
+
},
|
|
317
|
+
{
|
|
318
|
+
size: "lg",
|
|
319
|
+
mode: "icon",
|
|
320
|
+
className: "w-10 h-10 p-0 [&_svg:not([class*=size-])]:size-4"
|
|
321
|
+
},
|
|
322
|
+
// Input mode
|
|
323
|
+
{
|
|
324
|
+
mode: "input",
|
|
325
|
+
placeholder: true,
|
|
326
|
+
variant: "outline",
|
|
327
|
+
className: "font-normal text-muted-foreground"
|
|
328
|
+
},
|
|
329
|
+
{
|
|
330
|
+
mode: "input",
|
|
331
|
+
variant: "outline",
|
|
332
|
+
size: "sm",
|
|
333
|
+
className: "gap-1.25"
|
|
334
|
+
},
|
|
335
|
+
{
|
|
336
|
+
mode: "input",
|
|
337
|
+
variant: "outline",
|
|
338
|
+
size: "md",
|
|
339
|
+
className: "gap-1.5"
|
|
340
|
+
},
|
|
341
|
+
{
|
|
342
|
+
mode: "input",
|
|
343
|
+
variant: "outline",
|
|
344
|
+
size: "lg",
|
|
345
|
+
className: "gap-1.5"
|
|
346
|
+
}
|
|
347
|
+
],
|
|
348
|
+
defaultVariants: {
|
|
349
|
+
variant: "primary",
|
|
350
|
+
mode: "default",
|
|
351
|
+
size: "md",
|
|
352
|
+
shape: "default",
|
|
353
|
+
appearance: "default"
|
|
354
|
+
}
|
|
355
|
+
}
|
|
356
|
+
);
|
|
357
|
+
function Button({
|
|
358
|
+
className,
|
|
359
|
+
selected,
|
|
360
|
+
variant,
|
|
361
|
+
shape,
|
|
362
|
+
appearance,
|
|
363
|
+
mode,
|
|
364
|
+
size,
|
|
365
|
+
autoHeight,
|
|
366
|
+
underlined,
|
|
367
|
+
underline,
|
|
368
|
+
asChild = false,
|
|
369
|
+
placeholder = false,
|
|
370
|
+
...props
|
|
371
|
+
}) {
|
|
372
|
+
const Comp = asChild ? SlotPrimitive2.Slot : "button";
|
|
373
|
+
return /* @__PURE__ */ jsx(
|
|
374
|
+
Comp,
|
|
375
|
+
{
|
|
376
|
+
"data-slot": "button",
|
|
377
|
+
className: cn(
|
|
378
|
+
buttonVariants({
|
|
379
|
+
variant,
|
|
380
|
+
size,
|
|
381
|
+
shape,
|
|
382
|
+
appearance,
|
|
383
|
+
mode,
|
|
384
|
+
autoHeight,
|
|
385
|
+
placeholder,
|
|
386
|
+
underlined,
|
|
387
|
+
underline,
|
|
388
|
+
className
|
|
389
|
+
}),
|
|
390
|
+
asChild && props.disabled && "pointer-events-none opacity-50"
|
|
391
|
+
),
|
|
392
|
+
...selected && { "data-state": "open" },
|
|
393
|
+
...props
|
|
394
|
+
}
|
|
395
|
+
);
|
|
396
|
+
}
|
|
397
|
+
function ButtonArrow({
|
|
398
|
+
icon: Icon = ChevronDown,
|
|
399
|
+
className,
|
|
400
|
+
...props
|
|
401
|
+
}) {
|
|
402
|
+
return /* @__PURE__ */ jsx(
|
|
403
|
+
Icon,
|
|
404
|
+
{
|
|
405
|
+
"data-slot": "button-arrow",
|
|
406
|
+
className: cn("ms-auto -me-1", className),
|
|
407
|
+
...props
|
|
408
|
+
}
|
|
409
|
+
);
|
|
410
|
+
}
|
|
411
|
+
function AlertDialog({
|
|
412
|
+
...props
|
|
413
|
+
}) {
|
|
414
|
+
return /* @__PURE__ */ jsx(AlertDialog$1.Root, { "data-slot": "alert-dialog", ...props });
|
|
415
|
+
}
|
|
416
|
+
function AlertDialogTrigger({
|
|
417
|
+
...props
|
|
418
|
+
}) {
|
|
419
|
+
return /* @__PURE__ */ jsx(AlertDialog$1.Trigger, { "data-slot": "alert-dialog-trigger", ...props });
|
|
420
|
+
}
|
|
421
|
+
function AlertDialogPortal({
|
|
422
|
+
...props
|
|
423
|
+
}) {
|
|
424
|
+
return /* @__PURE__ */ jsx(AlertDialog$1.Portal, { "data-slot": "alert-dialog-portal", ...props });
|
|
425
|
+
}
|
|
426
|
+
function AlertDialogOverlay({
|
|
427
|
+
className,
|
|
428
|
+
...props
|
|
429
|
+
}) {
|
|
430
|
+
return /* @__PURE__ */ jsx(
|
|
431
|
+
AlertDialog$1.Overlay,
|
|
432
|
+
{
|
|
433
|
+
"data-slot": "alert-dialog-overlay",
|
|
434
|
+
className: cn(
|
|
435
|
+
"fixed inset-0 z-50 bg-black/30 [backdrop-filter:blur(4px)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
|
436
|
+
className
|
|
437
|
+
),
|
|
438
|
+
...props
|
|
439
|
+
}
|
|
440
|
+
);
|
|
441
|
+
}
|
|
442
|
+
function AlertDialogContent({
|
|
443
|
+
className,
|
|
444
|
+
...props
|
|
445
|
+
}) {
|
|
446
|
+
return /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [
|
|
447
|
+
/* @__PURE__ */ jsx(AlertDialogOverlay, {}),
|
|
448
|
+
/* @__PURE__ */ jsx(
|
|
449
|
+
AlertDialog$1.Content,
|
|
450
|
+
{
|
|
451
|
+
"data-slot": "alert-dialog-content",
|
|
452
|
+
className: cn(
|
|
453
|
+
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg shadow-black/5 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 sm:rounded-lg",
|
|
454
|
+
className
|
|
455
|
+
),
|
|
456
|
+
...props
|
|
457
|
+
}
|
|
458
|
+
)
|
|
459
|
+
] });
|
|
460
|
+
}
|
|
461
|
+
var AlertDialogHeader = ({
|
|
462
|
+
className,
|
|
463
|
+
...props
|
|
464
|
+
}) => /* @__PURE__ */ jsx(
|
|
465
|
+
"div",
|
|
466
|
+
{
|
|
467
|
+
"data-slot": "alert-dialog-header",
|
|
468
|
+
className: cn(
|
|
469
|
+
"flex flex-col space-y-2 text-center sm:text-left",
|
|
470
|
+
className
|
|
471
|
+
),
|
|
472
|
+
...props
|
|
473
|
+
}
|
|
474
|
+
);
|
|
475
|
+
var AlertDialogFooter = ({
|
|
476
|
+
className,
|
|
477
|
+
...props
|
|
478
|
+
}) => /* @__PURE__ */ jsx(
|
|
479
|
+
"div",
|
|
480
|
+
{
|
|
481
|
+
"data-slot": "alert-dialog-footer",
|
|
482
|
+
className: cn(
|
|
483
|
+
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2.5",
|
|
484
|
+
className
|
|
485
|
+
),
|
|
486
|
+
...props
|
|
487
|
+
}
|
|
488
|
+
);
|
|
489
|
+
function AlertDialogTitle({
|
|
490
|
+
className,
|
|
491
|
+
...props
|
|
492
|
+
}) {
|
|
493
|
+
return /* @__PURE__ */ jsx(
|
|
494
|
+
AlertDialog$1.Title,
|
|
495
|
+
{
|
|
496
|
+
"data-slot": "alert-dialog-title",
|
|
497
|
+
className: cn("text-lg font-semibold", className),
|
|
498
|
+
...props
|
|
499
|
+
}
|
|
500
|
+
);
|
|
501
|
+
}
|
|
502
|
+
function AlertDialogDescription({
|
|
503
|
+
className,
|
|
504
|
+
...props
|
|
505
|
+
}) {
|
|
506
|
+
return /* @__PURE__ */ jsx(
|
|
507
|
+
AlertDialog$1.Description,
|
|
508
|
+
{
|
|
509
|
+
"data-slot": "alert-dialog-description",
|
|
510
|
+
className: cn("text-sm text-muted-foreground", className),
|
|
511
|
+
...props
|
|
512
|
+
}
|
|
513
|
+
);
|
|
514
|
+
}
|
|
515
|
+
function AlertDialogAction({
|
|
516
|
+
className,
|
|
517
|
+
variant,
|
|
518
|
+
...props
|
|
519
|
+
}) {
|
|
520
|
+
return /* @__PURE__ */ jsx(
|
|
521
|
+
AlertDialog$1.Action,
|
|
522
|
+
{
|
|
523
|
+
"data-slot": "alert-dialog-action",
|
|
524
|
+
className: cn(buttonVariants({ variant }), className),
|
|
525
|
+
...props
|
|
526
|
+
}
|
|
527
|
+
);
|
|
528
|
+
}
|
|
529
|
+
function AlertDialogCancel({
|
|
530
|
+
className,
|
|
531
|
+
...props
|
|
532
|
+
}) {
|
|
533
|
+
return /* @__PURE__ */ jsx(
|
|
534
|
+
AlertDialog$1.Cancel,
|
|
535
|
+
{
|
|
536
|
+
"data-slot": "alert-dialog-cancel",
|
|
537
|
+
className: cn(
|
|
538
|
+
buttonVariants({ variant: "outline" }),
|
|
539
|
+
"mt-2 sm:mt-0",
|
|
540
|
+
className
|
|
541
|
+
),
|
|
542
|
+
...props
|
|
543
|
+
}
|
|
544
|
+
);
|
|
545
|
+
}
|
|
546
|
+
var dialogContentVariants = cva(
|
|
547
|
+
"flex flex-col fixed outline-0 z-50 border border-border bg-background p-6 shadow-lg shadow-black/5 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 sm:rounded-lg",
|
|
548
|
+
{
|
|
549
|
+
variants: {
|
|
550
|
+
variant: {
|
|
551
|
+
default: "left-[50%] top-[50%] max-w-lg translate-x-[-50%] translate-y-[-50%] w-full",
|
|
552
|
+
fullscreen: "inset-5"
|
|
553
|
+
}
|
|
554
|
+
},
|
|
555
|
+
defaultVariants: {
|
|
556
|
+
variant: "default"
|
|
557
|
+
}
|
|
558
|
+
}
|
|
559
|
+
);
|
|
560
|
+
function Dialog({
|
|
561
|
+
...props
|
|
562
|
+
}) {
|
|
563
|
+
return /* @__PURE__ */ jsx(Dialog$1.Root, { "data-slot": "dialog", ...props });
|
|
564
|
+
}
|
|
565
|
+
function DialogTrigger({
|
|
566
|
+
...props
|
|
567
|
+
}) {
|
|
568
|
+
return /* @__PURE__ */ jsx(Dialog$1.Trigger, { "data-slot": "dialog-trigger", ...props });
|
|
569
|
+
}
|
|
570
|
+
function DialogPortal({
|
|
571
|
+
...props
|
|
572
|
+
}) {
|
|
573
|
+
return /* @__PURE__ */ jsx(Dialog$1.Portal, { "data-slot": "dialog-portal", ...props });
|
|
574
|
+
}
|
|
575
|
+
function DialogClose({
|
|
576
|
+
...props
|
|
577
|
+
}) {
|
|
578
|
+
return /* @__PURE__ */ jsx(Dialog$1.Close, { "data-slot": "dialog-close", ...props });
|
|
579
|
+
}
|
|
580
|
+
function DialogOverlay({
|
|
581
|
+
className,
|
|
582
|
+
...props
|
|
583
|
+
}) {
|
|
584
|
+
return /* @__PURE__ */ jsx(
|
|
585
|
+
Dialog$1.Overlay,
|
|
586
|
+
{
|
|
587
|
+
"data-slot": "dialog-overlay",
|
|
588
|
+
className: cn(
|
|
589
|
+
"fixed inset-0 z-50 bg-black/30 [backdrop-filter:blur(4px)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
|
590
|
+
className
|
|
591
|
+
),
|
|
592
|
+
...props
|
|
593
|
+
}
|
|
594
|
+
);
|
|
595
|
+
}
|
|
596
|
+
function DialogContent({
|
|
597
|
+
className,
|
|
598
|
+
children,
|
|
599
|
+
showCloseButton = true,
|
|
600
|
+
overlay = true,
|
|
601
|
+
variant,
|
|
602
|
+
"aria-describedby": ariaDescribedBy,
|
|
603
|
+
...props
|
|
604
|
+
}) {
|
|
605
|
+
return /* @__PURE__ */ jsxs(DialogPortal, { children: [
|
|
606
|
+
overlay && /* @__PURE__ */ jsx(DialogOverlay, {}),
|
|
607
|
+
/* @__PURE__ */ jsxs(
|
|
608
|
+
Dialog$1.Content,
|
|
609
|
+
{
|
|
610
|
+
"data-slot": "dialog-content",
|
|
611
|
+
className: cn(dialogContentVariants({ variant }), className),
|
|
612
|
+
"aria-describedby": ariaDescribedBy,
|
|
613
|
+
...props,
|
|
614
|
+
children: [
|
|
615
|
+
children,
|
|
616
|
+
showCloseButton && /* @__PURE__ */ jsxs(DialogClose, { className: "cursor-pointer outline-0 absolute end-5 top-5 rounded-sm opacity-60 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [
|
|
617
|
+
/* @__PURE__ */ jsx(X, { className: "size-4" }),
|
|
618
|
+
/* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
|
|
619
|
+
] })
|
|
620
|
+
]
|
|
621
|
+
}
|
|
622
|
+
)
|
|
623
|
+
] });
|
|
624
|
+
}
|
|
625
|
+
var DialogHeader = ({
|
|
626
|
+
className,
|
|
627
|
+
...props
|
|
628
|
+
}) => /* @__PURE__ */ jsx(
|
|
629
|
+
"div",
|
|
630
|
+
{
|
|
631
|
+
"data-slot": "dialog-header",
|
|
632
|
+
className: cn(
|
|
633
|
+
"flex flex-col space-y-1 text-center sm:text-start mb-5",
|
|
634
|
+
className
|
|
635
|
+
),
|
|
636
|
+
...props
|
|
637
|
+
}
|
|
638
|
+
);
|
|
639
|
+
var DialogFooter = ({
|
|
640
|
+
className,
|
|
641
|
+
...props
|
|
642
|
+
}) => /* @__PURE__ */ jsx(
|
|
643
|
+
"div",
|
|
644
|
+
{
|
|
645
|
+
"data-slot": "dialog-footer",
|
|
646
|
+
className: cn(
|
|
647
|
+
"flex flex-col-reverse sm:flex-row sm:justify-end pt-5 sm:space-x-2.5",
|
|
648
|
+
className
|
|
649
|
+
),
|
|
650
|
+
...props
|
|
651
|
+
}
|
|
652
|
+
);
|
|
653
|
+
function DialogTitle({
|
|
654
|
+
className,
|
|
655
|
+
...props
|
|
656
|
+
}) {
|
|
657
|
+
return /* @__PURE__ */ jsx(
|
|
658
|
+
Dialog$1.Title,
|
|
659
|
+
{
|
|
660
|
+
"data-slot": "dialog-title",
|
|
661
|
+
className: cn(
|
|
662
|
+
"text-lg font-semibold leading-none tracking-tight",
|
|
663
|
+
className
|
|
664
|
+
),
|
|
665
|
+
...props
|
|
666
|
+
}
|
|
667
|
+
);
|
|
668
|
+
}
|
|
669
|
+
var DialogBody = ({
|
|
670
|
+
className,
|
|
671
|
+
...props
|
|
672
|
+
}) => /* @__PURE__ */ jsx("div", { "data-slot": "dialog-body", className: cn("grow", className), ...props });
|
|
673
|
+
function DialogDescription({
|
|
674
|
+
className,
|
|
675
|
+
...props
|
|
676
|
+
}) {
|
|
677
|
+
return /* @__PURE__ */ jsx(
|
|
678
|
+
Dialog$1.Description,
|
|
679
|
+
{
|
|
680
|
+
"data-slot": "dialog-description",
|
|
681
|
+
className: cn("text-sm text-muted-foreground", className),
|
|
682
|
+
...props
|
|
683
|
+
}
|
|
684
|
+
);
|
|
685
|
+
}
|
|
686
|
+
function Popover({ ...props }) {
|
|
687
|
+
return /* @__PURE__ */ jsx(Popover$1.Root, { "data-slot": "popover", ...props });
|
|
688
|
+
}
|
|
689
|
+
function PopoverTrigger({ ...props }) {
|
|
690
|
+
return /* @__PURE__ */ jsx(Popover$1.Trigger, { "data-slot": "popover-trigger", ...props });
|
|
691
|
+
}
|
|
692
|
+
function PopoverContent({
|
|
693
|
+
className,
|
|
694
|
+
align = "center",
|
|
695
|
+
sideOffset = 4,
|
|
696
|
+
...props
|
|
697
|
+
}) {
|
|
698
|
+
return /* @__PURE__ */ jsx(
|
|
699
|
+
Popover$1.Content,
|
|
700
|
+
{
|
|
701
|
+
"data-slot": "popover-content",
|
|
702
|
+
align,
|
|
703
|
+
sideOffset,
|
|
704
|
+
className: cn(
|
|
705
|
+
"z-50 w-72 rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md shadow-black/5 outline-hidden 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",
|
|
706
|
+
className
|
|
707
|
+
),
|
|
708
|
+
...props
|
|
709
|
+
}
|
|
710
|
+
);
|
|
711
|
+
}
|
|
712
|
+
var Drawer = ({ shouldScaleBackground = true, ...props }) => /* @__PURE__ */ jsx(Drawer$1.Root, { shouldScaleBackground, ...props });
|
|
713
|
+
function DrawerTrigger({ ...props }) {
|
|
714
|
+
return /* @__PURE__ */ jsx(Drawer$1.Trigger, { "data-slot": "drawer-trigger", ...props });
|
|
715
|
+
}
|
|
716
|
+
function DrawerPortal({ ...props }) {
|
|
717
|
+
return /* @__PURE__ */ jsx(Drawer$1.Portal, { "data-slot": "drawer-portal", ...props });
|
|
718
|
+
}
|
|
719
|
+
function DrawerClose({ ...props }) {
|
|
720
|
+
return /* @__PURE__ */ jsx(Drawer$1.Close, { "data-slot": "drawer-close", ...props });
|
|
721
|
+
}
|
|
722
|
+
function DrawerOverlay({ className, ...props }) {
|
|
723
|
+
return /* @__PURE__ */ jsx(
|
|
724
|
+
Drawer$1.Overlay,
|
|
725
|
+
{
|
|
726
|
+
"data-slot": "drawer-overlay",
|
|
727
|
+
className: cn("fixed inset-0 z-50 bg-black/80", className),
|
|
728
|
+
...props
|
|
729
|
+
}
|
|
730
|
+
);
|
|
731
|
+
}
|
|
732
|
+
function DrawerContent({ className, children, ...props }) {
|
|
733
|
+
return /* @__PURE__ */ jsxs(DrawerPortal, { children: [
|
|
734
|
+
/* @__PURE__ */ jsx(DrawerOverlay, {}),
|
|
735
|
+
/* @__PURE__ */ jsxs(
|
|
736
|
+
Drawer$1.Content,
|
|
737
|
+
{
|
|
738
|
+
"data-slot": "drawer-content",
|
|
739
|
+
className: cn(
|
|
740
|
+
"bg-background fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border",
|
|
741
|
+
className
|
|
742
|
+
),
|
|
743
|
+
...props,
|
|
744
|
+
children: [
|
|
745
|
+
/* @__PURE__ */ jsx("div", { className: "mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" }),
|
|
746
|
+
children
|
|
747
|
+
]
|
|
748
|
+
}
|
|
749
|
+
)
|
|
750
|
+
] });
|
|
751
|
+
}
|
|
752
|
+
var DrawerHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { "data-slot": "drawer-header", className: cn("grid gap-1.5 p-4 text-center sm:text-left", className), ...props });
|
|
753
|
+
var DrawerFooter = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { "data-slot": "drawer-footer", className: cn("mt-auto flex flex-col gap-2 p-4", className), ...props });
|
|
754
|
+
function DrawerTitle({ className, ...props }) {
|
|
755
|
+
return /* @__PURE__ */ jsx(
|
|
756
|
+
Drawer$1.Title,
|
|
757
|
+
{
|
|
758
|
+
"data-slot": "drawer-title",
|
|
759
|
+
className: cn("text-lg font-semibold leading-none tracking-tight", className),
|
|
760
|
+
...props
|
|
761
|
+
}
|
|
762
|
+
);
|
|
763
|
+
}
|
|
764
|
+
function DrawerDescription({ className, ...props }) {
|
|
765
|
+
return /* @__PURE__ */ jsx(
|
|
766
|
+
Drawer$1.Description,
|
|
767
|
+
{
|
|
768
|
+
"data-slot": "drawer-description",
|
|
769
|
+
className: cn("text-sm text-muted-foreground", className),
|
|
770
|
+
...props
|
|
771
|
+
}
|
|
772
|
+
);
|
|
773
|
+
}
|
|
774
|
+
function HoverCard({ ...props }) {
|
|
775
|
+
return /* @__PURE__ */ jsx(HoverCardPrimitive.Root, { "data-slot": "hover-card", ...props });
|
|
776
|
+
}
|
|
777
|
+
function HoverCardTrigger({ ...props }) {
|
|
778
|
+
return /* @__PURE__ */ jsx(HoverCardPrimitive.Trigger, { "data-slot": "hover-card-trigger", ...props });
|
|
779
|
+
}
|
|
780
|
+
function HoverCardContent({
|
|
781
|
+
className,
|
|
782
|
+
align = "center",
|
|
783
|
+
sideOffset = 4,
|
|
784
|
+
...props
|
|
785
|
+
}) {
|
|
786
|
+
return /* @__PURE__ */ jsx(HoverCardPrimitive.Portal, { "data-slot": "hover-card-portal", children: /* @__PURE__ */ jsx(
|
|
787
|
+
HoverCardPrimitive.Content,
|
|
788
|
+
{
|
|
789
|
+
"data-slot": "hover-card-content",
|
|
790
|
+
align,
|
|
791
|
+
sideOffset,
|
|
792
|
+
className: cn(
|
|
793
|
+
"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-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
|
|
794
|
+
className
|
|
795
|
+
),
|
|
796
|
+
...props
|
|
797
|
+
}
|
|
798
|
+
) });
|
|
799
|
+
}
|
|
800
|
+
function Sheet({ ...props }) {
|
|
801
|
+
return /* @__PURE__ */ jsx(Dialog$1.Root, { "data-slot": "sheet", ...props });
|
|
802
|
+
}
|
|
803
|
+
function SheetTrigger({ ...props }) {
|
|
804
|
+
return /* @__PURE__ */ jsx(Dialog$1.Trigger, { "data-slot": "sheet-trigger", ...props });
|
|
805
|
+
}
|
|
806
|
+
function SheetClose({ ...props }) {
|
|
807
|
+
return /* @__PURE__ */ jsx(Dialog$1.Close, { "data-slot": "sheet-close", ...props });
|
|
808
|
+
}
|
|
809
|
+
function SheetPortal({ ...props }) {
|
|
810
|
+
return /* @__PURE__ */ jsx(Dialog$1.Portal, { "data-slot": "sheet-portal", ...props });
|
|
811
|
+
}
|
|
812
|
+
function SheetOverlay({ className, ...props }) {
|
|
813
|
+
return /* @__PURE__ */ jsx(
|
|
814
|
+
Dialog$1.Overlay,
|
|
815
|
+
{
|
|
816
|
+
"data-slot": "sheet-overlay",
|
|
817
|
+
className: cn(
|
|
818
|
+
"fixed inset-0 z-50 bg-black/30 [backdrop-filter:blur(4px)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
|
819
|
+
className
|
|
820
|
+
),
|
|
821
|
+
...props
|
|
822
|
+
}
|
|
823
|
+
);
|
|
824
|
+
}
|
|
825
|
+
var sheetVariants = cva(
|
|
826
|
+
"flex flex-col items-strech fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-400",
|
|
827
|
+
{
|
|
828
|
+
variants: {
|
|
829
|
+
side: {
|
|
830
|
+
top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
|
|
831
|
+
bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
|
|
832
|
+
left: "inset-y-0 start-0 h-full w-3/4 border-e data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm rtl:data-[state=closed]:slide-out-to-right rtl:data-[state=open]:slide-in-from-right",
|
|
833
|
+
right: "inset-y-0 end-0 h-full w-3/4 border-s data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm rtl:data-[state=closed]:slide-out-to-left rtl:data-[state=open]:slide-in-from-left"
|
|
834
|
+
}
|
|
835
|
+
},
|
|
836
|
+
defaultVariants: {
|
|
837
|
+
side: "right"
|
|
838
|
+
}
|
|
839
|
+
}
|
|
840
|
+
);
|
|
841
|
+
function SheetContent({
|
|
842
|
+
side = "right",
|
|
843
|
+
overlay = true,
|
|
844
|
+
close = true,
|
|
845
|
+
className,
|
|
846
|
+
children,
|
|
847
|
+
...props
|
|
848
|
+
}) {
|
|
849
|
+
return /* @__PURE__ */ jsxs(SheetPortal, { children: [
|
|
850
|
+
overlay && /* @__PURE__ */ jsx(SheetOverlay, {}),
|
|
851
|
+
/* @__PURE__ */ jsxs(Dialog$1.Content, { className: cn(sheetVariants({ side }), className), ...props, children: [
|
|
852
|
+
children,
|
|
853
|
+
close && /* @__PURE__ */ jsxs(
|
|
854
|
+
Dialog$1.Close,
|
|
855
|
+
{
|
|
856
|
+
"data-slot": "sheet-close",
|
|
857
|
+
className: "cursor-pointer absolute end-5 top-4 rounded-sm opacity-60 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary",
|
|
858
|
+
children: [
|
|
859
|
+
/* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
|
|
860
|
+
/* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
|
|
861
|
+
]
|
|
862
|
+
}
|
|
863
|
+
)
|
|
864
|
+
] })
|
|
865
|
+
] });
|
|
866
|
+
}
|
|
867
|
+
function SheetHeader({ className, ...props }) {
|
|
868
|
+
return /* @__PURE__ */ jsx(
|
|
869
|
+
"div",
|
|
870
|
+
{
|
|
871
|
+
"data-slot": "sheet-header",
|
|
872
|
+
className: cn("flex flex-col space-y-1 text-center sm:text-start", className),
|
|
873
|
+
...props
|
|
874
|
+
}
|
|
875
|
+
);
|
|
876
|
+
}
|
|
877
|
+
function SheetBody({ className, ...props }) {
|
|
878
|
+
return /* @__PURE__ */ jsx("div", { "data-slot": "sheet-body", className: cn("py-2.5", className), ...props });
|
|
879
|
+
}
|
|
880
|
+
function SheetFooter({ className, ...props }) {
|
|
881
|
+
return /* @__PURE__ */ jsx(
|
|
882
|
+
"div",
|
|
883
|
+
{
|
|
884
|
+
"data-slot": "sheet-footer",
|
|
885
|
+
className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className),
|
|
886
|
+
...props
|
|
887
|
+
}
|
|
888
|
+
);
|
|
889
|
+
}
|
|
890
|
+
function SheetTitle({ className, ...props }) {
|
|
891
|
+
return /* @__PURE__ */ jsx(
|
|
892
|
+
Dialog$1.Title,
|
|
893
|
+
{
|
|
894
|
+
"data-slot": "sheet-title",
|
|
895
|
+
className: cn("text-base font-semibold text-foreground", className),
|
|
896
|
+
...props
|
|
897
|
+
}
|
|
898
|
+
);
|
|
899
|
+
}
|
|
900
|
+
function SheetDescription({ className, ...props }) {
|
|
901
|
+
return /* @__PURE__ */ jsx(
|
|
902
|
+
Dialog$1.Description,
|
|
903
|
+
{
|
|
904
|
+
"data-slot": "sheet-description",
|
|
905
|
+
className: cn("text-sm text-muted-foreground", className),
|
|
906
|
+
...props
|
|
907
|
+
}
|
|
908
|
+
);
|
|
909
|
+
}
|
|
910
|
+
var AvatarGroupContext = React.createContext(
|
|
911
|
+
null
|
|
912
|
+
);
|
|
913
|
+
var StaggeredContent = ({ content }) => {
|
|
914
|
+
const children = React.Children.toArray(content);
|
|
915
|
+
return /* @__PURE__ */ jsx(
|
|
916
|
+
motion.div,
|
|
917
|
+
{
|
|
918
|
+
initial: "initial",
|
|
919
|
+
animate: "animate",
|
|
920
|
+
exit: "exit",
|
|
921
|
+
variants: {
|
|
922
|
+
animate: { transition: { staggerChildren: 0.08 } }
|
|
923
|
+
},
|
|
924
|
+
children: children.map((child, i) => /* @__PURE__ */ jsx(
|
|
925
|
+
motion.div,
|
|
926
|
+
{
|
|
927
|
+
variants: {
|
|
928
|
+
initial: { opacity: 0, y: 20 },
|
|
929
|
+
animate: {
|
|
930
|
+
opacity: 1,
|
|
931
|
+
y: 0,
|
|
932
|
+
transition: { duration: 0.3, ease: "easeOut" }
|
|
933
|
+
},
|
|
934
|
+
exit: {
|
|
935
|
+
opacity: 0,
|
|
936
|
+
y: -20,
|
|
937
|
+
transition: { duration: 0.2, ease: "easeIn" }
|
|
938
|
+
}
|
|
939
|
+
},
|
|
940
|
+
children: child
|
|
941
|
+
},
|
|
942
|
+
i
|
|
943
|
+
))
|
|
944
|
+
}
|
|
945
|
+
);
|
|
946
|
+
};
|
|
947
|
+
function AvatarGroup({
|
|
948
|
+
children,
|
|
949
|
+
className,
|
|
950
|
+
tooltipClassName,
|
|
951
|
+
animation = "default"
|
|
952
|
+
}) {
|
|
953
|
+
const contextValue = {
|
|
954
|
+
tooltipClassName,
|
|
955
|
+
animation
|
|
956
|
+
};
|
|
957
|
+
return /* @__PURE__ */ jsx(AvatarGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { className: cn("flex -space-x-2.5", className), children }) });
|
|
958
|
+
}
|
|
959
|
+
function AvatarGroupItem({
|
|
960
|
+
children,
|
|
961
|
+
className,
|
|
962
|
+
tooltipClassName,
|
|
963
|
+
animation: itemAnimation
|
|
964
|
+
}) {
|
|
965
|
+
const context = React.useContext(AvatarGroupContext);
|
|
966
|
+
const [hoveredIndex, setHoveredIndex] = React.useState(false);
|
|
967
|
+
const springConfig = { stiffness: 100, damping: 5 };
|
|
968
|
+
const x = useMotionValue(0);
|
|
969
|
+
const animation = itemAnimation || context?.animation || "default";
|
|
970
|
+
const finalTooltipClassName = tooltipClassName || context?.tooltipClassName;
|
|
971
|
+
const rotate = useSpring(
|
|
972
|
+
useTransform(x, [-100, 100], [-45, 45]),
|
|
973
|
+
springConfig
|
|
974
|
+
);
|
|
975
|
+
const translateX = useSpring(
|
|
976
|
+
useTransform(x, [-100, 100], [-50, 50]),
|
|
977
|
+
springConfig
|
|
978
|
+
);
|
|
979
|
+
const tooltipChild = React.Children.toArray(children).find(
|
|
980
|
+
(child) => React.isValidElement(child) && child.type === AvatarGroupTooltip
|
|
981
|
+
);
|
|
982
|
+
const otherChildren = React.Children.toArray(children).filter(
|
|
983
|
+
(child) => !(React.isValidElement(child) && child.type === AvatarGroupTooltip)
|
|
984
|
+
);
|
|
985
|
+
const tooltipContent = tooltipChild && React.isValidElement(tooltipChild) ? tooltipChild.props.children : null;
|
|
986
|
+
const handleMouseMove = (event) => {
|
|
987
|
+
const halfWidth = event.target.offsetWidth / 2;
|
|
988
|
+
x.set(event.nativeEvent.offsetX - halfWidth);
|
|
989
|
+
};
|
|
990
|
+
const animationVariants = {
|
|
991
|
+
default: {
|
|
992
|
+
initial: { opacity: 0, y: 20, scale: 0.6 },
|
|
993
|
+
animate: {
|
|
994
|
+
opacity: 1,
|
|
995
|
+
y: 0,
|
|
996
|
+
scale: 1,
|
|
997
|
+
transition: {
|
|
998
|
+
type: "spring",
|
|
999
|
+
stiffness: 260,
|
|
1000
|
+
damping: 10
|
|
1001
|
+
}
|
|
1002
|
+
},
|
|
1003
|
+
exit: {
|
|
1004
|
+
opacity: 0,
|
|
1005
|
+
y: 20,
|
|
1006
|
+
scale: 0.6,
|
|
1007
|
+
transition: {
|
|
1008
|
+
duration: 0.2,
|
|
1009
|
+
ease: "easeInOut"
|
|
1010
|
+
}
|
|
1011
|
+
}
|
|
1012
|
+
},
|
|
1013
|
+
flip: {
|
|
1014
|
+
initial: { opacity: 0, rotateX: -90 },
|
|
1015
|
+
animate: {
|
|
1016
|
+
opacity: 1,
|
|
1017
|
+
rotateX: 0,
|
|
1018
|
+
transition: {
|
|
1019
|
+
type: "spring",
|
|
1020
|
+
stiffness: 180,
|
|
1021
|
+
damping: 25
|
|
1022
|
+
}
|
|
1023
|
+
},
|
|
1024
|
+
exit: {
|
|
1025
|
+
opacity: 0,
|
|
1026
|
+
rotateX: -90,
|
|
1027
|
+
transition: {
|
|
1028
|
+
duration: 0.3,
|
|
1029
|
+
ease: "easeInOut"
|
|
1030
|
+
}
|
|
1031
|
+
}
|
|
1032
|
+
},
|
|
1033
|
+
reveal: {
|
|
1034
|
+
initial: { opacity: 0, scale: 0.95 },
|
|
1035
|
+
animate: {
|
|
1036
|
+
opacity: 1,
|
|
1037
|
+
scale: 1,
|
|
1038
|
+
transition: { duration: 0.15, ease: "easeOut" }
|
|
1039
|
+
},
|
|
1040
|
+
exit: {
|
|
1041
|
+
opacity: 0,
|
|
1042
|
+
scale: 0.95,
|
|
1043
|
+
transition: { duration: 0.1, ease: "easeIn" }
|
|
1044
|
+
}
|
|
1045
|
+
}
|
|
1046
|
+
};
|
|
1047
|
+
const selectedVariant = animationVariants[animation];
|
|
1048
|
+
return /* @__PURE__ */ jsxs(
|
|
1049
|
+
"div",
|
|
1050
|
+
{
|
|
1051
|
+
className: cn("group relative", className),
|
|
1052
|
+
onMouseEnter: () => setHoveredIndex(true),
|
|
1053
|
+
onMouseLeave: () => setHoveredIndex(false),
|
|
1054
|
+
children: [
|
|
1055
|
+
/* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: hoveredIndex && tooltipContent && /* @__PURE__ */ jsxs(
|
|
1056
|
+
motion.div,
|
|
1057
|
+
{
|
|
1058
|
+
initial: selectedVariant.initial,
|
|
1059
|
+
animate: selectedVariant.animate,
|
|
1060
|
+
exit: selectedVariant.exit,
|
|
1061
|
+
style: {
|
|
1062
|
+
translateX: animation === "reveal" ? 0 : translateX,
|
|
1063
|
+
rotate: animation === "reveal" ? 0 : rotate,
|
|
1064
|
+
whiteSpace: "nowrap",
|
|
1065
|
+
transformOrigin: "center"
|
|
1066
|
+
},
|
|
1067
|
+
className: cn(
|
|
1068
|
+
"absolute -top-16 left-1/2 z-50 flex -translate-x-1/2 flex-col items-center justify-center rounded-md bg-black px-4 py-2 text-xs font-medium text-white shadow-xl",
|
|
1069
|
+
finalTooltipClassName
|
|
1070
|
+
),
|
|
1071
|
+
children: [
|
|
1072
|
+
/* @__PURE__ */ jsx(
|
|
1073
|
+
motion.div,
|
|
1074
|
+
{
|
|
1075
|
+
className: "absolute inset-x-10 -bottom-px z-30 h-px w-[20%] bg-gradient-to-r from-transparent via-emerald-500 dark:via-emerald-900 to-transparent",
|
|
1076
|
+
initial: { opacity: 0 },
|
|
1077
|
+
animate: { opacity: 1 },
|
|
1078
|
+
exit: { opacity: 0 },
|
|
1079
|
+
transition: { duration: 0.15 }
|
|
1080
|
+
}
|
|
1081
|
+
),
|
|
1082
|
+
/* @__PURE__ */ jsx(
|
|
1083
|
+
motion.div,
|
|
1084
|
+
{
|
|
1085
|
+
className: "absolute -bottom-px left-10 z-30 h-px w-[40%] bg-gradient-to-r from-transparent via-sky-500 dark:via-sky-900 to-transparent",
|
|
1086
|
+
initial: { opacity: 0 },
|
|
1087
|
+
animate: { opacity: 1 },
|
|
1088
|
+
exit: { opacity: 0 },
|
|
1089
|
+
transition: { duration: 0.15 }
|
|
1090
|
+
}
|
|
1091
|
+
),
|
|
1092
|
+
animation === "reveal" ? /* @__PURE__ */ jsx(StaggeredContent, { content: tooltipContent }) : tooltipContent
|
|
1093
|
+
]
|
|
1094
|
+
}
|
|
1095
|
+
) }),
|
|
1096
|
+
/* @__PURE__ */ jsx(
|
|
1097
|
+
motion.div,
|
|
1098
|
+
{
|
|
1099
|
+
className: "relative cursor-pointer",
|
|
1100
|
+
whileHover: {
|
|
1101
|
+
zIndex: 30
|
|
1102
|
+
},
|
|
1103
|
+
whileTap: { scale: 0.95 },
|
|
1104
|
+
transition: {
|
|
1105
|
+
duration: 0.5
|
|
1106
|
+
},
|
|
1107
|
+
onMouseMove: handleMouseMove,
|
|
1108
|
+
children: otherChildren
|
|
1109
|
+
}
|
|
1110
|
+
)
|
|
1111
|
+
]
|
|
1112
|
+
}
|
|
1113
|
+
);
|
|
1114
|
+
}
|
|
1115
|
+
function AvatarGroupTooltip({
|
|
1116
|
+
children,
|
|
1117
|
+
className
|
|
1118
|
+
}) {
|
|
1119
|
+
return /* @__PURE__ */ jsx(
|
|
1120
|
+
motion.div,
|
|
1121
|
+
{
|
|
1122
|
+
initial: { opacity: 0, y: 20, scale: 0.6 },
|
|
1123
|
+
animate: { opacity: 1 },
|
|
1124
|
+
exit: { opacity: 0 },
|
|
1125
|
+
transition: { duration: 0.15 },
|
|
1126
|
+
className: cn("hidden relative z-30", className),
|
|
1127
|
+
children
|
|
1128
|
+
}
|
|
1129
|
+
);
|
|
1130
|
+
}
|
|
1131
|
+
var DataGridContext = createContext(void 0);
|
|
1132
|
+
function useDataGrid() {
|
|
1133
|
+
const context = useContext(DataGridContext);
|
|
1134
|
+
if (!context) {
|
|
1135
|
+
throw new Error("useDataGrid must be used within a DataGridProvider");
|
|
1136
|
+
}
|
|
1137
|
+
return context;
|
|
1138
|
+
}
|
|
1139
|
+
function DataGridProvider({
|
|
1140
|
+
children,
|
|
1141
|
+
table,
|
|
1142
|
+
...props
|
|
1143
|
+
}) {
|
|
1144
|
+
return /* @__PURE__ */ jsx(
|
|
1145
|
+
DataGridContext.Provider,
|
|
1146
|
+
{
|
|
1147
|
+
value: {
|
|
1148
|
+
props,
|
|
1149
|
+
table,
|
|
1150
|
+
recordCount: props.recordCount,
|
|
1151
|
+
isLoading: props.isLoading || false
|
|
1152
|
+
},
|
|
1153
|
+
children
|
|
1154
|
+
}
|
|
1155
|
+
);
|
|
1156
|
+
}
|
|
1157
|
+
function DataGrid({
|
|
1158
|
+
children,
|
|
1159
|
+
table,
|
|
1160
|
+
...props
|
|
1161
|
+
}) {
|
|
1162
|
+
const defaultProps = {
|
|
1163
|
+
loadingMode: "skeleton",
|
|
1164
|
+
tableLayout: {
|
|
1165
|
+
dense: false,
|
|
1166
|
+
cellBorder: false,
|
|
1167
|
+
rowBorder: true,
|
|
1168
|
+
rowRounded: false,
|
|
1169
|
+
stripped: false,
|
|
1170
|
+
headerSticky: false,
|
|
1171
|
+
headerBackground: true,
|
|
1172
|
+
headerBorder: true,
|
|
1173
|
+
width: "fixed",
|
|
1174
|
+
columnsVisibility: false,
|
|
1175
|
+
columnsResizable: false,
|
|
1176
|
+
columnsPinnable: false,
|
|
1177
|
+
columnsMovable: false,
|
|
1178
|
+
columnsDraggable: false,
|
|
1179
|
+
rowsDraggable: false
|
|
1180
|
+
},
|
|
1181
|
+
tableClassNames: {
|
|
1182
|
+
base: "",
|
|
1183
|
+
header: "",
|
|
1184
|
+
headerRow: "",
|
|
1185
|
+
headerSticky: "sticky top-0 z-10 bg-background/90 backdrop-blur-xs",
|
|
1186
|
+
body: "",
|
|
1187
|
+
bodyRow: "",
|
|
1188
|
+
footer: "",
|
|
1189
|
+
edgeCell: ""
|
|
1190
|
+
}
|
|
1191
|
+
};
|
|
1192
|
+
const mergedProps = {
|
|
1193
|
+
...defaultProps,
|
|
1194
|
+
...props,
|
|
1195
|
+
tableLayout: {
|
|
1196
|
+
...defaultProps.tableLayout,
|
|
1197
|
+
...props.tableLayout || {}
|
|
1198
|
+
},
|
|
1199
|
+
tableClassNames: {
|
|
1200
|
+
...defaultProps.tableClassNames,
|
|
1201
|
+
...props.tableClassNames || {}
|
|
1202
|
+
}
|
|
1203
|
+
};
|
|
1204
|
+
if (!table) {
|
|
1205
|
+
throw new Error('DataGrid requires a "table" prop');
|
|
1206
|
+
}
|
|
1207
|
+
return /* @__PURE__ */ jsx(DataGridProvider, { table, ...mergedProps, children });
|
|
1208
|
+
}
|
|
1209
|
+
function DataGridContainer({
|
|
1210
|
+
children,
|
|
1211
|
+
className,
|
|
1212
|
+
border = true
|
|
1213
|
+
}) {
|
|
1214
|
+
return /* @__PURE__ */ jsx(
|
|
1215
|
+
"div",
|
|
1216
|
+
{
|
|
1217
|
+
"data-slot": "data-grid",
|
|
1218
|
+
className: cn(
|
|
1219
|
+
"grid w-full",
|
|
1220
|
+
border && "border border-border rounded-lg",
|
|
1221
|
+
className
|
|
1222
|
+
),
|
|
1223
|
+
children
|
|
1224
|
+
}
|
|
1225
|
+
);
|
|
1226
|
+
}
|
|
1227
|
+
var checkboxVariants = cva(
|
|
1228
|
+
`
|
|
1229
|
+
group peer bg-background shrink-0 rounded-md border border-input ring-offset-background focus-visible:outline-none
|
|
1230
|
+
focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50
|
|
1231
|
+
aria-invalid:border-destructive/60 aria-invalid:ring-destructive/10 dark:aria-invalid:border-destructive dark:aria-invalid:ring-destructive/20
|
|
1232
|
+
[[data-invalid=true]_&]:border-destructive/60 [[data-invalid=true]_&]:ring-destructive/10 dark:[[data-invalid=true]_&]:border-destructive dark:[[data-invalid=true]_&]:ring-destructive/20,
|
|
1233
|
+
data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=checked]:text-primary-foreground data-[state=indeterminate]:bg-primary data-[state=indeterminate]:border-primary data-[state=indeterminate]:text-primary-foreground
|
|
1234
|
+
`,
|
|
1235
|
+
{
|
|
1236
|
+
variants: {
|
|
1237
|
+
size: {
|
|
1238
|
+
sm: "size-4.5 [&_svg]:size-3",
|
|
1239
|
+
md: "size-5 [&_svg]:size-3.5",
|
|
1240
|
+
lg: "size-5.5 [&_svg]:size-4"
|
|
1241
|
+
}
|
|
1242
|
+
},
|
|
1243
|
+
defaultVariants: {
|
|
1244
|
+
size: "md"
|
|
1245
|
+
}
|
|
1246
|
+
}
|
|
1247
|
+
);
|
|
1248
|
+
function Checkbox({
|
|
1249
|
+
className,
|
|
1250
|
+
size,
|
|
1251
|
+
...props
|
|
1252
|
+
}) {
|
|
1253
|
+
return /* @__PURE__ */ jsx(
|
|
1254
|
+
CheckboxPrimitive.Root,
|
|
1255
|
+
{
|
|
1256
|
+
"data-slot": "checkbox",
|
|
1257
|
+
className: cn(checkboxVariants({ size }), className),
|
|
1258
|
+
...props,
|
|
1259
|
+
children: /* @__PURE__ */ jsxs(
|
|
1260
|
+
CheckboxPrimitive.Indicator,
|
|
1261
|
+
{
|
|
1262
|
+
className: cn("flex items-center justify-center text-current"),
|
|
1263
|
+
children: [
|
|
1264
|
+
/* @__PURE__ */ jsx(Check, { className: "group-data-[state=indeterminate]:hidden" }),
|
|
1265
|
+
/* @__PURE__ */ jsx(Minus, { className: "hidden group-data-[state=indeterminate]:block" })
|
|
1266
|
+
]
|
|
1267
|
+
}
|
|
1268
|
+
)
|
|
1269
|
+
}
|
|
1270
|
+
);
|
|
1271
|
+
}
|
|
1272
|
+
var headerCellSpacingVariants = cva("", {
|
|
1273
|
+
variants: {
|
|
1274
|
+
size: {
|
|
1275
|
+
dense: "px-2.5 h-8",
|
|
1276
|
+
default: "px-4"
|
|
1277
|
+
}
|
|
1278
|
+
},
|
|
1279
|
+
defaultVariants: {
|
|
1280
|
+
size: "default"
|
|
1281
|
+
}
|
|
1282
|
+
});
|
|
1283
|
+
var bodyCellSpacingVariants = cva("", {
|
|
1284
|
+
variants: {
|
|
1285
|
+
size: {
|
|
1286
|
+
dense: "px-2.5 py-2",
|
|
1287
|
+
default: "px-4 py-3"
|
|
1288
|
+
}
|
|
1289
|
+
},
|
|
1290
|
+
defaultVariants: {
|
|
1291
|
+
size: "default"
|
|
1292
|
+
}
|
|
1293
|
+
});
|
|
1294
|
+
function getPinningStyles(column) {
|
|
1295
|
+
const isPinned = column.getIsPinned();
|
|
1296
|
+
return {
|
|
1297
|
+
left: isPinned === "left" ? `${column.getStart("left")}px` : void 0,
|
|
1298
|
+
right: isPinned === "right" ? `${column.getAfter("right")}px` : void 0,
|
|
1299
|
+
position: isPinned ? "sticky" : "relative",
|
|
1300
|
+
width: column.getSize(),
|
|
1301
|
+
zIndex: isPinned ? 1 : 0
|
|
1302
|
+
};
|
|
1303
|
+
}
|
|
1304
|
+
function DataGridTableBase({ children }) {
|
|
1305
|
+
const { props } = useDataGrid();
|
|
1306
|
+
return /* @__PURE__ */ jsx(
|
|
1307
|
+
"table",
|
|
1308
|
+
{
|
|
1309
|
+
"data-slot": "data-grid-table",
|
|
1310
|
+
className: cn(
|
|
1311
|
+
"w-full align-middle caption-bottom text-left rtl:text-right text-foreground font-normal text-sm",
|
|
1312
|
+
!props.tableLayout?.columnsDraggable && "border-separate border-spacing-0",
|
|
1313
|
+
props.tableLayout?.width === "fixed" ? "table-fixed" : "table-auto",
|
|
1314
|
+
props.tableClassNames?.base
|
|
1315
|
+
),
|
|
1316
|
+
children
|
|
1317
|
+
}
|
|
1318
|
+
);
|
|
1319
|
+
}
|
|
1320
|
+
function DataGridTableHead({ children }) {
|
|
1321
|
+
const { props } = useDataGrid();
|
|
1322
|
+
return /* @__PURE__ */ jsx(
|
|
1323
|
+
"thead",
|
|
1324
|
+
{
|
|
1325
|
+
className: cn(
|
|
1326
|
+
props.tableClassNames?.header,
|
|
1327
|
+
props.tableLayout?.headerSticky && props.tableClassNames?.headerSticky
|
|
1328
|
+
),
|
|
1329
|
+
children
|
|
1330
|
+
}
|
|
1331
|
+
);
|
|
1332
|
+
}
|
|
1333
|
+
function DataGridTableHeadRow({
|
|
1334
|
+
children,
|
|
1335
|
+
headerGroup
|
|
1336
|
+
}) {
|
|
1337
|
+
const { props } = useDataGrid();
|
|
1338
|
+
return /* @__PURE__ */ jsx(
|
|
1339
|
+
"tr",
|
|
1340
|
+
{
|
|
1341
|
+
className: cn(
|
|
1342
|
+
"bg-muted/40",
|
|
1343
|
+
props.tableLayout?.headerBorder && "[&>th]:border-b",
|
|
1344
|
+
props.tableLayout?.cellBorder && "[&_>:last-child]:border-e-0",
|
|
1345
|
+
props.tableLayout?.stripped && "bg-transparent",
|
|
1346
|
+
props.tableLayout?.headerBackground === false && "bg-transparent",
|
|
1347
|
+
props.tableClassNames?.headerRow
|
|
1348
|
+
),
|
|
1349
|
+
children
|
|
1350
|
+
},
|
|
1351
|
+
headerGroup.id
|
|
1352
|
+
);
|
|
1353
|
+
}
|
|
1354
|
+
function DataGridTableHeadRowCell({
|
|
1355
|
+
children,
|
|
1356
|
+
header,
|
|
1357
|
+
dndRef,
|
|
1358
|
+
dndStyle
|
|
1359
|
+
}) {
|
|
1360
|
+
const { props } = useDataGrid();
|
|
1361
|
+
const { column } = header;
|
|
1362
|
+
const isPinned = column.getIsPinned();
|
|
1363
|
+
const isLastLeftPinned = isPinned === "left" && column.getIsLastColumn("left");
|
|
1364
|
+
const isFirstRightPinned = isPinned === "right" && column.getIsFirstColumn("right");
|
|
1365
|
+
const headerCellSpacing = headerCellSpacingVariants({
|
|
1366
|
+
size: props.tableLayout?.dense ? "dense" : "default"
|
|
1367
|
+
});
|
|
1368
|
+
return /* @__PURE__ */ jsx(
|
|
1369
|
+
"th",
|
|
1370
|
+
{
|
|
1371
|
+
ref: dndRef,
|
|
1372
|
+
style: {
|
|
1373
|
+
...props.tableLayout?.width === "fixed" && {
|
|
1374
|
+
width: `${header.getSize()}px`
|
|
1375
|
+
},
|
|
1376
|
+
...props.tableLayout?.columnsPinnable && column.getCanPin() && getPinningStyles(column),
|
|
1377
|
+
...dndStyle ? dndStyle : null
|
|
1378
|
+
},
|
|
1379
|
+
"data-pinned": isPinned || void 0,
|
|
1380
|
+
"data-last-col": isLastLeftPinned ? "left" : isFirstRightPinned ? "right" : void 0,
|
|
1381
|
+
className: cn(
|
|
1382
|
+
"relative h-10 text-left rtl:text-right align-middle font-normal text-accent-foreground [&:has([role=checkbox])]:pe-0",
|
|
1383
|
+
headerCellSpacing,
|
|
1384
|
+
props.tableLayout?.cellBorder && "border-e",
|
|
1385
|
+
props.tableLayout?.columnsResizable && column.getCanResize() && "truncate",
|
|
1386
|
+
props.tableLayout?.columnsPinnable && column.getCanPin() && "[&:not([data-pinned]):has(+[data-pinned])_div.cursor-col-resize:last-child]:opacity-0 [&[data-last-col=left]_div.cursor-col-resize:last-child]:opacity-0 [&[data-pinned=left][data-last-col=left]]:border-e! [&[data-pinned=right]:last-child_div.cursor-col-resize:last-child]:opacity-0 [&[data-pinned=right][data-last-col=right]]:border-s! [&[data-pinned][data-last-col]]:border-border data-pinned:bg-muted/90 data-pinned:backdrop-blur-xs",
|
|
1387
|
+
header.column.columnDef.meta?.headerClassName,
|
|
1388
|
+
column.getIndex() === 0 || column.getIndex() === header.headerGroup.headers.length - 1 ? props.tableClassNames?.edgeCell : ""
|
|
1389
|
+
),
|
|
1390
|
+
children
|
|
1391
|
+
},
|
|
1392
|
+
header.id
|
|
1393
|
+
);
|
|
1394
|
+
}
|
|
1395
|
+
function DataGridTableHeadRowCellResize({
|
|
1396
|
+
header
|
|
1397
|
+
}) {
|
|
1398
|
+
const { column } = header;
|
|
1399
|
+
return /* @__PURE__ */ jsx(
|
|
1400
|
+
"div",
|
|
1401
|
+
{
|
|
1402
|
+
...{
|
|
1403
|
+
onDoubleClick: () => column.resetSize(),
|
|
1404
|
+
onMouseDown: header.getResizeHandler(),
|
|
1405
|
+
onTouchStart: header.getResizeHandler(),
|
|
1406
|
+
className: "absolute top-0 h-full w-4 cursor-col-resize user-select-none touch-none -end-2 z-10 flex justify-center before:absolute before:w-px before:inset-y-0 before:bg-border before:-translate-x-px"
|
|
1407
|
+
}
|
|
1408
|
+
}
|
|
1409
|
+
);
|
|
1410
|
+
}
|
|
1411
|
+
function DataGridTableRowSpacer() {
|
|
1412
|
+
return /* @__PURE__ */ jsx("tbody", { "aria-hidden": "true", className: "h-2" });
|
|
1413
|
+
}
|
|
1414
|
+
function DataGridTableBody({ children }) {
|
|
1415
|
+
const { props } = useDataGrid();
|
|
1416
|
+
return /* @__PURE__ */ jsx(
|
|
1417
|
+
"tbody",
|
|
1418
|
+
{
|
|
1419
|
+
className: cn(
|
|
1420
|
+
"[&_tr:last-child]:border-0",
|
|
1421
|
+
props.tableLayout?.rowRounded && "[&_td:first-child]:rounded-s-lg [&_td:last-child]:rounded-e-lg",
|
|
1422
|
+
props.tableClassNames?.body
|
|
1423
|
+
),
|
|
1424
|
+
children
|
|
1425
|
+
}
|
|
1426
|
+
);
|
|
1427
|
+
}
|
|
1428
|
+
function DataGridTableBodyRowSkeleton({ children }) {
|
|
1429
|
+
const { table, props } = useDataGrid();
|
|
1430
|
+
return /* @__PURE__ */ jsx(
|
|
1431
|
+
"tr",
|
|
1432
|
+
{
|
|
1433
|
+
className: cn(
|
|
1434
|
+
"hover:bg-muted/40 data-[state=selected]:bg-muted/50",
|
|
1435
|
+
props.onRowClick && "cursor-pointer",
|
|
1436
|
+
!props.tableLayout?.stripped && props.tableLayout?.rowBorder && "border-b border-border [&:not(:last-child)>td]:border-b",
|
|
1437
|
+
props.tableLayout?.cellBorder && "[&_>:last-child]:border-e-0",
|
|
1438
|
+
props.tableLayout?.stripped && "odd:bg-muted/90 hover:bg-transparent odd:hover:bg-muted",
|
|
1439
|
+
table.options.enableRowSelection && "[&_>:first-child]:relative",
|
|
1440
|
+
props.tableClassNames?.bodyRow
|
|
1441
|
+
),
|
|
1442
|
+
children
|
|
1443
|
+
}
|
|
1444
|
+
);
|
|
1445
|
+
}
|
|
1446
|
+
function DataGridTableBodyRowSkeletonCell({
|
|
1447
|
+
children,
|
|
1448
|
+
column
|
|
1449
|
+
}) {
|
|
1450
|
+
const { props, table } = useDataGrid();
|
|
1451
|
+
const bodyCellSpacing = bodyCellSpacingVariants({
|
|
1452
|
+
size: props.tableLayout?.dense ? "dense" : "default"
|
|
1453
|
+
});
|
|
1454
|
+
return /* @__PURE__ */ jsx(
|
|
1455
|
+
"td",
|
|
1456
|
+
{
|
|
1457
|
+
className: cn(
|
|
1458
|
+
"align-middle",
|
|
1459
|
+
bodyCellSpacing,
|
|
1460
|
+
props.tableLayout?.cellBorder && "border-e",
|
|
1461
|
+
props.tableLayout?.columnsResizable && column.getCanResize() && "truncate",
|
|
1462
|
+
column.columnDef.meta?.cellClassName,
|
|
1463
|
+
props.tableLayout?.columnsPinnable && column.getCanPin() && '[&[data-pinned=left][data-last-col=left]]:border-e! [&[data-pinned=right][data-last-col=right]]:border-s! [&[data-pinned][data-last-col]]:border-border data-pinned:bg-background/90 data-pinned:backdrop-blur-xs"',
|
|
1464
|
+
column.getIndex() === 0 || column.getIndex() === table.getVisibleFlatColumns().length - 1 ? props.tableClassNames?.edgeCell : ""
|
|
1465
|
+
),
|
|
1466
|
+
children
|
|
1467
|
+
}
|
|
1468
|
+
);
|
|
1469
|
+
}
|
|
1470
|
+
function DataGridTableBodyRow({
|
|
1471
|
+
children,
|
|
1472
|
+
row,
|
|
1473
|
+
dndRef,
|
|
1474
|
+
dndStyle
|
|
1475
|
+
}) {
|
|
1476
|
+
const { props, table } = useDataGrid();
|
|
1477
|
+
return /* @__PURE__ */ jsx(
|
|
1478
|
+
"tr",
|
|
1479
|
+
{
|
|
1480
|
+
ref: dndRef,
|
|
1481
|
+
style: { ...dndStyle ? dndStyle : null },
|
|
1482
|
+
"data-state": table.options.enableRowSelection && row.getIsSelected() ? "selected" : void 0,
|
|
1483
|
+
onClick: () => props.onRowClick && props.onRowClick(row.original),
|
|
1484
|
+
className: cn(
|
|
1485
|
+
"hover:bg-muted/40 data-[state=selected]:bg-muted/50",
|
|
1486
|
+
props.onRowClick && "cursor-pointer",
|
|
1487
|
+
!props.tableLayout?.stripped && props.tableLayout?.rowBorder && "border-b border-border [&:not(:last-child)>td]:border-b",
|
|
1488
|
+
props.tableLayout?.cellBorder && "[&_>:last-child]:border-e-0",
|
|
1489
|
+
props.tableLayout?.stripped && "odd:bg-muted/90 hover:bg-transparent odd:hover:bg-muted",
|
|
1490
|
+
table.options.enableRowSelection && "[&_>:first-child]:relative",
|
|
1491
|
+
props.tableClassNames?.bodyRow
|
|
1492
|
+
),
|
|
1493
|
+
children
|
|
1494
|
+
}
|
|
1495
|
+
);
|
|
1496
|
+
}
|
|
1497
|
+
function DataGridTableBodyRowExpanded({ row }) {
|
|
1498
|
+
const { props, table } = useDataGrid();
|
|
1499
|
+
return /* @__PURE__ */ jsx(
|
|
1500
|
+
"tr",
|
|
1501
|
+
{
|
|
1502
|
+
className: cn(
|
|
1503
|
+
props.tableLayout?.rowBorder && "[&:not(:last-child)>td]:border-b"
|
|
1504
|
+
),
|
|
1505
|
+
children: /* @__PURE__ */ jsx("td", { colSpan: row.getVisibleCells().length, children: table.getAllColumns().find((column) => column.columnDef.meta?.expandedContent)?.columnDef.meta?.expandedContent?.(row.original) })
|
|
1506
|
+
}
|
|
1507
|
+
);
|
|
1508
|
+
}
|
|
1509
|
+
function DataGridTableBodyRowCell({
|
|
1510
|
+
children,
|
|
1511
|
+
cell,
|
|
1512
|
+
dndRef,
|
|
1513
|
+
dndStyle
|
|
1514
|
+
}) {
|
|
1515
|
+
const { props } = useDataGrid();
|
|
1516
|
+
const { column, row } = cell;
|
|
1517
|
+
const isPinned = column.getIsPinned();
|
|
1518
|
+
const isLastLeftPinned = isPinned === "left" && column.getIsLastColumn("left");
|
|
1519
|
+
const isFirstRightPinned = isPinned === "right" && column.getIsFirstColumn("right");
|
|
1520
|
+
const bodyCellSpacing = bodyCellSpacingVariants({
|
|
1521
|
+
size: props.tableLayout?.dense ? "dense" : "default"
|
|
1522
|
+
});
|
|
1523
|
+
return /* @__PURE__ */ jsx(
|
|
1524
|
+
"td",
|
|
1525
|
+
{
|
|
1526
|
+
ref: dndRef,
|
|
1527
|
+
...props.tableLayout?.columnsDraggable && !isPinned ? { cell } : {},
|
|
1528
|
+
style: {
|
|
1529
|
+
...props.tableLayout?.columnsPinnable && column.getCanPin() && getPinningStyles(column),
|
|
1530
|
+
...dndStyle ? dndStyle : null
|
|
1531
|
+
},
|
|
1532
|
+
"data-pinned": isPinned || void 0,
|
|
1533
|
+
"data-last-col": isLastLeftPinned ? "left" : isFirstRightPinned ? "right" : void 0,
|
|
1534
|
+
className: cn(
|
|
1535
|
+
"align-middle",
|
|
1536
|
+
bodyCellSpacing,
|
|
1537
|
+
props.tableLayout?.cellBorder && "border-e",
|
|
1538
|
+
props.tableLayout?.columnsResizable && column.getCanResize() && "truncate",
|
|
1539
|
+
cell.column.columnDef.meta?.cellClassName,
|
|
1540
|
+
props.tableLayout?.columnsPinnable && column.getCanPin() && '[&[data-pinned=left][data-last-col=left]]:border-e! [&[data-pinned=right][data-last-col=right]]:border-s! [&[data-pinned][data-last-col]]:border-border data-pinned:bg-background/90 data-pinned:backdrop-blur-xs"',
|
|
1541
|
+
column.getIndex() === 0 || column.getIndex() === row.getVisibleCells().length - 1 ? props.tableClassNames?.edgeCell : ""
|
|
1542
|
+
),
|
|
1543
|
+
children
|
|
1544
|
+
},
|
|
1545
|
+
cell.id
|
|
1546
|
+
);
|
|
1547
|
+
}
|
|
1548
|
+
function DataGridTableEmpty() {
|
|
1549
|
+
const { table, props } = useDataGrid();
|
|
1550
|
+
const totalColumns = table.getAllColumns().length;
|
|
1551
|
+
return /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
|
|
1552
|
+
"td",
|
|
1553
|
+
{
|
|
1554
|
+
colSpan: totalColumns,
|
|
1555
|
+
className: "text-center text-muted-foreground py-6",
|
|
1556
|
+
children: props.emptyMessage || "No data available"
|
|
1557
|
+
}
|
|
1558
|
+
) });
|
|
1559
|
+
}
|
|
1560
|
+
function DataGridTableLoader() {
|
|
1561
|
+
const { props } = useDataGrid();
|
|
1562
|
+
return /* @__PURE__ */ jsx("div", { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2", children: /* @__PURE__ */ jsxs("div", { className: "text-muted-foreground bg-card flex items-center gap-2 px-4 py-2 font-medium leading-none text-sm border shadow-xs rounded-md", children: [
|
|
1563
|
+
/* @__PURE__ */ jsxs(
|
|
1564
|
+
"svg",
|
|
1565
|
+
{
|
|
1566
|
+
className: "animate-spin -ml-1 h-5 w-5 text-muted-foreground",
|
|
1567
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
1568
|
+
fill: "none",
|
|
1569
|
+
viewBox: "0 0 24 24",
|
|
1570
|
+
children: [
|
|
1571
|
+
/* @__PURE__ */ jsx(
|
|
1572
|
+
"circle",
|
|
1573
|
+
{
|
|
1574
|
+
className: "opacity-25",
|
|
1575
|
+
cx: "12",
|
|
1576
|
+
cy: "12",
|
|
1577
|
+
r: "10",
|
|
1578
|
+
stroke: "currentColor",
|
|
1579
|
+
strokeWidth: "3"
|
|
1580
|
+
}
|
|
1581
|
+
),
|
|
1582
|
+
/* @__PURE__ */ jsx(
|
|
1583
|
+
"path",
|
|
1584
|
+
{
|
|
1585
|
+
className: "opacity-75",
|
|
1586
|
+
fill: "currentColor",
|
|
1587
|
+
d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
|
1588
|
+
}
|
|
1589
|
+
)
|
|
1590
|
+
]
|
|
1591
|
+
}
|
|
1592
|
+
),
|
|
1593
|
+
props.loadingMessage || "Loading..."
|
|
1594
|
+
] }) });
|
|
1595
|
+
}
|
|
1596
|
+
function DataGridTableRowSelect({
|
|
1597
|
+
row,
|
|
1598
|
+
size
|
|
1599
|
+
}) {
|
|
1600
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
1601
|
+
/* @__PURE__ */ jsx(
|
|
1602
|
+
"div",
|
|
1603
|
+
{
|
|
1604
|
+
className: cn(
|
|
1605
|
+
"hidden absolute top-0 bottom-0 start-0 w-[2px] bg-primary",
|
|
1606
|
+
row.getIsSelected() && "block"
|
|
1607
|
+
)
|
|
1608
|
+
}
|
|
1609
|
+
),
|
|
1610
|
+
/* @__PURE__ */ jsx(
|
|
1611
|
+
Checkbox,
|
|
1612
|
+
{
|
|
1613
|
+
checked: row.getIsSelected(),
|
|
1614
|
+
onCheckedChange: (value) => row.toggleSelected(!!value),
|
|
1615
|
+
"aria-label": "Select row",
|
|
1616
|
+
size: size ?? "sm",
|
|
1617
|
+
className: "align-[inherit]"
|
|
1618
|
+
}
|
|
1619
|
+
)
|
|
1620
|
+
] });
|
|
1621
|
+
}
|
|
1622
|
+
function DataGridTableRowSelectAll({ size }) {
|
|
1623
|
+
const { table, recordCount, isLoading } = useDataGrid();
|
|
1624
|
+
return /* @__PURE__ */ jsx(
|
|
1625
|
+
Checkbox,
|
|
1626
|
+
{
|
|
1627
|
+
checked: table.getIsAllPageRowsSelected() || table.getIsSomePageRowsSelected() && "indeterminate",
|
|
1628
|
+
disabled: isLoading || recordCount === 0,
|
|
1629
|
+
onCheckedChange: (value) => table.toggleAllPageRowsSelected(!!value),
|
|
1630
|
+
"aria-label": "Select all",
|
|
1631
|
+
size,
|
|
1632
|
+
className: "align-[inherit]"
|
|
1633
|
+
}
|
|
1634
|
+
);
|
|
1635
|
+
}
|
|
1636
|
+
function DataGridTable() {
|
|
1637
|
+
const { table, isLoading, props } = useDataGrid();
|
|
1638
|
+
const pagination = table.getState().pagination;
|
|
1639
|
+
return /* @__PURE__ */ jsxs(DataGridTableBase, { children: [
|
|
1640
|
+
/* @__PURE__ */ jsx(DataGridTableHead, { children: table.getHeaderGroups().map((headerGroup, index) => {
|
|
1641
|
+
return /* @__PURE__ */ jsx(DataGridTableHeadRow, { headerGroup, children: headerGroup.headers.map((header, idx) => {
|
|
1642
|
+
const { column } = header;
|
|
1643
|
+
return /* @__PURE__ */ jsxs(DataGridTableHeadRowCell, { header, children: [
|
|
1644
|
+
header.isPlaceholder ? null : flexRender(
|
|
1645
|
+
header.column.columnDef.header,
|
|
1646
|
+
header.getContext()
|
|
1647
|
+
),
|
|
1648
|
+
props.tableLayout?.columnsResizable && column.getCanResize() && /* @__PURE__ */ jsx(DataGridTableHeadRowCellResize, { header })
|
|
1649
|
+
] }, idx);
|
|
1650
|
+
}) }, index);
|
|
1651
|
+
}) }),
|
|
1652
|
+
(props.tableLayout?.stripped || !props.tableLayout?.rowBorder) && /* @__PURE__ */ jsx(DataGridTableRowSpacer, {}),
|
|
1653
|
+
/* @__PURE__ */ jsx(DataGridTableBody, { children: props.loadingMode === "skeleton" && isLoading && pagination?.pageSize ? Array.from({ length: pagination.pageSize }).map((_, rowIndex) => /* @__PURE__ */ jsx(DataGridTableBodyRowSkeleton, { children: table.getVisibleFlatColumns().map((column, colIndex) => {
|
|
1654
|
+
return /* @__PURE__ */ jsx(
|
|
1655
|
+
DataGridTableBodyRowSkeletonCell,
|
|
1656
|
+
{
|
|
1657
|
+
column,
|
|
1658
|
+
children: column.columnDef.meta?.skeleton
|
|
1659
|
+
},
|
|
1660
|
+
colIndex
|
|
1661
|
+
);
|
|
1662
|
+
}) }, rowIndex)) : table.getRowModel().rows.length ? table.getRowModel().rows.map((row, index) => {
|
|
1663
|
+
return /* @__PURE__ */ jsxs(Fragment$1, { children: [
|
|
1664
|
+
/* @__PURE__ */ jsx(DataGridTableBodyRow, { row, children: row.getVisibleCells().map((cell, colIndex) => {
|
|
1665
|
+
return /* @__PURE__ */ jsx(DataGridTableBodyRowCell, { cell, children: flexRender(
|
|
1666
|
+
cell.column.columnDef.cell,
|
|
1667
|
+
cell.getContext()
|
|
1668
|
+
) }, colIndex);
|
|
1669
|
+
}) }, index),
|
|
1670
|
+
row.getIsExpanded() && /* @__PURE__ */ jsx(DataGridTableBodyRowExpanded, { row })
|
|
1671
|
+
] }, row.id);
|
|
1672
|
+
}) : /* @__PURE__ */ jsx(DataGridTableEmpty, {}) })
|
|
1673
|
+
] });
|
|
1674
|
+
}
|
|
1675
|
+
function DropdownMenu({
|
|
1676
|
+
...props
|
|
1677
|
+
}) {
|
|
1678
|
+
return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
|
|
1679
|
+
}
|
|
1680
|
+
function DropdownMenuPortal({
|
|
1681
|
+
...props
|
|
1682
|
+
}) {
|
|
1683
|
+
return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { "data-slot": "dropdown-menu-portal", ...props });
|
|
1684
|
+
}
|
|
1685
|
+
function DropdownMenuTrigger({
|
|
1686
|
+
...props
|
|
1687
|
+
}) {
|
|
1688
|
+
return /* @__PURE__ */ jsx(
|
|
1689
|
+
DropdownMenuPrimitive.Trigger,
|
|
1690
|
+
{
|
|
1691
|
+
className: "select-none",
|
|
1692
|
+
"data-slot": "dropdown-menu-trigger",
|
|
1693
|
+
...props
|
|
1694
|
+
}
|
|
1695
|
+
);
|
|
1696
|
+
}
|
|
1697
|
+
function DropdownMenuSubTrigger({
|
|
1698
|
+
className,
|
|
1699
|
+
inset,
|
|
1700
|
+
children,
|
|
1701
|
+
...props
|
|
1702
|
+
}) {
|
|
1703
|
+
return /* @__PURE__ */ jsxs(
|
|
1704
|
+
DropdownMenuPrimitive.SubTrigger,
|
|
1705
|
+
{
|
|
1706
|
+
"data-slot": "dropdown-menu-sub-trigger",
|
|
1707
|
+
className: cn(
|
|
1708
|
+
"flex cursor-default gap-2 select-none items-center rounded-md px-2 py-1.5 text-sm outline-hidden",
|
|
1709
|
+
"focus:bg-accent focus:text-foreground",
|
|
1710
|
+
"data-[state=open]:bg-accent data-[state=open]:text-foreground",
|
|
1711
|
+
"data-[here=true]:bg-accent data-[here=true]:text-foreground",
|
|
1712
|
+
"[&>svg]:pointer-events-none [&_svg:not([role=img]):not([class*=text-])]:opacity-60 [&>svg]:size-4 [&>svg]:shrink-0",
|
|
1713
|
+
inset && "ps-8",
|
|
1714
|
+
className
|
|
1715
|
+
),
|
|
1716
|
+
...props,
|
|
1717
|
+
children: [
|
|
1718
|
+
children,
|
|
1719
|
+
/* @__PURE__ */ jsx(
|
|
1720
|
+
ChevronRight,
|
|
1721
|
+
{
|
|
1722
|
+
"data-slot": "dropdown-menu-sub-trigger-indicator",
|
|
1723
|
+
className: "ms-auto size-3.5! rtl:rotate-180"
|
|
1724
|
+
}
|
|
1725
|
+
)
|
|
1726
|
+
]
|
|
1727
|
+
}
|
|
1728
|
+
);
|
|
1729
|
+
}
|
|
1730
|
+
function DropdownMenuSubContent({
|
|
1731
|
+
className,
|
|
1732
|
+
...props
|
|
1733
|
+
}) {
|
|
1734
|
+
return /* @__PURE__ */ jsx(
|
|
1735
|
+
DropdownMenuPrimitive.SubContent,
|
|
1736
|
+
{
|
|
1737
|
+
"data-slot": "dropdown-menu-sub-content",
|
|
1738
|
+
className: cn(
|
|
1739
|
+
"space-y-0.5 z-50 min-w-32 overflow-hidden shadow-md shadow-black/5 rounded-md border border-border bg-popover text-popover-foreground p-2 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",
|
|
1740
|
+
className
|
|
1741
|
+
),
|
|
1742
|
+
...props
|
|
1743
|
+
}
|
|
1744
|
+
);
|
|
1745
|
+
}
|
|
1746
|
+
function DropdownMenuContent({
|
|
1747
|
+
className,
|
|
1748
|
+
sideOffset = 4,
|
|
1749
|
+
...props
|
|
1750
|
+
}) {
|
|
1751
|
+
return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
|
|
1752
|
+
DropdownMenuPrimitive.Content,
|
|
1753
|
+
{
|
|
1754
|
+
"data-slot": "dropdown-menu-content",
|
|
1755
|
+
sideOffset,
|
|
1756
|
+
className: cn(
|
|
1757
|
+
"space-y-0.5 z-50 min-w-32 overflow-hidden rounded-md border border-border bg-popover p-2 text-popover-foreground shadow-md shadow-black/5 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",
|
|
1758
|
+
className
|
|
1759
|
+
),
|
|
1760
|
+
...props
|
|
1761
|
+
}
|
|
1762
|
+
) });
|
|
1763
|
+
}
|
|
1764
|
+
function DropdownMenuGroup({
|
|
1765
|
+
...props
|
|
1766
|
+
}) {
|
|
1767
|
+
return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Group, { "data-slot": "dropdown-menu-group", ...props });
|
|
1768
|
+
}
|
|
1769
|
+
function DropdownMenuItem({
|
|
1770
|
+
className,
|
|
1771
|
+
inset,
|
|
1772
|
+
variant,
|
|
1773
|
+
...props
|
|
1774
|
+
}) {
|
|
1775
|
+
return /* @__PURE__ */ jsx(
|
|
1776
|
+
DropdownMenuPrimitive.Item,
|
|
1777
|
+
{
|
|
1778
|
+
"data-slot": "dropdown-menu-item",
|
|
1779
|
+
className: cn(
|
|
1780
|
+
"text-foreground relative flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-hidden transition-colors data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([role=img]):not([class*=text-])]:opacity-60 [&_svg:not([class*=size-])]:size-4 [&_svg]:shrink-0",
|
|
1781
|
+
"focus:bg-accent focus:text-foreground",
|
|
1782
|
+
"data-[active=true]:bg-accent data-[active=true]:text-accent-foreground",
|
|
1783
|
+
inset && "ps-8",
|
|
1784
|
+
variant === "destructive" && "text-destructive hover:text-destructive focus:text-destructive hover:bg-destructive/5 focus:bg-destructive/5 data-[active=true]:bg-destructive/5",
|
|
1785
|
+
className
|
|
1786
|
+
),
|
|
1787
|
+
...props
|
|
1788
|
+
}
|
|
1789
|
+
);
|
|
1790
|
+
}
|
|
1791
|
+
function DropdownMenuCheckboxItem({
|
|
1792
|
+
className,
|
|
1793
|
+
children,
|
|
1794
|
+
checked,
|
|
1795
|
+
...props
|
|
1796
|
+
}) {
|
|
1797
|
+
return /* @__PURE__ */ jsxs(
|
|
1798
|
+
DropdownMenuPrimitive.CheckboxItem,
|
|
1799
|
+
{
|
|
1800
|
+
"data-slot": "dropdown-menu-checkbox-item",
|
|
1801
|
+
className: cn(
|
|
1802
|
+
"relative flex cursor-default select-none items-center rounded-md py-1.5 ps-8 pe-2 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
|
|
1803
|
+
className
|
|
1804
|
+
),
|
|
1805
|
+
checked,
|
|
1806
|
+
...props,
|
|
1807
|
+
children: [
|
|
1808
|
+
/* @__PURE__ */ jsx("span", { className: "absolute start-2 flex h-3.5 w-3.5 items-center text-muted-foreground justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 text-primary" }) }) }),
|
|
1809
|
+
children
|
|
1810
|
+
]
|
|
1811
|
+
}
|
|
1812
|
+
);
|
|
1813
|
+
}
|
|
1814
|
+
function DropdownMenuRadioItem({
|
|
1815
|
+
className,
|
|
1816
|
+
children,
|
|
1817
|
+
...props
|
|
1818
|
+
}) {
|
|
1819
|
+
return /* @__PURE__ */ jsxs(
|
|
1820
|
+
DropdownMenuPrimitive.RadioItem,
|
|
1821
|
+
{
|
|
1822
|
+
"data-slot": "dropdown-menu-radio-item",
|
|
1823
|
+
className: cn(
|
|
1824
|
+
"relative flex cursor-default select-none items-center rounded-md py-1.5 ps-6 pe-2 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
|
|
1825
|
+
className
|
|
1826
|
+
),
|
|
1827
|
+
...props,
|
|
1828
|
+
children: [
|
|
1829
|
+
/* @__PURE__ */ jsx("span", { className: "absolute start-1.5 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Circle, { className: "h-1.5 w-1.5 fill-primary stroke-primary" }) }) }),
|
|
1830
|
+
children
|
|
1831
|
+
]
|
|
1832
|
+
}
|
|
1833
|
+
);
|
|
1834
|
+
}
|
|
1835
|
+
function DropdownMenuLabel({
|
|
1836
|
+
className,
|
|
1837
|
+
inset,
|
|
1838
|
+
...props
|
|
1839
|
+
}) {
|
|
1840
|
+
return /* @__PURE__ */ jsx(
|
|
1841
|
+
DropdownMenuPrimitive.Label,
|
|
1842
|
+
{
|
|
1843
|
+
"data-slot": "dropdown-menu-label",
|
|
1844
|
+
className: cn(
|
|
1845
|
+
"px-2 py-1.5 text-xs text-muted-foreground font-medium",
|
|
1846
|
+
inset && "ps-8",
|
|
1847
|
+
className
|
|
1848
|
+
),
|
|
1849
|
+
...props
|
|
1850
|
+
}
|
|
1851
|
+
);
|
|
1852
|
+
}
|
|
1853
|
+
function DropdownMenuRadioGroup({
|
|
1854
|
+
...props
|
|
1855
|
+
}) {
|
|
1856
|
+
return /* @__PURE__ */ jsx(
|
|
1857
|
+
DropdownMenuPrimitive.RadioGroup,
|
|
1858
|
+
{
|
|
1859
|
+
"data-slot": "dropdown-menu-radio-group",
|
|
1860
|
+
...props
|
|
1861
|
+
}
|
|
1862
|
+
);
|
|
1863
|
+
}
|
|
1864
|
+
function DropdownMenuSeparator({
|
|
1865
|
+
className,
|
|
1866
|
+
...props
|
|
1867
|
+
}) {
|
|
1868
|
+
return /* @__PURE__ */ jsx(
|
|
1869
|
+
DropdownMenuPrimitive.Separator,
|
|
1870
|
+
{
|
|
1871
|
+
"data-slot": "dropdown-menu-separator",
|
|
1872
|
+
className: cn("-mx-2 my-1.5 h-px bg-muted", className),
|
|
1873
|
+
...props
|
|
1874
|
+
}
|
|
1875
|
+
);
|
|
1876
|
+
}
|
|
1877
|
+
function DropdownMenuShortcut({
|
|
1878
|
+
className,
|
|
1879
|
+
...props
|
|
1880
|
+
}) {
|
|
1881
|
+
return /* @__PURE__ */ jsx(
|
|
1882
|
+
"span",
|
|
1883
|
+
{
|
|
1884
|
+
"data-slot": "dropdown-menu-shortcut",
|
|
1885
|
+
className: cn("ms-auto text-xs tracking-widest opacity-60", className),
|
|
1886
|
+
...props
|
|
1887
|
+
}
|
|
1888
|
+
);
|
|
1889
|
+
}
|
|
1890
|
+
function DropdownMenuSub({
|
|
1891
|
+
...props
|
|
1892
|
+
}) {
|
|
1893
|
+
return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Sub, { "data-slot": "dropdown-menu-sub", ...props });
|
|
1894
|
+
}
|
|
1895
|
+
function DataGridColumnHeader({
|
|
1896
|
+
column,
|
|
1897
|
+
title = "",
|
|
1898
|
+
icon,
|
|
1899
|
+
className,
|
|
1900
|
+
filter,
|
|
1901
|
+
visibility = false
|
|
1902
|
+
}) {
|
|
1903
|
+
const { isLoading, table, props, recordCount } = useDataGrid();
|
|
1904
|
+
const moveColumn = (direction) => {
|
|
1905
|
+
const currentOrder = [...table.getState().columnOrder];
|
|
1906
|
+
const currentIndex = currentOrder.indexOf(column.id);
|
|
1907
|
+
if (direction === "left" && currentIndex > 0) {
|
|
1908
|
+
const newOrder = [...currentOrder];
|
|
1909
|
+
const [movedColumn] = newOrder.splice(currentIndex, 1);
|
|
1910
|
+
newOrder.splice(currentIndex - 1, 0, movedColumn);
|
|
1911
|
+
table.setColumnOrder(newOrder);
|
|
1912
|
+
}
|
|
1913
|
+
if (direction === "right" && currentIndex < currentOrder.length - 1) {
|
|
1914
|
+
const newOrder = [...currentOrder];
|
|
1915
|
+
const [movedColumn] = newOrder.splice(currentIndex, 1);
|
|
1916
|
+
newOrder.splice(currentIndex + 1, 0, movedColumn);
|
|
1917
|
+
table.setColumnOrder(newOrder);
|
|
1918
|
+
}
|
|
1919
|
+
};
|
|
1920
|
+
const canMove = (direction) => {
|
|
1921
|
+
const currentOrder = table.getState().columnOrder;
|
|
1922
|
+
const currentIndex = currentOrder.indexOf(column.id);
|
|
1923
|
+
if (direction === "left") {
|
|
1924
|
+
return currentIndex > 0;
|
|
1925
|
+
} else {
|
|
1926
|
+
return currentIndex < currentOrder.length - 1;
|
|
1927
|
+
}
|
|
1928
|
+
};
|
|
1929
|
+
const headerLabel = () => {
|
|
1930
|
+
return /* @__PURE__ */ jsxs(
|
|
1931
|
+
"div",
|
|
1932
|
+
{
|
|
1933
|
+
className: cn(
|
|
1934
|
+
"text-accent-foreground font-normal inline-flex h-full items-center gap-1.5 text-[0.8125rem] leading-[calc(1.125/0.8125)] [&_svg]:size-3.5 [&_svg]:opacity-60",
|
|
1935
|
+
className
|
|
1936
|
+
),
|
|
1937
|
+
children: [
|
|
1938
|
+
icon && icon,
|
|
1939
|
+
title
|
|
1940
|
+
]
|
|
1941
|
+
}
|
|
1942
|
+
);
|
|
1943
|
+
};
|
|
1944
|
+
const headerButton = () => {
|
|
1945
|
+
return /* @__PURE__ */ jsxs(
|
|
1946
|
+
Button,
|
|
1947
|
+
{
|
|
1948
|
+
variant: "ghost",
|
|
1949
|
+
className: cn(
|
|
1950
|
+
"text-secondary-foreground rounded-md font-normal -ms-2 px-2 h-7 hover:bg-secondary data-[state=open]:bg-secondary hover:text-foreground data-[state=open]:text-foreground",
|
|
1951
|
+
className
|
|
1952
|
+
),
|
|
1953
|
+
disabled: isLoading || recordCount === 0,
|
|
1954
|
+
onClick: () => {
|
|
1955
|
+
const isSorted = column.getIsSorted();
|
|
1956
|
+
if (isSorted === "asc") {
|
|
1957
|
+
column.toggleSorting(true);
|
|
1958
|
+
} else if (isSorted === "desc") {
|
|
1959
|
+
column.clearSorting();
|
|
1960
|
+
} else {
|
|
1961
|
+
column.toggleSorting(false);
|
|
1962
|
+
}
|
|
1963
|
+
},
|
|
1964
|
+
children: [
|
|
1965
|
+
icon && icon,
|
|
1966
|
+
title,
|
|
1967
|
+
column.getCanSort() && (column.getIsSorted() === "desc" ? /* @__PURE__ */ jsx(ArrowDown, { className: "size-[0.7rem]! mt-px" }) : column.getIsSorted() === "asc" ? /* @__PURE__ */ jsx(ArrowUp, { className: "size-[0.7rem]! mt-px" }) : /* @__PURE__ */ jsx(ChevronsUpDown, { className: "size-[0.7rem]! mt-px" }))
|
|
1968
|
+
]
|
|
1969
|
+
}
|
|
1970
|
+
);
|
|
1971
|
+
};
|
|
1972
|
+
const headerPin = () => {
|
|
1973
|
+
return /* @__PURE__ */ jsx(
|
|
1974
|
+
Button,
|
|
1975
|
+
{
|
|
1976
|
+
mode: "icon",
|
|
1977
|
+
size: "sm",
|
|
1978
|
+
variant: "ghost",
|
|
1979
|
+
className: "-me-1 size-7 rounded-md",
|
|
1980
|
+
onClick: () => column.pin(false),
|
|
1981
|
+
"aria-label": `Unpin ${title} column`,
|
|
1982
|
+
title: `Unpin ${title} column`,
|
|
1983
|
+
children: /* @__PURE__ */ jsx(PinOff, { className: "size-3.5! opacity-50!", "aria-hidden": "true" })
|
|
1984
|
+
}
|
|
1985
|
+
);
|
|
1986
|
+
};
|
|
1987
|
+
const headerControls = () => {
|
|
1988
|
+
return /* @__PURE__ */ jsxs("div", { className: "flex items-center h-full gap-1.5 justify-between", children: [
|
|
1989
|
+
/* @__PURE__ */ jsxs(DropdownMenu, { children: [
|
|
1990
|
+
/* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: headerButton() }),
|
|
1991
|
+
/* @__PURE__ */ jsxs(DropdownMenuContent, { className: "w-40", align: "start", children: [
|
|
1992
|
+
filter && /* @__PURE__ */ jsx(DropdownMenuLabel, { children: filter }),
|
|
1993
|
+
filter && (column.getCanSort() || column.getCanPin() || visibility) && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
|
|
1994
|
+
column.getCanSort() && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
1995
|
+
/* @__PURE__ */ jsxs(
|
|
1996
|
+
DropdownMenuItem,
|
|
1997
|
+
{
|
|
1998
|
+
onClick: () => {
|
|
1999
|
+
if (column.getIsSorted() === "asc") {
|
|
2000
|
+
column.clearSorting();
|
|
2001
|
+
} else {
|
|
2002
|
+
column.toggleSorting(false);
|
|
2003
|
+
}
|
|
2004
|
+
},
|
|
2005
|
+
disabled: !column.getCanSort(),
|
|
2006
|
+
children: [
|
|
2007
|
+
/* @__PURE__ */ jsx(ArrowUp, { className: "size-3.5!" }),
|
|
2008
|
+
/* @__PURE__ */ jsx("span", { className: "grow", children: "Asc" }),
|
|
2009
|
+
column.getIsSorted() === "asc" && /* @__PURE__ */ jsx(Check, { className: "size-4 opacity-100! text-primary" })
|
|
2010
|
+
]
|
|
2011
|
+
}
|
|
2012
|
+
),
|
|
2013
|
+
/* @__PURE__ */ jsxs(
|
|
2014
|
+
DropdownMenuItem,
|
|
2015
|
+
{
|
|
2016
|
+
onClick: () => {
|
|
2017
|
+
if (column.getIsSorted() === "desc") {
|
|
2018
|
+
column.clearSorting();
|
|
2019
|
+
} else {
|
|
2020
|
+
column.toggleSorting(true);
|
|
2021
|
+
}
|
|
2022
|
+
},
|
|
2023
|
+
disabled: !column.getCanSort(),
|
|
2024
|
+
children: [
|
|
2025
|
+
/* @__PURE__ */ jsx(ArrowDown, { className: "size-3.5!" }),
|
|
2026
|
+
/* @__PURE__ */ jsx("span", { className: "grow", children: "Desc" }),
|
|
2027
|
+
column.getIsSorted() === "desc" && /* @__PURE__ */ jsx(Check, { className: "size-4 opacity-100! text-primary" })
|
|
2028
|
+
]
|
|
2029
|
+
}
|
|
2030
|
+
)
|
|
2031
|
+
] }),
|
|
2032
|
+
(filter || column.getCanSort()) && (column.getCanSort() || column.getCanPin() || visibility) && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
|
|
2033
|
+
props.tableLayout?.columnsPinnable && column.getCanPin() && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
2034
|
+
/* @__PURE__ */ jsxs(
|
|
2035
|
+
DropdownMenuItem,
|
|
2036
|
+
{
|
|
2037
|
+
onClick: () => column.pin(column.getIsPinned() === "left" ? false : "left"),
|
|
2038
|
+
children: [
|
|
2039
|
+
/* @__PURE__ */ jsx(ArrowLeftToLine, { className: "size-3.5!", "aria-hidden": "true" }),
|
|
2040
|
+
/* @__PURE__ */ jsx("span", { className: "grow", children: "Pin to left" }),
|
|
2041
|
+
column.getIsPinned() === "left" && /* @__PURE__ */ jsx(Check, { className: "size-4 opacity-100! text-primary" })
|
|
2042
|
+
]
|
|
2043
|
+
}
|
|
2044
|
+
),
|
|
2045
|
+
/* @__PURE__ */ jsxs(
|
|
2046
|
+
DropdownMenuItem,
|
|
2047
|
+
{
|
|
2048
|
+
onClick: () => column.pin(
|
|
2049
|
+
column.getIsPinned() === "right" ? false : "right"
|
|
2050
|
+
),
|
|
2051
|
+
children: [
|
|
2052
|
+
/* @__PURE__ */ jsx(ArrowRightToLine, { className: "size-3.5!", "aria-hidden": "true" }),
|
|
2053
|
+
/* @__PURE__ */ jsx("span", { className: "grow", children: "Pin to right" }),
|
|
2054
|
+
column.getIsPinned() === "right" && /* @__PURE__ */ jsx(Check, { className: "size-4 opacity-100! text-primary" })
|
|
2055
|
+
]
|
|
2056
|
+
}
|
|
2057
|
+
)
|
|
2058
|
+
] }),
|
|
2059
|
+
props.tableLayout?.columnsMovable && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
2060
|
+
/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
|
|
2061
|
+
/* @__PURE__ */ jsxs(
|
|
2062
|
+
DropdownMenuItem,
|
|
2063
|
+
{
|
|
2064
|
+
onClick: () => moveColumn("left"),
|
|
2065
|
+
disabled: !canMove("left") || column.getIsPinned() !== false,
|
|
2066
|
+
children: [
|
|
2067
|
+
/* @__PURE__ */ jsx(ArrowLeft, { className: "size-3.5!", "aria-hidden": "true" }),
|
|
2068
|
+
/* @__PURE__ */ jsx("span", { children: "Move to Left" })
|
|
2069
|
+
]
|
|
2070
|
+
}
|
|
2071
|
+
),
|
|
2072
|
+
/* @__PURE__ */ jsxs(
|
|
2073
|
+
DropdownMenuItem,
|
|
2074
|
+
{
|
|
2075
|
+
onClick: () => moveColumn("right"),
|
|
2076
|
+
disabled: !canMove("right") || column.getIsPinned() !== false,
|
|
2077
|
+
children: [
|
|
2078
|
+
/* @__PURE__ */ jsx(ArrowRight, { className: "size-3.5!", "aria-hidden": "true" }),
|
|
2079
|
+
/* @__PURE__ */ jsx("span", { children: "Move to Right" })
|
|
2080
|
+
]
|
|
2081
|
+
}
|
|
2082
|
+
)
|
|
2083
|
+
] }),
|
|
2084
|
+
props.tableLayout?.columnsVisibility && visibility && (column.getCanSort() || column.getCanPin() || filter) && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
|
|
2085
|
+
props.tableLayout?.columnsVisibility && visibility && /* @__PURE__ */ jsxs(DropdownMenuSub, { children: [
|
|
2086
|
+
/* @__PURE__ */ jsxs(DropdownMenuSubTrigger, { children: [
|
|
2087
|
+
/* @__PURE__ */ jsx(Settings2, { className: "size-3.5!" }),
|
|
2088
|
+
/* @__PURE__ */ jsx("span", { children: "Columns" })
|
|
2089
|
+
] }),
|
|
2090
|
+
/* @__PURE__ */ jsx(DropdownMenuPortal, { children: /* @__PURE__ */ jsx(DropdownMenuSubContent, { children: table.getAllColumns().filter(
|
|
2091
|
+
(col) => typeof col.accessorFn !== "undefined" && col.getCanHide()
|
|
2092
|
+
).map((col) => {
|
|
2093
|
+
return /* @__PURE__ */ jsx(
|
|
2094
|
+
DropdownMenuCheckboxItem,
|
|
2095
|
+
{
|
|
2096
|
+
checked: col.getIsVisible(),
|
|
2097
|
+
onSelect: (event) => event.preventDefault(),
|
|
2098
|
+
onCheckedChange: (value) => col.toggleVisibility(!!value),
|
|
2099
|
+
className: "capitalize",
|
|
2100
|
+
children: col.columnDef.meta?.headerTitle || col.id
|
|
2101
|
+
},
|
|
2102
|
+
col.id
|
|
2103
|
+
);
|
|
2104
|
+
}) }) })
|
|
2105
|
+
] })
|
|
2106
|
+
] })
|
|
2107
|
+
] }),
|
|
2108
|
+
props.tableLayout?.columnsPinnable && column.getCanPin() && column.getIsPinned() && headerPin()
|
|
2109
|
+
] });
|
|
2110
|
+
};
|
|
2111
|
+
if (props.tableLayout?.columnsMovable || props.tableLayout?.columnsVisibility && visibility || props.tableLayout?.columnsPinnable && column.getCanPin() || filter) {
|
|
2112
|
+
return headerControls();
|
|
2113
|
+
}
|
|
2114
|
+
if (column.getCanSort() || props.tableLayout?.columnsResizable && column.getCanResize()) {
|
|
2115
|
+
return /* @__PURE__ */ jsx("div", { className: "flex items-center h-full", children: headerButton() });
|
|
2116
|
+
}
|
|
2117
|
+
return headerLabel();
|
|
2118
|
+
}
|
|
2119
|
+
var SelectContext = React.createContext({ indicatorPosition: "left", indicator: null, indicatorVisibility: true });
|
|
2120
|
+
var Select = ({
|
|
2121
|
+
indicatorPosition = "left",
|
|
2122
|
+
indicatorVisibility = true,
|
|
2123
|
+
indicator,
|
|
2124
|
+
...props
|
|
2125
|
+
}) => {
|
|
2126
|
+
return /* @__PURE__ */ jsx(
|
|
2127
|
+
SelectContext.Provider,
|
|
2128
|
+
{
|
|
2129
|
+
value: { indicatorPosition, indicatorVisibility, indicator },
|
|
2130
|
+
children: /* @__PURE__ */ jsx(Select$1.Root, { ...props })
|
|
2131
|
+
}
|
|
2132
|
+
);
|
|
2133
|
+
};
|
|
2134
|
+
function SelectGroup({
|
|
2135
|
+
...props
|
|
2136
|
+
}) {
|
|
2137
|
+
return /* @__PURE__ */ jsx(Select$1.Group, { "data-slot": "select-group", ...props });
|
|
2138
|
+
}
|
|
2139
|
+
function SelectValue({
|
|
2140
|
+
...props
|
|
2141
|
+
}) {
|
|
2142
|
+
return /* @__PURE__ */ jsx(Select$1.Value, { "data-slot": "select-value", ...props });
|
|
2143
|
+
}
|
|
2144
|
+
var selectTriggerVariants = cva(
|
|
2145
|
+
`
|
|
2146
|
+
flex bg-background w-full items-center justify-between outline-none border border-input shadow-xs shadow-black/5 transition-shadow
|
|
2147
|
+
text-foreground data-placeholder:text-muted-foreground focus-visible:border-ring focus-visible:outline-none focus-visible:ring-[3px]
|
|
2148
|
+
focus-visible:ring-ring/30 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1
|
|
2149
|
+
aria-invalid:border-destructive/60 aria-invalid:ring-destructive/10 dark:aria-invalid:border-destructive dark:aria-invalid:ring-destructive/20
|
|
2150
|
+
[[data-invalid=true]_&]:border-destructive/60 [[data-invalid=true]_&]:ring-destructive/10 dark:[[data-invalid=true]_&]:border-destructive dark:[[data-invalid=true]_&]:ring-destructive/20
|
|
2151
|
+
`,
|
|
2152
|
+
{
|
|
2153
|
+
variants: {
|
|
2154
|
+
size: {
|
|
2155
|
+
sm: "h-7 px-2.5 text-xs gap-1 rounded-md",
|
|
2156
|
+
md: "h-8.5 px-3 text-[0.8125rem] leading-(--text-sm--line-height) gap-1 rounded-md",
|
|
2157
|
+
lg: "h-10 px-4 text-sm gap-1.5 rounded-md"
|
|
2158
|
+
}
|
|
2159
|
+
},
|
|
2160
|
+
defaultVariants: {
|
|
2161
|
+
size: "md"
|
|
2162
|
+
}
|
|
2163
|
+
}
|
|
2164
|
+
);
|
|
2165
|
+
function SelectTrigger({
|
|
2166
|
+
className,
|
|
2167
|
+
children,
|
|
2168
|
+
size,
|
|
2169
|
+
...props
|
|
2170
|
+
}) {
|
|
2171
|
+
return /* @__PURE__ */ jsxs(
|
|
2172
|
+
Select$1.Trigger,
|
|
2173
|
+
{
|
|
2174
|
+
"data-slot": "select-trigger",
|
|
2175
|
+
className: cn(selectTriggerVariants({ size }), className),
|
|
2176
|
+
...props,
|
|
2177
|
+
children: [
|
|
2178
|
+
children,
|
|
2179
|
+
/* @__PURE__ */ jsx(Select$1.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 opacity-60 -me-0.5" }) })
|
|
2180
|
+
]
|
|
2181
|
+
}
|
|
2182
|
+
);
|
|
2183
|
+
}
|
|
2184
|
+
function SelectScrollUpButton({
|
|
2185
|
+
className,
|
|
2186
|
+
...props
|
|
2187
|
+
}) {
|
|
2188
|
+
return /* @__PURE__ */ jsx(
|
|
2189
|
+
Select$1.ScrollUpButton,
|
|
2190
|
+
{
|
|
2191
|
+
"data-slot": "select-scroll-up-button",
|
|
2192
|
+
className: cn(
|
|
2193
|
+
"flex cursor-default items-center justify-center py-1",
|
|
2194
|
+
className
|
|
2195
|
+
),
|
|
2196
|
+
...props,
|
|
2197
|
+
children: /* @__PURE__ */ jsx(ChevronUp, { className: "h-4 w-4" })
|
|
2198
|
+
}
|
|
2199
|
+
);
|
|
2200
|
+
}
|
|
2201
|
+
function SelectScrollDownButton({
|
|
2202
|
+
className,
|
|
2203
|
+
...props
|
|
2204
|
+
}) {
|
|
2205
|
+
return /* @__PURE__ */ jsx(
|
|
2206
|
+
Select$1.ScrollDownButton,
|
|
2207
|
+
{
|
|
2208
|
+
"data-slot": "select-scroll-down-button",
|
|
2209
|
+
className: cn(
|
|
2210
|
+
"flex cursor-default items-center justify-center py-1",
|
|
2211
|
+
className
|
|
2212
|
+
),
|
|
2213
|
+
...props,
|
|
2214
|
+
children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" })
|
|
2215
|
+
}
|
|
2216
|
+
);
|
|
2217
|
+
}
|
|
2218
|
+
function SelectContent({
|
|
2219
|
+
className,
|
|
2220
|
+
children,
|
|
2221
|
+
position = "popper",
|
|
2222
|
+
...props
|
|
2223
|
+
}) {
|
|
2224
|
+
return /* @__PURE__ */ jsx(Select$1.Portal, { children: /* @__PURE__ */ jsxs(
|
|
2225
|
+
Select$1.Content,
|
|
2226
|
+
{
|
|
2227
|
+
"data-slot": "select-content",
|
|
2228
|
+
className: cn(
|
|
2229
|
+
"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover shadow-md shadow-black/5 text-secondary-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",
|
|
2230
|
+
position === "popper" && "data-[side=bottom]:translate-y-1.5 data-[side=left]:-translate-x-1.5 data-[side=right]:translate-x-1.5 data-[side=top]:-translate-y-1.5",
|
|
2231
|
+
className
|
|
2232
|
+
),
|
|
2233
|
+
position,
|
|
2234
|
+
...props,
|
|
2235
|
+
children: [
|
|
2236
|
+
/* @__PURE__ */ jsx(SelectScrollUpButton, {}),
|
|
2237
|
+
/* @__PURE__ */ jsx(
|
|
2238
|
+
Select$1.Viewport,
|
|
2239
|
+
{
|
|
2240
|
+
className: cn(
|
|
2241
|
+
"p-1.5",
|
|
2242
|
+
position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
|
|
2243
|
+
),
|
|
2244
|
+
children
|
|
2245
|
+
}
|
|
2246
|
+
),
|
|
2247
|
+
/* @__PURE__ */ jsx(SelectScrollDownButton, {})
|
|
2248
|
+
]
|
|
2249
|
+
}
|
|
2250
|
+
) });
|
|
2251
|
+
}
|
|
2252
|
+
function SelectLabel({
|
|
2253
|
+
className,
|
|
2254
|
+
...props
|
|
2255
|
+
}) {
|
|
2256
|
+
return /* @__PURE__ */ jsx(
|
|
2257
|
+
Select$1.Label,
|
|
2258
|
+
{
|
|
2259
|
+
"data-slot": "select-label",
|
|
2260
|
+
className: cn(
|
|
2261
|
+
"py-1.5 ps-8 pe-2 text-xs text-muted-foreground font-medium",
|
|
2262
|
+
className
|
|
2263
|
+
),
|
|
2264
|
+
...props
|
|
2265
|
+
}
|
|
2266
|
+
);
|
|
2267
|
+
}
|
|
2268
|
+
function SelectItem({
|
|
2269
|
+
className,
|
|
2270
|
+
children,
|
|
2271
|
+
...props
|
|
2272
|
+
}) {
|
|
2273
|
+
const { indicatorPosition, indicatorVisibility, indicator } = React.useContext(SelectContext);
|
|
2274
|
+
return /* @__PURE__ */ jsxs(
|
|
2275
|
+
Select$1.Item,
|
|
2276
|
+
{
|
|
2277
|
+
"data-slot": "select-item",
|
|
2278
|
+
className: cn(
|
|
2279
|
+
"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 text-sm outline-hidden text-foreground hover:bg-accent focus:bg-accent data-disabled:pointer-events-none data-disabled:opacity-50",
|
|
2280
|
+
indicatorPosition === "left" ? "ps-8 pe-2" : "pe-8 ps-2",
|
|
2281
|
+
className
|
|
2282
|
+
),
|
|
2283
|
+
...props,
|
|
2284
|
+
children: [
|
|
2285
|
+
indicatorVisibility && (indicator && isValidElement(indicator) ? indicator : /* @__PURE__ */ jsx(
|
|
2286
|
+
"span",
|
|
2287
|
+
{
|
|
2288
|
+
className: cn(
|
|
2289
|
+
"absolute flex h-3.5 w-3.5 items-center justify-center",
|
|
2290
|
+
indicatorPosition === "left" ? "start-2" : "end-2"
|
|
2291
|
+
),
|
|
2292
|
+
children: /* @__PURE__ */ jsx(Select$1.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 text-primary" }) })
|
|
2293
|
+
}
|
|
2294
|
+
)),
|
|
2295
|
+
/* @__PURE__ */ jsx(Select$1.ItemText, { children })
|
|
2296
|
+
]
|
|
2297
|
+
}
|
|
2298
|
+
);
|
|
2299
|
+
}
|
|
2300
|
+
function SelectIndicator({
|
|
2301
|
+
children,
|
|
2302
|
+
className,
|
|
2303
|
+
...props
|
|
2304
|
+
}) {
|
|
2305
|
+
const { indicatorPosition } = React.useContext(SelectContext);
|
|
2306
|
+
return /* @__PURE__ */ jsx(
|
|
2307
|
+
"span",
|
|
2308
|
+
{
|
|
2309
|
+
"data-slot": "select-indicator",
|
|
2310
|
+
className: cn(
|
|
2311
|
+
"absolute flex top-1/2 -translate-y-1/2 items-center justify-center",
|
|
2312
|
+
indicatorPosition === "left" ? "start-2" : "end-2",
|
|
2313
|
+
className
|
|
2314
|
+
),
|
|
2315
|
+
...props,
|
|
2316
|
+
children: /* @__PURE__ */ jsx(Select$1.ItemIndicator, { children })
|
|
2317
|
+
}
|
|
2318
|
+
);
|
|
2319
|
+
}
|
|
2320
|
+
function SelectSeparator({
|
|
2321
|
+
className,
|
|
2322
|
+
...props
|
|
2323
|
+
}) {
|
|
2324
|
+
return /* @__PURE__ */ jsx(
|
|
2325
|
+
Select$1.Separator,
|
|
2326
|
+
{
|
|
2327
|
+
"data-slot": "select-separator",
|
|
2328
|
+
className: cn("-mx-1.5 my-1.5 h-px bg-border", className),
|
|
2329
|
+
...props
|
|
2330
|
+
}
|
|
2331
|
+
);
|
|
2332
|
+
}
|
|
2333
|
+
function Skeleton({ className, ...props }) {
|
|
2334
|
+
return /* @__PURE__ */ jsx(
|
|
2335
|
+
"div",
|
|
2336
|
+
{
|
|
2337
|
+
"aria-hidden": props["aria-hidden"] ?? true,
|
|
2338
|
+
"data-slot": "skeleton",
|
|
2339
|
+
className: cn(
|
|
2340
|
+
"block animate-pulse rounded-md bg-muted/40 shrink-0",
|
|
2341
|
+
// ensure sensible default size when none provided
|
|
2342
|
+
"h-4 w-full",
|
|
2343
|
+
className
|
|
2344
|
+
),
|
|
2345
|
+
...props
|
|
2346
|
+
}
|
|
2347
|
+
);
|
|
2348
|
+
}
|
|
2349
|
+
function DataGridPagination(props) {
|
|
2350
|
+
const { table, recordCount, isLoading } = useDataGrid();
|
|
2351
|
+
const defaultProps = {
|
|
2352
|
+
sizes: [5, 10, 25, 50, 100],
|
|
2353
|
+
sizesLabel: "Show",
|
|
2354
|
+
sizesDescription: "per page",
|
|
2355
|
+
sizesSkeleton: /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-44" }),
|
|
2356
|
+
moreLimit: 5,
|
|
2357
|
+
more: false,
|
|
2358
|
+
info: "{from} - {to} of {count}",
|
|
2359
|
+
infoSkeleton: /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-60" })
|
|
2360
|
+
};
|
|
2361
|
+
const mergedProps = { ...defaultProps, ...props };
|
|
2362
|
+
const btnBaseClasses = "size-7 p-0 text-sm";
|
|
2363
|
+
const btnArrowClasses = btnBaseClasses + " rtl:transform rtl:rotate-180";
|
|
2364
|
+
const pageIndex = table.getState().pagination.pageIndex;
|
|
2365
|
+
const pageSize = table.getState().pagination.pageSize;
|
|
2366
|
+
const from = pageIndex * pageSize + 1;
|
|
2367
|
+
const to = Math.min((pageIndex + 1) * pageSize, recordCount);
|
|
2368
|
+
const pageCount = table.getPageCount();
|
|
2369
|
+
const paginationInfo = mergedProps?.info ? mergedProps.info.replace("{from}", from.toString()).replace("{to}", to.toString()).replace("{count}", recordCount.toString()) : `${from} - ${to} of ${recordCount}`;
|
|
2370
|
+
const paginationMoreLimit = mergedProps?.moreLimit || 5;
|
|
2371
|
+
const currentGroupStart = Math.floor(pageIndex / paginationMoreLimit) * paginationMoreLimit;
|
|
2372
|
+
const currentGroupEnd = Math.min(
|
|
2373
|
+
currentGroupStart + paginationMoreLimit,
|
|
2374
|
+
pageCount
|
|
2375
|
+
);
|
|
2376
|
+
const renderPageButtons = () => {
|
|
2377
|
+
const buttons = [];
|
|
2378
|
+
for (let i = currentGroupStart; i < currentGroupEnd; i++) {
|
|
2379
|
+
buttons.push(
|
|
2380
|
+
/* @__PURE__ */ jsx(
|
|
2381
|
+
Button,
|
|
2382
|
+
{
|
|
2383
|
+
size: "sm",
|
|
2384
|
+
mode: "icon",
|
|
2385
|
+
variant: "ghost",
|
|
2386
|
+
className: cn(btnBaseClasses, "text-muted-foreground", {
|
|
2387
|
+
"bg-accent text-accent-foreground": pageIndex === i
|
|
2388
|
+
}),
|
|
2389
|
+
onClick: () => {
|
|
2390
|
+
if (pageIndex !== i) {
|
|
2391
|
+
table.setPageIndex(i);
|
|
2392
|
+
}
|
|
2393
|
+
},
|
|
2394
|
+
children: i + 1
|
|
2395
|
+
},
|
|
2396
|
+
i
|
|
2397
|
+
)
|
|
2398
|
+
);
|
|
2399
|
+
}
|
|
2400
|
+
return buttons;
|
|
2401
|
+
};
|
|
2402
|
+
const renderEllipsisPrevButton = () => {
|
|
2403
|
+
if (currentGroupStart > 0) {
|
|
2404
|
+
return /* @__PURE__ */ jsx(
|
|
2405
|
+
Button,
|
|
2406
|
+
{
|
|
2407
|
+
size: "sm",
|
|
2408
|
+
mode: "icon",
|
|
2409
|
+
className: btnBaseClasses,
|
|
2410
|
+
variant: "ghost",
|
|
2411
|
+
onClick: () => table.setPageIndex(currentGroupStart - 1),
|
|
2412
|
+
children: "..."
|
|
2413
|
+
}
|
|
2414
|
+
);
|
|
2415
|
+
}
|
|
2416
|
+
return null;
|
|
2417
|
+
};
|
|
2418
|
+
const renderEllipsisNextButton = () => {
|
|
2419
|
+
if (currentGroupEnd < pageCount) {
|
|
2420
|
+
return /* @__PURE__ */ jsx(
|
|
2421
|
+
Button,
|
|
2422
|
+
{
|
|
2423
|
+
className: btnBaseClasses,
|
|
2424
|
+
variant: "ghost",
|
|
2425
|
+
size: "sm",
|
|
2426
|
+
mode: "icon",
|
|
2427
|
+
onClick: () => table.setPageIndex(currentGroupEnd),
|
|
2428
|
+
children: "..."
|
|
2429
|
+
}
|
|
2430
|
+
);
|
|
2431
|
+
}
|
|
2432
|
+
return null;
|
|
2433
|
+
};
|
|
2434
|
+
return /* @__PURE__ */ jsxs(
|
|
2435
|
+
"div",
|
|
2436
|
+
{
|
|
2437
|
+
"data-slot": "data-grid-pagination",
|
|
2438
|
+
className: cn(
|
|
2439
|
+
"flex flex-wrap flex-col sm:flex-row justify-between items-center gap-2.5 py-2.5 sm:py-0 grow",
|
|
2440
|
+
mergedProps?.className
|
|
2441
|
+
),
|
|
2442
|
+
children: [
|
|
2443
|
+
/* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center space-x-2.5 pb-2.5 sm:pb-0 order-2 sm:order-1", children: isLoading ? mergedProps?.sizesSkeleton : /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
2444
|
+
/* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: "Rows per page" }),
|
|
2445
|
+
/* @__PURE__ */ jsxs(
|
|
2446
|
+
Select,
|
|
2447
|
+
{
|
|
2448
|
+
value: `${pageSize}`,
|
|
2449
|
+
indicatorPosition: "right",
|
|
2450
|
+
onValueChange: (value) => {
|
|
2451
|
+
const newPageSize = Number(value);
|
|
2452
|
+
table.setPageSize(newPageSize);
|
|
2453
|
+
},
|
|
2454
|
+
children: [
|
|
2455
|
+
/* @__PURE__ */ jsx(SelectTrigger, { className: "w-fit", size: "sm", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: `${pageSize}` }) }),
|
|
2456
|
+
/* @__PURE__ */ jsx(SelectContent, { side: "top", className: "min-w-[50px]", children: mergedProps?.sizes?.map((size) => /* @__PURE__ */ jsx(SelectItem, { value: `${size}`, children: size }, size)) })
|
|
2457
|
+
]
|
|
2458
|
+
}
|
|
2459
|
+
)
|
|
2460
|
+
] }) }),
|
|
2461
|
+
/* @__PURE__ */ jsx("div", { className: "flex flex-col sm:flex-row justify-center sm:justify-end items-center gap-2.5 pt-2.5 sm:pt-0 order-1 sm:order-2", children: isLoading ? mergedProps?.infoSkeleton : /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
2462
|
+
/* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground text-nowrap order-2 sm:order-1", children: paginationInfo }),
|
|
2463
|
+
pageCount > 1 && /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-1 order-1 sm:order-2", children: [
|
|
2464
|
+
/* @__PURE__ */ jsxs(
|
|
2465
|
+
Button,
|
|
2466
|
+
{
|
|
2467
|
+
size: "sm",
|
|
2468
|
+
mode: "icon",
|
|
2469
|
+
variant: "ghost",
|
|
2470
|
+
className: btnArrowClasses,
|
|
2471
|
+
onClick: () => table.previousPage(),
|
|
2472
|
+
disabled: !table.getCanPreviousPage(),
|
|
2473
|
+
children: [
|
|
2474
|
+
/* @__PURE__ */ jsx("span", { className: "sr-only", children: "Go to previous page" }),
|
|
2475
|
+
/* @__PURE__ */ jsx(ChevronLeftIcon, { className: "size-4" })
|
|
2476
|
+
]
|
|
2477
|
+
}
|
|
2478
|
+
),
|
|
2479
|
+
renderEllipsisPrevButton(),
|
|
2480
|
+
renderPageButtons(),
|
|
2481
|
+
renderEllipsisNextButton(),
|
|
2482
|
+
/* @__PURE__ */ jsxs(
|
|
2483
|
+
Button,
|
|
2484
|
+
{
|
|
2485
|
+
size: "sm",
|
|
2486
|
+
mode: "icon",
|
|
2487
|
+
variant: "ghost",
|
|
2488
|
+
className: btnArrowClasses,
|
|
2489
|
+
onClick: () => table.nextPage(),
|
|
2490
|
+
disabled: !table.getCanNextPage(),
|
|
2491
|
+
children: [
|
|
2492
|
+
/* @__PURE__ */ jsx("span", { className: "sr-only", children: "Go to next page" }),
|
|
2493
|
+
/* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-4" })
|
|
2494
|
+
]
|
|
2495
|
+
}
|
|
2496
|
+
)
|
|
2497
|
+
] })
|
|
2498
|
+
] }) })
|
|
2499
|
+
]
|
|
2500
|
+
}
|
|
2501
|
+
);
|
|
2502
|
+
}
|
|
2503
|
+
function DataGridColumnVisibility({
|
|
2504
|
+
table,
|
|
2505
|
+
trigger
|
|
2506
|
+
}) {
|
|
2507
|
+
return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
|
|
2508
|
+
/* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: trigger }),
|
|
2509
|
+
/* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", className: "min-w-[150px]", children: [
|
|
2510
|
+
/* @__PURE__ */ jsx(DropdownMenuLabel, { className: "font-medium", children: "Toggle Columns" }),
|
|
2511
|
+
table.getAllColumns().filter(
|
|
2512
|
+
(column) => typeof column.accessorFn !== "undefined" && column.getCanHide()
|
|
2513
|
+
).map((column) => {
|
|
2514
|
+
return /* @__PURE__ */ jsx(
|
|
2515
|
+
DropdownMenuCheckboxItem,
|
|
2516
|
+
{
|
|
2517
|
+
className: "capitalize",
|
|
2518
|
+
checked: column.getIsVisible(),
|
|
2519
|
+
onSelect: (event) => event.preventDefault(),
|
|
2520
|
+
onCheckedChange: (value) => column.toggleVisibility(!!value),
|
|
2521
|
+
children: column.columnDef.meta?.headerTitle || column.id
|
|
2522
|
+
},
|
|
2523
|
+
column.id
|
|
2524
|
+
);
|
|
2525
|
+
})
|
|
2526
|
+
] })
|
|
2527
|
+
] });
|
|
2528
|
+
}
|
|
2529
|
+
var badgeVariants = cva(
|
|
2530
|
+
"inline-flex items-center justify-center border border-transparent font-medium focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 [&_svg]:-ms-px [&_svg]:shrink-0",
|
|
2531
|
+
{
|
|
2532
|
+
variants: {
|
|
2533
|
+
variant: {
|
|
2534
|
+
primary: "bg-primary text-primary-foreground",
|
|
2535
|
+
secondary: "bg-secondary text-secondary-foreground",
|
|
2536
|
+
success: "bg-[var(--color-success-accent,var(--color-green-500))] text-[var(--color-success-foreground,var(--color-white))]",
|
|
2537
|
+
warning: "bg-[var(--color-warning-accent,var(--color-yellow-500))] text-[var(--color-warning-foreground,var(--color-white))]",
|
|
2538
|
+
info: "bg-[var(--color-info-accent,var(--color-violet-500))] text-[var(--color-info-foreground,var(--color-white))]",
|
|
2539
|
+
outline: "bg-transparent border border-border text-secondary-foreground",
|
|
2540
|
+
destructive: "bg-destructive text-destructive-foreground"
|
|
2541
|
+
},
|
|
2542
|
+
appearance: {
|
|
2543
|
+
default: "",
|
|
2544
|
+
light: "",
|
|
2545
|
+
outline: "",
|
|
2546
|
+
ghost: "border-transparent bg-transparent"
|
|
2547
|
+
},
|
|
2548
|
+
disabled: {
|
|
2549
|
+
true: "opacity-50 pointer-events-none"
|
|
2550
|
+
},
|
|
2551
|
+
size: {
|
|
2552
|
+
lg: "rounded-md px-[0.5rem] h-7 min-w-7 gap-1.5 text-xs [&_svg]:size-3.5",
|
|
2553
|
+
md: "rounded-md px-[0.45rem] h-6 min-w-6 gap-1.5 text-xs [&_svg]:size-3.5 ",
|
|
2554
|
+
sm: "rounded-sm px-[0.325rem] h-5 min-w-5 gap-1 text-[0.6875rem] leading-[0.75rem] [&_svg]:size-3",
|
|
2555
|
+
xs: "rounded-sm px-[0.25rem] h-4 min-w-4 gap-1 text-[0.625rem] leading-[0.5rem] [&_svg]:size-3"
|
|
2556
|
+
},
|
|
2557
|
+
shape: {
|
|
2558
|
+
default: "",
|
|
2559
|
+
circle: "rounded-full"
|
|
2560
|
+
}
|
|
2561
|
+
},
|
|
2562
|
+
compoundVariants: [
|
|
2563
|
+
/* Light */
|
|
2564
|
+
{
|
|
2565
|
+
variant: "primary",
|
|
2566
|
+
appearance: "light",
|
|
2567
|
+
className: "text-[var(--color-primary-accent,var(--color-blue-700))] bg-[var(--color-primary-soft,var(--color-blue-50))] dark:bg-[var(--color-primary-soft,var(--color-blue-950))] dark:text-[var(--color-primary-soft,var(--color-blue-600))]"
|
|
531
2568
|
},
|
|
532
2569
|
{
|
|
533
|
-
variant: "
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
className: "font-medium text-inherit [&_svg:not([role=img]):not([class*=text-])]:opacity-60 underline underline-offset-4 decoration-dashed decoration-1"
|
|
2570
|
+
variant: "secondary",
|
|
2571
|
+
appearance: "light",
|
|
2572
|
+
className: "bg-secondary dark:bg-secondary/50 text-secondary-foreground"
|
|
537
2573
|
},
|
|
538
2574
|
{
|
|
539
|
-
variant: "
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
className: "font-medium text-foreground [&_svg:not([role=img]):not([class*=text-])]:opacity-60 hover:underline hover:underline-offset-4 hover:decoration-solid"
|
|
2575
|
+
variant: "success",
|
|
2576
|
+
appearance: "light",
|
|
2577
|
+
className: "text-[var(--color-success-accent,var(--color-green-800))] bg-[var(--color-success-soft,var(--color-green-100))] dark:bg-[var(--color-success-soft,var(--color-green-950))] dark:text-[var(--color-success-soft,var(--color-green-600))]"
|
|
543
2578
|
},
|
|
544
2579
|
{
|
|
545
|
-
variant: "
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
className: "font-medium text-foreground [&_svg:not([role=img]):not([class*=text-])]:opacity-60 hover:underline hover:underline-offset-4 hover:decoration-dashed decoration-1"
|
|
2580
|
+
variant: "warning",
|
|
2581
|
+
appearance: "light",
|
|
2582
|
+
className: "text-[var(--color-warning-accent,var(--color-yellow-700))] bg-[var(--color-warning-soft,var(--color-yellow-100))] dark:bg-[var(--color-warning-soft,var(--color-yellow-950))] dark:text-[var(--color-warning-soft,var(--color-yellow-600))]"
|
|
549
2583
|
},
|
|
550
2584
|
{
|
|
551
|
-
variant: "
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
className: "font-medium text-foreground [&_svg:not([role=img]):not([class*=text-])]:opacity-60 underline underline-offset-4 decoration-solid"
|
|
2585
|
+
variant: "info",
|
|
2586
|
+
appearance: "light",
|
|
2587
|
+
className: "text-[var(--color-info-accent,var(--color-violet-700))] bg-[var(--color-info-soft,var(--color-violet-100))] dark:bg-[var(--color-info-soft,var(--color-violet-950))] dark:text-[var(--color-info-soft,var(--color-violet-400))]"
|
|
555
2588
|
},
|
|
556
2589
|
{
|
|
557
|
-
variant: "
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
className: "font-medium text-foreground [&_svg:not([role=img]):not([class*=text-])]:opacity-60 underline underline-offset-4 decoration-dashed decoration-1"
|
|
2590
|
+
variant: "destructive",
|
|
2591
|
+
appearance: "light",
|
|
2592
|
+
className: "text-[var(--color-destructive-accent,var(--color-red-700))] bg-[var(--color-destructive-soft,var(--color-red-50))] dark:bg-[var(--color-destructive-soft,var(--color-red-950))] dark:text-[var(--color-destructive-soft,var(--color-red-600))]"
|
|
561
2593
|
},
|
|
562
|
-
|
|
2594
|
+
/* Outline */
|
|
563
2595
|
{
|
|
564
2596
|
variant: "primary",
|
|
565
|
-
appearance: "
|
|
566
|
-
className: "
|
|
567
|
-
},
|
|
568
|
-
{
|
|
569
|
-
variant: "destructive",
|
|
570
|
-
appearance: "ghost",
|
|
571
|
-
className: "bg-transparent text-destructive/90 hover:bg-destructive/5 data-[state=open]:bg-destructive/5"
|
|
2597
|
+
appearance: "outline",
|
|
2598
|
+
className: "text-[var(--color-primary-accent,var(--color-blue-700))] border-[var(--color-primary-soft,var(--color-blue-100))] bg-[var(--color-primary-soft,var(--color-blue-50))] dark:bg-[var(--color-primary-soft,var(--color-blue-950))] dark:border-[var(--color-primary-soft,var(--color-blue-900))] dark:text-[var(--color-primary-soft,var(--color-blue-600))]"
|
|
572
2599
|
},
|
|
573
2600
|
{
|
|
574
2601
|
variant: "success",
|
|
575
|
-
appearance: "
|
|
576
|
-
className: "
|
|
2602
|
+
appearance: "outline",
|
|
2603
|
+
className: "text-[var(--color-success-accent,var(--color-green-700))] border-[var(--color-success-soft,var(--color-green-200))] bg-[var(--color-success-soft,var(--color-green-50))] dark:bg-[var(--color-success-soft,var(--color-green-950))] dark:border-[var(--color-success-soft,var(--color-green-900))] dark:text-[var(--color-success-soft,var(--color-green-600))]"
|
|
577
2604
|
},
|
|
578
2605
|
{
|
|
579
|
-
variant: "
|
|
580
|
-
|
|
581
|
-
className: "text-
|
|
2606
|
+
variant: "warning",
|
|
2607
|
+
appearance: "outline",
|
|
2608
|
+
className: "text-[var(--color-warning-accent,var(--color-yellow-700))] border-[var(--color-warning-soft,var(--color-yellow-200))] bg-[var(--color-warning-soft,var(--color-yellow-50))] dark:bg-[var(--color-warning-soft,var(--color-yellow-950))] dark:border-[var(--color-warning-soft,var(--color-yellow-900))] dark:text-[var(--color-warning-soft,var(--color-yellow-600))]"
|
|
582
2609
|
},
|
|
583
|
-
// Size
|
|
584
2610
|
{
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
className: "
|
|
2611
|
+
variant: "info",
|
|
2612
|
+
appearance: "outline",
|
|
2613
|
+
className: "text-[var(--color-info-accent,var(--color-violet-700))] border-[var(--color-info-soft,var(--color-violet-100))] bg-[var(--color-info-soft,var(--color-violet-50))] dark:bg-[var(--color-info-soft,var(--color-violet-950))] dark:border-[var(--color-info-soft,var(--color-violet-900))] dark:text-[var(--color-info-soft,var(--color-violet-400))]"
|
|
588
2614
|
},
|
|
589
2615
|
{
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
className: "
|
|
2616
|
+
variant: "destructive",
|
|
2617
|
+
appearance: "outline",
|
|
2618
|
+
className: "text-[var(--color-destructive-accent,var(--color-red-700))] border-[var(--color-destructive-soft,var(--color-red-100))] bg-[var(--color-destructive-soft,var(--color-red-50))] dark:bg-[var(--color-destructive-soft,var(--color-red-950))] dark:border-[var(--color-destructive-soft,var(--color-red-900))] dark:text-[var(--color-destructive-soft,var(--color-red-600))]"
|
|
593
2619
|
},
|
|
2620
|
+
/* Ghost */
|
|
594
2621
|
{
|
|
595
|
-
|
|
596
|
-
|
|
2622
|
+
variant: "primary",
|
|
2623
|
+
appearance: "ghost",
|
|
2624
|
+
className: "text-primary"
|
|
597
2625
|
},
|
|
598
2626
|
{
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
className: "
|
|
2627
|
+
variant: "secondary",
|
|
2628
|
+
appearance: "ghost",
|
|
2629
|
+
className: "text-secondary-foreground"
|
|
602
2630
|
},
|
|
603
|
-
// Input mode
|
|
604
2631
|
{
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
className: "font-normal text-muted-foreground"
|
|
2632
|
+
variant: "success",
|
|
2633
|
+
appearance: "ghost",
|
|
2634
|
+
className: "text-[var(--color-success-accent,var(--color-green-500))]"
|
|
609
2635
|
},
|
|
610
2636
|
{
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
className: "gap-1.25"
|
|
2637
|
+
variant: "warning",
|
|
2638
|
+
appearance: "ghost",
|
|
2639
|
+
className: "text-[var(--color-warning-accent,var(--color-yellow-500))]"
|
|
615
2640
|
},
|
|
616
2641
|
{
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
className: "gap-1.5"
|
|
2642
|
+
variant: "info",
|
|
2643
|
+
appearance: "ghost",
|
|
2644
|
+
className: "text-[var(--color-info-accent,var(--color-violet-500))]"
|
|
621
2645
|
},
|
|
622
2646
|
{
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
}
|
|
2647
|
+
variant: "destructive",
|
|
2648
|
+
appearance: "ghost",
|
|
2649
|
+
className: "text-destructive"
|
|
2650
|
+
},
|
|
2651
|
+
{ size: "lg", appearance: "ghost", className: "px-0" },
|
|
2652
|
+
{ size: "md", appearance: "ghost", className: "px-0" },
|
|
2653
|
+
{ size: "sm", appearance: "ghost", className: "px-0" },
|
|
2654
|
+
{ size: "xs", appearance: "ghost", className: "px-0" }
|
|
628
2655
|
],
|
|
629
2656
|
defaultVariants: {
|
|
630
2657
|
variant: "primary",
|
|
631
|
-
|
|
632
|
-
size: "md"
|
|
633
|
-
shape: "default",
|
|
634
|
-
appearance: "default"
|
|
2658
|
+
appearance: "default",
|
|
2659
|
+
size: "md"
|
|
635
2660
|
}
|
|
636
2661
|
}
|
|
637
2662
|
);
|
|
638
|
-
|
|
2663
|
+
var badgeButtonVariants = cva(
|
|
2664
|
+
"cursor-pointer transition-all inline-flex items-center justify-center leading-none size-3.5 [&>svg]:opacity-100! [&>svg]:size-3.5! p-0 rounded-md -me-0.5 opacity-60 hover:opacity-100",
|
|
2665
|
+
{
|
|
2666
|
+
variants: {
|
|
2667
|
+
variant: {
|
|
2668
|
+
default: ""
|
|
2669
|
+
}
|
|
2670
|
+
},
|
|
2671
|
+
defaultVariants: {
|
|
2672
|
+
variant: "default"
|
|
2673
|
+
}
|
|
2674
|
+
}
|
|
2675
|
+
);
|
|
2676
|
+
function Badge({
|
|
639
2677
|
className,
|
|
640
|
-
selected,
|
|
641
2678
|
variant,
|
|
642
|
-
shape,
|
|
643
|
-
appearance,
|
|
644
|
-
mode,
|
|
645
2679
|
size,
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
underline,
|
|
2680
|
+
appearance,
|
|
2681
|
+
shape,
|
|
649
2682
|
asChild = false,
|
|
650
|
-
|
|
2683
|
+
disabled,
|
|
651
2684
|
...props
|
|
652
2685
|
}) {
|
|
653
|
-
const Comp = asChild ?
|
|
2686
|
+
const Comp = asChild ? SlotPrimitive2.Slot : "span";
|
|
654
2687
|
return /* @__PURE__ */ jsx(
|
|
655
2688
|
Comp,
|
|
656
2689
|
{
|
|
657
|
-
"data-slot": "
|
|
2690
|
+
"data-slot": "badge",
|
|
658
2691
|
className: cn(
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
size,
|
|
662
|
-
shape,
|
|
663
|
-
appearance,
|
|
664
|
-
mode,
|
|
665
|
-
autoHeight,
|
|
666
|
-
placeholder,
|
|
667
|
-
underlined,
|
|
668
|
-
underline,
|
|
669
|
-
className
|
|
670
|
-
}),
|
|
671
|
-
asChild && props.disabled && "pointer-events-none opacity-50"
|
|
2692
|
+
badgeVariants({ variant, size, appearance, shape, disabled }),
|
|
2693
|
+
className
|
|
672
2694
|
),
|
|
673
|
-
...selected && { "data-state": "open" },
|
|
674
2695
|
...props
|
|
675
2696
|
}
|
|
676
2697
|
);
|
|
677
2698
|
}
|
|
678
|
-
function
|
|
679
|
-
icon: Icon = ChevronDown,
|
|
2699
|
+
function BadgeButton({
|
|
680
2700
|
className,
|
|
2701
|
+
variant,
|
|
2702
|
+
asChild = false,
|
|
681
2703
|
...props
|
|
682
2704
|
}) {
|
|
2705
|
+
const Comp = asChild ? SlotPrimitive2.Slot : "span";
|
|
683
2706
|
return /* @__PURE__ */ jsx(
|
|
684
|
-
|
|
2707
|
+
Comp,
|
|
685
2708
|
{
|
|
686
|
-
"data-slot": "button
|
|
687
|
-
className: cn(
|
|
2709
|
+
"data-slot": "badge-button",
|
|
2710
|
+
className: cn(badgeButtonVariants({ variant, className })),
|
|
2711
|
+
role: "button",
|
|
2712
|
+
...props
|
|
2713
|
+
}
|
|
2714
|
+
);
|
|
2715
|
+
}
|
|
2716
|
+
function BadgeDot({ className, ...props }) {
|
|
2717
|
+
return /* @__PURE__ */ jsx(
|
|
2718
|
+
"span",
|
|
2719
|
+
{
|
|
2720
|
+
"data-slot": "badge-dot",
|
|
2721
|
+
className: cn(
|
|
2722
|
+
"size-1.5 rounded-full bg-[currentColor] opacity-75",
|
|
2723
|
+
className
|
|
2724
|
+
),
|
|
688
2725
|
...props
|
|
689
2726
|
}
|
|
690
2727
|
);
|
|
@@ -868,63 +2905,18 @@ function CardTitle({
|
|
|
868
2905
|
),
|
|
869
2906
|
...props
|
|
870
2907
|
}
|
|
871
|
-
);
|
|
872
|
-
}
|
|
873
|
-
function CardDescription({
|
|
874
|
-
className,
|
|
875
|
-
...props
|
|
876
|
-
}) {
|
|
877
|
-
return /* @__PURE__ */ jsx(
|
|
878
|
-
"div",
|
|
879
|
-
{
|
|
880
|
-
"data-slot": "card-description",
|
|
881
|
-
className: cn("text-sm text-muted-foreground", className),
|
|
882
|
-
...props
|
|
883
|
-
}
|
|
884
|
-
);
|
|
885
|
-
}
|
|
886
|
-
var checkboxVariants = cva(
|
|
887
|
-
`
|
|
888
|
-
group peer bg-background shrink-0 rounded-md border border-input ring-offset-background focus-visible:outline-none
|
|
889
|
-
focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50
|
|
890
|
-
aria-invalid:border-destructive/60 aria-invalid:ring-destructive/10 dark:aria-invalid:border-destructive dark:aria-invalid:ring-destructive/20
|
|
891
|
-
[[data-invalid=true]_&]:border-destructive/60 [[data-invalid=true]_&]:ring-destructive/10 dark:[[data-invalid=true]_&]:border-destructive dark:[[data-invalid=true]_&]:ring-destructive/20,
|
|
892
|
-
data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=checked]:text-primary-foreground data-[state=indeterminate]:bg-primary data-[state=indeterminate]:border-primary data-[state=indeterminate]:text-primary-foreground
|
|
893
|
-
`,
|
|
894
|
-
{
|
|
895
|
-
variants: {
|
|
896
|
-
size: {
|
|
897
|
-
sm: "size-4.5 [&_svg]:size-3",
|
|
898
|
-
md: "size-5 [&_svg]:size-3.5",
|
|
899
|
-
lg: "size-5.5 [&_svg]:size-4"
|
|
900
|
-
}
|
|
901
|
-
},
|
|
902
|
-
defaultVariants: {
|
|
903
|
-
size: "md"
|
|
904
|
-
}
|
|
905
|
-
}
|
|
906
|
-
);
|
|
907
|
-
function Checkbox({
|
|
908
|
-
className,
|
|
909
|
-
size,
|
|
910
|
-
...props
|
|
911
|
-
}) {
|
|
912
|
-
return /* @__PURE__ */ jsx(
|
|
913
|
-
CheckboxPrimitive.Root,
|
|
914
|
-
{
|
|
915
|
-
"data-slot": "checkbox",
|
|
916
|
-
className: cn(checkboxVariants({ size }), className),
|
|
917
|
-
...props,
|
|
918
|
-
children: /* @__PURE__ */ jsxs(
|
|
919
|
-
CheckboxPrimitive.Indicator,
|
|
920
|
-
{
|
|
921
|
-
className: cn("flex items-center justify-center text-current"),
|
|
922
|
-
children: [
|
|
923
|
-
/* @__PURE__ */ jsx(Check, { className: "group-data-[state=indeterminate]:hidden" }),
|
|
924
|
-
/* @__PURE__ */ jsx(Minus, { className: "hidden group-data-[state=indeterminate]:block" })
|
|
925
|
-
]
|
|
926
|
-
}
|
|
927
|
-
)
|
|
2908
|
+
);
|
|
2909
|
+
}
|
|
2910
|
+
function CardDescription({
|
|
2911
|
+
className,
|
|
2912
|
+
...props
|
|
2913
|
+
}) {
|
|
2914
|
+
return /* @__PURE__ */ jsx(
|
|
2915
|
+
"div",
|
|
2916
|
+
{
|
|
2917
|
+
"data-slot": "card-description",
|
|
2918
|
+
className: cn("text-sm text-muted-foreground", className),
|
|
2919
|
+
...props
|
|
928
2920
|
}
|
|
929
2921
|
);
|
|
930
2922
|
}
|
|
@@ -1276,578 +3268,413 @@ var inputWrapperVariants = cva(
|
|
|
1276
3268
|
variants: {
|
|
1277
3269
|
variant: {
|
|
1278
3270
|
sm: "gap-1.25 [&_svg:not([class*=size-])]:size-3.5",
|
|
1279
|
-
md: "gap-1.5 [&_svg:not([class*=size-])]:size-4",
|
|
1280
|
-
lg: "gap-1.5 [&_svg:not([class*=size-])]:size-4"
|
|
1281
|
-
}
|
|
1282
|
-
},
|
|
1283
|
-
defaultVariants: {
|
|
1284
|
-
variant: "md"
|
|
1285
|
-
}
|
|
1286
|
-
}
|
|
1287
|
-
);
|
|
1288
|
-
function Input({
|
|
1289
|
-
className,
|
|
1290
|
-
type,
|
|
1291
|
-
variant,
|
|
1292
|
-
...props
|
|
1293
|
-
}) {
|
|
1294
|
-
return /* @__PURE__ */ jsx(
|
|
1295
|
-
"input",
|
|
1296
|
-
{
|
|
1297
|
-
"data-slot": "input",
|
|
1298
|
-
type,
|
|
1299
|
-
className: cn(inputVariants({ variant }), className),
|
|
1300
|
-
...props
|
|
1301
|
-
}
|
|
1302
|
-
);
|
|
1303
|
-
}
|
|
1304
|
-
function InputAddon({
|
|
1305
|
-
className,
|
|
1306
|
-
variant,
|
|
1307
|
-
mode,
|
|
1308
|
-
...props
|
|
1309
|
-
}) {
|
|
1310
|
-
return /* @__PURE__ */ jsx(
|
|
1311
|
-
"div",
|
|
1312
|
-
{
|
|
1313
|
-
"data-slot": "input-addon",
|
|
1314
|
-
className: cn(inputAddonVariants({ variant, mode }), className),
|
|
1315
|
-
...props
|
|
1316
|
-
}
|
|
1317
|
-
);
|
|
1318
|
-
}
|
|
1319
|
-
function InputGroup({
|
|
1320
|
-
className,
|
|
1321
|
-
...props
|
|
1322
|
-
}) {
|
|
1323
|
-
return /* @__PURE__ */ jsx(
|
|
1324
|
-
"div",
|
|
1325
|
-
{
|
|
1326
|
-
"data-slot": "input-group",
|
|
1327
|
-
className: cn(inputGroupVariants(), className),
|
|
1328
|
-
...props
|
|
1329
|
-
}
|
|
1330
|
-
);
|
|
1331
|
-
}
|
|
1332
|
-
function InputWrapper({
|
|
1333
|
-
className,
|
|
1334
|
-
variant,
|
|
1335
|
-
...props
|
|
1336
|
-
}) {
|
|
1337
|
-
return /* @__PURE__ */ jsx(
|
|
1338
|
-
"div",
|
|
1339
|
-
{
|
|
1340
|
-
"data-slot": "input-wrapper",
|
|
1341
|
-
className: cn(
|
|
1342
|
-
inputVariants({ variant }),
|
|
1343
|
-
inputWrapperVariants({ variant }),
|
|
1344
|
-
className
|
|
1345
|
-
),
|
|
1346
|
-
...props
|
|
1347
|
-
}
|
|
1348
|
-
);
|
|
1349
|
-
}
|
|
1350
|
-
function Skeleton({ className, ...props }) {
|
|
1351
|
-
return /* @__PURE__ */ jsx(
|
|
1352
|
-
"div",
|
|
1353
|
-
{
|
|
1354
|
-
"aria-hidden": props["aria-hidden"] ?? true,
|
|
1355
|
-
"data-slot": "skeleton",
|
|
1356
|
-
className: cn(
|
|
1357
|
-
"block animate-pulse rounded-md bg-muted/40 shrink-0",
|
|
1358
|
-
// ensure sensible default size when none provided
|
|
1359
|
-
"h-4 w-full",
|
|
1360
|
-
className
|
|
1361
|
-
),
|
|
1362
|
-
...props
|
|
1363
|
-
}
|
|
1364
|
-
);
|
|
1365
|
-
}
|
|
1366
|
-
function DropdownMenu({
|
|
1367
|
-
...props
|
|
1368
|
-
}) {
|
|
1369
|
-
return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
|
|
1370
|
-
}
|
|
1371
|
-
function DropdownMenuPortal({
|
|
1372
|
-
...props
|
|
1373
|
-
}) {
|
|
1374
|
-
return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { "data-slot": "dropdown-menu-portal", ...props });
|
|
1375
|
-
}
|
|
1376
|
-
function DropdownMenuTrigger({
|
|
1377
|
-
...props
|
|
1378
|
-
}) {
|
|
1379
|
-
return /* @__PURE__ */ jsx(
|
|
1380
|
-
DropdownMenuPrimitive.Trigger,
|
|
1381
|
-
{
|
|
1382
|
-
className: "select-none",
|
|
1383
|
-
"data-slot": "dropdown-menu-trigger",
|
|
1384
|
-
...props
|
|
1385
|
-
}
|
|
1386
|
-
);
|
|
1387
|
-
}
|
|
1388
|
-
function DropdownMenuSubTrigger({
|
|
1389
|
-
className,
|
|
1390
|
-
inset,
|
|
1391
|
-
children,
|
|
1392
|
-
...props
|
|
1393
|
-
}) {
|
|
1394
|
-
return /* @__PURE__ */ jsxs(
|
|
1395
|
-
DropdownMenuPrimitive.SubTrigger,
|
|
1396
|
-
{
|
|
1397
|
-
"data-slot": "dropdown-menu-sub-trigger",
|
|
1398
|
-
className: cn(
|
|
1399
|
-
"flex cursor-default gap-2 select-none items-center rounded-md px-2 py-1.5 text-sm outline-hidden",
|
|
1400
|
-
"focus:bg-accent focus:text-foreground",
|
|
1401
|
-
"data-[state=open]:bg-accent data-[state=open]:text-foreground",
|
|
1402
|
-
"data-[here=true]:bg-accent data-[here=true]:text-foreground",
|
|
1403
|
-
"[&>svg]:pointer-events-none [&_svg:not([role=img]):not([class*=text-])]:opacity-60 [&>svg]:size-4 [&>svg]:shrink-0",
|
|
1404
|
-
inset && "ps-8",
|
|
1405
|
-
className
|
|
1406
|
-
),
|
|
1407
|
-
...props,
|
|
1408
|
-
children: [
|
|
1409
|
-
children,
|
|
1410
|
-
/* @__PURE__ */ jsx(
|
|
1411
|
-
ChevronRight,
|
|
1412
|
-
{
|
|
1413
|
-
"data-slot": "dropdown-menu-sub-trigger-indicator",
|
|
1414
|
-
className: "ms-auto size-3.5! rtl:rotate-180"
|
|
1415
|
-
}
|
|
1416
|
-
)
|
|
1417
|
-
]
|
|
1418
|
-
}
|
|
1419
|
-
);
|
|
1420
|
-
}
|
|
1421
|
-
function DropdownMenuSubContent({
|
|
1422
|
-
className,
|
|
1423
|
-
...props
|
|
1424
|
-
}) {
|
|
1425
|
-
return /* @__PURE__ */ jsx(
|
|
1426
|
-
DropdownMenuPrimitive.SubContent,
|
|
1427
|
-
{
|
|
1428
|
-
"data-slot": "dropdown-menu-sub-content",
|
|
1429
|
-
className: cn(
|
|
1430
|
-
"space-y-0.5 z-50 min-w-32 overflow-hidden shadow-md shadow-black/5 rounded-md border border-border bg-popover text-popover-foreground p-2 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",
|
|
1431
|
-
className
|
|
1432
|
-
),
|
|
1433
|
-
...props
|
|
1434
|
-
}
|
|
1435
|
-
);
|
|
1436
|
-
}
|
|
1437
|
-
function DropdownMenuContent({
|
|
1438
|
-
className,
|
|
1439
|
-
sideOffset = 4,
|
|
1440
|
-
...props
|
|
1441
|
-
}) {
|
|
1442
|
-
return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
|
|
1443
|
-
DropdownMenuPrimitive.Content,
|
|
1444
|
-
{
|
|
1445
|
-
"data-slot": "dropdown-menu-content",
|
|
1446
|
-
sideOffset,
|
|
1447
|
-
className: cn(
|
|
1448
|
-
"space-y-0.5 z-50 min-w-32 overflow-hidden rounded-md border border-border bg-popover p-2 text-popover-foreground shadow-md shadow-black/5 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",
|
|
1449
|
-
className
|
|
1450
|
-
),
|
|
1451
|
-
...props
|
|
1452
|
-
}
|
|
1453
|
-
) });
|
|
1454
|
-
}
|
|
1455
|
-
function DropdownMenuGroup({
|
|
1456
|
-
...props
|
|
1457
|
-
}) {
|
|
1458
|
-
return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Group, { "data-slot": "dropdown-menu-group", ...props });
|
|
1459
|
-
}
|
|
1460
|
-
function DropdownMenuItem({
|
|
1461
|
-
className,
|
|
1462
|
-
inset,
|
|
1463
|
-
variant,
|
|
1464
|
-
...props
|
|
1465
|
-
}) {
|
|
1466
|
-
return /* @__PURE__ */ jsx(
|
|
1467
|
-
DropdownMenuPrimitive.Item,
|
|
1468
|
-
{
|
|
1469
|
-
"data-slot": "dropdown-menu-item",
|
|
1470
|
-
className: cn(
|
|
1471
|
-
"text-foreground relative flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-hidden transition-colors data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([role=img]):not([class*=text-])]:opacity-60 [&_svg:not([class*=size-])]:size-4 [&_svg]:shrink-0",
|
|
1472
|
-
"focus:bg-accent focus:text-foreground",
|
|
1473
|
-
"data-[active=true]:bg-accent data-[active=true]:text-accent-foreground",
|
|
1474
|
-
inset && "ps-8",
|
|
1475
|
-
variant === "destructive" && "text-destructive hover:text-destructive focus:text-destructive hover:bg-destructive/5 focus:bg-destructive/5 data-[active=true]:bg-destructive/5",
|
|
1476
|
-
className
|
|
1477
|
-
),
|
|
1478
|
-
...props
|
|
1479
|
-
}
|
|
1480
|
-
);
|
|
1481
|
-
}
|
|
1482
|
-
function DropdownMenuCheckboxItem({
|
|
1483
|
-
className,
|
|
1484
|
-
children,
|
|
1485
|
-
checked,
|
|
1486
|
-
...props
|
|
1487
|
-
}) {
|
|
1488
|
-
return /* @__PURE__ */ jsxs(
|
|
1489
|
-
DropdownMenuPrimitive.CheckboxItem,
|
|
1490
|
-
{
|
|
1491
|
-
"data-slot": "dropdown-menu-checkbox-item",
|
|
1492
|
-
className: cn(
|
|
1493
|
-
"relative flex cursor-default select-none items-center rounded-md py-1.5 ps-8 pe-2 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
|
|
1494
|
-
className
|
|
1495
|
-
),
|
|
1496
|
-
checked,
|
|
1497
|
-
...props,
|
|
1498
|
-
children: [
|
|
1499
|
-
/* @__PURE__ */ jsx("span", { className: "absolute start-2 flex h-3.5 w-3.5 items-center text-muted-foreground justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 text-primary" }) }) }),
|
|
1500
|
-
children
|
|
1501
|
-
]
|
|
1502
|
-
}
|
|
1503
|
-
);
|
|
1504
|
-
}
|
|
1505
|
-
function DropdownMenuRadioItem({
|
|
1506
|
-
className,
|
|
1507
|
-
children,
|
|
1508
|
-
...props
|
|
1509
|
-
}) {
|
|
1510
|
-
return /* @__PURE__ */ jsxs(
|
|
1511
|
-
DropdownMenuPrimitive.RadioItem,
|
|
1512
|
-
{
|
|
1513
|
-
"data-slot": "dropdown-menu-radio-item",
|
|
1514
|
-
className: cn(
|
|
1515
|
-
"relative flex cursor-default select-none items-center rounded-md py-1.5 ps-6 pe-2 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
|
|
1516
|
-
className
|
|
1517
|
-
),
|
|
1518
|
-
...props,
|
|
1519
|
-
children: [
|
|
1520
|
-
/* @__PURE__ */ jsx("span", { className: "absolute start-1.5 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Circle, { className: "h-1.5 w-1.5 fill-primary stroke-primary" }) }) }),
|
|
1521
|
-
children
|
|
1522
|
-
]
|
|
3271
|
+
md: "gap-1.5 [&_svg:not([class*=size-])]:size-4",
|
|
3272
|
+
lg: "gap-1.5 [&_svg:not([class*=size-])]:size-4"
|
|
3273
|
+
}
|
|
3274
|
+
},
|
|
3275
|
+
defaultVariants: {
|
|
3276
|
+
variant: "md"
|
|
1523
3277
|
}
|
|
1524
|
-
|
|
1525
|
-
|
|
1526
|
-
function
|
|
3278
|
+
}
|
|
3279
|
+
);
|
|
3280
|
+
function Input({
|
|
1527
3281
|
className,
|
|
1528
|
-
|
|
3282
|
+
type,
|
|
3283
|
+
variant,
|
|
1529
3284
|
...props
|
|
1530
3285
|
}) {
|
|
1531
3286
|
return /* @__PURE__ */ jsx(
|
|
1532
|
-
|
|
3287
|
+
"input",
|
|
1533
3288
|
{
|
|
1534
|
-
"data-slot": "
|
|
1535
|
-
|
|
1536
|
-
|
|
1537
|
-
inset && "ps-8",
|
|
1538
|
-
className
|
|
1539
|
-
),
|
|
3289
|
+
"data-slot": "input",
|
|
3290
|
+
type,
|
|
3291
|
+
className: cn(inputVariants({ variant }), className),
|
|
1540
3292
|
...props
|
|
1541
3293
|
}
|
|
1542
3294
|
);
|
|
1543
3295
|
}
|
|
1544
|
-
function
|
|
3296
|
+
function InputAddon({
|
|
3297
|
+
className,
|
|
3298
|
+
variant,
|
|
3299
|
+
mode,
|
|
1545
3300
|
...props
|
|
1546
3301
|
}) {
|
|
1547
3302
|
return /* @__PURE__ */ jsx(
|
|
1548
|
-
|
|
3303
|
+
"div",
|
|
1549
3304
|
{
|
|
1550
|
-
"data-slot": "
|
|
3305
|
+
"data-slot": "input-addon",
|
|
3306
|
+
className: cn(inputAddonVariants({ variant, mode }), className),
|
|
1551
3307
|
...props
|
|
1552
3308
|
}
|
|
1553
3309
|
);
|
|
1554
3310
|
}
|
|
1555
|
-
function
|
|
3311
|
+
function InputGroup({
|
|
1556
3312
|
className,
|
|
1557
3313
|
...props
|
|
1558
3314
|
}) {
|
|
1559
3315
|
return /* @__PURE__ */ jsx(
|
|
1560
|
-
|
|
3316
|
+
"div",
|
|
1561
3317
|
{
|
|
1562
|
-
"data-slot": "
|
|
1563
|
-
className: cn(
|
|
3318
|
+
"data-slot": "input-group",
|
|
3319
|
+
className: cn(inputGroupVariants(), className),
|
|
1564
3320
|
...props
|
|
1565
3321
|
}
|
|
1566
3322
|
);
|
|
1567
3323
|
}
|
|
1568
|
-
function
|
|
3324
|
+
function InputWrapper({
|
|
1569
3325
|
className,
|
|
3326
|
+
variant,
|
|
1570
3327
|
...props
|
|
1571
3328
|
}) {
|
|
1572
3329
|
return /* @__PURE__ */ jsx(
|
|
1573
|
-
"
|
|
3330
|
+
"div",
|
|
1574
3331
|
{
|
|
1575
|
-
"data-slot": "
|
|
1576
|
-
className: cn(
|
|
3332
|
+
"data-slot": "input-wrapper",
|
|
3333
|
+
className: cn(
|
|
3334
|
+
inputVariants({ variant }),
|
|
3335
|
+
inputWrapperVariants({ variant }),
|
|
3336
|
+
className
|
|
3337
|
+
),
|
|
1577
3338
|
...props
|
|
1578
3339
|
}
|
|
1579
3340
|
);
|
|
1580
3341
|
}
|
|
1581
|
-
|
|
1582
|
-
|
|
1583
|
-
}) {
|
|
1584
|
-
return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Sub, { "data-slot": "dropdown-menu-sub", ...props });
|
|
1585
|
-
}
|
|
1586
|
-
var alertVariants = cva(
|
|
1587
|
-
"flex items-stretch w-full gap-2 group-[.toaster]:w-(--width)",
|
|
3342
|
+
var labelVariants = cva(
|
|
3343
|
+
"text-sm leading-none text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
|
|
1588
3344
|
{
|
|
1589
3345
|
variants: {
|
|
1590
3346
|
variant: {
|
|
1591
|
-
|
|
1592
|
-
|
|
1593
|
-
destructive: "",
|
|
1594
|
-
success: "",
|
|
1595
|
-
info: "",
|
|
1596
|
-
mono: "",
|
|
1597
|
-
warning: ""
|
|
1598
|
-
},
|
|
1599
|
-
icon: {
|
|
1600
|
-
primary: "",
|
|
1601
|
-
destructive: "",
|
|
1602
|
-
success: "",
|
|
1603
|
-
info: "",
|
|
1604
|
-
warning: ""
|
|
1605
|
-
},
|
|
1606
|
-
appearance: {
|
|
1607
|
-
solid: "",
|
|
1608
|
-
outline: "",
|
|
1609
|
-
light: "",
|
|
1610
|
-
stroke: "text-foreground"
|
|
1611
|
-
},
|
|
1612
|
-
size: {
|
|
1613
|
-
lg: "rounded-lg p-4 gap-3 text-base [&>[data-slot=alert-icon]>svg]:size-6 [&_[data-slot=alert-icon]]:mt-0.5 [&_[data-slot=alert-close]]:mt-1",
|
|
1614
|
-
md: "rounded-lg p-3.5 gap-2.5 text-sm [&>[data-slot=alert-icon]>svg]:size-5 [&_[data-slot=alert-icon]]:mt-0 [&_[data-slot=alert-close]]:mt-0.5",
|
|
1615
|
-
sm: "rounded-md px-3 py-2.5 gap-2 text-xs [&>[data-slot=alert-icon]>svg]:size-4 [&_[data-alert-icon]]:mt-0.5 [&_[data-slot=alert-close]]:mt-0.25 [&_[data-slot=alert-close]_svg]:size-3.5"
|
|
3347
|
+
primary: "font-medium",
|
|
3348
|
+
secondary: "font-normal"
|
|
1616
3349
|
}
|
|
1617
3350
|
},
|
|
1618
|
-
compoundVariants: [
|
|
1619
|
-
/* Solid */
|
|
1620
|
-
{
|
|
1621
|
-
variant: "secondary",
|
|
1622
|
-
appearance: "solid",
|
|
1623
|
-
className: "bg-muted text-foreground"
|
|
1624
|
-
},
|
|
1625
|
-
{
|
|
1626
|
-
variant: "primary",
|
|
1627
|
-
appearance: "solid",
|
|
1628
|
-
className: "bg-primary text-primary-foreground"
|
|
1629
|
-
},
|
|
1630
|
-
{
|
|
1631
|
-
variant: "destructive",
|
|
1632
|
-
appearance: "solid",
|
|
1633
|
-
className: "bg-destructive text-destructive-foreground"
|
|
1634
|
-
},
|
|
1635
|
-
{
|
|
1636
|
-
variant: "success",
|
|
1637
|
-
appearance: "solid",
|
|
1638
|
-
className: "bg-[var(--color-success,var(--color-green-500))] text-[var(--color-success-foreground,var(--color-white))]"
|
|
1639
|
-
},
|
|
1640
|
-
{
|
|
1641
|
-
variant: "info",
|
|
1642
|
-
appearance: "solid",
|
|
1643
|
-
className: "bg-[var(--color-info,var(--color-violet-600))] text-[var(--color-info-foreground,var(--color-white))]"
|
|
1644
|
-
},
|
|
1645
|
-
{
|
|
1646
|
-
variant: "warning",
|
|
1647
|
-
appearance: "solid",
|
|
1648
|
-
className: "bg-[var(--color-warning,var(--color-yellow-500))] text-[var(--color-warning-foreground,var(--color-white))]"
|
|
1649
|
-
},
|
|
1650
|
-
{
|
|
1651
|
-
variant: "mono",
|
|
1652
|
-
appearance: "solid",
|
|
1653
|
-
className: "bg-zinc-950 text-white dark:bg-zinc-300 dark:text-black [&_[data-slot=alert-close]]:text-white"
|
|
1654
|
-
},
|
|
1655
|
-
/* Outline */
|
|
1656
|
-
{
|
|
1657
|
-
variant: "secondary",
|
|
1658
|
-
appearance: "outline",
|
|
1659
|
-
className: "border border-border bg-background text-foreground [&_[data-slot=alert-close]]:text-foreground"
|
|
1660
|
-
},
|
|
1661
|
-
{
|
|
1662
|
-
variant: "primary",
|
|
1663
|
-
appearance: "outline",
|
|
1664
|
-
className: "border border-border bg-background text-primary [&_[data-slot=alert-close]]:text-foreground"
|
|
1665
|
-
},
|
|
1666
|
-
{
|
|
1667
|
-
variant: "destructive",
|
|
1668
|
-
appearance: "outline",
|
|
1669
|
-
className: "border border-border bg-background text-destructive [&_[data-slot=alert-close]]:text-foreground"
|
|
1670
|
-
},
|
|
1671
|
-
{
|
|
1672
|
-
variant: "success",
|
|
1673
|
-
appearance: "outline",
|
|
1674
|
-
className: "border border-border bg-background text-[var(--color-success,var(--color-green-500))] [&_[data-slot=alert-close]]:text-foreground"
|
|
1675
|
-
},
|
|
1676
|
-
{
|
|
1677
|
-
variant: "info",
|
|
1678
|
-
appearance: "outline",
|
|
1679
|
-
className: "border border-border bg-background text-[var(--color-info,var(--color-violet-600))] [&_[data-slot=alert-close]]:text-foreground"
|
|
1680
|
-
},
|
|
1681
|
-
{
|
|
1682
|
-
variant: "warning",
|
|
1683
|
-
appearance: "outline",
|
|
1684
|
-
className: "border border-border bg-background text-[var(--color-warning,var(--color-yellow-500))] [&_[data-slot=alert-close]]:text-foreground"
|
|
1685
|
-
},
|
|
1686
|
-
{
|
|
1687
|
-
variant: "mono",
|
|
1688
|
-
appearance: "outline",
|
|
1689
|
-
className: "border border-border bg-background text-foreground [&_[data-slot=alert-close]]:text-foreground"
|
|
1690
|
-
},
|
|
1691
|
-
/* Light */
|
|
1692
|
-
{
|
|
1693
|
-
variant: "secondary",
|
|
1694
|
-
appearance: "light",
|
|
1695
|
-
className: "bg-muted border border-border text-foreground"
|
|
1696
|
-
},
|
|
1697
|
-
{
|
|
1698
|
-
variant: "primary",
|
|
1699
|
-
appearance: "light",
|
|
1700
|
-
className: "text-foreground bg-[var(--color-primary-soft,var(--color-blue-50))] border border-[var(--color-primary-alpha,var(--color-blue-100))] [&_[data-slot=alert-icon]]:text-primary dark:bg-[var(--color-primary-soft,var(--color-blue-950))] dark:border-[var(--color-primary-alpha,var(--color-blue-900))]"
|
|
1701
|
-
},
|
|
1702
|
-
{
|
|
1703
|
-
variant: "destructive",
|
|
1704
|
-
appearance: "light",
|
|
1705
|
-
className: "bg-[var(--color-destructive-soft,var(--color-red-50))] border border-[var(--color-destructive-alpha,var(--color-red-100))] text-foreground [&_[data-slot=alert-icon]]:text-destructive dark:bg-[var(--color-destructive-soft,var(--color-red-950))] dark:border-[var(--color-destructive-alpha,var(--color-red-900))] "
|
|
1706
|
-
},
|
|
1707
|
-
{
|
|
1708
|
-
variant: "success",
|
|
1709
|
-
appearance: "light",
|
|
1710
|
-
className: "bg-[var(--color-success-soft,var(--color-green-50))] border border-[var(--color-success-alpha,var(--color-green-200))] text-foreground [&_[data-slot=alert-icon]]:text-[var(--color-success-foreground,var(--color-green-600))] dark:bg-[var(--color-success-soft,var(--color-green-950))] dark:border-[var(--color-success-alpha,var(--color-green-900))]"
|
|
1711
|
-
},
|
|
1712
|
-
{
|
|
1713
|
-
variant: "info",
|
|
1714
|
-
appearance: "light",
|
|
1715
|
-
className: "bg-[var(--color-info-soft,var(--color-violet-50))] border border-[var(--color-info-alpha,var(--color-violet-100))] text-foreground [&_[data-slot=alert-icon]]:text-[var(--color-info-foreground,var(--color-violet-600))] dark:bg-[var(--color-info-soft,var(--color-violet-950))] dark:border-[var(--color-info-alpha,var(--color-violet-900))]"
|
|
1716
|
-
},
|
|
1717
|
-
{
|
|
1718
|
-
variant: "warning",
|
|
1719
|
-
appearance: "light",
|
|
1720
|
-
className: "bg-[var(--color-warning-soft,var(--color-yellow-50))] border border-[var(--color-warning-alpha,var(--color-yellow-200))] text-foreground [&_[data-slot=alert-icon]]:text-[var(--color-warning-foreground,var(--color-yellow-600))] dark:bg-[var(--color-warning-soft,var(--color-yellow-950))] dark:border-[var(--color-warning-alpha,var(--color-yellow-900))]"
|
|
1721
|
-
},
|
|
1722
|
-
/* Mono */
|
|
1723
|
-
{
|
|
1724
|
-
variant: "mono",
|
|
1725
|
-
icon: "primary",
|
|
1726
|
-
className: "[&_[data-slot=alert-icon]]:text-primary"
|
|
1727
|
-
},
|
|
1728
|
-
{
|
|
1729
|
-
variant: "mono",
|
|
1730
|
-
icon: "warning",
|
|
1731
|
-
className: "[&_[data-slot=alert-icon]]:text-[var(--color-warning-foreground,var(--color-yellow-600))]"
|
|
1732
|
-
},
|
|
1733
|
-
{
|
|
1734
|
-
variant: "mono",
|
|
1735
|
-
icon: "success",
|
|
1736
|
-
className: "[&_[data-slot=alert-icon]]:text-[var(--color-success-foreground,var(--color-green-600))]"
|
|
1737
|
-
},
|
|
1738
|
-
{
|
|
1739
|
-
variant: "mono",
|
|
1740
|
-
icon: "destructive",
|
|
1741
|
-
className: "[&_[data-slot=alert-icon]]:text-destructive"
|
|
1742
|
-
},
|
|
1743
|
-
{
|
|
1744
|
-
variant: "mono",
|
|
1745
|
-
icon: "info",
|
|
1746
|
-
className: "[&_[data-slot=alert-icon]]:text-[var(--color-info-foreground,var(--color-violet-600))]"
|
|
1747
|
-
}
|
|
1748
|
-
],
|
|
1749
3351
|
defaultVariants: {
|
|
1750
|
-
variant: "
|
|
1751
|
-
appearance: "solid",
|
|
1752
|
-
size: "md"
|
|
3352
|
+
variant: "primary"
|
|
1753
3353
|
}
|
|
1754
3354
|
}
|
|
1755
3355
|
);
|
|
1756
|
-
function
|
|
3356
|
+
function Label2({
|
|
1757
3357
|
className,
|
|
1758
3358
|
variant,
|
|
1759
|
-
size,
|
|
1760
|
-
icon,
|
|
1761
|
-
appearance,
|
|
1762
|
-
close = false,
|
|
1763
|
-
onClose,
|
|
1764
|
-
children,
|
|
1765
3359
|
...props
|
|
1766
3360
|
}) {
|
|
1767
|
-
return /* @__PURE__ */
|
|
1768
|
-
|
|
3361
|
+
return /* @__PURE__ */ jsx(
|
|
3362
|
+
Label.Root,
|
|
1769
3363
|
{
|
|
1770
|
-
"data-slot": "
|
|
1771
|
-
|
|
1772
|
-
|
|
1773
|
-
alertVariants({ variant, size, icon, appearance }),
|
|
1774
|
-
className
|
|
1775
|
-
),
|
|
1776
|
-
...props,
|
|
1777
|
-
children: [
|
|
1778
|
-
children,
|
|
1779
|
-
close && /* @__PURE__ */ jsx(
|
|
1780
|
-
Button,
|
|
1781
|
-
{
|
|
1782
|
-
size: "sm",
|
|
1783
|
-
variant: "inverse",
|
|
1784
|
-
mode: "icon",
|
|
1785
|
-
onClick: onClose,
|
|
1786
|
-
"aria-label": "Dismiss",
|
|
1787
|
-
"data-slot": "alert-close",
|
|
1788
|
-
className: cn("group shrink-0 size-4"),
|
|
1789
|
-
children: /* @__PURE__ */ jsx(X, { className: "opacity-60 group-hover:opacity-100 size-4" })
|
|
1790
|
-
}
|
|
1791
|
-
)
|
|
1792
|
-
]
|
|
3364
|
+
"data-slot": "label",
|
|
3365
|
+
className: cn(labelVariants({ variant }), className),
|
|
3366
|
+
...props
|
|
1793
3367
|
}
|
|
1794
3368
|
);
|
|
1795
3369
|
}
|
|
1796
|
-
|
|
3370
|
+
var Form = FormProvider;
|
|
3371
|
+
var FormFieldContext = React.createContext(
|
|
3372
|
+
{}
|
|
3373
|
+
);
|
|
3374
|
+
var FormField = ({
|
|
3375
|
+
...props
|
|
3376
|
+
}) => {
|
|
3377
|
+
return /* @__PURE__ */ jsx(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx(Controller, { ...props }) });
|
|
3378
|
+
};
|
|
3379
|
+
var useFormField = () => {
|
|
3380
|
+
const fieldContext = React.useContext(FormFieldContext);
|
|
3381
|
+
const itemContext = React.useContext(FormItemContext);
|
|
3382
|
+
const { getFieldState, formState } = useFormContext();
|
|
3383
|
+
const fieldState = getFieldState(fieldContext.name, formState);
|
|
3384
|
+
if (!fieldContext) {
|
|
3385
|
+
throw new Error("useFormField should be used within <FormField>");
|
|
3386
|
+
}
|
|
3387
|
+
const { id } = itemContext;
|
|
3388
|
+
return {
|
|
3389
|
+
id,
|
|
3390
|
+
name: fieldContext.name,
|
|
3391
|
+
formItemId: `${id}-form-item`,
|
|
3392
|
+
formDescriptionId: `${id}-form-item-description`,
|
|
3393
|
+
formMessageId: `${id}-form-item-message`,
|
|
3394
|
+
...fieldState
|
|
3395
|
+
};
|
|
3396
|
+
};
|
|
3397
|
+
var FormItemContext = React.createContext(
|
|
3398
|
+
{}
|
|
3399
|
+
);
|
|
3400
|
+
function FormItem({
|
|
3401
|
+
className,
|
|
3402
|
+
...props
|
|
3403
|
+
}) {
|
|
3404
|
+
const id = React.useId();
|
|
3405
|
+
return /* @__PURE__ */ jsx(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx(FormItemInner, { className, ...props }) });
|
|
3406
|
+
}
|
|
3407
|
+
function FormItemInner({
|
|
1797
3408
|
className,
|
|
1798
3409
|
...props
|
|
1799
3410
|
}) {
|
|
3411
|
+
const { error } = useFormField();
|
|
1800
3412
|
return /* @__PURE__ */ jsx(
|
|
1801
3413
|
"div",
|
|
1802
3414
|
{
|
|
1803
|
-
"data-slot": "
|
|
1804
|
-
className: cn("
|
|
3415
|
+
"data-slot": "form-item",
|
|
3416
|
+
className: cn("flex flex-col gap-2.5", className),
|
|
3417
|
+
"data-invalid": !!error,
|
|
1805
3418
|
...props
|
|
1806
3419
|
}
|
|
1807
3420
|
);
|
|
1808
3421
|
}
|
|
1809
|
-
function
|
|
3422
|
+
function FormLabel({
|
|
3423
|
+
className,
|
|
3424
|
+
...props
|
|
3425
|
+
}) {
|
|
3426
|
+
const { formItemId } = useFormField();
|
|
1810
3427
|
return /* @__PURE__ */ jsx(
|
|
1811
|
-
|
|
3428
|
+
Label2,
|
|
1812
3429
|
{
|
|
1813
|
-
"data-slot": "
|
|
1814
|
-
className: cn("
|
|
1815
|
-
|
|
1816
|
-
|
|
3430
|
+
"data-slot": "form-label",
|
|
3431
|
+
className: cn("font-medium text-foreground", className),
|
|
3432
|
+
htmlFor: formItemId,
|
|
3433
|
+
...props
|
|
1817
3434
|
}
|
|
1818
3435
|
);
|
|
1819
3436
|
}
|
|
1820
|
-
function
|
|
1821
|
-
|
|
3437
|
+
function FormControl({ ...props }) {
|
|
3438
|
+
const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
|
|
3439
|
+
return /* @__PURE__ */ jsx(
|
|
3440
|
+
Slot,
|
|
3441
|
+
{
|
|
3442
|
+
"data-slot": "form-control",
|
|
3443
|
+
id: formItemId,
|
|
3444
|
+
"aria-describedby": !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`,
|
|
3445
|
+
"aria-invalid": !!error,
|
|
3446
|
+
...props
|
|
3447
|
+
}
|
|
3448
|
+
);
|
|
1822
3449
|
}
|
|
1823
|
-
function
|
|
3450
|
+
function FormDescription({
|
|
1824
3451
|
className,
|
|
1825
3452
|
...props
|
|
1826
3453
|
}) {
|
|
3454
|
+
const { formDescriptionId, error } = useFormField();
|
|
3455
|
+
if (error) {
|
|
3456
|
+
return null;
|
|
3457
|
+
}
|
|
1827
3458
|
return /* @__PURE__ */ jsx(
|
|
1828
3459
|
"div",
|
|
1829
3460
|
{
|
|
1830
|
-
"data-slot": "
|
|
1831
|
-
|
|
3461
|
+
"data-slot": "form-description",
|
|
3462
|
+
id: formDescriptionId,
|
|
3463
|
+
className: cn("text-xs text-muted-foreground -mt-0.5", className),
|
|
1832
3464
|
...props
|
|
1833
3465
|
}
|
|
1834
3466
|
);
|
|
1835
3467
|
}
|
|
1836
|
-
function
|
|
3468
|
+
function FormMessage({
|
|
1837
3469
|
className,
|
|
3470
|
+
children,
|
|
1838
3471
|
...props
|
|
1839
3472
|
}) {
|
|
3473
|
+
const { error, formMessageId } = useFormField();
|
|
3474
|
+
const body = error ? String(error?.message) : children;
|
|
3475
|
+
if (!body) {
|
|
3476
|
+
return null;
|
|
3477
|
+
}
|
|
1840
3478
|
return /* @__PURE__ */ jsx(
|
|
1841
3479
|
"div",
|
|
1842
3480
|
{
|
|
1843
|
-
"data-slot": "
|
|
3481
|
+
"data-slot": "form-message",
|
|
3482
|
+
id: formMessageId,
|
|
3483
|
+
className: cn("-mt-0.5 text-xs font-normal text-destructive", className),
|
|
3484
|
+
...props,
|
|
3485
|
+
children: body
|
|
3486
|
+
}
|
|
3487
|
+
);
|
|
3488
|
+
}
|
|
3489
|
+
function ScrollArea({
|
|
3490
|
+
className,
|
|
3491
|
+
viewportClassName,
|
|
3492
|
+
children,
|
|
3493
|
+
viewportRef,
|
|
3494
|
+
...props
|
|
3495
|
+
}) {
|
|
3496
|
+
return /* @__PURE__ */ jsxs(
|
|
3497
|
+
ScrollArea$1.Root,
|
|
3498
|
+
{
|
|
3499
|
+
"data-slot": "scroll-area",
|
|
3500
|
+
className: cn("relative overflow-hidden", className),
|
|
3501
|
+
...props,
|
|
3502
|
+
children: [
|
|
3503
|
+
/* @__PURE__ */ jsx(
|
|
3504
|
+
ScrollArea$1.Viewport,
|
|
3505
|
+
{
|
|
3506
|
+
ref: viewportRef,
|
|
3507
|
+
className: cn("h-full w-full rounded-[inherit]", viewportClassName),
|
|
3508
|
+
children
|
|
3509
|
+
}
|
|
3510
|
+
),
|
|
3511
|
+
/* @__PURE__ */ jsx(ScrollBar, {}),
|
|
3512
|
+
/* @__PURE__ */ jsx(ScrollArea$1.Corner, {})
|
|
3513
|
+
]
|
|
3514
|
+
}
|
|
3515
|
+
);
|
|
3516
|
+
}
|
|
3517
|
+
function ScrollBar({
|
|
3518
|
+
className,
|
|
3519
|
+
orientation = "vertical",
|
|
3520
|
+
...props
|
|
3521
|
+
}) {
|
|
3522
|
+
return /* @__PURE__ */ jsx(
|
|
3523
|
+
ScrollArea$1.ScrollAreaScrollbar,
|
|
3524
|
+
{
|
|
3525
|
+
"data-slot": "scroll-area-scrollbar",
|
|
3526
|
+
orientation,
|
|
1844
3527
|
className: cn(
|
|
1845
|
-
"
|
|
3528
|
+
"flex touch-none select-none transition-colors",
|
|
3529
|
+
orientation === "vertical" && "h-full w-2 border-l border-l-transparent p-[1px]",
|
|
3530
|
+
orientation === "horizontal" && "h-2 flex-col border-t border-t-transparent p-[1px]",
|
|
1846
3531
|
className
|
|
1847
3532
|
),
|
|
1848
|
-
...props
|
|
3533
|
+
...props,
|
|
3534
|
+
children: /* @__PURE__ */ jsx(ScrollArea$1.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border" })
|
|
3535
|
+
}
|
|
3536
|
+
);
|
|
3537
|
+
}
|
|
3538
|
+
function Scrollspy({
|
|
3539
|
+
children,
|
|
3540
|
+
targetRef,
|
|
3541
|
+
onUpdate,
|
|
3542
|
+
className,
|
|
3543
|
+
offset = 0,
|
|
3544
|
+
smooth = true,
|
|
3545
|
+
dataAttribute = "scrollspy",
|
|
3546
|
+
history = true
|
|
3547
|
+
}) {
|
|
3548
|
+
const selfRef = useRef(null);
|
|
3549
|
+
const anchorElementsRef = useRef(null);
|
|
3550
|
+
const prevIdTracker = useRef(null);
|
|
3551
|
+
const setActiveSection = useCallback(
|
|
3552
|
+
(sectionId, force = false) => {
|
|
3553
|
+
if (!sectionId) return;
|
|
3554
|
+
anchorElementsRef.current?.forEach((item) => {
|
|
3555
|
+
const id = item.getAttribute(`data-${dataAttribute}-anchor`);
|
|
3556
|
+
if (id === sectionId) {
|
|
3557
|
+
item.setAttribute("data-active", "true");
|
|
3558
|
+
} else {
|
|
3559
|
+
item.removeAttribute("data-active");
|
|
3560
|
+
}
|
|
3561
|
+
});
|
|
3562
|
+
if (onUpdate) onUpdate(sectionId);
|
|
3563
|
+
if (history && (force || prevIdTracker.current !== sectionId)) {
|
|
3564
|
+
window.history.replaceState({}, "", `#${sectionId}`);
|
|
3565
|
+
}
|
|
3566
|
+
prevIdTracker.current = sectionId;
|
|
3567
|
+
},
|
|
3568
|
+
[anchorElementsRef, dataAttribute, history, onUpdate]
|
|
3569
|
+
);
|
|
3570
|
+
const handleScroll = useCallback(() => {
|
|
3571
|
+
if (!anchorElementsRef.current || anchorElementsRef.current.length === 0)
|
|
3572
|
+
return;
|
|
3573
|
+
const scrollElement = targetRef?.current === document ? window : targetRef?.current;
|
|
3574
|
+
const scrollTop = scrollElement === window ? window.scrollY || document.documentElement.scrollTop : scrollElement.scrollTop;
|
|
3575
|
+
let activeIdx = 0;
|
|
3576
|
+
let minDelta = Infinity;
|
|
3577
|
+
anchorElementsRef.current.forEach((anchor, idx) => {
|
|
3578
|
+
const sectionId2 = anchor.getAttribute(`data-${dataAttribute}-anchor`);
|
|
3579
|
+
const sectionElement = document.getElementById(sectionId2);
|
|
3580
|
+
if (!sectionElement) return;
|
|
3581
|
+
let customOffset = offset;
|
|
3582
|
+
const dataOffset = anchor.getAttribute(`data-${dataAttribute}-offset`);
|
|
3583
|
+
if (dataOffset) customOffset = parseInt(dataOffset, 10);
|
|
3584
|
+
const delta = Math.abs(
|
|
3585
|
+
sectionElement.offsetTop - customOffset - scrollTop
|
|
3586
|
+
);
|
|
3587
|
+
if (sectionElement.offsetTop - customOffset <= scrollTop && delta < minDelta) {
|
|
3588
|
+
minDelta = delta;
|
|
3589
|
+
activeIdx = idx;
|
|
3590
|
+
}
|
|
3591
|
+
});
|
|
3592
|
+
if (scrollElement) {
|
|
3593
|
+
const scrollHeight = scrollElement === window ? document.documentElement.scrollHeight : scrollElement.scrollHeight;
|
|
3594
|
+
const clientHeight = scrollElement === window ? window.innerHeight : scrollElement.clientHeight;
|
|
3595
|
+
if (scrollTop + clientHeight >= scrollHeight - 2) {
|
|
3596
|
+
activeIdx = anchorElementsRef.current.length - 1;
|
|
3597
|
+
}
|
|
1849
3598
|
}
|
|
3599
|
+
const activeAnchor = anchorElementsRef.current[activeIdx];
|
|
3600
|
+
const sectionId = activeAnchor?.getAttribute(`data-${dataAttribute}-anchor`) || null;
|
|
3601
|
+
setActiveSection(sectionId);
|
|
3602
|
+
anchorElementsRef.current.forEach((item, idx) => {
|
|
3603
|
+
if (idx !== activeIdx) {
|
|
3604
|
+
item.removeAttribute("data-active");
|
|
3605
|
+
}
|
|
3606
|
+
});
|
|
3607
|
+
}, [anchorElementsRef, targetRef, dataAttribute, offset, setActiveSection]);
|
|
3608
|
+
const scrollTo = useCallback(
|
|
3609
|
+
(anchorElement) => (event) => {
|
|
3610
|
+
if (event) event.preventDefault();
|
|
3611
|
+
const sectionId = anchorElement.getAttribute(`data-${dataAttribute}-anchor`)?.replace("#", "") || null;
|
|
3612
|
+
if (!sectionId) return;
|
|
3613
|
+
const sectionElement = document.getElementById(sectionId);
|
|
3614
|
+
if (!sectionElement) return;
|
|
3615
|
+
const scrollToElement = targetRef?.current === document ? window : targetRef?.current;
|
|
3616
|
+
let customOffset = offset;
|
|
3617
|
+
const dataOffset = anchorElement.getAttribute(
|
|
3618
|
+
`data-${dataAttribute}-offset`
|
|
3619
|
+
);
|
|
3620
|
+
if (dataOffset) {
|
|
3621
|
+
customOffset = parseInt(dataOffset, 10);
|
|
3622
|
+
}
|
|
3623
|
+
const scrollTop = sectionElement.offsetTop - customOffset;
|
|
3624
|
+
if (scrollToElement && "scrollTo" in scrollToElement) {
|
|
3625
|
+
scrollToElement.scrollTo({
|
|
3626
|
+
top: scrollTop,
|
|
3627
|
+
left: 0,
|
|
3628
|
+
behavior: smooth ? "smooth" : "auto"
|
|
3629
|
+
});
|
|
3630
|
+
}
|
|
3631
|
+
setActiveSection(sectionId, true);
|
|
3632
|
+
},
|
|
3633
|
+
[dataAttribute, offset, smooth, targetRef, setActiveSection]
|
|
1850
3634
|
);
|
|
3635
|
+
const scrollToHashSection = useCallback(() => {
|
|
3636
|
+
const hash = CSS.escape(window.location.hash.replace("#", ""));
|
|
3637
|
+
if (hash) {
|
|
3638
|
+
const targetElement = document.querySelector(
|
|
3639
|
+
`[data-${dataAttribute}-anchor="${hash}"]`
|
|
3640
|
+
);
|
|
3641
|
+
if (targetElement) {
|
|
3642
|
+
scrollTo(targetElement)();
|
|
3643
|
+
}
|
|
3644
|
+
}
|
|
3645
|
+
}, [dataAttribute, scrollTo]);
|
|
3646
|
+
useEffect(() => {
|
|
3647
|
+
if (selfRef.current) {
|
|
3648
|
+
anchorElementsRef.current = Array.from(
|
|
3649
|
+
selfRef.current.querySelectorAll(`[data-${dataAttribute}-anchor]`)
|
|
3650
|
+
);
|
|
3651
|
+
}
|
|
3652
|
+
anchorElementsRef.current?.forEach((item) => {
|
|
3653
|
+
item.addEventListener("click", scrollTo(item));
|
|
3654
|
+
});
|
|
3655
|
+
const scrollElement = targetRef?.current === document ? window : targetRef?.current;
|
|
3656
|
+
scrollElement?.addEventListener("scroll", handleScroll);
|
|
3657
|
+
setTimeout(() => {
|
|
3658
|
+
scrollToHashSection();
|
|
3659
|
+
setTimeout(() => {
|
|
3660
|
+
handleScroll();
|
|
3661
|
+
}, 100);
|
|
3662
|
+
}, 100);
|
|
3663
|
+
return () => {
|
|
3664
|
+
scrollElement?.removeEventListener("scroll", handleScroll);
|
|
3665
|
+
anchorElementsRef.current?.forEach((item) => {
|
|
3666
|
+
item.removeEventListener("click", scrollTo(item));
|
|
3667
|
+
});
|
|
3668
|
+
};
|
|
3669
|
+
}, [
|
|
3670
|
+
targetRef,
|
|
3671
|
+
selfRef,
|
|
3672
|
+
handleScroll,
|
|
3673
|
+
dataAttribute,
|
|
3674
|
+
scrollTo,
|
|
3675
|
+
scrollToHashSection
|
|
3676
|
+
]);
|
|
3677
|
+
return /* @__PURE__ */ jsx("div", { "data-slot": "scrollspy", className, ref: selfRef, children });
|
|
1851
3678
|
}
|
|
1852
3679
|
var MOBILE_BREAKPOINT = 992;
|
|
1853
3680
|
function useIsMobile() {
|
|
@@ -1895,6 +3722,6 @@ function useMounted() {
|
|
|
1895
3722
|
return mounted;
|
|
1896
3723
|
}
|
|
1897
3724
|
|
|
1898
|
-
export {
|
|
3725
|
+
export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AvatarGroup, AvatarGroupItem, AvatarGroupTooltip, Badge, BadgeButton, BadgeDot, Button, ButtonArrow, Card, CardContent, CardDescription, CardFooter, CardHeader, CardHeading, CardTable, CardTitle, CardToolbar, Checkbox, DataGrid, DataGridColumnHeader, DataGridColumnVisibility, DataGridContainer, DataGridPagination, DataGridProvider, DataGridTable, DataGridTableBase, DataGridTableBody, DataGridTableBodyRow, DataGridTableBodyRowCell, DataGridTableBodyRowExpanded, DataGridTableBodyRowSkeleton, DataGridTableBodyRowSkeletonCell, DataGridTableEmpty, DataGridTableHead, DataGridTableHeadRow, DataGridTableHeadRowCell, DataGridTableHeadRowCellResize, DataGridTableLoader, DataGridTableRowSelect, DataGridTableRowSelectAll, DataGridTableRowSpacer, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, HoverCard, HoverCardContent, HoverCardTrigger, Icons, Input, InputAddon, InputGroup, InputWrapper, Label2 as Label, Popover, PopoverContent, PopoverTrigger, ScrollArea, ScrollBar, Scrollspy, Select, SelectContent, SelectGroup, SelectIndicator, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Skeleton, badgeVariants, buttonVariants, cn, inputAddonVariants, inputVariants, labelVariants, selectTriggerVariants, useCopyToClipboard, useDataGrid, useFormField, useIsMobile, useMounted };
|
|
1899
3726
|
//# sourceMappingURL=index.js.map
|
|
1900
3727
|
//# sourceMappingURL=index.js.map
|