@salutejs/plasma-new-hope 0.163.0-canary.1475.11269507677.0 → 0.163.1-canary.1346.11287695223.0

package/styled-components/cjs/components/DatePicker/hooks/useDatePicker.js

@@ -6,10 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.useDatePicker = void 0;
 var _DatePicker = /*#__PURE__*/require("../DatePicker.tokens");
 var _dateHelper = /*#__PURE__*/require("../utils/dateHelper");
+var _datejs = /*#__PURE__*/require("../../../utils/datejs");
 var useDatePicker = exports.useDatePicker = function useDatePicker(_ref) {
   var currentValue = _ref.currentValue,
     setInputValue = _ref.setInputValue,
     setCalendarValue = _ref.setCalendarValue,
+    setIsInnerOpen = _ref.setIsInnerOpen,
     dateFormatDelimiter = _ref.dateFormatDelimiter,
     format = _ref.format,
     _ref$lang = _ref.lang,
@@ -19,12 +21,24 @@ var useDatePicker = exports.useDatePicker = function useDatePicker(_ref) {
     maskWithFormat = _ref.maskWithFormat,
     valueError = _ref.valueError,
     valueSuccess = _ref.valueSuccess,
+    inputRef = _ref.inputRef,
     name = _ref.name,
+    onToggle = _ref.onToggle,
     onChangeValue = _ref.onChangeValue,
     onCommitDate = _ref.onCommitDate,
     onChange = _ref.onChange;
   var datePickerErrorClass = valueError ? _DatePicker.classes.datePickerError : undefined;
   var datePickerSuccessClass = valueSuccess ? _DatePicker.classes.datePickerSuccess : undefined;
+  var handleToggle = function handleToggle(opened, event) {
+    if (disabled || readOnly) {
+      return;
+    }
+    var isCalendarOpen = event.target === (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) ? true : opened;
+    if (onToggle) {
+      return onToggle(isCalendarOpen, event);
+    }
+    setIsInnerOpen(isCalendarOpen);
+  };
   var handleChangeValue = function handleChangeValue(event) {
     if (disabled || readOnly) {
       return;
@@ -47,14 +61,24 @@ var useDatePicker = exports.useDatePicker = function useDatePicker(_ref) {
       });
       return;
     }
-    var _validateDateWithFull = (0, _dateHelper.validateDateWithFullMonth)({
-        currentValue: newValue,
-        format: format,
-        lang: lang
-      }),
-      hasMonthFullName = _validateDateWithFull.hasMonthFullName,
-      isValidMonth = _validateDateWithFull.isValidMonth,
-      isLengthEqual = _validateDateWithFull.isLengthEqual;
+
+    /**
+     * NOTE: если в формате даты есть месяц в полном названии или сокращенном,
+     * нужно дополнительно проводить валидацию на полноту введенной даты.
+     * Иначе dayjs циклически будет пытаться отформатировать некорректную дату.
+     */
+    var hasMonthFullName = /M{3,4}/g.test(format);
+    var isValidMonth;
+    var isLengthEqual;
+    if (hasMonthFullName) {
+      _datejs.customDayjs.locale(lang);
+      var firstIndexOfMonth = format.indexOf('M');
+      var lastIndexOfMonth = newValue.indexOf(dateFormatDelimiter(), firstIndexOfMonth);
+      var fullMonthName = !lastIndexOfMonth ? newValue.slice(firstIndexOfMonth) : newValue.slice(firstIndexOfMonth, lastIndexOfMonth);
+      var monthFormatting = format.replace(/[^M]/g, '');
+      isValidMonth = (0, _datejs.customDayjs)("01 ".concat(fullMonthName, " 1970"), "DD ".concat(monthFormatting, " YYYY"), true).isValid();
+      isLengthEqual = format.length - monthFormatting.length === newValue.length - fullMonthName.length;
+    }
     if (!hasMonthFullName && (newValue === null || newValue === void 0 ? void 0 : newValue.length) === (format === null || format === void 0 ? void 0 : format.length) || isValidMonth && isLengthEqual) {
       setCalendarValue((0, _dateHelper.formatCalendarValue)(newValue, format, lang));
     }
@@ -84,18 +108,20 @@ var useDatePicker = exports.useDatePicker = function useDatePicker(_ref) {
       return onCommitDate === null || onCommitDate === void 0 ? void 0 : onCommitDate('', false, true);
     }
     if (isCalendarValue) {
-      var _formattedInputValue = (0, _dateHelper.formatInputValue)({
+      setCalendarValue((0, _dateHelper.formatCalendarValue)(date, format, lang));
+      setInputValue((0, _dateHelper.formatInputValue)({
         value: date,
         format: format,
         lang: lang
-      });
-      setCalendarValue((0, _dateHelper.formatCalendarValue)(date, format, lang));
-      setInputValue(_formattedInputValue);
+      }));
       onCommitDate === null || onCommitDate === void 0 || onCommitDate(date, false, true, dateInfo);
-      onChangeValue === null || onChangeValue === void 0 || onChangeValue(null, _formattedInputValue);
       onChange === null || onChange === void 0 || onChange({
         target: {
-          value: _formattedInputValue,
+          value: (0, _dateHelper.formatInputValue)({
+            value: date,
+            format: format,
+            lang: lang
+          }),
           name: name
         }
       });
@@ -106,18 +132,19 @@ var useDatePicker = exports.useDatePicker = function useDatePicker(_ref) {
       newDate = _getDateFromFormat.value,
       isError = _getDateFromFormat.isError,
       isSuccess = _getDateFromFormat.isSuccess;
-    var formattedInputValue = (0, _dateHelper.formatInputValue)({
+    setCalendarValue((0, _dateHelper.formatCalendarValue)(newDate, format, lang));
+    setInputValue((0, _dateHelper.formatInputValue)({
       value: newDate,
       format: format,
       lang: lang
-    });
-    setCalendarValue((0, _dateHelper.formatCalendarValue)(newDate, format, lang));
-    setInputValue(formattedInputValue);
+    }));
     onCommitDate === null || onCommitDate === void 0 || onCommitDate(newDate, isError, isSuccess);
-    onChangeValue === null || onChangeValue === void 0 || onChangeValue(null, formattedInputValue);
     onChange === null || onChange === void 0 || onChange({
       target: {
-        value: formattedInputValue,
+        value: (0, _dateHelper.formatInputValue)({
+          value: date,
+          format: format
+        }),
         name: name
       }
     });
@@ -125,6 +152,7 @@ var useDatePicker = exports.useDatePicker = function useDatePicker(_ref) {
   return {
     datePickerErrorClass: datePickerErrorClass,
     datePickerSuccessClass: datePickerSuccessClass,
+    handleToggle: handleToggle,
     handleChangeValue: handleChangeValue,
     handleCommitDate: handleCommitDate
   };

package/styled-components/cjs/components/DatePicker/hooks/useKeyboardNavigation.js

@@ -5,12 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useKeyNavigation = exports.keys = void 0;
 var keys = exports.keys = {
-  Space: 'Space',
-  Escape: 'Escape'
+  Space: 'Space'
 };
 var useKeyNavigation = exports.useKeyNavigation = function useKeyNavigation(_ref) {
   var isCalendarOpen = _ref.isCalendarOpen,
-    closeOnEsc = _ref.closeOnEsc,
     onToggle = _ref.onToggle;
   var onKeyDown = function onKeyDown(event) {
     switch (event.code) {
@@ -22,14 +20,6 @@ var useKeyNavigation = exports.useKeyNavigation = function useKeyNavigation(_ref
           }
           break;
         }
-      case keys.Escape:
-        {
-          if (isCalendarOpen && closeOnEsc) {
-            event.preventDefault();
-            onToggle(false, event);
-          }
-          break;
-        }
       default:
         {
           break;

package/styled-components/cjs/components/DatePicker/utils/dateHelper.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.validateDateWithFullMonth = exports.getMaskedDateOnInput = exports.getDateFromFormat = exports.getDateFormatDelimiter = exports.formatInputValue = exports.formatCalendarValue = void 0;
+exports.getMaskedDateOnInput = exports.getDateFromFormat = exports.getDateFormatDelimiter = exports.formatInputValue = exports.formatCalendarValue = void 0;
 var _datejs = /*#__PURE__*/require("../../../utils/datejs");
 var formatInputValue = exports.formatInputValue = function formatInputValue(_ref) {
   var value = _ref.value,
@@ -84,34 +84,4 @@ var getMaskedDateOnInput = exports.getMaskedDateOnInput = function getMaskedDate
     return value + delimiter;
   }
   return value;
-};
-var validateDateWithFullMonth = exports.validateDateWithFullMonth = function validateDateWithFullMonth(_ref2) {
-  var currentValue = _ref2.currentValue,
-    format = _ref2.format,
-    lang = _ref2.lang;
-  /**
-   * NOTE: если в формате даты есть месяц в полном названии или сокращенном,
-   * нужно дополнительно проводить валидацию на полноту введенной даты.
-   * Иначе dayjs циклически будет пытаться отформатировать некорректную дату.
-   */
-  var hasMonthFullName = /M{3,4}/g.test(format);
-  if (!hasMonthFullName) {
-    return {
-      hasMonthFullName: hasMonthFullName,
-      isValidMonth: false,
-      isLengthEqual: false
-    };
-  }
-  _datejs.customDayjs.locale(lang);
-  var firstIndexOfMonth = format.indexOf('M');
-  var lastIndexOfMonth = currentValue.indexOf(getDateFormatDelimiter(format), firstIndexOfMonth);
-  var fullMonthName = !lastIndexOfMonth ? currentValue.slice(firstIndexOfMonth) : currentValue.slice(firstIndexOfMonth, lastIndexOfMonth);
-  var monthFormatting = format.replace(/[^M]/g, '');
-  var isValidMonth = (0, _datejs.customDayjs)("01 ".concat(fullMonthName, " 1970"), "DD ".concat(monthFormatting, " YYYY"), true).isValid();
-  var isLengthEqual = format.length - monthFormatting.length === currentValue.length - fullMonthName.length;
-  return {
-    hasMonthFullName: hasMonthFullName,
-    isValidMonth: isValidMonth,
-    isLengthEqual: isLengthEqual
-  };
 };

package/styled-components/cjs/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/cjs/components/Tabs/index.js

@@ -21,28 +21,28 @@ Object.defineProperty(exports, "createTabsController", {
     return _createTabsController.createTabsController;
   }
 });
-Object.defineProperty(exports, "tabItemConfig", {
+Object.defineProperty(exports, "horizontalTabItemConfig", {
   enumerable: true,
   get: function get() {
-    return _TabItem.tabItemConfig;
+    return _HorizontalTabItem.horizontalTabItemConfig;
   }
 });
-Object.defineProperty(exports, "tabItemRoot", {
+Object.defineProperty(exports, "horizontalTabItemRoot", {
   enumerable: true,
   get: function get() {
-    return _TabItem.tabItemRoot;
+    return _HorizontalTabItem.horizontalTabItemRoot;
   }
 });
-Object.defineProperty(exports, "tabsConfig", {
+Object.defineProperty(exports, "horizontalTabsConfig", {
   enumerable: true,
   get: function get() {
-    return _Tabs.tabsConfig;
+    return _HorizontalTabs.horizontalTabsConfig;
   }
 });
-Object.defineProperty(exports, "tabsRoot", {
+Object.defineProperty(exports, "horizontalTabsRoot", {
   enumerable: true,
   get: function get() {
-    return _Tabs.tabsRoot;
+    return _HorizontalTabs.horizontalTabsRoot;
   }
 });
 Object.defineProperty(exports, "tabsTokens", {
@@ -51,8 +51,34 @@ Object.defineProperty(exports, "tabsTokens", {
     return _tokens.tokens;
   }
 });
-var _Tabs = /*#__PURE__*/require("./ui/Tabs/Tabs");
-var _TabItem = /*#__PURE__*/require("./ui/TabItem/TabItem");
+Object.defineProperty(exports, "verticalTabItemConfig", {
+  enumerable: true,
+  get: function get() {
+    return _VerticalTabItem.verticalTabItemConfig;
+  }
+});
+Object.defineProperty(exports, "verticalTabItemRoot", {
+  enumerable: true,
+  get: function get() {
+    return _VerticalTabItem.verticalTabItemRoot;
+  }
+});
+Object.defineProperty(exports, "verticalTabsConfig", {
+  enumerable: true,
+  get: function get() {
+    return _VerticalTabs.verticalTabsConfig;
+  }
+});
+Object.defineProperty(exports, "verticalTabsRoot", {
+  enumerable: true,
+  get: function get() {
+    return _VerticalTabs.verticalTabsRoot;
+  }
+});
+var _HorizontalTabs = /*#__PURE__*/require("./ui/horizontal/HorizontalTabs/HorizontalTabs");
+var _HorizontalTabItem = /*#__PURE__*/require("./ui/horizontal/HorizontalTabItem/HorizontalTabItem");
+var _VerticalTabs = /*#__PURE__*/require("./ui/vertical/VerticalTabs/VerticalTabs");
+var _VerticalTabItem = /*#__PURE__*/require("./ui/vertical/VerticalTabItem/VerticalTabItem");
 var _tokens = /*#__PURE__*/require("./tokens");
 var _TabsContext = /*#__PURE__*/require("./TabsContext");
 var _createTabsController = /*#__PURE__*/require("./createTabsController");

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

@@ -9,6 +9,7 @@ var classes = exports.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',
@@ -16,18 +17,23 @@ var classes = exports.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'
 };
 var tokens = exports.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',
@@ -47,6 +53,7 @@ var tokens = exports.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',
@@ -56,19 +63,20 @@ var tokens = exports.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/styled-components/cjs/components/Tabs/ui/{TabItem/TabItem.js → horizontal/HorizontalTabItem/HorizontalTabItem.js}

@@ -4,24 +4,24 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.tabItemRoot = exports.tabItemConfig = void 0;
+exports.horizontalTabItemRoot = exports.horizontalTabItemConfig = void 0;
 var _react = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("react"));
 var _plasmaCore = /*#__PURE__*/require("@salutejs/plasma-core");
-var _tokens = /*#__PURE__*/require("../../tokens");
-var _utils = /*#__PURE__*/require("../../../../utils");
-var _TabsContext = /*#__PURE__*/require("../../TabsContext");
+var _tokens = /*#__PURE__*/require("../../../tokens");
+var _utils = /*#__PURE__*/require("../../../../../utils");
+var _TabsContext = /*#__PURE__*/require("../../../TabsContext");
 var _base = /*#__PURE__*/require("./variations/_view/base");
 var _base2 = /*#__PURE__*/require("./variations/_size/base");
 var _base3 = /*#__PURE__*/require("./variations/_pilled/base");
 var _base4 = /*#__PURE__*/require("./variations/_disabled/base");
-var _TabItem = /*#__PURE__*/require("./TabItem.styles");
-var _excluded = ["size", "view", "isActive", "selected", "disabled", "pilled", "children", "contentLeft", "contentRight", "animated", "onIndexChange", "itemIndex", "tabIndex", "className", "onClick"];
+var _HorizontalTabItem = /*#__PURE__*/require("./HorizontalTabItem.styles");
+var _excluded = ["size", "view", "isActive", "selected", "disabled", "pilled", "children", "value", "contentLeft", "contentRight", "animated", "onIndexChange", "itemIndex", "tabIndex", "className", "onClick"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 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; }
-var tabItemRoot = exports.tabItemRoot = function tabItemRoot(Root) {
+var horizontalTabItemRoot = exports.horizontalTabItemRoot = function horizontalTabItemRoot(Root) {
   return /*#__PURE__*/(0, _react.forwardRef)(function (props, outerRef) {
     var size = props.size,
       view = props.view,
@@ -32,6 +32,7 @@ var tabItemRoot = exports.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,
@@ -62,6 +63,9 @@ var tabItemRoot = exports.tabItemRoot = function tabItemRoot(Root) {
       };
     }, [refs]);
     var onItemFocus = (0, _react.useCallback)(function (event) {
+      if (disabled) {
+        return;
+      }
       if (!hasKeyNavigation && innerRef !== null && innerRef !== void 0 && innerRef.current) {
         innerRef.current.scrollTo({
           top: 0,
@@ -70,7 +74,7 @@ var tabItemRoot = exports.tabItemRoot = function tabItemRoot(Root) {
         });
         return;
       }
-      if (disabled || !refs) {
+      if (!refs) {
         return;
       }
       var focusIndex = refs.items.findIndex(function (itemRef) {
@@ -103,20 +107,20 @@ var tabItemRoot = exports.tabItemRoot = function tabItemRoot(Root) {
       tabIndex: hasKeyNavigation ? navigationTabIndex : tabIndex,
       className: (0, _utils.cx)(pilledClass, selectedClass, animatedClass, className),
       onClick: handleClick
-    }, rest), /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, contentLeft && /*#__PURE__*/_react["default"].createElement(_TabItem.LeftContent, {
+    }, rest), /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, contentLeft && /*#__PURE__*/_react["default"].createElement(_HorizontalTabItem.LeftContent, {
       className: _tokens.classes.tabLeftContent
-    }, contentLeft), /*#__PURE__*/_react["default"].createElement(_TabItem.StyledContent, {
+    }, contentLeft), /*#__PURE__*/_react["default"].createElement(_HorizontalTabItem.StyledContent, {
       className: _tokens.classes.tabContent
-    }, children), contentRight && /*#__PURE__*/_react["default"].createElement(_TabItem.RightContent, {
+    }, children), !contentRight && value && /*#__PURE__*/_react["default"].createElement(_HorizontalTabItem.TabItemValue, null, value), !value && contentRight && /*#__PURE__*/_react["default"].createElement(_HorizontalTabItem.RightContent, {
       className: _tokens.classes.tabRightContent
     }, contentRight)));
   });
 };
-var tabItemConfig = exports.tabItemConfig = {
-  name: 'TabItem',
+var horizontalTabItemConfig = exports.horizontalTabItemConfig = {
+  name: 'HorizontalTabItem',
   tag: 'button',
-  layout: tabItemRoot,
-  base: _TabItem.base,
+  layout: horizontalTabItemRoot,
+  base: _HorizontalTabItem.base,
   variations: {
     size: {
       css: _base2.base

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

@@ -4,13 +4,13 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.base = exports.StyledContent = exports.RightContent = exports.LeftContent = void 0;
+exports.base = exports.TabItemValue = exports.StyledContent = exports.RightContent = exports.LeftContent = void 0;
 var _styledComponents = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("styled-components"));
-var _mixins = /*#__PURE__*/require("../../../../mixins");
-var _tokens = /*#__PURE__*/require("../../tokens");
+var _mixins = /*#__PURE__*/require("../../../../../mixins");
+var _tokens = /*#__PURE__*/require("../../../tokens");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
-var base = exports.base = /*#__PURE__*/(0, _styledComponents.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.tokens.itemContentGap, _tokens.tokens.itemPaddingClear, _tokens.tokens.itemPadding, /*#__PURE__*/(0, _mixins.addFocus)({
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.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:transparent;&:first-child{margin-left:0;}", ";"], _tokens.tokens.itemContentGap, _tokens.tokens.itemPaddingClear, _tokens.tokens.itemPadding, /*#__PURE__*/(0, _mixins.addFocus)({
   outlineSize: '0.063rem',
   outlineOffset: '-0.125rem',
   outlineColor: /*#__PURE__*/"var(".concat(_tokens.tokens.outlineFocusColor, ")"),
@@ -18,11 +18,14 @@ var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["position:rel
   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.tokens.outlineFocusColor, ");\n                }\n            }\n        ")
 }));
 var StyledContent = exports.StyledContent = /*#__PURE__*/_styledComponents["default"].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.tokens.itemContentPaddingClear, _tokens.tokens.itemContentPadding);
+var TabItemValue = exports.TabItemValue = /*#__PURE__*/_styledComponents["default"].span.withConfig({
+  componentId: "plasma-new-hope__sc-lremls-1"
+})(["color:var(", ");"], _tokens.tokens.itemValueColor);
 var RightContent = exports.RightContent = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  componentId: "plasma-new-hope__sc-1ngrr4h-1"
-})(["display:flex;color:var(", ");&:hover{color:var(", ");}"], _tokens.tokens.additionalContentColor, _tokens.tokens.additionalContentHoverColor);
+  componentId: "plasma-new-hope__sc-lremls-2"
+})(["display:flex;color:inherit;&:hover{color:inherit;}"]);
 var LeftContent = exports.LeftContent = /*#__PURE__*/_styledComponents["default"].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/cjs/components/Tabs/ui/{TabItem → horizontal/HorizontalTabItem}/variations/_disabled/base.js

@@ -5,5 +5,5 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.base = void 0;
 var _styledComponents = /*#__PURE__*/require("styled-components");
-var _tokens = /*#__PURE__*/require("../../../../tokens");
-var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["&[disabled]{cursor:not-allowed;&:hover{color:var(", ");background-color:var(", ");}&.", ":hover{color:var(", ");background-color:var(", ");}}"], _tokens.tokens.itemColor, _tokens.tokens.itemBackgroundColor, /*#__PURE__*/String(_tokens.classes.selectedTabsItem), _tokens.tokens.itemSelectedColor, _tokens.tokens.itemSelectedBackgroundColor);
+var _tokens = /*#__PURE__*/require("../../../../../tokens");
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["&[disabled]{cursor:not-allowed;&:hover{color:var(", ");background-color:var(", ");}&.", ":hover{color:var(", ");background-color:var(", ");}}"], _tokens.tokens.itemColor, _tokens.tokens.itemBackgroundColor, _tokens.classes.selectedTabsItem, _tokens.tokens.itemSelectedColor, _tokens.tokens.itemSelectedBackgroundColor);

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

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

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

@@ -5,5 +5,5 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.base = void 0;
 var _styledComponents = /*#__PURE__*/require("styled-components");
-var _tokens = /*#__PURE__*/require("../../../../tokens");
-var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["&.", "{--plasma_private-outline-radius:var(", ");border-radius:var(", ");padding:var(", ");}"], /*#__PURE__*/String(_tokens.classes.tabsPilled), _tokens.tokens.itemPilledBorderRadius, _tokens.tokens.itemPilledBorderRadius, _tokens.tokens.itemPaddingPilled);
+var _tokens = /*#__PURE__*/require("../../../../../tokens");
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["&.", "{--plasma_private-outline-radius:var(", ");border-radius:var(", ");padding:var(", ");}"], _tokens.classes.tabsPilled, _tokens.tokens.itemPilledBorderRadius, _tokens.tokens.itemPilledBorderRadius, _tokens.tokens.itemPaddingPilled);

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

@@ -5,5 +5,5 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.base = void 0;
 var _styledComponents = /*#__PURE__*/require("styled-components");
-var _tokens = /*#__PURE__*/require("../../../../tokens");
+var _tokens = /*#__PURE__*/require("../../../../../tokens");
 var base = exports.base = /*#__PURE__*/(0, _styledComponents.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.tokens.fontFamily, _tokens.tokens.fontSize, _tokens.tokens.fontStyle, _tokens.tokens.fontWeight, _tokens.tokens.letterSpacing, _tokens.tokens.lineHeight, _tokens.tokens.itemBorderRadius, _tokens.tokens.itemBorderRadius, _tokens.tokens.itemWidth, _tokens.tokens.itemHeight);