@manafishrov/ui 1.2.4 → 1.2.5

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 (5) hide show
  1. package/dist/components/sidebar/SidebarMenu.d.ts +2 -2
  2. package/dist/components/sidebar/SidebarMenu.js +65 -68
  3. package/dist/components/sidebar/SidebarMenu.js.map +1 -1
  4. package/package.json +1 -1
  5. package/src/components/sidebar/SidebarMenu.tsx +7 -8
package/dist/components/sidebar/SidebarMenu.d.ts CHANGED
@@ -14,7 +14,7 @@ export declare const sidebarMenuButtonVariants: import('tailwind-variants').TVRe
14
14
  sm: string;
15
15
  lg: string;
16
16
  };
17
- }, undefined, "gap-2 p-2 text-sm group-has-data-sidebar-menu-action/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! data-active:font-medium peer/menu-button group/menu-button [&_svg]:size-4 flex w-full items-center overflow-hidden rounded-md text-left ring-sidebar-ring outline-hidden 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 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground [&_svg]:shrink-0 [&>span:last-child]:truncate", {
17
+ }, undefined, "gap-2 p-2 text-sm group-has-data-sidebar-menu-action/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! data-active:font-medium data-[status=active]:font-medium aria-[current=page]:font-medium peer/menu-button group/menu-button [&_svg]:size-4 flex w-full items-center overflow-hidden rounded-md text-left ring-sidebar-ring outline-hidden 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 aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-[current=page]:bg-sidebar-accent aria-[current=page]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-[status=active]:bg-sidebar-accent data-[status=active]:text-sidebar-accent-foreground [&_svg]:shrink-0 [&>span:last-child]:truncate", {
18
18
  variant: {
19
19
  default: string;
20
20
  outline: string;
@@ -34,7 +34,7 @@ export declare const sidebarMenuButtonVariants: import('tailwind-variants').TVRe
34
34
  sm: string;
35
35
  lg: string;
36
36
  };
37
- }, undefined, "gap-2 p-2 text-sm group-has-data-sidebar-menu-action/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! data-active:font-medium peer/menu-button group/menu-button [&_svg]:size-4 flex w-full items-center overflow-hidden rounded-md text-left ring-sidebar-ring outline-hidden 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 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground [&_svg]:shrink-0 [&>span:last-child]:truncate", unknown, unknown, undefined>>;
37
+ }, undefined, "gap-2 p-2 text-sm group-has-data-sidebar-menu-action/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! data-active:font-medium data-[status=active]:font-medium aria-[current=page]:font-medium peer/menu-button group/menu-button [&_svg]:size-4 flex w-full items-center overflow-hidden rounded-md text-left ring-sidebar-ring outline-hidden 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 aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-[current=page]:bg-sidebar-accent aria-[current=page]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-[status=active]:bg-sidebar-accent data-[status=active]:text-sidebar-accent-foreground [&_svg]:shrink-0 [&>span:last-child]:truncate", unknown, unknown, undefined>>;
38
38
  type SidebarMenuButtonAsChild = ComponentProps<typeof ark.button>['asChild'];
39
39
  export type SidebarMenuButtonProps = Omit<ComponentProps<'button'>, 'asChild'> & VariantProps<typeof sidebarMenuButtonVariants> & {
40
40
  asChild?: SidebarMenuButtonAsChild;
package/dist/components/sidebar/SidebarMenu.js CHANGED
@@ -1,34 +1,34 @@
1
- import { template as i, spread as d, mergeProps as s, createComponent as n, Show as h, Portal as _, memo as w, insert as m } from "solid-js/web";
2
- import { ark as z } from "../../node_modules/.bun/@ark-ui_solid@5.34.0_95b571dd5236cc92/node_modules/@ark-ui/solid/dist/chunk/UFYZ7HLU.js";
3
- import { splitProps as o, createMemo as c } from "solid-js";
4
- import { tv as S, cn as l } from "../../node_modules/.bun/tailwind-variants@3.2.2_7ac958b541464b98/node_modules/tailwind-variants/dist/index.js";
5
- import { Skeleton as p } from "../Skeleton.js";
6
- import { Tooltip as M, TooltipTrigger as $, TooltipPositioner as y, TooltipContent as k, TooltipArrow as A } from "../Tooltip.js";
7
- import { RANDOM_WIDTH_RANGE as T, RANDOM_WIDTH_BASE as P } from "./constants.js";
8
- import { useSidebar as B } from "./context.js";
9
- var C = /* @__PURE__ */ i("<ul data-slot=sidebar-menu data-sidebar=menu>"), D = /* @__PURE__ */ i("<li data-slot=sidebar-menu-item data-sidebar=menu-item>"), I = /* @__PURE__ */ i("<button data-slot=sidebar-menu-action data-sidebar=menu-action>"), H = /* @__PURE__ */ i("<div data-slot=sidebar-menu-badge data-sidebar=menu-badge>"), O = /* @__PURE__ */ i("<div data-slot=sidebar-menu-skeleton data-sidebar=menu-skeleton>"), N = /* @__PURE__ */ i("<ul data-slot=sidebar-menu-sub data-sidebar=menu-sub>"), R = /* @__PURE__ */ i("<li data-slot=sidebar-menu-sub-item data-sidebar=menu-sub-item>"), j = /* @__PURE__ */ i("<a data-slot=sidebar-menu-sub-button data-sidebar=menu-sub-button>");
10
- const Z = (e) => {
1
+ import { template as i, spread as d, mergeProps as s, createComponent as n, Show as f, Portal as w, memo as z, insert as p } from "solid-js/web";
2
+ import { ark as S } from "../../node_modules/.bun/@ark-ui_solid@5.34.0_95b571dd5236cc92/node_modules/@ark-ui/solid/dist/chunk/UFYZ7HLU.js";
3
+ import { splitProps as o, createMemo as l } from "solid-js";
4
+ import { tv as M, cn as c } from "../../node_modules/.bun/tailwind-variants@3.2.2_7ac958b541464b98/node_modules/tailwind-variants/dist/index.js";
5
+ import { Skeleton as m } from "../Skeleton.js";
6
+ import { Tooltip as $, TooltipTrigger as y, TooltipPositioner as k, TooltipContent as A, TooltipArrow as T } from "../Tooltip.js";
7
+ import { RANDOM_WIDTH_RANGE as B, RANDOM_WIDTH_BASE as P } from "./constants.js";
8
+ import { useSidebar as C } from "./context.js";
9
+ var D = /* @__PURE__ */ i("<ul data-slot=sidebar-menu data-sidebar=menu>"), I = /* @__PURE__ */ i("<li data-slot=sidebar-menu-item data-sidebar=menu-item>"), H = /* @__PURE__ */ i("<button data-slot=sidebar-menu-action data-sidebar=menu-action>"), O = /* @__PURE__ */ i("<div data-slot=sidebar-menu-badge data-sidebar=menu-badge>"), N = /* @__PURE__ */ i("<div data-slot=sidebar-menu-skeleton data-sidebar=menu-skeleton>"), R = /* @__PURE__ */ i("<ul data-slot=sidebar-menu-sub data-sidebar=menu-sub>"), j = /* @__PURE__ */ i("<li data-slot=sidebar-menu-sub-item data-sidebar=menu-sub-item>"), E = /* @__PURE__ */ i("<a data-slot=sidebar-menu-sub-button data-sidebar=menu-sub-button>");
10
+ const ee = (e) => {
11
11
  const [t, r] = o(e, ["class"]);
12
12
  return (() => {
13
- var a = C();
13
+ var a = D();
14
14
  return d(a, s({
15
15
  get class() {
16
- return l("gap-0 min-w-0 flex w-full flex-col", t.class);
16
+ return c("gap-0 min-w-0 flex w-full flex-col", t.class);
17
17
  }
18
18
  }, r), !1, !1), a;
19
19
  })();
20
- }, ee = (e) => {
20
+ }, te = (e) => {
21
21
  const [t, r] = o(e, ["class"]);
22
22
  return (() => {
23
- var a = D();
23
+ var a = I();
24
24
  return d(a, s({
25
25
  get class() {
26
- return l("group/menu-item relative", t.class);
26
+ return c("group/menu-item relative", t.class);
27
27
  }
28
28
  }, r), !1, !1), a;
29
29
  })();
30
- }, E = S({
31
- base: "gap-2 p-2 text-sm group-has-data-sidebar-menu-action/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! data-active:font-medium peer/menu-button group/menu-button [&_svg]:size-4 flex w-full items-center overflow-hidden rounded-md text-left ring-sidebar-ring outline-hidden 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 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground [&_svg]:shrink-0 [&>span:last-child]:truncate",
30
+ }, V = M({
31
+ base: "gap-2 p-2 text-sm group-has-data-sidebar-menu-action/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! data-active:font-medium data-[status=active]:font-medium aria-[current=page]:font-medium peer/menu-button group/menu-button [&_svg]:size-4 flex w-full items-center overflow-hidden rounded-md text-left ring-sidebar-ring outline-hidden 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 aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-[current=page]:bg-sidebar-accent aria-[current=page]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-[status=active]:bg-sidebar-accent data-[status=active]:text-sidebar-accent-foreground [&_svg]:shrink-0 [&>span:last-child]:truncate",
32
32
  variants: {
33
33
  variant: {
34
34
  default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
@@ -44,31 +44,31 @@ const Z = (e) => {
44
44
  variant: "default",
45
45
  size: "default"
46
46
  }
47
- }), V = (e) => typeof e == "string" || !e ? {} : e, W = (e) => typeof e == "string" ? e : e ? e.children : "", q = (e) => ({
47
+ }), W = (e) => typeof e == "string" || !e ? {} : e, q = (e) => typeof e == "string" ? e : e ? e.children : "", G = (e) => ({
48
48
  "data-slot": "sidebar-menu-button",
49
49
  "data-sidebar": "menu-button",
50
50
  "data-size": e.size ?? "default",
51
51
  ...e.isActive === !0 ? {
52
52
  "data-active": !0
53
53
  } : {},
54
- class: E({
54
+ class: V({
55
55
  variant: e.variant,
56
56
  size: e.size,
57
57
  class: e.class
58
58
  })
59
- }), G = (e) => e ? {
59
+ }), U = (e) => e ? {
60
60
  asChild: e
61
- } : {}, g = (e, t, r) => n(z.button, s(t, () => G(e), {
61
+ } : {}, g = (e, t, r) => n(S.button, s(t, () => U(e), {
62
62
  children: r
63
- })), te = (e) => {
63
+ })), ae = (e) => {
64
64
  const [t, r] = o(e, ["asChild", "children", "isActive", "variant", "size", "tooltip", "class"]), {
65
65
  isMobile: a,
66
66
  state: u,
67
- side: f
68
- } = B(), v = c(() => f() === "left" ? "right" : "left"), b = c(() => q(t));
69
- return n(h, {
67
+ side: h
68
+ } = C(), v = l(() => h() === "left" ? "right" : "left"), x = l(() => !!t.tooltip && u() === "collapsed" && !a()), b = l(() => G(t));
69
+ return n(f, {
70
70
  get when() {
71
- return t.tooltip;
71
+ return x();
72
72
  },
73
73
  get fallback() {
74
74
  return g(t.asChild, {
@@ -77,26 +77,23 @@ const Z = (e) => {
77
77
  }, t.children);
78
78
  },
79
79
  get children() {
80
- return n(M, {
80
+ return n($, {
81
81
  get positioning() {
82
82
  return {
83
83
  placement: v()
84
84
  };
85
85
  },
86
86
  openDelay: 100,
87
- get disabled() {
88
- return u() !== "collapsed" || a();
89
- },
90
87
  get children() {
91
- return [n($, s(b, r, {
92
- asChild: (x) => g(t.asChild, x(), t.children)
93
- })), n(_, {
88
+ return [n(y, s(b, r, {
89
+ asChild: (_) => g(t.asChild, _(), t.children)
90
+ })), n(w, {
94
91
  get children() {
95
- return n(y, {
92
+ return n(k, {
96
93
  get children() {
97
- return n(k, s(() => V(t.tooltip), {
94
+ return n(A, s(() => W(t.tooltip), {
98
95
  get children() {
99
- return [n(A, {}), w(() => W(t.tooltip))];
96
+ return [n(T, {}), z(() => q(t.tooltip))];
100
97
  }
101
98
  }));
102
99
  }
@@ -107,45 +104,45 @@ const Z = (e) => {
107
104
  });
108
105
  }
109
106
  });
110
- }, ae = (e) => {
107
+ }, re = (e) => {
111
108
  const [t, r] = o(e, ["class", "showOnHover"]);
112
109
  return (() => {
113
- var a = I();
110
+ var a = H();
114
111
  return d(a, s({
115
112
  get class() {
116
- return l("top-1.5 right-1 w-5 p-0 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 [&>svg]:size-4 after:-inset-2 md:after:hidden absolute flex aspect-square items-center justify-center rounded-md text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground after:absolute hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:shrink-0", t.showOnHover === !0 && "md:opacity-0 group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground data-open:opacity-100", t.class);
113
+ return c("top-1.5 right-1 w-5 p-0 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 [&>svg]:size-4 after:-inset-2 md:after:hidden absolute flex aspect-square items-center justify-center rounded-md text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground after:absolute hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:shrink-0", t.showOnHover === !0 && "md:opacity-0 group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground data-open:opacity-100", t.class);
117
114
  }
118
115
  }, r), !1, !1), a;
119
116
  })();
120
- }, re = (e) => {
117
+ }, ne = (e) => {
121
118
  const [t, r] = o(e, ["class"]);
122
119
  return (() => {
123
- var a = H();
120
+ var a = O();
124
121
  return d(a, s({
125
122
  get class() {
126
- return l("right-1 h-5 min-w-5 px-1 text-xs font-medium peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 pointer-events-none absolute flex items-center justify-center rounded-md text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground", t.class);
123
+ return c("right-1 h-5 min-w-5 px-1 text-xs font-medium peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 pointer-events-none absolute flex items-center justify-center rounded-md text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground", t.class);
127
124
  }
128
125
  }, r), !1, !1), a;
129
126
  })();
130
- }, ne = (e) => {
131
- const [t, r] = o(e, ["class", "showIcon"]), a = c(() => `${Math.floor(Math.random() * T) + P}%`);
127
+ }, se = (e) => {
128
+ const [t, r] = o(e, ["class", "showIcon"]), a = l(() => `${Math.floor(Math.random() * B) + P}%`);
132
129
  return (() => {
133
- var u = O();
130
+ var u = N();
134
131
  return d(u, s({
135
132
  get class() {
136
- return l("h-8 gap-2 px-2 flex items-center rounded-md", t.class);
133
+ return c("h-8 gap-2 px-2 flex items-center rounded-md", t.class);
137
134
  }
138
- }, r), !1, !0), m(u, n(h, {
135
+ }, r), !1, !0), p(u, n(f, {
139
136
  get when() {
140
137
  return t.showIcon;
141
138
  },
142
139
  get children() {
143
- return n(p, {
140
+ return n(m, {
144
141
  class: "size-4 rounded-md",
145
142
  "data-sidebar": "menu-skeleton-icon"
146
143
  });
147
144
  }
148
- }), null), m(u, n(p, {
145
+ }), null), p(u, n(m, {
149
146
  class: "h-4 max-w-(--skeleton-width) flex-1",
150
147
  "data-sidebar": "menu-skeleton-text",
151
148
  get style() {
@@ -155,30 +152,30 @@ const Z = (e) => {
155
152
  }
156
153
  }), null), u;
157
154
  })();
158
- }, se = (e) => {
155
+ }, oe = (e) => {
159
156
  const [t, r] = o(e, ["class"]);
160
157
  return (() => {
161
- var a = N();
158
+ var a = R();
162
159
  return d(a, s({
163
160
  get class() {
164
- return l("mx-3.5 gap-1 px-2.5 py-0.5 min-w-0 flex translate-x-px flex-col border-l border-sidebar-border group-data-[collapsible=icon]:hidden", t.class);
161
+ return c("mx-3.5 gap-1 px-2.5 py-0.5 min-w-0 flex translate-x-px flex-col border-l border-sidebar-border group-data-[collapsible=icon]:hidden", t.class);
165
162
  }
166
163
  }, r), !1, !1), a;
167
164
  })();
168
- }, oe = (e) => {
165
+ }, ie = (e) => {
169
166
  const [t, r] = o(e, ["class"]);
170
167
  return (() => {
171
- var a = R();
168
+ var a = j();
172
169
  return d(a, s({
173
170
  get class() {
174
- return l("group/menu-sub-item relative", t.class);
171
+ return c("group/menu-sub-item relative", t.class);
175
172
  }
176
173
  }, r), !1, !1), a;
177
174
  })();
178
- }, ie = (e) => {
175
+ }, de = (e) => {
179
176
  const [t, r] = o(e, ["class", "size", "isActive"]);
180
177
  return (() => {
181
- var a = j();
178
+ var a = E();
182
179
  return d(a, s({
183
180
  get "data-size"() {
184
181
  return t.size ?? "md";
@@ -187,21 +184,21 @@ const Z = (e) => {
187
184
  "data-active": !0
188
185
  } : {}, {
189
186
  get class() {
190
- return l("h-7 gap-2 px-2 data-[size=md]:text-sm data-[size=sm]:text-xs [&>svg]:size-4 min-w-0 flex -translate-x-px items-center overflow-hidden rounded-md text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden 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 data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground", t.class);
187
+ return c("h-7 gap-2 px-2 data-[size=md]:text-sm data-[size=sm]:text-xs [&>svg]:size-4 min-w-0 flex -translate-x-px items-center overflow-hidden rounded-md text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden 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 aria-[current=page]:bg-sidebar-accent aria-[current=page]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-[status=active]:bg-sidebar-accent data-[status=active]:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground", t.class);
191
188
  }
192
189
  }, r), !1, !1), a;
193
190
  })();
194
191
  };
195
192
  export {
196
- Z as SidebarMenu,
197
- ae as SidebarMenuAction,
198
- re as SidebarMenuBadge,
199
- te as SidebarMenuButton,
200
- ee as SidebarMenuItem,
201
- ne as SidebarMenuSkeleton,
202
- se as SidebarMenuSub,
203
- ie as SidebarMenuSubButton,
204
- oe as SidebarMenuSubItem,
205
- E as sidebarMenuButtonVariants
193
+ ee as SidebarMenu,
194
+ re as SidebarMenuAction,
195
+ ne as SidebarMenuBadge,
196
+ ae as SidebarMenuButton,
197
+ te as SidebarMenuItem,
198
+ se as SidebarMenuSkeleton,
199
+ oe as SidebarMenuSub,
200
+ de as SidebarMenuSubButton,
201
+ ie as SidebarMenuSubItem,
202
+ V as sidebarMenuButtonVariants
206
203
  };
207
204
  //# sourceMappingURL=SidebarMenu.js.map
package/dist/components/sidebar/SidebarMenu.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SidebarMenu.js","sources":["../../../src/components/sidebar/SidebarMenu.tsx"],"sourcesContent":["import { ark } from '@ark-ui/solid/factory';\nimport { createMemo, type Component, type ComponentProps, type JSX } from 'solid-js';\nimport { type VariantProps, tv, cn } from 'tailwind-variants';\n\nimport { Skeleton } from '@/components/Skeleton';\nimport {\n Tooltip,\n TooltipArrow,\n TooltipContent,\n TooltipPositioner,\n TooltipTrigger,\n} from '@/components/Tooltip';\n\nimport { RANDOM_WIDTH_BASE, RANDOM_WIDTH_RANGE } from './constants';\nimport { useSidebar } from './context';\n\nexport const SidebarMenu: Component<ComponentProps<'ul'>> = (props) => {\n const [local, others] = splitProps(props, ['class']);\n return (\n <ul\n data-slot='sidebar-menu'\n data-sidebar='menu'\n class={cn('gap-0 min-w-0 flex w-full flex-col', local.class)}\n {...others}\n />\n );\n};\n\nexport const SidebarMenuItem: Component<ComponentProps<'li'>> = (props) => {\n const [local, others] = splitProps(props, ['class']);\n return (\n <li\n data-slot='sidebar-menu-item'\n data-sidebar='menu-item'\n class={cn('group/menu-item relative', local.class)}\n {...others}\n />\n );\n};\n\nexport const sidebarMenuButtonVariants = tv({\n base: 'gap-2 p-2 text-sm group-has-data-sidebar-menu-action/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! data-active:font-medium peer/menu-button group/menu-button [&_svg]:size-4 flex w-full items-center overflow-hidden rounded-md text-left ring-sidebar-ring outline-hidden 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 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground [&_svg]:shrink-0 [&>span:last-child]:truncate',\n variants: {\n variant: {\n default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',\n outline:\n '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))]',\n },\n size: {\n default: 'h-8 text-sm',\n sm: 'h-7 text-xs',\n lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n});\n\ntype SidebarMenuButtonAsChild = ComponentProps<typeof ark.button>['asChild'];\n\nexport type SidebarMenuButtonProps = Omit<ComponentProps<'button'>, 'asChild'> &\n VariantProps<typeof sidebarMenuButtonVariants> & {\n asChild?: SidebarMenuButtonAsChild;\n isActive?: boolean;\n tooltip?: string | ComponentProps<typeof TooltipContent>;\n };\n\ntype SidebarMenuButtonStyleProps = Pick<\n SidebarMenuButtonProps,\n 'size' | 'isActive' | 'variant' | 'class'\n>;\n\ntype SidebarMenuButtonDataProps = {\n 'data-slot': 'sidebar-menu-button';\n 'data-sidebar': 'menu-button';\n 'data-size': 'sm' | 'default' | 'lg';\n 'data-active'?: true;\n class: string;\n};\n\nconst getTooltipContentProps = (\n tooltip: SidebarMenuButtonProps['tooltip'],\n): ComponentProps<typeof TooltipContent> =>\n typeof tooltip === 'string' || !tooltip ? {} : tooltip;\n\nconst getTooltipChildren = (\n tooltip: SidebarMenuButtonProps['tooltip'],\n): ComponentProps<typeof TooltipContent>['children'] => {\n if (typeof tooltip === 'string') {\n return tooltip;\n }\n if (!tooltip) {\n return '';\n }\n return tooltip.children;\n};\n\nconst getSidebarMenuButtonDataProps = (\n local: SidebarMenuButtonStyleProps,\n): SidebarMenuButtonDataProps => ({\n 'data-slot': 'sidebar-menu-button',\n 'data-sidebar': 'menu-button',\n 'data-size': local.size ?? 'default',\n ...(local.isActive === true ? { 'data-active': true as const } : {}),\n class: sidebarMenuButtonVariants({\n variant: local.variant,\n size: local.size,\n class: local.class,\n }),\n});\n\nconst getSidebarMenuButtonAsChildProps = (\n asChild: SidebarMenuButtonProps['asChild'],\n): Pick<ComponentProps<typeof ark.button>, 'asChild'> => (asChild ? { asChild } : {});\n\nconst renderSidebarMenuButton = (\n asChild: SidebarMenuButtonProps['asChild'],\n props: ComponentProps<'button'>,\n children: SidebarMenuButtonProps['children'],\n): JSX.Element => (\n <ark.button {...props} {...getSidebarMenuButtonAsChildProps(asChild)}>\n {children}\n </ark.button>\n);\n\nexport const SidebarMenuButton: Component<SidebarMenuButtonProps> = (props) => {\n const [local, others] = splitProps(props, [\n 'asChild',\n 'children',\n 'isActive',\n 'variant',\n 'size',\n 'tooltip',\n 'class',\n ]);\n const { isMobile, state, side } = useSidebar();\n\n const tooltipPlacement = createMemo(() => (side() === 'left' ? 'right' : 'left'));\n const buttonDataProps = createMemo(() => getSidebarMenuButtonDataProps(local));\n\n return (\n <Show\n when={local.tooltip}\n fallback={renderSidebarMenuButton(\n local.asChild,\n { ...buttonDataProps(), ...others },\n local.children,\n )}\n >\n <Tooltip\n positioning={{ placement: tooltipPlacement() }}\n openDelay={100}\n disabled={state() !== 'collapsed' || isMobile()}\n >\n <TooltipTrigger\n {...buttonDataProps()}\n {...others}\n asChild={(triggerProps) =>\n renderSidebarMenuButton(local.asChild, triggerProps(), local.children)\n }\n />\n <Portal>\n <TooltipPositioner>\n <TooltipContent {...getTooltipContentProps(local.tooltip)}>\n <TooltipArrow />\n {getTooltipChildren(local.tooltip)}\n </TooltipContent>\n </TooltipPositioner>\n </Portal>\n </Tooltip>\n </Show>\n );\n};\n\nexport type SidebarMenuActionProps = ComponentProps<'button'> & {\n showOnHover?: boolean;\n};\n\nexport const SidebarMenuAction: Component<SidebarMenuActionProps> = (props) => {\n const [local, others] = splitProps(props, ['class', 'showOnHover']);\n return (\n <button\n data-slot='sidebar-menu-action'\n data-sidebar='menu-action'\n class={cn(\n 'top-1.5 right-1 w-5 p-0 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 [&>svg]:size-4 after:-inset-2 md:after:hidden absolute flex aspect-square items-center justify-center rounded-md text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground after:absolute hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:shrink-0',\n local.showOnHover === true &&\n 'md:opacity-0 group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground data-open:opacity-100',\n local.class,\n )}\n {...others}\n />\n );\n};\n\nexport const SidebarMenuBadge: Component<ComponentProps<'div'>> = (props) => {\n const [local, others] = splitProps(props, ['class']);\n return (\n <div\n data-slot='sidebar-menu-badge'\n data-sidebar='menu-badge'\n class={cn(\n 'right-1 h-5 min-w-5 px-1 text-xs font-medium peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 pointer-events-none absolute flex items-center justify-center rounded-md text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground',\n local.class,\n )}\n {...others}\n />\n );\n};\n\nexport type SidebarMenuSkeletonProps = ComponentProps<'div'> & {\n showIcon?: boolean;\n};\n\nexport const SidebarMenuSkeleton: Component<SidebarMenuSkeletonProps> = (props) => {\n const [local, others] = splitProps(props, ['class', 'showIcon']);\n\n const width = createMemo(\n () => `${Math.floor(Math.random() * RANDOM_WIDTH_RANGE) + RANDOM_WIDTH_BASE}%`,\n );\n\n return (\n <div\n data-slot='sidebar-menu-skeleton'\n data-sidebar='menu-skeleton'\n class={cn('h-8 gap-2 px-2 flex items-center rounded-md', local.class)}\n {...others}\n >\n <Show when={local.showIcon}>\n <Skeleton class='size-4 rounded-md' data-sidebar='menu-skeleton-icon' />\n </Show>\n <Skeleton\n class='h-4 max-w-(--skeleton-width) flex-1'\n data-sidebar='menu-skeleton-text'\n style={{\n '--skeleton-width': width(),\n }}\n />\n </div>\n );\n};\n\nexport const SidebarMenuSub: Component<ComponentProps<'ul'>> = (props) => {\n const [local, others] = splitProps(props, ['class']);\n return (\n <ul\n data-slot='sidebar-menu-sub'\n data-sidebar='menu-sub'\n class={cn(\n 'mx-3.5 gap-1 px-2.5 py-0.5 min-w-0 flex translate-x-px flex-col border-l border-sidebar-border group-data-[collapsible=icon]:hidden',\n local.class,\n )}\n {...others}\n />\n );\n};\n\nexport const SidebarMenuSubItem: Component<ComponentProps<'li'>> = (props) => {\n const [local, others] = splitProps(props, ['class']);\n return (\n <li\n data-slot='sidebar-menu-sub-item'\n data-sidebar='menu-sub-item'\n class={cn('group/menu-sub-item relative', local.class)}\n {...others}\n />\n );\n};\n\nexport type SidebarMenuSubButtonProps = ComponentProps<'a'> & {\n size?: 'sm' | 'md';\n isActive?: boolean;\n};\n\nexport const SidebarMenuSubButton: Component<SidebarMenuSubButtonProps> = (props) => {\n const [local, others] = splitProps(props, ['class', 'size', 'isActive']);\n return (\n <a\n data-slot='sidebar-menu-sub-button'\n data-sidebar='menu-sub-button'\n data-size={local.size ?? 'md'}\n {...(local.isActive === true ? { 'data-active': true as const } : {})}\n class={cn(\n 'h-7 gap-2 px-2 data-[size=md]:text-sm data-[size=sm]:text-xs [&>svg]:size-4 min-w-0 flex -translate-x-px items-center overflow-hidden rounded-md text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden 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 data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',\n local.class,\n )}\n {...others}\n />\n );\n};\n"],"names":["SidebarMenu","props","local","others","splitProps","_el$","_tmpl$","_$spread","_$mergeProps","cn","class","SidebarMenuItem","_el$2","_tmpl$2","sidebarMenuButtonVariants","tv","base","variants","variant","default","outline","size","sm","lg","defaultVariants","getTooltipContentProps","tooltip","getTooltipChildren","children","getSidebarMenuButtonDataProps","isActive","getSidebarMenuButtonAsChildProps","asChild","renderSidebarMenuButton","_$createComponent","ark","button","SidebarMenuButton","isMobile","state","side","useSidebar","tooltipPlacement","createMemo","buttonDataProps","_$Show","when","fallback","Tooltip","positioning","placement","openDelay","disabled","TooltipTrigger","triggerProps","_$Portal","TooltipPositioner","TooltipContent","TooltipArrow","_$memo","SidebarMenuAction","_el$3","_tmpl$3","showOnHover","SidebarMenuBadge","_el$4","_tmpl$4","SidebarMenuSkeleton","width","Math","floor","random","RANDOM_WIDTH_RANGE","RANDOM_WIDTH_BASE","_el$5","_tmpl$5","_$insert","showIcon","Skeleton","style","SidebarMenuSub","_el$6","_tmpl$6","SidebarMenuSubItem","_el$7","_tmpl$7","SidebarMenuSubButton","_el$8","_tmpl$8"],"mappings":"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"}
1
+ {"version":3,"file":"SidebarMenu.js","sources":["../../../src/components/sidebar/SidebarMenu.tsx"],"sourcesContent":["import { ark } from '@ark-ui/solid/factory';\nimport { createMemo, type Component, type ComponentProps, type JSX } from 'solid-js';\nimport { type VariantProps, tv, cn } from 'tailwind-variants';\n\nimport { Skeleton } from '@/components/Skeleton';\nimport {\n Tooltip,\n TooltipArrow,\n TooltipContent,\n TooltipPositioner,\n TooltipTrigger,\n} from '@/components/Tooltip';\n\nimport { RANDOM_WIDTH_BASE, RANDOM_WIDTH_RANGE } from './constants';\nimport { useSidebar } from './context';\n\nexport const SidebarMenu: Component<ComponentProps<'ul'>> = (props) => {\n const [local, others] = splitProps(props, ['class']);\n return (\n <ul\n data-slot='sidebar-menu'\n data-sidebar='menu'\n class={cn('gap-0 min-w-0 flex w-full flex-col', local.class)}\n {...others}\n />\n );\n};\n\nexport const SidebarMenuItem: Component<ComponentProps<'li'>> = (props) => {\n const [local, others] = splitProps(props, ['class']);\n return (\n <li\n data-slot='sidebar-menu-item'\n data-sidebar='menu-item'\n class={cn('group/menu-item relative', local.class)}\n {...others}\n />\n );\n};\n\nexport const sidebarMenuButtonVariants = tv({\n base: 'gap-2 p-2 text-sm group-has-data-sidebar-menu-action/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! data-active:font-medium data-[status=active]:font-medium aria-[current=page]:font-medium peer/menu-button group/menu-button [&_svg]:size-4 flex w-full items-center overflow-hidden rounded-md text-left ring-sidebar-ring outline-hidden 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 aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-[current=page]:bg-sidebar-accent aria-[current=page]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-[status=active]:bg-sidebar-accent data-[status=active]:text-sidebar-accent-foreground [&_svg]:shrink-0 [&>span:last-child]:truncate',\n variants: {\n variant: {\n default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',\n outline:\n '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))]',\n },\n size: {\n default: 'h-8 text-sm',\n sm: 'h-7 text-xs',\n lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n});\n\ntype SidebarMenuButtonAsChild = ComponentProps<typeof ark.button>['asChild'];\n\nexport type SidebarMenuButtonProps = Omit<ComponentProps<'button'>, 'asChild'> &\n VariantProps<typeof sidebarMenuButtonVariants> & {\n asChild?: SidebarMenuButtonAsChild;\n isActive?: boolean;\n tooltip?: string | ComponentProps<typeof TooltipContent>;\n };\n\ntype SidebarMenuButtonStyleProps = Pick<\n SidebarMenuButtonProps,\n 'size' | 'isActive' | 'variant' | 'class'\n>;\n\ntype SidebarMenuButtonDataProps = {\n 'data-slot': 'sidebar-menu-button';\n 'data-sidebar': 'menu-button';\n 'data-size': 'sm' | 'default' | 'lg';\n 'data-active'?: true;\n class: string;\n};\n\nconst getTooltipContentProps = (\n tooltip: SidebarMenuButtonProps['tooltip'],\n): ComponentProps<typeof TooltipContent> =>\n typeof tooltip === 'string' || !tooltip ? {} : tooltip;\n\nconst getTooltipChildren = (\n tooltip: SidebarMenuButtonProps['tooltip'],\n): ComponentProps<typeof TooltipContent>['children'] => {\n if (typeof tooltip === 'string') {\n return tooltip;\n }\n if (!tooltip) {\n return '';\n }\n return tooltip.children;\n};\n\nconst getSidebarMenuButtonDataProps = (\n local: SidebarMenuButtonStyleProps,\n): SidebarMenuButtonDataProps => ({\n 'data-slot': 'sidebar-menu-button',\n 'data-sidebar': 'menu-button',\n 'data-size': local.size ?? 'default',\n ...(local.isActive === true ? { 'data-active': true as const } : {}),\n class: sidebarMenuButtonVariants({\n variant: local.variant,\n size: local.size,\n class: local.class,\n }),\n});\n\nconst getSidebarMenuButtonAsChildProps = (\n asChild: SidebarMenuButtonProps['asChild'],\n): Pick<ComponentProps<typeof ark.button>, 'asChild'> => (asChild ? { asChild } : {});\n\nconst renderSidebarMenuButton = (\n asChild: SidebarMenuButtonProps['asChild'],\n props: ComponentProps<'button'>,\n children: SidebarMenuButtonProps['children'],\n): JSX.Element => (\n <ark.button {...props} {...getSidebarMenuButtonAsChildProps(asChild)}>\n {children}\n </ark.button>\n);\n\nexport const SidebarMenuButton: Component<SidebarMenuButtonProps> = (props) => {\n const [local, others] = splitProps(props, [\n 'asChild',\n 'children',\n 'isActive',\n 'variant',\n 'size',\n 'tooltip',\n 'class',\n ]);\n const { isMobile, state, side } = useSidebar();\n\n const tooltipPlacement = createMemo(() => (side() === 'left' ? 'right' : 'left'));\n const shouldUseTooltip = createMemo(\n () => Boolean(local.tooltip) && state() === 'collapsed' && !isMobile(),\n );\n const buttonDataProps = createMemo(() => getSidebarMenuButtonDataProps(local));\n\n return (\n <Show\n when={shouldUseTooltip()}\n fallback={renderSidebarMenuButton(\n local.asChild,\n { ...buttonDataProps(), ...others },\n local.children,\n )}\n >\n <Tooltip positioning={{ placement: tooltipPlacement() }} openDelay={100}>\n <TooltipTrigger\n {...buttonDataProps()}\n {...others}\n asChild={(triggerProps) =>\n renderSidebarMenuButton(local.asChild, triggerProps(), local.children)\n }\n />\n <Portal>\n <TooltipPositioner>\n <TooltipContent {...getTooltipContentProps(local.tooltip)}>\n <TooltipArrow />\n {getTooltipChildren(local.tooltip)}\n </TooltipContent>\n </TooltipPositioner>\n </Portal>\n </Tooltip>\n </Show>\n );\n};\n\nexport type SidebarMenuActionProps = ComponentProps<'button'> & {\n showOnHover?: boolean;\n};\n\nexport const SidebarMenuAction: Component<SidebarMenuActionProps> = (props) => {\n const [local, others] = splitProps(props, ['class', 'showOnHover']);\n return (\n <button\n data-slot='sidebar-menu-action'\n data-sidebar='menu-action'\n class={cn(\n 'top-1.5 right-1 w-5 p-0 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 [&>svg]:size-4 after:-inset-2 md:after:hidden absolute flex aspect-square items-center justify-center rounded-md text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground after:absolute hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:shrink-0',\n local.showOnHover === true &&\n 'md:opacity-0 group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground data-open:opacity-100',\n local.class,\n )}\n {...others}\n />\n );\n};\n\nexport const SidebarMenuBadge: Component<ComponentProps<'div'>> = (props) => {\n const [local, others] = splitProps(props, ['class']);\n return (\n <div\n data-slot='sidebar-menu-badge'\n data-sidebar='menu-badge'\n class={cn(\n 'right-1 h-5 min-w-5 px-1 text-xs font-medium peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 pointer-events-none absolute flex items-center justify-center rounded-md text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground',\n local.class,\n )}\n {...others}\n />\n );\n};\n\nexport type SidebarMenuSkeletonProps = ComponentProps<'div'> & {\n showIcon?: boolean;\n};\n\nexport const SidebarMenuSkeleton: Component<SidebarMenuSkeletonProps> = (props) => {\n const [local, others] = splitProps(props, ['class', 'showIcon']);\n\n const width = createMemo(\n () => `${Math.floor(Math.random() * RANDOM_WIDTH_RANGE) + RANDOM_WIDTH_BASE}%`,\n );\n\n return (\n <div\n data-slot='sidebar-menu-skeleton'\n data-sidebar='menu-skeleton'\n class={cn('h-8 gap-2 px-2 flex items-center rounded-md', local.class)}\n {...others}\n >\n <Show when={local.showIcon}>\n <Skeleton class='size-4 rounded-md' data-sidebar='menu-skeleton-icon' />\n </Show>\n <Skeleton\n class='h-4 max-w-(--skeleton-width) flex-1'\n data-sidebar='menu-skeleton-text'\n style={{\n '--skeleton-width': width(),\n }}\n />\n </div>\n );\n};\n\nexport const SidebarMenuSub: Component<ComponentProps<'ul'>> = (props) => {\n const [local, others] = splitProps(props, ['class']);\n return (\n <ul\n data-slot='sidebar-menu-sub'\n data-sidebar='menu-sub'\n class={cn(\n 'mx-3.5 gap-1 px-2.5 py-0.5 min-w-0 flex translate-x-px flex-col border-l border-sidebar-border group-data-[collapsible=icon]:hidden',\n local.class,\n )}\n {...others}\n />\n );\n};\n\nexport const SidebarMenuSubItem: Component<ComponentProps<'li'>> = (props) => {\n const [local, others] = splitProps(props, ['class']);\n return (\n <li\n data-slot='sidebar-menu-sub-item'\n data-sidebar='menu-sub-item'\n class={cn('group/menu-sub-item relative', local.class)}\n {...others}\n />\n );\n};\n\nexport type SidebarMenuSubButtonProps = ComponentProps<'a'> & {\n size?: 'sm' | 'md';\n isActive?: boolean;\n};\n\nexport const SidebarMenuSubButton: Component<SidebarMenuSubButtonProps> = (props) => {\n const [local, others] = splitProps(props, ['class', 'size', 'isActive']);\n return (\n <a\n data-slot='sidebar-menu-sub-button'\n data-sidebar='menu-sub-button'\n data-size={local.size ?? 'md'}\n {...(local.isActive === true ? { 'data-active': true as const } : {})}\n class={cn(\n 'h-7 gap-2 px-2 data-[size=md]:text-sm data-[size=sm]:text-xs [&>svg]:size-4 min-w-0 flex -translate-x-px items-center overflow-hidden rounded-md text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden 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 aria-[current=page]:bg-sidebar-accent aria-[current=page]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-[status=active]:bg-sidebar-accent data-[status=active]:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',\n local.class,\n )}\n {...others}\n />\n );\n};\n"],"names":["SidebarMenu","props","local","others","splitProps","_el$","_tmpl$","_$spread","_$mergeProps","cn","class","SidebarMenuItem","_el$2","_tmpl$2","sidebarMenuButtonVariants","tv","base","variants","variant","default","outline","size","sm","lg","defaultVariants","getTooltipContentProps","tooltip","getTooltipChildren","children","getSidebarMenuButtonDataProps","isActive","getSidebarMenuButtonAsChildProps","asChild","renderSidebarMenuButton","_$createComponent","ark","button","SidebarMenuButton","isMobile","state","side","useSidebar","tooltipPlacement","createMemo","shouldUseTooltip","Boolean","buttonDataProps","_$Show","when","fallback","Tooltip","positioning","placement","openDelay","TooltipTrigger","triggerProps","_$Portal","TooltipPositioner","TooltipContent","TooltipArrow","_$memo","SidebarMenuAction","_el$3","_tmpl$3","showOnHover","SidebarMenuBadge","_el$4","_tmpl$4","SidebarMenuSkeleton","width","Math","floor","random","RANDOM_WIDTH_RANGE","RANDOM_WIDTH_BASE","_el$5","_tmpl$5","_$insert","showIcon","Skeleton","style","SidebarMenuSub","_el$6","_tmpl$6","SidebarMenuSubItem","_el$7","_tmpl$7","SidebarMenuSubButton","_el$8","_tmpl$8"],"mappings":"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"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/package",
3
3
  "name": "@manafishrov/ui",
4
- "version": "1.2.4",
4
+ "version": "1.2.5",
5
5
  "description": "Styled component library for Manafish interfaces ",
6
6
  "license": "AGPL-3.0-or-later",
7
7
  "repository": {
package/src/components/sidebar/SidebarMenu.tsx CHANGED
@@ -39,7 +39,7 @@ export const SidebarMenuItem: Component<ComponentProps<'li'>> = (props) => {
39
39
  };
40
40
 
41
41
  export const sidebarMenuButtonVariants = tv({
42
- base: 'gap-2 p-2 text-sm group-has-data-sidebar-menu-action/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! data-active:font-medium peer/menu-button group/menu-button [&_svg]:size-4 flex w-full items-center overflow-hidden rounded-md text-left ring-sidebar-ring outline-hidden 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 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground [&_svg]:shrink-0 [&>span:last-child]:truncate',
42
+ base: 'gap-2 p-2 text-sm group-has-data-sidebar-menu-action/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! data-active:font-medium data-[status=active]:font-medium aria-[current=page]:font-medium peer/menu-button group/menu-button [&_svg]:size-4 flex w-full items-center overflow-hidden rounded-md text-left ring-sidebar-ring outline-hidden 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 aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-[current=page]:bg-sidebar-accent aria-[current=page]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-[status=active]:bg-sidebar-accent data-[status=active]:text-sidebar-accent-foreground [&_svg]:shrink-0 [&>span:last-child]:truncate',
43
43
  variants: {
44
44
  variant: {
45
45
  default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
@@ -138,22 +138,21 @@ export const SidebarMenuButton: Component<SidebarMenuButtonProps> = (props) => {
138
138
  const { isMobile, state, side } = useSidebar();
139
139
 
140
140
  const tooltipPlacement = createMemo(() => (side() === 'left' ? 'right' : 'left'));
141
+ const shouldUseTooltip = createMemo(
142
+ () => Boolean(local.tooltip) && state() === 'collapsed' && !isMobile(),
143
+ );
141
144
  const buttonDataProps = createMemo(() => getSidebarMenuButtonDataProps(local));
142
145
 
143
146
  return (
144
147
  <Show
145
- when={local.tooltip}
148
+ when={shouldUseTooltip()}
146
149
  fallback={renderSidebarMenuButton(
147
150
  local.asChild,
148
151
  { ...buttonDataProps(), ...others },
149
152
  local.children,
150
153
  )}
151
154
  >
152
- <Tooltip
153
- positioning={{ placement: tooltipPlacement() }}
154
- openDelay={100}
155
- disabled={state() !== 'collapsed' || isMobile()}
156
- >
155
+ <Tooltip positioning={{ placement: tooltipPlacement() }} openDelay={100}>
157
156
  <TooltipTrigger
158
157
  {...buttonDataProps()}
159
158
  {...others}
@@ -283,7 +282,7 @@ export const SidebarMenuSubButton: Component<SidebarMenuSubButtonProps> = (props
283
282
  data-size={local.size ?? 'md'}
284
283
  {...(local.isActive === true ? { 'data-active': true as const } : {})}
285
284
  class={cn(
286
- 'h-7 gap-2 px-2 data-[size=md]:text-sm data-[size=sm]:text-xs [&>svg]:size-4 min-w-0 flex -translate-x-px items-center overflow-hidden rounded-md text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden 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 data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',
285
+ 'h-7 gap-2 px-2 data-[size=md]:text-sm data-[size=sm]:text-xs [&>svg]:size-4 min-w-0 flex -translate-x-px items-center overflow-hidden rounded-md text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden 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 aria-[current=page]:bg-sidebar-accent aria-[current=page]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-[status=active]:bg-sidebar-accent data-[status=active]:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',
287
286
  local.class,
288
287
  )}
289
288
  {...others}