@yamada-ui/pagination 2.0.0-next-20240825145710 → 2.0.0-next-20240921202825

Sign up to get free protection for your applications and to get access to all the features.
@@ -99,4 +99,4 @@ export {
99
99
  computedRange,
100
100
  usePagination
101
101
  };
102
- //# sourceMappingURL=chunk-UUTVIFJX.mjs.map
102
+ //# sourceMappingURL=chunk-7Y7MYI7Z.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/use-pagination.ts"],"sourcesContent":["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 = 1,\n boundaries = 1,\n isDisabled = false,\n onChange: onChangeProp,\n}: UsePaginationProps) => {\n const computedSiblings = useValue(siblings)\n const computedBoundaries = 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 = computedSiblings * 2 + 3 + computedBoundaries * 2\n\n if (minimumTotal >= total) return computedRange(1, total)\n\n const prevSiblings = Math.max(\n currentPage - computedSiblings,\n computedBoundaries,\n )\n const nextSiblings = Math.min(\n currentPage + computedSiblings,\n total - computedBoundaries,\n )\n\n const prevDots = prevSiblings > computedBoundaries + 2\n const nextDots = nextSiblings < total - (computedBoundaries + 1)\n\n if (!prevDots && nextDots) {\n const prevPages = computedSiblings * 2 + computedBoundaries + 2\n\n return [\n ...computedRange(1, prevPages),\n \"dots\",\n ...computedRange(total - (computedBoundaries - 1), total),\n ]\n }\n\n if (prevDots && !nextDots) {\n const nextPages = computedBoundaries + 1 + 2 * computedSiblings\n\n return [\n ...computedRange(1, computedBoundaries),\n \"dots\",\n ...computedRange(total - nextPages, total),\n ]\n }\n\n return [\n ...computedRange(1, computedBoundaries),\n \"dots\",\n ...computedRange(prevSiblings, nextSiblings),\n \"dots\",\n ...computedRange(total - computedBoundaries + 1, total),\n ]\n }, [computedBoundaries, computedSiblings, 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":";;;AACA,SAAS,4BAA4B;AACrC,SAAS,gBAAgB;AACzB,SAAS,qBAAqB;AAC9B,SAAS,aAAa,eAAe;AAM9B,IAAM,CAAC,oBAAoB,oBAAoB,IACpD,cAAiC;AAAA,EAC/B,QAAQ;AAAA,EACR,MAAM;AACR,CAAC;AAEI,IAAM,gBAAgB,CAAC,OAAe,QAC3C,MAAM,KAAK,EAAE,QAAQ,MAAM,QAAQ,EAAE,GAAG,CAAC,GAAG,UAAU,QAAQ,KAAK;AA0C9D,IAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA,WAAW;AAAA,EACX,aAAa;AAAA,EACb,aAAa;AAAA,EACb,UAAU;AACZ,MAA0B;AACxB,QAAM,mBAAmB,SAAS,QAAQ;AAC1C,QAAM,qBAAqB,SAAS,UAAU;AAE9C,QAAM,CAAC,aAAa,cAAc,IAAI,qBAAqB;AAAA,IACzD,OAAO;AAAA,IACP,cAAc;AAAA,IACd,UAAU;AAAA,EACZ,CAAC;AAED,QAAM,UAAU,YAAY,MAAM,eAAe,CAAC,GAAG,CAAC,cAAc,CAAC;AAErE,QAAM,SAAS;AAAA,IACb,MAAM,eAAe,KAAK;AAAA,IAC1B,CAAC,gBAAgB,KAAK;AAAA,EACxB;AAEA,QAAM,SAAS;AAAA,IACb,MAAM,eAAe,CAAC,SAAU,SAAS,IAAI,OAAO,OAAO,CAAE;AAAA,IAC7D,CAAC,cAAc;AAAA,EACjB;AAEA,QAAM,SAAS;AAAA,IACb,MAAM,eAAe,CAAC,SAAU,SAAS,QAAQ,OAAO,OAAO,CAAE;AAAA,IACjE,CAAC,gBAAgB,KAAK;AAAA,EACxB;AAEA,QAAM,WAAW;AAAA,IACf,CAACA,UAAiB,eAAeA,KAAI;AAAA,IACrC,CAAC,cAAc;AAAA,EACjB;AAEA,QAAM,QAAQ,QAAQ,MAA2B;AAC/C,UAAM,eAAe,mBAAmB,IAAI,IAAI,qBAAqB;AAErE,QAAI,gBAAgB,MAAO,QAAO,cAAc,GAAG,KAAK;AAExD,UAAM,eAAe,KAAK;AAAA,MACxB,cAAc;AAAA,MACd;AAAA,IACF;AACA,UAAM,eAAe,KAAK;AAAA,MACxB,cAAc;AAAA,MACd,QAAQ;AAAA,IACV;AAEA,UAAM,WAAW,eAAe,qBAAqB;AACrD,UAAM,WAAW,eAAe,SAAS,qBAAqB;AAE9D,QAAI,CAAC,YAAY,UAAU;AACzB,YAAM,YAAY,mBAAmB,IAAI,qBAAqB;AAE9D,aAAO;AAAA,QACL,GAAG,cAAc,GAAG,SAAS;AAAA,QAC7B;AAAA,QACA,GAAG,cAAc,SAAS,qBAAqB,IAAI,KAAK;AAAA,MAC1D;AAAA,IACF;AAEA,QAAI,YAAY,CAAC,UAAU;AACzB,YAAM,YAAY,qBAAqB,IAAI,IAAI;AAE/C,aAAO;AAAA,QACL,GAAG,cAAc,GAAG,kBAAkB;AAAA,QACtC;AAAA,QACA,GAAG,cAAc,QAAQ,WAAW,KAAK;AAAA,MAC3C;AAAA,IACF;AAEA,WAAO;AAAA,MACL,GAAG,cAAc,GAAG,kBAAkB;AAAA,MACtC;AAAA,MACA,GAAG,cAAc,cAAc,YAAY;AAAA,MAC3C;AAAA,MACA,GAAG,cAAc,QAAQ,qBAAqB,GAAG,KAAK;AAAA,IACxD;AAAA,EACF,GAAG,CAAC,oBAAoB,kBAAkB,aAAa,KAAK,CAAC;AAE7D,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;","names":["page"]}
@@ -8,7 +8,7 @@ import {
8
8
  } from "./chunk-FAA64ZR4.mjs";
9
9
  import {
10
10
  usePaginationContext
11
- } from "./chunk-UUTVIFJX.mjs";
11
+ } from "./chunk-7Y7MYI7Z.mjs";
12
12
 
13
13
  // src/pagination-item.tsx
14
14
  import { ui } from "@yamada-ui/core";
@@ -65,4 +65,4 @@ var PaginationItem = ({
65
65
  export {
66
66
  PaginationItem
67
67
  };
68
- //# sourceMappingURL=chunk-LMH7UMWH.mjs.map
68
+ //# sourceMappingURL=chunk-KG5N2WFP.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/pagination-item.tsx"],"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 ...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"],"mappings":";;;;;;;;;;;;;AACA,SAAS,UAAU;AACnB,SAAS,QAAQ,iBAAiB;AAClC,SAAS,IAAI,gBAAgB;AA2CrB,cA8BJ,YA9BI;AAHR,IAAM,UAEF;AAAA,EACF,MAAM,oBAAC,YAAS;AAAA,EAChB,MAAM,oBAAC,YAAS;AAAA,EAChB,MAAM,oBAAC,YAAS;AAAA,EAChB,OAAO,oBAAC,aAAU;AAAA,EAClB,MAAM,oBAAC,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,IAAI,UAAU;AAAA,IAClD,GAAG;AAAA,IACH,YAAY,iBAAiB;AAAA,EAC/B,CAAC;AAED,4CAAa,aAAQ,IAAI,MAAZ,YAAiB;AAE9B,QAAM,MAAmB;AAAA,IACvB,GAAG,OAAO;AAAA,IACV,GAAG,OAAO,IAAI;AAAA,EAChB;AAEA,SACE;AAAA,IAAC,GAAG;AAAA,IAAH;AAAA,MACC,WAAW,GAAG,uBAAuB,SAAS;AAAA,MAC9C,MAAK;AAAA,MACL,UAAU,SAAS,SAAS,IAAI;AAAA,MAChC,UAAU;AAAA,MACV,iBAAe,SAAS,QAAQ;AAAA,MAChC,iBAAe,SAAS,UAAU;AAAA,MAClC,OAAO;AAAA,MACN,GAAG;AAAA,MACJ;AAAA,MAEC;AAAA;AAAA,QAED,oBAAC,UAAO,YAAY,iBAAiB,YAAa,GAAG,aAAa;AAAA;AAAA;AAAA,EACpE;AAEJ;","names":[]}
@@ -1,17 +1,17 @@
1
1
  "use client"
2
2
  import {
3
3
  PaginationItem
4
- } from "./chunk-LMH7UMWH.mjs";
4
+ } from "./chunk-KG5N2WFP.mjs";
5
5
  import {
6
6
  PaginationProvider,
7
7
  usePagination
8
- } from "./chunk-UUTVIFJX.mjs";
8
+ } from "./chunk-7Y7MYI7Z.mjs";
9
9
 
10
10
  // src/pagination.tsx
11
11
  import {
12
12
  ui,
13
13
  forwardRef,
14
- useMultiComponentStyle,
14
+ useComponentMultiStyle,
15
15
  omitThemeProps
16
16
  } from "@yamada-ui/core";
17
17
  import { useValue } from "@yamada-ui/use-value";
@@ -19,7 +19,7 @@ import { cx, dataAttr, handlerAll } from "@yamada-ui/utils";
19
19
  import { useMemo } from "react";
20
20
  import { jsx, jsxs } from "react/jsx-runtime";
21
21
  var Pagination = forwardRef((props, ref) => {
22
- const [styles, mergedProps] = useMultiComponentStyle("Pagination", props);
22
+ const [styles, mergedProps] = useComponentMultiStyle("Pagination", props);
23
23
  const {
24
24
  className,
25
25
  component: Component = PaginationItem,
@@ -167,4 +167,4 @@ var Pagination = forwardRef((props, ref) => {
167
167
  export {
168
168
  Pagination
169
169
  };
170
- //# sourceMappingURL=chunk-JVM3RLNQ.mjs.map
170
+ //# sourceMappingURL=chunk-QRNAYHW7.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/pagination.tsx"],"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 = true,\n 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 computedWithControls = useValue(withControls)\n const computedWithEdges = 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 ...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 {computedWithEdges ? (\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 {computedWithControls ? (\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 ...styles.inner,\n }}\n {...innerProps}\n >\n {children}\n </ui.div>\n\n {computedWithControls ? (\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 {computedWithEdges ? (\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"],"mappings":"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","names":["page"]}
package/dist/index.js CHANGED
@@ -231,7 +231,7 @@ var PaginationItem = ({
231
231
  // src/pagination.tsx
232
232
  var import_jsx_runtime3 = require("react/jsx-runtime");
233
233
  var Pagination = (0, import_core2.forwardRef)((props, ref) => {
234
- const [styles, mergedProps] = (0, import_core2.useMultiComponentStyle)("Pagination", props);
234
+ const [styles, mergedProps] = (0, import_core2.useComponentMultiStyle)("Pagination", props);
235
235
  const {
236
236
  className,
237
237
  component: Component = PaginationItem,
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts","../src/pagination.tsx","../src/pagination-item.tsx","../src/pagination-icon.tsx","../src/use-pagination.ts"],"sourcesContent":["export { Pagination } from \"./pagination\"\nexport type { PaginationProps } from \"./pagination\"\nexport { usePagination } from \"./use-pagination\"\nexport type { UsePaginationProps, UsePaginationReturn } from \"./use-pagination\"\n","import type {\n CSSUIObject,\n HTMLUIProps,\n ThemeProps,\n Token,\n} from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n useMultiComponentStyle,\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\ntype 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<\"div\">\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 type PaginationProps = Omit<\n HTMLUIProps<\"div\">,\n \"onChange\" | \"children\" | \"page\"\n> &\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] = useMultiComponentStyle(\"Pagination\", props)\n const {\n className,\n component: Component = PaginationItem,\n itemProps,\n withControls = true,\n 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 computedWithControls = useValue(withControls)\n const computedWithEdges = 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 ...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 {computedWithEdges ? (\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 {computedWithControls ? (\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 ...styles.inner,\n }}\n {...innerProps}\n >\n {children}\n </ui.div>\n\n {computedWithControls ? (\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 {computedWithEdges ? (\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\ntype 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 type PaginationItemProps = ComponentPropsWithoutRef<\"button\"> &\n PaginationItemOptions\n\nconst iconMap: Record<\n number | \"dots\" | \"prev\" | \"next\" | \"first\" | \"last\",\n 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 ...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\ntype PaginationContext = Record<string, CSSUIObject>\n\nexport const [PaginationProvider, usePaginationContext] =\n createContext<PaginationContext>({\n strict: false,\n name: \"PaginationContext\",\n })\n\nexport type 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 computedRange = (start: number, end: number) =>\n Array.from({ length: end - start + 1 }, (_, index) => index + start)\n\nexport const usePagination = ({\n page,\n defaultPage = 1,\n total,\n siblings = 1,\n boundaries = 1,\n isDisabled = false,\n onChange: onChangeProp,\n}: UsePaginationProps) => {\n const computedSiblings = useValue(siblings)\n const computedBoundaries = 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 = computedSiblings * 2 + 3 + computedBoundaries * 2\n\n if (minimumTotal >= total) return computedRange(1, total)\n\n const prevSiblings = Math.max(\n currentPage - computedSiblings,\n computedBoundaries,\n )\n const nextSiblings = Math.min(\n currentPage + computedSiblings,\n total - computedBoundaries,\n )\n\n const prevDots = prevSiblings > computedBoundaries + 2\n const nextDots = nextSiblings < total - (computedBoundaries + 1)\n\n if (!prevDots && nextDots) {\n const prevPages = computedSiblings * 2 + computedBoundaries + 2\n\n return [\n ...computedRange(1, prevPages),\n \"dots\",\n ...computedRange(total - (computedBoundaries - 1), total),\n ]\n }\n\n if (prevDots && !nextDots) {\n const nextPages = computedBoundaries + 1 + 2 * computedSiblings\n\n return [\n ...computedRange(1, computedBoundaries),\n \"dots\",\n ...computedRange(total - nextPages, total),\n ]\n }\n\n return [\n ...computedRange(1, computedBoundaries),\n \"dots\",\n ...computedRange(prevSiblings, nextSiblings),\n \"dots\",\n ...computedRange(total - computedBoundaries + 1, total),\n ]\n }, [computedBoundaries, computedSiblings, 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/index.ts","../src/pagination.tsx","../src/pagination-item.tsx","../src/pagination-icon.tsx","../src/use-pagination.ts"],"sourcesContent":["export { Pagination } from \"./pagination\"\nexport type { PaginationProps } from \"./pagination\"\nexport { usePagination } from \"./use-pagination\"\nexport type { UsePaginationProps, UsePaginationReturn } from \"./use-pagination\"\n","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 = true,\n 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 computedWithControls = useValue(withControls)\n const computedWithEdges = 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 ...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 {computedWithEdges ? (\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 {computedWithControls ? (\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 ...styles.inner,\n }}\n {...innerProps}\n >\n {children}\n </ui.div>\n\n {computedWithControls ? (\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 {computedWithEdges ? (\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 ...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 = 1,\n boundaries = 1,\n isDisabled = false,\n onChange: onChangeProp,\n}: UsePaginationProps) => {\n const computedSiblings = useValue(siblings)\n const computedBoundaries = 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 = computedSiblings * 2 + 3 + computedBoundaries * 2\n\n if (minimumTotal >= total) return computedRange(1, total)\n\n const prevSiblings = Math.max(\n currentPage - computedSiblings,\n computedBoundaries,\n )\n const nextSiblings = Math.min(\n currentPage + computedSiblings,\n total - computedBoundaries,\n )\n\n const prevDots = prevSiblings > computedBoundaries + 2\n const nextDots = nextSiblings < total - (computedBoundaries + 1)\n\n if (!prevDots && nextDots) {\n const prevPages = computedSiblings * 2 + computedBoundaries + 2\n\n return [\n ...computedRange(1, prevPages),\n \"dots\",\n ...computedRange(total - (computedBoundaries - 1), total),\n ]\n }\n\n if (prevDots && !nextDots) {\n const nextPages = computedBoundaries + 1 + 2 * computedSiblings\n\n return [\n ...computedRange(1, computedBoundaries),\n \"dots\",\n ...computedRange(total - nextPages, total),\n ]\n }\n\n return [\n ...computedRange(1, computedBoundaries),\n \"dots\",\n ...computedRange(prevSiblings, nextSiblings),\n \"dots\",\n ...computedRange(total - computedBoundaries + 1, total),\n ]\n }, [computedBoundaries, computedSiblings, 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"]}
package/dist/index.mjs CHANGED
@@ -1,12 +1,12 @@
1
1
  "use client"
2
2
  import {
3
3
  Pagination
4
- } from "./chunk-JVM3RLNQ.mjs";
5
- import "./chunk-LMH7UMWH.mjs";
4
+ } from "./chunk-QRNAYHW7.mjs";
5
+ import "./chunk-KG5N2WFP.mjs";
6
6
  import "./chunk-FAA64ZR4.mjs";
7
7
  import {
8
8
  usePagination
9
- } from "./chunk-UUTVIFJX.mjs";
9
+ } from "./chunk-7Y7MYI7Z.mjs";
10
10
  export {
11
11
  Pagination,
12
12
  usePagination
@@ -1,6 +1,6 @@
1
1
  import { ComponentPropsWithoutRef, FC } from 'react';
2
2
 
3
- type PaginationItemOptions = {
3
+ interface PaginationItemOptions {
4
4
  /**
5
5
  * The type of the page or item assigned to the pagination item.
6
6
  */
@@ -23,8 +23,9 @@ type PaginationItemOptions = {
23
23
  * @default false
24
24
  */
25
25
  disableRipple?: boolean;
26
- };
27
- type PaginationItemProps = ComponentPropsWithoutRef<"button"> & PaginationItemOptions;
26
+ }
27
+ interface PaginationItemProps extends ComponentPropsWithoutRef<"button">, PaginationItemOptions {
28
+ }
28
29
  declare const PaginationItem: FC<PaginationItemProps>;
29
30
 
30
31
  export { PaginationItem, type PaginationItemProps };
@@ -1,6 +1,6 @@
1
1
  import { ComponentPropsWithoutRef, FC } from 'react';
2
2
 
3
- type PaginationItemOptions = {
3
+ interface PaginationItemOptions {
4
4
  /**
5
5
  * The type of the page or item assigned to the pagination item.
6
6
  */
@@ -23,8 +23,9 @@ type PaginationItemOptions = {
23
23
  * @default false
24
24
  */
25
25
  disableRipple?: boolean;
26
- };
27
- type PaginationItemProps = ComponentPropsWithoutRef<"button"> & PaginationItemOptions;
26
+ }
27
+ interface PaginationItemProps extends ComponentPropsWithoutRef<"button">, PaginationItemOptions {
28
+ }
28
29
  declare const PaginationItem: FC<PaginationItemProps>;
29
30
 
30
31
  export { PaginationItem, type PaginationItemProps };
@@ -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\ntype 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 type PaginationItemProps = ComponentPropsWithoutRef<\"button\"> &\n PaginationItemOptions\n\nconst iconMap: Record<\n number | \"dots\" | \"prev\" | \"next\" | \"first\" | \"last\",\n 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 ...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\ntype PaginationContext = Record<string, CSSUIObject>\n\nexport const [PaginationProvider, usePaginationContext] =\n createContext<PaginationContext>({\n strict: false,\n name: \"PaginationContext\",\n })\n\nexport type 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 computedRange = (start: number, end: number) =>\n Array.from({ length: end - start + 1 }, (_, index) => index + start)\n\nexport const usePagination = ({\n page,\n defaultPage = 1,\n total,\n siblings = 1,\n boundaries = 1,\n isDisabled = false,\n onChange: onChangeProp,\n}: UsePaginationProps) => {\n const computedSiblings = useValue(siblings)\n const computedBoundaries = 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 = computedSiblings * 2 + 3 + computedBoundaries * 2\n\n if (minimumTotal >= total) return computedRange(1, total)\n\n const prevSiblings = Math.max(\n currentPage - computedSiblings,\n computedBoundaries,\n )\n const nextSiblings = Math.min(\n currentPage + computedSiblings,\n total - computedBoundaries,\n )\n\n const prevDots = prevSiblings > computedBoundaries + 2\n const nextDots = nextSiblings < total - (computedBoundaries + 1)\n\n if (!prevDots && nextDots) {\n const prevPages = computedSiblings * 2 + computedBoundaries + 2\n\n return [\n ...computedRange(1, prevPages),\n \"dots\",\n ...computedRange(total - (computedBoundaries - 1), total),\n ]\n }\n\n if (prevDots && !nextDots) {\n const nextPages = computedBoundaries + 1 + 2 * computedSiblings\n\n return [\n ...computedRange(1, computedBoundaries),\n \"dots\",\n ...computedRange(total - nextPages, total),\n ]\n }\n\n return [\n ...computedRange(1, computedBoundaries),\n \"dots\",\n ...computedRange(prevSiblings, nextSiblings),\n \"dots\",\n ...computedRange(total - computedBoundaries + 1, total),\n ]\n }, [computedBoundaries, computedSiblings, 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;AAI9B,IAAM,CAAC,oBAAoB,oBAAoB,QACpD,4BAAiC;AAAA,EAC/B,QAAQ;AAAA,EACR,MAAM;AACR,CAAC;;;AFkCK,IAAAC,sBAAA;AAJR,IAAM,UAGF;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,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 { 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 ...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 = 1,\n boundaries = 1,\n isDisabled = false,\n onChange: onChangeProp,\n}: UsePaginationProps) => {\n const computedSiblings = useValue(siblings)\n const computedBoundaries = 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 = computedSiblings * 2 + 3 + computedBoundaries * 2\n\n if (minimumTotal >= total) return computedRange(1, total)\n\n const prevSiblings = Math.max(\n currentPage - computedSiblings,\n computedBoundaries,\n )\n const nextSiblings = Math.min(\n currentPage + computedSiblings,\n total - computedBoundaries,\n )\n\n const prevDots = prevSiblings > computedBoundaries + 2\n const nextDots = nextSiblings < total - (computedBoundaries + 1)\n\n if (!prevDots && nextDots) {\n const prevPages = computedSiblings * 2 + computedBoundaries + 2\n\n return [\n ...computedRange(1, prevPages),\n \"dots\",\n ...computedRange(total - (computedBoundaries - 1), total),\n ]\n }\n\n if (prevDots && !nextDots) {\n const nextPages = computedBoundaries + 1 + 2 * computedSiblings\n\n return [\n ...computedRange(1, computedBoundaries),\n \"dots\",\n ...computedRange(total - nextPages, total),\n ]\n }\n\n return [\n ...computedRange(1, computedBoundaries),\n \"dots\",\n ...computedRange(prevSiblings, nextSiblings),\n \"dots\",\n ...computedRange(total - computedBoundaries + 1, total),\n ]\n }, [computedBoundaries, computedSiblings, 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,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,9 +1,9 @@
1
1
  "use client"
2
2
  import {
3
3
  PaginationItem
4
- } from "./chunk-LMH7UMWH.mjs";
4
+ } from "./chunk-KG5N2WFP.mjs";
5
5
  import "./chunk-FAA64ZR4.mjs";
6
- import "./chunk-UUTVIFJX.mjs";
6
+ import "./chunk-7Y7MYI7Z.mjs";
7
7
  export {
8
8
  PaginationItem
9
9
  };
@@ -4,7 +4,7 @@ import { FC } from 'react';
4
4
  import { PaginationItemProps } from './pagination-item.mjs';
5
5
  import { UsePaginationProps } from './use-pagination.mjs';
6
6
 
7
- type PaginationOptions = {
7
+ interface PaginationOptions {
8
8
  /**
9
9
  * The pagination button component to use.
10
10
  */
@@ -22,7 +22,7 @@ type PaginationOptions = {
22
22
  /**
23
23
  * Props for inner element.
24
24
  */
25
- innerProps?: HTMLUIProps<"div">;
25
+ innerProps?: HTMLUIProps;
26
26
  /**
27
27
  * Props for control button element.
28
28
  */
@@ -53,8 +53,9 @@ type PaginationOptions = {
53
53
  * Props for last of the edge button element.
54
54
  */
55
55
  edgeLastProps?: HTMLUIProps<"button">;
56
- };
57
- type PaginationProps = Omit<HTMLUIProps<"div">, "onChange" | "children" | "page"> & ThemeProps<"Pagination"> & UsePaginationProps & PaginationOptions;
56
+ }
57
+ interface PaginationProps extends Omit<HTMLUIProps, "onChange" | "children" | "page">, ThemeProps<"Pagination">, UsePaginationProps, PaginationOptions {
58
+ }
58
59
  /**
59
60
  * `Pagination` is a component for managing the pagination and navigation of content.
60
61
  *
@@ -4,7 +4,7 @@ import { FC } from 'react';
4
4
  import { PaginationItemProps } from './pagination-item.js';
5
5
  import { UsePaginationProps } from './use-pagination.js';
6
6
 
7
- type PaginationOptions = {
7
+ interface PaginationOptions {
8
8
  /**
9
9
  * The pagination button component to use.
10
10
  */
@@ -22,7 +22,7 @@ type PaginationOptions = {
22
22
  /**
23
23
  * Props for inner element.
24
24
  */
25
- innerProps?: HTMLUIProps<"div">;
25
+ innerProps?: HTMLUIProps;
26
26
  /**
27
27
  * Props for control button element.
28
28
  */
@@ -53,8 +53,9 @@ type PaginationOptions = {
53
53
  * Props for last of the edge button element.
54
54
  */
55
55
  edgeLastProps?: HTMLUIProps<"button">;
56
- };
57
- type PaginationProps = Omit<HTMLUIProps<"div">, "onChange" | "children" | "page"> & ThemeProps<"Pagination"> & UsePaginationProps & PaginationOptions;
56
+ }
57
+ interface PaginationProps extends Omit<HTMLUIProps, "onChange" | "children" | "page">, ThemeProps<"Pagination">, UsePaginationProps, PaginationOptions {
58
+ }
58
59
  /**
59
60
  * `Pagination` is a component for managing the pagination and navigation of content.
60
61
  *
@@ -228,7 +228,7 @@ var PaginationItem = ({
228
228
  // src/pagination.tsx
229
229
  var import_jsx_runtime3 = require("react/jsx-runtime");
230
230
  var Pagination = (0, import_core2.forwardRef)((props, ref) => {
231
- const [styles, mergedProps] = (0, import_core2.useMultiComponentStyle)("Pagination", props);
231
+ const [styles, mergedProps] = (0, import_core2.useComponentMultiStyle)("Pagination", props);
232
232
  const {
233
233
  className,
234
234
  component: Component = PaginationItem,
@@ -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 useMultiComponentStyle,\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\ntype 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<\"div\">\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 type PaginationProps = Omit<\n HTMLUIProps<\"div\">,\n \"onChange\" | \"children\" | \"page\"\n> &\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] = useMultiComponentStyle(\"Pagination\", props)\n const {\n className,\n component: Component = PaginationItem,\n itemProps,\n withControls = true,\n 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 computedWithControls = useValue(withControls)\n const computedWithEdges = 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 ...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 {computedWithEdges ? (\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 {computedWithControls ? (\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 ...styles.inner,\n }}\n {...innerProps}\n >\n {children}\n </ui.div>\n\n {computedWithControls ? (\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 {computedWithEdges ? (\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\ntype 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 type PaginationItemProps = ComponentPropsWithoutRef<\"button\"> &\n PaginationItemOptions\n\nconst iconMap: Record<\n number | \"dots\" | \"prev\" | \"next\" | \"first\" | \"last\",\n 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 ...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\ntype PaginationContext = Record<string, CSSUIObject>\n\nexport const [PaginationProvider, usePaginationContext] =\n createContext<PaginationContext>({\n strict: false,\n name: \"PaginationContext\",\n })\n\nexport type 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 computedRange = (start: number, end: number) =>\n Array.from({ length: end - start + 1 }, (_, index) => index + start)\n\nexport const usePagination = ({\n page,\n defaultPage = 1,\n total,\n siblings = 1,\n boundaries = 1,\n isDisabled = false,\n onChange: onChangeProp,\n}: UsePaginationProps) => {\n const computedSiblings = useValue(siblings)\n const computedBoundaries = 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 = computedSiblings * 2 + 3 + computedBoundaries * 2\n\n if (minimumTotal >= total) return computedRange(1, total)\n\n const prevSiblings = Math.max(\n currentPage - computedSiblings,\n computedBoundaries,\n )\n const nextSiblings = Math.min(\n currentPage + computedSiblings,\n total - computedBoundaries,\n )\n\n const prevDots = prevSiblings > computedBoundaries + 2\n const nextDots = nextSiblings < total - (computedBoundaries + 1)\n\n if (!prevDots && nextDots) {\n const prevPages = computedSiblings * 2 + computedBoundaries + 2\n\n return [\n ...computedRange(1, prevPages),\n \"dots\",\n ...computedRange(total - (computedBoundaries - 1), total),\n ]\n }\n\n if (prevDots && !nextDots) {\n const nextPages = computedBoundaries + 1 + 2 * computedSiblings\n\n return [\n ...computedRange(1, computedBoundaries),\n \"dots\",\n ...computedRange(total - nextPages, total),\n ]\n }\n\n return [\n ...computedRange(1, computedBoundaries),\n \"dots\",\n ...computedRange(prevSiblings, nextSiblings),\n \"dots\",\n ...computedRange(total - computedBoundaries + 1, total),\n ]\n }, [computedBoundaries, computedSiblings, 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 {\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 = true,\n 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 computedWithControls = useValue(withControls)\n const computedWithEdges = 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 ...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 {computedWithEdges ? (\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 {computedWithControls ? (\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 ...styles.inner,\n }}\n {...innerProps}\n >\n {children}\n </ui.div>\n\n {computedWithControls ? (\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 {computedWithEdges ? (\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 ...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 = 1,\n boundaries = 1,\n isDisabled = false,\n onChange: onChangeProp,\n}: UsePaginationProps) => {\n const computedSiblings = useValue(siblings)\n const computedBoundaries = 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 = computedSiblings * 2 + 3 + computedBoundaries * 2\n\n if (minimumTotal >= total) return computedRange(1, total)\n\n const prevSiblings = Math.max(\n currentPage - computedSiblings,\n computedBoundaries,\n )\n const nextSiblings = Math.min(\n currentPage + computedSiblings,\n total - computedBoundaries,\n )\n\n const prevDots = prevSiblings > computedBoundaries + 2\n const nextDots = nextSiblings < total - (computedBoundaries + 1)\n\n if (!prevDots && nextDots) {\n const prevPages = computedSiblings * 2 + computedBoundaries + 2\n\n return [\n ...computedRange(1, prevPages),\n \"dots\",\n ...computedRange(total - (computedBoundaries - 1), total),\n ]\n }\n\n if (prevDots && !nextDots) {\n const nextPages = computedBoundaries + 1 + 2 * computedSiblings\n\n return [\n ...computedRange(1, computedBoundaries),\n \"dots\",\n ...computedRange(total - nextPages, total),\n ]\n }\n\n return [\n ...computedRange(1, computedBoundaries),\n \"dots\",\n ...computedRange(prevSiblings, nextSiblings),\n \"dots\",\n ...computedRange(total - computedBoundaries + 1, total),\n ]\n }, [computedBoundaries, computedSiblings, 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,10 +1,10 @@
1
1
  "use client"
2
2
  import {
3
3
  Pagination
4
- } from "./chunk-JVM3RLNQ.mjs";
5
- import "./chunk-LMH7UMWH.mjs";
4
+ } from "./chunk-QRNAYHW7.mjs";
5
+ import "./chunk-KG5N2WFP.mjs";
6
6
  import "./chunk-FAA64ZR4.mjs";
7
- import "./chunk-UUTVIFJX.mjs";
7
+ import "./chunk-7Y7MYI7Z.mjs";
8
8
  export {
9
9
  Pagination
10
10
  };
@@ -1,10 +1,13 @@
1
1
  import * as react from 'react';
2
2
  import { Token, CSSUIObject } from '@yamada-ui/core';
3
3
 
4
- type PaginationContext = Record<string, CSSUIObject>;
4
+ interface PaginationContext {
5
+ [key: string]: CSSUIObject;
6
+ }
5
7
  declare const PaginationProvider: react.Provider<PaginationContext>;
6
8
  declare const usePaginationContext: () => PaginationContext;
7
- type UsePaginationProps = {
9
+ declare const computedRange: (start: number, end: number) => number[];
10
+ interface UsePaginationProps {
8
11
  /**
9
12
  * The page of the pagination.
10
13
  * Should be less than `total` and greater than `1`.
@@ -42,8 +45,7 @@ type UsePaginationProps = {
42
45
  * The callback invoked when the page changes.
43
46
  */
44
47
  onChange?: (page: number) => void;
45
- };
46
- declare const computedRange: (start: number, end: number) => number[];
48
+ }
47
49
  declare const usePagination: ({ page, defaultPage, total, siblings, boundaries, isDisabled, onChange: onChangeProp, }: UsePaginationProps) => {
48
50
  currentPage: number;
49
51
  total: number;
@@ -1,10 +1,13 @@
1
1
  import * as react from 'react';
2
2
  import { Token, CSSUIObject } from '@yamada-ui/core';
3
3
 
4
- type PaginationContext = Record<string, CSSUIObject>;
4
+ interface PaginationContext {
5
+ [key: string]: CSSUIObject;
6
+ }
5
7
  declare const PaginationProvider: react.Provider<PaginationContext>;
6
8
  declare const usePaginationContext: () => PaginationContext;
7
- type UsePaginationProps = {
9
+ declare const computedRange: (start: number, end: number) => number[];
10
+ interface UsePaginationProps {
8
11
  /**
9
12
  * The page of the pagination.
10
13
  * Should be less than `total` and greater than `1`.
@@ -42,8 +45,7 @@ type UsePaginationProps = {
42
45
  * The callback invoked when the page changes.
43
46
  */
44
47
  onChange?: (page: number) => void;
45
- };
46
- declare const computedRange: (start: number, end: number) => number[];
48
+ }
47
49
  declare const usePagination: ({ page, defaultPage, total, siblings, boundaries, isDisabled, onChange: onChangeProp, }: UsePaginationProps) => {
48
50
  currentPage: number;
49
51
  total: number;
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/use-pagination.ts"],"sourcesContent":["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\ntype PaginationContext = Record<string, CSSUIObject>\n\nexport const [PaginationProvider, usePaginationContext] =\n createContext<PaginationContext>({\n strict: false,\n name: \"PaginationContext\",\n })\n\nexport type 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 computedRange = (start: number, end: number) =>\n Array.from({ length: end - start + 1 }, (_, index) => index + start)\n\nexport const usePagination = ({\n page,\n defaultPage = 1,\n total,\n siblings = 1,\n boundaries = 1,\n isDisabled = false,\n onChange: onChangeProp,\n}: UsePaginationProps) => {\n const computedSiblings = useValue(siblings)\n const computedBoundaries = 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 = computedSiblings * 2 + 3 + computedBoundaries * 2\n\n if (minimumTotal >= total) return computedRange(1, total)\n\n const prevSiblings = Math.max(\n currentPage - computedSiblings,\n computedBoundaries,\n )\n const nextSiblings = Math.min(\n currentPage + computedSiblings,\n total - computedBoundaries,\n )\n\n const prevDots = prevSiblings > computedBoundaries + 2\n const nextDots = nextSiblings < total - (computedBoundaries + 1)\n\n if (!prevDots && nextDots) {\n const prevPages = computedSiblings * 2 + computedBoundaries + 2\n\n return [\n ...computedRange(1, prevPages),\n \"dots\",\n ...computedRange(total - (computedBoundaries - 1), total),\n ]\n }\n\n if (prevDots && !nextDots) {\n const nextPages = computedBoundaries + 1 + 2 * computedSiblings\n\n return [\n ...computedRange(1, computedBoundaries),\n \"dots\",\n ...computedRange(total - nextPages, total),\n ]\n }\n\n return [\n ...computedRange(1, computedBoundaries),\n \"dots\",\n ...computedRange(prevSiblings, nextSiblings),\n \"dots\",\n ...computedRange(total - computedBoundaries + 1, total),\n ]\n }, [computedBoundaries, computedSiblings, 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;AAAA;AAAA;AAAA;AACA,oCAAqC;AACrC,uBAAyB;AACzB,mBAA8B;AAC9B,mBAAqC;AAI9B,IAAM,CAAC,oBAAoB,oBAAoB,QACpD,4BAAiC;AAAA,EAC/B,QAAQ;AAAA,EACR,MAAM;AACR,CAAC;AA0CI,IAAM,gBAAgB,CAAC,OAAe,QAC3C,MAAM,KAAK,EAAE,QAAQ,MAAM,QAAQ,EAAE,GAAG,CAAC,GAAG,UAAU,QAAQ,KAAK;AAE9D,IAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA,WAAW;AAAA,EACX,aAAa;AAAA,EACb,aAAa;AAAA,EACb,UAAU;AACZ,MAA0B;AACxB,QAAM,uBAAmB,2BAAS,QAAQ;AAC1C,QAAM,yBAAqB,2BAAS,UAAU;AAE9C,QAAM,CAAC,aAAa,cAAc,QAAI,oDAAqB;AAAA,IACzD,OAAO;AAAA,IACP,cAAc;AAAA,IACd,UAAU;AAAA,EACZ,CAAC;AAED,QAAM,cAAU,0BAAY,MAAM,eAAe,CAAC,GAAG,CAAC,cAAc,CAAC;AAErE,QAAM,aAAS;AAAA,IACb,MAAM,eAAe,KAAK;AAAA,IAC1B,CAAC,gBAAgB,KAAK;AAAA,EACxB;AAEA,QAAM,aAAS;AAAA,IACb,MAAM,eAAe,CAAC,SAAU,SAAS,IAAI,OAAO,OAAO,CAAE;AAAA,IAC7D,CAAC,cAAc;AAAA,EACjB;AAEA,QAAM,aAAS;AAAA,IACb,MAAM,eAAe,CAAC,SAAU,SAAS,QAAQ,OAAO,OAAO,CAAE;AAAA,IACjE,CAAC,gBAAgB,KAAK;AAAA,EACxB;AAEA,QAAM,eAAW;AAAA,IACf,CAACA,UAAiB,eAAeA,KAAI;AAAA,IACrC,CAAC,cAAc;AAAA,EACjB;AAEA,QAAM,YAAQ,sBAAQ,MAA2B;AAC/C,UAAM,eAAe,mBAAmB,IAAI,IAAI,qBAAqB;AAErE,QAAI,gBAAgB,MAAO,QAAO,cAAc,GAAG,KAAK;AAExD,UAAM,eAAe,KAAK;AAAA,MACxB,cAAc;AAAA,MACd;AAAA,IACF;AACA,UAAM,eAAe,KAAK;AAAA,MACxB,cAAc;AAAA,MACd,QAAQ;AAAA,IACV;AAEA,UAAM,WAAW,eAAe,qBAAqB;AACrD,UAAM,WAAW,eAAe,SAAS,qBAAqB;AAE9D,QAAI,CAAC,YAAY,UAAU;AACzB,YAAM,YAAY,mBAAmB,IAAI,qBAAqB;AAE9D,aAAO;AAAA,QACL,GAAG,cAAc,GAAG,SAAS;AAAA,QAC7B;AAAA,QACA,GAAG,cAAc,SAAS,qBAAqB,IAAI,KAAK;AAAA,MAC1D;AAAA,IACF;AAEA,QAAI,YAAY,CAAC,UAAU;AACzB,YAAM,YAAY,qBAAqB,IAAI,IAAI;AAE/C,aAAO;AAAA,QACL,GAAG,cAAc,GAAG,kBAAkB;AAAA,QACtC;AAAA,QACA,GAAG,cAAc,QAAQ,WAAW,KAAK;AAAA,MAC3C;AAAA,IACF;AAEA,WAAO;AAAA,MACL,GAAG,cAAc,GAAG,kBAAkB;AAAA,MACtC;AAAA,MACA,GAAG,cAAc,cAAc,YAAY;AAAA,MAC3C;AAAA,MACA,GAAG,cAAc,QAAQ,qBAAqB,GAAG,KAAK;AAAA,IACxD;AAAA,EACF,GAAG,CAAC,oBAAoB,kBAAkB,aAAa,KAAK,CAAC;AAE7D,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;","names":["page"]}
1
+ {"version":3,"sources":["../src/use-pagination.ts"],"sourcesContent":["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 = 1,\n boundaries = 1,\n isDisabled = false,\n onChange: onChangeProp,\n}: UsePaginationProps) => {\n const computedSiblings = useValue(siblings)\n const computedBoundaries = 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 = computedSiblings * 2 + 3 + computedBoundaries * 2\n\n if (minimumTotal >= total) return computedRange(1, total)\n\n const prevSiblings = Math.max(\n currentPage - computedSiblings,\n computedBoundaries,\n )\n const nextSiblings = Math.min(\n currentPage + computedSiblings,\n total - computedBoundaries,\n )\n\n const prevDots = prevSiblings > computedBoundaries + 2\n const nextDots = nextSiblings < total - (computedBoundaries + 1)\n\n if (!prevDots && nextDots) {\n const prevPages = computedSiblings * 2 + computedBoundaries + 2\n\n return [\n ...computedRange(1, prevPages),\n \"dots\",\n ...computedRange(total - (computedBoundaries - 1), total),\n ]\n }\n\n if (prevDots && !nextDots) {\n const nextPages = computedBoundaries + 1 + 2 * computedSiblings\n\n return [\n ...computedRange(1, computedBoundaries),\n \"dots\",\n ...computedRange(total - nextPages, total),\n ]\n }\n\n return [\n ...computedRange(1, computedBoundaries),\n \"dots\",\n ...computedRange(prevSiblings, nextSiblings),\n \"dots\",\n ...computedRange(total - computedBoundaries + 1, total),\n ]\n }, [computedBoundaries, computedSiblings, 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;AAAA;AAAA;AAAA;AACA,oCAAqC;AACrC,uBAAyB;AACzB,mBAA8B;AAC9B,mBAAqC;AAM9B,IAAM,CAAC,oBAAoB,oBAAoB,QACpD,4BAAiC;AAAA,EAC/B,QAAQ;AAAA,EACR,MAAM;AACR,CAAC;AAEI,IAAM,gBAAgB,CAAC,OAAe,QAC3C,MAAM,KAAK,EAAE,QAAQ,MAAM,QAAQ,EAAE,GAAG,CAAC,GAAG,UAAU,QAAQ,KAAK;AA0C9D,IAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA,WAAW;AAAA,EACX,aAAa;AAAA,EACb,aAAa;AAAA,EACb,UAAU;AACZ,MAA0B;AACxB,QAAM,uBAAmB,2BAAS,QAAQ;AAC1C,QAAM,yBAAqB,2BAAS,UAAU;AAE9C,QAAM,CAAC,aAAa,cAAc,QAAI,oDAAqB;AAAA,IACzD,OAAO;AAAA,IACP,cAAc;AAAA,IACd,UAAU;AAAA,EACZ,CAAC;AAED,QAAM,cAAU,0BAAY,MAAM,eAAe,CAAC,GAAG,CAAC,cAAc,CAAC;AAErE,QAAM,aAAS;AAAA,IACb,MAAM,eAAe,KAAK;AAAA,IAC1B,CAAC,gBAAgB,KAAK;AAAA,EACxB;AAEA,QAAM,aAAS;AAAA,IACb,MAAM,eAAe,CAAC,SAAU,SAAS,IAAI,OAAO,OAAO,CAAE;AAAA,IAC7D,CAAC,cAAc;AAAA,EACjB;AAEA,QAAM,aAAS;AAAA,IACb,MAAM,eAAe,CAAC,SAAU,SAAS,QAAQ,OAAO,OAAO,CAAE;AAAA,IACjE,CAAC,gBAAgB,KAAK;AAAA,EACxB;AAEA,QAAM,eAAW;AAAA,IACf,CAACA,UAAiB,eAAeA,KAAI;AAAA,IACrC,CAAC,cAAc;AAAA,EACjB;AAEA,QAAM,YAAQ,sBAAQ,MAA2B;AAC/C,UAAM,eAAe,mBAAmB,IAAI,IAAI,qBAAqB;AAErE,QAAI,gBAAgB,MAAO,QAAO,cAAc,GAAG,KAAK;AAExD,UAAM,eAAe,KAAK;AAAA,MACxB,cAAc;AAAA,MACd;AAAA,IACF;AACA,UAAM,eAAe,KAAK;AAAA,MACxB,cAAc;AAAA,MACd,QAAQ;AAAA,IACV;AAEA,UAAM,WAAW,eAAe,qBAAqB;AACrD,UAAM,WAAW,eAAe,SAAS,qBAAqB;AAE9D,QAAI,CAAC,YAAY,UAAU;AACzB,YAAM,YAAY,mBAAmB,IAAI,qBAAqB;AAE9D,aAAO;AAAA,QACL,GAAG,cAAc,GAAG,SAAS;AAAA,QAC7B;AAAA,QACA,GAAG,cAAc,SAAS,qBAAqB,IAAI,KAAK;AAAA,MAC1D;AAAA,IACF;AAEA,QAAI,YAAY,CAAC,UAAU;AACzB,YAAM,YAAY,qBAAqB,IAAI,IAAI;AAE/C,aAAO;AAAA,QACL,GAAG,cAAc,GAAG,kBAAkB;AAAA,QACtC;AAAA,QACA,GAAG,cAAc,QAAQ,WAAW,KAAK;AAAA,MAC3C;AAAA,IACF;AAEA,WAAO;AAAA,MACL,GAAG,cAAc,GAAG,kBAAkB;AAAA,MACtC;AAAA,MACA,GAAG,cAAc,cAAc,YAAY;AAAA,MAC3C;AAAA,MACA,GAAG,cAAc,QAAQ,qBAAqB,GAAG,KAAK;AAAA,IACxD;AAAA,EACF,GAAG,CAAC,oBAAoB,kBAAkB,aAAa,KAAK,CAAC;AAE7D,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;","names":["page"]}
@@ -4,7 +4,7 @@ import {
4
4
  computedRange,
5
5
  usePagination,
6
6
  usePaginationContext
7
- } from "./chunk-UUTVIFJX.mjs";
7
+ } from "./chunk-7Y7MYI7Z.mjs";
8
8
  export {
9
9
  PaginationProvider,
10
10
  computedRange,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yamada-ui/pagination",
3
- "version": "2.0.0-next-20240825145710",
3
+ "version": "2.0.0-next-20240921202825",
4
4
  "description": "Yamada UI pagination component",
5
5
  "keywords": [
6
6
  "yamada",
@@ -36,12 +36,12 @@
36
36
  "url": "https://github.com/yamada-ui/yamada-ui/issues"
37
37
  },
38
38
  "dependencies": {
39
- "@yamada-ui/core": "1.13.0",
40
- "@yamada-ui/icon": "1.1.4",
41
- "@yamada-ui/ripple": "1.0.36",
42
- "@yamada-ui/use-controllable-state": "1.0.18",
43
- "@yamada-ui/use-value": "1.1.23",
44
- "@yamada-ui/utils": "1.4.0"
39
+ "@yamada-ui/core": "1.15.0",
40
+ "@yamada-ui/icon": "1.1.6",
41
+ "@yamada-ui/ripple": "1.0.38",
42
+ "@yamada-ui/use-controllable-state": "1.0.20",
43
+ "@yamada-ui/use-value": "1.1.25",
44
+ "@yamada-ui/utils": "1.5.1"
45
45
  },
46
46
  "devDependencies": {
47
47
  "clean-package": "2.2.0",
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/pagination.tsx"],"sourcesContent":["import type {\n CSSUIObject,\n HTMLUIProps,\n ThemeProps,\n Token,\n} from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n useMultiComponentStyle,\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\ntype 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<\"div\">\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 type PaginationProps = Omit<\n HTMLUIProps<\"div\">,\n \"onChange\" | \"children\" | \"page\"\n> &\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] = useMultiComponentStyle(\"Pagination\", props)\n const {\n className,\n component: Component = PaginationItem,\n itemProps,\n withControls = true,\n 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 computedWithControls = useValue(withControls)\n const computedWithEdges = 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 ...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 {computedWithEdges ? (\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 {computedWithControls ? (\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 ...styles.inner,\n }}\n {...innerProps}\n >\n {children}\n </ui.div>\n\n {computedWithControls ? (\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 {computedWithEdges ? (\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"],"mappings":"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","names":["page"]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/pagination-item.tsx"],"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\ntype 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 type PaginationItemProps = ComponentPropsWithoutRef<\"button\"> &\n PaginationItemOptions\n\nconst iconMap: Record<\n number | \"dots\" | \"prev\" | \"next\" | \"first\" | \"last\",\n 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 ...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"],"mappings":";;;;;;;;;;;;;AACA,SAAS,UAAU;AACnB,SAAS,QAAQ,iBAAiB;AAClC,SAAS,IAAI,gBAAgB;AA2CrB,cA8BJ,YA9BI;AAJR,IAAM,UAGF;AAAA,EACF,MAAM,oBAAC,YAAS;AAAA,EAChB,MAAM,oBAAC,YAAS;AAAA,EAChB,MAAM,oBAAC,YAAS;AAAA,EAChB,OAAO,oBAAC,aAAU;AAAA,EAClB,MAAM,oBAAC,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,IAAI,UAAU;AAAA,IAClD,GAAG;AAAA,IACH,YAAY,iBAAiB;AAAA,EAC/B,CAAC;AAED,4CAAa,aAAQ,IAAI,MAAZ,YAAiB;AAE9B,QAAM,MAAmB;AAAA,IACvB,GAAG,OAAO;AAAA,IACV,GAAG,OAAO,IAAI;AAAA,EAChB;AAEA,SACE;AAAA,IAAC,GAAG;AAAA,IAAH;AAAA,MACC,WAAW,GAAG,uBAAuB,SAAS;AAAA,MAC9C,MAAK;AAAA,MACL,UAAU,SAAS,SAAS,IAAI;AAAA,MAChC,UAAU;AAAA,MACV,iBAAe,SAAS,QAAQ;AAAA,MAChC,iBAAe,SAAS,UAAU;AAAA,MAClC,OAAO;AAAA,MACN,GAAG;AAAA,MACJ;AAAA,MAEC;AAAA;AAAA,QAED,oBAAC,UAAO,YAAY,iBAAiB,YAAa,GAAG,aAAa;AAAA;AAAA;AAAA,EACpE;AAEJ;","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/use-pagination.ts"],"sourcesContent":["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\ntype PaginationContext = Record<string, CSSUIObject>\n\nexport const [PaginationProvider, usePaginationContext] =\n createContext<PaginationContext>({\n strict: false,\n name: \"PaginationContext\",\n })\n\nexport type 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 computedRange = (start: number, end: number) =>\n Array.from({ length: end - start + 1 }, (_, index) => index + start)\n\nexport const usePagination = ({\n page,\n defaultPage = 1,\n total,\n siblings = 1,\n boundaries = 1,\n isDisabled = false,\n onChange: onChangeProp,\n}: UsePaginationProps) => {\n const computedSiblings = useValue(siblings)\n const computedBoundaries = 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 = computedSiblings * 2 + 3 + computedBoundaries * 2\n\n if (minimumTotal >= total) return computedRange(1, total)\n\n const prevSiblings = Math.max(\n currentPage - computedSiblings,\n computedBoundaries,\n )\n const nextSiblings = Math.min(\n currentPage + computedSiblings,\n total - computedBoundaries,\n )\n\n const prevDots = prevSiblings > computedBoundaries + 2\n const nextDots = nextSiblings < total - (computedBoundaries + 1)\n\n if (!prevDots && nextDots) {\n const prevPages = computedSiblings * 2 + computedBoundaries + 2\n\n return [\n ...computedRange(1, prevPages),\n \"dots\",\n ...computedRange(total - (computedBoundaries - 1), total),\n ]\n }\n\n if (prevDots && !nextDots) {\n const nextPages = computedBoundaries + 1 + 2 * computedSiblings\n\n return [\n ...computedRange(1, computedBoundaries),\n \"dots\",\n ...computedRange(total - nextPages, total),\n ]\n }\n\n return [\n ...computedRange(1, computedBoundaries),\n \"dots\",\n ...computedRange(prevSiblings, nextSiblings),\n \"dots\",\n ...computedRange(total - computedBoundaries + 1, total),\n ]\n }, [computedBoundaries, computedSiblings, 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":";;;AACA,SAAS,4BAA4B;AACrC,SAAS,gBAAgB;AACzB,SAAS,qBAAqB;AAC9B,SAAS,aAAa,eAAe;AAI9B,IAAM,CAAC,oBAAoB,oBAAoB,IACpD,cAAiC;AAAA,EAC/B,QAAQ;AAAA,EACR,MAAM;AACR,CAAC;AA0CI,IAAM,gBAAgB,CAAC,OAAe,QAC3C,MAAM,KAAK,EAAE,QAAQ,MAAM,QAAQ,EAAE,GAAG,CAAC,GAAG,UAAU,QAAQ,KAAK;AAE9D,IAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA,WAAW;AAAA,EACX,aAAa;AAAA,EACb,aAAa;AAAA,EACb,UAAU;AACZ,MAA0B;AACxB,QAAM,mBAAmB,SAAS,QAAQ;AAC1C,QAAM,qBAAqB,SAAS,UAAU;AAE9C,QAAM,CAAC,aAAa,cAAc,IAAI,qBAAqB;AAAA,IACzD,OAAO;AAAA,IACP,cAAc;AAAA,IACd,UAAU;AAAA,EACZ,CAAC;AAED,QAAM,UAAU,YAAY,MAAM,eAAe,CAAC,GAAG,CAAC,cAAc,CAAC;AAErE,QAAM,SAAS;AAAA,IACb,MAAM,eAAe,KAAK;AAAA,IAC1B,CAAC,gBAAgB,KAAK;AAAA,EACxB;AAEA,QAAM,SAAS;AAAA,IACb,MAAM,eAAe,CAAC,SAAU,SAAS,IAAI,OAAO,OAAO,CAAE;AAAA,IAC7D,CAAC,cAAc;AAAA,EACjB;AAEA,QAAM,SAAS;AAAA,IACb,MAAM,eAAe,CAAC,SAAU,SAAS,QAAQ,OAAO,OAAO,CAAE;AAAA,IACjE,CAAC,gBAAgB,KAAK;AAAA,EACxB;AAEA,QAAM,WAAW;AAAA,IACf,CAACA,UAAiB,eAAeA,KAAI;AAAA,IACrC,CAAC,cAAc;AAAA,EACjB;AAEA,QAAM,QAAQ,QAAQ,MAA2B;AAC/C,UAAM,eAAe,mBAAmB,IAAI,IAAI,qBAAqB;AAErE,QAAI,gBAAgB,MAAO,QAAO,cAAc,GAAG,KAAK;AAExD,UAAM,eAAe,KAAK;AAAA,MACxB,cAAc;AAAA,MACd;AAAA,IACF;AACA,UAAM,eAAe,KAAK;AAAA,MACxB,cAAc;AAAA,MACd,QAAQ;AAAA,IACV;AAEA,UAAM,WAAW,eAAe,qBAAqB;AACrD,UAAM,WAAW,eAAe,SAAS,qBAAqB;AAE9D,QAAI,CAAC,YAAY,UAAU;AACzB,YAAM,YAAY,mBAAmB,IAAI,qBAAqB;AAE9D,aAAO;AAAA,QACL,GAAG,cAAc,GAAG,SAAS;AAAA,QAC7B;AAAA,QACA,GAAG,cAAc,SAAS,qBAAqB,IAAI,KAAK;AAAA,MAC1D;AAAA,IACF;AAEA,QAAI,YAAY,CAAC,UAAU;AACzB,YAAM,YAAY,qBAAqB,IAAI,IAAI;AAE/C,aAAO;AAAA,QACL,GAAG,cAAc,GAAG,kBAAkB;AAAA,QACtC;AAAA,QACA,GAAG,cAAc,QAAQ,WAAW,KAAK;AAAA,MAC3C;AAAA,IACF;AAEA,WAAO;AAAA,MACL,GAAG,cAAc,GAAG,kBAAkB;AAAA,MACtC;AAAA,MACA,GAAG,cAAc,cAAc,YAAY;AAAA,MAC3C;AAAA,MACA,GAAG,cAAc,QAAQ,qBAAqB,GAAG,KAAK;AAAA,IACxD;AAAA,EACF,GAAG,CAAC,oBAAoB,kBAAkB,aAAa,KAAK,CAAC;AAE7D,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;","names":["page"]}