{"version":3,"file":"LineProgress.DLyWaTOY.mjs","names":["useState","useRef"],"sources":["https:/framerusercontent.com/modules/4TEAtPcvgsPLZkyyyU0M/uYmanDTiOctCUeUPCK5A/LineProgress.js"],"sourcesContent":["// Scroll progress line component that fills as user scrolls\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useEffect,useState,useRef,startTransition}from\"react\";import{addPropertyControls,ControlType}from\"framer\";/**\n * @framerIntrinsicWidth 400\n * @framerIntrinsicHeight 8\n * \n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight any-prefer-fixed\n */export default function LineProgress(props){const{orientation=\"horizontal\",unfilledColor=\"#EEEEEE\",filledColor=\"#000000\",thickness=4,segments=1}=props;const[scrollProgress,setScrollProgress]=useState(0);const containerRef=useRef(null);const rafRef=useRef();useEffect(()=>{if(typeof window===\"undefined\"||!containerRef.current)return;const handleScroll=()=>{if(rafRef.current){cancelAnimationFrame(rafRef.current);}rafRef.current=requestAnimationFrame(()=>{if(!containerRef.current)return;const rect=containerRef.current.getBoundingClientRect();const windowHeight=window.innerHeight;const elementTop=rect.top;const elementBottom=rect.bottom;// Start filling when element is 20% into viewport\n// Finish filling when element is 20% from leaving viewport\nconst startThreshold=windowHeight*.8// Element enters at bottom - 20%\n;const endThreshold=windowHeight*.2// Element exits at top + 20%\n;if(elementTop<endThreshold){startTransition(()=>setScrollProgress(100));}else if(elementTop>startThreshold){startTransition(()=>setScrollProgress(0));}else{// Calculate progress between the two thresholds\nconst scrollRange=startThreshold-endThreshold;const scrolled=startThreshold-elementTop;let progress=scrolled/scrollRange*100;progress=Math.min(100,Math.max(0,progress));// Apply sticky/snap behavior based on segments\nif(segments>1){const segmentSize=100/segments;const currentSegment=Math.floor(progress/segmentSize);const segmentProgress=progress%segmentSize/segmentSize;// Snap to segment when close enough (within 20% of segment)\nif(segmentProgress>.8){progress=(currentSegment+1)*segmentSize;}else if(segmentProgress<.2&&currentSegment>0){progress=currentSegment*segmentSize;}}startTransition(()=>{setScrollProgress(progress);});}});};handleScroll();window.addEventListener(\"scroll\",handleScroll,{passive:true});window.addEventListener(\"resize\",handleScroll,{passive:true});return()=>{window.removeEventListener(\"scroll\",handleScroll);window.removeEventListener(\"resize\",handleScroll);if(rafRef.current){cancelAnimationFrame(rafRef.current);}};},[segments]);const isHorizontal=orientation===\"horizontal\";return /*#__PURE__*/_jsxs(\"div\",{ref:containerRef,style:{position:\"relative\",width:\"100%\",height:\"100%\",overflow:\"hidden\"},children:[/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",top:0,left:0,width:\"100%\",height:\"100%\",backgroundColor:unfilledColor}}),/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",top:0,left:0,width:isHorizontal?`${scrollProgress}%`:\"100%\",height:isHorizontal?\"100%\":`${scrollProgress}%`,backgroundColor:filledColor,transition:\"width 0.3s cubic-bezier(0.4, 0, 0.2, 1), height 0.3s cubic-bezier(0.4, 0, 0.2, 1)\"}})]});}addPropertyControls(LineProgress,{orientation:{type:ControlType.Enum,title:\"Orientation\",options:[\"horizontal\",\"vertical\"],optionTitles:[\"Horizontal\",\"Vertical\"],defaultValue:\"horizontal\",displaySegmentedControl:true},segments:{type:ControlType.Number,title:\"Segments\",defaultValue:1,min:1,max:10,step:1,displayStepper:true},unfilledColor:{type:ControlType.Color,title:\"Unfilled Color\",defaultValue:\"#EEEEEE\"},filledColor:{type:ControlType.Color,title:\"Filled Color\",defaultValue:\"#000000\"},thickness:{type:ControlType.Number,title:\"Thickness\",defaultValue:4,min:1,max:20,step:1,unit:\"px\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"LineProgress\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerIntrinsicWidth\":\"400\",\"framerIntrinsicHeight\":\"8\",\"framerSupportedLayoutHeight\":\"any-prefer-fixed\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./LineProgress.map"],"mappings":"oNAOG,SAAwB,EAAa,EAAM,CAAC,GAAK,CAAC,cAAY,aAAa,gBAAc,UAAU,cAAY,UAAU,YAAU,EAAE,WAAS,GAAG,EAAW,CAAC,EAAe,GAAmBA,EAAS,EAAE,CAAO,EAAaC,EAAO,KAAK,CAAO,EAAOA,GAAQ,CAAC,MAAc,CAAC,GAAU,IAAS,QAAa,CAAC,EAAa,QAAQ,OAAO,IAAM,MAAiB,CAAI,EAAO,SAAS,qBAAqB,EAAO,QAAQ,CAAE,EAAO,QAAQ,0BAA0B,CAAC,GAAG,CAAC,EAAa,QAAQ,OAAO,IAAM,EAAK,EAAa,QAAQ,uBAAuB,CAAO,EAAa,EAAO,YAAkB,EAAW,EAAK,IAAwB,EAAK,OAE5nB,IAAM,EAAe,EAAa,GAC3B,EAAa,EAAa,GAChC,GAAG,EAAW,EAAc,MAAoB,EAAkB,IAAI,CAAC,SAAU,EAAW,EAAgB,MAAoB,EAAkB,EAAE,CAAC,KAAM,CAC5J,IAAM,EAAY,EAAe,EAA0D,GAA9B,EAAe,GAAiC,EAAY,IACzH,GAD6H,EAAS,KAAK,IAAI,IAAI,KAAK,IAAI,EAAE,EAAS,CAAC,CACrK,EAAS,EAAE,CAAC,IAAM,EAAY,IAAI,EAAe,EAAe,KAAK,MAAM,EAAS,EAAY,CAAO,EAAgB,EAAS,EAAY,EAC5I,EAAgB,GAAI,GAAU,EAAe,GAAG,EAAqB,EAAgB,IAAI,EAAe,IAAG,EAAS,EAAe,GAAc,MAAoB,CAAC,EAAkB,EAAS,EAAG,GAAI,EAA8I,OAA3I,GAAc,CAAC,EAAO,iBAAiB,SAAS,EAAa,CAAC,QAAQ,GAAK,CAAC,CAAC,EAAO,iBAAiB,SAAS,EAAa,CAAC,QAAQ,GAAK,CAAC,KAAW,CAAC,EAAO,oBAAoB,SAAS,EAAa,CAAC,EAAO,oBAAoB,SAAS,EAAa,CAAI,EAAO,SAAS,qBAAqB,EAAO,QAAQ,GAAM,CAAC,EAAS,CAAC,CAAC,IAAM,EAAa,IAAc,aAAa,OAAoB,EAAM,MAAM,CAAC,IAAI,EAAa,MAAM,CAAC,SAAS,WAAW,MAAM,OAAO,OAAO,OAAO,SAAS,SAAS,CAAC,SAAS,CAAc,EAAK,MAAM,CAAC,MAAM,CAAC,SAAS,WAAW,IAAI,EAAE,KAAK,EAAE,MAAM,OAAO,OAAO,OAAO,gBAAgB,EAAc,CAAC,CAAC,CAAc,EAAK,MAAM,CAAC,MAAM,CAAC,SAAS,WAAW,IAAI,EAAE,KAAK,EAAE,MAAM,EAAa,GAAG,EAAe,GAAG,OAAO,OAAO,EAAa,OAAO,GAAG,EAAe,GAAG,gBAAgB,EAAY,WAAW,oFAAoF,CAAC,CAAC,CAAC,CAAC,CAAC,sBAbxiC,IAA6D,IAAoD,CAay7B,EAAoB,EAAa,CAAC,YAAY,CAAC,KAAK,EAAY,KAAK,MAAM,cAAc,QAAQ,CAAC,aAAa,WAAW,CAAC,aAAa,CAAC,aAAa,WAAW,CAAC,aAAa,aAAa,wBAAwB,GAAK,CAAC,SAAS,CAAC,KAAK,EAAY,OAAO,MAAM,WAAW,aAAa,EAAE,IAAI,EAAE,IAAI,GAAG,KAAK,EAAE,eAAe,GAAK,CAAC,cAAc,CAAC,KAAK,EAAY,MAAM,MAAM,iBAAiB,aAAa,UAAU,CAAC,YAAY,CAAC,KAAK,EAAY,MAAM,MAAM,eAAe,aAAa,UAAU,CAAC,UAAU,CAAC,KAAK,EAAY,OAAO,MAAM,YAAY,aAAa,EAAE,IAAI,EAAE,IAAI,GAAG,KAAK,EAAE,KAAK,KAAK,CAAC,CAAC"}