@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 1.08 kB
JavaScript
;var e=require("react/jsx-runtime"),t=require("@mui/material"),r=require("react"),a=require("../Typography/Typography.js"),i=require("./_partials/ActiveIndicator.js"),s=require("./_partials/ButtonTabsWrapper.js"),n=require("./_partials/TabButton.js");module.exports=({tabs:o,defaultActiveTab:c=0,onTabChange:l,id:d,sx:u})=>{const[p,m]=r.useState(c),x=t.useTheme(),b=o.some(e=>void 0!==e.active),h=(()=>{if(b){const e=o.findIndex(e=>e.active);return-1!==e?e:0}return p})(),j=o.length,v=x.m.xs,q=`calc((100% - ${x.p.sm} - (${j} - 1) * ${v}) / ${j})`,T=`translateX(calc(${h} * (100% + ${v})))`;return e.jsxs(s,{id:d,tabCount:j,sx:u,children:[e.jsx(i,{sx:{width:q,transform:T}}),o.map((t,r)=>{const i=t.index??r,s=b?t.active:h===r;return e.jsx(n,{isActive:s,onClick:()=>((e,t)=>{e.disabled||(b||m(t),e.onClick?.(),l?.(t))})(t,r),disabled:t.disabled,children:e.jsx(a,{variation:"sm",component:"p",sx:{transition:"color 300ms ease",color:s?x.custom.palette.text.lockedWhite:x.custom.palette.text.primary,fontWeight:500},disabled:t.disabled,children:t.label})},i)})]})};