{"version":3,"file":"FormattedNumberCounter.BbtmwfSm.mjs","names":["useRef","useState"],"sources":["https:/framerusercontent.com/modules/l81qTmArGZjuGGroyA5q/1CCrNdzMV3uuWGhBIPII/FormattedNumberCounter.js"],"sourcesContent":["// Formatted Number Counter\n// An animated counter with thousand separators, decimal support, and custom easing.\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{addPropertyControls,ControlType,RenderTarget}from\"framer\";import{motion,useInView,useMotionValue,useTransform,animate}from\"framer-motion\";import{useEffect,useRef,useState}from\"react\";/**\n * @framerSupportedLayoutWidth auto\n * @framerSupportedLayoutHeight auto\n */export default function FormattedNumberCounter(props){const{startValue,endValue,duration,delay,decimals,easing,font,textAlign,color,autoStart,// play, // Removed based on feedback\nloop,resetOnReentry,style}=props;const ref=useRef(null);const isInView=useInView(ref,{once:!resetOnReentry});const motionValue=useMotionValue(startValue);const hasAnimated=useRef(false);// New state for manual interaction\nconst[manualTrigger,setManualTrigger]=useState(false);// Detect current environment\nconst renderTarget=RenderTarget.current();const isCanvas=renderTarget===RenderTarget.canvas;const isExport=renderTarget===RenderTarget.export;const isThumbnail=renderTarget===RenderTarget.thumbnail;// Static render environments\nconst isStaticRender=isCanvas||isExport||isThumbnail;const[displayValue,setDisplayValue]=useState(startValue);// Sync motionValue when startValue changes\nuseEffect(()=>{if(!hasAnimated.current){motionValue.set(startValue);}},[startValue,motionValue]);// Format number with thousand separators\nconst formatNumber=value=>{const fixedValue=Number(value).toFixed(decimals);const[integerPart,decimalPart]=fixedValue.split(\".\");let formattedInteger=integerPart;if(integerPart.length>=4){formattedInteger=integerPart.replace(/\\B(?=(\\d{3})+(?!\\d))/g,\",\");}return decimals>0?`${formattedInteger}.${decimalPart}`:formattedInteger;};const rounded=useTransform(motionValue,latest=>formatNumber(latest));const easingMap={linear:[0,0,1,1],easeIn:[.42,0,1,1],easeOut:[0,0,.58,1],easeInOut:[.42,0,.58,1],circIn:[.55,0,1,.45],circOut:[0,.55,.45,1],backIn:[.36,0,.66,-.56],backOut:[.34,1.56,.64,1]};// Main Animation Logic\nuseEffect(()=>{// 1. Static environments show end value immediately\nif(isStaticRender){motionValue.set(endValue);setDisplayValue(endValue);return;}// 2. Determine if animation should start\n// If AutoStart is ON: controlled by Viewport (isInView)\n// If AutoStart is OFF: controlled by internal click state (manualTrigger)\nconst shouldAnimate=autoStart?isInView:manualTrigger;// 3. If conditions not met\nif(!shouldAnimate){// Logic to reset if stopped\n// If manual mode (autoStart is false), clicking off should reset to start\nif((resetOnReentry||!autoStart)&&!shouldAnimate){motionValue.set(startValue);setDisplayValue(startValue);hasAnimated.current=false;}return;}// 4. Prevent duplicate animation if already done (unless looping)\nif(hasAnimated.current&&!loop&&!resetOnReentry&&autoStart){motionValue.set(endValue);setDisplayValue(endValue);return;}// 5. Run Animation\nconst animateCounter=()=>{const controls=animate(motionValue,endValue,{duration,delay,ease:easingMap[easing],onUpdate:latest=>{setDisplayValue(latest);},onComplete:()=>{setDisplayValue(endValue);if(loop&&shouldAnimate){motionValue.set(startValue);setDisplayValue(startValue);setTimeout(()=>{animateCounter();},delay*1e3);}}});return controls;};hasAnimated.current=true;const controls=animateCounter();return()=>controls.stop();},[isInView,manualTrigger,startValue,endValue,duration,delay,easing,motionValue,autoStart,loop,resetOnReentry,isStaticRender]);const finalFormattedValue=formatNumber(endValue);const getDisplayContent=()=>{if(isStaticRender){return finalFormattedValue;}return rounded;};// Handle manual click interaction\nconst handleTap=()=>{if(!autoStart){setManualTrigger(prev=>!prev);}};return /*#__PURE__*/_jsxs(\"div\",{ref:ref,onClick:handleTap,style:{...style,position:\"relative\",display:\"inline-block\",width:\"auto\",minWidth:\"max-content\",cursor:autoStart?\"default\":\"pointer\"},children:[/*#__PURE__*/_jsx(\"span\",{style:{...font,color:\"transparent\",opacity:0,textAlign,display:\"block\",width:\"100%\",fontVariantNumeric:\"tabular-nums\",pointerEvents:\"none\",userSelect:\"none\",visibility:\"hidden\"},children:finalFormattedValue}),/*#__PURE__*/_jsx(motion.span,{style:{...font,color,textAlign,display:\"block\",width:\"100%\",fontVariantNumeric:\"tabular-nums\",position:\"absolute\",top:0,left:0},children:getDisplayContent()})]});}addPropertyControls(FormattedNumberCounter,{startValue:{type:ControlType.Number,title:\"Start Value\",defaultValue:0,step:1},endValue:{type:ControlType.Number,title:\"End Value\",defaultValue:12345,step:1},duration:{type:ControlType.Number,title:\"Duration\",defaultValue:2,min:.1,max:10,step:.1,unit:\"s\"},delay:{type:ControlType.Number,title:\"Delay\",defaultValue:0,min:0,max:5,step:.1,unit:\"s\"},decimals:{type:ControlType.Number,title:\"Decimals\",defaultValue:0,min:0,max:4,step:1,displayStepper:true},easing:{type:ControlType.Enum,title:\"Easing\",options:[\"linear\",\"easeIn\",\"easeOut\",\"easeInOut\",\"circIn\",\"circOut\",\"backIn\",\"backOut\"],optionTitles:[\"Linear\",\"Ease In\",\"Ease Out\",\"Ease In Out\",\"Circ In\",\"Circ Out\",\"Back In\",\"Back Out\"],defaultValue:\"easeOut\"},font:{type:ControlType.Font,title:\"Font\",controls:\"extended\",defaultFontType:\"sans-serif\",defaultValue:{fontSize:\"40px\",letterSpacing:\"-0.04em\",lineHeight:\"1em\"}},textAlign:{type:ControlType.Enum,title:\"Alignment\",options:[\"left\",\"center\",\"right\"],optionTitles:[\"Left\",\"Center\",\"Right\"],defaultValue:\"left\",displaySegmentedControl:true},color:{type:ControlType.Color,title:\"Color\",defaultValue:\"#FFFFFF\"},autoStart:{type:ControlType.Boolean,title:\"Auto Start\",defaultValue:true,enabledTitle:\"On\",disabledTitle:\"Off\",description:\"Start on scroll. If Off, click component to start/stop.\"},// Removed \"play\" control as requested\nloop:{type:ControlType.Boolean,title:\"Loop\",defaultValue:false,enabledTitle:\"On\",disabledTitle:\"Off\"},resetOnReentry:{type:ControlType.Boolean,title:\"Reset on Re-entry\",defaultValue:false,enabledTitle:\"On\",disabledTitle:\"Off\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"FormattedNumberCounter\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutWidth\":\"auto\",\"framerSupportedLayoutHeight\":\"auto\",\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./FormattedNumberCounter.map"],"mappings":"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"}