@ozen-ui/kit 0.0.1

package/__inner__/esm/components/Tabs/Tabs.css

@@ -0,0 +1,39 @@
+.Tabs {
+  position: relative;
+  display: flex;
+  align-items: center;
+  inline-size: 100%;
+}
+
+.Tabs-List {
+  display: flex;
+}
+
+.Tabs-IndicatorContainer {
+  position: relative;
+}
+
+.Tabs-ScrollBox {
+  inline-size: 100%;
+  overflow-y: scroll;
+  display: flex;
+  scrollbar-width: none;
+}
+
+.Tabs-ScrollBox::-webkit-scrollbar {
+    display: none;
+  }
+
+.Tabs-Indicator {
+  position: absolute;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  block-size: 2px;
+  z-index: var(--z-index-absolute);
+  background: var(--color-border-action);
+  border-start-start-radius: 2px;
+  border-start-end-radius: 2px;
+  transform-origin: left;
+  transition: inline-size var(--transition-slow), transform var(--transition-slow),
+    inset-inline-start var(--transition-slow);
+}

package/__inner__/esm/components/Tabs/Tabs.d.ts

@@ -0,0 +1,5 @@
+import './Tabs.css';
+import React from 'react';
+import type { TabsProps } from './types';
+export declare const cnTabs: import("@bem-react/classname").ClassNameFormatter;
+export declare const Tabs: React.FC<TabsProps>;

package/__inner__/esm/components/Tabs/Tabs.js

@@ -0,0 +1,246 @@
+import { __assign, __read, __rest } from "tslib";
+import './Tabs.css';
+import React, { useState, useCallback, useMemo, useEffect, useRef, } from 'react';
+import { useDebounceCallback } from '../../hooks/useDebounceCallback';
+import { useEventListener } from '../../hooks/useEventListener';
+import { animateProperty } from '../../utils/animateProperty';
+import { cn } from '../../utils/classname';
+import { TabsIndicator, ScrollButton, Tab } from './components';
+import { TabsContext } from './TabsContext';
+import { ControlKeys } from './types';
+export var cnTabs = cn('Tabs');
+export var Tabs = React.forwardRef(function (_a, ref) {
+    var _b, _c;
+    var children = _a.children, value = _a.value, onChange = _a.onChange, _d = _a.size, size = _d === void 0 ? 'm' : _d, className = _a.className, _e = _a.variant, variant = _e === void 0 ? 'default' : _e, disableScrollButtons = _a.disableScrollButtons, other = __rest(_a, ["children", "value", "onChange", "size", "className", "variant", "disableScrollButtons"]);
+    var tabsListRef = useRef(null);
+    var indicatorRef = useRef(null);
+    var scrollBoxRef = useRef(null);
+    /** Для вычисления размера кнопки */
+    var scrollButtonRef = useRef(null);
+    var _f = __read(useState(false), 2), isMounted = _f[0], setIsMounted = _f[1];
+    var _g = __read(useState({ translateX: 0, width: 0 }), 2), indicatorStyles = _g[0], setIndicatorStyles = _g[1];
+    var _h = __read(useState({
+        start: false,
+        end: false
+    }), 2), scrollButtonsActivity = _h[0], setScrollButtonActivity = _h[1];
+    /**
+     * Привязка value дочернего компонента к его индексу
+     * для более точного контроля
+     */
+    var tabsValueToIndex = useMemo(function () { return new Map(); }, [children]);
+    /** Children только ноды Табов */
+    var onlyTabsChildren = useMemo(function () {
+        return React.Children.toArray(children)
+            .filter(function (child) { return React.isValidElement(child) && (child === null || child === void 0 ? void 0 : child.type) === Tab; })
+            .map(function (child, index) {
+            if (!React.isValidElement(child))
+                return null;
+            var childValue = child.props.value || index;
+            tabsValueToIndex.set(childValue, index);
+            return React.cloneElement(child, { value: childValue });
+        });
+    }, [children]);
+    var isScrollButtonsActive = variant === 'scrollable' &&
+        !disableScrollButtons &&
+        tabsListRef.current &&
+        scrollBoxRef.current &&
+        ((_b = tabsListRef.current) === null || _b === void 0 ? void 0 : _b.clientWidth) > ((_c = scrollBoxRef.current) === null || _c === void 0 ? void 0 : _c.clientWidth);
+    var getTabsMeta = function () {
+        var scrollBoxNode = scrollBoxRef.current;
+        var tabsListNode = tabsListRef.current;
+        var currentChildIndex = tabsValueToIndex.get(value);
+        var activeTabNode = tabsListNode === null || tabsListNode === void 0 ? void 0 : tabsListNode.children[currentChildIndex];
+        var tabsListMeta = null;
+        var scrollBoxMeta = null;
+        var activeTabMeta = null;
+        if (tabsListNode) {
+            tabsListMeta = tabsListNode.getBoundingClientRect();
+        }
+        if (activeTabNode) {
+            activeTabMeta = activeTabNode.getBoundingClientRect();
+        }
+        if (scrollBoxNode) {
+            var tabsRect = scrollBoxNode.getBoundingClientRect();
+            scrollBoxMeta = {
+                scrollLeft: scrollBoxNode.scrollLeft,
+                left: tabsRect.left,
+                right: tabsRect.right
+            };
+        }
+        return { tabsListMeta: tabsListMeta, activeTabMeta: activeTabMeta, scrollBoxMeta: scrollBoxMeta };
+    };
+    /**
+     * Обновляет активность кнопок скоролла в
+     * зависимости от размеров оберток и значения скролла
+     * */
+    var updateScrollButtonsActivity = function () {
+        var _a = getTabsMeta(), scrollBoxMeta = _a.scrollBoxMeta, tabsListMeta = _a.tabsListMeta;
+        if (!scrollBoxMeta || !tabsListMeta)
+            return;
+        var scrollLeft = scrollBoxMeta.scrollLeft;
+        var isStartButtonActive = scrollLeft > 0;
+        var isEndButtonActive = tabsListMeta.right - scrollBoxMeta.right > 1;
+        setScrollButtonActivity(function (prevState) {
+            var start = prevState.start, end = prevState.end;
+            if (isStartButtonActive !== start || isEndButtonActive !== end) {
+                return { start: isStartButtonActive, end: isEndButtonActive };
+            }
+            return prevState;
+        });
+    };
+    var updateIndicatorStyles = function () {
+        var _a = getTabsMeta(), tabsListMeta = _a.tabsListMeta, activeTabMeta = _a.activeTabMeta;
+        if (!tabsListMeta || !activeTabMeta)
+            return;
+        var translateX = activeTabMeta.left - tabsListMeta.left;
+        var width = activeTabMeta.width;
+        setIndicatorStyles({
+            translateX: translateX,
+            width: width
+        });
+    };
+    /** Скроллит в нужную позицию */
+    var scroll = function (scrollValue, animationOptions) {
+        if (animationOptions === void 0) { animationOptions = { animate: true }; }
+        var animate = animationOptions.animate;
+        if (!scrollBoxRef.current)
+            return;
+        if (animate) {
+            animateProperty('scrollLeft', scrollBoxRef.current, scrollValue);
+        }
+        else {
+            scrollBoxRef.current.scrollLeft = scrollValue;
+        }
+    };
+    var handleKeyDown = useCallback(function (e) {
+        var _a, _b;
+        var event = e;
+        var key = event.key;
+        if (!Object.keys(ControlKeys).includes(key))
+            return;
+        // Убирает скролл на стрелки
+        e.preventDefault();
+        var focusedChild = document.activeElement;
+        var tabsListNode = tabsListRef.current;
+        if ((focusedChild === null || focusedChild === void 0 ? void 0 : focusedChild.parentElement) !== tabsListNode || !tabsListNode) {
+            return;
+        }
+        var tabsListChildNodes = Array.from(tabsListNode === null || tabsListNode === void 0 ? void 0 : tabsListNode.children).filter(function (el) { return !el.className.includes('disabled'); });
+        var focusedChildIndex = tabsListChildNodes.indexOf(focusedChild);
+        if (key === ControlKeys.ArrowLeft) {
+            var prevElementIndex = focusedChildIndex === 0
+                ? tabsListChildNodes.length - 1
+                : focusedChildIndex - 1;
+            (_a = tabsListChildNodes === null || tabsListChildNodes === void 0 ? void 0 : tabsListChildNodes[prevElementIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        if (key === ControlKeys.ArrowRight) {
+            var nextElementIndex = focusedChildIndex === tabsListChildNodes.length - 1
+                ? 0
+                : focusedChildIndex + 1;
+            (_b = tabsListChildNodes === null || tabsListChildNodes === void 0 ? void 0 : tabsListChildNodes[nextElementIndex]) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+    }, []);
+    var handleClickScrollButton = useCallback(function (direction) { return function () {
+        var scrollBoxNode = scrollBoxRef.current;
+        if (!scrollBoxNode)
+            return;
+        if (direction === 'right') {
+            scroll(scrollBoxNode.scrollLeft + scrollBoxNode.clientWidth);
+        }
+        if (direction === 'left') {
+            scroll(scrollBoxNode.scrollLeft - scrollBoxNode.clientWidth);
+        }
+    }; }, []);
+    /** Корректирует скролл в зависимости от позиции выбранного таба */
+    var scrollCorrection = function () {
+        var _a;
+        var _b = getTabsMeta(), scrollBoxMeta = _b.scrollBoxMeta, activeTabMeta = _b.activeTabMeta;
+        var buttonWidth = ((_a = scrollButtonRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) || 0;
+        if (!scrollBoxMeta || !activeTabMeta)
+            return;
+        if (activeTabMeta.left - buttonWidth < scrollBoxMeta.left) {
+            // Если выбранный таб слева от видимой области
+            var nextScrollLeft = scrollBoxMeta.scrollLeft + (activeTabMeta.left - scrollBoxMeta.left);
+            scroll(nextScrollLeft - buttonWidth);
+        }
+        else if (activeTabMeta.right + buttonWidth > scrollBoxMeta.right) {
+            // Если выбранный таб справа от видимой области
+            var nextScrollLeft = scrollBoxMeta.scrollLeft +
+                (activeTabMeta.right - scrollBoxMeta.right);
+            scroll(nextScrollLeft + buttonWidth);
+        }
+    };
+    var _j = __read(useDebounceCallback(updateIndicatorStyles, 100), 1), debouncedUpdateIndicatorStyles = _j[0];
+    var _k = __read(useDebounceCallback(updateScrollButtonsActivity, 100), 1), debouncedUpdateScrollButtonsActivity = _k[0];
+    var _l = __read(useDebounceCallback(scrollCorrection, 100), 1), debouncedScrollCorrection = _l[0];
+    var handleChange = useCallback(function (e, value) {
+        onChange === null || onChange === void 0 ? void 0 : onChange(e, value);
+    }, [onChange]);
+    /** Мемоизация контекста для исключения лишних перерендеров */
+    var context = useMemo(function () { return ({
+        onChange: handleChange,
+        currentValue: value,
+        size: size
+    }); }, [handleChange, value, size]);
+    useEffect(function () {
+        if (isMounted) {
+            updateIndicatorStyles();
+            debouncedScrollCorrection();
+        }
+        else {
+            setIsMounted(true);
+            // Обновить стили индикатора без анимации при первом рендере
+            updateIndicatorStyles();
+        }
+    }, [value, isMounted]);
+    useEffect(function () {
+        updateScrollButtonsActivity();
+    }, []);
+    useEffect(function () {
+        var _a;
+        var resizeObserver;
+        if (typeof ResizeObserver !== 'undefined') {
+            /** При изменении размера самого таба */
+            resizeObserver = new ResizeObserver(debouncedUpdateIndicatorStyles);
+            Array.from(((_a = tabsListRef === null || tabsListRef === void 0 ? void 0 : tabsListRef.current) === null || _a === void 0 ? void 0 : _a.children) || []).forEach(function (child) {
+                resizeObserver.observe(child);
+            });
+        }
+        return function () {
+            resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
+        };
+    }, [onlyTabsChildren]);
+    useEffect(function () {
+        var resizeObserver;
+        if (typeof ResizeObserver !== 'undefined' && scrollBoxRef.current) {
+            /** При изменении размера обертки для скролла */
+            resizeObserver = new ResizeObserver(debouncedUpdateScrollButtonsActivity);
+            resizeObserver.observe(scrollBoxRef.current);
+        }
+        return function () {
+            resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
+        };
+    }, []);
+    useEventListener({
+        eventName: 'resize',
+        handler: function () {
+            debouncedUpdateIndicatorStyles();
+            debouncedUpdateScrollButtonsActivity();
+            debouncedScrollCorrection();
+        }
+    });
+    useEventListener({
+        eventName: 'keydown',
+        handler: handleKeyDown,
+        element: scrollBoxRef
+    });
+    return (React.createElement("div", __assign({ className: cnTabs({}, [className]), ref: ref }, other),
+        isScrollButtonsActive && (React.createElement(ScrollButton, { size: size, className: cnTabs('ScrollButton'), direction: "left", invisible: !scrollButtonsActivity.start, onClick: handleClickScrollButton('left') })),
+        React.createElement("div", { ref: scrollBoxRef, onScroll: updateScrollButtonsActivity, className: cnTabs('ScrollBox') },
+            React.createElement("div", { className: cnTabs('IndicatorContainer') },
+                React.createElement("div", { className: cnTabs('List'), role: "tablist", ref: tabsListRef },
+                    React.createElement(TabsContext.Provider, { value: context }, onlyTabsChildren)),
+                isMounted && (React.createElement(TabsIndicator, { ref: indicatorRef, indicatorStyles: indicatorStyles, className: cnTabs('Indicator') })))),
+        isScrollButtonsActive && (React.createElement(ScrollButton, { size: size, ref: scrollButtonRef, direction: "right", className: cnTabs('ScrollButton'), invisible: !scrollButtonsActivity.end, onClick: handleClickScrollButton('right') }))));
+});
+Tabs.displayName = 'Tabs';

package/__inner__/esm/components/Tabs/TabsContext.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { TabsContextValue } from './types';
+export declare const TabsContext: React.Context<Partial<TabsContextValue>>;

package/__inner__/esm/components/Tabs/TabsContext.js

@@ -0,0 +1,6 @@
+import React from 'react';
+export var TabsContext = React.createContext({});
+// Именованный провайдер
+if (process.env.NODE_ENV !== 'production') {
+    TabsContext.displayName = 'TabsContext';
+}

package/__inner__/esm/components/Tabs/components/ScrollButton/ScrollButton.css

@@ -0,0 +1,53 @@
+.ScrollButton {
+    position: absolute;
+    display: inline-flex;
+    align-items: center;
+    padding: 12px;
+    box-sizing: border-box;
+    z-index: 2;
+    border: none;
+    cursor: pointer;
+    color: var(--color-content-primary);
+    box-shadow: var(--shadow-m);
+    border-radius: 4px; 
+    background-color: var(--color-background-main);
+    transition: opacity var(--transition-default), box-shadow var(--transition-default);
+}
+
+    .ScrollButton_direction_left {
+        inset-inline-start: 0;
+    }
+
+    .ScrollButton_direction_right {
+        inset-inline-end: 0;
+    }
+
+    .ScrollButton_size_m, .ScrollButton_size_l {
+            padding: 12px;
+        }
+
+    .ScrollButton_size_s, .ScrollButton_size_xs {
+            padding: 8px;
+        }
+
+    .ScrollButton:focus {
+        outline: 0;
+        box-shadow: var(--shadow-outline-focused);
+    }
+
+    .ScrollButton:focus:not(:focus-visible) {
+        box-shadow: var(--shadow-m);
+    }
+
+    .ScrollButton:hover {
+        box-shadow: var(--shadow-l);
+    }
+
+    .ScrollButton:active {
+        box-shadow: var(--shadow-s);
+    }
+
+    .ScrollButton_invisible {
+        pointer-events: none;
+        opacity: 0;
+    }

package/__inner__/esm/components/Tabs/components/ScrollButton/ScrollButton.d.ts

@@ -0,0 +1,35 @@
+import './ScrollButton.css';
+import React from 'react';
+import type { Ref, ButtonHTMLAttributes } from 'react';
+import type { TabsSizeVariant } from '../../types';
+export declare const scrollButtonDirectionVariant: readonly ["left", "right"];
+export type ScrollButtonDirectionVariant = (typeof scrollButtonDirectionVariant)[number];
+type ButtonElProps = ButtonHTMLAttributes<HTMLButtonElement>;
+interface ScrollButtonProps extends ButtonElProps {
+    direction: ScrollButtonDirectionVariant;
+    invisible: boolean;
+    children?: never;
+    size?: TabsSizeVariant;
+    ref?: Ref<HTMLButtonElement>;
+}
+export declare const cnScrollButton: import("@bem-react/classname").ClassNameFormatter;
+export declare const iconByDirection: {
+    left: React.FC<React.SVGProps<SVGSVGElement> & {
+        color?: string | undefined;
+        ref?: React.Ref<SVGSVGElement> | undefined;
+    } & {
+        size?: import("@ozen-ui/icons").IconSize | undefined;
+    }>;
+    right: React.FC<React.SVGProps<SVGSVGElement> & {
+        color?: string | undefined;
+        ref?: React.Ref<SVGSVGElement> | undefined;
+    } & {
+        size?: import("@ozen-ui/icons").IconSize | undefined;
+    }>;
+};
+export declare const ariaLabelByDirection: {
+    left: string;
+    right: string;
+};
+export declare const ScrollButton: React.FC<ScrollButtonProps>;
+export {};

package/__inner__/esm/components/Tabs/components/ScrollButton/ScrollButton.js

@@ -0,0 +1,24 @@
+import { __assign, __rest } from "tslib";
+import './ScrollButton.css';
+import React, { useMemo } from 'react';
+import { ChevronLeftIcon, ChevronRightIcon } from '@ozen-ui/icons';
+import { cn } from '../../../../utils/classname';
+export var scrollButtonDirectionVariant = ['left', 'right'];
+export var cnScrollButton = cn('ScrollButton');
+export var iconByDirection = {
+    left: ChevronLeftIcon,
+    right: ChevronRightIcon
+};
+export var ariaLabelByDirection = {
+    left: 'Прокрутить вкладки влево',
+    right: 'Прокрутить вкладки вправо'
+};
+export var ScrollButton = React.forwardRef(function (_a, ref) {
+    var direction = _a.direction, invisible = _a.invisible, className = _a.className, _b = _a.size, size = _b === void 0 ? 'm' : _b, other = __rest(_a, ["direction", "invisible", "className", "size"]);
+    var ariaLabel = useMemo(function () { return ariaLabelByDirection[direction]; }, [direction]);
+    var Icon = useMemo(function () { return iconByDirection[direction]; }, [direction]);
+    var tabIndex = invisible ? -1 : 0;
+    return (React.createElement("button", __assign({ className: cnScrollButton({ invisible: invisible, direction: direction, size: size }, [className]), tabIndex: tabIndex, "aria-label": ariaLabel, ref: ref }, other),
+        React.createElement(Icon, { size: "s" })));
+});
+ScrollButton.displayName = 'ScrollButton';

package/__inner__/esm/components/Tabs/components/ScrollButton/index.d.ts

@@ -0,0 +1 @@
+export { ScrollButton } from './ScrollButton';

package/__inner__/esm/components/Tabs/components/ScrollButton/index.js

@@ -0,0 +1 @@
+export { ScrollButton } from './ScrollButton';

package/__inner__/esm/components/Tabs/components/Tab/Tab.css

@@ -0,0 +1,129 @@
+/* stylelint-disable */
+.Tab {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  max-inline-size: 360px;
+  min-inline-size: 90px;
+  cursor: pointer;
+  border-radius: var(--border-radius-xs);
+  color: var(--color-content-secondary);
+  font-style: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  background: transparent;
+  transition: var(--transition-default);
+  gap: var(--space-s);
+  border: none;
+}
+.Tab:focus {
+    outline: 0;
+    box-shadow: inset var(--shadow-outline-focused);
+    position: relative;
+    z-index: var(--z-index-absolute);
+  }
+.Tab:focus:not(:focus-visible) {
+    box-shadow: none;
+  }
+.Tab:hover,
+  .Tab:active,
+  .Tab:focus,
+  .Tab_active {
+    color: var(--color-content-primary);
+  }
+.Tab_active {
+    cursor: auto;
+    border-radius: var(--border-radius-xs) var(--border-radius-xs) 0 0;
+  }
+.Tab > svg {
+    flex-shrink: 0;
+  }
+.Tab-Label {
+    color: inherit;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+.Tab-Label_size_2xs {
+      font: var(--typography-text-2xs-font);
+      letter-spacing: var(--typography-text-2xs-letter_spacing, 0);
+      text-transform: var(--typography-text-2xs-text_transform, none);
+    }
+.Tab-Label_size_xs {
+      font: var(--typography-text-xs-font);
+      letter-spacing: var(--typography-text-xs-letter_spacing, 0);
+      text-transform: var(--typography-text-xs-text_transform, none);
+    }
+.Tab-Label_size_s {
+      font: var(--typography-text-s-font);
+      letter-spacing: var(--typography-text-s-letter_spacing, 0);
+      text-transform: var(--typography-text-s-text_transform, none);
+    }
+.Tab-Label_size_m {
+      font: var(--typography-text-m-font);
+      letter-spacing: var(--typography-text-m-letter_spacing, 0);
+      text-transform: var(--typography-text-m-text_transform, none);
+    }
+.Tab-Label_size_l {
+      font: var(--typography-text-l-font);
+      letter-spacing: var(--typography-text-l-letter_spacing, 0);
+      text-transform: var(--typography-text-l-text_transform, none);
+    }
+.Tab_multiline .Tab-Label {
+      white-space: normal;
+    }
+.Tab_multiline .Tab-Label_size_xs {
+        font: var(--typography-text-2xs-font);
+        letter-spacing: var(--typography-text-2xs-letter_spacing, 0);
+        text-transform: var(--typography-text-2xs-text_transform, none);
+      }
+.Tab_multiline .Tab-Label_size_s {
+        font: var(--typography-text-xs-font);
+        letter-spacing: var(--typography-text-xs-letter_spacing, 0);
+        text-transform: var(--typography-text-xs-text_transform, none);
+      }
+.Tab_multiline .Tab-Label_size_m {
+        font: var(--typography-text-s-font);
+        letter-spacing: var(--typography-text-s-letter_spacing, 0);
+        text-transform: var(--typography-text-s-text_transform, none);
+      }
+.Tab_multiline .Tab-Label_size_l {
+        font: var(--typography-text-m-font);
+        letter-spacing: var(--typography-text-m-letter_spacing, 0);
+        text-transform: var(--typography-text-m-text_transform, none);
+      }
+.Tab_size_xs {
+    padding: 12px;
+  }
+.Tab_size_s {
+    padding: 14px 16px;
+  }
+.Tab_size_m {
+    padding: 16px 20px;
+  }
+.Tab_size_l {
+    padding: 18px 24px;
+  }
+.Tab_onlyIcon.Tab_size_2xs {
+    padding: 8px;
+  }
+.Tab_onlyIcon.Tab_size_xs {
+    padding: 12px;
+  }
+.Tab_onlyIcon.Tab_size_s {
+    padding: 14px;
+  }
+.Tab_onlyIcon.Tab_size_m {
+    padding: 16px;
+  }
+.Tab_onlyIcon.Tab_size_l {
+    padding: 18px;
+  }
+.Tab_disabled {
+  pointer-events: none;
+  color: var(--color-content-disabled);
+}
+.Tab_disabled .Tab-Label {
+    color: inherit;
+  }

package/__inner__/esm/components/Tabs/components/Tab/Tab.d.ts

@@ -0,0 +1,37 @@
+import './Tab.css';
+import React from 'react';
+import type { ButtonHTMLAttributes, AnchorHTMLAttributes, Ref } from 'react';
+import type { IconProps, IconSize } from '@ozen-ui/icons';
+export type TabIconComponent = React.FC<IconProps & {
+    size?: IconSize;
+}>;
+type TabBaseProps = {
+    children?: never;
+    /** Название таба, также является контентом */
+    label?: string;
+    /** Значение для переключения */
+    value?: string | number;
+    /** Многострочный лейбл */
+    multiline?: boolean;
+    /** Неактивный */
+    disabled?: boolean;
+    /** Иконка слева от лейбла */
+    iconLeft?: TabIconComponent;
+    /** Иконка справа от лейбла */
+    iconRight?: TabIconComponent;
+    /** Ссылка на HTML элемент */
+    ref?: Ref<HTMLButtonElement | HTMLAnchorElement>;
+};
+type LinkElProps = AnchorHTMLAttributes<HTMLAnchorElement>;
+type ButtonElProps = ButtonHTMLAttributes<HTMLButtonElement>;
+type ButtonProps = {
+    href?: never;
+} & ButtonElProps;
+type LinkProps = {
+    href: string;
+} & LinkElProps;
+export type TabProps = TabBaseProps & (ButtonProps | LinkProps);
+export declare const cnTab: import("@bem-react/classname").ClassNameFormatter;
+export declare const TabComponent: React.FC<TabProps>;
+export declare const Tab: React.NamedExoticComponent<TabProps>;
+export {};

package/__inner__/esm/components/Tabs/components/Tab/Tab.js

@@ -0,0 +1,47 @@
+import { __assign, __rest } from "tslib";
+import './Tab.css';
+import React, { useContext } from 'react';
+import { cn } from '../../../../utils/classname';
+import { getIconSizeToFormElement } from '../../../../utils/getIconSizeToFormElement';
+import { TabsContext } from '../../TabsContext';
+export var cnTab = cn('Tab');
+export var TabComponent = React.forwardRef(function (_a, ref) {
+    var label = _a.label, disabled = _a.disabled, multiline = _a.multiline, className = _a.className, IconLeft = _a.iconLeft, IconRight = _a.iconRight, value = _a.value, href = _a.href, onClick = _a.onClick, other = __rest(_a, ["label", "disabled", "multiline", "className", "iconLeft", "iconRight", "value", "href", "onClick"]);
+    var _b = useContext(TabsContext), _c = _b.size, size = _c === void 0 ? 'm' : _c, currentValue = _b.currentValue, onChange = _b.onChange;
+    var iconSize = getIconSizeToFormElement(size);
+    var isActive = value === currentValue;
+    var isValidValue = !!value || value === 0;
+    var handleClick = function (event) {
+        if (!isActive && isValidValue) {
+            onChange === null || onChange === void 0 ? void 0 : onChange(event, value);
+        }
+        if (!disabled)
+            onClick === null || onClick === void 0 ? void 0 : onClick(event);
+    };
+    var commonProps = {
+        className: cnTab({
+            size: size,
+            disabled: disabled,
+            onlyIcon: !label,
+            active: isActive,
+            multiline: multiline
+        }, [className]),
+        role: 'tab',
+        'aria-controls': "tab-".concat(value),
+        tabIndex: isActive && !disabled ? 0 : -1,
+        'aria-selected': isActive,
+        onClick: handleClick
+    };
+    if (href) {
+        return (React.createElement("a", __assign({}, commonProps, other, { href: href, ref: ref }),
+            IconLeft && React.createElement(IconLeft, { size: iconSize }),
+            !!label && React.createElement("span", { className: cnTab('Label', { size: size }) }, label),
+            IconRight && React.createElement(IconRight, { size: iconSize })));
+    }
+    return (React.createElement("button", __assign({}, commonProps, (disabled && { tabIndex: -1 }), other, { type: "button", disabled: disabled, ref: ref }),
+        IconLeft && React.createElement(IconLeft, { size: iconSize }),
+        !!label && React.createElement("span", { className: cnTab('Label', { size: size }) }, label),
+        IconRight && React.createElement(IconRight, { size: iconSize })));
+});
+TabComponent.displayName = 'Tab';
+export var Tab = React.memo(TabComponent);

package/__inner__/esm/components/Tabs/components/Tab/index.d.ts

@@ -0,0 +1 @@
+export * from './Tab';

package/__inner__/esm/components/Tabs/components/Tab/index.js

@@ -0,0 +1 @@
+export * from './Tab';

package/__inner__/esm/components/Tabs/components/TabsIndicator/TabsIndicator.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { HTMLAttributes, Ref } from 'react';
+export interface TabsIndicatorProps extends HTMLAttributes<HTMLDivElement> {
+    indicatorStyles: {
+        translateX: number;
+        width: number;
+    };
+    ref?: Ref<HTMLDivElement>;
+}
+export declare const TabsIndicator: React.ForwardRefExoticComponent<Omit<TabsIndicatorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/__inner__/esm/components/Tabs/components/TabsIndicator/TabsIndicator.js

@@ -0,0 +1,11 @@
+import { __assign, __rest } from "tslib";
+import React, { forwardRef } from 'react';
+export var TabsIndicator = forwardRef(function (_a, ref) {
+    var indicatorStyles = _a.indicatorStyles, otherProps = __rest(_a, ["indicatorStyles"]);
+    var translateX = indicatorStyles.translateX, width = indicatorStyles.width;
+    return (React.createElement("div", __assign({ ref: ref, style: {
+            transform: "translateX(".concat(translateX, "px)"),
+            width: width
+        } }, otherProps)));
+});
+TabsIndicator.displayName = 'TabsIndicator';