{"version":3,"file":"FloatingPillNavigation.Dvn2pgJz.mjs","names":["useState","useRef"],"sources":["https:/framerusercontent.com/modules/Gru61Ti5XvmBxX7GMF1U/XNbBzJSFnUavcgJwdO3O/FloatingPillNavigation.js"],"sourcesContent":["// Pill-shaped navigation with animated background that shifts between links on click\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{motion,AnimatePresence}from\"framer-motion\";import{useState,startTransition,useEffect,useRef}from\"react\";import{addPropertyControls,ControlType}from\"framer\";/**\n * @framerSupportedLayoutWidth auto\n * @framerSupportedLayoutHeight auto\n */export default function FloatingPillNavigation(props){const{items,backgroundColor,textColor,activeBackgroundColor,activeTextColor,padding,gap,font,activeLink=\"Home\",transition,linkPadding}=props;// Internal state for interactive clicking\nconst[internalActiveLink,setInternalActiveLink]=useState(activeLink);const navRef=useRef(null);const linkRef=useRef(null);const[navBorderRadius,setNavBorderRadius]=useState(50);const[linkBorderRadius,setLinkBorderRadius]=useState(25);const[isExpanded,setIsExpanded]=useState(false);const[isMobile,setIsMobile]=useState(false);// Sync internal state when activeLink prop changes\nuseEffect(()=>{startTransition(()=>{setInternalActiveLink(activeLink);});},[activeLink]);// Detect mobile breakpoint\nuseEffect(()=>{if(typeof window===\"undefined\")return;const checkMobile=()=>{startTransition(()=>{setIsMobile(window.innerWidth<768);});};checkMobile();window.addEventListener(\"resize\",checkMobile);return()=>window.removeEventListener(\"resize\",checkMobile);},[]);// Calculate border radii based on heights\nuseEffect(()=>{const updateBorderRadii=()=>{if(navRef.current){const navHeight=navRef.current.offsetHeight;setNavBorderRadius(navHeight/2);}if(linkRef.current){const linkHeight=linkRef.current.offsetHeight;setLinkBorderRadius(linkHeight/2);}};updateBorderRadii();// Use ResizeObserver to update when size changes\nconst resizeObserver=new ResizeObserver(updateBorderRadii);if(navRef.current)resizeObserver.observe(navRef.current);if(linkRef.current)resizeObserver.observe(linkRef.current);return()=>resizeObserver.disconnect();},[linkPadding,font,items]);const handleClick=(label,href,target)=>{startTransition(()=>{setInternalActiveLink(label);// Collapse menu after selection on mobile\nif(isMobile){setIsExpanded(false);}});// Navigate if href is provided\nif(href&&typeof window!==\"undefined\"){// Add https:// if the URL doesn't have a protocol and isn't a relative path\nlet finalHref=href;if(!href.match(/^(https?:\\/\\/|mailto:|tel:|#|\\/)/)){finalHref=`https://${href}`;}if(target===\"_blank\"){window.open(finalHref,\"_blank\");}else{window.location.href=finalHref;}}};const toggleExpanded=()=>{startTransition(()=>{setIsExpanded(!isExpanded);});};// Mobile expandable menu\nif(isMobile){const activeItem=items.find(item=>item.label===internalActiveLink)||items[0];return /*#__PURE__*/_jsxs(\"nav\",{ref:navRef,style:{display:\"inline-flex\",flexDirection:\"column\",gap:8,position:\"relative\",width:\"max-content\",userSelect:\"none\",WebkitUserSelect:\"none\",MozUserSelect:\"none\"},children:[/*#__PURE__*/_jsxs(\"div\",{onClick:toggleExpanded,style:{display:\"flex\",alignItems:\"center\",gap:10,backgroundColor:activeBackgroundColor,color:activeTextColor,padding:linkPadding,borderRadius:linkBorderRadius,cursor:\"pointer\",userSelect:\"none\",WebkitUserSelect:\"none\",MozUserSelect:\"none\",...font},children:[/*#__PURE__*/_jsx(\"svg\",{width:\"16\",height:\"16\",viewBox:\"0 0 16 16\",fill:\"none\",xmlns:\"http://www.w3.org/2000/svg\",style:{flexShrink:0},children:/*#__PURE__*/_jsx(\"path\",{d:\"M2 4h12M4 8h8M6 12h4\",stroke:\"currentColor\",strokeWidth:\"1.5\",strokeLinecap:\"round\"})}),activeItem.label]}),/*#__PURE__*/_jsx(AnimatePresence,{children:isExpanded&&/*#__PURE__*/_jsx(motion.div,{initial:{opacity:0,y:-10},animate:{opacity:1,y:0},exit:{opacity:0,y:-10},transition:{duration:.2},style:{display:\"flex\",flexDirection:\"column\",gap:8},children:items.map((item,index)=>{const isActive=item.label===internalActiveLink;if(isActive)return null// Don't show active item again\n;return /*#__PURE__*/_jsx(\"div\",{onClick:()=>handleClick(item.label,item.href,item.target),style:{backgroundColor:\"#E8E8ED\",color:\"#000000\",padding:linkPadding,borderRadius:linkBorderRadius,cursor:\"pointer\",userSelect:\"none\",WebkitUserSelect:\"none\",MozUserSelect:\"none\",...font},children:item.label},index);})})})]});}// Desktop/tablet horizontal navigation\nreturn /*#__PURE__*/_jsx(\"nav\",{ref:navRef,style:{display:\"inline-flex\",backgroundColor,borderRadius:navBorderRadius,padding,gap,position:\"relative\",width:\"max-content\",userSelect:\"none\",WebkitUserSelect:\"none\",MozUserSelect:\"none\"},children:items.map((item,index)=>{const isActive=item.label===internalActiveLink;return /*#__PURE__*/_jsxs(\"div\",{ref:index===0?linkRef:null,onClick:()=>handleClick(item.label,item.href,item.target),style:{position:\"relative\",padding:linkPadding,textDecoration:\"none\",color:isActive?activeTextColor:textColor,cursor:\"pointer\",zIndex:1,transition:\"color 0.3s ease\",userSelect:\"none\",WebkitUserSelect:\"none\",MozUserSelect:\"none\",...font},children:[isActive&&/*#__PURE__*/_jsx(motion.div,{layoutId:\"activeBackground\",style:{position:\"absolute\",top:0,left:0,right:0,bottom:0,backgroundColor:activeBackgroundColor,borderRadius:linkBorderRadius,zIndex:-1},transition:transition}),item.label]},index);})});}addPropertyControls(FloatingPillNavigation,{activeLink:{type:ControlType.String,title:\"Active Link\",defaultValue:\"All products\",description:\"Enter the label of the link you want to be active initially\"},transition:{type:ControlType.Transition,title:\"Transition\",defaultValue:{type:\"spring\",stiffness:800,damping:60,mass:1}},linkPadding:{type:ControlType.Padding,title:\"Link Padding\",defaultValue:\"12px 22px 12px 22px\"},items:{type:ControlType.Array,control:{type:ControlType.Object,controls:{label:{type:ControlType.String,defaultValue:\"Link\"},href:{type:ControlType.String,title:\"Link To\",placeholder:\"/page or #section\",description:\"Optional: Link to a page or section\"},target:{type:ControlType.Enum,title:\"Open In\",options:[\"_self\",\"_blank\"],optionTitles:[\"Same Tab\",\"New Tab\"],defaultValue:\"_self\",hidden:props=>!props.href}}},defaultValue:[{label:\"All products\"},{label:\"Laptops\"},{label:\"Desktops\"},{label:\"Displays\"}]},backgroundColor:{type:ControlType.Color,defaultValue:\"#E8E8ED\"},textColor:{type:ControlType.Color,defaultValue:\"#000000\",title:\"Inactive Text\"},activeBackgroundColor:{type:ControlType.Color,defaultValue:\"#1D1D1F\",title:\"Active BG\"},activeTextColor:{type:ControlType.Color,defaultValue:\"#FFFFFF\",title:\"Active Text\"},padding:{type:ControlType.Number,defaultValue:6,min:0,max:20,step:1,unit:\"px\"},gap:{type:ControlType.Number,defaultValue:0,min:0,max:20,step:1,unit:\"px\"},font:{type:ControlType.Font,controls:\"extended\",defaultFontType:\"sans-serif\",defaultValue:{fontSize:\"17px\",variant:\"Regular\",letterSpacing:\"-0.37px\",lineHeight:\"20px\"}}});FloatingPillNavigation.displayName=\"Floating Pill Navigation\";\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"FloatingPillNavigation\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerSupportedLayoutWidth\":\"auto\",\"framerSupportedLayoutHeight\":\"auto\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./FloatingPillNavigation.map"],"mappings":"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"}