@shohojdhara/atomix 0.4.4 → 0.4.6

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 (62) hide show
  1. package/dist/atomix.css +50 -11
  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 +184 -189
  6. package/dist/charts.js.map +1 -1
  7. package/dist/core.d.ts +4 -4
  8. package/dist/core.js +194 -199
  9. package/dist/core.js.map +1 -1
  10. package/dist/forms.js +184 -189
  11. package/dist/forms.js.map +1 -1
  12. package/dist/heavy.js +189 -194
  13. package/dist/heavy.js.map +1 -1
  14. package/dist/index.d.ts +44 -47
  15. package/dist/index.esm.js +496 -613
  16. package/dist/index.esm.js.map +1 -1
  17. package/dist/index.js +528 -631
  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 +60 -39
  23. package/src/components/AtomixGlass/AtomixGlassContainer.tsx +8 -42
  24. package/src/components/AtomixGlass/glass-utils.ts +27 -14
  25. package/src/components/AtomixGlass/stories/Overview.stories.tsx +19 -21
  26. package/src/components/AtomixGlass/stories/Playground.stories.tsx +1162 -515
  27. package/src/components/AtomixGlass/stories/shared-components.tsx +11 -3
  28. package/src/components/Breadcrumb/Breadcrumb.tsx +5 -5
  29. package/src/components/Breadcrumb/BreadcrumbCompound.test.tsx +2 -2
  30. package/src/components/Button/Button.tsx +6 -6
  31. package/src/components/Card/Card.tsx +3 -3
  32. package/src/components/Dropdown/Dropdown.tsx +5 -3
  33. package/src/components/Footer/Footer.tsx +124 -166
  34. package/src/components/Footer/FooterLink.tsx +16 -19
  35. package/src/components/Footer/FooterSection.tsx +40 -39
  36. package/src/components/Footer/FooterSocialLink.tsx +59 -58
  37. package/src/components/Footer/README.md +1 -1
  38. package/src/components/Hero/Hero.tsx +72 -142
  39. package/src/components/Navigation/Menu/MegaMenu.tsx +17 -12
  40. package/src/components/Navigation/Menu/Menu.tsx +49 -24
  41. package/src/components/Navigation/Nav/NavItem.tsx +5 -3
  42. package/src/components/Navigation/Navbar/Navbar.tsx +13 -5
  43. package/src/components/Navigation/SideMenu/SideMenu.tsx +2 -2
  44. package/src/components/Navigation/SideMenu/SideMenuItem.tsx +4 -4
  45. package/src/components/Slider/Slider.tsx +7 -4
  46. package/src/lib/composables/index.ts +1 -2
  47. package/src/lib/composables/useAtomixGlass.ts +246 -222
  48. package/src/lib/composables/useAtomixGlassStyles.ts +46 -23
  49. package/src/lib/composables/useFooter.ts +117 -20
  50. package/src/lib/composables/useSlider.ts +3 -1
  51. package/src/lib/constants/components.ts +3 -1
  52. package/src/lib/types/components.ts +44 -12
  53. package/src/styles/06-components/_components.atomix-glass.scss +72 -14
  54. package/src/components/AtomixGlass/__snapshots__/AtomixGlass.test.tsx.snap +0 -222
  55. package/src/lib/composables/atomix-glass/useGlassBackgroundDetection.ts +0 -329
  56. package/src/lib/composables/atomix-glass/useGlassCornerRadius.ts +0 -82
  57. package/src/lib/composables/atomix-glass/useGlassMouseTracking.ts +0 -153
  58. package/src/lib/composables/atomix-glass/useGlassOverLight.ts +0 -198
  59. package/src/lib/composables/atomix-glass/useGlassState.ts +0 -112
  60. package/src/lib/composables/atomix-glass/useGlassTransforms.ts +0 -160
  61. package/src/lib/composables/glass-styles.ts +0 -302
  62. package/src/lib/composables/useGlassContainer.ts +0 -177
package/dist/atomix.css CHANGED
@@ -1898,19 +1898,40 @@ 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: transform var(--atomix-transition-duration, 0.15s) ease-out;
1901
+ --atomix-glass-transition: transform var(--atomix-transition-duration, 0.45s)
1902
+ cubic-bezier(0.22, 1, 0.36, 1);
1902
1903
  --atomix-glass-position: absolute;
1903
1904
  --atomix-glass-container-width: 100%;
1904
1905
  --atomix-glass-container-height: 100%;
1905
1906
  --atomix-glass-border-width: var(--atomix-spacing-0-5, 0.09375rem);
1907
+ --atomix-glass-base-z-index: 0;
1908
+ --_glass-z-background: calc(var(--atomix-glass-base-z-index) + 0);
1909
+ --_glass-z-container: calc(var(--atomix-glass-base-z-index) + 1);
1910
+ --_glass-z-filter: calc(var(--atomix-glass-base-z-index) + 1);
1911
+ --_glass-z-effect: calc(var(--atomix-glass-base-z-index) + 2);
1912
+ --_glass-z-hover: calc(var(--atomix-glass-base-z-index) + 3);
1913
+ --_glass-z-overlay-highlight: calc(var(--atomix-glass-base-z-index) + 4);
1914
+ --_glass-z-border-1: calc(var(--atomix-glass-base-z-index) + 5);
1915
+ --_glass-z-border-2: calc(var(--atomix-glass-base-z-index) + 6);
1916
+ --_glass-z-content: calc(var(--atomix-glass-base-z-index) + 7);
1906
1917
  }
1907
- .c-atomix-glass__hover-1, .c-atomix-glass__hover-2, .c-atomix-glass__hover-3, .c-atomix-glass__base, .c-atomix-glass__overlay {
1918
+ .c-atomix-glass__hover-1, .c-atomix-glass__hover-2, .c-atomix-glass__hover-3 {
1908
1919
  position: absolute;
1909
1920
  inset: 0;
1910
1921
  pointer-events: none;
1911
1922
  border-radius: var(--atomix-glass-radius);
1912
1923
  transform: var(--atomix-glass-transform);
1913
1924
  transition: var(--atomix-glass-transition);
1925
+ z-index: var(--_glass-z-hover);
1926
+ }
1927
+ .c-atomix-glass__base, .c-atomix-glass__overlay {
1928
+ position: absolute;
1929
+ inset: 0;
1930
+ pointer-events: none;
1931
+ border-radius: var(--atomix-glass-radius);
1932
+ transform: var(--atomix-glass-transform);
1933
+ transition: var(--atomix-glass-transition);
1934
+ z-index: var(--_glass-z-effect);
1914
1935
  }
1915
1936
  .c-atomix-glass__hover-1, .c-atomix-glass__hover-2, .c-atomix-glass__hover-3 {
1916
1937
  mix-blend-mode: overlay;
@@ -1918,17 +1939,17 @@ a, a:hover {
1918
1939
  background: var(--atomix-glass-hover-1-gradient, none);
1919
1940
  }
1920
1941
  .c-atomix-glass__hover-1 {
1921
- transition: opacity var(--atomix-transition-duration-fast, 0.15s) ease-out;
1942
+ transition: opacity 0.2s cubic-bezier(0.22, 1, 0.36, 1), background 0.35s cubic-bezier(0.22, 1, 0.36, 1);
1922
1943
  opacity: var(--atomix-glass-hover-1-opacity, 0);
1923
1944
  background: var(--atomix-glass-hover-1-gradient, none);
1924
1945
  }
1925
1946
  .c-atomix-glass__hover-2 {
1926
- transition: opacity var(--atomix-transition-duration-base, 0.3s) ease-out;
1947
+ transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1), background 0.45s cubic-bezier(0.22, 1, 0.36, 1);
1927
1948
  opacity: var(--atomix-glass-hover-2-opacity, 0);
1928
1949
  background: var(--atomix-glass-hover-2-gradient, none);
1929
1950
  }
1930
1951
  .c-atomix-glass__hover-3 {
1931
- transition: opacity var(--atomix-transition-duration-slow, 0.5s) ease-out;
1952
+ transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1), background 0.6s cubic-bezier(0.22, 1, 0.36, 1);
1932
1953
  opacity: var(--atomix-glass-hover-3-opacity, 0);
1933
1954
  background: var(--atomix-glass-hover-3-gradient, none);
1934
1955
  }
@@ -1950,6 +1971,9 @@ a, a:hover {
1950
1971
  transform: var(--atomix-glass-transform);
1951
1972
  transition: var(--atomix-glass-transition);
1952
1973
  mix-blend-mode: screen;
1974
+ z-index: var(--_glass-z-overlay-highlight);
1975
+ opacity: var(--atomix-glass-overlay-highlight-opacity, 0);
1976
+ background: var(--atomix-glass-overlay-highlight-bg, none);
1953
1977
  }
1954
1978
  .c-atomix-glass__border-1, .c-atomix-glass__border-2 {
1955
1979
  padding: var(--atomix-glass-border-width);
@@ -1972,18 +1996,17 @@ a, a:hover {
1972
1996
  border-radius: var(--atomix-glass-radius);
1973
1997
  transform: var(--atomix-glass-transform);
1974
1998
  transition: var(--atomix-glass-transition);
1975
- z-index: var(--atomix-z-index-5);
1976
1999
  }
1977
2000
  .c-atomix-glass__border-1 {
1978
2001
  opacity: var(--atomix-opacity-20, 0.2);
1979
2002
  mix-blend-mode: screen;
1980
- z-index: var(--atomix-z-index-5, 5);
2003
+ z-index: var(--_glass-z-border-1);
1981
2004
  background: var(--atomix-glass-border-gradient-1, none);
1982
2005
  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
2006
  }
1984
2007
  .c-atomix-glass__border-2 {
1985
2008
  mix-blend-mode: overlay;
1986
- z-index: var(--atomix-z-index-6, 6);
2009
+ z-index: var(--_glass-z-border-2);
1987
2010
  background: var(--atomix-glass-border-gradient-2, none);
1988
2011
  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
2012
  }
@@ -1993,12 +2016,15 @@ a, a:hover {
1993
2016
  position: relative;
1994
2017
  border-radius: var(--atomix-glass-radius);
1995
2018
  transition: var(--atomix-glass-transition);
2019
+ z-index: var(--_glass-z-container);
1996
2020
  }
1997
2021
  .c-atomix-glass__inner {
1998
2022
  width: var(--atomix-glass-container-width);
1999
2023
  height: var(--atomix-glass-container-height);
2000
2024
  position: relative;
2001
2025
  border-radius: var(--atomix-glass-radius);
2026
+ padding: var(--atomix-glass-container-padding);
2027
+ box-shadow: var(--atomix-glass-container-box-shadow);
2002
2028
  }
2003
2029
  .c-atomix-glass__filter {
2004
2030
  position: absolute;
@@ -2007,6 +2033,7 @@ a, a:hover {
2007
2033
  width: 100%;
2008
2034
  height: 100%;
2009
2035
  pointer-events: none;
2036
+ z-index: var(--_glass-z-filter);
2010
2037
  }
2011
2038
  .c-atomix-glass__filter svg {
2012
2039
  border-radius: var(--atomix-glass-radius);
@@ -2015,25 +2042,38 @@ a, a:hover {
2015
2042
  position: absolute;
2016
2043
  inset: 0;
2017
2044
  pointer-events: none;
2018
- border-radius: var(--atomix-glass-radius);
2045
+ border-radius: var(--atomix-glass-container-radius);
2046
+ -webkit-backdrop-filter: var(--atomix-glass-container-backdrop);
2047
+ backdrop-filter: var(--atomix-glass-container-backdrop);
2019
2048
  }
2020
2049
  .c-atomix-glass__filter-shadow {
2021
2050
  position: absolute;
2022
2051
  inset: var(--atomix-glass-border-width);
2023
2052
  pointer-events: none;
2053
+ border-radius: var(--atomix-glass-container-radius);
2054
+ box-shadow: var(--atomix-glass-container-shadow);
2055
+ opacity: var(--atomix-glass-container-shadow-opacity);
2056
+ background: var(--atomix-glass-container-bg);
2024
2057
  }
2025
2058
  .c-atomix-glass__content {
2026
2059
  position: relative;
2027
2060
  width: var(--atomix-glass-container-width);
2028
2061
  height: var(--atomix-glass-container-height);
2029
2062
  border-radius: var(--atomix-glass-radius);
2063
+ z-index: var(--_glass-z-content);
2064
+ text-shadow: var(--atomix-glass-container-text-shadow);
2030
2065
  }
2031
2066
  .c-atomix-glass__background-layer {
2032
- position: absolute;
2067
+ position: var(--atomix-glass-position);
2068
+ top: var(--atomix-glass-top);
2069
+ left: var(--atomix-glass-left);
2070
+ width: var(--atomix-glass-width);
2071
+ height: var(--atomix-glass-height);
2033
2072
  pointer-events: none;
2034
2073
  border-radius: var(--atomix-glass-radius);
2035
2074
  transform: var(--atomix-glass-transform);
2036
2075
  transition: var(--atomix-glass-transition);
2076
+ z-index: var(--_glass-z-background);
2037
2077
  }
2038
2078
  .c-atomix-glass__background-layer--dark {
2039
2079
  background-color: var(--atomix-gray-9, #1f2937);
@@ -2044,7 +2084,6 @@ a, a:hover {
2044
2084
  }
2045
2085
  .c-atomix-glass__background-layer--dark.c-atomix-glass__background-layer--over-light {
2046
2086
  opacity: var(--atomix-opacity-50, 0.5);
2047
- z-index: -1;
2048
2087
  }
2049
2088
  .c-atomix-glass__background-layer--black.c-atomix-glass__background-layer--over-light {
2050
2089
  opacity: var(--atomix-opacity-25, 0.25);