@yamada-ui/pagination 1.0.42-next-20241005220055 → 1.0.42-next-20241008193728
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/{chunk-CDBANJFO.mjs → chunk-GKZNNZOM.mjs} +12 -12
- package/dist/chunk-GKZNNZOM.mjs.map +1 -0
- package/dist/{chunk-UK2DDH2Q.mjs → chunk-GOSRKZFX.mjs} +19 -17
- package/dist/chunk-GOSRKZFX.mjs.map +1 -0
- package/dist/{chunk-SUUC5YDJ.mjs → chunk-PGW7Y4GO.mjs} +36 -34
- package/dist/chunk-PGW7Y4GO.mjs.map +1 -0
- package/dist/{chunk-FAA64ZR4.mjs → chunk-VPZBFCSD.mjs} +19 -11
- package/dist/chunk-VPZBFCSD.mjs.map +1 -0
- package/dist/index.js +75 -63
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +4 -4
- package/dist/pagination-icon.d.mts +1 -1
- package/dist/pagination-icon.d.ts +1 -1
- package/dist/pagination-icon.js +18 -10
- package/dist/pagination-icon.js.map +1 -1
- package/dist/pagination-icon.mjs +1 -1
- package/dist/pagination-item.d.mts +9 -8
- package/dist/pagination-item.d.ts +9 -8
- package/dist/pagination-item.js +36 -26
- package/dist/pagination-item.js.map +1 -1
- package/dist/pagination-item.mjs +3 -3
- package/dist/pagination.d.mts +19 -19
- package/dist/pagination.d.ts +19 -19
- package/dist/pagination.js +75 -63
- package/dist/pagination.js.map +1 -1
- package/dist/pagination.mjs +4 -4
- package/dist/use-pagination.d.mts +22 -22
- package/dist/use-pagination.d.ts +22 -22
- package/dist/use-pagination.js +11 -11
- package/dist/use-pagination.js.map +1 -1
- package/dist/use-pagination.mjs +1 -1
- package/package.json +7 -7
- package/dist/chunk-CDBANJFO.mjs.map +0 -1
- package/dist/chunk-FAA64ZR4.mjs.map +0 -1
- package/dist/chunk-SUUC5YDJ.mjs.map +0 -1
- package/dist/chunk-UK2DDH2Q.mjs.map +0 -1
@@ -6,24 +6,24 @@ import { useValue } from "@yamada-ui/use-value";
|
|
6
6
|
import { createContext } from "@yamada-ui/utils";
|
7
7
|
import { useCallback, useMemo } from "react";
|
8
8
|
var [PaginationProvider, usePaginationContext] = createContext({
|
9
|
-
|
10
|
-
|
9
|
+
name: "PaginationContext",
|
10
|
+
errorMessage: `usePaginationContext returned is 'undefined'. Seems you forgot to wrap the components in "<Pagination />"`
|
11
11
|
});
|
12
12
|
var computedRange = (start, end) => Array.from({ length: end - start + 1 }, (_, index) => index + start);
|
13
13
|
var usePagination = ({
|
14
|
-
page,
|
15
|
-
defaultPage = 1,
|
16
|
-
total,
|
17
|
-
siblings: _siblings = 1,
|
18
14
|
boundaries: _boundaries = 1,
|
15
|
+
defaultPage = 1,
|
19
16
|
isDisabled = false,
|
17
|
+
page,
|
18
|
+
siblings: _siblings = 1,
|
19
|
+
total,
|
20
20
|
onChange: onChangeProp
|
21
21
|
}) => {
|
22
22
|
const siblings = useValue(_siblings);
|
23
23
|
const boundaries = useValue(_boundaries);
|
24
24
|
const [currentPage, setCurrentPage] = useControllableState({
|
25
|
-
value: page,
|
26
25
|
defaultValue: defaultPage,
|
26
|
+
value: page,
|
27
27
|
onChange: onChangeProp
|
28
28
|
});
|
29
29
|
const onFirst = useCallback(() => setCurrentPage(1), [setCurrentPage]);
|
@@ -76,14 +76,14 @@ var usePagination = ({
|
|
76
76
|
}, [boundaries, siblings, currentPage, total]);
|
77
77
|
return {
|
78
78
|
currentPage,
|
79
|
-
total,
|
80
79
|
isDisabled,
|
80
|
+
range,
|
81
|
+
total,
|
82
|
+
onChange,
|
81
83
|
onFirst,
|
82
84
|
onLast,
|
83
|
-
onPrev,
|
84
85
|
onNext,
|
85
|
-
|
86
|
-
range
|
86
|
+
onPrev
|
87
87
|
};
|
88
88
|
};
|
89
89
|
|
@@ -93,4 +93,4 @@ export {
|
|
93
93
|
computedRange,
|
94
94
|
usePagination
|
95
95
|
};
|
96
|
-
//# sourceMappingURL=chunk-
|
96
|
+
//# sourceMappingURL=chunk-GKZNNZOM.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 | undefined\n}\n\nexport const [PaginationProvider, usePaginationContext] =\n createContext<PaginationContext>({\n name: \"PaginationContext\",\n errorMessage: `usePaginationContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Pagination />\"`,\n })\n\nexport const computedRange = (start: number, end: number) =>\n Array.from({ length: end - start + 1 }, (_, index) => index + start)\n\nexport interface UsePaginationProps {\n /**\n * The total number of pages in pagination.\n */\n total: number\n /**\n * Number of elements visible on the left/right edges.\n *\n * @default 1\n */\n boundaries?: Token<number>\n /**\n * The initial page of the pagination.\n * Should be less than `total` and greater than `1`.\n *\n * @default 1\n */\n defaultPage?: number\n /**\n * If `true`, the pagination all item will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n /**\n * The page of the pagination.\n * Should be less than `total` and greater than `1`.\n */\n page?: number\n /** Number of siblings displayed on the left/right side of selected page.\n *\n * @default 1\n */\n siblings?: Token<number>\n /**\n * The callback invoked when the page changes.\n */\n onChange?: (page: number) => void\n}\n\nexport const usePagination = ({\n boundaries: _boundaries = 1,\n defaultPage = 1,\n isDisabled = false,\n page,\n siblings: _siblings = 1,\n total,\n onChange: onChangeProp,\n}: UsePaginationProps) => {\n const siblings = useValue(_siblings)\n const boundaries = useValue(_boundaries)\n\n const [currentPage, setCurrentPage] = useControllableState({\n defaultValue: defaultPage,\n value: page,\n onChange: onChangeProp,\n })\n\n const onFirst = useCallback(() => setCurrentPage(1), [setCurrentPage])\n\n const onLast = useCallback(\n () => setCurrentPage(total),\n [setCurrentPage, total],\n )\n\n const onPrev = useCallback(\n () => setCurrentPage((prev) => (prev === 1 ? prev : prev - 1)),\n [setCurrentPage],\n )\n\n const onNext = useCallback(\n () => setCurrentPage((prev) => (prev === total ? prev : prev + 1)),\n [setCurrentPage, total],\n )\n\n const onChange = useCallback(\n (page: number) => setCurrentPage(page),\n [setCurrentPage],\n )\n\n const range = useMemo((): (\"dots\" | number)[] => {\n const minimumTotal = siblings * 2 + 3 + boundaries * 2\n\n if (minimumTotal >= total) return computedRange(1, total)\n\n const prevSiblings = Math.max(currentPage - siblings, boundaries)\n const nextSiblings = Math.min(currentPage + siblings, total - boundaries)\n\n const prevDots = prevSiblings > boundaries + 2\n const nextDots = nextSiblings < total - (boundaries + 1)\n\n if (!prevDots && nextDots) {\n const prevPages = siblings * 2 + boundaries + 2\n\n return [\n ...computedRange(1, prevPages),\n \"dots\",\n ...computedRange(total - (boundaries - 1), total),\n ]\n }\n\n if (prevDots && !nextDots) {\n const nextPages = boundaries + 1 + 2 * siblings\n\n return [\n ...computedRange(1, boundaries),\n \"dots\",\n ...computedRange(total - nextPages, total),\n ]\n }\n\n return [\n ...computedRange(1, boundaries),\n \"dots\",\n ...computedRange(prevSiblings, nextSiblings),\n \"dots\",\n ...computedRange(total - boundaries + 1, total),\n ]\n }, [boundaries, siblings, currentPage, total])\n\n return {\n currentPage,\n isDisabled,\n range,\n total,\n onChange,\n onFirst,\n onLast,\n onNext,\n onPrev,\n }\n}\n\nexport type UsePaginationReturn = ReturnType<typeof usePagination>\n"],"mappings":";;;AACA,SAAS,4BAA4B;AACrC,SAAS,gBAAgB;AACzB,SAAS,qBAAqB;AAC9B,SAAS,aAAa,eAAe;AAM9B,IAAM,CAAC,oBAAoB,oBAAoB,IACpD,cAAiC;AAAA,EAC/B,MAAM;AAAA,EACN,cAAc;AAChB,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,YAAY,cAAc;AAAA,EAC1B,cAAc;AAAA,EACd,aAAa;AAAA,EACb;AAAA,EACA,UAAU,YAAY;AAAA,EACtB;AAAA,EACA,UAAU;AACZ,MAA0B;AACxB,QAAM,WAAW,SAAS,SAAS;AACnC,QAAM,aAAa,SAAS,WAAW;AAEvC,QAAM,CAAC,aAAa,cAAc,IAAI,qBAAqB;AAAA,IACzD,cAAc;AAAA,IACd,OAAO;AAAA,IACP,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,WAAW,IAAI,IAAI,aAAa;AAErD,QAAI,gBAAgB,MAAO,QAAO,cAAc,GAAG,KAAK;AAExD,UAAM,eAAe,KAAK,IAAI,cAAc,UAAU,UAAU;AAChE,UAAM,eAAe,KAAK,IAAI,cAAc,UAAU,QAAQ,UAAU;AAExE,UAAM,WAAW,eAAe,aAAa;AAC7C,UAAM,WAAW,eAAe,SAAS,aAAa;AAEtD,QAAI,CAAC,YAAY,UAAU;AACzB,YAAM,YAAY,WAAW,IAAI,aAAa;AAE9C,aAAO;AAAA,QACL,GAAG,cAAc,GAAG,SAAS;AAAA,QAC7B;AAAA,QACA,GAAG,cAAc,SAAS,aAAa,IAAI,KAAK;AAAA,MAClD;AAAA,IACF;AAEA,QAAI,YAAY,CAAC,UAAU;AACzB,YAAM,YAAY,aAAa,IAAI,IAAI;AAEvC,aAAO;AAAA,QACL,GAAG,cAAc,GAAG,UAAU;AAAA,QAC9B;AAAA,QACA,GAAG,cAAc,QAAQ,WAAW,KAAK;AAAA,MAC3C;AAAA,IACF;AAEA,WAAO;AAAA,MACL,GAAG,cAAc,GAAG,UAAU;AAAA,MAC9B;AAAA,MACA,GAAG,cAAc,cAAc,YAAY;AAAA,MAC3C;AAAA,MACA,GAAG,cAAc,QAAQ,aAAa,GAAG,KAAK;AAAA,IAChD;AAAA,EACF,GAAG,CAAC,YAAY,UAAU,aAAa,KAAK,CAAC;AAE7C,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;","names":["page"]}
|
@@ -5,10 +5,10 @@ import {
|
|
5
5
|
LastIcon,
|
6
6
|
NextIcon,
|
7
7
|
PrevIcon
|
8
|
-
} from "./chunk-
|
8
|
+
} from "./chunk-VPZBFCSD.mjs";
|
9
9
|
import {
|
10
10
|
usePaginationContext
|
11
|
-
} from "./chunk-
|
11
|
+
} from "./chunk-GKZNNZOM.mjs";
|
12
12
|
|
13
13
|
// src/pagination-item.tsx
|
14
14
|
import { ui } from "@yamada-ui/core";
|
@@ -17,18 +17,18 @@ import { cx, dataAttr } from "@yamada-ui/utils";
|
|
17
17
|
import { jsx, jsxs } from "react/jsx-runtime";
|
18
18
|
var iconMap = {
|
19
19
|
dots: /* @__PURE__ */ jsx(DotsIcon, {}),
|
20
|
-
next: /* @__PURE__ */ jsx(NextIcon, {}),
|
21
|
-
prev: /* @__PURE__ */ jsx(PrevIcon, {}),
|
22
20
|
first: /* @__PURE__ */ jsx(FirstIcon, {}),
|
23
|
-
last: /* @__PURE__ */ jsx(LastIcon, {})
|
21
|
+
last: /* @__PURE__ */ jsx(LastIcon, {}),
|
22
|
+
next: /* @__PURE__ */ jsx(NextIcon, {}),
|
23
|
+
prev: /* @__PURE__ */ jsx(PrevIcon, {})
|
24
24
|
};
|
25
25
|
var PaginationItem = ({
|
26
26
|
className,
|
27
|
+
children,
|
28
|
+
disableRipple,
|
27
29
|
isActive,
|
28
|
-
page,
|
29
30
|
isDisabled,
|
30
|
-
|
31
|
-
children,
|
31
|
+
page,
|
32
32
|
...rest
|
33
33
|
}) => {
|
34
34
|
var _a;
|
@@ -39,24 +39,24 @@ var PaginationItem = ({
|
|
39
39
|
});
|
40
40
|
children != null ? children : children = (_a = iconMap[page]) != null ? _a : page;
|
41
41
|
const css = {
|
42
|
-
|
43
|
-
overflow: "hidden",
|
44
|
-
userSelect: "none",
|
42
|
+
alignItems: "center",
|
45
43
|
display: "flex",
|
46
44
|
justifyContent: "center",
|
47
|
-
|
45
|
+
overflow: "hidden",
|
46
|
+
position: "relative",
|
47
|
+
userSelect: "none",
|
48
48
|
...styles.item,
|
49
49
|
...styles[page]
|
50
50
|
};
|
51
51
|
return /* @__PURE__ */ jsxs(
|
52
52
|
ui.button,
|
53
53
|
{
|
54
|
-
className: cx("ui-pagination__item", className),
|
55
54
|
type: "button",
|
56
|
-
|
57
|
-
disabled: isDisabled,
|
58
|
-
"data-selected": dataAttr(isActive),
|
55
|
+
className: cx("ui-pagination__item", className),
|
59
56
|
"data-disabled": dataAttr(isDisabled),
|
57
|
+
"data-selected": dataAttr(isActive),
|
58
|
+
disabled: isDisabled,
|
59
|
+
tabIndex: page !== "dots" ? 0 : -1,
|
60
60
|
__css: css,
|
61
61
|
...rest,
|
62
62
|
onPointerDown,
|
@@ -67,8 +67,10 @@ var PaginationItem = ({
|
|
67
67
|
}
|
68
68
|
);
|
69
69
|
};
|
70
|
+
PaginationItem.displayName = "PaginationItem";
|
71
|
+
PaginationItem.__ui__ = "PaginationItem";
|
70
72
|
|
71
73
|
export {
|
72
74
|
PaginationItem
|
73
75
|
};
|
74
|
-
//# sourceMappingURL=chunk-
|
76
|
+
//# sourceMappingURL=chunk-GOSRKZFX.mjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../src/pagination-item.tsx"],"sourcesContent":["import type { CSSUIObject, FC } from \"@yamada-ui/core\"\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\"\nimport { ui } from \"@yamada-ui/core\"\nimport { Ripple, useRipple } from \"@yamada-ui/ripple\"\nimport { cx, dataAttr } from \"@yamada-ui/utils\"\nimport {\n DotsIcon,\n FirstIcon,\n LastIcon,\n NextIcon,\n PrevIcon,\n} from \"./pagination-icon\"\nimport { usePaginationContext } from \"./use-pagination\"\n\ninterface PaginationItemOptions {\n /**\n * The type of the page or item assigned to the pagination item.\n */\n page: \"dots\" | \"first\" | \"last\" | \"next\" | \"prev\" | number\n /**\n * If `true`, disable ripple effects when pressing a element.\n *\n * @default false\n */\n disableRipple?: boolean\n /**\n * If `true`, the pagination item will be activated.\n *\n * @default false\n */\n isActive?: boolean\n /**\n * If `true`, the pagination item will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n}\n\nexport interface PaginationItemProps\n extends ComponentPropsWithoutRef<\"button\">,\n PaginationItemOptions {}\n\nconst iconMap: {\n [key in \"dots\" | \"first\" | \"last\" | \"next\" | \"prev\" | number]: ReactNode\n} = {\n dots: <DotsIcon />,\n first: <FirstIcon />,\n last: <LastIcon />,\n next: <NextIcon />,\n prev: <PrevIcon />,\n}\n\nexport const PaginationItem: FC<PaginationItemProps> = ({\n className,\n children,\n disableRipple,\n isActive,\n isDisabled,\n page,\n ...rest\n}) => {\n const styles = usePaginationContext()\n const { onPointerDown, ...rippleProps } = useRipple({\n ...rest,\n isDisabled: disableRipple || isDisabled,\n })\n\n children ??= iconMap[page] ?? page\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n display: \"flex\",\n justifyContent: \"center\",\n overflow: \"hidden\",\n position: \"relative\",\n userSelect: \"none\",\n ...styles.item,\n ...styles[page],\n }\n\n return (\n <ui.button\n type=\"button\"\n className={cx(\"ui-pagination__item\", className)}\n data-disabled={dataAttr(isDisabled)}\n data-selected={dataAttr(isActive)}\n disabled={isDisabled}\n tabIndex={page !== \"dots\" ? 0 : -1}\n __css={css}\n {...rest}\n onPointerDown={onPointerDown}\n >\n {children}\n\n <Ripple isDisabled={disableRipple || isDisabled} {...rippleProps} />\n </ui.button>\n )\n}\nPaginationItem.displayName = \"PaginationItem\"\nPaginationItem.__ui__ = \"PaginationItem\"\n"],"mappings":";;;;;;;;;;;;;AAEA,SAAS,UAAU;AACnB,SAAS,QAAQ,iBAAiB;AAClC,SAAS,IAAI,gBAAgB;AA0CrB,cAoCJ,YApCI;AAHR,IAAM,UAEF;AAAA,EACF,MAAM,oBAAC,YAAS;AAAA,EAChB,OAAO,oBAAC,aAAU;AAAA,EAClB,MAAM,oBAAC,YAAS;AAAA,EAChB,MAAM,oBAAC,YAAS;AAAA,EAChB,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,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,UAAU;AAAA,IACV,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,GAAG,OAAO;AAAA,IACV,GAAG,OAAO,IAAI;AAAA,EAChB;AAEA,SACE;AAAA,IAAC,GAAG;AAAA,IAAH;AAAA,MACC,MAAK;AAAA,MACL,WAAW,GAAG,uBAAuB,SAAS;AAAA,MAC9C,iBAAe,SAAS,UAAU;AAAA,MAClC,iBAAe,SAAS,QAAQ;AAAA,MAChC,UAAU;AAAA,MACV,UAAU,SAAS,SAAS,IAAI;AAAA,MAChC,OAAO;AAAA,MACN,GAAG;AAAA,MACJ;AAAA,MAEC;AAAA;AAAA,QAED,oBAAC,UAAO,YAAY,iBAAiB,YAAa,GAAG,aAAa;AAAA;AAAA;AAAA,EACpE;AAEJ;AACA,eAAe,cAAc;AAC7B,eAAe,SAAS;","names":[]}
|
@@ -1,18 +1,18 @@
|
|
1
1
|
"use client"
|
2
2
|
import {
|
3
3
|
PaginationItem
|
4
|
-
} from "./chunk-
|
4
|
+
} from "./chunk-GOSRKZFX.mjs";
|
5
5
|
import {
|
6
6
|
PaginationProvider,
|
7
7
|
usePagination
|
8
|
-
} from "./chunk-
|
8
|
+
} from "./chunk-GKZNNZOM.mjs";
|
9
9
|
|
10
10
|
// src/pagination.tsx
|
11
11
|
import {
|
12
|
-
ui,
|
13
12
|
forwardRef,
|
14
|
-
|
15
|
-
|
13
|
+
omitThemeProps,
|
14
|
+
ui,
|
15
|
+
useComponentMultiStyle
|
16
16
|
} from "@yamada-ui/core";
|
17
17
|
import { useValue } from "@yamada-ui/use-value";
|
18
18
|
import { cx, dataAttr, handlerAll } from "@yamada-ui/utils";
|
@@ -22,45 +22,45 @@ var Pagination = forwardRef((props, ref) => {
|
|
22
22
|
const [styles, mergedProps] = useComponentMultiStyle("Pagination", props);
|
23
23
|
const {
|
24
24
|
className,
|
25
|
+
boundaries,
|
25
26
|
component: Component = PaginationItem,
|
26
|
-
|
27
|
+
defaultPage,
|
28
|
+
isDisabled,
|
29
|
+
page,
|
30
|
+
siblings,
|
31
|
+
total,
|
27
32
|
withControls: _withControls = true,
|
28
33
|
withEdges: _withEdges = false,
|
29
|
-
innerProps,
|
30
|
-
controlProps,
|
31
|
-
controlPrevProps,
|
32
34
|
controlNextProps,
|
33
|
-
|
35
|
+
controlPrevProps,
|
36
|
+
controlProps,
|
34
37
|
edgeFirstProps,
|
35
38
|
edgeLastProps,
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
siblings,
|
40
|
-
boundaries,
|
41
|
-
isDisabled,
|
39
|
+
edgeProps,
|
40
|
+
innerProps,
|
41
|
+
itemProps,
|
42
42
|
onChange: onChangeProp,
|
43
43
|
...rest
|
44
44
|
} = omitThemeProps(mergedProps);
|
45
45
|
const withControls = useValue(_withControls);
|
46
46
|
const withEdges = useValue(_withEdges);
|
47
|
-
const { currentPage,
|
48
|
-
page,
|
49
|
-
defaultPage,
|
50
|
-
total,
|
51
|
-
siblings,
|
47
|
+
const { currentPage, range, onChange, onFirst, onLast, onNext, onPrev } = usePagination({
|
52
48
|
boundaries,
|
49
|
+
defaultPage,
|
53
50
|
isDisabled,
|
51
|
+
page,
|
52
|
+
siblings,
|
53
|
+
total,
|
54
54
|
onChange: onChangeProp
|
55
55
|
});
|
56
56
|
const children = useMemo(
|
57
57
|
() => range.map((page2, key) => /* @__PURE__ */ jsx(
|
58
58
|
Component,
|
59
59
|
{
|
60
|
-
|
60
|
+
"aria-label": page2 === "dots" ? "Jump to omitted pages" : `Go to page ${page2}`,
|
61
61
|
isActive: currentPage === page2,
|
62
62
|
isDisabled,
|
63
|
-
|
63
|
+
page: page2,
|
64
64
|
...itemProps,
|
65
65
|
onClick: handlerAll(
|
66
66
|
itemProps == null ? void 0 : itemProps.onClick,
|
@@ -72,8 +72,8 @@ var Pagination = forwardRef((props, ref) => {
|
|
72
72
|
[Component, currentPage, isDisabled, onChange, range, itemProps]
|
73
73
|
);
|
74
74
|
const css = {
|
75
|
-
display: "flex",
|
76
75
|
alignItems: "center",
|
76
|
+
display: "flex",
|
77
77
|
...styles.container
|
78
78
|
};
|
79
79
|
return /* @__PURE__ */ jsx(PaginationProvider, { value: styles, children: /* @__PURE__ */ jsxs(
|
@@ -89,10 +89,10 @@ var Pagination = forwardRef((props, ref) => {
|
|
89
89
|
withEdges ? /* @__PURE__ */ jsx(
|
90
90
|
Component,
|
91
91
|
{
|
92
|
-
page: "first",
|
93
|
-
"aria-label": "Go to first page",
|
94
92
|
className: "ui-pagination__item--first",
|
93
|
+
"aria-label": "Go to first page",
|
95
94
|
isDisabled: isDisabled || currentPage === 1,
|
95
|
+
page: "first",
|
96
96
|
...edgeProps,
|
97
97
|
...edgeFirstProps,
|
98
98
|
onClick: handlerAll(
|
@@ -105,10 +105,10 @@ var Pagination = forwardRef((props, ref) => {
|
|
105
105
|
withControls ? /* @__PURE__ */ jsx(
|
106
106
|
Component,
|
107
107
|
{
|
108
|
-
page: "prev",
|
109
|
-
"aria-label": "Go to previous page",
|
110
108
|
className: "ui-pagination__item--prev",
|
109
|
+
"aria-label": "Go to previous page",
|
111
110
|
isDisabled: isDisabled || currentPage === 1,
|
111
|
+
page: "prev",
|
112
112
|
...controlProps,
|
113
113
|
...controlPrevProps,
|
114
114
|
onClick: handlerAll(
|
@@ -123,9 +123,9 @@ var Pagination = forwardRef((props, ref) => {
|
|
123
123
|
{
|
124
124
|
className: "ui-pagination-inner",
|
125
125
|
__css: {
|
126
|
+
alignItems: "center",
|
126
127
|
display: "flex",
|
127
128
|
justifyContent: "center",
|
128
|
-
alignItems: "center",
|
129
129
|
...styles.inner
|
130
130
|
},
|
131
131
|
...innerProps,
|
@@ -135,10 +135,10 @@ var Pagination = forwardRef((props, ref) => {
|
|
135
135
|
withControls ? /* @__PURE__ */ jsx(
|
136
136
|
Component,
|
137
137
|
{
|
138
|
-
page: "next",
|
139
|
-
"aria-label": "Go to next page",
|
140
138
|
className: "ui-pagination__item--next",
|
139
|
+
"aria-label": "Go to next page",
|
141
140
|
isDisabled: isDisabled || currentPage === total,
|
141
|
+
page: "next",
|
142
142
|
...controlProps,
|
143
143
|
...controlNextProps,
|
144
144
|
onClick: handlerAll(
|
@@ -151,10 +151,10 @@ var Pagination = forwardRef((props, ref) => {
|
|
151
151
|
withEdges ? /* @__PURE__ */ jsx(
|
152
152
|
Component,
|
153
153
|
{
|
154
|
-
page: "last",
|
155
|
-
"aria-label": "Go to last page",
|
156
154
|
className: "ui-pagination__item--last",
|
155
|
+
"aria-label": "Go to last page",
|
157
156
|
isDisabled: isDisabled || currentPage === total,
|
157
|
+
page: "last",
|
158
158
|
...edgeProps,
|
159
159
|
...edgeLastProps,
|
160
160
|
onClick: handlerAll(
|
@@ -168,8 +168,10 @@ var Pagination = forwardRef((props, ref) => {
|
|
168
168
|
}
|
169
169
|
) });
|
170
170
|
});
|
171
|
+
Pagination.displayName = "Pagination";
|
172
|
+
Pagination.__ui__ = "Pagination";
|
171
173
|
|
172
174
|
export {
|
173
175
|
Pagination
|
174
176
|
};
|
175
|
-
//# sourceMappingURL=chunk-
|
177
|
+
//# sourceMappingURL=chunk-PGW7Y4GO.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 type { ComponentPropsWithoutRef, FC } from \"react\"\nimport type { PaginationItemProps } from \"./pagination-item\"\nimport type { UsePaginationProps } from \"./use-pagination\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport { useValue } from \"@yamada-ui/use-value\"\nimport { cx, dataAttr, handlerAll } from \"@yamada-ui/utils\"\nimport { useMemo } from \"react\"\nimport { PaginationItem } from \"./pagination-item\"\nimport { PaginationProvider, usePagination } from \"./use-pagination\"\n\ninterface PaginationOptions {\n /**\n * The pagination button component to use.\n */\n component?: FC<PaginationItemProps>\n /**\n * If `true`, display the control buttons.\n *\n * @default true\n */\n withControls?: Token<boolean>\n /**\n * If `true`, display the edge buttons.\n *\n * @default false\n */\n withEdges?: Token<boolean>\n /**\n * Props for next of the control button element.\n */\n controlNextProps?: HTMLUIProps<\"button\">\n /**\n * Props for previous of the control button element.\n */\n controlPrevProps?: HTMLUIProps<\"button\">\n /**\n * Props for control button element.\n */\n controlProps?: HTMLUIProps<\"button\">\n /**\n * Props for first of the edge button element.\n */\n edgeFirstProps?: HTMLUIProps<\"button\">\n /**\n * Props for last of the edge button element.\n */\n edgeLastProps?: HTMLUIProps<\"button\">\n /**\n * Props for edge button element.\n */\n edgeProps?: HTMLUIProps<\"button\">\n /**\n * Props for inner element.\n */\n innerProps?: HTMLUIProps\n /**\n * Props for button element.\n */\n itemProps?: HTMLUIProps<\"button\">\n}\n\nexport interface PaginationProps\n extends Omit<HTMLUIProps, \"children\" | \"onChange\" | \"page\">,\n ThemeProps<\"Pagination\">,\n UsePaginationProps,\n PaginationOptions {}\n\n/**\n * `Pagination` is a component for managing the pagination and navigation of content.\n *\n * @see Docs https://yamada-ui.com/components/navigation/pagination\n */\nexport const Pagination = forwardRef<PaginationProps, \"div\">((props, ref) => {\n const [styles, mergedProps] = useComponentMultiStyle(\"Pagination\", props)\n const {\n className,\n boundaries,\n component: Component = PaginationItem,\n defaultPage,\n isDisabled,\n page,\n siblings,\n total,\n withControls: _withControls = true,\n withEdges: _withEdges = false,\n controlNextProps,\n controlPrevProps,\n controlProps,\n edgeFirstProps,\n edgeLastProps,\n edgeProps,\n innerProps,\n itemProps,\n onChange: onChangeProp,\n ...rest\n } = omitThemeProps(mergedProps)\n\n const withControls = useValue(_withControls)\n const withEdges = useValue(_withEdges)\n\n const { currentPage, range, onChange, onFirst, onLast, onNext, onPrev } =\n usePagination({\n boundaries,\n defaultPage,\n isDisabled,\n page,\n siblings,\n total,\n onChange: onChangeProp,\n })\n\n const children = useMemo(\n () =>\n range.map((page, key) => (\n <Component\n key={key}\n aria-label={\n page === \"dots\" ? \"Jump to omitted pages\" : `Go to page ${page}`\n }\n isActive={currentPage === page}\n isDisabled={isDisabled}\n page={page}\n {...(itemProps as ComponentPropsWithoutRef<\"button\">)}\n onClick={handlerAll(\n itemProps?.onClick,\n page !== \"dots\" ? () => onChange(page) : undefined,\n )}\n />\n )),\n [Component, currentPage, isDisabled, onChange, range, itemProps],\n )\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n display: \"flex\",\n ...styles.container,\n }\n\n return (\n <PaginationProvider value={styles}>\n <ui.div\n ref={ref}\n className={cx(\"ui-pagination\", className)}\n role=\"navigation\"\n __css={css}\n {...rest}\n data-disabled={dataAttr(isDisabled)}\n >\n {withEdges ? (\n <Component\n className=\"ui-pagination__item--first\"\n aria-label=\"Go to first page\"\n isDisabled={isDisabled || currentPage === 1}\n page=\"first\"\n {...(edgeProps as ComponentPropsWithoutRef<\"button\">)}\n {...(edgeFirstProps as ComponentPropsWithoutRef<\"button\">)}\n onClick={handlerAll(\n edgeProps?.onClick,\n edgeFirstProps?.onClick,\n onFirst,\n )}\n />\n ) : null}\n\n {withControls ? (\n <Component\n className=\"ui-pagination__item--prev\"\n aria-label=\"Go to previous page\"\n isDisabled={isDisabled || currentPage === 1}\n page=\"prev\"\n {...(controlProps as ComponentPropsWithoutRef<\"button\">)}\n {...(controlPrevProps as ComponentPropsWithoutRef<\"button\">)}\n onClick={handlerAll(\n controlProps?.onClick,\n controlPrevProps?.onClick,\n onPrev,\n )}\n />\n ) : null}\n\n <ui.div\n className=\"ui-pagination-inner\"\n __css={{\n alignItems: \"center\",\n display: \"flex\",\n justifyContent: \"center\",\n ...styles.inner,\n }}\n {...innerProps}\n >\n {children}\n </ui.div>\n\n {withControls ? (\n <Component\n className=\"ui-pagination__item--next\"\n aria-label=\"Go to next page\"\n isDisabled={isDisabled || currentPage === total}\n page=\"next\"\n {...(controlProps as ComponentPropsWithoutRef<\"button\">)}\n {...(controlNextProps as ComponentPropsWithoutRef<\"button\">)}\n onClick={handlerAll(\n controlProps?.onClick,\n controlNextProps?.onClick,\n onNext,\n )}\n />\n ) : null}\n\n {withEdges ? (\n <Component\n className=\"ui-pagination__item--last\"\n aria-label=\"Go to last page\"\n isDisabled={isDisabled || currentPage === total}\n page=\"last\"\n {...(edgeProps as ComponentPropsWithoutRef<\"button\">)}\n {...(edgeLastProps as ComponentPropsWithoutRef<\"button\">)}\n onClick={handlerAll(\n edgeProps?.onClick,\n edgeLastProps?.onClick,\n onLast,\n )}\n />\n ) : null}\n </ui.div>\n </PaginationProvider>\n )\n})\n\nPagination.displayName = \"Pagination\"\nPagination.__ui__ = \"Pagination\"\n"],"mappings":"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","names":["page"]}
|
@@ -7,35 +7,41 @@ var DotsIcon = (props) => {
|
|
7
7
|
return /* @__PURE__ */ jsx(Icon, { viewBox: "0 0 16 16", ...props, children: /* @__PURE__ */ jsx(
|
8
8
|
"path",
|
9
9
|
{
|
10
|
-
|
11
|
-
|
10
|
+
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",
|
11
|
+
fill: "currentColor"
|
12
12
|
}
|
13
13
|
) });
|
14
14
|
};
|
15
|
+
DotsIcon.displayName = "DotIcon";
|
16
|
+
DotsIcon.__ui__ = "DotIcon";
|
15
17
|
var FirstIcon = (props) => {
|
16
18
|
return /* @__PURE__ */ jsx(Icon, { viewBox: "0 0 16 16", ...props, children: /* @__PURE__ */ jsx(
|
17
19
|
"path",
|
18
20
|
{
|
19
|
-
|
20
|
-
|
21
|
+
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",
|
22
|
+
fill: "currentColor"
|
21
23
|
}
|
22
24
|
) });
|
23
25
|
};
|
26
|
+
FirstIcon.displayName = "LastIcon";
|
27
|
+
FirstIcon.__ui__ = "LastIcon";
|
24
28
|
var LastIcon = (props) => {
|
25
29
|
return /* @__PURE__ */ jsx(Icon, { viewBox: "0 0 16 16", ...props, children: /* @__PURE__ */ jsx(
|
26
30
|
"path",
|
27
31
|
{
|
28
|
-
|
29
|
-
|
32
|
+
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",
|
33
|
+
fill: "currentColor"
|
30
34
|
}
|
31
35
|
) });
|
32
36
|
};
|
37
|
+
LastIcon.displayName = "LastIcon";
|
38
|
+
LastIcon.__ui__ = "LastIcon";
|
33
39
|
var PrevIcon = (props) => {
|
34
40
|
return /* @__PURE__ */ jsx(Icon, { viewBox: "0 0 16 16", ...props, children: /* @__PURE__ */ jsx(
|
35
41
|
"path",
|
36
42
|
{
|
37
|
-
|
38
|
-
|
43
|
+
d: "M7.219 8l3.3 3.3-.943.943L5.333 8l4.243-4.243.943.943-3.3 3.3z",
|
44
|
+
fill: "currentColor"
|
39
45
|
}
|
40
46
|
) });
|
41
47
|
};
|
@@ -43,11 +49,13 @@ var NextIcon = (props) => {
|
|
43
49
|
return /* @__PURE__ */ jsx(Icon, { viewBox: "0 0 16 16", ...props, children: /* @__PURE__ */ jsx(
|
44
50
|
"path",
|
45
51
|
{
|
46
|
-
|
47
|
-
|
52
|
+
d: "M8.781 8l-3.3-3.3.943-.943L10.667 8l-4.243 4.243-.943-.943 3.3-3.3z",
|
53
|
+
fill: "currentColor"
|
48
54
|
}
|
49
55
|
) });
|
50
56
|
};
|
57
|
+
NextIcon.displayName = "NextIcon";
|
58
|
+
NextIcon.__ui__ = "NextIcon";
|
51
59
|
|
52
60
|
export {
|
53
61
|
DotsIcon,
|
@@ -56,4 +64,4 @@ export {
|
|
56
64
|
PrevIcon,
|
57
65
|
NextIcon
|
58
66
|
};
|
59
|
-
//# sourceMappingURL=chunk-
|
67
|
+
//# sourceMappingURL=chunk-VPZBFCSD.mjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../src/pagination-icon.tsx"],"sourcesContent":["import type { FC } from \"@yamada-ui/core\"\nimport type { IconProps } from \"@yamada-ui/icon\"\nimport { Icon } from \"@yamada-ui/icon\"\n\nexport const DotsIcon: FC<IconProps> = (props) => {\n return (\n <Icon viewBox=\"0 0 16 16\" {...props}>\n <path\n d=\"M2 8c0-.733.6-1.333 1.333-1.333.734 0 1.334.6 1.334 1.333s-.6 1.333-1.334 1.333C2.6 9.333 2 8.733 2 8zm9.333 0c0-.733.6-1.333 1.334-1.333C13.4 6.667 14 7.267 14 8s-.6 1.333-1.333 1.333c-.734 0-1.334-.6-1.334-1.333zM6.667 8c0-.733.6-1.333 1.333-1.333s1.333.6 1.333 1.333S8.733 9.333 8 9.333 6.667 8.733 6.667 8z\"\n fill=\"currentColor\"\n />\n </Icon>\n )\n}\nDotsIcon.displayName = \"DotIcon\"\nDotsIcon.__ui__ = \"DotIcon\"\n\nexport const FirstIcon: FC<IconProps> = (props) => {\n return (\n <Icon viewBox=\"0 0 16 16\" {...props}>\n <path\n d=\"M6.85355 3.85355C7.04882 3.65829 7.04882 3.34171 6.85355 3.14645C6.65829 2.95118 6.34171 2.95118 6.14645 3.14645L2.14645 7.14645C1.95118 7.34171 1.95118 7.65829 2.14645 7.85355L6.14645 11.8536C6.34171 12.0488 6.65829 12.0488 6.85355 11.8536C7.04882 11.6583 7.04882 11.3417 6.85355 11.1464L3.20711 7.5L6.85355 3.85355ZM12.8536 3.85355C13.0488 3.65829 13.0488 3.34171 12.8536 3.14645C12.6583 2.95118 12.3417 2.95118 12.1464 3.14645L8.14645 7.14645C7.95118 7.34171 7.95118 7.65829 8.14645 7.85355L12.1464 11.8536C12.3417 12.0488 12.6583 12.0488 12.8536 11.8536C13.0488 11.6583 13.0488 11.3417 12.8536 11.1464L9.20711 7.5L12.8536 3.85355Z\"\n fill=\"currentColor\"\n />\n </Icon>\n )\n}\n\nFirstIcon.displayName = \"LastIcon\"\nFirstIcon.__ui__ = \"LastIcon\"\n\nexport const LastIcon: FC<IconProps> = (props) => {\n return (\n <Icon viewBox=\"0 0 16 16\" {...props}>\n <path\n d=\"M2.14645 11.1464C1.95118 11.3417 1.95118 11.6583 2.14645 11.8536C2.34171 12.0488 2.65829 12.0488 2.85355 11.8536L6.85355 7.85355C7.04882 7.65829 7.04882 7.34171 6.85355 7.14645L2.85355 3.14645C2.65829 2.95118 2.34171 2.95118 2.14645 3.14645C1.95118 3.34171 1.95118 3.65829 2.14645 3.85355L5.79289 7.5L2.14645 11.1464ZM8.14645 11.1464C7.95118 11.3417 7.95118 11.6583 8.14645 11.8536C8.34171 12.0488 8.65829 12.0488 8.85355 11.8536L12.8536 7.85355C13.0488 7.65829 13.0488 7.34171 12.8536 7.14645L8.85355 3.14645C8.65829 2.95118 8.34171 2.95118 8.14645 3.14645C7.95118 3.34171 7.95118 3.65829 8.14645 3.85355L11.7929 7.5L8.14645 11.1464Z\"\n fill=\"currentColor\"\n />\n </Icon>\n )\n}\nLastIcon.displayName = \"LastIcon\"\nLastIcon.__ui__ = \"LastIcon\"\n\nexport const PrevIcon: FC<IconProps> = (props) => {\n return (\n <Icon viewBox=\"0 0 16 16\" {...props}>\n <path\n d=\"M7.219 8l3.3 3.3-.943.943L5.333 8l4.243-4.243.943.943-3.3 3.3z\"\n fill=\"currentColor\"\n />\n </Icon>\n )\n}\n\nexport const NextIcon: FC<IconProps> = (props) => {\n return (\n <Icon viewBox=\"0 0 16 16\" {...props}>\n <path\n d=\"M8.781 8l-3.3-3.3.943-.943L10.667 8l-4.243 4.243-.943-.943 3.3-3.3z\"\n fill=\"currentColor\"\n />\n </Icon>\n )\n}\nNextIcon.displayName = \"NextIcon\"\nNextIcon.__ui__ = \"NextIcon\"\n"],"mappings":";;;AAEA,SAAS,YAAY;AAKf;AAHC,IAAM,WAA0B,CAAC,UAAU;AAChD,SACE,oBAAC,QAAK,SAAQ,aAAa,GAAG,OAC5B;AAAA,IAAC;AAAA;AAAA,MACC,GAAE;AAAA,MACF,MAAK;AAAA;AAAA,EACP,GACF;AAEJ;AACA,SAAS,cAAc;AACvB,SAAS,SAAS;AAEX,IAAM,YAA2B,CAAC,UAAU;AACjD,SACE,oBAAC,QAAK,SAAQ,aAAa,GAAG,OAC5B;AAAA,IAAC;AAAA;AAAA,MACC,GAAE;AAAA,MACF,MAAK;AAAA;AAAA,EACP,GACF;AAEJ;AAEA,UAAU,cAAc;AACxB,UAAU,SAAS;AAEZ,IAAM,WAA0B,CAAC,UAAU;AAChD,SACE,oBAAC,QAAK,SAAQ,aAAa,GAAG,OAC5B;AAAA,IAAC;AAAA;AAAA,MACC,GAAE;AAAA,MACF,MAAK;AAAA;AAAA,EACP,GACF;AAEJ;AACA,SAAS,cAAc;AACvB,SAAS,SAAS;AAEX,IAAM,WAA0B,CAAC,UAAU;AAChD,SACE,oBAAC,QAAK,SAAQ,aAAa,GAAG,OAC5B;AAAA,IAAC;AAAA;AAAA,MACC,GAAE;AAAA,MACF,MAAK;AAAA;AAAA,EACP,GACF;AAEJ;AAEO,IAAM,WAA0B,CAAC,UAAU;AAChD,SACE,oBAAC,QAAK,SAAQ,aAAa,GAAG,OAC5B;AAAA,IAAC;AAAA;AAAA,MACC,GAAE;AAAA,MACF,MAAK;AAAA;AAAA,EACP,GACF;AAEJ;AACA,SAAS,cAAc;AACvB,SAAS,SAAS;","names":[]}
|