"use client"; import useEmblaCarousel, { type UseEmblaCarouselType, } from "embla-carousel-react"; import * as React from "react"; import { Button } from "@/components/registry/primitives/core/button"; import { ThemeIcon } from "@/components/registry/primitives/core/theme-icon"; import { useDirection } from "@/hooks/registry/use-direction"; import { cn } from "@/lib/registry/cn"; type UseCarouselParameters = Parameters; type CarouselProps = { opts?: UseCarouselParameters[0]; plugins?: UseCarouselParameters[1]; orientation?: "horizontal" | "vertical"; setApi?: (api: UseEmblaCarouselType[1]) => void; }; type CarouselContextProps = { carouselRef: ReturnType[0]; api: ReturnType[1]; scrollPrev: () => void; scrollNext: () => void; canScrollPrev: boolean; canScrollNext: boolean; } & 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, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className, children, ...props }: React.ComponentProps<"div"> & CarouselProps) { const direction = useDirection(); const isRtl = direction === "rtl"; const resolvedOpts = React.useMemo( () => ({ ...opts, axis: (orientation === "horizontal" ? "x" : "y") as "x" | "y", direction: orientation === "horizontal" ? (opts?.direction ?? direction) : undefined, }), [opts, orientation, direction], ); const [carouselRef, api] = useEmblaCarousel(resolvedOpts, plugins); const [canScrollPrev, setCanScrollPrev] = React.useState(false); const [canScrollNext, setCanScrollNext] = React.useState(false); const onSelect = React.useCallback((api: UseEmblaCarouselType[1]) => { if (!api) return; setCanScrollPrev(api.canScrollPrev()); setCanScrollNext(api.canScrollNext()); }, []); const scrollPrev = React.useCallback(() => { api?.scrollPrev(); }, [api]); const scrollNext = React.useCallback(() => { api?.scrollNext(); }, [api]); const handleKeyDown = React.useCallback( (event: React.KeyboardEvent) => { if (orientation !== "horizontal") return; if (event.key === "ArrowLeft") { event.preventDefault(); if (isRtl) { scrollNext(); } else { scrollPrev(); } } else if (event.key === "ArrowRight") { event.preventDefault(); if (isRtl) { scrollPrev(); } else { scrollNext(); } } }, [orientation, isRtl, 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("reInit", onSelect); api?.off("select", onSelect); }; }, [api, onSelect]); return (

{children}

); } function CarouselContent({ className, ...props }: React.ComponentProps<"div">) { const { carouselRef, orientation } = useCarousel(); const overflowClassName = orientation === "horizontal" ? "overflow-y-visible overflow-x-clip" : "overflow-y-clip overflow-x-visible"; return (

); } function CarouselItem({ className, ...props }: React.ComponentProps<"div">) { return ( // biome-ignore lint/a11y/useSemanticElements: ARIA carousel-slide pattern;

would imply form-field grouping and no semantic HTML element represents a slide.

); } const carouselButtonClasses = "flex h-(--carousel-button-size,2rem) w-(--carousel-button-size,2rem) items-center justify-center rounded-(--carousel-button-radius,9999px) border-(--carousel-button-border-color,transparent) bg-(--carousel-button-bg,var(--color-background)) text-(--carousel-button-color,var(--color-foreground)) shadow-(--carousel-button-shadow,var(--shadow-md)) transition-colors [border-width:var(--carousel-button-border-width,0)] hover:bg-(--carousel-button-bg,var(--color-background)) hover:shadow-(--carousel-button-shadow-hover,var(--shadow-lg)) active:bg-(--carousel-button-bg,var(--color-background))"; const carouselButtonIconClasses = "h-(--carousel-button-icon-size,1rem) w-(--carousel-button-icon-size,1rem)"; function CarouselPrevious({ className, variant = "ghost", colorScheme = "neutral", size = "icon", ...props }: React.ComponentProps) { const { orientation, scrollPrev, canScrollPrev } = useCarousel(); const direction = useDirection(); const isRtl = direction === "rtl"; const iconName = isRtl ? "arrow-right" : "arrow-left"; return ( ); } function CarouselNext({ className, variant = "ghost", colorScheme = "neutral", size = "icon", ...props }: React.ComponentProps) { const { orientation, scrollNext, canScrollNext } = useCarousel(); const direction = useDirection(); const isRtl = direction === "rtl"; const iconName = isRtl ? "arrow-left" : "arrow-right"; return ( ); } export type CarouselApi = UseEmblaCarouselType[1]; export { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, };

Carousel

Showcase

Carousel