{"version":3,"file":"AnimatedNumberCountdown.DI2flewl.mjs","names":["useRef","useState","Fragment"],"sources":["https:/framerusercontent.com/modules/F36dOswgKoUyBs5QuBgZ/lTMfDnvvOJkWZXoAHmwF/AnimatedNumberCountdown.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useEffect,useState,startTransition,useRef,Fragment}from\"react\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";import{motion,AnimatePresence}from\"framer-motion\";/**\n * Animated Countdown Timer\n * \n * @framerIntrinsicWidth 400\n * @framerIntrinsicHeight 120\n *\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight auto\n */export default function AnimatedNumberCountdown(props){const{endDate,startDate,startTime,textColor,labelColor,separatorColor,fontSize,labelSize,showDays,showHours,showMinutes,showSeconds,unitOrder,labels,clockStyle,backgroundColor,accentColor,borderRadius,showShadow}=props;const isStatic=useIsStaticRenderer();const containerRef=useRef(null);const[containerWidth,setContainerWidth]=useState(0);const[timeLeft,setTimeLeft]=useState({days:0,hours:0,minutes:0,seconds:0});useEffect(()=>{if(isStatic){// For static rendering, just show a fixed time\nstartTransition(()=>{setTimeLeft({days:30,hours:12,minutes:34,seconds:56});});return;}const calculateTimeLeft=()=>{try{// Create start date with time if provided\nconst start=startDate?new Date(startDate):new Date;// Apply start time if provided\nif(startTime&&startDate){const[startHours,startMinutes]=startTime.split(\":\").map(Number);start.setHours(startHours||0,startMinutes||0,0,0);}// Create end date\nconst end=new Date(endDate);const difference=end.getTime()-new Date().getTime();if(difference>0){const days=Math.floor(difference/(1e3*60*60*24));const hours=Math.floor(difference/(1e3*60*60)%24);const minutes=Math.floor(difference/1e3/60%60);const seconds=Math.floor(difference/1e3%60);startTransition(()=>{setTimeLeft({days,hours,minutes,seconds});});}else{startTransition(()=>{setTimeLeft({days:0,hours:0,minutes:0,seconds:0});});}}catch(error){console.error(\"Error calculating time left:\",error);// Fallback to default values on error\nstartTransition(()=>{setTimeLeft({days:0,hours:0,minutes:0,seconds:0});});}};calculateTimeLeft();const timer=setInterval(calculateTimeLeft,1e3);return()=>clearInterval(timer);},[endDate,startDate,startTime,isStatic]);useEffect(()=>{if(isStatic||typeof window===\"undefined\")return;const updateWidth=()=>{if(containerRef.current){startTransition(()=>{setContainerWidth(containerRef.current.offsetWidth);});}};updateWidth();window.addEventListener(\"resize\",updateWidth);return()=>window.removeEventListener(\"resize\",updateWidth);},[isStatic]);// Calculate responsive font sizes\nconst responsiveFontSize=containerWidth<400?Math.max(fontSize*(containerWidth/500),fontSize*.6):fontSize;const responsiveLabelSize=containerWidth<400?Math.max(labelSize*(containerWidth/500),labelSize*.7):labelSize;// Simple number animation component\nconst AnimatedNumber=({value})=>{const formattedValue=value.toString().padStart(value>=100?3:2,\"0\");const digits=formattedValue.length;const digitWidth=responsiveFontSize*.65// Increased width for better spacing\n;if(isStatic){return /*#__PURE__*/_jsx(\"div\",{style:{fontSize:responsiveFontSize,fontWeight:600,letterSpacing:\"-0.05em\",color:textColor,width:digitWidth*digits,textAlign:\"center\",minWidth:digitWidth*(value>=100?3:2)},children:formattedValue});}return /*#__PURE__*/_jsx(\"div\",{style:{height:responsiveFontSize*1.2,width:digitWidth*digits,minWidth:digitWidth*(value>=100?3:2),overflow:\"hidden\",position:\"relative\",display:\"flex\",justifyContent:\"center\"},children:/*#__PURE__*/_jsx(AnimatePresence,{initial:false,mode:\"wait\",children:/*#__PURE__*/_jsx(motion.div,{initial:{y:10,opacity:0},animate:{y:0,opacity:1},exit:{y:-10,opacity:0},transition:{duration:.2,ease:\"easeOut\"},style:{fontSize:responsiveFontSize,fontWeight:600,letterSpacing:\"-0.05em\",color:textColor,position:\"absolute\",textAlign:\"center\",lineHeight:1.2},children:formattedValue},formattedValue)})});};// Get styles based on selected clock style\nconst getClockStyles=()=>{switch(clockStyle){case\"modern\":return{container:{background:backgroundColor,borderRadius:borderRadius,padding:\"16px\",boxShadow:showShadow?\"0 10px 25px rgba(0,0,0,0.1)\":\"none\"},unit:{background:accentColor,borderRadius:borderRadius/2,padding:\"8px\"},separator:{fontSize:responsiveFontSize*.8}};case\"digital\":return{container:{background:backgroundColor,borderRadius:borderRadius,padding:\"16px\",boxShadow:showShadow?\"0 10px 25px rgba(0,0,0,0.1)\":\"none\"},unit:{background:accentColor,borderRadius:borderRadius/2,padding:\"12px 8px\",boxShadow:showShadow?\"0 4px 6px rgba(0,0,0,0.1)\":\"none\"},separator:{fontSize:responsiveFontSize*.8}};case\"minimal\":return{container:{background:\"transparent\",borderRadius:0,padding:\"8px 0\"},unit:{background:\"transparent\",borderBottom:`2px solid ${accentColor}`,borderRadius:0,padding:\"8px 4px\"},separator:{fontSize:responsiveFontSize*.7,opacity:.5}};case\"classic\":return{container:{background:backgroundColor,borderRadius:borderRadius,padding:\"16px\",border:`2px solid ${accentColor}`,boxShadow:showShadow?\"0 10px 25px rgba(0,0,0,0.1)\":\"none\"},unit:{background:\"transparent\",border:`1px solid ${accentColor}`,borderRadius:borderRadius/2,padding:\"8px\"},separator:{fontSize:responsiveFontSize*.8,color:accentColor}};default:return{container:{},unit:{},separator:{}};}};const clockStyles=getClockStyles();const TimeUnit=({value,label})=>/*#__PURE__*/_jsxs(\"div\",{style:{display:\"flex\",flexDirection:\"column\",alignItems:\"center\",minWidth:value>=100?responsiveFontSize*2.4:responsiveFontSize*1.7,justifyContent:\"flex-start\",...clockStyles.unit},children:[/*#__PURE__*/_jsx(AnimatedNumber,{value:value}),/*#__PURE__*/_jsx(\"span\",{style:{fontSize:responsiveLabelSize,color:labelColor,marginTop:4,textAlign:\"center\",width:\"100%\"},children:label})]});const Separator=()=>/*#__PURE__*/_jsx(\"div\",{style:{fontSize:responsiveFontSize,fontWeight:\"bold\",color:separatorColor,margin:\"0 4px\",display:\"flex\",alignItems:\"flex-end\",height:responsiveFontSize*1.2,lineHeight:1,padding:0,...clockStyles.separator},children:\":\"});// Determine if we should use a more compact layout for very small screens\nconst isCompact=containerWidth<300;// Define the time units to display based on user preferences\nconst timeUnits=[{key:\"days\",label:labels.days||\"Days\",value:timeLeft.days,show:showDays},{key:\"hours\",label:labels.hours||\"Hours\",value:timeLeft.hours,show:showHours},{key:\"minutes\",label:labels.minutes||\"Minutes\",value:timeLeft.minutes,show:showMinutes},{key:\"seconds\",label:labels.seconds||\"Seconds\",value:timeLeft.seconds,show:showSeconds}];// Sort the time units based on the user-defined order\nconst orderedTimeUnits=[...timeUnits].sort((a,b)=>{const orderA=unitOrder.indexOf(a.key);const orderB=unitOrder.indexOf(b.key);return orderA-orderB;});// Filter out units that shouldn't be shown\nconst visibleTimeUnits=orderedTimeUnits.filter(unit=>unit.show);return /*#__PURE__*/_jsx(\"div\",{ref:containerRef,style:{display:\"flex\",alignItems:\"flex-start\",justifyContent:\"center\",gap:isCompact?\"0.25rem\":\"0.5rem\",position:\"relative\",width:\"100%\",flexWrap:isCompact?\"wrap\":\"nowrap\",...clockStyles.container},children:visibleTimeUnits.map((unit,index)=>/*#__PURE__*/_jsxs(Fragment,{children:[/*#__PURE__*/_jsx(TimeUnit,{value:unit.value,label:unit.label}),index