@warmio/ui 1.3.0 → 1.5.2

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,749 +0,0 @@
1
- import {
2
- Button,
3
- Sheet,
4
- SheetContent,
5
- SheetDescription,
6
- SheetHeader,
7
- SheetTitle
8
- } from "./chunk-YTDMREDR.js";
9
- import {
10
- cn
11
- } from "./chunk-VIB7OX7D.js";
12
-
13
- // ../ui/src/warmio/sidebar.tsx
14
- import * as React6 from "react";
15
-
16
- // ../ui/src/components/sidebar.tsx
17
- import * as React4 from "react";
18
- import { cva } from "class-variance-authority";
19
-
20
- // ../ui/src/hooks/use-mobile.ts
21
- import * as React from "react";
22
- var MOBILE_BREAKPOINT = 768;
23
- function getIsMobileSnapshot() {
24
- return window.innerWidth < MOBILE_BREAKPOINT;
25
- }
26
- function getServerIsMobileSnapshot() {
27
- return false;
28
- }
29
- function subscribeToMobileChanges(onStoreChange) {
30
- const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
31
- mql.addEventListener("change", onStoreChange);
32
- return () => mql.removeEventListener("change", onStoreChange);
33
- }
34
- function useIsMobile() {
35
- return React.useSyncExternalStore(
36
- subscribeToMobileChanges,
37
- getIsMobileSnapshot,
38
- getServerIsMobileSnapshot
39
- );
40
- }
41
-
42
- // ../ui/src/lib/render-slot.tsx
43
- import * as React2 from "react";
44
- import { useRender } from "@base-ui/react/use-render";
45
- function RenderSlot({
46
- asChild = false,
47
- children,
48
- defaultTagName,
49
- render,
50
- ref,
51
- ...props
52
- }) {
53
- const resolvedRender = render ?? (asChild && React2.isValidElement(children) ? children : void 0);
54
- return useRender({
55
- defaultTagName,
56
- render: resolvedRender,
57
- ref,
58
- props: {
59
- ...props,
60
- children: resolvedRender ? void 0 : children
61
- }
62
- });
63
- }
64
-
65
- // ../ui/src/components/tooltip.tsx
66
- import * as React3 from "react";
67
- import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
68
- import { jsx, jsxs } from "react/jsx-runtime";
69
- function Tooltip(props) {
70
- return /* @__PURE__ */ jsx(TooltipPrimitive.Root, { ...props });
71
- }
72
- function TooltipTrigger({ asChild = false, children, render, ...props }) {
73
- const resolvedRender = render ?? (asChild && React3.isValidElement(children) ? children : void 0);
74
- return /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", render: resolvedRender, ...props, children: resolvedRender ? void 0 : children });
75
- }
76
- function TooltipContent({
77
- className,
78
- side = "top",
79
- align = "center",
80
- alignOffset = 0,
81
- sideOffset = 4,
82
- children,
83
- ...props
84
- }) {
85
- return /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(
86
- TooltipPrimitive.Positioner,
87
- {
88
- side,
89
- align,
90
- alignOffset,
91
- sideOffset,
92
- className: "isolate z-[var(--z-popover)]",
93
- children: /* @__PURE__ */ jsxs(
94
- TooltipPrimitive.Popup,
95
- {
96
- "data-slot": "tooltip-content",
97
- className: cn(
98
- "z-[var(--z-popover)] inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-lg bg-popover px-3 py-1.5 text-xs text-popover-foreground shadow-md ring-1 ring-foreground/10 has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-[calc(var(--z-popover)+1)] **:data-[slot=kbd]:rounded-lg data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
99
- className
100
- ),
101
- ...props,
102
- children: [
103
- children,
104
- /* @__PURE__ */ jsx(TooltipPrimitive.Arrow, { className: "z-[calc(var(--z-popover)+1)] size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-lg bg-popover fill-popover data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" })
105
- ]
106
- }
107
- )
108
- }
109
- ) });
110
- }
111
-
112
- // ../ui/src/components/sidebar.tsx
113
- import { MenuIcon, PanelLeftIcon } from "lucide-react";
114
- import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
115
- var SIDEBAR_COOKIE_NAME = "sidebar_state";
116
- var SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
117
- function readSidebarCookie() {
118
- const match = document.cookie.match(/(?:^|; )sidebar_state=(true|false)(?:;|$)/);
119
- if (!match) return null;
120
- return match[1] === "true";
121
- }
122
- var SIDEBAR_KEYBOARD_SHORTCUT = "b";
123
- var TABLET_ICON_SIDEBAR_QUERY = "(min-width: 768px) and (max-width: 1279px)";
124
- var getServerForceIconSidebarSnapshot = () => false;
125
- var SidebarContext = React4.createContext(null);
126
- function useSidebar() {
127
- const context = React4.use(SidebarContext);
128
- if (!context) {
129
- throw new Error("useSidebar must be used within a SidebarProvider.");
130
- }
131
- return context;
132
- }
133
- function useForceIconSidebar(forceIconAtTablet) {
134
- return React4.useSyncExternalStore(
135
- React4.useCallback(
136
- (onStoreChange) => {
137
- if (!forceIconAtTablet) return () => {
138
- };
139
- const mql = window.matchMedia(TABLET_ICON_SIDEBAR_QUERY);
140
- mql.addEventListener("change", onStoreChange);
141
- return () => mql.removeEventListener("change", onStoreChange);
142
- },
143
- [forceIconAtTablet]
144
- ),
145
- React4.useCallback(() => {
146
- if (!forceIconAtTablet) return false;
147
- return window.matchMedia(TABLET_ICON_SIDEBAR_QUERY).matches;
148
- }, [forceIconAtTablet]),
149
- getServerForceIconSidebarSnapshot
150
- );
151
- }
152
- function SidebarProvider({
153
- defaultOpen = true,
154
- open: openProp,
155
- onOpenChange: setOpenProp,
156
- className,
157
- style,
158
- forceIconAtTablet = false,
159
- allowUserCollapse = true,
160
- children,
161
- ...props
162
- }) {
163
- const isMobile = useIsMobile();
164
- const forceIcon = useForceIconSidebar(forceIconAtTablet);
165
- const [openMobile, setOpenMobile] = React4.useState(false);
166
- const [sidebarMotionEnabled, setSidebarMotionEnabled] = React4.useState(false);
167
- const [_open, _setOpen] = React4.useReducer(
168
- (_, nextOpen) => nextOpen,
169
- defaultOpen
170
- );
171
- React4.useLayoutEffect(() => {
172
- const stored = readSidebarCookie();
173
- if (stored === null) return;
174
- _setOpen(stored);
175
- }, []);
176
- const open = openProp ?? _open;
177
- const setOpen = React4.useCallback(
178
- (value) => {
179
- if (!allowUserCollapse) {
180
- return;
181
- }
182
- const openState = typeof value === "function" ? value(open) : value;
183
- if (setOpenProp) {
184
- setOpenProp(openState);
185
- } else {
186
- _setOpen(openState);
187
- }
188
- document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
189
- },
190
- [allowUserCollapse, setOpenProp, open]
191
- );
192
- const toggleSidebar = React4.useCallback(() => {
193
- if (!allowUserCollapse) {
194
- return;
195
- }
196
- setSidebarMotionEnabled(true);
197
- return isMobile ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
198
- }, [allowUserCollapse, isMobile, setOpen, setOpenMobile]);
199
- const toggleSidebarEvent = React4.useEffectEvent(toggleSidebar);
200
- React4.useEffect(() => {
201
- if (!allowUserCollapse) {
202
- return;
203
- }
204
- const handleKeyDown = (event) => {
205
- if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
206
- event.preventDefault();
207
- toggleSidebarEvent();
208
- }
209
- };
210
- window.addEventListener("keydown", handleKeyDown);
211
- return () => window.removeEventListener("keydown", handleKeyDown);
212
- }, [allowUserCollapse]);
213
- const state = forceIcon && !isMobile ? "collapsed" : open ? "expanded" : "collapsed";
214
- const contextValue = React4.useMemo(
215
- () => ({
216
- state,
217
- open,
218
- setOpen,
219
- isMobile,
220
- openMobile,
221
- setOpenMobile,
222
- toggleSidebar,
223
- sidebarMotionEnabled
224
- }),
225
- [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar, sidebarMotionEnabled]
226
- );
227
- return /* @__PURE__ */ jsx2(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx2(
228
- "div",
229
- {
230
- "data-slot": "sidebar-wrapper",
231
- style,
232
- className: cn(
233
- "group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar",
234
- className
235
- ),
236
- ...props,
237
- children
238
- }
239
- ) });
240
- }
241
- function Sidebar({
242
- side = "left",
243
- variant = "sidebar",
244
- collapsible = "offcanvas",
245
- className,
246
- children,
247
- dir,
248
- ...props
249
- }) {
250
- const { isMobile, state, openMobile, setOpenMobile, sidebarMotionEnabled } = useSidebar();
251
- const sidebarWidthMotionClassName = sidebarMotionEnabled ? "transition-[width] duration-300 ease-linear motion-reduce:transition-none" : null;
252
- const sidebarPositionMotionClassName = sidebarMotionEnabled ? "transition-[left,right,width] duration-300 ease-linear motion-reduce:transition-none" : null;
253
- if (collapsible === "none") {
254
- return /* @__PURE__ */ jsx2(
255
- "div",
256
- {
257
- "data-slot": "sidebar",
258
- className: cn(
259
- "flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground",
260
- className
261
- ),
262
- ...props,
263
- children
264
- }
265
- );
266
- }
267
- if (isMobile) {
268
- return /* @__PURE__ */ jsx2(Sheet, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: /* @__PURE__ */ jsxs2(
269
- SheetContent,
270
- {
271
- dir,
272
- "data-sidebar": "sidebar",
273
- "data-slot": "sidebar",
274
- "data-mobile": "true",
275
- className: "w-[var(--sidebar-width-mobile)] bg-sidebar p-0 text-sidebar-foreground dark:bg-card [&>button]:hidden",
276
- side,
277
- children: [
278
- /* @__PURE__ */ jsxs2(SheetHeader, { className: "sr-only", children: [
279
- /* @__PURE__ */ jsx2(SheetTitle, { children: "Sidebar" }),
280
- /* @__PURE__ */ jsx2(SheetDescription, { children: "Displays the mobile sidebar." })
281
- ] }),
282
- /* @__PURE__ */ jsx2("div", { className: "flex h-full w-full flex-col", children })
283
- ]
284
- }
285
- ) });
286
- }
287
- return /* @__PURE__ */ jsxs2(
288
- "div",
289
- {
290
- className: "group peer hidden text-sidebar-foreground md:block",
291
- "data-state": state,
292
- "data-collapsible": state === "collapsed" ? collapsible : "",
293
- "data-variant": variant,
294
- "data-side": side,
295
- "data-slot": "sidebar",
296
- children: [
297
- /* @__PURE__ */ jsx2(
298
- "div",
299
- {
300
- "data-slot": "sidebar-gap",
301
- className: cn(
302
- "relative w-(--sidebar-width) bg-transparent",
303
- sidebarWidthMotionClassName,
304
- "group-data-[collapsible=offcanvas]:w-0",
305
- "group-data-[side=right]:rotate-180",
306
- variant === "floating" || variant === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
307
- )
308
- }
309
- ),
310
- /* @__PURE__ */ jsx2(
311
- "div",
312
- {
313
- "data-slot": "sidebar-container",
314
- "data-side": side,
315
- className: cn(
316
- "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex",
317
- sidebarPositionMotionClassName,
318
- // Adjust the padding for floating and inset variants.
319
- 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",
320
- className
321
- ),
322
- ...props,
323
- children: /* @__PURE__ */ jsx2(
324
- "div",
325
- {
326
- "data-sidebar": "sidebar",
327
- "data-slot": "sidebar-inner",
328
- className: "flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border",
329
- children
330
- }
331
- )
332
- }
333
- )
334
- ]
335
- }
336
- );
337
- }
338
- function SidebarTrigger({ className, onClick, ...props }) {
339
- const { isMobile, toggleSidebar } = useSidebar();
340
- return /* @__PURE__ */ jsxs2(
341
- Button,
342
- {
343
- "data-sidebar": "trigger",
344
- "data-slot": "sidebar-trigger",
345
- variant: "ghost",
346
- size: "icon-sm",
347
- className: cn(className),
348
- onClick: (event) => {
349
- onClick?.(event);
350
- toggleSidebar();
351
- },
352
- ...props,
353
- children: [
354
- isMobile ? /* @__PURE__ */ jsx2(MenuIcon, {}) : /* @__PURE__ */ jsx2(PanelLeftIcon, {}),
355
- /* @__PURE__ */ jsx2("span", { className: "sr-only", children: "Toggle Sidebar" })
356
- ]
357
- }
358
- );
359
- }
360
- function SidebarInset({ className, ...props }) {
361
- return /* @__PURE__ */ jsx2(
362
- "main",
363
- {
364
- "data-slot": "sidebar-inset",
365
- className: cn(
366
- "relative flex w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
367
- className
368
- ),
369
- ...props
370
- }
371
- );
372
- }
373
- function SidebarHeader({ className, ...props }) {
374
- return /* @__PURE__ */ jsx2(
375
- "div",
376
- {
377
- "data-slot": "sidebar-header",
378
- "data-sidebar": "header",
379
- className: cn("flex flex-col gap-2 p-2", className),
380
- ...props
381
- }
382
- );
383
- }
384
- function SidebarFooter({ className, ...props }) {
385
- return /* @__PURE__ */ jsx2(
386
- "div",
387
- {
388
- "data-slot": "sidebar-footer",
389
- "data-sidebar": "footer",
390
- className: cn("flex flex-col gap-2 p-2", className),
391
- ...props
392
- }
393
- );
394
- }
395
- function SidebarContent({ className, ...props }) {
396
- return /* @__PURE__ */ jsx2(
397
- "div",
398
- {
399
- "data-slot": "sidebar-content",
400
- "data-sidebar": "content",
401
- className: cn(
402
- "no-scrollbar flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
403
- className
404
- ),
405
- ...props
406
- }
407
- );
408
- }
409
- function SidebarGroup({ className, ...props }) {
410
- return /* @__PURE__ */ jsx2(
411
- "div",
412
- {
413
- "data-slot": "sidebar-group",
414
- "data-sidebar": "group",
415
- className: cn("relative flex w-full min-w-0 flex-col p-2", className),
416
- ...props
417
- }
418
- );
419
- }
420
- function SidebarGroupLabel({
421
- className,
422
- asChild = false,
423
- render,
424
- ...props
425
- }) {
426
- return /* @__PURE__ */ jsx2(
427
- RenderSlot,
428
- {
429
- defaultTagName: "div",
430
- asChild,
431
- render,
432
- "data-slot": "sidebar-group-label",
433
- "data-sidebar": "group-label",
434
- className: cn(
435
- "flex h-8 shrink-0 items-center rounded-lg px-2 text-xs font-bold text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:mt-0 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
436
- className
437
- ),
438
- ...props
439
- }
440
- );
441
- }
442
- function SidebarGroupContent({ className, ...props }) {
443
- return /* @__PURE__ */ jsx2(
444
- "div",
445
- {
446
- "data-slot": "sidebar-group-content",
447
- "data-sidebar": "group-content",
448
- className: cn("w-full text-sm", className),
449
- ...props
450
- }
451
- );
452
- }
453
- var sidebarMenuSpacingClassName = {
454
- default: "gap-2",
455
- roomy: "gap-2"
456
- };
457
- function SidebarMenu({ className, spacing = "default", ...props }) {
458
- return /* @__PURE__ */ jsx2(
459
- "ul",
460
- {
461
- "data-slot": "sidebar-menu",
462
- "data-sidebar": "menu",
463
- className: cn(
464
- "flex w-full min-w-0 flex-col",
465
- sidebarMenuSpacingClassName[spacing],
466
- className
467
- ),
468
- ...props
469
- }
470
- );
471
- }
472
- function SidebarMenuItem({ className, ...props }) {
473
- return /* @__PURE__ */ jsx2(
474
- "li",
475
- {
476
- "data-slot": "sidebar-menu-item",
477
- "data-sidebar": "menu-item",
478
- className: cn("group/menu-item relative", className),
479
- ...props
480
- }
481
- );
482
- }
483
- var sidebarMenuButtonVariants = cva(
484
- "peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-lg p-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-4 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 focus-visible:ring-inset active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:font-bold data-active:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate",
485
- {
486
- variants: {
487
- variant: {
488
- default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
489
- outline: "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]"
490
- },
491
- size: {
492
- default: "h-8 text-sm",
493
- sm: "h-7 text-xs",
494
- lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!"
495
- }
496
- },
497
- defaultVariants: {
498
- variant: "default",
499
- size: "default"
500
- }
501
- }
502
- );
503
- function SidebarMenuButton({
504
- asChild = false,
505
- isActive = false,
506
- variant = "default",
507
- size = "default",
508
- tooltip,
509
- className,
510
- render,
511
- ...props
512
- }) {
513
- const { isMobile, state } = useSidebar();
514
- const button = /* @__PURE__ */ jsx2(
515
- RenderSlot,
516
- {
517
- defaultTagName: "button",
518
- asChild,
519
- render,
520
- "data-slot": "sidebar-menu-button",
521
- "data-sidebar": "menu-button",
522
- "data-size": size,
523
- "data-active": isActive ? "" : void 0,
524
- className: cn(sidebarMenuButtonVariants({ variant, size }), className),
525
- ...props
526
- }
527
- );
528
- if (!tooltip) {
529
- return button;
530
- }
531
- if (typeof tooltip === "string") {
532
- tooltip = {
533
- children: tooltip
534
- };
535
- }
536
- return /* @__PURE__ */ jsxs2(Tooltip, { children: [
537
- /* @__PURE__ */ jsx2(TooltipTrigger, { asChild: true, children: button }),
538
- /* @__PURE__ */ jsx2(
539
- TooltipContent,
540
- {
541
- side: "right",
542
- align: "center",
543
- hidden: state !== "collapsed" || isMobile,
544
- ...tooltip
545
- }
546
- )
547
- ] });
548
- }
549
- function SidebarMenuBadge({ className, ...props }) {
550
- return /* @__PURE__ */ jsx2(
551
- "div",
552
- {
553
- "data-slot": "sidebar-menu-badge",
554
- "data-sidebar": "menu-badge",
555
- className: cn(
556
- "pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-lg px-2 text-xs font-bold text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-accent-foreground",
557
- className
558
- ),
559
- ...props
560
- }
561
- );
562
- }
563
-
564
- // ../ui/src/warmio/sidebar-compositions.tsx
565
- import * as React5 from "react";
566
- import { ChevronUp, UserRound } from "lucide-react";
567
- import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
568
- function SidebarBrand({ actions, collapsed, expanded }) {
569
- return /* @__PURE__ */ jsxs3("div", { className: "flex w-full items-center justify-between gap-2 px-2 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:px-0", children: [
570
- React5.cloneElement(expanded, {
571
- className: "flex shrink-0 items-center text-sidebar-foreground transition-colors hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:hidden"
572
- }),
573
- React5.cloneElement(collapsed, {
574
- className: "hidden size-8 shrink-0 items-center justify-center rounded-lg text-sidebar-foreground transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 focus-visible:ring-sidebar-ring focus-visible:outline-hidden group-data-[collapsible=icon]:flex"
575
- }),
576
- actions ? /* @__PURE__ */ jsx3("div", { className: "flex items-center gap-2 group-data-[collapsible=icon]:hidden", children: actions }) : null
577
- ] });
578
- }
579
- var SidebarAccountTrigger = React5.forwardRef(function SidebarAccountTrigger2({ avatar, className: _className, email, label, style: _style, ...props }, ref) {
580
- return /* @__PURE__ */ jsxs3(SidebarMenuButton2, { ...props, ref, presentation: "account", children: [
581
- /* @__PURE__ */ jsx3("div", { className: "grid size-8 shrink-0 place-items-center rounded-lg bg-sidebar-primary text-xs font-bold text-sidebar-primary-foreground group-data-[collapsible=icon]:size-8 group-data-[collapsible=icon]:rounded-full", children: avatar ?? /* @__PURE__ */ jsx3(UserRound, { className: "size-4", "aria-hidden": "true" }) }),
582
- /* @__PURE__ */ jsxs3("div", { className: "min-w-0 flex-1 text-left group-data-[collapsible=icon]:hidden", children: [
583
- /* @__PURE__ */ jsx3("div", { className: "truncate text-sm font-bold", title: label, children: label }),
584
- /* @__PURE__ */ jsx3("div", { className: "truncate text-xs text-sidebar-foreground/60", title: email, children: email })
585
- ] }),
586
- /* @__PURE__ */ jsx3(ChevronUp, { className: "ml-auto size-4 group-data-[collapsible=icon]:hidden" })
587
- ] });
588
- });
589
- SidebarAccountTrigger.displayName = "WarmSidebarAccountTrigger";
590
-
591
- // ../ui/src/warmio/sidebar.tsx
592
- import { jsx as jsx4 } from "react/jsx-runtime";
593
- function SidebarProvider2({
594
- className: _className,
595
- presentation,
596
- style: _style,
597
- ...props
598
- }) {
599
- const presentationClassName = presentation === "mockup" ? "min-h-0 [--sidebar-width:16rem]" : presentation === "preview" ? "min-h-full" : void 0;
600
- return /* @__PURE__ */ jsx4(SidebarProvider, { ...props, className: presentationClassName });
601
- }
602
- function Sidebar2({
603
- className: _className,
604
- presentation,
605
- style: _style,
606
- ...props
607
- }) {
608
- return /* @__PURE__ */ jsx4(
609
- Sidebar,
610
- {
611
- ...props,
612
- className: presentation === "product" ? "border-r border-border" : void 0
613
- }
614
- );
615
- }
616
- function SidebarInset2({
617
- className: _className,
618
- presentation,
619
- style: _style,
620
- ...props
621
- }) {
622
- return /* @__PURE__ */ jsx4(SidebarInset, { ...props, className: presentation === "product" ? "min-w-0" : void 0 });
623
- }
624
- function SidebarHeader2({
625
- className: _className,
626
- presentation,
627
- style: _style,
628
- ...props
629
- }) {
630
- const className = presentation === "product" ? "h-[var(--header-height)] justify-center border-b border-border p-2" : presentation === "mockup" ? "h-14 justify-center border-b border-border p-2" : void 0;
631
- return /* @__PURE__ */ jsx4(SidebarHeader, { ...props, className });
632
- }
633
- function SidebarContent2({
634
- className: _className,
635
- presentation,
636
- style: _style,
637
- ...props
638
- }) {
639
- const className = presentation === "product" ? "pb-0" : presentation === "mockup" ? "px-2 py-4" : void 0;
640
- return /* @__PURE__ */ jsx4(SidebarContent, { ...props, className });
641
- }
642
- function SidebarFooter2({
643
- className: _className,
644
- presentation,
645
- style: _style,
646
- ...props
647
- }) {
648
- const className = presentation === "product" ? "border-t border-border p-2" : presentation === "collapsedUtilities" ? "hidden border-t border-border p-2 group-data-[collapsible=icon]:flex group-data-[collapsible=icon]:flex-col group-data-[collapsible=icon]:items-center" : void 0;
649
- return /* @__PURE__ */ jsx4(SidebarFooter, { ...props, className });
650
- }
651
- function SidebarGroup2({
652
- className: _className,
653
- collapsed = false,
654
- presentation,
655
- style: _style,
656
- ...props
657
- }) {
658
- const className = presentation === "navigation" || presentation === "navigation-primary" ? `${collapsed ? "items-center " : ""}${presentation === "navigation-primary" ? "px-2 pt-4 pb-2" : "px-2 py-2"}` : presentation === "mockup" ? "py-2" : void 0;
659
- return /* @__PURE__ */ jsx4(SidebarGroup, { ...props, className });
660
- }
661
- function SidebarGroupContent2({
662
- className: _className,
663
- style: _style,
664
- ...props
665
- }) {
666
- return /* @__PURE__ */ jsx4(SidebarGroupContent, { ...props });
667
- }
668
- function SidebarGroupLabel2({
669
- className: _className,
670
- presentation,
671
- style: _style,
672
- ...props
673
- }) {
674
- const className = presentation === "navigation" ? "px-2 tabular-nums text-xs uppercase tracking-wider text-sidebar-foreground/60" : presentation === "mockup" ? "uppercase tracking-wider" : void 0;
675
- return /* @__PURE__ */ jsx4(SidebarGroupLabel, { ...props, className });
676
- }
677
- function SidebarMenu2({ className: _className, style: _style, ...props }) {
678
- return /* @__PURE__ */ jsx4(SidebarMenu, { ...props });
679
- }
680
- function SidebarMenuItem2({
681
- className: _className,
682
- style: _style,
683
- ...props
684
- }) {
685
- return /* @__PURE__ */ jsx4(SidebarMenuItem, { ...props });
686
- }
687
- var SidebarMenuButton2 = React6.forwardRef(
688
- function SidebarMenuButton3({ className: _className, collapsed = false, disabled, presentation, style: _style, ...props }, ref) {
689
- return /* @__PURE__ */ jsx4(
690
- SidebarMenuButton,
691
- {
692
- ...props,
693
- disabled,
694
- ref,
695
- className: cn(
696
- (collapsed || presentation === "previewCollapsed") && "mx-auto size-8 gap-0 p-2",
697
- presentation === "account" && "h-12 group-data-[collapsible=icon]:mx-auto group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:gap-0! group-data-[collapsible=icon]:p-0!",
698
- presentation === "navigation" && "text-sidebar-foreground hover:text-sidebar-foreground active:text-sidebar-foreground data-open:hover:text-sidebar-foreground data-active:text-sidebar-foreground",
699
- (disabled || presentation === "disabled") && "text-muted-foreground/60"
700
- )
701
- }
702
- );
703
- }
704
- );
705
- SidebarMenuButton2.displayName = "WarmSidebarMenuButton";
706
- function SidebarMenuBadge2({
707
- className: _className,
708
- presentation,
709
- style: _style,
710
- ...props
711
- }) {
712
- return /* @__PURE__ */ jsx4(
713
- SidebarMenuBadge,
714
- {
715
- ...props,
716
- className: cn(
717
- "text-sidebar-foreground peer-hover/menu-button:text-sidebar-foreground peer-data-active/menu-button:text-sidebar-foreground",
718
- presentation === "attention" && "animate-pulse"
719
- )
720
- }
721
- );
722
- }
723
- function SidebarTrigger2({
724
- className: _className,
725
- style: _style,
726
- ...props
727
- }) {
728
- return /* @__PURE__ */ jsx4(SidebarTrigger, { ...props });
729
- }
730
-
731
- export {
732
- useSidebar,
733
- SidebarBrand,
734
- SidebarAccountTrigger,
735
- SidebarProvider2 as SidebarProvider,
736
- Sidebar2 as Sidebar,
737
- SidebarInset2 as SidebarInset,
738
- SidebarHeader2 as SidebarHeader,
739
- SidebarContent2 as SidebarContent,
740
- SidebarFooter2 as SidebarFooter,
741
- SidebarGroup2 as SidebarGroup,
742
- SidebarGroupContent2 as SidebarGroupContent,
743
- SidebarGroupLabel2 as SidebarGroupLabel,
744
- SidebarMenu2 as SidebarMenu,
745
- SidebarMenuItem2 as SidebarMenuItem,
746
- SidebarMenuButton2 as SidebarMenuButton,
747
- SidebarMenuBadge2 as SidebarMenuBadge,
748
- SidebarTrigger2 as SidebarTrigger
749
- };