{"version":3,"file":"ImageBeforeAfterSlider.B-8Q2eWN.mjs","names":["useRef","useState","useCallback","_jsxs","__esmMin","ne","init_npm_react_18_3_1","te","window","ce","init_jsx_runtime","p","_e","de","init_ssg_sandbox_shims","useIsStaticRenderer","addPropertyControls","init_framer_BL70qLPA","ControlType","ImageBeforeAfterSlider","props","containerRef","position","setPosition","initialPosition","isDragging","setIsDragging","isStatic","updatePositionFromEvent","rect","x","newPosition","handleClick","handleDoubleClick","handleMouseDown","handleMouseMove","handleMouseUp","afterImage","beforeImage","dividerWidth","dividerColor","dividerShadow","showHandle","handleSize","handleColor","handleArrowColor","init_ImageBeforeAfterSlider"],"sources":["https:/framerusercontent.com/modules/lXpQEAavp3MQQsLQpCxL/0YmmbmLFaRgJmBgHvOkr/ImageBeforeAfterSlider.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";import{useCallback,useEffect,useRef,useState,startTransition}from\"react\";/**\n * Image Before-After Slider\n *\n * Compare two images with a draggable slider and customizable center handle.\n *\n * @framerIntrinsicWidth 500\n * @framerIntrinsicHeight 300\n *\n * @framerSupportedLayoutWidth fixed\n * @framerSupportedLayoutHeight fixed\n */export default function ImageBeforeAfterSlider(props){const{beforeImage={src:\"https://framerusercontent.com/images/GfGkADagM4KEibNcIiRUWlfrR0.jpg\",alt:\"Before image\"},afterImage={src:\"https://framerusercontent.com/images/aNsAT3jCvt4zglbWCUoFe33Q.jpg\",alt:\"After image\"},initialPosition=50,dividerColor=\"#FFFFFF\",dividerWidth=2,dividerShadow=true,showHandle=true,handleColor=\"#FFFFFF\",handleSize=40,handleArrowColor=\"#000000\"}=props;const containerRef=useRef(null);const[position,setPosition]=useState(initialPosition);const[isDragging,setIsDragging]=useState(false);const isStatic=useIsStaticRenderer();const updatePositionFromEvent=useCallback(e=>{if(!containerRef.current)return;const rect=containerRef.current.getBoundingClientRect();const x=e.clientX-rect.left;const newPosition=Math.max(0,Math.min(100,x/rect.width*100));startTransition(()=>setPosition(newPosition));},[]);const handleClick=useCallback(e=>{if(!isDragging){updatePositionFromEvent(e);}},[isDragging,updatePositionFromEvent]);const handleDoubleClick=()=>{startTransition(()=>setPosition(initialPosition));};const handleMouseDown=e=>{e.preventDefault();startTransition(()=>setIsDragging(true));};const handleMouseMove=useCallback(e=>{if(!isDragging||!containerRef.current)return;updatePositionFromEvent(e);},[isDragging,updatePositionFromEvent]);const handleMouseUp=useCallback(()=>{startTransition(()=>setIsDragging(false));},[]);useEffect(()=>{if(isStatic)return;if(isDragging){window.addEventListener(\"mousemove\",handleMouseMove);window.addEventListener(\"mouseup\",handleMouseUp);}return()=>{window.removeEventListener(\"mousemove\",handleMouseMove);window.removeEventListener(\"mouseup\",handleMouseUp);};},[isDragging,handleMouseMove,handleMouseUp,isStatic]);const sliderContent=/*#__PURE__*/_jsxs(\"div\",{ref:containerRef,style:{position:\"relative\",width:\"100%\",height:\"100%\",overflow:\"hidden\",cursor:isDragging?\"ew-resize\":\"pointer\",userSelect:\"none\"},onClick:isStatic?undefined:handleClick,onDoubleClick:handleDoubleClick,tabIndex:0,role:\"slider\",\"aria-valuenow\":position,\"aria-valuemin\":0,\"aria-valuemax\":100,\"aria-orientation\":\"horizontal\",children:[/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",top:0,left:0,width:\"100%\",height:\"100%\",backgroundImage:`url(${afterImage.src})`,backgroundSize:\"cover\",backgroundPosition:\"center\"},\"aria-label\":afterImage.alt,role:\"img\"}),/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",top:0,left:0,width:\"100%\",height:\"100%\",backgroundImage:`url(${beforeImage.src})`,backgroundSize:\"cover\",backgroundPosition:\"center\",clipPath:`inset(0 ${100-position}% 0 0)`},\"aria-label\":beforeImage.alt,role:\"img\"}),/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",top:0,left:`${position}%`,width:`${dividerWidth}px`,height:\"100%\",backgroundColor:dividerColor,boxShadow:dividerShadow?\"0 0 5px rgba(0, 0, 0, 0.7)\":\"none\",transform:`translateX(-${dividerWidth/2}px)`,cursor:\"ew-resize\",zIndex:2},onMouseDown:isStatic?undefined:handleMouseDown}),showHandle&&/*#__PURE__*/_jsxs(\"div\",{style:{position:\"absolute\",top:`calc(50% - ${handleSize/2}px)`,left:`${position}%`,width:`${handleSize}px`,height:`${handleSize}px`,borderRadius:\"50%\",backgroundColor:handleColor,boxShadow:\"0 0 5px rgba(0, 0, 0, 0.5)\",transform:`translateX(-${handleSize/2}px)`,cursor:\"ew-resize\",zIndex:3,display:\"flex\",justifyContent:\"center\",alignItems:\"center\"},onMouseDown:isStatic?undefined:handleMouseDown,children:[/*#__PURE__*/_jsx(\"svg\",{width:handleSize*.35,height:handleSize*.35,viewBox:\"0 0 24 24\",fill:\"none\",stroke:handleArrowColor,strokeWidth:\"2.5\",strokeLinecap:\"round\",strokeLinejoin:\"round\",style:{marginRight:-2},children:/*#__PURE__*/_jsx(\"polyline\",{points:\"15 18 9 12 15 6\"})}),/*#__PURE__*/_jsx(\"svg\",{width:handleSize*.35,height:handleSize*.35,viewBox:\"0 0 24 24\",fill:\"none\",stroke:handleArrowColor,strokeWidth:\"2.5\",strokeLinecap:\"round\",strokeLinejoin:\"round\",style:{marginLeft:-2},children:/*#__PURE__*/_jsx(\"polyline\",{points:\"9 18 15 12 9 6\"})})]})]});return sliderContent;}addPropertyControls(ImageBeforeAfterSlider,{beforeImage:{type:ControlType.ResponsiveImage,title:\"Before Image\"},afterImage:{type:ControlType.ResponsiveImage,title:\"After Image\"},initialPosition:{type:ControlType.Number,title:\"Initial Position\",defaultValue:50,min:0,max:100,step:1,unit:\"%\"},dividerColor:{type:ControlType.Color,title:\"Divider Color\",defaultValue:\"#FFFFFF\"},dividerWidth:{type:ControlType.Number,title:\"Divider Width\",defaultValue:2,min:1,max:20,step:1,unit:\"px\"},dividerShadow:{type:ControlType.Boolean,title:\"Divider Shadow\",defaultValue:true,enabledTitle:\"On\",disabledTitle:\"Off\"},showHandle:{type:ControlType.Boolean,title:\"Show Handle\",defaultValue:true,enabledTitle:\"Show\",disabledTitle:\"Hide\"},handleColor:{type:ControlType.Color,title:\"Handle Color\",defaultValue:\"#FFFFFF\",hidden:({showHandle})=>!showHandle},handleSize:{type:ControlType.Number,title:\"Handle Size\",defaultValue:40,min:20,max:80,step:1,unit:\"px\",hidden:({showHandle})=>!showHandle},handleArrowColor:{type:ControlType.Color,title:\"Arrow Color\",defaultValue:\"#000000\",hidden:({showHandle})=>!showHandle}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ImageBeforeAfterSlider\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutHeight\":\"fixed\",\"framerContractVersion\":\"1\",\"framerIntrinsicWidth\":\"500\",\"framerIntrinsicHeight\":\"300\",\"framerSupportedLayoutWidth\":\"fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ImageBeforeAfterSlider.map"],"mappings":"A,+NAUG,SAAwBmB,EAAuB,EAAM,CAAC,GAAK,CAAC,cAAY,CAAC,IAAI,sEAAsE,IAAI,cAAc,EAAE,aAAW,CAAC,IAAI,oEAAoE,IAAI,aAAa,EAAE,kBAAgB,GAAG,eAAa,UAAU,eAAa,EAAE,gBAAc,GAAK,aAAW,GAAK,cAAY,UAAU,aAAW,GAAG,mBAAiB,WAAWC,EAAYC,EAAarB,EAAO,IAAI,EAAO,CAACsB,EAASC,GAAatB,EAASuB,CAAe,EAAO,CAACC,EAAWC,GAAezB,EAAS,EAAK,EAAQ0B,EAASZ,EAAoB,EAAQa,EAAwB1B,EAAY,GAAG,CAAC,GAAG,CAACmB,EAAa,QAAQ,OAAO,IAAMQ,EAAKR,EAAa,QAAQ,sBAAsB,EAAQS,EAAE,EAAE,QAAQD,EAAK,KAAWE,EAAY,KAAK,IAAI,EAAE,KAAK,IAAI,IAAID,EAAED,EAAK,MAAM,GAAG,CAAC,EAAEtB,MAAoBgB,EAAYQ,CAAW,CAAC,CAAE,EAAE,CAAC,CAAC,EAAQC,EAAY9B,EAAY,GAAG,CAAKuB,GAAYG,EAAwB,CAAC,CAAG,EAAE,CAACH,EAAWG,CAAuB,CAAC,EAAQK,MAAsB,CAAC1B,MAAoBgB,EAAYC,CAAe,CAAC,CAAE,EAAQU,EAAgB,GAAG,CAAC,EAAE,eAAe,EAAE3B,MAAoBmB,EAAc,EAAI,CAAC,CAAE,EAAQS,EAAgBjC,EAAY,GAAG,CAAKuB,GAAaJ,EAAa,SAAeO,EAAwB,CAAC,CAAE,EAAE,CAACH,EAAWG,CAAuB,CAAC,EAAQQ,EAAclC,MAAgB,CAACK,MAAoBmB,EAAc,EAAK,CAAC,CAAE,EAAE,CAAC,CAAC,EAA0/E,OAAx/EjB,MAAc,CAAC,GAAG,GAAsI,OAAnHgB,IAAYjB,EAAO,iBAAiB,YAAY2B,CAAe,EAAE3B,EAAO,iBAAiB,UAAU4B,CAAa,OAAa,CAAC5B,EAAO,oBAAoB,YAAY2B,CAAe,EAAE3B,EAAO,oBAAoB,UAAU4B,CAAa,CAAE,CAAE,EAAE,CAACX,EAAWU,EAAgBC,EAAcT,CAAQ,CAAC,EAAmCxB,kBAAM,MAAM,CAAC,IAAIkB,EAAa,MAAM,CAAC,SAAS,WAAW,MAAM,OAAO,OAAO,OAAO,SAAS,SAAS,OAAOI,EAAW,YAAY,UAAU,WAAW,MAAM,EAAE,QAAQE,EAAS,IAAA,GAAUK,EAAY,cAAcC,EAAkB,SAAS,EAAE,KAAK,SAAS,gBAAgBX,EAAS,gBAAgB,EAAE,gBAAgB,IAAI,mBAAmB,aAAa,SAAS,CAAc,gBAAK,MAAM,CAAC,MAAM,CAAC,SAAS,WAAW,IAAI,EAAE,KAAK,EAAE,MAAM,OAAO,OAAO,OAAO,gBAAgB,OAAOe,EAAW,IAAI,GAAG,eAAe,QAAQ,mBAAmB,QAAQ,EAAE,aAAaA,EAAW,IAAI,KAAK,KAAK,CAAC,EAAe,gBAAK,MAAM,CAAC,MAAM,CAAC,SAAS,WAAW,IAAI,EAAE,KAAK,EAAE,MAAM,OAAO,OAAO,OAAO,gBAAgB,OAAOC,EAAY,IAAI,GAAG,eAAe,QAAQ,mBAAmB,SAAS,SAAS,WAAW,IAAIhB,EAAS,OAAO,EAAE,aAAagB,EAAY,IAAI,KAAK,KAAK,CAAC,EAAe,gBAAK,MAAM,CAAC,MAAM,CAAC,SAAS,WAAW,IAAI,EAAE,KAAK,GAAGhB,EAAS,GAAG,MAAM,GAAGiB,EAAa,IAAI,OAAO,OAAO,gBAAgBC,EAAa,UAAUC,EAAc,6BAA6B,OAAO,UAAU,eAAeF,EAAa,EAAE,KAAK,OAAO,YAAY,OAAO,CAAC,EAAE,YAAYZ,EAAS,IAAA,GAAUO,CAAe,CAAC,EAAEQ,GAAyB,gBAAM,MAAM,CAAC,MAAM,CAAC,SAAS,WAAW,IAAI,cAAcC,EAAW,EAAE,KAAK,KAAK,GAAGrB,EAAS,GAAG,MAAM,GAAGqB,EAAW,IAAI,OAAO,GAAGA,EAAW,IAAI,aAAa,MAAM,gBAAgBC,EAAY,UAAU,6BAA6B,UAAU,eAAeD,EAAW,EAAE,KAAK,OAAO,YAAY,OAAO,EAAE,QAAQ,OAAO,eAAe,SAAS,WAAW,QAAQ,EAAE,YAAYhB,EAAS,IAAA,GAAUO,EAAgB,SAAS,CAAc,gBAAK,MAAM,CAAC,MAAMS,EAAW,IAAI,OAAOA,EAAW,IAAI,QAAQ,YAAY,KAAK,OAAO,OAAOE,EAAiB,YAAY,MAAM,cAAc,QAAQ,eAAe,QAAQ,MAAM,CAAC,YAAY,EAAE,EAAE,SAAsB,gBAAK,WAAW,CAAC,OAAO,iBAAiB,CAAC,CAAC,CAAC,EAAe,gBAAK,MAAM,CAAC,MAAMF,EAAW,IAAI,OAAOA,EAAW,IAAI,QAAQ,YAAY,KAAK,OAAO,OAAOE,EAAiB,YAAY,MAAM,cAAc,QAAQ,eAAe,QAAQ,MAAM,CAAC,WAAW,EAAE,EAAE,SAAsB,gBAAK,WAAW,CAAC,OAAO,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAsB,CAAE,C,8CAAC7B,EAAoBG,EAAuB,CAAC,YAAY,CAAC,KAAKD,EAAY,gBAAgB,MAAM,cAAc,EAAE,WAAW,CAAC,KAAKA,EAAY,gBAAgB,MAAM,aAAa,EAAE,gBAAgB,CAAC,KAAKA,EAAY,OAAO,MAAM,mBAAmB,aAAa,GAAG,IAAI,EAAE,IAAI,IAAI,KAAK,EAAE,KAAK,GAAG,EAAE,aAAa,CAAC,KAAKA,EAAY,MAAM,MAAM,gBAAgB,aAAa,SAAS,EAAE,aAAa,CAAC,KAAKA,EAAY,OAAO,MAAM,gBAAgB,aAAa,EAAE,IAAI,EAAE,IAAI,GAAG,KAAK,EAAE,KAAK,IAAI,EAAE,cAAc,CAAC,KAAKA,EAAY,QAAQ,MAAM,iBAAiB,aAAa,GAAK,aAAa,KAAK,cAAc,KAAK,EAAE,WAAW,CAAC,KAAKA,EAAY,QAAQ,MAAM,cAAc,aAAa,GAAK,aAAa,OAAO,cAAc,MAAM,EAAE,YAAY,CAAC,KAAKA,EAAY,MAAM,MAAM,eAAe,aAAa,UAAU,QAAQ,CAAC,gBAAc,CAACwB,CAAU,EAAE,WAAW,CAAC,KAAKxB,EAAY,OAAO,MAAM,cAAc,aAAa,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,EAAE,KAAK,KAAK,QAAQ,CAAC,gBAAc,CAACwB,CAAU,EAAE,iBAAiB,CAAC,KAAKxB,EAAY,MAAM,MAAM,cAAc,aAAa,UAAU,QAAQ,CAAC,gBAAc,CAACwB,CAAU,CAAC,CAAC,C"}