@lanaco/lnc-react-ui/dist/TabItem.cjs

React component library

"use strict";const z=require("react/jsx-runtime"),m=require("react"),r=require("./index-BPVoEhTF.cjs"),E=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),t=require("./utils-NZLCh-J5.cjs"),N=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),y=require("./useUpdateEffect-BtMgpgIV.cjs"),S=e=>e=="small"?"3.125rem":e=="medium"?"3.375rem":"3.625rem",_=E.newStyled.div`
  box-sizing: border-box;
  ${e=>e.disabled===!0&&t.getDisabledStateCss(e.theme)};
  min-width: 5.25rem;
  ${e=>e.fullWidth&&"width: 100%"};
  display: flex;
  justify-content: center;
  align-items: center;

  height: ${e=>S(e.size)};
  ${e=>t.getComponentTypographyCss(e.theme,i(e.type),e.size,"enabled")};
  ${e=>!e.disabled&&"cursor: pointer"};
  color: ${e=>!e.disabled&&t.getColorRgbaValue(e.theme,i(e.type),e.color,e.active?"active":"enabled","text")};
  background-color: ${e=>e.type=="regular"||e.type=="pill"&&(e.disabled==!0||e.active==!1)?"transparent":!e.disabled&&t.getColorRgbaValue(e.theme,i(e.type),e.color,e.active?"active":"enabled","background","backgroundOpacity")};
  ${e=>e.type=="underline"&&e.last==!1&&"border-right: 1px solid "+t.getColorRgbaValue(e.theme,i(e.type),e.color,"enabled","line")};
  ${e=>h(e.theme,e.type,e.active,e.disabled,e.color,"enabled")};
  ${e=>D(e.theme,e.type,e.first,e.last)};
  &:hover {
    color: ${e=>!e.disabled&&t.getColorRgbaValue(e.theme,i(e.type),e.color,"hover","text")};
    background-color: ${e=>e.type=="regular"?"transparent":!e.disabled&&t.getColorRgbaValue(e.theme,i(e.type),e.color,"hover","background","backgroundOpacity")};
    ${e=>h(e.theme,e.type,e.active,e.disabled,e.color,"hover")};
  }
  &:active {
    background: ${e=>t.getColorRgbaValue(e.theme,i(e.type),e.color,"active","background","backgroundOpacity")};
  }
`,i=e=>e=="underline"?"TabUnderline":e=="pill"?"TabPill":"TabRegular",D=(e,l,n,a)=>{if(l=="pill")return`border-radius: ${t.getBorderRadiusValueWithUnits(e,"regular")}`;if(l=="underline"&&n)return`border-radius: ${t.getBorderRadiusValueWithUnits(e,"regular")} 0  0 ${t.getBorderRadiusValueWithUnits(e,"regular")}`;if(l=="underline"&&a)return`border-radius: 0 ${t.getBorderRadiusValueWithUnits(e,"regular")} ${t.getBorderRadiusValueWithUnits(e,"regular")} 0`},h=(e,l,n,a,u,o)=>{if(l!="pill")return`border-bottom: ${!a&&(n||o=="hover")?e.components[l==="regular"?"TabRegular":"TabUnderline"].default.enabled.lineHeight+"":e.components[l==="regular"?"TabRegular":"TabUnderline"].default.hover.lineHeight+""} solid ${t.getColorRgbaValue(e,i(l),u,n&&!a?"active":a?"enabled":o,"line")}`},T=m.forwardRef((e,l)=>{const{type:n="underline",disabled:a,first:u=!1,last:o=!1,fullWidth:v=!1,active:c=!1,activeIndex:d,index:s,onFocus:$=()=>{},onBlur:R=()=>{},onClick:g=()=>{},onKeyDown:C=()=>{},itemClick:b=()=>{},size:P="small",color:k="primary",className:x="",style:V={},children:U,...w}=e,B=N.useTheme(),[W,f]=m.useState(c),q={theme:B,color:k,size:P,style:V,className:"lnc-ui-tabitem "+x},O=j=>{b&&!a&&b(s),g&&!a&&g(j)};return y.useUpdateEffect(()=>{f(c)},[c]),y.useUpdateEffect(()=>{f(d==s)},[d]),z.jsx(_,{ref:l,onFocus:$,onBlur:R,onClick:O,onKeyDown:C,disabled:a,type:n,first:u,last:o,fullWidth:v,active:W,...q,...w,children:U})});T.propTypes={type:r.PropTypes.oneOf(["regular","pill","underline"]),first:r.PropTypes.bool,last:r.PropTypes.bool,fullWidth:r.PropTypes.bool,active:r.PropTypes.bool,onClick:r.PropTypes.func,onBlur:r.PropTypes.func,onFocus:r.PropTypes.func,onKeyDown:r.PropTypes.func,className:r.PropTypes.string,style:r.PropTypes.object,color:r.PropTypes.oneOf(["primary","secondary","success","warning","danger","information","neutral","gray"]),size:r.PropTypes.oneOf(["small","medium","large"])};module.exports=T;