@alfalab/core-components-tab-bar 1.0.3 → 2.0.0

package/Component.js

@@ -7,26 +7,28 @@ var React = require('react');
 var cn = require('classnames');
 var coreComponentsShared = require('@alfalab/core-components-shared');
 var components_tab_Component = require('./components/tab/Component.js');
-require('@alfalab/core-components-badge');
-require('@alfalab/core-components-typography');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"component":"tab-bar__component_15pc1","border":"tab-bar__border_15pc1"};
+var styles = {"component":"tab-bar__component_1b06f","modal-bg-primary":"tab-bar__modal-bg-primary_1b06f","modal-bg-alt-primary":"tab-bar__modal-bg-alt-primary_1b06f","border":"tab-bar__border_1b06f"};
 require('./index.css')
 
 var TabBarComponent = React.forwardRef(function (_a, ref) {
     var _b;
-    var children = _a.children, className = _a.className, selectedId = _a.selectedId, border = _a.border, dataTestId = _a.dataTestId, tabClassNames = _a.tabClassNames, onChange = _a.onChange, restProps = tslib.__rest(_a, ["children", "className", "selectedId", "border", "dataTestId", "tabClassNames", "onChange"]);
+    var children = _a.children, className = _a.className, selectedId = _a.selectedId, border = _a.border, dataTestId = _a.dataTestId, tabClassNames = _a.tabClassNames, onChange = _a.onChange, _c = _a.accentColor, accentColor = _c === void 0 ? 'primary' : _c, _d = _a.bgColor, bgColor = _d === void 0 ? 'modal-bg-primary' : _d, restProps = tslib.__rest(_a, ["children", "className", "selectedId", "border", "dataTestId", "tabClassNames", "onChange", "accentColor", "bgColor"]);
     if (React.Children.count(children) > 5) {
         // eslint-disable-next-line no-console
         console.error('Компонент TabBar не может содержать больше 5 табов');
     }
-    return (React__default.default.createElement("nav", tslib.__assign({ "data-test-id": dataTestId }, restProps, { ref: ref, className: cn__default.default(styles.component, className, (_b = {}, _b[styles.border] = border, _b)) }), React.Children.map(children, function (tab) {
+    return (React__default.default.createElement("nav", tslib.__assign({ "data-test-id": dataTestId }, restProps, { ref: ref, className: cn__default.default(styles.component, styles[bgColor], className, (_b = {},
+            _b[styles.border] = border,
+            _b)) }), React.Children.map(children, function (tab) {
         return React.cloneElement(tab, {
+            bgColor: bgColor,
+            accentColor: accentColor,
             selected: tab.props.id === selectedId,
             onChange: onChange,
             tabClassNames: tabClassNames,

package/components/tab/Component.js

@@ -5,34 +5,38 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var cn = require('classnames');
-var coreComponentsBadge = require('@alfalab/core-components-badge');
+var coreComponentsIndicator = require('@alfalab/core-components-indicator');
 var coreComponentsTypography = require('@alfalab/core-components-typography');
+var consts = require('../../consts.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-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"};
+var styles = {"component":"tab-bar__component_m43fu","primary":"tab-bar__primary_m43fu","secondary":"tab-bar__secondary_m43fu","icon":"tab-bar__icon_m43fu","label":"tab-bar__label_m43fu","labelSelected":"tab-bar__labelSelected_m43fu","indicator":"tab-bar__indicator_m43fu"};
 require('./index.css')
 
 var TabComponent = React.forwardRef(function (_a, ref) {
     var _b, _c;
-    var showIndicator = _a.showIndicator, indicatorProps = _a.indicatorProps, label = _a.label, icon = _a.icon, id = _a.id, selected = _a.selected, onChange = _a.onChange, onClick = _a.onClick, _d = _a.tabClassNames, tabClassNames = _d === void 0 ? {} : _d, dataTestId = _a.dataTestId, className = _a.className, labelClassName = _a.labelClassName, selectedClassName = _a.selectedClassName, iconClassName = _a.iconClassName, href = _a.href, _e = _a.Component, Component = _e === void 0 ? href ? 'a' : 'button' : _e, restProps = tslib.__rest(_a, ["showIndicator", "indicatorProps", "label", "icon", "id", "selected", "onChange", "onClick", "tabClassNames", "dataTestId", "className", "labelClassName", "selectedClassName", "iconClassName", "href", "Component"]);
+    var showIndicator = _a.showIndicator, indicatorProps = _a.indicatorProps, label = _a.label, icon = _a.icon, id = _a.id, selected = _a.selected, onChange = _a.onChange, onClick = _a.onClick, _d = _a.tabClassNames, tabClassNames = _d === void 0 ? {} : _d, dataTestId = _a.dataTestId, className = _a.className, labelClassName = _a.labelClassName, selectedClassName = _a.selectedClassName, iconClassName = _a.iconClassName, href = _a.href, _e = _a.Component, Component = _e === void 0 ? href ? 'a' : 'button' : _e, _f = _a.accentColor, accentColor = _f === void 0 ? 'primary' : _f, _g = _a.bgColor, bgColor = _g === void 0 ? 'modal-bg-primary' : _g, restProps = tslib.__rest(_a, ["showIndicator", "indicatorProps", "label", "icon", "id", "selected", "onChange", "onClick", "tabClassNames", "dataTestId", "className", "labelClassName", "selectedClassName", "iconClassName", "href", "Component", "accentColor", "bgColor"]);
     var handleClick = function (event) {
         onChange === null || onChange === void 0 ? void 0 : onChange(id);
         onClick === null || onClick === void 0 ? void 0 : onClick(event);
     };
     var commonClassName = tabClassNames.className, commonLabelClassName = tabClassNames.labelClassName, commonSelectedClassName = tabClassNames.selectedClassName, commonIconClassName = tabClassNames.iconClassName;
     return (React__default.default.createElement(Component, tslib.__assign({ "data-test-id": dataTestId, tabIndex: 0 }, (Component === 'button' ? { type: 'button' } : null), restProps, { href: href, id: id, ref: ref, className: cn__default.default(styles.component, commonClassName, className, selected && commonSelectedClassName, selected && selectedClassName, (_b = {},
-            _b[styles.selected] = selected,
+            _b[styles[accentColor]] = selected,
             _b)), onClick: handleClick }),
         React__default.default.createElement("div", { className: cn__default.default(styles.icon, commonIconClassName, iconClassName) }, React.isValidElement(icon) ? React.cloneElement(icon, { selected: selected }) : icon),
         React__default.default.createElement(coreComponentsTypography.Typography.Text, { weight: 'medium', view: 'secondary-small', className: cn__default.default(styles.label, commonLabelClassName, labelClassName, (_c = {},
                 _c[styles.labelSelected] = selected,
                 _c)) }, React.isValidElement(label) ? React.cloneElement(label, { selected: selected }) : label),
         showIndicator && (React__default.default.createElement("div", { className: styles.indicator },
-            React__default.default.createElement(coreComponentsBadge.Badge, tslib.__assign({ visibleIconOutline: true }, indicatorProps, { view: 'count' }))))));
+            React__default.default.createElement(coreComponentsIndicator.Indicator, tslib.__assign({}, indicatorProps, { height: (indicatorProps === null || indicatorProps === void 0 ? void 0 : indicatorProps.value) ? 16 : undefined, border: {
+                    width: 2,
+                    color: consts.INDICATOR_BORDER_COLOR[bgColor],
+                }, backgroundColor: consts.INDICATOR_BG_COLOR[accentColor] }))))));
 });
 var Tab = TabComponent;
 

package/components/tab/index.css

@@ -1,7 +1,8 @@
-/* hash: okzse */
-:root {
+/* hash: y33p9 */
+: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 */
 } /* deprecated */ :root {
     --color-light-accent-primary: #ef3124;
+    --color-light-accent-secondary: #212124;
     --color-light-neutral-translucent-700: rgba(4, 4, 21, 0.47);
     --color-light-text-secondary: rgba(4, 4, 19, 0.55); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :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 */
@@ -19,7 +20,7 @@
     --gap-xs: 8px;
 } :root {
 } :root {
-} .tab-bar__component_1js6c {
+} .tab-bar__component_m43fu {
     box-sizing: border-box;
     background-color: transparent;
     -webkit-tap-highlight-color: transparent;
@@ -43,15 +44,17 @@
     align-items: center;
     padding: var(--gap-xs) 0;
     color: var(--color-light-neutral-translucent-700);
-} .tab-bar__selected_1js6c {
+} .tab-bar__primary_m43fu {
     color: var(--color-light-accent-primary);
-} .tab-bar__icon_1js6c {
+} .tab-bar__secondary_m43fu {
+    color: var(--color-light-accent-secondary);
+} .tab-bar__icon_m43fu {
     display: flex;
     align-items: center;
     justify-content: center;
     flex-grow: 1;
     width: 100%;
-} .tab-bar__label_1js6c {
+} .tab-bar__label_m43fu {
     -webkit-line-clamp: 1;
     display: -webkit-box;
     -webkit-box-orient: vertical;
@@ -60,11 +63,11 @@
     flex-shrink: 0;
 
     color: var(--color-light-text-secondary);
-} .tab-bar__labelSelected_1js6c {
+} .tab-bar__labelSelected_m43fu {
     color: inherit;
-} .tab-bar__indicator_1js6c {
+} .tab-bar__indicator_m43fu {
     position: absolute;
-    top: var(--gap-2xs);
+    top: 3px;
     left: calc(50% + var(--gap-2xs));
     height: 16px;
     min-width: 16px;

package/components/tab/index.js

@@ -3,11 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var components_tab_Component = require('./Component.js');
-require('tslib');
-require('react');
-require('classnames');
-require('@alfalab/core-components-badge');
-require('@alfalab/core-components-typography');
 
 
 

package/consts.d.ts

@@ -0,0 +1,9 @@
+declare const INDICATOR_BORDER_COLOR: {
+    'modal-bg-primary': string;
+    'modal-bg-alt-primary': string;
+};
+declare const INDICATOR_BG_COLOR: {
+    primary: string;
+    secondary: string;
+};
+export { INDICATOR_BORDER_COLOR, INDICATOR_BG_COLOR };

package/consts.js

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var INDICATOR_BORDER_COLOR = {
+    'modal-bg-primary': 'var(--color-light-base-bg-primary)',
+    'modal-bg-alt-primary': 'var(--color-light-base-bg-alt-primary)',
+};
+var INDICATOR_BG_COLOR = {
+    primary: 'var(--color-light-accent-primary)',
+    secondary: 'var(--color-light-accent-secondary)',
+};
+
+exports.INDICATOR_BG_COLOR = INDICATOR_BG_COLOR;
+exports.INDICATOR_BORDER_COLOR = INDICATOR_BORDER_COLOR;

package/cssm/Component.js

@@ -8,9 +8,6 @@ var cn = require('classnames');
 var coreComponentsShared = require('@alfalab/core-components-shared/cssm');
 var components_tab_Component = require('./components/tab/Component.js');
 var styles = require('./index.module.css');
-require('@alfalab/core-components-badge/cssm');
-require('@alfalab/core-components-typography/cssm');
-require('./components/tab/index.module.css');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -20,13 +17,17 @@ var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 
 var TabBarComponent = React.forwardRef(function (_a, ref) {
     var _b;
-    var children = _a.children, className = _a.className, selectedId = _a.selectedId, border = _a.border, dataTestId = _a.dataTestId, tabClassNames = _a.tabClassNames, onChange = _a.onChange, restProps = tslib.__rest(_a, ["children", "className", "selectedId", "border", "dataTestId", "tabClassNames", "onChange"]);
+    var children = _a.children, className = _a.className, selectedId = _a.selectedId, border = _a.border, dataTestId = _a.dataTestId, tabClassNames = _a.tabClassNames, onChange = _a.onChange, _c = _a.accentColor, accentColor = _c === void 0 ? 'primary' : _c, _d = _a.bgColor, bgColor = _d === void 0 ? 'modal-bg-primary' : _d, restProps = tslib.__rest(_a, ["children", "className", "selectedId", "border", "dataTestId", "tabClassNames", "onChange", "accentColor", "bgColor"]);
     if (React.Children.count(children) > 5) {
         // eslint-disable-next-line no-console
         console.error('Компонент TabBar не может содержать больше 5 табов');
     }
-    return (React__default.default.createElement("nav", tslib.__assign({ "data-test-id": dataTestId }, restProps, { ref: ref, className: cn__default.default(styles__default.default.component, className, (_b = {}, _b[styles__default.default.border] = border, _b)) }), React.Children.map(children, function (tab) {
+    return (React__default.default.createElement("nav", tslib.__assign({ "data-test-id": dataTestId }, restProps, { ref: ref, className: cn__default.default(styles__default.default.component, styles__default.default[bgColor], className, (_b = {},
+            _b[styles__default.default.border] = border,
+            _b)) }), React.Children.map(children, function (tab) {
         return React.cloneElement(tab, {
+            bgColor: bgColor,
+            accentColor: accentColor,
             selected: tab.props.id === selectedId,
             onChange: onChange,
             tabClassNames: tabClassNames,

package/cssm/components/tab/Component.js

@@ -5,8 +5,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var cn = require('classnames');
-var coreComponentsBadge = require('@alfalab/core-components-badge/cssm');
+var coreComponentsIndicator = require('@alfalab/core-components-indicator/cssm');
 var coreComponentsTypography = require('@alfalab/core-components-typography/cssm');
+var consts = require('../../consts.js');
 var styles = require('./index.module.css');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -17,21 +18,24 @@ var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 
 var TabComponent = React.forwardRef(function (_a, ref) {
     var _b, _c;
-    var showIndicator = _a.showIndicator, indicatorProps = _a.indicatorProps, label = _a.label, icon = _a.icon, id = _a.id, selected = _a.selected, onChange = _a.onChange, onClick = _a.onClick, _d = _a.tabClassNames, tabClassNames = _d === void 0 ? {} : _d, dataTestId = _a.dataTestId, className = _a.className, labelClassName = _a.labelClassName, selectedClassName = _a.selectedClassName, iconClassName = _a.iconClassName, href = _a.href, _e = _a.Component, Component = _e === void 0 ? href ? 'a' : 'button' : _e, restProps = tslib.__rest(_a, ["showIndicator", "indicatorProps", "label", "icon", "id", "selected", "onChange", "onClick", "tabClassNames", "dataTestId", "className", "labelClassName", "selectedClassName", "iconClassName", "href", "Component"]);
+    var showIndicator = _a.showIndicator, indicatorProps = _a.indicatorProps, label = _a.label, icon = _a.icon, id = _a.id, selected = _a.selected, onChange = _a.onChange, onClick = _a.onClick, _d = _a.tabClassNames, tabClassNames = _d === void 0 ? {} : _d, dataTestId = _a.dataTestId, className = _a.className, labelClassName = _a.labelClassName, selectedClassName = _a.selectedClassName, iconClassName = _a.iconClassName, href = _a.href, _e = _a.Component, Component = _e === void 0 ? href ? 'a' : 'button' : _e, _f = _a.accentColor, accentColor = _f === void 0 ? 'primary' : _f, _g = _a.bgColor, bgColor = _g === void 0 ? 'modal-bg-primary' : _g, restProps = tslib.__rest(_a, ["showIndicator", "indicatorProps", "label", "icon", "id", "selected", "onChange", "onClick", "tabClassNames", "dataTestId", "className", "labelClassName", "selectedClassName", "iconClassName", "href", "Component", "accentColor", "bgColor"]);
     var handleClick = function (event) {
         onChange === null || onChange === void 0 ? void 0 : onChange(id);
         onClick === null || onClick === void 0 ? void 0 : onClick(event);
     };
     var commonClassName = tabClassNames.className, commonLabelClassName = tabClassNames.labelClassName, commonSelectedClassName = tabClassNames.selectedClassName, commonIconClassName = tabClassNames.iconClassName;
     return (React__default.default.createElement(Component, tslib.__assign({ "data-test-id": dataTestId, tabIndex: 0 }, (Component === 'button' ? { type: 'button' } : null), restProps, { href: href, id: id, ref: ref, className: cn__default.default(styles__default.default.component, commonClassName, className, selected && commonSelectedClassName, selected && selectedClassName, (_b = {},
-            _b[styles__default.default.selected] = selected,
+            _b[styles__default.default[accentColor]] = selected,
             _b)), onClick: handleClick }),
         React__default.default.createElement("div", { className: cn__default.default(styles__default.default.icon, commonIconClassName, iconClassName) }, React.isValidElement(icon) ? React.cloneElement(icon, { selected: selected }) : icon),
         React__default.default.createElement(coreComponentsTypography.Typography.Text, { weight: 'medium', view: 'secondary-small', className: cn__default.default(styles__default.default.label, commonLabelClassName, labelClassName, (_c = {},
                 _c[styles__default.default.labelSelected] = selected,
                 _c)) }, React.isValidElement(label) ? React.cloneElement(label, { selected: selected }) : label),
         showIndicator && (React__default.default.createElement("div", { className: styles__default.default.indicator },
-            React__default.default.createElement(coreComponentsBadge.Badge, tslib.__assign({ visibleIconOutline: true }, indicatorProps, { view: 'count' }))))));
+            React__default.default.createElement(coreComponentsIndicator.Indicator, tslib.__assign({}, indicatorProps, { height: (indicatorProps === null || indicatorProps === void 0 ? void 0 : indicatorProps.value) ? 16 : undefined, border: {
+                    width: 2,
+                    color: consts.INDICATOR_BORDER_COLOR[bgColor],
+                }, backgroundColor: consts.INDICATOR_BG_COLOR[accentColor] }))))));
 });
 var Tab = TabComponent;
 

package/cssm/components/tab/index.js

@@ -3,12 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var components_tab_Component = require('./Component.js');
-require('tslib');
-require('react');
-require('classnames');
-require('@alfalab/core-components-badge/cssm');
-require('@alfalab/core-components-typography/cssm');
-require('./index.module.css');
 
 
 

package/cssm/components/tab/index.module.css

@@ -1,6 +1,7 @@
-:root {
+: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 */
 } /* deprecated */ :root {
     --color-light-accent-primary: #ef3124;
+    --color-light-accent-secondary: #212124;
     --color-light-neutral-translucent-700: rgba(4, 4, 21, 0.47);
     --color-light-text-secondary: rgba(4, 4, 19, 0.55); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :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 */
@@ -42,8 +43,10 @@
     align-items: center;
     padding: var(--gap-xs) 0;
     color: var(--color-light-neutral-translucent-700);
-} .selected {
+} .primary {
     color: var(--color-light-accent-primary);
+} .secondary {
+    color: var(--color-light-accent-secondary);
 } .icon {
     display: flex;
     align-items: center;
@@ -63,7 +66,7 @@
     color: inherit;
 } .indicator {
     position: absolute;
-    top: var(--gap-2xs);
+    top: 3px;
     left: calc(50% + var(--gap-2xs));
     height: 16px;
     min-width: 16px;

package/cssm/consts.d.ts

@@ -0,0 +1,9 @@
+declare const INDICATOR_BORDER_COLOR: {
+    'modal-bg-primary': string;
+    'modal-bg-alt-primary': string;
+};
+declare const INDICATOR_BG_COLOR: {
+    primary: string;
+    secondary: string;
+};
+export { INDICATOR_BORDER_COLOR, INDICATOR_BG_COLOR };

package/cssm/consts.js

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var INDICATOR_BORDER_COLOR = {
+    'modal-bg-primary': 'var(--color-light-base-bg-primary)',
+    'modal-bg-alt-primary': 'var(--color-light-base-bg-alt-primary)',
+};
+var INDICATOR_BG_COLOR = {
+    primary: 'var(--color-light-accent-primary)',
+    secondary: 'var(--color-light-accent-secondary)',
+};
+
+exports.INDICATOR_BG_COLOR = INDICATOR_BG_COLOR;
+exports.INDICATOR_BORDER_COLOR = INDICATOR_BORDER_COLOR;

package/cssm/index.js

@@ -3,15 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var Component = require('./Component.js');
-require('tslib');
-require('react');
-require('classnames');
-require('@alfalab/core-components-shared/cssm');
-require('./components/tab/Component.js');
-require('@alfalab/core-components-badge/cssm');
-require('@alfalab/core-components-typography/cssm');
-require('./components/tab/index.module.css');
-require('./index.module.css');
 
 
 

package/cssm/index.module.css

@@ -1,7 +1,8 @@
-:root {
+: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 */
 } /* deprecated */ :root {
+    --color-light-base-bg-alt-primary: #f2f3f5;
     --color-light-base-bg-primary: #fff;
-    --color-light-neutral-300: #e7e8eb; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+    --color-light-neutral-translucent-300: rgba(15, 25, 55, 0.1); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :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 */
 } :root {
 } :root {
@@ -15,17 +16,18 @@
 } :root {
 } :root {
 } :root {
-} :root {
-    --tab-bar-bg-color: var(--color-light-base-bg-primary);
 } .component {
     display: flex;
     justify-content: center;
     height: 64px;
     max-height: 64px;
-    background-color: var(--tab-bar-bg-color);
     box-sizing: border-box;
     overflow: hidden;
-    transition: box-shadow 0.2s ease;
-} .border {
-    box-shadow: 0 -1px 0 0 var(--color-light-neutral-300);
+    transition: box-shadow 0.2s ease
+} .component.modal-bg-primary {
+        background-color: var(--color-light-base-bg-primary);
+    } .component.modal-bg-alt-primary {
+        background-color: var(--color-light-base-bg-alt-primary);
+    } .border {
+    box-shadow: 0 -1px 0 0 var(--color-light-neutral-translucent-300);
 }

package/cssm/shared/index.d.ts

@@ -0,0 +1 @@
+export { getTabBarTestIds } from "../utils";

package/cssm/shared/index.js

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var utils = require('../utils.js');
+
+
+
+exports.getTabBarTestIds = utils.getTabBarTestIds;

package/cssm/types.d.ts

@@ -1,5 +1,5 @@
 import { AllHTMLAttributes, ElementType, ForwardRefExoticComponent, HTMLAttributes, ReactElement, ReactNode, RefAttributes } from 'react';
-import { BadgeProps } from "@alfalab/core-components-badge";
+import { IndicatorProps } from "@alfalab/core-components-indicator";
 type TabElementType = ReactElement<TabProps, ForwardRefExoticComponent<TabProps & RefAttributes<HTMLElement>>>;
 interface TabBarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
     /**
@@ -48,6 +48,14 @@ interface TabBarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
      * Обработчик изменения выбранного таба
      */
     onChange?: (id: string) => void;
+    /**
+     * Цвет активного таба
+     */
+    accentColor?: 'primary' | 'secondary';
+    /**
+     * Цвет фона
+     */
+    bgColor?: 'modal-bg-primary' | 'modal-bg-alt-primary';
 }
 type AdditionalTabProps = Record<string, unknown>;
 interface TabProps extends Omit<AllHTMLAttributes<unknown>, 'onChange' | 'label'>, AdditionalTabProps {
@@ -75,7 +83,7 @@ interface TabProps extends Omit<AllHTMLAttributes<unknown>, 'onChange' | 'label'
     /**
      * Свойства индикатора
      */
-    indicatorProps?: Omit<BadgeProps, 'view' | 'visibleColorOutline' | 'size' | 'iconColor' | 'iconUnderlayColor'>;
+    indicatorProps?: Omit<IndicatorProps, 'color' | 'backgroundColor' | 'border' | 'view' | 'size' | 'height'>;
     /**
      *  Дополнительный класс таба
      */
@@ -93,7 +101,7 @@ interface TabProps extends Omit<AllHTMLAttributes<unknown>, 'onChange' | 'label'
      */
     iconClassName?: string;
 }
-interface PrivateTabProps extends Pick<TabBarProps, 'tabClassNames' | 'onChange' | 'dataTestId'> {
+interface PrivateTabProps extends Pick<TabBarProps, 'tabClassNames' | 'onChange' | 'dataTestId' | 'accentColor' | 'bgColor'> {
     selected: boolean;
 }
 export { TabBarProps, TabProps, PrivateTabProps };

package/cssm/utils.d.ts

@@ -0,0 +1,5 @@
+declare function getTabBarTestIds(dataTestId: string): {
+    tabBar: string;
+    tab: string;
+};
+export { getTabBarTestIds };

package/cssm/utils.js

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var coreComponentsShared = require('@alfalab/core-components-shared/cssm');
+
+function getTabBarTestIds(dataTestId) {
+    return {
+        tabBar: dataTestId,
+        tab: coreComponentsShared.getDataTestId(dataTestId, 'tab'),
+    };
+}
+
+exports.getTabBarTestIds = getTabBarTestIds;

package/esm/Component.js

@@ -3,21 +3,23 @@ import React, { forwardRef, Children, cloneElement } from 'react';
 import cn from 'classnames';
 import { getDataTestId } from '@alfalab/core-components-shared/esm';
 import { Tab } from './components/tab/Component.js';
-import '@alfalab/core-components-badge/esm';
-import '@alfalab/core-components-typography/esm';
 
-var styles = {"component":"tab-bar__component_15pc1","border":"tab-bar__border_15pc1"};
+var styles = {"component":"tab-bar__component_1b06f","modal-bg-primary":"tab-bar__modal-bg-primary_1b06f","modal-bg-alt-primary":"tab-bar__modal-bg-alt-primary_1b06f","border":"tab-bar__border_1b06f"};
 require('./index.css')
 
 var TabBarComponent = forwardRef(function (_a, ref) {
     var _b;
-    var children = _a.children, className = _a.className, selectedId = _a.selectedId, border = _a.border, dataTestId = _a.dataTestId, tabClassNames = _a.tabClassNames, onChange = _a.onChange, restProps = __rest(_a, ["children", "className", "selectedId", "border", "dataTestId", "tabClassNames", "onChange"]);
+    var children = _a.children, className = _a.className, selectedId = _a.selectedId, border = _a.border, dataTestId = _a.dataTestId, tabClassNames = _a.tabClassNames, onChange = _a.onChange, _c = _a.accentColor, accentColor = _c === void 0 ? 'primary' : _c, _d = _a.bgColor, bgColor = _d === void 0 ? 'modal-bg-primary' : _d, restProps = __rest(_a, ["children", "className", "selectedId", "border", "dataTestId", "tabClassNames", "onChange", "accentColor", "bgColor"]);
     if (Children.count(children) > 5) {
         // eslint-disable-next-line no-console
         console.error('Компонент TabBar не может содержать больше 5 табов');
     }
-    return (React.createElement("nav", __assign({ "data-test-id": dataTestId }, restProps, { ref: ref, className: cn(styles.component, className, (_b = {}, _b[styles.border] = border, _b)) }), Children.map(children, function (tab) {
+    return (React.createElement("nav", __assign({ "data-test-id": dataTestId }, restProps, { ref: ref, className: cn(styles.component, styles[bgColor], className, (_b = {},
+            _b[styles.border] = border,
+            _b)) }), Children.map(children, function (tab) {
         return cloneElement(tab, {
+            bgColor: bgColor,
+            accentColor: accentColor,
             selected: tab.props.id === selectedId,
             onChange: onChange,
             tabClassNames: tabClassNames,

package/esm/components/tab/Component.js

@@ -1,29 +1,33 @@
 import { __rest, __assign } from 'tslib';
 import React, { forwardRef, isValidElement, cloneElement } from 'react';
 import cn from 'classnames';
-import { Badge } from '@alfalab/core-components-badge/esm';
+import { Indicator } from '@alfalab/core-components-indicator/esm';
 import { Typography } from '@alfalab/core-components-typography/esm';
+import { INDICATOR_BORDER_COLOR, INDICATOR_BG_COLOR } from '../../consts.js';
 
-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"};
+var styles = {"component":"tab-bar__component_m43fu","primary":"tab-bar__primary_m43fu","secondary":"tab-bar__secondary_m43fu","icon":"tab-bar__icon_m43fu","label":"tab-bar__label_m43fu","labelSelected":"tab-bar__labelSelected_m43fu","indicator":"tab-bar__indicator_m43fu"};
 require('./index.css')
 
 var TabComponent = forwardRef(function (_a, ref) {
     var _b, _c;
-    var showIndicator = _a.showIndicator, indicatorProps = _a.indicatorProps, label = _a.label, icon = _a.icon, id = _a.id, selected = _a.selected, onChange = _a.onChange, onClick = _a.onClick, _d = _a.tabClassNames, tabClassNames = _d === void 0 ? {} : _d, dataTestId = _a.dataTestId, className = _a.className, labelClassName = _a.labelClassName, selectedClassName = _a.selectedClassName, iconClassName = _a.iconClassName, href = _a.href, _e = _a.Component, Component = _e === void 0 ? href ? 'a' : 'button' : _e, restProps = __rest(_a, ["showIndicator", "indicatorProps", "label", "icon", "id", "selected", "onChange", "onClick", "tabClassNames", "dataTestId", "className", "labelClassName", "selectedClassName", "iconClassName", "href", "Component"]);
+    var showIndicator = _a.showIndicator, indicatorProps = _a.indicatorProps, label = _a.label, icon = _a.icon, id = _a.id, selected = _a.selected, onChange = _a.onChange, onClick = _a.onClick, _d = _a.tabClassNames, tabClassNames = _d === void 0 ? {} : _d, dataTestId = _a.dataTestId, className = _a.className, labelClassName = _a.labelClassName, selectedClassName = _a.selectedClassName, iconClassName = _a.iconClassName, href = _a.href, _e = _a.Component, Component = _e === void 0 ? href ? 'a' : 'button' : _e, _f = _a.accentColor, accentColor = _f === void 0 ? 'primary' : _f, _g = _a.bgColor, bgColor = _g === void 0 ? 'modal-bg-primary' : _g, restProps = __rest(_a, ["showIndicator", "indicatorProps", "label", "icon", "id", "selected", "onChange", "onClick", "tabClassNames", "dataTestId", "className", "labelClassName", "selectedClassName", "iconClassName", "href", "Component", "accentColor", "bgColor"]);
     var handleClick = function (event) {
         onChange === null || onChange === void 0 ? void 0 : onChange(id);
         onClick === null || onClick === void 0 ? void 0 : onClick(event);
     };
     var commonClassName = tabClassNames.className, commonLabelClassName = tabClassNames.labelClassName, commonSelectedClassName = tabClassNames.selectedClassName, commonIconClassName = tabClassNames.iconClassName;
     return (React.createElement(Component, __assign({ "data-test-id": dataTestId, tabIndex: 0 }, (Component === 'button' ? { type: 'button' } : null), restProps, { href: href, id: id, ref: ref, className: cn(styles.component, commonClassName, className, selected && commonSelectedClassName, selected && selectedClassName, (_b = {},
-            _b[styles.selected] = selected,
+            _b[styles[accentColor]] = selected,
             _b)), onClick: handleClick }),
         React.createElement("div", { className: cn(styles.icon, commonIconClassName, iconClassName) }, isValidElement(icon) ? cloneElement(icon, { selected: selected }) : icon),
         React.createElement(Typography.Text, { weight: 'medium', view: 'secondary-small', className: cn(styles.label, commonLabelClassName, labelClassName, (_c = {},
                 _c[styles.labelSelected] = selected,
                 _c)) }, isValidElement(label) ? cloneElement(label, { selected: selected }) : label),
         showIndicator && (React.createElement("div", { className: styles.indicator },
-            React.createElement(Badge, __assign({ visibleIconOutline: true }, indicatorProps, { view: 'count' }))))));
+            React.createElement(Indicator, __assign({}, indicatorProps, { height: (indicatorProps === null || indicatorProps === void 0 ? void 0 : indicatorProps.value) ? 16 : undefined, border: {
+                    width: 2,
+                    color: INDICATOR_BORDER_COLOR[bgColor],
+                }, backgroundColor: INDICATOR_BG_COLOR[accentColor] }))))));
 });
 var Tab = TabComponent;
 

package/esm/components/tab/index.css

@@ -1,7 +1,8 @@
-/* hash: okzse */
-:root {
+/* hash: y33p9 */
+: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 */
 } /* deprecated */ :root {
     --color-light-accent-primary: #ef3124;
+    --color-light-accent-secondary: #212124;
     --color-light-neutral-translucent-700: rgba(4, 4, 21, 0.47);
     --color-light-text-secondary: rgba(4, 4, 19, 0.55); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :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 */
@@ -19,7 +20,7 @@
     --gap-xs: 8px;
 } :root {
 } :root {
-} .tab-bar__component_1js6c {
+} .tab-bar__component_m43fu {
     box-sizing: border-box;
     background-color: transparent;
     -webkit-tap-highlight-color: transparent;
@@ -43,15 +44,17 @@
     align-items: center;
     padding: var(--gap-xs) 0;
     color: var(--color-light-neutral-translucent-700);
-} .tab-bar__selected_1js6c {
+} .tab-bar__primary_m43fu {
     color: var(--color-light-accent-primary);
-} .tab-bar__icon_1js6c {
+} .tab-bar__secondary_m43fu {
+    color: var(--color-light-accent-secondary);
+} .tab-bar__icon_m43fu {
     display: flex;
     align-items: center;
     justify-content: center;
     flex-grow: 1;
     width: 100%;
-} .tab-bar__label_1js6c {
+} .tab-bar__label_m43fu {
     -webkit-line-clamp: 1;
     display: -webkit-box;
     -webkit-box-orient: vertical;
@@ -60,11 +63,11 @@
     flex-shrink: 0;
 
     color: var(--color-light-text-secondary);
-} .tab-bar__labelSelected_1js6c {
+} .tab-bar__labelSelected_m43fu {
     color: inherit;
-} .tab-bar__indicator_1js6c {
+} .tab-bar__indicator_m43fu {
     position: absolute;
-    top: var(--gap-2xs);
+    top: 3px;
     left: calc(50% + var(--gap-2xs));
     height: 16px;
     min-width: 16px;

package/esm/components/tab/index.js

@@ -1,6 +1 @@
 export { Tab } from './Component.js';
-import 'tslib';
-import 'react';
-import 'classnames';
-import '@alfalab/core-components-badge/esm';
-import '@alfalab/core-components-typography/esm';