@shohojdhara/atomix 0.4.4 → 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 +25 -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 +2 -6
  6. package/dist/charts.js.map +1 -1
  7. package/dist/core.d.ts +4 -4
  8. package/dist/core.js +12 -16
  9. package/dist/core.js.map +1 -1
  10. package/dist/forms.js +2 -6
  11. package/dist/forms.js.map +1 -1
  12. package/dist/heavy.js +7 -11
  13. package/dist/heavy.js.map +1 -1
  14. package/dist/index.d.ts +40 -16
  15. package/dist/index.esm.js +305 -331
  16. package/dist/index.esm.js.map +1 -1
  17. package/dist/index.js +335 -347
  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 +0 -1
  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 +38 -5
  45. package/src/components/AtomixGlass/__snapshots__/AtomixGlass.test.tsx.snap +0 -222
package/dist/atomix.css CHANGED
@@ -1903,14 +1903,32 @@ a, a:hover {
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);
@@ -1972,18 +1991,17 @@ a, a:hover {
1972
1991
  border-radius: var(--atomix-glass-radius);
1973
1992
  transform: var(--atomix-glass-transform);
1974
1993
  transition: var(--atomix-glass-transition);
1975
- z-index: var(--atomix-z-index-5);
1976
1994
  }
1977
1995
  .c-atomix-glass__border-1 {
1978
1996
  opacity: var(--atomix-opacity-20, 0.2);
1979
1997
  mix-blend-mode: screen;
1980
- z-index: var(--atomix-z-index-5, 5);
1998
+ z-index: var(--_glass-z-border-1);
1981
1999
  background: var(--atomix-glass-border-gradient-1, none);
1982
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));
1983
2001
  }
1984
2002
  .c-atomix-glass__border-2 {
1985
2003
  mix-blend-mode: overlay;
1986
- z-index: var(--atomix-z-index-6, 6);
2004
+ z-index: var(--_glass-z-border-2);
1987
2005
  background: var(--atomix-glass-border-gradient-2, none);
1988
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));
1989
2007
  }
@@ -2007,6 +2025,7 @@ a, a:hover {
2007
2025
  width: 100%;
2008
2026
  height: 100%;
2009
2027
  pointer-events: none;
2028
+ z-index: var(--_glass-z-filter);
2010
2029
  }
2011
2030
  .c-atomix-glass__filter svg {
2012
2031
  border-radius: var(--atomix-glass-radius);
@@ -2027,6 +2046,7 @@ a, a:hover {
2027
2046
  width: var(--atomix-glass-container-width);
2028
2047
  height: var(--atomix-glass-container-height);
2029
2048
  border-radius: var(--atomix-glass-radius);
2049
+ z-index: var(--_glass-z-content);
2030
2050
  }
2031
2051
  .c-atomix-glass__background-layer {
2032
2052
  position: absolute;
@@ -2034,6 +2054,7 @@ a, a:hover {
2034
2054
  border-radius: var(--atomix-glass-radius);
2035
2055
  transform: var(--atomix-glass-transform);
2036
2056
  transition: var(--atomix-glass-transition);
2057
+ z-index: var(--_glass-z-background);
2037
2058
  }
2038
2059
  .c-atomix-glass__background-layer--dark {
2039
2060
  background-color: var(--atomix-gray-9, #1f2937);
@@ -2044,7 +2065,6 @@ a, a:hover {
2044
2065
  }
2045
2066
  .c-atomix-glass__background-layer--dark.c-atomix-glass__background-layer--over-light {
2046
2067
  opacity: var(--atomix-opacity-50, 0.5);
2047
- z-index: -1;
2048
2068
  }
2049
2069
  .c-atomix-glass__background-layer--black.c-atomix-glass__background-layer--over-light {
2050
2070
  opacity: var(--atomix-opacity-25, 0.25);