{"version":3,"file":"ImageCompare.aIjTypVL.mjs","names":["useState","useCallback"],"sources":["https:/framerusercontent.com/modules/BmVwwhqiJz3ZinVNOfjz/i0BUzpxNuPcbDjybGveX/ImageCompare.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";import{useCallback,useEffect,useState,startTransition}from\"react\";/**\n * Image Toggle\n *\n * A component that toggles between two images every 1.5 seconds or on click.\n *\n * @framerIntrinsicWidth 500\n * @framerIntrinsicHeight 300\n *\n * @framerSupportedLayoutWidth fixed\n * @framerSupportedLayoutHeight fixed\n */export default function ImageCompare(props){const{beforeImage={src:\"https://framerusercontent.com/images/GfGkADagM4KEibNcIiRUWlfrR0.jpg\",alt:\"Before image\"},afterImage={src:\"https://framerusercontent.com/images/aNsAT3jCvt4zglbWCUoFe33Q.jpg\",alt:\"After image\"},interval=1500,borderRadius=16}=props;const[showBefore,setShowBefore]=useState(true);const isStatic=useIsStaticRenderer();// Toggle image on click\nconst handleClick=useCallback(()=>{startTransition(()=>setShowBefore(prev=>!prev));},[]);// Auto-toggle every interval\nuseEffect(()=>{if(isStatic)return;const timer=setInterval(()=>{startTransition(()=>setShowBefore(prev=>!prev));},interval);return()=>clearInterval(timer);},[interval,isStatic]);return /*#__PURE__*/_jsxs(\"div\",{style:{position:\"relative\",width:\"100%\",height:\"100%\",overflow:\"hidden\",cursor:\"pointer\",userSelect:\"none\",borderRadius},onClick:handleClick,role:\"button\",\"aria-label\":\"Toggle between before and after images\",tabIndex:0,onKeyDown:e=>{if(e.key===\" \"||e.key===\"Enter\"){e.preventDefault();handleClick();}},children:[/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",top:0,left:0,width:\"100%\",height:\"100%\",backgroundImage:`url(${beforeImage.src})`,backgroundSize:\"cover\",backgroundPosition:\"center\",opacity:showBefore?1:0,transition:\"opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1)\"},\"aria-label\":beforeImage.alt,role:\"img\"}),/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",top:0,left:0,width:\"100%\",height:\"100%\",backgroundImage:`url(${afterImage.src})`,backgroundSize:\"cover\",backgroundPosition:\"center\",opacity:showBefore?0:1,transition:\"opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1)\"},\"aria-label\":afterImage.alt,role:\"img\"})]});}addPropertyControls(ImageCompare,{beforeImage:{type:ControlType.ResponsiveImage,title:\"Before Image\"},afterImage:{type:ControlType.ResponsiveImage,title:\"After Image\"},interval:{type:ControlType.Number,title:\"Interval\",defaultValue:1500,min:500,max:1e4,step:100,unit:\"ms\"},borderRadius:{type:ControlType.Number,title:\"Corner Radius\",defaultValue:16,min:0,max:100,step:1,unit:\"px\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ImageCompare\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerSupportedLayoutHeight\":\"fixed\",\"framerSupportedLayoutWidth\":\"fixed\",\"framerIntrinsicHeight\":\"300\",\"framerIntrinsicWidth\":\"500\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ImageCompare.map"],"mappings":"8MAUG,SAAwB,EAAa,EAAM,CAAC,GAAK,CAAC,cAAY,CAAC,IAAI,sEAAsE,IAAI,cAAc,EAAE,aAAW,CAAC,IAAI,oEAAoE,IAAI,aAAa,EAAE,WAAS,KAAK,eAAa,IAAI,EAAW,CAAC,EAAW,GAAeA,EAAS,EAAI,EAAQ,EAAS,EAAoB,EACxX,EAAYC,MAAgB,CAAC,MAAoB,EAAc,GAAM,CAAC,CAAI,CAAC,CAAE,EAAE,CAAC,CAAC,EAC0F,OAAjL,MAAc,CAAC,GAAG,EAAS,OAAO,IAAM,EAAM,gBAAgB,CAAC,MAAoB,EAAc,GAAM,CAAC,CAAI,CAAC,CAAE,EAAE,CAAQ,EAAE,UAAU,cAAc,CAAK,CAAE,EAAE,CAAC,EAAS,CAAQ,CAAC,EAAsB,EAAM,MAAM,CAAC,MAAM,CAAC,SAAS,WAAW,MAAM,OAAO,OAAO,OAAO,SAAS,SAAS,OAAO,UAAU,WAAW,OAAO,cAAY,EAAE,QAAQ,EAAY,KAAK,SAAS,aAAa,yCAAyC,SAAS,EAAE,UAAU,GAAG,EAAI,EAAE,MAAM,KAAK,EAAE,MAAM,WAAS,EAAE,eAAe,EAAE,EAAY,EAAG,EAAE,SAAS,CAAc,EAAK,MAAM,CAAC,MAAM,CAAC,SAAS,WAAW,IAAI,EAAE,KAAK,EAAE,MAAM,OAAO,OAAO,OAAO,gBAAgB,OAAO,EAAY,IAAI,GAAG,eAAe,QAAQ,mBAAmB,SAAS,QAAQ,KAAe,WAAW,2CAA2C,EAAE,aAAa,EAAY,IAAI,KAAK,KAAK,CAAC,EAAe,EAAK,MAAM,CAAC,MAAM,CAAC,SAAS,WAAW,IAAI,EAAE,KAAK,EAAE,MAAM,OAAO,OAAO,OAAO,gBAAgB,OAAO,EAAW,IAAI,GAAG,eAAe,QAAQ,mBAAmB,SAAS,QAAQ,IAAe,WAAW,2CAA2C,EAAE,aAAa,EAAW,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAE,iBAZxjC,IAAwE,IAAkE,EAY+6B,EAAoB,EAAa,CAAC,YAAY,CAAC,KAAK,EAAY,gBAAgB,MAAM,cAAc,EAAE,WAAW,CAAC,KAAK,EAAY,gBAAgB,MAAM,aAAa,EAAE,SAAS,CAAC,KAAK,EAAY,OAAO,MAAM,WAAW,aAAa,KAAK,IAAI,IAAI,IAAI,IAAI,KAAK,IAAI,KAAK,IAAI,EAAE,aAAa,CAAC,KAAK,EAAY,OAAO,MAAM,gBAAgB,aAAa,GAAG,IAAI,EAAE,IAAI,IAAI,KAAK,EAAE,KAAK,IAAI,CAAC,CAAC"}