@alfalab/core-components-tab-bar 1.0.0

package/esm/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/esm/components/tab/index.d.ts

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

package/esm/components/tab/index.js

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

package/esm/index.css

@@ -0,0 +1,30 @@
+/* hash: 1ycka */
+: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 {
+} .tab-bar__component_1tqhl {
+    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;
+} .tab-bar__border_1tqhl {
+    box-shadow: 0 -1px 0 0 var(--color-light-neutral-300);
+}

package/esm/index.d.ts

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

package/esm/index.js

@@ -0,0 +1,8 @@
+export { TabBar } from './Component.js';
+import 'tslib';
+import 'react';
+import 'classnames';
+import '@alfalab/core-components-shared/esm';
+import './components/tab/Component.js';
+import '@alfalab/core-components-badge/esm';
+import '@alfalab/core-components-typography/esm';

package/esm/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/esm/types.js

@@ -0,0 +1 @@
+

package/index.css

@@ -0,0 +1,30 @@
+/* hash: 1ycka */
+: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 {
+} .tab-bar__component_1tqhl {
+    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;
+} .tab-bar__border_1tqhl {
+    box-shadow: 0 -1px 0 0 var(--color-light-neutral-300);
+}

package/index.d.ts

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

package/index.js

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

package/modern/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/modern/Component.js

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

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

@@ -0,0 +1,27 @@
+import React, { forwardRef, isValidElement, cloneElement } from 'react';
+import cn from 'classnames';
+import { Badge } from '@alfalab/core-components-badge/modern';
+import { Typography } from '@alfalab/core-components-typography/modern';
+
+const 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')
+
+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 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,
+        }), 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' })))));
+});
+const Tab = TabComponent;
+
+export { Tab };

package/modern/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/modern/components/tab/index.d.ts

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

package/modern/components/tab/index.js

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

package/modern/index.css

@@ -0,0 +1,30 @@
+/* hash: 1ycka */
+: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 {
+} .tab-bar__component_1tqhl {
+    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;
+} .tab-bar__border_1tqhl {
+    box-shadow: 0 -1px 0 0 var(--color-light-neutral-300);
+}

package/modern/index.d.ts

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

package/modern/index.js

@@ -0,0 +1,7 @@
+export { TabBar } from './Component.js';
+import 'react';
+import 'classnames';
+import '@alfalab/core-components-shared/modern';
+import './components/tab/Component.js';
+import '@alfalab/core-components-badge/modern';
+import '@alfalab/core-components-typography/modern';

package/modern/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/modern/types.js

@@ -0,0 +1 @@
+

package/package.json

@@ -0,0 +1,24 @@
+{
+    "name": "@alfalab/core-components-tab-bar",
+    "version": "1.0.0",
+    "description": "",
+    "keywords": [],
+    "license": "MIT",
+    "main": "index.js",
+    "module": "./esm/index.js",
+    "publishConfig": {
+        "access": "public",
+        "directory": "dist"
+    },
+    "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+    },
+    "dependencies": {
+        "@alfalab/core-components-typography": "^4.2.1",
+        "@alfalab/core-components-badge": "^5.4.0",
+        "@alfalab/core-components-shared": "^0.8.0",
+        "classnames": "^2.3.1",
+        "tslib": "^2.4.0"
+    }
+}

package/src/Component.tsx

@@ -0,0 +1,50 @@
+import React, { Children, cloneElement, forwardRef } from 'react';
+import cn from 'classnames';
+
+import { getDataTestId } from '@alfalab/core-components-shared';
+
+import { Tab } from './components/tab';
+import { TabBarProps } from './types';
+
+import styles from './index.module.css';
+
+const TabBarComponent = forwardRef<HTMLDivElement, TabBarProps>(
+    (
+        {
+            children,
+            className,
+            selectedId,
+            border,
+            dataTestId,
+            tabClassNames,
+            onChange,
+            ...restProps
+        },
+        ref,
+    ) => {
+        if (Children.count(children) > 5) {
+            // eslint-disable-next-line no-console
+            console.error('Компонент TabBar не может содержать больше 5 табов');
+        }
+
+        return (
+            <nav
+                data-test-id={dataTestId}
+                {...restProps}
+                ref={ref}
+                className={cn(styles.component, className, { [styles.border]: border })}
+            >
+                {Children.map(children, (tab) =>
+                    cloneElement(tab, {
+                        selected: tab.props.id === selectedId,
+                        onChange,
+                        tabClassNames,
+                        dataTestId: getDataTestId(dataTestId, 'tab'),
+                    }),
+                )}
+            </nav>
+        );
+    },
+);
+
+export const TabBar = Object.assign(TabBarComponent, { Tab });