@skbkontur/react-ui 0.0.0-2ac4c133dd → 0.0.0-2d059f9369

package/components/Tabs/Tab.md

@@ -0,0 +1,71 @@
+У компонента `<Tabs.Tab />` есть несколько визуальных состояний, в которых компонент может находиться: `primary`, `success`, `warning` и `error`. Чтобы перевести контрол в нужное состояние передайте компоненту булевый проп с соответсвующим названием.
+
+Используя переменные `tabColorPrimary`, `tabColorSuccess`, `tabColorWarning` и `tabColorError` можно изменить активный цвет состояния, а библиотека автоматически подберёт цвет подчёркивания при наведении.
+```jsx harmony
+import { ThemeContext, ThemeFactory, Button, Tabs } from '@skbkontur/react-ui';
+
+const getRandomColor = () => '#' + Math.random().toString(16).substr(-6);
+const updateColors = () => {
+  return {
+    tabColorPrimary: getRandomColor(),
+    tabColorSuccess: getRandomColor(),
+    tabColorWarning: getRandomColor(),
+    tabColorError: getRandomColor(),
+  }
+};
+
+const [activeBase, setActiveBase] = React.useState('error');
+const [activeRandom, setActiveRandom] = React.useState('error');
+const [colors, setColors] = React.useState(updateColors());
+
+<>
+  <p style={{ fontSize: '17px' }}>C цветами по умолчанию</p>
+  <Tabs value={activeBase} onValueChange={setActiveBase}>
+    <Tabs.Tab primary id="primary">Primary</Tabs.Tab>
+    <Tabs.Tab success id="success">Success</Tabs.Tab>
+    <Tabs.Tab warning id="warning">Warning</Tabs.Tab>
+    <Tabs.Tab error id="error">Error</Tabs.Tab>
+  </Tabs>
+
+  <p style={{ fontSize: '17px' }}>Со случайным основным цветом</p>
+  <div style={{ display: 'inline-flex', flexDirection: 'column', justifyContent: 'space-between', height: '100px' }}>
+    <ThemeContext.Consumer>
+      {(theme) => {
+        return (
+          <ThemeContext.Provider
+            value={ThemeFactory.create(colors,theme)}
+          >
+            <Tabs value={activeRandom} onValueChange={setActiveRandom}>
+            <Tabs.Tab primary id="primary">Primary</Tabs.Tab>
+            <Tabs.Tab success id="success">Success</Tabs.Tab>
+            <Tabs.Tab warning id="warning">Warning</Tabs.Tab>
+            <Tabs.Tab error id="error">Error</Tabs.Tab>
+          </Tabs>
+          </ThemeContext.Provider>
+        );
+      }}
+    </ThemeContext.Consumer>
+    <Button onClick={() => setColors(updateColors)}>Получить новый набор цветов</Button>
+  </div>
+</>
+```
+
+С помощью пропа `component` можно изменять корневой элемент `<Tab />`.
+
+Проп может принимать: компоненты, функции и строки.
+```jsx harmony
+import { Tabs } from '@skbkontur/react-ui';
+
+const [active, setActive] = React.useState('/fuji');
+
+const NavLink = props => <a {...props} />;
+
+<Tabs value={active} onValueChange={setActive}>
+  {/** Кастомный компонент **/}
+  <Tabs.Tab  component={(props) => <NavLink {...props} />} id="/fuji">🌋 Fuji</Tabs.Tab>
+  {/** Функция **/}
+  <Tabs.Tab component={(props) => <a {...props} />} id="/tahat">⛰ Tahat</Tabs.Tab>
+  {/** Строка **/}
+  <Tabs.Tab component="a" id="/alps">🗻 Alps</Tabs.Tab>
+</Tabs>;
+```

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

@@ -5,65 +5,94 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 import { css, memoizeStyle, prefix } from "../../../lib/theming/Emotion";
 import { shift } from "../../../lib/styles/DimensionFunctions";
 import * as ColorFunctions from "../../../lib/styles/ColorFunctions";
+import { fontSize, lineHeight, paddingX, paddingY } from "../helpers";
 export var globalClasses = prefix('tab')({
   focus: 'focus'
 });
 export var styles = memoizeStyle({
-  root: function root(t) {
-    var paddingTop = t.tabPaddingY;
-    var paddingBottom = "calc(" + t.tabPaddingY + " - " + t.tabBorderWidth + ")";
-    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      border-bottom: ", " solid transparent;\n      box-sizing: border-box;\n      color: ", ";\n      cursor: pointer;\n      display: inline-block;\n      font-size: ", ";\n      line-height: ", ";\n      margin-left: ", ";\n      margin-right: ", ";\n      padding-bottom: ", ";\n      padding-top: ", ";\n      position: relative;\n      text-decoration: inherit;\n      transition: border-bottom 0.2s ease-out;\n\n      &:hover {\n        outline: inherit;\n        border-bottom: ", " solid ", ";\n      }\n\n      &:focus {\n        outline: inherit;\n      }\n    "])), t.tabBorderWidth, t.tabTextColorDefault, t.tabFontSize, t.tabLineHeight, t.tabPaddingX, t.tabPaddingX, paddingBottom, paddingTop, t.tabBorderWidth, t.tabColorHover);
+  rootSmall: function rootSmall(t) {
+    return tabRoot(t, 'small');
   },
-  vertical: function vertical(t) {
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      border-bottom: none;\n      border-left: ", " solid transparent;\n      display: block;\n      margin-left: 0;\n      margin-right: 0;\n      padding-left: ", ";\n      padding-right: ", ";\n\n      &:hover {\n        border-bottom: none;\n        border-left: ", " solid ", ";\n      }\n\n      .", " {\n        bottom: 0;\n        left: -", ";\n        right: 0;\n      }\n    "])), t.tabBorderWidth, shift(t.tabPaddingX, "-" + t.tabBorderWidth), t.tabPaddingX, t.tabBorderWidth, t.tabColorHover, globalClasses.focus, t.tabBorderWidth);
+  rootMedium: function rootMedium(t) {
+    return tabRoot(t, 'medium');
   },
-  focus: function focus(t) {
-    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      border: ", " solid ", ";\n      bottom: -", ";\n      left: -", ";\n      position: absolute;\n      right: -", ";\n      top: 0;\n    "])), t.tabOutlineWidth, t.tabColorFocus, t.tabBorderWidth, t.tabPaddingX, t.tabPaddingX);
+  rootLarge: function rootLarge(t) {
+    return tabRoot(t, 'large');
+  },
+  verticalSmall: function verticalSmall(t) {
+    return tabVertical(t, 'small');
+  },
+  verticalMedium: function verticalMedium(t) {
+    return tabVertical(t, 'medium');
+  },
+  verticalLarge: function verticalLarge(t) {
+    return tabVertical(t, 'large');
+  },
+  focusSmall: function focusSmall(t) {
+    return tabFocus(t, 'small');
+  },
+  focusMedium: function focusMedium(t) {
+    return tabFocus(t, 'medium');
+  },
+  focusLarge: function focusLarge(t) {
+    return tabFocus(t, 'large');
   },
   disabled: function disabled(t) {
-    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      color: rgba(\n        ", ",\n        ", ",\n        ", ",\n        0.5\n      );\n      cursor: default;\n    "])), ColorFunctions.red(t.tabTextColorDefault), ColorFunctions.green(t.tabTextColorDefault), ColorFunctions.blue(t.tabTextColorDefault));
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      color: rgba(\n        ", ",\n        ", ",\n        ", ",\n        0.5\n      );\n      cursor: default;\n    "])), ColorFunctions.red(t.tabTextColorDefault), ColorFunctions.green(t.tabTextColorDefault), ColorFunctions.blue(t.tabTextColorDefault));
   },
   active: function active() {
-    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      cursor: default;\n    "])));
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      cursor: default;\n    "])));
   }
 });
 export var horizontalStyles = memoizeStyle({
   active: function active(t) {
-    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom: ", " solid transparent;\n      }\n    "])), t.tabBorderWidth);
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom: ", " solid transparent;\n      }\n    "])), t.tabBorderWidth);
   },
   disabled: function disabled() {
-    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom-color: transparent;\n      }\n    "])));
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom-color: transparent;\n      }\n    "])));
   },
   primary: function primary(t) {
-    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom-color: ", ";\n      }\n    "])), t.tabColorHoverPrimary);
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom-color: ", ";\n      }\n    "])), t.tabColorHoverPrimary);
   },
   success: function success(t) {
-    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom-color: ", ";\n      }\n    "])), t.tabColorHoverSuccess);
+    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom-color: ", ";\n      }\n    "])), t.tabColorHoverSuccess);
   },
   warning: function warning(t) {
-    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom-color: ", ";\n      }\n    "])), t.tabColorHoverWarning);
+    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom-color: ", ";\n      }\n    "])), t.tabColorHoverWarning);
   },
   error: function error(t) {
-    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom-color: ", ";\n      }\n    "])), t.tabColorHoverError);
+    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom-color: ", ";\n      }\n    "])), t.tabColorHoverError);
   }
 });
 export var verticalStyles = memoizeStyle({
   active: function active(t) {
-    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-left: ", " solid transparent;\n      }\n    "])), t.tabBorderWidth);
+    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-left: ", " solid transparent;\n      }\n    "])), t.tabBorderWidth);
   },
   disabled: function disabled() {
-    return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-left-color: transparent;\n      }\n    "])));
+    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-left-color: transparent;\n      }\n    "])));
   },
   primary: function primary(t) {
-    return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-left-color: ", ";\n      }\n    "])), t.tabColorHoverPrimary);
+    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-left-color: ", ";\n      }\n    "])), t.tabColorHoverPrimary);
   },
   success: function success(t) {
-    return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-left-color: ", ";\n      }\n    "])), t.tabColorHoverSuccess);
+    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-left-color: ", ";\n      }\n    "])), t.tabColorHoverSuccess);
   },
   warning: function warning(t) {
-    return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-left-color: ", ";\n      }\n    "])), t.tabColorHoverWarning);
+    return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-left-color: ", ";\n      }\n    "])), t.tabColorHoverWarning);
   },
   error: function error(t) {
-    return css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-left-color: ", ";\n      }\n    "])), t.tabColorHoverError);
+    return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-left-color: ", ";\n      }\n    "])), t.tabColorHoverError);
   }
-});
+});
+
+function tabRoot(t, size) {
+  return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n    border-bottom: ", " solid transparent;\n    box-sizing: border-box;\n    color: ", ";\n    cursor: pointer;\n    display: inline-block;\n    font-size: ", ";\n    line-height: ", ";\n    margin-left: ", ";\n    margin-right: ", ";\n    padding-bottom: calc(", " - ", ");\n    padding-top: ", ";\n    position: relative;\n    text-decoration: inherit;\n    transition: border-bottom ", " ", ";\n\n    &:hover {\n      outline: inherit;\n      border-bottom: ", " solid ", ";\n    }\n\n    &:focus {\n      outline: inherit;\n    }\n  "])), t.tabBorderWidth, t.tabTextColorDefault, fontSize(t, size), lineHeight(t, size), paddingX(t, size), paddingX(t, size), paddingY(t, size), t.tabBorderWidth, paddingY(t, size), t.transitionDuration, t.transitionTimingFunction, t.tabBorderWidth, t.tabColorHover);
+}
+
+function tabVertical(t, size) {
+  return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n    border-bottom: none;\n    border-left: ", " solid transparent;\n    display: block;\n    margin-left: 0;\n    margin-right: 0;\n    padding-left: ", ";\n    padding-right: ", ";\n\n    &:hover {\n      border-bottom: none;\n      border-left: ", " solid ", ";\n    }\n\n    .", " {\n      bottom: 0;\n      left: -", ";\n      right: 0;\n    }\n  "])), t.tabBorderWidth, shift(paddingX(t, size), "-" + t.tabBorderWidth), paddingX(t, size), t.tabBorderWidth, t.tabColorHover, globalClasses.focus, t.tabBorderWidth);
+}
+
+function tabFocus(t, size) {
+  return css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n    border: ", " solid ", ";\n    bottom: -", ";\n    left: -", ";\n    position: absolute;\n    right: -", ";\n    top: 0;\n  "])), t.tabOutlineWidth, t.tabColorFocus, t.tabBorderWidth, paddingX(t, size), paddingX(t, size));
+}

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

@@ -1 +1 @@
-{"version":3,"sources":["Tab.styles.ts"],"names":["css","memoizeStyle","prefix","shift","ColorFunctions","globalClasses","focus","styles","root","t","paddingTop","tabPaddingY","paddingBottom","tabBorderWidth","tabTextColorDefault","tabFontSize","tabLineHeight","tabPaddingX","tabColorHover","vertical","tabOutlineWidth","tabColorFocus","disabled","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":["css","memoizeStyle","prefix","shift","ColorFunctions","fontSize","lineHeight","paddingX","paddingY","globalClasses","focus","styles","rootSmall","t","tabRoot","rootMedium","rootLarge","verticalSmall","tabVertical","verticalMedium","verticalLarge","focusSmall","tabFocus","focusMedium","focusLarge","disabled","red","tabTextColorDefault","green","blue","active","horizontalStyles","tabBorderWidth","primary","tabColorHoverPrimary","success","tabColorHoverSuccess","warning","tabColorHoverWarning","error","tabColorHoverError","verticalStyles","size","transitionDuration","transitionTimingFunction","tabColorHover","tabOutlineWidth","tabColorFocus"],"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';\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/components/Tabs/Tab.styles.d.ts

@@ -3,9 +3,15 @@ export declare const globalClasses: {
     focus: string;
 };
 export declare const styles: {
-    root(t: Theme): string;
-    vertical(t: Theme): string;
-    focus(t: Theme): string;
+    rootSmall(t: Theme): string;
+    rootMedium(t: Theme): string;
+    rootLarge(t: Theme): string;
+    verticalSmall(t: Theme): string;
+    verticalMedium(t: Theme): string;
+    verticalLarge(t: Theme): string;
+    focusSmall(t: Theme): string;
+    focusMedium(t: Theme): string;
+    focusLarge(t: Theme): string;
     disabled(t: Theme): string;
     active(): string;
 };

package/components/Tabs/Tabs/Tabs.js

@@ -5,12 +5,14 @@ import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 var _class, _class2, _temp;
 
 import React from 'react';
-import PropTypes from 'prop-types';
+import { globalObject } from '@skbkontur/global-object';
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
 import { cx } from "../../../lib/theming/Emotion";
 import { getRootNode } from "../../../lib/rootNode/getRootNode";
 import { rootNode } from "../../../lib/rootNode";
+import { createPropsGetter } from "../../../lib/createPropsGetter";
+import { isInstanceOf } from "../../../lib/isInstanceOf";
 import { Indicator } from "../Indicator";
 import { styles } from "../Tabs.styles";
 import { TabsContext } from "../TabsContext";
@@ -19,13 +21,11 @@ export var TabsDataTids = {
   root: 'Tabs__root',
   indicatorRoot: 'Indicator__root'
 };
+export
 /**
- * Tabs wrapper
- *
- * contains static property `Tab`
- */
-
-export var Tabs = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+* Родитель компонента `<Tab />`. Связывает `Tab`'ы в группу и позволяет управлять их состоянием.
+*/
+var Tabs = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Tabs, _React$Component);
 
   function Tabs() {
@@ -36,6 +36,7 @@ export var Tabs = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_R
     }
 
     _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _this.getProps = createPropsGetter(Tabs.defaultProps);
     _this.tabs = [];
     _this.tabUpdates = {
       on: function on(cb) {
@@ -60,7 +61,7 @@ export var Tabs = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_R
       var tabNode = tab.getNode();
       var htmlNode = getRootNode(tabNode);
 
-      if (htmlNode && htmlNode instanceof HTMLElement && typeof htmlNode.focus === 'function') {
+      if (isInstanceOf(htmlNode, globalObject.HTMLElement) && typeof htmlNode.focus === 'function') {
         htmlNode.focus();
       }
     };
@@ -113,25 +114,34 @@ export var Tabs = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_R
     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;
+        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.createElement(ThemeContext.Consumer, null, function (theme) {
+      var _cx;
+
       _this2.theme = theme;
       return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
         rootNodeRef: _this2.setRootNode
       }, _this2.props), /*#__PURE__*/React.createElement("div", {
         "data-tid": TabsDataTids.root,
-        className: cx(styles.root(_this2.theme), vertical && styles.vertical()),
+        className: cx((_cx = {}, _cx[styles.rootSmall(_this2.theme)] = size === 'small', _cx[styles.rootMedium(_this2.theme)] = size === 'medium', _cx[styles.rootLarge(_this2.theme)] = size === 'large', _cx[styles.vertical()] = vertical, _cx)),
         style: {
           width: width
-        }
+        },
+        "aria-describedby": ariaDescribedby
       }, /*#__PURE__*/React.createElement(TabsContext.Provider, {
         value: {
           vertical: vertical,
           activeTab: value,
+          size: size,
           getTab: _this2.getTab,
           addTab: _this2.addTab,
           removeTab: _this2.removeTab,
@@ -142,18 +152,13 @@ export var Tabs = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_R
       }, children, /*#__PURE__*/React.createElement(Indicator, {
         className: indicatorClassName,
         tabUpdates: _this2.tabUpdates,
-        vertical: vertical
+        vertical: _this2.getProps().vertical
       }))));
     });
   };
 
   return Tabs;
-}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Tabs', _class2.propTypes = {
-  children: PropTypes.node,
-  indicatorClassName: PropTypes.string,
-  value: PropTypes.string.isRequired,
-  vertical: PropTypes.bool,
-  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-}, _class2.defaultProps = {
-  vertical: false
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Tabs', _class2.defaultProps = {
+  vertical: false,
+  size: 'large'
 }, _class2.Tab = Tab, _temp)) || _class;

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

@@ -1 +1 @@
-{"version":3,"sources":["Tabs.tsx"],"names":["React","PropTypes","ThemeContext","CommonWrapper","cx","getRootNode","rootNode","Indicator","styles","TabsContext","Tab","TabsDataTids","root","indicatorRoot","Tabs","tabs","tabUpdates","on","cb","index","listeners","push","splice","shiftFocus","fromTab","delta","findIndex","x","id","newIndex","Math","max","min","length","tab","tabNode","getNode","htmlNode","HTMLElement","focus","notifyUpdate","forEach","switchTab","props","onValueChange","value","getTab","find","addTab","concat","removeTab","filter","render","vertical","width","children","indicatorClassName","theme","setRootNode","activeTab","Component","__KONTUR_REACT_UI__","propTypes","node","string","isRequired","bool","oneOfType","number","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\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';\n\nimport { Indicator } from './Indicator';\nimport { styles } from './Tabs.styles';\nimport { TabsContext, TabsContextType } from './TabsContext';\nimport { Tab } from './Tab';\n\ntype ValueBaseType = string;\ntype 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   * 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\nexport const TabsDataTids = {\n  root: 'Tabs__root',\n  indicatorRoot: 'Indicator__root',\n} as const;\n\n/**\n * Tabs wrapper\n *\n * contains static property `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 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<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 { vertical, value, width, children, indicatorClassName } = this.props;\n\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(styles.root(this.theme), vertical && styles.vertical())}\n                style={{ width }}\n              >\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    const htmlNode = getRootNode(tabNode);\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":["React","globalObject","ThemeContext","CommonWrapper","cx","getRootNode","rootNode","createPropsGetter","isInstanceOf","Indicator","styles","TabsContext","Tab","TabsDataTids","root","indicatorRoot","Tabs","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","HTMLElement","focus","notifyUpdate","forEach","switchTab","props","onValueChange","value","getTab","find","addTab","concat","removeTab","filter","render","width","children","indicatorClassName","ariaDescribedby","vertical","size","theme","setRootNode","rootSmall","rootMedium","rootLarge","activeTab","Component","__KONTUR_REACT_UI__"],"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/components/Tabs/Tabs.d.ts

@@ -1,56 +1,53 @@
-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';
 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;

package/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/components/Tabs/Tabs.styles/Tabs.styles.js

@@ -3,11 +3,22 @@ import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTempla
 var _templateObject, _templateObject2;
 
 import { css, memoizeStyle } from "../../../lib/theming/Emotion";
+import { paddingX } from "../helpers";
 export var styles = memoizeStyle({
-  root: function root(t) {
-    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      margin: 0 -", ";\n      padding: 0;\n      position: relative;\n    "])), t.tabsMarginX);
+  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 css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      margin: 0;\n    "])));
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      margin: 0;\n    "])));
   }
-});
+});
+
+function tabsRoot(t, size) {
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n    display: inline-block;\n    margin: 0 -", ";\n    padding: 0;\n    position: relative;\n  "])), paddingX(t, size));
+}