@shohojdhara/atomix 0.4.3 → 0.4.5

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 (45) hide show
  1. package/dist/atomix.css +26 -5
  2. package/dist/atomix.css.map +1 -1
  3. package/dist/atomix.min.css +1 -1
  4. package/dist/atomix.min.css.map +1 -1
  5. package/dist/charts.js +4 -16
  6. package/dist/charts.js.map +1 -1
  7. package/dist/core.d.ts +4 -4
  8. package/dist/core.js +14 -26
  9. package/dist/core.js.map +1 -1
  10. package/dist/forms.js +4 -16
  11. package/dist/forms.js.map +1 -1
  12. package/dist/heavy.js +9 -21
  13. package/dist/heavy.js.map +1 -1
  14. package/dist/index.d.ts +40 -16
  15. package/dist/index.esm.js +307 -341
  16. package/dist/index.esm.js.map +1 -1
  17. package/dist/index.js +337 -357
  18. package/dist/index.js.map +1 -1
  19. package/dist/index.min.js +1 -1
  20. package/dist/index.min.js.map +1 -1
  21. package/package.json +1 -1
  22. package/src/components/AtomixGlass/AtomixGlass.tsx +2 -15
  23. package/src/components/AtomixGlass/AtomixGlassContainer.tsx +3 -8
  24. package/src/components/Breadcrumb/Breadcrumb.tsx +5 -5
  25. package/src/components/Breadcrumb/BreadcrumbCompound.test.tsx +2 -2
  26. package/src/components/Button/Button.tsx +6 -6
  27. package/src/components/Card/Card.tsx +3 -3
  28. package/src/components/Dropdown/Dropdown.tsx +5 -3
  29. package/src/components/Footer/Footer.tsx +124 -166
  30. package/src/components/Footer/FooterLink.tsx +16 -19
  31. package/src/components/Footer/FooterSection.tsx +40 -39
  32. package/src/components/Footer/FooterSocialLink.tsx +59 -58
  33. package/src/components/Footer/README.md +1 -1
  34. package/src/components/Hero/Hero.tsx +72 -142
  35. package/src/components/Navigation/Menu/MegaMenu.tsx +17 -12
  36. package/src/components/Navigation/Menu/Menu.tsx +49 -24
  37. package/src/components/Navigation/Nav/NavItem.tsx +5 -3
  38. package/src/components/Navigation/SideMenu/SideMenu.tsx +2 -2
  39. package/src/components/Navigation/SideMenu/SideMenuItem.tsx +4 -4
  40. package/src/components/Slider/Slider.tsx +7 -4
  41. package/src/lib/composables/useFooter.ts +117 -20
  42. package/src/lib/composables/useSlider.ts +3 -1
  43. package/src/lib/types/components.ts +44 -12
  44. package/src/styles/06-components/_components.atomix-glass.scss +39 -5
  45. package/src/components/AtomixGlass/__snapshots__/AtomixGlass.test.tsx.snap +0 -222
package/dist/atomix.css CHANGED
@@ -1898,19 +1898,37 @@ a, a:hover {
1898
1898
  position: relative;
1899
1899
  --atomix-glass-radius: var(--atomix-radius-md, 16px);
1900
1900
  --atomix-glass-transform: none;
1901
- --atomix-glass-transition: all var(--atomix-transition-duration, 0.15s) ease-out;
1901
+ --atomix-glass-transition: transform var(--atomix-transition-duration, 0.15s) ease-out;
1902
1902
  --atomix-glass-position: absolute;
1903
1903
  --atomix-glass-container-width: 100%;
1904
1904
  --atomix-glass-container-height: 100%;
1905
1905
  --atomix-glass-border-width: var(--atomix-spacing-0-5, 0.09375rem);
1906
+ --_glass-z-background: 0;
1907
+ --_glass-z-filter: 1;
1908
+ --_glass-z-effect: 2;
1909
+ --_glass-z-hover: 3;
1910
+ --_glass-z-overlay-highlight: 4;
1911
+ --_glass-z-border-1: 5;
1912
+ --_glass-z-border-2: 6;
1913
+ --_glass-z-content: 7;
1906
1914
  }
1907
- .c-atomix-glass__hover-1, .c-atomix-glass__hover-2, .c-atomix-glass__hover-3, .c-atomix-glass__base, .c-atomix-glass__overlay {
1915
+ .c-atomix-glass__hover-1, .c-atomix-glass__hover-2, .c-atomix-glass__hover-3 {
1908
1916
  position: absolute;
1909
1917
  inset: 0;
1910
1918
  pointer-events: none;
1911
1919
  border-radius: var(--atomix-glass-radius);
1912
1920
  transform: var(--atomix-glass-transform);
1913
1921
  transition: var(--atomix-glass-transition);
1922
+ z-index: var(--_glass-z-hover);
1923
+ }
1924
+ .c-atomix-glass__base, .c-atomix-glass__overlay {
1925
+ position: absolute;
1926
+ inset: 0;
1927
+ pointer-events: none;
1928
+ border-radius: var(--atomix-glass-radius);
1929
+ transform: var(--atomix-glass-transform);
1930
+ transition: var(--atomix-glass-transition);
1931
+ z-index: var(--_glass-z-effect);
1914
1932
  }
1915
1933
  .c-atomix-glass__hover-1, .c-atomix-glass__hover-2, .c-atomix-glass__hover-3 {
1916
1934
  mix-blend-mode: overlay;
@@ -1950,6 +1968,7 @@ a, a:hover {
1950
1968
  transform: var(--atomix-glass-transform);
1951
1969
  transition: var(--atomix-glass-transition);
1952
1970
  mix-blend-mode: screen;
1971
+ z-index: var(--_glass-z-overlay-highlight);
1953
1972
  }
1954
1973
  .c-atomix-glass__border-1, .c-atomix-glass__border-2 {
1955
1974
  padding: var(--atomix-glass-border-width);
@@ -1976,13 +1995,13 @@ a, a:hover {
1976
1995
  .c-atomix-glass__border-1 {
1977
1996
  opacity: var(--atomix-opacity-20, 0.2);
1978
1997
  mix-blend-mode: screen;
1979
- z-index: var(--atomix-z-index-5, 5);
1998
+ z-index: var(--_glass-z-border-1);
1980
1999
  background: var(--atomix-glass-border-gradient-1, none);
1981
2000
  box-shadow: var(--atomix-glass-border-shadow, 0 0 0 0.03125rem rgba(255, 255, 255, 0.5) inset, 0 0.25rem 0.75rem rgba(255, 255, 255, 0.25) inset, 0 0.25rem 1rem rgba(0, 0, 0, 0.35));
1982
2001
  }
1983
2002
  .c-atomix-glass__border-2 {
1984
2003
  mix-blend-mode: overlay;
1985
- z-index: var(--atomix-z-index-6, 6);
2004
+ z-index: var(--_glass-z-border-2);
1986
2005
  background: var(--atomix-glass-border-gradient-2, none);
1987
2006
  box-shadow: var(--atomix-glass-border-shadow, 0 0 0 0.03125rem rgba(255, 255, 255, 0.5) inset, 0 0.25rem 0.75rem rgba(255, 255, 255, 0.25) inset, 0 0.25rem 1rem rgba(0, 0, 0, 0.35));
1988
2007
  }
@@ -2006,6 +2025,7 @@ a, a:hover {
2006
2025
  width: 100%;
2007
2026
  height: 100%;
2008
2027
  pointer-events: none;
2028
+ z-index: var(--_glass-z-filter);
2009
2029
  }
2010
2030
  .c-atomix-glass__filter svg {
2011
2031
  border-radius: var(--atomix-glass-radius);
@@ -2026,6 +2046,7 @@ a, a:hover {
2026
2046
  width: var(--atomix-glass-container-width);
2027
2047
  height: var(--atomix-glass-container-height);
2028
2048
  border-radius: var(--atomix-glass-radius);
2049
+ z-index: var(--_glass-z-content);
2029
2050
  }
2030
2051
  .c-atomix-glass__background-layer {
2031
2052
  position: absolute;
@@ -2033,6 +2054,7 @@ a, a:hover {
2033
2054
  border-radius: var(--atomix-glass-radius);
2034
2055
  transform: var(--atomix-glass-transform);
2035
2056
  transition: var(--atomix-glass-transition);
2057
+ z-index: var(--_glass-z-background);
2036
2058
  }
2037
2059
  .c-atomix-glass__background-layer--dark {
2038
2060
  background-color: var(--atomix-gray-9, #1f2937);
@@ -2043,7 +2065,6 @@ a, a:hover {
2043
2065
  }
2044
2066
  .c-atomix-glass__background-layer--dark.c-atomix-glass__background-layer--over-light {
2045
2067
  opacity: var(--atomix-opacity-50, 0.5);
2046
- z-index: -1;
2047
2068
  }
2048
2069
  .c-atomix-glass__background-layer--black.c-atomix-glass__background-layer--over-light {
2049
2070
  opacity: var(--atomix-opacity-25, 0.25);