{"version":3,"file":"TimedFill.CaCSQi3g.mjs","names":["useState","useRef"],"sources":["https:/framerusercontent.com/modules/shqTXKW9XBF7rlED5FAt/oMNHJ13kobSMfYGLDefe/TimedFill.js"],"sourcesContent":["// Component that fills an object with color based on a time duration\nimport{jsx as _jsx}from\"react/jsx-runtime\";import{useEffect,useState,startTransition,useRef}from\"react\";import{addPropertyControls,ControlType}from\"framer\";import{motion}from\"framer-motion\";/**\n * Timed Fill Component\n * Fills an object with color based on a set time duration\n *\n * @framerIntrinsicWidth 300\n * @framerIntrinsicHeight 100\n *\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight any-prefer-fixed\n */export default function TimedFill(props){const{enabled=true,duration=5,fillColor=\"#0099FF\",backgroundColor=\"#F5F5F5\",direction=\"left-to-right\",autoStart=true,loop=false,borderRadius=8,style}=props;const[progress,setProgress]=useState(0);const[isRunning,setIsRunning]=useState(autoStart);const animationFrameRef=useRef(null);useEffect(()=>{if(!isRunning||!enabled){if(animationFrameRef.current){cancelAnimationFrame(animationFrameRef.current);}return;}const startTime=Date.now();const durationMs=duration*1e3;const updateProgress=()=>{const elapsed=Date.now()-startTime;const newProgress=Math.min(elapsed/durationMs*100,100);setProgress(newProgress);if(newProgress<100){animationFrameRef.current=requestAnimationFrame(updateProgress);}else if(loop){setProgress(0);setIsRunning(true);}else{setIsRunning(false);}};animationFrameRef.current=requestAnimationFrame(updateProgress);return()=>{if(animationFrameRef.current){cancelAnimationFrame(animationFrameRef.current);}};},[isRunning,duration,loop,enabled]);const handleClick=()=>{if(progress>=100&&!loop){startTransition(()=>{setProgress(0);setIsRunning(true);});}else{startTransition(()=>setIsRunning(!isRunning));}};const getClipPath=()=>{switch(direction){case\"left-to-right\":return`inset(0 ${100-progress}% 0 0)`;case\"right-to-left\":return`inset(0 0 0 ${100-progress}%)`;case\"top-to-bottom\":return`inset(0 0 ${100-progress}% 0)`;case\"bottom-to-top\":return`inset(${100-progress}% 0 0 0)`;default:return`inset(0 ${100-progress}% 0 0)`;}};return /*#__PURE__*/_jsx(\"div\",{style:{...style,position:\"relative\",width:\"100%\",height:\"100%\",backgroundColor,borderRadius,overflow:\"hidden\",cursor:\"pointer\"},onClick:handleClick,children:/*#__PURE__*/_jsx(motion.div,{style:{position:\"absolute\",top:0,left:0,width:\"100%\",height:\"100%\",backgroundColor:fillColor,clipPath:getClipPath(),display:enabled?\"block\":\"none\"}})});}addPropertyControls(TimedFill,{enabled:{type:ControlType.Boolean,title:\"Enabled\",defaultValue:true,enabledTitle:\"On\",disabledTitle:\"Off\"},duration:{type:ControlType.Number,title:\"Duration\",defaultValue:5,min:.1,max:60,step:.1,unit:\"s\"},fillColor:{type:ControlType.Color,title:\"Fill Color\",defaultValue:\"#0099FF\"},backgroundColor:{type:ControlType.Color,title:\"Background\",defaultValue:\"#F5F5F5\"},direction:{type:ControlType.Enum,title:\"Direction\",options:[\"left-to-right\",\"right-to-left\",\"top-to-bottom\",\"bottom-to-top\"],optionTitles:[\"Left to Right\",\"Right to Left\",\"Top to Bottom\",\"Bottom to Top\"],defaultValue:\"left-to-right\"},autoStart:{type:ControlType.Boolean,title:\"Auto Start\",defaultValue:true,enabledTitle:\"On\",disabledTitle:\"Off\"},loop:{type:ControlType.Boolean,title:\"Loop\",defaultValue:false,enabledTitle:\"On\",disabledTitle:\"Off\"},borderRadius:{type:ControlType.Number,title:\"Radius\",defaultValue:8,min:0,max:100,step:1,unit:\"px\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"TimedFill\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutHeight\":\"any-prefer-fixed\",\"framerIntrinsicWidth\":\"300\",\"framerIntrinsicHeight\":\"100\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./TimedFill.map"],"mappings":"iPAUG,SAAwB,EAAU,EAAM,CAAC,GAAK,CAAC,UAAQ,GAAK,WAAS,EAAE,YAAU,UAAU,kBAAgB,UAAU,YAAU,gBAAgB,YAAU,GAAK,OAAK,GAAM,eAAa,EAAE,SAAO,EAAW,CAAC,EAAS,GAAaA,EAAS,CAAC,EAAO,CAAC,EAAU,GAAcA,EAAS,CAAS,EAAQ,EAAkBC,EAAO,IAAI,EAAE,MAAc,CAAC,GAAG,CAAC,GAAW,CAAC,EAAQ,CAAI,EAAkB,SAAS,qBAAqB,EAAkB,OAAO,EAAG,MAAO,CAAC,IAAM,EAAU,KAAK,IAAI,EAAQ,EAAW,EAAS,IAAU,MAAmB,CAAC,IAAM,EAAQ,KAAK,IAAI,EAAE,EAAgB,EAAY,KAAK,IAAI,EAAQ,EAAW,IAAI,GAAG,EAAE,EAAY,CAAW,EAAK,EAAY,IAAK,EAAkB,QAAQ,sBAAsB,CAAc,EAAW,GAAM,EAAY,CAAC,EAAE,EAAa,EAAI,GAAQ,EAAa,EAAK,CAAG,EAAkE,MAAhE,GAAkB,QAAQ,sBAAsB,CAAc,MAAY,CAAI,EAAkB,SAAS,qBAAqB,EAAkB,OAAO,CAAG,CAAE,EAAE,CAAC,EAAU,EAAS,EAAK,CAAO,CAAC,EAAE,IAAM,MAAgB,CAA0B,EAAtB,GAAU,KAAK,CAAC,MAA0B,CAAC,EAAY,CAAC,EAAE,EAAa,EAAI,CAAE,MAA6B,EAAa,CAAC,CAAS,CAAC,CAAG,EAAQ,MAAgB,CAAC,OAAO,EAAP,CAAkB,IAAI,gBAAgB,MAAM,WAAW,IAAI,EAAS,QAAQ,IAAI,gBAAgB,MAAM,eAAe,IAAI,EAAS,IAAI,IAAI,gBAAgB,MAAM,aAAa,IAAI,EAAS,MAAM,IAAI,gBAAgB,MAAM,SAAS,IAAI,EAAS,UAAU,QAAQ,MAAM,WAAW,IAAI,EAAS,OAAQ,CAAC,EAAE,OAAoB,EAAK,MAAM,CAAC,MAAM,CAAC,GAAG,EAAM,SAAS,WAAW,MAAM,OAAO,OAAO,OAAO,kBAAgB,eAAa,SAAS,SAAS,OAAO,SAAS,EAAE,QAAQ,EAAY,SAAsB,EAAK,EAAO,IAAI,CAAC,MAAM,CAAC,SAAS,WAAW,IAAI,EAAE,KAAK,EAAE,MAAM,OAAO,OAAO,OAAO,gBAAgB,EAAU,SAAS,EAAY,EAAE,QAAQ,EAAQ,QAAQ,MAAM,CAAC,CAAC,CAAC,CAAC,CAAE,iBAT3xD,IAA6D,IAAoD,IAAkC,EASyoD,EAAoB,EAAU,CAAC,QAAQ,CAAC,KAAK,EAAY,QAAQ,MAAM,UAAU,aAAa,GAAK,aAAa,KAAK,cAAc,KAAK,EAAE,SAAS,CAAC,KAAK,EAAY,OAAO,MAAM,WAAW,aAAa,EAAE,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,KAAK,GAAG,EAAE,UAAU,CAAC,KAAK,EAAY,MAAM,MAAM,aAAa,aAAa,SAAS,EAAE,gBAAgB,CAAC,KAAK,EAAY,MAAM,MAAM,aAAa,aAAa,SAAS,EAAE,UAAU,CAAC,KAAK,EAAY,KAAK,MAAM,YAAY,QAAQ,CAAC,gBAAgB,gBAAgB,gBAAgB,eAAe,EAAE,aAAa,CAAC,gBAAgB,gBAAgB,gBAAgB,eAAe,EAAE,aAAa,eAAe,EAAE,UAAU,CAAC,KAAK,EAAY,QAAQ,MAAM,aAAa,aAAa,GAAK,aAAa,KAAK,cAAc,KAAK,EAAE,KAAK,CAAC,KAAK,EAAY,QAAQ,MAAM,OAAO,aAAa,GAAM,aAAa,KAAK,cAAc,KAAK,EAAE,aAAa,CAAC,KAAK,EAAY,OAAO,MAAM,SAAS,aAAa,EAAE,IAAI,EAAE,IAAI,IAAI,KAAK,EAAE,KAAK,IAAI,CAAC,CAAC"}