react-spring-carousel 3.0.0-beta-1.0.2 → 3.0.0-beta-1.0.31

package/dist/index.cjs.js

@@ -0,0 +1,51 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const Y=require("react/jsx-runtime"),E=require("react"),_e=require("@react-spring/web"),de="RSC::Event";function He(){const r=E.useRef(null);function e(n){E.useEffect(()=>{r.current||(r.current=document.createElement("div"));function i(c){n(c.detail)}if(r.current)return r.current.addEventListener(de,i,!1),()=>{var c;(c=r.current)==null||c.removeEventListener(de,i,!1)}},[n])}function t(n){if(r.current){const i=new CustomEvent(de,{detail:n});r.current.dispatchEvent(i)}}return{useListenToCustomEvent:e,emitEvent:t}}function ze(r,e,t){return Math.max(e,Math.min(r,t))}const D={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 we(r,e,t){return e===0||Math.abs(e)===1/0?Math.pow(r,t*5):r*e*t/(e+t*r)}function xe(r,e,t,n=.15){return n===0?ze(r,e,t):r<e?-we(e-r,t-e,n)+e:r>t?+we(r-t,t-e,n)+t:r}function Ye(r,[e,t],[n,i]){const[[c,s],[d,p]]=r;return[xe(e,c,s,n),xe(t,d,p,i)]}function Xe(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||"default");if(typeof n!="object")return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return(e==="string"?String:Number)(r)}function qe(r){var e=Xe(r,"string");return typeof e=="symbol"?e:String(e)}function O(r,e,t){return e=qe(e),e in r?Object.defineProperty(r,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):r[e]=t,r}function Ie(r,e){var t=Object.keys(r);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(r);e&&(n=n.filter(function(i){return Object.getOwnPropertyDescriptor(r,i).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?Ie(Object(t),!0).forEach(function(n){O(r,n,t[n])}):Object.getOwnPropertyDescriptors?Object.defineProperties(r,Object.getOwnPropertyDescriptors(t)):Ie(Object(t)).forEach(function(n){Object.defineProperty(r,n,Object.getOwnPropertyDescriptor(t,n))})}return r}const Re={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 Ee(r){return r?r[0].toUpperCase()+r.slice(1):""}const Je=["enter","leave"];function Qe(r=!1,e){return r&&!Je.includes(e)}function Ze(r,e="",t=!1){const n=Re[r],i=n&&n[e]||e;return"on"+Ee(r)+Ee(i)+(Qe(t,i)?"Capture":"")}const et=["gotpointercapture","lostpointercapture"];function tt(r){let e=r.substring(2).toLowerCase();const t=!!~e.indexOf("passive");t&&(e=e.replace("passive",""));const n=et.includes(e)?"capturecapture":"capture",i=!!~e.indexOf(n);return i&&(e=e.replace("capture","")),{device:e,capture:i,passive:t}}function rt(r,e=""){const t=Re[r],n=t&&t[e]||e;return r+n}function ae(r){return"touches"in r}function Ae(r){return ae(r)?"touch":"pointerType"in r?r.pointerType:"mouse"}function nt(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 it(r){return r.type==="touchend"||r.type==="touchcancel"?r.changedTouches:r.targetTouches}function Me(r){return ae(r)?it(r)[0]:r}function st(r){return nt(r).map(e=>e.identifier)}function he(r){const e=Me(r);return ae(r)?e.identifier:e.pointerId}function Se(r){const e=Me(r);return[e.clientX,e.clientY]}function ot(r){const e={};if("buttons"in r&&(e.buttons=r.buttons),"shiftKey"in r){const{shiftKey:t,altKey:n,metaKey:i,ctrlKey:c}=r;Object.assign(e,{shiftKey:t,altKey:n,metaKey:i,ctrlKey:c})}return e}function ce(r,...e){return typeof r=="function"?r(...e):r}function ct(){}function at(...r){return r.length===0?ct:r.length===1?r[0]:function(){let e;for(const t of r)e=t.apply(this,arguments)||e;return e}}function Te(r,e){return Object.assign({},e,r||{})}const ut=32;class lt{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:i}=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=i,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?ce(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:i}=this;t.args=this.args;let c=0;if(e&&(t.event=e,n.preventDefault&&e.cancelable&&t.event.preventDefault(),t.type=e.type,i.touches=this.ctrl.pointerIds.size||this.ctrl.touchIds.size,i.locked=!!document.pointerLockElement,Object.assign(i,ot(e)),i.down=i.pressed=i.buttons%2===1||i.touches>0,c=e.timeStamp-t.timeStamp,t.timeStamp=e.timeStamp,t.elapsedTime=t.timeStamp-t.startTime),t._active){const V=t._delta.map(Math.abs);D.addTo(t._distance,V)}this.axisIntent&&this.axisIntent(e);const[s,d]=t._movement,[p,x]=n.threshold,{_step:l,values:A}=t;if(n.hasCustomTransform?(l[0]===!1&&(l[0]=Math.abs(s)>=p&&A[0]),l[1]===!1&&(l[1]=Math.abs(d)>=x&&A[1])):(l[0]===!1&&(l[0]=Math.abs(s)>=p&&Math.sign(s)*p),l[1]===!1&&(l[1]=Math.abs(d)>=x&&Math.sign(d)*x)),t.intentional=l[0]!==!1||l[1]!==!1,!t.intentional)return;const k=[0,0];if(n.hasCustomTransform){const[V,T]=A;k[0]=l[0]!==!1?V-l[0]:0,k[1]=l[1]!==!1?T-l[1]:0}else k[0]=l[0]!==!1?s-l[0]:0,k[1]=l[1]!==!1?d-l[1]:0;this.restrictToAxis&&!t._blocked&&this.restrictToAxis(k);const P=t.offset,$=t._active&&!t._blocked||t.active;$&&(t.first=t._active&&!t.active,t.last=!t._active&&t.active,t.active=i[this.ingKey]=t._active,e&&(t.first&&("bounds"in n&&(t._bounds=ce(n.bounds,t)),this.setup&&this.setup()),t.movement=k,this.computeOffset()));const[F,_]=t.offset,[[S,L],[q,J]]=t._bounds;t.overflow=[F<S?-1:F>L?1:0,_<q?-1:_>J?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 m=t._active?n.rubberband||[0,0]:[0,0];if(t.offset=Ye(t._bounds,t.offset,m),t.delta=D.sub(t.offset,P),this.computeMovement(),$&&(!t.last||c>ut)){t.delta=D.sub(t.offset,P);const V=t.delta.map(Math.abs);D.addTo(t.distance,V),t.direction=t.delta.map(Math.sign),t._direction=t._delta.map(Math.sign),!t.first&&c>0&&(t.velocity=[V[0]/c,V[1]/c],t.timeDelta=c)}}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 i=this.handler(y(y(y({},t),e),{},{[this.aliasKey]:e.values}));i!==void 0&&(e.memo=i)}clean(){this.eventStore.clean(),this.timeoutStore.clean()}}function ft([r,e],t){const n=Math.abs(r),i=Math.abs(e);if(n>i&&n>t)return"x";if(i>n&&i>t)return"y"}class dt extends lt{constructor(...e){super(...e),O(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=D.add(this.state.lastOffset,this.state.movement)}computeMovement(){this.state.movement=D.sub(this.state.offset,this.state.lastOffset)}axisIntent(e){const t=this.state,n=this.config;if(!t.axis&&e){const i=typeof n.axisThreshold=="object"?n.axisThreshold[Ae(e)]:n.axisThreshold;t.axis=ft(t._movement,i)}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 De=r=>r,ke=.15,me={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[ke,ke];case!1:return[0,0];default:return D.toVector(r)}},from(r){if(typeof r=="function")return r;if(r!=null)return D.toVector(r)},transform(r,e,t){const n=r||t.shared.transform;if(this.hasCustomTransform=!!n,process.env.NODE_ENV==="development"){const i=n||De;return c=>{const s=i(c);return(!isFinite(s[0])||!isFinite(s[1]))&&console.warn(`[@use-gesture]: config.transform() must produce a valid result, but it was: [${s[0]},${[1]}]`),s}}return n||De},threshold(r){return D.toVector(r,0)}};process.env.NODE_ENV==="development"&&Object.assign(me,{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 ht=0,te=y(y({},me),{},{axis(r,e,{axis:t}){if(this.lockDirection=t==="lock",!this.lockDirection)return t},axisThreshold(r=ht){return r},bounds(r={}){if(typeof r=="function")return c=>te.bounds(r(c));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:i=1/0}=r;return[[e,t],[n,i]]}}),Ce={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 pt extends dt{constructor(...e){super(...e),O(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(),i={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=te.bounds(i)}}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 i=this.ctrl.setEventIds(e);t.pointerCapture&&e.target.setPointerCapture(e.pointerId),!(i&&i.size>1&&n._pointerActive)&&(this.start(e),this.setupPointer(e),n._pointerId=he(e),n._pointerActive=!0,this.computeValues(Se(e)),this.computeInitial(),t.preventScrollAxis&&Ae(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 i=he(e);if(t._pointerId!==void 0&&i!==t._pointerId)return;const c=Se(e);if(document.pointerLockElement===e.target?t._delta=[e.movementX,e.movementY]:(t._delta=D.sub(c,t._values),this.computeValues(c)),D.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 i=he(e);if(t._pointerId!==void 0&&i!==t._pointerId)return;this.state._pointerActive=!1,this.setActive(),this.compute(e);const[c,s]=t._distance;if(t.tap=c<=n.tapsThreshold&&s<=n.tapsThreshold,t.tap&&n.filterTaps)t._force=!0;else{const[d,p]=t._delta,[x,l]=t._movement,[A,k]=n.swipe.velocity,[P,$]=n.swipe.distance,F=n.swipe.duration;if(t.elapsedTime<F){const _=Math.abs(d/t.timeDelta),S=Math.abs(p/t.timeDelta);_>A&&Math.abs(x)>P&&(t.swipe[0]=Math.sign(d)),S>k&&Math.abs(l)>$&&(t.swipe[1]=Math.sign(p))}}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 i="uv"in e?e.sourceEvent.currentTarget:e.currentTarget;window.getComputedStyle(i).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.",i)}}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,gt(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=Ce[e.key];if(t){const n=this.state,i=e.shiftKey?10:e.altKey?.1:1;this.start(e),n._delta=t(this.config.keyboardDisplacement,i),n._keyboardActive=!0,D.addTo(n._movement,n._delta),this.compute(e),this.emit()}}keyUp(e){e.key in Ce&&(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 gt(r){"persist"in r&&typeof r.persist=="function"&&r.persist()}const re=typeof window<"u"&&window.document&&window.document.createElement;function Ne(){return re&&"ontouchstart"in window}function mt(){return Ne()||re&&window.navigator.maxTouchPoints>1}function vt(){return re&&"onpointerdown"in window}function bt(){return re&&"exitPointerLock"in window.document}function yt(){try{return"constructor"in GestureEvent}catch{return!1}}const N={isBrowser:re,gesture:yt(),touch:Ne(),touchscreen:mt(),pointer:vt(),pointerLock:bt()},_t=250,wt=180,xt=.5,It=50,Et=250,St=10,Oe={mouse:0,touch:0,pen:8},$e=y(y({},te),{},{device(r,e,{pointer:{touch:t=!1,lock:n=!1,mouse:i=!1}={}}){return this.pointerLock=n&&N.pointerLock,N.touch&&t?"touch":this.pointerLock?"mouse":N.pointer&&!i?"pointer":N.touch?"touch":"mouse"},preventScrollAxis(r,e,{preventScroll:t}){if(this.preventScrollDelay=typeof t=="number"?t:t||t===void 0&&r?_t: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:i=!0}={}}){return this.pointerButtons=n,this.keys=i,!this.pointerLock&&this.device==="pointer"&&t},threshold(r,e,{filterTaps:t=!1,tapsThreshold:n=3,axis:i=void 0}){const c=D.toVector(r,t?n:i?1:0);return this.filterTaps=t,this.tapsThreshold=n,c},swipe({velocity:r=xt,distance:e=It,duration:t=Et}={}){return{velocity:this.transform(D.toVector(r)),distance:this.transform(D.toVector(e)),duration:t}},delay(r=0){switch(r){case!0:return wt;case!1:return 0;default:return r}},axisThreshold(r){return r?y(y({},Oe),r):Oe},keyboardDisplacement(r=St){return r}});process.env.NODE_ENV==="development"&&Object.assign($e,{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({},me),{},{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 i=s=>{const d=Te(ce(t,s),{min:-1/0,max:1/0});return[d.min,d.max]},c=s=>{const d=Te(ce(n,s),{min:-1/0,max:1/0});return[d.min,d.max]};return typeof t!="function"&&typeof n!="function"?[i(),c()]:s=>[i(s),c(s)]},threshold(r,e,t){return this.lockDirection=t.axis==="lock",D.toVector(r,this.lockDirection?[.1,3]:0)},modifierKey(r){return r===void 0?"ctrlKey":r},pinchOnWheel(r=!0){return r}});y(y({},te),{},{mouseOnly:(r=!0)=>r});y(y({},te),{},{mouseOnly:(r=!0)=>r});const Le=new Map,ge=new Map;function Tt(r){Le.set(r.key,r.engine),ge.set(r.key,r.resolver)}const Dt={key:"drag",engine:pt,resolver:$e};function kt(r,e){if(r==null)return{};var t={},n=Object.keys(r),i,c;for(c=0;c<n.length;c++)i=n[c],!(e.indexOf(i)>=0)&&(t[i]=r[i]);return t}function Ct(r,e){if(r==null)return{};var t=kt(r,e),n,i;if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(r);for(i=0;i<c.length;i++)n=c[i],!(e.indexOf(n)>=0)&&Object.prototype.propertyIsEnumerable.call(r,n)&&(t[n]=r[n])}return t}const Ot={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}},Pt=["target","eventOptions","window","enabled","transform"];function oe(r={},e){const t={};for(const[n,i]of Object.entries(e))switch(typeof i){case"function":if(process.env.NODE_ENV==="development"){const c=i.call(t,r[n],n,r);Number.isNaN(c)||(t[n]=c)}else t[n]=i.call(t,r[n],n,r);break;case"object":t[n]=oe(r[n],i);break;case"boolean":i&&(t[n]=r[n]);break}return t}function Rt(r,e,t={}){const n=r,{target:i,eventOptions:c,window:s,enabled:d,transform:p}=n,x=Ct(n,Pt);if(t.shared=oe({target:i,eventOptions:c,window:s,enabled:d,transform:p},Ot),e){const l=ge.get(e);t[e]=oe(y({shared:t.shared},x),l)}else for(const l in x){const A=ge.get(l);if(A)t[l]=oe(y({shared:t.shared},x[l]),A);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 Ve{constructor(e,t){O(this,"_listeners",new Set),this._ctrl=e,this._gestureKey=t}add(e,t,n,i,c){const s=this._listeners,d=rt(t,n),p=this._gestureKey?this._ctrl.config[this._gestureKey].eventOptions:{},x=y(y({},p),c);e.addEventListener(d,i,x);const l=()=>{e.removeEventListener(d,i,x),s.delete(l)};return s.add(l),l}clean(){this._listeners.forEach(e=>e()),this._listeners.clear()}}class At{constructor(){O(this,"_timeouts",new Map)}add(e,t,n=140,...i){this.remove(e),this._timeouts.set(e,window.setTimeout(t,n,...i))}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 Mt{constructor(e){O(this,"gestures",new Set),O(this,"_targetEventStore",new Ve(this)),O(this,"gestureEventStores",{}),O(this,"gestureTimeoutStores",{}),O(this,"handlers",{}),O(this,"config",{}),O(this,"pointerIds",new Set),O(this,"touchIds",new Set),O(this,"state",{shared:{shiftKey:!1,metaKey:!1,ctrlKey:!1,altKey:!1}}),Nt(this,e)}setEventIds(e){if(ae(e))return this.touchIds=new Set(st(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=Rt(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 i;if(!(t.target&&(i=t.target(),!i))){if(t.enabled){for(const s of this.gestures){const d=this.config[s],p=Pe(n,d.eventOptions,!!i);if(d.enabled){const x=Le.get(s);new x(this,e,s).bind(p)}}const c=Pe(n,t.eventOptions,!!i);for(const s in this.nativeHandlers)c(s,"",d=>this.nativeHandlers[s](y(y({},this.state.shared),{},{event:d,args:e})),void 0,!0)}for(const c in n)n[c]=at(...n[c]);if(!i)return n;for(const c in n){const{device:s,capture:d,passive:p}=tt(c);this._targetEventStore.add(i,s,"",n[c],{capture:d,passive:p})}}}}function X(r,e){r.gestures.add(e),r.gestureEventStores[e]=new Ve(r,e),r.gestureTimeoutStores[e]=new At}function Nt(r,e){e.drag&&X(r,"drag"),e.wheel&&X(r,"wheel"),e.scroll&&X(r,"scroll"),e.move&&X(r,"move"),e.pinch&&X(r,"pinch"),e.hover&&X(r,"hover")}const Pe=(r,e,t)=>(n,i,c,s={},d=!1)=>{var p,x;const l=(p=s.capture)!==null&&p!==void 0?p:e.capture,A=(x=s.passive)!==null&&x!==void 0?x:e.passive;let k=d?n:Ze(n,i,l);t&&A&&(k+="Passive"),r[k]=r[k]||[],r[k].push(c)};function $t(r,e={},t,n){const i=E.useMemo(()=>new Mt(r),[]);if(i.applyHandlers(r,n),i.applyConfig(e,t),E.useEffect(i.effect.bind(i)),E.useEffect(()=>i.clean.bind(i),[]),e.target===void 0)return i.bind.bind(i)}function Lt(r,e){return Tt(Dt),$t({drag:r},e||{},"drag")}function Vt(r){const{left:e,right:t,top:n,bottom:i}=r.getBoundingClientRect(),{innerWidth:c,innerHeight:s}=window;return e<0||n<0?{isOut:!0,direction:"start"}:Math.floor(t)>Math.floor(c)||Math.floor(i)>Math.floor(s)?{isOut:!0,direction:"end"}:{isOut:!1,direction:null}}function z(r){return parseFloat(r.toFixed(2))}function pe(r){process.env.NODE_ENV!=="production"&&console.warn(r)}function jt({init:r=!0,items:e,slideType:t="fixed",scrollAmount:n,withLoop:i=!1,enableGestures:c=!0,carouselAxis:s="x",slideWhenDragThresholdIsReached:d=!0,itemsPerSlide:p,scrollAmountType:x,gutter:l=0,startEndGutter:A=0,fadeIn:k=!1}){const P=E.useRef(!1),$=E.useRef([]),F=E.useRef(!1),_=p??1,S=x??"slide",L=i?[...e.map(o=>({...o,id:`prev-repeated-item-${o.id}`})),...e,...e.map(o=>({...o,id:`next-repeated-item-${o.id}`}))]:e,q=E.useRef(n),J=E.useRef(0),m=E.useId().replace(/:/g,""),V=E.useRef(null),T=E.useRef(null),ve=E.useRef(0),v=E.useRef(!0),h=E.useRef(!1),a=E.useRef(0),[j,ne]=_e.useSpring(()=>({value:0,onChange({value:o}){(t==="fixed"||t==="fluid")&&(s==="x"?T.current.style.transform=`translate3d(${o.value}px, 0px, 0px)`:T.current.style.transform=`translate3d(${o.value}px, 0px, 0px)`),t==="freeScroll"&&(T.current[s==="x"?"scrollLeft":"scrollTop"]=Math.abs(o.value))}})),{useListenToCustomEvent:je,emitEvent:Q}=He();function b(){return z(q.current??0)}function G(){return T.current[s==="x"?"scrollWidth":"scrollHeight"]-V.current.getBoundingClientRect()[s==="x"?"width":"height"]}function Z(){pe("The carousel can't be initialized. List of errors:"),console.table($.current)}function Be(){return t==="freeScroll"?{onWheel(){j.value.stop()},onScroll(o){const f=o.currentTarget,g=s==="x"?f.scrollLeft:f.scrollTop,u=s==="x"?f.scrollWidth-f.clientWidth:f.scrollHeight-f.clientHeight;g===0?v.current=!0:g===u?h.current=!0:(v.current=!1,h.current=!1)}}:{}}function Ue(){let o=0,f=0;const g=getComputedStyle(document.documentElement).getPropertyValue(`--${m}-react-spring-carousel-item-gutter`),u=getComputedStyle(document.documentElement).getPropertyValue(`--${m}-react-spring-carousel-item-gutter`);return u.includes("px")&&(o=Number(u.replace("px",""))),g.includes("px")&&(f=Number(g.replace("px",""))),{totalGutterCssVar:o,totalStartEndGutterCssVar:f}}function Ge(){return _>1?`calc(100% / ${_} - var(--${m}-react-spring-carousel-item-gutter) / ${_} * ${_-1}) !important`:"100% !important"}function ie({type:o,actionType:f,newActiveItem:g}){var B,K,W,ee,se,be,ye;let u=0,I=j.value.get();if(v.current=!1,h.current=!1,t==="fixed"){const C=a.current;if(o==="prev"&&(a.current=g??a.current-1),o==="next"&&(a.current=g??a.current+1),i&&S==="group"&&_>1&&o==="next"){const w=e.length/_,U=Math.ceil(w)-1===a.current,H=Math.ceil(w)===a.current;U&&(h.current=!0),u=-(a.current*b()),H&&(a.current=0,I=j.value.get()+b()*w,u=0,h.current=!1,v.current=!0)}if(i&&S==="group"&&_>1&&o==="prev"){const w=e.length/_,U=a.current===0,H=a.current===-1;u=-(a.current*b()),U&&(v.current=!0),H&&(v.current=!1,h.current=!0,a.current=w-1,I=j.value.get()-b()*w,u=-b()*w+b())}if(!i&&S==="group"&&_>1){const w=e.length/_,U=2%w!==0,H=Math.ceil(w-1)===a.current,fe=a.current===0;u=-(a.current*b()),fe&&(v.current=!0),H&&(h.current=!0,U&&(u=-G()))}if(i&&o==="next"&&(S==="slide"||S==="group"&&_===1)){const w=((B=e[a.current])==null?void 0:B.id)===e[e.length-1].id,U=L[e.length+a.current].id.includes("repeated-item");w&&(h.current=!0),U&&(a.current=0,I=j.value.get()+b()*e.length,h.current=!1,v.current=!0),u=-(a.current*b())}if(i&&o==="prev"&&(S==="slide"||S==="group"&&_===1)){const w=L.findIndex(fe=>fe.id===e[C].id),U=((K=e[a.current])==null?void 0:K.id)===e[0].id,H=L[w-1].id.includes("repeated-item");U&&(v.current=!0),H&&(v.current=!1,h.current=!0,a.current=e.length-1,I=j.value.get()-b()*e.length),u=-(a.current*b())}!i&&S==="slide"&&(((W=e[a.current+1])==null?void 0:W.id)===e[e.length-1].id?h.current=!0:a.current===0?v.current=!0:(v.current=!1,h.current=!1),u=-(a.current*b()),o==="next"&&Math.abs(u)>G()&&(h.current=!0,u=-G())),Q({eventName:"onSlideStartChange",sliceActionType:f,slideDirection:o,nextItem:{index:a.current,id:e[a.current].id,startReached:v.current,endReached:h.current}})}if(t==="fluid"){if(o==="prev"&&(a.current=g??a.current-1),o==="next"&&(a.current=g??a.current+1),u=-(a.current*b()),o==="next"&&i){const C=((ee=e[a.current])==null?void 0:ee.id)===e[e.length-1].id,w=L[e.length+a.current].id.includes("repeated-item");C&&(h.current=!0),w&&(a.current=0,I=j.value.get()+b()*e.length,u=0,h.current=!1,v.current=!0)}if(o==="next"&&!i){const C=Math.abs(u)>G();C||C?(h.current=!0,u=-G()):(v.current=!1,h.current=!1)}if(o==="prev"&&!i&&((se=e[a.current])==null?void 0:se.id)===e[0].id&&(v.current=!0),o==="prev"&&i){const C=((be=e[a.current])==null?void 0:be.id)===e[0].id,w=(ye=L[e.length+a.current])==null?void 0:ye.id.includes("repeated-item");C&&(v.current=!0),w&&(a.current=e.length-1,I=j.value.get()-b()*e.length,u=-(b()*e.length-b()),v.current=!1,h.current=!0)}Q({eventName:"onSlideStartChange",sliceActionType:f,slideDirection:o,nextItem:{startReached:v.current,endReached:h.current,index:0,id:""}})}if(t==="freeScroll"){const C=T.current[s==="x"?"scrollLeft":"scrollTop"],w=s==="x"?T.current.scrollWidth-T.current.clientWidth:T.current.scrollHeight-T.current.clientHeight;I=C,o==="prev"&&(u=I-b(),u<0&&(u=0)),o==="next"&&(u=I+b(),u>w&&(u=w))}const M=z(I),R=z(u);ve.current=R,ne.start({from:{value:M},to:{value:R},onRest({finished:C}){C&&t==="fixed"&&Q({eventName:"onSlideChangeComplete",sliceActionType:f,slideDirection:o,currentItem:{index:a.current,id:e[a.current].id,startReached:v.current,endReached:h.current}}),C&&t==="fluid"&&Q({eventName:"onSlideChangeComplete",sliceActionType:f,slideDirection:o,currentItem:{index:0,id:"",startReached:v.current,endReached:h.current}})}})}function ue(o,f){if(!P.current){Z();return}if(t==="fixed"&&i||t==="fixed"&&!i&&!h.current){const g=f??a.current+1;ie({type:"next",actionType:o,newActiveItem:g})}(t==="fluid"&&i||t==="fluid"&&!i&&!h.current||t==="freeScroll")&&ie({type:"next",actionType:o})}function le(o,f){if(!P.current){Z();return}if(t==="fixed"&&i||t==="fixed"&&!i&&!v.current){const g=f??a.current-1;ie({type:"prev",actionType:o,newActiveItem:g})}(t==="fluid"&&i||t==="fluid"&&!i&&!v.current||t==="freeScroll")&&ie({type:"prev",actionType:o})}function Ke(o){let f=0;typeof o=="string"?f=e.findIndex(g=>g.id===o):f=o,f>a.current&&ue("click",f),f<a.current&&le("click",f)}function Fe({getContainer:o,activeItem:f,updateTotalValue:g}){const u=o();if(!(u instanceof HTMLElement)){console.warn(`Container is not a valid html element: container is ${u}`);return}const I=u.children[f];if(I){const M=u[s==="x"?"scrollWidth":"scrollHeight"]-u.getBoundingClientRect()[s==="x"?"width":"height"],B=I.offsetLeft+I.offsetWidth/2-u.clientWidth/2,K=Vt(I);if(K.isOut){const W=K.direction==="start"?B<0?0:B:B>M?M:B,ee=u[s==="x"?"scrollLeft":"scrollTop"];new _e.Controller({from:{value:ee},to:{value:g?g({from:ee,to:W,itemOutOfViewport:K}):W},onChange({value:se}){u[s==="x"?"scrollLeft":"scrollTop"]=se.value}})}}}const We=Lt(o=>{if(!P.current){Z();return}const f=o.dragging,g=o.offset[s==="x"?0:1],u=o.movement[s==="x"?0:1],I=u>J.current,M=u<-J.current,R=o.velocity;f&&(Q({...o,eventName:"onDrag",slideActionType:"drag"}),ne.start({value:g,immediate:!0,config:{velocity:R}}),d&&(I||M)&&o.cancel()),o.last&&(I?le("drag"):M?ue("drag"):ne.start({value:ve.current,config:{velocity:R}}))},{enabled:c&&t!=="freeScroll",axis:s,rubberband:!i,...i?{}:{bounds:()=>({right:0,left:-G(),top:-G(),bottom:0})},from:()=>[j.value.get(),j.value.get()]});return E.useEffect(()=>{function o(){document.hidden?(F.current=!0,P.current=!1):(F.current=!1,P.current=!0)}function f(){if(!(t==="fixed"&&!i||t==="freeScroll"))if(t==="fixed"&&S==="group"&&_>1){const M=e.length*3/_;T.current.style[s==="x"?"left":"top"]=`-${z(b()*M/3)}px`}else T.current.style[s==="x"?"left":"top"]=`-${z(b()*L.length/3)}px`}function g(){u(),f(),ne.start({immediate:!0,value:-(a.current*b())})}function u(){const M=T.current.children[0];let R=0;const B=t==="fixed"&&S==="group"&&_>1;B?R=z(T.current.getBoundingClientRect()[s==="x"?"width":"height"]):R=z(M.getBoundingClientRect()[s==="x"?"width":"height"]);let{totalGutterCssVar:K,totalStartEndGutterCssVar:W}=Ue();return R+=K,B&&(R-=W),q.current=R,R}function I(){if($.current=[],L.length===0&&pe("Init is true but no items are available; carousel will not be initialized"),t==="fixed"&&S==="group"&&_===1&&pe("Using scrollAmountType='group' and itemsPerSlide={1} makes no difference; itemsPerSlide must be greater than 1."),t==="fixed"&&S==="group"&&e.length%_!==0&&$.current.push("When using scrollAmountType='group' and itemsPerSlide={number>1} make sure that itemsPerSlides is divisible by the total quantity of items otherwise the carousel won't initialize."),t==="fluid"&&x!==void 0&&$.current.push('scrollAmountType="group" is not available for slideType="fluid"; please change one of them.'),t==="fluid"&&p!==void 0&&$.current.push(`itemsPerSlide=${p} is not available for slideType="fluid"; please change one of them.`),$.current.length>0){Z();return}u(),i&&f(),J.current=b()/4,P.current=!0}if(r)return I(),window.addEventListener("resize",g),document.addEventListener("visibilitychange",o),()=>{document.removeEventListener("visibilitychange",o),window.removeEventListener("resize",g)};P.current=!1},[q,r,t,i,s]),{carouselFragment:Y.jsxs(Y.Fragment,{children:[Y.jsx("style",{id:`carousel-container-${m}`,dangerouslySetInnerHTML:{__html:`
+            :root {
+              --${m}-react-spring-carousel-item-gutter: ${l}px;
+              --${m}-react-spring-carousel-start-end-gutter: ${A}px;
+            }
+            .carousel-${m} {
+              display: flex;
+              width: 100%;
+              height: 100%;
+              overflow: hidden;
+            }
+            .carousel-${m} .use-spring-carousel-track {
+              position: relative;
+              display: flex;
+              width: calc(100% - var(--${m}-react-spring-carousel-start-end-gutter) * 2);
+              padding-left: var(--${m}-react-spring-carousel-start-end-gutter);
+              touch-action: ${c?s==="x"?"pan-y":"pan-x":"auto"};
+              flex-direction: ${s==="x"?"row":"column"};
+              overflow-x: ${t==="freeScroll"&&s==="x"?"auto":"initial"};
+              overflow-y: ${t==="freeScroll"&&s==="y"?"auto":"initial"};
+            }
+            .carousel-${m} .use-spring-carousel-track::after {
+              content: "";
+              visibility: hidden;
+              display: block;
+              width: var(--${m}-react-spring-carousel-start-end-gutter);
+              flex-shrink: 0;
+            }
+            .carousel-${m} .use-spring-carousel-item {
+              position: relative;
+              display: flex;
+              flex: 1 0 ${t==="fixed"?Ge():"auto"};
+            }
+            .carousel-${m}[data-carousel-direction=x] .use-spring-carousel-item:not(:last-child) {
+              margin-right: var(--${m}-react-spring-carousel-item-gutter);
+            }
+            .carousel-${m}[data-carousel-direction=y] .use-spring-carousel-item:not(:last-child) {
+              margin-bottom: var(--${m}-react-spring-carousel-item-gutter);
+            }
+            ${k?`.carousel-${m} .use-spring-carousel-item {
+                  position: absolute;
+                  top: 0;
+                  left: 0;
+                  width: 100%;
+                  height: 100%;
+                  opacity: 0;
+                }
+                .carousel-${m} .use-spring-carousel-item:first-child {
+                  opacity: 1;
+                }`.trim():""};
+              `.trim()}}),Y.jsx("div",{className:`use-spring-carousel-container carousel-${m}`,ref:V,"data-carousel-direction":s,children:Y.jsx("div",{className:"use-spring-carousel-track",...We(),ref:T,...Be(),children:L.map((o,f)=>Y.jsx("div",{className:"use-spring-carousel-item",id:o.id,children:o.renderItem},`${o.id}-${f}`))})})]}),useListenToCustomEvent:je,slideToNextItem:()=>ue("click"),slideToPrevItem:()=>le("click"),slideToIem:o=>{if(!P.current){Z();return}Ke(o)},handleThumbsContainerScroll:Fe,carouselId:m}}exports.useSpringCarousel=jt;

package/package.json

@@ -1,16 +1,18 @@
 {
   "name": "react-spring-carousel",
-  "version": "3.0.0-beta-1.0.2",
+  "version": "3.0.0-beta-1.0.31",
   "type": "module",
-  "main": "./dist/index.react-spring-carousel.js",
+  "main": "./dist/index.cjs.js",
+  "module": "./dist/index.es.js",
   "types": "./dist/index.d.ts",
   "files": [
     "dist/*"
   ],
   "exports": {
     ".": {
-      "import": "./dist/react-spring-carousel.js",
-      "module": "./dist/react-spring-carousel.js",
+      "import": "./dist/index.es.js",
+      "module": "./dist/index.es.js",
+      "require": "./dist/index.cjs.js",
       "types": "./dist/index.d.ts"
     }
   },