@alfalab/core-components-tab-bar 1.0.1 → 1.0.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 (15) hide show
  1. package/Component.js +1 -1
  2. package/components/tab/Component.js +1 -1
  3. package/components/tab/index.css +7 -7
  4. package/cssm/index.module.css +3 -1
  5. package/esm/Component.js +1 -1
  6. package/esm/components/tab/Component.js +1 -1
  7. package/esm/components/tab/index.css +7 -7
  8. package/esm/index.css +6 -4
  9. package/index.css +6 -4
  10. package/modern/Component.js +1 -1
  11. package/modern/components/tab/Component.js +1 -1
  12. package/modern/components/tab/index.css +7 -7
  13. package/modern/index.css +6 -4
  14. package/package.json +4 -4
  15. package/src/index.module.css +5 -1
package/Component.js CHANGED
@@ -15,7 +15,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
15
15
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
16
16
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
17
17
 
18
- var styles = {"component":"tab-bar__component_5kotp","border":"tab-bar__border_5kotp"};
18
+ var styles = {"component":"tab-bar__component_15pc1","border":"tab-bar__border_15pc1"};
19
19
  require('./index.css')
20
20
 
21
21
  var TabBarComponent = React.forwardRef(function (_a, ref) {
package/components/tab/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_1l5d9","selected":"tab-bar__selected_1l5d9","icon":"tab-bar__icon_1l5d9","label":"tab-bar__label_1l5d9","labelSelected":"tab-bar__labelSelected_1l5d9","indicator":"tab-bar__indicator_1l5d9"};
16
+ var styles = {"component":"tab-bar__component_1js6c","selected":"tab-bar__selected_1js6c","icon":"tab-bar__icon_1js6c","label":"tab-bar__label_1js6c","labelSelected":"tab-bar__labelSelected_1js6c","indicator":"tab-bar__indicator_1js6c"};
17
17
  require('./index.css')
18
18
 
19
19
  var TabComponent = React.forwardRef(function (_a, ref) {
package/components/tab/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: wgw1c */
1
+ /* hash: okzse */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --color-light-accent-primary: #ef3124;
@@ -19,7 +19,7 @@
19
19
  --gap-xs: 8px;
20
20
  } :root {
21
21
  } :root {
22
- } .tab-bar__component_1l5d9 {
22
+ } .tab-bar__component_1js6c {
23
23
  box-sizing: border-box;
24
24
  background-color: transparent;
25
25
  -webkit-tap-highlight-color: transparent;
@@ -43,15 +43,15 @@
43
43
  align-items: center;
44
44
  padding: var(--gap-xs) 0;
45
45
  color: var(--color-light-neutral-translucent-700);
46
- } .tab-bar__selected_1l5d9 {
46
+ } .tab-bar__selected_1js6c {
47
47
  color: var(--color-light-accent-primary);
48
- } .tab-bar__icon_1l5d9 {
48
+ } .tab-bar__icon_1js6c {
49
49
  display: flex;
50
50
  align-items: center;
51
51
  justify-content: center;
52
52
  flex-grow: 1;
53
53
  width: 100%;
54
- } .tab-bar__label_1l5d9 {
54
+ } .tab-bar__label_1js6c {
55
55
  -webkit-line-clamp: 1;
56
56
  display: -webkit-box;
57
57
  -webkit-box-orient: vertical;
@@ -60,9 +60,9 @@
60
60
  flex-shrink: 0;
61
61
 
62
62
  color: var(--color-light-text-secondary);
63
- } .tab-bar__labelSelected_1l5d9 {
63
+ } .tab-bar__labelSelected_1js6c {
64
64
  color: inherit;
65
- } .tab-bar__indicator_1l5d9 {
65
+ } .tab-bar__indicator_1js6c {
66
66
  position: absolute;
67
67
  top: var(--gap-2xs);
68
68
  left: calc(50% + var(--gap-2xs));
package/cssm/index.module.css CHANGED
@@ -15,12 +15,14 @@
15
15
  } :root {
16
16
  } :root {
17
17
  } :root {
18
+ } :root {
19
+ --tab-bar-bg-color: var(--color-light-base-bg-primary);
18
20
  } .component {
19
21
  display: flex;
20
22
  justify-content: center;
21
23
  height: 64px;
22
24
  max-height: 64px;
23
- background-color: var(--color-light-base-bg-primary);
25
+ background-color: var(--tab-bar-bg-color);
24
26
  box-sizing: border-box;
25
27
  overflow: hidden;
26
28
  transition: box-shadow 0.2s ease;
package/esm/Component.js CHANGED
@@ -6,7 +6,7 @@ import { Tab } from './components/tab/Component.js';
6
6
  import '@alfalab/core-components-badge/esm';
7
7
  import '@alfalab/core-components-typography/esm';
8
8
 
9
- var styles = {"component":"tab-bar__component_5kotp","border":"tab-bar__border_5kotp"};
9
+ var styles = {"component":"tab-bar__component_15pc1","border":"tab-bar__border_15pc1"};
10
10
  require('./index.css')
11
11
 
12
12
  var TabBarComponent = forwardRef(function (_a, ref) {
package/esm/components/tab/Component.js CHANGED
@@ -4,7 +4,7 @@ import cn from 'classnames';
4
4
  import { Badge } from '@alfalab/core-components-badge/esm';
5
5
  import { Typography } from '@alfalab/core-components-typography/esm';
6
6
 
7
- var styles = {"component":"tab-bar__component_1l5d9","selected":"tab-bar__selected_1l5d9","icon":"tab-bar__icon_1l5d9","label":"tab-bar__label_1l5d9","labelSelected":"tab-bar__labelSelected_1l5d9","indicator":"tab-bar__indicator_1l5d9"};
7
+ var styles = {"component":"tab-bar__component_1js6c","selected":"tab-bar__selected_1js6c","icon":"tab-bar__icon_1js6c","label":"tab-bar__label_1js6c","labelSelected":"tab-bar__labelSelected_1js6c","indicator":"tab-bar__indicator_1js6c"};
8
8
  require('./index.css')
9
9
 
10
10
  var TabComponent = forwardRef(function (_a, ref) {
package/esm/components/tab/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: wgw1c */
1
+ /* hash: okzse */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --color-light-accent-primary: #ef3124;
@@ -19,7 +19,7 @@
19
19
  --gap-xs: 8px;
20
20
  } :root {
21
21
  } :root {
22
- } .tab-bar__component_1l5d9 {
22
+ } .tab-bar__component_1js6c {
23
23
  box-sizing: border-box;
24
24
  background-color: transparent;
25
25
  -webkit-tap-highlight-color: transparent;
@@ -43,15 +43,15 @@
43
43
  align-items: center;
44
44
  padding: var(--gap-xs) 0;
45
45
  color: var(--color-light-neutral-translucent-700);
46
- } .tab-bar__selected_1l5d9 {
46
+ } .tab-bar__selected_1js6c {
47
47
  color: var(--color-light-accent-primary);
48
- } .tab-bar__icon_1l5d9 {
48
+ } .tab-bar__icon_1js6c {
49
49
  display: flex;
50
50
  align-items: center;
51
51
  justify-content: center;
52
52
  flex-grow: 1;
53
53
  width: 100%;
54
- } .tab-bar__label_1l5d9 {
54
+ } .tab-bar__label_1js6c {
55
55
  -webkit-line-clamp: 1;
56
56
  display: -webkit-box;
57
57
  -webkit-box-orient: vertical;
@@ -60,9 +60,9 @@
60
60
  flex-shrink: 0;
61
61
 
62
62
  color: var(--color-light-text-secondary);
63
- } .tab-bar__labelSelected_1l5d9 {
63
+ } .tab-bar__labelSelected_1js6c {
64
64
  color: inherit;
65
- } .tab-bar__indicator_1l5d9 {
65
+ } .tab-bar__indicator_1js6c {
66
66
  position: absolute;
67
67
  top: var(--gap-2xs);
68
68
  left: calc(50% + var(--gap-2xs));
package/esm/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: ib159 */
1
+ /* hash: ftaot */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --color-light-base-bg-primary: #fff;
@@ -16,15 +16,17 @@
16
16
  } :root {
17
17
  } :root {
18
18
  } :root {
19
- } .tab-bar__component_5kotp {
19
+ } :root {
20
+ --tab-bar-bg-color: var(--color-light-base-bg-primary);
21
+ } .tab-bar__component_15pc1 {
20
22
  display: flex;
21
23
  justify-content: center;
22
24
  height: 64px;
23
25
  max-height: 64px;
24
- background-color: var(--color-light-base-bg-primary);
26
+ background-color: var(--tab-bar-bg-color);
25
27
  box-sizing: border-box;
26
28
  overflow: hidden;
27
29
  transition: box-shadow 0.2s ease;
28
- } .tab-bar__border_5kotp {
30
+ } .tab-bar__border_15pc1 {
29
31
  box-shadow: 0 -1px 0 0 var(--color-light-neutral-300);
30
32
  }
package/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: ib159 */
1
+ /* hash: ftaot */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --color-light-base-bg-primary: #fff;
@@ -16,15 +16,17 @@
16
16
  } :root {
17
17
  } :root {
18
18
  } :root {
19
- } .tab-bar__component_5kotp {
19
+ } :root {
20
+ --tab-bar-bg-color: var(--color-light-base-bg-primary);
21
+ } .tab-bar__component_15pc1 {
20
22
  display: flex;
21
23
  justify-content: center;
22
24
  height: 64px;
23
25
  max-height: 64px;
24
- background-color: var(--color-light-base-bg-primary);
26
+ background-color: var(--tab-bar-bg-color);
25
27
  box-sizing: border-box;
26
28
  overflow: hidden;
27
29
  transition: box-shadow 0.2s ease;
28
- } .tab-bar__border_5kotp {
30
+ } .tab-bar__border_15pc1 {
29
31
  box-shadow: 0 -1px 0 0 var(--color-light-neutral-300);
30
32
  }
package/modern/Component.js CHANGED
@@ -5,7 +5,7 @@ import { Tab } from './components/tab/Component.js';
5
5
  import '@alfalab/core-components-badge/modern';
6
6
  import '@alfalab/core-components-typography/modern';
7
7
 
8
- const styles = {"component":"tab-bar__component_5kotp","border":"tab-bar__border_5kotp"};
8
+ const styles = {"component":"tab-bar__component_15pc1","border":"tab-bar__border_15pc1"};
9
9
  require('./index.css')
10
10
 
11
11
  const TabBarComponent = forwardRef(({ children, className, selectedId, border, dataTestId, tabClassNames, onChange, ...restProps }, ref) => {
package/modern/components/tab/Component.js CHANGED
@@ -3,7 +3,7 @@ import cn from 'classnames';
3
3
  import { Badge } from '@alfalab/core-components-badge/modern';
4
4
  import { Typography } from '@alfalab/core-components-typography/modern';
5
5
 
6
- const styles = {"component":"tab-bar__component_1l5d9","selected":"tab-bar__selected_1l5d9","icon":"tab-bar__icon_1l5d9","label":"tab-bar__label_1l5d9","labelSelected":"tab-bar__labelSelected_1l5d9","indicator":"tab-bar__indicator_1l5d9"};
6
+ const styles = {"component":"tab-bar__component_1js6c","selected":"tab-bar__selected_1js6c","icon":"tab-bar__icon_1js6c","label":"tab-bar__label_1js6c","labelSelected":"tab-bar__labelSelected_1js6c","indicator":"tab-bar__indicator_1js6c"};
7
7
  require('./index.css')
8
8
 
9
9
  const TabComponent = forwardRef(({ showIndicator, indicatorProps, label, icon, id, selected, onChange, onClick, tabClassNames = {}, dataTestId, className, labelClassName, selectedClassName, iconClassName, href, Component = href ? 'a' : 'button', ...restProps }, ref) => {
package/modern/components/tab/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: wgw1c */
1
+ /* hash: okzse */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --color-light-accent-primary: #ef3124;
@@ -19,7 +19,7 @@
19
19
  --gap-xs: 8px;
20
20
  } :root {
21
21
  } :root {
22
- } .tab-bar__component_1l5d9 {
22
+ } .tab-bar__component_1js6c {
23
23
  box-sizing: border-box;
24
24
  background-color: transparent;
25
25
  -webkit-tap-highlight-color: transparent;
@@ -43,15 +43,15 @@
43
43
  align-items: center;
44
44
  padding: var(--gap-xs) 0;
45
45
  color: var(--color-light-neutral-translucent-700);
46
- } .tab-bar__selected_1l5d9 {
46
+ } .tab-bar__selected_1js6c {
47
47
  color: var(--color-light-accent-primary);
48
- } .tab-bar__icon_1l5d9 {
48
+ } .tab-bar__icon_1js6c {
49
49
  display: flex;
50
50
  align-items: center;
51
51
  justify-content: center;
52
52
  flex-grow: 1;
53
53
  width: 100%;
54
- } .tab-bar__label_1l5d9 {
54
+ } .tab-bar__label_1js6c {
55
55
  -webkit-line-clamp: 1;
56
56
  display: -webkit-box;
57
57
  -webkit-box-orient: vertical;
@@ -60,9 +60,9 @@
60
60
  flex-shrink: 0;
61
61
 
62
62
  color: var(--color-light-text-secondary);
63
- } .tab-bar__labelSelected_1l5d9 {
63
+ } .tab-bar__labelSelected_1js6c {
64
64
  color: inherit;
65
- } .tab-bar__indicator_1l5d9 {
65
+ } .tab-bar__indicator_1js6c {
66
66
  position: absolute;
67
67
  top: var(--gap-2xs);
68
68
  left: calc(50% + var(--gap-2xs));
package/modern/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: ib159 */
1
+ /* hash: ftaot */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --color-light-base-bg-primary: #fff;
@@ -16,15 +16,17 @@
16
16
  } :root {
17
17
  } :root {
18
18
  } :root {
19
- } .tab-bar__component_5kotp {
19
+ } :root {
20
+ --tab-bar-bg-color: var(--color-light-base-bg-primary);
21
+ } .tab-bar__component_15pc1 {
20
22
  display: flex;
21
23
  justify-content: center;
22
24
  height: 64px;
23
25
  max-height: 64px;
24
- background-color: var(--color-light-base-bg-primary);
26
+ background-color: var(--tab-bar-bg-color);
25
27
  box-sizing: border-box;
26
28
  overflow: hidden;
27
29
  transition: box-shadow 0.2s ease;
28
- } .tab-bar__border_5kotp {
30
+ } .tab-bar__border_15pc1 {
29
31
  box-shadow: 0 -1px 0 0 var(--color-light-neutral-300);
30
32
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-tab-bar",
3
- "version": "1.0.1",
3
+ "version": "1.0.3",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -15,9 +15,9 @@
15
15
  "react-dom": ">=16.8.0"
16
16
  },
17
17
  "dependencies": {
18
- "@alfalab/core-components-typography": "^4.3.0",
19
- "@alfalab/core-components-badge": "^5.5.0",
20
- "@alfalab/core-components-shared": "^0.9.0",
18
+ "@alfalab/core-components-typography": "^4.4.0",
19
+ "@alfalab/core-components-badge": "^5.5.1",
20
+ "@alfalab/core-components-shared": "^0.9.1",
21
21
  "classnames": "^2.3.1",
22
22
  "tslib": "^2.4.0"
23
23
  }
package/src/index.module.css CHANGED
@@ -1,11 +1,15 @@
1
1
  @import '@alfalab/core-components-themes/src/default.css';
2
2
 
3
+ :root {
4
+ --tab-bar-bg-color: var(--color-light-base-bg-primary);
5
+ }
6
+
3
7
  .component {
4
8
  display: flex;
5
9
  justify-content: center;
6
10
  height: 64px;
7
11
  max-height: 64px;
8
- background-color: var(--color-light-base-bg-primary);
12
+ background-color: var(--tab-bar-bg-color);
9
13
  box-sizing: border-box;
10
14
  overflow: hidden;
11
15
  transition: box-shadow 0.2s ease;