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