{"version":3,"file":"TabBar.CuASLL2n.mjs","names":["useState"],"sources":["https:/framerusercontent.com/modules/5XjAcjAjrMlrG1h2JorU/gJJDEGkmLLBu3H22mLxs/TabBar.js"],"sourcesContent":["import{jsx as _jsx}from\"react/jsx-runtime\";import{useState,useEffect}from\"react\";import{addPropertyControls,ControlType}from\"framer\";export default function TabBar({siblingStackId,gap=4,orientation=\"horizontal\",alignment=\"start\",backgroundColor=\"#f5f5f5\",activeTabColor=\"#ffffff\",inactiveTabColor=\"transparent\",activeTextColor=\"#000000\",inactiveTextColor=\"#666666\",borderRadius=8,font,fontSize=14,fontWeight=400,letterSpacing=\"0px\",lineHeight=\"1.4\"}){const[activeIndex,setActiveIndex]=useState(0);const[tabs,setTabs]=useState([]);// Find tabs and set up initial state\nuseEffect(()=>{if(!siblingStackId)return;const element=document.querySelector(`[data-framer-name=\"${siblingStackId}\"]`)||document.getElementById(siblingStackId);if(element){const children=Array.from(element.children);const tabLabels=children.map((child,index)=>child.getAttribute(\"aria-label\")||`Tab ${index+1}`);setTabs(tabLabels);// Show first tab initially\nshowTab(0);}},[siblingStackId]);// Show selected tab, hide others\nconst showTab=index=>{const element=document.querySelector(`[data-framer-name=\"${siblingStackId}\"]`)||document.getElementById(siblingStackId);if(element){Array.from(element.children).forEach((child,i)=>{const htmlChild=child;if(i===index){htmlChild.style.display=\"block\";htmlChild.style.visibility=\"visible\";}else{htmlChild.style.display=\"none\";htmlChild.style.visibility=\"hidden\";}});}};// Handle tab click\nconst handleClick=index=>{setActiveIndex(index);showTab(index);};const isHorizontal=orientation===\"horizontal\";return /*#__PURE__*/_jsx(\"div\",{style:{display:\"flex\",flexDirection:isHorizontal?\"row\":\"column\",gap:`${gap}px`,justifyContent:alignment===\"start\"?\"flex-start\":alignment===\"end\"?\"flex-end\":\"center\",alignItems:isHorizontal?\"center\":\"stretch\",backgroundColor,borderRadius:`${borderRadius}px`,padding:\"0px\",width:isHorizontal?\"fit-content\":\"100%\",minWidth:isHorizontal?\"max-content\":\"auto\",position:\"relative\",boxSizing:\"border-box\"},role:\"tablist\",children:tabs.map((label,index)=>/*#__PURE__*/_jsx(\"button\",{onClick:()=>handleClick(index),style:{display:\"flex\",alignItems:\"center\",justifyContent:\"center\",padding:\"12px\",borderRadius:`${Math.max(0,borderRadius-2)}px`,backgroundColor:index===activeIndex?activeTabColor:inactiveTabColor,color:index===activeIndex?activeTextColor:inactiveTextColor,cursor:\"pointer\",fontSize:`${fontSize}px`,fontWeight:fontWeight,letterSpacing:letterSpacing,lineHeight:lineHeight,transition:\"all 0.2s ease-in-out\",outline:\"none\",minWidth:isHorizontal?\"max-content\":\"auto\",textAlign:\"center\",userSelect:\"none\",border:\"0\",whiteSpace:\"nowrap\",boxSizing:\"border-box\",boxShadow:\"0\",// Apply font styles from font control\n    ...font},role:\"tab\",\"aria-selected\":index===activeIndex,tabIndex:0,title:label,children:label},index))});}addPropertyControls(TabBar,{siblingStackId:{type:ControlType.String,title:\"Sibling Stack ID\",description:\"ID, name, or class of the sibling stack to control\",defaultValue:\"\",placeholder:\"Enter stack ID, name, or class...\"},orientation:{type:ControlType.Enum,title:\"Orientation\",options:[\"horizontal\",\"vertical\"],optionTitles:[\"Horizontal\",\"Vertical\"],defaultValue:\"horizontal\",displaySegmentedControl:true},alignment:{type:ControlType.Enum,title:\"Alignment\",options:[\"start\",\"center\",\"end\"],optionTitles:[\"Start\",\"Center\",\"End\"],defaultValue:\"start\",displaySegmentedControl:true},gap:{type:ControlType.Number,title:\"Gap\",description:\"Space between tabs\",defaultValue:4,min:0,max:32,step:1,unit:\"px\"},backgroundColor:{type:ControlType.Color,title:\"Background\",defaultValue:\"#f5f5f5\"},activeTabColor:{type:ControlType.Color,title:\"Active Tab Color\",defaultValue:\"#ffffff\"},inactiveTabColor:{type:ControlType.Color,title:\"Inactive Tab Color\",defaultValue:\"transparent\"},activeTextColor:{type:ControlType.Color,title:\"Active Text Color\",defaultValue:\"#000000\"},inactiveTextColor:{type:ControlType.Color,title:\"Inactive Text Color\",defaultValue:\"#666666\"},borderRadius:{type:ControlType.Number,title:\"Border Radius\",defaultValue:8,min:0,max:100,step:1,unit:\"px\"},// Typography controls\nfont:{type:ControlType.Font,title:\"Font\",controls:\"extended\",defaultFontType:\"sans-serif\",defaultValue:{fontSize:\"14px\",variant:\"Regular\",letterSpacing:\"0px\",lineHeight:\"1.4em\"}},fontSize:{type:ControlType.Number,title:\"Font Size\",defaultValue:14,min:8,max:32,step:1,unit:\"px\"},fontWeight:{type:ControlType.Number,title:\"Font Weight\",defaultValue:400,min:100,max:900,step:100},letterSpacing:{type:ControlType.String,title:\"Letter Spacing\",defaultValue:\"0px\",placeholder:\"e.g. 0.5px, 0.1em\"},lineHeight:{type:ControlType.String,title:\"Line Height\",defaultValue:\"1.4\",placeholder:\"e.g. 1.4, 20px, 1.5em\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"TabBar\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./TabBar.map"],"mappings":"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"}