{"version":3,"file":"VerticalTimeline.DNJUIDqh.mjs","names":["useState","useRef","useCallback"],"sources":["https:/framerusercontent.com/modules/07ltzXtrh7QtESaTL4J3/wJIoPTvePPs3BYpYS74M/VerticalTimeline.js"],"sourcesContent":["// Responsive vertical timeline component with scroll-based line filling and focus states\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useState,useEffect,useRef,useCallback,startTransition}from\"react\";import{addPropertyControls,ControlType}from\"framer\";import{useInView}from\"framer-motion\";/**\n * @framerSupportedLayoutWidth fixed\n * @framerSupportedLayoutHeight auto\n */export default function VerticalTimeline(props){const{items=[{time:\"09:00\",title:\"Shuttle bus departing from 2 locations in Berlin\",description:\"Lorem ipsum dolor sit amet, consectetur adipiscing elit. In consectetur turpis orci, ac mollis sem condimentum ac. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis dictum quis nisl quis varius.\",image:{src:\"https://framerusercontent.com/images/GfGkADagM4KEibNcIiRUWlfrR0.jpg\",alt:\"Event image\"}},{time:\"10:00\",title:\"Arrival & Check-In\",description:\"Lorem ipsum dolor sit amet, consectetur adipiscing elit. In consectetur turpis orci, ac mollis sem condimentum ac. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis dictum quis nisl quis varius.\"}],lineColor=\"#E5E7EB\",activeLineColor=\"#4F46E5\",dotColor=\"#E5E7EB\",activeDotColor=\"#4F46E5\",dotBackgroundColor=\"#FFFFFF\",backgroundColor=\"#FFFFFF\",titleFont,descriptionFont}=props;const[activeIndex,setActiveIndex]=useState(0);const[scrollProgress,setScrollProgress]=useState(0);const containerRef=useRef(null);const itemRefs=useRef([]);const handleScroll=useCallback(()=>{if(!containerRef.current)return;const container=containerRef.current;const containerRect=container.getBoundingClientRect();const viewportHeight=window.innerHeight;// Calculate scroll progress based on item positions\nlet progress=0;let newActiveIndex=0;// Find active item and calculate progress\nconst viewportCenter=viewportHeight/2;for(let i=0;i<itemRefs.current.length;i++){const itemElement=itemRefs.current[i];if(!itemElement)continue;const itemRect=itemElement.getBoundingClientRect();const itemCenter=itemRect.top+itemRect.height/2;if(itemCenter<=viewportCenter){newActiveIndex=i;// Calculate progress to next item with more responsive calculation\nif(i<itemRefs.current.length-1){const nextItemElement=itemRefs.current[i+1];if(nextItemElement){const nextItemRect=nextItemElement.getBoundingClientRect();const nextItemCenter=nextItemRect.top+nextItemRect.height/2;// Use a more responsive calculation that starts earlier\nconst sectionStart=itemCenter-viewportHeight*.3;const sectionEnd=nextItemCenter-viewportHeight*.3;const sectionHeight=sectionEnd-sectionStart;const currentPosition=viewportCenter-sectionStart;const sectionProgress=Math.max(0,Math.min(1,currentPosition/sectionHeight));progress=(i+sectionProgress)/Math.max(1,itemRefs.current.length-1);}else{progress=i/Math.max(1,itemRefs.current.length-1);}}else{progress=1;}}}startTransition(()=>{setScrollProgress(progress);setActiveIndex(newActiveIndex);});},[]);useEffect(()=>{if(typeof window===\"undefined\")return;window.addEventListener(\"scroll\",handleScroll,{passive:true});window.addEventListener(\"resize\",handleScroll,{passive:true});handleScroll()// Initial calculation\n;return()=>{window.removeEventListener(\"scroll\",handleScroll);window.removeEventListener(\"resize\",handleScroll);};},[handleScroll]);const isFixedWidth=props?.style&&props.style.width===\"100%\";return /*#__PURE__*/_jsxs(\"div\",{ref:containerRef,style:{...props.style,position:\"relative\",backgroundColor,padding:\"0\",...isFixedWidth?{width:\"100%\"}:{minWidth:\"max-content\"},fontFamily:\"Geist, -apple-system, BlinkMacSystemFont, sans-serif\"},children:[/*#__PURE__*/_jsx(\"style\",{children:`\n                    @media (max-width: 768px) {\n                        .timeline-time {\n                            font-size: calc(18px * 0.7) !important;\n                        }\n                        .timeline-title {\n                            font-size: calc(24px * 0.7) !important;\n                        }\n                        .timeline-description {\n                            font-size: calc(16px * 0.7) !important;\n                        }\n                    }\n                `}),/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",left:\"80px\",top:\"16px\",bottom:\"16px\",width:\"2px\",backgroundColor:lineColor,zIndex:0},children:/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",top:0,left:0,width:\"100%\",height:`${scrollProgress*100}%`,backgroundColor:activeLineColor,transition:\"height 0.8s cubic-bezier(0.4, 0, 0.2, 1)\"}})}),items.map((item,index)=>{const isActive=index<=activeIndex;const isCurrent=index===activeIndex;// Add useInView hook for each item\nconst itemRef=useRef(null);const isInView=useInView(itemRef,{once:true,margin:\"-100px\"});return /*#__PURE__*/_jsxs(\"div\",{ref:el=>{itemRefs.current[index]=el;// @ts-ignore\nitemRef.current=el;},style:{position:\"relative\",display:\"flex\",alignItems:\"flex-start\",marginBottom:index===items.length-1?0:\"60px\",paddingLeft:\"120px\",opacity:isInView?1:0,transform:isInView?\"translateY(0)\":\"translateY(20px)\",transition:\"opacity 0.6s ease, transform 0.6s ease\"},children:[/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",left:0,top:\"5px\",width:\"60px\",textAlign:\"right\",fontSize:\"18px\",fontWeight:isCurrent?\"bold\":\"normal\",color:\"#1F2937\",transition:\"font-weight 0.2s ease\",...titleFont},children:item.time}),/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",left:\"71px\",top:\"8px\",width:\"18px\",height:\"18px\",borderRadius:\"50%\",backgroundColor:dotBackgroundColor,border:`2px solid ${isActive?activeDotColor:dotColor}`,zIndex:2,transition:\"all 0.3s ease\",display:\"flex\",alignItems:\"center\",justifyContent:\"center\"},children:isActive&&/*#__PURE__*/_jsx(\"div\",{style:{width:\"70%\",height:\"70%\",borderRadius:\"50%\",backgroundColor:activeDotColor,transition:\"all 0.3s ease\"}})}),/*#__PURE__*/_jsxs(\"div\",{style:{flex:1,minWidth:0},children:[/*#__PURE__*/_jsx(\"h3\",{style:{margin:\"5px 0 12px 0\",fontSize:\"24px\",fontWeight:isCurrent?\"bold\":\"600\",color:\"#1F2937\",lineHeight:\"1.3\",transition:\"font-weight 0.2s ease\",...titleFont},children:item.title}),/*#__PURE__*/_jsx(\"p\",{style:{margin:item.image?\"0 0 20px 0\":\"0\",fontSize:\"16px\",fontWeight:isCurrent?\"500\":\"normal\",color:\"#6B7280\",lineHeight:\"1.6\",transition:\"font-weight 0.2s ease\",...descriptionFont},children:item.description}),item.image&&/*#__PURE__*/_jsx(\"div\",{style:{borderRadius:\"12px\",overflow:\"hidden\",boxShadow:\"0 4px 12px rgba(0, 0, 0, 0.1)\"},children:/*#__PURE__*/_jsx(\"img\",{src:item.image.src,alt:item.image.alt,style:{width:\"100%\",height:\"300px\",objectFit:\"cover\",display:\"block\"}})})]})]},index);})]});}addPropertyControls(VerticalTimeline,{items:{type:ControlType.Array,title:\"Timeline Items\",control:{type:ControlType.Object,controls:{time:{type:ControlType.String,title:\"Time\",defaultValue:\"09:00\"},title:{type:ControlType.String,title:\"Title\",defaultValue:\"Event Title\"},description:{type:ControlType.String,title:\"Description\",displayTextArea:true,defaultValue:\"Event description goes here...\"},image:{type:ControlType.ResponsiveImage,title:\"Image (Optional)\"}}},defaultValue:[{time:\"09:00\",title:\"Shuttle bus departing from 2 locations in Berlin\",description:\"Lorem ipsum dolor sit amet, consectetur adipiscing elit. In consectetur turpis orci, ac mollis sem condimentum ac. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis dictum quis nisl quis varius.\",image:{src:\"https://framerusercontent.com/images/GfGkADagM4KEibNcIiRUWlfrR0.jpg\",alt:\"Event image\"}},{time:\"10:00\",title:\"Arrival & Check-In\",description:\"Lorem ipsum dolor sit amet, consectetur adipiscing elit. In consectetur turpis orci, ac mollis sem condimentum ac. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis dictum quis nisl quis varius.\"}]},lineColor:{type:ControlType.Color,title:\"Line Color\",defaultValue:\"#E5E7EB\"},activeLineColor:{type:ControlType.Color,title:\"Active Line Color\",defaultValue:\"#4F46E5\"},dotColor:{type:ControlType.Color,title:\"Dot Color\",defaultValue:\"#E5E7EB\"},activeDotColor:{type:ControlType.Color,title:\"Active Dot Color\",defaultValue:\"#4F46E5\"},dotBackgroundColor:{type:ControlType.Color,title:\"Dot Background Color\",defaultValue:\"transparent\"},backgroundColor:{type:ControlType.Color,title:\"Background Color\",defaultValue:\"#FFFFFF\"},titleFont:{type:ControlType.Font,title:\"Title & Time Font\",controls:\"extended\",defaultFontType:\"sans-serif\",defaultValue:{fontSize:\"20px\",variant:\"Semibold\",letterSpacing:\"-0.01em\",lineHeight:\"1.3em\"}},descriptionFont:{type:ControlType.Font,title:\"Description Font\",controls:\"extended\",defaultFontType:\"sans-serif\",defaultValue:{fontSize:\"16px\",variant:\"Regular\",letterSpacing:\"-0.01em\",lineHeight:\"1.6em\"}}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"VerticalTimeline\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerSupportedLayoutWidth\":\"fixed\",\"framerSupportedLayoutHeight\":\"auto\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./VerticalTimeline.map"],"mappings":"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"}