{"version":3,"file":"BeforeAfterSlider.BMBSAbIA.mjs","names":["useRef","useState","useCallback","useMemo","p"],"sources":["https:/framerusercontent.com/modules/My82dHXZmwiCfvSvp7OF/kVw9Avpu7v0vs3xPUyfS/BeforeAfterSlider.js"],"sourcesContent":["// Instructions: Create an image before-and-after slider with uploadable images on both sides and a customizable center arrow icon.\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";import{useCallback,useEffect,useMemo,useRef,useState,startTransition}from\"react\";import{useInView}from\"framer-motion\";/**\n * @framerIntrinsicWidth 600\n * @framerIntrinsicHeight 360\n *\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight any-prefer-fixed\n */export default function BeforeAfterSlider(props){const{beforeImage={src:\"https://framerusercontent.com/images/GfGkADagM4KEibNcIiRUWlfrR0.jpg\",alt:\"Before image\"},afterImage={src:\"https://framerusercontent.com/images/aNsAT3jCvt4zglbWCUoFe33Q.jpg\",alt:\"After image\"},arrowIcon={src:\"data:image/svg+xml;charset=utf-8,\"+encodeURIComponent(`<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"64\" height=\"64\" viewBox=\"0 0 24 24\" fill=\"none\">\n\t\t\t\t\t\t<path d=\"M10 6L4 12L10 18\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n\t\t\t\t\t\t<path d=\"M14 6L20 12L14 18\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n\t\t\t\t\t</svg>`),alt:\"Drag handle icon\"},initialPosition,dividerColor,dividerWidth,dividerShadow,arrowBackground,arrowBorderRadius,arrowSize,arrowPadding,arrowShadow,style}=props;const isStatic=useIsStaticRenderer();const containerRef=useRef(null);const inView=useInView(containerRef,{amount:.2});const[position,setPosition]=useState(()=>clamp01To100(initialPosition));const[dragging,setDragging]=useState(false);useEffect(()=>{startTransition(()=>setPosition(clamp01To100(initialPosition)));},[initialPosition]);const updatePositionFromClientX=useCallback(clientX=>{const el=containerRef.current;if(!el)return;const rect=el.getBoundingClientRect();if(!rect.width)return;const x=clientX-rect.left;const next=x/rect.width*100;startTransition(()=>setPosition(clamp01To100(next)));},[]);const onPointerDown=useCallback(e=>{if(isStatic)return;if(!inView)return;e.preventDefault();const el=containerRef.current;if(!el)return;try{el.setPointerCapture(e.pointerId);}catch(err){// ignore\n}startTransition(()=>setDragging(true));updatePositionFromClientX(e.clientX);},[isStatic,inView,updatePositionFromClientX]);const onPointerMove=useCallback(e=>{if(isStatic)return;if(!inView)return;if(!dragging)return;updatePositionFromClientX(e.clientX);},[isStatic,inView,dragging,updatePositionFromClientX]);const endDrag=useCallback(()=>{startTransition(()=>setDragging(false));},[]);const onPointerUp=useCallback(e=>{if(isStatic)return;if(!inView)return;const el=containerRef.current;if(el){try{el.releasePointerCapture(e.pointerId);}catch(err){// ignore\n}}endDrag();},[isStatic,inView,endDrag]);const onPointerCancel=useCallback(()=>{if(isStatic)return;endDrag();},[isStatic,endDrag]);const clip=useMemo(()=>{const right=100-clamp01To100(position);return`inset(0 ${right}% 0 0)`;},[position]);const dividerLeft=useMemo(()=>`${clamp01To100(position)}%`,[position]);const safeDividerWidth=Math.max(1,Math.round(dividerWidth));const safeArrowSize=Math.max(12,Math.round(arrowSize));const safeArrowPadding=Math.max(0,Math.round(arrowPadding));const arrowTotal=safeArrowSize+safeArrowPadding*2;const isFixedWidth=!!style&&style.width===\"100%\";const isFixedHeight=!!style&&style.height===\"100%\";return /*#__PURE__*/_jsxs(\"div\",{ref:containerRef,style:{...style,position:\"relative\",width:\"100%\",height:\"100%\",overflow:\"hidden\",userSelect:\"none\",touchAction:\"none\",cursor:isStatic?\"default\":dragging?\"ew-resize\":\"grab\",...isFixedWidth&&isFixedHeight?{}:{}},role:\"slider\",\"aria-label\":\"Before and after slider\",\"aria-valuemin\":0,\"aria-valuemax\":100,\"aria-valuenow\":Math.round(position),\"aria-orientation\":\"horizontal\",tabIndex:0,onKeyDown:e=>{if(isStatic)return;const step=e.shiftKey?10:2;if(e.key===\"ArrowLeft\"){e.preventDefault();startTransition(()=>setPosition(p=>clamp01To100(p-step)));}if(e.key===\"ArrowRight\"){e.preventDefault();startTransition(()=>setPosition(p=>clamp01To100(p+step)));}if(e.key===\"Home\"){e.preventDefault();startTransition(()=>setPosition(0));}if(e.key===\"End\"){e.preventDefault();startTransition(()=>setPosition(100));}},onPointerDown:onPointerDown,onPointerMove:onPointerMove,onPointerUp:onPointerUp,onPointerCancel:onPointerCancel,children:[/*#__PURE__*/_jsx(\"div\",{\"aria-label\":afterImage.alt||\"After image\",role:\"img\",style:{position:\"absolute\",inset:0,backgroundImage:`url(${afterImage.src})`,backgroundSize:\"cover\",backgroundPosition:\"center\",backgroundRepeat:\"no-repeat\"}}),/*#__PURE__*/_jsx(\"div\",{\"aria-label\":beforeImage.alt||\"Before image\",role:\"img\",style:{position:\"absolute\",inset:0,backgroundImage:`url(${beforeImage.src})`,backgroundSize:\"cover\",backgroundPosition:\"center\",backgroundRepeat:\"no-repeat\",clipPath:clip,WebkitClipPath:clip}}),/*#__PURE__*/_jsx(\"div\",{\"aria-hidden\":\"true\",style:{position:\"absolute\",top:0,left:dividerLeft,height:\"100%\",width:`${safeDividerWidth}px`,transform:`translateX(-${safeDividerWidth/2}px)`,backgroundColor:dividerColor,boxShadow:dividerShadow?\"0 0 10px rgba(0,0,0,0.35)\":\"none\",zIndex:3,pointerEvents:\"none\"}}),/*#__PURE__*/_jsx(\"div\",{\"aria-hidden\":\"true\",style:{position:\"absolute\",left:dividerLeft,top:\"50%\",transform:`translate(-50%, -50%)`,width:`${arrowTotal}px`,height:`${arrowTotal}px`,display:\"flex\",alignItems:\"center\",justifyContent:\"center\",background:arrowBackground,borderRadius:`${arrowBorderRadius}px`,boxShadow:arrowShadow?\"0 10px 30px rgba(0,0,0,0.22)\":\"none\",zIndex:4,pointerEvents:\"none\"},children:/*#__PURE__*/_jsx(\"img\",{src:arrowIcon.src,srcSet:arrowIcon.srcSet,alt:arrowIcon.alt||\"\",style:{width:`${safeArrowSize}px`,height:`${safeArrowSize}px`,objectFit:\"contain\",display:\"block\"}})})]});}function clamp01To100(v){if(!Number.isFinite(v))return 50;return Math.max(0,Math.min(100,v));}addPropertyControls(BeforeAfterSlider,{beforeImage:{type:ControlType.ResponsiveImage,title:\"Before Image\"},afterImage:{type:ControlType.ResponsiveImage,title:\"After Image\"},arrowIcon:{type:ControlType.ResponsiveImage,title:\"Arrow Icon\"},initialPosition:{type:ControlType.Number,title:\"Position\",defaultValue:50,min:0,max:100,step:1,unit:\"%\"},dividerColor:{type:ControlType.Color,title:\"Divider\",defaultValue:\"#FFFFFF\"},dividerWidth:{type:ControlType.Number,title:\"Divider Width\",defaultValue:2,min:1,max:20,step:1,unit:\"px\"},dividerShadow:{type:ControlType.Boolean,title:\"Divider Shadow\",defaultValue:true,enabledTitle:\"On\",disabledTitle:\"Off\"},arrowBackground:{type:ControlType.Color,title:\"Icon BG\",defaultValue:\"#FFFFFF\"},arrowBorderRadius:{type:ControlType.Number,title:\"Icon Radius\",defaultValue:999,min:0,max:999,step:1,unit:\"px\"},arrowSize:{type:ControlType.Number,title:\"Icon Size\",defaultValue:22,min:12,max:80,step:1,unit:\"px\"},arrowPadding:{type:ControlType.Number,title:\"Icon Padding\",defaultValue:10,min:0,max:40,step:1,unit:\"px\"},arrowShadow:{type:ControlType.Boolean,title:\"Icon Shadow\",defaultValue:true,enabledTitle:\"On\",disabledTitle:\"Off\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"BeforeAfterSlider\",\"slots\":[],\"annotations\":{\"framerIntrinsicHeight\":\"360\",\"framerIntrinsicWidth\":\"600\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutHeight\":\"any-prefer-fixed\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./BeforeAfterSlider.map"],"mappings":"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"}