https://www.capture.com/assets/comparison-slider-DxCmO3Xt.js

1import{r as M,j as R}from"./react-core-B0D1Bb7z.js";import{g as x}from"./index-DDlvirwQ.js";import{u as ct,D as Se}from"./index-B7Phdteh.js";import{c as B}from"./utils-CDN07tui.js";import{bC as at,bN as lt}from"./icons-_pwxYenw.js";var T,he,te,Be,J,I,ge,Ve,Ae=function(){return T||typeof window<"u"&&(T=window.gsap)},xe={},ut=function(e){return Math.round(e*1e4)/1e4},_e=function(e){return Ve(e).id},ee=function(e){return xe[_e(typeof e=="string"?te(e)[0]:e)]},$e=function(e){var t=J,n;if(e-ge>=.05)for(ge=e;t;)n=t.g(t.t,t.p),(n!==t.v1||e-t.t1>.2)&&(t.v2=t.v1,t.v1=n,t.t2=t.t1,t.t1=e),t=t._next},ft={deg:360,rad:Math.PI*2},de=function(){T=Ae(),T&&(te=T.utils.toArray,Be=T.utils.getUnit,Ve=T.core.getCache,I=T.ticker,he=1)},pt=function(e,t,n,i){this.t=e,this.p=t,this.g=e._gsap.get,this.rCap=ft[n||Be(this.g(e,t))],this.v1=this.v2=this.g(e,t),this.t1=this.t2=I.time,i&&(this._next=i,i._prev=this)},se=(function(){function a(t,n){he||de(),this.target=te(t)[0],xe[_e(this.target)]=this,this._props={},n&&this.add(n)}a.register=function(n){T=n,de()};var e=a.prototype;return e.get=function(n,i){var r=this._props[n]||console.warn("Not tracking "+n+" velocity."),f,c,s;return f=parseFloat(i?r.v1:r.g(r.t,r.p)),c=f-parseFloat(r.v2),s=r.rCap,s&&(c=c%s,c!==c%(s/2)&&(c=c<0?c+s:c-s)),ut(c/((i?r.t1:I.time)-r.t2))},e.getAll=function(){var n={},i=this._props,r;for(r in i)n[r]=this.get(r);return n},e.isTracking=function(n){return n in this._props},e.add=function(n,i){var r=this._props[n];r?(r.v1=r.v2=r.g(r.t,r.p),r.t1=r.t2=I.time):(J||(I.add($e),ge=I.time),J=this._props[n]=new pt(this.target,n,i,J))},e.remove=function(n){var i=this._props[n],r,f;i&&(r=i._prev,f=i._next,r&&(r._next=f),f?f._prev=r:J===i&&(I.remove($e),J=0),delete this._props[n])},e.kill=function(n){for(var i in this._props)this.remove(i);n||delete xe[_e(this.target)]},a.track=function(n,i,r){he||de();for(var f=[],c=te(n),s=i.split(","),o=(r||"").split(","),p=c.length,h,d;p--;){for(h=ee(c[p])||new a(c[p]),d=s.length;d--;)h.add(s[d],o[d]||o[0]);f.push(h)}return f},a.untrack=function(n,i){var r=i&&i.split(",");te(n).forEach(function(f){var c=ee(f);c&&(r?r.forEach(function(s){return c.remove(s)}):c.kill(1))})},a.isTracking=function(n,i){var r=ee(n);return r&&r.isTracking(i)},a.getVelocity=function(n,i){var r=ee(n);return!r||!r.isTracking(i)?console.warn("Not tracking velocity of "+i):r.get(i)},a})();se.getByTarget=ee;Ae()&&T.registerPlugin(se);var w,Le,je,Oe,me,ne,ze,Ie,Ge,ye,Ue,ie,ve,Xe,le=se.getByTarget,Ye=function(){return w||typeof window<"u"&&(w=window.gsap)&&w.registerPlugin&&w},dt=function(e){return typeof e=="string"},re=function(e){return typeof e=="number"},A=function(e){return typeof e=="object"},we=function(e){return typeof e=="function"},ht=1,De=Array.isArray,gt=function(e){return e},G=1e10,Ee=1/G,qe=.05,xt=function(e){return Math.round(e*1e4)/1e4},_t=function(e,t,n){for(var i in t)!(i in e)&&i!==n&&(e[i]=t[i]);return e},mt=function a(e){var t={},n,i;for(n in e)t[n]=A(i=e[n])&&!De(i)?a(i):i;return t},Me=function(e,t,n,i,r){var f=t.length,c=0,s=G,o,p,h,d;if(A(e)){for(;f--;){o=t[f],p=0;for(h in e)d=o[h]-e[h],p+=d*d;p<s&&(c=f,s=p)}if((r||G)<G&&r<Math.sqrt(s))return e}else for(;f--;)o=t[f],p=o-e,p<0&&(p=-p),p<s&&o>=i&&o<=n&&(c=f,s=p);return t[c]},Je=function(e,t,n,i,r,f,c){if(e.end==="auto")return e;var s=e.end,o,p;if(n=isNaN(n)?G:n,i=isNaN(i)?-G:i,A(t)){if(o=t.calculated?t:(we(s)?s(t,c):Me(t,s,n,i,f))||t,!t.calculated){for(p in o)t[p]=o[p];t.calculated=!0}o=o[r]}else o=we(s)?s(t,c):De(s)?Me(t,s,n,i,f):parseFloat(s);return o>n?o=n:o<i&&(o=i),{max:o,min:o,unitFactor:e.unitFactor}},ue=function(e,t,n){return isNaN(e[t])?n:+e[t]},be=function(e,t){return t*qe*e/ye},Te=function(e,t,n){return Math.abs((t-e)*ye/n/qe)},Ke={resistance:1,checkpoint:1,preventOvershoot:1,linkedProps:1,radius:1,duration:1},Qe=function(e,t,n,i){if(t.linkedProps){var r=t.linkedProps.split(","),f={},c,s,o,p,h,d;for(c=0;c<r.length;c++)s=r[c],o=t[s],o&&(re(o.velocity)?p=o.velocity:(h=h||le(e),p=h&&h.isTracking(s)?h.get(s):0),d=Math.abs(p/ue(o,"resistance",i)),f[s]=parseFloat(n(e,s))+be(p,d));return f}},vt=function(e,t,n,i,r,f){if(n===void 0&&(n=10),i===void 0&&(i=.2),r===void 0&&(r=1),dt(e)&&(e=Oe(e)[0]),!e)return 0;var c=0,s=G,o=t.inertia||t,p=Ge(e).get,h=ue(o,"resistance",ne.resistance),d,u,g,l,m,F,y,v,C,N;N=Qe(e,o,p,h);for(d in o)Ke[d]||(u=o[d],A(u)||(v=v||le(e),v&&v.isTracking(d)?u=re(u)?{velocity:u}:{velocity:v.get(d)}:(l=+u||0,g=Math.abs(l/h))),A(u)&&(re(u.velocity)?l=u.velocity:(v=v||le(e),l=v&&v.isTracking(d)?v.get(d):0),g=Ue(i,n,Math.abs(l/ue(u,"resistance",h))),m=parseFloat(p(e,d))||0,F=m+be(l,g),"end"in u&&(u=Je(u,N&&d in N?N:F,u.max,u.min,d,o.radius,l),ie===t&&(ie=o=mt(t)),o[d]=_t(u,o[d],"end")),"max"in u&&F>+u.max+Ee?(C=u.unitFactor||ne.unitFactors[d]||1,y=m>u.max&&u.min!==u.max||l*C>-15&&l*C<45?i+(n-i)*.1:Te(m,u.max,l),y+r<s&&(s=y+r)):"min"in u&&F<+u.min-Ee&&(C=u.unitFactor||ne.unitFactors[d]||1,y=m<u.min&&u.min!==u.max||l*C>-45&&l*C<15?i+(n-i)*.1:Te(m,u.min,l),y+r<s&&(s=y+r)),y>c&&(c=y)),g>c&&(c=g));return c>s&&(c=s),c>n?n:c<i?i:c},Fe=function(){w=Ye(),w&&(je=w.parseEase,Oe=w.utils.toArray,ze=w.utils.getUnit,Ge=w.core.getCache,Ue=w.utils.clamp,ve=w.core.getStyleSaver,Xe=w.core.reverting||function(){},me=je("power3"),ye=me(.05),Ie=w.core.PropTween,w.config({resistance:100,unitFactors:{time:1e3,totalTime:1e3,progress:1e3,totalProgress:1e3}}),ne=w.config(),w.registerPlugin(se),Le=1)},ke={version:"3.14.2",name:"inertia",register:function(e){w=e,Fe()},init:function(e,t,n,i,r){Le||Fe();var f=le(e);

1if(t==="auto"){if(!f){console.warn("No inertia tracking on "+e+". InertiaPlugin.track(target) first.");return}t=f.getAll()}this.styles=ve&&typeof e.style=="object"&&ve(e),this.target=e,this.tween=n,ie=t;var c=e._gsap,s=c.get,o=t.duration,p=A(o),h=t.preventOvershoot||p&&o.overshoot===0,d=ue(t,"resistance",ne.resistance),u=re(o)?o:vt(e,t,p&&o.max||10,p&&o.min||.2,p&&"overshoot"in o?+o.overshoot:h?0:1),g,l,m,F,y,v,C,N,L;t=ie,ie=0,L=Qe(e,t,s,d);for(g in t)Ke[g]||(l=t[g],we(l)&&(l=l(i,e,r)),re(l)?y=l:A(l)&&!isNaN(l.velocity)?y=+l.velocity:f&&f.isTracking(g)?y=f.get(g):console.warn("ERROR: No velocity was defined for "+e+" property: "+g),v=be(y,u),N=0,m=s(e,g),F=ze(m),m=parseFloat(m),A(l)&&(C=m+v,"end"in l&&(l=Je(l,L&&g in L?L:C,l.max,l.min,g,t.radius,y)),"max"in l&&+l.max<C?h||l.preventOvershoot?v=l.max-m:N=l.max-m-v:"min"in l&&+l.min>C&&(h||l.preventOvershoot?v=l.min-m:N=l.min-m-v)),this._props.push(g),this.styles&&this.styles.save(g),this._pt=new Ie(this._pt,e,g,m,0,gt,0,c.set(e,g,this)),this._pt.u=F||0,this._pt.c1=v,this._pt.c2=N);return n.duration(u),ht},render:function(e,t){var n=t._pt;if(e=me(t.tween._time/t.tween._dur),e||!Xe())for(;n;)n.set(n.t,n.p,xt(n.s+n.c1*e+n.c2*e*e)+n.u,n.d,e),n=n._next;else t.styles.revert()}};"track,untrack,isTracking,getVelocity,getByTarget".split(",").forEach(function(a){return ke[a]=se[a]});Ye()&&w.registerPlugin(ke);typeof window<"u"&&x.registerPlugin(Se,ke);const Rt=({beforeImage:a,afterImage:e,beforeAlt:t="Before",afterAlt:n="After",initialPosition:i=50,orientation:r="horizontal",enableInertia:f=!0,dragOnHover:c=!1,autoAnimate:s=!1,dividerWidth:o=3,showHandle:p=!0,handleSize:h=48,handleIcon:d,dividerColor:u="white",handleColor:g="white",showLabels:l=!1,labelText:m={before:"Before",after:"After"},labelPosition:F="top-left",labelClassName:y="",beforeLabelClassName:v="",afterLabelClassName:C="",showPercentage:N=!1,percentagePosition:L="top",onDragStart:Pe,onDragEnd:Re,onPositionChange:Ze,ariaLabel:He="Image comparison slider",reducedMotion:We=!1,className:et="",imageClassName:Ce=""})=>{const O=M.useRef(null),U=M.useRef(null),X=M.useRef(null),Y=M.useRef(null),K=M.useRef(null),[fe,oe]=M.useState(!1),[Q,tt]=M.useState(i),[nt,it]=M.useState(!1),$=M.useRef(null),rt=typeof window<"u"?window.matchMedia("(prefers-reduced-motion: reduce)").matches:!1,st=We||rt,_=r==="horizontal",Ne=()=>`absolute text-sm font-medium px-3 py-1.5 rounded backdrop-blur-sm bg-black/50 text-white pointer-events-none z-10 ${{"top-left":"top-4 left-4","top-right":"top-4 right-4","bottom-left":"bottom-4 left-4","bottom-right":"bottom-4 right-4"}[F]}`;ct(()=>{if(!U.current||!O.current||!X.current||!Y.current)return;const k=O.current,V=X.current,S=Y.current,b=U.current,ce=k.getBoundingClientRect(),D=_?i/100*ce.width:i/100*ce.height;_?(x.set(b,{x:D,y:0,immediateRender:!0}),x.set(V,{clipPath:`inset(0px ${ce.width-D}px 0px 0px)`,immediateRender:!0}),x.set(S,{clipPath:`inset(0px 0px 0px ${D}px)`,immediateRender:!0})):(x.set(b,{x:0,y:D,immediateRender:!0}),x.set(V,{clipPath:`inset(0px 0px ${ce.height-D}px 0px)`,immediateRender:!0}),x.set(S,{clipPath:`inset(${D}px 0px 0px 0px)`,immediateRender:!0})),it(!0);const Z=j=>{const P=k.getBoundingClientRect(),E=_?Math.max(0,Math.min(P.width,j)):Math.max(0,Math.min(P.height,j)),z=_?E/P.width*100:E/P.height*100;tt(z),_?(x.set(V,{clipPath:`inset(0px ${P.width-E}px 0px 0px)`}),x.set(S,{clipPath:`inset(0px 0px 0px ${E}px)`})):(x.set(V,{clipPath:`inset(0px 0px ${P.height-E}px 0px)`}),x.set(S,{clipPath:`inset(${E}px 0px 0px 0px)`})),Ze?.(z)},ae=[],H=()=>{const j=k.getBoundingClientRect(),P=_?j.width/2:j.height/2,z=(Math.random()-.5)*2*50,W=P+z,q=1.5+Math.random()*1.5;_?$.current=x.to(b,{x:W,duration:q,ease:"power1.inOut",overwrite:!0,onUpdate:()=>{const pe=x.getProperty(b,"x");Z(pe)},onComplete:H}):$.current=x.to(b,{y:W,duration:q,ease:"power1.inOut",overwrite:!0,onUpdate:()=>{const pe=x.getProperty(b,"y");Z(pe)},onComplete:H})};if(s&&(H(),ae.push(()=>{x.killTweensOf(b),$.current=null})),c){const j=z=>{s&&$.current&&($.current.kill(),$.current=null);const W=k.getBoundingClientRect(),q=_?z.clientX-W.left:z.clientY-W.top;Z(q),_?x.set(b,{x:q}):x.set(b,{y:q})},P=()=>{oe(!0),Pe?.(),s&&$.current&&($.current.kill(),$.current=null)},E=()=>{oe(!1),Re?.(),s&&H()};k.addEventListener("mousemove",j),k.addEventListener("mouseenter",P),k.addEventListener("mouseleave",E),ae.push(()=>{k.removeEventListener("mousemove",j),k.removeEventListener("mouseenter",P),k.removeEventListener("mouseleave",E)})}if(!c){const j=Se.create(b,{type:_?"x":"y",bounds:k,inertia:f&&!st,onDragStart:()=>{s&&$.current&&($.current.kill(),$.current=null),oe(!0),Pe?.()},onDrag:function(){const P=_?this.x:this.y;Z(P)},onDragEnd:()=>{oe(!1),Re?.(),s&&H()},onThrowUpdate:function(){const P=_?this.x:this.y;Z(P)}});

1K.current=j[0],ae.push(()=>{K.current&&K.current.kill()})}return()=>{ae.forEach(j=>j())}},{scope:O,dependencies:[i,r,f,c,s,a,e]}),M.useEffect(()=>{if(!K.current)return;const k=()=>{if(!O.current||!U.current||!X.current||!Y.current)return;const V=K.current;if(!V)return;V.applyBounds(O.current);const S=O.current.getBoundingClientRect(),b=_?Q/100*S.width:Q/100*S.height;_?x.set(U.current,{x:b}):x.set(U.current,{y:b}),_?(x.set(X.current,{clipPath:`inset(0px ${S.width-b}px 0px 0px)`}),x.set(Y.current,{clipPath:`inset(0px 0px 0px ${b}px)`})):(x.set(X.current,{clipPath:`inset(0px 0px ${S.height-b}px 0px)`}),x.set(Y.current,{clipPath:`inset(${b}px 0px 0px 0px)`}))};return window.addEventListener("resize",k),()=>{window.removeEventListener("resize",k)}},[_,Q]);const ot=_?R.jsx(at,{className:"w-4 h-4"}):R.jsx(lt,{className:"w-4 h-4"});return R.jsx("div",{className:B("relative w-full h-full rounded-lg shadow-lg overflow-hidden",!nt&&"opacity-0",et),role:"region","aria-label":He,children:R.jsxs("div",{ref:O,className:B("relative w-full h-full overflow-hidden select-none",c?"cursor-default":""),children:[R.jsxs("div",{ref:X,className:"absolute inset-0 w-full h-full transform-gpu will-change-[clip-path]",children:[R.jsx("img",{src:a,alt:t,className:B("w-full h-full object-cover pointer-events-none",Ce),draggable:!1}),l&&R.jsx("div",{className:B(Ne(),y,v),children:m.before})]}),R.jsxs("div",{ref:Y,className:"absolute inset-0 w-full h-full transform-gpu will-change-[clip-path]",children:[R.jsx("img",{src:e,alt:n,className:B("w-full h-full object-cover pointer-events-none",Ce),draggable:!1}),l&&R.jsx("div",{className:B(Ne(),y,C),children:m.after})]}),R.jsxs("div",{ref:U,className:B("absolute will-change-transform z-10",c?"cursor-crosshair pointer-events-none":fe?"cursor-grabbing":"cursor-grab",_?"top-0 h-full":"left-0 w-full"),children:[R.jsx("div",{className:B("absolute",_?"top-0 h-full left-1/2":"left-0 w-full top-1/2"),style:{[_?"width":"height"]:`${o}px`,background:`linear-gradient(to top, transparent 10%, ${u} 30%, ${u} 70%, transparent 90%)`,transform:_?`translateX(-${o/2}px)`:`translateY(-${o/2}px)`}}),p&&R.jsx("div",{className:B("absolute flex items-center justify-center rounded-full shadow-lg transition-transform",fe?"scale-110":"scale-100","left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"),style:{width:`${h}px`,height:`${h}px`,backgroundColor:g,boxShadow:`0 0 60px ${u}, 0 0 50px ${u}`,color:g==="#ffffff"||g==="white"||g==="#fff"?"#000":"#fff"},children:d||ot})]}),N&&L==="top"&&R.jsxs("div",{className:"absolute top-4 left-1/2 -translate-x-1/2 text-xs font-medium px-2 py-1 rounded-full bg-black/70 text-white backdrop-blur-sm pointer-events-none z-20",children:[Math.round(Q),"%"]}),N&&L==="bottom"&&R.jsxs("div",{className:"absolute bottom-4 left-1/2 -translate-x-1/2 text-xs font-medium px-2 py-1 rounded-full bg-black/70 text-white backdrop-blur-sm pointer-events-none z-20",children:[Math.round(Q),"%"]})]})})};export{Rt as default};
2//# sourceMappingURL=comparison-slider-DxCmO3Xt.js.map