@ycparak/spring-carousel 0.0.0-stage → 0.1.0

package/dist/index.cjs

@@ -0,0 +1,1342 @@
+'use client';
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+const CarouselContext = react.createContext(null);
+const CarouselStateContext = react.createContext(null);
+const SlideContext = react.createContext(null);
+function useCarouselContext(caller) {
+    const context = react.use(CarouselContext);
+    const state = react.use(CarouselStateContext);
+    if (!context || !state) {
+        throw new Error(`spring-carousel: \`${caller}\` must be rendered inside \`<Carousel.Root>\`.`);
+    }
+    return {
+        context,
+        state
+    };
+}
+function slideId(baseId, index) {
+    return `${baseId}-slide-${index}`;
+}
+function tabId(baseId, index) {
+    return `${baseId}-tab-${index}`;
+}
+function trackId(baseId) {
+    return `${baseId}-track`;
+}
+
+/**
+ * Reads the carousel's state and controls from any component inside
+ * `<Carousel.Root>`. Re-renders when the index, count or drag state changes, never
+ * per frame; use `useCarouselProgress` for per-frame work.
+ */ function useCarousel() {
+    const { context, state } = useCarouselContext('useCarousel');
+    const { engine, goTo, next, prev } = context;
+    const { index, count, isDragging } = state;
+    return react.useMemo(()=>({
+            index,
+            count,
+            isDragging,
+            canPrev: index > 0,
+            canNext: index < count - 1,
+            goTo,
+            next,
+            prev,
+            progress: engine.progress
+        }), [
+        index,
+        count,
+        isDragging,
+        goTo,
+        next,
+        prev,
+        engine
+    ]);
+}
+/**
+ * Calls `listener` with the carousel's position on every frame it moves, and once
+ * on mount. Use it to drive styles imperatively (captions, parallax, progress bars)
+ * without re-rendering. The listener always sees the latest props and state.
+ */ function useCarouselProgress(listener) {
+    const { context } = useCarouselContext('useCarouselProgress');
+    const { progress } = context.engine;
+    const onProgress = react.useEffectEvent(listener);
+    react.useLayoutEffect(()=>progress.subscribe((value)=>onProgress(value)), [
+        progress
+    ]);
+}
+/** Reads the enclosing `<Carousel.Slide>`'s index and whether it is the current slide. */ function useSlide() {
+    const slide = react.use(SlideContext);
+    if (!slide) {
+        throw new Error('spring-carousel: `useSlide` must be called inside `<Carousel.Slide>`.');
+    }
+    return slide;
+}
+
+function clamp(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+}
+/** How present an item is at a given progress: 1 when it is the current slide, 0 a slide or more away. */ function presence(progress, index) {
+    return clamp(1 - Math.abs(index - progress), 0, 1);
+}
+/**
+ * Reads a position at a fractional index from a list of positions, extrapolating
+ * past either end with the nearest spacing so rubber-banding keeps moving.
+ */ function interpolate(points, value) {
+    const count = points.length;
+    const first = points[0];
+    if (first === undefined) return 0;
+    if (count === 1) return first;
+    const last = points[count - 1];
+    if (value <= 0) return first + value * (points[1] - first);
+    if (value >= count - 1) return last + (value - (count - 1)) * (last - points[count - 2]);
+    const startIndex = Math.floor(value);
+    const start = points[startIndex];
+    const end = points[startIndex + 1];
+    return start + (end - start) * (value - startIndex);
+}
+/** Distance between neighbouring positions around `value`, used to turn pixels into slides. */ function spacingAt(points, value, fallback) {
+    if (points.length < 2) return fallback;
+    const startIndex = clamp(Math.floor(value), 0, points.length - 2);
+    const spacing = Math.abs(points[startIndex + 1] - points[startIndex]);
+    return spacing > 0 ? spacing : fallback;
+}
+/**
+ * Picks the slide a gesture should settle on.
+ *
+ * - A flick advances to the next whole slide in the direction of travel.
+ * - A trackpad swipe advances one slide in the direction it moved.
+ * - A slow drag advances once it has covered `distanceThreshold` of a slide.
+ */ function resolveReleaseTarget({ position, anchor, velocity, count, kind, flickVelocity, distanceThreshold = 0.3 }) {
+    if (count <= 0) return 0;
+    const lastIndex = count - 1;
+    const travelled = position - anchor;
+    let target = anchor;
+    if (Math.abs(velocity) >= flickVelocity) {
+        target = velocity > 0 ? Math.floor(position) + 1 : Math.ceil(position) - 1;
+    } else if (kind === 'wheel') {
+        if (travelled !== 0) target = anchor + Math.sign(travelled);
+    } else if (travelled > 0) {
+        target = Math.floor(position + 1 - distanceThreshold);
+    } else if (travelled < 0) {
+        target = Math.ceil(position - 1 + distanceThreshold);
+    }
+    return clamp(target, 0, lastIndex);
+}
+function snapToDevicePixels(value, pixelRatio) {
+    const ratio = pixelRatio || 1;
+    return Math.round(value * ratio) / ratio;
+}
+
+class ProgressValue {
+    #value;
+    #velocity;
+    #listeners;
+    constructor(initial){
+        this.#velocity = 0;
+        this.#listeners = new Set();
+        this.get = ()=>this.#value;
+        this.getVelocity = ()=>this.#velocity;
+        this.subscribe = (listener)=>{
+            this.#listeners.add(listener);
+            listener(this.#value);
+            return ()=>{
+                this.#listeners.delete(listener);
+            };
+        };
+        this.#value = initial;
+    }
+    set(value, velocity) {
+        this.#velocity = velocity;
+        if (value === this.#value) return;
+        this.#value = value;
+        for (const listener of this.#listeners)listener(value);
+    }
+}
+const HISTORY = 300;
+const RECENT_WINDOW = 32;
+const IDLE_AFTER = 50;
+const STILL_DISTANCE = 2;
+/** Estimates pointer or wheel velocity from the last 300ms of samples. */ class VelocityTracker {
+    #samples;
+    reset() {
+        this.#samples = [];
+    }
+    add(time, position) {
+        this.#samples.push({
+            time,
+            position
+        });
+        while(this.#samples.length > 2 && time - (this.#samples[0]?.time ?? time) > HISTORY){
+            this.#samples.shift();
+        }
+    }
+    /**
+	 * Units per second over the final two frames or so of movement before any pause,
+	 * however long ago that was: which way, and how hard, the input was heading when it
+	 * let go. The pixel or two a held pointer drifts, or a click nudges, is not movement.
+	 */ intentVelocity() {
+        const lastIndex = this.#samples.length - 1;
+        const last = this.#samples[lastIndex];
+        if (!last) return 0;
+        let end = lastIndex;
+        while(end > 0 && Math.abs(this.#samples[end - 1].position - last.position) < STILL_DISTANCE){
+            end -= 1;
+        }
+        return this.#velocityEndingAt(end);
+    }
+    /** Units per second at `now`: 0 once the input has been still for 50ms. */ velocity(now) {
+        const lastIndex = this.#samples.length - 1;
+        const last = this.#samples[lastIndex];
+        if (!last || now - last.time > IDLE_AFTER) return 0;
+        return this.#velocityEndingAt(lastIndex);
+    }
+    #velocityEndingAt(endIndex) {
+        const end = this.#samples[endIndex];
+        if (!end) return 0;
+        let start = end;
+        for(let index = endIndex - 1; index >= 0; index -= 1){
+            start = this.#samples[index];
+            if (end.time - start.time >= RECENT_WINDOW) break;
+        }
+        const elapsed = end.time - start.time;
+        return elapsed > 0 ? (end.position - start.position) / elapsed * 1000 : 0;
+    }
+    constructor(){
+        this.#samples = [];
+    }
+}
+
+/**
+ * Physical spring parameters. Defaults reproduce the original Kami carousel.
+ */ const DEFAULT_SPRING = {
+    stiffness: 90,
+    damping: 18.1,
+    mass: 0.9
+};
+/** Positions are in slides, so this is a tenth of a pixel on a 1000px slide. */ const REST_DELTA = 0.0001;
+const REST_SPEED = 0.001;
+const STEP_SECONDS = 0.001;
+const MAX_FRAME_SECONDS = 1;
+function resolveSpring(options) {
+    if (!options) return DEFAULT_SPRING;
+    if (options.duration !== undefined) {
+        const duration = Math.max(options.duration, 0.01);
+        const bounce = Math.min(Math.max(options.bounce ?? 0, -1), 1);
+        const mass = 1;
+        const stiffness = (2 * Math.PI / duration) ** 2 * mass;
+        const damping = bounce >= 0 ? (1 - bounce) * 4 * Math.PI * mass / duration : 4 * Math.PI * mass / (duration * (1 + bounce + Number.EPSILON));
+        return {
+            stiffness,
+            damping,
+            mass
+        };
+    }
+    return {
+        stiffness: positive(options.stiffness, DEFAULT_SPRING.stiffness),
+        damping: Math.max(options.damping ?? DEFAULT_SPRING.damping, 0),
+        mass: positive(options.mass, DEFAULT_SPRING.mass)
+    };
+}
+function positive(value, fallback) {
+    return value !== undefined && value > 0 ? value : fallback;
+}
+/**
+ * Advances a spring towards `target` by `elapsed` seconds with fixed 1ms
+ * semi-implicit Euler steps, which stay stable for any stiffness a person would
+ * reasonably choose. Integrating the real elapsed time keeps the motion on time
+ * when frames are throttled; gaps over a second (a backgrounded tab) are capped.
+ *
+ * Returns true once the spring has settled; the state is then exactly `target`.
+ */ function stepSpring(state, target, spring, elapsed) {
+    const steps = Math.ceil(Math.min(Math.max(elapsed, 0), MAX_FRAME_SECONDS) / STEP_SECONDS);
+    for(let step = 0; step < steps; step += 1){
+        const displacement = state.position - target;
+        const acceleration = (-spring.stiffness * displacement - spring.damping * state.velocity) / spring.mass;
+        state.velocity += acceleration * STEP_SECONDS;
+        state.position += state.velocity * STEP_SECONDS;
+    }
+    const settled = Math.abs(state.position - target) < REST_DELTA && Math.abs(state.velocity) < REST_SPEED;
+    if (settled) {
+        state.position = target;
+        state.velocity = 0;
+    }
+    return settled;
+}
+
+const DRAG_SLOP = 4;
+const EDGE_RESISTANCE = 0.5;
+const FLICK_PIXELS_PER_SECOND = 250;
+const MAX_RELEASE_VELOCITY = 12;
+const KEYBOARD_EDGE_DISTANCE = 0.03;
+const WHEEL_SLIP = 0.1;
+const WHEEL_GESTURE_DURATION = 150;
+const WHEEL_RESTART_DELAY = 1000;
+const WHEEL_INTENT_THRESHOLD = 8;
+const WHEEL_HORIZONTAL_DOMINANCE = 1.4;
+const WHEEL_INTENT_RESET_DELAY = 120;
+const WHEEL_LINE_HEIGHT = 16;
+const EDITABLE_SELECTOR = 'input, textarea, select';
+const NO_DRAG_SELECTOR = `${EDITABLE_SELECTOR}, [data-carousel-no-drag]`;
+const ARROW_KEY_WIDGET_SELECTOR = '[role="slider"], [role="tablist"], [role="radiogroup"], [role="menu"], [role="menubar"], [role="listbox"], [role="grid"], [role="tree"], [role="spinbutton"]';
+const OFFSET_PROPERTY = '--carousel-offset';
+const PRESENCE_PROPERTY = '--carousel-presence';
+const PROGRESS_PROPERTY = '--carousel-progress';
+const SERVER_SNAPSHOT = Object.freeze({
+    count: 0,
+    tabCount: 0,
+    isDragging: false
+});
+function matches(target, selector) {
+    return target instanceof HTMLElement && (target.isContentEditable || target.closest(selector) !== null);
+}
+function format(value) {
+    return value.toFixed(4);
+}
+/**
+ * Owns everything that happens per frame: measuring, gestures, keyboard input and
+ * the spring. React tells it which elements exist and which index to rest on; it
+ * tells React when a gesture asks for a new index. It never re-renders React during
+ * an animation.
+ */ class CarouselEngine {
+    #options;
+    #onIndexRequest;
+    #snapshot;
+    #snapshotListeners;
+    #root;
+    #viewport;
+    #track;
+    #tabList;
+    #slides;
+    #tabs;
+    #slideCenters;
+    #tabCenters;
+    #trackCenter;
+    #trackWidth;
+    #target;
+    #springTarget;
+    #springState;
+    #frame;
+    #lastFrameTime;
+    #measureFrame;
+    #started;
+    #unbind;
+    #resizeObserver;
+    #motionQuery;
+    #reduceMotion;
+    #pointer;
+    #releasePointerListeners;
+    #suppressClick;
+    #tracker;
+    #wheelCanStart;
+    #wheelTracking;
+    #wheelAxis;
+    #wheelAnchor;
+    #wheelTravel;
+    #wheelAccumulatedX;
+    #wheelAccumulatedY;
+    #wheelEndTimer;
+    #wheelRestartTimer;
+    #wheelIntentTimer;
+    #keyboardRubberbanding;
+    constructor(initialIndex){
+        this.#options = {
+            spring: DEFAULT_SPRING,
+            keyboard: 'focus',
+            wheel: true,
+            draggable: true,
+            reducedMotion: 'user'
+        };
+        this.#onIndexRequest = null;
+        this.#snapshot = SERVER_SNAPSHOT;
+        this.#snapshotListeners = new Set();
+        this.#root = null;
+        this.#viewport = null;
+        this.#track = null;
+        this.#tabList = null;
+        this.#slides = new Map();
+        this.#tabs = new Map();
+        this.#slideCenters = [];
+        this.#tabCenters = [];
+        this.#trackCenter = 0;
+        this.#trackWidth = 0;
+        this.#springState = {
+            position: 0,
+            velocity: 0
+        };
+        this.#frame = 0;
+        this.#lastFrameTime = 0;
+        this.#measureFrame = 0;
+        this.#started = false;
+        this.#unbind = null;
+        this.#resizeObserver = null;
+        this.#motionQuery = null;
+        this.#reduceMotion = false;
+        this.#pointer = null;
+        this.#releasePointerListeners = null;
+        this.#suppressClick = false;
+        this.#tracker = new VelocityTracker();
+        this.#wheelCanStart = true;
+        this.#wheelTracking = false;
+        this.#wheelAxis = null;
+        this.#wheelAnchor = 0;
+        this.#wheelTravel = 0;
+        this.#wheelAccumulatedX = 0;
+        this.#wheelAccumulatedY = 0;
+        this.#wheelEndTimer = 0;
+        this.#wheelRestartTimer = 0;
+        this.#wheelIntentTimer = 0;
+        this.#keyboardRubberbanding = false;
+        // External store, read by React through useSyncExternalStore.
+        this.getSnapshot = ()=>this.#snapshot;
+        this.subscribe = (listener)=>{
+            this.#snapshotListeners.add(listener);
+            return ()=>{
+                this.#snapshotListeners.delete(listener);
+            };
+        };
+        // Element registration. Each returns a cleanup for React 19 callback refs.
+        this.registerRoot = (element)=>this.#registerElement('root', element);
+        this.registerViewport = (element)=>this.#registerElement('viewport', element);
+        this.registerTrack = (element)=>this.#registerElement('track', element);
+        this.registerTabList = (element)=>this.#registerElement('tabList', element);
+        this.#updateReducedMotion = ()=>{
+            const mode = this.#options.reducedMotion;
+            this.#reduceMotion = mode === 'always' || mode === 'user' && !!this.#motionQuery?.matches;
+        };
+        this.#tick = (time)=>{
+            const elapsed = (time - this.#lastFrameTime) / 1000;
+            this.#lastFrameTime = time;
+            const settled = stepSpring(this.#springState, this.#springTarget, this.#options.spring, elapsed);
+            this.#setPosition(this.#springState.position, this.#springState.velocity);
+            this.#frame = settled ? 0 : requestAnimationFrame(this.#tick);
+        };
+        // Pointer dragging.
+        this.#onPointerDown = (event)=>{
+            if (!this.#options.draggable || !event.isPrimary || event.button !== 0) return;
+            if (this.#trackWidth === 0 || matches(event.target, NO_DRAG_SELECTOR)) return;
+            // A new primary press means the last gesture's pointerup never arrived.
+            if (this.#pointer) this.#endPointer(null);
+            this.#suppressClick = false;
+            this.#cancelAnimation();
+            this.#tracker.reset();
+            this.#tracker.add(event.timeStamp, event.clientX);
+            this.#pointer = {
+                id: event.pointerId,
+                startX: event.clientX,
+                startY: event.clientY,
+                lastX: event.clientX,
+                anchor: this.#target,
+                dragging: false
+            };
+            // Listened for on the window, because the pointer is only captured once a drag
+            // begins: capturing on press would retarget clicks on links inside slides. Losing
+            // capture is not an end: Chromium can fire lostpointercapture before pointerup
+            // when a trackpad click lifts, which would discard the flick.
+            window.addEventListener('pointermove', this.#onPointerMove);
+            window.addEventListener('pointerup', this.#onPointerUp);
+            window.addEventListener('pointercancel', this.#onPointerCancel);
+            this.#releasePointerListeners = ()=>{
+                window.removeEventListener('pointermove', this.#onPointerMove);
+                window.removeEventListener('pointerup', this.#onPointerUp);
+                window.removeEventListener('pointercancel', this.#onPointerCancel);
+            };
+        };
+        this.#onPointerMove = (event)=>{
+            const pointer = this.#pointer;
+            if (!pointer || event.pointerId !== pointer.id) return;
+            if (event.buttons === 0) {
+                this.#endPointer(event);
+                return;
+            }
+            if (!pointer.dragging) {
+                const distanceX = Math.abs(event.clientX - pointer.startX);
+                const distanceY = Math.abs(event.clientY - pointer.startY);
+                if (distanceX < DRAG_SLOP && distanceY < DRAG_SLOP) return;
+                if (distanceY > distanceX) {
+                    this.#endPointer(null);
+                    return;
+                }
+                pointer.dragging = true;
+                this.#suppressClick = true;
+                this.#viewport?.setPointerCapture(pointer.id);
+                this.#updateSnapshot({
+                    isDragging: true
+                });
+            }
+            const delta = event.clientX - pointer.lastX;
+            pointer.lastX = event.clientX;
+            this.#tracker.add(event.timeStamp, event.clientX);
+            this.#scrollBy(-delta, -this.#tracker.velocity(event.timeStamp));
+        };
+        this.#onPointerUp = (event)=>{
+            if (this.#pointer?.id === event.pointerId) this.#endPointer(event);
+        };
+        this.#onPointerCancel = (event)=>{
+            if (this.#pointer?.id === event.pointerId) this.#endPointer(null);
+        };
+        this.#onClickCapture = (event)=>{
+            if (!this.#suppressClick) return;
+            this.#suppressClick = false;
+            event.preventDefault();
+            event.stopPropagation();
+        };
+        this.#onDragStart = (event)=>{
+            if (this.#options.draggable) event.preventDefault();
+        };
+        // Trackpad and horizontal wheel swipes, which page one slide per gesture.
+        this.#onWheel = (event)=>{
+            if (!this.#options.wheel || this.#trackWidth === 0) return;
+            const { x, y } = this.#wheelDelta(event);
+            if (x === 0 && y === 0) return;
+            if (this.#wheelAxis === 'horizontal') {
+                event.preventDefault();
+                if (this.#wheelTracking && x !== 0) this.#trackWheel(event.timeStamp, x);
+                return;
+            }
+            if (!this.#wheelCanStart) return;
+            if (this.#wheelAxis === 'vertical') {
+                this.#scheduleWheelIntentReset();
+                return;
+            }
+            this.#wheelAxis = 'pending';
+            this.#wheelAccumulatedX += Math.abs(x);
+            this.#wheelAccumulatedY += Math.abs(y);
+            this.#scheduleWheelIntentReset();
+            if (Math.max(this.#wheelAccumulatedX, this.#wheelAccumulatedY) < WHEEL_INTENT_THRESHOLD) return;
+            if (this.#wheelAccumulatedY >= this.#wheelAccumulatedX) {
+                this.#wheelAxis = 'vertical';
+                return;
+            }
+            if (this.#wheelAccumulatedX < this.#wheelAccumulatedY * WHEEL_HORIZONTAL_DOMINANCE) return;
+            event.preventDefault();
+            this.#startWheelGesture();
+            this.#trackWheel(event.timeStamp, x);
+        };
+        this.#resetWheelIntent = ()=>{
+            window.clearTimeout(this.#wheelIntentTimer);
+            this.#wheelAxis = null;
+            this.#wheelAccumulatedX = 0;
+            this.#wheelAccumulatedY = 0;
+        };
+        // Keyboard.
+        this.#onKeyDown = (event)=>{
+            if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey) return;
+            const target = event.target;
+            if (matches(target, EDITABLE_SELECTOR) || this.#belongsToOtherWidget(target)) return;
+            const fromTab = target instanceof Element && this.#isOwnTab(target);
+            const lastIndex = this.count - 1;
+            if (lastIndex < 0) return;
+            if (fromTab && (event.key === 'Home' || event.key === 'End')) {
+                event.preventDefault();
+                this.navigate(event.key === 'Home' ? 0 : lastIndex);
+                this.#focusTab(this.#target);
+                return;
+            }
+            if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') return;
+            event.preventDefault();
+            const direction = event.key === 'ArrowRight' ? 1 : -1;
+            const atBoundary = direction < 0 ? this.#target <= 0 : this.#target >= lastIndex;
+            if (!atBoundary) {
+                this.#keyboardRubberbanding = false;
+                this.navigate(this.#target + direction);
+                if (fromTab) this.#focusTab(this.#target);
+                return;
+            }
+            if (!event.repeat && !this.#reduceMotion && !this.#isTrackingInput()) {
+                this.#keyboardRubberbanding = true;
+                this.#animate(this.#target + direction * KEYBOARD_EDGE_DISTANCE, this.progress.getVelocity());
+            }
+        };
+        this.#onKeyUp = (event)=>{
+            if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') return;
+            if (!this.#keyboardRubberbanding) return;
+            this.#keyboardRubberbanding = false;
+            this.#animate(this.#target, this.progress.getVelocity());
+        };
+        this.#target = initialIndex;
+        this.#springTarget = initialIndex;
+        this.progress = new ProgressValue(initialIndex);
+    }
+    #updateSnapshot(patch) {
+        const next = {
+            ...this.#snapshot,
+            ...patch
+        };
+        if (next.count === this.#snapshot.count && next.tabCount === this.#snapshot.tabCount && next.isDragging === this.#snapshot.isDragging) {
+            return;
+        }
+        this.#snapshot = next;
+        for (const listener of this.#snapshotListeners)listener();
+    }
+    get count() {
+        return this.#slides.size;
+    }
+    get target() {
+        return this.#target;
+    }
+    // Configuration.
+    setOptions(options) {
+        const previous = this.#options;
+        this.#options = options;
+        if (!this.#started) return;
+        if (previous.reducedMotion !== options.reducedMotion) this.#updateReducedMotion();
+        if (previous.keyboard !== options.keyboard) this.#rebind();
+        if (!options.draggable && this.#pointer) this.#endPointer(null);
+    }
+    onIndexRequest(listener) {
+        this.#onIndexRequest = listener;
+        return ()=>{
+            if (this.#onIndexRequest === listener) this.#onIndexRequest = null;
+        };
+    }
+    registerSlide(index, element) {
+        return this.#registerItem(this.#slides, index, element);
+    }
+    registerTab(index, element) {
+        return this.#registerItem(this.#tabs, index, element);
+    }
+    #registerElement(slot, element) {
+        this.#setElement(slot, element);
+        this.#elementsChanged(element);
+        return ()=>{
+            if (this.#getElement(slot) !== element) return;
+            this.#setElement(slot, null);
+            this.#elementsChanged(null);
+        };
+    }
+    #registerItem(items, index, element) {
+        items.set(index, element);
+        this.#itemsChanged(element);
+        return ()=>{
+            if (items.get(index) !== element) return;
+            items.delete(index);
+            this.#itemsChanged(null);
+        };
+    }
+    #getElement(slot) {
+        if (slot === 'root') return this.#root;
+        if (slot === 'viewport') return this.#viewport;
+        if (slot === 'track') return this.#track;
+        return this.#tabList;
+    }
+    #setElement(slot, element) {
+        if (slot === 'root') this.#root = element;
+        else if (slot === 'viewport') this.#viewport = element;
+        else if (slot === 'track') this.#track = element;
+        else this.#tabList = element;
+    }
+    #elementsChanged(added) {
+        if (!this.#started) return;
+        if (added) this.#resizeObserver?.observe(added);
+        this.#rebind();
+        this.#scheduleMeasure();
+    }
+    #itemsChanged(added) {
+        this.#updateSnapshot({
+            count: this.#slides.size,
+            tabCount: this.#tabs.size
+        });
+        if (!this.#started) return;
+        if (added) this.#resizeObserver?.observe(added);
+        this.#scheduleMeasure();
+    }
+    // Lifecycle.
+    start() {
+        if (this.#started) return ()=>this.stop();
+        this.#started = true;
+        this.#motionQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+        this.#motionQuery.addEventListener('change', this.#updateReducedMotion);
+        this.#updateReducedMotion();
+        this.#resizeObserver = new ResizeObserver(()=>this.#measure());
+        for (const element of this.#observedElements())this.#resizeObserver.observe(element);
+        this.#rebind();
+        this.#measure();
+        this.#jump(this.#target);
+        return ()=>this.stop();
+    }
+    stop() {
+        if (!this.#started) return;
+        this.#started = false;
+        this.#cancelAnimation();
+        cancelAnimationFrame(this.#measureFrame);
+        this.#unbind?.();
+        this.#unbind = null;
+        this.#resizeObserver?.disconnect();
+        this.#resizeObserver = null;
+        this.#motionQuery?.removeEventListener('change', this.#updateReducedMotion);
+        this.#motionQuery = null;
+        this.#resetWheel();
+        window.clearTimeout(this.#wheelRestartTimer);
+        this.#wheelCanStart = true;
+        this.#releasePointerListeners?.();
+        this.#releasePointerListeners = null;
+        this.#pointer = null;
+        this.#updateSnapshot({
+            isDragging: false
+        });
+    }
+    *#observedElements() {
+        for (const element of [
+            this.#viewport,
+            this.#track,
+            this.#tabList
+        ]){
+            if (element) yield element;
+        }
+        yield* this.#slides.values();
+        yield* this.#tabs.values();
+    }
+    #updateReducedMotion;
+    #rebind() {
+        this.#unbind?.();
+        this.#unbind = null;
+        if (!this.#started) return;
+        const cleanups = [];
+        const listen = (target, type, listener, options)=>{
+            target.addEventListener(type, listener, options);
+            cleanups.push(()=>target.removeEventListener(type, listener, options));
+        };
+        const viewport = this.#viewport;
+        if (viewport) {
+            listen(viewport, 'pointerdown', this.#onPointerDown);
+            listen(viewport, 'click', this.#onClickCapture, {
+                capture: true
+            });
+            listen(viewport, 'dragstart', this.#onDragStart);
+            listen(viewport, 'wheel', this.#onWheel, {
+                passive: false
+            });
+        }
+        const keyboard = this.#options.keyboard;
+        const keyTarget = keyboard === 'global' ? document : keyboard === 'focus' ? this.#root : null;
+        if (keyTarget) {
+            listen(keyTarget, 'keydown', this.#onKeyDown);
+            listen(keyTarget, 'keyup', this.#onKeyUp);
+        }
+        this.#unbind = ()=>{
+            for (const cleanup of cleanups)cleanup();
+        };
+    }
+    // Measuring and rendering.
+    #scheduleMeasure() {
+        cancelAnimationFrame(this.#measureFrame);
+        this.#measureFrame = requestAnimationFrame(()=>this.#measure());
+    }
+    #measure() {
+        const track = this.#track;
+        if (!track) return;
+        const width = track.clientWidth;
+        if (width === 0) return;
+        this.#trackWidth = width;
+        this.#trackCenter = width / 2;
+        this.#slideCenters = this.#centers(this.#slides, width);
+        const tabList = this.#tabList;
+        if (tabList && this.#tabs.size > 0) {
+            const pixelRatio = window.devicePixelRatio;
+            this.#tabCenters = this.#centers(this.#tabs, 0).map((center)=>snapToDevicePixels(center, pixelRatio));
+            tabList.setAttribute('data-measured', '');
+        }
+        const lastIndex = Math.max(this.count - 1, 0);
+        if (this.#target > lastIndex) {
+            this.navigate(lastIndex, {
+                animate: false
+            });
+            return;
+        }
+        this.#render(this.progress.get());
+    }
+    #centers(items, fallbackSpacing) {
+        const centers = [];
+        for(let index = 0; index < items.size; index += 1){
+            const element = items.get(index);
+            const previous = centers[index - 1];
+            centers.push(element ? element.offsetLeft + element.offsetWidth / 2 : previous === undefined ? fallbackSpacing / 2 : previous + fallbackSpacing);
+        }
+        return centers;
+    }
+    #render(position) {
+        if (this.#trackWidth === 0) return;
+        const track = this.#track;
+        if (track) {
+            const x = this.#trackCenter - interpolate(this.#slideCenters, position);
+            track.style.transform = `translate3d(${x}px, 0, 0)`;
+        }
+        const tabList = this.#tabList;
+        if (tabList && this.#tabCenters.length > 0) {
+            const x = -interpolate(this.#tabCenters, position);
+            tabList.style.transform = `translate3d(${x}px, 0, 0)`;
+        }
+        this.#root?.style.setProperty(PROGRESS_PROPERTY, format(position));
+        this.#writeItemProperties(this.#slides, position);
+        this.#writeItemProperties(this.#tabs, position);
+    }
+    #writeItemProperties(items, position) {
+        for (const [index, element] of items){
+            element.style.setProperty(OFFSET_PROPERTY, format(index - position));
+            element.style.setProperty(PRESENCE_PROPERTY, format(presence(position, index)));
+        }
+    }
+    #setPosition(position, velocity) {
+        this.progress.set(position, velocity);
+        this.#render(position);
+    }
+    // Animation.
+    #isTrackingInput() {
+        return this.#pointer !== null || this.#wheelTracking;
+    }
+    #cancelAnimation() {
+        cancelAnimationFrame(this.#frame);
+        this.#frame = 0;
+    }
+    #jump(position) {
+        this.#cancelAnimation();
+        this.#springTarget = position;
+        this.#setPosition(position, 0);
+    }
+    #animate(target, velocity) {
+        this.#springTarget = target;
+        if (this.#reduceMotion || !this.#started) {
+            this.#jump(target);
+            return;
+        }
+        this.#springState.position = this.progress.get();
+        this.#springState.velocity = velocity;
+        if (this.#frame !== 0) return;
+        this.#lastFrameTime = performance.now();
+        this.#frame = requestAnimationFrame(this.#tick);
+    }
+    #tick;
+    // Navigation.
+    /** Moves to `index` and asks React to make it the current index. */ navigate(index, options = {}) {
+        const target = clamp(Math.round(index), 0, Math.max(this.count - 1, 0));
+        this.#target = target;
+        if (options.animate === false) this.#jump(target);
+        else this.#animate(target, options.velocity ?? this.progress.getVelocity());
+        this.#onIndexRequest?.(target);
+    }
+    next(options) {
+        this.navigate(this.#target + 1, options);
+    }
+    prev(options) {
+        this.navigate(this.#target - 1, options);
+    }
+    /**
+	 * Called by React after every index change or rejected request: brings the
+	 * carousel to rest on the index React holds. A no-op when it is already heading
+	 * there, and deferred while a finger or trackpad is moving it.
+	 */ settle(index) {
+        if (this.#isTrackingInput()) return;
+        const target = this.count > 0 ? clamp(index, 0, this.count - 1) : index;
+        if (target === this.#target && target === this.#springTarget) return;
+        this.#target = target;
+        this.#animate(target, this.progress.getVelocity());
+    }
+    /**
+	 * Settles a gesture. `intent` picks the slide and `momentum` starts the spring,
+	 * both in pixels per second towards later slides.
+	 */ #release(kind, anchor, intent, momentum) {
+        const position = this.progress.get();
+        const spacing = spacingAt(this.#slideCenters, position, this.#trackWidth);
+        const velocity = clamp(momentum / spacing, -MAX_RELEASE_VELOCITY, MAX_RELEASE_VELOCITY);
+        const target = resolveReleaseTarget({
+            position,
+            anchor,
+            velocity: intent / spacing,
+            count: this.count,
+            kind,
+            flickVelocity: FLICK_PIXELS_PER_SECOND / spacing
+        });
+        this.navigate(target, {
+            velocity
+        });
+    }
+    /** Moves by `pixels` of scroll: positive travels towards later slides. */ #scrollBy(pixels, scrollVelocity) {
+        if (this.#trackWidth === 0) return;
+        const position = this.progress.get();
+        const spacing = spacingAt(this.#slideCenters, position, this.#trackWidth);
+        let delta = pixels / spacing;
+        const next = position + delta;
+        if (next < 0 || next > this.count - 1) delta *= EDGE_RESISTANCE;
+        this.#setPosition(position + delta, scrollVelocity / spacing);
+    }
+    #onPointerDown;
+    #onPointerMove;
+    #onPointerUp;
+    #onPointerCancel;
+    /** Ends the gesture. A null event (cancelled or abandoned) settles by distance alone. */ #endPointer(event) {
+        const pointer = this.#pointer;
+        if (!pointer) return;
+        this.#pointer = null;
+        this.#releasePointerListeners?.();
+        this.#releasePointerListeners = null;
+        const viewport = this.#viewport;
+        if (viewport?.hasPointerCapture(pointer.id)) viewport.releasePointerCapture(pointer.id);
+        if (!pointer.dragging) {
+            this.#animate(this.#target, 0);
+            return;
+        }
+        this.#updateSnapshot({
+            isDragging: false
+        });
+        // A click-drag usually stops for a few frames before the button lifts, so the
+        // target follows the final stretch of movement, as Kami's did, while the spring
+        // only inherits the velocity the pointer still has.
+        const intent = event ? this.#tracker.intentVelocity() : 0;
+        const momentum = event ? this.#tracker.velocity(event.timeStamp) : 0;
+        this.#release('drag', pointer.anchor, -intent, -momentum);
+    }
+    #onClickCapture;
+    #onDragStart;
+    #onWheel;
+    #wheelDelta(event) {
+        if (event.deltaMode === WheelEvent.DOM_DELTA_LINE) {
+            return {
+                x: event.deltaX * WHEEL_LINE_HEIGHT,
+                y: event.deltaY * WHEEL_LINE_HEIGHT
+            };
+        }
+        const viewport = this.#viewport;
+        if (event.deltaMode === WheelEvent.DOM_DELTA_PAGE && viewport) {
+            return {
+                x: event.deltaX * viewport.clientWidth,
+                y: event.deltaY * viewport.clientHeight
+            };
+        }
+        return {
+            x: event.deltaX,
+            y: event.deltaY
+        };
+    }
+    #startWheelGesture() {
+        this.#wheelAxis = 'horizontal';
+        this.#wheelCanStart = false;
+        this.#wheelTracking = true;
+        this.#wheelAnchor = this.#target;
+        this.#wheelTravel = 0;
+        window.clearTimeout(this.#wheelIntentTimer);
+        this.#cancelAnimation();
+        this.#tracker.reset();
+        this.#wheelEndTimer = window.setTimeout(()=>{
+            this.#wheelTracking = false;
+            this.#release('wheel', this.#wheelAnchor, this.#tracker.intentVelocity(), this.#tracker.velocity(performance.now()));
+            this.#wheelRestartTimer = window.setTimeout(()=>{
+                this.#wheelCanStart = true;
+                this.#resetWheelIntent();
+            }, WHEEL_RESTART_DELAY);
+        }, WHEEL_GESTURE_DURATION);
+    }
+    #trackWheel(time, deltaX) {
+        const pixels = deltaX * WHEEL_SLIP;
+        this.#wheelTravel += pixels;
+        this.#tracker.add(time, this.#wheelTravel);
+        this.#scrollBy(pixels, this.#tracker.velocity(time));
+    }
+    #scheduleWheelIntentReset() {
+        window.clearTimeout(this.#wheelIntentTimer);
+        this.#wheelIntentTimer = window.setTimeout(this.#resetWheelIntent, WHEEL_INTENT_RESET_DELAY);
+    }
+    #resetWheelIntent;
+    #resetWheel() {
+        window.clearTimeout(this.#wheelEndTimer);
+        this.#wheelTracking = false;
+        this.#resetWheelIntent();
+    }
+    #onKeyDown;
+    #onKeyUp;
+    #isOwnTab(element) {
+        for (const tab of this.#tabs.values())if (tab === element) return true;
+        return false;
+    }
+    /** Leaves arrow keys to sliders, menus and other widgets that use them, except our tabs. */ #belongsToOtherWidget(target) {
+        if (!(target instanceof Element)) return false;
+        const widget = target.closest(ARROW_KEY_WIDGET_SELECTOR);
+        return widget !== null && widget !== this.#tabList;
+    }
+    #focusTab(index) {
+        this.#tabs.get(index)?.focus({
+            preventScroll: true
+        });
+    }
+}
+
+/**
+ * Structural styles only: what the carousel needs to lay out and move. Every
+ * selector is wrapped in `:where()`, so any class you write overrides it.
+ */ const styles = `
+:where([data-spring-carousel]) {
+	position: relative;
+	overflow-x: clip;
+}
+
+:where([data-spring-carousel-viewport]) {
+	position: relative;
+	overflow: hidden;
+	touch-action: pan-y pinch-zoom;
+	user-select: none;
+	-webkit-user-select: none;
+}
+
+:where([data-spring-carousel-viewport][data-draggable]) {
+	cursor: grab;
+}
+
+:where([data-spring-carousel-viewport][data-draggable]:active),
+:where([data-spring-carousel][data-dragging] [data-spring-carousel-viewport]) {
+	cursor: grabbing;
+}
+
+:where([data-spring-carousel-track]) {
+	position: relative;
+	display: flex;
+	gap: var(--carousel-gap, 0px);
+	transform: translate3d(
+		calc(
+			(100% - var(--carousel-slide-size, 100%)) / 2 - var(--carousel-initial-index, 0) *
+				(var(--carousel-slide-size, 100%) + var(--carousel-gap, 0px))
+		),
+		0,
+		0
+	);
+	will-change: transform;
+}
+
+:where([data-spring-carousel-slide]) {
+	position: relative;
+	flex: 0 0 var(--carousel-slide-size, 100%);
+	min-width: 0;
+}
+
+:where([data-spring-carousel-slide] :is(img, video)) {
+	-webkit-user-drag: none;
+}
+
+:where([data-spring-carousel-tabs]) {
+	position: relative;
+	display: flex;
+	width: max-content;
+	margin-inline-start: 50%;
+	white-space: nowrap;
+	will-change: transform;
+}
+
+:where([data-spring-carousel-tabs]:not([data-measured])) {
+	visibility: hidden;
+}
+
+:where([data-spring-carousel-tab]) {
+	--carousel-inactive-opacity: 0.25;
+	opacity: calc(
+		var(--carousel-inactive-opacity) + (1 - var(--carousel-inactive-opacity)) *
+			var(--carousel-presence, 0)
+	);
+}
+`;
+
+function assignRef(ref, node) {
+    if (typeof ref === 'function') {
+        const cleanup = ref(node);
+        return typeof cleanup === 'function' ? cleanup : ()=>ref(null);
+    }
+    if (ref) {
+        ref.current = node;
+        return ()=>{
+            ref.current = null;
+        };
+    }
+    return ()=>{};
+}
+/**
+ * Combines a ref passed in as a prop with a part's own registration callback,
+ * using React 19 callback-ref cleanups so each element is unregistered exactly
+ * once, including under StrictMode's double mount.
+ */ function useMergedRefs(forwarded, own) {
+    return react.useCallback((node)=>{
+        if (node === null) return;
+        const cleanupOwn = own(node);
+        const cleanupForwarded = assignRef(forwarded, node);
+        return ()=>{
+            cleanupForwarded();
+            cleanupOwn();
+        };
+    }, [
+        forwarded,
+        own
+    ]);
+}
+
+const getServerSnapshot = ()=>SERVER_SNAPSHOT;
+function initialItemStyle(index, initialIndex, style) {
+    return {
+        [OFFSET_PROPERTY]: index - initialIndex,
+        [PRESENCE_PROPERTY]: index === initialIndex ? 1 : 0,
+        ...style
+    };
+}
+function CarouselRoot({ index: indexProp, defaultIndex = 0, onIndexChange, spring, keyboard = 'focus', wheel = true, draggable = true, reducedMotion = 'user', ref, style, children, ...props }) {
+    const [uncontrolledIndex, setUncontrolledIndex] = react.useState(defaultIndex);
+    const isControlled = indexProp !== undefined;
+    const index = isControlled ? indexProp : uncontrolledIndex;
+    const [initialIndex] = react.useState(index);
+    const [engine] = react.useState(()=>new CarouselEngine(initialIndex));
+    const snapshot = react.useSyncExternalStore(engine.subscribe, engine.getSnapshot, getServerSnapshot);
+    const [, requestSettle] = react.useReducer((count)=>count + 1, 0);
+    const baseId = react.useId();
+    const rootRef = useMergedRefs(ref, engine.registerRoot);
+    const handleIndexRequest = react.useEffectEvent((next)=>{
+        // Re-render even when the index is unchanged, so a controlled parent that
+        // rejects the request still sends the carousel back to the index it holds.
+        requestSettle();
+        if (next === index) return;
+        if (!isControlled) setUncontrolledIndex(next);
+        onIndexChange?.(next);
+    });
+    react.useLayoutEffect(()=>engine.onIndexRequest((next)=>handleIndexRequest(next)), [
+        engine
+    ]);
+    react.useLayoutEffect(()=>{
+        engine.setOptions({
+            spring: resolveSpring(spring),
+            keyboard,
+            wheel,
+            draggable,
+            reducedMotion
+        });
+    }, [
+        engine,
+        spring,
+        keyboard,
+        wheel,
+        draggable,
+        reducedMotion
+    ]);
+    react.useLayoutEffect(()=>engine.start(), [
+        engine
+    ]);
+    react.useLayoutEffect(()=>{
+        engine.settle(index);
+    });
+    const context = react.useMemo(()=>({
+            engine,
+            baseId,
+            initialIndex,
+            draggable,
+            goTo: (target, options)=>engine.navigate(target, options),
+            next: (options)=>engine.next(options),
+            prev: (options)=>engine.prev(options)
+        }), [
+        engine,
+        baseId,
+        initialIndex,
+        draggable
+    ]);
+    const state = react.useMemo(()=>({
+            index,
+            count: snapshot.count,
+            isDragging: snapshot.isDragging,
+            hasTabs: snapshot.tabCount > 0
+        }), [
+        index,
+        snapshot
+    ]);
+    return /*#__PURE__*/ jsxRuntime.jsx(CarouselContext, {
+        value: context,
+        children: /*#__PURE__*/ jsxRuntime.jsx(CarouselStateContext, {
+            value: state,
+            children: /*#__PURE__*/ jsxRuntime.jsxs("section", {
+                "aria-roledescription": "carousel",
+                ...props,
+                ref: rootRef,
+                "data-spring-carousel": "",
+                "data-dragging": snapshot.isDragging ? '' : undefined,
+                style: {
+                    ...style,
+                    '--carousel-initial-index': initialIndex
+                },
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx("style", {
+                        href: "spring-carousel",
+                        precedence: "default",
+                        children: styles
+                    }),
+                    children
+                ]
+            })
+        })
+    });
+}
+function CarouselViewport({ ref, ...props }) {
+    const { context } = useCarouselContext('Carousel.Viewport');
+    const viewportRef = useMergedRefs(ref, context.engine.registerViewport);
+    return /*#__PURE__*/ jsxRuntime.jsx("div", {
+        ...props,
+        ref: viewportRef,
+        "data-spring-carousel-viewport": "",
+        "data-draggable": context.draggable ? '' : undefined
+    });
+}
+function CarouselTrack({ ref, ...props }) {
+    const { context } = useCarouselContext('Carousel.Track');
+    const trackRef = useMergedRefs(ref, context.engine.registerTrack);
+    return /*#__PURE__*/ jsxRuntime.jsx("div", {
+        "aria-live": "polite",
+        ...props,
+        ref: trackRef,
+        id: trackId(context.baseId),
+        "data-spring-carousel-track": ""
+    });
+}
+function CarouselSlide({ index, ref, style, children, ...props }) {
+    const { context, state } = useCarouselContext('Carousel.Slide');
+    const { engine, baseId, initialIndex } = context;
+    const register = react.useCallback((element)=>engine.registerSlide(index, element), [
+        engine,
+        index
+    ]);
+    const slideRef = useMergedRefs(ref, register);
+    const isActive = index === state.index;
+    const slide = react.useMemo(()=>({
+            index,
+            isActive
+        }), [
+        index,
+        isActive
+    ]);
+    return /*#__PURE__*/ jsxRuntime.jsx(SlideContext, {
+        value: slide,
+        children: /*#__PURE__*/ jsxRuntime.jsx("div", {
+            role: state.hasTabs ? 'tabpanel' : 'group',
+            "aria-roledescription": "slide",
+            "aria-label": !state.hasTabs && state.count > 0 ? `${index + 1} of ${state.count}` : undefined,
+            "aria-labelledby": state.hasTabs ? tabId(baseId, index) : undefined,
+            ...props,
+            ref: slideRef,
+            id: slideId(baseId, index),
+            inert: !isActive,
+            "data-spring-carousel-slide": "",
+            "data-active": isActive ? '' : undefined,
+            style: initialItemStyle(index, initialIndex, style),
+            children: children
+        })
+    });
+}
+function CarouselTabs({ ref, ...props }) {
+    const { context } = useCarouselContext('Carousel.Tabs');
+    const tabsRef = useMergedRefs(ref, context.engine.registerTabList);
+    return /*#__PURE__*/ jsxRuntime.jsx("div", {
+        "aria-label": "Choose a slide",
+        ...props,
+        ref: tabsRef,
+        role: "tablist",
+        "aria-orientation": "horizontal",
+        "data-spring-carousel-tabs": ""
+    });
+}
+function CarouselTab({ index, ref, style, onClick, ...props }) {
+    const { context, state } = useCarouselContext('Carousel.Tab');
+    const { engine, baseId, initialIndex, goTo } = context;
+    const register = react.useCallback((element)=>engine.registerTab(index, element), [
+        engine,
+        index
+    ]);
+    const tabRef = useMergedRefs(ref, register);
+    const isActive = index === state.index;
+    function handleClick(event) {
+        onClick?.(event);
+        if (!event.defaultPrevented) goTo(index);
+    }
+    return /*#__PURE__*/ jsxRuntime.jsx("button", {
+        type: "button",
+        ...props,
+        ref: tabRef,
+        id: tabId(baseId, index),
+        role: "tab",
+        "aria-selected": isActive,
+        "aria-controls": slideId(baseId, index),
+        tabIndex: isActive ? 0 : -1,
+        "data-spring-carousel-tab": "",
+        "data-active": isActive ? '' : undefined,
+        style: initialItemStyle(index, initialIndex, style),
+        onClick: handleClick
+    });
+}
+function Chevron({ direction }) {
+    return /*#__PURE__*/ jsxRuntime.jsx("svg", {
+        "aria-hidden": "true",
+        width: "16",
+        height: "16",
+        viewBox: "0 0 16 16",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        children: /*#__PURE__*/ jsxRuntime.jsx("path", {
+            d: direction === 'left' ? 'M10 3 5 8l5 5' : 'm6 3 5 5-5 5'
+        })
+    });
+}
+function useStepButton(direction, onClick) {
+    const { context, state } = useCarouselContext(direction === 'prev' ? 'Carousel.Prev' : 'Carousel.Next');
+    const disabled = direction === 'prev' ? state.index <= 0 : state.index >= state.count - 1;
+    function handleClick(event) {
+        onClick?.(event);
+        if (event.defaultPrevented || disabled) return;
+        if (direction === 'prev') context.prev();
+        else context.next();
+    }
+    return {
+        'aria-controls': trackId(context.baseId),
+        'aria-disabled': disabled || undefined,
+        'data-disabled': disabled ? '' : undefined,
+        onClick: handleClick
+    };
+}
+/**
+ * Stays focusable at the first slide (with `aria-disabled`) so keyboard focus is
+ * not dropped to the page when it stops being useful.
+ */ function CarouselPrev({ onClick, children, ...props }) {
+    const stepProps = useStepButton('prev', onClick);
+    return /*#__PURE__*/ jsxRuntime.jsx("button", {
+        type: "button",
+        "aria-label": "Previous slide",
+        ...props,
+        ...stepProps,
+        "data-spring-carousel-prev": "",
+        children: children ?? /*#__PURE__*/ jsxRuntime.jsx(Chevron, {
+            direction: "left"
+        })
+    });
+}
+function CarouselNext({ onClick, children, ...props }) {
+    const stepProps = useStepButton('next', onClick);
+    return /*#__PURE__*/ jsxRuntime.jsx("button", {
+        type: "button",
+        "aria-label": "Next slide",
+        ...props,
+        ...stepProps,
+        "data-spring-carousel-next": "",
+        children: children ?? /*#__PURE__*/ jsxRuntime.jsx(Chevron, {
+            direction: "right"
+        })
+    });
+}
+
+var parts = {
+	__proto__: null,
+	Next: CarouselNext,
+	Prev: CarouselPrev,
+	Root: CarouselRoot,
+	Slide: CarouselSlide,
+	Tab: CarouselTab,
+	Tabs: CarouselTabs,
+	Track: CarouselTrack,
+	Viewport: CarouselViewport
+};
+
+exports.Carousel = parts;
+exports.presence = presence;
+exports.useCarousel = useCarousel;
+exports.useCarouselProgress = useCarouselProgress;
+exports.useSlide = useSlide;