@alfalab/core-components 45.8.0-beta.3 → 45.8.0-beta.4

package/status-badge/esm/Component.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import React from 'react';
-import { StatusBadgeCustomIcon, StatusBadgeSizes, StatusBadgeViews } from "./types/statusBadgePropTypes";
 type StatusBadgeProps = {
     /**
      * Дополнительный класс
@@ -10,7 +9,7 @@ type StatusBadgeProps = {
      * Размер компонента
      * @default 24
      */
-    size?: StatusBadgeSizes;
+    size?: 16 | 20 | 24 | 32 | 40;
     /**
      * Набор цветов для компонента
      */
@@ -18,15 +17,11 @@ type StatusBadgeProps = {
     /**
      * Вид бейджа.
      */
-    view: StatusBadgeViews;
+    view: 'positive-checkmark' | 'negative-cross' | 'negative-alert' | 'negative-block' | 'attention-alert' | 'neutral-information' | 'neutral-operation' | 'neutral-cross';
     /**
      * Идентификатор для систем автоматизированного тестирования
      */
     dataTestId?: string;
-    /**
-     * Кастомные иконки
-     */
-    customIcons?: StatusBadgeCustomIcon;
 };
-declare const StatusBadge: ({ className, dataTestId, size, view, colors, customIcons, }: StatusBadgeProps) => React.JSX.Element;
+declare const StatusBadge: ({ className, dataTestId, size, view, colors, }: StatusBadgeProps) => React.JSX.Element;
 export { StatusBadgeProps, StatusBadge };

package/status-badge/esm/Component.js

@@ -1,21 +1,18 @@
 import React from 'react';
 import cn from 'classnames';
-import { useStatusBadgeIcon } from './hooks/useStatusBadgeIcon.js';
-import 'tslib';
-import './consts/iconMap.js';
-import '@alfalab/icons-glyph/CheckmarkCompactMIcon';
-import '@alfalab/icons-glyph/CheckmarkCompactSIcon';
-import '@alfalab/icons-glyph/ClockHandsCompactMIcon';
-import '@alfalab/icons-glyph/ClockHandsCompactSIcon';
-import '@alfalab/icons-glyph/CrossCompactMIcon';
-import '@alfalab/icons-glyph/CrossCompactSIcon';
-import '@alfalab/icons-glyph/ExclamationCompactMIcon';
-import '@alfalab/icons-glyph/ExclamationCompactSIcon';
-import '@alfalab/icons-glyph/InformationCompactMIcon';
-import '@alfalab/icons-glyph/InformationCompactSIcon';
-import '@alfalab/icons-glyph/StopBrickCompactMIcon';
-import '@alfalab/icons-glyph/StopBrickMIcon';
-import '@alfalab/icons-glyph/StopBrickSIcon';
+import { CheckmarkCompactMIcon } from '@alfalab/icons-glyph/CheckmarkCompactMIcon';
+import { CheckmarkCompactSIcon } from '@alfalab/icons-glyph/CheckmarkCompactSIcon';
+import { ClockHandsCompactMIcon } from '@alfalab/icons-glyph/ClockHandsCompactMIcon';
+import { ClockHandsCompactSIcon } from '@alfalab/icons-glyph/ClockHandsCompactSIcon';
+import { CrossCompactMIcon } from '@alfalab/icons-glyph/CrossCompactMIcon';
+import { CrossCompactSIcon } from '@alfalab/icons-glyph/CrossCompactSIcon';
+import { ExclamationCompactMIcon } from '@alfalab/icons-glyph/ExclamationCompactMIcon';
+import { ExclamationCompactSIcon } from '@alfalab/icons-glyph/ExclamationCompactSIcon';
+import { InformationCompactMIcon } from '@alfalab/icons-glyph/InformationCompactMIcon';
+import { InformationCompactSIcon } from '@alfalab/icons-glyph/InformationCompactSIcon';
+import { StopBrickCompactMIcon } from '@alfalab/icons-glyph/StopBrickCompactMIcon';
+import { StopBrickMIcon } from '@alfalab/icons-glyph/StopBrickMIcon';
+import { StopBrickSIcon } from '@alfalab/icons-glyph/StopBrickSIcon';
 
 var defaultColors = {"positive-checkmark":"status-badge__positive-checkmark_1qjlx","negative-cross":"status-badge__negative-cross_1qjlx","negative-alert":"status-badge__negative-alert_1qjlx","negative-block":"status-badge__negative-block_1qjlx","attention-alert":"status-badge__attention-alert_1qjlx","neutral-information":"status-badge__neutral-information_1qjlx","neutral-operation":"status-badge__neutral-operation_1qjlx","neutral-cross":"status-badge__neutral-cross_1qjlx"};
 require('./default.css');
@@ -30,9 +27,67 @@ var colorStyles = {
     default: defaultColors,
     inverted: invertedColors,
 };
+var ICON_MAP = {
+    'positive-checkmark': {
+        16: CheckmarkCompactSIcon,
+        20: CheckmarkCompactSIcon,
+        24: CheckmarkCompactMIcon,
+        32: CheckmarkCompactMIcon,
+        40: CheckmarkCompactMIcon,
+    },
+    'negative-cross': {
+        16: CrossCompactSIcon,
+        20: CrossCompactSIcon,
+        24: CrossCompactMIcon,
+        32: CrossCompactMIcon,
+        40: CrossCompactMIcon,
+    },
+    'negative-alert': {
+        16: ExclamationCompactSIcon,
+        20: ExclamationCompactSIcon,
+        24: ExclamationCompactMIcon,
+        32: ExclamationCompactMIcon,
+        40: ExclamationCompactMIcon,
+    },
+    'negative-block': {
+        16: StopBrickSIcon,
+        20: StopBrickSIcon,
+        24: StopBrickCompactMIcon,
+        32: StopBrickMIcon,
+        40: StopBrickMIcon,
+    },
+    'attention-alert': {
+        16: ExclamationCompactSIcon,
+        20: ExclamationCompactSIcon,
+        24: ExclamationCompactMIcon,
+        32: ExclamationCompactMIcon,
+        40: ExclamationCompactMIcon,
+    },
+    'neutral-information': {
+        16: InformationCompactSIcon,
+        20: InformationCompactSIcon,
+        24: InformationCompactMIcon,
+        32: InformationCompactMIcon,
+        40: InformationCompactMIcon,
+    },
+    'neutral-operation': {
+        16: ClockHandsCompactSIcon,
+        20: ClockHandsCompactSIcon,
+        24: ClockHandsCompactMIcon,
+        32: ClockHandsCompactMIcon,
+        40: ClockHandsCompactMIcon,
+    },
+    'neutral-cross': {
+        16: CrossCompactSIcon,
+        20: CrossCompactSIcon,
+        24: CrossCompactMIcon,
+        32: CrossCompactMIcon,
+        40: CrossCompactMIcon,
+    },
+};
 var StatusBadge = function (_a) {
-    var className = _a.className, dataTestId = _a.dataTestId, _b = _a.size, size = _b === void 0 ? 24 : _b, view = _a.view, _c = _a.colors, colors = _c === void 0 ? 'default' : _c, customIcons = _a.customIcons;
-    var Icon = useStatusBadgeIcon(view, size, customIcons).Icon;
+    var className = _a.className, dataTestId = _a.dataTestId, _b = _a.size, size = _b === void 0 ? 24 : _b, view = _a.view, _c = _a.colors, colors = _c === void 0 ? 'default' : _c;
+    var Icon = ICON_MAP[view][size];
     return (React.createElement("div", { className: cn(styles.component, className, styles["size-".concat(size)], colorStyles[colors].component, colorStyles[colors][view]), "data-test-id": dataTestId },
         React.createElement(Icon, null)));
 };

package/status-badge/esm/index.d.ts

@@ -1,2 +1 @@
 export * from "./Component";
-export { StatusBadgeViews, StatusBadgeSizes, StatusBadgeIcon, StatusBadgeCustomIcon } from "./types/statusBadgePropTypes";

package/status-badge/esm/index.js

@@ -1,9 +1,6 @@
 export { StatusBadge } from './Component.js';
 import 'react';
 import 'classnames';
-import './hooks/useStatusBadgeIcon.js';
-import 'tslib';
-import './consts/iconMap.js';
 import '@alfalab/icons-glyph/CheckmarkCompactMIcon';
 import '@alfalab/icons-glyph/CheckmarkCompactSIcon';
 import '@alfalab/icons-glyph/ClockHandsCompactMIcon';

package/status-badge/index.d.ts

@@ -1,2 +1 @@
 export * from "./Component";
-export { StatusBadgeViews, StatusBadgeSizes, StatusBadgeIcon, StatusBadgeCustomIcon } from "./types/statusBadgePropTypes";

package/status-badge/modern/Component.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import React from 'react';
-import { StatusBadgeCustomIcon, StatusBadgeSizes, StatusBadgeViews } from "./types/statusBadgePropTypes";
 type StatusBadgeProps = {
     /**
      * Дополнительный класс
@@ -10,7 +9,7 @@ type StatusBadgeProps = {
      * Размер компонента
      * @default 24
      */
-    size?: StatusBadgeSizes;
+    size?: 16 | 20 | 24 | 32 | 40;
     /**
      * Набор цветов для компонента
      */
@@ -18,15 +17,11 @@ type StatusBadgeProps = {
     /**
      * Вид бейджа.
      */
-    view: StatusBadgeViews;
+    view: 'positive-checkmark' | 'negative-cross' | 'negative-alert' | 'negative-block' | 'attention-alert' | 'neutral-information' | 'neutral-operation' | 'neutral-cross';
     /**
      * Идентификатор для систем автоматизированного тестирования
      */
     dataTestId?: string;
-    /**
-     * Кастомные иконки
-     */
-    customIcons?: StatusBadgeCustomIcon;
 };
-declare const StatusBadge: ({ className, dataTestId, size, view, colors, customIcons, }: StatusBadgeProps) => React.JSX.Element;
+declare const StatusBadge: ({ className, dataTestId, size, view, colors, }: StatusBadgeProps) => React.JSX.Element;
 export { StatusBadgeProps, StatusBadge };

package/status-badge/modern/Component.js

@@ -1,20 +1,18 @@
 import React from 'react';
 import cn from 'classnames';
-import { useStatusBadgeIcon } from './hooks/useStatusBadgeIcon.js';
-import './consts/iconMap.js';
-import '@alfalab/icons-glyph/CheckmarkCompactMIcon';
-import '@alfalab/icons-glyph/CheckmarkCompactSIcon';
-import '@alfalab/icons-glyph/ClockHandsCompactMIcon';
-import '@alfalab/icons-glyph/ClockHandsCompactSIcon';
-import '@alfalab/icons-glyph/CrossCompactMIcon';
-import '@alfalab/icons-glyph/CrossCompactSIcon';
-import '@alfalab/icons-glyph/ExclamationCompactMIcon';
-import '@alfalab/icons-glyph/ExclamationCompactSIcon';
-import '@alfalab/icons-glyph/InformationCompactMIcon';
-import '@alfalab/icons-glyph/InformationCompactSIcon';
-import '@alfalab/icons-glyph/StopBrickCompactMIcon';
-import '@alfalab/icons-glyph/StopBrickMIcon';
-import '@alfalab/icons-glyph/StopBrickSIcon';
+import { CheckmarkCompactMIcon } from '@alfalab/icons-glyph/CheckmarkCompactMIcon';
+import { CheckmarkCompactSIcon } from '@alfalab/icons-glyph/CheckmarkCompactSIcon';
+import { ClockHandsCompactMIcon } from '@alfalab/icons-glyph/ClockHandsCompactMIcon';
+import { ClockHandsCompactSIcon } from '@alfalab/icons-glyph/ClockHandsCompactSIcon';
+import { CrossCompactMIcon } from '@alfalab/icons-glyph/CrossCompactMIcon';
+import { CrossCompactSIcon } from '@alfalab/icons-glyph/CrossCompactSIcon';
+import { ExclamationCompactMIcon } from '@alfalab/icons-glyph/ExclamationCompactMIcon';
+import { ExclamationCompactSIcon } from '@alfalab/icons-glyph/ExclamationCompactSIcon';
+import { InformationCompactMIcon } from '@alfalab/icons-glyph/InformationCompactMIcon';
+import { InformationCompactSIcon } from '@alfalab/icons-glyph/InformationCompactSIcon';
+import { StopBrickCompactMIcon } from '@alfalab/icons-glyph/StopBrickCompactMIcon';
+import { StopBrickMIcon } from '@alfalab/icons-glyph/StopBrickMIcon';
+import { StopBrickSIcon } from '@alfalab/icons-glyph/StopBrickSIcon';
 
 const defaultColors = {"positive-checkmark":"status-badge__positive-checkmark_1qjlx","negative-cross":"status-badge__negative-cross_1qjlx","negative-alert":"status-badge__negative-alert_1qjlx","negative-block":"status-badge__negative-block_1qjlx","attention-alert":"status-badge__attention-alert_1qjlx","neutral-information":"status-badge__neutral-information_1qjlx","neutral-operation":"status-badge__neutral-operation_1qjlx","neutral-cross":"status-badge__neutral-cross_1qjlx"};
 require('./default.css');
@@ -29,8 +27,66 @@ const colorStyles = {
     default: defaultColors,
     inverted: invertedColors,
 };
-const StatusBadge = ({ className, dataTestId, size = 24, view, colors = 'default', customIcons, }) => {
-    const { Icon } = useStatusBadgeIcon(view, size, customIcons);
+const ICON_MAP = {
+    'positive-checkmark': {
+        16: CheckmarkCompactSIcon,
+        20: CheckmarkCompactSIcon,
+        24: CheckmarkCompactMIcon,
+        32: CheckmarkCompactMIcon,
+        40: CheckmarkCompactMIcon,
+    },
+    'negative-cross': {
+        16: CrossCompactSIcon,
+        20: CrossCompactSIcon,
+        24: CrossCompactMIcon,
+        32: CrossCompactMIcon,
+        40: CrossCompactMIcon,
+    },
+    'negative-alert': {
+        16: ExclamationCompactSIcon,
+        20: ExclamationCompactSIcon,
+        24: ExclamationCompactMIcon,
+        32: ExclamationCompactMIcon,
+        40: ExclamationCompactMIcon,
+    },
+    'negative-block': {
+        16: StopBrickSIcon,
+        20: StopBrickSIcon,
+        24: StopBrickCompactMIcon,
+        32: StopBrickMIcon,
+        40: StopBrickMIcon,
+    },
+    'attention-alert': {
+        16: ExclamationCompactSIcon,
+        20: ExclamationCompactSIcon,
+        24: ExclamationCompactMIcon,
+        32: ExclamationCompactMIcon,
+        40: ExclamationCompactMIcon,
+    },
+    'neutral-information': {
+        16: InformationCompactSIcon,
+        20: InformationCompactSIcon,
+        24: InformationCompactMIcon,
+        32: InformationCompactMIcon,
+        40: InformationCompactMIcon,
+    },
+    'neutral-operation': {
+        16: ClockHandsCompactSIcon,
+        20: ClockHandsCompactSIcon,
+        24: ClockHandsCompactMIcon,
+        32: ClockHandsCompactMIcon,
+        40: ClockHandsCompactMIcon,
+    },
+    'neutral-cross': {
+        16: CrossCompactSIcon,
+        20: CrossCompactSIcon,
+        24: CrossCompactMIcon,
+        32: CrossCompactMIcon,
+        40: CrossCompactMIcon,
+    },
+};
+const StatusBadge = ({ className, dataTestId, size = 24, view, colors = 'default', }) => {
+    const Icon = ICON_MAP[view][size];
     return (React.createElement("div", { className: cn(styles.component, className, styles[`size-${size}`], colorStyles[colors].component, colorStyles[colors][view]), "data-test-id": dataTestId },
         React.createElement(Icon, null)));
 };

package/status-badge/modern/index.d.ts

@@ -1,2 +1 @@
 export * from "./Component";
-export { StatusBadgeViews, StatusBadgeSizes, StatusBadgeIcon, StatusBadgeCustomIcon } from "./types/statusBadgePropTypes";

package/status-badge/modern/index.js

@@ -1,8 +1,6 @@
 export { StatusBadge } from './Component.js';
 import 'react';
 import 'classnames';
-import './hooks/useStatusBadgeIcon.js';
-import './consts/iconMap.js';
 import '@alfalab/icons-glyph/CheckmarkCompactMIcon';
 import '@alfalab/icons-glyph/CheckmarkCompactSIcon';
 import '@alfalab/icons-glyph/ClockHandsCompactMIcon';

package/tab-bar/Component.js

@@ -11,22 +11,18 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"component":"tab-bar__component_1naag","modal-bg-primary":"tab-bar__modal-bg-primary_1naag","modal-bg-alt-primary":"tab-bar__modal-bg-alt-primary_1naag","border":"tab-bar__border_1naag"};
+var styles = {"component":"tab-bar__component_1naag","border":"tab-bar__border_1naag"};
 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, _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"]);
+    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"]);
     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, styles[bgColor], 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, 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/tab-bar/components/tab/Component.js

@@ -3,38 +3,34 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var cn = require('classnames');
-var coreComponentsIndicator = require('../../../indicator');
+var coreComponentsBadge = require('../../../badge');
 var coreComponentsTypography = require('../../../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_zqkzg","primary":"tab-bar__primary_zqkzg","secondary":"tab-bar__secondary_zqkzg","icon":"tab-bar__icon_zqkzg","label":"tab-bar__label_zqkzg","labelSelected":"tab-bar__labelSelected_zqkzg","indicator":"tab-bar__indicator_zqkzg"};
+var styles = {"component":"tab-bar__component_zqkzg","selected":"tab-bar__selected_zqkzg","icon":"tab-bar__icon_zqkzg","label":"tab-bar__label_zqkzg","labelSelected":"tab-bar__labelSelected_zqkzg","indicator":"tab-bar__indicator_zqkzg"};
 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, _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 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 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[accentColor]] = selected,
+            _b[styles.selected] = 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(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] }))))));
+            React__default.default.createElement(coreComponentsBadge.Badge, tslib.__assign({ visibleIconOutline: true }, indicatorProps, { view: 'count' }))))));
 });
 var Tab = TabComponent;
 

package/tab-bar/components/tab/index.css

@@ -2,7 +2,6 @@
 :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 */
@@ -44,10 +43,8 @@
     align-items: center;
     padding: var(--gap-xs) 0;
     color: var(--color-light-neutral-translucent-700);
-} .tab-bar__primary_zqkzg {
+} .tab-bar__selected_zqkzg {
     color: var(--color-light-accent-primary);
-} .tab-bar__secondary_zqkzg {
-    color: var(--color-light-accent-secondary);
 } .tab-bar__icon_zqkzg {
     display: flex;
     align-items: center;
@@ -67,7 +64,7 @@
     color: inherit;
 } .tab-bar__indicator_zqkzg {
     position: absolute;
-    top: 3px;
+    top: var(--gap-2xs);
     left: calc(50% + var(--gap-2xs));
     height: 16px;
     min-width: 16px;

package/tab-bar/cssm/Component.js

@@ -15,17 +15,13 @@ 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, _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"]);
+    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"]);
     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, styles__default.default[bgColor], 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, 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/tab-bar/cssm/components/tab/Component.js

@@ -3,9 +3,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var cn = require('classnames');
-var coreComponentsIndicator = require('../../../../indicator/cssm');
+var coreComponentsBadge = require('../../../../badge/cssm');
 var coreComponentsTypography = require('../../../../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 }; }
@@ -16,24 +15,21 @@ 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, _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 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 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[accentColor]] = selected,
+            _b[styles__default.default.selected] = 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(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] }))))));
+            React__default.default.createElement(coreComponentsBadge.Badge, tslib.__assign({ visibleIconOutline: true }, indicatorProps, { view: 'count' }))))));
 });
 var Tab = TabComponent;
 

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

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

package/tab-bar/cssm/index.module.css

@@ -1,8 +1,7 @@
 :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-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 */
+    --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 */
 } :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 {
@@ -16,18 +15,17 @@
 } :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
-} .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);
+    transition: box-shadow 0.2s ease;
+} .border {
+    box-shadow: 0 -1px 0 0 var(--color-light-neutral-300);
 }

package/tab-bar/cssm/types.d.ts

@@ -1,5 +1,5 @@
 import { AllHTMLAttributes, ElementType, ForwardRefExoticComponent, HTMLAttributes, ReactElement, ReactNode, RefAttributes } from 'react';
-import { IndicatorProps } from "../../indicator";
+import { BadgeProps } from "../../badge";
 type TabElementType = ReactElement<TabProps, ForwardRefExoticComponent<TabProps & RefAttributes<HTMLElement>>>;
 interface TabBarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
     /**
@@ -48,14 +48,6 @@ 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 {
@@ -83,7 +75,7 @@ interface TabProps extends Omit<AllHTMLAttributes<unknown>, 'onChange' | 'label'
     /**
      * Свойства индикатора
      */
-    indicatorProps?: Omit<IndicatorProps, 'color' | 'backgroundColor' | 'border' | 'view' | 'size' | 'height'>;
+    indicatorProps?: Omit<BadgeProps, 'view' | 'visibleColorOutline' | 'size' | 'iconColor' | 'iconUnderlayColor'>;
     /**
      *  Дополнительный класс таба
      */
@@ -101,7 +93,7 @@ interface TabProps extends Omit<AllHTMLAttributes<unknown>, 'onChange' | 'label'
      */
     iconClassName?: string;
 }
-interface PrivateTabProps extends Pick<TabBarProps, 'tabClassNames' | 'onChange' | 'dataTestId' | 'accentColor' | 'bgColor'> {
+interface PrivateTabProps extends Pick<TabBarProps, 'tabClassNames' | 'onChange' | 'dataTestId'> {
     selected: boolean;
 }
 export { TabBarProps, TabProps, PrivateTabProps };