@alfalab/core-components-tab-bar 1.0.0

package/Component.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import React from 'react';
+import { TabBarProps } from "./types";
+declare const TabBar: React.ForwardRefExoticComponent<TabBarProps & React.RefAttributes<HTMLDivElement>> & {
+    Tab: React.ForwardRefExoticComponent<import("./types").TabProps & React.RefAttributes<HTMLElement>>;
+};
+export { TabBar };

package/Component.js

@@ -0,0 +1,39 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var cn = require('classnames');
+var coreComponentsShared = require('@alfalab/core-components-shared');
+var components_tab_Component = require('./components/tab/Component.js');
+require('@alfalab/core-components-badge');
+require('@alfalab/core-components-typography');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+
+var styles = {"component":"tab-bar__component_1tqhl","border":"tab-bar__border_1tqhl"};
+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"]);
+    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.cloneElement(tab, {
+            selected: tab.props.id === selectedId,
+            onChange: onChange,
+            tabClassNames: tabClassNames,
+            dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'tab'),
+        });
+    })));
+});
+var TabBar = Object.assign(TabBarComponent, { Tab: components_tab_Component.Tab });
+
+exports.TabBar = TabBar;

package/components/tab/Component.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import React from 'react';
+import { TabProps } from "../../types";
+declare const Tab: React.ForwardRefExoticComponent<TabProps & React.RefAttributes<HTMLElement>>;
+export { Tab };

package/components/tab/Component.js

@@ -0,0 +1,39 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var cn = require('classnames');
+var coreComponentsBadge = require('@alfalab/core-components-badge');
+var coreComponentsTypography = require('@alfalab/core-components-typography');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+
+var styles = {"component":"tab-bar__component_1cyxn","selected":"tab-bar__selected_1cyxn","icon":"tab-bar__icon_1cyxn","label":"tab-bar__label_1cyxn","labelSelected":"tab-bar__labelSelected_1cyxn","indicator":"tab-bar__indicator_1cyxn"};
+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 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)), 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' }))))));
+});
+var Tab = TabComponent;
+
+exports.Tab = Tab;

package/components/tab/index.css

@@ -0,0 +1,71 @@
+/* hash: 8qv7e */
+:root {
+} /* deprecated */ :root {
+    --color-light-accent-primary: #ef3124;
+    --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 */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+    --gap-2xs: 4px;
+    --gap-xs: 8px;
+} :root {
+} :root {
+} .tab-bar__component_1cyxn {
+    box-sizing: border-box;
+    background-color: transparent;
+    -webkit-tap-highlight-color: transparent;
+    outline: none;
+    border: 0;
+    margin: 0;
+    box-shadow: none;
+    border-radius: 0;
+    -webkit-user-select: none;
+            user-select: none;
+    vertical-align: middle;
+    appearance: none;
+    text-decoration: none;
+    min-width: 0;
+    cursor: pointer;
+
+    position: relative;
+    display: inline-flex;
+    flex-direction: column;
+    flex: 1 0 0;
+    align-items: center;
+    padding: var(--gap-xs) 0;
+    color: var(--color-light-neutral-translucent-700);
+} .tab-bar__selected_1cyxn {
+    color: var(--color-light-accent-primary);
+} .tab-bar__icon_1cyxn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-grow: 1;
+    width: 100%;
+} .tab-bar__label_1cyxn {
+    -webkit-line-clamp: 1;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    word-break: break-all;
+    flex-shrink: 0;
+
+    color: var(--color-light-text-secondary);
+} .tab-bar__labelSelected_1cyxn {
+    color: inherit;
+} .tab-bar__indicator_1cyxn {
+    position: absolute;
+    top: var(--gap-2xs);
+    left: calc(50% + var(--gap-2xs));
+    height: 16px;
+    min-width: 16px;
+}

package/components/tab/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/components/tab/index.js

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var components_tab_Component = require('./Component.js');
+require('tslib');
+require('react');
+require('classnames');
+require('@alfalab/core-components-badge');
+require('@alfalab/core-components-typography');
+
+
+
+exports.Tab = components_tab_Component.Tab;

package/cssm/Component.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import React from 'react';
+import { TabBarProps } from "./types";
+declare const TabBar: React.ForwardRefExoticComponent<TabBarProps & React.RefAttributes<HTMLDivElement>> & {
+    Tab: React.ForwardRefExoticComponent<import("./types").TabProps & React.RefAttributes<HTMLElement>>;
+};
+export { TabBar };

package/cssm/Component.js

@@ -0,0 +1,39 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var cn = require('classnames');
+var coreComponentsShared = require('@alfalab/core-components-shared/cssm');
+var components_tab_Component = require('./components/tab/Component.js');
+var styles = require('./index.module.css');
+require('@alfalab/core-components-badge/cssm');
+require('@alfalab/core-components-typography/cssm');
+require('./components/tab/index.module.css');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+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"]);
+    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.cloneElement(tab, {
+            selected: tab.props.id === selectedId,
+            onChange: onChange,
+            tabClassNames: tabClassNames,
+            dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'tab'),
+        });
+    })));
+});
+var TabBar = Object.assign(TabBarComponent, { Tab: components_tab_Component.Tab });
+
+exports.TabBar = TabBar;

package/cssm/components/tab/Component.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import React from 'react';
+import { TabProps } from "../../types";
+declare const Tab: React.ForwardRefExoticComponent<TabProps & React.RefAttributes<HTMLElement>>;
+export { Tab };

package/cssm/components/tab/Component.js

@@ -0,0 +1,38 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var cn = require('classnames');
+var coreComponentsBadge = require('@alfalab/core-components-badge/cssm');
+var coreComponentsTypography = require('@alfalab/core-components-typography/cssm');
+var styles = require('./index.module.css');
+
+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__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 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)), 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' }))))));
+});
+var Tab = TabComponent;
+
+exports.Tab = Tab;

package/cssm/components/tab/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/cssm/components/tab/index.js

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

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

@@ -0,0 +1,70 @@
+:root {
+} /* deprecated */ :root {
+    --color-light-accent-primary: #ef3124;
+    --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 */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+    --gap-2xs: 4px;
+    --gap-xs: 8px;
+} :root {
+} :root {
+} .component {
+    box-sizing: border-box;
+    background-color: transparent;
+    -webkit-tap-highlight-color: transparent;
+    outline: none;
+    border: 0;
+    margin: 0;
+    box-shadow: none;
+    border-radius: 0;
+    -webkit-user-select: none;
+            user-select: none;
+    vertical-align: middle;
+    appearance: none;
+    text-decoration: none;
+    min-width: 0;
+    cursor: pointer;
+
+    position: relative;
+    display: inline-flex;
+    flex-direction: column;
+    flex: 1 0 0;
+    align-items: center;
+    padding: var(--gap-xs) 0;
+    color: var(--color-light-neutral-translucent-700);
+} .selected {
+    color: var(--color-light-accent-primary);
+} .icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-grow: 1;
+    width: 100%;
+} .label {
+    -webkit-line-clamp: 1;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    word-break: break-all;
+    flex-shrink: 0;
+
+    color: var(--color-light-text-secondary);
+} .labelSelected {
+    color: inherit;
+} .indicator {
+    position: absolute;
+    top: var(--gap-2xs);
+    left: calc(50% + var(--gap-2xs));
+    height: 16px;
+    min-width: 16px;
+}

package/cssm/index.d.ts

@@ -0,0 +1,2 @@
+export { TabBar } from "./Component";
+export { TabBarProps, TabProps } from "./types";

package/cssm/index.js

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

package/cssm/index.module.css

@@ -0,0 +1,29 @@
+:root {
+} /* deprecated */ :root {
+    --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 */
+} :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 {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+} :root {
+} :root {
+} .component {
+    display: flex;
+    justify-content: center;
+    height: 64px;
+    max-height: 64px;
+    background-color: var(--color-light-base-bg-primary);
+    box-sizing: border-box;
+    overflow: hidden;
+    transition: box-shadow 0.2s ease;
+} .border {
+    box-shadow: 0 -1px 0 0 var(--color-light-neutral-300);
+}

package/cssm/types.d.ts

@@ -0,0 +1,99 @@
+import { AllHTMLAttributes, ElementType, ForwardRefExoticComponent, HTMLAttributes, ReactElement, ReactNode, RefAttributes } from 'react';
+import { BadgeProps } from "@alfalab/core-components-badge";
+type TabElementType = ReactElement<TabProps, ForwardRefExoticComponent<TabProps & RefAttributes<HTMLElement>>>;
+interface TabBarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Идентификатор для систем автоматизированного тестирования.
+     * Для таба используется модификатор -tab
+     */
+    dataTestId?: string;
+    /**
+     * Дополнительные классы для таба.
+     */
+    tabClassNames?: {
+        /**
+         *  Дополнительный класс таба
+         */
+        className?: string;
+        /**
+         * Дополнительный класс таба в выбранном состоянии
+         */
+        selectedClassName?: string;
+        /**
+         * Дополнительный класс подписи
+         */
+        labelClassName?: string;
+        /**
+         * Дополнительный класс враппера иконки
+         */
+        iconClassName?: string;
+    };
+    /**
+     * Список табов
+     */
+    children: TabElementType[];
+    /**
+     * Идентификатор выбранного таба
+     */
+    selectedId?: string;
+    /**
+     * Включает верхний бордер
+     */
+    border?: boolean;
+    /**
+     * Обработчик изменения выбранного таба
+     */
+    onChange?: (id: string) => void;
+}
+type AdditionalTabProps = Record<string, unknown>;
+interface TabProps extends Omit<AllHTMLAttributes<unknown>, 'onChange' | 'label'>, AdditionalTabProps {
+    /**
+     * Кастомный компонент таба.
+     * @default button
+     */
+    Component?: ElementType;
+    /**
+     * Идентификатор таба
+     */
+    id: string;
+    /**
+     *  Лейбл
+     */
+    label: ReactNode;
+    /**
+     * Иконка
+     */
+    icon: ReactNode;
+    /**
+     * Показать индикатор
+     */
+    showIndicator?: boolean;
+    /**
+     * Свойства индикатора
+     */
+    indicatorProps?: Omit<BadgeProps, 'view' | 'visibleColorOutline' | 'size' | 'iconColor' | 'iconUnderlayColor'>;
+    /**
+     *  Дополнительный класс таба
+     */
+    className?: string;
+    /**
+     * Дополнительный класс таба в выбранном состоянии
+     */
+    selectedClassName?: string;
+    /**
+     * Дополнительный класс подписи
+     */
+    labelClassName?: string;
+    /**
+     * Дополнительный класс враппера иконки
+     */
+    iconClassName?: string;
+}
+interface PrivateTabProps extends Pick<TabBarProps, 'tabClassNames' | 'onChange' | 'dataTestId'> {
+    selected: boolean;
+}
+export { TabBarProps, TabProps, PrivateTabProps };

package/cssm/types.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/esm/Component.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import React from 'react';
+import { TabBarProps } from "./types";
+declare const TabBar: React.ForwardRefExoticComponent<TabBarProps & React.RefAttributes<HTMLDivElement>> & {
+    Tab: React.ForwardRefExoticComponent<import("./types").TabProps & React.RefAttributes<HTMLElement>>;
+};
+export { TabBar };

package/esm/Component.js

@@ -0,0 +1,30 @@
+import { __rest, __assign } from 'tslib';
+import React, { forwardRef, Children, cloneElement } from 'react';
+import cn from 'classnames';
+import { getDataTestId } from '@alfalab/core-components-shared/esm';
+import { Tab } from './components/tab/Component.js';
+import '@alfalab/core-components-badge/esm';
+import '@alfalab/core-components-typography/esm';
+
+var styles = {"component":"tab-bar__component_1tqhl","border":"tab-bar__border_1tqhl"};
+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"]);
+    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 cloneElement(tab, {
+            selected: tab.props.id === selectedId,
+            onChange: onChange,
+            tabClassNames: tabClassNames,
+            dataTestId: getDataTestId(dataTestId, 'tab'),
+        });
+    })));
+});
+var TabBar = Object.assign(TabBarComponent, { Tab: Tab });
+
+export { TabBar };

package/esm/components/tab/Component.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import React from 'react';
+import { TabProps } from "../../types";
+declare const Tab: React.ForwardRefExoticComponent<TabProps & React.RefAttributes<HTMLElement>>;
+export { Tab };

package/esm/components/tab/Component.js

@@ -0,0 +1,30 @@
+import { __rest, __assign } from 'tslib';
+import React, { forwardRef, isValidElement, cloneElement } from 'react';
+import cn from 'classnames';
+import { Badge } from '@alfalab/core-components-badge/esm';
+import { Typography } from '@alfalab/core-components-typography/esm';
+
+var styles = {"component":"tab-bar__component_1cyxn","selected":"tab-bar__selected_1cyxn","icon":"tab-bar__icon_1cyxn","label":"tab-bar__label_1cyxn","labelSelected":"tab-bar__labelSelected_1cyxn","indicator":"tab-bar__indicator_1cyxn"};
+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 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)), 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' }))))));
+});
+var Tab = TabComponent;
+
+export { Tab };