@semcore/tab-line 17.0.1 → 17.0.2-prerelease.1

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-30
+
+### Fixed
+
+- Rewrite component to TS.
+
 ## [17.0.1] - 2026-04-16
 
 ### Fixed

package/lib/cjs/TabLine.js

@@ -13,32 +13,21 @@ var _a11yEnhance = _interopRequireDefault(require("@semcore/core/lib/utils/enhan
 var _typography = require("@semcore/typography");
 var _react = _interopRequireDefault(require("react"));
 /*!__reshadow-styles__:"./style/tab-line.shadow.css"*/
-const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___STabLine_1khsc_gg_{position:relative;display:flex;width:100%;max-width:100%}.___STabLine_1khsc_gg_.__underlined_1khsc_gg_{border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabLineItem_1khsc_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, #191b23);margin-right:var(--intergalactic-spacing-4x, 16px);font-weight:var(--intergalactic-medium, 500)}.___STabLineItem_1khsc_gg_::-moz-focus-inner{border:0;padding:0}.___STabLineItem_1khsc_gg_:active{-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STabLineItem_1khsc_gg_:hover{-webkit-text-decoration:none;text-decoration:none}}.___STabLineItem_1khsc_gg_::after,.___STabLineItem_1khsc_gg_::before{content:\"\";position:absolute;left:0;bottom:-1px;height:3px;width:100%;background-color:transparent}.___STabLineItem_1khsc_gg_::before{transition:background-color calc(var(--intergalactic-duration-control, 200)*1ms) ease-in-out}@media (hover:hover){.___STabLineItem_1khsc_gg_:hover::before{background-color:var(--intergalactic-border-primary, #c4c7cf)}}.___STabLineItem_1khsc_gg_.__selected_1khsc_gg_::after{transition-delay:calc(var(--intergalactic-duration-control, 200)*1ms);background-color:var(--intergalactic-border-info-active, #006dca)}.___STabLineItem_1khsc_gg_ .___SAddon_1khsc_gg_:not(:last-child),.___STabLineItem_1khsc_gg_ .___SText_1khsc_gg_:not(:last-child){margin-right:var(--intergalactic-spacing-2x, 8px)}.___SCaret_1khsc_gg_{position:absolute;bottom:-1px;height:3px;background:var(--intergalactic-border-info-active, #006dca);transition:calc(var(--intergalactic-duration-control, 200)*1ms) all ease-in-out}.___STabLineItem_1khsc_gg_.__selected_1khsc_gg_{flex-shrink:0}.___STabLineItem_1khsc_gg_.__disabled_1khsc_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___SAddon_1khsc_gg_{display:inline-flex;align-items:center;justify-content:center}.___STabLineItem_1khsc_gg_._size_m_1khsc_gg_{height:28px;min-width:18px}.___STabLineItem_1khsc_gg_._size_l_1khsc_gg_{height:40px;min-width:26px}.___STabLineItem_1khsc_gg_._neighborLocation_left_1khsc_gg_{margin-right:0}@media (prefers-reduced-motion){.___STabLineItem_1khsc_gg_.__selected_1khsc_gg_::after,.___STabLineItem_1khsc_gg_::after,.___STabLineItem_1khsc_gg_::before{transition:none}.___SCaret_1khsc_gg_{display:none}}", /*__inner_css_end__*/"1khsc_gg_"),
+const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___STabLine_1v9ch_gg_{position:relative;display:flex;width:100%;max-width:100%}.___STabLine_1v9ch_gg_.__underlined_1v9ch_gg_{border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabLineItem_1v9ch_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, #191b23);margin-right:var(--intergalactic-spacing-4x, 16px);font-weight:var(--intergalactic-medium, 500)}.___STabLineItem_1v9ch_gg_::-moz-focus-inner{border:0;padding:0}.___STabLineItem_1v9ch_gg_:active{-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STabLineItem_1v9ch_gg_:hover{-webkit-text-decoration:none;text-decoration:none}}.___STabLineItem_1v9ch_gg_::after,.___STabLineItem_1v9ch_gg_::before{content:\"\";position:absolute;left:0;bottom:-1px;height:3px;width:100%;background-color:transparent}.___STabLineItem_1v9ch_gg_::before{transition:background-color calc(var(--intergalactic-duration-control, 200)*1ms) ease-in-out}@media (hover:hover){.___STabLineItem_1v9ch_gg_:hover::before{background-color:var(--intergalactic-border-primary, #c4c7cf)}}.___STabLineItem_1v9ch_gg_.__selected_1v9ch_gg_::after{transition-delay:calc(var(--intergalactic-duration-control, 200)*1ms);background-color:var(--intergalactic-border-info-active, #006dca)}.___STabLineItem_1v9ch_gg_ .___SAddon_1v9ch_gg_:not(:last-child),.___STabLineItem_1v9ch_gg_ .___SText_1v9ch_gg_:not(:last-child){margin-right:var(--intergalactic-spacing-2x, 8px)}.___SCaret_1v9ch_gg_{position:absolute;bottom:-1px;height:3px;background:var(--intergalactic-border-info-active, #006dca);transition:calc(var(--intergalactic-duration-control, 200)*1ms) all ease-in-out}.___STabLineItem_1v9ch_gg_.__selected_1v9ch_gg_{flex-shrink:0}.___STabLineItem_1v9ch_gg_.__disabled_1v9ch_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___SAddon_1v9ch_gg_{display:inline-flex;align-items:center;justify-content:center}.___STabLineItem_1v9ch_gg_._size_m_1v9ch_gg_{height:28px;min-width:18px}.___STabLineItem_1v9ch_gg_._size_l_1v9ch_gg_{height:40px;min-width:26px}.___STabLineItem_1v9ch_gg_._neighborLocation_left_1v9ch_gg_{margin-right:0}@media (prefers-reduced-motion){.___STabLineItem_1v9ch_gg_.__selected_1v9ch_gg_::after,.___STabLineItem_1v9ch_gg_::after,.___STabLineItem_1v9ch_gg_::before{transition:none}.___SCaret_1v9ch_gg_{display:none}}", /*__inner_css_end__*/"1v9ch_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__STabLine": "___STabLine_1khsc_gg_",
-  "_underlined": "__underlined_1khsc_gg_",
-  "__SCaret": "___SCaret_1khsc_gg_",
-  "__STabLineItem": "___STabLineItem_1khsc_gg_",
-  "_selected": "__selected_1khsc_gg_",
-  "_disabled": "__disabled_1khsc_gg_",
-  "__SAddon": "___SAddon_1khsc_gg_",
-  "_size_m": "_size_m_1khsc_gg_",
-  "_size_l": "_size_l_1khsc_gg_",
-  "_neighborLocation_left": "_neighborLocation_left_1khsc_gg_",
-  "__SText": "___SText_1khsc_gg_"
+  "__STabLine": "___STabLine_1v9ch_gg_",
+  "_underlined": "__underlined_1v9ch_gg_",
+  "__SCaret": "___SCaret_1v9ch_gg_",
+  "__STabLineItem": "___STabLineItem_1v9ch_gg_",
+  "_selected": "__selected_1v9ch_gg_",
+  "_disabled": "__disabled_1v9ch_gg_",
+  "__SAddon": "___SAddon_1v9ch_gg_",
+  "_size_m": "_size_m_1v9ch_gg_",
+  "_size_l": "_size_l_1v9ch_gg_",
+  "_neighborLocation_left": "_neighborLocation_left_1v9ch_gg_",
+  "__SText": "___SText_1v9ch_gg_"
 });
-const optionsA11yEnhance = {
-  onNeighborChange: (neighborElement, props) => {
-    if (neighborElement) {
-      neighborElement.focus();
-      if (props.behavior === 'auto') {
-        neighborElement.click();
-      }
-    }
-  },
-  childSelector: ['role', 'tab']
-};
 class TabLineRoot extends _core.Component {
   constructor(...args) {
     super(...args);
@@ -48,7 +37,7 @@ class TabLineRoot extends _core.Component {
     (0, _defineProperty2.default)(this, "prevValue", undefined);
     (0, _defineProperty2.default)(this, "itemRefs", {});
     (0, _defineProperty2.default)(this, "containerRef", /*#__PURE__*/_react.default.createRef());
-    (0, _defineProperty2.default)(this, "animationStartTimeout", -1);
+    (0, _defineProperty2.default)(this, "animationStartTimeout", null);
     (0, _defineProperty2.default)(this, "buttonRefsList", []);
     (0, _defineProperty2.default)(this, "handleAnimationStart", () => {
       if (this.state.animation?.started === false) {
@@ -84,11 +73,14 @@ class TabLineRoot extends _core.Component {
     this.prevValue = this.asProps.value;
   }
   componentWillUnmount() {
-    clearTimeout(this.animationStartTimeout);
+    if (this.animationStartTimeout) {
+      clearTimeout(this.animationStartTimeout);
+    }
   }
   animate() {
-    const fromNode = this.itemRefs[this.prevValue];
-    const toNode = this.itemRefs[this.asProps.value];
+    if (this.prevValue === undefined || this.asProps.value === undefined) return;
+    const fromNode = this.itemRefs[this.prevValue.toString()];
+    const toNode = this.itemRefs[this.asProps.value.toString()];
     const containerNode = this.containerRef.current;
     if (!fromNode || !toNode || !containerNode) return;
     const containerRect = containerNode.getBoundingClientRect();
@@ -104,7 +96,9 @@ class TabLineRoot extends _core.Component {
     this.setState({
       animation
     });
-    clearTimeout(this.animationStartTimeout);
+    if (this.animationStartTimeout) {
+      clearTimeout(this.animationStartTimeout);
+    }
     this.animationStartTimeout = setTimeout(this.handleAnimationStart, 0);
   }
   getItemProps(props, index) {
@@ -120,7 +114,8 @@ class TabLineRoot extends _core.Component {
       'tabIndex': isSelected ? 0 : -1,
       'aria-selected': isSelected,
       'ref': node => {
-        this.itemRefs[props.value] = node;
+        if (props.value === undefined) return;
+        this.itemRefs[props.value.toString()] = node;
       },
       'buttonRefsList': this.buttonRefsList,
       index
@@ -193,7 +188,17 @@ class TabLineRoot extends _core.Component {
   underlined: true,
   behavior: 'auto'
 });
-(0, _defineProperty2.default)(TabLineRoot, "enhance", [(0, _a11yEnhance.default)(optionsA11yEnhance)]);
+(0, _defineProperty2.default)(TabLineRoot, "enhance", [(0, _a11yEnhance.default)({
+  onNeighborChange: (neighborElement, props) => {
+    if (neighborElement) {
+      neighborElement.focus();
+      if (props.behavior === 'auto') {
+        neighborElement.click();
+      }
+    }
+  },
+  childSelector: ['role', 'tab']
+})]);
 function TabLineItem(props) {
   var _ref2 = arguments[0];
   const STabLineItem = _baseComponents.Box;

package/lib/cjs/TabLine.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabLine.js","names":["_core","require","_baseComponents","_addonTextChildren","_interopRequireDefault","_a11yEnhance","_typography","_react","style","sstyled","insert","optionsA11yEnhance","onNeighborChange","neighborElement","props","focus","behavior","click","childSelector","TabLineRoot","Component","constructor","args","_defineProperty2","default","animation","undefined","React","createRef","state","started","setState","value","e","handlers","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","size","isSelected","bindHandlerClick","node","buttonRefsList","getItemTextProps","tabLineSize","getCaretProps","left","onTransitionEnd","handleAnimationEnd","render","_ref","_ref5","STabLine","Box","SCaret","styles","Children","controlsLength","createElement","cn","assignProps","NeighborLocation","defaultValue","underlined","a11yEnhance","TabLineItem","_ref2","arguments[0]","STabLineItem","addonLeft","addonRight","neighborLocation","buttonRef","useRef","Detect","_ref6","TabLine","Item","Addon","tag","addonTextChildren","Text","_ref3","_ref7","ellipsis","SText","UikitText","_ref4","_ref8","SAddon","createComponent","wrapTabLine","wrapper","exports","_default"],"sources":["../../src/TabLine.jsx"],"sourcesContent":["import { NeighborLocation, 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-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  buttonRefsList = [];\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      'buttonRefsList': this.buttonRefsList,\n      index,\n    };\n  }\n\n  getItemTextProps(props, index) {\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(props) {\n  const STabLineItem = Root;\n  const { Children, styles, addonLeft, addonRight, neighborLocation, buttonRefsList, index } = props;\n  const buttonRef = React.useRef();\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(props) {\n  const { styles, ellipsis = true, size, buttonRefsList, index } = props;\n  const SText = Root;\n  return sstyled(styles)(<SText render={UikitText} ellipsis={ellipsis} size={size} hint:triggerRef={buttonRefsList[index]} />);\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":["_core","require","_baseComponents","_addonTextChildren","_interopRequireDefault","_a11yEnhance","_typography","_react","style","sstyled","insert","TabLineRoot","Component","constructor","args","_defineProperty2","default","animation","undefined","React","createRef","state","started","setState","value","e","handlers","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","size","isSelected","bindHandlerClick","node","buttonRefsList","getItemTextProps","tabLineSize","getCaretProps","left","onTransitionEnd","handleAnimationEnd","render","_ref","_ref5","STabLine","Box","SCaret","styles","Children","controlsLength","createElement","cn","assignProps","NeighborLocation","defaultValue","underlined","behavior","a11yEnhance","onNeighborChange","neighborElement","focus","click","childSelector","TabLineItem","_ref2","arguments[0]","STabLineItem","addonLeft","addonRight","neighborLocation","buttonRef","useRef","Detect","_ref6","TabLine","Item","Addon","tag","addonTextChildren","Text","_ref3","_ref7","ellipsis","SText","SemcoreText","_ref4","_ref8","SAddon","createComponent","wrapTabLine","wrapper","exports","_default"],"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/cjs/TabLine.type.js

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

package/lib/cjs/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/cjs/index.js

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

package/lib/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_TabLine","_interopRequireWildcard","require","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get"],"sources":["../../src/index.js"],"sourcesContent":["export { default } from './TabLine';\nexport * from './TabLine';\n"],"mappings":";;;;;;;;;;;;;AAAA,IAAAA,QAAA,GAAAC,uBAAA,CAAAC,OAAA;AACAC,MAAA,CAAAC,IAAA,CAAAJ,QAAA,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,QAAA,CAAAM,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAd,QAAA,CAAAM,GAAA;IAAA;EAAA;AAAA","ignoreList":[]}
+{"version":3,"file":"index.js","names":["_TabLine","_interopRequireWildcard","require","_TabLine2","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get"],"sources":["../../src/index.ts"],"sourcesContent":["export { default, wrapTabLine } from './TabLine';\nexport * from './TabLine.type';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,QAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,SAAA,GAAAD,OAAA;AAAAE,MAAA,CAAAC,IAAA,CAAAF,SAAA,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,SAAA,CAAAI,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAZ,SAAA,CAAAI,GAAA;IAAA;EAAA;AAAA","ignoreList":[]}

package/lib/es6/TabLine.js

@@ -8,35 +8,24 @@ import { NeighborLocation, Box } from '@semcore/base-components';
 import { createComponent, Component, sstyled, Root } from '@semcore/core';
 import addonTextChildren from '@semcore/core/lib/utils/addonTextChildren';
 import a11yEnhance from '@semcore/core/lib/utils/enhances/a11yEnhance';
-import { Text as UikitText } from '@semcore/typography';
+import { Text as SemcoreText } from '@semcore/typography';
 import React from 'react';
 /*!__reshadow-styles__:"./style/tab-line.shadow.css"*/
-const style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___STabLine_1khsc_gg_{position:relative;display:flex;width:100%;max-width:100%}.___STabLine_1khsc_gg_.__underlined_1khsc_gg_{border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabLineItem_1khsc_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, #191b23);margin-right:var(--intergalactic-spacing-4x, 16px);font-weight:var(--intergalactic-medium, 500)}.___STabLineItem_1khsc_gg_::-moz-focus-inner{border:0;padding:0}.___STabLineItem_1khsc_gg_:active{-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STabLineItem_1khsc_gg_:hover{-webkit-text-decoration:none;text-decoration:none}}.___STabLineItem_1khsc_gg_::after,.___STabLineItem_1khsc_gg_::before{content:\"\";position:absolute;left:0;bottom:-1px;height:3px;width:100%;background-color:transparent}.___STabLineItem_1khsc_gg_::before{transition:background-color calc(var(--intergalactic-duration-control, 200)*1ms) ease-in-out}@media (hover:hover){.___STabLineItem_1khsc_gg_:hover::before{background-color:var(--intergalactic-border-primary, #c4c7cf)}}.___STabLineItem_1khsc_gg_.__selected_1khsc_gg_::after{transition-delay:calc(var(--intergalactic-duration-control, 200)*1ms);background-color:var(--intergalactic-border-info-active, #006dca)}.___STabLineItem_1khsc_gg_ .___SAddon_1khsc_gg_:not(:last-child),.___STabLineItem_1khsc_gg_ .___SText_1khsc_gg_:not(:last-child){margin-right:var(--intergalactic-spacing-2x, 8px)}.___SCaret_1khsc_gg_{position:absolute;bottom:-1px;height:3px;background:var(--intergalactic-border-info-active, #006dca);transition:calc(var(--intergalactic-duration-control, 200)*1ms) all ease-in-out}.___STabLineItem_1khsc_gg_.__selected_1khsc_gg_{flex-shrink:0}.___STabLineItem_1khsc_gg_.__disabled_1khsc_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___SAddon_1khsc_gg_{display:inline-flex;align-items:center;justify-content:center}.___STabLineItem_1khsc_gg_._size_m_1khsc_gg_{height:28px;min-width:18px}.___STabLineItem_1khsc_gg_._size_l_1khsc_gg_{height:40px;min-width:26px}.___STabLineItem_1khsc_gg_._neighborLocation_left_1khsc_gg_{margin-right:0}@media (prefers-reduced-motion){.___STabLineItem_1khsc_gg_.__selected_1khsc_gg_::after,.___STabLineItem_1khsc_gg_::after,.___STabLineItem_1khsc_gg_::before{transition:none}.___SCaret_1khsc_gg_{display:none}}", /*__inner_css_end__*/"1khsc_gg_"),
+const style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___STabLine_1v9ch_gg_{position:relative;display:flex;width:100%;max-width:100%}.___STabLine_1v9ch_gg_.__underlined_1v9ch_gg_{border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabLineItem_1v9ch_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, #191b23);margin-right:var(--intergalactic-spacing-4x, 16px);font-weight:var(--intergalactic-medium, 500)}.___STabLineItem_1v9ch_gg_::-moz-focus-inner{border:0;padding:0}.___STabLineItem_1v9ch_gg_:active{-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STabLineItem_1v9ch_gg_:hover{-webkit-text-decoration:none;text-decoration:none}}.___STabLineItem_1v9ch_gg_::after,.___STabLineItem_1v9ch_gg_::before{content:\"\";position:absolute;left:0;bottom:-1px;height:3px;width:100%;background-color:transparent}.___STabLineItem_1v9ch_gg_::before{transition:background-color calc(var(--intergalactic-duration-control, 200)*1ms) ease-in-out}@media (hover:hover){.___STabLineItem_1v9ch_gg_:hover::before{background-color:var(--intergalactic-border-primary, #c4c7cf)}}.___STabLineItem_1v9ch_gg_.__selected_1v9ch_gg_::after{transition-delay:calc(var(--intergalactic-duration-control, 200)*1ms);background-color:var(--intergalactic-border-info-active, #006dca)}.___STabLineItem_1v9ch_gg_ .___SAddon_1v9ch_gg_:not(:last-child),.___STabLineItem_1v9ch_gg_ .___SText_1v9ch_gg_:not(:last-child){margin-right:var(--intergalactic-spacing-2x, 8px)}.___SCaret_1v9ch_gg_{position:absolute;bottom:-1px;height:3px;background:var(--intergalactic-border-info-active, #006dca);transition:calc(var(--intergalactic-duration-control, 200)*1ms) all ease-in-out}.___STabLineItem_1v9ch_gg_.__selected_1v9ch_gg_{flex-shrink:0}.___STabLineItem_1v9ch_gg_.__disabled_1v9ch_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___SAddon_1v9ch_gg_{display:inline-flex;align-items:center;justify-content:center}.___STabLineItem_1v9ch_gg_._size_m_1v9ch_gg_{height:28px;min-width:18px}.___STabLineItem_1v9ch_gg_._size_l_1v9ch_gg_{height:40px;min-width:26px}.___STabLineItem_1v9ch_gg_._neighborLocation_left_1v9ch_gg_{margin-right:0}@media (prefers-reduced-motion){.___STabLineItem_1v9ch_gg_.__selected_1v9ch_gg_::after,.___STabLineItem_1v9ch_gg_::after,.___STabLineItem_1v9ch_gg_::before{transition:none}.___SCaret_1v9ch_gg_{display:none}}", /*__inner_css_end__*/"1v9ch_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__STabLine": "___STabLine_1khsc_gg_",
-  "_underlined": "__underlined_1khsc_gg_",
-  "__SCaret": "___SCaret_1khsc_gg_",
-  "__STabLineItem": "___STabLineItem_1khsc_gg_",
-  "_selected": "__selected_1khsc_gg_",
-  "_disabled": "__disabled_1khsc_gg_",
-  "__SAddon": "___SAddon_1khsc_gg_",
-  "_size_m": "_size_m_1khsc_gg_",
-  "_size_l": "_size_l_1khsc_gg_",
-  "_neighborLocation_left": "_neighborLocation_left_1khsc_gg_",
-  "__SText": "___SText_1khsc_gg_"
+  "__STabLine": "___STabLine_1v9ch_gg_",
+  "_underlined": "__underlined_1v9ch_gg_",
+  "__SCaret": "___SCaret_1v9ch_gg_",
+  "__STabLineItem": "___STabLineItem_1v9ch_gg_",
+  "_selected": "__selected_1v9ch_gg_",
+  "_disabled": "__disabled_1v9ch_gg_",
+  "__SAddon": "___SAddon_1v9ch_gg_",
+  "_size_m": "_size_m_1v9ch_gg_",
+  "_size_l": "_size_l_1v9ch_gg_",
+  "_neighborLocation_left": "_neighborLocation_left_1v9ch_gg_",
+  "__SText": "___SText_1v9ch_gg_"
 });
-const optionsA11yEnhance = {
-  onNeighborChange: (neighborElement, props) => {
-    if (neighborElement) {
-      neighborElement.focus();
-      if (props.behavior === 'auto') {
-        neighborElement.click();
-      }
-    }
-  },
-  childSelector: ['role', 'tab']
-};
 class TabLineRoot extends Component {
   constructor(...args) {
     super(...args);
@@ -46,7 +35,7 @@ class TabLineRoot extends Component {
     _defineProperty(this, "prevValue", undefined);
     _defineProperty(this, "itemRefs", {});
     _defineProperty(this, "containerRef", /*#__PURE__*/React.createRef());
-    _defineProperty(this, "animationStartTimeout", -1);
+    _defineProperty(this, "animationStartTimeout", null);
     _defineProperty(this, "buttonRefsList", []);
     _defineProperty(this, "handleAnimationStart", () => {
       if (this.state.animation?.started === false) {
@@ -82,11 +71,14 @@ class TabLineRoot extends Component {
     this.prevValue = this.asProps.value;
   }
   componentWillUnmount() {
-    clearTimeout(this.animationStartTimeout);
+    if (this.animationStartTimeout) {
+      clearTimeout(this.animationStartTimeout);
+    }
   }
   animate() {
-    const fromNode = this.itemRefs[this.prevValue];
-    const toNode = this.itemRefs[this.asProps.value];
+    if (this.prevValue === undefined || this.asProps.value === undefined) return;
+    const fromNode = this.itemRefs[this.prevValue.toString()];
+    const toNode = this.itemRefs[this.asProps.value.toString()];
     const containerNode = this.containerRef.current;
     if (!fromNode || !toNode || !containerNode) return;
     const containerRect = containerNode.getBoundingClientRect();
@@ -102,7 +94,9 @@ class TabLineRoot extends Component {
     this.setState({
       animation
     });
-    clearTimeout(this.animationStartTimeout);
+    if (this.animationStartTimeout) {
+      clearTimeout(this.animationStartTimeout);
+    }
     this.animationStartTimeout = setTimeout(this.handleAnimationStart, 0);
   }
   getItemProps(props, index) {
@@ -118,7 +112,8 @@ class TabLineRoot extends Component {
       'tabIndex': isSelected ? 0 : -1,
       'aria-selected': isSelected,
       'ref': node => {
-        this.itemRefs[props.value] = node;
+        if (props.value === undefined) return;
+        this.itemRefs[props.value.toString()] = node;
       },
       'buttonRefsList': this.buttonRefsList,
       index
@@ -191,7 +186,17 @@ _defineProperty(TabLineRoot, "defaultProps", {
   underlined: true,
   behavior: 'auto'
 });
-_defineProperty(TabLineRoot, "enhance", [a11yEnhance(optionsA11yEnhance)]);
+_defineProperty(TabLineRoot, "enhance", [a11yEnhance({
+  onNeighborChange: (neighborElement, props) => {
+    if (neighborElement) {
+      neighborElement.focus();
+      if (props.behavior === 'auto') {
+        neighborElement.click();
+      }
+    }
+  },
+  childSelector: ['role', 'tab']
+})]);
 function TabLineItem(props) {
   var _ref2 = arguments[0];
   const STabLineItem = Box;
@@ -236,7 +241,7 @@ function Text(props) {
     buttonRefsList,
     index
   } = props;
-  const SText = UikitText;
+  const SText = SemcoreText;
   return _ref7 = sstyled(styles), /*#__PURE__*/React.createElement(SText, _ref7.cn("SText", {
     ..._assignProps3({
       "ellipsis": ellipsis,

package/lib/es6/TabLine.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabLine.js","names":["NeighborLocation","Box","createComponent","Component","sstyled","Root","addonTextChildren","a11yEnhance","Text","UikitText","React","style","_sstyled","insert","optionsA11yEnhance","onNeighborChange","neighborElement","props","focus","behavior","click","childSelector","TabLineRoot","constructor","args","_defineProperty","animation","undefined","createRef","state","started","setState","value","e","handlers","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","size","isSelected","bindHandlerClick","node","buttonRefsList","getItemTextProps","tabLineSize","getCaretProps","left","onTransitionEnd","handleAnimationEnd","render","_ref","_ref5","STabLine","SCaret","styles","Children","controlsLength","createElement","cn","_assignProps","defaultValue","underlined","TabLineItem","_ref2","arguments[0]","STabLineItem","addonLeft","addonRight","neighborLocation","buttonRef","useRef","Detect","_ref6","_assignProps2","TabLine","Item","Addon","tag","_ref3","_ref7","ellipsis","SText","_assignProps3","_ref4","_ref8","SAddon","_assignProps4","wrapTabLine","wrapper"],"sources":["../../src/TabLine.jsx"],"sourcesContent":["import { NeighborLocation, 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-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  buttonRefsList = [];\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      'buttonRefsList': this.buttonRefsList,\n      index,\n    };\n  }\n\n  getItemTextProps(props, index) {\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(props) {\n  const STabLineItem = Root;\n  const { Children, styles, addonLeft, addonRight, neighborLocation, buttonRefsList, index } = props;\n  const buttonRef = React.useRef();\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(props) {\n  const { styles, ellipsis = true, size, buttonRefsList, index } = props;\n  const SText = Root;\n  return sstyled(styles)(<SText render={UikitText} ellipsis={ellipsis} size={size} hint:triggerRef={buttonRefsList[index]} />);\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","constructor","args","_defineProperty","animation","undefined","createRef","state","started","setState","value","e","handlers","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","size","isSelected","bindHandlerClick","node","buttonRefsList","getItemTextProps","tabLineSize","getCaretProps","left","onTransitionEnd","handleAnimationEnd","render","_ref","_ref5","STabLine","SCaret","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","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/esm/TabLine.mjs

@@ -10,35 +10,24 @@ const style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    '.___STabLine_1khsc_gg_{position:relative;display:flex;width:100%;max-width:100%}.___STabLine_1khsc_gg_.__underlined_1khsc_gg_{border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabLineItem_1khsc_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, #191b23);margin-right:var(--intergalactic-spacing-4x, 16px);font-weight:var(--intergalactic-medium, 500)}.___STabLineItem_1khsc_gg_::-moz-focus-inner{border:0;padding:0}.___STabLineItem_1khsc_gg_:active{-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STabLineItem_1khsc_gg_:hover{-webkit-text-decoration:none;text-decoration:none}}.___STabLineItem_1khsc_gg_::after,.___STabLineItem_1khsc_gg_::before{content:"";position:absolute;left:0;bottom:-1px;height:3px;width:100%;background-color:transparent}.___STabLineItem_1khsc_gg_::before{transition:background-color calc(var(--intergalactic-duration-control, 200)*1ms) ease-in-out}@media (hover:hover){.___STabLineItem_1khsc_gg_:hover::before{background-color:var(--intergalactic-border-primary, #c4c7cf)}}.___STabLineItem_1khsc_gg_.__selected_1khsc_gg_::after{transition-delay:calc(var(--intergalactic-duration-control, 200)*1ms);background-color:var(--intergalactic-border-info-active, #006dca)}.___STabLineItem_1khsc_gg_ .___SAddon_1khsc_gg_:not(:last-child),.___STabLineItem_1khsc_gg_ .___SText_1khsc_gg_:not(:last-child){margin-right:var(--intergalactic-spacing-2x, 8px)}.___SCaret_1khsc_gg_{position:absolute;bottom:-1px;height:3px;background:var(--intergalactic-border-info-active, #006dca);transition:calc(var(--intergalactic-duration-control, 200)*1ms) all ease-in-out}.___STabLineItem_1khsc_gg_.__selected_1khsc_gg_{flex-shrink:0}.___STabLineItem_1khsc_gg_.__disabled_1khsc_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___SAddon_1khsc_gg_{display:inline-flex;align-items:center;justify-content:center}.___STabLineItem_1khsc_gg_._size_m_1khsc_gg_{height:28px;min-width:18px}.___STabLineItem_1khsc_gg_._size_l_1khsc_gg_{height:40px;min-width:26px}.___STabLineItem_1khsc_gg_._neighborLocation_left_1khsc_gg_{margin-right:0}@media (prefers-reduced-motion){.___STabLineItem_1khsc_gg_.__selected_1khsc_gg_::after,.___STabLineItem_1khsc_gg_::after,.___STabLineItem_1khsc_gg_::before{transition:none}.___SCaret_1khsc_gg_{display:none}}',
+    '.___STabLine_1v9ch_gg_{position:relative;display:flex;width:100%;max-width:100%}.___STabLine_1v9ch_gg_.__underlined_1v9ch_gg_{border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabLineItem_1v9ch_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, #191b23);margin-right:var(--intergalactic-spacing-4x, 16px);font-weight:var(--intergalactic-medium, 500)}.___STabLineItem_1v9ch_gg_::-moz-focus-inner{border:0;padding:0}.___STabLineItem_1v9ch_gg_:active{-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STabLineItem_1v9ch_gg_:hover{-webkit-text-decoration:none;text-decoration:none}}.___STabLineItem_1v9ch_gg_::after,.___STabLineItem_1v9ch_gg_::before{content:"";position:absolute;left:0;bottom:-1px;height:3px;width:100%;background-color:transparent}.___STabLineItem_1v9ch_gg_::before{transition:background-color calc(var(--intergalactic-duration-control, 200)*1ms) ease-in-out}@media (hover:hover){.___STabLineItem_1v9ch_gg_:hover::before{background-color:var(--intergalactic-border-primary, #c4c7cf)}}.___STabLineItem_1v9ch_gg_.__selected_1v9ch_gg_::after{transition-delay:calc(var(--intergalactic-duration-control, 200)*1ms);background-color:var(--intergalactic-border-info-active, #006dca)}.___STabLineItem_1v9ch_gg_ .___SAddon_1v9ch_gg_:not(:last-child),.___STabLineItem_1v9ch_gg_ .___SText_1v9ch_gg_:not(:last-child){margin-right:var(--intergalactic-spacing-2x, 8px)}.___SCaret_1v9ch_gg_{position:absolute;bottom:-1px;height:3px;background:var(--intergalactic-border-info-active, #006dca);transition:calc(var(--intergalactic-duration-control, 200)*1ms) all ease-in-out}.___STabLineItem_1v9ch_gg_.__selected_1v9ch_gg_{flex-shrink:0}.___STabLineItem_1v9ch_gg_.__disabled_1v9ch_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___SAddon_1v9ch_gg_{display:inline-flex;align-items:center;justify-content:center}.___STabLineItem_1v9ch_gg_._size_m_1v9ch_gg_{height:28px;min-width:18px}.___STabLineItem_1v9ch_gg_._size_l_1v9ch_gg_{height:40px;min-width:26px}.___STabLineItem_1v9ch_gg_._neighborLocation_left_1v9ch_gg_{margin-right:0}@media (prefers-reduced-motion){.___STabLineItem_1v9ch_gg_.__selected_1v9ch_gg_::after,.___STabLineItem_1v9ch_gg_::after,.___STabLineItem_1v9ch_gg_::before{transition:none}.___SCaret_1v9ch_gg_{display:none}}',
     /*__inner_css_end__*/
-    "1khsc_gg_"
+    "1v9ch_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__STabLine": "___STabLine_1khsc_gg_",
-    "_underlined": "__underlined_1khsc_gg_",
-    "__SCaret": "___SCaret_1khsc_gg_",
-    "__STabLineItem": "___STabLineItem_1khsc_gg_",
-    "_selected": "__selected_1khsc_gg_",
-    "_disabled": "__disabled_1khsc_gg_",
-    "__SAddon": "___SAddon_1khsc_gg_",
-    "_size_m": "_size_m_1khsc_gg_",
-    "_size_l": "_size_l_1khsc_gg_",
-    "_neighborLocation_left": "_neighborLocation_left_1khsc_gg_",
-    "__SText": "___SText_1khsc_gg_"
+    "__STabLine": "___STabLine_1v9ch_gg_",
+    "_underlined": "__underlined_1v9ch_gg_",
+    "__SCaret": "___SCaret_1v9ch_gg_",
+    "__STabLineItem": "___STabLineItem_1v9ch_gg_",
+    "_selected": "__selected_1v9ch_gg_",
+    "_disabled": "__disabled_1v9ch_gg_",
+    "__SAddon": "___SAddon_1v9ch_gg_",
+    "_size_m": "_size_m_1v9ch_gg_",
+    "_size_l": "_size_l_1v9ch_gg_",
+    "_neighborLocation_left": "_neighborLocation_left_1v9ch_gg_",
+    "__SText": "___SText_1v9ch_gg_"
   })
 );
-const optionsA11yEnhance = {
-  onNeighborChange: (neighborElement, props) => {
-    if (neighborElement) {
-      neighborElement.focus();
-      if (props.behavior === "auto") {
-        neighborElement.click();
-      }
-    }
-  },
-  childSelector: ["role", "tab"]
-};
 class TabLineRoot extends Component {
   constructor(...args) {
     super(...args);
@@ -48,7 +37,7 @@ class TabLineRoot extends 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", () => {
       if (this.state.animation?.started === false) {
@@ -84,11 +73,14 @@ class TabLineRoot extends Component {
     this.prevValue = this.asProps.value;
   }
   componentWillUnmount() {
-    clearTimeout(this.animationStartTimeout);
+    if (this.animationStartTimeout) {
+      clearTimeout(this.animationStartTimeout);
+    }
   }
   animate() {
-    const fromNode = this.itemRefs[this.prevValue];
-    const toNode = this.itemRefs[this.asProps.value];
+    if (this.prevValue === void 0 || this.asProps.value === void 0) return;
+    const fromNode = this.itemRefs[this.prevValue.toString()];
+    const toNode = this.itemRefs[this.asProps.value.toString()];
     const containerNode = this.containerRef.current;
     if (!fromNode || !toNode || !containerNode) return;
     const containerRect = containerNode.getBoundingClientRect();
@@ -104,7 +96,9 @@ class TabLineRoot extends Component {
     this.setState({
       animation
     });
-    clearTimeout(this.animationStartTimeout);
+    if (this.animationStartTimeout) {
+      clearTimeout(this.animationStartTimeout);
+    }
     this.animationStartTimeout = setTimeout(this.handleAnimationStart, 0);
   }
   getItemProps(props, index) {
@@ -120,7 +114,8 @@ class TabLineRoot extends Component {
       "tabIndex": isSelected ? 0 : -1,
       "aria-selected": isSelected,
       "ref": (node) => {
-        this.itemRefs[props.value] = node;
+        if (props.value === void 0) return;
+        this.itemRefs[props.value.toString()] = node;
       },
       "buttonRefsList": this.buttonRefsList,
       index
@@ -192,7 +187,17 @@ _defineProperty(TabLineRoot, "defaultProps", {
   underlined: true,
   behavior: "auto"
 });
-_defineProperty(TabLineRoot, "enhance", [a11yEnhance(optionsA11yEnhance)]);
+_defineProperty(TabLineRoot, "enhance", [a11yEnhance({
+  onNeighborChange: (neighborElement, props) => {
+    if (neighborElement) {
+      neighborElement.focus();
+      if (props.behavior === "auto") {
+        neighborElement.click();
+      }
+    }
+  },
+  childSelector: ["role", "tab"]
+})]);
 function TabLineItem(props) {
   var _ref2 = arguments[0];
   const STabLineItem = Box;

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/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,92 +1,2 @@
-import type { Box, BoxProps, NeighborItemProps, NeighborLocationProps } from '@semcore/base-components';
-import type { PropGetterFn, Intergalactic } from '@semcore/core';
-import type { Text } from '@semcore/typography';
-import type React from 'react';
-
-export type TabLineValue = string | number | boolean;
-
-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';
-  };
-
-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;
-  };
-
-export type TabLineContext = {
-  getItemProps: PropGetterFn;
-};
-
-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 Text;
-    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';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/tab-line",
   "description": "Semrush TabLine Component",
-  "version": "17.0.1",
+  "version": "17.0.2-prerelease.1",
   "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.1"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^17.0.1"
+    "@semcore/base-components": "^17.0.2"
   },
   "repository": {
     "type": "git",
@@ -26,10 +26,10 @@
   },
   "devDependencies": {
     "@semcore/core": "17.0.1",
-    "@semcore/base-components": "17.0.1",
-    "@semcore/testing-utils": "1.0.0"
+    "@semcore/testing-utils": "1.0.0",
+    "@semcore/base-components": "17.0.2-prerelease.1"
   },
   "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, NeighborItemProps, NeighborLocationProps } 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 TabLineValue = string | number | boolean;\n\nexport type TabLineProps<T extends TabLineValue = TabLineValue> = 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\nexport type TabLineItemProps = 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?: TabLineValue;\n    /** Left addon tag */\n    addonLeft?: React.ElementType;\n    /** Right addon tag  */\n    addonRight?: React.ElementType;\n  };\n\nexport type TabLineContext = {\n  getItemProps: PropGetterFn;\n};\n\nexport type TabLineHandlers = {\n  value: (value: TabLineValue) => void;\n};\n\ntype IntergalacticTabLineComponent<PropsExtending = {}> = (<\n  Value extends TabLineValue,\n  Tag extends Intergalactic.Tag = 'div',\n>(\n  props: Intergalactic.InternalTypings.ComponentProps<\n    Tag,\n    'div',\n    TabLineProps<Value>,\n    TabLineContext,\n    [handlers: TabLineHandlers]\n  > &\n  PropsExtending,\n) => Intergalactic.InternalTypings.ComponentRenderingResults) &\nIntergalactic.InternalTypings.ComponentAdditive<'div', 'div', TabLineProps>;\n\ndeclare const TabLine: IntergalacticTabLineComponent & {\n  Item: Intergalactic.Component<'div', TabLineItemProps, {}, [handlers: TabLineHandlers]> & {\n    Text: typeof Text;\n    Addon: typeof Box;\n  };\n};\n\ndeclare const wrapTabLine: <PropsExtending extends {}>(\n  wrapper: (\n    props: Intergalactic.InternalTypings.UntypeRefAndTag<\n      Intergalactic.InternalTypings.ComponentPropsNesting<IntergalacticTabLineComponent>\n    > &\n    PropsExtending,\n  ) => React.ReactNode,\n) => IntergalacticTabLineComponent<PropsExtending>;\nexport { wrapTabLine };\n\nexport default TabLine;\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, NeighborItemProps, NeighborLocationProps } 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 TabLineValue = string | number | boolean;\n\nexport type TabLineProps<T extends TabLineValue = TabLineValue> = 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\nexport type TabLineItemProps = 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?: TabLineValue;\n    /** Left addon tag */\n    addonLeft?: React.ElementType;\n    /** Right addon tag  */\n    addonRight?: React.ElementType;\n  };\n\nexport type TabLineContext = {\n  getItemProps: PropGetterFn;\n};\n\nexport type TabLineHandlers = {\n  value: (value: TabLineValue) => void;\n};\n\ntype IntergalacticTabLineComponent<PropsExtending = {}> = (<\n  Value extends TabLineValue,\n  Tag extends Intergalactic.Tag = 'div',\n>(\n  props: Intergalactic.InternalTypings.ComponentProps<\n    Tag,\n    'div',\n    TabLineProps<Value>,\n    TabLineContext,\n    [handlers: TabLineHandlers]\n  > &\n  PropsExtending,\n) => Intergalactic.InternalTypings.ComponentRenderingResults) &\nIntergalactic.InternalTypings.ComponentAdditive<'div', 'div', TabLineProps>;\n\ndeclare const TabLine: IntergalacticTabLineComponent & {\n  Item: Intergalactic.Component<'div', TabLineItemProps, {}, [handlers: TabLineHandlers]> & {\n    Text: typeof Text;\n    Addon: typeof Box;\n  };\n};\n\ndeclare const wrapTabLine: <PropsExtending extends {}>(\n  wrapper: (\n    props: Intergalactic.InternalTypings.UntypeRefAndTag<\n      Intergalactic.InternalTypings.ComponentPropsNesting<IntergalacticTabLineComponent>\n    > &\n    PropsExtending,\n  ) => React.ReactNode,\n) => IntergalacticTabLineComponent<PropsExtending>;\nexport { wrapTabLine };\n\nexport default TabLine;\n"],"mappings":"","ignoreList":[]}