140 lines
3.4 KiB
JavaScript
140 lines
3.4 KiB
JavaScript
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 <Carousel />");
|
|
}
|
|
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
|
|
};
|