| 1 |
var Q=Object.defineProperty,U=Object.defineProperties;var Z=Object.getOwnPropertyDescriptors;var z=Object.getOwnPropertySymbols;var _=Object.prototype.hasOwnProperty,tt=Object.prototype.propertyIsEnumerable;var R=(o,a,c)=>a in o?Q(o,a,{enumerable:!0,configurable:!0,writable:!0,value:c}):o[a]=c,s=(o,a)=>{for(var c in a||(a={}))_.call(a,c)&&R(o,c,a[c]);if(z)for(var c of z(a))tt.call(a,c)&&R(o,c,a[c]);return o},k=(o,a)=>U(o,Z(a));import{a as et,r as b,j as l,dW as I}from"./main-294.js";const T={default:{tabHeader:{bb:"1px solid var(--b-79-94)",bc:"var(--white-0-95)"},tabButton:{cr:"var(--black-0-83)",fs:"14px",fw:"500"},tabButtonHover:{cr:"var(--black-0)",bc:"var(--b-79-97)"},tabButtonActive:{cr:"var(--b-50)",fw:"600"},selector:{bc:"var(--b-50)",bs:"0 2px 4px rgba(var(--bf-primary-rgb), 0.3)"},selectorHeight:"2px",navButton:{bc:"var(--white-100)",cr:"var(--black-0-60)",brs:"6px",b:"1px solid var(--b-79-94)",bs:"0 2px 4px rgba(0, 0, 0, 0.1)"},navButtonHover:{bc:"var(--b-79-97)",cr:"var(--b-50)",bcr:"var(--b-50)"}},primary:{tabHeader:{bb:"1px solid rgba(var(--bf-primary-rgb), 0.2)",bc:"var(--bf-primary)"},tabButton:{cr:"rgba(255, 255, 255, 0.7)",fs:"14px",fw:"500"},tabButtonHover:{cr:"rgba(255, 255, 255, 0.9)",bc:"rgba(255, 255, 255, 0.1)"},tabButtonActive:{cr:"#ffffff",fw:"600",bc:"rgba(255, 255, 255, 0.15)"},selector:{bc:"#ffffff",bs:"0 2px 6px rgba(255, 255, 255, 0.4)"},selectorHeight:"3px",navButton:{bc:"rgba(255, 255, 255, 0.2)",cr:"#ffffff",brs:"6px",b:"1px solid rgba(255, 255, 255, 0.3)",bs:"0 2px 4px rgba(0, 0, 0, 0.2)"},navButtonHover:{bc:"rgba(255, 255, 255, 0.3)",cr:"#ffffff",bcr:"rgba(255, 255, 255, 0.5)"}},tertiary:{tabHeader:{bb:"1px solid var(--bf-bdr-clr-tertiary)",bc:"var(--bf-bg-tertiary)"},tabButton:{cr:"var(--bf-text-clr-gray)",fs:"14px",fw:"500"},tabButtonHover:{cr:"var(--bf-text-clr-offwhite)",bc:"var(--bf-bg-tertiary-hover)"},tabButtonActive:{cr:"var(--bf-text-clr-white)",fw:"600",bc:"rgba(255, 255, 255, 0.05)"},selector:{bc:"var(--bf-text-clr-white)",bs:"0 2px 4px rgba(255, 255, 255, 0.2)"},selectorHeight:"2px",navButton:{bc:"rgba(255, 255, 255, 0.08)",cr:"var(--bf-text-clr-offwhite)",brs:"6px",b:"1px solid rgba(255, 255, 255, 0.15)",bs:"0 2px 4px rgba(0, 0, 0, 0.3)"},navButtonHover:{bc:"rgba(255, 255, 255, 0.15)",cr:"var(--bf-text-clr-white)",bcr:"rgba(255, 255, 255, 0.3)"}},"tertiary-clean-fullwidth":{tabHeader:{bb:"1px solid var(--bf-bdr-clr-tertiary)",bc:"transparent",p:0},tabButton:{cr:"var(--bf-text-clr-secondary)",fs:"14px",fw:"500",flex:1,brs:"var(--bf-bdr-radius-sm) var(--bf-bdr-radius-sm) 0px 0px"},tabButtonHover:{cr:"var(--bf-text-clr-darkgray)",bc:"var(--bf-bg-offwhite)"},tabButtonActive:{cr:"var(--bf-text-clr-tertiary)",fw:"600",bc:"transparent"},selector:{bc:"var(--bf-text-clr-tertiary)",bs:"0 2px 4px rgba(255, 255, 255, 0.2)"},selectorHeight:"2px",navButton:{bc:"transparent",cr:"var(--bf-text-clr-gray)",brs:"6px",b:"1px solid transparent",bs:"0 2px 4px rgba(0, 0, 0, 0.3)"},navButtonHover:{bc:"var(--bf-bg-tertiary-hover)",cr:"var(--bf-text-clr-white)",bcr:"var(--bf-text-clr-white)"}},"clean-bottom-line":{tabHeader:{bb:"1px solid #e1e5e9",bc:"transparent",p:"0",gp:4},tabButton:{flex:1,cr:"#6c757d",fs:"14px",fw:"500",p:"12px 20px",brs:"var(--bf-bdr-radius-sm) var(--bf-bdr-radius-sm) 0 0",pn:"relative"},tabButtonHover:{cr:"#495057",bc:"var(--bf-bg-lightgray)"},tabButtonActive:{bc:"var(--bf-bg-ghostwhite)",cr:"var(--bf-text-clr-darkgray)",fw:"600"},selector:{bc:"var(--bf-tertiary)",bs:"none",h:"2px"},selectorHeight:"2px",navButton:{bc:"#ffffff",cr:"var(--bf-text-clr-gray)",brs:"var(--bf-bdr-radius-sm)",b:"1px solid #e1e5e9",bs:"0 2px 4px rgba(0, 0, 0, 0.08)"},navButtonHover:{bc:"var(--bf-bg-lightgray) !important",cr:"var(--bf-bg-darkgray) !important",bcr:"var(--bf-bdr-clr-light)"}},"tertiary-segment":{headerWrapper:{p:"4px",brs:"var(--bf-bdr-radius-md)",b:"1px solid var(--bf-stroke-clr)"},tabHeader:{gp:"4px",bc:"transparent",bb:"none"},tabButton:{cr:"var(--bf-text-clr-secondary)",fs:"14px",fw:"500",p:"7px 20px",brs:"var(--bf-bdr-radius-sm)",bc:"transparent",flex:1,tn:"color 0.2s ease, background-color 0.2s ease",zx:2,flx:"center"},tabButtonHover:{cr:"var(--bf-text-clr-dark)",bc:"var(--bf-bg-white-hover)"},tabButtonActive:{cr:"var(--bf-text-clr-white)",fw:"600",bc:"transparent","&:hover":{cr:"var(--bf-text-clr-offwhite)"}},selector:{pn:"absolute",h:"100%",tp:"0px",bc:"var(--bf-tertiary)",brs:"var(--bf-bdr-radius-sm)",bs:"0 1px 3px rgba(0, 0, 0, 0.1)",zx:1,tn:"all 0.3s cubic-bezier(0.42, 0.44, 0.57, 1.35)"},selectorHeight:"calc(100% - 8px)",navButton:{bc:"#ffffff",cr:"var(--bf-text-clr-gray)",brs:"var(--bf-bdr-radius-sm)",b:"1px solid var(--bf-stroke-clr)",bs:"0 2px 4px rgba(0, 0, 0, 0.08)"},navButtonHover:{bc:"var(--bf-bg-lightgray)",cr:"var(--bf-text-clr-dark)",bcr:"var(--bf-bdr-clr-light)"}}},rt=({tabs:o,defaultTab:a,variant:c="default",onChange:H,classNames:E="",fixedHeader:x=!1,fixedHeaderTop:O=0,showHeaderShadow:D=!1})=>{var j,A;const{css:f}=et(),g=o.filter(t=>t.visible!==!1),[v,M]=b.useState(a||((j=g[0])==null?void 0:j.id)||"basic"),[$,P]=b.useState("right"),[C,S]=b.useState(!1),[m,L]=b.useState(!1),[w,W]=b.useState(!1),[V,F]=b.useState(!1);b.useRef(null);const r=b.useRef(null),p=b.useRef(null),i=T[c]||T.default,q=()=>V?m&&w?{maskImage:"linear-gradient(to right, transparent 0px, black 40px, black calc(100% - 40px), transparent 100%)",WebkitMaskImage:"linear-gradient(to right, transparent 0px, black 40px, black calc(100% - 40px), transparent 100%)"}:m&&!w?{maskImage:"linear-gradient(to right, transparent 0px, black 40px, black 100%)",WebkitMaskImage:"linear-gradient(to right, transparent 0px, black 40px, black 100%)"}:!m&&w?{maskImage:"linear-gradient(to right, black 0%, black calc(100% - 40px), transparent 100%)",WebkitMaskImage:"linear-gradient(to right, black 0%, black calc(100% - 40px), transparent 100%)"}:{}:{},n={container:s({dy:"flex",fd:"column",h:"100%"},x&&{pn:"relative"}),headerWrapper:s({pn:x?"sticky":"relative",tp:x?O:void 0,zx:x?10:void 0,dy:"flex",ai:"center",bc:x?"var(--white-100)":void 0,bs:x&&D?"rgb(123 123 123) 0px 7px 7px -9px":void 0,tn:"box-shadow 0.2s ease"},i.headerWrapper),navButton:k(s({p:0,pn:"absolute",tp:"50%",tm:"translateY(-50%)",zx:2,flx:"center",w:25,h:25,b:"none",curp:1,tn:"all 0.2s ease",oe:"none"},i.navButton),{":hover":s({},i.navButtonHover),":focus-visible":{oe:"2px solid var(--b-50)",oot:"2px"},":disabled":{oy:0,pe:"none",vy:"hidden"}}),prevButton:s({lt:"4px"},i.prevButton),nextButton:s({rt:"4px"},i.nextButton),tabHeaderContainer:s({flex:1,pn:"relative",ow:"hidden"},q()),tabHeader:s({dy:"flex",gp:"0",pn:"relative",owx:"auto",owy:"hidden",scrollBehavior:"smooth",scrollbarWidth:"none",msOverflowStyle:"none","&::-webkit-scrollbar":{dy:"none"}},i.tabHeader),tabButton:k(s({p:"12px 24px",b:"none",bc:"transparent",curp:1,pn:"relative",tn:"all 0.2s ease",zx:1,oe:"none",ws:"nowrap"},i.tabButton),{":hover":s({},i.tabButtonHover),":focus-visible":{oe:"2px solid var(--b-50)",oot:"-2px"}}),tabButtonActive:s({},i.tabButtonActive),selector:s({pn:"absolute",bm:0,lt:0,h:i.selectorHeight||"2px",tn:"all 0.3s cubic-bezier(0.42, 0.44, 0.57, 1.35)",willChange:"transform, width",zx:2},i.selector),tabContent:{flx:1,owy:"auto",owx:"hidden",p:"0",pn:"relative"},contentWrapper:{pn:"relative",w:"100%",an:C?$==="right"?"slideInFromRight 0.3s ease-out":"slideInFromLeft 0.3s ease-out":"none"}},B=()=>{if(!r.current)return;const{scrollWidth:t,clientWidth:e,scrollLeft:u}=r.current,d=t>e;F(d),d?(L(u>30),W(u<t-e-30)):(L(!1),W(!1))};b.useEffect(()=>{const t=r.current;if(!t)return;B(),t.addEventListener("scroll",B);const e=new ResizeObserver(B);return e.observe(t),()=>{t.removeEventListener("scroll",B),e.disconnect()}},[g]),b.useEffect(()=>{if(!r.current)return;const t=r.current.querySelector(`[data-tab-id="${v}"]`);if(t){const e=r.current,{left:u,width:d}=e.getBoundingClientRect(),{left:h,width:y}=t.getBoundingClientRect(),K=h-u+e.scrollLeft-d/2+y/2;e.scrollTo({left:K,behavior:"smooth"})}},[v]);const X=()=>{if(!r.current)return;const t=200;r.current.scrollBy({left:-t,behavior:"smooth"})},Y=()=>{if(!r.current)return;const t=200;r.current.scrollBy({left:t,behavior:"smooth"})};b.useLayoutEffect(()=>{var e;const t=(e=r.current)==null?void 0:e.querySelector(`[data-tab-id="${v}"]`);if(t&&p.current&&r.current){const{width:u,left:d}=t.getBoundingClientRect(),{left:h}=r.current.getBoundingClientRect(),y=r.current.scrollLeft,N=d-h+y;p.current.style.width===""&&(p.current.style.transition="none",setTimeout(()=>{p.current&&(p.current.style.transition="")},0)),p.current.style.width=`${u}px`,p.current.style.transform=`translateX(${N}px)`}},[v,o]);const G=(t,e)=>{if(t===v)return;const u=g.findIndex(h=>h.id===v),d=e>u?"right":"left";P(d),S(!0),M(t),H&&H(t),setTimeout(()=>{S(!1)},300)},J=(A=g.find(t=>t.id===v))==null?void 0:A.content;return l.jsxs("div",{className:`${f(n.container)} ${E} tabs-container`,children:[l.jsxs("div",{className:`${f(n.headerWrapper)} tabs-header-wrapper`,children:[l.jsx("button",{type:"button",className:`${f(n.navButton,n.prevButton)} tabs-nav-button tabs-prev-button`,onClick:X,disabled:!m,"aria-label":"Scroll to previous tabs",title:"Previous",children:l.jsx(I,{size:16})}),l.jsx("div",{className:`${f(n.tabHeaderContainer)} tabs-header-container`,children:l.jsxs("div",{ref:r,className:`${f(n.tabHeader)} tabs-header`,children:[g.map((t,e)=>l.jsx("button",{type:"button","data-tab-id":t.id,className:`${f(n.tabButton,v===t.id&&n.tabButtonActive)} tab-button ${v===t.id?"active":""}`,onClick:()=>G(t.id,e),"aria-selected":v===t.id,role:"tab",children:t.label},t.id)),l.jsx("div",{ref:p,className:`${f(n.selector)} tab-selector`,"aria-hidden":"true"})]})}),l.jsx("button",{type:"button",className:`${f(n.navButton,n.nextButton)} tabs-nav-button tabs-next-button`,onClick:Y,disabled:!w,"aria-label":"Scroll to next tabs",title:"Next",children:l.jsx(I,{size:16,rotateDeg:180})})]}),l.jsx("div",{className:`${f(n.tabContent)} tab-content`,role:"tabpanel",children:l.jsx("div",{className:`${f(n.contentWrapper)} tab-content-wrapper ${C?$==="right"?"slide-in-right":"slide-in-left":""}`,children:J})})]})};var st=rt;export{st as T}; |
