{"version":3,"file":"Clock.DNGL-Rg-.mjs","names":["useState","moment"],"sources":["https:/framerusercontent.com/modules/gnqMWS0lpcjZA5OJHFAg/TNOi8RETtjAWMPdw77DC/Clock.js"],"sourcesContent":["// ArabicReverseClock.tsx\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{addPropertyControls,ControlType}from\"framer\";import{useEffect,useState}from\"react\";import{motion,useMotionValue,animate,useTransform}from\"framer-motion\";import moment from\"moment-timezone\";const timezones=moment.tz.names();const arabicDigits=[\"١٢\",\"١١\",\"١٠\",\"٩\",\"٨\",\"٧\",\"٦\",\"٥\",\"٤\",\"٣\",\"٢\",\"١\"];function polar(cx,cy,r,angleDeg){const rad=(angleDeg-90)*Math.PI/180;return{x:cx+r*Math.cos(rad),y:cy+r*Math.sin(rad)};}function arcPath(centerDeg,length,rOuter,thickness,cx,cy){const start=centerDeg-length/2;const end=centerDeg+length/2;const rInner=rOuter-thickness;const p1=polar(cx,cy,rOuter,start);const p2=polar(cx,cy,rOuter,end);const p3=polar(cx,cy,rInner,end);const p4=polar(cx,cy,rInner,start);const largeArc=length>180?1:0;return`M ${p1.x} ${p1.y} A ${rOuter} ${rOuter} 0 ${largeArc} 1 ${p2.x} ${p2.y} L ${p3.x} ${p3.y} A ${rInner} ${rInner} 0 ${largeArc} 0 ${p4.x} ${p4.y} Z`;}export function ArabicReverseClock(props){const{location,cityLabel,gmtLabel,size,numeralOffset,hourThickness,minuteThickness,hourLength,minuteLength,strokeColor,backgroundColor,arcColor,numeralColor}=props;const[time,setTime]=useState(moment().tz(location));const hourAngle=useMotionValue(0);const minuteAngle=useMotionValue(0);useEffect(()=>{const update=()=>{const now=moment().tz(location);const hr=now.hour()%12+now.minute()/60+now.second()/3600;const mn=now.minute()+now.second()/60;animate(hourAngle,hr*30,{type:\"spring\",stiffness:100,damping:20});animate(minuteAngle,mn*6,{type:\"spring\",stiffness:100,damping:20});setTime(now);};update();const id=setInterval(update,1e3);return()=>clearInterval(id);},[location]);const cx=size/2,cy=size/2,rOuter=cx*.94;const numeralRadius=rOuter-numeralOffset;const hourSlice=useTransform(hourAngle,deg=>arcPath(deg,hourLength,rOuter,hourThickness,cx,cy));const minuteSlice=useTransform(minuteAngle,deg=>arcPath(deg,minuteLength,rOuter,minuteThickness,cx,cy));return /*#__PURE__*/_jsxs(\"svg\",{viewBox:`0 0 ${size} ${size}`,width:\"100%\",height:\"100%\",style:{background:backgroundColor},children:[arabicDigits.map((digit,i)=>/*#__PURE__*/_jsx(\"text\",{...polar(cx,cy,numeralRadius,-i*30),textAnchor:\"middle\",dominantBaseline:\"middle\",fill:numeralColor,fontSize:16,fontFamily:\"Arial, sans-serif\",children:digit},i)),/*#__PURE__*/_jsxs(\"g\",{style:{mixBlendMode:\"difference\"},children:[/*#__PURE__*/_jsx(motion.path,{d:hourSlice,fill:arcColor}),/*#__PURE__*/_jsx(motion.path,{d:minuteSlice,fill:arcColor})]}),/*#__PURE__*/_jsx(\"circle\",{cx:cx,cy:cy,r:rOuter,fill:\"none\",stroke:strokeColor,strokeWidth:2}),/*#__PURE__*/_jsx(\"text\",{x:cx,y:cy-20,textAnchor:\"middle\",dominantBaseline:\"middle\",fill:numeralColor,fontSize:16,fontFamily:\"GT Pressura LC Mono Regular\",children:cityLabel}),/*#__PURE__*/_jsx(\"text\",{x:cx,y:cy,textAnchor:\"middle\",dominantBaseline:\"middle\",fill:numeralColor,fontSize:16,fontFamily:\"GT Pressura LC Mono Regular\",children:time.format(\"HH:mm:ss\")}),/*#__PURE__*/_jsx(\"text\",{x:cx,y:cy+20,textAnchor:\"middle\",dominantBaseline:\"middle\",fill:numeralColor,fontSize:16,fontFamily:\"GT Pressura LC Mono Regular\",children:gmtLabel})]});}addPropertyControls(ArabicReverseClock,{size:{type:ControlType.Number,title:\"Size\",defaultValue:300,min:100,max:800},numeralOffset:{type:ControlType.Number,title:\"Numeral Offset\",defaultValue:20,min:0,max:100},hourThickness:{type:ControlType.Number,title:\"Hour Thickness\",defaultValue:20,min:1,max:80},minuteThickness:{type:ControlType.Number,title:\"Minute Thickness\",defaultValue:12,min:1,max:80},hourLength:{type:ControlType.Number,title:\"Hour Arc\",defaultValue:20,min:1,max:180},minuteLength:{type:ControlType.Number,title:\"Minute Arc\",defaultValue:10,min:1,max:180},location:{type:ControlType.Enum,title:\"Timezone\",options:timezones,optionTitles:timezones,defaultValue:\"UTC\"},cityLabel:{type:ControlType.String,title:\"City\",defaultValue:\"DUBAI\"},gmtLabel:{type:ControlType.String,title:\"GMT Label\",defaultValue:\"GMT+4\"},strokeColor:{type:ControlType.Color,title:\"Border Color\",defaultValue:\"#ffffff\"},backgroundColor:{type:ControlType.Color,title:\"Background\",defaultValue:\"#000000\"},arcColor:{type:ControlType.Color,title:\"Arc Color\",defaultValue:\"#ffffff\"},numeralColor:{type:ControlType.Color,title:\"Numeral Color\",defaultValue:\"#ffffff\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"ArabicReverseClock\":{\"type\":\"reactComponent\",\"name\":\"ArabicReverseClock\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./Clock.map"],"mappings":"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"}