@shohojdhara/atomix 0.4.1 → 0.4.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (126) hide show
  1. package/dist/atomix.css +9341 -9249
  2. package/dist/atomix.css.map +1 -1
  3. package/dist/atomix.min.css +4 -4
  4. package/dist/atomix.min.css.map +1 -1
  5. package/dist/charts.d.ts +12 -19
  6. package/dist/charts.js +555 -358
  7. package/dist/charts.js.map +1 -1
  8. package/dist/core.d.ts +16 -23
  9. package/dist/core.js +418 -262
  10. package/dist/core.js.map +1 -1
  11. package/dist/forms.d.ts +11 -18
  12. package/dist/forms.js +411 -257
  13. package/dist/forms.js.map +1 -1
  14. package/dist/heavy.d.ts +14 -21
  15. package/dist/heavy.js +408 -254
  16. package/dist/heavy.js.map +1 -1
  17. package/dist/index.d.ts +33 -40
  18. package/dist/index.esm.js +663 -453
  19. package/dist/index.esm.js.map +1 -1
  20. package/dist/index.js +667 -460
  21. package/dist/index.js.map +1 -1
  22. package/dist/index.min.js +1 -1
  23. package/dist/index.min.js.map +1 -1
  24. package/package.json +1 -1
  25. package/scripts/atomix-cli.js +34 -1
  26. package/src/components/AtomixGlass/AtomixGlass.tsx +82 -54
  27. package/src/components/AtomixGlass/AtomixGlassContainer.tsx +17 -18
  28. package/src/components/AtomixGlass/README.md +5 -5
  29. package/src/components/AtomixGlass/stories/Customization.stories.tsx +2 -2
  30. package/src/components/AtomixGlass/stories/Examples.stories.tsx +42 -42
  31. package/src/components/AtomixGlass/stories/Modes.stories.tsx +5 -5
  32. package/src/components/AtomixGlass/stories/Overview.stories.tsx +3 -3
  33. package/src/components/AtomixGlass/stories/Performance.stories.tsx +2 -2
  34. package/src/components/AtomixGlass/stories/Playground.stories.tsx +45 -45
  35. package/src/components/AtomixGlass/stories/Shaders.stories.tsx +3 -3
  36. package/src/components/Badge/Badge.stories.tsx +1 -1
  37. package/src/components/Badge/Badge.tsx +1 -1
  38. package/src/components/Breadcrumb/Breadcrumb.tsx +90 -76
  39. package/src/components/Breadcrumb/index.ts +2 -2
  40. package/src/components/Button/Button.stories.tsx +1 -1
  41. package/src/components/Button/README.md +2 -2
  42. package/src/components/Callout/Callout.test.tsx +3 -3
  43. package/src/components/Callout/Callout.tsx +2 -2
  44. package/src/components/Callout/README.md +2 -2
  45. package/src/components/Chart/Chart.stories.tsx +1 -1
  46. package/src/components/Chart/Chart.tsx +5 -5
  47. package/src/components/Chart/TreemapChart.tsx +37 -29
  48. package/src/components/DatePicker/readme.md +3 -3
  49. package/src/components/Dropdown/Dropdown.stories.tsx +1 -1
  50. package/src/components/EdgePanel/EdgePanel.stories.tsx +7 -7
  51. package/src/components/Form/Checkbox.stories.tsx +1 -1
  52. package/src/components/Form/Checkbox.tsx +1 -1
  53. package/src/components/Form/Input.stories.tsx +1 -1
  54. package/src/components/Form/Input.tsx +1 -1
  55. package/src/components/Form/Radio.stories.tsx +1 -1
  56. package/src/components/Form/Radio.tsx +1 -1
  57. package/src/components/Form/Select.stories.tsx +1 -1
  58. package/src/components/Form/Select.tsx +1 -1
  59. package/src/components/Form/Textarea.stories.tsx +1 -1
  60. package/src/components/Form/Textarea.tsx +1 -1
  61. package/src/components/Hero/Hero.stories.tsx +2 -2
  62. package/src/components/Hero/Hero.tsx +2 -2
  63. package/src/components/Messages/Messages.stories.tsx +1 -1
  64. package/src/components/Messages/Messages.tsx +2 -2
  65. package/src/components/Modal/Modal.stories.tsx +1 -1
  66. package/src/components/Navigation/Nav/Nav.stories.tsx +2 -2
  67. package/src/components/Navigation/Nav/Nav.tsx +1 -1
  68. package/src/components/Navigation/Navbar/Navbar.stories.tsx +3 -3
  69. package/src/components/Navigation/Navbar/Navbar.tsx +1 -1
  70. package/src/components/Navigation/SideMenu/SideMenu.stories.tsx +2 -2
  71. package/src/components/Navigation/SideMenu/SideMenu.tsx +1 -1
  72. package/src/components/Pagination/Pagination.stories.tsx +1 -1
  73. package/src/components/Pagination/Pagination.tsx +1 -1
  74. package/src/components/Popover/Popover.stories.tsx +1 -1
  75. package/src/components/Popover/Popover.tsx +1 -1
  76. package/src/components/Progress/Progress.tsx +1 -1
  77. package/src/components/Rating/Rating.stories.tsx +1 -1
  78. package/src/components/Rating/Rating.test.tsx +73 -0
  79. package/src/components/Rating/Rating.tsx +25 -37
  80. package/src/components/Spinner/Spinner.tsx +1 -1
  81. package/src/components/Steps/Steps.stories.tsx +1 -1
  82. package/src/components/Steps/Steps.tsx +2 -2
  83. package/src/components/Tabs/Tabs.stories.tsx +1 -1
  84. package/src/components/Tabs/Tabs.tsx +1 -1
  85. package/src/components/Todo/Todo.tsx +0 -1
  86. package/src/components/Toggle/Toggle.stories.tsx +1 -1
  87. package/src/components/Toggle/Toggle.tsx +1 -1
  88. package/src/components/Tooltip/Tooltip.stories.tsx +1 -1
  89. package/src/components/VideoPlayer/VideoPlayer.stories.tsx +2 -2
  90. package/src/lib/composables/__tests__/useAtomixGlassPerf.test.tsx +88 -0
  91. package/src/lib/composables/__tests__/useChart.test.ts +50 -0
  92. package/src/lib/composables/__tests__/useChart.test.tsx +139 -0
  93. package/src/lib/composables/__tests__/useHeroBackgroundSlider.test.tsx +59 -0
  94. package/src/lib/composables/__tests__/useSliderAutoplay.test.tsx +68 -0
  95. package/src/lib/composables/atomix-glass/useGlassBackgroundDetection.ts +329 -0
  96. package/src/lib/composables/atomix-glass/useGlassCornerRadius.ts +82 -0
  97. package/src/lib/composables/atomix-glass/useGlassMouseTracking.ts +153 -0
  98. package/src/lib/composables/atomix-glass/useGlassOverLight.ts +198 -0
  99. package/src/lib/composables/atomix-glass/useGlassSize.ts +117 -0
  100. package/src/lib/composables/atomix-glass/useGlassState.ts +112 -0
  101. package/src/lib/composables/atomix-glass/useGlassTransforms.ts +160 -0
  102. package/src/lib/composables/glass-styles.ts +302 -0
  103. package/src/lib/composables/index.ts +0 -4
  104. package/src/lib/composables/useAtomixGlass.ts +331 -522
  105. package/src/lib/composables/useAtomixGlassStyles.ts +307 -0
  106. package/src/lib/composables/useBarChart.ts +1 -1
  107. package/src/lib/composables/useBreadcrumb.ts +6 -6
  108. package/src/lib/composables/useChart.ts +104 -21
  109. package/src/lib/composables/useHeroBackgroundSlider.ts +16 -7
  110. package/src/lib/composables/useSlider.ts +66 -34
  111. package/src/lib/theme/devtools/CLI.ts +1 -1
  112. package/src/lib/theme/utils/__tests__/themeUtils.test.ts +213 -0
  113. package/src/lib/types/components.ts +13 -21
  114. package/src/lib/utils/__tests__/dom.test.ts +100 -0
  115. package/src/lib/utils/__tests__/fontPreloader.test.ts +102 -0
  116. package/src/styles/02-tools/_tools.breakpoints.scss +1 -1
  117. package/src/styles/02-tools/_tools.utility-api.scss +6 -6
  118. package/src/styles/06-components/_components.accordion.scss +0 -2
  119. package/src/styles/06-components/_components.chart.scss +0 -1
  120. package/src/styles/06-components/_components.dropdown.scss +0 -1
  121. package/src/styles/06-components/_components.edge-panel.scss +0 -2
  122. package/src/styles/06-components/_components.photoviewer.scss +0 -1
  123. package/src/styles/06-components/_components.river.scss +0 -1
  124. package/src/styles/06-components/_components.slider.scss +0 -3
  125. package/src/styles/99-utilities/_utilities.glass-fixes.scss +0 -1
  126. package/src/styles/99-utilities/_utilities.text.scss +1 -0
package/dist/index.d.ts CHANGED
@@ -1329,20 +1329,20 @@ interface OverLightObjectConfig {
1329
1329
  /**
1330
1330
  * AtomixGlass component props interface
1331
1331
  */
1332
- interface AtomixGlassProps {
1332
+ interface AtomixGlassProps extends React.HTMLAttributes<HTMLDivElement> {
1333
1333
  children?: React.ReactNode;
1334
1334
  displacementScale?: number;
1335
1335
  blurAmount?: number;
1336
1336
  saturation?: number;
1337
1337
  aberrationIntensity?: number;
1338
1338
  elasticity?: number;
1339
- cornerRadius?: number;
1339
+ borderRadius?: number;
1340
1340
  globalMousePosition?: MousePosition;
1341
1341
  mouseOffset?: MousePosition;
1342
1342
  mouseContainer?: React.RefObject<HTMLElement | null> | null;
1343
- className?: string;
1344
1343
  padding?: string;
1345
- style?: React.CSSProperties;
1344
+ height?: string | number;
1345
+ width?: string | number;
1346
1346
  overLight?: OverLightConfig;
1347
1347
  mode?: DisplacementMode;
1348
1348
  onClick?: () => void;
@@ -1350,30 +1350,23 @@ interface AtomixGlassProps {
1350
1350
  * Shader variant for shader mode
1351
1351
  */
1352
1352
  shaderVariant?: 'liquidGlass' | 'premiumGlass' | 'appleFluid' | 'liquidMetal' | 'plasma' | 'waves' | 'noise';
1353
- /**
1354
- * Accessibility props
1355
- */
1356
- 'aria-label'?: string;
1357
- 'aria-describedby'?: string;
1358
- role?: string;
1359
- tabIndex?: number;
1360
1353
  /**
1361
1354
  * Performance and accessibility options
1362
1355
  */
1363
1356
  reducedMotion?: boolean;
1364
1357
  highContrast?: boolean;
1365
- disableEffects?: boolean;
1366
- enableLiquidBlur?: boolean;
1367
- enableBorderEffect?: boolean;
1368
- enableOverLightLayers?: boolean;
1358
+ withoutEffects?: boolean;
1359
+ withLiquidBlur?: boolean;
1360
+ withBorder?: boolean;
1361
+ withOverLightLayers?: boolean;
1369
1362
  /**
1370
1363
  * Performance monitoring
1371
1364
  */
1372
- enablePerformanceMonitoring?: boolean;
1365
+ debugPerformance?: boolean;
1373
1366
  /**
1374
- * Debug mode for cornerRadius extraction
1367
+ * Debug mode for borderRadius extraction
1375
1368
  */
1376
- debugCornerRadius?: boolean;
1369
+ debugBorderRadius?: boolean;
1377
1370
  /**
1378
1371
  * Debug mode for overLight detection and configuration
1379
1372
  *
@@ -4301,7 +4294,7 @@ interface VideoPlayerProps extends BaseComponentProps {
4301
4294
  saturation?: number;
4302
4295
  aberrationIntensity?: number;
4303
4296
  elasticity?: number;
4304
- cornerRadius?: number;
4297
+ borderRadius?: number;
4305
4298
  mode?: 'standard' | 'polar' | 'prominent' | 'shader';
4306
4299
  overLight?: boolean;
4307
4300
  };
@@ -6592,7 +6585,7 @@ interface GlassContainerProps extends BaseComponentProps {
6592
6585
  * Border radius of the glass container
6593
6586
  * @default 999
6594
6587
  */
6595
- cornerRadius?: number;
6588
+ borderRadius?: number;
6596
6589
  /**
6597
6590
  * Padding inside the glass container
6598
6591
  * @default '24px 32px'
@@ -6741,7 +6734,7 @@ interface StepItemData {
6741
6734
  content?: React__default.ReactNode;
6742
6735
  }
6743
6736
 
6744
- interface StepsItemProps extends React__default.HTMLAttributes<HTMLDivElement> {
6737
+ interface StepsItemProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, 'title'> {
6745
6738
  /**
6746
6739
  * The number or icon for the step
6747
6740
  */
@@ -7594,7 +7587,7 @@ interface BarChartOptions {
7594
7587
  /**
7595
7588
  * Corner radius for bars
7596
7589
  */
7597
- cornerRadius?: number;
7590
+ borderRadius?: number;
7598
7591
  /**
7599
7592
  * Padding between bar groups
7600
7593
  */
@@ -8771,7 +8764,7 @@ interface BreadcrumbItemData {
8771
8764
  */
8772
8765
  className?: string;
8773
8766
  }
8774
-
8767
+ type BreadcrumbItemType = BreadcrumbItemData;
8775
8768
  interface BreadcrumbItemProps extends React__default.HTMLAttributes<HTMLLIElement> {
8776
8769
  /**
8777
8770
  * URL for the breadcrumb item
@@ -8788,11 +8781,11 @@ interface BreadcrumbItemProps extends React__default.HTMLAttributes<HTMLLIElemen
8788
8781
  /**
8789
8782
  * Optional click handler for the link
8790
8783
  */
8791
- onClick?: (event: React__default.MouseEvent<HTMLAnchorElement | HTMLSpanElement>) => void;
8784
+ onClick?: (event: React__default.MouseEvent<any>) => void;
8792
8785
  /**
8793
8786
  * Optional custom link component
8794
8787
  */
8795
- linkAs?: React__default.ElementType;
8788
+ linkAs?: React__default.ElementType<any>;
8796
8789
  /**
8797
8790
  * Link props to pass to the underlying anchor or LinkComponent
8798
8791
  */
@@ -8829,10 +8822,11 @@ interface BreadcrumbProps {
8829
8822
  */
8830
8823
  children?: ReactNode;
8831
8824
  }
8832
- type BreadcrumbComponent = React__default.FC<BreadcrumbProps> & {
8825
+ declare const BreadcrumbComponent: React__default.FC<BreadcrumbProps>;
8826
+ type BreadcrumbType = typeof BreadcrumbComponent & {
8833
8827
  Item: typeof BreadcrumbItem;
8834
8828
  };
8835
- declare const Breadcrumb: BreadcrumbComponent;
8829
+ declare const Breadcrumb: BreadcrumbType;
8836
8830
 
8837
8831
  type AccordionProps = AccordionProps$1;
8838
8832
  interface AccordionHeaderProps extends Omit<React__default.ButtonHTMLAttributes<HTMLButtonElement>, 'title'> {
@@ -11420,17 +11414,18 @@ declare function useGlassContainer(props: GlassContainerProps): {
11420
11414
  interface UseAtomixGlassOptions extends Omit<AtomixGlassProps, 'children'> {
11421
11415
  glassRef: React__default.RefObject<HTMLDivElement>;
11422
11416
  contentRef: React__default.RefObject<HTMLDivElement>;
11417
+ wrapperRef?: React__default.RefObject<HTMLDivElement>;
11423
11418
  children?: React__default.ReactNode;
11424
11419
  }
11425
11420
  interface UseAtomixGlassReturn {
11426
11421
  isHovered: boolean;
11427
11422
  isActive: boolean;
11428
11423
  glassSize: GlassSize;
11429
- dynamicCornerRadius: number;
11430
- effectiveCornerRadius: number;
11424
+ dynamicBorderRadius: number;
11425
+ effectiveBorderRadius: number;
11431
11426
  effectiveReducedMotion: boolean;
11432
11427
  effectiveHighContrast: boolean;
11433
- effectiveDisableEffects: boolean;
11428
+ effectiveWithoutEffects: boolean;
11434
11429
  detectedOverLight: boolean;
11435
11430
  globalMousePosition: MousePosition;
11436
11431
  mouseOffset: MousePosition;
@@ -11461,7 +11456,7 @@ interface UseAtomixGlassReturn {
11461
11456
  * Composable hook for AtomixGlass component logic
11462
11457
  * Manages all state, calculations, and event handlers
11463
11458
  */
11464
- declare function useAtomixGlass({ glassRef, contentRef, cornerRadius, globalMousePosition: externalGlobalMousePosition, mouseOffset: externalMouseOffset, mouseContainer, overLight, reducedMotion, highContrast, disableEffects, elasticity, onClick, debugCornerRadius, debugOverLight, children, }: UseAtomixGlassOptions): UseAtomixGlassReturn;
11459
+ declare function useAtomixGlass({ glassRef, contentRef, wrapperRef, borderRadius, globalMousePosition: externalGlobalMousePosition, mouseOffset: externalMouseOffset, mouseContainer, overLight, reducedMotion, highContrast, withoutEffects, elasticity, onClick, debugBorderRadius, debugOverLight, debugPerformance, children, blurAmount, saturation, padding, withLiquidBlur, }: UseAtomixGlassOptions): UseAtomixGlassReturn;
11465
11460
 
11466
11461
  /**
11467
11462
  * Input state and functionality
@@ -11516,7 +11511,7 @@ declare function useTextarea(initialProps?: Partial<TextareaProps>): {
11516
11511
  };
11517
11512
 
11518
11513
  interface BreadcrumbOptions {
11519
- items: BreadcrumbItem[];
11514
+ items: BreadcrumbItemType[];
11520
11515
  divider?: React.ReactNode;
11521
11516
  className?: string;
11522
11517
  'aria-label'?: string;
@@ -11529,9 +11524,9 @@ interface BreadcrumbOptions {
11529
11524
  declare function useBreadcrumb(initialOptions?: Partial<BreadcrumbOptions>): {
11530
11525
  defaultOptions: BreadcrumbOptions;
11531
11526
  generateBreadcrumbClass: (options: Partial<BreadcrumbOptions>) => string;
11532
- generateItemClass: (item: BreadcrumbItem, isLast: boolean) => string;
11533
- isItemLink: (item: BreadcrumbItem, isLast: boolean) => boolean;
11534
- parseItemsFromJson: (jsonString: string) => BreadcrumbItem[];
11527
+ generateItemClass: (item: BreadcrumbItemType, isLast: boolean) => string;
11528
+ isItemLink: (item: BreadcrumbItemType, isLast: boolean) => boolean;
11529
+ parseItemsFromJson: (jsonString: string) => BreadcrumbItemType[];
11535
11530
  };
11536
11531
 
11537
11532
  /**
@@ -11908,7 +11903,7 @@ declare const AtomixLogo: React__default.FC<AtomixLogoProps>;
11908
11903
  *
11909
11904
  * @example
11910
11905
  * // Manual border-radius override
11911
- * <AtomixGlass cornerRadius={20}>
11906
+ * <AtomixGlass borderRadius={20}>
11912
11907
  * <div>Content with 20px glass radius</div>
11913
11908
  * </AtomixGlass>
11914
11909
  *
@@ -11950,7 +11945,7 @@ declare const AtomixLogo: React__default.FC<AtomixLogoProps>;
11950
11945
  * <div>Content with debug logging enabled</div>
11951
11946
  * </AtomixGlass>
11952
11947
  */
11953
- declare function AtomixGlass({ children, displacementScale, blurAmount, saturation, aberrationIntensity, elasticity, cornerRadius, globalMousePosition: externalGlobalMousePosition, mouseOffset: externalMouseOffset, mouseContainer, className, padding, overLight, style, mode, onClick, shaderVariant, 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedBy, role, tabIndex, reducedMotion, highContrast, disableEffects, enableLiquidBlur, enableBorderEffect, enableOverLightLayers, enablePerformanceMonitoring, debugCornerRadius, debugOverLight, }: AtomixGlassProps): react_jsx_runtime.JSX.Element;
11948
+ declare function AtomixGlass({ children, displacementScale, blurAmount, saturation, aberrationIntensity, elasticity, borderRadius, globalMousePosition: externalGlobalMousePosition, mouseOffset: externalMouseOffset, mouseContainer, className, padding, overLight, style, mode, onClick, shaderVariant, 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedBy, role, tabIndex, reducedMotion, highContrast, withoutEffects, withLiquidBlur, withBorder, withOverLightLayers, debugPerformance, debugBorderRadius, debugOverLight, height, width, ...rest }: AtomixGlassProps): react_jsx_runtime.JSX.Element;
11954
11949
 
11955
11950
  declare const Avatar: React__default.FC<AvatarProps>;
11956
11951
 
@@ -15331,9 +15326,7 @@ declare const atomix: {
15331
15326
  AvatarGroup: React$1.FC<AvatarGroupProps>;
15332
15327
  Badge: React$1.FC<BadgeProps>;
15333
15328
  Block: React$1.ForwardRefExoticComponent<BlockProps & React$1.RefAttributes<HTMLDivElement>>;
15334
- Breadcrumb: React$1.FC<BreadcrumbProps> & {
15335
- Item: typeof BreadcrumbItemData;
15336
- };
15329
+ Breadcrumb: BreadcrumbType;
15337
15330
  Button: React$1.MemoExoticComponent<React$1.ForwardRefExoticComponent<Omit<ButtonProps & ButtonAsProp, "ref"> & React$1.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>>;
15338
15331
  ButtonGroup: React$1.FC<ButtonGroupProps>;
15339
15332
  Callout: React$1.FC<CalloutProps> & {