{"version":3,"file":"ScrollProgress.BK4XADKb.mjs","names":["useRef","useState"],"sources":["https:/framerusercontent.com/modules/FLTvvzyBjUM6DhIEfj1E/HTdXe3XZcloiPB7TJzKK/ScrollProgress.js"],"sourcesContent":["// Scroll Progress component that tracks the scroll progress of its immediate parent Stack, not the window\nimport{jsx as _jsx}from\"react/jsx-runtime\";import{useEffect,useRef,useState,startTransition}from\"react\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";/**\n * Scroll Progress - tracks the scroll of its parent Stack\n * @framerIntrinsicWidth 360\n * @framerIntrinsicHeight 8\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight fixed\n */export default function ScrollProgress(props){const{color,backgroundColor,height,borderRadius,style}=props;const barRef=useRef(null);const[progress,setProgress]=useState(0);const isStatic=useIsStaticRenderer();useEffect(()=>{if(isStatic)return;let scrollParent=null;if(barRef.current){// Traverse up to find scrollable parent (Stack)\nlet el=barRef.current.parentElement;while(el&&el!==document.body){const overflowY=window.getComputedStyle(el).overflowY;if(overflowY===\"auto\"||overflowY===\"scroll\"){scrollParent=el;break;}el=el.parentElement;}}if(!scrollParent)return;function handleScroll(){const max=scrollParent.scrollHeight-scrollParent.clientHeight;if(max<=0){startTransition(()=>setProgress(0));return;}startTransition(()=>setProgress(scrollParent.scrollTop/max));}handleScroll();scrollParent.addEventListener(\"scroll\",handleScroll);return()=>{scrollParent?.removeEventListener(\"scroll\",handleScroll);};},[isStatic]);// Animate width but show static at preview/canvas\nconst displayProgress=isStatic?0:progress;return /*#__PURE__*/_jsx(\"div\",{ref:barRef,style:{width:\"100%\",height,background:backgroundColor,borderRadius,position:\"relative\",overflow:\"hidden\",...style},\"aria-hidden\":true,children:/*#__PURE__*/_jsx(\"div\",{style:{width:`${displayProgress*100}%`,height:\"100%\",background:color,borderRadius,transition:isStatic?\"none\":\"width 0.45s cubic-bezier(0.33,1,0.68,1)\"}})});}addPropertyControls(ScrollProgress,{color:{type:ControlType.Color,title:\"Bar Color\",defaultValue:\"#0099FF\"},backgroundColor:{type:ControlType.Color,title:\"Background\",defaultValue:\"#EEEEEE\"},height:{type:ControlType.Number,title:\"Height\",defaultValue:8,min:2,max:40,step:1,unit:\"px\"},borderRadius:{type:ControlType.Number,title:\"Radius\",defaultValue:8,min:0,max:24}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ScrollProgress\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerIntrinsicHeight\":\"8\",\"framerSupportedLayoutHeight\":\"fixed\",\"framerIntrinsicWidth\":\"360\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ScrollProgress.map"],"mappings":"qNAOG,SAAwB,EAAe,EAAM,CAAC,GAAK,CAAC,QAAM,kBAAgB,SAAO,eAAa,SAAO,EAAY,EAAOA,EAAO,IAAI,EAAO,CAAC,EAAS,GAAaC,EAAS,CAAC,EAAQ,EAAS,EAAoB,EAAE,MAAc,CAAC,GAAG,EAAS,OAAO,IAAI,EAAa,KAAK,GAAG,EAAO,QAAQ,CAC/R,IAAI,EAAG,EAAO,QAAQ,cAAc,KAAM,GAAI,IAAK,SAAS,MAAK,CAAC,IAAM,EAAU,EAAO,iBAAiB,CAAE,CAAC,CAAC,UAAU,GAAG,IAAY,QAAQ,IAAY,SAAS,CAAC,EAAa,EAAG,KAAM,CAAC,EAAG,EAAG,aAAc,CAAC,CAAC,GAAG,CAAC,EAAa,OAAO,SAAS,GAAc,CAAC,IAAM,EAAI,EAAa,aAAa,EAAa,aAAa,GAAG,GAAK,EAAE,CAAC,MAAoB,EAAY,CAAC,CAAC,EAAE,MAAO,CAAC,MAAoB,EAAY,EAAa,UAAU,CAAG,CAAC,CAAE,CAAqE,OAApE,EAAa,EAAE,EAAa,iBAAiB,SAAS,CAAY,MAAY,CAAC,GAAc,oBAAoB,SAAS,CAAY,CAAE,CAAE,EAAE,CAAC,CAAQ,CAAC,EAC3kB,IAAM,EAAgB,EAAS,EAAE,EAAS,OAAoB,EAAK,MAAM,CAAC,IAAI,EAAO,MAAM,CAAC,MAAM,OAAO,SAAO,WAAW,EAAgB,eAAa,SAAS,WAAW,SAAS,SAAS,GAAG,CAAK,EAAE,cAAc,GAAK,SAAsB,EAAK,MAAM,CAAC,MAAM,CAAC,MAAM,GAAG,EAAgB,IAAI,GAAG,OAAO,OAAO,WAAW,EAAM,eAAa,WAAW,EAAS,OAAO,yCAAyC,CAAC,CAAC,CAAC,CAAC,CAAE,qBARhX,IAA6D,IAAwE,EAQ4O,EAAoB,EAAe,CAAC,MAAM,CAAC,KAAK,EAAY,MAAM,MAAM,YAAY,aAAa,SAAS,EAAE,gBAAgB,CAAC,KAAK,EAAY,MAAM,MAAM,aAAa,aAAa,SAAS,EAAE,OAAO,CAAC,KAAK,EAAY,OAAO,MAAM,SAAS,aAAa,EAAE,IAAI,EAAE,IAAI,GAAG,KAAK,EAAE,KAAK,IAAI,EAAE,aAAa,CAAC,KAAK,EAAY,OAAO,MAAM,SAAS,aAAa,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC"}