@undp/design-system-react/dist/Pagination-CDJc--e5.js

React based design system for UNDP

import { t as e } from "./utils-ca9as9Ye.js";
import { t } from "./chevron-left-B_CGIw-p.js";
import { t as n } from "./chevron-right-De8BUaNW.js";
import { t as r } from "./ellipsis-Ctrzu3yc.js";
import i, { useEffect as a, useState as o } from "react";
import { jsx as s, jsxs as c } from "react/jsx-runtime";
//#region src/components/ui/Pagination/pagination.tsx
function l({ className: t, ...n }) {
	return /* @__PURE__ */ s("nav", {
		...n,
		"aria-label": "pagination",
		className: e("mx-auto flex w-full justify-center", t)
	});
}
l.displayName = "PaginationUnit";
var u = i.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ s("ul", {
	...n,
	ref: r,
	className: e("flex list-none flex-row items-center gap-1", t)
}));
u.displayName = "PaginationContent";
var d = i.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ s("li", {
	...n,
	ref: r,
	className: e("mr-2 last:mr-0", t)
}));
d.displayName = "PaginationItem";
function f({ className: t, children: n, ...r }) {
	return /* @__PURE__ */ s("button", {
		...r,
		type: "button",
		className: e("p-4 text-base text-content-primary", t),
		children: n
	});
}
f.displayName = "PaginationLink";
function p({ className: n, ...r }) {
	return /* @__PURE__ */ s(f, {
		...r,
		"aria-label": "Go to previous page",
		className: e("rounded-full bg-surface p-2 hover:bg-surface-hover rtl:scale-x-[-1]", n),
		children: /* @__PURE__ */ s(t, { className: "h-6 w-6 stroke-foreground" })
	});
}
p.displayName = "PaginationPrevious";
function m({ className: t, ...r }) {
	return /* @__PURE__ */ s(f, {
		...r,
		"aria-label": "Go to next page",
		className: e("rounded-full bg-surface p-2 hover:bg-surface-hover rtl:scale-x-[-1]", t),
		children: /* @__PURE__ */ s(n, { className: "h-6 w-6 stroke-foreground" })
	});
}
m.displayName = "PaginationNext";
function h({ className: t, ...n }) {
	return /* @__PURE__ */ c("span", {
		...n,
		"aria-hidden": !0,
		className: e("flex h-9 w-9 items-center justify-center", t),
		children: [/* @__PURE__ */ s(r, { className: "h-4 w-4 text-content-primary" }), /* @__PURE__ */ s("span", {
			className: "sr-only",
			children: "More pages"
		})]
	});
}
h.displayName = "PaginationEllipsis";
//#endregion
//#region src/components/ui/Pagination/index.tsx
var g = (e, t) => {
	let n = [];
	return t <= 7 ? Array.from({ length: t }, (e, t) => t + 1) : (n.push(1), e <= 3 ? n.push(2, 3, 4, "ellipsis") : e >= t - 2 ? n.push("ellipsis", t - 3, t - 2, t - 1) : n.push("ellipsis", e - 1, e, e + 1, "ellipsis"), n.push(t), n);
};
function _(t) {
	let { defaultPage: n = 1, total: r, pageSize: i, onChange: _, className: v, classNames: y } = t, b = Math.ceil(r / i), [x, S] = o(n), [C, w] = o(g(n, b));
	return a(() => {
		w(g(x, b));
	}, [x, b]), /* @__PURE__ */ s(l, {
		className: e("select-none", v, y?.control),
		children: /* @__PURE__ */ c(u, { children: [
			/* @__PURE__ */ s(d, { children: /* @__PURE__ */ s(p, {
				onClick: () => {
					x > 1 && (_(x - 1), S(x - 1));
				},
				className: e("cursor-pointer", y?.navigation, x <= 1 && "pointer-events-none cursor-not-allowed opacity-35")
			}) }),
			C.map((t) => /* @__PURE__ */ s(d, { children: t === "ellipsis" ? /* @__PURE__ */ s(h, { className: y?.ellipsis }) : /* @__PURE__ */ s(f, {
				onClick: () => {
					S(t), _(t);
				},
				className: e("flex h-[32px] w-[32px] cursor-pointer items-center justify-center rounded-full hover:bg-surface-hover", y?.list, t === x && ["bg-secondary text-content-reverse hover:bg-secondary-hover", y?.active]),
				children: t
			}) }, t)),
			/* @__PURE__ */ s(d, { children: /* @__PURE__ */ s(m, {
				onClick: () => {
					x < b && (_(x + 1), S(x + 1));
				},
				className: e("cursor-pointer", y?.navigation, x >= b && "pointer-events-none cursor-not-allowed opacity-35")
			}) })
		] })
	});
}
//#endregion
export { _ as t };

//# sourceMappingURL=Pagination-CDJc--e5.js.map