@salutejs/plasma-new-hope 0.113.0-dev.0 → 0.113.1-canary.1333.10181217073.0

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

@@ -2,25 +2,27 @@ import React, { useState } from 'react';
 import type { ComponentProps } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 import styled from 'styled-components';
+import { disableProps } from '@salutejs/plasma-sb-utils';
 
 import { tabsConfig } from '../../../../components/Tabs';
 import { mergeConfig } from '../../../../engines';
 import { argTypesFromConfig, WithTheme } from '../../../_helpers';
 import { IconMic } from '../../../../components/_Icon';
+import { Dropdown } from '../Dropdown/Dropdown';
 
 import { config } from './Tabs.config';
 import { Tabs } from './Tabs';
 import { TabItem } from './TabItem';
 
-const tabItemViews = ['clear', 'default', 'divider', 'secondary'];
+const clips = ['none', 'scroll', 'showAll'];
 
 type CustomStoryTabsProps = {
-    tabItemView: string;
+    hasDivider: boolean;
+    showLeftContent: boolean;
+    showRightContent: boolean;
     itemsNumber?: number;
     animated?: boolean;
     label?: string;
-    showLeftContent: boolean;
-    showRightContent: boolean;
 };
 
 type StoryTabsProps = ComponentProps<typeof Tabs> & CustomStoryTabsProps;
@@ -31,12 +33,13 @@ const meta: Meta<StoryTabsProps> = {
     decorators: [WithTheme],
     argTypes: {
         ...argTypesFromConfig(mergeConfig(tabsConfig, config)),
-        tabItemView: {
-            options: tabItemViews,
+        clip: {
+            options: clips,
             control: {
                 type: 'select',
             },
         },
+        ...disableProps(['view', 'tabItemView']),
     },
 };
 
@@ -46,114 +49,189 @@ const StoryDefault = (props: StoryTabsProps) => {
     const {
         itemsNumber,
         label,
-        view,
         disabled,
         stretch,
         pilled,
         animated,
-        tabItemView,
         size,
         showLeftContent,
         showRightContent,
+        hasDivider,
     } = props;
     const items = Array(itemsNumber).fill(0);
-    const secondItems = Array(10).fill(0);
     const [index, setIndex] = useState(0);
-    const [secondIndex, setSecondIndex] = useState(0);
-    const [thirdIndex, setThirdIndex] = useState(0);
 
     return (
-        <>
-            <h3>Tabs with auto width</h3>
-            <Tabs view={view} stretch={stretch} pilled={pilled} disabled={disabled} size={size}>
-                {items.map((_, i) => (
-                    <TabItem
-                        key={`item:${i}`}
-                        view={tabItemView}
-                        selected={i === index}
-                        onClick={() => !disabled && setIndex(i)}
-                        tabIndex={!disabled ? 0 : -1}
-                        disabled={disabled}
-                        pilled={pilled}
-                        animated={animated}
-                        contentLeft={showLeftContent && <IconMic size="xs" color="inherit" />}
-                        contentRight={showRightContent && <div>Text</div>}
-                        size={size}
-                    >
-                        {label}
-                    </TabItem>
-                ))}
-            </Tabs>
+        <Tabs view={hasDivider ? 'divider' : 'clear'} stretch={stretch} pilled={pilled} disabled={disabled} size={size}>
+            {items.map((_, i) => (
+                <TabItem
+                    key={`item:${i}`}
+                    view="divider"
+                    selected={i === index}
+                    onClick={() => !disabled && setIndex(i)}
+                    tabIndex={!disabled ? 0 : -1}
+                    disabled={disabled}
+                    pilled={pilled}
+                    animated={animated}
+                    contentLeft={showLeftContent && <IconMic size="xs" color="inherit" />}
+                    contentRight={showRightContent && <div>Text</div>}
+                    size={size}
+                >
+                    {`${label}${i}`}
+                </TabItem>
+            ))}
+        </Tabs>
+    );
+};
 
-            <h3>Tabs with fixed width</h3>
-            <Tabs
-                view={view}
-                stretch={stretch}
-                pilled={pilled}
-                disabled={disabled}
-                size={size}
-                style={{ width: '28.5rem' }}
-            >
-                {secondItems.map((_, i) => (
-                    <TabItem
-                        key={`item:${i}`}
-                        view={tabItemView}
-                        selected={i === secondIndex}
-                        onClick={() => !disabled && setSecondIndex(i)}
-                        tabIndex={!disabled ? 0 : -1}
-                        disabled={disabled}
-                        pilled={pilled}
-                        animated={animated}
-                        contentLeft={showLeftContent && <IconMic size="xs" color="inherit" />}
-                        contentRight={showRightContent && <div>Text</div>}
-                        size={size}
-                    >
-                        {label}
-                    </TabItem>
-                ))}
-            </Tabs>
+const StoryScroll = (props: StoryTabsProps) => {
+    const {
+        itemsNumber,
+        label,
+        disabled,
+        stretch,
+        pilled,
+        animated,
+        clip,
+        size,
+        showLeftContent,
+        showRightContent,
+        hasDivider,
+    } = props;
+    const items = Array(itemsNumber).fill(0);
+    const [index, setIndex] = useState(0);
 
-            <h3>Tabs with arrow navigation</h3>
-            <Tabs view={view} index={thirdIndex} stretch={stretch} pilled={pilled} disabled={disabled} size={size}>
-                {items.map((_, i) => (
-                    <TabItem
-                        key={`item:${i}`}
-                        view={tabItemView}
-                        selected={i === thirdIndex}
-                        itemIndex={i}
-                        onIndexChange={(i) => setThirdIndex(i)}
-                        onClick={() => !disabled && setThirdIndex(i)}
-                        tabIndex={!disabled ? 0 : -1}
-                        disabled={disabled}
-                        pilled={pilled}
-                        animated={animated}
-                        contentLeft={showLeftContent && <IconMic size="xs" color="inherit" />}
-                        contentRight={showRightContent && <div>Text</div>}
-                        size={size}
-                    >
-                        {label}
-                    </TabItem>
-                ))}
-            </Tabs>
-        </>
+    return (
+        <Tabs
+            clip={clip}
+            view={hasDivider ? 'divider' : 'clear'}
+            stretch={stretch}
+            pilled={pilled}
+            disabled={disabled}
+            size={size}
+            style={{ width: '15rem' }}
+        >
+            {items.map((_, i) => (
+                <TabItem
+                    key={`item:${i}`}
+                    view="divider"
+                    selected={i === index}
+                    onClick={() => !disabled && setIndex(i)}
+                    tabIndex={!disabled ? 0 : -1}
+                    disabled={disabled}
+                    pilled={pilled}
+                    animated={animated}
+                    contentLeft={showLeftContent && <IconMic size="xs" color="inherit" />}
+                    contentRight={showRightContent && <div>Text</div>}
+                    size={size}
+                >
+                    {`${label}${i}`}
+                </TabItem>
+            ))}
+        </Tabs>
+    );
+};
+
+const StoryShowAll = (props: StoryTabsProps) => {
+    const {
+        itemsNumber,
+        label,
+        disabled,
+        stretch,
+        pilled,
+        animated,
+        clip,
+        size,
+        showLeftContent,
+        showRightContent,
+        hasDivider,
+    } = props;
+    const maxItemsNumber = 3;
+    const items = Array(itemsNumber).fill(0);
+    const [index, setIndex] = useState(0);
+
+    const visibleItems = items.slice(0, maxItemsNumber);
+    const otherItems = items.slice(maxItemsNumber);
+
+    const dropdownItems = otherItems.map((_, i) => {
+        const itemIndex = maxItemsNumber + i;
+
+        return {
+            label: `${label}${itemIndex}`,
+            value: itemIndex,
+        };
+    });
+
+    return (
+        <Tabs
+            clip={clip}
+            view={hasDivider ? 'divider' : 'clear'}
+            stretch={stretch}
+            pilled={pilled}
+            disabled={disabled}
+            size={size}
+        >
+            {visibleItems.map((_, i) => (
+                <TabItem
+                    key={`item:${i}`}
+                    view="divider"
+                    selected={i === index}
+                    onClick={() => !disabled && setIndex(i)}
+                    tabIndex={!disabled ? 0 : -1}
+                    disabled={disabled}
+                    pilled={pilled}
+                    animated={animated}
+                    contentLeft={showLeftContent && <IconMic size="xs" color="inherit" />}
+                    contentRight={showRightContent && <div>Text</div>}
+                    size={size}
+                >
+                    {`${label}${i}`}
+                </TabItem>
+            ))}
+            {dropdownItems.length > 0 && (
+                <div style={{ marginLeft: '1.75rem' }}>
+                    <Dropdown size="xs" items={dropdownItems} onItemSelect={(item) => setIndex(item.value as number)}>
+                        <TabItem
+                            key="item:ShowAll"
+                            view="divider"
+                            tabIndex={!disabled ? 0 : -1}
+                            pilled={false}
+                            disabled={disabled}
+                            animated={animated}
+                            size={size}
+                        >
+                            ShowAll
+                        </TabItem>
+                    </Dropdown>
+                </div>
+            )}
+        </Tabs>
     );
 };
 
 export const Default: StoryObj<StoryTabsProps> = {
     args: {
         size: 'xs',
-        itemsNumber: 4,
-        tabItemView: 'divider',
+        itemsNumber: 10,
         disabled: false,
         stretch: false,
         pilled: false,
         animated: true,
-        view: 'divider',
         label: 'Label',
         showLeftContent: false,
         showRightContent: false,
+        hasDivider: true,
+    },
+    render: (args) => {
+        switch (args.clip) {
+            case 'scroll':
+                return <StoryScroll {...args} />;
+            case 'showAll':
+                return <StoryShowAll {...args} />;
+            default:
+                return <StoryDefault {...args} />;
+        }
     },
-    render: (args) => <StoryDefault {...args} />,
 };
 
 const StyledMultipleContainer = styled.div`
@@ -165,15 +243,14 @@ const StyledMultipleContainer = styled.div`
 const StoryMultiple = ({
     itemsNumber,
     label,
-    view,
     disabled,
     stretch,
     pilled,
     animated,
-    tabItemView,
     size,
     showLeftContent,
     showRightContent,
+    hasDivider,
 }: StoryTabsProps) => {
     const items = Array(itemsNumber).fill(0);
 
@@ -183,7 +260,7 @@ const StoryMultiple = ({
     return (
         <StyledMultipleContainer>
             <Tabs
-                view={view}
+                view={hasDivider ? 'divider' : 'clear'}
                 index={index1}
                 stretch={stretch}
                 pilled={pilled}
@@ -194,7 +271,7 @@ const StoryMultiple = ({
                 {items.map((_, i) => (
                     <TabItem
                         key={`item:${i}`}
-                        view={tabItemView}
+                        view="divider"
                         selected={i === index1}
                         itemIndex={i}
                         onIndexChange={(i) => setIndex1(i)}
@@ -212,7 +289,7 @@ const StoryMultiple = ({
                 ))}
             </Tabs>
             <Tabs
-                view={view}
+                view={hasDivider ? 'divider' : 'clear'}
                 index={index2}
                 stretch={stretch}
                 pilled={pilled}
@@ -223,7 +300,7 @@ const StoryMultiple = ({
                 {items.map((_, i) => (
                     <TabItem
                         key={`item:${i}`}
-                        view={tabItemView}
+                        view="divider"
                         selected={i === index2}
                         itemIndex={i}
                         onIndexChange={(i) => setIndex2(i)}
@@ -248,12 +325,10 @@ export const Multiple: StoryObj<StoryTabsProps> = {
     args: {
         size: 'xs',
         itemsNumber: 6,
-        tabItemView: 'divider',
         disabled: false,
         stretch: false,
         pilled: false,
         animated: true,
-        view: 'divider',
         label: 'Label',
         showLeftContent: false,
         showRightContent: false,

package/styled-components/es/examples/sds_engineer/components/Tabs/Tabs.config.js

@@ -3,14 +3,13 @@ import { tabsTokens } from '../../../../components/Tabs';
 export var config = {
   defaults: {
     view: 'divider',
-    size: 'xs',
-    disabled: 'false'
+    size: 'xs'
   },
   variations: {
     view: {
-      clear: /*#__PURE__*/css(["", ":var(--text-secondary);", ":tranparent;", ":var(--plasma-colors-button-focused);", ":0rem;", ":tranparent;", ":0rem;"], tabsTokens.arrowColor, tabsTokens.tabsBackgroundColor, tabsTokens.outlineFocusColor, tabsTokens.tabsDividerHeight, tabsTokens.tabsDividerColor, tabsTokens.tabsDividerBorderRadius),
-      filled: /*#__PURE__*/css(["", ":var(--text-secondary);", ":var(--surface-transparent-primary);", ":var(--plasma-colors-button-focused);", ":0rem;", ":tranparent;", ":0rem;"], tabsTokens.arrowColor, tabsTokens.tabsBackgroundColor, tabsTokens.outlineFocusColor, tabsTokens.tabsDividerHeight, tabsTokens.tabsDividerColor, tabsTokens.tabsDividerBorderRadius),
-      divider: /*#__PURE__*/css(["", ":var(--text-accent);", ":tranparent;", ":var(--plasma-colors-button-focused);", ":0.0625rem;", ":var(--surface-transparent-secondary);", ":0.0625rem;"], tabsTokens.arrowColor, tabsTokens.tabsBackgroundColor, tabsTokens.outlineFocusColor, tabsTokens.tabsDividerHeight, tabsTokens.tabsDividerColor, tabsTokens.tabsDividerBorderRadius)
+      clear: /*#__PURE__*/css(["", ":var(--text-secondary);", ":transparent;", ":var(--plasma-colors-button-focused);", ":0rem;", ":transparent;", ":0rem;"], tabsTokens.arrowColor, tabsTokens.tabsBackgroundColor, tabsTokens.outlineFocusColor, tabsTokens.tabsDividerHeight, tabsTokens.tabsDividerColor, tabsTokens.tabsDividerBorderRadius),
+      filled: /*#__PURE__*/css(["", ":var(--text-secondary);", ":var(--surface-transparent-primary);", ":var(--plasma-colors-button-focused);", ":0rem;", ":transparent;", ":0rem;"], tabsTokens.arrowColor, tabsTokens.tabsBackgroundColor, tabsTokens.outlineFocusColor, tabsTokens.tabsDividerHeight, tabsTokens.tabsDividerColor, tabsTokens.tabsDividerBorderRadius),
+      divider: /*#__PURE__*/css(["", ":var(--text-accent);", ":transparent;", ":var(--plasma-colors-button-focused);", ":0.0625rem;", ":var(--surface-transparent-secondary);", ":0.0625rem;"], tabsTokens.arrowColor, tabsTokens.tabsBackgroundColor, tabsTokens.outlineFocusColor, tabsTokens.tabsDividerHeight, tabsTokens.tabsDividerColor, tabsTokens.tabsDividerBorderRadius)
     },
     size: {
       xs: /*#__PURE__*/css(["", ":0.5rem;", ":fit-content;", ":auto;", ":0rem;", ":0.125rem;"], tabsTokens.tabsBorderRadius, tabsTokens.tabsWidth, tabsTokens.tabsHeight, tabsTokens.arrowInnerPadding, tabsTokens.arrowOuterPadding),

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

@@ -10,6 +10,8 @@ export declare const classes: {
     tabLeftContent: string;
     tabsHasLeftArrow: string;
     tabsHasRightArrow: string;
+    tabsClipScroll: string;
+    tabsClipShowAll: string;
 };
 export declare const tokens: {
     disabledOpacity: string;

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

@@ -1 +1 @@
-{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO;;;;;;;;;;;;CAYnB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmElB,CAAC"}
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO;;;;;;;;;;;;;;CAcnB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmElB,CAAC"}

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

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

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

@@ -2,31 +2,33 @@ import React from 'react';
 import type { RootProps } from '../../../../engines/types';
 import type { TabsProps } from './Tabs.types';
 export declare const tabsRoot: (Root: RootProps<HTMLDivElement, TabsProps>) => React.ForwardRefExoticComponent<import("../../../../types").AsProps<any> & React.HTMLAttributes<HTMLDivElement> & {
+    clip?: "scroll" | "showAll" | undefined;
     disabled?: boolean | undefined;
     stretch?: boolean | undefined;
     pilled?: boolean | undefined;
     size?: string | undefined;
     view?: string | undefined;
+    index?: number | undefined;
     outsideScroll?: boolean | {
         left?: string | undefined;
         right?: string | undefined;
     } | undefined;
-    index?: number | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
 export declare const tabsConfig: {
     name: string;
     tag: string;
     layout: (Root: RootProps<HTMLDivElement, TabsProps>) => React.ForwardRefExoticComponent<import("../../../../types").AsProps<any> & React.HTMLAttributes<HTMLDivElement> & {
+        clip?: "scroll" | "showAll" | undefined;
         disabled?: boolean | undefined;
         stretch?: boolean | undefined;
         pilled?: boolean | undefined;
         size?: string | undefined;
         view?: string | undefined;
+        index?: number | undefined;
         outsideScroll?: boolean | {
             left?: string | undefined;
             right?: string | undefined;
         } | undefined;
-        index?: number | undefined;
     } & React.RefAttributes<HTMLDivElement>>;
     base: import("@linaria/core").LinariaClassName;
     variations: {

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Tabs/ui/Tabs/Tabs.styles.ts"],"names":[],"mappings":";AAMA,eAAO,MAAM,IAAI,0CAIhB,CAAC;AAEF,eAAO,MAAM,aAAa,qKAIzB,CAAC;AAEF,eAAO,MAAM,oBAAoB,qKAmBhC,CAAC;AAEF,eAAO,MAAM,WAAW;;;EAyBvB,CAAC"}
+{"version":3,"file":"Tabs.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Tabs/ui/Tabs/Tabs.styles.ts"],"names":[],"mappings":";AAMA,eAAO,MAAM,IAAI,0CAIhB,CAAC;AAEF,eAAO,MAAM,aAAa,qKAIzB,CAAC;AAEF,eAAO,MAAM,oBAAoB,qKA0BhC,CAAC;AAEF,eAAO,MAAM,WAAW;;;EAyBvB,CAAC"}

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

@@ -1,6 +1,14 @@
 import type { HTMLAttributes } from 'react';
 import type { AsProps } from '../../../../types';
 export declare type TabsProps = AsProps & HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Как ведет себя компонент при ограничении ширины
+     * @default 'scroll'
+     * @description
+     * scroll - появляется прокрутка
+     * showAll - становится виден контент, выходящий за пределы компонента
+     */
+    clip?: 'scroll' | 'showAll';
     /**
      * Табы неактивны
      * @default false
@@ -24,6 +32,10 @@ export declare type TabsProps = AsProps & HTMLAttributes<HTMLDivElement> & {
      * Вид табов
      */
     view?: string;
+    /**
+     * Индекс активного элемента, необходим для клавиатурной навигации
+     */
+    index?: number;
     /**
      * Уберет скругление с выбранной стороны и подвинет контейнер
      * @deprecated
@@ -32,10 +44,5 @@ export declare type TabsProps = AsProps & HTMLAttributes<HTMLDivElement> & {
         left?: string;
         right?: string;
     };
-    /**
-     *
-     * Индекс активного элемента, необходим для клавиатурной навигации
-     */
-    index?: number;
 };
 //# sourceMappingURL=Tabs.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/Tabs/ui/Tabs/Tabs.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAEjD,oBAAY,SAAS,GAAG,OAAO,GAC3B,cAAc,CAAC,cAAc,CAAC,GAAG;IAC7B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5D;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC"}
+{"version":3,"file":"Tabs.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/Tabs/ui/Tabs/Tabs.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAEjD,oBAAY,SAAS,GAAG,OAAO,GAC3B,cAAc,CAAC,cAAc,CAAC,GAAG;IAC7B;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC5B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CAC/D,CAAC"}

package/types/examples/plasma_b2c/components/Tabs/Tabs.config.d.ts

@@ -2,7 +2,6 @@ export declare const config: {
     defaults: {
         view: string;
         size: string;
-        disabled: string;
     };
     variations: {
         view: {

package/types/examples/plasma_b2c/components/Tabs/Tabs.config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.config.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_b2c/components/Tabs/Tabs.config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqHlB,CAAC"}
+{"version":3,"file":"Tabs.config.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_b2c/components/Tabs/Tabs.config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoHlB,CAAC"}

package/types/examples/plasma_b2c/components/Tabs/Tabs.d.ts

@@ -1,14 +1,15 @@
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 export declare const Tabs: ForwardRefExoticComponent<import("../../../../types").AsProps<any> & import("react").HTMLAttributes<HTMLDivElement> & {
+    clip?: "scroll" | "showAll" | undefined;
     disabled?: boolean | undefined;
     stretch?: boolean | undefined;
     pilled?: boolean | undefined;
     size?: string | undefined;
     view?: string | undefined;
+    index?: number | undefined;
     outsideScroll?: boolean | {
         left?: string | undefined;
         right?: string | undefined;
     } | undefined;
-    index?: number | undefined;
 } & RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=Tabs.d.ts.map

package/types/examples/plasma_b2c/components/Tabs/Tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_b2c/components/Tabs/Tabs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,yBAAyB,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AASjE,eAAO,MAAM,IAAI;;;;;;;;;;;kCAAkG,CAAC"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_b2c/components/Tabs/Tabs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,yBAAyB,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AASjE,eAAO,MAAM,IAAI;;;;;;;;;;;;kCAAkG,CAAC"}

package/types/examples/plasma_web/components/Tabs/Tabs.config.d.ts

@@ -2,7 +2,6 @@ export declare const config: {
     defaults: {
         view: string;
         size: string;
-        disabled: string;
     };
     variations: {
         view: {

package/types/examples/plasma_web/components/Tabs/Tabs.config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.config.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_web/components/Tabs/Tabs.config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqHlB,CAAC"}
+{"version":3,"file":"Tabs.config.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_web/components/Tabs/Tabs.config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoHlB,CAAC"}

package/types/examples/plasma_web/components/Tabs/Tabs.d.ts

@@ -1,14 +1,15 @@
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 export declare const Tabs: ForwardRefExoticComponent<import("../../../../types").AsProps<any> & import("react").HTMLAttributes<HTMLDivElement> & {
+    clip?: "scroll" | "showAll" | undefined;
     disabled?: boolean | undefined;
     stretch?: boolean | undefined;
     pilled?: boolean | undefined;
     size?: string | undefined;
     view?: string | undefined;
+    index?: number | undefined;
     outsideScroll?: boolean | {
         left?: string | undefined;
         right?: string | undefined;
     } | undefined;
-    index?: number | undefined;
 } & RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=Tabs.d.ts.map

package/types/examples/plasma_web/components/Tabs/Tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_web/components/Tabs/Tabs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,yBAAyB,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AASjE,eAAO,MAAM,IAAI;;;;;;;;;;;kCAAkG,CAAC"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_web/components/Tabs/Tabs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,yBAAyB,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AASjE,eAAO,MAAM,IAAI;;;;;;;;;;;;kCAAkG,CAAC"}

package/types/examples/sds_engineer/components/Tabs/Tabs.config.d.ts

@@ -2,7 +2,6 @@ export declare const config: {
     defaults: {
         view: string;
         size: string;
-        disabled: string;
     };
     variations: {
         view: {

package/types/examples/sds_engineer/components/Tabs/Tabs.config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.config.d.ts","sourceRoot":"","sources":["../../../../../src/examples/sds_engineer/components/Tabs/Tabs.config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqHlB,CAAC"}
+{"version":3,"file":"Tabs.config.d.ts","sourceRoot":"","sources":["../../../../../src/examples/sds_engineer/components/Tabs/Tabs.config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoHlB,CAAC"}

package/types/examples/sds_engineer/components/Tabs/Tabs.d.ts

@@ -1,14 +1,15 @@
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 export declare const Tabs: ForwardRefExoticComponent<import("../../../../types").AsProps<any> & import("react").HTMLAttributes<HTMLDivElement> & {
+    clip?: "scroll" | "showAll" | undefined;
     disabled?: boolean | undefined;
     stretch?: boolean | undefined;
     pilled?: boolean | undefined;
     size?: string | undefined;
     view?: string | undefined;
+    index?: number | undefined;
     outsideScroll?: boolean | {
         left?: string | undefined;
         right?: string | undefined;
     } | undefined;
-    index?: number | undefined;
 } & RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=Tabs.d.ts.map

package/types/examples/sds_engineer/components/Tabs/Tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../../../src/examples/sds_engineer/components/Tabs/Tabs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,yBAAyB,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AASjE,eAAO,MAAM,IAAI;;;;;;;;;;;kCAAkG,CAAC"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../../../src/examples/sds_engineer/components/Tabs/Tabs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,yBAAyB,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AASjE,eAAO,MAAM,IAAI;;;;;;;;;;;;kCAAkG,CAAC"}