@kamod-ch/ui 1.0.1 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -3
- package/dist/SidebarProvider-Bx7-BdQn.d.ts +160 -0
- package/dist/chunk-24QD2FTA.js +722 -0
- package/dist/chunk-24QD2FTA.js.map +1 -0
- package/dist/{chunk-7AJT2E2Y.js → chunk-3LIT5GWF.js} +2 -2
- package/dist/chunk-3LIT5GWF.js.map +1 -0
- package/dist/{chunk-2BQ54337.js → chunk-MJQ6R345.js} +2 -2
- package/dist/{chunk-2BQ54337.js.map → chunk-MJQ6R345.js.map} +1 -1
- package/dist/components/dropdown/index.js +1 -1
- package/dist/components/hover-card/index.js +1 -1
- package/dist/components/sidebar/index.d.ts +15 -10
- package/dist/components/sidebar/index.js +13 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +4 -4
- package/package.json +15 -14
- package/LICENSE.md +0 -9
- package/dist/SidebarProvider-IAihmyD7.d.ts +0 -46
- package/dist/chunk-7AJT2E2Y.js.map +0 -1
- package/dist/chunk-R565SY7K.js +0 -69
- package/dist/chunk-R565SY7K.js.map +0 -1
|
@@ -0,0 +1,722 @@
|
|
|
1
|
+
import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from './chunk-HTSAUMF5.js';
|
|
2
|
+
import { Skeleton } from './chunk-YZLPO4B2.js';
|
|
3
|
+
import { Sheet, SheetContent, SheetHeader } from './chunk-EMUPVA2F.js';
|
|
4
|
+
import { Input } from './chunk-6RASPU5N.js';
|
|
5
|
+
import { Separator } from './chunk-LCWXIQKA.js';
|
|
6
|
+
import { DialogTitle, DialogDescription } from './chunk-HHLQYMPT.js';
|
|
7
|
+
import { Button } from './chunk-5FBD2NTR.js';
|
|
8
|
+
import { cn } from './chunk-MS2ZNYCJ.js';
|
|
9
|
+
import { createContext, isValidElement, cloneElement } from 'preact';
|
|
10
|
+
import { useContext, useState, useCallback, useEffect, useMemo } from 'preact/hooks';
|
|
11
|
+
import { jsx, jsxs } from 'preact/jsx-runtime';
|
|
12
|
+
import { tv } from 'tailwind-variants';
|
|
13
|
+
|
|
14
|
+
var MOBILE_BREAKPOINT = 768;
|
|
15
|
+
var useIsMobile = () => {
|
|
16
|
+
const [isMobile, setIsMobile] = useState(false);
|
|
17
|
+
useEffect(() => {
|
|
18
|
+
const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
|
|
19
|
+
const onChange = () => {
|
|
20
|
+
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
|
|
21
|
+
};
|
|
22
|
+
mql.addEventListener("change", onChange);
|
|
23
|
+
onChange();
|
|
24
|
+
return () => mql.removeEventListener("change", onChange);
|
|
25
|
+
}, []);
|
|
26
|
+
return isMobile;
|
|
27
|
+
};
|
|
28
|
+
var SIDEBAR_COOKIE_NAME = "sidebar_state";
|
|
29
|
+
var SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
|
|
30
|
+
var SIDEBAR_WIDTH = "16rem";
|
|
31
|
+
var SIDEBAR_WIDTH_MOBILE = "18rem";
|
|
32
|
+
var SIDEBAR_WIDTH_ICON = "3rem";
|
|
33
|
+
var SIDEBAR_KEYBOARD_SHORTCUT = "b";
|
|
34
|
+
var SidebarContext = createContext(null);
|
|
35
|
+
var useSidebar = () => {
|
|
36
|
+
const context = useContext(SidebarContext);
|
|
37
|
+
if (!context) throw new Error("Sidebar components must be used within SidebarProvider");
|
|
38
|
+
return context;
|
|
39
|
+
};
|
|
40
|
+
var SidebarProvider = ({
|
|
41
|
+
defaultOpen = true,
|
|
42
|
+
open: openProp,
|
|
43
|
+
onOpenChange: setOpenProp,
|
|
44
|
+
class: className,
|
|
45
|
+
style,
|
|
46
|
+
children,
|
|
47
|
+
...rest
|
|
48
|
+
}) => {
|
|
49
|
+
const isMobile = useIsMobile();
|
|
50
|
+
const [openMobile, setOpenMobile] = useState(false);
|
|
51
|
+
const [_open, _setOpen] = useState(defaultOpen);
|
|
52
|
+
const open = openProp ?? _open;
|
|
53
|
+
const setOpen = useCallback(
|
|
54
|
+
(value) => {
|
|
55
|
+
const openState = typeof value === "function" ? value(open) : value;
|
|
56
|
+
if (setOpenProp) {
|
|
57
|
+
setOpenProp(openState);
|
|
58
|
+
} else {
|
|
59
|
+
_setOpen(openState);
|
|
60
|
+
}
|
|
61
|
+
if (typeof document !== "undefined") {
|
|
62
|
+
document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
|
|
63
|
+
}
|
|
64
|
+
},
|
|
65
|
+
[setOpenProp, open]
|
|
66
|
+
);
|
|
67
|
+
const toggleSidebar = useCallback(() => {
|
|
68
|
+
if (isMobile) {
|
|
69
|
+
setOpenMobile((prev) => !prev);
|
|
70
|
+
} else {
|
|
71
|
+
setOpen((prev) => !prev);
|
|
72
|
+
}
|
|
73
|
+
}, [isMobile, setOpen]);
|
|
74
|
+
useEffect(() => {
|
|
75
|
+
const handleKeyDown = (event) => {
|
|
76
|
+
if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
|
|
77
|
+
event.preventDefault();
|
|
78
|
+
toggleSidebar();
|
|
79
|
+
}
|
|
80
|
+
};
|
|
81
|
+
window.addEventListener("keydown", handleKeyDown);
|
|
82
|
+
return () => window.removeEventListener("keydown", handleKeyDown);
|
|
83
|
+
}, [toggleSidebar]);
|
|
84
|
+
const state = open ? "expanded" : "collapsed";
|
|
85
|
+
const contextValue = useMemo(
|
|
86
|
+
() => ({
|
|
87
|
+
state,
|
|
88
|
+
open,
|
|
89
|
+
setOpen,
|
|
90
|
+
isMobile,
|
|
91
|
+
openMobile,
|
|
92
|
+
setOpenMobile,
|
|
93
|
+
toggleSidebar
|
|
94
|
+
}),
|
|
95
|
+
[state, open, setOpen, isMobile, openMobile, toggleSidebar]
|
|
96
|
+
);
|
|
97
|
+
return /* @__PURE__ */ jsx(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ jsx(
|
|
98
|
+
"div",
|
|
99
|
+
{
|
|
100
|
+
"data-slot": "sidebar-wrapper",
|
|
101
|
+
style: {
|
|
102
|
+
["--sidebar-width"]: SIDEBAR_WIDTH,
|
|
103
|
+
["--sidebar-width-icon"]: SIDEBAR_WIDTH_ICON,
|
|
104
|
+
...typeof style === "object" && style !== null ? style : {}
|
|
105
|
+
},
|
|
106
|
+
class: cn(
|
|
107
|
+
"group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar",
|
|
108
|
+
className
|
|
109
|
+
),
|
|
110
|
+
...rest,
|
|
111
|
+
children
|
|
112
|
+
}
|
|
113
|
+
) }) });
|
|
114
|
+
};
|
|
115
|
+
var Sidebar = ({
|
|
116
|
+
side = "left",
|
|
117
|
+
variant = "sidebar",
|
|
118
|
+
collapsible = "offcanvas",
|
|
119
|
+
class: className,
|
|
120
|
+
children,
|
|
121
|
+
...rest
|
|
122
|
+
}) => {
|
|
123
|
+
const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
|
|
124
|
+
if (collapsible === "none") {
|
|
125
|
+
return /* @__PURE__ */ jsx(
|
|
126
|
+
"div",
|
|
127
|
+
{
|
|
128
|
+
"data-slot": "sidebar",
|
|
129
|
+
class: cn(
|
|
130
|
+
"flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground",
|
|
131
|
+
className
|
|
132
|
+
),
|
|
133
|
+
...rest,
|
|
134
|
+
children
|
|
135
|
+
}
|
|
136
|
+
);
|
|
137
|
+
}
|
|
138
|
+
if (isMobile) {
|
|
139
|
+
return /* @__PURE__ */ jsx(Sheet, { open: openMobile, onOpenChange: setOpenMobile, children: /* @__PURE__ */ jsxs(
|
|
140
|
+
SheetContent,
|
|
141
|
+
{
|
|
142
|
+
"data-sidebar": "sidebar",
|
|
143
|
+
"data-slot": "sidebar",
|
|
144
|
+
"data-mobile": "true",
|
|
145
|
+
class: cn(
|
|
146
|
+
"w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden",
|
|
147
|
+
className
|
|
148
|
+
),
|
|
149
|
+
style: { ["--sidebar-width"]: SIDEBAR_WIDTH_MOBILE },
|
|
150
|
+
side,
|
|
151
|
+
children: [
|
|
152
|
+
/* @__PURE__ */ jsxs(SheetHeader, { class: "sr-only", children: [
|
|
153
|
+
/* @__PURE__ */ jsx(DialogTitle, { children: "Sidebar" }),
|
|
154
|
+
/* @__PURE__ */ jsx(DialogDescription, { children: "Displays the mobile sidebar." })
|
|
155
|
+
] }),
|
|
156
|
+
/* @__PURE__ */ jsx("div", { class: "flex h-full w-full flex-col", children })
|
|
157
|
+
]
|
|
158
|
+
}
|
|
159
|
+
) });
|
|
160
|
+
}
|
|
161
|
+
return /* @__PURE__ */ jsxs(
|
|
162
|
+
"div",
|
|
163
|
+
{
|
|
164
|
+
class: "group peer hidden text-sidebar-foreground md:block",
|
|
165
|
+
"data-state": state,
|
|
166
|
+
"data-collapsible": state === "collapsed" ? collapsible : "",
|
|
167
|
+
"data-variant": variant,
|
|
168
|
+
"data-side": side,
|
|
169
|
+
"data-slot": "sidebar",
|
|
170
|
+
children: [
|
|
171
|
+
/* @__PURE__ */ jsx(
|
|
172
|
+
"div",
|
|
173
|
+
{
|
|
174
|
+
"data-slot": "sidebar-gap",
|
|
175
|
+
class: cn(
|
|
176
|
+
"relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
|
|
177
|
+
"group-data-[collapsible=offcanvas]:w-0",
|
|
178
|
+
"group-data-[side=right]:rotate-180",
|
|
179
|
+
variant === "floating" || variant === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
|
|
180
|
+
)
|
|
181
|
+
}
|
|
182
|
+
),
|
|
183
|
+
/* @__PURE__ */ jsx(
|
|
184
|
+
"div",
|
|
185
|
+
{
|
|
186
|
+
"data-slot": "sidebar-container",
|
|
187
|
+
class: cn(
|
|
188
|
+
"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
|
|
189
|
+
side === "left" ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]" : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
|
|
190
|
+
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",
|
|
191
|
+
className
|
|
192
|
+
),
|
|
193
|
+
...rest,
|
|
194
|
+
children: /* @__PURE__ */ jsx(
|
|
195
|
+
"div",
|
|
196
|
+
{
|
|
197
|
+
"data-sidebar": "sidebar",
|
|
198
|
+
"data-slot": "sidebar-inner",
|
|
199
|
+
class: "flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow-sm",
|
|
200
|
+
children
|
|
201
|
+
}
|
|
202
|
+
)
|
|
203
|
+
}
|
|
204
|
+
)
|
|
205
|
+
]
|
|
206
|
+
}
|
|
207
|
+
);
|
|
208
|
+
};
|
|
209
|
+
var SidebarContent = ({ class: className, children, ...rest }) => /* @__PURE__ */ jsx(
|
|
210
|
+
"div",
|
|
211
|
+
{
|
|
212
|
+
"data-slot": "sidebar-content",
|
|
213
|
+
"data-sidebar": "content",
|
|
214
|
+
class: cn(
|
|
215
|
+
"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
|
|
216
|
+
className
|
|
217
|
+
),
|
|
218
|
+
...rest,
|
|
219
|
+
children
|
|
220
|
+
}
|
|
221
|
+
);
|
|
222
|
+
var SidebarFooter = ({ class: className, children, ...rest }) => /* @__PURE__ */ jsx(
|
|
223
|
+
"div",
|
|
224
|
+
{
|
|
225
|
+
"data-slot": "sidebar-footer",
|
|
226
|
+
"data-sidebar": "footer",
|
|
227
|
+
class: cn("flex flex-col gap-2 p-2", className),
|
|
228
|
+
...rest,
|
|
229
|
+
children
|
|
230
|
+
}
|
|
231
|
+
);
|
|
232
|
+
var Slot = (props) => {
|
|
233
|
+
const { children, class: className, ...rest } = props;
|
|
234
|
+
if (!isValidElement(children)) return null;
|
|
235
|
+
const child = children;
|
|
236
|
+
const childProps = child.props ?? {};
|
|
237
|
+
return cloneElement(child, {
|
|
238
|
+
...rest,
|
|
239
|
+
...childProps,
|
|
240
|
+
class: cn(
|
|
241
|
+
className,
|
|
242
|
+
childProps.class,
|
|
243
|
+
childProps.className
|
|
244
|
+
)
|
|
245
|
+
});
|
|
246
|
+
};
|
|
247
|
+
var SidebarInput = ({ class: className, ...rest }) => /* @__PURE__ */ jsx(
|
|
248
|
+
Input,
|
|
249
|
+
{
|
|
250
|
+
"data-slot": "sidebar-input",
|
|
251
|
+
"data-sidebar": "input",
|
|
252
|
+
class: cn("h-8 w-full bg-background shadow-none", className),
|
|
253
|
+
...rest
|
|
254
|
+
}
|
|
255
|
+
);
|
|
256
|
+
var SidebarSeparator = ({ class: className, ...rest }) => /* @__PURE__ */ jsx(
|
|
257
|
+
Separator,
|
|
258
|
+
{
|
|
259
|
+
"data-slot": "sidebar-separator",
|
|
260
|
+
"data-sidebar": "separator",
|
|
261
|
+
class: cn("mx-2 w-auto bg-sidebar-border", className),
|
|
262
|
+
...rest
|
|
263
|
+
}
|
|
264
|
+
);
|
|
265
|
+
var SidebarGroup = ({ class: className, children, ...rest }) => /* @__PURE__ */ jsx(
|
|
266
|
+
"div",
|
|
267
|
+
{
|
|
268
|
+
"data-slot": "sidebar-group",
|
|
269
|
+
"data-sidebar": "group",
|
|
270
|
+
class: cn("relative flex w-full min-w-0 flex-col p-2", className),
|
|
271
|
+
...rest,
|
|
272
|
+
children
|
|
273
|
+
}
|
|
274
|
+
);
|
|
275
|
+
var SidebarGroupLabel = ({
|
|
276
|
+
class: className,
|
|
277
|
+
asChild = false,
|
|
278
|
+
children,
|
|
279
|
+
...rest
|
|
280
|
+
}) => {
|
|
281
|
+
const classes = cn(
|
|
282
|
+
"flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
|
|
283
|
+
"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
|
|
284
|
+
className
|
|
285
|
+
);
|
|
286
|
+
if (asChild) {
|
|
287
|
+
return /* @__PURE__ */ jsx(
|
|
288
|
+
Slot,
|
|
289
|
+
{
|
|
290
|
+
"data-slot": "sidebar-group-label",
|
|
291
|
+
"data-sidebar": "group-label",
|
|
292
|
+
class: classes,
|
|
293
|
+
...rest,
|
|
294
|
+
children
|
|
295
|
+
}
|
|
296
|
+
);
|
|
297
|
+
}
|
|
298
|
+
return /* @__PURE__ */ jsx("div", { "data-slot": "sidebar-group-label", "data-sidebar": "group-label", class: classes, ...rest, children });
|
|
299
|
+
};
|
|
300
|
+
var SidebarGroupAction = ({
|
|
301
|
+
class: className,
|
|
302
|
+
asChild = false,
|
|
303
|
+
children,
|
|
304
|
+
...rest
|
|
305
|
+
}) => {
|
|
306
|
+
const classes = cn(
|
|
307
|
+
"absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
|
|
308
|
+
"after:absolute after:-inset-2 md:after:hidden",
|
|
309
|
+
"group-data-[collapsible=icon]:hidden",
|
|
310
|
+
className
|
|
311
|
+
);
|
|
312
|
+
if (asChild) {
|
|
313
|
+
return /* @__PURE__ */ jsx(
|
|
314
|
+
Slot,
|
|
315
|
+
{
|
|
316
|
+
"data-slot": "sidebar-group-action",
|
|
317
|
+
"data-sidebar": "group-action",
|
|
318
|
+
class: classes,
|
|
319
|
+
...rest,
|
|
320
|
+
children
|
|
321
|
+
}
|
|
322
|
+
);
|
|
323
|
+
}
|
|
324
|
+
return /* @__PURE__ */ jsx(
|
|
325
|
+
"button",
|
|
326
|
+
{
|
|
327
|
+
type: "button",
|
|
328
|
+
"data-slot": "sidebar-group-action",
|
|
329
|
+
"data-sidebar": "group-action",
|
|
330
|
+
class: classes,
|
|
331
|
+
...rest,
|
|
332
|
+
children
|
|
333
|
+
}
|
|
334
|
+
);
|
|
335
|
+
};
|
|
336
|
+
var SidebarGroupContent = ({
|
|
337
|
+
class: className,
|
|
338
|
+
children,
|
|
339
|
+
...rest
|
|
340
|
+
}) => /* @__PURE__ */ jsx(
|
|
341
|
+
"div",
|
|
342
|
+
{
|
|
343
|
+
"data-slot": "sidebar-group-content",
|
|
344
|
+
"data-sidebar": "group-content",
|
|
345
|
+
class: cn("w-full text-sm", className),
|
|
346
|
+
...rest,
|
|
347
|
+
children
|
|
348
|
+
}
|
|
349
|
+
);
|
|
350
|
+
var SidebarHeader = ({ class: className, children, ...rest }) => /* @__PURE__ */ jsx(
|
|
351
|
+
"div",
|
|
352
|
+
{
|
|
353
|
+
"data-slot": "sidebar-header",
|
|
354
|
+
"data-sidebar": "header",
|
|
355
|
+
class: cn("flex flex-col gap-2 p-2", className),
|
|
356
|
+
...rest,
|
|
357
|
+
children
|
|
358
|
+
}
|
|
359
|
+
);
|
|
360
|
+
var SidebarInset = ({ class: className, children, ...rest }) => /* @__PURE__ */ jsx(
|
|
361
|
+
"main",
|
|
362
|
+
{
|
|
363
|
+
"data-slot": "sidebar-inset",
|
|
364
|
+
class: cn(
|
|
365
|
+
"relative flex w-full flex-1 flex-col bg-background",
|
|
366
|
+
"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",
|
|
367
|
+
className
|
|
368
|
+
),
|
|
369
|
+
...rest,
|
|
370
|
+
children
|
|
371
|
+
}
|
|
372
|
+
);
|
|
373
|
+
var SidebarMenu = ({ class: className, children, ...rest }) => /* @__PURE__ */ jsx(
|
|
374
|
+
"ul",
|
|
375
|
+
{
|
|
376
|
+
"data-slot": "sidebar-menu",
|
|
377
|
+
"data-sidebar": "menu",
|
|
378
|
+
class: cn("flex w-full min-w-0 flex-col gap-1", className),
|
|
379
|
+
...rest,
|
|
380
|
+
children
|
|
381
|
+
}
|
|
382
|
+
);
|
|
383
|
+
var SidebarMenuItem = ({ class: className, children, ...rest }) => /* @__PURE__ */ jsx(
|
|
384
|
+
"li",
|
|
385
|
+
{
|
|
386
|
+
"data-slot": "sidebar-menu-item",
|
|
387
|
+
"data-sidebar": "menu-item",
|
|
388
|
+
class: cn("group/menu-item relative", className),
|
|
389
|
+
...rest,
|
|
390
|
+
children
|
|
391
|
+
}
|
|
392
|
+
);
|
|
393
|
+
var sidebarMenuButton = tv({
|
|
394
|
+
base: [
|
|
395
|
+
"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding]",
|
|
396
|
+
"group-has-data-[sidebar=menu-action]/menu-item:pr-8",
|
|
397
|
+
"group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2!",
|
|
398
|
+
"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
|
|
399
|
+
"focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground",
|
|
400
|
+
"disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50",
|
|
401
|
+
"data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground",
|
|
402
|
+
"data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground",
|
|
403
|
+
"[&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0"
|
|
404
|
+
],
|
|
405
|
+
variants: {
|
|
406
|
+
variant: {
|
|
407
|
+
default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
|
|
408
|
+
outline: "bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]"
|
|
409
|
+
},
|
|
410
|
+
size: {
|
|
411
|
+
default: "h-8 text-sm",
|
|
412
|
+
sm: "h-7 text-xs",
|
|
413
|
+
lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!"
|
|
414
|
+
}
|
|
415
|
+
},
|
|
416
|
+
defaultVariants: {
|
|
417
|
+
variant: "default",
|
|
418
|
+
size: "default"
|
|
419
|
+
}
|
|
420
|
+
});
|
|
421
|
+
var SidebarMenuButton = ({
|
|
422
|
+
asChild = false,
|
|
423
|
+
isActive = false,
|
|
424
|
+
variant = "default",
|
|
425
|
+
size = "default",
|
|
426
|
+
tooltip,
|
|
427
|
+
class: className,
|
|
428
|
+
children,
|
|
429
|
+
...rest
|
|
430
|
+
}) => {
|
|
431
|
+
const { isMobile, state } = useSidebar();
|
|
432
|
+
const classes = sidebarMenuButton({
|
|
433
|
+
variant,
|
|
434
|
+
size,
|
|
435
|
+
class: className
|
|
436
|
+
});
|
|
437
|
+
const button = asChild ? /* @__PURE__ */ jsx(
|
|
438
|
+
Slot,
|
|
439
|
+
{
|
|
440
|
+
"data-slot": "sidebar-menu-button",
|
|
441
|
+
"data-sidebar": "menu-button",
|
|
442
|
+
"data-size": size,
|
|
443
|
+
"data-active": isActive,
|
|
444
|
+
class: classes,
|
|
445
|
+
...rest,
|
|
446
|
+
children
|
|
447
|
+
}
|
|
448
|
+
) : /* @__PURE__ */ jsx(
|
|
449
|
+
"button",
|
|
450
|
+
{
|
|
451
|
+
type: "button",
|
|
452
|
+
"data-slot": "sidebar-menu-button",
|
|
453
|
+
"data-sidebar": "menu-button",
|
|
454
|
+
"data-size": size,
|
|
455
|
+
"data-active": isActive,
|
|
456
|
+
class: classes,
|
|
457
|
+
...rest,
|
|
458
|
+
children
|
|
459
|
+
}
|
|
460
|
+
);
|
|
461
|
+
if (!tooltip) return button;
|
|
462
|
+
const tooltipProps = typeof tooltip === "string" ? { children: tooltip } : tooltip;
|
|
463
|
+
return /* @__PURE__ */ jsxs(Tooltip, { children: [
|
|
464
|
+
/* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: button }),
|
|
465
|
+
/* @__PURE__ */ jsx(
|
|
466
|
+
TooltipContent,
|
|
467
|
+
{
|
|
468
|
+
side: "right",
|
|
469
|
+
align: "center",
|
|
470
|
+
hidden: state !== "collapsed" || isMobile,
|
|
471
|
+
...tooltipProps
|
|
472
|
+
}
|
|
473
|
+
)
|
|
474
|
+
] });
|
|
475
|
+
};
|
|
476
|
+
var SidebarMenuAction = ({
|
|
477
|
+
class: className,
|
|
478
|
+
asChild = false,
|
|
479
|
+
showOnHover = false,
|
|
480
|
+
children,
|
|
481
|
+
...rest
|
|
482
|
+
}) => {
|
|
483
|
+
const classes = cn(
|
|
484
|
+
"absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform peer-hover/menu-button:text-sidebar-accent-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
|
|
485
|
+
"after:absolute after:-inset-2 md:after:hidden",
|
|
486
|
+
"peer-data-[size=sm]/menu-button:top-1",
|
|
487
|
+
"peer-data-[size=default]/menu-button:top-1.5",
|
|
488
|
+
"peer-data-[size=lg]/menu-button:top-2.5",
|
|
489
|
+
"group-data-[collapsible=icon]:hidden",
|
|
490
|
+
showOnHover && "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground data-[state=open]:opacity-100 md:opacity-0",
|
|
491
|
+
className
|
|
492
|
+
);
|
|
493
|
+
if (asChild) {
|
|
494
|
+
return /* @__PURE__ */ jsx(
|
|
495
|
+
Slot,
|
|
496
|
+
{
|
|
497
|
+
"data-slot": "sidebar-menu-action",
|
|
498
|
+
"data-sidebar": "menu-action",
|
|
499
|
+
class: classes,
|
|
500
|
+
...rest,
|
|
501
|
+
children
|
|
502
|
+
}
|
|
503
|
+
);
|
|
504
|
+
}
|
|
505
|
+
return /* @__PURE__ */ jsx(
|
|
506
|
+
"button",
|
|
507
|
+
{
|
|
508
|
+
type: "button",
|
|
509
|
+
"data-slot": "sidebar-menu-action",
|
|
510
|
+
"data-sidebar": "menu-action",
|
|
511
|
+
class: classes,
|
|
512
|
+
...rest,
|
|
513
|
+
children
|
|
514
|
+
}
|
|
515
|
+
);
|
|
516
|
+
};
|
|
517
|
+
var SidebarMenuBadge = ({
|
|
518
|
+
class: className,
|
|
519
|
+
children,
|
|
520
|
+
...rest
|
|
521
|
+
}) => /* @__PURE__ */ jsx(
|
|
522
|
+
"div",
|
|
523
|
+
{
|
|
524
|
+
"data-slot": "sidebar-menu-badge",
|
|
525
|
+
"data-sidebar": "menu-badge",
|
|
526
|
+
class: cn(
|
|
527
|
+
"pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none",
|
|
528
|
+
"peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
|
|
529
|
+
"peer-data-[size=sm]/menu-button:top-1",
|
|
530
|
+
"peer-data-[size=default]/menu-button:top-1.5",
|
|
531
|
+
"peer-data-[size=lg]/menu-button:top-2.5",
|
|
532
|
+
"group-data-[collapsible=icon]:hidden",
|
|
533
|
+
className
|
|
534
|
+
),
|
|
535
|
+
...rest,
|
|
536
|
+
children
|
|
537
|
+
}
|
|
538
|
+
);
|
|
539
|
+
var SidebarMenuSkeleton = ({
|
|
540
|
+
class: className,
|
|
541
|
+
showIcon = false,
|
|
542
|
+
...rest
|
|
543
|
+
}) => {
|
|
544
|
+
const width = useMemo(() => `${Math.floor(Math.random() * 40) + 50}%`, []);
|
|
545
|
+
return /* @__PURE__ */ jsxs(
|
|
546
|
+
"div",
|
|
547
|
+
{
|
|
548
|
+
"data-slot": "sidebar-menu-skeleton",
|
|
549
|
+
"data-sidebar": "menu-skeleton",
|
|
550
|
+
class: cn("flex h-8 items-center gap-2 rounded-md px-2", className),
|
|
551
|
+
...rest,
|
|
552
|
+
children: [
|
|
553
|
+
showIcon ? /* @__PURE__ */ jsx(Skeleton, { class: "size-4 rounded-md", "data-sidebar": "menu-skeleton-icon" }) : null,
|
|
554
|
+
/* @__PURE__ */ jsx(
|
|
555
|
+
Skeleton,
|
|
556
|
+
{
|
|
557
|
+
class: "h-4 max-w-(--skeleton-width) flex-1",
|
|
558
|
+
"data-sidebar": "menu-skeleton-text",
|
|
559
|
+
style: { ["--skeleton-width"]: width }
|
|
560
|
+
}
|
|
561
|
+
)
|
|
562
|
+
]
|
|
563
|
+
}
|
|
564
|
+
);
|
|
565
|
+
};
|
|
566
|
+
var SidebarMenuSub = ({ class: className, children, ...rest }) => /* @__PURE__ */ jsx(
|
|
567
|
+
"ul",
|
|
568
|
+
{
|
|
569
|
+
"data-slot": "sidebar-menu-sub",
|
|
570
|
+
"data-sidebar": "menu-sub",
|
|
571
|
+
class: cn(
|
|
572
|
+
"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",
|
|
573
|
+
"group-data-[collapsible=icon]:hidden",
|
|
574
|
+
className
|
|
575
|
+
),
|
|
576
|
+
...rest,
|
|
577
|
+
children
|
|
578
|
+
}
|
|
579
|
+
);
|
|
580
|
+
var SidebarMenuSubItem = ({
|
|
581
|
+
class: className,
|
|
582
|
+
children,
|
|
583
|
+
...rest
|
|
584
|
+
}) => /* @__PURE__ */ jsx(
|
|
585
|
+
"li",
|
|
586
|
+
{
|
|
587
|
+
"data-slot": "sidebar-menu-sub-item",
|
|
588
|
+
"data-sidebar": "menu-sub-item",
|
|
589
|
+
class: cn("group/menu-sub-item relative", className),
|
|
590
|
+
...rest,
|
|
591
|
+
children
|
|
592
|
+
}
|
|
593
|
+
);
|
|
594
|
+
var SidebarMenuSubButton = ({
|
|
595
|
+
asChild = false,
|
|
596
|
+
size = "md",
|
|
597
|
+
isActive = false,
|
|
598
|
+
class: className,
|
|
599
|
+
children,
|
|
600
|
+
...rest
|
|
601
|
+
}) => {
|
|
602
|
+
const classes = cn(
|
|
603
|
+
"flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
|
|
604
|
+
"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
|
|
605
|
+
size === "sm" && "text-xs",
|
|
606
|
+
size === "md" && "text-sm",
|
|
607
|
+
"group-data-[collapsible=icon]:hidden",
|
|
608
|
+
className
|
|
609
|
+
);
|
|
610
|
+
if (asChild) {
|
|
611
|
+
return /* @__PURE__ */ jsx(
|
|
612
|
+
Slot,
|
|
613
|
+
{
|
|
614
|
+
"data-slot": "sidebar-menu-sub-button",
|
|
615
|
+
"data-sidebar": "menu-sub-button",
|
|
616
|
+
"data-size": size,
|
|
617
|
+
"data-active": isActive,
|
|
618
|
+
class: classes,
|
|
619
|
+
...rest,
|
|
620
|
+
children
|
|
621
|
+
}
|
|
622
|
+
);
|
|
623
|
+
}
|
|
624
|
+
return /* @__PURE__ */ jsx(
|
|
625
|
+
"a",
|
|
626
|
+
{
|
|
627
|
+
"data-slot": "sidebar-menu-sub-button",
|
|
628
|
+
"data-sidebar": "menu-sub-button",
|
|
629
|
+
"data-size": size,
|
|
630
|
+
"data-active": isActive,
|
|
631
|
+
class: classes,
|
|
632
|
+
...rest,
|
|
633
|
+
children
|
|
634
|
+
}
|
|
635
|
+
);
|
|
636
|
+
};
|
|
637
|
+
var SidebarRail = ({ class: className, ...rest }) => {
|
|
638
|
+
const { toggleSidebar } = useSidebar();
|
|
639
|
+
return /* @__PURE__ */ jsx(
|
|
640
|
+
"button",
|
|
641
|
+
{
|
|
642
|
+
type: "button",
|
|
643
|
+
"data-sidebar": "rail",
|
|
644
|
+
"data-slot": "sidebar-rail",
|
|
645
|
+
"aria-label": "Toggle Sidebar",
|
|
646
|
+
tabIndex: -1,
|
|
647
|
+
onClick: toggleSidebar,
|
|
648
|
+
title: "Toggle Sidebar",
|
|
649
|
+
class: cn(
|
|
650
|
+
"absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex",
|
|
651
|
+
"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
|
|
652
|
+
"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
|
|
653
|
+
"group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar",
|
|
654
|
+
"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
|
|
655
|
+
"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
|
|
656
|
+
className
|
|
657
|
+
),
|
|
658
|
+
...rest
|
|
659
|
+
}
|
|
660
|
+
);
|
|
661
|
+
};
|
|
662
|
+
var PanelLeftIcon = (props) => /* @__PURE__ */ jsxs(
|
|
663
|
+
"svg",
|
|
664
|
+
{
|
|
665
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
666
|
+
width: "24",
|
|
667
|
+
height: "24",
|
|
668
|
+
viewBox: "0 0 24 24",
|
|
669
|
+
fill: "none",
|
|
670
|
+
stroke: "currentColor",
|
|
671
|
+
"stroke-width": "2",
|
|
672
|
+
"stroke-linecap": "round",
|
|
673
|
+
"stroke-linejoin": "round",
|
|
674
|
+
"aria-hidden": "true",
|
|
675
|
+
...props,
|
|
676
|
+
children: [
|
|
677
|
+
/* @__PURE__ */ jsx("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
|
|
678
|
+
/* @__PURE__ */ jsx("path", { d: "M9 3v18" })
|
|
679
|
+
]
|
|
680
|
+
}
|
|
681
|
+
);
|
|
682
|
+
var SidebarTrigger = ({ class: className, onClick, ...rest }) => {
|
|
683
|
+
const { toggleSidebar } = useSidebar();
|
|
684
|
+
return /* @__PURE__ */ jsxs(
|
|
685
|
+
Button,
|
|
686
|
+
{
|
|
687
|
+
"data-sidebar": "trigger",
|
|
688
|
+
"data-slot": "sidebar-trigger",
|
|
689
|
+
variant: "ghost",
|
|
690
|
+
size: "icon",
|
|
691
|
+
class: cn("size-7", className),
|
|
692
|
+
"aria-label": "Toggle Sidebar",
|
|
693
|
+
onClick: (event) => {
|
|
694
|
+
onClick?.(event);
|
|
695
|
+
toggleSidebar();
|
|
696
|
+
},
|
|
697
|
+
...rest,
|
|
698
|
+
children: [
|
|
699
|
+
/* @__PURE__ */ jsx(PanelLeftIcon, {}),
|
|
700
|
+
/* @__PURE__ */ jsx("span", { class: "sr-only", children: "Toggle Sidebar" })
|
|
701
|
+
]
|
|
702
|
+
}
|
|
703
|
+
);
|
|
704
|
+
};
|
|
705
|
+
|
|
706
|
+
// src/components/sidebar/index.ts
|
|
707
|
+
var sidebar_default = {
|
|
708
|
+
Provider: SidebarProvider,
|
|
709
|
+
Root: Sidebar,
|
|
710
|
+
Trigger: SidebarTrigger,
|
|
711
|
+
Header: SidebarHeader,
|
|
712
|
+
Content: SidebarContent,
|
|
713
|
+
Footer: SidebarFooter,
|
|
714
|
+
Inset: SidebarInset,
|
|
715
|
+
Rail: SidebarRail,
|
|
716
|
+
Group: SidebarGroup,
|
|
717
|
+
Menu: SidebarMenu
|
|
718
|
+
};
|
|
719
|
+
|
|
720
|
+
export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, sidebar_default, useSidebar };
|
|
721
|
+
//# sourceMappingURL=chunk-24QD2FTA.js.map
|
|
722
|
+
//# sourceMappingURL=chunk-24QD2FTA.js.map
|