react-spring-carousel 3.0.0-beta-2.0.15 → 3.0.0-beta-2.0.17
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.es.js +99 -90
- package/dist/index.umd.js +7 -4
- package/dist/types.d.ts +2 -1
- package/package.json +1 -1
package/dist/index.es.js
CHANGED
|
@@ -45,7 +45,7 @@ function kt(r) {
|
|
|
45
45
|
var t = Dt(r, "string");
|
|
46
46
|
return typeof t == "symbol" ? t : String(t);
|
|
47
47
|
}
|
|
48
|
-
function
|
|
48
|
+
function y(r, t, e) {
|
|
49
49
|
return t = kt(t), t in r ? Object.defineProperty(r, t, {
|
|
50
50
|
value: e,
|
|
51
51
|
enumerable: !0,
|
|
@@ -67,7 +67,7 @@ function l(r) {
|
|
|
67
67
|
for (var t = 1; t < arguments.length; t++) {
|
|
68
68
|
var e = arguments[t] != null ? arguments[t] : {};
|
|
69
69
|
t % 2 ? it(Object(e), !0).forEach(function(n) {
|
|
70
|
-
|
|
70
|
+
y(r, n, e[n]);
|
|
71
71
|
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(r, Object.getOwnPropertyDescriptors(e)) : it(Object(e)).forEach(function(n) {
|
|
72
72
|
Object.defineProperty(r, n, Object.getOwnPropertyDescriptor(e, n));
|
|
73
73
|
});
|
|
@@ -119,7 +119,7 @@ function $t(r) {
|
|
|
119
119
|
passive: e
|
|
120
120
|
};
|
|
121
121
|
}
|
|
122
|
-
function
|
|
122
|
+
function Nt(r, t = "") {
|
|
123
123
|
const e = mt[r], n = e && e[t] || t;
|
|
124
124
|
return r + n;
|
|
125
125
|
}
|
|
@@ -129,7 +129,7 @@ function W(r) {
|
|
|
129
129
|
function gt(r) {
|
|
130
130
|
return W(r) ? "touch" : "pointerType" in r ? r.pointerType : "mouse";
|
|
131
131
|
}
|
|
132
|
-
function
|
|
132
|
+
function Mt(r) {
|
|
133
133
|
return Array.from(r.touches).filter((t) => {
|
|
134
134
|
var e, n;
|
|
135
135
|
return t.target === r.currentTarget || ((e = r.currentTarget) === null || e === void 0 || (n = e.contains) === null || n === void 0 ? void 0 : n.call(e, t.target));
|
|
@@ -142,7 +142,7 @@ function vt(r) {
|
|
|
142
142
|
return W(r) ? Rt(r)[0] : r;
|
|
143
143
|
}
|
|
144
144
|
function Lt(r) {
|
|
145
|
-
return
|
|
145
|
+
return Mt(r).map((t) => t.identifier);
|
|
146
146
|
}
|
|
147
147
|
function Q(r) {
|
|
148
148
|
const t = vt(r);
|
|
@@ -249,11 +249,11 @@ class Bt {
|
|
|
249
249
|
g.addTo(e._distance, I);
|
|
250
250
|
}
|
|
251
251
|
this.axisIntent && this.axisIntent(t);
|
|
252
|
-
const [c, a] = e._movement, [u,
|
|
252
|
+
const [c, a] = e._movement, [u, d] = n.threshold, {
|
|
253
253
|
_step: f,
|
|
254
254
|
values: E
|
|
255
255
|
} = e;
|
|
256
|
-
if (n.hasCustomTransform ? (f[0] === !1 && (f[0] = Math.abs(c) >= u && E[0]), f[1] === !1 && (f[1] = Math.abs(a) >=
|
|
256
|
+
if (n.hasCustomTransform ? (f[0] === !1 && (f[0] = Math.abs(c) >= u && E[0]), f[1] === !1 && (f[1] = Math.abs(a) >= d && E[1])) : (f[0] === !1 && (f[0] = Math.abs(c) >= u && Math.sign(c) * u), f[1] === !1 && (f[1] = Math.abs(a) >= d && Math.sign(a) * d)), e.intentional = f[0] !== !1 || f[1] !== !1, !e.intentional) return;
|
|
257
257
|
const v = [0, 0];
|
|
258
258
|
if (n.hasCustomTransform) {
|
|
259
259
|
const [I, F] = E;
|
|
@@ -263,10 +263,10 @@ class Bt {
|
|
|
263
263
|
this.restrictToAxis && !e._blocked && this.restrictToAxis(v);
|
|
264
264
|
const P = e.offset, C = e._active && !e._blocked || e.active;
|
|
265
265
|
C && (e.first = e._active && !e.active, e.last = !e._active && e.active, e.active = s[this.ingKey] = e._active, t && (e.first && ("bounds" in n && (e._bounds = Y(n.bounds, e)), this.setup && this.setup()), e.movement = v, this.computeOffset()));
|
|
266
|
-
const [x, $] = e.offset, [[S, O], [R,
|
|
267
|
-
e.overflow = [x < S ? -1 : x > O ? 1 : 0, $ < R ? -1 : $ >
|
|
268
|
-
const
|
|
269
|
-
if (e.offset = It(e._bounds, e.offset,
|
|
266
|
+
const [x, $] = e.offset, [[S, O], [R, h]] = e._bounds;
|
|
267
|
+
e.overflow = [x < S ? -1 : x > O ? 1 : 0, $ < R ? -1 : $ > h ? 1 : 0], e._movementBound[0] = e.overflow[0] ? e._movementBound[0] === !1 ? e._movement[0] : e._movementBound[0] : !1, e._movementBound[1] = e.overflow[1] ? e._movementBound[1] === !1 ? e._movement[1] : e._movementBound[1] : !1;
|
|
268
|
+
const N = e._active ? n.rubberband || [0, 0] : [0, 0];
|
|
269
|
+
if (e.offset = It(e._bounds, e.offset, N), e.delta = g.sub(e.offset, P), this.computeMovement(), C && (!e.last || i > Kt)) {
|
|
270
270
|
e.delta = g.sub(e.offset, P);
|
|
271
271
|
const I = e.delta.map(Math.abs);
|
|
272
272
|
g.addTo(e.distance, I), e.direction = e.delta.map(Math.sign), e._direction = e._delta.map(Math.sign), !e.first && i > 0 && (e.velocity = [I[0] / i, I[1] / i], e.timeDelta = i);
|
|
@@ -293,7 +293,7 @@ function zt([r, t], e) {
|
|
|
293
293
|
}
|
|
294
294
|
class Yt extends Bt {
|
|
295
295
|
constructor(...t) {
|
|
296
|
-
super(...t),
|
|
296
|
+
super(...t), y(this, "aliasKey", "xy");
|
|
297
297
|
}
|
|
298
298
|
reset() {
|
|
299
299
|
super.reset(), this.state.axis = void 0;
|
|
@@ -418,7 +418,7 @@ const Wt = 0, j = l(l({}, et), {}, {
|
|
|
418
418
|
};
|
|
419
419
|
class Ft extends Yt {
|
|
420
420
|
constructor(...t) {
|
|
421
|
-
super(...t),
|
|
421
|
+
super(...t), y(this, "ingKey", "dragging");
|
|
422
422
|
}
|
|
423
423
|
reset() {
|
|
424
424
|
super.reset();
|
|
@@ -498,10 +498,10 @@ class Ft extends Yt {
|
|
|
498
498
|
if (e.tap = i <= n.tapsThreshold && c <= n.tapsThreshold, e.tap && n.filterTaps)
|
|
499
499
|
e._force = !0;
|
|
500
500
|
else {
|
|
501
|
-
const [a, u] = e._delta, [
|
|
501
|
+
const [a, u] = e._delta, [d, f] = e._movement, [E, v] = n.swipe.velocity, [P, C] = n.swipe.distance, x = n.swipe.duration;
|
|
502
502
|
if (e.elapsedTime < x) {
|
|
503
503
|
const $ = Math.abs(a / e.timeDelta), S = Math.abs(u / e.timeDelta);
|
|
504
|
-
$ > E && Math.abs(
|
|
504
|
+
$ > E && Math.abs(d) > P && (e.swipe[0] = Math.sign(a)), S > v && Math.abs(f) > C && (e.swipe[1] = Math.sign(u));
|
|
505
505
|
}
|
|
506
506
|
}
|
|
507
507
|
this.emit();
|
|
@@ -805,7 +805,7 @@ function fe(r, t, e = {}) {
|
|
|
805
805
|
window: c,
|
|
806
806
|
enabled: a,
|
|
807
807
|
transform: u
|
|
808
|
-
} = n,
|
|
808
|
+
} = n, d = ae(n, ue);
|
|
809
809
|
if (e.shared = z({
|
|
810
810
|
target: s,
|
|
811
811
|
eventOptions: i,
|
|
@@ -816,14 +816,14 @@ function fe(r, t, e = {}) {
|
|
|
816
816
|
const f = tt.get(t);
|
|
817
817
|
e[t] = z(l({
|
|
818
818
|
shared: e.shared
|
|
819
|
-
},
|
|
819
|
+
}, d), f);
|
|
820
820
|
} else
|
|
821
|
-
for (const f in
|
|
821
|
+
for (const f in d) {
|
|
822
822
|
const E = tt.get(f);
|
|
823
823
|
if (E)
|
|
824
824
|
e[f] = z(l({
|
|
825
825
|
shared: e.shared
|
|
826
|
-
},
|
|
826
|
+
}, d[f]), E);
|
|
827
827
|
else if (process.env.NODE_ENV === "development" && !["drag", "pinch", "scroll", "wheel", "move", "hover"].includes(f)) {
|
|
828
828
|
if (f === "domTarget")
|
|
829
829
|
throw Error("[@use-gesture]: `domTarget` option has been renamed to `target`.");
|
|
@@ -834,13 +834,13 @@ function fe(r, t, e = {}) {
|
|
|
834
834
|
}
|
|
835
835
|
class wt {
|
|
836
836
|
constructor(t, e) {
|
|
837
|
-
|
|
837
|
+
y(this, "_listeners", /* @__PURE__ */ new Set()), this._ctrl = t, this._gestureKey = e;
|
|
838
838
|
}
|
|
839
839
|
add(t, e, n, s, i) {
|
|
840
|
-
const c = this._listeners, a =
|
|
841
|
-
t.addEventListener(a, s,
|
|
840
|
+
const c = this._listeners, a = Nt(e, n), u = this._gestureKey ? this._ctrl.config[this._gestureKey].eventOptions : {}, d = l(l({}, u), i);
|
|
841
|
+
t.addEventListener(a, s, d);
|
|
842
842
|
const f = () => {
|
|
843
|
-
t.removeEventListener(a, s,
|
|
843
|
+
t.removeEventListener(a, s, d), c.delete(f);
|
|
844
844
|
};
|
|
845
845
|
return c.add(f), f;
|
|
846
846
|
}
|
|
@@ -850,7 +850,7 @@ class wt {
|
|
|
850
850
|
}
|
|
851
851
|
class le {
|
|
852
852
|
constructor() {
|
|
853
|
-
|
|
853
|
+
y(this, "_timeouts", /* @__PURE__ */ new Map());
|
|
854
854
|
}
|
|
855
855
|
add(t, e, n = 140, ...s) {
|
|
856
856
|
this.remove(t), this._timeouts.set(t, window.setTimeout(e, n, ...s));
|
|
@@ -865,7 +865,7 @@ class le {
|
|
|
865
865
|
}
|
|
866
866
|
class de {
|
|
867
867
|
constructor(t) {
|
|
868
|
-
|
|
868
|
+
y(this, "gestures", /* @__PURE__ */ new Set()), y(this, "_targetEventStore", new wt(this)), y(this, "gestureEventStores", {}), y(this, "gestureTimeoutStores", {}), y(this, "handlers", {}), y(this, "config", {}), y(this, "pointerIds", /* @__PURE__ */ new Set()), y(this, "touchIds", /* @__PURE__ */ new Set()), y(this, "state", {
|
|
869
869
|
shared: {
|
|
870
870
|
shiftKey: !1,
|
|
871
871
|
metaKey: !1,
|
|
@@ -902,8 +902,8 @@ class de {
|
|
|
902
902
|
for (const c of this.gestures) {
|
|
903
903
|
const a = this.config[c], u = ht(n, a.eventOptions, !!s);
|
|
904
904
|
if (a.enabled) {
|
|
905
|
-
const
|
|
906
|
-
new
|
|
905
|
+
const d = bt.get(c);
|
|
906
|
+
new d(this, t, c).bind(u);
|
|
907
907
|
}
|
|
908
908
|
}
|
|
909
909
|
const i = ht(n, e.eventOptions, !!s);
|
|
@@ -930,15 +930,15 @@ class de {
|
|
|
930
930
|
}
|
|
931
931
|
}
|
|
932
932
|
}
|
|
933
|
-
function
|
|
933
|
+
function M(r, t) {
|
|
934
934
|
r.gestures.add(t), r.gestureEventStores[t] = new wt(r, t), r.gestureTimeoutStores[t] = new le();
|
|
935
935
|
}
|
|
936
936
|
function he(r, t) {
|
|
937
|
-
t.drag &&
|
|
937
|
+
t.drag && M(r, "drag"), t.wheel && M(r, "wheel"), t.scroll && M(r, "scroll"), t.move && M(r, "move"), t.pinch && M(r, "pinch"), t.hover && M(r, "hover");
|
|
938
938
|
}
|
|
939
939
|
const ht = (r, t, e) => (n, s, i, c = {}, a = !1) => {
|
|
940
|
-
var u,
|
|
941
|
-
const f = (u = c.capture) !== null && u !== void 0 ? u : t.capture, E = (
|
|
940
|
+
var u, d;
|
|
941
|
+
const f = (u = c.capture) !== null && u !== void 0 ? u : t.capture, E = (d = c.passive) !== null && d !== void 0 ? d : t.passive;
|
|
942
942
|
let v = a ? n : At(n, s, f);
|
|
943
943
|
e && E && (v += "Passive"), r[v] = r[v] || [], r[v].push(i);
|
|
944
944
|
};
|
|
@@ -995,12 +995,12 @@ function we({
|
|
|
995
995
|
startEndGutter: c = 0,
|
|
996
996
|
carouselAxis: a = "x",
|
|
997
997
|
slideType: u = "fixed",
|
|
998
|
-
startingPosition:
|
|
998
|
+
startingPosition: d = "start",
|
|
999
999
|
enableGestures: f = !0,
|
|
1000
1000
|
slideWhenDragThresholdIsReached: E = !0,
|
|
1001
1001
|
onInit: v
|
|
1002
1002
|
}) {
|
|
1003
|
-
const P = A(r), C = A(null), x = A(null), $ = A(0), S = A(!e), O = A(!1), R = A(0),
|
|
1003
|
+
const P = A(r), C = A(null), x = A(null), $ = A(0), S = A(!e), O = A(!1), R = A(0), h = A(0), [N, I] = xt(
|
|
1004
1004
|
() => ({
|
|
1005
1005
|
value: 0,
|
|
1006
1006
|
onChange({ value: o }) {
|
|
@@ -1014,12 +1014,14 @@ function we({
|
|
|
1014
1014
|
), F = u !== "freeScroll" && e ? [
|
|
1015
1015
|
...t.map((o) => ({
|
|
1016
1016
|
...o,
|
|
1017
|
-
id: `prev-repeated-item-${o.id}
|
|
1017
|
+
id: `prev-repeated-item-${o.id}`,
|
|
1018
|
+
isClonedItem: !0
|
|
1018
1019
|
})),
|
|
1019
1020
|
...t,
|
|
1020
1021
|
...t.map((o) => ({
|
|
1021
1022
|
...o,
|
|
1022
|
-
id: `next-repeated-item-${o.id}
|
|
1023
|
+
id: `next-repeated-item-${o.id}`,
|
|
1024
|
+
isClonedItem: !0
|
|
1023
1025
|
}))
|
|
1024
1026
|
] : t, { useListenToCustomEvent: rt, emitEvent: L } = ge();
|
|
1025
1027
|
function H(o) {
|
|
@@ -1038,44 +1040,44 @@ function we({
|
|
|
1038
1040
|
}
|
|
1039
1041
|
function V({
|
|
1040
1042
|
type: o,
|
|
1041
|
-
shouldAnimate:
|
|
1043
|
+
shouldAnimate: p = !0,
|
|
1042
1044
|
toIndex: D,
|
|
1043
|
-
actionType:
|
|
1045
|
+
actionType: _
|
|
1044
1046
|
}) {
|
|
1045
|
-
const
|
|
1047
|
+
const m = K(), B = !p;
|
|
1046
1048
|
S.current = !1, O.current = !1;
|
|
1047
|
-
let k =
|
|
1048
|
-
if (o === "next" && (
|
|
1049
|
+
let k = N.value.get(), b = 0;
|
|
1050
|
+
if (o === "next" && (h.current += 1), o === "prev" && (h.current === 0 ? h.current = t.length - 1 : h.current -= 1), D !== void 0 && (h.current = D), u !== "freeScroll" && o === "next") {
|
|
1049
1051
|
const w = G(
|
|
1050
|
-
e ?
|
|
1052
|
+
e ? m * (t.length * 2) : 0
|
|
1051
1053
|
);
|
|
1052
|
-
|
|
1054
|
+
b = -(h.current * m), w - Math.abs(b) < m / 1.2 && u === "fluid" && !e && (b = -w), !e && Math.abs(b) >= w && (O.current = !0, b = -w), e && h.current === t.length && (h.current = 0, k = k + m * t.length, b = 0);
|
|
1053
1055
|
}
|
|
1054
|
-
if (u !== "freeScroll" && o === "prev" && (
|
|
1056
|
+
if (u !== "freeScroll" && o === "prev" && (b = -(h.current * m), h.current === t.length - 1 && (k = k - t.length * m), !e && b >= 0 && (S.current = !0, b = 0)), u === "freeScroll" && o === "next") {
|
|
1055
1057
|
const w = x.current[a === "x" ? "scrollLeft" : "scrollTop"];
|
|
1056
|
-
k = w,
|
|
1058
|
+
k = w, b = w + m;
|
|
1057
1059
|
}
|
|
1058
1060
|
if (u === "freeScroll" && o === "prev") {
|
|
1059
1061
|
const w = x.current[a === "x" ? "scrollLeft" : "scrollTop"];
|
|
1060
|
-
k = w,
|
|
1062
|
+
k = w, b = w - m;
|
|
1061
1063
|
}
|
|
1062
|
-
$.current =
|
|
1064
|
+
$.current = b, L(_ === "resize" ? {
|
|
1063
1065
|
eventName: "onResize",
|
|
1064
|
-
sliceActionType:
|
|
1066
|
+
sliceActionType: _,
|
|
1065
1067
|
slideDirection: o,
|
|
1066
1068
|
currentItem: {
|
|
1067
|
-
index:
|
|
1068
|
-
id: t.at(
|
|
1069
|
+
index: h.current,
|
|
1070
|
+
id: t.at(h.current).id,
|
|
1069
1071
|
startReached: S.current,
|
|
1070
1072
|
endReached: O.current
|
|
1071
1073
|
}
|
|
1072
1074
|
} : {
|
|
1073
1075
|
eventName: "onSlideStartChange",
|
|
1074
|
-
sliceActionType:
|
|
1076
|
+
sliceActionType: _,
|
|
1075
1077
|
slideDirection: o,
|
|
1076
1078
|
nextItem: {
|
|
1077
|
-
index:
|
|
1078
|
-
id: t.at(
|
|
1079
|
+
index: h.current,
|
|
1080
|
+
id: t.at(h.current).id,
|
|
1079
1081
|
startReached: S.current,
|
|
1080
1082
|
endReached: O.current
|
|
1081
1083
|
}
|
|
@@ -1085,22 +1087,22 @@ function we({
|
|
|
1085
1087
|
value: k
|
|
1086
1088
|
},
|
|
1087
1089
|
to: {
|
|
1088
|
-
value:
|
|
1090
|
+
value: b
|
|
1089
1091
|
},
|
|
1090
1092
|
onRest({ finished: w }) {
|
|
1091
1093
|
w && u === "fixed" && L({
|
|
1092
1094
|
eventName: "onSlideChangeComplete",
|
|
1093
|
-
sliceActionType:
|
|
1095
|
+
sliceActionType: _,
|
|
1094
1096
|
slideDirection: o,
|
|
1095
1097
|
currentItem: {
|
|
1096
|
-
index:
|
|
1097
|
-
id: t.at(
|
|
1098
|
+
index: h.current,
|
|
1099
|
+
id: t.at(h.current).id,
|
|
1098
1100
|
startReached: S.current,
|
|
1099
1101
|
endReached: O.current
|
|
1100
1102
|
}
|
|
1101
1103
|
}), w && u === "fluid" && L({
|
|
1102
1104
|
eventName: "onSlideChangeComplete",
|
|
1103
|
-
sliceActionType:
|
|
1105
|
+
sliceActionType: _,
|
|
1104
1106
|
slideDirection: o,
|
|
1105
1107
|
currentItem: {
|
|
1106
1108
|
index: 0,
|
|
@@ -1114,58 +1116,58 @@ function we({
|
|
|
1114
1116
|
}
|
|
1115
1117
|
function K() {
|
|
1116
1118
|
const o = x.current.children[0];
|
|
1117
|
-
let
|
|
1118
|
-
return
|
|
1119
|
+
let p = 0;
|
|
1120
|
+
return p = o.getBoundingClientRect()[a === "x" ? "width" : "height"] + i, p;
|
|
1119
1121
|
}
|
|
1120
1122
|
function G(o) {
|
|
1121
|
-
const
|
|
1122
|
-
return
|
|
1123
|
+
const p = x.current;
|
|
1124
|
+
return p[a === "x" ? "scrollWidth" : "scrollHeight"] - p.getBoundingClientRect()[a === "x" ? "width" : "height"] - o;
|
|
1123
1125
|
}
|
|
1124
1126
|
pt(() => {
|
|
1125
|
-
function o(
|
|
1126
|
-
switch (
|
|
1127
|
+
function o(_, m) {
|
|
1128
|
+
switch (_) {
|
|
1127
1129
|
case "start":
|
|
1128
1130
|
return 0;
|
|
1129
1131
|
case "middle-start":
|
|
1130
|
-
return Math.floor((
|
|
1132
|
+
return Math.floor((m - 1) * 0.25);
|
|
1131
1133
|
case "center":
|
|
1132
|
-
return Math.floor((
|
|
1134
|
+
return Math.floor((m - 1) * 0.5);
|
|
1133
1135
|
case "middle-end":
|
|
1134
|
-
return Math.floor((
|
|
1136
|
+
return Math.floor((m - 1) * 0.75);
|
|
1135
1137
|
case "end":
|
|
1136
|
-
return
|
|
1138
|
+
return m - 1;
|
|
1137
1139
|
default:
|
|
1138
1140
|
return 0;
|
|
1139
1141
|
}
|
|
1140
1142
|
}
|
|
1141
|
-
function
|
|
1143
|
+
function p(_) {
|
|
1142
1144
|
if (C.current) {
|
|
1143
|
-
let
|
|
1144
|
-
e && (
|
|
1145
|
+
let m = 0;
|
|
1146
|
+
e && (m = K() * t.length), m -= K() * o(d, s), m -= c, C.current.style.setProperty(
|
|
1145
1147
|
`--${n}-offset-modifier`,
|
|
1146
|
-
`${-
|
|
1147
|
-
),
|
|
1148
|
+
`${-m}px`
|
|
1149
|
+
), _ && _();
|
|
1148
1150
|
}
|
|
1149
1151
|
}
|
|
1150
1152
|
function D() {
|
|
1151
|
-
|
|
1153
|
+
p(), V({
|
|
1152
1154
|
type: "next",
|
|
1153
|
-
toIndex:
|
|
1155
|
+
toIndex: h.current,
|
|
1154
1156
|
shouldAnimate: !1,
|
|
1155
1157
|
actionType: "resize"
|
|
1156
1158
|
});
|
|
1157
1159
|
}
|
|
1158
1160
|
if (r && (R.current = K() / 4), r && u === "fixed")
|
|
1159
|
-
return
|
|
1161
|
+
return p(v), window.addEventListener("resize", D), () => {
|
|
1160
1162
|
window.removeEventListener("resize", D);
|
|
1161
1163
|
};
|
|
1162
|
-
}, [r, e, n, a, i,
|
|
1164
|
+
}, [r, e, n, a, i, d, u]);
|
|
1163
1165
|
const Et = me(
|
|
1164
1166
|
(o) => {
|
|
1165
1167
|
if (!P.current)
|
|
1166
1168
|
return;
|
|
1167
|
-
const
|
|
1168
|
-
|
|
1169
|
+
const p = o.dragging, D = o.offset[a === "x" ? 0 : 1], _ = o.movement[a === "x" ? 0 : 1], m = _ > R.current, B = _ < -R.current, k = o.velocity;
|
|
1170
|
+
p && (L({
|
|
1169
1171
|
...o,
|
|
1170
1172
|
eventName: "onDrag",
|
|
1171
1173
|
slideActionType: "drag"
|
|
@@ -1175,7 +1177,7 @@ function we({
|
|
|
1175
1177
|
config: {
|
|
1176
1178
|
velocity: k
|
|
1177
1179
|
}
|
|
1178
|
-
}), E && (
|
|
1180
|
+
}), E && (m || B) && o.cancel()), o.last && (m ? V({
|
|
1179
1181
|
actionType: "drag",
|
|
1180
1182
|
type: "prev"
|
|
1181
1183
|
}) : B ? V({
|
|
@@ -1200,7 +1202,7 @@ function we({
|
|
|
1200
1202
|
bottom: 0
|
|
1201
1203
|
})
|
|
1202
1204
|
},
|
|
1203
|
-
from: () => [
|
|
1205
|
+
from: () => [N.value.get(), N.value.get()]
|
|
1204
1206
|
}
|
|
1205
1207
|
);
|
|
1206
1208
|
return {
|
|
@@ -1217,18 +1219,21 @@ function we({
|
|
|
1217
1219
|
{
|
|
1218
1220
|
dangerouslySetInnerHTML: {
|
|
1219
1221
|
__html: `
|
|
1222
|
+
:root {
|
|
1223
|
+
--${n}-start-end-gutter: ${c * 2}px;
|
|
1224
|
+
--${n}-gutter: ${i}px;
|
|
1225
|
+
}
|
|
1220
1226
|
[data-part-internal="${n}-Container"] {
|
|
1221
1227
|
display: flex;
|
|
1222
1228
|
width: 100%;
|
|
1223
1229
|
height: 100%;
|
|
1224
1230
|
overflow: hidden;
|
|
1225
|
-
--${n}-gutter: ${i}px;
|
|
1226
1231
|
--${n}-items-per-slide: ${s};
|
|
1227
1232
|
--${n}-offset-position: 0px;
|
|
1228
1233
|
--${n}-offset-modifier: 0px;
|
|
1229
1234
|
--${n}-scroll-x-value: ${u !== "freeScroll" && a === "x" ? `calc(var(--${n}-offset-position) + var(--${n}-offset-modifier))` : "0px"};
|
|
1230
1235
|
--${n}-scroll-y-value: ${u !== "freeScroll" && a === "y" ? `calc(var(--${n}-offset-position) + var(--${n}-offset-modifier))` : "0px"};
|
|
1231
|
-
|
|
1236
|
+
|
|
1232
1237
|
}
|
|
1233
1238
|
[data-part-internal="${n}-Track"] {
|
|
1234
1239
|
display: flex;
|
|
@@ -1258,19 +1263,23 @@ function we({
|
|
|
1258
1263
|
...Et(),
|
|
1259
1264
|
...u === "freeScroll" ? {
|
|
1260
1265
|
onWheel() {
|
|
1261
|
-
|
|
1266
|
+
N.value.stop();
|
|
1262
1267
|
}
|
|
1263
1268
|
} : {},
|
|
1264
|
-
children: F.map((o,
|
|
1269
|
+
children: F.map((o, p) => /* @__PURE__ */ q(
|
|
1265
1270
|
"div",
|
|
1266
1271
|
{
|
|
1267
1272
|
className: "ReactSpringCarouselItem",
|
|
1268
1273
|
"data-part": "Item",
|
|
1269
1274
|
"data-part-internal": `${n}-Item`,
|
|
1270
1275
|
"data-id": o.id,
|
|
1271
|
-
children: typeof o.renderItem == "function" ? o.renderItem({
|
|
1276
|
+
children: typeof o.renderItem == "function" ? o.renderItem({
|
|
1277
|
+
useListenToCustomEvent: rt,
|
|
1278
|
+
index: p,
|
|
1279
|
+
isClonedItem: !!o.isClonedItem
|
|
1280
|
+
}) : o.renderItem
|
|
1272
1281
|
},
|
|
1273
|
-
`${o.id}-${
|
|
1282
|
+
`${o.id}-${p}`
|
|
1274
1283
|
))
|
|
1275
1284
|
}
|
|
1276
1285
|
)
|
|
@@ -1288,17 +1297,17 @@ function we({
|
|
|
1288
1297
|
);
|
|
1289
1298
|
return;
|
|
1290
1299
|
}
|
|
1291
|
-
o >
|
|
1300
|
+
o > h.current ? H(o) : X(o);
|
|
1292
1301
|
}
|
|
1293
1302
|
if (typeof o == "string") {
|
|
1294
|
-
const
|
|
1295
|
-
if (
|
|
1303
|
+
const p = t.findIndex((D) => D.id === o);
|
|
1304
|
+
if (p < 0) {
|
|
1296
1305
|
console.warn(
|
|
1297
1306
|
`The item you're trying to slide doesn't exist. id: ${o}`
|
|
1298
1307
|
);
|
|
1299
1308
|
return;
|
|
1300
1309
|
}
|
|
1301
|
-
|
|
1310
|
+
p > h.current ? H(p) : X(p);
|
|
1302
1311
|
}
|
|
1303
1312
|
}
|
|
1304
1313
|
};
|
package/dist/index.umd.js
CHANGED
|
@@ -1,16 +1,19 @@
|
|
|
1
|
-
(function(O,M){typeof exports=="object"&&typeof module<"u"?M(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"],M):(O=typeof globalThis<"u"?globalThis:O||self,M(O["react-spring-carousel"]={},O["react/jsx-runtime"],O["@react-spring/web"],O.React))})(this,function(O,M,we,y){"use strict";function Ee(r,e,t){return Math.max(e,Math.min(r,t))}const g={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 re(r,e,t){return e===0||Math.abs(e)===1/0?Math.pow(r,t*5):r*e*t/(e+t*r)}function ne(r,e,t,n=.15){return n===0?Ee(r,e,t):r<e?-re(e-r,t-e,n)+e:r>t?+re(r-t,t-e,n)+t:r}function Te(r,[e,t],[n,s]){const[[i,c],[a,u]]=r;return[ne(e,i,c,n),ne(t,a,u,s)]}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);if(typeof n!="object")return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return(e==="string"?String:Number)(r)}function Se(r){var e=xe(r,"string");return typeof e=="symbol"?e:String(e)}function _(r,e,t){return e=Se(e),e in r?Object.defineProperty(r,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):r[e]=t,r}function se(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 l(r){for(var e=1;e<arguments.length;e++){var t=arguments[e]!=null?arguments[e]:{};e%2?se(Object(t),!0).forEach(function(n){_(r,n,t[n])}):Object.getOwnPropertyDescriptors?Object.defineProperties(r,Object.getOwnPropertyDescriptors(t)):se(Object(t)).forEach(function(n){Object.defineProperty(r,n,Object.getOwnPropertyDescriptor(t,n))})}return r}const ie={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 oe(r){return r?r[0].toUpperCase()+r.slice(1):""}const Ie=["enter","leave"];function De(r=!1,e){return r&&!Ie.includes(e)}function ke(r,e="",t=!1){const n=ie[r],s=n&&n[e]||e;return"on"+oe(r)+oe(s)+(De(t,s)?"Capture":"")}const Ce=["gotpointercapture","lostpointercapture"];function Oe(r){let e=r.substring(2).toLowerCase();const t=!!~e.indexOf("passive");t&&(e=e.replace("passive",""));const n=Ce.includes(e)?"capturecapture":"capture",s=!!~e.indexOf(n);return s&&(e=e.replace("capture","")),{device:e,capture:s,passive:t}}function Ae(r,e=""){const t=ie[r],n=t&&t[e]||e;return r+n}function z(r){return"touches"in r}function ae(r){return z(r)?"touch":"pointerType"in r?r.pointerType:"mouse"}function Pe(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 Me(r){return r.type==="touchend"||r.type==="touchcancel"?r.changedTouches:r.targetTouches}function ce(r){return z(r)?Me(r)[0]:r}function $e(r){return Pe(r).map(e=>e.identifier)}function X(r){const e=ce(r);return z(r)?e.identifier:e.pointerId}function ue(r){const e=ce(r);return[e.clientX,e.clientY]}function Ne(r){const e={};if("buttons"in r&&(e.buttons=r.buttons),"shiftKey"in r){const{shiftKey:t,altKey:n,metaKey:s,ctrlKey:i}=r;Object.assign(e,{shiftKey:t,altKey:n,metaKey:s,ctrlKey:i})}return e}function Y(r,...e){return typeof r=="function"?r(...e):r}function Le(){}function Re(...r){return r.length===0?Le:r.length===1?r[0]:function(){let e;for(const t of r)e=t.apply(this,arguments)||e;return e}}function fe(r,e){return Object.assign({},e,r||{})}const Ve=32;class je{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?Y(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 i=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,Ne(e)),s.down=s.pressed=s.buttons%2===1||s.touches>0,i=e.timeStamp-t.timeStamp,t.timeStamp=e.timeStamp,t.elapsedTime=t.timeStamp-t.startTime),t._active){const D=t._delta.map(Math.abs);g.addTo(t._distance,D)}this.axisIntent&&this.axisIntent(e);const[c,a]=t._movement,[u,p]=n.threshold,{_step:f,values:x}=t;if(n.hasCustomTransform?(f[0]===!1&&(f[0]=Math.abs(c)>=u&&x[0]),f[1]===!1&&(f[1]=Math.abs(a)>=p&&x[1])):(f[0]===!1&&(f[0]=Math.abs(c)>=u&&Math.sign(c)*u),f[1]===!1&&(f[1]=Math.abs(a)>=p&&Math.sign(a)*p)),t.intentional=f[0]!==!1||f[1]!==!1,!t.intentional)return;const v=[0,0];if(n.hasCustomTransform){const[D,Q]=x;v[0]=f[0]!==!1?D-f[0]:0,v[1]=f[1]!==!1?Q-f[1]:0}else v[0]=f[0]!==!1?c-f[0]:0,v[1]=f[1]!==!1?a-f[1]:0;this.restrictToAxis&&!t._blocked&&this.restrictToAxis(v);const $=t.offset,A=t._active&&!t._blocked||t.active;A&&(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=Y(n.bounds,t)),this.setup&&this.setup()),t.movement=v,this.computeOffset()));const[S,N]=t.offset,[[I,P],[U,d]]=t._bounds;t.overflow=[S<I?-1:S>P?1:0,N<U?-1:N>d?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 R=t._active?n.rubberband||[0,0]:[0,0];if(t.offset=Te(t._bounds,t.offset,R),t.delta=g.sub(t.offset,$),this.computeMovement(),A&&(!t.last||i>Ve)){t.delta=g.sub(t.offset,$);const D=t.delta.map(Math.abs);g.addTo(t.distance,D),t.direction=t.delta.map(Math.sign),t._direction=t._delta.map(Math.sign),!t.first&&i>0&&(t.velocity=[D[0]/i,D[1]/i],t.timeDelta=i)}}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(l(l(l({},t),e),{},{[this.aliasKey]:e.values}));s!==void 0&&(e.memo=s)}clean(){this.eventStore.clean(),this.timeoutStore.clean()}}function Ue([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 Ke extends je{constructor(...e){super(...e),_(this,"aliasKey","xy")}reset(){super.reset(),this.state.axis=void 0}init(){this.state.offset=[0,0],this.state.lastOffset=[0,0]}computeOffset(){this.state.offset=g.add(this.state.lastOffset,this.state.movement)}computeMovement(){this.state.movement=g.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[ae(e)]:n.axisThreshold;t.axis=Ue(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 le=r=>r,de=.15,q={enabled(r=!0){return r},eventOptions(r,e,t){return l(l({},t.shared.eventOptions),r)},preventDefault(r=!1){return r},triggerAllEvents(r=!1){return r},rubberband(r=0){switch(r){case!0:return[de,de];case!1:return[0,0];default:return g.toVector(r)}},from(r){if(typeof r=="function")return r;if(r!=null)return g.toVector(r)},transform(r,e,t){const n=r||t.shared.transform;if(this.hasCustomTransform=!!n,process.env.NODE_ENV==="development"){const s=n||le;return i=>{const c=s(i);return(!isFinite(c[0])||!isFinite(c[1]))&&console.warn(`[@use-gesture]: config.transform() must produce a valid result, but it was: [${c[0]},${[1]}]`),c}}return n||le},threshold(r){return g.toVector(r,0)}};process.env.NODE_ENV==="development"&&Object.assign(q,{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 Be=0,V=l(l({},q),{},{axis(r,e,{axis:t}){if(this.lockDirection=t==="lock",!this.lockDirection)return t},axisThreshold(r=Be){return r},bounds(r={}){if(typeof r=="function")return i=>V.bounds(r(i));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]]}}),he={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 ze extends Ke{constructor(...e){super(...e),_(this,"ingKey","dragging")}reset(){super.reset();const e=this.state;e._pointerId=void 0,e._pointerActive=!1,e._keyboardActive=!1,e._preventScroll=!1,e._delayed=!1,e.swipe=[0,0],e.tap=!1,e.canceled=!1,e.cancel=this.cancel.bind(this)}setup(){const e=this.state;if(e._bounds instanceof HTMLElement){const t=e._bounds.getBoundingClientRect(),n=e.currentTarget.getBoundingClientRect(),s={left:t.left-n.left+e.offset[0],right:t.right-n.right+e.offset[0],top:t.top-n.top+e.offset[1],bottom:t.bottom-n.bottom+e.offset[1]};e._bounds=V.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=X(e),n._pointerActive=!0,this.computeValues(ue(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 s=X(e);if(t._pointerId!==void 0&&s!==t._pointerId)return;const i=ue(e);if(document.pointerLockElement===e.target?t._delta=[e.movementX,e.movementY]:(t._delta=g.sub(i,t._values),this.computeValues(i)),g.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=X(e);if(t._pointerId!==void 0&&s!==t._pointerId)return;this.state._pointerActive=!1,this.setActive(),this.compute(e);const[i,c]=t._distance;if(t.tap=i<=n.tapsThreshold&&c<=n.tapsThreshold,t.tap&&n.filterTaps)t._force=!0;else{const[a,u]=t._delta,[p,f]=t._movement,[x,v]=n.swipe.velocity,[$,A]=n.swipe.distance,S=n.swipe.duration;if(t.elapsedTime<S){const N=Math.abs(a/t.timeDelta),I=Math.abs(u/t.timeDelta);N>x&&Math.abs(p)>$&&(t.swipe[0]=Math.sign(a)),I>v&&Math.abs(f)>A&&(t.swipe[1]=Math.sign(u))}}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,Ye(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=he[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,g.addTo(n._movement,n._delta),this.compute(e),this.emit()}}keyUp(e){e.key in he&&(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 Ye(r){"persist"in r&&typeof r.persist=="function"&&r.persist()}const j=typeof window<"u"&&window.document&&window.document.createElement;function pe(){return j&&"ontouchstart"in window}function We(){return pe()||j&&window.navigator.maxTouchPoints>1}function Fe(){return j&&"onpointerdown"in window}function He(){return j&&"exitPointerLock"in window.document}function Xe(){try{return"constructor"in GestureEvent}catch{return!1}}const T={isBrowser:j,gesture:Xe(),touch:pe(),touchscreen:We(),pointer:Fe(),pointerLock:He()},qe=250,Ge=180,Je=.5,Qe=50,Ze=250,et=10,me={mouse:0,touch:0,pen:8},ge=l(l({},V),{},{device(r,e,{pointer:{touch:t=!1,lock:n=!1,mouse:s=!1}={}}){return this.pointerLock=n&&T.pointerLock,T.touch&&t?"touch":this.pointerLock?"mouse":T.pointer&&!s?"pointer":T.touch?"touch":"mouse"},preventScrollAxis(r,e,{preventScroll:t}){if(this.preventScrollDelay=typeof t=="number"?t:t||t===void 0&&r?qe:void 0,!(!T.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 i=g.toVector(r,t?n:s?1:0);return this.filterTaps=t,this.tapsThreshold=n,i},swipe({velocity:r=Je,distance:e=Qe,duration:t=Ze}={}){return{velocity:this.transform(g.toVector(r)),distance:this.transform(g.toVector(e)),duration:t}},delay(r=0){switch(r){case!0:return Ge;case!1:return 0;default:return r}},axisThreshold(r){return r?l(l({},me),r):me},keyboardDisplacement(r=et){return r}});process.env.NODE_ENV==="development"&&Object.assign(ge,{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}}),l(l({},q),{},{device(r,e,{shared:t,pointer:{touch:n=!1}={}}){if(t.target&&!T.touch&&T.gesture)return"gesture";if(T.touch&&n)return"touch";if(T.touchscreen){if(T.pointer)return"pointer";if(T.touch)return"touch"}},bounds(r,e,{scaleBounds:t={},angleBounds:n={}}){const s=c=>{const a=fe(Y(t,c),{min:-1/0,max:1/0});return[a.min,a.max]},i=c=>{const a=fe(Y(n,c),{min:-1/0,max:1/0});return[a.min,a.max]};return typeof t!="function"&&typeof n!="function"?[s(),i()]:c=>[s(c),i(c)]},threshold(r,e,t){return this.lockDirection=t.axis==="lock",g.toVector(r,this.lockDirection?[.1,3]:0)},modifierKey(r){return r===void 0?"ctrlKey":r},pinchOnWheel(r=!0){return r}}),l(l({},V),{},{mouseOnly:(r=!0)=>r}),l(l({},V),{},{mouseOnly:(r=!0)=>r});const ve=new Map,G=new Map;function tt(r){ve.set(r.key,r.engine),G.set(r.key,r.resolver)}const rt={key:"drag",engine:ze,resolver:ge};function nt(r,e){if(r==null)return{};var t={},n=Object.keys(r),s,i;for(i=0;i<n.length;i++)s=n[i],!(e.indexOf(s)>=0)&&(t[s]=r[s]);return t}function st(r,e){if(r==null)return{};var t=nt(r,e),n,s;if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(r);for(s=0;s<i.length;s++)n=i[s],!(e.indexOf(n)>=0)&&Object.prototype.propertyIsEnumerable.call(r,n)&&(t[n]=r[n])}return t}const it={target(r){if(r)return()=>"current"in r?r.current:r},enabled(r=!0){return r},window(r=T.isBrowser?window:void 0){return r},eventOptions({passive:r=!0,capture:e=!1}={}){return{passive:r,capture:e}},transform(r){return r}},ot=["target","eventOptions","window","enabled","transform"];function W(r={},e){const t={};for(const[n,s]of Object.entries(e))switch(typeof s){case"function":if(process.env.NODE_ENV==="development"){const i=s.call(t,r[n],n,r);Number.isNaN(i)||(t[n]=i)}else t[n]=s.call(t,r[n],n,r);break;case"object":t[n]=W(r[n],s);break;case"boolean":s&&(t[n]=r[n]);break}return t}function at(r,e,t={}){const n=r,{target:s,eventOptions:i,window:c,enabled:a,transform:u}=n,p=st(n,ot);if(t.shared=W({target:s,eventOptions:i,window:c,enabled:a,transform:u},it),e){const f=G.get(e);t[e]=W(l({shared:t.shared},p),f)}else for(const f in p){const x=G.get(f);if(x)t[f]=W(l({shared:t.shared},p[f]),x);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 ye{constructor(e,t){_(this,"_listeners",new Set),this._ctrl=e,this._gestureKey=t}add(e,t,n,s,i){const c=this._listeners,a=Ae(t,n),u=this._gestureKey?this._ctrl.config[this._gestureKey].eventOptions:{},p=l(l({},u),i);e.addEventListener(a,s,p);const f=()=>{e.removeEventListener(a,s,p),c.delete(f)};return c.add(f),f}clean(){this._listeners.forEach(e=>e()),this._listeners.clear()}}class ct{constructor(){_(this,"_timeouts",new Map)}add(e,t,n=140,...s){this.remove(e),this._timeouts.set(e,window.setTimeout(t,n,...s))}remove(e){const t=this._timeouts.get(e);t&&window.clearTimeout(t)}clean(){this._timeouts.forEach(e=>void window.clearTimeout(e)),this._timeouts.clear()}}class ut{constructor(e){_(this,"gestures",new Set),_(this,"_targetEventStore",new ye(this)),_(this,"gestureEventStores",{}),_(this,"gestureTimeoutStores",{}),_(this,"handlers",{}),_(this,"config",{}),_(this,"pointerIds",new Set),_(this,"touchIds",new Set),_(this,"state",{shared:{shiftKey:!1,metaKey:!1,ctrlKey:!1,altKey:!1}}),ft(this,e)}setEventIds(e){if(z(e))return this.touchIds=new Set($e(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=at(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 c of this.gestures){const a=this.config[c],u=_e(n,a.eventOptions,!!s);if(a.enabled){const p=ve.get(c);new p(this,e,c).bind(u)}}const i=_e(n,t.eventOptions,!!s);for(const c in this.nativeHandlers)i(c,"",a=>this.nativeHandlers[c](l(l({},this.state.shared),{},{event:a,args:e})),void 0,!0)}for(const i in n)n[i]=Re(...n[i]);if(!s)return n;for(const i in n){const{device:c,capture:a,passive:u}=Oe(i);this._targetEventStore.add(s,c,"",n[i],{capture:a,passive:u})}}}}function L(r,e){r.gestures.add(e),r.gestureEventStores[e]=new ye(r,e),r.gestureTimeoutStores[e]=new ct}function ft(r,e){e.drag&&L(r,"drag"),e.wheel&&L(r,"wheel"),e.scroll&&L(r,"scroll"),e.move&&L(r,"move"),e.pinch&&L(r,"pinch"),e.hover&&L(r,"hover")}const _e=(r,e,t)=>(n,s,i,c={},a=!1)=>{var u,p;const f=(u=c.capture)!==null&&u!==void 0?u:e.capture,x=(p=c.passive)!==null&&p!==void 0?p:e.passive;let v=a?n:ke(n,s,f);t&&x&&(v+="Passive"),r[v]=r[v]||[],r[v].push(i)};function lt(r,e={},t,n){const s=y.useMemo(()=>new ut(r),[]);if(s.applyHandlers(r,n),s.applyConfig(e,t),y.useEffect(s.effect.bind(s)),y.useEffect(()=>s.clean.bind(s),[]),e.target===void 0)return s.bind.bind(s)}function dt(r,e){return tt(rt),lt({drag:r},e||{},"drag")}const J="RSC::Event";function ht(){const r=y.useRef(null);function e(n){y.useEffect(()=>{r.current||(r.current=document.createElement("div"));function s(i){n(i.detail)}if(r.current)return r.current.addEventListener(J,s,!1),()=>{var i;(i=r.current)==null||i.removeEventListener(J,s,!1)}},[n])}function t(n){if(r.current){const s=new CustomEvent(J,{detail:n});r.current.dispatchEvent(s)}}return{useListenToCustomEvent:e,emitEvent:t}}function pt({init:r=!0,items:e,withLoop:t=!1,id:n,itemsPerSlide:s=1,gutter:i=0,startEndGutter:c=0,carouselAxis:a="x",slideType:u="fixed",startingPosition:p="start",enableGestures:f=!0,slideWhenDragThresholdIsReached:x=!0,onInit:v}){const $=y.useRef(r),A=y.useRef(null),S=y.useRef(null),N=y.useRef(0),I=y.useRef(!t),P=y.useRef(!1),U=y.useRef(0),d=y.useRef(0),[R,D]=we.useSpring(()=>({value:0,onChange({value:o}){(u==="fixed"||u==="fluid")&&A.current.style.setProperty(`--${n}-offset-position`,`${o.value}px`),u==="freeScroll"&&(S.current[a==="x"?"scrollLeft":"scrollTop"]=Math.abs(o.value))}}),[a]),Q=u!=="freeScroll"&&t?[...e.map(o=>({...o,id:`prev-repeated-item-${o.id}`})),...e,...e.map(o=>({...o,id:`next-repeated-item-${o.id}`}))]:e,{useListenToCustomEvent:be,emitEvent:K}=ht();function Z(o){$.current&&(P.current||B({type:"next",toIndex:o,actionType:"click"}))}function ee(o){$.current&&(I.current||B({type:"prev",toIndex:o,actionType:"click"}))}function B({type:o,shouldAnimate:m=!0,toIndex:k,actionType:w}){const h=F(),H=!m;I.current=!1,P.current=!1;let C=R.value.get(),b=0;if(o==="next"&&(d.current+=1),o==="prev"&&(d.current-=1),k!==void 0&&(d.current=k),u!=="freeScroll"&&o==="next"){const E=te(t?h*(e.length*2):0);b=-(d.current*h),E-Math.abs(b)<h/1.2&&u==="fluid"&&!t&&(b=-E),!t&&Math.abs(b)>=E&&(P.current=!0,b=-E),t&&d.current===e.length&&(d.current=0,C=C+h*e.length,b=0)}if(u!=="freeScroll"&&o==="prev"&&(b=-(d.current*h),!t&&b>=0&&(I.current=!0,b=0),t&&d.current<0&&Math.abs(d.current)===e.length/2&&(C=C-h*e.length,b=-(Math.abs(d.current)*h),d.current=e.length/2)),u==="freeScroll"&&o==="next"){const E=S.current[a==="x"?"scrollLeft":"scrollTop"];C=E,b=E+h}if(u==="freeScroll"&&o==="prev"){const E=S.current[a==="x"?"scrollLeft":"scrollTop"];C=E,b=E-h}N.current=b,K(w==="resize"?{eventName:"onResize",sliceActionType:w,slideDirection:o,currentItem:{index:d.current,id:e.at(d.current).id,startReached:I.current,endReached:P.current}}:{eventName:"onSlideStartChange",sliceActionType:w,slideDirection:o,nextItem:{index:d.current,id:e.at(d.current).id,startReached:I.current,endReached:P.current}}),D.start({immediate:H,from:{value:C},to:{value:b},onRest({finished:E}){E&&u==="fixed"&&K({eventName:"onSlideChangeComplete",sliceActionType:w,slideDirection:o,currentItem:{index:d.current,id:e.at(d.current).id,startReached:I.current,endReached:P.current}}),E&&u==="fluid"&&K({eventName:"onSlideChangeComplete",sliceActionType:w,slideDirection:o,currentItem:{index:0,id:"",startReached:I.current,endReached:P.current}})}})}function F(){const o=S.current.children[0];let m=0;return m=o.getBoundingClientRect()[a==="x"?"width":"height"]+i,m}function te(o){const m=S.current;return m[a==="x"?"scrollWidth":"scrollHeight"]-m.getBoundingClientRect()[a==="x"?"width":"height"]-o}y.useEffect(()=>{function o(w,h){switch(w){case"start":return 0;case"middle-start":return Math.floor((h-1)*.25);case"center":return Math.floor((h-1)*.5);case"middle-end":return Math.floor((h-1)*.75);case"end":return h-1;default:return 0}}function m(w){if(A.current){let h=0;t&&(h=F()*e.length),h-=F()*o(p,s),h-=c,A.current.style.setProperty(`--${n}-offset-modifier`,`${-h}px`),w&&w()}}function k(){m(),B({type:"next",toIndex:d.current,shouldAnimate:!1,actionType:"resize"})}if(r&&(U.current=F()/4),r&&u==="fixed")return m(v),window.addEventListener("resize",k),()=>{window.removeEventListener("resize",k)}},[r,t,n,a,i,p,u]);const mt=dt(o=>{if(!$.current)return;const m=o.dragging,k=o.offset[a==="x"?0:1],w=o.movement[a==="x"?0:1],h=w>U.current,H=w<-U.current,C=o.velocity;m&&(K({...o,eventName:"onDrag",slideActionType:"drag"}),D.start({value:k,immediate:!0,config:{velocity:C}}),x&&(h||H)&&o.cancel()),o.last&&(h?B({actionType:"drag",type:"prev"}):H?B({actionType:"drag",type:"next"}):D.start({value:N.current,config:{velocity:C}}))},{enabled:f&&u!=="freeScroll",axis:a,rubberband:!t,...t?{}:{bounds:()=>({right:0,left:-te(0),top:-te(0),bottom:0})},from:()=>[R.value.get(),R.value.get()]});return{carouselFragment:M.jsxs("div",{ref:A,className:"ReactSpringCarouselContainer","data-part":"Container","data-part-internal":`${n}-Container`,children:[M.jsx("style",{dangerouslySetInnerHTML:{__html:`
|
|
1
|
+
(function(O,$){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"],$):(O=typeof globalThis<"u"?globalThis:O||self,$(O["react-spring-carousel"]={},O["react/jsx-runtime"],O["@react-spring/web"],O.React))})(this,function(O,$,we,y){"use strict";function Ee(r,e,t){return Math.max(e,Math.min(r,t))}const g={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 re(r,e,t){return e===0||Math.abs(e)===1/0?Math.pow(r,t*5):r*e*t/(e+t*r)}function ne(r,e,t,n=.15){return n===0?Ee(r,e,t):r<e?-re(e-r,t-e,n)+e:r>t?+re(r-t,t-e,n)+t:r}function Te(r,[e,t],[n,s]){const[[i,c],[a,u]]=r;return[ne(e,i,c,n),ne(t,a,u,s)]}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);if(typeof n!="object")return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return(e==="string"?String:Number)(r)}function Se(r){var e=xe(r,"string");return typeof e=="symbol"?e:String(e)}function _(r,e,t){return e=Se(e),e in r?Object.defineProperty(r,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):r[e]=t,r}function se(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 l(r){for(var e=1;e<arguments.length;e++){var t=arguments[e]!=null?arguments[e]:{};e%2?se(Object(t),!0).forEach(function(n){_(r,n,t[n])}):Object.getOwnPropertyDescriptors?Object.defineProperties(r,Object.getOwnPropertyDescriptors(t)):se(Object(t)).forEach(function(n){Object.defineProperty(r,n,Object.getOwnPropertyDescriptor(t,n))})}return r}const ie={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 oe(r){return r?r[0].toUpperCase()+r.slice(1):""}const Ie=["enter","leave"];function De(r=!1,e){return r&&!Ie.includes(e)}function ke(r,e="",t=!1){const n=ie[r],s=n&&n[e]||e;return"on"+oe(r)+oe(s)+(De(t,s)?"Capture":"")}const Ce=["gotpointercapture","lostpointercapture"];function Oe(r){let e=r.substring(2).toLowerCase();const t=!!~e.indexOf("passive");t&&(e=e.replace("passive",""));const n=Ce.includes(e)?"capturecapture":"capture",s=!!~e.indexOf(n);return s&&(e=e.replace("capture","")),{device:e,capture:s,passive:t}}function Ae(r,e=""){const t=ie[r],n=t&&t[e]||e;return r+n}function z(r){return"touches"in r}function ae(r){return z(r)?"touch":"pointerType"in r?r.pointerType:"mouse"}function Pe(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 $e(r){return r.type==="touchend"||r.type==="touchcancel"?r.changedTouches:r.targetTouches}function ce(r){return z(r)?$e(r)[0]:r}function Me(r){return Pe(r).map(e=>e.identifier)}function X(r){const e=ce(r);return z(r)?e.identifier:e.pointerId}function ue(r){const e=ce(r);return[e.clientX,e.clientY]}function Ne(r){const e={};if("buttons"in r&&(e.buttons=r.buttons),"shiftKey"in r){const{shiftKey:t,altKey:n,metaKey:s,ctrlKey:i}=r;Object.assign(e,{shiftKey:t,altKey:n,metaKey:s,ctrlKey:i})}return e}function Y(r,...e){return typeof r=="function"?r(...e):r}function Le(){}function Re(...r){return r.length===0?Le:r.length===1?r[0]:function(){let e;for(const t of r)e=t.apply(this,arguments)||e;return e}}function fe(r,e){return Object.assign({},e,r||{})}const Ve=32;class je{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?Y(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 i=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,Ne(e)),s.down=s.pressed=s.buttons%2===1||s.touches>0,i=e.timeStamp-t.timeStamp,t.timeStamp=e.timeStamp,t.elapsedTime=t.timeStamp-t.startTime),t._active){const D=t._delta.map(Math.abs);g.addTo(t._distance,D)}this.axisIntent&&this.axisIntent(e);const[c,a]=t._movement,[u,d]=n.threshold,{_step:f,values:x}=t;if(n.hasCustomTransform?(f[0]===!1&&(f[0]=Math.abs(c)>=u&&x[0]),f[1]===!1&&(f[1]=Math.abs(a)>=d&&x[1])):(f[0]===!1&&(f[0]=Math.abs(c)>=u&&Math.sign(c)*u),f[1]===!1&&(f[1]=Math.abs(a)>=d&&Math.sign(a)*d)),t.intentional=f[0]!==!1||f[1]!==!1,!t.intentional)return;const v=[0,0];if(n.hasCustomTransform){const[D,Q]=x;v[0]=f[0]!==!1?D-f[0]:0,v[1]=f[1]!==!1?Q-f[1]:0}else v[0]=f[0]!==!1?c-f[0]:0,v[1]=f[1]!==!1?a-f[1]:0;this.restrictToAxis&&!t._blocked&&this.restrictToAxis(v);const M=t.offset,A=t._active&&!t._blocked||t.active;A&&(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=Y(n.bounds,t)),this.setup&&this.setup()),t.movement=v,this.computeOffset()));const[S,N]=t.offset,[[I,P],[U,h]]=t._bounds;t.overflow=[S<I?-1:S>P?1:0,N<U?-1:N>h?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 R=t._active?n.rubberband||[0,0]:[0,0];if(t.offset=Te(t._bounds,t.offset,R),t.delta=g.sub(t.offset,M),this.computeMovement(),A&&(!t.last||i>Ve)){t.delta=g.sub(t.offset,M);const D=t.delta.map(Math.abs);g.addTo(t.distance,D),t.direction=t.delta.map(Math.sign),t._direction=t._delta.map(Math.sign),!t.first&&i>0&&(t.velocity=[D[0]/i,D[1]/i],t.timeDelta=i)}}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(l(l(l({},t),e),{},{[this.aliasKey]:e.values}));s!==void 0&&(e.memo=s)}clean(){this.eventStore.clean(),this.timeoutStore.clean()}}function Ue([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 Ke extends je{constructor(...e){super(...e),_(this,"aliasKey","xy")}reset(){super.reset(),this.state.axis=void 0}init(){this.state.offset=[0,0],this.state.lastOffset=[0,0]}computeOffset(){this.state.offset=g.add(this.state.lastOffset,this.state.movement)}computeMovement(){this.state.movement=g.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[ae(e)]:n.axisThreshold;t.axis=Ue(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 le=r=>r,de=.15,q={enabled(r=!0){return r},eventOptions(r,e,t){return l(l({},t.shared.eventOptions),r)},preventDefault(r=!1){return r},triggerAllEvents(r=!1){return r},rubberband(r=0){switch(r){case!0:return[de,de];case!1:return[0,0];default:return g.toVector(r)}},from(r){if(typeof r=="function")return r;if(r!=null)return g.toVector(r)},transform(r,e,t){const n=r||t.shared.transform;if(this.hasCustomTransform=!!n,process.env.NODE_ENV==="development"){const s=n||le;return i=>{const c=s(i);return(!isFinite(c[0])||!isFinite(c[1]))&&console.warn(`[@use-gesture]: config.transform() must produce a valid result, but it was: [${c[0]},${[1]}]`),c}}return n||le},threshold(r){return g.toVector(r,0)}};process.env.NODE_ENV==="development"&&Object.assign(q,{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 Be=0,V=l(l({},q),{},{axis(r,e,{axis:t}){if(this.lockDirection=t==="lock",!this.lockDirection)return t},axisThreshold(r=Be){return r},bounds(r={}){if(typeof r=="function")return i=>V.bounds(r(i));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]]}}),he={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 ze extends Ke{constructor(...e){super(...e),_(this,"ingKey","dragging")}reset(){super.reset();const e=this.state;e._pointerId=void 0,e._pointerActive=!1,e._keyboardActive=!1,e._preventScroll=!1,e._delayed=!1,e.swipe=[0,0],e.tap=!1,e.canceled=!1,e.cancel=this.cancel.bind(this)}setup(){const e=this.state;if(e._bounds instanceof HTMLElement){const t=e._bounds.getBoundingClientRect(),n=e.currentTarget.getBoundingClientRect(),s={left:t.left-n.left+e.offset[0],right:t.right-n.right+e.offset[0],top:t.top-n.top+e.offset[1],bottom:t.bottom-n.bottom+e.offset[1]};e._bounds=V.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=X(e),n._pointerActive=!0,this.computeValues(ue(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 s=X(e);if(t._pointerId!==void 0&&s!==t._pointerId)return;const i=ue(e);if(document.pointerLockElement===e.target?t._delta=[e.movementX,e.movementY]:(t._delta=g.sub(i,t._values),this.computeValues(i)),g.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=X(e);if(t._pointerId!==void 0&&s!==t._pointerId)return;this.state._pointerActive=!1,this.setActive(),this.compute(e);const[i,c]=t._distance;if(t.tap=i<=n.tapsThreshold&&c<=n.tapsThreshold,t.tap&&n.filterTaps)t._force=!0;else{const[a,u]=t._delta,[d,f]=t._movement,[x,v]=n.swipe.velocity,[M,A]=n.swipe.distance,S=n.swipe.duration;if(t.elapsedTime<S){const N=Math.abs(a/t.timeDelta),I=Math.abs(u/t.timeDelta);N>x&&Math.abs(d)>M&&(t.swipe[0]=Math.sign(a)),I>v&&Math.abs(f)>A&&(t.swipe[1]=Math.sign(u))}}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,Ye(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=he[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,g.addTo(n._movement,n._delta),this.compute(e),this.emit()}}keyUp(e){e.key in he&&(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 Ye(r){"persist"in r&&typeof r.persist=="function"&&r.persist()}const j=typeof window<"u"&&window.document&&window.document.createElement;function pe(){return j&&"ontouchstart"in window}function We(){return pe()||j&&window.navigator.maxTouchPoints>1}function Fe(){return j&&"onpointerdown"in window}function He(){return j&&"exitPointerLock"in window.document}function Xe(){try{return"constructor"in GestureEvent}catch{return!1}}const T={isBrowser:j,gesture:Xe(),touch:pe(),touchscreen:We(),pointer:Fe(),pointerLock:He()},qe=250,Ge=180,Je=.5,Qe=50,Ze=250,et=10,me={mouse:0,touch:0,pen:8},ge=l(l({},V),{},{device(r,e,{pointer:{touch:t=!1,lock:n=!1,mouse:s=!1}={}}){return this.pointerLock=n&&T.pointerLock,T.touch&&t?"touch":this.pointerLock?"mouse":T.pointer&&!s?"pointer":T.touch?"touch":"mouse"},preventScrollAxis(r,e,{preventScroll:t}){if(this.preventScrollDelay=typeof t=="number"?t:t||t===void 0&&r?qe:void 0,!(!T.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 i=g.toVector(r,t?n:s?1:0);return this.filterTaps=t,this.tapsThreshold=n,i},swipe({velocity:r=Je,distance:e=Qe,duration:t=Ze}={}){return{velocity:this.transform(g.toVector(r)),distance:this.transform(g.toVector(e)),duration:t}},delay(r=0){switch(r){case!0:return Ge;case!1:return 0;default:return r}},axisThreshold(r){return r?l(l({},me),r):me},keyboardDisplacement(r=et){return r}});process.env.NODE_ENV==="development"&&Object.assign(ge,{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}}),l(l({},q),{},{device(r,e,{shared:t,pointer:{touch:n=!1}={}}){if(t.target&&!T.touch&&T.gesture)return"gesture";if(T.touch&&n)return"touch";if(T.touchscreen){if(T.pointer)return"pointer";if(T.touch)return"touch"}},bounds(r,e,{scaleBounds:t={},angleBounds:n={}}){const s=c=>{const a=fe(Y(t,c),{min:-1/0,max:1/0});return[a.min,a.max]},i=c=>{const a=fe(Y(n,c),{min:-1/0,max:1/0});return[a.min,a.max]};return typeof t!="function"&&typeof n!="function"?[s(),i()]:c=>[s(c),i(c)]},threshold(r,e,t){return this.lockDirection=t.axis==="lock",g.toVector(r,this.lockDirection?[.1,3]:0)},modifierKey(r){return r===void 0?"ctrlKey":r},pinchOnWheel(r=!0){return r}}),l(l({},V),{},{mouseOnly:(r=!0)=>r}),l(l({},V),{},{mouseOnly:(r=!0)=>r});const ve=new Map,G=new Map;function tt(r){ve.set(r.key,r.engine),G.set(r.key,r.resolver)}const rt={key:"drag",engine:ze,resolver:ge};function nt(r,e){if(r==null)return{};var t={},n=Object.keys(r),s,i;for(i=0;i<n.length;i++)s=n[i],!(e.indexOf(s)>=0)&&(t[s]=r[s]);return t}function st(r,e){if(r==null)return{};var t=nt(r,e),n,s;if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(r);for(s=0;s<i.length;s++)n=i[s],!(e.indexOf(n)>=0)&&Object.prototype.propertyIsEnumerable.call(r,n)&&(t[n]=r[n])}return t}const it={target(r){if(r)return()=>"current"in r?r.current:r},enabled(r=!0){return r},window(r=T.isBrowser?window:void 0){return r},eventOptions({passive:r=!0,capture:e=!1}={}){return{passive:r,capture:e}},transform(r){return r}},ot=["target","eventOptions","window","enabled","transform"];function W(r={},e){const t={};for(const[n,s]of Object.entries(e))switch(typeof s){case"function":if(process.env.NODE_ENV==="development"){const i=s.call(t,r[n],n,r);Number.isNaN(i)||(t[n]=i)}else t[n]=s.call(t,r[n],n,r);break;case"object":t[n]=W(r[n],s);break;case"boolean":s&&(t[n]=r[n]);break}return t}function at(r,e,t={}){const n=r,{target:s,eventOptions:i,window:c,enabled:a,transform:u}=n,d=st(n,ot);if(t.shared=W({target:s,eventOptions:i,window:c,enabled:a,transform:u},it),e){const f=G.get(e);t[e]=W(l({shared:t.shared},d),f)}else for(const f in d){const x=G.get(f);if(x)t[f]=W(l({shared:t.shared},d[f]),x);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 ye{constructor(e,t){_(this,"_listeners",new Set),this._ctrl=e,this._gestureKey=t}add(e,t,n,s,i){const c=this._listeners,a=Ae(t,n),u=this._gestureKey?this._ctrl.config[this._gestureKey].eventOptions:{},d=l(l({},u),i);e.addEventListener(a,s,d);const f=()=>{e.removeEventListener(a,s,d),c.delete(f)};return c.add(f),f}clean(){this._listeners.forEach(e=>e()),this._listeners.clear()}}class ct{constructor(){_(this,"_timeouts",new Map)}add(e,t,n=140,...s){this.remove(e),this._timeouts.set(e,window.setTimeout(t,n,...s))}remove(e){const t=this._timeouts.get(e);t&&window.clearTimeout(t)}clean(){this._timeouts.forEach(e=>void window.clearTimeout(e)),this._timeouts.clear()}}class ut{constructor(e){_(this,"gestures",new Set),_(this,"_targetEventStore",new ye(this)),_(this,"gestureEventStores",{}),_(this,"gestureTimeoutStores",{}),_(this,"handlers",{}),_(this,"config",{}),_(this,"pointerIds",new Set),_(this,"touchIds",new Set),_(this,"state",{shared:{shiftKey:!1,metaKey:!1,ctrlKey:!1,altKey:!1}}),ft(this,e)}setEventIds(e){if(z(e))return this.touchIds=new Set(Me(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=at(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 c of this.gestures){const a=this.config[c],u=_e(n,a.eventOptions,!!s);if(a.enabled){const d=ve.get(c);new d(this,e,c).bind(u)}}const i=_e(n,t.eventOptions,!!s);for(const c in this.nativeHandlers)i(c,"",a=>this.nativeHandlers[c](l(l({},this.state.shared),{},{event:a,args:e})),void 0,!0)}for(const i in n)n[i]=Re(...n[i]);if(!s)return n;for(const i in n){const{device:c,capture:a,passive:u}=Oe(i);this._targetEventStore.add(s,c,"",n[i],{capture:a,passive:u})}}}}function L(r,e){r.gestures.add(e),r.gestureEventStores[e]=new ye(r,e),r.gestureTimeoutStores[e]=new ct}function ft(r,e){e.drag&&L(r,"drag"),e.wheel&&L(r,"wheel"),e.scroll&&L(r,"scroll"),e.move&&L(r,"move"),e.pinch&&L(r,"pinch"),e.hover&&L(r,"hover")}const _e=(r,e,t)=>(n,s,i,c={},a=!1)=>{var u,d;const f=(u=c.capture)!==null&&u!==void 0?u:e.capture,x=(d=c.passive)!==null&&d!==void 0?d:e.passive;let v=a?n:ke(n,s,f);t&&x&&(v+="Passive"),r[v]=r[v]||[],r[v].push(i)};function lt(r,e={},t,n){const s=y.useMemo(()=>new ut(r),[]);if(s.applyHandlers(r,n),s.applyConfig(e,t),y.useEffect(s.effect.bind(s)),y.useEffect(()=>s.clean.bind(s),[]),e.target===void 0)return s.bind.bind(s)}function dt(r,e){return tt(rt),lt({drag:r},e||{},"drag")}const J="RSC::Event";function ht(){const r=y.useRef(null);function e(n){y.useEffect(()=>{r.current||(r.current=document.createElement("div"));function s(i){n(i.detail)}if(r.current)return r.current.addEventListener(J,s,!1),()=>{var i;(i=r.current)==null||i.removeEventListener(J,s,!1)}},[n])}function t(n){if(r.current){const s=new CustomEvent(J,{detail:n});r.current.dispatchEvent(s)}}return{useListenToCustomEvent:e,emitEvent:t}}function pt({init:r=!0,items:e,withLoop:t=!1,id:n,itemsPerSlide:s=1,gutter:i=0,startEndGutter:c=0,carouselAxis:a="x",slideType:u="fixed",startingPosition:d="start",enableGestures:f=!0,slideWhenDragThresholdIsReached:x=!0,onInit:v}){const M=y.useRef(r),A=y.useRef(null),S=y.useRef(null),N=y.useRef(0),I=y.useRef(!t),P=y.useRef(!1),U=y.useRef(0),h=y.useRef(0),[R,D]=we.useSpring(()=>({value:0,onChange({value:o}){(u==="fixed"||u==="fluid")&&A.current.style.setProperty(`--${n}-offset-position`,`${o.value}px`),u==="freeScroll"&&(S.current[a==="x"?"scrollLeft":"scrollTop"]=Math.abs(o.value))}}),[a]),Q=u!=="freeScroll"&&t?[...e.map(o=>({...o,id:`prev-repeated-item-${o.id}`,isClonedItem:!0})),...e,...e.map(o=>({...o,id:`next-repeated-item-${o.id}`,isClonedItem:!0}))]:e,{useListenToCustomEvent:be,emitEvent:K}=ht();function Z(o){M.current&&(P.current||B({type:"next",toIndex:o,actionType:"click"}))}function ee(o){M.current&&(I.current||B({type:"prev",toIndex:o,actionType:"click"}))}function B({type:o,shouldAnimate:p=!0,toIndex:k,actionType:b}){const m=F(),H=!p;I.current=!1,P.current=!1;let C=R.value.get(),w=0;if(o==="next"&&(h.current+=1),o==="prev"&&(h.current===0?h.current=e.length-1:h.current-=1),k!==void 0&&(h.current=k),u!=="freeScroll"&&o==="next"){const E=te(t?m*(e.length*2):0);w=-(h.current*m),E-Math.abs(w)<m/1.2&&u==="fluid"&&!t&&(w=-E),!t&&Math.abs(w)>=E&&(P.current=!0,w=-E),t&&h.current===e.length&&(h.current=0,C=C+m*e.length,w=0)}if(u!=="freeScroll"&&o==="prev"&&(w=-(h.current*m),h.current===e.length-1&&(C=C-e.length*m),!t&&w>=0&&(I.current=!0,w=0)),u==="freeScroll"&&o==="next"){const E=S.current[a==="x"?"scrollLeft":"scrollTop"];C=E,w=E+m}if(u==="freeScroll"&&o==="prev"){const E=S.current[a==="x"?"scrollLeft":"scrollTop"];C=E,w=E-m}N.current=w,K(b==="resize"?{eventName:"onResize",sliceActionType:b,slideDirection:o,currentItem:{index:h.current,id:e.at(h.current).id,startReached:I.current,endReached:P.current}}:{eventName:"onSlideStartChange",sliceActionType:b,slideDirection:o,nextItem:{index:h.current,id:e.at(h.current).id,startReached:I.current,endReached:P.current}}),D.start({immediate:H,from:{value:C},to:{value:w},onRest({finished:E}){E&&u==="fixed"&&K({eventName:"onSlideChangeComplete",sliceActionType:b,slideDirection:o,currentItem:{index:h.current,id:e.at(h.current).id,startReached:I.current,endReached:P.current}}),E&&u==="fluid"&&K({eventName:"onSlideChangeComplete",sliceActionType:b,slideDirection:o,currentItem:{index:0,id:"",startReached:I.current,endReached:P.current}})}})}function F(){const o=S.current.children[0];let p=0;return p=o.getBoundingClientRect()[a==="x"?"width":"height"]+i,p}function te(o){const p=S.current;return p[a==="x"?"scrollWidth":"scrollHeight"]-p.getBoundingClientRect()[a==="x"?"width":"height"]-o}y.useEffect(()=>{function o(b,m){switch(b){case"start":return 0;case"middle-start":return Math.floor((m-1)*.25);case"center":return Math.floor((m-1)*.5);case"middle-end":return Math.floor((m-1)*.75);case"end":return m-1;default:return 0}}function p(b){if(A.current){let m=0;t&&(m=F()*e.length),m-=F()*o(d,s),m-=c,A.current.style.setProperty(`--${n}-offset-modifier`,`${-m}px`),b&&b()}}function k(){p(),B({type:"next",toIndex:h.current,shouldAnimate:!1,actionType:"resize"})}if(r&&(U.current=F()/4),r&&u==="fixed")return p(v),window.addEventListener("resize",k),()=>{window.removeEventListener("resize",k)}},[r,t,n,a,i,d,u]);const mt=dt(o=>{if(!M.current)return;const p=o.dragging,k=o.offset[a==="x"?0:1],b=o.movement[a==="x"?0:1],m=b>U.current,H=b<-U.current,C=o.velocity;p&&(K({...o,eventName:"onDrag",slideActionType:"drag"}),D.start({value:k,immediate:!0,config:{velocity:C}}),x&&(m||H)&&o.cancel()),o.last&&(m?B({actionType:"drag",type:"prev"}):H?B({actionType:"drag",type:"next"}):D.start({value:N.current,config:{velocity:C}}))},{enabled:f&&u!=="freeScroll",axis:a,rubberband:!t,...t?{}:{bounds:()=>({right:0,left:-te(0),top:-te(0),bottom:0})},from:()=>[R.value.get(),R.value.get()]});return{carouselFragment:$.jsxs("div",{ref:A,className:"ReactSpringCarouselContainer","data-part":"Container","data-part-internal":`${n}-Container`,children:[$.jsx("style",{dangerouslySetInnerHTML:{__html:`
|
|
2
|
+
:root {
|
|
3
|
+
--${n}-start-end-gutter: ${c*2}px;
|
|
4
|
+
--${n}-gutter: ${i}px;
|
|
5
|
+
}
|
|
2
6
|
[data-part-internal="${n}-Container"] {
|
|
3
7
|
display: flex;
|
|
4
8
|
width: 100%;
|
|
5
9
|
height: 100%;
|
|
6
10
|
overflow: hidden;
|
|
7
|
-
--${n}-gutter: ${i}px;
|
|
8
11
|
--${n}-items-per-slide: ${s};
|
|
9
12
|
--${n}-offset-position: 0px;
|
|
10
13
|
--${n}-offset-modifier: 0px;
|
|
11
14
|
--${n}-scroll-x-value: ${u!=="freeScroll"&&a==="x"?`calc(var(--${n}-offset-position) + var(--${n}-offset-modifier))`:"0px"};
|
|
12
15
|
--${n}-scroll-y-value: ${u!=="freeScroll"&&a==="y"?`calc(var(--${n}-offset-position) + var(--${n}-offset-modifier))`:"0px"};
|
|
13
|
-
|
|
16
|
+
|
|
14
17
|
}
|
|
15
18
|
[data-part-internal="${n}-Track"] {
|
|
16
19
|
display: flex;
|
|
@@ -26,4 +29,4 @@
|
|
|
26
29
|
display: flex;
|
|
27
30
|
flex: ${u==="fixed"?`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)))`:"1"};
|
|
28
31
|
}
|
|
29
|
-
`}})
|
|
32
|
+
`}}),$.jsx("div",{ref:S,className:"ReactSpringCarouselTrack","data-part":"Track","data-part-internal":`${n}-Track`,...mt(),...u==="freeScroll"?{onWheel(){R.value.stop()}}:{},children:Q.map((o,p)=>$.jsx("div",{className:"ReactSpringCarouselItem","data-part":"Item","data-part-internal":`${n}-Item`,"data-id":o.id,children:typeof o.renderItem=="function"?o.renderItem({useListenToCustomEvent:be,index:p,isClonedItem:!!o.isClonedItem}):o.renderItem},`${o.id}-${p}`))})]}),useListenToCustomEvent:be,slideToNextItem:()=>Z(),slideToPrevItem:()=>ee(),slideToItem:o=>{if(typeof o=="number"){if(!e[o]){console.warn(`The item you're trying to slide doesn't exist. index: ${o}`);return}o>h.current?Z(o):ee(o)}if(typeof o=="string"){const p=e.findIndex(k=>k.id===o);if(p<0){console.warn(`The item you're trying to slide doesn't exist. id: ${o}`);return}p>h.current?Z(p):ee(p)}}}}O.useSpringCarousel=pt,Object.defineProperty(O,Symbol.toStringTag,{value:"Module"})});
|
package/dist/types.d.ts
CHANGED
|
@@ -2,10 +2,11 @@ import { FullGestureState } from '@use-gesture/react';
|
|
|
2
2
|
import { ReactNode } from 'react';
|
|
3
3
|
export type SlideType = "fixed" | "fluid" | "freeScroll";
|
|
4
4
|
export type CarouselAxis = "x" | "y";
|
|
5
|
-
type Item = {
|
|
5
|
+
export type Item = {
|
|
6
6
|
id: string;
|
|
7
7
|
renderItem: ReactNode | ((props: {
|
|
8
8
|
index: number;
|
|
9
|
+
isClonedItem: boolean;
|
|
9
10
|
useListenToCustomEvent(eventHandler: SpringCarouselEventsEventHandler): void;
|
|
10
11
|
}) => ReactNode);
|
|
11
12
|
};
|