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

package/status-badge/modern/Component.js

@@ -1,18 +1,20 @@
 import React from 'react';
 import cn from 'classnames';
-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';
+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';
 
 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');
@@ -27,66 +29,8 @@ const colorStyles = {
     default: defaultColors,
     inverted: invertedColors,
 };
-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];
+const StatusBadge = ({ className, dataTestId, size = 24, view, colors = 'default', customIcons, }) => {
+    const { Icon } = useStatusBadgeIcon(view, size, customIcons);
     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/consts/iconMap.d.ts

@@ -0,0 +1,4 @@
+import { StatusBadgeIcon, StatusBadgeSizes, StatusBadgeViews } from "../index";
+type IconMap = Record<StatusBadgeViews, Record<NonNullable<StatusBadgeSizes>, StatusBadgeIcon>>;
+declare const ICON_MAP: IconMap;
+export { IconMap, ICON_MAP };

package/status-badge/modern/consts/iconMap.js

@@ -0,0 +1,74 @@
+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 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,
+    },
+};
+
+export { ICON_MAP };

package/status-badge/modern/hooks/useStatusBadgeIcon.d.ts

@@ -0,0 +1,5 @@
+import { StatusBadgeCustomIcon, StatusBadgeSizes, StatusBadgeViews } from "../types/statusBadgePropTypes";
+declare const useStatusBadgeIcon: (view: StatusBadgeViews, size: StatusBadgeSizes, customIcons?: StatusBadgeCustomIcon) => {
+    Icon: import("../types/statusBadgePropTypes").StatusBadgeIcon;
+};
+export { useStatusBadgeIcon };

package/status-badge/modern/hooks/useStatusBadgeIcon.js

@@ -0,0 +1,34 @@
+import { ICON_MAP } from '../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';
+
+const useStatusBadgeIcon = (view, size, customIcons) => {
+    let iconsMap = ICON_MAP;
+    // transform initial icons map
+    if (customIcons) {
+        iconsMap = Object.keys(ICON_MAP).reduce((acc, current) => ({
+            ...acc,
+            ...{
+                [current]: {
+                    ...ICON_MAP[current],
+                    ...customIcons[current],
+                },
+            },
+        }), {});
+    }
+    const Icon = iconsMap[view][size];
+    return { Icon };
+};
+
+export { useStatusBadgeIcon };

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

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

package/status-badge/modern/index.js

@@ -1,6 +1,8 @@
 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/status-badge/modern/types/statusBadgePropTypes.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import React from 'react';
+type StatusBadgeViews = 'positive-checkmark' | 'negative-cross' | 'negative-alert' | 'negative-block' | 'attention-alert' | 'neutral-information' | 'neutral-operation' | 'neutral-cross';
+type StatusBadgeSizes = 16 | 20 | 24 | 32 | 40;
+type StatusBadgeIcon = React.FC<React.SVGProps<SVGSVGElement>>;
+type StatusBadgeCustomIcon = Partial<Record<StatusBadgeViews, Partial<Record<StatusBadgeSizes, StatusBadgeIcon>>>>;
+export { StatusBadgeViews, StatusBadgeSizes, StatusBadgeIcon, StatusBadgeCustomIcon };

package/status-badge/types/statusBadgePropTypes.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import React from 'react';
+type StatusBadgeViews = 'positive-checkmark' | 'negative-cross' | 'negative-alert' | 'negative-block' | 'attention-alert' | 'neutral-information' | 'neutral-operation' | 'neutral-cross';
+type StatusBadgeSizes = 16 | 20 | 24 | 32 | 40;
+type StatusBadgeIcon = React.FC<React.SVGProps<SVGSVGElement>>;
+type StatusBadgeCustomIcon = Partial<Record<StatusBadgeViews, Partial<Record<StatusBadgeSizes, StatusBadgeIcon>>>>;
+export { StatusBadgeViews, StatusBadgeSizes, StatusBadgeIcon, StatusBadgeCustomIcon };

package/tab-bar/Component.js

@@ -11,18 +11,22 @@ 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","border":"tab-bar__border_1naag"};
+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"};
 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/tab-bar/components/tab/Component.js

@@ -3,34 +3,38 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var cn = require('classnames');
-var coreComponentsBadge = require('../../../badge');
+var coreComponentsIndicator = require('../../../indicator');
 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","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"};
+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"};
 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/tab-bar/components/tab/index.css

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

package/tab-bar/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/tab-bar/consts.js

@@ -0,0 +1,13 @@
+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/tab-bar/cssm/Component.js

@@ -15,13 +15,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/tab-bar/cssm/components/tab/Component.js

@@ -3,8 +3,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var cn = require('classnames');
-var coreComponentsBadge = require('../../../../badge/cssm');
+var coreComponentsIndicator = require('../../../../indicator/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 }; }
@@ -15,21 +16,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/tab-bar/cssm/components/tab/index.module.css

@@ -1,6 +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-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/tab-bar/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/tab-bar/cssm/consts.js

@@ -0,0 +1,13 @@
+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/tab-bar/cssm/index.module.css

@@ -1,7 +1,8 @@
 :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/tab-bar/cssm/types.d.ts

@@ -1,5 +1,5 @@
 import { AllHTMLAttributes, ElementType, ForwardRefExoticComponent, HTMLAttributes, ReactElement, ReactNode, RefAttributes } from 'react';
-import { BadgeProps } from "../../badge";
+import { IndicatorProps } from "../../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 };