periplo-ui 4.6.3 → 4.7.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.
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { TooltipContent } from '../Tooltip';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
+
export type SidebarSize = 'small' | 'medium' | 'big';
|
|
3
4
|
type SidebarContext = {
|
|
4
5
|
state: 'expanded' | 'collapsed';
|
|
5
6
|
open: boolean;
|
|
@@ -8,6 +9,7 @@ type SidebarContext = {
|
|
|
8
9
|
setOpenMobile: (open: boolean) => void;
|
|
9
10
|
isMobile: boolean;
|
|
10
11
|
toggleSidebar: () => void;
|
|
12
|
+
size: SidebarSize;
|
|
11
13
|
};
|
|
12
14
|
declare const SidebarContext: React.Context<SidebarContext | null>;
|
|
13
15
|
declare function useSidebar(): SidebarContext;
|
|
@@ -15,6 +17,7 @@ declare const SidebarProvider: React.ForwardRefExoticComponent<Omit<React.ClassA
|
|
|
15
17
|
defaultOpen?: boolean;
|
|
16
18
|
open?: boolean;
|
|
17
19
|
onOpenChange?: (open: boolean) => void;
|
|
20
|
+
size?: SidebarSize;
|
|
18
21
|
}, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
19
22
|
declare const SidebarRoot: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
|
|
20
23
|
side?: "left" | "right";
|
|
@@ -64,11 +67,16 @@ declare const SidebarGroupAction: React.ForwardRefExoticComponent<Omit<React.Cla
|
|
|
64
67
|
declare const SidebarGroupContent: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
65
68
|
declare const SidebarMenu: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & React.RefAttributes<HTMLUListElement>>;
|
|
66
69
|
declare const SidebarMenuItem: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;
|
|
70
|
+
declare const sidebarMenuButtonVariants: (props?: ({
|
|
71
|
+
variant?: "element" | "navigation-item" | null | undefined;
|
|
72
|
+
size?: "big" | "small" | "medium" | null | undefined;
|
|
73
|
+
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
67
74
|
declare const SidebarMenuButton: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
68
75
|
asChild?: boolean;
|
|
69
76
|
isActive?: boolean;
|
|
70
77
|
tooltip?: string | React.ComponentProps<typeof TooltipContent>;
|
|
71
78
|
variant?: "navigation-item" | "element";
|
|
79
|
+
size?: SidebarSize;
|
|
72
80
|
}, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
73
81
|
declare const SidebarMenuAction: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
74
82
|
asChild?: boolean;
|
|
@@ -84,4 +92,4 @@ declare const SidebarMenuSubButton: React.ForwardRefExoticComponent<Omit<React.C
|
|
|
84
92
|
asChild?: boolean;
|
|
85
93
|
isActive?: boolean;
|
|
86
94
|
}, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
|
|
87
|
-
export { SidebarRoot, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar, };
|
|
95
|
+
export { SidebarRoot, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, sidebarMenuButtonVariants, useSidebar, };
|
|
@@ -18,8 +18,12 @@ const SIDEBAR_COOKIE_NAME = "sidebar_state";
|
|
|
18
18
|
const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
|
|
19
19
|
const SIDEBAR_WIDTH = "16rem";
|
|
20
20
|
const SIDEBAR_WIDTH_MOBILE = "18rem";
|
|
21
|
-
const SIDEBAR_WIDTH_ICON = "3rem";
|
|
22
21
|
const SIDEBAR_KEYBOARD_SHORTCUT = "b";
|
|
22
|
+
const SIDEBAR_WIDTH_ICON = {
|
|
23
|
+
small: "3rem",
|
|
24
|
+
medium: "3.5rem",
|
|
25
|
+
big: "4rem"
|
|
26
|
+
};
|
|
23
27
|
const SidebarContext = React.createContext(null);
|
|
24
28
|
function useSidebar() {
|
|
25
29
|
const context = React.useContext(SidebarContext);
|
|
@@ -28,64 +32,79 @@ function useSidebar() {
|
|
|
28
32
|
}
|
|
29
33
|
return context;
|
|
30
34
|
}
|
|
31
|
-
const SidebarProvider = React.forwardRef(
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
toggleSidebar();
|
|
56
|
-
}
|
|
57
|
-
};
|
|
58
|
-
window.addEventListener("keydown", handleKeyDown);
|
|
59
|
-
return () => window.removeEventListener("keydown", handleKeyDown);
|
|
60
|
-
}, [toggleSidebar]);
|
|
61
|
-
const state = open ? "expanded" : "collapsed";
|
|
62
|
-
const contextValue = React.useMemo(
|
|
63
|
-
() => ({
|
|
64
|
-
state,
|
|
65
|
-
open,
|
|
66
|
-
setOpen,
|
|
67
|
-
isMobile,
|
|
68
|
-
openMobile,
|
|
69
|
-
setOpenMobile,
|
|
70
|
-
toggleSidebar
|
|
71
|
-
}),
|
|
72
|
-
[state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
|
|
73
|
-
);
|
|
74
|
-
return /* @__PURE__ */ jsx(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ jsx(
|
|
75
|
-
"div",
|
|
76
|
-
{
|
|
77
|
-
style: {
|
|
78
|
-
"--sidebar-width": SIDEBAR_WIDTH,
|
|
79
|
-
"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
|
|
80
|
-
...style
|
|
35
|
+
const SidebarProvider = React.forwardRef(
|
|
36
|
+
({
|
|
37
|
+
defaultOpen = true,
|
|
38
|
+
open: openProp,
|
|
39
|
+
onOpenChange: setOpenProp,
|
|
40
|
+
size = "small",
|
|
41
|
+
className,
|
|
42
|
+
style,
|
|
43
|
+
children,
|
|
44
|
+
...props
|
|
45
|
+
}, ref) => {
|
|
46
|
+
const isMobile = useIsMobile();
|
|
47
|
+
const [openMobile, setOpenMobile] = React.useState(false);
|
|
48
|
+
const [_open, _setOpen] = React.useState(defaultOpen);
|
|
49
|
+
const open = openProp ?? _open;
|
|
50
|
+
const setOpen = React.useCallback(
|
|
51
|
+
(value) => {
|
|
52
|
+
const openState = typeof value === "function" ? value(open) : value;
|
|
53
|
+
if (setOpenProp) {
|
|
54
|
+
setOpenProp(openState);
|
|
55
|
+
} else {
|
|
56
|
+
_setOpen(openState);
|
|
57
|
+
}
|
|
58
|
+
document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
|
|
81
59
|
},
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
|
|
60
|
+
[setOpenProp, open]
|
|
61
|
+
);
|
|
62
|
+
const toggleSidebar = React.useCallback(() => {
|
|
63
|
+
isMobile ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
|
|
64
|
+
}, [isMobile, setOpen, setOpenMobile]);
|
|
65
|
+
React.useEffect(() => {
|
|
66
|
+
const handleKeyDown = (event) => {
|
|
67
|
+
if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
|
|
68
|
+
event.preventDefault();
|
|
69
|
+
toggleSidebar();
|
|
70
|
+
}
|
|
71
|
+
};
|
|
72
|
+
window.addEventListener("keydown", handleKeyDown);
|
|
73
|
+
return () => window.removeEventListener("keydown", handleKeyDown);
|
|
74
|
+
}, [toggleSidebar]);
|
|
75
|
+
const state = open ? "expanded" : "collapsed";
|
|
76
|
+
const contextValue = React.useMemo(
|
|
77
|
+
() => ({
|
|
78
|
+
state,
|
|
79
|
+
open,
|
|
80
|
+
setOpen,
|
|
81
|
+
isMobile,
|
|
82
|
+
openMobile,
|
|
83
|
+
setOpenMobile,
|
|
84
|
+
toggleSidebar,
|
|
85
|
+
size
|
|
86
|
+
}),
|
|
87
|
+
[state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar, size]
|
|
88
|
+
);
|
|
89
|
+
return /* @__PURE__ */ jsx(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ jsx(
|
|
90
|
+
"div",
|
|
91
|
+
{
|
|
92
|
+
style: {
|
|
93
|
+
"--sidebar-width": SIDEBAR_WIDTH,
|
|
94
|
+
"--sidebar-width-icon": SIDEBAR_WIDTH_ICON[size],
|
|
95
|
+
...style
|
|
96
|
+
},
|
|
97
|
+
className: cn(
|
|
98
|
+
"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
|
|
99
|
+
className
|
|
100
|
+
),
|
|
101
|
+
ref,
|
|
102
|
+
...props,
|
|
103
|
+
children
|
|
104
|
+
}
|
|
105
|
+
) }) });
|
|
106
|
+
}
|
|
107
|
+
);
|
|
89
108
|
SidebarProvider.displayName = "SidebarProvider";
|
|
90
109
|
const SidebarRoot = React.forwardRef(({ side = "left", variant = "default", className, children, ...props }, ref) => {
|
|
91
110
|
const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
|
|
@@ -95,7 +114,7 @@ const SidebarRoot = React.forwardRef(({ side = "left", variant = "default", clas
|
|
|
95
114
|
{
|
|
96
115
|
"data-sidebar": "sidebar",
|
|
97
116
|
"data-mobile": "true",
|
|
98
|
-
className: "bg-sidebar text-sidebar-foreground w-
|
|
117
|
+
className: "bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden",
|
|
99
118
|
style: {
|
|
100
119
|
"--sidebar-width": SIDEBAR_WIDTH_MOBILE
|
|
101
120
|
},
|
|
@@ -123,8 +142,8 @@ const SidebarRoot = React.forwardRef(({ side = "left", variant = "default", clas
|
|
|
123
142
|
"div",
|
|
124
143
|
{
|
|
125
144
|
className: cn(
|
|
126
|
-
"relative w-
|
|
127
|
-
variant === "default" && "group-data-[state=collapsed]:w-
|
|
145
|
+
"relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
|
|
146
|
+
variant === "default" && "group-data-[state=collapsed]:w-(--sidebar-width-icon)",
|
|
128
147
|
variant === "hidden" && "group-data-[state=collapsed]:w-0",
|
|
129
148
|
"group-data-[side=right]:rotate-180"
|
|
130
149
|
)
|
|
@@ -134,15 +153,15 @@ const SidebarRoot = React.forwardRef(({ side = "left", variant = "default", clas
|
|
|
134
153
|
"div",
|
|
135
154
|
{
|
|
136
155
|
className: cn(
|
|
137
|
-
"fixed inset-y-0 z-10 hidden h-svh w-
|
|
156
|
+
"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
|
|
138
157
|
side === "left" ? [
|
|
139
158
|
"left-0",
|
|
140
|
-
variant === "default" && "group-data-[state=collapsed]:w-
|
|
141
|
-
variant === "hidden" && "group-data-[state=collapsed]
|
|
159
|
+
variant === "default" && "group-data-[state=collapsed]:w-(--sidebar-width-icon)",
|
|
160
|
+
variant === "hidden" && "group-data-[state=collapsed]:-left-(--sidebar-width)"
|
|
142
161
|
] : [
|
|
143
162
|
"right-0",
|
|
144
|
-
variant === "default" && "group-data-[state=collapsed]:w-
|
|
145
|
-
variant === "hidden" && "group-data-[state=collapsed]
|
|
163
|
+
variant === "default" && "group-data-[state=collapsed]:w-(--sidebar-width-icon)",
|
|
164
|
+
variant === "hidden" && "group-data-[state=collapsed]:-right-(--sidebar-width)"
|
|
146
165
|
],
|
|
147
166
|
"group-data-[side=left]:border-r group-data-[side=right]:border-l",
|
|
148
167
|
className
|
|
@@ -191,8 +210,8 @@ const SidebarRail = React.forwardRef(
|
|
|
191
210
|
onClick: toggleSidebar,
|
|
192
211
|
title: "Toggle Sidebar",
|
|
193
212
|
className: cn(
|
|
194
|
-
"hover:after:bg-sidebar-border 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-
|
|
195
|
-
"
|
|
213
|
+
"hover:after:bg-sidebar-border 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-0.5 sm:flex",
|
|
214
|
+
"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
|
|
196
215
|
"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
|
|
197
216
|
"group-data-[variant=offcanvas]:hover:bg-sidebar group-data-[variant=offcanvas]:translate-x-0 group-data-[variant=offcanvas]:after:left-full",
|
|
198
217
|
"[[data-side=left][data-variant=offcanvas]_&]:-right-2",
|
|
@@ -336,47 +355,56 @@ const SidebarMenu = React.forwardRef(({ className, ...props }, ref) => /* @__PUR
|
|
|
336
355
|
SidebarMenu.displayName = "SidebarMenu";
|
|
337
356
|
const SidebarMenuItem = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("li", { ref, "data-sidebar": "menu-item", className: cn("group/menu-item relative", className), ...props }));
|
|
338
357
|
SidebarMenuItem.displayName = "SidebarMenuItem";
|
|
339
|
-
const
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
variant: {
|
|
347
|
-
"navigation-item": "h-8",
|
|
348
|
-
element: "group-data-[state=collapsed]:!p-0"
|
|
349
|
-
}
|
|
358
|
+
const sidebarMenuButtonVariants = cva(
|
|
359
|
+
"peer/menu-button flex w-full text-sm hover:bg-sidebar-accent hover:text-sidebar-accent-foreground items-center overflow-hidden rounded-md text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] 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 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 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=expanded]:hover:bg-sidebar-accent data-[state=expanded]:hover:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:shrink-0",
|
|
360
|
+
{
|
|
361
|
+
variants: {
|
|
362
|
+
variant: {
|
|
363
|
+
"navigation-item": "",
|
|
364
|
+
element: "group-data-[state=collapsed]:!p-0"
|
|
350
365
|
},
|
|
351
|
-
|
|
352
|
-
|
|
366
|
+
size: {
|
|
367
|
+
small: "h-8 gap-2 p-2 [&>svg]:size-4",
|
|
368
|
+
medium: "h-10 gap-3 p-2.5 [&>svg]:size-5",
|
|
369
|
+
big: "h-12 gap-4 p-3 [&>svg]:size-6"
|
|
353
370
|
}
|
|
371
|
+
},
|
|
372
|
+
defaultVariants: {
|
|
373
|
+
variant: "navigation-item",
|
|
374
|
+
size: "small"
|
|
354
375
|
}
|
|
355
|
-
);
|
|
356
|
-
const button = /* @__PURE__ */ jsx(
|
|
357
|
-
Comp,
|
|
358
|
-
{
|
|
359
|
-
ref,
|
|
360
|
-
"data-sidebar": "menu-button",
|
|
361
|
-
"data-active": isActive,
|
|
362
|
-
className: cn(sidebarMenuButtonVariants({ variant }), className),
|
|
363
|
-
...props,
|
|
364
|
-
children
|
|
365
|
-
}
|
|
366
|
-
);
|
|
367
|
-
if (!tooltip) {
|
|
368
|
-
return button;
|
|
369
376
|
}
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
377
|
+
);
|
|
378
|
+
const SidebarMenuButton = React.forwardRef(
|
|
379
|
+
({ asChild = false, isActive = false, tooltip, className, children, variant = "navigation-item", size, ...props }, ref) => {
|
|
380
|
+
const Comp = asChild ? Slot : "button";
|
|
381
|
+
const { isMobile, state, size: contextSize } = useSidebar();
|
|
382
|
+
const resolvedSize = size ?? contextSize;
|
|
383
|
+
const button = /* @__PURE__ */ jsx(
|
|
384
|
+
Comp,
|
|
385
|
+
{
|
|
386
|
+
ref,
|
|
387
|
+
"data-sidebar": "menu-button",
|
|
388
|
+
"data-active": isActive,
|
|
389
|
+
className: cn(sidebarMenuButtonVariants({ variant, size: resolvedSize }), className),
|
|
390
|
+
...props,
|
|
391
|
+
children
|
|
392
|
+
}
|
|
393
|
+
);
|
|
394
|
+
if (!tooltip) {
|
|
395
|
+
return button;
|
|
396
|
+
}
|
|
397
|
+
if (typeof tooltip === "string") {
|
|
398
|
+
tooltip = {
|
|
399
|
+
children: tooltip
|
|
400
|
+
};
|
|
401
|
+
}
|
|
402
|
+
return /* @__PURE__ */ jsxs(TooltipRoot, { children: [
|
|
403
|
+
/* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: button }),
|
|
404
|
+
/* @__PURE__ */ jsx(TooltipContent, { side: "right", align: "center", hidden: state !== "collapsed" || isMobile, ...tooltip })
|
|
405
|
+
] });
|
|
374
406
|
}
|
|
375
|
-
|
|
376
|
-
/* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: button }),
|
|
377
|
-
/* @__PURE__ */ jsx(TooltipContent, { side: "right", align: "center", hidden: state !== "collapsed" || isMobile, ...tooltip })
|
|
378
|
-
] });
|
|
379
|
-
});
|
|
407
|
+
);
|
|
380
408
|
SidebarMenuButton.displayName = "SidebarMenuButton";
|
|
381
409
|
const SidebarMenuAction = React.forwardRef(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
|
|
382
410
|
const Comp = asChild ? Slot : "button";
|
|
@@ -431,7 +459,7 @@ const SidebarMenuSkeleton = React.forwardRef(({ className, showIcon = false, ...
|
|
|
431
459
|
/* @__PURE__ */ jsx(
|
|
432
460
|
Skeleton,
|
|
433
461
|
{
|
|
434
|
-
className: "h-4 max-w-
|
|
462
|
+
className: "h-4 max-w-(--skeleton-width) flex-1",
|
|
435
463
|
"data-sidebar": "menu-skeleton-text",
|
|
436
464
|
style: {
|
|
437
465
|
"--skeleton-width": width
|
|
@@ -482,5 +510,5 @@ const SidebarMenuSubButton = React.forwardRef(({ asChild = false, isActive, clas
|
|
|
482
510
|
});
|
|
483
511
|
SidebarMenuSubButton.displayName = "SidebarMenuSubButton";
|
|
484
512
|
|
|
485
|
-
export { SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarRoot, SidebarSeparator, SidebarTrigger, useSidebar };
|
|
513
|
+
export { SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarRoot, SidebarSeparator, SidebarTrigger, sidebarMenuButtonVariants, useSidebar };
|
|
486
514
|
//# sourceMappingURL=Sidebar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Sidebar.js","sources":["../../../src/components/Sidebar/Sidebar.tsx"],"sourcesContent":["'use client'\n\nimport { SidebarSimple as SidebarIcon } from '@phosphor-icons/react/dist/ssr/SidebarSimple'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cva } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { useIsMobile } from '../../lib/useMobile'\nimport { Button } from '../Button'\nimport { Input } from '../Input'\nimport { Separator } from '../Separator'\nimport { SheetContent, SheetDescription, SheetHeader, SheetRoot, SheetTitle } from '../Sheet'\nimport { Skeleton } from '../Skeleton'\nimport { TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger } from '../Tooltip'\nimport { Typography } from '../Typography'\n\nimport { cn } from '@/lib/utils'\n\nconst SIDEBAR_COOKIE_NAME = 'sidebar_state'\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = '16rem'\nconst SIDEBAR_WIDTH_MOBILE = '18rem'\nconst SIDEBAR_WIDTH_ICON = '3rem'\nconst SIDEBAR_KEYBOARD_SHORTCUT = 'b'\n\ntype SidebarContext = {\n state: 'expanded' | 'collapsed'\n open: boolean\n setOpen: (open: boolean) => void\n openMobile: boolean\n setOpenMobile: (open: boolean) => void\n isMobile: boolean\n toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContext | null>(null)\n\nfunction useSidebar() {\n const context = React.useContext(SidebarContext)\n if (!context) {\n throw new Error('useSidebar must be used within a SidebarProvider.')\n }\n\n return context\n}\n\nconst SidebarProvider = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps<'div'> & {\n defaultOpen?: boolean\n open?: boolean\n onOpenChange?: (open: boolean) => void\n }\n>(({ defaultOpen = true, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }, ref) => {\n const isMobile = useIsMobile()\n const [openMobile, setOpenMobile] = React.useState(false)\n\n // This is the internal state of the sidebar.\n // We use openProp and setOpenProp for control from outside the component.\n const [_open, _setOpen] = React.useState(defaultOpen)\n const open = openProp ?? _open\n const setOpen = React.useCallback(\n (value: boolean | ((value: boolean) => boolean)) => {\n const openState = typeof value === 'function' ? value(open) : value\n if (setOpenProp) {\n setOpenProp(openState)\n } else {\n _setOpen(openState)\n }\n\n // This sets the cookie to keep the sidebar state.\n document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n },\n [setOpenProp, open],\n )\n\n // Helper to toggle the sidebar.\n const toggleSidebar = React.useCallback(() => {\n isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n }, [isMobile, setOpen, setOpenMobile])\n\n // Adds a keyboard shortcut to toggle the sidebar.\n React.useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\n event.preventDefault()\n toggleSidebar()\n }\n }\n\n window.addEventListener('keydown', handleKeyDown)\n return () => window.removeEventListener('keydown', handleKeyDown)\n }, [toggleSidebar])\n\n // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n // This makes it easier to style the sidebar with Tailwind classes.\n const state = open ? 'expanded' : 'collapsed'\n\n const contextValue = React.useMemo<SidebarContext>(\n () => ({\n state,\n open,\n setOpen,\n isMobile,\n openMobile,\n setOpenMobile,\n toggleSidebar,\n }),\n [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],\n )\n\n return (\n <SidebarContext.Provider value={contextValue}>\n <TooltipProvider delayDuration={0}>\n <div\n style={\n {\n '--sidebar-width': SIDEBAR_WIDTH,\n '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,\n ...style,\n } as React.CSSProperties\n }\n className={cn('group/sidebar-wrapper has-[[data-variant=inset]]:bg-sidebar flex min-h-svh w-full', className)}\n ref={ref}\n {...props}\n >\n {children}\n </div>\n </TooltipProvider>\n </SidebarContext.Provider>\n )\n})\nSidebarProvider.displayName = 'SidebarProvider'\n\nconst SidebarRoot = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps<'div'> & {\n side?: 'left' | 'right'\n variant?: 'default' | 'hidden'\n }\n>(({ side = 'left', variant = 'default', className, children, ...props }, ref) => {\n const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n if (isMobile) {\n return (\n <SheetRoot open={openMobile} onOpenChange={setOpenMobile} {...props}>\n <SheetContent\n data-sidebar=\"sidebar\"\n data-mobile=\"true\"\n className=\"bg-sidebar text-sidebar-foreground w-[var(--sidebar-width)] p-0 [&>button]:hidden\"\n style={\n {\n '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n } as React.CSSProperties\n }\n side={side}\n >\n <SheetHeader className=\"sr-only\">\n <SheetTitle>Sidebar</SheetTitle>\n <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n </SheetHeader>\n <div className=\"flex h-full w-full flex-col\">{children}</div>\n </SheetContent>\n </SheetRoot>\n )\n }\n\n return (\n <div\n ref={ref}\n className=\"group peer text-sidebar-foreground hidden shadow-md md:block\"\n data-state={state}\n data-side={side}\n data-variant={variant}\n >\n {/* This is what handles the sidebar gap on desktop */}\n <div\n className={cn(\n 'relative w-[var(--sidebar-width)] bg-transparent transition-[width] duration-200 ease-linear',\n variant === 'default' && 'group-data-[state=collapsed]:w-[var(--sidebar-width-icon)]',\n variant === 'hidden' && 'group-data-[state=collapsed]:w-0',\n 'group-data-[side=right]:rotate-180',\n )}\n />\n <div\n className={cn(\n 'fixed inset-y-0 z-10 hidden h-svh w-[var(--sidebar-width)] transition-[left,right,width] duration-200 ease-linear md:flex',\n side === 'left'\n ? [\n 'left-0',\n variant === 'default' && 'group-data-[state=collapsed]:w-[var(--sidebar-width-icon)]',\n variant === 'hidden' && 'group-data-[state=collapsed]:left-[calc(var(--sidebar-width)*-1)]',\n ]\n : [\n 'right-0',\n variant === 'default' && 'group-data-[state=collapsed]:w-[var(--sidebar-width-icon)]',\n variant === 'hidden' && 'group-data-[state=collapsed]:right-[calc(var(--sidebar-width)*-1)]',\n ],\n 'group-data-[side=left]:border-r group-data-[side=right]:border-l',\n className,\n )}\n {...props}\n >\n <div data-sidebar=\"sidebar\" className=\"bg-sidebar flex h-full w-full flex-col\">\n {children}\n </div>\n </div>\n </div>\n )\n})\nSidebarRoot.displayName = 'SidebarRoot'\n\nconst SidebarTrigger = React.forwardRef<React.ComponentRef<typeof Button>, React.ComponentProps<typeof Button>>(\n ({ className, onClick, ...props }, ref) => {\n const { toggleSidebar } = useSidebar()\n\n return (\n <Button\n ref={ref}\n data-sidebar=\"trigger\"\n variant=\"text\"\n className={cn('text-primary-foreground h-8 w-8 p-1', className)}\n onClick={(event) => {\n onClick?.(event)\n toggleSidebar()\n }}\n {...props}\n StartIcon={SidebarIcon}\n >\n <span className=\"sr-only\">Toggle Sidebar</span>\n </Button>\n )\n },\n)\nSidebarTrigger.displayName = 'SidebarTrigger'\n\nconst SidebarRail = React.forwardRef<HTMLButtonElement, React.ComponentProps<'button'>>(\n ({ className, ...props }, ref) => {\n const { toggleSidebar } = useSidebar()\n\n return (\n <button\n ref={ref}\n data-sidebar=\"rail\"\n aria-label=\"Toggle Sidebar\"\n tabIndex={-1}\n onClick={toggleSidebar}\n title=\"Toggle Sidebar\"\n className={cn(\n 'hover:after:bg-sidebar-border 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] sm:flex',\n '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize',\n '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',\n 'group-data-[variant=offcanvas]:hover:bg-sidebar group-data-[variant=offcanvas]:translate-x-0 group-data-[variant=offcanvas]:after:left-full',\n '[[data-side=left][data-variant=offcanvas]_&]:-right-2',\n '[[data-side=right][data-variant=offcanvas]_&]:-left-2',\n className,\n )}\n {...props}\n />\n )\n },\n)\nSidebarRail.displayName = 'SidebarRail'\n\nconst SidebarInset = React.forwardRef<HTMLDivElement, React.ComponentProps<'main'>>(({ className, ...props }, ref) => {\n return (\n <main\n ref={ref}\n className={cn(\n 'bg-background relative flex w-full flex-1 flex-col',\n '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 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2',\n className,\n )}\n {...props}\n />\n )\n})\nSidebarInset.displayName = 'SidebarInset'\n\nconst SidebarInput = React.forwardRef<React.ComponentRef<typeof Input>, React.ComponentProps<typeof Input>>(\n ({ className, ...props }, ref) => {\n return (\n <Input\n ref={ref}\n data-sidebar=\"input\"\n className={cn(\n 'bg-background focus-visible:ring-sidebar-ring h-8 w-full shadow-none focus-visible:ring-2',\n className,\n )}\n {...props}\n />\n )\n },\n)\nSidebarInput.displayName = 'SidebarInput'\n\nconst SidebarHeader = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(({ className, ...props }, ref) => {\n return <div ref={ref} data-sidebar=\"header\" className={cn('flex flex-col gap-2 p-2', className)} {...props} />\n})\nSidebarHeader.displayName = 'SidebarHeader'\n\nconst SidebarFooter = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(({ className, ...props }, ref) => {\n return <div ref={ref} data-sidebar=\"footer\" className={cn('flex flex-col gap-2 p-2', className)} {...props} />\n})\nSidebarFooter.displayName = 'SidebarFooter'\n\nconst SidebarSeparator = React.forwardRef<React.ComponentRef<typeof Separator>, React.ComponentProps<typeof Separator>>(\n ({ className, ...props }, ref) => {\n return (\n <Separator\n ref={ref}\n data-sidebar=\"separator\"\n className={cn('bg-sidebar-border mx-2 w-auto', className)}\n {...props}\n />\n )\n },\n)\nSidebarSeparator.displayName = 'SidebarSeparator'\n\nconst SidebarContent = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(({ className, ...props }, ref) => {\n return (\n <div\n ref={ref}\n data-sidebar=\"content\"\n className={cn(\n 'flex min-h-0 flex-1 flex-col gap-2 overflow-auto',\n 'group-data-[variant=default]:group-data-[state=collapsed]:overflow-hidden',\n className,\n )}\n {...props}\n />\n )\n})\nSidebarContent.displayName = 'SidebarContent'\n\nconst SidebarGroup = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(({ className, ...props }, ref) => {\n return (\n <div\n ref={ref}\n data-sidebar=\"group\"\n className={cn('relative flex w-full min-w-0 flex-col p-2', className)}\n {...props}\n />\n )\n})\nSidebarGroup.displayName = 'SidebarGroup'\n\nconst SidebarGroupLabel = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'> & { asChild?: boolean }>(\n ({ className, asChild = false, children, ...props }, ref) => {\n const Comp = asChild ? Slot : 'div'\n\n return (\n <Comp\n ref={ref}\n data-sidebar=\"group-label\"\n className={cn(\n 'text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 transition-[margin,opacity] duration-200 ease-linear outline-none focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n 'group-data-[state=collapsed]:group-data-[variant=hidden]:hidden',\n 'group-data-[state=collapsed]:group-data-[variant=default]:-mt-8 group-data-[state=collapsed]:group-data-[variant=default]:opacity-0',\n className,\n )}\n {...props}\n >\n {typeof children === 'string' ? (\n <Typography variant=\"label-md\" color=\"secondary\">\n {children}\n </Typography>\n ) : (\n children\n )}\n </Comp>\n )\n },\n)\nSidebarGroupLabel.displayName = 'SidebarGroupLabel'\n\nconst SidebarGroupAction = React.forwardRef<HTMLButtonElement, React.ComponentProps<'button'> & { asChild?: boolean }>(\n ({ className, asChild = false, ...props }, ref) => {\n const Comp = asChild ? Slot : 'button'\n\n return (\n <Comp\n ref={ref}\n data-sidebar=\"group-action\"\n className={cn(\n 'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 transition-transform outline-none focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n 'after:absolute after:-inset-2 after:md:hidden',\n 'group-data-[state=collapsed]:hidden',\n className,\n )}\n {...props}\n />\n )\n },\n)\nSidebarGroupAction.displayName = 'SidebarGroupAction'\n\nconst SidebarGroupContent = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(\n ({ className, ...props }, ref) => (\n <div ref={ref} data-sidebar=\"group-content\" className={cn('w-full text-sm', className)} {...props} />\n ),\n)\nSidebarGroupContent.displayName = 'SidebarGroupContent'\n\nconst SidebarMenu = React.forwardRef<HTMLUListElement, React.ComponentProps<'ul'>>(({ className, ...props }, ref) => (\n <ul ref={ref} data-sidebar=\"menu\" className={cn('flex w-full min-w-0 flex-col gap-1', className)} {...props} />\n))\nSidebarMenu.displayName = 'SidebarMenu'\n\nconst SidebarMenuItem = React.forwardRef<HTMLLIElement, React.ComponentProps<'li'>>(({ className, ...props }, ref) => (\n <li ref={ref} data-sidebar=\"menu-item\" className={cn('group/menu-item relative', className)} {...props} />\n))\nSidebarMenuItem.displayName = 'SidebarMenuItem'\n\nconst SidebarMenuButton = React.forwardRef<\n HTMLButtonElement,\n React.ComponentProps<'button'> & {\n asChild?: boolean\n isActive?: boolean\n tooltip?: string | React.ComponentProps<typeof TooltipContent>\n variant?: 'navigation-item' | 'element'\n }\n>(({ asChild = false, isActive = false, tooltip, className, children, variant = 'navigation-item', ...props }, ref) => {\n const Comp = asChild ? Slot : 'button'\n const { isMobile, state } = useSidebar()\n\n const sidebarMenuButtonVariants = cva(\n 'peer/menu-button flex w-full text-sm hover:bg-sidebar-accent hover:text-sidebar-accent-foreground items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] 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 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 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=expanded]:hover:bg-sidebar-accent data-[state=expanded]:hover:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',\n {\n variants: {\n variant: {\n 'navigation-item': 'h-8',\n element: 'group-data-[state=collapsed]:!p-0',\n },\n },\n defaultVariants: {\n variant: 'navigation-item',\n },\n },\n )\n\n const button = (\n <Comp\n ref={ref}\n data-sidebar=\"menu-button\"\n data-active={isActive}\n className={cn(sidebarMenuButtonVariants({ variant }), className)}\n {...props}\n >\n {children}\n </Comp>\n )\n\n if (!tooltip) {\n return button\n }\n\n if (typeof tooltip === 'string') {\n tooltip = {\n children: tooltip,\n }\n }\n\n return (\n <TooltipRoot>\n <TooltipTrigger asChild>{button}</TooltipTrigger>\n <TooltipContent side=\"right\" align=\"center\" hidden={state !== 'collapsed' || isMobile} {...tooltip} />\n </TooltipRoot>\n )\n})\nSidebarMenuButton.displayName = 'SidebarMenuButton'\n\nconst SidebarMenuAction = React.forwardRef<\n HTMLButtonElement,\n React.ComponentProps<'button'> & {\n asChild?: boolean\n showOnHover?: boolean\n }\n>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {\n const Comp = asChild ? Slot : 'button'\n\n return (\n <Comp\n ref={ref}\n data-sidebar=\"menu-action\"\n className={cn(\n 'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 transition-transform outline-none focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n 'after:absolute after:-inset-2 after:md:hidden',\n 'group-data-[state=collapsed]:hidden',\n showOnHover &&\n 'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=expanded]:opacity-100 md:opacity-0',\n className,\n )}\n {...props}\n />\n )\n})\nSidebarMenuAction.displayName = 'SidebarMenuAction'\n\nconst SidebarMenuBadge = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(\n ({ className, ...props }, ref) => (\n <div\n ref={ref}\n data-sidebar=\"menu-badge\"\n className={cn(\n 'text-sidebar-foreground pointer-events-none absolute top-1.5 right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none',\n 'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',\n 'group-data-[state=collapsed]:group-data-[variant=hidden]:hidden',\n 'group-data-[state=collapsed]:group-data-[variant=default]:opacity-0',\n className,\n )}\n {...props}\n />\n ),\n)\nSidebarMenuBadge.displayName = 'SidebarMenuBadge'\n\nconst SidebarMenuSkeleton = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps<'div'> & {\n showIcon?: boolean\n }\n>(({ className, showIcon = false, ...props }, ref) => {\n // Random width between 50 to 90%.\n const width = React.useMemo(() => {\n return `${Math.floor((window.crypto.getRandomValues(new Uint32Array(1))[0] % 40) + 50)}%`\n }, [])\n\n return (\n <div\n ref={ref}\n data-sidebar=\"menu-skeleton\"\n className={cn('flex h-8 items-center gap-2 rounded-md px-2', className)}\n {...props}\n >\n {showIcon && <Skeleton className=\"size-4 rounded-md\" data-sidebar=\"menu-skeleton-icon\" />}\n <Skeleton\n className=\"h-4 max-w-[var(--skeleton-width)] flex-1\"\n data-sidebar=\"menu-skeleton-text\"\n style={\n {\n '--skeleton-width': width,\n } as React.CSSProperties\n }\n />\n </div>\n )\n})\nSidebarMenuSkeleton.displayName = 'SidebarMenuSkeleton'\n\nconst SidebarMenuSub = React.forwardRef<HTMLUListElement, React.ComponentProps<'ul'>>(\n ({ className, ...props }, ref) => (\n <ul\n ref={ref}\n data-sidebar=\"menu-sub\"\n className={cn(\n 'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5',\n 'group-data-[state=collapsed]:hidden',\n className,\n )}\n {...props}\n />\n ),\n)\nSidebarMenuSub.displayName = 'SidebarMenuSub'\n\nconst SidebarMenuSubItem = React.forwardRef<HTMLLIElement, React.ComponentProps<'li'>>(({ ...props }, ref) => (\n <li ref={ref} {...props} />\n))\nSidebarMenuSubItem.displayName = 'SidebarMenuSubItem'\n\nconst SidebarMenuSubButton = React.forwardRef<\n HTMLAnchorElement,\n React.ComponentProps<'a'> & {\n asChild?: boolean\n isActive?: boolean\n }\n>(({ asChild = false, isActive, className, children, ...props }, ref) => {\n const Comp = asChild ? Slot : 'a'\n\n return (\n <Comp\n ref={ref}\n data-sidebar=\"menu-sub-button\"\n data-active={isActive}\n className={cn(\n 'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-none focus-visible:ring-2 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',\n 'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',\n 'group-data-[state=collapsed]:hidden',\n className,\n )}\n {...props}\n >\n {typeof children === 'string' ? <Typography variant=\"body-md\">{children}</Typography> : children}\n </Comp>\n )\n})\nSidebarMenuSubButton.displayName = 'SidebarMenuSubButton'\n\nexport {\n SidebarRoot,\n SidebarContent,\n SidebarFooter,\n SidebarGroup,\n SidebarGroupAction,\n SidebarGroupContent,\n SidebarGroupLabel,\n SidebarHeader,\n SidebarInput,\n SidebarInset,\n SidebarMenu,\n SidebarMenuAction,\n SidebarMenuBadge,\n SidebarMenuButton,\n SidebarMenuItem,\n SidebarMenuSkeleton,\n SidebarMenuSub,\n SidebarMenuSubButton,\n SidebarMenuSubItem,\n SidebarProvider,\n SidebarRail,\n SidebarSeparator,\n SidebarTrigger,\n useSidebar,\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAkBA;AACA;AACA;AACA;AACA;AACA;AAYA;AAEA;AACE;AACA;AACE;AAAmE;AAGrE;AACF;AAEA;AAQE;AACA;AAIA;AACA;AACA;AAAsB;AAElB;AACA;AACE;AAAqB;AAErB;AAAkB;AAIpB;AAAgG;AAClG;AACkB;AAIpB;AACE;AAAmE;AAIrE;AACE;AACE;AACE;AACA;AAAc;AAChB;AAGF;AACA;AAAgE;AAKlE;AAEA;AAA2B;AAClB;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACF;AACyE;AAG3E;AAGM;AAAC;AAAA;AAEG;AACqB;AACK;AACrB;AACL;AAE0G;AAC5G;AACI;AAEH;AAAA;AAKX;AACA;AAEA;AAOE;AAEA;AACE;AAEI;AAAC;AAAA;AACc;AACD;AACF;AAER;AACqB;AACrB;AAEF;AAEA;AACE;AAAmB;AAC2B;AAChD;AACuD;AAAA;AAAA;AAE3D;AAIJ;AACE;AAAC;AAAA;AACC;AACU;AACE;AACD;AACG;AAGd;AAAA;AAAC;AAAA;AACY;AACT;AACyB;AACD;AACxB;AACF;AAAA;AACF;AACA;AAAC;AAAA;AACY;AACT;AAEI;AACE;AACyB;AACD;AAE1B;AACE;AACyB;AACD;AAC1B;AACJ;AACA;AACF;AACI;AAIJ;AAAA;AACF;AAAA;AAAA;AAGN;AACA;AAEA;AAA6B;AAEzB;AAEA;AACE;AAAC;AAAA;AACC;AACa;AACL;AACsD;AAE5D;AACA;AAAc;AAChB;AACI;AACO;AAE6B;AAAA;AAC1C;AAGN;AACA;AAEA;AAA0B;AAEtB;AAEA;AACE;AAAC;AAAA;AACC;AACa;AACF;AACD;AACD;AACH;AACK;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACF;AACI;AAAA;AACN;AAGN;AACA;AAEA;AACE;AACE;AAAC;AAAA;AACC;AACW;AACT;AACA;AACA;AACF;AACI;AAAA;AAGV;AACA;AAEA;AAA2B;AAEvB;AACE;AAAC;AAAA;AACC;AACa;AACF;AACT;AACA;AACF;AACI;AAAA;AACN;AAGN;AACA;AAEA;AACE;AACF;AACA;AAEA;AACE;AACF;AACA;AAEA;AAA+B;AAE3B;AACE;AAAC;AAAA;AACC;AACa;AAC2C;AACpD;AAAA;AACN;AAGN;AACA;AAEA;AACE;AACE;AAAC;AAAA;AACC;AACa;AACF;AACT;AACA;AACA;AACF;AACI;AAAA;AAGV;AACA;AAEA;AACE;AACE;AAAC;AAAA;AACC;AACa;AACuD;AAChE;AAAA;AAGV;AACA;AAEA;AAAgC;AAE5B;AAEA;AACE;AAAC;AAAA;AACC;AACa;AACF;AACT;AACA;AACA;AACA;AACF;AACI;AAOF;AAAA;AAEJ;AAGN;AACA;AAEA;AAAiC;AAE7B;AAEA;AACE;AAAC;AAAA;AACC;AACa;AACF;AACT;AACA;AACA;AACA;AACF;AACI;AAAA;AACN;AAGN;AACA;AAEA;AAAkC;AAIlC;AACA;AAEA;AAGA;AAEA;AAGA;AAEA;AASE;AACA;AAEA;AAAkC;AAChC;AACA;AACY;AACC;AACY;AACV;AACX;AACF;AACiB;AACN;AACX;AACF;AAGF;AACE;AAAC;AAAA;AACC;AACa;AACA;AACkD;AAC3D;AAEH;AAAA;AAIL;AACE;AAAO;AAGT;AACE;AAAU;AACE;AACZ;AAGF;AAEI;AAAgC;AACoE;AAG1G;AACA;AAEA;AAOE;AAEA;AACE;AAAC;AAAA;AACC;AACa;AACF;AACT;AACA;AACA;AAEE;AACF;AACF;AACI;AAAA;AAGV;AACA;AAEA;AAA+B;AAE3B;AAAC;AAAA;AACC;AACa;AACF;AACT;AACA;AACA;AACA;AACA;AACF;AACI;AAAA;AAGV;AACA;AAEA;AAOE;AACE;AAAsF;AAGxF;AACE;AAAC;AAAA;AACC;AACa;AACyD;AAClE;AAEH;AAAsF;AACvF;AAAC;AAAA;AACW;AACG;AAEX;AACsB;AACtB;AAAA;AAEJ;AAAA;AAAA;AAGN;AACA;AAEA;AAA6B;AAEzB;AAAC;AAAA;AACC;AACa;AACF;AACT;AACA;AACA;AACF;AACI;AAAA;AAGV;AACA;AAEA;AAGA;AAEA;AAOE;AAEA;AACE;AAAC;AAAA;AACC;AACa;AACA;AACF;AACT;AACA;AACA;AACA;AACF;AACI;AAEoF;AAAA;AAG9F;AACA;;"}
|
|
1
|
+
{"version":3,"file":"Sidebar.js","sources":["../../../src/components/Sidebar/Sidebar.tsx"],"sourcesContent":["'use client'\n\nimport { SidebarSimple as SidebarIcon } from '@phosphor-icons/react/dist/ssr/SidebarSimple'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cva } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { useIsMobile } from '../../lib/useMobile'\nimport { Button } from '../Button'\nimport { Input } from '../Input'\nimport { Separator } from '../Separator'\nimport { SheetContent, SheetDescription, SheetHeader, SheetRoot, SheetTitle } from '../Sheet'\nimport { Skeleton } from '../Skeleton'\nimport { TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger } from '../Tooltip'\nimport { Typography } from '../Typography'\n\nimport { cn } from '@/lib/utils'\n\nconst SIDEBAR_COOKIE_NAME = 'sidebar_state'\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = '16rem'\nconst SIDEBAR_WIDTH_MOBILE = '18rem'\nconst SIDEBAR_KEYBOARD_SHORTCUT = 'b'\n\nexport type SidebarSize = 'small' | 'medium' | 'big'\n\nconst SIDEBAR_WIDTH_ICON: Record<SidebarSize, string> = {\n small: '3rem',\n medium: '3.5rem',\n big: '4rem',\n}\n\ntype SidebarContext = {\n state: 'expanded' | 'collapsed'\n open: boolean\n setOpen: (open: boolean) => void\n openMobile: boolean\n setOpenMobile: (open: boolean) => void\n isMobile: boolean\n toggleSidebar: () => void\n size: SidebarSize\n}\n\nconst SidebarContext = React.createContext<SidebarContext | null>(null)\n\nfunction useSidebar() {\n const context = React.useContext(SidebarContext)\n if (!context) {\n throw new Error('useSidebar must be used within a SidebarProvider.')\n }\n\n return context\n}\n\nconst SidebarProvider = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps<'div'> & {\n defaultOpen?: boolean\n open?: boolean\n onOpenChange?: (open: boolean) => void\n size?: SidebarSize\n }\n>(\n (\n {\n defaultOpen = true,\n open: openProp,\n onOpenChange: setOpenProp,\n size = 'small',\n className,\n style,\n children,\n ...props\n },\n ref,\n ) => {\n const isMobile = useIsMobile()\n const [openMobile, setOpenMobile] = React.useState(false)\n\n // This is the internal state of the sidebar.\n // We use openProp and setOpenProp for control from outside the component.\n const [_open, _setOpen] = React.useState(defaultOpen)\n const open = openProp ?? _open\n const setOpen = React.useCallback(\n (value: boolean | ((value: boolean) => boolean)) => {\n const openState = typeof value === 'function' ? value(open) : value\n if (setOpenProp) {\n setOpenProp(openState)\n } else {\n _setOpen(openState)\n }\n\n // This sets the cookie to keep the sidebar state.\n document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n },\n [setOpenProp, open],\n )\n\n // Helper to toggle the sidebar.\n const toggleSidebar = React.useCallback(() => {\n isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n }, [isMobile, setOpen, setOpenMobile])\n\n // Adds a keyboard shortcut to toggle the sidebar.\n React.useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\n event.preventDefault()\n toggleSidebar()\n }\n }\n\n window.addEventListener('keydown', handleKeyDown)\n return () => window.removeEventListener('keydown', handleKeyDown)\n }, [toggleSidebar])\n\n // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n // This makes it easier to style the sidebar with Tailwind classes.\n const state = open ? 'expanded' : 'collapsed'\n\n const contextValue = React.useMemo<SidebarContext>(\n () => ({\n state,\n open,\n setOpen,\n isMobile,\n openMobile,\n setOpenMobile,\n toggleSidebar,\n size,\n }),\n [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar, size],\n )\n\n return (\n <SidebarContext.Provider value={contextValue}>\n <TooltipProvider delayDuration={0}>\n <div\n style={\n {\n '--sidebar-width': SIDEBAR_WIDTH,\n '--sidebar-width-icon': SIDEBAR_WIDTH_ICON[size],\n ...style,\n } as React.CSSProperties\n }\n className={cn(\n 'group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full',\n className,\n )}\n ref={ref}\n {...props}\n >\n {children}\n </div>\n </TooltipProvider>\n </SidebarContext.Provider>\n )\n },\n)\nSidebarProvider.displayName = 'SidebarProvider'\n\nconst SidebarRoot = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps<'div'> & {\n side?: 'left' | 'right'\n variant?: 'default' | 'hidden'\n }\n>(({ side = 'left', variant = 'default', className, children, ...props }, ref) => {\n const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n if (isMobile) {\n return (\n <SheetRoot open={openMobile} onOpenChange={setOpenMobile} {...props}>\n <SheetContent\n data-sidebar=\"sidebar\"\n data-mobile=\"true\"\n className=\"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden\"\n style={\n {\n '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n } as React.CSSProperties\n }\n side={side}\n >\n <SheetHeader className=\"sr-only\">\n <SheetTitle>Sidebar</SheetTitle>\n <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n </SheetHeader>\n <div className=\"flex h-full w-full flex-col\">{children}</div>\n </SheetContent>\n </SheetRoot>\n )\n }\n\n return (\n <div\n ref={ref}\n className=\"group peer text-sidebar-foreground hidden shadow-md md:block\"\n data-state={state}\n data-side={side}\n data-variant={variant}\n >\n {/* This is what handles the sidebar gap on desktop */}\n <div\n className={cn(\n 'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',\n variant === 'default' && 'group-data-[state=collapsed]:w-(--sidebar-width-icon)',\n variant === 'hidden' && 'group-data-[state=collapsed]:w-0',\n 'group-data-[side=right]:rotate-180',\n )}\n />\n <div\n className={cn(\n 'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',\n side === 'left'\n ? [\n 'left-0',\n variant === 'default' && 'group-data-[state=collapsed]:w-(--sidebar-width-icon)',\n variant === 'hidden' && 'group-data-[state=collapsed]:-left-(--sidebar-width)',\n ]\n : [\n 'right-0',\n variant === 'default' && 'group-data-[state=collapsed]:w-(--sidebar-width-icon)',\n variant === 'hidden' && 'group-data-[state=collapsed]:-right-(--sidebar-width)',\n ],\n 'group-data-[side=left]:border-r group-data-[side=right]:border-l',\n className,\n )}\n {...props}\n >\n <div data-sidebar=\"sidebar\" className=\"bg-sidebar flex h-full w-full flex-col\">\n {children}\n </div>\n </div>\n </div>\n )\n})\nSidebarRoot.displayName = 'SidebarRoot'\n\nconst SidebarTrigger = React.forwardRef<React.ComponentRef<typeof Button>, React.ComponentProps<typeof Button>>(\n ({ className, onClick, ...props }, ref) => {\n const { toggleSidebar } = useSidebar()\n\n return (\n <Button\n ref={ref}\n data-sidebar=\"trigger\"\n variant=\"text\"\n className={cn('text-primary-foreground h-8 w-8 p-1', className)}\n onClick={(event) => {\n onClick?.(event)\n toggleSidebar()\n }}\n {...props}\n StartIcon={SidebarIcon}\n >\n <span className=\"sr-only\">Toggle Sidebar</span>\n </Button>\n )\n },\n)\nSidebarTrigger.displayName = 'SidebarTrigger'\n\nconst SidebarRail = React.forwardRef<HTMLButtonElement, React.ComponentProps<'button'>>(\n ({ className, ...props }, ref) => {\n const { toggleSidebar } = useSidebar()\n\n return (\n <button\n ref={ref}\n data-sidebar=\"rail\"\n aria-label=\"Toggle Sidebar\"\n tabIndex={-1}\n onClick={toggleSidebar}\n title=\"Toggle Sidebar\"\n className={cn(\n 'hover:after:bg-sidebar-border 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-0.5 sm:flex',\n 'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',\n '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',\n 'group-data-[variant=offcanvas]:hover:bg-sidebar group-data-[variant=offcanvas]:translate-x-0 group-data-[variant=offcanvas]:after:left-full',\n '[[data-side=left][data-variant=offcanvas]_&]:-right-2',\n '[[data-side=right][data-variant=offcanvas]_&]:-left-2',\n className,\n )}\n {...props}\n />\n )\n },\n)\nSidebarRail.displayName = 'SidebarRail'\n\nconst SidebarInset = React.forwardRef<HTMLDivElement, React.ComponentProps<'main'>>(({ className, ...props }, ref) => {\n return (\n <main\n ref={ref}\n className={cn(\n 'bg-background relative flex w-full flex-1 flex-col',\n '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 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2',\n className,\n )}\n {...props}\n />\n )\n})\nSidebarInset.displayName = 'SidebarInset'\n\nconst SidebarInput = React.forwardRef<React.ComponentRef<typeof Input>, React.ComponentProps<typeof Input>>(\n ({ className, ...props }, ref) => {\n return (\n <Input\n ref={ref}\n data-sidebar=\"input\"\n className={cn(\n 'bg-background focus-visible:ring-sidebar-ring h-8 w-full shadow-none focus-visible:ring-2',\n className,\n )}\n {...props}\n />\n )\n },\n)\nSidebarInput.displayName = 'SidebarInput'\n\nconst SidebarHeader = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(({ className, ...props }, ref) => {\n return <div ref={ref} data-sidebar=\"header\" className={cn('flex flex-col gap-2 p-2', className)} {...props} />\n})\nSidebarHeader.displayName = 'SidebarHeader'\n\nconst SidebarFooter = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(({ className, ...props }, ref) => {\n return <div ref={ref} data-sidebar=\"footer\" className={cn('flex flex-col gap-2 p-2', className)} {...props} />\n})\nSidebarFooter.displayName = 'SidebarFooter'\n\nconst SidebarSeparator = React.forwardRef<React.ComponentRef<typeof Separator>, React.ComponentProps<typeof Separator>>(\n ({ className, ...props }, ref) => {\n return (\n <Separator\n ref={ref}\n data-sidebar=\"separator\"\n className={cn('bg-sidebar-border mx-2 w-auto', className)}\n {...props}\n />\n )\n },\n)\nSidebarSeparator.displayName = 'SidebarSeparator'\n\nconst SidebarContent = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(({ className, ...props }, ref) => {\n return (\n <div\n ref={ref}\n data-sidebar=\"content\"\n className={cn(\n 'flex min-h-0 flex-1 flex-col gap-2 overflow-auto',\n 'group-data-[variant=default]:group-data-[state=collapsed]:overflow-hidden',\n className,\n )}\n {...props}\n />\n )\n})\nSidebarContent.displayName = 'SidebarContent'\n\nconst SidebarGroup = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(({ className, ...props }, ref) => {\n return (\n <div\n ref={ref}\n data-sidebar=\"group\"\n className={cn('relative flex w-full min-w-0 flex-col p-2', className)}\n {...props}\n />\n )\n})\nSidebarGroup.displayName = 'SidebarGroup'\n\nconst SidebarGroupLabel = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'> & { asChild?: boolean }>(\n ({ className, asChild = false, children, ...props }, ref) => {\n const Comp = asChild ? Slot : 'div'\n\n return (\n <Comp\n ref={ref}\n data-sidebar=\"group-label\"\n className={cn(\n 'text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 transition-[margin,opacity] duration-200 ease-linear outline-none focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n 'group-data-[state=collapsed]:group-data-[variant=hidden]:hidden',\n 'group-data-[state=collapsed]:group-data-[variant=default]:-mt-8 group-data-[state=collapsed]:group-data-[variant=default]:opacity-0',\n className,\n )}\n {...props}\n >\n {typeof children === 'string' ? (\n <Typography variant=\"label-md\" color=\"secondary\">\n {children}\n </Typography>\n ) : (\n children\n )}\n </Comp>\n )\n },\n)\nSidebarGroupLabel.displayName = 'SidebarGroupLabel'\n\nconst SidebarGroupAction = React.forwardRef<HTMLButtonElement, React.ComponentProps<'button'> & { asChild?: boolean }>(\n ({ className, asChild = false, ...props }, ref) => {\n const Comp = asChild ? Slot : 'button'\n\n return (\n <Comp\n ref={ref}\n data-sidebar=\"group-action\"\n className={cn(\n 'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 transition-transform outline-none focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n 'after:absolute after:-inset-2 after:md:hidden',\n 'group-data-[state=collapsed]:hidden',\n className,\n )}\n {...props}\n />\n )\n },\n)\nSidebarGroupAction.displayName = 'SidebarGroupAction'\n\nconst SidebarGroupContent = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(\n ({ className, ...props }, ref) => (\n <div ref={ref} data-sidebar=\"group-content\" className={cn('w-full text-sm', className)} {...props} />\n ),\n)\nSidebarGroupContent.displayName = 'SidebarGroupContent'\n\nconst SidebarMenu = React.forwardRef<HTMLUListElement, React.ComponentProps<'ul'>>(({ className, ...props }, ref) => (\n <ul ref={ref} data-sidebar=\"menu\" className={cn('flex w-full min-w-0 flex-col gap-1', className)} {...props} />\n))\nSidebarMenu.displayName = 'SidebarMenu'\n\nconst SidebarMenuItem = React.forwardRef<HTMLLIElement, React.ComponentProps<'li'>>(({ className, ...props }, ref) => (\n <li ref={ref} data-sidebar=\"menu-item\" className={cn('group/menu-item relative', className)} {...props} />\n))\nSidebarMenuItem.displayName = 'SidebarMenuItem'\n\nconst sidebarMenuButtonVariants = cva(\n 'peer/menu-button flex w-full text-sm hover:bg-sidebar-accent hover:text-sidebar-accent-foreground items-center overflow-hidden rounded-md text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] 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 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 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=expanded]:hover:bg-sidebar-accent data-[state=expanded]:hover:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:shrink-0',\n {\n variants: {\n variant: {\n 'navigation-item': '',\n element: 'group-data-[state=collapsed]:!p-0',\n },\n size: {\n small: 'h-8 gap-2 p-2 [&>svg]:size-4',\n medium: 'h-10 gap-3 p-2.5 [&>svg]:size-5',\n big: 'h-12 gap-4 p-3 [&>svg]:size-6',\n },\n },\n defaultVariants: {\n variant: 'navigation-item',\n size: 'small',\n },\n },\n)\n\nconst SidebarMenuButton = React.forwardRef<\n HTMLButtonElement,\n React.ComponentProps<'button'> & {\n asChild?: boolean\n isActive?: boolean\n tooltip?: string | React.ComponentProps<typeof TooltipContent>\n variant?: 'navigation-item' | 'element'\n size?: SidebarSize\n }\n>(\n (\n { asChild = false, isActive = false, tooltip, className, children, variant = 'navigation-item', size, ...props },\n ref,\n ) => {\n const Comp = asChild ? Slot : 'button'\n const { isMobile, state, size: contextSize } = useSidebar()\n const resolvedSize = size ?? contextSize\n\n const button = (\n <Comp\n ref={ref}\n data-sidebar=\"menu-button\"\n data-active={isActive}\n className={cn(sidebarMenuButtonVariants({ variant, size: resolvedSize }), className)}\n {...props}\n >\n {children}\n </Comp>\n )\n\n if (!tooltip) {\n return button\n }\n\n if (typeof tooltip === 'string') {\n tooltip = {\n children: tooltip,\n }\n }\n\n return (\n <TooltipRoot>\n <TooltipTrigger asChild>{button}</TooltipTrigger>\n <TooltipContent side=\"right\" align=\"center\" hidden={state !== 'collapsed' || isMobile} {...tooltip} />\n </TooltipRoot>\n )\n },\n)\nSidebarMenuButton.displayName = 'SidebarMenuButton'\n\nconst SidebarMenuAction = React.forwardRef<\n HTMLButtonElement,\n React.ComponentProps<'button'> & {\n asChild?: boolean\n showOnHover?: boolean\n }\n>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {\n const Comp = asChild ? Slot : 'button'\n\n return (\n <Comp\n ref={ref}\n data-sidebar=\"menu-action\"\n className={cn(\n 'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 transition-transform outline-none focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n 'after:absolute after:-inset-2 after:md:hidden',\n 'group-data-[state=collapsed]:hidden',\n showOnHover &&\n 'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=expanded]:opacity-100 md:opacity-0',\n className,\n )}\n {...props}\n />\n )\n})\nSidebarMenuAction.displayName = 'SidebarMenuAction'\n\nconst SidebarMenuBadge = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(\n ({ className, ...props }, ref) => (\n <div\n ref={ref}\n data-sidebar=\"menu-badge\"\n className={cn(\n 'text-sidebar-foreground pointer-events-none absolute top-1.5 right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none',\n 'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',\n 'group-data-[state=collapsed]:group-data-[variant=hidden]:hidden',\n 'group-data-[state=collapsed]:group-data-[variant=default]:opacity-0',\n className,\n )}\n {...props}\n />\n ),\n)\nSidebarMenuBadge.displayName = 'SidebarMenuBadge'\n\nconst SidebarMenuSkeleton = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps<'div'> & {\n showIcon?: boolean\n }\n>(({ className, showIcon = false, ...props }, ref) => {\n // Random width between 50 to 90%.\n const width = React.useMemo(() => {\n return `${Math.floor((window.crypto.getRandomValues(new Uint32Array(1))[0] % 40) + 50)}%`\n }, [])\n\n return (\n <div\n ref={ref}\n data-sidebar=\"menu-skeleton\"\n className={cn('flex h-8 items-center gap-2 rounded-md px-2', className)}\n {...props}\n >\n {showIcon && <Skeleton className=\"size-4 rounded-md\" data-sidebar=\"menu-skeleton-icon\" />}\n <Skeleton\n className=\"h-4 max-w-(--skeleton-width) flex-1\"\n data-sidebar=\"menu-skeleton-text\"\n style={\n {\n '--skeleton-width': width,\n } as React.CSSProperties\n }\n />\n </div>\n )\n})\nSidebarMenuSkeleton.displayName = 'SidebarMenuSkeleton'\n\nconst SidebarMenuSub = React.forwardRef<HTMLUListElement, React.ComponentProps<'ul'>>(\n ({ className, ...props }, ref) => (\n <ul\n ref={ref}\n data-sidebar=\"menu-sub\"\n className={cn(\n 'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5',\n 'group-data-[state=collapsed]:hidden',\n className,\n )}\n {...props}\n />\n ),\n)\nSidebarMenuSub.displayName = 'SidebarMenuSub'\n\nconst SidebarMenuSubItem = React.forwardRef<HTMLLIElement, React.ComponentProps<'li'>>(({ ...props }, ref) => (\n <li ref={ref} {...props} />\n))\nSidebarMenuSubItem.displayName = 'SidebarMenuSubItem'\n\nconst SidebarMenuSubButton = React.forwardRef<\n HTMLAnchorElement,\n React.ComponentProps<'a'> & {\n asChild?: boolean\n isActive?: boolean\n }\n>(({ asChild = false, isActive, className, children, ...props }, ref) => {\n const Comp = asChild ? Slot : 'a'\n\n return (\n <Comp\n ref={ref}\n data-sidebar=\"menu-sub-button\"\n data-active={isActive}\n className={cn(\n 'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-none focus-visible:ring-2 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',\n 'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',\n 'group-data-[state=collapsed]:hidden',\n className,\n )}\n {...props}\n >\n {typeof children === 'string' ? <Typography variant=\"body-md\">{children}</Typography> : children}\n </Comp>\n )\n})\nSidebarMenuSubButton.displayName = 'SidebarMenuSubButton'\n\nexport {\n SidebarRoot,\n SidebarContent,\n SidebarFooter,\n SidebarGroup,\n SidebarGroupAction,\n SidebarGroupContent,\n SidebarGroupLabel,\n SidebarHeader,\n SidebarInput,\n SidebarInset,\n SidebarMenu,\n SidebarMenuAction,\n SidebarMenuBadge,\n SidebarMenuButton,\n SidebarMenuItem,\n SidebarMenuSkeleton,\n SidebarMenuSub,\n SidebarMenuSubButton,\n SidebarMenuSubItem,\n SidebarProvider,\n SidebarRail,\n SidebarSeparator,\n SidebarTrigger,\n sidebarMenuButtonVariants,\n useSidebar,\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAkBA;AACA;AACA;AACA;AACA;AAIA;AAAwD;AAC/C;AACC;AAEV;AAaA;AAEA;AACE;AACA;AACE;AAAmE;AAGrE;AACF;AAEA;AAA8B;AAU1B;AACgB;AACR;AACQ;AACP;AACP;AACA;AACA;AACG;AAIL;AACA;AAIA;AACA;AACA;AAAsB;AAElB;AACA;AACE;AAAqB;AAErB;AAAkB;AAIpB;AAAgG;AAClG;AACkB;AAIpB;AACE;AAAmE;AAIrE;AACE;AACE;AACE;AACA;AAAc;AAChB;AAGF;AACA;AAAgE;AAKlE;AAEA;AAA2B;AAClB;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACF;AAC+E;AAGjF;AAGM;AAAC;AAAA;AAEG;AACqB;AAC4B;AAC5C;AACL;AAES;AACT;AACA;AACF;AACA;AACI;AAEH;AAAA;AAGP;AAGN;AACA;AAEA;AAOE;AAEA;AACE;AAEI;AAAC;AAAA;AACc;AACD;AACF;AAER;AACqB;AACrB;AAEF;AAEA;AACE;AAAmB;AAC2B;AAChD;AACuD;AAAA;AAAA;AAE3D;AAIJ;AACE;AAAC;AAAA;AACC;AACU;AACE;AACD;AACG;AAGd;AAAA;AAAC;AAAA;AACY;AACT;AACyB;AACD;AACxB;AACF;AAAA;AACF;AACA;AAAC;AAAA;AACY;AACT;AAEI;AACE;AACyB;AACD;AAE1B;AACE;AACyB;AACD;AAC1B;AACJ;AACA;AACF;AACI;AAIJ;AAAA;AACF;AAAA;AAAA;AAGN;AACA;AAEA;AAA6B;AAEzB;AAEA;AACE;AAAC;AAAA;AACC;AACa;AACL;AACsD;AAE5D;AACA;AAAc;AAChB;AACI;AACO;AAE6B;AAAA;AAC1C;AAGN;AACA;AAEA;AAA0B;AAEtB;AAEA;AACE;AAAC;AAAA;AACC;AACa;AACF;AACD;AACD;AACH;AACK;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACF;AACI;AAAA;AACN;AAGN;AACA;AAEA;AACE;AACE;AAAC;AAAA;AACC;AACW;AACT;AACA;AACA;AACF;AACI;AAAA;AAGV;AACA;AAEA;AAA2B;AAEvB;AACE;AAAC;AAAA;AACC;AACa;AACF;AACT;AACA;AACF;AACI;AAAA;AACN;AAGN;AACA;AAEA;AACE;AACF;AACA;AAEA;AACE;AACF;AACA;AAEA;AAA+B;AAE3B;AACE;AAAC;AAAA;AACC;AACa;AAC2C;AACpD;AAAA;AACN;AAGN;AACA;AAEA;AACE;AACE;AAAC;AAAA;AACC;AACa;AACF;AACT;AACA;AACA;AACF;AACI;AAAA;AAGV;AACA;AAEA;AACE;AACE;AAAC;AAAA;AACC;AACa;AACuD;AAChE;AAAA;AAGV;AACA;AAEA;AAAgC;AAE5B;AAEA;AACE;AAAC;AAAA;AACC;AACa;AACF;AACT;AACA;AACA;AACA;AACF;AACI;AAOF;AAAA;AAEJ;AAGN;AACA;AAEA;AAAiC;AAE7B;AAEA;AACE;AAAC;AAAA;AACC;AACa;AACF;AACT;AACA;AACA;AACA;AACF;AACI;AAAA;AACN;AAGN;AACA;AAEA;AAAkC;AAIlC;AACA;AAEA;AAGA;AAEA;AAGA;AAEA;AAAkC;AAChC;AACA;AACY;AACC;AACY;AACV;AACX;AACM;AACG;AACC;AACH;AACP;AACF;AACiB;AACN;AACH;AACR;AAEJ;AAEA;AAAgC;AAc5B;AACA;AACA;AAEA;AACE;AAAC;AAAA;AACC;AACa;AACA;AACsE;AAC/E;AAEH;AAAA;AAIL;AACE;AAAO;AAGT;AACE;AAAU;AACE;AACZ;AAGF;AAEI;AAAgC;AACoE;AACtG;AAGN;AACA;AAEA;AAOE;AAEA;AACE;AAAC;AAAA;AACC;AACa;AACF;AACT;AACA;AACA;AAEE;AACF;AACF;AACI;AAAA;AAGV;AACA;AAEA;AAA+B;AAE3B;AAAC;AAAA;AACC;AACa;AACF;AACT;AACA;AACA;AACA;AACA;AACF;AACI;AAAA;AAGV;AACA;AAEA;AAOE;AACE;AAAsF;AAGxF;AACE;AAAC;AAAA;AACC;AACa;AACyD;AAClE;AAEH;AAAsF;AACvF;AAAC;AAAA;AACW;AACG;AAEX;AACsB;AACtB;AAAA;AAEJ;AAAA;AAAA;AAGN;AACA;AAEA;AAA6B;AAEzB;AAAC;AAAA;AACC;AACa;AACF;AACT;AACA;AACA;AACF;AACI;AAAA;AAGV;AACA;AAEA;AAGA;AAEA;AAOE;AAEA;AACE;AAAC;AAAA;AACC;AACa;AACA;AACF;AACT;AACA;AACA;AACA;AACF;AACI;AAEoF;AAAA;AAG9F;AACA;;"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarRoot, SidebarSeparator, SidebarTrigger, useSidebar } from './Sidebar.js';
|
|
1
|
+
export { SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarRoot, SidebarSeparator, SidebarTrigger, sidebarMenuButtonVariants, useSidebar } from './Sidebar.js';
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js
CHANGED
|
@@ -33,7 +33,7 @@ export { RadioGroup, RadioGroupItem } from './components/RadioGroup/RadioGroup.j
|
|
|
33
33
|
export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectRoot, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue } from './components/Select/Select.js';
|
|
34
34
|
export { Separator } from './components/Separator/Separator.js';
|
|
35
35
|
export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetRoot, SheetTitle, SheetTrigger } from './components/Sheet/Sheet.js';
|
|
36
|
-
export { SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarRoot, SidebarSeparator, SidebarTrigger, useSidebar } from './components/Sidebar/Sidebar.js';
|
|
36
|
+
export { SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarRoot, SidebarSeparator, SidebarTrigger, sidebarMenuButtonVariants, useSidebar } from './components/Sidebar/Sidebar.js';
|
|
37
37
|
export { Skeleton } from './components/Skeleton/Skeleton.js';
|
|
38
38
|
export { StarRating } from './components/StarRating/StarRating.js';
|
|
39
39
|
export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from './components/Table/Table.js';
|