@semcore/tab-line 16.1.0-prerelease.1 → 16.1.0

package/lib/es6/TabLine.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabLine.js","names":["createComponent","Component","sstyled","Root","addonTextChildren","a11yEnhance","Box","NeighborLocation","React","style","_sstyled","insert","optionsA11yEnhance","onNeighborChange","neighborElement","props","focus","behavior","click","childSelector","TabLineRoot","_Component","_this","_classCallCheck","_len","arguments","length","args","Array","_key","_callSuper","concat","_defineProperty","animation","undefined","createRef","_this$state$animation","state","started","setState","_objectSpread","value","e","handlers","_inherits","_createClass","key","uncontrolledProps","componentDidUpdate","prevValue","asProps","animate","componentDidMount","componentWillUnmount","clearTimeout","animationStartTimeout","fromNode","itemRefs","toNode","containerNode","containerRef","current","containerRect","getBoundingClientRect","fromRect","toRect","fromLeft","x","fromWidth","width","toLeft","toWidth","setTimeout","handleAnimationStart","getItemProps","_index","_this2","_this$asProps","size","isSelected","bindHandlerClick","ref","node","getCaretProps","left","onTransitionEnd","handleAnimationEnd","render","_ref","_ref5","STabLine","SCaret","_this$asProps2","styles","Children","controlsLength","createElement","cn","_assignProps","defaultValue","underlined","TabLineItem","_ref2","arguments[0]","STabLineItem","addonLeft","addonRight","neighborLocation","Detect","_ref6","_assignProps2","TabLine","Item","Addon","tag","Text","_ref3","_ref7","SText","_assignProps3","_ref4","_ref8","SAddon","_assignProps4","wrapTabLine","wrapper"],"sources":["../../src/TabLine.jsx"],"sourcesContent":["import { 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 { Box } from '@semcore/flex-box';\nimport NeighborLocation from '@semcore/neighbor-location';\nimport React from 'react';\n\nimport style from './style/tab-line.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 TabLineRoot extends Component {\n  static displayName = 'TabLine';\n  static style = style;\n  static defaultProps = {\n    defaultValue: null,\n    size: 'm',\n    underlined: true,\n    behavior: 'auto',\n  };\n\n  static enhance = [a11yEnhance(optionsA11yEnhance)];\n  state = { animation: null };\n  prevValue = undefined;\n  itemRefs = {};\n  containerRef = React.createRef();\n  animationStartTimeout = -1;\n\n  uncontrolledProps() {\n    return {\n      value: null,\n    };\n  }\n\n  componentDidUpdate() {\n    if (\n      this.prevValue !== null &&\n      this.asProps.value !== null &&\n      this.prevValue !== this.asProps.value\n    ) {\n      this.animate();\n    }\n    this.prevValue = this.asProps.value;\n  }\n\n  componentDidMount() {\n    this.prevValue = this.asProps.value;\n  }\n\n  componentWillUnmount() {\n    clearTimeout(this.animationStartTimeout);\n  }\n\n  animate() {\n    const fromNode = this.itemRefs[this.prevValue];\n    const toNode = this.itemRefs[this.asProps.value];\n    const containerNode = this.containerRef.current;\n\n    if (!fromNode || !toNode || !containerNode) return;\n    const containerRect = containerNode.getBoundingClientRect();\n    const fromRect = fromNode.getBoundingClientRect();\n    const toRect = toNode.getBoundingClientRect();\n    const animation = {\n      fromLeft: fromRect.x - containerRect.x,\n      fromWidth: fromRect.width,\n      toLeft: toRect.x - containerRect.x,\n      toWidth: toRect.width,\n      started: false,\n    };\n    this.setState({ animation });\n    clearTimeout(this.animationStartTimeout);\n    this.animationStartTimeout = setTimeout(this.handleAnimationStart, 0);\n  }\n\n  handleAnimationStart = () => {\n    if (this.state.animation?.started === false) {\n      this.setState({ animation: { ...this.state.animation, started: true } });\n    }\n  };\n\n  handleAnimationEnd = () => {\n    this.setState({ animation: null });\n  };\n\n  bindHandlerClick = (value) => (e) => {\n    this.handlers.value(value, e);\n  };\n\n  getItemProps(props, _index) {\n    const { value, size } = this.asProps;\n    const isSelected = value === props.value;\n    return {\n      size,\n      'selected': isSelected,\n      'onClick': this.bindHandlerClick(props.value),\n      'tabIndex': isSelected ? 0 : -1,\n      'aria-selected': isSelected,\n      'ref': (node) => {\n        this.itemRefs[props.value] = node;\n      },\n    };\n  }\n\n  getCaretProps() {\n    const { animation } = this.state;\n    if (!animation) return {};\n    if (animation.started) {\n      return {\n        style: {\n          left: animation.toLeft,\n          width: animation.toWidth,\n        },\n        onTransitionEnd: this.handleAnimationEnd,\n      };\n    } else {\n      return {\n        style: {\n          left: animation.fromLeft,\n          width: animation.fromWidth,\n        },\n        onTransitionEnd: this.handleAnimationEnd,\n      };\n    }\n  }\n\n  render() {\n    const STabLine = Root;\n    const SCaret = Box;\n    const { styles, Children, controlsLength } = this.asProps;\n    const { animation } = this.state;\n\n    return sstyled(styles)(\n      <STabLine render={Box} role='tablist' ref={this.containerRef}>\n        <NeighborLocation controlsLength={controlsLength}>\n          <Children />\n        </NeighborLocation>\n        {animation && <SCaret {...this.getCaretProps()} />}\n      </STabLine>,\n    );\n  }\n}\n\nfunction TabLineItem(props) {\n  const STabLineItem = Root;\n  const { Children, styles, addonLeft, addonRight, neighborLocation } = props;\n\n  return (\n    <NeighborLocation.Detect neighborLocation={neighborLocation}>\n      {(neighborLocation) =>\n        sstyled(styles)(\n          <STabLineItem\n            render={Box}\n            tag='button'\n            tabIndex={0}\n            neighborLocation={neighborLocation}\n            type='button'\n            role='tab'\n          >\n            {addonLeft ? <TabLine.Item.Addon tag={addonLeft} /> : null}\n            {addonTextChildren(Children, TabLine.Item.Text, TabLine.Item.Addon)}\n            {addonRight ? <TabLine.Item.Addon tag={addonRight} /> : null}\n          </STabLineItem>,\n        )}\n    </NeighborLocation.Detect>\n  );\n}\n\nfunction Text(props) {\n  const { styles } = props;\n  const SText = Root;\n  return sstyled(styles)(<SText render={Box} tag='span' />);\n}\n\nfunction Addon(props) {\n  const { styles } = props;\n  const SAddon = Root;\n  return sstyled(styles)(<SAddon render={Box} tag='span' />);\n}\n\nconst TabLine = createComponent(TabLineRoot, {\n  Item: [TabLineItem, { Text, Addon }],\n});\n\nexport const wrapTabLine = (wrapper) => wrapper;\n\nexport default TabLine;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"TabLine.js","names":["NeighborLocation","Box","createComponent","Component","sstyled","Root","addonTextChildren","a11yEnhance","Text","SemcoreText","React","style","_sstyled","insert","TabLineRoot","_Component","_this","_classCallCheck","_len","arguments","length","args","Array","_key","_callSuper","concat","_defineProperty","animation","undefined","createRef","_this$state$animation","state","started","setState","_objectSpread","value","e","handlers","_inherits","_createClass","key","uncontrolledProps","componentDidUpdate","prevValue","asProps","animate","componentDidMount","componentWillUnmount","animationStartTimeout","clearTimeout","fromNode","itemRefs","toString","toNode","containerNode","containerRef","current","containerRect","getBoundingClientRect","fromRect","toRect","fromLeft","x","fromWidth","width","toLeft","toWidth","setTimeout","handleAnimationStart","getItemProps","props","index","_this2","_this$asProps","size","isSelected","bindHandlerClick","ref","node","buttonRefsList","getItemTextProps","tabLineSize","getCaretProps","left","onTransitionEnd","handleAnimationEnd","render","_ref","_ref5","STabLine","SCaret","_this$asProps2","styles","Children","controlsLength","createElement","cn","_assignProps","defaultValue","underlined","behavior","onNeighborChange","neighborElement","focus","click","childSelector","TabLineItem","_ref2","arguments[0]","STabLineItem","addonLeft","addonRight","neighborLocation","buttonRef","useRef","Detect","_ref6","_assignProps2","TabLine","Item","Addon","tag","_ref3","_ref7","_props$ellipsis","ellipsis","SText","_assignProps3","_ref4","_ref8","SAddon","_assignProps4","wrapTabLine","wrapper"],"sources":["../../src/TabLine.tsx"],"sourcesContent":["import { NeighborLocation, 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 SemcoreText } from '@semcore/typography';\nimport React from 'react';\n\nimport style from './style/tab-line.shadow.css';\nimport type { NSTabLine } from './TabLine.type';\n\ntype State = {\n  animation: {\n    fromLeft: number;\n    fromWidth: number;\n    toLeft: number;\n    toWidth: number;\n    started: boolean;\n  } | null;\n};\n\nclass TabLineRoot extends Component<\n  Intergalactic.InternalTypings.InferComponentProps<NSTabLine.Component>,\n  typeof TabLineRoot.enhance,\n  NSTabLine.Handlers,\n  {},\n  State\n> {\n  static displayName = 'TabLine';\n  static style = style;\n  static defaultProps = {\n    defaultValue: null,\n    size: 'm',\n    underlined: true,\n    behavior: 'auto',\n  };\n\n  static enhance = [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  })] as const;\n\n  state: State = { animation: null };\n  prevValue: NSTabLine.Props['value'] = undefined;\n  itemRefs: Record<string, HTMLDivElement> = {};\n  containerRef = React.createRef<HTMLDivElement>();\n  animationStartTimeout: ReturnType<typeof setTimeout> | null = null;\n  buttonRefsList: Array<React.MutableRefObject<HTMLButtonElement | undefined>> = [];\n\n  uncontrolledProps() {\n    return {\n      value: null,\n    };\n  }\n\n  componentDidUpdate() {\n    if (\n      this.prevValue !== null &&\n      this.asProps.value !== null &&\n      this.prevValue !== this.asProps.value\n    ) {\n      this.animate();\n    }\n    this.prevValue = this.asProps.value;\n  }\n\n  componentDidMount() {\n    this.prevValue = this.asProps.value;\n  }\n\n  componentWillUnmount() {\n    if (this.animationStartTimeout) {\n      clearTimeout(this.animationStartTimeout);\n    }\n  }\n\n  animate() {\n    if (this.prevValue === undefined || this.asProps.value === undefined) return;\n\n    const fromNode = this.itemRefs[this.prevValue.toString()];\n    const toNode = this.itemRefs[this.asProps.value.toString()];\n    const containerNode = this.containerRef.current;\n\n    if (!fromNode || !toNode || !containerNode) return;\n    const containerRect = containerNode.getBoundingClientRect();\n    const fromRect = fromNode.getBoundingClientRect();\n    const toRect = toNode.getBoundingClientRect();\n    const animation = {\n      fromLeft: fromRect.x - containerRect.x,\n      fromWidth: fromRect.width,\n      toLeft: toRect.x - containerRect.x,\n      toWidth: toRect.width,\n      started: false,\n    };\n    this.setState({ animation });\n\n    if (this.animationStartTimeout) {\n      clearTimeout(this.animationStartTimeout);\n    }\n\n    this.animationStartTimeout = setTimeout(this.handleAnimationStart, 0);\n  }\n\n  handleAnimationStart = () => {\n    if (this.state.animation?.started === false) {\n      this.setState({ animation: { ...this.state.animation, started: true } });\n    }\n  };\n\n  handleAnimationEnd = () => {\n    this.setState({ animation: null });\n  };\n\n  bindHandlerClick = (value: NSTabLine.Props['value']) => (e: React.SyntheticEvent) => {\n    this.handlers.value(value, e);\n  };\n\n  getItemProps(props: NSTabLine.Item.Props, index: number) {\n    const { value, size } = this.asProps;\n    const isSelected = value === props.value;\n    return {\n      size,\n      'selected': isSelected,\n      'onClick': this.bindHandlerClick(props.value),\n      'tabIndex': isSelected ? 0 : -1,\n      'aria-selected': isSelected,\n      'ref': (node: HTMLDivElement) => {\n        if (props.value === undefined) return;\n\n        this.itemRefs[props.value.toString()] = node;\n      },\n      'buttonRefsList': this.buttonRefsList,\n      index,\n    };\n  }\n\n  getItemTextProps(props: NSTabLine.Item.Text.Props, index: number) {\n    const { size: tabLineSize } = this.asProps;\n    const size = props.size\n      ? props.size\n      : tabLineSize === 'm' ? 200 : 300;\n\n    return {\n      size,\n      buttonRefsList: this.buttonRefsList,\n      index,\n    };\n  }\n\n  getCaretProps() {\n    const { animation } = this.state;\n    if (!animation) return {};\n    if (animation.started) {\n      return {\n        style: {\n          left: animation.toLeft,\n          width: animation.toWidth,\n        },\n        onTransitionEnd: this.handleAnimationEnd,\n      };\n    } else {\n      return {\n        style: {\n          left: animation.fromLeft,\n          width: animation.fromWidth,\n        },\n        onTransitionEnd: this.handleAnimationEnd,\n      };\n    }\n  }\n\n  render() {\n    const STabLine = Root;\n    const SCaret = Box;\n    const { styles, Children, controlsLength } = this.asProps;\n    const { animation } = this.state;\n\n    return sstyled(styles)(\n      <STabLine render={Box} role='tablist' ref={this.containerRef}>\n        <NeighborLocation controlsLength={controlsLength}>\n          <Children />\n        </NeighborLocation>\n        {animation && <SCaret {...this.getCaretProps()} />}\n      </STabLine>,\n    );\n  }\n}\n\nfunction TabLineItem(\n  props: Intergalactic.InternalTypings.InferChildComponentProps<\n    NSTabLine.Item.Component,\n    typeof TabLineRoot,\n    'Item'\n  >,\n) {\n  const STabLineItem = Root;\n  const { Children, styles, addonLeft, addonRight, neighborLocation, buttonRefsList, index } = props;\n  const buttonRef = React.useRef<HTMLButtonElement>();\n\n  buttonRefsList[index] = buttonRef;\n\n  return (\n    <NeighborLocation.Detect neighborLocation={neighborLocation}>\n      {(neighborLocation) =>\n        sstyled(styles)(\n          <STabLineItem\n            render={Box}\n            tag='button'\n            tabIndex={0}\n            neighborLocation={neighborLocation}\n            type='button'\n            role='tab'\n            ref={buttonRef}\n          >\n            {addonLeft ? <TabLine.Item.Addon tag={addonLeft} /> : null}\n            {addonTextChildren(Children, TabLine.Item.Text, TabLine.Item.Addon)}\n            {addonRight ? <TabLine.Item.Addon tag={addonRight} /> : null}\n          </STabLineItem>,\n        )}\n    </NeighborLocation.Detect>\n  );\n}\n\nfunction Text(\n  props: Intergalactic.InternalTypings.InferChildComponentProps<\n    NSTabLine.Item.Text.Component,\n    typeof TabLineRoot,\n    'ItemText'\n  >,\n) {\n  const { styles, ellipsis = true, size, buttonRefsList, index } = props;\n  const SText = Root;\n  return sstyled(styles)(<SText render={SemcoreText} ellipsis={ellipsis} size={size} hint:triggerRef={buttonRefsList[index]} />);\n}\n\nfunction Addon(\n  props: Intergalactic.InternalTypings.InferComponentProps<NSTabLine.Item.Addon.Component>,\n) {\n  const { styles } = props;\n  const SAddon = Root;\n  return sstyled(styles)(<SAddon render={Box} tag='span' />);\n}\n\nconst TabLine = createComponent(TabLineRoot, {\n  Item: [TabLineItem, { Text, Addon }],\n}) as unknown as NSTabLine.Component;\n\nexport const wrapTabLine = <PropsExtending extends {}>(wrapper: (\n  props: Intergalactic.InternalTypings.UntypeRefAndTag<\n    Intergalactic.InternalTypings.ComponentPropsNesting<NSTabLine.WrapperComponent>\n  > &\n  PropsExtending,\n) => React.ReactNode) => wrapper as NSTabLine.WrapperComponent<PropsExtending>;\n\nexport default TabLine;\n"],"mappings":"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","ignoreList":[]}

package/lib/es6/TabLine.type.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"TabLine.type.js","names":[],"sources":["../../src/TabLine.type.ts"],"sourcesContent":["import type { Box, BoxProps, NeighborItemProps, NeighborLocationProps } from '@semcore/base-components';\nimport type { PropGetterFn, Intergalactic } from '@semcore/core';\nimport type { NSText } from '@semcore/typography';\nimport type React from 'react';\n\ndeclare namespace NSTabLine {\n  type Value = string | number | boolean;\n  type Props<T extends NSTabLine.Value = NSTabLine.Value> = BoxProps &\n    NeighborLocationProps & {\n      /** TabLine size\n       * @default m\n       * */\n      size?: 'm' | 'l' | false;\n      /** Adds a bottom border for the entire component\n       * @default true\n       * */\n      underlined?: boolean;\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      /**\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      NeighborItemProps & {\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?: NSTabLine.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: NSTabLine.Handlers]> & {\n      Text: Text.Component;\n      Addon: Addon.Component;\n    };\n  }\n\n  type WrapperComponent<PropsExtending = {}> = (<\n    V extends 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) &\n  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 TabLineValue = NSTabLine.Value;\n/** @deprecated It will be removed in v18. */\nexport type TabLineProps<T extends TabLineValue = TabLineValue> = NSTabLine.Props<T>;\n/** @deprecated It will be removed in v18. */\nexport type TabLineItemProps = NSTabLine.Item.Props;\n/** @deprecated It will be removed in v18. */\nexport type TabLineContext = NSTabLine.Ctx;\n/** @deprecated It will be removed in v18. */\nexport type TabLineHandlers = NSTabLine.Handlers;\n\nexport type { NSTabLine };\n"],"mappings":"","ignoreList":[]}

package/lib/es6/index.js

@@ -1,3 +1,3 @@
-export { default } from './TabLine';
-export * from './TabLine';
+export { default, wrapTabLine } from './TabLine';
+export * from './TabLine.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 './TabLine';\nexport * from './TabLine';\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,WAAW;AACnC,cAAc,WAAW","ignoreList":[]}
+{"version":3,"file":"index.js","names":["default","wrapTabLine"],"sources":["../../src/index.ts"],"sourcesContent":["export { default, wrapTabLine } from './TabLine';\nexport * from './TabLine.type';\n"],"mappings":"AAAA,SAASA,OAAO,EAAEC,WAAW,QAAQ,WAAW;AAChD,cAAc,gBAAgB","ignoreList":[]}

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

@@ -66,7 +66,7 @@ STabLineItem {
 
   &[selected]::after {
     transition-delay: calc(var(--intergalactic-duration-control, 200) * 1ms);
-    background-color: var(--intergalactic-border-info-active, oklch(0.443 0.273 264.2 / 0.419));
+    background-color: var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2));
   }
 
   & SText:not(:last-child) {
@@ -82,7 +82,7 @@ SCaret {
   position: absolute;
   bottom: -1px;
   height: 3px;
-  background: var(--intergalactic-border-info-active, oklch(0.443 0.273 264.2 / 0.419));
+  background: var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2));
   transition: calc(var(--intergalactic-duration-control, 200) * 1ms) all ease-in-out;
 }
 
@@ -97,13 +97,6 @@ STabLineItem[disabled] {
   pointer-events: none;
 }
 
-SText {
-  display: inline-block;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
 SAddon {
   display: inline-flex;
   align-items: center;
@@ -113,21 +106,11 @@ SAddon {
 STabLineItem[size='m'] {
   height: 28px;
   min-width: 18px;
-
-  & SText {
-    font-size: var(--intergalactic-fs-200, 14px);
-    line-height: var(--intergalactic-lh-200, 142%);
-  }
 }
 
 STabLineItem[size='l'] {
   height: 40px;
   min-width: 26px;
-
-  & SText {
-    font-size: var(--intergalactic-fs-300, 16px);
-    line-height: var(--intergalactic-lh-300, 150%);
-  }
 }
 
 STabLineItem[neighborLocation='left'] {

package/lib/esm/TabLine.mjs

@@ -4,46 +4,35 @@ import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _callSuper from "@babel/runtime/helpers/esm/callSuper";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { createComponent, sstyled, assignProps, Component } from "@semcore/core";
+import { sstyled, assignProps, Component, createComponent } from "@semcore/core";
+import { Box, NeighborLocation } from "@semcore/base-components";
 import addonTextChildren from "@semcore/core/lib/utils/addonTextChildren";
 import a11yEnhance from "@semcore/core/lib/utils/enhances/a11yEnhance";
-import { Box } from "@semcore/flex-box";
-import NeighborLocation from "@semcore/neighbor-location";
+import { Text as Text$1 } from "@semcore/typography";
 import React from "react";
 /*!__reshadow-styles__:"./style/tab-line.shadow.css"*/
 var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    '.___STabLine_1408b_gg_{position:relative;display:flex;width:100%;max-width:100%}.___STabLine_1408b_gg_.__underlined_1408b_gg_{border-bottom:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@supports (color:color(display-p3 0 0 0%)){.___STabLine_1408b_gg_.__underlined_1408b_gg_{border-bottom:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___STabLine_1408b_gg_.__underlined_1408b_gg_{border-bottom:1px solid var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}.___STabLineItem_1408b_gg_{display:inline-flex;align-items:center;justify-content:center;position:relative;touch-action:manipulation;white-space:nowrap;-moz-user-select:none;user-select:none;box-sizing:border-box;padding:0;margin:0;box-shadow:none;text-decoration:none;-webkit-tap-highlight-color:transparent;overflow:visible;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer;border:0;background:0 0;color:var(--intergalactic-text-primary, rgba(1, 5, 0, 0.899));margin-right:var(--intergalactic-spacing-4x, 16px);font-weight:var(--intergalactic-medium, 500)}.___STabLineItem_1408b_gg_::-moz-focus-inner{border:0;padding:0}.___STabLineItem_1408b_gg_:active{text-decoration:none}@media (hover:hover){.___STabLineItem_1408b_gg_:hover{text-decoration:none}}.___STabLineItem_1408b_gg_::after,.___STabLineItem_1408b_gg_::before{content:"";position:absolute;left:0;bottom:-1px;height:3px;width:100%;background-color:transparent}.___STabLineItem_1408b_gg_::before{transition:background-color calc(var(--intergalactic-duration-control, 200)*1ms) ease-in-out}@media (hover:hover){.___STabLineItem_1408b_gg_:hover::before{background-color:var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@supports (color:color(display-p3 0 0 0%)){.___STabLineItem_1408b_gg_:hover::before{background-color:var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___STabLineItem_1408b_gg_:hover::before{background-color:var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}}.___STabLineItem_1408b_gg_.__selected_1408b_gg_::after{transition-delay:calc(var(--intergalactic-duration-control, 200)*1ms);background-color:var(--intergalactic-border-info-active, rgba(0, 40, 230, 0.419))}.___STabLineItem_1408b_gg_ .___SAddon_1408b_gg_:not(:last-child),.___STabLineItem_1408b_gg_ .___SText_1408b_gg_:not(:last-child){margin-right:var(--intergalactic-spacing-2x, 8px)}.___SCaret_1408b_gg_{position:absolute;bottom:-1px;height:3px;background:var(--intergalactic-border-info-active, rgba(0, 40, 230, 0.419));transition:calc(var(--intergalactic-duration-control, 200)*1ms) all ease-in-out}.___STabLineItem_1408b_gg_.__selected_1408b_gg_{flex-shrink:0}.___STabLineItem_1408b_gg_.__disabled_1408b_gg_{opacity:var(--intergalactic-disabled-opacity, 0.4);cursor:default;pointer-events:none}.___SText_1408b_gg_{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SAddon_1408b_gg_{display:inline-flex;align-items:center;justify-content:center}.___STabLineItem_1408b_gg_._size_m_1408b_gg_{height:28px;min-width:18px}.___STabLineItem_1408b_gg_._size_m_1408b_gg_ .___SText_1408b_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___STabLineItem_1408b_gg_._size_l_1408b_gg_{height:40px;min-width:26px}.___STabLineItem_1408b_gg_._size_l_1408b_gg_ .___SText_1408b_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___STabLineItem_1408b_gg_._neighborLocation_left_1408b_gg_{margin-right:0}@media (prefers-reduced-motion){.___STabLineItem_1408b_gg_.__selected_1408b_gg_::after,.___STabLineItem_1408b_gg_::after,.___STabLineItem_1408b_gg_::before{transition:none}.___SCaret_1408b_gg_{display:none}}',
+    '.___STabLine_1qpi7_gg_{position:relative;display:flex;width:100%;max-width:100%}.___STabLine_1qpi7_gg_.__underlined_1qpi7_gg_{border-bottom:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@supports (color:color(display-p3 0 0 0%)){.___STabLine_1qpi7_gg_.__underlined_1qpi7_gg_{border-bottom:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___STabLine_1qpi7_gg_.__underlined_1qpi7_gg_{border-bottom:1px solid var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}.___STabLineItem_1qpi7_gg_{display:inline-flex;align-items:center;justify-content:center;position:relative;touch-action:manipulation;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-sizing:border-box;padding:0;margin:0;box-shadow:none;-webkit-text-decoration:none;text-decoration:none;-webkit-tap-highlight-color:transparent;overflow:visible;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer;border:0;background:0 0;color:var(--intergalactic-text-primary, rgba(1, 5, 0, 0.899));margin-right:var(--intergalactic-spacing-4x, 16px);font-weight:var(--intergalactic-medium, 500)}.___STabLineItem_1qpi7_gg_::-moz-focus-inner{border:0;padding:0}.___STabLineItem_1qpi7_gg_:active{-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STabLineItem_1qpi7_gg_:hover{-webkit-text-decoration:none;text-decoration:none}}.___STabLineItem_1qpi7_gg_::after,.___STabLineItem_1qpi7_gg_::before{content:"";position:absolute;left:0;bottom:-1px;height:3px;width:100%;background-color:transparent}.___STabLineItem_1qpi7_gg_::before{transition:background-color calc(var(--intergalactic-duration-control, 200)*1ms) ease-in-out}@media (hover:hover){.___STabLineItem_1qpi7_gg_:hover::before{background-color:var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@supports (color:color(display-p3 0 0 0%)){.___STabLineItem_1qpi7_gg_:hover::before{background-color:var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___STabLineItem_1qpi7_gg_:hover::before{background-color:var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}}.___STabLineItem_1qpi7_gg_.__selected_1qpi7_gg_::after{transition-delay:calc(var(--intergalactic-duration-control, 200)*1ms);background-color:var(--intergalactic-border-info-active, rgb(135, 150, 239))}.___STabLineItem_1qpi7_gg_ .___SAddon_1qpi7_gg_:not(:last-child),.___STabLineItem_1qpi7_gg_ .___SText_1qpi7_gg_:not(:last-child){margin-right:var(--intergalactic-spacing-2x, 8px)}.___SCaret_1qpi7_gg_{position:absolute;bottom:-1px;height:3px;background:var(--intergalactic-border-info-active, rgb(135, 150, 239));transition:calc(var(--intergalactic-duration-control, 200)*1ms) all ease-in-out}.___STabLineItem_1qpi7_gg_.__selected_1qpi7_gg_{flex-shrink:0}.___STabLineItem_1qpi7_gg_.__disabled_1qpi7_gg_{opacity:var(--intergalactic-disabled-opacity, 0.4);cursor:default;pointer-events:none}.___SAddon_1qpi7_gg_{display:inline-flex;align-items:center;justify-content:center}.___STabLineItem_1qpi7_gg_._size_m_1qpi7_gg_{height:28px;min-width:18px}.___STabLineItem_1qpi7_gg_._size_l_1qpi7_gg_{height:40px;min-width:26px}.___STabLineItem_1qpi7_gg_._neighborLocation_left_1qpi7_gg_{margin-right:0}@media (prefers-reduced-motion){.___STabLineItem_1qpi7_gg_.__selected_1qpi7_gg_::after,.___STabLineItem_1qpi7_gg_::after,.___STabLineItem_1qpi7_gg_::before{transition:none}.___SCaret_1qpi7_gg_{display:none}}',
     /*__inner_css_end__*/
-    "1408b_gg_"
+    "1qpi7_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__STabLine": "___STabLine_1408b_gg_",
-    "_underlined": "__underlined_1408b_gg_",
-    "__SCaret": "___SCaret_1408b_gg_",
-    "__STabLineItem": "___STabLineItem_1408b_gg_",
-    "_selected": "__selected_1408b_gg_",
-    "_disabled": "__disabled_1408b_gg_",
-    "__SText": "___SText_1408b_gg_",
-    "__SAddon": "___SAddon_1408b_gg_",
-    "_neighborLocation_left": "_neighborLocation_left_1408b_gg_",
-    "_size_m": "_size_m_1408b_gg_",
-    "_size_l": "_size_l_1408b_gg_"
+    "__STabLine": "___STabLine_1qpi7_gg_",
+    "_underlined": "__underlined_1qpi7_gg_",
+    "__SCaret": "___SCaret_1qpi7_gg_",
+    "__STabLineItem": "___STabLineItem_1qpi7_gg_",
+    "_selected": "__selected_1qpi7_gg_",
+    "_disabled": "__disabled_1qpi7_gg_",
+    "__SAddon": "___SAddon_1qpi7_gg_",
+    "_size_m": "_size_m_1qpi7_gg_",
+    "_size_l": "_size_l_1qpi7_gg_",
+    "_neighborLocation_left": "_neighborLocation_left_1qpi7_gg_",
+    "__SText": "___SText_1qpi7_gg_"
   })
 );
-var optionsA11yEnhance = {
-  onNeighborChange: function onNeighborChange(neighborElement, props) {
-    if (neighborElement) {
-      neighborElement.focus();
-      if (props.behavior === "auto") {
-        neighborElement.click();
-      }
-    }
-  },
-  childSelector: ["role", "tab"]
-};
 var TabLineRoot = /* @__PURE__ */ (function(_Component) {
   function TabLineRoot2() {
     var _this;
@@ -58,7 +47,8 @@ var TabLineRoot = /* @__PURE__ */ (function(_Component) {
     _defineProperty(_this, "prevValue", void 0);
     _defineProperty(_this, "itemRefs", {});
     _defineProperty(_this, "containerRef", /* @__PURE__ */ React.createRef());
-    _defineProperty(_this, "animationStartTimeout", -1);
+    _defineProperty(_this, "animationStartTimeout", null);
+    _defineProperty(_this, "buttonRefsList", []);
     _defineProperty(_this, "handleAnimationStart", function() {
       var _this$state$animation;
       if (((_this$state$animation = _this.state.animation) === null || _this$state$animation === void 0 ? void 0 : _this$state$animation.started) === false) {
@@ -105,13 +95,16 @@ var TabLineRoot = /* @__PURE__ */ (function(_Component) {
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
-      clearTimeout(this.animationStartTimeout);
+      if (this.animationStartTimeout) {
+        clearTimeout(this.animationStartTimeout);
+      }
     }
   }, {
     key: "animate",
     value: function animate() {
-      var fromNode = this.itemRefs[this.prevValue];
-      var toNode = this.itemRefs[this.asProps.value];
+      if (this.prevValue === void 0 || this.asProps.value === void 0) return;
+      var fromNode = this.itemRefs[this.prevValue.toString()];
+      var toNode = this.itemRefs[this.asProps.value.toString()];
       var containerNode = this.containerRef.current;
       if (!fromNode || !toNode || !containerNode) return;
       var containerRect = containerNode.getBoundingClientRect();
@@ -127,12 +120,14 @@ var TabLineRoot = /* @__PURE__ */ (function(_Component) {
       this.setState({
         animation
       });
-      clearTimeout(this.animationStartTimeout);
+      if (this.animationStartTimeout) {
+        clearTimeout(this.animationStartTimeout);
+      }
       this.animationStartTimeout = setTimeout(this.handleAnimationStart, 0);
     }
   }, {
     key: "getItemProps",
-    value: function getItemProps(props, _index) {
+    value: function getItemProps(props, index) {
       var _this2 = this;
       var _this$asProps = this.asProps, value = _this$asProps.value, size = _this$asProps.size;
       var isSelected = value === props.value;
@@ -143,8 +138,22 @@ var TabLineRoot = /* @__PURE__ */ (function(_Component) {
         "tabIndex": isSelected ? 0 : -1,
         "aria-selected": isSelected,
         "ref": function ref(node) {
-          _this2.itemRefs[props.value] = node;
-        }
+          if (props.value === void 0) return;
+          _this2.itemRefs[props.value.toString()] = node;
+        },
+        "buttonRefsList": this.buttonRefsList,
+        index
+      };
+    }
+  }, {
+    key: "getItemTextProps",
+    value: function getItemTextProps(props, index) {
+      var tabLineSize = this.asProps.size;
+      var size = props.size ? props.size : tabLineSize === "m" ? 200 : 300;
+      return {
+        size,
+        buttonRefsList: this.buttonRefsList,
+        index
       };
     }
   }, {
@@ -195,11 +204,23 @@ _defineProperty(TabLineRoot, "defaultProps", {
   underlined: true,
   behavior: "auto"
 });
-_defineProperty(TabLineRoot, "enhance", [a11yEnhance(optionsA11yEnhance)]);
+_defineProperty(TabLineRoot, "enhance", [a11yEnhance({
+  onNeighborChange: function onNeighborChange(neighborElement, props) {
+    if (neighborElement) {
+      neighborElement.focus();
+      if (props.behavior === "auto") {
+        neighborElement.click();
+      }
+    }
+  },
+  childSelector: ["role", "tab"]
+})]);
 function TabLineItem(props) {
   var _ref2 = arguments[0];
   var STabLineItem = Box;
-  var Children = props.Children, styles = props.styles, addonLeft = props.addonLeft, addonRight = props.addonRight, neighborLocation = props.neighborLocation;
+  var Children = props.Children, styles = props.styles, addonLeft = props.addonLeft, addonRight = props.addonRight, neighborLocation = props.neighborLocation, buttonRefsList = props.buttonRefsList, index = props.index;
+  var buttonRef = React.useRef();
+  buttonRefsList[index] = buttonRef;
   return /* @__PURE__ */ React.createElement(NeighborLocation.Detect, {
     neighborLocation
   }, function(neighborLocation2) {
@@ -209,7 +230,8 @@ function TabLineItem(props) {
       "tabIndex": 0,
       "neighborLocation": neighborLocation2,
       "type": "button",
-      "role": "tab"
+      "role": "tab",
+      "ref": buttonRef
     }, _ref2))), addonLeft ? /* @__PURE__ */ React.createElement(TabLine.Item.Addon, {
       tag: addonLeft
     }) : null, addonTextChildren(Children, TabLine.Item.Text, TabLine.Item.Addon), addonRight ? /* @__PURE__ */ React.createElement(TabLine.Item.Addon, {
@@ -219,10 +241,12 @@ function TabLineItem(props) {
 }
 function Text(props) {
   var _ref3 = arguments[0], _ref7;
-  var styles = props.styles;
-  var SText = Box;
+  var styles = props.styles, _props$ellipsis = props.ellipsis, ellipsis = _props$ellipsis === void 0 ? true : _props$ellipsis, size = props.size, buttonRefsList = props.buttonRefsList, index = props.index;
+  var SText = Text$1;
   return _ref7 = sstyled(styles), /* @__PURE__ */ React.createElement(SText, _ref7.cn("SText", _objectSpread({}, assignProps({
-    "tag": "span"
+    "ellipsis": ellipsis,
+    "size": size,
+    "hint:triggerRef": buttonRefsList[index]
   }, _ref3))));
 }
 function Addon(props) {

package/lib/esm/TabLine.type.mjs

@@ -0,0 +1 @@
+

package/lib/esm/index.mjs

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

package/lib/esm/style/tab-line.shadow.css

@@ -66,7 +66,7 @@ STabLineItem {
 
   &[selected]::after {
     transition-delay: calc(var(--intergalactic-duration-control, 200) * 1ms);
-    background-color: var(--intergalactic-border-info-active, oklch(0.443 0.273 264.2 / 0.419));
+    background-color: var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2));
   }
 
   & SText:not(:last-child) {
@@ -82,7 +82,7 @@ SCaret {
   position: absolute;
   bottom: -1px;
   height: 3px;
-  background: var(--intergalactic-border-info-active, oklch(0.443 0.273 264.2 / 0.419));
+  background: var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2));
   transition: calc(var(--intergalactic-duration-control, 200) * 1ms) all ease-in-out;
 }
 
@@ -97,13 +97,6 @@ STabLineItem[disabled] {
   pointer-events: none;
 }
 
-SText {
-  display: inline-block;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
 SAddon {
   display: inline-flex;
   align-items: center;
@@ -113,21 +106,11 @@ SAddon {
 STabLineItem[size='m'] {
   height: 28px;
   min-width: 18px;
-
-  & SText {
-    font-size: var(--intergalactic-fs-200, 14px);
-    line-height: var(--intergalactic-lh-200, 142%);
-  }
 }
 
 STabLineItem[size='l'] {
   height: 40px;
   min-width: 26px;
-
-  & SText {
-    font-size: var(--intergalactic-fs-300, 16px);
-    line-height: var(--intergalactic-lh-300, 150%);
-  }
 }
 
 STabLineItem[neighborLocation='left'] {

package/lib/types/TabLine.d.ts

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

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

@@ -0,0 +1,80 @@
+import type { Box, BoxProps, NeighborItemProps, NeighborLocationProps } from '@semcore/base-components';
+import type { PropGetterFn, Intergalactic } from '@semcore/core';
+import type { NSText } from '@semcore/typography';
+import type React from 'react';
+declare namespace NSTabLine {
+    type Value = string | number | boolean;
+    type Props<T extends NSTabLine.Value = NSTabLine.Value> = BoxProps & NeighborLocationProps & {
+        /** TabLine size
+         * @default m
+         * */
+        size?: 'm' | 'l' | false;
+        /** Adds a bottom border for the entire component
+         * @default true
+         * */
+        underlined?: boolean;
+        /** 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';
+    };
+    type Ctx = {
+        getItemProps: PropGetterFn;
+    };
+    type Handlers = {
+        value: null;
+    };
+    namespace Item {
+        type Props = BoxProps & NeighborItemProps & {
+            /** Makes a tab selected. This property is determined automatically depending on the value. */
+            selected?: boolean;
+            /** Disabled state  */
+            disabled?: boolean;
+            /** Tab value */
+            value?: NSTabLine.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: NSTabLine.Handlers]> & {
+            Text: Text.Component;
+            Addon: Addon.Component;
+        };
+    }
+    type WrapperComponent<PropsExtending = {}> = (<V extends 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 TabLineValue = NSTabLine.Value;
+/** @deprecated It will be removed in v18. */
+export type TabLineProps<T extends TabLineValue = TabLineValue> = NSTabLine.Props<T>;
+/** @deprecated It will be removed in v18. */
+export type TabLineItemProps = NSTabLine.Item.Props;
+/** @deprecated It will be removed in v18. */
+export type TabLineContext = NSTabLine.Ctx;
+/** @deprecated It will be removed in v18. */
+export type TabLineHandlers = NSTabLine.Handlers;
+export type { NSTabLine };

package/lib/types/index.d.ts

@@ -1,102 +1,2 @@
-import type { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';
-import type { Box, BoxProps } from '@semcore/flex-box';
-import type { NeighborItemProps, NeighborLocationProps } from '@semcore/neighbor-location';
-import type React from 'react';
-
-export type TabLineValue = string | number | boolean;
-
-/** @deprecated */
-export interface ITabLineProps<T extends TabLineValue = TabLineValue>
-  extends TabLineProps<T>,
-  UnknownProperties {}
-export type TabLineProps<T extends TabLineValue = TabLineValue> = BoxProps &
-  NeighborLocationProps & {
-    /** TabLine size
-     * @default m
-     * */
-    size?: 'm' | 'l' | false;
-    /** Adds a bottom border for the entire component
-     * @default true
-     * */
-    underlined?: boolean;
-    /** 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 ITabLineItemProps extends TabLineItemProps, UnknownProperties {}
-export type TabLineItemProps = BoxProps &
-  NeighborItemProps & {
-    /** Makes a tab selected. This property is determined automatically depending on the value. */
-    selected?: boolean;
-    /** Disabled state  */
-    disabled?: boolean;
-    /** Tab value */
-    value?: TabLineValue;
-    /** Left addon tag */
-    addonLeft?: React.ElementType;
-    /** Right addon tag  */
-    addonRight?: React.ElementType;
-  };
-
-/** @deprecated */
-export interface ITabLineContext extends TabLineContext, UnknownProperties {}
-export type TabLineContext = {
-  getItemProps: PropGetterFn;
-};
-
-/** @deprecated */
-export interface ITabLineHandlers extends TabLineHandlers, UnknownProperties {}
-export type TabLineHandlers = {
-  value: (value: TabLineValue) => void;
-};
-
-type IntergalacticTabLineComponent<PropsExtending = {}> = (<
-  Value extends TabLineValue,
-  Tag extends Intergalactic.Tag = 'div',
->(
-  props: Intergalactic.InternalTypings.ComponentProps<
-    Tag,
-    'div',
-    TabLineProps<Value>,
-    TabLineContext,
-    [handlers: TabLineHandlers]
-  > &
-  PropsExtending,
-) => Intergalactic.InternalTypings.ComponentRenderingResults) &
-Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', TabLineProps>;
-
-declare const TabLine: IntergalacticTabLineComponent & {
-  Item: Intergalactic.Component<'div', TabLineItemProps, {}, [handlers: TabLineHandlers]> & {
-    Text: typeof Box;
-    Addon: typeof Box;
-  };
-};
-
-declare const wrapTabLine: <PropsExtending extends {}>(
-  wrapper: (
-    props: Intergalactic.InternalTypings.UntypeRefAndTag<
-      Intergalactic.InternalTypings.ComponentPropsNesting<IntergalacticTabLineComponent>
-    > &
-    PropsExtending,
-  ) => React.ReactNode,
-) => IntergalacticTabLineComponent<PropsExtending>;
-export { wrapTabLine };
-
-export default TabLine;
+export { default, wrapTabLine } from './TabLine';
+export * from './TabLine.type';