"use strict";var l=require("react/jsx-runtime"),y=require("../../lib/cn.js"),j=require("create-slots"),e=require("react"),m=require("react-aria");const C=e.createContext({currentTab:void 0,setCurrentTab:()=>{},tabRefs:{current:{}},disabled:!1}),k=j.createSlot(({children:o,...u})=>l.jsx("div",{className:"flex items-center justify-center",children:e.Children.map(o,c=>e.cloneElement(c,u))})),w=o=>{const{children:u,onChange:c,selectedTab:n,size:h="md",disabled:p=!1}=o,[t,i]=e.useState(n),a=e.useRef({}),r=e.useRef(),[x,d]=e.useState({transform:"translateX(4px)",width:"",height:""});e.useEffect(()=>{n!==void 0&&i(n)},[n]),e.useEffect(()=>(r.current||(r.current=new ResizeObserver(()=>{const{offsetLeft:s,clientWidth:b,clientHeight:f}=a.current[t];d({transform:`translateX(${s}px)`,width:`${b}px`,height:`${f}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:f}=a.current[t];d({transform:`translateX(${s}px)`,width:`${b}px`,height:`${f}px`})}},[t,h]);const g=e.useCallback(s=>{i(s),c(s)},[i,c]);return l.jsxs("div",{className:"flex w-full p-1 rounded-full bg-ink-10 dark:bg-slate-2 relative",role:"tablist","aria-label":"Segmented Control",children:[l.jsx("div",{className:"absolute bg-paper dark:bg-slate-4 shadow-[0px_4px_20px_0px_rgba(24,23,26,0.1)] transition-transform duration-200 ease-in-out rounded-[inherit] -ml-1",style:{...x}}),l.jsx(C.Provider,{value:{currentTab:t,setCurrentTab:g,size:h,tabRefs:a,disabled:p},children:u})]})},R=e.forwardRef((o,u)=>{const{label:c,id:n}=o,{currentTab:h,setCurrentTab:p,tabRefs:t,size:i,disabled:a}=e.useContext(C),r=h===n,x=i==="sm"?"h-8":i==="md"?"h-10":"h-[3.25rem]",d=i==="sm"?16:20,g=e.useRef(null),s=u||g;e.useEffect(()=>{typeof s=="object"&&t.current&&(t.current[n]=s.current)},[n]);const b=e.useCallback(()=>{p(n)},[p,n]),{buttonProps:f,isPressed:T}=m.useButton({onPress:b,isDisabled:a},s),{hoverProps:N}=m.useHover({}),{isFocusVisible:P,focusProps:S}=m.useFocusRing();return j.createHost(o.children,$=>{const v=$.get(k);return l.jsx("button",{className:y.cn("flex justify-center items-center w-full rounded-button z-0 cursor-pointer font-semibold whitespace-nowrap bg-transparent outline disabled:opacity-30 disabled:pointer-events-none",x,i==="sm"?"text-sm":i==="md"?"text-md":"text-lg",r?"text-text-primary":"text-text-secondary",P?"outline-brand-base outline-thick":"outline-transparent outline-thick",r?"transition-none":"transition-colors duration-200 ease-in-out",r?"hover:bg-transparent dark:hover:bg-transparent":"hover:bg-ink-20 dark:hover:bg-slate-1"),ref:s,...m.mergeProps(f,N,S),disabled:a,children:l.jsxs("div",{className:"flex items-center justify-center",style:{opacity:T&&!r?.5:1},children:[v&&{...v,props:{...v.props,className:y.cn("mr-1",r?"text-text-primary":"text-text-secondary"),width:d,height:d}},c]})})})}),q=Object.assign(R,{Icon:k});R.displayName="Tab",w.displayName="SegmentedControl",exports.SegmentedControl=w,exports.Tab=q;
//# sourceMappingURL=segmented-control.js.map
