@shohojdhara/atomix 0.3.15 → 0.4.1

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 (276) hide show
  1. package/build-tools/index.d.ts +31 -30
  2. package/build-tools/package.json +4 -21
  3. package/dist/atomix.css +20234 -2027
  4. package/dist/atomix.css.map +1 -1
  5. package/dist/atomix.min.css +76 -2
  6. package/dist/atomix.min.css.map +1 -1
  7. package/dist/build-tools/index.d.ts +31 -30
  8. package/dist/build-tools/package.json +4 -21
  9. package/dist/charts.js +4 -5
  10. package/dist/charts.js.map +1 -1
  11. package/dist/core.d.ts +87 -10
  12. package/dist/core.js +673 -480
  13. package/dist/core.js.map +1 -1
  14. package/dist/forms.d.ts +15 -3
  15. package/dist/forms.js +530 -97
  16. package/dist/forms.js.map +1 -1
  17. package/dist/heavy.js +5 -6
  18. package/dist/heavy.js.map +1 -1
  19. package/dist/index.d.ts +644 -277
  20. package/dist/index.esm.js +1948 -1347
  21. package/dist/index.esm.js.map +1 -1
  22. package/dist/index.js +3333 -2728
  23. package/dist/index.js.map +1 -1
  24. package/dist/index.min.js +1 -1
  25. package/dist/index.min.js.map +1 -1
  26. package/dist/layout.js.map +1 -1
  27. package/dist/theme.d.ts +9 -9
  28. package/dist/theme.js.map +1 -1
  29. package/package.json +2 -2
  30. package/scripts/atomix-cli.js +10 -1
  31. package/scripts/cli/__tests__/utils.test.js +6 -2
  32. package/scripts/cli/migration-tools.js +2 -2
  33. package/scripts/cli/theme-bridge.js +7 -9
  34. package/scripts/cli/utils.js +2 -1
  35. package/src/components/Accordion/Accordion.stories.tsx +72 -23
  36. package/src/components/Accordion/Accordion.test.tsx +70 -50
  37. package/src/components/Accordion/Accordion.tsx +219 -96
  38. package/src/components/Accordion/AccordionCompound.test.tsx +70 -0
  39. package/src/components/AtomixGlass/AtomixGlass.test.tsx +1 -1
  40. package/src/components/AtomixGlass/GlassFilter.tsx +9 -16
  41. package/src/components/AtomixGlass/glass-utils.ts +4 -3
  42. package/src/components/AtomixGlass/shader-utils.ts +128 -52
  43. package/src/components/AtomixGlass/stories/Playground.stories.tsx +1 -1
  44. package/src/components/AtomixGlass/stories/Shaders.stories.tsx +1 -1
  45. package/src/components/Avatar/Avatar.stories.tsx +45 -62
  46. package/src/components/Avatar/Avatar.tsx +58 -56
  47. package/src/components/Badge/Badge.stories.tsx +20 -9
  48. package/src/components/Badge/Badge.test.tsx +41 -41
  49. package/src/components/Badge/Badge.tsx +64 -62
  50. package/src/components/Block/Block.stories.tsx +14 -4
  51. package/src/components/Breadcrumb/Breadcrumb.stories.tsx +9 -8
  52. package/src/components/Breadcrumb/Breadcrumb.tsx +173 -65
  53. package/src/components/Breadcrumb/BreadcrumbCompound.test.tsx +84 -0
  54. package/src/components/Button/Button.stories.tsx +13 -22
  55. package/src/components/Button/Button.test.tsx +97 -81
  56. package/src/components/Button/Button.tsx +46 -14
  57. package/src/components/Button/ButtonGroup.stories.tsx +37 -32
  58. package/src/components/Button/ButtonGroup.tsx +4 -15
  59. package/src/components/Callout/Callout.stories.tsx +166 -918
  60. package/src/components/Callout/Callout.tsx +196 -84
  61. package/src/components/Callout/CalloutCompound.test.tsx +72 -0
  62. package/src/components/Card/Card.stories.tsx +67 -36
  63. package/src/components/Card/Card.tsx +30 -14
  64. package/src/components/Chart/AreaChart.tsx +1 -1
  65. package/src/components/Chart/CandlestickChart.tsx +23 -16
  66. package/src/components/Chart/Chart.stories.tsx +4 -9
  67. package/src/components/Chart/Chart.tsx +40 -44
  68. package/src/components/Chart/ChartRenderer.tsx +39 -12
  69. package/src/components/Chart/ChartToolbar.tsx +21 -5
  70. package/src/components/Chart/DonutChart.tsx +1 -1
  71. package/src/components/Chart/FunnelChart.tsx +4 -1
  72. package/src/components/Chart/GaugeChart.tsx +3 -1
  73. package/src/components/Chart/HeatmapChart.tsx +50 -37
  74. package/src/components/Chart/LineChart.tsx +3 -2
  75. package/src/components/Chart/MultiAxisChart.tsx +24 -16
  76. package/src/components/Chart/RadarChart.tsx +19 -17
  77. package/src/components/Chart/ScatterChart.tsx +29 -21
  78. package/src/components/ColorModeToggle/ColorModeToggle.stories.tsx +6 -2
  79. package/src/components/ColorModeToggle/ColorModeToggle.tsx +15 -3
  80. package/src/components/Countdown/Countdown.stories.tsx +7 -7
  81. package/src/components/DataTable/DataTable.stories.tsx +43 -38
  82. package/src/components/DataTable/DataTable.test.tsx +26 -148
  83. package/src/components/DataTable/DataTable.tsx +485 -456
  84. package/src/components/DatePicker/DatePicker.stories.tsx +32 -47
  85. package/src/components/DatePicker/DatePicker.tsx +31 -26
  86. package/src/components/Dropdown/Dropdown.stories.tsx +2 -5
  87. package/src/components/Dropdown/Dropdown.tsx +425 -298
  88. package/src/components/Dropdown/DropdownCompound.test.tsx +64 -0
  89. package/src/components/EdgePanel/EdgePanel.stories.tsx +6 -19
  90. package/src/components/EdgePanel/EdgePanel.tsx +163 -113
  91. package/src/components/EdgePanel/EdgePanelCompound.test.tsx +53 -0
  92. package/src/components/Footer/Footer.stories.tsx +21 -16
  93. package/src/components/Footer/Footer.tsx +130 -128
  94. package/src/components/Footer/FooterLink.tsx +2 -2
  95. package/src/components/Form/Checkbox.test.tsx +49 -49
  96. package/src/components/Form/Checkbox.tsx +108 -100
  97. package/src/components/Form/Form.stories.tsx +2 -10
  98. package/src/components/Form/Input.stories.tsx +22 -39
  99. package/src/components/Form/Input.test.tsx +38 -44
  100. package/src/components/Form/Radio.stories.tsx +6 -12
  101. package/src/components/Form/Radio.tsx +68 -66
  102. package/src/components/Form/Select.stories.tsx +23 -0
  103. package/src/components/Form/Select.test.tsx +99 -0
  104. package/src/components/Form/Select.tsx +239 -186
  105. package/src/components/Form/SelectOption.tsx +88 -0
  106. package/src/components/Form/Textarea.test.tsx +27 -32
  107. package/src/components/Hero/Hero.stories.tsx +93 -23
  108. package/src/components/Hero/Hero.test.tsx +142 -0
  109. package/src/components/Hero/Hero.tsx +343 -58
  110. package/src/components/Icon/index.ts +7 -1
  111. package/src/components/List/List.test.tsx +62 -0
  112. package/src/components/List/List.tsx +32 -25
  113. package/src/components/List/ListItem.tsx +20 -0
  114. package/src/components/Modal/Modal.stories.tsx +67 -2
  115. package/src/components/Modal/Modal.tsx +208 -125
  116. package/src/components/Modal/ModalCompound.test.tsx +94 -0
  117. package/src/components/Navigation/Menu/MegaMenu.tsx +70 -70
  118. package/src/components/Navigation/Nav/NavDropdown.tsx +1 -5
  119. package/src/components/Navigation/SideMenu/SideMenu.stories.tsx +128 -28
  120. package/src/components/Navigation/SideMenu/SideMenu.tsx +5 -7
  121. package/src/components/Navigation/SideMenu/SideMenuItem.tsx +4 -5
  122. package/src/components/Pagination/Pagination.stories.tsx +7 -4
  123. package/src/components/Pagination/Pagination.tsx +199 -202
  124. package/src/components/PhotoViewer/PhotoViewer.tsx +4 -1
  125. package/src/components/Popover/Popover.stories.tsx +99 -192
  126. package/src/components/Popover/Popover.tsx +41 -37
  127. package/src/components/Progress/Progress.stories.tsx +35 -44
  128. package/src/components/River/River.stories.tsx +2 -1
  129. package/src/components/SectionIntro/SectionIntro.stories.tsx +71 -71
  130. package/src/components/Slider/Slider.stories.tsx +12 -4
  131. package/src/components/Spinner/Spinner.stories.tsx +3 -1
  132. package/src/components/Spinner/Spinner.test.tsx +23 -23
  133. package/src/components/Spinner/Spinner.tsx +43 -46
  134. package/src/components/Steps/Steps.stories.tsx +8 -6
  135. package/src/components/Steps/Steps.tsx +124 -21
  136. package/src/components/Steps/StepsCompound.test.tsx +81 -0
  137. package/src/components/Tabs/Tabs.stories.tsx +12 -9
  138. package/src/components/Tabs/Tabs.tsx +230 -75
  139. package/src/components/Tabs/TabsCompound.test.tsx +64 -0
  140. package/src/components/Toggle/Toggle.stories.tsx +27 -13
  141. package/src/components/Toggle/Toggle.test.tsx +65 -70
  142. package/src/components/Toggle/Toggle.tsx +4 -1
  143. package/src/components/Tooltip/Tooltip.stories.tsx +24 -20
  144. package/src/components/Tooltip/Tooltip.tsx +104 -106
  145. package/src/components/Upload/Upload.stories.tsx +129 -127
  146. package/src/components/Upload/Upload.tsx +287 -283
  147. package/src/components/VideoPlayer/VideoPlayer.tsx +6 -1
  148. package/src/components/index.ts +13 -2
  149. package/src/layouts/Grid/Grid.stories.tsx +9 -3
  150. package/src/layouts/MasonryGrid/MasonryGrid.tsx +5 -1
  151. package/src/lib/__tests__/theme-tools.test.ts +32 -6
  152. package/src/lib/composables/index.ts +0 -4
  153. package/src/lib/composables/shared-mouse-tracker.ts +13 -14
  154. package/src/lib/composables/useAtomixGlass.ts +102 -60
  155. package/src/lib/composables/useChartExport.ts +1 -1
  156. package/src/lib/composables/useDataTable.ts +29 -17
  157. package/src/lib/composables/useHero.ts +58 -14
  158. package/src/lib/composables/useHeroBackgroundSlider.ts +2 -9
  159. package/src/lib/composables/useInput.ts +10 -8
  160. package/src/lib/composables/useSideMenu.ts +6 -5
  161. package/src/lib/composables/useTooltip.ts +1 -2
  162. package/src/lib/composables/useVideoPlayer.ts +44 -35
  163. package/src/lib/config/index.ts +154 -154
  164. package/src/lib/constants/cssVariables.ts +29 -29
  165. package/src/lib/hooks/__tests__/useComponentCustomization.test.ts +2 -6
  166. package/src/lib/hooks/index.ts +1 -1
  167. package/src/lib/hooks/useComponentCustomization.ts +11 -17
  168. package/src/lib/hooks/usePerformanceMonitor.ts +6 -7
  169. package/src/lib/patterns/__tests__/slots.test.ts +1 -1
  170. package/src/lib/patterns/index.ts +1 -1
  171. package/src/lib/patterns/slots.tsx +8 -13
  172. package/src/lib/storybook/InteractiveDemo.tsx +13 -18
  173. package/src/lib/storybook/PreviewContainer.tsx +1 -1
  174. package/src/lib/storybook/VariantsGrid.tsx +3 -7
  175. package/src/lib/storybook/index.ts +1 -1
  176. package/src/lib/theme/adapters/cssVariableMapper.ts +47 -74
  177. package/src/lib/theme/adapters/index.ts +3 -9
  178. package/src/lib/theme/adapters/themeAdapter.ts +41 -26
  179. package/src/lib/theme/config/index.ts +1 -1
  180. package/src/lib/theme/config/types.ts +2 -2
  181. package/src/lib/theme/config/validator.ts +10 -5
  182. package/src/lib/theme/constants/constants.ts +2 -2
  183. package/src/lib/theme/constants/index.ts +1 -2
  184. package/src/lib/theme/core/__tests__/createTheme.test.ts +20 -22
  185. package/src/lib/theme/core/composeTheme.ts +32 -26
  186. package/src/lib/theme/core/createTheme.ts +1 -1
  187. package/src/lib/theme/core/createThemeObject.ts +308 -301
  188. package/src/lib/theme/core/index.ts +3 -3
  189. package/src/lib/theme/devtools/CLI.ts +105 -111
  190. package/src/lib/theme/devtools/Comparator.tsx +50 -32
  191. package/src/lib/theme/devtools/DesignTokensCustomizer.stories.tsx +50 -48
  192. package/src/lib/theme/devtools/DesignTokensCustomizer.tsx +257 -63
  193. package/src/lib/theme/devtools/Inspector.tsx +75 -60
  194. package/src/lib/theme/devtools/LiveEditor.tsx +97 -76
  195. package/src/lib/theme/devtools/Preview.tsx +150 -106
  196. package/src/lib/theme/devtools/ThemeValidator.ts +29 -21
  197. package/src/lib/theme/devtools/index.ts +3 -9
  198. package/src/lib/theme/devtools/useHistory.ts +23 -21
  199. package/src/lib/theme/errors/errors.ts +12 -11
  200. package/src/lib/theme/errors/index.ts +2 -7
  201. package/src/lib/theme/generators/generateCSS.ts +9 -13
  202. package/src/lib/theme/generators/generateCSSNested.ts +1 -6
  203. package/src/lib/theme/generators/generateCSSVariables.ts +673 -630
  204. package/src/lib/theme/generators/index.ts +1 -4
  205. package/src/lib/theme/i18n/index.ts +1 -1
  206. package/src/lib/theme/i18n/rtl.ts +13 -13
  207. package/src/lib/theme/index.ts +7 -16
  208. package/src/lib/theme/runtime/ThemeApplicator.ts +4 -4
  209. package/src/lib/theme/runtime/ThemeContext.tsx +1 -1
  210. package/src/lib/theme/runtime/ThemeErrorBoundary.tsx +19 -23
  211. package/src/lib/theme/runtime/ThemeProvider.tsx +230 -239
  212. package/src/lib/theme/runtime/__tests__/ThemeProvider.integration.test.tsx +1 -1
  213. package/src/lib/theme/runtime/__tests__/ThemeProvider.test.tsx +24 -29
  214. package/src/lib/theme/runtime/index.ts +2 -5
  215. package/src/lib/theme/runtime/useTheme.ts +18 -18
  216. package/src/lib/theme/runtime/useThemeTokens.ts +22 -22
  217. package/src/lib/theme/test/testTheme.ts +15 -16
  218. package/src/lib/theme/tokens/index.ts +2 -7
  219. package/src/lib/theme/tokens/tokens.ts +25 -24
  220. package/src/lib/theme/types.ts +428 -411
  221. package/src/lib/theme/utils/__tests__/themeValidation.test.ts +3 -3
  222. package/src/lib/theme/utils/componentTheming.ts +18 -18
  223. package/src/lib/theme/utils/domUtils.ts +277 -289
  224. package/src/lib/theme/utils/index.ts +1 -2
  225. package/src/lib/theme/utils/injectCSS.ts +10 -14
  226. package/src/lib/theme/utils/naming.ts +20 -16
  227. package/src/lib/theme/utils/themeHelpers.ts +10 -12
  228. package/src/lib/theme/utils/themeUtils.ts +85 -86
  229. package/src/lib/theme/utils/themeValidation.ts +82 -33
  230. package/src/lib/theme-tools.ts +8 -6
  231. package/src/lib/types/components.ts +180 -73
  232. package/src/lib/types/partProps.ts +1 -1
  233. package/src/lib/utils/__tests__/componentUtils.test.ts +57 -2
  234. package/src/lib/utils/__tests__/csv.test.ts +1 -1
  235. package/src/lib/utils/__tests__/themeNaming.test.ts +117 -0
  236. package/src/lib/utils/componentUtils.ts +8 -12
  237. package/src/lib/utils/csv.ts +3 -1
  238. package/src/lib/utils/dataTableExport.ts +1 -5
  239. package/src/lib/utils/fontPreloader.ts +10 -19
  240. package/src/lib/utils/icons.ts +4 -1
  241. package/src/lib/utils/index.ts +2 -6
  242. package/src/lib/utils/memoryMonitor.ts +10 -8
  243. package/src/lib/utils/themeNaming.ts +3 -3
  244. package/src/styles/01-settings/_index.scss +0 -1
  245. package/src/styles/01-settings/_settings.colors.scss +8 -8
  246. package/src/styles/01-settings/_settings.design-tokens.scss +61 -50
  247. package/src/styles/01-settings/_settings.navbar.scss +1 -1
  248. package/src/styles/01-settings/_settings.spacing.scss +3 -4
  249. package/src/styles/01-settings/_settings.tooltip.scss +1 -1
  250. package/src/styles/01-settings/_settings.typography.scss +1 -1
  251. package/src/styles/02-tools/_tools.breakpoints.scss +1 -1
  252. package/src/styles/02-tools/_tools.button.scss +51 -21
  253. package/src/styles/02-tools/_tools.utility-api.scss +36 -24
  254. package/src/styles/03-generic/_generic.root.scss +4 -3
  255. package/src/styles/06-components/_components.atomix-glass.scss +13 -9
  256. package/src/styles/06-components/_components.button.scss +16 -4
  257. package/src/styles/06-components/_components.callout.scss +27 -21
  258. package/src/styles/06-components/_components.card.scss +5 -14
  259. package/src/styles/06-components/_components.chart.scss +22 -19
  260. package/src/styles/06-components/_components.checkbox.scss +3 -1
  261. package/src/styles/06-components/_components.color-mode-toggle.scss +3 -1
  262. package/src/styles/06-components/_components.edge-panel.scss +9 -2
  263. package/src/styles/06-components/_components.footer.scss +1 -1
  264. package/src/styles/06-components/_components.side-menu.scss +5 -5
  265. package/src/styles/06-components/_components.toggle.scss +18 -0
  266. package/src/styles/06-components/_index.scss +1 -1
  267. package/src/styles/06-components/old.chart.styles.scss +0 -2
  268. package/src/styles/99-utilities/_utilities.border.scss +69 -27
  269. package/src/styles/99-utilities/_utilities.display.scss +1 -1
  270. package/src/styles/99-utilities/_utilities.opacity.scss +10 -0
  271. package/src/styles/99-utilities/_utilities.position.scss +16 -9
  272. package/src/styles/99-utilities/_utilities.scss +1 -1
  273. package/src/styles/99-utilities/_utilities.sizes.scss +47 -18
  274. package/src/styles/99-utilities/_utilities.spacing.scss +118 -66
  275. package/src/styles/99-utilities/_utilities.text-gradient.scss +30 -30
  276. package/src/styles/99-utilities/_utilities.text.scss +67 -47
@@ -171,7 +171,12 @@ export const VideoPlayer = forwardRef<HTMLVideoElement, VideoPlayerProps>(
171
171
  const video = videoRef.current;
172
172
  if (video) {
173
173
  const tracks = video.textTracks;
174
- console.log('Setting subtitle:', subtitleLang ? 'enabled' : 'disabled', 'Available tracks:', tracks.length);
174
+ console.log(
175
+ 'Setting subtitle:',
176
+ subtitleLang ? 'enabled' : 'disabled',
177
+ 'Available tracks:',
178
+ tracks.length
179
+ );
175
180
 
176
181
  // Hide all tracks first
177
182
  for (let i = 0; i < tracks.length; i++) {
@@ -110,9 +110,20 @@ export {
110
110
  type SideMenuListProps,
111
111
  } from './Navigation/SideMenu/SideMenuList';
112
112
  // Menu components
113
- export { Menu, MenuItem, MenuDivider, type MenuProps, type MenuItemProps, type MenuDividerProps } from './Navigation/Menu/Menu';
113
+ export {
114
+ Menu,
115
+ MenuItem,
116
+ MenuDivider,
117
+ type MenuProps,
118
+ type MenuItemProps,
119
+ type MenuDividerProps,
120
+ } from './Navigation/Menu/Menu';
114
121
  export { MegaMenu, MegaMenuColumn, MegaMenuLink } from './Navigation/Menu/MegaMenu';
115
- export type { MegaMenuProps, MegaMenuColumnProps, MegaMenuLinkProps } from '../lib/types/components';
122
+ export type {
123
+ MegaMenuProps,
124
+ MegaMenuColumnProps,
125
+ MegaMenuLinkProps,
126
+ } from '../lib/types/components';
116
127
  // Navigation sub-components
117
128
  export { NavDropdown, type NavDropdownProps } from './Navigation/Nav/NavDropdown';
118
129
  export { default as Pagination, type PaginationProps } from './Pagination/Pagination';
@@ -549,7 +549,9 @@ export const AlignmentAndSpacing: Story = {
549
549
  </p>
550
550
 
551
551
  <div className="u-mb-6">
552
- <h3 className="u-mb-3 u-text-secondary-emphasis u-font-medium">justify-content="start"</h3>
552
+ <h3 className="u-mb-3 u-text-secondary-emphasis u-font-medium">
553
+ justify-content="start"
554
+ </h3>
553
555
  <Row justifyContent="start" className="u-mb-4 u-p-3 u-bg-brand-subtle u-rounded">
554
556
  <GridCol xs={3}>
555
557
  <DemoCard variant="secondary">Col 1</DemoCard>
@@ -561,7 +563,9 @@ export const AlignmentAndSpacing: Story = {
561
563
  </div>
562
564
 
563
565
  <div className="u-mb-6">
564
- <h3 className="u-mb-3 u-text-secondary-emphasis u-font-medium">justify-content="center"</h3>
566
+ <h3 className="u-mb-3 u-text-secondary-emphasis u-font-medium">
567
+ justify-content="center"
568
+ </h3>
565
569
  <Row justifyContent="center" className="u-mb-4 u-p-3 u-bg-brand-subtle u-rounded">
566
570
  <GridCol xs={3}>
567
571
  <DemoCard variant="secondary">Col 1</DemoCard>
@@ -587,7 +591,9 @@ export const AlignmentAndSpacing: Story = {
587
591
  </div>
588
592
 
589
593
  <div className="u-mb-6">
590
- <h3 className="u-mb-3 u-text-secondary-emphasis u-font-medium">justify-content="around"</h3>
594
+ <h3 className="u-mb-3 u-text-secondary-emphasis u-font-medium">
595
+ justify-content="around"
596
+ </h3>
591
597
  <Row justifyContent="around" className="u-mb-4 u-p-3 u-bg-brand-subtle u-rounded">
592
598
  <GridCol xs={3}>
593
599
  <DemoCard variant="secondary">Col 1</DemoCard>
@@ -374,7 +374,11 @@ export const MasonryGrid = forwardRef<HTMLDivElement, MasonryGridProps>(
374
374
  const position = positions[index];
375
375
  if (!position) {
376
376
  return (
377
- <div key={item.id} ref={item.ref as React.LegacyRef<HTMLDivElement>} style={{ opacity: 0, position: 'absolute' }}>
377
+ <div
378
+ key={item.id}
379
+ ref={item.ref as React.LegacyRef<HTMLDivElement>}
380
+ style={{ opacity: 0, position: 'absolute' }}
381
+ >
378
382
  {item.element}
379
383
  </div>
380
384
  );
@@ -7,7 +7,7 @@ import {
7
7
  validateTheme,
8
8
  themeToCSS,
9
9
  getThemeMetadata,
10
- supportsDarkMode
10
+ supportsDarkMode,
11
11
  } from '../theme-tools';
12
12
  import { Theme } from '../theme/types';
13
13
 
@@ -59,13 +59,39 @@ describe('theme-tools', () => {
59
59
  },
60
60
  shadows: { xs: 'none', sm: 'none', md: 'none', lg: 'none', xl: 'none' },
61
61
  transitions: {
62
- duration: { shortest: 150, shorter: 200, short: 250, standard: 300, complex: 375, enteringScreen: 225, leavingScreen: 195 },
63
- easing: { easeInOut: 'ease', easeOut: 'ease', easeIn: 'ease', sharp: 'ease' }
62
+ duration: {
63
+ shortest: 150,
64
+ shorter: 200,
65
+ short: 250,
66
+ standard: 300,
67
+ complex: 375,
68
+ enteringScreen: 225,
69
+ leavingScreen: 195,
70
+ },
71
+ easing: { easeInOut: 'ease', easeOut: 'ease', easeIn: 'ease', sharp: 'ease' },
72
+ },
73
+ zIndex: {
74
+ mobileStepper: 1000,
75
+ speedDial: 1050,
76
+ appBar: 1100,
77
+ drawer: 1200,
78
+ modal: 1300,
79
+ snackbar: 1400,
80
+ tooltip: 1500,
81
+ },
82
+ borderRadius: {
83
+ base: 4,
84
+ sm: 2,
85
+ md: 4,
86
+ lg: 8,
87
+ xl: 12,
88
+ xxl: 16,
89
+ '3xl': 24,
90
+ '4xl': 32,
91
+ pill: 9999,
64
92
  },
65
- zIndex: { mobileStepper: 1000, speedDial: 1050, appBar: 1100, drawer: 1200, modal: 1300, snackbar: 1400, tooltip: 1500 },
66
- borderRadius: { base: 4, sm: 2, md: 4, lg: 8, xl: 12, xxl: 16, '3xl': 24, '4xl': 32, pill: 9999 },
67
93
  custom: {},
68
- __isJSTheme: true
94
+ __isJSTheme: true,
69
95
  };
70
96
 
71
97
  describe('quickTheme', () => {
@@ -1,6 +1,3 @@
1
- // Button composables
2
- // export * from './useButton';
3
-
4
1
  // Accordion composables
5
2
  export * from './useAccordion';
6
3
 
@@ -29,7 +26,6 @@ export * from './useEdgePanel';
29
26
  export * from './useTodo';
30
27
 
31
28
  // Form composables
32
- // export * from './useCheckbox';
33
29
  export * from './useForm';
34
30
  export * from './useFormGroup';
35
31
 
@@ -19,15 +19,15 @@ class GlobalMouseTracker {
19
19
  */
20
20
  subscribe(callback: (pos: MousePosition) => void): () => void {
21
21
  this.listeners.add(callback);
22
-
22
+
23
23
  // Start tracking if this is the first subscriber
24
24
  if (this.listeners.size === 1) {
25
25
  this.startTracking();
26
26
  }
27
-
27
+
28
28
  // Immediately notify with current position
29
29
  callback(this.position);
30
-
30
+
31
31
  // Return unsubscribe function
32
32
  return () => {
33
33
  this.unsubscribe(callback);
@@ -39,7 +39,7 @@ class GlobalMouseTracker {
39
39
  */
40
40
  private unsubscribe(callback: (pos: MousePosition) => void): void {
41
41
  this.listeners.delete(callback);
42
-
42
+
43
43
  // Stop tracking if no more subscribers
44
44
  if (this.listeners.size === 0) {
45
45
  this.stopTracking();
@@ -53,9 +53,9 @@ class GlobalMouseTracker {
53
53
  if (this.isTracking) {
54
54
  return;
55
55
  }
56
-
56
+
57
57
  this.isTracking = true;
58
-
58
+
59
59
  // Use document-level listener for global tracking
60
60
  document.addEventListener('mousemove', this.handleMouseMove, { passive: true });
61
61
  }
@@ -67,16 +67,16 @@ class GlobalMouseTracker {
67
67
  if (!this.isTracking) {
68
68
  return;
69
69
  }
70
-
70
+
71
71
  this.isTracking = false;
72
72
  document.removeEventListener('mousemove', this.handleMouseMove);
73
-
73
+
74
74
  // Cancel any pending RAF
75
75
  if (this.rafId !== null) {
76
76
  cancelAnimationFrame(this.rafId);
77
77
  this.rafId = null;
78
78
  }
79
-
79
+
80
80
  this.lastEvent = null;
81
81
  }
82
82
 
@@ -85,7 +85,7 @@ class GlobalMouseTracker {
85
85
  */
86
86
  private handleMouseMove = (e: MouseEvent): void => {
87
87
  this.lastEvent = e;
88
-
88
+
89
89
  // Use requestAnimationFrame to throttle updates
90
90
  if (this.rafId === null) {
91
91
  this.rafId = requestAnimationFrame(() => {
@@ -94,9 +94,9 @@ class GlobalMouseTracker {
94
94
  x: this.lastEvent.clientX,
95
95
  y: this.lastEvent.clientY,
96
96
  };
97
-
97
+
98
98
  // Notify all subscribers
99
- this.listeners.forEach((callback) => {
99
+ this.listeners.forEach(callback => {
100
100
  try {
101
101
  callback(this.position);
102
102
  } catch (error) {
@@ -104,7 +104,7 @@ class GlobalMouseTracker {
104
104
  }
105
105
  });
106
106
  }
107
-
107
+
108
108
  this.rafId = null;
109
109
  });
110
110
  }
@@ -130,4 +130,3 @@ const globalMouseTracker = new GlobalMouseTracker();
130
130
 
131
131
  export { globalMouseTracker };
132
132
  export type { GlobalMouseTracker };
133
-
@@ -1,10 +1,4 @@
1
- import React, {
2
- useCallback,
3
- useEffect,
4
- useMemo,
5
- useRef,
6
- useState,
7
- } from 'react';
1
+ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
8
2
  import type {
9
3
  AtomixGlassProps,
10
4
  DisplacementMode,
@@ -41,10 +35,7 @@ const backgroundDetectionCache = new WeakMap<HTMLElement, BackgroundDetectionCac
41
35
  * Compare two OverLightConfig values for equality
42
36
  * Handles primitives (boolean, 'auto') and objects with deep comparison
43
37
  */
44
- const compareOverLightConfig = (
45
- config1: OverLightConfig,
46
- config2: OverLightConfig
47
- ): boolean => {
38
+ const compareOverLightConfig = (config1: OverLightConfig, config2: OverLightConfig): boolean => {
48
39
  // Primitive comparison for boolean and 'auto'
49
40
  if (typeof config1 !== 'object' || config1 === null) {
50
41
  return config1 === config2;
@@ -210,7 +201,6 @@ export function useAtomixGlass({
210
201
  onClick,
211
202
  debugCornerRadius = false,
212
203
  debugOverLight = false,
213
- enablePerformanceMonitoring = false,
214
204
  children,
215
205
  }: UseAtomixGlassOptions): UseAtomixGlassReturn {
216
206
  // State
@@ -294,7 +284,10 @@ export function useAtomixGlass({
294
284
  setDynamicCornerRadius(extractedRadius);
295
285
  }
296
286
  } catch (error) {
297
- if ((typeof process === 'undefined' || process.env?.NODE_ENV !== 'production') && debugCornerRadius) {
287
+ if (
288
+ (typeof process === 'undefined' || process.env?.NODE_ENV !== 'production') &&
289
+ debugCornerRadius
290
+ ) {
298
291
  console.error('[AtomixGlass] Error extracting corner radius:', error);
299
292
  }
300
293
  }
@@ -308,7 +301,8 @@ export function useAtomixGlass({
308
301
  // Media query handlers and background detection
309
302
  useEffect(() => {
310
303
  // Only run auto-detection for 'auto' mode or object config (which uses auto-detection)
311
- const shouldDetect = (overLight === 'auto' || (typeof overLight === 'object' && overLight !== null));
304
+ const shouldDetect =
305
+ overLight === 'auto' || (typeof overLight === 'object' && overLight !== null);
312
306
 
313
307
  if (shouldDetect && glassRef.current) {
314
308
  const element = glassRef.current;
@@ -357,7 +351,13 @@ export function useAtomixGlass({
357
351
  const bgImage = computedStyle.backgroundImage;
358
352
 
359
353
  // Check for solid color backgrounds
360
- if (bgColor && bgColor !== 'rgba(0, 0, 0, 0)' && bgColor !== 'transparent' && bgColor !== 'initial' && bgColor !== 'none') {
354
+ if (
355
+ bgColor &&
356
+ bgColor !== 'rgba(0, 0, 0, 0)' &&
357
+ bgColor !== 'transparent' &&
358
+ bgColor !== 'initial' &&
359
+ bgColor !== 'none'
360
+ ) {
361
361
  const rgb = bgColor.match(/\d+/g);
362
362
  if (rgb && rgb.length >= 3) {
363
363
  const r = Number(rgb[0]);
@@ -365,9 +365,20 @@ export function useAtomixGlass({
365
365
  const b = Number(rgb[2]);
366
366
 
367
367
  // Validate RGB values are valid numbers
368
- if (!isNaN(r) && !isNaN(g) && !isNaN(b) &&
369
- isFinite(r) && isFinite(g) && isFinite(b) &&
370
- r >= 0 && r <= 255 && g >= 0 && g <= 255 && b >= 0 && b <= 255) {
368
+ if (
369
+ !isNaN(r) &&
370
+ !isNaN(g) &&
371
+ !isNaN(b) &&
372
+ isFinite(r) &&
373
+ isFinite(g) &&
374
+ isFinite(b) &&
375
+ r >= 0 &&
376
+ r <= 255 &&
377
+ g >= 0 &&
378
+ g <= 255 &&
379
+ b >= 0 &&
380
+ b <= 255
381
+ ) {
371
382
  // Only consider if it's not pure black or very dark
372
383
  if (r > 10 || g > 10 || b > 10) {
373
384
  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
@@ -414,11 +425,12 @@ export function useAtomixGlass({
414
425
  if (typeof overLight === 'object' && overLight !== null) {
415
426
  const objConfig = overLight as OverLightObjectConfig;
416
427
  if (objConfig.threshold !== undefined) {
417
- const configThreshold = typeof objConfig.threshold === 'number' &&
428
+ const configThreshold =
429
+ typeof objConfig.threshold === 'number' &&
418
430
  !isNaN(objConfig.threshold) &&
419
431
  isFinite(objConfig.threshold)
420
- ? objConfig.threshold
421
- : 0.7;
432
+ ? objConfig.threshold
433
+ : 0.7;
422
434
  threshold = Math.min(0.9, Math.max(0.1, configThreshold));
423
435
  }
424
436
  }
@@ -426,24 +438,31 @@ export function useAtomixGlass({
426
438
  const isOverLightDetected = avgLuminance > threshold;
427
439
 
428
440
  // Cache the result in shared cache
429
- setCachedBackgroundDetection(element.parentElement, overLight, isOverLightDetected, threshold);
441
+ setCachedBackgroundDetection(
442
+ element.parentElement,
443
+ overLight,
444
+ isOverLightDetected,
445
+ threshold
446
+ );
430
447
 
431
448
  setDetectedOverLight(isOverLightDetected);
432
449
  } else {
433
450
  // Invalid luminance calculation, default to false
434
451
  const result = false;
435
- const threshold = typeof overLight === 'object' && overLight !== null
436
- ? (overLight as OverLightObjectConfig).threshold || 0.7
437
- : 0.7;
452
+ const threshold =
453
+ typeof overLight === 'object' && overLight !== null
454
+ ? (overLight as OverLightObjectConfig).threshold || 0.7
455
+ : 0.7;
438
456
  setCachedBackgroundDetection(element.parentElement, overLight, result, threshold);
439
457
  setDetectedOverLight(result);
440
458
  }
441
459
  } else {
442
460
  // Default to false if no valid background found
443
461
  const result = false;
444
- const threshold = typeof overLight === 'object' && overLight !== null
445
- ? (overLight as OverLightObjectConfig).threshold || 0.7
446
- : 0.7;
462
+ const threshold =
463
+ typeof overLight === 'object' && overLight !== null
464
+ ? (overLight as OverLightObjectConfig).threshold || 0.7
465
+ : 0.7;
447
466
  setCachedBackgroundDetection(element.parentElement, overLight, result, threshold);
448
467
  setDetectedOverLight(result);
449
468
  }
@@ -454,9 +473,10 @@ export function useAtomixGlass({
454
473
  }
455
474
  const result = false;
456
475
  if (element && element.parentElement) {
457
- const threshold = typeof overLight === 'object' && overLight !== null
458
- ? (overLight as OverLightObjectConfig).threshold || 0.7
459
- : 0.7;
476
+ const threshold =
477
+ typeof overLight === 'object' && overLight !== null
478
+ ? (overLight as OverLightObjectConfig).threshold || 0.7
479
+ : 0.7;
460
480
  setCachedBackgroundDetection(element.parentElement, overLight, result, threshold);
461
481
  }
462
482
  setDetectedOverLight(result);
@@ -537,8 +557,6 @@ export function useAtomixGlass({
537
557
  return;
538
558
  }
539
559
 
540
- const startTime = enablePerformanceMonitoring ? performance.now() : 0;
541
-
542
560
  // Use cached rect if available, otherwise get new one
543
561
  let rect = cachedRectRef.current;
544
562
  if (!rect || rect.width === 0 || rect.height === 0) {
@@ -561,14 +579,6 @@ export function useAtomixGlass({
561
579
  // React 18 automatically batches these updates
562
580
  setInternalMouseOffset(newOffset);
563
581
  setInternalGlobalMousePosition(globalPos);
564
-
565
- if ((typeof process === 'undefined' || process.env?.NODE_ENV !== 'production') && enablePerformanceMonitoring) {
566
- const endTime = performance.now();
567
- // const duration = endTime - startTime;
568
- // if (duration > 5) {
569
- // console.warn(`AtomixGlass: Mouse tracking took ${duration.toFixed(2)}ms`);
570
- // }
571
- }
572
582
  },
573
583
  [
574
584
  mouseContainer,
@@ -576,7 +586,6 @@ export function useAtomixGlass({
576
586
  externalGlobalMousePosition,
577
587
  externalMouseOffset,
578
588
  effectiveDisableEffects,
579
- enablePerformanceMonitoring,
580
589
  ]
581
590
  );
582
591
 
@@ -692,14 +701,7 @@ export function useAtomixGlass({
692
701
  Math.abs(normalizedX) * stretchIntensity * 0.15;
693
702
 
694
703
  return `scaleX(${Math.max(0.8, scaleX)}) scaleY(${Math.max(0.8, scaleY)})`;
695
- }, [
696
- globalMousePosition,
697
- elasticity,
698
- glassSize,
699
- glassRef,
700
- overLight,
701
- detectedOverLight,
702
- ]);
704
+ }, [globalMousePosition, elasticity, glassSize, glassRef, overLight, detectedOverLight]);
703
705
 
704
706
  const calculateFadeInFactor = useCallback(() => {
705
707
  if (
@@ -724,7 +726,9 @@ export function useAtomixGlass({
724
726
  );
725
727
  const edgeDistance = calculateDistance({ x: edgeDistanceX, y: edgeDistanceY }, { x: 0, y: 0 });
726
728
 
727
- return edgeDistance > CONSTANTS.ACTIVATION_ZONE ? 0 : 1 - edgeDistance / CONSTANTS.ACTIVATION_ZONE;
729
+ return edgeDistance > CONSTANTS.ACTIVATION_ZONE
730
+ ? 0
731
+ : 1 - edgeDistance / CONSTANTS.ACTIVATION_ZONE;
728
732
  }, [globalMousePosition, glassSize, glassRef]);
729
733
 
730
734
  const calculateElasticTranslation = useCallback(() => {
@@ -769,7 +773,9 @@ export function useAtomixGlass({
769
773
  element !== null && element instanceof HTMLElement && element.isConnected;
770
774
 
771
775
  const validateSize = (size: GlassSize): boolean =>
772
- validateGlassSize(size) && size.width <= CONSTANTS.MAX_SIZE && size.height <= CONSTANTS.MAX_SIZE;
776
+ validateGlassSize(size) &&
777
+ size.width <= CONSTANTS.MAX_SIZE &&
778
+ size.height <= CONSTANTS.MAX_SIZE;
773
779
 
774
780
  let rafId: number | null = null;
775
781
  let lastSize = { width: 0, height: 0 };
@@ -903,7 +909,9 @@ export function useAtomixGlass({
903
909
  const activeIntensity = isActive ? 1.6 : 1;
904
910
 
905
911
  // More robust overlight configuration with better defaults and clamping
906
- const baseOpacity = isOverLight ? Math.min(0.6, Math.max(0.2, 0.5 * hoverIntensity * activeIntensity)) : 0;
912
+ const baseOpacity = isOverLight
913
+ ? Math.min(0.6, Math.max(0.2, 0.5 * hoverIntensity * activeIntensity))
914
+ : 0;
907
915
 
908
916
  const baseConfig = {
909
917
  isOverLight,
@@ -920,11 +928,31 @@ export function useAtomixGlass({
920
928
  const objConfig = overLight as OverLightObjectConfig;
921
929
 
922
930
  // Validate and apply object config values with proper clamping
923
- const validatedThreshold = validateConfigValue(objConfig.threshold, 0.1, 1.0, baseConfig.threshold);
931
+ const validatedThreshold = validateConfigValue(
932
+ objConfig.threshold,
933
+ 0.1,
934
+ 1.0,
935
+ baseConfig.threshold
936
+ );
924
937
  const validatedOpacity = validateConfigValue(objConfig.opacity, 0.1, 1.0, baseConfig.opacity);
925
- const validatedContrast = validateConfigValue(objConfig.contrast, 0.5, 2.5, baseConfig.contrast);
926
- const validatedBrightness = validateConfigValue(objConfig.brightness, 0.5, 2.0, baseConfig.brightness);
927
- const validatedSaturationBoost = validateConfigValue(objConfig.saturationBoost, 0.5, 3.0, baseConfig.saturationBoost);
938
+ const validatedContrast = validateConfigValue(
939
+ objConfig.contrast,
940
+ 0.5,
941
+ 2.5,
942
+ baseConfig.contrast
943
+ );
944
+ const validatedBrightness = validateConfigValue(
945
+ objConfig.brightness,
946
+ 0.5,
947
+ 2.0,
948
+ baseConfig.brightness
949
+ );
950
+ const validatedSaturationBoost = validateConfigValue(
951
+ objConfig.saturationBoost,
952
+ 0.5,
953
+ 3.0,
954
+ baseConfig.saturationBoost
955
+ );
928
956
 
929
957
  const finalConfig = {
930
958
  ...baseConfig,
@@ -936,7 +964,10 @@ export function useAtomixGlass({
936
964
  };
937
965
 
938
966
  // Debug logging
939
- if ((typeof process === 'undefined' || process.env?.NODE_ENV !== 'production') && debugOverLight) {
967
+ if (
968
+ (typeof process === 'undefined' || process.env?.NODE_ENV !== 'production') &&
969
+ debugOverLight
970
+ ) {
940
971
  console.log('[AtomixGlass] OverLight Config:', {
941
972
  isOverLight,
942
973
  config: {
@@ -968,7 +999,10 @@ export function useAtomixGlass({
968
999
  }
969
1000
 
970
1001
  // Debug logging for non-object configs
971
- if ((typeof process === 'undefined' || process.env?.NODE_ENV !== 'production') && debugOverLight) {
1002
+ if (
1003
+ (typeof process === 'undefined' || process.env?.NODE_ENV !== 'production') &&
1004
+ debugOverLight
1005
+ ) {
972
1006
  console.log('[AtomixGlass] OverLight Config:', {
973
1007
  isOverLight,
974
1008
  configType: typeof overLight === 'boolean' ? (overLight ? 'true' : 'false') : overLight,
@@ -991,7 +1025,15 @@ export function useAtomixGlass({
991
1025
  }
992
1026
 
993
1027
  return baseConfig;
994
- }, [overLight, getEffectiveOverLight, mouseOffset, isHovered, isActive, validateConfigValue, debugOverLight]);
1028
+ }, [
1029
+ overLight,
1030
+ getEffectiveOverLight,
1031
+ mouseOffset,
1032
+ isHovered,
1033
+ isActive,
1034
+ validateConfigValue,
1035
+ debugOverLight,
1036
+ ]);
995
1037
 
996
1038
  // Event handlers
997
1039
  const handleMouseEnter = useCallback(() => setIsHovered(true), []);
@@ -325,4 +325,4 @@ export function useChartExport() {
325
325
  exportChart,
326
326
  shareChart,
327
327
  };
328
- }
328
+ }
@@ -274,7 +274,9 @@ export function useDataTable({
274
274
  const visibleColumns = useMemo(() => {
275
275
  return columnOrder
276
276
  .map(key => columns.find(col => col.key === key))
277
- .filter((col): col is DataTableColumn => col !== undefined && columnVisibility[col.key] !== false);
277
+ .filter(
278
+ (col): col is DataTableColumn => col !== undefined && columnVisibility[col.key] !== false
279
+ );
278
280
  }, [columns, columnOrder, columnVisibility]);
279
281
 
280
282
  // Handle sorting
@@ -299,13 +301,10 @@ export function useDataTable({
299
301
  );
300
302
 
301
303
  // Handle page change
302
- const handlePageChange = useCallback(
303
- (page: number) => {
304
- if (page < 1) return;
305
- setCurrentPage(page);
306
- },
307
- []
308
- );
304
+ const handlePageChange = useCallback((page: number) => {
305
+ if (page < 1) return;
306
+ setCurrentPage(page);
307
+ }, []);
309
308
 
310
309
  // Handle search
311
310
  const handleSearch = useCallback((query: string) => {
@@ -330,7 +329,13 @@ export function useDataTable({
330
329
 
331
330
  // Pre-process column filters to avoid redundant lookups and transformations
332
331
  const activeColumnFilters = useMemo(() => {
333
- if (!columnFilters) return [];
332
+ if (!columnFilters)
333
+ return [] as Array<{
334
+ key: string;
335
+ value: string;
336
+ lowercaseValue: string;
337
+ column: DataTableColumn;
338
+ }>;
334
339
 
335
340
  return Object.entries(columnFilterValues)
336
341
  .filter(([, value]) => value !== undefined && value !== null && value !== '')
@@ -341,7 +346,8 @@ export function useDataTable({
341
346
  return {
342
347
  key: columnKey,
343
348
  value,
344
- lowercaseValue: typeof value === 'string' ? value.toLowerCase() : String(value).toLowerCase(),
349
+ lowercaseValue:
350
+ typeof value === 'string' ? value.toLowerCase() : String(value).toLowerCase(),
345
351
  column,
346
352
  };
347
353
  })
@@ -369,7 +375,9 @@ export function useDataTable({
369
375
 
370
376
  // Apply column-specific filters
371
377
  for (let i = 0; i < activeColumnFilters.length; i++) {
372
- const { key, value, lowercaseValue, column } = activeColumnFilters[i];
378
+ const filter = activeColumnFilters[i];
379
+ if (!filter) continue;
380
+ const { key, value, lowercaseValue, column } = filter;
373
381
  const cellValue = row[key];
374
382
 
375
383
  if (cellValue == null) return false;
@@ -451,7 +459,9 @@ export function useDataTable({
451
459
  }
452
460
 
453
461
  if (onSelectionChange) {
454
- const selectedRowsData = sortedData.filter(row => newSelectedIds.includes(getRowId(row, rowKey)));
462
+ const selectedRowsData = sortedData.filter(row =>
463
+ newSelectedIds.includes(getRowId(row, rowKey))
464
+ );
455
465
  onSelectionChange(selectedRowsData, newSelectedIds);
456
466
  }
457
467
  },
@@ -463,16 +473,16 @@ export function useDataTable({
463
473
  (selected: boolean) => {
464
474
  if (selectionMode !== 'multiple') return;
465
475
 
466
- const newSelectedIds = selected
467
- ? paginatedData.map(row => getRowId(row, rowKey))
468
- : [];
476
+ const newSelectedIds = selected ? paginatedData.map(row => getRowId(row, rowKey)) : [];
469
477
 
470
478
  if (!controlledSelectedRowIds) {
471
479
  setInternalSelectedRowIds(newSelectedIds);
472
480
  }
473
481
 
474
482
  if (onSelectionChange) {
475
- const selectedRowsData = sortedData.filter(row => newSelectedIds.includes(getRowId(row, rowKey)));
483
+ const selectedRowsData = sortedData.filter(row =>
484
+ newSelectedIds.includes(getRowId(row, rowKey))
485
+ );
476
486
  onSelectionChange(selectedRowsData, newSelectedIds);
477
487
  }
478
488
  },
@@ -488,7 +498,9 @@ export function useDataTable({
488
498
  // Check if some rows are selected (indeterminate)
489
499
  const isIndeterminate = useMemo(() => {
490
500
  if (selectionMode !== 'multiple' || paginatedData.length === 0) return false;
491
- const selectedCount = paginatedData.filter(row => selectedRowIds.includes(getRowId(row, rowKey))).length;
501
+ const selectedCount = paginatedData.filter(row =>
502
+ selectedRowIds.includes(getRowId(row, rowKey))
503
+ ).length;
492
504
  return selectedCount > 0 && selectedCount < paginatedData.length;
493
505
  }, [selectionMode, paginatedData, selectedRowIds, rowKey]);
494
506