@cryptlex/web-components 3.1.1 → 3.2.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 (17) hide show
  1. package/dist/components/inputs/input-otp.es.js +6 -6
  2. package/dist/components/inputs/input-otp.es.js.map +1 -1
  3. package/dist/components/ui/dropdown-menu.es.js +1 -1
  4. package/dist/components/ui/dropdown-menu.es.js.map +1 -1
  5. package/dist/components/ui/sheet.es.js +1 -1
  6. package/dist/components/ui/sheet.es.js.map +1 -1
  7. package/dist/components/ui/sidebar.es.js +135 -200
  8. package/dist/components/ui/sidebar.es.js.map +1 -1
  9. package/dist/components/ui/tabs.es.js +20 -20
  10. package/dist/components/ui/tabs.es.js.map +1 -1
  11. package/dist/index.es.d.ts +32 -28
  12. package/dist/index.es.js +163 -160
  13. package/dist/index.es.js.map +1 -1
  14. package/lib/index.css +1 -1
  15. package/lib/theme.css +5 -0
  16. package/lib/utilities.css +1 -1
  17. package/package.json +2 -2
package/dist/components/ui/sidebar.es.js CHANGED
@@ -1,106 +1,105 @@
1
+ "use client";
1
2
  import { jsx as t, jsxs as p } from "react/jsx-runtime";
2
- import { Root as x } from "../../node_modules/.pnpm/@radix-ui_react-slot@1.2.3_@types_react@19.1.0_react@19.1.0/node_modules/@radix-ui/react-slot/dist/index.es.js";
3
- import { Menu as k, ChevronLeft as T, ChevronRight as I } from "lucide-react";
4
- import * as c from "react";
5
- import { Button as _ } from "./button.es.js";
6
- import { Separator as D } from "./separator.es.js";
7
- import { Sheet as B, SheetContent as E, SheetHeader as R, SheetTitle as A, SheetDescription as H } from "./sheet.es.js";
3
+ import { Root as h } from "../../node_modules/.pnpm/@radix-ui_react-slot@1.2.3_@types_react@19.1.0_react@19.1.0/node_modules/@radix-ui/react-slot/dist/index.es.js";
4
+ import { PanelLeft as z } from "lucide-react";
5
+ import * as s from "react";
6
+ import { Button as k } from "./button.es.js";
7
+ import { Sheet as T, SheetContent as I, SheetHeader as D, SheetTitle as R, SheetDescription as B } from "./sheet.es.js";
8
8
  import { Skeleton as y } from "./skeleton.es.js";
9
- import { TooltipProvider as j, Tooltip as L, TooltipTrigger as G, TooltipContent as K } from "./tooltip.es.js";
10
- import { useIsMobile as O } from "../../hooks/use-mobile.es.js";
9
+ import { TooltipProvider as E, Tooltip as O, TooltipTrigger as A, TooltipContent as H } from "./tooltip.es.js";
10
+ import { useIsMobile as j } from "../../hooks/use-mobile.es.js";
11
11
  import { cn as i } from "../../utils/index.es.js";
12
- const W = "16rem", q = "18rem", F = "3rem", U = "b", N = c.createContext(null);
12
+ const L = "16rem", G = "18rem", K = "3rem", P = "b", N = s.createContext(null);
13
13
  function w() {
14
- const a = c.use(N);
14
+ const a = s.useContext(N);
15
15
  if (!a)
16
16
  throw new Error("useSidebar must be used within a SidebarProvider.");
17
17
  return a;
18
18
  }
19
- function te({
19
+ function Z({
20
20
  defaultOpen: a = !0,
21
21
  open: e,
22
22
  onOpenChange: r,
23
23
  className: n,
24
24
  style: o,
25
- children: s,
26
- ...u
25
+ children: c,
26
+ ...m
27
27
  }) {
28
- const l = O(), [b, f] = c.useState(!1), [M, C] = c.useState(a), g = e ?? M, m = c.useCallback(
28
+ const l = j(), [u, f] = s.useState(!1), [M, C] = s.useState(a), g = e ?? M, v = s.useCallback(
29
29
  (d) => {
30
- if (r)
31
- return r == null ? void 0 : r(typeof d == "function" ? d(g) : d);
32
- C(d);
30
+ const b = typeof d == "function" ? d(g) : d;
31
+ r ? r(b) : C(b);
33
32
  },
34
33
  [r, g]
35
- ), h = c.useCallback(() => l ? f((d) => !d) : m((d) => !d), [l, m, f]);
36
- c.useEffect(() => {
37
- const d = (v) => {
38
- v.key === U && (v.metaKey || v.ctrlKey) && (v.preventDefault(), h());
34
+ ), x = s.useCallback(() => l ? f((d) => !d) : v((d) => !d), [l, v, f]);
35
+ s.useEffect(() => {
36
+ const d = (b) => {
37
+ b.key === P && (b.metaKey || b.ctrlKey) && (b.preventDefault(), x());
39
38
  };
40
39
  return window.addEventListener("keydown", d), () => window.removeEventListener("keydown", d);
41
- }, [h]);
42
- const S = g ? "expanded" : "collapsed", z = c.useMemo(
40
+ }, [x]);
41
+ const S = g ? "expanded" : "collapsed", _ = s.useMemo(
43
42
  () => ({
44
43
  state: S,
45
44
  open: g,
46
- setOpen: m,
45
+ setOpen: v,
47
46
  isMobile: l,
48
- openMobile: b,
47
+ openMobile: u,
49
48
  setOpenMobile: f,
50
- toggleSidebar: h
49
+ toggleSidebar: x
51
50
  }),
52
- [S, g, m, l, b, f, h]
51
+ [S, g, v, l, u, f, x]
53
52
  );
54
- return /* @__PURE__ */ t(N, { value: z, children: /* @__PURE__ */ t(j, { delayDuration: 0, children: /* @__PURE__ */ t(
53
+ return /* @__PURE__ */ t(N.Provider, { value: _, children: /* @__PURE__ */ t(E, { delayDuration: 0, children: /* @__PURE__ */ t(
55
54
  "div",
56
55
  {
57
56
  style: {
58
- "--sidebar-width": W,
59
- "--sidebar-width-icon": F,
57
+ "--sidebar-width": L,
58
+ "--sidebar-width-icon": K,
60
59
  ...o
61
60
  },
62
61
  className: i(
63
- "group/sidebar-wrapper flex w-full has-data-[variant=inset]:bg-sidebar",
62
+ "group/sidebar-wrapper flex w-full has-[[data-variant=inset]]:bg-sidebar",
64
63
  n
65
64
  ),
66
- ...u,
67
- children: s
65
+ ...m,
66
+ children: c
68
67
  }
69
68
  ) }) });
70
69
  }
71
- function re({
70
+ function ee({
72
71
  side: a = "left",
73
72
  variant: e = "sidebar",
74
73
  collapsible: r = "offcanvas",
75
74
  className: n,
76
75
  children: o,
77
- ...s
76
+ ...c
78
77
  }) {
79
- const { isMobile: u, state: l, openMobile: b, setOpenMobile: f } = w();
78
+ const { isMobile: m, state: l, openMobile: u, setOpenMobile: f } = w();
80
79
  return r === "none" ? /* @__PURE__ */ t(
81
80
  "div",
82
81
  {
83
82
  className: i(
84
- "flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground",
83
+ "flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground",
85
84
  n
86
85
  ),
87
- ...s,
86
+ ...c,
88
87
  children: o
89
88
  }
90
- ) : u ? /* @__PURE__ */ t(B, { open: b, onOpenChange: f, ...s, children: /* @__PURE__ */ p(
91
- E,
89
+ ) : m ? /* @__PURE__ */ t(T, { open: u, onOpenChange: f, ...c, children: /* @__PURE__ */ p(
90
+ I,
92
91
  {
93
92
  "data-sidebar": "sidebar",
94
93
  "data-mobile": "true",
95
- className: "w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden",
94
+ className: "w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden",
96
95
  style: {
97
- "--sidebar-width": q
96
+ "--sidebar-width": G
98
97
  },
99
98
  side: a,
100
99
  children: [
101
- /* @__PURE__ */ p(R, { children: [
102
- /* @__PURE__ */ t(A, {}),
103
- /* @__PURE__ */ t(H, {})
100
+ /* @__PURE__ */ p(D, { className: "sr-only", children: [
101
+ /* @__PURE__ */ t(R, { children: "Sidebar" }),
102
+ /* @__PURE__ */ t(B, { children: "Displays the mobile sidebar." })
104
103
  ] }),
105
104
  /* @__PURE__ */ t("div", { className: "flex h-full w-full flex-col", children: o })
106
105
  ]
@@ -108,7 +107,7 @@ function re({
108
107
  ) }) : /* @__PURE__ */ p(
109
108
  "div",
110
109
  {
111
- className: "group peer hidden md:block text-sidebar-foreground",
110
+ className: "group peer hidden text-sidebar-foreground md:block",
112
111
  "data-state": l,
113
112
  "data-collapsible": l === "collapsed" ? r : "",
114
113
  "data-variant": e,
@@ -118,10 +117,10 @@ function re({
118
117
  "div",
119
118
  {
120
119
  className: i(
121
- "duration-200 relative w-(--sidebar-width) bg-transparent transition-[width] ease-linear",
120
+ "relative w-(--sidebar-width) bg-sidebar transition-[width] duration-200 ease-linear",
122
121
  "group-data-[collapsible=offcanvas]:w-0",
123
122
  "group-data-[side=right]:rotate-180",
124
- e === "floating" || e === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
123
+ e === "floating" || e === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]" : "group-data-[collapsible=icon]:w-[--sidebar-width-icon]"
125
124
  )
126
125
  }
127
126
  ),
@@ -129,18 +128,18 @@ function re({
129
128
  "div",
130
129
  {
131
130
  className: i(
132
- "duration-200 fixed inset-y-0 z-10 hidden w-(--sidebar-width) transition-[left,right,width] ease-linear md:flex",
131
+ "absolute z-10 hidden w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
133
132
  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)]",
134
133
  // Adjust the padding for floating and inset variants.
135
- e === "floating" || e === "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",
134
+ 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",
136
135
  n
137
136
  ),
138
- ...s,
137
+ ...c,
139
138
  children: /* @__PURE__ */ t(
140
139
  "div",
141
140
  {
142
141
  "data-sidebar": "sidebar",
143
- className: "flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow-sm",
142
+ className: "flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow",
144
143
  children: o
145
144
  }
146
145
  )
@@ -150,47 +149,41 @@ function re({
150
149
  }
151
150
  );
152
151
  }
153
- function ie({
154
- className: a,
155
- onClick: e,
156
- ...r
157
- }) {
158
- const { toggleSidebar: n, open: o, isMobile: s } = w();
152
+ function ae({ className: a, onClick: e, ...r }) {
153
+ const { toggleSidebar: n } = w();
159
154
  return /* @__PURE__ */ p(
160
- _,
155
+ k,
161
156
  {
162
157
  "data-sidebar": "trigger",
163
158
  variant: "ghost",
164
- size: "sm",
165
- onClick: (u) => {
166
- e == null || e(u), n();
159
+ size: "icon",
160
+ onClick: (o) => {
161
+ e == null || e(o), n();
167
162
  },
168
163
  ...r,
169
164
  children: [
170
- s ? /* @__PURE__ */ t(k, {}) : o ? /* @__PURE__ */ t(T, {}) : /* @__PURE__ */ t(I, {}),
165
+ /* @__PURE__ */ t(z, {}),
171
166
  /* @__PURE__ */ t("span", { className: "sr-only", children: "Toggle Sidebar" })
172
167
  ]
173
168
  }
174
169
  );
175
170
  }
176
- function ne({
177
- className: a,
178
- ...e
179
- }) {
180
- const { toggleSidebar: r } = w();
171
+ const W = s.forwardRef(({ className: a, ...e }, r) => {
172
+ const { toggleSidebar: n } = w();
181
173
  return /* @__PURE__ */ t(
182
174
  "button",
183
175
  {
176
+ ref: r,
184
177
  "data-sidebar": "rail",
185
178
  "aria-label": "Toggle Sidebar",
186
179
  tabIndex: -1,
187
- onClick: r,
180
+ onClick: n,
188
181
  title: "Toggle Sidebar",
189
182
  className: i(
190
183
  "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",
191
- "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
184
+ "[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
192
185
  "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
193
- "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar",
186
+ "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar",
194
187
  "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
195
188
  "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
196
189
  a
@@ -198,27 +191,22 @@ function ne({
198
191
  ...e
199
192
  }
200
193
  );
201
- }
202
- function oe({
203
- className: a,
204
- ...e
205
- }) {
194
+ });
195
+ W.displayName = "SidebarRail";
196
+ function te({ className: a, ...e }) {
206
197
  return /* @__PURE__ */ t(
207
198
  "main",
208
199
  {
209
200
  className: i(
210
- "relative flex flex-1 flex-col bg-background",
211
- "peer-data-[variant=inset]:min-h-[calc(100svh-(--spacing(4)))] md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:shadow-sm",
201
+ "relative flex w-full flex-1 flex-col bg-background",
202
+ "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",
212
203
  a
213
204
  ),
214
205
  ...e
215
206
  }
216
207
  );
217
208
  }
218
- function de({
219
- className: a,
220
- ...e
221
- }) {
209
+ function re({ className: a, ...e }) {
222
210
  return /* @__PURE__ */ t(
223
211
  "div",
224
212
  {
@@ -228,10 +216,7 @@ function de({
228
216
  }
229
217
  );
230
218
  }
231
- function se({
232
- className: a,
233
- ...e
234
- }) {
219
+ function ie({ className: a, ...e }) {
235
220
  return /* @__PURE__ */ t(
236
221
  "div",
237
222
  {
@@ -241,23 +226,7 @@ function se({
241
226
  }
242
227
  );
243
228
  }
244
- function le({
245
- className: a,
246
- ...e
247
- }) {
248
- return /* @__PURE__ */ t(
249
- D,
250
- {
251
- "data-sidebar": "separator",
252
- className: i("mx-2 w-auto bg-sidebar-border", a),
253
- ...e
254
- }
255
- );
256
- }
257
- function ce({
258
- className: a,
259
- ...e
260
- }) {
229
+ function ne({ className: a, ...e }) {
261
230
  return /* @__PURE__ */ t(
262
231
  "div",
263
232
  {
@@ -270,7 +239,7 @@ function ce({
270
239
  }
271
240
  );
272
241
  }
273
- function ue({ className: a, ...e }) {
242
+ function oe({ className: a, ...e }) {
274
243
  return /* @__PURE__ */ t(
275
244
  "div",
276
245
  {
@@ -280,36 +249,29 @@ function ue({ className: a, ...e }) {
280
249
  }
281
250
  );
282
251
  }
283
- function be({
284
- className: a,
285
- ...e
286
- }) {
252
+ function de({ className: a, asChild: e = !1, ...r }) {
287
253
  return /* @__PURE__ */ t(
288
- "div",
254
+ e ? h : "div",
289
255
  {
290
256
  "data-sidebar": "group-label",
291
257
  className: i(
292
- "duration-200 flex h-8 shrink-0 items-center rounded-md px-2 caption font-medium text-sidebar-foreground/70 outline-hidden ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-1 [&>svg]:size-4 [&>svg]:shrink-0",
258
+ "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
293
259
  "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
294
260
  a
295
261
  ),
296
- ...e
262
+ ...r
297
263
  }
298
264
  );
299
265
  }
300
- function fe({
301
- className: a,
302
- asChild: e = !1,
303
- ...r
304
- }) {
266
+ function se({ className: a, asChild: e = !1, ...r }) {
305
267
  return /* @__PURE__ */ t(
306
- e ? x : "button",
268
+ e ? h : "button",
307
269
  {
308
270
  "data-sidebar": "group-action",
309
271
  className: i(
310
- "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-1 [&>svg]:size-4 [&>svg]:shrink-0",
272
+ "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",
311
273
  // Increases the hit area of the button on mobile.
312
- "after:absolute after:-inset-2 md:after:hidden",
274
+ "after:absolute after:-inset-2 after:md:hidden",
313
275
  "group-data-[collapsible=icon]:hidden",
314
276
  a
315
277
  ),
@@ -317,33 +279,27 @@ function fe({
317
279
  }
318
280
  );
319
281
  }
320
- function pe({
321
- className: a,
322
- ...e
323
- }) {
282
+ function le({ className: a, ...e }) {
324
283
  return /* @__PURE__ */ t(
325
284
  "div",
326
285
  {
327
286
  "data-sidebar": "group-content",
328
- className: i("w-full body", a),
287
+ className: i("w-full text-sm", a),
329
288
  ...e
330
289
  }
331
290
  );
332
291
  }
333
- function ge({ className: a, ...e }) {
292
+ function ce({ className: a, ...e }) {
334
293
  return /* @__PURE__ */ t(
335
294
  "ul",
336
295
  {
337
296
  "data-sidebar": "menu",
338
- className: i("flex w-full min-w-0 flex-col", a),
297
+ className: i("flex w-full min-w-0 flex-col gap-1", a),
339
298
  ...e
340
299
  }
341
300
  );
342
301
  }
343
- function me({
344
- className: a,
345
- ...e
346
- }) {
302
+ function ue({ className: a, ...e }) {
347
303
  return /* @__PURE__ */ t(
348
304
  "li",
349
305
  {
@@ -353,51 +309,46 @@ function me({
353
309
  }
354
310
  );
355
311
  }
356
- function he({
312
+ function be({
357
313
  asChild: a = !1,
358
314
  isActive: e = !1,
359
315
  tooltip: r,
360
316
  className: n,
361
317
  ...o
362
318
  }) {
363
- const s = a ? x : "button", { isMobile: u, state: l } = w(), b = /* @__PURE__ */ t(
364
- s,
319
+ const c = a ? h : "button", { isMobile: m, state: l } = w(), u = /* @__PURE__ */ t(
320
+ c,
365
321
  {
366
322
  "data-sidebar": "menu-button",
367
323
  "data-active": e,
368
- className: i("peer/menu-button btn h-input flex w-full items-center gap-2 overflow-hidden p-2 text-left body hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none 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", n),
324
+ className: i("peer/menu-button btn h-input flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-sm hover:bg-sidebar-primary/20 hover:text-sidebar-primary group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 data-[active=true]:bg-sidebar-primary/20 data-[active=true]:font-medium data-[active=true]:text-sidebar-primary group-data-[collapsible=icon]:!size-icon group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0", n),
369
325
  ...o
370
326
  }
371
327
  );
372
328
  return r ? (typeof r == "string" && (r = {
373
329
  children: r
374
- }), /* @__PURE__ */ p(L, { children: [
375
- /* @__PURE__ */ t(G, { asChild: !0, children: b }),
330
+ }), /* @__PURE__ */ p(O, { children: [
331
+ /* @__PURE__ */ t(A, { asChild: !0, children: u }),
376
332
  /* @__PURE__ */ t(
377
- K,
333
+ H,
378
334
  {
379
335
  side: "right",
380
336
  align: "center",
381
- hidden: l !== "collapsed" || u,
337
+ hidden: l !== "collapsed" || m,
382
338
  ...r
383
339
  }
384
340
  )
385
- ] })) : b;
341
+ ] })) : u;
386
342
  }
387
- function ve({
388
- className: a,
389
- asChild: e = !1,
390
- showOnHover: r = !1,
391
- ...n
392
- }) {
343
+ function fe({ className: a, asChild: e = !1, showOnHover: r = !1, ...n }) {
393
344
  return /* @__PURE__ */ t(
394
- e ? x : "button",
345
+ e ? h : "button",
395
346
  {
396
347
  "data-sidebar": "menu-action",
397
348
  className: i(
398
- "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-1 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
349
+ "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",
399
350
  // Increases the hit area of the button on mobile.
400
- "after:absolute after:-inset-2 md:after:hidden",
351
+ "after:absolute after:-inset-2 after:md:hidden",
401
352
  "peer-data-[size=sm]/menu-button:top-1",
402
353
  "peer-data-[size=default]/menu-button:top-1.5",
403
354
  "peer-data-[size=lg]/menu-button:top-2.5",
@@ -409,16 +360,13 @@ function ve({
409
360
  }
410
361
  );
411
362
  }
412
- function xe({
413
- className: a,
414
- ...e
415
- }) {
363
+ function pe({ className: a, ...e }) {
416
364
  return /* @__PURE__ */ t(
417
365
  "div",
418
366
  {
419
367
  "data-sidebar": "menu-badge",
420
368
  className: i(
421
- "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",
369
+ "pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground",
422
370
  "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
423
371
  "peer-data-[size=sm]/menu-button:top-1",
424
372
  "peer-data-[size=default]/menu-button:top-1.5",
@@ -430,17 +378,13 @@ function xe({
430
378
  }
431
379
  );
432
380
  }
433
- function we({
434
- className: a,
435
- showIcon: e = !1,
436
- ...r
437
- }) {
438
- const n = c.useMemo(() => `${Math.floor(Math.random() * 40) + 50}%`, []);
381
+ function me({ className: a, showIcon: e = !1, ...r }) {
382
+ const n = s.useMemo(() => `${Math.floor(Math.random() * 40) + 50}%`, []);
439
383
  return /* @__PURE__ */ p(
440
384
  "div",
441
385
  {
442
386
  "data-sidebar": "menu-skeleton",
443
- className: i("rounded-md h-8 flex gap-2 px-2 items-center", a),
387
+ className: i("flex h-8 items-center gap-2 rounded-md px-2", a),
444
388
  ...r,
445
389
  children: [
446
390
  e && /* @__PURE__ */ t(
@@ -453,7 +397,7 @@ function we({
453
397
  /* @__PURE__ */ t(
454
398
  y,
455
399
  {
456
- className: "h-4 flex-1 max-w-(--skeleton-width)",
400
+ className: "h-4 max-w-[--skeleton-width] flex-1",
457
401
  "data-sidebar": "menu-skeleton-text",
458
402
  style: {
459
403
  "--skeleton-width": n
@@ -464,16 +408,13 @@ function we({
464
408
  }
465
409
  );
466
410
  }
467
- function Se({
468
- className: a,
469
- ...e
470
- }) {
411
+ function ge({ className: a, ...e }) {
471
412
  return /* @__PURE__ */ t(
472
413
  "ul",
473
414
  {
474
415
  "data-sidebar": "menu-sub",
475
416
  className: i(
476
- "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 px-2.5 py-0.5",
417
+ "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",
477
418
  "group-data-[collapsible=icon]:hidden",
478
419
  a
479
420
  ),
@@ -481,27 +422,21 @@ function Se({
481
422
  }
482
423
  );
483
424
  }
484
- function ye({ ...a }) {
425
+ function he({ ...a }) {
485
426
  return /* @__PURE__ */ t("li", { ...a });
486
427
  }
487
- function Ne({
488
- asChild: a = !1,
489
- size: e = "md",
490
- isActive: r,
491
- className: n,
492
- ...o
493
- }) {
428
+ function ve({ asChild: a = !1, size: e = "md", isActive: r, className: n, ...o }) {
494
429
  return /* @__PURE__ */ t(
495
- a ? x : "a",
430
+ a ? h : "a",
496
431
  {
497
432
  "data-sidebar": "menu-sub-button",
498
433
  "data-size": e,
499
434
  "data-active": r,
500
435
  className: i(
501
- "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-hidden ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-1 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",
436
+ "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",
502
437
  "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
503
- e === "sm" && "text-caption",
504
- e === "md" && "body",
438
+ e === "sm" && "text-xs",
439
+ e === "md" && "text-sm",
505
440
  "group-data-[collapsible=icon]:hidden",
506
441
  n
507
442
  ),
@@ -510,28 +445,28 @@ function Ne({
510
445
  );
511
446
  }
512
447
  export {
513
- re as Sidebar,
514
- ce as SidebarContent,
515
- se as SidebarFooter,
516
- ue as SidebarGroup,
517
- fe as SidebarGroupAction,
518
- pe as SidebarGroupContent,
519
- be as SidebarGroupLabel,
520
- de as SidebarHeader,
521
- oe as SidebarInset,
522
- ge as SidebarMenu,
523
- ve as SidebarMenuAction,
524
- xe as SidebarMenuBadge,
525
- he as SidebarMenuButton,
526
- me as SidebarMenuItem,
527
- we as SidebarMenuSkeleton,
528
- Se as SidebarMenuSub,
529
- Ne as SidebarMenuSubButton,
530
- ye as SidebarMenuSubItem,
531
- te as SidebarProvider,
532
- ne as SidebarRail,
533
- le as SidebarSeparator,
534
- ie as SidebarTrigger,
448
+ ee as Sidebar,
449
+ ne as SidebarContent,
450
+ N as SidebarContext,
451
+ ie as SidebarFooter,
452
+ oe as SidebarGroup,
453
+ se as SidebarGroupAction,
454
+ le as SidebarGroupContent,
455
+ de as SidebarGroupLabel,
456
+ re as SidebarHeader,
457
+ te as SidebarInset,
458
+ ce as SidebarMenu,
459
+ fe as SidebarMenuAction,
460
+ pe as SidebarMenuBadge,
461
+ be as SidebarMenuButton,
462
+ ue as SidebarMenuItem,
463
+ me as SidebarMenuSkeleton,
464
+ ge as SidebarMenuSub,
465
+ ve as SidebarMenuSubButton,
466
+ he as SidebarMenuSubItem,
467
+ Z as SidebarProvider,
468
+ W as SidebarRail,
469
+ ae as SidebarTrigger,
535
470
  w as useSidebar
536
471
  };
537
472
  //# sourceMappingURL=sidebar.es.js.map