{
  "version": 3,
  "sources": ["ssg:https://framerusercontent.com/modules/QxoYb5f6DAQe5mYDbWRk/B9dSbP7GdyzyZCUfZOjM/Befor_After_Slider.js"],
  "sourcesContent": ["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import*as React from\"react\";import{Frame,useMotionValue,useTransform,motion,animate,addPropertyControls,ControlType}from\"framer\";/**\n * BEFORE AFTER SLIDER\n * Fully responsive with default size\n *\n * @framerDisableUnlink\n *\n * @framerIntrinsicWidth 600\n * @framerIntrinsicHeight 500\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight any-prefer-fixed\n */function BeforeAfterSlider(props){return /*#__PURE__*/_jsx(Frame,{width:\"100%\",height:\"100%\",background:\"transparent\",style:{position:\"relative\",overflow:\"hidden\"},children:/*#__PURE__*/_jsx(SliderContent,{...props})});}function SliderContent({beforeImage=\"\",afterImage=\"\",initialSliderPosition=.11,isVertical=false,borderRadius=12,showLabels=true,labelBackgroundColor=\"rgba(0, 0, 0, 0.6)\",labelTextColor=\"#FFFFFF\",labelBlur=5,beforeLabelText=\"BEFORE\",afterLabelText=\"AFTER\"}){const containerRef=React.useRef(null);const position=useMotionValue(0);const[fontSize,setFontSize]=React.useState(\"16px\")// State for font size\n;const[logoSize,setLogoSize]=React.useState(\"120px\")// State for logo size\n;React.useEffect(()=>{const updateSizes=entries=>{for(let entry of entries){if(entry.target){const{width,height}=entry.contentRect;const baseSize=Math.min(width,height)// Use the smaller dimension\n;// Update font size (clamped between 14px and 18px)\nconst calculatedFontSize=baseSize*.04// 4% of the smaller dimension\n;setFontSize(`${Math.min(Math.max(calculatedFontSize,14),18)}px`);// Update logo size (clamped between 32px and 120px)\nconst calculatedLogoSize=baseSize*.2// 20% of the smaller dimension\n;setLogoSize(`${Math.min(Math.max(calculatedLogoSize,32),120)}px`);}}};const observer=new ResizeObserver(updateSizes);if(containerRef.current){observer.observe(containerRef.current);}return()=>{if(containerRef.current){observer.unobserve(containerRef.current);}};},[]);React.useEffect(()=>{if(containerRef.current){const containerSize=isVertical?containerRef.current.offsetHeight:containerRef.current.offsetWidth;position.set(containerSize*initialSliderPosition);}},[initialSliderPosition,isVertical]);const clipPath=useTransform(position,val=>isVertical?`inset(${val}px 0 0 0)`:`inset(0 0 0 ${val}px)`);const beforeTagOpacity=useTransform(position,val=>{if(!containerRef.current||!showLabels)return 0;const size=isVertical?containerRef.current.offsetHeight:containerRef.current.offsetWidth;return val/size>.1?1:0;});const afterTagOpacity=useTransform(position,val=>{if(!containerRef.current||!showLabels)return 0;const size=isVertical?containerRef.current.offsetHeight:containerRef.current.offsetWidth;return val/size<.9?1:0;});const handleContainerClick=event=>{if(containerRef.current){const bounds=containerRef.current.getBoundingClientRect();const clickPosition=isVertical?event.clientY-bounds.top:event.clientX-bounds.left;animate(position,clickPosition,{type:\"spring\",stiffness:200,damping:25});}};if(!beforeImage&&!afterImage){return /*#__PURE__*/_jsxs(\"div\",{ref:containerRef,style:{width:\"100%\",height:\"100%\",display:\"flex\",flexDirection:\"column\",alignItems:\"center\",justifyContent:\"center\",backgroundColor:\"#F0F6FF\",position:\"relative\",overflow:\"hidden\",borderRadius:`${borderRadius}px`},children:[/*#__PURE__*/_jsx(\"img\",{src:\"https://raw.githubusercontent.com/Muhammadrashed29/mrframerlogo/refs/heads/main/MRFRAMER.svg\",alt:\"MRFramer Logo\",style:{width:logoSize,height:\"auto\",marginBottom:\"16px\"}}),/*#__PURE__*/_jsx(\"p\",{style:{color:\"#000000\",fontSize:fontSize,fontWeight:\"500\",margin:\"0\",textAlign:\"center\"},children:\"Upload 2 Images to Continue\"})]});}if(!beforeImage||!afterImage){const image=beforeImage||afterImage;return /*#__PURE__*/_jsx(\"div\",{ref:containerRef,style:{width:\"100%\",height:\"100%\",position:\"relative\",overflow:\"hidden\",borderRadius:`${borderRadius}px`},children:/*#__PURE__*/_jsx(\"div\",{style:{backgroundImage:`url(${image})`,backgroundSize:\"cover\",backgroundPosition:\"center\",position:\"absolute\",width:\"100%\",height:\"100%\"}})});}return /*#__PURE__*/_jsxs(\"div\",{ref:containerRef,style:{width:\"100%\",height:\"100%\",position:\"relative\",overflow:\"hidden\",borderRadius:`${borderRadius}px`},onClick:handleContainerClick,children:[/*#__PURE__*/_jsx(\"div\",{style:{backgroundImage:`url(${beforeImage})`,backgroundSize:\"cover\",backgroundPosition:\"center\",position:\"absolute\",width:\"100%\",height:\"100%\"}}),/*#__PURE__*/_jsx(motion.div,{style:{backgroundImage:`url(${afterImage})`,backgroundSize:\"cover\",backgroundPosition:\"center\",position:\"absolute\",width:\"100%\",height:\"100%\",clipPath:clipPath}}),showLabels&&/*#__PURE__*/_jsx(motion.div,{style:{position:\"absolute\",top:isVertical?\"20px\":\"unset\",bottom:isVertical?\"unset\":\"20px\",left:\"20px\",background:labelBackgroundColor,color:labelTextColor,padding:\"5px 10px\",borderRadius:\"5px\",fontSize:\"12px\",fontWeight:\"bold\",textTransform:\"uppercase\",opacity:beforeTagOpacity,transition:\"opacity 0.3s ease\",backdropFilter:`blur(${labelBlur}px)`,WebkitBackdropFilter:`blur(${labelBlur}px)`},children:afterLabelText}),showLabels&&/*#__PURE__*/_jsx(motion.div,{style:{position:\"absolute\",bottom:\"20px\",right:\"20px\",background:labelBackgroundColor,color:labelTextColor,padding:\"5px 10px\",borderRadius:\"5px\",fontSize:\"12px\",fontWeight:\"bold\",textTransform:\"uppercase\",opacity:afterTagOpacity,transition:\"opacity 0.3s ease\",backdropFilter:`blur(${labelBlur}px)`,WebkitBackdropFilter:`blur(${labelBlur}px)`},children:beforeLabelText}),/*#__PURE__*/_jsx(SliderHandle,{position:position,containerRef:containerRef,isVertical:isVertical})]});}function SliderHandle({position,containerRef,isVertical}){const handleSize=40;const lineThickness=4;return /*#__PURE__*/_jsx(motion.div,{drag:isVertical?\"y\":\"x\",dragConstraints:containerRef,dragElastic:0,style:{[isVertical?\"y\":\"x\"]:position,position:\"absolute\",top:isVertical?`${-lineThickness/2}px`:\"0\",bottom:isVertical?`${-lineThickness/2}px`:\"0\",left:isVertical?\"0\":`${-lineThickness/2}px`,right:isVertical?\"0\":`${-lineThickness/2}px`,width:isVertical?\"100%\":`${lineThickness}px`,height:isVertical?`${lineThickness}px`:\"100%\",background:\"rgba(255, 255, 255, 0.4)\",cursor:isVertical?\"ns-resize\":\"ew-resize\"},transition:{type:\"spring\",stiffness:200,damping:25},children:/*#__PURE__*/_jsx(\"div\",{style:{width:`${handleSize}px`,height:`${handleSize}px`,borderRadius:\"50%\",background:\"rgba(0, 0, 0, 0.6)\",backdropFilter:\"blur(10px)\",WebkitBackdropFilter:\"blur(10px)\",position:\"absolute\",top:\"50%\",left:\"50%\",transform:`translate(-50%, -50%) rotate(${isVertical?\"0deg\":\"90deg\"})`,display:\"flex\",alignItems:\"center\",justifyContent:\"center\"},children:/*#__PURE__*/_jsxs(\"div\",{style:{display:\"flex\",flexDirection:\"column\",justifyContent:\"space-between\",alignItems:\"center\",height:\"60%\"},children:[/*#__PURE__*/_jsx(\"div\",{style:{width:0,height:0,borderLeft:\"6px solid transparent\",borderRight:\"6px solid transparent\",borderBottom:\"8px solid #FFF\"}}),/*#__PURE__*/_jsx(\"div\",{style:{width:0,height:0,borderLeft:\"6px solid transparent\",borderRight:\"6px solid transparent\",borderTop:\"8px solid #FFF\"}})]})})});}// Add property controls for Framer UI customization\naddPropertyControls(BeforeAfterSlider,{beforeImage:{type:ControlType.Image,title:\"Image 1\"},afterImage:{type:ControlType.Image,title:\"Image 2\"},initialSliderPosition:{type:ControlType.Number,title:\"Initial Position\",defaultValue:.11,min:0,max:1,step:.01},isVertical:{type:ControlType.Boolean,title:\"Vertical Slider\",defaultValue:false},borderRadius:{type:ControlType.Number,title:\"Radius\",defaultValue:0,min:0},showLabels:{type:ControlType.Boolean,title:\"Show Labels\",defaultValue:true,description:\"Use it to show or hide labels\"},labelBackgroundColor:{type:ControlType.Color,title:\"Label Background\",defaultValue:\"rgba(0, 0, 0, 0.6)\"},labelTextColor:{type:ControlType.Color,title:\"Text Color\",defaultValue:\"#FFFFFF\"},labelBlur:{type:ControlType.Number,title:\"Label Blur\",defaultValue:5,min:0,max:10,description:\"[Mr. Framer](https://mrframer.com), Get Free High Quality Framer Resources.\"},beforeLabelText:{type:ControlType.String,title:\"Right Label\",defaultValue:\"BEFORE\"},afterLabelText:{type:ControlType.String,title:\"Left Label\",defaultValue:\"AFTER\"}});// Set display name for Framer UI\nBeforeAfterSlider.displayName=\"Before After Slider\";export default BeforeAfterSlider;\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"BeforeAfterSlider\",\"slots\":[],\"annotations\":{\"framerIntrinsicHeight\":\"500\",\"framerContractVersion\":\"1\",\"framerDisableUnlink\":\"*\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerSupportedLayoutHeight\":\"any-prefer-fixed\",\"framerIntrinsicWidth\":\"600\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./Befor_After_Slider.map"],
  "mappings": "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",
  "names": ["BeforeAfterSlider", "props", "p", "Frame", "SliderContent", "beforeImage", "afterImage", "initialSliderPosition", "isVertical", "borderRadius", "showLabels", "labelBackgroundColor", "labelTextColor", "labelBlur", "beforeLabelText", "afterLabelText", "containerRef", "pe", "position", "useMotionValue", "fontSize", "setFontSize", "ye", "logoSize", "setLogoSize", "ue", "updateSizes", "entries", "entry", "width", "height", "baseSize", "calculatedFontSize", "calculatedLogoSize", "observer", "containerSize", "clipPath", "useTransform", "val", "beforeTagOpacity", "size", "afterTagOpacity", "handleContainerClick", "event", "bounds", "clickPosition", "animate2", "u", "image", "motion", "SliderHandle", "addPropertyControls", "ControlType", "Befor_After_Slider_default"]
}