@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/README.md CHANGED
@@ -1,173 +1,222 @@
1
1
  # Atomix Design System
2
2
 
3
- Atomix is a modern component library for React web applications.
3
+ Atomix is a modern component library for Web, React and Next.js applications with full SSR support. It provides a comprehensive set of UI components built with accessibility, performance, and developer experience in mind.
4
+
5
+ ## Features
6
+
7
+ - 🚀 **Next.js Compatible** - Full SSR support with App Router
8
+ - 🎨 **Modern Design** - Clean and contemporary design aesthetic
9
+ - 📱 **Responsive** - Mobile-first responsive components
10
+ - 🌓 **Theme Support** - Built-in dark/light theme support
11
+ - ♿ **Accessible** - WCAG compliant components
12
+ - 🛠️ **Customizable** - Extensive customization options
13
+ - 📦 **Tree Shakeable** - Import only what you need
14
+ - 🔧 **TypeScript** - Full TypeScript support
4
15
 
5
16
  ## Installation
6
17
 
7
18
  ```bash
8
19
  npm install @shohojdhara/atomix
20
+ # or
21
+ yarn add @shohojdhara/atomix
22
+ # or
23
+ pnpm add @shohojdhara/atomix
9
24
  ```
10
25
 
11
- ## Usage
26
+ ## Quick Start
12
27
 
13
- ### Importing Components
28
+ ### Next.js Integration
14
29
 
15
30
  ```tsx
16
- // Import specific components
17
- import { Button, Card } from '@shohojdhara/atomix';
18
-
19
- // Or import the default export
20
- import Atomix from '@shohojdhara/atomix';
21
- const { Button, Card } = Atomix;
31
+ // app/layout.tsx (App Router)
32
+ import '@shohojdhara/atomix/css'
33
+
34
+ export default function RootLayout({
35
+ children,
36
+ }: {
37
+ children: React.ReactNode
38
+ }) {
39
+ return (
40
+ <html lang="en">
41
+ <body>{children}</body>
42
+ </html>
43
+ )
44
+ }
22
45
  ```
23
46
 
24
- ### Importing Types
25
-
26
47
  ```tsx
27
- // Import component props types directly
28
- import { ButtonProps, CardProps } from '@shohojdhara/atomix';
29
-
30
- // Import specific types
31
- import { Size, ThemeColor } from '@shohojdhara/atomix/types/common';
32
- import { CardProps } from '@shohojdhara/atomix/types/components';
48
+ // app/page.tsx
49
+ import { Button, Hero, Card } from '@shohojdhara/atomix'
33
50
 
34
- // Import all common types
35
- import * as AtomixTypes from '@shohojdhara/atomix/types';
51
+ export default function HomePage() {
52
+ return (
53
+ <Hero
54
+ title="Welcome to Next.js with Atomix"
55
+ subtitle="Modern UI Components"
56
+ alignment="center"
57
+ actions={<Button variant="primary" label="Get Started" />}
58
+ />
59
+ )
60
+ }
36
61
  ```
37
62
 
38
- ### CSS Styles
63
+ For detailed Next.js integration guide, see [NEXTJS_INTEGRATION.md](./NEXTJS_INTEGRATION.md).
64
+
65
+ ### React Applications
39
66
 
40
67
  ```tsx
41
- // Import default CSS
42
- import '@shohojdhara/atomix/css';
68
+ // Import CSS
69
+ import '@shohojdhara/atomix/css'
43
70
 
44
- // Or minified CSS
45
- import '@shohojdhara/atomix/css/min';
71
+ // Import components
72
+ import { Button, Card, Modal } from '@shohojdhara/atomix'
46
73
 
47
- // Or import SCSS for customization
48
- import '@shohojdhara/atomix/scss';
74
+ function App() {
75
+ return (
76
+ <div>
77
+ <Card>
78
+ <div className="c-card__body">
79
+ <h3 className="c-card__title">Welcome to Atomix</h3>
80
+ <p className="c-card__text">Modern UI components for React</p>
81
+ <Button variant="primary" label="Get Started" />
82
+ </div>
83
+ </Card>
84
+ </div>
85
+ )
86
+ }
49
87
  ```
50
88
 
51
- ## Documentation
52
-
53
- For full documentation, visit [our Storybook](https://liimonx.github.io/atomix).
54
- Atomix is a modern, flexible design system that provides both React components and vanilla JavaScript functionality for building beautiful web applications.
89
+ ## Usage Options
55
90
 
56
- ## NPM Package
91
+ ### Import Styles
57
92
 
58
- The Atomix npm package now includes source files and configuration files, allowing for more customization options. See [NPM_PUBLISHING.md](./NPM_PUBLISHING.md) for more details on how to use these files.
93
+ ```tsx
94
+ // Default CSS
95
+ import '@shohojdhara/atomix/css'
59
96
 
60
- ## Installation
97
+ // Minified CSS
98
+ import '@shohojdhara/atomix/css/min'
61
99
 
62
- ```bash
63
- npm install atomix
64
- # or
65
- yarn add atomix
100
+ // SCSS for customization
101
+ import '@shohojdhara/atomix/scss'
66
102
  ```
67
103
 
68
- ## Usage
69
-
70
- ### React Components
104
+ ### Import Components
71
105
 
72
- ```jsx
73
- import React from 'react';
74
- import { Button, Modal, Tooltip } from '@shohojdhara/atomix';
75
- // or import directly
76
- import { Button, Modal, Tooltip } from '@shohojdhara/atomix';
77
-
78
- // Import the CSS
79
- import '@shohojdhara/atomix/css';
106
+ ```tsx
107
+ // Named imports (recommended for tree shaking)
108
+ import { Button, Card, Modal } from '@shohojdhara/atomix'
80
109
 
81
- function App() {
82
- return (
83
- <div>
84
- <Button variant="primary" size="md">Click Me</Button>
85
- <Tooltip content="This is a tooltip">Hover me</Tooltip>
86
- </div>
87
- );
88
- }
110
+ // Default import
111
+ import Atomix from '@shohojdhara/atomix'
112
+ const { Button, Card } = Atomix
89
113
  ```
90
114
 
91
115
  ### TypeScript Support
92
116
 
93
- Atomix includes comprehensive TypeScript declarations for all components and utilities:
94
-
95
117
  ```tsx
96
- import React from 'react';
97
- import { Button, Card, useColorMode } from '@shohojdhara/atomix';
118
+ import { ButtonProps, CardProps, Size, ThemeColor } from '@shohojdhara/atomix'
98
119
 
99
- // Component props are fully typed
100
- const MyComponent: React.FC = () => {
101
- // Typed hooks
102
- const { colorMode, setColorMode } = useColorMode();
103
-
104
- return (
105
- <Card title="TypeScript Example" className="my-card">
106
- <Button
107
- variant="primary"
108
- size="md"
109
- onClick={() => setColorMode(colorMode === 'dark' ? 'light' : 'dark')}
110
- >
111
- Toggle Theme
112
- </Button>
113
- </Card>
114
- );
120
+ // Component with typed props
121
+ const MyButton: React.FC<ButtonProps> = (props) => {
122
+ return <Button {...props} />
115
123
  }
116
124
  ```
117
125
 
118
- ### Vanilla JavaScript
119
-
120
- ```html
121
- <!DOCTYPE html>
122
- <html>
123
- <head>
124
- <title>Atomix Example</title>
125
- <!-- Include the CSS -->
126
- <link rel="stylesheet" href="node_modules/atomix/dist/css/atomix-0.1.0.styles.css">
127
- </head>
128
- <body>
129
- <!-- Button component -->
130
- <button class="c-btn c-btn--primary c-btn--md">Click Me</button>
126
+ ## Available Components
127
+
128
+ ### Core Components
129
+ - **Button** - Versatile button component with multiple variants
130
+ - **Card** - Flexible content container
131
+ - **Badge** - Status and labeling component
132
+ - **Avatar** - User profile images and placeholders
133
+
134
+ ### Navigation
135
+ - **Navbar** - Application navigation bar
136
+ - **Breadcrumb** - Navigation breadcrumbs
137
+ - **Pagination** - Data pagination controls
138
+ - **Steps** - Step-by-step navigation
139
+
140
+ ### Form Components
141
+ - **Input** - Text input fields
142
+ - **Select** - Dropdown selection
143
+ - **Checkbox** - Checkbox inputs
144
+ - **Radio** - Radio button inputs
145
+ - **Toggle** - Switch toggle controls
146
+
147
+ ### Feedback
148
+ - **Modal** - Dialog and overlay modals
149
+ - **Tooltip** - Contextual tooltips
150
+ - **Popover** - Rich contextual popovers
151
+ - **Messages** - Alert and notification messages
152
+ - **Progress** - Progress indicators
153
+
154
+ ### Data Display
155
+ - **DataTable** - Feature-rich data tables
156
+ - **List** - Structured lists
157
+ - **Accordion** - Collapsible content sections
158
+ - **Tabs** - Tabbed content organization
159
+
160
+ ### Layout
161
+ - **Hero** - Hero sections with background support
162
+ - **Grid** - Responsive grid system
163
+ - **Container** - Content containers
164
+
165
+ And many more! See our [Storybook](https://liimonx.github.io/atomix/storybook) for the complete component library.
166
+
167
+ ## Customization
168
+
169
+ ### CSS Variables
170
+
171
+ ```css
172
+ :root {
173
+ /* Primary Colors */
174
+ --atomix-primary-50: #eff6ff;
175
+ --atomix-primary-500: #3b82f6;
176
+ --atomix-primary-900: #1e3a8a;
131
177
 
132
- <!-- Tooltip component -->
133
- <div class="c-tooltip" data-tooltip="This is a tooltip">
134
- <span class="c-tooltip__trigger">Hover me</span>
135
- </div>
136
-
137
- <!-- Include the JavaScript -->
138
- <script src="node_modules/atomix/dist/js/atomix-0.1.0.vanilla.js"></script>
139
- <script>
140
- // Initialize all components
141
- document.addEventListener('DOMContentLoaded', function() {
142
- // Atomix is available as a global variable
143
- Atomix.initializeAll();
144
-
145
- // Or initialize specific components
146
- // Atomix.Button.initializeAll();
147
- // Atomix.Tooltip.initializeAll();
148
- });
149
- </script>
150
- </body>
151
- </html>
178
+ /* Spacing */
179
+ --atomix-spacing-xs: 0.25rem;
180
+ --atomix-spacing-sm: 0.5rem;
181
+ --atomix-spacing-md: 1rem;
182
+ }
152
183
  ```
153
184
 
154
- Alternatively, you can import the vanilla JS version in your JavaScript files:
185
+ ### Theme Support
155
186
 
156
- ```js
157
- // Import the vanilla JS version
158
- import Atomix from 'atomix/vanilla';
187
+ ```tsx
188
+ // Set theme programmatically
189
+ document.documentElement.setAttribute('data-atomix-theme', 'dark')
159
190
 
160
- // Initialize all components
161
- document.addEventListener('DOMContentLoaded', function() {
162
- Atomix.initializeAll();
163
- });
191
+ // Or use CSS
192
+ html[data-atomix-theme="dark"] {
193
+ /* Dark theme styles */
194
+ }
164
195
  ```
165
196
 
197
+ ## Browser Support
198
+
199
+ - Chrome (latest)
200
+ - Firefox (latest)
201
+ - Safari (latest)
202
+ - Edge (latest)
166
203
 
167
204
  ## Documentation
168
205
 
169
- For detailed documentation and examples, visit our [documentation site](https://github.com/liimonx/atomix).
206
+ - 📚 [Full Documentation](https://liimonx.github.io/atomix)
207
+ - 🎨 [Storybook](https://liimonx.github.io/atomix/storybook)
208
+ - 🚀 [Next.js Integration Guide](./NEXTJS_INTEGRATION.md)
209
+ - 📝 [Contributing Guide](./CONTRIBUTING.md)
210
+
211
+ ## Contributing
212
+
213
+ We welcome contributions! Please see our [Contributing Guide](./CONTRIBUTING.md) for details.
170
214
 
171
215
  ## License
172
216
 
173
- MIT
217
+ MIT © [liimonx](https://github.com/liimonx)
218
+
219
+ ## Support
220
+
221
+ - [GitHub Issues](https://github.com/liimonx/atomix/issues)
222
+ - [Discussions](https://github.com/liimonx/atomix/discussions)
package/babel.config.js ADDED
@@ -0,0 +1,58 @@
1
+ module.exports = {
2
+ presets: [
3
+ ['@babel/preset-env', {
4
+ targets: {
5
+ browsers: [
6
+ 'last 2 versions',
7
+ 'not dead',
8
+ 'not IE 11',
9
+ '> 1%'
10
+ ],
11
+ node: '16'
12
+ },
13
+ useBuiltIns: 'usage',
14
+ corejs: 3,
15
+ bugfixes: true,
16
+ loose: false,
17
+ modules: false,
18
+ debug: process.env.NODE_ENV === 'development'
19
+ }],
20
+ ['@babel/preset-react', {
21
+ runtime: 'automatic',
22
+ development: process.env.NODE_ENV === 'development',
23
+ importSource: 'react'
24
+ }],
25
+ ['@babel/preset-typescript', {
26
+ isTSX: true,
27
+ allExtensions: true,
28
+ allowDeclareFields: true,
29
+ allowNamespaces: true,
30
+ optimizeConstEnums: true
31
+ }]
32
+ ],
33
+ plugins: [
34
+ ['@babel/plugin-transform-runtime', {
35
+ corejs: 3,
36
+ helpers: true,
37
+ regenerator: true
38
+ }]
39
+ ],
40
+ env: {
41
+ production: {
42
+ compact: true,
43
+ comments: false,
44
+ minified: true
45
+ },
46
+ test: {
47
+ presets: [
48
+ ['@babel/preset-env', { targets: { node: 'current' } }]
49
+ ]
50
+ }
51
+ },
52
+ ignore: [
53
+ '**/*.d.ts',
54
+ '**/*.test.ts',
55
+ '**/*.test.tsx',
56
+ 'node_modules'
57
+ ]
58
+ };
package/css.d.ts ADDED
@@ -0,0 +1,10 @@
1
+ // Type definitions for CSS imports
2
+ declare module '@shohojdhara/atomix/css' {
3
+ const content: void;
4
+ export default content;
5
+ }
6
+
7
+ declare module '@shohojdhara/atomix/css/min' {
8
+ const content: void;
9
+ export default content;
10
+ }