@undp/design-system-react/dist/Carousel.js

React based design system for UNDP

import { t as e } from "./utils-ca9as9Ye.js";
import { t } from "./dist-CQzJbxrW.js";
import n from "react";
import { jsx as r } from "react/jsx-runtime";
//#region src/components/ui/carousel.tsx
var i = n.forwardRef(({ className: t, children: i, ...a }, o) => {
	let s = n.useRef(null), [c, l] = n.useState("url(https://cdn.jsdelivr.net/npm/@undp/design-system-assets/images/arrow-right.svg)");
	return /* @__PURE__ */ r("div", {
		ref: s,
		className: e("undp-scrollbar mr-auto mb-0 ml-auto flex w-full snap-x snap-mandatory scroll-p-0 scroll-pl-0 overflow-x-auto pb-4", t),
		...a,
		onKeyDown: (e) => {
			s.current && (e.key === "ArrowRight" && s.current.scrollBy(280, 0), e.key === "ArrowLeft" && s.current.scrollBy(-280, 0));
		},
		onClick: (e) => {
			s.current && (e.clientX > window.innerWidth / 2 ? s.current.scrollBy(280, 0) : s.current.scrollBy(-280, 0));
		},
		onMouseMove: (e) => {
			e.clientX > window.innerWidth / 2 ? l("url(https://cdn.jsdelivr.net/npm/@undp/design-system-assets/images/arrow-right.svg)") : l("url(https://cdn.jsdelivr.net/npm/@undp/design-system-assets/images/arrow-left.svg)");
		},
		children: /* @__PURE__ */ r("div", {
			ref: o,
			className: "flex w-full items-stretch gap-4",
			style: { cursor: `${c}, auto` },
			children: i
		})
	});
});
i.displayName = "Carousel";
var a = t("shrink-0 min-w-[320px] snap-start", {
	variants: { size: {
		xs: "w-1/4 snap-start",
		sm: "w-1/3 snap-start",
		base: "w-1/2 snap-start",
		lg: "w-2/3 snap-start",
		xl: "w-[calc(100%-80px)] snap-start",
		full: "w-full snap-start"
	} },
	defaultVariants: { size: "sm" }
}), o = n.forwardRef(({ className: t, size: n, ...i }, o) => /* @__PURE__ */ r("div", {
	ref: o,
	className: e(a({ size: n }), t),
	...i
}));
o.displayName = "CarouselItem";
//#endregion
export { i as Carousel, o as CarouselItem };

//# sourceMappingURL=Carousel.js.map