@ozen-ui/kit 0.0.1

package/__inner__/cjs/components/Table/components/index.d.ts

@@ -0,0 +1,7 @@
+export * from './TableHead';
+export * from './TableBody';
+export * from './TableRow';
+export * from './TableCell';
+export * from './TableContainer';
+export * from './TableCaption';
+export * from './TableFoot';

package/__inner__/cjs/components/Table/components/index.js

@@ -0,0 +1,10 @@
+"use strict";
+exports.__esModule = true;
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./TableHead"), exports);
+tslib_1.__exportStar(require("./TableBody"), exports);
+tslib_1.__exportStar(require("./TableRow"), exports);
+tslib_1.__exportStar(require("./TableCell"), exports);
+tslib_1.__exportStar(require("./TableContainer"), exports);
+tslib_1.__exportStar(require("./TableCaption"), exports);
+tslib_1.__exportStar(require("./TableFoot"), exports);

package/__inner__/cjs/components/Table/constants.d.ts

@@ -0,0 +1,6 @@
+export declare const TABLE_DEFAULT_SIZE = "m";
+export declare const TABLE_DEFAULT_DIVIDER = "row";
+export declare const TABLE_DEFAULT_FULL_WIDTH = false;
+export declare const TABLE_DEFAULT_STICKY_HEADER = false;
+export declare const TABLE_DEFAULT_COMPRESSED = false;
+export declare const TABLE_DEFAULT_STRIPED = false;

package/__inner__/cjs/components/Table/constants.js

@@ -0,0 +1,9 @@
+"use strict";
+exports.__esModule = true;
+exports.TABLE_DEFAULT_STRIPED = exports.TABLE_DEFAULT_COMPRESSED = exports.TABLE_DEFAULT_STICKY_HEADER = exports.TABLE_DEFAULT_FULL_WIDTH = exports.TABLE_DEFAULT_DIVIDER = exports.TABLE_DEFAULT_SIZE = void 0;
+exports.TABLE_DEFAULT_SIZE = 'm';
+exports.TABLE_DEFAULT_DIVIDER = 'row';
+exports.TABLE_DEFAULT_FULL_WIDTH = false;
+exports.TABLE_DEFAULT_STICKY_HEADER = false;
+exports.TABLE_DEFAULT_COMPRESSED = false;
+exports.TABLE_DEFAULT_STRIPED = false;

package/__inner__/cjs/components/Table/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Table';
+export * from './components';

package/__inner__/cjs/components/Table/index.js

@@ -0,0 +1,5 @@
+"use strict";
+exports.__esModule = true;
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Table"), exports);
+tslib_1.__exportStar(require("./components"), exports);

package/__inner__/cjs/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__/cjs/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__/cjs/components/Tabs/Tabs.js

@@ -0,0 +1,249 @@
+"use strict";
+exports.__esModule = true;
+exports.Tabs = exports.cnTabs = void 0;
+var tslib_1 = require("tslib");
+require("./Tabs.css");
+var react_1 = tslib_1.__importStar(require("react"));
+var useDebounceCallback_1 = require("../../hooks/useDebounceCallback");
+var useEventListener_1 = require("../../hooks/useEventListener");
+var animateProperty_1 = require("../../utils/animateProperty");
+var classname_1 = require("../../utils/classname");
+var components_1 = require("./components");
+var TabsContext_1 = require("./TabsContext");
+var types_1 = require("./types");
+exports.cnTabs = (0, classname_1.cn)('Tabs');
+exports.Tabs = react_1["default"].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 = tslib_1.__rest(_a, ["children", "value", "onChange", "size", "className", "variant", "disableScrollButtons"]);
+    var tabsListRef = (0, react_1.useRef)(null);
+    var indicatorRef = (0, react_1.useRef)(null);
+    var scrollBoxRef = (0, react_1.useRef)(null);
+    /** Для вычисления размера кнопки */
+    var scrollButtonRef = (0, react_1.useRef)(null);
+    var _f = tslib_1.__read((0, react_1.useState)(false), 2), isMounted = _f[0], setIsMounted = _f[1];
+    var _g = tslib_1.__read((0, react_1.useState)({ translateX: 0, width: 0 }), 2), indicatorStyles = _g[0], setIndicatorStyles = _g[1];
+    var _h = tslib_1.__read((0, react_1.useState)({
+        start: false,
+        end: false
+    }), 2), scrollButtonsActivity = _h[0], setScrollButtonActivity = _h[1];
+    /**
+     * Привязка value дочернего компонента к его индексу
+     * для более точного контроля
+     */
+    var tabsValueToIndex = (0, react_1.useMemo)(function () { return new Map(); }, [children]);
+    /** Children только ноды Табов */
+    var onlyTabsChildren = (0, react_1.useMemo)(function () {
+        return react_1["default"].Children.toArray(children)
+            .filter(function (child) { return react_1["default"].isValidElement(child) && (child === null || child === void 0 ? void 0 : child.type) === components_1.Tab; })
+            .map(function (child, index) {
+            if (!react_1["default"].isValidElement(child))
+                return null;
+            var childValue = child.props.value || index;
+            tabsValueToIndex.set(childValue, index);
+            return react_1["default"].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) {
+            (0, animateProperty_1.animateProperty)('scrollLeft', scrollBoxRef.current, scrollValue);
+        }
+        else {
+            scrollBoxRef.current.scrollLeft = scrollValue;
+        }
+    };
+    var handleKeyDown = (0, react_1.useCallback)(function (e) {
+        var _a, _b;
+        var event = e;
+        var key = event.key;
+        if (!Object.keys(types_1.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 === types_1.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 === types_1.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 = (0, react_1.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 = tslib_1.__read((0, useDebounceCallback_1.useDebounceCallback)(updateIndicatorStyles, 100), 1), debouncedUpdateIndicatorStyles = _j[0];
+    var _k = tslib_1.__read((0, useDebounceCallback_1.useDebounceCallback)(updateScrollButtonsActivity, 100), 1), debouncedUpdateScrollButtonsActivity = _k[0];
+    var _l = tslib_1.__read((0, useDebounceCallback_1.useDebounceCallback)(scrollCorrection, 100), 1), debouncedScrollCorrection = _l[0];
+    var handleChange = (0, react_1.useCallback)(function (e, value) {
+        onChange === null || onChange === void 0 ? void 0 : onChange(e, value);
+    }, [onChange]);
+    /** Мемоизация контекста для исключения лишних перерендеров */
+    var context = (0, react_1.useMemo)(function () { return ({
+        onChange: handleChange,
+        currentValue: value,
+        size: size
+    }); }, [handleChange, value, size]);
+    (0, react_1.useEffect)(function () {
+        if (isMounted) {
+            updateIndicatorStyles();
+            debouncedScrollCorrection();
+        }
+        else {
+            setIsMounted(true);
+            // Обновить стили индикатора без анимации при первом рендере
+            updateIndicatorStyles();
+        }
+    }, [value, isMounted]);
+    (0, react_1.useEffect)(function () {
+        updateScrollButtonsActivity();
+    }, []);
+    (0, react_1.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]);
+    (0, react_1.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();
+        };
+    }, []);
+    (0, useEventListener_1.useEventListener)({
+        eventName: 'resize',
+        handler: function () {
+            debouncedUpdateIndicatorStyles();
+            debouncedUpdateScrollButtonsActivity();
+            debouncedScrollCorrection();
+        }
+    });
+    (0, useEventListener_1.useEventListener)({
+        eventName: 'keydown',
+        handler: handleKeyDown,
+        element: scrollBoxRef
+    });
+    return (react_1["default"].createElement("div", tslib_1.__assign({ className: (0, exports.cnTabs)({}, [className]), ref: ref }, other),
+        isScrollButtonsActive && (react_1["default"].createElement(components_1.ScrollButton, { size: size, className: (0, exports.cnTabs)('ScrollButton'), direction: "left", invisible: !scrollButtonsActivity.start, onClick: handleClickScrollButton('left') })),
+        react_1["default"].createElement("div", { ref: scrollBoxRef, onScroll: updateScrollButtonsActivity, className: (0, exports.cnTabs)('ScrollBox') },
+            react_1["default"].createElement("div", { className: (0, exports.cnTabs)('IndicatorContainer') },
+                react_1["default"].createElement("div", { className: (0, exports.cnTabs)('List'), role: "tablist", ref: tabsListRef },
+                    react_1["default"].createElement(TabsContext_1.TabsContext.Provider, { value: context }, onlyTabsChildren)),
+                isMounted && (react_1["default"].createElement(components_1.TabsIndicator, { ref: indicatorRef, indicatorStyles: indicatorStyles, className: (0, exports.cnTabs)('Indicator') })))),
+        isScrollButtonsActive && (react_1["default"].createElement(components_1.ScrollButton, { size: size, ref: scrollButtonRef, direction: "right", className: (0, exports.cnTabs)('ScrollButton'), invisible: !scrollButtonsActivity.end, onClick: handleClickScrollButton('right') }))));
+});
+exports.Tabs.displayName = 'Tabs';

package/__inner__/cjs/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__/cjs/components/Tabs/TabsContext.js

@@ -0,0 +1,10 @@
+"use strict";
+exports.__esModule = true;
+exports.TabsContext = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+exports.TabsContext = react_1["default"].createContext({});
+// Именованный провайдер
+if (process.env.NODE_ENV !== 'production') {
+    exports.TabsContext.displayName = 'TabsContext';
+}

package/__inner__/cjs/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__/cjs/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__/cjs/components/Tabs/components/ScrollButton/ScrollButton.js

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

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

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

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

@@ -0,0 +1,16 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+exports.__esModule = true;
+exports.ScrollButton = void 0;
+var ScrollButton_1 = require("./ScrollButton");
+__createBinding(exports, ScrollButton_1, "ScrollButton");

package/__inner__/cjs/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__/cjs/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 {};