ml-uikit 1.1.1 → 1.1.2

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