@semcore/tab-panel 4.43.0-prerelease.1 → 4.43.0-prerelease.5

package/lib/es6/TabPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabPanel.js","names":["React","createComponent","Component","sstyled","Root","Box","addonTextChildren","a11yEnhance","keyboardFocusEnhance","style","_sstyled","insert","optionsA11yEnhance","onNeighborChange","neighborElement","props","focus","behavior","click","childSelector","TabPanelRoot","_Component","_inherits","_super","_createSuper","_this","_classCallCheck","_len","arguments","length","args","Array","_key","call","apply","concat","_defineProperty","_assertThisInitialized","value","event","handlers","key","preventDefault","_createClass","uncontrolledProps","getItemProps","index","asProps","isSelected","selected","onClick","handleClick","onKeyDown","handleKeyDown","tabIndex","render","_ref","_ref5","STabPanel","styles","createElement","cn","_objectSpread","_assignProps","defaultValue","TabPanelItem","_ref2","arguments[0]","_ref6","STabPanelItem","Children","addonLeft","addonRight","_assignProps2","TabPanel","Item","Addon","tag","Text","enhance","_ref3","_ref7","SText","_assignProps3","_ref4","_ref8","SAddon","_assignProps4","wrapTabPanel","wrapper"],"sources":["../../src/TabPanel.jsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport addonTextChildren from '@semcore/utils/lib/addonTextChildren';\nimport a11yEnhance from '@semcore/utils/lib/enhances/a11yEnhance';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\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  static enhance = [a11yEnhance(optionsA11yEnhance)];\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    };\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 } = props;\n\n  return sstyled(styles)(\n    <STabPanelItem render={Box} type='button' tag='button' role='tab'>\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\nTabPanelItem.enhance = [keyboardFocusEnhance()];\n\nfunction Text(props) {\n  const SText = Root;\n  const { styles } = props;\n  return sstyled(styles)(<SText render={Box} tag='span' />);\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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"}
+{"version":3,"file":"TabPanel.js","names":["Box","createComponent","Component","sstyled","Root","addonTextChildren","a11yEnhance","Text","UikitText","React","style","_sstyled","insert","TabPanelRoot","_Component","_this","_classCallCheck","_len","arguments","length","args","Array","_key","_callSuper","concat","_defineProperty","value","event","handlers","key","preventDefault","_inherits","_createClass","uncontrolledProps","getItemProps","props","index","asProps","isSelected","handleClick","handleKeyDown","buttonRefsList","getItemTextProps","_","render","_ref","_ref5","STabPanel","styles","createElement","cn","_objectSpread","_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","_props$ellipsis","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"}
+{"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/es6/style/tab-panel.shadow.css

@@ -35,27 +35,18 @@ STabPanelItem {
   box-shadow: none;
   text-decoration: none;
   -webkit-tap-highlight-color: transparent;
-  outline: 0;
   text-align: center;
   vertical-align: middle;
   font-family: inherit;
   cursor: pointer;
 
-  & SText {
-    font-size: var(--intergalactic-fs-200, 14px);
-    line-height: var(--intergalactic-lh-200, 142%);
-    font-weight: var(--intergalactic-medium, 500);
-  }
-
   &::-moz-focus-inner {
     border: none;
     padding: 0;
   }
 
   &:active,
-  &:hover,
-  &:focus {
-    outline: 0;
+  &:hover {
     text-decoration: none;
   }
 
@@ -84,17 +75,13 @@ STabPanelItem[disabled] {
   }
 }
 
-STabPanelItem[keyboardFocused] {
-  box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px oklch(0.376 0.247 264.2 / 0.441));
-}
-
 STabPanelItem[selected] {
-  color: var(--intergalactic-text-link, oklch(0.53 0.214 263.4));
+  color: var(--intergalactic-text-link, oklch(0.53 0.21 263));
   border-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
   flex-shrink: 0;
 
   &:hover {
-    color: var(--intergalactic-text-link-hover-active, oklch(0.51 0.206 263.4));
+    color: var(--intergalactic-text-link-hover-active, oklch(0.51 0.202 263));
   }
 
   &::after {
@@ -103,11 +90,7 @@ STabPanelItem[selected] {
 }
 
 SText {
-  display: inline-block;
   margin: auto var(--intergalactic-spacing-2x, 8px);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
 }
 
 SAddon {
@@ -127,4 +110,4 @@ SAddon:not(:only-child):last-child {
 SAddon:only-child {
   margin-right: var(--intergalactic-spacing-2x, 8px);
   margin-left: var(--intergalactic-spacing-2x, 8px);
-}
+}

package/lib/esm/TabPanel.mjs

@@ -1,63 +1,48 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _callSuper from "@babel/runtime/helpers/esm/callSuper";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { sstyled } from "@semcore/utils/lib/core/index";
-import createComponent, { sstyled as sstyled$1, assignProps, Component } from "@semcore/core";
+import { sstyled, assignProps, Component, createComponent } from "@semcore/core";
+import { Box } from "@semcore/base-components";
+import addonTextChildren from "@semcore/core/lib/utils/addonTextChildren";
+import a11yEnhance from "@semcore/core/lib/utils/enhances/a11yEnhance";
+import { Text as Text$1 } from "@semcore/typography";
 import React from "react";
-import { Box } from "@semcore/flex-box";
-import addonTextChildren from "@semcore/utils/lib/addonTextChildren";
-import a11yEnhance from "@semcore/utils/lib/enhances/a11yEnhance";
-import keyboardFocusEnhance from "@semcore/utils/lib/enhances/keyboardFocusEnhance";
 /*!__reshadow-styles__:"./style/tab-panel.shadow.css"*/
 var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    '.___STabPanel_1lfx6_gg_{display:flex;width:100%;max-width:100%}.___STabPanel_1lfx6_gg_::after{content:"";position:relative;bottom:-1px;flex:1;border-top:1px solid transparent;border-bottom:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@supports (color:color(display-p3 0 0 0)){.___STabPanel_1lfx6_gg_::after{border-bottom:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___STabPanel_1lfx6_gg_::after{border-bottom:1px solid var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}.___STabPanelItem_1lfx6_gg_{position:relative;bottom:-1px;display:inline-flex;min-width:0;height:32px;color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583));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;outline:0;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer}@supports (color:color(display-p3 0 0 0)){.___STabPanelItem_1lfx6_gg_{color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583))}@media (color-gamut:p3){.___STabPanelItem_1lfx6_gg_{color:var(--intergalactic-text-secondary, color(display-p3 0.00228 0.01289 0.00252 / 0.583))}}}.___STabPanelItem_1lfx6_gg_ .___SText_1lfx6_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%);font-weight:var(--intergalactic-medium, 500)}.___STabPanelItem_1lfx6_gg_::-moz-focus-inner{border:0;padding:0}.___STabPanelItem_1lfx6_gg_:active,.___STabPanelItem_1lfx6_gg_:focus{outline:0;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STabPanelItem_1lfx6_gg_:hover{outline:0;-webkit-text-decoration:none;text-decoration:none;color:var(--intergalactic-text-primary, rgba(1, 5, 0, 0.899))}}.___STabPanelItem_1lfx6_gg_::after{content:"";position:absolute;left:-1px;bottom:0;width:calc(100% + 2px);border-bottom:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@supports (color:color(display-p3 0 0 0)){.___STabPanelItem_1lfx6_gg_::after{border-bottom:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___STabPanelItem_1lfx6_gg_::after{border-bottom:1px solid var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}.___STabPanelItem_1lfx6_gg_.__disabled_1lfx6_gg_{cursor:default;pointer-events:none}.___STabPanelItem_1lfx6_gg_.__disabled_1lfx6_gg_ .___SAddon_1lfx6_gg_,.___STabPanelItem_1lfx6_gg_.__disabled_1lfx6_gg_ .___SText_1lfx6_gg_{opacity:var(--intergalactic-disabled-opacity, 0.4)}.___STabPanelItem_1lfx6_gg_.__keyboardFocused_1lfx6_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 18, 193, 0.441))}.___STabPanelItem_1lfx6_gg_.__selected_1lfx6_gg_{color:var(--intergalactic-text-link, rgb(36, 93, 229));border-color:var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161));flex-shrink:0}@supports (color:color(display-p3 0 0 0)){.___STabPanelItem_1lfx6_gg_.__selected_1lfx6_gg_{border-color:var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___STabPanelItem_1lfx6_gg_.__selected_1lfx6_gg_{border-color:var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}@media (hover:hover){.___STabPanelItem_1lfx6_gg_.__selected_1lfx6_gg_:hover{color:var(--intergalactic-text-link-hover-active, rgb(34, 88, 217))}}.___STabPanelItem_1lfx6_gg_.__selected_1lfx6_gg_::after{border-bottom:none}.___SText_1lfx6_gg_{display:inline-block;margin:auto var(--intergalactic-spacing-2x, 8px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SAddon_1lfx6_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_1lfx6_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SAddon_1lfx6_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SAddon_1lfx6_gg_:only-child{margin-right:var(--intergalactic-spacing-2x, 8px);margin-left:var(--intergalactic-spacing-2x, 8px)}',
+    '.___STabPanel_13pnv_gg_{display:flex;width:100%;max-width:100%}.___STabPanel_13pnv_gg_::after{content:"";position:relative;bottom:-1px;flex:1;border-top:1px solid transparent;border-bottom:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@supports (color:color(display-p3 0 0 0%)){.___STabPanel_13pnv_gg_::after{border-bottom:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___STabPanel_13pnv_gg_::after{border-bottom:1px solid var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}.___STabPanelItem_13pnv_gg_{position:relative;bottom:-1px;display:inline-flex;min-width:0;height:32px;color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583));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}@supports (color:color(display-p3 0 0 0%)){.___STabPanelItem_13pnv_gg_{color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583))}@media (color-gamut:p3){.___STabPanelItem_13pnv_gg_{color:var(--intergalactic-text-secondary, color(display-p3 0.00228 0.01289 0.00252 / 0.583))}}}.___STabPanelItem_13pnv_gg_::-moz-focus-inner{border:0;padding:0}.___STabPanelItem_13pnv_gg_:active{-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STabPanelItem_13pnv_gg_:hover{-webkit-text-decoration:none;text-decoration:none;color:var(--intergalactic-text-primary, rgba(1, 5, 0, 0.899))}}.___STabPanelItem_13pnv_gg_::after{content:"";position:absolute;left:-1px;bottom:0;width:calc(100% + 2px);border-bottom:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@supports (color:color(display-p3 0 0 0%)){.___STabPanelItem_13pnv_gg_::after{border-bottom:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___STabPanelItem_13pnv_gg_::after{border-bottom:1px solid var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}.___STabPanelItem_13pnv_gg_.__disabled_13pnv_gg_{cursor:default;pointer-events:none}.___STabPanelItem_13pnv_gg_.__disabled_13pnv_gg_ .___SAddon_13pnv_gg_,.___STabPanelItem_13pnv_gg_.__disabled_13pnv_gg_ .___SText_13pnv_gg_{opacity:var(--intergalactic-disabled-opacity, 0.4)}.___STabPanelItem_13pnv_gg_.__selected_13pnv_gg_{color:var(--intergalactic-text-link, rgb(35, 95, 226));border-color:var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161));flex-shrink:0}@supports (color:color(display-p3 0 0 0%)){.___STabPanelItem_13pnv_gg_.__selected_13pnv_gg_{border-color:var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___STabPanelItem_13pnv_gg_.__selected_13pnv_gg_{border-color:var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}@media (hover:hover){.___STabPanelItem_13pnv_gg_.__selected_13pnv_gg_:hover{color:var(--intergalactic-text-link-hover-active, rgb(33, 89, 215))}}.___STabPanelItem_13pnv_gg_.__selected_13pnv_gg_::after{border-bottom:none}.___SText_13pnv_gg_{margin:auto var(--intergalactic-spacing-2x, 8px)}.___SAddon_13pnv_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_13pnv_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SAddon_13pnv_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SAddon_13pnv_gg_:only-child{margin-right:var(--intergalactic-spacing-2x, 8px);margin-left:var(--intergalactic-spacing-2x, 8px)}',
     /*__inner_css_end__*/
-    "1lfx6_gg_"
+    "13pnv_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__STabPanelItem": "___STabPanelItem_1lfx6_gg_",
-    "_keyboardFocused": "__keyboardFocused_1lfx6_gg_",
-    "__SText": "___SText_1lfx6_gg_",
-    "__SAddon": "___SAddon_1lfx6_gg_",
-    "__STabPanel": "___STabPanel_1lfx6_gg_",
-    "_disabled": "__disabled_1lfx6_gg_",
-    "_selected": "__selected_1lfx6_gg_"
+    "__SText": "___SText_13pnv_gg_",
+    "__SAddon": "___SAddon_13pnv_gg_",
+    "__STabPanel": "___STabPanel_13pnv_gg_",
+    "__STabPanelItem": "___STabPanelItem_13pnv_gg_",
+    "_disabled": "__disabled_13pnv_gg_",
+    "_selected": "__selected_13pnv_gg_"
   })
 );
-var optionsA11yEnhance = {
-  onNeighborChange: function onNeighborChange(neighborElement, props) {
-    if (neighborElement) {
-      neighborElement.focus();
-      if (props.behavior === "auto") {
-        neighborElement.click();
-      }
-    }
-  },
-  childSelector: ["role", "tab"]
-};
-var TabPanelRoot = /* @__PURE__ */ function(_Component) {
-  _inherits(TabPanelRoot2, _Component);
-  var _super = _createSuper(TabPanelRoot2);
+var TabPanelRoot = /* @__PURE__ */ (function(_Component) {
   function TabPanelRoot2() {
     var _this;
     _classCallCheck(this, TabPanelRoot2);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-    _this = _super.call.apply(_super, [this].concat(args));
-    _defineProperty(_assertThisInitialized(_this), "handleClick", function(value) {
+    _this = _callSuper(this, TabPanelRoot2, [].concat(args));
+    _defineProperty(_this, "buttonRefsList", []);
+    _defineProperty(_this, "handleClick", function(value) {
       return function(event) {
         _this.handlers.value(value, event);
       };
     });
-    _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function(value) {
+    _defineProperty(_this, "handleKeyDown", function(value) {
       return function(event) {
         if (event.key === "Enter" || event.key === " ") {
           event.preventDefault();
@@ -67,7 +52,8 @@ var TabPanelRoot = /* @__PURE__ */ function(_Component) {
     });
     return _this;
   }
-  _createClass(TabPanelRoot2, [{
+  _inherits(TabPanelRoot2, _Component);
+  return _createClass(TabPanelRoot2, [{
     key: "uncontrolledProps",
     value: function uncontrolledProps() {
       return {
@@ -80,11 +66,21 @@ var TabPanelRoot = /* @__PURE__ */ function(_Component) {
       var value = this.asProps.value;
       var isSelected = value === props.value;
       return {
-        selected: isSelected,
-        onClick: this.handleClick(props.value),
-        onKeyDown: this.handleKeyDown(props.value),
-        tabIndex: isSelected ? 0 : -1,
-        "aria-selected": isSelected
+        "selected": isSelected,
+        "onClick": this.handleClick(props.value),
+        "onKeyDown": this.handleKeyDown(props.value),
+        "tabIndex": isSelected ? 0 : -1,
+        "aria-selected": isSelected,
+        "buttonRefsList": this.buttonRefsList,
+        index
+      };
+    }
+  }, {
+    key: "getItemTextProps",
+    value: function getItemTextProps(_, index) {
+      return {
+        buttonRefsList: this.buttonRefsList,
+        index
       };
     }
   }, {
@@ -93,48 +89,64 @@ var TabPanelRoot = /* @__PURE__ */ function(_Component) {
       var _ref = this.asProps, _ref5;
       var STabPanel = Box;
       var styles = this.asProps.styles;
-      return _ref5 = sstyled$1(styles), /* @__PURE__ */ React.createElement(STabPanel, _ref5.cn("STabPanel", _objectSpread({}, assignProps({
+      return _ref5 = sstyled(styles), /* @__PURE__ */ React.createElement(STabPanel, _ref5.cn("STabPanel", _objectSpread({}, assignProps({
         "role": "tablist"
       }, _ref))));
     }
   }]);
-  return TabPanelRoot2;
-}(Component);
+})(Component);
 _defineProperty(TabPanelRoot, "displayName", "TabPanel");
 _defineProperty(TabPanelRoot, "style", style);
 _defineProperty(TabPanelRoot, "defaultProps", {
   defaultValue: null,
   behavior: "manual"
 });
-_defineProperty(TabPanelRoot, "enhance", [a11yEnhance(optionsA11yEnhance)]);
+_defineProperty(TabPanelRoot, "enhance", [a11yEnhance({
+  onNeighborChange: function onNeighborChange(neighborElement, props) {
+    if (neighborElement) {
+      neighborElement.focus();
+      if (props.behavior === "auto") {
+        neighborElement.click();
+      }
+    }
+  },
+  childSelector: ["role", "tab"]
+})]);
+;
 function TabPanelItem(props) {
   var _ref2 = arguments[0], _ref6;
   var STabPanelItem = Box;
-  var Children = props.Children, styles = props.styles, addonLeft = props.addonLeft, addonRight = props.addonRight;
-  return _ref6 = sstyled$1(styles), /* @__PURE__ */ React.createElement(STabPanelItem, _ref6.cn("STabPanelItem", _objectSpread({}, assignProps({
+  var Children = props.Children, styles = props.styles, addonLeft = props.addonLeft, addonRight = props.addonRight, buttonRefsList = props.buttonRefsList, index = props.index;
+  var buttonRef = React.useRef();
+  buttonRefsList[index] = buttonRef;
+  return _ref6 = sstyled(styles), /* @__PURE__ */ React.createElement(STabPanelItem, _ref6.cn("STabPanelItem", _objectSpread({}, assignProps({
     "type": "button",
     "tag": "button",
-    "role": "tab"
+    "tabIndex": 0,
+    "role": "tab",
+    "ref": buttonRef
   }, _ref2))), addonLeft ? /* @__PURE__ */ React.createElement(TabPanel.Item.Addon, {
     tag: addonLeft
   }) : null, addonTextChildren(Children, TabPanel.Item.Text, TabPanel.Item.Addon), addonRight ? /* @__PURE__ */ React.createElement(TabPanel.Item.Addon, {
     tag: addonRight
   }) : null);
 }
-TabPanelItem.enhance = [keyboardFocusEnhance()];
 function Text(props) {
   var _ref3 = arguments[0], _ref7;
-  var SText = Box;
-  var styles = props.styles;
-  return _ref7 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SText, _ref7.cn("SText", _objectSpread({}, assignProps({
-    "tag": "span"
+  var SText = Text$1;
+  var styles = props.styles, _props$ellipsis = props.ellipsis, ellipsis = _props$ellipsis === void 0 ? true : _props$ellipsis, buttonRefsList = props.buttonRefsList, index = props.index;
+  return _ref7 = sstyled(styles), /* @__PURE__ */ React.createElement(SText, _ref7.cn("SText", _objectSpread({}, assignProps({
+    "size": 200,
+    "ellipsis": ellipsis,
+    "medium": true,
+    "hint:triggerRef": buttonRefsList[index]
   }, _ref3))));
 }
 function Addon(props) {
   var _ref4 = arguments[0], _ref8;
   var SAddon = Box;
   var styles = props.styles;
-  return _ref8 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SAddon, _ref8.cn("SAddon", _objectSpread({}, assignProps({
+  return _ref8 = sstyled(styles), /* @__PURE__ */ React.createElement(SAddon, _ref8.cn("SAddon", _objectSpread({}, assignProps({
     "tag": "span"
   }, _ref4))));
 }

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/esm/style/tab-panel.shadow.css

@@ -35,27 +35,18 @@ STabPanelItem {
   box-shadow: none;
   text-decoration: none;
   -webkit-tap-highlight-color: transparent;
-  outline: 0;
   text-align: center;
   vertical-align: middle;
   font-family: inherit;
   cursor: pointer;
 
-  & SText {
-    font-size: var(--intergalactic-fs-200, 14px);
-    line-height: var(--intergalactic-lh-200, 142%);
-    font-weight: var(--intergalactic-medium, 500);
-  }
-
   &::-moz-focus-inner {
     border: none;
     padding: 0;
   }
 
   &:active,
-  &:hover,
-  &:focus {
-    outline: 0;
+  &:hover {
     text-decoration: none;
   }
 
@@ -84,17 +75,13 @@ STabPanelItem[disabled] {
   }
 }
 
-STabPanelItem[keyboardFocused] {
-  box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px oklch(0.376 0.247 264.2 / 0.441));
-}
-
 STabPanelItem[selected] {
-  color: var(--intergalactic-text-link, oklch(0.53 0.214 263.4));
+  color: var(--intergalactic-text-link, oklch(0.53 0.21 263));
   border-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
   flex-shrink: 0;
 
   &:hover {
-    color: var(--intergalactic-text-link-hover-active, oklch(0.51 0.206 263.4));
+    color: var(--intergalactic-text-link-hover-active, oklch(0.51 0.202 263));
   }
 
   &::after {
@@ -103,11 +90,7 @@ STabPanelItem[selected] {
 }
 
 SText {
-  display: inline-block;
   margin: auto var(--intergalactic-spacing-2x, 8px);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
 }
 
 SAddon {
@@ -127,4 +110,4 @@ SAddon:not(:only-child):last-child {
 SAddon:only-child {
   margin-right: var(--intergalactic-spacing-2x, 8px);
   margin-left: var(--intergalactic-spacing-2x, 8px);
-}
+}

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,92 +1,2 @@
-import React from 'react';
-import { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';
-import { Box, BoxProps } from '@semcore/flex-box';
-import { KeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
-
-export type TabPanelValue = string | number | boolean;
-
-/** @deprecated */
-export interface ITabPanelProps<T extends TabPanelValue = TabPanelValue>
-  extends TabPanelProps<T>,
-    UnknownProperties {}
-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';
-};
-
-/** @deprecated */
-export interface ITabPanelItemProps extends TabPanelItemProps, UnknownProperties {}
-export type TabPanelItemProps = BoxProps &
-  KeyboardFocusProps & {
-    /** 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;
-  };
-
-/** @deprecated */
-export interface ITabPanelContext extends TabPanelContext, UnknownProperties {}
-export type TabPanelContext = {
-  getItemProps: PropGetterFn;
-};
-
-/** @deprecated */
-export interface ITabPanelHandlers extends TabPanelHandlers, UnknownProperties {}
-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 Box;
-    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": "4.43.0-prerelease.1",
+  "version": "4.43.0-prerelease.5",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -14,11 +14,11 @@
     "types": "./lib/types/index.d.ts"
   },
   "dependencies": {
-    "@semcore/utils": "4.49.0-prerelease.1",
-    "@semcore/flex-box": "5.42.0-prerelease.1"
+    "@semcore/utils": "4.49.0-prerelease.5",
+    "@semcore/flex-box": "5.42.0-prerelease.5"
   },
   "peerDependencies": {
-    "@semcore/core": "^2.40.0-prerelease.1",
+    "@semcore/core": "^2.40.0-prerelease.5",
     "react": "16.8 - 18",
     "react-dom": "16.8 - 18"
   },

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 React from 'react';\nimport { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';\nimport { Box, BoxProps } from '@semcore/flex-box';\nimport { KeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\n\nexport type TabPanelValue = string | number | boolean;\n\n/** @deprecated */\nexport interface ITabPanelProps<T extends TabPanelValue = TabPanelValue>\n  extends TabPanelProps<T>,\n    UnknownProperties {}\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\n/** @deprecated */\nexport interface ITabPanelItemProps extends TabPanelItemProps, UnknownProperties {}\nexport type TabPanelItemProps = BoxProps &\n  KeyboardFocusProps & {\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\n/** @deprecated */\nexport interface ITabPanelContext extends TabPanelContext, UnknownProperties {}\nexport type TabPanelContext = {\n  getItemProps: PropGetterFn;\n};\n\n/** @deprecated */\nexport interface ITabPanelHandlers extends TabPanelHandlers, UnknownProperties {}\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) &\n  Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', TabPanelProps>;\n\ndeclare const TabPanel: IntergalacticTabPanelComponent & {\n  Item: Intergalactic.Component<'div', TabPanelItemProps, {}, [handlers: TabPanelHandlers]> & {\n    Text: typeof Box;\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":""}