@giddaa-housing/ui 0.1.0 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (315) hide show
  1. package/README.md +18 -6
  2. package/css/base.css +37 -0
  3. package/css/components.css +135 -0
  4. package/css/generated/shared.css +1 -0
  5. package/css/giddaa.css +402 -0
  6. package/css/preset.css +77 -0
  7. package/css/styles.css +2 -0
  8. package/css/theme.css +255 -0
  9. package/dist/accordion.d.ts +9 -10
  10. package/dist/accordion.js +41 -117
  11. package/dist/activity-timeline.d.ts +29 -0
  12. package/dist/activity-timeline.js +97 -0
  13. package/dist/alert.d.ts +8 -9
  14. package/dist/alert.js +53 -141
  15. package/dist/auth-layout.d.ts +23 -0
  16. package/dist/auth-layout.js +153 -0
  17. package/dist/avatar.d.ts +6 -6
  18. package/dist/avatar.js +40 -142
  19. package/dist/badge.d.ts +12 -13
  20. package/dist/badge.js +66 -114
  21. package/dist/bar-chart.d.ts +136 -114
  22. package/dist/bar-chart.js +244 -297
  23. package/dist/breadcrumb.d.ts +5 -5
  24. package/dist/breadcrumb.js +56 -148
  25. package/dist/bullet-chart.d.ts +33 -33
  26. package/dist/bullet-chart.js +123 -183
  27. package/dist/button-BZIeyUw6.d.ts +17 -0
  28. package/dist/button-group.d.ts +13 -16
  29. package/dist/button-group.js +38 -163
  30. package/dist/button.d.ts +2 -19
  31. package/dist/button.js +90 -142
  32. package/dist/calendar.d.ts +6 -6
  33. package/dist/calendar.js +134 -288
  34. package/dist/card.d.ts +14 -16
  35. package/dist/card.js +58 -174
  36. package/dist/carousel.d.ts +34 -35
  37. package/dist/carousel.js +319 -378
  38. package/dist/chart.d.ts +58 -59
  39. package/dist/chart.js +350 -466
  40. package/dist/checkbox.d.ts +10 -12
  41. package/dist/checkbox.js +84 -84
  42. package/dist/cn-BI_4DMBf.js +23 -0
  43. package/dist/collapsible.d.ts +7 -8
  44. package/dist/collapsible.js +23 -77
  45. package/dist/combobox.d.ts +10 -10
  46. package/dist/combobox.js +220 -696
  47. package/dist/cta.d.ts +64 -0
  48. package/dist/cta.js +192 -0
  49. package/dist/currency-selector.d.ts +41 -0
  50. package/dist/currency-selector.js +114 -0
  51. package/dist/data-table.d.ts +164 -0
  52. package/dist/data-table.js +673 -0
  53. package/dist/date-picker.d.ts +27 -20
  54. package/dist/date-picker.js +122 -520
  55. package/dist/details-card.d.ts +19 -0
  56. package/dist/details-card.js +118 -0
  57. package/dist/dialog.d.ts +13 -14
  58. package/dist/dialog.js +117 -320
  59. package/dist/dropdown-menu.d.ts +14 -14
  60. package/dist/dropdown-menu.js +170 -365
  61. package/dist/dropzone.d.ts +55 -55
  62. package/dist/dropzone.js +328 -467
  63. package/dist/editorial-card.d.ts +27 -0
  64. package/dist/editorial-card.js +144 -0
  65. package/dist/empty-state.d.ts +8 -9
  66. package/dist/empty-state.js +48 -135
  67. package/dist/field.d.ts +23 -25
  68. package/dist/field.js +111 -327
  69. package/dist/filter.d.ts +118 -0
  70. package/dist/filter.js +775 -0
  71. package/dist/footer.d.ts +40 -0
  72. package/dist/footer.js +227 -0
  73. package/dist/funnel-chart.d.ts +38 -41
  74. package/dist/funnel-chart.js +168 -563
  75. package/dist/gallery-indicator.d.ts +17 -0
  76. package/dist/gallery-indicator.js +75 -0
  77. package/dist/heatmap-chart.d.ts +95 -0
  78. package/dist/heatmap-chart.js +197 -0
  79. package/dist/infotip.d.ts +10 -0
  80. package/dist/infotip.js +40 -0
  81. package/dist/input-CfoEJ8A6.d.ts +12 -0
  82. package/dist/input-group.d.ts +16 -19
  83. package/dist/input-group.js +92 -372
  84. package/dist/input-size-context-C-SFx9sx.d.ts +10 -0
  85. package/dist/input-size-context.d.ts +2 -11
  86. package/dist/input-size-context.js +14 -20
  87. package/dist/input.d.ts +2 -13
  88. package/dist/input.js +23 -79
  89. package/dist/item.d.ts +7 -8
  90. package/dist/item.js +22 -89
  91. package/dist/kpi-card.d.ts +18 -20
  92. package/dist/kpi-card.js +84 -232
  93. package/dist/label.d.ts +6 -6
  94. package/dist/label.js +39 -66
  95. package/dist/line-chart.d.ts +88 -89
  96. package/dist/line-chart.js +143 -262
  97. package/dist/logo.d.ts +4 -4
  98. package/dist/logo.js +87 -141
  99. package/dist/map-indicator.d.ts +13 -0
  100. package/dist/map-indicator.js +83 -0
  101. package/dist/match.d.ts +15 -0
  102. package/dist/match.js +68 -0
  103. package/dist/media-gallery-hero.d.ts +58 -0
  104. package/dist/media-gallery-hero.js +201 -0
  105. package/dist/media-player.d.ts +60 -0
  106. package/dist/media-player.js +919 -0
  107. package/dist/multi-step-form.d.ts +56 -0
  108. package/dist/multi-step-form.js +342 -0
  109. package/dist/number-input.d.ts +34 -34
  110. package/dist/number-input.js +62 -413
  111. package/dist/page-header.d.ts +10 -11
  112. package/dist/page-header.js +34 -107
  113. package/dist/pagination.d.ts +17 -20
  114. package/dist/pagination.js +132 -341
  115. package/dist/password-input.d.ts +5 -12
  116. package/dist/password-input.js +32 -354
  117. package/dist/phone-input.d.ts +19 -19
  118. package/dist/phone-input.js +232 -561
  119. package/dist/photo-gallery.d.ts +20 -20
  120. package/dist/photo-gallery.js +314 -746
  121. package/dist/picker-lzgmsNfG.js +32 -0
  122. package/dist/pie-chart.d.ts +60 -60
  123. package/dist/pie-chart.js +141 -184
  124. package/dist/popover.d.ts +9 -9
  125. package/dist/popover.js +60 -156
  126. package/dist/price-tag.d.ts +34 -0
  127. package/dist/price-tag.js +118 -0
  128. package/dist/progress.d.ts +18 -16
  129. package/dist/progress.js +156 -300
  130. package/dist/property-listing-card.d.ts +29 -0
  131. package/dist/property-listing-card.js +117 -0
  132. package/dist/radar-chart.d.ts +108 -0
  133. package/dist/radar-chart.js +172 -0
  134. package/dist/radio-group.d.ts +11 -13
  135. package/dist/radio-group.js +47 -96
  136. package/dist/review-block.d.ts +18 -0
  137. package/dist/review-block.js +154 -0
  138. package/dist/rich-text-editor.d.ts +30 -14
  139. package/dist/rich-text-editor.js +594 -979
  140. package/dist/scatter-chart.d.ts +140 -0
  141. package/dist/scatter-chart.js +248 -0
  142. package/dist/search-input.d.ts +8 -15
  143. package/dist/search-input.js +58 -408
  144. package/dist/select.d.ts +8 -8
  145. package/dist/select.js +131 -291
  146. package/dist/separator.d.ts +8 -9
  147. package/dist/separator.js +31 -70
  148. package/dist/sheet.d.ts +11 -11
  149. package/dist/sheet.js +84 -262
  150. package/dist/sidebar.d.ts +32 -37
  151. package/dist/sidebar.js +380 -1055
  152. package/dist/size-context-D4mYvcg8.d.ts +10 -0
  153. package/dist/size-context.d.ts +2 -11
  154. package/dist/size-context.js +14 -18
  155. package/dist/skeleton.d.ts +4 -5
  156. package/dist/skeleton.js +9 -45
  157. package/dist/slider.d.ts +27 -0
  158. package/dist/slider.js +81 -0
  159. package/dist/sparkline.d.ts +43 -46
  160. package/dist/sparkline.js +223 -561
  161. package/dist/stepper.d.ts +23 -24
  162. package/dist/stepper.js +149 -276
  163. package/dist/styles.css +9995 -2
  164. package/dist/switch.d.ts +10 -12
  165. package/dist/switch.js +49 -106
  166. package/dist/table-card.d.ts +35 -0
  167. package/dist/table-card.js +125 -0
  168. package/dist/table.d.ts +18 -14
  169. package/dist/table.js +114 -182
  170. package/dist/tabs.d.ts +23 -15
  171. package/dist/tabs.js +62 -149
  172. package/dist/tag.d.ts +22 -23
  173. package/dist/tag.js +104 -156
  174. package/dist/testimonial-block.d.ts +33 -0
  175. package/dist/testimonial-block.js +208 -0
  176. package/dist/textarea-IS_D8pXf.d.ts +11 -0
  177. package/dist/textarea.d.ts +2 -12
  178. package/dist/textarea.js +20 -74
  179. package/dist/time-picker.d.ts +11 -11
  180. package/dist/time-picker.js +247 -464
  181. package/dist/toast.d.ts +16 -18
  182. package/dist/toast.js +154 -310
  183. package/dist/tooltip.d.ts +9 -10
  184. package/dist/tooltip.js +33 -91
  185. package/dist/tree-map.d.ts +54 -57
  186. package/dist/tree-map.js +231 -646
  187. package/dist/use-uncontrolled-CLfM1XbB.js +21 -0
  188. package/dist/waterfall-chart.d.ts +126 -0
  189. package/dist/waterfall-chart.js +480 -0
  190. package/package.json +123 -34
  191. package/dist/accordion.js.map +0 -1
  192. package/dist/alert.js.map +0 -1
  193. package/dist/avatar.js.map +0 -1
  194. package/dist/badge.js.map +0 -1
  195. package/dist/bar-chart.js.map +0 -1
  196. package/dist/base.css +0 -32
  197. package/dist/breadcrumb.js.map +0 -1
  198. package/dist/bullet-chart.js.map +0 -1
  199. package/dist/button-group.js.map +0 -1
  200. package/dist/button.js.map +0 -1
  201. package/dist/calendar.js.map +0 -1
  202. package/dist/card.js.map +0 -1
  203. package/dist/carousel.js.map +0 -1
  204. package/dist/chart.js.map +0 -1
  205. package/dist/checkbox.js.map +0 -1
  206. package/dist/collapsible.js.map +0 -1
  207. package/dist/combobox.js.map +0 -1
  208. package/dist/date-picker.js.map +0 -1
  209. package/dist/dialog.js.map +0 -1
  210. package/dist/dropdown-menu.js.map +0 -1
  211. package/dist/dropzone.js.map +0 -1
  212. package/dist/empty-state.js.map +0 -1
  213. package/dist/field.js.map +0 -1
  214. package/dist/files/red-hat-display-latin-300-italic.woff +0 -0
  215. package/dist/files/red-hat-display-latin-300-italic.woff2 +0 -0
  216. package/dist/files/red-hat-display-latin-300-normal.woff +0 -0
  217. package/dist/files/red-hat-display-latin-300-normal.woff2 +0 -0
  218. package/dist/files/red-hat-display-latin-400-italic.woff +0 -0
  219. package/dist/files/red-hat-display-latin-400-italic.woff2 +0 -0
  220. package/dist/files/red-hat-display-latin-400-normal.woff +0 -0
  221. package/dist/files/red-hat-display-latin-400-normal.woff2 +0 -0
  222. package/dist/files/red-hat-display-latin-500-italic.woff +0 -0
  223. package/dist/files/red-hat-display-latin-500-italic.woff2 +0 -0
  224. package/dist/files/red-hat-display-latin-500-normal.woff +0 -0
  225. package/dist/files/red-hat-display-latin-500-normal.woff2 +0 -0
  226. package/dist/files/red-hat-display-latin-600-italic.woff +0 -0
  227. package/dist/files/red-hat-display-latin-600-italic.woff2 +0 -0
  228. package/dist/files/red-hat-display-latin-600-normal.woff +0 -0
  229. package/dist/files/red-hat-display-latin-600-normal.woff2 +0 -0
  230. package/dist/files/red-hat-display-latin-700-italic.woff +0 -0
  231. package/dist/files/red-hat-display-latin-700-italic.woff2 +0 -0
  232. package/dist/files/red-hat-display-latin-700-normal.woff +0 -0
  233. package/dist/files/red-hat-display-latin-700-normal.woff2 +0 -0
  234. package/dist/files/red-hat-display-latin-800-italic.woff +0 -0
  235. package/dist/files/red-hat-display-latin-800-italic.woff2 +0 -0
  236. package/dist/files/red-hat-display-latin-800-normal.woff +0 -0
  237. package/dist/files/red-hat-display-latin-800-normal.woff2 +0 -0
  238. package/dist/files/red-hat-display-latin-900-italic.woff +0 -0
  239. package/dist/files/red-hat-display-latin-900-italic.woff2 +0 -0
  240. package/dist/files/red-hat-display-latin-900-normal.woff +0 -0
  241. package/dist/files/red-hat-display-latin-900-normal.woff2 +0 -0
  242. package/dist/files/red-hat-display-latin-ext-300-italic.woff +0 -0
  243. package/dist/files/red-hat-display-latin-ext-300-italic.woff2 +0 -0
  244. package/dist/files/red-hat-display-latin-ext-300-normal.woff +0 -0
  245. package/dist/files/red-hat-display-latin-ext-300-normal.woff2 +0 -0
  246. package/dist/files/red-hat-display-latin-ext-400-italic.woff +0 -0
  247. package/dist/files/red-hat-display-latin-ext-400-italic.woff2 +0 -0
  248. package/dist/files/red-hat-display-latin-ext-400-normal.woff +0 -0
  249. package/dist/files/red-hat-display-latin-ext-400-normal.woff2 +0 -0
  250. package/dist/files/red-hat-display-latin-ext-500-italic.woff +0 -0
  251. package/dist/files/red-hat-display-latin-ext-500-italic.woff2 +0 -0
  252. package/dist/files/red-hat-display-latin-ext-500-normal.woff +0 -0
  253. package/dist/files/red-hat-display-latin-ext-500-normal.woff2 +0 -0
  254. package/dist/files/red-hat-display-latin-ext-600-italic.woff +0 -0
  255. package/dist/files/red-hat-display-latin-ext-600-italic.woff2 +0 -0
  256. package/dist/files/red-hat-display-latin-ext-600-normal.woff +0 -0
  257. package/dist/files/red-hat-display-latin-ext-600-normal.woff2 +0 -0
  258. package/dist/files/red-hat-display-latin-ext-700-italic.woff +0 -0
  259. package/dist/files/red-hat-display-latin-ext-700-italic.woff2 +0 -0
  260. package/dist/files/red-hat-display-latin-ext-700-normal.woff +0 -0
  261. package/dist/files/red-hat-display-latin-ext-700-normal.woff2 +0 -0
  262. package/dist/files/red-hat-display-latin-ext-800-italic.woff +0 -0
  263. package/dist/files/red-hat-display-latin-ext-800-italic.woff2 +0 -0
  264. package/dist/files/red-hat-display-latin-ext-800-normal.woff +0 -0
  265. package/dist/files/red-hat-display-latin-ext-800-normal.woff2 +0 -0
  266. package/dist/files/red-hat-display-latin-ext-900-italic.woff +0 -0
  267. package/dist/files/red-hat-display-latin-ext-900-italic.woff2 +0 -0
  268. package/dist/files/red-hat-display-latin-ext-900-normal.woff +0 -0
  269. package/dist/files/red-hat-display-latin-ext-900-normal.woff2 +0 -0
  270. package/dist/funnel-chart.js.map +0 -1
  271. package/dist/index.d.ts +0 -87
  272. package/dist/index.js +0 -10448
  273. package/dist/index.js.map +0 -1
  274. package/dist/input-group.js.map +0 -1
  275. package/dist/input-size-context.js.map +0 -1
  276. package/dist/input.js.map +0 -1
  277. package/dist/item.js.map +0 -1
  278. package/dist/kpi-card.js.map +0 -1
  279. package/dist/label.js.map +0 -1
  280. package/dist/line-chart.js.map +0 -1
  281. package/dist/logo.js.map +0 -1
  282. package/dist/number-input.js.map +0 -1
  283. package/dist/page-header.js.map +0 -1
  284. package/dist/pagination.js.map +0 -1
  285. package/dist/password-input.js.map +0 -1
  286. package/dist/phone-input.js.map +0 -1
  287. package/dist/photo-gallery.js.map +0 -1
  288. package/dist/pie-chart.js.map +0 -1
  289. package/dist/popover.js.map +0 -1
  290. package/dist/progress.js.map +0 -1
  291. package/dist/radio-group.js.map +0 -1
  292. package/dist/red-hat-display.css +0 -2
  293. package/dist/rich-text-editor.js.map +0 -1
  294. package/dist/search-input.js.map +0 -1
  295. package/dist/select.js.map +0 -1
  296. package/dist/separator.js.map +0 -1
  297. package/dist/sheet.js.map +0 -1
  298. package/dist/sidebar.js.map +0 -1
  299. package/dist/size-context.js.map +0 -1
  300. package/dist/skeleton.js.map +0 -1
  301. package/dist/sparkline.js.map +0 -1
  302. package/dist/stepper.js.map +0 -1
  303. package/dist/switch.js.map +0 -1
  304. package/dist/tab-list.d.ts +0 -38
  305. package/dist/tab-list.js +0 -394
  306. package/dist/tab-list.js.map +0 -1
  307. package/dist/table.js.map +0 -1
  308. package/dist/tabs.js.map +0 -1
  309. package/dist/tag.js.map +0 -1
  310. package/dist/textarea.js.map +0 -1
  311. package/dist/theme/giddaa.css +0 -2
  312. package/dist/time-picker.js.map +0 -1
  313. package/dist/toast.js.map +0 -1
  314. package/dist/tooltip.js.map +0 -1
  315. package/dist/tree-map.js.map +0 -1
package/dist/sidebar.js CHANGED
@@ -1,1078 +1,403 @@
1
- // src/components/ui/sidebar.tsx
1
+ "use client";
2
+ import { t as cn } from "./cn-BI_4DMBf.js";
3
+ import { Separator } from "./separator.js";
4
+ import { Button } from "./button.js";
5
+ import { Input } from "./input.js";
6
+ import { t as useUncontrolled } from "./use-uncontrolled-CLfM1XbB.js";
7
+ import { Skeleton } from "./skeleton.js";
8
+ import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
9
+ import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "./sheet.js";
10
+ import { Menu } from "lucide-react";
11
+ import { jsx, jsxs } from "react/jsx-runtime";
2
12
  import { mergeProps } from "@base-ui/react/merge-props";
3
13
  import { useRender } from "@base-ui/react/use-render";
4
- import { cva as cva4 } from "class-variance-authority";
5
- import { Menu } from "lucide-react";
6
- import * as React2 from "react";
7
-
8
- // src/lib/cn.ts
9
- import { clsx } from "clsx";
10
- import { extendTailwindMerge } from "tailwind-merge";
11
- var twMerge = extendTailwindMerge({
12
- extend: {
13
- classGroups: {
14
- "font-size": [
15
- {
16
- text: [
17
- "gdt-display",
18
- "gdt-h1",
19
- "gdt-h2",
20
- "gdt-h3",
21
- "gdt-h4",
22
- "gdt-h5",
23
- "gdt-xl",
24
- "gdt-lg",
25
- "gdt-md",
26
- "gdt-sm",
27
- "gdt-xs",
28
- "gdt-subtext",
29
- "gdt-capitalized"
30
- ]
31
- }
32
- ]
33
- }
34
- }
35
- });
36
- function cn(...inputs) {
37
- return twMerge(clsx(inputs));
38
- }
39
-
40
- // src/lib/use-mobile.ts
14
+ import { cva } from "class-variance-authority";
41
15
  import * as React from "react";
42
- var DEFAULT_MOBILE_BREAKPOINT = 1024;
16
+ //#region src/lib/use-mobile.ts
17
+ const DEFAULT_MOBILE_BREAKPOINT = 1024;
43
18
  function useIsMobile(breakpoint = DEFAULT_MOBILE_BREAKPOINT) {
44
- const [isMobile, setIsMobile] = React.useState(false);
45
- React.useEffect(() => {
46
- const mediaQuery = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);
47
- const update = () => setIsMobile(window.innerWidth < breakpoint);
48
- update();
49
- mediaQuery.addEventListener("change", update);
50
- return () => mediaQuery.removeEventListener("change", update);
51
- }, [breakpoint]);
52
- return isMobile;
53
- }
54
-
55
- // src/lib/use-uncontrolled.ts
56
- import { useState as useState2 } from "react";
57
- function useUncontrolled({
58
- value,
59
- defaultValue,
60
- finalValue,
61
- onChange = () => {
62
- }
63
- }) {
64
- const [uncontrolledValue, setUncontrolledValue] = useState2(
65
- defaultValue !== void 0 ? defaultValue : finalValue
66
- );
67
- const handleUncontrolledChange = (nextValue, ...payload) => {
68
- setUncontrolledValue(nextValue);
69
- onChange?.(nextValue, ...payload);
70
- };
71
- if (value !== void 0) {
72
- return [value, onChange, true];
73
- }
74
- return [uncontrolledValue, handleUncontrolledChange, false];
75
- }
76
-
77
- // src/components/ui/button.tsx
78
- import { Button as ButtonPrimitive } from "@base-ui/react/button";
79
- import { cva } from "class-variance-authority";
80
- import { Loader } from "lucide-react";
81
-
82
- // src/components/ui/size-context.tsx
83
- import { createContext, useContext } from "react";
84
- import { Fragment, jsx } from "react/jsx-runtime";
85
- var SizeContext = createContext(void 0);
86
- function SizeProvider({
87
- children,
88
- size
89
- }) {
90
- if (!size) {
91
- return /* @__PURE__ */ jsx(Fragment, { children });
92
- }
93
- return /* @__PURE__ */ jsx(SizeContext.Provider, { value: size, children });
94
- }
95
- function useComponentSize(size, fallback = "md") {
96
- const inheritedSize = useContext(SizeContext);
97
- return size ?? inheritedSize ?? fallback;
98
- }
99
-
100
- // src/components/ui/button.tsx
101
- import { jsx as jsx2, jsxs } from "react/jsx-runtime";
102
- var buttonVariants = cva(
103
- "group/button inline-flex shrink-0 items-center justify-center rounded-full bg-clip-padding whitespace-nowrap font-bold transition-[background-color,color,border-color,box-shadow,transform] outline-none select-none focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-invalid:border-line-danger aria-invalid:ring-3 aria-invalid:ring-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
104
- {
105
- variants: {
106
- variant: {
107
- primary: "bg-action-primary text-fg-on-brand hover:bg-action-primary-hover active:bg-action-primary-pressed",
108
- "primary-outline": "border-2 border-action-primary bg-transparent text-fg-brand hover:bg-surface-brand-subtle active:bg-surface-brand-subtle data-focused:bg-surface-brand-subtle data-pressed:bg-surface-brand-subtle",
109
- secondary: "bg-surface-brand-subtle text-fg-brand hover:bg-action-primary-hover hover:text-fg-on-brand active:bg-action-primary-pressed active:text-fg-on-brand data-focused:bg-action-primary-hover data-pressed:bg-action-primary-pressed data-focused:text-fg-on-brand data-pressed:text-fg-on-brand",
110
- "secondary-outline": "border-2 border-action-secondary bg-transparent text-fg-brand hover:bg-surface-brand-subtle active:bg-surface-brand-subtle data-focused:bg-surface-brand-subtle data-pressed:bg-surface-brand-subtle",
111
- tertiary: "bg-action-tertiary text-fg-primary hover:bg-action-tertiary-hover active:bg-action-tertiary-pressed data-focused:bg-action-tertiary-hover data-pressed:bg-action-tertiary-pressed",
112
- "tertiary-outline": "border border-line-strong bg-transparent text-fg-primary hover:bg-surface active:bg-surface-raised data-focused:bg-surface data-pressed:bg-surface-raised",
113
- ghost: "bg-transparent text-fg-primary hover:bg-surface active:bg-surface-raised data-focused:bg-surface data-pressed:bg-surface-raised",
114
- danger: "bg-action-danger text-fg-on-brand hover:bg-action-danger-hover active:bg-action-danger-pressed data-focused:bg-action-danger-hover data-pressed:bg-action-danger-pressed",
115
- "glass-overlay": "bg-surface-glass-overlay-button text-fg-on-brand",
116
- "link-brand": "border-transparent bg-transparent px-0 text-fg-brand hover:underline active:underline active:opacity-70",
117
- "link-neutral": "border-transparent bg-transparent px-0 text-fg-secondary hover:underline active:underline active:opacity-70"
118
- },
119
- size: {
120
- sm: "h-8 gap-2 px-3.5 text-gdt-xs has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3 [&_svg:not([class*='size-'])]:size-3.5",
121
- md: "h-10 gap-2 px-4.5 text-gdt-sm has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4",
122
- lg: "h-12.5 gap-2.5 px-5.5 text-gdt-md has-data-[icon=inline-end]:pr-5 has-data-[icon=inline-start]:pl-5 [&_svg:not([class*='size-'])]:size-4.5",
123
- xl: "h-14 gap-3 px-6.5 text-gdt-lg has-data-[icon=inline-end]:pr-6 has-data-[icon=inline-start]:pl-6 [&_svg:not([class*='size-'])]:size-5",
124
- icon: "size-10",
125
- "icon-xs": "size-6 text-gdt-xs [&_svg:not([class*='size-'])]:size-3",
126
- "icon-sm": "size-8 text-gdt-sm [&_svg:not([class*='size-'])]:size-3.5",
127
- "icon-lg": "size-12.5 text-gdt-md [&_svg:not([class*='size-'])]:size-4.5",
128
- "icon-xl": "size-14 text-gdt-lg [&_svg:not([class*='size-'])]:size-5"
129
- }
130
- },
131
- defaultVariants: {
132
- variant: "primary",
133
- size: "md"
134
- }
135
- }
136
- );
137
- function Button({
138
- className,
139
- variant = "primary",
140
- size,
141
- isLoading = false,
142
- children,
143
- disabled = false,
144
- ...props
145
- }) {
146
- const inheritedSize = useComponentSize();
147
- const resolvedSize = size ?? inheritedSize;
148
- const _disabled = disabled || isLoading;
149
- return /* @__PURE__ */ jsxs(
150
- ButtonPrimitive,
151
- {
152
- "data-slot": "button",
153
- className: cn(buttonVariants({ variant, size: resolvedSize, className })),
154
- disabled: _disabled,
155
- ...props,
156
- children: [
157
- isLoading && /* @__PURE__ */ jsx2(Loader, { className: "size-4 animate-spin" }),
158
- " ",
159
- children
160
- ]
161
- }
162
- );
163
- }
164
-
165
- // src/components/ui/input.tsx
166
- import { Input as InputPrimitive } from "@base-ui/react/input";
167
- import { cva as cva2 } from "class-variance-authority";
168
-
169
- // src/components/ui/input-size-context.tsx
170
- import { createContext as createContext2, useContext as useContext2 } from "react";
171
- import { Fragment as Fragment2, jsx as jsx3 } from "react/jsx-runtime";
172
- var InputSizeContext = createContext2(
173
- void 0
174
- );
175
- function useInputComponentSize(size, fallback = "md") {
176
- const inheritedSize = useContext2(InputSizeContext);
177
- return size ?? inheritedSize ?? fallback;
178
- }
179
-
180
- // src/components/ui/input.tsx
181
- import { jsx as jsx4 } from "react/jsx-runtime";
182
- var inputVariants = cva2(
183
- "flex w-full min-w-0 rounded-full border border-line bg-canvas text-fg-primary transition-[background-color,border-color,box-shadow,color] outline-none file:inline-flex file:border-0 file:bg-transparent file:font-normal file:text-fg-primary placeholder:text-fg-muted hover:border-line-strong focus-visible:border-line-focus focus-visible:inset-ring-1 inset-ring-line-focus disabled:pointer-events-none disabled:cursor-not-allowed disabled:border-line-subtle disabled:bg-surface disabled:text-fg-muted disabled:placeholder:text-fg-muted aria-invalid:border-line-danger aria-invalid:text-fg-danger aria-invalid:placeholder:text-fg-danger aria-invalid:shadow-none",
184
- {
185
- variants: {
186
- size: {
187
- sm: "h-8 px-3 text-gdt-xs font-normal file:text-gdt-xs",
188
- md: "h-10 px-3.5 text-gdt-sm font-normal file:text-gdt-sm",
189
- lg: "h-12 px-4 text-gdt-md font-normal file:text-gdt-md",
190
- xl: "h-14 px-4.5 text-gdt-lg font-normal file:text-gdt-lg"
191
- }
192
- },
193
- defaultVariants: {
194
- size: "md"
195
- }
196
- }
197
- );
198
- function Input({ className, size, type, ...props }) {
199
- const resolvedSize = useInputComponentSize(size);
200
- return /* @__PURE__ */ jsx4(
201
- InputPrimitive,
202
- {
203
- type,
204
- "data-slot": "input",
205
- "data-size": resolvedSize,
206
- className: cn(inputVariants({ size: resolvedSize }), className),
207
- ...props
208
- }
209
- );
210
- }
211
-
212
- // src/components/ui/separator.tsx
213
- import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";
214
- import { jsx as jsx5 } from "react/jsx-runtime";
215
- function Separator({
216
- className,
217
- orientation = "horizontal",
218
- dashed = false,
219
- shade = "feint",
220
- thickness = "default",
221
- ...props
222
- }) {
223
- return /* @__PURE__ */ jsx5(
224
- SeparatorPrimitive,
225
- {
226
- "data-slot": "separator",
227
- orientation,
228
- className: cn(
229
- "shrink-0 data-horizontal:h-0 data-horizontal:w-full data-vertical:w-0 data-vertical:self-stretch",
230
- // style
231
- dashed ? "border-dashed" : "border-solid",
232
- // shade
233
- shade === "feint" && "border-line-subtle",
234
- shade === "deep" && "border-line",
235
- // thickness
236
- thickness === "hairline" && "data-horizontal:border-t-[0.5px] data-vertical:border-l-[0.5px]",
237
- thickness === "default" && "data-horizontal:border-t data-vertical:border-l",
238
- thickness === "thick" && "data-horizontal:border-t-2 data-vertical:border-l-2",
239
- thickness === "extra-thick" && "data-horizontal:border-t-[3px] data-vertical:border-l-[3px]",
240
- className
241
- ),
242
- ...props
243
- }
244
- );
245
- }
246
-
247
- // src/components/ui/sheet.tsx
248
- import { Dialog as SheetPrimitive } from "@base-ui/react/dialog";
249
- import { cva as cva3 } from "class-variance-authority";
250
- import { XIcon } from "lucide-react";
251
- import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
252
- function Sheet({ ...props }) {
253
- return /* @__PURE__ */ jsx6(SheetPrimitive.Root, { "data-slot": "sheet", ...props });
254
- }
255
- function SheetPortal({ ...props }) {
256
- return /* @__PURE__ */ jsx6(SheetPrimitive.Portal, { "data-slot": "sheet-portal", ...props });
257
- }
258
- function SheetOverlay({ className, ...props }) {
259
- return /* @__PURE__ */ jsx6(
260
- SheetPrimitive.Backdrop,
261
- {
262
- "data-slot": "sheet-overlay",
263
- className: cn(
264
- "fixed inset-0 z-50 bg-black/55 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xl",
265
- className
266
- ),
267
- ...props
268
- }
269
- );
270
- }
271
- var sheetContentVariants = cva3(
272
- "group/sheet-content fixed z-50 flex flex-col gap-0 overflow-visible rounded-2xl border border-line-subtle bg-surface-overlay bg-clip-padding text-fg-primary shadow-(--elevation-e2-shadow) transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 [--sheet-padding-x:1rem] [--sheet-padding-top:1rem] data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:w-full data-[side=bottom]:rounded-b-none data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:w-full data-[side=top]:rounded-t-none data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:rounded-l-none data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:rounded-r-none data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] px-(--sheet-padding-x) **:data-[slot=tabs]:has-data-[variant=underline]:-mx-(--sheet-padding-x) **:has-data-[variant=underline]:*:px-(--sheet-padding-x)",
273
- {
274
- variants: {
275
- size: {
276
- sm: "sm:[--sheet-padding-top:1.5rem] sm:[--sheet-padding-x:1.5rem] w-90 max-w-[calc(100vw-2.5rem)] [--sheet-title:var(--text-gdt-h5)]",
277
- md: "sm:[--sheet-padding-top:1.5rem] sm:[--sheet-padding-x:2rem] xl:[--sheet-padding-x:2.5rem] w-120 max-w-[calc(100vw-2.5rem)] [--sheet-title:var(--text-gdt-h4)]",
278
- lg: "sm:[--sheet-padding-top:1.5rem] sm:[--sheet-padding-x:2rem] xl:[--sheet-padding-x:2.5rem] w-160 max-w-[calc(100vw-2.5rem)] [--sheet-title:var(--text-gdt-h3)]",
279
- fullscreen: "sm:[--sheet-padding-top:2rem] sm:[--sheet-padding-x:2.5rem] xl:[--sheet-padding-x:5rem] [--sheet-title:var(--text-gdt-h2)] h-[calc(100lvh-3.5rem)] rounded:xl sm:rounded-2xl"
280
- }
281
- },
282
- defaultVariants: {
283
- size: "md"
284
- }
285
- }
286
- );
287
- function SheetContent({
288
- className,
289
- children,
290
- side = "left",
291
- size = "md",
292
- showCloseButton = true,
293
- ...props
294
- }) {
295
- const resolvedSize = side === "top" || side === "bottom" ? "fullscreen" : size !== "fullscreen" ? size : "md";
296
- const contentSize = resolvedSize === "fullscreen" ? "lg" : resolvedSize;
297
- return /* @__PURE__ */ jsxs2(SheetPortal, { children: [
298
- /* @__PURE__ */ jsx6(SheetOverlay, {}),
299
- /* @__PURE__ */ jsx6(SizeProvider, { size: contentSize, children: /* @__PURE__ */ jsxs2(
300
- SheetPrimitive.Popup,
301
- {
302
- "data-slot": "sheet-content",
303
- "data-side": side,
304
- "data-size": resolvedSize,
305
- className: cn(
306
- sheetContentVariants({ size: resolvedSize }),
307
- className
308
- ),
309
- ...props,
310
- children: [
311
- children,
312
- showCloseButton && /* @__PURE__ */ jsx6(
313
- SheetPrimitive.Close,
314
- {
315
- "data-slot": "sheet-close",
316
- render: /* @__PURE__ */ jsxs2(
317
- Button,
318
- {
319
- variant: "ghost",
320
- className: "absolute z-10 size-8 border border-line bg-surface p-0 text-fg-primary shadow-(--elevation-e1-shadow) hover:bg-surface-raised group-data-[side=bottom]/sheet-content:-top-10 group-data-[side=bottom]/sheet-content:right-4 group-data-[side=top]/sheet-content:-bottom-10 group-data-[side=top]/sheet-content:right-4 group-data-[side=left]/sheet-content:-right-10 group-data-[side=left]/sheet-content:top-4 group-data-[side=right]/sheet-content:-left-10 group-data-[side=right]/sheet-content:top-4",
321
- size: "icon-sm",
322
- children: [
323
- /* @__PURE__ */ jsx6(XIcon, {}),
324
- /* @__PURE__ */ jsx6("span", { className: "sr-only", children: "Close" })
325
- ]
326
- }
327
- )
328
- }
329
- )
330
- ]
331
- }
332
- ) })
333
- ] });
334
- }
335
- function SheetHeader({ className, ...props }) {
336
- return /* @__PURE__ */ jsx6(
337
- "div",
338
- {
339
- "data-slot": "sheet-header",
340
- className: cn(
341
- "flex flex-col gap-1 -mx-(--sheet-padding-x) px-(--sheet-padding-x) pt-(--sheet-padding-top) pb-4 border-b border-line-subtle group-has-[[data-slot=tabs-list][data-variant=underline]]/sheet-content:border-b-0 group-has-[[data-slot=tabs-list][data-variant=underline]]/sheet-content:pb-2",
342
- className
343
- ),
344
- ...props
345
- }
346
- );
347
- }
348
- function SheetTitle({ className, ...props }) {
349
- return /* @__PURE__ */ jsx6(
350
- SheetPrimitive.Title,
351
- {
352
- "data-slot": "sheet-title",
353
- className: cn(
354
- "font-extrabold text-fg-primary tracking-tight group-data-[size=fullscreen]/sheet-content:text-gdt-h2 group-data-[size=lg]/sheet-content:text-gdt-h3 group-data-[size=md]/sheet-content:text-gdt-h4 group-data-[size=sm]/sheet-content:text-gdt-h5",
355
- className
356
- ),
357
- ...props
358
- }
359
- );
360
- }
361
- function SheetDescription({
362
- className,
363
- ...props
364
- }) {
365
- return /* @__PURE__ */ jsx6(
366
- SheetPrimitive.Description,
367
- {
368
- "data-slot": "sheet-description",
369
- className: cn(
370
- "text-fg-secondary group-data-[size=fullscreen]/sheet-content:text-gdt-lg group-data-[size=lg]/sheet-content:text-gdt-md group-data-[size=md]/sheet-content:text-gdt-sm group-data-[size=sm]/sheet-content:text-gdt-xs",
371
- className
372
- ),
373
- ...props
374
- }
375
- );
376
- }
377
-
378
- // src/components/ui/skeleton.tsx
379
- import { jsx as jsx7 } from "react/jsx-runtime";
380
- function Skeleton({ className, ...props }) {
381
- return /* @__PURE__ */ jsx7(
382
- "div",
383
- {
384
- "data-slot": "skeleton",
385
- className: cn("animate-pulse rounded-md bg-line", className),
386
- ...props
387
- }
388
- );
389
- }
390
-
391
- // src/components/ui/tooltip.tsx
392
- import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
393
- import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
394
- function Tooltip({ ...props }) {
395
- return /* @__PURE__ */ jsx8(PopoverPrimitive.Root, { "data-slot": "tooltip", ...props });
396
- }
397
- function TooltipTrigger({
398
- ...props
399
- }) {
400
- return /* @__PURE__ */ jsx8(
401
- PopoverPrimitive.Trigger,
402
- {
403
- nativeButton: false,
404
- "data-slot": "tooltip-trigger",
405
- openOnHover: true,
406
- delay: 100,
407
- ...props
408
- }
409
- );
410
- }
411
- function TooltipContent({
412
- className,
413
- side = "top",
414
- sideOffset = 6,
415
- align = "center",
416
- alignOffset = 0,
417
- showArrow = true,
418
- children,
419
- ...props
420
- }) {
421
- return /* @__PURE__ */ jsx8(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx8(
422
- PopoverPrimitive.Positioner,
423
- {
424
- align,
425
- alignOffset,
426
- side,
427
- sideOffset,
428
- className: "isolate z-50",
429
- children: /* @__PURE__ */ jsxs3(
430
- PopoverPrimitive.Popup,
431
- {
432
- "data-slot": "tooltip-content",
433
- className: cn(
434
- "z-50 relative inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-[6px] border border-line bg-surface-overlay px-3 py-2 text-gdt-sm font-medium text-fg-primary shadow-2 duration-100 has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
435
- className
436
- ),
437
- ...props,
438
- children: [
439
- children,
440
- showArrow ? /* @__PURE__ */ jsx8(PopoverPrimitive.Arrow, { className: "relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-surface-overlay before:border before:border-line before:[transform:translate(-50%,50%)_rotate(45deg)]" }) : null
441
- ]
442
- }
443
- )
444
- }
445
- ) });
446
- }
447
-
448
- // src/components/ui/sidebar.tsx
449
- import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
450
- var SIDEBAR_LS_KEY = "sidebar_state";
451
- var SIDEBAR_WIDTH = "17.5rem";
452
- var SIDEBAR_WIDTH_MOBILE = "17.5rem";
453
- var SIDEBAR_WIDTH_ICON = "4.5rem";
454
- var SIDEBAR_KEYBOARD_SHORTCUT = "b";
455
- var SidebarContext = React2.createContext(null);
19
+ const [isMobile, setIsMobile] = React.useState(false);
20
+ React.useEffect(() => {
21
+ const mediaQuery = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);
22
+ const update = () => setIsMobile(window.innerWidth < breakpoint);
23
+ update();
24
+ mediaQuery.addEventListener("change", update);
25
+ return () => mediaQuery.removeEventListener("change", update);
26
+ }, [breakpoint]);
27
+ return isMobile;
28
+ }
29
+ //#endregion
30
+ //#region src/sidebar.tsx
31
+ const SIDEBAR_LS_KEY = "sidebar_state";
32
+ const SIDEBAR_WIDTH = "17.5rem";
33
+ const SIDEBAR_WIDTH_MOBILE = "17.5rem";
34
+ const SIDEBAR_WIDTH_ICON = "4.5rem";
35
+ const SIDEBAR_KEYBOARD_SHORTCUT = "b";
36
+ const SidebarContext = React.createContext(null);
456
37
  function useSidebar() {
457
- const context = React2.useContext(SidebarContext);
458
- if (!context) {
459
- throw new Error("useSidebar must be used within a SidebarProvider.");
460
- }
461
- return context;
462
- }
463
- function SidebarProvider({
464
- defaultOpen = true,
465
- open: openProp,
466
- onOpenChange: setOpenProp,
467
- className,
468
- style,
469
- children,
470
- ...props
471
- }) {
472
- const isMobile = useIsMobile();
473
- const [openMobile, setOpenMobile] = React2.useState(false);
474
- const [open, setOpen] = useUncontrolled({
475
- value: openProp,
476
- onChange: (open2) => {
477
- setOpenProp?.(open2);
478
- if (typeof window !== "undefined") {
479
- window.localStorage.setItem(SIDEBAR_LS_KEY, String(open2));
480
- }
481
- },
482
- defaultValue: defaultOpen
483
- });
484
- React2.useEffect(() => {
485
- if (openProp !== void 0) return;
486
- const storedOpen = window.localStorage.getItem(SIDEBAR_LS_KEY);
487
- if (storedOpen !== null) {
488
- setOpen(storedOpen !== "false");
489
- }
490
- }, [openProp, setOpen]);
491
- const toggleSidebar = React2.useCallback(() => {
492
- return isMobile ? setOpenMobile((open2) => !open2) : setOpen(!open);
493
- }, [isMobile, open, setOpen]);
494
- React2.useEffect(() => {
495
- const handleKeyDown = (event) => {
496
- if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
497
- event.preventDefault();
498
- toggleSidebar();
499
- }
500
- };
501
- window.addEventListener("keydown", handleKeyDown);
502
- return () => window.removeEventListener("keydown", handleKeyDown);
503
- }, [toggleSidebar]);
504
- const state = open ? "expanded" : "collapsed";
505
- const contextValue = React2.useMemo(
506
- () => ({
507
- state,
508
- open,
509
- setOpen,
510
- isMobile,
511
- openMobile,
512
- setOpenMobile,
513
- toggleSidebar
514
- }),
515
- [state, open, setOpen, isMobile, openMobile, toggleSidebar]
516
- );
517
- return /* @__PURE__ */ jsx9(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx9(
518
- "div",
519
- {
520
- "data-slot": "sidebar-wrapper",
521
- style: {
522
- "--layout-nav-width": SIDEBAR_WIDTH,
523
- "--layout-nav-width-icon": SIDEBAR_WIDTH_ICON,
524
- ...style
525
- },
526
- className: cn(
527
- "group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-surface",
528
- className
529
- ),
530
- ...props,
531
- children
532
- }
533
- ) });
534
- }
535
- function Sidebar({
536
- side = "left",
537
- variant = "sidebar",
538
- collapsible = "offcanvas",
539
- className,
540
- children,
541
- dir,
542
- ...props
543
- }) {
544
- const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
545
- if (collapsible === "none") {
546
- return /* @__PURE__ */ jsx9(
547
- "div",
548
- {
549
- "data-slot": "sidebar",
550
- className: cn(
551
- "flex h-full w-(--layout-nav-width) flex-col bg-surface text-fg-secondary",
552
- className
553
- ),
554
- ...props,
555
- children
556
- }
557
- );
558
- }
559
- if (isMobile) {
560
- return /* @__PURE__ */ jsx9(Sheet, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: /* @__PURE__ */ jsxs4(
561
- SheetContent,
562
- {
563
- dir,
564
- "data-sidebar": "sidebar",
565
- "data-slot": "sidebar",
566
- "data-mobile": "true",
567
- className: "min-w-10/12 w-(--layout-nav-width) max-w-screen border-none bg-surface p-0 text-fg-secondary [&>button]:hidden",
568
- style: {
569
- "--layout-nav-width": SIDEBAR_WIDTH_MOBILE
570
- },
571
- side: "right",
572
- children: [
573
- /* @__PURE__ */ jsxs4(SheetHeader, { className: "sr-only", children: [
574
- /* @__PURE__ */ jsx9(SheetTitle, { children: "Sidebar" }),
575
- /* @__PURE__ */ jsx9(SheetDescription, { children: "Displays the mobile sidebar." })
576
- ] }),
577
- /* @__PURE__ */ jsx9("div", { className: "flex h-full w-full flex-col", children })
578
- ]
579
- }
580
- ) });
581
- }
582
- return /* @__PURE__ */ jsxs4(
583
- "div",
584
- {
585
- className: "group peer hidden text-fg-secondary lg:block",
586
- "data-state": state,
587
- "data-collapsible": state === "collapsed" ? collapsible : "",
588
- "data-variant": variant,
589
- "data-side": side,
590
- "data-slot": "sidebar",
591
- children: [
592
- /* @__PURE__ */ jsx9(
593
- "div",
594
- {
595
- "data-slot": "sidebar-gap",
596
- className: cn(
597
- "relative w-(--layout-nav-width) bg-transparent transition-[width] duration-200 ease-linear",
598
- "group-data-[collapsible=offcanvas]:w-0",
599
- "group-data-[side=right]:rotate-180",
600
- variant === "floating" || variant === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--layout-nav-width-icon)+(--spacing(4)))]" : "group-data-[collapsible=icon]:w-(--layout-nav-width-icon)"
601
- )
602
- }
603
- ),
604
- /* @__PURE__ */ jsx9(
605
- "div",
606
- {
607
- "data-slot": "sidebar-container",
608
- "data-side": side,
609
- className: cn(
610
- "fixed inset-y-0 z-10 hidden h-svh w-(--layout-nav-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--layout-nav-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--layout-nav-width)*-1)] lg:flex",
611
- // Adjust the padding for floating and inset variants.
612
- variant === "floating" || variant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--layout-nav-width-icon)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-(--layout-nav-width-icon) group-data-[side=left]:border-r group-data-[side=left]:border-r-line-subtle group-data-[side=right]:border-l group-data-[side=right]:border-l-line-subtle",
613
- className
614
- ),
615
- ...props,
616
- children: /* @__PURE__ */ jsx9(
617
- "div",
618
- {
619
- "data-sidebar": "sidebar",
620
- "data-slot": "sidebar-inner",
621
- className: "flex size-full flex-col bg-surface group-data-[variant=floating]:rounded-xl group-data-[variant=floating]:border group-data-[variant=floating]:border-line-subtle group-data-[variant=floating]:shadow-[var(--elevation-e1-shadow)]",
622
- children
623
- }
624
- )
625
- }
626
- )
627
- ]
628
- }
629
- );
630
- }
631
- function SidebarTrigger({
632
- className,
633
- onClick,
634
- ...props
635
- }) {
636
- const { toggleSidebar } = useSidebar();
637
- return /* @__PURE__ */ jsxs4(
638
- Button,
639
- {
640
- "data-sidebar": "trigger",
641
- "data-slot": "sidebar-trigger",
642
- variant: "ghost",
643
- size: "icon-sm",
644
- className: cn(className),
645
- onClick: (event) => {
646
- onClick?.(event);
647
- toggleSidebar();
648
- },
649
- ...props,
650
- children: [
651
- /* @__PURE__ */ jsx9(Menu, { className: "cn-rtl-flip" }),
652
- /* @__PURE__ */ jsx9("span", { className: "sr-only", children: "Toggle Sidebar" })
653
- ]
654
- }
655
- );
38
+ const context = React.useContext(SidebarContext);
39
+ if (!context) throw new Error("useSidebar must be used within a SidebarProvider.");
40
+ return context;
41
+ }
42
+ function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }) {
43
+ const isMobile = useIsMobile();
44
+ const [openMobile, setOpenMobile] = React.useState(false);
45
+ const [open, setOpen] = useUncontrolled({
46
+ value: openProp,
47
+ onChange: (open) => {
48
+ setOpenProp?.(open);
49
+ if (typeof window !== "undefined") window.localStorage.setItem(SIDEBAR_LS_KEY, String(open));
50
+ },
51
+ defaultValue: defaultOpen
52
+ });
53
+ React.useEffect(() => {
54
+ if (openProp !== void 0) return;
55
+ const storedOpen = window.localStorage.getItem(SIDEBAR_LS_KEY);
56
+ if (storedOpen !== null) setOpen(storedOpen !== "false");
57
+ }, [openProp, setOpen]);
58
+ const toggleSidebar = React.useCallback(() => {
59
+ return isMobile ? setOpenMobile((open) => !open) : setOpen(!open);
60
+ }, [
61
+ isMobile,
62
+ open,
63
+ setOpen
64
+ ]);
65
+ React.useEffect(() => {
66
+ const handleKeyDown = (event) => {
67
+ if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
68
+ event.preventDefault();
69
+ toggleSidebar();
70
+ }
71
+ };
72
+ window.addEventListener("keydown", handleKeyDown);
73
+ return () => window.removeEventListener("keydown", handleKeyDown);
74
+ }, [toggleSidebar]);
75
+ const state = open ? "expanded" : "collapsed";
76
+ const contextValue = React.useMemo(() => ({
77
+ state,
78
+ open,
79
+ setOpen,
80
+ isMobile,
81
+ openMobile,
82
+ setOpenMobile,
83
+ toggleSidebar
84
+ }), [
85
+ state,
86
+ open,
87
+ setOpen,
88
+ isMobile,
89
+ openMobile,
90
+ toggleSidebar
91
+ ]);
92
+ return /* @__PURE__ */ jsx(SidebarContext.Provider, {
93
+ value: contextValue,
94
+ children: /* @__PURE__ */ jsx("div", {
95
+ "data-slot": "sidebar-wrapper",
96
+ style: {
97
+ "--layout-nav-width": SIDEBAR_WIDTH,
98
+ "--layout-nav-width-icon": SIDEBAR_WIDTH_ICON,
99
+ ...style
100
+ },
101
+ className: cn("group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-surface", className),
102
+ ...props,
103
+ children
104
+ })
105
+ });
106
+ }
107
+ function Sidebar({ side = "left", variant = "sidebar", collapsible = "offcanvas", className, children, dir, ...props }) {
108
+ const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
109
+ if (collapsible === "none") return /* @__PURE__ */ jsx("div", {
110
+ "data-slot": "sidebar",
111
+ className: cn("flex h-full w-(--layout-nav-width) flex-col bg-surface text-fg-secondary", className),
112
+ ...props,
113
+ children
114
+ });
115
+ if (isMobile) return /* @__PURE__ */ jsx(Sheet, {
116
+ open: openMobile,
117
+ onOpenChange: setOpenMobile,
118
+ ...props,
119
+ children: /* @__PURE__ */ jsxs(SheetContent, {
120
+ dir,
121
+ "data-sidebar": "sidebar",
122
+ "data-slot": "sidebar",
123
+ "data-mobile": "true",
124
+ className: "min-w-10/12 w-(--layout-nav-width) max-w-screen border-none bg-surface p-0 text-fg-secondary [&>button]:hidden",
125
+ style: { "--layout-nav-width": SIDEBAR_WIDTH_MOBILE },
126
+ side: "right",
127
+ children: [/* @__PURE__ */ jsxs(SheetHeader, {
128
+ className: "sr-only",
129
+ children: [/* @__PURE__ */ jsx(SheetTitle, { children: "Sidebar" }), /* @__PURE__ */ jsx(SheetDescription, { children: "Displays the mobile sidebar." })]
130
+ }), /* @__PURE__ */ jsx("div", {
131
+ className: "flex h-full w-full flex-col",
132
+ children
133
+ })]
134
+ })
135
+ });
136
+ return /* @__PURE__ */ jsxs("div", {
137
+ className: "group peer hidden text-fg-secondary lg:block",
138
+ "data-state": state,
139
+ "data-collapsible": state === "collapsed" ? collapsible : "",
140
+ "data-variant": variant,
141
+ "data-side": side,
142
+ "data-slot": "sidebar",
143
+ children: [/* @__PURE__ */ jsx("div", {
144
+ "data-slot": "sidebar-gap",
145
+ className: cn("relative w-(--layout-nav-width) bg-transparent transition-[width] duration-200 ease-out", "group-data-[collapsible=offcanvas]:w-0", "group-data-[side=right]:rotate-180", variant === "floating" || variant === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--layout-nav-width-icon)+(--spacing(4)))]" : "group-data-[collapsible=icon]:w-(--layout-nav-width-icon)")
146
+ }), /* @__PURE__ */ jsx("div", {
147
+ "data-slot": "sidebar-container",
148
+ "data-side": side,
149
+ className: cn("fixed inset-y-0 z-10 hidden h-svh w-(--layout-nav-width) transition-[left,right,width] duration-200 ease-out data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--layout-nav-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--layout-nav-width)*-1)] lg:flex", variant === "floating" || variant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--layout-nav-width-icon)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-(--layout-nav-width-icon) group-data-[side=left]:border-r group-data-[side=left]:border-r-line-subtle group-data-[side=right]:border-l group-data-[side=right]:border-l-line-subtle", className),
150
+ ...props,
151
+ children: /* @__PURE__ */ jsx("div", {
152
+ "data-sidebar": "sidebar",
153
+ "data-slot": "sidebar-inner",
154
+ className: "flex size-full flex-col bg-surface group-data-[variant=floating]:rounded-xl group-data-[variant=floating]:border group-data-[variant=floating]:border-line-subtle group-data-[variant=floating]:shadow-[var(--elevation-e1-shadow)]",
155
+ children
156
+ })
157
+ })]
158
+ });
159
+ }
160
+ function SidebarTrigger({ className, onClick, ...props }) {
161
+ const { toggleSidebar } = useSidebar();
162
+ return /* @__PURE__ */ jsxs(Button, {
163
+ "data-sidebar": "trigger",
164
+ "data-slot": "sidebar-trigger",
165
+ variant: "ghost",
166
+ size: "icon-sm",
167
+ className: cn(className),
168
+ onClick: (event) => {
169
+ onClick?.(event);
170
+ toggleSidebar();
171
+ },
172
+ ...props,
173
+ children: [/* @__PURE__ */ jsx(Menu, { className: "cn-rtl-flip" }), /* @__PURE__ */ jsx("span", {
174
+ className: "sr-only",
175
+ children: "Toggle Sidebar"
176
+ })]
177
+ });
656
178
  }
657
179
  function SidebarRail({ className, ...props }) {
658
- const { toggleSidebar } = useSidebar();
659
- return /* @__PURE__ */ jsx9(
660
- "button",
661
- {
662
- "data-sidebar": "rail",
663
- "data-slot": "sidebar-rail",
664
- "aria-label": "Toggle Sidebar",
665
- tabIndex: -1,
666
- onClick: toggleSidebar,
667
- title: "Toggle Sidebar",
668
- className: cn(
669
- "absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] hover:after:bg-line-subtle sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2",
670
- "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
671
- "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
672
- "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-surface",
673
- "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
674
- "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
675
- className
676
- ),
677
- ...props
678
- }
679
- );
180
+ const { toggleSidebar } = useSidebar();
181
+ return /* @__PURE__ */ jsx("button", {
182
+ "data-sidebar": "rail",
183
+ "data-slot": "sidebar-rail",
184
+ "aria-label": "Toggle Sidebar",
185
+ tabIndex: -1,
186
+ onClick: toggleSidebar,
187
+ title: "Toggle Sidebar",
188
+ className: cn("absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] hover:after:bg-line-subtle sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2", "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize", "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize", "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-surface", "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2", "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2", className),
189
+ ...props
190
+ });
680
191
  }
681
192
  function SidebarInset({ className, ...props }) {
682
- return /* @__PURE__ */ jsx9(
683
- "main",
684
- {
685
- "data-slot": "sidebar-inset",
686
- className: cn(
687
- "relative flex min-w-0 flex-1 flex-col bg-canvas lg:peer-data-[variant=inset]:m-2 lg:peer-data-[variant=inset]:ml-0 lg:peer-data-[variant=inset]:rounded-xl lg:peer-data-[variant=inset]:border lg:peer-data-[variant=inset]:border-line-subtle lg:peer-data-[variant=inset]:shadow-[var(--elevation-e1-shadow)] lg:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
688
- className
689
- ),
690
- ...props
691
- }
692
- );
693
- }
694
- function SidebarInput({
695
- className,
696
- ...props
697
- }) {
698
- return /* @__PURE__ */ jsx9(
699
- Input,
700
- {
701
- "data-slot": "sidebar-input",
702
- "data-sidebar": "input",
703
- className: cn("h-8 w-full bg-canvas shadow-none", className),
704
- ...props
705
- }
706
- );
193
+ return /* @__PURE__ */ jsx("main", {
194
+ "data-slot": "sidebar-inset",
195
+ className: cn("relative flex min-w-0 flex-1 flex-col bg-canvas lg:peer-data-[variant=inset]:m-2 lg:peer-data-[variant=inset]:ml-0 lg:peer-data-[variant=inset]:rounded-xl lg:peer-data-[variant=inset]:border lg:peer-data-[variant=inset]:border-line-subtle lg:peer-data-[variant=inset]:shadow-[var(--elevation-e1-shadow)] lg:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2", className),
196
+ ...props
197
+ });
198
+ }
199
+ function SidebarInput({ className, ...props }) {
200
+ return /* @__PURE__ */ jsx(Input, {
201
+ "data-slot": "sidebar-input",
202
+ "data-sidebar": "input",
203
+ className: cn("h-8 w-full bg-canvas shadow-none", className),
204
+ ...props
205
+ });
707
206
  }
708
207
  function SidebarHeader({ className, ...props }) {
709
- return /* @__PURE__ */ jsx9(
710
- "div",
711
- {
712
- "data-slot": "sidebar-header",
713
- "data-sidebar": "header",
714
- className: cn("flex flex-col gap-2 p-2", className),
715
- ...props
716
- }
717
- );
208
+ return /* @__PURE__ */ jsx("div", {
209
+ "data-slot": "sidebar-header",
210
+ "data-sidebar": "header",
211
+ className: cn("flex flex-col gap-2 p-2", className),
212
+ ...props
213
+ });
718
214
  }
719
215
  function SidebarFooter({ className, ...props }) {
720
- return /* @__PURE__ */ jsx9(
721
- "div",
722
- {
723
- "data-slot": "sidebar-footer",
724
- "data-sidebar": "footer",
725
- className: cn("flex flex-col gap-2 p-2", className),
726
- ...props
727
- }
728
- );
729
- }
730
- function SidebarSeparator({
731
- className,
732
- ...props
733
- }) {
734
- return /* @__PURE__ */ jsx9(
735
- Separator,
736
- {
737
- "data-slot": "sidebar-separator",
738
- "data-sidebar": "separator",
739
- className: cn("mx-2 w-auto bg-line-subtle", className),
740
- ...props
741
- }
742
- );
216
+ return /* @__PURE__ */ jsx("div", {
217
+ "data-slot": "sidebar-footer",
218
+ "data-sidebar": "footer",
219
+ className: cn("flex flex-col gap-2 p-2", className),
220
+ ...props
221
+ });
222
+ }
223
+ function SidebarSeparator({ className, ...props }) {
224
+ return /* @__PURE__ */ jsx(Separator, {
225
+ "data-slot": "sidebar-separator",
226
+ "data-sidebar": "separator",
227
+ className: cn("mx-2 w-auto bg-line-subtle", className),
228
+ ...props
229
+ });
743
230
  }
744
231
  function SidebarContent({ className, ...props }) {
745
- return /* @__PURE__ */ jsx9(
746
- "div",
747
- {
748
- "data-slot": "sidebar-content",
749
- "data-sidebar": "content",
750
- className: cn(
751
- "no-scrollbar flex min-h-0 flex-1 flex-col gap-0 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
752
- className
753
- ),
754
- ...props
755
- }
756
- );
232
+ return /* @__PURE__ */ jsx("div", {
233
+ "data-slot": "sidebar-content",
234
+ "data-sidebar": "content",
235
+ className: cn("no-scrollbar flex min-h-0 flex-1 flex-col gap-0 overflow-auto group-data-[collapsible=icon]:overflow-hidden", className),
236
+ ...props
237
+ });
757
238
  }
758
239
  function SidebarGroup({ className, ...props }) {
759
- return /* @__PURE__ */ jsx9(
760
- "div",
761
- {
762
- "data-slot": "sidebar-group",
763
- "data-sidebar": "group",
764
- className: cn("relative flex w-full min-w-0 flex-col p-2", className),
765
- ...props
766
- }
767
- );
768
- }
769
- function SidebarGroupLabel({
770
- className,
771
- render,
772
- ...props
773
- }) {
774
- return useRender({
775
- defaultTagName: "div",
776
- props: mergeProps(
777
- {
778
- className: cn(
779
- "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-fg-muted outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] [&>svg]:size-4 [&>svg]:shrink-0",
780
- className
781
- )
782
- },
783
- props
784
- ),
785
- render,
786
- state: {
787
- slot: "sidebar-group-label",
788
- sidebar: "group-label"
789
- }
790
- });
791
- }
792
- function SidebarGroupAction({
793
- className,
794
- render,
795
- ...props
796
- }) {
797
- return useRender({
798
- defaultTagName: "button",
799
- props: mergeProps(
800
- {
801
- className: cn(
802
- "absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-fg-secondary outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-surface-raised hover:text-fg-primary focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] lg:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
803
- className
804
- )
805
- },
806
- props
807
- ),
808
- render,
809
- state: {
810
- slot: "sidebar-group-action",
811
- sidebar: "group-action"
812
- }
813
- });
814
- }
815
- function SidebarGroupContent({
816
- className,
817
- ...props
818
- }) {
819
- return /* @__PURE__ */ jsx9(
820
- "div",
821
- {
822
- "data-slot": "sidebar-group-content",
823
- "data-sidebar": "group-content",
824
- className: cn("w-full text-sm", className),
825
- ...props
826
- }
827
- );
240
+ return /* @__PURE__ */ jsx("div", {
241
+ "data-slot": "sidebar-group",
242
+ "data-sidebar": "group",
243
+ className: cn("relative flex w-full min-w-0 flex-col p-2", className),
244
+ ...props
245
+ });
246
+ }
247
+ function SidebarGroupLabel({ className, render, ...props }) {
248
+ return useRender({
249
+ defaultTagName: "div",
250
+ props: mergeProps({ className: cn("flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-fg-caption-placeholder outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] [&>svg]:size-4 [&>svg]:shrink-0", className) }, props),
251
+ render,
252
+ state: {
253
+ slot: "sidebar-group-label",
254
+ sidebar: "group-label"
255
+ }
256
+ });
257
+ }
258
+ function SidebarGroupAction({ className, render, ...props }) {
259
+ return useRender({
260
+ defaultTagName: "button",
261
+ props: mergeProps({ className: cn("absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-fg-secondary outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-surface-raised hover:text-fg-primary focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] lg:after:hidden [&>svg]:size-4 [&>svg]:shrink-0", className) }, props),
262
+ render,
263
+ state: {
264
+ slot: "sidebar-group-action",
265
+ sidebar: "group-action"
266
+ }
267
+ });
268
+ }
269
+ function SidebarGroupContent({ className, ...props }) {
270
+ return /* @__PURE__ */ jsx("div", {
271
+ "data-slot": "sidebar-group-content",
272
+ "data-sidebar": "group-content",
273
+ className: cn("w-full text-sm", className),
274
+ ...props
275
+ });
828
276
  }
829
277
  function SidebarMenu({ className, ...props }) {
830
- return /* @__PURE__ */ jsx9(
831
- "ul",
832
- {
833
- "data-slot": "sidebar-menu",
834
- "data-sidebar": "menu",
835
- className: cn("flex w-full min-w-0 flex-col gap-0", className),
836
- ...props
837
- }
838
- );
278
+ return /* @__PURE__ */ jsx("ul", {
279
+ "data-slot": "sidebar-menu",
280
+ "data-sidebar": "menu",
281
+ className: cn("flex w-full min-w-0 flex-col gap-0", className),
282
+ ...props
283
+ });
839
284
  }
840
285
  function SidebarMenuItem({ className, ...props }) {
841
- return /* @__PURE__ */ jsx9(
842
- "li",
843
- {
844
- "data-slot": "sidebar-menu-item",
845
- "data-sidebar": "menu-item",
846
- className: cn("group/menu-item relative", className),
847
- ...props
848
- }
849
- );
850
- }
851
- var sidebarMenuButtonVariants = cva4(
852
- "peer/menu-button group/menu-button flex w-full items-center gap-3 overflow-hidden rounded-[10px] px-3 py-3 text-left text-gdt-sm font-semibold text-fg-secondary outline-hidden transition-[width,height,padding,gap,color,background-color] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:gap-0 group-data-[collapsible=icon]:px-2! group-data-[collapsible=icon]:[&>span]:max-w-0 group-data-[collapsible=icon]:[&>span]:opacity-0 hover:bg-surface-raised hover:text-fg-primary focus-visible:inset-ring-1 inset-ring-line-focus active:bg-surface-raised active:text-fg-primary disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-surface-raised data-open:hover:text-fg-primary data-active:bg-surface-brand-subtle data-active:font-medium data-active:text-fg-brand [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-current [&>span]:min-w-0 [&>span]:truncate",
853
- {
854
- variants: {
855
- variant: {
856
- default: "",
857
- outline: "bg-canvas text-fg-primary shadow-[inset_0_0_0_1px_var(--color-line-subtle)] hover:bg-surface-raised hover:text-fg-primary"
858
- },
859
- size: {
860
- md: "h-12",
861
- sm: "h-9 text-xs",
862
- lg: "h-12 group-data-[collapsible=icon]:size-12 group-data-[collapsible=icon]:p-3! [&_svg]:size-5"
863
- }
864
- },
865
- defaultVariants: {
866
- variant: "default",
867
- size: "md"
868
- }
869
- }
870
- );
871
- function SidebarMenuButton({
872
- render,
873
- isActive = false,
874
- variant = "default",
875
- size = "md",
876
- tooltip,
877
- className,
878
- ...props
879
- }) {
880
- const { isMobile, state } = useSidebar();
881
- const comp = useRender({
882
- defaultTagName: "button",
883
- props: mergeProps(
884
- {
885
- className: cn(sidebarMenuButtonVariants({ variant, size }), className)
886
- },
887
- props
888
- ),
889
- render: !tooltip ? render : /* @__PURE__ */ jsx9(TooltipTrigger, { render }),
890
- state: {
891
- slot: "sidebar-menu-button",
892
- sidebar: "menu-button",
893
- size,
894
- active: isActive
895
- }
896
- });
897
- if (!tooltip) {
898
- return comp;
899
- }
900
- if (typeof tooltip === "string") {
901
- tooltip = {
902
- children: tooltip
903
- };
904
- }
905
- return /* @__PURE__ */ jsxs4(Tooltip, { children: [
906
- comp,
907
- /* @__PURE__ */ jsx9(
908
- TooltipContent,
909
- {
910
- side: "right",
911
- align: "center",
912
- hidden: state !== "collapsed" || isMobile,
913
- ...tooltip
914
- }
915
- )
916
- ] });
917
- }
918
- function SidebarMenuAction({
919
- className,
920
- render,
921
- showOnHover = false,
922
- ...props
923
- }) {
924
- return useRender({
925
- defaultTagName: "button",
926
- props: mergeProps(
927
- {
928
- className: cn(
929
- "absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-fg-secondary outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-fg-primary 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 after:absolute after:-inset-2 hover:bg-surface-raised hover:text-fg-primary focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] lg:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
930
- showOnHover && "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-fg-brand aria-expanded:opacity-100 lg:opacity-0",
931
- className
932
- )
933
- },
934
- props
935
- ),
936
- render,
937
- state: {
938
- slot: "sidebar-menu-action",
939
- sidebar: "menu-action"
940
- }
941
- });
942
- }
943
- function SidebarMenuBadge({
944
- className,
945
- ...props
946
- }) {
947
- return /* @__PURE__ */ jsx9(
948
- "div",
949
- {
950
- "data-slot": "sidebar-menu-badge",
951
- "data-sidebar": "menu-badge",
952
- className: cn(
953
- "pointer-events-none absolute right-4 flex h-5 min-w-5 items-center justify-center rounded-full bg-surface-brand px-1 text-gdt-subtext font-bold leading-none text-fg-on-brand tabular-nums select-none group-data-[collapsible=icon]:hidden peer-data-[size=default]/menu-button:top-2.5 peer-data-[size=lg]/menu-button:top-4 peer-data-[size=sm]/menu-button:top-2",
954
- className
955
- ),
956
- ...props
957
- }
958
- );
959
- }
960
- function SidebarMenuSkeleton({
961
- className,
962
- showIcon = false,
963
- ...props
964
- }) {
965
- const [width] = React2.useState(() => {
966
- return `${Math.floor(Math.random() * 40) + 50}%`;
967
- });
968
- return /* @__PURE__ */ jsxs4(
969
- "div",
970
- {
971
- "data-slot": "sidebar-menu-skeleton",
972
- "data-sidebar": "menu-skeleton",
973
- className: cn("flex h-8 items-center gap-2 rounded-md px-2", className),
974
- ...props,
975
- children: [
976
- showIcon && /* @__PURE__ */ jsx9(
977
- Skeleton,
978
- {
979
- className: "size-4 rounded-md",
980
- "data-sidebar": "menu-skeleton-icon"
981
- }
982
- ),
983
- /* @__PURE__ */ jsx9(
984
- Skeleton,
985
- {
986
- className: "h-4 max-w-(--skeleton-width) flex-1",
987
- "data-sidebar": "menu-skeleton-text",
988
- style: {
989
- "--skeleton-width": width
990
- }
991
- }
992
- )
993
- ]
994
- }
995
- );
286
+ return /* @__PURE__ */ jsx("li", {
287
+ "data-slot": "sidebar-menu-item",
288
+ "data-sidebar": "menu-item",
289
+ className: cn("group/menu-item relative", className),
290
+ ...props
291
+ });
292
+ }
293
+ const sidebarMenuButtonVariants = cva("peer/menu-button group/menu-button flex w-full items-center gap-3 overflow-hidden rounded-[10px] px-3 py-3 text-left text-gdt-sm font-semibold text-fg-secondary outline-hidden transition-[width,height,padding,gap,color,background-color] duration-200 ease-out group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:gap-0 group-data-[collapsible=icon]:px-5! group-data-[collapsible=icon]:[&>span]:max-w-0 group-data-[collapsible=icon]:[&>span]:opacity-0 hover:bg-surface-raised hover:text-fg-primary focus-visible:inset-ring-1 inset-ring-line-focus active:bg-surface-raised active:text-fg-primary disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-surface-raised data-open:hover:text-fg-primary data-active:bg-surface-brand-subtle data-active:font-medium data-active:text-fg-brand [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-current [&>span]:min-w-0 [&>span]:truncate [&>span]:transition-[max-width,opacity] [&>span]:duration-200 [&>span]:ease-out", {
294
+ variants: {
295
+ variant: {
296
+ default: "",
297
+ outline: "bg-canvas text-fg-primary shadow-[inset_0_0_0_1px_var(--color-line-subtle)] hover:bg-surface-raised hover:text-fg-primary"
298
+ },
299
+ size: {
300
+ md: "h-12",
301
+ sm: "h-9 text-xs",
302
+ lg: "h-12 group-data-[collapsible=icon]:px-[18px]! [&_svg]:size-5"
303
+ }
304
+ },
305
+ defaultVariants: {
306
+ variant: "default",
307
+ size: "md"
308
+ }
309
+ });
310
+ function SidebarMenuButton({ render, isActive = false, variant = "default", size = "md", tooltip, className, ...props }) {
311
+ const { isMobile, state } = useSidebar();
312
+ const comp = useRender({
313
+ defaultTagName: "button",
314
+ props: mergeProps({ className: cn(sidebarMenuButtonVariants({
315
+ variant,
316
+ size
317
+ }), className) }, props),
318
+ render: !tooltip ? render : /* @__PURE__ */ jsx(TooltipTrigger, { render }),
319
+ state: {
320
+ slot: "sidebar-menu-button",
321
+ sidebar: "menu-button",
322
+ size,
323
+ active: isActive
324
+ }
325
+ });
326
+ if (!tooltip) return comp;
327
+ if (typeof tooltip === "string") tooltip = { children: tooltip };
328
+ return /* @__PURE__ */ jsxs(Tooltip, { children: [comp, /* @__PURE__ */ jsx(TooltipContent, {
329
+ side: "right",
330
+ align: "center",
331
+ hidden: state !== "collapsed" || isMobile,
332
+ ...tooltip
333
+ })] });
334
+ }
335
+ function SidebarMenuAction({ className, render, showOnHover = false, ...props }) {
336
+ return useRender({
337
+ defaultTagName: "button",
338
+ props: mergeProps({ className: cn("absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-fg-secondary outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-fg-primary 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 after:absolute after:-inset-2 hover:bg-surface-raised hover:text-fg-primary focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] lg:after:hidden [&>svg]:size-4 [&>svg]:shrink-0", showOnHover && "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-fg-brand aria-expanded:opacity-100 lg:opacity-0", className) }, props),
339
+ render,
340
+ state: {
341
+ slot: "sidebar-menu-action",
342
+ sidebar: "menu-action"
343
+ }
344
+ });
345
+ }
346
+ function SidebarMenuBadge({ className, ...props }) {
347
+ return /* @__PURE__ */ jsx("div", {
348
+ "data-slot": "sidebar-menu-badge",
349
+ "data-sidebar": "menu-badge",
350
+ className: cn("pointer-events-none absolute right-4 flex h-5 min-w-5 items-center justify-center rounded-full bg-surface-brand px-1 text-gdt-subtext font-bold leading-none text-fg-on-brand tabular-nums select-none group-data-[collapsible=icon]:hidden peer-data-[size=default]/menu-button:top-2.5 peer-data-[size=lg]/menu-button:top-4 peer-data-[size=sm]/menu-button:top-2", className),
351
+ ...props
352
+ });
353
+ }
354
+ function SidebarMenuSkeleton({ className, showIcon = false, ...props }) {
355
+ const [width] = React.useState(() => {
356
+ return `${Math.floor(Math.random() * 40) + 50}%`;
357
+ });
358
+ return /* @__PURE__ */ jsxs("div", {
359
+ "data-slot": "sidebar-menu-skeleton",
360
+ "data-sidebar": "menu-skeleton",
361
+ className: cn("flex h-8 items-center gap-2 rounded-md px-2", className),
362
+ ...props,
363
+ children: [showIcon && /* @__PURE__ */ jsx(Skeleton, {
364
+ className: "size-4 rounded-md",
365
+ "data-sidebar": "menu-skeleton-icon"
366
+ }), /* @__PURE__ */ jsx(Skeleton, {
367
+ className: "h-4 max-w-(--skeleton-width) flex-1",
368
+ "data-sidebar": "menu-skeleton-text",
369
+ style: { "--skeleton-width": width }
370
+ })]
371
+ });
996
372
  }
997
373
  function SidebarMenuSub({ className, ...props }) {
998
- return /* @__PURE__ */ jsx9(
999
- "ul",
1000
- {
1001
- "data-slot": "sidebar-menu-sub",
1002
- "data-sidebar": "menu-sub",
1003
- className: cn(
1004
- "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-line-subtle px-2.5 py-0.5 group-data-[collapsible=icon]:hidden",
1005
- className
1006
- ),
1007
- ...props
1008
- }
1009
- );
1010
- }
1011
- function SidebarMenuSubItem({
1012
- className,
1013
- ...props
1014
- }) {
1015
- return /* @__PURE__ */ jsx9(
1016
- "li",
1017
- {
1018
- "data-slot": "sidebar-menu-sub-item",
1019
- "data-sidebar": "menu-sub-item",
1020
- className: cn("group/menu-sub-item relative", className),
1021
- ...props
1022
- }
1023
- );
1024
- }
1025
- function SidebarMenuSubButton({
1026
- render,
1027
- size = "md",
1028
- isActive = false,
1029
- className,
1030
- ...props
1031
- }) {
1032
- return useRender({
1033
- defaultTagName: "a",
1034
- props: mergeProps(
1035
- {
1036
- className: cn(
1037
- "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-fg-secondary outline-hidden group-data-[collapsible=icon]:hidden hover:bg-surface-raised hover:text-fg-primary focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] active:bg-surface-raised active:text-fg-primary disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs data-active:bg-surface-brand-subtle data-active:text-fg-brand [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-fg-muted",
1038
- className
1039
- )
1040
- },
1041
- props
1042
- ),
1043
- render,
1044
- state: {
1045
- slot: "sidebar-menu-sub-button",
1046
- sidebar: "menu-sub-button",
1047
- size,
1048
- active: isActive
1049
- }
1050
- });
1051
- }
1052
- export {
1053
- Sidebar,
1054
- SidebarContent,
1055
- SidebarFooter,
1056
- SidebarGroup,
1057
- SidebarGroupAction,
1058
- SidebarGroupContent,
1059
- SidebarGroupLabel,
1060
- SidebarHeader,
1061
- SidebarInput,
1062
- SidebarInset,
1063
- SidebarMenu,
1064
- SidebarMenuAction,
1065
- SidebarMenuBadge,
1066
- SidebarMenuButton,
1067
- SidebarMenuItem,
1068
- SidebarMenuSkeleton,
1069
- SidebarMenuSub,
1070
- SidebarMenuSubButton,
1071
- SidebarMenuSubItem,
1072
- SidebarProvider,
1073
- SidebarRail,
1074
- SidebarSeparator,
1075
- SidebarTrigger,
1076
- useSidebar
1077
- };
1078
- //# sourceMappingURL=sidebar.js.map
374
+ return /* @__PURE__ */ jsx("ul", {
375
+ "data-slot": "sidebar-menu-sub",
376
+ "data-sidebar": "menu-sub",
377
+ className: cn("mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-line-subtle px-2.5 py-0.5 group-data-[collapsible=icon]:hidden", className),
378
+ ...props
379
+ });
380
+ }
381
+ function SidebarMenuSubItem({ className, ...props }) {
382
+ return /* @__PURE__ */ jsx("li", {
383
+ "data-slot": "sidebar-menu-sub-item",
384
+ "data-sidebar": "menu-sub-item",
385
+ className: cn("group/menu-sub-item relative", className),
386
+ ...props
387
+ });
388
+ }
389
+ function SidebarMenuSubButton({ render, size = "md", isActive = false, className, ...props }) {
390
+ return useRender({
391
+ defaultTagName: "a",
392
+ props: mergeProps({ className: cn("flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-fg-secondary outline-hidden group-data-[collapsible=icon]:hidden hover:bg-surface-raised hover:text-fg-primary focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] active:bg-surface-raised active:text-fg-primary disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs data-active:bg-surface-brand-subtle data-active:text-fg-brand [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-fg-caption-placeholder", className) }, props),
393
+ render,
394
+ state: {
395
+ slot: "sidebar-menu-sub-button",
396
+ sidebar: "menu-sub-button",
397
+ size,
398
+ active: isActive
399
+ }
400
+ });
401
+ }
402
+ //#endregion
403
+ export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar };