@salutejs/plasma-new-hope 0.134.1-canary.1374.10632027763.0 → 0.134.1-canary.1411.10630720138.0

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/{horizontal/HorizontalTabItem → 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);

package/styled-components/es/examples/plasma_b2c/components/Tabs/{horizontal/HorizontalTabItem.config.js → TabItem.config.js}

@@ -1,5 +1,5 @@
 import { css } from 'styled-components';
-import { tabsTokens } from '../../../../../components/Tabs';
+import { tabsTokens } from '../../../../components/Tabs';
 export var config = {
   defaults: {
     view: 'default',

package/styled-components/es/examples/plasma_b2c/components/Tabs/TabItem.js

@@ -1,22 +1,5 @@
-var _div;
-var _excluded = ["orientation"];
-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; }
-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 from 'react';
-import { horizontalTabItemConfig } from '../../../../components/Tabs';
+import { tabItemConfig } from '../../../../components/Tabs';
 import { component, mergeConfig } from '../../../../engines';
-import { config } from './horizontal/HorizontalTabItem.config';
-var mergedHorizontalTabItemConfig = /*#__PURE__*/mergeConfig(horizontalTabItemConfig, config);
-var HorizontalTabItem = /*#__PURE__*/component(mergedHorizontalTabItemConfig);
-export var TabItem = function TabItem(_ref) {
-  var _ref$orientation = _ref.orientation,
-    orientation = _ref$orientation === void 0 ? 'horizontal' : _ref$orientation,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  if (orientation === 'vertical') {
-    return _div || (_div = /*#__PURE__*/React.createElement("div", null, "to be implemented"));
-  }
-  return /*#__PURE__*/React.createElement(HorizontalTabItem, _extends({
-    orientation: orientation
-  }, rest));
-};
+import { config } from './TabItem.config';
+var mergedConfig = /*#__PURE__*/mergeConfig(tabItemConfig, config);
+export var TabItem = /*#__PURE__*/component(mergedConfig);

package/styled-components/es/examples/plasma_b2c/components/Tabs/{horizontal/HorizontalTabs.config.js → Tabs.config.js}

@@ -1,5 +1,5 @@
 import { css } from 'styled-components';
-import { tabsTokens } from '../../../../../components/Tabs';
+import { tabsTokens } from '../../../../components/Tabs';
 export var config = {
   defaults: {
     view: 'filled',

package/styled-components/es/examples/plasma_b2c/components/Tabs/Tabs.js

@@ -1,21 +1,5 @@
-var _div;
-var _excluded = ["orientation"];
-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; }
-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 from 'react';
-import { horizontalTabsConfig } from '../../../../components/Tabs';
+import { tabsConfig } from '../../../../components/Tabs';
 import { component, mergeConfig } from '../../../../engines';
-import { config } from './horizontal/HorizontalTabs.config';
-var mergedHorizontalTabsConfig = /*#__PURE__*/mergeConfig(horizontalTabsConfig, config);
-var HorizontalTabs = /*#__PURE__*/component(mergedHorizontalTabsConfig);
-export var Tabs = function Tabs(_ref) {
-  var orientation = _ref.orientation,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  if (orientation === 'vertical') {
-    return _div || (_div = /*#__PURE__*/React.createElement("div", null, "to be implemented"));
-  }
-  return /*#__PURE__*/React.createElement(HorizontalTabs, _extends({
-    orientation: orientation
-  }, rest));
-};
+import { config } from './Tabs.config';
+var mergedConfig = /*#__PURE__*/mergeConfig(tabsConfig, config);
+export var Tabs = /*#__PURE__*/component(mergedConfig);

package/styled-components/es/examples/plasma_b2c/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';
 
@@ -55,6 +58,7 @@ const meta: Meta<StoryTabsProps> = {
     component: Tabs,
     decorators: [WithTheme],
     argTypes: {
+        ...argTypesFromConfig(mergeConfig(tabsConfig, config)),
         contentLeft: {
             options: contentLeftOptions,
             control: {

package/styled-components/es/examples/plasma_web/components/Tabs/{horizontal/HorizontalTabItem.config.js → TabItem.config.js}

@@ -1,5 +1,5 @@
 import { css } from 'styled-components';
-import { tabsTokens } from '../../../../../components/Tabs';
+import { tabsTokens } from '../../../../components/Tabs';
 export var config = {
   defaults: {
     view: 'default',

package/styled-components/es/examples/plasma_web/components/Tabs/TabItem.js

@@ -1,22 +1,5 @@
-var _div;
-var _excluded = ["orientation"];
-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; }
-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 from 'react';
-import { horizontalTabItemConfig } from '../../../../components/Tabs';
+import { tabItemConfig } from '../../../../components/Tabs';
 import { component, mergeConfig } from '../../../../engines';
-import { config } from './horizontal/HorizontalTabItem.config';
-var mergedHorizontalTabItemConfig = /*#__PURE__*/mergeConfig(horizontalTabItemConfig, config);
-var HorizontalTabItem = /*#__PURE__*/component(mergedHorizontalTabItemConfig);
-export var TabItem = function TabItem(_ref) {
-  var _ref$orientation = _ref.orientation,
-    orientation = _ref$orientation === void 0 ? 'horizontal' : _ref$orientation,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  if (orientation === 'vertical') {
-    return _div || (_div = /*#__PURE__*/React.createElement("div", null, "to be implemented"));
-  }
-  return /*#__PURE__*/React.createElement(HorizontalTabItem, _extends({
-    orientation: orientation
-  }, rest));
-};
+import { config } from './TabItem.config';
+var mergedConfig = /*#__PURE__*/mergeConfig(tabItemConfig, config);
+export var TabItem = /*#__PURE__*/component(mergedConfig);

package/styled-components/es/examples/plasma_web/components/Tabs/{horizontal/HorizontalTabs.config.js → Tabs.config.js}

@@ -1,5 +1,5 @@
 import { css } from 'styled-components';
-import { tabsTokens } from '../../../../../components/Tabs';
+import { tabsTokens } from '../../../../components/Tabs';
 export var config = {
   defaults: {
     view: 'filled',

package/styled-components/es/examples/plasma_web/components/Tabs/Tabs.js

@@ -1,21 +1,5 @@
-var _div;
-var _excluded = ["orientation"];
-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; }
-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 from 'react';
-import { horizontalTabsConfig } from '../../../../components/Tabs';
+import { tabsConfig } from '../../../../components/Tabs';
 import { component, mergeConfig } from '../../../../engines';
-import { config } from './horizontal/HorizontalTabs.config';
-var mergedHorizontalTabsConfig = /*#__PURE__*/mergeConfig(horizontalTabsConfig, config);
-var HorizontalTabs = /*#__PURE__*/component(mergedHorizontalTabsConfig);
-export var Tabs = function Tabs(_ref) {
-  var orientation = _ref.orientation,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  if (orientation === 'vertical') {
-    return _div || (_div = /*#__PURE__*/React.createElement("div", null, "to be implemented"));
-  }
-  return /*#__PURE__*/React.createElement(HorizontalTabs, _extends({
-    orientation: orientation
-  }, rest));
-};
+import { config } from './Tabs.config';
+var mergedConfig = /*#__PURE__*/mergeConfig(tabsConfig, config);
+export var Tabs = /*#__PURE__*/component(mergedConfig);

package/styled-components/es/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';
 
@@ -55,6 +58,7 @@ const meta: Meta<StoryTabsProps> = {
     component: Tabs,
     decorators: [WithTheme],
     argTypes: {
+        ...argTypesFromConfig(mergeConfig(tabsConfig, config)),
         contentLeft: {
             options: contentLeftOptions,
             control: {

package/types/components/Tabs/createTabsController.d.ts

@@ -1,7 +1,6 @@
 import React, { ForwardRefExoticComponent, RefAttributes } from 'react';
-import { TabsProps } from './Tabs.types';
-import { TabItemProps } from './TabItem.types';
-export declare type TabsControllerProps = TabsProps & {
+import { TabsProps, TabItemProps } from '.';
+export interface TabsControllerProps extends TabsProps {
     items: Array<{
         label: string;
     } & TabItemProps>;
@@ -9,7 +8,7 @@ export declare type TabsControllerProps = TabsProps & {
     onIndexChange: (index: number) => void;
     children?: never;
     autoscroll?: boolean;
-};
+}
 /**
  * @deprecated
  * Используйте Tabs, TabItem, указав параметры index, itemIndex, onIndexChange

package/types/components/Tabs/createTabsController.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createTabsController.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/createTabsController.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAc,yBAAyB,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEpF,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,oBAAY,mBAAmB,GAAG,SAAS,GAAG;IAC1C,KAAK,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,GAAG,YAAY,CAAC,CAAC;IAC/C,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAEF;;;;;;GAMG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,cAAc,EAAE,CAAC,SAAS,mBAAmB,EACxF,aAAa,EAAE,yBAAyB,CAAC,SAAS,GAAG,aAAa,CAAC,cAAc,CAAC,CAAC,EACnF,aAAa,EAAE,yBAAyB,CAAC,YAAY,GAAG,aAAa,CAAC,cAAc,CAAC,CAAC,sFA2BzF"}
+{"version":3,"file":"createTabsController.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/createTabsController.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAc,yBAAyB,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEpF,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,GAAG,CAAC;AAE5C,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IAClD,KAAK,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,GAAG,YAAY,CAAC,CAAC;IAC/C,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB;AAED;;;;;;GAMG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,cAAc,EAAE,CAAC,SAAS,mBAAmB,EACxF,aAAa,EAAE,yBAAyB,CAAC,SAAS,GAAG,aAAa,CAAC,cAAc,CAAC,CAAC,EACnF,aAAa,EAAE,yBAAyB,CAAC,YAAY,GAAG,aAAa,CAAC,cAAc,CAAC,CAAC,sFAwBzF"}

package/types/components/Tabs/index.d.ts

@@ -1,9 +1,9 @@
-export { horizontalTabsRoot, horizontalTabsConfig } from './ui/horizontal/HorizontalTabs/HorizontalTabs';
-export { horizontalTabItemRoot, horizontalTabItemConfig } from './ui/horizontal/HorizontalTabItem/HorizontalTabItem';
+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';
 export type { TabsControllerProps } from './createTabsController';
-export type { TabsProps } from './Tabs.types';
-export type { TabItemProps } from './TabItem.types';
+export type { TabsProps } from './ui/Tabs/Tabs.types';
+export type { TabItemProps } from './ui/TabItem/TabItem.types';
 //# sourceMappingURL=index.d.ts.map

package/types/components/Tabs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,MAAM,+CAA+C,CAAC;AACzG,OAAO,EAAE,qBAAqB,EAAE,uBAAuB,EAAE,MAAM,qDAAqD,CAAC;AACrH,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,UAAU,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,YAAY,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAClE,YAAY,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,YAAY,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAClE,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,UAAU,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,YAAY,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAClE,YAAY,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACtD,YAAY,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC"}

package/types/components/Tabs/ui/TabItem/TabItem.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import { RootProps } from '../../../../engines';
+import { TabItemProps } from './TabItem.types';
+export declare const tabItemRoot: (Root: RootProps<HTMLDivElement, TabItemProps>) => React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & import("../../../../types").AsProps<any> & import("./TabItem.types").CustomTabItemProps & React.RefAttributes<HTMLDivElement>>;
+export declare const tabItemConfig: {
+    name: string;
+    tag: string;
+    layout: (Root: RootProps<HTMLDivElement, TabItemProps>) => React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & import("../../../../types").AsProps<any> & import("./TabItem.types").CustomTabItemProps & React.RefAttributes<HTMLDivElement>>;
+    base: import("@linaria/core").LinariaClassName;
+    variations: {
+        size: {
+            css: import("@linaria/core").LinariaClassName;
+        };
+        view: {
+            css: import("@linaria/core").LinariaClassName;
+        };
+        disabled: {
+            css: import("@linaria/core").LinariaClassName;
+            attrs: boolean;
+        };
+        pilled: {
+            css: import("@linaria/core").LinariaClassName;
+        };
+    };
+    defaults: {
+        view: string;
+    };
+};
+//# sourceMappingURL=TabItem.d.ts.map

package/types/components/Tabs/ui/TabItem/TabItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabItem.d.ts","sourceRoot":"","sources":["../../../../../src/components/Tabs/ui/TabItem/TabItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiE,MAAM,OAAO,CAAC;AAGtF,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAShD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAG/C,eAAO,MAAM,WAAW,SAAU,UAAU,cAAc,EAAE,YAAY,CAAC,mNAuGnE,CAAC;AAEP,eAAO,MAAM,aAAa;;;mBAzGQ,UAAU,cAAc,EAAE,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;CAgIxE,CAAC"}

package/types/components/Tabs/ui/{horizontal/HorizontalTabItem/HorizontalTabItem.styles.d.ts → TabItem/TabItem.styles.d.ts}

@@ -3,4 +3,4 @@ export declare const base: import("@linaria/core").LinariaClassName;
 export declare const StyledContent: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const RightContent: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const LeftContent: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-//# sourceMappingURL=HorizontalTabItem.styles.d.ts.map
+//# sourceMappingURL=TabItem.styles.d.ts.map

package/types/components/Tabs/ui/TabItem/TabItem.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabItem.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Tabs/ui/TabItem/TabItem.styles.ts"],"names":[],"mappings":";AAMA,eAAO,MAAM,IAAI,0CAqChB,CAAC;AAEF,eAAO,MAAM,aAAa,qKAKzB,CAAC;AAEF,eAAO,MAAM,YAAY,qKAOxB,CAAC;AAEF,eAAO,MAAM,WAAW,qKAOvB,CAAC"}

package/types/components/Tabs/{TabItem.types.d.ts → ui/TabItem/TabItem.types.d.ts}

@@ -1,6 +1,11 @@
 import type { ButtonHTMLAttributes, ReactNode } from 'react';
-import type { AsProps } from '../../types';
-export interface BaseTabItemProps extends ButtonHTMLAttributes<HTMLButtonElement>, AsProps {
+import { AsProps } from '../../../../types';
+export declare type CustomTabItemProps = {
+    /**
+     * Активен ли TabItem
+     * @deprecated Используйте свойство `selected`
+     */
+    isActive?: boolean;
     /**
      * Выбран ли TabItem
      */
@@ -10,59 +15,40 @@ export interface BaseTabItemProps extends ButtonHTMLAttributes<HTMLButtonElement
      * @default false
      */
     disabled?: boolean;
-    /**
-     * Контент справа
-     */
-    contentRight?: ReactNode;
-    /**
-     * Callback, необходимый для клавиатурной навигации
-     */
-    onIndexChange?: (index: number) => void;
-    /**
-     * Индекс TabItem внутри Tabs - необходим для клавиатурной навигации
-     */
-    itemIndex?: number;
-    /**
-     * Активен ли TabItem
-     * @deprecated Используйте свойство `selected`
-     */
-    isActive?: boolean;
-}
-export declare type CustomHorizontalTabItemProps = {
-    /**
-     * Расположение табов
-     */
-    orientation?: 'horizontal';
     /**
      * TabItem c округлым border-radius
      * @default false
      */
     pilled?: boolean;
+    /**
+     * Фон TabItem меняется с анимацией
+     * @default true
+     */
+    animated?: boolean;
     /**
      * Контент слева
      */
     contentLeft?: ReactNode;
     /**
-     * Фон TabItem меняется с анимацией
-     * @default true
+     * Контент справа
      */
-    animated?: boolean;
+    contentRight?: ReactNode;
     /**
-     * Вид TabItem
+     * Callback, необходимый для клавиатурной навигации
+     */
+    onIndexChange?: (index: number) => void;
+    /**
+     * Индекс TabItem внутри Tabs - необходим для клавиатурной навигации
      */
-    view?: 'clear' | 'secondary' | 'divider' | 'default';
+    itemIndex?: number;
     /**
      * Размер TabItem
      */
-    size?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 's' | 'xs' | 'm' | 'l';
-};
-export declare type CustomVerticalTabItemProps = {
+    size?: string;
     /**
-     * Расположение табов
+     * Вид TabItem
      */
-    orientation: 'vertical';
+    view?: string;
 };
-export declare type HorizontalTabItemProps = BaseTabItemProps & CustomHorizontalTabItemProps;
-export declare type VerticalTabItemProps = BaseTabItemProps & CustomVerticalTabItemProps;
-export declare type TabItemProps = HorizontalTabItemProps | VerticalTabItemProps;
+export declare type TabItemProps = ButtonHTMLAttributes<HTMLButtonElement> & AsProps & CustomTabItemProps;
 //# sourceMappingURL=TabItem.types.d.ts.map

package/types/components/Tabs/ui/TabItem/TabItem.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabItem.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/Tabs/ui/TabItem/TabItem.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAE5C,oBAAY,kBAAkB,GAAG;IAC7B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,oBAAY,YAAY,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,GAAG,OAAO,GAAG,kBAAkB,CAAC"}

package/types/components/Tabs/ui/TabItem/variations/_disabled/base.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"base.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/Tabs/ui/TabItem/variations/_disabled/base.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,IAAI,0CAchB,CAAC"}

package/types/components/Tabs/ui/TabItem/variations/_pilled/base.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"base.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/Tabs/ui/TabItem/variations/_pilled/base.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,IAAI,0CAOhB,CAAC"}

package/types/components/Tabs/ui/TabItem/variations/_size/base.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"base.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/Tabs/ui/TabItem/variations/_size/base.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,IAAI,0CAahB,CAAC"}

package/types/components/Tabs/ui/TabItem/variations/_view/base.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"base.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/Tabs/ui/TabItem/variations/_view/base.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,IAAI,0CAuDhB,CAAC"}

package/types/components/Tabs/ui/Tabs/Tabs.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import type { RootProps } from '../../../../engines/types';
+import type { TabsProps } from './Tabs.types';
+export declare const tabsRoot: (Root: RootProps<HTMLDivElement, TabsProps>) => React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & import("../../../../types").AsProps<any> & import("./Tabs.types").CustomTabsProps & React.RefAttributes<HTMLDivElement>>;
+export declare const tabsConfig: {
+    name: string;
+    tag: string;
+    layout: (Root: RootProps<HTMLDivElement, TabsProps>) => React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & import("../../../../types").AsProps<any> & import("./Tabs.types").CustomTabsProps & React.RefAttributes<HTMLDivElement>>;
+    base: import("@linaria/core").LinariaClassName;
+    variations: {
+        size: {
+            css: import("@linaria/core").LinariaClassName;
+        };
+        view: {
+            css: import("@linaria/core").LinariaClassName;
+        };
+        disabled: {
+            css: import("@linaria/core").LinariaClassName;
+            attrs: boolean;
+        };
+        stretch: {
+            css: import("@linaria/core").LinariaClassName;
+            attrs: boolean;
+        };
+        pilled: {
+            css: import("@linaria/core").LinariaClassName;
+        };
+    };
+    defaults: {
+        view: string;
+        size: string;
+    };
+};
+//# sourceMappingURL=Tabs.d.ts.map

package/types/components/Tabs/ui/Tabs/Tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../../../src/components/Tabs/ui/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuF,MAAM,OAAO,CAAC;AAI5G,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAY3D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAS9C,eAAO,MAAM,QAAQ,SAAU,UAAU,cAAc,EAAE,SAAS,CAAC,oMA6M7D,CAAC;AAEP,eAAO,MAAM,UAAU;;;mBA/MQ,UAAU,cAAc,EAAE,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;CA2OlE,CAAC"}