{"version":3,"file":"ImageComparisonSlider.BWxN_CP3.mjs","names":[],"sources":["https:/framerusercontent.com/modules/DD8LLmL1p2lr05GGjfJB/3Y1766Ug1QF2HPtVu3Mv/ImageComparisonSlider.js"],"sourcesContent":["// Side-by-side image comparison slider with central divider and icon box\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useRef,useState,useCallback,useEffect,startTransition}from\"react\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";/**\n * Side-by-side Image Compare with Central Icon Divider\n *\n * @framerIntrinsicWidth 384\n * @framerIntrinsicHeight 423\n *\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight any-prefer-fixed\n */export default function ImageComparisonSlider(props){const{leftImage={src:\"https://framerusercontent.com/images/GfGkADagM4KEibNcIiRUWlfrR0.jpg\",alt:\"Left image\"},rightImage={src:\"https://framerusercontent.com/images/aNsAT3jCvt4zglbWCUoFe33Q.jpg\",alt:\"Right image\"},icon={src:\"https://framerusercontent.com/images/BYnxEV1zjYb9bhWh1IwBZ1ZoS60.jpg\",alt:\"Icon\"},dividerColor=\"#fff\",dividerWidth=4,boxSize=64,boxRadius=8,iconSize=40,background=\"#fff\",borderRadius=8,style}=props;const isStatic=useIsStaticRenderer();const containerRef=useRef(null);const[position,setPosition]=useState(50)// percent\n;const[dragging,setDragging]=useState(false);const handleDown=e=>{e.preventDefault();startTransition(()=>setDragging(true));};const handleUp=useCallback(()=>{startTransition(()=>setDragging(false));},[]);const handleMove=useCallback(e=>{if(!dragging||!containerRef.current)return;const rect=containerRef.current.getBoundingClientRect();let x=e.touches?e.touches[0].clientX:e.clientX;let rel=Math.max(0,Math.min(1,(x-rect.left)/rect.width));startTransition(()=>setPosition(rel*100));},[dragging]);useEffect(()=>{if(!dragging||isStatic)return;const move=e=>handleMove(e);const up=()=>handleUp();window.addEventListener(\"mousemove\",move);window.addEventListener(\"touchmove\",move);window.addEventListener(\"mouseup\",up);window.addEventListener(\"touchend\",up);return()=>{window.removeEventListener(\"mousemove\",move);window.removeEventListener(\"touchmove\",move);window.removeEventListener(\"mouseup\",up);window.removeEventListener(\"touchend\",up);};},[dragging,handleMove,handleUp,isStatic]);// Divider position in px\nconst dividerX=`calc(${position}% - ${dividerWidth/2}px)`;const boxX=`calc(${position}% - ${boxSize/2}px)`;return /*#__PURE__*/_jsxs(\"div\",{ref:containerRef,style:{...style,width:\"100%\",height:\"100%\",position:\"relative\",overflow:\"hidden\",background,borderRadius,userSelect:dragging?\"none\":undefined,touchAction:\"none\"},tabIndex:0,\"aria-label\":\"Side-by-side image comparison\",children:[/*#__PURE__*/_jsx(\"img\",{src:leftImage.src,alt:leftImage.alt,style:{position:\"absolute\",top:0,left:0,width:\"100%\",height:\"100%\",objectFit:\"cover\",objectPosition:\"left center\",clipPath:`inset(0 ${100-position}% 0 0)`,pointerEvents:\"none\"},draggable:false}),/*#__PURE__*/_jsx(\"img\",{src:rightImage.src,alt:rightImage.alt,style:{position:\"absolute\",top:0,left:0,width:\"100%\",height:\"100%\",objectFit:\"cover\",objectPosition:\"right center\",clipPath:`inset(0 0 0 ${position}%)`,pointerEvents:\"none\"},draggable:false}),/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",top:0,left:dividerX,width:dividerWidth,height:\"100%\",background:dividerColor,zIndex:2,borderRadius:dividerWidth/2,boxShadow:\"0 0 8px rgba(0,0,0,0.04)\",cursor:isStatic?undefined:\"ew-resize\",transition:dragging?\"none\":\"box-shadow 0.2s\"},onMouseDown:isStatic?undefined:handleDown,onTouchStart:isStatic?undefined:handleDown,role:\"slider\",\"aria-valuenow\":position,\"aria-valuemin\":0,\"aria-valuemax\":100,\"aria-orientation\":\"horizontal\"}),/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",top:`calc(50% - ${boxSize/2}px)`,left:boxX,width:boxSize,height:boxSize,background:\"#fff\",borderRadius:boxRadius,boxShadow:\"0 2px 8px rgba(0,0,0,0.08)\",display:\"flex\",alignItems:\"center\",justifyContent:\"center\",zIndex:3,pointerEvents:isStatic?\"none\":\"auto\"},onMouseDown:isStatic?undefined:handleDown,onTouchStart:isStatic?undefined:handleDown,children:/*#__PURE__*/_jsx(\"img\",{src:icon.src,alt:icon.alt,style:{width:iconSize,height:iconSize,objectFit:\"contain\",borderRadius:boxRadius/2,pointerEvents:\"none\",display:\"block\"},draggable:false})})]});}addPropertyControls(ImageComparisonSlider,{leftImage:{type:ControlType.ResponsiveImage,title:\"Before\"},rightImage:{type:ControlType.ResponsiveImage,title:\"After\"},icon:{type:ControlType.ResponsiveImage,title:\"Icon\"},dividerColor:{type:ControlType.Color,title:\"Divider Color\",defaultValue:\"#fff\"},dividerWidth:{type:ControlType.Number,title:\"Divider Width\",defaultValue:4,min:2,max:16,step:1,unit:\"px\"},boxSize:{type:ControlType.Number,title:\"Box Size\",defaultValue:64,min:32,max:128,step:1,unit:\"px\"},boxRadius:{type:ControlType.Number,title:\"Box Radius\",defaultValue:8,min:0,max:32,step:1,unit:\"px\"},iconSize:{type:ControlType.Number,title:\"Icon Size\",defaultValue:40,min:16,max:64,step:1,unit:\"px\"},background:{type:ControlType.Color,title:\"Background\",defaultValue:\"#fff\"},borderRadius:{type:ControlType.Number,title:\"Corner Radius\",defaultValue:8,min:0,max:32,step:1,unit:\"px\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ImageComparisonSlider\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutHeight\":\"any-prefer-fixed\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerIntrinsicWidth\":\"384\",\"framerContractVersion\":\"1\",\"framerIntrinsicHeight\":\"423\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ImageComparisonSlider.map"],"mappings":"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"}