@nim-ui/components 0.0.0
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.d.ts +1679 -0
- package/dist/index.js +2638 -0
- package/dist/index.js.map +1 -0
- package/dist/styles.css +2953 -0
- package/package.json +84 -0
- package/src/registry/index.json +1061 -0
- package/src/registry/schema.ts +34 -0
package/dist/index.js
ADDED
|
@@ -0,0 +1,2638 @@
|
|
|
1
|
+
import * as React39 from 'react';
|
|
2
|
+
import { useSyncExternalStore } from 'react';
|
|
3
|
+
import { cva } from 'class-variance-authority';
|
|
4
|
+
import { clsx } from 'clsx';
|
|
5
|
+
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
6
|
+
import * as AvatarPrimitive from '@radix-ui/react-avatar';
|
|
7
|
+
import * as SwitchPrimitive from '@radix-ui/react-switch';
|
|
8
|
+
import * as DialogPrimitive from '@radix-ui/react-dialog';
|
|
9
|
+
import * as TabsPrimitive from '@radix-ui/react-tabs';
|
|
10
|
+
import * as SelectPrimitive from '@radix-ui/react-select';
|
|
11
|
+
import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
|
|
12
|
+
import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
|
|
13
|
+
import * as ToastPrimitive from '@radix-ui/react-toast';
|
|
14
|
+
import * as TooltipPrimitive from '@radix-ui/react-tooltip';
|
|
15
|
+
import * as PopoverPrimitive from '@radix-ui/react-popover';
|
|
16
|
+
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
|
|
17
|
+
import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
|
|
18
|
+
import * as AccordionPrimitive from '@radix-ui/react-accordion';
|
|
19
|
+
import * as SeparatorPrimitive from '@radix-ui/react-separator';
|
|
20
|
+
|
|
21
|
+
// src/components/button.tsx
|
|
22
|
+
function cn(...inputs) {
|
|
23
|
+
return clsx(inputs);
|
|
24
|
+
}
|
|
25
|
+
var buttonVariants = cva(
|
|
26
|
+
"inline-flex items-center justify-center font-medium transition-all duration-fast active:scale-[0.97] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none rounded-md",
|
|
27
|
+
{
|
|
28
|
+
variants: {
|
|
29
|
+
variant: {
|
|
30
|
+
default: "bg-primary-600 text-white hover:bg-primary-700 focus-visible:ring-primary-500 dark:bg-primary-700 dark:hover:bg-primary-600",
|
|
31
|
+
secondary: "bg-neutral-200 text-neutral-900 hover:bg-neutral-300 focus-visible:ring-neutral-400 dark:bg-neutral-700 dark:text-neutral-100 dark:hover:bg-neutral-600",
|
|
32
|
+
outline: "border border-neutral-300 bg-transparent hover:bg-neutral-100 focus-visible:ring-neutral-400 dark:border-neutral-600 dark:hover:bg-neutral-800 dark:text-neutral-100",
|
|
33
|
+
ghost: "bg-transparent hover:bg-neutral-100 focus-visible:ring-neutral-400 dark:hover:bg-neutral-800 dark:text-neutral-100",
|
|
34
|
+
destructive: "bg-red-600 text-white hover:bg-red-700 focus-visible:ring-red-500 dark:bg-red-700 dark:hover:bg-red-600"
|
|
35
|
+
},
|
|
36
|
+
size: {
|
|
37
|
+
sm: "h-8 px-3 py-1.5 text-sm",
|
|
38
|
+
md: "h-10 px-4 py-2 text-base",
|
|
39
|
+
lg: "h-12 px-6 py-3 text-lg",
|
|
40
|
+
xl: "h-14 px-8 py-4 text-xl"
|
|
41
|
+
}
|
|
42
|
+
},
|
|
43
|
+
defaultVariants: {
|
|
44
|
+
variant: "default",
|
|
45
|
+
size: "md"
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
);
|
|
49
|
+
var Button = React39.forwardRef(
|
|
50
|
+
({ className, variant, size, loading, disabled, children, ...props }, ref) => /* @__PURE__ */ jsxs(
|
|
51
|
+
"button",
|
|
52
|
+
{
|
|
53
|
+
className: cn(buttonVariants({ variant, size }), className),
|
|
54
|
+
ref,
|
|
55
|
+
disabled: loading || disabled,
|
|
56
|
+
...props,
|
|
57
|
+
children: [
|
|
58
|
+
loading && /* @__PURE__ */ jsxs(
|
|
59
|
+
"svg",
|
|
60
|
+
{
|
|
61
|
+
className: "animate-spin -ml-1 mr-2 h-4 w-4",
|
|
62
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
63
|
+
fill: "none",
|
|
64
|
+
viewBox: "0 0 24 24",
|
|
65
|
+
"aria-hidden": "true",
|
|
66
|
+
children: [
|
|
67
|
+
/* @__PURE__ */ jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
|
|
68
|
+
/* @__PURE__ */ jsx("path", { className: "opacity-75", fill: "currentColor", 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" })
|
|
69
|
+
]
|
|
70
|
+
}
|
|
71
|
+
),
|
|
72
|
+
children
|
|
73
|
+
]
|
|
74
|
+
}
|
|
75
|
+
)
|
|
76
|
+
);
|
|
77
|
+
Button.displayName = "Button";
|
|
78
|
+
var inputVariants = cva(
|
|
79
|
+
"flex w-full rounded-md border bg-white px-3 py-2 text-base transition-[border-color,box-shadow] duration-fast ease-in-out file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-neutral-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-neutral-900 dark:placeholder:text-neutral-400",
|
|
80
|
+
{
|
|
81
|
+
variants: {
|
|
82
|
+
variant: {
|
|
83
|
+
default: "border-neutral-300 focus-visible:ring-primary-500 dark:border-neutral-600 dark:text-neutral-100",
|
|
84
|
+
error: "border-red-500 focus-visible:ring-red-500 text-red-900 dark:border-red-400 dark:text-red-100",
|
|
85
|
+
success: "border-green-500 focus-visible:ring-green-500 text-green-900 dark:border-green-400 dark:text-green-100"
|
|
86
|
+
},
|
|
87
|
+
size: {
|
|
88
|
+
sm: "h-8 text-sm",
|
|
89
|
+
md: "h-10 text-base",
|
|
90
|
+
lg: "h-12 text-lg"
|
|
91
|
+
}
|
|
92
|
+
},
|
|
93
|
+
defaultVariants: {
|
|
94
|
+
variant: "default",
|
|
95
|
+
size: "md"
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
);
|
|
99
|
+
var Input = React39.forwardRef(
|
|
100
|
+
({ className, variant, size, type = "text", leftIcon, rightIcon, ...props }, ref) => {
|
|
101
|
+
if (leftIcon || rightIcon) {
|
|
102
|
+
return /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
|
|
103
|
+
leftIcon && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-neutral-500 dark:text-neutral-400", children: leftIcon }),
|
|
104
|
+
/* @__PURE__ */ jsx(
|
|
105
|
+
"input",
|
|
106
|
+
{
|
|
107
|
+
type,
|
|
108
|
+
className: cn(
|
|
109
|
+
inputVariants({ variant, size }),
|
|
110
|
+
leftIcon && "pl-10",
|
|
111
|
+
rightIcon && "pr-10",
|
|
112
|
+
className
|
|
113
|
+
),
|
|
114
|
+
ref,
|
|
115
|
+
...props
|
|
116
|
+
}
|
|
117
|
+
),
|
|
118
|
+
rightIcon && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-neutral-500 dark:text-neutral-400", children: rightIcon })
|
|
119
|
+
] });
|
|
120
|
+
}
|
|
121
|
+
return /* @__PURE__ */ jsx(
|
|
122
|
+
"input",
|
|
123
|
+
{
|
|
124
|
+
type,
|
|
125
|
+
className: cn(inputVariants({ variant, size }), className),
|
|
126
|
+
ref,
|
|
127
|
+
...props
|
|
128
|
+
}
|
|
129
|
+
);
|
|
130
|
+
}
|
|
131
|
+
);
|
|
132
|
+
Input.displayName = "Input";
|
|
133
|
+
var textareaVariants = cva(
|
|
134
|
+
"flex w-full rounded-md border bg-white px-3 py-2 text-base transition-[border-color,box-shadow] duration-fast ease-in-out placeholder:text-neutral-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-neutral-900 dark:placeholder:text-neutral-400",
|
|
135
|
+
{
|
|
136
|
+
variants: {
|
|
137
|
+
variant: {
|
|
138
|
+
default: "border-neutral-300 focus-visible:ring-primary-500 dark:border-neutral-600 dark:text-neutral-100",
|
|
139
|
+
error: "border-red-500 focus-visible:ring-red-500 text-red-900 dark:border-red-400 dark:text-red-100",
|
|
140
|
+
success: "border-green-500 focus-visible:ring-green-500 text-green-900 dark:border-green-400 dark:text-green-100"
|
|
141
|
+
},
|
|
142
|
+
size: {
|
|
143
|
+
sm: "text-sm",
|
|
144
|
+
md: "text-base",
|
|
145
|
+
lg: "text-lg"
|
|
146
|
+
}
|
|
147
|
+
},
|
|
148
|
+
defaultVariants: {
|
|
149
|
+
variant: "default",
|
|
150
|
+
size: "md"
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
);
|
|
154
|
+
var Textarea = React39.forwardRef(
|
|
155
|
+
({ className, variant, size, resize = true, rows = 4, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
156
|
+
"textarea",
|
|
157
|
+
{
|
|
158
|
+
className: cn(
|
|
159
|
+
textareaVariants({ variant, size }),
|
|
160
|
+
!resize && "resize-none",
|
|
161
|
+
className
|
|
162
|
+
),
|
|
163
|
+
ref,
|
|
164
|
+
rows,
|
|
165
|
+
...props
|
|
166
|
+
}
|
|
167
|
+
)
|
|
168
|
+
);
|
|
169
|
+
Textarea.displayName = "Textarea";
|
|
170
|
+
var badgeVariants = cva(
|
|
171
|
+
"inline-flex items-center justify-center font-medium rounded-full transition-colors",
|
|
172
|
+
{
|
|
173
|
+
variants: {
|
|
174
|
+
variant: {
|
|
175
|
+
default: "bg-primary-600 text-white dark:bg-primary-700",
|
|
176
|
+
secondary: "bg-neutral-200 text-neutral-900 dark:bg-neutral-700 dark:text-neutral-100",
|
|
177
|
+
outline: "border border-neutral-300 bg-transparent text-neutral-900 dark:border-neutral-600 dark:text-neutral-100",
|
|
178
|
+
destructive: "bg-error-600 text-white dark:bg-error-700",
|
|
179
|
+
success: "bg-success-600 text-white dark:bg-success-700",
|
|
180
|
+
warning: "bg-warning-500 text-warning-950 dark:bg-warning-600 dark:text-warning-50",
|
|
181
|
+
info: "bg-info-600 text-white dark:bg-info-700"
|
|
182
|
+
},
|
|
183
|
+
size: {
|
|
184
|
+
sm: "px-2 py-0.5 text-xs",
|
|
185
|
+
md: "px-2.5 py-1 text-sm",
|
|
186
|
+
lg: "px-3 py-1.5 text-base"
|
|
187
|
+
},
|
|
188
|
+
animate: {
|
|
189
|
+
true: "animate-scale-in"
|
|
190
|
+
}
|
|
191
|
+
},
|
|
192
|
+
defaultVariants: {
|
|
193
|
+
variant: "default",
|
|
194
|
+
size: "md"
|
|
195
|
+
}
|
|
196
|
+
}
|
|
197
|
+
);
|
|
198
|
+
var Badge = React39.forwardRef(
|
|
199
|
+
({ className, variant, size, animate, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
200
|
+
"div",
|
|
201
|
+
{
|
|
202
|
+
className: cn(badgeVariants({ variant, size, animate }), className),
|
|
203
|
+
ref,
|
|
204
|
+
...props
|
|
205
|
+
}
|
|
206
|
+
)
|
|
207
|
+
);
|
|
208
|
+
Badge.displayName = "Badge";
|
|
209
|
+
var avatarVariants = cva(
|
|
210
|
+
"relative flex shrink-0 overflow-hidden rounded-full",
|
|
211
|
+
{
|
|
212
|
+
variants: {
|
|
213
|
+
size: {
|
|
214
|
+
sm: "h-8 w-8",
|
|
215
|
+
md: "h-10 w-10",
|
|
216
|
+
lg: "h-12 w-12",
|
|
217
|
+
xl: "h-16 w-16"
|
|
218
|
+
}
|
|
219
|
+
},
|
|
220
|
+
defaultVariants: {
|
|
221
|
+
size: "md"
|
|
222
|
+
}
|
|
223
|
+
}
|
|
224
|
+
);
|
|
225
|
+
var Avatar = React39.forwardRef(({ className, size, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
226
|
+
AvatarPrimitive.Root,
|
|
227
|
+
{
|
|
228
|
+
ref,
|
|
229
|
+
className: cn(avatarVariants({ size }), className),
|
|
230
|
+
...props
|
|
231
|
+
}
|
|
232
|
+
));
|
|
233
|
+
Avatar.displayName = AvatarPrimitive.Root.displayName;
|
|
234
|
+
var AvatarImage = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
235
|
+
AvatarPrimitive.Image,
|
|
236
|
+
{
|
|
237
|
+
ref,
|
|
238
|
+
className: cn("aspect-square h-full w-full", className),
|
|
239
|
+
...props
|
|
240
|
+
}
|
|
241
|
+
));
|
|
242
|
+
AvatarImage.displayName = AvatarPrimitive.Image.displayName;
|
|
243
|
+
var AvatarFallback = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
244
|
+
AvatarPrimitive.Fallback,
|
|
245
|
+
{
|
|
246
|
+
ref,
|
|
247
|
+
className: cn(
|
|
248
|
+
"flex h-full w-full items-center justify-center rounded-full bg-neutral-200 text-neutral-900 font-medium dark:bg-neutral-700 dark:text-neutral-100",
|
|
249
|
+
className
|
|
250
|
+
),
|
|
251
|
+
...props
|
|
252
|
+
}
|
|
253
|
+
));
|
|
254
|
+
AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
|
|
255
|
+
var switchVariants = cva(
|
|
256
|
+
"peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors duration-fast ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary-600 data-[state=unchecked]:bg-neutral-200 dark:data-[state=checked]:bg-primary-700 dark:data-[state=unchecked]:bg-neutral-700",
|
|
257
|
+
{
|
|
258
|
+
variants: {
|
|
259
|
+
size: {
|
|
260
|
+
sm: "h-5 w-9",
|
|
261
|
+
md: "h-6 w-11",
|
|
262
|
+
lg: "h-7 w-[3.25rem]"
|
|
263
|
+
}
|
|
264
|
+
},
|
|
265
|
+
defaultVariants: {
|
|
266
|
+
size: "md"
|
|
267
|
+
}
|
|
268
|
+
}
|
|
269
|
+
);
|
|
270
|
+
var switchThumbVariants = cva(
|
|
271
|
+
"pointer-events-none block rounded-full bg-white shadow-lg ring-0 transition-transform duration-fast ease-out dark:bg-neutral-100",
|
|
272
|
+
{
|
|
273
|
+
variants: {
|
|
274
|
+
size: {
|
|
275
|
+
sm: "h-4 w-4 data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0",
|
|
276
|
+
md: "h-5 w-5 data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
|
|
277
|
+
lg: "h-6 w-6 data-[state=checked]:translate-x-6 data-[state=unchecked]:translate-x-0"
|
|
278
|
+
}
|
|
279
|
+
},
|
|
280
|
+
defaultVariants: {
|
|
281
|
+
size: "md"
|
|
282
|
+
}
|
|
283
|
+
}
|
|
284
|
+
);
|
|
285
|
+
var Switch = React39.forwardRef(({ className, size, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
286
|
+
SwitchPrimitive.Root,
|
|
287
|
+
{
|
|
288
|
+
ref,
|
|
289
|
+
className: cn(switchVariants({ size }), className),
|
|
290
|
+
...props,
|
|
291
|
+
children: /* @__PURE__ */ jsx(SwitchPrimitive.Thumb, { className: cn(switchThumbVariants({ size })) })
|
|
292
|
+
}
|
|
293
|
+
));
|
|
294
|
+
Switch.displayName = SwitchPrimitive.Root.displayName;
|
|
295
|
+
var containerVariants = cva(
|
|
296
|
+
"mx-auto w-full",
|
|
297
|
+
{
|
|
298
|
+
variants: {
|
|
299
|
+
maxWidth: {
|
|
300
|
+
sm: "max-w-screen-sm",
|
|
301
|
+
md: "max-w-screen-md",
|
|
302
|
+
lg: "max-w-screen-lg",
|
|
303
|
+
xl: "max-w-screen-xl",
|
|
304
|
+
"2xl": "max-w-screen-2xl",
|
|
305
|
+
full: "max-w-full"
|
|
306
|
+
},
|
|
307
|
+
padding: {
|
|
308
|
+
true: "px-4 sm:px-6 lg:px-8",
|
|
309
|
+
false: ""
|
|
310
|
+
}
|
|
311
|
+
},
|
|
312
|
+
defaultVariants: {
|
|
313
|
+
maxWidth: "xl",
|
|
314
|
+
padding: true
|
|
315
|
+
}
|
|
316
|
+
}
|
|
317
|
+
);
|
|
318
|
+
var Container = React39.forwardRef(
|
|
319
|
+
({ className, maxWidth, padding, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
320
|
+
"div",
|
|
321
|
+
{
|
|
322
|
+
ref,
|
|
323
|
+
className: cn(containerVariants({ maxWidth, padding }), className),
|
|
324
|
+
...props
|
|
325
|
+
}
|
|
326
|
+
)
|
|
327
|
+
);
|
|
328
|
+
Container.displayName = "Container";
|
|
329
|
+
var gridVariants = cva(
|
|
330
|
+
"grid",
|
|
331
|
+
{
|
|
332
|
+
variants: {
|
|
333
|
+
cols: {
|
|
334
|
+
1: "grid-cols-1",
|
|
335
|
+
2: "grid-cols-1 sm:grid-cols-2",
|
|
336
|
+
3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
|
|
337
|
+
4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4",
|
|
338
|
+
5: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-5",
|
|
339
|
+
6: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-6",
|
|
340
|
+
12: "grid-cols-1 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-12"
|
|
341
|
+
},
|
|
342
|
+
gap: {
|
|
343
|
+
none: "gap-0",
|
|
344
|
+
sm: "gap-2",
|
|
345
|
+
md: "gap-4",
|
|
346
|
+
lg: "gap-6",
|
|
347
|
+
xl: "gap-8"
|
|
348
|
+
}
|
|
349
|
+
},
|
|
350
|
+
defaultVariants: {
|
|
351
|
+
cols: 1,
|
|
352
|
+
gap: "md"
|
|
353
|
+
}
|
|
354
|
+
}
|
|
355
|
+
);
|
|
356
|
+
var Grid = React39.forwardRef(
|
|
357
|
+
({ className, cols, gap, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
358
|
+
"div",
|
|
359
|
+
{
|
|
360
|
+
ref,
|
|
361
|
+
className: cn(gridVariants({ cols, gap }), className),
|
|
362
|
+
...props
|
|
363
|
+
}
|
|
364
|
+
)
|
|
365
|
+
);
|
|
366
|
+
Grid.displayName = "Grid";
|
|
367
|
+
var stackVariants = cva(
|
|
368
|
+
"flex",
|
|
369
|
+
{
|
|
370
|
+
variants: {
|
|
371
|
+
direction: {
|
|
372
|
+
vertical: "flex-col",
|
|
373
|
+
horizontal: "flex-row"
|
|
374
|
+
},
|
|
375
|
+
spacing: {
|
|
376
|
+
none: "gap-0",
|
|
377
|
+
xs: "gap-1",
|
|
378
|
+
sm: "gap-2",
|
|
379
|
+
md: "gap-4",
|
|
380
|
+
lg: "gap-6",
|
|
381
|
+
xl: "gap-8"
|
|
382
|
+
},
|
|
383
|
+
align: {
|
|
384
|
+
start: "items-start",
|
|
385
|
+
center: "items-center",
|
|
386
|
+
end: "items-end",
|
|
387
|
+
stretch: "items-stretch"
|
|
388
|
+
}
|
|
389
|
+
},
|
|
390
|
+
defaultVariants: {
|
|
391
|
+
direction: "vertical",
|
|
392
|
+
spacing: "md",
|
|
393
|
+
align: "stretch"
|
|
394
|
+
}
|
|
395
|
+
}
|
|
396
|
+
);
|
|
397
|
+
var Stack = React39.forwardRef(
|
|
398
|
+
({ className, direction, spacing, align, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
399
|
+
"div",
|
|
400
|
+
{
|
|
401
|
+
ref,
|
|
402
|
+
className: cn(stackVariants({ direction, spacing, align }), className),
|
|
403
|
+
...props
|
|
404
|
+
}
|
|
405
|
+
)
|
|
406
|
+
);
|
|
407
|
+
Stack.displayName = "Stack";
|
|
408
|
+
var flexVariants = cva(
|
|
409
|
+
"flex",
|
|
410
|
+
{
|
|
411
|
+
variants: {
|
|
412
|
+
direction: {
|
|
413
|
+
row: "flex-row",
|
|
414
|
+
column: "flex-col",
|
|
415
|
+
"row-reverse": "flex-row-reverse",
|
|
416
|
+
"column-reverse": "flex-col-reverse"
|
|
417
|
+
},
|
|
418
|
+
justify: {
|
|
419
|
+
start: "justify-start",
|
|
420
|
+
center: "justify-center",
|
|
421
|
+
end: "justify-end",
|
|
422
|
+
between: "justify-between",
|
|
423
|
+
around: "justify-around",
|
|
424
|
+
evenly: "justify-evenly"
|
|
425
|
+
},
|
|
426
|
+
align: {
|
|
427
|
+
start: "items-start",
|
|
428
|
+
center: "items-center",
|
|
429
|
+
end: "items-end",
|
|
430
|
+
stretch: "items-stretch",
|
|
431
|
+
baseline: "items-baseline"
|
|
432
|
+
},
|
|
433
|
+
wrap: {
|
|
434
|
+
true: "flex-wrap",
|
|
435
|
+
false: "flex-nowrap"
|
|
436
|
+
},
|
|
437
|
+
gap: {
|
|
438
|
+
none: "gap-0",
|
|
439
|
+
xs: "gap-1",
|
|
440
|
+
sm: "gap-2",
|
|
441
|
+
md: "gap-4",
|
|
442
|
+
lg: "gap-6",
|
|
443
|
+
xl: "gap-8"
|
|
444
|
+
}
|
|
445
|
+
},
|
|
446
|
+
defaultVariants: {
|
|
447
|
+
direction: "row",
|
|
448
|
+
wrap: false
|
|
449
|
+
}
|
|
450
|
+
}
|
|
451
|
+
);
|
|
452
|
+
var Flex = React39.forwardRef(
|
|
453
|
+
({ className, direction, justify, align, wrap, gap, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
454
|
+
"div",
|
|
455
|
+
{
|
|
456
|
+
ref,
|
|
457
|
+
className: cn(flexVariants({ direction, justify, align, wrap, gap }), className),
|
|
458
|
+
...props
|
|
459
|
+
}
|
|
460
|
+
)
|
|
461
|
+
);
|
|
462
|
+
Flex.displayName = "Flex";
|
|
463
|
+
var spacerVariants = cva(
|
|
464
|
+
"",
|
|
465
|
+
{
|
|
466
|
+
variants: {
|
|
467
|
+
size: {
|
|
468
|
+
xs: "h-1 w-1",
|
|
469
|
+
sm: "h-2 w-2",
|
|
470
|
+
md: "h-4 w-4",
|
|
471
|
+
lg: "h-6 w-6",
|
|
472
|
+
xl: "h-8 w-8",
|
|
473
|
+
"2xl": "h-12 w-12"
|
|
474
|
+
},
|
|
475
|
+
flex: {
|
|
476
|
+
true: "flex-1",
|
|
477
|
+
false: ""
|
|
478
|
+
}
|
|
479
|
+
},
|
|
480
|
+
defaultVariants: {
|
|
481
|
+
flex: false
|
|
482
|
+
}
|
|
483
|
+
}
|
|
484
|
+
);
|
|
485
|
+
var Spacer = React39.forwardRef(
|
|
486
|
+
({ className, size, flex, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
487
|
+
"div",
|
|
488
|
+
{
|
|
489
|
+
ref,
|
|
490
|
+
"aria-hidden": "true",
|
|
491
|
+
className: cn(spacerVariants({ size, flex }), className),
|
|
492
|
+
...props
|
|
493
|
+
}
|
|
494
|
+
)
|
|
495
|
+
);
|
|
496
|
+
Spacer.displayName = "Spacer";
|
|
497
|
+
var cardVariants = cva(
|
|
498
|
+
"rounded-lg transition-[box-shadow,transform,border-color] duration-fast ease-out",
|
|
499
|
+
{
|
|
500
|
+
variants: {
|
|
501
|
+
variant: {
|
|
502
|
+
default: "border bg-white shadow-sm dark:bg-neutral-900 dark:border-neutral-700",
|
|
503
|
+
outlined: "border-2 border-neutral-300 bg-white dark:border-neutral-600 dark:bg-neutral-900",
|
|
504
|
+
elevated: "border border-transparent bg-white shadow-lg dark:bg-neutral-900",
|
|
505
|
+
ghost: "border border-transparent bg-transparent"
|
|
506
|
+
},
|
|
507
|
+
hoverable: {
|
|
508
|
+
true: "hover:-translate-y-0.5 hover:shadow-md cursor-pointer",
|
|
509
|
+
false: ""
|
|
510
|
+
}
|
|
511
|
+
},
|
|
512
|
+
defaultVariants: {
|
|
513
|
+
variant: "default",
|
|
514
|
+
hoverable: false
|
|
515
|
+
}
|
|
516
|
+
}
|
|
517
|
+
);
|
|
518
|
+
var Card = React39.forwardRef(
|
|
519
|
+
({ className, variant, hoverable, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
520
|
+
"div",
|
|
521
|
+
{
|
|
522
|
+
ref,
|
|
523
|
+
className: cn(cardVariants({ variant, hoverable }), className),
|
|
524
|
+
...props
|
|
525
|
+
}
|
|
526
|
+
)
|
|
527
|
+
);
|
|
528
|
+
Card.displayName = "Card";
|
|
529
|
+
var CardHeader = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
530
|
+
"div",
|
|
531
|
+
{
|
|
532
|
+
ref,
|
|
533
|
+
className: cn("flex flex-col space-y-1.5 p-6", className),
|
|
534
|
+
...props
|
|
535
|
+
}
|
|
536
|
+
));
|
|
537
|
+
CardHeader.displayName = "CardHeader";
|
|
538
|
+
var CardContent = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-6 pt-0", className), ...props }));
|
|
539
|
+
CardContent.displayName = "CardContent";
|
|
540
|
+
var CardFooter = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
541
|
+
"div",
|
|
542
|
+
{
|
|
543
|
+
ref,
|
|
544
|
+
className: cn("flex items-center p-6 pt-0", className),
|
|
545
|
+
...props
|
|
546
|
+
}
|
|
547
|
+
));
|
|
548
|
+
CardFooter.displayName = "CardFooter";
|
|
549
|
+
var Modal = DialogPrimitive.Root;
|
|
550
|
+
var ModalTrigger = DialogPrimitive.Trigger;
|
|
551
|
+
var ModalPortal = DialogPrimitive.Portal;
|
|
552
|
+
var ModalClose = DialogPrimitive.Close;
|
|
553
|
+
var ModalOverlay = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
554
|
+
DialogPrimitive.Overlay,
|
|
555
|
+
{
|
|
556
|
+
ref,
|
|
557
|
+
className: cn(
|
|
558
|
+
"fixed inset-0 z-50 bg-black/50 backdrop-blur-sm data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out",
|
|
559
|
+
className
|
|
560
|
+
),
|
|
561
|
+
...props
|
|
562
|
+
}
|
|
563
|
+
));
|
|
564
|
+
ModalOverlay.displayName = DialogPrimitive.Overlay.displayName;
|
|
565
|
+
var modalContentVariants = cva(
|
|
566
|
+
"fixed left-[50%] top-[50%] z-50 w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-white p-6 shadow-lg data-[state=open]:animate-scale-in data-[state=closed]:animate-scale-out rounded-lg dark:bg-neutral-900 dark:border-neutral-700",
|
|
567
|
+
{
|
|
568
|
+
variants: {},
|
|
569
|
+
defaultVariants: {}
|
|
570
|
+
}
|
|
571
|
+
);
|
|
572
|
+
var ModalContent = React39.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(ModalPortal, { children: [
|
|
573
|
+
/* @__PURE__ */ jsx(ModalOverlay, {}),
|
|
574
|
+
/* @__PURE__ */ jsx(
|
|
575
|
+
DialogPrimitive.Content,
|
|
576
|
+
{
|
|
577
|
+
ref,
|
|
578
|
+
className: cn(modalContentVariants(), className),
|
|
579
|
+
...props,
|
|
580
|
+
children
|
|
581
|
+
}
|
|
582
|
+
)
|
|
583
|
+
] }));
|
|
584
|
+
ModalContent.displayName = DialogPrimitive.Content.displayName;
|
|
585
|
+
var ModalHeader = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
586
|
+
"div",
|
|
587
|
+
{
|
|
588
|
+
ref,
|
|
589
|
+
className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className),
|
|
590
|
+
...props
|
|
591
|
+
}
|
|
592
|
+
));
|
|
593
|
+
ModalHeader.displayName = "ModalHeader";
|
|
594
|
+
var ModalBody = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
595
|
+
"div",
|
|
596
|
+
{
|
|
597
|
+
ref,
|
|
598
|
+
className: cn("text-neutral-700 dark:text-neutral-300", className),
|
|
599
|
+
...props
|
|
600
|
+
}
|
|
601
|
+
));
|
|
602
|
+
ModalBody.displayName = "ModalBody";
|
|
603
|
+
var ModalTitle = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
604
|
+
DialogPrimitive.Title,
|
|
605
|
+
{
|
|
606
|
+
ref,
|
|
607
|
+
className: cn("text-lg font-semibold leading-none tracking-tight text-neutral-900 dark:text-neutral-100", className),
|
|
608
|
+
...props
|
|
609
|
+
}
|
|
610
|
+
));
|
|
611
|
+
ModalTitle.displayName = DialogPrimitive.Title.displayName;
|
|
612
|
+
var ModalDescription = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
613
|
+
DialogPrimitive.Description,
|
|
614
|
+
{
|
|
615
|
+
ref,
|
|
616
|
+
className: cn("text-sm text-neutral-600 dark:text-neutral-400", className),
|
|
617
|
+
...props
|
|
618
|
+
}
|
|
619
|
+
));
|
|
620
|
+
ModalDescription.displayName = DialogPrimitive.Description.displayName;
|
|
621
|
+
var Drawer = DialogPrimitive.Root;
|
|
622
|
+
var DrawerTrigger = DialogPrimitive.Trigger;
|
|
623
|
+
var DrawerPortal = DialogPrimitive.Portal;
|
|
624
|
+
var DrawerClose = DialogPrimitive.Close;
|
|
625
|
+
var DrawerOverlay = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
626
|
+
DialogPrimitive.Overlay,
|
|
627
|
+
{
|
|
628
|
+
ref,
|
|
629
|
+
className: cn(
|
|
630
|
+
"fixed inset-0 z-50 bg-black/50 backdrop-blur-sm data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out",
|
|
631
|
+
className
|
|
632
|
+
),
|
|
633
|
+
...props
|
|
634
|
+
}
|
|
635
|
+
));
|
|
636
|
+
DrawerOverlay.displayName = DialogPrimitive.Overlay.displayName;
|
|
637
|
+
var drawerContentVariants = cva(
|
|
638
|
+
"fixed z-50 gap-4 bg-white p-6 shadow-lg dark:bg-neutral-900",
|
|
639
|
+
{
|
|
640
|
+
variants: {
|
|
641
|
+
side: {
|
|
642
|
+
left: "inset-y-0 left-0 h-full w-3/4 max-w-sm border-r data-[state=open]:animate-slide-in-from-left data-[state=closed]:animate-slide-out-to-left sm:max-w-md dark:border-neutral-700",
|
|
643
|
+
right: "inset-y-0 right-0 h-full w-3/4 max-w-sm border-l data-[state=open]:animate-slide-in-from-right data-[state=closed]:animate-slide-out-to-right sm:max-w-md dark:border-neutral-700"
|
|
644
|
+
}
|
|
645
|
+
},
|
|
646
|
+
defaultVariants: {
|
|
647
|
+
side: "right"
|
|
648
|
+
}
|
|
649
|
+
}
|
|
650
|
+
);
|
|
651
|
+
var DrawerContent = React39.forwardRef(({ side = "right", className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DrawerPortal, { children: [
|
|
652
|
+
/* @__PURE__ */ jsx(DrawerOverlay, {}),
|
|
653
|
+
/* @__PURE__ */ jsx(
|
|
654
|
+
DialogPrimitive.Content,
|
|
655
|
+
{
|
|
656
|
+
ref,
|
|
657
|
+
className: cn(drawerContentVariants({ side }), className),
|
|
658
|
+
...props,
|
|
659
|
+
children
|
|
660
|
+
}
|
|
661
|
+
)
|
|
662
|
+
] }));
|
|
663
|
+
DrawerContent.displayName = DialogPrimitive.Content.displayName;
|
|
664
|
+
var DrawerHeader = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
665
|
+
"div",
|
|
666
|
+
{
|
|
667
|
+
ref,
|
|
668
|
+
className: cn("flex flex-col space-y-2", className),
|
|
669
|
+
...props
|
|
670
|
+
}
|
|
671
|
+
));
|
|
672
|
+
DrawerHeader.displayName = "DrawerHeader";
|
|
673
|
+
var DrawerBody = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
674
|
+
"div",
|
|
675
|
+
{
|
|
676
|
+
ref,
|
|
677
|
+
className: cn("text-neutral-700 dark:text-neutral-300", className),
|
|
678
|
+
...props
|
|
679
|
+
}
|
|
680
|
+
));
|
|
681
|
+
DrawerBody.displayName = "DrawerBody";
|
|
682
|
+
var DrawerTitle = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
683
|
+
DialogPrimitive.Title,
|
|
684
|
+
{
|
|
685
|
+
ref,
|
|
686
|
+
className: cn("text-lg font-semibold text-neutral-900 dark:text-neutral-100", className),
|
|
687
|
+
...props
|
|
688
|
+
}
|
|
689
|
+
));
|
|
690
|
+
DrawerTitle.displayName = DialogPrimitive.Title.displayName;
|
|
691
|
+
var DrawerDescription = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
692
|
+
DialogPrimitive.Description,
|
|
693
|
+
{
|
|
694
|
+
ref,
|
|
695
|
+
className: cn("text-sm text-neutral-600 dark:text-neutral-400", className),
|
|
696
|
+
...props
|
|
697
|
+
}
|
|
698
|
+
));
|
|
699
|
+
DrawerDescription.displayName = DialogPrimitive.Description.displayName;
|
|
700
|
+
var Tabs = TabsPrimitive.Root;
|
|
701
|
+
var tabsListVariants = cva(
|
|
702
|
+
"inline-flex h-10 items-center justify-center rounded-md bg-neutral-100 p-1 text-neutral-600 dark:bg-neutral-800 dark:text-neutral-400",
|
|
703
|
+
{
|
|
704
|
+
variants: {},
|
|
705
|
+
defaultVariants: {}
|
|
706
|
+
}
|
|
707
|
+
);
|
|
708
|
+
var TabsList = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
709
|
+
TabsPrimitive.List,
|
|
710
|
+
{
|
|
711
|
+
ref,
|
|
712
|
+
className: cn(tabsListVariants(), className),
|
|
713
|
+
...props
|
|
714
|
+
}
|
|
715
|
+
));
|
|
716
|
+
TabsList.displayName = TabsPrimitive.List.displayName;
|
|
717
|
+
var tabsTriggerVariants = cva(
|
|
718
|
+
"inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-white transition-[background-color,box-shadow,color] duration-fast ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white data-[state=active]:text-neutral-900 data-[state=active]:shadow-sm dark:ring-offset-neutral-900 dark:focus-visible:ring-primary-400 dark:data-[state=active]:bg-neutral-900 dark:data-[state=active]:text-neutral-100",
|
|
719
|
+
{
|
|
720
|
+
variants: {},
|
|
721
|
+
defaultVariants: {}
|
|
722
|
+
}
|
|
723
|
+
);
|
|
724
|
+
var TabsTrigger = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
725
|
+
TabsPrimitive.Trigger,
|
|
726
|
+
{
|
|
727
|
+
ref,
|
|
728
|
+
className: cn(tabsTriggerVariants(), className),
|
|
729
|
+
...props
|
|
730
|
+
}
|
|
731
|
+
));
|
|
732
|
+
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
|
|
733
|
+
var tabsContentVariants = cva(
|
|
734
|
+
"mt-2 ring-offset-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 dark:ring-offset-neutral-900 dark:focus-visible:ring-primary-400",
|
|
735
|
+
{
|
|
736
|
+
variants: {},
|
|
737
|
+
defaultVariants: {}
|
|
738
|
+
}
|
|
739
|
+
);
|
|
740
|
+
var TabsContent = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
741
|
+
TabsPrimitive.Content,
|
|
742
|
+
{
|
|
743
|
+
ref,
|
|
744
|
+
className: cn(tabsContentVariants(), className),
|
|
745
|
+
...props
|
|
746
|
+
}
|
|
747
|
+
));
|
|
748
|
+
TabsContent.displayName = TabsPrimitive.Content.displayName;
|
|
749
|
+
var dataCardVariants = cva(
|
|
750
|
+
"rounded-lg border bg-white p-6 shadow-sm dark:bg-neutral-900 dark:border-neutral-700",
|
|
751
|
+
{
|
|
752
|
+
variants: {},
|
|
753
|
+
defaultVariants: {}
|
|
754
|
+
}
|
|
755
|
+
);
|
|
756
|
+
var DataCard = React39.forwardRef(
|
|
757
|
+
({ className, value, label, description, trend, trendDirection, ...props }, ref) => {
|
|
758
|
+
const trendColorClass = trendDirection === "up" ? "text-green-600 dark:text-green-400" : trendDirection === "down" ? "text-red-600 dark:text-red-400" : "text-neutral-600 dark:text-neutral-400";
|
|
759
|
+
return /* @__PURE__ */ jsx(
|
|
760
|
+
"div",
|
|
761
|
+
{
|
|
762
|
+
ref,
|
|
763
|
+
className: cn(dataCardVariants(), className),
|
|
764
|
+
...props,
|
|
765
|
+
children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-2", children: [
|
|
766
|
+
/* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-neutral-600 dark:text-neutral-400", children: label }),
|
|
767
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2", children: [
|
|
768
|
+
/* @__PURE__ */ jsx("p", { className: "text-3xl font-bold text-neutral-900 dark:text-neutral-100", children: value }),
|
|
769
|
+
trend && /* @__PURE__ */ jsx("span", { className: cn("text-sm font-medium", trendColorClass), children: trend })
|
|
770
|
+
] }),
|
|
771
|
+
description && /* @__PURE__ */ jsx("p", { className: "text-sm text-neutral-500 dark:text-neutral-500", children: description })
|
|
772
|
+
] })
|
|
773
|
+
}
|
|
774
|
+
);
|
|
775
|
+
}
|
|
776
|
+
);
|
|
777
|
+
DataCard.displayName = "DataCard";
|
|
778
|
+
var dataTableVariants = cva(
|
|
779
|
+
"w-full caption-bottom text-sm border-collapse",
|
|
780
|
+
{
|
|
781
|
+
variants: {},
|
|
782
|
+
defaultVariants: {}
|
|
783
|
+
}
|
|
784
|
+
);
|
|
785
|
+
var DataTable = React39.forwardRef(
|
|
786
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsx(
|
|
787
|
+
"table",
|
|
788
|
+
{
|
|
789
|
+
ref,
|
|
790
|
+
className: cn(dataTableVariants(), className),
|
|
791
|
+
...props
|
|
792
|
+
}
|
|
793
|
+
) })
|
|
794
|
+
);
|
|
795
|
+
DataTable.displayName = "DataTable";
|
|
796
|
+
var DataTableHeader = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn("[&_tr]:border-b", className), ...props }));
|
|
797
|
+
DataTableHeader.displayName = "DataTableHeader";
|
|
798
|
+
var DataTableBody = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
799
|
+
"tbody",
|
|
800
|
+
{
|
|
801
|
+
ref,
|
|
802
|
+
className: cn("[&_tr:last-child]:border-0", className),
|
|
803
|
+
...props
|
|
804
|
+
}
|
|
805
|
+
));
|
|
806
|
+
DataTableBody.displayName = "DataTableBody";
|
|
807
|
+
var DataTableFooter = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
808
|
+
"tfoot",
|
|
809
|
+
{
|
|
810
|
+
ref,
|
|
811
|
+
className: cn("border-t bg-neutral-50 font-medium dark:bg-neutral-800", className),
|
|
812
|
+
...props
|
|
813
|
+
}
|
|
814
|
+
));
|
|
815
|
+
DataTableFooter.displayName = "DataTableFooter";
|
|
816
|
+
var DataTableRow = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
817
|
+
"tr",
|
|
818
|
+
{
|
|
819
|
+
ref,
|
|
820
|
+
className: cn(
|
|
821
|
+
"border-b border-neutral-200 transition-colors hover:bg-neutral-50 data-[state=selected]:bg-neutral-100 dark:border-neutral-700 dark:hover:bg-neutral-800 dark:data-[state=selected]:bg-neutral-800",
|
|
822
|
+
className
|
|
823
|
+
),
|
|
824
|
+
...props
|
|
825
|
+
}
|
|
826
|
+
));
|
|
827
|
+
DataTableRow.displayName = "DataTableRow";
|
|
828
|
+
var DataTableHead = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
829
|
+
"th",
|
|
830
|
+
{
|
|
831
|
+
ref,
|
|
832
|
+
className: cn(
|
|
833
|
+
"h-12 px-4 text-left align-middle font-medium text-neutral-600 dark:text-neutral-400 [&:has([role=checkbox])]:pr-0",
|
|
834
|
+
className
|
|
835
|
+
),
|
|
836
|
+
...props
|
|
837
|
+
}
|
|
838
|
+
));
|
|
839
|
+
DataTableHead.displayName = "DataTableHead";
|
|
840
|
+
var DataTableCell = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
841
|
+
"td",
|
|
842
|
+
{
|
|
843
|
+
ref,
|
|
844
|
+
className: cn("p-4 align-middle text-neutral-900 dark:text-neutral-100 [&:has([role=checkbox])]:pr-0", className),
|
|
845
|
+
...props
|
|
846
|
+
}
|
|
847
|
+
));
|
|
848
|
+
DataTableCell.displayName = "DataTableCell";
|
|
849
|
+
var statVariants = cva(
|
|
850
|
+
"flex flex-col space-y-1",
|
|
851
|
+
{
|
|
852
|
+
variants: {},
|
|
853
|
+
defaultVariants: {}
|
|
854
|
+
}
|
|
855
|
+
);
|
|
856
|
+
var Stat = React39.forwardRef(
|
|
857
|
+
({ className, value, label, ...props }, ref) => /* @__PURE__ */ jsxs(
|
|
858
|
+
"div",
|
|
859
|
+
{
|
|
860
|
+
ref,
|
|
861
|
+
className: cn(statVariants(), className),
|
|
862
|
+
...props,
|
|
863
|
+
children: [
|
|
864
|
+
/* @__PURE__ */ jsx("p", { className: "text-2xl font-bold text-neutral-900 dark:text-neutral-100", children: value }),
|
|
865
|
+
/* @__PURE__ */ jsx("p", { className: "text-sm text-neutral-600 dark:text-neutral-400", children: label })
|
|
866
|
+
]
|
|
867
|
+
}
|
|
868
|
+
)
|
|
869
|
+
);
|
|
870
|
+
Stat.displayName = "Stat";
|
|
871
|
+
var productCardVariants = cva(
|
|
872
|
+
"rounded-lg border bg-white overflow-hidden shadow-sm transition-[box-shadow,transform] duration-fast ease-out hover:shadow-md dark:bg-neutral-900 dark:border-neutral-700",
|
|
873
|
+
{
|
|
874
|
+
variants: {},
|
|
875
|
+
defaultVariants: {}
|
|
876
|
+
}
|
|
877
|
+
);
|
|
878
|
+
var ProductCard = React39.forwardRef(
|
|
879
|
+
({ className, image, title, price, description, action, imageAlt, ...props }, ref) => /* @__PURE__ */ jsxs(
|
|
880
|
+
"div",
|
|
881
|
+
{
|
|
882
|
+
ref,
|
|
883
|
+
className: cn(productCardVariants(), className),
|
|
884
|
+
...props,
|
|
885
|
+
children: [
|
|
886
|
+
/* @__PURE__ */ jsx("div", { className: "aspect-square overflow-hidden bg-neutral-100 dark:bg-neutral-800", children: /* @__PURE__ */ jsx(
|
|
887
|
+
"img",
|
|
888
|
+
{
|
|
889
|
+
src: image,
|
|
890
|
+
alt: imageAlt || title,
|
|
891
|
+
className: "h-full w-full object-cover transition-transform hover:scale-105"
|
|
892
|
+
}
|
|
893
|
+
) }),
|
|
894
|
+
/* @__PURE__ */ jsxs("div", { className: "p-4 space-y-2", children: [
|
|
895
|
+
/* @__PURE__ */ jsx("h3", { className: "font-semibold text-lg text-neutral-900 dark:text-neutral-100 line-clamp-1", children: title }),
|
|
896
|
+
description && /* @__PURE__ */ jsx("p", { className: "text-sm text-neutral-600 dark:text-neutral-400 line-clamp-2", children: description }),
|
|
897
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between pt-2", children: [
|
|
898
|
+
/* @__PURE__ */ jsx("p", { className: "text-xl font-bold text-neutral-900 dark:text-neutral-100", children: price }),
|
|
899
|
+
action && /* @__PURE__ */ jsx("div", { children: action })
|
|
900
|
+
] })
|
|
901
|
+
] })
|
|
902
|
+
]
|
|
903
|
+
}
|
|
904
|
+
)
|
|
905
|
+
);
|
|
906
|
+
ProductCard.displayName = "ProductCard";
|
|
907
|
+
var cartItemVariants = cva(
|
|
908
|
+
"flex gap-4 p-4 border-b bg-white dark:bg-neutral-900 dark:border-neutral-700",
|
|
909
|
+
{
|
|
910
|
+
variants: {},
|
|
911
|
+
defaultVariants: {}
|
|
912
|
+
}
|
|
913
|
+
);
|
|
914
|
+
var CartItem = React39.forwardRef(
|
|
915
|
+
({
|
|
916
|
+
className,
|
|
917
|
+
image,
|
|
918
|
+
title,
|
|
919
|
+
price,
|
|
920
|
+
quantity,
|
|
921
|
+
variant,
|
|
922
|
+
imageAlt,
|
|
923
|
+
onRemove,
|
|
924
|
+
onQuantityChange,
|
|
925
|
+
...props
|
|
926
|
+
}, ref) => /* @__PURE__ */ jsxs(
|
|
927
|
+
"div",
|
|
928
|
+
{
|
|
929
|
+
ref,
|
|
930
|
+
className: cn(cartItemVariants(), className),
|
|
931
|
+
...props,
|
|
932
|
+
children: [
|
|
933
|
+
/* @__PURE__ */ jsx("div", { className: "h-20 w-20 flex-shrink-0 overflow-hidden rounded-md bg-neutral-100 dark:bg-neutral-800", children: /* @__PURE__ */ jsx(
|
|
934
|
+
"img",
|
|
935
|
+
{
|
|
936
|
+
src: image,
|
|
937
|
+
alt: imageAlt || title,
|
|
938
|
+
className: "h-full w-full object-cover"
|
|
939
|
+
}
|
|
940
|
+
) }),
|
|
941
|
+
/* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col justify-between", children: [
|
|
942
|
+
/* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
|
|
943
|
+
/* @__PURE__ */ jsxs("div", { children: [
|
|
944
|
+
/* @__PURE__ */ jsx("h4", { className: "font-medium text-neutral-900 dark:text-neutral-100", children: title }),
|
|
945
|
+
variant && /* @__PURE__ */ jsx("p", { className: "text-sm text-neutral-600 dark:text-neutral-400", children: variant })
|
|
946
|
+
] }),
|
|
947
|
+
/* @__PURE__ */ jsx("p", { className: "font-semibold text-neutral-900 dark:text-neutral-100", children: price })
|
|
948
|
+
] }),
|
|
949
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
|
|
950
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
|
|
951
|
+
/* @__PURE__ */ jsxs("span", { className: "text-sm text-neutral-600 dark:text-neutral-400", children: [
|
|
952
|
+
"Qty: ",
|
|
953
|
+
quantity
|
|
954
|
+
] }),
|
|
955
|
+
onQuantityChange && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
|
|
956
|
+
/* @__PURE__ */ jsx(
|
|
957
|
+
"button",
|
|
958
|
+
{
|
|
959
|
+
onClick: () => onQuantityChange(Math.max(1, quantity - 1)),
|
|
960
|
+
className: "h-6 w-6 cursor-pointer rounded-md border border-neutral-300 transition-colors hover:bg-neutral-100 dark:border-neutral-600 dark:hover:bg-neutral-800",
|
|
961
|
+
"aria-label": "Decrease quantity",
|
|
962
|
+
children: "-"
|
|
963
|
+
}
|
|
964
|
+
),
|
|
965
|
+
/* @__PURE__ */ jsx(
|
|
966
|
+
"button",
|
|
967
|
+
{
|
|
968
|
+
onClick: () => onQuantityChange(quantity + 1),
|
|
969
|
+
className: "h-6 w-6 cursor-pointer rounded-md border border-neutral-300 transition-colors hover:bg-neutral-100 dark:border-neutral-600 dark:hover:bg-neutral-800",
|
|
970
|
+
"aria-label": "Increase quantity",
|
|
971
|
+
children: "+"
|
|
972
|
+
}
|
|
973
|
+
)
|
|
974
|
+
] })
|
|
975
|
+
] }),
|
|
976
|
+
onRemove && /* @__PURE__ */ jsx(
|
|
977
|
+
"button",
|
|
978
|
+
{
|
|
979
|
+
onClick: onRemove,
|
|
980
|
+
className: "cursor-pointer text-sm text-red-600 transition-colors hover:text-red-700 dark:text-red-400 dark:hover:text-red-300",
|
|
981
|
+
children: "Remove"
|
|
982
|
+
}
|
|
983
|
+
)
|
|
984
|
+
] })
|
|
985
|
+
] })
|
|
986
|
+
]
|
|
987
|
+
}
|
|
988
|
+
)
|
|
989
|
+
);
|
|
990
|
+
CartItem.displayName = "CartItem";
|
|
991
|
+
var priceTagVariants = cva(
|
|
992
|
+
"inline-flex items-center gap-2",
|
|
993
|
+
{
|
|
994
|
+
variants: {
|
|
995
|
+
size: {
|
|
996
|
+
sm: "text-sm",
|
|
997
|
+
md: "text-base",
|
|
998
|
+
lg: "text-xl"
|
|
999
|
+
}
|
|
1000
|
+
},
|
|
1001
|
+
defaultVariants: {
|
|
1002
|
+
size: "md"
|
|
1003
|
+
}
|
|
1004
|
+
}
|
|
1005
|
+
);
|
|
1006
|
+
var PriceTag = React39.forwardRef(
|
|
1007
|
+
({ className, price, originalPrice, discountPercent, size, ...props }, ref) => /* @__PURE__ */ jsxs(
|
|
1008
|
+
"div",
|
|
1009
|
+
{
|
|
1010
|
+
ref,
|
|
1011
|
+
className: cn(priceTagVariants({ size }), className),
|
|
1012
|
+
...props,
|
|
1013
|
+
children: [
|
|
1014
|
+
/* @__PURE__ */ jsx("span", { className: "font-bold text-neutral-900 dark:text-neutral-100", children: price }),
|
|
1015
|
+
originalPrice && /* @__PURE__ */ jsx("span", { className: "text-sm line-through text-neutral-500 dark:text-neutral-400", children: originalPrice }),
|
|
1016
|
+
discountPercent && /* @__PURE__ */ jsxs("span", { className: "text-sm font-medium text-green-600 dark:text-green-400", children: [
|
|
1017
|
+
"Save ",
|
|
1018
|
+
discountPercent
|
|
1019
|
+
] })
|
|
1020
|
+
]
|
|
1021
|
+
}
|
|
1022
|
+
)
|
|
1023
|
+
);
|
|
1024
|
+
PriceTag.displayName = "PriceTag";
|
|
1025
|
+
var quantitySelectorVariants = cva(
|
|
1026
|
+
"inline-flex items-center border rounded-md bg-white dark:bg-neutral-900 dark:border-neutral-700",
|
|
1027
|
+
{
|
|
1028
|
+
variants: {
|
|
1029
|
+
size: {
|
|
1030
|
+
sm: "h-8",
|
|
1031
|
+
md: "h-10",
|
|
1032
|
+
lg: "h-12"
|
|
1033
|
+
}
|
|
1034
|
+
},
|
|
1035
|
+
defaultVariants: {
|
|
1036
|
+
size: "md"
|
|
1037
|
+
}
|
|
1038
|
+
}
|
|
1039
|
+
);
|
|
1040
|
+
var QuantitySelector = React39.forwardRef(
|
|
1041
|
+
({ className, value, min = 1, max = 99, size, onChange, ...props }, ref) => {
|
|
1042
|
+
const handleDecrement = () => {
|
|
1043
|
+
const newValue = Math.max(min, value - 1);
|
|
1044
|
+
onChange?.(newValue);
|
|
1045
|
+
};
|
|
1046
|
+
const handleIncrement = () => {
|
|
1047
|
+
const newValue = Math.min(max, value + 1);
|
|
1048
|
+
onChange?.(newValue);
|
|
1049
|
+
};
|
|
1050
|
+
const handleInputChange = (e) => {
|
|
1051
|
+
const newValue = parseInt(e.target.value, 10);
|
|
1052
|
+
if (!isNaN(newValue) && newValue >= min && newValue <= max) {
|
|
1053
|
+
onChange?.(newValue);
|
|
1054
|
+
}
|
|
1055
|
+
};
|
|
1056
|
+
const buttonClass = cn(
|
|
1057
|
+
"cursor-pointer px-3 font-medium transition-colors hover:bg-neutral-100 disabled:opacity-50 disabled:cursor-not-allowed dark:hover:bg-neutral-800 dark:text-neutral-100",
|
|
1058
|
+
size === "sm" && "text-sm",
|
|
1059
|
+
size === "md" && "text-base",
|
|
1060
|
+
size === "lg" && "text-lg"
|
|
1061
|
+
);
|
|
1062
|
+
const inputClass = cn(
|
|
1063
|
+
"w-12 text-center border-x bg-transparent font-medium text-neutral-900 dark:text-neutral-100 dark:border-neutral-700 focus:outline-none",
|
|
1064
|
+
size === "sm" && "text-sm",
|
|
1065
|
+
size === "md" && "text-base",
|
|
1066
|
+
size === "lg" && "text-lg"
|
|
1067
|
+
);
|
|
1068
|
+
return /* @__PURE__ */ jsxs(
|
|
1069
|
+
"div",
|
|
1070
|
+
{
|
|
1071
|
+
ref,
|
|
1072
|
+
className: cn(quantitySelectorVariants({ size }), className),
|
|
1073
|
+
...props,
|
|
1074
|
+
children: [
|
|
1075
|
+
/* @__PURE__ */ jsx(
|
|
1076
|
+
"button",
|
|
1077
|
+
{
|
|
1078
|
+
type: "button",
|
|
1079
|
+
onClick: handleDecrement,
|
|
1080
|
+
disabled: value <= min,
|
|
1081
|
+
className: buttonClass,
|
|
1082
|
+
"aria-label": "Decrease quantity",
|
|
1083
|
+
children: "-"
|
|
1084
|
+
}
|
|
1085
|
+
),
|
|
1086
|
+
/* @__PURE__ */ jsx(
|
|
1087
|
+
"input",
|
|
1088
|
+
{
|
|
1089
|
+
type: "number",
|
|
1090
|
+
value,
|
|
1091
|
+
onChange: handleInputChange,
|
|
1092
|
+
min,
|
|
1093
|
+
max,
|
|
1094
|
+
className: inputClass,
|
|
1095
|
+
"aria-label": "Quantity"
|
|
1096
|
+
}
|
|
1097
|
+
),
|
|
1098
|
+
/* @__PURE__ */ jsx(
|
|
1099
|
+
"button",
|
|
1100
|
+
{
|
|
1101
|
+
type: "button",
|
|
1102
|
+
onClick: handleIncrement,
|
|
1103
|
+
disabled: value >= max,
|
|
1104
|
+
className: buttonClass,
|
|
1105
|
+
"aria-label": "Increase quantity",
|
|
1106
|
+
children: "+"
|
|
1107
|
+
}
|
|
1108
|
+
)
|
|
1109
|
+
]
|
|
1110
|
+
}
|
|
1111
|
+
);
|
|
1112
|
+
}
|
|
1113
|
+
);
|
|
1114
|
+
QuantitySelector.displayName = "QuantitySelector";
|
|
1115
|
+
var heroVariants = cva(
|
|
1116
|
+
"relative flex flex-col items-center justify-center px-4 py-20 text-center bg-gradient-to-b from-neutral-50 to-white dark:from-neutral-900 dark:to-neutral-800",
|
|
1117
|
+
{
|
|
1118
|
+
variants: {},
|
|
1119
|
+
defaultVariants: {}
|
|
1120
|
+
}
|
|
1121
|
+
);
|
|
1122
|
+
var Hero = React39.forwardRef(
|
|
1123
|
+
({
|
|
1124
|
+
className,
|
|
1125
|
+
title,
|
|
1126
|
+
subtitle,
|
|
1127
|
+
primaryCta,
|
|
1128
|
+
secondaryCta,
|
|
1129
|
+
backgroundImage,
|
|
1130
|
+
...props
|
|
1131
|
+
}, ref) => /* @__PURE__ */ jsx(
|
|
1132
|
+
"div",
|
|
1133
|
+
{
|
|
1134
|
+
ref,
|
|
1135
|
+
className: cn(heroVariants(), className),
|
|
1136
|
+
style: backgroundImage ? {
|
|
1137
|
+
backgroundImage: `linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(${backgroundImage})`,
|
|
1138
|
+
backgroundSize: "cover",
|
|
1139
|
+
backgroundPosition: "center"
|
|
1140
|
+
} : void 0,
|
|
1141
|
+
...props,
|
|
1142
|
+
children: /* @__PURE__ */ jsxs("div", { className: "max-w-4xl space-y-6", children: [
|
|
1143
|
+
/* @__PURE__ */ jsx(
|
|
1144
|
+
"h1",
|
|
1145
|
+
{
|
|
1146
|
+
className: cn(
|
|
1147
|
+
"text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl",
|
|
1148
|
+
backgroundImage ? "text-white" : "text-neutral-900 dark:text-neutral-100"
|
|
1149
|
+
),
|
|
1150
|
+
children: title
|
|
1151
|
+
}
|
|
1152
|
+
),
|
|
1153
|
+
subtitle && /* @__PURE__ */ jsx(
|
|
1154
|
+
"p",
|
|
1155
|
+
{
|
|
1156
|
+
className: cn(
|
|
1157
|
+
"text-lg sm:text-xl md:text-2xl max-w-2xl mx-auto",
|
|
1158
|
+
backgroundImage ? "text-neutral-100" : "text-neutral-600 dark:text-neutral-400"
|
|
1159
|
+
),
|
|
1160
|
+
children: subtitle
|
|
1161
|
+
}
|
|
1162
|
+
),
|
|
1163
|
+
(primaryCta || secondaryCta) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row gap-4 justify-center pt-4", children: [
|
|
1164
|
+
primaryCta && /* @__PURE__ */ jsx(
|
|
1165
|
+
"a",
|
|
1166
|
+
{
|
|
1167
|
+
href: primaryCta.href,
|
|
1168
|
+
onClick: primaryCta.onClick,
|
|
1169
|
+
className: "inline-flex items-center justify-center px-8 py-3 text-base font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700 transition-colors dark:bg-primary-700 dark:hover:bg-primary-600",
|
|
1170
|
+
children: primaryCta.label
|
|
1171
|
+
}
|
|
1172
|
+
),
|
|
1173
|
+
secondaryCta && /* @__PURE__ */ jsx(
|
|
1174
|
+
"a",
|
|
1175
|
+
{
|
|
1176
|
+
href: secondaryCta.href,
|
|
1177
|
+
onClick: secondaryCta.onClick,
|
|
1178
|
+
className: cn(
|
|
1179
|
+
"inline-flex items-center justify-center px-8 py-3 text-base font-medium rounded-md transition-colors",
|
|
1180
|
+
backgroundImage ? "text-white border-2 border-white hover:bg-white/10" : "text-neutral-900 border-2 border-neutral-300 hover:bg-neutral-100 dark:text-neutral-100 dark:border-neutral-600 dark:hover:bg-neutral-800"
|
|
1181
|
+
),
|
|
1182
|
+
children: secondaryCta.label
|
|
1183
|
+
}
|
|
1184
|
+
)
|
|
1185
|
+
] })
|
|
1186
|
+
] })
|
|
1187
|
+
}
|
|
1188
|
+
)
|
|
1189
|
+
);
|
|
1190
|
+
Hero.displayName = "Hero";
|
|
1191
|
+
var featureGridVariants = cva(
|
|
1192
|
+
"grid gap-8 py-12",
|
|
1193
|
+
{
|
|
1194
|
+
variants: {
|
|
1195
|
+
columns: {
|
|
1196
|
+
2: "grid-cols-1 md:grid-cols-2",
|
|
1197
|
+
3: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
|
|
1198
|
+
4: "grid-cols-1 md:grid-cols-2 lg:grid-cols-4"
|
|
1199
|
+
}
|
|
1200
|
+
},
|
|
1201
|
+
defaultVariants: {
|
|
1202
|
+
columns: 3
|
|
1203
|
+
}
|
|
1204
|
+
}
|
|
1205
|
+
);
|
|
1206
|
+
var FeatureGrid = React39.forwardRef(
|
|
1207
|
+
({ className, columns, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
1208
|
+
"div",
|
|
1209
|
+
{
|
|
1210
|
+
ref,
|
|
1211
|
+
className: cn(featureGridVariants({ columns }), className),
|
|
1212
|
+
...props
|
|
1213
|
+
}
|
|
1214
|
+
)
|
|
1215
|
+
);
|
|
1216
|
+
FeatureGrid.displayName = "FeatureGrid";
|
|
1217
|
+
var featureCardVariants = cva(
|
|
1218
|
+
"flex flex-col items-center text-center space-y-4 p-6 rounded-lg bg-white border border-neutral-200 dark:bg-neutral-900 dark:border-neutral-700",
|
|
1219
|
+
{
|
|
1220
|
+
variants: {},
|
|
1221
|
+
defaultVariants: {}
|
|
1222
|
+
}
|
|
1223
|
+
);
|
|
1224
|
+
var FeatureCard = React39.forwardRef(
|
|
1225
|
+
({ className, icon, title, description, ...props }, ref) => /* @__PURE__ */ jsxs(
|
|
1226
|
+
"div",
|
|
1227
|
+
{
|
|
1228
|
+
ref,
|
|
1229
|
+
className: cn(featureCardVariants(), className),
|
|
1230
|
+
...props,
|
|
1231
|
+
children: [
|
|
1232
|
+
icon && /* @__PURE__ */ jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-lg bg-primary-100 text-primary-600 dark:bg-primary-900 dark:text-primary-400", children: icon }),
|
|
1233
|
+
/* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
|
|
1234
|
+
/* @__PURE__ */ jsx("h3", { className: "text-xl font-semibold text-neutral-900 dark:text-neutral-100", children: title }),
|
|
1235
|
+
/* @__PURE__ */ jsx("p", { className: "text-neutral-600 dark:text-neutral-400", children: description })
|
|
1236
|
+
] })
|
|
1237
|
+
]
|
|
1238
|
+
}
|
|
1239
|
+
)
|
|
1240
|
+
);
|
|
1241
|
+
FeatureCard.displayName = "FeatureCard";
|
|
1242
|
+
var ctaVariants = cva(
|
|
1243
|
+
"relative overflow-hidden rounded-lg px-6 py-16 text-center",
|
|
1244
|
+
{
|
|
1245
|
+
variants: {
|
|
1246
|
+
variant: {
|
|
1247
|
+
default: "bg-neutral-100 dark:bg-neutral-800",
|
|
1248
|
+
primary: "bg-primary-600 text-white dark:bg-primary-700",
|
|
1249
|
+
gradient: "bg-gradient-to-r from-primary-600 to-primary-800 text-white"
|
|
1250
|
+
}
|
|
1251
|
+
},
|
|
1252
|
+
defaultVariants: {
|
|
1253
|
+
variant: "default"
|
|
1254
|
+
}
|
|
1255
|
+
}
|
|
1256
|
+
);
|
|
1257
|
+
var CTA = React39.forwardRef(
|
|
1258
|
+
({
|
|
1259
|
+
className,
|
|
1260
|
+
variant,
|
|
1261
|
+
title,
|
|
1262
|
+
description,
|
|
1263
|
+
buttonText,
|
|
1264
|
+
buttonHref,
|
|
1265
|
+
onButtonClick,
|
|
1266
|
+
secondaryAction,
|
|
1267
|
+
...props
|
|
1268
|
+
}, ref) => {
|
|
1269
|
+
const isColoredVariant = variant === "primary" || variant === "gradient";
|
|
1270
|
+
return /* @__PURE__ */ jsx(
|
|
1271
|
+
"div",
|
|
1272
|
+
{
|
|
1273
|
+
ref,
|
|
1274
|
+
className: cn(ctaVariants({ variant }), className),
|
|
1275
|
+
...props,
|
|
1276
|
+
children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-2xl space-y-6", children: [
|
|
1277
|
+
/* @__PURE__ */ jsx(
|
|
1278
|
+
"h2",
|
|
1279
|
+
{
|
|
1280
|
+
className: cn(
|
|
1281
|
+
"text-3xl font-bold tracking-tight sm:text-4xl",
|
|
1282
|
+
isColoredVariant ? "text-white" : "text-neutral-900 dark:text-neutral-100"
|
|
1283
|
+
),
|
|
1284
|
+
children: title
|
|
1285
|
+
}
|
|
1286
|
+
),
|
|
1287
|
+
description && /* @__PURE__ */ jsx(
|
|
1288
|
+
"p",
|
|
1289
|
+
{
|
|
1290
|
+
className: cn(
|
|
1291
|
+
"text-lg",
|
|
1292
|
+
isColoredVariant ? "text-white/90" : "text-neutral-600 dark:text-neutral-400"
|
|
1293
|
+
),
|
|
1294
|
+
children: description
|
|
1295
|
+
}
|
|
1296
|
+
),
|
|
1297
|
+
/* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row gap-4 justify-center pt-4", children: [
|
|
1298
|
+
/* @__PURE__ */ jsx(
|
|
1299
|
+
"a",
|
|
1300
|
+
{
|
|
1301
|
+
href: buttonHref,
|
|
1302
|
+
onClick: onButtonClick,
|
|
1303
|
+
className: cn(
|
|
1304
|
+
"inline-flex items-center justify-center px-8 py-3 text-base font-medium rounded-md transition-colors",
|
|
1305
|
+
isColoredVariant ? "bg-white text-primary-600 hover:bg-neutral-100" : "bg-primary-600 text-white hover:bg-primary-700 dark:bg-primary-700 dark:hover:bg-primary-600"
|
|
1306
|
+
),
|
|
1307
|
+
children: buttonText
|
|
1308
|
+
}
|
|
1309
|
+
),
|
|
1310
|
+
secondaryAction && /* @__PURE__ */ jsx("div", { children: secondaryAction })
|
|
1311
|
+
] })
|
|
1312
|
+
] })
|
|
1313
|
+
}
|
|
1314
|
+
);
|
|
1315
|
+
}
|
|
1316
|
+
);
|
|
1317
|
+
CTA.displayName = "CTA";
|
|
1318
|
+
var testimonialVariants = cva(
|
|
1319
|
+
"rounded-lg border bg-white p-6 shadow-sm dark:bg-neutral-900 dark:border-neutral-700",
|
|
1320
|
+
{
|
|
1321
|
+
variants: {},
|
|
1322
|
+
defaultVariants: {}
|
|
1323
|
+
}
|
|
1324
|
+
);
|
|
1325
|
+
var Testimonial = React39.forwardRef(
|
|
1326
|
+
({ className, quote, author, role, company, avatar, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
1327
|
+
"div",
|
|
1328
|
+
{
|
|
1329
|
+
ref,
|
|
1330
|
+
className: cn(testimonialVariants(), className),
|
|
1331
|
+
...props,
|
|
1332
|
+
children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
|
|
1333
|
+
/* @__PURE__ */ jsx("div", { className: "flex items-start gap-1 text-primary-600 dark:text-primary-400", children: /* @__PURE__ */ jsx(
|
|
1334
|
+
"svg",
|
|
1335
|
+
{
|
|
1336
|
+
className: "h-6 w-6",
|
|
1337
|
+
fill: "currentColor",
|
|
1338
|
+
viewBox: "0 0 24 24",
|
|
1339
|
+
"aria-hidden": "true",
|
|
1340
|
+
children: /* @__PURE__ */ jsx("path", { d: "M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z" })
|
|
1341
|
+
}
|
|
1342
|
+
) }),
|
|
1343
|
+
/* @__PURE__ */ jsx("blockquote", { className: "text-lg text-neutral-900 dark:text-neutral-100", children: quote }),
|
|
1344
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 pt-2", children: [
|
|
1345
|
+
avatar && /* @__PURE__ */ jsx("div", { className: "h-12 w-12 overflow-hidden rounded-full bg-neutral-200 dark:bg-neutral-700", children: /* @__PURE__ */ jsx(
|
|
1346
|
+
"img",
|
|
1347
|
+
{
|
|
1348
|
+
src: avatar,
|
|
1349
|
+
alt: author,
|
|
1350
|
+
className: "h-full w-full object-cover"
|
|
1351
|
+
}
|
|
1352
|
+
) }),
|
|
1353
|
+
/* @__PURE__ */ jsxs("div", { children: [
|
|
1354
|
+
/* @__PURE__ */ jsx("p", { className: "font-semibold text-neutral-900 dark:text-neutral-100", children: author }),
|
|
1355
|
+
(role || company) && /* @__PURE__ */ jsxs("p", { className: "text-sm text-neutral-600 dark:text-neutral-400", children: [
|
|
1356
|
+
role,
|
|
1357
|
+
role && company && ", ",
|
|
1358
|
+
company
|
|
1359
|
+
] })
|
|
1360
|
+
] })
|
|
1361
|
+
] })
|
|
1362
|
+
] })
|
|
1363
|
+
}
|
|
1364
|
+
)
|
|
1365
|
+
);
|
|
1366
|
+
Testimonial.displayName = "Testimonial";
|
|
1367
|
+
var formVariants = cva(
|
|
1368
|
+
"flex w-full flex-col gap-4",
|
|
1369
|
+
{
|
|
1370
|
+
variants: {},
|
|
1371
|
+
defaultVariants: {}
|
|
1372
|
+
}
|
|
1373
|
+
);
|
|
1374
|
+
var Form = React39.forwardRef(
|
|
1375
|
+
({ className, style, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
1376
|
+
"form",
|
|
1377
|
+
{
|
|
1378
|
+
ref,
|
|
1379
|
+
className: cn(formVariants(), className),
|
|
1380
|
+
style: { display: "flex", flexDirection: "column", gap: "1rem", ...style },
|
|
1381
|
+
...props
|
|
1382
|
+
}
|
|
1383
|
+
)
|
|
1384
|
+
);
|
|
1385
|
+
Form.displayName = "Form";
|
|
1386
|
+
var formFieldVariants = cva(
|
|
1387
|
+
"space-y-2",
|
|
1388
|
+
{
|
|
1389
|
+
variants: {},
|
|
1390
|
+
defaultVariants: {}
|
|
1391
|
+
}
|
|
1392
|
+
);
|
|
1393
|
+
var FormField = React39.forwardRef(
|
|
1394
|
+
({ className, label, name, error, helperText, required, children, ...props }, ref) => /* @__PURE__ */ jsxs(
|
|
1395
|
+
"div",
|
|
1396
|
+
{
|
|
1397
|
+
ref,
|
|
1398
|
+
className: cn(formFieldVariants(), className),
|
|
1399
|
+
...props,
|
|
1400
|
+
children: [
|
|
1401
|
+
/* @__PURE__ */ jsxs(
|
|
1402
|
+
"label",
|
|
1403
|
+
{
|
|
1404
|
+
htmlFor: name,
|
|
1405
|
+
className: "block text-sm font-medium text-neutral-900 dark:text-neutral-100",
|
|
1406
|
+
children: [
|
|
1407
|
+
label,
|
|
1408
|
+
required && /* @__PURE__ */ jsx("span", { className: "text-red-600 ml-1", children: "*" })
|
|
1409
|
+
]
|
|
1410
|
+
}
|
|
1411
|
+
),
|
|
1412
|
+
children,
|
|
1413
|
+
helperText && !error && /* @__PURE__ */ jsx("p", { className: "text-sm text-neutral-600 dark:text-neutral-400", children: helperText }),
|
|
1414
|
+
error && /* @__PURE__ */ jsx("p", { className: "text-sm text-red-600 dark:text-red-400", children: error })
|
|
1415
|
+
]
|
|
1416
|
+
}
|
|
1417
|
+
)
|
|
1418
|
+
);
|
|
1419
|
+
FormField.displayName = "FormField";
|
|
1420
|
+
var Select = SelectPrimitive.Root;
|
|
1421
|
+
var SelectGroup = SelectPrimitive.Group;
|
|
1422
|
+
var SelectValue = SelectPrimitive.Value;
|
|
1423
|
+
var selectTriggerVariants = cva(
|
|
1424
|
+
"flex h-10 w-full items-center justify-between rounded-md border border-neutral-300 bg-white px-3 py-2 text-sm transition-colors placeholder:text-neutral-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-600 dark:bg-neutral-900 dark:text-neutral-100 dark:placeholder:text-neutral-400",
|
|
1425
|
+
{
|
|
1426
|
+
variants: {},
|
|
1427
|
+
defaultVariants: {}
|
|
1428
|
+
}
|
|
1429
|
+
);
|
|
1430
|
+
var SelectTrigger = React39.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
|
|
1431
|
+
SelectPrimitive.Trigger,
|
|
1432
|
+
{
|
|
1433
|
+
ref,
|
|
1434
|
+
className: cn(selectTriggerVariants(), className),
|
|
1435
|
+
...props,
|
|
1436
|
+
children: [
|
|
1437
|
+
children,
|
|
1438
|
+
/* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(
|
|
1439
|
+
"svg",
|
|
1440
|
+
{
|
|
1441
|
+
className: "h-4 w-4 opacity-50",
|
|
1442
|
+
fill: "none",
|
|
1443
|
+
stroke: "currentColor",
|
|
1444
|
+
viewBox: "0 0 24 24",
|
|
1445
|
+
children: /* @__PURE__ */ jsx(
|
|
1446
|
+
"path",
|
|
1447
|
+
{
|
|
1448
|
+
strokeLinecap: "round",
|
|
1449
|
+
strokeLinejoin: "round",
|
|
1450
|
+
strokeWidth: 2,
|
|
1451
|
+
d: "M19 9l-7 7-7-7"
|
|
1452
|
+
}
|
|
1453
|
+
)
|
|
1454
|
+
}
|
|
1455
|
+
) })
|
|
1456
|
+
]
|
|
1457
|
+
}
|
|
1458
|
+
));
|
|
1459
|
+
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
|
|
1460
|
+
var selectContentVariants = cva(
|
|
1461
|
+
"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-white shadow-md data-[state=open]:animate-scale-in data-[state=closed]:animate-scale-out dark:border-neutral-700 dark:bg-neutral-900",
|
|
1462
|
+
{
|
|
1463
|
+
variants: {},
|
|
1464
|
+
defaultVariants: {}
|
|
1465
|
+
}
|
|
1466
|
+
);
|
|
1467
|
+
var SelectContent = React39.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx(
|
|
1468
|
+
SelectPrimitive.Content,
|
|
1469
|
+
{
|
|
1470
|
+
ref,
|
|
1471
|
+
className: cn(selectContentVariants(), className),
|
|
1472
|
+
position,
|
|
1473
|
+
...props,
|
|
1474
|
+
children: /* @__PURE__ */ jsx(SelectPrimitive.Viewport, { className: "p-1", children })
|
|
1475
|
+
}
|
|
1476
|
+
) }));
|
|
1477
|
+
SelectContent.displayName = SelectPrimitive.Content.displayName;
|
|
1478
|
+
var SelectLabel = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
1479
|
+
SelectPrimitive.Label,
|
|
1480
|
+
{
|
|
1481
|
+
ref,
|
|
1482
|
+
className: cn("py-1.5 pl-8 pr-2 text-sm font-semibold text-neutral-900 dark:text-neutral-100", className),
|
|
1483
|
+
...props
|
|
1484
|
+
}
|
|
1485
|
+
));
|
|
1486
|
+
SelectLabel.displayName = SelectPrimitive.Label.displayName;
|
|
1487
|
+
var selectItemVariants = cva(
|
|
1488
|
+
"relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus-visible:bg-neutral-100 focus-visible:text-neutral-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus-visible:bg-neutral-800 dark:focus-visible:text-neutral-100 dark:text-neutral-100",
|
|
1489
|
+
{
|
|
1490
|
+
variants: {},
|
|
1491
|
+
defaultVariants: {}
|
|
1492
|
+
}
|
|
1493
|
+
);
|
|
1494
|
+
var SelectItem = React39.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
|
|
1495
|
+
SelectPrimitive.Item,
|
|
1496
|
+
{
|
|
1497
|
+
ref,
|
|
1498
|
+
className: cn(selectItemVariants(), className),
|
|
1499
|
+
...props,
|
|
1500
|
+
children: [
|
|
1501
|
+
/* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(
|
|
1502
|
+
"svg",
|
|
1503
|
+
{
|
|
1504
|
+
className: "h-4 w-4",
|
|
1505
|
+
fill: "none",
|
|
1506
|
+
stroke: "currentColor",
|
|
1507
|
+
viewBox: "0 0 24 24",
|
|
1508
|
+
children: /* @__PURE__ */ jsx(
|
|
1509
|
+
"path",
|
|
1510
|
+
{
|
|
1511
|
+
strokeLinecap: "round",
|
|
1512
|
+
strokeLinejoin: "round",
|
|
1513
|
+
strokeWidth: 2,
|
|
1514
|
+
d: "M5 13l4 4L19 7"
|
|
1515
|
+
}
|
|
1516
|
+
)
|
|
1517
|
+
}
|
|
1518
|
+
) }) }),
|
|
1519
|
+
/* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })
|
|
1520
|
+
]
|
|
1521
|
+
}
|
|
1522
|
+
));
|
|
1523
|
+
SelectItem.displayName = SelectPrimitive.Item.displayName;
|
|
1524
|
+
var checkboxVariants = cva(
|
|
1525
|
+
"peer h-5 w-5 shrink-0 rounded-sm border border-neutral-300 transition-[background-color,border-color] duration-fast ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary-600 data-[state=checked]:text-white data-[state=checked]:border-primary-600 dark:border-neutral-600 dark:data-[state=checked]:bg-primary-700 dark:data-[state=checked]:border-primary-700",
|
|
1526
|
+
{
|
|
1527
|
+
variants: {},
|
|
1528
|
+
defaultVariants: {}
|
|
1529
|
+
}
|
|
1530
|
+
);
|
|
1531
|
+
var Checkbox = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
1532
|
+
CheckboxPrimitive.Root,
|
|
1533
|
+
{
|
|
1534
|
+
ref,
|
|
1535
|
+
className: cn(checkboxVariants(), className),
|
|
1536
|
+
...props,
|
|
1537
|
+
children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center text-current", children: /* @__PURE__ */ jsx(
|
|
1538
|
+
"svg",
|
|
1539
|
+
{
|
|
1540
|
+
className: "h-4 w-4",
|
|
1541
|
+
fill: "none",
|
|
1542
|
+
stroke: "currentColor",
|
|
1543
|
+
viewBox: "0 0 24 24",
|
|
1544
|
+
children: /* @__PURE__ */ jsx(
|
|
1545
|
+
"path",
|
|
1546
|
+
{
|
|
1547
|
+
strokeLinecap: "round",
|
|
1548
|
+
strokeLinejoin: "round",
|
|
1549
|
+
strokeWidth: 2,
|
|
1550
|
+
d: "M5 13l4 4L19 7"
|
|
1551
|
+
}
|
|
1552
|
+
)
|
|
1553
|
+
}
|
|
1554
|
+
) })
|
|
1555
|
+
}
|
|
1556
|
+
));
|
|
1557
|
+
Checkbox.displayName = CheckboxPrimitive.Root.displayName;
|
|
1558
|
+
var radioGroupVariants = cva(
|
|
1559
|
+
"grid gap-2",
|
|
1560
|
+
{
|
|
1561
|
+
variants: {},
|
|
1562
|
+
defaultVariants: {}
|
|
1563
|
+
}
|
|
1564
|
+
);
|
|
1565
|
+
var RadioGroup = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
1566
|
+
RadioGroupPrimitive.Root,
|
|
1567
|
+
{
|
|
1568
|
+
className: cn(radioGroupVariants(), className),
|
|
1569
|
+
...props,
|
|
1570
|
+
ref
|
|
1571
|
+
}
|
|
1572
|
+
));
|
|
1573
|
+
RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
|
|
1574
|
+
var radioGroupItemVariants = cva(
|
|
1575
|
+
"aspect-square h-5 w-5 cursor-pointer rounded-full border border-neutral-300 text-primary-600 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-600 dark:text-primary-400",
|
|
1576
|
+
{
|
|
1577
|
+
variants: {},
|
|
1578
|
+
defaultVariants: {}
|
|
1579
|
+
}
|
|
1580
|
+
);
|
|
1581
|
+
var RadioGroupItem = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
1582
|
+
RadioGroupPrimitive.Item,
|
|
1583
|
+
{
|
|
1584
|
+
ref,
|
|
1585
|
+
className: cn(radioGroupItemVariants(), className),
|
|
1586
|
+
...props,
|
|
1587
|
+
children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "h-2.5 w-2.5 rounded-full bg-current" }) })
|
|
1588
|
+
}
|
|
1589
|
+
));
|
|
1590
|
+
RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
|
|
1591
|
+
var toasts = [];
|
|
1592
|
+
var listeners = /* @__PURE__ */ new Set();
|
|
1593
|
+
function emitChange() {
|
|
1594
|
+
for (const listener of listeners) {
|
|
1595
|
+
listener();
|
|
1596
|
+
}
|
|
1597
|
+
}
|
|
1598
|
+
var toastStore = {
|
|
1599
|
+
getSnapshot() {
|
|
1600
|
+
return toasts;
|
|
1601
|
+
},
|
|
1602
|
+
subscribe(listener) {
|
|
1603
|
+
listeners.add(listener);
|
|
1604
|
+
return () => {
|
|
1605
|
+
listeners.delete(listener);
|
|
1606
|
+
};
|
|
1607
|
+
},
|
|
1608
|
+
add(toast2) {
|
|
1609
|
+
toasts = [...toasts, toast2];
|
|
1610
|
+
emitChange();
|
|
1611
|
+
return toast2.id;
|
|
1612
|
+
},
|
|
1613
|
+
dismiss(id) {
|
|
1614
|
+
const next = toasts.filter((t) => t.id !== id);
|
|
1615
|
+
if (next.length !== toasts.length) {
|
|
1616
|
+
toasts = next;
|
|
1617
|
+
emitChange();
|
|
1618
|
+
}
|
|
1619
|
+
},
|
|
1620
|
+
clear() {
|
|
1621
|
+
if (toasts.length > 0) {
|
|
1622
|
+
toasts = [];
|
|
1623
|
+
emitChange();
|
|
1624
|
+
}
|
|
1625
|
+
}
|
|
1626
|
+
};
|
|
1627
|
+
var counter = 0;
|
|
1628
|
+
function generateId() {
|
|
1629
|
+
counter += 1;
|
|
1630
|
+
return String(counter);
|
|
1631
|
+
}
|
|
1632
|
+
function createToast(options) {
|
|
1633
|
+
const id = generateId();
|
|
1634
|
+
const toastData = {
|
|
1635
|
+
...options,
|
|
1636
|
+
id,
|
|
1637
|
+
variant: options.variant ?? "default"
|
|
1638
|
+
};
|
|
1639
|
+
toastStore.add(toastData);
|
|
1640
|
+
return id;
|
|
1641
|
+
}
|
|
1642
|
+
function createShorthand(variant) {
|
|
1643
|
+
return (titleOrOptions) => {
|
|
1644
|
+
if (typeof titleOrOptions === "string") {
|
|
1645
|
+
return createToast({ title: titleOrOptions, variant });
|
|
1646
|
+
}
|
|
1647
|
+
return createToast({ ...titleOrOptions, variant });
|
|
1648
|
+
};
|
|
1649
|
+
}
|
|
1650
|
+
var toast = Object.assign(createToast, {
|
|
1651
|
+
success: createShorthand("success"),
|
|
1652
|
+
error: createShorthand("error"),
|
|
1653
|
+
warning: createShorthand("warning"),
|
|
1654
|
+
info: createShorthand("info"),
|
|
1655
|
+
dismiss: (id) => toastStore.dismiss(id),
|
|
1656
|
+
clear: () => toastStore.clear()
|
|
1657
|
+
});
|
|
1658
|
+
function useToastStore() {
|
|
1659
|
+
return useSyncExternalStore(
|
|
1660
|
+
toastStore.subscribe,
|
|
1661
|
+
toastStore.getSnapshot,
|
|
1662
|
+
toastStore.getSnapshot
|
|
1663
|
+
);
|
|
1664
|
+
}
|
|
1665
|
+
var viewportVariants = cva(
|
|
1666
|
+
"fixed z-[100] flex w-full sm:w-[380px] max-w-[calc(100vw-2rem)] flex-col gap-3 p-4 max-h-screen",
|
|
1667
|
+
{
|
|
1668
|
+
variants: {
|
|
1669
|
+
position: {
|
|
1670
|
+
"top-right": "top-0 right-0",
|
|
1671
|
+
"top-left": "top-0 left-0",
|
|
1672
|
+
"top-center": "top-0 left-1/2 -translate-x-1/2",
|
|
1673
|
+
"bottom-right": "bottom-0 right-0",
|
|
1674
|
+
"bottom-left": "bottom-0 left-0",
|
|
1675
|
+
"bottom-center": "bottom-0 left-1/2 -translate-x-1/2"
|
|
1676
|
+
}
|
|
1677
|
+
},
|
|
1678
|
+
defaultVariants: {
|
|
1679
|
+
position: "bottom-right"
|
|
1680
|
+
}
|
|
1681
|
+
}
|
|
1682
|
+
);
|
|
1683
|
+
var toastVariants = cva(
|
|
1684
|
+
"group pointer-events-auto relative flex w-full items-center gap-3 overflow-hidden rounded-lg border p-4 pr-8 shadow-lg transition-all data-[state=open]:animate-slide-in-from-right data-[state=closed]:animate-fade-out data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=cancel]:translate-x-0 data-[swipe=end]:animate-slide-out-to-right",
|
|
1685
|
+
{
|
|
1686
|
+
variants: {
|
|
1687
|
+
variant: {
|
|
1688
|
+
default: "border-neutral-200 bg-white text-neutral-900 shadow-lg dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-100",
|
|
1689
|
+
success: "border-success-500/30 bg-success-50 text-success-700 shadow-lg dark:bg-success-500/10 dark:text-success-500 dark:border-success-500/20",
|
|
1690
|
+
error: "border-error-500/30 bg-error-50 text-error-700 shadow-lg dark:bg-error-500/10 dark:text-error-500 dark:border-error-500/20",
|
|
1691
|
+
warning: "border-warning-500/30 bg-warning-50 text-warning-700 shadow-lg dark:bg-warning-500/10 dark:text-warning-500 dark:border-warning-500/20",
|
|
1692
|
+
info: "border-primary-500/30 bg-primary-50 text-primary-700 shadow-lg dark:bg-primary-500/10 dark:text-primary-500 dark:border-primary-500/20"
|
|
1693
|
+
}
|
|
1694
|
+
},
|
|
1695
|
+
defaultVariants: {
|
|
1696
|
+
variant: "default"
|
|
1697
|
+
}
|
|
1698
|
+
}
|
|
1699
|
+
);
|
|
1700
|
+
var ToastProvider = ToastPrimitive.Provider;
|
|
1701
|
+
var ToastViewport = React39.forwardRef(({ className, position, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
1702
|
+
ToastPrimitive.Viewport,
|
|
1703
|
+
{
|
|
1704
|
+
ref,
|
|
1705
|
+
className: cn(viewportVariants({ position }), className),
|
|
1706
|
+
...props
|
|
1707
|
+
}
|
|
1708
|
+
));
|
|
1709
|
+
ToastViewport.displayName = "ToastViewport";
|
|
1710
|
+
var Toast = React39.forwardRef(({ className, variant, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
1711
|
+
ToastPrimitive.Root,
|
|
1712
|
+
{
|
|
1713
|
+
ref,
|
|
1714
|
+
"data-variant": variant ?? "default",
|
|
1715
|
+
className: cn(toastVariants({ variant }), className),
|
|
1716
|
+
...props
|
|
1717
|
+
}
|
|
1718
|
+
));
|
|
1719
|
+
Toast.displayName = "Toast";
|
|
1720
|
+
var ToastTitle = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
1721
|
+
ToastPrimitive.Title,
|
|
1722
|
+
{
|
|
1723
|
+
ref,
|
|
1724
|
+
className: cn("text-sm font-semibold", className),
|
|
1725
|
+
...props
|
|
1726
|
+
}
|
|
1727
|
+
));
|
|
1728
|
+
ToastTitle.displayName = "ToastTitle";
|
|
1729
|
+
var ToastDescription = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
1730
|
+
ToastPrimitive.Description,
|
|
1731
|
+
{
|
|
1732
|
+
ref,
|
|
1733
|
+
className: cn("text-sm opacity-90", className),
|
|
1734
|
+
...props
|
|
1735
|
+
}
|
|
1736
|
+
));
|
|
1737
|
+
ToastDescription.displayName = "ToastDescription";
|
|
1738
|
+
var ToastClose = React39.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
1739
|
+
ToastPrimitive.Close,
|
|
1740
|
+
{
|
|
1741
|
+
ref,
|
|
1742
|
+
className: cn(
|
|
1743
|
+
"absolute right-2 top-2 inline-flex h-6 w-6 cursor-pointer items-center justify-center rounded-md text-neutral-400 transition-colors",
|
|
1744
|
+
"hover:text-neutral-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-400",
|
|
1745
|
+
"dark:text-neutral-500 dark:hover:text-neutral-100",
|
|
1746
|
+
className
|
|
1747
|
+
),
|
|
1748
|
+
"aria-label": "Close notification",
|
|
1749
|
+
...props,
|
|
1750
|
+
children: children ?? /* @__PURE__ */ jsxs(
|
|
1751
|
+
"svg",
|
|
1752
|
+
{
|
|
1753
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
1754
|
+
width: "16",
|
|
1755
|
+
height: "16",
|
|
1756
|
+
viewBox: "0 0 24 24",
|
|
1757
|
+
fill: "none",
|
|
1758
|
+
stroke: "currentColor",
|
|
1759
|
+
strokeWidth: "2",
|
|
1760
|
+
strokeLinecap: "round",
|
|
1761
|
+
strokeLinejoin: "round",
|
|
1762
|
+
"aria-hidden": "true",
|
|
1763
|
+
children: [
|
|
1764
|
+
/* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
|
|
1765
|
+
/* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
|
|
1766
|
+
]
|
|
1767
|
+
}
|
|
1768
|
+
)
|
|
1769
|
+
}
|
|
1770
|
+
));
|
|
1771
|
+
ToastClose.displayName = "ToastClose";
|
|
1772
|
+
var ToastAction = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
1773
|
+
ToastPrimitive.Action,
|
|
1774
|
+
{
|
|
1775
|
+
ref,
|
|
1776
|
+
className: cn(
|
|
1777
|
+
"inline-flex shrink-0 cursor-pointer items-center justify-center rounded-md border border-neutral-200 bg-transparent px-3 py-1.5 text-sm font-medium transition-colors",
|
|
1778
|
+
"hover:bg-neutral-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-400",
|
|
1779
|
+
"dark:border-neutral-700 dark:hover:bg-neutral-800",
|
|
1780
|
+
className
|
|
1781
|
+
),
|
|
1782
|
+
...props
|
|
1783
|
+
}
|
|
1784
|
+
));
|
|
1785
|
+
ToastAction.displayName = "ToastAction";
|
|
1786
|
+
var SuccessIcon = () => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "shrink-0", "aria-hidden": "true", children: [
|
|
1787
|
+
/* @__PURE__ */ jsx("path", { d: "M22 11.08V12a10 10 0 1 1-5.93-9.14" }),
|
|
1788
|
+
/* @__PURE__ */ jsx("polyline", { points: "22 4 12 14.01 9 11.01" })
|
|
1789
|
+
] });
|
|
1790
|
+
var ErrorIcon = () => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "shrink-0", "aria-hidden": "true", children: [
|
|
1791
|
+
/* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
|
|
1792
|
+
/* @__PURE__ */ jsx("line", { x1: "15", y1: "9", x2: "9", y2: "15" }),
|
|
1793
|
+
/* @__PURE__ */ jsx("line", { x1: "9", y1: "9", x2: "15", y2: "15" })
|
|
1794
|
+
] });
|
|
1795
|
+
var WarningIcon = () => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "shrink-0", "aria-hidden": "true", children: [
|
|
1796
|
+
/* @__PURE__ */ jsx("path", { d: "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" }),
|
|
1797
|
+
/* @__PURE__ */ jsx("line", { x1: "12", y1: "9", x2: "12", y2: "13" }),
|
|
1798
|
+
/* @__PURE__ */ jsx("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
|
|
1799
|
+
] });
|
|
1800
|
+
var InfoIcon = () => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "shrink-0", "aria-hidden": "true", children: [
|
|
1801
|
+
/* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
|
|
1802
|
+
/* @__PURE__ */ jsx("line", { x1: "12", y1: "16", x2: "12", y2: "12" }),
|
|
1803
|
+
/* @__PURE__ */ jsx("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })
|
|
1804
|
+
] });
|
|
1805
|
+
var variantIcons = {
|
|
1806
|
+
success: SuccessIcon,
|
|
1807
|
+
error: ErrorIcon,
|
|
1808
|
+
warning: WarningIcon,
|
|
1809
|
+
info: InfoIcon
|
|
1810
|
+
};
|
|
1811
|
+
function Toaster({
|
|
1812
|
+
position = "bottom-right",
|
|
1813
|
+
duration = 5e3,
|
|
1814
|
+
swipeDirection = "right"
|
|
1815
|
+
}) {
|
|
1816
|
+
const toasts2 = React39.useSyncExternalStore(
|
|
1817
|
+
toastStore.subscribe,
|
|
1818
|
+
toastStore.getSnapshot,
|
|
1819
|
+
toastStore.getSnapshot
|
|
1820
|
+
);
|
|
1821
|
+
return /* @__PURE__ */ jsxs(ToastProvider, { duration, swipeDirection, children: [
|
|
1822
|
+
toasts2.map((t) => {
|
|
1823
|
+
const Icon2 = t.variant ? variantIcons[t.variant] : void 0;
|
|
1824
|
+
return /* @__PURE__ */ jsxs(
|
|
1825
|
+
Toast,
|
|
1826
|
+
{
|
|
1827
|
+
variant: t.variant,
|
|
1828
|
+
duration: t.duration,
|
|
1829
|
+
onOpenChange: (open) => {
|
|
1830
|
+
if (!open) toastStore.dismiss(t.id);
|
|
1831
|
+
},
|
|
1832
|
+
children: [
|
|
1833
|
+
Icon2 && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: /* @__PURE__ */ jsx(Icon2, {}) }),
|
|
1834
|
+
/* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-1", children: [
|
|
1835
|
+
t.title && /* @__PURE__ */ jsx(ToastTitle, { children: t.title }),
|
|
1836
|
+
t.description && /* @__PURE__ */ jsx(ToastDescription, { children: t.description })
|
|
1837
|
+
] }),
|
|
1838
|
+
t.action && /* @__PURE__ */ jsx(ToastAction, { altText: t.action.altText, onClick: t.action.onClick, children: t.action.label }),
|
|
1839
|
+
/* @__PURE__ */ jsx(ToastClose, {})
|
|
1840
|
+
]
|
|
1841
|
+
},
|
|
1842
|
+
t.id
|
|
1843
|
+
);
|
|
1844
|
+
}),
|
|
1845
|
+
/* @__PURE__ */ jsx(ToastViewport, { position })
|
|
1846
|
+
] });
|
|
1847
|
+
}
|
|
1848
|
+
Toaster.displayName = "Toaster";
|
|
1849
|
+
var alertVariants = cva(
|
|
1850
|
+
"relative w-full rounded-lg border p-4 transition-opacity duration-normal",
|
|
1851
|
+
{
|
|
1852
|
+
variants: {
|
|
1853
|
+
variant: {
|
|
1854
|
+
info: "border-info-200 bg-info-50 text-info-800 dark:border-info-800 dark:bg-info-950 dark:text-info-200",
|
|
1855
|
+
success: "border-success-200 bg-success-50 text-success-800 dark:border-success-800 dark:bg-success-950 dark:text-success-200",
|
|
1856
|
+
warning: "border-warning-200 bg-warning-50 text-warning-800 dark:border-warning-800 dark:bg-warning-950 dark:text-warning-200",
|
|
1857
|
+
destructive: "border-error-200 bg-error-50 text-error-800 dark:border-error-800 dark:bg-error-950 dark:text-error-200"
|
|
1858
|
+
}
|
|
1859
|
+
},
|
|
1860
|
+
defaultVariants: {
|
|
1861
|
+
variant: "info"
|
|
1862
|
+
}
|
|
1863
|
+
}
|
|
1864
|
+
);
|
|
1865
|
+
var Alert = React39.forwardRef(
|
|
1866
|
+
({ className, variant, dismissible, onDismiss, children, ...props }, ref) => /* @__PURE__ */ jsxs(
|
|
1867
|
+
"div",
|
|
1868
|
+
{
|
|
1869
|
+
ref,
|
|
1870
|
+
role: "alert",
|
|
1871
|
+
className: cn(alertVariants({ variant }), dismissible && "pr-10", className),
|
|
1872
|
+
...props,
|
|
1873
|
+
children: [
|
|
1874
|
+
children,
|
|
1875
|
+
dismissible && /* @__PURE__ */ jsx(
|
|
1876
|
+
"button",
|
|
1877
|
+
{
|
|
1878
|
+
type: "button",
|
|
1879
|
+
onClick: onDismiss,
|
|
1880
|
+
className: "absolute right-2 top-2 inline-flex h-6 w-6 cursor-pointer items-center justify-center rounded-md opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
|
|
1881
|
+
"aria-label": "Dismiss alert",
|
|
1882
|
+
children: /* @__PURE__ */ jsxs(
|
|
1883
|
+
"svg",
|
|
1884
|
+
{
|
|
1885
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
1886
|
+
width: "16",
|
|
1887
|
+
height: "16",
|
|
1888
|
+
viewBox: "0 0 24 24",
|
|
1889
|
+
fill: "none",
|
|
1890
|
+
stroke: "currentColor",
|
|
1891
|
+
strokeWidth: "2",
|
|
1892
|
+
strokeLinecap: "round",
|
|
1893
|
+
strokeLinejoin: "round",
|
|
1894
|
+
"aria-hidden": "true",
|
|
1895
|
+
children: [
|
|
1896
|
+
/* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
|
|
1897
|
+
/* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
|
|
1898
|
+
]
|
|
1899
|
+
}
|
|
1900
|
+
)
|
|
1901
|
+
}
|
|
1902
|
+
)
|
|
1903
|
+
]
|
|
1904
|
+
}
|
|
1905
|
+
)
|
|
1906
|
+
);
|
|
1907
|
+
Alert.displayName = "Alert";
|
|
1908
|
+
var AlertTitle = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
1909
|
+
"h5",
|
|
1910
|
+
{
|
|
1911
|
+
ref,
|
|
1912
|
+
className: cn("mb-1 font-semibold leading-none tracking-tight", className),
|
|
1913
|
+
...props
|
|
1914
|
+
}
|
|
1915
|
+
));
|
|
1916
|
+
AlertTitle.displayName = "AlertTitle";
|
|
1917
|
+
var AlertDescription = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
1918
|
+
"p",
|
|
1919
|
+
{
|
|
1920
|
+
ref,
|
|
1921
|
+
className: cn("text-sm leading-relaxed [&_p]:leading-relaxed", className),
|
|
1922
|
+
...props
|
|
1923
|
+
}
|
|
1924
|
+
));
|
|
1925
|
+
AlertDescription.displayName = "AlertDescription";
|
|
1926
|
+
var progressVariants = cva(
|
|
1927
|
+
"relative w-full overflow-hidden rounded-full bg-neutral-200 dark:bg-neutral-700",
|
|
1928
|
+
{
|
|
1929
|
+
variants: {
|
|
1930
|
+
size: {
|
|
1931
|
+
sm: "h-1.5",
|
|
1932
|
+
md: "h-2.5",
|
|
1933
|
+
lg: "h-4"
|
|
1934
|
+
}
|
|
1935
|
+
},
|
|
1936
|
+
defaultVariants: {
|
|
1937
|
+
size: "md"
|
|
1938
|
+
}
|
|
1939
|
+
}
|
|
1940
|
+
);
|
|
1941
|
+
var progressIndicatorVariants = cva(
|
|
1942
|
+
"h-full rounded-full transition-all duration-slow ease-out",
|
|
1943
|
+
{
|
|
1944
|
+
variants: {
|
|
1945
|
+
variant: {
|
|
1946
|
+
default: "bg-primary-600 dark:bg-primary-500",
|
|
1947
|
+
success: "bg-success-600 dark:bg-success-500",
|
|
1948
|
+
warning: "bg-warning-500 dark:bg-warning-400",
|
|
1949
|
+
danger: "bg-error-600 dark:bg-error-500",
|
|
1950
|
+
info: "bg-info-600 dark:bg-info-500"
|
|
1951
|
+
}
|
|
1952
|
+
},
|
|
1953
|
+
defaultVariants: {
|
|
1954
|
+
variant: "default"
|
|
1955
|
+
}
|
|
1956
|
+
}
|
|
1957
|
+
);
|
|
1958
|
+
var Progress = React39.forwardRef(
|
|
1959
|
+
({ className, value, max = 100, variant, size, showLabel, ...props }, ref) => {
|
|
1960
|
+
const percentage = Math.min(100, Math.max(0, value / max * 100));
|
|
1961
|
+
return /* @__PURE__ */ jsxs(
|
|
1962
|
+
"div",
|
|
1963
|
+
{
|
|
1964
|
+
ref,
|
|
1965
|
+
role: "progressbar",
|
|
1966
|
+
"aria-valuenow": value,
|
|
1967
|
+
"aria-valuemin": 0,
|
|
1968
|
+
"aria-valuemax": max,
|
|
1969
|
+
className: cn(progressVariants({ size }), className),
|
|
1970
|
+
...props,
|
|
1971
|
+
children: [
|
|
1972
|
+
/* @__PURE__ */ jsx(
|
|
1973
|
+
"div",
|
|
1974
|
+
{
|
|
1975
|
+
className: cn(progressIndicatorVariants({ variant })),
|
|
1976
|
+
style: { width: `${percentage}%` }
|
|
1977
|
+
}
|
|
1978
|
+
),
|
|
1979
|
+
showLabel && size === "lg" && /* @__PURE__ */ jsxs("span", { className: "absolute inset-0 flex items-center justify-center text-xs font-medium text-neutral-900 dark:text-neutral-100", children: [
|
|
1980
|
+
Math.round(percentage),
|
|
1981
|
+
"%"
|
|
1982
|
+
] })
|
|
1983
|
+
]
|
|
1984
|
+
}
|
|
1985
|
+
);
|
|
1986
|
+
}
|
|
1987
|
+
);
|
|
1988
|
+
Progress.displayName = "Progress";
|
|
1989
|
+
var spinnerVariants = cva("animate-spin", {
|
|
1990
|
+
variants: {
|
|
1991
|
+
size: {
|
|
1992
|
+
sm: "h-4 w-4",
|
|
1993
|
+
md: "h-6 w-6",
|
|
1994
|
+
lg: "h-8 w-8",
|
|
1995
|
+
xl: "h-12 w-12"
|
|
1996
|
+
},
|
|
1997
|
+
variant: {
|
|
1998
|
+
default: "text-primary-600 dark:text-primary-400",
|
|
1999
|
+
secondary: "text-neutral-600 dark:text-neutral-400",
|
|
2000
|
+
success: "text-success-600 dark:text-success-400",
|
|
2001
|
+
destructive: "text-error-600 dark:text-error-400",
|
|
2002
|
+
info: "text-info-600 dark:text-info-400"
|
|
2003
|
+
}
|
|
2004
|
+
},
|
|
2005
|
+
defaultVariants: {
|
|
2006
|
+
size: "md",
|
|
2007
|
+
variant: "default"
|
|
2008
|
+
}
|
|
2009
|
+
});
|
|
2010
|
+
var Spinner = React39.forwardRef(
|
|
2011
|
+
({ className, size, variant, label = "Loading", ...props }, ref) => /* @__PURE__ */ jsxs("span", { role: "status", className: "inline-flex items-center", children: [
|
|
2012
|
+
/* @__PURE__ */ jsxs(
|
|
2013
|
+
"svg",
|
|
2014
|
+
{
|
|
2015
|
+
ref,
|
|
2016
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
2017
|
+
fill: "none",
|
|
2018
|
+
viewBox: "0 0 24 24",
|
|
2019
|
+
className: cn(spinnerVariants({ size, variant }), className),
|
|
2020
|
+
"aria-hidden": "true",
|
|
2021
|
+
...props,
|
|
2022
|
+
children: [
|
|
2023
|
+
/* @__PURE__ */ jsx(
|
|
2024
|
+
"circle",
|
|
2025
|
+
{
|
|
2026
|
+
className: "opacity-25",
|
|
2027
|
+
cx: "12",
|
|
2028
|
+
cy: "12",
|
|
2029
|
+
r: "10",
|
|
2030
|
+
stroke: "currentColor",
|
|
2031
|
+
strokeWidth: "4"
|
|
2032
|
+
}
|
|
2033
|
+
),
|
|
2034
|
+
/* @__PURE__ */ jsx(
|
|
2035
|
+
"path",
|
|
2036
|
+
{
|
|
2037
|
+
className: "opacity-75",
|
|
2038
|
+
fill: "currentColor",
|
|
2039
|
+
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"
|
|
2040
|
+
}
|
|
2041
|
+
)
|
|
2042
|
+
]
|
|
2043
|
+
}
|
|
2044
|
+
),
|
|
2045
|
+
/* @__PURE__ */ jsx("span", { className: "sr-only", children: label })
|
|
2046
|
+
] })
|
|
2047
|
+
);
|
|
2048
|
+
Spinner.displayName = "Spinner";
|
|
2049
|
+
var Skeleton = React39.forwardRef(
|
|
2050
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
2051
|
+
"div",
|
|
2052
|
+
{
|
|
2053
|
+
ref,
|
|
2054
|
+
className: cn(
|
|
2055
|
+
"animate-pulse rounded-md bg-neutral-200 dark:bg-neutral-700",
|
|
2056
|
+
className
|
|
2057
|
+
),
|
|
2058
|
+
...props
|
|
2059
|
+
}
|
|
2060
|
+
)
|
|
2061
|
+
);
|
|
2062
|
+
Skeleton.displayName = "Skeleton";
|
|
2063
|
+
var TooltipProvider = ({
|
|
2064
|
+
delayDuration = 300,
|
|
2065
|
+
skipDelayDuration = 300,
|
|
2066
|
+
...props
|
|
2067
|
+
}) => /* @__PURE__ */ jsx(
|
|
2068
|
+
TooltipPrimitive.Provider,
|
|
2069
|
+
{
|
|
2070
|
+
delayDuration,
|
|
2071
|
+
skipDelayDuration,
|
|
2072
|
+
...props
|
|
2073
|
+
}
|
|
2074
|
+
);
|
|
2075
|
+
TooltipProvider.displayName = "TooltipProvider";
|
|
2076
|
+
var Tooltip = TooltipPrimitive.Root;
|
|
2077
|
+
var TooltipTrigger = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, { ref, className: cn(className), ...props }));
|
|
2078
|
+
TooltipTrigger.displayName = TooltipPrimitive.Trigger.displayName;
|
|
2079
|
+
var tooltipContentVariants = cva(
|
|
2080
|
+
"z-50 overflow-hidden rounded-md px-3 py-1.5 text-sm data-[state=delayed-open]:animate-fade-in data-[state=closed]:animate-fade-out",
|
|
2081
|
+
{
|
|
2082
|
+
variants: {
|
|
2083
|
+
variant: {
|
|
2084
|
+
default: "bg-neutral-900 text-neutral-50 dark:bg-neutral-50 dark:text-neutral-900",
|
|
2085
|
+
light: "border border-neutral-200 bg-white text-neutral-900 shadow-md dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-100"
|
|
2086
|
+
}
|
|
2087
|
+
},
|
|
2088
|
+
defaultVariants: {
|
|
2089
|
+
variant: "default"
|
|
2090
|
+
}
|
|
2091
|
+
}
|
|
2092
|
+
);
|
|
2093
|
+
var TooltipContent = React39.forwardRef(
|
|
2094
|
+
({
|
|
2095
|
+
className,
|
|
2096
|
+
variant,
|
|
2097
|
+
showArrow = false,
|
|
2098
|
+
sideOffset = 4,
|
|
2099
|
+
side = "top",
|
|
2100
|
+
children,
|
|
2101
|
+
...props
|
|
2102
|
+
}, ref) => /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
|
|
2103
|
+
TooltipPrimitive.Content,
|
|
2104
|
+
{
|
|
2105
|
+
ref,
|
|
2106
|
+
side,
|
|
2107
|
+
sideOffset,
|
|
2108
|
+
className: cn(tooltipContentVariants({ variant }), className),
|
|
2109
|
+
...props,
|
|
2110
|
+
children: [
|
|
2111
|
+
children,
|
|
2112
|
+
showArrow && /* @__PURE__ */ jsx(TooltipArrow, { variant: variant ?? void 0 })
|
|
2113
|
+
]
|
|
2114
|
+
}
|
|
2115
|
+
) })
|
|
2116
|
+
);
|
|
2117
|
+
TooltipContent.displayName = TooltipPrimitive.Content.displayName;
|
|
2118
|
+
var TooltipArrow = React39.forwardRef(({ className, variant = "default", ...props }, ref) => /* @__PURE__ */ jsx(
|
|
2119
|
+
TooltipPrimitive.Arrow,
|
|
2120
|
+
{
|
|
2121
|
+
ref,
|
|
2122
|
+
className: cn(
|
|
2123
|
+
variant === "default" ? "fill-neutral-900 dark:fill-neutral-50" : "fill-white dark:fill-neutral-800",
|
|
2124
|
+
className
|
|
2125
|
+
),
|
|
2126
|
+
...props
|
|
2127
|
+
}
|
|
2128
|
+
));
|
|
2129
|
+
TooltipArrow.displayName = "TooltipArrow";
|
|
2130
|
+
var PopoverProvider = ({ children }) => /* @__PURE__ */ jsx(Fragment, { children });
|
|
2131
|
+
PopoverProvider.displayName = "PopoverProvider";
|
|
2132
|
+
var Popover = PopoverPrimitive.Root;
|
|
2133
|
+
var PopoverTrigger = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, { ref, className: cn(className), ...props }));
|
|
2134
|
+
PopoverTrigger.displayName = PopoverPrimitive.Trigger.displayName;
|
|
2135
|
+
var popoverContentVariants = cva(
|
|
2136
|
+
"z-50 w-72 rounded-md p-4 shadow-md outline-none data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out",
|
|
2137
|
+
{
|
|
2138
|
+
variants: {
|
|
2139
|
+
variant: {
|
|
2140
|
+
default: "border border-neutral-200 bg-white text-neutral-900 shadow-lg dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-100",
|
|
2141
|
+
outline: "border-2 border-primary-500 bg-white text-neutral-900 shadow-lg dark:border-primary-400 dark:bg-neutral-800 dark:text-neutral-100"
|
|
2142
|
+
}
|
|
2143
|
+
},
|
|
2144
|
+
defaultVariants: {
|
|
2145
|
+
variant: "default"
|
|
2146
|
+
}
|
|
2147
|
+
}
|
|
2148
|
+
);
|
|
2149
|
+
var PopoverContent = React39.forwardRef(
|
|
2150
|
+
({
|
|
2151
|
+
className,
|
|
2152
|
+
variant,
|
|
2153
|
+
showArrow = false,
|
|
2154
|
+
sideOffset = 4,
|
|
2155
|
+
side = "bottom",
|
|
2156
|
+
children,
|
|
2157
|
+
...props
|
|
2158
|
+
}, ref) => {
|
|
2159
|
+
const arrowSize = 8;
|
|
2160
|
+
const arrowPositionMap = {
|
|
2161
|
+
bottom: {
|
|
2162
|
+
position: "absolute",
|
|
2163
|
+
top: `-${arrowSize}px`,
|
|
2164
|
+
left: "50%",
|
|
2165
|
+
transform: "translateX(-50%)",
|
|
2166
|
+
width: 0,
|
|
2167
|
+
height: 0,
|
|
2168
|
+
borderLeft: `${arrowSize}px solid transparent`,
|
|
2169
|
+
borderRight: `${arrowSize}px solid transparent`,
|
|
2170
|
+
borderBottom: `${arrowSize}px solid white`
|
|
2171
|
+
},
|
|
2172
|
+
top: {
|
|
2173
|
+
position: "absolute",
|
|
2174
|
+
bottom: `-${arrowSize}px`,
|
|
2175
|
+
left: "50%",
|
|
2176
|
+
transform: "translateX(-50%)",
|
|
2177
|
+
width: 0,
|
|
2178
|
+
height: 0,
|
|
2179
|
+
borderLeft: `${arrowSize}px solid transparent`,
|
|
2180
|
+
borderRight: `${arrowSize}px solid transparent`,
|
|
2181
|
+
borderTop: `${arrowSize}px solid white`
|
|
2182
|
+
},
|
|
2183
|
+
left: {
|
|
2184
|
+
position: "absolute",
|
|
2185
|
+
right: `-${arrowSize}px`,
|
|
2186
|
+
top: "50%",
|
|
2187
|
+
transform: "translateY(-50%)",
|
|
2188
|
+
width: 0,
|
|
2189
|
+
height: 0,
|
|
2190
|
+
borderTop: `${arrowSize}px solid transparent`,
|
|
2191
|
+
borderBottom: `${arrowSize}px solid transparent`,
|
|
2192
|
+
borderLeft: `${arrowSize}px solid white`
|
|
2193
|
+
},
|
|
2194
|
+
right: {
|
|
2195
|
+
position: "absolute",
|
|
2196
|
+
left: `-${arrowSize}px`,
|
|
2197
|
+
top: "50%",
|
|
2198
|
+
transform: "translateY(-50%)",
|
|
2199
|
+
width: 0,
|
|
2200
|
+
height: 0,
|
|
2201
|
+
borderTop: `${arrowSize}px solid transparent`,
|
|
2202
|
+
borderBottom: `${arrowSize}px solid transparent`,
|
|
2203
|
+
borderRight: `${arrowSize}px solid white`
|
|
2204
|
+
}
|
|
2205
|
+
};
|
|
2206
|
+
return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
|
|
2207
|
+
PopoverPrimitive.Content,
|
|
2208
|
+
{
|
|
2209
|
+
ref,
|
|
2210
|
+
side,
|
|
2211
|
+
sideOffset: showArrow ? sideOffset + arrowSize : sideOffset,
|
|
2212
|
+
className: cn(popoverContentVariants({ variant }), className),
|
|
2213
|
+
style: { position: "relative" },
|
|
2214
|
+
...props,
|
|
2215
|
+
children: [
|
|
2216
|
+
children,
|
|
2217
|
+
showArrow && /* @__PURE__ */ jsx(
|
|
2218
|
+
"div",
|
|
2219
|
+
{
|
|
2220
|
+
"data-popover-arrow": "",
|
|
2221
|
+
"aria-hidden": "true",
|
|
2222
|
+
style: arrowPositionMap[side ?? "bottom"]
|
|
2223
|
+
}
|
|
2224
|
+
)
|
|
2225
|
+
]
|
|
2226
|
+
}
|
|
2227
|
+
) });
|
|
2228
|
+
}
|
|
2229
|
+
);
|
|
2230
|
+
PopoverContent.displayName = PopoverPrimitive.Content.displayName;
|
|
2231
|
+
var PopoverArrow = React39.forwardRef(({ className, variant = "default", width = 14, height = 7, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
2232
|
+
PopoverPrimitive.Arrow,
|
|
2233
|
+
{
|
|
2234
|
+
ref,
|
|
2235
|
+
width,
|
|
2236
|
+
height,
|
|
2237
|
+
className: cn("fill-white dark:fill-neutral-800", className),
|
|
2238
|
+
style: { fill: "white", display: "block" },
|
|
2239
|
+
...props
|
|
2240
|
+
}
|
|
2241
|
+
));
|
|
2242
|
+
PopoverArrow.displayName = "PopoverArrow";
|
|
2243
|
+
var PopoverClose = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Close, { ref, className: cn(className), ...props }));
|
|
2244
|
+
PopoverClose.displayName = "PopoverClose";
|
|
2245
|
+
var CheckIcon = ({ className }) => /* @__PURE__ */ jsx(
|
|
2246
|
+
"svg",
|
|
2247
|
+
{
|
|
2248
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
2249
|
+
viewBox: "0 0 24 24",
|
|
2250
|
+
fill: "none",
|
|
2251
|
+
stroke: "currentColor",
|
|
2252
|
+
strokeWidth: 2,
|
|
2253
|
+
strokeLinecap: "round",
|
|
2254
|
+
strokeLinejoin: "round",
|
|
2255
|
+
className,
|
|
2256
|
+
children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" })
|
|
2257
|
+
}
|
|
2258
|
+
);
|
|
2259
|
+
var DotIcon = ({ className }) => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", className, children: /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "5" }) });
|
|
2260
|
+
var ChevronRightIcon = ({ className }) => /* @__PURE__ */ jsx(
|
|
2261
|
+
"svg",
|
|
2262
|
+
{
|
|
2263
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
2264
|
+
viewBox: "0 0 24 24",
|
|
2265
|
+
fill: "none",
|
|
2266
|
+
stroke: "currentColor",
|
|
2267
|
+
strokeWidth: 2,
|
|
2268
|
+
strokeLinecap: "round",
|
|
2269
|
+
strokeLinejoin: "round",
|
|
2270
|
+
className,
|
|
2271
|
+
children: /* @__PURE__ */ jsx("polyline", { points: "9 18 15 12 9 6" })
|
|
2272
|
+
}
|
|
2273
|
+
);
|
|
2274
|
+
var DropdownMenu = DropdownMenuPrimitive.Root;
|
|
2275
|
+
var DropdownMenuTrigger = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Trigger, { ref, className: cn(className), ...props }));
|
|
2276
|
+
DropdownMenuTrigger.displayName = "DropdownMenuTrigger";
|
|
2277
|
+
var dropdownMenuContentVariants = cva(
|
|
2278
|
+
"z-50 min-w-[8rem] overflow-hidden rounded-md p-1 shadow-md outline-none data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out",
|
|
2279
|
+
{
|
|
2280
|
+
variants: {
|
|
2281
|
+
variant: {
|
|
2282
|
+
default: "border border-neutral-200 bg-white text-neutral-900 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-100",
|
|
2283
|
+
outline: "border-2 border-neutral-300 bg-white text-neutral-900 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-100"
|
|
2284
|
+
}
|
|
2285
|
+
},
|
|
2286
|
+
defaultVariants: {
|
|
2287
|
+
variant: "default"
|
|
2288
|
+
}
|
|
2289
|
+
}
|
|
2290
|
+
);
|
|
2291
|
+
var DropdownMenuContent = React39.forwardRef(({ className, variant, sideOffset = 4, side = "bottom", ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
|
|
2292
|
+
DropdownMenuPrimitive.Content,
|
|
2293
|
+
{
|
|
2294
|
+
ref,
|
|
2295
|
+
side,
|
|
2296
|
+
sideOffset,
|
|
2297
|
+
className: cn(dropdownMenuContentVariants({ variant }), className),
|
|
2298
|
+
...props
|
|
2299
|
+
}
|
|
2300
|
+
) }));
|
|
2301
|
+
DropdownMenuContent.displayName = "DropdownMenuContent";
|
|
2302
|
+
var DropdownMenuItem = React39.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
2303
|
+
DropdownMenuPrimitive.Item,
|
|
2304
|
+
{
|
|
2305
|
+
ref,
|
|
2306
|
+
className: cn(
|
|
2307
|
+
"relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors",
|
|
2308
|
+
"focus-visible:bg-primary-500 focus-visible:text-white",
|
|
2309
|
+
"dark:focus-visible:bg-primary-600 dark:focus-visible:text-white",
|
|
2310
|
+
"data-disabled:pointer-events-none data-disabled:opacity-50 data-disabled:cursor-default",
|
|
2311
|
+
inset && "pl-8",
|
|
2312
|
+
className
|
|
2313
|
+
),
|
|
2314
|
+
...props
|
|
2315
|
+
}
|
|
2316
|
+
));
|
|
2317
|
+
DropdownMenuItem.displayName = "DropdownMenuItem";
|
|
2318
|
+
var DropdownMenuSeparator = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
2319
|
+
DropdownMenuPrimitive.Separator,
|
|
2320
|
+
{
|
|
2321
|
+
ref,
|
|
2322
|
+
className: cn("-mx-1 my-1 h-px bg-neutral-200 dark:bg-neutral-700", className),
|
|
2323
|
+
...props
|
|
2324
|
+
}
|
|
2325
|
+
));
|
|
2326
|
+
DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
|
|
2327
|
+
var DropdownMenuLabel = React39.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
2328
|
+
DropdownMenuPrimitive.Label,
|
|
2329
|
+
{
|
|
2330
|
+
ref,
|
|
2331
|
+
className: cn(
|
|
2332
|
+
"px-2 py-1.5 text-sm font-semibold text-neutral-500 dark:text-neutral-400",
|
|
2333
|
+
inset && "pl-8",
|
|
2334
|
+
className
|
|
2335
|
+
),
|
|
2336
|
+
...props
|
|
2337
|
+
}
|
|
2338
|
+
));
|
|
2339
|
+
DropdownMenuLabel.displayName = "DropdownMenuLabel";
|
|
2340
|
+
var DropdownMenuCheckboxItem = React39.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
|
|
2341
|
+
DropdownMenuPrimitive.CheckboxItem,
|
|
2342
|
+
{
|
|
2343
|
+
ref,
|
|
2344
|
+
className: cn(
|
|
2345
|
+
"relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors",
|
|
2346
|
+
"focus-visible:bg-primary-500 focus-visible:text-white",
|
|
2347
|
+
"dark:focus-visible:bg-primary-600 dark:focus-visible:text-white",
|
|
2348
|
+
"data-disabled:pointer-events-none data-disabled:opacity-50 data-disabled:cursor-default",
|
|
2349
|
+
className
|
|
2350
|
+
),
|
|
2351
|
+
checked,
|
|
2352
|
+
...props,
|
|
2353
|
+
children: [
|
|
2354
|
+
/* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "h-4 w-4" }) }) }),
|
|
2355
|
+
children
|
|
2356
|
+
]
|
|
2357
|
+
}
|
|
2358
|
+
));
|
|
2359
|
+
DropdownMenuCheckboxItem.displayName = "DropdownMenuCheckboxItem";
|
|
2360
|
+
var DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
|
|
2361
|
+
var DropdownMenuRadioItem = React39.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
|
|
2362
|
+
DropdownMenuPrimitive.RadioItem,
|
|
2363
|
+
{
|
|
2364
|
+
ref,
|
|
2365
|
+
className: cn(
|
|
2366
|
+
"relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors",
|
|
2367
|
+
"focus-visible:bg-primary-500 focus-visible:text-white",
|
|
2368
|
+
"dark:focus-visible:bg-primary-600 dark:focus-visible:text-white",
|
|
2369
|
+
"data-disabled:pointer-events-none data-disabled:opacity-50 data-disabled:cursor-default",
|
|
2370
|
+
className
|
|
2371
|
+
),
|
|
2372
|
+
...props,
|
|
2373
|
+
children: [
|
|
2374
|
+
/* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(DotIcon, { className: "h-4 w-4 fill-current" }) }) }),
|
|
2375
|
+
children
|
|
2376
|
+
]
|
|
2377
|
+
}
|
|
2378
|
+
));
|
|
2379
|
+
DropdownMenuRadioItem.displayName = "DropdownMenuRadioItem";
|
|
2380
|
+
var DropdownMenuSub = DropdownMenuPrimitive.Sub;
|
|
2381
|
+
var DropdownMenuSubTrigger = React39.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
|
|
2382
|
+
DropdownMenuPrimitive.SubTrigger,
|
|
2383
|
+
{
|
|
2384
|
+
ref,
|
|
2385
|
+
className: cn(
|
|
2386
|
+
"relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors",
|
|
2387
|
+
"focus-visible:bg-primary-500 focus-visible:text-white",
|
|
2388
|
+
"data-[state=open]:bg-neutral-100 dark:data-[state=open]:bg-neutral-700",
|
|
2389
|
+
"dark:focus-visible:bg-primary-600 dark:focus-visible:text-white",
|
|
2390
|
+
inset && "pl-8",
|
|
2391
|
+
className
|
|
2392
|
+
),
|
|
2393
|
+
...props,
|
|
2394
|
+
children: [
|
|
2395
|
+
children,
|
|
2396
|
+
/* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-auto h-4 w-4" })
|
|
2397
|
+
]
|
|
2398
|
+
}
|
|
2399
|
+
));
|
|
2400
|
+
DropdownMenuSubTrigger.displayName = "DropdownMenuSubTrigger";
|
|
2401
|
+
var DropdownMenuSubContent = React39.forwardRef(({ className, variant, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
|
|
2402
|
+
DropdownMenuPrimitive.SubContent,
|
|
2403
|
+
{
|
|
2404
|
+
ref,
|
|
2405
|
+
className: cn(dropdownMenuContentVariants({ variant }), className),
|
|
2406
|
+
...props
|
|
2407
|
+
}
|
|
2408
|
+
) }));
|
|
2409
|
+
DropdownMenuSubContent.displayName = "DropdownMenuSubContent";
|
|
2410
|
+
var AlertDialog = AlertDialogPrimitive.Root;
|
|
2411
|
+
var AlertDialogTrigger = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Trigger, { ref, className: cn(className), ...props }));
|
|
2412
|
+
AlertDialogTrigger.displayName = AlertDialogPrimitive.Trigger.displayName;
|
|
2413
|
+
var AlertDialogOverlay = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
2414
|
+
AlertDialogPrimitive.Overlay,
|
|
2415
|
+
{
|
|
2416
|
+
ref,
|
|
2417
|
+
className: cn(
|
|
2418
|
+
"fixed inset-0 z-50 bg-black/50",
|
|
2419
|
+
"data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out",
|
|
2420
|
+
className
|
|
2421
|
+
),
|
|
2422
|
+
...props
|
|
2423
|
+
}
|
|
2424
|
+
));
|
|
2425
|
+
AlertDialogOverlay.displayName = "AlertDialogOverlay";
|
|
2426
|
+
var alertDialogContentVariants = cva(
|
|
2427
|
+
"fixed left-1/2 top-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 rounded-lg p-6 shadow-lg outline-none data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out",
|
|
2428
|
+
{
|
|
2429
|
+
variants: {
|
|
2430
|
+
variant: {
|
|
2431
|
+
default: "border border-neutral-200 bg-white text-neutral-900 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-100",
|
|
2432
|
+
destructive: "border border-neutral-200 border-t-4 border-t-error-500 bg-white text-neutral-900 dark:border-neutral-700 dark:border-t-error-500 dark:bg-neutral-800 dark:text-neutral-100"
|
|
2433
|
+
}
|
|
2434
|
+
},
|
|
2435
|
+
defaultVariants: {
|
|
2436
|
+
variant: "default"
|
|
2437
|
+
}
|
|
2438
|
+
}
|
|
2439
|
+
);
|
|
2440
|
+
var AlertDialogContent = React39.forwardRef(({ className, variant, children, ...props }, ref) => /* @__PURE__ */ jsxs(AlertDialogPrimitive.Portal, { children: [
|
|
2441
|
+
/* @__PURE__ */ jsx(AlertDialogOverlay, {}),
|
|
2442
|
+
/* @__PURE__ */ jsx(
|
|
2443
|
+
AlertDialogPrimitive.Content,
|
|
2444
|
+
{
|
|
2445
|
+
ref,
|
|
2446
|
+
className: cn(alertDialogContentVariants({ variant }), className),
|
|
2447
|
+
...props,
|
|
2448
|
+
children
|
|
2449
|
+
}
|
|
2450
|
+
)
|
|
2451
|
+
] }));
|
|
2452
|
+
AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
|
|
2453
|
+
var AlertDialogHeader = React39.forwardRef(
|
|
2454
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex flex-col gap-2", className), ...props })
|
|
2455
|
+
);
|
|
2456
|
+
AlertDialogHeader.displayName = "AlertDialogHeader";
|
|
2457
|
+
var AlertDialogFooter = React39.forwardRef(
|
|
2458
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
2459
|
+
"div",
|
|
2460
|
+
{
|
|
2461
|
+
ref,
|
|
2462
|
+
className: cn("flex justify-end gap-2 mt-4", className),
|
|
2463
|
+
...props
|
|
2464
|
+
}
|
|
2465
|
+
)
|
|
2466
|
+
);
|
|
2467
|
+
AlertDialogFooter.displayName = "AlertDialogFooter";
|
|
2468
|
+
var AlertDialogTitle = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
2469
|
+
AlertDialogPrimitive.Title,
|
|
2470
|
+
{
|
|
2471
|
+
ref,
|
|
2472
|
+
className: cn(
|
|
2473
|
+
"text-lg font-semibold text-neutral-900 dark:text-neutral-100",
|
|
2474
|
+
className
|
|
2475
|
+
),
|
|
2476
|
+
...props
|
|
2477
|
+
}
|
|
2478
|
+
));
|
|
2479
|
+
AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
|
|
2480
|
+
var AlertDialogDescription = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
2481
|
+
AlertDialogPrimitive.Description,
|
|
2482
|
+
{
|
|
2483
|
+
ref,
|
|
2484
|
+
className: cn("text-sm text-neutral-500 dark:text-neutral-400", className),
|
|
2485
|
+
...props
|
|
2486
|
+
}
|
|
2487
|
+
));
|
|
2488
|
+
AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
|
|
2489
|
+
var AlertDialogAction = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Action, { ref, className: cn(className), ...props }));
|
|
2490
|
+
AlertDialogAction.displayName = "AlertDialogAction";
|
|
2491
|
+
var AlertDialogCancel = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Cancel, { ref, className: cn(className), ...props }));
|
|
2492
|
+
AlertDialogCancel.displayName = "AlertDialogCancel";
|
|
2493
|
+
var Accordion = AccordionPrimitive.Root;
|
|
2494
|
+
var AccordionItem = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
2495
|
+
AccordionPrimitive.Item,
|
|
2496
|
+
{
|
|
2497
|
+
ref,
|
|
2498
|
+
className: cn("border-b border-neutral-200 dark:border-neutral-700", className),
|
|
2499
|
+
...props
|
|
2500
|
+
}
|
|
2501
|
+
));
|
|
2502
|
+
AccordionItem.displayName = "AccordionItem";
|
|
2503
|
+
var AccordionTrigger = React39.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs(
|
|
2504
|
+
AccordionPrimitive.Trigger,
|
|
2505
|
+
{
|
|
2506
|
+
ref,
|
|
2507
|
+
className: cn(
|
|
2508
|
+
"flex flex-1 cursor-pointer items-center justify-between py-4 text-sm font-medium transition-all",
|
|
2509
|
+
"hover:underline",
|
|
2510
|
+
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
|
|
2511
|
+
"[&[data-state=open]>svg]:rotate-180",
|
|
2512
|
+
className
|
|
2513
|
+
),
|
|
2514
|
+
...props,
|
|
2515
|
+
children: [
|
|
2516
|
+
children,
|
|
2517
|
+
/* @__PURE__ */ jsx(
|
|
2518
|
+
"svg",
|
|
2519
|
+
{
|
|
2520
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
2521
|
+
width: "16",
|
|
2522
|
+
height: "16",
|
|
2523
|
+
viewBox: "0 0 24 24",
|
|
2524
|
+
fill: "none",
|
|
2525
|
+
stroke: "currentColor",
|
|
2526
|
+
strokeWidth: "2",
|
|
2527
|
+
strokeLinecap: "round",
|
|
2528
|
+
strokeLinejoin: "round",
|
|
2529
|
+
className: "shrink-0 text-neutral-500 transition-transform duration-normal dark:text-neutral-400",
|
|
2530
|
+
"aria-hidden": "true",
|
|
2531
|
+
children: /* @__PURE__ */ jsx("polyline", { points: "6 9 12 15 18 9" })
|
|
2532
|
+
}
|
|
2533
|
+
)
|
|
2534
|
+
]
|
|
2535
|
+
}
|
|
2536
|
+
) }));
|
|
2537
|
+
AccordionTrigger.displayName = "AccordionTrigger";
|
|
2538
|
+
var AccordionContent = React39.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
2539
|
+
AccordionPrimitive.Content,
|
|
2540
|
+
{
|
|
2541
|
+
ref,
|
|
2542
|
+
className: "overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
|
|
2543
|
+
...props,
|
|
2544
|
+
children: /* @__PURE__ */ jsx("div", { className: cn("pb-4 pt-0", className), children })
|
|
2545
|
+
}
|
|
2546
|
+
));
|
|
2547
|
+
AccordionContent.displayName = "AccordionContent";
|
|
2548
|
+
var Separator2 = React39.forwardRef(
|
|
2549
|
+
({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
2550
|
+
SeparatorPrimitive.Root,
|
|
2551
|
+
{
|
|
2552
|
+
ref,
|
|
2553
|
+
decorative,
|
|
2554
|
+
orientation,
|
|
2555
|
+
className: cn(
|
|
2556
|
+
"shrink-0 bg-neutral-200 dark:bg-neutral-700",
|
|
2557
|
+
orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
|
|
2558
|
+
className
|
|
2559
|
+
),
|
|
2560
|
+
...props
|
|
2561
|
+
}
|
|
2562
|
+
)
|
|
2563
|
+
);
|
|
2564
|
+
Separator2.displayName = "Separator";
|
|
2565
|
+
var Breadcrumb = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
2566
|
+
"nav",
|
|
2567
|
+
{
|
|
2568
|
+
ref,
|
|
2569
|
+
"aria-label": "Breadcrumb",
|
|
2570
|
+
className: cn(className),
|
|
2571
|
+
...props
|
|
2572
|
+
}
|
|
2573
|
+
));
|
|
2574
|
+
Breadcrumb.displayName = "Breadcrumb";
|
|
2575
|
+
var BreadcrumbList = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
2576
|
+
"ol",
|
|
2577
|
+
{
|
|
2578
|
+
ref,
|
|
2579
|
+
className: cn(
|
|
2580
|
+
"flex flex-wrap items-center gap-1.5 text-sm text-neutral-500 dark:text-neutral-400",
|
|
2581
|
+
className
|
|
2582
|
+
),
|
|
2583
|
+
...props
|
|
2584
|
+
}
|
|
2585
|
+
));
|
|
2586
|
+
BreadcrumbList.displayName = "BreadcrumbList";
|
|
2587
|
+
var BreadcrumbItem = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
2588
|
+
"li",
|
|
2589
|
+
{
|
|
2590
|
+
ref,
|
|
2591
|
+
className: cn("inline-flex items-center gap-1.5", className),
|
|
2592
|
+
...props
|
|
2593
|
+
}
|
|
2594
|
+
));
|
|
2595
|
+
BreadcrumbItem.displayName = "BreadcrumbItem";
|
|
2596
|
+
var BreadcrumbLink = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
2597
|
+
"a",
|
|
2598
|
+
{
|
|
2599
|
+
ref,
|
|
2600
|
+
className: cn(
|
|
2601
|
+
"cursor-pointer transition-colors hover:text-neutral-900 dark:hover:text-neutral-100",
|
|
2602
|
+
className
|
|
2603
|
+
),
|
|
2604
|
+
...props
|
|
2605
|
+
}
|
|
2606
|
+
));
|
|
2607
|
+
BreadcrumbLink.displayName = "BreadcrumbLink";
|
|
2608
|
+
var BreadcrumbPage = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
2609
|
+
"span",
|
|
2610
|
+
{
|
|
2611
|
+
ref,
|
|
2612
|
+
role: "link",
|
|
2613
|
+
"aria-disabled": "true",
|
|
2614
|
+
"aria-current": "page",
|
|
2615
|
+
className: cn("font-medium text-neutral-900 dark:text-neutral-100", className),
|
|
2616
|
+
...props
|
|
2617
|
+
}
|
|
2618
|
+
));
|
|
2619
|
+
BreadcrumbPage.displayName = "BreadcrumbPage";
|
|
2620
|
+
var BreadcrumbSeparator = ({
|
|
2621
|
+
children,
|
|
2622
|
+
className,
|
|
2623
|
+
...props
|
|
2624
|
+
}) => /* @__PURE__ */ jsx(
|
|
2625
|
+
"li",
|
|
2626
|
+
{
|
|
2627
|
+
role: "presentation",
|
|
2628
|
+
"aria-hidden": "true",
|
|
2629
|
+
className: cn("text-neutral-400 dark:text-neutral-500", className),
|
|
2630
|
+
...props,
|
|
2631
|
+
children: children ?? "/"
|
|
2632
|
+
}
|
|
2633
|
+
);
|
|
2634
|
+
BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
|
|
2635
|
+
|
|
2636
|
+
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogTitle, AlertDialogTrigger, AlertTitle, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, CTA, Card, CardContent, CardFooter, CardHeader, CartItem, Checkbox, Container, DataCard, DataTable, DataTableBody, DataTableCell, DataTableFooter, DataTableHead, DataTableHeader, DataTableRow, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FeatureCard, FeatureGrid, Flex, Form, FormField, Grid, Hero, Input, Modal, ModalBody, ModalClose, ModalContent, ModalDescription, ModalHeader, ModalOverlay, ModalPortal, ModalTitle, ModalTrigger, Popover, PopoverArrow, PopoverClose, PopoverContent, PopoverProvider, PopoverTrigger, PriceTag, ProductCard, Progress, QuantitySelector, RadioGroup, RadioGroupItem, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue, Separator2 as Separator, Skeleton, Spacer, Spinner, Stack, Stat, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Testimonial, Textarea, Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipTrigger, alertDialogContentVariants, alertVariants, avatarVariants, badgeVariants, buttonVariants, cardVariants, cartItemVariants, checkboxVariants, cn, containerVariants, ctaVariants, dataCardVariants, dataTableVariants, drawerContentVariants, dropdownMenuContentVariants, featureCardVariants, featureGridVariants, flexVariants, formFieldVariants, formVariants, gridVariants, heroVariants, inputVariants, modalContentVariants, popoverContentVariants, priceTagVariants, productCardVariants, progressIndicatorVariants, progressVariants, quantitySelectorVariants, radioGroupItemVariants, radioGroupVariants, selectContentVariants, selectItemVariants, selectTriggerVariants, spacerVariants, spinnerVariants, stackVariants, statVariants, switchThumbVariants, switchVariants, tabsContentVariants, tabsListVariants, tabsTriggerVariants, testimonialVariants, textareaVariants, toast, toastStore, toastVariants, tooltipContentVariants, useToastStore, viewportVariants };
|
|
2637
|
+
//# sourceMappingURL=index.js.map
|
|
2638
|
+
//# sourceMappingURL=index.js.map
|