@salutejs/plasma-new-hope 0.152.0-canary.1374.11013124158.0 → 0.152.0-canary.1450.11010505842.0

package/styled-components/cjs/examples/plasma_web/components/Tabs/Tabs.stories.tsx

@@ -3,11 +3,14 @@ import type { ComponentProps } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 import { disableProps } from '@salutejs/plasma-sb-utils';
 
-import { WithTheme } from '../../../_helpers';
+import { tabsConfig } from '../../../../components/Tabs';
+import { mergeConfig } from '../../../../engines';
+import { argTypesFromConfig, WithTheme } from '../../../_helpers';
 import { IconMic } from '../../../../components/_Icon';
 import { Dropdown } from '../Dropdown/Dropdown';
 import { Counter } from '../Counter/Counter';
 
+import { config } from './Tabs.config';
 import { Tabs } from './Tabs';
 import { TabItem } from './TabItem';
 
@@ -18,8 +21,8 @@ const headerSizes = ['h5', 'h4', 'h3', 'h2', 'h1'] as const;
 type Size = typeof sizes[number];
 
 type CustomStoryTabsProps = {
-    itemQuantity: number;
     hasDivider: boolean;
+    itemQuantity: number;
     contentLeft: string;
     contentRight: string;
 };
@@ -55,23 +58,26 @@ const meta: Meta<StoryTabsProps> = {
     component: Tabs,
     decorators: [WithTheme],
     argTypes: {
-        ...disableProps([
-            'orientation',
-            'tabItemContentLeft',
-            'pilled',
-            'animated',
-            'view',
-            'as',
-            'forwardedAs',
-            'outsideScroll',
-            'index',
-        ]),
+        ...argTypesFromConfig(mergeConfig(tabsConfig, config)),
+        contentLeft: {
+            options: contentLeftOptions,
+            control: {
+                type: 'select',
+            },
+        },
+        contentRight: {
+            options: contentRightOptions,
+            control: {
+                type: 'select',
+            },
+        },
+        ...disableProps(['itemsNumber', 'pilled', 'animated', 'view']),
     },
 };
 
 export default meta;
 
-const StoryHorizontalDefault = (props: StoryTabsProps) => {
+const StoryDefault = (props: StoryTabsProps) => {
     const {
         disabled,
         itemQuantity,
@@ -85,7 +91,7 @@ const StoryHorizontalDefault = (props: StoryTabsProps) => {
     const [index, setIndex] = useState(0);
 
     return (
-        <Tabs view={hasDivider ? 'divider' : 'clear'} stretch={stretch} disabled={disabled} size={size} index={index}>
+        <Tabs view={hasDivider ? 'divider' : 'clear'} stretch={stretch} disabled={disabled} size={size}>
             {items.map((_, i) => (
                 <TabItem
                     key={`item:${i}`}
@@ -105,7 +111,7 @@ const StoryHorizontalDefault = (props: StoryTabsProps) => {
     );
 };
 
-const StoryHorizontalScroll = (props: StoryTabsProps) => {
+const StoryScroll = (props: StoryTabsProps) => {
     const {
         disabled,
         itemQuantity,
@@ -145,7 +151,7 @@ const StoryHorizontalScroll = (props: StoryTabsProps) => {
     );
 };
 
-const StoryHorizontalShowAll = (props: StoryTabsProps) => {
+const StoryShowAll = (props: StoryTabsProps) => {
     const {
         disabled,
         itemQuantity,
@@ -211,7 +217,7 @@ const StoryHorizontalShowAll = (props: StoryTabsProps) => {
     );
 };
 
-export const HorizontalTabs: StoryObj<StoryTabsProps> = {
+export const Default: StoryObj<StoryTabsProps> = {
     args: {
         size: 'xs',
         disabled: false,
@@ -219,18 +225,6 @@ export const HorizontalTabs: StoryObj<StoryTabsProps> = {
         itemQuantity: 8,
     },
     argTypes: {
-        contentLeft: {
-            options: contentLeftOptions,
-            control: {
-                type: 'select',
-            },
-        },
-        contentRight: {
-            options: contentRightOptions,
-            control: {
-                type: 'select',
-            },
-        },
         clip: {
             options: clips,
             control: {
@@ -248,216 +242,11 @@ export const HorizontalTabs: StoryObj<StoryTabsProps> = {
     render: (args) => {
         switch (args.clip) {
             case 'scroll':
-                return <StoryHorizontalScroll {...args} />;
+                return <StoryScroll {...args} />;
             case 'showAll':
-                return <StoryHorizontalShowAll {...args} />;
+                return <StoryShowAll {...args} />;
             default:
-                return <StoryHorizontalDefault {...args} />;
-        }
-    },
-};
-
-const StoryVerticalDefault = (props: StoryTabsProps) => {
-    const {
-        disabled,
-        itemQuantity,
-        stretch,
-        size,
-        contentLeft: contentLeftOption,
-        contentRight: contentRightOption,
-        hasDivider,
-    } = props;
-    const items = Array(itemQuantity).fill(0);
-    const [index, setIndex] = useState(0);
-
-    return (
-        <div style={{ height: '100vh' }}>
-            <Tabs
-                orientation="vertical"
-                hasDivider={hasDivider}
-                size={size as Size}
-                disabled={disabled}
-                stretch={stretch}
-                contentLeft={getContentLeft(contentLeftOption, size as Size)}
-            >
-                {items.map((_, i) => (
-                    <TabItem
-                        orientation="vertical"
-                        key={`item:${i}`}
-                        view="divider"
-                        selected={i === index}
-                        onClick={() => !disabled && setIndex(i)}
-                        tabIndex={!disabled ? 0 : -1}
-                        size={size as Size}
-                        disabled={disabled}
-                        contentRight={getContentRight(contentRightOption, size as Size)}
-                    >
-                        {`Label${i + 1}`}
-                    </TabItem>
-                ))}
-            </Tabs>
-        </div>
-    );
-};
-
-const StoryVerticalScroll = (props: StoryTabsProps) => {
-    const {
-        disabled,
-        itemQuantity,
-        clip,
-        size,
-        contentLeft: contentLeftOption,
-        contentRight: contentRightOption,
-        hasDivider,
-    } = props;
-    const items = Array(itemQuantity).fill(0);
-    const [index, setIndex] = useState(0);
-
-    return (
-        <div style={{ height: '100vh' }}>
-            <Tabs
-                orientation="vertical"
-                size={size as Size}
-                disabled={disabled}
-                clip={clip}
-                style={{ height: '10rem' }}
-                contentLeft={getContentLeft(contentLeftOption, size as Size)}
-                hasDivider={hasDivider}
-            >
-                {items.map((_, i) => (
-                    <TabItem
-                        orientation="vertical"
-                        key={`item:${i}`}
-                        view="divider"
-                        selected={i === index}
-                        onClick={() => !disabled && setIndex(i)}
-                        tabIndex={!disabled ? 0 : -1}
-                        size={size as Size}
-                        disabled={disabled}
-                        contentRight={getContentRight(contentRightOption, size as Size)}
-                    >
-                        {`Label${i + 1}`}
-                    </TabItem>
-                ))}
-            </Tabs>
-        </div>
-    );
-};
-
-const StoryVerticalShowAll = (props: StoryTabsProps) => {
-    const {
-        disabled,
-        itemQuantity,
-        clip,
-        size,
-        contentLeft: contentLeftOption,
-        contentRight: contentRightOption,
-        hasDivider,
-    } = props;
-    const maxItemQuantity = 3;
-    const items = Array(itemQuantity).fill(0);
-    const [index, setIndex] = useState(0);
-
-    const visibleItems = items.slice(0, maxItemQuantity);
-    const otherItems = items.slice(maxItemQuantity);
-
-    const dropdownItems = otherItems.map((_, i) => {
-        const itemIndex = maxItemQuantity + i;
-
-        return {
-            label: `Label${itemIndex + 1}`,
-            value: itemIndex,
-        };
-    });
-
-    return (
-        <Tabs
-            clip={clip}
-            orientation="vertical"
-            size={size as Size}
-            disabled={disabled}
-            contentLeft={getContentLeft(contentLeftOption, size as Size)}
-            hasDivider={hasDivider}
-        >
-            {visibleItems.map((_, i) => (
-                <TabItem
-                    orientation="vertical"
-                    key={`item:${i}`}
-                    selected={i === index}
-                    onClick={() => !disabled && setIndex(i)}
-                    tabIndex={!disabled ? 0 : -1}
-                    disabled={disabled}
-                    contentRight={getContentRight(contentRightOption, size as Size)}
-                    size={size as Size}
-                >
-                    {`Label${i + 1}`}
-                </TabItem>
-            ))}
-            {dropdownItems.length > 0 && (
-                <Dropdown
-                    size={size as Size}
-                    items={dropdownItems}
-                    onItemSelect={(item) => setIndex(item.value as number)}
-                    placement="right"
-                >
-                    <TabItem
-                        orientation="vertical"
-                        key="item:ShowAll"
-                        tabIndex={!disabled ? 0 : -1}
-                        disabled={disabled}
-                        size={size as Size}
-                    >
-                        ShowAll
-                    </TabItem>
-                </Dropdown>
-            )}
-        </Tabs>
-    );
-};
-
-export const VerticalTabs: StoryObj<StoryTabsProps> = {
-    args: {
-        size: 'xs',
-        disabled: false,
-        hasDivider: true,
-        itemQuantity: 8,
-        orientation: 'vertical',
-    },
-    argTypes: {
-        contentLeft: {
-            options: contentLeftOptions,
-            control: {
-                type: 'select',
-            },
-        },
-        contentRight: {
-            options: contentRightOptions,
-            control: {
-                type: 'select',
-            },
-        },
-        size: {
-            options: sizes,
-            control: {
-                type: 'select',
-            },
-        },
-        clip: {
-            options: clips,
-            control: {
-                type: 'select',
-            },
-            if: { arg: 'stretch', truthy: false },
-        },
-    },
-    render: (args) => {
-        switch (args.clip) {
-            case 'scroll':
-                return <StoryVerticalScroll {...args} />;
-            case 'showAll':
-                return <StoryVerticalShowAll {...args} />;
-            default:
-                return <StoryVerticalDefault {...args} />;
+                return <StoryDefault {...args} />;
         }
     },
 };
@@ -470,13 +259,12 @@ const StoryHeaderTabs = (props: StoryTabsProps) => {
         contentLeft: contentLeftOption,
         contentRight: contentRightOption,
         hasDivider,
-        stretch,
     } = props;
     const items = Array(itemQuantity).fill(0);
     const [index, setIndex] = useState(0);
 
     return (
-        <Tabs view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size} stretch={stretch}>
+        <Tabs view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size}>
             {items.map((_, i) => (
                 <TabItem
                     key={`item:${i}`}
@@ -510,23 +298,6 @@ export const HeaderTabs: StoryObj<StoryTabsProps> = {
                 type: 'select',
             },
         },
-        contentLeft: {
-            options: contentLeftOptions,
-            control: {
-                type: 'select',
-            },
-        },
-        contentRight: {
-            options: contentRightOptions,
-            control: {
-                type: 'select',
-            },
-        },
-        clip: {
-            table: {
-                disable: true,
-            },
-        },
     },
     render: (args) => <StoryHeaderTabs {...args} />,
 };

package/styled-components/es/components/Tabs/Tabs.template-doc.mdx

@@ -56,41 +56,6 @@ export function App() {
 }
 ```
 
-### Расположение табов
-Табы могут быть горизонтальными (по умолчанию) и вертикальными. За это отвечает свойство `orientation`.
-
-```tsx live
-import React, { useState } from 'react';
-import { Tabs, TabItem } from '@salutejs/{{ package }}';
-import { IconClock } from '@salutejs/plasma-icons';
-
-export function App() {
-    const items = Array(8).fill(0);
-    const [index, setIndex] = useState(0);
-
-    return (
-        <div>
-            <Tabs view="divider" orientation="vertical" size="xs" style=\{{ width: '15rem' }}>
-                {items.map((_, i) => (
-                    <TabItem
-                        view="divider"
-                        orientation="vertical"
-                        key={`item:${i}`}
-                        size="xs"
-                        selected={i === index}
-                        tabIndex={0}
-                        contentLeft={<IconClock size="xs" color="inherit" />}
-                        onClick={() => setIndex(i)}
-                    >
-                        {`Label${i + 1}`}
-                    </TabItem>
-                ))}
-            </Tabs>
-        </div>
-    );
-}
-```
-
 ### Пример с прокруткой
 
 ```tsx live

package/styled-components/es/components/Tabs/createTabsController.js

@@ -1,4 +1,4 @@
-var _excluded = ["items", "index", "autoscroll", "onIndexChange", "orientation"],
+var _excluded = ["items", "index", "autoscroll", "onIndexChange"],
   _excluded2 = ["label"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
@@ -18,7 +18,6 @@ export function createTabsController(ListComponent, ItemComponent) {
       index = _ref.index,
       autoscroll = _ref.autoscroll,
       onIndexChange = _ref.onIndexChange,
-      _orientation = _ref.orientation,
       rest = _objectWithoutProperties(_ref, _excluded);
     var disabled = rest.disabled;
     return /*#__PURE__*/React.createElement(ListComponent, _extends({

package/styled-components/es/components/Tabs/index.js

@@ -1,8 +1,5 @@
-export { horizontalTabsRoot, horizontalTabsConfig } from './ui/horizontal/HorizontalTabs/HorizontalTabs';
-export { horizontalTabItemRoot, horizontalTabItemConfig } from './ui/horizontal/HorizontalTabItem/HorizontalTabItem';
-export { verticalTabsRoot, verticalTabsConfig } from './ui/vertical/VerticalTabs/VerticalTabs';
-export { verticalTabItemRoot, verticalTabItemConfig } from './ui/vertical/VerticalTabItem/VerticalTabItem';
-export { VerticalTabsContext } from './ui/vertical/VerticalTabsContext';
+export { tabsRoot, tabsConfig } from './ui/Tabs/Tabs';
+export { tabItemRoot, tabItemConfig } from './ui/TabItem/TabItem';
 export { tokens as tabsTokens } from './tokens';
 export { TabItemRefs, TabsContext } from './TabsContext';
 export { createTabsController } from './createTabsController';

package/styled-components/es/components/Tabs/tokens.js

@@ -10,15 +10,12 @@ export var classes = {
   tabLeftContent: 'tab-item-left-content',
   tabsHasLeftArrow: 'tabs-has-left-arrow',
   tabsHasRightArrow: 'tabs-has-right-arrow',
-  tabsHasTopArrow: 'tabs-has-top-arrow',
-  tabsHasBottomArrow: 'tabs-has-bottom-arrow',
   tabsClipScroll: 'tabs-clip-scroll',
   tabsClipShowAll: 'tabs-clip-show-all'
 };
 export var tokens = {
   disabledOpacity: '--plasma-tabs-disabled-opacity',
   containerWidth: '--plasma-tabs-container-width',
-  containerHeight: '--plasma-tabs-container-height',
   cursor: '--plasma-tabs-cursor',
   color: '--plasma-tabs-color',
   colorHover: '--plasma-tabs-color-hover',

package/styled-components/es/components/Tabs/ui/{horizontal/HorizontalTabItem/HorizontalTabItem.js → TabItem/TabItem.js}

@@ -4,15 +4,15 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React, { forwardRef, useRef, useContext, useEffect, useCallback } from 'react';
 import { useForkRef } from '@salutejs/plasma-core';
-import { classes } from '../../../tokens';
-import { cx } from '../../../../../utils';
-import { TabsContext } from '../../../TabsContext';
+import { classes } from '../../tokens';
+import { cx } from '../../../../utils';
+import { TabsContext } from '../../TabsContext';
 import { base as viewCSS } from './variations/_view/base';
 import { base as sizeCSS } from './variations/_size/base';
 import { base as pilledCSS } from './variations/_pilled/base';
 import { base as disabledCSS } from './variations/_disabled/base';
-import { LeftContent, RightContent, StyledContent, base } from './HorizontalTabItem.styles';
-export var horizontalTabItemRoot = function horizontalTabItemRoot(Root) {
+import { LeftContent, RightContent, StyledContent, base } from './TabItem.styles';
+export var tabItemRoot = function tabItemRoot(Root) {
   return /*#__PURE__*/forwardRef(function (props, outerRef) {
     var size = props.size,
       view = props.view,
@@ -103,10 +103,10 @@ export var horizontalTabItemRoot = function horizontalTabItemRoot(Root) {
     }, contentRight)));
   });
 };
-export var horizontalTabItemConfig = {
-  name: 'HorizontalTabItem',
+export var tabItemConfig = {
+  name: 'TabItem',
   tag: 'button',
-  layout: horizontalTabItemRoot,
+  layout: tabItemRoot,
   base: base,
   variations: {
     size: {

package/styled-components/es/components/Tabs/ui/{horizontal/HorizontalTabItem/HorizontalTabItem.styles.js → TabItem/TabItem.styles.js}

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import { css } from 'styled-components';
-import { addFocus } from '../../../../../mixins';
-import { tokens } from '../../../tokens';
+import { addFocus } from '../../../../mixins';
+import { tokens } from '../../tokens';
 export var base = /*#__PURE__*/css(["position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;align-items:center;gap:var(", ");padding:var(", ",var(", "));appearance:none;border:none;outline:none;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);&:first-child{margin-left:0;}", ";"], tokens.itemContentGap, tokens.itemPaddingClear, tokens.itemPadding, /*#__PURE__*/addFocus({
   outlineSize: '0.063rem',
   outlineOffset: '-0.125rem',
@@ -10,11 +10,11 @@ export var base = /*#__PURE__*/css(["position:relative;display:flex;align-items:
   customFocusRules: /*#__PURE__*/"\n            &.focus-visible:focus,\n            &[data-focus-visible-added] {\n                &::before {\n                    z-index: 1;\n                    outline: none;\n                    box-shadow: 0 0 0 0.063rem var(".concat(tokens.outlineFocusColor, ");\n                }\n            }\n        ")
 }));
 export var StyledContent = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-lremls-0"
+  componentId: "plasma-new-hope__sc-1ngrr4h-0"
 })(["display:inline-block;width:fit-content;padding:0 var(", ",var(", "));"], tokens.itemContentPaddingClear, tokens.itemContentPadding);
 export var RightContent = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-lremls-1"
+  componentId: "plasma-new-hope__sc-1ngrr4h-1"
 })(["display:flex;color:var(", ");&:hover{color:var(", ");}"], tokens.additionalContentColor, tokens.additionalContentHoverColor);
 export var LeftContent = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-lremls-2"
+  componentId: "plasma-new-hope__sc-1ngrr4h-2"
 })(["display:flex;color:inherit;&:hover{color:inherit;}"]);

package/styled-components/es/components/Tabs/ui/{horizontal/HorizontalTabItem → TabItem}/variations/_disabled/base.js

@@ -1,3 +1,3 @@
 import { css } from 'styled-components';
-import { classes, tokens } from '../../../../../tokens';
+import { classes, tokens } from '../../../../tokens';
 export var base = /*#__PURE__*/css(["&[disabled]{cursor:not-allowed;&:hover{color:var(", ");background-color:var(", ");}&.", ":hover{color:var(", ");background-color:var(", ");}}"], tokens.itemColor, tokens.itemBackgroundColor, /*#__PURE__*/String(classes.selectedTabsItem), tokens.itemSelectedColor, tokens.itemSelectedBackgroundColor);

package/styled-components/es/components/Tabs/ui/{horizontal/HorizontalTabItem → TabItem}/variations/_pilled/base.js

@@ -1,3 +1,3 @@
 import { css } from 'styled-components';
-import { classes, tokens } from '../../../../../tokens';
+import { classes, tokens } from '../../../../tokens';
 export var base = /*#__PURE__*/css(["&.", "{--plasma_private-outline-radius:var(", ");border-radius:var(", ");padding:var(", ");}"], /*#__PURE__*/String(classes.tabsPilled), tokens.itemPilledBorderRadius, tokens.itemPilledBorderRadius, tokens.itemPaddingPilled);

package/styled-components/es/components/Tabs/ui/{vertical/VerticalTabItem → TabItem}/variations/_size/base.js

@@ -1,3 +1,3 @@
 import { css } from 'styled-components';
-import { tokens } from '../../../../../tokens';
+import { tokens } from '../../../../tokens';
 export var base = /*#__PURE__*/css(["font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");--plasma_private-outline-radius:var(", ");border-radius:var(", ");width:var(", ");height:var(", ");"], tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.itemBorderRadius, tokens.itemBorderRadius, tokens.itemWidth, tokens.itemHeight);

package/styled-components/es/components/Tabs/ui/{horizontal/HorizontalTabItem → TabItem}/variations/_view/base.js

@@ -1,4 +1,4 @@
 import { css } from 'styled-components';
-import { classes, tokens } from '../../../../../tokens';
-import { RightContent } from '../../HorizontalTabItem.styles';
+import { classes, tokens } from '../../../../tokens';
+import { RightContent } from '../../TabItem.styles';
 export var base = /*#__PURE__*/css(["color:var(", ");background-color:var(", ");margin-left:var(", ",var(", "));&:hover{color:var(", ");background-color:var(", ");", "{color:var(", ");}}&:active{color:var(", ");}&.", "{transition:var(", ");}&.", "{color:var(", ");background-color:var(", ");&:hover{color:var(", ");background-color:var(", ");&::after{background:var(", ");}}", "{color:var(", ");&:hover{color:var(", ");}}&::after{content:'';position:absolute;bottom:0px;left:0;right:0;background:var(", ");height:var(", ");border-radius:1px;}}"], tokens.itemColor, tokens.itemBackgroundColor, tokens.itemMarginLeftFilled, tokens.itemMarginLeft, tokens.itemColorHover, tokens.itemBackgroundColorHover, RightContent, tokens.additionalContentHoverColor, tokens.itemColorActive, /*#__PURE__*/String(classes.tabItemAnimated), tokens.itemBackgroundTransition, /*#__PURE__*/String(classes.selectedTabsItem), tokens.itemSelectedColor, tokens.itemSelectedBackgroundColor, tokens.itemSelectedColorHover, tokens.itemSelectedBackgroundColorHover, tokens.itemSelectedDividerColorHover, RightContent, tokens.additionalContentSelectedColor, tokens.additionalContentSelectedHoverColor, tokens.itemSelectedDividerColor, tokens.itemSelectedDividerHeight);

package/{emotion/es/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js → styled-components/es/components/Tabs/ui/Tabs/Tabs.js}

@@ -10,16 +10,16 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React, { forwardRef, useCallback, useMemo, useState, useEffect, useRef } from 'react';
 import { safeUseId } from '@salutejs/plasma-core';
-import { IconDisclosureLeft, IconDisclosureRight } from '../../../../_Icon';
-import { classes, tokens } from '../../../tokens';
-import { cx } from '../../../../../utils';
-import { TabItemRefs, TabsContext } from '../../../TabsContext';
+import { IconDisclosureLeft, IconDisclosureRight } from '../../../_Icon';
+import { classes, tokens } from '../../tokens';
+import { cx } from '../../../../utils';
+import { TabItemRefs, TabsContext } from '../../TabsContext';
 import { base as sizeCSS } from './variations/_size/base';
 import { base as viewCSS } from './variations/_view/base';
 import { base as disabledCSS } from './variations/_disabled/base';
 import { base as pilledCSS } from './variations/_pilled/base';
 import { base as stretchCSS } from './variations/_stretch/base';
-import { StyledArrow, StyledContent, StyledContentWrapper, base } from './HorizontalTabs.styles';
+import { StyledArrow, StyledContent, StyledContentWrapper, base } from './Tabs.styles';
 var Keys = /*#__PURE__*/function (Keys) {
   Keys[Keys["end"] = 35] = "end";
   Keys[Keys["home"] = 36] = "home";
@@ -27,7 +27,7 @@ var Keys = /*#__PURE__*/function (Keys) {
   Keys[Keys["right"] = 39] = "right";
   return Keys;
 }(Keys || {});
-export var horizontalTabsRoot = function horizontalTabsRoot(Root) {
+export var tabsRoot = function tabsRoot(Root) {
   return /*#__PURE__*/forwardRef(function (props, outerRef) {
     var id = props.id,
       _props$stretch = props.stretch,
@@ -206,10 +206,10 @@ export var horizontalTabsRoot = function horizontalTabsRoot(Root) {
     }, children)), !lastItemVisible && NextButton));
   });
 };
-export var horizontalTabsConfig = {
-  name: 'HorizontalTabs',
+export var tabsConfig = {
+  name: 'Tabs',
   tag: 'div',
-  layout: horizontalTabsRoot,
+  layout: tabsRoot,
   base: base,
   variations: {
     size: {

package/styled-components/es/components/Tabs/ui/{horizontal/HorizontalTabs/HorizontalTabs.styles.js → Tabs/Tabs.styles.js}

@@ -2,17 +2,17 @@ var _templateObject;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import { css } from 'styled-components';
 import styled from 'styled-components';
-import { addFocus } from '../../../../../mixins';
-import { classes, tokens } from '../../../tokens';
+import { addFocus } from '../../../../mixins';
+import { classes, tokens } from '../../tokens';
 export var base = /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n    display: flex;\n    gap: 0.125rem;\n    align-items: center;\n    position: relative;\n"])));
 export var StyledContent = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-1nr0m0h-0"
+  componentId: "plasma-new-hope__sc-1ibkmsl-0"
 })(["display:inline-flex;flex-direction:row;align-items:center;"]);
 export var StyledContentWrapper = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-1nr0m0h-1"
+  componentId: "plasma-new-hope__sc-1ibkmsl-1"
 })(["margin:-0.125rem;padding:0.25rem;box-sizing:content-box;position:relative;height:100%;width:100%;display:flex;align-items:center;&.", "{overflow:scroll;scroll-padding:0.25rem;overscroll-behavior:contain;scrollbar-width:none;::-webkit-scrollbar{display:none;}}&.", "{overflow:visible;}"], classes.tabsClipScroll, classes.tabsClipShowAll);
 export var StyledArrow = /*#__PURE__*/styled.button.withConfig({
-  componentId: "plasma-new-hope__sc-1nr0m0h-2"
+  componentId: "plasma-new-hope__sc-1ibkmsl-2"
 })(["display:flex;cursor:pointer;border:none;background-color:transparent;padding:0;outline:none;", ";&[disabled]{cursor:not-allowed;}--plasma_private-outer-padding:", ";padding-right:", ";padding-left:", ";"], /*#__PURE__*/addFocus({
   outlineSize: '0.063rem',
   outlineOffset: '-0.125rem',

package/styled-components/es/components/Tabs/ui/{horizontal/HorizontalTabs → Tabs}/variations/_disabled/base.js

@@ -1,3 +1,3 @@
 import { css } from 'styled-components';
-import { tokens } from '../../../../../tokens';
+import { tokens } from '../../../../tokens';
 export var base = /*#__PURE__*/css(["opacity:var(", ");"], tokens.disabledOpacity);

package/styled-components/es/components/Tabs/ui/{horizontal/HorizontalTabs → Tabs}/variations/_pilled/base.js

@@ -1,3 +1,3 @@
 import { css } from 'styled-components';
-import { classes, tokens } from '../../../../../tokens';
+import { classes, tokens } from '../../../../tokens';
 export var base = /*#__PURE__*/css(["&.", "{--plasma_private-outline-radius:var(", ");border-radius:var(", ");}"], /*#__PURE__*/String(classes.tabsPilled), tokens.tabsPilledBorderRadius, tokens.tabsPilledBorderRadius);

package/styled-components/es/components/Tabs/ui/{horizontal/HorizontalTabs → Tabs}/variations/_size/base.js

@@ -1,3 +1,3 @@
 import { css } from 'styled-components';
-import { tokens } from '../../../../../tokens';
+import { tokens } from '../../../../tokens';
 export var base = /*#__PURE__*/css(["width:var(", ");height:var(", ");--plasma_private-outline-radius:var(", ");border-radius:var(", ");"], tokens.tabsWidth, tokens.tabsHeight, tokens.tabsBorderRadius, tokens.tabsBorderRadius);

package/styled-components/es/components/Tabs/ui/Tabs/variations/_stretch/base.js

@@ -0,0 +1,4 @@
+import { css } from 'styled-components';
+import { classes } from '../../../../tokens';
+import { StyledContent, StyledContentWrapper } from '../../Tabs.styles';
+export var base = /*#__PURE__*/css(["&.", "{width:100%;", ",", ",", " > button{width:100%;margin-left:0;}}"], classes.tabsStretch, StyledContentWrapper, StyledContent, StyledContent);

package/styled-components/es/components/Tabs/ui/{horizontal/HorizontalTabs → Tabs}/variations/_view/base.js

@@ -1,3 +1,3 @@
 import { css } from 'styled-components';
-import { classes, tokens } from '../../../../../tokens';
+import { classes, tokens } from '../../../../tokens';
 export var base = /*#__PURE__*/css(["background-color:var(", ");&::after{content:'';position:absolute;bottom:0.125rem;left:0.125rem;right:0.125rem;background:var(", ");height:var(", ");border-radius:var(", ");}&.", "{&::after{left:1.5rem;}}&.", "{&::after{right:1.5rem;}}"], tokens.tabsBackgroundColor, tokens.tabsDividerColor, tokens.tabsDividerHeight, tokens.tabsDividerBorderRadius, classes.tabsHasLeftArrow, classes.tabsHasRightArrow);