import * as React from "react"; import useEmblaCarousel, { type UseEmblaCarouselType, } from "embla-carousel-react"; import { cn } from "@/registry/a11y/utils/utils"; import { Button } from "@/registry/a11y/button/button"; import { HugeiconsIcon } from "@hugeicons/react"; import { ArrowLeft01Icon, ArrowRight01Icon } from "@hugeicons/core-free-icons"; type CarouselApi = UseEmblaCarouselType[1]; type UseCarouselParameters = Parameters; type CarouselOptions = UseCarouselParameters[0]; type CarouselPlugin = UseCarouselParameters[1]; type AnnounceSlideInfo = { selectedIndex: number; slideCount: number; slidesInView: number[]; }; type CarouselProps = { opts?: CarouselOptions; plugins?: CarouselPlugin; orientation?: "horizontal" | "vertical"; setApi?: (api: CarouselApi) => void; announceSlide?: (info: AnnounceSlideInfo) => string; }; type CarouselContextProps = { carouselRef: ReturnType[0]; api: ReturnType[1]; scrollPrev: () => void; scrollNext: () => void; canScrollPrev: boolean; canScrollNext: boolean; selectedIndex: number; slideCount: number; } & CarouselProps; const CarouselContext = React.createContext(null); function useCarousel() { const context = React.useContext(CarouselContext); if (!context) { throw new Error("useCarousel must be used within a "); } return context; } function Carousel({ orientation = "horizontal", opts, setApi, plugins, className, children, announceSlide, ...props }: React.ComponentProps<"div"> & CarouselProps) { const [carouselRef, api] = useEmblaCarousel( { ...opts, axis: orientation === "horizontal" ? "x" : "y", }, plugins, ); const [canScrollPrev, setCanScrollPrev] = React.useState(false); const [canScrollNext, setCanScrollNext] = React.useState(false); const [selectedIndex, setSelectedIndex] = React.useState(0); const [slideCount, setSlideCount] = React.useState(0); // Prevents the live region from announcing on first render, // so screen readers only hear updates triggered by user interaction. const isFirstSelect = React.useRef(true); const liveRef = React.useRef(null); const onSelect = React.useCallback((api: CarouselApi) => { if (!api) return; setCanScrollPrev(api.canScrollPrev()); setCanScrollNext(api.canScrollNext()); setSelectedIndex(api.selectedScrollSnap()); setSlideCount(api.scrollSnapList().length); }, []); const scrollPrev = React.useCallback(() => { api?.scrollPrev(); }, [api]); const scrollNext = React.useCallback(() => { api?.scrollNext(); }, [api]); const handleKeyDown = React.useCallback( (event: React.KeyboardEvent) => { if (event.key === "ArrowLeft") { event.preventDefault(); scrollPrev(); } else if (event.key === "ArrowRight") { event.preventDefault(); scrollNext(); } }, [scrollPrev, scrollNext], ); React.useEffect(() => { if (!api || !setApi) return; setApi(api); }, [api, setApi]); React.useEffect(() => { if (!api) return; onSelect(api); api.on("reInit", onSelect); api.on("select", onSelect); return () => { api?.off("select", onSelect); }; }, [api, onSelect]); // Live region announcement: clears text then sets it in the next frame // so screen readers reliably detect the change (ARIA live region pattern). React.useEffect(() => { if (isFirstSelect.current) { isFirstSelect.current = false; return; } if (!liveRef.current || slideCount === 0) return; const visibleSlides = api?.slidesInView() ?? [selectedIndex]; const text = announceSlide ? announceSlide({ selectedIndex, slideCount, slidesInView: visibleSlides, }) : `Slide ${selectedIndex + 1} of ${slideCount}`; liveRef.current.textContent = ""; requestAnimationFrame(() => { if (liveRef.current) { liveRef.current.textContent = text; } }); }, [selectedIndex, slideCount]); return (

{/* Live region for screen reader slide announcements */}

{children}

); } function CarouselContent({ className, ...props }: React.ComponentProps<"div">) { const { carouselRef, orientation } = useCarousel(); return (

); } function CarouselItem({ className, ...props }: React.ComponentProps<"div">) { const { orientation } = useCarousel(); return (

); } function CarouselPrevious({ className, variant = "nav", size = "icon-sm", ariaLabel, ...props }: React.ComponentProps & { ariaLabel?: string }) { const { orientation, scrollPrev, canScrollPrev } = useCarousel(); return ( ); } function CarouselNext({ className, variant = "nav", size = "icon-sm", ariaLabel, ...props }: React.ComponentProps & { ariaLabel?: string }) { const { orientation, scrollNext, canScrollNext } = useCarousel(); return ( ); } export { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, useCarousel, };

Carousel

Install

npm Dependencies

Registry Dependencies

Files

Preview & Source