react-spring-carousel 3.0.0-beta-2.1.0 → 3.0.0-beta-2.1.2

package/dist/index.umd.js

@@ -1,4 +1,4 @@
-(function(A,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):(A=typeof globalThis<"u"?globalThis:A||self,V(A["react-spring-carousel"]={},A["react/jsx-runtime"],A["@react-spring/web"],A.React))})(this,function(A,V,J,h){"use strict";function Ve(r,e,t){return Math.max(e,Math.min(r,t))}const E={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 ce(r,e,t){return e===0||Math.abs(e)===1/0?Math.pow(r,t*5):r*e*t/(e+t*r)}function ue(r,e,t,n=.15){return n===0?Ve(r,e,t):r<e?-ce(e-r,t-e,n)+e:r>t?+ce(r-t,t-e,n)+t:r}function Le(r,[e,t],[n,s]){const[[a,o],[u,d]]=r;return[ue(e,a,o,n),ue(t,u,d,s)]}function je(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 Re(r){var e=je(r,"string");return typeof e=="symbol"?e:String(e)}function k(r,e,t){return e=Re(e),e in r?Object.defineProperty(r,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):r[e]=t,r}function le(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 v(r){for(var e=1;e<arguments.length;e++){var t=arguments[e]!=null?arguments[e]:{};e%2?le(Object(t),!0).forEach(function(n){k(r,n,t[n])}):Object.getOwnPropertyDescriptors?Object.defineProperties(r,Object.getOwnPropertyDescriptors(t)):le(Object(t)).forEach(function(n){Object.defineProperty(r,n,Object.getOwnPropertyDescriptor(t,n))})}return r}const fe={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 de(r){return r?r[0].toUpperCase()+r.slice(1):""}const Be=["enter","leave"];function Ue(r=!1,e){return r&&!Be.includes(e)}function Ke(r,e="",t=!1){const n=fe[r],s=n&&n[e]||e;return"on"+de(r)+de(s)+(Ue(t,s)?"Capture":"")}const Ge=["gotpointercapture","lostpointercapture"];function ze(r){let e=r.substring(2).toLowerCase();const t=!!~e.indexOf("passive");t&&(e=e.replace("passive",""));const n=Ge.includes(e)?"capturecapture":"capture",s=!!~e.indexOf(n);return s&&(e=e.replace("capture","")),{device:e,capture:s,passive:t}}function We(r,e=""){const t=fe[r],n=t&&t[e]||e;return r+n}function W(r){return"touches"in r}function he(r){return W(r)?"touch":"pointerType"in r?r.pointerType:"mouse"}function Fe(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 Ye(r){return r.type==="touchend"||r.type==="touchcancel"?r.changedTouches:r.targetTouches}function pe(r){return W(r)?Ye(r)[0]:r}function He(r){return Fe(r).map(e=>e.identifier)}function Q(r){const e=pe(r);return W(r)?e.identifier:e.pointerId}function ge(r){const e=pe(r);return[e.clientX,e.clientY]}function Xe(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 F(r,...e){return typeof r=="function"?r(...e):r}function qe(){}function Je(...r){return r.length===0?qe:r.length===1?r[0]:function(){let e;for(const t of r)e=t.apply(this,arguments)||e;return e}}function me(r,e){return Object.assign({},e,r||{})}const Qe=32;class Ze{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?F(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,Xe(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 f=t._delta.map(Math.abs);E.addTo(t._distance,f)}this.axisIntent&&this.axisIntent(e);const[o,u]=t._movement,[d,m]=n.threshold,{_step:l,values:_}=t;if(n.hasCustomTransform?(l[0]===!1&&(l[0]=Math.abs(o)>=d&&_[0]),l[1]===!1&&(l[1]=Math.abs(u)>=m&&_[1])):(l[0]===!1&&(l[0]=Math.abs(o)>=d&&Math.sign(o)*d),l[1]===!1&&(l[1]=Math.abs(u)>=m&&Math.sign(u)*m)),t.intentional=l[0]!==!1||l[1]!==!1,!t.intentional)return;const b=[0,0];if(n.hasCustomTransform){const[f,H]=_;b[0]=l[0]!==!1?f-l[0]:0,b[1]=l[1]!==!1?H-l[1]:0}else b[0]=l[0]!==!1?o-l[0]:0,b[1]=l[1]!==!1?u-l[1]:0;this.restrictToAxis&&!t._blocked&&this.restrictToAxis(b);const O=t.offset,T=t._active&&!t._blocked||t.active;T&&(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=F(n.bounds,t)),this.setup&&this.setup()),t.movement=b,this.computeOffset()));const[C,S]=t.offset,[[N,I],[D,$]]=t._bounds;t.overflow=[C<N?-1:C>I?1:0,S<D?-1:S>$?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 G=t._active?n.rubberband||[0,0]:[0,0];if(t.offset=Le(t._bounds,t.offset,G),t.delta=E.sub(t.offset,O),this.computeMovement(),T&&(!t.last||a>Qe)){t.delta=E.sub(t.offset,O);const f=t.delta.map(Math.abs);E.addTo(t.distance,f),t.direction=t.delta.map(Math.sign),t._direction=t._delta.map(Math.sign),!t.first&&a>0&&(t.velocity=[f[0]/a,f[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(v(v(v({},t),e),{},{[this.aliasKey]:e.values}));s!==void 0&&(e.memo=s)}clean(){this.eventStore.clean(),this.timeoutStore.clean()}}function et([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 tt extends Ze{constructor(...e){super(...e),k(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=E.add(this.state.lastOffset,this.state.movement)}computeMovement(){this.state.movement=E.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[he(e)]:n.axisThreshold;t.axis=et(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 ve=r=>r,ye=.15,Z={enabled(r=!0){return r},eventOptions(r,e,t){return v(v({},t.shared.eventOptions),r)},preventDefault(r=!1){return r},triggerAllEvents(r=!1){return r},rubberband(r=0){switch(r){case!0:return[ye,ye];case!1:return[0,0];default:return E.toVector(r)}},from(r){if(typeof r=="function")return r;if(r!=null)return E.toVector(r)},transform(r,e,t){const n=r||t.shared.transform;if(this.hasCustomTransform=!!n,process.env.NODE_ENV==="development"){const s=n||ve;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||ve},threshold(r){return E.toVector(r,0)}};process.env.NODE_ENV==="development"&&Object.assign(Z,{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 rt=0,U=v(v({},Z),{},{axis(r,e,{axis:t}){if(this.lockDirection=t==="lock",!this.lockDirection)return t},axisThreshold(r=rt){return r},bounds(r={}){if(typeof r=="function")return a=>U.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]]}}),be={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 nt extends tt{constructor(...e){super(...e),k(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=U.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=Q(e),n._pointerActive=!0,this.computeValues(ge(e)),this.computeInitial(),t.preventScrollAxis&&he(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=Q(e);if(t._pointerId!==void 0&&s!==t._pointerId)return;const a=ge(e);if(document.pointerLockElement===e.target?t._delta=[e.movementX,e.movementY]:(t._delta=E.sub(a,t._values),this.computeValues(a)),E.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=Q(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,d]=t._delta,[m,l]=t._movement,[_,b]=n.swipe.velocity,[O,T]=n.swipe.distance,C=n.swipe.duration;if(t.elapsedTime<C){const S=Math.abs(u/t.timeDelta),N=Math.abs(d/t.timeDelta);S>_&&Math.abs(m)>O&&(t.swipe[0]=Math.sign(u)),N>b&&Math.abs(l)>T&&(t.swipe[1]=Math.sign(d))}}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,st(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=be[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,E.addTo(n._movement,n._delta),this.compute(e),this.emit()}}keyUp(e){e.key in be&&(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 st(r){"persist"in r&&typeof r.persist=="function"&&r.persist()}const K=typeof window<"u"&&window.document&&window.document.createElement;function _e(){return K&&"ontouchstart"in window}function it(){return _e()||K&&window.navigator.maxTouchPoints>1}function ot(){return K&&"onpointerdown"in window}function at(){return K&&"exitPointerLock"in window.document}function ct(){try{return"constructor"in GestureEvent}catch{return!1}}const P={isBrowser:K,gesture:ct(),touch:_e(),touchscreen:it(),pointer:ot(),pointerLock:at()},ut=250,lt=180,ft=.5,dt=50,ht=250,pt=10,xe={mouse:0,touch:0,pen:8},we=v(v({},U),{},{device(r,e,{pointer:{touch:t=!1,lock:n=!1,mouse:s=!1}={}}){return this.pointerLock=n&&P.pointerLock,P.touch&&t?"touch":this.pointerLock?"mouse":P.pointer&&!s?"pointer":P.touch?"touch":"mouse"},preventScrollAxis(r,e,{preventScroll:t}){if(this.preventScrollDelay=typeof t=="number"?t:t||t===void 0&&r?ut:void 0,!(!P.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=E.toVector(r,t?n:s?1:0);return this.filterTaps=t,this.tapsThreshold=n,a},swipe({velocity:r=ft,distance:e=dt,duration:t=ht}={}){return{velocity:this.transform(E.toVector(r)),distance:this.transform(E.toVector(e)),duration:t}},delay(r=0){switch(r){case!0:return lt;case!1:return 0;default:return r}},axisThreshold(r){return r?v(v({},xe),r):xe},keyboardDisplacement(r=pt){return r}});process.env.NODE_ENV==="development"&&Object.assign(we,{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}}),v(v({},Z),{},{device(r,e,{shared:t,pointer:{touch:n=!1}={}}){if(t.target&&!P.touch&&P.gesture)return"gesture";if(P.touch&&n)return"touch";if(P.touchscreen){if(P.pointer)return"pointer";if(P.touch)return"touch"}},bounds(r,e,{scaleBounds:t={},angleBounds:n={}}){const s=o=>{const u=me(F(t,o),{min:-1/0,max:1/0});return[u.min,u.max]},a=o=>{const u=me(F(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",E.toVector(r,this.lockDirection?[.1,3]:0)},modifierKey(r){return r===void 0?"ctrlKey":r},pinchOnWheel(r=!0){return r}}),v(v({},U),{},{mouseOnly:(r=!0)=>r}),v(v({},U),{},{mouseOnly:(r=!0)=>r});const Ee=new Map,ee=new Map;function gt(r){Ee.set(r.key,r.engine),ee.set(r.key,r.resolver)}const mt={key:"drag",engine:nt,resolver:we};function vt(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 yt(r,e){if(r==null)return{};var t=vt(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 bt={target(r){if(r)return()=>"current"in r?r.current:r},enabled(r=!0){return r},window(r=P.isBrowser?window:void 0){return r},eventOptions({passive:r=!0,capture:e=!1}={}){return{passive:r,capture:e}},transform(r){return r}},_t=["target","eventOptions","window","enabled","transform"];function Y(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]=Y(r[n],s);break;case"boolean":s&&(t[n]=r[n]);break}return t}function xt(r,e,t={}){const n=r,{target:s,eventOptions:a,window:o,enabled:u,transform:d}=n,m=yt(n,_t);if(t.shared=Y({target:s,eventOptions:a,window:o,enabled:u,transform:d},bt),e){const l=ee.get(e);t[e]=Y(v({shared:t.shared},m),l)}else for(const l in m){const _=ee.get(l);if(_)t[l]=Y(v({shared:t.shared},m[l]),_);else if(process.env.NODE_ENV==="development"&&!["drag","pinch","scroll","wheel","move","hover"].includes(l)){if(l==="domTarget")throw Error("[@use-gesture]: `domTarget` option has been renamed to `target`.");console.warn(`[@use-gesture]: Unknown config key \`${l}\` was used. Please read the documentation for further information.`)}}return t}class Te{constructor(e,t){k(this,"_listeners",new Set),this._ctrl=e,this._gestureKey=t}add(e,t,n,s,a){const o=this._listeners,u=We(t,n),d=this._gestureKey?this._ctrl.config[this._gestureKey].eventOptions:{},m=v(v({},d),a);e.addEventListener(u,s,m);const l=()=>{e.removeEventListener(u,s,m),o.delete(l)};return o.add(l),l}clean(){this._listeners.forEach(e=>e()),this._listeners.clear()}}class wt{constructor(){k(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 Et{constructor(e){k(this,"gestures",new Set),k(this,"_targetEventStore",new Te(this)),k(this,"gestureEventStores",{}),k(this,"gestureTimeoutStores",{}),k(this,"handlers",{}),k(this,"config",{}),k(this,"pointerIds",new Set),k(this,"touchIds",new Set),k(this,"state",{shared:{shiftKey:!1,metaKey:!1,ctrlKey:!1,altKey:!1}}),Tt(this,e)}setEventIds(e){if(W(e))return this.touchIds=new Set(He(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=xt(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],d=Se(n,u.eventOptions,!!s);if(u.enabled){const m=Ee.get(o);new m(this,e,o).bind(d)}}const a=Se(n,t.eventOptions,!!s);for(const o in this.nativeHandlers)a(o,"",u=>this.nativeHandlers[o](v(v({},this.state.shared),{},{event:u,args:e})),void 0,!0)}for(const a in n)n[a]=Je(...n[a]);if(!s)return n;for(const a in n){const{device:o,capture:u,passive:d}=ze(a);this._targetEventStore.add(s,o,"",n[a],{capture:u,passive:d})}}}}function j(r,e){r.gestures.add(e),r.gestureEventStores[e]=new Te(r,e),r.gestureTimeoutStores[e]=new wt}function Tt(r,e){e.drag&&j(r,"drag"),e.wheel&&j(r,"wheel"),e.scroll&&j(r,"scroll"),e.move&&j(r,"move"),e.pinch&&j(r,"pinch"),e.hover&&j(r,"hover")}const Se=(r,e,t)=>(n,s,a,o={},u=!1)=>{var d,m;const l=(d=o.capture)!==null&&d!==void 0?d:e.capture,_=(m=o.passive)!==null&&m!==void 0?m:e.passive;let b=u?n:Ke(n,s,l);t&&_&&(b+="Passive"),r[b]=r[b]||[],r[b].push(a)};function St(r,e={},t,n){const s=h.useMemo(()=>new Et(r),[]);if(s.applyHandlers(r,n),s.applyConfig(e,t),h.useEffect(s.effect.bind(s)),h.useEffect(()=>s.clean.bind(s),[]),e.target===void 0)return s.bind.bind(s)}function It(r,e){return gt(mt),St({drag:r},e||{},"drag")}const te="RSC::Event";function kt(){const r=h.useRef(null),e=h.useRef(null);return e.current===null&&(e.current={useListenToCustomEvent(t){h.useEffect(()=>{r.current||(r.current=document.createElement("div"));function n(s){t(s.detail)}return r.current.addEventListener(te,n,!1),()=>{var s;(s=r.current)==null||s.removeEventListener(te,n,!1)}},[t])},emitEvent(t){if(r.current){const n=new CustomEvent(te,{detail:t});r.current.dispatchEvent(n)}}}),e.current}function Ct(r){let e=r.replace(/\/\*[\s\S]*?\*\/|([^:]|^)\/\/.*$/gm,"");return e=e.replace(/[\n\t]+/g," "),e=e.replace(/\s*([{}:;,])\s*/g,"$1"),e=e.replace(/\s+}/g,"}"),e=e.replace(/{\s+/g,"{"),e=e.replace(/\s+/g," "),e.trim()}function Dt({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:d=!0,slideWhenDragThresholdIsReached:m=!0,slideType:l="item",initialActiveItem:_=0}){const[b,O]=h.useState(!1),T=h.useRef(r),C=h.useRef(null),S=h.useRef(null),N=h.useRef(0),I=h.useRef(0),D=h.useRef(!t),$=h.useRef(!1),G=h.useRef(0),f=h.useRef(0),H=h.useRef(e);H.current=e;const ke=h.useRef(t);ke.current=t;const Ce=h.useRef(!1);function De(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 c=e.findIndex(p=>p.id===i);return c<0?(console.warn(`initialActiveItem: item with id "${i}" doesn't exist.`),0):c}const X=J.useSpringRef(),ne=J.useSpring({value:0,ref:X,onChange({value:i}){const c=o==="x"?`translate3d(calc(${i.value}px + var(--${n}-offset-modifier)), 0px, 0px)`:`translate3d(0px, calc(${i.value}px + var(--${n}-offset-modifier)), 0px)`;S.current.style.transform=c}}),Ot=t?e.length*3:e.length,{useListenToCustomEvent:$e,emitEvent:z}=kt();function Pe(){const{totalGutterCssVar:i}=Oe();return i}function At(){if(C.current){const c=window.getComputedStyle(C.current).getPropertyValue(`--${n}-items-per-slide`).trim();return Number(c)||1}return 1}function se(i){T.current&&($.current||R({type:"next",toIndex:i,actionType:"click"}))}function ie(i){T.current&&(D.current||R({type:"prev",toIndex:i,actionType:"click"}))}function R({type:i,shouldAnimate:c=!0,toIndex:p,actionType:y}){var Ae,Ne;const x=!c;D.current=!1,$.current=!1;let g=ne.value.get(),w=0;if(i==="next"&&(f.current+=1),i==="prev"&&(f.current===0?f.current=e.length-1:f.current-=1),p!==void 0&&(f.current=p),i==="next"){const L=oe(t?I.current*(e.length*2):0);w=-(f.current*I.current),t&&f.current===e.length&&(f.current=0,g=g+I.current*e.length,w=0),!t&&(Math.abs(w)>=L||f.current===e.length-1)&&($.current=!0,w=-L)}i==="prev"&&(w=-(f.current*I.current),f.current===e.length-1&&(g=g-e.length*I.current),!t&&w>=0&&(D.current=!0,w=0)),N.current=w;const M=t?f.current%e.length:f.current,B=t?e.length+f.current%e.length:f.current;y==="resize"?(w=-(f.current*I.current),z({eventName:"onResize",sliceActionType:y,slideDirection:i,currentItem:{id:((Ae=e.at(M))==null?void 0:Ae.id)??"",index:M,trackIndex:B,startReached:D.current,endReached:$.current}})):z({eventName:"onSlideStartChange",sliceActionType:y,slideDirection:i,nextItem:{index:M,id:((Ne=e.at(M))==null?void 0:Ne.id)??"",trackIndex:B,startReached:D.current,endReached:$.current}}),X.start({immediate:x,from:{value:g},to:{value:w},onChange({value:L}){const q=o==="x"?`translate3d(calc(${L.value}px + var(--${n}-offset-modifier)), 0px, 0px)`:`translate3d(0px, calc(${L.value}px + var(--${n}-offset-modifier)), 0px)`;S.current.style.transform=q},onRest({finished:L}){var q;if(L){const Me=t?f.current%e.length:f.current,Bt=t?e.length+f.current%e.length:f.current;z({eventName:"onSlideChangeComplete",sliceActionType:y,slideDirection:i,currentItem:{index:Me,id:((q=e.at(Me))==null?void 0:q.id)??"",trackIndex:Bt,startReached:D.current,endReached:$.current}})}}})}function Nt(){const i=S.current;let c=0;return l==="item"?c=i.children[0].getBoundingClientRect()[o==="x"?"width":"height"]+Pe():c=i.getBoundingClientRect()[o==="x"?"width":"height"]+Pe(),c}function oe(i){const c=S.current;return c[o==="x"?"scrollWidth":"scrollHeight"]-c.getBoundingClientRect()[o==="x"?"width":"height"]-i}function Oe(){let i=0,c=0;if(C.current){const p=window.getComputedStyle(C.current),y=p.getPropertyValue(`--${n}-start-end-gutter`).trim();y.includes("px")&&(i=Number(y.replace("px","")));const x=p.getPropertyValue(`--${n}-gutter`).trim();x.includes("px")&&(c=Number(x.replace("px","")))}return{totalStartEndGutterCssVar:i,totalGutterCssVar:c}}h.useEffect(()=>{function i(x){const g=At();switch(x){case"start":return 0;case"middle-start":return Math.floor((g-1)*.25);case"center":return Math.floor((g-1)*.5);case"middle-end":return Math.floor((g-1)*.75);case"end":return g-1;default:return 0}}function c(){I.current=Nt(),G.current=I.current/4;const{totalStartEndGutterCssVar:x}=Oe();let g=0;t&&(g=I.current*e.length),g-=I.current*i(u),g-=x/2,C.current.style.setProperty(`--${n}-offset-modifier`,`${-g}px`)}function p(x){if(C.current&&(c(),O(!0),x)){const g=De(_),w=t?e.length+g%e.length:g;z({eventName:"onInit",index:g,trackIndex:w})}}function y(){p(),R({type:"resize",toIndex:f.current,shouldAnimate:!1,actionType:"resize"})}if(r)return T.current=!0,Ce.current?y():(p(!0),Ce.current=!0),window.addEventListener("resize",y),()=>{window.removeEventListener("resize",y)}},[r,n,o]),h.useEffect(()=>{const i=De(_);r&&i!==f.current&&R({type:"next",toIndex:i,actionType:"resize",shouldAnimate:!1})},[r,_]);const ae=d,Mt=It(i=>{if(!T.current)return;const c=i.dragging,p=i.offset[o==="x"?0:1],y=i.movement[o==="x"?0:1],x=y>G.current,g=y<-G.current,w=i.velocity;c&&(z({...i,eventName:"onDrag",slideActionType:"drag"}),X.start({value:p,immediate:!0,config:{velocity:w},onChange({value:M}){const B=o==="x"?`translate3d(calc(${M.value}px + var(--${n}-offset-modifier)), 0px, 0px)`:`translate3d(0px, calc(${M.value}px + var(--${n}-offset-modifier)), 0px)`;S.current.style.transform=B}}),m&&(x||g)&&i.cancel()),i.last&&(x?(R({actionType:"drag",type:"prev"}),i.cancel()):g?(R({actionType:"drag",type:"next"}),i.cancel()):(X.start({value:N.current,config:{velocity:w},onChange({value:M}){const B=o==="x"?`translate3d(calc(${M.value}px + var(--${n}-offset-modifier)), 0px, 0px)`:`translate3d(0px, calc(${M.value}px + var(--${n}-offset-modifier)), 0px)`;S.current.style.transform=B}}),i.cancel()))},{enabled:ae,axis:o,rubberband:!t,...t?{}:{bounds:()=>({right:0,left:-oe(0),top:-oe(0),bottom:0})},from:()=>[ne.value.get(),ne.value.get()]}),Vt=h.useCallback(i=>{var g;const c=H.current,y=ke.current?c.length+f.current%c.length:f.current;if(typeof i=="number")return y===i;const x=f.current%c.length;return i===((g=c[x])==null?void 0:g.id)},[]),Lt=h.useMemo(()=>Array.from({length:e.length},(i,c)=>()=>{const p=t?f.current%e.length:f.current;return t?c===(p+1)%e.length:p+1>=e.length?!1:c===p+1}),[e.length,t]),jt=h.useMemo(()=>Array.from({length:e.length},(i,c)=>()=>{const p=t?f.current%e.length:f.current;return t?c===(p-1+e.length)%e.length:p-1<0?!1:c===p-1}),[e.length,t]),Rt=h.useMemo(()=>Ct(`
+(function(A,$){typeof exports=="object"&&typeof module<"u"?$(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"],$):(A=typeof globalThis<"u"?globalThis:A||self,$(A["react-spring-carousel"]={},A["react/jsx-runtime"],A["@react-spring/web"],A.React))})(this,function(A,$,Z,h){"use strict";function je(r,e,t){return Math.max(e,Math.min(r,t))}const w={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 le(r,e,t){return e===0||Math.abs(e)===1/0?Math.pow(r,t*5):r*e*t/(e+t*r)}function fe(r,e,t,n=.15){return n===0?je(r,e,t):r<e?-le(e-r,t-e,n)+e:r>t?+le(r-t,t-e,n)+t:r}function Be(r,[e,t],[n,s]){const[[a,o],[l,c]]=r;return[fe(e,a,o,n),fe(t,l,c,s)]}function Ue(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 Ke(r){var e=Ue(r,"string");return typeof e=="symbol"?e:String(e)}function S(r,e,t){return e=Ke(e),e in r?Object.defineProperty(r,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):r[e]=t,r}function de(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?de(Object(t),!0).forEach(function(n){S(r,n,t[n])}):Object.getOwnPropertyDescriptors?Object.defineProperties(r,Object.getOwnPropertyDescriptors(t)):de(Object(t)).forEach(function(n){Object.defineProperty(r,n,Object.getOwnPropertyDescriptor(t,n))})}return r}const he={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 pe(r){return r?r[0].toUpperCase()+r.slice(1):""}const ze=["enter","leave"];function Ge(r=!1,e){return r&&!ze.includes(e)}function Fe(r,e="",t=!1){const n=he[r],s=n&&n[e]||e;return"on"+pe(r)+pe(s)+(Ge(t,s)?"Capture":"")}const We=["gotpointercapture","lostpointercapture"];function Ye(r){let e=r.substring(2).toLowerCase();const t=!!~e.indexOf("passive");t&&(e=e.replace("passive",""));const n=We.includes(e)?"capturecapture":"capture",s=!!~e.indexOf(n);return s&&(e=e.replace("capture","")),{device:e,capture:s,passive:t}}function He(r,e=""){const t=he[r],n=t&&t[e]||e;return r+n}function H(r){return"touches"in r}function ge(r){return H(r)?"touch":"pointerType"in r?r.pointerType:"mouse"}function Xe(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 qe(r){return r.type==="touchend"||r.type==="touchcancel"?r.changedTouches:r.targetTouches}function me(r){return H(r)?qe(r)[0]:r}function Je(r){return Xe(r).map(e=>e.identifier)}function ee(r){const e=me(r);return H(r)?e.identifier:e.pointerId}function ve(r){const e=me(r);return[e.clientX,e.clientY]}function Qe(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 X(r,...e){return typeof r=="function"?r(...e):r}function Ze(){}function et(...r){return r.length===0?Ze:r.length===1?r[0]:function(){let e;for(const t of r)e=t.apply(this,arguments)||e;return e}}function ye(r,e){return Object.assign({},e,r||{})}const tt=32;class rt{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?X(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,Qe(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 E=t._delta.map(Math.abs);w.addTo(t._distance,E)}this.axisIntent&&this.axisIntent(e);const[o,l]=t._movement,[c,p]=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(l)>=p&&b[1])):(f[0]===!1&&(f[0]=Math.abs(o)>=c&&Math.sign(o)*c),f[1]===!1&&(f[1]=Math.abs(l)>=p&&Math.sign(l)*p)),t.intentional=f[0]!==!1||f[1]!==!1,!t.intentional)return;const g=[0,0];if(n.hasCustomTransform){const[E,P]=b;g[0]=f[0]!==!1?E-f[0]:0,g[1]=f[1]!==!1?P-f[1]:0}else g[0]=f[0]!==!1?o-f[0]:0,g[1]=f[1]!==!1?l-f[1]:0;this.restrictToAxis&&!t._blocked&&this.restrictToAxis(g);const x=t.offset,T=t._active&&!t._blocked||t.active;T&&(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=X(n.bounds,t)),this.setup&&this.setup()),t.movement=g,this.computeOffset()));const[L,O]=t.offset,[[C,V],[k,R]]=t._bounds;t.overflow=[L<C?-1:L>V?1:0,O<k?-1:O>R?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 j=t._active?n.rubberband||[0,0]:[0,0];if(t.offset=Be(t._bounds,t.offset,j),t.delta=w.sub(t.offset,x),this.computeMovement(),T&&(!t.last||a>tt)){t.delta=w.sub(t.offset,x);const E=t.delta.map(Math.abs);w.addTo(t.distance,E),t.direction=t.delta.map(Math.sign),t._direction=t._delta.map(Math.sign),!t.first&&a>0&&(t.velocity=[E[0]/a,E[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 nt([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 st extends rt{constructor(...e){super(...e),S(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=w.add(this.state.lastOffset,this.state.movement)}computeMovement(){this.state.movement=w.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[ge(e)]:n.axisThreshold;t.axis=nt(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 be=r=>r,_e=.15,te={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[_e,_e];case!1:return[0,0];default:return w.toVector(r)}},from(r){if(typeof r=="function")return r;if(r!=null)return w.toVector(r)},transform(r,e,t){const n=r||t.shared.transform;if(this.hasCustomTransform=!!n,process.env.NODE_ENV==="development"){const s=n||be;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||be},threshold(r){return w.toVector(r,0)}};process.env.NODE_ENV==="development"&&Object.assign(te,{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 it=0,W=y(y({},te),{},{axis(r,e,{axis:t}){if(this.lockDirection=t==="lock",!this.lockDirection)return t},axisThreshold(r=it){return r},bounds(r={}){if(typeof r=="function")return a=>W.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]]}}),we={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 ot extends st{constructor(...e){super(...e),S(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=W.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=ee(e),n._pointerActive=!0,this.computeValues(ve(e)),this.computeInitial(),t.preventScrollAxis&&ge(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=ee(e);if(t._pointerId!==void 0&&s!==t._pointerId)return;const a=ve(e);if(document.pointerLockElement===e.target?t._delta=[e.movementX,e.movementY]:(t._delta=w.sub(a,t._values),this.computeValues(a)),w.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=ee(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[l,c]=t._delta,[p,f]=t._movement,[b,g]=n.swipe.velocity,[x,T]=n.swipe.distance,L=n.swipe.duration;if(t.elapsedTime<L){const O=Math.abs(l/t.timeDelta),C=Math.abs(c/t.timeDelta);O>b&&Math.abs(p)>x&&(t.swipe[0]=Math.sign(l)),C>g&&Math.abs(f)>T&&(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,at(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=we[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,w.addTo(n._movement,n._delta),this.compute(e),this.emit()}}keyUp(e){e.key in we&&(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 at(r){"persist"in r&&typeof r.persist=="function"&&r.persist()}const Y=typeof window<"u"&&window.document&&window.document.createElement;function xe(){return Y&&"ontouchstart"in window}function ct(){return xe()||Y&&window.navigator.maxTouchPoints>1}function ut(){return Y&&"onpointerdown"in window}function lt(){return Y&&"exitPointerLock"in window.document}function ft(){try{return"constructor"in GestureEvent}catch{return!1}}const D={isBrowser:Y,gesture:ft(),touch:xe(),touchscreen:ct(),pointer:ut(),pointerLock:lt()},dt=250,ht=180,pt=.5,gt=50,mt=250,vt=10,Te={mouse:0,touch:0,pen:8},Ie=y(y({},W),{},{device(r,e,{pointer:{touch:t=!1,lock:n=!1,mouse:s=!1}={}}){return this.pointerLock=n&&D.pointerLock,D.touch&&t?"touch":this.pointerLock?"mouse":D.pointer&&!s?"pointer":D.touch?"touch":"mouse"},preventScrollAxis(r,e,{preventScroll:t}){if(this.preventScrollDelay=typeof t=="number"?t:t||t===void 0&&r?dt:void 0,!(!D.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=w.toVector(r,t?n:s?1:0);return this.filterTaps=t,this.tapsThreshold=n,a},swipe({velocity:r=pt,distance:e=gt,duration:t=mt}={}){return{velocity:this.transform(w.toVector(r)),distance:this.transform(w.toVector(e)),duration:t}},delay(r=0){switch(r){case!0:return ht;case!1:return 0;default:return r}},axisThreshold(r){return r?y(y({},Te),r):Te},keyboardDisplacement(r=vt){return r}});process.env.NODE_ENV==="development"&&Object.assign(Ie,{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({},te),{},{device(r,e,{shared:t,pointer:{touch:n=!1}={}}){if(t.target&&!D.touch&&D.gesture)return"gesture";if(D.touch&&n)return"touch";if(D.touchscreen){if(D.pointer)return"pointer";if(D.touch)return"touch"}},bounds(r,e,{scaleBounds:t={},angleBounds:n={}}){const s=o=>{const l=ye(X(t,o),{min:-1/0,max:1/0});return[l.min,l.max]},a=o=>{const l=ye(X(n,o),{min:-1/0,max:1/0});return[l.min,l.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",w.toVector(r,this.lockDirection?[.1,3]:0)},modifierKey(r){return r===void 0?"ctrlKey":r},pinchOnWheel(r=!0){return r}}),y(y({},W),{},{mouseOnly:(r=!0)=>r}),y(y({},W),{},{mouseOnly:(r=!0)=>r});const Ee=new Map,re=new Map;function yt(r){Ee.set(r.key,r.engine),re.set(r.key,r.resolver)}const bt={key:"drag",engine:ot,resolver:Ie};function _t(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 wt(r,e){if(r==null)return{};var t=_t(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 xt={target(r){if(r)return()=>"current"in r?r.current:r},enabled(r=!0){return r},window(r=D.isBrowser?window:void 0){return r},eventOptions({passive:r=!0,capture:e=!1}={}){return{passive:r,capture:e}},transform(r){return r}},Tt=["target","eventOptions","window","enabled","transform"];function q(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]=q(r[n],s);break;case"boolean":s&&(t[n]=r[n]);break}return t}function It(r,e,t={}){const n=r,{target:s,eventOptions:a,window:o,enabled:l,transform:c}=n,p=wt(n,Tt);if(t.shared=q({target:s,eventOptions:a,window:o,enabled:l,transform:c},xt),e){const f=re.get(e);t[e]=q(y({shared:t.shared},p),f)}else for(const f in p){const b=re.get(f);if(b)t[f]=q(y({shared:t.shared},p[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 Se{constructor(e,t){S(this,"_listeners",new Set),this._ctrl=e,this._gestureKey=t}add(e,t,n,s,a){const o=this._listeners,l=He(t,n),c=this._gestureKey?this._ctrl.config[this._gestureKey].eventOptions:{},p=y(y({},c),a);e.addEventListener(l,s,p);const f=()=>{e.removeEventListener(l,s,p),o.delete(f)};return o.add(f),f}clean(){this._listeners.forEach(e=>e()),this._listeners.clear()}}class Et{constructor(){S(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 St{constructor(e){S(this,"gestures",new Set),S(this,"_targetEventStore",new Se(this)),S(this,"gestureEventStores",{}),S(this,"gestureTimeoutStores",{}),S(this,"handlers",{}),S(this,"config",{}),S(this,"pointerIds",new Set),S(this,"touchIds",new Set),S(this,"state",{shared:{shiftKey:!1,metaKey:!1,ctrlKey:!1,altKey:!1}}),kt(this,e)}setEventIds(e){if(H(e))return this.touchIds=new Set(Je(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=It(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 l=this.config[o],c=ke(n,l.eventOptions,!!s);if(l.enabled){const p=Ee.get(o);new p(this,e,o).bind(c)}}const a=ke(n,t.eventOptions,!!s);for(const o in this.nativeHandlers)a(o,"",l=>this.nativeHandlers[o](y(y({},this.state.shared),{},{event:l,args:e})),void 0,!0)}for(const a in n)n[a]=et(...n[a]);if(!s)return n;for(const a in n){const{device:o,capture:l,passive:c}=Ye(a);this._targetEventStore.add(s,o,"",n[a],{capture:l,passive:c})}}}}function K(r,e){r.gestures.add(e),r.gestureEventStores[e]=new Se(r,e),r.gestureTimeoutStores[e]=new Et}function kt(r,e){e.drag&&K(r,"drag"),e.wheel&&K(r,"wheel"),e.scroll&&K(r,"scroll"),e.move&&K(r,"move"),e.pinch&&K(r,"pinch"),e.hover&&K(r,"hover")}const ke=(r,e,t)=>(n,s,a,o={},l=!1)=>{var c,p;const f=(c=o.capture)!==null&&c!==void 0?c:e.capture,b=(p=o.passive)!==null&&p!==void 0?p:e.passive;let g=l?n:Fe(n,s,f);t&&b&&(g+="Passive"),r[g]=r[g]||[],r[g].push(a)};function Dt(r,e={},t,n){const s=h.useMemo(()=>new St(r),[]);if(s.applyHandlers(r,n),s.applyConfig(e,t),h.useEffect(s.effect.bind(s)),h.useEffect(()=>s.clean.bind(s),[]),e.target===void 0)return s.bind.bind(s)}function Ct(r,e){return yt(bt),Dt({drag:r},e||{},"drag")}function At(r){const{type:e,actionType:t,toIndex:n,itemsLength:s,withLoop:a,scrollAmount:o,totalAvailable:l}=r;let c=r.currentActive,p=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 g=0;e==="next"&&(g=-(c*o),a&&c===s&&(c=0,p=p+o*s,g=0),!a&&(Math.abs(g)>=l||c===s-1)&&(b=!0,g=-l)),e==="prev"&&(g=-(c*o),c===s-1&&(p=p-s*o),!a&&g>=0&&(f=!0,g=0)),t==="resize"&&(g=-(c*o));const x=a?c%s:c,T=a?s+c%s:c;return{newActive:c,fromValue:p,toValue:g,startReached:f,endReached:b,logicalIndex:x,realTrackIndex:T}}function J(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 $t(){const r=h.useRef(null);r.current===null&&(r.current=new Set);const e=h.useRef(null);return e.current===null&&(e.current={useListenToCustomEvent(t){h.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 Ot({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:l="start",enableGestures:c=!0,slideWhenDragThresholdIsReached:p=!0,slideType:f="item",initialActiveItem:b=0,renderWindow:g,renderPlaceholder:x}){const[T,L]=h.useState(!1),[,O]=h.useState(0),C=h.useRef(r),V=h.useRef(null),k=h.useRef(null),R=h.useRef(0),j=h.useRef(0),E=h.useRef(!t),P=h.useRef(!1),se=h.useRef(0),_=h.useRef(0),Ce=h.useRef(e);Ce.current=e;const Ae=h.useRef(t);Ae.current=t;const $e=h.useRef(!1),U=h.useRef(null),N=h.useRef(null);function Oe(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 u=e.findIndex(v=>v.id===i);return u<0?(console.warn(`initialActiveItem: item with id "${i}" doesn't exist.`),0):u}const Q=Z.useSpringRef(),ie=Z.useSpring({value:0,ref:Q,onChange({value:i}){k.current.style.transform=J(i.value,o,n)}}),Mt=t?e.length*3:e.length,{useListenToCustomEvent:Pe,emitEvent:z}=$t();function Ne(i){if(!i||i.length===0)return null;let u=null,v=-1/0;for(const m of i)(m.media?window.matchMedia(m.media).matches:window.innerWidth>=m.breakpoint)&&m.breakpoint>=v&&(u=m,v=m.breakpoint);return u}function Me(){const{totalGutterCssVar:i}=Le();return i}function Lt(){const i=Ne(a);return(i==null?void 0:i.itemsPerSlide)||1}function oe(i){C.current&&(P.current||G({type:"next",toIndex:i,actionType:"click"}))}function ae(i){C.current&&(E.current||G({type:"prev",toIndex:i,actionType:"click"}))}function G({type:i,shouldAnimate:u=!0,toIndex:v,actionType:m}){var M,B;const I=!u;E.current=!1,P.current=!1;const d=At({type:i,actionType:m,toIndex:v,currentActive:_.current,itemsLength:e.length,withLoop:t,scrollAmount:j.current,totalAvailable:i==="next"?ce(t?j.current*(e.length*2):0):0,fromValueRaw:ie.value.get()});_.current=d.newActive,E.current=d.startReached,P.current=d.endReached,R.current=d.toValue,g!==void 0&&O(F=>F+1),z(m==="resize"?{eventName:"onResize",sliceActionType:m,slideDirection:i,currentItem:{id:((M=e.at(d.logicalIndex))==null?void 0:M.id)??"",index:d.logicalIndex,trackIndex:d.realTrackIndex,startReached:E.current,endReached:P.current}}:{eventName:"onSlideStartChange",sliceActionType:m,slideDirection:i,nextItem:{index:d.logicalIndex,id:((B=e.at(d.logicalIndex))==null?void 0:B.id)??"",trackIndex:d.realTrackIndex,startReached:E.current,endReached:P.current}}),Q.start({immediate:I,from:{value:d.fromValue},to:{value:d.toValue},onChange({value:F}){k.current.style.transform=J(F.value,o,n)},onRest({finished:F}){var Ve;if(F){const Re=t?_.current%e.length:_.current,Ft=t?e.length+_.current%e.length:_.current;z({eventName:"onSlideChangeComplete",sliceActionType:m,slideDirection:i,currentItem:{index:Re,id:((Ve=e.at(Re))==null?void 0:Ve.id)??"",trackIndex:Ft,startReached:E.current,endReached:P.current}})}}})}function Vt(){const i=k.current;let u=0;return f==="item"?u=i.children[0].getBoundingClientRect()[o==="x"?"width":"height"]+Me():u=i.getBoundingClientRect()[o==="x"?"width":"height"]+Me(),u}function ce(i){const u=k.current;return u[o==="x"?"scrollWidth":"scrollHeight"]-u.getBoundingClientRect()[o==="x"?"width":"height"]-i}function Le(){const i=Ne(s);return{totalGutterCssVar:(i==null?void 0:i.gutter)||0,totalStartEndGutterCssVar:((i==null?void 0:i.startEndGutter)||0)*2}}h.useEffect(()=>{function i(I){const d=Lt();switch(I){case"start":return 0;case"middle-start":return Math.floor((d-1)*.25);case"center":return Math.floor((d-1)*.5);case"middle-end":return Math.floor((d-1)*.75);case"end":return d-1;default:return 0}}function u(){j.current=Vt(),se.current=j.current/4;const{totalStartEndGutterCssVar:I}=Le();let d=0;t&&(d=j.current*e.length),d-=j.current*i(l),d-=I/2,V.current.style.setProperty(`--${n}-offset-modifier`,`${-d}px`)}function v(I){if(V.current&&(u(),L(!0),I)){const d=Oe(b),M=t?e.length+d%e.length:d;z({eventName:"onInit",index:d,trackIndex:M})}}function m(){v(),G({type:"resize",toIndex:_.current,shouldAnimate:!1,actionType:"resize"})}if(r)return C.current=!0,$e.current?m():(v(!0),$e.current=!0),window.addEventListener("resize",m),()=>{window.removeEventListener("resize",m)}},[r,n,o,t]),h.useEffect(()=>{const i=Oe(b);r&&i!==_.current&&G({type:"next",toIndex:i,actionType:"resize",shouldAnimate:!1})},[r,b]);const ue=c;function Rt(){if(N.current!==null&&(cancelAnimationFrame(N.current),N.current=null),U.current){const i=U.current;U.current=null,z(i)}}function jt(i){U.current=i,N.current===null&&(N.current=requestAnimationFrame(()=>{N.current=null;const u=U.current;U.current=null,u&&z(u)}))}h.useEffect(()=>()=>{N.current!==null&&(cancelAnimationFrame(N.current),N.current=null),U.current=null},[]);const Bt=Ct(i=>{if(!C.current)return;const u=i.dragging,v=i.offset[o==="x"?0:1],m=i.movement[o==="x"?0:1],I=m>se.current,d=m<-se.current,M=i.velocity;u&&(jt({...i,eventName:"onDrag",slideActionType:"drag"}),Q.start({value:v,immediate:!0,config:{velocity:M},onChange({value:B}){k.current.style.transform=J(B.value,o,n)}}),p&&(I||d)&&i.cancel()),i.last&&(Rt(),I?(G({actionType:"drag",type:"prev"}),i.cancel()):d?(G({actionType:"drag",type:"next"}),i.cancel()):(Q.start({value:R.current,config:{velocity:M},onChange({value:B}){k.current.style.transform=J(B.value,o,n)}}),i.cancel()))},{enabled:ue,axis:o,rubberband:!t,...t?{}:{bounds:()=>({right:0,left:-ce(0),top:-ce(0),bottom:0})},from:()=>[ie.value.get(),ie.value.get()]}),Ut=h.useCallback(i=>{var d;const u=Ce.current,m=Ae.current?u.length+_.current%u.length:_.current;if(typeof i=="number")return m===i;const I=_.current%u.length;return i===((d=u[I])==null?void 0:d.id)},[]),Kt=h.useMemo(()=>Array.from({length:e.length},(i,u)=>()=>{const v=t?_.current%e.length:_.current;return t?u===(v+1)%e.length:v+1>=e.length?!1:u===v+1}),[e.length,t]),zt=h.useMemo(()=>Array.from({length:e.length},(i,u)=>()=>{const v=t?_.current%e.length:_.current;return t?u===(v-1+e.length)%e.length:v-1<0?!1:u===v-1}),[e.length,t]),Gt=h.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: ${ae?o==="x"?"pan-y":"pan-x":"auto"};
+              touch-action: ${ue?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"&&!b?"var(--initial-offset-modifier)":"0px"};
-              top: ${t&&o==="y"&&!b?"var(--initial-offset-modifier)":"0px"};
+              left: ${t&&o==="x"&&!T?"var(--initial-offset-modifier)":"0px"};
+              top: ${t&&o==="y"&&!T?"var(--initial-offset-modifier)":"0px"};
               flex-direction: ${o==="x"?"row":"column"};
               width: 100%;
               height: 100%;
@@ -29,7 +29,7 @@
               display: flex;
               flex: 1 0 calc(100% / var(--${n}-items-per-slide) - calc(var(--${n}-gutter) * (var(--${n}-items-per-slide) - 1)) / var(--${n}-items-per-slide) - calc(var(--${n}-start-end-gutter) / var(--${n}-items-per-slide)));
             }
-            ${s&&s.length>0?s.slice().sort((i,c)=>i.breakpoint-c.breakpoint).map(i=>`
+            ${s&&s.length>0?s.slice().sort((i,u)=>i.breakpoint-u.breakpoint).map(i=>`
                   @media ${i.media||`(min-width: ${i.breakpoint}px)`} {
                     [data-part-internal="${n}-Container"] {
                       --${n}-gutter: ${i.gutter||0}px;
@@ -37,11 +37,11 @@
                     }
                   }
                 `).join(""):""}
-            ${a&&a.length>0?a.slice().sort((i,c)=>i.breakpoint-c.breakpoint).map(i=>`
+            ${a&&a.length>0?a.slice().sort((i,u)=>i.breakpoint-u.breakpoint).map(i=>`
                   @media ${i.media||`(min-width: ${i.breakpoint}px)`} {
                     [data-part-internal="${n}-Container"] {
                       --${n}-items-per-slide: ${i.itemsPerSlide||1};
                     }
                   }
                 `).join(""):""}
-          `),[n,o,ae,e.length,t,b,s,a]);return{carouselFragment:V.jsxs("div",{ref:C,className:"ReactSpringCarouselContainer","data-part":"Container","data-part-internal":`${n}-Container`,...Mt(),children:[V.jsx("style",{dangerouslySetInnerHTML:{__html:Rt}}),V.jsx("div",{ref:S,className:"ReactSpringCarouselTrack","data-part":"Track","data-part-internal":`${n}-Track`,onScroll:()=>{D.current=!1,$.current=!1},children:Array.from({length:Ot},(i,c)=>{const p=t?c%e.length:c,y=e[p],x=t&&(c<e.length||c>=e.length*2),g=Lt[p],w=jt[p];return V.jsx("div",{className:"ReactSpringCarouselItem","data-part":"Item","data-part-internal":`${n}-Item`,"data-id":y.id,children:typeof y.renderItem=="function"?y.renderItem({useListenToCustomEvent:$e,index:c,isClonedItem:x,isActiveItem:Vt,isNextItem:g,isPrevItem:w}):y.renderItem},`${y.id}-${c}`)})})]}),useListenToCustomEvent:$e,slideToNextItem:()=>se(),slideToPrevItem:()=>ie(),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>f.current?se(i):ie(i)}if(typeof i=="string"){const c=e.findIndex(p=>p.id===i);if(c<0){console.warn(`The item you're trying to slide doesn't exist. id: ${i}`);return}c>f.current?se(c):ie(c)}}}}function $t(r){let e=0;const t=getComputedStyle(r).getPropertyValue("gap");return t.includes("px")&&(e=Number(t.replace("px",""))),e}function Ie(r){return r.scrollWidth-r.clientWidth}function re(r){const e=r.children[0],t=$t(r);return e.getBoundingClientRect().width+t}function Pt({container:r,onReach:e}){const t=h.useRef("start"),n=h.useRef(0),[,s]=J.useSpring(()=>({x:0}));function a(u){s.start({from:{x:r.current.scrollLeft},to:{x:u},onChange({value:d}){r.current&&(r.current.scrollLeft=d.x)}})}function o(u){if(!r.current||u==="next"&&t.current==="end"||u==="prev"&&t.current==="start")return;let d=0;if(u==="next"&&(n.current+=1),u==="prev"&&(n.current-=1),d=n.current*re(r.current),u==="next"){const m=Ie(r.current);d>m&&(t.current="end",d=m,e&&e("end"))}u==="prev"&&d<=0&&(t.current="start",n.current=0,d=0,e&&e("start")),a(d)}return h.useEffect(()=>{function u(){var I;const O=re(r.current),T=((I=[...r.current.children].at(0))==null?void 0:I.getBoundingClientRect().width)||0,C=Array(r.current.childElementCount).fill(0).map((D,$)=>({index:$,start:O*$,end:O*($+1)})),S=r.current.scrollLeft+T,N=C.find(D=>S>=D.start&&S<D.end);n.current=(N==null?void 0:N.index)||0}function d(){s.stop()}function m(O){const T=O.target;T.scrollLeft===0?(n.current=0,t.current="start",e&&e("start")):T.scrollLeft>=Ie(T)?(t.current="end",e&&e("end")):t.current!=="idle"&&(t.current="idle",e&&e("idle"))}let l,_=0;function b(){_=r.current.scrollLeft,clearTimeout(l),l=setTimeout(function(){r.current.scrollLeft===_&&u()},200)}if(r.current)return r.current.addEventListener("wheel",d,{passive:!0}),r.current.addEventListener("scroll",m),r.current.addEventListener("scroll",b),()=>{r.current&&(r.current.removeEventListener("scroll",b),r.current.removeEventListener("scroll",m),r.current.removeEventListener("wheel",d))}},[r,e]),h.useEffect(()=>{if(r.current){const u=new ResizeObserver(()=>{a(n.current*re(r.current))});return u.observe(r.current),()=>{u.disconnect()}}},[]),{scrollToNext(){o("next")},scrollToPrev(){o("prev")}}}A.useSpringCarousel=Dt,A.useSpringScroll=Pt,Object.defineProperty(A,Symbol.toStringTag,{value:"Module"})});
+          `,[n,o,ue,e.length,t,T,s,a]);return{carouselFragment:$.jsxs("div",{ref:V,className:"ReactSpringCarouselContainer","data-part":"Container","data-part-internal":`${n}-Container`,...Bt(),children:[$.jsx("style",{dangerouslySetInnerHTML:{__html:Gt}}),$.jsx("div",{ref:k,className:"ReactSpringCarouselTrack","data-part":"Track","data-part-internal":`${n}-Track`,onScroll:()=>{E.current=!1,P.current=!1},children:Array.from({length:Mt},(i,u)=>{const v=t?u%e.length:u,m=e[v],I=t&&(u<e.length||u>=e.length*2);if(g!==void 0){const B=t?e.length+_.current%e.length:_.current;if(Math.abs(u-B)>g)return $.jsx("div",{className:"ReactSpringCarouselItem","data-part":"Item","data-part-internal":`${n}-Item`,"data-id":m.id,"aria-hidden":"true",children:x==null?void 0:x({item:m,index:u,isClonedItem:I})},`${m.id}-${u}`)}const d=Kt[v],M=zt[v];return $.jsx("div",{className:"ReactSpringCarouselItem","data-part":"Item","data-part-internal":`${n}-Item`,"data-id":m.id,children:typeof m.renderItem=="function"?m.renderItem({useListenToCustomEvent:Pe,index:u,isClonedItem:I,isActiveItem:Ut,isNextItem:d,isPrevItem:M}):m.renderItem},`${m.id}-${u}`)})})]}),useListenToCustomEvent:Pe,slideToNextItem:()=>oe(),slideToPrevItem:()=>ae(),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>_.current?oe(i):ae(i)}if(typeof i=="string"){const u=e.findIndex(v=>v.id===i);if(u<0){console.warn(`The item you're trying to slide doesn't exist. id: ${i}`);return}u>_.current?oe(u):ae(u)}}}}function Pt(r){let e=0;const t=getComputedStyle(r).getPropertyValue("gap");return t.includes("px")&&(e=Number(t.replace("px",""))),e}function De(r){return r.scrollWidth-r.clientWidth}function ne(r){const e=r.children[0],t=Pt(r);return e.getBoundingClientRect().width+t}function Nt({container:r,onReach:e}){const t=h.useRef("start"),n=h.useRef(0),[,s]=Z.useSpring(()=>({x:0}));function a(l){s.start({from:{x:r.current.scrollLeft},to:{x:l},onChange({value:c}){r.current&&(r.current.scrollLeft=c.x)}})}function o(l){if(!r.current||l==="next"&&t.current==="end"||l==="prev"&&t.current==="start")return;let c=0;if(l==="next"&&(n.current+=1),l==="prev"&&(n.current-=1),c=n.current*ne(r.current),l==="next"){const p=De(r.current);c>p&&(t.current="end",c=p,e&&e("end"))}l==="prev"&&c<=0&&(t.current="start",n.current=0,c=0,e&&e("start")),a(c)}return h.useEffect(()=>{function l(){var V;const x=ne(r.current),T=((V=[...r.current.children].at(0))==null?void 0:V.getBoundingClientRect().width)||0,L=Array(r.current.childElementCount).fill(0).map((k,R)=>({index:R,start:x*R,end:x*(R+1)})),O=r.current.scrollLeft+T,C=L.find(k=>O>=k.start&&O<k.end);n.current=(C==null?void 0:C.index)||0}function c(){s.stop()}function p(x){const T=x.target;T.scrollLeft===0?(n.current=0,t.current="start",e&&e("start")):T.scrollLeft>=De(T)?(t.current="end",e&&e("end")):t.current!=="idle"&&(t.current="idle",e&&e("idle"))}let f,b=0;function g(){b=r.current.scrollLeft,clearTimeout(f),f=setTimeout(function(){r.current.scrollLeft===b&&l()},200)}if(r.current)return r.current.addEventListener("wheel",c,{passive:!0}),r.current.addEventListener("scroll",p),r.current.addEventListener("scroll",g),()=>{r.current&&(r.current.removeEventListener("scroll",g),r.current.removeEventListener("scroll",p),r.current.removeEventListener("wheel",c))}},[r,e]),h.useEffect(()=>{if(r.current){const l=new ResizeObserver(()=>{a(n.current*ne(r.current))});return l.observe(r.current),()=>{l.disconnect()}}},[]),{scrollToNext(){o("next")},scrollToPrev(){o("prev")}}}A.useSpringCarousel=Ot,A.useSpringScroll=Nt,Object.defineProperty(A,Symbol.toStringTag,{value:"Module"})});

package/dist/types.d.ts

@@ -43,6 +43,25 @@ type BaseProps = {
     slideWhenDragThresholdIsReached?: boolean;
     initialActiveItem?: number | string;
     slideType?: "item" | "container";
+    /**
+     * If set, only renders items within `renderWindow` slots from the active
+     * one. Other slots become empty placeholders sized identically. Use to
+     * reduce mount cost with many heavy items (e.g. video players).
+     * Recommended minimum: 1 (active + immediate neighbors).
+     */
+    renderWindow?: number;
+    /**
+     * Optional render function called for items OUTSIDE the `renderWindow`.
+     * Receives the original `item`, its track `index`, and `isClonedItem`.
+     * Use it to render lightweight content (skeletons, posters) in place of
+     * the heavy `renderItem` for off-window slots. Has no effect when
+     * `renderWindow` is undefined.
+     */
+    renderPlaceholder?: (props: {
+        item: Item;
+        index: number;
+        isClonedItem: boolean;
+    }) => ReactNode;
 };
 export type Props = BaseProps & LayoutProps;
 export type SlideActionType = "drag" | "click" | "resize";

package/dist/useSpringCarousel.d.ts

@@ -1,5 +1,5 @@
 import { Props } from './types';
-export declare function useSpringCarousel({ init, items, withLoop, id, gutter, itemsPerSlide, carouselAxis, startingPosition, enableGestures, slideWhenDragThresholdIsReached, slideType, initialActiveItem, }: Props): {
+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: import('./types').SpringCarouselEventsEventHandler) => void;
     slideToNextItem: () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-spring-carousel",
-  "version": "3.0.0-beta-2.1.0",
+  "version": "3.0.0-beta-2.1.2",
   "type": "module",
   "license": "MIT",
   "main": "./dist/index.umd.js",
@@ -20,6 +20,8 @@
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
@@ -34,9 +36,9 @@
     "react-dom": "^18.0.0 || ^19"
   },
   "devDependencies": {
-    "@react-spring/web": "^10.0.3",
     "@chromatic-com/storybook": "^3.2.6",
     "@eslint/js": "^9.23.0",
+    "@react-spring/web": "^10.0.3",
     "@storybook/addon-essentials": "^8.6.12",
     "@storybook/addon-interactions": "^8.6.12",
     "@storybook/addon-links": "^8.6.12",
@@ -64,7 +66,8 @@
     "typescript": "^5.8.2",
     "typescript-eslint": "^8.29.0",
     "vite": "^6.2.5",
-    "vite-plugin-dts": "^4.5.3"
+    "vite-plugin-dts": "^4.5.3",
+    "vitest": "^4.1.5"
   },
   "eslintConfig": {
     "extends": [

package/dist/utils.d.ts

@@ -1,6 +0,0 @@
-/**
- * Simple CSS minifier that removes unnecessary whitespace and comments
- * @param css The CSS content to minify
- * @returns The minified CSS string
- */
-export declare function minifyCSS(css: string): string;