@heliosgraphics/ui 2.0.0-alpha.100

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 (441) hide show
  1. package/LICENSE.md +21 -0
  2. package/components/Alert/Alert.meta.ts +45 -0
  3. package/components/Alert/Alert.module.css +41 -0
  4. package/components/Alert/Alert.tsx +54 -0
  5. package/components/Alert/Alert.types.ts +15 -0
  6. package/components/Alert/index.ts +1 -0
  7. package/components/Breadcrumb/Breadcrumb.meta.ts +17 -0
  8. package/components/Breadcrumb/Breadcrumb.tsx +55 -0
  9. package/components/Breadcrumb/Breadcrumb.types.ts +13 -0
  10. package/components/Breadcrumb/index.ts +2 -0
  11. package/components/Browser/Browser.meta.ts +27 -0
  12. package/components/Browser/Browser.module.css +3 -0
  13. package/components/Browser/Browser.tsx +16 -0
  14. package/components/Browser/Browser.types.ts +9 -0
  15. package/components/Browser/index.ts +1 -0
  16. package/components/Button/Button.meta.ts +46 -0
  17. package/components/Button/Button.module.css +337 -0
  18. package/components/Button/Button.spec.tsx +6 -0
  19. package/components/Button/Button.tsx +207 -0
  20. package/components/Button/Button.types.ts +30 -0
  21. package/components/Button/index.ts +2 -0
  22. package/components/ButtonGroup/ButtonGroup.meta.ts +37 -0
  23. package/components/ButtonGroup/ButtonGroup.module.css +55 -0
  24. package/components/ButtonGroup/ButtonGroup.spec.tsx +6 -0
  25. package/components/ButtonGroup/ButtonGroup.tsx +41 -0
  26. package/components/ButtonGroup/ButtonGroup.types.ts +11 -0
  27. package/components/ButtonGroup/index.ts +2 -0
  28. package/components/Checkbox/Checkbox.meta.ts +54 -0
  29. package/components/Checkbox/Checkbox.module.css +99 -0
  30. package/components/Checkbox/Checkbox.tsx +80 -0
  31. package/components/Checkbox/Checkbox.types.ts +17 -0
  32. package/components/Checkbox/index.ts +1 -0
  33. package/components/Clock/Clock.meta.ts +14 -0
  34. package/components/Clock/Clock.module.css +27 -0
  35. package/components/Clock/Clock.tsx +66 -0
  36. package/components/Clock/Clock.types.ts +1 -0
  37. package/components/Clock/Clock.utils.ts +16 -0
  38. package/components/Clock/index.ts +1 -0
  39. package/components/Column/Column.meta.ts +22 -0
  40. package/components/Column/Column.tsx +21 -0
  41. package/components/Column/Column.types.ts +8 -0
  42. package/components/Column/index.ts +2 -0
  43. package/components/Confirm/Confirm.meta.ts +51 -0
  44. package/components/Confirm/Confirm.tsx +40 -0
  45. package/components/Confirm/Confirm.types.ts +17 -0
  46. package/components/Confirm/index.ts +1 -0
  47. package/components/DatePicker/DatePicker.meta.ts +25 -0
  48. package/components/DatePicker/DatePicker.module.css +72 -0
  49. package/components/DatePicker/DatePicker.tsx +126 -0
  50. package/components/DatePicker/DatePicker.types.ts +8 -0
  51. package/components/DatePicker/DatePicker.utils.ts +53 -0
  52. package/components/DatePicker/index.ts +1 -0
  53. package/components/Debug/Debug.meta.ts +22 -0
  54. package/components/Debug/Debug.module.css +17 -0
  55. package/components/Debug/Debug.tsx +48 -0
  56. package/components/Debug/Debug.types.ts +6 -0
  57. package/components/Debug/Debug.utils.ts +23 -0
  58. package/components/Debug/index.ts +1 -0
  59. package/components/Details/Details.meta.ts +22 -0
  60. package/components/Details/Details.module.css +36 -0
  61. package/components/Details/Details.tsx +21 -0
  62. package/components/Details/Details.types.ts +8 -0
  63. package/components/Details/index.ts +1 -0
  64. package/components/Dialog/Dialog.meta.ts +48 -0
  65. package/components/Dialog/Dialog.module.css +109 -0
  66. package/components/Dialog/Dialog.tsx +100 -0
  67. package/components/Dialog/Dialog.types.ts +13 -0
  68. package/components/Dialog/index.ts +1 -0
  69. package/components/Donut/Donut.meta.ts +25 -0
  70. package/components/Donut/Donut.module.css +8 -0
  71. package/components/Donut/Donut.tsx +63 -0
  72. package/components/Donut/Donut.types.ts +12 -0
  73. package/components/Donut/Donut.utils.ts +11 -0
  74. package/components/Donut/index.ts +2 -0
  75. package/components/Dot/Dot.meta.ts +26 -0
  76. package/components/Dot/Dot.module.css +24 -0
  77. package/components/Dot/Dot.spec.tsx +6 -0
  78. package/components/Dot/Dot.tsx +46 -0
  79. package/components/Dot/Dot.types.ts +8 -0
  80. package/components/Dot/index.ts +1 -0
  81. package/components/Dropdown/Dropdown.meta.ts +30 -0
  82. package/components/Dropdown/Dropdown.module.css +92 -0
  83. package/components/Dropdown/Dropdown.tsx +117 -0
  84. package/components/Dropdown/Dropdown.types.ts +10 -0
  85. package/components/Dropdown/index.ts +2 -0
  86. package/components/Fieldset/Fieldset.meta.ts +18 -0
  87. package/components/Fieldset/Fieldset.module.css +3 -0
  88. package/components/Fieldset/Fieldset.tsx +14 -0
  89. package/components/Fieldset/Fieldset.types.ts +7 -0
  90. package/components/Fieldset/index.ts +1 -0
  91. package/components/Flex/Flex.meta.ts +47 -0
  92. package/components/Flex/Flex.tsx +40 -0
  93. package/components/Flex/Flex.types.ts +38 -0
  94. package/components/Flex/Flex.utils.spec.ts +97 -0
  95. package/components/Flex/Flex.utils.ts +162 -0
  96. package/components/Flex/index.ts +4 -0
  97. package/components/Grid/Grid.meta.ts +22 -0
  98. package/components/Grid/Grid.tsx +17 -0
  99. package/components/Grid/Grid.types.ts +8 -0
  100. package/components/Grid/index.ts +1 -0
  101. package/components/Heading/Heading.meta.ts +23 -0
  102. package/components/Heading/Heading.module.css +19 -0
  103. package/components/Heading/Heading.tsx +69 -0
  104. package/components/Heading/Heading.types.ts +9 -0
  105. package/components/Heading/components/H0/H0.meta.ts +11 -0
  106. package/components/Heading/components/H0/H0.module.css +4 -0
  107. package/components/Heading/components/H0/H0.tsx +12 -0
  108. package/components/Heading/components/H0/H0.types.ts +3 -0
  109. package/components/Heading/components/H0/index.ts +1 -0
  110. package/components/Heading/components/H1/H1.meta.ts +11 -0
  111. package/components/Heading/components/H1/H1.tsx +9 -0
  112. package/components/Heading/components/H1/H1.types.ts +3 -0
  113. package/components/Heading/components/H1/index.ts +1 -0
  114. package/components/Heading/components/H2/H2.meta.ts +11 -0
  115. package/components/Heading/components/H2/H2.tsx +9 -0
  116. package/components/Heading/components/H2/H2.types.ts +3 -0
  117. package/components/Heading/components/H2/index.ts +1 -0
  118. package/components/Heading/components/H3/H3.meta.ts +11 -0
  119. package/components/Heading/components/H3/H3.tsx +9 -0
  120. package/components/Heading/components/H3/H3.types.ts +3 -0
  121. package/components/Heading/components/H3/index.ts +1 -0
  122. package/components/Heading/components/H4/H4.meta.ts +11 -0
  123. package/components/Heading/components/H4/H4.tsx +9 -0
  124. package/components/Heading/components/H4/H4.types.ts +3 -0
  125. package/components/Heading/components/H4/index.ts +1 -0
  126. package/components/Heading/components/H5/H5.meta.ts +11 -0
  127. package/components/Heading/components/H5/H5.tsx +9 -0
  128. package/components/Heading/components/H5/H5.types.ts +3 -0
  129. package/components/Heading/components/H5/index.ts +1 -0
  130. package/components/Heading/components/H6/H6.meta.ts +11 -0
  131. package/components/Heading/components/H6/H6.tsx +9 -0
  132. package/components/Heading/components/H6/H6.types.ts +3 -0
  133. package/components/Heading/components/H6/index.ts +1 -0
  134. package/components/Heading/index.ts +2 -0
  135. package/components/Icon/Icon.meta.ts +28 -0
  136. package/components/Icon/Icon.module.css +22 -0
  137. package/components/Icon/Icon.tsx +32 -0
  138. package/components/Icon/Icon.types.ts +9 -0
  139. package/components/Icon/index.ts +1 -0
  140. package/components/Input/Input.meta.ts +53 -0
  141. package/components/Input/Input.module.css +82 -0
  142. package/components/Input/Input.tsx +124 -0
  143. package/components/Input/Input.types.ts +28 -0
  144. package/components/Input/index.ts +1 -0
  145. package/components/Layout/Layout.meta.ts +19 -0
  146. package/components/Layout/Layout.module.css +7 -0
  147. package/components/Layout/Layout.tsx +33 -0
  148. package/components/Layout/Layout.types.ts +19 -0
  149. package/components/Layout/components/LayoutAside/LayoutAside.meta.ts +15 -0
  150. package/components/Layout/components/LayoutAside/LayoutAside.module.css +40 -0
  151. package/components/Layout/components/LayoutAside/LayoutAside.tsx +27 -0
  152. package/components/Layout/components/LayoutAside/LayoutAside.types.ts +14 -0
  153. package/components/Layout/components/LayoutAside/components/LayoutAsideContent/LayoutAsideContent.meta.ts +15 -0
  154. package/components/Layout/components/LayoutAside/components/LayoutAsideContent/LayoutAsideContent.module.css +5 -0
  155. package/components/Layout/components/LayoutAside/components/LayoutAsideContent/LayoutAsideContent.tsx +19 -0
  156. package/components/Layout/components/LayoutAside/components/LayoutAsideContent/LayoutAsideContent.types.ts +5 -0
  157. package/components/Layout/components/LayoutAside/components/LayoutAsideContent/index.ts +1 -0
  158. package/components/Layout/components/LayoutAside/components/LayoutAsideFooter/LayoutAsideFooter.meta.ts +15 -0
  159. package/components/Layout/components/LayoutAside/components/LayoutAsideFooter/LayoutAsideFooter.module.css +10 -0
  160. package/components/Layout/components/LayoutAside/components/LayoutAsideFooter/LayoutAsideFooter.tsx +19 -0
  161. package/components/Layout/components/LayoutAside/components/LayoutAsideFooter/LayoutAsideFooter.types.ts +5 -0
  162. package/components/Layout/components/LayoutAside/components/LayoutAsideFooter/index.ts +1 -0
  163. package/components/Layout/components/LayoutAside/components/LayoutAsideToggle/LayoutAsideToggle.meta.ts +14 -0
  164. package/components/Layout/components/LayoutAside/components/LayoutAsideToggle/LayoutAsideToggle.tsx +31 -0
  165. package/components/Layout/components/LayoutAside/components/LayoutAsideToggle/LayoutAsideToggle.types.ts +1 -0
  166. package/components/Layout/components/LayoutAside/components/LayoutAsideToggle/index.ts +1 -0
  167. package/components/Layout/components/LayoutAside/index.ts +13 -0
  168. package/components/Layout/components/LayoutMain/LayoutMain.meta.ts +15 -0
  169. package/components/Layout/components/LayoutMain/LayoutMain.module.css +15 -0
  170. package/components/Layout/components/LayoutMain/LayoutMain.tsx +23 -0
  171. package/components/Layout/components/LayoutMain/LayoutMain.types.ts +12 -0
  172. package/components/Layout/components/LayoutMain/components/LayoutMainContent/LayoutMainContent.meta.ts +15 -0
  173. package/components/Layout/components/LayoutMain/components/LayoutMainContent/LayoutMainContent.module.css +4 -0
  174. package/components/Layout/components/LayoutMain/components/LayoutMainContent/LayoutMainContent.tsx +49 -0
  175. package/components/Layout/components/LayoutMain/components/LayoutMainContent/LayoutMainContent.types.ts +5 -0
  176. package/components/Layout/components/LayoutMain/components/LayoutMainContent/LayoutMainContent.utils.ts +65 -0
  177. package/components/Layout/components/LayoutMain/components/LayoutMainContent/index.ts +1 -0
  178. package/components/Layout/components/LayoutMain/index.ts +9 -0
  179. package/components/Layout/components/LayoutNavigation/LayoutNavigation.meta.ts +15 -0
  180. package/components/Layout/components/LayoutNavigation/LayoutNavigation.module.css +12 -0
  181. package/components/Layout/components/LayoutNavigation/LayoutNavigation.tsx +24 -0
  182. package/components/Layout/components/LayoutNavigation/LayoutNavigation.types.ts +5 -0
  183. package/components/Layout/components/LayoutNavigation/index.ts +1 -0
  184. package/components/Layout/components/LayoutSubNavigation/LayoutSubNavigation.meta.ts +15 -0
  185. package/components/Layout/components/LayoutSubNavigation/LayoutSubNavigation.module.css +12 -0
  186. package/components/Layout/components/LayoutSubNavigation/LayoutSubNavigation.tsx +24 -0
  187. package/components/Layout/components/LayoutSubNavigation/LayoutSubNavigation.types.ts +5 -0
  188. package/components/Layout/components/LayoutSubNavigation/index.ts +1 -0
  189. package/components/Layout/index.ts +17 -0
  190. package/components/Loading/Loading.meta.ts +20 -0
  191. package/components/Loading/Loading.module.css +65 -0
  192. package/components/Loading/Loading.tsx +57 -0
  193. package/components/Loading/Loading.types.ts +7 -0
  194. package/components/Loading/index.ts +1 -0
  195. package/components/Markdown/Markdown.meta.ts +28 -0
  196. package/components/Markdown/Markdown.module.css +274 -0
  197. package/components/Markdown/Markdown.tsx +27 -0
  198. package/components/Markdown/Markdown.types.ts +7 -0
  199. package/components/Markdown/Markdown.utils.spec.ts +11 -0
  200. package/components/Markdown/Markdown.utils.ts +10 -0
  201. package/components/Markdown/index.ts +1 -0
  202. package/components/Masonry/Masonry.meta.ts +24 -0
  203. package/components/Masonry/Masonry.tsx +49 -0
  204. package/components/Masonry/Masonry.types.ts +10 -0
  205. package/components/Masonry/index.ts +1 -0
  206. package/components/Menu/Menu.meta.ts +15 -0
  207. package/components/Menu/Menu.tsx +18 -0
  208. package/components/Menu/Menu.types.ts +15 -0
  209. package/components/Menu/components/MenuCategory/MenuCategory.meta.ts +32 -0
  210. package/components/Menu/components/MenuCategory/MenuCategory.module.css +73 -0
  211. package/components/Menu/components/MenuCategory/MenuCategory.tsx +88 -0
  212. package/components/Menu/components/MenuCategory/MenuCategory.types.ts +10 -0
  213. package/components/Menu/components/MenuCategory/index.ts +1 -0
  214. package/components/Menu/components/MenuFilter/MenuFilter.meta.ts +24 -0
  215. package/components/Menu/components/MenuFilter/MenuFilter.module.css +11 -0
  216. package/components/Menu/components/MenuFilter/MenuFilter.tsx +25 -0
  217. package/components/Menu/components/MenuFilter/MenuFilter.types.ts +7 -0
  218. package/components/Menu/components/MenuFilter/index.ts +1 -0
  219. package/components/Menu/components/MenuItem/MenuItem.meta.ts +42 -0
  220. package/components/Menu/components/MenuItem/MenuItem.module.css +37 -0
  221. package/components/Menu/components/MenuItem/MenuItem.tsx +73 -0
  222. package/components/Menu/components/MenuItem/MenuItem.types.ts +12 -0
  223. package/components/Menu/components/MenuItem/index.ts +1 -0
  224. package/components/Menu/index.ts +14 -0
  225. package/components/Overlay/Overlay.meta.ts +25 -0
  226. package/components/Overlay/Overlay.module.css +85 -0
  227. package/components/Overlay/Overlay.tsx +47 -0
  228. package/components/Overlay/Overlay.types.ts +9 -0
  229. package/components/Overlay/index.ts +1 -0
  230. package/components/Pie/Pie.meta.ts +23 -0
  231. package/components/Pie/Pie.module.css +5 -0
  232. package/components/Pie/Pie.tsx +47 -0
  233. package/components/Pie/Pie.types.ts +12 -0
  234. package/components/Pie/index.ts +2 -0
  235. package/components/Pill/Pill.meta.ts +64 -0
  236. package/components/Pill/Pill.module.css +64 -0
  237. package/components/Pill/Pill.tsx +89 -0
  238. package/components/Pill/Pill.types.ts +19 -0
  239. package/components/Pill/index.ts +1 -0
  240. package/components/Placeholder/Placeholder.meta.ts +25 -0
  241. package/components/Placeholder/Placeholder.module.css +3 -0
  242. package/components/Placeholder/Placeholder.tsx +24 -0
  243. package/components/Placeholder/Placeholder.types.ts +7 -0
  244. package/components/Placeholder/index.ts +1 -0
  245. package/components/Progress/Progress.meta.ts +35 -0
  246. package/components/Progress/Progress.module.css +22 -0
  247. package/components/Progress/Progress.tsx +30 -0
  248. package/components/Progress/Progress.types.ts +9 -0
  249. package/components/Progress/index.ts +1 -0
  250. package/components/Radio/Radio.meta.ts +21 -0
  251. package/components/Radio/Radio.module.css +101 -0
  252. package/components/Radio/Radio.tsx +73 -0
  253. package/components/Radio/Radio.types.ts +8 -0
  254. package/components/Radio/index.ts +1 -0
  255. package/components/Range/Range.meta.ts +26 -0
  256. package/components/Range/Range.module.css +68 -0
  257. package/components/Range/Range.tsx +49 -0
  258. package/components/Range/Range.types.ts +13 -0
  259. package/components/Range/index.ts +1 -0
  260. package/components/Segments/Segments.meta.ts +27 -0
  261. package/components/Segments/Segments.module.css +46 -0
  262. package/components/Segments/Segments.tsx +79 -0
  263. package/components/Segments/Segments.types.ts +15 -0
  264. package/components/Segments/Segments.utils.ts +19 -0
  265. package/components/Segments/components/SegmentButton/SegmentButton.meta.ts +32 -0
  266. package/components/Segments/components/SegmentButton/SegmentButton.module.css +34 -0
  267. package/components/Segments/components/SegmentButton/SegmentButton.tsx +61 -0
  268. package/components/Segments/components/SegmentButton/SegmentButton.types.ts +10 -0
  269. package/components/Segments/components/SegmentButton/index.ts +1 -0
  270. package/components/Segments/index.ts +9 -0
  271. package/components/Select/Select.meta.ts +43 -0
  272. package/components/Select/Select.module.css +76 -0
  273. package/components/Select/Select.tsx +53 -0
  274. package/components/Select/Select.types.ts +18 -0
  275. package/components/Select/index.ts +2 -0
  276. package/components/Separator/Separator.meta.ts +69 -0
  277. package/components/Separator/Separator.module.css +11 -0
  278. package/components/Separator/Separator.spec.tsx +6 -0
  279. package/components/Separator/Separator.tsx +36 -0
  280. package/components/Separator/Separator.types.ts +10 -0
  281. package/components/Separator/components/HRMarkup/HRMarkup.meta.ts +15 -0
  282. package/components/Separator/components/HRMarkup/HRMarkup.tsx +10 -0
  283. package/components/Separator/components/HRMarkup/HRMarkup.types.ts +5 -0
  284. package/components/Separator/components/HRMarkup/index.ts +1 -0
  285. package/components/Separator/components/HorizontalSeparator/HorizontalSeparator.meta.ts +22 -0
  286. package/components/Separator/components/HorizontalSeparator/HorizontalSeparator.module.css +22 -0
  287. package/components/Separator/components/HorizontalSeparator/HorizontalSeparator.tsx +22 -0
  288. package/components/Separator/components/HorizontalSeparator/HorizontalSeparator.types.ts +3 -0
  289. package/components/Separator/components/HorizontalSeparator/index.ts +1 -0
  290. package/components/Separator/components/VerticalSeparator/VerticalSeparator.meta.ts +22 -0
  291. package/components/Separator/components/VerticalSeparator/VerticalSeparator.module.css +20 -0
  292. package/components/Separator/components/VerticalSeparator/VerticalSeparator.tsx +22 -0
  293. package/components/Separator/components/VerticalSeparator/VerticalSeparator.types.ts +3 -0
  294. package/components/Separator/components/VerticalSeparator/index.ts +1 -0
  295. package/components/Separator/index.ts +1 -0
  296. package/components/Setup/Setup.global.css +14 -0
  297. package/components/Setup/Setup.meta.ts +22 -0
  298. package/components/Setup/Setup.tsx +53 -0
  299. package/components/Setup/Setup.types.ts +13 -0
  300. package/components/Setup/Setup.utils.ts +61 -0
  301. package/components/Setup/css/core.colors-helpers.css +322 -0
  302. package/components/Setup/css/core.colors.css +428 -0
  303. package/components/Setup/css/core.scale.css +49 -0
  304. package/components/Setup/css/core.setup.css +28 -0
  305. package/components/Setup/css/core.typography.css +57 -0
  306. package/components/Setup/css/feat.atomics.css +126 -0
  307. package/components/Setup/css/feat.markdown.css +39 -0
  308. package/components/Setup/css/feat.responsive.css +590 -0
  309. package/components/Setup/index.ts +1 -0
  310. package/components/Shimmer/Shimmer.meta.ts +32 -0
  311. package/components/Shimmer/Shimmer.module.css +24 -0
  312. package/components/Shimmer/Shimmer.tsx +31 -0
  313. package/components/Shimmer/Shimmer.types.ts +7 -0
  314. package/components/Shimmer/index.ts +1 -0
  315. package/components/Slider/Slider.meta.ts +22 -0
  316. package/components/Slider/Slider.module.css +49 -0
  317. package/components/Slider/Slider.tsx +18 -0
  318. package/components/Slider/Slider.types.ts +6 -0
  319. package/components/Slider/index.ts +1 -0
  320. package/components/Spacer/Spacer.meta.ts +17 -0
  321. package/components/Spacer/Spacer.tsx +8 -0
  322. package/components/Spacer/Spacer.types.ts +3 -0
  323. package/components/Spacer/index.ts +1 -0
  324. package/components/Table/Table.meta.ts +36 -0
  325. package/components/Table/Table.module.css +53 -0
  326. package/components/Table/Table.tsx +21 -0
  327. package/components/Table/Table.types.ts +8 -0
  328. package/components/Table/index.ts +1 -0
  329. package/components/Tabs/Tabs.meta.ts +24 -0
  330. package/components/Tabs/Tabs.module.css +43 -0
  331. package/components/Tabs/Tabs.tsx +63 -0
  332. package/components/Tabs/Tabs.types.ts +14 -0
  333. package/components/Tabs/index.ts +1 -0
  334. package/components/Text/Text.meta.ts +38 -0
  335. package/components/Text/Text.module.css +41 -0
  336. package/components/Text/Text.tsx +59 -0
  337. package/components/Text/Text.types.ts +20 -0
  338. package/components/Text/Text.utils.spec.ts +13 -0
  339. package/components/Text/Text.utils.ts +50 -0
  340. package/components/Text/components/Div/Div.meta.ts +11 -0
  341. package/components/Text/components/Div/Div.tsx +9 -0
  342. package/components/Text/components/Div/Div.types.ts +3 -0
  343. package/components/Text/components/Div/index.ts +1 -0
  344. package/components/Text/components/Micro/Micro.meta.ts +11 -0
  345. package/components/Text/components/Micro/Micro.tsx +9 -0
  346. package/components/Text/components/Micro/Micro.types.ts +3 -0
  347. package/components/Text/components/Micro/index.ts +1 -0
  348. package/components/Text/components/P/P.meta.ts +11 -0
  349. package/components/Text/components/P/P.tsx +9 -0
  350. package/components/Text/components/P/P.types.ts +3 -0
  351. package/components/Text/components/P/index.ts +1 -0
  352. package/components/Text/components/Small/Small.meta.ts +11 -0
  353. package/components/Text/components/Small/Small.tsx +9 -0
  354. package/components/Text/components/Small/Small.types.ts +3 -0
  355. package/components/Text/components/Small/index.ts +1 -0
  356. package/components/Text/components/Tiny/Tiny.meta.ts +11 -0
  357. package/components/Text/components/Tiny/Tiny.tsx +9 -0
  358. package/components/Text/components/Tiny/Tiny.types.ts +3 -0
  359. package/components/Text/components/Tiny/index.ts +1 -0
  360. package/components/Text/index.ts +2 -0
  361. package/components/Textarea/Textarea.meta.ts +26 -0
  362. package/components/Textarea/Textarea.module.css +52 -0
  363. package/components/Textarea/Textarea.tsx +68 -0
  364. package/components/Textarea/Textarea.types.ts +16 -0
  365. package/components/Textarea/index.ts +1 -0
  366. package/components/Tile/Tile.meta.ts +24 -0
  367. package/components/Tile/Tile.module.css +35 -0
  368. package/components/Tile/Tile.tsx +70 -0
  369. package/components/Tile/Tile.types.ts +16 -0
  370. package/components/Tile/index.ts +1 -0
  371. package/components/Timestamp/Timestamp.meta.ts +22 -0
  372. package/components/Timestamp/Timestamp.tsx +21 -0
  373. package/components/Timestamp/Timestamp.types.ts +6 -0
  374. package/components/Timestamp/index.ts +1 -0
  375. package/components/Toggle/Toggle.meta.ts +40 -0
  376. package/components/Toggle/Toggle.module.css +137 -0
  377. package/components/Toggle/Toggle.tsx +62 -0
  378. package/components/Toggle/Toggle.types.ts +9 -0
  379. package/components/Toggle/index.ts +1 -0
  380. package/components/Tooltip/Tooltip.meta.ts +78 -0
  381. package/components/Tooltip/Tooltip.module.css +63 -0
  382. package/components/Tooltip/Tooltip.tsx +115 -0
  383. package/components/Tooltip/Tooltip.types.ts +31 -0
  384. package/components/Tooltip/Tooltip.utils.ts +14 -0
  385. package/components/Tooltip/components/TooltipContent/TooltipContent.meta.ts +12 -0
  386. package/components/Tooltip/components/TooltipContent/TooltipContent.tsx +27 -0
  387. package/components/Tooltip/components/TooltipContent/TooltipContent.types.ts +3 -0
  388. package/components/Tooltip/components/TooltipContent/index.ts +1 -0
  389. package/components/Tooltip/components/TooltipTrigger/TooltipTrigger.meta.ts +12 -0
  390. package/components/Tooltip/components/TooltipTrigger/TooltipTrigger.tsx +19 -0
  391. package/components/Tooltip/components/TooltipTrigger/TooltipTrigger.types.ts +3 -0
  392. package/components/Tooltip/components/TooltipTrigger/index.ts +1 -0
  393. package/components/Tooltip/index.ts +6 -0
  394. package/components/shared/InputLabel/InputLabel.meta.ts +22 -0
  395. package/components/shared/InputLabel/InputLabel.module.css +14 -0
  396. package/components/shared/InputLabel/InputLabel.tsx +20 -0
  397. package/components/shared/InputLabel/InputLabel.types.ts +6 -0
  398. package/components/shared/InputLabel/index.ts +1 -0
  399. package/components/shared/ResultList/ResultList.meta.ts +20 -0
  400. package/components/shared/ResultList/ResultList.module.css +71 -0
  401. package/components/shared/ResultList/ResultList.tsx +67 -0
  402. package/components/shared/ResultList/ResultList.types.ts +19 -0
  403. package/components/shared/ResultList/index.ts +2 -0
  404. package/constants/animations.ts +5 -0
  405. package/constants/colors.ts +14 -0
  406. package/constants/components.ts +101 -0
  407. package/constants/emphasis.ts +3 -0
  408. package/constants/hooks.ts +1 -0
  409. package/constants/icons.ts +4 -0
  410. package/constants/intentions.ts +28 -0
  411. package/constants/meta.ts +60 -0
  412. package/constants/positions.ts +3 -0
  413. package/constants/scale.ts +5 -0
  414. package/constants/scope.ts +151 -0
  415. package/contexts/LayoutContext/LayoutContext.tsx +93 -0
  416. package/contexts/LayoutContext/LayoutContext.types.ts +11 -0
  417. package/contexts/LayoutContext/index.ts +2 -0
  418. package/globals.d.ts +14 -0
  419. package/hooks/useChatScroll.tsx +98 -0
  420. package/hooks/useDebounce.tsx +19 -0
  421. package/hooks/useIntersection.tsx +19 -0
  422. package/hooks/useInterval.tsx +27 -0
  423. package/hooks/useKeyPress.tsx +33 -0
  424. package/hooks/useLayoutContext.tsx +23 -0
  425. package/hooks/usePrevious.tsx +13 -0
  426. package/hooks/usePrint.tsx +31 -0
  427. package/hooks/useResizeObserver.tsx +38 -0
  428. package/hooks/useTheme.tsx +40 -0
  429. package/index.ts +96 -0
  430. package/package.json +67 -0
  431. package/types/colors.ts +13 -0
  432. package/types/icons.ts +3 -0
  433. package/types/intentions.ts +13 -0
  434. package/types/meta.ts +24 -0
  435. package/types/positions.ts +3 -0
  436. package/types/scale.ts +29 -0
  437. package/types/scope.ts +67 -0
  438. package/types/themes.ts +2 -0
  439. package/types/typography.ts +1 -0
  440. package/utils/colors.ts +11 -0
  441. package/utils/date.ts +54 -0
package/components/Setup/css/feat.responsive.css ADDED
@@ -0,0 +1,590 @@
1
+ @layer helios {
2
+ @media (min-width: 641px) and (max-width: 960px) {
3
+ .tablet\:hidden {
4
+ display: none !important;
5
+ }
6
+ .tablet\:p-0 {
7
+ padding: 0 !important;
8
+ }
9
+ .tablet\:p-1 {
10
+ padding: var(--space-1) !important;
11
+ }
12
+ .tablet\:p-2 {
13
+ padding: var(--space-2) !important;
14
+ }
15
+ .tablet\:p-3 {
16
+ padding: var(--space-3) !important;
17
+ }
18
+ .tablet\:p-4 {
19
+ padding: var(--space-4) !important;
20
+ }
21
+ .tablet\:p-5 {
22
+ padding: var(--space-5) !important;
23
+ }
24
+ .tablet\:p-6 {
25
+ padding: var(--space-6) !important;
26
+ }
27
+ .tablet\:p-7 {
28
+ padding: var(--space-7) !important;
29
+ }
30
+ .tablet\:p-8 {
31
+ padding: var(--space-8) !important;
32
+ }
33
+ .tablet\:p-9 {
34
+ padding: var(--space-9) !important;
35
+ }
36
+ .tablet\:p-10 {
37
+ padding: var(--space-10) !important;
38
+ }
39
+ .tablet\:p-11 {
40
+ padding: var(--space-11) !important;
41
+ }
42
+ .tablet\:p-12 {
43
+ padding: var(--space-12) !important;
44
+ }
45
+ .tablet\:p-13 {
46
+ padding: var(--space-13) !important;
47
+ }
48
+ .tablet\:p-14 {
49
+ padding: var(--space-14) !important;
50
+ }
51
+ .tablet\:p-15 {
52
+ padding: var(--space-15) !important;
53
+ }
54
+ .tablet\:p-16 {
55
+ padding: var(--space-16) !important;
56
+ }
57
+ .tablet\:p-24 {
58
+ padding: var(--space-24) !important;
59
+ }
60
+ .tablet\:p-32 {
61
+ padding: var(--space-32) !important;
62
+ }
63
+ .tablet\:p-40 {
64
+ padding: var(--space-40) !important;
65
+ }
66
+ .tablet\:p-48 {
67
+ padding: var(--space-48) !important;
68
+ }
69
+
70
+ .tablet\:radius-none {
71
+ border-radius: 0 !important;
72
+ }
73
+ .tablet\:radius-xs {
74
+ border-radius: var(--radius-xs) !important;
75
+ }
76
+ .tablet\:radius-sm {
77
+ border-radius: var(--radius-sm) !important;
78
+ }
79
+ .tablet\:radius-md {
80
+ border-radius: var(--radius-md) !important;
81
+ }
82
+ .tablet\:radius-lg {
83
+ border-radius: var(--radius-lg) !important;
84
+ }
85
+ .tablet\:radius-xl {
86
+ border-radius: var(--radius-xl) !important;
87
+ }
88
+ .tablet\:radius-100 {
89
+ border-radius: 100% !important;
90
+ }
91
+ .tablet\:radius-max {
92
+ border-radius: 9999px !important;
93
+ }
94
+
95
+ .tablet\:gap-0 {
96
+ gap: 0 !important;
97
+ }
98
+ .tablet\:gap-px {
99
+ gap: var(--space-px) !important;
100
+ }
101
+ .tablet\:gap-1 {
102
+ gap: var(--space-1) !important;
103
+ }
104
+ .tablet\:gap-2 {
105
+ gap: var(--space-2) !important;
106
+ }
107
+ .tablet\:gap-3 {
108
+ gap: var(--space-3) !important;
109
+ }
110
+ .tablet\:gap-4 {
111
+ gap: var(--space-4) !important;
112
+ }
113
+ .tablet\:gap-5 {
114
+ gap: var(--space-5) !important;
115
+ }
116
+ .tablet\:gap-6 {
117
+ gap: var(--space-6) !important;
118
+ }
119
+ .tablet\:gap-7 {
120
+ gap: var(--space-7) !important;
121
+ }
122
+ .tablet\:gap-8 {
123
+ gap: var(--space-8) !important;
124
+ }
125
+ .tablet\:gap-9 {
126
+ gap: var(--space-9) !important;
127
+ }
128
+ .tablet\:gap-10 {
129
+ gap: var(--space-10) !important;
130
+ }
131
+ .tablet\:gap-11 {
132
+ gap: var(--space-11) !important;
133
+ }
134
+ .tablet\:gap-12 {
135
+ gap: var(--space-12) !important;
136
+ }
137
+ .tablet\:gap-13 {
138
+ gap: var(--space-13) !important;
139
+ }
140
+ .tablet\:gap-14 {
141
+ gap: var(--space-14) !important;
142
+ }
143
+ .tablet\:gap-15 {
144
+ gap: var(--space-15) !important;
145
+ }
146
+ .tablet\:gap-16 {
147
+ gap: var(--space-16) !important;
148
+ }
149
+ .tablet\:gap-24 {
150
+ gap: var(--space-24) !important;
151
+ }
152
+ .tablet\:gap-32 {
153
+ gap: var(--space-32) !important;
154
+ }
155
+ .tablet\:gap-40 {
156
+ gap: var(--space-40) !important;
157
+ }
158
+ .tablet\:gap-48 {
159
+ gap: var(--space-48) !important;
160
+ }
161
+
162
+ .tablet\:px-0 {
163
+ padding-inline: 0 !important;
164
+ }
165
+ .tablet\:px-px {
166
+ padding-inline: var(--space-px) !important;
167
+ }
168
+ .tablet\:px-1 {
169
+ padding-inline: var(--space-1) !important;
170
+ }
171
+ .tablet\:px-2 {
172
+ padding-inline: var(--space-2) !important;
173
+ }
174
+ .tablet\:px-3 {
175
+ padding-inline: var(--space-3) !important;
176
+ }
177
+ .tablet\:px-4 {
178
+ padding-inline: var(--space-4) !important;
179
+ }
180
+ .tablet\:px-5 {
181
+ padding-inline: var(--space-5) !important;
182
+ }
183
+ .tablet\:px-6 {
184
+ padding-inline: var(--space-6) !important;
185
+ }
186
+ .tablet\:px-7 {
187
+ padding-inline: var(--space-7) !important;
188
+ }
189
+ .tablet\:px-8 {
190
+ padding-inline: var(--space-8) !important;
191
+ }
192
+ .tablet\:px-9 {
193
+ padding-inline: var(--space-9) !important;
194
+ }
195
+ .tablet\:px-10 {
196
+ padding-inline: var(--space-10) !important;
197
+ }
198
+ .tablet\:px-11 {
199
+ padding-inline: var(--space-11) !important;
200
+ }
201
+ .tablet\:px-12 {
202
+ padding-inline: var(--space-12) !important;
203
+ }
204
+ .tablet\:px-13 {
205
+ padding-inline: var(--space-13) !important;
206
+ }
207
+ .tablet\:px-14 {
208
+ padding-inline: var(--space-14) !important;
209
+ }
210
+ .tablet\:px-15 {
211
+ padding-inline: var(--space-15) !important;
212
+ }
213
+ .tablet\:px-16 {
214
+ padding-inline: var(--space-16) !important;
215
+ }
216
+ .tablet\:px-24 {
217
+ padding-inline: var(--space-24) !important;
218
+ }
219
+ .tablet\:px-32 {
220
+ padding-inline: var(--space-32) !important;
221
+ }
222
+ .tablet\:px-40 {
223
+ padding-inline: var(--space-40) !important;
224
+ }
225
+ .tablet\:px-48 {
226
+ padding-inline: var(--space-48) !important;
227
+ }
228
+
229
+ .tablet\:py-0 {
230
+ padding-block: 0 !important;
231
+ }
232
+ .tablet\:py-px {
233
+ padding-block: var(--space-px) !important;
234
+ }
235
+ .tablet\:py-1 {
236
+ padding-block: var(--space-1) !important;
237
+ }
238
+ .tablet\:py-2 {
239
+ padding-block: var(--space-2) !important;
240
+ }
241
+ .tablet\:py-3 {
242
+ padding-block: var(--space-3) !important;
243
+ }
244
+ .tablet\:py-4 {
245
+ padding-block: var(--space-4) !important;
246
+ }
247
+ .tablet\:py-5 {
248
+ padding-block: var(--space-5) !important;
249
+ }
250
+ .tablet\:py-6 {
251
+ padding-block: var(--space-6) !important;
252
+ }
253
+ .tablet\:py-7 {
254
+ padding-block: var(--space-7) !important;
255
+ }
256
+ .tablet\:py-8 {
257
+ padding-block: var(--space-8) !important;
258
+ }
259
+ .tablet\:py-9 {
260
+ padding-block: var(--space-9) !important;
261
+ }
262
+ .tablet\:py-10 {
263
+ padding-block: var(--space-10) !important;
264
+ }
265
+ .tablet\:py-11 {
266
+ padding-block: var(--space-11) !important;
267
+ }
268
+ .tablet\:py-12 {
269
+ padding-block: var(--space-12) !important;
270
+ }
271
+ .tablet\:py-13 {
272
+ padding-block: var(--space-13) !important;
273
+ }
274
+ .tablet\:py-14 {
275
+ padding-block: var(--space-14) !important;
276
+ }
277
+ .tablet\:py-15 {
278
+ padding-block: var(--space-15) !important;
279
+ }
280
+ .tablet\:py-16 {
281
+ padding-block: var(--space-16) !important;
282
+ }
283
+ .tablet\:py-24 {
284
+ padding-block: var(--space-24) !important;
285
+ }
286
+ .tablet\:py-32 {
287
+ padding-block: var(--space-32) !important;
288
+ }
289
+ .tablet\:py-40 {
290
+ padding-block: var(--space-40) !important;
291
+ }
292
+ .tablet\:py-48 {
293
+ padding-block: var(--space-48) !important;
294
+ }
295
+ }
296
+
297
+ @media (min-width: 0) and (max-width: 640px) {
298
+ .mobile\:hidden {
299
+ display: none !important;
300
+ }
301
+ .mobile\:p-0 {
302
+ padding: 0 !important;
303
+ }
304
+ .mobile\:p-1 {
305
+ padding: var(--space-1) !important;
306
+ }
307
+ .mobile\:p-2 {
308
+ padding: var(--space-2) !important;
309
+ }
310
+ .mobile\:p-3 {
311
+ padding: var(--space-3) !important;
312
+ }
313
+ .mobile\:p-4 {
314
+ padding: var(--space-4) !important;
315
+ }
316
+ .mobile\:p-5 {
317
+ padding: var(--space-5) !important;
318
+ }
319
+ .mobile\:p-6 {
320
+ padding: var(--space-6) !important;
321
+ }
322
+ .mobile\:p-7 {
323
+ padding: var(--space-7) !important;
324
+ }
325
+ .mobile\:p-8 {
326
+ padding: var(--space-8) !important;
327
+ }
328
+ .mobile\:p-9 {
329
+ padding: var(--space-9) !important;
330
+ }
331
+ .mobile\:p-10 {
332
+ padding: var(--space-10) !important;
333
+ }
334
+ .mobile\:p-11 {
335
+ padding: var(--space-11) !important;
336
+ }
337
+ .mobile\:p-12 {
338
+ padding: var(--space-12) !important;
339
+ }
340
+ .mobile\:p-13 {
341
+ padding: var(--space-13) !important;
342
+ }
343
+ .mobile\:p-14 {
344
+ padding: var(--space-14) !important;
345
+ }
346
+ .mobile\:p-15 {
347
+ padding: var(--space-15) !important;
348
+ }
349
+ .mobile\:p-16 {
350
+ padding: var(--space-16) !important;
351
+ }
352
+ .mobile\:p-24 {
353
+ padding: var(--space-24) !important;
354
+ }
355
+ .mobile\:p-32 {
356
+ padding: var(--space-32) !important;
357
+ }
358
+ .mobile\:p-40 {
359
+ padding: var(--space-40) !important;
360
+ }
361
+ .mobile\:p-48 {
362
+ padding: var(--space-48) !important;
363
+ }
364
+ .mobile\:radius-none {
365
+ border-radius: 0 !important;
366
+ }
367
+ .mobile\:radius-xs {
368
+ border-radius: var(--radius-xs) !important;
369
+ }
370
+ .mobile\:radius-sm {
371
+ border-radius: var(--radius-sm) !important;
372
+ }
373
+ .mobile\:radius-md {
374
+ border-radius: var(--radius-md) !important;
375
+ }
376
+ .mobile\:radius-lg {
377
+ border-radius: var(--radius-lg) !important;
378
+ }
379
+ .mobile\:radius-xl {
380
+ border-radius: var(--radius-xl) !important;
381
+ }
382
+ .mobile\:radius-100 {
383
+ border-radius: 100% !important;
384
+ }
385
+ .mobile\:radius-max {
386
+ border-radius: 9999px !important;
387
+ }
388
+
389
+ .mobile\:gap-0 {
390
+ gap: 0 !important;
391
+ }
392
+ .mobile\:gap-px {
393
+ gap: var(--space-px) !important;
394
+ }
395
+ .mobile\:gap-1 {
396
+ gap: var(--space-1) !important;
397
+ }
398
+ .mobile\:gap-2 {
399
+ gap: var(--space-2) !important;
400
+ }
401
+ .mobile\:gap-3 {
402
+ gap: var(--space-3) !important;
403
+ }
404
+ .mobile\:gap-4 {
405
+ gap: var(--space-4) !important;
406
+ }
407
+ .mobile\:gap-5 {
408
+ gap: var(--space-5) !important;
409
+ }
410
+ .mobile\:gap-6 {
411
+ gap: var(--space-6) !important;
412
+ }
413
+ .mobile\:gap-7 {
414
+ gap: var(--space-7) !important;
415
+ }
416
+ .mobile\:gap-8 {
417
+ gap: var(--space-8) !important;
418
+ }
419
+ .mobile\:gap-9 {
420
+ gap: var(--space-9) !important;
421
+ }
422
+ .mobile\:gap-10 {
423
+ gap: var(--space-10) !important;
424
+ }
425
+ .mobile\:gap-11 {
426
+ gap: var(--space-11) !important;
427
+ }
428
+ .mobile\:gap-12 {
429
+ gap: var(--space-12) !important;
430
+ }
431
+ .mobile\:gap-13 {
432
+ gap: var(--space-13) !important;
433
+ }
434
+ .mobile\:gap-14 {
435
+ gap: var(--space-14) !important;
436
+ }
437
+ .mobile\:gap-15 {
438
+ gap: var(--space-15) !important;
439
+ }
440
+ .mobile\:gap-16 {
441
+ gap: var(--space-16) !important;
442
+ }
443
+ .mobile\:gap-24 {
444
+ gap: var(--space-24) !important;
445
+ }
446
+ .mobile\:gap-32 {
447
+ gap: var(--space-32) !important;
448
+ }
449
+ .mobile\:gap-40 {
450
+ gap: var(--space-40) !important;
451
+ }
452
+ .mobile\:gap-48 {
453
+ gap: var(--space-48) !important;
454
+ }
455
+
456
+ .mobile\:px-0 {
457
+ padding-inline: 0 !important;
458
+ }
459
+ .mobile\:px-px {
460
+ padding-inline: var(--space-px) !important;
461
+ }
462
+ .mobile\:px-1 {
463
+ padding-inline: var(--space-1) !important;
464
+ }
465
+ .mobile\:px-2 {
466
+ padding-inline: var(--space-2) !important;
467
+ }
468
+ .mobile\:px-3 {
469
+ padding-inline: var(--space-3) !important;
470
+ }
471
+ .mobile\:px-4 {
472
+ padding-inline: var(--space-4) !important;
473
+ }
474
+ .mobile\:px-5 {
475
+ padding-inline: var(--space-5) !important;
476
+ }
477
+ .mobile\:px-6 {
478
+ padding-inline: var(--space-6) !important;
479
+ }
480
+ .mobile\:px-7 {
481
+ padding-inline: var(--space-7) !important;
482
+ }
483
+ .mobile\:px-8 {
484
+ padding-inline: var(--space-8) !important;
485
+ }
486
+ .mobile\:px-9 {
487
+ padding-inline: var(--space-9) !important;
488
+ }
489
+ .mobile\:px-10 {
490
+ padding-inline: var(--space-10) !important;
491
+ }
492
+ .mobile\:px-11 {
493
+ padding-inline: var(--space-11) !important;
494
+ }
495
+ .mobile\:px-12 {
496
+ padding-inline: var(--space-12) !important;
497
+ }
498
+ .mobile\:px-13 {
499
+ padding-inline: var(--space-13) !important;
500
+ }
501
+ .mobile\:px-14 {
502
+ padding-inline: var(--space-14) !important;
503
+ }
504
+ .mobile\:px-15 {
505
+ padding-inline: var(--space-15) !important;
506
+ }
507
+ .mobile\:px-16 {
508
+ padding-inline: var(--space-16) !important;
509
+ }
510
+ .mobile\:px-24 {
511
+ padding-inline: var(--space-24) !important;
512
+ }
513
+ .mobile\:px-32 {
514
+ padding-inline: var(--space-32) !important;
515
+ }
516
+ .mobile\:px-40 {
517
+ padding-inline: var(--space-40) !important;
518
+ }
519
+ .mobile\:px-48 {
520
+ padding-inline: var(--space-48) !important;
521
+ }
522
+
523
+ .mobile\:py-0 {
524
+ padding-block: 0 !important;
525
+ }
526
+ .mobile\:py-px {
527
+ padding-block: var(--space-px) !important;
528
+ }
529
+ .mobile\:py-1 {
530
+ padding-block: var(--space-1) !important;
531
+ }
532
+ .mobile\:py-2 {
533
+ padding-block: var(--space-2) !important;
534
+ }
535
+ .mobile\:py-3 {
536
+ padding-block: var(--space-3) !important;
537
+ }
538
+ .mobile\:py-4 {
539
+ padding-block: var(--space-4) !important;
540
+ }
541
+ .mobile\:py-5 {
542
+ padding-block: var(--space-5) !important;
543
+ }
544
+ .mobile\:py-6 {
545
+ padding-block: var(--space-6) !important;
546
+ }
547
+ .mobile\:py-7 {
548
+ padding-block: var(--space-7) !important;
549
+ }
550
+ .mobile\:py-8 {
551
+ padding-block: var(--space-8) !important;
552
+ }
553
+ .mobile\:py-9 {
554
+ padding-block: var(--space-9) !important;
555
+ }
556
+ .mobile\:py-10 {
557
+ padding-block: var(--space-10) !important;
558
+ }
559
+ .mobile\:py-11 {
560
+ padding-block: var(--space-11) !important;
561
+ }
562
+ .mobile\:py-12 {
563
+ padding-block: var(--space-12) !important;
564
+ }
565
+ .mobile\:py-13 {
566
+ padding-block: var(--space-13) !important;
567
+ }
568
+ .mobile\:py-14 {
569
+ padding-block: var(--space-14) !important;
570
+ }
571
+ .mobile\:py-15 {
572
+ padding-block: var(--space-15) !important;
573
+ }
574
+ .mobile\:py-16 {
575
+ padding-block: var(--space-16) !important;
576
+ }
577
+ .mobile\:py-24 {
578
+ padding-block: var(--space-24) !important;
579
+ }
580
+ .mobile\:py-32 {
581
+ padding-block: var(--space-32) !important;
582
+ }
583
+ .mobile\:py-40 {
584
+ padding-block: var(--space-40) !important;
585
+ }
586
+ .mobile\:py-48 {
587
+ padding-block: var(--space-48) !important;
588
+ }
589
+ }
590
+ }
package/components/Setup/index.ts ADDED
@@ -0,0 +1 @@
1
+ export { Setup } from "./Setup"
package/components/Shimmer/Shimmer.meta.ts ADDED
@@ -0,0 +1,32 @@
1
+ import type { HeliosAttributeMeta } from "../../types/meta"
2
+ import type { ShimmerProps } from "./Shimmer.types"
3
+
4
+ export const meta: HeliosAttributeMeta<ShimmerProps> = {
5
+ _patterns: [
6
+ {
7
+ id: "ui-shimmer-default",
8
+ description: "default",
9
+ content: `<Shimmer height={16} width={256}/>`,
10
+ },
11
+ ],
12
+ _status: "nominal",
13
+ _category: "content",
14
+ height: {
15
+ type: "number",
16
+ },
17
+ isRounded: {
18
+ type: "boolean",
19
+ isOptional: true,
20
+ },
21
+ paddingTop: {
22
+ type: "number",
23
+ isOptional: true,
24
+ },
25
+ paddingBottom: {
26
+ type: "number",
27
+ isOptional: true,
28
+ },
29
+ width: {
30
+ type: "number",
31
+ },
32
+ }
package/components/Shimmer/Shimmer.module.css ADDED
@@ -0,0 +1,24 @@
1
+ .shimmer div {
2
+ height: 100%;
3
+ width: 100%;
4
+ animation: shimmer 760ms linear infinite forwards;
5
+
6
+ background-color: var(--ui-bg-soft-disabled-gray);
7
+ background-image: linear-gradient(to left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
8
+ background-position: -256px 0;
9
+ background-repeat: no-repeat;
10
+ background-size: 256px 100%;
11
+ }
12
+
13
+ :root[data-theme="dark"] .shimmer div {
14
+ background-image: linear-gradient(to left, rgba(128, 128, 128, 0), rgba(128, 128, 128, 0.25), rgba(128, 128, 128, 0));
15
+ }
16
+
17
+ @keyframes shimmer {
18
+ 0% {
19
+ background-position: -256px 0;
20
+ }
21
+ 100% {
22
+ background-position: calc(100% + 256px) 0;
23
+ }
24
+ }
package/components/Shimmer/Shimmer.tsx ADDED
@@ -0,0 +1,31 @@
1
+ import type { ShimmerProps } from "./Shimmer.types"
2
+ import { getClasses } from "@heliosgraphics/utils"
3
+ import styles from "./Shimmer.module.css"
4
+ import type { FC } from "react"
5
+
6
+ export const Shimmer: FC<ShimmerProps> = ({ isRounded, paddingTop, paddingBottom, height, width }) => {
7
+ const shimmerDivClasses: string = getClasses({
8
+ ["radius-max"]: isRounded,
9
+ ["radius-sm"]: !isRounded,
10
+ })
11
+
12
+ return (
13
+ <div
14
+ className={styles.shimmer}
15
+ data-ui-component="Shimmer"
16
+ role="status"
17
+ aria-busy={true}
18
+ aria-label="Loading"
19
+ style={{
20
+ height: height + "px",
21
+ paddingTop: (paddingTop ?? 0) + "px",
22
+ paddingBottom: (paddingBottom ?? 0) + "px",
23
+ width: width + "px",
24
+ }}
25
+ >
26
+ <div className={shimmerDivClasses} />
27
+ </div>
28
+ )
29
+ }
30
+
31
+ Shimmer.displayName = "Shimmer"
package/components/Shimmer/Shimmer.types.ts ADDED
@@ -0,0 +1,7 @@
1
+ export interface ShimmerProps {
2
+ height: number
3
+ isRounded?: boolean
4
+ paddingTop?: number
5
+ paddingBottom?: number
6
+ width: number
7
+ }
package/components/Shimmer/index.ts ADDED
@@ -0,0 +1 @@
1
+ export { Shimmer } from "./Shimmer"
package/components/Slider/Slider.meta.ts ADDED
@@ -0,0 +1,22 @@
1
+ import type { HeliosAttributeMeta } from "../../types/meta"
2
+ import type { SliderProps } from "./Slider.types"
3
+
4
+ export const meta: HeliosAttributeMeta<SliderProps> = {
5
+ _patterns: [
6
+ {
7
+ id: "ui-slider-default",
8
+ description: "default",
9
+ content: `<Slider/>`,
10
+ },
11
+ ],
12
+ _status: "experimental",
13
+ _category: "pattern",
14
+ "aria-label": {
15
+ type: "string",
16
+ isOptional: true,
17
+ },
18
+ items: {
19
+ type: "Array<ReactNode>",
20
+ isOptional: true,
21
+ },
22
+ }