@skbkontur/react-ui 0.0.0-a18e664e8f → 0.0.0-a2ba583fb2

package/cjs/components/Tabs/Tab.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Tab.styles.ts"],"names":["globalClasses","focus","styles","root","t","paddingTop","tabPaddingY","paddingBottom","tabBorderWidth","css","tabTextColorDefault","tabFontSize","tabLineHeight","tabPaddingX","tabColorHover","vertical","tabOutlineWidth","tabColorFocus","disabled","ColorFunctions","red","green","blue","active","horizontalStyles","primary","tabColorHoverPrimary","success","tabColorHoverSuccess","warning","tabColorHoverWarning","error","tabColorHoverError","verticalStyles"],"mappings":"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","sourcesContent":["import { css, memoizeStyle, prefix } from '../../lib/theming/Emotion';\nimport { shift } from '../../lib/styles/DimensionFunctions';\nimport * as ColorFunctions from '../../lib/styles/ColorFunctions';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const globalClasses = prefix('tab')({\n  focus: 'focus',\n});\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    const paddingTop = t.tabPaddingY;\n    const paddingBottom = `calc(${t.tabPaddingY} - ${t.tabBorderWidth})`;\n    return css`\n      border-bottom: ${t.tabBorderWidth} solid transparent;\n      box-sizing: border-box;\n      color: ${t.tabTextColorDefault};\n      cursor: pointer;\n      display: inline-block;\n      font-size: ${t.tabFontSize};\n      line-height: ${t.tabLineHeight};\n      margin-left: ${t.tabPaddingX};\n      margin-right: ${t.tabPaddingX};\n      padding-bottom: ${paddingBottom};\n      padding-top: ${paddingTop};\n      position: relative;\n      text-decoration: inherit;\n      transition: border-bottom 0.2s ease-out;\n\n      &:hover {\n        outline: inherit;\n        border-bottom: ${t.tabBorderWidth} solid ${t.tabColorHover};\n      }\n\n      &:focus {\n        outline: inherit;\n      }\n    `;\n  },\n\n  vertical(t: Theme) {\n    return css`\n      border-bottom: none;\n      border-left: ${t.tabBorderWidth} solid transparent;\n      display: block;\n      margin-left: 0;\n      margin-right: 0;\n      padding-left: ${shift(t.tabPaddingX, `-${t.tabBorderWidth}`)};\n      padding-right: ${t.tabPaddingX};\n\n      &:hover {\n        border-bottom: none;\n        border-left: ${t.tabBorderWidth} solid ${t.tabColorHover};\n      }\n\n      .${globalClasses.focus} {\n        bottom: 0;\n        left: -${t.tabBorderWidth};\n        right: 0;\n      }\n    `;\n  },\n\n  focus(t: Theme) {\n    return css`\n      border: ${t.tabOutlineWidth} solid ${t.tabColorFocus};\n      bottom: -${t.tabBorderWidth};\n      left: -${t.tabPaddingX};\n      position: absolute;\n      right: -${t.tabPaddingX};\n      top: 0;\n    `;\n  },\n\n  disabled(t: Theme) {\n    return css`\n      color: rgba(\n        ${ColorFunctions.red(t.tabTextColorDefault)},\n        ${ColorFunctions.green(t.tabTextColorDefault)},\n        ${ColorFunctions.blue(t.tabTextColorDefault)},\n        0.5\n      );\n      cursor: default;\n    `;\n  },\n\n  active() {\n    return css`\n      cursor: default;\n    `;\n  },\n});\n\nexport const horizontalStyles = memoizeStyle({\n  active(t: Theme) {\n    return css`\n      &:hover {\n        border-bottom: ${t.tabBorderWidth} solid transparent;\n      }\n    `;\n  },\n\n  disabled() {\n    return css`\n      &:hover {\n        border-bottom-color: transparent;\n      }\n    `;\n  },\n\n  primary(t: Theme) {\n    return css`\n      &:hover {\n        border-bottom-color: ${t.tabColorHoverPrimary};\n      }\n    `;\n  },\n\n  success(t: Theme) {\n    return css`\n      &:hover {\n        border-bottom-color: ${t.tabColorHoverSuccess};\n      }\n    `;\n  },\n\n  warning(t: Theme) {\n    return css`\n      &:hover {\n        border-bottom-color: ${t.tabColorHoverWarning};\n      }\n    `;\n  },\n\n  error(t: Theme) {\n    return css`\n      &:hover {\n        border-bottom-color: ${t.tabColorHoverError};\n      }\n    `;\n  },\n});\n\nexport const verticalStyles = memoizeStyle({\n  active(t: Theme) {\n    return css`\n      &:hover {\n        border-left: ${t.tabBorderWidth} solid transparent;\n      }\n    `;\n  },\n\n  disabled() {\n    return css`\n      &:hover {\n        border-left-color: transparent;\n      }\n    `;\n  },\n\n  primary(t: Theme) {\n    return css`\n      &:hover {\n        border-left-color: ${t.tabColorHoverPrimary};\n      }\n    `;\n  },\n\n  success(t: Theme) {\n    return css`\n      &:hover {\n        border-left-color: ${t.tabColorHoverSuccess};\n      }\n    `;\n  },\n\n  warning(t: Theme) {\n    return css`\n      &:hover {\n        border-left-color: ${t.tabColorHoverWarning};\n      }\n    `;\n  },\n\n  error(t: Theme) {\n    return css`\n      &:hover {\n        border-left-color: ${t.tabColorHoverError};\n      }\n    `;\n  },\n});\n"]}
+{"version":3,"sources":["Tab.styles.ts"],"names":["globalClasses","focus","styles","rootSmall","t","tabRoot","rootMedium","rootLarge","verticalSmall","tabVertical","verticalMedium","verticalLarge","focusSmall","tabFocus","focusMedium","focusLarge","disabled","css","ColorFunctions","red","tabTextColorDefault","green","blue","active","horizontalStyles","tabBorderWidth","primary","tabColorHoverPrimary","success","tabColorHoverSuccess","warning","tabColorHoverWarning","error","tabColorHoverError","verticalStyles","size","transitionDuration","transitionTimingFunction","tabColorHover","tabOutlineWidth","tabColorFocus"],"mappings":"wVAAA;AACA;AACA;;;;AAIA,oC;;AAEO,IAAMA,aAAa,GAAG,qBAAO,KAAP,EAAc;AACzCC,EAAAA,KAAK,EAAE,OADkC,EAAd,CAAtB,C;;;AAIA,IAAMC,MAAM,GAAG,2BAAa;AACjCC,EAAAA,SADiC,qBACvBC,CADuB,EACb;AAClB,WAAOC,OAAO,CAACD,CAAD,EAAI,OAAJ,CAAd;AACD,GAHgC;;AAKjCE,EAAAA,UALiC,sBAKtBF,CALsB,EAKZ;AACnB,WAAOC,OAAO,CAACD,CAAD,EAAI,QAAJ,CAAd;AACD,GAPgC;;AASjCG,EAAAA,SATiC,qBASvBH,CATuB,EASb;AAClB,WAAOC,OAAO,CAACD,CAAD,EAAI,OAAJ,CAAd;AACD,GAXgC;;AAajCI,EAAAA,aAbiC,yBAanBJ,CAbmB,EAaT;AACtB,WAAOK,WAAW,CAACL,CAAD,EAAI,OAAJ,CAAlB;AACD,GAfgC;;AAiBjCM,EAAAA,cAjBiC,0BAiBlBN,CAjBkB,EAiBR;AACvB,WAAOK,WAAW,CAACL,CAAD,EAAI,QAAJ,CAAlB;AACD,GAnBgC;;AAqBjCO,EAAAA,aArBiC,yBAqBnBP,CArBmB,EAqBT;AACtB,WAAOK,WAAW,CAACL,CAAD,EAAI,OAAJ,CAAlB;AACD,GAvBgC;;AAyBjCQ,EAAAA,UAzBiC,sBAyBtBR,CAzBsB,EAyBZ;AACnB,WAAOS,QAAQ,CAACT,CAAD,EAAI,OAAJ,CAAf;AACD,GA3BgC;;AA6BjCU,EAAAA,WA7BiC,uBA6BrBV,CA7BqB,EA6BX;AACpB,WAAOS,QAAQ,CAACT,CAAD,EAAI,QAAJ,CAAf;AACD,GA/BgC;;AAiCjCW,EAAAA,UAjCiC,sBAiCtBX,CAjCsB,EAiCZ;AACnB,WAAOS,QAAQ,CAACT,CAAD,EAAI,OAAJ,CAAf;AACD,GAnCgC;;AAqCjCY,EAAAA,QArCiC,oBAqCxBZ,CArCwB,EAqCd;AACjB,eAAOa,YAAP;;AAEMC,IAAAA,cAAc,CAACC,GAAf,CAAmBf,CAAC,CAACgB,mBAArB,CAFN;AAGMF,IAAAA,cAAc,CAACG,KAAf,CAAqBjB,CAAC,CAACgB,mBAAvB,CAHN;AAIMF,IAAAA,cAAc,CAACI,IAAf,CAAoBlB,CAAC,CAACgB,mBAAtB,CAJN;;;;;AASD,GA/CgC;;AAiDjCG,EAAAA,MAjDiC,oBAiDxB;AACP,eAAON,YAAP;;;AAGD,GArDgC,EAAb,CAAf,C;;;AAwDA,IAAMO,gBAAgB,GAAG,2BAAa;AAC3CD,EAAAA,MAD2C,kBACpCnB,CADoC,EAC1B;AACf,eAAOa,YAAP;;AAEqBb,IAAAA,CAAC,CAACqB,cAFvB;;;AAKD,GAP0C;;AAS3CT,EAAAA,QAT2C,sBAShC;AACT,eAAOC,YAAP;;;;;AAKD,GAf0C;;AAiB3CS,EAAAA,OAjB2C,mBAiBnCtB,CAjBmC,EAiBzB;AAChB,eAAOa,YAAP;;AAE2Bb,IAAAA,CAAC,CAACuB,oBAF7B;;;AAKD,GAvB0C;;AAyB3CC,EAAAA,OAzB2C,mBAyBnCxB,CAzBmC,EAyBzB;AAChB,eAAOa,YAAP;;AAE2Bb,IAAAA,CAAC,CAACyB,oBAF7B;;;AAKD,GA/B0C;;AAiC3CC,EAAAA,OAjC2C,mBAiCnC1B,CAjCmC,EAiCzB;AAChB,eAAOa,YAAP;;AAE2Bb,IAAAA,CAAC,CAAC2B,oBAF7B;;;AAKD,GAvC0C;;AAyC3CC,EAAAA,KAzC2C,iBAyCrC5B,CAzCqC,EAyC3B;AACd,eAAOa,YAAP;;AAE2Bb,IAAAA,CAAC,CAAC6B,kBAF7B;;;AAKD,GA/C0C,EAAb,CAAzB,C;;;AAkDA,IAAMC,cAAc,GAAG,2BAAa;AACzCX,EAAAA,MADyC,kBAClCnB,CADkC,EACxB;AACf,eAAOa,YAAP;;AAEmBb,IAAAA,CAAC,CAACqB,cAFrB;;;AAKD,GAPwC;;AASzCT,EAAAA,QATyC,sBAS9B;AACT,eAAOC,YAAP;;;;;AAKD,GAfwC;;AAiBzCS,EAAAA,OAjByC,mBAiBjCtB,CAjBiC,EAiBvB;AAChB,eAAOa,YAAP;;AAEyBb,IAAAA,CAAC,CAACuB,oBAF3B;;;AAKD,GAvBwC;;AAyBzCC,EAAAA,OAzByC,mBAyBjCxB,CAzBiC,EAyBvB;AAChB,eAAOa,YAAP;;AAEyBb,IAAAA,CAAC,CAACyB,oBAF3B;;;AAKD,GA/BwC;;AAiCzCC,EAAAA,OAjCyC,mBAiCjC1B,CAjCiC,EAiCvB;AAChB,eAAOa,YAAP;;AAEyBb,IAAAA,CAAC,CAAC2B,oBAF3B;;;AAKD,GAvCwC;;AAyCzCC,EAAAA,KAzCyC,iBAyCnC5B,CAzCmC,EAyCzB;AACd,eAAOa,YAAP;;AAEyBb,IAAAA,CAAC,CAAC6B,kBAF3B;;;AAKD,GA/CwC,EAAb,CAAvB,C;;;AAkDP,SAAS5B,OAAT,CAAiBD,CAAjB,EAA2B+B,IAA3B,EAA2C;AACzC,aAAOlB,YAAP;AACmBb,EAAAA,CAAC,CAACqB,cADrB;;AAGWrB,EAAAA,CAAC,CAACgB,mBAHb;;;AAMe,yBAAShB,CAAT,EAAY+B,IAAZ,CANf;AAOiB,2BAAW/B,CAAX,EAAc+B,IAAd,CAPjB;AAQiB,yBAAS/B,CAAT,EAAY+B,IAAZ,CARjB;AASkB,yBAAS/B,CAAT,EAAY+B,IAAZ,CATlB;AAUyB,yBAAS/B,CAAT,EAAY+B,IAAZ,CAVzB,EAUgD/B,CAAC,CAACqB,cAVlD;AAWiB,yBAASrB,CAAT,EAAY+B,IAAZ,CAXjB;;;AAc8B/B,EAAAA,CAAC,CAACgC,kBAdhC,EAcsDhC,CAAC,CAACiC,wBAdxD;;;;AAkBqBjC,EAAAA,CAAC,CAACqB,cAlBvB,EAkB+CrB,CAAC,CAACkC,aAlBjD;;;;;;;AAyBD;;AAED,SAAS7B,WAAT,CAAqBL,CAArB,EAA+B+B,IAA/B,EAA+C;AAC7C,aAAOlB,YAAP;;AAEiBb,EAAAA,CAAC,CAACqB,cAFnB;;;;AAMkB,iCAAM,uBAASrB,CAAT,EAAY+B,IAAZ,CAAN,QAA6B/B,CAAC,CAACqB,cAA/B,CANlB;AAOmB,yBAASrB,CAAT,EAAY+B,IAAZ,CAPnB;;;;AAWmB/B,EAAAA,CAAC,CAACqB,cAXrB,EAW6CrB,CAAC,CAACkC,aAX/C;;;AAcKtC,EAAAA,aAAa,CAACC,KAdnB;;AAgBaG,EAAAA,CAAC,CAACqB,cAhBf;;;;AAoBD;;AAED,SAASZ,QAAT,CAAkBT,CAAlB,EAA4B+B,IAA5B,EAA4C;AAC1C,aAAOlB,YAAP;AACYb,EAAAA,CAAC,CAACmC,eADd,EACuCnC,CAAC,CAACoC,aADzC;AAEapC,EAAAA,CAAC,CAACqB,cAFf;AAGW,yBAASrB,CAAT,EAAY+B,IAAZ,CAHX;;AAKY,yBAAS/B,CAAT,EAAY+B,IAAZ,CALZ;;;AAQD","sourcesContent":["import { css, memoizeStyle, prefix } from '../../lib/theming/Emotion';\nimport { shift } from '../../lib/styles/DimensionFunctions';\nimport * as ColorFunctions from '../../lib/styles/ColorFunctions';\nimport { Theme } from '../../lib/theming/Theme';\nimport { SizeProp } from '../../lib/types/props';\n\nimport { fontSize, lineHeight, paddingX, paddingY } from './helpers';\n\nexport const globalClasses = prefix('tab')({\n  focus: 'focus',\n});\n\nexport const styles = memoizeStyle({\n  rootSmall(t: Theme) {\n    return tabRoot(t, 'small');\n  },\n\n  rootMedium(t: Theme) {\n    return tabRoot(t, 'medium');\n  },\n\n  rootLarge(t: Theme) {\n    return tabRoot(t, 'large');\n  },\n\n  verticalSmall(t: Theme) {\n    return tabVertical(t, 'small');\n  },\n\n  verticalMedium(t: Theme) {\n    return tabVertical(t, 'medium');\n  },\n\n  verticalLarge(t: Theme) {\n    return tabVertical(t, 'large');\n  },\n\n  focusSmall(t: Theme) {\n    return tabFocus(t, 'small');\n  },\n\n  focusMedium(t: Theme) {\n    return tabFocus(t, 'medium');\n  },\n\n  focusLarge(t: Theme) {\n    return tabFocus(t, 'large');\n  },\n\n  disabled(t: Theme) {\n    return css`\n      color: rgba(\n        ${ColorFunctions.red(t.tabTextColorDefault)},\n        ${ColorFunctions.green(t.tabTextColorDefault)},\n        ${ColorFunctions.blue(t.tabTextColorDefault)},\n        0.5\n      );\n      cursor: default;\n    `;\n  },\n\n  active() {\n    return css`\n      cursor: default;\n    `;\n  },\n});\n\nexport const horizontalStyles = memoizeStyle({\n  active(t: Theme) {\n    return css`\n      &:hover {\n        border-bottom: ${t.tabBorderWidth} solid transparent;\n      }\n    `;\n  },\n\n  disabled() {\n    return css`\n      &:hover {\n        border-bottom-color: transparent;\n      }\n    `;\n  },\n\n  primary(t: Theme) {\n    return css`\n      &:hover {\n        border-bottom-color: ${t.tabColorHoverPrimary};\n      }\n    `;\n  },\n\n  success(t: Theme) {\n    return css`\n      &:hover {\n        border-bottom-color: ${t.tabColorHoverSuccess};\n      }\n    `;\n  },\n\n  warning(t: Theme) {\n    return css`\n      &:hover {\n        border-bottom-color: ${t.tabColorHoverWarning};\n      }\n    `;\n  },\n\n  error(t: Theme) {\n    return css`\n      &:hover {\n        border-bottom-color: ${t.tabColorHoverError};\n      }\n    `;\n  },\n});\n\nexport const verticalStyles = memoizeStyle({\n  active(t: Theme) {\n    return css`\n      &:hover {\n        border-left: ${t.tabBorderWidth} solid transparent;\n      }\n    `;\n  },\n\n  disabled() {\n    return css`\n      &:hover {\n        border-left-color: transparent;\n      }\n    `;\n  },\n\n  primary(t: Theme) {\n    return css`\n      &:hover {\n        border-left-color: ${t.tabColorHoverPrimary};\n      }\n    `;\n  },\n\n  success(t: Theme) {\n    return css`\n      &:hover {\n        border-left-color: ${t.tabColorHoverSuccess};\n      }\n    `;\n  },\n\n  warning(t: Theme) {\n    return css`\n      &:hover {\n        border-left-color: ${t.tabColorHoverWarning};\n      }\n    `;\n  },\n\n  error(t: Theme) {\n    return css`\n      &:hover {\n        border-left-color: ${t.tabColorHoverError};\n      }\n    `;\n  },\n});\n\nfunction tabRoot(t: Theme, size: SizeProp) {\n  return css`\n    border-bottom: ${t.tabBorderWidth} solid transparent;\n    box-sizing: border-box;\n    color: ${t.tabTextColorDefault};\n    cursor: pointer;\n    display: inline-block;\n    font-size: ${fontSize(t, size)};\n    line-height: ${lineHeight(t, size)};\n    margin-left: ${paddingX(t, size)};\n    margin-right: ${paddingX(t, size)};\n    padding-bottom: calc(${paddingY(t, size)} - ${t.tabBorderWidth});\n    padding-top: ${paddingY(t, size)};\n    position: relative;\n    text-decoration: inherit;\n    transition: border-bottom ${t.transitionDuration} ${t.transitionTimingFunction};\n\n    &:hover {\n      outline: inherit;\n      border-bottom: ${t.tabBorderWidth} solid ${t.tabColorHover};\n    }\n\n    &:focus {\n      outline: inherit;\n    }\n  `;\n}\n\nfunction tabVertical(t: Theme, size: SizeProp) {\n  return css`\n    border-bottom: none;\n    border-left: ${t.tabBorderWidth} solid transparent;\n    display: block;\n    margin-left: 0;\n    margin-right: 0;\n    padding-left: ${shift(paddingX(t, size), `-${t.tabBorderWidth}`)};\n    padding-right: ${paddingX(t, size)};\n\n    &:hover {\n      border-bottom: none;\n      border-left: ${t.tabBorderWidth} solid ${t.tabColorHover};\n    }\n\n    .${globalClasses.focus} {\n      bottom: 0;\n      left: -${t.tabBorderWidth};\n      right: 0;\n    }\n  `;\n}\n\nfunction tabFocus(t: Theme, size: SizeProp) {\n  return css`\n    border: ${t.tabOutlineWidth} solid ${t.tabColorFocus};\n    bottom: -${t.tabBorderWidth};\n    left: -${paddingX(t, size)};\n    position: absolute;\n    right: -${paddingX(t, size)};\n    top: 0;\n  `;\n}\n"]}

package/cjs/components/Tabs/Tabs.d.ts

@@ -1,56 +1,59 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { AriaAttributes } from 'react';
 import { CommonProps } from '../../internal/CommonWrapper';
+import { SizeProp } from '../../lib/types/props';
 import { Tab } from './Tab';
-export interface TabsProps<T extends string = string> extends CommonProps {
+declare type ValueBaseType = string;
+export interface TabsProps<T extends ValueBaseType = string> extends CommonProps {
     /**
-     * Tab component should be child of Tabs component
-     */
-    children?: React.ReactNode;
-    /**
-     * Classname of indicator
+     * Позволяет задать кастомный класс подчёркиванию таба.
      */
     indicatorClassName?: string;
     /**
-     * Tabs change event
+     * Задаёт размер контрола.
+     *
+     * **Допустимые значения**: `"small"`, `"medium"`, `"large"`.
      */
-    onValueChange?: (value: T) => void;
+    size?: SizeProp;
     /**
-     * Active tab identifier
+     * Задаёт текущий активный `<Tab />`. Принимает `id` таба.
      */
     value: T;
     /**
-     * Vertical indicator
+     * Функция, позволяющая изменить текущий активный `<Tab />`.
+     */
+    onValueChange?: (value: T) => void;
+    /**
+     * Переводит компонент в режим вертикального отображения.
      * @default false
      */
-    vertical: boolean;
+    vertical?: boolean;
     /**
-     * Width of tabs container
+     * `CSS`-свойство `width`.
      */
     width?: number | string;
+    /**
+     * Атрибут для указания id элемента(-ов), описывающих его.
+     */
+    'aria-describedby'?: AriaAttributes['aria-describedby'];
 }
+export declare const TabsDataTids: {
+    readonly root: "Tabs__root";
+    readonly indicatorRoot: "Indicator__root";
+};
+declare type DefaultProps = Required<Pick<TabsProps, 'vertical' | 'size'>>;
 /**
- * Tabs wrapper
- *
- * contains static property `Tab`
+ * Родитель компонента `<Tab />`. Связывает `Tab`'ы в группу и позволяет управлять их состоянием.
  */
 export declare class Tabs<T extends string = string> extends React.Component<TabsProps<T>> {
     static __KONTUR_REACT_UI__: string;
-    static propTypes: {
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        indicatorClassName: PropTypes.Requireable<string>;
-        value: PropTypes.Validator<string>;
-        vertical: PropTypes.Requireable<boolean>;
-        width: PropTypes.Requireable<string | number>;
-    };
-    static defaultProps: {
-        vertical: boolean;
-    };
+    static defaultProps: DefaultProps;
+    private getProps;
     static Tab: typeof Tab;
     private theme;
     private tabs;
     private tabUpdates;
     private listeners;
+    private setRootNode;
     render(): JSX.Element;
     private shiftFocus;
     private notifyUpdate;
@@ -59,3 +62,4 @@ export declare class Tabs<T extends string = string> extends React.Component<Tab
     private addTab;
     private removeTab;
 }
+export {};

package/cjs/components/Tabs/Tabs.js

@@ -1,16 +1,26 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.Tabs = void 0;var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
-var _reactDom = require("react-dom");
-var _propTypes = _interopRequireDefault(require("prop-types"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.TabsDataTids = exports.Tabs = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+var _globalObject = require("@skbkontur/global-object");
+
 
 var _ThemeContext = require("../../lib/theming/ThemeContext");
 
 var _CommonWrapper = require("../../internal/CommonWrapper");
 var _Emotion = require("../../lib/theming/Emotion");
+var _getRootNode = require("../../lib/rootNode/getRootNode");
+var _rootNode = require("../../lib/rootNode");
+var _createPropsGetter = require("../../lib/createPropsGetter");
+
+var _isInstanceOf = require("../../lib/isInstanceOf");
 
 var _Indicator = require("./Indicator");
 var _Tabs = require("./Tabs.styles");
 var _TabsContext = require("./TabsContext");
-var _Tab = require("./Tab");
+var _Tab = require("./Tab");var _class, _class2, _temp;
+
+
+
+
+
 
 
 
@@ -45,18 +55,26 @@ var _Tab = require("./Tab");
 
 
 
-/**
- * Tabs wrapper
- *
- * contains static property `Tab`
- */var
-Tabs = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Tabs, _React$Component);function Tabs() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
 
 
 
 
 
 
+
+
+var TabsDataTids = {
+  root: 'Tabs__root',
+  indicatorRoot: 'Indicator__root' };exports.TabsDataTids = TabsDataTids;
+
+
+
+
+/**
+ * Родитель компонента `<Tab />`. Связывает `Tab`'ы в группу и позволяет управлять их состоянием.
+ */var
+
+Tabs = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Tabs, _React$Component);function Tabs() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
 
 
 
@@ -64,14 +82,13 @@ Tabs = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Ta
 
 
 
+    getProps = (0, _createPropsGetter.createPropsGetter)(Tabs.defaultProps);_this.
 
 
-    theme = void 0;_this.
 
-    tabs =
 
 
-    [];_this.
+    tabs = [];_this.
 
     tabUpdates = {
       on: function on(cb) {
@@ -117,19 +134,32 @@ Tabs = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Ta
 
 
 
-    shiftFocus = function (fromTab, delta) {var _assertThisInitialize = (0, _assertThisInitialized2.default)(_this),
-      tabs = _assertThisInitialize.tabs;
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    shiftFocus = function (fromTab, delta) {
+      var _assertThisInitialize = (0, _assertThisInitialized2.default)(_this),tabs = _assertThisInitialize.tabs;
       var index = tabs.findIndex(function (x) {return x.id === fromTab;});
       var newIndex = Math.max(0, Math.min(index + delta, tabs.length - 1));
       var tab = tabs[newIndex];
 
       var tabNode = tab.getNode();
-      var htmlNode = null;
-      if (tabNode instanceof _react.default.Component) {
-        htmlNode = (0, _reactDom.findDOMNode)(tabNode);
-      }
+      var htmlNode = (0, _getRootNode.getRootNode)(tabNode);
 
-      if (htmlNode && htmlNode instanceof HTMLElement && typeof htmlNode.focus === 'function') {
+      if ((0, _isInstanceOf.isInstanceOf)(htmlNode, _globalObject.globalObject.HTMLElement) && typeof htmlNode.focus === 'function') {
         htmlNode.focus();
       }
     };_this.
@@ -138,15 +168,15 @@ Tabs = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Ta
       _this.listeners.forEach(function (cb) {return cb();});
     };_this.
 
-    switchTab = function (id) {var _this$props =
-      _this.props,onValueChange = _this$props.onValueChange,value = _this$props.value;
+    switchTab = function (id) {
+      var _this$props = _this.props,onValueChange = _this$props.onValueChange,value = _this$props.value;
       if (id !== value && onValueChange) {
         onValueChange(id);
       }
     };_this.
 
-    getTab = function (id) {var _ref =
-      _this.tabs.find(function (x) {return x.id === id;}) || {},_ref$getNode = _ref.getNode,getNode = _ref$getNode === void 0 ? null : _ref$getNode;
+    getTab = function (id) {
+      var _ref = _this.tabs.find(function (x) {return x.id === id;}) || {},_ref$getNode = _ref.getNode,getNode = _ref$getNode === void 0 ? null : _ref$getNode;
       return getNode && getNode();
     };_this.
 
@@ -156,4 +186,4 @@ Tabs = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Ta
 
     removeTab = function (id) {
       _this.tabs = _this.tabs.filter(function (tab) {return tab.id !== id;});
-    };return _this;}var _proto = Tabs.prototype;_proto.render = function render() {var _this2 = this;var _this$props2 = this.props,vertical = _this$props2.vertical,value = _this$props2.value,width = _this$props2.width,children = _this$props2.children,indicatorClassName = _this$props2.indicatorClassName;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, _this2.props, /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(_Tabs.styles.root(_this2.theme), vertical && _Tabs.styles.vertical()), style: { width: width } }, /*#__PURE__*/_react.default.createElement(_TabsContext.TabsContext.Provider, { value: { vertical: vertical, activeTab: value, getTab: _this2.getTab, addTab: _this2.addTab, removeTab: _this2.removeTab, notifyUpdate: _this2.notifyUpdate, shiftFocus: _this2.shiftFocus, switchTab: _this2.switchTab } }, children, /*#__PURE__*/_react.default.createElement(_Indicator.Indicator, { className: indicatorClassName, tabUpdates: _this2.tabUpdates, vertical: vertical }))));});};return Tabs;}(_react.default.Component);exports.Tabs = Tabs;Tabs.__KONTUR_REACT_UI__ = 'Tabs';Tabs.propTypes = { children: _propTypes.default.node, indicatorClassName: _propTypes.default.string, value: _propTypes.default.string.isRequired, vertical: _propTypes.default.bool, width: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]) };Tabs.defaultProps = { vertical: false };Tabs.Tab = _Tab.Tab;
+    };return _this;}var _proto = Tabs.prototype;_proto.render = function render() {var _this2 = this;var _this$props2 = this.props,value = _this$props2.value,width = _this$props2.width,children = _this$props2.children,indicatorClassName = _this$props2.indicatorClassName,ariaDescribedby = _this$props2['aria-describedby'];var _this$getProps = this.getProps(),vertical = _this$getProps.vertical,size = _this$getProps.size;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {var _cx;_this2.theme = theme;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: _this2.setRootNode }, _this2.props), /*#__PURE__*/_react.default.createElement("div", { "data-tid": TabsDataTids.root, className: (0, _Emotion.cx)((_cx = {}, _cx[_Tabs.styles.rootSmall(_this2.theme)] = size === 'small', _cx[_Tabs.styles.rootMedium(_this2.theme)] = size === 'medium', _cx[_Tabs.styles.rootLarge(_this2.theme)] = size === 'large', _cx[_Tabs.styles.vertical()] = vertical, _cx)), style: { width: width }, "aria-describedby": ariaDescribedby }, /*#__PURE__*/_react.default.createElement(_TabsContext.TabsContext.Provider, { value: { vertical: vertical, activeTab: value, size: size, getTab: _this2.getTab, addTab: _this2.addTab, removeTab: _this2.removeTab, notifyUpdate: _this2.notifyUpdate, shiftFocus: _this2.shiftFocus, switchTab: _this2.switchTab } }, children, /*#__PURE__*/_react.default.createElement(_Indicator.Indicator, { className: indicatorClassName, tabUpdates: _this2.tabUpdates, vertical: _this2.getProps().vertical }))));});};return Tabs;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Tabs', _class2.defaultProps = { vertical: false, size: 'large' }, _class2.Tab = _Tab.Tab, _temp)) || _class;exports.Tabs = Tabs;

package/cjs/components/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Tabs.tsx"],"names":["Tabs","theme","tabs","tabUpdates","on","cb","index","listeners","push","splice","shiftFocus","fromTab","delta","findIndex","x","id","newIndex","Math","max","min","length","tab","tabNode","getNode","htmlNode","React","Component","HTMLElement","focus","notifyUpdate","forEach","switchTab","props","onValueChange","value","getTab","find","addTab","concat","removeTab","filter","render","vertical","width","children","indicatorClassName","styles","root","activeTab","__KONTUR_REACT_UI__","propTypes","PropTypes","node","string","isRequired","bool","oneOfType","number","defaultProps","Tab"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { findDOMNode } from 'react-dom';\nimport PropTypes from 'prop-types';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { Indicator } from './Indicator';\nimport { styles } from './Tabs.styles';\nimport { TabsContext, TabsContextType } from './TabsContext';\nimport { Tab } from './Tab';\n\nexport interface TabsProps<T extends string = string> extends CommonProps {\n  /**\n   * Tab component should be child of Tabs component\n   */\n  children?: React.ReactNode;\n\n  /**\n   * Classname of indicator\n   */\n  indicatorClassName?: string;\n\n  /**\n   * Tabs change event\n   */\n  onValueChange?: (value: T) => void;\n\n  /**\n   * Active tab identifier\n   */\n  value: T;\n\n  /**\n   * Vertical indicator\n   * @default false\n   */\n  vertical: boolean;\n\n  /**\n   * Width of tabs container\n   */\n  width?: number | string;\n}\n\n/**\n * Tabs wrapper\n *\n * contains static property `Tab`\n */\nexport class Tabs<T extends string = string> extends React.Component<TabsProps<T>> {\n  public static __KONTUR_REACT_UI__ = 'Tabs';\n\n  public static propTypes = {\n    children: PropTypes.node,\n    indicatorClassName: PropTypes.string,\n    value: PropTypes.string.isRequired,\n    vertical: PropTypes.bool,\n    width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  };\n  public static defaultProps = {\n    vertical: false,\n  };\n\n  public static Tab = Tab;\n\n  private theme!: Theme;\n\n  private tabs: Array<{\n    getNode: () => Tab<T> | null;\n    id: T;\n  }> = [];\n\n  private tabUpdates = {\n    on: (cb: () => void) => {\n      const index = this.listeners.push(cb);\n      return () => {\n        this.listeners.splice(index, 1);\n      };\n    },\n  };\n\n  private listeners: Array<() => void> = [];\n\n  public render(): JSX.Element {\n    const { vertical, value, width, children, indicatorClassName } = this.props;\n\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return (\n            <CommonWrapper {...this.props}>\n              <div className={cx(styles.root(this.theme), vertical && styles.vertical())} style={{ width }}>\n                <TabsContext.Provider\n                  value={{\n                    vertical,\n                    activeTab: value,\n                    getTab: this.getTab,\n                    addTab: this.addTab,\n                    removeTab: this.removeTab,\n                    notifyUpdate: this.notifyUpdate,\n                    shiftFocus: this.shiftFocus,\n                    switchTab: this.switchTab,\n                  }}\n                >\n                  {children}\n                  <Indicator className={indicatorClassName} tabUpdates={this.tabUpdates} vertical={vertical} />\n                </TabsContext.Provider>\n              </div>\n            </CommonWrapper>\n          );\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private shiftFocus: TabsContextType<T>['shiftFocus'] = (fromTab, delta) => {\n    const { tabs } = this;\n    const index = tabs.findIndex((x) => x.id === fromTab);\n    const newIndex = Math.max(0, Math.min(index + delta, tabs.length - 1));\n    const tab = tabs[newIndex];\n\n    const tabNode = tab.getNode();\n    let htmlNode = null;\n    if (tabNode instanceof React.Component) {\n      htmlNode = findDOMNode(tabNode);\n    }\n\n    if (htmlNode && htmlNode instanceof HTMLElement && typeof htmlNode.focus === 'function') {\n      htmlNode.focus();\n    }\n  };\n\n  private notifyUpdate: TabsContextType<T>['notifyUpdate'] = () => {\n    this.listeners.forEach((cb) => cb());\n  };\n\n  private switchTab: TabsContextType<T>['switchTab'] = (id) => {\n    const { onValueChange, value } = this.props;\n    if (id !== value && onValueChange) {\n      onValueChange(id);\n    }\n  };\n\n  private getTab: TabsContextType<T>['getTab'] = (id) => {\n    const { getNode = null } = this.tabs.find((x) => x.id === id) || {};\n    return getNode && getNode();\n  };\n\n  private addTab: TabsContextType<T>['addTab'] = (id, getNode) => {\n    this.tabs = this.tabs.concat({ id, getNode });\n  };\n\n  private removeTab: TabsContextType<T>['removeTab'] = (id) => {\n    this.tabs = this.tabs.filter((tab) => tab.id !== id);\n  };\n}\n"]}
+{"version":3,"sources":["Tabs.tsx"],"names":["TabsDataTids","root","indicatorRoot","Tabs","rootNode","getProps","defaultProps","tabs","tabUpdates","on","cb","index","listeners","push","splice","shiftFocus","fromTab","delta","findIndex","x","id","newIndex","Math","max","min","length","tab","tabNode","getNode","htmlNode","globalObject","HTMLElement","focus","notifyUpdate","forEach","switchTab","props","onValueChange","value","getTab","find","addTab","concat","removeTab","filter","render","width","children","indicatorClassName","ariaDescribedby","vertical","size","theme","setRootNode","styles","rootSmall","rootMedium","rootLarge","activeTab","React","Component","__KONTUR_REACT_UI__","Tab"],"mappings":"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","sourcesContent":["import React, { AriaAttributes } from 'react';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport { emptyHandler } from '../../lib/utils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { getRootNode } from '../../lib/rootNode/getRootNode';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { SizeProp } from '../../lib/types/props';\nimport { isInstanceOf } from '../../lib/isInstanceOf';\n\nimport { Indicator } from './Indicator';\nimport { styles } from './Tabs.styles';\nimport { TabsContext, TabsContextType } from './TabsContext';\nimport { Tab } from './Tab';\n\ntype ValueBaseType = string;\ninterface TabType<T extends ValueBaseType> {\n  getNode: () => Tab<T> | null;\n  id: T;\n}\n\nexport interface TabsProps<T extends ValueBaseType = string> extends CommonProps {\n  /**\n   * Позволяет задать кастомный класс подчёркиванию таба.\n   */\n  indicatorClassName?: string;\n\n  /**\n   * Задаёт размер контрола.\n   *\n   * **Допустимые значения**: `\"small\"`, `\"medium\"`, `\"large\"`.\n   */\n  size?: SizeProp;\n\n  /**\n   * Задаёт текущий активный `<Tab />`. Принимает `id` таба.\n   */\n  value: T;\n\n  /**\n   * Функция, позволяющая изменить текущий активный `<Tab />`.\n   */\n  onValueChange?: (value: T) => void;\n\n  /**\n   * Переводит компонент в режим вертикального отображения.\n   * @default false\n   */\n  vertical?: boolean;\n\n  /**\n   * `CSS`-свойство `width`.\n   */\n  width?: number | string;\n\n  /**\n   * Атрибут для указания id элемента(-ов), описывающих его.\n   */\n  'aria-describedby'?: AriaAttributes['aria-describedby'];\n}\n\nexport const TabsDataTids = {\n  root: 'Tabs__root',\n  indicatorRoot: 'Indicator__root',\n} as const;\n\ntype DefaultProps = Required<Pick<TabsProps, 'vertical' | 'size'>>;\n\n/**\n * Родитель компонента `<Tab />`. Связывает `Tab`'ы в группу и позволяет управлять их состоянием.\n */\n@rootNode\nexport class Tabs<T extends string = string> extends React.Component<TabsProps<T>> {\n  public static __KONTUR_REACT_UI__ = 'Tabs';\n\n  public static defaultProps: DefaultProps = {\n    vertical: false,\n    size: 'large',\n  };\n\n  private getProps = createPropsGetter(Tabs.defaultProps);\n\n  public static Tab = Tab;\n\n  private theme!: Theme;\n\n  private tabs: Array<TabType<T>> = [];\n\n  private tabUpdates = {\n    on: (cb: () => void) => {\n      const index = this.listeners.push(cb);\n      return () => {\n        this.listeners.splice(index, 1);\n      };\n    },\n  };\n\n  private listeners: Array<typeof emptyHandler> = [];\n  private setRootNode!: TSetRootNode;\n\n  public render(): JSX.Element {\n    const { value, width, children, indicatorClassName, 'aria-describedby': ariaDescribedby } = this.props;\n    const { vertical, size } = this.getProps();\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return (\n            <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n              <div\n                data-tid={TabsDataTids.root}\n                className={cx({\n                  [styles.rootSmall(this.theme)]: size === 'small',\n                  [styles.rootMedium(this.theme)]: size === 'medium',\n                  [styles.rootLarge(this.theme)]: size === 'large',\n                  [styles.vertical()]: vertical,\n                })}\n                style={{ width }}\n                aria-describedby={ariaDescribedby}\n              >\n                <TabsContext.Provider\n                  value={{\n                    vertical,\n                    activeTab: value,\n                    size,\n                    getTab: this.getTab,\n                    addTab: this.addTab,\n                    removeTab: this.removeTab,\n                    notifyUpdate: this.notifyUpdate,\n                    shiftFocus: this.shiftFocus,\n                    switchTab: this.switchTab,\n                  }}\n                >\n                  {children}\n                  <Indicator\n                    className={indicatorClassName}\n                    tabUpdates={this.tabUpdates}\n                    vertical={this.getProps().vertical}\n                  />\n                </TabsContext.Provider>\n              </div>\n            </CommonWrapper>\n          );\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private shiftFocus: TabsContextType<T>['shiftFocus'] = (fromTab, delta) => {\n    const { tabs } = this;\n    const index = tabs.findIndex((x) => x.id === fromTab);\n    const newIndex = Math.max(0, Math.min(index + delta, tabs.length - 1));\n    const tab = tabs[newIndex];\n\n    const tabNode = tab.getNode();\n    const htmlNode = getRootNode(tabNode);\n\n    if (isInstanceOf(htmlNode, globalObject.HTMLElement) && typeof htmlNode.focus === 'function') {\n      htmlNode.focus();\n    }\n  };\n\n  private notifyUpdate: TabsContextType<T>['notifyUpdate'] = () => {\n    this.listeners.forEach((cb) => cb());\n  };\n\n  private switchTab: TabsContextType<T>['switchTab'] = (id) => {\n    const { onValueChange, value } = this.props;\n    if (id !== value && onValueChange) {\n      onValueChange(id);\n    }\n  };\n\n  private getTab: TabsContextType<T>['getTab'] = (id) => {\n    const { getNode = null } = this.tabs.find((x) => x.id === id) || {};\n    return getNode && getNode();\n  };\n\n  private addTab: TabsContextType<T>['addTab'] = (id, getNode) => {\n    this.tabs = this.tabs.concat({ id, getNode });\n  };\n\n  private removeTab: TabsContextType<T>['removeTab'] = (id) => {\n    this.tabs = this.tabs.filter((tab) => tab.id !== id);\n  };\n}\n"]}

package/cjs/components/Tabs/Tabs.md

@@ -1,3 +1,4 @@
+Базовый пример использования компонента.
 ```jsx harmony
 const [active, setActive] = React.useState('fuji');
 
@@ -8,29 +9,45 @@ const [active, setActive] = React.useState('fuji');
 </Tabs>;
 ```
 
-Можно передавать свои компоненты в качестве табов, например `NavLink` из `react-router`
-
+Компонент может отображать табы двумя способами: горизонтально (по умолчанию) и вертикально.
 ```jsx harmony
-const [active, setActive] = React.useState('/fuji');
-
-const NavLink = props => (
-  <a
-    {...props}
-    onClick={e => {
-      e.preventDefault();
-      props.onClick(e);
-    }}
-  />
-);
-const TabLink = ({ id, children }) => (
-  <Tabs.Tab id={id} component={props => <NavLink {...props} to={props.id} />}>
-    {children}
-  </Tabs.Tab>
-);
+const [active, setActive] = React.useState('fuji');
 
-<Tabs value={active} onValueChange={setActive}>
-  <TabLink id="/fuji">🌋 Fuji</TabLink>
-  <TabLink id="/tahat">⛰ Tahat</TabLink>
-  <TabLink id="/alps">🗻 Alps</TabLink>
+<Tabs vertical value={active} onValueChange={setActive}>
+  <Tabs.Tab id="fuji">🌋 Fuji</Tabs.Tab>
+  <Tabs.Tab id="tahat">⛰ Tahat</Tabs.Tab>
+  <Tabs.Tab id="alps">🗻 Alps</Tabs.Tab>
 </Tabs>;
 ```
+
+У табов есть 3 стандартных размера
+```jsx harmony
+const [active, setActive] = React.useState('fuji');
+const renderCaption = (caption) => <span style={{display: "inline-block", width: 60}}>{caption}</span>;
+<div>
+  <div>
+    {renderCaption("small")}
+    <Tabs value={active} onValueChange={setActive} size="small">
+      <Tabs.Tab id="fuji">🌋 Fuji</Tabs.Tab>
+      <Tabs.Tab id="tahat">⛰ Tahat</Tabs.Tab>
+      <Tabs.Tab id="alps">🗻 Alps</Tabs.Tab>
+    </Tabs>
+  </div>
+  <div>
+    {renderCaption("medium")}
+    <Tabs value={active} onValueChange={setActive} size="medium">
+      <Tabs.Tab id="fuji">🌋 Fuji</Tabs.Tab>
+      <Tabs.Tab id="tahat">⛰ Tahat</Tabs.Tab>
+      <Tabs.Tab id="alps">🗻 Alps</Tabs.Tab>
+    </Tabs>
+  </div>
+  <div>
+    {renderCaption("large")}
+    <Tabs value={active} onValueChange={setActive} size="large">
+      <Tabs.Tab id="fuji">🌋 Fuji</Tabs.Tab>
+      <Tabs.Tab id="tahat">⛰ Tahat</Tabs.Tab>
+      <Tabs.Tab id="alps">🗻 Alps</Tabs.Tab>
+    </Tabs>
+  </div>
+</div>;
+```

package/cjs/components/Tabs/Tabs.styles.d.ts

@@ -1,5 +1,7 @@
 import { Theme } from '../../lib/theming/Theme';
 export declare const styles: {
-    root(t: Theme): string;
+    rootSmall(t: Theme): string;
+    rootMedium(t: Theme): string;
+    rootLarge(t: Theme): string;
     vertical(): string;
 };

package/cjs/components/Tabs/Tabs.styles.js

@@ -1,18 +1,34 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2;
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");
 
 
-var styles = (0, _Emotion.memoizeStyle)({
-  root: function root(t) {
-    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-block;\n      margin: 0 -", ";\n      padding: 0;\n      position: relative;\n    "])),
 
-    t.tabsMarginX);
+var _helpers = require("./helpers");var _templateObject, _templateObject2;
 
+var styles = (0, _Emotion.memoizeStyle)({
+  rootSmall: function rootSmall(t) {
+    return tabsRoot(t, 'small');
+  },
 
+  rootMedium: function rootMedium(t) {
+    return tabsRoot(t, 'medium');
+  },
 
+  rootLarge: function rootLarge(t) {
+    return tabsRoot(t, 'large');
   },
 
   vertical: function vertical() {
-    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin: 0;\n    "])));
+    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin: 0;\n    "])));
+
+
+  } });exports.styles = styles;
+
+
+function tabsRoot(t, size) {
+  return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n    display: inline-block;\n    margin: 0 -", ";\n    padding: 0;\n    position: relative;\n  "])),
+
+  (0, _helpers.paddingX)(t, size));
+
 
 
-  } });exports.styles = styles;
+}

package/cjs/components/Tabs/Tabs.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Tabs.styles.ts"],"names":["styles","root","t","css","tabsMarginX","vertical"],"mappings":"4QAAA,oD;;;AAGO,IAAMA,MAAM,GAAG,2BAAa;AACjCC,EAAAA,IADiC,gBAC5BC,CAD4B,EAClB;AACb,eAAOC,YAAP;;AAEeD,IAAAA,CAAC,CAACE,WAFjB;;;;AAMD,GARgC;;AAUjCC,EAAAA,QAViC,sBAUtB;AACT,eAAOF,YAAP;;;AAGD,GAdgC,EAAb,CAAf,C","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    return css`\n      display: inline-block;\n      margin: 0 -${t.tabsMarginX};\n      padding: 0;\n      position: relative;\n    `;\n  },\n\n  vertical() {\n    return css`\n      margin: 0;\n    `;\n  },\n});\n"]}
+{"version":3,"sources":["Tabs.styles.ts"],"names":["styles","rootSmall","t","tabsRoot","rootMedium","rootLarge","vertical","css","size"],"mappings":"4QAAA;;;;AAIA,oC;;AAEO,IAAMA,MAAM,GAAG,2BAAa;AACjCC,EAAAA,SADiC,qBACvBC,CADuB,EACb;AAClB,WAAOC,QAAQ,CAACD,CAAD,EAAI,OAAJ,CAAf;AACD,GAHgC;;AAKjCE,EAAAA,UALiC,sBAKtBF,CALsB,EAKZ;AACnB,WAAOC,QAAQ,CAACD,CAAD,EAAI,QAAJ,CAAf;AACD,GAPgC;;AASjCG,EAAAA,SATiC,qBASvBH,CATuB,EASb;AAClB,WAAOC,QAAQ,CAACD,CAAD,EAAI,OAAJ,CAAf;AACD,GAXgC;;AAajCI,EAAAA,QAbiC,sBAatB;AACT,eAAOC,YAAP;;;AAGD,GAjBgC,EAAb,CAAf,C;;;AAoBP,SAASJ,QAAT,CAAkBD,CAAlB,EAA4BM,IAA5B,EAA4C;AAC1C,aAAOD,YAAP;;AAEe,yBAASL,CAAT,EAAYM,IAAZ,CAFf;;;;AAMD","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport { SizeProp } from '../../lib/types/props';\n\nimport { paddingX } from './helpers';\n\nexport const styles = memoizeStyle({\n  rootSmall(t: Theme) {\n    return tabsRoot(t, 'small');\n  },\n\n  rootMedium(t: Theme) {\n    return tabsRoot(t, 'medium');\n  },\n\n  rootLarge(t: Theme) {\n    return tabsRoot(t, 'large');\n  },\n\n  vertical() {\n    return css`\n      margin: 0;\n    `;\n  },\n});\n\nfunction tabsRoot(t: Theme, size: SizeProp) {\n  return css`\n    display: inline-block;\n    margin: 0 -${paddingX(t, size)};\n    padding: 0;\n    position: relative;\n  `;\n}\n"]}

package/cjs/components/Tabs/TabsContext.d.ts

@@ -1,8 +1,10 @@
 import React from 'react';
+import { SizeProp } from '../../lib/types/props';
 import { Tab } from './Tab';
 export interface TabsContextType<T extends string = any> {
     vertical: boolean;
     activeTab: T;
+    size: SizeProp;
     getTab: (id: T) => Tab<T> | null | void;
     addTab: (id: T, getNode: () => Tab<T>) => void;
     notifyUpdate: () => void;

package/cjs/components/Tabs/TabsContext.js

@@ -1,4 +1,4 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.TabsContext = exports.TabsContextDefaultValue = void 0;var _react = _interopRequireDefault(require("react"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.TabsContextDefaultValue = exports.TabsContext = void 0;var _react = _interopRequireDefault(require("react"));
 
 var _utils = require("../../lib/utils");
 
@@ -15,9 +15,12 @@ var _utils = require("../../lib/utils");
 
 
 
+
+
 var TabsContextDefaultValue = {
   vertical: false,
   activeTab: '',
+  size: 'large',
   getTab: _utils.emptyHandler,
   addTab: _utils.emptyHandler,
   notifyUpdate: _utils.emptyHandler,

package/cjs/components/Tabs/TabsContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["TabsContext.ts"],"names":["TabsContextDefaultValue","vertical","activeTab","getTab","emptyHandler","addTab","notifyUpdate","removeTab","shiftFocus","switchTab","TabsContext","React","createContext","displayName"],"mappings":"2LAAA;;AAEA;;;;;;;;;;;;;;;AAeO,IAAMA,uBAAwC,GAAG;AACtDC,EAAAA,QAAQ,EAAE,KAD4C;AAEtDC,EAAAA,SAAS,EAAE,EAF2C;AAGtDC,EAAAA,MAAM,EAAEC,mBAH8C;AAItDC,EAAAA,MAAM,EAAED,mBAJ8C;AAKtDE,EAAAA,YAAY,EAAEF,mBALwC;AAMtDG,EAAAA,SAAS,EAAEH,mBAN2C;AAOtDI,EAAAA,UAAU,EAAEJ,mBAP0C;AAQtDK,EAAAA,SAAS,EAAEL,mBAR2C,EAAjD,C;;AAUA,IAAMM,WAAW,gBAAGC,eAAMC,aAAN,CAAqCZ,uBAArC,CAApB,C;;AAEPU,WAAW,CAACG,WAAZ,GAA0B,aAA1B","sourcesContent":["import React from 'react';\n\nimport { emptyHandler } from '../../lib/utils';\n\nimport { Tab } from './Tab';\n\nexport interface TabsContextType<T extends string = any> {\n  vertical: boolean;\n  activeTab: T;\n  getTab: (id: T) => Tab<T> | null | void;\n  addTab: (id: T, getNode: () => Tab<T>) => void;\n  notifyUpdate: () => void;\n  removeTab: (id: T) => void;\n  shiftFocus: (fromTab: T, delta: number) => void;\n  switchTab: (id: T) => void;\n}\n\nexport const TabsContextDefaultValue: TabsContextType = {\n  vertical: false,\n  activeTab: '',\n  getTab: emptyHandler,\n  addTab: emptyHandler,\n  notifyUpdate: emptyHandler,\n  removeTab: emptyHandler,\n  shiftFocus: emptyHandler,\n  switchTab: emptyHandler,\n};\nexport const TabsContext = React.createContext<TabsContextType>(TabsContextDefaultValue);\n\nTabsContext.displayName = 'TabsContext';\n"]}
+{"version":3,"sources":["TabsContext.ts"],"names":["TabsContextDefaultValue","vertical","activeTab","size","getTab","emptyHandler","addTab","notifyUpdate","removeTab","shiftFocus","switchTab","TabsContext","React","createContext","displayName"],"mappings":"2LAAA;;AAEA;;;;;;;;;;;;;;;;;AAiBO,IAAMA,uBAAwC,GAAG;AACtDC,EAAAA,QAAQ,EAAE,KAD4C;AAEtDC,EAAAA,SAAS,EAAE,EAF2C;AAGtDC,EAAAA,IAAI,EAAE,OAHgD;AAItDC,EAAAA,MAAM,EAAEC,mBAJ8C;AAKtDC,EAAAA,MAAM,EAAED,mBAL8C;AAMtDE,EAAAA,YAAY,EAAEF,mBANwC;AAOtDG,EAAAA,SAAS,EAAEH,mBAP2C;AAQtDI,EAAAA,UAAU,EAAEJ,mBAR0C;AAStDK,EAAAA,SAAS,EAAEL,mBAT2C,EAAjD,C;;AAWA,IAAMM,WAAW,gBAAGC,eAAMC,aAAN,CAAqCb,uBAArC,CAApB,C;;AAEPW,WAAW,CAACG,WAAZ,GAA0B,aAA1B","sourcesContent":["import React from 'react';\n\nimport { emptyHandler } from '../../lib/utils';\nimport { SizeProp } from '../../lib/types/props';\n\nimport { Tab } from './Tab';\n\nexport interface TabsContextType<T extends string = any> {\n  vertical: boolean;\n  activeTab: T;\n  size: SizeProp;\n  getTab: (id: T) => Tab<T> | null | void;\n  addTab: (id: T, getNode: () => Tab<T>) => void;\n  notifyUpdate: () => void;\n  removeTab: (id: T) => void;\n  shiftFocus: (fromTab: T, delta: number) => void;\n  switchTab: (id: T) => void;\n}\n\nexport const TabsContextDefaultValue: TabsContextType = {\n  vertical: false,\n  activeTab: '',\n  size: 'large',\n  getTab: emptyHandler,\n  addTab: emptyHandler,\n  notifyUpdate: emptyHandler,\n  removeTab: emptyHandler,\n  shiftFocus: emptyHandler,\n  switchTab: emptyHandler,\n};\nexport const TabsContext = React.createContext<TabsContextType>(TabsContextDefaultValue);\n\nTabsContext.displayName = 'TabsContext';\n"]}

package/cjs/components/Tabs/helpers.d.ts

@@ -0,0 +1,6 @@
+import { Theme } from '../../lib/theming/Theme';
+import { SizeProp } from '../../lib/types/props';
+export declare function fontSize(t: Theme, size: SizeProp): string;
+export declare function lineHeight(t: Theme, size: SizeProp): string;
+export declare function paddingX(t: Theme, size: SizeProp): string;
+export declare function paddingY(t: Theme, size: SizeProp): string;

package/cjs/components/Tabs/helpers.js

@@ -0,0 +1,31 @@
+"use strict";exports.__esModule = true;exports.fontSize = fontSize;exports.lineHeight = lineHeight;exports.paddingX = paddingX;exports.paddingY = paddingY;
+
+
+function fontSize(t, size) {
+  return mapSize(size, t.tabFontSizeSmall, t.tabFontSizeMedium, t.tabFontSizeLarge);
+}
+
+function lineHeight(t, size) {
+  return mapSize(size, t.tabLineHeightSmall, t.tabLineHeightMedium, t.tabLineHeightLarge);
+}
+
+function paddingX(t, size) {
+  return mapSize(size, t.tabPaddingXSmall, t.tabPaddingXMedium, t.tabPaddingXLarge);
+}
+
+function paddingY(t, size) {
+  return mapSize(size, t.tabPaddingYSmall, t.tabPaddingYMedium, t.tabPaddingYLarge);
+}
+
+function mapSize(size, small, medium, large) {
+  switch (size) {
+    case 'small':
+      return small;
+    case 'medium':
+      return medium;
+    case 'large':
+      return large;
+    default:
+      return small;}
+
+}

package/cjs/components/Tabs/helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["helpers.ts"],"names":["fontSize","t","size","mapSize","tabFontSizeSmall","tabFontSizeMedium","tabFontSizeLarge","lineHeight","tabLineHeightSmall","tabLineHeightMedium","tabLineHeightLarge","paddingX","tabPaddingXSmall","tabPaddingXMedium","tabPaddingXLarge","paddingY","tabPaddingYSmall","tabPaddingYMedium","tabPaddingYLarge","small","medium","large"],"mappings":";;;AAGO,SAASA,QAAT,CAAkBC,CAAlB,EAA4BC,IAA5B,EAA4C;AACjD,SAAOC,OAAO,CAACD,IAAD,EAAOD,CAAC,CAACG,gBAAT,EAA2BH,CAAC,CAACI,iBAA7B,EAAgDJ,CAAC,CAACK,gBAAlD,CAAd;AACD;;AAEM,SAASC,UAAT,CAAoBN,CAApB,EAA8BC,IAA9B,EAA8C;AACnD,SAAOC,OAAO,CAACD,IAAD,EAAOD,CAAC,CAACO,kBAAT,EAA6BP,CAAC,CAACQ,mBAA/B,EAAoDR,CAAC,CAACS,kBAAtD,CAAd;AACD;;AAEM,SAASC,QAAT,CAAkBV,CAAlB,EAA4BC,IAA5B,EAA4C;AACjD,SAAOC,OAAO,CAACD,IAAD,EAAOD,CAAC,CAACW,gBAAT,EAA2BX,CAAC,CAACY,iBAA7B,EAAgDZ,CAAC,CAACa,gBAAlD,CAAd;AACD;;AAEM,SAASC,QAAT,CAAkBd,CAAlB,EAA4BC,IAA5B,EAA4C;AACjD,SAAOC,OAAO,CAACD,IAAD,EAAOD,CAAC,CAACe,gBAAT,EAA2Bf,CAAC,CAACgB,iBAA7B,EAAgDhB,CAAC,CAACiB,gBAAlD,CAAd;AACD;;AAED,SAASf,OAAT,CAAoBD,IAApB,EAAoCiB,KAApC,EAA8CC,MAA9C,EAAyDC,KAAzD,EAAmE;AACjE,UAAQnB,IAAR;AACE,SAAK,OAAL;AACE,aAAOiB,KAAP;AACF,SAAK,QAAL;AACE,aAAOC,MAAP;AACF,SAAK,OAAL;AACE,aAAOC,KAAP;AACF;AACE,aAAOF,KAAP,CARJ;;AAUD","sourcesContent":["import { Theme } from '../../lib/theming/Theme';\nimport { SizeProp } from '../../lib/types/props';\n\nexport function fontSize(t: Theme, size: SizeProp) {\n  return mapSize(size, t.tabFontSizeSmall, t.tabFontSizeMedium, t.tabFontSizeLarge);\n}\n\nexport function lineHeight(t: Theme, size: SizeProp) {\n  return mapSize(size, t.tabLineHeightSmall, t.tabLineHeightMedium, t.tabLineHeightLarge);\n}\n\nexport function paddingX(t: Theme, size: SizeProp) {\n  return mapSize(size, t.tabPaddingXSmall, t.tabPaddingXMedium, t.tabPaddingXLarge);\n}\n\nexport function paddingY(t: Theme, size: SizeProp) {\n  return mapSize(size, t.tabPaddingYSmall, t.tabPaddingYMedium, t.tabPaddingYLarge);\n}\n\nfunction mapSize<T>(size: SizeProp, small: T, medium: T, large: T) {\n  switch (size) {\n    case 'small':\n      return small;\n    case 'medium':\n      return medium;\n    case 'large':\n      return large;\n    default:\n      return small;\n  }\n}\n"]}