@dmsi/wedgekit-react 0.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (263) hide show
  1. package/README.md +35 -0
  2. package/dist/chunk-27KIIUAR.js +59 -0
  3. package/dist/chunk-2G2E2JMA.js +123 -0
  4. package/dist/chunk-4C66DLIJ.js +51 -0
  5. package/dist/chunk-4RD5ZF2V.js +55 -0
  6. package/dist/chunk-4RJKB7LC.js +14 -0
  7. package/dist/chunk-4T7F5BZZ.js +26 -0
  8. package/dist/chunk-5GOBP2JS.js +53 -0
  9. package/dist/chunk-6ZY524ID.js +42 -0
  10. package/dist/chunk-AWQSSKCK.js +32 -0
  11. package/dist/chunk-BNHSAFMP.js +93 -0
  12. package/dist/chunk-BWRHL2AG.js +439 -0
  13. package/dist/chunk-DKKYR6DS.js +132 -0
  14. package/dist/chunk-E5ALT5W7.js +182 -0
  15. package/dist/chunk-FY7PTP6E.js +322 -0
  16. package/dist/chunk-GTCSRHPF.js +119 -0
  17. package/dist/chunk-I2UVVKQI.js +12 -0
  18. package/dist/chunk-IGQVA7SC.js +41 -0
  19. package/dist/chunk-K3IKUSZW.js +59 -0
  20. package/dist/chunk-KENSVWOY.js +151 -0
  21. package/dist/chunk-KX3O6GJ6.js +138 -0
  22. package/dist/chunk-L4UM372R.js +253 -0
  23. package/dist/chunk-ORMEWXMH.js +37 -0
  24. package/dist/chunk-Q3FKEKIN.js +23 -0
  25. package/dist/chunk-SEKKGFM6.js +28 -0
  26. package/dist/chunk-SY3HT54E.js +91 -0
  27. package/dist/chunk-TAW5ZZ4Z.js +346 -0
  28. package/dist/chunk-TRUPPHBQ.js +109 -0
  29. package/dist/chunk-TU55CHXU.js +30 -0
  30. package/dist/chunk-TWZZB4WO.js +114 -0
  31. package/dist/chunk-TYI74BSP.js +62 -0
  32. package/dist/chunk-U42SKNR6.js +104 -0
  33. package/dist/chunk-UU3FA6LV.js +72 -0
  34. package/dist/chunk-WVUIIBRR.js +51 -0
  35. package/dist/chunk-XUIPGYP5.js +39 -0
  36. package/dist/chunk-Z4UCFUF7.js +299 -0
  37. package/dist/components/Breadcrumbs.cjs +376 -0
  38. package/dist/components/Breadcrumbs.js +90 -0
  39. package/dist/components/Button.cjs +319 -0
  40. package/dist/components/Button.js +8 -0
  41. package/dist/components/CalendarRange.cjs +520 -0
  42. package/dist/components/CalendarRange.js +13 -0
  43. package/dist/components/Caption.cjs +283 -0
  44. package/dist/components/Caption.js +80 -0
  45. package/dist/components/Checkbox.cjs +378 -0
  46. package/dist/components/Checkbox.js +11 -0
  47. package/dist/components/ContentTab.cjs +382 -0
  48. package/dist/components/ContentTab.js +10 -0
  49. package/dist/components/ContentTabs.cjs +472 -0
  50. package/dist/components/ContentTabs.js +98 -0
  51. package/dist/components/DMSiLogo.cjs +79 -0
  52. package/dist/components/DMSiLogo.js +56 -0
  53. package/dist/components/DataGrid.cjs +3113 -0
  54. package/dist/components/DataGrid.js +758 -0
  55. package/dist/components/DataGridCell.cjs +1907 -0
  56. package/dist/components/DataGridCell.js +24 -0
  57. package/dist/components/DataTable.cjs +791 -0
  58. package/dist/components/DataTable.js +720 -0
  59. package/dist/components/DateInput.cjs +1130 -0
  60. package/dist/components/DateInput.js +170 -0
  61. package/dist/components/DateRangeInput.cjs +1131 -0
  62. package/dist/components/DateRangeInput.js +171 -0
  63. package/dist/components/DebugJson.cjs +50 -0
  64. package/dist/components/DebugJson.js +27 -0
  65. package/dist/components/Display.cjs +234 -0
  66. package/dist/components/Display.js +12 -0
  67. package/dist/components/EditingContext.cjs +73 -0
  68. package/dist/components/EditingContext.js +35 -0
  69. package/dist/components/FilterGroup.cjs +1431 -0
  70. package/dist/components/FilterGroup.js +231 -0
  71. package/dist/components/FullViewportBox.cjs +35 -0
  72. package/dist/components/FullViewportBox.js +12 -0
  73. package/dist/components/Grid.cjs +69 -0
  74. package/dist/components/Grid.js +36 -0
  75. package/dist/components/GridContainer.cjs +125 -0
  76. package/dist/components/GridContainer.js +92 -0
  77. package/dist/components/Heading.cjs +238 -0
  78. package/dist/components/Heading.js +14 -0
  79. package/dist/components/HorizontalDivider.cjs +33 -0
  80. package/dist/components/HorizontalDivider.js +10 -0
  81. package/dist/components/Icon.cjs +98 -0
  82. package/dist/components/Icon.js +7 -0
  83. package/dist/components/Input.cjs +672 -0
  84. package/dist/components/Input.js +21 -0
  85. package/dist/components/InputGroup.cjs +270 -0
  86. package/dist/components/InputGroup.js +60 -0
  87. package/dist/components/Label.cjs +223 -0
  88. package/dist/components/Label.js +8 -0
  89. package/dist/components/Link.cjs +262 -0
  90. package/dist/components/Link.js +8 -0
  91. package/dist/components/List.cjs +37 -0
  92. package/dist/components/List.js +14 -0
  93. package/dist/components/LiveChatComponent.cjs +63 -0
  94. package/dist/components/LiveChatComponent.js +40 -0
  95. package/dist/components/LogoAgilityTopBar.cjs +115 -0
  96. package/dist/components/LogoAgilityTopBar.js +92 -0
  97. package/dist/components/LogoDMSiTopBar.cjs +79 -0
  98. package/dist/components/LogoDMSiTopBar.js +7 -0
  99. package/dist/components/LogoMillworkTopBar.cjs +221 -0
  100. package/dist/components/LogoMillworkTopBar.js +198 -0
  101. package/dist/components/MainBar.cjs +211 -0
  102. package/dist/components/MainBar.js +65 -0
  103. package/dist/components/Menu.cjs +437 -0
  104. package/dist/components/Menu.js +11 -0
  105. package/dist/components/MenuOption.cjs +483 -0
  106. package/dist/components/MenuOption.js +13 -0
  107. package/dist/components/MobileDataGrid.cjs +658 -0
  108. package/dist/components/MobileDataGrid.js +125 -0
  109. package/dist/components/Modal.cjs +783 -0
  110. package/dist/components/Modal.js +245 -0
  111. package/dist/components/ModalButtons.cjs +385 -0
  112. package/dist/components/ModalButtons.js +10 -0
  113. package/dist/components/ModalContent.cjs +57 -0
  114. package/dist/components/ModalContent.js +7 -0
  115. package/dist/components/ModalHeader.cjs +426 -0
  116. package/dist/components/ModalHeader.js +11 -0
  117. package/dist/components/ModalScrim.cjs +64 -0
  118. package/dist/components/ModalScrim.js +7 -0
  119. package/dist/components/NavigationTab.cjs +431 -0
  120. package/dist/components/NavigationTab.js +10 -0
  121. package/dist/components/NavigationTabs.cjs +477 -0
  122. package/dist/components/NavigationTabs.js +56 -0
  123. package/dist/components/Notification.cjs +640 -0
  124. package/dist/components/Notification.js +117 -0
  125. package/dist/components/OptionPill.cjs +478 -0
  126. package/dist/components/OptionPill.js +11 -0
  127. package/dist/components/Paragraph.cjs +231 -0
  128. package/dist/components/Paragraph.js +8 -0
  129. package/dist/components/Password.cjs +700 -0
  130. package/dist/components/Password.js +53 -0
  131. package/dist/components/ProjectBar.cjs +242 -0
  132. package/dist/components/ProjectBar.js +63 -0
  133. package/dist/components/Radio.cjs +349 -0
  134. package/dist/components/Radio.js +131 -0
  135. package/dist/components/Search.cjs +767 -0
  136. package/dist/components/Search.js +12 -0
  137. package/dist/components/Select.cjs +758 -0
  138. package/dist/components/Select.js +12 -0
  139. package/dist/components/SideMenu.cjs +54 -0
  140. package/dist/components/SideMenu.js +21 -0
  141. package/dist/components/SideMenuGroup.cjs +422 -0
  142. package/dist/components/SideMenuGroup.js +83 -0
  143. package/dist/components/SideMenuItem.cjs +388 -0
  144. package/dist/components/SideMenuItem.js +70 -0
  145. package/dist/components/Stack.cjs +138 -0
  146. package/dist/components/Stack.js +7 -0
  147. package/dist/components/StatusPill.cjs +265 -0
  148. package/dist/components/StatusPill.js +52 -0
  149. package/dist/components/Stepper.cjs +885 -0
  150. package/dist/components/Stepper.js +105 -0
  151. package/dist/components/Subheader.cjs +226 -0
  152. package/dist/components/Subheader.js +8 -0
  153. package/dist/components/Surface.cjs +98 -0
  154. package/dist/components/Surface.js +40 -0
  155. package/dist/components/Swatch.cjs +1728 -0
  156. package/dist/components/Swatch.js +1319 -0
  157. package/dist/components/Textarea.cjs +269 -0
  158. package/dist/components/Textarea.js +96 -0
  159. package/dist/components/Theme.cjs +36 -0
  160. package/dist/components/Theme.js +7 -0
  161. package/dist/components/Time.cjs +1118 -0
  162. package/dist/components/Time.js +353 -0
  163. package/dist/components/Toast.cjs +644 -0
  164. package/dist/components/Toast.js +218 -0
  165. package/dist/components/Tooltip.cjs +273 -0
  166. package/dist/components/Tooltip.js +9 -0
  167. package/dist/components/TopBar.cjs +352 -0
  168. package/dist/components/TopBar.js +132 -0
  169. package/dist/components/useInfiniteScroll.cjs +57 -0
  170. package/dist/components/useInfiniteScroll.js +8 -0
  171. package/dist/components/useMatchesMedia.cjs +53 -0
  172. package/dist/components/useMatchesMedia.js +9 -0
  173. package/dist/components/useMenuSystem.cjs +358 -0
  174. package/dist/components/useMenuSystem.js +11 -0
  175. package/dist/components/useMounted.cjs +39 -0
  176. package/dist/components/useMounted.js +8 -0
  177. package/dist/fonts.css +21 -0
  178. package/dist/icons-light[FILL]-PPZXOLWS.woff2 +0 -0
  179. package/dist/icons-normal[FILL]-PPZXOLWS.woff2 +0 -0
  180. package/dist/index.css +4401 -0
  181. package/dist/open-sans-55T6A4JE.woff2 +0 -0
  182. package/dist/types.cjs +18 -0
  183. package/dist/types.js +0 -0
  184. package/package.json +66 -0
  185. package/src/brand.css +125 -0
  186. package/src/classNames.ts +144 -0
  187. package/src/components/Breadcrumbs.tsx +116 -0
  188. package/src/components/Button.tsx +210 -0
  189. package/src/components/CalendarRange.tsx +429 -0
  190. package/src/components/Caption.tsx +101 -0
  191. package/src/components/Checkbox.tsx +196 -0
  192. package/src/components/ContentTab.tsx +66 -0
  193. package/src/components/ContentTabs.tsx +103 -0
  194. package/src/components/DMSiLogo.tsx +32 -0
  195. package/src/components/DataGrid.tsx +948 -0
  196. package/src/components/DataGridCell.tsx +384 -0
  197. package/src/components/DataTable.tsx +835 -0
  198. package/src/components/DateInput.tsx +188 -0
  199. package/src/components/DateRangeInput.tsx +179 -0
  200. package/src/components/DebugJson.tsx +24 -0
  201. package/src/components/Display.tsx +60 -0
  202. package/src/components/EditingContext.tsx +40 -0
  203. package/src/components/FilterGroup.tsx +234 -0
  204. package/src/components/FullViewportBox.tsx +11 -0
  205. package/src/components/Grid.tsx +75 -0
  206. package/src/components/GridContainer.tsx +124 -0
  207. package/src/components/Heading.tsx +66 -0
  208. package/src/components/HorizontalDivider.tsx +3 -0
  209. package/src/components/Icon.tsx +36 -0
  210. package/src/components/Input.tsx +511 -0
  211. package/src/components/InputGroup.tsx +51 -0
  212. package/src/components/Label.tsx +40 -0
  213. package/src/components/Link.tsx +106 -0
  214. package/src/components/List.tsx +10 -0
  215. package/src/components/LiveChatComponent.tsx +56 -0
  216. package/src/components/LogoAgilityTopBar.tsx +53 -0
  217. package/src/components/LogoDMSiTopBar.tsx +32 -0
  218. package/src/components/LogoMillworkTopBar.tsx +118 -0
  219. package/src/components/MainBar.tsx +83 -0
  220. package/src/components/Menu.tsx +286 -0
  221. package/src/components/MenuOption.tsx +275 -0
  222. package/src/components/MobileDataGrid.tsx +135 -0
  223. package/src/components/Modal.tsx +271 -0
  224. package/src/components/ModalButtons.tsx +44 -0
  225. package/src/components/ModalContent.tsx +23 -0
  226. package/src/components/ModalHeader.tsx +41 -0
  227. package/src/components/ModalScrim.tsx +35 -0
  228. package/src/components/NavigationTab.tsx +89 -0
  229. package/src/components/NavigationTabs.tsx +63 -0
  230. package/src/components/Notification.tsx +120 -0
  231. package/src/components/OptionPill.tsx +114 -0
  232. package/src/components/Paragraph.tsx +49 -0
  233. package/src/components/Password.tsx +46 -0
  234. package/src/components/ProjectBar.tsx +76 -0
  235. package/src/components/Radio.tsx +140 -0
  236. package/src/components/Search.tsx +129 -0
  237. package/src/components/Select.tsx +104 -0
  238. package/src/components/SideMenu.tsx +21 -0
  239. package/src/components/SideMenuGroup.tsx +81 -0
  240. package/src/components/SideMenuItem.tsx +90 -0
  241. package/src/components/Stack.tsx +179 -0
  242. package/src/components/StatusPill.tsx +51 -0
  243. package/src/components/Stepper.tsx +91 -0
  244. package/src/components/Subheader.tsx +44 -0
  245. package/src/components/Surface.tsx +34 -0
  246. package/src/components/Swatch.tsx +1066 -0
  247. package/src/components/Textarea.tsx +101 -0
  248. package/src/components/Theme.tsx +13 -0
  249. package/src/components/Time.tsx +438 -0
  250. package/src/components/Toast.tsx +244 -0
  251. package/src/components/Tooltip.tsx +137 -0
  252. package/src/components/TopBar.tsx +124 -0
  253. package/src/components/useInfiniteScroll.tsx +40 -0
  254. package/src/components/useMatchesMedia.tsx +28 -0
  255. package/src/components/useMenuSystem.tsx +367 -0
  256. package/src/components/useMounted.tsx +14 -0
  257. package/src/darkmode.css +140 -0
  258. package/src/fonts.css +23 -0
  259. package/src/index.css +509 -0
  260. package/src/index.tsx +2 -0
  261. package/src/types.ts +149 -0
  262. package/src/utils/formatting.tsx +81 -0
  263. package/src/utils.ts +23 -0
@@ -0,0 +1,59 @@
1
+ import {
2
+ componentPaddingXUsingComponentGap,
3
+ typography
4
+ } from "./chunk-KX3O6GJ6.js";
5
+ import {
6
+ __objRest,
7
+ __spreadProps,
8
+ __spreadValues
9
+ } from "./chunk-ORMEWXMH.js";
10
+
11
+ // src/components/Paragraph.tsx
12
+ import clsx from "clsx";
13
+ import { jsx } from "react/jsx-runtime";
14
+ var Paragraph = (_a) => {
15
+ var _b = _a, {
16
+ className,
17
+ color,
18
+ padded,
19
+ align = "left",
20
+ tall,
21
+ addOverflow,
22
+ children,
23
+ as = "p"
24
+ } = _b, props = __objRest(_b, [
25
+ "className",
26
+ "color",
27
+ "padded",
28
+ "align",
29
+ "tall",
30
+ "addOverflow",
31
+ "children",
32
+ "as"
33
+ ]);
34
+ const Element = as;
35
+ return /* @__PURE__ */ jsx(
36
+ Element,
37
+ __spreadProps(__spreadValues({}, props), {
38
+ className: clsx(
39
+ typography.paragraph,
40
+ className,
41
+ padded && componentPaddingXUsingComponentGap,
42
+ align === "left" && "text-left",
43
+ align === "center" && "text-center",
44
+ align === "right" && "text-right",
45
+ tall && "!leading-6",
46
+ addOverflow && "whitespace-nowrap text-ellipsis overflow-hidden"
47
+ ),
48
+ style: __spreadProps(__spreadValues({}, props.style), {
49
+ color: color ? `var(--color-${color})` : void 0
50
+ }),
51
+ children
52
+ })
53
+ );
54
+ };
55
+ Paragraph.displayName = "Paragraph";
56
+
57
+ export {
58
+ Paragraph
59
+ };
@@ -0,0 +1,151 @@
1
+ import {
2
+ baseTransition,
3
+ componentGap,
4
+ componentPaddingMinus2pxBorder,
5
+ componentPaddingXUsingComponentGap,
6
+ paddingUsingComponentGap,
7
+ typography
8
+ } from "./chunk-KX3O6GJ6.js";
9
+ import {
10
+ __objRest,
11
+ __spreadProps,
12
+ __spreadValues
13
+ } from "./chunk-ORMEWXMH.js";
14
+
15
+ // src/components/Button.tsx
16
+ import clsx from "clsx";
17
+ import { jsx, jsxs } from "react/jsx-runtime";
18
+ var Button = (_a) => {
19
+ var _b = _a, {
20
+ variant = "primary",
21
+ as = "button",
22
+ block,
23
+ leftIcon,
24
+ rightIcon,
25
+ className,
26
+ classNameLabel,
27
+ disabled = false,
28
+ children,
29
+ iconOnly = false,
30
+ colorClassName,
31
+ href
32
+ } = _b, props = __objRest(_b, [
33
+ "variant",
34
+ "as",
35
+ "block",
36
+ "leftIcon",
37
+ "rightIcon",
38
+ "className",
39
+ "classNameLabel",
40
+ "disabled",
41
+ "children",
42
+ "iconOnly",
43
+ "colorClassName",
44
+ "href"
45
+ ]);
46
+ const primaryVariantStyles = variant === "primary" && clsx(
47
+ (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
48
+ "bg-background-action-primary-normal border-background-action-primary-normal",
49
+ "hover:bg-background-action-primary-hover hover:border-background-action-primary-hover",
50
+ "focus:bg-background-action-primary-hover focus:border-background-action-primary-hover focus:outline-0",
51
+ "active:bg-background-action-primary-active active:border-background-action-primary-active",
52
+ "disabled:bg-background-action-primary-disabled disabled:border-background-action-primary-disabled disabled:text-text-on-action-primary-disabled"
53
+ );
54
+ const secondaryVariantStyles = variant === "secondary" && clsx(
55
+ (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-action-primary-normal",
56
+ "bg-background-action-secondary-normal border-border-action-normal",
57
+ "hover:bg-background-action-secondary-hover hover:border-border-action-hover hover:text-text-action-primary-hover",
58
+ "focus:bg-background-action-secondary-hover focus:border-border-action-hover focus:text-text-action-primary-hover focus:outline-0",
59
+ "active:bg-background-action-secondary-active active:border-border-action-active active:text-text-action-primary-active",
60
+ "disabled:bg-background-action-primary-disabled disabled:border-border-action-disabled disabled:text-text-action-primary-disabled"
61
+ );
62
+ const tertiaryVariantStyles = variant === "tertiary" && clsx(
63
+ "bg-transparent border-transparent",
64
+ iconOnly ? (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-icon-action-primary-normal" : (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-action-primary-normal",
65
+ "bg-transparent border-transparent",
66
+ "hover:bg-background-action-secondary-hover hover:border-background-action-secondary-hover hover:text-text-action-primary-hover",
67
+ "focus:bg-background-action-secondary-hover focus:border-background-action-secondary-hover focus:text-text-action-primary-hover focus:outline-0",
68
+ "active:bg-background-action-secondary-active active:border-transparent active:text-text-action-primary-active",
69
+ "disabled:bg-transparent disabled:border-transparent disabled:text-text-action-primary-disabled"
70
+ );
71
+ const primaryCriticalVariantStyles = variant === "primary-critical" && clsx(
72
+ (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
73
+ "bg-background-action-critical-primary-normal border-background-action-critical-primary-normal",
74
+ "hover:bg-background-action-critical-primary-hover hover:border-background-action-critical-primary-hover",
75
+ "focus:bg-background-action-critical-primary-hover focus:border-background-action-critical-primary-hover focus:outline-0",
76
+ "active:bg-background-action-critical-primary-active active:border-background-action-critical-primary-active",
77
+ "disabled:bg-background-action-critical-primary-disabled disabled:border-background-action-critical-primary-disabled disabled:text-text-on-action-primary-disabled"
78
+ );
79
+ const secondaryCriticalVariantStyles = variant === "secondary-critical" && clsx(
80
+ (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-action-critical-normal",
81
+ "bg-background-action-critical-secondary-normal border-border-action-critical-normal",
82
+ "hover:bg-background-action-critical-secondary-hover hover:border-border-action-critical-hover hover:text-text-action-critical-hover",
83
+ "focus:bg-background-action-critical-secondary-hover focus:border-border-action-critical-hover focus:text-text-action-critical-hover focus:outline-0",
84
+ "active:bg-background-action-critical-secondary-active active:border-border-action-critical-active active:text-text-action-critical-active",
85
+ "disabled:bg-background-action-critical-disabled disabled:border-border-action-critical-disabled disabled:text-text-action-critical-disabled"
86
+ );
87
+ const tertiaryCriticalVariantStyles = variant === "tertiary-critical" && clsx(
88
+ (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-action-critical-normal",
89
+ "bg-transparent border-transparent text-text-action-critical-normal",
90
+ "hover:bg-background-action-critical-secondary-hover hover:border-background-action-critical-secondary-hover hover:text-text-action-critical-hover",
91
+ "focus:bg-background-action-critical-secondary-hover focus:border-background-action-critical-secondary-hover focus:text-text-action-critical-hover focus:outline-0",
92
+ "active:bg-background-action-critical-secondary-active active:border-background-action-critical-secondary-active active:text-text-action-critical-active",
93
+ "disabled:bg-transparent disabled:border-transparent disabled:text-text-action-critical-disabled"
94
+ );
95
+ const navigationVarianStyles = variant === "navigation" && clsx(
96
+ (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
97
+ "bg-transparent",
98
+ "hover:bg-background-on-action-secondary-hover hover:text-brand-text-action-primary-hover",
99
+ // "hover:bg-background-action-secondary-hover hover:text-text-action-primary-hover", // Will use this once colors are finalized
100
+ "focus:bg-background-on-action-secondary-hover focus:text-brand-text-action-primary-hover focus:outline-0",
101
+ // "focus:bg-background-action-secondary-hover focus:text-text-action-primary-hover", // Will use this once colors are finalized
102
+ "active:bg-background-on-action-secondary-active active:text-brand-text-action-primary-active",
103
+ // "active:bg-background-action-secondary-active active:text-text-action-primary-active", // Will use this once colors are finalized
104
+ "disabled:bg-transparent disabled:text-text-on-action-primary-disabled",
105
+ "flex-col",
106
+ paddingUsingComponentGap
107
+ );
108
+ const notNavigationVariantStyles = variant !== "navigation" && clsx("border-2 flex-row", componentPaddingMinus2pxBorder, componentGap);
109
+ const buttonClasses = clsx(
110
+ disabled ? "cursor-default" : "cursor-pointer",
111
+ block ? "w-full" : "w-fit",
112
+ baseTransition,
113
+ "rounded-sm whitespace-nowrap inline-flex items-center justify-center group/btn",
114
+ primaryVariantStyles,
115
+ secondaryVariantStyles,
116
+ tertiaryVariantStyles,
117
+ primaryCriticalVariantStyles,
118
+ secondaryCriticalVariantStyles,
119
+ tertiaryCriticalVariantStyles,
120
+ navigationVarianStyles,
121
+ notNavigationVariantStyles,
122
+ className
123
+ );
124
+ const labelClasses = clsx(
125
+ "min-h-6 flex items-center justify-center",
126
+ classNameLabel,
127
+ componentPaddingXUsingComponentGap,
128
+ typography.buttonLabel
129
+ );
130
+ const Element = href ? "a" : as;
131
+ return /* @__PURE__ */ jsxs(
132
+ Element,
133
+ __spreadProps(__spreadValues({
134
+ type: Element === "button" ? "button" : void 0,
135
+ className: buttonClasses
136
+ }, props), {
137
+ disabled,
138
+ href,
139
+ children: [
140
+ leftIcon && leftIcon,
141
+ !iconOnly && children && /* @__PURE__ */ jsx("span", { className: labelClasses, children }),
142
+ rightIcon && rightIcon
143
+ ]
144
+ })
145
+ );
146
+ };
147
+ Button.displayName = "Button";
148
+
149
+ export {
150
+ Button
151
+ };
@@ -0,0 +1,138 @@
1
+ // src/classNames.ts
2
+ import clsx from "clsx";
3
+ var typography = {
4
+ display1: clsx(
5
+ "font-sans font-semibold",
6
+ "text-display-1-mobile desktop:text-display-1-desktop compact:text-display-1-desktop-compact",
7
+ "leading-display-1-mobile desktop:leading-display-1-desktop"
8
+ ),
9
+ display2: clsx(
10
+ "font-sans font-bold",
11
+ "text-display-2-mobile desktop:text-display-2-desktop compact:text-display-2-desktop-compact",
12
+ "leading-display-2-mobile desktop:leading-display-2-desktop"
13
+ ),
14
+ heading1: clsx(
15
+ "font-sans font-semibold",
16
+ "text-heading-1-mobile desktop:text-heading-1-desktop compact:text-heading-1-desktop-compact",
17
+ "leading-heading-1-mobile desktop:leading-heading-1-desktop"
18
+ ),
19
+ heading2: clsx(
20
+ "font-sans font-normal",
21
+ "text-heading-2-mobile desktop:text-heading-2-desktop compact:text-heading-2-desktop-compact",
22
+ "leading-heading-2-mobile desktop:leading-heading-2-desktop"
23
+ ),
24
+ heading3: clsx(
25
+ "font-sans font-semibold",
26
+ "text-heading-3-mobile desktop:text-heading-3-desktop compact:text-heading-3-desktop-compact",
27
+ "leading-heading-3-mobile desktop:leading-heading-3-desktop"
28
+ ),
29
+ subheader: clsx(
30
+ "font-sans font-semibold",
31
+ "text-subheader-mobile desktop:text-subheader-desktop compact:text-subheader-desktop-compact",
32
+ "leading-subheader-mobile desktop:leading-subheader-desktop"
33
+ ),
34
+ link: clsx(
35
+ "font-sans font-normal",
36
+ "text-link-mobile desktop:text-link-desktop compact:text-link-desktop-compact",
37
+ "leading-link-mobile desktop:leading-link-desktop"
38
+ ),
39
+ buttonLabel: clsx(
40
+ "font-sans font-semibold",
41
+ "text-label-mobile desktop:text-label-desktop compact:text-label-desktop-compact",
42
+ "leading-label-mobile desktop:leading-label-desktop"
43
+ ),
44
+ label: clsx(
45
+ "font-sans font-semibold",
46
+ "text-label-mobile desktop:text-label-desktop compact:text-label-desktop-compact",
47
+ "leading-label-mobile desktop:leading-label-desktop"
48
+ ),
49
+ paragraph: clsx(
50
+ "font-sans font-normal",
51
+ "text-paragraph-mobile desktop:text-paragraph-desktop compact:text-paragraph-desktop-compact",
52
+ "leading-paragraph-mobile desktop:leading-paragraph-desktop"
53
+ ),
54
+ caption: clsx(
55
+ "font-sans font-normal",
56
+ "text-caption-mobile desktop:text-caption-desktop compact:text-caption-desktop-compact",
57
+ "leading-caption-mobile desktop:leading-caption-desktop"
58
+ )
59
+ };
60
+ var baseTransition = clsx(
61
+ "transition-colors duration-100 ease-in-out"
62
+ );
63
+ var componentGap = clsx(
64
+ "gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-desktop-compact-component-gap"
65
+ );
66
+ var paddingUsingComponentGap = clsx(
67
+ "p-mobile-component-gap desktop:p-desktop-component-gap compact:p-desktop-compact-component-gap"
68
+ );
69
+ var paddingYUsingLayoutGroupGap = clsx(
70
+ "py-mobile-layout-group-gap desktop:py-desktop-layout-group-gap compact:py-desktop-compact-layout-group-gap"
71
+ );
72
+ var componentPadding = clsx(
73
+ "p-mobile-component-padding desktop:p-desktop-component-padding compact:p-desktop-compact-component-padding"
74
+ );
75
+ var componentPaddingBottom = clsx(
76
+ "pb-mobile-component-padding desktop:pb-desktop-component-padding compact:pb-desktop-compact-component-padding"
77
+ );
78
+ var componentPaddingY = clsx(
79
+ "py-mobile-component-padding desktop:py-desktop-component-padding compact:py-desktop-compact-component-padding"
80
+ );
81
+ var componentPaddingXUsingComponentGap = clsx(
82
+ "px-mobile-component-gap desktop:px-desktop-component-gap compact:px-desktop-compact-component-gap"
83
+ );
84
+ var componentPaddingYUsingComponentGap = clsx(
85
+ "py-mobile-component-gap desktop:py-desktop-component-gap compact:py-desktop-compact-component-gap"
86
+ );
87
+ var componentPaddingMinusBorder = clsx(
88
+ "p-[calc(var(--spacing-mobile-component-padding)_-_1px)] desktop:p-[calc(var(--spacing-desktop-component-padding)_-_1px)] compact:p-[calc(var(--spacing-desktop-compact-component-padding)_-_1px)]"
89
+ );
90
+ var componentPaddingMinus2pxBorder = clsx(
91
+ "p-[calc(var(--spacing-mobile-component-padding)_-_2px)] desktop:p-[calc(var(--spacing-desktop-component-padding)_-_2px)] compact:p-[calc(var(--spacing-desktop-compact-component-padding)_-_2px)]"
92
+ );
93
+ var layoutPaddingBottom = clsx(
94
+ "pb-mobile-layout-padding desktop:pb-desktop-layout-padding compact:pb-desktop-compact-layout-padding"
95
+ );
96
+ var layoutPaddingY = clsx(
97
+ "py-mobile-layout-padding desktop:py-desktop-layout-padding compact:py-desktop-compact-layout-padding"
98
+ );
99
+ var containerPaddingX = clsx(
100
+ "px-mobile-container-padding desktop:px-desktop-container-padding compact:px-desktop-compact-container-padding"
101
+ );
102
+ var containerPaddingY = clsx(
103
+ "py-mobile-container-padding desktop:py-desktop-container-padding compact:py-desktop-compact-container-padding"
104
+ );
105
+ var layoutGroupGapPaddingY = clsx(
106
+ "py-mobile-layout-group-gap desktop:py-desktop-layout-group-gap compact:py-desktop-compact-layout-group-gap"
107
+ );
108
+ var layoutGroupGap = clsx(
109
+ "gap-mobile-layout-group-gap desktop:gap-desktop-layout-group-gap compact:gap-desktop-compact-layout-group-gap"
110
+ );
111
+ var layoutGap = clsx(
112
+ "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-desktop-compact-layout-gap"
113
+ );
114
+ var gapUsingContainerPadding = clsx(
115
+ "gap-mobile-container-padding desktop:gap-desktop-container-padding compact:gap-desktop-compact-container-padding"
116
+ );
117
+
118
+ export {
119
+ typography,
120
+ baseTransition,
121
+ componentGap,
122
+ paddingUsingComponentGap,
123
+ paddingYUsingLayoutGroupGap,
124
+ componentPadding,
125
+ componentPaddingBottom,
126
+ componentPaddingY,
127
+ componentPaddingXUsingComponentGap,
128
+ componentPaddingYUsingComponentGap,
129
+ componentPaddingMinusBorder,
130
+ componentPaddingMinus2pxBorder,
131
+ layoutPaddingBottom,
132
+ containerPaddingX,
133
+ containerPaddingY,
134
+ layoutGroupGapPaddingY,
135
+ layoutGroupGap,
136
+ layoutGap,
137
+ gapUsingContainerPadding
138
+ };
@@ -0,0 +1,253 @@
1
+ import {
2
+ useMenuPosition
3
+ } from "./chunk-Z4UCFUF7.js";
4
+ import {
5
+ useMatchesMobile
6
+ } from "./chunk-SEKKGFM6.js";
7
+ import {
8
+ findDocumentRoot
9
+ } from "./chunk-4T7F5BZZ.js";
10
+ import {
11
+ __objRest,
12
+ __spreadProps,
13
+ __spreadValues
14
+ } from "./chunk-ORMEWXMH.js";
15
+
16
+ // src/components/Menu.tsx
17
+ import clsx from "clsx";
18
+ import {
19
+ useEffect,
20
+ useRef,
21
+ useState
22
+ } from "react";
23
+ import { createPortal } from "react-dom";
24
+ import { jsxs } from "react/jsx-runtime";
25
+ var Menu = (_a) => {
26
+ var _b = _a, {
27
+ children,
28
+ className,
29
+ ref,
30
+ positionTo,
31
+ mobilePositionTo,
32
+ show,
33
+ setShow,
34
+ position = "bottom",
35
+ maxHeight: customMaxHeight,
36
+ topOffset,
37
+ mobileBackMenuOption,
38
+ mobileHide,
39
+ useDefaultMinWidth,
40
+ autoFocusOff,
41
+ menuName
42
+ } = _b, props = __objRest(_b, [
43
+ "children",
44
+ "className",
45
+ "ref",
46
+ "positionTo",
47
+ "mobilePositionTo",
48
+ "show",
49
+ "setShow",
50
+ "position",
51
+ "maxHeight",
52
+ "topOffset",
53
+ "mobileBackMenuOption",
54
+ "mobileHide",
55
+ "useDefaultMinWidth",
56
+ "autoFocusOff",
57
+ "menuName"
58
+ ]);
59
+ const internalRef = useRef(null);
60
+ const actualRef = ref || internalRef;
61
+ const [maxHeight, setMaxHeight] = useState("180px");
62
+ const isMobile = useMatchesMobile();
63
+ const { menuPosition, updatePosition } = useMenuPosition(
64
+ isMobile && mobilePositionTo ? mobilePositionTo : positionTo,
65
+ position,
66
+ {
67
+ isOpen: show,
68
+ setIsOpen: setShow,
69
+ menuRef: internalRef,
70
+ topOffset
71
+ }
72
+ );
73
+ useEffect(() => {
74
+ const raf = requestAnimationFrame(() => {
75
+ if (!actualRef || !actualRef.current || customMaxHeight) {
76
+ return;
77
+ }
78
+ if (actualRef.current.childElementCount > 4) {
79
+ let accumulatedHeight = 0;
80
+ Array.from(actualRef.current.children).forEach((child, index) => {
81
+ if (index >= 5) {
82
+ return;
83
+ }
84
+ accumulatedHeight += child.clientHeight;
85
+ });
86
+ accumulatedHeight = accumulatedHeight / 5 * 4.5;
87
+ setMaxHeight(`${accumulatedHeight}px`);
88
+ }
89
+ });
90
+ return () => {
91
+ cancelAnimationFrame(raf);
92
+ };
93
+ }, [actualRef, customMaxHeight]);
94
+ useEffect(() => {
95
+ if (!show) {
96
+ return;
97
+ }
98
+ initializeMenuFocus();
99
+ updatePosition();
100
+ }, [show, updatePosition]);
101
+ useEffect(() => {
102
+ if (!show || !setShow) {
103
+ return;
104
+ }
105
+ const handleEscapeKey = (event) => {
106
+ var _a2;
107
+ if (event.key !== "Escape") {
108
+ return;
109
+ }
110
+ setShow(false);
111
+ (_a2 = positionTo == null ? void 0 : positionTo.current) == null ? void 0 : _a2.focus();
112
+ };
113
+ document.addEventListener("keydown", handleEscapeKey);
114
+ return () => {
115
+ document.removeEventListener("keydown", handleEscapeKey);
116
+ };
117
+ }, [show, setShow, positionTo]);
118
+ return show && createPortal(
119
+ /* @__PURE__ */ jsxs(
120
+ "div",
121
+ __spreadProps(__spreadValues({
122
+ ref: setRefs,
123
+ className: clsx(
124
+ "shadow-4 rounded-base bg-background-grouped-primary-normal overflow-x-hidden overflow-y-auto flex flex-col outline-0",
125
+ "fixed",
126
+ "z-50",
127
+ mobileHide && "opacity-0 pointer-events-none",
128
+ className
129
+ )
130
+ }, props), {
131
+ style: __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, props.style), {
132
+ maxHeight: customMaxHeight || maxHeight
133
+ }), menuPosition), {
134
+ minWidth: useDefaultMinWidth ? "212px" : menuPosition.minWidth
135
+ }),
136
+ onKeyDown: handleKeydown,
137
+ onMouseDown: stopPropagation,
138
+ onMouseUp: stopPropagation,
139
+ onTouchStart: stopPropagation,
140
+ onTouchEnd: stopPropagation,
141
+ tabIndex: -1,
142
+ "data-menu": menuName != null ? menuName : "",
143
+ children: [
144
+ mobileBackMenuOption == null ? void 0 : mobileBackMenuOption(),
145
+ children
146
+ ]
147
+ })
148
+ ),
149
+ findDocumentRoot(internalRef.current)
150
+ );
151
+ function handleKeydown(e) {
152
+ var _a2, _b2;
153
+ if (!internalRef.current) {
154
+ return;
155
+ }
156
+ if (e.key !== "Escape") {
157
+ e.stopPropagation();
158
+ }
159
+ const menuOptions = Array.from(
160
+ internalRef.current.querySelectorAll('[role="menuitem"]')
161
+ );
162
+ if (menuOptions.length === 0) {
163
+ return;
164
+ }
165
+ let currentIndex = -1;
166
+ const focusedElement = document.activeElement;
167
+ for (let i = 0; i < menuOptions.length; i++) {
168
+ if (menuOptions[i] === focusedElement) {
169
+ currentIndex = i;
170
+ break;
171
+ }
172
+ }
173
+ switch (e.key) {
174
+ case "ArrowDown": {
175
+ e.preventDefault();
176
+ const nextIndex = currentIndex < menuOptions.length - 1 ? currentIndex + 1 : 0;
177
+ menuOptions[nextIndex].focus();
178
+ break;
179
+ }
180
+ case "ArrowUp": {
181
+ e.preventDefault();
182
+ const prevIndex = currentIndex > 0 ? currentIndex - 1 : menuOptions.length - 1;
183
+ menuOptions[prevIndex].focus();
184
+ break;
185
+ }
186
+ case "Home":
187
+ e.preventDefault();
188
+ menuOptions[0].focus();
189
+ break;
190
+ case "End":
191
+ e.preventDefault();
192
+ menuOptions[menuOptions.length - 1].focus();
193
+ break;
194
+ case "Enter":
195
+ case " ":
196
+ case "ArrowRight":
197
+ e.preventDefault();
198
+ if (currentIndex >= 0) {
199
+ menuOptions[currentIndex].click();
200
+ }
201
+ break;
202
+ case "ArrowLeft":
203
+ e.preventDefault();
204
+ (_a2 = positionTo == null ? void 0 : positionTo.current) == null ? void 0 : _a2.click();
205
+ (_b2 = positionTo == null ? void 0 : positionTo.current) == null ? void 0 : _b2.focus();
206
+ break;
207
+ }
208
+ }
209
+ function initializeMenuFocus() {
210
+ var _a2, _b2, _c;
211
+ if (!autoFocusOff) {
212
+ (_a2 = internalRef.current) == null ? void 0 : _a2.focus();
213
+ }
214
+ const selectedOption = (_b2 = internalRef.current) == null ? void 0 : _b2.querySelector(
215
+ "[data-selected]"
216
+ );
217
+ const firstMenuItem = (_c = internalRef.current) == null ? void 0 : _c.querySelector(
218
+ '[role="menuitem"]'
219
+ );
220
+ const targetElement = selectedOption || firstMenuItem;
221
+ if (!targetElement) {
222
+ return;
223
+ }
224
+ targetElement.scrollIntoView({
225
+ block: "nearest",
226
+ behavior: "instant"
227
+ });
228
+ if (autoFocusOff) {
229
+ return;
230
+ }
231
+ requestAnimationFrame(() => {
232
+ targetElement.focus();
233
+ });
234
+ }
235
+ function setRefs(node) {
236
+ internalRef.current = node;
237
+ if (ref) {
238
+ if (typeof ref === "function") {
239
+ ref(node);
240
+ } else {
241
+ ref.current = node;
242
+ }
243
+ }
244
+ }
245
+ function stopPropagation(e) {
246
+ e.stopPropagation();
247
+ }
248
+ };
249
+ Menu.displayName = "Menu";
250
+
251
+ export {
252
+ Menu
253
+ };
@@ -0,0 +1,37 @@
1
+ var __defProp = Object.defineProperty;
2
+ var __defProps = Object.defineProperties;
3
+ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
4
+ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __propIsEnum = Object.prototype.propertyIsEnumerable;
7
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
8
+ var __spreadValues = (a, b) => {
9
+ for (var prop in b || (b = {}))
10
+ if (__hasOwnProp.call(b, prop))
11
+ __defNormalProp(a, prop, b[prop]);
12
+ if (__getOwnPropSymbols)
13
+ for (var prop of __getOwnPropSymbols(b)) {
14
+ if (__propIsEnum.call(b, prop))
15
+ __defNormalProp(a, prop, b[prop]);
16
+ }
17
+ return a;
18
+ };
19
+ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
20
+ var __objRest = (source, exclude) => {
21
+ var target = {};
22
+ for (var prop in source)
23
+ if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
24
+ target[prop] = source[prop];
25
+ if (source != null && __getOwnPropSymbols)
26
+ for (var prop of __getOwnPropSymbols(source)) {
27
+ if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
28
+ target[prop] = source[prop];
29
+ }
30
+ return target;
31
+ };
32
+
33
+ export {
34
+ __spreadValues,
35
+ __spreadProps,
36
+ __objRest
37
+ };
@@ -0,0 +1,23 @@
1
+ // src/components/ModalContent.tsx
2
+ import clsx from "clsx";
3
+ import { jsx } from "react/jsx-runtime";
4
+ function ModalContent({
5
+ fixedHeightScrolling,
6
+ children
7
+ }) {
8
+ return /* @__PURE__ */ jsx(
9
+ "div",
10
+ {
11
+ className: clsx(
12
+ "flex-grow desktop:flex-grow-0 p-4",
13
+ fixedHeightScrolling && "overflow-auto"
14
+ ),
15
+ children
16
+ }
17
+ );
18
+ }
19
+ ModalContent.displayName = "ModalContent";
20
+
21
+ export {
22
+ ModalContent
23
+ };
@@ -0,0 +1,28 @@
1
+ // src/components/useMatchesMedia.tsx
2
+ import { useLayoutEffect, useState } from "react";
3
+ var useMatchesMedia = (query) => {
4
+ const [matches, setMatches] = useState(
5
+ () => typeof window !== "undefined" ? window.matchMedia(query).matches : false
6
+ );
7
+ useLayoutEffect(() => {
8
+ const mediaQueryList = window.matchMedia(query);
9
+ const listener = (event) => {
10
+ setMatches(event.matches);
11
+ };
12
+ mediaQueryList.addEventListener("change", listener);
13
+ setMatches(mediaQueryList.matches);
14
+ return () => {
15
+ mediaQueryList.removeEventListener("change", listener);
16
+ };
17
+ }, [query]);
18
+ return matches;
19
+ };
20
+ var useMatchesMobile = () => {
21
+ const isMobile = useMatchesMedia("(width < 48rem)");
22
+ return isMobile;
23
+ };
24
+
25
+ export {
26
+ useMatchesMedia,
27
+ useMatchesMobile
28
+ };