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

package/tab-bar/esm/Component.js

@@ -3,21 +3,26 @@ import React, { forwardRef, Children, cloneElement } from 'react';
 import cn from 'classnames';
 import { getDataTestId } from '../../shared/esm';
 import { Tab } from './components/tab/Component.js';
-import '../../badge/esm';
+import '../../indicator/esm';
 import '../../typography/esm';
+import './consts.js';
 
-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 = 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/tab-bar/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 '../../../../badge/esm';
+import { Indicator } from '../../../../indicator/esm';
 import { Typography } from '../../../../typography/esm';
+import { INDICATOR_BORDER_COLOR, INDICATOR_BG_COLOR } from '../../consts.js';
 
-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 = 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/tab-bar/esm/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/esm/components/tab/index.js

@@ -2,5 +2,6 @@ export { Tab } from './Component.js';
 import 'tslib';
 import 'react';
 import 'classnames';
-import '../../../../badge/esm';
+import '../../../../indicator/esm';
 import '../../../../typography/esm';
+import '../../consts.js';

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

@@ -0,0 +1,10 @@
+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)',
+};
+
+export { INDICATOR_BG_COLOR, INDICATOR_BORDER_COLOR };

package/tab-bar/esm/index.css

@@ -1,8 +1,9 @@
 /* hash: 1gvx2 */
 :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 {
@@ -16,17 +17,18 @@
 } :root {
 } :root {
 } :root {
-} :root {
-    --tab-bar-bg-color: var(--color-light-base-bg-primary);
 } .tab-bar__component_1naag {
     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;
-} .tab-bar__border_1naag {
-    box-shadow: 0 -1px 0 0 var(--color-light-neutral-300);
+    transition: box-shadow 0.2s ease
+} .tab-bar__component_1naag.tab-bar__modal-bg-primary_1naag {
+        background-color: var(--color-light-base-bg-primary);
+    } .tab-bar__component_1naag.tab-bar__modal-bg-alt-primary_1naag {
+        background-color: var(--color-light-base-bg-alt-primary);
+    } .tab-bar__border_1naag {
+    box-shadow: 0 -1px 0 0 var(--color-light-neutral-translucent-300);
 }

package/tab-bar/esm/index.js

@@ -4,5 +4,6 @@ import 'react';
 import 'classnames';
 import '../../shared/esm';
 import './components/tab/Component.js';
-import '../../badge/esm';
+import '../../indicator/esm';
 import '../../typography/esm';
+import './consts.js';

package/tab-bar/esm/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 };

package/tab-bar/index.css

@@ -1,8 +1,9 @@
 /* hash: 1gvx2 */
 :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 {
@@ -16,17 +17,18 @@
 } :root {
 } :root {
 } :root {
-} :root {
-    --tab-bar-bg-color: var(--color-light-base-bg-primary);
 } .tab-bar__component_1naag {
     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;
-} .tab-bar__border_1naag {
-    box-shadow: 0 -1px 0 0 var(--color-light-neutral-300);
+    transition: box-shadow 0.2s ease
+} .tab-bar__component_1naag.tab-bar__modal-bg-primary_1naag {
+        background-color: var(--color-light-base-bg-primary);
+    } .tab-bar__component_1naag.tab-bar__modal-bg-alt-primary_1naag {
+        background-color: var(--color-light-base-bg-alt-primary);
+    } .tab-bar__border_1naag {
+    box-shadow: 0 -1px 0 0 var(--color-light-neutral-translucent-300);
 }

package/tab-bar/modern/Component.js

@@ -2,18 +2,23 @@ import React, { forwardRef, Children, cloneElement } from 'react';
 import cn from 'classnames';
 import { getDataTestId } from '../../shared/modern';
 import { Tab } from './components/tab/Component.js';
-import '../../badge/modern';
+import '../../indicator/modern';
 import '../../typography/modern';
+import './consts.js';
 
-const styles = {"component":"tab-bar__component_1naag","border":"tab-bar__border_1naag"};
+const 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');
 
-const TabBarComponent = forwardRef(({ children, className, selectedId, border, dataTestId, tabClassNames, onChange, ...restProps }, ref) => {
+const TabBarComponent = forwardRef(({ children, className, selectedId, border, dataTestId, tabClassNames, onChange, accentColor = 'primary', bgColor = 'modal-bg-primary', ...restProps }, ref) => {
     if (Children.count(children) > 5) {
         // eslint-disable-next-line no-console
         console.error('Компонент TabBar не может содержать больше 5 табов');
     }
-    return (React.createElement("nav", { "data-test-id": dataTestId, ...restProps, ref: ref, className: cn(styles.component, className, { [styles.border]: border }) }, Children.map(children, (tab) => cloneElement(tab, {
+    return (React.createElement("nav", { "data-test-id": dataTestId, ...restProps, ref: ref, className: cn(styles.component, styles[bgColor], className, {
+            [styles.border]: border,
+        }) }, Children.map(children, (tab) => cloneElement(tab, {
+        bgColor,
+        accentColor,
         selected: tab.props.id === selectedId,
         onChange,
         tabClassNames,

package/tab-bar/modern/components/tab/Component.js

@@ -1,26 +1,30 @@
 import React, { forwardRef, isValidElement, cloneElement } from 'react';
 import cn from 'classnames';
-import { Badge } from '../../../../badge/modern';
+import { Indicator } from '../../../../indicator/modern';
 import { Typography } from '../../../../typography/modern';
+import { INDICATOR_BORDER_COLOR, INDICATOR_BG_COLOR } from '../../consts.js';
 
-const 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"};
+const 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');
 
-const TabComponent = forwardRef(({ showIndicator, indicatorProps, label, icon, id, selected, onChange, onClick, tabClassNames = {}, dataTestId, className, labelClassName, selectedClassName, iconClassName, href, Component = href ? 'a' : 'button', ...restProps }, ref) => {
+const TabComponent = forwardRef(({ showIndicator, indicatorProps, label, icon, id, selected, onChange, onClick, tabClassNames = {}, dataTestId, className, labelClassName, selectedClassName, iconClassName, href, Component = href ? 'a' : 'button', accentColor = 'primary', bgColor = 'modal-bg-primary', ...restProps }, ref) => {
     const handleClick = (event) => {
         onChange?.(id);
         onClick?.(event);
     };
     const { className: commonClassName, labelClassName: commonLabelClassName, selectedClassName: commonSelectedClassName, iconClassName: commonIconClassName, } = tabClassNames;
     return (React.createElement(Component, { "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, {
-            [styles.selected]: selected,
+            [styles[accentColor]]: selected,
         }), onClick: handleClick },
         React.createElement("div", { className: cn(styles.icon, commonIconClassName, iconClassName) }, isValidElement(icon) ? cloneElement(icon, { selected }) : icon),
         React.createElement(Typography.Text, { weight: 'medium', view: 'secondary-small', className: cn(styles.label, commonLabelClassName, labelClassName, {
                 [styles.labelSelected]: selected,
             }) }, isValidElement(label) ? cloneElement(label, { selected }) : label),
         showIndicator && (React.createElement("div", { className: styles.indicator },
-            React.createElement(Badge, { visibleIconOutline: true, ...indicatorProps, view: 'count' })))));
+            React.createElement(Indicator, { ...indicatorProps, height: indicatorProps?.value ? 16 : undefined, border: {
+                    width: 2,
+                    color: INDICATOR_BORDER_COLOR[bgColor],
+                }, backgroundColor: INDICATOR_BG_COLOR[accentColor] })))));
 });
 const Tab = TabComponent;
 

package/tab-bar/modern/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/modern/components/tab/index.js

@@ -1,5 +1,6 @@
 export { Tab } from './Component.js';
 import 'react';
 import 'classnames';
-import '../../../../badge/modern';
+import '../../../../indicator/modern';
 import '../../../../typography/modern';
+import '../../consts.js';

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

@@ -0,0 +1,10 @@
+const INDICATOR_BORDER_COLOR = {
+    'modal-bg-primary': 'var(--color-light-base-bg-primary)',
+    'modal-bg-alt-primary': 'var(--color-light-base-bg-alt-primary)',
+};
+const INDICATOR_BG_COLOR = {
+    primary: 'var(--color-light-accent-primary)',
+    secondary: 'var(--color-light-accent-secondary)',
+};
+
+export { INDICATOR_BG_COLOR, INDICATOR_BORDER_COLOR };

package/tab-bar/modern/index.css

@@ -1,8 +1,9 @@
 /* hash: 1gvx2 */
 :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 {
@@ -16,17 +17,18 @@
 } :root {
 } :root {
 } :root {
-} :root {
-    --tab-bar-bg-color: var(--color-light-base-bg-primary);
 } .tab-bar__component_1naag {
     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;
-} .tab-bar__border_1naag {
-    box-shadow: 0 -1px 0 0 var(--color-light-neutral-300);
+    transition: box-shadow 0.2s ease
+} .tab-bar__component_1naag.tab-bar__modal-bg-primary_1naag {
+        background-color: var(--color-light-base-bg-primary);
+    } .tab-bar__component_1naag.tab-bar__modal-bg-alt-primary_1naag {
+        background-color: var(--color-light-base-bg-alt-primary);
+    } .tab-bar__border_1naag {
+    box-shadow: 0 -1px 0 0 var(--color-light-neutral-translucent-300);
 }

package/tab-bar/modern/index.js

@@ -3,5 +3,6 @@ import 'react';
 import 'classnames';
 import '../../shared/modern';
 import './components/tab/Component.js';
-import '../../badge/modern';
+import '../../indicator/modern';
 import '../../typography/modern';
+import './consts.js';

package/tab-bar/modern/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 };

package/tab-bar/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 };

package/themes/click.css

@@ -1637,12 +1637,6 @@
     --toast-plate-action-margin: 0;
     /* theme */
     --list-item-margin: var(--gap-m);
-    /* theme */
-    --skeleton-default-color: transparent;
-    --skeleton-backdrop-filter: blur(20px);
-    --skeleton-gradient-animation-display: none;
-    --skeleton-bg-animation-display: block;
-    --skeleton-bg-animation-color: var(--color-light-graphic-quaternary);
     --dropzone-active-cursor: pointer;
     --bottom-sheet-header-border-bottom: none;
     --bottom-sheet-footer-border-top: none;