@shohojdhara/atomix 0.1.16 → 0.1.18

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 (525) hide show
  1. package/CONTRIBUTING.md +151 -0
  2. package/NEXTJS_INTEGRATION.md +358 -0
  3. package/README.md +168 -119
  4. package/babel.config.js +58 -0
  5. package/css.d.ts +10 -0
  6. package/dist/css/atomix.css +1 -2
  7. package/dist/js/194.js +1 -2
  8. package/dist/js/244.js +1 -0
  9. package/dist/js/atomix.react.cjs.js +1 -0
  10. package/dist/js/atomix.react.esm.js +1 -2
  11. package/dist/js/atomix.react.umd.js +1 -2
  12. package/dist/js/chunks/cjs/202.9d3b1ef1eaa0d5c8a309.js +1 -0
  13. package/dist/js/chunks/cjs/308.6ea9685ea38ead4120d0.js +1 -0
  14. package/dist/js/chunks/cjs/54.73db6922594e421ba6b1.js +1 -0
  15. package/dist/js/chunks/cjs/619.51feecaadcab819780d4.js +1 -0
  16. package/dist/js/chunks/cjs/690.90f6d11164081cbcbc4d.js +1 -0
  17. package/dist/js/chunks/cjs/894.24877561df336a8dfd14.js +1 -0
  18. package/dist/js/chunks/cjs/897.6c2a71fae95338890de7.js +1 -0
  19. package/dist/js/chunks/esm/{202.ff48d27672233280e021.js → 202.82aa7b3244e53c9edb72.js} +1 -2
  20. package/dist/js/chunks/esm/{308.f873332126eba90e5c62.js → 308.27e1e4005705ae320432.js} +1 -2
  21. package/dist/js/chunks/esm/{54.4db919e5e4e5cc6d7c72.js → 54.ece1fd6964f98d4d994f.js} +1 -2
  22. package/dist/js/chunks/esm/{619.afc5a718eff77fa423b5.js → 619.ebeb0298432a066ac05c.js} +1 -2
  23. package/dist/js/chunks/esm/{690.a9e968c7497d61e56cdc.js → 690.c5f412cc979b55740359.js} +1 -2
  24. package/dist/js/chunks/esm/{894.f1091a4a8758c26d29e4.js → 894.3604ddc9367d75191198.js} +1 -2
  25. package/dist/js/chunks/esm/{897.561a50f7d043d42169da.js → 897.a4aab2fad9401693eb12.js} +1 -2
  26. package/dist/js/chunks/umd/{202.dac7605cc555b6bda542.js → 202.5017dd0403d696bf1644.js} +1 -2
  27. package/dist/js/chunks/umd/{308.6709979849dcbdb90c9b.js → 308.4bc14b9d7b16b6ee0ab8.js} +1 -2
  28. package/dist/js/chunks/umd/{54.403470e1f7d0ef4424a7.js → 54.7fdfb4a031989470a70d.js} +1 -2
  29. package/dist/js/chunks/umd/{619.fa05ea98c10270eb64c5.js → 619.84a0c35ecee695250085.js} +1 -2
  30. package/dist/js/chunks/umd/{690.aa7054d1c53e5402c2d6.js → 690.d7041094a34a4a434be2.js} +1 -2
  31. package/dist/js/chunks/umd/{894.3e1eaf0a2aadf4434390.js → 894.c127ee4e9513c22ee97d.js} +1 -2
  32. package/dist/js/chunks/umd/{897.554ea37be4453698c167.js → 897.26932ac837a39fc91907.js} +1 -2
  33. package/dist/types/components/Badge/index.d.ts +3 -3
  34. package/dist/types/components/{Navbar → Navigation/Menu}/MegaMenu.d.ts +1 -1
  35. package/dist/types/components/{Navbar → Navigation/Menu}/Menu.d.ts +1 -1
  36. package/dist/types/components/Navigation/Nav/Nav.d.ts +20 -0
  37. package/dist/types/components/{Navbar → Navigation/Nav}/NavDropdown.d.ts +1 -1
  38. package/dist/types/components/Navigation/Nav/NavItem.d.ts +33 -0
  39. package/dist/types/components/Navigation/Navbar/Navbar.d.ts +19 -0
  40. package/dist/types/components/Navigation/SideMenu/SideMenu.d.ts +20 -0
  41. package/dist/types/components/Navigation/SideMenu/SideMenuItem.d.ts +30 -0
  42. package/dist/types/components/Navigation/SideMenu/SideMenuList.d.ts +17 -0
  43. package/dist/types/components/Navigation/index.d.ts +10 -0
  44. package/dist/types/components/PhotoViewer/PhotoViewer.d.ts +2 -2
  45. package/dist/types/components/PhotoViewer/PhotoViewerHeader.d.ts +2 -2
  46. package/dist/types/components/Tab/index.d.ts +2 -2
  47. package/dist/types/components/Toggle/index.d.ts +2 -2
  48. package/dist/types/components/Tooltip/index.d.ts +3 -3
  49. package/dist/types/components/index.d.ts +1 -1
  50. package/dist/types/lib/composables/index.d.ts +1 -0
  51. package/dist/types/lib/composables/useDatePicker.d.ts +1 -1
  52. package/dist/types/lib/composables/useDropdown.d.ts +1 -1
  53. package/dist/types/lib/composables/useModal.d.ts +1 -1
  54. package/dist/types/lib/composables/usePhotoViewer.d.ts +1 -1
  55. package/dist/types/lib/composables/useRating.d.ts +1 -1
  56. package/dist/types/lib/composables/useSideMenu.d.ts +28 -0
  57. package/dist/types/lib/constants/components.d.ts +72 -0
  58. package/dist/types/lib/types/components.d.ts +103 -0
  59. package/examples/nextjs-example.tsx +271 -0
  60. package/implementation-guide.md +505 -0
  61. package/next.config.js +69 -0
  62. package/package.json +80 -42
  63. package/postcss.config.js +28 -0
  64. package/src/Introduction.mdx +3 -5
  65. package/src/assets/fonts/HelveticaNeue/stylesheet.css +140 -127
  66. package/src/components/Accordion/Accordion.stories.tsx +58 -45
  67. package/src/components/Accordion/Accordion.tsx +14 -4
  68. package/src/components/Accordion/scripts/accordionInteractions.ts +9 -9
  69. package/src/components/Accordion/scripts/bundle.ts +1 -1
  70. package/src/components/Accordion/scripts/index.ts +3 -3
  71. package/src/components/AtomixLogo.tsx +13 -19
  72. package/src/components/Avatar/Avatar.stories.tsx +24 -21
  73. package/src/components/Avatar/Avatar.tsx +5 -8
  74. package/src/components/Avatar/AvatarGroup.tsx +11 -11
  75. package/src/components/Avatar/index.ts +1 -1
  76. package/src/components/Avatar/scripts/index.ts +66 -71
  77. package/src/components/Badge/Badge.stories.tsx +51 -21
  78. package/src/components/Badge/Badge.tsx +14 -12
  79. package/src/components/Badge/index.ts +3 -3
  80. package/src/components/Breadcrumb/Breadcrumb.stories.tsx +40 -40
  81. package/src/components/Breadcrumb/Breadcrumb.tsx +19 -26
  82. package/src/components/Breadcrumb/index.ts +1 -1
  83. package/src/components/Breadcrumb/scripts/breadcrumb.ts +36 -34
  84. package/src/components/Breadcrumb/scripts/index.ts +1 -1
  85. package/src/components/Breadcrumb/scripts/types.ts +9 -9
  86. package/src/components/Button/Button.stories.tsx +36 -12
  87. package/src/components/Button/Button.tsx +52 -39
  88. package/src/components/Button/index.ts +1 -1
  89. package/src/components/Button/scripts/buttonInteractions.ts +9 -9
  90. package/src/components/Button/scripts/index.ts +1 -1
  91. package/src/components/Callout/Callout.stories.tsx +207 -114
  92. package/src/components/Callout/Callout.tsx +12 -12
  93. package/src/components/Callout/index.ts +1 -1
  94. package/src/components/Callout/scripts/CalloutInteractions.ts +58 -48
  95. package/src/components/Callout/scripts/bundle.ts +2 -2
  96. package/src/components/Callout/scripts/index.ts +19 -15
  97. package/src/components/Card/Card.stories.tsx +2 -2
  98. package/src/components/Card/Card.tsx +49 -72
  99. package/src/components/Card/ElevationCard.tsx +4 -8
  100. package/src/components/Card/index.ts +1 -1
  101. package/src/components/Card/scripts/bundle.ts +7 -7
  102. package/src/components/Card/scripts/cardInteractions.ts +24 -24
  103. package/src/components/Card/scripts/index.ts +25 -26
  104. package/src/components/ColorModeToggle/ColorModeToggle.stories.tsx +6 -3
  105. package/src/components/ColorModeToggle/ColorModeToggle.tsx +12 -15
  106. package/src/components/ColorModeToggle/index.ts +1 -1
  107. package/src/components/Countdown/Countdown.stories.tsx +6 -2
  108. package/src/components/Countdown/Countdown.tsx +56 -48
  109. package/src/components/Countdown/index.ts +1 -1
  110. package/src/components/Countdown/scripts/index.ts +33 -28
  111. package/src/components/DataTable/DataTable.stories.tsx +23 -18
  112. package/src/components/DataTable/DataTable.tsx +39 -39
  113. package/src/components/DataTable/index.ts +1 -1
  114. package/src/components/DataTable/scripts/bundle.ts +8 -3
  115. package/src/components/DataTable/scripts/index.ts +182 -164
  116. package/src/components/DatePicker/DatePicker.stories.tsx +136 -148
  117. package/src/components/DatePicker/DatePicker.tsx +461 -420
  118. package/src/components/DatePicker/scripts/bundle.ts +12 -7
  119. package/src/components/DatePicker/scripts/componentInteractions.ts +76 -46
  120. package/src/components/DatePicker/scripts/index.ts +176 -156
  121. package/src/components/DatePicker/types.ts +32 -32
  122. package/src/components/DatePicker/utils.ts +41 -30
  123. package/src/components/Dropdown/Dropdown.stories.tsx +85 -55
  124. package/src/components/Dropdown/Dropdown.tsx +97 -88
  125. package/src/components/Dropdown/index.ts +5 -10
  126. package/src/components/Dropdown/scripts/bundle.ts +10 -10
  127. package/src/components/Dropdown/scripts/componentInteractions.ts +10 -2
  128. package/src/components/Dropdown/scripts/index.ts +122 -117
  129. package/src/components/EdgePanel/EdgePanel.stories.tsx +142 -58
  130. package/src/components/EdgePanel/EdgePanel.tsx +7 -13
  131. package/src/components/EdgePanel/index.ts +1 -1
  132. package/src/components/EdgePanel/scripts/bundle.ts +5 -5
  133. package/src/components/EdgePanel/scripts/edgePanelInteractions.ts +26 -26
  134. package/src/components/EdgePanel/scripts/index.ts +53 -53
  135. package/src/components/Form/Checkbox.stories.tsx +2 -2
  136. package/src/components/Form/Checkbox.tsx +13 -7
  137. package/src/components/Form/Form.stories.tsx +144 -218
  138. package/src/components/Form/Form.tsx +6 -6
  139. package/src/components/Form/FormGroup.stories.tsx +21 -38
  140. package/src/components/Form/FormGroup.tsx +18 -20
  141. package/src/components/Form/Input.stories.tsx +1 -1
  142. package/src/components/Form/Input.tsx +18 -8
  143. package/src/components/Form/Radio.stories.tsx +12 -25
  144. package/src/components/Form/Radio.tsx +11 -6
  145. package/src/components/Form/Select.stories.tsx +6 -6
  146. package/src/components/Form/Select.tsx +31 -33
  147. package/src/components/Form/Textarea.stories.tsx +7 -2
  148. package/src/components/Form/Textarea.tsx +17 -8
  149. package/src/components/Form/index.ts +1 -1
  150. package/src/components/Hero/Hero.stories.tsx +44 -42
  151. package/src/components/Hero/Hero.tsx +28 -38
  152. package/src/components/Hero/index.ts +1 -1
  153. package/src/components/Hero/scripts/bundle.ts +6 -6
  154. package/src/components/Hero/scripts/heroInteractions.ts +24 -29
  155. package/src/components/Hero/scripts/index.ts +16 -17
  156. package/src/components/Icon/Icon.tsx +16 -18
  157. package/src/components/Icon/index.ts +1 -1
  158. package/src/components/List/List.stories.tsx +1 -3
  159. package/src/components/List/List.tsx +6 -10
  160. package/src/components/List/ListGroup.tsx +1 -1
  161. package/src/components/List/index.ts +1 -1
  162. package/src/components/Messages/Messages.stories.tsx +30 -29
  163. package/src/components/Messages/Messages.tsx +60 -55
  164. package/src/components/Messages/index.ts +1 -1
  165. package/src/components/Messages/scripts/bundle.ts +1 -6
  166. package/src/components/Messages/scripts/componentInteractions.ts +32 -37
  167. package/src/components/Messages/scripts/index.ts +61 -55
  168. package/src/components/Modal/Modal.stories.tsx +77 -53
  169. package/src/components/Modal/Modal.tsx +63 -62
  170. package/src/components/Modal/index.ts +1 -1
  171. package/src/components/Modal/scripts/bundle.ts +3 -3
  172. package/src/components/Modal/scripts/index.ts +96 -84
  173. package/src/components/Modal/scripts/modalInteractions.ts +16 -14
  174. package/src/components/{Navbar → Navigation/Menu}/MegaMenu.tsx +50 -59
  175. package/src/components/Navigation/Menu/Menu.stories.tsx +340 -0
  176. package/src/components/Navigation/Menu/Menu.tsx +110 -0
  177. package/src/components/Navigation/Nav/Nav.stories.tsx +458 -0
  178. package/src/components/Navigation/Nav/Nav.tsx +50 -0
  179. package/src/components/Navigation/Nav/NavDropdown.tsx +105 -0
  180. package/src/components/Navigation/Nav/NavItem.tsx +159 -0
  181. package/src/components/{Navbar → Navigation/Navbar}/Navbar.stories.tsx +198 -104
  182. package/src/components/Navigation/Navbar/Navbar.tsx +150 -0
  183. package/src/components/Navigation/README.md +314 -0
  184. package/src/components/Navigation/SideMenu/SideMenu.README.md +494 -0
  185. package/src/components/Navigation/SideMenu/SideMenu.stories.tsx +618 -0
  186. package/src/components/Navigation/SideMenu/SideMenu.tsx +101 -0
  187. package/src/components/Navigation/SideMenu/SideMenuItem.tsx +95 -0
  188. package/src/components/Navigation/SideMenu/SideMenuList.tsx +41 -0
  189. package/src/components/Navigation/index.ts +23 -0
  190. package/src/components/Navigation/scripts/NavbarInteractions.ts +171 -0
  191. package/src/components/Navigation/scripts/SideMenu.ts +319 -0
  192. package/src/components/Navigation/scripts/SideMenuBundle.ts +69 -0
  193. package/src/components/Navigation/scripts/SideMenuInteractions.ts +250 -0
  194. package/src/components/Navigation/scripts/bundle.ts +58 -0
  195. package/src/components/Navigation/scripts/index.ts +248 -0
  196. package/src/components/Pagination/Pagination.stories.tsx +34 -33
  197. package/src/components/Pagination/Pagination.tsx +25 -35
  198. package/src/components/Pagination/index.ts +1 -1
  199. package/src/components/Pagination/scripts/index.ts +42 -37
  200. package/src/components/PhotoViewer/PhotoViewer.stories.tsx +48 -48
  201. package/src/components/PhotoViewer/PhotoViewer.tsx +29 -46
  202. package/src/components/PhotoViewer/PhotoViewerHeader.tsx +20 -26
  203. package/src/components/PhotoViewer/PhotoViewerImage.tsx +19 -17
  204. package/src/components/PhotoViewer/PhotoViewerInfo.tsx +13 -5
  205. package/src/components/PhotoViewer/PhotoViewerNavigation.tsx +5 -5
  206. package/src/components/PhotoViewer/PhotoViewerThumbnails.tsx +31 -30
  207. package/src/components/PhotoViewer/examples/ImageGallery.tsx +27 -37
  208. package/src/components/PhotoViewer/examples/SimpleGallery.tsx +19 -13
  209. package/src/components/PhotoViewer/examples/index.ts +1 -1
  210. package/src/components/PhotoViewer/index.ts +1 -1
  211. package/src/components/PhotoViewer/scripts/PhotoViewerInteractions.ts +43 -33
  212. package/src/components/PhotoViewer/scripts/bundle.ts +14 -14
  213. package/src/components/PhotoViewer/scripts/index.ts +173 -129
  214. package/src/components/Popover/Popover.stories.tsx +11 -12
  215. package/src/components/Popover/Popover.tsx +36 -36
  216. package/src/components/Popover/index.ts +1 -1
  217. package/src/components/Popover/scripts/bundle.ts +1 -1
  218. package/src/components/Popover/scripts/componentInteractions.ts +34 -46
  219. package/src/components/Popover/scripts/index.ts +64 -53
  220. package/src/components/ProductReview/ProductReview.stories.tsx +10 -8
  221. package/src/components/ProductReview/ProductReview.tsx +28 -32
  222. package/src/components/ProductReview/scripts/componentInteractions.ts +20 -20
  223. package/src/components/Progress/Progress.tsx +36 -34
  224. package/src/components/Progress/scripts/bundle.ts +7 -2
  225. package/src/components/Progress/scripts/componentInteractions.ts +29 -23
  226. package/src/components/Progress/scripts/index.ts +45 -39
  227. package/src/components/Rating/Rating.stories.tsx +3 -16
  228. package/src/components/Rating/Rating.tsx +250 -231
  229. package/src/components/Rating/scripts/bundle.ts +11 -6
  230. package/src/components/Rating/scripts/index.ts +85 -80
  231. package/src/components/Rating/scripts/ratingInteractions.ts +27 -24
  232. package/src/components/River/River.stories.tsx +70 -24
  233. package/src/components/River/River.tsx +28 -38
  234. package/src/components/River/index.ts +1 -1
  235. package/src/components/River/scripts/index.ts +11 -12
  236. package/src/components/SectionIntro/SectionIntro.stories.tsx +12 -9
  237. package/src/components/SectionIntro/SectionIntro.tsx +25 -31
  238. package/src/components/SectionIntro/scripts/componentInteractions.ts +1 -1
  239. package/src/components/SectionIntro/scripts/index.ts +30 -16
  240. package/src/components/Spinner/Spinner.stories.tsx +5 -7
  241. package/src/components/Spinner/Spinner.tsx +11 -6
  242. package/src/components/Spinner/index.ts +2 -2
  243. package/src/components/Steps/Steps.stories.tsx +44 -48
  244. package/src/components/Steps/Steps.tsx +20 -20
  245. package/src/components/Steps/index.ts +1 -1
  246. package/src/components/Steps/scripts/index.ts +9 -9
  247. package/src/components/Tab/Tab.stories.tsx +14 -6
  248. package/src/components/Tab/Tab.tsx +16 -18
  249. package/src/components/Tab/index.ts +2 -2
  250. package/src/components/Tab/scripts/index.ts +13 -13
  251. package/src/components/Testimonial/Testimonial.stories.tsx +54 -51
  252. package/src/components/Testimonial/Testimonial.tsx +18 -19
  253. package/src/components/Testimonial/index.ts +1 -1
  254. package/src/components/Testimonial/scripts/index.ts +19 -8
  255. package/src/components/Todo/Todo.stories.tsx +7 -24
  256. package/src/components/Todo/Todo.tsx +35 -46
  257. package/src/components/Todo/index.ts +1 -1
  258. package/src/components/Todo/scripts/bundle.ts +1 -1
  259. package/src/components/Todo/scripts/index.ts +99 -81
  260. package/src/components/Todo/scripts/todoInteractions.ts +12 -12
  261. package/src/components/Todo/scripts/types.ts +3 -3
  262. package/src/components/Toggle/Toggle.stories.tsx +2 -2
  263. package/src/components/Toggle/Toggle.tsx +18 -18
  264. package/src/components/Toggle/index.ts +2 -2
  265. package/src/components/Toggle/scripts/bundle.ts +7 -2
  266. package/src/components/Toggle/scripts/index.ts +14 -10
  267. package/src/components/Toggle/scripts/toggleInteractions.ts +11 -14
  268. package/src/components/Tooltip/Tooltip.stories.tsx +13 -6
  269. package/src/components/Tooltip/Tooltip.tsx +25 -15
  270. package/src/components/Tooltip/index.ts +3 -3
  271. package/src/components/Tooltip/scripts/bundle.ts +0 -1
  272. package/src/components/Tooltip/scripts/index.ts +44 -41
  273. package/src/components/Tooltip/scripts/tooltipInteractions.ts +22 -22
  274. package/src/components/Upload/Upload.stories.tsx +28 -34
  275. package/src/components/Upload/Upload.tsx +86 -71
  276. package/src/components/Upload/index.ts +1 -1
  277. package/src/components/Upload/scripts/index.ts +58 -43
  278. package/src/components/index.ts +5 -6
  279. package/src/design-tokens/BoxShadow/BoxShadow.stories.tsx +13 -10
  280. package/src/design-tokens/Colors/colors.scss +10 -7
  281. package/src/design-tokens/Colors/colors.stories.tsx +46 -59
  282. package/src/design-tokens/Spacing/Spacing.scss +7 -5
  283. package/src/design-tokens/Spacing/Spacing.stories.tsx +19 -18
  284. package/src/design-tokens/Typography/Typography.scss +88 -25
  285. package/src/design-tokens/Typography/Typography.stories.tsx +22 -25
  286. package/src/docs/implementation-guide.mdx +2 -2
  287. package/src/htmlComponentsEntry.ts +23 -23
  288. package/src/index.ts +1 -1
  289. package/src/layouts/Grid/Container.tsx +6 -10
  290. package/src/layouts/Grid/Grid.stories.tsx +72 -34
  291. package/src/layouts/Grid/Grid.tsx +6 -13
  292. package/src/layouts/Grid/GridCol.tsx +29 -26
  293. package/src/layouts/Grid/Row.tsx +6 -13
  294. package/src/layouts/MasonryGrid/MasonryGrid.stories.tsx +79 -72
  295. package/src/layouts/MasonryGrid/MasonryGrid.tsx +23 -25
  296. package/src/layouts/MasonryGrid/MasonryGridItem.tsx +4 -12
  297. package/src/layouts/index.ts +3 -4
  298. package/src/lib/composables/index.ts +3 -3
  299. package/src/lib/composables/useAccordion.ts +15 -6
  300. package/src/lib/composables/useBadge.ts +3 -3
  301. package/src/lib/composables/useBreadcrumb.ts +6 -12
  302. package/src/lib/composables/useButton.ts +3 -3
  303. package/src/lib/composables/useCallout.ts +3 -3
  304. package/src/lib/composables/useCard.ts +50 -28
  305. package/src/lib/composables/useCheckbox.ts +7 -7
  306. package/src/lib/composables/useDataTable.ts +61 -57
  307. package/src/lib/composables/useDatePicker.ts +255 -231
  308. package/src/lib/composables/useDropdown.ts +90 -75
  309. package/src/lib/composables/useEdgePanel.ts +50 -47
  310. package/src/lib/composables/useForm.ts +4 -7
  311. package/src/lib/composables/useFormGroup.ts +11 -12
  312. package/src/lib/composables/useHero.ts +36 -38
  313. package/src/lib/composables/useInput.ts +9 -10
  314. package/src/lib/composables/useMessages.ts +12 -14
  315. package/src/lib/composables/useModal.ts +37 -34
  316. package/src/lib/composables/useNavbar.ts +33 -22
  317. package/src/lib/composables/usePagination.ts +3 -10
  318. package/src/lib/composables/usePhotoViewer.ts +625 -578
  319. package/src/lib/composables/usePopover.ts +68 -62
  320. package/src/lib/composables/useProgress.ts +9 -12
  321. package/src/lib/composables/useRadio.ts +4 -4
  322. package/src/lib/composables/useRating.ts +82 -70
  323. package/src/lib/composables/useRiver.ts +28 -31
  324. package/src/lib/composables/useSelect.ts +7 -8
  325. package/src/lib/composables/useSideMenu.ts +197 -0
  326. package/src/lib/composables/useSpinner.ts +3 -3
  327. package/src/lib/composables/useTextarea.ts +8 -9
  328. package/src/lib/composables/useTodo.ts +14 -18
  329. package/src/lib/constants/components.ts +191 -118
  330. package/src/lib/constants/index.ts +1 -1
  331. package/src/lib/types/components.ts +454 -324
  332. package/src/lib/utils/dom.ts +2 -6
  333. package/src/lib/utils/icons.ts +20 -12
  334. package/src/lib/utils/index.ts +2 -2
  335. package/src/lib/utils/useForkRef.ts +1 -2
  336. package/src/styles/01-settings/_index.scss +59 -59
  337. package/src/styles/01-settings/_settings.accordion.scss +21 -21
  338. package/src/styles/01-settings/_settings.animations.scss +2 -2
  339. package/src/styles/01-settings/_settings.avatar-group.scss +14 -14
  340. package/src/styles/01-settings/_settings.avatar.scss +31 -31
  341. package/src/styles/01-settings/_settings.badge.scss +11 -11
  342. package/src/styles/01-settings/_settings.border-radius.scss +10 -9
  343. package/src/styles/01-settings/_settings.border.scss +7 -7
  344. package/src/styles/01-settings/_settings.box-shadow.scss +24 -12
  345. package/src/styles/01-settings/_settings.breadcrumb.scss +18 -18
  346. package/src/styles/01-settings/_settings.btn-group.scss +1 -1
  347. package/src/styles/01-settings/_settings.button.scss +63 -49
  348. package/src/styles/01-settings/_settings.callout.scss +27 -7
  349. package/src/styles/01-settings/_settings.card.scss +27 -30
  350. package/src/styles/01-settings/_settings.checkbox-group.scss +2 -3
  351. package/src/styles/01-settings/_settings.checkbox.scss +17 -18
  352. package/src/styles/01-settings/_settings.color-mode.scss +1 -1
  353. package/src/styles/01-settings/_settings.colors.scss +197 -214
  354. package/src/styles/01-settings/_settings.config.scss +1 -3
  355. package/src/styles/01-settings/_settings.countdown.scss +14 -14
  356. package/src/styles/01-settings/_settings.data-table.scss +6 -6
  357. package/src/styles/01-settings/_settings.datepicker.scss +40 -42
  358. package/src/styles/01-settings/_settings.dropdown.scss +30 -30
  359. package/src/styles/01-settings/_settings.edge-panel.scss +16 -16
  360. package/src/styles/01-settings/_settings.fonts.scss +14 -12
  361. package/src/styles/01-settings/_settings.form-group.scss +10 -10
  362. package/src/styles/01-settings/_settings.form.scss +3 -3
  363. package/src/styles/01-settings/_settings.grid.scss +1 -1
  364. package/src/styles/01-settings/_settings.hero.scss +23 -23
  365. package/src/styles/01-settings/_settings.input.scss +32 -32
  366. package/src/styles/01-settings/_settings.link.scss +6 -6
  367. package/src/styles/01-settings/_settings.list-group.scss +12 -12
  368. package/src/styles/01-settings/_settings.list.scss +2 -2
  369. package/src/styles/01-settings/_settings.maps.scss +183 -188
  370. package/src/styles/01-settings/_settings.masonry-grid.scss +2 -2
  371. package/src/styles/01-settings/_settings.menu.scss +35 -38
  372. package/src/styles/01-settings/_settings.messages.scss +71 -77
  373. package/src/styles/01-settings/_settings.modal.scss +24 -24
  374. package/src/styles/01-settings/_settings.nav.scss +15 -15
  375. package/src/styles/01-settings/_settings.navbar.scss +39 -12
  376. package/src/styles/01-settings/_settings.pagination.scss +21 -21
  377. package/src/styles/01-settings/_settings.photoviewer.scss +1 -1
  378. package/src/styles/01-settings/_settings.popover.scss +3 -3
  379. package/src/styles/01-settings/_settings.position.scss +2 -2
  380. package/src/styles/01-settings/_settings.progress.scss +15 -18
  381. package/src/styles/01-settings/_settings.rating.scss +7 -7
  382. package/src/styles/01-settings/_settings.river.scss +25 -25
  383. package/src/styles/01-settings/_settings.sectionintro.scss +15 -16
  384. package/src/styles/01-settings/_settings.select.scss +31 -31
  385. package/src/styles/01-settings/_settings.side-menu.scss +64 -16
  386. package/src/styles/01-settings/_settings.skeleton.scss +12 -12
  387. package/src/styles/01-settings/_settings.spacing.scss +62 -33
  388. package/src/styles/01-settings/_settings.spinner.scss +10 -10
  389. package/src/styles/01-settings/_settings.steps.scss +22 -22
  390. package/src/styles/01-settings/_settings.tabs.scss +25 -25
  391. package/src/styles/01-settings/_settings.testimonials.scss +17 -19
  392. package/src/styles/01-settings/_settings.todo.scss +1 -1
  393. package/src/styles/01-settings/_settings.toggle.scss +26 -26
  394. package/src/styles/01-settings/_settings.tooltip.scss +15 -15
  395. package/src/styles/01-settings/_settings.typography.scss +65 -48
  396. package/src/styles/01-settings/_settings.upload.scss +70 -77
  397. package/src/styles/01-settings/_settings.z-layers.scss +1 -1
  398. package/src/styles/02-tools/_index.scss +19 -19
  399. package/src/styles/02-tools/_tools.animations.scss +4 -4
  400. package/src/styles/02-tools/_tools.border-radius.scss +4 -5
  401. package/src/styles/02-tools/_tools.breakpoints.scss +33 -34
  402. package/src/styles/02-tools/_tools.button.scss +49 -25
  403. package/src/styles/02-tools/_tools.color-mode.scss +11 -11
  404. package/src/styles/02-tools/_tools.event.scss +1 -1
  405. package/src/styles/02-tools/_tools.hidden-visually.scss +1 -1
  406. package/src/styles/02-tools/_tools.hidden.scss +1 -1
  407. package/src/styles/02-tools/_tools.map-loop.scss +9 -9
  408. package/src/styles/02-tools/_tools.media-queries.scss +5 -3
  409. package/src/styles/02-tools/_tools.object-fit.scss +3 -3
  410. package/src/styles/02-tools/_tools.placeholder.scss +0 -1
  411. package/src/styles/02-tools/_tools.rem.scss +1 -1
  412. package/src/styles/02-tools/_tools.spacing.scss +8 -34
  413. package/src/styles/02-tools/_tools.to-rgb.scss +3 -3
  414. package/src/styles/02-tools/_tools.transition.scss +1 -1
  415. package/src/styles/02-tools/_tools.utility-api.scss +29 -14
  416. package/src/styles/03-generic/_generic.fonts.scss +0 -1
  417. package/src/styles/03-generic/_generic.reset.scss +13 -8
  418. package/src/styles/03-generic/_generic.root.scss +5 -5
  419. package/src/styles/03-generic/_index.scss +4 -4
  420. package/src/styles/04-elements/_elements.all.scss +2 -2
  421. package/src/styles/04-elements/_elements.body.scss +1 -2
  422. package/src/styles/04-elements/_elements.heading.scss +37 -21
  423. package/src/styles/04-elements/_elements.links.scss +0 -1
  424. package/src/styles/04-elements/_index.scss +5 -5
  425. package/src/styles/05-objects/_index.scss +3 -3
  426. package/src/styles/05-objects/_objects.container.scss +5 -4
  427. package/src/styles/05-objects/_objects.grid.scss +12 -12
  428. package/src/styles/05-objects/_objects.masonry-grid.scss +80 -74
  429. package/src/styles/06-components/_components.accordion.scss +12 -6
  430. package/src/styles/06-components/_components.avatar-group.scss +9 -8
  431. package/src/styles/06-components/_components.avatar.scss +78 -77
  432. package/src/styles/06-components/_components.badge.scss +48 -48
  433. package/src/styles/06-components/_components.breadcrumb.scss +57 -58
  434. package/src/styles/06-components/_components.btn-group.scss +22 -22
  435. package/src/styles/06-components/_components.button.scss +118 -110
  436. package/src/styles/06-components/_components.callout.scss +21 -15
  437. package/src/styles/06-components/_components.card.scss +6 -10
  438. package/src/styles/06-components/_components.checkbox-group.scss +9 -10
  439. package/src/styles/06-components/_components.checkbox.scss +10 -17
  440. package/src/styles/06-components/_components.color-mode-toggle.scss +6 -6
  441. package/src/styles/06-components/_components.countdown.scss +53 -54
  442. package/src/styles/06-components/_components.data-table.scss +40 -36
  443. package/src/styles/06-components/_components.datepicker.scss +95 -73
  444. package/src/styles/06-components/_components.dropdown.scss +15 -9
  445. package/src/styles/06-components/_components.edge-panel.scss +87 -46
  446. package/src/styles/06-components/_components.form-group.scss +5 -4
  447. package/src/styles/06-components/_components.hero.scss +128 -132
  448. package/src/styles/06-components/_components.icon.scss +16 -16
  449. package/src/styles/06-components/_components.image-gallery.scss +9 -7
  450. package/src/styles/06-components/_components.input.scss +18 -16
  451. package/src/styles/06-components/_components.list-group.scss +52 -51
  452. package/src/styles/06-components/_components.list.scss +15 -15
  453. package/src/styles/06-components/_components.menu.scss +225 -220
  454. package/src/styles/06-components/_components.messages.scss +45 -32
  455. package/src/styles/06-components/_components.modal.scss +0 -1
  456. package/src/styles/06-components/_components.nav.scss +56 -11
  457. package/src/styles/06-components/_components.navbar.scss +278 -202
  458. package/src/styles/06-components/_components.pagination.scss +7 -6
  459. package/src/styles/06-components/_components.photoviewer.scss +121 -116
  460. package/src/styles/06-components/_components.popover.scss +10 -10
  461. package/src/styles/06-components/_components.product-review.scss +3 -3
  462. package/src/styles/06-components/_components.progress.scss +32 -35
  463. package/src/styles/06-components/_components.rating.scss +9 -8
  464. package/src/styles/06-components/_components.river.scss +4 -2
  465. package/src/styles/06-components/_components.sectionintro.scss +19 -26
  466. package/src/styles/06-components/_components.select.scss +7 -8
  467. package/src/styles/06-components/_components.side-menu.scss +154 -28
  468. package/src/styles/06-components/_components.skeleton.scss +0 -1
  469. package/src/styles/06-components/_components.spinner.scss +2 -4
  470. package/src/styles/06-components/_components.steps.scss +76 -77
  471. package/src/styles/06-components/_components.tabs.scss +17 -12
  472. package/src/styles/06-components/_components.testimonials.scss +49 -52
  473. package/src/styles/06-components/_components.todo.scss +26 -26
  474. package/src/styles/06-components/_components.tooltip.scss +114 -115
  475. package/src/styles/06-components/_components.upload.scss +8 -18
  476. package/src/styles/06-components/_index.scss +48 -48
  477. package/src/styles/99-utilities/_index.scss +18 -18
  478. package/src/styles/99-utilities/_utilities.background.scss +13 -13
  479. package/src/styles/99-utilities/_utilities.border.scss +30 -30
  480. package/src/styles/99-utilities/_utilities.clearfix.scss +1 -1
  481. package/src/styles/99-utilities/_utilities.display.scss +5 -4
  482. package/src/styles/99-utilities/_utilities.flex.scss +19 -19
  483. package/src/styles/99-utilities/_utilities.link.scss +52 -35
  484. package/src/styles/99-utilities/_utilities.object-fit.scss +3 -3
  485. package/src/styles/99-utilities/_utilities.opacity.scss +6 -6
  486. package/src/styles/99-utilities/_utilities.overflow.scss +4 -4
  487. package/src/styles/99-utilities/_utilities.position.scss +8 -8
  488. package/src/styles/99-utilities/_utilities.shadow.scss +13 -13
  489. package/src/styles/99-utilities/_utilities.sizes.scss +17 -17
  490. package/src/styles/99-utilities/_utilities.spacing.scss +72 -37
  491. package/src/styles/99-utilities/_utilities.text.scss +15 -15
  492. package/src/styles/99-utilities/_utilities.visibility.scss +8 -8
  493. package/src/styles/99-utilities/_utilities.visually-hidden.scss +1 -1
  494. package/src/styles/99-utilities/_utilities.z-index.scss +2 -2
  495. package/tsconfig.json +74 -0
  496. package/webpack.config.js +463 -0
  497. package/NPM_PUBLISHING.md +0 -221
  498. package/dist/css/atomix.css.map +0 -1
  499. package/dist/js/194.js.map +0 -1
  500. package/dist/js/atomix.react.esm.js.map +0 -1
  501. package/dist/js/atomix.react.umd.js.map +0 -1
  502. package/dist/js/chunks/esm/202.ff48d27672233280e021.js.map +0 -1
  503. package/dist/js/chunks/esm/308.f873332126eba90e5c62.js.map +0 -1
  504. package/dist/js/chunks/esm/54.4db919e5e4e5cc6d7c72.js.map +0 -1
  505. package/dist/js/chunks/esm/619.afc5a718eff77fa423b5.js.map +0 -1
  506. package/dist/js/chunks/esm/690.a9e968c7497d61e56cdc.js.map +0 -1
  507. package/dist/js/chunks/esm/894.f1091a4a8758c26d29e4.js.map +0 -1
  508. package/dist/js/chunks/esm/897.561a50f7d043d42169da.js.map +0 -1
  509. package/dist/js/chunks/umd/202.dac7605cc555b6bda542.js.map +0 -1
  510. package/dist/js/chunks/umd/308.6709979849dcbdb90c9b.js.map +0 -1
  511. package/dist/js/chunks/umd/54.403470e1f7d0ef4424a7.js.map +0 -1
  512. package/dist/js/chunks/umd/619.fa05ea98c10270eb64c5.js.map +0 -1
  513. package/dist/js/chunks/umd/690.aa7054d1c53e5402c2d6.js.map +0 -1
  514. package/dist/js/chunks/umd/894.3e1eaf0a2aadf4434390.js.map +0 -1
  515. package/dist/js/chunks/umd/897.554ea37be4453698c167.js.map +0 -1
  516. package/dist/types/components/Navbar/Nav.d.ts +0 -5
  517. package/dist/types/components/Navbar/NavItem.d.ts +0 -5
  518. package/dist/types/components/Navbar/Navbar.d.ts +0 -5
  519. package/dist/types/components/Navbar/index.d.ts +0 -6
  520. package/src/components/Navbar/Menu.tsx +0 -122
  521. package/src/components/Navbar/Nav.tsx +0 -35
  522. package/src/components/Navbar/NavDropdown.tsx +0 -108
  523. package/src/components/Navbar/NavItem.tsx +0 -128
  524. package/src/components/Navbar/Navbar.tsx +0 -124
  525. package/src/components/Navbar/index.ts +0 -6
package/src/styles/06-components/_components.menu.scss CHANGED
@@ -7,228 +7,233 @@
7
7
  @use '../02-tools/tools.color-mode' as *;
8
8
 
9
9
  .c-menu {
10
- $root : &;
11
-
12
- --#{config.$prefix}menu-min-width: #{rem.rem(menu.$menu-min-width)};
13
- --#{config.$prefix}menu-container-width: #{rem.rem(menu.$menu-container-width)};
14
- --#{config.$prefix}menu-padding-x: #{rem.rem(menu.$menu-padding-x)};
15
- --#{config.$prefix}menu-padding-y: #{rem.rem(menu.$menu-padding-y)};
16
- --#{config.$prefix}menu-bg: #{menu.$menu-bg};
17
- --#{config.$prefix}menu-border-radius: #{menu.$menu-border-radius};
18
- --#{config.$prefix}menu-box-shadow: #{menu.$menu-box-shadow};
19
- --#{config.$prefix}menu-items-gap: #{menu.$menu-items-gap};
20
- --#{config.$prefix}menu-item-padding-x: #{menu.$menu-item-padding-x};
21
- --#{config.$prefix}menu-item-padding-y: #{menu.$menu-item-padding-y};
22
- --#{config.$prefix}menu-item-inner-gap: #{menu.$menu-item-inner-gap};
23
- --#{config.$prefix}menu-item-color: #{menu.$menu-item-color};
24
- --#{config.$prefix}menu-item-font-size: #{menu.$menu-item-font-size};
25
- --#{config.$prefix}menu-item-font-weight: #{menu.$menu-item-font-weight};
26
- --#{config.$prefix}menu-item-bg: #{menu.$menu-item-bg};
27
- --#{config.$prefix}menu-item-bg-hover: #{menu.$menu-item-bg-hover};
28
- --#{config.$prefix}menu-item-bg-active: #{menu.$menu-item-bg-active};
29
- --#{config.$prefix}menu-item-icon-size: #{menu.$menu-item-icon-size};
30
- --#{config.$prefix}menu-subitem-color: #{menu.$menu-subitem-color};
31
- --#{config.$prefix}menu-subitem-color-active: #{menu.$menu-subitem-color-active};
32
- --#{config.$prefix}menu-subitem-font-weight: #{menu.$menu-subitem-font-weight};
33
- --#{config.$prefix}menu-subitem-font-weight-active: #{menu.$menu-subitem-font-weight-active};
34
- --#{config.$prefix}menu-mega-padding-x: #{rem.rem(menu.$menu-mega-padding-x)};
35
- --#{config.$prefix}menu-mega-padding-y: #{rem.rem(menu.$menu-mega-padding-y)};
36
- --#{config.$prefix}menu-mega-grid-gap: #{rem.rem(menu.$menu-mega-grid-gap)};
37
- --#{config.$prefix}menu-mega-header-title-font-size: #{menu.$menu-mega-header-title-font-size};
38
- --#{config.$prefix}menu-mega-header-title-font-weight: #{menu.$menu-mega-header-title-font-weight};
39
-
40
- display: inline-block;
41
- min-width: var(--#{config.$prefix}menu-min-width);
42
- padding: var(--#{config.$prefix}menu-item-padding-y) var(--#{config.$prefix}menu-item-padding-x);
43
- background-color: var(--#{config.$prefix}menu-bg);
44
- border-radius: var(--#{config.$prefix}menu-border-radius);
45
- box-shadow: var(--#{config.$prefix}menu-box-shadow);
46
- z-index: 5;
47
-
48
- &__container {
49
- width: 100%;
50
- max-width: var(--#{config.$prefix}menu-container-width);
51
- margin: {
52
- left: auto;
53
- right: auto;
54
- };
55
- padding: 0 var(--#{config.$prefix}menu-mega-padding-x);
56
- }
57
-
58
- &__list {
59
- list-style: none;
60
- margin-bottom: 0;
61
- padding-left: 0;
62
- }
63
-
64
- &__item {
65
- &+& {
66
- margin-top: var(--#{config.$prefix}menu-items-gap);
67
- }
68
-
69
- &--haschildren {
70
- position: relative;
71
-
72
- >#{$root} {
73
- position: absolute;
74
- top: 0;
75
- left: 100%;
76
- visibility: hidden;
77
- opacity: 0;
78
- @include animations.basic-transition();
79
- }
80
-
81
- &:hover {
82
- >#{$root} {
83
- visibility: visible;
84
- opacity: 1;
85
- }
86
- }
87
- }
88
- }
89
-
90
- &__link {
91
- display: flex;
92
- align-items: center;
93
- gap: var(--#{config.$prefix}menu-item-inner-gap);
94
- padding: var(--#{config.$prefix}menu-item-padding-y) var(--#{config.$prefix}menu-item-padding-x);
95
- color: var(--#{config.$prefix}menu-item-color);
96
- font-size: var(--#{config.$prefix}menu-item-font-size);
97
- font-weight: var(--#{config.$prefix}menu-item-font-weight);
98
- background-color: var(--#{config.$prefix}menu-item-bg);
99
- border-radius: var(--#{config.$prefix}menu-border-radius);
100
- cursor: pointer;
101
- @include animations.basic-transition();
102
-
103
- &:hover {
104
- color: var(--#{config.$prefix}menu-item-color);
105
- background-color: var(--#{config.$prefix}menu-item-bg-hover);
106
- }
107
-
108
- &:focus, &:active, &.is-active {
109
- background-color: var(--#{config.$prefix}menu-item-bg-active);
110
- }
111
- }
112
-
113
- &__icon {
114
- font-size: var(--#{config.$prefix}menu-item-icon-size);
115
- }
116
-
117
- &__toggle {
118
- cursor: pointer;
119
- user-select: none;
120
- }
121
-
122
- &__toggle-icon {
123
- margin-left: auto;
124
- @include animations.basic-transition();
125
- }
126
-
127
- &__subitems {
128
- position: relative;
129
- }
130
-
131
- &__subitems-wrapper {
132
- height: 0px;
133
- overflow: hidden;
134
- @include animations.basic-transition();
135
- }
136
-
137
- &__subitems-list {
138
- list-style: none;
139
- margin-bottom: 0;
140
- padding-left: rem.rem(23px);
141
- }
142
-
143
- &__subitem-link {
144
- display: flex;
145
- align-items: center;
146
- gap: var(--#{config.$prefix}menu-item-inner-gap);
147
- padding: var(--#{config.$prefix}menu-item-padding-y) var(--#{config.$prefix}menu-item-padding-x);
148
- color: var(--#{config.$prefix}menu-subitem-color);
149
- font-size: var(--#{config.$prefix}menu-item-font-size);
150
- font-weight: var(--#{config.$prefix}menu-subitem-font-weight);
10
+ $root: &;
11
+
12
+ --#{config.$prefix}menu-min-width: #{rem.rem(menu.$menu-min-width)};
13
+ --#{config.$prefix}menu-container-width: #{rem.rem(menu.$menu-container-width)};
14
+ --#{config.$prefix}menu-padding-x: #{rem.rem(menu.$menu-padding-x)};
15
+ --#{config.$prefix}menu-padding-y: #{rem.rem(menu.$menu-padding-y)};
16
+ --#{config.$prefix}menu-bg: #{menu.$menu-bg};
17
+ --#{config.$prefix}menu-border-radius: #{menu.$menu-border-radius};
18
+ --#{config.$prefix}menu-box-shadow: #{menu.$menu-box-shadow};
19
+ --#{config.$prefix}menu-items-gap: #{menu.$menu-items-gap};
20
+ --#{config.$prefix}menu-item-padding-x: #{menu.$menu-item-padding-x};
21
+ --#{config.$prefix}menu-item-padding-y: #{menu.$menu-item-padding-y};
22
+ --#{config.$prefix}menu-item-inner-gap: #{menu.$menu-item-inner-gap};
23
+ --#{config.$prefix}menu-item-color: #{menu.$menu-item-color};
24
+ --#{config.$prefix}menu-item-font-size: #{menu.$menu-item-font-size};
25
+ --#{config.$prefix}menu-item-font-weight: #{menu.$menu-item-font-weight};
26
+ --#{config.$prefix}menu-item-bg: #{menu.$menu-item-bg};
27
+ --#{config.$prefix}menu-item-bg-hover: #{menu.$menu-item-bg-hover};
28
+ --#{config.$prefix}menu-item-bg-active: #{menu.$menu-item-bg-active};
29
+ --#{config.$prefix}menu-item-icon-size: #{menu.$menu-item-icon-size};
30
+ --#{config.$prefix}menu-subitem-color: #{menu.$menu-subitem-color};
31
+ --#{config.$prefix}menu-subitem-color-active: #{menu.$menu-subitem-color-active};
32
+ --#{config.$prefix}menu-subitem-font-weight: #{menu.$menu-subitem-font-weight};
33
+ --#{config.$prefix}menu-subitem-font-weight-active: #{menu.$menu-subitem-font-weight-active};
34
+ --#{config.$prefix}menu-mega-padding-x: #{rem.rem(menu.$menu-mega-padding-x)};
35
+ --#{config.$prefix}menu-mega-padding-y: #{rem.rem(menu.$menu-mega-padding-y)};
36
+ --#{config.$prefix}menu-mega-grid-gap: #{rem.rem(menu.$menu-mega-grid-gap)};
37
+ --#{config.$prefix}menu-mega-header-title-font-size: #{menu.$menu-mega-header-title-font-size};
38
+ --#{config.$prefix}menu-mega-header-title-font-weight: #{menu.$menu-mega-header-title-font-weight};
39
+
40
+ display: inline-block;
41
+ min-width: var(--#{config.$prefix}menu-min-width);
42
+ padding: var(--#{config.$prefix}menu-item-padding-y) var(--#{config.$prefix}menu-item-padding-x);
43
+ background-color: var(--#{config.$prefix}menu-bg);
44
+ border-radius: var(--#{config.$prefix}menu-border-radius);
45
+ box-shadow: var(--#{config.$prefix}menu-box-shadow);
46
+ z-index: 5;
47
+
48
+ &__container {
49
+ width: 100%;
50
+ max-width: var(--#{config.$prefix}menu-container-width);
51
+ margin: {
52
+ left: auto;
53
+ right: auto;
54
+ }
55
+ padding: 0 var(--#{config.$prefix}menu-mega-padding-x);
56
+ }
57
+
58
+ &__list {
59
+ list-style: none;
60
+ margin-bottom: 0;
61
+ padding-left: 0;
62
+ }
63
+
64
+ &__item {
65
+ & + & {
66
+ margin-top: var(--#{config.$prefix}menu-items-gap);
67
+ }
68
+
69
+ &--haschildren {
70
+ position: relative;
71
+
72
+ > #{$root} {
73
+ position: absolute;
74
+ top: 0;
75
+ left: 100%;
76
+ visibility: hidden;
77
+ opacity: 0;
151
78
  @include animations.basic-transition();
79
+ }
152
80
 
153
- &:hover {
154
- color: var(--#{config.$prefix}primary);
81
+ &:hover {
82
+ > #{$root} {
83
+ visibility: visible;
84
+ opacity: 1;
155
85
  }
156
-
157
- &:focus, &:active, &.is-active {
158
- color: var(--#{config.$prefix}menu-subitem-color-active);
159
- font-weight: var(--#{config.$prefix}menu-subitem-font-weight-active);
160
- }
161
- }
162
-
163
- &__grid {
164
- --#{config.$prefix}gutter-x: var(--#{config.$prefix}menu-mega-grid-gap);
165
- }
166
-
167
- &__header {
168
- display: flex;
169
- align-items: center;
170
- gap: var(--#{config.$prefix}menu-item-inner-gap);
171
- padding: 0 var(--#{config.$prefix}menu-item-padding-y) var(--#{config.$prefix}menu-item-padding-x) var(--#{config.$prefix}menu-item-padding-x);
172
- margin-bottom: var(--#{config.$prefix}menu-item-padding-y);
173
- border-bottom: 1px solid var(--#{config.$prefix}primary-border-subtle);
174
- }
175
-
176
- &__header-title {
177
- color: var(--#{config.$prefix}menu-item-color);
178
- font-size: var(--#{config.$prefix}menu-mega-header-title-font-size);
179
- font-weight: var(--#{config.$prefix}menu-mega-header-title-font-weight);
180
- }
181
-
182
- &__header-icon {
183
- font-size: rem.rem(24px);
184
- }
185
-
186
- &__content-title {
187
- color: var(--#{config.$prefix}menu-item-color);
188
- font-size: var(--#{config.$prefix}menu-item-font-size);
189
- font-weight: var(--#{config.$prefix}menu-item-font-weight);
190
- }
191
-
192
- &__content-text {
193
- color: var(--#{config.$prefix}menu-subitem-color);
194
- font-size: var(--#{config.$prefix}menu-item-font-size);
195
- margin-top: var(--#{config.$prefix}menu-items-gap);
196
- }
197
-
198
- &__content-menu {
199
- height: 100%;
200
- padding-left: var(--#{config.$prefix}menu-mega-grid-gap);
201
- border-left: 1px solid var(--#{config.$prefix}primary-border-subtle);
202
- }
203
-
204
- &__content-menu-title {
205
- color: var(--#{config.$prefix}menu-subitem-color);
206
- font-size: var(--#{config.$prefix}menu-item-font-size);
207
- }
208
-
209
- &__content-menu-list {
210
- padding-left: 0;
211
- list-style: none;
212
- }
213
-
214
- &__content-menu-item {
215
- margin-top: rem.rem(12px);
86
+ }
216
87
  }
88
+ }
217
89
 
218
- &__content-menu-link {
219
- color: var(--#{config.$prefix}menu-item-color);
220
- font-size: var(--#{config.$prefix}menu-item-font-size);
221
- font-weight: var(--#{config.$prefix}menu-item-font-weight);
222
-
223
- &:hover {
224
- color: var(--#{config.$prefix}menu-item-color);
225
- }
226
- }
227
-
228
- &--mega {
229
- width: 100%;
230
- min-height: auto;
231
- padding: var(--#{config.$prefix}menu-mega-padding-y) 0;
232
- border-radius: 0px;
233
- }
234
- }
90
+ &__link {
91
+ display: flex;
92
+ align-items: center;
93
+ gap: var(--#{config.$prefix}menu-item-inner-gap);
94
+ padding: var(--#{config.$prefix}menu-item-padding-y) var(--#{config.$prefix}menu-item-padding-x);
95
+ color: var(--#{config.$prefix}menu-item-color);
96
+ font-size: var(--#{config.$prefix}menu-item-font-size);
97
+ font-weight: var(--#{config.$prefix}menu-item-font-weight);
98
+ background-color: var(--#{config.$prefix}menu-item-bg);
99
+ border-radius: var(--#{config.$prefix}menu-border-radius);
100
+ cursor: pointer;
101
+ @include animations.basic-transition();
102
+
103
+ &:hover {
104
+ color: var(--#{config.$prefix}menu-item-color);
105
+ background-color: var(--#{config.$prefix}menu-item-bg-hover);
106
+ }
107
+
108
+ &:focus,
109
+ &:active,
110
+ &.is-active {
111
+ background-color: var(--#{config.$prefix}menu-item-bg-active);
112
+ }
113
+ }
114
+
115
+ &__icon {
116
+ font-size: var(--#{config.$prefix}menu-item-icon-size);
117
+ }
118
+
119
+ &__toggle {
120
+ cursor: pointer;
121
+ user-select: none;
122
+ }
123
+
124
+ &__toggle-icon {
125
+ margin-left: auto;
126
+ @include animations.basic-transition();
127
+ }
128
+
129
+ &__subitems {
130
+ position: relative;
131
+ }
132
+
133
+ &__subitems-wrapper {
134
+ height: 0px;
135
+ overflow: hidden;
136
+ @include animations.basic-transition();
137
+ }
138
+
139
+ &__subitems-list {
140
+ list-style: none;
141
+ margin-bottom: 0;
142
+ padding-left: rem.rem(23px);
143
+ }
144
+
145
+ &__subitem-link {
146
+ display: flex;
147
+ align-items: center;
148
+ gap: var(--#{config.$prefix}menu-item-inner-gap);
149
+ padding: var(--#{config.$prefix}menu-item-padding-y) var(--#{config.$prefix}menu-item-padding-x);
150
+ color: var(--#{config.$prefix}menu-subitem-color);
151
+ font-size: var(--#{config.$prefix}menu-item-font-size);
152
+ font-weight: var(--#{config.$prefix}menu-subitem-font-weight);
153
+ @include animations.basic-transition();
154
+
155
+ &:hover {
156
+ color: var(--#{config.$prefix}primary);
157
+ }
158
+
159
+ &:focus,
160
+ &:active,
161
+ &.is-active {
162
+ color: var(--#{config.$prefix}menu-subitem-color-active);
163
+ font-weight: var(--#{config.$prefix}menu-subitem-font-weight-active);
164
+ }
165
+ }
166
+
167
+ &__grid {
168
+ --#{config.$prefix}gutter-x: var(--#{config.$prefix}menu-mega-grid-gap);
169
+ }
170
+
171
+ &__header {
172
+ display: flex;
173
+ align-items: center;
174
+ gap: var(--#{config.$prefix}menu-item-inner-gap);
175
+ padding: 0 var(--#{config.$prefix}menu-item-padding-y)
176
+ var(--#{config.$prefix}menu-item-padding-x) var(--#{config.$prefix}menu-item-padding-x);
177
+ margin-bottom: var(--#{config.$prefix}menu-item-padding-y);
178
+ border-bottom: 1px solid var(--#{config.$prefix}primary-border-subtle);
179
+ }
180
+
181
+ &__header-title {
182
+ color: var(--#{config.$prefix}menu-item-color);
183
+ font-size: var(--#{config.$prefix}menu-mega-header-title-font-size);
184
+ font-weight: var(--#{config.$prefix}menu-mega-header-title-font-weight);
185
+ }
186
+
187
+ &__header-icon {
188
+ font-size: rem.rem(24px);
189
+ }
190
+
191
+ &__content-title {
192
+ color: var(--#{config.$prefix}menu-item-color);
193
+ font-size: var(--#{config.$prefix}menu-item-font-size);
194
+ font-weight: var(--#{config.$prefix}menu-item-font-weight);
195
+ }
196
+
197
+ &__content-text {
198
+ color: var(--#{config.$prefix}menu-subitem-color);
199
+ font-size: var(--#{config.$prefix}menu-item-font-size);
200
+ margin-top: var(--#{config.$prefix}menu-items-gap);
201
+ }
202
+
203
+ &__content-menu {
204
+ height: 100%;
205
+ padding-left: var(--#{config.$prefix}menu-mega-grid-gap);
206
+ border-left: 1px solid var(--#{config.$prefix}primary-border-subtle);
207
+ }
208
+
209
+ &__content-menu-title {
210
+ color: var(--#{config.$prefix}menu-subitem-color);
211
+ font-size: var(--#{config.$prefix}menu-item-font-size);
212
+ }
213
+
214
+ &__content-menu-list {
215
+ padding-left: 0;
216
+ list-style: none;
217
+ }
218
+
219
+ &__content-menu-item {
220
+ margin-top: rem.rem(12px);
221
+ }
222
+
223
+ &__content-menu-link {
224
+ color: var(--#{config.$prefix}menu-item-color);
225
+ font-size: var(--#{config.$prefix}menu-item-font-size);
226
+ font-weight: var(--#{config.$prefix}menu-item-font-weight);
227
+
228
+ &:hover {
229
+ color: var(--#{config.$prefix}menu-item-color);
230
+ }
231
+ }
232
+
233
+ &--mega {
234
+ width: 100%;
235
+ min-height: auto;
236
+ padding: var(--#{config.$prefix}menu-mega-padding-y) 0;
237
+ border-radius: 0px;
238
+ }
239
+ }
package/src/styles/06-components/_components.messages.scss CHANGED
@@ -51,7 +51,9 @@
51
51
  --#{config.$prefix}messages-image-border-radius: #{messages.$messages-image-border-radius};
52
52
  --#{config.$prefix}messages-form-margin-top: #{rem.rem(messages.$messages-form-margin-top)};
53
53
  --#{config.$prefix}messages-form-row-gap: #{rem.rem(messages.$messages-form-row-gap)};
54
- --#{config.$prefix}messages-form-submit-icon-size: #{rem.rem(messages.$messages-form-submit-icon-size)};
54
+ --#{config.$prefix}messages-form-submit-icon-size: #{rem.rem(
55
+ messages.$messages-form-submit-icon-size
56
+ )};
55
57
  --#{config.$prefix}messages-input-padding-x: #{rem.rem(messages.$messages-input-padding-x)};
56
58
  --#{config.$prefix}messages-input-padding-y: #{rem.rem(messages.$messages-input-padding-y)};
57
59
  --#{config.$prefix}messages-input-font-size: #{messages.$messages-input-font-size};
@@ -61,19 +63,20 @@
61
63
  --#{config.$prefix}messages-input-border-color: #{messages.$messages-input-border-color};
62
64
  --#{config.$prefix}messages-input-border-radius: #{messages.$messages-input-border-radius};
63
65
  --#{config.$prefix}messages-input-options-icons-size: #{messages.$messages-input-options-icons-size};
64
- --#{config.$prefix}messages-input-options-row-gap: #{rem.rem(messages.$messages-input-options-row-gap)};
66
+ --#{config.$prefix}messages-input-options-row-gap: #{rem.rem(
67
+ messages.$messages-input-options-row-gap
68
+ )};
65
69
  --#{config.$prefix}messages-body-height: #{messages.$messages-body-height};
66
70
 
67
71
  width: 100%;
68
72
  max-width: var(--#{config.$prefix}messages-width);
69
73
  min-width: var(--#{config.$prefix}messages-width);
70
- padding: var(--#{config.$prefix}messages-padding-y)
71
- var(--#{config.$prefix}messages-padding-x);
74
+ padding: var(--#{config.$prefix}messages-padding-y) var(--#{config.$prefix}messages-padding-x);
72
75
  border-radius: var(--#{config.$prefix}messages-border-radius);
73
76
  border: var(--#{config.$prefix}messages-border-width) solid
74
77
  var(--#{config.$prefix}messages-border-color);
75
78
  background-color: var(--#{config.$prefix}messages-bg);
76
-
79
+
77
80
  &__body {
78
81
  max-height: var(--#{config.$prefix}messages-body-height);
79
82
  min-height: var(--#{config.$prefix}messages-body-height);
@@ -83,7 +86,7 @@
83
86
  &__content {
84
87
  display: flex;
85
88
  align-items: flex-end;
86
-
89
+
87
90
  margin-top: var(--#{config.$prefix}messages-content-margin-top);
88
91
  }
89
92
 
@@ -98,17 +101,16 @@
98
101
  border: var(--#{config.$prefix}messages-items-border-width) solid
99
102
  var(--#{config.$prefix}messages-items-border-color);
100
103
 
101
-
102
- >*:first-child {
104
+ > *:first-child {
103
105
  border-radius: var(--#{config.$prefix}messages-text-border-radius)
104
- var(--#{config.$prefix}messages-text-border-radius)
105
- var(--#{config.$prefix}messages-text-border-radius) border.$border-radius-sm;
106
+ var(--#{config.$prefix}messages-text-border-radius)
107
+ var(--#{config.$prefix}messages-text-border-radius) border.$border-radius-sm;
106
108
  }
107
109
 
108
- >*:last-child {
110
+ > *:last-child {
109
111
  border-radius: border.$border-radius-sm var(--#{config.$prefix}messages-text-border-radius)
110
- var(--#{config.$prefix}messages-text-border-radius)
111
- var(--#{config.$prefix}messages-text-border-radius);
112
+ var(--#{config.$prefix}messages-text-border-radius)
113
+ var(--#{config.$prefix}messages-text-border-radius);
112
114
  }
113
115
  }
114
116
 
@@ -139,14 +141,17 @@
139
141
  padding: var(--#{config.$prefix}messages-text-padding-y)
140
142
  var(--#{config.$prefix}messages-text-padding-x);
141
143
  background-color: var(--#{config.$prefix}messages-text-bg);
142
- border-radius: border.$border-radius-sm var(--#{config.$prefix}messages-text-border-radius) var(--#{config.$prefix}messages-text-border-radius) border.$border-radius-sm;
144
+ border-radius: border.$border-radius-sm var(--#{config.$prefix}messages-text-border-radius)
145
+ var(--#{config.$prefix}messages-text-border-radius) border.$border-radius-sm;
143
146
  }
144
147
 
145
148
  &__file {
146
149
  display: flex;
147
150
  flex-wrap: wrap;
148
- padding: var(--#{config.$prefix}messages-file-padding-y) var(--#{config.$prefix}messages-file-padding-x);
149
- border-radius: border.$border-radius-sm var(--#{config.$prefix}messages-file-border-radius) var(--#{config.$prefix}messages-file-border-radius) border.$border-radius-sm;
151
+ padding: var(--#{config.$prefix}messages-file-padding-y)
152
+ var(--#{config.$prefix}messages-file-padding-x);
153
+ border-radius: border.$border-radius-sm var(--#{config.$prefix}messages-file-border-radius)
154
+ var(--#{config.$prefix}messages-file-border-radius) border.$border-radius-sm;
150
155
  background: var(--#{config.$prefix}messages-file-bg);
151
156
  }
152
157
 
@@ -159,7 +164,6 @@
159
164
  margin-right: var(--#{config.$prefix}messages-file-icon-margin-right);
160
165
  background-color: var(--#{config.$prefix}body-bg);
161
166
  border-radius: border.$border-radius-pill;
162
-
163
167
  }
164
168
 
165
169
  &__file-name {
@@ -173,8 +177,12 @@
173
177
  }
174
178
 
175
179
  &__image {
176
- @include size(var(--#{config.$prefix}messages-image-width), var(--#{config.$prefix}messages-image-height));
177
- border-radius: border.$border-radius-sm var(--#{config.$prefix}messages-image-border-radius) var(--#{config.$prefix}messages-image-border-radius) border.$border-radius-sm;
180
+ @include size(
181
+ var(--#{config.$prefix}messages-image-width),
182
+ var(--#{config.$prefix}messages-image-height)
183
+ );
184
+ border-radius: border.$border-radius-sm var(--#{config.$prefix}messages-image-border-radius)
185
+ var(--#{config.$prefix}messages-image-border-radius) border.$border-radius-sm;
178
186
  @include object-fit(cover);
179
187
  }
180
188
 
@@ -194,29 +202,31 @@
194
202
  var(--#{config.$prefix}messages-items-border-radius) 0
195
203
  var(--#{config.$prefix}messages-items-border-radius);
196
204
 
197
- >*:first-child {
198
- border-radius: var(--#{config.$prefix}messages-text-border-radius)
205
+ > *:first-child {
206
+ border-radius: var(--#{config.$prefix}messages-text-border-radius)
199
207
  var(--#{config.$prefix}messages-text-border-radius) border.$border-radius-sm
200
208
  var(--#{config.$prefix}messages-text-border-radius);
201
- }
202
-
203
- >*:last-child {
204
- border-radius: var(--#{config.$prefix}messages-text-border-radius) border.$border-radius-sm
205
- var(--#{config.$prefix}messages-text-border-radius)
209
+ }
210
+
211
+ > *:last-child {
212
+ border-radius: var(--#{config.$prefix}messages-text-border-radius)
213
+ border.$border-radius-sm var(--#{config.$prefix}messages-text-border-radius)
206
214
  var(--#{config.$prefix}messages-text-border-radius);
207
- }
215
+ }
208
216
  }
209
217
 
210
218
  &__text {
211
219
  --#{config.$prefix}messages-text-color: #{messages.$messages-text-primary-color};
212
220
  --#{config.$prefix}messages-text-bg: #{messages.$messages-text-primary-bg};
213
- border-radius: var(--#{config.$prefix}messages-text-border-radius) border.$border-radius-sm border.$border-radius-sm var(--#{config.$prefix}messages-text-border-radius);
221
+ border-radius: var(--#{config.$prefix}messages-text-border-radius) border.$border-radius-sm
222
+ border.$border-radius-sm var(--#{config.$prefix}messages-text-border-radius);
214
223
  }
215
224
 
216
225
  &__file {
217
226
  --#{config.$prefix}messages-file-text-color: #{messages.$messages-file-text-primary-color};
218
227
  --#{config.$prefix}messages-file-bg: #{messages.$messages-file-primary-bg};
219
- border-radius: var(--#{config.$prefix}messages-file-border-radius) border.$border-radius-sm border.$border-radius-sm var(--#{config.$prefix}messages-file-border-radius);
228
+ border-radius: var(--#{config.$prefix}messages-file-border-radius) border.$border-radius-sm
229
+ border.$border-radius-sm var(--#{config.$prefix}messages-file-border-radius);
220
230
 
221
231
  @include color-mode('dark') {
222
232
  --#{config.$prefix}messages-file-icon-bg: #{messages.$messages-file-icon-bg-dark};
@@ -224,7 +234,8 @@
224
234
  }
225
235
 
226
236
  &__image {
227
- border-radius: var(--#{config.$prefix}messages-image-border-radius) border.$border-radius-sm border.$border-radius-sm var(--#{config.$prefix}messages-image-border-radius);
237
+ border-radius: var(--#{config.$prefix}messages-image-border-radius) border.$border-radius-sm
238
+ border.$border-radius-sm var(--#{config.$prefix}messages-image-border-radius);
228
239
  }
229
240
 
230
241
  &__file-icon {
@@ -275,10 +286,12 @@
275
286
 
276
287
  &__input {
277
288
  width: 100%;
278
- padding: var(--#{config.$prefix}messages-input-padding-y) var(--#{config.$prefix}messages-input-padding-x);
289
+ padding: var(--#{config.$prefix}messages-input-padding-y)
290
+ var(--#{config.$prefix}messages-input-padding-x);
279
291
  color: var(--#{config.$prefix}messages-input-color);
280
292
  font-size: var(--#{config.$prefix}messages-input-font-size);
281
- border: var(--#{config.$prefix}messages-input-border-width) solid var(--#{config.$prefix}messages-input-border-color);
293
+ border: var(--#{config.$prefix}messages-input-border-width) solid
294
+ var(--#{config.$prefix}messages-input-border-color);
282
295
  border-radius: var(--#{config.$prefix}messages-input-border-radius);
283
296
  background-color: var(--#{config.$prefix}messages-bg);
284
297
  resize: none;
package/src/styles/06-components/_components.modal.scss CHANGED
@@ -140,7 +140,6 @@
140
140
  }
141
141
 
142
142
  &.is-open {
143
-
144
143
  #{$root} {
145
144
  &__backdrop {
146
145
  opacity: var(--#{config.$prefix}modal-backdrop-opacity);