{"version":3,"file":"BeforeAfterSlider.3wsQL9d4.mjs","names":["useState","useRef","useCallback","_Fragment"],"sources":["https:/framerusercontent.com/modules/HmXu6Ki6NH1kw27OQA8b/m5jzk3WMVYKu30OeDDtQ/BeforeAfterSlider.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from\"react/jsx-runtime\";import{addPropertyControls,ControlType}from\"framer\";import{useState,useRef,useCallback,useEffect}from\"react\";export default function BeforeAfterSlider({beforeImage=\"https://placehold.co/960x600/1a1a2e/666?text=BEFORE\",afterImage=\"https://placehold.co/960x600/0a2e0a/7db83a?text=AFTER\",beforeLabel=\"Before\",afterLabel=\"After\",startPosition=50,handleSize=48,borderRadius=16,aspectRatio=\"16 / 10\",showLabels=true,labelStyle=\"pill\",beforeColor=\"rgba(220, 50, 50, 0.9)\",afterColor=\"rgba(125, 184, 58, 0.9)\",style}){const[position,setPosition]=useState(startPosition);const containerRef=useRef(null);const isDragging=useRef(false);const updatePosition=useCallback(clientX=>{const container=containerRef.current;if(!container)return;const rect=container.getBoundingClientRect();let pct=(clientX-rect.left)/rect.width*100;pct=Math.max(2,Math.min(98,pct));setPosition(pct);},[]);const handlePointerDown=useCallback(e=>{isDragging.current=true;e.target.setPointerCapture(e.pointerId);updatePosition(e.clientX);},[updatePosition]);const handlePointerMove=useCallback(e=>{if(!isDragging.current)return;e.preventDefault();updatePosition(e.clientX);},[updatePosition]);const handlePointerUp=useCallback(()=>{isDragging.current=false;},[]);useEffect(()=>{setPosition(startPosition);},[startPosition]);const half=handleSize/2;return /*#__PURE__*/_jsxs(\"div\",{ref:containerRef,onPointerDown:handlePointerDown,onPointerMove:handlePointerMove,onPointerUp:handlePointerUp,style:{position:\"relative\",width:\"100%\",aspectRatio,borderRadius,overflow:\"hidden\",cursor:\"col-resize\",userSelect:\"none\",touchAction:\"none\",boxShadow:\"0 40px 80px rgba(0,0,0,0.35)\",...style},children:[/*#__PURE__*/_jsx(\"img\",{src:afterImage,alt:afterLabel,draggable:false,style:{position:\"absolute\",inset:0,width:\"100%\",height:\"100%\",objectFit:\"cover\",pointerEvents:\"none\"}}),/*#__PURE__*/_jsx(\"img\",{src:beforeImage,alt:beforeLabel,draggable:false,style:{position:\"absolute\",inset:0,width:\"100%\",height:\"100%\",objectFit:\"cover\",pointerEvents:\"none\",clipPath:`inset(0 ${100-position}% 0 0)`}}),/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",top:0,bottom:0,left:`${position}%`,width:3,background:\"#fff\",transform:\"translateX(-50%)\",pointerEvents:\"none\",zIndex:2}}),/*#__PURE__*/_jsxs(\"div\",{style:{position:\"absolute\",top:\"50%\",left:`${position}%`,transform:\"translate(-50%, -50%)\",width:handleSize,height:handleSize,borderRadius:\"50%\",background:\"#fff\",boxShadow:\"0 4px 20px rgba(0,0,0,0.3)\",display:\"flex\",alignItems:\"center\",justifyContent:\"center\",gap:5,pointerEvents:\"none\",zIndex:3},children:[/*#__PURE__*/_jsx(\"svg\",{width:\"10\",height:\"14\",viewBox:\"0 0 10 14\",fill:\"none\",children:/*#__PURE__*/_jsx(\"path\",{d:\"M8 1L2 7L8 13\",stroke:\"rgb(49,49,101)\",strokeWidth:\"2.5\",strokeLinecap:\"round\",strokeLinejoin:\"round\"})}),/*#__PURE__*/_jsx(\"svg\",{width:\"10\",height:\"14\",viewBox:\"0 0 10 14\",fill:\"none\",children:/*#__PURE__*/_jsx(\"path\",{d:\"M2 1L8 7L2 13\",stroke:\"rgb(49,49,101)\",strokeWidth:\"2.5\",strokeLinecap:\"round\",strokeLinejoin:\"round\"})})]}),showLabels&&/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(\"span\",{style:{position:\"absolute\",bottom:20,left:20,zIndex:4,padding:labelStyle===\"pill\"?\"8px 18px\":\"4px 10px\",borderRadius:100,fontSize:12,fontWeight:700,fontFamily:\"Inter, system-ui, sans-serif\",letterSpacing:\"0.06em\",textTransform:\"uppercase\",color:\"#fff\",background:beforeColor,pointerEvents:\"none\"},children:beforeLabel}),/*#__PURE__*/_jsx(\"span\",{style:{position:\"absolute\",bottom:20,right:20,zIndex:4,padding:labelStyle===\"pill\"?\"8px 18px\":\"4px 10px\",borderRadius:100,fontSize:12,fontWeight:700,fontFamily:\"Inter, system-ui, sans-serif\",letterSpacing:\"0.06em\",textTransform:\"uppercase\",color:\"#fff\",background:afterColor,pointerEvents:\"none\"},children:afterLabel})]})]});}addPropertyControls(BeforeAfterSlider,{beforeImage:{type:ControlType.Image,title:\"Before Image\"},afterImage:{type:ControlType.Image,title:\"After Image\"},beforeLabel:{type:ControlType.String,title:\"Before Label\",defaultValue:\"Before\"},afterLabel:{type:ControlType.String,title:\"After Label\",defaultValue:\"After\"},startPosition:{type:ControlType.Number,title:\"Start Position\",defaultValue:50,min:5,max:95,step:1,unit:\"%\"},handleSize:{type:ControlType.Number,title:\"Handle Size\",defaultValue:48,min:32,max:72,step:4},borderRadius:{type:ControlType.Number,title:\"Corner Radius\",defaultValue:16,min:0,max:32,step:2},aspectRatio:{type:ControlType.Enum,title:\"Aspect Ratio\",defaultValue:\"16 / 10\",options:[\"16 / 9\",\"16 / 10\",\"4 / 3\",\"3 / 2\",\"1 / 1\"],optionTitles:[\"16:9\",\"16:10\",\"4:3\",\"3:2\",\"1:1\"]},showLabels:{type:ControlType.Boolean,title:\"Show Labels\",defaultValue:true},labelStyle:{type:ControlType.Enum,title:\"Label Style\",defaultValue:\"pill\",options:[\"pill\",\"minimal\"],optionTitles:[\"Pill\",\"Minimal\"],hidden:props=>!props.showLabels},beforeColor:{type:ControlType.Color,title:\"Before Color\",defaultValue:\"rgba(220, 50, 50, 0.9)\",hidden:props=>!props.showLabels},afterColor:{type:ControlType.Color,title:\"After Color\",defaultValue:\"rgba(125, 184, 58, 0.9)\",hidden:props=>!props.showLabels}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"BeforeAfterSlider\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./BeforeAfterSlider.map"],"mappings":"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"}