import { jsx } from "react/jsx-runtime"; import * as React from "react"; import useEmblaCarousel from "embla-carousel-react"; import { c as cn } from "./utils-DLCPGU0v.js"; import "./button-CdJZJLGw.js"; 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, ...props }) { const [carouselRef, api] = useEmblaCarousel( { ...opts, axis: orientation === "horizontal" ? "x" : "y" }, plugins ); const [canScrollPrev, setCanScrollPrev] = React.useState(false); const [canScrollNext, setCanScrollNext] = React.useState(false); const onSelect = React.useCallback((api2) => { if (!api2) return; setCanScrollPrev(api2.canScrollPrev()); setCanScrollNext(api2.canScrollNext()); }, []); const scrollPrev = React.useCallback(() => { api == null ? void 0 : api.scrollPrev(); }, [api]); const scrollNext = React.useCallback(() => { api == null ? void 0 : api.scrollNext(); }, [api]); const handleKeyDown = React.useCallback( (event) => { 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 == null ? void 0 : api.off("select", onSelect); }; }, [api, onSelect]); return /* @__PURE__ */ jsx( CarouselContext.Provider, { value: { carouselRef, api, opts, orientation: orientation || ((opts == null ? void 0 : opts.axis) === "y" ? "vertical" : "horizontal"), scrollPrev, scrollNext, canScrollPrev, canScrollNext }, children: /* @__PURE__ */ jsx( "div", { onKeyDownCapture: handleKeyDown, className: cn("relative", className), role: "region", "aria-roledescription": "carousel", "data-slot": "carousel", ...props, children } ) } ); } function CarouselContent({ className, ...props }) { const { carouselRef, orientation } = useCarousel(); return /* @__PURE__ */ jsx( "div", { ref: carouselRef, className: "overflow-hidden", "data-slot": "carousel-content", children: /* @__PURE__ */ jsx( "div", { className: cn( "flex", orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", className ), ...props } ) } ); } function CarouselItem({ className, ...props }) { const { orientation } = useCarousel(); return /* @__PURE__ */ jsx( "div", { role: "group", "aria-roledescription": "slide", "data-slot": "carousel-item", className: cn( "min-w-0 shrink-0 grow-0 basis-full", orientation === "horizontal" ? "pl-4" : "pt-4", className ), ...props } ); } export { Carousel as C, CarouselContent as a, CarouselItem as b };