@yamada-ui/pagination 1.0.42-dev-20241005220629 → 1.0.42-dev-20241006000212

Sign up to get free protection for your applications and to get access to all the features.
Files changed (34) hide show
  1. package/dist/{chunk-SUUC5YDJ.mjs → chunk-A4XT3J3Q.mjs} +33 -33
  2. package/dist/chunk-A4XT3J3Q.mjs.map +1 -0
  3. package/dist/{chunk-CDBANJFO.mjs → chunk-GKZNNZOM.mjs} +12 -12
  4. package/dist/chunk-GKZNNZOM.mjs.map +1 -0
  5. package/dist/{chunk-FAA64ZR4.mjs → chunk-RE4PRKBC.mjs} +11 -11
  6. package/dist/chunk-RE4PRKBC.mjs.map +1 -0
  7. package/dist/{chunk-UK2DDH2Q.mjs → chunk-Z2XLQPX4.mjs} +16 -16
  8. package/dist/chunk-Z2XLQPX4.mjs.map +1 -0
  9. package/dist/index.js +61 -61
  10. package/dist/index.js.map +1 -1
  11. package/dist/index.mjs +4 -4
  12. package/dist/pagination-icon.js +10 -10
  13. package/dist/pagination-icon.js.map +1 -1
  14. package/dist/pagination-icon.mjs +1 -1
  15. package/dist/pagination-item.d.mts +7 -7
  16. package/dist/pagination-item.d.ts +7 -7
  17. package/dist/pagination-item.js +25 -25
  18. package/dist/pagination-item.js.map +1 -1
  19. package/dist/pagination-item.mjs +3 -3
  20. package/dist/pagination.d.mts +19 -19
  21. package/dist/pagination.d.ts +19 -19
  22. package/dist/pagination.js +61 -61
  23. package/dist/pagination.js.map +1 -1
  24. package/dist/pagination.mjs +4 -4
  25. package/dist/use-pagination.d.mts +22 -22
  26. package/dist/use-pagination.d.ts +22 -22
  27. package/dist/use-pagination.js +11 -11
  28. package/dist/use-pagination.js.map +1 -1
  29. package/dist/use-pagination.mjs +1 -1
  30. package/package.json +7 -7
  31. package/dist/chunk-CDBANJFO.mjs.map +0 -1
  32. package/dist/chunk-FAA64ZR4.mjs.map +0 -1
  33. package/dist/chunk-SUUC5YDJ.mjs.map +0 -1
  34. package/dist/chunk-UK2DDH2Q.mjs.map +0 -1
package/dist/pagination-item.js CHANGED
@@ -35,8 +35,8 @@ var DotsIcon = (props) => {
35
35
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, { viewBox: "0 0 16 16", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
36
36
  "path",
37
37
  {
38
- fill: "currentColor",
39
- 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"
38
+ 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",
39
+ fill: "currentColor"
40
40
  }
41
41
  ) });
42
42
  };
@@ -44,8 +44,8 @@ var FirstIcon = (props) => {
44
44
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, { viewBox: "0 0 16 16", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
45
45
  "path",
46
46
  {
47
- fill: "currentColor",
48
- 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"
47
+ 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",
48
+ fill: "currentColor"
49
49
  }
50
50
  ) });
51
51
  };
@@ -53,8 +53,8 @@ var LastIcon = (props) => {
53
53
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, { viewBox: "0 0 16 16", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
54
54
  "path",
55
55
  {
56
- fill: "currentColor",
57
- 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"
56
+ 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",
57
+ fill: "currentColor"
58
58
  }
59
59
  ) });
60
60
  };
@@ -62,8 +62,8 @@ var PrevIcon = (props) => {
62
62
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, { viewBox: "0 0 16 16", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
63
63
  "path",
64
64
  {
65
- fill: "currentColor",
66
- d: "M7.219 8l3.3 3.3-.943.943L5.333 8l4.243-4.243.943.943-3.3 3.3z"
65
+ d: "M7.219 8l3.3 3.3-.943.943L5.333 8l4.243-4.243.943.943-3.3 3.3z",
66
+ fill: "currentColor"
67
67
  }
68
68
  ) });
69
69
  };
@@ -71,8 +71,8 @@ var NextIcon = (props) => {
71
71
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, { viewBox: "0 0 16 16", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
72
72
  "path",
73
73
  {
74
- fill: "currentColor",
75
- d: "M8.781 8l-3.3-3.3.943-.943L10.667 8l-4.243 4.243-.943-.943 3.3-3.3z"
74
+ d: "M8.781 8l-3.3-3.3.943-.943L10.667 8l-4.243 4.243-.943-.943 3.3-3.3z",
75
+ fill: "currentColor"
76
76
  }
77
77
  ) });
78
78
  };
@@ -83,26 +83,26 @@ var import_use_value = require("@yamada-ui/use-value");
83
83
  var import_utils = require("@yamada-ui/utils");
84
84
  var import_react = require("react");
85
85
  var [PaginationProvider, usePaginationContext] = (0, import_utils.createContext)({
86
- strict: false,
87
- name: "PaginationContext"
86
+ name: "PaginationContext",
87
+ errorMessage: `usePaginationContext returned is 'undefined'. Seems you forgot to wrap the components in "<Pagination />"`
88
88
  });
89
89
 
90
90
  // src/pagination-item.tsx
91
91
  var import_jsx_runtime2 = require("react/jsx-runtime");
92
92
  var iconMap = {
93
93
  dots: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(DotsIcon, {}),
94
- next: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(NextIcon, {}),
95
- prev: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PrevIcon, {}),
96
94
  first: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FirstIcon, {}),
97
- last: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(LastIcon, {})
95
+ last: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(LastIcon, {}),
96
+ next: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(NextIcon, {}),
97
+ prev: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PrevIcon, {})
98
98
  };
99
99
  var PaginationItem = ({
100
100
  className,
101
+ children,
102
+ disableRipple,
101
103
  isActive,
102
- page,
103
104
  isDisabled,
104
- disableRipple,
105
- children,
105
+ page,
106
106
  ...rest
107
107
  }) => {
108
108
  var _a;
@@ -113,24 +113,24 @@ var PaginationItem = ({
113
113
  });
114
114
  children != null ? children : children = (_a = iconMap[page]) != null ? _a : page;
115
115
  const css = {
116
- position: "relative",
117
- overflow: "hidden",
118
- userSelect: "none",
116
+ alignItems: "center",
119
117
  display: "flex",
120
118
  justifyContent: "center",
121
- alignItems: "center",
119
+ overflow: "hidden",
120
+ position: "relative",
121
+ userSelect: "none",
122
122
  ...styles.item,
123
123
  ...styles[page]
124
124
  };
125
125
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
126
126
  import_core.ui.button,
127
127
  {
128
- className: (0, import_utils2.cx)("ui-pagination__item", className),
129
128
  type: "button",
130
- tabIndex: page !== "dots" ? 0 : -1,
129
+ className: (0, import_utils2.cx)("ui-pagination__item", className),
131
130
  disabled: isDisabled,
132
- "data-selected": (0, import_utils2.dataAttr)(isActive),
131
+ tabIndex: page !== "dots" ? 0 : -1,
133
132
  "data-disabled": (0, import_utils2.dataAttr)(isDisabled),
133
+ "data-selected": (0, import_utils2.dataAttr)(isActive),
134
134
  __css: css,
135
135
  ...rest,
136
136
  onPointerDown,
package/dist/pagination-item.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/pagination-item.tsx","../src/pagination-icon.tsx","../src/use-pagination.ts"],"sourcesContent":["import type { CSSUIObject } from \"@yamada-ui/core\"\nimport { ui } from \"@yamada-ui/core\"\nimport { Ripple, useRipple } from \"@yamada-ui/ripple\"\nimport { cx, dataAttr } from \"@yamada-ui/utils\"\nimport type { ComponentPropsWithoutRef, FC, ReactNode } from \"react\"\nimport {\n DotsIcon,\n FirstIcon,\n LastIcon,\n NextIcon,\n PrevIcon,\n} from \"./pagination-icon\"\nimport { usePaginationContext } from \"./use-pagination\"\n\ninterface PaginationItemOptions {\n /**\n * The type of the page or item assigned to the pagination item.\n */\n page: number | \"dots\" | \"prev\" | \"next\" | \"first\" | \"last\"\n /**\n * If `true`, the pagination item will be activated.\n *\n * @default false\n */\n isActive?: boolean\n /**\n * If `true`, the pagination item will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n /**\n * If `true`, disable ripple effects when pressing a element.\n *\n * @default false\n */\n disableRipple?: boolean\n}\n\nexport interface PaginationItemProps\n extends ComponentPropsWithoutRef<\"button\">,\n PaginationItemOptions {}\n\nconst iconMap: {\n [key in number | \"dots\" | \"prev\" | \"next\" | \"first\" | \"last\"]: ReactNode\n} = {\n dots: <DotsIcon />,\n next: <NextIcon />,\n prev: <PrevIcon />,\n first: <FirstIcon />,\n last: <LastIcon />,\n}\n\nexport const PaginationItem: FC<PaginationItemProps> = ({\n className,\n isActive,\n page,\n isDisabled,\n disableRipple,\n children,\n ...rest\n}) => {\n const styles = usePaginationContext()\n const { onPointerDown, ...rippleProps } = useRipple({\n ...rest,\n isDisabled: disableRipple || isDisabled,\n })\n\n children ??= iconMap[page] ?? page\n\n const css: CSSUIObject = {\n position: \"relative\",\n overflow: \"hidden\",\n userSelect: \"none\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n ...styles.item,\n ...styles[page],\n }\n\n return (\n <ui.button\n className={cx(\"ui-pagination__item\", className)}\n type=\"button\"\n tabIndex={page !== \"dots\" ? 0 : -1}\n disabled={isDisabled}\n data-selected={dataAttr(isActive)}\n data-disabled={dataAttr(isDisabled)}\n __css={css}\n {...rest}\n onPointerDown={onPointerDown}\n >\n {children}\n\n <Ripple isDisabled={disableRipple || isDisabled} {...rippleProps} />\n </ui.button>\n )\n}\n","import type { IconProps } from \"@yamada-ui/icon\"\nimport { Icon } from \"@yamada-ui/icon\"\nimport type { FC } from \"react\"\n\nexport const DotsIcon: FC<IconProps> = (props) => {\n return (\n <Icon viewBox=\"0 0 16 16\" {...props}>\n <path\n fill=\"currentColor\"\n 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\"\n />\n </Icon>\n )\n}\n\nexport const FirstIcon: FC<IconProps> = (props) => {\n return (\n <Icon viewBox=\"0 0 16 16\" {...props}>\n <path\n fill=\"currentColor\"\n 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\"\n />\n </Icon>\n )\n}\n\nexport const LastIcon: FC<IconProps> = (props) => {\n return (\n <Icon viewBox=\"0 0 16 16\" {...props}>\n <path\n fill=\"currentColor\"\n 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\"\n />\n </Icon>\n )\n}\n\nexport const PrevIcon: FC<IconProps> = (props) => {\n return (\n <Icon viewBox=\"0 0 16 16\" {...props}>\n <path\n fill=\"currentColor\"\n d=\"M7.219 8l3.3 3.3-.943.943L5.333 8l4.243-4.243.943.943-3.3 3.3z\"\n />\n </Icon>\n )\n}\n\nexport const NextIcon: FC<IconProps> = (props) => {\n return (\n <Icon viewBox=\"0 0 16 16\" {...props}>\n <path\n fill=\"currentColor\"\n d=\"M8.781 8l-3.3-3.3.943-.943L10.667 8l-4.243 4.243-.943-.943 3.3-3.3z\"\n />\n </Icon>\n )\n}\n","import type { CSSUIObject, Token } from \"@yamada-ui/core\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport { createContext } from \"@yamada-ui/utils\"\nimport { useCallback, useMemo } from \"react\"\n\ninterface PaginationContext {\n [key: string]: CSSUIObject\n}\n\nexport const [PaginationProvider, usePaginationContext] =\n createContext<PaginationContext>({\n strict: false,\n name: \"PaginationContext\",\n })\n\nexport const computedRange = (start: number, end: number) =>\n Array.from({ length: end - start + 1 }, (_, index) => index + start)\n\nexport interface UsePaginationProps {\n /**\n * The page of the pagination.\n * Should be less than `total` and greater than `1`.\n */\n page?: number\n /**\n * The initial page of the pagination.\n * Should be less than `total` and greater than `1`.\n *\n * @default 1\n */\n defaultPage?: number\n /**\n * The total number of pages in pagination.\n */\n total: number\n /** Number of siblings displayed on the left/right side of selected page.\n *\n * @default 1\n */\n siblings?: Token<number>\n /**\n * Number of elements visible on the left/right edges.\n *\n * @default 1\n */\n boundaries?: Token<number>\n /**\n * If `true`, the pagination all item will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n /**\n * The callback invoked when the page changes.\n */\n onChange?: (page: number) => void\n}\n\nexport const usePagination = ({\n page,\n defaultPage = 1,\n total,\n siblings: _siblings = 1,\n boundaries: _boundaries = 1,\n isDisabled = false,\n onChange: onChangeProp,\n}: UsePaginationProps) => {\n const siblings = useValue(_siblings)\n const boundaries = useValue(_boundaries)\n\n const [currentPage, setCurrentPage] = useControllableState({\n value: page,\n defaultValue: defaultPage,\n onChange: onChangeProp,\n })\n\n const onFirst = useCallback(() => setCurrentPage(1), [setCurrentPage])\n\n const onLast = useCallback(\n () => setCurrentPage(total),\n [setCurrentPage, total],\n )\n\n const onPrev = useCallback(\n () => setCurrentPage((prev) => (prev === 1 ? prev : prev - 1)),\n [setCurrentPage],\n )\n\n const onNext = useCallback(\n () => setCurrentPage((prev) => (prev === total ? prev : prev + 1)),\n [setCurrentPage, total],\n )\n\n const onChange = useCallback(\n (page: number) => setCurrentPage(page),\n [setCurrentPage],\n )\n\n const range = useMemo((): (number | \"dots\")[] => {\n const minimumTotal = siblings * 2 + 3 + boundaries * 2\n\n if (minimumTotal >= total) return computedRange(1, total)\n\n const prevSiblings = Math.max(currentPage - siblings, boundaries)\n const nextSiblings = Math.min(currentPage + siblings, total - boundaries)\n\n const prevDots = prevSiblings > boundaries + 2\n const nextDots = nextSiblings < total - (boundaries + 1)\n\n if (!prevDots && nextDots) {\n const prevPages = siblings * 2 + boundaries + 2\n\n return [\n ...computedRange(1, prevPages),\n \"dots\",\n ...computedRange(total - (boundaries - 1), total),\n ]\n }\n\n if (prevDots && !nextDots) {\n const nextPages = boundaries + 1 + 2 * siblings\n\n return [\n ...computedRange(1, boundaries),\n \"dots\",\n ...computedRange(total - nextPages, total),\n ]\n }\n\n return [\n ...computedRange(1, boundaries),\n \"dots\",\n ...computedRange(prevSiblings, nextSiblings),\n \"dots\",\n ...computedRange(total - boundaries + 1, total),\n ]\n }, [boundaries, siblings, currentPage, total])\n\n return {\n currentPage,\n total,\n isDisabled,\n onFirst,\n onLast,\n onPrev,\n onNext,\n onChange,\n range,\n }\n}\n\nexport type UsePaginationReturn = ReturnType<typeof usePagination>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,kBAAmB;AACnB,oBAAkC;AAClC,IAAAA,gBAA6B;;;ACF7B,kBAAqB;AAMf;AAHC,IAAM,WAA0B,CAAC,UAAU;AAChD,SACE,4CAAC,oBAAK,SAAQ,aAAa,GAAG,OAC5B;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,GAAE;AAAA;AAAA,EACJ,GACF;AAEJ;AAEO,IAAM,YAA2B,CAAC,UAAU;AACjD,SACE,4CAAC,oBAAK,SAAQ,aAAa,GAAG,OAC5B;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,GAAE;AAAA;AAAA,EACJ,GACF;AAEJ;AAEO,IAAM,WAA0B,CAAC,UAAU;AAChD,SACE,4CAAC,oBAAK,SAAQ,aAAa,GAAG,OAC5B;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,GAAE;AAAA;AAAA,EACJ,GACF;AAEJ;AAEO,IAAM,WAA0B,CAAC,UAAU;AAChD,SACE,4CAAC,oBAAK,SAAQ,aAAa,GAAG,OAC5B;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,GAAE;AAAA;AAAA,EACJ,GACF;AAEJ;AAEO,IAAM,WAA0B,CAAC,UAAU;AAChD,SACE,4CAAC,oBAAK,SAAQ,aAAa,GAAG,OAC5B;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,GAAE;AAAA;AAAA,EACJ,GACF;AAEJ;;;ACxDA,oCAAqC;AACrC,uBAAyB;AACzB,mBAA8B;AAC9B,mBAAqC;AAM9B,IAAM,CAAC,oBAAoB,oBAAoB,QACpD,4BAAiC;AAAA,EAC/B,QAAQ;AAAA,EACR,MAAM;AACR,CAAC;;;AFgCK,IAAAC,sBAAA;AAHR,IAAM,UAEF;AAAA,EACF,MAAM,6CAAC,YAAS;AAAA,EAChB,MAAM,6CAAC,YAAS;AAAA,EAChB,MAAM,6CAAC,YAAS;AAAA,EAChB,OAAO,6CAAC,aAAU;AAAA,EAClB,MAAM,6CAAC,YAAS;AAClB;AAEO,IAAM,iBAA0C,CAAC;AAAA,EACtD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AA7DN;AA8DE,QAAM,SAAS,qBAAqB;AACpC,QAAM,EAAE,eAAe,GAAG,YAAY,QAAI,yBAAU;AAAA,IAClD,GAAG;AAAA,IACH,YAAY,iBAAiB;AAAA,EAC/B,CAAC;AAED,4CAAa,aAAQ,IAAI,MAAZ,YAAiB;AAE9B,QAAM,MAAmB;AAAA,IACvB,UAAU;AAAA,IACV,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,GAAG,OAAO;AAAA,IACV,GAAG,OAAO,IAAI;AAAA,EAChB;AAEA,SACE;AAAA,IAAC,eAAG;AAAA,IAAH;AAAA,MACC,eAAW,kBAAG,uBAAuB,SAAS;AAAA,MAC9C,MAAK;AAAA,MACL,UAAU,SAAS,SAAS,IAAI;AAAA,MAChC,UAAU;AAAA,MACV,qBAAe,wBAAS,QAAQ;AAAA,MAChC,qBAAe,wBAAS,UAAU;AAAA,MAClC,OAAO;AAAA,MACN,GAAG;AAAA,MACJ;AAAA,MAEC;AAAA;AAAA,QAED,6CAAC,wBAAO,YAAY,iBAAiB,YAAa,GAAG,aAAa;AAAA;AAAA;AAAA,EACpE;AAEJ;","names":["import_utils","import_jsx_runtime"]}
1
+ {"version":3,"sources":["../src/pagination-item.tsx","../src/pagination-icon.tsx","../src/use-pagination.ts"],"sourcesContent":["import type { CSSUIObject } from \"@yamada-ui/core\"\nimport type { ComponentPropsWithoutRef, FC, ReactNode } from \"react\"\nimport { ui } from \"@yamada-ui/core\"\nimport { Ripple, useRipple } from \"@yamada-ui/ripple\"\nimport { cx, dataAttr } from \"@yamada-ui/utils\"\nimport {\n DotsIcon,\n FirstIcon,\n LastIcon,\n NextIcon,\n PrevIcon,\n} from \"./pagination-icon\"\nimport { usePaginationContext } from \"./use-pagination\"\n\ninterface PaginationItemOptions {\n /**\n * The type of the page or item assigned to the pagination item.\n */\n page: \"dots\" | \"first\" | \"last\" | \"next\" | \"prev\" | number\n /**\n * If `true`, disable ripple effects when pressing a element.\n *\n * @default false\n */\n disableRipple?: boolean\n /**\n * If `true`, the pagination item will be activated.\n *\n * @default false\n */\n isActive?: boolean\n /**\n * If `true`, the pagination item will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n}\n\nexport interface PaginationItemProps\n extends ComponentPropsWithoutRef<\"button\">,\n PaginationItemOptions {}\n\nconst iconMap: {\n [key in \"dots\" | \"first\" | \"last\" | \"next\" | \"prev\" | number]: ReactNode\n} = {\n dots: <DotsIcon />,\n first: <FirstIcon />,\n last: <LastIcon />,\n next: <NextIcon />,\n prev: <PrevIcon />,\n}\n\nexport const PaginationItem: FC<PaginationItemProps> = ({\n className,\n children,\n disableRipple,\n isActive,\n isDisabled,\n page,\n ...rest\n}) => {\n const styles = usePaginationContext()\n const { onPointerDown, ...rippleProps } = useRipple({\n ...rest,\n isDisabled: disableRipple || isDisabled,\n })\n\n children ??= iconMap[page] ?? page\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n display: \"flex\",\n justifyContent: \"center\",\n overflow: \"hidden\",\n position: \"relative\",\n userSelect: \"none\",\n ...styles.item,\n ...styles[page],\n }\n\n return (\n <ui.button\n type=\"button\"\n className={cx(\"ui-pagination__item\", className)}\n disabled={isDisabled}\n tabIndex={page !== \"dots\" ? 0 : -1}\n data-disabled={dataAttr(isDisabled)}\n data-selected={dataAttr(isActive)}\n __css={css}\n {...rest}\n onPointerDown={onPointerDown}\n >\n {children}\n\n <Ripple isDisabled={disableRipple || isDisabled} {...rippleProps} />\n </ui.button>\n )\n}\n","import type { IconProps } from \"@yamada-ui/icon\"\nimport type { FC } from \"react\"\nimport { Icon } from \"@yamada-ui/icon\"\n\nexport const DotsIcon: FC<IconProps> = (props) => {\n return (\n <Icon viewBox=\"0 0 16 16\" {...props}>\n <path\n 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\"\n fill=\"currentColor\"\n />\n </Icon>\n )\n}\n\nexport const FirstIcon: FC<IconProps> = (props) => {\n return (\n <Icon viewBox=\"0 0 16 16\" {...props}>\n <path\n 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\"\n fill=\"currentColor\"\n />\n </Icon>\n )\n}\n\nexport const LastIcon: FC<IconProps> = (props) => {\n return (\n <Icon viewBox=\"0 0 16 16\" {...props}>\n <path\n 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\"\n fill=\"currentColor\"\n />\n </Icon>\n )\n}\n\nexport const PrevIcon: FC<IconProps> = (props) => {\n return (\n <Icon viewBox=\"0 0 16 16\" {...props}>\n <path\n d=\"M7.219 8l3.3 3.3-.943.943L5.333 8l4.243-4.243.943.943-3.3 3.3z\"\n fill=\"currentColor\"\n />\n </Icon>\n )\n}\n\nexport const NextIcon: FC<IconProps> = (props) => {\n return (\n <Icon viewBox=\"0 0 16 16\" {...props}>\n <path\n d=\"M8.781 8l-3.3-3.3.943-.943L10.667 8l-4.243 4.243-.943-.943 3.3-3.3z\"\n fill=\"currentColor\"\n />\n </Icon>\n )\n}\n","import type { CSSUIObject, Token } from \"@yamada-ui/core\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport { createContext } from \"@yamada-ui/utils\"\nimport { useCallback, useMemo } from \"react\"\n\ninterface PaginationContext {\n [key: string]: CSSUIObject | undefined\n}\n\nexport const [PaginationProvider, usePaginationContext] =\n createContext<PaginationContext>({\n name: \"PaginationContext\",\n errorMessage: `usePaginationContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Pagination />\"`,\n })\n\nexport const computedRange = (start: number, end: number) =>\n Array.from({ length: end - start + 1 }, (_, index) => index + start)\n\nexport interface UsePaginationProps {\n /**\n * The total number of pages in pagination.\n */\n total: number\n /**\n * Number of elements visible on the left/right edges.\n *\n * @default 1\n */\n boundaries?: Token<number>\n /**\n * The initial page of the pagination.\n * Should be less than `total` and greater than `1`.\n *\n * @default 1\n */\n defaultPage?: number\n /**\n * If `true`, the pagination all item will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n /**\n * The page of the pagination.\n * Should be less than `total` and greater than `1`.\n */\n page?: number\n /** Number of siblings displayed on the left/right side of selected page.\n *\n * @default 1\n */\n siblings?: Token<number>\n /**\n * The callback invoked when the page changes.\n */\n onChange?: (page: number) => void\n}\n\nexport const usePagination = ({\n boundaries: _boundaries = 1,\n defaultPage = 1,\n isDisabled = false,\n page,\n siblings: _siblings = 1,\n total,\n onChange: onChangeProp,\n}: UsePaginationProps) => {\n const siblings = useValue(_siblings)\n const boundaries = useValue(_boundaries)\n\n const [currentPage, setCurrentPage] = useControllableState({\n defaultValue: defaultPage,\n value: page,\n onChange: onChangeProp,\n })\n\n const onFirst = useCallback(() => setCurrentPage(1), [setCurrentPage])\n\n const onLast = useCallback(\n () => setCurrentPage(total),\n [setCurrentPage, total],\n )\n\n const onPrev = useCallback(\n () => setCurrentPage((prev) => (prev === 1 ? prev : prev - 1)),\n [setCurrentPage],\n )\n\n const onNext = useCallback(\n () => setCurrentPage((prev) => (prev === total ? prev : prev + 1)),\n [setCurrentPage, total],\n )\n\n const onChange = useCallback(\n (page: number) => setCurrentPage(page),\n [setCurrentPage],\n )\n\n const range = useMemo((): (\"dots\" | number)[] => {\n const minimumTotal = siblings * 2 + 3 + boundaries * 2\n\n if (minimumTotal >= total) return computedRange(1, total)\n\n const prevSiblings = Math.max(currentPage - siblings, boundaries)\n const nextSiblings = Math.min(currentPage + siblings, total - boundaries)\n\n const prevDots = prevSiblings > boundaries + 2\n const nextDots = nextSiblings < total - (boundaries + 1)\n\n if (!prevDots && nextDots) {\n const prevPages = siblings * 2 + boundaries + 2\n\n return [\n ...computedRange(1, prevPages),\n \"dots\",\n ...computedRange(total - (boundaries - 1), total),\n ]\n }\n\n if (prevDots && !nextDots) {\n const nextPages = boundaries + 1 + 2 * siblings\n\n return [\n ...computedRange(1, boundaries),\n \"dots\",\n ...computedRange(total - nextPages, total),\n ]\n }\n\n return [\n ...computedRange(1, boundaries),\n \"dots\",\n ...computedRange(prevSiblings, nextSiblings),\n \"dots\",\n ...computedRange(total - boundaries + 1, total),\n ]\n }, [boundaries, siblings, currentPage, total])\n\n return {\n currentPage,\n isDisabled,\n range,\n total,\n onChange,\n onFirst,\n onLast,\n onNext,\n onPrev,\n }\n}\n\nexport type UsePaginationReturn = ReturnType<typeof usePagination>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,kBAAmB;AACnB,oBAAkC;AAClC,IAAAA,gBAA6B;;;ACF7B,kBAAqB;AAKf;AAHC,IAAM,WAA0B,CAAC,UAAU;AAChD,SACE,4CAAC,oBAAK,SAAQ,aAAa,GAAG,OAC5B;AAAA,IAAC;AAAA;AAAA,MACC,GAAE;AAAA,MACF,MAAK;AAAA;AAAA,EACP,GACF;AAEJ;AAEO,IAAM,YAA2B,CAAC,UAAU;AACjD,SACE,4CAAC,oBAAK,SAAQ,aAAa,GAAG,OAC5B;AAAA,IAAC;AAAA;AAAA,MACC,GAAE;AAAA,MACF,MAAK;AAAA;AAAA,EACP,GACF;AAEJ;AAEO,IAAM,WAA0B,CAAC,UAAU;AAChD,SACE,4CAAC,oBAAK,SAAQ,aAAa,GAAG,OAC5B;AAAA,IAAC;AAAA;AAAA,MACC,GAAE;AAAA,MACF,MAAK;AAAA;AAAA,EACP,GACF;AAEJ;AAEO,IAAM,WAA0B,CAAC,UAAU;AAChD,SACE,4CAAC,oBAAK,SAAQ,aAAa,GAAG,OAC5B;AAAA,IAAC;AAAA;AAAA,MACC,GAAE;AAAA,MACF,MAAK;AAAA;AAAA,EACP,GACF;AAEJ;AAEO,IAAM,WAA0B,CAAC,UAAU;AAChD,SACE,4CAAC,oBAAK,SAAQ,aAAa,GAAG,OAC5B;AAAA,IAAC;AAAA;AAAA,MACC,GAAE;AAAA,MACF,MAAK;AAAA;AAAA,EACP,GACF;AAEJ;;;ACxDA,oCAAqC;AACrC,uBAAyB;AACzB,mBAA8B;AAC9B,mBAAqC;AAM9B,IAAM,CAAC,oBAAoB,oBAAoB,QACpD,4BAAiC;AAAA,EAC/B,MAAM;AAAA,EACN,cAAc;AAChB,CAAC;;;AFgCK,IAAAC,sBAAA;AAHR,IAAM,UAEF;AAAA,EACF,MAAM,6CAAC,YAAS;AAAA,EAChB,OAAO,6CAAC,aAAU;AAAA,EAClB,MAAM,6CAAC,YAAS;AAAA,EAChB,MAAM,6CAAC,YAAS;AAAA,EAChB,MAAM,6CAAC,YAAS;AAClB;AAEO,IAAM,iBAA0C,CAAC;AAAA,EACtD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AA7DN;AA8DE,QAAM,SAAS,qBAAqB;AACpC,QAAM,EAAE,eAAe,GAAG,YAAY,QAAI,yBAAU;AAAA,IAClD,GAAG;AAAA,IACH,YAAY,iBAAiB;AAAA,EAC/B,CAAC;AAED,4CAAa,aAAQ,IAAI,MAAZ,YAAiB;AAE9B,QAAM,MAAmB;AAAA,IACvB,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,UAAU;AAAA,IACV,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,GAAG,OAAO;AAAA,IACV,GAAG,OAAO,IAAI;AAAA,EAChB;AAEA,SACE;AAAA,IAAC,eAAG;AAAA,IAAH;AAAA,MACC,MAAK;AAAA,MACL,eAAW,kBAAG,uBAAuB,SAAS;AAAA,MAC9C,UAAU;AAAA,MACV,UAAU,SAAS,SAAS,IAAI;AAAA,MAChC,qBAAe,wBAAS,UAAU;AAAA,MAClC,qBAAe,wBAAS,QAAQ;AAAA,MAChC,OAAO;AAAA,MACN,GAAG;AAAA,MACJ;AAAA,MAEC;AAAA;AAAA,QAED,6CAAC,wBAAO,YAAY,iBAAiB,YAAa,GAAG,aAAa;AAAA;AAAA;AAAA,EACpE;AAEJ;","names":["import_utils","import_jsx_runtime"]}
package/dist/pagination-item.mjs CHANGED
@@ -1,9 +1,9 @@
1
1
  "use client"
2
2
  import {
3
3
  PaginationItem
4
- } from "./chunk-UK2DDH2Q.mjs";
5
- import "./chunk-FAA64ZR4.mjs";
6
- import "./chunk-CDBANJFO.mjs";
4
+ } from "./chunk-Z2XLQPX4.mjs";
5
+ import "./chunk-RE4PRKBC.mjs";
6
+ import "./chunk-GKZNNZOM.mjs";
7
7
  export {
8
8
  PaginationItem
9
9
  };
package/dist/pagination.d.mts CHANGED
@@ -9,10 +9,6 @@ interface PaginationOptions {
9
9
  * The pagination button component to use.
10
10
  */
11
11
  component?: FC<PaginationItemProps>;
12
- /**
13
- * Props for button element.
14
- */
15
- itemProps?: HTMLUIProps<"button">;
16
12
  /**
17
13
  * If `true`, display the control buttons.
18
14
  *
@@ -20,41 +16,45 @@ interface PaginationOptions {
20
16
  */
21
17
  withControls?: Token<boolean>;
22
18
  /**
23
- * Props for inner element.
19
+ * If `true`, display the edge buttons.
20
+ *
21
+ * @default false
24
22
  */
25
- innerProps?: HTMLUIProps;
23
+ withEdges?: Token<boolean>;
26
24
  /**
27
- * Props for control button element.
25
+ * Props for next of the control button element.
28
26
  */
29
- controlProps?: HTMLUIProps<"button">;
27
+ controlNextProps?: HTMLUIProps<"button">;
30
28
  /**
31
29
  * Props for previous of the control button element.
32
30
  */
33
31
  controlPrevProps?: HTMLUIProps<"button">;
34
32
  /**
35
- * Props for next of the control button element.
33
+ * Props for control button element.
36
34
  */
37
- controlNextProps?: HTMLUIProps<"button">;
35
+ controlProps?: HTMLUIProps<"button">;
38
36
  /**
39
- * If `true`, display the edge buttons.
40
- *
41
- * @default false
37
+ * Props for first of the edge button element.
42
38
  */
43
- withEdges?: Token<boolean>;
39
+ edgeFirstProps?: HTMLUIProps<"button">;
40
+ /**
41
+ * Props for last of the edge button element.
42
+ */
43
+ edgeLastProps?: HTMLUIProps<"button">;
44
44
  /**
45
45
  * Props for edge button element.
46
46
  */
47
47
  edgeProps?: HTMLUIProps<"button">;
48
48
  /**
49
- * Props for first of the edge button element.
49
+ * Props for inner element.
50
50
  */
51
- edgeFirstProps?: HTMLUIProps<"button">;
51
+ innerProps?: HTMLUIProps;
52
52
  /**
53
- * Props for last of the edge button element.
53
+ * Props for button element.
54
54
  */
55
- edgeLastProps?: HTMLUIProps<"button">;
55
+ itemProps?: HTMLUIProps<"button">;
56
56
  }
57
- interface PaginationProps extends Omit<HTMLUIProps, "onChange" | "children" | "page">, ThemeProps<"Pagination">, UsePaginationProps, PaginationOptions {
57
+ interface PaginationProps extends Omit<HTMLUIProps, "children" | "onChange" | "page">, ThemeProps<"Pagination">, UsePaginationProps, PaginationOptions {
58
58
  }
59
59
  /**
60
60
  * `Pagination` is a component for managing the pagination and navigation of content.
package/dist/pagination.d.ts CHANGED
@@ -9,10 +9,6 @@ interface PaginationOptions {
9
9
  * The pagination button component to use.
10
10
  */
11
11
  component?: FC<PaginationItemProps>;
12
- /**
13
- * Props for button element.
14
- */
15
- itemProps?: HTMLUIProps<"button">;
16
12
  /**
17
13
  * If `true`, display the control buttons.
18
14
  *
@@ -20,41 +16,45 @@ interface PaginationOptions {
20
16
  */
21
17
  withControls?: Token<boolean>;
22
18
  /**
23
- * Props for inner element.
19
+ * If `true`, display the edge buttons.
20
+ *
21
+ * @default false
24
22
  */
25
- innerProps?: HTMLUIProps;
23
+ withEdges?: Token<boolean>;
26
24
  /**
27
- * Props for control button element.
25
+ * Props for next of the control button element.
28
26
  */
29
- controlProps?: HTMLUIProps<"button">;
27
+ controlNextProps?: HTMLUIProps<"button">;
30
28
  /**
31
29
  * Props for previous of the control button element.
32
30
  */
33
31
  controlPrevProps?: HTMLUIProps<"button">;
34
32
  /**
35
- * Props for next of the control button element.
33
+ * Props for control button element.
36
34
  */
37
- controlNextProps?: HTMLUIProps<"button">;
35
+ controlProps?: HTMLUIProps<"button">;
38
36
  /**
39
- * If `true`, display the edge buttons.
40
- *
41
- * @default false
37
+ * Props for first of the edge button element.
42
38
  */
43
- withEdges?: Token<boolean>;
39
+ edgeFirstProps?: HTMLUIProps<"button">;
40
+ /**
41
+ * Props for last of the edge button element.
42
+ */
43
+ edgeLastProps?: HTMLUIProps<"button">;
44
44
  /**
45
45
  * Props for edge button element.
46
46
  */
47
47
  edgeProps?: HTMLUIProps<"button">;
48
48
  /**
49
- * Props for first of the edge button element.
49
+ * Props for inner element.
50
50
  */
51
- edgeFirstProps?: HTMLUIProps<"button">;
51
+ innerProps?: HTMLUIProps;
52
52
  /**
53
- * Props for last of the edge button element.
53
+ * Props for button element.
54
54
  */
55
- edgeLastProps?: HTMLUIProps<"button">;
55
+ itemProps?: HTMLUIProps<"button">;
56
56
  }
57
- interface PaginationProps extends Omit<HTMLUIProps, "onChange" | "children" | "page">, ThemeProps<"Pagination">, UsePaginationProps, PaginationOptions {
57
+ interface PaginationProps extends Omit<HTMLUIProps, "children" | "onChange" | "page">, ThemeProps<"Pagination">, UsePaginationProps, PaginationOptions {
58
58
  }
59
59
  /**
60
60
  * `Pagination` is a component for managing the pagination and navigation of content.
package/dist/pagination.js CHANGED
@@ -41,8 +41,8 @@ var DotsIcon = (props) => {
41
41
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, { viewBox: "0 0 16 16", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
42
42
  "path",
43
43
  {
44
- fill: "currentColor",
45
- 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"
44
+ 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",
45
+ fill: "currentColor"
46
46
  }
47
47
  ) });
48
48
  };
@@ -50,8 +50,8 @@ var FirstIcon = (props) => {
50
50
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, { viewBox: "0 0 16 16", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
51
51
  "path",
52
52
  {
53
- fill: "currentColor",
54
- 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"
53
+ 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",
54
+ fill: "currentColor"
55
55
  }
56
56
  ) });
57
57
  };
@@ -59,8 +59,8 @@ var LastIcon = (props) => {
59
59
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, { viewBox: "0 0 16 16", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
60
60
  "path",
61
61
  {
62
- fill: "currentColor",
63
- 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"
62
+ 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",
63
+ fill: "currentColor"
64
64
  }
65
65
  ) });
66
66
  };
@@ -68,8 +68,8 @@ var PrevIcon = (props) => {
68
68
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, { viewBox: "0 0 16 16", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
69
69
  "path",
70
70
  {
71
- fill: "currentColor",
72
- d: "M7.219 8l3.3 3.3-.943.943L5.333 8l4.243-4.243.943.943-3.3 3.3z"
71
+ d: "M7.219 8l3.3 3.3-.943.943L5.333 8l4.243-4.243.943.943-3.3 3.3z",
72
+ fill: "currentColor"
73
73
  }
74
74
  ) });
75
75
  };
@@ -77,8 +77,8 @@ var NextIcon = (props) => {
77
77
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, { viewBox: "0 0 16 16", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
78
78
  "path",
79
79
  {
80
- fill: "currentColor",
81
- d: "M8.781 8l-3.3-3.3.943-.943L10.667 8l-4.243 4.243-.943-.943 3.3-3.3z"
80
+ d: "M8.781 8l-3.3-3.3.943-.943L10.667 8l-4.243 4.243-.943-.943 3.3-3.3z",
81
+ fill: "currentColor"
82
82
  }
83
83
  ) });
84
84
  };
@@ -89,24 +89,24 @@ var import_use_value = require("@yamada-ui/use-value");
89
89
  var import_utils = require("@yamada-ui/utils");
90
90
  var import_react = require("react");
91
91
  var [PaginationProvider, usePaginationContext] = (0, import_utils.createContext)({
92
- strict: false,
93
- name: "PaginationContext"
92
+ name: "PaginationContext",
93
+ errorMessage: `usePaginationContext returned is 'undefined'. Seems you forgot to wrap the components in "<Pagination />"`
94
94
  });
95
95
  var computedRange = (start, end) => Array.from({ length: end - start + 1 }, (_, index) => index + start);
96
96
  var usePagination = ({
97
- page,
98
- defaultPage = 1,
99
- total,
100
- siblings: _siblings = 1,
101
97
  boundaries: _boundaries = 1,
98
+ defaultPage = 1,
102
99
  isDisabled = false,
100
+ page,
101
+ siblings: _siblings = 1,
102
+ total,
103
103
  onChange: onChangeProp
104
104
  }) => {
105
105
  const siblings = (0, import_use_value.useValue)(_siblings);
106
106
  const boundaries = (0, import_use_value.useValue)(_boundaries);
107
107
  const [currentPage, setCurrentPage] = (0, import_use_controllable_state.useControllableState)({
108
- value: page,
109
108
  defaultValue: defaultPage,
109
+ value: page,
110
110
  onChange: onChangeProp
111
111
  });
112
112
  const onFirst = (0, import_react.useCallback)(() => setCurrentPage(1), [setCurrentPage]);
@@ -159,14 +159,14 @@ var usePagination = ({
159
159
  }, [boundaries, siblings, currentPage, total]);
160
160
  return {
161
161
  currentPage,
162
- total,
163
162
  isDisabled,
163
+ range,
164
+ total,
165
+ onChange,
164
166
  onFirst,
165
167
  onLast,
166
- onPrev,
167
168
  onNext,
168
- onChange,
169
- range
169
+ onPrev
170
170
  };
171
171
  };
172
172
 
@@ -174,18 +174,18 @@ var usePagination = ({
174
174
  var import_jsx_runtime2 = require("react/jsx-runtime");
175
175
  var iconMap = {
176
176
  dots: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(DotsIcon, {}),
177
- next: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(NextIcon, {}),
178
- prev: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PrevIcon, {}),
179
177
  first: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FirstIcon, {}),
180
- last: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(LastIcon, {})
178
+ last: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(LastIcon, {}),
179
+ next: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(NextIcon, {}),
180
+ prev: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PrevIcon, {})
181
181
  };
182
182
  var PaginationItem = ({
183
183
  className,
184
+ children,
185
+ disableRipple,
184
186
  isActive,
185
- page,
186
187
  isDisabled,
187
- disableRipple,
188
- children,
188
+ page,
189
189
  ...rest
190
190
  }) => {
191
191
  var _a;
@@ -196,24 +196,24 @@ var PaginationItem = ({
196
196
  });
197
197
  children != null ? children : children = (_a = iconMap[page]) != null ? _a : page;
198
198
  const css = {
199
- position: "relative",
200
- overflow: "hidden",
201
- userSelect: "none",
199
+ alignItems: "center",
202
200
  display: "flex",
203
201
  justifyContent: "center",
204
- alignItems: "center",
202
+ overflow: "hidden",
203
+ position: "relative",
204
+ userSelect: "none",
205
205
  ...styles.item,
206
206
  ...styles[page]
207
207
  };
208
208
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
209
209
  import_core.ui.button,
210
210
  {
211
- className: (0, import_utils2.cx)("ui-pagination__item", className),
212
211
  type: "button",
213
- tabIndex: page !== "dots" ? 0 : -1,
212
+ className: (0, import_utils2.cx)("ui-pagination__item", className),
214
213
  disabled: isDisabled,
215
- "data-selected": (0, import_utils2.dataAttr)(isActive),
214
+ tabIndex: page !== "dots" ? 0 : -1,
216
215
  "data-disabled": (0, import_utils2.dataAttr)(isDisabled),
216
+ "data-selected": (0, import_utils2.dataAttr)(isActive),
217
217
  __css: css,
218
218
  ...rest,
219
219
  onPointerDown,
@@ -231,44 +231,44 @@ var Pagination = (0, import_core2.forwardRef)((props, ref) => {
231
231
  const [styles, mergedProps] = (0, import_core2.useComponentMultiStyle)("Pagination", props);
232
232
  const {
233
233
  className,
234
+ boundaries,
234
235
  component: Component = PaginationItem,
235
- itemProps,
236
+ defaultPage,
237
+ isDisabled,
238
+ page,
239
+ siblings,
240
+ total,
236
241
  withControls: _withControls = true,
237
242
  withEdges: _withEdges = false,
238
- innerProps,
239
- controlProps,
240
- controlPrevProps,
241
243
  controlNextProps,
242
- edgeProps,
244
+ controlPrevProps,
245
+ controlProps,
243
246
  edgeFirstProps,
244
247
  edgeLastProps,
245
- page,
246
- defaultPage,
247
- total,
248
- siblings,
249
- boundaries,
250
- isDisabled,
248
+ edgeProps,
249
+ innerProps,
250
+ itemProps,
251
251
  onChange: onChangeProp,
252
252
  ...rest
253
253
  } = (0, import_core2.omitThemeProps)(mergedProps);
254
254
  const withControls = (0, import_use_value2.useValue)(_withControls);
255
255
  const withEdges = (0, import_use_value2.useValue)(_withEdges);
256
- const { currentPage, onFirst, onLast, onPrev, onNext, onChange, range } = usePagination({
257
- page,
258
- defaultPage,
259
- total,
260
- siblings,
256
+ const { currentPage, range, onChange, onFirst, onLast, onNext, onPrev } = usePagination({
261
257
  boundaries,
258
+ defaultPage,
262
259
  isDisabled,
260
+ page,
261
+ siblings,
262
+ total,
263
263
  onChange: onChangeProp
264
264
  });
265
265
  const children = (0, import_react2.useMemo)(
266
266
  () => range.map((page2, key) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
267
267
  Component,
268
268
  {
269
- page: page2,
270
269
  isActive: currentPage === page2,
271
270
  isDisabled,
271
+ page: page2,
272
272
  "aria-label": page2 === "dots" ? "Jump to omitted pages" : `Go to page ${page2}`,
273
273
  ...itemProps,
274
274
  onClick: (0, import_utils3.handlerAll)(
@@ -281,8 +281,8 @@ var Pagination = (0, import_core2.forwardRef)((props, ref) => {
281
281
  [Component, currentPage, isDisabled, onChange, range, itemProps]
282
282
  );
283
283
  const css = {
284
- display: "flex",
285
284
  alignItems: "center",
285
+ display: "flex",
286
286
  ...styles.container
287
287
  };
288
288
  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PaginationProvider, { value: styles, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
@@ -298,10 +298,10 @@ var Pagination = (0, import_core2.forwardRef)((props, ref) => {
298
298
  withEdges ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
299
299
  Component,
300
300
  {
301
- page: "first",
302
- "aria-label": "Go to first page",
303
301
  className: "ui-pagination__item--first",
304
302
  isDisabled: isDisabled || currentPage === 1,
303
+ page: "first",
304
+ "aria-label": "Go to first page",
305
305
  ...edgeProps,
306
306
  ...edgeFirstProps,
307
307
  onClick: (0, import_utils3.handlerAll)(
@@ -314,10 +314,10 @@ var Pagination = (0, import_core2.forwardRef)((props, ref) => {
314
314
  withControls ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
315
315
  Component,
316
316
  {
317
- page: "prev",
318
- "aria-label": "Go to previous page",
319
317
  className: "ui-pagination__item--prev",
320
318
  isDisabled: isDisabled || currentPage === 1,
319
+ page: "prev",
320
+ "aria-label": "Go to previous page",
321
321
  ...controlProps,
322
322
  ...controlPrevProps,
323
323
  onClick: (0, import_utils3.handlerAll)(
@@ -332,9 +332,9 @@ var Pagination = (0, import_core2.forwardRef)((props, ref) => {
332
332
  {
333
333
  className: "ui-pagination-inner",
334
334
  __css: {
335
+ alignItems: "center",
335
336
  display: "flex",
336
337
  justifyContent: "center",
337
- alignItems: "center",
338
338
  ...styles.inner
339
339
  },
340
340
  ...innerProps,
@@ -344,10 +344,10 @@ var Pagination = (0, import_core2.forwardRef)((props, ref) => {
344
344
  withControls ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
345
345
  Component,
346
346
  {
347
- page: "next",
348
- "aria-label": "Go to next page",
349
347
  className: "ui-pagination__item--next",
350
348
  isDisabled: isDisabled || currentPage === total,
349
+ page: "next",
350
+ "aria-label": "Go to next page",
351
351
  ...controlProps,
352
352
  ...controlNextProps,
353
353
  onClick: (0, import_utils3.handlerAll)(
@@ -360,10 +360,10 @@ var Pagination = (0, import_core2.forwardRef)((props, ref) => {
360
360
  withEdges ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
361
361
  Component,
362
362
  {
363
- page: "last",
364
- "aria-label": "Go to last page",
365
363
  className: "ui-pagination__item--last",
366
364
  isDisabled: isDisabled || currentPage === total,
365
+ page: "last",
366
+ "aria-label": "Go to last page",
367
367
  ...edgeProps,
368
368
  ...edgeLastProps,
369
369
  onClick: (0, import_utils3.handlerAll)(