{"version":3,"file":"ImageComparisonSlider.B6ch3gzB.mjs","names":["useRef","useState","useCallback"],"sources":["https:/framerusercontent.com/modules/DD8LLmL1p2lr05GGjfJB/OKHPknRCU5l1h3P05NYb/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,ariaLabel=\"Image comparison slider\",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-label\":ariaLabel,\"aria-labelledby\":\"slider-label\",\"aria-describedby\":\"slider-description\",\"aria-valuenow\":Math.round(position),\"aria-valuemin\":0,\"aria-valuemax\":100,\"aria-valuetext\":`${Math.round(position)}% comparison position`,\"aria-orientation\":\"horizontal\",tabIndex:0}),/*#__PURE__*/_jsx(\"input\",{type:\"range\",min:0,max:100,value:Math.round(position),onChange:()=>{},\"aria-label\":ariaLabel,style:{position:\"absolute\",left:\"-9999px\",width:\"1px\",height:\"1px\",opacity:0,pointerEvents:\"none\"}}),/*#__PURE__*/_jsx(\"div\",{id:\"slider-label\",style:{position:\"absolute\",left:\"-9999px\"},children:ariaLabel}),/*#__PURE__*/_jsxs(\"div\",{id:\"slider-description\",style:{position:\"absolute\",left:\"-9999px\"},children:[\"Drag to compare images side by side. Current position is\",\" \",Math.round(position),\" percent.\"]}),/*#__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\"},ariaLabel:{type:ControlType.String,title:\"ARIA Label\",defaultValue:\"Image comparison slider\",placeholder:\"Describe what the slider controls\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ImageComparisonSlider\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerSupportedLayoutHeight\":\"any-prefer-fixed\",\"framerIntrinsicWidth\":\"384\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerIntrinsicHeight\":\"423\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ImageComparisonSlider.map"],"mappings":"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"}