@yamada-ui/pagination 1.0.42-next-20241005220055 → 1.0.42

Sign up to get free protection for your applications and to get access to all the features.
Files changed (36) hide show
  1. package/dist/{chunk-SUUC5YDJ.mjs → chunk-E35BXOXS.mjs} +37 -35
  2. package/dist/chunk-E35BXOXS.mjs.map +1 -0
  3. package/dist/{chunk-CDBANJFO.mjs → chunk-O6EIBNLC.mjs} +16 -16
  4. package/dist/chunk-O6EIBNLC.mjs.map +1 -0
  5. package/dist/{chunk-UK2DDH2Q.mjs → chunk-PUQ5FNCP.mjs} +26 -24
  6. package/dist/chunk-PUQ5FNCP.mjs.map +1 -0
  7. package/dist/{chunk-FAA64ZR4.mjs → chunk-VZWGYG76.mjs} +31 -21
  8. package/dist/chunk-VZWGYG76.mjs.map +1 -0
  9. package/dist/index.js +89 -75
  10. package/dist/index.js.map +1 -1
  11. package/dist/index.mjs +4 -4
  12. package/dist/pagination-icon.d.mts +7 -7
  13. package/dist/pagination-icon.d.ts +7 -7
  14. package/dist/pagination-icon.js +35 -25
  15. package/dist/pagination-icon.js.map +1 -1
  16. package/dist/pagination-icon.mjs +11 -11
  17. package/dist/pagination-item.d.mts +9 -8
  18. package/dist/pagination-item.d.ts +9 -8
  19. package/dist/pagination-item.js +45 -33
  20. package/dist/pagination-item.js.map +1 -1
  21. package/dist/pagination-item.mjs +3 -3
  22. package/dist/pagination.d.mts +19 -19
  23. package/dist/pagination.d.ts +19 -19
  24. package/dist/pagination.js +89 -75
  25. package/dist/pagination.js.map +1 -1
  26. package/dist/pagination.mjs +4 -4
  27. package/dist/use-pagination.d.mts +22 -22
  28. package/dist/use-pagination.d.ts +22 -22
  29. package/dist/use-pagination.js +15 -15
  30. package/dist/use-pagination.js.map +1 -1
  31. package/dist/use-pagination.mjs +1 -1
  32. package/package.json +7 -7
  33. package/dist/chunk-CDBANJFO.mjs.map +0 -1
  34. package/dist/chunk-FAA64ZR4.mjs.map +0 -1
  35. package/dist/chunk-SUUC5YDJ.mjs.map +0 -1
  36. package/dist/chunk-UK2DDH2Q.mjs.map +0 -1
@@ -37,51 +37,61 @@ var import_utils2 = require("@yamada-ui/utils");
37
37
  // src/pagination-icon.tsx
38
38
  var import_icon = require("@yamada-ui/icon");
39
39
  var import_jsx_runtime = require("react/jsx-runtime");
40
- var DotsIcon = (props) => {
40
+ var PaginationEllipsisIcon = (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
  };
49
- var FirstIcon = (props) => {
49
+ PaginationEllipsisIcon.displayName = "PaginationEllipsisIcon";
50
+ PaginationEllipsisIcon.__ui__ = "PaginationEllipsisIcon";
51
+ var PaginationFirstIcon = (props) => {
50
52
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, { viewBox: "0 0 16 16", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
51
53
  "path",
52
54
  {
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"
55
+ 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",
56
+ fill: "currentColor"
55
57
  }
56
58
  ) });
57
59
  };
58
- var LastIcon = (props) => {
60
+ PaginationFirstIcon.displayName = "PaginationFirstIcon";
61
+ PaginationFirstIcon.__ui__ = "PaginationFirstIcon";
62
+ var PaginationLastIcon = (props) => {
59
63
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, { viewBox: "0 0 16 16", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
60
64
  "path",
61
65
  {
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"
66
+ 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",
67
+ fill: "currentColor"
64
68
  }
65
69
  ) });
66
70
  };
67
- var PrevIcon = (props) => {
71
+ PaginationLastIcon.displayName = "PaginationLastIcon";
72
+ PaginationLastIcon.__ui__ = "PaginationLastIcon";
73
+ var PaginationPrevIcon = (props) => {
68
74
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, { viewBox: "0 0 16 16", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
69
75
  "path",
70
76
  {
71
- fill: "currentColor",
72
- d: "M7.219 8l3.3 3.3-.943.943L5.333 8l4.243-4.243.943.943-3.3 3.3z"
77
+ d: "M7.219 8l3.3 3.3-.943.943L5.333 8l4.243-4.243.943.943-3.3 3.3z",
78
+ fill: "currentColor"
73
79
  }
74
80
  ) });
75
81
  };
76
- var NextIcon = (props) => {
82
+ PaginationPrevIcon.displayName = "PaginationPrevIcon";
83
+ PaginationPrevIcon.__ui__ = "PaginationPrevIcon";
84
+ var PaginationNextIcon = (props) => {
77
85
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, { viewBox: "0 0 16 16", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
78
86
  "path",
79
87
  {
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"
88
+ d: "M8.781 8l-3.3-3.3.943-.943L10.667 8l-4.243 4.243-.943-.943 3.3-3.3z",
89
+ fill: "currentColor"
82
90
  }
83
91
  ) });
84
92
  };
93
+ PaginationNextIcon.displayName = "PaginationNextIcon";
94
+ PaginationNextIcon.__ui__ = "PaginationNextIcon";
85
95
 
86
96
  // src/use-pagination.ts
87
97
  var import_use_controllable_state = require("@yamada-ui/use-controllable-state");
@@ -89,24 +99,24 @@ var import_use_value = require("@yamada-ui/use-value");
89
99
  var import_utils = require("@yamada-ui/utils");
90
100
  var import_react = require("react");
91
101
  var [PaginationProvider, usePaginationContext] = (0, import_utils.createContext)({
92
- strict: false,
93
- name: "PaginationContext"
102
+ name: "PaginationContext",
103
+ errorMessage: `usePaginationContext returned is 'undefined'. Seems you forgot to wrap the components in "<Pagination />"`
94
104
  });
95
105
  var computedRange = (start, end) => Array.from({ length: end - start + 1 }, (_, index) => index + start);
96
106
  var usePagination = ({
97
- page,
98
- defaultPage = 1,
99
- total,
100
- siblings: _siblings = 1,
101
107
  boundaries: _boundaries = 1,
108
+ defaultPage = 1,
102
109
  isDisabled = false,
110
+ page,
111
+ siblings: _siblings = 1,
112
+ total,
103
113
  onChange: onChangeProp
104
114
  }) => {
105
115
  const siblings = (0, import_use_value.useValue)(_siblings);
106
116
  const boundaries = (0, import_use_value.useValue)(_boundaries);
107
117
  const [currentPage, setCurrentPage] = (0, import_use_controllable_state.useControllableState)({
108
- value: page,
109
118
  defaultValue: defaultPage,
119
+ value: page,
110
120
  onChange: onChangeProp
111
121
  });
112
122
  const onFirst = (0, import_react.useCallback)(() => setCurrentPage(1), [setCurrentPage]);
@@ -137,7 +147,7 @@ var usePagination = ({
137
147
  const prevPages = siblings * 2 + boundaries + 2;
138
148
  return [
139
149
  ...computedRange(1, prevPages),
140
- "dots",
150
+ "ellipsis",
141
151
  ...computedRange(total - (boundaries - 1), total)
142
152
  ];
143
153
  }
@@ -145,47 +155,47 @@ var usePagination = ({
145
155
  const nextPages = boundaries + 1 + 2 * siblings;
146
156
  return [
147
157
  ...computedRange(1, boundaries),
148
- "dots",
158
+ "ellipsis",
149
159
  ...computedRange(total - nextPages, total)
150
160
  ];
151
161
  }
152
162
  return [
153
163
  ...computedRange(1, boundaries),
154
- "dots",
164
+ "ellipsis",
155
165
  ...computedRange(prevSiblings, nextSiblings),
156
- "dots",
166
+ "ellipsis",
157
167
  ...computedRange(total - boundaries + 1, total)
158
168
  ];
159
169
  }, [boundaries, siblings, currentPage, total]);
160
170
  return {
161
171
  currentPage,
162
- total,
163
172
  isDisabled,
173
+ range,
174
+ total,
175
+ onChange,
164
176
  onFirst,
165
177
  onLast,
166
- onPrev,
167
178
  onNext,
168
- onChange,
169
- range
179
+ onPrev
170
180
  };
171
181
  };
172
182
 
173
183
  // src/pagination-item.tsx
174
184
  var import_jsx_runtime2 = require("react/jsx-runtime");
175
185
  var iconMap = {
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
- first: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FirstIcon, {}),
180
- last: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(LastIcon, {})
186
+ ellipsis: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PaginationEllipsisIcon, {}),
187
+ first: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PaginationFirstIcon, {}),
188
+ last: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PaginationLastIcon, {}),
189
+ next: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PaginationNextIcon, {}),
190
+ prev: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PaginationPrevIcon, {})
181
191
  };
182
192
  var PaginationItem = ({
183
193
  className,
194
+ children,
195
+ disableRipple,
184
196
  isActive,
185
- page,
186
197
  isDisabled,
187
- disableRipple,
188
- children,
198
+ page,
189
199
  ...rest
190
200
  }) => {
191
201
  var _a;
@@ -196,24 +206,24 @@ var PaginationItem = ({
196
206
  });
197
207
  children != null ? children : children = (_a = iconMap[page]) != null ? _a : page;
198
208
  const css = {
199
- position: "relative",
200
- overflow: "hidden",
201
- userSelect: "none",
209
+ alignItems: "center",
202
210
  display: "flex",
203
211
  justifyContent: "center",
204
- alignItems: "center",
212
+ overflow: "hidden",
213
+ position: "relative",
214
+ userSelect: "none",
205
215
  ...styles.item,
206
216
  ...styles[page]
207
217
  };
208
218
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
209
219
  import_core.ui.button,
210
220
  {
211
- className: (0, import_utils2.cx)("ui-pagination__item", className),
212
221
  type: "button",
213
- tabIndex: page !== "dots" ? 0 : -1,
214
- disabled: isDisabled,
215
- "data-selected": (0, import_utils2.dataAttr)(isActive),
222
+ className: (0, import_utils2.cx)("ui-pagination__item", className),
216
223
  "data-disabled": (0, import_utils2.dataAttr)(isDisabled),
224
+ "data-selected": (0, import_utils2.dataAttr)(isActive),
225
+ disabled: isDisabled,
226
+ tabIndex: page !== "ellipsis" ? 0 : -1,
217
227
  __css: css,
218
228
  ...rest,
219
229
  onPointerDown,
@@ -224,6 +234,8 @@ var PaginationItem = ({
224
234
  }
225
235
  );
226
236
  };
237
+ PaginationItem.displayName = "PaginationItem";
238
+ PaginationItem.__ui__ = "PaginationItem";
227
239
 
228
240
  // src/pagination.tsx
229
241
  var import_jsx_runtime3 = require("react/jsx-runtime");
@@ -231,49 +243,49 @@ var Pagination = (0, import_core2.forwardRef)((props, ref) => {
231
243
  const [styles, mergedProps] = (0, import_core2.useComponentMultiStyle)("Pagination", props);
232
244
  const {
233
245
  className,
246
+ boundaries,
234
247
  component: Component = PaginationItem,
235
- itemProps,
248
+ defaultPage,
249
+ isDisabled,
250
+ page,
251
+ siblings,
252
+ total,
236
253
  withControls: _withControls = true,
237
254
  withEdges: _withEdges = false,
238
- innerProps,
239
- controlProps,
240
- controlPrevProps,
241
255
  controlNextProps,
242
- edgeProps,
256
+ controlPrevProps,
257
+ controlProps,
243
258
  edgeFirstProps,
244
259
  edgeLastProps,
245
- page,
246
- defaultPage,
247
- total,
248
- siblings,
249
- boundaries,
250
- isDisabled,
260
+ edgeProps,
261
+ innerProps,
262
+ itemProps,
251
263
  onChange: onChangeProp,
252
264
  ...rest
253
265
  } = (0, import_core2.omitThemeProps)(mergedProps);
254
266
  const withControls = (0, import_use_value2.useValue)(_withControls);
255
267
  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,
268
+ const { currentPage, range, onChange, onFirst, onLast, onNext, onPrev } = usePagination({
261
269
  boundaries,
270
+ defaultPage,
262
271
  isDisabled,
272
+ page,
273
+ siblings,
274
+ total,
263
275
  onChange: onChangeProp
264
276
  });
265
277
  const children = (0, import_react2.useMemo)(
266
278
  () => range.map((page2, key) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
267
279
  Component,
268
280
  {
269
- page: page2,
281
+ "aria-label": page2 === "ellipsis" ? "Jump to omitted pages" : `Go to page ${page2}`,
270
282
  isActive: currentPage === page2,
271
283
  isDisabled,
272
- "aria-label": page2 === "dots" ? "Jump to omitted pages" : `Go to page ${page2}`,
284
+ page: page2,
273
285
  ...itemProps,
274
286
  onClick: (0, import_utils3.handlerAll)(
275
287
  itemProps == null ? void 0 : itemProps.onClick,
276
- page2 !== "dots" ? () => onChange(page2) : void 0
288
+ page2 !== "ellipsis" ? () => onChange(page2) : void 0
277
289
  )
278
290
  },
279
291
  key
@@ -281,8 +293,8 @@ var Pagination = (0, import_core2.forwardRef)((props, ref) => {
281
293
  [Component, currentPage, isDisabled, onChange, range, itemProps]
282
294
  );
283
295
  const css = {
284
- display: "flex",
285
296
  alignItems: "center",
297
+ display: "flex",
286
298
  ...styles.container
287
299
  };
288
300
  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PaginationProvider, { value: styles, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
@@ -298,10 +310,10 @@ var Pagination = (0, import_core2.forwardRef)((props, ref) => {
298
310
  withEdges ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
299
311
  Component,
300
312
  {
301
- page: "first",
302
- "aria-label": "Go to first page",
303
313
  className: "ui-pagination__item--first",
314
+ "aria-label": "Go to first page",
304
315
  isDisabled: isDisabled || currentPage === 1,
316
+ page: "first",
305
317
  ...edgeProps,
306
318
  ...edgeFirstProps,
307
319
  onClick: (0, import_utils3.handlerAll)(
@@ -314,10 +326,10 @@ var Pagination = (0, import_core2.forwardRef)((props, ref) => {
314
326
  withControls ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
315
327
  Component,
316
328
  {
317
- page: "prev",
318
- "aria-label": "Go to previous page",
319
329
  className: "ui-pagination__item--prev",
330
+ "aria-label": "Go to previous page",
320
331
  isDisabled: isDisabled || currentPage === 1,
332
+ page: "prev",
321
333
  ...controlProps,
322
334
  ...controlPrevProps,
323
335
  onClick: (0, import_utils3.handlerAll)(
@@ -332,9 +344,9 @@ var Pagination = (0, import_core2.forwardRef)((props, ref) => {
332
344
  {
333
345
  className: "ui-pagination-inner",
334
346
  __css: {
347
+ alignItems: "center",
335
348
  display: "flex",
336
349
  justifyContent: "center",
337
- alignItems: "center",
338
350
  ...styles.inner
339
351
  },
340
352
  ...innerProps,
@@ -344,10 +356,10 @@ var Pagination = (0, import_core2.forwardRef)((props, ref) => {
344
356
  withControls ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
345
357
  Component,
346
358
  {
347
- page: "next",
348
- "aria-label": "Go to next page",
349
359
  className: "ui-pagination__item--next",
360
+ "aria-label": "Go to next page",
350
361
  isDisabled: isDisabled || currentPage === total,
362
+ page: "next",
351
363
  ...controlProps,
352
364
  ...controlNextProps,
353
365
  onClick: (0, import_utils3.handlerAll)(
@@ -360,10 +372,10 @@ var Pagination = (0, import_core2.forwardRef)((props, ref) => {
360
372
  withEdges ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
361
373
  Component,
362
374
  {
363
- page: "last",
364
- "aria-label": "Go to last page",
365
375
  className: "ui-pagination__item--last",
376
+ "aria-label": "Go to last page",
366
377
  isDisabled: isDisabled || currentPage === total,
378
+ page: "last",
367
379
  ...edgeProps,
368
380
  ...edgeLastProps,
369
381
  onClick: (0, import_utils3.handlerAll)(
@@ -377,6 +389,8 @@ var Pagination = (0, import_core2.forwardRef)((props, ref) => {
377
389
  }
378
390
  ) });
379
391
  });
392
+ Pagination.displayName = "Pagination";
393
+ Pagination.__ui__ = "Pagination";
380
394
  // Annotate the CommonJS export names for ESM import in node:
381
395
  0 && (module.exports = {
382
396
  Pagination
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/pagination.tsx","../src/pagination-item.tsx","../src/pagination-icon.tsx","../src/use-pagination.ts"],"sourcesContent":["import type {\n CSSUIObject,\n HTMLUIProps,\n ThemeProps,\n Token,\n} from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n useComponentMultiStyle,\n omitThemeProps,\n} from \"@yamada-ui/core\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport { cx, dataAttr, handlerAll } from \"@yamada-ui/utils\"\nimport type { ComponentPropsWithoutRef, FC } from \"react\"\nimport { useMemo } from \"react\"\nimport type { PaginationItemProps } from \"./pagination-item\"\nimport { PaginationItem } from \"./pagination-item\"\nimport type { UsePaginationProps } from \"./use-pagination\"\nimport { PaginationProvider, usePagination } from \"./use-pagination\"\n\ninterface PaginationOptions {\n /**\n * The pagination button component to use.\n */\n component?: FC<PaginationItemProps>\n /**\n * Props for button element.\n */\n itemProps?: HTMLUIProps<\"button\">\n /**\n * If `true`, display the control buttons.\n *\n * @default true\n */\n withControls?: Token<boolean>\n /**\n * Props for inner element.\n */\n innerProps?: HTMLUIProps\n /**\n * Props for control button element.\n */\n controlProps?: HTMLUIProps<\"button\">\n /**\n * Props for previous of the control button element.\n */\n controlPrevProps?: HTMLUIProps<\"button\">\n /**\n * Props for next of the control button element.\n */\n controlNextProps?: HTMLUIProps<\"button\">\n /**\n * If `true`, display the edge buttons.\n *\n * @default false\n */\n withEdges?: Token<boolean>\n /**\n * Props for edge button element.\n */\n edgeProps?: HTMLUIProps<\"button\">\n /**\n * Props for first of the edge button element.\n */\n edgeFirstProps?: HTMLUIProps<\"button\">\n /**\n * Props for last of the edge button element.\n */\n edgeLastProps?: HTMLUIProps<\"button\">\n}\n\nexport interface PaginationProps\n extends Omit<HTMLUIProps, \"onChange\" | \"children\" | \"page\">,\n ThemeProps<\"Pagination\">,\n UsePaginationProps,\n PaginationOptions {}\n\n/**\n * `Pagination` is a component for managing the pagination and navigation of content.\n *\n * @see Docs https://yamada-ui.com/components/navigation/pagination\n */\nexport const Pagination = forwardRef<PaginationProps, \"div\">((props, ref) => {\n const [styles, mergedProps] = useComponentMultiStyle(\"Pagination\", props)\n const {\n className,\n component: Component = PaginationItem,\n itemProps,\n withControls: _withControls = true,\n withEdges: _withEdges = false,\n innerProps,\n controlProps,\n controlPrevProps,\n controlNextProps,\n edgeProps,\n edgeFirstProps,\n edgeLastProps,\n page,\n defaultPage,\n total,\n siblings,\n boundaries,\n isDisabled,\n onChange: onChangeProp,\n ...rest\n } = omitThemeProps(mergedProps)\n\n const withControls = useValue(_withControls)\n const withEdges = useValue(_withEdges)\n\n const { currentPage, onFirst, onLast, onPrev, onNext, onChange, range } =\n usePagination({\n page,\n defaultPage,\n total,\n siblings,\n boundaries,\n isDisabled,\n onChange: onChangeProp,\n })\n\n const children = useMemo(\n () =>\n range.map((page, key) => (\n <Component\n key={key}\n page={page}\n isActive={currentPage === page}\n isDisabled={isDisabled}\n aria-label={\n page === \"dots\" ? \"Jump to omitted pages\" : `Go to page ${page}`\n }\n {...(itemProps as ComponentPropsWithoutRef<\"button\">)}\n onClick={handlerAll(\n itemProps?.onClick,\n page !== \"dots\" ? () => onChange(page) : undefined,\n )}\n />\n )),\n [Component, currentPage, isDisabled, onChange, range, itemProps],\n )\n\n const css: CSSUIObject = {\n display: \"flex\",\n alignItems: \"center\",\n ...styles.container,\n }\n\n return (\n <PaginationProvider value={styles}>\n <ui.div\n ref={ref}\n className={cx(\"ui-pagination\", className)}\n role=\"navigation\"\n __css={css}\n {...rest}\n data-disabled={dataAttr(isDisabled)}\n >\n {withEdges ? (\n <Component\n page=\"first\"\n aria-label=\"Go to first page\"\n className=\"ui-pagination__item--first\"\n isDisabled={isDisabled || currentPage === 1}\n {...(edgeProps as ComponentPropsWithoutRef<\"button\">)}\n {...(edgeFirstProps as ComponentPropsWithoutRef<\"button\">)}\n onClick={handlerAll(\n edgeProps?.onClick,\n edgeFirstProps?.onClick,\n onFirst,\n )}\n />\n ) : null}\n\n {withControls ? (\n <Component\n page=\"prev\"\n aria-label=\"Go to previous page\"\n className=\"ui-pagination__item--prev\"\n isDisabled={isDisabled || currentPage === 1}\n {...(controlProps as ComponentPropsWithoutRef<\"button\">)}\n {...(controlPrevProps as ComponentPropsWithoutRef<\"button\">)}\n onClick={handlerAll(\n controlProps?.onClick,\n controlPrevProps?.onClick,\n onPrev,\n )}\n />\n ) : null}\n\n <ui.div\n className=\"ui-pagination-inner\"\n __css={{\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n ...styles.inner,\n }}\n {...innerProps}\n >\n {children}\n </ui.div>\n\n {withControls ? (\n <Component\n page=\"next\"\n aria-label=\"Go to next page\"\n className=\"ui-pagination__item--next\"\n isDisabled={isDisabled || currentPage === total}\n {...(controlProps as ComponentPropsWithoutRef<\"button\">)}\n {...(controlNextProps as ComponentPropsWithoutRef<\"button\">)}\n onClick={handlerAll(\n controlProps?.onClick,\n controlNextProps?.onClick,\n onNext,\n )}\n />\n ) : null}\n\n {withEdges ? (\n <Component\n page=\"last\"\n aria-label=\"Go to last page\"\n className=\"ui-pagination__item--last\"\n isDisabled={isDisabled || currentPage === total}\n {...(edgeProps as ComponentPropsWithoutRef<\"button\">)}\n {...(edgeLastProps as ComponentPropsWithoutRef<\"button\">)}\n onClick={handlerAll(\n edgeProps?.onClick,\n edgeLastProps?.onClick,\n onLast,\n )}\n />\n ) : null}\n </ui.div>\n </PaginationProvider>\n )\n})\n","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":"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","names":["import_core","import_use_value","import_utils","import_react","import_utils","page","import_jsx_runtime","import_jsx_runtime","page"]}
1
+ {"version":3,"sources":["../src/pagination.tsx","../src/pagination-item.tsx","../src/pagination-icon.tsx","../src/use-pagination.ts"],"sourcesContent":["import type {\n CSSUIObject,\n HTMLUIProps,\n ThemeProps,\n Token,\n} from \"@yamada-ui/core\"\nimport type { ComponentPropsWithoutRef, FC } from \"react\"\nimport type { PaginationItemProps } from \"./pagination-item\"\nimport type { UsePaginationProps } from \"./use-pagination\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport { cx, dataAttr, handlerAll } from \"@yamada-ui/utils\"\nimport { useMemo } from \"react\"\nimport { PaginationItem } from \"./pagination-item\"\nimport { PaginationProvider, usePagination } from \"./use-pagination\"\n\ninterface PaginationOptions {\n /**\n * The pagination button component to use.\n */\n component?: FC<PaginationItemProps>\n /**\n * If `true`, display the control buttons.\n *\n * @default true\n */\n withControls?: Token<boolean>\n /**\n * If `true`, display the edge buttons.\n *\n * @default false\n */\n withEdges?: Token<boolean>\n /**\n * Props for next of the control button element.\n */\n controlNextProps?: HTMLUIProps<\"button\">\n /**\n * Props for previous of the control button element.\n */\n controlPrevProps?: HTMLUIProps<\"button\">\n /**\n * Props for control button element.\n */\n controlProps?: HTMLUIProps<\"button\">\n /**\n * Props for first of the edge button element.\n */\n edgeFirstProps?: HTMLUIProps<\"button\">\n /**\n * Props for last of the edge button element.\n */\n edgeLastProps?: HTMLUIProps<\"button\">\n /**\n * Props for edge button element.\n */\n edgeProps?: HTMLUIProps<\"button\">\n /**\n * Props for inner element.\n */\n innerProps?: HTMLUIProps\n /**\n * Props for button element.\n */\n itemProps?: HTMLUIProps<\"button\">\n}\n\nexport interface PaginationProps\n extends Omit<HTMLUIProps, \"children\" | \"onChange\" | \"page\">,\n ThemeProps<\"Pagination\">,\n UsePaginationProps,\n PaginationOptions {}\n\n/**\n * `Pagination` is a component for managing the pagination and navigation of content.\n *\n * @see Docs https://yamada-ui.com/components/navigation/pagination\n */\nexport const Pagination = forwardRef<PaginationProps, \"div\">((props, ref) => {\n const [styles, mergedProps] = useComponentMultiStyle(\"Pagination\", props)\n const {\n className,\n boundaries,\n component: Component = PaginationItem,\n defaultPage,\n isDisabled,\n page,\n siblings,\n total,\n withControls: _withControls = true,\n withEdges: _withEdges = false,\n controlNextProps,\n controlPrevProps,\n controlProps,\n edgeFirstProps,\n edgeLastProps,\n edgeProps,\n innerProps,\n itemProps,\n onChange: onChangeProp,\n ...rest\n } = omitThemeProps(mergedProps)\n\n const withControls = useValue(_withControls)\n const withEdges = useValue(_withEdges)\n\n const { currentPage, range, onChange, onFirst, onLast, onNext, onPrev } =\n usePagination({\n boundaries,\n defaultPage,\n isDisabled,\n page,\n siblings,\n total,\n onChange: onChangeProp,\n })\n\n const children = useMemo(\n () =>\n range.map((page, key) => (\n <Component\n key={key}\n aria-label={\n page === \"ellipsis\" ? \"Jump to omitted pages\" : `Go to page ${page}`\n }\n isActive={currentPage === page}\n isDisabled={isDisabled}\n page={page}\n {...(itemProps as ComponentPropsWithoutRef<\"button\">)}\n onClick={handlerAll(\n itemProps?.onClick,\n page !== \"ellipsis\" ? () => onChange(page) : undefined,\n )}\n />\n )),\n [Component, currentPage, isDisabled, onChange, range, itemProps],\n )\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n display: \"flex\",\n ...styles.container,\n }\n\n return (\n <PaginationProvider value={styles}>\n <ui.div\n ref={ref}\n className={cx(\"ui-pagination\", className)}\n role=\"navigation\"\n __css={css}\n {...rest}\n data-disabled={dataAttr(isDisabled)}\n >\n {withEdges ? (\n <Component\n className=\"ui-pagination__item--first\"\n aria-label=\"Go to first page\"\n isDisabled={isDisabled || currentPage === 1}\n page=\"first\"\n {...(edgeProps as ComponentPropsWithoutRef<\"button\">)}\n {...(edgeFirstProps as ComponentPropsWithoutRef<\"button\">)}\n onClick={handlerAll(\n edgeProps?.onClick,\n edgeFirstProps?.onClick,\n onFirst,\n )}\n />\n ) : null}\n\n {withControls ? (\n <Component\n className=\"ui-pagination__item--prev\"\n aria-label=\"Go to previous page\"\n isDisabled={isDisabled || currentPage === 1}\n page=\"prev\"\n {...(controlProps as ComponentPropsWithoutRef<\"button\">)}\n {...(controlPrevProps as ComponentPropsWithoutRef<\"button\">)}\n onClick={handlerAll(\n controlProps?.onClick,\n controlPrevProps?.onClick,\n onPrev,\n )}\n />\n ) : null}\n\n <ui.div\n className=\"ui-pagination-inner\"\n __css={{\n alignItems: \"center\",\n display: \"flex\",\n justifyContent: \"center\",\n ...styles.inner,\n }}\n {...innerProps}\n >\n {children}\n </ui.div>\n\n {withControls ? (\n <Component\n className=\"ui-pagination__item--next\"\n aria-label=\"Go to next page\"\n isDisabled={isDisabled || currentPage === total}\n page=\"next\"\n {...(controlProps as ComponentPropsWithoutRef<\"button\">)}\n {...(controlNextProps as ComponentPropsWithoutRef<\"button\">)}\n onClick={handlerAll(\n controlProps?.onClick,\n controlNextProps?.onClick,\n onNext,\n )}\n />\n ) : null}\n\n {withEdges ? (\n <Component\n className=\"ui-pagination__item--last\"\n aria-label=\"Go to last page\"\n isDisabled={isDisabled || currentPage === total}\n page=\"last\"\n {...(edgeProps as ComponentPropsWithoutRef<\"button\">)}\n {...(edgeLastProps as ComponentPropsWithoutRef<\"button\">)}\n onClick={handlerAll(\n edgeProps?.onClick,\n edgeLastProps?.onClick,\n onLast,\n )}\n />\n ) : null}\n </ui.div>\n </PaginationProvider>\n )\n})\n\nPagination.displayName = \"Pagination\"\nPagination.__ui__ = \"Pagination\"\n","import type { CSSUIObject, FC } from \"@yamada-ui/core\"\nimport type { ComponentPropsWithoutRef, 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 PaginationEllipsisIcon,\n PaginationFirstIcon,\n PaginationLastIcon,\n PaginationNextIcon,\n PaginationPrevIcon,\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: \"ellipsis\" | \"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 \"ellipsis\" | \"first\" | \"last\" | \"next\" | \"prev\" | number]: ReactNode\n} = {\n ellipsis: <PaginationEllipsisIcon />,\n first: <PaginationFirstIcon />,\n last: <PaginationLastIcon />,\n next: <PaginationNextIcon />,\n prev: <PaginationPrevIcon />,\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 data-disabled={dataAttr(isDisabled)}\n data-selected={dataAttr(isActive)}\n disabled={isDisabled}\n tabIndex={page !== \"ellipsis\" ? 0 : -1}\n __css={css}\n {...rest}\n onPointerDown={onPointerDown}\n >\n {children}\n\n <Ripple isDisabled={disableRipple || isDisabled} {...rippleProps} />\n </ui.button>\n )\n}\nPaginationItem.displayName = \"PaginationItem\"\nPaginationItem.__ui__ = \"PaginationItem\"\n","import type { FC } from \"@yamada-ui/core\"\nimport type { IconProps } from \"@yamada-ui/icon\"\nimport { Icon } from \"@yamada-ui/icon\"\n\nexport const PaginationEllipsisIcon: 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\nPaginationEllipsisIcon.displayName = \"PaginationEllipsisIcon\"\nPaginationEllipsisIcon.__ui__ = \"PaginationEllipsisIcon\"\n\nexport const PaginationFirstIcon: 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\nPaginationFirstIcon.displayName = \"PaginationFirstIcon\"\nPaginationFirstIcon.__ui__ = \"PaginationFirstIcon\"\n\nexport const PaginationLastIcon: 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\nPaginationLastIcon.displayName = \"PaginationLastIcon\"\nPaginationLastIcon.__ui__ = \"PaginationLastIcon\"\n\nexport const PaginationPrevIcon: 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\nPaginationPrevIcon.displayName = \"PaginationPrevIcon\"\nPaginationPrevIcon.__ui__ = \"PaginationPrevIcon\"\n\nexport const PaginationNextIcon: 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\nPaginationNextIcon.displayName = \"PaginationNextIcon\"\nPaginationNextIcon.__ui__ = \"PaginationNextIcon\"\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((): (\"ellipsis\" | 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 \"ellipsis\",\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 \"ellipsis\",\n ...computedRange(total - nextPages, total),\n ]\n }\n\n return [\n ...computedRange(1, boundaries),\n \"ellipsis\",\n ...computedRange(prevSiblings, nextSiblings),\n \"ellipsis\",\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":"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","names":["import_core","import_use_value","import_utils","import_react","import_utils","page","import_jsx_runtime","import_jsx_runtime","page"]}
@@ -1,10 +1,10 @@
1
1
  "use client"
2
2
  import {
3
3
  Pagination
4
- } from "./chunk-SUUC5YDJ.mjs";
5
- import "./chunk-UK2DDH2Q.mjs";
6
- import "./chunk-FAA64ZR4.mjs";
7
- import "./chunk-CDBANJFO.mjs";
4
+ } from "./chunk-E35BXOXS.mjs";
5
+ import "./chunk-PUQ5FNCP.mjs";
6
+ import "./chunk-VZWGYG76.mjs";
7
+ import "./chunk-O6EIBNLC.mjs";
8
8
  export {
9
9
  Pagination
10
10
  };
@@ -2,60 +2,60 @@ import * as react from 'react';
2
2
  import { Token, CSSUIObject } from '@yamada-ui/core';
3
3
 
4
4
  interface PaginationContext {
5
- [key: string]: CSSUIObject;
5
+ [key: string]: CSSUIObject | undefined;
6
6
  }
7
7
  declare const PaginationProvider: react.Provider<PaginationContext>;
8
8
  declare const usePaginationContext: () => PaginationContext;
9
9
  declare const computedRange: (start: number, end: number) => number[];
10
10
  interface UsePaginationProps {
11
- /**
12
- * The page of the pagination.
13
- * Should be less than `total` and greater than `1`.
14
- */
15
- page?: number;
16
- /**
17
- * The initial page of the pagination.
18
- * Should be less than `total` and greater than `1`.
19
- *
20
- * @default 1
21
- */
22
- defaultPage?: number;
23
11
  /**
24
12
  * The total number of pages in pagination.
25
13
  */
26
14
  total: number;
27
- /** Number of siblings displayed on the left/right side of selected page.
15
+ /**
16
+ * Number of elements visible on the left/right edges.
28
17
  *
29
18
  * @default 1
30
19
  */
31
- siblings?: Token<number>;
20
+ boundaries?: Token<number>;
32
21
  /**
33
- * Number of elements visible on the left/right edges.
22
+ * The initial page of the pagination.
23
+ * Should be less than `total` and greater than `1`.
34
24
  *
35
25
  * @default 1
36
26
  */
37
- boundaries?: Token<number>;
27
+ defaultPage?: number;
38
28
  /**
39
29
  * If `true`, the pagination all item will be disabled.
40
30
  *
41
31
  * @default false
42
32
  */
43
33
  isDisabled?: boolean;
34
+ /**
35
+ * The page of the pagination.
36
+ * Should be less than `total` and greater than `1`.
37
+ */
38
+ page?: number;
39
+ /** Number of siblings displayed on the left/right side of selected page.
40
+ *
41
+ * @default 1
42
+ */
43
+ siblings?: Token<number>;
44
44
  /**
45
45
  * The callback invoked when the page changes.
46
46
  */
47
47
  onChange?: (page: number) => void;
48
48
  }
49
- declare const usePagination: ({ page, defaultPage, total, siblings: _siblings, boundaries: _boundaries, isDisabled, onChange: onChangeProp, }: UsePaginationProps) => {
49
+ declare const usePagination: ({ boundaries: _boundaries, defaultPage, isDisabled, page, siblings: _siblings, total, onChange: onChangeProp, }: UsePaginationProps) => {
50
50
  currentPage: number;
51
- total: number;
52
51
  isDisabled: boolean;
52
+ range: (number | "ellipsis")[];
53
+ total: number;
54
+ onChange: (page: number) => void;
53
55
  onFirst: () => void;
54
56
  onLast: () => void;
55
- onPrev: () => void;
56
57
  onNext: () => void;
57
- onChange: (page: number) => void;
58
- range: (number | "dots")[];
58
+ onPrev: () => void;
59
59
  };
60
60
  type UsePaginationReturn = ReturnType<typeof usePagination>;
61
61