@clubmed/trident-ui/ui/Pagination.js

Shared ClubMed React UI components

"use client";
import { jsx as e, jsxs as s } from "react/jsx-runtime";
import { c as l } from "../chunks/clsx.js";
import { Fragment as k } from "react";
import { generatePagination as y, showMobileEllipsis as b, hidePageButtonForMobile as N } from "./Pagination.helper.js";
import { Button as x } from "./buttons/Button.js";
import { Icon as h } from "@clubmed/trident-icons";
const j = () => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
  "div",
  {
    "aria-controls": "page-content",
    className: "text-base mx-8 ml-4 hidden size-48 items-center justify-center text-b3 font-semibold text-black md:flex",
    children: "…"
  }
) }, "desktop-ellipsis"), u = () => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
  "div",
  {
    "aria-controls": "page-content",
    className: "text-base mx-8 ml-4 flex size-48 items-center justify-center text-b3 font-semibold text-black md:hidden",
    children: "…"
  }
) }, "mobile-ellipsis"), E = ({
  defaultPage: i,
  buttonClassName: c = "md:mr-32",
  buttonLabelClassName: o = "md:flex",
  className: p,
  labels: d = {},
  onChange: n,
  paginationFactory: v = y,
  count: r,
  ...f
}) => {
  const m = v(i, r);
  return /* @__PURE__ */ e(
    "nav",
    {
      ...f,
      "data-name": "Pagination",
      role: "navigation",
      "aria-label": "pagination navigation",
      className: l("flex justify-center border-t-sand", p),
      children: /* @__PURE__ */ e("ul", { className: "mt-12 flex", children: m.map((t, a) => {
        switch (t.type) {
          case "pageNumber":
            return /* @__PURE__ */ s(k, { children: [
              t.value === r && b(t.value, i, r) && /* @__PURE__ */ e(u, {}),
              /* @__PURE__ */ e(
                "li",
                {
                  className: l("mr-2", {
                    "hidden md:flex": N(t.value, i, r)
                  }),
                  children: t.value === i ? /* @__PURE__ */ e(
                    x,
                    {
                      "aria-current": "page",
                      className: "text-white",
                      color: "black",
                      variant: "circle",
                      children: t.value.toString()
                    }
                  ) : /* @__PURE__ */ e(
                    x,
                    {
                      className: l("size-48 items-center", {
                        "mx-8 flex shrink-0 cursor-pointer justify-center self-start": a === m.length - 1
                      }),
                      onClick: () => n(t.value),
                      color: "white",
                      variant: "circle",
                      children: t.value.toString()
                    }
                  )
                }
              ),
              t.value === 1 && b(t.value, i, r) && /* @__PURE__ */ e(u, {})
            ] }, `pagination-pageNumber-${a}`);
          case "ellipsis":
            return /* @__PURE__ */ e(j, {}, `pagination-ellipsis-${a}`);
          case "previousButton":
            return /* @__PURE__ */ e("li", { className: l(c), children: /* @__PURE__ */ s(
              "button",
              {
                "data-action": "previous",
                "aria-controls": "page-content",
                "aria-label": `page ${i - 1}`,
                className: l(
                  "text:black text-base mx-8 flex h-48 shrink-0 items-center justify-center self-start text-b3 font-semibold active:text-black-active disabled:text-grey hocus:text-black-active",
                  {
                    "pointer-events-none disabled:text-grey": t.disabled
                  }
                ),
                disabled: t.disabled,
                onClick: () => n(i - 1),
                type: "button",
                children: [
                  /* @__PURE__ */ e(h, { name: "ArrowDefaultLeft", width: "30px" }),
                  /* @__PURE__ */ e(
                    "span",
                    {
                      className: l(
                        "ml-4 hidden border-b",
                        { "border-black": !t.disabled },
                        o
                      ),
                      children: d.previous
                    }
                  )
                ]
              }
            ) }, "pagination-labels.previous");
          case "nextButton":
            return /* @__PURE__ */ e("li", { className: l(c), children: /* @__PURE__ */ s(
              "button",
              {
                "aria-controls": "page-content",
                "aria-label": `page ${i + 1}`,
                className: l(
                  "text:black mb-5 text-base mx-8 flex h-48 shrink-0 items-center justify-center self-start text-b3 font-semibold active:text-black-active disabled:text-grey hocus:text-black-active",
                  {
                    "pointer-events-none disabled:text-grey": t.disabled
                  }
                ),
                "data-action": "next",
                disabled: t.disabled,
                onClick: () => n(i + 1),
                type: "button",
                children: [
                  /* @__PURE__ */ e(
                    "span",
                    {
                      className: l(
                        "ml-4 hidden border-b",
                        { "border-black": !t.disabled },
                        o
                      ),
                      children: d.next
                    }
                  ),
                  /* @__PURE__ */ e(h, { name: "ArrowDefaultRight", width: "30px" })
                ]
              }
            ) }, "pagination-labels.next");
          default:
            return null;
        }
      }) })
    }
  );
};
export {
  E as Pagination
};
//# sourceMappingURL=Pagination.js.map