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