@alfalab/core-components-tab-bar 2.0.6 → 2.0.8

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 (16) hide show
  1. package/Component.js +1 -1
  2. package/components/tab/Component.js +1 -1
  3. package/components/tab/index.css +15 -11
  4. package/cssm/components/tab/index.module.css +7 -3
  5. package/cssm/index.module.css +3 -1
  6. package/esm/Component.js +1 -1
  7. package/esm/components/tab/Component.js +1 -1
  8. package/esm/components/tab/index.css +15 -11
  9. package/esm/index.css +8 -6
  10. package/index.css +8 -6
  11. package/modern/Component.js +1 -1
  12. package/modern/components/tab/Component.js +1 -1
  13. package/modern/components/tab/index.css +15 -11
  14. package/modern/index.css +8 -6
  15. package/package.json +6 -6
  16. package/src/components/tab/index.module.css +2 -2
package/Component.js CHANGED
@@ -13,7 +13,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
13
13
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
14
14
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
15
15
 
16
- var styles = {"component":"tab-bar__component_16x4w","modal-bg-primary":"tab-bar__modal-bg-primary_16x4w","modal-bg-alt-primary":"tab-bar__modal-bg-alt-primary_16x4w","border":"tab-bar__border_16x4w"};
16
+ var styles = {"component":"tab-bar__component_1ppo6","modal-bg-primary":"tab-bar__modal-bg-primary_1ppo6","modal-bg-alt-primary":"tab-bar__modal-bg-alt-primary_1ppo6","border":"tab-bar__border_1ppo6"};
17
17
  require('./index.css')
18
18
 
19
19
  var TabBarComponent = React.forwardRef(function (_a, ref) {
package/components/tab/Component.js CHANGED
@@ -14,7 +14,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
14
14
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
15
15
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
16
16
 
17
- var styles = {"component":"tab-bar__component_1ylgd","primary":"tab-bar__primary_1ylgd","secondary":"tab-bar__secondary_1ylgd","icon":"tab-bar__icon_1ylgd","label":"tab-bar__label_1ylgd","labelSelected":"tab-bar__labelSelected_1ylgd","indicator":"tab-bar__indicator_1ylgd"};
17
+ var styles = {"component":"tab-bar__component_bqjx3","primary":"tab-bar__primary_bqjx3","secondary":"tab-bar__secondary_bqjx3","icon":"tab-bar__icon_bqjx3","label":"tab-bar__label_bqjx3","labelSelected":"tab-bar__labelSelected_bqjx3","indicator":"tab-bar__indicator_bqjx3"};
18
18
  require('./index.css')
19
19
 
20
20
  var TabComponent = React.forwardRef(function (_a, ref) {
package/components/tab/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 16e56 */
1
+ /* hash: 1l5ez */
2
2
  :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root {
4
4
  --color-light-accent-primary: #ef3124;
@@ -14,15 +14,19 @@
14
14
  /* Up */
15
15
 
16
16
  /* Hard up */
17
- } :root {
17
+ } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
18
+
19
+ /* новые значения, используйте их */
18
20
  } :root { /* deprecated */
19
21
  --gap-2xs: 4px; /* deprecated */
20
22
  --gap-xs: 8px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
21
23
 
22
24
  /* новые значения, используйте их */
25
+ --gap-4: var(--gap-2xs);
26
+ --gap-8: var(--gap-xs);
23
27
  } :root {
24
28
  } :root {
25
- } .tab-bar__component_1ylgd {
29
+ } .tab-bar__component_bqjx3 {
26
30
  box-sizing: border-box;
27
31
  background-color: transparent;
28
32
  -webkit-tap-highlight-color: transparent;
@@ -44,19 +48,19 @@
44
48
  flex-direction: column;
45
49
  flex: 1 0 0;
46
50
  align-items: center;
47
- padding: var(--gap-xs) 0;
51
+ padding: var(--gap-8) 0;
48
52
  color: var(--color-light-neutral-translucent-700);
49
- } .tab-bar__primary_1ylgd {
53
+ } .tab-bar__primary_bqjx3 {
50
54
  color: var(--color-light-accent-primary);
51
- } .tab-bar__secondary_1ylgd {
55
+ } .tab-bar__secondary_bqjx3 {
52
56
  color: var(--color-light-accent-secondary);
53
- } .tab-bar__icon_1ylgd {
57
+ } .tab-bar__icon_bqjx3 {
54
58
  display: flex;
55
59
  align-items: center;
56
60
  justify-content: center;
57
61
  flex-grow: 1;
58
62
  width: 100%;
59
- } .tab-bar__label_1ylgd {
63
+ } .tab-bar__label_bqjx3 {
60
64
  -webkit-line-clamp: 1;
61
65
  display: -webkit-box;
62
66
  -webkit-box-orient: vertical;
@@ -65,12 +69,12 @@
65
69
  flex-shrink: 0;
66
70
 
67
71
  color: var(--color-light-text-secondary);
68
- } .tab-bar__labelSelected_1ylgd {
72
+ } .tab-bar__labelSelected_bqjx3 {
69
73
  color: inherit;
70
- } .tab-bar__indicator_1ylgd {
74
+ } .tab-bar__indicator_bqjx3 {
71
75
  position: absolute;
72
76
  top: 3px;
73
- left: calc(50% + var(--gap-2xs));
77
+ left: calc(50% + var(--gap-4));
74
78
  height: 16px;
75
79
  min-width: 16px;
76
80
  }
package/cssm/components/tab/index.module.css CHANGED
@@ -13,12 +13,16 @@
13
13
  /* Up */
14
14
 
15
15
  /* Hard up */
16
- } :root {
16
+ } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
17
+
18
+ /* новые значения, используйте их */
17
19
  } :root { /* deprecated */
18
20
  --gap-2xs: 4px; /* deprecated */
19
21
  --gap-xs: 8px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
20
22
 
21
23
  /* новые значения, используйте их */
24
+ --gap-4: var(--gap-2xs);
25
+ --gap-8: var(--gap-xs);
22
26
  } :root {
23
27
  } :root {
24
28
  } .component {
@@ -43,7 +47,7 @@
43
47
  flex-direction: column;
44
48
  flex: 1 0 0;
45
49
  align-items: center;
46
- padding: var(--gap-xs) 0;
50
+ padding: var(--gap-8) 0;
47
51
  color: var(--color-light-neutral-translucent-700);
48
52
  } .primary {
49
53
  color: var(--color-light-accent-primary);
@@ -69,7 +73,7 @@
69
73
  } .indicator {
70
74
  position: absolute;
71
75
  top: 3px;
72
- left: calc(50% + var(--gap-2xs));
76
+ left: calc(50% + var(--gap-4));
73
77
  height: 16px;
74
78
  min-width: 16px;
75
79
  }
package/cssm/index.module.css CHANGED
@@ -12,7 +12,9 @@
12
12
  /* Up */
13
13
 
14
14
  /* Hard up */
15
- } :root {
15
+ } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
16
+
17
+ /* новые значения, используйте их */
16
18
  } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
17
19
 
18
20
  /* новые значения, используйте их */
package/esm/Component.js CHANGED
@@ -4,7 +4,7 @@ import cn from 'classnames';
4
4
  import { getDataTestId } from '@alfalab/core-components-shared/esm';
5
5
  import { Tab } from './components/tab/Component.js';
6
6
 
7
- var styles = {"component":"tab-bar__component_16x4w","modal-bg-primary":"tab-bar__modal-bg-primary_16x4w","modal-bg-alt-primary":"tab-bar__modal-bg-alt-primary_16x4w","border":"tab-bar__border_16x4w"};
7
+ var styles = {"component":"tab-bar__component_1ppo6","modal-bg-primary":"tab-bar__modal-bg-primary_1ppo6","modal-bg-alt-primary":"tab-bar__modal-bg-alt-primary_1ppo6","border":"tab-bar__border_1ppo6"};
8
8
  require('./index.css')
9
9
 
10
10
  var TabBarComponent = forwardRef(function (_a, ref) {
package/esm/components/tab/Component.js CHANGED
@@ -5,7 +5,7 @@ import { Indicator } from '@alfalab/core-components-indicator/esm';
5
5
  import { Typography } from '@alfalab/core-components-typography/esm';
6
6
  import { INDICATOR_BORDER_COLOR, INDICATOR_BG_COLOR } from '../../consts.js';
7
7
 
8
- var styles = {"component":"tab-bar__component_1ylgd","primary":"tab-bar__primary_1ylgd","secondary":"tab-bar__secondary_1ylgd","icon":"tab-bar__icon_1ylgd","label":"tab-bar__label_1ylgd","labelSelected":"tab-bar__labelSelected_1ylgd","indicator":"tab-bar__indicator_1ylgd"};
8
+ var styles = {"component":"tab-bar__component_bqjx3","primary":"tab-bar__primary_bqjx3","secondary":"tab-bar__secondary_bqjx3","icon":"tab-bar__icon_bqjx3","label":"tab-bar__label_bqjx3","labelSelected":"tab-bar__labelSelected_bqjx3","indicator":"tab-bar__indicator_bqjx3"};
9
9
  require('./index.css')
10
10
 
11
11
  var TabComponent = forwardRef(function (_a, ref) {
package/esm/components/tab/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 16e56 */
1
+ /* hash: 1l5ez */
2
2
  :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root {
4
4
  --color-light-accent-primary: #ef3124;
@@ -14,15 +14,19 @@
14
14
  /* Up */
15
15
 
16
16
  /* Hard up */
17
- } :root {
17
+ } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
18
+
19
+ /* новые значения, используйте их */
18
20
  } :root { /* deprecated */
19
21
  --gap-2xs: 4px; /* deprecated */
20
22
  --gap-xs: 8px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
21
23
 
22
24
  /* новые значения, используйте их */
25
+ --gap-4: var(--gap-2xs);
26
+ --gap-8: var(--gap-xs);
23
27
  } :root {
24
28
  } :root {
25
- } .tab-bar__component_1ylgd {
29
+ } .tab-bar__component_bqjx3 {
26
30
  box-sizing: border-box;
27
31
  background-color: transparent;
28
32
  -webkit-tap-highlight-color: transparent;
@@ -44,19 +48,19 @@
44
48
  flex-direction: column;
45
49
  flex: 1 0 0;
46
50
  align-items: center;
47
- padding: var(--gap-xs) 0;
51
+ padding: var(--gap-8) 0;
48
52
  color: var(--color-light-neutral-translucent-700);
49
- } .tab-bar__primary_1ylgd {
53
+ } .tab-bar__primary_bqjx3 {
50
54
  color: var(--color-light-accent-primary);
51
- } .tab-bar__secondary_1ylgd {
55
+ } .tab-bar__secondary_bqjx3 {
52
56
  color: var(--color-light-accent-secondary);
53
- } .tab-bar__icon_1ylgd {
57
+ } .tab-bar__icon_bqjx3 {
54
58
  display: flex;
55
59
  align-items: center;
56
60
  justify-content: center;
57
61
  flex-grow: 1;
58
62
  width: 100%;
59
- } .tab-bar__label_1ylgd {
63
+ } .tab-bar__label_bqjx3 {
60
64
  -webkit-line-clamp: 1;
61
65
  display: -webkit-box;
62
66
  -webkit-box-orient: vertical;
@@ -65,12 +69,12 @@
65
69
  flex-shrink: 0;
66
70
 
67
71
  color: var(--color-light-text-secondary);
68
- } .tab-bar__labelSelected_1ylgd {
72
+ } .tab-bar__labelSelected_bqjx3 {
69
73
  color: inherit;
70
- } .tab-bar__indicator_1ylgd {
74
+ } .tab-bar__indicator_bqjx3 {
71
75
  position: absolute;
72
76
  top: 3px;
73
- left: calc(50% + var(--gap-2xs));
77
+ left: calc(50% + var(--gap-4));
74
78
  height: 16px;
75
79
  min-width: 16px;
76
80
  }
package/esm/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1hchp */
1
+ /* hash: 1cyul */
2
2
  :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root {
4
4
  --color-light-base-bg-alt-primary: #f2f3f5;
@@ -13,13 +13,15 @@
13
13
  /* Up */
14
14
 
15
15
  /* Hard up */
16
- } :root {
16
+ } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
17
+
18
+ /* новые значения, используйте их */
17
19
  } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
18
20
 
19
21
  /* новые значения, используйте их */
20
22
  } :root {
21
23
  } :root {
22
- } .tab-bar__component_16x4w {
24
+ } .tab-bar__component_1ppo6 {
23
25
  display: flex;
24
26
  justify-content: center;
25
27
  height: 64px;
@@ -27,10 +29,10 @@
27
29
  box-sizing: border-box;
28
30
  overflow: hidden;
29
31
  transition: box-shadow 0.2s ease
30
- } .tab-bar__component_16x4w.tab-bar__modal-bg-primary_16x4w {
32
+ } .tab-bar__component_1ppo6.tab-bar__modal-bg-primary_1ppo6 {
31
33
  background-color: var(--color-light-base-bg-primary);
32
- } .tab-bar__component_16x4w.tab-bar__modal-bg-alt-primary_16x4w {
34
+ } .tab-bar__component_1ppo6.tab-bar__modal-bg-alt-primary_1ppo6 {
33
35
  background-color: var(--color-light-base-bg-alt-primary);
34
- } .tab-bar__border_16x4w {
36
+ } .tab-bar__border_1ppo6 {
35
37
  box-shadow: 0 -1px 0 0 var(--color-light-neutral-translucent-300);
36
38
  }
package/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1hchp */
1
+ /* hash: 1cyul */
2
2
  :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root {
4
4
  --color-light-base-bg-alt-primary: #f2f3f5;
@@ -13,13 +13,15 @@
13
13
  /* Up */
14
14
 
15
15
  /* Hard up */
16
- } :root {
16
+ } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
17
+
18
+ /* новые значения, используйте их */
17
19
  } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
18
20
 
19
21
  /* новые значения, используйте их */
20
22
  } :root {
21
23
  } :root {
22
- } .tab-bar__component_16x4w {
24
+ } .tab-bar__component_1ppo6 {
23
25
  display: flex;
24
26
  justify-content: center;
25
27
  height: 64px;
@@ -27,10 +29,10 @@
27
29
  box-sizing: border-box;
28
30
  overflow: hidden;
29
31
  transition: box-shadow 0.2s ease
30
- } .tab-bar__component_16x4w.tab-bar__modal-bg-primary_16x4w {
32
+ } .tab-bar__component_1ppo6.tab-bar__modal-bg-primary_1ppo6 {
31
33
  background-color: var(--color-light-base-bg-primary);
32
- } .tab-bar__component_16x4w.tab-bar__modal-bg-alt-primary_16x4w {
34
+ } .tab-bar__component_1ppo6.tab-bar__modal-bg-alt-primary_1ppo6 {
33
35
  background-color: var(--color-light-base-bg-alt-primary);
34
- } .tab-bar__border_16x4w {
36
+ } .tab-bar__border_1ppo6 {
35
37
  box-shadow: 0 -1px 0 0 var(--color-light-neutral-translucent-300);
36
38
  }
package/modern/Component.js CHANGED
@@ -3,7 +3,7 @@ import cn from 'classnames';
3
3
  import { getDataTestId } from '@alfalab/core-components-shared/modern';
4
4
  import { Tab } from './components/tab/Component.js';
5
5
 
6
- const styles = {"component":"tab-bar__component_16x4w","modal-bg-primary":"tab-bar__modal-bg-primary_16x4w","modal-bg-alt-primary":"tab-bar__modal-bg-alt-primary_16x4w","border":"tab-bar__border_16x4w"};
6
+ const styles = {"component":"tab-bar__component_1ppo6","modal-bg-primary":"tab-bar__modal-bg-primary_1ppo6","modal-bg-alt-primary":"tab-bar__modal-bg-alt-primary_1ppo6","border":"tab-bar__border_1ppo6"};
7
7
  require('./index.css')
8
8
 
9
9
  const TabBarComponent = forwardRef(({ children, className, selectedId, border, dataTestId, tabClassNames, onChange, accentColor = 'primary', bgColor = 'modal-bg-primary', ...restProps }, ref) => {
package/modern/components/tab/Component.js CHANGED
@@ -4,7 +4,7 @@ import { Indicator } from '@alfalab/core-components-indicator/modern';
4
4
  import { Typography } from '@alfalab/core-components-typography/modern';
5
5
  import { INDICATOR_BORDER_COLOR, INDICATOR_BG_COLOR } from '../../consts.js';
6
6
 
7
- const styles = {"component":"tab-bar__component_1ylgd","primary":"tab-bar__primary_1ylgd","secondary":"tab-bar__secondary_1ylgd","icon":"tab-bar__icon_1ylgd","label":"tab-bar__label_1ylgd","labelSelected":"tab-bar__labelSelected_1ylgd","indicator":"tab-bar__indicator_1ylgd"};
7
+ const styles = {"component":"tab-bar__component_bqjx3","primary":"tab-bar__primary_bqjx3","secondary":"tab-bar__secondary_bqjx3","icon":"tab-bar__icon_bqjx3","label":"tab-bar__label_bqjx3","labelSelected":"tab-bar__labelSelected_bqjx3","indicator":"tab-bar__indicator_bqjx3"};
8
8
  require('./index.css')
9
9
 
10
10
  const TabComponent = forwardRef(({ showIndicator, indicatorProps, label, icon, id, selected, onChange, onClick, tabClassNames = {}, dataTestId, className, labelClassName, selectedClassName, iconClassName, href, Component = href ? 'a' : 'button', accentColor = 'primary', bgColor = 'modal-bg-primary', ...restProps }, ref) => {
package/modern/components/tab/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 16e56 */
1
+ /* hash: 1l5ez */
2
2
  :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root {
4
4
  --color-light-accent-primary: #ef3124;
@@ -14,15 +14,19 @@
14
14
  /* Up */
15
15
 
16
16
  /* Hard up */
17
- } :root {
17
+ } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
18
+
19
+ /* новые значения, используйте их */
18
20
  } :root { /* deprecated */
19
21
  --gap-2xs: 4px; /* deprecated */
20
22
  --gap-xs: 8px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
21
23
 
22
24
  /* новые значения, используйте их */
25
+ --gap-4: var(--gap-2xs);
26
+ --gap-8: var(--gap-xs);
23
27
  } :root {
24
28
  } :root {
25
- } .tab-bar__component_1ylgd {
29
+ } .tab-bar__component_bqjx3 {
26
30
  box-sizing: border-box;
27
31
  background-color: transparent;
28
32
  -webkit-tap-highlight-color: transparent;
@@ -44,19 +48,19 @@
44
48
  flex-direction: column;
45
49
  flex: 1 0 0;
46
50
  align-items: center;
47
- padding: var(--gap-xs) 0;
51
+ padding: var(--gap-8) 0;
48
52
  color: var(--color-light-neutral-translucent-700);
49
- } .tab-bar__primary_1ylgd {
53
+ } .tab-bar__primary_bqjx3 {
50
54
  color: var(--color-light-accent-primary);
51
- } .tab-bar__secondary_1ylgd {
55
+ } .tab-bar__secondary_bqjx3 {
52
56
  color: var(--color-light-accent-secondary);
53
- } .tab-bar__icon_1ylgd {
57
+ } .tab-bar__icon_bqjx3 {
54
58
  display: flex;
55
59
  align-items: center;
56
60
  justify-content: center;
57
61
  flex-grow: 1;
58
62
  width: 100%;
59
- } .tab-bar__label_1ylgd {
63
+ } .tab-bar__label_bqjx3 {
60
64
  -webkit-line-clamp: 1;
61
65
  display: -webkit-box;
62
66
  -webkit-box-orient: vertical;
@@ -65,12 +69,12 @@
65
69
  flex-shrink: 0;
66
70
 
67
71
  color: var(--color-light-text-secondary);
68
- } .tab-bar__labelSelected_1ylgd {
72
+ } .tab-bar__labelSelected_bqjx3 {
69
73
  color: inherit;
70
- } .tab-bar__indicator_1ylgd {
74
+ } .tab-bar__indicator_bqjx3 {
71
75
  position: absolute;
72
76
  top: 3px;
73
- left: calc(50% + var(--gap-2xs));
77
+ left: calc(50% + var(--gap-4));
74
78
  height: 16px;
75
79
  min-width: 16px;
76
80
  }
package/modern/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1hchp */
1
+ /* hash: 1cyul */
2
2
  :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root {
4
4
  --color-light-base-bg-alt-primary: #f2f3f5;
@@ -13,13 +13,15 @@
13
13
  /* Up */
14
14
 
15
15
  /* Hard up */
16
- } :root {
16
+ } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
17
+
18
+ /* новые значения, используйте их */
17
19
  } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
18
20
 
19
21
  /* новые значения, используйте их */
20
22
  } :root {
21
23
  } :root {
22
- } .tab-bar__component_16x4w {
24
+ } .tab-bar__component_1ppo6 {
23
25
  display: flex;
24
26
  justify-content: center;
25
27
  height: 64px;
@@ -27,10 +29,10 @@
27
29
  box-sizing: border-box;
28
30
  overflow: hidden;
29
31
  transition: box-shadow 0.2s ease
30
- } .tab-bar__component_16x4w.tab-bar__modal-bg-primary_16x4w {
32
+ } .tab-bar__component_1ppo6.tab-bar__modal-bg-primary_1ppo6 {
31
33
  background-color: var(--color-light-base-bg-primary);
32
- } .tab-bar__component_16x4w.tab-bar__modal-bg-alt-primary_16x4w {
34
+ } .tab-bar__component_1ppo6.tab-bar__modal-bg-alt-primary_1ppo6 {
33
35
  background-color: var(--color-light-base-bg-alt-primary);
34
- } .tab-bar__border_16x4w {
36
+ } .tab-bar__border_1ppo6 {
35
37
  box-shadow: 0 -1px 0 0 var(--color-light-neutral-translucent-300);
36
38
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-tab-bar",
3
- "version": "2.0.6",
3
+ "version": "2.0.8",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -15,12 +15,12 @@
15
15
  "react-dom": ">=16.8.0"
16
16
  },
17
17
  "dependencies": {
18
- "@alfalab/core-components-typography": "^4.8.0",
19
- "@alfalab/core-components-indicator": "^2.1.0",
20
- "@alfalab/core-components-shared": "^0.11.0",
18
+ "@alfalab/core-components-typography": "^4.9.0",
19
+ "@alfalab/core-components-indicator": "^2.1.1",
20
+ "@alfalab/core-components-shared": "^0.12.0",
21
21
  "classnames": "^2.3.1",
22
22
  "tslib": "^2.4.0"
23
23
  },
24
- "themesVersion": "13.0.1",
25
- "varsVersion": "9.10.0"
24
+ "themesVersion": "13.0.2",
25
+ "varsVersion": "9.11.1"
26
26
  }
package/src/components/tab/index.module.css CHANGED
@@ -8,7 +8,7 @@
8
8
  flex-direction: column;
9
9
  flex: 1 0 0;
10
10
  align-items: center;
11
- padding: var(--gap-xs) 0;
11
+ padding: var(--gap-8) 0;
12
12
  color: var(--color-light-neutral-translucent-700);
13
13
  }
14
14
 
@@ -43,7 +43,7 @@
43
43
  .indicator {
44
44
  position: absolute;
45
45
  top: 3px;
46
- left: calc(50% + var(--gap-2xs));
46
+ left: calc(50% + var(--gap-4));
47
47
  height: 16px;
48
48
  min-width: 16px;
49
49
  }