@undp/design-system-react
Version:
React based design system for UNDP
195 lines (194 loc) • 7.43 kB
JavaScript
import { t as e } from "./utils-ca9as9Ye.js";
import { t } from "./dist-CQzJbxrW.js";
import { t as n } from "./createLucideIcon-JAvQ_M0R.js";
import { t as r } from "./chevron-left-B_CGIw-p.js";
import { t as i } from "./chevron-right-De8BUaNW.js";
import { P as a } from "./Typography.js";
import { forwardRef as o, useEffect as s, useRef as c, useState as l } from "react";
import { jsx as u, jsxs as d } from "react/jsx-runtime";
var f = n("pause", [["rect", {
x: "14",
y: "3",
width: "5",
height: "18",
rx: "1",
key: "kaeet6"
}], ["rect", {
x: "5",
y: "3",
width: "5",
height: "18",
rx: "1",
key: "1wsw3u"
}]]), p = n("play", [["path", {
d: "M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z",
key: "10ikf1"
}]]), m = t("flex box-border justify-between", {
variants: { vizWidth: {
xs: "w-3/4 flex-col pr-0 @2xl:pr-2 rtl:pr-0 @2xl:rtl:pl-2 rtl:pl-0 gap-4 min-w-60 grow pb-8 @2xl:pb-4",
sm: "w-2/3 flex-col pr-0 @2xl:pr-2 rtl:pr-0 @2xl:rtl:pl-2 rtl:pl-0 gap-4 min-w-60 grow pb-8 @2xl:pb-4",
base: "w-1/2 flex-col pr-0 @2xl:pr-2 rtl:pr-0 @2xl:rtl:pl-2 rtl:pl-0 gap-4 min-w-60 grow pb-8 @2xl:pb-4",
lg: "w-1/3 flex-col pr-0 @2xl:pr-2 rtl:pr-0 @2xl:rtl:pl-2 rtl:pl-0 gap-4 min-w-60 grow pb-8 @2xl:pb-4",
xl: "w-1/4 flex-col pr-0 @2xl:pr-2 rtl:pr-0 @2xl:rtl:pl-2 rtl:pl-0 gap-4 min-w-60 grow pb-8 @2xl:pb-4",
full: "w-full shrink-0 items-start gap-x-8 gap-y-4 mb-4 flex-wrap @2xl:flex-nowrap"
} },
defaultVariants: { vizWidth: "base" }
}), h = t("flex box-border grow shrink-0", {
variants: { vizWidth: {
xs: "w-1/4 pl-0 @2xl:pl-2 rtl:pr-0 rtl:pl-0 @2xl:rtl:pr-2 min-w-60 pb-0 @2xl:pb-4",
sm: "w-1/3 pl-0 @2xl:pl-2 rtl:pr-0 rtl:pl-0 @2xl:rtl:pr-2 min-w-60 pb-0 @2xl:pb-4",
base: "w-1/2 pl-0 @2xl:pl-2 rtl:pr-0 rtl:pl-0 @2xl:rtl:pr-2 min-w-60 pb-0 @2xl:pb-4",
lg: "w-2/3 pl-0 @2xl:pl-2 rtl:pr-0 rtl:pl-0 @2xl:rtl:pr-2 min-w-60 pb-0 @2xl:pb-4",
xl: "w-3/4 pl-0 @2xl:pl-2 rtl:pr-0 rtl:pl-0 @2xl:rtl:pr-2 min-w-60 pb-0 @2xl:pb-4",
full: "w-full"
} },
defaultVariants: { vizWidth: "base" }
}), g = o(({ className: t, vizWidth: n, slides: o, styles: g, classNames: _, slideNo: v = !0, autoScroll: y = !1, ...b }, x) => {
let S = c(null), C = c([]), w = c(null), [T, E] = l(!1), [D, O] = l(!1), [k, A] = l(1), [j, M] = l(0);
return s(() => {
let e = new IntersectionObserver((e) => {
let t = e.filter((e) => e.isIntersecting).sort((e, t) => t.intersectionRatio - e.intersectionRatio);
if (t.length > 0) {
let e = C.current.findIndex((e) => e === t[0].target);
e !== -1 && A(e + 1);
}
}, {
root: S.current,
threshold: 1
});
return C.current.forEach((t) => {
t && e.observe(t);
}), () => {
C.current.forEach((t) => {
t && e.unobserve(t);
});
};
}, []), s(() => {
if (!y) return;
let e = typeof y == "number" ? y : 5e3, t = j;
return w.current && clearInterval(w.current), !T && !D && (w.current = setInterval(() => {
if (t += 50 / e * 100, t >= 100) {
if (t = 0, M(0), !S.current) return;
let e = S.current.closest("[dir]")?.getAttribute("dir") === "rtl", n = e ? -280 : 280;
k === o.length ? (S.current.scrollTo({
left: e ? S.current.scrollWidth : 0,
behavior: "smooth"
}), A(1)) : (S.current.scrollBy({
left: n,
behavior: "smooth"
}), A((e) => e + 1));
} else M(t);
}, 50)), () => {
w.current && clearInterval(w.current);
};
}, [
y,
D,
T,
k,
o.length,
j
]), /* @__PURE__ */ d("div", {
ref: x,
onMouseEnter: () => O(!0),
onMouseLeave: () => O(!1),
className: "@container w-full",
children: [y ? /* @__PURE__ */ u("div", {
className: e("mb-4 h-4 w-full overflow-hidden rounded-full bg-surface-sm", _?.progressBarBg),
style: g?.progressBarBg,
children: /* @__PURE__ */ u("div", {
className: e("h-full bg-accent-yellow transition-all duration-100 ease-linear", _?.progressBar),
style: {
...g?.progressBar,
width: `${j}%`
}
})
}) : null, /* @__PURE__ */ u("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 gap-6 overflow-x-auto pb-4", t),
...b,
children: o.map((t, s) => /* @__PURE__ */ d("div", {
ref: (e) => {
C.current[s] = e;
},
className: `box-border flex w-full shrink-0 snap-start flex-wrap ${n === "full" ? "flex-col items-start" : "flex-row items-stretch"}`,
children: [/* @__PURE__ */ d("div", {
style: g?.content,
className: e(m({ vizWidth: n }), _?.content),
children: [/* @__PURE__ */ u("div", {
className: "min-w-60 grow sm:grow-0",
children: t.content
}), /* @__PURE__ */ d("div", {
className: `flex ${v ? "gap-2" : "gap-3"} shrink-0 items-center`,
children: [
/* @__PURE__ */ u("button", {
style: g?.arrowButton,
type: "button",
className: e("flex @3xl:h-12 h-9 @3xl:w-12 w-9 items-center justify-center rounded-full border-0 bg-foreground pr-1 rtl:rotate-180", k === 1 ? "cursor-not-allowed opacity-disabled" : "cursor-pointer hover:bg-forground-soft", _?.arrowButton),
onClick: () => {
if (S.current && k !== 1) {
let e = S.current.closest("[dir]")?.getAttribute("dir") === "rtl" ? 280 : -280;
A(k - 1), S.current.scrollBy(e, 0);
}
},
children: /* @__PURE__ */ u(r, {
style: g?.arrows,
className: e("h-6 w-6 text-content-reverse", _?.arrows)
})
}),
v ? /* @__PURE__ */ d(a, {
marginBottom: "none",
className: "shrink-0 px-2!",
children: [
k,
" / ",
o.length
]
}) : null,
/* @__PURE__ */ u("button", {
className: e("flex @3xl:h-12 h-9 @3xl:w-12 w-9 items-center justify-center rounded-full border-0 bg-foreground pl-1 rtl:rotate-180", k === o.length ? "cursor-not-allowed opacity-disabled" : "cursor-pointer hover:bg-forground-soft", _?.arrowButton),
type: "button",
style: g?.arrowButton,
onClick: () => {
if (S.current && k !== o.length) {
let e = S.current.closest("[dir]")?.getAttribute("dir") === "rtl" ? -280 : 280;
A(k + 1), S.current.scrollBy(e, 0);
}
},
children: /* @__PURE__ */ u(i, {
style: g?.arrows,
className: e("h-6 w-6 text-content-reverse", _?.arrows)
})
}),
y ? /* @__PURE__ */ u("button", {
type: "button",
style: g?.playPauseButton,
className: e("flex @3xl:h-12 h-9 @3xl:w-12 w-9 cursor-pointer items-center justify-center rounded-full border-2 border-stroke-2xl bg-transparent hover:bg-surface-hover", _?.playPauseButton),
onClick: () => {
E(!T);
},
children: T ? /* @__PURE__ */ u(p, {
style: g?.playPauseIcon,
strokeWidth: 2,
className: e("h-6 w-6 text-content-primary", _?.playPauseIcon)
}) : /* @__PURE__ */ u(f, {
strokeWidth: 2,
style: g?.playPauseIcon,
className: e("h-6 w-6 text-content-primary", _?.playPauseIcon)
})
}) : null
]
})]
}), /* @__PURE__ */ u("div", {
style: g?.viz,
className: e(h({ vizWidth: n }), _?.viz),
children: t.viz
})]
}, `slide_no_${s}`))
})]
});
});
g.displayName = "VizCarousel";
//#endregion
export { g as t };
//# sourceMappingURL=viz-carousel-wc4MajpU.js.map