@cryptlex/web-components 1.2.2 → 1.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/ui/accordion.es.js +8 -8
- package/dist/components/ui/accordion.es.js.map +1 -1
- package/dist/components/ui/avatar.es.js +43 -0
- package/dist/components/ui/avatar.es.js.map +1 -0
- package/dist/components/ui/badge.es.js +1 -1
- package/dist/components/ui/badge.es.js.map +1 -1
- package/dist/components/ui/breadcrumb.es.js +1 -1
- package/dist/components/ui/breadcrumb.es.js.map +1 -1
- package/dist/components/ui/button.es.js +5 -5
- package/dist/components/ui/button.es.js.map +1 -1
- package/dist/components/ui/calendar.es.js +3 -3
- package/dist/components/ui/calendar.es.js.map +1 -1
- package/dist/components/ui/card.es.js +17 -17
- package/dist/components/ui/card.es.js.map +1 -1
- package/dist/components/ui/chart.es.js +14 -14
- package/dist/components/ui/chart.es.js.map +1 -1
- package/dist/components/ui/command.es.js +19 -19
- package/dist/components/ui/command.es.js.map +1 -1
- package/dist/components/ui/dialog.es.js +2 -2
- package/dist/components/ui/dialog.es.js.map +1 -1
- package/dist/components/ui/drawer.es.js +99 -0
- package/dist/components/ui/drawer.es.js.map +1 -0
- package/dist/components/ui/dropdown-menu.es.js +59 -59
- package/dist/components/ui/dropdown-menu.es.js.map +1 -1
- package/dist/components/ui/form.es.js +2 -2
- package/dist/components/ui/form.es.js.map +1 -1
- package/dist/components/ui/input-otp.es.js +49 -0
- package/dist/components/ui/input-otp.es.js.map +1 -0
- package/dist/components/ui/input.es.js +7 -7
- package/dist/components/ui/input.es.js.map +1 -1
- package/dist/components/ui/label.es.js +7 -7
- package/dist/components/ui/label.es.js.map +1 -1
- package/dist/components/ui/navigation-menu.es.js +2 -2
- package/dist/components/ui/navigation-menu.es.js.map +1 -1
- package/dist/components/ui/select.es.js +21 -21
- package/dist/components/ui/select.es.js.map +1 -1
- package/dist/components/ui/sheet.es.js +5 -5
- package/dist/components/ui/sheet.es.js.map +1 -1
- package/dist/components/ui/sidebar.es.js +85 -85
- package/dist/components/ui/sidebar.es.js.map +1 -1
- package/dist/components/ui/table.es.js +8 -8
- package/dist/components/ui/table.es.js.map +1 -1
- package/dist/components/ui/tabs.es.js +47 -0
- package/dist/components/ui/tabs.es.js.map +1 -0
- package/dist/components/ui/tooltip.es.js +8 -8
- package/dist/components/ui/tooltip.es.js.map +1 -1
- package/dist/index.es.d.ts +109 -8
- package/dist/index.es.js +220 -193
- package/dist/index.es.js.map +1 -1
- package/dist/utils/index.es.js +17 -5
- package/dist/utils/index.es.js.map +1 -1
- package/lib/index.css +12 -9
- package/lib/tokens.css +14 -14
- package/package.json +7 -4
- package/tailwind.preset.ts +68 -77
|
@@ -4,7 +4,7 @@ import { Slot as g } from "@radix-ui/react-slot";
|
|
|
4
4
|
import { cva as I } from "class-variance-authority";
|
|
5
5
|
import { PanelLeft as k } from "lucide-react";
|
|
6
6
|
import { useIsMobile as z } from "../../hooks/use-mobile.es.js";
|
|
7
|
-
import { cn as
|
|
7
|
+
import { cn as o } from "../../utils/index.es.js";
|
|
8
8
|
import { Button as B } from "./button.es.js";
|
|
9
9
|
import { Input as E } from "./input.es.js";
|
|
10
10
|
import { Separator as T } from "./separator.es.js";
|
|
@@ -12,7 +12,7 @@ import { Sheet as A, SheetContent as D } from "./sheet.es.js";
|
|
|
12
12
|
import { Skeleton as M } from "./skeleton.es.js";
|
|
13
13
|
import { TooltipProvider as G, Tooltip as O, TooltipTrigger as H, TooltipContent as K } from "./tooltip.es.js";
|
|
14
14
|
const L = "sidebar:state", j = 60 * 60 * 24 * 7, $ = "16rem", V = "18rem", W = "3rem", q = "b", R = i.createContext(null);
|
|
15
|
-
function
|
|
15
|
+
function y() {
|
|
16
16
|
const a = i.useContext(R);
|
|
17
17
|
if (!a)
|
|
18
18
|
throw new Error("useSidebar must be used within a SidebarProvider.");
|
|
@@ -23,12 +23,12 @@ const F = i.forwardRef(
|
|
|
23
23
|
defaultOpen: a = !0,
|
|
24
24
|
open: e,
|
|
25
25
|
onOpenChange: t,
|
|
26
|
-
className:
|
|
26
|
+
className: d,
|
|
27
27
|
style: n,
|
|
28
28
|
children: s,
|
|
29
|
-
...
|
|
29
|
+
...u
|
|
30
30
|
}, m) => {
|
|
31
|
-
const c = z(), [f,
|
|
31
|
+
const c = z(), [f, b] = i.useState(!1), [h, _] = i.useState(a), p = e ?? h, v = i.useCallback(
|
|
32
32
|
(l) => {
|
|
33
33
|
if (t)
|
|
34
34
|
return t == null ? void 0 : t(
|
|
@@ -37,24 +37,24 @@ const F = i.forwardRef(
|
|
|
37
37
|
_(l), document.cookie = `${L}=${p}; path=/; max-age=${j}`;
|
|
38
38
|
},
|
|
39
39
|
[t, p]
|
|
40
|
-
), x = i.useCallback(() => c ?
|
|
40
|
+
), x = i.useCallback(() => c ? b((l) => !l) : v((l) => !l), [c, v, b]);
|
|
41
41
|
i.useEffect(() => {
|
|
42
42
|
const l = (w) => {
|
|
43
43
|
w.key === q && (w.metaKey || w.ctrlKey) && (w.preventDefault(), x());
|
|
44
44
|
};
|
|
45
45
|
return window.addEventListener("keydown", l), () => window.removeEventListener("keydown", l);
|
|
46
46
|
}, [x]);
|
|
47
|
-
const
|
|
47
|
+
const N = p ? "expanded" : "collapsed", C = i.useMemo(
|
|
48
48
|
() => ({
|
|
49
|
-
state:
|
|
49
|
+
state: N,
|
|
50
50
|
open: p,
|
|
51
51
|
setOpen: v,
|
|
52
52
|
isMobile: c,
|
|
53
53
|
openMobile: f,
|
|
54
|
-
setOpenMobile:
|
|
54
|
+
setOpenMobile: b,
|
|
55
55
|
toggleSidebar: x
|
|
56
56
|
}),
|
|
57
|
-
[
|
|
57
|
+
[N, p, v, c, f, b, x]
|
|
58
58
|
);
|
|
59
59
|
return /* @__PURE__ */ r(R.Provider, { value: C, children: /* @__PURE__ */ r(G, { delayDuration: 0, children: /* @__PURE__ */ r(
|
|
60
60
|
"div",
|
|
@@ -64,12 +64,12 @@ const F = i.forwardRef(
|
|
|
64
64
|
"--sidebar-width-icon": W,
|
|
65
65
|
...n
|
|
66
66
|
},
|
|
67
|
-
className:
|
|
67
|
+
className: o(
|
|
68
68
|
"group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",
|
|
69
|
-
|
|
69
|
+
d
|
|
70
70
|
),
|
|
71
71
|
ref: m,
|
|
72
|
-
...
|
|
72
|
+
...u,
|
|
73
73
|
children: s
|
|
74
74
|
}
|
|
75
75
|
) }) });
|
|
@@ -81,23 +81,23 @@ const U = i.forwardRef(
|
|
|
81
81
|
side: a = "left",
|
|
82
82
|
variant: e = "sidebar",
|
|
83
83
|
collapsible: t = "offcanvas",
|
|
84
|
-
className:
|
|
84
|
+
className: d,
|
|
85
85
|
children: n,
|
|
86
86
|
...s
|
|
87
|
-
},
|
|
88
|
-
const { isMobile: m, state: c, openMobile: f, setOpenMobile:
|
|
87
|
+
}, u) => {
|
|
88
|
+
const { isMobile: m, state: c, openMobile: f, setOpenMobile: b } = y();
|
|
89
89
|
return t === "none" ? /* @__PURE__ */ r(
|
|
90
90
|
"div",
|
|
91
91
|
{
|
|
92
|
-
className:
|
|
92
|
+
className: o(
|
|
93
93
|
"flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground",
|
|
94
|
-
|
|
94
|
+
d
|
|
95
95
|
),
|
|
96
|
-
ref:
|
|
96
|
+
ref: u,
|
|
97
97
|
...s,
|
|
98
98
|
children: n
|
|
99
99
|
}
|
|
100
|
-
) : m ? /* @__PURE__ */ r(A, { open: f, onOpenChange:
|
|
100
|
+
) : m ? /* @__PURE__ */ r(A, { open: f, onOpenChange: b, ...s, children: /* @__PURE__ */ r(
|
|
101
101
|
D,
|
|
102
102
|
{
|
|
103
103
|
"data-sidebar": "sidebar",
|
|
@@ -112,7 +112,7 @@ const U = i.forwardRef(
|
|
|
112
112
|
) }) : /* @__PURE__ */ S(
|
|
113
113
|
"div",
|
|
114
114
|
{
|
|
115
|
-
ref:
|
|
115
|
+
ref: u,
|
|
116
116
|
className: "group peer hidden md:block text-sidebar-foreground",
|
|
117
117
|
"data-state": c,
|
|
118
118
|
"data-collapsible": c === "collapsed" ? t : "",
|
|
@@ -122,7 +122,7 @@ const U = i.forwardRef(
|
|
|
122
122
|
/* @__PURE__ */ r(
|
|
123
123
|
"div",
|
|
124
124
|
{
|
|
125
|
-
className:
|
|
125
|
+
className: o(
|
|
126
126
|
"duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear",
|
|
127
127
|
"group-data-[collapsible=offcanvas]:w-0",
|
|
128
128
|
"group-data-[side=right]:rotate-180",
|
|
@@ -133,12 +133,12 @@ const U = i.forwardRef(
|
|
|
133
133
|
/* @__PURE__ */ r(
|
|
134
134
|
"div",
|
|
135
135
|
{
|
|
136
|
-
className:
|
|
136
|
+
className: o(
|
|
137
137
|
"duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex",
|
|
138
138
|
a === "left" ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]" : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
|
|
139
139
|
// Adjust the padding for floating and inset variants.
|
|
140
140
|
e === "floating" || e === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]" : "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
|
|
141
|
-
|
|
141
|
+
d
|
|
142
142
|
),
|
|
143
143
|
...s,
|
|
144
144
|
children: /* @__PURE__ */ r(
|
|
@@ -157,16 +157,16 @@ const U = i.forwardRef(
|
|
|
157
157
|
}
|
|
158
158
|
);
|
|
159
159
|
U.displayName = "Sidebar";
|
|
160
|
-
const X = i.forwardRef(({ className: a, onClick: e, ...t },
|
|
161
|
-
const { toggleSidebar: n } =
|
|
160
|
+
const X = i.forwardRef(({ className: a, onClick: e, ...t }, d) => {
|
|
161
|
+
const { toggleSidebar: n } = y();
|
|
162
162
|
return /* @__PURE__ */ S(
|
|
163
163
|
B,
|
|
164
164
|
{
|
|
165
|
-
ref:
|
|
165
|
+
ref: d,
|
|
166
166
|
"data-sidebar": "trigger",
|
|
167
167
|
variant: "ghost",
|
|
168
168
|
size: "icon",
|
|
169
|
-
className:
|
|
169
|
+
className: o("h-7 w-7", a),
|
|
170
170
|
onClick: (s) => {
|
|
171
171
|
e == null || e(s), n();
|
|
172
172
|
},
|
|
@@ -180,7 +180,7 @@ const X = i.forwardRef(({ className: a, onClick: e, ...t }, o) => {
|
|
|
180
180
|
});
|
|
181
181
|
X.displayName = "SidebarTrigger";
|
|
182
182
|
const Y = i.forwardRef(({ className: a, ...e }, t) => {
|
|
183
|
-
const { toggleSidebar:
|
|
183
|
+
const { toggleSidebar: d } = y();
|
|
184
184
|
return /* @__PURE__ */ r(
|
|
185
185
|
"button",
|
|
186
186
|
{
|
|
@@ -188,9 +188,9 @@ const Y = i.forwardRef(({ className: a, ...e }, t) => {
|
|
|
188
188
|
"data-sidebar": "rail",
|
|
189
189
|
"aria-label": "Toggle Sidebar",
|
|
190
190
|
tabIndex: -1,
|
|
191
|
-
onClick:
|
|
191
|
+
onClick: d,
|
|
192
192
|
title: "Toggle Sidebar",
|
|
193
|
-
className:
|
|
193
|
+
className: o(
|
|
194
194
|
"absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
|
|
195
195
|
"[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
|
|
196
196
|
"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
|
|
@@ -208,7 +208,7 @@ const J = i.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r(
|
|
|
208
208
|
"main",
|
|
209
209
|
{
|
|
210
210
|
ref: t,
|
|
211
|
-
className:
|
|
211
|
+
className: o(
|
|
212
212
|
"relative flex min-h-svh flex-1 flex-col bg-background",
|
|
213
213
|
"peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
|
|
214
214
|
a
|
|
@@ -222,7 +222,7 @@ const P = i.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r(
|
|
|
222
222
|
{
|
|
223
223
|
ref: t,
|
|
224
224
|
"data-sidebar": "input",
|
|
225
|
-
className:
|
|
225
|
+
className: o(
|
|
226
226
|
"h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
|
|
227
227
|
a
|
|
228
228
|
),
|
|
@@ -235,7 +235,7 @@ const Q = i.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r(
|
|
|
235
235
|
{
|
|
236
236
|
ref: t,
|
|
237
237
|
"data-sidebar": "header",
|
|
238
|
-
className:
|
|
238
|
+
className: o("flex flex-col gap-2 p-2", a),
|
|
239
239
|
...e
|
|
240
240
|
}
|
|
241
241
|
));
|
|
@@ -245,7 +245,7 @@ const Z = i.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r(
|
|
|
245
245
|
{
|
|
246
246
|
ref: t,
|
|
247
247
|
"data-sidebar": "footer",
|
|
248
|
-
className:
|
|
248
|
+
className: o("flex flex-col gap-2 p-2", a),
|
|
249
249
|
...e
|
|
250
250
|
}
|
|
251
251
|
));
|
|
@@ -255,7 +255,7 @@ const ee = i.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r(
|
|
|
255
255
|
{
|
|
256
256
|
ref: t,
|
|
257
257
|
"data-sidebar": "separator",
|
|
258
|
-
className:
|
|
258
|
+
className: o("mx-2 w-auto bg-sidebar-border", a),
|
|
259
259
|
...e
|
|
260
260
|
}
|
|
261
261
|
));
|
|
@@ -265,7 +265,7 @@ const ae = i.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r(
|
|
|
265
265
|
{
|
|
266
266
|
ref: t,
|
|
267
267
|
"data-sidebar": "content",
|
|
268
|
-
className:
|
|
268
|
+
className: o(
|
|
269
269
|
"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
|
|
270
270
|
a
|
|
271
271
|
),
|
|
@@ -278,18 +278,18 @@ const te = i.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r(
|
|
|
278
278
|
{
|
|
279
279
|
ref: t,
|
|
280
280
|
"data-sidebar": "group",
|
|
281
|
-
className:
|
|
281
|
+
className: o("relative flex w-full min-w-0 flex-col p-2", a),
|
|
282
282
|
...e
|
|
283
283
|
}
|
|
284
284
|
));
|
|
285
285
|
te.displayName = "SidebarGroup";
|
|
286
|
-
const re = i.forwardRef(({ className: a, asChild: e = !1, ...t },
|
|
286
|
+
const re = i.forwardRef(({ className: a, asChild: e = !1, ...t }, d) => /* @__PURE__ */ r(
|
|
287
287
|
e ? g : "div",
|
|
288
288
|
{
|
|
289
|
-
ref:
|
|
289
|
+
ref: d,
|
|
290
290
|
"data-sidebar": "group-label",
|
|
291
|
-
className:
|
|
292
|
-
"duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-
|
|
291
|
+
className: o(
|
|
292
|
+
"duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-caption font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
|
|
293
293
|
"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
|
|
294
294
|
a
|
|
295
295
|
),
|
|
@@ -297,12 +297,12 @@ const re = i.forwardRef(({ className: a, asChild: e = !1, ...t }, o) => /* @__PU
|
|
|
297
297
|
}
|
|
298
298
|
));
|
|
299
299
|
re.displayName = "SidebarGroupLabel";
|
|
300
|
-
const ie = i.forwardRef(({ className: a, asChild: e = !1, ...t },
|
|
300
|
+
const ie = i.forwardRef(({ className: a, asChild: e = !1, ...t }, d) => /* @__PURE__ */ r(
|
|
301
301
|
e ? g : "button",
|
|
302
302
|
{
|
|
303
|
-
ref:
|
|
303
|
+
ref: d,
|
|
304
304
|
"data-sidebar": "group-action",
|
|
305
|
-
className:
|
|
305
|
+
className: o(
|
|
306
306
|
"absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
|
|
307
307
|
// Increases the hit area of the button on mobile.
|
|
308
308
|
"after:absolute after:-inset-2 after:md:hidden",
|
|
@@ -313,38 +313,38 @@ const ie = i.forwardRef(({ className: a, asChild: e = !1, ...t }, o) => /* @__PU
|
|
|
313
313
|
}
|
|
314
314
|
));
|
|
315
315
|
ie.displayName = "SidebarGroupAction";
|
|
316
|
-
const
|
|
316
|
+
const oe = i.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r(
|
|
317
317
|
"div",
|
|
318
318
|
{
|
|
319
319
|
ref: t,
|
|
320
320
|
"data-sidebar": "group-content",
|
|
321
|
-
className:
|
|
321
|
+
className: o("w-full text-body", a),
|
|
322
322
|
...e
|
|
323
323
|
}
|
|
324
324
|
));
|
|
325
|
-
|
|
326
|
-
const
|
|
325
|
+
oe.displayName = "SidebarGroupContent";
|
|
326
|
+
const de = i.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r(
|
|
327
327
|
"ul",
|
|
328
328
|
{
|
|
329
329
|
ref: t,
|
|
330
330
|
"data-sidebar": "menu",
|
|
331
|
-
className:
|
|
331
|
+
className: o("flex w-full min-w-0 flex-col gap-1", a),
|
|
332
332
|
...e
|
|
333
333
|
}
|
|
334
334
|
));
|
|
335
|
-
|
|
335
|
+
de.displayName = "SidebarMenu";
|
|
336
336
|
const ne = i.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r(
|
|
337
337
|
"li",
|
|
338
338
|
{
|
|
339
339
|
ref: t,
|
|
340
340
|
"data-sidebar": "menu-item",
|
|
341
|
-
className:
|
|
341
|
+
className: o("group/menu-item relative", a),
|
|
342
342
|
...e
|
|
343
343
|
}
|
|
344
344
|
));
|
|
345
345
|
ne.displayName = "SidebarMenuItem";
|
|
346
346
|
const se = I(
|
|
347
|
-
"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-
|
|
347
|
+
"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-body outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
|
|
348
348
|
{
|
|
349
349
|
variants: {
|
|
350
350
|
variant: {
|
|
@@ -352,9 +352,9 @@ const se = I(
|
|
|
352
352
|
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))]"
|
|
353
353
|
},
|
|
354
354
|
size: {
|
|
355
|
-
default: "h-8 text-
|
|
356
|
-
sm: "h-7 text-
|
|
357
|
-
lg: "h-12 text-
|
|
355
|
+
default: "h-8 text-body",
|
|
356
|
+
sm: "h-7 text-caption",
|
|
357
|
+
lg: "h-12 text-body group-data-[collapsible=icon]:!p-0"
|
|
358
358
|
}
|
|
359
359
|
},
|
|
360
360
|
defaultVariants: {
|
|
@@ -367,20 +367,20 @@ const se = I(
|
|
|
367
367
|
asChild: a = !1,
|
|
368
368
|
isActive: e = !1,
|
|
369
369
|
variant: t = "default",
|
|
370
|
-
size:
|
|
370
|
+
size: d = "default",
|
|
371
371
|
tooltip: n,
|
|
372
372
|
className: s,
|
|
373
|
-
...
|
|
373
|
+
...u
|
|
374
374
|
}, m) => {
|
|
375
|
-
const c = a ? g : "button", { isMobile: f, state:
|
|
375
|
+
const c = a ? g : "button", { isMobile: f, state: b } = y(), h = /* @__PURE__ */ r(
|
|
376
376
|
c,
|
|
377
377
|
{
|
|
378
378
|
ref: m,
|
|
379
379
|
"data-sidebar": "menu-button",
|
|
380
|
-
"data-size":
|
|
380
|
+
"data-size": d,
|
|
381
381
|
"data-active": e,
|
|
382
|
-
className:
|
|
383
|
-
...
|
|
382
|
+
className: o(se({ variant: t, size: d }), s),
|
|
383
|
+
...u
|
|
384
384
|
}
|
|
385
385
|
);
|
|
386
386
|
return n ? (typeof n == "string" && (n = {
|
|
@@ -392,7 +392,7 @@ const se = I(
|
|
|
392
392
|
{
|
|
393
393
|
side: "right",
|
|
394
394
|
align: "center",
|
|
395
|
-
hidden:
|
|
395
|
+
hidden: b !== "collapsed" || f,
|
|
396
396
|
...n
|
|
397
397
|
}
|
|
398
398
|
)
|
|
@@ -400,12 +400,12 @@ const se = I(
|
|
|
400
400
|
}
|
|
401
401
|
);
|
|
402
402
|
le.displayName = "SidebarMenuButton";
|
|
403
|
-
const ce = i.forwardRef(({ className: a, asChild: e = !1, showOnHover: t = !1, ...
|
|
403
|
+
const ce = i.forwardRef(({ className: a, asChild: e = !1, showOnHover: t = !1, ...d }, n) => /* @__PURE__ */ r(
|
|
404
404
|
e ? g : "button",
|
|
405
405
|
{
|
|
406
406
|
ref: n,
|
|
407
407
|
"data-sidebar": "menu-action",
|
|
408
|
-
className:
|
|
408
|
+
className: o(
|
|
409
409
|
"absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
|
|
410
410
|
// Increases the hit area of the button on mobile.
|
|
411
411
|
"after:absolute after:-inset-2 after:md:hidden",
|
|
@@ -416,17 +416,17 @@ const ce = i.forwardRef(({ className: a, asChild: e = !1, showOnHover: t = !1, .
|
|
|
416
416
|
t && "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",
|
|
417
417
|
a
|
|
418
418
|
),
|
|
419
|
-
...
|
|
419
|
+
...d
|
|
420
420
|
}
|
|
421
421
|
));
|
|
422
422
|
ce.displayName = "SidebarMenuAction";
|
|
423
|
-
const
|
|
423
|
+
const be = i.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r(
|
|
424
424
|
"div",
|
|
425
425
|
{
|
|
426
426
|
ref: t,
|
|
427
427
|
"data-sidebar": "menu-badge",
|
|
428
|
-
className:
|
|
429
|
-
"absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-
|
|
428
|
+
className: o(
|
|
429
|
+
"absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-caption font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none",
|
|
430
430
|
"peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
|
|
431
431
|
"peer-data-[size=sm]/menu-button:top-1",
|
|
432
432
|
"peer-data-[size=default]/menu-button:top-1.5",
|
|
@@ -437,15 +437,15 @@ const ue = i.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r(
|
|
|
437
437
|
...e
|
|
438
438
|
}
|
|
439
439
|
));
|
|
440
|
-
|
|
441
|
-
const
|
|
440
|
+
be.displayName = "SidebarMenuBadge";
|
|
441
|
+
const ue = i.forwardRef(({ className: a, showIcon: e = !1, ...t }, d) => {
|
|
442
442
|
const n = i.useMemo(() => `${Math.floor(Math.random() * 40) + 50}%`, []);
|
|
443
443
|
return /* @__PURE__ */ S(
|
|
444
444
|
"div",
|
|
445
445
|
{
|
|
446
|
-
ref:
|
|
446
|
+
ref: d,
|
|
447
447
|
"data-sidebar": "menu-skeleton",
|
|
448
|
-
className:
|
|
448
|
+
className: o("rounded-md h-8 flex gap-2 px-2 items-center", a),
|
|
449
449
|
...t,
|
|
450
450
|
children: [
|
|
451
451
|
e && /* @__PURE__ */ r(
|
|
@@ -469,13 +469,13 @@ const be = i.forwardRef(({ className: a, showIcon: e = !1, ...t }, o) => {
|
|
|
469
469
|
}
|
|
470
470
|
);
|
|
471
471
|
});
|
|
472
|
-
|
|
472
|
+
ue.displayName = "SidebarMenuSkeleton";
|
|
473
473
|
const fe = i.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r(
|
|
474
474
|
"ul",
|
|
475
475
|
{
|
|
476
476
|
ref: t,
|
|
477
477
|
"data-sidebar": "menu-sub",
|
|
478
|
-
className:
|
|
478
|
+
className: o(
|
|
479
479
|
"mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",
|
|
480
480
|
"group-data-[collapsible=icon]:hidden",
|
|
481
481
|
a
|
|
@@ -486,20 +486,20 @@ const fe = i.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r(
|
|
|
486
486
|
fe.displayName = "SidebarMenuSub";
|
|
487
487
|
const pe = i.forwardRef(({ ...a }, e) => /* @__PURE__ */ r("li", { ref: e, ...a }));
|
|
488
488
|
pe.displayName = "SidebarMenuSubItem";
|
|
489
|
-
const me = i.forwardRef(({ asChild: a = !1, size: e = "md", isActive: t, className:
|
|
489
|
+
const me = i.forwardRef(({ asChild: a = !1, size: e = "md", isActive: t, className: d, ...n }, s) => /* @__PURE__ */ r(
|
|
490
490
|
a ? g : "a",
|
|
491
491
|
{
|
|
492
492
|
ref: s,
|
|
493
493
|
"data-sidebar": "menu-sub-button",
|
|
494
494
|
"data-size": e,
|
|
495
495
|
"data-active": t,
|
|
496
|
-
className:
|
|
496
|
+
className: o(
|
|
497
497
|
"flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
|
|
498
498
|
"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
|
|
499
|
-
e === "sm" && "text-
|
|
500
|
-
e === "md" && "text-
|
|
499
|
+
e === "sm" && "text-caption",
|
|
500
|
+
e === "md" && "text-body",
|
|
501
501
|
"group-data-[collapsible=icon]:hidden",
|
|
502
|
-
|
|
502
|
+
d
|
|
503
503
|
),
|
|
504
504
|
...n
|
|
505
505
|
}
|
|
@@ -511,17 +511,17 @@ export {
|
|
|
511
511
|
Z as SidebarFooter,
|
|
512
512
|
te as SidebarGroup,
|
|
513
513
|
ie as SidebarGroupAction,
|
|
514
|
-
|
|
514
|
+
oe as SidebarGroupContent,
|
|
515
515
|
re as SidebarGroupLabel,
|
|
516
516
|
Q as SidebarHeader,
|
|
517
517
|
P as SidebarInput,
|
|
518
518
|
J as SidebarInset,
|
|
519
|
-
|
|
519
|
+
de as SidebarMenu,
|
|
520
520
|
ce as SidebarMenuAction,
|
|
521
|
-
|
|
521
|
+
be as SidebarMenuBadge,
|
|
522
522
|
le as SidebarMenuButton,
|
|
523
523
|
ne as SidebarMenuItem,
|
|
524
|
-
|
|
524
|
+
ue as SidebarMenuSkeleton,
|
|
525
525
|
fe as SidebarMenuSub,
|
|
526
526
|
me as SidebarMenuSubButton,
|
|
527
527
|
pe as SidebarMenuSubItem,
|
|
@@ -529,6 +529,6 @@ export {
|
|
|
529
529
|
Y as SidebarRail,
|
|
530
530
|
ee as SidebarSeparator,
|
|
531
531
|
X as SidebarTrigger,
|
|
532
|
-
|
|
532
|
+
y as useSidebar
|
|
533
533
|
};
|
|
534
534
|
//# sourceMappingURL=sidebar.es.js.map
|