@serendie/ui/dist/components/Pagination/Pagination.js

Adaptive UI component library as part of Serendie Design System by Mitsubishi Electric

import { jsx as e, jsxs as _, Fragment as h } from "react/jsx-runtime";
import { pagination_exports as s } from "../../node_modules/@ark-ui/react/dist/components/pagination/pagination.js";
import { SerendieSymbolChevronLeft as I, SerendieSymbolChevronRight as N } from "@serendie/symbols";
import j, { useState as z } from "react";
import { IconButton as m } from "../IconButton/IconButton.js";
import { useTranslations as R } from "../../i18n/index.js";
import { cx as w } from "../../styled-system/css/cx.js";
import { sva as O } from "../../styled-system/css/sva.js";
const W = O({
  slots: ["root", "item", "ellipsis", "prevTrigger", "nextTrigger"],
  base: {
    root: {
      display: "flex",
      alignItems: "center",
      gap: "sd.system.dimension.spacing.none"
    },
    item: {
      height: 32,
      minWidth: 32,
      margin: 0,
      color: "sd.system.color.impression.primary",
      "&[data-selected]": {
        color: "sd.system.color.interaction.disabledOnSurface",
        fontWeight: "bold"
      }
    },
    ellipsis: {
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      height: 32,
      width: 32,
      textStyle: "sd.system.typography.body.medium_compact",
      _expanded: {
        textStyle: "sd.system.typography.body.medium_expanded"
      }
    },
    prevTrigger: {
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      _disabled: {
        "& svg": {
          color: "sd.system.color.interaction.disabledOnSurface"
        }
      }
    },
    nextTrigger: {
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      _disabled: {
        "& svg": {
          color: "sd.system.color.interaction.disabledOnSurface"
        }
      }
    }
  },
  variants: {
    size: {
      medium: {
        root: {
          gap: "sd.system.dimension.spacing.none"
        },
        item: {
          height: 32,
          minWidth: 32
        },
        ellipsis: {
          height: 32,
          width: 32
        }
      }
    }
  },
  defaultVariants: {
    size: "medium"
  }
}), A = j.forwardRef(
  ({
    count: p,
    pageSize: c = 1,
    page: l,
    onPageChange: g,
    siblingCount: y = 2,
    className: f,
    size: u = "medium",
    ...b
  }, P) => {
    const [x, v] = z(1), a = W({ size: u }), T = (i) => {
      l || v(i.page), g == null || g(i);
    }, t = R(), S = {
      count: p,
      pageSize: c,
      siblingCount: y,
      ...l ? { page: l } : { page: x },
      onPageChange: T
    };
    return /* @__PURE__ */ e(
      s.Root,
      {
        ref: P,
        className: w(a.root, f),
        ...S,
        ...b,
        children: /* @__PURE__ */ e(s.Context, { children: (i) => {
          const n = i.page <= 1, C = Math.ceil(p / c), o = i.page >= C;
          return /* @__PURE__ */ _(h, { children: [
            /* @__PURE__ */ e(
              s.PrevTrigger,
              {
                className: a.prevTrigger,
                disabled: n,
                asChild: !0,
                children: /* @__PURE__ */ e(
                  m,
                  {
                    icon: /* @__PURE__ */ e(I, {}),
                    shape: "rectangle",
                    styleType: "ghost",
                    size: "small",
                    "aria-label": t(n ? "pagination.firstPage" : "pagination.previousPage"),
                    disabled: n,
                    title: t(n ? "pagination.firstPage" : "pagination.previousPage")
                  }
                )
              }
            ),
            i.pages.map(
              (r, d) => r.type === "page" ? /* @__PURE__ */ e(
                s.Item,
                {
                  ...r,
                  className: a.item,
                  asChild: !0,
                  children: /* @__PURE__ */ e(
                    m,
                    {
                      icon: /* @__PURE__ */ e(h, { children: r.value }),
                      shape: "rectangle",
                      styleType: "ghost",
                      size: "small",
                      "aria-label": t("pagination.goToPage", {
                        page: r.value
                      }),
                      title: t("pagination.goToPage", { page: r.value })
                    }
                  )
                },
                d
              ) : /* @__PURE__ */ e(
                s.Ellipsis,
                {
                  index: d,
                  className: a.ellipsis,
                  children: "…"
                },
                d
              )
            ),
            /* @__PURE__ */ e(
              s.NextTrigger,
              {
                className: a.nextTrigger,
                disabled: o,
                asChild: !0,
                children: /* @__PURE__ */ e(
                  m,
                  {
                    icon: /* @__PURE__ */ e(N, {}),
                    shape: "rectangle",
                    styleType: "ghost",
                    size: "small",
                    "aria-label": t(o ? "pagination.lastPage" : "pagination.nextPage"),
                    disabled: o,
                    title: t(o ? "pagination.lastPage" : "pagination.nextPage")
                  }
                )
              }
            )
          ] });
        } })
      }
    );
  }
);
export {
  A as Pagination,
  W as PaginationStyle
};