npm - react-spring-carousel - Versions diffs - 3.0.0-beta-2.1.7 → 3.0.0-beta-2.2.0 - Mend

react-spring-carousel 3.0.0-beta-2.1.7 → 3.0.0-beta-2.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/dist/index.es.js +411 -461
package/dist/index.umd.js +5 -5
package/dist/useSpringCarousel.d.ts +2 -2
package/package.json +1 -1

package/dist/index.umd.js CHANGED Viewed

@@ -1,4 +1,4 @@
-(function(R,V){typeof exports=="object"&&typeof module<"u"?V(exports,require("react/jsx-runtime"),require("@react-spring/web"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","@react-spring/web","react"],V):(R=typeof globalThis<"u"?globalThis:R||self,V(R["react-spring-carousel"]={},R["react/jsx-runtime"],R["@react-spring/web"],R.React))})(this,function(R,V,ae,d){"use strict";function Ke(r,e,t){return Math.max(e,Math.min(r,t))}const C={toVector(r,e){return r===void 0&&(r=e),Array.isArray(r)?r:[r,r]},add(r,e){return[r[0]+e[0],r[1]+e[1]]},sub(r,e){return[r[0]-e[0],r[1]-e[1]]},addTo(r,e){r[0]+=e[0],r[1]+=e[1]},subTo(r,e){r[0]-=e[0],r[1]-=e[1]}};function be(r,e,t){return e===0||Math.abs(e)===1/0?Math.pow(r,t*5):r*e*t/(e+t*r)}function _e(r,e,t,n=.15){return n===0?Ke(r,e,t):r<e?-be(e-r,t-e,n)+e:r>t?+be(r-t,t-e,n)+t:r}function Fe(r,[e,t],[n,s]){const[[a,o],[u,c]]=r;return[_e(e,a,o,n),_e(t,u,c,s)]}function Ge(r,e){if(typeof r!="object"||r===null)return r;var t=r[Symbol.toPrimitive];if(t!==void 0){var n=t.call(r,e);if(typeof n!="object")return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return(e==="string"?String:Number)(r)}function We(r){var e=Ge(r,"string");return typeof e=="symbol"?e:String(e)}function $(r,e,t){return e=We(e),e in r?Object.defineProperty(r,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):r[e]=t,r}function we(r,e){var t=Object.keys(r);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(r);e&&(n=n.filter(function(s){return Object.getOwnPropertyDescriptor(r,s).enumerable})),t.push.apply(t,n)}return t}function y(r){for(var e=1;e<arguments.length;e++){var t=arguments[e]!=null?arguments[e]:{};e%2?we(Object(t),!0).forEach(function(n){$(r,n,t[n])}):Object.getOwnPropertyDescriptors?Object.defineProperties(r,Object.getOwnPropertyDescriptors(t)):we(Object(t)).forEach(function(n){Object.defineProperty(r,n,Object.getOwnPropertyDescriptor(t,n))})}return r}const Te={pointer:{start:"down",change:"move",end:"up"},mouse:{start:"down",change:"move",end:"up"},touch:{start:"start",change:"move",end:"end"},gesture:{start:"start",change:"change",end:"end"}};function xe(r){return r?r[0].toUpperCase()+r.slice(1):""}const Ye=["enter","leave"];function He(r=!1,e){return r&&!Ye.includes(e)}function qe(r,e="",t=!1){const n=Te[r],s=n&&n[e]||e;return"on"+xe(r)+xe(s)+(He(t,s)?"Capture":"")}const Xe=["gotpointercapture","lostpointercapture"];function Je(r){let e=r.substring(2).toLowerCase();const t=!!~e.indexOf("passive");t&&(e=e.replace("passive",""));const n=Xe.includes(e)?"capturecapture":"capture",s=!!~e.indexOf(n);return s&&(e=e.replace("capture","")),{device:e,capture:s,passive:t}}function Qe(r,e=""){const t=Te[r],n=t&&t[e]||e;return r+n}function re(r){return"touches"in r}function Ee(r){return re(r)?"touch":"pointerType"in r?r.pointerType:"mouse"}function Ze(r){return Array.from(r.touches).filter(e=>{var t,n;return e.target===r.currentTarget||((t=r.currentTarget)===null||t===void 0||(n=t.contains)===null||n===void 0?void 0:n.call(t,e.target))})}function et(r){return r.type==="touchend"||r.type==="touchcancel"?r.changedTouches:r.targetTouches}function Ie(r){return re(r)?et(r)[0]:r}function tt(r){return Ze(r).map(e=>e.identifier)}function ce(r){const e=Ie(r);return re(r)?e.identifier:e.pointerId}function Se(r){const e=Ie(r);return[e.clientX,e.clientY]}function rt(r){const e={};if("buttons"in r&&(e.buttons=r.buttons),"shiftKey"in r){const{shiftKey:t,altKey:n,metaKey:s,ctrlKey:a}=r;Object.assign(e,{shiftKey:t,altKey:n,metaKey:s,ctrlKey:a})}return e}function ne(r,...e){return typeof r=="function"?r(...e):r}function nt(){}function st(...r){return r.length===0?nt:r.length===1?r[0]:function(){let e;for(const t of r)e=t.apply(this,arguments)||e;return e}}function ke(r,e){return Object.assign({},e,r||{})}const it=32;class ot{constructor(e,t,n){this.ctrl=e,this.args=t,this.key=n,this.state||(this.state={},this.computeValues([0,0]),this.computeInitial(),this.init&&this.init(),this.reset())}get state(){return this.ctrl.state[this.key]}set state(e){this.ctrl.state[this.key]=e}get shared(){return this.ctrl.state.shared}get eventStore(){return this.ctrl.gestureEventStores[this.key]}get timeoutStore(){return this.ctrl.gestureTimeoutStores[this.key]}get config(){return this.ctrl.config[this.key]}get sharedConfig(){return this.ctrl.config.shared}get handler(){return this.ctrl.handlers[this.key]}reset(){const{state:e,shared:t,ingKey:n,args:s}=this;t[n]=e._active=e.active=e._blocked=e._force=!1,e._step=[!1,!1],e.intentional=!1,e._movement=[0,0],e._distance=[0,0],e._direction=[0,0],e._delta=[0,0],e._bounds=[[-1/0,1/0],[-1/0,1/0]],e.args=s,e.axis=void 0,e.memo=void 0,e.elapsedTime=e.timeDelta=0,e.direction=[0,0],e.distance=[0,0],e.overflow=[0,0],e._movementBound=[!1,!1],e.velocity=[0,0],e.movement=[0,0],e.delta=[0,0],e.timeStamp=0}start(e){const t=this.state,n=this.config;t._active||(this.reset(),this.computeInitial(),t._active=!0,t.target=e.target,t.currentTarget=e.currentTarget,t.lastOffset=n.from?ne(n.from,t):t.offset,t.offset=t.lastOffset,t.startTime=t.timeStamp=e.timeStamp)}computeValues(e){const t=this.state;t._values=e,t.values=this.config.transform(e)}computeInitial(){const e=this.state;e._initial=e._values,e.initial=e.values}compute(e){const{state:t,config:n,shared:s}=this;t.args=this.args;let a=0;if(e&&(t.event=e,n.preventDefault&&e.cancelable&&t.event.preventDefault(),t.type=e.type,s.touches=this.ctrl.pointerIds.size||this.ctrl.touchIds.size,s.locked=!!document.pointerLockElement,Object.assign(s,rt(e)),s.down=s.pressed=s.buttons%2===1||s.touches>0,a=e.timeStamp-t.timeStamp,t.timeStamp=e.timeStamp,t.elapsedTime=t.timeStamp-t.startTime),t._active){const g=t._delta.map(Math.abs);C.addTo(t._distance,g)}this.axisIntent&&this.axisIntent(e);const[o,u]=t._movement,[c,h]=n.threshold,{_step:f,values:b}=t;if(n.hasCustomTransform?(f[0]===!1&&(f[0]=Math.abs(o)>=c&&b[0]),f[1]===!1&&(f[1]=Math.abs(u)>=h&&b[1])):(f[0]===!1&&(f[0]=Math.abs(o)>=c&&Math.sign(o)*c),f[1]===!1&&(f[1]=Math.abs(u)>=h&&Math.sign(u)*h)),t.intentional=f[0]!==!1||f[1]!==!1,!t.intentional)return;const p=[0,0];if(n.hasCustomTransform){const[g,W]=b;p[0]=f[0]!==!1?g-f[0]:0,p[1]=f[1]!==!1?W-f[1]:0}else p[0]=f[0]!==!1?o-f[0]:0,p[1]=f[1]!==!1?u-f[1]:0;this.restrictToAxis&&!t._blocked&&this.restrictToAxis(p);const D=t.offset,I=t._active&&!t._blocked||t.active;I&&(t.first=t._active&&!t.active,t.last=!t._active&&t.active,t.active=s[this.ingKey]=t._active,e&&(t.first&&("bounds"in n&&(t._bounds=ne(n.bounds,t)),this.setup&&this.setup()),t.movement=p,this.computeOffset()));const[A,w]=t.offset,[[S,T],[k,x]]=t._bounds;t.overflow=[A<S?-1:A>T?1:0,w<k?-1:w>x?1:0],t._movementBound[0]=t.overflow[0]?t._movementBound[0]===!1?t._movement[0]:t._movementBound[0]:!1,t._movementBound[1]=t.overflow[1]?t._movementBound[1]===!1?t._movement[1]:t._movementBound[1]:!1;const K=t._active?n.rubberband||[0,0]:[0,0];if(t.offset=Fe(t._bounds,t.offset,K),t.delta=C.sub(t.offset,D),this.computeMovement(),I&&(!t.last||a>it)){t.delta=C.sub(t.offset,D);const g=t.delta.map(Math.abs);C.addTo(t.distance,g),t.direction=t.delta.map(Math.sign),t._direction=t._delta.map(Math.sign),!t.first&&a>0&&(t.velocity=[g[0]/a,g[1]/a],t.timeDelta=a)}}emit(){const e=this.state,t=this.shared,n=this.config;if(e._active||this.clean(),(e._blocked||!e.intentional)&&!e._force&&!n.triggerAllEvents)return;const s=this.handler(y(y(y({},t),e),{},{[this.aliasKey]:e.values}));s!==void 0&&(e.memo=s)}clean(){this.eventStore.clean(),this.timeoutStore.clean()}}function at([r,e],t){const n=Math.abs(r),s=Math.abs(e);if(n>s&&n>t)return"x";if(s>n&&s>t)return"y"}class ct extends ot{constructor(...e){super(...e),$(this,"aliasKey","xy")}reset(){super.reset(),this.state.axis=void 0}init(){this.state.offset=[0,0],this.state.lastOffset=[0,0]}computeOffset(){this.state.offset=C.add(this.state.lastOffset,this.state.movement)}computeMovement(){this.state.movement=C.sub(this.state.offset,this.state.lastOffset)}axisIntent(e){const t=this.state,n=this.config;if(!t.axis&&e){const s=typeof n.axisThreshold=="object"?n.axisThreshold[Ee(e)]:n.axisThreshold;t.axis=at(t._movement,s)}t._blocked=(n.lockDirection||!!n.axis)&&!t.axis||!!n.axis&&n.axis!==t.axis}restrictToAxis(e){if(this.config.axis||this.config.lockDirection)switch(this.state.axis){case"x":e[1]=0;break;case"y":e[0]=0;break}}}const Ce=r=>r,De=.15,ue={enabled(r=!0){return r},eventOptions(r,e,t){return y(y({},t.shared.eventOptions),r)},preventDefault(r=!1){return r},triggerAllEvents(r=!1){return r},rubberband(r=0){switch(r){case!0:return[De,De];case!1:return[0,0];default:return C.toVector(r)}},from(r){if(typeof r=="function")return r;if(r!=null)return C.toVector(r)},transform(r,e,t){const n=r||t.shared.transform;if(this.hasCustomTransform=!!n,process.env.NODE_ENV==="development"){const s=n||Ce;return a=>{const o=s(a);return(!isFinite(o[0])||!isFinite(o[1]))&&console.warn(`[@use-gesture]: config.transform() must produce a valid result, but it was: [${o[0]},${[1]}]`),o}}return n||Ce},threshold(r){return C.toVector(r,0)}};process.env.NODE_ENV==="development"&&Object.assign(ue,{domTarget(r){if(r!==void 0)throw Error("[@use-gesture]: `domTarget` option has been renamed to `target`.");return NaN},lockDirection(r){if(r!==void 0)throw Error("[@use-gesture]: `lockDirection` option has been merged with `axis`. Use it as in `{ axis: 'lock' }`");return NaN},initial(r){if(r!==void 0)throw Error("[@use-gesture]: `initial` option has been renamed to `from`.");return NaN}});const ut=0,Q=y(y({},ue),{},{axis(r,e,{axis:t}){if(this.lockDirection=t==="lock",!this.lockDirection)return t},axisThreshold(r=ut){return r},bounds(r={}){if(typeof r=="function")return a=>Q.bounds(r(a));if("current"in r)return()=>r.current;if(typeof HTMLElement=="function"&&r instanceof HTMLElement)return r;const{left:e=-1/0,right:t=1/0,top:n=-1/0,bottom:s=1/0}=r;return[[e,t],[n,s]]}}),Ae={ArrowRight:(r,e=1)=>[r*e,0],ArrowLeft:(r,e=1)=>[-1*r*e,0],ArrowUp:(r,e=1)=>[0,-1*r*e],ArrowDown:(r,e=1)=>[0,r*e]};class lt extends ct{constructor(...e){super(...e),$(this,"ingKey","dragging")}reset(){super.reset();const e=this.state;e._pointerId=void 0,e._pointerActive=!1,e._keyboardActive=!1,e._preventScroll=!1,e._delayed=!1,e.swipe=[0,0],e.tap=!1,e.canceled=!1,e.cancel=this.cancel.bind(this)}setup(){const e=this.state;if(e._bounds instanceof HTMLElement){const t=e._bounds.getBoundingClientRect(),n=e.currentTarget.getBoundingClientRect(),s={left:t.left-n.left+e.offset[0],right:t.right-n.right+e.offset[0],top:t.top-n.top+e.offset[1],bottom:t.bottom-n.bottom+e.offset[1]};e._bounds=Q.bounds(s)}}cancel(){const e=this.state;e.canceled||(e.canceled=!0,e._active=!1,setTimeout(()=>{this.compute(),this.emit()},0))}setActive(){this.state._active=this.state._pointerActive||this.state._keyboardActive}clean(){this.pointerClean(),this.state._pointerActive=!1,this.state._keyboardActive=!1,super.clean()}pointerDown(e){const t=this.config,n=this.state;if(e.buttons!=null&&(Array.isArray(t.pointerButtons)?!t.pointerButtons.includes(e.buttons):t.pointerButtons!==-1&&t.pointerButtons!==e.buttons))return;const s=this.ctrl.setEventIds(e);t.pointerCapture&&e.target.setPointerCapture(e.pointerId),!(s&&s.size>1&&n._pointerActive)&&(this.start(e),this.setupPointer(e),n._pointerId=ce(e),n._pointerActive=!0,this.computeValues(Se(e)),this.computeInitial(),t.preventScrollAxis&&Ee(e)!=="mouse"?(n._active=!1,this.setupScrollPrevention(e)):t.delay>0?(this.setupDelayTrigger(e),t.triggerAllEvents&&(this.compute(e),this.emit())):this.startPointerDrag(e))}startPointerDrag(e){const t=this.state;t._active=!0,t._preventScroll=!0,t._delayed=!1,this.compute(e),this.emit()}pointerMove(e){const t=this.state,n=this.config;if(!t._pointerActive)return;const s=ce(e);if(t._pointerId!==void 0&&s!==t._pointerId)return;const a=Se(e);if(document.pointerLockElement===e.target?t._delta=[e.movementX,e.movementY]:(t._delta=C.sub(a,t._values),this.computeValues(a)),C.addTo(t._movement,t._delta),this.compute(e),t._delayed&&t.intentional){this.timeoutStore.remove("dragDelay"),t.active=!1,this.startPointerDrag(e);return}if(n.preventScrollAxis&&!t._preventScroll)if(t.axis)if(t.axis===n.preventScrollAxis||n.preventScrollAxis==="xy"){t._active=!1,this.clean();return}else{this.timeoutStore.remove("startPointerDrag"),this.startPointerDrag(e);return}else return;this.emit()}pointerUp(e){this.ctrl.setEventIds(e);try{this.config.pointerCapture&&e.target.hasPointerCapture(e.pointerId)&&e.target.releasePointerCapture(e.pointerId)}catch{process.env.NODE_ENV==="development"&&console.warn("[@use-gesture]: If you see this message, it's likely that you're using an outdated version of `@react-three/fiber`. \n\nPlease upgrade to the latest version.")}const t=this.state,n=this.config;if(!t._active||!t._pointerActive)return;const s=ce(e);if(t._pointerId!==void 0&&s!==t._pointerId)return;this.state._pointerActive=!1,this.setActive(),this.compute(e);const[a,o]=t._distance;if(t.tap=a<=n.tapsThreshold&&o<=n.tapsThreshold,t.tap&&n.filterTaps)t._force=!0;else{const[u,c]=t._delta,[h,f]=t._movement,[b,p]=n.swipe.velocity,[D,I]=n.swipe.distance,A=n.swipe.duration;if(t.elapsedTime<A){const w=Math.abs(u/t.timeDelta),S=Math.abs(c/t.timeDelta);w>b&&Math.abs(h)>D&&(t.swipe[0]=Math.sign(u)),S>p&&Math.abs(f)>I&&(t.swipe[1]=Math.sign(c))}}this.emit()}pointerClick(e){!this.state.tap&&e.detail>0&&(e.preventDefault(),e.stopPropagation())}setupPointer(e){const t=this.config,n=t.device;if(process.env.NODE_ENV==="development")try{if(n==="pointer"&&t.preventScrollDelay===void 0){const s="uv"in e?e.sourceEvent.currentTarget:e.currentTarget;window.getComputedStyle(s).touchAction==="auto"&&console.warn("[@use-gesture]: The drag target has its `touch-action` style property set to `auto`. It is recommended to add `touch-action: 'none'` so that the drag gesture behaves correctly on touch-enabled devices. For more information read this: https://use-gesture.netlify.app/docs/extras/#touch-action.\n\nThis message will only show in development mode. It won't appear in production. If this is intended, you can ignore it.",s)}}catch{}t.pointerLock&&e.currentTarget.requestPointerLock(),t.pointerCapture||(this.eventStore.add(this.sharedConfig.window,n,"change",this.pointerMove.bind(this)),this.eventStore.add(this.sharedConfig.window,n,"end",this.pointerUp.bind(this)),this.eventStore.add(this.sharedConfig.window,n,"cancel",this.pointerUp.bind(this)))}pointerClean(){this.config.pointerLock&&document.pointerLockElement===this.state.currentTarget&&document.exitPointerLock()}preventScroll(e){this.state._preventScroll&&e.cancelable&&e.preventDefault()}setupScrollPrevention(e){this.state._preventScroll=!1,ft(e);const t=this.eventStore.add(this.sharedConfig.window,"touch","change",this.preventScroll.bind(this),{passive:!1});this.eventStore.add(this.sharedConfig.window,"touch","end",t),this.eventStore.add(this.sharedConfig.window,"touch","cancel",t),this.timeoutStore.add("startPointerDrag",this.startPointerDrag.bind(this),this.config.preventScrollDelay,e)}setupDelayTrigger(e){this.state._delayed=!0,this.timeoutStore.add("dragDelay",()=>{this.state._step=[0,0],this.startPointerDrag(e)},this.config.delay)}keyDown(e){const t=Ae[e.key];if(t){const n=this.state,s=e.shiftKey?10:e.altKey?.1:1;this.start(e),n._delta=t(this.config.keyboardDisplacement,s),n._keyboardActive=!0,C.addTo(n._movement,n._delta),this.compute(e),this.emit()}}keyUp(e){e.key in Ae&&(this.state._keyboardActive=!1,this.setActive(),this.compute(e),this.emit())}bind(e){const t=this.config.device;e(t,"start",this.pointerDown.bind(this)),this.config.pointerCapture&&(e(t,"change",this.pointerMove.bind(this)),e(t,"end",this.pointerUp.bind(this)),e(t,"cancel",this.pointerUp.bind(this)),e("lostPointerCapture","",this.pointerUp.bind(this))),this.config.keys&&(e("key","down",this.keyDown.bind(this)),e("key","up",this.keyUp.bind(this))),this.config.filterTaps&&e("click","",this.pointerClick.bind(this),{capture:!0,passive:!1})}}function ft(r){"persist"in r&&typeof r.persist=="function"&&r.persist()}const Z=typeof window<"u"&&window.document&&window.document.createElement;function $e(){return Z&&"ontouchstart"in window}function dt(){return $e()||Z&&window.navigator.maxTouchPoints>1}function ht(){return Z&&"onpointerdown"in window}function pt(){return Z&&"exitPointerLock"in window.document}function gt(){try{return"constructor"in GestureEvent}catch{return!1}}const N={isBrowser:Z,gesture:gt(),touch:$e(),touchscreen:dt(),pointer:ht(),pointerLock:pt()},mt=250,vt=180,yt=.5,bt=50,_t=250,wt=10,Oe={mouse:0,touch:0,pen:8},Pe=y(y({},Q),{},{device(r,e,{pointer:{touch:t=!1,lock:n=!1,mouse:s=!1}={}}){return this.pointerLock=n&&N.pointerLock,N.touch&&t?"touch":this.pointerLock?"mouse":N.pointer&&!s?"pointer":N.touch?"touch":"mouse"},preventScrollAxis(r,e,{preventScroll:t}){if(this.preventScrollDelay=typeof t=="number"?t:t||t===void 0&&r?mt:void 0,!(!N.touchscreen||t===!1))return r||(t!==void 0?"y":void 0)},pointerCapture(r,e,{pointer:{capture:t=!0,buttons:n=1,keys:s=!0}={}}){return this.pointerButtons=n,this.keys=s,!this.pointerLock&&this.device==="pointer"&&t},threshold(r,e,{filterTaps:t=!1,tapsThreshold:n=3,axis:s=void 0}){const a=C.toVector(r,t?n:s?1:0);return this.filterTaps=t,this.tapsThreshold=n,a},swipe({velocity:r=yt,distance:e=bt,duration:t=_t}={}){return{velocity:this.transform(C.toVector(r)),distance:this.transform(C.toVector(e)),duration:t}},delay(r=0){switch(r){case!0:return vt;case!1:return 0;default:return r}},axisThreshold(r){return r?y(y({},Oe),r):Oe},keyboardDisplacement(r=wt){return r}});process.env.NODE_ENV==="development"&&Object.assign(Pe,{useTouch(r){if(r!==void 0)throw Error("[@use-gesture]: `useTouch` option has been renamed to `pointer.touch`. Use it as in `{ pointer: { touch: true } }`.");return NaN},experimental_preventWindowScrollY(r){if(r!==void 0)throw Error("[@use-gesture]: `experimental_preventWindowScrollY` option has been renamed to `preventScroll`.");return NaN},swipeVelocity(r){if(r!==void 0)throw Error("[@use-gesture]: `swipeVelocity` option has been renamed to `swipe.velocity`. Use it as in `{ swipe: { velocity: 0.5 } }`.");return NaN},swipeDistance(r){if(r!==void 0)throw Error("[@use-gesture]: `swipeDistance` option has been renamed to `swipe.distance`. Use it as in `{ swipe: { distance: 50 } }`.");return NaN},swipeDuration(r){if(r!==void 0)throw Error("[@use-gesture]: `swipeDuration` option has been renamed to `swipe.duration`. Use it as in `{ swipe: { duration: 250 } }`.");return NaN}}),y(y({},ue),{},{device(r,e,{shared:t,pointer:{touch:n=!1}={}}){if(t.target&&!N.touch&&N.gesture)return"gesture";if(N.touch&&n)return"touch";if(N.touchscreen){if(N.pointer)return"pointer";if(N.touch)return"touch"}},bounds(r,e,{scaleBounds:t={},angleBounds:n={}}){const s=o=>{const u=ke(ne(t,o),{min:-1/0,max:1/0});return[u.min,u.max]},a=o=>{const u=ke(ne(n,o),{min:-1/0,max:1/0});return[u.min,u.max]};return typeof t!="function"&&typeof n!="function"?[s(),a()]:o=>[s(o),a(o)]},threshold(r,e,t){return this.lockDirection=t.axis==="lock",C.toVector(r,this.lockDirection?[.1,3]:0)},modifierKey(r){return r===void 0?"ctrlKey":r},pinchOnWheel(r=!0){return r}}),y(y({},Q),{},{mouseOnly:(r=!0)=>r}),y(y({},Q),{},{mouseOnly:(r=!0)=>r});const Ne=new Map,le=new Map;function Tt(r){Ne.set(r.key,r.engine),le.set(r.key,r.resolver)}const xt={key:"drag",engine:lt,resolver:Pe};function Et(r,e){if(r==null)return{};var t={},n=Object.keys(r),s,a;for(a=0;a<n.length;a++)s=n[a],!(e.indexOf(s)>=0)&&(t[s]=r[s]);return t}function It(r,e){if(r==null)return{};var t=Et(r,e),n,s;if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(r);for(s=0;s<a.length;s++)n=a[s],!(e.indexOf(n)>=0)&&Object.prototype.propertyIsEnumerable.call(r,n)&&(t[n]=r[n])}return t}const St={target(r){if(r)return()=>"current"in r?r.current:r},enabled(r=!0){return r},window(r=N.isBrowser?window:void 0){return r},eventOptions({passive:r=!0,capture:e=!1}={}){return{passive:r,capture:e}},transform(r){return r}},kt=["target","eventOptions","window","enabled","transform"];function se(r={},e){const t={};for(const[n,s]of Object.entries(e))switch(typeof s){case"function":if(process.env.NODE_ENV==="development"){const a=s.call(t,r[n],n,r);Number.isNaN(a)||(t[n]=a)}else t[n]=s.call(t,r[n],n,r);break;case"object":t[n]=se(r[n],s);break;case"boolean":s&&(t[n]=r[n]);break}return t}function Ct(r,e,t={}){const n=r,{target:s,eventOptions:a,window:o,enabled:u,transform:c}=n,h=It(n,kt);if(t.shared=se({target:s,eventOptions:a,window:o,enabled:u,transform:c},St),e){const f=le.get(e);t[e]=se(y({shared:t.shared},h),f)}else for(const f in h){const b=le.get(f);if(b)t[f]=se(y({shared:t.shared},h[f]),b);else if(process.env.NODE_ENV==="development"&&!["drag","pinch","scroll","wheel","move","hover"].includes(f)){if(f==="domTarget")throw Error("[@use-gesture]: `domTarget` option has been renamed to `target`.");console.warn(`[@use-gesture]: Unknown config key \`${f}\` was used. Please read the documentation for further information.`)}}return t}class Me{constructor(e,t){$(this,"_listeners",new Set),this._ctrl=e,this._gestureKey=t}add(e,t,n,s,a){const o=this._listeners,u=Qe(t,n),c=this._gestureKey?this._ctrl.config[this._gestureKey].eventOptions:{},h=y(y({},c),a);e.addEventListener(u,s,h);const f=()=>{e.removeEventListener(u,s,h),o.delete(f)};return o.add(f),f}clean(){this._listeners.forEach(e=>e()),this._listeners.clear()}}class Dt{constructor(){$(this,"_timeouts",new Map)}add(e,t,n=140,...s){this.remove(e),this._timeouts.set(e,window.setTimeout(t,n,...s))}remove(e){const t=this._timeouts.get(e);t&&window.clearTimeout(t)}clean(){this._timeouts.forEach(e=>void window.clearTimeout(e)),this._timeouts.clear()}}class At{constructor(e){$(this,"gestures",new Set),$(this,"_targetEventStore",new Me(this)),$(this,"gestureEventStores",{}),$(this,"gestureTimeoutStores",{}),$(this,"handlers",{}),$(this,"config",{}),$(this,"pointerIds",new Set),$(this,"touchIds",new Set),$(this,"state",{shared:{shiftKey:!1,metaKey:!1,ctrlKey:!1,altKey:!1}}),$t(this,e)}setEventIds(e){if(re(e))return this.touchIds=new Set(tt(e)),this.touchIds;if("pointerId"in e)return e.type==="pointerup"||e.type==="pointercancel"?this.pointerIds.delete(e.pointerId):e.type==="pointerdown"&&this.pointerIds.add(e.pointerId),this.pointerIds}applyHandlers(e,t){this.handlers=e,this.nativeHandlers=t}applyConfig(e,t){this.config=Ct(e,t,this.config)}clean(){this._targetEventStore.clean();for(const e of this.gestures)this.gestureEventStores[e].clean(),this.gestureTimeoutStores[e].clean()}effect(){return this.config.shared.target&&this.bind(),()=>this._targetEventStore.clean()}bind(...e){const t=this.config.shared,n={};let s;if(!(t.target&&(s=t.target(),!s))){if(t.enabled){for(const o of this.gestures){const u=this.config[o],c=Le(n,u.eventOptions,!!s);if(u.enabled){const h=Ne.get(o);new h(this,e,o).bind(c)}}const a=Le(n,t.eventOptions,!!s);for(const o in this.nativeHandlers)a(o,"",u=>this.nativeHandlers[o](y(y({},this.state.shared),{},{event:u,args:e})),void 0,!0)}for(const a in n)n[a]=st(...n[a]);if(!s)return n;for(const a in n){const{device:o,capture:u,passive:c}=Je(a);this._targetEventStore.add(s,o,"",n[a],{capture:u,passive:c})}}}}function Y(r,e){r.gestures.add(e),r.gestureEventStores[e]=new Me(r,e),r.gestureTimeoutStores[e]=new Dt}function $t(r,e){e.drag&&Y(r,"drag"),e.wheel&&Y(r,"wheel"),e.scroll&&Y(r,"scroll"),e.move&&Y(r,"move"),e.pinch&&Y(r,"pinch"),e.hover&&Y(r,"hover")}const Le=(r,e,t)=>(n,s,a,o={},u=!1)=>{var c,h;const f=(c=o.capture)!==null&&c!==void 0?c:e.capture,b=(h=o.passive)!==null&&h!==void 0?h:e.passive;let p=u?n:qe(n,s,f);t&&b&&(p+="Passive"),r[p]=r[p]||[],r[p].push(a)};function Ot(r,e={},t,n){const s=d.useMemo(()=>new At(r),[]);if(s.applyHandlers(r,n),s.applyConfig(e,t),d.useEffect(s.effect.bind(s)),d.useEffect(()=>s.clean.bind(s),[]),e.target===void 0)return s.bind.bind(s)}function Pt(r,e){return Tt(xt),Ot({drag:r},e||{},"drag")}function Nt(r){const{type:e,actionType:t,toIndex:n,itemsLength:s,withLoop:a,scrollAmount:o,totalAvailable:u}=r;let c=r.currentActive,h=r.fromValueRaw,f=!1,b=!1;e==="next"&&(c+=1),e==="prev"&&(c=c===0?s-1:c-1),n!==void 0&&(c=n);let p=0;e==="next"&&(p=-(c*o),a&&c===s&&(c=0,h=h+o*s,p=0),!a&&(Math.abs(p)>=u||c===s-1)&&(b=!0,p=-u)),e==="prev"&&(p=-(c*o),c===s-1&&(h=h-s*o),!a&&p>=0&&(f=!0,p=0)),t==="resize"&&(p=-(c*o),a||(c===0&&(f=!0),(c===s-1||Math.abs(p)>=u)&&(b=!0,Math.abs(p)>=u&&u>0&&(p=-u))));const D=a?c%s:c,I=a?s+c%s:c;return{newActive:c,fromValue:h,toValue:p,startReached:f,endReached:b,logicalIndex:D,realTrackIndex:I}}function ee(r,e,t){return e==="x"?`translate3d(calc(${r}px + var(--${t}-offset-modifier)), 0px, 0px)`:`translate3d(0px, calc(${r}px + var(--${t}-offset-modifier)), 0px)`}function Mt(){const r=d.useRef(null);r.current===null&&(r.current=new Set);const e=d.useRef(null);return e.current===null&&(e.current={useListenToCustomEvent(t){d.useEffect(()=>{const n=r.current;return n.add(t),()=>{n.delete(t)}},[t])},emitEvent(t){const n=r.current;!n||n.size===0||n.forEach(s=>s(t))}}),e.current}function Lt({init:r=!0,items:e,withLoop:t=!1,id:n,gutter:s=[{breakpoint:0,gutter:0,startEndGutter:0}],itemsPerSlide:a=[{breakpoint:0,itemsPerSlide:1}],carouselAxis:o="x",startingPosition:u="start",enableGestures:c=!0,slideWhenDragThresholdIsReached:h=!0,slideType:f="item",initialActiveItem:b=0,renderWindow:p,renderPlaceholder:D}){const I=d.useRef(r),A=d.useRef(null),w=d.useRef(null),S=d.useRef(0),T=d.useRef(0),k=d.useRef(!t),x=d.useRef(!1),K=d.useRef(0),g=d.useRef(0),W=d.useRef(0),M=d.useRef(e);M.current=e;const te=d.useRef(t);te.current=t;const ie=d.useRef(!1),U=d.useRef(null),j=d.useRef(null),B=d.useRef(null),F=d.useRef(null),H=d.useRef({width:0,height:0});function Ve(i){if(i===void 0)return 0;if(typeof i=="number")return e[i]?i:(console.warn(`initialActiveItem: item at index ${i} doesn't exist.`),0);const l=e.findIndex(m=>m.id===i);return l<0?(console.warn(`initialActiveItem: item with id "${i}" doesn't exist.`),0):l}const oe=ae.useSpringRef(),de=ae.useSpring({value:0,ref:oe,onChange({value:i}){w.current.style.transform=ee(i.value,o,n)}}),Bt=t?e.length*3:e.length,{useListenToCustomEvent:je,emitEvent:q}=Mt();function Be(i){if(!i||i.length===0)return null;let l=null,m=-1/0;for(const _ of i)(_.media?window.matchMedia(_.media).matches:window.innerWidth>=_.breakpoint)&&_.breakpoint>=m&&(l=_,m=_.breakpoint);return l}function Ue(){const{totalGutterCssVar:i}=ze();return i}function Ut(){const i=Be(a);return(i==null?void 0:i.itemsPerSlide)||1}function he(i){I.current&&(x.current||X({type:"next",toIndex:i,actionType:"click"}))}function pe(i){I.current&&(k.current||X({type:"prev",toIndex:i,actionType:"click"}))}function X({type:i,shouldAnimate:l=!0,toIndex:m,actionType:_}){var G,z;const O=!l;k.current=!1,x.current=!1;const v=Nt({type:i,actionType:_,toIndex:m,currentActive:g.current,itemsLength:e.length,withLoop:t,scrollAmount:T.current,totalAvailable:i==="next"||_==="resize"?ge(t?T.current*(e.length*2):0):0,fromValueRaw:de.value.get()});W.current=O?v.newActive:g.current,g.current=v.newActive,k.current=v.startReached,x.current=v.endReached,S.current=v.toValue,q(_==="resize"?{eventName:"onResize",sliceActionType:_,slideDirection:i,currentItem:{id:((G=M.current.at(v.logicalIndex))==null?void 0:G.id)??"",index:v.logicalIndex,trackIndex:v.realTrackIndex,startReached:k.current,endReached:x.current}}:{eventName:"onSlideStartChange",sliceActionType:_,slideDirection:i,nextItem:{index:v.logicalIndex,id:((z=M.current.at(v.logicalIndex))==null?void 0:z.id)??"",trackIndex:v.realTrackIndex,startReached:k.current,endReached:x.current}}),O&&w.current&&(w.current.style.transform=ee(v.toValue,o,n)),oe.start({immediate:O,from:{value:v.fromValue},to:{value:v.toValue},onChange({value:J}){w.current.style.transform=ee(J.value,o,n)},onRest({finished:J}){var P;if(J){const E=M.current,L=E.length,ve=t?g.current%L:g.current,ye=t?(ve%L+L)%L:ve,Xt=t?L+ye:g.current;W.current=g.current,q({eventName:"onSlideChangeComplete",sliceActionType:_,slideDirection:i,currentItem:{index:ye,id:((P=E.at(ye))==null?void 0:P.id)??"",trackIndex:Xt,startReached:k.current,endReached:x.current}})}}})}function zt(){const i=w.current;let l=0;return f==="item"?l=i.children[0].getBoundingClientRect()[o==="x"?"width":"height"]+Ue():l=i.getBoundingClientRect()[o==="x"?"width":"height"]+Ue(),l}function ge(i){const l=w.current;return l[o==="x"?"scrollWidth":"scrollHeight"]-l.getBoundingClientRect()[o==="x"?"width":"height"]-i}function ze(){const i=Be(s);return{totalGutterCssVar:(i==null?void 0:i.gutter)||0,totalStartEndGutterCssVar:((i==null?void 0:i.startEndGutter)||0)*2}}d.useEffect(()=>{function i(P){const E=Ut();switch(P){case"start":return 0;case"middle-start":return Math.floor((E-1)*.25);case"center":return Math.floor((E-1)*.5);case"middle-end":return Math.floor((E-1)*.75);case"end":return E-1;default:return 0}}function l(){T.current=zt(),K.current=T.current/4;const{totalStartEndGutterCssVar:P}=ze();let E=0;t&&(E=T.current*e.length),E-=T.current*i(u),E-=P/2,A.current.style.setProperty(`--${n}-offset-modifier`,`${-E}px`),t&&w.current&&(o==="x"?w.current.style.left="0px":w.current.style.top="0px")}function m(P){if(A.current&&(l(),P)){const E=Ve(b),L=t?e.length+E%e.length:E;q({eventName:"onInit",index:E,trackIndex:L})}}function _(){m(),X({type:"resize",toIndex:g.current,shouldAnimate:!1,actionType:"resize"})}function O(){B.current!==null&&(clearTimeout(B.current),B.current=null),F.current!==null&&(cancelAnimationFrame(F.current),F.current=null)}function v(P){F.current===null&&(F.current=requestAnimationFrame(()=>{F.current=null;const E=A.current;if(!E)return;const L=E.getBoundingClientRect();(L.width!==H.current.width||L.height!==H.current.height)&&(H.current={width:L.width,height:L.height},_()),P&&(B.current=window.setTimeout(()=>{B.current=null,v(!1)},400))}))}function G(){O(),v(!0)}function z(){O(),B.current=window.setTimeout(()=>{B.current=null,H.current={width:0,height:0},v(!0)},250)}function J(){document.visibilityState==="visible"&&(O(),H.current={width:0,height:0},v(!0))}if(r){if(I.current=!0,ie.current)_();else if(m(!0),ie.current=!0,A.current){const E=A.current.getBoundingClientRect();H.current={width:E.width,height:E.height}}const P=window.visualViewport??window;return P.addEventListener("resize",G),window.addEventListener("orientationchange",z),document.addEventListener("visibilitychange",J),()=>{P.removeEventListener("resize",G),window.removeEventListener("orientationchange",z),document.removeEventListener("visibilitychange",J),O()}}},[r,n,o,t]),d.useEffect(()=>{const i=Ve(b),l=e.length,m=t?g.current%l:g.current,_=t&&l>0?(m%l+l)%l:m;r&&i!==_&&X({type:"next",toIndex:i,actionType:"resize",shouldAnimate:!1})},[r,b]);const me=c;function Kt(){if(j.current!==null&&(cancelAnimationFrame(j.current),j.current=null),U.current){const i=U.current;U.current=null,q(i)}}function Ft(i){U.current=i,j.current===null&&(j.current=requestAnimationFrame(()=>{j.current=null;const l=U.current;U.current=null,l&&q(l)}))}d.useEffect(()=>()=>{j.current!==null&&(cancelAnimationFrame(j.current),j.current=null),U.current=null},[]);const Gt=Pt(i=>{if(!I.current)return;const l=i.dragging,m=i.offset[o==="x"?0:1],_=i.movement[o==="x"?0:1],O=_>K.current,v=_<-K.current,G=i.velocity;l&&(Ft({...i,eventName:"onDrag",slideActionType:"drag"}),oe.start({value:m,immediate:!0,config:{velocity:G},onChange({value:z}){w.current.style.transform=ee(z.value,o,n)}}),h&&(O||v)&&i.cancel()),i.last&&(Kt(),O?(X({actionType:"drag",type:"prev"}),i.cancel()):v?(X({actionType:"drag",type:"next"}),i.cancel()):(oe.start({value:S.current,config:{velocity:G},onChange({value:z}){w.current.style.transform=ee(z.value,o,n)}}),i.cancel()))},{enabled:me,axis:o,rubberband:!t,...t?{}:{bounds:()=>({right:0,left:-ge(0),top:-ge(0),bottom:0})},from:()=>[de.value.get(),de.value.get()]}),Wt=d.useCallback(i=>{var v;const l=M.current,_=te.current?l.length+g.current%l.length:g.current;if(typeof i=="number")return _===i;const O=g.current%l.length;return i===((v=l[O])==null?void 0:v.id)},[]),Yt=d.useMemo(()=>Array.from({length:e.length},(i,l)=>()=>{const m=t?g.current%e.length:g.current;return t?l===(m+1)%e.length:m+1>=e.length?!1:l===m+1}),[e.length,t]),Ht=d.useMemo(()=>Array.from({length:e.length},(i,l)=>()=>{const m=t?g.current%e.length:g.current;return t?l===(m-1+e.length)%e.length:m-1<0?!1:l===m-1}),[e.length,t]),qt=d.useMemo(()=>`
+(function(M,N){typeof exports=="object"&&typeof module<"u"?N(exports,require("react/jsx-runtime"),require("@react-spring/web"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","@react-spring/web","react"],N):(M=typeof globalThis<"u"?globalThis:M||self,N(M["react-spring-carousel"]={},M["react/jsx-runtime"],M["@react-spring/web"],M.React))})(this,function(M,N,ie,d){"use strict";function Fe(r,e,t){return Math.max(e,Math.min(r,t))}const T={toVector(r,e){return r===void 0&&(r=e),Array.isArray(r)?r:[r,r]},add(r,e){return[r[0]+e[0],r[1]+e[1]]},sub(r,e){return[r[0]-e[0],r[1]-e[1]]},addTo(r,e){r[0]+=e[0],r[1]+=e[1]},subTo(r,e){r[0]-=e[0],r[1]-=e[1]}};function me(r,e,t){return e===0||Math.abs(e)===1/0?Math.pow(r,t*5):r*e*t/(e+t*r)}function ve(r,e,t,n=.15){return n===0?Fe(r,e,t):r<e?-me(e-r,t-e,n)+e:r>t?+me(r-t,t-e,n)+t:r}function Ge(r,[e,t],[n,s]){const[[a,o],[u,c]]=r;return[ve(e,a,o,n),ve(t,u,c,s)]}function We(r,e){if(typeof r!="object"||r===null)return r;var t=r[Symbol.toPrimitive];if(t!==void 0){var n=t.call(r,e);if(typeof n!="object")return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return(e==="string"?String:Number)(r)}function Ye(r){var e=We(r,"string");return typeof e=="symbol"?e:String(e)}function D(r,e,t){return e=Ye(e),e in r?Object.defineProperty(r,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):r[e]=t,r}function ye(r,e){var t=Object.keys(r);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(r);e&&(n=n.filter(function(s){return Object.getOwnPropertyDescriptor(r,s).enumerable})),t.push.apply(t,n)}return t}function y(r){for(var e=1;e<arguments.length;e++){var t=arguments[e]!=null?arguments[e]:{};e%2?ye(Object(t),!0).forEach(function(n){D(r,n,t[n])}):Object.getOwnPropertyDescriptors?Object.defineProperties(r,Object.getOwnPropertyDescriptors(t)):ye(Object(t)).forEach(function(n){Object.defineProperty(r,n,Object.getOwnPropertyDescriptor(t,n))})}return r}const be={pointer:{start:"down",change:"move",end:"up"},mouse:{start:"down",change:"move",end:"up"},touch:{start:"start",change:"move",end:"end"},gesture:{start:"start",change:"change",end:"end"}};function _e(r){return r?r[0].toUpperCase()+r.slice(1):""}const He=["enter","leave"];function qe(r=!1,e){return r&&!He.includes(e)}function Xe(r,e="",t=!1){const n=be[r],s=n&&n[e]||e;return"on"+_e(r)+_e(s)+(qe(t,s)?"Capture":"")}const Je=["gotpointercapture","lostpointercapture"];function Qe(r){let e=r.substring(2).toLowerCase();const t=!!~e.indexOf("passive");t&&(e=e.replace("passive",""));const n=Je.includes(e)?"capturecapture":"capture",s=!!~e.indexOf(n);return s&&(e=e.replace("capture","")),{device:e,capture:s,passive:t}}function Ze(r,e=""){const t=be[r],n=t&&t[e]||e;return r+n}function te(r){return"touches"in r}function we(r){return te(r)?"touch":"pointerType"in r?r.pointerType:"mouse"}function et(r){return Array.from(r.touches).filter(e=>{var t,n;return e.target===r.currentTarget||((t=r.currentTarget)===null||t===void 0||(n=t.contains)===null||n===void 0?void 0:n.call(t,e.target))})}function tt(r){return r.type==="touchend"||r.type==="touchcancel"?r.changedTouches:r.targetTouches}function Te(r){return te(r)?tt(r)[0]:r}function rt(r){return et(r).map(e=>e.identifier)}function oe(r){const e=Te(r);return te(r)?e.identifier:e.pointerId}function xe(r){const e=Te(r);return[e.clientX,e.clientY]}function nt(r){const e={};if("buttons"in r&&(e.buttons=r.buttons),"shiftKey"in r){const{shiftKey:t,altKey:n,metaKey:s,ctrlKey:a}=r;Object.assign(e,{shiftKey:t,altKey:n,metaKey:s,ctrlKey:a})}return e}function re(r,...e){return typeof r=="function"?r(...e):r}function st(){}function it(...r){return r.length===0?st:r.length===1?r[0]:function(){let e;for(const t of r)e=t.apply(this,arguments)||e;return e}}function Ee(r,e){return Object.assign({},e,r||{})}const ot=32;class at{constructor(e,t,n){this.ctrl=e,this.args=t,this.key=n,this.state||(this.state={},this.computeValues([0,0]),this.computeInitial(),this.init&&this.init(),this.reset())}get state(){return this.ctrl.state[this.key]}set state(e){this.ctrl.state[this.key]=e}get shared(){return this.ctrl.state.shared}get eventStore(){return this.ctrl.gestureEventStores[this.key]}get timeoutStore(){return this.ctrl.gestureTimeoutStores[this.key]}get config(){return this.ctrl.config[this.key]}get sharedConfig(){return this.ctrl.config.shared}get handler(){return this.ctrl.handlers[this.key]}reset(){const{state:e,shared:t,ingKey:n,args:s}=this;t[n]=e._active=e.active=e._blocked=e._force=!1,e._step=[!1,!1],e.intentional=!1,e._movement=[0,0],e._distance=[0,0],e._direction=[0,0],e._delta=[0,0],e._bounds=[[-1/0,1/0],[-1/0,1/0]],e.args=s,e.axis=void 0,e.memo=void 0,e.elapsedTime=e.timeDelta=0,e.direction=[0,0],e.distance=[0,0],e.overflow=[0,0],e._movementBound=[!1,!1],e.velocity=[0,0],e.movement=[0,0],e.delta=[0,0],e.timeStamp=0}start(e){const t=this.state,n=this.config;t._active||(this.reset(),this.computeInitial(),t._active=!0,t.target=e.target,t.currentTarget=e.currentTarget,t.lastOffset=n.from?re(n.from,t):t.offset,t.offset=t.lastOffset,t.startTime=t.timeStamp=e.timeStamp)}computeValues(e){const t=this.state;t._values=e,t.values=this.config.transform(e)}computeInitial(){const e=this.state;e._initial=e._values,e.initial=e.values}compute(e){const{state:t,config:n,shared:s}=this;t.args=this.args;let a=0;if(e&&(t.event=e,n.preventDefault&&e.cancelable&&t.event.preventDefault(),t.type=e.type,s.touches=this.ctrl.pointerIds.size||this.ctrl.touchIds.size,s.locked=!!document.pointerLockElement,Object.assign(s,nt(e)),s.down=s.pressed=s.buttons%2===1||s.touches>0,a=e.timeStamp-t.timeStamp,t.timeStamp=e.timeStamp,t.elapsedTime=t.timeStamp-t.startTime),t._active){const C=t._delta.map(Math.abs);T.addTo(t._distance,C)}this.axisIntent&&this.axisIntent(e);const[o,u]=t._movement,[c,p]=n.threshold,{_step:f,values:_}=t;if(n.hasCustomTransform?(f[0]===!1&&(f[0]=Math.abs(o)>=c&&_[0]),f[1]===!1&&(f[1]=Math.abs(u)>=p&&_[1])):(f[0]===!1&&(f[0]=Math.abs(o)>=c&&Math.sign(o)*c),f[1]===!1&&(f[1]=Math.abs(u)>=p&&Math.sign(u)*p)),t.intentional=f[0]!==!1||f[1]!==!1,!t.intentional)return;const h=[0,0];if(n.hasCustomTransform){const[C,V]=_;h[0]=f[0]!==!1?C-f[0]:0,h[1]=f[1]!==!1?V-f[1]:0}else h[0]=f[0]!==!1?o-f[0]:0,h[1]=f[1]!==!1?u-f[1]:0;this.restrictToAxis&&!t._blocked&&this.restrictToAxis(h);const x=t.offset,E=t._active&&!t._blocked||t.active;E&&(t.first=t._active&&!t.active,t.last=!t._active&&t.active,t.active=s[this.ingKey]=t._active,e&&(t.first&&("bounds"in n&&(t._bounds=re(n.bounds,t)),this.setup&&this.setup()),t.movement=h,this.computeOffset()));const[z,L]=t.offset,[[$,O],[k,U]]=t._bounds;t.overflow=[z<$?-1:z>O?1:0,L<k?-1:L>U?1:0],t._movementBound[0]=t.overflow[0]?t._movementBound[0]===!1?t._movement[0]:t._movementBound[0]:!1,t._movementBound[1]=t.overflow[1]?t._movementBound[1]===!1?t._movement[1]:t._movementBound[1]:!1;const K=t._active?n.rubberband||[0,0]:[0,0];if(t.offset=Ge(t._bounds,t.offset,K),t.delta=T.sub(t.offset,x),this.computeMovement(),E&&(!t.last||a>ot)){t.delta=T.sub(t.offset,x);const C=t.delta.map(Math.abs);T.addTo(t.distance,C),t.direction=t.delta.map(Math.sign),t._direction=t._delta.map(Math.sign),!t.first&&a>0&&(t.velocity=[C[0]/a,C[1]/a],t.timeDelta=a)}}emit(){const e=this.state,t=this.shared,n=this.config;if(e._active||this.clean(),(e._blocked||!e.intentional)&&!e._force&&!n.triggerAllEvents)return;const s=this.handler(y(y(y({},t),e),{},{[this.aliasKey]:e.values}));s!==void 0&&(e.memo=s)}clean(){this.eventStore.clean(),this.timeoutStore.clean()}}function ct([r,e],t){const n=Math.abs(r),s=Math.abs(e);if(n>s&&n>t)return"x";if(s>n&&s>t)return"y"}class ut extends at{constructor(...e){super(...e),D(this,"aliasKey","xy")}reset(){super.reset(),this.state.axis=void 0}init(){this.state.offset=[0,0],this.state.lastOffset=[0,0]}computeOffset(){this.state.offset=T.add(this.state.lastOffset,this.state.movement)}computeMovement(){this.state.movement=T.sub(this.state.offset,this.state.lastOffset)}axisIntent(e){const t=this.state,n=this.config;if(!t.axis&&e){const s=typeof n.axisThreshold=="object"?n.axisThreshold[we(e)]:n.axisThreshold;t.axis=ct(t._movement,s)}t._blocked=(n.lockDirection||!!n.axis)&&!t.axis||!!n.axis&&n.axis!==t.axis}restrictToAxis(e){if(this.config.axis||this.config.lockDirection)switch(this.state.axis){case"x":e[1]=0;break;case"y":e[0]=0;break}}}const Ie=r=>r,Se=.15,ae={enabled(r=!0){return r},eventOptions(r,e,t){return y(y({},t.shared.eventOptions),r)},preventDefault(r=!1){return r},triggerAllEvents(r=!1){return r},rubberband(r=0){switch(r){case!0:return[Se,Se];case!1:return[0,0];default:return T.toVector(r)}},from(r){if(typeof r=="function")return r;if(r!=null)return T.toVector(r)},transform(r,e,t){const n=r||t.shared.transform;if(this.hasCustomTransform=!!n,process.env.NODE_ENV==="development"){const s=n||Ie;return a=>{const o=s(a);return(!isFinite(o[0])||!isFinite(o[1]))&&console.warn(`[@use-gesture]: config.transform() must produce a valid result, but it was: [${o[0]},${[1]}]`),o}}return n||Ie},threshold(r){return T.toVector(r,0)}};process.env.NODE_ENV==="development"&&Object.assign(ae,{domTarget(r){if(r!==void 0)throw Error("[@use-gesture]: `domTarget` option has been renamed to `target`.");return NaN},lockDirection(r){if(r!==void 0)throw Error("[@use-gesture]: `lockDirection` option has been merged with `axis`. Use it as in `{ axis: 'lock' }`");return NaN},initial(r){if(r!==void 0)throw Error("[@use-gesture]: `initial` option has been renamed to `from`.");return NaN}});const lt=0,Q=y(y({},ae),{},{axis(r,e,{axis:t}){if(this.lockDirection=t==="lock",!this.lockDirection)return t},axisThreshold(r=lt){return r},bounds(r={}){if(typeof r=="function")return a=>Q.bounds(r(a));if("current"in r)return()=>r.current;if(typeof HTMLElement=="function"&&r instanceof HTMLElement)return r;const{left:e=-1/0,right:t=1/0,top:n=-1/0,bottom:s=1/0}=r;return[[e,t],[n,s]]}}),ke={ArrowRight:(r,e=1)=>[r*e,0],ArrowLeft:(r,e=1)=>[-1*r*e,0],ArrowUp:(r,e=1)=>[0,-1*r*e],ArrowDown:(r,e=1)=>[0,r*e]};class ft extends ut{constructor(...e){super(...e),D(this,"ingKey","dragging")}reset(){super.reset();const e=this.state;e._pointerId=void 0,e._pointerActive=!1,e._keyboardActive=!1,e._preventScroll=!1,e._delayed=!1,e.swipe=[0,0],e.tap=!1,e.canceled=!1,e.cancel=this.cancel.bind(this)}setup(){const e=this.state;if(e._bounds instanceof HTMLElement){const t=e._bounds.getBoundingClientRect(),n=e.currentTarget.getBoundingClientRect(),s={left:t.left-n.left+e.offset[0],right:t.right-n.right+e.offset[0],top:t.top-n.top+e.offset[1],bottom:t.bottom-n.bottom+e.offset[1]};e._bounds=Q.bounds(s)}}cancel(){const e=this.state;e.canceled||(e.canceled=!0,e._active=!1,setTimeout(()=>{this.compute(),this.emit()},0))}setActive(){this.state._active=this.state._pointerActive||this.state._keyboardActive}clean(){this.pointerClean(),this.state._pointerActive=!1,this.state._keyboardActive=!1,super.clean()}pointerDown(e){const t=this.config,n=this.state;if(e.buttons!=null&&(Array.isArray(t.pointerButtons)?!t.pointerButtons.includes(e.buttons):t.pointerButtons!==-1&&t.pointerButtons!==e.buttons))return;const s=this.ctrl.setEventIds(e);t.pointerCapture&&e.target.setPointerCapture(e.pointerId),!(s&&s.size>1&&n._pointerActive)&&(this.start(e),this.setupPointer(e),n._pointerId=oe(e),n._pointerActive=!0,this.computeValues(xe(e)),this.computeInitial(),t.preventScrollAxis&&we(e)!=="mouse"?(n._active=!1,this.setupScrollPrevention(e)):t.delay>0?(this.setupDelayTrigger(e),t.triggerAllEvents&&(this.compute(e),this.emit())):this.startPointerDrag(e))}startPointerDrag(e){const t=this.state;t._active=!0,t._preventScroll=!0,t._delayed=!1,this.compute(e),this.emit()}pointerMove(e){const t=this.state,n=this.config;if(!t._pointerActive)return;const s=oe(e);if(t._pointerId!==void 0&&s!==t._pointerId)return;const a=xe(e);if(document.pointerLockElement===e.target?t._delta=[e.movementX,e.movementY]:(t._delta=T.sub(a,t._values),this.computeValues(a)),T.addTo(t._movement,t._delta),this.compute(e),t._delayed&&t.intentional){this.timeoutStore.remove("dragDelay"),t.active=!1,this.startPointerDrag(e);return}if(n.preventScrollAxis&&!t._preventScroll)if(t.axis)if(t.axis===n.preventScrollAxis||n.preventScrollAxis==="xy"){t._active=!1,this.clean();return}else{this.timeoutStore.remove("startPointerDrag"),this.startPointerDrag(e);return}else return;this.emit()}pointerUp(e){this.ctrl.setEventIds(e);try{this.config.pointerCapture&&e.target.hasPointerCapture(e.pointerId)&&e.target.releasePointerCapture(e.pointerId)}catch{process.env.NODE_ENV==="development"&&console.warn("[@use-gesture]: If you see this message, it's likely that you're using an outdated version of `@react-three/fiber`. \n\nPlease upgrade to the latest version.")}const t=this.state,n=this.config;if(!t._active||!t._pointerActive)return;const s=oe(e);if(t._pointerId!==void 0&&s!==t._pointerId)return;this.state._pointerActive=!1,this.setActive(),this.compute(e);const[a,o]=t._distance;if(t.tap=a<=n.tapsThreshold&&o<=n.tapsThreshold,t.tap&&n.filterTaps)t._force=!0;else{const[u,c]=t._delta,[p,f]=t._movement,[_,h]=n.swipe.velocity,[x,E]=n.swipe.distance,z=n.swipe.duration;if(t.elapsedTime<z){const L=Math.abs(u/t.timeDelta),$=Math.abs(c/t.timeDelta);L>_&&Math.abs(p)>x&&(t.swipe[0]=Math.sign(u)),$>h&&Math.abs(f)>E&&(t.swipe[1]=Math.sign(c))}}this.emit()}pointerClick(e){!this.state.tap&&e.detail>0&&(e.preventDefault(),e.stopPropagation())}setupPointer(e){const t=this.config,n=t.device;if(process.env.NODE_ENV==="development")try{if(n==="pointer"&&t.preventScrollDelay===void 0){const s="uv"in e?e.sourceEvent.currentTarget:e.currentTarget;window.getComputedStyle(s).touchAction==="auto"&&console.warn("[@use-gesture]: The drag target has its `touch-action` style property set to `auto`. It is recommended to add `touch-action: 'none'` so that the drag gesture behaves correctly on touch-enabled devices. For more information read this: https://use-gesture.netlify.app/docs/extras/#touch-action.\n\nThis message will only show in development mode. It won't appear in production. If this is intended, you can ignore it.",s)}}catch{}t.pointerLock&&e.currentTarget.requestPointerLock(),t.pointerCapture||(this.eventStore.add(this.sharedConfig.window,n,"change",this.pointerMove.bind(this)),this.eventStore.add(this.sharedConfig.window,n,"end",this.pointerUp.bind(this)),this.eventStore.add(this.sharedConfig.window,n,"cancel",this.pointerUp.bind(this)))}pointerClean(){this.config.pointerLock&&document.pointerLockElement===this.state.currentTarget&&document.exitPointerLock()}preventScroll(e){this.state._preventScroll&&e.cancelable&&e.preventDefault()}setupScrollPrevention(e){this.state._preventScroll=!1,dt(e);const t=this.eventStore.add(this.sharedConfig.window,"touch","change",this.preventScroll.bind(this),{passive:!1});this.eventStore.add(this.sharedConfig.window,"touch","end",t),this.eventStore.add(this.sharedConfig.window,"touch","cancel",t),this.timeoutStore.add("startPointerDrag",this.startPointerDrag.bind(this),this.config.preventScrollDelay,e)}setupDelayTrigger(e){this.state._delayed=!0,this.timeoutStore.add("dragDelay",()=>{this.state._step=[0,0],this.startPointerDrag(e)},this.config.delay)}keyDown(e){const t=ke[e.key];if(t){const n=this.state,s=e.shiftKey?10:e.altKey?.1:1;this.start(e),n._delta=t(this.config.keyboardDisplacement,s),n._keyboardActive=!0,T.addTo(n._movement,n._delta),this.compute(e),this.emit()}}keyUp(e){e.key in ke&&(this.state._keyboardActive=!1,this.setActive(),this.compute(e),this.emit())}bind(e){const t=this.config.device;e(t,"start",this.pointerDown.bind(this)),this.config.pointerCapture&&(e(t,"change",this.pointerMove.bind(this)),e(t,"end",this.pointerUp.bind(this)),e(t,"cancel",this.pointerUp.bind(this)),e("lostPointerCapture","",this.pointerUp.bind(this))),this.config.keys&&(e("key","down",this.keyDown.bind(this)),e("key","up",this.keyUp.bind(this))),this.config.filterTaps&&e("click","",this.pointerClick.bind(this),{capture:!0,passive:!1})}}function dt(r){"persist"in r&&typeof r.persist=="function"&&r.persist()}const Z=typeof window<"u"&&window.document&&window.document.createElement;function Ce(){return Z&&"ontouchstart"in window}function ht(){return Ce()||Z&&window.navigator.maxTouchPoints>1}function pt(){return Z&&"onpointerdown"in window}function gt(){return Z&&"exitPointerLock"in window.document}function mt(){try{return"constructor"in GestureEvent}catch{return!1}}const A={isBrowser:Z,gesture:mt(),touch:Ce(),touchscreen:ht(),pointer:pt(),pointerLock:gt()},vt=250,yt=180,bt=.5,_t=50,wt=250,Tt=10,De={mouse:0,touch:0,pen:8},Ae=y(y({},Q),{},{device(r,e,{pointer:{touch:t=!1,lock:n=!1,mouse:s=!1}={}}){return this.pointerLock=n&&A.pointerLock,A.touch&&t?"touch":this.pointerLock?"mouse":A.pointer&&!s?"pointer":A.touch?"touch":"mouse"},preventScrollAxis(r,e,{preventScroll:t}){if(this.preventScrollDelay=typeof t=="number"?t:t||t===void 0&&r?vt:void 0,!(!A.touchscreen||t===!1))return r||(t!==void 0?"y":void 0)},pointerCapture(r,e,{pointer:{capture:t=!0,buttons:n=1,keys:s=!0}={}}){return this.pointerButtons=n,this.keys=s,!this.pointerLock&&this.device==="pointer"&&t},threshold(r,e,{filterTaps:t=!1,tapsThreshold:n=3,axis:s=void 0}){const a=T.toVector(r,t?n:s?1:0);return this.filterTaps=t,this.tapsThreshold=n,a},swipe({velocity:r=bt,distance:e=_t,duration:t=wt}={}){return{velocity:this.transform(T.toVector(r)),distance:this.transform(T.toVector(e)),duration:t}},delay(r=0){switch(r){case!0:return yt;case!1:return 0;default:return r}},axisThreshold(r){return r?y(y({},De),r):De},keyboardDisplacement(r=Tt){return r}});process.env.NODE_ENV==="development"&&Object.assign(Ae,{useTouch(r){if(r!==void 0)throw Error("[@use-gesture]: `useTouch` option has been renamed to `pointer.touch`. Use it as in `{ pointer: { touch: true } }`.");return NaN},experimental_preventWindowScrollY(r){if(r!==void 0)throw Error("[@use-gesture]: `experimental_preventWindowScrollY` option has been renamed to `preventScroll`.");return NaN},swipeVelocity(r){if(r!==void 0)throw Error("[@use-gesture]: `swipeVelocity` option has been renamed to `swipe.velocity`. Use it as in `{ swipe: { velocity: 0.5 } }`.");return NaN},swipeDistance(r){if(r!==void 0)throw Error("[@use-gesture]: `swipeDistance` option has been renamed to `swipe.distance`. Use it as in `{ swipe: { distance: 50 } }`.");return NaN},swipeDuration(r){if(r!==void 0)throw Error("[@use-gesture]: `swipeDuration` option has been renamed to `swipe.duration`. Use it as in `{ swipe: { duration: 250 } }`.");return NaN}}),y(y({},ae),{},{device(r,e,{shared:t,pointer:{touch:n=!1}={}}){if(t.target&&!A.touch&&A.gesture)return"gesture";if(A.touch&&n)return"touch";if(A.touchscreen){if(A.pointer)return"pointer";if(A.touch)return"touch"}},bounds(r,e,{scaleBounds:t={},angleBounds:n={}}){const s=o=>{const u=Ee(re(t,o),{min:-1/0,max:1/0});return[u.min,u.max]},a=o=>{const u=Ee(re(n,o),{min:-1/0,max:1/0});return[u.min,u.max]};return typeof t!="function"&&typeof n!="function"?[s(),a()]:o=>[s(o),a(o)]},threshold(r,e,t){return this.lockDirection=t.axis==="lock",T.toVector(r,this.lockDirection?[.1,3]:0)},modifierKey(r){return r===void 0?"ctrlKey":r},pinchOnWheel(r=!0){return r}}),y(y({},Q),{},{mouseOnly:(r=!0)=>r}),y(y({},Q),{},{mouseOnly:(r=!0)=>r});const $e=new Map,ce=new Map;function xt(r){$e.set(r.key,r.engine),ce.set(r.key,r.resolver)}const Et={key:"drag",engine:ft,resolver:Ae};function It(r,e){if(r==null)return{};var t={},n=Object.keys(r),s,a;for(a=0;a<n.length;a++)s=n[a],!(e.indexOf(s)>=0)&&(t[s]=r[s]);return t}function St(r,e){if(r==null)return{};var t=It(r,e),n,s;if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(r);for(s=0;s<a.length;s++)n=a[s],!(e.indexOf(n)>=0)&&Object.prototype.propertyIsEnumerable.call(r,n)&&(t[n]=r[n])}return t}const kt={target(r){if(r)return()=>"current"in r?r.current:r},enabled(r=!0){return r},window(r=A.isBrowser?window:void 0){return r},eventOptions({passive:r=!0,capture:e=!1}={}){return{passive:r,capture:e}},transform(r){return r}},Ct=["target","eventOptions","window","enabled","transform"];function ne(r={},e){const t={};for(const[n,s]of Object.entries(e))switch(typeof s){case"function":if(process.env.NODE_ENV==="development"){const a=s.call(t,r[n],n,r);Number.isNaN(a)||(t[n]=a)}else t[n]=s.call(t,r[n],n,r);break;case"object":t[n]=ne(r[n],s);break;case"boolean":s&&(t[n]=r[n]);break}return t}function Dt(r,e,t={}){const n=r,{target:s,eventOptions:a,window:o,enabled:u,transform:c}=n,p=St(n,Ct);if(t.shared=ne({target:s,eventOptions:a,window:o,enabled:u,transform:c},kt),e){const f=ce.get(e);t[e]=ne(y({shared:t.shared},p),f)}else for(const f in p){const _=ce.get(f);if(_)t[f]=ne(y({shared:t.shared},p[f]),_);else if(process.env.NODE_ENV==="development"&&!["drag","pinch","scroll","wheel","move","hover"].includes(f)){if(f==="domTarget")throw Error("[@use-gesture]: `domTarget` option has been renamed to `target`.");console.warn(`[@use-gesture]: Unknown config key \`${f}\` was used. Please read the documentation for further information.`)}}return t}class Oe{constructor(e,t){D(this,"_listeners",new Set),this._ctrl=e,this._gestureKey=t}add(e,t,n,s,a){const o=this._listeners,u=Ze(t,n),c=this._gestureKey?this._ctrl.config[this._gestureKey].eventOptions:{},p=y(y({},c),a);e.addEventListener(u,s,p);const f=()=>{e.removeEventListener(u,s,p),o.delete(f)};return o.add(f),f}clean(){this._listeners.forEach(e=>e()),this._listeners.clear()}}class At{constructor(){D(this,"_timeouts",new Map)}add(e,t,n=140,...s){this.remove(e),this._timeouts.set(e,window.setTimeout(t,n,...s))}remove(e){const t=this._timeouts.get(e);t&&window.clearTimeout(t)}clean(){this._timeouts.forEach(e=>void window.clearTimeout(e)),this._timeouts.clear()}}class $t{constructor(e){D(this,"gestures",new Set),D(this,"_targetEventStore",new Oe(this)),D(this,"gestureEventStores",{}),D(this,"gestureTimeoutStores",{}),D(this,"handlers",{}),D(this,"config",{}),D(this,"pointerIds",new Set),D(this,"touchIds",new Set),D(this,"state",{shared:{shiftKey:!1,metaKey:!1,ctrlKey:!1,altKey:!1}}),Ot(this,e)}setEventIds(e){if(te(e))return this.touchIds=new Set(rt(e)),this.touchIds;if("pointerId"in e)return e.type==="pointerup"||e.type==="pointercancel"?this.pointerIds.delete(e.pointerId):e.type==="pointerdown"&&this.pointerIds.add(e.pointerId),this.pointerIds}applyHandlers(e,t){this.handlers=e,this.nativeHandlers=t}applyConfig(e,t){this.config=Dt(e,t,this.config)}clean(){this._targetEventStore.clean();for(const e of this.gestures)this.gestureEventStores[e].clean(),this.gestureTimeoutStores[e].clean()}effect(){return this.config.shared.target&&this.bind(),()=>this._targetEventStore.clean()}bind(...e){const t=this.config.shared,n={};let s;if(!(t.target&&(s=t.target(),!s))){if(t.enabled){for(const o of this.gestures){const u=this.config[o],c=Pe(n,u.eventOptions,!!s);if(u.enabled){const p=$e.get(o);new p(this,e,o).bind(c)}}const a=Pe(n,t.eventOptions,!!s);for(const o in this.nativeHandlers)a(o,"",u=>this.nativeHandlers[o](y(y({},this.state.shared),{},{event:u,args:e})),void 0,!0)}for(const a in n)n[a]=it(...n[a]);if(!s)return n;for(const a in n){const{device:o,capture:u,passive:c}=Qe(a);this._targetEventStore.add(s,o,"",n[a],{capture:u,passive:c})}}}}function W(r,e){r.gestures.add(e),r.gestureEventStores[e]=new Oe(r,e),r.gestureTimeoutStores[e]=new At}function Ot(r,e){e.drag&&W(r,"drag"),e.wheel&&W(r,"wheel"),e.scroll&&W(r,"scroll"),e.move&&W(r,"move"),e.pinch&&W(r,"pinch"),e.hover&&W(r,"hover")}const Pe=(r,e,t)=>(n,s,a,o={},u=!1)=>{var c,p;const f=(c=o.capture)!==null&&c!==void 0?c:e.capture,_=(p=o.passive)!==null&&p!==void 0?p:e.passive;let h=u?n:Xe(n,s,f);t&&_&&(h+="Passive"),r[h]=r[h]||[],r[h].push(a)};function Pt(r,e={},t,n){const s=d.useMemo(()=>new $t(r),[]);if(s.applyHandlers(r,n),s.applyConfig(e,t),d.useEffect(s.effect.bind(s)),d.useEffect(()=>s.clean.bind(s),[]),e.target===void 0)return s.bind.bind(s)}function Mt(r,e){return xt(Et),Pt({drag:r},e||{},"drag")}function Nt(r){const{type:e,actionType:t,toIndex:n,itemsLength:s,withLoop:a,scrollAmount:o,totalAvailable:u}=r;let c=r.currentActive,p=r.fromValueRaw,f=!1,_=!1;e==="next"&&(c+=1),e==="prev"&&(c=c===0?s-1:c-1),n!==void 0&&(c=n);let h=0;e==="next"&&(h=-(c*o),a&&c===s&&(c=0,p=p+o*s,h=0),!a&&(Math.abs(h)>=u||c===s-1)&&(_=!0,h=-u)),e==="prev"&&(h=-(c*o),c===s-1&&(p=p-s*o),!a&&h>=0&&(f=!0,h=0)),t==="resize"&&(h=-(c*o),a||(c===0&&(f=!0),(c===s-1||Math.abs(h)>=u)&&(_=!0,Math.abs(h)>=u&&u>0&&(h=-u))));const x=a?c%s:c,E=a?s+c%s:c;return{newActive:c,fromValue:p,toValue:h,startReached:f,endReached:_,logicalIndex:x,realTrackIndex:E}}function ee(r,e,t){return e==="x"?`translate3d(calc(${r}px + var(--${t}-offset-modifier)), 0px, 0px)`:`translate3d(0px, calc(${r}px + var(--${t}-offset-modifier)), 0px)`}function Lt(){const r=d.useRef(null);r.current===null&&(r.current=new Set);const e=d.useRef(null);return e.current===null&&(e.current={useListenToCustomEvent(t){d.useEffect(()=>{const n=r.current;return n.add(t),()=>{n.delete(t)}},[t])},emitEvent(t){const n=r.current;!n||n.size===0||n.forEach(s=>s(t))}}),e.current}function Vt({init:r=!0,items:e,withLoop:t=!1,id:n,gutter:s=[{breakpoint:0,gutter:0,startEndGutter:0}],itemsPerSlide:a=[{breakpoint:0,itemsPerSlide:1}],carouselAxis:o="x",startingPosition:u="start",enableGestures:c=!0,slideWhenDragThresholdIsReached:p=!0,slideType:f="item",initialActiveItem:_=0,renderWindow:h,renderPlaceholder:x}){const[E,z]=d.useState(!1),[,L]=d.useState(0),$=d.useRef(r),O=d.useRef(null),k=d.useRef(null),U=d.useRef(0),K=d.useRef(0),C=d.useRef(!t),V=d.useRef(!1),le=d.useRef(0),w=d.useRef(0),Ne=d.useRef(e);Ne.current=e;const Le=d.useRef(t);Le.current=t;const Ve=d.useRef(!1),F=d.useRef(null),R=d.useRef(null),G=d.useRef(null),Y=d.useRef(null),H=d.useRef({width:0,height:0});function Re(i){if(i===void 0)return 0;if(typeof i=="number")return e[i]?i:(console.warn(`initialActiveItem: item at index ${i} doesn't exist.`),0);const l=e.findIndex(m=>m.id===i);return l<0?(console.warn(`initialActiveItem: item with id "${i}" doesn't exist.`),0):l}const se=ie.useSpringRef(),fe=ie.useSpring({value:0,ref:se,onChange({value:i}){k.current.style.transform=ee(i.value,o,n)}}),Bt=t?e.length*3:e.length,{useListenToCustomEvent:je,emitEvent:q}=Lt();function Be(i){if(!i||i.length===0)return null;let l=null,m=-1/0;for(const g of i)(g.media?window.matchMedia(g.media).matches:window.innerWidth>=g.breakpoint)&&g.breakpoint>=m&&(l=g,m=g.breakpoint);return l}function ze(){const{totalGutterCssVar:i}=Ue();return i}function zt(){const i=Be(a);return(i==null?void 0:i.itemsPerSlide)||1}function de(i){$.current&&(V.current||X({type:"next",toIndex:i,actionType:"click"}))}function he(i){$.current&&(C.current||X({type:"prev",toIndex:i,actionType:"click"}))}function X({type:i,shouldAnimate:l=!0,toIndex:m,actionType:g}){var P,J;const I=!l;C.current=!1,V.current=!1;const v=Nt({type:i,actionType:g,toIndex:m,currentActive:w.current,itemsLength:e.length,withLoop:t,scrollAmount:K.current,totalAvailable:i==="next"||g==="resize"?pe(t?K.current*(e.length*2):0):0,fromValueRaw:fe.value.get()}),j=w.current;w.current=v.newActive,C.current=v.startReached,V.current=v.endReached,U.current=v.toValue,h!==void 0&&j!==v.newActive&&L(S=>S+1),q(g==="resize"?{eventName:"onResize",sliceActionType:g,slideDirection:i,currentItem:{id:((P=e.at(v.logicalIndex))==null?void 0:P.id)??"",index:v.logicalIndex,trackIndex:v.realTrackIndex,startReached:C.current,endReached:V.current}}:{eventName:"onSlideStartChange",sliceActionType:g,slideDirection:i,nextItem:{index:v.logicalIndex,id:((J=e.at(v.logicalIndex))==null?void 0:J.id)??"",trackIndex:v.realTrackIndex,startReached:C.current,endReached:V.current}}),I&&k.current&&(k.current.style.transform=ee(v.toValue,o,n)),se.start({immediate:I,from:{value:v.fromValue},to:{value:v.toValue},onChange({value:S}){k.current.style.transform=ee(S.value,o,n)},onRest({finished:S}){var b;if(S){const B=t?w.current%e.length:w.current,Ke=t?e.length+w.current%e.length:w.current;q({eventName:"onSlideChangeComplete",sliceActionType:g,slideDirection:i,currentItem:{index:B,id:((b=e.at(B))==null?void 0:b.id)??"",trackIndex:Ke,startReached:C.current,endReached:V.current}})}}})}function Ut(){const i=k.current;let l=0;return f==="item"?l=i.children[0].getBoundingClientRect()[o==="x"?"width":"height"]+ze():l=i.getBoundingClientRect()[o==="x"?"width":"height"]+ze(),l}function pe(i){const l=k.current;return l[o==="x"?"scrollWidth":"scrollHeight"]-l.getBoundingClientRect()[o==="x"?"width":"height"]-i}function Ue(){const i=Be(s);return{totalGutterCssVar:(i==null?void 0:i.gutter)||0,totalStartEndGutterCssVar:((i==null?void 0:i.startEndGutter)||0)*2}}d.useEffect(()=>{function i(S){const b=zt();switch(S){case"start":return 0;case"middle-start":return Math.floor((b-1)*.25);case"center":return Math.floor((b-1)*.5);case"middle-end":return Math.floor((b-1)*.75);case"end":return b-1;default:return 0}}function l(){K.current=Ut(),le.current=K.current/4;const{totalStartEndGutterCssVar:S}=Ue();let b=0;t&&(b=K.current*e.length),b-=K.current*i(u),b-=S/2,O.current.style.setProperty(`--${n}-offset-modifier`,`${-b}px`)}function m(S){if(O.current&&(l(),z(!0),S)){const b=Re(_),B=t?e.length+b%e.length:b;q({eventName:"onInit",index:b,trackIndex:B})}}function g(){m(),X({type:"resize",toIndex:w.current,shouldAnimate:!1,actionType:"resize"})}function I(){G.current!==null&&(clearTimeout(G.current),G.current=null),Y.current!==null&&(cancelAnimationFrame(Y.current),Y.current=null)}function v(S){Y.current===null&&(Y.current=requestAnimationFrame(()=>{Y.current=null;const b=O.current;if(!b)return;const B=b.getBoundingClientRect();(B.width!==H.current.width||B.height!==H.current.height)&&(H.current={width:B.width,height:B.height},g()),S&&(G.current=window.setTimeout(()=>{G.current=null,v(!1)},400))}))}function j(){I(),v(!0)}function P(){I(),G.current=window.setTimeout(()=>{G.current=null,H.current={width:0,height:0},v(!0)},250)}function J(){document.visibilityState==="visible"&&(I(),H.current={width:0,height:0},v(!0))}if(r){if($.current=!0,Ve.current)g();else if(m(!0),Ve.current=!0,O.current){const b=O.current.getBoundingClientRect();H.current={width:b.width,height:b.height}}const S=window.visualViewport??window;return S.addEventListener("resize",j),window.addEventListener("orientationchange",P),document.addEventListener("visibilitychange",J),()=>{S.removeEventListener("resize",j),window.removeEventListener("orientationchange",P),document.removeEventListener("visibilitychange",J),I()}}},[r,n,o,t]),d.useEffect(()=>{const i=Re(_);r&&i!==w.current&&X({type:"next",toIndex:i,actionType:"resize",shouldAnimate:!1})},[r,_]);const ge=c;function Kt(){if(R.current!==null&&(cancelAnimationFrame(R.current),R.current=null),F.current){const i=F.current;F.current=null,q(i)}}function Ft(i){F.current=i,R.current===null&&(R.current=requestAnimationFrame(()=>{R.current=null;const l=F.current;F.current=null,l&&q(l)}))}d.useEffect(()=>()=>{R.current!==null&&(cancelAnimationFrame(R.current),R.current=null),F.current=null},[]);const Gt=Mt(i=>{if(!$.current)return;const l=i.dragging,m=i.offset[o==="x"?0:1],g=i.movement[o==="x"?0:1],I=g>le.current,v=g<-le.current,j=i.velocity;l&&(Ft({...i,eventName:"onDrag",slideActionType:"drag"}),se.start({value:m,immediate:!0,config:{velocity:j},onChange({value:P}){k.current.style.transform=ee(P.value,o,n)}}),p&&(I||v)&&i.cancel()),i.last&&(Kt(),I?(X({actionType:"drag",type:"prev"}),i.cancel()):v?(X({actionType:"drag",type:"next"}),i.cancel()):(se.start({value:U.current,config:{velocity:j},onChange({value:P}){k.current.style.transform=ee(P.value,o,n)}}),i.cancel()))},{enabled:ge,axis:o,rubberband:!t,...t?{}:{bounds:()=>({right:0,left:-pe(0),top:-pe(0),bottom:0})},from:()=>[fe.value.get(),fe.value.get()]}),Wt=d.useCallback(i=>{var v;const l=Ne.current,g=Le.current?l.length+w.current%l.length:w.current;if(typeof i=="number")return g===i;const I=w.current%l.length;return i===((v=l[I])==null?void 0:v.id)},[]),Yt=d.useMemo(()=>Array.from({length:e.length},(i,l)=>()=>{const m=t?w.current%e.length:w.current;return t?l===(m+1)%e.length:m+1>=e.length?!1:l===m+1}),[e.length,t]),Ht=d.useMemo(()=>Array.from({length:e.length},(i,l)=>()=>{const m=t?w.current%e.length:w.current;return t?l===(m-1+e.length)%e.length:m-1<0?!1:l===m-1}),[e.length,t]),qt=d.useMemo(()=>`
             [data-part-internal="${n}-Container"] {
               display: flex;
               width: 100%;
@@ -11,14 +11,14 @@
               --${n}-scroll-y-value: ${o==="y"?`calc(var(--${n}-offset-position) + var(--${n}-offset-modifier))`:"0px"};
               --${n}-gutter: 0px;
               --${n}-start-end-gutter: 0px;
-              touch-action: ${me?o==="x"?"pan-y":"pan-x":"auto"};
+              touch-action: ${ge?o==="x"?"pan-y":"pan-x":"auto"};
             }
             [data-part-internal="${n}-Track"] {
               display: flex;
               position: relative;
               --initial-offset-modifier: calc(calc(-100% - var(--${n}-gutter) + calc(var(--${n}-start-end-gutter) / 2 / ${e.length} * var(--${n}-items-per-slide)) + var(--${n}-start-end-gutter)) * ${e.length} / var(--${n}-items-per-slide));
-              left: ${t&&o==="x"?"var(--initial-offset-modifier)":"0px"};
-              top: ${t&&o==="y"?"var(--initial-offset-modifier)":"0px"};
+              left: ${t&&o==="x"&&!E?"var(--initial-offset-modifier)":"0px"};
+              top: ${t&&o==="y"&&!E?"var(--initial-offset-modifier)":"0px"};
               flex-direction: ${o==="x"?"row":"column"};
               width: 100%;
               height: 100%;
@@ -44,4 +44,4 @@
                     }
                   }
                 `).join(""):""}
-          `,[n,o,me,e.length,t,s,a]);return{carouselFragment:V.jsxs("div",{ref:A,className:"ReactSpringCarouselContainer","data-part":"Container","data-part-internal":`${n}-Container`,...Gt(),children:[V.jsx("style",{dangerouslySetInnerHTML:{__html:qt}}),V.jsx(Rt,{id:n,trackRef:w,items:e,trackLength:Bt,withLoop:t,renderWindow:p,renderPlaceholder:D,activeItemRef:g,previousActiveRef:W,isNextItemFns:Yt,isPrevItemFns:Ht,handleIsActiveItem:Wt,useListenToCustomEvent:je,startReachedRef:k,endReachedRef:x})]}),useListenToCustomEvent:je,slideToNextItem:()=>he(),slideToPrevItem:()=>pe(),slideToItem:i=>{if(typeof i=="number"){if(!e[i]){console.warn(`The item you're trying to slide doesn't exist. index: ${i}`);return}i>g.current?he(i):pe(i)}if(typeof i=="string"){const l=e.findIndex(m=>m.id===i);if(l<0){console.warn(`The item you're trying to slide doesn't exist. id: ${i}`);return}l>g.current?he(l):pe(l)}}}}function Rt({id:r,trackRef:e,items:t,trackLength:n,withLoop:s,renderWindow:a,renderPlaceholder:o,activeItemRef:u,previousActiveRef:c,isNextItemFns:h,isPrevItemFns:f,handleIsActiveItem:b,useListenToCustomEvent:p,startReachedRef:D,endReachedRef:I}){const[,A]=d.useReducer(S=>S+1,0),w=d.useCallback(S=>{a!==void 0&&(S.eventName==="onSlideStartChange"||S.eventName==="onSlideChangeComplete"||S.eventName==="onResize")&&A()},[a]);return p(w),V.jsx("div",{ref:e,className:"ReactSpringCarouselTrack","data-part":"Track","data-part-internal":`${r}-Track`,onScroll:()=>{D.current=!1,I.current=!1},children:Array.from({length:n},(S,T)=>{const k=s?T%t.length:T,x=t[k],K=s&&(T<t.length||T>=t.length*2);if(a!==void 0){const M=t.length,te=B=>{if(!s||M===0)return B;const F=B%M;return M+(F%M+M)%M},ie=te(u.current),U=te(c.current);if(Math.min(Math.abs(T-ie),Math.abs(T-U))>a)return V.jsx("div",{className:"ReactSpringCarouselItem","data-part":"Item","data-part-internal":`${r}-Item`,"data-id":x.id,"aria-hidden":"true",children:o==null?void 0:o({item:x,index:T,isClonedItem:K})},`${x.id}-${T}`)}const g=h[k],W=f[k];return V.jsx("div",{className:"ReactSpringCarouselItem","data-part":"Item","data-part-internal":`${r}-Item`,"data-id":x.id,children:typeof x.renderItem=="function"?x.renderItem({useListenToCustomEvent:p,index:T,isClonedItem:K,isActiveItem:b,isNextItem:g,isPrevItem:W}):x.renderItem},`${x.id}-${T}`)})})}function Vt(r){let e=0;const t=getComputedStyle(r).getPropertyValue("gap");return t.includes("px")&&(e=Number(t.replace("px",""))),e}function Re(r){return r.scrollWidth-r.clientWidth}function fe(r){const e=r.children[0],t=Vt(r);return e.getBoundingClientRect().width+t}function jt({container:r,onReach:e}){const t=d.useRef("start"),n=d.useRef(0),[,s]=ae.useSpring(()=>({x:0}));function a(u){s.start({from:{x:r.current.scrollLeft},to:{x:u},onChange({value:c}){r.current&&(r.current.scrollLeft=c.x)}})}function o(u){if(!r.current||u==="next"&&t.current==="end"||u==="prev"&&t.current==="start")return;let c=0;if(u==="next"&&(n.current+=1),u==="prev"&&(n.current-=1),c=n.current*fe(r.current),u==="next"){const h=Re(r.current);c>h&&(t.current="end",c=h,e&&e("end"))}u==="prev"&&c<=0&&(t.current="start",n.current=0,c=0,e&&e("start")),a(c)}return d.useEffect(()=>{function u(){var T;const D=fe(r.current),I=((T=[...r.current.children].at(0))==null?void 0:T.getBoundingClientRect().width)||0,A=Array(r.current.childElementCount).fill(0).map((k,x)=>({index:x,start:D*x,end:D*(x+1)})),w=r.current.scrollLeft+I,S=A.find(k=>w>=k.start&&w<k.end);n.current=(S==null?void 0:S.index)||0}function c(){s.stop()}function h(D){const I=D.target;I.scrollLeft===0?(n.current=0,t.current="start",e&&e("start")):I.scrollLeft>=Re(I)?(t.current="end",e&&e("end")):t.current!=="idle"&&(t.current="idle",e&&e("idle"))}let f,b=0;function p(){b=r.current.scrollLeft,clearTimeout(f),f=setTimeout(function(){r.current.scrollLeft===b&&u()},200)}if(r.current)return r.current.addEventListener("wheel",c,{passive:!0}),r.current.addEventListener("scroll",h),r.current.addEventListener("scroll",p),()=>{r.current&&(r.current.removeEventListener("scroll",p),r.current.removeEventListener("scroll",h),r.current.removeEventListener("wheel",c))}},[r,e]),d.useEffect(()=>{if(r.current){const u=new ResizeObserver(()=>{a(n.current*fe(r.current))});return u.observe(r.current),()=>{u.disconnect()}}},[]),{scrollToNext(){o("next")},scrollToPrev(){o("prev")}}}R.useSpringCarousel=Lt,R.useSpringScroll=jt,Object.defineProperty(R,Symbol.toStringTag,{value:"Module"})});
+          `,[n,o,ge,e.length,t,E,s,a]);return{carouselFragment:N.jsxs("div",{ref:O,className:"ReactSpringCarouselContainer","data-part":"Container","data-part-internal":`${n}-Container`,...Gt(),children:[N.jsx("style",{dangerouslySetInnerHTML:{__html:qt}}),N.jsx("div",{ref:k,className:"ReactSpringCarouselTrack","data-part":"Track","data-part-internal":`${n}-Track`,onScroll:()=>{C.current=!1,V.current=!1},children:Array.from({length:Bt},(i,l)=>{const m=t?l%e.length:l,g=e[m],I=t&&(l<e.length||l>=e.length*2);if(h!==void 0){const P=t?e.length+w.current%e.length:w.current;if(Math.abs(l-P)>h)return N.jsx("div",{className:"ReactSpringCarouselItem","data-part":"Item","data-part-internal":`${n}-Item`,"data-id":g.id,"aria-hidden":"true",children:x==null?void 0:x({item:g,index:l,isClonedItem:I})},`${g.id}-${l}`)}const v=Yt[m],j=Ht[m];return N.jsx("div",{className:"ReactSpringCarouselItem","data-part":"Item","data-part-internal":`${n}-Item`,"data-id":g.id,children:typeof g.renderItem=="function"?g.renderItem({useListenToCustomEvent:je,index:l,isClonedItem:I,isActiveItem:Wt,isNextItem:v,isPrevItem:j}):g.renderItem},`${g.id}-${l}`)})})]}),useListenToCustomEvent:je,slideToNextItem:()=>de(),slideToPrevItem:()=>he(),slideToItem:i=>{if(typeof i=="number"){if(!e[i]){console.warn(`The item you're trying to slide doesn't exist. index: ${i}`);return}i>w.current?de(i):he(i)}if(typeof i=="string"){const l=e.findIndex(m=>m.id===i);if(l<0){console.warn(`The item you're trying to slide doesn't exist. id: ${i}`);return}l>w.current?de(l):he(l)}}}}function Rt(r){let e=0;const t=getComputedStyle(r).getPropertyValue("gap");return t.includes("px")&&(e=Number(t.replace("px",""))),e}function Me(r){return r.scrollWidth-r.clientWidth}function ue(r){const e=r.children[0],t=Rt(r);return e.getBoundingClientRect().width+t}function jt({container:r,onReach:e}){const t=d.useRef("start"),n=d.useRef(0),[,s]=ie.useSpring(()=>({x:0}));function a(u){s.start({from:{x:r.current.scrollLeft},to:{x:u},onChange({value:c}){r.current&&(r.current.scrollLeft=c.x)}})}function o(u){if(!r.current||u==="next"&&t.current==="end"||u==="prev"&&t.current==="start")return;let c=0;if(u==="next"&&(n.current+=1),u==="prev"&&(n.current-=1),c=n.current*ue(r.current),u==="next"){const p=Me(r.current);c>p&&(t.current="end",c=p,e&&e("end"))}u==="prev"&&c<=0&&(t.current="start",n.current=0,c=0,e&&e("start")),a(c)}return d.useEffect(()=>{function u(){var O;const x=ue(r.current),E=((O=[...r.current.children].at(0))==null?void 0:O.getBoundingClientRect().width)||0,z=Array(r.current.childElementCount).fill(0).map((k,U)=>({index:U,start:x*U,end:x*(U+1)})),L=r.current.scrollLeft+E,$=z.find(k=>L>=k.start&&L<k.end);n.current=($==null?void 0:$.index)||0}function c(){s.stop()}function p(x){const E=x.target;E.scrollLeft===0?(n.current=0,t.current="start",e&&e("start")):E.scrollLeft>=Me(E)?(t.current="end",e&&e("end")):t.current!=="idle"&&(t.current="idle",e&&e("idle"))}let f,_=0;function h(){_=r.current.scrollLeft,clearTimeout(f),f=setTimeout(function(){r.current.scrollLeft===_&&u()},200)}if(r.current)return r.current.addEventListener("wheel",c,{passive:!0}),r.current.addEventListener("scroll",p),r.current.addEventListener("scroll",h),()=>{r.current&&(r.current.removeEventListener("scroll",h),r.current.removeEventListener("scroll",p),r.current.removeEventListener("wheel",c))}},[r,e]),d.useEffect(()=>{if(r.current){const u=new ResizeObserver(()=>{a(n.current*ue(r.current))});return u.observe(r.current),()=>{u.disconnect()}}},[]),{scrollToNext(){o("next")},scrollToPrev(){o("prev")}}}M.useSpringCarousel=Vt,M.useSpringScroll=jt,Object.defineProperty(M,Symbol.toStringTag,{value:"Module"})});

package/dist/useSpringCarousel.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
-import { Props, SpringCarouselEventsEventHandler } from './types';
+import { Props } from './types';
 export declare function useSpringCarousel({ init, items, withLoop, id, gutter, itemsPerSlide, carouselAxis, startingPosition, enableGestures, slideWhenDragThresholdIsReached, slideType, initialActiveItem, renderWindow, renderPlaceholder, }: Props): {
     carouselFragment: import("react/jsx-runtime").JSX.Element;
-    useListenToCustomEvent: (eventHandler: SpringCarouselEventsEventHandler) => void;
+    useListenToCustomEvent: (eventHandler: import('./types').SpringCarouselEventsEventHandler) => void;
     slideToNextItem: () => void;
     slideToPrevItem: () => void;
     slideToItem: (id: string | number) => void;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "react-spring-carousel",
-  "version": "3.0.0-beta-2.1.7",
+  "version": "3.0.0-beta-2.2.0",
   "type": "module",
   "license": "MIT",
   "main": "./dist/index.umd.js",