@arolariu/components
Version:
🎨 60+ 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! ⚡
207 lines (206 loc) • 8.24 kB
JavaScript
"use client";
;
var __webpack_require__ = {};
(()=>{
__webpack_require__.n = (module)=>{
var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
__webpack_require__.d(getter, {
a: getter
});
return getter;
};
})();
(()=>{
__webpack_require__.d = (exports1, definition)=>{
for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
enumerable: true,
get: definition[key]
});
};
})();
(()=>{
__webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
})();
(()=>{
__webpack_require__.r = (exports1)=>{
if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
value: 'Module'
});
Object.defineProperty(exports1, '__esModule', {
value: true
});
};
})();
var __webpack_exports__ = {};
__webpack_require__.r(__webpack_exports__);
__webpack_require__.d(__webpack_exports__, {
CarouselNext: ()=>CarouselNext,
CarouselPrevious: ()=>CarouselPrevious,
CarouselContent: ()=>CarouselContent,
CarouselItem: ()=>CarouselItem,
Carousel: ()=>Carousel
});
const jsx_runtime_namespaceObject = require("react/jsx-runtime");
const external_react_namespaceObject = require("react");
const external_embla_carousel_react_namespaceObject = require("embla-carousel-react");
var external_embla_carousel_react_default = /*#__PURE__*/ __webpack_require__.n(external_embla_carousel_react_namespaceObject);
const external_lucide_react_namespaceObject = require("lucide-react");
const utils_cjs_namespaceObject = require("../../lib/utils.cjs");
const external_button_cjs_namespaceObject = require("./button.cjs");
const CarouselContext = /*#__PURE__*/ external_react_namespaceObject.createContext(null);
function useCarousel() {
const context = external_react_namespaceObject.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] = external_embla_carousel_react_default()({
...opts,
axis: "horizontal" === orientation ? "x" : "y"
}, plugins);
const [canScrollPrev, setCanScrollPrev] = external_react_namespaceObject.useState(false);
const [canScrollNext, setCanScrollNext] = external_react_namespaceObject.useState(false);
const onSelect = external_react_namespaceObject.useCallback((api)=>{
if (!api) return;
setCanScrollPrev(api.canScrollPrev());
setCanScrollNext(api.canScrollNext());
}, []);
const scrollPrev = external_react_namespaceObject.useCallback(()=>{
api?.scrollPrev();
}, [
api
]);
const scrollNext = external_react_namespaceObject.useCallback(()=>{
api?.scrollNext();
}, [
api
]);
const handleKeyDown = external_react_namespaceObject.useCallback((event)=>{
if ("ArrowLeft" === event.key) {
event.preventDefault();
scrollPrev();
} else if ("ArrowRight" === event.key) {
event.preventDefault();
scrollNext();
}
}, [
scrollPrev,
scrollNext
]);
external_react_namespaceObject.useEffect(()=>{
if (!api || !setApi) return;
setApi(api);
}, [
api,
setApi
]);
external_react_namespaceObject.useEffect(()=>{
if (!api) return;
onSelect(api);
api.on("reInit", onSelect);
api.on("select", onSelect);
return ()=>{
api?.off("select", onSelect);
};
}, [
api,
onSelect
]);
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(CarouselContext.Provider, {
value: {
carouselRef,
api: api,
opts,
orientation: orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
scrollPrev,
scrollNext,
canScrollPrev,
canScrollNext
},
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
onKeyDownCapture: handleKeyDown,
className: (0, utils_cjs_namespaceObject.cn)("relative", className),
role: "region",
"aria-roledescription": "carousel",
"data-slot": "carousel",
...props,
children: children
})
});
}
function CarouselContent({ className, ...props }) {
const { carouselRef, orientation } = useCarousel();
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
ref: carouselRef,
className: "overflow-hidden",
"data-slot": "carousel-content",
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
className: (0, utils_cjs_namespaceObject.cn)("flex", "horizontal" === orientation ? "-ml-4" : "-mt-4 flex-col", className),
...props
})
});
}
function CarouselItem({ className, ...props }) {
const { orientation } = useCarousel();
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
role: "group",
"aria-roledescription": "slide",
"data-slot": "carousel-item",
className: (0, utils_cjs_namespaceObject.cn)("min-w-0 shrink-0 grow-0 basis-full", "horizontal" === orientation ? "pl-4" : "pt-4", className),
...props
});
}
function CarouselPrevious({ className, variant = "outline", size = "icon", ...props }) {
const { orientation, scrollPrev, canScrollPrev } = useCarousel();
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_button_cjs_namespaceObject.Button, {
"data-slot": "carousel-previous",
variant: variant,
size: size,
className: (0, utils_cjs_namespaceObject.cn)("absolute size-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__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.ArrowLeft, {}),
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
className: "sr-only",
children: "Previous slide"
})
]
});
}
function CarouselNext({ className, variant = "outline", size = "icon", ...props }) {
const { orientation, scrollNext, canScrollNext } = useCarousel();
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_button_cjs_namespaceObject.Button, {
"data-slot": "carousel-next",
variant: variant,
size: size,
className: (0, utils_cjs_namespaceObject.cn)("absolute size-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__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.ArrowRight, {}),
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
className: "sr-only",
children: "Next slide"
})
]
});
}
exports.Carousel = __webpack_exports__.Carousel;
exports.CarouselContent = __webpack_exports__.CarouselContent;
exports.CarouselItem = __webpack_exports__.CarouselItem;
exports.CarouselNext = __webpack_exports__.CarouselNext;
exports.CarouselPrevious = __webpack_exports__.CarouselPrevious;
for(var __webpack_i__ in __webpack_exports__)if (-1 === [
"Carousel",
"CarouselContent",
"CarouselItem",
"CarouselNext",
"CarouselPrevious"
].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
Object.defineProperty(exports, '__esModule', {
value: true
});
//# sourceMappingURL=carousel.cjs.map