@salutejs/plasma-new-hope 0.158.0-canary.1464.11126763959.0 → 0.158.1-canary.1374.11139248605.0

package/styled-components/es/components/Slider/components/Double/Double.js

@@ -1,5 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["min", "max", "value", "disabled", "label", "labelContentLeft", "size", "onChangeCommitted", "onChangeTextField", "onBlurTextField", "onKeyDownTextField", "onChange", "ariaLabel", "multipleStepSize", "name"];
+var _excluded = ["min", "max", "value", "disabled", "label", "labelContentLeft", "size", "onChangeCommitted", "onChangeTextField", "onBlurTextField", "onKeyDownTextField", "onChange", "ariaLabel", "multipleStepSize"];
 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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -17,10 +17,9 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { SliderBase } from '../SliderBase/SliderBase';
 import { Handler } from '../../ui';
-import { cx, isNumber, noop } from '../../../../utils';
 import { sizeData } from '../../utils';
+import { cx, isNumber } from '../../../../utils';
 import { classes } from '../../Slider.tokens';
-import { InputHidden } from '../SliderBase/SliderBase.styles';
 import { SliderWrapper, InputsWrapper, Label, LabelContentLeft, LabelWrapper, StyledInput, DoubleWrapper } from './Double.styles';
 function getXCenterHandle(handle) {
   var _handle$parentElement;
@@ -46,7 +45,6 @@ export var DoubleSlider = function DoubleSlider(_ref) {
     ariaLabel = _ref.ariaLabel,
     _ref$multipleStepSize = _ref.multipleStepSize,
     multipleStepSize = _ref$multipleStepSize === void 0 ? 10 : _ref$multipleStepSize,
-    name = _ref.name,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState({
       stepSize: 0,
@@ -82,8 +80,6 @@ export var DoubleSlider = function DoubleSlider(_ref) {
   var secondHandleRef = useRef(null);
   var firstHandleValue = useRef(value[0]);
   var secondHandleValue = useRef(value[1]);
-  var innerRefFirst = useRef(null);
-  var innerRefSecond = useRef(null);
   var stepSize = state.stepSize;
   var hasLabelContent = label || labelContentLeft;
   var firstInputActiveClass = firstInputActive && !disabled ? classes.textFieldActive : undefined;
@@ -310,19 +306,5 @@ export var DoubleSlider = function DoubleSlider(_ref) {
     onChange: onSecondTextfieldChange,
     onBlur: onSecondTextfieldBlur,
     onKeyDown: onTextfieldKeyDown
-  }))), /*#__PURE__*/React.createElement(InputHidden, _extends({
-    name: name,
-    type: "number",
-    datatype: "slider-double",
-    "data-slidertype": "min",
-    value: firstValue,
-    ref: innerRefFirst
-  }, noop)), /*#__PURE__*/React.createElement(InputHidden, _extends({
-    name: name,
-    type: "number",
-    datatype: "slider-double",
-    "data-slidertype": "max",
-    value: secondValue,
-    ref: innerRefSecond
-  }, noop)));
+  }))));
 };

package/styled-components/es/components/Slider/components/Single/Single.js

@@ -1,5 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["min", "max", "value", "disabled", "onChangeCommitted", "onChange", "ariaLabel", "label", "labelContentLeft", "showRangeValues", "showCurrentValue", "hideMinValueDiff", "hideMaxValueDiff", "labelPlacement", "rangeValuesPlacement", "multipleStepSize", "defaultValue", "size", "name"];
+var _excluded = ["min", "max", "value", "disabled", "onChangeCommitted", "onChange", "ariaLabel", "label", "labelContentLeft", "showRangeValues", "showCurrentValue", "hideMinValueDiff", "hideMaxValueDiff", "labelPlacement", "rangeValuesPlacement", "multipleStepSize", "size"];
 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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -18,12 +18,10 @@ import React, { useCallback, useEffect, useState, useRef } from 'react';
 import { SliderBase } from '../SliderBase/SliderBase';
 import { Handler } from '../../ui';
 import { sizeData } from '../../utils';
-import { cx, isNumber, noop } from '../../../../utils';
+import { cx, isNumber } from '../../../../utils';
 import { classes } from '../../Slider.tokens';
-import { InputHidden } from '../SliderBase/SliderBase.styles';
 import { Label, LabelContentLeft, LabelWrapper, SingleWrapper, SliderBaseWrapper, StyledRangeValue } from './Single.styles';
 export var SingleSlider = function SingleSlider(_ref) {
-  var _ref2;
   var min = _ref.min,
     max = _ref.max,
     value = _ref.value,
@@ -43,10 +41,8 @@ export var SingleSlider = function SingleSlider(_ref) {
     rangeValuesPlacement = _ref$rangeValuesPlace === void 0 ? 'outer' : _ref$rangeValuesPlace,
     _ref$multipleStepSize = _ref.multipleStepSize,
     multipleStepSize = _ref$multipleStepSize === void 0 ? 10 : _ref$multipleStepSize,
-    defaultValue = _ref.defaultValue,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'm' : _ref$size,
-    name = _ref.name,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState({
       xHandle: 0,
@@ -56,7 +52,6 @@ export var SingleSlider = function SingleSlider(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     state = _useState2[0],
     setState = _useState2[1];
-  var innerRef = useRef(null);
   var _useState3 = useState(0),
     _useState4 = _slicedToArray(_useState3, 2),
     startOffset = _useState4[0],
@@ -65,7 +60,7 @@ export var SingleSlider = function SingleSlider(_ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     endOffset = _useState6[0],
     setEndOffset = _useState6[1];
-  var _useState7 = useState((_ref2 = value !== null && value !== void 0 ? value : defaultValue) !== null && _ref2 !== void 0 ? _ref2 : min),
+  var _useState7 = useState(value),
     _useState8 = _slicedToArray(_useState7, 2),
     dragValue = _useState8[0],
     setDragValue = _useState8[1];
@@ -73,14 +68,14 @@ export var SingleSlider = function SingleSlider(_ref) {
   var hasLabelContent = label || labelContentLeft;
   var labelPlacementClass = labelPlacement === 'outer' ? classes.labelPlacementOuter : classes.labelPlacementInner;
   var rangeValuesPlacementClass = rangeValuesPlacement === 'outer' ? classes.rangeValuesPlacementOuter : classes.rangeValuesPlacementInner;
-  var hideMinValueDiffClass = hideMinValueDiff && dragValue - min <= hideMinValueDiff ? classes.hideMinValue : '';
-  var hideMaxValueDiffClass = hideMaxValueDiff && max - dragValue <= hideMaxValueDiff ? classes.hideMaxValue : '';
+  var hideMinValueDiffClass = hideMinValueDiff && value - min <= hideMinValueDiff ? classes.hideMinValue : '';
+  var hideMaxValueDiffClass = hideMaxValueDiff && max - value <= hideMaxValueDiff ? classes.hideMaxValue : '';
   var startLabelRef = useRef(null);
   var endLabelRef = useRef(null);
   var activeFirstValue = dragValue === min ? classes.activeRangeValue : undefined;
   var activeSecondValue = dragValue === max ? classes.activeRangeValue : undefined;
   useEffect(function () {
-    var localValue = Math.min(Math.max(dragValue, min), max) - min;
+    var localValue = Math.min(Math.max(value, min), max) - min;
     if (rangeValuesPlacement === 'outer') {
       var _startLabelRef$curren, _endLabelRef$current;
       var startWidth = (_startLabelRef$curren = startLabelRef.current) === null || _startLabelRef$curren === void 0 ? void 0 : _startLabelRef$curren.offsetWidth;
@@ -101,7 +96,7 @@ export var SingleSlider = function SingleSlider(_ref) {
         railFillWidth: stepSize * localValue
       });
     });
-  }, [dragValue, labelPlacement, stepSize, rangeValuesPlacement, min, max, setStartOffset, setEndOffset]);
+  }, [value, labelPlacement, stepSize, rangeValuesPlacement, min, max, setStartOffset, setEndOffset]);
   var setStepSize = useCallback(function (newStepSize) {
     setState(function (prevState) {
       return _objectSpread(_objectSpread({}, prevState), {}, {
@@ -118,17 +113,7 @@ export var SingleSlider = function SingleSlider(_ref) {
       });
     });
     if (onChange) {
-      if (value !== undefined) {
-        onChange(newValue);
-      }
-      if (name && !value) {
-        onChange({
-          target: {
-            value: newValue,
-            name: name
-          }
-        });
-      }
+      onChange(newValue);
     }
     setDragValue(newValue);
   };
@@ -179,11 +164,5 @@ export var SingleSlider = function SingleSlider(_ref) {
   })), showRangeValues && /*#__PURE__*/React.createElement(StyledRangeValue, {
     ref: endLabelRef,
     className: cx(classes.maxRangeValue, hideMaxValueDiffClass, activeSecondValue)
-  }, max)), /*#__PURE__*/React.createElement(InputHidden, _extends({
-    name: name,
-    type: "number",
-    datatype: "slider-single",
-    value: dragValue,
-    ref: innerRef
-  }, noop)));
+  }, max)));
 };

package/styled-components/es/components/Slider/components/SliderBase/SliderBase.styles.js

@@ -1,5 +1,4 @@
 import styled from 'styled-components';
-import { applyHidden } from '../../../../mixins';
 import { tokens } from '../../Slider.tokens';
 export var Slider = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-ik0bjb-0"
@@ -12,7 +11,4 @@ export var Rail = /*#__PURE__*/styled.div.withConfig({
 })(["position:relative;top:50%;height:var(", ");border-radius:var(", ");background-color:var(", ");overflow:hidden;transform:translateY(-50%);"], tokens.railHeight, tokens.railBorderRadius, tokens.railBackgroundColor);
 export var Fill = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-ik0bjb-3"
-})(["position:absolute;height:100%;top:0;left:0;background:var(", ");width:0;"], tokens.fillColor);
-export var InputHidden = /*#__PURE__*/styled.input.withConfig({
-  componentId: "plasma-new-hope__sc-ik0bjb-4"
-})(["", ";"], /*#__PURE__*/applyHidden());
+})(["position:absolute;height:100%;top:0;left:0;background:var(", ");width:0;"], tokens.fillColor);

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

@@ -1,4 +1,3 @@
 export * from './Single/Single';
 export * from './Double/Double';
-export * from './DoubleUncontrolled/DoubleUncontrolled';
 export {};

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

@@ -15,6 +15,11 @@ import { PropsTable, Description } from '@site/src/components';
 <Description name="TabItem" />
 <PropsTable name="TabItem" />
 
+:::caution Взаимоисключающие свойства
+Свойство `value` - это значение таба. Оно отображается справа от основного текста.<br/>
+`value` и `contentRight` взаимоисключающие: если передано одно, второе передать нельзя.
+:::
+
 ## TabsController (deprecated)
 Вместо этого используйте Tabs, TabItem, указав параметры index, itemIndex, onIndexChange.
 
@@ -56,6 +61,41 @@ 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
@@ -143,8 +183,9 @@ export function App() {
 ```
 
 ### Подключение клавиатурной навигации
-Для этого необходимо дополнительно прокинуть свойства `index, itemIndex, onIndexChange`.
-Клавиши ArrowLeft, ArrowRight, Home, End для навигации по вкладкам.
+Для этого необходимо дополнительно прокинуть свойства `index, itemIndex, onIndexChange`.<br/>
+Для горизонтальных табов: клавиши ArrowLeft, ArrowRight, Home, End для навигации по вкладкам.<br/>
+Для вертикальных табов: клавиши ArrowUp, ArrowDown, Home, End для навигации по вкладкам.
 
 ```tsx live
 import React, { useState } from 'react';
@@ -153,27 +194,51 @@ import { IconClock } from '@salutejs/plasma-icons';
 
 export function App() {
     const items = Array(4).fill(0);
-    const [index, setIndex] = useState(0);
+    const [horizontalIndex, setHorizontalIndex] = useState(0);
+    const [verticalIndex, setVerticalIndex] = useState(0);
 
     return (
-        <div>
-            <Tabs view="filled" stretch size="xs" index={index}>
-                {items.map((_, i) => (
-                    <TabItem
-                        view="secondary"
-                        key={`item:${i}`}
-                        size="xs"
-                        itemIndex={i}
-                        onIndexChange={(i) => setIndex(i)}
-                        selected={i === index}
-                        tabIndex={0}
-                        contentLeft={<IconClock size="xs" color="inherit" />}
-                        onClick={() => setIndex(i)}
-                    >
-                        {`Label${i + 1}`}
-                    </TabItem>
-                ))}
-            </Tabs>
+        <div style=\{{ display: "flex", flexDirection: "column", gap: "50px"}}>
+            <div>
+                <Tabs view="divider" stretch size="xs" index={horizontalIndex}>
+                    {items.map((_, i) => (
+                        <TabItem
+                            view="divider"
+                            key={`item:${i}`}
+                            size="xs"
+                            itemIndex={i}
+                            onIndexChange={(i) => setHorizontalIndex(i)}
+                            selected={i === horizontalIndex}
+                            tabIndex={0}
+                            contentLeft={<IconClock size="xs" color="inherit" />}
+                            onClick={() => setHorizontalIndex(i)}
+                        >
+                            {`Label${i + 1}`}
+                        </TabItem>
+                    ))}
+                </Tabs>
+            </div>
+
+            <div>
+                <Tabs orientation="vertical" view="divider" size="xs" index={verticalIndex}>
+                    {items.map((_, i) => (
+                        <TabItem
+                            orientation="vertical"
+                            view="divider"
+                            key={`item:${i}`}
+                            size="xs"
+                            itemIndex={i}
+                            onIndexChange={(i) => setVerticalIndex(i)}
+                            selected={i === verticalIndex}
+                            tabIndex={0}
+                            contentLeft={<IconClock size="xs" color="inherit" />}
+                            onClick={() => setVerticalIndex(i)}
+                        >
+                            {`Label${i + 1}`}
+                        </TabItem>
+                    ))}
+                </Tabs>
+            </div>
         </div>
     );
 }

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

@@ -1,4 +1,4 @@
-var _excluded = ["items", "index", "autoscroll", "onIndexChange"],
+var _excluded = ["items", "index", "autoscroll", "onIndexChange", "orientation"],
   _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,6 +18,7 @@ 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,5 +1,8 @@
-export { tabsRoot, tabsConfig } from './ui/Tabs/Tabs';
-export { tabItemRoot, tabItemConfig } from './ui/TabItem/TabItem';
+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 { tokens as tabsTokens } from './tokens';
 export { TabItemRefs, TabsContext } from './TabsContext';
 export { createTabsController } from './createTabsController';

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

@@ -3,6 +3,7 @@ export var classes = {
   tabsPilled: 'tabs-pilled',
   tabsGroupFilledBackground: 'tabs-group-filled-background',
   tabsStretch: 'tabs-stretched',
+  tabsNoDivider: 'tabs-no-divider',
   tabItemDivider: 'tab-item-divider',
   tabItemAnimated: 'tab-item-animated',
   tabContent: 'tab-item-content',
@@ -10,18 +11,23 @@ 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',
+  tabsDividerWidth: '--plasma-tabs-divider-width',
   tabsDividerHeight: '--plasma-tabs-divider-height',
   tabsDividerColor: '--plasma-tabs-divider-color',
   tabsDividerBorderRadius: '--plasma-tabs-divider-border-radius',
+  itemSelectedDividerWidth: '--plasma-tab-item-selected-divider-width',
   itemSelectedDividerHeight: '--plasma-tab-item-selected-divider-height',
   itemSelectedDividerColor: '--plasma-tab-item-selected-divider-color',
   itemSelectedDividerColorHover: '--plasma-tab-item-selected-hover-divider-color',
@@ -41,6 +47,7 @@ export var tokens = {
   itemPadding: '--plasma-tab-item-padding',
   itemPaddingClear: '--plasma-tab-item-padding-clear',
   itemPaddingPilled: '--plasma-tab-item-padding-pilled',
+  itemPaddingOrientationVertical: '--plasma-tab-item-padding-orientation-vertical',
   itemMarginLeft: '--plasma-tab-item-margin-left',
   itemMarginLeftFilled: '--plasma-tab-item-margin-left-filled',
   itemContentGap: '--plasma-tab-item-content-gap',
@@ -50,19 +57,20 @@ export var tokens = {
   arrowOuterPadding: '--plasma-tab-arrow-outer-padding',
   arrowViewOuterPadding: '--plasma-tab-arrow-view-outer-padding',
   itemColor: '--plasma-tab-item-color',
+  itemValueColor: '--plasma-tab-item-value-color',
   itemBackgroundColor: '--plasma-tab-item-background-color',
   itemColorHover: '--plasma-tab-item-color-hover',
+  itemValueColorHover: '--plasma-tab-item-value-color-hover',
   itemColorActive: '--plasma-tab-item-color-active',
+  itemValueColorActive: '--plasma-tab-item-value-color-active',
   itemBackgroundColorHover: '--plasma-tab-item-background-color-hover',
   itemSelectedColor: '--plasma-tab-item-selected-color',
+  itemSelectedValueColor: '--plasma-tab-item-selected-value-color',
   itemSelectedBackgroundColor: '--plasma-tab-item-selected-background-color',
   itemSelectedColorHover: '--plasma-tab-item-selected-color-hover',
+  itemSelectedValueColorHover: '--plasma-tab-item-selected-value-color-hover',
   itemSelectedBackgroundColorHover: '--plasma-tab-item-selected-background-color-hover',
   itemBackgroundTransition: '--plasma-tab-item-background-transition',
-  additionalContentColor: '--plasma-tab-item-additional-content-color',
-  additionalContentHoverColor: '--plasma-tab-item-hover-additional-content-color',
-  additionalContentSelectedColor: '--plasma-tab-item-selected-additional-content-color',
-  additionalContentSelectedHoverColor: '--plasma-tab-item-selected-hover-additional-content-color',
   fontFamily: '--plasma-tab-item-font-family',
   fontSize: '--plasma-tab-item-font-size',
   fontStyle: '--plasma-tab-item-font-style',

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

@@ -1,18 +1,18 @@
-var _excluded = ["size", "view", "isActive", "selected", "disabled", "pilled", "children", "contentLeft", "contentRight", "animated", "onIndexChange", "itemIndex", "tabIndex", "className", "onClick"];
+var _excluded = ["size", "view", "isActive", "selected", "disabled", "pilled", "children", "value", "contentLeft", "contentRight", "animated", "onIndexChange", "itemIndex", "tabIndex", "className", "onClick"];
 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, { 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 './TabItem.styles';
-export var tabItemRoot = function tabItemRoot(Root) {
+import { LeftContent, RightContent, StyledContent, TabItemValue, base } from './HorizontalTabItem.styles';
+export var horizontalTabItemRoot = function horizontalTabItemRoot(Root) {
   return /*#__PURE__*/forwardRef(function (props, outerRef) {
     var size = props.size,
       view = props.view,
@@ -23,6 +23,7 @@ export var tabItemRoot = function tabItemRoot(Root) {
       _props$pilled = props.pilled,
       pilled = _props$pilled === void 0 ? false : _props$pilled,
       children = props.children,
+      value = props.value,
       contentLeft = props.contentLeft,
       contentRight = props.contentRight,
       _props$animated = props.animated,
@@ -53,6 +54,9 @@ export var tabItemRoot = function tabItemRoot(Root) {
       };
     }, [refs]);
     var onItemFocus = useCallback(function (event) {
+      if (disabled) {
+        return;
+      }
       if (!hasKeyNavigation && innerRef !== null && innerRef !== void 0 && innerRef.current) {
         innerRef.current.scrollTo({
           top: 0,
@@ -61,7 +65,7 @@ export var tabItemRoot = function tabItemRoot(Root) {
         });
         return;
       }
-      if (disabled || !refs) {
+      if (!refs) {
         return;
       }
       var focusIndex = refs.items.findIndex(function (itemRef) {
@@ -98,15 +102,15 @@ export var tabItemRoot = function tabItemRoot(Root) {
       className: classes.tabLeftContent
     }, contentLeft), /*#__PURE__*/React.createElement(StyledContent, {
       className: classes.tabContent
-    }, children), contentRight && /*#__PURE__*/React.createElement(RightContent, {
+    }, children), value && /*#__PURE__*/React.createElement(TabItemValue, null, value), contentRight && /*#__PURE__*/React.createElement(RightContent, {
       className: classes.tabRightContent
     }, contentRight)));
   });
 };
-export var tabItemConfig = {
-  name: 'TabItem',
+export var horizontalTabItemConfig = {
+  name: 'HorizontalTabItem',
   tag: 'button',
-  layout: tabItemRoot,
+  layout: horizontalTabItemRoot,
   base: base,
   variations: {
     size: {

package/styled-components/es/components/Tabs/ui/{TabItem/TabItem.styles.js → horizontal/HorizontalTabItem/HorizontalTabItem.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,14 @@ 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-1ngrr4h-0"
+  componentId: "plasma-new-hope__sc-lremls-0"
 })(["display:inline-block;width:fit-content;padding:0 var(", ",var(", "));"], tokens.itemContentPaddingClear, tokens.itemContentPadding);
+export var TabItemValue = /*#__PURE__*/styled.span.withConfig({
+  componentId: "plasma-new-hope__sc-lremls-1"
+})(["color:var(", ");"], tokens.itemValueColor);
 export var RightContent = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-1ngrr4h-1"
-})(["display:flex;color:var(", ");&:hover{color:var(", ");}"], tokens.additionalContentColor, tokens.additionalContentHoverColor);
+  componentId: "plasma-new-hope__sc-lremls-2"
+})(["display:flex;color:inherit;&:hover{color:inherit;}"]);
 export var LeftContent = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-1ngrr4h-2"
+  componentId: "plasma-new-hope__sc-lremls-3"
 })(["display:flex;color:inherit;&:hover{color:inherit;}"]);

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

@@ -1,3 +1,3 @@
 import { css } from 'styled-components';
-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);
+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, classes.selectedTabsItem, tokens.itemSelectedColor, tokens.itemSelectedBackgroundColor);

package/styled-components/es/components/Tabs/ui/horizontal/HorizontalTabItem/variations/_disabled/tokens.json

@@ -0,0 +1,4 @@
+{
+    "type": "boolean",
+    "tokens": ["--plasma-tab-disabled-opacity"]
+}

package/styled-components/es/components/Tabs/ui/horizontal/HorizontalTabItem/variations/_pilled/base.js

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

package/styled-components/es/components/Tabs/ui/{TabItem → horizontal/HorizontalTabItem}/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/variations/_view/base.js

@@ -0,0 +1,4 @@
+import { css } from 'styled-components';
+import { classes, tokens } from '../../../../../tokens';
+import { TabItemValue } from '../../HorizontalTabItem.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(", ");", "{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, TabItemValue, tokens.itemValueColorHover, tokens.itemColorActive, TabItemValue, tokens.itemValueColorActive, classes.tabItemAnimated, tokens.itemBackgroundTransition, classes.selectedTabsItem, tokens.itemSelectedColor, tokens.itemSelectedBackgroundColor, tokens.itemSelectedColorHover, tokens.itemSelectedBackgroundColorHover, tokens.itemSelectedDividerColorHover, TabItemValue, tokens.itemSelectedValueColorHover, tokens.itemSelectedValueColorHover, tokens.itemSelectedDividerColor, tokens.itemSelectedDividerHeight);

package/styled-components/es/components/Tabs/ui/horizontal/HorizontalTabItem/variations/_view/tokens.json

@@ -0,0 +1,8 @@
+[
+    "--plasma-tabs-underline-height",
+    "--plasma-tabs-underline-color",
+    "--plasma-tabs-font-weight",
+    "--plasma-tabs-font-color",
+    "--plasma-tabs-font-color-hover",
+    "--plasma-tabs-cursor"
+]

package/styled-components/es/components/Tabs/ui/{Tabs/Tabs.js → horizontal/HorizontalTabs/HorizontalTabs.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 './Tabs.styles';
+import { StyledArrow, StyledContent, StyledContentWrapper, base } from './HorizontalTabs.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 tabsRoot = function tabsRoot(Root) {
+export var horizontalTabsRoot = function horizontalTabsRoot(Root) {
   return /*#__PURE__*/forwardRef(function (props, outerRef) {
     var id = props.id,
       _props$stretch = props.stretch,
@@ -165,7 +165,7 @@ export var tabsRoot = function tabsRoot(Root) {
         event.preventDefault();
         (_refs$items$nextIndex = refs.items[nextIndex].current) === null || _refs$items$nextIndex === void 0 || _refs$items$nextIndex.focus();
         (_refs$items$nextIndex2 = refs.items[nextIndex].current) === null || _refs$items$nextIndex2 === void 0 || _refs$items$nextIndex2.scrollIntoView({
-          block: 'center',
+          block: 'nearest',
           inline: 'center',
           behavior: 'smooth'
         });
@@ -206,10 +206,10 @@ export var tabsRoot = function tabsRoot(Root) {
     }, children)), !lastItemVisible && NextButton));
   });
 };
-export var tabsConfig = {
-  name: 'Tabs',
+export var horizontalTabsConfig = {
+  name: 'HorizontalTabs',
   tag: 'div',
-  layout: tabsRoot,
+  layout: horizontalTabsRoot,
   base: base,
   variations: {
     size: {