{"version":3,"file":"ImageCompare.DM9ch1la.mjs","names":["useRef","useState","useCallback","_Fragment"],"sources":["https:/framerusercontent.com/modules/mAQeJFnoDQLLZFJWXZA3/H4FsHX2mBINyZGGU9ZzP/ImageCompare.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from\"react/jsx-runtime\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";import{useCallback,useEffect,useRef,useState,startTransition}from\"react\";/**\n * Image Comparison Slider\n *\n * A component that allows users to compare two images by dragging a divider.\n *\n * @framerIntrinsicWidth 600\n * @framerIntrinsicHeight 400\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\"},orientation=\"horizontal\",initialPosition=50,dividerColor=\"#FFFFFF\",dividerWidth=2,dividerShadow=true,handleColor=\"#FFFFFF\",handleSize=40,handleIconColor=\"#000000\",beforeLabel=\"Before\",afterLabel=\"After\",showLabels=true,labelColor=\"#FFFFFF\",labelBackground=\"rgba(0, 0, 0, 0.5)\",labelFont={fontSize:\"12px\",fontWeight:600},borderRadius=0}=props;const isHorizontal=orientation===\"horizontal\";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();if(isHorizontal){const x=e.clientX-rect.left;const newPosition=Math.max(0,Math.min(100,x/rect.width*100));startTransition(()=>setPosition(newPosition));}else{const y=e.clientY-rect.top;const newPosition=Math.max(0,Math.min(100,y/rect.height*100));startTransition(()=>setPosition(newPosition));}},[isHorizontal]);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;const handleGlobalMouseMove=e=>handleMouseMove(e);const handleGlobalMouseUp=()=>handleMouseUp();if(isDragging){window.addEventListener(\"mousemove\",handleGlobalMouseMove);window.addEventListener(\"mouseup\",handleGlobalMouseUp);}return()=>{window.removeEventListener(\"mousemove\",handleGlobalMouseMove);window.removeEventListener(\"mouseup\",handleGlobalMouseUp);};},[isDragging,handleMouseMove,handleMouseUp,isStatic]);return /*#__PURE__*/_jsxs(\"div\",{ref:containerRef,style:{position:\"relative\",width:\"100%\",height:\"100%\",overflow:\"hidden\",cursor:isDragging?isHorizontal?\"ew-resize\":\"ns-resize\":\"pointer\",userSelect:\"none\",touchAction:\"none\",borderRadius},onClick:isStatic?undefined:handleClick,onMouseMove:isStatic?undefined:handleMouseMove,onMouseDown:isStatic?undefined:handleMouseDown,onMouseUp:isStatic?undefined:handleMouseUp,onDoubleClick:handleDoubleClick,onKeyDown:e=>{if(e.key===\" \"||e.key===\"Enter\"){handleClick(e);}},tabIndex:0,role:\"slider\",\"aria-valuenow\":position,\"aria-valuemin\":0,\"aria-valuemax\":100,\"aria-orientation\":orientation,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:isHorizontal?`inset(0 ${100-position}% 0 0)`:`inset(0 0 ${100-position}% 0)`},\"aria-label\":beforeImage.alt,role:\"img\"}),/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",top:isHorizontal?0:`${position}%`,left:isHorizontal?`${position}%`:0,width:isHorizontal?`${dividerWidth}px`:\"100%\",height:isHorizontal?\"100%\":`${dividerWidth}px`,backgroundColor:dividerColor,boxShadow:dividerShadow?\"0 0 10px rgba(0, 0, 0, 0.3)\":\"none\",transform:isHorizontal?`translateX(-${dividerWidth/2}px)`:`translateY(-${dividerWidth/2}px)`,cursor:isHorizontal?\"ew-resize\":\"ns-resize\",zIndex:2,pointerEvents:\"none\"}}),/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",top:isHorizontal?`calc(50% - ${handleSize/2}px)`:`${position}%`,left:isHorizontal?`${position}%`:`calc(50% - ${handleSize/2}px)`,width:`${handleSize}px`,height:`${handleSize}px`,borderRadius:\"50%\",backgroundColor:handleColor,boxShadow:\"0 2px 6px rgba(0, 0, 0, 0.2)\",transform:isHorizontal?`translateX(-${handleSize/2}px)`:`translateY(-${handleSize/2}px)`,cursor:isHorizontal?\"ew-resize\":\"ns-resize\",zIndex:3,display:\"flex\",justifyContent:\"center\",alignItems:\"center\"},onMouseDown:isStatic?undefined:handleMouseDown,children:/*#__PURE__*/_jsxs(\"svg\",{viewBox:\"0 0 24 24\",width:handleSize*.6,height:handleSize*.6,fill:\"none\",stroke:handleIconColor,strokeWidth:\"2.5\",strokeLinecap:\"round\",strokeLinejoin:\"round\",style:{transform:isHorizontal?\"rotate(0deg)\":\"rotate(90deg)\"},children:[/*#__PURE__*/_jsx(\"path\",{d:\"M15 18l-6-6 6-6\",transform:\"translate(-6, 0)\"}),/*#__PURE__*/_jsx(\"path\",{d:\"M9 18l6-6-6-6\",transform:\"translate(6, 0)\"})]})}),showLabels&&/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",top:16,left:16,padding:\"6px 10px\",backgroundColor:labelBackground,color:labelColor,borderRadius:6,zIndex:4,pointerEvents:\"none\",...labelFont},children:beforeLabel}),/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",top:16,right:16,padding:\"6px 10px\",backgroundColor:labelBackground,color:labelColor,borderRadius:6,zIndex:4,pointerEvents:\"none\",...labelFont},children:afterLabel})]})]});}addPropertyControls(ImageCompare,{beforeImage:{type:ControlType.ResponsiveImage,title:\"Before\"},afterImage:{type:ControlType.ResponsiveImage,title:\"After\"},orientation:{type:ControlType.Enum,title:\"Direction\",options:[\"horizontal\",\"vertical\"],optionTitles:[\"Horizontal\",\"Vertical\"],defaultValue:\"horizontal\",displaySegmentedControl:true},initialPosition:{type:ControlType.Number,title:\"Start %\",defaultValue:50,min:0,max:100,step:1,unit:\"%\"},dividerColor:{type:ControlType.Color,title:\"Line Color\",defaultValue:\"#FFFFFF\"},dividerWidth:{type:ControlType.Number,title:\"Line Width\",defaultValue:2,min:1,max:10,step:1},dividerShadow:{type:ControlType.Boolean,title:\"Shadow\",defaultValue:true},handleColor:{type:ControlType.Color,title:\"Handle Bg\",defaultValue:\"#FFFFFF\"},handleIconColor:{type:ControlType.Color,title:\"Arrow Color\",defaultValue:\"#333333\"},handleSize:{type:ControlType.Number,title:\"Handle Size\",defaultValue:40,min:24,max:80,step:4},borderRadius:{type:ControlType.Number,title:\"Radius\",defaultValue:0,min:0,max:50},showLabels:{type:ControlType.Boolean,title:\"Labels\",defaultValue:true},beforeLabel:{type:ControlType.String,title:\"Before Text\",defaultValue:\"Before\",hidden:props=>!props.showLabels},afterLabel:{type:ControlType.String,title:\"After Text\",defaultValue:\"After\",hidden:props=>!props.showLabels},labelFont:{type:ControlType.Font,title:\"Font\",controls:\"basic\",defaultValue:{fontSize:\"12px\",variant:\"Semibold\"},hidden:props=>!props.showLabels},labelColor:{type:ControlType.Color,title:\"Text Color\",defaultValue:\"#FFFFFF\",hidden:props=>!props.showLabels},labelBackground:{type:ControlType.Color,title:\"Bg Color\",defaultValue:\"rgba(0, 0, 0, 0.5)\",hidden:props=>!props.showLabels}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ImageCompare\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerIntrinsicWidth\":\"600\",\"framerIntrinsicHeight\":\"400\",\"framerSupportedLayoutWidth\":\"fixed\",\"framerSupportedLayoutHeight\":\"fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ImageCompare.map"],"mappings":"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"}