{"version":3,"file":"Countdown_IMC.DObazr-R.mjs","names":["React.useState","React.useRef","React.Fragment"],"sources":["https:/framerusercontent.com/modules/blzqcL9SZ0PSQ8IdF9oK/M1gvQuejEMQPidETYGiZ/Countdown_IMC.js"],"sourcesContent":["// Countdown timer component with customizable colors and date target\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import*as React from\"react\";import{addPropertyControls,ControlType}from\"framer\";/**\n * @framerSupportedLayoutWidth any\n * @framerSupportedLayoutHeight any\n */export default function Countdown(props){const{targetDate,boxColor,strokeColor,textColor,daysColor,colonColor,font,scale:userScale}=props;function calculateTimeLeft(){const target=new Date(targetDate);const now=new Date;if(isNaN(target.getTime())){return{days:0,hours:0,minutes:0,seconds:0};}const difference=+target-+now;if(difference>0){return{days:Math.floor(difference/(1e3*60*60*24)),hours:Math.floor(difference/(1e3*60*60)%24),minutes:Math.floor(difference/1e3/60%60),seconds:Math.floor(difference/1e3%60)};}return{days:0,hours:0,minutes:0,seconds:0};}const[timeLeft,setTimeLeft]=React.useState(()=>calculateTimeLeft());const[scale,setScale]=React.useState(1);const containerRef=React.useRef(null);const contentRef=React.useRef(null);React.useEffect(()=>{const timer=setInterval(()=>{React.startTransition(()=>{setTimeLeft(calculateTimeLeft());});},1e3);return()=>clearInterval(timer);},[targetDate]);React.useEffect(()=>{const updateScale=()=>{if(containerRef.current&&contentRef.current){const containerWidth=containerRef.current.offsetWidth;const contentWidth=contentRef.current.offsetWidth;if(contentWidth>0){const newScale=Math.min(1,containerWidth/contentWidth);React.startTransition(()=>{setScale(newScale);});}}};updateScale();const resizeObserver=new ResizeObserver(updateScale);if(containerRef.current){resizeObserver.observe(containerRef.current);}return()=>{resizeObserver.disconnect();};},[]);const formatTime=time=>time<10?`0${time}`:time;const outerContainerStyle={width:\"100%\",height:\"100%\",display:\"flex\",justifyContent:\"center\",alignItems:\"center\",overflow:\"hidden\"};const containerStyle={display:\"flex\",alignItems:\"center\",width:\"max-content\",transform:`scale(${scale*userScale})`,transformOrigin:\"center center\"};const boxStyle={display:\"flex\",justifyContent:\"center\",alignItems:\"center\",width:\"64px\",height:\"64px\",backgroundColor:boxColor,border:`1.5px solid ${strokeColor}`,borderRadius:\"8px\",boxSizing:\"border-box\"};const numberBaseStyle={...font};const colonStyle={...font,margin:\"0 6px\",display:\"flex\",alignItems:\"center\",height:\"64px\",color:colonColor};const timeUnits=[timeLeft.days,timeLeft.hours,timeLeft.minutes,timeLeft.seconds];return /*#__PURE__*/_jsx(\"div\",{ref:containerRef,style:outerContainerStyle,children:/*#__PURE__*/_jsx(\"div\",{ref:contentRef,style:containerStyle,children:timeUnits.map((value,index)=>{const customColor=index===0?daysColor:textColor;return /*#__PURE__*/_jsxs(React.Fragment,{children:[/*#__PURE__*/_jsx(\"div\",{style:boxStyle,children:/*#__PURE__*/_jsx(\"span\",{style:{...numberBaseStyle,color:customColor},children:formatTime(value||0)})}),index