@teambit/panels 0.0.0-3e7b7de2eb6ceb522eaf9b0c7b17dfb3249fe3a0

package/dist/esm.mjs

@@ -0,0 +1,11 @@
+// eslint-disable-next-line import/no-unresolved
+import cjsModule from './index.js';
+
+export const PanelUiAspect = cjsModule.PanelUiAspect;
+export const TabContainer = cjsModule.TabContainer;
+export const Tab = cjsModule.Tab;
+export const TabList = cjsModule.TabList;
+export const TabPanel = cjsModule.TabPanel;
+
+export default cjsModule;
+

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export type { PanelUIMain } from './panel-ui.main.runtime';
+export { PanelUiAspect } from './panel-ui.aspect';
+export { TabContainer, Tab, TabList, TabPanel } from './ui/tabs';

package/dist/index.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "PanelUiAspect", {
+  enumerable: true,
+  get: function () {
+    return _panelUi().PanelUiAspect;
+  }
+});
+Object.defineProperty(exports, "Tab", {
+  enumerable: true,
+  get: function () {
+    return _tabs().Tab;
+  }
+});
+Object.defineProperty(exports, "TabContainer", {
+  enumerable: true,
+  get: function () {
+    return _tabs().TabContainer;
+  }
+});
+Object.defineProperty(exports, "TabList", {
+  enumerable: true,
+  get: function () {
+    return _tabs().TabList;
+  }
+});
+Object.defineProperty(exports, "TabPanel", {
+  enumerable: true,
+  get: function () {
+    return _tabs().TabPanel;
+  }
+});
+function _panelUi() {
+  const data = require("./panel-ui.aspect");
+  _panelUi = function () {
+    return data;
+  };
+  return data;
+}
+function _tabs() {
+  const data = require("./ui/tabs");
+  _tabs = function () {
+    return data;
+  };
+  return data;
+}
+
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_panelUi","data","require","_tabs"],"sources":["index.ts"],"sourcesContent":["export type { PanelUIMain } from './panel-ui.main.runtime';\nexport { PanelUiAspect } from './panel-ui.aspect';\nexport { TabContainer, Tab, TabList, TabPanel } from './ui/tabs';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,SAAAA,SAAA;EAAA,MAAAC,IAAA,GAAAC,OAAA;EAAAF,QAAA,YAAAA,CAAA;IAAA,OAAAC,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAE,MAAA;EAAA,MAAAF,IAAA,GAAAC,OAAA;EAAAC,KAAA,YAAAA,CAAA;IAAA,OAAAF,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA","ignoreList":[]}

package/dist/panel-ui.aspect.d.ts

@@ -0,0 +1,2 @@
+import { Aspect } from '@teambit/harmony';
+export declare const PanelUiAspect: Aspect;

package/dist/panel-ui.aspect.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PanelUiAspect = void 0;
+function _harmony() {
+  const data = require("@teambit/harmony");
+  _harmony = function () {
+    return data;
+  };
+  return data;
+}
+const PanelUiAspect = exports.PanelUiAspect = _harmony().Aspect.create({
+  id: 'teambit.ui-foundation/panels',
+  dependencies: [],
+  defaultConfig: {}
+});
+
+//# sourceMappingURL=panel-ui.aspect.js.map

package/dist/panel-ui.aspect.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_harmony","data","require","PanelUiAspect","exports","Aspect","create","id","dependencies","defaultConfig"],"sources":["panel-ui.aspect.ts"],"sourcesContent":["import { Aspect } from '@teambit/harmony';\n\nexport const PanelUiAspect = Aspect.create({\n  id: 'teambit.ui-foundation/panels',\n  dependencies: [],\n  defaultConfig: {},\n});\n"],"mappings":";;;;;;AAAA,SAAAA,SAAA;EAAA,MAAAC,IAAA,GAAAC,OAAA;EAAAF,QAAA,YAAAA,CAAA;IAAA,OAAAC,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAEO,MAAME,aAAa,GAAAC,OAAA,CAAAD,aAAA,GAAGE,iBAAM,CAACC,MAAM,CAAC;EACzCC,EAAE,EAAE,8BAA8B;EAClCC,YAAY,EAAE,EAAE;EAChBC,aAAa,EAAE,CAAC;AAClB,CAAC,CAAC","ignoreList":[]}

package/dist/panel-ui.main.runtime.d.ts

@@ -0,0 +1,5 @@
+export declare class PanelUIMain {
+    static runtime: import("@teambit/harmony").RuntimeDefinition;
+    static dependencies: never[];
+    static provider(): Promise<PanelUIMain>;
+}

package/dist/panel-ui.main.runtime.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PanelUIMain = void 0;
+function _cli() {
+  const data = require("@teambit/cli");
+  _cli = function () {
+    return data;
+  };
+  return data;
+}
+function _panelUi() {
+  const data = require("./panel-ui.aspect");
+  _panelUi = function () {
+    return data;
+  };
+  return data;
+}
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+class PanelUIMain {
+  static async provider() {
+    return new PanelUIMain();
+  }
+}
+exports.PanelUIMain = PanelUIMain;
+_defineProperty(PanelUIMain, "runtime", _cli().MainRuntime);
+_defineProperty(PanelUIMain, "dependencies", []);
+_panelUi().PanelUiAspect.addRuntime(PanelUIMain);
+
+//# sourceMappingURL=panel-ui.main.runtime.js.map

package/dist/panel-ui.main.runtime.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_cli","data","require","_panelUi","_defineProperty","e","r","t","_toPropertyKey","Object","defineProperty","value","enumerable","configurable","writable","i","_toPrimitive","Symbol","toPrimitive","call","TypeError","String","Number","PanelUIMain","provider","exports","MainRuntime","PanelUiAspect","addRuntime"],"sources":["panel-ui.main.runtime.ts"],"sourcesContent":["import { MainRuntime } from '@teambit/cli';\n\nimport { PanelUiAspect } from './panel-ui.aspect';\n\nexport class PanelUIMain {\n  static runtime = MainRuntime;\n  static dependencies = [];\n\n  static async provider() {\n    return new PanelUIMain();\n  }\n}\n\nPanelUiAspect.addRuntime(PanelUIMain);\n"],"mappings":";;;;;;AAAA,SAAAA,KAAA;EAAA,MAAAC,IAAA,GAAAC,OAAA;EAAAF,IAAA,YAAAA,CAAA;IAAA,OAAAC,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAEA,SAAAE,SAAA;EAAA,MAAAF,IAAA,GAAAC,OAAA;EAAAC,QAAA,YAAAA,CAAA;IAAA,OAAAF,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAAkD,SAAAG,gBAAAC,CAAA,EAAAC,CAAA,EAAAC,CAAA,YAAAD,CAAA,GAAAE,cAAA,CAAAF,CAAA,MAAAD,CAAA,GAAAI,MAAA,CAAAC,cAAA,CAAAL,CAAA,EAAAC,CAAA,IAAAK,KAAA,EAAAJ,CAAA,EAAAK,UAAA,MAAAC,YAAA,MAAAC,QAAA,UAAAT,CAAA,CAAAC,CAAA,IAAAC,CAAA,EAAAF,CAAA;AAAA,SAAAG,eAAAD,CAAA,QAAAQ,CAAA,GAAAC,YAAA,CAAAT,CAAA,uCAAAQ,CAAA,GAAAA,CAAA,GAAAA,CAAA;AAAA,SAAAC,aAAAT,CAAA,EAAAD,CAAA,2BAAAC,CAAA,KAAAA,CAAA,SAAAA,CAAA,MAAAF,CAAA,GAAAE,CAAA,CAAAU,MAAA,CAAAC,WAAA,kBAAAb,CAAA,QAAAU,CAAA,GAAAV,CAAA,CAAAc,IAAA,CAAAZ,CAAA,EAAAD,CAAA,uCAAAS,CAAA,SAAAA,CAAA,YAAAK,SAAA,yEAAAd,CAAA,GAAAe,MAAA,GAAAC,MAAA,EAAAf,CAAA;AAE3C,MAAMgB,WAAW,CAAC;EAIvB,aAAaC,QAAQA,CAAA,EAAG;IACtB,OAAO,IAAID,WAAW,CAAC,CAAC;EAC1B;AACF;AAACE,OAAA,CAAAF,WAAA,GAAAA,WAAA;AAAAnB,eAAA,CAPYmB,WAAW,aACLG,kBAAW;AAAAtB,eAAA,CADjBmB,WAAW,kBAEA,EAAE;AAO1BI,wBAAa,CAACC,UAAU,CAACL,WAAW,CAAC","ignoreList":[]}

package/dist/preview-1752480321186.js

@@ -0,0 +1,7 @@
+;
+;
+
+export const compositions = [];
+export const overview = [];
+
+export const compositions_metadata = {"compositions":[]};

package/dist/ui/tabs.d.ts

@@ -0,0 +1,14 @@
+import { TabListProps as BaseTabListProps, TabPanel as TabPanelBase, TabProps as BaseTabProps, Tabs } from 'react-tabs';
+export type TabContainerProps = Tabs;
+export declare const TabContainer: typeof Tabs;
+export type TabProps = BaseTabProps;
+export type TabListProps = BaseTabListProps;
+export declare function TabList(props: TabListProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace TabList {
+    var tabsRole: string;
+}
+export declare const TabPanel: typeof TabPanelBase;
+export declare function Tab(props: BaseTabProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Tab {
+    var tabsRole: string;
+}

package/dist/ui/tabs.js

@@ -0,0 +1,67 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Tab = Tab;
+exports.TabContainer = void 0;
+exports.TabList = TabList;
+exports.TabPanel = void 0;
+function _classnames() {
+  const data = _interopRequireDefault(require("classnames"));
+  _classnames = function () {
+    return data;
+  };
+  return data;
+}
+function _react() {
+  const data = _interopRequireDefault(require("react"));
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+function _reactTabs() {
+  const data = require("react-tabs");
+  _reactTabs = function () {
+    return data;
+  };
+  return data;
+}
+function _tabsModule() {
+  const data = _interopRequireDefault(require("./tabs.module.scss"));
+  _tabsModule = function () {
+    return data;
+  };
+  return data;
+}
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const TabContainer = exports.TabContainer = _reactTabs().Tabs;
+// TabContainer.tabsRole = TabPanel
+
+function TabList(props) {
+  return (
+    /*#__PURE__*/
+    // @ts-ignore @TODO "Types of property 'ref' are incompatible"
+    _react().default.createElement(_reactTabs().TabList, _extends({}, props, {
+      className: (0, _classnames().default)(_tabsModule().default.tabContainer, props.className)
+    }))
+  );
+}
+TabList.tabsRole = 'TabList';
+const TabPanel = exports.TabPanel = _reactTabs().TabPanel;
+function Tab(props) {
+  return (
+    /*#__PURE__*/
+    // @ts-ignore @TODO "Types of property 'ref' are incompatible"
+    _react().default.createElement(_reactTabs().Tab, _extends({}, props, {
+      className: (0, _classnames().default)(props.className, _tabsModule().default.tab),
+      selectedClassName: _tabsModule().default.active,
+      disabledClassName: _tabsModule().default.disabled
+    }))
+  );
+}
+Tab.tabsRole = 'Tab';
+
+//# sourceMappingURL=tabs.js.map

package/dist/ui/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_classnames","data","_interopRequireDefault","require","_react","_reactTabs","_tabsModule","e","__esModule","default","_extends","Object","assign","bind","n","arguments","length","t","r","hasOwnProperty","call","apply","TabContainer","exports","Tabs","TabList","props","createElement","className","classNames","styles","tabContainer","tabsRole","TabPanel","TabPanelBase","Tab","tab","selectedClassName","active","disabledClassName","disabled"],"sources":["tabs.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport React from 'react';\nimport {\n  Tab as BaseTab,\n  TabList as BaseTabList,\n  TabListProps as BaseTabListProps,\n  TabPanel as TabPanelBase,\n  TabProps as BaseTabProps,\n  Tabs,\n} from 'react-tabs';\n\nimport styles from './tabs.module.scss';\n\nexport type TabContainerProps = Tabs;\nexport const TabContainer = Tabs;\n// TabContainer.tabsRole = TabPanel\n\nexport type TabProps = BaseTabProps;\n\nexport type TabListProps = BaseTabListProps;\nexport function TabList(props: TabListProps) {\n  return (\n    // @ts-ignore @TODO \"Types of property 'ref' are incompatible\"\n    <BaseTabList {...props} className={classNames(styles.tabContainer, props.className)} />\n  );\n}\nTabList.tabsRole = 'TabList';\n\nexport const TabPanel = TabPanelBase;\nexport function Tab(props: BaseTabProps) {\n  return (\n    // @ts-ignore @TODO \"Types of property 'ref' are incompatible\"\n    <BaseTab\n      {...props}\n      className={classNames(props.className, styles.tab)}\n      selectedClassName={styles.active}\n      disabledClassName={styles.disabled}\n    />\n  );\n}\nTab.tabsRole = 'Tab';\n"],"mappings":";;;;;;;;;AAAA,SAAAA,YAAA;EAAA,MAAAC,IAAA,GAAAC,sBAAA,CAAAC,OAAA;EAAAH,WAAA,YAAAA,CAAA;IAAA,OAAAC,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAG,OAAA;EAAA,MAAAH,IAAA,GAAAC,sBAAA,CAAAC,OAAA;EAAAC,MAAA,YAAAA,CAAA;IAAA,OAAAH,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAI,WAAA;EAAA,MAAAJ,IAAA,GAAAE,OAAA;EAAAE,UAAA,YAAAA,CAAA;IAAA,OAAAJ,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AASA,SAAAK,YAAA;EAAA,MAAAL,IAAA,GAAAC,sBAAA,CAAAC,OAAA;EAAAG,WAAA,YAAAA,CAAA;IAAA,OAAAL,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAAwC,SAAAC,uBAAAK,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAG,SAAA,WAAAA,QAAA,GAAAC,MAAA,CAAAC,MAAA,GAAAD,MAAA,CAAAC,MAAA,CAAAC,IAAA,eAAAC,CAAA,aAAAP,CAAA,MAAAA,CAAA,GAAAQ,SAAA,CAAAC,MAAA,EAAAT,CAAA,UAAAU,CAAA,GAAAF,SAAA,CAAAR,CAAA,YAAAW,CAAA,IAAAD,CAAA,OAAAE,cAAA,CAAAC,IAAA,CAAAH,CAAA,EAAAC,CAAA,MAAAJ,CAAA,CAAAI,CAAA,IAAAD,CAAA,CAAAC,CAAA,aAAAJ,CAAA,KAAAJ,QAAA,CAAAW,KAAA,OAAAN,SAAA;AAGjC,MAAMO,YAAY,GAAAC,OAAA,CAAAD,YAAA,GAAGE,iBAAI;AAChC;;AAKO,SAASC,OAAOA,CAACC,KAAmB,EAAE;EAC3C;IAAA;IACE;IACAtB,MAAA,GAAAK,OAAA,CAAAkB,aAAA,CAACtB,UAAA,GAAAoB,OAAW,EAAAf,QAAA,KAAKgB,KAAK;MAAEE,SAAS,EAAE,IAAAC,qBAAU,EAACC,qBAAM,CAACC,YAAY,EAAEL,KAAK,CAACE,SAAS;IAAE,EAAE;EAAC;AAE3F;AACAH,OAAO,CAACO,QAAQ,GAAG,SAAS;AAErB,MAAMC,QAAQ,GAAAV,OAAA,CAAAU,QAAA,GAAGC,qBAAY;AAC7B,SAASC,GAAGA,CAACT,KAAmB,EAAE;EACvC;IAAA;IACE;IACAtB,MAAA,GAAAK,OAAA,CAAAkB,aAAA,CAACtB,UAAA,GAAA8B,GAAO,EAAAzB,QAAA,KACFgB,KAAK;MACTE,SAAS,EAAE,IAAAC,qBAAU,EAACH,KAAK,CAACE,SAAS,EAAEE,qBAAM,CAACM,GAAG,CAAE;MACnDC,iBAAiB,EAAEP,qBAAM,CAACQ,MAAO;MACjCC,iBAAiB,EAAET,qBAAM,CAACU;IAAS,EACpC;EAAC;AAEN;AACAL,GAAG,CAACH,QAAQ,GAAG,KAAK","ignoreList":[]}

package/dist/ui/tabs.module.scss

@@ -0,0 +1,41 @@
+.tabContainer {
+  display: flex;
+}
+
+.tab {
+  cursor: pointer;
+  position: relative;
+  padding: 8px;
+  text-transform: uppercase;
+  font-size: 12px;
+  font-weight: bold;
+  outline: none;
+
+  color: var(--on-background-color, #878c9a); //TODO
+  transition: color 300ms ease-in-out;
+  &:hover {
+    color: var(--primary-color);
+  }
+
+  &.disabled {
+    color: var(--bit-text-color-light, #6c707c);
+  }
+
+  &.active {
+    &:before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+
+      background-color: var(--bit-accent-color, #6c5ce7);
+      height: 3px;
+      border-radius: 2px;
+
+      transition:
+        background-color 300ms,
+        height 300ms;
+    }
+  }
+}

package/esm.mjs

@@ -0,0 +1,11 @@
+// eslint-disable-next-line import/no-unresolved
+import cjsModule from './index.js';
+
+export const PanelUiAspect = cjsModule.PanelUiAspect;
+export const TabContainer = cjsModule.TabContainer;
+export const Tab = cjsModule.Tab;
+export const TabList = cjsModule.TabList;
+export const TabPanel = cjsModule.TabPanel;
+
+export default cjsModule;
+

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@teambit/panels",
+  "version": "0.0.0-3e7b7de2eb6ceb522eaf9b0c7b17dfb3249fe3a0",
+  "homepage": "https://bit.cloud/teambit/ui-foundation/panels",
+  "main": "dist/index.js",
+  "componentId": {
+    "scope": "teambit.ui-foundation",
+    "name": "panels",
+    "version": "3e7b7de2eb6ceb522eaf9b0c7b17dfb3249fe3a0"
+  },
+  "dependencies": {
+    "classnames": "2.2.6",
+    "react-tabs": "3.2.0",
+    "@teambit/harmony": "0.4.7",
+    "@teambit/cli": "0.0.0-3dabbcb2983030940896e7d011077946ed7206c9"
+  },
+  "devDependencies": {
+    "@types/classnames": "2.2.11",
+    "@types/react-tabs": "2.3.2",
+    "@types/mocha": "9.1.0",
+    "@teambit/harmony.envs.core-aspect-env": "0.0.69"
+  },
+  "peerDependencies": {
+    "react": "^17.0.0 || ^18.0.0",
+    "@types/react": "^17.0.73"
+  },
+  "license": "Apache-2.0",
+  "optionalDependencies": {},
+  "peerDependenciesMeta": {},
+  "exports": {
+    ".": {
+      "node": {
+        "require": "./dist/index.js",
+        "import": "./dist/esm.mjs"
+      },
+      "default": "./dist/index.js"
+    },
+    "./dist/*": "./dist/*",
+    "./artifacts/*": "./artifacts/*",
+    "./*": "./*.ts"
+  },
+  "private": false,
+  "engines": {
+    "node": ">=16.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/teambit/bit"
+  },
+  "keywords": [
+    "bit",
+    "bit-aspect",
+    "bit-core-aspect",
+    "components",
+    "collaboration",
+    "web"
+  ]
+}

package/types/asset.d.ts

@@ -0,0 +1,41 @@
+declare module '*.png' {
+  const value: any;
+  export = value;
+}
+declare module '*.svg' {
+  import type { FunctionComponent, SVGProps } from 'react';
+
+  export const ReactComponent: FunctionComponent<
+    SVGProps<SVGSVGElement> & { title?: string }
+  >;
+  const src: string;
+  export default src;
+}
+declare module '*.jpg' {
+  const value: any;
+  export = value;
+}
+declare module '*.jpeg' {
+  const value: any;
+  export = value;
+}
+declare module '*.gif' {
+  const value: any;
+  export = value;
+}
+declare module '*.bmp' {
+  const value: any;
+  export = value;
+}
+declare module '*.otf' {
+  const value: any;
+  export = value;
+}
+declare module '*.woff' {
+  const value: any;
+  export = value;
+}
+declare module '*.woff2' {
+  const value: any;
+  export = value;
+}

package/types/style.d.ts

@@ -0,0 +1,42 @@
+declare module '*.module.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+declare module '*.module.scss' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+declare module '*.module.sass' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.module.less' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.less' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.sass' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.scss' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.mdx' {
+  const component: any;
+  export default component;
+}

package/ui/tabs.module.scss

@@ -0,0 +1,41 @@
+.tabContainer {
+  display: flex;
+}
+
+.tab {
+  cursor: pointer;
+  position: relative;
+  padding: 8px;
+  text-transform: uppercase;
+  font-size: 12px;
+  font-weight: bold;
+  outline: none;
+
+  color: var(--on-background-color, #878c9a); //TODO
+  transition: color 300ms ease-in-out;
+  &:hover {
+    color: var(--primary-color);
+  }
+
+  &.disabled {
+    color: var(--bit-text-color-light, #6c707c);
+  }
+
+  &.active {
+    &:before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+
+      background-color: var(--bit-accent-color, #6c5ce7);
+      height: 3px;
+      border-radius: 2px;
+
+      transition:
+        background-color 300ms,
+        height 300ms;
+    }
+  }
+}

package/ui/tabs.tsx

@@ -0,0 +1,41 @@
+import classNames from 'classnames';
+import React from 'react';
+import {
+  Tab as BaseTab,
+  TabList as BaseTabList,
+  TabListProps as BaseTabListProps,
+  TabPanel as TabPanelBase,
+  TabProps as BaseTabProps,
+  Tabs,
+} from 'react-tabs';
+
+import styles from './tabs.module.scss';
+
+export type TabContainerProps = Tabs;
+export const TabContainer = Tabs;
+// TabContainer.tabsRole = TabPanel
+
+export type TabProps = BaseTabProps;
+
+export type TabListProps = BaseTabListProps;
+export function TabList(props: TabListProps) {
+  return (
+    // @ts-ignore @TODO "Types of property 'ref' are incompatible"
+    <BaseTabList {...props} className={classNames(styles.tabContainer, props.className)} />
+  );
+}
+TabList.tabsRole = 'TabList';
+
+export const TabPanel = TabPanelBase;
+export function Tab(props: BaseTabProps) {
+  return (
+    // @ts-ignore @TODO "Types of property 'ref' are incompatible"
+    <BaseTab
+      {...props}
+      className={classNames(props.className, styles.tab)}
+      selectedClassName={styles.active}
+      disabledClassName={styles.disabled}
+    />
+  );
+}
+Tab.tabsRole = 'Tab';