@pactor-app/ui 1.1.0 → 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,1197 @@
1
+ import {
2
+ Button,
3
+ cn
4
+ } from "./chunk-WKJUCGV4.js";
5
+
6
+ // src/ui/accordion.tsx
7
+ import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion";
8
+ import { ChevronDownIcon } from "lucide-react";
9
+ import { jsx, jsxs } from "react/jsx-runtime";
10
+ function toArray(value) {
11
+ if (value === void 0) {
12
+ return void 0;
13
+ }
14
+ return Array.isArray(value) ? value : [value];
15
+ }
16
+ function Accordion({
17
+ type = "single",
18
+ value,
19
+ defaultValue,
20
+ onValueChange,
21
+ ...props
22
+ }) {
23
+ return /* @__PURE__ */ jsx(
24
+ AccordionPrimitive.Root,
25
+ {
26
+ "data-slot": "accordion",
27
+ multiple: type === "multiple",
28
+ value: toArray(value),
29
+ defaultValue: toArray(defaultValue),
30
+ onValueChange: onValueChange === void 0 ? void 0 : (next) => onValueChange(type === "multiple" ? next : next[0] ?? ""),
31
+ ...props
32
+ }
33
+ );
34
+ }
35
+ function AccordionItem({
36
+ className,
37
+ ...props
38
+ }) {
39
+ return /* @__PURE__ */ jsx(
40
+ AccordionPrimitive.Item,
41
+ {
42
+ "data-slot": "accordion-item",
43
+ className: cn("border-b border-border last:border-b-0", className),
44
+ ...props
45
+ }
46
+ );
47
+ }
48
+ function AccordionTrigger({
49
+ className,
50
+ children,
51
+ ...props
52
+ }) {
53
+ return /* @__PURE__ */ jsx(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs(
54
+ AccordionPrimitive.Trigger,
55
+ {
56
+ "data-slot": "accordion-trigger",
57
+ className: cn(
58
+ "flex flex-1 cursor-pointer items-center justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-colors outline-none hover:bg-accent hover:text-accent-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&[aria-expanded=true]>svg]:rotate-180",
59
+ className
60
+ ),
61
+ ...props,
62
+ children: [
63
+ children,
64
+ /* @__PURE__ */ jsx(ChevronDownIcon, { className: "pointer-events-none size-4 shrink-0 translate-y-0.5 text-muted-foreground transition-transform duration-200" })
65
+ ]
66
+ }
67
+ ) });
68
+ }
69
+ function AccordionContent({
70
+ className,
71
+ children,
72
+ ...props
73
+ }) {
74
+ return /* @__PURE__ */ jsx(
75
+ AccordionPrimitive.Panel,
76
+ {
77
+ "data-slot": "accordion-content",
78
+ className: "overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up",
79
+ ...props,
80
+ children: /* @__PURE__ */ jsx("div", { className: cn("pt-0 pb-4", className), children })
81
+ }
82
+ );
83
+ }
84
+
85
+ // src/ui/card.tsx
86
+ import { jsx as jsx2 } from "react/jsx-runtime";
87
+ function Card({ className, ...props }) {
88
+ return /* @__PURE__ */ jsx2(
89
+ "div",
90
+ {
91
+ "data-slot": "card",
92
+ className: cn(
93
+ "flex flex-col gap-6 rounded-xl border border-border bg-card py-6 text-card-foreground shadow-(--card-shadow)",
94
+ className
95
+ ),
96
+ ...props
97
+ }
98
+ );
99
+ }
100
+ function CardHeader({ className, ...props }) {
101
+ return /* @__PURE__ */ jsx2(
102
+ "div",
103
+ {
104
+ "data-slot": "card-header",
105
+ className: cn(
106
+ "grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
107
+ className
108
+ ),
109
+ ...props
110
+ }
111
+ );
112
+ }
113
+ function CardTitle({ className, ...props }) {
114
+ return /* @__PURE__ */ jsx2(
115
+ "div",
116
+ {
117
+ "data-slot": "card-title",
118
+ className: cn("leading-none font-semibold", className),
119
+ ...props
120
+ }
121
+ );
122
+ }
123
+ function CardDescription({ className, ...props }) {
124
+ return /* @__PURE__ */ jsx2(
125
+ "div",
126
+ {
127
+ "data-slot": "card-description",
128
+ className: cn("text-sm text-muted-foreground", className),
129
+ ...props
130
+ }
131
+ );
132
+ }
133
+ function CardAction({ className, ...props }) {
134
+ return /* @__PURE__ */ jsx2(
135
+ "div",
136
+ {
137
+ "data-slot": "card-action",
138
+ className: cn(
139
+ "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
140
+ className
141
+ ),
142
+ ...props
143
+ }
144
+ );
145
+ }
146
+ function CardContent({ className, ...props }) {
147
+ return /* @__PURE__ */ jsx2(
148
+ "div",
149
+ {
150
+ "data-slot": "card-content",
151
+ className: cn("px-6", className),
152
+ ...props
153
+ }
154
+ );
155
+ }
156
+ function CardFooter({ className, ...props }) {
157
+ return /* @__PURE__ */ jsx2(
158
+ "div",
159
+ {
160
+ "data-slot": "card-footer",
161
+ className: cn("flex items-center px-6 [.border-t]:pt-6", className),
162
+ ...props
163
+ }
164
+ );
165
+ }
166
+
167
+ // src/ui/popover.tsx
168
+ import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
169
+ import { jsx as jsx3 } from "react/jsx-runtime";
170
+ function Popover({
171
+ ...props
172
+ }) {
173
+ return /* @__PURE__ */ jsx3(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
174
+ }
175
+ function PopoverTrigger({
176
+ ...props
177
+ }) {
178
+ return /* @__PURE__ */ jsx3(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
179
+ }
180
+ function PopoverContent({
181
+ className,
182
+ align = "center",
183
+ side = "bottom",
184
+ sideOffset = 4,
185
+ anchor,
186
+ ...props
187
+ }) {
188
+ return /* @__PURE__ */ jsx3(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx3(
189
+ PopoverPrimitive.Positioner,
190
+ {
191
+ align,
192
+ side,
193
+ sideOffset,
194
+ anchor,
195
+ className: "isolate z-50",
196
+ children: /* @__PURE__ */ jsx3(
197
+ PopoverPrimitive.Popup,
198
+ {
199
+ "data-slot": "popover-content",
200
+ className: cn(
201
+ "z-50 w-72 rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md shadow-(color:--shadow-color) outline-none duration-200 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
202
+ className
203
+ ),
204
+ ...props
205
+ }
206
+ )
207
+ }
208
+ ) });
209
+ }
210
+
211
+ // src/ui/input.tsx
212
+ import { jsx as jsx4 } from "react/jsx-runtime";
213
+ function Input({ className, type, ...props }) {
214
+ return /* @__PURE__ */ jsx4(
215
+ "input",
216
+ {
217
+ type,
218
+ "data-slot": "input",
219
+ className: cn(
220
+ "flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50",
221
+ className
222
+ ),
223
+ ...props
224
+ }
225
+ );
226
+ }
227
+
228
+ // src/ui/tooltip.tsx
229
+ import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
230
+ import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
231
+ function TooltipProvider({
232
+ delay = 0,
233
+ ...props
234
+ }) {
235
+ return /* @__PURE__ */ jsx5(
236
+ TooltipPrimitive.Provider,
237
+ {
238
+ "data-slot": "tooltip-provider",
239
+ delay,
240
+ ...props
241
+ }
242
+ );
243
+ }
244
+ function Tooltip({
245
+ ...props
246
+ }) {
247
+ return /* @__PURE__ */ jsx5(TooltipProvider, { children: /* @__PURE__ */ jsx5(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props }) });
248
+ }
249
+ function TooltipTrigger({
250
+ ...props
251
+ }) {
252
+ return /* @__PURE__ */ jsx5(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
253
+ }
254
+ function TooltipContent({
255
+ className,
256
+ side = "top",
257
+ sideOffset = 4,
258
+ align = "center",
259
+ children,
260
+ ...props
261
+ }) {
262
+ return /* @__PURE__ */ jsx5(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx5(
263
+ TooltipPrimitive.Positioner,
264
+ {
265
+ align,
266
+ side,
267
+ sideOffset,
268
+ className: "isolate z-50",
269
+ children: /* @__PURE__ */ jsxs2(
270
+ TooltipPrimitive.Popup,
271
+ {
272
+ "data-slot": "tooltip-content",
273
+ className: cn(
274
+ "z-50 w-fit origin-(--transform-origin) rounded-md bg-primary px-3 py-1.5 text-xs text-balance text-primary-foreground duration-200 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
275
+ className
276
+ ),
277
+ ...props,
278
+ children: [
279
+ children,
280
+ /* @__PURE__ */ jsx5(TooltipPrimitive.Arrow, { className: "z-50 size-2.5 rotate-45 rounded-[2px] bg-primary fill-primary data-[side=top]:-bottom-1 data-[side=bottom]:-top-1 data-[side=left]:-right-1 data-[side=right]:-left-1" })
281
+ ]
282
+ }
283
+ )
284
+ }
285
+ ) });
286
+ }
287
+
288
+ // src/ui/separator.tsx
289
+ import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";
290
+ import { jsx as jsx6 } from "react/jsx-runtime";
291
+ function Separator({
292
+ className,
293
+ orientation = "horizontal",
294
+ decorative: _decorative,
295
+ ...props
296
+ }) {
297
+ return /* @__PURE__ */ jsx6(
298
+ SeparatorPrimitive,
299
+ {
300
+ "data-slot": "separator",
301
+ orientation,
302
+ className: cn(
303
+ "shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
304
+ className
305
+ ),
306
+ ...props
307
+ }
308
+ );
309
+ }
310
+
311
+ // src/ui/sheet.tsx
312
+ import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
313
+ import { XIcon } from "lucide-react";
314
+ import { cva } from "class-variance-authority";
315
+ import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
316
+ function Sheet({
317
+ ...props
318
+ }) {
319
+ return /* @__PURE__ */ jsx7(DialogPrimitive.Root, { "data-slot": "sheet", ...props });
320
+ }
321
+ function SheetTrigger({
322
+ ...props
323
+ }) {
324
+ return /* @__PURE__ */ jsx7(DialogPrimitive.Trigger, { "data-slot": "sheet-trigger", ...props });
325
+ }
326
+ function SheetClose({
327
+ ...props
328
+ }) {
329
+ return /* @__PURE__ */ jsx7(DialogPrimitive.Close, { "data-slot": "sheet-close", ...props });
330
+ }
331
+ function SheetPortal({
332
+ ...props
333
+ }) {
334
+ return /* @__PURE__ */ jsx7(DialogPrimitive.Portal, { "data-slot": "sheet-portal", ...props });
335
+ }
336
+ function SheetOverlay({
337
+ className,
338
+ ...props
339
+ }) {
340
+ return /* @__PURE__ */ jsx7(
341
+ DialogPrimitive.Backdrop,
342
+ {
343
+ "data-slot": "sheet-overlay",
344
+ className: cn(
345
+ "fixed inset-0 z-50 bg-(--overlay-background) data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
346
+ className
347
+ ),
348
+ ...props
349
+ }
350
+ );
351
+ }
352
+ var sheetVariants = cva(
353
+ "fixed z-50 flex flex-col gap-4 border-border bg-popover shadow-lg shadow-(color:--shadow-color) transition ease-in-out data-open:animate-in data-open:duration-300 data-closed:animate-out data-closed:duration-200",
354
+ {
355
+ variants: {
356
+ side: {
357
+ right: "inset-y-0 right-0 h-full w-3/4 border-l data-open:slide-in-from-right data-closed:slide-out-to-right sm:max-w-sm",
358
+ left: "inset-y-0 left-0 h-full w-3/4 border-r data-open:slide-in-from-left data-closed:slide-out-to-left sm:max-w-sm",
359
+ top: "inset-x-0 top-0 border-b data-open:slide-in-from-top data-closed:slide-out-to-top",
360
+ bottom: "inset-x-0 bottom-0 border-t data-open:slide-in-from-bottom data-closed:slide-out-to-bottom"
361
+ }
362
+ },
363
+ defaultVariants: {
364
+ side: "right"
365
+ }
366
+ }
367
+ );
368
+ function SheetContent({
369
+ className,
370
+ children,
371
+ side = "right",
372
+ ...props
373
+ }) {
374
+ return /* @__PURE__ */ jsxs3(SheetPortal, { "data-slot": "sheet-portal", children: [
375
+ /* @__PURE__ */ jsx7(SheetOverlay, {}),
376
+ /* @__PURE__ */ jsxs3(
377
+ DialogPrimitive.Popup,
378
+ {
379
+ "data-slot": "sheet-content",
380
+ className: cn(sheetVariants({ side }), className),
381
+ ...props,
382
+ children: [
383
+ children,
384
+ /* @__PURE__ */ jsxs3(
385
+ DialogPrimitive.Close,
386
+ {
387
+ "data-slot": "sheet-close",
388
+ render: /* @__PURE__ */ jsx7(
389
+ "button",
390
+ {
391
+ type: "button",
392
+ className: "absolute top-4 right-4 cursor-pointer rounded-xs opacity-70 transition-opacity hover:opacity-100 focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-none disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
393
+ }
394
+ ),
395
+ children: [
396
+ /* @__PURE__ */ jsx7(XIcon, {}),
397
+ /* @__PURE__ */ jsx7("span", { className: "sr-only", children: "Close" })
398
+ ]
399
+ }
400
+ )
401
+ ]
402
+ }
403
+ )
404
+ ] });
405
+ }
406
+ function SheetHeader({ className, ...props }) {
407
+ return /* @__PURE__ */ jsx7(
408
+ "div",
409
+ {
410
+ "data-slot": "sheet-header",
411
+ className: cn("flex flex-col gap-1.5 p-4", className),
412
+ ...props
413
+ }
414
+ );
415
+ }
416
+ function SheetFooter({ className, ...props }) {
417
+ return /* @__PURE__ */ jsx7(
418
+ "div",
419
+ {
420
+ "data-slot": "sheet-footer",
421
+ className: cn("mt-auto flex flex-col gap-2 p-4", className),
422
+ ...props
423
+ }
424
+ );
425
+ }
426
+ function SheetTitle({
427
+ className,
428
+ ...props
429
+ }) {
430
+ return /* @__PURE__ */ jsx7(
431
+ DialogPrimitive.Title,
432
+ {
433
+ "data-slot": "sheet-title",
434
+ className: cn("font-semibold text-foreground", className),
435
+ ...props
436
+ }
437
+ );
438
+ }
439
+ function SheetDescription({
440
+ className,
441
+ ...props
442
+ }) {
443
+ return /* @__PURE__ */ jsx7(
444
+ DialogPrimitive.Description,
445
+ {
446
+ "data-slot": "sheet-description",
447
+ className: cn("text-sm text-muted-foreground", className),
448
+ ...props
449
+ }
450
+ );
451
+ }
452
+
453
+ // src/ui/skeleton.tsx
454
+ import { jsx as jsx8 } from "react/jsx-runtime";
455
+ function Skeleton({ className, ...props }) {
456
+ return /* @__PURE__ */ jsx8(
457
+ "div",
458
+ {
459
+ "data-slot": "skeleton",
460
+ className: cn("animate-pulse rounded-md bg-muted", className),
461
+ ...props
462
+ }
463
+ );
464
+ }
465
+
466
+ // src/ui/sidebar.tsx
467
+ import * as React from "react";
468
+ import { cva as cva2 } from "class-variance-authority";
469
+ import { PanelLeftIcon } from "lucide-react";
470
+
471
+ // src/hooks/use-mobile.ts
472
+ import { useEffect, useState } from "react";
473
+ var MOBILE_MEDIA_QUERY = "(max-width: 767px)";
474
+ function useIsMobile() {
475
+ const [isMobile, setIsMobile] = useState(
476
+ () => typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia(MOBILE_MEDIA_QUERY).matches
477
+ );
478
+ useEffect(() => {
479
+ if (typeof window.matchMedia !== "function") {
480
+ return;
481
+ }
482
+ const media = window.matchMedia(MOBILE_MEDIA_QUERY);
483
+ const onChange = (event) => {
484
+ setIsMobile(event.matches);
485
+ };
486
+ setIsMobile(media.matches);
487
+ media.addEventListener("change", onChange);
488
+ return () => media.removeEventListener("change", onChange);
489
+ }, []);
490
+ return isMobile;
491
+ }
492
+
493
+ // src/ui/sidebar.tsx
494
+ import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
495
+ var SIDEBAR_COOKIE_NAME = "sidebar_state";
496
+ var SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
497
+ var SIDEBAR_WIDTH = "16rem";
498
+ var SIDEBAR_WIDTH_MOBILE = "18rem";
499
+ var SIDEBAR_WIDTH_ICON = "3rem";
500
+ var SIDEBAR_KEYBOARD_SHORTCUT = "b";
501
+ var SidebarContext = React.createContext(null);
502
+ function useSidebar() {
503
+ const context = React.useContext(SidebarContext);
504
+ if (!context) {
505
+ throw new Error("useSidebar must be used within a SidebarProvider.");
506
+ }
507
+ return context;
508
+ }
509
+ function SidebarProvider({
510
+ defaultOpen = true,
511
+ open: openProp,
512
+ onOpenChange: setOpenProp,
513
+ className,
514
+ style,
515
+ children,
516
+ ...props
517
+ }) {
518
+ const isMobile = useIsMobile();
519
+ const [openMobile, setOpenMobile] = React.useState(false);
520
+ const [_open, _setOpen] = React.useState(defaultOpen);
521
+ const open = openProp ?? _open;
522
+ const setOpen = React.useCallback(
523
+ (value) => {
524
+ const openState = typeof value === "function" ? value(open) : value;
525
+ if (setOpenProp) {
526
+ setOpenProp(openState);
527
+ } else {
528
+ _setOpen(openState);
529
+ }
530
+ document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
531
+ },
532
+ [setOpenProp, open]
533
+ );
534
+ const toggleSidebar = React.useCallback(() => {
535
+ return isMobile ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
536
+ }, [isMobile, setOpen, setOpenMobile]);
537
+ React.useEffect(() => {
538
+ const handleKeyDown = (event) => {
539
+ if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
540
+ event.preventDefault();
541
+ toggleSidebar();
542
+ }
543
+ };
544
+ window.addEventListener("keydown", handleKeyDown);
545
+ return () => window.removeEventListener("keydown", handleKeyDown);
546
+ }, [toggleSidebar]);
547
+ const state = open ? "expanded" : "collapsed";
548
+ const contextValue = React.useMemo(
549
+ () => ({
550
+ state,
551
+ open,
552
+ setOpen,
553
+ isMobile,
554
+ openMobile,
555
+ setOpenMobile,
556
+ toggleSidebar
557
+ }),
558
+ [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
559
+ );
560
+ return /* @__PURE__ */ jsx9(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx9(TooltipProvider, { delay: 0, children: /* @__PURE__ */ jsx9(
561
+ "div",
562
+ {
563
+ "data-slot": "sidebar-wrapper",
564
+ style: {
565
+ "--sidebar-width": SIDEBAR_WIDTH,
566
+ "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
567
+ ...style
568
+ },
569
+ className: cn(
570
+ "group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar",
571
+ className
572
+ ),
573
+ ...props,
574
+ children
575
+ }
576
+ ) }) });
577
+ }
578
+ function SidebarRoot({
579
+ side = "left",
580
+ variant = "sidebar",
581
+ collapsible = "offcanvas",
582
+ className,
583
+ children,
584
+ ...props
585
+ }) {
586
+ const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
587
+ if (collapsible === "none") {
588
+ return /* @__PURE__ */ jsx9(
589
+ "div",
590
+ {
591
+ "data-slot": "sidebar",
592
+ className: cn(
593
+ "flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground",
594
+ className
595
+ ),
596
+ ...props,
597
+ children
598
+ }
599
+ );
600
+ }
601
+ if (isMobile) {
602
+ return /* @__PURE__ */ jsx9(Sheet, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: /* @__PURE__ */ jsxs4(
603
+ SheetContent,
604
+ {
605
+ "data-sidebar": "sidebar",
606
+ "data-slot": "sidebar",
607
+ "data-mobile": "true",
608
+ className: "w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden",
609
+ style: {
610
+ "--sidebar-width": SIDEBAR_WIDTH_MOBILE
611
+ },
612
+ side,
613
+ children: [
614
+ /* @__PURE__ */ jsxs4(SheetHeader, { className: "sr-only", children: [
615
+ /* @__PURE__ */ jsx9(SheetTitle, { children: "Sidebar" }),
616
+ /* @__PURE__ */ jsx9(SheetDescription, { children: "Displays the mobile sidebar." })
617
+ ] }),
618
+ /* @__PURE__ */ jsx9("div", { className: "flex h-full w-full flex-col", children })
619
+ ]
620
+ }
621
+ ) });
622
+ }
623
+ return /* @__PURE__ */ jsxs4(
624
+ "div",
625
+ {
626
+ className: "group peer hidden text-sidebar-foreground md:block",
627
+ "data-state": state,
628
+ "data-collapsible": state === "collapsed" ? collapsible : "",
629
+ "data-variant": variant,
630
+ "data-side": side,
631
+ "data-slot": "sidebar",
632
+ children: [
633
+ /* @__PURE__ */ jsx9(
634
+ "div",
635
+ {
636
+ "data-slot": "sidebar-gap",
637
+ className: cn(
638
+ "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
639
+ "group-data-[collapsible=offcanvas]:w-0",
640
+ "group-data-[side=right]:rotate-180",
641
+ variant === "floating" || variant === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
642
+ )
643
+ }
644
+ ),
645
+ /* @__PURE__ */ jsx9(
646
+ "div",
647
+ {
648
+ "data-slot": "sidebar-container",
649
+ className: cn(
650
+ "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
651
+ side === "left" ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]" : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
652
+ variant === "floating" || variant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
653
+ className
654
+ ),
655
+ ...props,
656
+ children: /* @__PURE__ */ jsx9(
657
+ "div",
658
+ {
659
+ "data-sidebar": "sidebar",
660
+ "data-slot": "sidebar-inner",
661
+ className: "flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow-sm",
662
+ children
663
+ }
664
+ )
665
+ }
666
+ )
667
+ ]
668
+ }
669
+ );
670
+ }
671
+ function SidebarTrigger({
672
+ className,
673
+ onClick,
674
+ ...props
675
+ }) {
676
+ const { toggleSidebar } = useSidebar();
677
+ return /* @__PURE__ */ jsxs4(
678
+ Button,
679
+ {
680
+ "data-sidebar": "trigger",
681
+ "data-slot": "sidebar-trigger",
682
+ variant: "ghost",
683
+ size: "icon",
684
+ className: cn("size-7", className),
685
+ onClick: (event) => {
686
+ onClick?.(event);
687
+ toggleSidebar();
688
+ },
689
+ ...props,
690
+ children: [
691
+ /* @__PURE__ */ jsx9(PanelLeftIcon, {}),
692
+ /* @__PURE__ */ jsx9("span", { className: "sr-only", children: "Toggle Sidebar" })
693
+ ]
694
+ }
695
+ );
696
+ }
697
+ function SidebarRail({ className, ...props }) {
698
+ const { toggleSidebar } = useSidebar();
699
+ return /* @__PURE__ */ jsx9(
700
+ "button",
701
+ {
702
+ "data-sidebar": "rail",
703
+ "data-slot": "sidebar-rail",
704
+ "aria-label": "Toggle Sidebar",
705
+ tabIndex: -1,
706
+ onClick: toggleSidebar,
707
+ title: "Toggle Sidebar",
708
+ className: cn(
709
+ "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex",
710
+ "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
711
+ "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
712
+ "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar",
713
+ "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
714
+ "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
715
+ className
716
+ ),
717
+ ...props
718
+ }
719
+ );
720
+ }
721
+ function SidebarInset({ className, ...props }) {
722
+ return /* @__PURE__ */ jsx9(
723
+ "main",
724
+ {
725
+ "data-slot": "sidebar-inset",
726
+ className: cn(
727
+ "relative flex w-full flex-1 flex-col bg-background",
728
+ "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
729
+ className
730
+ ),
731
+ ...props
732
+ }
733
+ );
734
+ }
735
+ function SidebarInput({
736
+ className,
737
+ ...props
738
+ }) {
739
+ return /* @__PURE__ */ jsx9(
740
+ Input,
741
+ {
742
+ "data-slot": "sidebar-input",
743
+ "data-sidebar": "input",
744
+ className: cn("h-8 w-full bg-sidebar shadow-none", className),
745
+ ...props
746
+ }
747
+ );
748
+ }
749
+ function SidebarHeader({ className, ...props }) {
750
+ return /* @__PURE__ */ jsx9(
751
+ "div",
752
+ {
753
+ "data-slot": "sidebar-header",
754
+ "data-sidebar": "header",
755
+ className: cn("flex flex-col gap-2 p-2", className),
756
+ ...props
757
+ }
758
+ );
759
+ }
760
+ function SidebarFooter({ className, ...props }) {
761
+ return /* @__PURE__ */ jsx9(
762
+ "div",
763
+ {
764
+ "data-slot": "sidebar-footer",
765
+ "data-sidebar": "footer",
766
+ className: cn("flex flex-col gap-2 p-2", className),
767
+ ...props
768
+ }
769
+ );
770
+ }
771
+ function SidebarSeparator({
772
+ className,
773
+ ...props
774
+ }) {
775
+ return /* @__PURE__ */ jsx9(
776
+ Separator,
777
+ {
778
+ "data-slot": "sidebar-separator",
779
+ "data-sidebar": "separator",
780
+ className: cn("mx-2 w-auto bg-sidebar-border", className),
781
+ ...props
782
+ }
783
+ );
784
+ }
785
+ function SidebarContent({ className, ...props }) {
786
+ return /* @__PURE__ */ jsx9(
787
+ "div",
788
+ {
789
+ "data-slot": "sidebar-content",
790
+ "data-sidebar": "content",
791
+ className: cn(
792
+ "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
793
+ className
794
+ ),
795
+ ...props
796
+ }
797
+ );
798
+ }
799
+ function SidebarGroup({ className, ...props }) {
800
+ return /* @__PURE__ */ jsx9(
801
+ "div",
802
+ {
803
+ "data-slot": "sidebar-group",
804
+ "data-sidebar": "group",
805
+ className: cn("relative flex w-full min-w-0 flex-col p-2", className),
806
+ ...props
807
+ }
808
+ );
809
+ }
810
+ function renderAsChild(children, dataSlot, className, rest) {
811
+ if (!React.isValidElement(children)) {
812
+ return null;
813
+ }
814
+ return React.cloneElement(children, {
815
+ "data-slot": dataSlot,
816
+ className: cn(
817
+ className,
818
+ children.props.className
819
+ ),
820
+ ...rest
821
+ });
822
+ }
823
+ function SidebarGroupLabel({
824
+ className,
825
+ asChild = false,
826
+ children,
827
+ ...props
828
+ }) {
829
+ const cls = cn(
830
+ "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
831
+ "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
832
+ className
833
+ );
834
+ if (asChild) {
835
+ return renderAsChild(children, "sidebar-group-label", cls, props);
836
+ }
837
+ return /* @__PURE__ */ jsx9(
838
+ "div",
839
+ {
840
+ "data-slot": "sidebar-group-label",
841
+ "data-sidebar": "group-label",
842
+ className: cls,
843
+ ...props,
844
+ children
845
+ }
846
+ );
847
+ }
848
+ function SidebarGroupAction({
849
+ className,
850
+ asChild = false,
851
+ children,
852
+ ...props
853
+ }) {
854
+ const cls = cn(
855
+ "absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
856
+ "after:absolute after:-inset-2 md:after:hidden",
857
+ "group-data-[collapsible=icon]:hidden",
858
+ className
859
+ );
860
+ if (asChild) {
861
+ return renderAsChild(children, "sidebar-group-action", cls, props);
862
+ }
863
+ return /* @__PURE__ */ jsx9(
864
+ "button",
865
+ {
866
+ "data-slot": "sidebar-group-action",
867
+ "data-sidebar": "group-action",
868
+ className: cls,
869
+ ...props,
870
+ children
871
+ }
872
+ );
873
+ }
874
+ function SidebarGroupContent({
875
+ className,
876
+ ...props
877
+ }) {
878
+ return /* @__PURE__ */ jsx9(
879
+ "div",
880
+ {
881
+ "data-slot": "sidebar-group-content",
882
+ "data-sidebar": "group-content",
883
+ className: cn("w-full text-sm", className),
884
+ ...props
885
+ }
886
+ );
887
+ }
888
+ function SidebarMenu({ className, ...props }) {
889
+ return /* @__PURE__ */ jsx9(
890
+ "ul",
891
+ {
892
+ "data-slot": "sidebar-menu",
893
+ "data-sidebar": "menu",
894
+ className: cn("flex w-full min-w-0 flex-col gap-1", className),
895
+ ...props
896
+ }
897
+ );
898
+ }
899
+ function SidebarMenuItem({ className, ...props }) {
900
+ return /* @__PURE__ */ jsx9(
901
+ "li",
902
+ {
903
+ "data-slot": "sidebar-menu-item",
904
+ "data-sidebar": "menu-item",
905
+ className: cn("group/menu-item relative", className),
906
+ ...props
907
+ }
908
+ );
909
+ }
910
+ var sidebarMenuButtonVariants = cva2(
911
+ "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
912
+ {
913
+ variants: {
914
+ variant: {
915
+ default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
916
+ outline: "bg-sidebar shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]"
917
+ },
918
+ size: {
919
+ default: "h-8 text-sm",
920
+ sm: "h-7 text-xs",
921
+ lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!"
922
+ }
923
+ },
924
+ defaultVariants: {
925
+ variant: "default",
926
+ size: "default"
927
+ }
928
+ }
929
+ );
930
+ function SidebarMenuButton({
931
+ asChild = false,
932
+ isActive = false,
933
+ variant = "default",
934
+ size = "default",
935
+ tooltip,
936
+ className,
937
+ children,
938
+ ...props
939
+ }) {
940
+ const { isMobile, state } = useSidebar();
941
+ const cls = cn(sidebarMenuButtonVariants({ variant, size }), className);
942
+ const button = asChild ? renderAsChild(children, "sidebar-menu-button", cls, {
943
+ "data-sidebar": "menu-button",
944
+ "data-size": size,
945
+ "data-active": isActive,
946
+ ...props
947
+ }) : /* @__PURE__ */ jsx9(
948
+ "button",
949
+ {
950
+ "data-slot": "sidebar-menu-button",
951
+ "data-sidebar": "menu-button",
952
+ "data-size": size,
953
+ "data-active": isActive,
954
+ className: cls,
955
+ ...props,
956
+ children
957
+ }
958
+ );
959
+ if (!tooltip) {
960
+ return button;
961
+ }
962
+ if (typeof tooltip === "string") {
963
+ tooltip = {
964
+ children: tooltip
965
+ };
966
+ }
967
+ return /* @__PURE__ */ jsxs4(Tooltip, { children: [
968
+ /* @__PURE__ */ jsx9(TooltipTrigger, { render: button }),
969
+ /* @__PURE__ */ jsx9(
970
+ TooltipContent,
971
+ {
972
+ side: "right",
973
+ align: "center",
974
+ hidden: state !== "collapsed" || isMobile,
975
+ ...tooltip
976
+ }
977
+ )
978
+ ] });
979
+ }
980
+ function SidebarMenuAction({
981
+ className,
982
+ asChild = false,
983
+ showOnHover = false,
984
+ children,
985
+ ...props
986
+ }) {
987
+ const cls = cn(
988
+ "absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform peer-hover/menu-button:text-sidebar-accent-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
989
+ "after:absolute after:-inset-2 md:after:hidden",
990
+ "peer-data-[size=sm]/menu-button:top-1",
991
+ "peer-data-[size=default]/menu-button:top-1.5",
992
+ "peer-data-[size=lg]/menu-button:top-2.5",
993
+ "group-data-[collapsible=icon]:hidden",
994
+ showOnHover && "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground data-[state=open]:opacity-100 md:opacity-0",
995
+ className
996
+ );
997
+ if (asChild) {
998
+ return renderAsChild(children, "sidebar-menu-action", cls, props);
999
+ }
1000
+ return /* @__PURE__ */ jsx9(
1001
+ "button",
1002
+ {
1003
+ "data-slot": "sidebar-menu-action",
1004
+ "data-sidebar": "menu-action",
1005
+ className: cls,
1006
+ ...props,
1007
+ children
1008
+ }
1009
+ );
1010
+ }
1011
+ function SidebarMenuBadge({
1012
+ className,
1013
+ ...props
1014
+ }) {
1015
+ return /* @__PURE__ */ jsx9(
1016
+ "div",
1017
+ {
1018
+ "data-slot": "sidebar-menu-badge",
1019
+ "data-sidebar": "menu-badge",
1020
+ className: cn(
1021
+ "pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none",
1022
+ "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
1023
+ "peer-data-[size=sm]/menu-button:top-1",
1024
+ "peer-data-[size=default]/menu-button:top-1.5",
1025
+ "peer-data-[size=lg]/menu-button:top-2.5",
1026
+ "group-data-[collapsible=icon]:hidden",
1027
+ className
1028
+ ),
1029
+ ...props
1030
+ }
1031
+ );
1032
+ }
1033
+ function SidebarMenuSkeleton({
1034
+ className,
1035
+ showIcon = false,
1036
+ ...props
1037
+ }) {
1038
+ const width = React.useMemo(() => {
1039
+ return `${Math.floor(Math.random() * 40) + 50}%`;
1040
+ }, []);
1041
+ return /* @__PURE__ */ jsxs4(
1042
+ "div",
1043
+ {
1044
+ "data-slot": "sidebar-menu-skeleton",
1045
+ "data-sidebar": "menu-skeleton",
1046
+ className: cn("flex h-8 items-center gap-2 rounded-md px-2", className),
1047
+ ...props,
1048
+ children: [
1049
+ showIcon && /* @__PURE__ */ jsx9(
1050
+ Skeleton,
1051
+ {
1052
+ className: "size-4 rounded-md",
1053
+ "data-sidebar": "menu-skeleton-icon"
1054
+ }
1055
+ ),
1056
+ /* @__PURE__ */ jsx9(
1057
+ Skeleton,
1058
+ {
1059
+ className: "h-4 max-w-(--skeleton-width) flex-1",
1060
+ "data-sidebar": "menu-skeleton-text",
1061
+ style: {
1062
+ "--skeleton-width": width
1063
+ }
1064
+ }
1065
+ )
1066
+ ]
1067
+ }
1068
+ );
1069
+ }
1070
+ function SidebarMenuSub({ className, ...props }) {
1071
+ return /* @__PURE__ */ jsx9(
1072
+ "ul",
1073
+ {
1074
+ "data-slot": "sidebar-menu-sub",
1075
+ "data-sidebar": "menu-sub",
1076
+ className: cn(
1077
+ "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",
1078
+ "group-data-[collapsible=icon]:hidden",
1079
+ className
1080
+ ),
1081
+ ...props
1082
+ }
1083
+ );
1084
+ }
1085
+ function SidebarMenuSubItem({
1086
+ className,
1087
+ ...props
1088
+ }) {
1089
+ return /* @__PURE__ */ jsx9(
1090
+ "li",
1091
+ {
1092
+ "data-slot": "sidebar-menu-sub-item",
1093
+ "data-sidebar": "menu-sub-item",
1094
+ className: cn("group/menu-sub-item relative", className),
1095
+ ...props
1096
+ }
1097
+ );
1098
+ }
1099
+ function SidebarMenuSubButton({
1100
+ asChild = false,
1101
+ size = "md",
1102
+ isActive = false,
1103
+ className,
1104
+ children,
1105
+ ...props
1106
+ }) {
1107
+ const cls = cn(
1108
+ "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
1109
+ "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
1110
+ size === "sm" && "text-xs",
1111
+ size === "md" && "text-sm",
1112
+ "group-data-[collapsible=icon]:hidden",
1113
+ className
1114
+ );
1115
+ if (asChild) {
1116
+ return renderAsChild(children, "sidebar-menu-sub-button", cls, {
1117
+ "data-sidebar": "menu-sub-button",
1118
+ "data-size": size,
1119
+ "data-active": isActive,
1120
+ ...props
1121
+ });
1122
+ }
1123
+ return (
1124
+ // eslint-disable-next-line jsx-a11y/anchor-has-content
1125
+ /* @__PURE__ */ jsx9(
1126
+ "a",
1127
+ {
1128
+ "data-slot": "sidebar-menu-sub-button",
1129
+ "data-sidebar": "menu-sub-button",
1130
+ "data-size": size,
1131
+ "data-active": isActive,
1132
+ className: cls,
1133
+ ...props,
1134
+ children
1135
+ }
1136
+ )
1137
+ );
1138
+ }
1139
+
1140
+ export {
1141
+ Accordion,
1142
+ AccordionItem,
1143
+ AccordionTrigger,
1144
+ AccordionContent,
1145
+ Card,
1146
+ CardHeader,
1147
+ CardTitle,
1148
+ CardDescription,
1149
+ CardAction,
1150
+ CardContent,
1151
+ CardFooter,
1152
+ Popover,
1153
+ PopoverTrigger,
1154
+ PopoverContent,
1155
+ Input,
1156
+ TooltipProvider,
1157
+ Tooltip,
1158
+ TooltipTrigger,
1159
+ TooltipContent,
1160
+ useIsMobile,
1161
+ Separator,
1162
+ Sheet,
1163
+ SheetTrigger,
1164
+ SheetClose,
1165
+ SheetPortal,
1166
+ SheetOverlay,
1167
+ SheetContent,
1168
+ SheetHeader,
1169
+ SheetFooter,
1170
+ SheetTitle,
1171
+ SheetDescription,
1172
+ Skeleton,
1173
+ useSidebar,
1174
+ SidebarProvider,
1175
+ SidebarRoot,
1176
+ SidebarTrigger,
1177
+ SidebarRail,
1178
+ SidebarInset,
1179
+ SidebarInput,
1180
+ SidebarHeader,
1181
+ SidebarFooter,
1182
+ SidebarSeparator,
1183
+ SidebarContent,
1184
+ SidebarGroup,
1185
+ SidebarGroupLabel,
1186
+ SidebarGroupAction,
1187
+ SidebarGroupContent,
1188
+ SidebarMenu,
1189
+ SidebarMenuItem,
1190
+ SidebarMenuButton,
1191
+ SidebarMenuAction,
1192
+ SidebarMenuBadge,
1193
+ SidebarMenuSkeleton,
1194
+ SidebarMenuSub,
1195
+ SidebarMenuSubItem,
1196
+ SidebarMenuSubButton
1197
+ };