@yamada-ui/pagination/dist/chunk-4DT6X722.mjs

Yamada UI pagination component

"use client"
import {
  PaginationItem
} from "./chunk-V3A6LHVY.mjs";
import {
  PaginationProvider,
  usePagination
} from "./chunk-ZOXC7X6K.mjs";

// src/pagination.tsx
import {
  forwardRef,
  omitThemeProps,
  ui,
  useComponentMultiStyle
} from "@yamada-ui/core";
import { useValue } from "@yamada-ui/use-value";
import { cx, dataAttr, handlerAll } from "@yamada-ui/utils";
import { useMemo } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
var Pagination = forwardRef((props, ref) => {
  const [styles, mergedProps] = useComponentMultiStyle("Pagination", props);
  const {
    className,
    boundaries,
    component: Component = PaginationItem,
    defaultPage,
    isDisabled,
    disabled = isDisabled,
    page,
    siblings,
    total,
    withControls: _withControls = true,
    withEdges: _withEdges = false,
    containerProps,
    controlNextProps,
    controlPrevProps,
    controlProps,
    edgeFirstProps,
    edgeLastProps,
    edgeProps,
    itemProps,
    onChange: onChangeProp,
    ...rest
  } = omitThemeProps(mergedProps);
  const withControls = useValue(_withControls);
  const withEdges = useValue(_withEdges);
  const { currentPage, range, onChange, onFirst, onLast, onNext, onPrev } = usePagination({
    boundaries,
    defaultPage,
    disabled,
    page,
    siblings,
    total,
    onChange: onChangeProp
  });
  const children = useMemo(
    () => range.map((page2, key) => /* @__PURE__ */ jsx(ui.li, { children: /* @__PURE__ */ jsx(
      Component,
      {
        "aria-label": page2 !== "ellipsis" ? `Go to page ${page2}` : void 0,
        active: currentPage === page2,
        disabled,
        ...itemProps,
        page: page2,
        onClick: handlerAll(
          itemProps == null ? void 0 : itemProps.onClick,
          page2 !== "ellipsis" ? () => onChange(page2) : void 0
        )
      }
    ) }, key)),
    [Component, currentPage, disabled, onChange, range, itemProps]
  );
  const css = {
    ...styles.container
  };
  return /* @__PURE__ */ jsx(PaginationProvider, { value: styles, children: /* @__PURE__ */ jsx(
    ui.nav,
    {
      ref,
      className: cx("ui-pagination", className),
      "data-disabled": dataAttr(disabled),
      __css: css,
      ...containerProps,
      children: /* @__PURE__ */ jsxs(
        ui.ul,
        {
          className: "ui-pagination-inner",
          "data-disabled": dataAttr(disabled),
          __css: {
            alignItems: "center",
            display: "flex",
            ...styles.inner
          },
          ...rest,
          children: [
            withEdges ? /* @__PURE__ */ jsx(ui.li, { children: /* @__PURE__ */ jsx(
              Component,
              {
                className: "ui-pagination__item--first",
                "aria-label": "Go to first page",
                disabled: disabled || currentPage === 1,
                page: "first",
                ...edgeProps,
                ...edgeFirstProps,
                onClick: handlerAll(
                  edgeProps == null ? void 0 : edgeProps.onClick,
                  edgeFirstProps == null ? void 0 : edgeFirstProps.onClick,
                  onFirst
                )
              }
            ) }) : null,
            withControls ? /* @__PURE__ */ jsx(ui.li, { children: /* @__PURE__ */ jsx(
              Component,
              {
                className: "ui-pagination__item--prev",
                "aria-label": "Go to previous page",
                disabled: disabled || currentPage === 1,
                page: "prev",
                ...controlProps,
                ...controlPrevProps,
                onClick: handlerAll(
                  controlProps == null ? void 0 : controlProps.onClick,
                  controlPrevProps == null ? void 0 : controlPrevProps.onClick,
                  onPrev
                )
              }
            ) }) : null,
            children,
            withControls ? /* @__PURE__ */ jsx(ui.li, { children: /* @__PURE__ */ jsx(
              Component,
              {
                className: "ui-pagination__item--next",
                "aria-label": "Go to next page",
                disabled: disabled || currentPage === total,
                page: "next",
                ...controlProps,
                ...controlNextProps,
                onClick: handlerAll(
                  controlProps == null ? void 0 : controlProps.onClick,
                  controlNextProps == null ? void 0 : controlNextProps.onClick,
                  onNext
                )
              }
            ) }) : null,
            withEdges ? /* @__PURE__ */ jsx(ui.li, { children: /* @__PURE__ */ jsx(
              Component,
              {
                className: "ui-pagination__item--last",
                "aria-label": "Go to last page",
                disabled: disabled || currentPage === total,
                page: "last",
                ...edgeProps,
                ...edgeLastProps,
                onClick: handlerAll(
                  edgeProps == null ? void 0 : edgeProps.onClick,
                  edgeLastProps == null ? void 0 : edgeLastProps.onClick,
                  onLast
                )
              }
            ) }) : null
          ]
        }
      )
    }
  ) });
});
Pagination.displayName = "Pagination";
Pagination.__ui__ = "Pagination";

export {
  Pagination
};
//# sourceMappingURL=chunk-4DT6X722.mjs.map