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