@skbkontur/react-ui 0.0.0-aaf2aabecb → 0.0.0-bb4cbfe9c6

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

@@ -1,124 +1,69 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 
-function _templateObject9() {
-  var data = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom-color: ", ";\n      }\n      &", ":hover {\n        border-left-color: ", ";\n      }\n    "]);
-
-  _templateObject9 = function _templateObject9() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject8() {
-  var data = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom-color: ", ";\n      }\n      &", ":hover {\n        border-left-color: ", ";\n      }\n    "]);
-
-  _templateObject8 = function _templateObject8() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject7() {
-  var data = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom-color: ", ";\n      }\n      &", ":hover {\n        border-left-color: ", ";\n      }\n    "]);
-
-  _templateObject7 = function _templateObject7() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject6() {
-  var data = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom-color: ", ";\n      }\n      &", ":hover {\n        border-left-color: ", ";\n      }\n    "]);
-
-  _templateObject6 = function _templateObject6() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject5() {
-  var data = _taggedTemplateLiteralLoose(["\n      color: rgba(\n        ", ",\n        ", ",\n        ", ",\n        0.5\n      );\n      cursor: default;\n\n      &:hover {\n        border-bottom-color: transparent !important;\n      }\n\n      &", ":hover {\n        border-left-color: transparent !important;\n      }\n    "]);
-
-  _templateObject5 = function _templateObject5() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject4() {
-  var data = _taggedTemplateLiteralLoose(["\n      border: 2px solid ", ";\n      bottom: -3px;\n      left: -20px;\n      position: absolute;\n      right: -20px;\n      top: 0;\n    "]);
-
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  var data = _taggedTemplateLiteralLoose(["\n      &:hover {\n        cursor: default;\n        border-bottom: 3px solid transparent;\n      }\n\n      &", ":hover {\n        border-left: 3px solid transparent;\n      }\n    "]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = _taggedTemplateLiteralLoose(["\n      border-bottom: none;\n      border-left: 3px solid transparent;\n      display: block;\n      margin-left: 0;\n      margin-right: 0;\n      padding-left: 17px;\n      padding-right: 20px;\n\n      ", "&:hover {\n        border-bottom: none;\n        border-left: 3px solid ", ";\n      }\n\n      ", " {\n        bottom: 0;\n        left: -3px;\n        right: 0;\n      }\n    "]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n      border-bottom: 3px solid transparent;\n      box-sizing: border-box;\n      color: inherit;\n      cursor: pointer;\n      display: inline-block;\n      font-size: 18px;\n      margin-left: 20px;\n      margin-right: 20px;\n      padding-bottom: 11px;\n      padding-top: 9px;\n      position: relative;\n      text-decoration: inherit;\n      transition: border-bottom 0.2s ease-out;\n\n      &:hover {\n        outline: inherit;\n        border-bottom: 3px solid ", ";\n      }\n\n      &:focus {\n        outline: inherit;\n      }\n    "]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-import { css, cssName, memoizeStyle } from "..\\..\\..\\lib\\theming\\Emotion";
-import * as ColorFunctions from "..\\..\\..\\lib\\styles\\ColorFunctions";
-var styles = {
+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";
+export var globalClasses = prefix('tab')({
+  focus: 'focus'
+});
+export var styles = memoizeStyle({
   root: function root(t) {
-    return css(_templateObject(), t.tabColorHover);
+    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);
   },
   vertical: function vertical(t) {
-    return css(_templateObject2(), cssName(styles.root(t)), t.tabColorHover, cssName(styles.focus(t)));
-  },
-  active: function active(t) {
-    return css(_templateObject3(), cssName(styles.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);
   },
   focus: function focus(t) {
-    return css(_templateObject4(), t.tabColorFocus);
+    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);
   },
   disabled: function disabled(t) {
-    return css(_templateObject5(), ColorFunctions.red(t.textColorDefault), ColorFunctions.green(t.textColorDefault), ColorFunctions.blue(t.textColorDefault), cssName(styles.vertical(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));
+  },
+  active: function active() {
+    return css(_templateObject5 || (_templateObject5 = _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);
+  },
+  disabled: function disabled() {
+    return css(_templateObject7 || (_templateObject7 = _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);
+  },
+  success: function success(t) {
+    return css(_templateObject9 || (_templateObject9 = _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);
+  },
+  error: function error(t) {
+    return css(_templateObject11 || (_templateObject11 = _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);
+  },
+  disabled: function disabled() {
+    return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-left-color: transparent;\n      }\n    "])));
   },
   primary: function primary(t) {
-    return css(_templateObject6(), t.tabColorHoverPrimary, cssName(styles.vertical(t)), t.tabColorHoverPrimary);
+    return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-left-color: ", ";\n      }\n    "])), t.tabColorHoverPrimary);
   },
   success: function success(t) {
-    return css(_templateObject7(), t.tabColorHoverSuccess, cssName(styles.vertical(t)), t.tabColorHoverSuccess);
+    return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-left-color: ", ";\n      }\n    "])), t.tabColorHoverSuccess);
   },
   warning: function warning(t) {
-    return css(_templateObject8(), t.tabColorHoverWarning, cssName(styles.vertical(t)), t.tabColorHoverWarning);
+    return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-left-color: ", ";\n      }\n    "])), t.tabColorHoverWarning);
   },
   error: function error(t) {
-    return css(_templateObject9(), t.tabColorHoverError, cssName(styles.vertical(t)), t.tabColorHoverError);
+    return css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-left-color: ", ";\n      }\n    "])), t.tabColorHoverError);
   }
-};
-export var jsStyles = memoizeStyle(styles);
+});

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

@@ -1 +1 @@
-{"version":3,"sources":["Tab.styles.ts"],"names":["css","cssName","memoizeStyle","ColorFunctions","styles","root","t","tabColorHover","vertical","focus","active","tabColorFocus","disabled","red","textColorDefault","green","blue","primary","tabColorHoverPrimary","success","tabColorHoverSuccess","warning","tabColorHoverWarning","error","tabColorHoverError","jsStyles"],"mappings":"g7GAAA,SAASA,GAAT,EAAcC,OAAd,EAAuBC,YAAvB,QAA2C,2BAA3C;AACA,OAAO,KAAKC,cAAZ,MAAgC,iCAAhC;;;AAGA,IAAMC,MAAM,GAAG;AACbC,EAAAA,IADa,gBACRC,CADQ,EACE;AACb,WAAON,GAAP;;;;;;;;;;;;;;;;;AAiB+BM,IAAAA,CAAC,CAACC,aAjBjC;;;;;;;AAwBD,GA1BY;;AA4BbC,EAAAA,QA5Ba,oBA4BJF,CA5BI,EA4BM;AACjB,WAAON,GAAP;;;;;;;;;AASIC,IAAAA,OAAO,CAACG,MAAM,CAACC,IAAP,CAAYC,CAAZ,CAAD,CATX;;AAW6BA,IAAAA,CAAC,CAACC,aAX/B;;;AAcIN,IAAAA,OAAO,CAACG,MAAM,CAACK,KAAP,CAAaH,CAAb,CAAD,CAdX;;;;;;AAoBD,GAjDY;;AAmDbI,EAAAA,MAnDa,kBAmDNJ,CAnDM,EAmDI;AACf,WAAON,GAAP;;;;;;AAMKC,IAAAA,OAAO,CAACG,MAAM,CAACI,QAAP,CAAgBF,CAAhB,CAAD,CANZ;;;;AAUD,GA9DY;;AAgEbG,EAAAA,KAhEa,iBAgEPH,CAhEO,EAgEG;AACd,WAAON,GAAP;AACsBM,IAAAA,CAAC,CAACK,aADxB;;;;;;;AAQD,GAzEY;;AA2EbC,EAAAA,QA3Ea,oBA2EJN,CA3EI,EA2EM;AACjB,WAAON,GAAP;;AAEMG,IAAAA,cAAc,CAACU,GAAf,CAAmBP,CAAC,CAACQ,gBAArB,CAFN;AAGMX,IAAAA,cAAc,CAACY,KAAf,CAAqBT,CAAC,CAACQ,gBAAvB,CAHN;AAIMX,IAAAA,cAAc,CAACa,IAAf,CAAoBV,CAAC,CAACQ,gBAAtB,CAJN;;;;;;;;;AAaKb,IAAAA,OAAO,CAACG,MAAM,CAACI,QAAP,CAAgBF,CAAhB,CAAD,CAbZ;;;;AAiBD,GA7FY;;AA+FbW,EAAAA,OA/Fa,mBA+FLX,CA/FK,EA+FK;AAChB,WAAON,GAAP;;AAE2BM,IAAAA,CAAC,CAACY,oBAF7B;;AAIKjB,IAAAA,OAAO,CAACG,MAAM,CAACI,QAAP,CAAgBF,CAAhB,CAAD,CAJZ;AAKyBA,IAAAA,CAAC,CAACY,oBAL3B;;;AAQD,GAxGY;;AA0GbC,EAAAA,OA1Ga,mBA0GLb,CA1GK,EA0GK;AAChB,WAAON,GAAP;;AAE2BM,IAAAA,CAAC,CAACc,oBAF7B;;AAIKnB,IAAAA,OAAO,CAACG,MAAM,CAACI,QAAP,CAAgBF,CAAhB,CAAD,CAJZ;AAKyBA,IAAAA,CAAC,CAACc,oBAL3B;;;AAQD,GAnHY;;AAqHbC,EAAAA,OArHa,mBAqHLf,CArHK,EAqHK;AAChB,WAAON,GAAP;;AAE2BM,IAAAA,CAAC,CAACgB,oBAF7B;;AAIKrB,IAAAA,OAAO,CAACG,MAAM,CAACI,QAAP,CAAgBF,CAAhB,CAAD,CAJZ;AAKyBA,IAAAA,CAAC,CAACgB,oBAL3B;;;AAQD,GA9HY;;AAgIbC,EAAAA,KAhIa,iBAgIPjB,CAhIO,EAgIG;AACd,WAAON,GAAP;;AAE2BM,IAAAA,CAAC,CAACkB,kBAF7B;;AAIKvB,IAAAA,OAAO,CAACG,MAAM,CAACI,QAAP,CAAgBF,CAAhB,CAAD,CAJZ;AAKyBA,IAAAA,CAAC,CAACkB,kBAL3B;;;AAQD,GAzIY,EAAf;;;AA4IA,OAAO,IAAMC,QAAQ,GAAGvB,YAAY,CAACE,MAAD,CAA7B","sourcesContent":["import { css, cssName, memoizeStyle } from '../../lib/theming/Emotion';\r\nimport * as ColorFunctions from '../../lib/styles/ColorFunctions';\r\nimport { Theme } from '../../lib/theming/Theme';\r\n\r\nconst styles = {\r\n  root(t: Theme) {\r\n    return css`\r\n      border-bottom: 3px solid transparent;\r\n      box-sizing: border-box;\r\n      color: inherit;\r\n      cursor: pointer;\r\n      display: inline-block;\r\n      font-size: 18px;\r\n      margin-left: 20px;\r\n      margin-right: 20px;\r\n      padding-bottom: 11px;\r\n      padding-top: 9px;\r\n      position: relative;\r\n      text-decoration: inherit;\r\n      transition: border-bottom 0.2s ease-out;\r\n\r\n      &:hover {\r\n        outline: inherit;\r\n        border-bottom: 3px solid ${t.tabColorHover};\r\n      }\r\n\r\n      &:focus {\r\n        outline: inherit;\r\n      }\r\n    `;\r\n  },\r\n\r\n  vertical(t: Theme) {\r\n    return css`\r\n      border-bottom: none;\r\n      border-left: 3px solid transparent;\r\n      display: block;\r\n      margin-left: 0;\r\n      margin-right: 0;\r\n      padding-left: 17px;\r\n      padding-right: 20px;\r\n\r\n      ${cssName(styles.root(t))}&:hover {\r\n        border-bottom: none;\r\n        border-left: 3px solid ${t.tabColorHover};\r\n      }\r\n\r\n      ${cssName(styles.focus(t))} {\r\n        bottom: 0;\r\n        left: -3px;\r\n        right: 0;\r\n      }\r\n    `;\r\n  },\r\n\r\n  active(t: Theme) {\r\n    return css`\r\n      &:hover {\r\n        cursor: default;\r\n        border-bottom: 3px solid transparent;\r\n      }\r\n\r\n      &${cssName(styles.vertical(t))}:hover {\r\n        border-left: 3px solid transparent;\r\n      }\r\n    `;\r\n  },\r\n\r\n  focus(t: Theme) {\r\n    return css`\r\n      border: 2px solid ${t.tabColorFocus};\r\n      bottom: -3px;\r\n      left: -20px;\r\n      position: absolute;\r\n      right: -20px;\r\n      top: 0;\r\n    `;\r\n  },\r\n\r\n  disabled(t: Theme) {\r\n    return css`\r\n      color: rgba(\r\n        ${ColorFunctions.red(t.textColorDefault)},\r\n        ${ColorFunctions.green(t.textColorDefault)},\r\n        ${ColorFunctions.blue(t.textColorDefault)},\r\n        0.5\r\n      );\r\n      cursor: default;\r\n\r\n      &:hover {\r\n        border-bottom-color: transparent !important;\r\n      }\r\n\r\n      &${cssName(styles.vertical(t))}:hover {\r\n        border-left-color: transparent !important;\r\n      }\r\n    `;\r\n  },\r\n\r\n  primary(t: Theme) {\r\n    return css`\r\n      &:hover {\r\n        border-bottom-color: ${t.tabColorHoverPrimary};\r\n      }\r\n      &${cssName(styles.vertical(t))}:hover {\r\n        border-left-color: ${t.tabColorHoverPrimary};\r\n      }\r\n    `;\r\n  },\r\n\r\n  success(t: Theme) {\r\n    return css`\r\n      &:hover {\r\n        border-bottom-color: ${t.tabColorHoverSuccess};\r\n      }\r\n      &${cssName(styles.vertical(t))}:hover {\r\n        border-left-color: ${t.tabColorHoverSuccess};\r\n      }\r\n    `;\r\n  },\r\n\r\n  warning(t: Theme) {\r\n    return css`\r\n      &:hover {\r\n        border-bottom-color: ${t.tabColorHoverWarning};\r\n      }\r\n      &${cssName(styles.vertical(t))}:hover {\r\n        border-left-color: ${t.tabColorHoverWarning};\r\n      }\r\n    `;\r\n  },\r\n\r\n  error(t: Theme) {\r\n    return css`\r\n      &:hover {\r\n        border-bottom-color: ${t.tabColorHoverError};\r\n      }\r\n      &${cssName(styles.vertical(t))}:hover {\r\n        border-left-color: ${t.tabColorHoverError};\r\n      }\r\n    `;\r\n  },\r\n};\r\n\r\nexport const jsStyles = memoizeStyle(styles);\r\n"]}
+{"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"]}

package/components/Tabs/Tab.styles/package.json

@@ -1,6 +1,6 @@
 {
-  "main": "..\\..\\..\\cjs\\components\\Tabs\\Tab.styles.js",
+  "main": "../../../cjs/components/Tabs/Tab.styles.js",
   "module": "Tab.styles",
-  "types": "..\\Tab.styles.d.ts",
+  "types": "../Tab.styles.d.ts",
   "sideEffects": false
 }

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

@@ -1,11 +1,27 @@
-export declare const jsStyles: {
-    root(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme> | Readonly<typeof import("../../internal/themes/FlatTheme").FlatTheme>): string;
-    vertical(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme> | Readonly<typeof import("../../internal/themes/FlatTheme").FlatTheme>): string;
-    active(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme> | Readonly<typeof import("../../internal/themes/FlatTheme").FlatTheme>): string;
-    focus(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme> | Readonly<typeof import("../../internal/themes/FlatTheme").FlatTheme>): string;
-    disabled(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme> | Readonly<typeof import("../../internal/themes/FlatTheme").FlatTheme>): string;
-    primary(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme> | Readonly<typeof import("../../internal/themes/FlatTheme").FlatTheme>): string;
-    success(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme> | Readonly<typeof import("../../internal/themes/FlatTheme").FlatTheme>): string;
-    warning(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme> | Readonly<typeof import("../../internal/themes/FlatTheme").FlatTheme>): string;
-    error(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme> | Readonly<typeof import("../../internal/themes/FlatTheme").FlatTheme>): string;
+import { Theme } from '../../lib/theming/Theme';
+export declare const globalClasses: {
+    focus: string;
+};
+export declare const styles: {
+    root(t: Theme): string;
+    vertical(t: Theme): string;
+    focus(t: Theme): string;
+    disabled(t: Theme): string;
+    active(): string;
+};
+export declare const horizontalStyles: {
+    active(t: Theme): string;
+    disabled(): string;
+    primary(t: Theme): string;
+    success(t: Theme): string;
+    warning(t: Theme): string;
+    error(t: Theme): string;
+};
+export declare const verticalStyles: {
+    active(t: Theme): string;
+    disabled(): string;
+    primary(t: Theme): string;
+    success(t: Theme): string;
+    warning(t: Theme): string;
+    error(t: Theme): string;
 };

package/components/Tabs/Tabs/Tabs.js

@@ -1,22 +1,27 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+
+var _class, _class2, _temp;
+
 import React from 'react';
-import { findDOMNode } from 'react-dom';
 import PropTypes from 'prop-types';
-import cn from 'classnames';
-import { Indicator } from "..\\Indicator";
-import { jsStyles } from "..\\Tabs.styles";
-import { TabsContext } from "..\\TabsContext";
-import { Tab } from "..\\Tab";
-/**
-                              * Tabs wrapper
-                              *
-                              * contains static property `Tab`
-                              */
-
-export var Tabs =
-/*#__PURE__*/
-function (_React$Component) {
+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 { Indicator } from "../Indicator";
+import { styles } from "../Tabs.styles";
+import { TabsContext } from "../TabsContext";
+import { Tab } from "../Tab";
+export
+/**
+* Tabs wrapper
+*
+* contains static property `Tab`
+*/
+var Tabs = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Tabs, _React$Component);
 
   function Tabs() {
@@ -49,11 +54,7 @@ function (_React$Component) {
       var newIndex = Math.max(0, Math.min(index + delta, tabs.length - 1));
       var tab = tabs[newIndex];
       var tabNode = tab.getNode();
-      var htmlNode = null;
-
-      if (tabNode instanceof React.Component) {
-        htmlNode = findDOMNode(tabNode);
-      }
+      var htmlNode = getRootNode(tabNode);
 
       if (htmlNode && htmlNode instanceof HTMLElement && typeof htmlNode.focus === 'function') {
         htmlNode.focus();
@@ -105,47 +106,49 @@ function (_React$Component) {
   var _proto = Tabs.prototype;
 
   _proto.render = function render() {
+    var _this2 = this;
+
     var _this$props2 = this.props,
         vertical = _this$props2.vertical,
         value = _this$props2.value,
         width = _this$props2.width,
         children = _this$props2.children,
         indicatorClassName = _this$props2.indicatorClassName;
-    return React.createElement("div", {
-      className: cn(jsStyles.root(), vertical && jsStyles.vertical()),
-      style: {
-        width: width
-      }
-    }, React.createElement(TabsContext.Provider, {
-      value: {
-        vertical: vertical,
-        activeTab: value,
-        getTab: this.getTab,
-        addTab: this.addTab,
-        removeTab: this.removeTab,
-        notifyUpdate: this.notifyUpdate,
-        shiftFocus: this.shiftFocus,
-        switchTab: this.switchTab
-      }
-    }, children, React.createElement(Indicator, {
-      className: indicatorClassName,
-      tabUpdates: this.tabUpdates,
-      vertical: vertical
-    })));
+    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+      _this2.theme = theme;
+      return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
+        rootNodeRef: _this2.setRootNode
+      }, _this2.props), /*#__PURE__*/React.createElement("div", {
+        className: cx(styles.root(_this2.theme), vertical && styles.vertical()),
+        style: {
+          width: width
+        }
+      }, /*#__PURE__*/React.createElement(TabsContext.Provider, {
+        value: {
+          vertical: vertical,
+          activeTab: value,
+          getTab: _this2.getTab,
+          addTab: _this2.addTab,
+          removeTab: _this2.removeTab,
+          notifyUpdate: _this2.notifyUpdate,
+          shiftFocus: _this2.shiftFocus,
+          switchTab: _this2.switchTab
+        }
+      }, children, /*#__PURE__*/React.createElement(Indicator, {
+        className: indicatorClassName,
+        tabUpdates: _this2.tabUpdates,
+        vertical: vertical
+      }))));
+    });
   };
 
   return Tabs;
-}(React.Component);
-Tabs.__KONTUR_REACT_UI__ = 'Tabs';
-Tabs.propTypes = {
+}(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]),
-  onValueChange: PropTypes.func
-};
-Tabs.defaultProps = {
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+}, _class2.defaultProps = {
   vertical: false
-};
-Tabs.Tab = Tab;
+}, _class2.Tab = Tab, _temp)) || _class;

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

@@ -1 +1 @@
-{"version":3,"sources":["Tabs.tsx"],"names":["React","findDOMNode","PropTypes","cn","Indicator","jsStyles","TabsContext","Tab","Tabs","tabs","tabUpdates","on","cb","index","listeners","push","splice","shiftFocus","fromTab","delta","findIndex","x","id","newIndex","Math","max","min","length","tab","tabNode","getNode","htmlNode","Component","HTMLElement","focus","notifyUpdate","forEach","switchTab","props","onValueChange","value","getTab","find","addTab","concat","removeTab","filter","render","vertical","width","children","indicatorClassName","root","activeTab","__KONTUR_REACT_UI__","propTypes","node","string","isRequired","bool","oneOfType","number","func","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\r\nimport { findDOMNode } from 'react-dom';\r\nimport PropTypes from 'prop-types';\r\nimport cn from 'classnames';\r\n\r\nimport { Indicator } from './Indicator';\r\nimport { jsStyles } from './Tabs.styles';\r\nimport { TabsContext } from './TabsContext';\r\nimport { Tab } from './Tab';\r\n\r\nexport interface TabsProps {\r\n  /**\r\n   * Tab component should be child of Tabs component\r\n   */\r\n  children?: React.ReactNode;\r\n\r\n  /**\r\n   * Classname of indicator\r\n   */\r\n  indicatorClassName?: string;\r\n\r\n  /**\r\n   * Tabs change event\r\n   */\r\n  onValueChange?: (value: string) => void;\r\n\r\n  /**\r\n   * Active tab identifier\r\n   */\r\n  value: string;\r\n\r\n  /**\r\n   * Vertical indicator\r\n   * @default false\r\n   */\r\n  vertical: boolean;\r\n\r\n  /**\r\n   * Width of tabs container\r\n   */\r\n  width?: number | string;\r\n}\r\n\r\n/**\r\n * Tabs wrapper\r\n *\r\n * contains static property `Tab`\r\n */\r\nexport class Tabs extends React.Component<TabsProps> {\r\n  public static __KONTUR_REACT_UI__ = 'Tabs';\r\n\r\n  public static propTypes = {\r\n    children: PropTypes.node,\r\n    indicatorClassName: PropTypes.string,\r\n    value: PropTypes.string.isRequired,\r\n    vertical: PropTypes.bool,\r\n    width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\r\n    onValueChange: PropTypes.func,\r\n  };\r\n  public static defaultProps = {\r\n    vertical: false,\r\n  };\r\n\r\n  public static Tab = Tab;\r\n\r\n  private tabs: Array<{\r\n    getNode: () => Tab | null;\r\n    id: string;\r\n  }> = [];\r\n\r\n  private tabUpdates = {\r\n    on: (cb: () => void) => {\r\n      const index = this.listeners.push(cb);\r\n      return () => {\r\n        this.listeners.splice(index, 1);\r\n      };\r\n    },\r\n  };\r\n\r\n  private listeners: Array<() => void> = [];\r\n\r\n  public render(): JSX.Element {\r\n    const { vertical, value, width, children, indicatorClassName } = this.props;\r\n\r\n    return (\r\n      <div className={cn(jsStyles.root(), vertical && jsStyles.vertical())} style={{ width }}>\r\n        <TabsContext.Provider\r\n          value={{\r\n            vertical,\r\n            activeTab: value,\r\n            getTab: this.getTab,\r\n            addTab: this.addTab,\r\n            removeTab: this.removeTab,\r\n            notifyUpdate: this.notifyUpdate,\r\n            shiftFocus: this.shiftFocus,\r\n            switchTab: this.switchTab,\r\n          }}\r\n        >\r\n          {children}\r\n          <Indicator className={indicatorClassName} tabUpdates={this.tabUpdates} vertical={vertical} />\r\n        </TabsContext.Provider>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  private shiftFocus = (fromTab: string, delta: number) => {\r\n    const { tabs } = this;\r\n    const index = tabs.findIndex(x => x.id === fromTab);\r\n    const newIndex = Math.max(0, Math.min(index + delta, tabs.length - 1));\r\n    const tab = tabs[newIndex];\r\n\r\n    const tabNode = tab.getNode();\r\n    let htmlNode = null;\r\n    if (tabNode instanceof React.Component) {\r\n      htmlNode = findDOMNode(tabNode);\r\n    }\r\n\r\n    if (htmlNode && htmlNode instanceof HTMLElement && typeof htmlNode.focus === 'function') {\r\n      htmlNode.focus();\r\n    }\r\n  };\r\n\r\n  private notifyUpdate = () => {\r\n    this.listeners.forEach(cb => cb());\r\n  };\r\n\r\n  private switchTab = (id: string) => {\r\n    const { onValueChange, value } = this.props;\r\n    if (id !== value && onValueChange) {\r\n      onValueChange(id);\r\n    }\r\n  };\r\n\r\n  private getTab = (id: string): Tab | null => {\r\n    const { getNode = null } = this.tabs.find(x => x.id === id) || {};\r\n    return getNode && getNode();\r\n  };\r\n\r\n  private addTab = (id: string, getNode: () => any) => {\r\n    this.tabs = this.tabs.concat({ id, getNode });\r\n  };\r\n\r\n  private removeTab = (id: string) => {\r\n    this.tabs = this.tabs.filter(tab => tab.id !== id);\r\n  };\r\n}\r\n"]}
+{"version":3,"sources":["Tabs.tsx"],"names":["React","PropTypes","ThemeContext","CommonWrapper","cx","getRootNode","rootNode","Indicator","styles","TabsContext","Tab","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","root","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 { 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\nexport interface TabsProps<T extends string = string> extends CommonProps {\n  /**\n   * Tab component should be child of Tabs component\n   */\n  children?: React.ReactNode;\n\n  /**\n   * Classname of indicator\n   */\n  indicatorClassName?: string;\n\n  /**\n   * Tabs change event\n   */\n  onValueChange?: (value: T) => void;\n\n  /**\n   * Active tab identifier\n   */\n  value: T;\n\n  /**\n   * Vertical indicator\n   * @default false\n   */\n  vertical: boolean;\n\n  /**\n   * Width of tabs container\n   */\n  width?: number | string;\n}\n\n/**\n * Tabs wrapper\n *\n * contains static property `Tab`\n */\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<{\n    getNode: () => Tab<T> | null;\n    id: T;\n  }> = [];\n\n  private tabUpdates = {\n    on: (cb: () => void) => {\n      const index = this.listeners.push(cb);\n      return () => {\n        this.listeners.splice(index, 1);\n      };\n    },\n  };\n\n  private listeners: Array<() => void> = [];\n  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 className={cx(styles.root(this.theme), vertical && styles.vertical())} style={{ width }}>\n                <TabsContext.Provider\n                  value={{\n                    vertical,\n                    activeTab: value,\n                    getTab: this.getTab,\n                    addTab: this.addTab,\n                    removeTab: this.removeTab,\n                    notifyUpdate: this.notifyUpdate,\n                    shiftFocus: this.shiftFocus,\n                    switchTab: this.switchTab,\n                  }}\n                >\n                  {children}\n                  <Indicator className={indicatorClassName} tabUpdates={this.tabUpdates} vertical={vertical} />\n                </TabsContext.Provider>\n              </div>\n            </CommonWrapper>\n          );\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private shiftFocus: TabsContextType<T>['shiftFocus'] = (fromTab, delta) => {\n    const { tabs } = this;\n    const index = tabs.findIndex((x) => x.id === fromTab);\n    const newIndex = Math.max(0, Math.min(index + delta, tabs.length - 1));\n    const tab = tabs[newIndex];\n\n    const tabNode = tab.getNode();\n    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"]}

package/components/Tabs/Tabs/package.json

@@ -1,6 +1,6 @@
 {
-  "main": "..\\..\\..\\cjs\\components\\Tabs\\Tabs.js",
+  "main": "../../../cjs/components/Tabs/Tabs.js",
   "module": "Tabs",
-  "types": "..\\Tabs.d.ts",
+  "types": "../Tabs.d.ts",
   "sideEffects": false
 }

package/components/Tabs/Tabs.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { CommonProps } from '../../internal/CommonWrapper';
 import { Tab } from './Tab';
-export interface TabsProps {
+export interface TabsProps<T extends string = string> extends CommonProps {
     /**
      * Tab component should be child of Tabs component
      */
@@ -13,11 +14,11 @@ export interface TabsProps {
     /**
      * Tabs change event
      */
-    onValueChange?: (value: string) => void;
+    onValueChange?: (value: T) => void;
     /**
      * Active tab identifier
      */
-    value: string;
+    value: T;
     /**
      * Vertical indicator
      * @default false
@@ -33,7 +34,7 @@ export interface TabsProps {
  *
  * contains static property `Tab`
  */
-export declare class Tabs extends React.Component<TabsProps> {
+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>;
@@ -41,15 +42,16 @@ export declare class Tabs extends React.Component<TabsProps> {
         value: PropTypes.Validator<string>;
         vertical: PropTypes.Requireable<boolean>;
         width: PropTypes.Requireable<string | number>;
-        onValueChange: PropTypes.Requireable<(...args: any[]) => any>;
     };
     static defaultProps: {
         vertical: boolean;
     };
     static Tab: typeof Tab;
+    private theme;
     private tabs;
     private tabUpdates;
     private listeners;
+    private setRootNode;
     render(): JSX.Element;
     private shiftFocus;
     private notifyUpdate;

package/components/Tabs/Tabs.md

@@ -1,28 +1,36 @@
-```jsx harmony
-const initialState = { active: 'fuji' };
-
-<Tabs value={state.active} onValueChange={v => setState({ active: v })}>
-  <Tabs.Tab id="fuji">🌋 Fuji</Tabs.Tab>
-  <Tabs.Tab id="tahat">⛰ Tahat</Tabs.Tab>
-  <Tabs.Tab id="alps">🗻 Alps</Tabs.Tab>
-</Tabs>;
-```
-
-Можно передавать свои компоненты в качестве табов, например `NavLink` из `react-router`
-
-```jsx harmony
-const initialState = { active: '/fuji' };
-
-const NavLink = props => <a {...props} />;
-const TabLink = ({ id, children }) => (
-  <Tabs.Tab id={id} component={props => <NavLink {...props} to={props.id} />}>
-    {children}
-  </Tabs.Tab>
-);
-
-<Tabs value={state.active} onValueChange={v => setState({ active: v })}>
-  <TabLink id="/fuji">🌋 Fuji</TabLink>
-  <TabLink id="/tahat">⛰ Tahat</TabLink>
-  <TabLink id="/alps">🗻 Alps</TabLink>
-</Tabs>;
-```
+```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>;
+```
+
+Можно передавать свои компоненты в качестве табов, например `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>
+);
+
+<Tabs value={active} onValueChange={setActive}>
+  <TabLink id="/fuji">🌋 Fuji</TabLink>
+  <TabLink id="/tahat">⛰ Tahat</TabLink>
+  <TabLink id="/alps">🗻 Alps</TabLink>
+</Tabs>;
+```