@shohojdhara/atomix 0.4.9 → 0.5.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 (67) hide show
  1. package/dist/atomix.css +95 -69
  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.d.ts +1 -0
  6. package/dist/charts.js +231 -332
  7. package/dist/charts.js.map +1 -1
  8. package/dist/core.d.ts +1 -0
  9. package/dist/core.js +232 -333
  10. package/dist/core.js.map +1 -1
  11. package/dist/forms.d.ts +1 -0
  12. package/dist/forms.js +231 -332
  13. package/dist/forms.js.map +1 -1
  14. package/dist/heavy.d.ts +11 -2
  15. package/dist/heavy.js +233 -334
  16. package/dist/heavy.js.map +1 -1
  17. package/dist/index.d.ts +13 -2
  18. package/dist/index.esm.js +228 -327
  19. package/dist/index.esm.js.map +1 -1
  20. package/dist/index.js +227 -326
  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 +11 -1
  25. package/src/components/AtomixGlass/AtomixGlass.tsx +188 -128
  26. package/src/components/AtomixGlass/AtomixGlassContainer.tsx +62 -90
  27. package/src/components/AtomixGlass/PerformanceDashboard.tsx +153 -201
  28. package/src/components/AtomixGlass/glass-utils.ts +50 -0
  29. package/src/components/AtomixGlass/shader-utils.ts +1 -1
  30. package/src/components/AtomixGlass/stories/{Phase1-Animation.stories.tsx → AnimationFeatures.stories.tsx} +53 -47
  31. package/src/components/AtomixGlass/stories/Examples.stories.tsx +573 -236
  32. package/src/components/AtomixGlass/stories/Playground.stories.tsx +656 -44
  33. package/src/components/AtomixGlass/stories/argTypes.ts +384 -0
  34. package/src/components/AtomixGlass/stories/shared-components.tsx +82 -3
  35. package/src/components/AtomixGlass/stories/types.ts +127 -0
  36. package/src/lib/composables/useAtomixGlass.ts +108 -71
  37. package/src/lib/composables/useAtomixGlassStyles.ts +0 -2
  38. package/src/lib/constants/components.ts +1 -0
  39. package/src/lib/types/components.ts +1 -0
  40. package/src/lib/utils/displacement-generator.ts +1 -1
  41. package/src/styles/06-components/_components.atomix-glass.scss +158 -97
  42. package/scripts/cli/__tests__/README.md +0 -81
  43. package/scripts/cli/__tests__/basic.test.js +0 -116
  44. package/scripts/cli/__tests__/clean.test.js +0 -278
  45. package/scripts/cli/__tests__/component-generator.test.js +0 -332
  46. package/scripts/cli/__tests__/component-validator.test.js +0 -433
  47. package/scripts/cli/__tests__/generator.test.js +0 -613
  48. package/scripts/cli/__tests__/glass-motion.test.js +0 -256
  49. package/scripts/cli/__tests__/integration.test.js +0 -938
  50. package/scripts/cli/__tests__/migrate.test.js +0 -74
  51. package/scripts/cli/__tests__/security.test.js +0 -206
  52. package/scripts/cli/__tests__/test-setup.js +0 -135
  53. package/scripts/cli/__tests__/theme-bridge.test.js +0 -507
  54. package/scripts/cli/__tests__/token-manager.test.js +0 -251
  55. package/scripts/cli/__tests__/token-provider.test.js +0 -361
  56. package/scripts/cli/__tests__/utils.test.js +0 -165
  57. package/src/components/AtomixGlass/__snapshots__/AtomixGlass.test.tsx.snap +0 -216
  58. package/src/components/AtomixGlass/stories/Customization.stories.tsx +0 -131
  59. package/src/components/AtomixGlass/stories/Modes.stories.tsx +0 -1082
  60. package/src/components/AtomixGlass/stories/Overview.stories.tsx +0 -497
  61. package/src/components/AtomixGlass/stories/Performance.stories.tsx +0 -103
  62. package/src/components/AtomixGlass/stories/Phase1-Test.stories.tsx +0 -95
  63. package/src/components/AtomixGlass/stories/Shaders.stories.tsx +0 -395
  64. package/src/components/TypedButton/TypedButton.stories.tsx +0 -59
  65. package/src/components/TypedButton/TypedButton.tsx +0 -39
  66. package/src/components/TypedButton/index.ts +0 -2
  67. package/src/lib/composables/useTypedButton.ts +0 -66
package/dist/atomix.css CHANGED
@@ -1896,81 +1896,96 @@ a, a:hover {
1896
1896
  }
1897
1897
  .c-atomix-glass {
1898
1898
  position: relative;
1899
- --atomix-glass-transition: all 0.15s ease;
1899
+ --_glass-radius: var(--atomix-glass-radius, var(--atomix-radius-md, 0.75rem));
1900
+ --_glass-transform: var(--atomix-glass-transform, translateZ(0));
1901
+ --_glass-backdrop: var(--atomix-glass-border-backdrop, blur(14px) saturate(140%));
1900
1902
  --atomix-glass-position: absolute;
1901
- --atomix-glass-border-width: var(--atomix-spacing-0-5, 0.09375rem);
1902
- --atomix-glass-base-z-index: 0;
1903
- --_glass-z-background: calc(var(--atomix-glass-base-z-index) + 0);
1904
- --_glass-z-container: calc(var(--atomix-glass-base-z-index) + 1);
1905
- --_glass-z-filter: calc(var(--atomix-glass-base-z-index) + 1);
1906
- --_glass-z-effect: calc(var(--atomix-glass-base-z-index) + 2);
1907
- --_glass-z-hover: calc(var(--atomix-glass-base-z-index) + 3);
1908
- --_glass-z-overlay-highlight: calc(var(--atomix-glass-base-z-index) + 4);
1909
- --_glass-z-border-1: calc(var(--atomix-glass-base-z-index) + 5);
1910
- --_glass-z-border-2: calc(var(--atomix-glass-base-z-index) + 6);
1911
- --_glass-z-content: calc(var(--atomix-glass-base-z-index) + 7);
1912
- position: relative;
1913
- }
1914
- .c-atomix-glass__hover-1, .c-atomix-glass__hover-2, .c-atomix-glass__hover-3 {
1903
+ --atomix-glass-border-width: var(--atomix-spacing-0-5, 0.125rem);
1904
+ --atomix-glass-top: 0;
1905
+ --atomix-glass-left: 0;
1906
+ --atomix-glass-right: auto;
1907
+ --atomix-glass-bottom: auto;
1908
+ --_glass-transition: var(--atomix-transition-base);
1909
+ --atomix-glass-base-z-index: var(--atomix-z-index-base, 0);
1910
+ --_glass-z-background: calc(
1911
+ var(--atomix-glass-base-z-index) + var(--atomix-z-index-background, 0)
1912
+ );
1913
+ --_glass-z-container: calc(var(--atomix-glass-base-z-index) + var(--atomix-z-index-overlay, 1));
1914
+ --_glass-z-filter: calc(var(--atomix-glass-base-z-index) + var(--atomix-z-index-overlay, 1));
1915
+ --_glass-z-effect: calc(var(--atomix-glass-base-z-index) + var(--atomix-z-index-overlay, 1));
1916
+ --_glass-z-hover: calc(var(--atomix-glass-base-z-index) + var(--atomix-z-index-overlay, 1));
1917
+ --_glass-z-overlay-highlight: calc(
1918
+ var(--atomix-glass-base-z-index) + var(--atomix-z-index-overlay, 1)
1919
+ );
1920
+ --_glass-z-border-1: calc(var(--atomix-glass-base-z-index) + var(--atomix-z-index-overlay, 1));
1921
+ --_glass-z-border-2: calc(var(--atomix-glass-base-z-index) + var(--atomix-z-index-overlay, 1));
1922
+ --_glass-z-border-3: calc(var(--atomix-glass-base-z-index) + var(--atomix-z-index-content, 2));
1923
+ --_glass-z-content: calc(var(--atomix-glass-base-z-index) + var(--atomix-z-index-content, 2));
1924
+ --atomix-glass-border-shadow:
1925
+ 0 0 0 0.5px var(--atomix-glass-border-color, rgba(255, 255, 255, 0.45)) inset,
1926
+ 0 1px 2px var(--atomix-glass-inner-shadow-color, rgba(255, 255, 255, 0.18)) inset,
1927
+ 0 2px 6px var(--atomix-glass-outer-shadow-color, rgba(0, 0, 0, 0.28));
1928
+ }
1929
+ .c-atomix-glass__hover-1, .c-atomix-glass__hover-2, .c-atomix-glass__hover-3, .c-atomix-glass__base, .c-atomix-glass__overlay {
1915
1930
  position: var(--atomix-glass-position);
1916
1931
  top: var(--atomix-glass-top);
1917
1932
  left: var(--atomix-glass-left);
1933
+ right: var(--atomix-glass-right);
1934
+ bottom: var(--atomix-glass-bottom);
1935
+ width: var(--atomix-glass-width);
1936
+ height: var(--atomix-glass-height);
1918
1937
  pointer-events: none;
1919
- border-radius: var(--atomix-glass-radius);
1920
- transform: var(--atomix-glass-transform);
1921
- transition: var(--atomix-glass-transition);
1938
+ border-radius: var(--_glass-radius);
1939
+ transform: var(--_glass-transform);
1940
+ transition: var(--_glass-transition);
1941
+ }
1942
+ .c-atomix-glass__hover-1, .c-atomix-glass__hover-2, .c-atomix-glass__hover-3 {
1922
1943
  z-index: var(--_glass-z-hover);
1923
1944
  }
1924
1945
  .c-atomix-glass__base, .c-atomix-glass__overlay {
1925
- pointer-events: none;
1926
- border-radius: var(--atomix-glass-radius);
1927
- transform: var(--atomix-glass-transform);
1928
- transition: var(--atomix-glass-transition);
1929
1946
  z-index: var(--_glass-z-effect);
1930
1947
  }
1931
1948
  .c-atomix-glass__hover-1, .c-atomix-glass__hover-2, .c-atomix-glass__hover-3 {
1932
1949
  mix-blend-mode: overlay;
1933
- opacity: var(--atomix-glass-hover-1-opacity, 0);
1934
- background: var(--atomix-glass-hover-1-gradient, none);
1935
1950
  }
1936
1951
  .c-atomix-glass__hover-1 {
1937
- transition: opacity 0.2s cubic-bezier(0.22, 1, 0.36, 1), background 0.35s cubic-bezier(0.22, 1, 0.36, 1);
1952
+ transition: var(--_glass-transition), background var(--atomix-transition-duration-base, 0.3s) var(--atomix-easing-base, cubic-bezier(0.23, 1, 0.32, 1));
1938
1953
  opacity: var(--atomix-glass-hover-1-opacity, 0);
1939
- background: var(--atomix-glass-hover-1-gradient, none);
1954
+ background: var(--atomix-glass-hover-1-gradient, radial-gradient(60% 60% at 50% 0%, var(--atomix-glass-hover-1-start-color, rgba(255, 255, 255, 0.18)) 0%, var(--atomix-glass-hover-1-end-color, rgba(255, 255, 255, 0)) 60%));
1940
1955
  }
1941
1956
  .c-atomix-glass__hover-2 {
1942
- transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1), background 0.45s cubic-bezier(0.22, 1, 0.36, 1);
1957
+ transition: var(--_glass-transition), background var(--atomix-transition-duration-base, 0.3s) var(--atomix-easing-base, cubic-bezier(0.23, 1, 0.32, 1));
1943
1958
  opacity: var(--atomix-glass-hover-2-opacity, 0);
1944
- background: var(--atomix-glass-hover-2-gradient, none);
1959
+ background: var(--atomix-glass-hover-2-gradient, radial-gradient(80% 80% at 50% 100%, var(--atomix-glass-hover-2-start-color, rgba(0, 0, 0, 0.12)) 0%, var(--atomix-glass-hover-2-end-color, rgba(0, 0, 0, 0)) 60%));
1945
1960
  }
1946
1961
  .c-atomix-glass__hover-3 {
1947
- transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1), background 0.6s cubic-bezier(0.22, 1, 0.36, 1);
1962
+ transition: var(--_glass-transition);
1948
1963
  opacity: var(--atomix-glass-hover-3-opacity, 0);
1949
- background: var(--atomix-glass-hover-3-gradient, none);
1964
+ background: var(--atomix-glass-hover-3-gradient, linear-gradient(180deg, var(--atomix-glass-hover-3-start-color, rgba(255, 255, 255, 0.06)) 0%, var(--atomix-glass-hover-3-end-color, rgba(255, 255, 255, 0)) 100%));
1950
1965
  }
1951
1966
  .c-atomix-glass__base {
1952
1967
  mix-blend-mode: soft-light;
1953
- opacity: var(--atomix-glass-base-opacity, 0);
1954
- background: var(--atomix-glass-base-gradient, none);
1968
+ opacity: var(--atomix-glass-base-opacity, 0.6);
1969
+ background: var(--atomix-glass-base-gradient, linear-gradient(180deg, var(--atomix-glass-base-start-color, rgba(255, 255, 255, 0.08)) 0%, var(--atomix-glass-base-end-color, rgba(255, 255, 255, 0.02)) 100%));
1955
1970
  }
1956
1971
  .c-atomix-glass__overlay {
1957
1972
  mix-blend-mode: overlay;
1958
- opacity: var(--atomix-glass-overlay-opacity, 0);
1959
- background: var(--atomix-glass-overlay-gradient, none);
1973
+ opacity: var(--atomix-glass-overlay-opacity, 0.35);
1974
+ background: var(--atomix-glass-overlay-gradient, radial-gradient(120% 120% at 50% -10%, var(--atomix-glass-overlay-start-color, rgba(255, 255, 255, 0.12)) 0%, var(--atomix-glass-overlay-end-color, rgba(255, 255, 255, 0)) 40%));
1960
1975
  }
1961
1976
  .c-atomix-glass__overlay-highlight {
1962
1977
  position: absolute;
1963
1978
  inset: var(--atomix-spacing-0-5, 0.125rem);
1964
1979
  pointer-events: none;
1965
- border-radius: var(--atomix-glass-radius);
1966
- transform: var(--atomix-glass-transform);
1967
- transition: var(--atomix-glass-transition);
1980
+ border-radius: var(--_glass-radius);
1981
+ transform: var(--_glass-transform);
1982
+ transition: var(--_glass-transition);
1968
1983
  mix-blend-mode: screen;
1969
1984
  z-index: var(--_glass-z-overlay-highlight);
1970
- opacity: var(--atomix-glass-overlay-highlight-opacity, 0);
1971
- background: var(--atomix-glass-overlay-highlight-bg, none);
1985
+ opacity: var(--atomix-glass-overlay-highlight-opacity, 0.25);
1986
+ background: var(--atomix-glass-overlay-highlight-bg, linear-gradient(180deg, var(--atomix-glass-highlight-start-color, rgba(255, 255, 255, 0.24)) 0%, var(--atomix-glass-highlight-end-color, rgba(255, 255, 255, 0)) 60%));
1972
1987
  }
1973
- .c-atomix-glass__border-1, .c-atomix-glass__border-2 {
1988
+ .c-atomix-glass__border-backdrop, .c-atomix-glass__border-1, .c-atomix-glass__border-2 {
1974
1989
  padding: var(--atomix-glass-border-width);
1975
1990
  box-sizing: border-box;
1976
1991
  overflow: hidden;
@@ -1986,41 +2001,48 @@ a, a:hover {
1986
2001
  position: var(--atomix-glass-position);
1987
2002
  top: var(--atomix-glass-top);
1988
2003
  left: var(--atomix-glass-left);
2004
+ right: var(--atomix-glass-right);
2005
+ bottom: var(--atomix-glass-bottom);
1989
2006
  width: var(--atomix-glass-width);
1990
2007
  height: var(--atomix-glass-height);
1991
- border-radius: var(--atomix-glass-radius);
1992
- transform: var(--atomix-glass-transform);
1993
- transition: var(--atomix-glass-transition);
2008
+ border-radius: var(--_glass-radius);
2009
+ transform: var(--_glass-transform);
2010
+ transition: var(--_glass-transition);
2011
+ }
2012
+ .c-atomix-glass__border-backdrop {
2013
+ mix-blend-mode: overlay;
2014
+ z-index: var(--_glass-z-border-1);
2015
+ -webkit-backdrop-filter: var(--_glass-backdrop);
2016
+ backdrop-filter: var(--_glass-backdrop);
2017
+ box-shadow: var(--atomix-glass-border-shadow);
1994
2018
  }
1995
2019
  .c-atomix-glass__border-1 {
1996
- opacity: var(--atomix-opacity-20, 0.2);
2020
+ opacity: var(--atomix-glass-border-1-opacity, var(--atomix-opacity-18, 0.18));
1997
2021
  mix-blend-mode: screen;
1998
- z-index: var(--_glass-z-border-1);
2022
+ z-index: var(--_glass-z-border-2);
1999
2023
  background: var(--atomix-glass-border-gradient-1, none);
2000
- box-shadow: var(--atomix-glass-border-shadow, 0 0 0 0.5px rgba(255, 255, 255, 0.5) inset, 0 1px 3px rgba(255, 255, 255, 0.25) inset, 0 1px 4px rgba(0, 0, 0, 0.35));
2001
2024
  }
2002
2025
  .c-atomix-glass__border-2 {
2003
2026
  mix-blend-mode: overlay;
2004
- z-index: var(--_glass-z-border-2);
2027
+ z-index: var(--_glass-z-border-3);
2005
2028
  background: var(--atomix-glass-border-gradient-2, none);
2006
- box-shadow: var(--atomix-glass-border-shadow, 0 0 0 0.5px rgba(255, 255, 255, 0.5) inset, 0 1px 3px rgba(255, 255, 255, 0.25) inset, 0 1px 4px rgba(0, 0, 0, 0.35));
2007
2029
  }
2008
2030
  .c-atomix-glass__container {
2009
- position: var(--atomix-glass-position);
2031
+ position: relative;
2010
2032
  top: var(--atomix-glass-top);
2011
2033
  left: var(--atomix-glass-left);
2012
- border-radius: var(--atomix-glass-radius);
2013
- transition: var(--atomix-glass-transition);
2014
- transform: var(--atomix-glass-transform);
2034
+ right: var(--atomix-glass-right);
2035
+ bottom: var(--atomix-glass-bottom);
2036
+ border-radius: var(--_glass-radius);
2037
+ transition: var(--_glass-transition);
2038
+ transform: var(--_glass-transform);
2015
2039
  z-index: var(--_glass-z-container);
2016
2040
  }
2017
2041
  .c-atomix-glass__inner {
2018
2042
  width: 100%;
2019
2043
  height: 100%;
2020
2044
  position: relative;
2021
- border-radius: var(--atomix-glass-radius);
2022
- padding: var(--atomix-glass-container-padding);
2023
- box-shadow: var(--atomix-glass-container-box-shadow);
2045
+ border-radius: var(--_glass-radius);
2024
2046
  }
2025
2047
  .c-atomix-glass__filter {
2026
2048
  position: absolute;
@@ -2032,21 +2054,21 @@ a, a:hover {
2032
2054
  z-index: var(--_glass-z-filter);
2033
2055
  }
2034
2056
  .c-atomix-glass__filter svg {
2035
- border-radius: var(--atomix-glass-radius);
2057
+ border-radius: var(--_glass-radius);
2036
2058
  }
2037
2059
  .c-atomix-glass__filter-overlay {
2038
2060
  position: absolute;
2039
2061
  inset: 0;
2040
2062
  pointer-events: none;
2041
- border-radius: var(--atomix-glass-container-radius);
2042
- -webkit-backdrop-filter: var(--atomix-glass-container-backdrop);
2043
- backdrop-filter: var(--atomix-glass-container-backdrop);
2063
+ border-radius: var(--_glass-radius);
2064
+ -webkit-backdrop-filter: var(--atomix-glass-container-backdrop, var(--_glass-backdrop));
2065
+ backdrop-filter: var(--atomix-glass-container-backdrop, var(--_glass-backdrop));
2044
2066
  }
2045
2067
  .c-atomix-glass__filter-shadow {
2046
2068
  position: absolute;
2047
2069
  inset: var(--atomix-glass-border-width);
2048
2070
  pointer-events: none;
2049
- border-radius: var(--atomix-glass-container-radius);
2071
+ border-radius: var(--_glass-radius);
2050
2072
  box-shadow: var(--atomix-glass-container-shadow);
2051
2073
  opacity: var(--atomix-glass-container-shadow-opacity);
2052
2074
  background: var(--atomix-glass-container-bg);
@@ -2055,20 +2077,23 @@ a, a:hover {
2055
2077
  position: relative;
2056
2078
  width: var(--atomix-glass-container-width);
2057
2079
  height: var(--atomix-glass-container-height);
2058
- border-radius: var(--atomix-glass-radius);
2080
+ border-radius: var(--_glass-radius);
2059
2081
  z-index: var(--_glass-z-content);
2060
2082
  text-shadow: var(--atomix-glass-container-text-shadow);
2083
+ box-shadow: var(--atomix-glass-container-box-shadow);
2061
2084
  }
2062
2085
  .c-atomix-glass__background-layer {
2063
2086
  position: var(--atomix-glass-position);
2064
2087
  top: var(--atomix-glass-top);
2065
2088
  left: var(--atomix-glass-left);
2089
+ right: var(--atomix-glass-right);
2090
+ bottom: var(--atomix-glass-bottom);
2066
2091
  width: var(--atomix-glass-width);
2067
2092
  height: var(--atomix-glass-height);
2068
2093
  pointer-events: none;
2069
- border-radius: var(--atomix-glass-radius);
2070
- transform: var(--atomix-glass-transform);
2071
- transition: var(--atomix-glass-transition);
2094
+ border-radius: var(--_glass-radius);
2095
+ transform: var(--_glass-transform);
2096
+ transition: var(--_glass-transition);
2072
2097
  z-index: var(--_glass-z-background);
2073
2098
  }
2074
2099
  .c-atomix-glass__background-layer--dark {
@@ -2079,24 +2104,25 @@ a, a:hover {
2079
2104
  mix-blend-mode: overlay;
2080
2105
  }
2081
2106
  .c-atomix-glass__background-layer--dark.c-atomix-glass__background-layer--over-light {
2082
- opacity: var(--atomix-opacity-50, 0.5);
2107
+ opacity: var(--atomix-glass-over-light-dark-opacity, var(--atomix-opacity-50, 0.5));
2083
2108
  }
2084
2109
  .c-atomix-glass__background-layer--black.c-atomix-glass__background-layer--over-light {
2085
- opacity: var(--atomix-opacity-25, 0.25);
2110
+ opacity: var(--atomix-glass-over-light-black-opacity, var(--atomix-opacity-25, 0.25));
2086
2111
  }
2087
2112
  .c-atomix-glass__background-layer--hidden {
2088
2113
  opacity: var(--atomix-opacity-0, 0);
2089
2114
  }
2090
2115
  .c-atomix-glass--reduced-motion {
2091
2116
  --atomix-glass-transition: none;
2117
+ --_glass-transition: none;
2092
2118
  }
2093
2119
  .c-atomix-glass--reduced-motion * {
2094
2120
  transition: none !important;
2095
2121
  }
2096
2122
  .c-atomix-glass--high-contrast {
2097
- border: var(--atomix-spacing-0-5, 2px) solid currentColor;
2098
- outline: var(--atomix-spacing-0-5, 2px) solid transparent;
2099
- outline-offset: var(--atomix-spacing-0-5, 2px);
2123
+ border: var(--atomix-spacing-0-5) solid currentColor;
2124
+ outline: var(--atomix-spacing-0-5) solid transparent;
2125
+ outline-offset: var(--atomix-spacing-0-5);
2100
2126
  }
2101
2127
  .c-atomix-glass--disabled-effects {
2102
2128
  --atomix-glass-transform: none;