@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.
- package/LICENSES/fluid-functionalism.txt +24 -0
- package/README.md +9 -5
- package/dist/badge.js +1 -1
- package/dist/button.js +1 -1
- package/dist/chunks/{chunk-IOUIACNV.js → chunk-2CO2BZLI.js} +20 -85
- package/dist/chunks/{chunk-ICC7GQXS.js → chunk-3AVFUXCV.js} +8 -6
- package/dist/chunks/{chunk-DHZWXYDX.js → chunk-6V6K5G72.js} +7 -13
- package/dist/chunks/{chunk-YTDMREDR.js → chunk-A2NLFM6R.js} +62 -36
- package/dist/chunks/chunk-B47G2BJV.js +534 -0
- package/dist/chunks/chunk-F74Y4WRX.js +239 -0
- package/dist/chunks/chunk-GY4XJ6EX.js +129 -0
- package/dist/chunks/chunk-HQTC542T.js +1079 -0
- package/dist/chunks/{chunk-BG6USQSY.js → chunk-IK5RHPN3.js} +20 -8
- package/dist/chunks/chunk-JXSJTIX7.js +133 -0
- package/dist/chunks/{chunk-CIYWFBEJ.js → chunk-OU7YQUU2.js} +15 -32
- package/dist/dropdown-menu.js +3 -1
- package/dist/index.js +11 -9
- package/dist/logo.js +1 -1
- package/dist/product-header.js +1 -1
- package/dist/product-header.types.d.ts +12 -10
- package/dist/sheet.js +3 -2
- package/dist/sidebar.js +4 -2
- package/dist/text.js +1 -1
- package/package.json +5 -3
- package/types/badge.d.ts +10 -2
- package/types/index.d.ts +113 -8
- package/types/sidebar.d.ts +1 -0
- package/types/text.d.ts +3 -0
- package/dist/chunks/chunk-GKEYV2XW.js +0 -10
- package/dist/chunks/chunk-LHHUTDZR.js +0 -749
- package/dist/chunks/chunk-P3AJ2REZ.js +0 -1083
|
@@ -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
|
-
};
|