@semcore/tab-panel 17.0.1 → 17.0.2-prerelease.0

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [17.0.2] - 2026-04-29
+
+### Fixed
+
+- Rewrite component to TS.
+
 ## [17.0.1] - 2026-04-16
 
 ### Fixed

package/lib/cjs/TabPanel.js

@@ -13,27 +13,16 @@ var _a11yEnhance = _interopRequireDefault(require("@semcore/core/lib/utils/enhan
 var _typography = require("@semcore/typography");
 var _react = _interopRequireDefault(require("react"));
 /*!__reshadow-styles__:"./style/tab-panel.shadow.css"*/
-const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___STabPanel_ispzt_gg_{display:flex;width:100%;max-width:100%}.___STabPanel_ispzt_gg_::after{content:\"\";position:relative;bottom:-1px;flex:1;border-top:1px solid transparent;border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabPanelItem_ispzt_gg_{position:relative;bottom:-1px;display:inline-flex;min-width:0;height:32px;color:var(--intergalactic-text-secondary, #6c6e79);border:1px solid transparent;border-bottom:none;border-radius:var(--intergalactic-control-rounded, 6px) var(--intergalactic-control-rounded, 6px)0 0;background:0 0;align-items:center;justify-content:center;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-sizing:border-box;padding:0 0 1px;margin:0;box-shadow:none;-webkit-text-decoration:none;text-decoration:none;-webkit-tap-highlight-color:transparent;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer}.___STabPanelItem_ispzt_gg_::-moz-focus-inner{border:0;padding:0}.___STabPanelItem_ispzt_gg_:active{-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STabPanelItem_ispzt_gg_:hover{-webkit-text-decoration:none;text-decoration:none;color:var(--intergalactic-text-primary, #191b23)}}.___STabPanelItem_ispzt_gg_::after{content:\"\";position:absolute;left:-1px;bottom:0;width:calc(100% + 2px);border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabPanelItem_ispzt_gg_.__disabled_ispzt_gg_{cursor:default;pointer-events:none}.___STabPanelItem_ispzt_gg_.__disabled_ispzt_gg_ .___SAddon_ispzt_gg_,.___STabPanelItem_ispzt_gg_.__disabled_ispzt_gg_ .___SText_ispzt_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3)}.___STabPanelItem_ispzt_gg_.__selected_ispzt_gg_{color:var(--intergalactic-text-link, #006dca);border-color:var(--intergalactic-border-primary, #c4c7cf);flex-shrink:0}@media (hover:hover){.___STabPanelItem_ispzt_gg_.__selected_ispzt_gg_:hover{color:var(--intergalactic-text-link-hover-active, #044792)}}.___STabPanelItem_ispzt_gg_.__selected_ispzt_gg_::after{border-bottom:none}.___SText_ispzt_gg_{margin:auto var(--intergalactic-spacing-2x, 8px)}.___SAddon_ispzt_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_ispzt_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SAddon_ispzt_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SAddon_ispzt_gg_:only-child{margin-right:var(--intergalactic-spacing-2x, 8px);margin-left:var(--intergalactic-spacing-2x, 8px)}", /*__inner_css_end__*/"ispzt_gg_"),
+const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___STabPanel_10ruz_gg_{display:flex;width:100%;max-width:100%}.___STabPanel_10ruz_gg_::after{content:\"\";position:relative;bottom:-1px;flex:1;border-top:1px solid transparent;border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabPanelItem_10ruz_gg_{position:relative;bottom:-1px;display:inline-flex;min-width:0;height:32px;color:var(--intergalactic-text-secondary, #6c6e79);border:1px solid transparent;border-bottom:none;border-radius:var(--intergalactic-control-rounded, 6px) var(--intergalactic-control-rounded, 6px)0 0;background:0 0;align-items:center;justify-content:center;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-sizing:border-box;padding:0 0 1px;margin:0;box-shadow:none;-webkit-text-decoration:none;text-decoration:none;-webkit-tap-highlight-color:transparent;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer}.___STabPanelItem_10ruz_gg_::-moz-focus-inner{border:0;padding:0}.___STabPanelItem_10ruz_gg_:active{-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STabPanelItem_10ruz_gg_:hover{-webkit-text-decoration:none;text-decoration:none;color:var(--intergalactic-text-primary, #191b23)}}.___STabPanelItem_10ruz_gg_::after{content:\"\";position:absolute;left:-1px;bottom:0;width:calc(100% + 2px);border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabPanelItem_10ruz_gg_.__disabled_10ruz_gg_{cursor:default;pointer-events:none}.___STabPanelItem_10ruz_gg_.__disabled_10ruz_gg_ .___SAddon_10ruz_gg_,.___STabPanelItem_10ruz_gg_.__disabled_10ruz_gg_ .___SText_10ruz_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3)}.___STabPanelItem_10ruz_gg_.__selected_10ruz_gg_{color:var(--intergalactic-text-link, #006dca);border-color:var(--intergalactic-border-primary, #c4c7cf);flex-shrink:0}@media (hover:hover){.___STabPanelItem_10ruz_gg_.__selected_10ruz_gg_:hover{color:var(--intergalactic-text-link-hover-active, #044792)}}.___STabPanelItem_10ruz_gg_.__selected_10ruz_gg_::after{border-bottom:none}.___SText_10ruz_gg_{margin:auto var(--intergalactic-spacing-2x, 8px)}.___SAddon_10ruz_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_10ruz_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SAddon_10ruz_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SAddon_10ruz_gg_:only-child{margin-right:var(--intergalactic-spacing-2x, 8px);margin-left:var(--intergalactic-spacing-2x, 8px)}", /*__inner_css_end__*/"10ruz_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SText": "___SText_ispzt_gg_",
-  "__SAddon": "___SAddon_ispzt_gg_",
-  "__STabPanel": "___STabPanel_ispzt_gg_",
-  "__STabPanelItem": "___STabPanelItem_ispzt_gg_",
-  "_disabled": "__disabled_ispzt_gg_",
-  "_selected": "__selected_ispzt_gg_"
+  "__SText": "___SText_10ruz_gg_",
+  "__SAddon": "___SAddon_10ruz_gg_",
+  "__STabPanel": "___STabPanel_10ruz_gg_",
+  "__STabPanelItem": "___STabPanelItem_10ruz_gg_",
+  "_disabled": "__disabled_10ruz_gg_",
+  "_selected": "__selected_10ruz_gg_"
 });
-const optionsA11yEnhance = {
-  onNeighborChange: (neighborElement, props) => {
-    if (neighborElement) {
-      neighborElement.focus();
-      if (props.behavior === 'auto') {
-        neighborElement.click();
-      }
-    }
-  },
-  childSelector: ['role', 'tab']
-};
 class TabPanelRoot extends _core.Component {
   constructor(...args) {
     super(...args);
@@ -94,7 +83,18 @@ class TabPanelRoot extends _core.Component {
   defaultValue: null,
   behavior: 'manual'
 });
-(0, _defineProperty2.default)(TabPanelRoot, "enhance", [(0, _a11yEnhance.default)(optionsA11yEnhance)]);
+(0, _defineProperty2.default)(TabPanelRoot, "enhance", [(0, _a11yEnhance.default)({
+  onNeighborChange: (neighborElement, props) => {
+    if (neighborElement) {
+      neighborElement.focus();
+      if (props.behavior === 'auto') {
+        neighborElement.click();
+      }
+    }
+  },
+  childSelector: ['role', 'tab']
+})]);
+;
 function TabPanelItem(props) {
   var _ref2 = arguments[0],
     _ref6;

package/lib/cjs/TabPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabPanel.js","names":["_core","require","_baseComponents","_addonTextChildren","_interopRequireDefault","_a11yEnhance","_typography","_react","style","sstyled","insert","optionsA11yEnhance","onNeighborChange","neighborElement","props","focus","behavior","click","childSelector","TabPanelRoot","Component","constructor","args","_defineProperty2","default","value","event","handlers","key","preventDefault","uncontrolledProps","getItemProps","index","asProps","isSelected","handleClick","handleKeyDown","buttonRefsList","getItemTextProps","_","render","_ref","_ref5","STabPanel","Box","styles","createElement","cn","assignProps","defaultValue","a11yEnhance","TabPanelItem","_ref2","arguments[0]","_ref6","STabPanelItem","Children","addonLeft","addonRight","buttonRef","React","useRef","TabPanel","Item","Addon","tag","addonTextChildren","Text","_ref3","_ref7","SText","UikitText","ellipsis","_ref4","_ref8","SAddon","createComponent","wrapTabPanel","wrapper","exports","_default"],"sources":["../../src/TabPanel.jsx"],"sourcesContent":["import { Box } from '@semcore/base-components';\nimport { createComponent, Component, sstyled, Root } from '@semcore/core';\nimport addonTextChildren from '@semcore/core/lib/utils/addonTextChildren';\nimport a11yEnhance from '@semcore/core/lib/utils/enhances/a11yEnhance';\nimport { Text as UikitText } from '@semcore/typography';\nimport React from 'react';\n\nimport style from './style/tab-panel.shadow.css';\n\nconst optionsA11yEnhance = {\n  onNeighborChange: (neighborElement, props) => {\n    if (neighborElement) {\n      neighborElement.focus();\n      if (props.behavior === 'auto') {\n        neighborElement.click();\n      }\n    }\n  },\n  childSelector: ['role', 'tab'],\n};\n\nclass TabPanelRoot extends Component {\n  static displayName = 'TabPanel';\n  static style = style;\n  static defaultProps = {\n    defaultValue: null,\n    behavior: 'manual',\n  };\n\n  static enhance = [a11yEnhance(optionsA11yEnhance)];\n\n  buttonRefsList = [];\n\n  uncontrolledProps() {\n    return {\n      value: null,\n    };\n  }\n\n  handleClick = (value) => (event) => {\n    this.handlers.value(value, event);\n  };\n\n  handleKeyDown = (value) => (event) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.handlers.value(value, event);\n    }\n  };\n\n  getItemProps(props, index) {\n    const { value } = this.asProps;\n    const isSelected = value === props.value;\n    return {\n      'selected': isSelected,\n      'onClick': this.handleClick(props.value),\n      'onKeyDown': this.handleKeyDown(props.value),\n      'tabIndex': isSelected ? 0 : -1,\n      'aria-selected': isSelected,\n      'buttonRefsList': this.buttonRefsList,\n      index,\n    };\n  }\n\n  getItemTextProps(_, index) {\n    return {\n      buttonRefsList: this.buttonRefsList,\n      index,\n    };\n  }\n\n  render() {\n    const STabPanel = Root;\n    const { styles } = this.asProps;\n\n    return sstyled(styles)(<STabPanel render={Box} role='tablist' />);\n  }\n}\n\nfunction TabPanelItem(props) {\n  const STabPanelItem = Root;\n  const { Children, styles, addonLeft, addonRight, buttonRefsList, index } = props;\n  const buttonRef = React.useRef();\n\n  buttonRefsList[index] = buttonRef;\n\n  return sstyled(styles)(\n    <STabPanelItem render={Box} type='button' tag='button' tabIndex={0} role='tab' ref={buttonRef}>\n      {addonLeft ? <TabPanel.Item.Addon tag={addonLeft} /> : null}\n      {addonTextChildren(Children, TabPanel.Item.Text, TabPanel.Item.Addon)}\n      {addonRight ? <TabPanel.Item.Addon tag={addonRight} /> : null}\n    </STabPanelItem>,\n  );\n}\n\nfunction Text(props) {\n  const SText = Root;\n  const { styles, ellipsis = true, buttonRefsList, index } = props;\n  return sstyled(styles)(<SText render={UikitText} size={200} ellipsis={ellipsis} medium hint:triggerRef={buttonRefsList[index]} />);\n}\n\nfunction Addon(props) {\n  const SAddon = Root;\n  const { styles } = props;\n  return sstyled(styles)(<SAddon render={Box} tag='span' />);\n}\n\nconst TabPanel = createComponent(TabPanelRoot, {\n  Item: [TabPanelItem, { Text, Addon }],\n});\n\nexport const wrapTabPanel = (wrapper) => wrapper;\n\nexport default TabPanel;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"TabPanel.js","names":["_core","require","_baseComponents","_addonTextChildren","_interopRequireDefault","_a11yEnhance","_typography","_react","style","sstyled","insert","TabPanelRoot","Component","constructor","args","_defineProperty2","default","value","event","handlers","key","preventDefault","uncontrolledProps","getItemProps","props","index","asProps","isSelected","handleClick","handleKeyDown","buttonRefsList","getItemTextProps","_","render","_ref","_ref5","STabPanel","Box","styles","createElement","cn","assignProps","defaultValue","behavior","a11yEnhance","onNeighborChange","neighborElement","focus","click","childSelector","TabPanelItem","_ref2","arguments[0]","_ref6","STabPanelItem","Children","addonLeft","addonRight","buttonRef","React","useRef","TabPanel","Item","Addon","tag","addonTextChildren","Text","_ref3","_ref7","SText","UikitText","ellipsis","_ref4","_ref8","SAddon","createComponent","wrapTabPanel","wrapper","exports","_default"],"sources":["../../src/TabPanel.tsx"],"sourcesContent":["import { Box } from '@semcore/base-components';\nimport type { Intergalactic } from '@semcore/core';\nimport { createComponent, Component, sstyled, Root } from '@semcore/core';\nimport addonTextChildren from '@semcore/core/lib/utils/addonTextChildren';\nimport a11yEnhance from '@semcore/core/lib/utils/enhances/a11yEnhance';\nimport { Text as UikitText } from '@semcore/typography';\nimport React from 'react';\n\nimport style from './style/tab-panel.shadow.css';\nimport type { NSTabPanel } from './TabPanel.type';\n\nclass TabPanelRoot extends Component<\n  Intergalactic.InternalTypings.InferComponentProps<NSTabPanel.Component>,\n  typeof TabPanelRoot.enhance,\n  NSTabPanel.Handlers\n> {\n  static displayName = 'TabPanel';\n  static style = style;\n  static defaultProps = {\n    defaultValue: null,\n    behavior: 'manual',\n  };\n\n  static enhance = [\n    a11yEnhance({\n      onNeighborChange: (neighborElement, props) => {\n        if (neighborElement) {\n          neighborElement.focus();\n          if (props.behavior === 'auto') {\n            neighborElement.click();\n          }\n        }\n      },\n      childSelector: ['role', 'tab'],\n    }),\n  ] as const;\n\n  buttonRefsList: Array<React.MutableRefObject<HTMLButtonElement | undefined>> = [];\n\n  uncontrolledProps() {\n    return {\n      value: null,\n    };\n  }\n\n  handleClick = (value: NSTabPanel.Props['value']) => (event: React.MouseEvent<HTMLButtonElement>) => {\n    this.handlers.value(value, event);\n  };\n\n  handleKeyDown = (value: NSTabPanel.Props['value']) => (event: React.KeyboardEvent<HTMLButtonElement>) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.handlers.value(value, event);\n    }\n  };\n\n  getItemProps(props: NSTabPanel.Item.Props, index: number) {\n    const { value } = this.asProps;\n    const isSelected = value === props.value;\n    return {\n      'selected': isSelected,\n      'onClick': this.handleClick(props.value),\n      'onKeyDown': this.handleKeyDown(props.value),\n      'tabIndex': isSelected ? 0 : -1,\n      'aria-selected': isSelected,\n      'buttonRefsList': this.buttonRefsList,\n      index,\n    };\n  }\n\n  getItemTextProps(_: NSTabPanel.Item.Text.Props, index: number) {\n    return {\n      buttonRefsList: this.buttonRefsList,\n      index,\n    };\n  }\n\n  render() {\n    const STabPanel = Root;\n    const { styles } = this.asProps;\n\n    return sstyled(styles)(<STabPanel render={Box} role='tablist' />);\n  }\n};\n\nfunction TabPanelItem(\n  props: Intergalactic.InternalTypings.InferChildComponentProps<\n    NSTabPanel.Item.Component,\n    typeof TabPanelRoot,\n    'Item'\n  >,\n) {\n  const STabPanelItem = Root;\n  const { Children, styles, addonLeft, addonRight, buttonRefsList, index } = props;\n  const buttonRef = React.useRef<HTMLButtonElement>();\n\n  buttonRefsList[index] = buttonRef;\n\n  return sstyled(styles)(\n    <STabPanelItem render={Box} type='button' tag='button' tabIndex={0} role='tab' ref={buttonRef}>\n      {addonLeft ? <TabPanel.Item.Addon tag={addonLeft} /> : null}\n      {addonTextChildren(Children, TabPanel.Item.Text, TabPanel.Item.Addon)}\n      {addonRight ? <TabPanel.Item.Addon tag={addonRight} /> : null}\n    </STabPanelItem>,\n  );\n}\n\nfunction Text(\n  props: Intergalactic.InternalTypings.InferChildComponentProps<\n    NSTabPanel.Item.Text.Component,\n    typeof TabPanelRoot,\n    'ItemText'\n  >,\n) {\n  const SText = Root;\n  const { styles, ellipsis = true, buttonRefsList, index } = props;\n  return sstyled(styles)(<SText render={UikitText} size={200} ellipsis={ellipsis} medium hint:triggerRef={buttonRefsList[index]} />);\n}\n\nfunction Addon(\n  props: Intergalactic.InternalTypings.InferComponentProps<NSTabPanel.Item.Addon.Component>,\n) {\n  const SAddon = Root;\n  const { styles } = props;\n  return sstyled(styles)(<SAddon render={Box} tag='span' />);\n}\n\nconst TabPanel = createComponent(TabPanelRoot, {\n  Item: [TabPanelItem, { Text, Addon }],\n}) as unknown as NSTabPanel.Component;\n\nexport const wrapTabPanel = <PropsExtending extends {}>(wrapper: (\n  props: Intergalactic.InternalTypings.UntypeRefAndTag<\n    Intergalactic.InternalTypings.ComponentPropsNesting<NSTabPanel.WrapperComponent>\n  > &\n  PropsExtending,\n) => React.ReactNode) => wrapper as NSTabPanel.WrapperComponent<PropsExtending>;\n\nexport default TabPanel;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/TabPanel.type.js

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

package/lib/cjs/TabPanel.type.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabPanel.type.js","names":[],"sources":["../../src/TabPanel.type.ts"],"sourcesContent":["import type { Box, BoxProps } from '@semcore/base-components';\nimport type { Intergalactic, PropGetterFn } from '@semcore/core';\nimport type { NSText } from '@semcore/typography';\n\ndeclare namespace NSTabPanel {\n  type Value = string | number | boolean;\n  type Props<V extends NSTabPanel.Value = NSTabPanel.Value> = BoxProps & {\n    /** Is invoked when changing the selection */\n    onChange?:\n      | ((value: V, e?: React.SyntheticEvent<HTMLButtonElement>) => void)\n      | React.Dispatch<React.SetStateAction<V>>;\n    /** Value of the selected tab */\n    value?: V;\n    /** Default value of the selected tab\n     * @default null\n     * */\n    defaultValue?: V;\n    /**\n     * Behavior of tabs.\n     * In `auto`, changes the tab immediately when press arrow.\n     * In `manual`, needs to press `space` or `enter` for select a choice.\n     * @default 'auto'\n     */\n    behavior?: 'auto' | 'manual';\n  };\n  type Ctx = {\n    getItemProps: PropGetterFn;\n  };\n  type Handlers = {\n    value: null;\n  };\n\n  namespace Item {\n    type Props = BoxProps & {\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?: NSTabPanel.Value;\n      /** Left addon tag  */\n      addonLeft?: React.ElementType;\n      /** Right addon tag  */\n      addonRight?: React.ElementType;\n    };\n\n    namespace Text {\n        type Props = NSText.Props;\n        type Component = NSText.Component;\n    }\n\n    namespace Addon {\n        type Component = typeof Box;\n    }\n\n    type Component = Intergalactic.Component<'div', Props, {}, [handlers: NSTabPanel.Handlers]> & {\n      Text: Text.Component;\n      Addon: Addon.Component;\n    };\n  }\n\n  type WrapperComponent<PropsExtending = {}> = (<\n    V extends NSTabPanel.Value,\n    Tag extends Intergalactic.Tag = 'div',\n  >(\n    props: Intergalactic.InternalTypings.ComponentProps<\n      Tag,\n      'div',\n      Props<V>,\n      Ctx,\n      [handlers: Handlers]\n    > &\n    PropsExtending,\n  ) => Intergalactic.InternalTypings.ComponentRenderingResults) & Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', Props>;\n\n  type Component = WrapperComponent & {\n    Item: Item.Component;\n  };\n}\n\n/** @deprecated It will be removed in v18. */\nexport type TabPanelValue = NSTabPanel.Value;\n/** @deprecated It will be removed in v18. */\nexport type TabPanelProps<T extends TabPanelValue = TabPanelValue> = NSTabPanel.Props<T>;\n/** @deprecated It will be removed in v18. */\nexport type TabPanelItemProps = NSTabPanel.Item.Props;\n/** @deprecated It will be removed in v18. */\nexport type TabPanelContext = NSTabPanel.Ctx;\n/** @deprecated It will be removed in v18. */\nexport type TabPanelHandlers = NSTabPanel.Handlers;\n\nexport type { NSTabPanel };\n"],"mappings":"","ignoreList":[]}

package/lib/cjs/index.js

@@ -4,22 +4,31 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _exportNames = {};
+var _exportNames = {
+  wrapTabPanel: true
+};
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function () {
     return _TabPanel.default;
   }
 });
+Object.defineProperty(exports, "wrapTabPanel", {
+  enumerable: true,
+  get: function () {
+    return _TabPanel.wrapTabPanel;
+  }
+});
 var _TabPanel = _interopRequireWildcard(require("./TabPanel"));
-Object.keys(_TabPanel).forEach(function (key) {
+var _TabPanel2 = require("./TabPanel.type");
+Object.keys(_TabPanel2).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _TabPanel[key]) return;
+  if (key in exports && exports[key] === _TabPanel2[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _TabPanel[key];
+      return _TabPanel2[key];
     }
   });
 });

package/lib/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_TabPanel","_interopRequireWildcard","require","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get"],"sources":["../../src/index.js"],"sourcesContent":["export { default } from './TabPanel';\nexport * from './TabPanel';\n"],"mappings":";;;;;;;;;;;;;AAAA,IAAAA,SAAA,GAAAC,uBAAA,CAAAC,OAAA;AACAC,MAAA,CAAAC,IAAA,CAAAJ,SAAA,EAAAK,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAN,SAAA,CAAAM,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAd,SAAA,CAAAM,GAAA;IAAA;EAAA;AAAA","ignoreList":[]}
+{"version":3,"file":"index.js","names":["_TabPanel","_interopRequireWildcard","require","_TabPanel2","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get"],"sources":["../../src/index.ts"],"sourcesContent":["export { default, wrapTabPanel } from './TabPanel';\nexport * from './TabPanel.type';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,SAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAD,OAAA;AAAAE,MAAA,CAAAC,IAAA,CAAAF,UAAA,EAAAG,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAJ,UAAA,CAAAI,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAZ,UAAA,CAAAI,GAAA;IAAA;EAAA;AAAA","ignoreList":[]}

package/lib/es6/TabPanel.js

@@ -11,27 +11,16 @@ import a11yEnhance from '@semcore/core/lib/utils/enhances/a11yEnhance';
 import { Text as UikitText } from '@semcore/typography';
 import React from 'react';
 /*!__reshadow-styles__:"./style/tab-panel.shadow.css"*/
-const style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___STabPanel_ispzt_gg_{display:flex;width:100%;max-width:100%}.___STabPanel_ispzt_gg_::after{content:\"\";position:relative;bottom:-1px;flex:1;border-top:1px solid transparent;border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabPanelItem_ispzt_gg_{position:relative;bottom:-1px;display:inline-flex;min-width:0;height:32px;color:var(--intergalactic-text-secondary, #6c6e79);border:1px solid transparent;border-bottom:none;border-radius:var(--intergalactic-control-rounded, 6px) var(--intergalactic-control-rounded, 6px)0 0;background:0 0;align-items:center;justify-content:center;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-sizing:border-box;padding:0 0 1px;margin:0;box-shadow:none;-webkit-text-decoration:none;text-decoration:none;-webkit-tap-highlight-color:transparent;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer}.___STabPanelItem_ispzt_gg_::-moz-focus-inner{border:0;padding:0}.___STabPanelItem_ispzt_gg_:active{-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STabPanelItem_ispzt_gg_:hover{-webkit-text-decoration:none;text-decoration:none;color:var(--intergalactic-text-primary, #191b23)}}.___STabPanelItem_ispzt_gg_::after{content:\"\";position:absolute;left:-1px;bottom:0;width:calc(100% + 2px);border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabPanelItem_ispzt_gg_.__disabled_ispzt_gg_{cursor:default;pointer-events:none}.___STabPanelItem_ispzt_gg_.__disabled_ispzt_gg_ .___SAddon_ispzt_gg_,.___STabPanelItem_ispzt_gg_.__disabled_ispzt_gg_ .___SText_ispzt_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3)}.___STabPanelItem_ispzt_gg_.__selected_ispzt_gg_{color:var(--intergalactic-text-link, #006dca);border-color:var(--intergalactic-border-primary, #c4c7cf);flex-shrink:0}@media (hover:hover){.___STabPanelItem_ispzt_gg_.__selected_ispzt_gg_:hover{color:var(--intergalactic-text-link-hover-active, #044792)}}.___STabPanelItem_ispzt_gg_.__selected_ispzt_gg_::after{border-bottom:none}.___SText_ispzt_gg_{margin:auto var(--intergalactic-spacing-2x, 8px)}.___SAddon_ispzt_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_ispzt_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SAddon_ispzt_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SAddon_ispzt_gg_:only-child{margin-right:var(--intergalactic-spacing-2x, 8px);margin-left:var(--intergalactic-spacing-2x, 8px)}", /*__inner_css_end__*/"ispzt_gg_"),
+const style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___STabPanel_10ruz_gg_{display:flex;width:100%;max-width:100%}.___STabPanel_10ruz_gg_::after{content:\"\";position:relative;bottom:-1px;flex:1;border-top:1px solid transparent;border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabPanelItem_10ruz_gg_{position:relative;bottom:-1px;display:inline-flex;min-width:0;height:32px;color:var(--intergalactic-text-secondary, #6c6e79);border:1px solid transparent;border-bottom:none;border-radius:var(--intergalactic-control-rounded, 6px) var(--intergalactic-control-rounded, 6px)0 0;background:0 0;align-items:center;justify-content:center;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-sizing:border-box;padding:0 0 1px;margin:0;box-shadow:none;-webkit-text-decoration:none;text-decoration:none;-webkit-tap-highlight-color:transparent;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer}.___STabPanelItem_10ruz_gg_::-moz-focus-inner{border:0;padding:0}.___STabPanelItem_10ruz_gg_:active{-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STabPanelItem_10ruz_gg_:hover{-webkit-text-decoration:none;text-decoration:none;color:var(--intergalactic-text-primary, #191b23)}}.___STabPanelItem_10ruz_gg_::after{content:\"\";position:absolute;left:-1px;bottom:0;width:calc(100% + 2px);border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabPanelItem_10ruz_gg_.__disabled_10ruz_gg_{cursor:default;pointer-events:none}.___STabPanelItem_10ruz_gg_.__disabled_10ruz_gg_ .___SAddon_10ruz_gg_,.___STabPanelItem_10ruz_gg_.__disabled_10ruz_gg_ .___SText_10ruz_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3)}.___STabPanelItem_10ruz_gg_.__selected_10ruz_gg_{color:var(--intergalactic-text-link, #006dca);border-color:var(--intergalactic-border-primary, #c4c7cf);flex-shrink:0}@media (hover:hover){.___STabPanelItem_10ruz_gg_.__selected_10ruz_gg_:hover{color:var(--intergalactic-text-link-hover-active, #044792)}}.___STabPanelItem_10ruz_gg_.__selected_10ruz_gg_::after{border-bottom:none}.___SText_10ruz_gg_{margin:auto var(--intergalactic-spacing-2x, 8px)}.___SAddon_10ruz_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_10ruz_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SAddon_10ruz_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SAddon_10ruz_gg_:only-child{margin-right:var(--intergalactic-spacing-2x, 8px);margin-left:var(--intergalactic-spacing-2x, 8px)}", /*__inner_css_end__*/"10ruz_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SText": "___SText_ispzt_gg_",
-  "__SAddon": "___SAddon_ispzt_gg_",
-  "__STabPanel": "___STabPanel_ispzt_gg_",
-  "__STabPanelItem": "___STabPanelItem_ispzt_gg_",
-  "_disabled": "__disabled_ispzt_gg_",
-  "_selected": "__selected_ispzt_gg_"
+  "__SText": "___SText_10ruz_gg_",
+  "__SAddon": "___SAddon_10ruz_gg_",
+  "__STabPanel": "___STabPanel_10ruz_gg_",
+  "__STabPanelItem": "___STabPanelItem_10ruz_gg_",
+  "_disabled": "__disabled_10ruz_gg_",
+  "_selected": "__selected_10ruz_gg_"
 });
-const optionsA11yEnhance = {
-  onNeighborChange: (neighborElement, props) => {
-    if (neighborElement) {
-      neighborElement.focus();
-      if (props.behavior === 'auto') {
-        neighborElement.click();
-      }
-    }
-  },
-  childSelector: ['role', 'tab']
-};
 class TabPanelRoot extends Component {
   constructor(...args) {
     super(...args);
@@ -92,7 +81,18 @@ _defineProperty(TabPanelRoot, "defaultProps", {
   defaultValue: null,
   behavior: 'manual'
 });
-_defineProperty(TabPanelRoot, "enhance", [a11yEnhance(optionsA11yEnhance)]);
+_defineProperty(TabPanelRoot, "enhance", [a11yEnhance({
+  onNeighborChange: (neighborElement, props) => {
+    if (neighborElement) {
+      neighborElement.focus();
+      if (props.behavior === 'auto') {
+        neighborElement.click();
+      }
+    }
+  },
+  childSelector: ['role', 'tab']
+})]);
+;
 function TabPanelItem(props) {
   var _ref2 = arguments[0],
     _ref6;

package/lib/es6/TabPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabPanel.js","names":["Box","createComponent","Component","sstyled","Root","addonTextChildren","a11yEnhance","Text","UikitText","React","style","_sstyled","insert","optionsA11yEnhance","onNeighborChange","neighborElement","props","focus","behavior","click","childSelector","TabPanelRoot","constructor","args","_defineProperty","value","event","handlers","key","preventDefault","uncontrolledProps","getItemProps","index","asProps","isSelected","handleClick","handleKeyDown","buttonRefsList","getItemTextProps","_","render","_ref","_ref5","STabPanel","styles","createElement","cn","_assignProps","defaultValue","TabPanelItem","_ref2","arguments[0]","_ref6","STabPanelItem","Children","addonLeft","addonRight","buttonRef","useRef","_assignProps2","TabPanel","Item","Addon","tag","_ref3","_ref7","SText","ellipsis","_assignProps3","_ref4","_ref8","SAddon","_assignProps4","wrapTabPanel","wrapper"],"sources":["../../src/TabPanel.jsx"],"sourcesContent":["import { Box } from '@semcore/base-components';\nimport { createComponent, Component, sstyled, Root } from '@semcore/core';\nimport addonTextChildren from '@semcore/core/lib/utils/addonTextChildren';\nimport a11yEnhance from '@semcore/core/lib/utils/enhances/a11yEnhance';\nimport { Text as UikitText } from '@semcore/typography';\nimport React from 'react';\n\nimport style from './style/tab-panel.shadow.css';\n\nconst optionsA11yEnhance = {\n  onNeighborChange: (neighborElement, props) => {\n    if (neighborElement) {\n      neighborElement.focus();\n      if (props.behavior === 'auto') {\n        neighborElement.click();\n      }\n    }\n  },\n  childSelector: ['role', 'tab'],\n};\n\nclass TabPanelRoot extends Component {\n  static displayName = 'TabPanel';\n  static style = style;\n  static defaultProps = {\n    defaultValue: null,\n    behavior: 'manual',\n  };\n\n  static enhance = [a11yEnhance(optionsA11yEnhance)];\n\n  buttonRefsList = [];\n\n  uncontrolledProps() {\n    return {\n      value: null,\n    };\n  }\n\n  handleClick = (value) => (event) => {\n    this.handlers.value(value, event);\n  };\n\n  handleKeyDown = (value) => (event) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.handlers.value(value, event);\n    }\n  };\n\n  getItemProps(props, index) {\n    const { value } = this.asProps;\n    const isSelected = value === props.value;\n    return {\n      'selected': isSelected,\n      'onClick': this.handleClick(props.value),\n      'onKeyDown': this.handleKeyDown(props.value),\n      'tabIndex': isSelected ? 0 : -1,\n      'aria-selected': isSelected,\n      'buttonRefsList': this.buttonRefsList,\n      index,\n    };\n  }\n\n  getItemTextProps(_, index) {\n    return {\n      buttonRefsList: this.buttonRefsList,\n      index,\n    };\n  }\n\n  render() {\n    const STabPanel = Root;\n    const { styles } = this.asProps;\n\n    return sstyled(styles)(<STabPanel render={Box} role='tablist' />);\n  }\n}\n\nfunction TabPanelItem(props) {\n  const STabPanelItem = Root;\n  const { Children, styles, addonLeft, addonRight, buttonRefsList, index } = props;\n  const buttonRef = React.useRef();\n\n  buttonRefsList[index] = buttonRef;\n\n  return sstyled(styles)(\n    <STabPanelItem render={Box} type='button' tag='button' tabIndex={0} role='tab' ref={buttonRef}>\n      {addonLeft ? <TabPanel.Item.Addon tag={addonLeft} /> : null}\n      {addonTextChildren(Children, TabPanel.Item.Text, TabPanel.Item.Addon)}\n      {addonRight ? <TabPanel.Item.Addon tag={addonRight} /> : null}\n    </STabPanelItem>,\n  );\n}\n\nfunction Text(props) {\n  const SText = Root;\n  const { styles, ellipsis = true, buttonRefsList, index } = props;\n  return sstyled(styles)(<SText render={UikitText} size={200} ellipsis={ellipsis} medium hint:triggerRef={buttonRefsList[index]} />);\n}\n\nfunction Addon(props) {\n  const SAddon = Root;\n  const { styles } = props;\n  return sstyled(styles)(<SAddon render={Box} tag='span' />);\n}\n\nconst TabPanel = createComponent(TabPanelRoot, {\n  Item: [TabPanelItem, { Text, Addon }],\n});\n\nexport const wrapTabPanel = (wrapper) => wrapper;\n\nexport default TabPanel;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"TabPanel.js","names":["Box","createComponent","Component","sstyled","Root","addonTextChildren","a11yEnhance","Text","UikitText","React","style","_sstyled","insert","TabPanelRoot","constructor","args","_defineProperty","value","event","handlers","key","preventDefault","uncontrolledProps","getItemProps","props","index","asProps","isSelected","handleClick","handleKeyDown","buttonRefsList","getItemTextProps","_","render","_ref","_ref5","STabPanel","styles","createElement","cn","_assignProps","defaultValue","behavior","onNeighborChange","neighborElement","focus","click","childSelector","TabPanelItem","_ref2","arguments[0]","_ref6","STabPanelItem","Children","addonLeft","addonRight","buttonRef","useRef","_assignProps2","TabPanel","Item","Addon","tag","_ref3","_ref7","SText","ellipsis","_assignProps3","_ref4","_ref8","SAddon","_assignProps4","wrapTabPanel","wrapper"],"sources":["../../src/TabPanel.tsx"],"sourcesContent":["import { Box } from '@semcore/base-components';\nimport type { Intergalactic } from '@semcore/core';\nimport { createComponent, Component, sstyled, Root } from '@semcore/core';\nimport addonTextChildren from '@semcore/core/lib/utils/addonTextChildren';\nimport a11yEnhance from '@semcore/core/lib/utils/enhances/a11yEnhance';\nimport { Text as UikitText } from '@semcore/typography';\nimport React from 'react';\n\nimport style from './style/tab-panel.shadow.css';\nimport type { NSTabPanel } from './TabPanel.type';\n\nclass TabPanelRoot extends Component<\n  Intergalactic.InternalTypings.InferComponentProps<NSTabPanel.Component>,\n  typeof TabPanelRoot.enhance,\n  NSTabPanel.Handlers\n> {\n  static displayName = 'TabPanel';\n  static style = style;\n  static defaultProps = {\n    defaultValue: null,\n    behavior: 'manual',\n  };\n\n  static enhance = [\n    a11yEnhance({\n      onNeighborChange: (neighborElement, props) => {\n        if (neighborElement) {\n          neighborElement.focus();\n          if (props.behavior === 'auto') {\n            neighborElement.click();\n          }\n        }\n      },\n      childSelector: ['role', 'tab'],\n    }),\n  ] as const;\n\n  buttonRefsList: Array<React.MutableRefObject<HTMLButtonElement | undefined>> = [];\n\n  uncontrolledProps() {\n    return {\n      value: null,\n    };\n  }\n\n  handleClick = (value: NSTabPanel.Props['value']) => (event: React.MouseEvent<HTMLButtonElement>) => {\n    this.handlers.value(value, event);\n  };\n\n  handleKeyDown = (value: NSTabPanel.Props['value']) => (event: React.KeyboardEvent<HTMLButtonElement>) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.handlers.value(value, event);\n    }\n  };\n\n  getItemProps(props: NSTabPanel.Item.Props, index: number) {\n    const { value } = this.asProps;\n    const isSelected = value === props.value;\n    return {\n      'selected': isSelected,\n      'onClick': this.handleClick(props.value),\n      'onKeyDown': this.handleKeyDown(props.value),\n      'tabIndex': isSelected ? 0 : -1,\n      'aria-selected': isSelected,\n      'buttonRefsList': this.buttonRefsList,\n      index,\n    };\n  }\n\n  getItemTextProps(_: NSTabPanel.Item.Text.Props, index: number) {\n    return {\n      buttonRefsList: this.buttonRefsList,\n      index,\n    };\n  }\n\n  render() {\n    const STabPanel = Root;\n    const { styles } = this.asProps;\n\n    return sstyled(styles)(<STabPanel render={Box} role='tablist' />);\n  }\n};\n\nfunction TabPanelItem(\n  props: Intergalactic.InternalTypings.InferChildComponentProps<\n    NSTabPanel.Item.Component,\n    typeof TabPanelRoot,\n    'Item'\n  >,\n) {\n  const STabPanelItem = Root;\n  const { Children, styles, addonLeft, addonRight, buttonRefsList, index } = props;\n  const buttonRef = React.useRef<HTMLButtonElement>();\n\n  buttonRefsList[index] = buttonRef;\n\n  return sstyled(styles)(\n    <STabPanelItem render={Box} type='button' tag='button' tabIndex={0} role='tab' ref={buttonRef}>\n      {addonLeft ? <TabPanel.Item.Addon tag={addonLeft} /> : null}\n      {addonTextChildren(Children, TabPanel.Item.Text, TabPanel.Item.Addon)}\n      {addonRight ? <TabPanel.Item.Addon tag={addonRight} /> : null}\n    </STabPanelItem>,\n  );\n}\n\nfunction Text(\n  props: Intergalactic.InternalTypings.InferChildComponentProps<\n    NSTabPanel.Item.Text.Component,\n    typeof TabPanelRoot,\n    'ItemText'\n  >,\n) {\n  const SText = Root;\n  const { styles, ellipsis = true, buttonRefsList, index } = props;\n  return sstyled(styles)(<SText render={UikitText} size={200} ellipsis={ellipsis} medium hint:triggerRef={buttonRefsList[index]} />);\n}\n\nfunction Addon(\n  props: Intergalactic.InternalTypings.InferComponentProps<NSTabPanel.Item.Addon.Component>,\n) {\n  const SAddon = Root;\n  const { styles } = props;\n  return sstyled(styles)(<SAddon render={Box} tag='span' />);\n}\n\nconst TabPanel = createComponent(TabPanelRoot, {\n  Item: [TabPanelItem, { Text, Addon }],\n}) as unknown as NSTabPanel.Component;\n\nexport const wrapTabPanel = <PropsExtending extends {}>(wrapper: (\n  props: Intergalactic.InternalTypings.UntypeRefAndTag<\n    Intergalactic.InternalTypings.ComponentPropsNesting<NSTabPanel.WrapperComponent>\n  > &\n  PropsExtending,\n) => React.ReactNode) => wrapper as NSTabPanel.WrapperComponent<PropsExtending>;\n\nexport default TabPanel;\n"],"mappings":"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","ignoreList":[]}

package/lib/es6/TabPanel.type.js

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

package/lib/es6/TabPanel.type.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabPanel.type.js","names":[],"sources":["../../src/TabPanel.type.ts"],"sourcesContent":["import type { Box, BoxProps } from '@semcore/base-components';\nimport type { Intergalactic, PropGetterFn } from '@semcore/core';\nimport type { NSText } from '@semcore/typography';\n\ndeclare namespace NSTabPanel {\n  type Value = string | number | boolean;\n  type Props<V extends NSTabPanel.Value = NSTabPanel.Value> = BoxProps & {\n    /** Is invoked when changing the selection */\n    onChange?:\n      | ((value: V, e?: React.SyntheticEvent<HTMLButtonElement>) => void)\n      | React.Dispatch<React.SetStateAction<V>>;\n    /** Value of the selected tab */\n    value?: V;\n    /** Default value of the selected tab\n     * @default null\n     * */\n    defaultValue?: V;\n    /**\n     * Behavior of tabs.\n     * In `auto`, changes the tab immediately when press arrow.\n     * In `manual`, needs to press `space` or `enter` for select a choice.\n     * @default 'auto'\n     */\n    behavior?: 'auto' | 'manual';\n  };\n  type Ctx = {\n    getItemProps: PropGetterFn;\n  };\n  type Handlers = {\n    value: null;\n  };\n\n  namespace Item {\n    type Props = BoxProps & {\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?: NSTabPanel.Value;\n      /** Left addon tag  */\n      addonLeft?: React.ElementType;\n      /** Right addon tag  */\n      addonRight?: React.ElementType;\n    };\n\n    namespace Text {\n        type Props = NSText.Props;\n        type Component = NSText.Component;\n    }\n\n    namespace Addon {\n        type Component = typeof Box;\n    }\n\n    type Component = Intergalactic.Component<'div', Props, {}, [handlers: NSTabPanel.Handlers]> & {\n      Text: Text.Component;\n      Addon: Addon.Component;\n    };\n  }\n\n  type WrapperComponent<PropsExtending = {}> = (<\n    V extends NSTabPanel.Value,\n    Tag extends Intergalactic.Tag = 'div',\n  >(\n    props: Intergalactic.InternalTypings.ComponentProps<\n      Tag,\n      'div',\n      Props<V>,\n      Ctx,\n      [handlers: Handlers]\n    > &\n    PropsExtending,\n  ) => Intergalactic.InternalTypings.ComponentRenderingResults) & Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', Props>;\n\n  type Component = WrapperComponent & {\n    Item: Item.Component;\n  };\n}\n\n/** @deprecated It will be removed in v18. */\nexport type TabPanelValue = NSTabPanel.Value;\n/** @deprecated It will be removed in v18. */\nexport type TabPanelProps<T extends TabPanelValue = TabPanelValue> = NSTabPanel.Props<T>;\n/** @deprecated It will be removed in v18. */\nexport type TabPanelItemProps = NSTabPanel.Item.Props;\n/** @deprecated It will be removed in v18. */\nexport type TabPanelContext = NSTabPanel.Ctx;\n/** @deprecated It will be removed in v18. */\nexport type TabPanelHandlers = NSTabPanel.Handlers;\n\nexport type { NSTabPanel };\n"],"mappings":"","ignoreList":[]}

package/lib/es6/index.js

@@ -1,3 +1,3 @@
-export { default } from './TabPanel';
-export * from './TabPanel';
+export { default, wrapTabPanel } from './TabPanel';
+export * from './TabPanel.type';
 //# sourceMappingURL=index.js.map

package/lib/es6/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["default"],"sources":["../../src/index.js"],"sourcesContent":["export { default } from './TabPanel';\nexport * from './TabPanel';\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,YAAY;AACpC,cAAc,YAAY","ignoreList":[]}
+{"version":3,"file":"index.js","names":["default","wrapTabPanel"],"sources":["../../src/index.ts"],"sourcesContent":["export { default, wrapTabPanel } from './TabPanel';\nexport * from './TabPanel.type';\n"],"mappings":"AAAA,SAASA,OAAO,EAAEC,YAAY,QAAQ,YAAY;AAClD,cAAc,iBAAiB","ignoreList":[]}

package/lib/esm/TabPanel.mjs

@@ -10,30 +10,19 @@ const style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    '.___STabPanel_ispzt_gg_{display:flex;width:100%;max-width:100%}.___STabPanel_ispzt_gg_::after{content:"";position:relative;bottom:-1px;flex:1;border-top:1px solid transparent;border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabPanelItem_ispzt_gg_{position:relative;bottom:-1px;display:inline-flex;min-width:0;height:32px;color:var(--intergalactic-text-secondary, #6c6e79);border:1px solid transparent;border-bottom:none;border-radius:var(--intergalactic-control-rounded, 6px) var(--intergalactic-control-rounded, 6px)0 0;background:0 0;align-items:center;justify-content:center;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-sizing:border-box;padding:0 0 1px;margin:0;box-shadow:none;-webkit-text-decoration:none;text-decoration:none;-webkit-tap-highlight-color:transparent;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer}.___STabPanelItem_ispzt_gg_::-moz-focus-inner{border:0;padding:0}.___STabPanelItem_ispzt_gg_:active{-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STabPanelItem_ispzt_gg_:hover{-webkit-text-decoration:none;text-decoration:none;color:var(--intergalactic-text-primary, #191b23)}}.___STabPanelItem_ispzt_gg_::after{content:"";position:absolute;left:-1px;bottom:0;width:calc(100% + 2px);border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabPanelItem_ispzt_gg_.__disabled_ispzt_gg_{cursor:default;pointer-events:none}.___STabPanelItem_ispzt_gg_.__disabled_ispzt_gg_ .___SAddon_ispzt_gg_,.___STabPanelItem_ispzt_gg_.__disabled_ispzt_gg_ .___SText_ispzt_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3)}.___STabPanelItem_ispzt_gg_.__selected_ispzt_gg_{color:var(--intergalactic-text-link, #006dca);border-color:var(--intergalactic-border-primary, #c4c7cf);flex-shrink:0}@media (hover:hover){.___STabPanelItem_ispzt_gg_.__selected_ispzt_gg_:hover{color:var(--intergalactic-text-link-hover-active, #044792)}}.___STabPanelItem_ispzt_gg_.__selected_ispzt_gg_::after{border-bottom:none}.___SText_ispzt_gg_{margin:auto var(--intergalactic-spacing-2x, 8px)}.___SAddon_ispzt_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_ispzt_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SAddon_ispzt_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SAddon_ispzt_gg_:only-child{margin-right:var(--intergalactic-spacing-2x, 8px);margin-left:var(--intergalactic-spacing-2x, 8px)}',
+    '.___STabPanel_10ruz_gg_{display:flex;width:100%;max-width:100%}.___STabPanel_10ruz_gg_::after{content:"";position:relative;bottom:-1px;flex:1;border-top:1px solid transparent;border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabPanelItem_10ruz_gg_{position:relative;bottom:-1px;display:inline-flex;min-width:0;height:32px;color:var(--intergalactic-text-secondary, #6c6e79);border:1px solid transparent;border-bottom:none;border-radius:var(--intergalactic-control-rounded, 6px) var(--intergalactic-control-rounded, 6px)0 0;background:0 0;align-items:center;justify-content:center;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-sizing:border-box;padding:0 0 1px;margin:0;box-shadow:none;-webkit-text-decoration:none;text-decoration:none;-webkit-tap-highlight-color:transparent;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer}.___STabPanelItem_10ruz_gg_::-moz-focus-inner{border:0;padding:0}.___STabPanelItem_10ruz_gg_:active{-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STabPanelItem_10ruz_gg_:hover{-webkit-text-decoration:none;text-decoration:none;color:var(--intergalactic-text-primary, #191b23)}}.___STabPanelItem_10ruz_gg_::after{content:"";position:absolute;left:-1px;bottom:0;width:calc(100% + 2px);border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabPanelItem_10ruz_gg_.__disabled_10ruz_gg_{cursor:default;pointer-events:none}.___STabPanelItem_10ruz_gg_.__disabled_10ruz_gg_ .___SAddon_10ruz_gg_,.___STabPanelItem_10ruz_gg_.__disabled_10ruz_gg_ .___SText_10ruz_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3)}.___STabPanelItem_10ruz_gg_.__selected_10ruz_gg_{color:var(--intergalactic-text-link, #006dca);border-color:var(--intergalactic-border-primary, #c4c7cf);flex-shrink:0}@media (hover:hover){.___STabPanelItem_10ruz_gg_.__selected_10ruz_gg_:hover{color:var(--intergalactic-text-link-hover-active, #044792)}}.___STabPanelItem_10ruz_gg_.__selected_10ruz_gg_::after{border-bottom:none}.___SText_10ruz_gg_{margin:auto var(--intergalactic-spacing-2x, 8px)}.___SAddon_10ruz_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_10ruz_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SAddon_10ruz_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SAddon_10ruz_gg_:only-child{margin-right:var(--intergalactic-spacing-2x, 8px);margin-left:var(--intergalactic-spacing-2x, 8px)}',
     /*__inner_css_end__*/
-    "ispzt_gg_"
+    "10ruz_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SText": "___SText_ispzt_gg_",
-    "__SAddon": "___SAddon_ispzt_gg_",
-    "__STabPanel": "___STabPanel_ispzt_gg_",
-    "__STabPanelItem": "___STabPanelItem_ispzt_gg_",
-    "_disabled": "__disabled_ispzt_gg_",
-    "_selected": "__selected_ispzt_gg_"
+    "__SText": "___SText_10ruz_gg_",
+    "__SAddon": "___SAddon_10ruz_gg_",
+    "__STabPanel": "___STabPanel_10ruz_gg_",
+    "__STabPanelItem": "___STabPanelItem_10ruz_gg_",
+    "_disabled": "__disabled_10ruz_gg_",
+    "_selected": "__selected_10ruz_gg_"
   })
 );
-const optionsA11yEnhance = {
-  onNeighborChange: (neighborElement, props) => {
-    if (neighborElement) {
-      neighborElement.focus();
-      if (props.behavior === "auto") {
-        neighborElement.click();
-      }
-    }
-  },
-  childSelector: ["role", "tab"]
-};
 class TabPanelRoot extends Component {
   constructor(...args) {
     super(...args);
@@ -93,7 +82,18 @@ _defineProperty(TabPanelRoot, "defaultProps", {
   defaultValue: null,
   behavior: "manual"
 });
-_defineProperty(TabPanelRoot, "enhance", [a11yEnhance(optionsA11yEnhance)]);
+_defineProperty(TabPanelRoot, "enhance", [a11yEnhance({
+  onNeighborChange: (neighborElement, props) => {
+    if (neighborElement) {
+      neighborElement.focus();
+      if (props.behavior === "auto") {
+        neighborElement.click();
+      }
+    }
+  },
+  childSelector: ["role", "tab"]
+})]);
+;
 function TabPanelItem(props) {
   var _ref2 = arguments[0], _ref6;
   const STabPanelItem = Box;

package/lib/esm/TabPanel.type.mjs

@@ -0,0 +1 @@
+

package/lib/esm/index.mjs

@@ -1,4 +1,5 @@
 import { default as default2, wrapTabPanel } from "./TabPanel.mjs";
+import "./TabPanel.type.mjs";
 export {
   default2 as default,
   wrapTabPanel

package/lib/types/TabPanel.d.ts

@@ -0,0 +1,6 @@
+import type { Intergalactic } from '@semcore/core';
+import React from 'react';
+import type { NSTabPanel } from './TabPanel.type';
+declare const TabPanel: NSTabPanel.Component;
+export declare const wrapTabPanel: <PropsExtending extends {}>(wrapper: (props: Intergalactic.InternalTypings.UntypeRefAndTag<Intergalactic.InternalTypings.ComponentPropsNesting<NSTabPanel.WrapperComponent>> & PropsExtending) => React.ReactNode) => NSTabPanel.WrapperComponent<PropsExtending>;
+export default TabPanel;

package/lib/types/TabPanel.type.d.ts

@@ -0,0 +1,71 @@
+import type { Box, BoxProps } from '@semcore/base-components';
+import type { Intergalactic, PropGetterFn } from '@semcore/core';
+import type { NSText } from '@semcore/typography';
+declare namespace NSTabPanel {
+    type Value = string | number | boolean;
+    type Props<V extends NSTabPanel.Value = NSTabPanel.Value> = BoxProps & {
+        /** Is invoked when changing the selection */
+        onChange?: ((value: V, e?: React.SyntheticEvent<HTMLButtonElement>) => void) | React.Dispatch<React.SetStateAction<V>>;
+        /** Value of the selected tab */
+        value?: V;
+        /** Default value of the selected tab
+         * @default null
+         * */
+        defaultValue?: V;
+        /**
+         * Behavior of tabs.
+         * In `auto`, changes the tab immediately when press arrow.
+         * In `manual`, needs to press `space` or `enter` for select a choice.
+         * @default 'auto'
+         */
+        behavior?: 'auto' | 'manual';
+    };
+    type Ctx = {
+        getItemProps: PropGetterFn;
+    };
+    type Handlers = {
+        value: null;
+    };
+    namespace Item {
+        type Props = BoxProps & {
+            /** Makes a tab selected. This property is determined automatically depending on the value. */
+            selected?: boolean;
+            /** Disabled state */
+            disabled?: boolean;
+            /** Tab value */
+            value?: NSTabPanel.Value;
+            /** Left addon tag  */
+            addonLeft?: React.ElementType;
+            /** Right addon tag  */
+            addonRight?: React.ElementType;
+        };
+        namespace Text {
+            type Props = NSText.Props;
+            type Component = NSText.Component;
+        }
+        namespace Addon {
+            type Component = typeof Box;
+        }
+        type Component = Intergalactic.Component<'div', Props, {}, [handlers: NSTabPanel.Handlers]> & {
+            Text: Text.Component;
+            Addon: Addon.Component;
+        };
+    }
+    type WrapperComponent<PropsExtending = {}> = (<V extends NSTabPanel.Value, Tag extends Intergalactic.Tag = 'div'>(props: Intergalactic.InternalTypings.ComponentProps<Tag, 'div', Props<V>, Ctx, [
+        handlers: Handlers
+    ]> & PropsExtending) => Intergalactic.InternalTypings.ComponentRenderingResults) & Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', Props>;
+    type Component = WrapperComponent & {
+        Item: Item.Component;
+    };
+}
+/** @deprecated It will be removed in v18. */
+export type TabPanelValue = NSTabPanel.Value;
+/** @deprecated It will be removed in v18. */
+export type TabPanelProps<T extends TabPanelValue = TabPanelValue> = NSTabPanel.Props<T>;
+/** @deprecated It will be removed in v18. */
+export type TabPanelItemProps = NSTabPanel.Item.Props;
+/** @deprecated It will be removed in v18. */
+export type TabPanelContext = NSTabPanel.Ctx;
+/** @deprecated It will be removed in v18. */
+export type TabPanelHandlers = NSTabPanel.Handlers;
+export type { NSTabPanel };

package/lib/types/index.d.ts

@@ -1,81 +1,2 @@
-import type { Box, BoxProps } from '@semcore/base-components';
-import type { PropGetterFn, Intergalactic } from '@semcore/core';
-import type { Text } from '@semcore/typography';
-import type React from 'react';
-
-export type TabPanelValue = string | number | boolean;
-
-export type TabPanelProps<T extends TabPanelValue = TabPanelValue> = BoxProps & {
-  /** Is invoked when changing the selection */
-  onChange?:
-    | ((value: T, e?: React.SyntheticEvent<HTMLButtonElement>) => void)
-    | React.Dispatch<React.SetStateAction<T>>;
-  /** Value of the selected tab */
-  value?: T;
-  /** Default value of the selected tab
-   * @default null
-   * */
-  defaultValue?: T;
-  /**
-   * Behavior of tabs.
-   * In `auto`, changes the tab immediately when press arrow.
-   * In `manual`, needs to press `space` or `enter` for select a choice.
-   * @default 'auto'
-   */
-  behavior?: 'auto' | 'manual';
-};
-
-export type TabPanelItemProps = BoxProps & {
-  /** 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 type TabPanelContext = {
-  getItemProps: PropGetterFn;
-};
-
-export type TabPanelHandlers = {
-  value: (value: TabPanelValue) => void;
-};
-
-type IntergalacticTabPanelComponent<PropsExtending = {}> = (<
-  Value extends TabPanelValue,
-  Tag extends Intergalactic.Tag = 'div',
->(
-  props: Intergalactic.InternalTypings.ComponentProps<
-    Tag,
-    'div',
-    TabPanelProps<Value>,
-    TabPanelContext,
-    [handlers: TabPanelHandlers]
-  > &
-  PropsExtending,
-) => Intergalactic.InternalTypings.ComponentRenderingResults) &
-Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', TabPanelProps>;
-
-declare const TabPanel: IntergalacticTabPanelComponent & {
-  Item: Intergalactic.Component<'div', TabPanelItemProps, {}, [handlers: TabPanelHandlers]> & {
-    Text: typeof Text;
-    Addon: typeof Box;
-  };
-};
-
-declare const wrapTabPanel: <PropsExtending extends {}>(
-  wrapper: (
-    props: Intergalactic.InternalTypings.UntypeRefAndTag<
-      Intergalactic.InternalTypings.ComponentPropsNesting<IntergalacticTabPanelComponent>
-    > &
-    PropsExtending,
-  ) => React.ReactNode,
-) => IntergalacticTabPanelComponent<PropsExtending>;
-export { wrapTabPanel };
-
-export default TabPanel;
+export { default, wrapTabPanel } from './TabPanel';
+export * from './TabPanel.type';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/tab-panel",
   "description": "Semrush TabPanel Component",
-  "version": "17.0.1",
+  "version": "17.0.2-prerelease.0",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -14,10 +14,10 @@
     "require": "./lib/cjs/index.js"
   },
   "dependencies": {
-    "@semcore/typography": "^17.0.1"
+    "@semcore/typography": "^17.0.2-prerelease.0"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^17.0.1"
+    "@semcore/base-components": "^17.0.2"
   },
   "repository": {
     "type": "git",
@@ -25,12 +25,12 @@
     "directory": "semcore/tab-panel"
   },
   "devDependencies": {
-    "@semcore/core": "17.0.1",
-    "@semcore/base-components": "17.0.1",
     "@semcore/testing-utils": "1.0.0",
-    "@semcore/icon": "17.0.1"
+    "@semcore/base-components": "17.0.2-prerelease.0",
+    "@semcore/core": "17.0.1",
+    "@semcore/icon": "17.0.1-prerelease.0"
   },
   "scripts": {
-    "build": "pnpm semcore-builder --source=js && pnpm vite build"
+    "build": "pnpm semcore-builder && pnpm vite build"
   }
 }

package/vite.config.ts

@@ -7,7 +7,7 @@ export default mergeConfig(
   defineConfig({
     build: {
       lib: {
-        entry: './src/index.js',
+        entry: './src/index.ts',
       },
       rollupOptions: {
         external: ['react', 'react-dom', 'react/jsx-runtime', /@babel\/runtime\/*/, /@semcore\/*/],

package/lib/cjs/index.d.js

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import type { Box, BoxProps } from '@semcore/base-components';\nimport type { PropGetterFn, Intergalactic } from '@semcore/core';\nimport type { Text } from '@semcore/typography';\nimport type React from 'react';\n\nexport type TabPanelValue = string | number | boolean;\n\nexport type TabPanelProps<T extends TabPanelValue = TabPanelValue> = BoxProps & {\n  /** Is invoked when changing the selection */\n  onChange?:\n    | ((value: T, e?: React.SyntheticEvent<HTMLButtonElement>) => void)\n    | React.Dispatch<React.SetStateAction<T>>;\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   * Behavior of tabs.\n   * In `auto`, changes the tab immediately when press arrow.\n   * In `manual`, needs to press `space` or `enter` for select a choice.\n   * @default 'auto'\n   */\n  behavior?: 'auto' | 'manual';\n};\n\nexport type TabPanelItemProps = BoxProps & {\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 type TabPanelContext = {\n  getItemProps: PropGetterFn;\n};\n\nexport type TabPanelHandlers = {\n  value: (value: TabPanelValue) => void;\n};\n\ntype IntergalacticTabPanelComponent<PropsExtending = {}> = (<\n  Value extends TabPanelValue,\n  Tag extends Intergalactic.Tag = 'div',\n>(\n  props: Intergalactic.InternalTypings.ComponentProps<\n    Tag,\n    'div',\n    TabPanelProps<Value>,\n    TabPanelContext,\n    [handlers: TabPanelHandlers]\n  > &\n  PropsExtending,\n) => Intergalactic.InternalTypings.ComponentRenderingResults) &\nIntergalactic.InternalTypings.ComponentAdditive<'div', 'div', TabPanelProps>;\n\ndeclare const TabPanel: IntergalacticTabPanelComponent & {\n  Item: Intergalactic.Component<'div', TabPanelItemProps, {}, [handlers: TabPanelHandlers]> & {\n    Text: typeof Text;\n    Addon: typeof Box;\n  };\n};\n\ndeclare const wrapTabPanel: <PropsExtending extends {}>(\n  wrapper: (\n    props: Intergalactic.InternalTypings.UntypeRefAndTag<\n      Intergalactic.InternalTypings.ComponentPropsNesting<IntergalacticTabPanelComponent>\n    > &\n    PropsExtending,\n  ) => React.ReactNode,\n) => IntergalacticTabPanelComponent<PropsExtending>;\nexport { wrapTabPanel };\n\nexport default TabPanel;\n"],"mappings":"","ignoreList":[]}

package/lib/es6/index.d.js

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import type { Box, BoxProps } from '@semcore/base-components';\nimport type { PropGetterFn, Intergalactic } from '@semcore/core';\nimport type { Text } from '@semcore/typography';\nimport type React from 'react';\n\nexport type TabPanelValue = string | number | boolean;\n\nexport type TabPanelProps<T extends TabPanelValue = TabPanelValue> = BoxProps & {\n  /** Is invoked when changing the selection */\n  onChange?:\n    | ((value: T, e?: React.SyntheticEvent<HTMLButtonElement>) => void)\n    | React.Dispatch<React.SetStateAction<T>>;\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   * Behavior of tabs.\n   * In `auto`, changes the tab immediately when press arrow.\n   * In `manual`, needs to press `space` or `enter` for select a choice.\n   * @default 'auto'\n   */\n  behavior?: 'auto' | 'manual';\n};\n\nexport type TabPanelItemProps = BoxProps & {\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 type TabPanelContext = {\n  getItemProps: PropGetterFn;\n};\n\nexport type TabPanelHandlers = {\n  value: (value: TabPanelValue) => void;\n};\n\ntype IntergalacticTabPanelComponent<PropsExtending = {}> = (<\n  Value extends TabPanelValue,\n  Tag extends Intergalactic.Tag = 'div',\n>(\n  props: Intergalactic.InternalTypings.ComponentProps<\n    Tag,\n    'div',\n    TabPanelProps<Value>,\n    TabPanelContext,\n    [handlers: TabPanelHandlers]\n  > &\n  PropsExtending,\n) => Intergalactic.InternalTypings.ComponentRenderingResults) &\nIntergalactic.InternalTypings.ComponentAdditive<'div', 'div', TabPanelProps>;\n\ndeclare const TabPanel: IntergalacticTabPanelComponent & {\n  Item: Intergalactic.Component<'div', TabPanelItemProps, {}, [handlers: TabPanelHandlers]> & {\n    Text: typeof Text;\n    Addon: typeof Box;\n  };\n};\n\ndeclare const wrapTabPanel: <PropsExtending extends {}>(\n  wrapper: (\n    props: Intergalactic.InternalTypings.UntypeRefAndTag<\n      Intergalactic.InternalTypings.ComponentPropsNesting<IntergalacticTabPanelComponent>\n    > &\n    PropsExtending,\n  ) => React.ReactNode,\n) => IntergalacticTabPanelComponent<PropsExtending>;\nexport { wrapTabPanel };\n\nexport default TabPanel;\n"],"mappings":"","ignoreList":[]}