@yamada-ui/pagination 0.1.0

package/dist/index.mjs

@@ -0,0 +1,9 @@
+import {
+  Pagination
+} from "./chunk-OQAHPAGR.mjs";
+import "./chunk-3JXQPHJH.mjs";
+import "./chunk-IXTXZCRI.mjs";
+import "./chunk-3KNXDAHV.mjs";
+export {
+  Pagination
+};

package/dist/pagination-icon.d.ts

@@ -0,0 +1,10 @@
+import { IconProps } from '@yamada-ui/icon';
+import { FC } from 'react';
+
+declare const DotsIcon: FC<IconProps>;
+declare const FirstIcon: FC<IconProps>;
+declare const LastIcon: FC<IconProps>;
+declare const PrevIcon: FC<IconProps>;
+declare const NextIcon: FC<IconProps>;
+
+export { DotsIcon, FirstIcon, LastIcon, NextIcon, PrevIcon };

package/dist/pagination-icon.js

@@ -0,0 +1,84 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/pagination-icon.tsx
+var pagination_icon_exports = {};
+__export(pagination_icon_exports, {
+  DotsIcon: () => DotsIcon,
+  FirstIcon: () => FirstIcon,
+  LastIcon: () => LastIcon,
+  NextIcon: () => NextIcon,
+  PrevIcon: () => PrevIcon
+});
+module.exports = __toCommonJS(pagination_icon_exports);
+var import_icon = require("@yamada-ui/icon");
+var import_jsx_runtime = require("react/jsx-runtime");
+var DotsIcon = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, { viewBox: "0 0 16 16", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "path",
+    {
+      fill: "currentColor",
+      d: "M2 8c0-.733.6-1.333 1.333-1.333.734 0 1.334.6 1.334 1.333s-.6 1.333-1.334 1.333C2.6 9.333 2 8.733 2 8zm9.333 0c0-.733.6-1.333 1.334-1.333C13.4 6.667 14 7.267 14 8s-.6 1.333-1.333 1.333c-.734 0-1.334-.6-1.334-1.333zM6.667 8c0-.733.6-1.333 1.333-1.333s1.333.6 1.333 1.333S8.733 9.333 8 9.333 6.667 8.733 6.667 8z"
+    }
+  ) });
+};
+var FirstIcon = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, { viewBox: "0 0 16 16", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "path",
+    {
+      fill: "currentColor",
+      d: "M6.85355 3.85355C7.04882 3.65829 7.04882 3.34171 6.85355 3.14645C6.65829 2.95118 6.34171 2.95118 6.14645 3.14645L2.14645 7.14645C1.95118 7.34171 1.95118 7.65829 2.14645 7.85355L6.14645 11.8536C6.34171 12.0488 6.65829 12.0488 6.85355 11.8536C7.04882 11.6583 7.04882 11.3417 6.85355 11.1464L3.20711 7.5L6.85355 3.85355ZM12.8536 3.85355C13.0488 3.65829 13.0488 3.34171 12.8536 3.14645C12.6583 2.95118 12.3417 2.95118 12.1464 3.14645L8.14645 7.14645C7.95118 7.34171 7.95118 7.65829 8.14645 7.85355L12.1464 11.8536C12.3417 12.0488 12.6583 12.0488 12.8536 11.8536C13.0488 11.6583 13.0488 11.3417 12.8536 11.1464L9.20711 7.5L12.8536 3.85355Z"
+    }
+  ) });
+};
+var LastIcon = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, { viewBox: "0 0 16 16", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "path",
+    {
+      fill: "currentColor",
+      d: "M2.14645 11.1464C1.95118 11.3417 1.95118 11.6583 2.14645 11.8536C2.34171 12.0488 2.65829 12.0488 2.85355 11.8536L6.85355 7.85355C7.04882 7.65829 7.04882 7.34171 6.85355 7.14645L2.85355 3.14645C2.65829 2.95118 2.34171 2.95118 2.14645 3.14645C1.95118 3.34171 1.95118 3.65829 2.14645 3.85355L5.79289 7.5L2.14645 11.1464ZM8.14645 11.1464C7.95118 11.3417 7.95118 11.6583 8.14645 11.8536C8.34171 12.0488 8.65829 12.0488 8.85355 11.8536L12.8536 7.85355C13.0488 7.65829 13.0488 7.34171 12.8536 7.14645L8.85355 3.14645C8.65829 2.95118 8.34171 2.95118 8.14645 3.14645C7.95118 3.34171 7.95118 3.65829 8.14645 3.85355L11.7929 7.5L8.14645 11.1464Z"
+    }
+  ) });
+};
+var PrevIcon = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, { viewBox: "0 0 16 16", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "path",
+    {
+      fill: "currentColor",
+      d: "M7.219 8l3.3 3.3-.943.943L5.333 8l4.243-4.243.943.943-3.3 3.3z"
+    }
+  ) });
+};
+var NextIcon = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, { viewBox: "0 0 16 16", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "path",
+    {
+      fill: "currentColor",
+      d: "M8.781 8l-3.3-3.3.943-.943L10.667 8l-4.243 4.243-.943-.943 3.3-3.3z"
+    }
+  ) });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DotsIcon,
+  FirstIcon,
+  LastIcon,
+  NextIcon,
+  PrevIcon
+});

package/dist/pagination-icon.mjs

@@ -0,0 +1,14 @@
+import {
+  DotsIcon,
+  FirstIcon,
+  LastIcon,
+  NextIcon,
+  PrevIcon
+} from "./chunk-IXTXZCRI.mjs";
+export {
+  DotsIcon,
+  FirstIcon,
+  LastIcon,
+  NextIcon,
+  PrevIcon
+};

package/dist/pagination-item.d.ts

@@ -0,0 +1,12 @@
+import { ComponentPropsWithoutRef, FC } from 'react';
+
+type Page = number | 'dots' | 'prev' | 'next' | 'first' | 'last';
+type PaginationItemOptions = {
+    page: Page;
+    isActive?: boolean;
+    isDisabled?: boolean;
+};
+type PaginationItemProps = ComponentPropsWithoutRef<'button'> & PaginationItemOptions;
+declare const PaginationItem: FC<PaginationItemProps>;
+
+export { PaginationItem, PaginationItemProps };

package/dist/pagination-item.js

@@ -0,0 +1,133 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/pagination-item.tsx
+var pagination_item_exports = {};
+__export(pagination_item_exports, {
+  PaginationItem: () => PaginationItem
+});
+module.exports = __toCommonJS(pagination_item_exports);
+var import_core = require("@yamada-ui/core");
+var import_utils2 = require("@yamada-ui/utils");
+
+// src/pagination-icon.tsx
+var import_icon = require("@yamada-ui/icon");
+var import_jsx_runtime = require("react/jsx-runtime");
+var DotsIcon = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, { viewBox: "0 0 16 16", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "path",
+    {
+      fill: "currentColor",
+      d: "M2 8c0-.733.6-1.333 1.333-1.333.734 0 1.334.6 1.334 1.333s-.6 1.333-1.334 1.333C2.6 9.333 2 8.733 2 8zm9.333 0c0-.733.6-1.333 1.334-1.333C13.4 6.667 14 7.267 14 8s-.6 1.333-1.333 1.333c-.734 0-1.334-.6-1.334-1.333zM6.667 8c0-.733.6-1.333 1.333-1.333s1.333.6 1.333 1.333S8.733 9.333 8 9.333 6.667 8.733 6.667 8z"
+    }
+  ) });
+};
+var FirstIcon = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, { viewBox: "0 0 16 16", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "path",
+    {
+      fill: "currentColor",
+      d: "M6.85355 3.85355C7.04882 3.65829 7.04882 3.34171 6.85355 3.14645C6.65829 2.95118 6.34171 2.95118 6.14645 3.14645L2.14645 7.14645C1.95118 7.34171 1.95118 7.65829 2.14645 7.85355L6.14645 11.8536C6.34171 12.0488 6.65829 12.0488 6.85355 11.8536C7.04882 11.6583 7.04882 11.3417 6.85355 11.1464L3.20711 7.5L6.85355 3.85355ZM12.8536 3.85355C13.0488 3.65829 13.0488 3.34171 12.8536 3.14645C12.6583 2.95118 12.3417 2.95118 12.1464 3.14645L8.14645 7.14645C7.95118 7.34171 7.95118 7.65829 8.14645 7.85355L12.1464 11.8536C12.3417 12.0488 12.6583 12.0488 12.8536 11.8536C13.0488 11.6583 13.0488 11.3417 12.8536 11.1464L9.20711 7.5L12.8536 3.85355Z"
+    }
+  ) });
+};
+var LastIcon = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, { viewBox: "0 0 16 16", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "path",
+    {
+      fill: "currentColor",
+      d: "M2.14645 11.1464C1.95118 11.3417 1.95118 11.6583 2.14645 11.8536C2.34171 12.0488 2.65829 12.0488 2.85355 11.8536L6.85355 7.85355C7.04882 7.65829 7.04882 7.34171 6.85355 7.14645L2.85355 3.14645C2.65829 2.95118 2.34171 2.95118 2.14645 3.14645C1.95118 3.34171 1.95118 3.65829 2.14645 3.85355L5.79289 7.5L2.14645 11.1464ZM8.14645 11.1464C7.95118 11.3417 7.95118 11.6583 8.14645 11.8536C8.34171 12.0488 8.65829 12.0488 8.85355 11.8536L12.8536 7.85355C13.0488 7.65829 13.0488 7.34171 12.8536 7.14645L8.85355 3.14645C8.65829 2.95118 8.34171 2.95118 8.14645 3.14645C7.95118 3.34171 7.95118 3.65829 8.14645 3.85355L11.7929 7.5L8.14645 11.1464Z"
+    }
+  ) });
+};
+var PrevIcon = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, { viewBox: "0 0 16 16", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "path",
+    {
+      fill: "currentColor",
+      d: "M7.219 8l3.3 3.3-.943.943L5.333 8l4.243-4.243.943.943-3.3 3.3z"
+    }
+  ) });
+};
+var NextIcon = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, { viewBox: "0 0 16 16", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "path",
+    {
+      fill: "currentColor",
+      d: "M8.781 8l-3.3-3.3.943-.943L10.667 8l-4.243 4.243-.943-.943 3.3-3.3z"
+    }
+  ) });
+};
+
+// src/use-pagination.ts
+var import_use_controllable_state = require("@yamada-ui/use-controllable-state");
+var import_use_value = require("@yamada-ui/use-value");
+var import_utils = require("@yamada-ui/utils");
+var import_react = require("react");
+var [PaginationProvider, usePaginationContext] = (0, import_utils.createContext)({
+  strict: false,
+  name: "PaginationContext"
+});
+
+// src/pagination-item.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var iconMap = {
+  dots: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(DotsIcon, {}),
+  next: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(NextIcon, {}),
+  prev: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PrevIcon, {}),
+  first: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FirstIcon, {}),
+  last: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(LastIcon, {})
+};
+var PaginationItem = ({
+  className,
+  isActive,
+  page,
+  isDisabled,
+  children,
+  ...rest
+}) => {
+  var _a;
+  const styles = usePaginationContext();
+  children != null ? children : children = (_a = iconMap[page]) != null ? _a : page;
+  const css = {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    ...styles.item,
+    ...styles[page]
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_core.ui.button,
+    {
+      className: (0, import_utils2.cx)("ui-pagination-item", className),
+      type: "button",
+      tabIndex: page !== "dots" ? 0 : -1,
+      disabled: isDisabled,
+      "data-selected": (0, import_utils2.dataAttr)(isActive),
+      "data-disabled": (0, import_utils2.dataAttr)(isDisabled),
+      __css: css,
+      ...rest,
+      children
+    }
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PaginationItem
+});

package/dist/pagination-item.mjs

@@ -0,0 +1,8 @@
+import {
+  PaginationItem
+} from "./chunk-3JXQPHJH.mjs";
+import "./chunk-IXTXZCRI.mjs";
+import "./chunk-3KNXDAHV.mjs";
+export {
+  PaginationItem
+};

package/dist/pagination.d.ts

@@ -0,0 +1,22 @@
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { HTMLUIProps, ThemeProps, Token } from '@yamada-ui/core';
+import { FC } from 'react';
+import { PaginationItemProps } from './pagination-item.js';
+import { UsePaginationProps } from './use-pagination.js';
+
+type PaginationOptions = {
+    component?: FC<PaginationItemProps>;
+    itemProps?: HTMLUIProps<'button'>;
+    withControls?: Token<boolean>;
+    controlProps?: HTMLUIProps<'button'>;
+    controlPrevProps?: HTMLUIProps<'button'>;
+    controlNextProps?: HTMLUIProps<'button'>;
+    withEdges?: Token<boolean>;
+    edgeProps?: HTMLUIProps<'button'>;
+    edgeFirstProps?: HTMLUIProps<'button'>;
+    edgeLastProps?: HTMLUIProps<'button'>;
+};
+type PaginationProps = Omit<HTMLUIProps<'div'>, 'onChange' | 'children'> & ThemeProps<'Pagination'> & UsePaginationProps & PaginationOptions;
+declare const Pagination: _yamada_ui_core.Component<"div", PaginationProps>;
+
+export { Pagination, PaginationProps };

package/dist/pagination.js

@@ -0,0 +1,310 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/pagination.tsx
+var pagination_exports = {};
+__export(pagination_exports, {
+  Pagination: () => Pagination
+});
+module.exports = __toCommonJS(pagination_exports);
+var import_core2 = require("@yamada-ui/core");
+var import_use_value2 = require("@yamada-ui/use-value");
+var import_utils3 = require("@yamada-ui/utils");
+var import_react2 = require("react");
+
+// src/pagination-item.tsx
+var import_core = require("@yamada-ui/core");
+var import_utils2 = require("@yamada-ui/utils");
+
+// src/pagination-icon.tsx
+var import_icon = require("@yamada-ui/icon");
+var import_jsx_runtime = require("react/jsx-runtime");
+var DotsIcon = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, { viewBox: "0 0 16 16", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "path",
+    {
+      fill: "currentColor",
+      d: "M2 8c0-.733.6-1.333 1.333-1.333.734 0 1.334.6 1.334 1.333s-.6 1.333-1.334 1.333C2.6 9.333 2 8.733 2 8zm9.333 0c0-.733.6-1.333 1.334-1.333C13.4 6.667 14 7.267 14 8s-.6 1.333-1.333 1.333c-.734 0-1.334-.6-1.334-1.333zM6.667 8c0-.733.6-1.333 1.333-1.333s1.333.6 1.333 1.333S8.733 9.333 8 9.333 6.667 8.733 6.667 8z"
+    }
+  ) });
+};
+var FirstIcon = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, { viewBox: "0 0 16 16", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "path",
+    {
+      fill: "currentColor",
+      d: "M6.85355 3.85355C7.04882 3.65829 7.04882 3.34171 6.85355 3.14645C6.65829 2.95118 6.34171 2.95118 6.14645 3.14645L2.14645 7.14645C1.95118 7.34171 1.95118 7.65829 2.14645 7.85355L6.14645 11.8536C6.34171 12.0488 6.65829 12.0488 6.85355 11.8536C7.04882 11.6583 7.04882 11.3417 6.85355 11.1464L3.20711 7.5L6.85355 3.85355ZM12.8536 3.85355C13.0488 3.65829 13.0488 3.34171 12.8536 3.14645C12.6583 2.95118 12.3417 2.95118 12.1464 3.14645L8.14645 7.14645C7.95118 7.34171 7.95118 7.65829 8.14645 7.85355L12.1464 11.8536C12.3417 12.0488 12.6583 12.0488 12.8536 11.8536C13.0488 11.6583 13.0488 11.3417 12.8536 11.1464L9.20711 7.5L12.8536 3.85355Z"
+    }
+  ) });
+};
+var LastIcon = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, { viewBox: "0 0 16 16", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "path",
+    {
+      fill: "currentColor",
+      d: "M2.14645 11.1464C1.95118 11.3417 1.95118 11.6583 2.14645 11.8536C2.34171 12.0488 2.65829 12.0488 2.85355 11.8536L6.85355 7.85355C7.04882 7.65829 7.04882 7.34171 6.85355 7.14645L2.85355 3.14645C2.65829 2.95118 2.34171 2.95118 2.14645 3.14645C1.95118 3.34171 1.95118 3.65829 2.14645 3.85355L5.79289 7.5L2.14645 11.1464ZM8.14645 11.1464C7.95118 11.3417 7.95118 11.6583 8.14645 11.8536C8.34171 12.0488 8.65829 12.0488 8.85355 11.8536L12.8536 7.85355C13.0488 7.65829 13.0488 7.34171 12.8536 7.14645L8.85355 3.14645C8.65829 2.95118 8.34171 2.95118 8.14645 3.14645C7.95118 3.34171 7.95118 3.65829 8.14645 3.85355L11.7929 7.5L8.14645 11.1464Z"
+    }
+  ) });
+};
+var PrevIcon = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, { viewBox: "0 0 16 16", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "path",
+    {
+      fill: "currentColor",
+      d: "M7.219 8l3.3 3.3-.943.943L5.333 8l4.243-4.243.943.943-3.3 3.3z"
+    }
+  ) });
+};
+var NextIcon = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, { viewBox: "0 0 16 16", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "path",
+    {
+      fill: "currentColor",
+      d: "M8.781 8l-3.3-3.3.943-.943L10.667 8l-4.243 4.243-.943-.943 3.3-3.3z"
+    }
+  ) });
+};
+
+// src/use-pagination.ts
+var import_use_controllable_state = require("@yamada-ui/use-controllable-state");
+var import_use_value = require("@yamada-ui/use-value");
+var import_utils = require("@yamada-ui/utils");
+var import_react = require("react");
+var [PaginationProvider, usePaginationContext] = (0, import_utils.createContext)({
+  strict: false,
+  name: "PaginationContext"
+});
+var computedRange = (start, end) => Array.from({ length: end - start + 1 }, (_, index) => index + start);
+var usePagination = ({
+  page,
+  defaultPage = 1,
+  total,
+  siblings = 1,
+  boundaries = 1,
+  isDisabled = false,
+  ...rest
+}) => {
+  const computedSiblings = (0, import_use_value.useValue)(siblings);
+  const computedBoundaries = (0, import_use_value.useValue)(boundaries);
+  const [currentPage, setCurrentPage] = (0, import_use_controllable_state.useControllableState)({
+    value: page,
+    defaultValue: defaultPage,
+    onChange: rest.onChange
+  });
+  const onFirst = (0, import_react.useCallback)(() => setCurrentPage(1), [setCurrentPage]);
+  const onLast = (0, import_react.useCallback)(() => setCurrentPage(total), [setCurrentPage, total]);
+  const onPrev = (0, import_react.useCallback)(
+    () => setCurrentPage((prev) => prev === 1 ? prev : prev - 1),
+    [setCurrentPage]
+  );
+  const onNext = (0, import_react.useCallback)(
+    () => setCurrentPage((prev) => prev === total ? prev : prev + 1),
+    [setCurrentPage, total]
+  );
+  const onChange = (0, import_react.useCallback)((page2) => setCurrentPage(page2), [setCurrentPage]);
+  const range = (0, import_react.useMemo)(() => {
+    const minimumTotal = computedSiblings * 2 + 3 + computedBoundaries * 2;
+    if (minimumTotal >= total)
+      return computedRange(1, total);
+    const prevSiblings = Math.max(currentPage - computedSiblings, computedBoundaries);
+    const nextSiblings = Math.min(currentPage + computedSiblings, total - computedBoundaries);
+    const prevDots = prevSiblings > computedBoundaries + 2;
+    const nextDots = nextSiblings < total - (computedBoundaries + 1);
+    if (!prevDots && nextDots) {
+      const prevPages = computedSiblings * 2 + computedBoundaries + 2;
+      return [
+        ...computedRange(1, prevPages),
+        "dots",
+        ...computedRange(total - (computedBoundaries - 1), total)
+      ];
+    }
+    if (prevDots && !nextDots) {
+      const nextPages = computedBoundaries + 1 + 2 * computedSiblings;
+      return [
+        ...computedRange(1, computedBoundaries),
+        "dots",
+        ...computedRange(total - nextPages, total)
+      ];
+    }
+    return [
+      ...computedRange(1, computedBoundaries),
+      "dots",
+      ...computedRange(prevSiblings, nextSiblings),
+      "dots",
+      ...computedRange(total - computedBoundaries + 1, total)
+    ];
+  }, [computedBoundaries, computedSiblings, currentPage, total]);
+  return {
+    currentPage,
+    total,
+    isDisabled,
+    onFirst,
+    onLast,
+    onPrev,
+    onNext,
+    onChange,
+    range
+  };
+};
+
+// src/pagination-item.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var iconMap = {
+  dots: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(DotsIcon, {}),
+  next: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(NextIcon, {}),
+  prev: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PrevIcon, {}),
+  first: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FirstIcon, {}),
+  last: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(LastIcon, {})
+};
+var PaginationItem = ({
+  className,
+  isActive,
+  page,
+  isDisabled,
+  children,
+  ...rest
+}) => {
+  var _a;
+  const styles = usePaginationContext();
+  children != null ? children : children = (_a = iconMap[page]) != null ? _a : page;
+  const css = {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    ...styles.item,
+    ...styles[page]
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_core.ui.button,
+    {
+      className: (0, import_utils2.cx)("ui-pagination-item", className),
+      type: "button",
+      tabIndex: page !== "dots" ? 0 : -1,
+      disabled: isDisabled,
+      "data-selected": (0, import_utils2.dataAttr)(isActive),
+      "data-disabled": (0, import_utils2.dataAttr)(isDisabled),
+      __css: css,
+      ...rest,
+      children
+    }
+  );
+};
+
+// src/pagination.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Pagination = (0, import_core2.forwardRef)((props, ref) => {
+  const [styles, mergedProps] = (0, import_core2.useMultiComponentStyle)("Pagination", props);
+  const {
+    className,
+    component: Component = PaginationItem,
+    itemProps,
+    withControls = true,
+    withEdges = false,
+    controlProps,
+    controlPrevProps,
+    controlNextProps,
+    edgeProps,
+    edgeFirstProps,
+    edgeLastProps,
+    ...rest
+  } = (0, import_core2.omitThemeProps)(mergedProps);
+  const computedWithControls = (0, import_use_value2.useValue)(withControls);
+  const computedWithEdges = (0, import_use_value2.useValue)(withEdges);
+  const { currentPage, total, isDisabled, onFirst, onLast, onPrev, onNext, onChange, range } = usePagination(rest);
+  const children = (0, import_react2.useMemo)(
+    () => range.map((page, key) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      Component,
+      {
+        page,
+        isActive: currentPage === page,
+        isDisabled,
+        ...itemProps,
+        onClick: (0, import_utils3.handlerAll)(
+          itemProps == null ? void 0 : itemProps.onClick,
+          page !== "dots" ? () => onChange(page) : void 0
+        )
+      },
+      key
+    )),
+    [Component, currentPage, isDisabled, onChange, range, itemProps]
+  );
+  const css = { display: "flex", alignItems: "center", ...styles.container };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PaginationProvider, { value: styles, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    import_core2.ui.div,
+    {
+      ref,
+      className: (0, import_utils3.cx)("ui-pagination", className),
+      role: "navigation",
+      __css: css,
+      ...(0, import_utils3.omitObject)(rest, ["onChange"]),
+      "data-disabled": (0, import_utils3.dataAttr)(isDisabled),
+      children: [
+        computedWithEdges ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          Component,
+          {
+            page: "first",
+            className: "ui-pagination-item-first",
+            isDisabled: isDisabled || currentPage === 1,
+            ...edgeProps,
+            ...edgeFirstProps,
+            onClick: (0, import_utils3.handlerAll)(edgeProps == null ? void 0 : edgeProps.onClick, edgeFirstProps == null ? void 0 : edgeFirstProps.onClick, onFirst)
+          }
+        ) : null,
+        computedWithControls ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          Component,
+          {
+            page: "prev",
+            className: "ui-pagination-item-prev",
+            isDisabled: isDisabled || currentPage === 1,
+            ...controlProps,
+            ...controlPrevProps,
+            onClick: (0, import_utils3.handlerAll)(controlProps == null ? void 0 : controlProps.onClick, controlPrevProps == null ? void 0 : controlPrevProps.onClick, onPrev)
+          }
+        ) : null,
+        children,
+        computedWithControls ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          Component,
+          {
+            page: "next",
+            className: "ui-pagination-item-next",
+            isDisabled: isDisabled || currentPage === total,
+            ...controlProps,
+            ...controlNextProps,
+            onClick: (0, import_utils3.handlerAll)(controlProps == null ? void 0 : controlProps.onClick, controlNextProps == null ? void 0 : controlNextProps.onClick, onNext)
+          }
+        ) : null,
+        computedWithEdges ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          Component,
+          {
+            page: "last",
+            className: "ui-pagination-item-last",
+            isDisabled: isDisabled || currentPage === total,
+            ...edgeProps,
+            ...edgeLastProps,
+            onClick: (0, import_utils3.handlerAll)(edgeProps == null ? void 0 : edgeProps.onClick, edgeLastProps == null ? void 0 : edgeLastProps.onClick, onLast)
+          }
+        ) : null
+      ]
+    }
+  ) });
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Pagination
+});

package/dist/pagination.mjs

@@ -0,0 +1,9 @@
+import {
+  Pagination
+} from "./chunk-OQAHPAGR.mjs";
+import "./chunk-3JXQPHJH.mjs";
+import "./chunk-IXTXZCRI.mjs";
+import "./chunk-3KNXDAHV.mjs";
+export {
+  Pagination
+};

package/dist/use-pagination.d.ts

@@ -0,0 +1,30 @@
+import * as react from 'react';
+import { Token, CSSUIObject } from '@yamada-ui/core';
+
+type PaginationContext = Record<string, CSSUIObject>;
+declare const PaginationProvider: react.Provider<PaginationContext>;
+declare const usePaginationContext: () => PaginationContext;
+type UsePaginationProps = {
+    page?: number;
+    defaultPage?: number;
+    total: number;
+    siblings?: Token<number>;
+    boundaries?: Token<number>;
+    isDisabled?: boolean;
+    onChange?: (page: number) => void;
+};
+declare const computedRange: (start: number, end: number) => number[];
+declare const usePagination: ({ page, defaultPage, total, siblings, boundaries, isDisabled, ...rest }: UsePaginationProps) => {
+    currentPage: number;
+    total: number;
+    isDisabled: boolean;
+    onFirst: () => void;
+    onLast: () => void;
+    onPrev: () => void;
+    onNext: () => void;
+    onChange: (page: number) => void;
+    range: (number | "dots")[];
+};
+type UsePaginationReturn = ReturnType<typeof usePagination>;
+
+export { PaginationProvider, UsePaginationProps, UsePaginationReturn, computedRange, usePagination, usePaginationContext };