@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
@@ -1,748 +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(cookie) {
118
- const match = 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 subscribeToForceIconSidebar(onStoreChange) {
134
- const mql = window.matchMedia(TABLET_ICON_SIDEBAR_QUERY);
135
- mql.addEventListener("change", onStoreChange);
136
- return () => mql.removeEventListener("change", onStoreChange);
137
- }
138
- function getForceIconSidebarSnapshot() {
139
- return window.matchMedia(TABLET_ICON_SIDEBAR_QUERY).matches;
140
- }
141
- function useForceIconSidebar(forceIconAtTablet) {
142
- const isTablet = React4.useSyncExternalStore(
143
- subscribeToForceIconSidebar,
144
- getForceIconSidebarSnapshot,
145
- getServerForceIconSidebarSnapshot
146
- );
147
- return forceIconAtTablet && isTablet;
148
- }
149
- function SidebarProvider({
150
- defaultOpen = true,
151
- open: openProp,
152
- onOpenChange: setOpenProp,
153
- className,
154
- style,
155
- forceIconAtTablet = false,
156
- allowUserCollapse = true,
157
- children,
158
- ...props
159
- }) {
160
- const isMobile = useIsMobile();
161
- const forceIcon = useForceIconSidebar(forceIconAtTablet);
162
- const [openMobile, setOpenMobile] = React4.useState(false);
163
- const [sidebarMotionEnabled, setSidebarMotionEnabled] = React4.useState(false);
164
- const [_open, _setOpen] = React4.useReducer(
165
- (_, nextOpen) => nextOpen,
166
- defaultOpen
167
- );
168
- const cookieHydratedRef = React4.useRef(false);
169
- const hydrateSidebarCookie = (node) => {
170
- if (!node || cookieHydratedRef.current) return;
171
- cookieHydratedRef.current = true;
172
- const stored = readSidebarCookie(document.cookie);
173
- if (stored !== null) _setOpen(stored);
174
- };
175
- const open = openProp ?? _open;
176
- const setOpen = React4.useCallback(
177
- (openState) => {
178
- if (!allowUserCollapse) {
179
- return;
180
- }
181
- if (setOpenProp) {
182
- setOpenProp(openState);
183
- } else {
184
- _setOpen(openState);
185
- }
186
- document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
187
- },
188
- [allowUserCollapse, setOpenProp]
189
- );
190
- const toggleSidebar = React4.useCallback(() => {
191
- if (!allowUserCollapse) {
192
- return;
193
- }
194
- setSidebarMotionEnabled(true);
195
- return isMobile ? setOpenMobile((open2) => !open2) : setOpen(!open);
196
- }, [allowUserCollapse, isMobile, open, setOpen]);
197
- const toggleSidebarEvent = React4.useEffectEvent(toggleSidebar);
198
- const state = forceIcon && !isMobile ? "collapsed" : open ? "expanded" : "collapsed";
199
- const contextValue = React4.useMemo(
200
- () => ({
201
- state,
202
- open,
203
- setOpen,
204
- isMobile,
205
- openMobile,
206
- setOpenMobile,
207
- toggleSidebar,
208
- sidebarMotionEnabled
209
- }),
210
- [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar, sidebarMotionEnabled]
211
- );
212
- React4.useEffect(() => {
213
- if (!allowUserCollapse) {
214
- return;
215
- }
216
- const handleKeyDown = (event) => {
217
- if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
218
- event.preventDefault();
219
- toggleSidebarEvent();
220
- }
221
- };
222
- window.addEventListener("keydown", handleKeyDown);
223
- return () => window.removeEventListener("keydown", handleKeyDown);
224
- }, [allowUserCollapse]);
225
- return /* @__PURE__ */ jsx2(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx2(
226
- "div",
227
- {
228
- ref: hydrateSidebarCookie,
229
- "data-slot": "sidebar-wrapper",
230
- style,
231
- className: cn(
232
- "group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar",
233
- className
234
- ),
235
- ...props,
236
- children
237
- }
238
- ) });
239
- }
240
- function Sidebar({
241
- side = "left",
242
- variant = "sidebar",
243
- collapsible = "offcanvas",
244
- className,
245
- children,
246
- dir,
247
- ...props
248
- }) {
249
- const { isMobile, state, openMobile, setOpenMobile, sidebarMotionEnabled } = useSidebar();
250
- const sidebarWidthMotionClassName = sidebarMotionEnabled ? "transition-[width] duration-300 ease-linear motion-reduce:transition-none" : null;
251
- const sidebarPositionMotionClassName = sidebarMotionEnabled ? "transition-[left,right,width] duration-300 ease-linear motion-reduce:transition-none" : null;
252
- if (collapsible === "none") {
253
- return /* @__PURE__ */ jsx2(
254
- "div",
255
- {
256
- "data-slot": "sidebar",
257
- className: cn(
258
- "flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground",
259
- className
260
- ),
261
- ...props,
262
- children
263
- }
264
- );
265
- }
266
- if (isMobile) {
267
- return /* @__PURE__ */ jsx2(Sheet, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: /* @__PURE__ */ jsxs2(
268
- SheetContent,
269
- {
270
- dir,
271
- "data-sidebar": "sidebar",
272
- "data-slot": "sidebar",
273
- "data-mobile": "true",
274
- className: "w-[var(--sidebar-width-mobile)] bg-sidebar p-0 text-sidebar-foreground dark:bg-card [&>button]:hidden",
275
- side,
276
- children: [
277
- /* @__PURE__ */ jsxs2(SheetHeader, { className: "sr-only", children: [
278
- /* @__PURE__ */ jsx2(SheetTitle, { children: "Sidebar" }),
279
- /* @__PURE__ */ jsx2(SheetDescription, { children: "Displays the mobile sidebar." })
280
- ] }),
281
- /* @__PURE__ */ jsx2("div", { className: "flex h-full w-full flex-col", children })
282
- ]
283
- }
284
- ) });
285
- }
286
- return /* @__PURE__ */ jsxs2(
287
- "div",
288
- {
289
- className: "group peer hidden text-sidebar-foreground md:block",
290
- "data-state": state,
291
- "data-collapsible": state === "collapsed" ? collapsible : "",
292
- "data-variant": variant,
293
- "data-side": side,
294
- "data-slot": "sidebar",
295
- children: [
296
- /* @__PURE__ */ jsx2(
297
- "div",
298
- {
299
- "data-slot": "sidebar-gap",
300
- className: cn(
301
- "relative w-(--sidebar-width) bg-transparent",
302
- sidebarWidthMotionClassName,
303
- "group-data-[collapsible=offcanvas]:w-0",
304
- "group-data-[side=right]:rotate-180",
305
- variant === "floating" || variant === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
306
- )
307
- }
308
- ),
309
- /* @__PURE__ */ jsx2(
310
- "div",
311
- {
312
- "data-slot": "sidebar-container",
313
- "data-side": side,
314
- className: cn(
315
- "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",
316
- sidebarPositionMotionClassName,
317
- // Adjust the padding for floating and inset variants.
318
- 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",
319
- className
320
- ),
321
- ...props,
322
- children: /* @__PURE__ */ jsx2(
323
- "div",
324
- {
325
- "data-sidebar": "sidebar",
326
- "data-slot": "sidebar-inner",
327
- 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",
328
- children
329
- }
330
- )
331
- }
332
- )
333
- ]
334
- }
335
- );
336
- }
337
- function SidebarTrigger({ className, onClick, ...props }) {
338
- const { isMobile, toggleSidebar } = useSidebar();
339
- return /* @__PURE__ */ jsxs2(
340
- Button,
341
- {
342
- "data-sidebar": "trigger",
343
- "data-slot": "sidebar-trigger",
344
- variant: "ghost",
345
- size: "icon-sm",
346
- className: cn(className),
347
- onClick: (event) => {
348
- onClick?.(event);
349
- toggleSidebar();
350
- },
351
- ...props,
352
- children: [
353
- isMobile ? /* @__PURE__ */ jsx2(MenuIcon, {}) : /* @__PURE__ */ jsx2(PanelLeftIcon, {}),
354
- /* @__PURE__ */ jsx2("span", { className: "sr-only", children: "Toggle Sidebar" })
355
- ]
356
- }
357
- );
358
- }
359
- function SidebarInset({ className, ...props }) {
360
- return /* @__PURE__ */ jsx2(
361
- "main",
362
- {
363
- "data-slot": "sidebar-inset",
364
- className: cn(
365
- "relative flex min-h-0 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",
366
- className
367
- ),
368
- ...props
369
- }
370
- );
371
- }
372
- function SidebarHeader({ className, ...props }) {
373
- return /* @__PURE__ */ jsx2(
374
- "div",
375
- {
376
- "data-slot": "sidebar-header",
377
- "data-sidebar": "header",
378
- className: cn("flex flex-col gap-2 p-2", className),
379
- ...props
380
- }
381
- );
382
- }
383
- function SidebarFooter({ className, ...props }) {
384
- return /* @__PURE__ */ jsx2(
385
- "div",
386
- {
387
- "data-slot": "sidebar-footer",
388
- "data-sidebar": "footer",
389
- className: cn("flex flex-col gap-2 p-2", className),
390
- ...props
391
- }
392
- );
393
- }
394
- function SidebarContent({ className, ...props }) {
395
- return /* @__PURE__ */ jsx2(
396
- "div",
397
- {
398
- "data-slot": "sidebar-content",
399
- "data-sidebar": "content",
400
- className: cn(
401
- "no-scrollbar flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
402
- className
403
- ),
404
- ...props
405
- }
406
- );
407
- }
408
- function SidebarGroup({ className, ...props }) {
409
- return /* @__PURE__ */ jsx2(
410
- "div",
411
- {
412
- "data-slot": "sidebar-group",
413
- "data-sidebar": "group",
414
- className: cn("relative flex w-full min-w-0 flex-col p-2", className),
415
- ...props
416
- }
417
- );
418
- }
419
- function SidebarGroupLabel({
420
- className,
421
- asChild = false,
422
- render,
423
- ...props
424
- }) {
425
- return /* @__PURE__ */ jsx2(
426
- RenderSlot,
427
- {
428
- defaultTagName: "div",
429
- asChild,
430
- render,
431
- "data-slot": "sidebar-group-label",
432
- "data-sidebar": "group-label",
433
- className: cn(
434
- "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",
435
- className
436
- ),
437
- ...props
438
- }
439
- );
440
- }
441
- function SidebarGroupContent({ className, ...props }) {
442
- return /* @__PURE__ */ jsx2(
443
- "div",
444
- {
445
- "data-slot": "sidebar-group-content",
446
- "data-sidebar": "group-content",
447
- className: cn("w-full text-sm", className),
448
- ...props
449
- }
450
- );
451
- }
452
- var sidebarMenuSpacingClassName = {
453
- default: "gap-2",
454
- roomy: "gap-2"
455
- };
456
- function SidebarMenu({ className, spacing = "default", ...props }) {
457
- return /* @__PURE__ */ jsx2(
458
- "ul",
459
- {
460
- "data-slot": "sidebar-menu",
461
- "data-sidebar": "menu",
462
- className: cn(
463
- "flex w-full min-w-0 flex-col",
464
- sidebarMenuSpacingClassName[spacing],
465
- className
466
- ),
467
- ...props
468
- }
469
- );
470
- }
471
- function SidebarMenuItem({ className, ...props }) {
472
- return /* @__PURE__ */ jsx2(
473
- "li",
474
- {
475
- "data-slot": "sidebar-menu-item",
476
- "data-sidebar": "menu-item",
477
- className: cn("group/menu-item relative", className),
478
- ...props
479
- }
480
- );
481
- }
482
- var sidebarMenuButtonVariants = cva(
483
- "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",
484
- {
485
- variants: {
486
- variant: {
487
- default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
488
- 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))]"
489
- },
490
- size: {
491
- default: "h-8 text-sm",
492
- sm: "h-7 text-xs",
493
- lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!"
494
- }
495
- },
496
- defaultVariants: {
497
- variant: "default",
498
- size: "default"
499
- }
500
- }
501
- );
502
- function SidebarMenuButton({
503
- asChild = false,
504
- isActive = false,
505
- variant = "default",
506
- size = "default",
507
- tooltip,
508
- className,
509
- render,
510
- ...props
511
- }) {
512
- const { isMobile, state } = useSidebar();
513
- const button = /* @__PURE__ */ jsx2(
514
- RenderSlot,
515
- {
516
- defaultTagName: "button",
517
- asChild,
518
- render,
519
- "data-slot": "sidebar-menu-button",
520
- "data-sidebar": "menu-button",
521
- "data-size": size,
522
- "data-active": isActive ? "" : void 0,
523
- className: cn(sidebarMenuButtonVariants({ variant, size }), className),
524
- ...props
525
- }
526
- );
527
- if (!tooltip) {
528
- return button;
529
- }
530
- if (typeof tooltip === "string") {
531
- tooltip = {
532
- children: tooltip
533
- };
534
- }
535
- return /* @__PURE__ */ jsxs2(Tooltip, { children: [
536
- /* @__PURE__ */ jsx2(TooltipTrigger, { asChild: true, children: button }),
537
- /* @__PURE__ */ jsx2(
538
- TooltipContent,
539
- {
540
- side: "right",
541
- align: "center",
542
- hidden: state !== "collapsed" || isMobile,
543
- ...tooltip
544
- }
545
- )
546
- ] });
547
- }
548
- function SidebarMenuBadge({ className, ...props }) {
549
- return /* @__PURE__ */ jsx2(
550
- "div",
551
- {
552
- "data-slot": "sidebar-menu-badge",
553
- "data-sidebar": "menu-badge",
554
- className: cn(
555
- "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",
556
- className
557
- ),
558
- ...props
559
- }
560
- );
561
- }
562
-
563
- // ../ui/src/warmio/sidebar-compositions.tsx
564
- import * as React5 from "react";
565
- import { ChevronUp, UserRound } from "lucide-react";
566
- import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
567
- function SidebarBrand({ actions, collapsed, expanded }) {
568
- 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: [
569
- React5.cloneElement(expanded, {
570
- className: "flex shrink-0 items-center text-sidebar-foreground transition-colors hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:hidden"
571
- }),
572
- React5.cloneElement(collapsed, {
573
- 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"
574
- }),
575
- actions ? /* @__PURE__ */ jsx3("div", { className: "flex items-center gap-2 group-data-[collapsible=icon]:hidden", children: actions }) : null
576
- ] });
577
- }
578
- var SidebarAccountTrigger = React5.forwardRef(function SidebarAccountTrigger2({ avatar, className: _className, email, label, style: _style, ...props }, ref) {
579
- return /* @__PURE__ */ jsxs3(SidebarMenuButton2, { ...props, ref, presentation: "account", children: [
580
- /* @__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" }) }),
581
- /* @__PURE__ */ jsxs3("div", { className: "min-w-0 flex-1 text-left group-data-[collapsible=icon]:hidden", children: [
582
- /* @__PURE__ */ jsx3("div", { className: "truncate text-sm font-bold", title: label, children: label }),
583
- /* @__PURE__ */ jsx3("div", { className: "truncate text-xs text-sidebar-foreground/60", title: email, children: email })
584
- ] }),
585
- /* @__PURE__ */ jsx3(ChevronUp, { className: "ml-auto size-4 group-data-[collapsible=icon]:hidden" })
586
- ] });
587
- });
588
- SidebarAccountTrigger.displayName = "WarmSidebarAccountTrigger";
589
-
590
- // ../ui/src/warmio/sidebar.tsx
591
- import { jsx as jsx4 } from "react/jsx-runtime";
592
- function SidebarProvider2({
593
- className: _className,
594
- presentation,
595
- style: _style,
596
- ...props
597
- }) {
598
- const presentationClassName = presentation === "mockup" ? "min-h-0 [--sidebar-width:16rem]" : presentation === "preview" ? "min-h-full" : void 0;
599
- return /* @__PURE__ */ jsx4(SidebarProvider, { ...props, className: presentationClassName });
600
- }
601
- function Sidebar2({
602
- className: _className,
603
- presentation,
604
- style: _style,
605
- ...props
606
- }) {
607
- return /* @__PURE__ */ jsx4(
608
- Sidebar,
609
- {
610
- ...props,
611
- className: presentation === "product" ? "border-r border-border" : void 0
612
- }
613
- );
614
- }
615
- function SidebarInset2({
616
- className: _className,
617
- presentation,
618
- style: _style,
619
- ...props
620
- }) {
621
- return /* @__PURE__ */ jsx4(SidebarInset, { ...props, className: presentation === "product" ? "min-w-0" : void 0 });
622
- }
623
- function SidebarHeader2({
624
- className: _className,
625
- presentation,
626
- style: _style,
627
- ...props
628
- }) {
629
- 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;
630
- return /* @__PURE__ */ jsx4(SidebarHeader, { ...props, className });
631
- }
632
- function SidebarContent2({
633
- className: _className,
634
- presentation,
635
- style: _style,
636
- ...props
637
- }) {
638
- const className = presentation === "product" ? "pb-0" : presentation === "mockup" ? "px-2 py-4" : void 0;
639
- return /* @__PURE__ */ jsx4(SidebarContent, { ...props, className });
640
- }
641
- function SidebarFooter2({
642
- className: _className,
643
- presentation,
644
- style: _style,
645
- ...props
646
- }) {
647
- 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;
648
- return /* @__PURE__ */ jsx4(SidebarFooter, { ...props, className });
649
- }
650
- function SidebarGroup2({
651
- className: _className,
652
- collapsed = false,
653
- presentation,
654
- style: _style,
655
- ...props
656
- }) {
657
- 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;
658
- return /* @__PURE__ */ jsx4(SidebarGroup, { ...props, className });
659
- }
660
- function SidebarGroupContent2({
661
- className: _className,
662
- style: _style,
663
- ...props
664
- }) {
665
- return /* @__PURE__ */ jsx4(SidebarGroupContent, { ...props });
666
- }
667
- function SidebarGroupLabel2({
668
- className: _className,
669
- presentation,
670
- style: _style,
671
- ...props
672
- }) {
673
- const className = presentation === "navigation" ? "px-2 tabular-nums text-xs uppercase tracking-wider text-sidebar-foreground/60" : presentation === "mockup" ? "uppercase tracking-wider" : void 0;
674
- return /* @__PURE__ */ jsx4(SidebarGroupLabel, { ...props, className });
675
- }
676
- function SidebarMenu2({ className: _className, style: _style, ...props }) {
677
- return /* @__PURE__ */ jsx4(SidebarMenu, { ...props });
678
- }
679
- function SidebarMenuItem2({
680
- className: _className,
681
- style: _style,
682
- ...props
683
- }) {
684
- return /* @__PURE__ */ jsx4(SidebarMenuItem, { ...props });
685
- }
686
- var SidebarMenuButton2 = React6.forwardRef(
687
- function SidebarMenuButton3({ className: _className, collapsed = false, disabled, presentation, style: _style, ...props }, ref) {
688
- return /* @__PURE__ */ jsx4(
689
- SidebarMenuButton,
690
- {
691
- ...props,
692
- disabled,
693
- ref,
694
- className: cn(
695
- (collapsed || presentation === "previewCollapsed") && "mx-auto size-8 gap-0 p-2",
696
- 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!",
697
- presentation === "navigation" && "text-sidebar-foreground hover:text-sidebar-foreground active:text-sidebar-foreground data-open:hover:text-sidebar-foreground data-active:text-sidebar-foreground",
698
- (disabled || presentation === "disabled") && "text-muted-foreground/60"
699
- )
700
- }
701
- );
702
- }
703
- );
704
- SidebarMenuButton2.displayName = "WarmSidebarMenuButton";
705
- function SidebarMenuBadge2({
706
- className: _className,
707
- presentation,
708
- style: _style,
709
- ...props
710
- }) {
711
- return /* @__PURE__ */ jsx4(
712
- SidebarMenuBadge,
713
- {
714
- ...props,
715
- className: cn(
716
- "text-sidebar-foreground peer-hover/menu-button:text-sidebar-foreground peer-data-active/menu-button:text-sidebar-foreground",
717
- presentation === "attention" && "animate-pulse"
718
- )
719
- }
720
- );
721
- }
722
- function SidebarTrigger2({
723
- className: _className,
724
- style: _style,
725
- ...props
726
- }) {
727
- return /* @__PURE__ */ jsx4(SidebarTrigger, { ...props });
728
- }
729
-
730
- export {
731
- useSidebar,
732
- SidebarBrand,
733
- SidebarAccountTrigger,
734
- SidebarProvider2 as SidebarProvider,
735
- Sidebar2 as Sidebar,
736
- SidebarInset2 as SidebarInset,
737
- SidebarHeader2 as SidebarHeader,
738
- SidebarContent2 as SidebarContent,
739
- SidebarFooter2 as SidebarFooter,
740
- SidebarGroup2 as SidebarGroup,
741
- SidebarGroupContent2 as SidebarGroupContent,
742
- SidebarGroupLabel2 as SidebarGroupLabel,
743
- SidebarMenu2 as SidebarMenu,
744
- SidebarMenuItem2 as SidebarMenuItem,
745
- SidebarMenuButton2 as SidebarMenuButton,
746
- SidebarMenuBadge2 as SidebarMenuBadge,
747
- SidebarTrigger2 as SidebarTrigger
748
- };