https://app.callidusos.co.uk/assets/react-compare-slider-DYiDWaak.js

1import{r as t}from"./sentry-D_k-wx34.js";import{j as c}from"./framer-BmLPDQFc.js";var H=t.forwardRef(({transition:e,...o},n)=>{let i={position:"absolute",top:0,left:0,width:"100%",height:"100%",transition:e?`clip-path ${e}`:void 0,userSelect:"none",willChange:"clip-path, transition",KhtmlUserSelect:"none",MozUserSelect:"none",WebkitUserSelect:"none"};return c.jsx("div",{...o,style:i,"data-rcs":"clip-item",ref:n})});H.displayName="ContainerClip";var I=t.forwardRef(({children:e,disabled:o,portrait:n,position:i,transition:a},h)=>{let m={position:"absolute",top:0,width:n?"100%":void 0,height:n?void 0:"100%",background:"none",border:0,padding:0,pointerEvents:"all",appearance:"none",WebkitAppearance:"none",MozAppearance:"none",outline:0,transform:n?"translate3d(0, -50% ,0)":"translate3d(-50%, 0, 0)",transition:a?`${n?"top":"left"} ${a}`:void 0};return c.jsx("button",{ref:h,"aria-label":"Drag to move or focus and use arrow keys","aria-orientation":n?"vertical":"horizontal","aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":i,"data-rcs":"handle-container",disabled:o,role:"slider",style:m,children:e})});I.displayName="ThisHandleContainer";var $=({flip:e})=>c.jsx("div",{className:"__rcs-handle-arrow",style:{width:0,height:0,borderTop:"8px solid transparent",borderRight:"10px solid",borderBottom:"8px solid transparent",transform:e?"rotate(180deg)":void 0}}),se=({className:e="__rcs-handle-root",disabled:o,buttonStyle:n,linesStyle:i,portrait:a,style:h,...m})=>{let w={display:"flex",flexDirection:a?"row":"column",placeItems:"center",height:"100%",cursor:o?"not-allowed":a?"ns-resize":"ew-resize",pointerEvents:"none",color:"#fff",...h},R={flexGrow:1,height:a?2:"100%",width:a?"100%":2,backgroundColor:"currentColor",pointerEvents:"auto",boxShadow:"0 0 4px rgba(0,0,0,.5)",...i},C={display:"grid",gridAutoFlow:"column",gap:8,placeContent:"center",flexShrink:0,width:56,height:56,borderRadius:"50%",borderStyle:"solid",borderWidth:2,pointerEvents:"auto",backdropFilter:"blur(7px)",WebkitBackdropFilter:"blur(7px)",backgroundColor:"rgba(0, 0, 0, 0.125)",boxShadow:"0 0 4px rgba(0,0,0,.35)",transform:a?"rotate(90deg)":void 0,...n};return c.jsxs("div",{...m,className:e,style:w,children:[c.jsx("div",{className:"__rcs-handle-line",style:R}),c.jsxs("div",{className:"__rcs-handle-button",style:C,children:[c.jsx($,{}),c.jsx($,{flip:!0})]}),c.jsx("div",{className:"__rcs-handle-line",style:R})]})},X=(e=>(e.ARROW_LEFT="ArrowLeft",e.ARROW_RIGHT="ArrowRight",e.ARROW_UP="ArrowUp",e.ARROW_DOWN="ArrowDown",e))(X||{}),le=({boxSizing:e="border-box",objectFit:o="cover",objectPosition:n="center center",...i}={})=>({display:"block",width:"100%",height:"100%",maxWidth:"100%",boxSizing:e,objectFit:o,objectPosition:n,...i}),ce=e=>{let o=t.useRef(e);return t.useEffect(()=>{o.current=e}),o.current},O=(e,o,n,i)=>{let a=t.useRef();t.useEffect(()=>{a.current=o},[o]),t.useEffect(()=>{if(!(n&&n.addEventListener))return;let h=m=>a.current&&a.current(m);return n.addEventListener(e,h,i),()=>{n.removeEventListener(e,h,i)}},[e,n,i])},ue=typeof window<"u"&&typeof window.document<"u"&&typeof window.document.createElement<"u"?t.useLayoutEffect:t.useEffect,de=(e,o)=>{let n=t.useRef(),i=t.useCallback(()=>{e.current&&n.current&&n.current.observe(e.current)},[e]);ue(()=>(n.current=new ResizeObserver(([a])=>o(a.contentRect)),i(),()=>{n.current&&n.current.disconnect()}),[o,i])},z={capture:!1,passive:!0},D={capture:!0,passive:!1},pe=e=>{e.preventDefault(),e.currentTarget.focus()},fe=t.forwardRef(({boundsPadding:e=0,browsingContext:o=globalThis,changePositionOnHover:n=!1,disabled:i=!1,handle:a,itemOne:h,itemTwo:m,keyboardIncrement:w="5%",onlyHandleDraggable:R=!1,onPositionChange:C,portrait:s=!1,position:E=50,style:G,transition:K,...Y},q)=>{let p=t.useRef(null),N=t.useRef(null),b=t.useRef(null),f=t.useRef(E),[S,P]=t.useState(!1),[J,A]=t.useState(!0),L=t.useRef(!1),[Q,Z]=t.useState(),U=ce(E),u=t.useCallback(function({x:r,y:l,isOffset:d}){let v=p.current,j=b.current,_=N.current,{width:y,height:g,left:oe,top:ie}=v.getBoundingClientRect();if(y===0||g===0)return;let ae=s?d?l-ie-o.scrollY:l:d?r-oe-o.scrollX:r,F=Math.min(Math.max(ae/(s?g:y)*100,0),100),M=s?g/(v.offsetHeight||1):y/(v.offsetWidth||1),T=e*M/(s?g:y)*100,W=Math.min(Math.max(F,T*M),100-T*M);f.current=F,j.setAttribute("aria-valuenow",`${Math.round(f.current)}`),j.style.top=s?`${W}%`:"0",j.style.left=s?"0":`${W}%`,_.style.clipPath=s?`inset(${W}% 0 0 0)`:`inset(0 0 0 ${W}%)`,C&&C(f.current)},[e,C,s,o]);t.useEffect(()=>{let{width:r,height:l}=p.current.getBoundingClientRect(),d=E===U?f.current:E;u({x:r/100*d,y:l/100*d})},[e,E,s,U,u]);let V=t.useCallback(r=>{r.preventDefault(),!(i||r.button!==0)&&(u({isOffset:!0,x:r.pageX,y:r.pageY}),P(!0),A(!0))},[i,u]),x=t.useCallback(function(r){u({isOffset:!0,x:r.pageX,y:r.pageY}),A(!1)},[u]),k=t.useCallback(()=>{P(!1),A(!0)},[]),ee=t.useCallback(({width:r,height:l})=>{let{width:d,height:v}=p.current.getBoundingClientRect();u({x:r/100*f.current*d/r,y:l/100*f.current*v/l})},[u]),te=t.useCallback(r=>

1{if(!Object.values(X).includes(r.key))return;r.preventDefault(),A(!0);let{top:l,left:d}=b.current.getBoundingClientRect(),{width:v,height:j}=p.current.getBoundingClientRect(),_=typeof w=="string"?parseFloat(w):w/v*100,y=s?r.key==="ArrowLeft"||r.key==="ArrowDown":r.key==="ArrowRight"||r.key==="ArrowUp",g=Math.min(Math.max(y?f.current+_:f.current-_,0),100);u({x:s?d:v*g/100,y:s?j*g/100:l})},[w,s,u]);t.useEffect(()=>{Z(R?b.current:p.current)},[R]),t.useEffect(()=>{let r=p.current,l=()=>{S||k()};return n&&(r.addEventListener("pointermove",x,z),r.addEventListener("pointerleave",l,z)),()=>{r.removeEventListener("pointermove",x),r.removeEventListener("pointerleave",l)}},[n,x,k,S]),t.useEffect(()=>(S&&!L.current&&(o.addEventListener("pointermove",x,z),o.addEventListener("pointerup",k,z),L.current=!0),()=>{L.current&&(o.removeEventListener("pointermove",x),o.removeEventListener("pointerup",k),L.current=!1)}),[x,k,S,o]),t.useImperativeHandle(q,()=>({rootContainer:p.current,handleContainer:b.current,setPosition(r){let{width:l,height:d}=p.current.getBoundingClientRect();u({x:l/100*r,y:d/100*r})}}),[u]),de(p,ee),O("keydown",te,b.current,D),O("click",pe,b.current,D),O("pointerdown",V,Q,D);let re=a||c.jsx(se,{disabled:i,portrait:s}),B=J?K:void 0,ne={position:"relative",display:"flex",overflow:"hidden",cursor:S?s?"ns-resize":"ew-resize":void 0,touchAction:"none",userSelect:"none",KhtmlUserSelect:"none",msUserSelect:"none",MozUserSelect:"none",WebkitUserSelect:"none",...G};return c.jsxs("div",{...Y,ref:p,style:ne,"data-rcs":"root",children:[h,c.jsx(H,{ref:N,transition:B,children:m}),c.jsx(I,{disabled:i,portrait:s,position:Math.round(f.current),ref:b,transition:B,children:re})]})});fe.displayName="ReactCompareSlider";var he=t.forwardRef(({style:e,...o},n)=>{let i=le(e);return c.jsx("img",{ref:n,...o,style:i,"data-rcs":"image"})});he.displayName="ReactCompareSliderImage";var be=()=>t.useRef({rootContainer:null,handleContainer:null,setPosition:()=>console.warn("[react-compare-slider] `setPosition` cannot be used until the component has mounted.")});export{fe as ReactCompareSlider,se as ReactCompareSliderHandle,he as ReactCompareSliderImage,le as styleFitContainer,be as useReactCompareSliderRef};