@cryptlex/web-components 1.2.1 → 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.
Files changed (55) hide show
  1. package/dist/components/ui/accordion.es.js +8 -8
  2. package/dist/components/ui/accordion.es.js.map +1 -1
  3. package/dist/components/ui/avatar.es.js +43 -0
  4. package/dist/components/ui/avatar.es.js.map +1 -0
  5. package/dist/components/ui/badge.es.js +1 -1
  6. package/dist/components/ui/badge.es.js.map +1 -1
  7. package/dist/components/ui/breadcrumb.es.js +1 -1
  8. package/dist/components/ui/breadcrumb.es.js.map +1 -1
  9. package/dist/components/ui/button.es.js +17 -17
  10. package/dist/components/ui/button.es.js.map +1 -1
  11. package/dist/components/ui/calendar.es.js +3 -3
  12. package/dist/components/ui/calendar.es.js.map +1 -1
  13. package/dist/components/ui/card.es.js +17 -17
  14. package/dist/components/ui/card.es.js.map +1 -1
  15. package/dist/components/ui/chart.es.js +14 -14
  16. package/dist/components/ui/chart.es.js.map +1 -1
  17. package/dist/components/ui/command.es.js +19 -19
  18. package/dist/components/ui/command.es.js.map +1 -1
  19. package/dist/components/ui/dialog.es.js +2 -2
  20. package/dist/components/ui/dialog.es.js.map +1 -1
  21. package/dist/components/ui/drawer.es.js +99 -0
  22. package/dist/components/ui/drawer.es.js.map +1 -0
  23. package/dist/components/ui/dropdown-menu.es.js +59 -59
  24. package/dist/components/ui/dropdown-menu.es.js.map +1 -1
  25. package/dist/components/ui/form.es.js +2 -2
  26. package/dist/components/ui/form.es.js.map +1 -1
  27. package/dist/components/ui/input-otp.es.js +49 -0
  28. package/dist/components/ui/input-otp.es.js.map +1 -0
  29. package/dist/components/ui/input.es.js +7 -7
  30. package/dist/components/ui/input.es.js.map +1 -1
  31. package/dist/components/ui/label.es.js +7 -7
  32. package/dist/components/ui/label.es.js.map +1 -1
  33. package/dist/components/ui/navigation-menu.es.js +51 -52
  34. package/dist/components/ui/navigation-menu.es.js.map +1 -1
  35. package/dist/components/ui/select.es.js +21 -21
  36. package/dist/components/ui/select.es.js.map +1 -1
  37. package/dist/components/ui/sheet.es.js +5 -5
  38. package/dist/components/ui/sheet.es.js.map +1 -1
  39. package/dist/components/ui/sidebar.es.js +85 -85
  40. package/dist/components/ui/sidebar.es.js.map +1 -1
  41. package/dist/components/ui/table.es.js +8 -8
  42. package/dist/components/ui/table.es.js.map +1 -1
  43. package/dist/components/ui/tabs.es.js +47 -0
  44. package/dist/components/ui/tabs.es.js.map +1 -0
  45. package/dist/components/ui/tooltip.es.js +8 -8
  46. package/dist/components/ui/tooltip.es.js.map +1 -1
  47. package/dist/index.es.d.ts +109 -8
  48. package/dist/index.es.js +220 -193
  49. package/dist/index.es.js.map +1 -1
  50. package/dist/utils/index.es.js +17 -5
  51. package/dist/utils/index.es.js.map +1 -1
  52. package/lib/index.css +12 -9
  53. package/lib/tokens.css +14 -14
  54. package/package.json +7 -4
  55. 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 d } from "../../utils/index.es.js";
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 N() {
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: o,
26
+ className: d,
27
27
  style: n,
28
28
  children: s,
29
- ...b
29
+ ...u
30
30
  }, m) => {
31
- const c = z(), [f, u] = i.useState(!1), [h, _] = i.useState(a), p = e ?? h, v = i.useCallback(
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 ? u((l) => !l) : v((l) => !l), [c, v, u]);
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 y = p ? "expanded" : "collapsed", C = i.useMemo(
47
+ const N = p ? "expanded" : "collapsed", C = i.useMemo(
48
48
  () => ({
49
- state: y,
49
+ state: N,
50
50
  open: p,
51
51
  setOpen: v,
52
52
  isMobile: c,
53
53
  openMobile: f,
54
- setOpenMobile: u,
54
+ setOpenMobile: b,
55
55
  toggleSidebar: x
56
56
  }),
57
- [y, p, v, c, f, u, x]
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: d(
67
+ className: o(
68
68
  "group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",
69
- o
69
+ d
70
70
  ),
71
71
  ref: m,
72
- ...b,
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: o,
84
+ className: d,
85
85
  children: n,
86
86
  ...s
87
- }, b) => {
88
- const { isMobile: m, state: c, openMobile: f, setOpenMobile: u } = N();
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: d(
92
+ className: o(
93
93
  "flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground",
94
- o
94
+ d
95
95
  ),
96
- ref: b,
96
+ ref: u,
97
97
  ...s,
98
98
  children: n
99
99
  }
100
- ) : m ? /* @__PURE__ */ r(A, { open: f, onOpenChange: u, ...s, children: /* @__PURE__ */ r(
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: b,
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: d(
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: d(
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
- o
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 }, o) => {
161
- const { toggleSidebar: n } = 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: o,
165
+ ref: d,
166
166
  "data-sidebar": "trigger",
167
167
  variant: "ghost",
168
168
  size: "icon",
169
- className: d("h-7 w-7", a),
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: o } = N();
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: o,
191
+ onClick: d,
192
192
  title: "Toggle Sidebar",
193
- className: d(
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: d(
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: d(
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: d("flex flex-col gap-2 p-2", a),
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: d("flex flex-col gap-2 p-2", a),
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: d("mx-2 w-auto bg-sidebar-border", a),
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: d(
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: d("relative flex w-full min-w-0 flex-col p-2", a),
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 }, o) => /* @__PURE__ */ r(
286
+ const re = i.forwardRef(({ className: a, asChild: e = !1, ...t }, d) => /* @__PURE__ */ r(
287
287
  e ? g : "div",
288
288
  {
289
- ref: o,
289
+ ref: d,
290
290
  "data-sidebar": "group-label",
291
- className: d(
292
- "duration-200 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,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
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 }, o) => /* @__PURE__ */ r(
300
+ const ie = i.forwardRef(({ className: a, asChild: e = !1, ...t }, d) => /* @__PURE__ */ r(
301
301
  e ? g : "button",
302
302
  {
303
- ref: o,
303
+ ref: d,
304
304
  "data-sidebar": "group-action",
305
- className: d(
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 de = i.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r(
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: d("w-full text-sm", a),
321
+ className: o("w-full text-body", a),
322
322
  ...e
323
323
  }
324
324
  ));
325
- de.displayName = "SidebarGroupContent";
326
- const oe = i.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r(
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: d("flex w-full min-w-0 flex-col gap-1", a),
331
+ className: o("flex w-full min-w-0 flex-col gap-1", a),
332
332
  ...e
333
333
  }
334
334
  ));
335
- oe.displayName = "SidebarMenu";
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: d("group/menu-item relative", a),
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-sm 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",
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-sm",
356
- sm: "h-7 text-xs",
357
- lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0"
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: o = "default",
370
+ size: d = "default",
371
371
  tooltip: n,
372
372
  className: s,
373
- ...b
373
+ ...u
374
374
  }, m) => {
375
- const c = a ? g : "button", { isMobile: f, state: u } = N(), h = /* @__PURE__ */ r(
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": o,
380
+ "data-size": d,
381
381
  "data-active": e,
382
- className: d(se({ variant: t, size: o }), s),
383
- ...b
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: u !== "collapsed" || f,
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, ...o }, n) => /* @__PURE__ */ r(
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: d(
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
- ...o
419
+ ...d
420
420
  }
421
421
  ));
422
422
  ce.displayName = "SidebarMenuAction";
423
- const ue = i.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r(
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: d(
429
- "absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none",
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
- ue.displayName = "SidebarMenuBadge";
441
- const be = i.forwardRef(({ className: a, showIcon: e = !1, ...t }, o) => {
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: o,
446
+ ref: d,
447
447
  "data-sidebar": "menu-skeleton",
448
- className: d("rounded-md h-8 flex gap-2 px-2 items-center", a),
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
- be.displayName = "SidebarMenuSkeleton";
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: d(
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: o, ...n }, s) => /* @__PURE__ */ r(
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: d(
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-xs",
500
- e === "md" && "text-sm",
499
+ e === "sm" && "text-caption",
500
+ e === "md" && "text-body",
501
501
  "group-data-[collapsible=icon]:hidden",
502
- o
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
- de as SidebarGroupContent,
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
- oe as SidebarMenu,
519
+ de as SidebarMenu,
520
520
  ce as SidebarMenuAction,
521
- ue as SidebarMenuBadge,
521
+ be as SidebarMenuBadge,
522
522
  le as SidebarMenuButton,
523
523
  ne as SidebarMenuItem,
524
- be as SidebarMenuSkeleton,
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
- N as useSidebar
532
+ y as useSidebar
533
533
  };
534
534
  //# sourceMappingURL=sidebar.es.js.map