@skbkontur/react-ui 0.0.0-bcbd5e6112 → 0.0.0-c13bb5f4ca

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

@@ -1,99 +1,93 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26;
-import { memoizeStyle, prefix } from "../../../lib/theming/Emotion";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
+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 getStyles = function getStyles(emotion) {
-  return memoizeStyle({
-    rootSmall: function rootSmall(t) {
-      return emotion.css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n        ", "\n      "])), tabRoot(t, 'small', emotion));
-    },
-    rootMedium: function rootMedium(t) {
-      return emotion.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n        ", "\n      "])), tabRoot(t, 'medium', emotion));
-    },
-    rootLarge: function rootLarge(t) {
-      return emotion.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n        ", "\n      "])), tabRoot(t, 'large', emotion));
-    },
-    verticalSmall: function verticalSmall(t) {
-      return emotion.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n        ", "\n      "])), tabVertical(t, 'small', emotion));
-    },
-    verticalMedium: function verticalMedium(t) {
-      return emotion.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n        ", "\n      "])), tabVertical(t, 'medium', emotion));
-    },
-    verticalLarge: function verticalLarge(t) {
-      return emotion.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n        ", "\n      "])), tabVertical(t, 'large', emotion));
-    },
-    focusSmall: function focusSmall(t) {
-      return emotion.css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n        ", "\n      "])), tabFocus(t, 'small', emotion));
-    },
-    focusMedium: function focusMedium(t) {
-      return emotion.css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n        ", "\n      "])), tabFocus(t, 'medium', emotion));
-    },
-    focusLarge: function focusLarge(t) {
-      return emotion.css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n        ", "\n      "])), tabFocus(t, 'large', emotion));
-    },
-    disabled: function disabled(t) {
-      return emotion.css(_templateObject10 || (_templateObject10 = _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 emotion.css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n        cursor: default;\n      "])));
-    }
-  });
-};
-export var getHorizontalStyles = function getHorizontalStyles(emotion) {
-  return memoizeStyle({
-    active: function active(t) {
-      return emotion.css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n        &:hover {\n          border-bottom: ", " solid transparent;\n        }\n      "])), t.tabBorderWidth);
-    },
-    disabled: function disabled() {
-      return emotion.css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n        &:hover {\n          border-bottom-color: transparent;\n        }\n      "])));
-    },
-    primary: function primary(t) {
-      return emotion.css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n        &:hover {\n          border-bottom-color: ", ";\n        }\n      "])), t.tabColorHoverPrimary);
-    },
-    success: function success(t) {
-      return emotion.css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n        &:hover {\n          border-bottom-color: ", ";\n        }\n      "])), t.tabColorHoverSuccess);
-    },
-    warning: function warning(t) {
-      return emotion.css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n        &:hover {\n          border-bottom-color: ", ";\n        }\n      "])), t.tabColorHoverWarning);
-    },
-    error: function error(t) {
-      return emotion.css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n        &:hover {\n          border-bottom-color: ", ";\n        }\n      "])), t.tabColorHoverError);
-    }
-  });
-};
-export var getVerticalStyles = function getVerticalStyles(emotion) {
-  return memoizeStyle({
-    active: function active(t) {
-      return emotion.css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n        &:hover {\n          border-left: ", " solid transparent;\n        }\n      "])), t.tabBorderWidth);
-    },
-    disabled: function disabled() {
-      return emotion.css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n        &:hover {\n          border-left-color: transparent;\n        }\n      "])));
-    },
-    primary: function primary(t) {
-      return emotion.css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["\n        &:hover {\n          border-left-color: ", ";\n        }\n      "])), t.tabColorHoverPrimary);
-    },
-    success: function success(t) {
-      return emotion.css(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["\n        &:hover {\n          border-left-color: ", ";\n        }\n      "])), t.tabColorHoverSuccess);
-    },
-    warning: function warning(t) {
-      return emotion.css(_templateObject22 || (_templateObject22 = _taggedTemplateLiteralLoose(["\n        &:hover {\n          border-left-color: ", ";\n        }\n      "])), t.tabColorHoverWarning);
-    },
-    error: function error(t) {
-      return emotion.css(_templateObject23 || (_templateObject23 = _taggedTemplateLiteralLoose(["\n        &:hover {\n          border-left-color: ", ";\n        }\n      "])), t.tabColorHoverError);
-    }
-  });
-};
-function tabRoot(t, size, emotion) {
-  return emotion.css(_templateObject24 || (_templateObject24 = _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);
+export var styles = memoizeStyle({
+  rootSmall: function rootSmall(t) {
+    return tabRoot(t, 'small');
+  },
+  rootMedium: function rootMedium(t) {
+    return tabRoot(t, 'medium');
+  },
+  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(_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(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      cursor: default;\n    "])));
+  }
+});
+export var horizontalStyles = memoizeStyle({
+  active: function active(t) {
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom: ", " solid transparent;\n      }\n    "])), t.tabBorderWidth);
+  },
+  disabled: function disabled() {
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom-color: transparent;\n      }\n    "])));
+  },
+  primary: function primary(t) {
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom-color: ", ";\n      }\n    "])), t.tabColorHoverPrimary);
+  },
+  success: function success(t) {
+    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom-color: ", ";\n      }\n    "])), t.tabColorHoverSuccess);
+  },
+  warning: function warning(t) {
+    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom-color: ", ";\n      }\n    "])), t.tabColorHoverWarning);
+  },
+  error: function error(t) {
+    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(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-left: ", " solid transparent;\n      }\n    "])), t.tabBorderWidth);
+  },
+  disabled: function disabled() {
+    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-left-color: transparent;\n      }\n    "])));
+  },
+  primary: function primary(t) {
+    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-left-color: ", ";\n      }\n    "])), t.tabColorHoverPrimary);
+  },
+  success: function success(t) {
+    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-left-color: ", ";\n      }\n    "])), t.tabColorHoverSuccess);
+  },
+  warning: function warning(t) {
+    return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-left-color: ", ";\n      }\n    "])), t.tabColorHoverWarning);
+  },
+  error: function error(t) {
+    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, emotion) {
-  return emotion.css(_templateObject25 || (_templateObject25 = _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 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, emotion) {
-  return emotion.css(_templateObject26 || (_templateObject26 = _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));
+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,"names":["memoizeStyle","prefix","shift","ColorFunctions","fontSize","lineHeight","paddingX","paddingY","globalClasses","focus","getStyles","emotion","rootSmall","t","css","_templateObject","_taggedTemplateLiteralLoose","tabRoot","rootMedium","_templateObject2","rootLarge","_templateObject3","verticalSmall","_templateObject4","tabVertical","verticalMedium","_templateObject5","verticalLarge","_templateObject6","focusSmall","_templateObject7","tabFocus","focusMedium","_templateObject8","focusLarge","_templateObject9","disabled","_templateObject10","red","tabTextColorDefault","green","blue","active","_templateObject11","getHorizontalStyles","_templateObject12","tabBorderWidth","_templateObject13","primary","_templateObject14","tabColorHoverPrimary","success","_templateObject15","tabColorHoverSuccess","warning","_templateObject16","tabColorHoverWarning","error","_templateObject17","tabColorHoverError","getVerticalStyles","_templateObject18","_templateObject19","_templateObject20","_templateObject21","_templateObject22","_templateObject23","size","_templateObject24","transitionDuration","transitionTimingFunction","tabColorHover","_templateObject25","_templateObject26","tabOutlineWidth","tabColorFocus"],"sources":["Tab.styles.ts"],"sourcesContent":["import type { Emotion } from '@emotion/css/types/create-instance';\n\nimport { memoizeStyle, prefix } from '../../lib/theming/Emotion';\nimport { shift } from '../../lib/styles/DimensionFunctions';\nimport * as ColorFunctions from '../../lib/styles/ColorFunctions';\nimport type { Theme } from '../../lib/theming/Theme';\nimport type { 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 getStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    rootSmall(t: Theme) {\n      return emotion.css`\n        ${tabRoot(t, 'small', emotion)}\n      `;\n    },\n\n    rootMedium(t: Theme) {\n      return emotion.css`\n        ${tabRoot(t, 'medium', emotion)}\n      `;\n    },\n\n    rootLarge(t: Theme) {\n      return emotion.css`\n        ${tabRoot(t, 'large', emotion)}\n      `;\n    },\n\n    verticalSmall(t: Theme) {\n      return emotion.css`\n        ${tabVertical(t, 'small', emotion)}\n      `;\n    },\n\n    verticalMedium(t: Theme) {\n      return emotion.css`\n        ${tabVertical(t, 'medium', emotion)}\n      `;\n    },\n\n    verticalLarge(t: Theme) {\n      return emotion.css`\n        ${tabVertical(t, 'large', emotion)}\n      `;\n    },\n\n    focusSmall(t: Theme) {\n      return emotion.css`\n        ${tabFocus(t, 'small', emotion)}\n      `;\n    },\n\n    focusMedium(t: Theme) {\n      return emotion.css`\n        ${tabFocus(t, 'medium', emotion)}\n      `;\n    },\n\n    focusLarge(t: Theme) {\n      return emotion.css`\n        ${tabFocus(t, 'large', emotion)}\n      `;\n    },\n\n    disabled(t: Theme) {\n      return emotion.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 emotion.css`\n        cursor: default;\n      `;\n    },\n  });\n\nexport const getHorizontalStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    active(t: Theme) {\n      return emotion.css`\n        &:hover {\n          border-bottom: ${t.tabBorderWidth} solid transparent;\n        }\n      `;\n    },\n\n    disabled() {\n      return emotion.css`\n        &:hover {\n          border-bottom-color: transparent;\n        }\n      `;\n    },\n\n    primary(t: Theme) {\n      return emotion.css`\n        &:hover {\n          border-bottom-color: ${t.tabColorHoverPrimary};\n        }\n      `;\n    },\n\n    success(t: Theme) {\n      return emotion.css`\n        &:hover {\n          border-bottom-color: ${t.tabColorHoverSuccess};\n        }\n      `;\n    },\n\n    warning(t: Theme) {\n      return emotion.css`\n        &:hover {\n          border-bottom-color: ${t.tabColorHoverWarning};\n        }\n      `;\n    },\n\n    error(t: Theme) {\n      return emotion.css`\n        &:hover {\n          border-bottom-color: ${t.tabColorHoverError};\n        }\n      `;\n    },\n  });\n\nexport const getVerticalStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    active(t: Theme) {\n      return emotion.css`\n        &:hover {\n          border-left: ${t.tabBorderWidth} solid transparent;\n        }\n      `;\n    },\n\n    disabled() {\n      return emotion.css`\n        &:hover {\n          border-left-color: transparent;\n        }\n      `;\n    },\n\n    primary(t: Theme) {\n      return emotion.css`\n        &:hover {\n          border-left-color: ${t.tabColorHoverPrimary};\n        }\n      `;\n    },\n\n    success(t: Theme) {\n      return emotion.css`\n        &:hover {\n          border-left-color: ${t.tabColorHoverSuccess};\n        }\n      `;\n    },\n\n    warning(t: Theme) {\n      return emotion.css`\n        &:hover {\n          border-left-color: ${t.tabColorHoverWarning};\n        }\n      `;\n    },\n\n    error(t: Theme) {\n      return emotion.css`\n        &:hover {\n          border-left-color: ${t.tabColorHoverError};\n        }\n      `;\n    },\n  });\n\nfunction tabRoot(t: Theme, size: SizeProp, emotion: Emotion) {\n  return emotion.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, emotion: Emotion) {\n  return emotion.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, emotion: Emotion) {\n  return emotion.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"],"mappings":"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","ignoreList":[]}
+{"version":3,"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","_templateObject","_taggedTemplateLiteralLoose","red","tabTextColorDefault","green","blue","active","_templateObject2","horizontalStyles","_templateObject3","tabBorderWidth","_templateObject4","primary","_templateObject5","tabColorHoverPrimary","success","_templateObject6","tabColorHoverSuccess","warning","_templateObject7","tabColorHoverWarning","error","_templateObject8","tabColorHoverError","verticalStyles","_templateObject9","_templateObject10","_templateObject11","_templateObject12","_templateObject13","_templateObject14","size","_templateObject15","transitionDuration","transitionTimingFunction","tabColorHover","_templateObject16","_templateObject17","tabOutlineWidth","tabColorFocus"],"sources":["Tab.styles.ts"],"sourcesContent":["import { css, memoizeStyle, prefix } from '../../lib/theming/Emotion';\nimport { shift } from '../../lib/styles/DimensionFunctions';\nimport * as ColorFunctions from '../../lib/styles/ColorFunctions';\nimport type { Theme } from '../../lib/theming/Theme';\nimport type { 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"],"mappings":"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","ignoreList":[]}

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

@@ -1,9 +1,8 @@
-import type { Emotion } from '@emotion/css/types/create-instance';
 import type { Theme } from '../../lib/theming/Theme';
 export declare const globalClasses: {
     focus: string;
 };
-export declare const getStyles: (emotion: Emotion) => {
+export declare const styles: {
     rootSmall(t: Theme): string;
     rootMedium(t: Theme): string;
     rootLarge(t: Theme): string;
@@ -16,7 +15,7 @@ export declare const getStyles: (emotion: Emotion) => {
     disabled(t: Theme): string;
     active(): string;
 };
-export declare const getHorizontalStyles: (emotion: Emotion) => {
+export declare const horizontalStyles: {
     active(t: Theme): string;
     disabled(): string;
     primary(t: Theme): string;
@@ -24,7 +23,7 @@ export declare const getHorizontalStyles: (emotion: Emotion) => {
     warning(t: Theme): string;
     error(t: Theme): string;
 };
-export declare const getVerticalStyles: (emotion: Emotion) => {
+export declare const verticalStyles: {
     active(t: Theme): string;
     disabled(): string;
     primary(t: Theme): string;

package/components/Tabs/Tabs/Tabs.js

@@ -2,15 +2,16 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 var _class, _Tabs;
 import React from 'react';
-import { RenderEnvironmentContext } from "../../../lib/theming/RenderEnvironmentContext";
+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 { getStyles } from "../Tabs.styles";
+import { styles } from "../Tabs.styles";
 import { TabsContext } from "../TabsContext";
 import { Tab } from "../Tab";
 export var TabsDataTids = {
@@ -54,7 +55,7 @@ export var Tabs = rootNode(_class = (_Tabs = /*#__PURE__*/function (_React$Compo
       var tab = tabs[newIndex];
       var tabNode = tab.getNode();
       var htmlNode = getRootNode(tabNode);
-      if (isInstanceOf(htmlNode, _this.globalObject.HTMLElement) && typeof htmlNode.focus === 'function') {
+      if (isInstanceOf(htmlNode, globalObject.HTMLElement) && typeof htmlNode.focus === 'function') {
         htmlNode.focus();
       }
     };
@@ -105,42 +106,35 @@ export var Tabs = rootNode(_class = (_Tabs = /*#__PURE__*/function (_React$Compo
     var _this$getProps = this.getProps(),
       vertical = _this$getProps.vertical,
       size = _this$getProps.size;
-    return /*#__PURE__*/React.createElement(RenderEnvironmentContext.Consumer, null, function (_ref2) {
-      var globalObject = _ref2.globalObject,
-        emotion = _ref2.emotion;
-      _this3.globalObject = globalObject;
-      _this3.cx = emotion.cx;
-      _this3.styles = getStyles(emotion);
-      return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
-        var _this3$cx;
-        _this3.theme = theme;
-        return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
-          rootNodeRef: _this3.setRootNode
-        }, _this3.props), /*#__PURE__*/React.createElement("div", {
-          "data-tid": TabsDataTids.root,
-          className: _this3.cx((_this3$cx = {}, _this3$cx[_this3.styles.rootSmall(_this3.theme)] = size === 'small', _this3$cx[_this3.styles.rootMedium(_this3.theme)] = size === 'medium', _this3$cx[_this3.styles.rootLarge(_this3.theme)] = size === 'large', _this3$cx[_this3.styles.vertical()] = vertical, _this3$cx)),
-          style: {
-            width: width
-          },
-          "aria-describedby": ariaDescribedby
-        }, /*#__PURE__*/React.createElement(TabsContext.Provider, {
-          value: {
-            vertical: vertical,
-            activeTab: value,
-            size: size,
-            getTab: _this3.getTab,
-            addTab: _this3.addTab,
-            removeTab: _this3.removeTab,
-            notifyUpdate: _this3.notifyUpdate,
-            shiftFocus: _this3.shiftFocus,
-            switchTab: _this3.switchTab
-          }
-        }, children, /*#__PURE__*/React.createElement(Indicator, {
-          className: indicatorClassName,
-          tabUpdates: _this3.tabUpdates,
-          vertical: _this3.getProps().vertical
-        }))));
-      });
+    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+      var _cx;
+      _this3.theme = theme;
+      return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
+        rootNodeRef: _this3.setRootNode
+      }, _this3.props), /*#__PURE__*/React.createElement("div", {
+        "data-tid": TabsDataTids.root,
+        className: cx((_cx = {}, _cx[styles.rootSmall(_this3.theme)] = size === 'small', _cx[styles.rootMedium(_this3.theme)] = size === 'medium', _cx[styles.rootLarge(_this3.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: _this3.getTab,
+          addTab: _this3.addTab,
+          removeTab: _this3.removeTab,
+          notifyUpdate: _this3.notifyUpdate,
+          shiftFocus: _this3.shiftFocus,
+          switchTab: _this3.switchTab
+        }
+      }, children, /*#__PURE__*/React.createElement(Indicator, {
+        className: indicatorClassName,
+        tabUpdates: _this3.tabUpdates,
+        vertical: _this3.getProps().vertical
+      }))));
     });
   };
   return Tabs;

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

@@ -1 +1 @@
-{"version":3,"names":["React","RenderEnvironmentContext","ThemeContext","CommonWrapper","getRootNode","rootNode","createPropsGetter","isInstanceOf","Indicator","getStyles","TabsContext","Tab","TabsDataTids","root","indicatorRoot","Tabs","_class","_Tabs","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","getProps","defaultProps","tabs","tabUpdates","on","cb","index","listeners","push","splice","shiftFocus","fromTab","delta","_this2","findIndex","x","id","newIndex","Math","max","min","tab","tabNode","getNode","htmlNode","globalObject","HTMLElement","focus","notifyUpdate","forEach","switchTab","_this$props","props","onValueChange","value","getTab","_ref","find","_ref$getNode","addTab","removeTab","filter","_inheritsLoose","_proto","prototype","render","_this3","_this$props2","width","children","indicatorClassName","ariaDescribedby","_this$getProps","vertical","size","createElement","Consumer","_ref2","emotion","cx","styles","theme","_this3$cx","_extends","rootNodeRef","setRootNode","className","rootSmall","rootMedium","rootLarge","style","Provider","activeTab","Component","__KONTUR_REACT_UI__","displayName"],"sources":["Tabs.tsx"],"sourcesContent":["import type { AriaAttributes } from 'react';\nimport React from 'react';\nimport type { Emotion } from '@emotion/css/types/create-instance';\n\nimport { RenderEnvironmentContext } from '../../lib/theming/RenderEnvironmentContext';\nimport type { GlobalObject } from '../../lib/globalObject';\nimport type { emptyHandler } from '../../lib/utils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport type { Theme } from '../../lib/theming/Theme';\nimport type { CommonProps } from '../../internal/CommonWrapper';\nimport { CommonWrapper } from '../../internal/CommonWrapper';\nimport { getRootNode } from '../../lib/rootNode/getRootNode';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode';\nimport { rootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport type { SizeProp } from '../../lib/types/props';\nimport { isInstanceOf } from '../../lib/isInstanceOf';\n\nimport { Indicator } from './Indicator';\nimport { getStyles } from './Tabs.styles';\nimport type { TabsContextType } from './TabsContext';\nimport { TabsContext } 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  indicatorClassName?: string;\n\n  /** Задает размер контрола. */\n  size?: SizeProp;\n\n  /** Задает текущий активный `<Tab />`. Принимает `id` таба. */\n  value: T;\n\n  /** Задает функцию, изменяющую текущий активный `<Tab />`. */\n  onValueChange?: (value: T) => void;\n\n  /** Задает расположение элементов по вертикали.\n   * @default false */\n  vertical?: boolean;\n\n  /** Задает ширину компонента Tabs. */\n  width?: number | string;\n\n  /** @ignore */\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 * Используйте `Tabs` для второстепенной навигации, для группировки или фильтрации контента.\n *\n * Не используйте `Tabs` для основной навигации. Для этого лучше подходит главное меню на цветной плашке — оно более заметно на странице.\n * Не используйте `Tabs` для переключения состояний — для этого есть RadioGroup, Toggle и Switcher.\n */\n@rootNode\nexport class Tabs<T extends string = string> extends React.Component<TabsProps<T>> {\n  public static __KONTUR_REACT_UI__ = 'Tabs';\n  public static displayName = '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 globalObject!: GlobalObject;\n  private cx!: Emotion['cx'];\n  private styles!: ReturnType<typeof getStyles>;\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  public getRootNode!: TGetRootNode;\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      <RenderEnvironmentContext.Consumer>\n        {({ globalObject, emotion }) => {\n          this.globalObject = globalObject;\n          this.cx = emotion.cx;\n          this.styles = getStyles(emotion);\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={this.cx({\n                        [this.styles.rootSmall(this.theme)]: size === 'small',\n                        [this.styles.rootMedium(this.theme)]: size === 'medium',\n                        [this.styles.rootLarge(this.theme)]: size === 'large',\n                        [this.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      </RenderEnvironmentContext.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, this.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"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","globalObject","ThemeContext","CommonWrapper","cx","getRootNode","rootNode","createPropsGetter","isInstanceOf","Indicator","styles","TabsContext","Tab","TabsDataTids","root","indicatorRoot","Tabs","_class","_Tabs","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","getProps","defaultProps","tabs","tabUpdates","on","cb","index","listeners","push","splice","shiftFocus","fromTab","delta","_this2","findIndex","x","id","newIndex","Math","max","min","tab","tabNode","getNode","htmlNode","HTMLElement","focus","notifyUpdate","forEach","switchTab","_this$props","props","onValueChange","value","getTab","_ref","find","_ref$getNode","addTab","removeTab","filter","_inheritsLoose","_proto","prototype","render","_this3","_this$props2","width","children","indicatorClassName","ariaDescribedby","_this$getProps","vertical","size","createElement","Consumer","theme","_cx","_extends","rootNodeRef","setRootNode","className","rootSmall","rootMedium","rootLarge","style","Provider","activeTab","Component","__KONTUR_REACT_UI__","displayName"],"sources":["Tabs.tsx"],"sourcesContent":["import type { AriaAttributes } from 'react';\nimport React from 'react';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport type { emptyHandler } from '../../lib/utils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport type { Theme } from '../../lib/theming/Theme';\nimport type { CommonProps } from '../../internal/CommonWrapper';\nimport { CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { getRootNode } from '../../lib/rootNode/getRootNode';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode';\nimport { rootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport type { SizeProp } from '../../lib/types/props';\nimport { isInstanceOf } from '../../lib/isInstanceOf';\n\nimport { Indicator } from './Indicator';\nimport { styles } from './Tabs.styles';\nimport type { TabsContextType } from './TabsContext';\nimport { TabsContext } 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  indicatorClassName?: string;\n\n  /** Задает размер контрола. */\n  size?: SizeProp;\n\n  /** Задает текущий активный `<Tab />`. Принимает `id` таба. */\n  value: T;\n\n  /** Задает функцию, изменяющую текущий активный `<Tab />`. */\n  onValueChange?: (value: T) => void;\n\n  /** Задает расположение элементов по вертикали.\n   * @default false */\n  vertical?: boolean;\n\n  /** Задает ширину компонента Tabs. */\n  width?: number | string;\n\n  /** @ignore */\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 * Используйте `Tabs` для второстепенной навигации, для группировки или фильтрации контента.\n *\n * Не используйте `Tabs` для основной навигации. Для этого лучше подходит главное меню на цветной плашке — оно более заметно на странице.\n * Не используйте `Tabs` для переключения состояний — для этого есть RadioGroup, Toggle и Switcher.\n */\n@rootNode\nexport class Tabs<T extends string = string> extends React.Component<TabsProps<T>> {\n  public static __KONTUR_REACT_UI__ = 'Tabs';\n  public static displayName = '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  public getRootNode!: TGetRootNode;\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"],"mappings":"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","ignoreList":[]}

package/components/Tabs/Tabs.d.ts

@@ -41,9 +41,6 @@ export declare class Tabs<T extends string = string> extends React.Component<Tab
     static defaultProps: DefaultProps;
     private getProps;
     static Tab: typeof Tab;
-    private globalObject;
-    private cx;
-    private styles;
     private theme;
     private tabs;
     private tabUpdates;

package/components/Tabs/Tabs.md

@@ -0,0 +1,54 @@
+### Базовый пример
+```jsx harmony
+const [active, setActive] = React.useState('fuji');
+
+<Tabs 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>;
+```
+
+### Расположение табов
+Компонент может отображать табы двумя способами: горизонтально (по умолчанию) и вертикально.
+```jsx harmony
+const [active, setActive] = React.useState('fuji');
+
+<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>;
+```
+
+### Размер
+```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

@@ -1,23 +1,21 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-import { memoizeStyle } from "../../../lib/theming/Emotion";
+var _templateObject, _templateObject2;
+import { css, memoizeStyle } from "../../../lib/theming/Emotion";
 import { paddingX } from "../helpers";
-export var getStyles = function getStyles(emotion) {
-  return memoizeStyle({
-    rootSmall: function rootSmall(t) {
-      return emotion.css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n        ", "\n      "])), tabsRoot(t, 'small', emotion));
-    },
-    rootMedium: function rootMedium(t) {
-      return emotion.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n        ", "\n      "])), tabsRoot(t, 'medium', emotion));
-    },
-    rootLarge: function rootLarge(t) {
-      return emotion.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n        ", "\n      "])), tabsRoot(t, 'large', emotion));
-    },
-    vertical: function vertical() {
-      return emotion.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n        margin: 0;\n      "])));
-    }
-  });
-};
-function tabsRoot(t, size, emotion) {
-  return emotion.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n    display: inline-block;\n    margin: 0 -", ";\n    padding: 0;\n    position: relative;\n  "])), paddingX(t, size));
+export var styles = 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 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));
 }

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

@@ -1 +1 @@
-{"version":3,"names":["memoizeStyle","paddingX","getStyles","emotion","rootSmall","t","css","_templateObject","_taggedTemplateLiteralLoose","tabsRoot","rootMedium","_templateObject2","rootLarge","_templateObject3","vertical","_templateObject4","size","_templateObject5"],"sources":["Tabs.styles.ts"],"sourcesContent":["import type { Emotion } from '@emotion/css/types/create-instance';\n\nimport { memoizeStyle } from '../../lib/theming/Emotion';\nimport type { Theme } from '../../lib/theming/Theme';\nimport type { SizeProp } from '../../lib/types/props';\n\nimport { paddingX } from './helpers';\n\nexport const getStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    rootSmall(t: Theme) {\n      return emotion.css`\n        ${tabsRoot(t, 'small', emotion)}\n      `;\n    },\n\n    rootMedium(t: Theme) {\n      return emotion.css`\n        ${tabsRoot(t, 'medium', emotion)}\n      `;\n    },\n\n    rootLarge(t: Theme) {\n      return emotion.css`\n        ${tabsRoot(t, 'large', emotion)}\n      `;\n    },\n\n    vertical() {\n      return emotion.css`\n        margin: 0;\n      `;\n    },\n  });\n\nfunction tabsRoot(t: Theme, size: SizeProp, emotion: Emotion) {\n  return emotion.css`\n    display: inline-block;\n    margin: 0 -${paddingX(t, size)};\n    padding: 0;\n    position: relative;\n  `;\n}\n"],"mappings":";;AAEA,SAASA,YAAY,QAAQ,2BAA2B;;;;AAIxD,SAASC,QAAQ,QAAQ,WAAW;;AAEpC,OAAO,IAAMC,SAAS,GAAG,SAAZA,SAASA,CAAIC,OAAgB;IACxCH,YAAY,CAAC;MACXI,SAAS,WAAAA,UAACC,CAAQ,EAAE;QAClB,OAAOF,OAAO,CAACG,GAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,2BAAA;QACdC,QAAQ,CAACJ,CAAC,EAAE,OAAO,EAAEF,OAAO,CAAC;;MAEnC,CAAC;;MAEDO,UAAU,WAAAA,WAACL,CAAQ,EAAE;QACnB,OAAOF,OAAO,CAACG,GAAG,CAAAK,gBAAA,KAAAA,gBAAA,GAAAH,2BAAA;QACdC,QAAQ,CAACJ,CAAC,EAAE,QAAQ,EAAEF,OAAO,CAAC;;MAEpC,CAAC;;MAEDS,SAAS,WAAAA,UAACP,CAAQ,EAAE;QAClB,OAAOF,OAAO,CAACG,GAAG,CAAAO,gBAAA,KAAAA,gBAAA,GAAAL,2BAAA;QACdC,QAAQ,CAACJ,CAAC,EAAE,OAAO,EAAEF,OAAO,CAAC;;MAEnC,CAAC;;MAEDW,QAAQ,WAAAA,SAAA,EAAG;QACT,OAAOX,OAAO,CAACG,GAAG,CAAAS,gBAAA,KAAAA,gBAAA,GAAAP,2BAAA;;;MAGpB;IACF,CAAC,CAAC;;AAEJ,SAASC,QAAQA,CAACJ,CAAQ,EAAEW,IAAc,EAAEb,OAAgB,EAAE;EAC5D,OAAOA,OAAO,CAACG,GAAG,CAAAW,gBAAA,KAAAA,gBAAA,GAAAT,2BAAA;;EAEHP,QAAQ,CAACI,CAAC,EAAEW,IAAI,CAAC;;;;AAIlC","ignoreList":[]}
+{"version":3,"names":["css","memoizeStyle","paddingX","styles","rootSmall","t","tabsRoot","rootMedium","rootLarge","vertical","_templateObject","_taggedTemplateLiteralLoose","size","_templateObject2"],"sources":["Tabs.styles.ts"],"sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport type { Theme } from '../../lib/theming/Theme';\nimport type { 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"],"mappings":"sIAAA,SAASA,GAAG,EAAEC,YAAY,QAAQ,2BAA2B;;;;AAI7D,SAASC,QAAQ,QAAQ,WAAW;;AAEpC,OAAO,IAAMC,MAAM,GAAGF,YAAY,CAAC;EACjCG,SAAS,WAAAA,UAACC,CAAQ,EAAE;IAClB,OAAOC,QAAQ,CAACD,CAAC,EAAE,OAAO,CAAC;EAC7B,CAAC;;EAEDE,UAAU,WAAAA,WAACF,CAAQ,EAAE;IACnB,OAAOC,QAAQ,CAACD,CAAC,EAAE,QAAQ,CAAC;EAC9B,CAAC;;EAEDG,SAAS,WAAAA,UAACH,CAAQ,EAAE;IAClB,OAAOC,QAAQ,CAACD,CAAC,EAAE,OAAO,CAAC;EAC7B,CAAC;;EAEDI,QAAQ,WAAAA,SAAA,EAAG;IACT,OAAOT,GAAG,CAAAU,eAAA,KAAAA,eAAA,GAAAC,2BAAA;;;EAGZ;AACF,CAAC,CAAC;;AAEF,SAASL,QAAQA,CAACD,CAAQ,EAAEO,IAAc,EAAE;EAC1C,OAAOZ,GAAG,CAAAa,gBAAA,KAAAA,gBAAA,GAAAF,2BAAA;;EAEKT,QAAQ,CAACG,CAAC,EAAEO,IAAI,CAAC;;;;AAIlC","ignoreList":[]}

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

@@ -1,6 +1,5 @@
-import type { Emotion } from '@emotion/css/types/create-instance';
 import type { Theme } from '../../lib/theming/Theme';
-export declare const getStyles: (emotion: Emotion) => {
+export declare const styles: {
     rootSmall(t: Theme): string;
     rootMedium(t: Theme): string;
     rootLarge(t: Theme): string;