@arolariu/components
Version:
🎨 70+ beautiful, accessible React components built on Base UI. TypeScript-first, CSS Modules styling, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡
187 lines (186 loc) • 6.84 kB
JavaScript
"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { mergeProps } from "@base-ui/react/merge-props";
import embla_carousel_react from "embla-carousel-react";
import { ArrowLeft, ArrowRight } from "lucide-react";
import { Button } from "./button.js";
import { cn } from "../../lib/utilities.js";
import carousel_module from "./carousel.module.js";
import * as __rspack_external_react from "react";
const CarouselContext = /*#__PURE__*/ __rspack_external_react.createContext(null);
function useCarousel() {
const context = __rspack_external_react.useContext(CarouselContext);
if (!context) throw new Error("useCarousel must be used within a <Carousel />");
return context;
}
const Carousel = /*#__PURE__*/ __rspack_external_react.forwardRef(({ orientation, opts, setApi, plugins, className, children, ...props }, ref)=>{
const resolvedOrientation = orientation ?? (opts?.axis === "y" ? "vertical" : "horizontal");
const resolvedAxis = "vertical" === resolvedOrientation ? "y" : "x";
const [carouselRef, api] = embla_carousel_react({
...opts,
axis: resolvedAxis
}, plugins);
const [canScrollPrev, setCanScrollPrev] = __rspack_external_react.useState(false);
const [canScrollNext, setCanScrollNext] = __rspack_external_react.useState(false);
const onSelect = __rspack_external_react.useCallback((emblaApi)=>{
if (!emblaApi) return;
setCanScrollPrev(emblaApi.canScrollPrev());
setCanScrollNext(emblaApi.canScrollNext());
}, []);
const scrollPrev = __rspack_external_react.useCallback(()=>{
api?.scrollPrev();
}, [
api
]);
const scrollNext = __rspack_external_react.useCallback(()=>{
api?.scrollNext();
}, [
api
]);
const handleKeyDown = __rspack_external_react.useCallback((event)=>{
if ("horizontal" === orientation) {
if ("ArrowLeft" === event.key) {
event.preventDefault();
scrollPrev();
} else if ("ArrowRight" === event.key) {
event.preventDefault();
scrollNext();
}
return;
}
if ("ArrowUp" === event.key) {
event.preventDefault();
scrollPrev();
} else if ("ArrowDown" === event.key) {
event.preventDefault();
scrollNext();
}
}, [
orientation,
scrollNext,
scrollPrev
]);
__rspack_external_react.useEffect(()=>{
if (!api || !setApi) return;
setApi(api);
}, [
api,
setApi
]);
__rspack_external_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 /*#__PURE__*/ jsx(CarouselContext.Provider, {
value: {
api,
canScrollNext,
canScrollPrev,
carouselRef,
opts,
orientation: resolvedOrientation,
plugins,
scrollNext,
scrollPrev,
setApi
},
children: /*#__PURE__*/ jsx("div", {
ref: ref,
"data-orientation": resolvedOrientation,
onKeyDownCapture: handleKeyDown,
className: cn(carousel_module.carousel, className),
role: "region",
"aria-roledescription": "carousel",
...props,
children: children
})
});
});
Carousel.displayName = "Carousel";
const CarouselContent = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>{
const { carouselRef, orientation } = useCarousel();
return /*#__PURE__*/ jsx("div", {
ref: carouselRef,
className: carousel_module.viewport,
children: /*#__PURE__*/ jsx("div", {
ref: ref,
"data-orientation": orientation,
className: cn(carousel_module.content, "vertical" === orientation && carousel_module.contentVertical, className),
...props
})
});
});
CarouselContent.displayName = "CarouselContent";
const CarouselItem = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>{
const { orientation } = useCarousel();
return /*#__PURE__*/ jsx("div", {
ref: ref,
role: "group",
"aria-roledescription": "slide",
"data-orientation": orientation,
className: cn(carousel_module.item, "vertical" === orientation && carousel_module.itemVertical, className),
...props
});
});
CarouselItem.displayName = "CarouselItem";
const CarouselPrevious = /*#__PURE__*/ __rspack_external_react.forwardRef(({ children, className, variant = "outline", size = "icon", ...props }, ref)=>{
const { orientation, scrollPrev, canScrollPrev } = useCarousel();
const mergedProps = mergeProps({
onClick: scrollPrev,
disabled: !canScrollPrev
}, props);
return /*#__PURE__*/ jsxs(Button, {
ref: ref,
variant: variant,
size: size,
"data-orientation": orientation,
className: cn(carousel_module.navigationButton, carousel_module.previousButton, className),
...mergedProps,
children: [
children ?? /*#__PURE__*/ jsx(ArrowLeft, {
className: carousel_module.navigationIcon
}),
/*#__PURE__*/ jsx("span", {
className: carousel_module.srOnly,
children: "Previous slide"
})
]
});
});
CarouselPrevious.displayName = "CarouselPrevious";
const CarouselNext = /*#__PURE__*/ __rspack_external_react.forwardRef(({ children, className, variant = "outline", size = "icon", ...props }, ref)=>{
const { orientation, scrollNext, canScrollNext } = useCarousel();
const mergedProps = mergeProps({
onClick: scrollNext,
disabled: !canScrollNext
}, props);
return /*#__PURE__*/ jsxs(Button, {
ref: ref,
variant: variant,
size: size,
"data-orientation": orientation,
className: cn(carousel_module.navigationButton, carousel_module.nextButton, className),
...mergedProps,
children: [
children ?? /*#__PURE__*/ jsx(ArrowRight, {
className: carousel_module.navigationIcon
}),
/*#__PURE__*/ jsx("span", {
className: carousel_module.srOnly,
children: "Next slide"
})
]
});
});
CarouselNext.displayName = "CarouselNext";
export { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious };
//# sourceMappingURL=carousel.js.map