ics-ui-kit 0.1.14 → 0.1.15

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 (15) hide show
  1. package/dist/components/counter.js +6 -6
  2. package/dist/components/counter.js.map +1 -1
  3. package/dist/components/dialog/Dialog.stories.d.ts +1 -0
  4. package/dist/components/dropdown.js +98 -98
  5. package/dist/components/dropdown.js.map +1 -1
  6. package/dist/components/glass-toolbar/GlassToolbar.stories.d.ts +1 -0
  7. package/dist/components/glass-toolbar.js +35 -35
  8. package/dist/components/glass-toolbar.js.map +1 -1
  9. package/dist/components/sidebar/Sidebar.stories.d.ts +278 -2
  10. package/dist/components/sidebar/SidebarContext.d.ts +2 -0
  11. package/dist/components/sidebar.js +220 -210
  12. package/dist/components/sidebar.js.map +1 -1
  13. package/dist/styles-scoped.css +12 -9
  14. package/dist/styles.css +12 -9
  15. package/package.json +1 -1
package/dist/components/sidebar.js CHANGED
@@ -1,120 +1,130 @@
1
- import { jsx as r, jsxs as p, Fragment as z } from "react/jsx-runtime";
2
- import { e as T } from "../useBreakpoints-DHvp74UL.js";
3
- import o from "react";
4
- import { T as B, b as D, c as A, a as E } from "../Tooltip-7Duaau0S.js";
1
+ import { jsx as r, jsxs as f, Fragment as B } from "react/jsx-runtime";
2
+ import { e as E } from "../useBreakpoints-DHvp74UL.js";
3
+ import s from "react";
4
+ import { T as A, b as D, c as G } from "../Tooltip-7Duaau0S.js";
5
5
  import { c as w } from "../cn-dsXlqdJg.js";
6
- import { S as G, a as L, b as O, d as H, e as P } from "../Sheet-qTIXsqm0.js";
6
+ import { S as L, a as H, b as O, d as P, e as K } from "../Sheet-qTIXsqm0.js";
7
7
  import { I as R } from "../IconButton-DwkpNgn3.js";
8
- import { T as K } from "../TextInput-Cj50ImXi.js";
9
- import { D as j } from "../Divider-DPW5ZhZ8.js";
10
- import { S as v } from "../index-BtQfgaSF.js";
8
+ import { T as j } from "../TextInput-Cj50ImXi.js";
9
+ import { D as F } from "../Divider-DPW5ZhZ8.js";
10
+ import { S as y } from "../index-BtQfgaSF.js";
11
11
  import { T as n } from "../index-BVqs-uqP.js";
12
12
  import { S as I } from "../Skeleton-y6I-i9q5.js";
13
- import { S as F } from "../ScrollShadowContainer-DdrnF8qU.js";
14
- import { P as $ } from "../plus-BpxYPnAG.js";
15
- import { c as q } from "../createLucideIcon-DwBrHnj9.js";
13
+ import { S as $ } from "../ScrollShadowContainer-DdrnF8qU.js";
14
+ import { P as q } from "../plus-BpxYPnAG.js";
15
+ import { c as W } from "../createLucideIcon-DwBrHnj9.js";
16
16
  /**
17
17
  * @license lucide-react v0.460.0 - ISC
18
18
  *
19
19
  * This source code is licensed under the ISC license.
20
20
  * See the LICENSE file in the root directory of this source tree.
21
21
  */
22
- const W = q("PanelLeft", [
22
+ const V = W("PanelLeft", [
23
23
  ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
24
24
  ["path", { d: "M9 3v18", key: "fh3hqa" }]
25
- ]), C = o.createContext(null);
25
+ ]), C = s.createContext(null);
26
26
  function N() {
27
- const e = o.useContext(C);
28
- if (!e)
27
+ const a = s.useContext(C);
28
+ if (!a)
29
29
  throw new Error("useSidebar must be used within a SidebarProvider.");
30
- return e;
30
+ return a;
31
31
  }
32
- const V = "sidebar_state", U = 60 * 60 * 24 * 7, X = "16rem", Y = "18rem", J = "3rem", Q = "b", Z = n({
33
- base: "group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-primary-bg"
34
- }), ee = o.forwardRef(({ defaultOpen: e = !0, open: a, onOpenChange: t, className: i, style: s, children: d, ...u }, m) => {
35
- const c = T(), [f, g] = o.useState(!1), [y, k] = o.useState(e), h = a ?? y, S = o.useCallback(
36
- (l) => {
37
- const b = typeof l == "function" ? l(h) : l;
38
- t ? t(b) : k(b), document.cookie = `${V}=${b}; path=/; max-age=${U}`;
32
+ const U = "sidebar_state", X = 60 * 60 * 24 * 7, Y = "16rem", J = "18rem", Q = "3rem", Z = "b", ee = n({
33
+ base: "group/sidebar-wrapper flex min-h-svh w-full",
34
+ variants: {
35
+ hasInset: {
36
+ true: "bg-primary-bg"
37
+ }
38
+ }
39
+ }), ae = s.forwardRef(({ defaultOpen: a = !0, open: e, onOpenChange: t, className: o, style: i, children: d, ...p }, m) => {
40
+ const u = E(), [g, l] = s.useState(!1), [h, k] = s.useState(!1), [_, z] = s.useState(a), v = e ?? _, S = s.useCallback(
41
+ (c) => {
42
+ const b = typeof c == "function" ? c(v) : c;
43
+ t ? t(b) : z(b), document.cookie = `${U}=${b}; path=/; max-age=${X}`;
39
44
  },
40
- [t, h]
41
- ), x = o.useCallback(() => c ? g((l) => !l) : S((l) => !l), [c, S, g]);
42
- o.useEffect(() => {
43
- const l = (b) => {
44
- b.key === Q && (b.metaKey || b.ctrlKey) && (b.preventDefault(), x());
45
+ [t, v]
46
+ ), x = s.useCallback(() => u ? l((c) => !c) : S((c) => !c), [u, S, l]);
47
+ s.useEffect(() => {
48
+ const c = (b) => {
49
+ b.key === Z && (b.metaKey || b.ctrlKey) && (b.preventDefault(), x());
45
50
  };
46
- return window.addEventListener("keydown", l), () => window.removeEventListener("keydown", l);
51
+ return window.addEventListener("keydown", c), () => window.removeEventListener("keydown", c);
47
52
  }, [x]);
48
- const M = h ? "expanded" : "collapsed", _ = o.useMemo(
53
+ const M = v ? "expanded" : "collapsed", T = s.useMemo(
49
54
  () => ({
50
55
  state: M,
51
- open: h,
56
+ open: v,
52
57
  setOpen: S,
53
- isMobile: c,
54
- openMobile: f,
55
- setOpenMobile: g,
56
- toggleSidebar: x
58
+ isMobile: u,
59
+ openMobile: g,
60
+ setOpenMobile: l,
61
+ toggleSidebar: x,
62
+ hasInset: h,
63
+ setHasInset: k
57
64
  }),
58
- [M, h, S, c, f, g, x]
65
+ [M, v, S, u, g, l, x, h]
59
66
  );
60
- return /* @__PURE__ */ r(C.Provider, { value: _, children: /* @__PURE__ */ r(E, { delayDuration: 0, children: /* @__PURE__ */ r(
67
+ return /* @__PURE__ */ r(C.Provider, { value: T, children: /* @__PURE__ */ r(
61
68
  "div",
62
69
  {
63
70
  style: {
64
- "--sidebar-width": X,
65
- "--sidebar-width-icon": J,
66
- ...s
71
+ "--sidebar-width": Y,
72
+ "--sidebar-width-icon": Q,
73
+ ...i
67
74
  },
68
- className: Z({ className: i }),
75
+ className: ee({ hasInset: h, className: o }),
69
76
  ref: m,
70
- ...u,
77
+ ...p,
71
78
  children: d
72
79
  }
73
- ) }) });
80
+ ) });
74
81
  });
75
- ee.displayName = "SidebarProvider";
76
- const ae = o.forwardRef(({ side: e = "left", variant: a = "sidebar", collapsible: t = "offcanvas", className: i, children: s, ...d }, u) => {
77
- const { state: m, openMobile: c, setOpenMobile: f } = N();
78
- return t === "none" ? /* @__PURE__ */ r(
82
+ ae.displayName = "SidebarProvider";
83
+ const te = s.forwardRef(({ side: a = "left", variant: e = "sidebar", collapsible: t = "offcanvas", className: o, children: i, ...d }, p) => {
84
+ const { state: m, openMobile: u, setOpenMobile: g, setHasInset: l } = N();
85
+ return s.useLayoutEffect(() => {
86
+ if (e === "inset")
87
+ return l(!0), () => l(!1);
88
+ }, [e, l]), t === "none" ? /* @__PURE__ */ r(
79
89
  "div",
80
90
  {
81
91
  className: w(
82
92
  "text-sidebar-foreground flex h-full w-[--sidebar-width] flex-col bg-sidebar-bg",
83
- i
93
+ o
84
94
  ),
85
- ref: u,
95
+ ref: p,
86
96
  ...d,
87
- children: s
97
+ children: i
88
98
  }
89
- ) : /* @__PURE__ */ p(z, { children: [
90
- /* @__PURE__ */ r("div", { className: "contents lg:hidden", children: /* @__PURE__ */ r(G, { open: c, onOpenChange: f, ...d, children: /* @__PURE__ */ p(
91
- L,
99
+ ) : /* @__PURE__ */ f(B, { children: [
100
+ /* @__PURE__ */ r("div", { className: "contents lg:hidden", children: /* @__PURE__ */ r(L, { open: u, onOpenChange: g, ...d, children: /* @__PURE__ */ f(
101
+ H,
92
102
  {
93
103
  "data-sidebar": "sidebar",
94
104
  "data-mobile": "true",
95
105
  className: "w-[--sidebar-width] bg-sidebar-bg p-0 text-secondary-fg [&>button]:hidden",
96
106
  style: {
97
- "--sidebar-width": Y
107
+ "--sidebar-width": J
98
108
  },
99
- side: e,
109
+ side: a,
100
110
  children: [
101
- /* @__PURE__ */ p(O, { className: "sr-only", children: [
102
- /* @__PURE__ */ r(H, { children: "Sidebar" }),
103
- /* @__PURE__ */ r(P, { children: "Displays the mobile sidebar." })
111
+ /* @__PURE__ */ f(O, { className: "sr-only", children: [
112
+ /* @__PURE__ */ r(P, { children: "Sidebar" }),
113
+ /* @__PURE__ */ r(K, { children: "Displays the mobile sidebar." })
104
114
  ] }),
105
- /* @__PURE__ */ r("div", { className: "flex h-full w-full flex-col", children: s })
115
+ /* @__PURE__ */ r("div", { className: "flex h-full w-full flex-col", children: i })
106
116
  ]
107
117
  }
108
118
  ) }) }),
109
- /* @__PURE__ */ p(
119
+ /* @__PURE__ */ f(
110
120
  "div",
111
121
  {
112
- ref: u,
122
+ ref: p,
113
123
  className: "text-sidebar-foreground group peer hidden lg:block",
114
124
  "data-state": m,
115
125
  "data-collapsible": m === "collapsed" ? t : "",
116
- "data-variant": a,
117
- "data-side": e,
126
+ "data-variant": e,
127
+ "data-side": a,
118
128
  children: [
119
129
  /* @__PURE__ */ r(
120
130
  "div",
@@ -123,7 +133,7 @@ const ae = o.forwardRef(({ side: e = "left", variant: a = "sidebar", collapsible
123
133
  "relative w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear",
124
134
  "group-data-[collapsible=offcanvas]:w-0",
125
135
  "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]"
136
+ 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]"
127
137
  )
128
138
  }
129
139
  ),
@@ -132,10 +142,10 @@ const ae = o.forwardRef(({ side: e = "left", variant: a = "sidebar", collapsible
132
142
  {
133
143
  className: w(
134
144
  "fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear lg:flex",
135
- e === "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)]",
145
+ 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)]",
136
146
  // 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 group-data-[side=left]:border-secondary-border group-data-[side=right]:border-secondary-border",
138
- i
147
+ 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 group-data-[side=left]:border-secondary-border group-data-[side=right]:border-secondary-border",
148
+ o
139
149
  ),
140
150
  ...d,
141
151
  children: /* @__PURE__ */ r(
@@ -143,7 +153,7 @@ const ae = o.forwardRef(({ side: e = "left", variant: a = "sidebar", collapsible
143
153
  {
144
154
  "data-sidebar": "sidebar",
145
155
  className: "flex h-full w-full flex-col bg-sidebar-bg group-data-[variant=floating]:rounded-xl group-data-[variant=floating]:border-0.5 group-data-[variant=floating]:border-primary-border group-data-[variant=floating]:shadow-soft-xl",
146
- children: s
156
+ children: i
147
157
  }
148
158
  )
149
159
  }
@@ -153,28 +163,28 @@ const ae = o.forwardRef(({ side: e = "left", variant: a = "sidebar", collapsible
153
163
  )
154
164
  ] });
155
165
  });
156
- ae.displayName = "Sidebar";
157
- const te = o.forwardRef(
158
- ({ onClick: e, ...a }, t) => {
159
- const { toggleSidebar: i } = N();
166
+ te.displayName = "Sidebar";
167
+ const re = s.forwardRef(
168
+ ({ onClick: a, ...e }, t) => {
169
+ const { toggleSidebar: o } = N();
160
170
  return /* @__PURE__ */ r(
161
171
  R,
162
172
  {
163
- icon: W,
173
+ icon: V,
164
174
  ref: t,
165
175
  "data-sidebar": "trigger",
166
176
  variant: "ghost",
167
- onClick: (s) => {
168
- e?.(s), i();
177
+ onClick: (i) => {
178
+ a?.(i), o();
169
179
  },
170
- ...a,
180
+ ...e,
171
181
  children: /* @__PURE__ */ r("span", { className: "sr-only", children: "Toggle Sidebar" })
172
182
  }
173
183
  );
174
184
  }
175
185
  );
176
- te.displayName = "SidebarTrigger";
177
- const re = n({
186
+ re.displayName = "SidebarTrigger";
187
+ const se = n({
178
188
  base: [
179
189
  "absolute inset-y-0 z-20 hidden w-[5px] -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-0 hover:after:-translate-x-1/2 hover:after:border-l hover:after:border-primary-border group-data-[side=left]:-right-[5px] group-data-[side=right]:left-0 sm:flex",
180
190
  "cursor-ew-resize",
@@ -182,9 +192,9 @@ const re = n({
182
192
  "[[data-side=left][data-collapsible=offcanvas]_&]:-right-[2.5px]",
183
193
  "[[data-side=right][data-collapsible=offcanvas]_&]:-left-[2.5px]"
184
194
  ]
185
- }), oe = o.forwardRef(
186
- ({ className: e, ...a }, t) => {
187
- const { toggleSidebar: i } = N();
195
+ }), oe = s.forwardRef(
196
+ ({ className: a, ...e }, t) => {
197
+ const { toggleSidebar: o } = N();
188
198
  return /* @__PURE__ */ r(
189
199
  "button",
190
200
  {
@@ -192,10 +202,10 @@ const re = n({
192
202
  "data-sidebar": "rail",
193
203
  "aria-label": "Toggle Sidebar",
194
204
  tabIndex: -1,
195
- onClick: i,
205
+ onClick: o,
196
206
  title: "Toggle Sidebar",
197
- className: re({ className: e }),
198
- ...a
207
+ className: se({ className: a }),
208
+ ...e
199
209
  }
200
210
  );
201
211
  }
@@ -206,105 +216,105 @@ const ie = n({
206
216
  "relative flex w-full flex-1 flex-col bg-secondary-bg",
207
217
  "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"
208
218
  ]
209
- }), se = o.forwardRef(({ className: e, ...a }, t) => /* @__PURE__ */ r("main", { ref: t, className: ie({ className: e }), ...a }));
210
- se.displayName = "SidebarInset";
211
- const ne = n({
219
+ }), ne = s.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r("main", { ref: t, className: ie({ className: a }), ...e }));
220
+ ne.displayName = "SidebarInset";
221
+ const de = n({
212
222
  base: "h-8 w-full shadow-none"
213
- }), de = o.forwardRef(
214
- ({ className: e, ...a }, t) => /* @__PURE__ */ r(K, { ref: t, "data-sidebar": "input", className: ne({ className: e }), ...a })
223
+ }), le = s.forwardRef(
224
+ ({ className: a, ...e }, t) => /* @__PURE__ */ r(j, { ref: t, "data-sidebar": "input", className: de({ className: a }), ...e })
215
225
  );
216
- de.displayName = "SidebarInput";
217
- const le = n({
226
+ le.displayName = "SidebarInput";
227
+ const ce = n({
218
228
  base: "flex flex-col gap-2 p-2 group-data-[variant=floating]:px-2.5"
219
- }), ce = o.forwardRef(({ className: e, ...a }, t) => /* @__PURE__ */ r("div", { ref: t, "data-sidebar": "header", className: le({ className: e }), ...a }));
220
- ce.displayName = "SidebarHeader";
229
+ }), ue = s.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r("div", { ref: t, "data-sidebar": "header", className: ce({ className: a }), ...e }));
230
+ ue.displayName = "SidebarHeader";
221
231
  const be = n({
222
232
  base: "flex flex-col gap-2 p-2 group-data-[variant=floating]:px-2.5"
223
- }), ue = o.forwardRef(({ className: e, ...a }, t) => /* @__PURE__ */ r("div", { ref: t, "data-sidebar": "footer", className: be({ className: e }), ...a }));
224
- ue.displayName = "SidebarFooter";
225
- const pe = n({
233
+ }), pe = s.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r("div", { ref: t, "data-sidebar": "footer", className: be({ className: a }), ...e }));
234
+ pe.displayName = "SidebarFooter";
235
+ const fe = n({
226
236
  base: "w-auto bg-secondary-border"
227
- }), me = o.forwardRef(
228
- ({ className: e, ...a }, t) => /* @__PURE__ */ r(
229
- j,
237
+ }), me = s.forwardRef(
238
+ ({ className: a, ...e }, t) => /* @__PURE__ */ r(
239
+ F,
230
240
  {
231
241
  ref: t,
232
242
  orientation: "horizontal",
233
243
  "data-sidebar": "separator",
234
- className: pe({ className: e }),
235
- ...a
244
+ className: fe({ className: a }),
245
+ ...e
236
246
  }
237
247
  )
238
248
  );
239
249
  me.displayName = "SidebarSeparator";
240
- const fe = n({
250
+ const ge = n({
241
251
  slots: {
242
252
  content: "flex flex-1 flex-col gap-2 group-data-[collapsible=icon]:overflow-hidden"
243
253
  }
244
- }), ge = o.forwardRef(
245
- ({ className: e, children: a, ...t }, i) => {
246
- const s = fe();
254
+ }), he = s.forwardRef(
255
+ ({ className: a, children: e, ...t }, o) => {
256
+ const i = ge();
247
257
  return /* @__PURE__ */ r(
248
- F,
258
+ $,
249
259
  {
250
- ref: i,
260
+ ref: o,
251
261
  "data-sidebar": "content",
252
- className: s.content({ className: e }),
262
+ className: i.content({ className: a }),
253
263
  shadowSize: 32,
254
264
  ...t,
255
- children: a
265
+ children: e
256
266
  }
257
267
  );
258
268
  }
259
269
  );
260
- ge.displayName = "SidebarContent";
261
- const he = n({
270
+ he.displayName = "SidebarContent";
271
+ const ve = n({
262
272
  base: "relative flex w-full min-w-0 flex-col p-2 group-data-[variant=floating]:px-2.5"
263
- }), ve = o.forwardRef(({ className: e, ...a }, t) => /* @__PURE__ */ r("div", { ref: t, "data-sidebar": "group", className: he({ className: e }), ...a }));
264
- ve.displayName = "SidebarGroup";
265
- const ye = n({
273
+ }), ye = s.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r("div", { ref: t, "data-sidebar": "group", className: ve({ className: a }), ...e }));
274
+ ye.displayName = "SidebarGroup";
275
+ const Se = n({
266
276
  base: [
267
277
  "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-secondary-fg/70 outline-none transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
268
278
  "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0"
269
279
  ]
270
- }), Se = o.forwardRef(
271
- ({ className: e, asChild: a = !1, ...t }, i) => /* @__PURE__ */ r(a ? v : "div", { ref: i, "data-sidebar": "group-label", className: ye({ className: e }), ...t })
280
+ }), xe = s.forwardRef(
281
+ ({ className: a, asChild: e = !1, ...t }, o) => /* @__PURE__ */ r(e ? y : "div", { ref: o, "data-sidebar": "group-label", className: Se({ className: a }), ...t })
272
282
  );
273
- Se.displayName = "SidebarGroupLabel";
274
- const xe = n({
283
+ xe.displayName = "SidebarGroupLabel";
284
+ const we = n({
275
285
  base: [
276
286
  "focus-visible:ring-primary2 absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-muted outline-none transition-transform hover:text-primary-fg focus-visible:shadow-focus [&>svg]:size-4 [&>svg]:shrink-0",
277
287
  // Increases the hit area of the button on mobile.
278
288
  "after:absolute after:-inset-2 after:md:hidden",
279
289
  "group-data-[collapsible=icon]:hidden"
280
290
  ]
281
- }), we = o.forwardRef(
282
- ({ className: e, asChild: a = !1, ...t }, i) => /* @__PURE__ */ r(
283
- a ? v : "button",
291
+ }), Ne = s.forwardRef(
292
+ ({ className: a, asChild: e = !1, ...t }, o) => /* @__PURE__ */ r(
293
+ e ? y : "button",
284
294
  {
285
- ref: i,
295
+ ref: o,
286
296
  "data-sidebar": "group-action",
287
- className: xe({ className: e }),
297
+ className: we({ className: a }),
288
298
  ...t
289
299
  }
290
300
  )
291
301
  );
292
- we.displayName = "SidebarGroupAction";
293
- const Ne = n({
302
+ Ne.displayName = "SidebarGroupAction";
303
+ const Me = n({
294
304
  base: "w-full text-sm"
295
- }), Me = o.forwardRef(
296
- ({ className: e, ...a }, t) => /* @__PURE__ */ r("div", { ref: t, "data-sidebar": "group-content", className: Ne({ className: e }), ...a })
305
+ }), Ie = s.forwardRef(
306
+ ({ className: a, ...e }, t) => /* @__PURE__ */ r("div", { ref: t, "data-sidebar": "group-content", className: Me({ className: a }), ...e })
297
307
  );
298
- Me.displayName = "SidebarGroupContent";
299
- const Ie = n({
308
+ Ie.displayName = "SidebarGroupContent";
309
+ const Re = n({
300
310
  base: "flex w-full min-w-0 flex-col gap-1"
301
- }), Re = o.forwardRef(({ className: e, ...a }, t) => /* @__PURE__ */ r("ul", { ref: t, "data-sidebar": "menu", className: Ie({ className: e }), ...a }));
302
- Re.displayName = "SidebarMenu";
303
- const Ce = n({
311
+ }), Ce = s.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r("ul", { ref: t, "data-sidebar": "menu", className: Re({ className: a }), ...e }));
312
+ Ce.displayName = "SidebarMenu";
313
+ const ke = n({
304
314
  base: "group/menu-item relative"
305
- }), ke = o.forwardRef(({ className: e, ...a }, t) => /* @__PURE__ */ r("li", { ref: t, "data-sidebar": "menu-item", className: Ce({ className: e }), ...a }));
306
- ke.displayName = "SidebarMenuItem";
307
- const _e = n({
315
+ }), _e = s.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r("li", { ref: t, "data-sidebar": "menu-item", className: ke({ className: a }), ...e }));
316
+ _e.displayName = "SidebarMenuItem";
317
+ const ze = n({
308
318
  base: [
309
319
  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md bg-primary-bg p-2 text-left text-sm text-secondary-fg outline-none transition-[width,height,padding]",
310
320
  "hover:bg-primary-bg-hover hover:text-primary-fg focus-visible:shadow-focus",
@@ -333,27 +343,27 @@ const _e = n({
333
343
  variant: "default",
334
344
  size: "default"
335
345
  }
336
- }), ze = o.forwardRef(({ asChild: e = !1, isActive: a = !1, variant: t = "default", size: i = "default", tooltip: s, className: d, ...u }, m) => {
337
- const c = e ? v : "button", { isMobile: f, state: g } = N(), y = /* @__PURE__ */ r(
338
- c,
346
+ }), Te = s.forwardRef(({ asChild: a = !1, isActive: e = !1, variant: t = "default", size: o = "default", tooltip: i, className: d, ...p }, m) => {
347
+ const u = a ? y : "button", { isMobile: g, state: l } = N(), h = /* @__PURE__ */ r(
348
+ u,
339
349
  {
340
350
  ref: m,
341
351
  "data-sidebar": "menu-button",
342
- "data-size": i,
343
- "data-active": a,
344
- className: w(_e({ variant: t, size: i }), d),
345
- ...u
352
+ "data-size": o,
353
+ "data-active": e,
354
+ className: w(ze({ variant: t, size: o }), d),
355
+ ...p
346
356
  }
347
357
  );
348
- return s ? (typeof s == "string" && (s = {
349
- children: s
350
- }), /* @__PURE__ */ p(B, { children: [
351
- /* @__PURE__ */ r(D, { asChild: !0, children: y }),
352
- /* @__PURE__ */ r(A, { side: "right", align: "center", hidden: g !== "collapsed" || f, ...s })
353
- ] })) : y;
358
+ return i ? (typeof i == "string" && (i = {
359
+ children: i
360
+ }), /* @__PURE__ */ f(A, { children: [
361
+ /* @__PURE__ */ r(D, { asChild: !0, children: h }),
362
+ /* @__PURE__ */ r(G, { side: "right", align: "center", hidden: l !== "collapsed" || g, ...i })
363
+ ] })) : h;
354
364
  });
355
- ze.displayName = "SidebarMenuButton";
356
- const Te = n({
365
+ Te.displayName = "SidebarMenuButton";
366
+ const Be = n({
357
367
  base: [
358
368
  "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-muted outline-none transition-transform hover:text-primary-fg focus-visible:ring-1 focus-visible:ring-primary peer-hover/menu-button:text-primary-fg [&>svg]:size-4 [&>svg]:shrink-0",
359
369
  // Increases the hit area of the button on mobile.
@@ -368,17 +378,17 @@ const Te = n({
368
378
  true: "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-primary-accent md:opacity-0"
369
379
  }
370
380
  }
371
- }), Be = o.forwardRef(({ className: e, asChild: a = !1, showOnHover: t = !1, ...i }, s) => /* @__PURE__ */ r(
372
- a ? v : "button",
381
+ }), Ee = s.forwardRef(({ className: a, asChild: e = !1, showOnHover: t = !1, ...o }, i) => /* @__PURE__ */ r(
382
+ e ? y : "button",
373
383
  {
374
- ref: s,
384
+ ref: i,
375
385
  "data-sidebar": "menu-action",
376
- className: Te({ isHover: t, className: e }),
377
- ...i
386
+ className: Be({ isHover: t, className: a }),
387
+ ...o
378
388
  }
379
389
  ));
380
- Be.displayName = "SidebarMenuAction";
381
- const De = n({
390
+ Ee.displayName = "SidebarMenuAction";
391
+ const Ae = n({
382
392
  base: [
383
393
  "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-normal tabular-nums leading-none text-muted",
384
394
  "peer-hover/menu-button:text-muted peer-disabled/menu-button:opacity-50 peer-data-[active=true]/menu-button:text-muted",
@@ -387,49 +397,49 @@ const De = n({
387
397
  "peer-data-[size=lg]/menu-button:top-2.5",
388
398
  "group-data-[collapsible=icon]:hidden"
389
399
  ]
390
- }), Ae = o.forwardRef(
391
- ({ className: e, ...a }, t) => /* @__PURE__ */ r("div", { ref: t, "data-sidebar": "menu-badge", className: De({ className: e }), ...a })
400
+ }), De = s.forwardRef(
401
+ ({ className: a, ...e }, t) => /* @__PURE__ */ r("div", { ref: t, "data-sidebar": "menu-badge", className: Ae({ className: a }), ...e })
392
402
  );
393
- Ae.displayName = "SidebarMenuBadge";
394
- const Ee = n({
403
+ De.displayName = "SidebarMenuBadge";
404
+ const Ge = n({
395
405
  slots: {
396
406
  wrapper: "flex h-8 items-center gap-2 rounded-md px-2",
397
407
  skeleton: "h-4 max-w-[--skeleton-width] flex-1",
398
408
  skeletonIcon: "size-4 rounded-md"
399
409
  }
400
- }), Ge = o.forwardRef(({ className: e, showIcon: a = !1, ...t }, i) => {
401
- const s = o.useMemo(() => `${Math.floor(Math.random() * 40) + 50}%`, []), d = Ee();
402
- return /* @__PURE__ */ p("div", { ref: i, "data-sidebar": "menu-skeleton", className: d.wrapper({ className: e }), ...t, children: [
403
- a && /* @__PURE__ */ r(I, { className: d.skeletonIcon(), "data-sidebar": "menu-skeleton-icon" }),
410
+ }), Le = s.forwardRef(({ className: a, showIcon: e = !1, ...t }, o) => {
411
+ const i = s.useMemo(() => `${Math.floor(Math.random() * 40) + 50}%`, []), d = Ge();
412
+ return /* @__PURE__ */ f("div", { ref: o, "data-sidebar": "menu-skeleton", className: d.wrapper({ className: a }), ...t, children: [
413
+ e && /* @__PURE__ */ r(I, { className: d.skeletonIcon(), "data-sidebar": "menu-skeleton-icon" }),
404
414
  /* @__PURE__ */ r(
405
415
  I,
406
416
  {
407
417
  className: d.skeleton(),
408
418
  "data-sidebar": "menu-skeleton-text",
409
419
  style: {
410
- "--skeleton-width": s
420
+ "--skeleton-width": i
411
421
  }
412
422
  }
413
423
  )
414
424
  ] });
415
425
  });
416
- Ge.displayName = "SidebarMenuSkeleton";
417
- const Le = n({
426
+ Le.displayName = "SidebarMenuSkeleton";
427
+ const He = n({
418
428
  base: [
419
429
  "ml-3.5 flex min-w-0 flex-col gap-1 border-l border-secondary-border py-0.5 pl-2.5",
420
430
  "group-data-[collapsible=icon]:hidden"
421
431
  ]
422
- }), Oe = o.forwardRef(
423
- ({ className: e, ...a }, t) => /* @__PURE__ */ r("ul", { ref: t, "data-sidebar": "menu-sub", className: Le({ className: e }), ...a })
432
+ }), Oe = s.forwardRef(
433
+ ({ className: a, ...e }, t) => /* @__PURE__ */ r("ul", { ref: t, "data-sidebar": "menu-sub", className: He({ className: a }), ...e })
424
434
  );
425
435
  Oe.displayName = "SidebarMenuSub";
426
- const He = n({
436
+ const Pe = n({
427
437
  base: "rounded-md focus-visible:shadow-focus focus-visible:outline-none"
428
- }), Pe = o.forwardRef(
429
- ({ className: e, ...a }, t) => /* @__PURE__ */ r("li", { ref: t, className: He({ className: e }), ...a })
438
+ }), Ke = s.forwardRef(
439
+ ({ className: a, ...e }, t) => /* @__PURE__ */ r("li", { ref: t, className: Pe({ className: a }), ...e })
430
440
  );
431
- Pe.displayName = "SidebarMenuSubItem";
432
- const Ke = n({
441
+ Ke.displayName = "SidebarMenuSubItem";
442
+ const je = n({
433
443
  base: [
434
444
  "flex h-7 min-w-0 items-center gap-2 overflow-hidden rounded-md px-2 text-secondary-fg outline-none hover:bg-secondary-bg-hover hover:text-primary-fg focus-visible:mr-0.5 focus-visible:shadow-focus 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-primary-fg",
435
445
  "data-[active=true]:bg-primary-bg-hover data-[active=true]:text-primary-accent",
@@ -441,59 +451,59 @@ const Ke = n({
441
451
  md: "text-sm"
442
452
  }
443
453
  }
444
- }), je = o.forwardRef(({ asChild: e = !1, size: a = "md", isActive: t, className: i, ...s }, d) => /* @__PURE__ */ r(
445
- e ? v : "a",
454
+ }), Fe = s.forwardRef(({ asChild: a = !1, size: e = "md", isActive: t, className: o, ...i }, d) => /* @__PURE__ */ r(
455
+ a ? y : "a",
446
456
  {
447
457
  ref: d,
448
458
  "data-sidebar": "menu-sub-button",
449
- "data-size": a,
459
+ "data-size": e,
450
460
  "data-active": t,
451
- className: Ke({ size: a, className: i }),
452
- ...s
461
+ className: je({ size: e, className: o }),
462
+ ...i
453
463
  }
454
464
  ));
455
- je.displayName = "SidebarMenuSubButton";
456
- const Fe = n({
465
+ Fe.displayName = "SidebarMenuSubButton";
466
+ const $e = n({
457
467
  slots: {
458
468
  wrapper: "group/insertion flex cursor-pointer flex-row items-center border-none bg-transparent p-0",
459
469
  icon: "peer/icon h-4 w-4 p-0.5 text-muted opacity-0 group-hover/insertion:opacity-100",
460
470
  line: "h-px w-full bg-transparent group-hover/insertion:bg-muted peer-hover/icon:bg-primary-fg"
461
471
  }
462
- }), $e = o.forwardRef(
463
- ({ className: e, ...a }, t) => {
464
- const i = Fe();
465
- return /* @__PURE__ */ p("div", { "data-sidebar": "sidebar-insertion-line", className: i.wrapper({ className: e }), ref: t, ...a, children: [
466
- /* @__PURE__ */ r(R, { icon: $, size: "xs", className: i.icon(), variant: "link" }),
467
- /* @__PURE__ */ r("div", { className: i.line() })
472
+ }), qe = s.forwardRef(
473
+ ({ className: a, ...e }, t) => {
474
+ const o = $e();
475
+ return /* @__PURE__ */ f("div", { "data-sidebar": "sidebar-insertion-line", className: o.wrapper({ className: a }), ref: t, ...e, children: [
476
+ /* @__PURE__ */ r(R, { icon: q, size: "xs", className: o.icon(), variant: "link" }),
477
+ /* @__PURE__ */ r("div", { className: o.line() })
468
478
  ] });
469
479
  }
470
480
  );
471
- $e.displayName = "SidebarInsertionLine";
481
+ qe.displayName = "SidebarInsertionLine";
472
482
  export {
473
- ae as Sidebar,
474
- ge as SidebarContent,
475
- ue as SidebarFooter,
476
- ve as SidebarGroup,
477
- we as SidebarGroupAction,
478
- Me as SidebarGroupContent,
479
- Se as SidebarGroupLabel,
480
- ce as SidebarHeader,
481
- de as SidebarInput,
482
- $e as SidebarInsertionLine,
483
- se as SidebarInset,
484
- Re as SidebarMenu,
485
- Be as SidebarMenuAction,
486
- Ae as SidebarMenuBadge,
487
- ze as SidebarMenuButton,
488
- ke as SidebarMenuItem,
489
- Ge as SidebarMenuSkeleton,
483
+ te as Sidebar,
484
+ he as SidebarContent,
485
+ pe as SidebarFooter,
486
+ ye as SidebarGroup,
487
+ Ne as SidebarGroupAction,
488
+ Ie as SidebarGroupContent,
489
+ xe as SidebarGroupLabel,
490
+ ue as SidebarHeader,
491
+ le as SidebarInput,
492
+ qe as SidebarInsertionLine,
493
+ ne as SidebarInset,
494
+ Ce as SidebarMenu,
495
+ Ee as SidebarMenuAction,
496
+ De as SidebarMenuBadge,
497
+ Te as SidebarMenuButton,
498
+ _e as SidebarMenuItem,
499
+ Le as SidebarMenuSkeleton,
490
500
  Oe as SidebarMenuSub,
491
- je as SidebarMenuSubButton,
492
- Pe as SidebarMenuSubItem,
493
- ee as SidebarProvider,
501
+ Fe as SidebarMenuSubButton,
502
+ Ke as SidebarMenuSubItem,
503
+ ae as SidebarProvider,
494
504
  oe as SidebarRail,
495
505
  me as SidebarSeparator,
496
- te as SidebarTrigger,
506
+ re as SidebarTrigger,
497
507
  N as useSidebar
498
508
  };
499
509
  //# sourceMappingURL=sidebar.js.map