"use client"; import * as React from "react"; import { cn, useReducedMotion } from "@kineticui/core"; import { ChevronLeftIcon, ChevronRightIcon } from "@kineticui/icons"; export type CarouselProps = { children: React.ReactNode[]; /** Slides visible at once (desktop). */ perView?: number; /** Autoplay interval in ms. Pauses on hover/focus. */ autoplay?: number; loop?: boolean; showArrows?: boolean; showDots?: boolean; gap?: number; label?: string; className?: string; }; /** Scroll-snap carousel: native touch swiping, arrows, dots and optional autoplay. */ export function Carousel({ children, perView = 1, autoplay, loop = true, showArrows = true, showDots = true, gap = 16, label = "Carousel", className }: CarouselProps) { const track = React.useRef(null); const [index, setIndex] = React.useState(0); const [paused, setPaused] = React.useState(false); const reduced = useReducedMotion(); const count = children.length; const maxIndex = Math.max(0, count - perView); const go = React.useCallback( (i: number) => { const el = track.current; if (!el) return; const next = loop ? (i > maxIndex ? 0 : i < 0 ? maxIndex : i) : Math.max(0, Math.min(maxIndex, i)); const slide = el.children[next] as HTMLElement | undefined; if (slide) el.scrollTo({ left: slide.offsetLeft - el.offsetLeft, behavior: reduced ? "auto" : "smooth" }); }, [loop, maxIndex, reduced], ); React.useEffect(() => { const el = track.current; if (!el) return; const onScroll = () => { const w = (el.children[0] as HTMLElement | undefined)?.offsetWidth ?? 1; setIndex(Math.round(el.scrollLeft / (w + gap))); }; el.addEventListener("scroll", onScroll, { passive: true }); return () => el.removeEventListener("scroll", onScroll); }, [gap]); React.useEffect(() => { if (!autoplay || paused || reduced) return; const t = window.setInterval(() => go(index + 1), autoplay); return () => window.clearInterval(t); }, [autoplay, paused, reduced, index, go]); const arrow = "absolute top-1/2 z-[1] flex size-10 -translate-y-1/2 items-center justify-center rounded-full border border-border-strong bg-surface-overlay/90 shadow-overlay backdrop-blur transition-opacity hover:bg-surface-raised disabled:pointer-events-none disabled:opacity-0"; return (

setPaused(true)} onPointerLeave={() => setPaused(false)} onFocusCapture={() => setPaused(true)} onBlurCapture={() => setPaused(false)} onKeyDown={(e) => { if (e.key === "ArrowRight") go(index + 1); if (e.key === "ArrowLeft") go(index - 1); }} >

{children.map((child, i) => (

{child}

))}

{showArrows ? ( <> ) : null} {showDots ? (

{Array.from({ length: maxIndex + 1 }, (_, i) => (

) : null}

); }

Carousel

Installation

Exports