@arolariu/components/dist/components/ui/carousel.js

🎨 70+ beautiful, accessible React components built on Radix UI. TypeScript-first, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡

"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import embla_carousel_react from "embla-carousel-react";
import { ArrowLeft, ArrowRight } from "lucide-react";
import { createContext, forwardRef, useCallback, useContext, useEffect, useState } from "react";
import { Button } from "./button.js";
import { cn } from "../../lib/utilities.js";
const CarouselContext = /*#__PURE__*/ createContext(null);
function useCarousel() {
    const context = useContext(CarouselContext);
    if (!context) throw new Error("useCarousel must be used within a <Carousel />");
    return context;
}
const Carousel = /*#__PURE__*/ forwardRef(({ orientation = "horizontal", opts, setApi, plugins, className, children, ...props }, ref)=>{
    const [carouselRef, api] = embla_carousel_react({
        ...opts,
        axis: "horizontal" === orientation ? "x" : "y"
    }, plugins);
    const [canScrollPrev, setCanScrollPrev] = useState(false);
    const [canScrollNext, setCanScrollNext] = useState(false);
    const onSelect = useCallback((api)=>{
        if (!api) return;
        setCanScrollPrev(api.canScrollPrev());
        setCanScrollNext(api.canScrollNext());
    }, []);
    const scrollPrev = useCallback(()=>{
        api?.scrollPrev();
    }, [
        api
    ]);
    const scrollNext = useCallback(()=>{
        api?.scrollNext();
    }, [
        api
    ]);
    const handleKeyDown = useCallback((event)=>{
        if ("ArrowLeft" === event.key) {
            event.preventDefault();
            scrollPrev();
        } else if ("ArrowRight" === event.key) {
            event.preventDefault();
            scrollNext();
        }
    }, [
        scrollPrev,
        scrollNext
    ]);
    useEffect(()=>{
        if (!api || !setApi) return;
        setApi(api);
    }, [
        api,
        setApi
    ]);
    useEffect(()=>{
        if (!api) return;
        onSelect(api);
        api.on("reInit", onSelect);
        api.on("select", onSelect);
        return ()=>{
            api?.off("select", onSelect);
        };
    }, [
        api,
        onSelect
    ]);
    return /*#__PURE__*/ jsx(CarouselContext.Provider, {
        value: {
            carouselRef,
            api,
            opts,
            orientation: orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
            scrollPrev,
            scrollNext,
            canScrollPrev,
            canScrollNext
        },
        children: /*#__PURE__*/ jsx("div", {
            ref: ref,
            onKeyDownCapture: handleKeyDown,
            className: cn("relative", className),
            role: "region",
            "aria-roledescription": "carousel",
            ...props,
            children: children
        })
    });
});
Carousel.displayName = "Carousel";
const CarouselContent = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>{
    const { carouselRef, orientation } = useCarousel();
    return /*#__PURE__*/ jsx("div", {
        ref: carouselRef,
        className: "overflow-hidden",
        children: /*#__PURE__*/ jsx("div", {
            ref: ref,
            className: cn("flex", "horizontal" === orientation ? "-ml-4" : "-mt-4 flex-col", className),
            ...props
        })
    });
});
CarouselContent.displayName = "CarouselContent";
const CarouselItem = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>{
    const { orientation } = useCarousel();
    return /*#__PURE__*/ jsx("div", {
        ref: ref,
        role: "group",
        "aria-roledescription": "slide",
        className: cn("min-w-0 shrink-0 grow-0 basis-full", "horizontal" === orientation ? "pl-4" : "pt-4", className),
        ...props
    });
});
CarouselItem.displayName = "CarouselItem";
const CarouselPrevious = /*#__PURE__*/ forwardRef(({ className, variant = "outline", size = "icon", ...props }, ref)=>{
    const { orientation, scrollPrev, canScrollPrev } = useCarousel();
    return /*#__PURE__*/ jsxs(Button, {
        ref: ref,
        variant: variant,
        size: size,
        className: cn("absolute h-8 w-8 rounded-full", "horizontal" === orientation ? "top-1/2 -left-12 -translate-y-1/2" : "-top-12 left-1/2 -translate-x-1/2 rotate-90", className),
        disabled: !canScrollPrev,
        onClick: scrollPrev,
        ...props,
        children: [
            /*#__PURE__*/ jsx(ArrowLeft, {
                className: "h-4 w-4"
            }),
            /*#__PURE__*/ jsx("span", {
                className: "sr-only",
                children: "Previous slide"
            })
        ]
    });
});
CarouselPrevious.displayName = "CarouselPrevious";
const CarouselNext = /*#__PURE__*/ forwardRef(({ className, variant = "outline", size = "icon", ...props }, ref)=>{
    const { orientation, scrollNext, canScrollNext } = useCarousel();
    return /*#__PURE__*/ jsxs(Button, {
        ref: ref,
        variant: variant,
        size: size,
        className: cn("absolute h-8 w-8 rounded-full", "horizontal" === orientation ? "top-1/2 -right-12 -translate-y-1/2" : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90", className),
        disabled: !canScrollNext,
        onClick: scrollNext,
        ...props,
        children: [
            /*#__PURE__*/ jsx(ArrowRight, {
                className: "h-4 w-4"
            }),
            /*#__PURE__*/ jsx("span", {
                className: "sr-only",
                children: "Next slide"
            })
        ]
    });
});
CarouselNext.displayName = "CarouselNext";
export { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious };

//# sourceMappingURL=carousel.js.map