{"version":3,"file":"BlogProgressPill.CSIFMKHK.mjs","names":["useState","_Fragment"],"sources":["https:/framerusercontent.com/modules/oviIQaw00WZOCpw74P0K/2r37QvjaAVSyegGAVeHI/BlogProgressPill.js"],"sourcesContent":["// Blog progress pill that fills up as you scroll down the article\nimport{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from\"react/jsx-runtime\";import{useEffect,useState,startTransition}from\"react\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";/**\n * Blog Progress Pill\n *\n * @framerIntrinsicWidth 400\n * @framerIntrinsicHeight 80\n *\n * @framerSupportedLayoutWidth fixed\n * @framerSupportedLayoutHeight fixed\n */export default function BlogProgressPill(props){const{backgroundColor=\"rgba(30, 30, 40, 0.8)\",fillColor=\"#0099FF\",textColor=\"#FFFFFF\",borderRadius=50,pillWidth=140,pillHeight=56,showPercentage=true,percentageText=\"\",percentageSize=34,readTimeText=\"5 min read\",position=\"bottom-center\",bottomOffset=40,sideOffset=40}=props;const[scrollProgress,setScrollProgress]=useState(0);const[estimatedReadTime,setEstimatedReadTime]=useState(5);const[isVisible,setIsVisible]=useState(false);const isStatic=useIsStaticRenderer();const isComplete=scrollProgress>=100;useEffect(()=>{if(isStatic||typeof window===\"undefined\")return;// Fade in after 2 second delay\nconst fadeInTimer=setTimeout(()=>{startTransition(()=>{setIsVisible(true);});},2e3);// Calculate estimated read time based on word count\nconst calculateReadTime=()=>{const text=document.body.innerText||\"\";const wordCount=text.trim().split(/\\s+/).length;const wordsPerMinute=200;const minutes=Math.ceil(wordCount/wordsPerMinute);startTransition(()=>{setEstimatedReadTime(minutes);});};const handleScroll=()=>{const windowHeight=window.innerHeight;const documentHeight=document.documentElement.scrollHeight;const scrollTop=window.scrollY;const totalScrollableHeight=documentHeight-windowHeight;const progress=totalScrollableHeight>0?scrollTop/totalScrollableHeight*100:0;startTransition(()=>{setScrollProgress(Math.min(100,Math.max(0,progress)));});};calculateReadTime();handleScroll();window.addEventListener(\"scroll\",handleScroll,{passive:true});return()=>{clearTimeout(fadeInTimer);window.removeEventListener(\"scroll\",handleScroll);};},[isStatic]);const getPositionStyles=()=>{const baseStyles={position:\"fixed\",bottom:`${bottomOffset}px`,zIndex:1e3};switch(position){case\"bottom-left\":return{...baseStyles,left:`${sideOffset}px`};case\"bottom-right\":return{...baseStyles,right:`${sideOffset}px`};case\"bottom-center\":default:return{...baseStyles,left:\"50%\",transform:\"translateX(-50%)\"};}};return /*#__PURE__*/_jsx(\"div\",{style:{...getPositionStyles(),width:isComplete?\"auto\":`${pillWidth}px`,height:`${pillHeight}px`,backgroundColor:isComplete?fillColor:backgroundColor,borderRadius:`${borderRadius}px`,backdropFilter:\"blur(10px)\",WebkitBackdropFilter:\"blur(10px)\",boxShadow:\"0 8px 32px rgba(0, 0, 0, 0.3)\",overflow:\"hidden\",display:\"flex\",alignItems:\"center\",justifyContent:\"center\",padding:isComplete?\"0 24px\":\"0 32px\",gap:\"3px\",transition:\"width 0.3s ease-out, background-color 0.3s ease-out, padding 0.3s ease-out, opacity 0.6s ease\",cursor:isComplete?\"pointer\":\"default\",opacity:isVisible?1:0},onClick:isComplete?()=>{if(typeof window!==\"undefined\"){// Add your CTA action here\nconsole.log(\"Pre-order clicked\");}}:undefined,children:isComplete?// CTA Button Content\n/*#__PURE__*/_jsx(\"div\",{style:{...props.font,color:textColor,fontSize:\"16px\",fontWeight:\"600\",textAlign:\"center\",lineHeight:1,whiteSpace:\"nowrap\"},children:\"Pre-order the 9 Lessons Guide\"}):/*#__PURE__*/_jsxs(_Fragment,{children:[showPercentage&&/*#__PURE__*/_jsx(\"div\",{style:{...props.font,color:textColor,fontSize:`${percentageSize}px`,fontWeight:\"600\",minWidth:\"60px\",textAlign:\"left\",lineHeight:1},children:percentageText||`${Math.round(scrollProgress)}%`}),/*#__PURE__*/_jsxs(\"div\",{style:{flex:1,display:\"flex\",flexDirection:\"column\",gap:\"8px\"},children:[/*#__PURE__*/_jsx(\"div\",{style:{width:\"100%\",height:\"6px\",backgroundColor:\"rgba(255, 255, 255, 0.1)\",borderRadius:\"4px\",overflow:\"hidden\",position:\"relative\"},children:/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",top:0,left:0,height:\"100%\",width:`${scrollProgress}%`,backgroundColor:fillColor,borderRadius:\"4px\",transition:\"width 0.1s ease-out\"}})}),/*#__PURE__*/_jsx(\"div\",{style:{...props.font,color:textColor,fontSize:\"16px\",opacity:.8,lineHeight:1,display:\"none\"},children:readTimeText||`${estimatedReadTime} min read`})]})]})});}addPropertyControls(BlogProgressPill,{backgroundColor:{type:ControlType.Color,title:\"Background\",defaultValue:\"rgba(30, 30, 40, 0.8)\"},fillColor:{type:ControlType.Color,title:\"Fill Color\",defaultValue:\"#0099FF\"},textColor:{type:ControlType.Color,title:\"Text Color\",defaultValue:\"#FFFFFF\"},borderRadius:{type:ControlType.Number,title:\"Border Radius\",defaultValue:50,min:0,max:100,step:1,unit:\"px\"},pillWidth:{type:ControlType.Number,title:\"Width\",defaultValue:140,min:200,max:800,step:10,unit:\"px\"},pillHeight:{type:ControlType.Number,title:\"Height\",defaultValue:32,min:32,max:120,step:5,unit:\"px\"},showPercentage:{type:ControlType.Boolean,title:\"Show Percentage\",defaultValue:true,enabledTitle:\"Show\",disabledTitle:\"Hide\"},percentageText:{type:ControlType.String,title:\"Percentage Text\",defaultValue:\"\",placeholder:\"Auto\"},percentageSize:{type:ControlType.Number,title:\"Percentage Size\",defaultValue:34,min:12,max:72,step:1,unit:\"px\"},readTimeText:{type:ControlType.String,title:\"Read Time Text\",defaultValue:\"5 min read\"},position:{type:ControlType.Enum,title:\"Position\",options:[\"bottom-left\",\"bottom-center\",\"bottom-right\"],optionTitles:[\"Bottom Left\",\"Bottom Center\",\"Bottom Right\"],defaultValue:\"bottom-center\",displaySegmentedControl:true},bottomOffset:{type:ControlType.Number,title:\"Bottom Offset\",defaultValue:40,min:0,max:200,step:5,unit:\"px\"},sideOffset:{type:ControlType.Number,title:\"Side Offset\",defaultValue:40,min:0,max:200,step:5,unit:\"px\"},font:{type:ControlType.Font,title:\"Font\",controls:\"extended\",defaultFontType:\"sans-serif\",defaultValue:{fontSize:\"16px\",variant:\"Medium\",letterSpacing:\"-0.01em\",lineHeight:\"1em\"}}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"BlogProgressPill\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerIntrinsicWidth\":\"400\",\"framerSupportedLayoutHeight\":\"fixed\",\"framerIntrinsicHeight\":\"80\",\"framerSupportedLayoutWidth\":\"fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./BlogProgressPill.map"],"mappings":"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"}