r3f-motion 1.0.8 → 1.0.10

package/dist/cjs/index.js

@@ -1120,7 +1120,7 @@ function AnimatePresence({ children, mode = "sync", onExitComplete, custom, }) {
 }
 
 const DEFAULT_SPRING = {
-    type: 'spring',
+    type: "spring",
     stiffness: 600,
     damping: 100,
     restDelta: 0.001,
@@ -1139,7 +1139,7 @@ const CarouselSlotContext = react.createContext(null);
 const useCarouselSlot = () => {
     const ctx = react.useContext(CarouselSlotContext);
     if (!ctx)
-        throw new Error('useCarouselSlot must be used inside <Carousel>');
+        throw new Error("useCarouselSlot must be used inside <Carousel>");
     return ctx;
 };
 const CarouselSlot = react.memo(({ item, itemWidth, slotRef, visible }) => {
@@ -1161,14 +1161,17 @@ const CarouselSlot = react.memo(({ item, itemWidth, slotRef, visible }) => {
     }, [itemWidth]);
     // Dispose the generated geometry on unmount — useLayoutEffect's replacement
     // logic only disposes the *previous* geometry, not the final one.
-    react.useEffect(() => () => { var _a; (_a = coverRef.current) === null || _a === void 0 ? void 0 : _a.geometry.dispose(); }, []);
+    react.useEffect(() => () => {
+        var _a;
+        (_a = coverRef.current) === null || _a === void 0 ? void 0 : _a.geometry.dispose();
+    }, []);
     // No onClick on the cover — the carousel's document-level capture listener
     // handles click suppression. The cover stays as a drag hit-target so swiping
     // works on slot regions where user content has gaps.
     return (jsxRuntime.jsxs("group", { ref: slotRef, children: [jsxRuntime.jsx("group", { ref: contentRef, children: visible ? item : null }), jsxRuntime.jsxs("mesh", { ref: coverRef, children: [jsxRuntime.jsx("planeGeometry", { args: [itemWidth, itemWidth] }), jsxRuntime.jsx("meshBasicMaterial", { transparent: true, opacity: 0, depthWrite: false })] })] }));
 });
 const Carousel = (_a) => {
-    var { items, itemWidth = 1.5, gap = 0.5, defaultValue = 0, transition = DEFAULT_SPRING, onSwitch, onDragStart, onDrag, onDragEnd, renderThreshold, dragThreshold = DRAG_THRESHOLD_RATIO, flickVelocity = FLICK_VELOCITY } = _a, props = tslib.__rest(_a, ["items", "itemWidth", "gap", "defaultValue", "transition", "onSwitch", "onDragStart", "onDrag", "onDragEnd", "renderThreshold", "dragThreshold", "flickVelocity"]);
+    var { items, itemWidth = 1.5, gap = 0.5, defaultValue = 0, transition = DEFAULT_SPRING, onSwitch, onDragStart, onDrag, onDragEnd, renderThreshold, dragThreshold = DRAG_THRESHOLD_RATIO, flickVelocity = FLICK_VELOCITY, disable } = _a, props = tslib.__rest(_a, ["items", "itemWidth", "gap", "defaultValue", "transition", "onSwitch", "onDragStart", "onDrag", "onDragEnd", "renderThreshold", "dragThreshold", "flickVelocity", "disable"]);
     const slideWidth = itemWidth + gap;
     const count = items.length;
     // Render twice the items and center on the first item of the second copy.
@@ -1236,8 +1239,8 @@ const Carousel = (_a) => {
                 e.stopPropagation();
             }
         };
-        document.addEventListener('click', onClickCapture, true);
-        return () => document.removeEventListener('click', onClickCapture, true);
+        document.addEventListener("click", onClickCapture, true);
+        return () => document.removeEventListener("click", onClickCapture, true);
     }, []);
     // Drag start: stop any in-flight snap and capture the slot we started on
     // so an under-threshold release can elastic back to it.
@@ -1303,7 +1306,9 @@ const Carousel = (_a) => {
             // one fades out — keeps the loop seamless mid-drag instead of waiting
             // for snap to settle on an integer slot.
             const slotDist = (groupX + ref.position.x) / slideWidth;
-            const shouldBeVisible = renderThreshold ? Math.abs(slotDist) <= renderThreshold + 0.5 : true;
+            const shouldBeVisible = renderThreshold
+                ? Math.abs(slotDist) <= renderThreshold + 0.5
+                : true;
             ref.visible = shouldBeVisible;
             if (visibleMaskRef.current[i] !== shouldBeVisible) {
                 if (!nextMask)
@@ -1316,7 +1321,7 @@ const Carousel = (_a) => {
             setVisibleMask(nextMask);
         }
     });
-    return (jsxRuntime.jsx(motion.group, Object.assign({ ref: groupRef, drag: "x", dragMomentum: false, initial: initial }, props, { onDragStart: handleDragStart, onDragEnd: handleDragEnd, onDrag: (_e, info) => onDrag === null || onDrag === void 0 ? void 0 : onDrag(info), children: loopedItems.map((item, i) => {
+    return (jsxRuntime.jsx(motion.group, Object.assign({ ref: groupRef, drag: disable ? false : "x", dragMomentum: false, initial: initial }, props, { onDragStart: handleDragStart, onDragEnd: handleDragEnd, onDrag: (_e, info) => onDrag === null || onDrag === void 0 ? void 0 : onDrag(info), children: loopedItems.map((item, i) => {
             var _a;
             const raw = i - currentSlot;
             const halfWrap = (((raw + slotCount / 2) % slotCount) + slotCount) % slotCount;
@@ -1328,7 +1333,9 @@ const Carousel = (_a) => {
                     isActive: distance === 0,
                     isNearby: distance <= 1,
                     currIndex,
-                }, children: jsxRuntime.jsx(CarouselSlot, { item: item, itemWidth: itemWidth, slotRef: (el) => { itemRefs.current[i] = el; }, visible: (_a = visibleMask[i]) !== null && _a !== void 0 ? _a : false }) }, `carouselItem-${i}`));
+                }, children: jsxRuntime.jsx(CarouselSlot, { item: item, itemWidth: itemWidth, slotRef: (el) => {
+                        itemRefs.current[i] = el;
+                    }, visible: (_a = visibleMask[i]) !== null && _a !== void 0 ? _a : false }) }, `carouselItem-${i}`));
         }) })));
 };
 var index = react.memo(Carousel);

package/dist/es/components/Carousel/index.mjs

@@ -8,7 +8,7 @@ import { useMotionValue, animate } from 'motion/react';
 import { motion } from '../../render/motion.mjs';
 
 const DEFAULT_SPRING = {
-    type: 'spring',
+    type: "spring",
     stiffness: 600,
     damping: 100,
     restDelta: 0.001,
@@ -27,7 +27,7 @@ const CarouselSlotContext = createContext(null);
 const useCarouselSlot = () => {
     const ctx = useContext(CarouselSlotContext);
     if (!ctx)
-        throw new Error('useCarouselSlot must be used inside <Carousel>');
+        throw new Error("useCarouselSlot must be used inside <Carousel>");
     return ctx;
 };
 const CarouselSlot = memo(({ item, itemWidth, slotRef, visible }) => {
@@ -49,14 +49,17 @@ const CarouselSlot = memo(({ item, itemWidth, slotRef, visible }) => {
     }, [itemWidth]);
     // Dispose the generated geometry on unmount — useLayoutEffect's replacement
     // logic only disposes the *previous* geometry, not the final one.
-    useEffect(() => () => { var _a; (_a = coverRef.current) === null || _a === void 0 ? void 0 : _a.geometry.dispose(); }, []);
+    useEffect(() => () => {
+        var _a;
+        (_a = coverRef.current) === null || _a === void 0 ? void 0 : _a.geometry.dispose();
+    }, []);
     // No onClick on the cover — the carousel's document-level capture listener
     // handles click suppression. The cover stays as a drag hit-target so swiping
     // works on slot regions where user content has gaps.
     return (jsxs("group", { ref: slotRef, children: [jsx("group", { ref: contentRef, children: visible ? item : null }), jsxs("mesh", { ref: coverRef, children: [jsx("planeGeometry", { args: [itemWidth, itemWidth] }), jsx("meshBasicMaterial", { transparent: true, opacity: 0, depthWrite: false })] })] }));
 });
 const Carousel = (_a) => {
-    var { items, itemWidth = 1.5, gap = 0.5, defaultValue = 0, transition = DEFAULT_SPRING, onSwitch, onDragStart, onDrag, onDragEnd, renderThreshold, dragThreshold = DRAG_THRESHOLD_RATIO, flickVelocity = FLICK_VELOCITY } = _a, props = __rest(_a, ["items", "itemWidth", "gap", "defaultValue", "transition", "onSwitch", "onDragStart", "onDrag", "onDragEnd", "renderThreshold", "dragThreshold", "flickVelocity"]);
+    var { items, itemWidth = 1.5, gap = 0.5, defaultValue = 0, transition = DEFAULT_SPRING, onSwitch, onDragStart, onDrag, onDragEnd, renderThreshold, dragThreshold = DRAG_THRESHOLD_RATIO, flickVelocity = FLICK_VELOCITY, disable } = _a, props = __rest(_a, ["items", "itemWidth", "gap", "defaultValue", "transition", "onSwitch", "onDragStart", "onDrag", "onDragEnd", "renderThreshold", "dragThreshold", "flickVelocity", "disable"]);
     const slideWidth = itemWidth + gap;
     const count = items.length;
     // Render twice the items and center on the first item of the second copy.
@@ -124,8 +127,8 @@ const Carousel = (_a) => {
                 e.stopPropagation();
             }
         };
-        document.addEventListener('click', onClickCapture, true);
-        return () => document.removeEventListener('click', onClickCapture, true);
+        document.addEventListener("click", onClickCapture, true);
+        return () => document.removeEventListener("click", onClickCapture, true);
     }, []);
     // Drag start: stop any in-flight snap and capture the slot we started on
     // so an under-threshold release can elastic back to it.
@@ -191,7 +194,9 @@ const Carousel = (_a) => {
             // one fades out — keeps the loop seamless mid-drag instead of waiting
             // for snap to settle on an integer slot.
             const slotDist = (groupX + ref.position.x) / slideWidth;
-            const shouldBeVisible = renderThreshold ? Math.abs(slotDist) <= renderThreshold + 0.5 : true;
+            const shouldBeVisible = renderThreshold
+                ? Math.abs(slotDist) <= renderThreshold + 0.5
+                : true;
             ref.visible = shouldBeVisible;
             if (visibleMaskRef.current[i] !== shouldBeVisible) {
                 if (!nextMask)
@@ -204,7 +209,7 @@ const Carousel = (_a) => {
             setVisibleMask(nextMask);
         }
     });
-    return (jsx(motion.group, Object.assign({ ref: groupRef, drag: "x", dragMomentum: false, initial: initial }, props, { onDragStart: handleDragStart, onDragEnd: handleDragEnd, onDrag: (_e, info) => onDrag === null || onDrag === void 0 ? void 0 : onDrag(info), children: loopedItems.map((item, i) => {
+    return (jsx(motion.group, Object.assign({ ref: groupRef, drag: disable ? false : "x", dragMomentum: false, initial: initial }, props, { onDragStart: handleDragStart, onDragEnd: handleDragEnd, onDrag: (_e, info) => onDrag === null || onDrag === void 0 ? void 0 : onDrag(info), children: loopedItems.map((item, i) => {
             var _a;
             const raw = i - currentSlot;
             const halfWrap = (((raw + slotCount / 2) % slotCount) + slotCount) % slotCount;
@@ -216,7 +221,9 @@ const Carousel = (_a) => {
                     isActive: distance === 0,
                     isNearby: distance <= 1,
                     currIndex,
-                }, children: jsx(CarouselSlot, { item: item, itemWidth: itemWidth, slotRef: (el) => { itemRefs.current[i] = el; }, visible: (_a = visibleMask[i]) !== null && _a !== void 0 ? _a : false }) }, `carouselItem-${i}`));
+                }, children: jsx(CarouselSlot, { item: item, itemWidth: itemWidth, slotRef: (el) => {
+                        itemRefs.current[i] = el;
+                    }, visible: (_a = visibleMask[i]) !== null && _a !== void 0 ? _a : false }) }, `carouselItem-${i}`));
         }) })));
 };
 var index = memo(Carousel);

package/dist/index.d.ts

@@ -140,6 +140,7 @@ interface CarouselProps {
     renderThreshold?: number;
     dragThreshold?: number;
     flickVelocity?: number;
+    disable?: boolean;
 }
 interface CarouselSlotInfo {
     slotIndex: number;
@@ -150,7 +151,7 @@ interface CarouselSlotInfo {
     isNearby: boolean;
 }
 declare const useCarouselSlot: () => CarouselSlotInfo;
-declare const Carousel: ({ items, itemWidth, gap, defaultValue, transition, onSwitch, onDragStart, onDrag, onDragEnd, renderThreshold, dragThreshold, flickVelocity, ...props }: CarouselProps) => react_jsx_runtime.JSX.Element;
+declare const Carousel: ({ items, itemWidth, gap, defaultValue, transition, onSwitch, onDragStart, onDrag, onDragEnd, renderThreshold, dragThreshold, flickVelocity, disable, ...props }: CarouselProps) => react_jsx_runtime.JSX.Element;
 declare const _default: typeof Carousel;
 
 export { AnimatePresence, _default as Carousel, MotionCamera, motion, useCarouselSlot, usePresence };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "r3f-motion",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "description": "A simple and powerful React animation library for @react-three/fiber leveraging motion.dev",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.mjs",