@prediktif/ui 0.1.5 → 0.1.7
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 +60 -1
- package/dist/index.d.ts +60 -1
- package/dist/index.js +772 -2
- package/dist/index.mjs +747 -1
- package/package.json +2 -2
package/dist/index.mjs
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
"use client";
|
|
1
2
|
var __defProp = Object.defineProperty;
|
|
2
3
|
var __defProps = Object.defineProperties;
|
|
3
4
|
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
@@ -147,26 +148,195 @@ var buttonVariants = cva(
|
|
|
147
148
|
}
|
|
148
149
|
}
|
|
149
150
|
);
|
|
151
|
+
function Button(_a) {
|
|
152
|
+
var _b = _a, {
|
|
153
|
+
className,
|
|
154
|
+
variant = "default",
|
|
155
|
+
size = "default"
|
|
156
|
+
} = _b, props = __objRest(_b, [
|
|
157
|
+
"className",
|
|
158
|
+
"variant",
|
|
159
|
+
"size"
|
|
160
|
+
]);
|
|
161
|
+
return /* @__PURE__ */ jsx3(
|
|
162
|
+
ButtonPrimitive,
|
|
163
|
+
__spreadValues({
|
|
164
|
+
"data-slot": "button",
|
|
165
|
+
className: cn2(buttonVariants({ variant, size, className }))
|
|
166
|
+
}, props)
|
|
167
|
+
);
|
|
168
|
+
}
|
|
150
169
|
|
|
151
170
|
// src/components/ui/input.tsx
|
|
152
171
|
import { Input as InputPrimitive } from "@base-ui/react/input";
|
|
153
172
|
import { cn as cn3 } from "cn";
|
|
154
173
|
import { jsx as jsx4 } from "react/jsx-runtime";
|
|
174
|
+
function Input(_a) {
|
|
175
|
+
var _b = _a, { className, type } = _b, props = __objRest(_b, ["className", "type"]);
|
|
176
|
+
return /* @__PURE__ */ jsx4(
|
|
177
|
+
InputPrimitive,
|
|
178
|
+
__spreadValues({
|
|
179
|
+
type,
|
|
180
|
+
"data-slot": "input",
|
|
181
|
+
className: cn3(
|
|
182
|
+
"h-7 w-full min-w-0 rounded-md border border-input bg-input/20 px-2 py-0.5 text-sm transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-xs/relaxed file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 md:text-xs/relaxed dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
|
|
183
|
+
className
|
|
184
|
+
)
|
|
185
|
+
}, props)
|
|
186
|
+
);
|
|
187
|
+
}
|
|
155
188
|
|
|
156
189
|
// src/components/ui/separator.tsx
|
|
157
190
|
import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";
|
|
158
191
|
import { cn as cn4 } from "cn";
|
|
159
192
|
import { jsx as jsx5 } from "react/jsx-runtime";
|
|
193
|
+
function Separator(_a) {
|
|
194
|
+
var _b = _a, {
|
|
195
|
+
className,
|
|
196
|
+
orientation = "horizontal"
|
|
197
|
+
} = _b, props = __objRest(_b, [
|
|
198
|
+
"className",
|
|
199
|
+
"orientation"
|
|
200
|
+
]);
|
|
201
|
+
return /* @__PURE__ */ jsx5(
|
|
202
|
+
SeparatorPrimitive,
|
|
203
|
+
__spreadValues({
|
|
204
|
+
"data-slot": "separator",
|
|
205
|
+
orientation,
|
|
206
|
+
className: cn4(
|
|
207
|
+
"shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
|
|
208
|
+
className
|
|
209
|
+
)
|
|
210
|
+
}, props)
|
|
211
|
+
);
|
|
212
|
+
}
|
|
160
213
|
|
|
161
214
|
// src/components/ui/sheet.tsx
|
|
162
215
|
import { Dialog as SheetPrimitive } from "@base-ui/react/dialog";
|
|
163
216
|
import { cn as cn5 } from "cn";
|
|
164
217
|
import { XIcon } from "lucide-react";
|
|
165
218
|
import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
219
|
+
function Sheet(_a) {
|
|
220
|
+
var props = __objRest(_a, []);
|
|
221
|
+
return /* @__PURE__ */ jsx6(SheetPrimitive.Root, __spreadValues({ "data-slot": "sheet" }, props));
|
|
222
|
+
}
|
|
223
|
+
function SheetPortal(_a) {
|
|
224
|
+
var props = __objRest(_a, []);
|
|
225
|
+
return /* @__PURE__ */ jsx6(SheetPrimitive.Portal, __spreadValues({ "data-slot": "sheet-portal" }, props));
|
|
226
|
+
}
|
|
227
|
+
function SheetOverlay(_a) {
|
|
228
|
+
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
|
|
229
|
+
return /* @__PURE__ */ jsx6(
|
|
230
|
+
SheetPrimitive.Backdrop,
|
|
231
|
+
__spreadValues({
|
|
232
|
+
"data-slot": "sheet-overlay",
|
|
233
|
+
className: cn5(
|
|
234
|
+
"fixed inset-0 z-50 bg-black/80 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs",
|
|
235
|
+
className
|
|
236
|
+
)
|
|
237
|
+
}, props)
|
|
238
|
+
);
|
|
239
|
+
}
|
|
240
|
+
function SheetContent(_a) {
|
|
241
|
+
var _b = _a, {
|
|
242
|
+
className,
|
|
243
|
+
children,
|
|
244
|
+
side = "right",
|
|
245
|
+
showCloseButton = true
|
|
246
|
+
} = _b, props = __objRest(_b, [
|
|
247
|
+
"className",
|
|
248
|
+
"children",
|
|
249
|
+
"side",
|
|
250
|
+
"showCloseButton"
|
|
251
|
+
]);
|
|
252
|
+
return /* @__PURE__ */ jsxs2(SheetPortal, { children: [
|
|
253
|
+
/* @__PURE__ */ jsx6(SheetOverlay, {}),
|
|
254
|
+
/* @__PURE__ */ jsxs2(
|
|
255
|
+
SheetPrimitive.Popup,
|
|
256
|
+
__spreadProps(__spreadValues({
|
|
257
|
+
"data-slot": "sheet-content",
|
|
258
|
+
"data-side": side,
|
|
259
|
+
className: cn5(
|
|
260
|
+
"fixed z-50 flex flex-col bg-popover bg-clip-padding text-xs/relaxed text-popover-foreground shadow-lg transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm",
|
|
261
|
+
className
|
|
262
|
+
)
|
|
263
|
+
}, props), {
|
|
264
|
+
children: [
|
|
265
|
+
children,
|
|
266
|
+
showCloseButton && /* @__PURE__ */ jsxs2(
|
|
267
|
+
SheetPrimitive.Close,
|
|
268
|
+
{
|
|
269
|
+
"data-slot": "sheet-close",
|
|
270
|
+
render: /* @__PURE__ */ jsx6(
|
|
271
|
+
Button,
|
|
272
|
+
{
|
|
273
|
+
variant: "ghost",
|
|
274
|
+
className: "absolute top-4 right-4",
|
|
275
|
+
size: "icon-sm"
|
|
276
|
+
}
|
|
277
|
+
),
|
|
278
|
+
children: [
|
|
279
|
+
/* @__PURE__ */ jsx6(XIcon, {}),
|
|
280
|
+
/* @__PURE__ */ jsx6("span", { className: "sr-only", children: "Close" })
|
|
281
|
+
]
|
|
282
|
+
}
|
|
283
|
+
)
|
|
284
|
+
]
|
|
285
|
+
})
|
|
286
|
+
)
|
|
287
|
+
] });
|
|
288
|
+
}
|
|
289
|
+
function SheetHeader(_a) {
|
|
290
|
+
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
|
|
291
|
+
return /* @__PURE__ */ jsx6(
|
|
292
|
+
"div",
|
|
293
|
+
__spreadValues({
|
|
294
|
+
"data-slot": "sheet-header",
|
|
295
|
+
className: cn5("flex flex-col gap-1.5 p-6", className)
|
|
296
|
+
}, props)
|
|
297
|
+
);
|
|
298
|
+
}
|
|
299
|
+
function SheetTitle(_a) {
|
|
300
|
+
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
|
|
301
|
+
return /* @__PURE__ */ jsx6(
|
|
302
|
+
SheetPrimitive.Title,
|
|
303
|
+
__spreadValues({
|
|
304
|
+
"data-slot": "sheet-title",
|
|
305
|
+
className: cn5(
|
|
306
|
+
"font-heading text-sm font-medium text-foreground",
|
|
307
|
+
className
|
|
308
|
+
)
|
|
309
|
+
}, props)
|
|
310
|
+
);
|
|
311
|
+
}
|
|
312
|
+
function SheetDescription(_a) {
|
|
313
|
+
var _b = _a, {
|
|
314
|
+
className
|
|
315
|
+
} = _b, props = __objRest(_b, [
|
|
316
|
+
"className"
|
|
317
|
+
]);
|
|
318
|
+
return /* @__PURE__ */ jsx6(
|
|
319
|
+
SheetPrimitive.Description,
|
|
320
|
+
__spreadValues({
|
|
321
|
+
"data-slot": "sheet-description",
|
|
322
|
+
className: cn5("text-xs/relaxed text-muted-foreground", className)
|
|
323
|
+
}, props)
|
|
324
|
+
);
|
|
325
|
+
}
|
|
166
326
|
|
|
167
327
|
// src/components/ui/skeleton.tsx
|
|
168
328
|
import { cn as cn6 } from "cn";
|
|
169
329
|
import { jsx as jsx7 } from "react/jsx-runtime";
|
|
330
|
+
function Skeleton(_a) {
|
|
331
|
+
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
|
|
332
|
+
return /* @__PURE__ */ jsx7(
|
|
333
|
+
"div",
|
|
334
|
+
__spreadValues({
|
|
335
|
+
"data-slot": "skeleton",
|
|
336
|
+
className: cn6("animate-pulse rounded-md bg-muted", className)
|
|
337
|
+
}, props)
|
|
338
|
+
);
|
|
339
|
+
}
|
|
170
340
|
|
|
171
341
|
// src/components/ui/tooltip.tsx
|
|
172
342
|
import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
|
|
@@ -225,10 +395,31 @@ function TooltipContent(_a) {
|
|
|
225
395
|
|
|
226
396
|
// src/hooks/use-mobile.ts
|
|
227
397
|
import * as React from "react";
|
|
398
|
+
var MOBILE_BREAKPOINT = 768;
|
|
399
|
+
function useIsMobile() {
|
|
400
|
+
const [isMobile, setIsMobile] = React.useState(
|
|
401
|
+
void 0
|
|
402
|
+
);
|
|
403
|
+
React.useEffect(() => {
|
|
404
|
+
const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
|
|
405
|
+
const onChange = () => {
|
|
406
|
+
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
|
|
407
|
+
};
|
|
408
|
+
mql.addEventListener("change", onChange);
|
|
409
|
+
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
|
|
410
|
+
return () => mql.removeEventListener("change", onChange);
|
|
411
|
+
}, []);
|
|
412
|
+
return !!isMobile;
|
|
413
|
+
}
|
|
228
414
|
|
|
229
415
|
// src/components/ui/sidebar.tsx
|
|
230
416
|
import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
417
|
+
var SIDEBAR_COOKIE_NAME = "sidebar_state";
|
|
231
418
|
var SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
|
|
419
|
+
var SIDEBAR_WIDTH = "16rem";
|
|
420
|
+
var SIDEBAR_WIDTH_MOBILE = "18rem";
|
|
421
|
+
var SIDEBAR_WIDTH_ICON = "3rem";
|
|
422
|
+
var SIDEBAR_KEYBOARD_SHORTCUT = "b";
|
|
232
423
|
var SidebarContext = React2.createContext(null);
|
|
233
424
|
function useSidebar() {
|
|
234
425
|
const context = React2.useContext(SidebarContext);
|
|
@@ -237,6 +428,279 @@ function useSidebar() {
|
|
|
237
428
|
}
|
|
238
429
|
return context;
|
|
239
430
|
}
|
|
431
|
+
function SidebarProvider(_a) {
|
|
432
|
+
var _b = _a, {
|
|
433
|
+
defaultOpen = true,
|
|
434
|
+
open: openProp,
|
|
435
|
+
onOpenChange: setOpenProp,
|
|
436
|
+
className,
|
|
437
|
+
style,
|
|
438
|
+
children
|
|
439
|
+
} = _b, props = __objRest(_b, [
|
|
440
|
+
"defaultOpen",
|
|
441
|
+
"open",
|
|
442
|
+
"onOpenChange",
|
|
443
|
+
"className",
|
|
444
|
+
"style",
|
|
445
|
+
"children"
|
|
446
|
+
]);
|
|
447
|
+
const isMobile = useIsMobile();
|
|
448
|
+
const [openMobile, setOpenMobile] = React2.useState(false);
|
|
449
|
+
const [_open, _setOpen] = React2.useState(defaultOpen);
|
|
450
|
+
const open = openProp != null ? openProp : _open;
|
|
451
|
+
const setOpen = React2.useCallback(
|
|
452
|
+
(value) => {
|
|
453
|
+
const openState = typeof value === "function" ? value(open) : value;
|
|
454
|
+
if (setOpenProp) {
|
|
455
|
+
setOpenProp(openState);
|
|
456
|
+
} else {
|
|
457
|
+
_setOpen(openState);
|
|
458
|
+
}
|
|
459
|
+
document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
|
|
460
|
+
},
|
|
461
|
+
[setOpenProp, open]
|
|
462
|
+
);
|
|
463
|
+
const toggleSidebar = React2.useCallback(() => {
|
|
464
|
+
return isMobile ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
|
|
465
|
+
}, [isMobile, setOpen]);
|
|
466
|
+
React2.useEffect(() => {
|
|
467
|
+
const handleKeyDown = (event) => {
|
|
468
|
+
if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
|
|
469
|
+
event.preventDefault();
|
|
470
|
+
toggleSidebar();
|
|
471
|
+
}
|
|
472
|
+
};
|
|
473
|
+
window.addEventListener("keydown", handleKeyDown);
|
|
474
|
+
return () => window.removeEventListener("keydown", handleKeyDown);
|
|
475
|
+
}, [toggleSidebar]);
|
|
476
|
+
const state = open ? "expanded" : "collapsed";
|
|
477
|
+
const contextValue = React2.useMemo(
|
|
478
|
+
() => ({
|
|
479
|
+
state,
|
|
480
|
+
open,
|
|
481
|
+
setOpen,
|
|
482
|
+
isMobile,
|
|
483
|
+
openMobile,
|
|
484
|
+
setOpenMobile,
|
|
485
|
+
toggleSidebar
|
|
486
|
+
}),
|
|
487
|
+
[state, open, setOpen, isMobile, openMobile, toggleSidebar]
|
|
488
|
+
);
|
|
489
|
+
return /* @__PURE__ */ jsx9(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx9(
|
|
490
|
+
"div",
|
|
491
|
+
__spreadProps(__spreadValues({
|
|
492
|
+
"data-slot": "sidebar-wrapper",
|
|
493
|
+
style: __spreadValues({
|
|
494
|
+
"--sidebar-width": SIDEBAR_WIDTH,
|
|
495
|
+
"--sidebar-width-icon": SIDEBAR_WIDTH_ICON
|
|
496
|
+
}, style),
|
|
497
|
+
className: cn8(
|
|
498
|
+
"group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar",
|
|
499
|
+
className
|
|
500
|
+
)
|
|
501
|
+
}, props), {
|
|
502
|
+
children
|
|
503
|
+
})
|
|
504
|
+
) });
|
|
505
|
+
}
|
|
506
|
+
function Sidebar(_a) {
|
|
507
|
+
var _b = _a, {
|
|
508
|
+
side = "left",
|
|
509
|
+
variant = "sidebar",
|
|
510
|
+
collapsible = "offcanvas",
|
|
511
|
+
className,
|
|
512
|
+
children,
|
|
513
|
+
dir
|
|
514
|
+
} = _b, props = __objRest(_b, [
|
|
515
|
+
"side",
|
|
516
|
+
"variant",
|
|
517
|
+
"collapsible",
|
|
518
|
+
"className",
|
|
519
|
+
"children",
|
|
520
|
+
"dir"
|
|
521
|
+
]);
|
|
522
|
+
const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
|
|
523
|
+
if (collapsible === "none") {
|
|
524
|
+
return /* @__PURE__ */ jsx9(
|
|
525
|
+
"div",
|
|
526
|
+
__spreadProps(__spreadValues({
|
|
527
|
+
"data-slot": "sidebar",
|
|
528
|
+
className: cn8(
|
|
529
|
+
"flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground",
|
|
530
|
+
className
|
|
531
|
+
)
|
|
532
|
+
}, props), {
|
|
533
|
+
children
|
|
534
|
+
})
|
|
535
|
+
);
|
|
536
|
+
}
|
|
537
|
+
if (isMobile) {
|
|
538
|
+
return /* @__PURE__ */ jsx9(Sheet, __spreadProps(__spreadValues({ open: openMobile, onOpenChange: setOpenMobile }, props), { children: /* @__PURE__ */ jsxs4(
|
|
539
|
+
SheetContent,
|
|
540
|
+
{
|
|
541
|
+
dir,
|
|
542
|
+
"data-sidebar": "sidebar",
|
|
543
|
+
"data-slot": "sidebar",
|
|
544
|
+
"data-mobile": "true",
|
|
545
|
+
className: "w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden",
|
|
546
|
+
style: {
|
|
547
|
+
"--sidebar-width": SIDEBAR_WIDTH_MOBILE
|
|
548
|
+
},
|
|
549
|
+
side,
|
|
550
|
+
children: [
|
|
551
|
+
/* @__PURE__ */ jsxs4(SheetHeader, { className: "sr-only", children: [
|
|
552
|
+
/* @__PURE__ */ jsx9(SheetTitle, { children: "Sidebar" }),
|
|
553
|
+
/* @__PURE__ */ jsx9(SheetDescription, { children: "Displays the mobile sidebar." })
|
|
554
|
+
] }),
|
|
555
|
+
/* @__PURE__ */ jsx9("div", { className: "flex h-full w-full flex-col", children })
|
|
556
|
+
]
|
|
557
|
+
}
|
|
558
|
+
) }));
|
|
559
|
+
}
|
|
560
|
+
return /* @__PURE__ */ jsxs4(
|
|
561
|
+
"div",
|
|
562
|
+
{
|
|
563
|
+
className: "group peer hidden text-sidebar-foreground md:block",
|
|
564
|
+
"data-state": state,
|
|
565
|
+
"data-collapsible": state === "collapsed" ? collapsible : "",
|
|
566
|
+
"data-variant": variant,
|
|
567
|
+
"data-side": side,
|
|
568
|
+
"data-slot": "sidebar",
|
|
569
|
+
children: [
|
|
570
|
+
/* @__PURE__ */ jsx9(
|
|
571
|
+
"div",
|
|
572
|
+
{
|
|
573
|
+
"data-slot": "sidebar-gap",
|
|
574
|
+
className: cn8(
|
|
575
|
+
"relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
|
|
576
|
+
"group-data-[collapsible=offcanvas]:w-0",
|
|
577
|
+
"group-data-[side=right]:rotate-180",
|
|
578
|
+
variant === "floating" || variant === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
|
|
579
|
+
)
|
|
580
|
+
}
|
|
581
|
+
),
|
|
582
|
+
/* @__PURE__ */ jsx9(
|
|
583
|
+
"div",
|
|
584
|
+
__spreadProps(__spreadValues({
|
|
585
|
+
"data-slot": "sidebar-container",
|
|
586
|
+
"data-side": side,
|
|
587
|
+
className: cn8(
|
|
588
|
+
"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex",
|
|
589
|
+
// Adjust the padding for floating and inset variants.
|
|
590
|
+
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",
|
|
591
|
+
className
|
|
592
|
+
)
|
|
593
|
+
}, props), {
|
|
594
|
+
children: /* @__PURE__ */ jsx9(
|
|
595
|
+
"div",
|
|
596
|
+
{
|
|
597
|
+
"data-sidebar": "sidebar",
|
|
598
|
+
"data-slot": "sidebar-inner",
|
|
599
|
+
className: "flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border",
|
|
600
|
+
children
|
|
601
|
+
}
|
|
602
|
+
)
|
|
603
|
+
})
|
|
604
|
+
)
|
|
605
|
+
]
|
|
606
|
+
}
|
|
607
|
+
);
|
|
608
|
+
}
|
|
609
|
+
function SidebarTrigger(_a) {
|
|
610
|
+
var _b = _a, {
|
|
611
|
+
className,
|
|
612
|
+
onClick
|
|
613
|
+
} = _b, props = __objRest(_b, [
|
|
614
|
+
"className",
|
|
615
|
+
"onClick"
|
|
616
|
+
]);
|
|
617
|
+
const { toggleSidebar } = useSidebar();
|
|
618
|
+
return /* @__PURE__ */ jsxs4(
|
|
619
|
+
Button,
|
|
620
|
+
__spreadProps(__spreadValues({
|
|
621
|
+
"data-sidebar": "trigger",
|
|
622
|
+
"data-slot": "sidebar-trigger",
|
|
623
|
+
variant: "ghost",
|
|
624
|
+
size: "icon-sm",
|
|
625
|
+
className: cn8(className),
|
|
626
|
+
onClick: (event) => {
|
|
627
|
+
onClick == null ? void 0 : onClick(event);
|
|
628
|
+
toggleSidebar();
|
|
629
|
+
}
|
|
630
|
+
}, props), {
|
|
631
|
+
children: [
|
|
632
|
+
/* @__PURE__ */ jsx9(PanelLeftIcon, {}),
|
|
633
|
+
/* @__PURE__ */ jsx9("span", { className: "sr-only", children: "Toggle Sidebar" })
|
|
634
|
+
]
|
|
635
|
+
})
|
|
636
|
+
);
|
|
637
|
+
}
|
|
638
|
+
function SidebarRail(_a) {
|
|
639
|
+
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
|
|
640
|
+
const { toggleSidebar } = useSidebar();
|
|
641
|
+
return /* @__PURE__ */ jsx9(
|
|
642
|
+
"button",
|
|
643
|
+
__spreadValues({
|
|
644
|
+
"data-sidebar": "rail",
|
|
645
|
+
"data-slot": "sidebar-rail",
|
|
646
|
+
"aria-label": "Toggle Sidebar",
|
|
647
|
+
tabIndex: -1,
|
|
648
|
+
onClick: toggleSidebar,
|
|
649
|
+
title: "Toggle Sidebar",
|
|
650
|
+
className: cn8(
|
|
651
|
+
"absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2",
|
|
652
|
+
"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
|
|
653
|
+
"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
|
|
654
|
+
"group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar",
|
|
655
|
+
"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
|
|
656
|
+
"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
|
|
657
|
+
className
|
|
658
|
+
)
|
|
659
|
+
}, props)
|
|
660
|
+
);
|
|
661
|
+
}
|
|
662
|
+
function SidebarInset(_a) {
|
|
663
|
+
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
|
|
664
|
+
return /* @__PURE__ */ jsx9(
|
|
665
|
+
"main",
|
|
666
|
+
__spreadValues({
|
|
667
|
+
"data-slot": "sidebar-inset",
|
|
668
|
+
className: cn8(
|
|
669
|
+
"relative flex w-full flex-1 flex-col bg-background 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",
|
|
670
|
+
className
|
|
671
|
+
)
|
|
672
|
+
}, props)
|
|
673
|
+
);
|
|
674
|
+
}
|
|
675
|
+
function SidebarInput(_a) {
|
|
676
|
+
var _b = _a, {
|
|
677
|
+
className
|
|
678
|
+
} = _b, props = __objRest(_b, [
|
|
679
|
+
"className"
|
|
680
|
+
]);
|
|
681
|
+
return /* @__PURE__ */ jsx9(
|
|
682
|
+
Input,
|
|
683
|
+
__spreadValues({
|
|
684
|
+
"data-slot": "sidebar-input",
|
|
685
|
+
"data-sidebar": "input",
|
|
686
|
+
className: cn8(
|
|
687
|
+
"h-8 w-full border-input bg-muted/20 dark:bg-muted/30",
|
|
688
|
+
className
|
|
689
|
+
)
|
|
690
|
+
}, props)
|
|
691
|
+
);
|
|
692
|
+
}
|
|
693
|
+
function SidebarHeader(_a) {
|
|
694
|
+
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
|
|
695
|
+
return /* @__PURE__ */ jsx9(
|
|
696
|
+
"div",
|
|
697
|
+
__spreadValues({
|
|
698
|
+
"data-slot": "sidebar-header",
|
|
699
|
+
"data-sidebar": "header",
|
|
700
|
+
className: cn8("flex flex-col gap-2 p-2", className)
|
|
701
|
+
}, props)
|
|
702
|
+
);
|
|
703
|
+
}
|
|
240
704
|
function SidebarFooter(_a) {
|
|
241
705
|
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
|
|
242
706
|
return /* @__PURE__ */ jsx9(
|
|
@@ -248,6 +712,116 @@ function SidebarFooter(_a) {
|
|
|
248
712
|
}, props)
|
|
249
713
|
);
|
|
250
714
|
}
|
|
715
|
+
function SidebarSeparator(_a) {
|
|
716
|
+
var _b = _a, {
|
|
717
|
+
className
|
|
718
|
+
} = _b, props = __objRest(_b, [
|
|
719
|
+
"className"
|
|
720
|
+
]);
|
|
721
|
+
return /* @__PURE__ */ jsx9(
|
|
722
|
+
Separator,
|
|
723
|
+
__spreadValues({
|
|
724
|
+
"data-slot": "sidebar-separator",
|
|
725
|
+
"data-sidebar": "separator",
|
|
726
|
+
className: cn8("mx-2 w-auto bg-sidebar-border", className)
|
|
727
|
+
}, props)
|
|
728
|
+
);
|
|
729
|
+
}
|
|
730
|
+
function SidebarContent(_a) {
|
|
731
|
+
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
|
|
732
|
+
return /* @__PURE__ */ jsx9(
|
|
733
|
+
"div",
|
|
734
|
+
__spreadValues({
|
|
735
|
+
"data-slot": "sidebar-content",
|
|
736
|
+
"data-sidebar": "content",
|
|
737
|
+
className: cn8(
|
|
738
|
+
"no-scrollbar flex min-h-0 flex-1 flex-col gap-0 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
|
|
739
|
+
className
|
|
740
|
+
)
|
|
741
|
+
}, props)
|
|
742
|
+
);
|
|
743
|
+
}
|
|
744
|
+
function SidebarGroup(_a) {
|
|
745
|
+
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
|
|
746
|
+
return /* @__PURE__ */ jsx9(
|
|
747
|
+
"div",
|
|
748
|
+
__spreadValues({
|
|
749
|
+
"data-slot": "sidebar-group",
|
|
750
|
+
"data-sidebar": "group",
|
|
751
|
+
className: cn8(
|
|
752
|
+
"relative flex w-full min-w-0 flex-col px-2 py-1",
|
|
753
|
+
className
|
|
754
|
+
)
|
|
755
|
+
}, props)
|
|
756
|
+
);
|
|
757
|
+
}
|
|
758
|
+
function SidebarGroupLabel(_a) {
|
|
759
|
+
var _b = _a, {
|
|
760
|
+
className,
|
|
761
|
+
render
|
|
762
|
+
} = _b, props = __objRest(_b, [
|
|
763
|
+
"className",
|
|
764
|
+
"render"
|
|
765
|
+
]);
|
|
766
|
+
return useRender({
|
|
767
|
+
defaultTagName: "div",
|
|
768
|
+
props: mergeProps(
|
|
769
|
+
{
|
|
770
|
+
className: cn8(
|
|
771
|
+
"flex h-8 shrink-0 items-center rounded-md px-2 text-xs text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
|
|
772
|
+
className
|
|
773
|
+
)
|
|
774
|
+
},
|
|
775
|
+
props
|
|
776
|
+
),
|
|
777
|
+
render,
|
|
778
|
+
state: {
|
|
779
|
+
slot: "sidebar-group-label",
|
|
780
|
+
sidebar: "group-label"
|
|
781
|
+
}
|
|
782
|
+
});
|
|
783
|
+
}
|
|
784
|
+
function SidebarGroupAction(_a) {
|
|
785
|
+
var _b = _a, {
|
|
786
|
+
className,
|
|
787
|
+
render
|
|
788
|
+
} = _b, props = __objRest(_b, [
|
|
789
|
+
"className",
|
|
790
|
+
"render"
|
|
791
|
+
]);
|
|
792
|
+
return useRender({
|
|
793
|
+
defaultTagName: "button",
|
|
794
|
+
props: mergeProps(
|
|
795
|
+
{
|
|
796
|
+
className: cn8(
|
|
797
|
+
"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 group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
|
|
798
|
+
className
|
|
799
|
+
)
|
|
800
|
+
},
|
|
801
|
+
props
|
|
802
|
+
),
|
|
803
|
+
render,
|
|
804
|
+
state: {
|
|
805
|
+
slot: "sidebar-group-action",
|
|
806
|
+
sidebar: "group-action"
|
|
807
|
+
}
|
|
808
|
+
});
|
|
809
|
+
}
|
|
810
|
+
function SidebarGroupContent(_a) {
|
|
811
|
+
var _b = _a, {
|
|
812
|
+
className
|
|
813
|
+
} = _b, props = __objRest(_b, [
|
|
814
|
+
"className"
|
|
815
|
+
]);
|
|
816
|
+
return /* @__PURE__ */ jsx9(
|
|
817
|
+
"div",
|
|
818
|
+
__spreadValues({
|
|
819
|
+
"data-slot": "sidebar-group-content",
|
|
820
|
+
"data-sidebar": "group-content",
|
|
821
|
+
className: cn8("w-full text-xs", className)
|
|
822
|
+
}, props)
|
|
823
|
+
);
|
|
824
|
+
}
|
|
251
825
|
function SidebarMenu(_a) {
|
|
252
826
|
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
|
|
253
827
|
return /* @__PURE__ */ jsx9(
|
|
@@ -343,6 +917,154 @@ function SidebarMenuButton(_a) {
|
|
|
343
917
|
)
|
|
344
918
|
] });
|
|
345
919
|
}
|
|
920
|
+
function SidebarMenuAction(_a) {
|
|
921
|
+
var _b = _a, {
|
|
922
|
+
className,
|
|
923
|
+
render,
|
|
924
|
+
showOnHover = false
|
|
925
|
+
} = _b, props = __objRest(_b, [
|
|
926
|
+
"className",
|
|
927
|
+
"render",
|
|
928
|
+
"showOnHover"
|
|
929
|
+
]);
|
|
930
|
+
return useRender({
|
|
931
|
+
defaultTagName: "button",
|
|
932
|
+
props: mergeProps(
|
|
933
|
+
{
|
|
934
|
+
className: cn8(
|
|
935
|
+
"absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-[calc(var(--radius-sm)-2px)] p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
|
|
936
|
+
showOnHover && "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground aria-expanded:opacity-100 md:opacity-0",
|
|
937
|
+
className
|
|
938
|
+
)
|
|
939
|
+
},
|
|
940
|
+
props
|
|
941
|
+
),
|
|
942
|
+
render,
|
|
943
|
+
state: {
|
|
944
|
+
slot: "sidebar-menu-action",
|
|
945
|
+
sidebar: "menu-action"
|
|
946
|
+
}
|
|
947
|
+
});
|
|
948
|
+
}
|
|
949
|
+
function SidebarMenuBadge(_a) {
|
|
950
|
+
var _b = _a, {
|
|
951
|
+
className
|
|
952
|
+
} = _b, props = __objRest(_b, [
|
|
953
|
+
"className"
|
|
954
|
+
]);
|
|
955
|
+
return /* @__PURE__ */ jsx9(
|
|
956
|
+
"div",
|
|
957
|
+
__spreadValues({
|
|
958
|
+
"data-slot": "sidebar-menu-badge",
|
|
959
|
+
"data-sidebar": "menu-badge",
|
|
960
|
+
className: cn8(
|
|
961
|
+
"pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-[calc(var(--radius-sm)-2px)] px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-accent-foreground",
|
|
962
|
+
className
|
|
963
|
+
)
|
|
964
|
+
}, props)
|
|
965
|
+
);
|
|
966
|
+
}
|
|
967
|
+
function SidebarMenuSkeleton(_a) {
|
|
968
|
+
var _b = _a, {
|
|
969
|
+
className,
|
|
970
|
+
showIcon = false
|
|
971
|
+
} = _b, props = __objRest(_b, [
|
|
972
|
+
"className",
|
|
973
|
+
"showIcon"
|
|
974
|
+
]);
|
|
975
|
+
const [width] = React2.useState(() => {
|
|
976
|
+
return `${Math.floor(Math.random() * 40) + 50}%`;
|
|
977
|
+
});
|
|
978
|
+
return /* @__PURE__ */ jsxs4(
|
|
979
|
+
"div",
|
|
980
|
+
__spreadProps(__spreadValues({
|
|
981
|
+
"data-slot": "sidebar-menu-skeleton",
|
|
982
|
+
"data-sidebar": "menu-skeleton",
|
|
983
|
+
className: cn8("flex h-8 items-center gap-2 rounded-md px-2", className)
|
|
984
|
+
}, props), {
|
|
985
|
+
children: [
|
|
986
|
+
showIcon && /* @__PURE__ */ jsx9(
|
|
987
|
+
Skeleton,
|
|
988
|
+
{
|
|
989
|
+
className: "size-4 rounded-md",
|
|
990
|
+
"data-sidebar": "menu-skeleton-icon"
|
|
991
|
+
}
|
|
992
|
+
),
|
|
993
|
+
/* @__PURE__ */ jsx9(
|
|
994
|
+
Skeleton,
|
|
995
|
+
{
|
|
996
|
+
className: "h-4 max-w-(--skeleton-width) flex-1",
|
|
997
|
+
"data-sidebar": "menu-skeleton-text",
|
|
998
|
+
style: {
|
|
999
|
+
"--skeleton-width": width
|
|
1000
|
+
}
|
|
1001
|
+
}
|
|
1002
|
+
)
|
|
1003
|
+
]
|
|
1004
|
+
})
|
|
1005
|
+
);
|
|
1006
|
+
}
|
|
1007
|
+
function SidebarMenuSub(_a) {
|
|
1008
|
+
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
|
|
1009
|
+
return /* @__PURE__ */ jsx9(
|
|
1010
|
+
"ul",
|
|
1011
|
+
__spreadValues({
|
|
1012
|
+
"data-slot": "sidebar-menu-sub",
|
|
1013
|
+
"data-sidebar": "menu-sub",
|
|
1014
|
+
className: cn8(
|
|
1015
|
+
"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 group-data-[collapsible=icon]:hidden",
|
|
1016
|
+
className
|
|
1017
|
+
)
|
|
1018
|
+
}, props)
|
|
1019
|
+
);
|
|
1020
|
+
}
|
|
1021
|
+
function SidebarMenuSubItem(_a) {
|
|
1022
|
+
var _b = _a, {
|
|
1023
|
+
className
|
|
1024
|
+
} = _b, props = __objRest(_b, [
|
|
1025
|
+
"className"
|
|
1026
|
+
]);
|
|
1027
|
+
return /* @__PURE__ */ jsx9(
|
|
1028
|
+
"li",
|
|
1029
|
+
__spreadValues({
|
|
1030
|
+
"data-slot": "sidebar-menu-sub-item",
|
|
1031
|
+
"data-sidebar": "menu-sub-item",
|
|
1032
|
+
className: cn8("group/menu-sub-item relative", className)
|
|
1033
|
+
}, props)
|
|
1034
|
+
);
|
|
1035
|
+
}
|
|
1036
|
+
function SidebarMenuSubButton(_a) {
|
|
1037
|
+
var _b = _a, {
|
|
1038
|
+
render,
|
|
1039
|
+
size = "md",
|
|
1040
|
+
isActive = false,
|
|
1041
|
+
className
|
|
1042
|
+
} = _b, props = __objRest(_b, [
|
|
1043
|
+
"render",
|
|
1044
|
+
"size",
|
|
1045
|
+
"isActive",
|
|
1046
|
+
"className"
|
|
1047
|
+
]);
|
|
1048
|
+
return useRender({
|
|
1049
|
+
defaultTagName: "a",
|
|
1050
|
+
props: mergeProps(
|
|
1051
|
+
{
|
|
1052
|
+
className: cn8(
|
|
1053
|
+
"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 group-data-[collapsible=icon]: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 data-[size=md]:text-xs data-[size=sm]:text-xs data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
|
|
1054
|
+
className
|
|
1055
|
+
)
|
|
1056
|
+
},
|
|
1057
|
+
props
|
|
1058
|
+
),
|
|
1059
|
+
render,
|
|
1060
|
+
state: {
|
|
1061
|
+
slot: "sidebar-menu-sub-button",
|
|
1062
|
+
sidebar: "menu-sub-button",
|
|
1063
|
+
size,
|
|
1064
|
+
active: isActive
|
|
1065
|
+
}
|
|
1066
|
+
});
|
|
1067
|
+
}
|
|
346
1068
|
|
|
347
1069
|
// src/components/composed/nav-user.tsx
|
|
348
1070
|
import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
@@ -366,5 +1088,29 @@ var NavUser = memo2(function NavUser2({
|
|
|
366
1088
|
});
|
|
367
1089
|
export {
|
|
368
1090
|
HeaderTitle,
|
|
369
|
-
NavUser
|
|
1091
|
+
NavUser,
|
|
1092
|
+
Sidebar,
|
|
1093
|
+
SidebarContent,
|
|
1094
|
+
SidebarFooter,
|
|
1095
|
+
SidebarGroup,
|
|
1096
|
+
SidebarGroupAction,
|
|
1097
|
+
SidebarGroupContent,
|
|
1098
|
+
SidebarGroupLabel,
|
|
1099
|
+
SidebarHeader,
|
|
1100
|
+
SidebarInput,
|
|
1101
|
+
SidebarInset,
|
|
1102
|
+
SidebarMenu,
|
|
1103
|
+
SidebarMenuAction,
|
|
1104
|
+
SidebarMenuBadge,
|
|
1105
|
+
SidebarMenuButton,
|
|
1106
|
+
SidebarMenuItem,
|
|
1107
|
+
SidebarMenuSkeleton,
|
|
1108
|
+
SidebarMenuSub,
|
|
1109
|
+
SidebarMenuSubButton,
|
|
1110
|
+
SidebarMenuSubItem,
|
|
1111
|
+
SidebarProvider,
|
|
1112
|
+
SidebarRail,
|
|
1113
|
+
SidebarSeparator,
|
|
1114
|
+
SidebarTrigger,
|
|
1115
|
+
useSidebar
|
|
370
1116
|
};
|