@pactor-app/ui 1.2.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.
- package/README.md +2 -0
- package/dist/{chunk-L45CSL6I.js → chunk-7KC6DMKH.js} +3 -3
- package/dist/{chunk-HJPHJKVA.js → chunk-EVGIS2ZE.js} +170 -227
- package/dist/{chunk-F3H23KYG.js → chunk-F42SGQNW.js} +31 -93
- package/dist/chunk-L4Z7MNYY.js +1197 -0
- package/dist/{chunk-LMEJ242M.js → chunk-P54Y23AP.js} +36 -32
- package/dist/{chunk-22TEN3ER.js → chunk-TDVG7MZ5.js} +13 -13
- package/dist/{chunk-Q5NUGUJG.js → chunk-UKA7C3JP.js} +204 -413
- package/dist/chunk-WKJUCGV4.js +78 -0
- package/dist/components/index.cjs +1012 -691
- package/dist/components/index.d.cts +30 -12
- package/dist/components/index.d.ts +30 -12
- package/dist/components/index.js +8 -6
- package/dist/index.cjs +1261 -940
- package/dist/index.d.cts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +10 -8
- package/dist/interaction/index.cjs +10 -6
- package/dist/interaction/index.js +3 -3
- package/dist/layout/index.cjs +695 -265
- package/dist/layout/index.d.cts +1 -1
- package/dist/layout/index.d.ts +1 -1
- package/dist/layout/index.js +4 -4
- package/dist/ui/index.cjs +1688 -533
- package/dist/ui/index.d.cts +130 -16
- package/dist/ui/index.d.ts +130 -16
- package/dist/ui/index.js +481 -22
- package/package.json +6 -5
- package/styles.css +936 -107
- package/dist/chunk-2LYMCWEJ.js +0 -289
- package/dist/chunk-RQHJBTEU.js +0 -10
|
@@ -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
|
+
};
|