{"version":3,"file":"CircularProgressBar.Dcube__c.mjs","names":["useState","useRef","useMemo","__esmMin","pe","init_npm_react_18_3_1","te","_e","p","ce","de","useInView","motion","init_framer_motion_DhsWWWsN","init_framer_BWFVvmND","useIsStaticRenderer","ControlType","addPropertyControls","CircularProgressBar","props","animatedPercentage","setAnimatedPercentage","animatedTextValue","setAnimatedTextValue","isStatic","ref","isInView","hasFixedDimensions","containerWidth","containerHeight","availableSize","circleRadius","radius","strokeWidth","size","center","circumference","strokeDashoffset","percentage","timer","increment","currentStep","interval","newValue","animationDelay","displayPercentage","containerBackgroundColor","barColor","textColor","font","init_CircularProgressBar","init_jsx_runtime"],"sources":["https:/framerusercontent.com/modules/oAzVORjXOKasr2i0RX6P/hSe7TvP6Dw5rJaN6TVIo/CircularProgressBar.js"],"sourcesContent":["// Animated circular progress bar with smooth animation from 0 to percentage\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useState,useEffect,useMemo,startTransition,useRef}from\"react\";import{motion,useInView}from\"framer-motion\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";/**\n * @framerSupportedLayoutWidth fixed\n * @framerSupportedLayoutHeight fixed\n */export default function CircularProgressBar(props){const{percentage=75,barColor=\"#0099FF\",textColor=\"#000000\",font,strokeWidth=8,radius=80,containerBackgroundColor=\"#F5F5F5\",animationDelay=.1}=props;const[animatedPercentage,setAnimatedPercentage]=useState(0);const[animatedTextValue,setAnimatedTextValue]=useState(0);const isStatic=useIsStaticRenderer();const ref=useRef(null);const isInView=useInView(ref,{once:true});// Check if component has fixed dimensions\nconst hasFixedDimensions=props.style?.width!==undefined&&props.style?.height!==undefined;// Calculate dynamic dimensions based on container size\nconst containerWidth=hasFixedDimensions?typeof props.style.width===\"string\"?parseFloat(props.style.width):props.style.width:200;const containerHeight=hasFixedDimensions?typeof props.style.height===\"string\"?parseFloat(props.style.height):props.style.height:200;// Use the smaller dimension to ensure the circle fits\nconst availableSize=Math.min(containerWidth,containerHeight);// Calculate responsive radius - use user's radius or calculate based on container\nconst circleRadius=hasFixedDimensions?Math.min(radius,(availableSize-strokeWidth)/2):radius;// Calculate SVG dimensions\nconst size=hasFixedDimensions?availableSize:(circleRadius+strokeWidth)*2;const center=size/2;const circumference=2*Math.PI*circleRadius;// Calculate stroke dash offset for progress\nconst strokeDashoffset=useMemo(()=>{const progress=isStatic?percentage:animatedPercentage;return circumference-progress/100*circumference;},[circumference,animatedPercentage,percentage,isStatic]);// Animate text value rolling from 0 to percentage\nuseEffect(()=>{if(isStatic)return;// Single animation - sync with progress bar\nif(!isInView)return;const timer=setTimeout(()=>{const duration=1500// Match the circle animation duration\n;const steps=60;const stepDuration=duration/steps;const increment=percentage/steps;let currentStep=0;const interval=setInterval(()=>{currentStep++;const newValue=Math.min(increment*currentStep,percentage);startTransition(()=>{setAnimatedTextValue(Math.round(newValue));});if(currentStep>=steps||newValue>=percentage){clearInterval(interval);startTransition(()=>{setAnimatedTextValue(Math.round(percentage));});}},stepDuration);},animationDelay*1e3);return()=>clearTimeout(timer);},[percentage,isStatic,isInView,animationDelay]);// Animate percentage when in view and when percentage changes\nuseEffect(()=>{if(isStatic||!isInView)return;// Single animation\nconst timer=setTimeout(()=>{startTransition(()=>{setAnimatedPercentage(percentage);});},animationDelay*1e3);return()=>clearTimeout(timer);},[percentage,isStatic,isInView]);// Reset animation when percentage changes\nuseEffect(()=>{if(isStatic)return;startTransition(()=>{setAnimatedPercentage(0);setAnimatedTextValue(0);});},[percentage,isStatic]);const displayPercentage=isStatic?percentage:animatedTextValue;return /*#__PURE__*/_jsxs(\"div\",{ref:ref,style:{...props.style,position:\"relative\",width:hasFixedDimensions?\"100%\":size,height:hasFixedDimensions?\"100%\":size,display:\"flex\",alignItems:\"center\",justifyContent:\"center\",borderRadius:\"50%\",overflow:\"hidden\",backgroundColor:containerBackgroundColor},children:[/*#__PURE__*/_jsx(\"svg\",{width:\"100%\",height:\"100%\",viewBox:`0 0 ${size} ${size}`,style:{position:\"absolute\",top:0,left:0,transform:\"rotate(-90deg)\"},children:/*#__PURE__*/_jsx(motion.circle,{cx:center,cy:center,r:circleRadius,fill:\"none\",stroke:barColor,strokeWidth:strokeWidth,strokeLinecap:\"round\",strokeDasharray:circumference,strokeDashoffset:isStatic?strokeDashoffset:circumference,animate:isStatic?{}:{strokeDashoffset:strokeDashoffset},transition:{duration:1.5,ease:\"easeInOut\",delay:animationDelay}})}),/*#__PURE__*/_jsxs(motion.div,{style:{position:\"absolute\",display:\"flex\",alignItems:\"center\",justifyContent:\"center\",color:textColor,fontWeight:\"600\",fontSize:Math.max(circleRadius*.25,12),opacity:isStatic?1:0,...font},animate:isStatic?{}:{scale:[.8,1.1,1],opacity:[0,1,1]},transition:{duration:.6,ease:\"easeOut\",delay:animationDelay},children:[Math.round(displayPercentage),\"%\"]})]});}addPropertyControls(CircularProgressBar,{percentage:{type:ControlType.Number,title:\"Percentage\",defaultValue:75,min:0,max:100,step:1,unit:\"%\"},animationDelay:{type:ControlType.Number,title:\"Animation Delay\",defaultValue:.1,min:0,max:5,step:.1,unit:\"s\"},barColor:{type:ControlType.Color,title:\"Bar Color\",defaultValue:\"#0099FF\"},textColor:{type:ControlType.Color,title:\"Text Color\",defaultValue:\"#000000\"},containerBackgroundColor:{type:ControlType.Color,title:\"Container Background\",defaultValue:\"#F5F5F5\"},font:{type:ControlType.Font,title:\"Font\",defaultValue:{fontSize:\"16px\",variant:\"Semibold\",letterSpacing:\"-0.01em\",lineHeight:\"1em\"},controls:\"extended\",defaultFontType:\"sans-serif\"},strokeWidth:{type:ControlType.Number,title:\"Stroke Width\",defaultValue:8,min:2,max:20,step:1,unit:\"px\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"CircularProgressBar\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerSupportedLayoutHeight\":\"fixed\",\"framerSupportedLayoutWidth\":\"fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./CircularProgressBar.map"],"mappings":"A,mQAIG,SAAwBkB,EAAoB,EAAM,CAAC,GAAK,CAAC,aAAW,GAAG,WAAS,UAAU,YAAU,UAAU,OAAK,cAAY,EAAE,SAAO,GAAG,2BAAyB,UAAU,iBAAe,IAAIC,EAAW,CAACC,EAAmBC,GAAuBrB,EAAS,CAAC,EAAO,CAACsB,EAAkBC,GAAsBvB,EAAS,CAAC,EAAQwB,EAAST,EAAoB,EAAQU,EAAIxB,EAAO,IAAI,EAAQyB,EAASf,EAAUc,EAAI,CAAC,KAAK,EAAI,CAAC,EAC9ZE,EAAmBR,EAAM,OAAO,QAAQ,IAAA,IAAWA,EAAM,OAAO,SAAS,IAAA,GACzES,EAAeD,EAAmB,OAAOR,EAAM,MAAM,OAAQ,SAAS,WAAWA,EAAM,MAAM,KAAK,EAAEA,EAAM,MAAM,MAAM,IAAUU,EAAgBF,EAAmB,OAAOR,EAAM,MAAM,QAAS,SAAS,WAAWA,EAAM,MAAM,MAAM,EAAEA,EAAM,MAAM,OAAO,IAC1PW,EAAc,KAAK,IAAIF,EAAeC,CAAe,EACrDE,EAAaJ,EAAmB,KAAK,IAAIK,GAAQF,EAAcG,GAAa,CAAC,EAAED,EAC/EE,EAAKP,EAAmBG,GAAeC,EAAaE,GAAa,EAAQE,EAAOD,EAAK,EAAQE,EAAc,EAAE,KAAK,GAAGL,EACrHM,EAAiBnC,MAA0EkC,GAA9CZ,EAASc,EAAWlB,GAAiD,IAAIgB,EAAgB,CAACA,EAAchB,EAAmBkB,EAAWd,CAAQ,CAAC,EAClMf,MAAc,CACd,GADkBe,GACf,CAACE,EAAS,OAAO,IAAMa,EAAM,eAAe,CAAC,IACQC,EAAUF,EAAW,GAAUG,EAAY,EAAQC,EAAS,gBAAgB,CAAC,IAAc,IAAMC,EAAS,KAAK,IAAIH,EAAUC,EAAYH,CAAU,EAAEhC,MAAoB,CAACiB,EAAqB,KAAK,MAAMoB,CAAQ,CAAC,CAAE,CAAC,GAAKF,GAAa,IAAOE,GAAUL,KAAY,cAAcI,CAAQ,EAAEpC,MAAoB,CAACiB,EAAqB,KAAK,MAAMe,CAAU,CAAC,CAAE,CAAC,EAAG,EAAE,EAAY,CAAE,EAAEM,EAAe,GAAG,EAAE,UAAU,aAAaL,CAAK,CAAE,EAAE,CAACD,EAAWd,EAASE,EAASkB,CAAc,CAAC,EAC9gBnC,MAAc,CAAC,GAAGe,GAAU,CAACE,EAAS,OACtC,IAAMa,EAAM,eAAe,CAACjC,MAAoB,CAACe,EAAsBiB,CAAU,CAAE,CAAC,CAAE,EAAEM,EAAe,GAAG,EAAE,UAAU,aAAaL,CAAK,CAAE,EAAE,CAACD,EAAWd,EAASE,CAAQ,CAAC,EAC1KjB,MAAc,CAAIe,GAAgBlB,MAAoB,CAACe,EAAsB,CAAC,EAAEE,EAAqB,CAAC,CAAE,CAAC,CAAE,EAAE,CAACe,EAAWd,CAAQ,CAAC,EAAE,IAAMqB,EAAkBrB,EAASc,EAAWhB,EAAkB,MAAoB,gBAAM,MAAM,CAAK,MAAI,MAAM,CAAC,GAAGH,EAAM,MAAM,SAAS,WAAW,MAAMQ,EAAmB,OAAOO,EAAK,OAAOP,EAAmB,OAAOO,EAAK,QAAQ,OAAO,WAAW,SAAS,eAAe,SAAS,aAAa,MAAM,SAAS,SAAS,gBAAgBY,CAAwB,EAAE,SAAS,CAAc,gBAAK,MAAM,CAAC,MAAM,OAAO,OAAO,OAAO,QAAQ,OAAOZ,EAAK,GAAGA,IAAO,MAAM,CAAC,SAAS,WAAW,IAAI,EAAE,KAAK,EAAE,UAAU,gBAAgB,EAAE,SAAsB,gBAAKtB,EAAO,OAAO,CAAC,GAAGuB,EAAO,GAAGA,EAAO,EAAEJ,EAAa,KAAK,OAAO,OAAOgB,EAAqB,cAAY,cAAc,QAAQ,gBAAgBX,EAAc,iBAAiBZ,EAASa,EAAiBD,EAAc,QAAQZ,EAAS,CAAC,EAAE,CAAkB,kBAAgB,EAAE,WAAW,CAAC,SAAS,IAAI,KAAK,YAAY,MAAMoB,CAAc,CAAC,CAAC,CAAC,CAAC,EAAe,gBAAMhC,EAAO,IAAI,CAAC,MAAM,CAAC,SAAS,WAAW,QAAQ,OAAO,WAAW,SAAS,eAAe,SAAS,MAAMoC,EAAU,WAAW,MAAM,SAAS,KAAK,IAAIjB,EAAa,IAAI,EAAE,EAAE,QAAQ,KAAa,GAAGkB,CAAI,EAAE,QAAQzB,EAAS,CAAC,EAAE,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,EAAE,QAAQ,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,SAAS,GAAG,KAAK,UAAU,MAAMoB,CAAc,EAAE,SAAS,CAAC,KAAK,MAAMC,CAAiB,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAE,C,8CAAC5B,EAAoBC,EAAoB,CAAC,WAAW,CAAC,KAAKF,EAAY,OAAO,MAAM,aAAa,aAAa,GAAG,IAAI,EAAE,IAAI,IAAI,KAAK,EAAE,KAAK,GAAG,EAAE,eAAe,CAAC,KAAKA,EAAY,OAAO,MAAM,kBAAkB,aAAa,GAAG,IAAI,EAAE,IAAI,EAAE,KAAK,GAAG,KAAK,GAAG,EAAE,SAAS,CAAC,KAAKA,EAAY,MAAM,MAAM,YAAY,aAAa,SAAS,EAAE,UAAU,CAAC,KAAKA,EAAY,MAAM,MAAM,aAAa,aAAa,SAAS,EAAE,yBAAyB,CAAC,KAAKA,EAAY,MAAM,MAAM,uBAAuB,aAAa,SAAS,EAAE,KAAK,CAAC,KAAKA,EAAY,KAAK,MAAM,OAAO,aAAa,CAAC,SAAS,OAAO,QAAQ,WAAW,cAAc,UAAU,WAAW,KAAK,EAAE,SAAS,WAAW,gBAAgB,YAAY,EAAE,YAAY,CAAC,KAAKA,EAAY,OAAO,MAAM,eAAe,aAAa,EAAE,IAAI,EAAE,IAAI,GAAG,KAAK,EAAE,KAAK,IAAI,CAAC,CAAC,C"}