{
  "version": 3,
  "sources": ["ssg: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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",
  "names": ["ImageComparisonSlider", "props", "leftImage", "rightImage", "icon", "dividerColor", "dividerWidth", "boxSize", "boxRadius", "iconSize", "background", "borderRadius", "style", "isStatic", "useIsStaticRenderer", "containerRef", "pe", "position", "setPosition", "ye", "dragging", "setDragging", "handleDown", "e", "Z", "handleUp", "te", "handleMove", "rect", "x", "rel", "ue", "move", "up", "window", "dividerX", "boxX", "u", "p", "addPropertyControls", "ControlType"]
}