@moontra/moonui 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +840 -4
- package/dist/index.d.ts +840 -4
- package/dist/index.js +3513 -41
- package/dist/index.mjs +3416 -40
- package/package.json +5 -2
package/dist/index.js
CHANGED
|
@@ -29,7 +29,23 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
29
29
|
// src/index.tsx
|
|
30
30
|
var src_exports = {};
|
|
31
31
|
__export(src_exports, {
|
|
32
|
+
Accordion: () => Accordion,
|
|
33
|
+
AccordionContent: () => AccordionContent,
|
|
34
|
+
AccordionItem: () => AccordionItem,
|
|
35
|
+
AccordionTrigger: () => AccordionTrigger,
|
|
36
|
+
Alert: () => Alert,
|
|
37
|
+
AlertDescription: () => AlertDescription,
|
|
38
|
+
AlertTitle: () => AlertTitle,
|
|
39
|
+
AspectRatio: () => AspectRatio,
|
|
40
|
+
Avatar: () => Avatar,
|
|
41
|
+
AvatarFallback: () => AvatarFallback,
|
|
42
|
+
AvatarImage: () => AvatarImage,
|
|
32
43
|
Badge: () => Badge,
|
|
44
|
+
Breadcrumb: () => Breadcrumb,
|
|
45
|
+
BreadcrumbEllipsis: () => BreadcrumbEllipsis,
|
|
46
|
+
BreadcrumbItem: () => BreadcrumbItem,
|
|
47
|
+
BreadcrumbList: () => BreadcrumbList,
|
|
48
|
+
BreadcrumbSeparator: () => BreadcrumbSeparator,
|
|
33
49
|
Button: () => Button,
|
|
34
50
|
Card: () => Card,
|
|
35
51
|
CardContent: () => CardContent,
|
|
@@ -37,14 +53,94 @@ __export(src_exports, {
|
|
|
37
53
|
CardFooter: () => CardFooter,
|
|
38
54
|
CardHeader: () => CardHeader,
|
|
39
55
|
CardTitle: () => CardTitle,
|
|
56
|
+
Checkbox: () => Checkbox,
|
|
57
|
+
CheckboxGroup: () => CheckboxGroup,
|
|
58
|
+
CheckboxLabel: () => CheckboxLabel,
|
|
59
|
+
CheckboxWithLabel: () => CheckboxWithLabel,
|
|
60
|
+
Collapsible: () => Collapsible2,
|
|
61
|
+
CollapsibleContent: () => CollapsibleContent2,
|
|
62
|
+
CollapsibleTrigger: () => CollapsibleTrigger2,
|
|
63
|
+
Command: () => Command,
|
|
64
|
+
CommandDialog: () => CommandDialog,
|
|
65
|
+
CommandEmpty: () => CommandEmpty,
|
|
66
|
+
CommandGroup: () => CommandGroup,
|
|
67
|
+
CommandInput: () => CommandInput,
|
|
68
|
+
CommandItem: () => CommandItem,
|
|
69
|
+
CommandList: () => CommandList,
|
|
70
|
+
CommandSeparator: () => CommandSeparator,
|
|
71
|
+
CommandShortcut: () => CommandShortcut,
|
|
72
|
+
Dialog: () => Dialog,
|
|
73
|
+
DialogClose: () => DialogClose,
|
|
74
|
+
DialogContent: () => DialogContent,
|
|
75
|
+
DialogDescription: () => DialogDescription,
|
|
76
|
+
DialogFooter: () => DialogFooter,
|
|
77
|
+
DialogForm: () => DialogForm,
|
|
78
|
+
DialogHeader: () => DialogHeader,
|
|
79
|
+
DialogTitle: () => DialogTitle,
|
|
80
|
+
DialogTrigger: () => DialogTrigger,
|
|
81
|
+
Input: () => Input,
|
|
82
|
+
Popover: () => Popover,
|
|
83
|
+
PopoverAnchor: () => PopoverAnchor,
|
|
84
|
+
PopoverClose: () => PopoverClose,
|
|
85
|
+
PopoverContent: () => PopoverContent,
|
|
86
|
+
PopoverFooter: () => PopoverFooter,
|
|
87
|
+
PopoverHeader: () => PopoverHeader,
|
|
88
|
+
PopoverSeparator: () => PopoverSeparator,
|
|
89
|
+
PopoverTrigger: () => PopoverTrigger,
|
|
90
|
+
Progress: () => Progress,
|
|
91
|
+
RadioGroup: () => RadioGroup,
|
|
92
|
+
RadioGroupItem: () => RadioGroupItem,
|
|
93
|
+
RadioItemWithLabel: () => RadioItemWithLabel,
|
|
94
|
+
RadioLabel: () => RadioLabel,
|
|
95
|
+
Select: () => Select,
|
|
96
|
+
SelectContent: () => SelectContent,
|
|
97
|
+
SelectGroup: () => SelectGroup,
|
|
98
|
+
SelectItem: () => SelectItem,
|
|
99
|
+
SelectLabel: () => SelectLabel,
|
|
100
|
+
SelectSeparator: () => SelectSeparator,
|
|
101
|
+
SelectTrigger: () => SelectTrigger,
|
|
102
|
+
SelectValue: () => SelectValue,
|
|
103
|
+
Skeleton: () => Skeleton,
|
|
104
|
+
SkeletonAvatar: () => SkeletonAvatar,
|
|
105
|
+
SkeletonCard: () => SkeletonCard,
|
|
106
|
+
SkeletonText: () => SkeletonText,
|
|
107
|
+
Switch: () => Switch,
|
|
108
|
+
Tabs: () => Tabs,
|
|
109
|
+
TabsContent: () => TabsContent,
|
|
110
|
+
TabsList: () => TabsList,
|
|
111
|
+
TabsTrigger: () => TabsTrigger,
|
|
112
|
+
ThemeProvider: () => ThemeProvider2,
|
|
113
|
+
Toast: () => Toast,
|
|
114
|
+
ToastContainer: () => ToastContainer,
|
|
115
|
+
ToastProvider: () => ToastProvider,
|
|
116
|
+
Tooltip: () => Tooltip,
|
|
117
|
+
accordionContentVariants: () => accordionContentVariants,
|
|
118
|
+
accordionItemVariants: () => accordionItemVariants,
|
|
119
|
+
accordionTriggerVariants: () => accordionTriggerVariants,
|
|
120
|
+
aspectRatioVariants: () => aspectRatioVariants,
|
|
40
121
|
badgeVariants: () => badgeVariants,
|
|
41
122
|
buttonVariants: () => buttonVariants,
|
|
42
123
|
cn: () => cn,
|
|
124
|
+
collapsibleContentVariants: () => collapsibleContentVariants,
|
|
125
|
+
collapsibleTriggerVariants: () => collapsibleTriggerVariants,
|
|
43
126
|
combineRefs: () => combineRefs,
|
|
127
|
+
commandGroupVariants: () => commandGroupVariants,
|
|
128
|
+
commandInputVariants: () => commandInputVariants,
|
|
129
|
+
commandItemVariants: () => commandItemVariants,
|
|
130
|
+
commandListVariants: () => commandListVariants,
|
|
131
|
+
commandVariants: () => commandVariants,
|
|
132
|
+
createCssVariables: () => createCssVariables,
|
|
44
133
|
debounce: () => debounce,
|
|
45
134
|
formatCurrency: () => formatCurrency,
|
|
46
135
|
generateId: () => generateId,
|
|
47
|
-
get: () => get
|
|
136
|
+
get: () => get,
|
|
137
|
+
popoverContentVariants: () => popoverContentVariants,
|
|
138
|
+
progressVariants: () => progressVariants,
|
|
139
|
+
skeletonVariants: () => skeletonVariants,
|
|
140
|
+
toastVariants: () => toastVariants,
|
|
141
|
+
tooltipContentVariants: () => tooltipContentVariants,
|
|
142
|
+
useTheme: () => useTheme,
|
|
143
|
+
useToast: () => useToast
|
|
48
144
|
});
|
|
49
145
|
module.exports = __toCommonJS(src_exports);
|
|
50
146
|
|
|
@@ -95,29 +191,303 @@ function combineRefs(...refs) {
|
|
|
95
191
|
};
|
|
96
192
|
}
|
|
97
193
|
|
|
194
|
+
// src/components/theme-provider.tsx
|
|
195
|
+
var import_react2 = require("react");
|
|
196
|
+
|
|
197
|
+
// src/lib/theme.tsx
|
|
198
|
+
var import_react = require("react");
|
|
199
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
200
|
+
var modernTheme = {
|
|
201
|
+
borderRadius: {
|
|
202
|
+
sm: "0.5rem",
|
|
203
|
+
md: "0.75rem",
|
|
204
|
+
lg: "1rem",
|
|
205
|
+
full: "9999px"
|
|
206
|
+
},
|
|
207
|
+
colors: {
|
|
208
|
+
primary: "hsl(250, 95%, 64%)",
|
|
209
|
+
secondary: "hsl(250, 70%, 80%)",
|
|
210
|
+
success: "hsl(142, 71%, 45%)",
|
|
211
|
+
warning: "hsl(38, 92%, 50%)",
|
|
212
|
+
error: "hsl(0, 84%, 60%)",
|
|
213
|
+
background: "hsl(0, 0%, 100%)",
|
|
214
|
+
foreground: "hsl(221, 39%, 11%)",
|
|
215
|
+
card: "hsl(0, 0%, 100%)",
|
|
216
|
+
cardForeground: "hsl(221, 39%, 11%)",
|
|
217
|
+
border: "hsl(210, 20%, 90%)",
|
|
218
|
+
muted: "hsl(210, 20%, 96%)",
|
|
219
|
+
mutedForeground: "hsl(215, 16%, 47%)",
|
|
220
|
+
accent: "hsl(328, 85%, 70%)",
|
|
221
|
+
accentForeground: "hsl(210, 20%, 98%)"
|
|
222
|
+
}
|
|
223
|
+
};
|
|
224
|
+
var roundedTheme = {
|
|
225
|
+
borderRadius: {
|
|
226
|
+
sm: "1rem",
|
|
227
|
+
md: "1.25rem",
|
|
228
|
+
lg: "1.5rem",
|
|
229
|
+
full: "9999px"
|
|
230
|
+
}
|
|
231
|
+
};
|
|
232
|
+
var minimalTheme = {
|
|
233
|
+
borderRadius: {
|
|
234
|
+
sm: "0.125rem",
|
|
235
|
+
md: "0.25rem",
|
|
236
|
+
lg: "0.375rem",
|
|
237
|
+
full: "9999px"
|
|
238
|
+
},
|
|
239
|
+
colors: {
|
|
240
|
+
primary: "hsl(220, 14%, 40%)",
|
|
241
|
+
secondary: "hsl(220, 9%, 60%)",
|
|
242
|
+
success: "hsl(142, 71%, 45%)",
|
|
243
|
+
warning: "hsl(38, 92%, 50%)",
|
|
244
|
+
error: "hsl(0, 84%, 60%)",
|
|
245
|
+
background: "hsl(0, 0%, 100%)",
|
|
246
|
+
foreground: "hsl(221, 39%, 11%)",
|
|
247
|
+
card: "hsl(0, 0%, 100%)",
|
|
248
|
+
cardForeground: "hsl(221, 39%, 11%)",
|
|
249
|
+
border: "hsl(220, 13%, 91%)",
|
|
250
|
+
muted: "hsl(220, 14%, 96%)",
|
|
251
|
+
mutedForeground: "hsl(215, 16%, 47%)",
|
|
252
|
+
accent: "hsl(210, 20%, 96%)",
|
|
253
|
+
accentForeground: "hsl(221, 39%, 11%)"
|
|
254
|
+
}
|
|
255
|
+
};
|
|
256
|
+
var defaultLightTheme = {
|
|
257
|
+
colors: {
|
|
258
|
+
primary: "hsl(221, 83%, 53%)",
|
|
259
|
+
secondary: "hsl(215, 20%, 65%)",
|
|
260
|
+
success: "hsl(142, 71%, 45%)",
|
|
261
|
+
warning: "hsl(38, 92%, 50%)",
|
|
262
|
+
error: "hsl(0, 84%, 60%)",
|
|
263
|
+
background: "hsl(0, 0%, 100%)",
|
|
264
|
+
foreground: "hsl(221, 39%, 11%)",
|
|
265
|
+
card: "hsl(0, 0%, 100%)",
|
|
266
|
+
cardForeground: "hsl(221, 39%, 11%)",
|
|
267
|
+
border: "hsl(210, 20%, 90%)",
|
|
268
|
+
muted: "hsl(210, 20%, 96%)",
|
|
269
|
+
mutedForeground: "hsl(215, 16%, 47%)",
|
|
270
|
+
accent: "hsl(210, 20%, 96%)",
|
|
271
|
+
accentForeground: "hsl(221, 39%, 11%)"
|
|
272
|
+
},
|
|
273
|
+
borderRadius: {
|
|
274
|
+
sm: "0.25rem",
|
|
275
|
+
md: "0.375rem",
|
|
276
|
+
lg: "0.5rem",
|
|
277
|
+
full: "9999px"
|
|
278
|
+
},
|
|
279
|
+
fontSizes: {
|
|
280
|
+
xs: "0.75rem",
|
|
281
|
+
sm: "0.875rem",
|
|
282
|
+
base: "1rem",
|
|
283
|
+
lg: "1.125rem",
|
|
284
|
+
xl: "1.25rem",
|
|
285
|
+
"2xl": "1.5rem",
|
|
286
|
+
"3xl": "1.875rem"
|
|
287
|
+
},
|
|
288
|
+
spacing: {
|
|
289
|
+
1: "0.25rem",
|
|
290
|
+
2: "0.5rem",
|
|
291
|
+
4: "1rem",
|
|
292
|
+
6: "1.5rem",
|
|
293
|
+
8: "2rem"
|
|
294
|
+
}
|
|
295
|
+
};
|
|
296
|
+
var defaultDarkTheme = {
|
|
297
|
+
...defaultLightTheme,
|
|
298
|
+
colors: {
|
|
299
|
+
primary: "hsl(221, 83%, 53%)",
|
|
300
|
+
secondary: "hsl(215, 20%, 65%)",
|
|
301
|
+
success: "hsl(142, 71%, 45%)",
|
|
302
|
+
warning: "hsl(38, 92%, 50%)",
|
|
303
|
+
error: "hsl(0, 84%, 60%)",
|
|
304
|
+
background: "hsl(221, 39%, 11%)",
|
|
305
|
+
foreground: "hsl(210, 20%, 98%)",
|
|
306
|
+
card: "hsl(220, 26%, 14%)",
|
|
307
|
+
cardForeground: "hsl(210, 20%, 98%)",
|
|
308
|
+
border: "hsl(215, 28%, 17%)",
|
|
309
|
+
muted: "hsl(215, 27%, 16%)",
|
|
310
|
+
mutedForeground: "hsl(215, 16%, 57%)",
|
|
311
|
+
accent: "hsl(215, 27%, 16%)",
|
|
312
|
+
accentForeground: "hsl(210, 20%, 98%)"
|
|
313
|
+
}
|
|
314
|
+
};
|
|
315
|
+
var ThemeContext = (0, import_react.createContext)(void 0);
|
|
316
|
+
var getPresetTheme = (preset) => {
|
|
317
|
+
switch (preset) {
|
|
318
|
+
case "modern":
|
|
319
|
+
return modernTheme;
|
|
320
|
+
case "rounded":
|
|
321
|
+
return roundedTheme;
|
|
322
|
+
case "minimal":
|
|
323
|
+
return minimalTheme;
|
|
324
|
+
default:
|
|
325
|
+
return {};
|
|
326
|
+
}
|
|
327
|
+
};
|
|
328
|
+
var ThemeProvider = ({
|
|
329
|
+
children,
|
|
330
|
+
defaultColorMode = "light",
|
|
331
|
+
preset = "default",
|
|
332
|
+
lightTheme = {},
|
|
333
|
+
darkTheme = {},
|
|
334
|
+
extensions = {}
|
|
335
|
+
}) => {
|
|
336
|
+
const [colorMode, setColorMode] = (0, import_react.useState)(defaultColorMode);
|
|
337
|
+
const presetThemeValues = getPresetTheme(preset);
|
|
338
|
+
const [customLightTheme, setCustomLightTheme] = (0, import_react.useState)({
|
|
339
|
+
...defaultLightTheme,
|
|
340
|
+
...presetThemeValues,
|
|
341
|
+
...lightTheme,
|
|
342
|
+
colors: {
|
|
343
|
+
...defaultLightTheme.colors,
|
|
344
|
+
...presetThemeValues.colors || {},
|
|
345
|
+
...lightTheme.colors || {}
|
|
346
|
+
},
|
|
347
|
+
extensions
|
|
348
|
+
});
|
|
349
|
+
const [customDarkTheme, setCustomDarkTheme] = (0, import_react.useState)({
|
|
350
|
+
...defaultDarkTheme,
|
|
351
|
+
...presetThemeValues,
|
|
352
|
+
...darkTheme,
|
|
353
|
+
colors: {
|
|
354
|
+
...defaultDarkTheme.colors,
|
|
355
|
+
...presetThemeValues.colors || {},
|
|
356
|
+
...darkTheme.colors || {}
|
|
357
|
+
},
|
|
358
|
+
extensions
|
|
359
|
+
});
|
|
360
|
+
const theme = (0, import_react.useMemo)(() => {
|
|
361
|
+
return colorMode === "light" ? customLightTheme : customDarkTheme;
|
|
362
|
+
}, [colorMode, customLightTheme, customDarkTheme]);
|
|
363
|
+
const updateTheme = (config) => {
|
|
364
|
+
if (colorMode === "light") {
|
|
365
|
+
setCustomLightTheme((prev) => ({
|
|
366
|
+
...prev,
|
|
367
|
+
...config,
|
|
368
|
+
colors: {
|
|
369
|
+
...prev.colors,
|
|
370
|
+
...config.colors || {}
|
|
371
|
+
},
|
|
372
|
+
extensions: {
|
|
373
|
+
...prev.extensions || {},
|
|
374
|
+
...config.extensions || {}
|
|
375
|
+
}
|
|
376
|
+
}));
|
|
377
|
+
} else {
|
|
378
|
+
setCustomDarkTheme((prev) => ({
|
|
379
|
+
...prev,
|
|
380
|
+
...config,
|
|
381
|
+
colors: {
|
|
382
|
+
...prev.colors,
|
|
383
|
+
...config.colors || {}
|
|
384
|
+
},
|
|
385
|
+
extensions: {
|
|
386
|
+
...prev.extensions || {},
|
|
387
|
+
...config.extensions || {}
|
|
388
|
+
}
|
|
389
|
+
}));
|
|
390
|
+
}
|
|
391
|
+
};
|
|
392
|
+
const setThemePreset = (preset2) => {
|
|
393
|
+
const presetValues = getPresetTheme(preset2);
|
|
394
|
+
updateTheme({
|
|
395
|
+
...presetValues,
|
|
396
|
+
colors: presetValues.colors
|
|
397
|
+
});
|
|
398
|
+
};
|
|
399
|
+
const value = {
|
|
400
|
+
theme,
|
|
401
|
+
colorMode,
|
|
402
|
+
setColorMode,
|
|
403
|
+
updateTheme,
|
|
404
|
+
setThemePreset
|
|
405
|
+
};
|
|
406
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeContext.Provider, { value, children });
|
|
407
|
+
};
|
|
408
|
+
var useTheme = () => {
|
|
409
|
+
const context = (0, import_react.useContext)(ThemeContext);
|
|
410
|
+
if (context === void 0) {
|
|
411
|
+
throw new Error("useTheme must be used within a ThemeProvider");
|
|
412
|
+
}
|
|
413
|
+
return context;
|
|
414
|
+
};
|
|
415
|
+
var createCssVariables = (theme) => {
|
|
416
|
+
const variables = {};
|
|
417
|
+
Object.entries(theme.colors).forEach(([key, value]) => {
|
|
418
|
+
variables[`--color-${key}`] = value;
|
|
419
|
+
});
|
|
420
|
+
Object.entries(theme.borderRadius).forEach(([key, value]) => {
|
|
421
|
+
variables[`--radius-${key}`] = value;
|
|
422
|
+
});
|
|
423
|
+
Object.entries(theme.fontSizes).forEach(([key, value]) => {
|
|
424
|
+
variables[`--font-size-${key}`] = value;
|
|
425
|
+
});
|
|
426
|
+
Object.entries(theme.spacing).forEach(([key, value]) => {
|
|
427
|
+
variables[`--space-${key}`] = value;
|
|
428
|
+
});
|
|
429
|
+
if (theme.extensions) {
|
|
430
|
+
Object.entries(theme.extensions).forEach(([categoryKey, categoryValue]) => {
|
|
431
|
+
if (typeof categoryValue === "object" && categoryValue !== null) {
|
|
432
|
+
Object.entries(categoryValue).forEach(([key, value]) => {
|
|
433
|
+
variables[`--${categoryKey}-${key}`] = value;
|
|
434
|
+
});
|
|
435
|
+
} else if (typeof categoryValue === "string") {
|
|
436
|
+
variables[`--${categoryKey}`] = categoryValue;
|
|
437
|
+
}
|
|
438
|
+
});
|
|
439
|
+
}
|
|
440
|
+
return variables;
|
|
441
|
+
};
|
|
442
|
+
|
|
443
|
+
// src/components/theme-provider.tsx
|
|
444
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
445
|
+
var CssVariablesInjector = () => {
|
|
446
|
+
const { theme } = useTheme();
|
|
447
|
+
(0, import_react2.useEffect)(() => {
|
|
448
|
+
const variables = createCssVariables(theme);
|
|
449
|
+
const root = document.documentElement;
|
|
450
|
+
Object.entries(variables).forEach(([key, value]) => {
|
|
451
|
+
root.style.setProperty(key, value);
|
|
452
|
+
});
|
|
453
|
+
return () => {
|
|
454
|
+
Object.keys(variables).forEach((key) => {
|
|
455
|
+
root.style.removeProperty(key);
|
|
456
|
+
});
|
|
457
|
+
};
|
|
458
|
+
}, [theme]);
|
|
459
|
+
return null;
|
|
460
|
+
};
|
|
461
|
+
var ThemeProvider2 = (props) => {
|
|
462
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(ThemeProvider, { ...props, children: [
|
|
463
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CssVariablesInjector, {}),
|
|
464
|
+
props.children
|
|
465
|
+
] });
|
|
466
|
+
};
|
|
467
|
+
|
|
98
468
|
// src/components/ui/button.tsx
|
|
99
|
-
var
|
|
469
|
+
var React2 = __toESM(require("react"));
|
|
100
470
|
var import_class_variance_authority = require("class-variance-authority");
|
|
101
|
-
var
|
|
471
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
102
472
|
var buttonVariants = (0, import_class_variance_authority.cva)(
|
|
103
|
-
"inline-flex items-center justify-center
|
|
473
|
+
"inline-flex items-center justify-center transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
|
|
104
474
|
{
|
|
105
475
|
variants: {
|
|
106
476
|
variant: {
|
|
107
|
-
default: "bg-
|
|
108
|
-
destructive: "bg-
|
|
109
|
-
outline: "border border-
|
|
110
|
-
secondary: "bg-
|
|
111
|
-
ghost: "hover:bg-
|
|
112
|
-
link: "text-
|
|
113
|
-
primary: "bg-primary text-white hover:bg-primary/90",
|
|
114
|
-
success: "bg-
|
|
477
|
+
default: "bg-[var(--color-foreground)] text-[var(--color-background)] hover:bg-[var(--color-foreground)]/90",
|
|
478
|
+
destructive: "bg-[var(--color-error)] text-white hover:bg-[var(--color-error)]/90",
|
|
479
|
+
outline: "border border-[var(--color-border)] bg-[var(--color-background)] hover:bg-[var(--color-muted)] hover:text-[var(--color-foreground)]",
|
|
480
|
+
secondary: "bg-[var(--color-muted)] text-[var(--color-mutedForeground)] hover:bg-[var(--color-muted)]/80",
|
|
481
|
+
ghost: "hover:bg-[var(--color-muted)] hover:text-[var(--color-foreground)]",
|
|
482
|
+
link: "text-[var(--color-foreground)] underline-offset-4 hover:underline",
|
|
483
|
+
primary: "bg-[var(--color-primary)] text-white hover:bg-[var(--color-primary)]/90",
|
|
484
|
+
success: "bg-[var(--color-success)] text-white hover:bg-[var(--color-success)]/90"
|
|
115
485
|
},
|
|
116
486
|
size: {
|
|
117
|
-
default: "h-10 px-4 py-2",
|
|
118
|
-
sm: "h-9 rounded-
|
|
119
|
-
lg: "h-11 rounded-
|
|
120
|
-
icon: "h-10 w-10"
|
|
487
|
+
default: "h-10 px-4 py-2 rounded-[var(--radius-md)]",
|
|
488
|
+
sm: "h-9 rounded-[var(--radius-sm)] px-3 text-sm",
|
|
489
|
+
lg: "h-11 rounded-[var(--radius-lg)] px-8 text-base",
|
|
490
|
+
icon: "h-10 w-10 rounded-[var(--radius-md)]"
|
|
121
491
|
}
|
|
122
492
|
},
|
|
123
493
|
defaultVariants: {
|
|
@@ -126,15 +496,19 @@ var buttonVariants = (0, import_class_variance_authority.cva)(
|
|
|
126
496
|
}
|
|
127
497
|
}
|
|
128
498
|
);
|
|
129
|
-
var Button =
|
|
499
|
+
var Button = React2.forwardRef(
|
|
130
500
|
({ className, variant, size, asChild = false, ...props }, ref) => {
|
|
131
|
-
const Comp = asChild ?
|
|
132
|
-
return /* @__PURE__ */ (0,
|
|
501
|
+
const Comp = asChild ? React2.Fragment : "button";
|
|
502
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
133
503
|
Comp,
|
|
134
504
|
{
|
|
135
505
|
className: cn(buttonVariants({ variant, size, className })),
|
|
136
506
|
ref,
|
|
137
|
-
...props
|
|
507
|
+
...props,
|
|
508
|
+
style: {
|
|
509
|
+
// Özel tema değişkenleri burada da kullanılabilir
|
|
510
|
+
...props.style
|
|
511
|
+
}
|
|
138
512
|
}
|
|
139
513
|
);
|
|
140
514
|
}
|
|
@@ -143,19 +517,19 @@ Button.displayName = "Button";
|
|
|
143
517
|
|
|
144
518
|
// src/components/ui/badge.tsx
|
|
145
519
|
var import_class_variance_authority2 = require("class-variance-authority");
|
|
146
|
-
var
|
|
520
|
+
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
147
521
|
var badgeVariants = (0, import_class_variance_authority2.cva)(
|
|
148
|
-
"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-
|
|
522
|
+
"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2",
|
|
149
523
|
{
|
|
150
524
|
variants: {
|
|
151
525
|
variant: {
|
|
152
|
-
default: "border-transparent bg-primary text-
|
|
153
|
-
secondary: "border-transparent bg-secondary text-
|
|
154
|
-
destructive: "border-transparent bg-
|
|
155
|
-
outline: "text-foreground",
|
|
156
|
-
success: "border-transparent bg-
|
|
157
|
-
warning: "border-transparent bg-
|
|
158
|
-
info: "border-transparent bg-
|
|
526
|
+
default: "border-transparent bg-[var(--color-primary)] text-white hover:bg-[var(--color-primary)]/80",
|
|
527
|
+
secondary: "border-transparent bg-[var(--color-secondary)] text-white hover:bg-[var(--color-secondary)]/80",
|
|
528
|
+
destructive: "border-transparent bg-[var(--color-error)] text-white hover:bg-[var(--color-error)]/80",
|
|
529
|
+
outline: "border-[var(--color-border)] bg-transparent text-[var(--color-foreground)]",
|
|
530
|
+
success: "border-transparent bg-[var(--color-success)] text-white hover:bg-[var(--color-success)]/80",
|
|
531
|
+
warning: "border-transparent bg-[var(--color-warning)] text-white hover:bg-[var(--color-warning)]/80",
|
|
532
|
+
info: "border-transparent bg-[var(--color-primary)] text-white hover:bg-[var(--color-primary)]/80"
|
|
159
533
|
}
|
|
160
534
|
},
|
|
161
535
|
defaultVariants: {
|
|
@@ -164,25 +538,26 @@ var badgeVariants = (0, import_class_variance_authority2.cva)(
|
|
|
164
538
|
}
|
|
165
539
|
);
|
|
166
540
|
function Badge({ className, variant, ...props }) {
|
|
167
|
-
return /* @__PURE__ */ (0,
|
|
541
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: cn(badgeVariants({ variant }), className), ...props });
|
|
168
542
|
}
|
|
169
543
|
|
|
170
544
|
// src/components/ui/card.tsx
|
|
171
|
-
var
|
|
172
|
-
var
|
|
173
|
-
var Card =
|
|
545
|
+
var React3 = __toESM(require("react"));
|
|
546
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
547
|
+
var Card = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
174
548
|
"div",
|
|
175
549
|
{
|
|
176
550
|
ref,
|
|
177
551
|
className: cn(
|
|
178
|
-
"rounded-lg border
|
|
552
|
+
"rounded-lg border shadow-sm",
|
|
553
|
+
"border-[var(--color-border)] bg-[var(--color-card)] text-[var(--color-foreground)]",
|
|
179
554
|
className
|
|
180
555
|
),
|
|
181
556
|
...props
|
|
182
557
|
}
|
|
183
558
|
));
|
|
184
559
|
Card.displayName = "Card";
|
|
185
|
-
var CardHeader =
|
|
560
|
+
var CardHeader = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
186
561
|
"div",
|
|
187
562
|
{
|
|
188
563
|
ref,
|
|
@@ -191,7 +566,7 @@ var CardHeader = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE_
|
|
|
191
566
|
}
|
|
192
567
|
));
|
|
193
568
|
CardHeader.displayName = "CardHeader";
|
|
194
|
-
var CardTitle =
|
|
569
|
+
var CardTitle = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
195
570
|
"h3",
|
|
196
571
|
{
|
|
197
572
|
ref,
|
|
@@ -203,18 +578,18 @@ var CardTitle = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__
|
|
|
203
578
|
}
|
|
204
579
|
));
|
|
205
580
|
CardTitle.displayName = "CardTitle";
|
|
206
|
-
var CardDescription =
|
|
581
|
+
var CardDescription = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
207
582
|
"p",
|
|
208
583
|
{
|
|
209
584
|
ref,
|
|
210
|
-
className: cn("text-sm text-
|
|
585
|
+
className: cn("text-sm text-[var(--color-muted-foreground)]", className),
|
|
211
586
|
...props
|
|
212
587
|
}
|
|
213
588
|
));
|
|
214
589
|
CardDescription.displayName = "CardDescription";
|
|
215
|
-
var CardContent =
|
|
590
|
+
var CardContent = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ref, className: cn("p-6 pt-0", className), ...props }));
|
|
216
591
|
CardContent.displayName = "CardContent";
|
|
217
|
-
var CardFooter =
|
|
592
|
+
var CardFooter = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
218
593
|
"div",
|
|
219
594
|
{
|
|
220
595
|
ref,
|
|
@@ -223,9 +598,3026 @@ var CardFooter = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE_
|
|
|
223
598
|
}
|
|
224
599
|
));
|
|
225
600
|
CardFooter.displayName = "CardFooter";
|
|
601
|
+
|
|
602
|
+
// src/components/ui/input.tsx
|
|
603
|
+
var React4 = __toESM(require("react"));
|
|
604
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
605
|
+
var Input = React4.forwardRef(
|
|
606
|
+
({ className, type, ...props }, ref) => {
|
|
607
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
608
|
+
"input",
|
|
609
|
+
{
|
|
610
|
+
type,
|
|
611
|
+
className: cn(
|
|
612
|
+
"flex h-10 w-full rounded-[var(--radius-md)] border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium",
|
|
613
|
+
"border-[var(--color-border)] bg-[var(--color-background)] text-[var(--color-foreground)]",
|
|
614
|
+
"placeholder:text-[var(--color-muted-foreground)] focus-visible:outline-none focus-visible:ring-2",
|
|
615
|
+
"focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-background)]",
|
|
616
|
+
"disabled:cursor-not-allowed disabled:opacity-50",
|
|
617
|
+
className
|
|
618
|
+
),
|
|
619
|
+
ref,
|
|
620
|
+
...props
|
|
621
|
+
}
|
|
622
|
+
);
|
|
623
|
+
}
|
|
624
|
+
);
|
|
625
|
+
Input.displayName = "Input";
|
|
626
|
+
|
|
627
|
+
// src/components/ui/select.tsx
|
|
628
|
+
var React5 = __toESM(require("react"));
|
|
629
|
+
var SelectPrimitive = __toESM(require("@radix-ui/react-select"));
|
|
630
|
+
var import_lucide_react = require("lucide-react");
|
|
631
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
632
|
+
var Select = SelectPrimitive.Root;
|
|
633
|
+
var SelectGroup = SelectPrimitive.Group;
|
|
634
|
+
var SelectValue = SelectPrimitive.Value;
|
|
635
|
+
var SelectTrigger = React5.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
636
|
+
SelectPrimitive.Trigger,
|
|
637
|
+
{
|
|
638
|
+
ref,
|
|
639
|
+
className: cn(
|
|
640
|
+
"flex h-10 w-full items-center justify-between rounded-[var(--radius-md)] border px-3 py-2 text-sm [&>span]:line-clamp-1",
|
|
641
|
+
"border-[var(--color-border)] bg-[var(--color-background)] text-[var(--color-foreground)]",
|
|
642
|
+
"placeholder:text-[var(--color-muted-foreground)] focus:outline-none focus:ring-2",
|
|
643
|
+
"focus:ring-[var(--color-primary)] focus:ring-offset-2 focus:ring-offset-[var(--color-background)]",
|
|
644
|
+
"disabled:cursor-not-allowed disabled:opacity-50",
|
|
645
|
+
className
|
|
646
|
+
),
|
|
647
|
+
...props,
|
|
648
|
+
children: [
|
|
649
|
+
children,
|
|
650
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react.ChevronDown, { className: "h-4 w-4 opacity-50" }) })
|
|
651
|
+
]
|
|
652
|
+
}
|
|
653
|
+
));
|
|
654
|
+
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
|
|
655
|
+
var SelectScrollUpButton = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
656
|
+
SelectPrimitive.ScrollUpButton,
|
|
657
|
+
{
|
|
658
|
+
ref,
|
|
659
|
+
className: cn(
|
|
660
|
+
"flex cursor-default items-center justify-center py-1",
|
|
661
|
+
className
|
|
662
|
+
),
|
|
663
|
+
...props,
|
|
664
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react.ChevronUp, { className: "h-4 w-4" })
|
|
665
|
+
}
|
|
666
|
+
));
|
|
667
|
+
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
|
|
668
|
+
var SelectScrollDownButton = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
669
|
+
SelectPrimitive.ScrollDownButton,
|
|
670
|
+
{
|
|
671
|
+
ref,
|
|
672
|
+
className: cn(
|
|
673
|
+
"flex cursor-default items-center justify-center py-1",
|
|
674
|
+
className
|
|
675
|
+
),
|
|
676
|
+
...props,
|
|
677
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react.ChevronDown, { className: "h-4 w-4" })
|
|
678
|
+
}
|
|
679
|
+
));
|
|
680
|
+
SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
|
|
681
|
+
var SelectContent = React5.forwardRef(({ className, children, position = "item-aligned", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SelectPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
682
|
+
SelectPrimitive.Content,
|
|
683
|
+
{
|
|
684
|
+
ref,
|
|
685
|
+
className: cn(
|
|
686
|
+
"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-[var(--radius-md)] border shadow-md",
|
|
687
|
+
"border-[var(--color-border)] bg-[var(--color-card)] text-[var(--color-foreground)]",
|
|
688
|
+
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
|
689
|
+
"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
|
|
690
|
+
"data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
|
691
|
+
position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
|
|
692
|
+
className
|
|
693
|
+
),
|
|
694
|
+
position,
|
|
695
|
+
...props,
|
|
696
|
+
children: [
|
|
697
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SelectScrollUpButton, {}),
|
|
698
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
699
|
+
SelectPrimitive.Viewport,
|
|
700
|
+
{
|
|
701
|
+
className: cn(
|
|
702
|
+
"p-1",
|
|
703
|
+
position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
|
|
704
|
+
),
|
|
705
|
+
children
|
|
706
|
+
}
|
|
707
|
+
),
|
|
708
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SelectScrollDownButton, {})
|
|
709
|
+
]
|
|
710
|
+
}
|
|
711
|
+
) }));
|
|
712
|
+
SelectContent.displayName = SelectPrimitive.Content.displayName;
|
|
713
|
+
var SelectLabel = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
714
|
+
SelectPrimitive.Label,
|
|
715
|
+
{
|
|
716
|
+
ref,
|
|
717
|
+
className: cn("py-1.5 pl-8 pr-2 text-sm font-semibold text-[var(--color-foreground)]", className),
|
|
718
|
+
...props
|
|
719
|
+
}
|
|
720
|
+
));
|
|
721
|
+
SelectLabel.displayName = SelectPrimitive.Label.displayName;
|
|
722
|
+
var SelectItem = React5.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
723
|
+
SelectPrimitive.Item,
|
|
724
|
+
{
|
|
725
|
+
ref,
|
|
726
|
+
className: cn(
|
|
727
|
+
"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none",
|
|
728
|
+
"focus:bg-[var(--color-accent)] focus:text-[var(--color-accent-foreground)]",
|
|
729
|
+
"data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
|
730
|
+
className
|
|
731
|
+
),
|
|
732
|
+
...props,
|
|
733
|
+
children: [
|
|
734
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react.Check, { className: "h-4 w-4" }) }) }),
|
|
735
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SelectPrimitive.ItemText, { children })
|
|
736
|
+
]
|
|
737
|
+
}
|
|
738
|
+
));
|
|
739
|
+
SelectItem.displayName = SelectPrimitive.Item.displayName;
|
|
740
|
+
var SelectSeparator = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
741
|
+
SelectPrimitive.Separator,
|
|
742
|
+
{
|
|
743
|
+
ref,
|
|
744
|
+
className: cn("-mx-1 my-1 h-px bg-[var(--color-border)]", className),
|
|
745
|
+
...props
|
|
746
|
+
}
|
|
747
|
+
));
|
|
748
|
+
SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
|
|
749
|
+
|
|
750
|
+
// src/components/ui/switch.tsx
|
|
751
|
+
var React6 = __toESM(require("react"));
|
|
752
|
+
var SwitchPrimitives = __toESM(require("@radix-ui/react-switch"));
|
|
753
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
754
|
+
var Switch = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
755
|
+
SwitchPrimitives.Root,
|
|
756
|
+
{
|
|
757
|
+
className: cn(
|
|
758
|
+
"peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent",
|
|
759
|
+
"transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)]",
|
|
760
|
+
"focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-background)]",
|
|
761
|
+
"disabled:cursor-not-allowed disabled:opacity-50",
|
|
762
|
+
"data-[state=checked]:bg-[var(--color-primary)] data-[state=unchecked]:bg-[var(--color-muted)]",
|
|
763
|
+
className
|
|
764
|
+
),
|
|
765
|
+
...props,
|
|
766
|
+
ref,
|
|
767
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
768
|
+
SwitchPrimitives.Thumb,
|
|
769
|
+
{
|
|
770
|
+
className: cn(
|
|
771
|
+
"pointer-events-none block h-5 w-5 rounded-full shadow-lg ring-0 transition-transform",
|
|
772
|
+
"bg-[var(--color-background)] data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
|
|
773
|
+
)
|
|
774
|
+
}
|
|
775
|
+
)
|
|
776
|
+
}
|
|
777
|
+
));
|
|
778
|
+
Switch.displayName = SwitchPrimitives.Root.displayName;
|
|
779
|
+
|
|
780
|
+
// src/components/ui/dialog.tsx
|
|
781
|
+
var React7 = __toESM(require("react"));
|
|
782
|
+
var DialogPrimitive = __toESM(require("@radix-ui/react-dialog"));
|
|
783
|
+
var import_class_variance_authority3 = require("class-variance-authority");
|
|
784
|
+
var import_lucide_react2 = require("lucide-react");
|
|
785
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
786
|
+
var Dialog = DialogPrimitive.Root;
|
|
787
|
+
var DialogTrigger = DialogPrimitive.Trigger;
|
|
788
|
+
var DialogPortal = DialogPrimitive.Portal;
|
|
789
|
+
var DialogClose = DialogPrimitive.Close;
|
|
790
|
+
var overlayVariants = (0, import_class_variance_authority3.cva)(
|
|
791
|
+
"fixed inset-0 z-50 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
|
792
|
+
{
|
|
793
|
+
variants: {
|
|
794
|
+
variant: {
|
|
795
|
+
default: "bg-black/80",
|
|
796
|
+
subtle: "bg-black/60",
|
|
797
|
+
blur: "bg-black/40 backdrop-blur-md",
|
|
798
|
+
minimal: "bg-black/20 backdrop-blur-sm"
|
|
799
|
+
},
|
|
800
|
+
animation: {
|
|
801
|
+
default: "duration-200",
|
|
802
|
+
slow: "duration-300",
|
|
803
|
+
fast: "duration-100"
|
|
804
|
+
}
|
|
805
|
+
},
|
|
806
|
+
defaultVariants: {
|
|
807
|
+
variant: "default",
|
|
808
|
+
animation: "default"
|
|
809
|
+
}
|
|
810
|
+
}
|
|
811
|
+
);
|
|
812
|
+
var DialogOverlay = React7.forwardRef(({ className, variant, animation, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
813
|
+
DialogPrimitive.Overlay,
|
|
814
|
+
{
|
|
815
|
+
ref,
|
|
816
|
+
className: cn(overlayVariants({ variant, animation }), className),
|
|
817
|
+
...props
|
|
818
|
+
}
|
|
819
|
+
));
|
|
820
|
+
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
|
|
821
|
+
var dialogContentVariants = (0, import_class_variance_authority3.cva)(
|
|
822
|
+
"fixed left-[50%] top-[50%] z-50 grid w-full translate-x-[-50%] translate-y-[-50%] gap-4 border shadow-lg bg-[var(--color-card)] text-[var(--color-foreground)]",
|
|
823
|
+
{
|
|
824
|
+
variants: {
|
|
825
|
+
variant: {
|
|
826
|
+
default: "border-[var(--color-border)]",
|
|
827
|
+
primary: "border-[var(--color-primary)]/20",
|
|
828
|
+
secondary: "border-[var(--color-secondary)]/20",
|
|
829
|
+
ghost: "border-transparent shadow-xl",
|
|
830
|
+
destructive: "border-[var(--color-error)]/20"
|
|
831
|
+
},
|
|
832
|
+
size: {
|
|
833
|
+
xs: "max-w-xs p-4",
|
|
834
|
+
sm: "max-w-sm p-5",
|
|
835
|
+
default: "max-w-lg p-6",
|
|
836
|
+
md: "max-w-md p-6",
|
|
837
|
+
lg: "max-w-2xl p-7",
|
|
838
|
+
xl: "max-w-4xl p-8",
|
|
839
|
+
full: "max-w-[95vw] max-h-[95vh] p-6"
|
|
840
|
+
},
|
|
841
|
+
radius: {
|
|
842
|
+
none: "rounded-none",
|
|
843
|
+
sm: "rounded-[var(--radius-sm)]",
|
|
844
|
+
default: "rounded-[var(--radius-md)]",
|
|
845
|
+
lg: "rounded-[var(--radius-lg)]",
|
|
846
|
+
xl: "rounded-2xl",
|
|
847
|
+
full: "rounded-[var(--radius-full)]"
|
|
848
|
+
},
|
|
849
|
+
animation: {
|
|
850
|
+
default: "duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
|
|
851
|
+
fade: "duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
|
852
|
+
zoom: "duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
|
|
853
|
+
slide: "duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
|
|
854
|
+
none: ""
|
|
855
|
+
},
|
|
856
|
+
position: {
|
|
857
|
+
default: "top-[50%]",
|
|
858
|
+
top: "top-[5%]",
|
|
859
|
+
bottom: "bottom-[5%] top-auto translate-y-0"
|
|
860
|
+
}
|
|
861
|
+
},
|
|
862
|
+
defaultVariants: {
|
|
863
|
+
variant: "default",
|
|
864
|
+
size: "default",
|
|
865
|
+
radius: "default",
|
|
866
|
+
animation: "default",
|
|
867
|
+
position: "default"
|
|
868
|
+
}
|
|
869
|
+
}
|
|
870
|
+
);
|
|
871
|
+
var DialogContent = React7.forwardRef(
|
|
872
|
+
({
|
|
873
|
+
className,
|
|
874
|
+
children,
|
|
875
|
+
variant,
|
|
876
|
+
size,
|
|
877
|
+
radius,
|
|
878
|
+
animation,
|
|
879
|
+
position,
|
|
880
|
+
overlayVariant = "default",
|
|
881
|
+
overlayAnimation = "default",
|
|
882
|
+
hideCloseButton = false,
|
|
883
|
+
title,
|
|
884
|
+
description,
|
|
885
|
+
icon,
|
|
886
|
+
loading = false,
|
|
887
|
+
success = false,
|
|
888
|
+
onClose,
|
|
889
|
+
...props
|
|
890
|
+
}, ref) => {
|
|
891
|
+
const handleClose = () => {
|
|
892
|
+
if (onClose) {
|
|
893
|
+
onClose();
|
|
894
|
+
}
|
|
895
|
+
};
|
|
896
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(DialogPortal, { children: [
|
|
897
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
898
|
+
DialogOverlay,
|
|
899
|
+
{
|
|
900
|
+
variant: overlayVariant,
|
|
901
|
+
animation: overlayAnimation
|
|
902
|
+
}
|
|
903
|
+
),
|
|
904
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
905
|
+
DialogPrimitive.Content,
|
|
906
|
+
{
|
|
907
|
+
ref,
|
|
908
|
+
className: cn(
|
|
909
|
+
dialogContentVariants({
|
|
910
|
+
variant,
|
|
911
|
+
size,
|
|
912
|
+
radius,
|
|
913
|
+
animation,
|
|
914
|
+
position
|
|
915
|
+
}),
|
|
916
|
+
className
|
|
917
|
+
),
|
|
918
|
+
onEscapeKeyDown: onClose ? (e) => {
|
|
919
|
+
e.preventDefault();
|
|
920
|
+
handleClose();
|
|
921
|
+
} : void 0,
|
|
922
|
+
onPointerDownOutside: onClose ? (e) => {
|
|
923
|
+
e.preventDefault();
|
|
924
|
+
handleClose();
|
|
925
|
+
} : void 0,
|
|
926
|
+
...props,
|
|
927
|
+
children: [
|
|
928
|
+
(title || description) && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(DialogHeader, { className: icon || loading || success ? "flex flex-row items-start gap-4" : "", children: [
|
|
929
|
+
(icon || loading || success) && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "rounded-full bg-[var(--color-accent)] p-2 flex-shrink-0", children: [
|
|
930
|
+
loading && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react2.Loader2, { className: "h-5 w-5 animate-spin text-[var(--color-primary)]" }),
|
|
931
|
+
success && !loading && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react2.Check, { className: "h-5 w-5 text-[var(--color-success)]" }),
|
|
932
|
+
!loading && !success && icon && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-[var(--color-primary)]", children: icon })
|
|
933
|
+
] }),
|
|
934
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex-1", children: [
|
|
935
|
+
title && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DialogTitle, { children: title }),
|
|
936
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DialogDescription, { children: description })
|
|
937
|
+
] })
|
|
938
|
+
] }),
|
|
939
|
+
children,
|
|
940
|
+
!hideCloseButton && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
941
|
+
DialogPrimitive.Close,
|
|
942
|
+
{
|
|
943
|
+
onClick: handleClose,
|
|
944
|
+
className: "absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]/30 focus:ring-offset-2 disabled:pointer-events-none text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)]",
|
|
945
|
+
children: [
|
|
946
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react2.X, { className: "h-4 w-4" }),
|
|
947
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "sr-only", children: "Close" })
|
|
948
|
+
]
|
|
949
|
+
}
|
|
950
|
+
)
|
|
951
|
+
]
|
|
952
|
+
}
|
|
953
|
+
)
|
|
954
|
+
] });
|
|
955
|
+
}
|
|
956
|
+
);
|
|
957
|
+
DialogContent.displayName = DialogPrimitive.Content.displayName;
|
|
958
|
+
var DialogHeader = ({
|
|
959
|
+
className,
|
|
960
|
+
...props
|
|
961
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
962
|
+
"div",
|
|
963
|
+
{
|
|
964
|
+
className: cn(
|
|
965
|
+
"flex flex-col space-y-2 text-center sm:text-left",
|
|
966
|
+
className
|
|
967
|
+
),
|
|
968
|
+
...props
|
|
969
|
+
}
|
|
970
|
+
);
|
|
971
|
+
DialogHeader.displayName = "DialogHeader";
|
|
972
|
+
var DialogFooter = ({
|
|
973
|
+
className,
|
|
974
|
+
...props
|
|
975
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
976
|
+
"div",
|
|
977
|
+
{
|
|
978
|
+
className: cn(
|
|
979
|
+
"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end sm:space-x-2 mt-6",
|
|
980
|
+
className
|
|
981
|
+
),
|
|
982
|
+
...props
|
|
983
|
+
}
|
|
984
|
+
);
|
|
985
|
+
DialogFooter.displayName = "DialogFooter";
|
|
986
|
+
var DialogTitle = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
987
|
+
DialogPrimitive.Title,
|
|
988
|
+
{
|
|
989
|
+
ref,
|
|
990
|
+
className: cn(
|
|
991
|
+
"text-xl font-semibold leading-snug tracking-tight text-[var(--color-foreground)]",
|
|
992
|
+
className
|
|
993
|
+
),
|
|
994
|
+
...props
|
|
995
|
+
}
|
|
996
|
+
));
|
|
997
|
+
DialogTitle.displayName = DialogPrimitive.Title.displayName;
|
|
998
|
+
var DialogDescription = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
999
|
+
DialogPrimitive.Description,
|
|
1000
|
+
{
|
|
1001
|
+
ref,
|
|
1002
|
+
className: cn(
|
|
1003
|
+
"text-sm text-[var(--color-muted-foreground)] leading-normal",
|
|
1004
|
+
className
|
|
1005
|
+
),
|
|
1006
|
+
...props
|
|
1007
|
+
}
|
|
1008
|
+
));
|
|
1009
|
+
DialogDescription.displayName = DialogPrimitive.Description.displayName;
|
|
1010
|
+
var DialogForm = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
1011
|
+
"form",
|
|
1012
|
+
{
|
|
1013
|
+
ref,
|
|
1014
|
+
className: cn("flex flex-col gap-4", className),
|
|
1015
|
+
...props
|
|
1016
|
+
}
|
|
1017
|
+
));
|
|
1018
|
+
DialogForm.displayName = "DialogForm";
|
|
1019
|
+
|
|
1020
|
+
// src/components/ui/tabs.tsx
|
|
1021
|
+
var React8 = __toESM(require("react"));
|
|
1022
|
+
var TabsPrimitive = __toESM(require("@radix-ui/react-tabs"));
|
|
1023
|
+
var import_class_variance_authority4 = require("class-variance-authority");
|
|
1024
|
+
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
1025
|
+
var Tabs = React8.forwardRef(({ vertical = false, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
1026
|
+
TabsPrimitive.Root,
|
|
1027
|
+
{
|
|
1028
|
+
ref,
|
|
1029
|
+
orientation: vertical ? "vertical" : "horizontal",
|
|
1030
|
+
...props
|
|
1031
|
+
}
|
|
1032
|
+
));
|
|
1033
|
+
Tabs.displayName = TabsPrimitive.Root.displayName;
|
|
1034
|
+
var tabsListVariants = (0, import_class_variance_authority4.cva)(
|
|
1035
|
+
"flex items-center justify-start transition-all duration-200",
|
|
1036
|
+
{
|
|
1037
|
+
variants: {
|
|
1038
|
+
variant: {
|
|
1039
|
+
default: "bg-[var(--color-accent)] rounded-[var(--radius-sm)] p-1 text-[var(--color-muted-foreground)]",
|
|
1040
|
+
pills: "bg-transparent gap-2 p-0 text-[var(--color-muted-foreground)]",
|
|
1041
|
+
underline: "bg-transparent border-b border-[var(--color-border)] gap-4 text-[var(--color-muted-foreground)]",
|
|
1042
|
+
cards: "bg-transparent gap-2 p-0 text-[var(--color-muted-foreground)]",
|
|
1043
|
+
minimal: "bg-transparent gap-1 p-0 text-[var(--color-muted-foreground)]"
|
|
1044
|
+
},
|
|
1045
|
+
orientation: {
|
|
1046
|
+
horizontal: "flex-row",
|
|
1047
|
+
vertical: "flex-col items-start gap-1"
|
|
1048
|
+
},
|
|
1049
|
+
fullWidth: {
|
|
1050
|
+
true: "w-full"
|
|
1051
|
+
}
|
|
1052
|
+
},
|
|
1053
|
+
defaultVariants: {
|
|
1054
|
+
variant: "default",
|
|
1055
|
+
orientation: "horizontal",
|
|
1056
|
+
fullWidth: false
|
|
1057
|
+
}
|
|
1058
|
+
}
|
|
1059
|
+
);
|
|
1060
|
+
var TabsList = React8.forwardRef(({ className, variant, orientation, fullWidth, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
1061
|
+
TabsPrimitive.List,
|
|
1062
|
+
{
|
|
1063
|
+
ref,
|
|
1064
|
+
className: cn(tabsListVariants({ variant, orientation, fullWidth, className })),
|
|
1065
|
+
...props
|
|
1066
|
+
}
|
|
1067
|
+
));
|
|
1068
|
+
TabsList.displayName = TabsPrimitive.List.displayName;
|
|
1069
|
+
var tabsTriggerVariants = (0, import_class_variance_authority4.cva)(
|
|
1070
|
+
"inline-flex items-center justify-center whitespace-nowrap font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)]/30 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
|
|
1071
|
+
{
|
|
1072
|
+
variants: {
|
|
1073
|
+
variant: {
|
|
1074
|
+
default: "rounded-[var(--radius-sm)] data-[state=active]:bg-[var(--color-background)] data-[state=active]:text-[var(--color-foreground)] data-[state=active]:shadow-sm",
|
|
1075
|
+
underline: "rounded-none border-b-2 border-transparent pb-2 data-[state=active]:border-[var(--color-primary)] data-[state=active]:bg-transparent data-[state=active]:text-[var(--color-foreground)]",
|
|
1076
|
+
pills: "rounded-full bg-[var(--color-accent)] hover:bg-[var(--color-accent)]/80 data-[state=active]:bg-[var(--color-primary)] data-[state=active]:text-[var(--color-primary-foreground)]",
|
|
1077
|
+
cards: "rounded-[var(--radius-sm)] bg-[var(--color-accent)]/50 hover:bg-[var(--color-accent)] data-[state=active]:bg-[var(--color-background)] data-[state=active]:text-[var(--color-foreground)] data-[state=active]:shadow-md",
|
|
1078
|
+
minimal: "rounded-sm bg-transparent hover:bg-[var(--color-accent)]/30 data-[state=active]:bg-transparent data-[state=active]:text-[var(--color-foreground)] data-[state=active]:underline data-[state=active]:underline-offset-4"
|
|
1079
|
+
},
|
|
1080
|
+
size: {
|
|
1081
|
+
sm: "h-7 px-2 text-[var(--font-size-xs)]",
|
|
1082
|
+
md: "h-9 px-3 py-1.5 text-[var(--font-size-sm)]",
|
|
1083
|
+
lg: "h-10 px-4 py-2 text-[var(--font-size-base)]"
|
|
1084
|
+
},
|
|
1085
|
+
orientation: {
|
|
1086
|
+
horizontal: "",
|
|
1087
|
+
vertical: "justify-start w-full text-left"
|
|
1088
|
+
},
|
|
1089
|
+
fullWidth: {
|
|
1090
|
+
true: "w-full"
|
|
1091
|
+
}
|
|
1092
|
+
},
|
|
1093
|
+
defaultVariants: {
|
|
1094
|
+
variant: "default",
|
|
1095
|
+
size: "md",
|
|
1096
|
+
orientation: "horizontal",
|
|
1097
|
+
fullWidth: false
|
|
1098
|
+
}
|
|
1099
|
+
}
|
|
1100
|
+
);
|
|
1101
|
+
var TabsTrigger = React8.forwardRef(({
|
|
1102
|
+
className,
|
|
1103
|
+
variant,
|
|
1104
|
+
size,
|
|
1105
|
+
icon,
|
|
1106
|
+
iconPosition = "left",
|
|
1107
|
+
badge,
|
|
1108
|
+
fadeTabs = false,
|
|
1109
|
+
orientation,
|
|
1110
|
+
fullWidth,
|
|
1111
|
+
children,
|
|
1112
|
+
...props
|
|
1113
|
+
}, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
|
|
1114
|
+
TabsPrimitive.Trigger,
|
|
1115
|
+
{
|
|
1116
|
+
ref,
|
|
1117
|
+
className: cn(
|
|
1118
|
+
tabsTriggerVariants({ variant, size, orientation, fullWidth }),
|
|
1119
|
+
fadeTabs && "data-[state=inactive]:opacity-60",
|
|
1120
|
+
className
|
|
1121
|
+
),
|
|
1122
|
+
...props,
|
|
1123
|
+
children: [
|
|
1124
|
+
icon && iconPosition === "left" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "mr-2", children: icon }),
|
|
1125
|
+
children,
|
|
1126
|
+
icon && iconPosition === "right" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "ml-2", children: icon }),
|
|
1127
|
+
badge && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "ml-2", children: badge })
|
|
1128
|
+
]
|
|
1129
|
+
}
|
|
1130
|
+
));
|
|
1131
|
+
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
|
|
1132
|
+
var TabsContent = React8.forwardRef(({ className, animated = false, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
1133
|
+
TabsPrimitive.Content,
|
|
1134
|
+
{
|
|
1135
|
+
ref,
|
|
1136
|
+
className: cn(
|
|
1137
|
+
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)]/30 focus-visible:ring-offset-2",
|
|
1138
|
+
animated && "data-[state=active]:animate-fadeIn data-[state=inactive]:animate-fadeOut",
|
|
1139
|
+
className
|
|
1140
|
+
),
|
|
1141
|
+
...props
|
|
1142
|
+
}
|
|
1143
|
+
));
|
|
1144
|
+
TabsContent.displayName = TabsPrimitive.Content.displayName;
|
|
1145
|
+
|
|
1146
|
+
// src/components/ui/avatar.tsx
|
|
1147
|
+
var React9 = __toESM(require("react"));
|
|
1148
|
+
var AvatarPrimitive = __toESM(require("@radix-ui/react-avatar"));
|
|
1149
|
+
var import_class_variance_authority5 = require("class-variance-authority");
|
|
1150
|
+
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
1151
|
+
var avatarVariants = (0, import_class_variance_authority5.cva)(
|
|
1152
|
+
"relative flex shrink-0 overflow-hidden",
|
|
1153
|
+
{
|
|
1154
|
+
variants: {
|
|
1155
|
+
size: {
|
|
1156
|
+
default: "h-10 w-10",
|
|
1157
|
+
xs: "h-6 w-6",
|
|
1158
|
+
sm: "h-8 w-8",
|
|
1159
|
+
md: "h-10 w-10",
|
|
1160
|
+
lg: "h-12 w-12",
|
|
1161
|
+
xl: "h-16 w-16",
|
|
1162
|
+
"2xl": "h-20 w-20"
|
|
1163
|
+
},
|
|
1164
|
+
radius: {
|
|
1165
|
+
default: "rounded-full",
|
|
1166
|
+
sm: "rounded-[var(--radius-sm)]",
|
|
1167
|
+
lg: "rounded-[var(--radius-lg)]",
|
|
1168
|
+
full: "rounded-full",
|
|
1169
|
+
none: "rounded-none"
|
|
1170
|
+
},
|
|
1171
|
+
variant: {
|
|
1172
|
+
default: "",
|
|
1173
|
+
ring: "ring-2 ring-[var(--color-border)]",
|
|
1174
|
+
ringOffset: "ring-2 ring-[var(--color-border)] ring-offset-2 ring-offset-[var(--color-background)]",
|
|
1175
|
+
border: "border-2 border-[var(--color-border)]"
|
|
1176
|
+
}
|
|
1177
|
+
},
|
|
1178
|
+
defaultVariants: {
|
|
1179
|
+
size: "default",
|
|
1180
|
+
radius: "default",
|
|
1181
|
+
variant: "default"
|
|
1182
|
+
}
|
|
1183
|
+
}
|
|
1184
|
+
);
|
|
1185
|
+
var Avatar = React9.forwardRef(({ className, size, radius, variant, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
1186
|
+
AvatarPrimitive.Root,
|
|
1187
|
+
{
|
|
1188
|
+
ref,
|
|
1189
|
+
className: cn(avatarVariants({ size, radius, variant }), className),
|
|
1190
|
+
...props
|
|
1191
|
+
}
|
|
1192
|
+
));
|
|
1193
|
+
Avatar.displayName = AvatarPrimitive.Root.displayName;
|
|
1194
|
+
var AvatarImage = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
1195
|
+
AvatarPrimitive.Image,
|
|
1196
|
+
{
|
|
1197
|
+
ref,
|
|
1198
|
+
className: cn("aspect-square h-full w-full", className),
|
|
1199
|
+
...props
|
|
1200
|
+
}
|
|
1201
|
+
));
|
|
1202
|
+
AvatarImage.displayName = AvatarPrimitive.Image.displayName;
|
|
1203
|
+
var AvatarFallback = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
1204
|
+
AvatarPrimitive.Fallback,
|
|
1205
|
+
{
|
|
1206
|
+
ref,
|
|
1207
|
+
className: cn(
|
|
1208
|
+
"flex h-full w-full items-center justify-center bg-[var(--color-accent)] text-[var(--color-foreground)]",
|
|
1209
|
+
className
|
|
1210
|
+
),
|
|
1211
|
+
...props
|
|
1212
|
+
}
|
|
1213
|
+
));
|
|
1214
|
+
AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
|
|
1215
|
+
var AvatarGroup = React9.forwardRef(
|
|
1216
|
+
({ className, limit, avatars, overlapOffset = -8, ...props }, ref) => {
|
|
1217
|
+
const visibleAvatars = limit ? avatars.slice(0, limit) : avatars;
|
|
1218
|
+
const remainingCount = limit ? Math.max(0, avatars.length - limit) : 0;
|
|
1219
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
1220
|
+
"div",
|
|
1221
|
+
{
|
|
1222
|
+
ref,
|
|
1223
|
+
className: cn("flex items-center", className),
|
|
1224
|
+
...props,
|
|
1225
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex", children: [
|
|
1226
|
+
visibleAvatars.map((avatar, index) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
1227
|
+
"div",
|
|
1228
|
+
{
|
|
1229
|
+
className: "relative",
|
|
1230
|
+
style: {
|
|
1231
|
+
marginLeft: index === 0 ? 0 : `${overlapOffset}px`,
|
|
1232
|
+
zIndex: visibleAvatars.length - index
|
|
1233
|
+
},
|
|
1234
|
+
children: avatar
|
|
1235
|
+
},
|
|
1236
|
+
index
|
|
1237
|
+
)),
|
|
1238
|
+
remainingCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
1239
|
+
"div",
|
|
1240
|
+
{
|
|
1241
|
+
className: "relative z-0",
|
|
1242
|
+
style: { marginLeft: `${overlapOffset}px` },
|
|
1243
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Avatar, { variant: "border", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(AvatarFallback, { children: [
|
|
1244
|
+
"+",
|
|
1245
|
+
remainingCount
|
|
1246
|
+
] }) })
|
|
1247
|
+
}
|
|
1248
|
+
)
|
|
1249
|
+
] })
|
|
1250
|
+
}
|
|
1251
|
+
);
|
|
1252
|
+
}
|
|
1253
|
+
);
|
|
1254
|
+
AvatarGroup.displayName = "AvatarGroup";
|
|
1255
|
+
|
|
1256
|
+
// src/components/ui/alert.tsx
|
|
1257
|
+
var React10 = __toESM(require("react"));
|
|
1258
|
+
var import_class_variance_authority6 = require("class-variance-authority");
|
|
1259
|
+
var import_lucide_react3 = require("lucide-react");
|
|
1260
|
+
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
1261
|
+
var alertVariants = (0, import_class_variance_authority6.cva)(
|
|
1262
|
+
"relative w-full flex items-center gap-3 p-4 border text-[var(--color-foreground)] [&>svg]:shrink-0",
|
|
1263
|
+
{
|
|
1264
|
+
variants: {
|
|
1265
|
+
variant: {
|
|
1266
|
+
default: "bg-[var(--color-background)] text-[var(--color-foreground)] border-[var(--color-border)]",
|
|
1267
|
+
primary: "bg-[var(--color-primary)]/10 text-[var(--color-primary)] border-[var(--color-primary)]/30",
|
|
1268
|
+
success: "bg-[var(--color-success)]/10 text-[var(--color-success)] border-[var(--color-success)]/30",
|
|
1269
|
+
warning: "bg-[var(--color-warning)]/10 text-[var(--color-warning)] border-[var(--color-warning)]/30",
|
|
1270
|
+
error: "bg-[var(--color-error)]/10 text-[var(--color-error)] border-[var(--color-error)]/30",
|
|
1271
|
+
info: "bg-[var(--color-info)]/10 text-[var(--color-info)] border-[var(--color-info)]/30"
|
|
1272
|
+
},
|
|
1273
|
+
size: {
|
|
1274
|
+
sm: "py-2 text-[var(--font-size-xs)]",
|
|
1275
|
+
default: "py-3 text-[var(--font-size-sm)]",
|
|
1276
|
+
lg: "py-4 text-[var(--font-size-base)]"
|
|
1277
|
+
},
|
|
1278
|
+
radius: {
|
|
1279
|
+
none: "rounded-none",
|
|
1280
|
+
sm: "rounded-[var(--radius-sm)]",
|
|
1281
|
+
default: "rounded-[var(--radius-md)]",
|
|
1282
|
+
lg: "rounded-[var(--radius-lg)]",
|
|
1283
|
+
full: "rounded-full"
|
|
1284
|
+
},
|
|
1285
|
+
withClose: {
|
|
1286
|
+
true: "pr-10"
|
|
1287
|
+
}
|
|
1288
|
+
},
|
|
1289
|
+
defaultVariants: {
|
|
1290
|
+
variant: "default",
|
|
1291
|
+
size: "default",
|
|
1292
|
+
radius: "default",
|
|
1293
|
+
withClose: false
|
|
1294
|
+
}
|
|
1295
|
+
}
|
|
1296
|
+
);
|
|
1297
|
+
var Alert = React10.forwardRef(
|
|
1298
|
+
({ className, variant = "default", size, radius, hideIcon = false, closable = false, onClose, children, ...props }, ref) => {
|
|
1299
|
+
const Icon2 = React10.useMemo(() => {
|
|
1300
|
+
switch (variant) {
|
|
1301
|
+
case "success":
|
|
1302
|
+
return import_lucide_react3.Check;
|
|
1303
|
+
case "warning":
|
|
1304
|
+
return import_lucide_react3.AlertTriangle;
|
|
1305
|
+
case "error":
|
|
1306
|
+
return import_lucide_react3.AlertCircle;
|
|
1307
|
+
case "info":
|
|
1308
|
+
return import_lucide_react3.Info;
|
|
1309
|
+
default:
|
|
1310
|
+
return import_lucide_react3.Info;
|
|
1311
|
+
}
|
|
1312
|
+
}, [variant]);
|
|
1313
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
|
|
1314
|
+
"div",
|
|
1315
|
+
{
|
|
1316
|
+
ref,
|
|
1317
|
+
role: "alert",
|
|
1318
|
+
className: cn(alertVariants({ variant, size, radius, withClose: closable }), className),
|
|
1319
|
+
...props,
|
|
1320
|
+
children: [
|
|
1321
|
+
!hideIcon && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon2, { className: "h-5 w-5" }),
|
|
1322
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex-1", children }),
|
|
1323
|
+
closable && onClose && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1324
|
+
"button",
|
|
1325
|
+
{
|
|
1326
|
+
onClick: onClose,
|
|
1327
|
+
className: "absolute right-3 top-3 inline-flex h-6 w-6 items-center justify-center rounded-full opacity-70 transition-opacity hover:opacity-100",
|
|
1328
|
+
"aria-label": "Kapat",
|
|
1329
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react3.X, { className: "h-4 w-4" })
|
|
1330
|
+
}
|
|
1331
|
+
)
|
|
1332
|
+
]
|
|
1333
|
+
}
|
|
1334
|
+
);
|
|
1335
|
+
}
|
|
1336
|
+
);
|
|
1337
|
+
Alert.displayName = "Alert";
|
|
1338
|
+
var AlertTitle = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1339
|
+
"h5",
|
|
1340
|
+
{
|
|
1341
|
+
ref,
|
|
1342
|
+
className: cn("font-semibold leading-tight tracking-tight mb-1", className),
|
|
1343
|
+
...props
|
|
1344
|
+
}
|
|
1345
|
+
));
|
|
1346
|
+
AlertTitle.displayName = "AlertTitle";
|
|
1347
|
+
var AlertDescription = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1348
|
+
"div",
|
|
1349
|
+
{
|
|
1350
|
+
ref,
|
|
1351
|
+
className: cn("leading-5 text-[var(--color-muted-foreground)]", className),
|
|
1352
|
+
...props
|
|
1353
|
+
}
|
|
1354
|
+
));
|
|
1355
|
+
AlertDescription.displayName = "AlertDescription";
|
|
1356
|
+
|
|
1357
|
+
// src/components/ui/toast.tsx
|
|
1358
|
+
var React11 = __toESM(require("react"));
|
|
1359
|
+
var import_class_variance_authority7 = require("class-variance-authority");
|
|
1360
|
+
var import_lucide_react4 = require("lucide-react");
|
|
1361
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
1362
|
+
var ToastProvider = React11.createContext(null);
|
|
1363
|
+
var useToast = () => {
|
|
1364
|
+
const context = React11.useContext(ToastProvider);
|
|
1365
|
+
if (!context) {
|
|
1366
|
+
throw new Error("useToast must be used within a ToastProvider");
|
|
1367
|
+
}
|
|
1368
|
+
return context;
|
|
1369
|
+
};
|
|
1370
|
+
var toastVariants = (0, import_class_variance_authority7.cva)(
|
|
1371
|
+
"group pointer-events-auto relative flex w-full items-center justify-between gap-2 overflow-hidden border p-4 shadow-md transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full",
|
|
1372
|
+
{
|
|
1373
|
+
variants: {
|
|
1374
|
+
variant: {
|
|
1375
|
+
default: "bg-[var(--color-background)] border-[var(--color-border)]",
|
|
1376
|
+
primary: "border-[var(--color-primary)]/50 bg-[var(--color-primary)]/10",
|
|
1377
|
+
success: "border-[var(--color-success)]/50 bg-[var(--color-success)]/10",
|
|
1378
|
+
warning: "border-[var(--color-warning)]/50 bg-[var(--color-warning)]/10",
|
|
1379
|
+
error: "border-[var(--color-error)]/50 bg-[var(--color-error)]/10",
|
|
1380
|
+
info: "border-[var(--color-info)]/50 bg-[var(--color-info)]/10",
|
|
1381
|
+
destructive: "destructive group border-[var(--color-error)] bg-[var(--color-error)] text-[var(--color-error-foreground)]"
|
|
1382
|
+
},
|
|
1383
|
+
size: {
|
|
1384
|
+
sm: "text-[var(--font-size-xs)]",
|
|
1385
|
+
default: "text-[var(--font-size-sm)]",
|
|
1386
|
+
lg: "text-[var(--font-size-base)]"
|
|
1387
|
+
},
|
|
1388
|
+
radius: {
|
|
1389
|
+
none: "rounded-none",
|
|
1390
|
+
sm: "rounded-[var(--radius-sm)]",
|
|
1391
|
+
default: "rounded-[var(--radius-md)]",
|
|
1392
|
+
lg: "rounded-[var(--radius-lg)]",
|
|
1393
|
+
full: "rounded-full"
|
|
1394
|
+
}
|
|
1395
|
+
},
|
|
1396
|
+
defaultVariants: {
|
|
1397
|
+
variant: "default",
|
|
1398
|
+
size: "default",
|
|
1399
|
+
radius: "default"
|
|
1400
|
+
}
|
|
1401
|
+
}
|
|
1402
|
+
);
|
|
1403
|
+
var Toast = ({
|
|
1404
|
+
className,
|
|
1405
|
+
variant,
|
|
1406
|
+
size,
|
|
1407
|
+
radius,
|
|
1408
|
+
title,
|
|
1409
|
+
description,
|
|
1410
|
+
action,
|
|
1411
|
+
onClose,
|
|
1412
|
+
autoClose = true,
|
|
1413
|
+
duration = 5e3,
|
|
1414
|
+
hideIcon = false,
|
|
1415
|
+
showProgress = false,
|
|
1416
|
+
...props
|
|
1417
|
+
}) => {
|
|
1418
|
+
const [progress, setProgress] = React11.useState(100);
|
|
1419
|
+
const timerRef = React11.useRef(void 0);
|
|
1420
|
+
const Icon2 = React11.useMemo(() => {
|
|
1421
|
+
switch (variant) {
|
|
1422
|
+
case "success":
|
|
1423
|
+
return import_lucide_react4.Check;
|
|
1424
|
+
case "warning":
|
|
1425
|
+
return import_lucide_react4.AlertTriangle;
|
|
1426
|
+
case "error":
|
|
1427
|
+
case "destructive":
|
|
1428
|
+
return import_lucide_react4.AlertCircle;
|
|
1429
|
+
case "info":
|
|
1430
|
+
return import_lucide_react4.Info;
|
|
1431
|
+
default:
|
|
1432
|
+
return null;
|
|
1433
|
+
}
|
|
1434
|
+
}, [variant]);
|
|
1435
|
+
React11.useEffect(() => {
|
|
1436
|
+
if (autoClose) {
|
|
1437
|
+
const startTime = Date.now();
|
|
1438
|
+
const endTime = startTime + duration;
|
|
1439
|
+
const updateProgress = () => {
|
|
1440
|
+
const now = Date.now();
|
|
1441
|
+
const remaining = endTime - now;
|
|
1442
|
+
const newProgress = remaining / duration * 100;
|
|
1443
|
+
setProgress(Math.max(0, newProgress));
|
|
1444
|
+
if (remaining > 0) {
|
|
1445
|
+
timerRef.current = setTimeout(updateProgress, 16);
|
|
1446
|
+
} else if (onClose) {
|
|
1447
|
+
onClose();
|
|
1448
|
+
}
|
|
1449
|
+
};
|
|
1450
|
+
updateProgress();
|
|
1451
|
+
}
|
|
1452
|
+
return () => {
|
|
1453
|
+
if (timerRef.current) {
|
|
1454
|
+
clearTimeout(timerRef.current);
|
|
1455
|
+
}
|
|
1456
|
+
};
|
|
1457
|
+
}, [autoClose, duration, onClose]);
|
|
1458
|
+
const textColorClass = variant === "default" ? "text-[var(--color-foreground)]" : variant === "destructive" ? "text-[var(--color-error-foreground)]" : `text-[var(--color-${variant})]`;
|
|
1459
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
|
|
1460
|
+
"div",
|
|
1461
|
+
{
|
|
1462
|
+
className: cn(toastVariants({ variant, size, radius }), className),
|
|
1463
|
+
...props,
|
|
1464
|
+
children: [
|
|
1465
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex gap-3 items-start", children: [
|
|
1466
|
+
!hideIcon && Icon2 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
1467
|
+
Icon2,
|
|
1468
|
+
{
|
|
1469
|
+
className: cn(
|
|
1470
|
+
"h-5 w-5",
|
|
1471
|
+
textColorClass
|
|
1472
|
+
)
|
|
1473
|
+
}
|
|
1474
|
+
),
|
|
1475
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex flex-col gap-1", children: [
|
|
1476
|
+
title && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: cn("font-medium leading-none tracking-tight", textColorClass), children: title }),
|
|
1477
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: cn("text-[var(--color-muted-foreground)] leading-normal", {
|
|
1478
|
+
"text-[var(--color-error-foreground)]/90": variant === "destructive"
|
|
1479
|
+
}), children: description })
|
|
1480
|
+
] })
|
|
1481
|
+
] }),
|
|
1482
|
+
action,
|
|
1483
|
+
onClose && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
1484
|
+
"button",
|
|
1485
|
+
{
|
|
1486
|
+
onClick: onClose,
|
|
1487
|
+
className: cn(
|
|
1488
|
+
"absolute right-2 top-2 rounded-[var(--radius-sm)] p-1 transition-opacity hover:opacity-100 opacity-70",
|
|
1489
|
+
textColorClass
|
|
1490
|
+
),
|
|
1491
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react4.X, { className: "h-4 w-4" })
|
|
1492
|
+
}
|
|
1493
|
+
),
|
|
1494
|
+
autoClose && showProgress && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "absolute bottom-0 left-0 right-0 h-1 bg-[var(--color-accent)]/50", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
1495
|
+
"div",
|
|
1496
|
+
{
|
|
1497
|
+
className: cn(
|
|
1498
|
+
"h-full transition-all",
|
|
1499
|
+
variant === "default" ? "bg-[var(--color-primary)]" : `bg-[var(--color-${variant === "destructive" ? "error" : variant})]`
|
|
1500
|
+
),
|
|
1501
|
+
style: { width: `${progress}%` }
|
|
1502
|
+
}
|
|
1503
|
+
) })
|
|
1504
|
+
]
|
|
1505
|
+
}
|
|
1506
|
+
);
|
|
1507
|
+
};
|
|
1508
|
+
Toast.displayName = "Toast";
|
|
1509
|
+
var ToastContainer = ({
|
|
1510
|
+
className,
|
|
1511
|
+
position = "bottom-right",
|
|
1512
|
+
gap = 8,
|
|
1513
|
+
// maxToasts parametresi ileriki versiyonlarda kullanılacak
|
|
1514
|
+
...props
|
|
1515
|
+
}) => {
|
|
1516
|
+
const positionClasses = {
|
|
1517
|
+
"top-right": "top-0 right-0 flex-col-reverse",
|
|
1518
|
+
"top-center": "top-0 left-1/2 -translate-x-1/2 flex-col-reverse",
|
|
1519
|
+
"top-left": "top-0 left-0 flex-col-reverse",
|
|
1520
|
+
"bottom-right": "bottom-0 right-0 flex-col",
|
|
1521
|
+
"bottom-center": "bottom-0 left-1/2 -translate-x-1/2 flex-col",
|
|
1522
|
+
"bottom-left": "bottom-0 left-0 flex-col"
|
|
1523
|
+
};
|
|
1524
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
1525
|
+
"div",
|
|
1526
|
+
{
|
|
1527
|
+
className: cn(
|
|
1528
|
+
"fixed z-[100] flex gap-2 p-4 md:max-w-[420px] w-full",
|
|
1529
|
+
positionClasses[position],
|
|
1530
|
+
className
|
|
1531
|
+
),
|
|
1532
|
+
style: { gap: `${gap}px` },
|
|
1533
|
+
...props
|
|
1534
|
+
}
|
|
1535
|
+
);
|
|
1536
|
+
};
|
|
1537
|
+
ToastContainer.displayName = "ToastContainer";
|
|
1538
|
+
|
|
1539
|
+
// src/components/ui/tooltip.tsx
|
|
1540
|
+
var React12 = __toESM(require("react"));
|
|
1541
|
+
var import_class_variance_authority8 = require("class-variance-authority");
|
|
1542
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
1543
|
+
var tooltipContentVariants = (0, import_class_variance_authority8.cva)(
|
|
1544
|
+
"absolute z-50 overflow-hidden border text-[var(--font-size-xs)] opacity-0 transition-opacity duration-200 ease-in-out pointer-events-none",
|
|
1545
|
+
{
|
|
1546
|
+
variants: {
|
|
1547
|
+
variant: {
|
|
1548
|
+
default: "bg-[var(--color-background)] border-[var(--color-border)] text-[var(--color-foreground)]",
|
|
1549
|
+
primary: "bg-[var(--color-primary)] border-[var(--color-primary)] text-[var(--color-primary-foreground)]",
|
|
1550
|
+
secondary: "bg-[var(--color-secondary)] border-[var(--color-secondary)] text-[var(--color-secondary-foreground)]",
|
|
1551
|
+
success: "bg-[var(--color-success)] border-[var(--color-success)] text-white",
|
|
1552
|
+
warning: "bg-[var(--color-warning)] border-[var(--color-warning)] text-[var(--color-foreground)]",
|
|
1553
|
+
error: "bg-[var(--color-error)] border-[var(--color-error)] text-white",
|
|
1554
|
+
info: "bg-[var(--color-info)] border-[var(--color-info)] text-white"
|
|
1555
|
+
},
|
|
1556
|
+
size: {
|
|
1557
|
+
sm: "px-2 py-1 max-w-[200px]",
|
|
1558
|
+
default: "px-3 py-1.5 max-w-[300px]",
|
|
1559
|
+
lg: "px-4 py-2 max-w-[400px]"
|
|
1560
|
+
},
|
|
1561
|
+
radius: {
|
|
1562
|
+
none: "rounded-none",
|
|
1563
|
+
sm: "rounded-[var(--radius-sm)]",
|
|
1564
|
+
default: "rounded-[var(--radius-md)]",
|
|
1565
|
+
lg: "rounded-[var(--radius-lg)]",
|
|
1566
|
+
full: "rounded-full"
|
|
1567
|
+
},
|
|
1568
|
+
shadow: {
|
|
1569
|
+
sm: "shadow-sm",
|
|
1570
|
+
default: "shadow-md",
|
|
1571
|
+
lg: "shadow-lg",
|
|
1572
|
+
none: ""
|
|
1573
|
+
},
|
|
1574
|
+
side: {
|
|
1575
|
+
top: "bottom-full mb-2",
|
|
1576
|
+
bottom: "top-full mt-2",
|
|
1577
|
+
left: "right-full mr-2",
|
|
1578
|
+
right: "left-full ml-2"
|
|
1579
|
+
},
|
|
1580
|
+
align: {
|
|
1581
|
+
start: "",
|
|
1582
|
+
center: "",
|
|
1583
|
+
end: ""
|
|
1584
|
+
},
|
|
1585
|
+
visible: {
|
|
1586
|
+
true: "opacity-100",
|
|
1587
|
+
false: "opacity-0"
|
|
1588
|
+
},
|
|
1589
|
+
arrow: {
|
|
1590
|
+
true: 'after:content-[""] after:absolute after:w-2 after:h-2 after:rotate-45 after:border after:border-t-0 after:border-l-0',
|
|
1591
|
+
false: ""
|
|
1592
|
+
}
|
|
1593
|
+
},
|
|
1594
|
+
defaultVariants: {
|
|
1595
|
+
variant: "default",
|
|
1596
|
+
size: "default",
|
|
1597
|
+
radius: "default",
|
|
1598
|
+
shadow: "default",
|
|
1599
|
+
side: "top",
|
|
1600
|
+
align: "center",
|
|
1601
|
+
visible: false,
|
|
1602
|
+
arrow: true
|
|
1603
|
+
},
|
|
1604
|
+
compoundVariants: [
|
|
1605
|
+
{
|
|
1606
|
+
side: "top",
|
|
1607
|
+
arrow: true,
|
|
1608
|
+
className: "after:bottom-[-5px] after:border-r-[var(--color-border)] after:border-b-[var(--color-border)] after:bg-[var(--color-background)]"
|
|
1609
|
+
},
|
|
1610
|
+
{
|
|
1611
|
+
side: "bottom",
|
|
1612
|
+
arrow: true,
|
|
1613
|
+
className: "after:top-[-5px] after:border-t-[var(--color-border)] after:border-l-[var(--color-border)] after:bg-[var(--color-background)]"
|
|
1614
|
+
},
|
|
1615
|
+
{
|
|
1616
|
+
side: "left",
|
|
1617
|
+
arrow: true,
|
|
1618
|
+
className: "after:right-[-5px] after:border-t-[var(--color-border)] after:border-r-[var(--color-border)] after:bg-[var(--color-background)]"
|
|
1619
|
+
},
|
|
1620
|
+
{
|
|
1621
|
+
side: "right",
|
|
1622
|
+
arrow: true,
|
|
1623
|
+
className: "after:left-[-5px] after:border-b-[var(--color-border)] after:border-l-[var(--color-border)] after:bg-[var(--color-background)]"
|
|
1624
|
+
},
|
|
1625
|
+
{
|
|
1626
|
+
align: "center",
|
|
1627
|
+
side: "top",
|
|
1628
|
+
className: "left-1/2 -translate-x-1/2 after:left-1/2 after:-translate-x-1/2"
|
|
1629
|
+
},
|
|
1630
|
+
{
|
|
1631
|
+
align: "center",
|
|
1632
|
+
side: "bottom",
|
|
1633
|
+
className: "left-1/2 -translate-x-1/2 after:left-1/2 after:-translate-x-1/2"
|
|
1634
|
+
},
|
|
1635
|
+
{
|
|
1636
|
+
align: "center",
|
|
1637
|
+
side: "left",
|
|
1638
|
+
className: "top-1/2 -translate-y-1/2 after:top-1/2 after:-translate-y-1/2"
|
|
1639
|
+
},
|
|
1640
|
+
{
|
|
1641
|
+
align: "center",
|
|
1642
|
+
side: "right",
|
|
1643
|
+
className: "top-1/2 -translate-y-1/2 after:top-1/2 after:-translate-y-1/2"
|
|
1644
|
+
},
|
|
1645
|
+
{
|
|
1646
|
+
align: "start",
|
|
1647
|
+
side: "top",
|
|
1648
|
+
className: "left-0 after:left-3"
|
|
1649
|
+
},
|
|
1650
|
+
{
|
|
1651
|
+
align: "start",
|
|
1652
|
+
side: "bottom",
|
|
1653
|
+
className: "left-0 after:left-3"
|
|
1654
|
+
},
|
|
1655
|
+
{
|
|
1656
|
+
align: "start",
|
|
1657
|
+
side: "left",
|
|
1658
|
+
className: "top-0 after:top-3"
|
|
1659
|
+
},
|
|
1660
|
+
{
|
|
1661
|
+
align: "start",
|
|
1662
|
+
side: "right",
|
|
1663
|
+
className: "top-0 after:top-3"
|
|
1664
|
+
},
|
|
1665
|
+
{
|
|
1666
|
+
align: "end",
|
|
1667
|
+
side: "top",
|
|
1668
|
+
className: "right-0 after:right-3"
|
|
1669
|
+
},
|
|
1670
|
+
{
|
|
1671
|
+
align: "end",
|
|
1672
|
+
side: "bottom",
|
|
1673
|
+
className: "right-0 after:right-3"
|
|
1674
|
+
},
|
|
1675
|
+
{
|
|
1676
|
+
align: "end",
|
|
1677
|
+
side: "left",
|
|
1678
|
+
className: "bottom-0 after:bottom-3"
|
|
1679
|
+
},
|
|
1680
|
+
{
|
|
1681
|
+
align: "end",
|
|
1682
|
+
side: "right",
|
|
1683
|
+
className: "bottom-0 after:bottom-3"
|
|
1684
|
+
}
|
|
1685
|
+
]
|
|
1686
|
+
}
|
|
1687
|
+
);
|
|
1688
|
+
function Tooltip({
|
|
1689
|
+
children,
|
|
1690
|
+
content,
|
|
1691
|
+
delayDuration = 300,
|
|
1692
|
+
side = "top",
|
|
1693
|
+
align = "center",
|
|
1694
|
+
variant,
|
|
1695
|
+
size,
|
|
1696
|
+
radius,
|
|
1697
|
+
shadow,
|
|
1698
|
+
disabled = false,
|
|
1699
|
+
contentClassName,
|
|
1700
|
+
triggerClassName,
|
|
1701
|
+
...props
|
|
1702
|
+
}) {
|
|
1703
|
+
const [visible, setVisible] = React12.useState(false);
|
|
1704
|
+
const timeoutRef = React12.useRef(void 0);
|
|
1705
|
+
const showTooltip = () => {
|
|
1706
|
+
if (timeoutRef.current) {
|
|
1707
|
+
clearTimeout(timeoutRef.current);
|
|
1708
|
+
}
|
|
1709
|
+
timeoutRef.current = setTimeout(() => {
|
|
1710
|
+
setVisible(true);
|
|
1711
|
+
}, delayDuration);
|
|
1712
|
+
};
|
|
1713
|
+
const hideTooltip = () => {
|
|
1714
|
+
if (timeoutRef.current) {
|
|
1715
|
+
clearTimeout(timeoutRef.current);
|
|
1716
|
+
}
|
|
1717
|
+
setVisible(false);
|
|
1718
|
+
};
|
|
1719
|
+
React12.useEffect(() => {
|
|
1720
|
+
return () => {
|
|
1721
|
+
if (timeoutRef.current) {
|
|
1722
|
+
clearTimeout(timeoutRef.current);
|
|
1723
|
+
}
|
|
1724
|
+
};
|
|
1725
|
+
}, []);
|
|
1726
|
+
if (disabled) {
|
|
1727
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, { children });
|
|
1728
|
+
}
|
|
1729
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
|
|
1730
|
+
"div",
|
|
1731
|
+
{
|
|
1732
|
+
className: "relative inline-flex",
|
|
1733
|
+
onMouseEnter: showTooltip,
|
|
1734
|
+
onMouseLeave: hideTooltip,
|
|
1735
|
+
onFocus: showTooltip,
|
|
1736
|
+
onBlur: hideTooltip,
|
|
1737
|
+
children: [
|
|
1738
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: cn("inline-flex", triggerClassName || ""), children }),
|
|
1739
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
1740
|
+
"div",
|
|
1741
|
+
{
|
|
1742
|
+
className: cn(
|
|
1743
|
+
tooltipContentVariants({
|
|
1744
|
+
variant,
|
|
1745
|
+
size,
|
|
1746
|
+
radius,
|
|
1747
|
+
shadow,
|
|
1748
|
+
side,
|
|
1749
|
+
align,
|
|
1750
|
+
visible,
|
|
1751
|
+
arrow: true
|
|
1752
|
+
}),
|
|
1753
|
+
contentClassName
|
|
1754
|
+
),
|
|
1755
|
+
role: "tooltip",
|
|
1756
|
+
...props,
|
|
1757
|
+
children: content
|
|
1758
|
+
}
|
|
1759
|
+
)
|
|
1760
|
+
]
|
|
1761
|
+
}
|
|
1762
|
+
);
|
|
1763
|
+
}
|
|
1764
|
+
Tooltip.displayName = "Tooltip";
|
|
1765
|
+
|
|
1766
|
+
// src/components/ui/checkbox.tsx
|
|
1767
|
+
var React13 = __toESM(require("react"));
|
|
1768
|
+
var CheckboxPrimitive = __toESM(require("@radix-ui/react-checkbox"));
|
|
1769
|
+
var import_lucide_react5 = require("lucide-react");
|
|
1770
|
+
var import_class_variance_authority9 = require("class-variance-authority");
|
|
1771
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
1772
|
+
var checkboxVariants = (0, import_class_variance_authority9.cva)(
|
|
1773
|
+
"peer shrink-0 border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:text-[var(--color-primary-foreground)]",
|
|
1774
|
+
{
|
|
1775
|
+
variants: {
|
|
1776
|
+
variant: {
|
|
1777
|
+
default: "border-[var(--color-border)] bg-[var(--color-background)] data-[state=checked]:bg-[var(--color-primary)] data-[state=checked]:border-[var(--color-primary)]",
|
|
1778
|
+
outline: "border-[var(--color-border)] bg-transparent data-[state=checked]:bg-[var(--color-primary)] data-[state=checked]:border-[var(--color-primary)]",
|
|
1779
|
+
muted: "border-[var(--color-border)] bg-[var(--color-accent)] data-[state=checked]:bg-[var(--color-primary)] data-[state=checked]:border-[var(--color-primary)]",
|
|
1780
|
+
ghost: "border-transparent bg-transparent hover:bg-[var(--color-accent)] data-[state=checked]:bg-[var(--color-primary)] data-[state=checked]:border-[var(--color-primary)]"
|
|
1781
|
+
},
|
|
1782
|
+
size: {
|
|
1783
|
+
sm: "h-3.5 w-3.5",
|
|
1784
|
+
default: "h-4 w-4",
|
|
1785
|
+
md: "h-5 w-5",
|
|
1786
|
+
lg: "h-6 w-6"
|
|
1787
|
+
},
|
|
1788
|
+
radius: {
|
|
1789
|
+
none: "rounded-none",
|
|
1790
|
+
sm: "rounded-[var(--radius-sm)]",
|
|
1791
|
+
default: "rounded-[var(--radius-sm)]",
|
|
1792
|
+
md: "rounded-[var(--radius-md)]",
|
|
1793
|
+
full: "rounded-full"
|
|
1794
|
+
},
|
|
1795
|
+
animation: {
|
|
1796
|
+
none: "",
|
|
1797
|
+
subtle: "transition-all duration-200",
|
|
1798
|
+
default: "transition-all duration-200",
|
|
1799
|
+
bounce: "transition-all duration-200"
|
|
1800
|
+
}
|
|
1801
|
+
},
|
|
1802
|
+
defaultVariants: {
|
|
1803
|
+
variant: "default",
|
|
1804
|
+
size: "default",
|
|
1805
|
+
radius: "default",
|
|
1806
|
+
animation: "default"
|
|
1807
|
+
}
|
|
1808
|
+
}
|
|
1809
|
+
);
|
|
1810
|
+
var Checkbox = React13.forwardRef(({
|
|
1811
|
+
className,
|
|
1812
|
+
variant,
|
|
1813
|
+
size,
|
|
1814
|
+
radius,
|
|
1815
|
+
animation,
|
|
1816
|
+
indeterminate = false,
|
|
1817
|
+
icon,
|
|
1818
|
+
checked,
|
|
1819
|
+
...props
|
|
1820
|
+
}, ref) => {
|
|
1821
|
+
const [isIndeterminate, setIsIndeterminate] = React13.useState(indeterminate);
|
|
1822
|
+
React13.useEffect(() => {
|
|
1823
|
+
setIsIndeterminate(indeterminate);
|
|
1824
|
+
}, [indeterminate]);
|
|
1825
|
+
const effectiveChecked = isIndeterminate ? false : checked;
|
|
1826
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
1827
|
+
CheckboxPrimitive.Root,
|
|
1828
|
+
{
|
|
1829
|
+
ref,
|
|
1830
|
+
checked: effectiveChecked,
|
|
1831
|
+
className: cn(checkboxVariants({ variant, size, radius, animation }), className),
|
|
1832
|
+
...props,
|
|
1833
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
1834
|
+
CheckboxPrimitive.Indicator,
|
|
1835
|
+
{
|
|
1836
|
+
className: cn(
|
|
1837
|
+
"flex items-center justify-center text-current",
|
|
1838
|
+
animation === "bounce" && "data-[state=checked]:animate-bounce"
|
|
1839
|
+
),
|
|
1840
|
+
children: isIndeterminate ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react5.Minus, { className: "h-[65%] w-[65%]" }) : icon ? icon : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react5.Check, { className: "h-[65%] w-[65%]" })
|
|
1841
|
+
}
|
|
1842
|
+
)
|
|
1843
|
+
}
|
|
1844
|
+
);
|
|
1845
|
+
});
|
|
1846
|
+
Checkbox.displayName = CheckboxPrimitive.Root.displayName;
|
|
1847
|
+
var CheckboxGroup = React13.forwardRef(
|
|
1848
|
+
({ className, orientation = "vertical", spacing = "1rem", children, ...props }, ref) => {
|
|
1849
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
1850
|
+
"div",
|
|
1851
|
+
{
|
|
1852
|
+
ref,
|
|
1853
|
+
className: cn(
|
|
1854
|
+
"flex",
|
|
1855
|
+
orientation === "vertical" ? "flex-col" : "flex-row flex-wrap",
|
|
1856
|
+
className
|
|
1857
|
+
),
|
|
1858
|
+
style: { gap: spacing },
|
|
1859
|
+
role: "group",
|
|
1860
|
+
...props,
|
|
1861
|
+
children
|
|
1862
|
+
}
|
|
1863
|
+
);
|
|
1864
|
+
}
|
|
1865
|
+
);
|
|
1866
|
+
CheckboxGroup.displayName = "CheckboxGroup";
|
|
1867
|
+
var CheckboxLabel = React13.forwardRef(
|
|
1868
|
+
({ className, htmlFor, children, position = "end", disabled = false, ...props }, ref) => {
|
|
1869
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
1870
|
+
"label",
|
|
1871
|
+
{
|
|
1872
|
+
ref,
|
|
1873
|
+
htmlFor,
|
|
1874
|
+
className: cn(
|
|
1875
|
+
"text-[var(--font-size-sm)] font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
|
|
1876
|
+
position === "start" ? "mr-2" : "ml-2",
|
|
1877
|
+
disabled && "cursor-not-allowed opacity-70",
|
|
1878
|
+
className
|
|
1879
|
+
),
|
|
1880
|
+
...props,
|
|
1881
|
+
children
|
|
1882
|
+
}
|
|
1883
|
+
);
|
|
1884
|
+
}
|
|
1885
|
+
);
|
|
1886
|
+
CheckboxLabel.displayName = "CheckboxLabel";
|
|
1887
|
+
var CheckboxWithLabel = React13.forwardRef(({
|
|
1888
|
+
id,
|
|
1889
|
+
label,
|
|
1890
|
+
labelPosition = "end",
|
|
1891
|
+
labelClassName,
|
|
1892
|
+
...checkboxProps
|
|
1893
|
+
}, ref) => {
|
|
1894
|
+
const checkboxId = id || `checkbox-${Math.random().toString(36).substring(2, 9)}`;
|
|
1895
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center", children: [
|
|
1896
|
+
labelPosition === "start" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
1897
|
+
CheckboxLabel,
|
|
1898
|
+
{
|
|
1899
|
+
htmlFor: checkboxId,
|
|
1900
|
+
position: "start",
|
|
1901
|
+
disabled: checkboxProps.disabled,
|
|
1902
|
+
className: labelClassName,
|
|
1903
|
+
children: label
|
|
1904
|
+
}
|
|
1905
|
+
),
|
|
1906
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Checkbox, { ref, id: checkboxId, ...checkboxProps }),
|
|
1907
|
+
labelPosition === "end" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
1908
|
+
CheckboxLabel,
|
|
1909
|
+
{
|
|
1910
|
+
htmlFor: checkboxId,
|
|
1911
|
+
position: "end",
|
|
1912
|
+
disabled: checkboxProps.disabled,
|
|
1913
|
+
className: labelClassName,
|
|
1914
|
+
children: label
|
|
1915
|
+
}
|
|
1916
|
+
)
|
|
1917
|
+
] });
|
|
1918
|
+
});
|
|
1919
|
+
CheckboxWithLabel.displayName = "CheckboxWithLabel";
|
|
1920
|
+
|
|
1921
|
+
// src/components/ui/radio-group.tsx
|
|
1922
|
+
var React14 = __toESM(require("react"));
|
|
1923
|
+
var import_lucide_react6 = require("lucide-react");
|
|
1924
|
+
var import_class_variance_authority10 = require("class-variance-authority");
|
|
1925
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
1926
|
+
var radioGroupItemVariants = (0, import_class_variance_authority10.cva)(
|
|
1927
|
+
"aspect-square border focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
|
|
1928
|
+
{
|
|
1929
|
+
variants: {
|
|
1930
|
+
variant: {
|
|
1931
|
+
default: "border-[var(--color-border)] bg-[var(--color-background)] text-[var(--color-primary)]",
|
|
1932
|
+
outline: "border-[var(--color-border)] bg-transparent text-[var(--color-primary)]",
|
|
1933
|
+
filled: "border-[var(--color-primary)] bg-[var(--color-primary)]/10 text-[var(--color-primary)]"
|
|
1934
|
+
},
|
|
1935
|
+
size: {
|
|
1936
|
+
sm: "h-3.5 w-3.5",
|
|
1937
|
+
default: "h-4 w-4",
|
|
1938
|
+
md: "h-5 w-5",
|
|
1939
|
+
lg: "h-6 w-6"
|
|
1940
|
+
}
|
|
1941
|
+
},
|
|
1942
|
+
defaultVariants: {
|
|
1943
|
+
variant: "default",
|
|
1944
|
+
size: "default"
|
|
1945
|
+
}
|
|
1946
|
+
}
|
|
1947
|
+
);
|
|
1948
|
+
var RadioGroupContext = React14.createContext({});
|
|
1949
|
+
var RadioGroup = React14.forwardRef(
|
|
1950
|
+
({ className, value, onValueChange, disabled, name, ...props }, ref) => {
|
|
1951
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(RadioGroupContext.Provider, { value: { value, onValueChange, disabled, name }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
1952
|
+
"div",
|
|
1953
|
+
{
|
|
1954
|
+
ref,
|
|
1955
|
+
role: "radiogroup",
|
|
1956
|
+
className: cn("grid gap-2", className),
|
|
1957
|
+
...props
|
|
1958
|
+
}
|
|
1959
|
+
) });
|
|
1960
|
+
}
|
|
1961
|
+
);
|
|
1962
|
+
RadioGroup.displayName = "RadioGroup";
|
|
1963
|
+
var RadioGroupItem = React14.forwardRef(({ className, variant, size, indicator, id, value, disabled, ...props }, ref) => {
|
|
1964
|
+
const radioGroup = React14.useContext(RadioGroupContext);
|
|
1965
|
+
const generatedId = React14.useId();
|
|
1966
|
+
const radioId = id || generatedId;
|
|
1967
|
+
const isChecked = radioGroup.value === value;
|
|
1968
|
+
const handleChange = (e) => {
|
|
1969
|
+
if (radioGroup.onValueChange) {
|
|
1970
|
+
radioGroup.onValueChange(e.target.value);
|
|
1971
|
+
}
|
|
1972
|
+
if (props.onChange) {
|
|
1973
|
+
props.onChange(e);
|
|
1974
|
+
}
|
|
1975
|
+
};
|
|
1976
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "relative flex items-center", children: [
|
|
1977
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
1978
|
+
"input",
|
|
1979
|
+
{
|
|
1980
|
+
type: "radio",
|
|
1981
|
+
id: radioId,
|
|
1982
|
+
ref,
|
|
1983
|
+
value,
|
|
1984
|
+
checked: isChecked,
|
|
1985
|
+
disabled: disabled || radioGroup.disabled,
|
|
1986
|
+
name: radioGroup.name,
|
|
1987
|
+
onChange: handleChange,
|
|
1988
|
+
className: "sr-only",
|
|
1989
|
+
...props
|
|
1990
|
+
}
|
|
1991
|
+
),
|
|
1992
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
1993
|
+
"label",
|
|
1994
|
+
{
|
|
1995
|
+
htmlFor: radioId,
|
|
1996
|
+
className: cn(
|
|
1997
|
+
radioGroupItemVariants({ variant, size }),
|
|
1998
|
+
"rounded-full",
|
|
1999
|
+
"focus-visible:ring-[var(--color-primary)]/50",
|
|
2000
|
+
"relative inline-flex shrink-0 cursor-pointer items-center justify-center overflow-hidden",
|
|
2001
|
+
disabled && "cursor-not-allowed opacity-50",
|
|
2002
|
+
className
|
|
2003
|
+
),
|
|
2004
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: cn(
|
|
2005
|
+
"absolute inset-0 pointer-events-none",
|
|
2006
|
+
isChecked && "flex items-center justify-center"
|
|
2007
|
+
), children: isChecked && (indicator || /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react6.Circle, { className: "h-[60%] w-[60%] fill-current text-current" })) })
|
|
2008
|
+
}
|
|
2009
|
+
)
|
|
2010
|
+
] });
|
|
2011
|
+
});
|
|
2012
|
+
RadioGroupItem.displayName = "RadioGroupItem";
|
|
2013
|
+
var RadioLabel = React14.forwardRef(
|
|
2014
|
+
({ className, htmlFor, children, disabled = false, ...props }, ref) => {
|
|
2015
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
2016
|
+
"label",
|
|
2017
|
+
{
|
|
2018
|
+
ref,
|
|
2019
|
+
htmlFor,
|
|
2020
|
+
className: cn(
|
|
2021
|
+
"text-[var(--font-size-sm)] font-medium leading-none ml-2 text-[var(--color-foreground)]",
|
|
2022
|
+
disabled && "cursor-not-allowed opacity-70",
|
|
2023
|
+
className
|
|
2024
|
+
),
|
|
2025
|
+
...props,
|
|
2026
|
+
children
|
|
2027
|
+
}
|
|
2028
|
+
);
|
|
2029
|
+
}
|
|
2030
|
+
);
|
|
2031
|
+
RadioLabel.displayName = "RadioLabel";
|
|
2032
|
+
var RadioItemWithLabel = React14.forwardRef(({
|
|
2033
|
+
id,
|
|
2034
|
+
label,
|
|
2035
|
+
labelClassName,
|
|
2036
|
+
...radioProps
|
|
2037
|
+
}, ref) => {
|
|
2038
|
+
const radioId = id || `radio-${Math.random().toString(36).substring(2, 9)}`;
|
|
2039
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center", children: [
|
|
2040
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(RadioGroupItem, { ref, id: radioId, ...radioProps }),
|
|
2041
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
2042
|
+
RadioLabel,
|
|
2043
|
+
{
|
|
2044
|
+
htmlFor: radioId,
|
|
2045
|
+
disabled: radioProps.disabled,
|
|
2046
|
+
className: labelClassName,
|
|
2047
|
+
children: label
|
|
2048
|
+
}
|
|
2049
|
+
)
|
|
2050
|
+
] });
|
|
2051
|
+
});
|
|
2052
|
+
RadioItemWithLabel.displayName = "RadioItemWithLabel";
|
|
2053
|
+
|
|
2054
|
+
// src/components/ui/progress.tsx
|
|
2055
|
+
var React15 = __toESM(require("react"));
|
|
2056
|
+
var import_class_variance_authority11 = require("class-variance-authority");
|
|
2057
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
2058
|
+
var progressVariants = (0, import_class_variance_authority11.cva)(
|
|
2059
|
+
"relative w-full overflow-hidden bg-[var(--color-muted)]",
|
|
2060
|
+
{
|
|
2061
|
+
variants: {
|
|
2062
|
+
variant: {
|
|
2063
|
+
default: "bg-[var(--color-muted)]",
|
|
2064
|
+
primary: "bg-[var(--color-primary)]/20",
|
|
2065
|
+
secondary: "bg-[var(--color-secondary)]/20",
|
|
2066
|
+
success: "bg-[var(--color-success)]/20",
|
|
2067
|
+
warning: "bg-[var(--color-warning)]/20",
|
|
2068
|
+
error: "bg-[var(--color-error)]/20"
|
|
2069
|
+
},
|
|
2070
|
+
size: {
|
|
2071
|
+
xs: "h-1",
|
|
2072
|
+
sm: "h-1.5",
|
|
2073
|
+
default: "h-2",
|
|
2074
|
+
md: "h-2.5",
|
|
2075
|
+
lg: "h-3",
|
|
2076
|
+
xl: "h-4"
|
|
2077
|
+
},
|
|
2078
|
+
radius: {
|
|
2079
|
+
none: "rounded-none",
|
|
2080
|
+
sm: "rounded-[var(--radius-sm)]",
|
|
2081
|
+
default: "rounded-[var(--radius-md)]",
|
|
2082
|
+
lg: "rounded-[var(--radius-lg)]",
|
|
2083
|
+
full: "rounded-full"
|
|
2084
|
+
},
|
|
2085
|
+
animation: {
|
|
2086
|
+
default: "[&>div]:transition-all [&>div]:duration-500",
|
|
2087
|
+
smooth: "[&>div]:transition-all [&>div]:duration-700",
|
|
2088
|
+
fast: "[&>div]:transition-all [&>div]:duration-300",
|
|
2089
|
+
none: ""
|
|
2090
|
+
}
|
|
2091
|
+
},
|
|
2092
|
+
defaultVariants: {
|
|
2093
|
+
variant: "default",
|
|
2094
|
+
size: "default",
|
|
2095
|
+
radius: "full",
|
|
2096
|
+
animation: "default"
|
|
2097
|
+
}
|
|
2098
|
+
}
|
|
2099
|
+
);
|
|
2100
|
+
var progressIndicatorVariants = (0, import_class_variance_authority11.cva)(
|
|
2101
|
+
"h-full w-full flex-1",
|
|
2102
|
+
{
|
|
2103
|
+
variants: {
|
|
2104
|
+
variant: {
|
|
2105
|
+
default: "bg-[var(--color-foreground)]",
|
|
2106
|
+
primary: "bg-[var(--color-primary)]",
|
|
2107
|
+
secondary: "bg-[var(--color-secondary)]",
|
|
2108
|
+
success: "bg-[var(--color-success)]",
|
|
2109
|
+
warning: "bg-[var(--color-warning)]",
|
|
2110
|
+
error: "bg-[var(--color-error)]"
|
|
2111
|
+
},
|
|
2112
|
+
animation: {
|
|
2113
|
+
default: "transition-all duration-500",
|
|
2114
|
+
smooth: "transition-all duration-700",
|
|
2115
|
+
fast: "transition-all duration-300",
|
|
2116
|
+
none: ""
|
|
2117
|
+
}
|
|
2118
|
+
},
|
|
2119
|
+
defaultVariants: {
|
|
2120
|
+
variant: "primary",
|
|
2121
|
+
animation: "default"
|
|
2122
|
+
}
|
|
2123
|
+
}
|
|
2124
|
+
);
|
|
2125
|
+
var Progress = React15.forwardRef(({
|
|
2126
|
+
className,
|
|
2127
|
+
value = 0,
|
|
2128
|
+
variant,
|
|
2129
|
+
size,
|
|
2130
|
+
radius,
|
|
2131
|
+
animation,
|
|
2132
|
+
indicatorVariant,
|
|
2133
|
+
showValueLabel = false,
|
|
2134
|
+
valueLabel,
|
|
2135
|
+
labelClassName,
|
|
2136
|
+
indeterminate = false,
|
|
2137
|
+
max = 100,
|
|
2138
|
+
...props
|
|
2139
|
+
}, ref) => {
|
|
2140
|
+
const normalizedValue = Math.max(0, Math.min(value, max));
|
|
2141
|
+
const percentage = max > 0 ? normalizedValue / max * 100 : 0;
|
|
2142
|
+
const label = valueLabel || `${Math.round(percentage)}%`;
|
|
2143
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "w-full", children: [
|
|
2144
|
+
showValueLabel && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "flex justify-between items-center mb-1", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
2145
|
+
"span",
|
|
2146
|
+
{
|
|
2147
|
+
className: cn(
|
|
2148
|
+
"text-[var(--font-size-sm)] font-medium text-[var(--color-muted-foreground)]",
|
|
2149
|
+
labelClassName
|
|
2150
|
+
),
|
|
2151
|
+
children: label
|
|
2152
|
+
}
|
|
2153
|
+
) }),
|
|
2154
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
2155
|
+
"div",
|
|
2156
|
+
{
|
|
2157
|
+
ref,
|
|
2158
|
+
className: cn(progressVariants({ variant, size, radius, animation }), className),
|
|
2159
|
+
role: "progressbar",
|
|
2160
|
+
"aria-valuemin": 0,
|
|
2161
|
+
"aria-valuemax": max,
|
|
2162
|
+
"aria-valuenow": indeterminate ? void 0 : normalizedValue,
|
|
2163
|
+
...props,
|
|
2164
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
2165
|
+
"div",
|
|
2166
|
+
{
|
|
2167
|
+
className: cn(
|
|
2168
|
+
progressIndicatorVariants({ variant: indicatorVariant || variant, animation }),
|
|
2169
|
+
indeterminate && "animate-indeterminate-progress"
|
|
2170
|
+
),
|
|
2171
|
+
style: indeterminate ? {} : { transform: `translateX(-${100 - percentage}%)` }
|
|
2172
|
+
}
|
|
2173
|
+
)
|
|
2174
|
+
}
|
|
2175
|
+
)
|
|
2176
|
+
] });
|
|
2177
|
+
});
|
|
2178
|
+
Progress.displayName = "Progress";
|
|
2179
|
+
|
|
2180
|
+
// src/components/ui/skeleton.tsx
|
|
2181
|
+
var React16 = __toESM(require("react"));
|
|
2182
|
+
var import_class_variance_authority12 = require("class-variance-authority");
|
|
2183
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
2184
|
+
var skeletonVariants = (0, import_class_variance_authority12.cva)(
|
|
2185
|
+
"animate-pulse rounded-[var(--radius-md)]",
|
|
2186
|
+
{
|
|
2187
|
+
variants: {
|
|
2188
|
+
variant: {
|
|
2189
|
+
default: "bg-[var(--color-muted)]",
|
|
2190
|
+
primary: "bg-[var(--color-primary)]/10",
|
|
2191
|
+
secondary: "bg-[var(--color-secondary)]/10",
|
|
2192
|
+
accent: "bg-[var(--color-accent)]"
|
|
2193
|
+
},
|
|
2194
|
+
size: {
|
|
2195
|
+
default: "",
|
|
2196
|
+
sm: "scale-90",
|
|
2197
|
+
lg: "scale-110"
|
|
2198
|
+
},
|
|
2199
|
+
shape: {
|
|
2200
|
+
rect: "rounded-[var(--radius-md)]",
|
|
2201
|
+
circle: "rounded-full",
|
|
2202
|
+
pill: "rounded-full"
|
|
2203
|
+
},
|
|
2204
|
+
animation: {
|
|
2205
|
+
pulse: "animate-pulse",
|
|
2206
|
+
wave: "animate-shimmer overflow-hidden before:absolute before:inset-0 before:-translate-x-full before:animate-[shimmer_2s_infinite] before:bg-gradient-to-r before:from-transparent before:via-white/20 before:to-transparent",
|
|
2207
|
+
none: "animate-none"
|
|
2208
|
+
}
|
|
2209
|
+
},
|
|
2210
|
+
defaultVariants: {
|
|
2211
|
+
variant: "default",
|
|
2212
|
+
size: "default",
|
|
2213
|
+
shape: "rect",
|
|
2214
|
+
animation: "pulse"
|
|
2215
|
+
}
|
|
2216
|
+
}
|
|
2217
|
+
);
|
|
2218
|
+
var Skeleton = React16.forwardRef(
|
|
2219
|
+
({
|
|
2220
|
+
className,
|
|
2221
|
+
variant,
|
|
2222
|
+
size,
|
|
2223
|
+
shape,
|
|
2224
|
+
animation,
|
|
2225
|
+
height,
|
|
2226
|
+
width,
|
|
2227
|
+
isLoaded = false,
|
|
2228
|
+
children,
|
|
2229
|
+
fadeInDuration = 400,
|
|
2230
|
+
style,
|
|
2231
|
+
...props
|
|
2232
|
+
}, ref) => {
|
|
2233
|
+
if (isLoaded && children) {
|
|
2234
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
2235
|
+
"div",
|
|
2236
|
+
{
|
|
2237
|
+
ref,
|
|
2238
|
+
className: cn("animate-fade-in", className),
|
|
2239
|
+
style: {
|
|
2240
|
+
animationDuration: `${fadeInDuration}ms`,
|
|
2241
|
+
height,
|
|
2242
|
+
width,
|
|
2243
|
+
...style
|
|
2244
|
+
},
|
|
2245
|
+
...props,
|
|
2246
|
+
children
|
|
2247
|
+
}
|
|
2248
|
+
);
|
|
2249
|
+
}
|
|
2250
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
2251
|
+
"div",
|
|
2252
|
+
{
|
|
2253
|
+
ref,
|
|
2254
|
+
className: cn(
|
|
2255
|
+
skeletonVariants({ variant, size, shape, animation }),
|
|
2256
|
+
"relative",
|
|
2257
|
+
className
|
|
2258
|
+
),
|
|
2259
|
+
style: {
|
|
2260
|
+
height,
|
|
2261
|
+
width,
|
|
2262
|
+
...style
|
|
2263
|
+
},
|
|
2264
|
+
...props
|
|
2265
|
+
}
|
|
2266
|
+
);
|
|
2267
|
+
}
|
|
2268
|
+
);
|
|
2269
|
+
Skeleton.displayName = "Skeleton";
|
|
2270
|
+
var SkeletonText = React16.forwardRef(
|
|
2271
|
+
({
|
|
2272
|
+
className,
|
|
2273
|
+
lines = 3,
|
|
2274
|
+
lineHeight = "0.85rem",
|
|
2275
|
+
spacing = "0.5rem",
|
|
2276
|
+
lastLineWidth = 80,
|
|
2277
|
+
randomWidths = false,
|
|
2278
|
+
variant = "default",
|
|
2279
|
+
animation = "pulse",
|
|
2280
|
+
...props
|
|
2281
|
+
}, ref) => {
|
|
2282
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
2283
|
+
"div",
|
|
2284
|
+
{
|
|
2285
|
+
ref,
|
|
2286
|
+
className: cn("flex flex-col", className),
|
|
2287
|
+
style: { gap: spacing },
|
|
2288
|
+
...props,
|
|
2289
|
+
children: Array.from({ length: lines }).map((_, i) => {
|
|
2290
|
+
const isLastLine = i === lines - 1;
|
|
2291
|
+
const widthPercentage = isLastLine ? lastLineWidth : randomWidths ? Math.floor(Math.random() * 20) + 80 : 100;
|
|
2292
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
2293
|
+
Skeleton,
|
|
2294
|
+
{
|
|
2295
|
+
variant,
|
|
2296
|
+
animation,
|
|
2297
|
+
className: "w-full",
|
|
2298
|
+
style: {
|
|
2299
|
+
height: lineHeight,
|
|
2300
|
+
width: `${widthPercentage}%`
|
|
2301
|
+
}
|
|
2302
|
+
},
|
|
2303
|
+
i
|
|
2304
|
+
);
|
|
2305
|
+
})
|
|
2306
|
+
}
|
|
2307
|
+
);
|
|
2308
|
+
}
|
|
2309
|
+
);
|
|
2310
|
+
SkeletonText.displayName = "SkeletonText";
|
|
2311
|
+
var SkeletonAvatar = React16.forwardRef(
|
|
2312
|
+
({
|
|
2313
|
+
className,
|
|
2314
|
+
size = "2.5rem",
|
|
2315
|
+
variant = "default",
|
|
2316
|
+
animation = "pulse",
|
|
2317
|
+
...props
|
|
2318
|
+
}, ref) => {
|
|
2319
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
2320
|
+
Skeleton,
|
|
2321
|
+
{
|
|
2322
|
+
ref,
|
|
2323
|
+
variant,
|
|
2324
|
+
animation,
|
|
2325
|
+
shape: "circle",
|
|
2326
|
+
className: cn("shrink-0", className),
|
|
2327
|
+
style: {
|
|
2328
|
+
height: size,
|
|
2329
|
+
width: size
|
|
2330
|
+
},
|
|
2331
|
+
...props
|
|
2332
|
+
}
|
|
2333
|
+
);
|
|
2334
|
+
}
|
|
2335
|
+
);
|
|
2336
|
+
SkeletonAvatar.displayName = "SkeletonAvatar";
|
|
2337
|
+
var SkeletonCard = React16.forwardRef(
|
|
2338
|
+
({
|
|
2339
|
+
className,
|
|
2340
|
+
showHeader = true,
|
|
2341
|
+
contentLines = 3,
|
|
2342
|
+
showFooter = true,
|
|
2343
|
+
variant = "default",
|
|
2344
|
+
animation = "pulse",
|
|
2345
|
+
...props
|
|
2346
|
+
}, ref) => {
|
|
2347
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
|
|
2348
|
+
"div",
|
|
2349
|
+
{
|
|
2350
|
+
ref,
|
|
2351
|
+
className: cn(
|
|
2352
|
+
"overflow-hidden rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-background)] p-4",
|
|
2353
|
+
className
|
|
2354
|
+
),
|
|
2355
|
+
...props,
|
|
2356
|
+
children: [
|
|
2357
|
+
showHeader && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "mb-4 flex items-center gap-4", children: [
|
|
2358
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SkeletonAvatar, { size: "2.5rem", variant, animation }),
|
|
2359
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex-1", children: [
|
|
2360
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
2361
|
+
Skeleton,
|
|
2362
|
+
{
|
|
2363
|
+
variant,
|
|
2364
|
+
animation,
|
|
2365
|
+
className: "mb-2 h-4 w-1/3"
|
|
2366
|
+
}
|
|
2367
|
+
),
|
|
2368
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
2369
|
+
Skeleton,
|
|
2370
|
+
{
|
|
2371
|
+
variant,
|
|
2372
|
+
animation,
|
|
2373
|
+
className: "h-3 w-1/4"
|
|
2374
|
+
}
|
|
2375
|
+
)
|
|
2376
|
+
] })
|
|
2377
|
+
] }),
|
|
2378
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
2379
|
+
SkeletonText,
|
|
2380
|
+
{
|
|
2381
|
+
lines: contentLines,
|
|
2382
|
+
variant,
|
|
2383
|
+
animation,
|
|
2384
|
+
className: "mb-4"
|
|
2385
|
+
}
|
|
2386
|
+
),
|
|
2387
|
+
showFooter && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center justify-between mt-4 pt-4 border-t border-[var(--color-border)]", children: [
|
|
2388
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
2389
|
+
Skeleton,
|
|
2390
|
+
{
|
|
2391
|
+
variant,
|
|
2392
|
+
animation,
|
|
2393
|
+
className: "h-4 w-1/4"
|
|
2394
|
+
}
|
|
2395
|
+
),
|
|
2396
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
2397
|
+
Skeleton,
|
|
2398
|
+
{
|
|
2399
|
+
variant,
|
|
2400
|
+
animation,
|
|
2401
|
+
className: "h-4 w-1/5"
|
|
2402
|
+
}
|
|
2403
|
+
)
|
|
2404
|
+
] })
|
|
2405
|
+
]
|
|
2406
|
+
}
|
|
2407
|
+
);
|
|
2408
|
+
}
|
|
2409
|
+
);
|
|
2410
|
+
SkeletonCard.displayName = "SkeletonCard";
|
|
2411
|
+
|
|
2412
|
+
// src/components/ui/popover.tsx
|
|
2413
|
+
var React17 = __toESM(require("react"));
|
|
2414
|
+
var PopoverPrimitive = __toESM(require("@radix-ui/react-popover"));
|
|
2415
|
+
var import_class_variance_authority13 = require("class-variance-authority");
|
|
2416
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
2417
|
+
var popoverContentVariants = (0, import_class_variance_authority13.cva)(
|
|
2418
|
+
"z-50 w-72 rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-background)] p-4 shadow-[var(--shadow-md)] outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
|
|
2419
|
+
{
|
|
2420
|
+
variants: {
|
|
2421
|
+
variant: {
|
|
2422
|
+
default: "",
|
|
2423
|
+
destructive: "border-[var(--color-error)] bg-[var(--color-error)]/5",
|
|
2424
|
+
outline: "border-[var(--color-border)] bg-transparent",
|
|
2425
|
+
subtle: "border-transparent bg-[var(--color-muted)]/50"
|
|
2426
|
+
},
|
|
2427
|
+
size: {
|
|
2428
|
+
sm: "w-48 p-3",
|
|
2429
|
+
default: "w-72 p-4",
|
|
2430
|
+
lg: "w-96 p-5"
|
|
2431
|
+
},
|
|
2432
|
+
side: {
|
|
2433
|
+
top: "data-[side=top]:slide-in-from-bottom-2",
|
|
2434
|
+
right: "data-[side=right]:slide-in-from-left-2",
|
|
2435
|
+
bottom: "data-[side=bottom]:slide-in-from-top-2",
|
|
2436
|
+
left: "data-[side=left]:slide-in-from-right-2"
|
|
2437
|
+
},
|
|
2438
|
+
position: {
|
|
2439
|
+
pointerEventsNone: "pointer-events-none",
|
|
2440
|
+
default: ""
|
|
2441
|
+
},
|
|
2442
|
+
radius: {
|
|
2443
|
+
none: "rounded-none",
|
|
2444
|
+
sm: "rounded-[var(--radius-sm)]",
|
|
2445
|
+
default: "rounded-[var(--radius-md)]",
|
|
2446
|
+
lg: "rounded-[var(--radius-lg)]",
|
|
2447
|
+
full: "rounded-full"
|
|
2448
|
+
},
|
|
2449
|
+
shadow: {
|
|
2450
|
+
none: "shadow-none",
|
|
2451
|
+
sm: "shadow-[var(--shadow-sm)]",
|
|
2452
|
+
default: "shadow-[var(--shadow-md)]",
|
|
2453
|
+
md: "shadow-[var(--shadow-md)]",
|
|
2454
|
+
lg: "shadow-[var(--shadow-lg)]",
|
|
2455
|
+
xl: "shadow-[var(--shadow-xl)]"
|
|
2456
|
+
}
|
|
2457
|
+
},
|
|
2458
|
+
defaultVariants: {
|
|
2459
|
+
variant: "default",
|
|
2460
|
+
size: "default",
|
|
2461
|
+
radius: "default",
|
|
2462
|
+
shadow: "default"
|
|
2463
|
+
}
|
|
2464
|
+
}
|
|
2465
|
+
);
|
|
2466
|
+
var Popover = PopoverPrimitive.Root;
|
|
2467
|
+
var PopoverTrigger = PopoverPrimitive.Trigger;
|
|
2468
|
+
var PopoverAnchor = PopoverPrimitive.Anchor;
|
|
2469
|
+
var PopoverContent = React17.forwardRef(({
|
|
2470
|
+
className,
|
|
2471
|
+
variant,
|
|
2472
|
+
size,
|
|
2473
|
+
side,
|
|
2474
|
+
position,
|
|
2475
|
+
radius,
|
|
2476
|
+
shadow,
|
|
2477
|
+
backdrop = false,
|
|
2478
|
+
closeOnInteractOutside = true,
|
|
2479
|
+
overlayBackdrop = false,
|
|
2480
|
+
sideOffset = 4,
|
|
2481
|
+
...props
|
|
2482
|
+
}, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
|
|
2483
|
+
overlayBackdrop && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "fixed inset-0 z-40 bg-[var(--color-overlay)] opacity-30" }),
|
|
2484
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
2485
|
+
PopoverPrimitive.Content,
|
|
2486
|
+
{
|
|
2487
|
+
ref,
|
|
2488
|
+
sideOffset,
|
|
2489
|
+
collisionPadding: 8,
|
|
2490
|
+
onInteractOutside: (e) => {
|
|
2491
|
+
if (!closeOnInteractOutside) {
|
|
2492
|
+
e.preventDefault();
|
|
2493
|
+
}
|
|
2494
|
+
},
|
|
2495
|
+
className: cn(
|
|
2496
|
+
popoverContentVariants({
|
|
2497
|
+
variant,
|
|
2498
|
+
size,
|
|
2499
|
+
side,
|
|
2500
|
+
position,
|
|
2501
|
+
radius,
|
|
2502
|
+
shadow
|
|
2503
|
+
}),
|
|
2504
|
+
backdrop && "backdrop-blur-md bg-opacity-80",
|
|
2505
|
+
className
|
|
2506
|
+
),
|
|
2507
|
+
...props
|
|
2508
|
+
}
|
|
2509
|
+
)
|
|
2510
|
+
] }));
|
|
2511
|
+
PopoverContent.displayName = PopoverPrimitive.Content.displayName;
|
|
2512
|
+
var PopoverClose = PopoverPrimitive.Close;
|
|
2513
|
+
var PopoverSeparator = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
2514
|
+
"div",
|
|
2515
|
+
{
|
|
2516
|
+
className: cn("my-2 h-px bg-[var(--color-border)]", className),
|
|
2517
|
+
...props
|
|
2518
|
+
}
|
|
2519
|
+
);
|
|
2520
|
+
PopoverSeparator.displayName = "PopoverSeparator";
|
|
2521
|
+
var PopoverHeader = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
2522
|
+
"div",
|
|
2523
|
+
{
|
|
2524
|
+
className: cn("-mx-4 -mt-4 mb-3 px-4 pt-4 pb-3 border-b border-[var(--color-border)]", className),
|
|
2525
|
+
...props
|
|
2526
|
+
}
|
|
2527
|
+
);
|
|
2528
|
+
PopoverHeader.displayName = "PopoverHeader";
|
|
2529
|
+
var PopoverFooter = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
2530
|
+
"div",
|
|
2531
|
+
{
|
|
2532
|
+
className: cn("-mx-4 -mb-4 mt-3 px-4 pt-3 pb-4 border-t border-[var(--color-border)]", className),
|
|
2533
|
+
...props
|
|
2534
|
+
}
|
|
2535
|
+
);
|
|
2536
|
+
PopoverFooter.displayName = "PopoverFooter";
|
|
2537
|
+
|
|
2538
|
+
// src/components/ui/breadcrumb.tsx
|
|
2539
|
+
var React18 = __toESM(require("react"));
|
|
2540
|
+
var import_class_variance_authority14 = require("class-variance-authority");
|
|
2541
|
+
var import_lucide_react7 = require("lucide-react");
|
|
2542
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
2543
|
+
var breadcrumbVariants = (0, import_class_variance_authority14.cva)(
|
|
2544
|
+
"flex items-center gap-1.5",
|
|
2545
|
+
{
|
|
2546
|
+
variants: {
|
|
2547
|
+
variant: {
|
|
2548
|
+
default: "text-[var(--color-foreground)] transition-colors",
|
|
2549
|
+
muted: "text-[var(--color-muted-foreground)] transition-colors",
|
|
2550
|
+
ghost: "text-[var(--color-foreground)]/60 transition-colors",
|
|
2551
|
+
accent: "text-[var(--color-accent)] transition-colors",
|
|
2552
|
+
primary: "text-[var(--color-primary)] transition-colors"
|
|
2553
|
+
},
|
|
2554
|
+
size: {
|
|
2555
|
+
sm: "text-[var(--font-size-xs)]",
|
|
2556
|
+
default: "text-[var(--font-size-sm)]",
|
|
2557
|
+
md: "text-[var(--font-size-base)]",
|
|
2558
|
+
lg: "text-[var(--font-size-lg)]"
|
|
2559
|
+
}
|
|
2560
|
+
},
|
|
2561
|
+
defaultVariants: {
|
|
2562
|
+
variant: "default",
|
|
2563
|
+
size: "default"
|
|
2564
|
+
}
|
|
2565
|
+
}
|
|
2566
|
+
);
|
|
2567
|
+
var Breadcrumb = React18.forwardRef(
|
|
2568
|
+
({ className, variant, size, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
2569
|
+
"nav",
|
|
2570
|
+
{
|
|
2571
|
+
ref,
|
|
2572
|
+
className: cn(breadcrumbVariants({ variant, size }), className),
|
|
2573
|
+
"aria-label": "breadcrumb",
|
|
2574
|
+
...props
|
|
2575
|
+
}
|
|
2576
|
+
)
|
|
2577
|
+
);
|
|
2578
|
+
Breadcrumb.displayName = "Breadcrumb";
|
|
2579
|
+
var BreadcrumbList = React18.forwardRef(
|
|
2580
|
+
({ className, collapsed, collapsedWidth = 3, ...props }, ref) => {
|
|
2581
|
+
const childrenArray = React18.Children.toArray(props.children).filter(Boolean);
|
|
2582
|
+
const childCount = childrenArray.length;
|
|
2583
|
+
if (collapsed && childCount > collapsedWidth) {
|
|
2584
|
+
const firstItem = childrenArray[0];
|
|
2585
|
+
const lastTwoItems = childrenArray.slice(-2);
|
|
2586
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
|
|
2587
|
+
"ol",
|
|
2588
|
+
{
|
|
2589
|
+
ref,
|
|
2590
|
+
className: cn(
|
|
2591
|
+
"flex flex-wrap items-center gap-1.5 sm:gap-2.5",
|
|
2592
|
+
className
|
|
2593
|
+
),
|
|
2594
|
+
...props,
|
|
2595
|
+
children: [
|
|
2596
|
+
firstItem,
|
|
2597
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BreadcrumbEllipsis, {}),
|
|
2598
|
+
lastTwoItems
|
|
2599
|
+
]
|
|
2600
|
+
}
|
|
2601
|
+
);
|
|
2602
|
+
}
|
|
2603
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
2604
|
+
"ol",
|
|
2605
|
+
{
|
|
2606
|
+
ref,
|
|
2607
|
+
className: cn(
|
|
2608
|
+
"flex flex-wrap items-center gap-1.5 sm:gap-2.5",
|
|
2609
|
+
className
|
|
2610
|
+
),
|
|
2611
|
+
...props
|
|
2612
|
+
}
|
|
2613
|
+
);
|
|
2614
|
+
}
|
|
2615
|
+
);
|
|
2616
|
+
BreadcrumbList.displayName = "BreadcrumbList";
|
|
2617
|
+
var BreadcrumbItem = React18.forwardRef(
|
|
2618
|
+
({ className, isCurrent, href, asChild = false, ...props }, ref) => {
|
|
2619
|
+
const Comp = asChild ? React18.Fragment : href ? "a" : "span";
|
|
2620
|
+
const itemProps = asChild ? {} : href ? { href } : {};
|
|
2621
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
2622
|
+
"li",
|
|
2623
|
+
{
|
|
2624
|
+
ref,
|
|
2625
|
+
className: cn("inline-flex items-center gap-1.5", className),
|
|
2626
|
+
"aria-current": isCurrent ? "page" : void 0,
|
|
2627
|
+
...props,
|
|
2628
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
2629
|
+
Comp,
|
|
2630
|
+
{
|
|
2631
|
+
className: cn(
|
|
2632
|
+
"transition-colors duration-[var(--duration-base)] hover:text-[var(--color-foreground)]",
|
|
2633
|
+
isCurrent ? "font-[var(--font-weight-medium)] text-[var(--color-foreground)]" : "text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)] hover:underline hover:underline-offset-4 hover:decoration-[var(--color-border)]"
|
|
2634
|
+
),
|
|
2635
|
+
...itemProps,
|
|
2636
|
+
children: props.children
|
|
2637
|
+
}
|
|
2638
|
+
)
|
|
2639
|
+
}
|
|
2640
|
+
);
|
|
2641
|
+
}
|
|
2642
|
+
);
|
|
2643
|
+
BreadcrumbItem.displayName = "BreadcrumbItem";
|
|
2644
|
+
var BreadcrumbSeparator = ({
|
|
2645
|
+
children,
|
|
2646
|
+
className,
|
|
2647
|
+
...props
|
|
2648
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
2649
|
+
"li",
|
|
2650
|
+
{
|
|
2651
|
+
role: "presentation",
|
|
2652
|
+
"aria-hidden": "true",
|
|
2653
|
+
className: cn("text-[var(--color-muted-foreground)] opacity-70", className),
|
|
2654
|
+
...props,
|
|
2655
|
+
children: children || /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react7.ChevronRight, { className: "h-3.5 w-3.5" })
|
|
2656
|
+
}
|
|
2657
|
+
);
|
|
2658
|
+
BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
|
|
2659
|
+
var BreadcrumbEllipsis = ({
|
|
2660
|
+
className,
|
|
2661
|
+
...props
|
|
2662
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
|
|
2663
|
+
"li",
|
|
2664
|
+
{
|
|
2665
|
+
role: "presentation",
|
|
2666
|
+
"aria-hidden": "true",
|
|
2667
|
+
className: cn("flex items-center text-[var(--color-muted-foreground)] hover:text-[var(--color-muted-foreground)]/80 transition-colors duration-[var(--duration-base)]", className),
|
|
2668
|
+
...props,
|
|
2669
|
+
children: [
|
|
2670
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react7.MoreHorizontal, { className: "h-4 w-4" }),
|
|
2671
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "sr-only", children: "Daha fazla sayfa" })
|
|
2672
|
+
]
|
|
2673
|
+
}
|
|
2674
|
+
);
|
|
2675
|
+
BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis";
|
|
2676
|
+
|
|
2677
|
+
// src/components/ui/accordion.tsx
|
|
2678
|
+
var React19 = __toESM(require("react"));
|
|
2679
|
+
var AccordionPrimitive = __toESM(require("@radix-ui/react-accordion"));
|
|
2680
|
+
var import_lucide_react8 = require("lucide-react");
|
|
2681
|
+
var import_class_variance_authority15 = require("class-variance-authority");
|
|
2682
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
2683
|
+
var Accordion = AccordionPrimitive.Root;
|
|
2684
|
+
var accordionItemVariants = (0, import_class_variance_authority15.cva)(
|
|
2685
|
+
"border-b",
|
|
2686
|
+
{
|
|
2687
|
+
variants: {
|
|
2688
|
+
variant: {
|
|
2689
|
+
default: "border-[var(--color-border)]",
|
|
2690
|
+
outline: "border-[var(--color-border)] rounded-md mb-2 border p-[1px] last:mb-0",
|
|
2691
|
+
card: "border-[var(--color-border)] rounded-md mb-2 border bg-[var(--color-background)] p-0 shadow-sm last:mb-0"
|
|
2692
|
+
}
|
|
2693
|
+
},
|
|
2694
|
+
defaultVariants: {
|
|
2695
|
+
variant: "default"
|
|
2696
|
+
}
|
|
2697
|
+
}
|
|
2698
|
+
);
|
|
2699
|
+
var AccordionItem = React19.forwardRef(({ className, variant, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
2700
|
+
AccordionPrimitive.Item,
|
|
2701
|
+
{
|
|
2702
|
+
ref,
|
|
2703
|
+
className: cn(accordionItemVariants({ variant }), className),
|
|
2704
|
+
...props
|
|
2705
|
+
}
|
|
2706
|
+
));
|
|
2707
|
+
AccordionItem.displayName = "AccordionItem";
|
|
2708
|
+
var accordionTriggerVariants = (0, import_class_variance_authority15.cva)(
|
|
2709
|
+
"flex flex-1 items-center justify-between py-4 transition-all [&[data-state=open]>svg]:rotate-180 group",
|
|
2710
|
+
{
|
|
2711
|
+
variants: {
|
|
2712
|
+
variant: {
|
|
2713
|
+
default: "font-[var(--font-weight-medium)] text-[var(--color-foreground)] hover:text-[var(--color-primary)] hover:underline",
|
|
2714
|
+
ghost: "font-[var(--font-weight-medium)] text-[var(--color-foreground)] hover:text-[var(--color-foreground)] hover:bg-[var(--color-accent)]/10 rounded px-2 -mx-2",
|
|
2715
|
+
outline: "font-[var(--font-weight-medium)] text-[var(--color-foreground)] px-4 py-3 hover:bg-[var(--color-accent)]/5 rounded-t"
|
|
2716
|
+
},
|
|
2717
|
+
size: {
|
|
2718
|
+
sm: "text-[var(--font-size-xs)] py-2",
|
|
2719
|
+
default: "text-[var(--font-size-sm)] py-3",
|
|
2720
|
+
md: "text-[var(--font-size-base)] py-4",
|
|
2721
|
+
lg: "text-[var(--font-size-lg)] py-5"
|
|
2722
|
+
}
|
|
2723
|
+
},
|
|
2724
|
+
defaultVariants: {
|
|
2725
|
+
variant: "default",
|
|
2726
|
+
size: "default"
|
|
2727
|
+
}
|
|
2728
|
+
}
|
|
2729
|
+
);
|
|
2730
|
+
var AccordionTrigger = React19.forwardRef(({ className, variant, size, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
|
|
2731
|
+
AccordionPrimitive.Trigger,
|
|
2732
|
+
{
|
|
2733
|
+
ref,
|
|
2734
|
+
className: cn(accordionTriggerVariants({ variant, size }), className),
|
|
2735
|
+
...props,
|
|
2736
|
+
children: [
|
|
2737
|
+
children,
|
|
2738
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react8.ChevronDown, { className: "h-4 w-4 shrink-0 transition-transform duration-[var(--duration-base)] opacity-70 group-hover:opacity-100" })
|
|
2739
|
+
]
|
|
2740
|
+
}
|
|
2741
|
+
) }));
|
|
2742
|
+
AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
|
|
2743
|
+
var accordionContentVariants = (0, import_class_variance_authority15.cva)(
|
|
2744
|
+
"overflow-hidden transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
|
|
2745
|
+
{
|
|
2746
|
+
variants: {
|
|
2747
|
+
variant: {
|
|
2748
|
+
default: "text-[var(--color-muted-foreground)]",
|
|
2749
|
+
ghost: "text-[var(--color-muted-foreground)]",
|
|
2750
|
+
outline: "text-[var(--color-muted-foreground)] px-4 pb-3"
|
|
2751
|
+
},
|
|
2752
|
+
size: {
|
|
2753
|
+
sm: "text-[var(--font-size-xs)]",
|
|
2754
|
+
default: "text-[var(--font-size-sm)]",
|
|
2755
|
+
md: "text-[var(--font-size-base)]",
|
|
2756
|
+
lg: "text-[var(--font-size-lg)]"
|
|
2757
|
+
}
|
|
2758
|
+
},
|
|
2759
|
+
defaultVariants: {
|
|
2760
|
+
variant: "default",
|
|
2761
|
+
size: "default"
|
|
2762
|
+
}
|
|
2763
|
+
}
|
|
2764
|
+
);
|
|
2765
|
+
var AccordionContent = React19.forwardRef(({ className, variant, size, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
2766
|
+
AccordionPrimitive.Content,
|
|
2767
|
+
{
|
|
2768
|
+
ref,
|
|
2769
|
+
className: cn(accordionContentVariants({ variant, size }), className),
|
|
2770
|
+
...props,
|
|
2771
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "pb-4 pt-0", children })
|
|
2772
|
+
}
|
|
2773
|
+
));
|
|
2774
|
+
AccordionContent.displayName = AccordionPrimitive.Content.displayName;
|
|
2775
|
+
|
|
2776
|
+
// src/components/ui/collapsible.tsx
|
|
2777
|
+
var React30 = __toESM(require("react"));
|
|
2778
|
+
|
|
2779
|
+
// node_modules/@radix-ui/react-collapsible/dist/index.mjs
|
|
2780
|
+
var React29 = __toESM(require("react"), 1);
|
|
2781
|
+
|
|
2782
|
+
// node_modules/@radix-ui/primitive/dist/index.mjs
|
|
2783
|
+
function composeEventHandlers(originalEventHandler, ourEventHandler, { checkForDefaultPrevented = true } = {}) {
|
|
2784
|
+
return function handleEvent(event) {
|
|
2785
|
+
originalEventHandler?.(event);
|
|
2786
|
+
if (checkForDefaultPrevented === false || !event.defaultPrevented) {
|
|
2787
|
+
return ourEventHandler?.(event);
|
|
2788
|
+
}
|
|
2789
|
+
};
|
|
2790
|
+
}
|
|
2791
|
+
|
|
2792
|
+
// node_modules/@radix-ui/react-context/dist/index.mjs
|
|
2793
|
+
var React20 = __toESM(require("react"), 1);
|
|
2794
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
2795
|
+
function createContextScope(scopeName, createContextScopeDeps = []) {
|
|
2796
|
+
let defaultContexts = [];
|
|
2797
|
+
function createContext32(rootComponentName, defaultContext) {
|
|
2798
|
+
const BaseContext = React20.createContext(defaultContext);
|
|
2799
|
+
const index = defaultContexts.length;
|
|
2800
|
+
defaultContexts = [...defaultContexts, defaultContext];
|
|
2801
|
+
const Provider = (props) => {
|
|
2802
|
+
const { scope, children, ...context } = props;
|
|
2803
|
+
const Context = scope?.[scopeName]?.[index] || BaseContext;
|
|
2804
|
+
const value = React20.useMemo(() => context, Object.values(context));
|
|
2805
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Context.Provider, { value, children });
|
|
2806
|
+
};
|
|
2807
|
+
Provider.displayName = rootComponentName + "Provider";
|
|
2808
|
+
function useContext22(consumerName, scope) {
|
|
2809
|
+
const Context = scope?.[scopeName]?.[index] || BaseContext;
|
|
2810
|
+
const context = React20.useContext(Context);
|
|
2811
|
+
if (context)
|
|
2812
|
+
return context;
|
|
2813
|
+
if (defaultContext !== void 0)
|
|
2814
|
+
return defaultContext;
|
|
2815
|
+
throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
|
|
2816
|
+
}
|
|
2817
|
+
return [Provider, useContext22];
|
|
2818
|
+
}
|
|
2819
|
+
const createScope = () => {
|
|
2820
|
+
const scopeContexts = defaultContexts.map((defaultContext) => {
|
|
2821
|
+
return React20.createContext(defaultContext);
|
|
2822
|
+
});
|
|
2823
|
+
return function useScope(scope) {
|
|
2824
|
+
const contexts = scope?.[scopeName] || scopeContexts;
|
|
2825
|
+
return React20.useMemo(
|
|
2826
|
+
() => ({ [`__scope${scopeName}`]: { ...scope, [scopeName]: contexts } }),
|
|
2827
|
+
[scope, contexts]
|
|
2828
|
+
);
|
|
2829
|
+
};
|
|
2830
|
+
};
|
|
2831
|
+
createScope.scopeName = scopeName;
|
|
2832
|
+
return [createContext32, composeContextScopes(createScope, ...createContextScopeDeps)];
|
|
2833
|
+
}
|
|
2834
|
+
function composeContextScopes(...scopes) {
|
|
2835
|
+
const baseScope = scopes[0];
|
|
2836
|
+
if (scopes.length === 1)
|
|
2837
|
+
return baseScope;
|
|
2838
|
+
const createScope = () => {
|
|
2839
|
+
const scopeHooks = scopes.map((createScope2) => ({
|
|
2840
|
+
useScope: createScope2(),
|
|
2841
|
+
scopeName: createScope2.scopeName
|
|
2842
|
+
}));
|
|
2843
|
+
return function useComposedScopes(overrideScopes) {
|
|
2844
|
+
const nextScopes = scopeHooks.reduce((nextScopes2, { useScope, scopeName }) => {
|
|
2845
|
+
const scopeProps = useScope(overrideScopes);
|
|
2846
|
+
const currentScope = scopeProps[`__scope${scopeName}`];
|
|
2847
|
+
return { ...nextScopes2, ...currentScope };
|
|
2848
|
+
}, {});
|
|
2849
|
+
return React20.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);
|
|
2850
|
+
};
|
|
2851
|
+
};
|
|
2852
|
+
createScope.scopeName = baseScope.scopeName;
|
|
2853
|
+
return createScope;
|
|
2854
|
+
}
|
|
2855
|
+
|
|
2856
|
+
// node_modules/@radix-ui/react-use-controllable-state/dist/index.mjs
|
|
2857
|
+
var React22 = __toESM(require("react"), 1);
|
|
2858
|
+
|
|
2859
|
+
// node_modules/@radix-ui/react-use-layout-effect/dist/index.mjs
|
|
2860
|
+
var React21 = __toESM(require("react"), 1);
|
|
2861
|
+
var useLayoutEffect2 = globalThis?.document ? React21.useLayoutEffect : () => {
|
|
2862
|
+
};
|
|
2863
|
+
|
|
2864
|
+
// node_modules/@radix-ui/react-use-controllable-state/dist/index.mjs
|
|
2865
|
+
var React23 = __toESM(require("react"), 1);
|
|
2866
|
+
var useInsertionEffect = React22[" useInsertionEffect ".trim().toString()] || useLayoutEffect2;
|
|
2867
|
+
function useControllableState({
|
|
2868
|
+
prop,
|
|
2869
|
+
defaultProp,
|
|
2870
|
+
onChange = () => {
|
|
2871
|
+
},
|
|
2872
|
+
caller
|
|
2873
|
+
}) {
|
|
2874
|
+
const [uncontrolledProp, setUncontrolledProp, onChangeRef] = useUncontrolledState({
|
|
2875
|
+
defaultProp,
|
|
2876
|
+
onChange
|
|
2877
|
+
});
|
|
2878
|
+
const isControlled = prop !== void 0;
|
|
2879
|
+
const value = isControlled ? prop : uncontrolledProp;
|
|
2880
|
+
if (true) {
|
|
2881
|
+
const isControlledRef = React22.useRef(prop !== void 0);
|
|
2882
|
+
React22.useEffect(() => {
|
|
2883
|
+
const wasControlled = isControlledRef.current;
|
|
2884
|
+
if (wasControlled !== isControlled) {
|
|
2885
|
+
const from = wasControlled ? "controlled" : "uncontrolled";
|
|
2886
|
+
const to = isControlled ? "controlled" : "uncontrolled";
|
|
2887
|
+
console.warn(
|
|
2888
|
+
`${caller} is changing from ${from} to ${to}. Components should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled value for the lifetime of the component.`
|
|
2889
|
+
);
|
|
2890
|
+
}
|
|
2891
|
+
isControlledRef.current = isControlled;
|
|
2892
|
+
}, [isControlled, caller]);
|
|
2893
|
+
}
|
|
2894
|
+
const setValue = React22.useCallback(
|
|
2895
|
+
(nextValue) => {
|
|
2896
|
+
if (isControlled) {
|
|
2897
|
+
const value2 = isFunction(nextValue) ? nextValue(prop) : nextValue;
|
|
2898
|
+
if (value2 !== prop) {
|
|
2899
|
+
onChangeRef.current?.(value2);
|
|
2900
|
+
}
|
|
2901
|
+
} else {
|
|
2902
|
+
setUncontrolledProp(nextValue);
|
|
2903
|
+
}
|
|
2904
|
+
},
|
|
2905
|
+
[isControlled, prop, setUncontrolledProp, onChangeRef]
|
|
2906
|
+
);
|
|
2907
|
+
return [value, setValue];
|
|
2908
|
+
}
|
|
2909
|
+
function useUncontrolledState({
|
|
2910
|
+
defaultProp,
|
|
2911
|
+
onChange
|
|
2912
|
+
}) {
|
|
2913
|
+
const [value, setValue] = React22.useState(defaultProp);
|
|
2914
|
+
const prevValueRef = React22.useRef(value);
|
|
2915
|
+
const onChangeRef = React22.useRef(onChange);
|
|
2916
|
+
useInsertionEffect(() => {
|
|
2917
|
+
onChangeRef.current = onChange;
|
|
2918
|
+
}, [onChange]);
|
|
2919
|
+
React22.useEffect(() => {
|
|
2920
|
+
if (prevValueRef.current !== value) {
|
|
2921
|
+
onChangeRef.current?.(value);
|
|
2922
|
+
prevValueRef.current = value;
|
|
2923
|
+
}
|
|
2924
|
+
}, [value, prevValueRef]);
|
|
2925
|
+
return [value, setValue, onChangeRef];
|
|
2926
|
+
}
|
|
2927
|
+
function isFunction(value) {
|
|
2928
|
+
return typeof value === "function";
|
|
2929
|
+
}
|
|
2930
|
+
var SYNC_STATE = Symbol("RADIX:SYNC_STATE");
|
|
2931
|
+
|
|
2932
|
+
// node_modules/@radix-ui/react-compose-refs/dist/index.mjs
|
|
2933
|
+
var React24 = __toESM(require("react"), 1);
|
|
2934
|
+
function setRef(ref, value) {
|
|
2935
|
+
if (typeof ref === "function") {
|
|
2936
|
+
return ref(value);
|
|
2937
|
+
} else if (ref !== null && ref !== void 0) {
|
|
2938
|
+
ref.current = value;
|
|
2939
|
+
}
|
|
2940
|
+
}
|
|
2941
|
+
function composeRefs(...refs) {
|
|
2942
|
+
return (node) => {
|
|
2943
|
+
let hasCleanup = false;
|
|
2944
|
+
const cleanups = refs.map((ref) => {
|
|
2945
|
+
const cleanup = setRef(ref, node);
|
|
2946
|
+
if (!hasCleanup && typeof cleanup == "function") {
|
|
2947
|
+
hasCleanup = true;
|
|
2948
|
+
}
|
|
2949
|
+
return cleanup;
|
|
2950
|
+
});
|
|
2951
|
+
if (hasCleanup) {
|
|
2952
|
+
return () => {
|
|
2953
|
+
for (let i = 0; i < cleanups.length; i++) {
|
|
2954
|
+
const cleanup = cleanups[i];
|
|
2955
|
+
if (typeof cleanup == "function") {
|
|
2956
|
+
cleanup();
|
|
2957
|
+
} else {
|
|
2958
|
+
setRef(refs[i], null);
|
|
2959
|
+
}
|
|
2960
|
+
}
|
|
2961
|
+
};
|
|
2962
|
+
}
|
|
2963
|
+
};
|
|
2964
|
+
}
|
|
2965
|
+
function useComposedRefs(...refs) {
|
|
2966
|
+
return React24.useCallback(composeRefs(...refs), refs);
|
|
2967
|
+
}
|
|
2968
|
+
|
|
2969
|
+
// node_modules/@radix-ui/react-primitive/dist/index.mjs
|
|
2970
|
+
var React25 = __toESM(require("react"), 1);
|
|
2971
|
+
var ReactDOM = __toESM(require("react-dom"), 1);
|
|
2972
|
+
var import_react_slot = require("@radix-ui/react-slot");
|
|
2973
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
2974
|
+
var NODES = [
|
|
2975
|
+
"a",
|
|
2976
|
+
"button",
|
|
2977
|
+
"div",
|
|
2978
|
+
"form",
|
|
2979
|
+
"h2",
|
|
2980
|
+
"h3",
|
|
2981
|
+
"img",
|
|
2982
|
+
"input",
|
|
2983
|
+
"label",
|
|
2984
|
+
"li",
|
|
2985
|
+
"nav",
|
|
2986
|
+
"ol",
|
|
2987
|
+
"p",
|
|
2988
|
+
"select",
|
|
2989
|
+
"span",
|
|
2990
|
+
"svg",
|
|
2991
|
+
"ul"
|
|
2992
|
+
];
|
|
2993
|
+
var Primitive = NODES.reduce((primitive, node) => {
|
|
2994
|
+
const Slot = (0, import_react_slot.createSlot)(`Primitive.${node}`);
|
|
2995
|
+
const Node = React25.forwardRef((props, forwardedRef) => {
|
|
2996
|
+
const { asChild, ...primitiveProps } = props;
|
|
2997
|
+
const Comp = asChild ? Slot : node;
|
|
2998
|
+
if (typeof window !== "undefined") {
|
|
2999
|
+
window[Symbol.for("radix-ui")] = true;
|
|
3000
|
+
}
|
|
3001
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Comp, { ...primitiveProps, ref: forwardedRef });
|
|
3002
|
+
});
|
|
3003
|
+
Node.displayName = `Primitive.${node}`;
|
|
3004
|
+
return { ...primitive, [node]: Node };
|
|
3005
|
+
}, {});
|
|
3006
|
+
|
|
3007
|
+
// node_modules/@radix-ui/react-presence/dist/index.mjs
|
|
3008
|
+
var React26 = __toESM(require("react"), 1);
|
|
3009
|
+
var React27 = __toESM(require("react"), 1);
|
|
3010
|
+
function useStateMachine(initialState, machine) {
|
|
3011
|
+
return React27.useReducer((state, event) => {
|
|
3012
|
+
const nextState = machine[state][event];
|
|
3013
|
+
return nextState ?? state;
|
|
3014
|
+
}, initialState);
|
|
3015
|
+
}
|
|
3016
|
+
var Presence = (props) => {
|
|
3017
|
+
const { present, children } = props;
|
|
3018
|
+
const presence = usePresence(present);
|
|
3019
|
+
const child = typeof children === "function" ? children({ present: presence.isPresent }) : React26.Children.only(children);
|
|
3020
|
+
const ref = useComposedRefs(presence.ref, getElementRef(child));
|
|
3021
|
+
const forceMount = typeof children === "function";
|
|
3022
|
+
return forceMount || presence.isPresent ? React26.cloneElement(child, { ref }) : null;
|
|
3023
|
+
};
|
|
3024
|
+
Presence.displayName = "Presence";
|
|
3025
|
+
function usePresence(present) {
|
|
3026
|
+
const [node, setNode] = React26.useState();
|
|
3027
|
+
const stylesRef = React26.useRef(null);
|
|
3028
|
+
const prevPresentRef = React26.useRef(present);
|
|
3029
|
+
const prevAnimationNameRef = React26.useRef("none");
|
|
3030
|
+
const initialState = present ? "mounted" : "unmounted";
|
|
3031
|
+
const [state, send] = useStateMachine(initialState, {
|
|
3032
|
+
mounted: {
|
|
3033
|
+
UNMOUNT: "unmounted",
|
|
3034
|
+
ANIMATION_OUT: "unmountSuspended"
|
|
3035
|
+
},
|
|
3036
|
+
unmountSuspended: {
|
|
3037
|
+
MOUNT: "mounted",
|
|
3038
|
+
ANIMATION_END: "unmounted"
|
|
3039
|
+
},
|
|
3040
|
+
unmounted: {
|
|
3041
|
+
MOUNT: "mounted"
|
|
3042
|
+
}
|
|
3043
|
+
});
|
|
3044
|
+
React26.useEffect(() => {
|
|
3045
|
+
const currentAnimationName = getAnimationName(stylesRef.current);
|
|
3046
|
+
prevAnimationNameRef.current = state === "mounted" ? currentAnimationName : "none";
|
|
3047
|
+
}, [state]);
|
|
3048
|
+
useLayoutEffect2(() => {
|
|
3049
|
+
const styles = stylesRef.current;
|
|
3050
|
+
const wasPresent = prevPresentRef.current;
|
|
3051
|
+
const hasPresentChanged = wasPresent !== present;
|
|
3052
|
+
if (hasPresentChanged) {
|
|
3053
|
+
const prevAnimationName = prevAnimationNameRef.current;
|
|
3054
|
+
const currentAnimationName = getAnimationName(styles);
|
|
3055
|
+
if (present) {
|
|
3056
|
+
send("MOUNT");
|
|
3057
|
+
} else if (currentAnimationName === "none" || styles?.display === "none") {
|
|
3058
|
+
send("UNMOUNT");
|
|
3059
|
+
} else {
|
|
3060
|
+
const isAnimating = prevAnimationName !== currentAnimationName;
|
|
3061
|
+
if (wasPresent && isAnimating) {
|
|
3062
|
+
send("ANIMATION_OUT");
|
|
3063
|
+
} else {
|
|
3064
|
+
send("UNMOUNT");
|
|
3065
|
+
}
|
|
3066
|
+
}
|
|
3067
|
+
prevPresentRef.current = present;
|
|
3068
|
+
}
|
|
3069
|
+
}, [present, send]);
|
|
3070
|
+
useLayoutEffect2(() => {
|
|
3071
|
+
if (node) {
|
|
3072
|
+
let timeoutId;
|
|
3073
|
+
const ownerWindow = node.ownerDocument.defaultView ?? window;
|
|
3074
|
+
const handleAnimationEnd = (event) => {
|
|
3075
|
+
const currentAnimationName = getAnimationName(stylesRef.current);
|
|
3076
|
+
const isCurrentAnimation = currentAnimationName.includes(event.animationName);
|
|
3077
|
+
if (event.target === node && isCurrentAnimation) {
|
|
3078
|
+
send("ANIMATION_END");
|
|
3079
|
+
if (!prevPresentRef.current) {
|
|
3080
|
+
const currentFillMode = node.style.animationFillMode;
|
|
3081
|
+
node.style.animationFillMode = "forwards";
|
|
3082
|
+
timeoutId = ownerWindow.setTimeout(() => {
|
|
3083
|
+
if (node.style.animationFillMode === "forwards") {
|
|
3084
|
+
node.style.animationFillMode = currentFillMode;
|
|
3085
|
+
}
|
|
3086
|
+
});
|
|
3087
|
+
}
|
|
3088
|
+
}
|
|
3089
|
+
};
|
|
3090
|
+
const handleAnimationStart = (event) => {
|
|
3091
|
+
if (event.target === node) {
|
|
3092
|
+
prevAnimationNameRef.current = getAnimationName(stylesRef.current);
|
|
3093
|
+
}
|
|
3094
|
+
};
|
|
3095
|
+
node.addEventListener("animationstart", handleAnimationStart);
|
|
3096
|
+
node.addEventListener("animationcancel", handleAnimationEnd);
|
|
3097
|
+
node.addEventListener("animationend", handleAnimationEnd);
|
|
3098
|
+
return () => {
|
|
3099
|
+
ownerWindow.clearTimeout(timeoutId);
|
|
3100
|
+
node.removeEventListener("animationstart", handleAnimationStart);
|
|
3101
|
+
node.removeEventListener("animationcancel", handleAnimationEnd);
|
|
3102
|
+
node.removeEventListener("animationend", handleAnimationEnd);
|
|
3103
|
+
};
|
|
3104
|
+
} else {
|
|
3105
|
+
send("ANIMATION_END");
|
|
3106
|
+
}
|
|
3107
|
+
}, [node, send]);
|
|
3108
|
+
return {
|
|
3109
|
+
isPresent: ["mounted", "unmountSuspended"].includes(state),
|
|
3110
|
+
ref: React26.useCallback((node2) => {
|
|
3111
|
+
stylesRef.current = node2 ? getComputedStyle(node2) : null;
|
|
3112
|
+
setNode(node2);
|
|
3113
|
+
}, [])
|
|
3114
|
+
};
|
|
3115
|
+
}
|
|
3116
|
+
function getAnimationName(styles) {
|
|
3117
|
+
return styles?.animationName || "none";
|
|
3118
|
+
}
|
|
3119
|
+
function getElementRef(element) {
|
|
3120
|
+
let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
|
|
3121
|
+
let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
|
|
3122
|
+
if (mayWarn) {
|
|
3123
|
+
return element.ref;
|
|
3124
|
+
}
|
|
3125
|
+
getter = Object.getOwnPropertyDescriptor(element, "ref")?.get;
|
|
3126
|
+
mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
|
|
3127
|
+
if (mayWarn) {
|
|
3128
|
+
return element.props.ref;
|
|
3129
|
+
}
|
|
3130
|
+
return element.props.ref || element.ref;
|
|
3131
|
+
}
|
|
3132
|
+
|
|
3133
|
+
// node_modules/@radix-ui/react-id/dist/index.mjs
|
|
3134
|
+
var React28 = __toESM(require("react"), 1);
|
|
3135
|
+
var useReactId = React28[" useId ".trim().toString()] || (() => void 0);
|
|
3136
|
+
var count = 0;
|
|
3137
|
+
function useId2(deterministicId) {
|
|
3138
|
+
const [id, setId] = React28.useState(useReactId());
|
|
3139
|
+
useLayoutEffect2(() => {
|
|
3140
|
+
if (!deterministicId)
|
|
3141
|
+
setId((reactId) => reactId ?? String(count++));
|
|
3142
|
+
}, [deterministicId]);
|
|
3143
|
+
return deterministicId || (id ? `radix-${id}` : "");
|
|
3144
|
+
}
|
|
3145
|
+
|
|
3146
|
+
// node_modules/@radix-ui/react-collapsible/dist/index.mjs
|
|
3147
|
+
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
3148
|
+
var COLLAPSIBLE_NAME = "Collapsible";
|
|
3149
|
+
var [createCollapsibleContext, createCollapsibleScope] = createContextScope(COLLAPSIBLE_NAME);
|
|
3150
|
+
var [CollapsibleProvider, useCollapsibleContext] = createCollapsibleContext(COLLAPSIBLE_NAME);
|
|
3151
|
+
var Collapsible = React29.forwardRef(
|
|
3152
|
+
(props, forwardedRef) => {
|
|
3153
|
+
const {
|
|
3154
|
+
__scopeCollapsible,
|
|
3155
|
+
open: openProp,
|
|
3156
|
+
defaultOpen,
|
|
3157
|
+
disabled,
|
|
3158
|
+
onOpenChange,
|
|
3159
|
+
...collapsibleProps
|
|
3160
|
+
} = props;
|
|
3161
|
+
const [open, setOpen] = useControllableState({
|
|
3162
|
+
prop: openProp,
|
|
3163
|
+
defaultProp: defaultOpen ?? false,
|
|
3164
|
+
onChange: onOpenChange,
|
|
3165
|
+
caller: COLLAPSIBLE_NAME
|
|
3166
|
+
});
|
|
3167
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
3168
|
+
CollapsibleProvider,
|
|
3169
|
+
{
|
|
3170
|
+
scope: __scopeCollapsible,
|
|
3171
|
+
disabled,
|
|
3172
|
+
contentId: useId2(),
|
|
3173
|
+
open,
|
|
3174
|
+
onOpenToggle: React29.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen]),
|
|
3175
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
3176
|
+
Primitive.div,
|
|
3177
|
+
{
|
|
3178
|
+
"data-state": getState(open),
|
|
3179
|
+
"data-disabled": disabled ? "" : void 0,
|
|
3180
|
+
...collapsibleProps,
|
|
3181
|
+
ref: forwardedRef
|
|
3182
|
+
}
|
|
3183
|
+
)
|
|
3184
|
+
}
|
|
3185
|
+
);
|
|
3186
|
+
}
|
|
3187
|
+
);
|
|
3188
|
+
Collapsible.displayName = COLLAPSIBLE_NAME;
|
|
3189
|
+
var TRIGGER_NAME = "CollapsibleTrigger";
|
|
3190
|
+
var CollapsibleTrigger = React29.forwardRef(
|
|
3191
|
+
(props, forwardedRef) => {
|
|
3192
|
+
const { __scopeCollapsible, ...triggerProps } = props;
|
|
3193
|
+
const context = useCollapsibleContext(TRIGGER_NAME, __scopeCollapsible);
|
|
3194
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
3195
|
+
Primitive.button,
|
|
3196
|
+
{
|
|
3197
|
+
type: "button",
|
|
3198
|
+
"aria-controls": context.contentId,
|
|
3199
|
+
"aria-expanded": context.open || false,
|
|
3200
|
+
"data-state": getState(context.open),
|
|
3201
|
+
"data-disabled": context.disabled ? "" : void 0,
|
|
3202
|
+
disabled: context.disabled,
|
|
3203
|
+
...triggerProps,
|
|
3204
|
+
ref: forwardedRef,
|
|
3205
|
+
onClick: composeEventHandlers(props.onClick, context.onOpenToggle)
|
|
3206
|
+
}
|
|
3207
|
+
);
|
|
3208
|
+
}
|
|
3209
|
+
);
|
|
3210
|
+
CollapsibleTrigger.displayName = TRIGGER_NAME;
|
|
3211
|
+
var CONTENT_NAME = "CollapsibleContent";
|
|
3212
|
+
var CollapsibleContent = React29.forwardRef(
|
|
3213
|
+
(props, forwardedRef) => {
|
|
3214
|
+
const { forceMount, ...contentProps } = props;
|
|
3215
|
+
const context = useCollapsibleContext(CONTENT_NAME, props.__scopeCollapsible);
|
|
3216
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Presence, { present: forceMount || context.open, children: ({ present }) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CollapsibleContentImpl, { ...contentProps, ref: forwardedRef, present }) });
|
|
3217
|
+
}
|
|
3218
|
+
);
|
|
3219
|
+
CollapsibleContent.displayName = CONTENT_NAME;
|
|
3220
|
+
var CollapsibleContentImpl = React29.forwardRef((props, forwardedRef) => {
|
|
3221
|
+
const { __scopeCollapsible, present, children, ...contentProps } = props;
|
|
3222
|
+
const context = useCollapsibleContext(CONTENT_NAME, __scopeCollapsible);
|
|
3223
|
+
const [isPresent, setIsPresent] = React29.useState(present);
|
|
3224
|
+
const ref = React29.useRef(null);
|
|
3225
|
+
const composedRefs = useComposedRefs(forwardedRef, ref);
|
|
3226
|
+
const heightRef = React29.useRef(0);
|
|
3227
|
+
const height = heightRef.current;
|
|
3228
|
+
const widthRef = React29.useRef(0);
|
|
3229
|
+
const width = widthRef.current;
|
|
3230
|
+
const isOpen = context.open || isPresent;
|
|
3231
|
+
const isMountAnimationPreventedRef = React29.useRef(isOpen);
|
|
3232
|
+
const originalStylesRef = React29.useRef(void 0);
|
|
3233
|
+
React29.useEffect(() => {
|
|
3234
|
+
const rAF = requestAnimationFrame(() => isMountAnimationPreventedRef.current = false);
|
|
3235
|
+
return () => cancelAnimationFrame(rAF);
|
|
3236
|
+
}, []);
|
|
3237
|
+
useLayoutEffect2(() => {
|
|
3238
|
+
const node = ref.current;
|
|
3239
|
+
if (node) {
|
|
3240
|
+
originalStylesRef.current = originalStylesRef.current || {
|
|
3241
|
+
transitionDuration: node.style.transitionDuration,
|
|
3242
|
+
animationName: node.style.animationName
|
|
3243
|
+
};
|
|
3244
|
+
node.style.transitionDuration = "0s";
|
|
3245
|
+
node.style.animationName = "none";
|
|
3246
|
+
const rect = node.getBoundingClientRect();
|
|
3247
|
+
heightRef.current = rect.height;
|
|
3248
|
+
widthRef.current = rect.width;
|
|
3249
|
+
if (!isMountAnimationPreventedRef.current) {
|
|
3250
|
+
node.style.transitionDuration = originalStylesRef.current.transitionDuration;
|
|
3251
|
+
node.style.animationName = originalStylesRef.current.animationName;
|
|
3252
|
+
}
|
|
3253
|
+
setIsPresent(present);
|
|
3254
|
+
}
|
|
3255
|
+
}, [context.open, present]);
|
|
3256
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
3257
|
+
Primitive.div,
|
|
3258
|
+
{
|
|
3259
|
+
"data-state": getState(context.open),
|
|
3260
|
+
"data-disabled": context.disabled ? "" : void 0,
|
|
3261
|
+
id: context.contentId,
|
|
3262
|
+
hidden: !isOpen,
|
|
3263
|
+
...contentProps,
|
|
3264
|
+
ref: composedRefs,
|
|
3265
|
+
style: {
|
|
3266
|
+
[`--radix-collapsible-content-height`]: height ? `${height}px` : void 0,
|
|
3267
|
+
[`--radix-collapsible-content-width`]: width ? `${width}px` : void 0,
|
|
3268
|
+
...props.style
|
|
3269
|
+
},
|
|
3270
|
+
children: isOpen && children
|
|
3271
|
+
}
|
|
3272
|
+
);
|
|
3273
|
+
});
|
|
3274
|
+
function getState(open) {
|
|
3275
|
+
return open ? "open" : "closed";
|
|
3276
|
+
}
|
|
3277
|
+
var Root9 = Collapsible;
|
|
3278
|
+
var Trigger6 = CollapsibleTrigger;
|
|
3279
|
+
var Content6 = CollapsibleContent;
|
|
3280
|
+
|
|
3281
|
+
// src/components/ui/collapsible.tsx
|
|
3282
|
+
var import_class_variance_authority16 = require("class-variance-authority");
|
|
3283
|
+
var import_lucide_react9 = require("lucide-react");
|
|
3284
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
3285
|
+
var Collapsible2 = Root9;
|
|
3286
|
+
var collapsibleTriggerVariants = (0, import_class_variance_authority16.cva)(
|
|
3287
|
+
"flex w-full items-center justify-between transition-all",
|
|
3288
|
+
{
|
|
3289
|
+
variants: {
|
|
3290
|
+
variant: {
|
|
3291
|
+
default: "text-[var(--color-foreground)] hover:text-[var(--color-primary)]",
|
|
3292
|
+
ghost: "text-[var(--color-foreground)] hover:bg-[var(--color-accent)]/10 rounded",
|
|
3293
|
+
outline: "text-[var(--color-foreground)] border border-[var(--color-border)] rounded-t-[var(--radius-md)] hover:bg-[var(--color-accent)]/5"
|
|
3294
|
+
},
|
|
3295
|
+
size: {
|
|
3296
|
+
sm: "text-[var(--font-size-xs)] py-2 px-3",
|
|
3297
|
+
default: "text-[var(--font-size-sm)] py-3 px-4",
|
|
3298
|
+
md: "text-[var(--font-size-base)] py-4 px-4",
|
|
3299
|
+
lg: "text-[var(--font-size-lg)] py-5 px-5"
|
|
3300
|
+
}
|
|
3301
|
+
},
|
|
3302
|
+
defaultVariants: {
|
|
3303
|
+
variant: "default",
|
|
3304
|
+
size: "default"
|
|
3305
|
+
}
|
|
3306
|
+
}
|
|
3307
|
+
);
|
|
3308
|
+
var CollapsibleTrigger2 = React30.forwardRef(({ className, children, variant, size, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
|
|
3309
|
+
Trigger6,
|
|
3310
|
+
{
|
|
3311
|
+
ref,
|
|
3312
|
+
className: cn(collapsibleTriggerVariants({ variant, size }), className),
|
|
3313
|
+
...props,
|
|
3314
|
+
children: [
|
|
3315
|
+
children,
|
|
3316
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react9.ChevronDown, { className: "h-4 w-4 shrink-0 transition-transform duration-[var(--duration-base)] [&[data-state=open]]:rotate-180" })
|
|
3317
|
+
]
|
|
3318
|
+
}
|
|
3319
|
+
));
|
|
3320
|
+
CollapsibleTrigger2.displayName = Trigger6.displayName;
|
|
3321
|
+
var collapsibleContentVariants = (0, import_class_variance_authority16.cva)(
|
|
3322
|
+
"overflow-hidden transition-all data-[state=closed]:animate-collapse-up data-[state=open]:animate-collapse-down",
|
|
3323
|
+
{
|
|
3324
|
+
variants: {
|
|
3325
|
+
variant: {
|
|
3326
|
+
default: "text-[var(--color-muted-foreground)]",
|
|
3327
|
+
ghost: "text-[var(--color-muted-foreground)] rounded-b",
|
|
3328
|
+
outline: "text-[var(--color-muted-foreground)] border border-t-0 border-[var(--color-border)] rounded-b-[var(--radius-md)]"
|
|
3329
|
+
},
|
|
3330
|
+
size: {
|
|
3331
|
+
sm: "text-[var(--font-size-xs)]",
|
|
3332
|
+
default: "text-[var(--font-size-sm)]",
|
|
3333
|
+
md: "text-[var(--font-size-base)]",
|
|
3334
|
+
lg: "text-[var(--font-size-lg)]"
|
|
3335
|
+
}
|
|
3336
|
+
},
|
|
3337
|
+
defaultVariants: {
|
|
3338
|
+
variant: "default",
|
|
3339
|
+
size: "default"
|
|
3340
|
+
}
|
|
3341
|
+
}
|
|
3342
|
+
);
|
|
3343
|
+
var CollapsibleContent2 = React30.forwardRef(({ className, children, variant, size, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
3344
|
+
Content6,
|
|
3345
|
+
{
|
|
3346
|
+
ref,
|
|
3347
|
+
className: cn(collapsibleContentVariants({ variant, size }), className),
|
|
3348
|
+
...props,
|
|
3349
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "p-4", children })
|
|
3350
|
+
}
|
|
3351
|
+
));
|
|
3352
|
+
CollapsibleContent2.displayName = Content6.displayName;
|
|
3353
|
+
|
|
3354
|
+
// src/components/ui/aspect-ratio.tsx
|
|
3355
|
+
var React31 = __toESM(require("react"));
|
|
3356
|
+
var import_class_variance_authority17 = require("class-variance-authority");
|
|
3357
|
+
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
3358
|
+
var aspectRatioVariants = (0, import_class_variance_authority17.cva)(
|
|
3359
|
+
"relative overflow-hidden",
|
|
3360
|
+
{
|
|
3361
|
+
variants: {
|
|
3362
|
+
variant: {
|
|
3363
|
+
default: "rounded-[var(--radius-md)] bg-[var(--color-muted)]/10",
|
|
3364
|
+
ghost: "bg-transparent",
|
|
3365
|
+
outline: "rounded-[var(--radius-md)] border border-[var(--color-border)]",
|
|
3366
|
+
card: "rounded-[var(--radius-md)] bg-[var(--color-card)] shadow-sm"
|
|
3367
|
+
},
|
|
3368
|
+
radius: {
|
|
3369
|
+
none: "rounded-none",
|
|
3370
|
+
sm: "rounded-[var(--radius-sm)]",
|
|
3371
|
+
md: "rounded-[var(--radius-md)]",
|
|
3372
|
+
lg: "rounded-[var(--radius-lg)]",
|
|
3373
|
+
full: "rounded-full"
|
|
3374
|
+
}
|
|
3375
|
+
},
|
|
3376
|
+
defaultVariants: {
|
|
3377
|
+
variant: "default"
|
|
3378
|
+
}
|
|
3379
|
+
}
|
|
3380
|
+
);
|
|
3381
|
+
var AspectRatio = React31.forwardRef(({ className, variant, radius, ratio = 16 / 9, style, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
3382
|
+
"div",
|
|
3383
|
+
{
|
|
3384
|
+
ref,
|
|
3385
|
+
className: cn(aspectRatioVariants({ variant, radius }), className),
|
|
3386
|
+
style: {
|
|
3387
|
+
position: "relative",
|
|
3388
|
+
paddingBottom: `${1 / ratio * 100}%`,
|
|
3389
|
+
...style
|
|
3390
|
+
},
|
|
3391
|
+
...props,
|
|
3392
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "absolute inset-0", children })
|
|
3393
|
+
}
|
|
3394
|
+
));
|
|
3395
|
+
AspectRatio.displayName = "AspectRatio";
|
|
3396
|
+
|
|
3397
|
+
// src/components/ui/command.tsx
|
|
3398
|
+
var React32 = __toESM(require("react"));
|
|
3399
|
+
var import_lucide_react10 = require("lucide-react");
|
|
3400
|
+
var import_class_variance_authority18 = require("class-variance-authority");
|
|
3401
|
+
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
3402
|
+
var commandVariants = (0, import_class_variance_authority18.cva)(
|
|
3403
|
+
"flex h-full w-full flex-col overflow-hidden rounded-[var(--radius-md)]",
|
|
3404
|
+
{
|
|
3405
|
+
variants: {
|
|
3406
|
+
variant: {
|
|
3407
|
+
default: "bg-[var(--color-popover)] text-[var(--color-popover-foreground)]",
|
|
3408
|
+
glass: "bg-[var(--color-background)]/80 text-[var(--color-foreground)] backdrop-blur-sm",
|
|
3409
|
+
bordered: "bg-[var(--color-popover)] text-[var(--color-popover-foreground)] border border-[var(--color-border)]"
|
|
3410
|
+
},
|
|
3411
|
+
size: {
|
|
3412
|
+
sm: "p-2",
|
|
3413
|
+
default: "p-4",
|
|
3414
|
+
lg: "p-6"
|
|
3415
|
+
}
|
|
3416
|
+
},
|
|
3417
|
+
defaultVariants: {
|
|
3418
|
+
variant: "default",
|
|
3419
|
+
size: "default"
|
|
3420
|
+
}
|
|
3421
|
+
}
|
|
3422
|
+
);
|
|
3423
|
+
var Command = React32.forwardRef(
|
|
3424
|
+
({ className, variant, size, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
3425
|
+
"div",
|
|
3426
|
+
{
|
|
3427
|
+
ref,
|
|
3428
|
+
className: cn(commandVariants({ variant, size }), className),
|
|
3429
|
+
...props
|
|
3430
|
+
}
|
|
3431
|
+
)
|
|
3432
|
+
);
|
|
3433
|
+
Command.displayName = "Command";
|
|
3434
|
+
var CommandDialog = ({
|
|
3435
|
+
children,
|
|
3436
|
+
commandClassName,
|
|
3437
|
+
...props
|
|
3438
|
+
}) => {
|
|
3439
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Dialog, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(DialogContent, { className: "overflow-hidden p-0 shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Command, { className: cn(
|
|
3440
|
+
"data-[state=open]:animate-in data-[state=closed]:animate-out",
|
|
3441
|
+
commandClassName
|
|
3442
|
+
), children }) }) });
|
|
3443
|
+
};
|
|
3444
|
+
var commandInputVariants = (0, import_class_variance_authority18.cva)(
|
|
3445
|
+
"flex h-11 w-full rounded-none border-none bg-transparent py-3 text-sm outline-none placeholder:text-[var(--color-muted-foreground)] disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none",
|
|
3446
|
+
{
|
|
3447
|
+
variants: {
|
|
3448
|
+
variant: {
|
|
3449
|
+
default: "",
|
|
3450
|
+
minimal: "h-9",
|
|
3451
|
+
bordered: "border-b border-[var(--color-border)]"
|
|
3452
|
+
}
|
|
3453
|
+
},
|
|
3454
|
+
defaultVariants: {
|
|
3455
|
+
variant: "default"
|
|
3456
|
+
}
|
|
3457
|
+
}
|
|
3458
|
+
);
|
|
3459
|
+
var CommandInput = React32.forwardRef(
|
|
3460
|
+
({ className, variant, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex items-center border-b px-3", children: [
|
|
3461
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react10.Search, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
|
|
3462
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
3463
|
+
"input",
|
|
3464
|
+
{
|
|
3465
|
+
ref,
|
|
3466
|
+
className: cn(commandInputVariants({ variant }), className),
|
|
3467
|
+
...props
|
|
3468
|
+
}
|
|
3469
|
+
)
|
|
3470
|
+
] })
|
|
3471
|
+
);
|
|
3472
|
+
CommandInput.displayName = "CommandInput";
|
|
3473
|
+
var commandListVariants = (0, import_class_variance_authority18.cva)(
|
|
3474
|
+
"max-h-[300px] overflow-y-auto overflow-x-hidden",
|
|
3475
|
+
{
|
|
3476
|
+
variants: {
|
|
3477
|
+
variant: {
|
|
3478
|
+
default: "",
|
|
3479
|
+
scrollable: "max-h-[400px]",
|
|
3480
|
+
compact: "max-h-[200px]"
|
|
3481
|
+
}
|
|
3482
|
+
},
|
|
3483
|
+
defaultVariants: {
|
|
3484
|
+
variant: "default"
|
|
3485
|
+
}
|
|
3486
|
+
}
|
|
3487
|
+
);
|
|
3488
|
+
var CommandList = React32.forwardRef(
|
|
3489
|
+
({ className, variant, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
3490
|
+
"div",
|
|
3491
|
+
{
|
|
3492
|
+
ref,
|
|
3493
|
+
className: cn(commandListVariants({ variant }), className),
|
|
3494
|
+
role: "listbox",
|
|
3495
|
+
...props
|
|
3496
|
+
}
|
|
3497
|
+
)
|
|
3498
|
+
);
|
|
3499
|
+
CommandList.displayName = "CommandList";
|
|
3500
|
+
var CommandEmpty = React32.forwardRef(
|
|
3501
|
+
(props, ref) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
3502
|
+
"div",
|
|
3503
|
+
{
|
|
3504
|
+
ref,
|
|
3505
|
+
className: "py-6 text-center text-sm text-[var(--color-muted-foreground)]",
|
|
3506
|
+
...props
|
|
3507
|
+
}
|
|
3508
|
+
)
|
|
3509
|
+
);
|
|
3510
|
+
CommandEmpty.displayName = "CommandEmpty";
|
|
3511
|
+
var commandGroupVariants = (0, import_class_variance_authority18.cva)(
|
|
3512
|
+
"overflow-hidden p-1 text-[var(--color-foreground)]",
|
|
3513
|
+
{
|
|
3514
|
+
variants: {
|
|
3515
|
+
variant: {
|
|
3516
|
+
default: "",
|
|
3517
|
+
separated: "mt-2 border-t border-[var(--color-border)] pt-2",
|
|
3518
|
+
indented: "pl-4"
|
|
3519
|
+
}
|
|
3520
|
+
},
|
|
3521
|
+
defaultVariants: {
|
|
3522
|
+
variant: "default"
|
|
3523
|
+
}
|
|
3524
|
+
}
|
|
3525
|
+
);
|
|
3526
|
+
var CommandGroup = React32.forwardRef(
|
|
3527
|
+
({ className, variant, heading, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
|
|
3528
|
+
"div",
|
|
3529
|
+
{
|
|
3530
|
+
ref,
|
|
3531
|
+
className: cn(commandGroupVariants({ variant }), className),
|
|
3532
|
+
...props,
|
|
3533
|
+
children: [
|
|
3534
|
+
heading && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "px-2 py-1.5 text-xs font-medium text-[var(--color-muted-foreground)]", children: heading }),
|
|
3535
|
+
children
|
|
3536
|
+
]
|
|
3537
|
+
}
|
|
3538
|
+
)
|
|
3539
|
+
);
|
|
3540
|
+
CommandGroup.displayName = "CommandGroup";
|
|
3541
|
+
var CommandSeparator = React32.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
3542
|
+
"div",
|
|
3543
|
+
{
|
|
3544
|
+
ref,
|
|
3545
|
+
className: cn("-mx-1 h-px bg-[var(--color-border)]", className),
|
|
3546
|
+
...props
|
|
3547
|
+
}
|
|
3548
|
+
));
|
|
3549
|
+
CommandSeparator.displayName = "CommandSeparator";
|
|
3550
|
+
var commandItemVariants = (0, import_class_variance_authority18.cva)(
|
|
3551
|
+
"relative flex cursor-default select-none items-center rounded-[var(--radius-sm)] px-2 py-1.5 text-sm outline-none aria-selected:bg-[var(--color-accent)] aria-selected:text-[var(--color-accent-foreground)] data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
|
3552
|
+
{
|
|
3553
|
+
variants: {
|
|
3554
|
+
variant: {
|
|
3555
|
+
default: "",
|
|
3556
|
+
subtle: "aria-selected:bg-[var(--color-accent)]/10 aria-selected:text-[var(--color-accent-foreground)]",
|
|
3557
|
+
ghost: "hover:bg-[var(--color-muted)]/10 aria-selected:bg-[var(--color-muted)]/20 aria-selected:text-[var(--color-foreground)]"
|
|
3558
|
+
}
|
|
3559
|
+
},
|
|
3560
|
+
defaultVariants: {
|
|
3561
|
+
variant: "default"
|
|
3562
|
+
}
|
|
3563
|
+
}
|
|
3564
|
+
);
|
|
3565
|
+
var CommandItem = React32.forwardRef(
|
|
3566
|
+
({ className, variant, onSelect, selected, disabled, value, ...props }, ref) => {
|
|
3567
|
+
const handleClick = React32.useCallback(() => {
|
|
3568
|
+
if (disabled)
|
|
3569
|
+
return;
|
|
3570
|
+
if (onSelect && value) {
|
|
3571
|
+
onSelect(value);
|
|
3572
|
+
}
|
|
3573
|
+
}, [disabled, onSelect, value]);
|
|
3574
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
3575
|
+
"div",
|
|
3576
|
+
{
|
|
3577
|
+
ref,
|
|
3578
|
+
className: cn(commandItemVariants({ variant }), className),
|
|
3579
|
+
role: "option",
|
|
3580
|
+
"aria-selected": selected,
|
|
3581
|
+
"data-disabled": disabled ? "" : void 0,
|
|
3582
|
+
onClick: handleClick,
|
|
3583
|
+
...props
|
|
3584
|
+
}
|
|
3585
|
+
);
|
|
3586
|
+
}
|
|
3587
|
+
);
|
|
3588
|
+
CommandItem.displayName = "CommandItem";
|
|
3589
|
+
var CommandShortcut = ({ className, ...props }) => {
|
|
3590
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
3591
|
+
"span",
|
|
3592
|
+
{
|
|
3593
|
+
className: cn(
|
|
3594
|
+
"ml-auto text-xs tracking-widest text-[var(--color-muted-foreground)]",
|
|
3595
|
+
className
|
|
3596
|
+
),
|
|
3597
|
+
...props
|
|
3598
|
+
}
|
|
3599
|
+
);
|
|
3600
|
+
};
|
|
3601
|
+
CommandShortcut.displayName = "CommandShortcut";
|
|
226
3602
|
// Annotate the CommonJS export names for ESM import in node:
|
|
227
3603
|
0 && (module.exports = {
|
|
3604
|
+
Accordion,
|
|
3605
|
+
AccordionContent,
|
|
3606
|
+
AccordionItem,
|
|
3607
|
+
AccordionTrigger,
|
|
3608
|
+
Alert,
|
|
3609
|
+
AlertDescription,
|
|
3610
|
+
AlertTitle,
|
|
3611
|
+
AspectRatio,
|
|
3612
|
+
Avatar,
|
|
3613
|
+
AvatarFallback,
|
|
3614
|
+
AvatarImage,
|
|
228
3615
|
Badge,
|
|
3616
|
+
Breadcrumb,
|
|
3617
|
+
BreadcrumbEllipsis,
|
|
3618
|
+
BreadcrumbItem,
|
|
3619
|
+
BreadcrumbList,
|
|
3620
|
+
BreadcrumbSeparator,
|
|
229
3621
|
Button,
|
|
230
3622
|
Card,
|
|
231
3623
|
CardContent,
|
|
@@ -233,12 +3625,92 @@ CardFooter.displayName = "CardFooter";
|
|
|
233
3625
|
CardFooter,
|
|
234
3626
|
CardHeader,
|
|
235
3627
|
CardTitle,
|
|
3628
|
+
Checkbox,
|
|
3629
|
+
CheckboxGroup,
|
|
3630
|
+
CheckboxLabel,
|
|
3631
|
+
CheckboxWithLabel,
|
|
3632
|
+
Collapsible,
|
|
3633
|
+
CollapsibleContent,
|
|
3634
|
+
CollapsibleTrigger,
|
|
3635
|
+
Command,
|
|
3636
|
+
CommandDialog,
|
|
3637
|
+
CommandEmpty,
|
|
3638
|
+
CommandGroup,
|
|
3639
|
+
CommandInput,
|
|
3640
|
+
CommandItem,
|
|
3641
|
+
CommandList,
|
|
3642
|
+
CommandSeparator,
|
|
3643
|
+
CommandShortcut,
|
|
3644
|
+
Dialog,
|
|
3645
|
+
DialogClose,
|
|
3646
|
+
DialogContent,
|
|
3647
|
+
DialogDescription,
|
|
3648
|
+
DialogFooter,
|
|
3649
|
+
DialogForm,
|
|
3650
|
+
DialogHeader,
|
|
3651
|
+
DialogTitle,
|
|
3652
|
+
DialogTrigger,
|
|
3653
|
+
Input,
|
|
3654
|
+
Popover,
|
|
3655
|
+
PopoverAnchor,
|
|
3656
|
+
PopoverClose,
|
|
3657
|
+
PopoverContent,
|
|
3658
|
+
PopoverFooter,
|
|
3659
|
+
PopoverHeader,
|
|
3660
|
+
PopoverSeparator,
|
|
3661
|
+
PopoverTrigger,
|
|
3662
|
+
Progress,
|
|
3663
|
+
RadioGroup,
|
|
3664
|
+
RadioGroupItem,
|
|
3665
|
+
RadioItemWithLabel,
|
|
3666
|
+
RadioLabel,
|
|
3667
|
+
Select,
|
|
3668
|
+
SelectContent,
|
|
3669
|
+
SelectGroup,
|
|
3670
|
+
SelectItem,
|
|
3671
|
+
SelectLabel,
|
|
3672
|
+
SelectSeparator,
|
|
3673
|
+
SelectTrigger,
|
|
3674
|
+
SelectValue,
|
|
3675
|
+
Skeleton,
|
|
3676
|
+
SkeletonAvatar,
|
|
3677
|
+
SkeletonCard,
|
|
3678
|
+
SkeletonText,
|
|
3679
|
+
Switch,
|
|
3680
|
+
Tabs,
|
|
3681
|
+
TabsContent,
|
|
3682
|
+
TabsList,
|
|
3683
|
+
TabsTrigger,
|
|
3684
|
+
ThemeProvider,
|
|
3685
|
+
Toast,
|
|
3686
|
+
ToastContainer,
|
|
3687
|
+
ToastProvider,
|
|
3688
|
+
Tooltip,
|
|
3689
|
+
accordionContentVariants,
|
|
3690
|
+
accordionItemVariants,
|
|
3691
|
+
accordionTriggerVariants,
|
|
3692
|
+
aspectRatioVariants,
|
|
236
3693
|
badgeVariants,
|
|
237
3694
|
buttonVariants,
|
|
238
3695
|
cn,
|
|
3696
|
+
collapsibleContentVariants,
|
|
3697
|
+
collapsibleTriggerVariants,
|
|
239
3698
|
combineRefs,
|
|
3699
|
+
commandGroupVariants,
|
|
3700
|
+
commandInputVariants,
|
|
3701
|
+
commandItemVariants,
|
|
3702
|
+
commandListVariants,
|
|
3703
|
+
commandVariants,
|
|
3704
|
+
createCssVariables,
|
|
240
3705
|
debounce,
|
|
241
3706
|
formatCurrency,
|
|
242
3707
|
generateId,
|
|
243
|
-
get
|
|
3708
|
+
get,
|
|
3709
|
+
popoverContentVariants,
|
|
3710
|
+
progressVariants,
|
|
3711
|
+
skeletonVariants,
|
|
3712
|
+
toastVariants,
|
|
3713
|
+
tooltipContentVariants,
|
|
3714
|
+
useTheme,
|
|
3715
|
+
useToast
|
|
244
3716
|
});
|