@warmio/ui 1.4.0 → 2.0.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.
Files changed (51) hide show
  1. package/LICENSES/fluid-functionalism.txt +24 -0
  2. package/README.md +23 -14
  3. package/dist/badge.js +2 -2
  4. package/dist/button.js +4 -1
  5. package/dist/chunks/chunk-A2PN77YE.js +42 -0
  6. package/dist/chunks/chunk-DHV2A22F.js +240 -0
  7. package/dist/chunks/chunk-DOOSH3V6.js +72 -0
  8. package/dist/chunks/chunk-EIEA5RJJ.js +97 -0
  9. package/dist/chunks/chunk-FKGHMPVW.js +875 -0
  10. package/dist/chunks/chunk-K36HD5J5.js +133 -0
  11. package/dist/chunks/chunk-L6L3GVGM.js +130 -0
  12. package/dist/chunks/chunk-MGX6ZL6Q.js +224 -0
  13. package/dist/chunks/chunk-MVUHHKBL.js +492 -0
  14. package/dist/chunks/chunk-PJUNSOJK.js +116 -0
  15. package/dist/chunks/chunk-RVVHR7RY.js +0 -0
  16. package/dist/chunks/chunk-U7D32UN3.js +0 -0
  17. package/dist/chunks/chunk-W24JGQWM.js +65 -0
  18. package/dist/dropdown-menu.js +4 -3
  19. package/dist/entries/badge.css +178 -0
  20. package/dist/entries/button.css +422 -0
  21. package/dist/entries/dropdown-menu.css +167 -0
  22. package/dist/entries/index.css +2789 -0
  23. package/dist/entries/logo.css +147 -0
  24. package/dist/entries/product-header.css +88 -0
  25. package/dist/entries/sheet.css +666 -0
  26. package/dist/entries/sidebar.css +2108 -0
  27. package/dist/entries/text.css +97 -0
  28. package/dist/index.js +17 -13
  29. package/dist/logo.js +2 -2
  30. package/dist/product-header.js +2 -2
  31. package/dist/product-header.types.d.ts +3 -2
  32. package/dist/sheet.js +5 -3
  33. package/dist/sidebar.css +129 -0
  34. package/dist/sidebar.js +7 -3
  35. package/dist/text.css +121 -0
  36. package/dist/text.js +2 -2
  37. package/package.json +15 -5
  38. package/types/badge.d.ts +10 -2
  39. package/types/button.d.ts +65 -9
  40. package/types/sidebar.d.ts +10 -2
  41. package/types/text.d.ts +10 -2
  42. package/dist/chunks/chunk-4RQCHKAW.js +0 -105
  43. package/dist/chunks/chunk-FW2EHGRK.js +0 -748
  44. package/dist/chunks/chunk-GKEYV2XW.js +0 -10
  45. package/dist/chunks/chunk-HDCV4ACN.js +0 -469
  46. package/dist/chunks/chunk-ICC7GQXS.js +0 -74
  47. package/dist/chunks/chunk-KN6WVLCR.js +0 -261
  48. package/dist/chunks/chunk-MIMC4M6W.js +0 -86
  49. package/dist/chunks/chunk-PBWF6BDE.js +0 -88
  50. package/dist/chunks/chunk-VIB7OX7D.js +0 -10
  51. package/dist/chunks/chunk-YTDMREDR.js +0 -201
@@ -0,0 +1,875 @@
1
+ import {
2
+ Button
3
+ } from "./chunk-L6L3GVGM.js";
4
+ import {
5
+ FluidMenuHighlights
6
+ } from "./chunk-DHV2A22F.js";
7
+ import {
8
+ Sheet,
9
+ SheetContent,
10
+ SheetDescription,
11
+ SheetHeader,
12
+ SheetTitle
13
+ } from "./chunk-EIEA5RJJ.js";
14
+ import {
15
+ FluidOverlay
16
+ } from "./chunk-K36HD5J5.js";
17
+
18
+ // ../ui/src/warmio/sidebar/sidebar.tsx
19
+ import * as React6 from "react";
20
+
21
+ // ../ui/src/components/sidebar.tsx
22
+ import * as React4 from "react";
23
+ import { flushSync } from "react-dom";
24
+
25
+ // ../ui/src/hooks/use-mobile.ts
26
+ import * as React from "react";
27
+ var MOBILE_BREAKPOINT = 768;
28
+ function getIsMobileSnapshot() {
29
+ return window.innerWidth < MOBILE_BREAKPOINT;
30
+ }
31
+ function getServerIsMobileSnapshot() {
32
+ return false;
33
+ }
34
+ function subscribeToMobileChanges(onStoreChange) {
35
+ const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
36
+ mql.addEventListener("change", onStoreChange);
37
+ return () => mql.removeEventListener("change", onStoreChange);
38
+ }
39
+ function useIsMobile() {
40
+ return React.useSyncExternalStore(
41
+ subscribeToMobileChanges,
42
+ getIsMobileSnapshot,
43
+ getServerIsMobileSnapshot
44
+ );
45
+ }
46
+
47
+ // ../ui/src/lib/render-slot.tsx
48
+ import * as React2 from "react";
49
+ import { useRender } from "@base-ui/react/use-render";
50
+ function RenderSlot({
51
+ asChild = false,
52
+ children,
53
+ defaultTagName,
54
+ render,
55
+ ref,
56
+ ...props
57
+ }) {
58
+ const resolvedRender = render ?? (asChild && React2.isValidElement(children) ? children : void 0);
59
+ return useRender({
60
+ defaultTagName,
61
+ render: resolvedRender,
62
+ ref,
63
+ props: {
64
+ ...props,
65
+ children: resolvedRender ? void 0 : children
66
+ }
67
+ });
68
+ }
69
+
70
+ // ../ui/src/warmio/tooltip/tooltip.tsx
71
+ import * as React3 from "react";
72
+ import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
73
+
74
+ // ../ui/src/types/tooltip.types.ts
75
+ var TOOLTIP_EXIT_DURATION_MS = 0;
76
+
77
+ // ../ui/src/warmio/tooltip/tooltip.tsx
78
+ import { jsx, jsxs } from "react/jsx-runtime";
79
+ function Tooltip({
80
+ delay: _delay,
81
+ closeDelay: _closeDelay,
82
+ followCursor,
83
+ ...props
84
+ }) {
85
+ return /* @__PURE__ */ jsx(
86
+ TooltipPrimitive.Root,
87
+ {
88
+ ...props,
89
+ trackCursorAxis: followCursor ?? "none",
90
+ disableHoverablePopup: true
91
+ }
92
+ );
93
+ }
94
+ function TooltipTrigger({
95
+ asChild = false,
96
+ children,
97
+ render,
98
+ className: _className,
99
+ style: _style,
100
+ delay: _delay,
101
+ closeDelay: _closeDelay,
102
+ ...props
103
+ }) {
104
+ const resolvedRender = render ?? (asChild && React3.isValidElement(children) ? children : void 0);
105
+ return /* @__PURE__ */ jsx(
106
+ TooltipPrimitive.Trigger,
107
+ {
108
+ "data-slot": "tooltip-trigger",
109
+ render: resolvedRender,
110
+ ...props,
111
+ closeDelay: TOOLTIP_EXIT_DURATION_MS,
112
+ children: resolvedRender ? void 0 : children
113
+ }
114
+ );
115
+ }
116
+ function TooltipContent({
117
+ side = "top",
118
+ align = "center",
119
+ alignOffset = 0,
120
+ sideOffset = 4,
121
+ children,
122
+ ref,
123
+ render,
124
+ className: _className,
125
+ style: _style,
126
+ ...props
127
+ }) {
128
+ return /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(
129
+ TooltipPrimitive.Positioner,
130
+ {
131
+ side,
132
+ align,
133
+ alignOffset,
134
+ sideOffset,
135
+ "data-slot": "tooltip-positioner",
136
+ children: /* @__PURE__ */ jsxs(
137
+ TooltipPrimitive.Popup,
138
+ {
139
+ ...props,
140
+ ref,
141
+ "data-slot": "tooltip-content",
142
+ render: (popupProps, state) => /* @__PURE__ */ jsx(
143
+ FluidOverlay,
144
+ {
145
+ props: popupProps,
146
+ state,
147
+ render,
148
+ motion: "tooltip",
149
+ side: state.side,
150
+ tier: "fast"
151
+ }
152
+ ),
153
+ children: [
154
+ /* @__PURE__ */ jsx("div", { "data-slot": "tooltip-body", children }),
155
+ /* @__PURE__ */ jsx(TooltipPrimitive.Arrow, { "data-slot": "tooltip-arrow" })
156
+ ]
157
+ }
158
+ )
159
+ }
160
+ ) });
161
+ }
162
+
163
+ // ../ui/src/components/sidebar.tsx
164
+ import { MenuIcon, PanelLeftIcon } from "lucide-react";
165
+ import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
166
+ var SIDEBAR_COOKIE_NAME = "sidebar_state";
167
+ var SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
168
+ function readSidebarCookie(cookie) {
169
+ const match = cookie.match(/(?:^|; )sidebar_state=(true|false)(?:;|$)/);
170
+ if (!match) return null;
171
+ return match[1] === "true";
172
+ }
173
+ var SIDEBAR_KEYBOARD_SHORTCUT = "b";
174
+ var SIDEBAR_HOVER_CLOSE_DELAY_MS = 200;
175
+ function isSidebarHoverRetentionTarget(target) {
176
+ if (!(target instanceof Element)) {
177
+ return false;
178
+ }
179
+ return Boolean(
180
+ target.closest(
181
+ '[data-slot="sidebar-container"], [data-radix-popper-content-wrapper], [data-slot="dropdown-menu-content"], [data-sidebar-collapsed-popover="true"]'
182
+ )
183
+ );
184
+ }
185
+ var SidebarContext = React4.createContext(null);
186
+ function useSidebar() {
187
+ const context = React4.use(SidebarContext);
188
+ if (!context) {
189
+ throw new Error("useSidebar must be used within a SidebarProvider.");
190
+ }
191
+ return context;
192
+ }
193
+ function SidebarProvider({
194
+ defaultOpen = true,
195
+ open: openProp,
196
+ onOpenChange: setOpenProp,
197
+ className,
198
+ style,
199
+ forceIconAtTablet = false,
200
+ allowUserCollapse = true,
201
+ allowDesktopCollapse = allowUserCollapse,
202
+ expandOnHover = false,
203
+ children,
204
+ ...props
205
+ }) {
206
+ const isMobile = useIsMobile();
207
+ const [openMobile, setOpenMobile] = React4.useState(false);
208
+ const [hoverExpanded, setHoverExpandedState] = React4.useState(false);
209
+ const [sidebarMotionEnabled, setSidebarMotionEnabled] = React4.useState(expandOnHover);
210
+ const [_open, _setOpen] = React4.useReducer(
211
+ (_, nextOpen) => nextOpen,
212
+ defaultOpen
213
+ );
214
+ const cookieHydratedRef = React4.useRef(false);
215
+ const sidebarWrapperRef = React4.useRef(null);
216
+ const hydrateSidebarCookie = (node) => {
217
+ sidebarWrapperRef.current = node;
218
+ };
219
+ React4.useLayoutEffect(() => {
220
+ if (expandOnHover || !allowDesktopCollapse || cookieHydratedRef.current) return;
221
+ const stored = readSidebarCookie(document.cookie);
222
+ if (stored === null) return;
223
+ cookieHydratedRef.current = true;
224
+ _setOpen(stored);
225
+ }, [allowDesktopCollapse, expandOnHover]);
226
+ const open = openProp ?? _open;
227
+ const setOpen = React4.useCallback(
228
+ (openState) => {
229
+ if (!allowDesktopCollapse) {
230
+ return;
231
+ }
232
+ if (setOpenProp) {
233
+ setOpenProp(openState);
234
+ } else {
235
+ _setOpen(openState);
236
+ }
237
+ document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
238
+ },
239
+ [allowDesktopCollapse, setOpenProp]
240
+ );
241
+ const setHoverExpanded = React4.useCallback(
242
+ (expanded) => {
243
+ if (!expandOnHover) {
244
+ return;
245
+ }
246
+ setHoverExpandedState(expanded);
247
+ },
248
+ [expandOnHover]
249
+ );
250
+ const toggleSidebar = React4.useCallback(() => {
251
+ if (!allowUserCollapse) {
252
+ return;
253
+ }
254
+ if (isMobile) {
255
+ setSidebarMotionEnabled(true);
256
+ return setOpenMobile((open2) => !open2);
257
+ }
258
+ if (!allowDesktopCollapse || expandOnHover) {
259
+ return;
260
+ }
261
+ setSidebarMotionEnabled(true);
262
+ return setOpen(!open);
263
+ }, [allowDesktopCollapse, allowUserCollapse, expandOnHover, isMobile, open, setOpen]);
264
+ let state = open ? "expanded" : "collapsed";
265
+ if (expandOnHover && isMobile === false) {
266
+ state = hoverExpanded ? "expanded" : "collapsed";
267
+ }
268
+ const toggleSidebarEvent = React4.useEffectEvent(toggleSidebar);
269
+ const contextValue = React4.useMemo(
270
+ () => ({
271
+ state,
272
+ open,
273
+ setOpen,
274
+ isMobile,
275
+ openMobile,
276
+ setOpenMobile,
277
+ toggleSidebar,
278
+ sidebarMotionEnabled,
279
+ expandOnHover,
280
+ forceIconAtTablet,
281
+ setHoverExpanded
282
+ }),
283
+ [
284
+ state,
285
+ open,
286
+ setOpen,
287
+ isMobile,
288
+ openMobile,
289
+ setOpenMobile,
290
+ toggleSidebar,
291
+ sidebarMotionEnabled,
292
+ expandOnHover,
293
+ forceIconAtTablet,
294
+ setHoverExpanded
295
+ ]
296
+ );
297
+ React4.useEffect(() => {
298
+ if (!allowUserCollapse || !allowDesktopCollapse || expandOnHover) {
299
+ return;
300
+ }
301
+ const handleKeyDown = (event) => {
302
+ if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
303
+ event.preventDefault();
304
+ toggleSidebarEvent();
305
+ }
306
+ };
307
+ window.addEventListener("keydown", handleKeyDown);
308
+ return () => window.removeEventListener("keydown", handleKeyDown);
309
+ }, [allowDesktopCollapse, allowUserCollapse, expandOnHover]);
310
+ return /* @__PURE__ */ jsx2(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx2(
311
+ "div",
312
+ {
313
+ ref: hydrateSidebarCookie,
314
+ "data-slot": "sidebar-wrapper",
315
+ "data-force-icon-at-tablet": forceIconAtTablet ? "true" : void 0,
316
+ style,
317
+ className,
318
+ ...props,
319
+ children
320
+ }
321
+ ) });
322
+ }
323
+ function useSidebarHoverExpand({
324
+ expandOnHover,
325
+ isMobile,
326
+ setHoverExpanded,
327
+ state
328
+ }) {
329
+ const closeTimeoutRef = React4.useRef(null);
330
+ const clearHoverCloseTimeout = () => {
331
+ if (closeTimeoutRef.current !== null) {
332
+ clearTimeout(closeTimeoutRef.current);
333
+ closeTimeoutRef.current = null;
334
+ }
335
+ };
336
+ const openFromHover = () => {
337
+ if (!expandOnHover || isMobile) {
338
+ return;
339
+ }
340
+ clearHoverCloseTimeout();
341
+ if (state === "expanded") {
342
+ return;
343
+ }
344
+ flushSync(() => {
345
+ setHoverExpanded(true);
346
+ });
347
+ };
348
+ const scheduleCloseFromHover = () => {
349
+ if (!expandOnHover || isMobile) {
350
+ return;
351
+ }
352
+ clearHoverCloseTimeout();
353
+ closeTimeoutRef.current = setTimeout(() => {
354
+ closeTimeoutRef.current = null;
355
+ const activeElement = document.activeElement;
356
+ const retainExpandedFocus = activeElement instanceof Element && Boolean(
357
+ activeElement.closest(
358
+ '[data-radix-popper-content-wrapper], [data-slot="dropdown-menu-content"], [data-sidebar-collapsed-popover="true"], [data-sidebar-hide-when-collapsed="true"]'
359
+ )
360
+ );
361
+ const pointerInside = Boolean(
362
+ document.querySelector(
363
+ '[data-slot="sidebar-container"]:hover, [data-radix-popper-content-wrapper]:hover, [data-slot="dropdown-menu-content"]:hover, [data-sidebar-collapsed-popover="true"]:hover'
364
+ )
365
+ );
366
+ if (pointerInside) {
367
+ return;
368
+ }
369
+ if (retainExpandedFocus || document.querySelector(
370
+ '[data-slot="dropdown-menu-content"], [data-slot="dropdown-menu-trigger"][aria-expanded="true"]'
371
+ )) {
372
+ scheduleCloseFromHover();
373
+ return;
374
+ }
375
+ setHoverExpanded(false);
376
+ }, SIDEBAR_HOVER_CLOSE_DELAY_MS);
377
+ };
378
+ const clearHoverCloseTimeoutEvent = React4.useEffectEvent(clearHoverCloseTimeout);
379
+ const scheduleCloseFromHoverEvent = React4.useEffectEvent(scheduleCloseFromHover);
380
+ React4.useEffect(() => () => clearHoverCloseTimeoutEvent(), []);
381
+ React4.useEffect(() => {
382
+ if (!expandOnHover || isMobile || state !== "expanded") {
383
+ return;
384
+ }
385
+ const handlePointerOver = (event) => {
386
+ if (isSidebarHoverRetentionTarget(event.target)) {
387
+ clearHoverCloseTimeoutEvent();
388
+ }
389
+ };
390
+ const handlePointerOut = (event) => {
391
+ if (isSidebarHoverRetentionTarget(event.relatedTarget)) {
392
+ return;
393
+ }
394
+ if (isSidebarHoverRetentionTarget(event.target)) {
395
+ scheduleCloseFromHoverEvent();
396
+ }
397
+ };
398
+ document.addEventListener("pointerover", handlePointerOver);
399
+ document.addEventListener("pointerout", handlePointerOut);
400
+ return () => {
401
+ document.removeEventListener("pointerover", handlePointerOver);
402
+ document.removeEventListener("pointerout", handlePointerOut);
403
+ };
404
+ }, [expandOnHover, isMobile, state]);
405
+ React4.useEffect(() => {
406
+ if (!expandOnHover || isMobile || state !== "expanded") {
407
+ return;
408
+ }
409
+ const handleKeyDown = (event) => {
410
+ if (event.key !== "Escape" || event.defaultPrevented) {
411
+ return;
412
+ }
413
+ if (document.querySelector(
414
+ '[data-radix-popper-content-wrapper], [data-slot="dropdown-menu-content"]'
415
+ )) {
416
+ return;
417
+ }
418
+ event.preventDefault();
419
+ clearHoverCloseTimeoutEvent();
420
+ const activeElement = document.activeElement;
421
+ if (activeElement instanceof HTMLElement && activeElement.closest('[data-sidebar-hide-when-collapsed="true"]')) {
422
+ const hoverSidebar = activeElement.closest('[data-slot="sidebar"]');
423
+ if (hoverSidebar instanceof HTMLElement) {
424
+ for (const control of hoverSidebar.querySelectorAll(
425
+ 'a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])'
426
+ )) {
427
+ if (!control.closest('[data-sidebar-hide-when-collapsed="true"]')) {
428
+ control.focus();
429
+ break;
430
+ }
431
+ }
432
+ }
433
+ }
434
+ setHoverExpanded(false);
435
+ };
436
+ window.addEventListener("keydown", handleKeyDown);
437
+ return () => window.removeEventListener("keydown", handleKeyDown);
438
+ }, [expandOnHover, isMobile, setHoverExpanded, state]);
439
+ return { openFromHover, scheduleCloseFromHover };
440
+ }
441
+ function Sidebar({
442
+ side = "left",
443
+ variant = "sidebar",
444
+ collapsible = "offcanvas",
445
+ className,
446
+ children,
447
+ dir,
448
+ onPointerEnter,
449
+ onPointerLeave,
450
+ onMouseEnter,
451
+ onMouseLeave,
452
+ onFocusCapture,
453
+ onBlurCapture,
454
+ ...props
455
+ }) {
456
+ const {
457
+ isMobile,
458
+ state,
459
+ openMobile,
460
+ setOpenMobile,
461
+ sidebarMotionEnabled,
462
+ expandOnHover,
463
+ setHoverExpanded
464
+ } = useSidebar();
465
+ const resolvedCollapsible = expandOnHover && collapsible !== "none" ? "icon" : collapsible;
466
+ const { openFromHover, scheduleCloseFromHover } = useSidebarHoverExpand({
467
+ expandOnHover,
468
+ isMobile,
469
+ setHoverExpanded,
470
+ state
471
+ });
472
+ if (resolvedCollapsible === "none") {
473
+ return /* @__PURE__ */ jsx2("div", { "data-slot": "sidebar", className, ...props, children });
474
+ }
475
+ if (isMobile) {
476
+ return /* @__PURE__ */ jsx2(Sheet, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: /* @__PURE__ */ jsxs2(
477
+ SheetContent,
478
+ {
479
+ dir,
480
+ "data-sidebar": "sidebar",
481
+ "data-mobile": "true",
482
+ showCloseButton: false,
483
+ side,
484
+ children: [
485
+ /* @__PURE__ */ jsxs2(SheetHeader, { "data-visually-hidden": "", children: [
486
+ /* @__PURE__ */ jsx2(SheetTitle, { children: "Sidebar" }),
487
+ /* @__PURE__ */ jsx2(SheetDescription, { children: "Displays the mobile sidebar." })
488
+ ] }),
489
+ /* @__PURE__ */ jsx2("div", { "data-sidebar": "mobile-body", children })
490
+ ]
491
+ }
492
+ ) });
493
+ }
494
+ return /* @__PURE__ */ jsxs2(
495
+ "div",
496
+ {
497
+ "data-state": state,
498
+ "data-collapsible": state === "collapsed" ? resolvedCollapsible : "",
499
+ "data-expand-on-hover": expandOnHover ? "true" : void 0,
500
+ "data-motion": sidebarMotionEnabled ? expandOnHover ? "hover" : "toggle" : void 0,
501
+ "data-variant": variant,
502
+ "data-side": side,
503
+ "data-slot": "sidebar",
504
+ children: [
505
+ /* @__PURE__ */ jsx2("div", { "data-slot": "sidebar-gap" }),
506
+ /* @__PURE__ */ jsx2(
507
+ "div",
508
+ {
509
+ "data-slot": "sidebar-container",
510
+ "data-side": side,
511
+ className,
512
+ ...props,
513
+ onPointerEnter: (event) => {
514
+ onPointerEnter?.(event);
515
+ openFromHover();
516
+ },
517
+ onMouseEnter: (event) => {
518
+ onMouseEnter?.(event);
519
+ openFromHover();
520
+ },
521
+ onPointerLeave: (event) => {
522
+ onPointerLeave?.(event);
523
+ scheduleCloseFromHover();
524
+ },
525
+ onMouseLeave: (event) => {
526
+ onMouseLeave?.(event);
527
+ scheduleCloseFromHover();
528
+ },
529
+ onFocusCapture: (event) => {
530
+ onFocusCapture?.(event);
531
+ openFromHover();
532
+ },
533
+ onBlurCapture: (event) => {
534
+ onBlurCapture?.(event);
535
+ if (isSidebarHoverRetentionTarget(event.relatedTarget)) {
536
+ return;
537
+ }
538
+ scheduleCloseFromHover();
539
+ },
540
+ children: /* @__PURE__ */ jsx2("div", { "data-sidebar": "sidebar", "data-slot": "sidebar-inner", children })
541
+ }
542
+ )
543
+ ]
544
+ }
545
+ );
546
+ }
547
+ function SidebarTrigger({
548
+ className: _className,
549
+ onClick,
550
+ ...props
551
+ }) {
552
+ const { isMobile, toggleSidebar } = useSidebar();
553
+ return /* @__PURE__ */ jsxs2(
554
+ Button,
555
+ {
556
+ "data-sidebar": "trigger",
557
+ variant: "ghost",
558
+ presentation: "sidebarIcon",
559
+ onClick: (event) => {
560
+ onClick?.(event);
561
+ toggleSidebar();
562
+ },
563
+ ...props,
564
+ children: [
565
+ isMobile ? /* @__PURE__ */ jsx2(MenuIcon, {}) : /* @__PURE__ */ jsx2(PanelLeftIcon, {}),
566
+ /* @__PURE__ */ jsx2("span", { "data-visually-hidden": "", children: "Toggle Sidebar" })
567
+ ]
568
+ }
569
+ );
570
+ }
571
+ function SidebarInset({ className, ...props }) {
572
+ return /* @__PURE__ */ jsx2("main", { "data-slot": "sidebar-inset", className, ...props });
573
+ }
574
+ function SidebarHeader({ className, ...props }) {
575
+ return /* @__PURE__ */ jsx2("div", { "data-slot": "sidebar-header", "data-sidebar": "header", className, ...props });
576
+ }
577
+ function SidebarFooter({ className, ...props }) {
578
+ return /* @__PURE__ */ jsx2("div", { "data-slot": "sidebar-footer", "data-sidebar": "footer", className, ...props });
579
+ }
580
+ function SidebarContent({ className, ...props }) {
581
+ return /* @__PURE__ */ jsx2("div", { "data-slot": "sidebar-content", "data-sidebar": "content", className, ...props });
582
+ }
583
+ function SidebarGroup({ className, ...props }) {
584
+ return /* @__PURE__ */ jsx2("div", { "data-slot": "sidebar-group", "data-sidebar": "group", className, ...props });
585
+ }
586
+ function SidebarGroupLabel({
587
+ className,
588
+ asChild = false,
589
+ render,
590
+ ...props
591
+ }) {
592
+ return /* @__PURE__ */ jsx2(
593
+ RenderSlot,
594
+ {
595
+ defaultTagName: "div",
596
+ asChild,
597
+ render,
598
+ "data-slot": "sidebar-group-label",
599
+ "data-sidebar": "group-label",
600
+ className,
601
+ ...props
602
+ }
603
+ );
604
+ }
605
+ function SidebarGroupContent({ className, ...props }) {
606
+ return /* @__PURE__ */ jsx2(
607
+ "div",
608
+ {
609
+ "data-slot": "sidebar-group-content",
610
+ "data-sidebar": "group-content",
611
+ className,
612
+ ...props
613
+ }
614
+ );
615
+ }
616
+ function SidebarMenu({
617
+ className,
618
+ fluidHighlights = true,
619
+ spacing = "default",
620
+ children,
621
+ ...props
622
+ }) {
623
+ return /* @__PURE__ */ jsxs2(
624
+ "ul",
625
+ {
626
+ "data-slot": "sidebar-menu",
627
+ "data-sidebar": "menu",
628
+ "data-fluid-menu": fluidHighlights ? "sidebar" : void 0,
629
+ "data-spacing": spacing,
630
+ className,
631
+ ...props,
632
+ children: [
633
+ children,
634
+ fluidHighlights ? /* @__PURE__ */ jsx2(FluidMenuHighlights, { kind: "sidebar" }) : null
635
+ ]
636
+ }
637
+ );
638
+ }
639
+ function SidebarMenuItem({ className, ...props }) {
640
+ return /* @__PURE__ */ jsx2("li", { "data-slot": "sidebar-menu-item", "data-sidebar": "menu-item", className, ...props });
641
+ }
642
+ function SidebarMenuButton({
643
+ asChild = false,
644
+ isActive = false,
645
+ variant = "default",
646
+ size = "default",
647
+ tooltip,
648
+ tooltipOnForceIcon = false,
649
+ className,
650
+ render,
651
+ ...props
652
+ }) {
653
+ const { forceIconAtTablet, isMobile, state } = useSidebar();
654
+ const button = /* @__PURE__ */ jsx2(
655
+ RenderSlot,
656
+ {
657
+ ...props,
658
+ defaultTagName: "button",
659
+ asChild,
660
+ render,
661
+ className,
662
+ "data-slot": "sidebar-menu-button",
663
+ "data-sidebar": "menu-button",
664
+ "data-size": size ?? void 0,
665
+ "data-variant": variant ?? void 0,
666
+ "data-active": isActive ? "" : void 0
667
+ }
668
+ );
669
+ if (!tooltip || isMobile || state !== "collapsed" && !(tooltipOnForceIcon && forceIconAtTablet)) {
670
+ return button;
671
+ }
672
+ const tooltipContent = typeof tooltip === "string" ? { children: tooltip } : tooltip;
673
+ return /* @__PURE__ */ jsxs2(Tooltip, { children: [
674
+ /* @__PURE__ */ jsx2(TooltipTrigger, { asChild: true, children: button }),
675
+ /* @__PURE__ */ jsx2(TooltipContent, { side: "right", align: "center", ...tooltipContent })
676
+ ] });
677
+ }
678
+ function SidebarMenuBadge({ className, ...props }) {
679
+ return /* @__PURE__ */ jsx2(
680
+ "div",
681
+ {
682
+ "data-slot": "sidebar-menu-badge",
683
+ "data-sidebar": "menu-badge",
684
+ className,
685
+ ...props
686
+ }
687
+ );
688
+ }
689
+
690
+ // ../ui/src/warmio/sidebar-compositions/sidebar-compositions.tsx
691
+ import * as React5 from "react";
692
+ import { ChevronUp, UserRound } from "lucide-react";
693
+ import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
694
+ function SidebarBrand({ actions, collapsed, expanded }) {
695
+ return /* @__PURE__ */ jsxs3("div", { "data-slot": "sidebar-brand", children: [
696
+ /* @__PURE__ */ jsxs3("div", { "data-sidebar-brand-mark": "true", children: [
697
+ expanded,
698
+ /* @__PURE__ */ jsx3("span", { "aria-hidden": "true", "data-sidebar-brand-collapsed": "true", inert: true, children: collapsed })
699
+ ] }),
700
+ actions ? /* @__PURE__ */ jsx3("div", { "data-sidebar-hide-when-collapsed": "true", children: actions }) : null
701
+ ] });
702
+ }
703
+ var SidebarAccountTrigger = React5.forwardRef(function SidebarAccountTrigger2({ avatar, className: _className, email, label, style: _style, ...props }, ref) {
704
+ return /* @__PURE__ */ jsxs3(SidebarMenuButton2, { ...props, ref, presentation: "account", children: [
705
+ /* @__PURE__ */ jsx3("div", { "data-slot": "sidebar-account-avatar", children: avatar ?? /* @__PURE__ */ jsx3(UserRound, { "aria-hidden": "true" }) }),
706
+ /* @__PURE__ */ jsxs3("div", { "data-sidebar": "account-details", children: [
707
+ /* @__PURE__ */ jsx3("div", { "data-slot": "sidebar-account-label", title: label, children: label }),
708
+ /* @__PURE__ */ jsx3("div", { "data-slot": "sidebar-account-email", title: email, children: email })
709
+ ] }),
710
+ /* @__PURE__ */ jsx3(ChevronUp, { "data-sidebar-account-chevron": "true" })
711
+ ] });
712
+ });
713
+ SidebarAccountTrigger.displayName = "WarmSidebarAccountTrigger";
714
+
715
+ // ../ui/src/warmio/sidebar/sidebar.tsx
716
+ import { jsx as jsx4 } from "react/jsx-runtime";
717
+ function SidebarProvider2({
718
+ className: _className,
719
+ presentation,
720
+ style: _style,
721
+ ...props
722
+ }) {
723
+ return /* @__PURE__ */ jsx4(SidebarProvider, { ...props, "data-presentation": presentation ?? "shell" });
724
+ }
725
+ function Sidebar2({
726
+ className: _className,
727
+ presentation,
728
+ style: _style,
729
+ variant,
730
+ ...props
731
+ }) {
732
+ return /* @__PURE__ */ jsx4(
733
+ Sidebar,
734
+ {
735
+ ...props,
736
+ variant: presentation === "product" ? "floating" : variant ?? "sidebar"
737
+ }
738
+ );
739
+ }
740
+ function SidebarInset2({
741
+ className: _className,
742
+ presentation,
743
+ style: _style,
744
+ ...props
745
+ }) {
746
+ return /* @__PURE__ */ jsx4(SidebarInset, { ...props, "data-presentation": presentation });
747
+ }
748
+ function SidebarHeader2({
749
+ className: _className,
750
+ presentation,
751
+ style: _style,
752
+ ...props
753
+ }) {
754
+ return /* @__PURE__ */ jsx4(SidebarHeader, { ...props, "data-presentation": presentation });
755
+ }
756
+ function SidebarContent2({
757
+ className: _className,
758
+ presentation,
759
+ style: _style,
760
+ ...props
761
+ }) {
762
+ return /* @__PURE__ */ jsx4(SidebarContent, { ...props, "data-presentation": presentation });
763
+ }
764
+ function SidebarFooter2({
765
+ className: _className,
766
+ presentation,
767
+ style: _style,
768
+ ...props
769
+ }) {
770
+ return /* @__PURE__ */ jsx4(SidebarFooter, { ...props, "data-presentation": presentation });
771
+ }
772
+ function SidebarGroup2({
773
+ className: _className,
774
+ collapsed = false,
775
+ presentation,
776
+ style: _style,
777
+ ...props
778
+ }) {
779
+ return /* @__PURE__ */ jsx4(
780
+ SidebarGroup,
781
+ {
782
+ ...props,
783
+ "data-collapsed": collapsed ? "true" : void 0,
784
+ "data-presentation": presentation
785
+ }
786
+ );
787
+ }
788
+ function SidebarGroupContent2({
789
+ className: _className,
790
+ style: _style,
791
+ ...props
792
+ }) {
793
+ return /* @__PURE__ */ jsx4(SidebarGroupContent, { ...props });
794
+ }
795
+ function SidebarGroupLabel2({
796
+ className: _className,
797
+ presentation,
798
+ style: _style,
799
+ ...props
800
+ }) {
801
+ return /* @__PURE__ */ jsx4(SidebarGroupLabel, { ...props, "data-presentation": presentation });
802
+ }
803
+ function SidebarMenu2({ className: _className, style: _style, ...props }) {
804
+ return /* @__PURE__ */ jsx4(SidebarMenu, { ...props });
805
+ }
806
+ function SidebarMenuItem2({
807
+ className: _className,
808
+ style: _style,
809
+ ...props
810
+ }) {
811
+ return /* @__PURE__ */ jsx4(SidebarMenuItem, { ...props });
812
+ }
813
+ var SidebarMenuButton2 = React6.forwardRef(
814
+ function SidebarMenuButton3({
815
+ className: _className,
816
+ collapsed = false,
817
+ disabled,
818
+ isActive = false,
819
+ presentation,
820
+ style: _style,
821
+ ...props
822
+ }, ref) {
823
+ const isSidebarIcon = presentation === "sidebarIcon";
824
+ return /* @__PURE__ */ jsx4(
825
+ SidebarMenuButton,
826
+ {
827
+ ...props,
828
+ disabled,
829
+ isActive,
830
+ ref,
831
+ "data-fluid-menu-disabled": presentation === "disabled" || void 0,
832
+ "data-presentation": presentation,
833
+ "data-collapsed": collapsed || presentation === "previewCollapsed" ? "true" : void 0,
834
+ "data-muted": disabled || presentation === "disabled" ? "" : void 0,
835
+ ...isSidebarIcon ? { "data-warm-button": "", "data-variant": "ghost", "data-size": "icon" } : {}
836
+ }
837
+ );
838
+ }
839
+ );
840
+ SidebarMenuButton2.displayName = "WarmSidebarMenuButton";
841
+ function SidebarMenuBadge2({
842
+ className: _className,
843
+ presentation,
844
+ style: _style,
845
+ ...props
846
+ }) {
847
+ return /* @__PURE__ */ jsx4(SidebarMenuBadge, { ...props, "data-presentation": presentation });
848
+ }
849
+ function SidebarTrigger2({
850
+ className: _className,
851
+ style: _style,
852
+ ...props
853
+ }) {
854
+ return /* @__PURE__ */ jsx4(SidebarTrigger, { ...props });
855
+ }
856
+
857
+ export {
858
+ useSidebar,
859
+ SidebarBrand,
860
+ SidebarAccountTrigger,
861
+ SidebarProvider2 as SidebarProvider,
862
+ Sidebar2 as Sidebar,
863
+ SidebarInset2 as SidebarInset,
864
+ SidebarHeader2 as SidebarHeader,
865
+ SidebarContent2 as SidebarContent,
866
+ SidebarFooter2 as SidebarFooter,
867
+ SidebarGroup2 as SidebarGroup,
868
+ SidebarGroupContent2 as SidebarGroupContent,
869
+ SidebarGroupLabel2 as SidebarGroupLabel,
870
+ SidebarMenu2 as SidebarMenu,
871
+ SidebarMenuItem2 as SidebarMenuItem,
872
+ SidebarMenuButton2 as SidebarMenuButton,
873
+ SidebarMenuBadge2 as SidebarMenuBadge,
874
+ SidebarTrigger2 as SidebarTrigger
875
+ };