@alfalab/core-components-bottom-sheet 6.9.2 → 6.11.0

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 (34) hide show
  1. package/component.js +29 -12
  2. package/components/footer/Component.js +1 -1
  3. package/components/footer/index.css +30 -26
  4. package/components/header/Component.js +1 -1
  5. package/components/header/index.css +19 -16
  6. package/cssm/component.js +28 -11
  7. package/cssm/components/footer/index.module.css +4 -0
  8. package/cssm/components/header/index.module.css +6 -3
  9. package/cssm/index.module.css +9 -2
  10. package/cssm/types.d.ts +1 -1
  11. package/cssm/vars.css +21 -0
  12. package/esm/component.js +29 -12
  13. package/esm/components/footer/Component.js +1 -1
  14. package/esm/components/footer/index.css +30 -26
  15. package/esm/components/header/Component.js +1 -1
  16. package/esm/components/header/index.css +19 -16
  17. package/esm/index.css +52 -45
  18. package/esm/types.d.ts +1 -1
  19. package/index.css +52 -45
  20. package/modern/component.js +29 -12
  21. package/modern/components/footer/Component.js +1 -1
  22. package/modern/components/footer/index.css +30 -26
  23. package/modern/components/header/Component.js +1 -1
  24. package/modern/components/header/index.css +19 -16
  25. package/modern/index.css +52 -45
  26. package/modern/types.d.ts +1 -1
  27. package/package.json +4 -4
  28. package/src/component.tsx +34 -11
  29. package/src/components/footer/index.module.css +1 -5
  30. package/src/components/header/index.module.css +3 -10
  31. package/src/index.module.css +4 -7
  32. package/src/types.ts +1 -1
  33. package/src/vars.css +19 -0
  34. package/types.d.ts +1 -1
package/src/components/header/index.module.css CHANGED
@@ -1,17 +1,10 @@
1
1
  @import '@alfalab/core-components-themes/src/default.css';
2
-
3
- :root {
4
- --bottom-sheet-header-border-bottom: 1px solid var(--color-light-border-secondary);
5
- --bottom-sheet-title-font-size: 18px;
6
- --bottom-sheet-title-font-weight: 700;
7
- --bottom-sheet-title-line-height: 24px;
8
- --bottom-sheet-title-font-family: var(--font-family-system);
9
- }
2
+ @import '../../vars.css';
10
3
 
11
4
  .headerWrapper {
12
5
  padding: var(--gap-s) var(--gap-xs) var(--gap-2xs);
13
- border-top-right-radius: var(--border-radius-xl);
14
- border-top-left-radius: var(--border-radius-xl);
6
+ border-top-left-radius: inherit;
7
+ border-top-right-radius: inherit;
15
8
  z-index: 1;
16
9
  }
17
10
 
package/src/index.module.css CHANGED
@@ -1,9 +1,5 @@
1
1
  @import '@alfalab/core-components-themes/src/default.css';
2
-
3
- :root {
4
- --bottom-sheet-in-transition: transform 0.5s cubic-bezier(0.09, 0.91, 0.18, 0.99);
5
- --bottom-sheet-out-transition: transform 0.3s ease;
6
- }
2
+ @import './vars.css';
7
3
 
8
4
  .modal {
9
5
  background-color: transparent;
@@ -17,8 +13,8 @@
17
13
  .wrapper {
18
14
  transform: translateY(100%);
19
15
  pointer-events: none;
20
- border-top-right-radius: var(--border-radius-xl);
21
- border-top-left-radius: var(--border-radius-xl);
16
+ border-top-right-radius: var(--bottom-sheet-top-radius);
17
+ border-top-left-radius: var(--bottom-sheet-top-radius);
22
18
  transition: border-radius 0.3s ease;
23
19
  }
24
20
 
@@ -33,6 +29,7 @@
33
29
  border-radius: inherit;
34
30
  background-color: var(--color-light-bg-primary);
35
31
  pointer-events: all;
32
+ box-shadow: var(--bottom-sheet-shadow);
36
33
  }
37
34
 
38
35
  .withTransition {
package/src/types.ts CHANGED
@@ -320,7 +320,7 @@ export type BottomSheetProps = {
320
320
  /**
321
321
  * Вызывается после окончания анимации притягивания
322
322
  */
323
- onMagnetizeEnd?: () => void;
323
+ onMagnetizeEnd?: (index: number) => void;
324
324
 
325
325
  /**
326
326
  * Вызывается при изменении положения шторки
package/src/vars.css ADDED
@@ -0,0 +1,19 @@
1
+ @import '@alfalab/core-components-themes/src/default.css';
2
+
3
+ :root {
4
+ --bottom-sheet-in-transition: transform 0.5s cubic-bezier(0.09, 0.91, 0.18, 0.99);
5
+ --bottom-sheet-out-transition: transform 0.3s ease;
6
+ --bottom-sheet-top-radius: var(--border-radius-xl);
7
+ --bottom-sheet-shadow: none;
8
+
9
+ /* header */
10
+ --bottom-sheet-header-border-bottom: 1px solid var(--color-light-border-secondary);
11
+ --bottom-sheet-title-font-size: 18px;
12
+ --bottom-sheet-title-font-weight: 700;
13
+ --bottom-sheet-title-line-height: 24px;
14
+ --bottom-sheet-title-font-family: var(--font-family-system);
15
+
16
+ /* footer */
17
+ --bottom-sheet-footer-border-top: 1px solid var(--color-light-border-secondary);
18
+ --bottom-sheet-footer-background-color: var(--color-light-bg-primary);
19
+ }
package/types.d.ts CHANGED
@@ -259,7 +259,7 @@ type BottomSheetProps = {
259
259
  /**
260
260
  * Вызывается после окончания анимации притягивания
261
261
  */
262
- onMagnetizeEnd?: () => void;
262
+ onMagnetizeEnd?: (index: number) => void;
263
263
  /**
264
264
  * Вызывается при изменении положения шторки
265
265
  */