@mesob/ui 0.2.2 → 0.2.4

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 (227) hide show
  1. package/dist/components.d.ts +992 -0
  2. package/dist/components.js +8030 -0
  3. package/dist/components.js.map +1 -0
  4. package/dist/hooks.d.ts +6 -0
  5. package/dist/hooks.js +85 -0
  6. package/dist/hooks.js.map +1 -0
  7. package/dist/providers.d.ts +20 -0
  8. package/dist/providers.js +61 -0
  9. package/dist/providers.js.map +1 -0
  10. package/dist/use-entity-params-nqD69tdX.d.ts +82 -0
  11. package/package.json +14 -27
  12. package/dist/components/accordion.d.ts +0 -10
  13. package/dist/components/accordion.js +0 -74
  14. package/dist/components/accordion.js.map +0 -1
  15. package/dist/components/alert-dialog.d.ts +0 -17
  16. package/dist/components/alert-dialog.js +0 -187
  17. package/dist/components/alert-dialog.js.map +0 -1
  18. package/dist/components/alert.d.ts +0 -13
  19. package/dist/components/alert.js +0 -74
  20. package/dist/components/alert.js.map +0 -1
  21. package/dist/components/animated-tabs.d.ts +0 -26
  22. package/dist/components/animated-tabs.js +0 -290
  23. package/dist/components/animated-tabs.js.map +0 -1
  24. package/dist/components/app-breadcrumbs.d.ts +0 -34
  25. package/dist/components/app-breadcrumbs.js +0 -177
  26. package/dist/components/app-breadcrumbs.js.map +0 -1
  27. package/dist/components/app-header-actions.d.ts +0 -39
  28. package/dist/components/app-header-actions.js +0 -644
  29. package/dist/components/app-header-actions.js.map +0 -1
  30. package/dist/components/app-sidebar.d.ts +0 -24
  31. package/dist/components/app-sidebar.js +0 -674
  32. package/dist/components/app-sidebar.js.map +0 -1
  33. package/dist/components/aspect-ratio.d.ts +0 -6
  34. package/dist/components/aspect-ratio.js +0 -14
  35. package/dist/components/aspect-ratio.js.map +0 -1
  36. package/dist/components/avatar.d.ts +0 -9
  37. package/dist/components/avatar.js +0 -63
  38. package/dist/components/avatar.js.map +0 -1
  39. package/dist/components/badge.d.ts +0 -13
  40. package/dist/components/badge.js +0 -48
  41. package/dist/components/badge.js.map +0 -1
  42. package/dist/components/breadcrumb.d.ts +0 -14
  43. package/dist/components/breadcrumb.js +0 -110
  44. package/dist/components/breadcrumb.js.map +0 -1
  45. package/dist/components/button-group.d.ts +0 -17
  46. package/dist/components/button-group.js +0 -106
  47. package/dist/components/button-group.js.map +0 -1
  48. package/dist/components/button.d.ts +0 -17
  49. package/dist/components/button.js +0 -68
  50. package/dist/components/button.js.map +0 -1
  51. package/dist/components/calendar.d.ts +0 -13
  52. package/dist/components/calendar.js +0 -262
  53. package/dist/components/calendar.js.map +0 -1
  54. package/dist/components/card.d.ts +0 -12
  55. package/dist/components/card.js +0 -98
  56. package/dist/components/card.js.map +0 -1
  57. package/dist/components/carousel.d.ts +0 -24
  58. package/dist/components/carousel.js +0 -268
  59. package/dist/components/carousel.js.map +0 -1
  60. package/dist/components/chart.d.ts +0 -43
  61. package/dist/components/chart.js +0 -271
  62. package/dist/components/chart.js.map +0 -1
  63. package/dist/components/checkbox.d.ts +0 -7
  64. package/dist/components/checkbox.js +0 -41
  65. package/dist/components/checkbox.js.map +0 -1
  66. package/dist/components/collapsible.d.ts +0 -8
  67. package/dist/components/collapsible.js +0 -38
  68. package/dist/components/collapsible.js.map +0 -1
  69. package/dist/components/command.d.ts +0 -22
  70. package/dist/components/command.js +0 -281
  71. package/dist/components/command.js.map +0 -1
  72. package/dist/components/context-menu.d.ts +0 -28
  73. package/dist/components/context-menu.js +0 -233
  74. package/dist/components/context-menu.js.map +0 -1
  75. package/dist/components/data-table/index.d.ts +0 -53
  76. package/dist/components/data-table/index.js +0 -823
  77. package/dist/components/data-table/index.js.map +0 -1
  78. package/dist/components/dialog.d.ts +0 -18
  79. package/dist/components/dialog.js +0 -146
  80. package/dist/components/dialog.js.map +0 -1
  81. package/dist/components/drawer.d.ts +0 -16
  82. package/dist/components/drawer.js +0 -138
  83. package/dist/components/drawer.js.map +0 -1
  84. package/dist/components/dropdown-menu.d.ts +0 -28
  85. package/dist/components/dropdown-menu.js +0 -241
  86. package/dist/components/dropdown-menu.js.map +0 -1
  87. package/dist/components/empty.d.ts +0 -15
  88. package/dist/components/empty.js +0 -110
  89. package/dist/components/empty.js.map +0 -1
  90. package/dist/components/entity/index.d.ts +0 -236
  91. package/dist/components/entity/index.js +0 -1796
  92. package/dist/components/entity/index.js.map +0 -1
  93. package/dist/components/field.d.ts +0 -30
  94. package/dist/components/field.js +0 -279
  95. package/dist/components/field.js.map +0 -1
  96. package/dist/components/form.d.ts +0 -28
  97. package/dist/components/form.js +0 -150
  98. package/dist/components/form.js.map +0 -1
  99. package/dist/components/hover-card.d.ts +0 -9
  100. package/dist/components/hover-card.js +0 -48
  101. package/dist/components/hover-card.js.map +0 -1
  102. package/dist/components/input-group.d.ts +0 -20
  103. package/dist/components/input-group.js +0 -265
  104. package/dist/components/input-group.js.map +0 -1
  105. package/dist/components/input-otp.d.ts +0 -14
  106. package/dist/components/input-otp.js +0 -76
  107. package/dist/components/input-otp.js.map +0 -1
  108. package/dist/components/input.d.ts +0 -6
  109. package/dist/components/input.js +0 -29
  110. package/dist/components/input.js.map +0 -1
  111. package/dist/components/item.d.ts +0 -28
  112. package/dist/components/item.js +0 -220
  113. package/dist/components/item.js.map +0 -1
  114. package/dist/components/kbd.d.ts +0 -6
  115. package/dist/components/kbd.js +0 -39
  116. package/dist/components/kbd.js.map +0 -1
  117. package/dist/components/label.d.ts +0 -7
  118. package/dist/components/label.js +0 -32
  119. package/dist/components/label.js.map +0 -1
  120. package/dist/components/link.d.ts +0 -12
  121. package/dist/components/link.js +0 -51
  122. package/dist/components/link.js.map +0 -1
  123. package/dist/components/menubar.d.ts +0 -29
  124. package/dist/components/menubar.js +0 -261
  125. package/dist/components/menubar.js.map +0 -1
  126. package/dist/components/mesob-context.d.ts +0 -34
  127. package/dist/components/mesob-context.js +0 -53
  128. package/dist/components/mesob-context.js.map +0 -1
  129. package/dist/components/mesob-logo.d.ts +0 -13
  130. package/dist/components/mesob-logo.js +0 -80
  131. package/dist/components/mesob-logo.js.map +0 -1
  132. package/dist/components/navigation-menu.d.ts +0 -18
  133. package/dist/components/navigation-menu.js +0 -178
  134. package/dist/components/navigation-menu.js.map +0 -1
  135. package/dist/components/page/index.d.ts +0 -46
  136. package/dist/components/page/index.js +0 -205
  137. package/dist/components/page/index.js.map +0 -1
  138. package/dist/components/pagination.d.ts +0 -18
  139. package/dist/components/pagination.js +0 -160
  140. package/dist/components/pagination.js.map +0 -1
  141. package/dist/components/popover.d.ts +0 -10
  142. package/dist/components/popover.js +0 -54
  143. package/dist/components/popover.js.map +0 -1
  144. package/dist/components/powered-by.d.ts +0 -8
  145. package/dist/components/powered-by.js +0 -114
  146. package/dist/components/powered-by.js.map +0 -1
  147. package/dist/components/progress.d.ts +0 -7
  148. package/dist/components/progress.js +0 -41
  149. package/dist/components/progress.js.map +0 -1
  150. package/dist/components/radio-group.d.ts +0 -8
  151. package/dist/components/radio-group.js +0 -55
  152. package/dist/components/radio-group.js.map +0 -1
  153. package/dist/components/resizable.d.ts +0 -11
  154. package/dist/components/resizable.js +0 -58
  155. package/dist/components/resizable.js.map +0 -1
  156. package/dist/components/scroll-area.d.ts +0 -8
  157. package/dist/components/scroll-area.js +0 -70
  158. package/dist/components/scroll-area.js.map +0 -1
  159. package/dist/components/section/index.d.ts +0 -14
  160. package/dist/components/section/index.js +0 -147
  161. package/dist/components/section/index.js.map +0 -1
  162. package/dist/components/select.d.ts +0 -18
  163. package/dist/components/select.js +0 -181
  164. package/dist/components/select.js.map +0 -1
  165. package/dist/components/separator.d.ts +0 -7
  166. package/dist/components/separator.js +0 -36
  167. package/dist/components/separator.js.map +0 -1
  168. package/dist/components/sheet.d.ts +0 -16
  169. package/dist/components/sheet.js +0 -136
  170. package/dist/components/sheet.js.map +0 -1
  171. package/dist/components/shell.d.ts +0 -13
  172. package/dist/components/shell.js +0 -558
  173. package/dist/components/shell.js.map +0 -1
  174. package/dist/components/sidebar-context.d.ts +0 -19
  175. package/dist/components/sidebar-context.js +0 -17
  176. package/dist/components/sidebar-context.js.map +0 -1
  177. package/dist/components/sidebar.d.ts +0 -66
  178. package/dist/components/sidebar.js +0 -951
  179. package/dist/components/sidebar.js.map +0 -1
  180. package/dist/components/skeleton.d.ts +0 -5
  181. package/dist/components/skeleton.js +0 -23
  182. package/dist/components/skeleton.js.map +0 -1
  183. package/dist/components/slider.d.ts +0 -7
  184. package/dist/components/slider.js +0 -76
  185. package/dist/components/slider.js.map +0 -1
  186. package/dist/components/sonner.d.ts +0 -7
  187. package/dist/components/sonner.js +0 -43
  188. package/dist/components/sonner.js.map +0 -1
  189. package/dist/components/spinner.d.ts +0 -6
  190. package/dist/components/spinner.js +0 -28
  191. package/dist/components/spinner.js.map +0 -1
  192. package/dist/components/spotlight-search.d.ts +0 -25
  193. package/dist/components/spotlight-search.js +0 -395
  194. package/dist/components/spotlight-search.js.map +0 -1
  195. package/dist/components/switch.d.ts +0 -7
  196. package/dist/components/switch.js +0 -41
  197. package/dist/components/switch.js.map +0 -1
  198. package/dist/components/table.d.ts +0 -13
  199. package/dist/components/table.js +0 -124
  200. package/dist/components/table.js.map +0 -1
  201. package/dist/components/tabs.d.ts +0 -10
  202. package/dist/components/tabs.js +0 -77
  203. package/dist/components/tabs.js.map +0 -1
  204. package/dist/components/textarea.d.ts +0 -6
  205. package/dist/components/textarea.js +0 -26
  206. package/dist/components/textarea.js.map +0 -1
  207. package/dist/components/theme-toggle.d.ts +0 -8
  208. package/dist/components/theme-toggle.js +0 -94
  209. package/dist/components/theme-toggle.js.map +0 -1
  210. package/dist/components/toggle-group.d.ts +0 -14
  211. package/dist/components/toggle-group.js +0 -102
  212. package/dist/components/toggle-group.js.map +0 -1
  213. package/dist/components/toggle.d.ts +0 -13
  214. package/dist/components/toggle.js +0 -53
  215. package/dist/components/toggle.js.map +0 -1
  216. package/dist/components/tooltip.d.ts +0 -10
  217. package/dist/components/tooltip.js +0 -66
  218. package/dist/components/tooltip.js.map +0 -1
  219. package/dist/hooks/use-mobile.d.ts +0 -3
  220. package/dist/hooks/use-mobile.js +0 -22
  221. package/dist/hooks/use-mobile.js.map +0 -1
  222. package/dist/hooks/use-router.d.ts +0 -7
  223. package/dist/hooks/use-router.js +0 -36
  224. package/dist/hooks/use-router.js.map +0 -1
  225. package/dist/hooks/use-translation.d.ts +0 -5
  226. package/dist/hooks/use-translation.js +0 -42
  227. package/dist/hooks/use-translation.js.map +0 -1
@@ -1,674 +0,0 @@
1
- "use client";
2
-
3
- // src/lib/utils.ts
4
- import { clsx } from "clsx";
5
- import { twMerge } from "tailwind-merge";
6
- function cn(...inputs) {
7
- return twMerge(clsx(inputs));
8
- }
9
-
10
- // src/components/tooltip.tsx
11
- import * as TooltipPrimitive from "@radix-ui/react-tooltip";
12
- import { jsx, jsxs } from "react/jsx-runtime";
13
- function Tooltip({
14
- children,
15
- ...props
16
- }) {
17
- return /* @__PURE__ */ jsx(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props, children });
18
- }
19
- function TooltipTrigger({
20
- ...props
21
- }) {
22
- return /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
23
- }
24
- function TooltipContent({
25
- className,
26
- sideOffset = 0,
27
- children,
28
- ...props
29
- }) {
30
- return /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
31
- TooltipPrimitive.Content,
32
- {
33
- "data-slot": "tooltip-content",
34
- sideOffset,
35
- className: cn(
36
- "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
37
- className
38
- ),
39
- ...props,
40
- children: [
41
- children,
42
- /* @__PURE__ */ jsx(TooltipPrimitive.Arrow, { className: "bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })
43
- ]
44
- }
45
- ) });
46
- }
47
-
48
- // src/components/mesob-context.tsx
49
- import {
50
- createContext,
51
- useContext,
52
- useMemo
53
- } from "react";
54
- import { jsx as jsx2 } from "react/jsx-runtime";
55
- var MesobContext = createContext(null);
56
- function useMesob() {
57
- return useContext(MesobContext);
58
- }
59
-
60
- // src/components/link.tsx
61
- import { jsx as jsx3 } from "react/jsx-runtime";
62
- function Link({
63
- href,
64
- children,
65
- className,
66
- onClick,
67
- ...props
68
- }) {
69
- const mesob = useMesob();
70
- const LinkComponent = mesob?.linkComponent ?? "a";
71
- if (LinkComponent === "a") {
72
- return /* @__PURE__ */ jsx3("a", { href, className, onClick, ...props, children });
73
- }
74
- return /* @__PURE__ */ jsx3(
75
- LinkComponent,
76
- {
77
- href,
78
- className,
79
- onClick,
80
- ...props,
81
- children
82
- }
83
- );
84
- }
85
-
86
- // src/components/button.tsx
87
- import { Slot } from "@radix-ui/react-slot";
88
- import { cva } from "class-variance-authority";
89
- import { Fragment, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
90
- var buttonVariants = cva(
91
- "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
92
- {
93
- variants: {
94
- variant: {
95
- default: "bg-primary text-primary-foreground hover:bg-primary-600 dark:hover:bg-primary-400",
96
- destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
97
- outline: "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
98
- secondary: "bg-secondary text-secondary-foreground hover:bg-secondary-600 dark:hover:bg-secondary-400",
99
- ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
100
- link: "text-primary underline-offset-4 hover:text-primary-600 dark:hover:text-primary-400 hover:underline"
101
- },
102
- size: {
103
- default: "h-9 px-4 py-2 has-[>svg]:px-3",
104
- sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
105
- lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
106
- icon: "size-9",
107
- "icon-sm": "size-8",
108
- "icon-lg": "size-10"
109
- }
110
- },
111
- defaultVariants: {
112
- variant: "default",
113
- size: "default"
114
- }
115
- }
116
- );
117
-
118
- // src/components/input.tsx
119
- import { jsx as jsx5 } from "react/jsx-runtime";
120
-
121
- // src/components/separator.tsx
122
- import * as SeparatorPrimitive from "@radix-ui/react-separator";
123
- import { jsx as jsx6 } from "react/jsx-runtime";
124
-
125
- // src/components/sheet.tsx
126
- import * as SheetPrimitive from "@radix-ui/react-dialog";
127
- import { IconX } from "@tabler/icons-react";
128
- import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
129
- function Sheet({ ...props }) {
130
- return /* @__PURE__ */ jsx7(SheetPrimitive.Root, { "data-slot": "sheet", ...props });
131
- }
132
- function SheetPortal({
133
- ...props
134
- }) {
135
- return /* @__PURE__ */ jsx7(SheetPrimitive.Portal, { "data-slot": "sheet-portal", ...props });
136
- }
137
- function SheetOverlay({
138
- className,
139
- ...props
140
- }) {
141
- return /* @__PURE__ */ jsx7(
142
- SheetPrimitive.Overlay,
143
- {
144
- "data-slot": "sheet-overlay",
145
- className: cn(
146
- "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=open]:opacity-100 fixed inset-0 z-50 bg-[var(--overlay,oklch(0_0_0/0.5))]",
147
- className
148
- ),
149
- ...props
150
- }
151
- );
152
- }
153
- function SheetContent({
154
- className,
155
- children,
156
- side = "right",
157
- ...props
158
- }) {
159
- return /* @__PURE__ */ jsxs3(SheetPortal, { children: [
160
- /* @__PURE__ */ jsx7(SheetOverlay, {}),
161
- /* @__PURE__ */ jsxs3(
162
- SheetPrimitive.Content,
163
- {
164
- "data-slot": "sheet-content",
165
- className: cn(
166
- "bg-background text-foreground border-border data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:opacity-100 fixed z-[51] flex min-w-0 flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
167
- side === "right" && "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
168
- side === "left" && "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
169
- side === "top" && "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
170
- side === "bottom" && "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
171
- className
172
- ),
173
- ...props,
174
- children: [
175
- children,
176
- /* @__PURE__ */ jsxs3(SheetPrimitive.Close, { className: "ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none", children: [
177
- /* @__PURE__ */ jsx7(IconX, { className: "size-4" }),
178
- /* @__PURE__ */ jsx7("span", { className: "sr-only", children: "Close" })
179
- ] })
180
- ]
181
- }
182
- )
183
- ] });
184
- }
185
- function SheetHeader({ className, ...props }) {
186
- return /* @__PURE__ */ jsx7(
187
- "div",
188
- {
189
- "data-slot": "sheet-header",
190
- className: cn("flex flex-col gap-1.5 p-4", className),
191
- ...props
192
- }
193
- );
194
- }
195
- function SheetTitle({
196
- className,
197
- ...props
198
- }) {
199
- return /* @__PURE__ */ jsx7(
200
- SheetPrimitive.Title,
201
- {
202
- "data-slot": "sheet-title",
203
- className: cn("text-foreground font-semibold", className),
204
- ...props
205
- }
206
- );
207
- }
208
- function SheetDescription({
209
- className,
210
- ...props
211
- }) {
212
- return /* @__PURE__ */ jsx7(
213
- SheetPrimitive.Description,
214
- {
215
- "data-slot": "sheet-description",
216
- className: cn("text-muted-foreground text-sm", className),
217
- ...props
218
- }
219
- );
220
- }
221
-
222
- // src/components/skeleton.tsx
223
- import { jsx as jsx8 } from "react/jsx-runtime";
224
-
225
- // src/hooks/use-mobile.ts
226
- import * as React from "react";
227
-
228
- // src/components/sidebar.tsx
229
- import { Slot as Slot2 } from "@radix-ui/react-slot";
230
- import { IconMenu2 } from "@tabler/icons-react";
231
- import { cva as cva2 } from "class-variance-authority";
232
- import * as React3 from "react";
233
-
234
- // src/components/sidebar-context.tsx
235
- import * as React2 from "react";
236
- var SidebarContext = React2.createContext(null);
237
- function useSidebar() {
238
- const context = React2.useContext(SidebarContext);
239
- if (!context) {
240
- throw new Error("useSidebar must be used within a SidebarProvider.");
241
- }
242
- return context;
243
- }
244
-
245
- // src/components/sidebar.tsx
246
- import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
247
- var SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
248
- var SIDEBAR_WIDTH_MOBILE = "18rem";
249
- function Sidebar({
250
- side = "left",
251
- variant = "sidebar",
252
- collapsible = "offcanvas",
253
- className,
254
- children,
255
- ...props
256
- }) {
257
- const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
258
- if (collapsible === "none") {
259
- return /* @__PURE__ */ jsx9(
260
- "div",
261
- {
262
- "data-slot": "sidebar",
263
- className: cn(
264
- "bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
265
- className
266
- ),
267
- ...props,
268
- children
269
- }
270
- );
271
- }
272
- if (isMobile) {
273
- return /* @__PURE__ */ jsx9(Sheet, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: /* @__PURE__ */ jsxs4(
274
- SheetContent,
275
- {
276
- "data-sidebar": "sidebar",
277
- "data-slot": "sidebar",
278
- "data-mobile": "true",
279
- className: "bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden",
280
- style: {
281
- "--sidebar-width": SIDEBAR_WIDTH_MOBILE
282
- },
283
- side,
284
- children: [
285
- /* @__PURE__ */ jsxs4(SheetHeader, { className: "sr-only", children: [
286
- /* @__PURE__ */ jsx9(SheetTitle, { children: "Sidebar" }),
287
- /* @__PURE__ */ jsx9(SheetDescription, { children: "Displays the mobile sidebar." })
288
- ] }),
289
- /* @__PURE__ */ jsx9("div", { className: "flex h-full w-full flex-col", children })
290
- ]
291
- }
292
- ) });
293
- }
294
- return /* @__PURE__ */ jsxs4(
295
- "div",
296
- {
297
- className: "group peer text-sidebar-foreground hidden md:block",
298
- "data-state": state,
299
- "data-collapsible": state === "collapsed" ? collapsible : "",
300
- "data-variant": variant,
301
- "data-side": side,
302
- "data-slot": "sidebar",
303
- children: [
304
- /* @__PURE__ */ jsx9(
305
- "div",
306
- {
307
- "data-slot": "sidebar-gap",
308
- className: cn(
309
- "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
310
- "group-data-[collapsible=offcanvas]:w-0",
311
- "group-data-[side=right]:rotate-180",
312
- variant === "floating" || variant === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
313
- )
314
- }
315
- ),
316
- /* @__PURE__ */ jsx9(
317
- "div",
318
- {
319
- "data-slot": "sidebar-container",
320
- className: cn(
321
- "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
322
- side === "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)]",
323
- // Adjust the padding for floating and inset variants.
324
- variant === "floating" || variant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
325
- className
326
- ),
327
- ...props,
328
- children: /* @__PURE__ */ jsx9(
329
- "div",
330
- {
331
- "data-sidebar": "sidebar",
332
- "data-slot": "sidebar-inner",
333
- className: "bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm",
334
- children
335
- }
336
- )
337
- }
338
- )
339
- ]
340
- }
341
- );
342
- }
343
- function SidebarHeader({ className, ...props }) {
344
- return /* @__PURE__ */ jsx9(
345
- "div",
346
- {
347
- "data-slot": "sidebar-header",
348
- "data-sidebar": "header",
349
- className: cn("flex flex-col gap-2 p-2", className),
350
- ...props
351
- }
352
- );
353
- }
354
- function SidebarFooter({ className, ...props }) {
355
- return /* @__PURE__ */ jsx9(
356
- "div",
357
- {
358
- "data-slot": "sidebar-footer",
359
- "data-sidebar": "footer",
360
- className: cn("flex flex-col gap-2 p-2", className),
361
- ...props
362
- }
363
- );
364
- }
365
- function SidebarContent({ className, ...props }) {
366
- return /* @__PURE__ */ jsx9(
367
- "div",
368
- {
369
- "data-slot": "sidebar-content",
370
- "data-sidebar": "content",
371
- className: cn(
372
- "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
373
- className
374
- ),
375
- ...props
376
- }
377
- );
378
- }
379
- function SidebarGroup({ className, ...props }) {
380
- return /* @__PURE__ */ jsx9(
381
- "div",
382
- {
383
- "data-slot": "sidebar-group",
384
- "data-sidebar": "group",
385
- className: cn("relative flex w-full min-w-0 flex-col p-2", className),
386
- ...props
387
- }
388
- );
389
- }
390
- function SidebarGroupLabel({
391
- className,
392
- asChild = false,
393
- ...props
394
- }) {
395
- const Comp = asChild ? Slot2 : "div";
396
- return /* @__PURE__ */ jsx9(
397
- Comp,
398
- {
399
- "data-slot": "sidebar-group-label",
400
- "data-sidebar": "group-label",
401
- className: cn(
402
- "text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
403
- "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
404
- className
405
- ),
406
- ...props
407
- }
408
- );
409
- }
410
- function SidebarGroupContent({
411
- className,
412
- ...props
413
- }) {
414
- return /* @__PURE__ */ jsx9(
415
- "div",
416
- {
417
- "data-slot": "sidebar-group-content",
418
- "data-sidebar": "group-content",
419
- className: cn("w-full text-sm", className),
420
- ...props
421
- }
422
- );
423
- }
424
- var sidebarMenuButtonVariants = cva2(
425
- 'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-active focus-visible:ring-2 active:bg-sidebar-active 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]:relative data-[active=true]:bg-sidebar-active data-[active=true]:pl-3 data-[active=true]:font-medium data-[active=true]:text-sidebar-primary data-[active=true]:before:absolute data-[active=true]:before:left-1 data-[active=true]:before:top-[6px] data-[active=true]:before:bottom-[6px] data-[active=true]:before:w-[3px] data-[active=true]:before:rounded-full data-[active=true]:before:bg-primary data-[active=true]:before:content-[""] data-[state=open]:hover:bg-sidebar-active group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 min-w-0',
426
- {
427
- variants: {
428
- variant: {
429
- default: "hover:bg-sidebar-active",
430
- 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))]"
431
- },
432
- size: {
433
- default: "h-8 text-sm",
434
- sm: "h-7 text-xs",
435
- lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!"
436
- }
437
- },
438
- defaultVariants: {
439
- variant: "default",
440
- size: "default"
441
- }
442
- }
443
- );
444
-
445
- // src/components/app-sidebar.tsx
446
- import { IconChevronDown } from "@tabler/icons-react";
447
- import { useEffect as useEffect3, useRef, useState as useState3 } from "react";
448
- import { useToggle } from "react-use";
449
- import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
450
- function isLinkActive(pathname, href, pathMatch = "prefix") {
451
- if (!pathname) {
452
- return false;
453
- }
454
- if (!href) {
455
- return false;
456
- }
457
- if (pathMatch === "exact") {
458
- return pathname === href;
459
- }
460
- if (pathname === href) {
461
- return true;
462
- }
463
- return pathname.startsWith(`${href}/`);
464
- }
465
- function hasActiveDescendant(item, pathname) {
466
- if (!pathname) {
467
- return false;
468
- }
469
- if (isLinkActive(pathname, item.href, item.pathMatch ?? "prefix")) {
470
- return true;
471
- }
472
- return item.children?.some((c) => hasActiveDescendant(c, pathname)) ?? false;
473
- }
474
- function hasPermission(roles, permission) {
475
- if (!permission?.length) {
476
- return true;
477
- }
478
- if (!roles?.length) {
479
- return true;
480
- }
481
- return permission.some((p) => roles.includes(p));
482
- }
483
- var TRUNCATION_TOOLTIP_MIN_LENGTH = 24;
484
- function TruncationTooltip({
485
- text,
486
- children
487
- }) {
488
- const ref = useRef(null);
489
- const [truncated, setTruncated] = useState3(false);
490
- useEffect3(() => {
491
- const el = ref.current;
492
- if (!el) {
493
- return;
494
- }
495
- const check = () => setTruncated(el.scrollWidth > el.clientWidth);
496
- check();
497
- const ro = new ResizeObserver(check);
498
- ro.observe(el);
499
- return () => ro.disconnect();
500
- }, [text]);
501
- const showTooltip = truncated || text.length >= TRUNCATION_TOOLTIP_MIN_LENGTH;
502
- const inner = /* @__PURE__ */ jsx10("span", { ref, className: "min-w-0 truncate block", children });
503
- if (!showTooltip) {
504
- return inner;
505
- }
506
- return /* @__PURE__ */ jsxs5(Tooltip, { children: [
507
- /* @__PURE__ */ jsx10(TooltipTrigger, { asChild: true, children: inner }),
508
- /* @__PURE__ */ jsx10(TooltipContent, { side: "right", sideOffset: 8, children: text })
509
- ] });
510
- }
511
- function MenuLabel({ icon: Icon, label }) {
512
- return /* @__PURE__ */ jsxs5("div", { className: "text-sidebar-foreground flex min-h-0 min-w-0 flex-1 cursor-pointer items-center gap-2 text-sm", children: [
513
- Icon ? /* @__PURE__ */ jsx10(Icon, { className: "size-4 shrink-0" }) : null,
514
- /* @__PURE__ */ jsx10(TruncationTooltip, { text: label, children: label })
515
- ] });
516
- }
517
- function RowContent({
518
- item,
519
- hasChildren,
520
- showChildren
521
- }) {
522
- return /* @__PURE__ */ jsxs5(Fragment2, { children: [
523
- /* @__PURE__ */ jsx10(MenuLabel, { icon: item.icon, label: item.title }),
524
- hasChildren && /* @__PURE__ */ jsx10(
525
- IconChevronDown,
526
- {
527
- className: cn(
528
- "ml-auto size-4 shrink-0 cursor-pointer transition-transform",
529
- showChildren && "rotate-180"
530
- ),
531
- "aria-hidden": true
532
- }
533
- )
534
- ] });
535
- }
536
- function NavItemRow({
537
- item,
538
- level,
539
- pathname,
540
- roles,
541
- onNavClick
542
- }) {
543
- const [open, toggle] = useToggle(hasActiveDescendant(item, pathname));
544
- const hasChildren = (item.children?.length ?? 0) > 0;
545
- const showChildren = (open || hasActiveDescendant(item, pathname)) && hasChildren;
546
- const pathMatch = item.pathMatch ?? "prefix";
547
- const isActive = isLinkActive(pathname, item.href, pathMatch);
548
- const lineLeft = 28 + 20 * level;
549
- if (!hasPermission(roles, item.permission)) {
550
- return null;
551
- }
552
- const paddingLeft = 20 + 20 * level;
553
- const rowWrapperClass = cn(
554
- "text-sidebar-foreground relative flex h-8 w-full min-w-0 items-center rounded-md pr-2 text-left text-sm transition duration-300 ease-in-out",
555
- "hover:bg-sidebar-active",
556
- isActive && "bg-sidebar-active text-sidebar-primary"
557
- );
558
- const rowContent = /* @__PURE__ */ jsxs5(Fragment2, { children: [
559
- isActive && /* @__PURE__ */ jsx10(
560
- "div",
561
- {
562
- className: "absolute left-1 top-1.5 bottom-1.5 z-10 w-[3px] rounded-full bg-primary",
563
- "aria-hidden": true
564
- }
565
- ),
566
- /* @__PURE__ */ jsx10(
567
- RowContent,
568
- {
569
- item,
570
- hasChildren,
571
- showChildren
572
- }
573
- )
574
- ] });
575
- return /* @__PURE__ */ jsxs5("li", { className: "relative mt-1", children: [
576
- item.href ? /* @__PURE__ */ jsx10(
577
- Link,
578
- {
579
- href: item.href,
580
- onClick: hasChildren ? toggle : onNavClick,
581
- className: rowWrapperClass,
582
- style: { paddingLeft },
583
- "aria-current": isActive ? "page" : void 0,
584
- children: rowContent
585
- }
586
- ) : /* @__PURE__ */ jsx10(
587
- "button",
588
- {
589
- type: "button",
590
- onClick: toggle,
591
- className: rowWrapperClass,
592
- style: { paddingLeft },
593
- "aria-expanded": showChildren,
594
- "aria-label": item.title,
595
- children: rowContent
596
- }
597
- ),
598
- showChildren && /* @__PURE__ */ jsxs5("ul", { className: "relative mt-1", children: [
599
- /* @__PURE__ */ jsx10(
600
- "div",
601
- {
602
- className: "absolute top-0 bottom-0 z-10 w-px bg-sidebar-border",
603
- style: { left: lineLeft },
604
- "aria-hidden": true
605
- }
606
- ),
607
- (item.children ?? []).map((child) => /* @__PURE__ */ jsx10(
608
- NavItemRow,
609
- {
610
- item: child,
611
- level: level + 1,
612
- pathname,
613
- roles,
614
- onNavClick
615
- },
616
- child.href ?? child.title
617
- ))
618
- ] })
619
- ] });
620
- }
621
- function AppSidebar({
622
- logo,
623
- navItems,
624
- footer,
625
- pathname,
626
- roles
627
- }) {
628
- const { isMobile, setOpenMobile } = useSidebar();
629
- const closeSidebar = () => {
630
- if (isMobile) {
631
- setOpenMobile(false);
632
- }
633
- };
634
- const groupedItems = navItems.reduce(
635
- (acc, item) => {
636
- const group = item.group ?? "default";
637
- if (!acc[group]) {
638
- acc[group] = [];
639
- }
640
- acc[group].push(item);
641
- return acc;
642
- },
643
- {}
644
- );
645
- return /* @__PURE__ */ jsxs5(Sidebar, { children: [
646
- /* @__PURE__ */ jsx10(SidebarHeader, { children: logo }),
647
- /* @__PURE__ */ jsx10(SidebarContent, { children: /* @__PURE__ */ jsx10(
648
- "nav",
649
- {
650
- "aria-label": "Main navigation",
651
- className: "flex min-h-0 min-w-0 flex-1 flex-col overflow-x-hidden overflow-y-auto",
652
- children: Object.entries(groupedItems).map(([groupName, items]) => /* @__PURE__ */ jsxs5(SidebarGroup, { className: "py-0", children: [
653
- groupName !== "default" && /* @__PURE__ */ jsx10(SidebarGroupLabel, { className: "uppercase tracking-wide", children: groupName }),
654
- /* @__PURE__ */ jsx10(SidebarGroupContent, { children: /* @__PURE__ */ jsx10("ul", { className: "flex w-full min-w-0 list-none flex-col gap-0 p-0", children: items.map((item) => /* @__PURE__ */ jsx10(
655
- NavItemRow,
656
- {
657
- item,
658
- level: 0,
659
- pathname,
660
- roles,
661
- onNavClick: closeSidebar
662
- },
663
- item.href ?? item.title
664
- )) }) })
665
- ] }, groupName))
666
- }
667
- ) }),
668
- footer && /* @__PURE__ */ jsx10(SidebarFooter, { children: footer })
669
- ] });
670
- }
671
- export {
672
- AppSidebar
673
- };
674
- //# sourceMappingURL=app-sidebar.js.map