r3f-motion 1.0.6 → 1.0.8

package/dist/cjs/index.js

@@ -1134,7 +1134,15 @@ const VELOCITY_PROJECTION = 0.2;
 const DRAG_THRESHOLD_RATIO = 0.25;
 const FLICK_VELOCITY = 1.0;
 const mod = (n, m) => ((n % m) + m) % m;
-const CarouselSlot = react.memo(({ hadDragRef, item, itemWidth, slotRef }) => {
+let isDragging = false;
+const CarouselSlotContext = react.createContext(null);
+const useCarouselSlot = () => {
+    const ctx = react.useContext(CarouselSlotContext);
+    if (!ctx)
+        throw new Error('useCarouselSlot must be used inside <Carousel>');
+    return ctx;
+};
+const CarouselSlot = react.memo(({ item, itemWidth, slotRef, visible }) => {
     const contentRef = react.useRef(null);
     const coverRef = react.useRef(null);
     react.useLayoutEffect(() => {
@@ -1145,22 +1153,22 @@ const CarouselSlot = react.memo(({ hadDragRef, item, itemWidth, slotRef }) => {
         const box = new THREE.Box3().setFromObject(content);
         if (box.isEmpty())
             return;
+        const w = Math.max(box.max.x - box.min.x, itemWidth);
         const h = box.max.y - box.min.y;
         cover.geometry.dispose();
-        cover.geometry = new THREE.PlaneGeometry(itemWidth, h);
-        cover.position.z = box.max.z + 0.001;
-    }, [item, itemWidth]);
+        cover.geometry = new THREE.PlaneGeometry(w, h);
+        cover.position.set((box.max.x + box.min.x) / 2, (box.max.y + box.min.y) / 2, box.max.z + 0.001);
+    }, [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(); }, []);
-    return (jsxRuntime.jsxs("group", { ref: slotRef, children: [jsxRuntime.jsx("group", { ref: contentRef, children: item }), jsxRuntime.jsxs("mesh", { ref: coverRef, onClick: (e) => {
-                    if (hadDragRef.current) {
-                        e.stopPropagation();
-                        hadDragRef.current = false;
-                    }
-                }, children: [jsxRuntime.jsx("planeGeometry", { args: [itemWidth, itemWidth] }), jsxRuntime.jsx("meshBasicMaterial", { transparent: true, opacity: 0, depthWrite: false })] })] }));
+    // 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 = ({ items, itemWidth = 1.5, gap = 0.5, defaultValue = 0, transition = DEFAULT_SPRING, onSwitch, onDragStart, onDrag, onDragEnd, renderThreshold = 1, dragThreshold = DRAG_THRESHOLD_RATIO, flickVelocity = FLICK_VELOCITY, }) => {
+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"]);
     const slideWidth = itemWidth + gap;
     const count = items.length;
     // Render twice the items and center on the first item of the second copy.
@@ -1173,31 +1181,71 @@ const Carousel = ({ items, itemWidth = 1.5, gap = 0.5, defaultValue = 0, transit
     const startSlot = count + defaultValue;
     const groupRef = react.useRef(null);
     const itemRefs = react.useRef([]);
+    // Slot mount/unmount state — mirrors `ref.visible` but propagates through
+    // React so children that rely on lifecycle (e.g. Drei's <Html>, which
+    // doesn't reliably react to mid-frame `visible` mutations) update cleanly.
+    // Only flips when a slot crosses the threshold, so re-renders are limited
+    // to ~2-4 per swipe instead of every frame.
+    const [visibleMask, setVisibleMask] = react.useState(() => {
+        if (renderThreshold === undefined)
+            return new Array(slotCount).fill(true);
+        const mask = new Array(slotCount).fill(false);
+        for (let i = 0; i < slotCount; i++) {
+            mask[i] = Math.abs(i - startSlot) <= renderThreshold + 0.5;
+        }
+        return mask;
+    });
+    const visibleMaskRef = react.useRef(visibleMask);
+    visibleMaskRef.current = visibleMask;
     // Single source of truth: a fractional slot index that grows up/down
     // infinitely as the user navigates. group.position.x = -currIndex * slideWidth
     // at rest. Snap animations animate currIndex toward integer targets;
     // useFrame applies it to the group every frame (when not dragging).
     const currIndex = react$1.useMotionValue(startSlot);
     const isDraggingRef = react.useRef(false);
-    const hadDragRef = react.useRef(false);
     const dragStartIndexRef = react.useRef(startSlot);
     const snapAnimRef = react.useRef(null);
+    // performance.now() of the most recent frame in which the carousel was
+    // moving (drag in progress or off-snap). Click handler uses this to
+    // suppress clicks during/just-after motion.
+    const lastMotionAtRef = react.useRef(0);
+    // Wrapped physical slot index (0..slotCount-1) — drives per-slot context so
+    // children can read isActive/distance without the consumer having to lift
+    // state. Updates the moment a snap commits, not while dragging.
+    const [currentSlot, setCurrentSlot] = react.useState(() => mod(startSlot, slotCount));
     const initial = react.useMemo(() => ({ x: -startSlot * slideWidth }), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []);
     const goTo = react.useCallback((slot) => {
         var _a;
         onSwitch === null || onSwitch === void 0 ? void 0 : onSwitch(mod(slot, count));
+        setCurrentSlot(mod(slot, slotCount));
         (_a = snapAnimRef.current) === null || _a === void 0 ? void 0 : _a.stop();
         snapAnimRef.current = react$1.animate(currIndex, slot, transition);
-    }, [count, transition, onSwitch, currIndex]);
+    }, [count, slotCount, transition, onSwitch, currIndex]);
     react.useEffect(() => () => { var _a; return (_a = snapAnimRef.current) === null || _a === void 0 ? void 0 : _a.stop(); }, []);
+    // Document-level capture click listener — fires before R3F's listener (and
+    // any descendant DOM handlers) anywhere in the tree. While the carousel is
+    // moving (or just settled), swallow the event so it never reaches user
+    // content (R3F meshes or HTML portaled by Drei). No-op outside the cooldown
+    // window, so true taps propagate normally.
+    react.useEffect(() => {
+        const onClickCapture = (e) => {
+            if (isDragging) {
+                e.stopImmediatePropagation();
+                e.stopPropagation();
+            }
+        };
+        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.
     const handleDragStart = react.useCallback(() => {
         var _a;
+        isDragging = false;
         isDraggingRef.current = true;
-        hadDragRef.current = false;
+        lastMotionAtRef.current = performance.now();
         dragStartIndexRef.current = Math.round(currIndex.get());
         (_a = snapAnimRef.current) === null || _a === void 0 ? void 0 : _a.stop();
         snapAnimRef.current = null;
@@ -1222,7 +1270,6 @@ const Carousel = ({ items, itemWidth = 1.5, gap = 0.5, defaultValue = 0, transit
             goTo(startIndex);
             return;
         }
-        hadDragRef.current = true;
         const projectedX = releasedX + info.velocity.x * VELOCITY_PROJECTION;
         const targetSlot = Math.round(-projectedX / slideWidth);
         goTo(targetSlot);
@@ -1240,6 +1287,12 @@ const Carousel = ({ items, itemWidth = 1.5, gap = 0.5, defaultValue = 0, transit
             group.position.x = -currIndex.get() * slideWidth;
         }
         const groupX = group.position.x;
+        const snapDelta = Math.abs(groupX - Math.round(groupX / slideWidth) * slideWidth);
+        if (isDraggingRef.current || snapDelta > 0.001) {
+            lastMotionAtRef.current = performance.now();
+            isDragging = snapDelta > 0.001;
+        }
+        let nextMask = null;
         for (let i = 0; i < slotCount; i++) {
             const ref = itemRefs.current[i];
             if (!ref)
@@ -1250,10 +1303,33 @@ const Carousel = ({ items, itemWidth = 1.5, gap = 0.5, defaultValue = 0, transit
             // 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;
-            ref.visible = Math.abs(slotDist) <= renderThreshold + 0.5;
+            const shouldBeVisible = renderThreshold ? Math.abs(slotDist) <= renderThreshold + 0.5 : true;
+            ref.visible = shouldBeVisible;
+            if (visibleMaskRef.current[i] !== shouldBeVisible) {
+                if (!nextMask)
+                    nextMask = visibleMaskRef.current.slice();
+                nextMask[i] = shouldBeVisible;
+            }
+        }
+        if (nextMask) {
+            visibleMaskRef.current = nextMask;
+            setVisibleMask(nextMask);
         }
     });
-    return (jsxRuntime.jsx(motion.group, { ref: groupRef, drag: "x", dragMomentum: false, initial: initial, onDragStart: handleDragStart, onDragEnd: handleDragEnd, onDrag: (_e, info) => onDrag === null || onDrag === void 0 ? void 0 : onDrag(info), children: loopedItems.map((item, i) => (jsxRuntime.jsx(CarouselSlot, { item: item, itemWidth: itemWidth, slotRef: (el) => { itemRefs.current[i] = el; }, hadDragRef: hadDragRef }, `carouselItem-${i}`))) }));
+    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) => {
+            var _a;
+            const raw = i - currentSlot;
+            const halfWrap = (((raw + slotCount / 2) % slotCount) + slotCount) % slotCount;
+            const distance = Math.abs(halfWrap - slotCount / 2);
+            return (jsxRuntime.jsx(CarouselSlotContext.Provider, { value: {
+                    slotIndex: i,
+                    itemIndex: i % count,
+                    distance,
+                    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}`));
+        }) })));
 };
 var index = react.memo(Carousel);
 
@@ -1261,4 +1337,5 @@ exports.AnimatePresence = AnimatePresence;
 exports.Carousel = index;
 exports.MotionCamera = MotionCamera;
 exports.motion = motion;
+exports.useCarouselSlot = useCarouselSlot;
 exports.usePresence = usePresence;

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

@@ -1,6 +1,7 @@
 "use client";
+import { __rest } from 'tslib';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { memo, useMemo, useRef, useCallback, useEffect, useLayoutEffect } from 'react';
+import { memo, useMemo, useRef, useState, useCallback, useEffect, useContext, createContext, useLayoutEffect } from 'react';
 import { useFrame } from '@react-three/fiber';
 import { Box3, PlaneGeometry } from 'three';
 import { useMotionValue, animate } from 'motion/react';
@@ -21,7 +22,15 @@ const VELOCITY_PROJECTION = 0.2;
 const DRAG_THRESHOLD_RATIO = 0.25;
 const FLICK_VELOCITY = 1.0;
 const mod = (n, m) => ((n % m) + m) % m;
-const CarouselSlot = memo(({ hadDragRef, item, itemWidth, slotRef }) => {
+let isDragging = false;
+const CarouselSlotContext = createContext(null);
+const useCarouselSlot = () => {
+    const ctx = useContext(CarouselSlotContext);
+    if (!ctx)
+        throw new Error('useCarouselSlot must be used inside <Carousel>');
+    return ctx;
+};
+const CarouselSlot = memo(({ item, itemWidth, slotRef, visible }) => {
     const contentRef = useRef(null);
     const coverRef = useRef(null);
     useLayoutEffect(() => {
@@ -32,22 +41,22 @@ const CarouselSlot = memo(({ hadDragRef, item, itemWidth, slotRef }) => {
         const box = new Box3().setFromObject(content);
         if (box.isEmpty())
             return;
+        const w = Math.max(box.max.x - box.min.x, itemWidth);
         const h = box.max.y - box.min.y;
         cover.geometry.dispose();
-        cover.geometry = new PlaneGeometry(itemWidth, h);
-        cover.position.z = box.max.z + 0.001;
-    }, [item, itemWidth]);
+        cover.geometry = new PlaneGeometry(w, h);
+        cover.position.set((box.max.x + box.min.x) / 2, (box.max.y + box.min.y) / 2, box.max.z + 0.001);
+    }, [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(); }, []);
-    return (jsxs("group", { ref: slotRef, children: [jsx("group", { ref: contentRef, children: item }), jsxs("mesh", { ref: coverRef, onClick: (e) => {
-                    if (hadDragRef.current) {
-                        e.stopPropagation();
-                        hadDragRef.current = false;
-                    }
-                }, children: [jsx("planeGeometry", { args: [itemWidth, itemWidth] }), jsx("meshBasicMaterial", { transparent: true, opacity: 0, depthWrite: false })] })] }));
+    // 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 = ({ items, itemWidth = 1.5, gap = 0.5, defaultValue = 0, transition = DEFAULT_SPRING, onSwitch, onDragStart, onDrag, onDragEnd, renderThreshold = 1, dragThreshold = DRAG_THRESHOLD_RATIO, flickVelocity = FLICK_VELOCITY, }) => {
+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"]);
     const slideWidth = itemWidth + gap;
     const count = items.length;
     // Render twice the items and center on the first item of the second copy.
@@ -60,31 +69,71 @@ const Carousel = ({ items, itemWidth = 1.5, gap = 0.5, defaultValue = 0, transit
     const startSlot = count + defaultValue;
     const groupRef = useRef(null);
     const itemRefs = useRef([]);
+    // Slot mount/unmount state — mirrors `ref.visible` but propagates through
+    // React so children that rely on lifecycle (e.g. Drei's <Html>, which
+    // doesn't reliably react to mid-frame `visible` mutations) update cleanly.
+    // Only flips when a slot crosses the threshold, so re-renders are limited
+    // to ~2-4 per swipe instead of every frame.
+    const [visibleMask, setVisibleMask] = useState(() => {
+        if (renderThreshold === undefined)
+            return new Array(slotCount).fill(true);
+        const mask = new Array(slotCount).fill(false);
+        for (let i = 0; i < slotCount; i++) {
+            mask[i] = Math.abs(i - startSlot) <= renderThreshold + 0.5;
+        }
+        return mask;
+    });
+    const visibleMaskRef = useRef(visibleMask);
+    visibleMaskRef.current = visibleMask;
     // Single source of truth: a fractional slot index that grows up/down
     // infinitely as the user navigates. group.position.x = -currIndex * slideWidth
     // at rest. Snap animations animate currIndex toward integer targets;
     // useFrame applies it to the group every frame (when not dragging).
     const currIndex = useMotionValue(startSlot);
     const isDraggingRef = useRef(false);
-    const hadDragRef = useRef(false);
     const dragStartIndexRef = useRef(startSlot);
     const snapAnimRef = useRef(null);
+    // performance.now() of the most recent frame in which the carousel was
+    // moving (drag in progress or off-snap). Click handler uses this to
+    // suppress clicks during/just-after motion.
+    const lastMotionAtRef = useRef(0);
+    // Wrapped physical slot index (0..slotCount-1) — drives per-slot context so
+    // children can read isActive/distance without the consumer having to lift
+    // state. Updates the moment a snap commits, not while dragging.
+    const [currentSlot, setCurrentSlot] = useState(() => mod(startSlot, slotCount));
     const initial = useMemo(() => ({ x: -startSlot * slideWidth }), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []);
     const goTo = useCallback((slot) => {
         var _a;
         onSwitch === null || onSwitch === void 0 ? void 0 : onSwitch(mod(slot, count));
+        setCurrentSlot(mod(slot, slotCount));
         (_a = snapAnimRef.current) === null || _a === void 0 ? void 0 : _a.stop();
         snapAnimRef.current = animate(currIndex, slot, transition);
-    }, [count, transition, onSwitch, currIndex]);
+    }, [count, slotCount, transition, onSwitch, currIndex]);
     useEffect(() => () => { var _a; return (_a = snapAnimRef.current) === null || _a === void 0 ? void 0 : _a.stop(); }, []);
+    // Document-level capture click listener — fires before R3F's listener (and
+    // any descendant DOM handlers) anywhere in the tree. While the carousel is
+    // moving (or just settled), swallow the event so it never reaches user
+    // content (R3F meshes or HTML portaled by Drei). No-op outside the cooldown
+    // window, so true taps propagate normally.
+    useEffect(() => {
+        const onClickCapture = (e) => {
+            if (isDragging) {
+                e.stopImmediatePropagation();
+                e.stopPropagation();
+            }
+        };
+        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.
     const handleDragStart = useCallback(() => {
         var _a;
+        isDragging = false;
         isDraggingRef.current = true;
-        hadDragRef.current = false;
+        lastMotionAtRef.current = performance.now();
         dragStartIndexRef.current = Math.round(currIndex.get());
         (_a = snapAnimRef.current) === null || _a === void 0 ? void 0 : _a.stop();
         snapAnimRef.current = null;
@@ -109,7 +158,6 @@ const Carousel = ({ items, itemWidth = 1.5, gap = 0.5, defaultValue = 0, transit
             goTo(startIndex);
             return;
         }
-        hadDragRef.current = true;
         const projectedX = releasedX + info.velocity.x * VELOCITY_PROJECTION;
         const targetSlot = Math.round(-projectedX / slideWidth);
         goTo(targetSlot);
@@ -127,6 +175,12 @@ const Carousel = ({ items, itemWidth = 1.5, gap = 0.5, defaultValue = 0, transit
             group.position.x = -currIndex.get() * slideWidth;
         }
         const groupX = group.position.x;
+        const snapDelta = Math.abs(groupX - Math.round(groupX / slideWidth) * slideWidth);
+        if (isDraggingRef.current || snapDelta > 0.001) {
+            lastMotionAtRef.current = performance.now();
+            isDragging = snapDelta > 0.001;
+        }
+        let nextMask = null;
         for (let i = 0; i < slotCount; i++) {
             const ref = itemRefs.current[i];
             if (!ref)
@@ -137,11 +191,34 @@ const Carousel = ({ items, itemWidth = 1.5, gap = 0.5, defaultValue = 0, transit
             // 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;
-            ref.visible = Math.abs(slotDist) <= renderThreshold + 0.5;
+            const shouldBeVisible = renderThreshold ? Math.abs(slotDist) <= renderThreshold + 0.5 : true;
+            ref.visible = shouldBeVisible;
+            if (visibleMaskRef.current[i] !== shouldBeVisible) {
+                if (!nextMask)
+                    nextMask = visibleMaskRef.current.slice();
+                nextMask[i] = shouldBeVisible;
+            }
+        }
+        if (nextMask) {
+            visibleMaskRef.current = nextMask;
+            setVisibleMask(nextMask);
         }
     });
-    return (jsx(motion.group, { ref: groupRef, drag: "x", dragMomentum: false, initial: initial, onDragStart: handleDragStart, onDragEnd: handleDragEnd, onDrag: (_e, info) => onDrag === null || onDrag === void 0 ? void 0 : onDrag(info), children: loopedItems.map((item, i) => (jsx(CarouselSlot, { item: item, itemWidth: itemWidth, slotRef: (el) => { itemRefs.current[i] = el; }, hadDragRef: hadDragRef }, `carouselItem-${i}`))) }));
+    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) => {
+            var _a;
+            const raw = i - currentSlot;
+            const halfWrap = (((raw + slotCount / 2) % slotCount) + slotCount) % slotCount;
+            const distance = Math.abs(halfWrap - slotCount / 2);
+            return (jsx(CarouselSlotContext.Provider, { value: {
+                    slotIndex: i,
+                    itemIndex: i % count,
+                    distance,
+                    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}`));
+        }) })));
 };
 var index = memo(Carousel);
 
-export { index as default };
+export { index as default, useCarouselSlot };

package/dist/es/index.mjs

@@ -3,4 +3,4 @@ export { motion } from './render/motion.mjs';
 export { default as MotionCamera } from './components/MotionCamera.mjs';
 export { AnimatePresence } from './components/AnimatePresence/index.mjs';
 export { usePresence } from './components/AnimatePresence/PresenceContext.mjs';
-export { default as Carousel } from './components/Carousel/index.mjs';
+export { default as Carousel, useCarouselSlot } from './components/Carousel/index.mjs';

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import { Vector3, Euler, Color, ReactThreeFiber } from '@react-three/fiber';
 import * as THREE from 'three';
 import * as react from 'react';
 import { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes, ReactNode } from 'react';
-import { MotionValue, MotionProps, Transition, ResolvedValues } from 'motion/react';
+import { MotionValue, MotionProps, Transition, ResolvedValues, useMotionValue } from 'motion/react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 type ThreeElement = InstanceType<typeof THREE.Object3D> & Record<string, unknown>;
@@ -141,8 +141,17 @@ interface CarouselProps {
     dragThreshold?: number;
     flickVelocity?: number;
 }
-declare const Carousel: ({ items, itemWidth, gap, defaultValue, transition, onSwitch, onDragStart, onDrag, onDragEnd, renderThreshold, dragThreshold, flickVelocity, }: CarouselProps) => react_jsx_runtime.JSX.Element;
+interface CarouselSlotInfo {
+    slotIndex: number;
+    itemIndex: number;
+    currIndex: ReturnType<typeof useMotionValue>;
+    distance: number;
+    isActive: boolean;
+    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 _default: typeof Carousel;
 
-export { AnimatePresence, _default as Carousel, MotionCamera, motion, usePresence };
-export type { AcceptMotionValues, CarouselProps, DragConstraints, DragInfo, ForwardRefComponent, ThreeElement, ThreeMotionComponents, ThreeMotionProps, ThreeRenderState };
+export { AnimatePresence, _default as Carousel, MotionCamera, motion, useCarouselSlot, usePresence };
+export type { AcceptMotionValues, CarouselProps, CarouselSlotInfo, DragConstraints, DragInfo, ForwardRefComponent, ThreeElement, ThreeMotionComponents, ThreeMotionProps, ThreeRenderState };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "r3f-motion",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "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",