import{jsx as f,jsxs as v}from"react/jsx-runtime";import{css as k}from"@styled/css";import{Flex as y,Box as N}from"@styled/jsx";import{createSlot as W,createHost as E}from"create-slots";import{createContext as F,Children as X,cloneElement as B,forwardRef as L,useContext as O,useRef as C,useEffect as m,useCallback as w,useState as S}from"react";import{useButton as D,useHover as V,useFocusRing as q,mergeProps as A}from"react-aria";const T=F({currentTab:void 0,setCurrentTab:()=>{},tabRefs:{current:{}},disabled:!1}),j=W(({children:i,...l})=>f(y,{alignItems:"center",justifyContent:"center",children:X.map(i,a=>B(a,l))})),P=i=>{const{children:l,onChange:a,selectedTab:n,size:p="md",disabled:b=!1}=i,[e,o]=S(n),s=C({}),t=C(),[h,c]=S({transform:"translateX(4px)",width:"",height:""});m(()=>{n!==void 0&&o(n)},[n]),m(()=>(t.current||(t.current=new ResizeObserver(()=>{const{offsetLeft:r,clientWidth:d,clientHeight:u}=s.current[e];c({transform:`translateX(${r}px)`,width:`${d}px`,height:`${u}px`})})),t.current.observe(s.current[e]),()=>{t.current&&s.current[e]&&t.current.unobserve(s.current[e])}),[]),m(()=>{if(e&&s.current[e]){const{offsetLeft:r,clientWidth:d,clientHeight:u}=s.current[e];c({transform:`translateX(${r}px)`,width:`${d}px`,height:`${u}px`})}},[e,p]);const g=w(r=>{o(r),a(r)},[o,a]);return v(y,{w:"full",role:"tablist",p:1,rounded:"full",bg:"ink.10",_dark:{bg:"slate.2"},"aria-label":"Segmented Control",position:"relative",children:[f(N,{position:"absolute",bg:"paper",_dark:{bg:"slate.4"},boxShadow:"0px 4px 20px 0px {colors.ink.90/10}",transition:"transform 0.2s ease",rounded:"inherit",ml:-1,style:{...h}}),f(T.Provider,{value:{currentTab:e,setCurrentTab:g,size:p,tabRefs:s,disabled:b},children:l})]})},R=L((i,l)=>{const{label:a,id:n}=i,{currentTab:p,setCurrentTab:b,tabRefs:e,size:o,disabled:s}=O(T),t=p===n,h=o==="sm"?8:o==="md"?10:13,c=o==="sm"?16:20,g=C(null),r=l||g;m(()=>{typeof r=="object"&&e.current&&(e.current[n]=r.current)},[n]);const d=w(()=>{b(n)},[b,n]),{buttonProps:u,isPressed:z}=D({onPress:d,isDisabled:s},r),{hoverProps:$}=V({}),{isFocusVisible:_,focusProps:H}=q();return E(i.children,I=>{const x=I.get(j);return f("button",{className:k({display:"flex",justifyContent:"center",alignItems:"center",h,w:"full",rounded:"button",zIndex:0,cursor:"pointer",color:t?"text.primary":"text.secondary",fontSize:o,fontWeight:"semibold",whiteSpace:"nowrap",bg:"transparent",outlineColor:_?"brand.base":"transparent",outlineStyle:"solid",outlineWidth:"thick",transition:t?"background 0s":"background 0.2s ease",_disabled:{opacity:"0.3",pointerEvents:"none"},_hover:{bg:t?"transparent":"ink.20",_dark:{bg:t?"transparent":"slate.1"}}}),ref:r,...A(u,$,H),disabled:s,children:v(y,{opacity:z&&!t?.5:1,align:"center",justify:"center",children:[x&&{...x,props:{...x.props,className:k({mr:1,color:t?"text.primary":"text.secondary"}),width:c,height:c}},a]})})})}),G=Object.assign(R,{Icon:j});R.displayName="Tab",P.displayName="SegmentedControl";export{P as SegmentedControl,G as Tab};
//# sourceMappingURL=segmented-control.js.map
