@shohojdhara/atomix 0.6.2 → 0.6.3

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/README.md +510 -106
  2. package/dist/atomix.css +28 -24
  3. package/dist/atomix.css.map +1 -1
  4. package/dist/atomix.min.css +5 -5
  5. package/dist/atomix.min.css.map +1 -1
  6. package/dist/atomix.umd.js +1 -1
  7. package/dist/atomix.umd.js.map +1 -1
  8. package/dist/atomix.umd.min.js +1 -1
  9. package/dist/charts.d.ts +2 -2
  10. package/dist/charts.js +251 -131
  11. package/dist/charts.js.map +1 -1
  12. package/dist/core.d.ts +5 -39
  13. package/dist/core.js +254 -137
  14. package/dist/core.js.map +1 -1
  15. package/dist/forms.d.ts +2 -1
  16. package/dist/forms.js +342 -177
  17. package/dist/forms.js.map +1 -1
  18. package/dist/heavy.js +254 -135
  19. package/dist/heavy.js.map +1 -1
  20. package/dist/index.d.ts +141 -159
  21. package/dist/index.esm.js +348 -195
  22. package/dist/index.esm.js.map +1 -1
  23. package/dist/index.js +348 -195
  24. package/dist/index.js.map +1 -1
  25. package/dist/index.min.js +1 -1
  26. package/dist/index.min.js.map +1 -1
  27. package/dist/theme.d.ts +14 -6
  28. package/dist/theme.js +2 -9
  29. package/dist/theme.js.map +1 -1
  30. package/package.json +26 -26
  31. package/src/components/AtomixGlass/AtomixGlass.tsx +1 -1
  32. package/src/components/AtomixGlass/AtomixGlassContainer.tsx +8 -1
  33. package/src/components/AtomixGlass/glass-utils.ts +29 -0
  34. package/src/components/AtomixGlass/stories/Playground.stories.tsx +32 -1
  35. package/src/components/Button/Button.stories.tsx +1 -1
  36. package/src/components/Button/Button.tsx +6 -5
  37. package/src/components/Card/Card.tsx +2 -2
  38. package/src/components/Dropdown/Dropdown.tsx +1 -0
  39. package/src/components/EdgePanel/EdgePanel.tsx +1 -3
  40. package/src/components/Form/Select.test.tsx +75 -0
  41. package/src/components/Form/Select.tsx +348 -252
  42. package/src/components/Form/SelectOption.tsx +16 -10
  43. package/src/components/index.ts +1 -1
  44. package/src/layouts/CssGrid/index.ts +1 -0
  45. package/src/lib/composables/useAtomixGlass.ts +238 -138
  46. package/src/lib/composables/useAtomixGlassStyles.ts +201 -149
  47. package/src/lib/constants/components.ts +50 -35
  48. package/src/lib/theme/config/configLoader.ts +1 -1
  49. package/src/lib/theme/test/testTheme.ts +2 -2
  50. package/src/lib/theme/utils/themeUtils.ts +98 -110
  51. package/src/lib/types/components.ts +21 -63
  52. package/src/styles/01-settings/_settings.spacing.scss +6 -1
  53. package/src/styles/03-generic/_generic.reset.scss +1 -1
  54. package/src/styles/06-components/_components.atomix-glass.scss +20 -29
  55. package/src/styles/06-components/_components.data-table.scss +5 -4
  56. package/src/styles/06-components/_components.dynamic-background.scss +9 -8
  57. package/src/styles/06-components/_components.footer.scss +8 -7
  58. package/src/styles/06-components/_components.hero.scss +2 -2
  59. package/src/styles/06-components/_components.messages.scss +16 -16
  60. package/src/styles/06-components/_components.select.scss +15 -2
  61. package/src/styles/06-components/_components.upload.scss +3 -3
  62. package/CHANGELOG.md +0 -165
package/dist/atomix.css CHANGED
@@ -356,7 +356,7 @@ summary {
356
356
  body {
357
357
  min-width: 992px !important;
358
358
  }
359
- .container {
359
+ .o-container {
360
360
  min-width: 992px !important;
361
361
  }
362
362
  }
@@ -2005,17 +2005,14 @@ a, a:hover {
2005
2005
  mix-blend-mode: overlay;
2006
2006
  }
2007
2007
  .c-atomix-glass__hover-1 {
2008
- transition: var(--_glass-transition), background var(--atomix-transition-duration-base, 0.3s) var(--atomix-easing-base, cubic-bezier(0.23, 1, 0.32, 1));
2009
2008
  opacity: var(--atomix-glass-hover-1-opacity, 0);
2010
2009
  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%));
2011
2010
  }
2012
2011
  .c-atomix-glass__hover-2 {
2013
- transition: var(--_glass-transition), background var(--atomix-transition-duration-base, 0.3s) var(--atomix-easing-base, cubic-bezier(0.23, 1, 0.32, 1));
2014
2012
  opacity: var(--atomix-glass-hover-2-opacity, 0);
2015
2013
  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%));
2016
2014
  }
2017
2015
  .c-atomix-glass__hover-3 {
2018
- transition: var(--_glass-transition);
2019
2016
  opacity: var(--atomix-glass-hover-3-opacity, 0);
2020
2017
  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%));
2021
2018
  }
@@ -2070,7 +2067,6 @@ a, a:hover {
2070
2067
  z-index: var(--_glass-z-border-1);
2071
2068
  -webkit-backdrop-filter: blur(30px) saturate(140%) brightness(110%);
2072
2069
  backdrop-filter: blur(30px) saturate(140%) brightness(110%);
2073
- box-shadow: var(--atomix-glass-border-shadow);
2074
2070
  }
2075
2071
  .c-atomix-glass__border-1 {
2076
2072
  opacity: var(--atomix-glass-border-1-opacity, var(--atomix-opacity-18, 0.18));
@@ -2153,10 +2149,10 @@ a, a:hover {
2153
2149
  z-index: var(--_glass-z-background);
2154
2150
  }
2155
2151
  .c-atomix-glass__background-layer--dark {
2156
- background-color: var(--atomix-gray-9, #1f2937);
2152
+ background-color: var(atomix-gray-9, #1f2937);
2157
2153
  }
2158
2154
  .c-atomix-glass__background-layer--black {
2159
- background-color: var(--atomix-black, #000000);
2155
+ background-color: var(atomix-black, #000000);
2160
2156
  mix-blend-mode: overlay;
2161
2157
  }
2162
2158
  .c-atomix-glass__background-layer--dark.c-atomix-glass__background-layer--over-light {
@@ -5334,7 +5330,7 @@ a, a:hover {
5334
5330
  color: var(--atomix-primary);
5335
5331
  }
5336
5332
  .c-data-table__column-filter {
5337
- width: 120px;
5333
+ width: 7.5rem;
5338
5334
  padding: 0.25rem 0.5rem;
5339
5335
  font-size: 0.875rem;
5340
5336
  border: 1px solid var(--atomix-border-color);
@@ -5350,7 +5346,7 @@ a, a:hover {
5350
5346
  position: absolute;
5351
5347
  top: 0;
5352
5348
  right: 0;
5353
- width: 4px;
5349
+ width: 0.25rem;
5354
5350
  height: 100%;
5355
5351
  cursor: col-resize;
5356
5352
  background-color: transparent;
@@ -5392,7 +5388,7 @@ a, a:hover {
5392
5388
  background-color: rgba(var(--atomix-primary-rgb), 0.1);
5393
5389
  }
5394
5390
  .c-data-table__cell--selection {
5395
- width: 48px;
5391
+ width: 3rem;
5396
5392
  text-align: center;
5397
5393
  padding: 0.75rem 0.5rem;
5398
5394
  }
@@ -5458,7 +5454,7 @@ a, a:hover {
5458
5454
  flex: 0 0 auto;
5459
5455
  }
5460
5456
  .c-data-table-search__input {
5461
- width: 240px;
5457
+ width: 15rem;
5462
5458
  }
5463
5459
  .c-data-table__pagination-container {
5464
5460
  display: flex;
@@ -5738,8 +5734,8 @@ a, a:hover {
5738
5734
  transform: rotate(-180deg);
5739
5735
  }
5740
5736
  .c-dynamic-background {
5741
- min-height: 200px;
5742
- border-radius: 16px;
5737
+ min-height: 12.5rem;
5738
+ border-radius: 1rem;
5743
5739
  }
5744
5740
  .c-dynamic-background--glass {
5745
5741
  background-color: color-mix(in srgb, #8b5cf6 65%, transparent);
@@ -6179,7 +6175,7 @@ a, a:hover {
6179
6175
  align-items: center;
6180
6176
  text-align: center;
6181
6177
  gap: clamp(1.5rem, 4vw, 2.5rem);
6182
- max-width: 600px;
6178
+ max-width: 37.5rem;
6183
6179
  margin-left: auto;
6184
6180
  margin-right: auto;
6185
6181
  }
@@ -6295,7 +6291,7 @@ a, a:hover {
6295
6291
  transform: rotate(-90deg);
6296
6292
  }
6297
6293
  .c-footer__section--collapsible:not(.c-footer__section--collapsed) .c-footer__section-content {
6298
- max-height: 500px;
6294
+ max-height: 31.25rem;
6299
6295
  }
6300
6296
  }
6301
6297
  @media (min-width: 768px) {
@@ -6709,13 +6705,13 @@ a, a:hover {
6709
6705
  align-items: center;
6710
6706
  text-align: center;
6711
6707
  gap: clamp(1.5rem, 4vw, 2.5rem);
6712
- max-width: 600px;
6708
+ max-width: 37.5rem;
6713
6709
  margin-left: auto;
6714
6710
  margin-right: auto;
6715
6711
  }
6716
6712
  .c-footer--flexible .c-footer__section-col {
6717
6713
  flex: 1 1 auto;
6718
- min-width: 250px;
6714
+ min-width: 15.625rem;
6719
6715
  }
6720
6716
  .c-footer--sidebar .c-footer__sections--columns {
6721
6717
  align-items: flex-start;
@@ -7217,7 +7213,7 @@ a, a:hover {
7217
7213
  @media (min-width: 768px) {
7218
7214
  .c-hero__title {
7219
7215
  font-size: var(--atomix-hero-title-font-size);
7220
- line-height: 72px;
7216
+ line-height: 4.5rem;
7221
7217
  }
7222
7218
  }
7223
7219
  .c-hero__text {
@@ -7234,7 +7230,7 @@ a, a:hover {
7234
7230
  .c-hero__image {
7235
7231
  width: 100%;
7236
7232
  max-width: none;
7237
- height: 380px;
7233
+ height: 23.75rem;
7238
7234
  -o-object-fit: cover;
7239
7235
  object-fit: cover;
7240
7236
  -o-object-position: center;
@@ -10000,7 +9996,7 @@ a, a:hover {
10000
9996
  transition-timing-function: ease-in-out;
10001
9997
  transition-delay: 0s;
10002
9998
  }
10003
- .c-select__dropdown {
9999
+ .c-select__body {
10004
10000
  position: absolute;
10005
10001
  width: 100%;
10006
10002
  height: 0px;
@@ -10009,7 +10005,6 @@ a, a:hover {
10009
10005
  border-radius: var(--atomix-select-panel-border-radius);
10010
10006
  box-shadow: var(--atomix-select-panel-box-shadow);
10011
10007
  overflow: hidden;
10012
- z-index: 99;
10013
10008
  transition-property: all;
10014
10009
  transition-duration: 0.2s;
10015
10010
  transition-timing-function: ease-in-out;
@@ -10043,6 +10038,15 @@ a, a:hover {
10043
10038
  .c-select--lg {
10044
10039
  --atomix-select-font-size: var(--atomix-select-font-size-lg);
10045
10040
  }
10041
+ .c-select--glass .c-select__selected {
10042
+ background-color: color-mix(in srgb, var(--atomix-select-bg) 50%, transparent);
10043
+ }
10044
+ .c-select--glass .c-select__body {
10045
+ background-color: color-mix(in srgb, var(--atomix-select-panel-bg) 50%, transparent);
10046
+ }
10047
+ .c-select--glass .c-select__item {
10048
+ background-color: color-mix(in srgb, var(--atomix-select-item-bg) 20%, transparent);
10049
+ }
10046
10050
  .c-select.is-open {
10047
10051
  --atomix-select-bg: var(--atomix-select-expanded-bg);
10048
10052
  }
@@ -11287,7 +11291,7 @@ a, a:hover {
11287
11291
  }
11288
11292
  .c-upload__loader-progress {
11289
11293
  display: flex;
11290
- gap: 10px;
11294
+ gap: 0.625rem;
11291
11295
  color: var(--atomix-upload-loader-text-color);
11292
11296
  font-size: var(--atomix-upload-loader-text-font-size);
11293
11297
  line-height: 1.43;
@@ -11317,8 +11321,8 @@ a, a:hover {
11317
11321
  outline-offset: 2px;
11318
11322
  }
11319
11323
  .c-upload__loader-bar {
11320
- width: 22px;
11321
- height: 22px;
11324
+ width: 1.375rem;
11325
+ height: 1.375rem;
11322
11326
  }
11323
11327
  .c-upload__loader-bar svg {
11324
11328
  width: 100%;