@semcore/tab-panel 3.0.8 → 3.1.0

package/CHANGELOG.md

@@ -2,53 +2,29 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
-## [3.0.8] - 2022-09-07
-
-### Fixed
-
-- Enforced inner text font line height to prevent possible bottom cut.
-
-## [3.0.7] - 2022-08-30
-
-### Changed
-
-- Version patch update due to children dependencies update (`@semcore/utils` [3.37.0 ~> 3.37.1], `@semcore/flex-box` [4.5.10 ~> 4.5.11]).
-
-## [3.0.6] - 2022-08-18
-
-### Changed
-
-- Version patch update due to children dependencies update (`@semcore/utils` [3.36.0 ~> 3.37.0], `@semcore/flex-box` [4.5.9 ~> 4.5.10]).
-
-## [3.0.5] - 2022-08-11
+## [3.1.0] - 2022-10-10
 
 ### Changed
 
-- Version patch update due to children dependencies update (`@semcore/utils` [3.35.1 ~> 3.36.0], `@semcore/flex-box` [4.5.8 ~> 4.5.9]).
+- Added support for React 18 🔥
 
-## [3.0.4] - 2022-07-22
-
-### Changed
+## [3.0.9] - 2022-09-30
 
-- Version patch update due to children dependencies update (`@semcore/utils` [3.34.0 ~> 3.35.0], `@semcore/flex-box` [4.5.6 ~> 4.5.7]).
-
-## [3.0.3] - 2022-06-02
-
-### Changed
+### Added
 
-- Version patch update due to children dependencies update (`@semcore/utils` [3.32.2 ~> 3.33.0], `@semcore/flex-box` [4.5.4 ~> 4.5.5]).
+- Added styles for panel consisting only of an icon.
 
-## [3.0.2] - 2022-05-31
+## [3.0.8] - 2022-09-07
 
-### Changed
+### Fixed
 
-- Version patch update due to children dependencies update (`@semcore/utils` [3.32.1 ~> 3.32.2], `@semcore/flex-box` [4.5.3 ~> 4.5.4]).
+- Enforced inner text font line height to prevent possible bottom cut.
 
-## [3.0.1] - 2022-05-19
+## [3.0.7] - 2022-08-30
 
 ### Changed
 
-- Version patch update due to children dependencies update (`@semcore/utils` [3.32.0 ~> 3.32.1], `@semcore/flex-box` [4.5.1 ~> 4.5.3]).
+- Version patch update due to children dependencies update (`@semcore/utils` [3.37.0 ~> 3.37.1], `@semcore/flex-box` [4.5.10 ~> 4.5.11]).
 
 ## [3.0.0] - 2022-05-17
 

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright ©, 2022, Semrush Inc. (written by Roman Lysov, Sergey Kobets, Mikhail Karachev, Julia Mnizhek, Elena Krasnopolskaia, Mikhail Sereniti).
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/lib/cjs/TabPanel.js

@@ -52,18 +52,18 @@ var style = (
 /*__reshadow_css_start__*/
 _core.sstyled.insert(
 /*__inner_css_start__*/
-".___STabPanel_1ew8z_gg_{display:flex;width:100%;max-width:100%;border-bottom:1px solid #c4c7cf}.___STabPanelItem_1ew8z_gg_{position:relative;bottom:-1px;display:inline-flex;min-width:0;height:32px;color:#6c6e79;border:1px solid transparent;border-radius:6px 6px 0 0;background:transparent;align-items:center;justify-content:center;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;box-sizing:border-box;padding:0;margin:0;box-shadow:none;outline:none;text-decoration:none;-webkit-tap-highlight-color:transparent;outline:0;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer}.___STabPanelItem_1ew8z_gg_ .___SText_1ew8z_gg_{font-size:14px;line-height:1.42}.___STabPanelItem_1ew8z_gg_::-moz-focus-inner{border:none;padding:0}.___STabPanelItem_1ew8z_gg_:active,.___STabPanelItem_1ew8z_gg_:focus,.___STabPanelItem_1ew8z_gg_:hover{outline:0;text-decoration:none}.___STabPanelItem_1ew8z_gg_:hover{color:#191b23}.___STabPanelItem_1ew8z_gg_.__disabled_1ew8z_gg_{opacity:0.3;cursor:default;pointer-events:none}.___STabPanelItem_1ew8z_gg_.__keyboardFocused_1ew8z_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___STabPanelItem_1ew8z_gg_.__selected_1ew8z_gg_{color:#006dca;border-color:#c4c7cf;border-bottom-color:#ffffff;flex-shrink:0}.___STabPanelItem_1ew8z_gg_.__selected_1ew8z_gg_:hover{color:#006dca}.___SText_1ew8z_gg_{display:inline-block;margin:auto 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SAddon_1ew8z_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_1ew8z_gg_:not(:only-child):first-child{margin-left:8px}.___SAddon_1ew8z_gg_:not(:only-child):last-child{margin-right:8px}"
+":root {\n\n  /* DEPRECATED START\n     Deprecated variables should never be used in\n     components styles but preserved for backward\n     compatibility if they used in projects\n     like `<Badge bg=\"red\">alpha</Badge>`\n  */\n  /* DEPRECATED END */\n}\n\n.___STabPanel_1lff2_gg_ {\n  display: flex;\n  width: 100%;\n  max-width: 100%;\n  border-bottom: 1px solid #c4c7cf;\n}\n\n.___STabPanelItem_1lff2_gg_ {\n  position: relative;\n  bottom: -1px;\n  display: inline-flex;\n  min-width: 0;\n  height: 32px;\n  color: #6c6e79;\n  border: 1px solid transparent;\n  border-radius: 6px 6px 0 0;\n  background: transparent;\n  align-items: center;\n  justify-content: center;\n  touch-action: manipulation;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  box-shadow: none;\n  outline: none;\n  text-decoration: none;\n  -webkit-tap-highlight-color: transparent;\n  outline: 0;\n  text-align: center;\n  vertical-align: middle;\n  font-family: inherit;\n  cursor: pointer\n}\n\n.___STabPanelItem_1lff2_gg_ .___SText_1lff2_gg_ {\n    font-size: 14px;\n    line-height: 1.42;\n  }\n\n.___STabPanelItem_1lff2_gg_::-moz-focus-inner {\n    border: none;\n    padding: 0;\n  }\n\n.___STabPanelItem_1lff2_gg_:active,\n  .___STabPanelItem_1lff2_gg_:hover,\n  .___STabPanelItem_1lff2_gg_:focus {\n    outline: 0;\n    text-decoration: none;\n  }\n\n.___STabPanelItem_1lff2_gg_:hover {\n    color: #191b23;\n  }\n\n.___STabPanelItem_1lff2_gg_.__disabled_1lff2_gg_ {\n  opacity: 0.3;\n  cursor: default;\n  pointer-events: none; /* Disable link interactions */\n}\n\n.___STabPanelItem_1lff2_gg_.__keyboardFocused_1lff2_gg_ {\n  box-shadow: 0 0 0 3px rgba(0, 143, 248, 0.2);\n}\n\n.___STabPanelItem_1lff2_gg_.__selected_1lff2_gg_ {\n  color: #006dca;\n  border-color: #c4c7cf;\n  border-bottom-color: #ffffff;\n  flex-shrink: 0\n}\n\n.___STabPanelItem_1lff2_gg_.__selected_1lff2_gg_:hover {\n    color: #006dca;\n  }\n\n.___SText_1lff2_gg_ {\n  display: inline-block;\n  margin: auto 8px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.___SAddon_1lff2_gg_ {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.___SAddon_1lff2_gg_:not(:only-child):first-child {\n  margin-left: 8px;\n}\n\n.___SAddon_1lff2_gg_:not(:only-child):last-child {\n  margin-right: 8px;\n}\n\n.___SAddon_1lff2_gg_:only-child {\n  margin-right: 8px;\n  margin-left: 8px;\n}\n"
 /*__inner_css_end__*/
-, "1ew8z_gg_")
+, "1lff2_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__STabPanel": "___STabPanel_1ew8z_gg_",
-  "__STabPanelItem": "___STabPanelItem_1ew8z_gg_",
-  "__SText": "___SText_1ew8z_gg_",
-  "_disabled": "__disabled_1ew8z_gg_",
-  "_keyboardFocused": "__keyboardFocused_1ew8z_gg_",
-  "_selected": "__selected_1ew8z_gg_",
-  "__SAddon": "___SAddon_1ew8z_gg_"
+  "__STabPanel": "___STabPanel_1lff2_gg_",
+  "__STabPanelItem": "___STabPanelItem_1lff2_gg_",
+  "__SText": "___SText_1lff2_gg_",
+  "_disabled": "__disabled_1lff2_gg_",
+  "_keyboardFocused": "__keyboardFocused_1lff2_gg_",
+  "_selected": "__selected_1lff2_gg_",
+  "__SAddon": "___SAddon_1lff2_gg_"
 });
 var optionsA11yEnhance = {
   onNeighborChange: function onNeighborChange(neighborElement) {

package/lib/cjs/index.d.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=index.d.js.map

package/lib/cjs/index.d.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import React from 'react';\nimport { CProps, PropGetterFn, ReturnEl } from '@semcore/core';\nimport { Box, IBoxProps } from '@semcore/flex-box';\nimport { IKeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\n\nexport type TabPanelValue = string | number | boolean;\n\nexport interface ITabPanelProps<T extends TabPanelValue = TabPanelValue> extends IBoxProps {\n  /** Is invoked when changing the selection */\n  onChange?: (value: T, e?: React.SyntheticEvent<HTMLButtonElement>) => void;\n  /** Value of the selected tab */\n  value?: T;\n  /** Default value of the selected tab\n   * @default null\n   * */\n  defaultValue?: T;\n}\n\nexport interface ITabPanelItemProps extends IBoxProps, IKeyboardFocusProps {\n  /** Makes a tab selected. This property is determined automatically depending on the value. */\n  selected?: boolean;\n  /** Disabled state */\n  disabled?: boolean;\n  /** Tab value */\n  value?: TabPanelValue;\n  /** Left addon tag  */\n  addonLeft?: React.ElementType;\n  /** Right addon tag  */\n  addonRight?: React.ElementType;\n}\n\nexport interface ITabPanelContext {\n  getItemProps: PropGetterFn;\n}\n\nexport interface ITabPanelHandlers {\n  value: (value: TabPanelValue) => void;\n}\n\ndeclare const TabPanel: (<T, V extends TabPanelValue = TabPanelValue>(\n  props: CProps<ITabPanelProps<V> & T, ITabPanelContext, ITabPanelHandlers>,\n) => ReturnEl) & {\n  Item: (<T>(props: CProps<ITabPanelItemProps & T, {}, ITabPanelHandlers>) => ReturnEl) & {\n    Text: typeof Box;\n    Addon: typeof Box;\n  };\n};\n\nexport default TabPanel;\n"],"mappings":""}

package/lib/cjs/style/tab-panel.shadow.css

@@ -98,3 +98,8 @@ SAddon:not(:only-child):first-child {
 SAddon:not(:only-child):last-child {
   margin-right: 8px;
 }
+
+SAddon:only-child {
+  margin-right: 8px;
+  margin-left: 8px;
+}

package/lib/es6/TabPanel.js

@@ -31,18 +31,18 @@ var style = (
 /*__reshadow_css_start__*/
 _sstyled.insert(
 /*__inner_css_start__*/
-".___STabPanel_1ew8z_gg_{display:flex;width:100%;max-width:100%;border-bottom:1px solid #c4c7cf}.___STabPanelItem_1ew8z_gg_{position:relative;bottom:-1px;display:inline-flex;min-width:0;height:32px;color:#6c6e79;border:1px solid transparent;border-radius:6px 6px 0 0;background:transparent;align-items:center;justify-content:center;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;box-sizing:border-box;padding:0;margin:0;box-shadow:none;outline:none;text-decoration:none;-webkit-tap-highlight-color:transparent;outline:0;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer}.___STabPanelItem_1ew8z_gg_ .___SText_1ew8z_gg_{font-size:14px;line-height:1.42}.___STabPanelItem_1ew8z_gg_::-moz-focus-inner{border:none;padding:0}.___STabPanelItem_1ew8z_gg_:active,.___STabPanelItem_1ew8z_gg_:focus,.___STabPanelItem_1ew8z_gg_:hover{outline:0;text-decoration:none}.___STabPanelItem_1ew8z_gg_:hover{color:#191b23}.___STabPanelItem_1ew8z_gg_.__disabled_1ew8z_gg_{opacity:0.3;cursor:default;pointer-events:none}.___STabPanelItem_1ew8z_gg_.__keyboardFocused_1ew8z_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___STabPanelItem_1ew8z_gg_.__selected_1ew8z_gg_{color:#006dca;border-color:#c4c7cf;border-bottom-color:#ffffff;flex-shrink:0}.___STabPanelItem_1ew8z_gg_.__selected_1ew8z_gg_:hover{color:#006dca}.___SText_1ew8z_gg_{display:inline-block;margin:auto 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SAddon_1ew8z_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_1ew8z_gg_:not(:only-child):first-child{margin-left:8px}.___SAddon_1ew8z_gg_:not(:only-child):last-child{margin-right:8px}"
+":root {\n\n  /* DEPRECATED START\n     Deprecated variables should never be used in\n     components styles but preserved for backward\n     compatibility if they used in projects\n     like `<Badge bg=\"red\">alpha</Badge>`\n  */\n  /* DEPRECATED END */\n}\n\n.___STabPanel_1lff2_gg_ {\n  display: flex;\n  width: 100%;\n  max-width: 100%;\n  border-bottom: 1px solid #c4c7cf;\n}\n\n.___STabPanelItem_1lff2_gg_ {\n  position: relative;\n  bottom: -1px;\n  display: inline-flex;\n  min-width: 0;\n  height: 32px;\n  color: #6c6e79;\n  border: 1px solid transparent;\n  border-radius: 6px 6px 0 0;\n  background: transparent;\n  align-items: center;\n  justify-content: center;\n  touch-action: manipulation;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  box-shadow: none;\n  outline: none;\n  text-decoration: none;\n  -webkit-tap-highlight-color: transparent;\n  outline: 0;\n  text-align: center;\n  vertical-align: middle;\n  font-family: inherit;\n  cursor: pointer\n}\n\n.___STabPanelItem_1lff2_gg_ .___SText_1lff2_gg_ {\n    font-size: 14px;\n    line-height: 1.42;\n  }\n\n.___STabPanelItem_1lff2_gg_::-moz-focus-inner {\n    border: none;\n    padding: 0;\n  }\n\n.___STabPanelItem_1lff2_gg_:active,\n  .___STabPanelItem_1lff2_gg_:hover,\n  .___STabPanelItem_1lff2_gg_:focus {\n    outline: 0;\n    text-decoration: none;\n  }\n\n.___STabPanelItem_1lff2_gg_:hover {\n    color: #191b23;\n  }\n\n.___STabPanelItem_1lff2_gg_.__disabled_1lff2_gg_ {\n  opacity: 0.3;\n  cursor: default;\n  pointer-events: none; /* Disable link interactions */\n}\n\n.___STabPanelItem_1lff2_gg_.__keyboardFocused_1lff2_gg_ {\n  box-shadow: 0 0 0 3px rgba(0, 143, 248, 0.2);\n}\n\n.___STabPanelItem_1lff2_gg_.__selected_1lff2_gg_ {\n  color: #006dca;\n  border-color: #c4c7cf;\n  border-bottom-color: #ffffff;\n  flex-shrink: 0\n}\n\n.___STabPanelItem_1lff2_gg_.__selected_1lff2_gg_:hover {\n    color: #006dca;\n  }\n\n.___SText_1lff2_gg_ {\n  display: inline-block;\n  margin: auto 8px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.___SAddon_1lff2_gg_ {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.___SAddon_1lff2_gg_:not(:only-child):first-child {\n  margin-left: 8px;\n}\n\n.___SAddon_1lff2_gg_:not(:only-child):last-child {\n  margin-right: 8px;\n}\n\n.___SAddon_1lff2_gg_:only-child {\n  margin-right: 8px;\n  margin-left: 8px;\n}\n"
 /*__inner_css_end__*/
-, "1ew8z_gg_")
+, "1lff2_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__STabPanel": "___STabPanel_1ew8z_gg_",
-  "__STabPanelItem": "___STabPanelItem_1ew8z_gg_",
-  "__SText": "___SText_1ew8z_gg_",
-  "_disabled": "__disabled_1ew8z_gg_",
-  "_keyboardFocused": "__keyboardFocused_1ew8z_gg_",
-  "_selected": "__selected_1ew8z_gg_",
-  "__SAddon": "___SAddon_1ew8z_gg_"
+  "__STabPanel": "___STabPanel_1lff2_gg_",
+  "__STabPanelItem": "___STabPanelItem_1lff2_gg_",
+  "__SText": "___SText_1lff2_gg_",
+  "_disabled": "__disabled_1lff2_gg_",
+  "_keyboardFocused": "__keyboardFocused_1lff2_gg_",
+  "_selected": "__selected_1lff2_gg_",
+  "__SAddon": "___SAddon_1lff2_gg_"
 });
 var optionsA11yEnhance = {
   onNeighborChange: function onNeighborChange(neighborElement) {

package/lib/es6/index.d.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.d.js.map

package/lib/es6/index.d.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import React from 'react';\nimport { CProps, PropGetterFn, ReturnEl } from '@semcore/core';\nimport { Box, IBoxProps } from '@semcore/flex-box';\nimport { IKeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\n\nexport type TabPanelValue = string | number | boolean;\n\nexport interface ITabPanelProps<T extends TabPanelValue = TabPanelValue> extends IBoxProps {\n  /** Is invoked when changing the selection */\n  onChange?: (value: T, e?: React.SyntheticEvent<HTMLButtonElement>) => void;\n  /** Value of the selected tab */\n  value?: T;\n  /** Default value of the selected tab\n   * @default null\n   * */\n  defaultValue?: T;\n}\n\nexport interface ITabPanelItemProps extends IBoxProps, IKeyboardFocusProps {\n  /** Makes a tab selected. This property is determined automatically depending on the value. */\n  selected?: boolean;\n  /** Disabled state */\n  disabled?: boolean;\n  /** Tab value */\n  value?: TabPanelValue;\n  /** Left addon tag  */\n  addonLeft?: React.ElementType;\n  /** Right addon tag  */\n  addonRight?: React.ElementType;\n}\n\nexport interface ITabPanelContext {\n  getItemProps: PropGetterFn;\n}\n\nexport interface ITabPanelHandlers {\n  value: (value: TabPanelValue) => void;\n}\n\ndeclare const TabPanel: (<T, V extends TabPanelValue = TabPanelValue>(\n  props: CProps<ITabPanelProps<V> & T, ITabPanelContext, ITabPanelHandlers>,\n) => ReturnEl) & {\n  Item: (<T>(props: CProps<ITabPanelItemProps & T, {}, ITabPanelHandlers>) => ReturnEl) & {\n    Text: typeof Box;\n    Addon: typeof Box;\n  };\n};\n\nexport default TabPanel;\n"],"mappings":""}

package/lib/es6/style/tab-panel.shadow.css

@@ -98,3 +98,8 @@ SAddon:not(:only-child):first-child {
 SAddon:not(:only-child):last-child {
   margin-right: 8px;
 }
+
+SAddon:only-child {
+  margin-right: 8px;
+  margin-left: 8px;
+}

package/package.json

@@ -1,24 +1,20 @@
 {
   "name": "@semcore/tab-panel",
   "description": "Semrush TabPanel Component",
-  "version": "3.0.8",
+  "version": "3.1.0",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
   "sideEffects": false,
   "author": "UI-kit team <ui-kit-team@semrush.com>",
   "license": "MIT",
-  "scripts": {
-    "build": "build --source=js",
-    "test": "jest"
-  },
   "dependencies": {
     "@semcore/utils": "^3.30",
     "@semcore/flex-box": "^4"
   },
   "peerDependencies": {
     "@semcore/core": "^1.11",
-    "react": "16.8 - 17"
+    "react": "16.8 - 18"
   },
   "jest": {
     "preset": "@semcore/jest-preset-ui"
@@ -29,6 +25,12 @@
     "directory": "semcore/tab-panel"
   },
   "devDependencies": {
-    "@semcore/jest-preset-ui": "1.0.0"
+    "@types/react": "18.0.21",
+    "@semcore/jest-preset-ui": "1.0.0",
+    "@semcore/icon": "*"
+  },
+  "scripts": {
+    "build": "pnpm semcore-builder --source=js",
+    "test": "jest"
   }
-}
+}

package/lib/cjs/index.d.ts

@@ -1,49 +0,0 @@
-import React from 'react';
-import { CProps, PropGetterFn, ReturnEl } from '@semcore/core';
-import { Box, IBoxProps } from '@semcore/flex-box';
-import { IKeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
-
-export type TabPanelValue = string | number | boolean;
-
-export interface ITabPanelProps<T extends TabPanelValue = TabPanelValue> extends IBoxProps {
-  /** Is invoked when changing the selection */
-  onChange?: (value: T, e?: React.SyntheticEvent<HTMLButtonElement>) => void;
-  /** Value of the selected tab */
-  value?: T;
-  /** Default value of the selected tab
-   * @default null
-   * */
-  defaultValue?: T;
-}
-
-export interface ITabPanelItemProps extends IBoxProps, IKeyboardFocusProps {
-  /** Makes a tab selected. This property is determined automatically depending on the value. */
-  selected?: boolean;
-  /** Disabled state */
-  disabled?: boolean;
-  /** Tab value */
-  value?: TabPanelValue;
-  /** Left addon tag  */
-  addonLeft?: React.ElementType;
-  /** Right addon tag  */
-  addonRight?: React.ElementType;
-}
-
-export interface ITabPanelContext {
-  getItemProps: PropGetterFn;
-}
-
-export interface ITabPanelHandlers {
-  value: (value: TabPanelValue) => void;
-}
-
-declare const TabPanel: (<T, V extends TabPanelValue = TabPanelValue>(
-  props: CProps<ITabPanelProps<V> & T, ITabPanelContext, ITabPanelHandlers>,
-) => ReturnEl) & {
-  Item: (<T>(props: CProps<ITabPanelItemProps & T, {}, ITabPanelHandlers>) => ReturnEl) & {
-    Text: typeof Box;
-    Addon: typeof Box;
-  };
-};
-
-export default TabPanel;

package/lib/es6/index.d.ts

@@ -1,49 +0,0 @@
-import React from 'react';
-import { CProps, PropGetterFn, ReturnEl } from '@semcore/core';
-import { Box, IBoxProps } from '@semcore/flex-box';
-import { IKeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
-
-export type TabPanelValue = string | number | boolean;
-
-export interface ITabPanelProps<T extends TabPanelValue = TabPanelValue> extends IBoxProps {
-  /** Is invoked when changing the selection */
-  onChange?: (value: T, e?: React.SyntheticEvent<HTMLButtonElement>) => void;
-  /** Value of the selected tab */
-  value?: T;
-  /** Default value of the selected tab
-   * @default null
-   * */
-  defaultValue?: T;
-}
-
-export interface ITabPanelItemProps extends IBoxProps, IKeyboardFocusProps {
-  /** Makes a tab selected. This property is determined automatically depending on the value. */
-  selected?: boolean;
-  /** Disabled state */
-  disabled?: boolean;
-  /** Tab value */
-  value?: TabPanelValue;
-  /** Left addon tag  */
-  addonLeft?: React.ElementType;
-  /** Right addon tag  */
-  addonRight?: React.ElementType;
-}
-
-export interface ITabPanelContext {
-  getItemProps: PropGetterFn;
-}
-
-export interface ITabPanelHandlers {
-  value: (value: TabPanelValue) => void;
-}
-
-declare const TabPanel: (<T, V extends TabPanelValue = TabPanelValue>(
-  props: CProps<ITabPanelProps<V> & T, ITabPanelContext, ITabPanelHandlers>,
-) => ReturnEl) & {
-  Item: (<T>(props: CProps<ITabPanelItemProps & T, {}, ITabPanelHandlers>) => ReturnEl) & {
-    Text: typeof Box;
-    Addon: typeof Box;
-  };
-};
-
-export default TabPanel;