@salutejs/plasma-new-hope 0.171.0-canary.1492.11402523696.0 → 0.172.0-canary.1493.11403245502.0

package/styled-components/cjs/examples/plasma_web/components/Tabs/horizontal/HorizontalTabs.config.js

@@ -22,6 +22,10 @@ var config = exports.config = {
       s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.625rem;", ":fit-content;", ":auto;", ":0rem;", ":0.25rem;"], _Tabs.tabsTokens.tabsBorderRadius, _Tabs.tabsTokens.tabsWidth, _Tabs.tabsTokens.tabsHeight, _Tabs.tabsTokens.arrowInnerPadding, _Tabs.tabsTokens.arrowOuterPadding),
       m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem;", ":fit-content;", ":auto;", ":0rem;", ":0.625rem;"], _Tabs.tabsTokens.tabsBorderRadius, _Tabs.tabsTokens.tabsWidth, _Tabs.tabsTokens.tabsHeight, _Tabs.tabsTokens.arrowInnerPadding, _Tabs.tabsTokens.arrowOuterPadding),
       l: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem;", ":fit-content;", ":auto;", ":0rem;", ":0.75rem;"], _Tabs.tabsTokens.tabsBorderRadius, _Tabs.tabsTokens.tabsWidth, _Tabs.tabsTokens.tabsHeight, _Tabs.tabsTokens.arrowInnerPadding, _Tabs.tabsTokens.arrowOuterPadding),
+      /**
+       * @deprecated
+       * вместо h1-h5 использовать HorizontalTabs со свойством header
+       */
       h5: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;", ":fit-content;", ":auto;", ":0.25rem;", ":0rem;"], _Tabs.tabsTokens.tabsBorderRadius, _Tabs.tabsTokens.tabsWidth, _Tabs.tabsTokens.tabsHeight, _Tabs.tabsTokens.arrowInnerPadding, _Tabs.tabsTokens.arrowOuterPadding),
       h4: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;", ":fit-content;", ":auto;", ":0.25rem;", ":0rem;"], _Tabs.tabsTokens.tabsBorderRadius, _Tabs.tabsTokens.tabsWidth, _Tabs.tabsTokens.tabsHeight, _Tabs.tabsTokens.arrowInnerPadding, _Tabs.tabsTokens.arrowOuterPadding),
       h3: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.625rem;", ":fit-content;", ":auto;", ":0.375rem;", ":0rem;"], _Tabs.tabsTokens.tabsBorderRadius, _Tabs.tabsTokens.tabsWidth, _Tabs.tabsTokens.tabsHeight, _Tabs.tabsTokens.arrowInnerPadding, _Tabs.tabsTokens.arrowOuterPadding),

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

@@ -135,6 +135,38 @@ import TabItem from '@theme/TabItem';
     </TabItem>
 </Tabs>
 
+### Использование Accordion в Controlled варианте
+
+```tsx live
+    import React, { useState } from 'react';
+    import { Accordion, AccordionItem, IconButton } from '@salutejs/{{ package }}';
+    import { IconPlus } from '@salutejs/plasma-icons';
+
+    export function App() {
+        const [activeFirst, setActiveFirst] = useState(false);
+        const [activeSecond, setActiveSecond] = useState(false);
+        const [activeThree, setActiveThree] = useState(false);
+
+        const contentRight = (active, setActive) => {
+            return (
+                <IconButton view="secondary" size="s" onClick={() => setActive(!active)}>
+                    <IconPlus size="xs" />
+                </IconButton>
+            )
+        }
+
+        return (
+            <div>
+                <Accordion size="s" singleActive={true}>
+                    <AccordionItem opened={activeFirst} contentRight={contentRight(activeFirst, setActiveFirst)} type="arrow" title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
+                    <AccordionItem opened={activeSecond} contentRight={contentRight(activeSecond, setActiveSecond)} type="arrow" title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
+                    <AccordionItem opened={activeThree} contentRight={contentRight(activeThree, setActiveThree)} type="arrow" title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
+                </Accordion>
+            </div>
+        );
+    }
+    ```
+
 ### Использование Accordion SingleActive
 
 ```tsx live

package/styled-components/es/components/Accordion/ui/AccordionItem/AccordionItem.js

@@ -11,12 +11,12 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef, forwardRef, useEffect } from 'react';
 import { convertRoundnessMatrix } from '../../../../utils/roundness';
 import { classes, tokens } from '../../Accordion.tokens';
 import { cx } from '../../../../utils';
 import { StyledAccordionItem, StyledAccordionHeader, StyledAccordionBody, StyledAccordionTitle, StyledAccordionContentLeft, StyledAccordionHeaderLeft, StyledAccordionContentRight, StyledArrow, StyledMinus, StyledPlus, StyledAccordionBodyAnimate } from './AccordionItem.styles';
-export var AccordionItem = function AccordionItem(_ref) {
+export var AccordionItem = /*#__PURE__*/forwardRef(function (_ref, outerRef) {
   var _ref2;
   var value = _ref.value,
     contentRight = _ref.contentRight,
@@ -34,8 +34,10 @@ export var AccordionItem = function AccordionItem(_ref) {
     disabled = _ref.disabled,
     _ref$alignWithTitle = _ref.alignWithTitle,
     alignWithTitle = _ref$alignWithTitle === void 0 ? true : _ref$alignWithTitle,
+    opened = _ref.opened,
     view = _ref.view,
-    onChange = _ref.onChange;
+    onChange = _ref.onChange,
+    onClick = _ref.onClick;
   var key = (_ref2 = eventKey !== null && eventKey !== void 0 ? eventKey : index) !== null && _ref2 !== void 0 ? _ref2 : 0;
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
@@ -48,6 +50,9 @@ export var AccordionItem = function AccordionItem(_ref) {
     if (onChange) {
       onChange(key, !value);
     }
+    if (onClick) {
+      onClick(key, !value);
+    }
   };
   var leftContentRef = useRef(null);
   useEffect(function () {
@@ -56,11 +61,11 @@ export var AccordionItem = function AccordionItem(_ref) {
     var leftPaddingBody = leftContentWidth && (alignWithTitle || view === 'clear') ? "calc(".concat(leftContentWidth, "px + var(").concat(tokens.accordionItemGap, "))") : 0;
     setLeftPadding(leftPaddingBody);
   }, [value, type, leftContentRef, setLeftPadding]);
-  var openedBodyClass = value ? classes.accordionItemShowBody : undefined;
-  var StyledAnimationPLus = function StyledAnimationPLus() {
+  var openedBodyClass = (opened !== null && opened !== void 0 ? opened : value) ? classes.accordionItemShowBody : undefined;
+  var StyledAnimationPlus = function StyledAnimationPlus() {
     return /*#__PURE__*/React.createElement(StyledPlus, null, _StyledMinus || (_StyledMinus = /*#__PURE__*/React.createElement(StyledMinus, {
       size: "xs",
-      color: "inhert"
+      color: "inherit"
     })), /*#__PURE__*/React.createElement(StyledMinus, {
       size: "xs",
       color: "inhert",
@@ -71,14 +76,15 @@ export var AccordionItem = function AccordionItem(_ref) {
   var disabledClass = disabled ? classes.accordionDisabled : '';
   var leftContent = contentLeft !== null && contentLeft !== void 0 ? contentLeft : type === 'arrow' ? _StyledArrow || (_StyledArrow = /*#__PURE__*/React.createElement(StyledArrow, {
     size: "xs",
-    color: "inhert"
+    color: "inherit"
   })) : undefined;
-  var leftContentRotate = type === 'arrow' && value ? classes.accordionItemShowBody : undefined;
-  var rightContent = contentRight !== null && contentRight !== void 0 ? contentRight : type === 'sign' ? /*#__PURE__*/React.createElement(StyledAnimationPLus, null) : undefined;
-  var rightContentRotate = type === 'sign' && value ? classes.accordionItemShowBody : undefined;
+  var leftContentRotate = type === 'arrow' && (opened !== null && opened !== void 0 ? opened : value) ? classes.accordionItemShowBody : undefined;
+  var rightContent = contentRight !== null && contentRight !== void 0 ? contentRight : type === 'sign' ? /*#__PURE__*/React.createElement(StyledAnimationPlus, null) : undefined;
+  var rightContentRotate = type === 'sign' && (opened !== null && opened !== void 0 ? opened : value) ? classes.accordionItemShowBody : undefined;
   return /*#__PURE__*/React.createElement(StyledAccordionItem, {
     className: cx(classes.accordionItem, className, disabledClass),
     key: key,
+    ref: outerRef,
     style: _objectSpread({
       borderRadius: accordionBorderRadius
     }, style)
@@ -86,17 +92,17 @@ export var AccordionItem = function AccordionItem(_ref) {
     role: "tab",
     tabIndex: 0,
     onClick: handleOpen,
-    "aria-expanded": value,
+    "aria-expanded": opened !== null && opened !== void 0 ? opened : value,
     "aria-controls": "accordion-item-section".concat(key),
     id: "accordion-item-".concat(key)
   }, /*#__PURE__*/React.createElement(StyledAccordionHeaderLeft, null, leftContent && /*#__PURE__*/React.createElement(StyledAccordionContentLeft, {
     ref: leftContentRef,
     className: leftContentRotate
-  }, leftContent), /*#__PURE__*/React.createElement(StyledAccordionTitle, null, title)), /*#__PURE__*/React.createElement(StyledAccordionContentRight, {
+  }, leftContent), /*#__PURE__*/React.createElement(StyledAccordionTitle, null, title)), contentRight || /*#__PURE__*/React.createElement(StyledAccordionContentRight, {
     className: rightContentRotate
   }, rightContent && rightContent)), /*#__PURE__*/React.createElement(StyledAccordionBodyAnimate, {
     "aria-labelledby": "accordion-item-".concat(key),
-    "aria-hidden": !value,
+    "aria-hidden": !(opened !== null && opened !== void 0 ? opened : value),
     id: "accordion-item-section".concat(key),
     className: cx(openedBodyClass),
     style: {
@@ -105,4 +111,4 @@ export var AccordionItem = function AccordionItem(_ref) {
   }, /*#__PURE__*/React.createElement(StyledAccordionBody, {
     className: classes.accordionItemBody
   }, children)));
-};
+});

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

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

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

@@ -2,6 +2,8 @@ export { horizontalTabsRoot, horizontalTabsConfig } from './ui/horizontal/Horizo
 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 { headerTabsRoot, headerTabsConfig } from './ui/header/HeaderTabs/HeaderTabs';
+export { headerTabItemRoot, headerTabItemConfig } from './ui/header/HeaderTabItem/HeaderTabItem';
 export { tokens as tabsTokens } from './tokens';
 export { TabItemRefs, TabsContext } from './TabsContext';
 export { createTabsController } from './createTabsController';

package/styled-components/es/components/Tabs/ui/header/HeaderTabItem/HeaderTabItem.js

@@ -0,0 +1,28 @@
+import { horizontalTabItemRoot } from '../../horizontal/HorizontalTabItem/HorizontalTabItem';
+import { base as sizeCSS } from '../../horizontal/HorizontalTabItem/variations/_size/base';
+import { base } from '../../horizontal/HorizontalTabItem/HorizontalTabItem.styles';
+import { base as viewCSS } from '../../horizontal/HorizontalTabItem/variations/_view/base';
+import { base as disabledCSS } from '../../horizontal/HorizontalTabItem/variations/_disabled/base';
+export var headerTabItemRoot = horizontalTabItemRoot;
+export var headerTabItemConfig = {
+  name: 'HeaderTabItem',
+  tag: 'button',
+  layout: headerTabItemRoot,
+  base: base,
+  variations: {
+    size: {
+      css: sizeCSS
+    },
+    view: {
+      css: viewCSS
+    },
+    disabled: {
+      css: disabledCSS,
+      attrs: true
+    }
+  },
+  defaults: {
+    view: 'divider',
+    size: 'h5'
+  }
+};

package/styled-components/es/components/Tabs/ui/header/HeaderTabs/HeaderTabs.js

@@ -0,0 +1,28 @@
+import { horizontalTabsRoot } from '../../horizontal/HorizontalTabs/HorizontalTabs';
+import { base as sizeCSS } from '../../horizontal/HorizontalTabs/variations/_size/base';
+import { base } from '../../horizontal/HorizontalTabs/HorizontalTabs.styles';
+import { base as viewCSS } from '../../horizontal/HorizontalTabs/variations/_view/base';
+import { base as disabledCSS } from '../../horizontal/HorizontalTabs/variations/_disabled/base';
+export var headerTabsRoot = horizontalTabsRoot;
+export var headerTabsConfig = {
+  name: 'HeaderTabs',
+  tag: 'div',
+  layout: horizontalTabsRoot,
+  base: base,
+  variations: {
+    size: {
+      css: sizeCSS
+    },
+    view: {
+      css: viewCSS
+    },
+    disabled: {
+      css: disabledCSS,
+      attrs: true
+    }
+  },
+  defaults: {
+    view: 'divider',
+    size: 'h5'
+  }
+};

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

@@ -90,7 +90,6 @@ export var horizontalTabItemRoot = function horizontalTabItemRoot(Root) {
     return /*#__PURE__*/React.createElement(Root, _extends({
       ref: ref,
       disabled: disabled,
-      pilled: pilled,
       role: role,
       view: view,
       size: size,

package/styled-components/es/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js

@@ -191,7 +191,6 @@ export var horizontalTabsRoot = function horizontalTabsRoot(Root) {
       view: view,
       role: "tablist",
       size: size,
-      pilled: pilled,
       id: tabsId,
       ref: outerRef,
       disabled: disabled,

package/styled-components/es/components/TextArea/TextArea.js

@@ -142,7 +142,7 @@ export var textAreaRoot = function textAreaRoot(Root) {
         setHelperWidth("".concat(elementWidth / ROOT_FONT_SIZE, "rem"));
       }
     });
-    useAutoResize(autoResize || Boolean(clear), outerRef, value, minAuto, maxAuto, defaultValue);
+    useAutoResize(autoResize || Boolean(clear), outerRef, value, minAuto, maxAuto);
     var onFocusHandler = useCallback(function () {
       setFocused(true);
     }, []);

package/styled-components/es/components/TextArea/hooks/useAutoResize.js

@@ -1,6 +1,6 @@
 import { useEffect, useRef } from 'react';
 export var ROOT_FONT_SIZE = 16;
-export var useAutoResize = function useAutoResize(active, ref, value, minAuto, maxAuto, defaultValue) {
+export var useAutoResize = function useAutoResize(active, ref, value, minAuto, maxAuto) {
   var isManualResize = useRef(false);
   var previousHeight = useRef();
   useEffect(function () {
@@ -23,5 +23,5 @@ export var useAutoResize = function useAutoResize(active, ref, value, minAuto, m
       ref.current.style.height = "".concat(newHeight, "rem");
       previousHeight.current = newHeight;
     }
-  }, [ref, active, value, defaultValue]);
+  }, [ref, active, value]);
 };

package/styled-components/es/examples/plasma_b2c/components/Accordion/Accordion.stories.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import type { ComponentProps, ReactNode } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 import { disableProps } from '@salutejs/plasma-sb-utils';
@@ -7,6 +7,8 @@ import { mergeConfig } from '../../../../engines';
 import { WithTheme, argTypesFromConfig } from '../../../_helpers';
 import { accordionConfig } from '../../../../components/Accordion';
 import { Pin } from '../../../../utils/roundness';
+import { IconButton } from '../IconButton/IconButton';
+import { IconPlus } from '../../../../components/_Icon';
 
 import { config } from './Accordion.config';
 import { Accordion, AccordionItem } from './Accordion';
@@ -91,3 +93,63 @@ export const Default: StoryObj<AccordionProps> = {
         );
     },
 };
+
+const getSizeForIcon = (size) => (size === 'xs' ? 'xs' : 's');
+
+const ControlledAccordion = (props: AccordionProps) => {
+    const args = { ...props, text: undefined };
+    const [activeFirst, setActiveFirst] = useState(false);
+    const [activeSecond, setActiveSecond] = useState(false);
+    const [activeThree, setActiveThree] = useState(false);
+
+    return (
+        <Accordion {...args}>
+            <AccordionItem
+                contentRight={
+                    <IconButton view="secondary" size={args.size} onClick={() => setActiveFirst(!activeFirst)}>
+                        <IconPlus size={getSizeForIcon(args.size)} />
+                    </IconButton>
+                }
+                alignWithTitle={args.alignWithTitle}
+                type={args.type}
+                pin={args.pin}
+                title={args.title}
+                opened={activeFirst}
+            >
+                {args.body}
+            </AccordionItem>
+            <AccordionItem
+                contentRight={
+                    <IconButton view="secondary" size={args.size} onClick={() => setActiveSecond(!activeSecond)}>
+                        <IconPlus size={getSizeForIcon(args.size)} />
+                    </IconButton>
+                }
+                alignWithTitle={args.alignWithTitle}
+                type={args.type}
+                pin={args.pin}
+                title={args.title}
+                opened={activeSecond}
+            >
+                {args.body}
+            </AccordionItem>
+            <AccordionItem
+                contentRight={
+                    <IconButton view="secondary" size={args.size} onClick={() => setActiveThree(!activeThree)}>
+                        <IconPlus size={getSizeForIcon(args.size)} />
+                    </IconButton>
+                }
+                alignWithTitle={args.alignWithTitle}
+                type={args.type}
+                pin={args.pin}
+                title={args.title}
+                opened={activeThree}
+            >
+                {args.body}
+            </AccordionItem>
+        </Accordion>
+    );
+};
+
+export const Controlled: StoryObj<AccordionProps> = {
+    render: (props: AccordionProps) => ControlledAccordion(props),
+};

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

@@ -1,15 +1,21 @@
 import React from 'react';
-import { horizontalTabItemConfig, verticalTabItemConfig } from '../../../../components/Tabs';
+import { headerTabItemConfig, horizontalTabItemConfig, verticalTabItemConfig } from '../../../../components/Tabs';
 import { component, mergeConfig } from '../../../../engines';
 import { config as horizontalConfig } from './horizontal/HorizontalTabItem.config';
 import { config as verticalConfig } from './vertical/VerticalTabItem.config';
+import { config as headerConfig } from './header/HeaderTabItem.config';
 var mergedHorizontalTabItemConfig = /*#__PURE__*/mergeConfig(horizontalTabItemConfig, horizontalConfig);
 var HorizontalTabItem = /*#__PURE__*/component(mergedHorizontalTabItemConfig);
 var mergedVerticalTabItemConfig = /*#__PURE__*/mergeConfig(verticalTabItemConfig, verticalConfig);
 var VerticalTabItem = /*#__PURE__*/component(mergedVerticalTabItemConfig);
+var mergedHeaderTabItemConfig = /*#__PURE__*/mergeConfig(headerTabItemConfig, headerConfig);
+var HeaderTabItem = /*#__PURE__*/component(mergedHeaderTabItemConfig);
 export var TabItem = function TabItem(props) {
   if (props.orientation === 'vertical') {
     return /*#__PURE__*/React.createElement(VerticalTabItem, props);
   }
+  if (props.header) {
+    return /*#__PURE__*/React.createElement(HeaderTabItem, props);
+  }
   return /*#__PURE__*/React.createElement(HorizontalTabItem, props);
 };

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

@@ -1,15 +1,21 @@
 import React from 'react';
-import { horizontalTabsConfig, verticalTabsConfig } from '../../../../components/Tabs';
+import { horizontalTabsConfig, verticalTabsConfig, headerTabsConfig } from '../../../../components/Tabs';
 import { component, mergeConfig } from '../../../../engines';
 import { config as horizontalConfig } from './horizontal/HorizontalTabs.config';
 import { config as verticalConfig } from './vertical/VerticalTabs.config';
+import { config as headerConfig } from './header/HeaderTabs.config';
 var mergedHorizontalTabsConfig = /*#__PURE__*/mergeConfig(horizontalTabsConfig, horizontalConfig);
-var mergedVerticalTabsConfig = /*#__PURE__*/mergeConfig(verticalTabsConfig, verticalConfig);
 var HorizontalTabs = /*#__PURE__*/component(mergedHorizontalTabsConfig);
+var mergedVerticalTabsConfig = /*#__PURE__*/mergeConfig(verticalTabsConfig, verticalConfig);
 var VerticalTabs = /*#__PURE__*/component(mergedVerticalTabsConfig);
+var mergedHeaderTabsConfig = /*#__PURE__*/mergeConfig(headerTabsConfig, headerConfig);
+var HeaderTabs = /*#__PURE__*/component(mergedHeaderTabsConfig);
 export var Tabs = function Tabs(props) {
   if (props.orientation === 'vertical') {
     return /*#__PURE__*/React.createElement(VerticalTabs, props);
   }
+  if (props.header) {
+    return /*#__PURE__*/React.createElement(HeaderTabs, props);
+  }
   return /*#__PURE__*/React.createElement(HorizontalTabs, props);
 };

package/styled-components/es/examples/plasma_b2c/components/Tabs/Tabs.stories.tsx

@@ -12,6 +12,7 @@ import { Tabs } from './Tabs';
 import { TabItem } from './TabItem';
 
 const clips = ['none', 'scroll', 'showAll'];
+const headerClips = ['none', 'scroll'];
 const sizes = ['xs', 's', 'm', 'l'] as const;
 const headerSizes = ['h5', 'h4', 'h3', 'h2', 'h1'] as const;
 
@@ -52,6 +53,7 @@ const getContentRight = (contentRightOption: string, size: Size) => {
 type StoryTabsProps = ComponentProps<typeof Tabs> & CustomStoryTabsProps;
 type HorizontalStoryTabsProps = StoryTabsProps & { width: string };
 type VerticalStoryTabsProps = StoryTabsProps & { height: string };
+type HeaderStoryTabsProps = StoryTabsProps & { width: string };
 
 const meta: Meta<StoryTabsProps> = {
     title: 'plasma_b2c/Tabs',
@@ -68,6 +70,7 @@ const meta: Meta<StoryTabsProps> = {
             'forwardedAs',
             'outsideScroll',
             'index',
+            'header',
         ]),
         contentRight: {
             options: contentRightOptions,
@@ -603,31 +606,23 @@ export const VerticalTabs: StoryObj<VerticalStoryTabsProps> = {
     },
 };
 
-const StoryHeaderTabs = (props: StoryTabsProps) => {
-    const {
-        disabled,
-        itemQuantity,
-        size,
-        contentLeft: contentLeftOption,
-        contentRight: contentRightOption,
-        hasDivider,
-        stretch,
-    } = props;
+const StoryHeaderDefault = (props: HeaderStoryTabsProps) => {
+    const { disabled, itemQuantity, size, hasDivider, helperText } = props;
     const items = Array(itemQuantity).fill(0);
     const [index, setIndex] = useState(0);
 
     return (
-        <Tabs view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size} stretch={stretch}>
+        <Tabs header view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size as HeaderSize}>
             {items.map((_, i) => (
                 <TabItem
+                    header
                     key={`item:${i}`}
                     view="divider"
                     selected={i === index}
                     onClick={() => !disabled && setIndex(i)}
                     tabIndex={!disabled ? 0 : -1}
                     disabled={disabled}
-                    contentLeft={getContentLeft(contentLeftOption, size as Size)}
-                    contentRight={getContentRight(contentRightOption, size as Size)}
+                    value={helperText}
                     size={size as HeaderSize}
                 >
                     {`Label${i + 1}`}
@@ -637,12 +632,46 @@ const StoryHeaderTabs = (props: StoryTabsProps) => {
     );
 };
 
-export const HeaderTabs: StoryObj<StoryTabsProps> = {
+const StoryHeaderScroll = (props: HeaderStoryTabsProps) => {
+    const { disabled, itemQuantity, size, hasDivider, helperText, width } = props;
+    const items = Array(itemQuantity).fill(0);
+    const [index, setIndex] = useState(0);
+
+    return (
+        <Tabs
+            header
+            view={hasDivider ? 'divider' : 'clear'}
+            disabled={disabled}
+            size={size as HeaderSize}
+            style={{ width }}
+        >
+            {items.map((_, i) => (
+                <TabItem
+                    header
+                    key={`item:${i}`}
+                    view="divider"
+                    selected={i === index}
+                    onClick={() => !disabled && setIndex(i)}
+                    tabIndex={!disabled ? 0 : -1}
+                    disabled={disabled}
+                    value={helperText}
+                    size={size as HeaderSize}
+                >
+                    {`Label${i + 1}`}
+                </TabItem>
+            ))}
+        </Tabs>
+    );
+};
+
+export const HeaderTabs: StoryObj<HeaderStoryTabsProps> = {
     args: {
         size: 'h5',
         disabled: false,
         hasDivider: true,
-        itemQuantity: 4,
+        helperText: '',
+        itemQuantity: 6,
+        width: '12rem',
     },
     argTypes: {
         size: {
@@ -651,23 +680,36 @@ export const HeaderTabs: StoryObj<StoryTabsProps> = {
                 type: 'select',
             },
         },
-        contentLeft: {
-            options: contentLeftOptions,
+        clip: {
+            options: headerClips,
             control: {
                 type: 'select',
             },
+            if: { arg: 'stretch', truthy: false },
         },
-        contentRight: {
-            options: contentRightOptions,
+        width: {
             control: {
-                type: 'select',
+                type: 'text',
             },
+            if: { arg: 'clip', eq: 'scroll' },
         },
-        clip: {
+        stretch: {
+            table: {
+                disable: true,
+            },
+        },
+        contentRight: {
             table: {
                 disable: true,
             },
         },
     },
-    render: (args) => <StoryHeaderTabs {...args} />,
+    render: (args) => {
+        switch (args.clip) {
+            case 'scroll':
+                return <StoryHeaderScroll {...args} />;
+            default:
+                return <StoryHeaderDefault {...args} />;
+        }
+    },
 };

package/styled-components/es/examples/plasma_b2c/components/Tabs/header/HeaderTabItem.config.js

@@ -0,0 +1,23 @@
+import { css } from 'styled-components';
+import { tabsTokens } from '../../../../../components/Tabs';
+export var config = {
+  defaults: {
+    view: 'divider',
+    size: 'h5'
+  },
+  variations: {
+    view: {
+      divider: /*#__PURE__*/css(["", ":var(--text-secondary);", ":var(--text-tertiary);", ":transparent;", ":var(--text-secondary-hover);", ":var(--text-secondary);", ":var(--text-secondary-active);", ":var(--text-secondary);", ":transparent;", ":var(--text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-primary);", ":var(--text-secondary);", ":transparent;", ":background-color 0.3s ease-in-out;", ":0;", ":0;", ":var(--surface-accent);", ":0.125rem;", ":var(--text-primary);", ":var(--text-primary);"], tabsTokens.itemColor, tabsTokens.itemValueColor, tabsTokens.itemBackgroundColor, tabsTokens.itemColorHover, tabsTokens.itemValueColorHover, tabsTokens.itemColorActive, tabsTokens.itemValueColorActive, tabsTokens.itemBackgroundColorHover, tabsTokens.itemSelectedColor, tabsTokens.itemSelectedValueColor, tabsTokens.itemSelectedBackgroundColor, tabsTokens.itemSelectedColorHover, tabsTokens.itemSelectedValueColorHover, tabsTokens.itemSelectedBackgroundColorHover, tabsTokens.itemBackgroundTransition, tabsTokens.itemPaddingClear, tabsTokens.itemContentPaddingClear, tabsTokens.outlineFocusColor, tabsTokens.itemSelectedDividerHeight, tabsTokens.itemSelectedDividerColor, tabsTokens.itemSelectedDividerColorHover)
+    },
+    size: {
+      h5: /*#__PURE__*/css(["", ":0.375rem;", ":auto;", ":3rem;", ":0rem;", ":1.75rem;", ":0.625rem;", ":var(--plasma-typo-h5-font-family);", ":var(--plasma-typo-h5-font-size);", ":var(--plasma-typo-h5-font-style);", ":var(--plasma-typo-h5-font-weight);", ":var(--plasma-typo-h5-letter-spacing);", ":var(--plasma-typo-h5-line-height);"], tabsTokens.itemBorderRadius, tabsTokens.itemWidth, tabsTokens.itemHeight, tabsTokens.itemPadding, tabsTokens.itemMarginLeft, tabsTokens.itemContentGap, tabsTokens.fontFamily, tabsTokens.fontSize, tabsTokens.fontStyle, tabsTokens.fontWeight, tabsTokens.letterSpacing, tabsTokens.lineHeight),
+      h4: /*#__PURE__*/css(["", ":0.375rem;", ":auto;", ":3.25rem;", ":0rem;", ":2rem;", ":0.625rem;", ":var(--plasma-typo-h4-font-family);", ":var(--plasma-typo-h4-font-size);", ":var(--plasma-typo-h4-font-style);", ":var(--plasma-typo-h4-font-weight);", ":var(--plasma-typo-h4-letter-spacing);", ":var(--plasma-typo-h4-line-height);"], tabsTokens.itemBorderRadius, tabsTokens.itemWidth, tabsTokens.itemHeight, tabsTokens.itemPadding, tabsTokens.itemMarginLeft, tabsTokens.itemContentGap, tabsTokens.fontFamily, tabsTokens.fontSize, tabsTokens.fontStyle, tabsTokens.fontWeight, tabsTokens.letterSpacing, tabsTokens.lineHeight),
+      h3: /*#__PURE__*/css(["", ":0.5rem;", ":auto;", ":3.875rem;", ":0rem;", ":2.25rem;", ":0.75rem;", ":var(--plasma-typo-h3-font-family);", ":var(--plasma-typo-h3-font-size);", ":var(--plasma-typo-h3-font-style);", ":var(--plasma-typo-h3-font-weight);", ":var(--plasma-typo-h3-letter-spacing);", ":var(--plasma-typo-h3-line-height);"], tabsTokens.itemBorderRadius, tabsTokens.itemWidth, tabsTokens.itemHeight, tabsTokens.itemPadding, tabsTokens.itemMarginLeft, tabsTokens.itemContentGap, tabsTokens.fontFamily, tabsTokens.fontSize, tabsTokens.fontStyle, tabsTokens.fontWeight, tabsTokens.letterSpacing, tabsTokens.lineHeight),
+      h2: /*#__PURE__*/css(["", ":0.625rem;", ":auto;", ":4.5rem;", ":0rem;", ":2.5rem;", ":1rem;", ":var(--plasma-typo-h2-font-family);", ":var(--plasma-typo-h2-font-size);", ":var(--plasma-typo-h2-font-style);", ":var(--plasma-typo-h2-font-weight);", ":var(--plasma-typo-h2-letter-spacing);", ":var(--plasma-typo-h2-line-height);"], tabsTokens.itemBorderRadius, tabsTokens.itemWidth, tabsTokens.itemHeight, tabsTokens.itemPadding, tabsTokens.itemMarginLeft, tabsTokens.itemContentGap, tabsTokens.fontFamily, tabsTokens.fontSize, tabsTokens.fontStyle, tabsTokens.fontWeight, tabsTokens.letterSpacing, tabsTokens.lineHeight),
+      h1: /*#__PURE__*/css(["", ":0.75rem;", ":auto;", ":5.75rem;", ":0rem;", ":3.5rem;", ":0.5rem;", ":var(--plasma-typo-h1-font-family);", ":var(--plasma-typo-h1-font-size);", ":var(--plasma-typo-h1-font-style);", ":var(--plasma-typo-h1-font-weight);", ":var(--plasma-typo-h1-letter-spacing);", ":var(--plasma-typo-h1-line-height);"], tabsTokens.itemBorderRadius, tabsTokens.itemWidth, tabsTokens.itemHeight, tabsTokens.itemPadding, tabsTokens.itemMarginLeft, tabsTokens.itemContentGap, tabsTokens.fontFamily, tabsTokens.fontSize, tabsTokens.fontStyle, tabsTokens.fontWeight, tabsTokens.letterSpacing, tabsTokens.lineHeight)
+    },
+    disabled: {
+      "true": /*#__PURE__*/css(["", ":0.4;"], tabsTokens.disabledOpacity)
+    }
+  }
+};