@yamada-ui/pagination 1.0.43-next-20241022143327 → 1.1.0

package/dist/chunk-2SJMAKWY.mjs

@@ -0,0 +1,173 @@
+"use client"
+import {
+  PaginationItem
+} from "./chunk-LFUBRVFO.mjs";
+import {
+  PaginationProvider,
+  usePagination
+} from "./chunk-O6EIBNLC.mjs";
+
+// src/pagination.tsx
+import {
+  forwardRef,
+  omitThemeProps,
+  ui,
+  useComponentMultiStyle
+} from "@yamada-ui/core";
+import { useValue } from "@yamada-ui/use-value";
+import { cx, dataAttr, handlerAll } from "@yamada-ui/utils";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Pagination = forwardRef((props, ref) => {
+  const [styles, mergedProps] = useComponentMultiStyle("Pagination", props);
+  const {
+    className,
+    boundaries,
+    component: Component = PaginationItem,
+    defaultPage,
+    isDisabled,
+    page,
+    siblings,
+    total,
+    withControls: _withControls = true,
+    withEdges: _withEdges = false,
+    containerProps,
+    controlNextProps,
+    controlPrevProps,
+    controlProps,
+    edgeFirstProps,
+    edgeLastProps,
+    edgeProps,
+    itemProps,
+    onChange: onChangeProp,
+    ...rest
+  } = omitThemeProps(mergedProps);
+  const withControls = useValue(_withControls);
+  const withEdges = useValue(_withEdges);
+  const { currentPage, range, onChange, onFirst, onLast, onNext, onPrev } = usePagination({
+    boundaries,
+    defaultPage,
+    isDisabled,
+    page,
+    siblings,
+    total,
+    onChange: onChangeProp
+  });
+  const children = useMemo(
+    () => range.map((page2, key) => /* @__PURE__ */ jsx(ui.li, { children: /* @__PURE__ */ jsx(
+      Component,
+      {
+        "aria-label": page2 !== "ellipsis" ? `Go to page ${page2}` : void 0,
+        isActive: currentPage === page2,
+        isDisabled,
+        ...itemProps,
+        page: page2,
+        onClick: handlerAll(
+          itemProps == null ? void 0 : itemProps.onClick,
+          page2 !== "ellipsis" ? () => onChange(page2) : void 0
+        )
+      }
+    ) }, key)),
+    [Component, currentPage, isDisabled, onChange, range, itemProps]
+  );
+  const css = {
+    ...styles.container
+  };
+  return /* @__PURE__ */ jsx(PaginationProvider, { value: styles, children: /* @__PURE__ */ jsx(
+    ui.nav,
+    {
+      ref,
+      className: cx("ui-pagination", className),
+      "data-disabled": dataAttr(isDisabled),
+      __css: css,
+      ...containerProps,
+      children: /* @__PURE__ */ jsxs(
+        ui.ul,
+        {
+          className: "ui-pagination-inner",
+          "data-disabled": dataAttr(isDisabled),
+          __css: {
+            alignItems: "center",
+            display: "flex",
+            ...styles.inner
+          },
+          ...rest,
+          children: [
+            withEdges ? /* @__PURE__ */ jsx(ui.li, { children: /* @__PURE__ */ jsx(
+              Component,
+              {
+                className: "ui-pagination__item--first",
+                "aria-label": "Go to first page",
+                isDisabled: isDisabled || currentPage === 1,
+                page: "first",
+                ...edgeProps,
+                ...edgeFirstProps,
+                onClick: handlerAll(
+                  edgeProps == null ? void 0 : edgeProps.onClick,
+                  edgeFirstProps == null ? void 0 : edgeFirstProps.onClick,
+                  onFirst
+                )
+              }
+            ) }) : null,
+            withControls ? /* @__PURE__ */ jsx(ui.li, { children: /* @__PURE__ */ jsx(
+              Component,
+              {
+                className: "ui-pagination__item--prev",
+                "aria-label": "Go to previous page",
+                isDisabled: isDisabled || currentPage === 1,
+                page: "prev",
+                ...controlProps,
+                ...controlPrevProps,
+                onClick: handlerAll(
+                  controlProps == null ? void 0 : controlProps.onClick,
+                  controlPrevProps == null ? void 0 : controlPrevProps.onClick,
+                  onPrev
+                )
+              }
+            ) }) : null,
+            children,
+            withControls ? /* @__PURE__ */ jsx(ui.li, { children: /* @__PURE__ */ jsx(
+              Component,
+              {
+                className: "ui-pagination__item--next",
+                "aria-label": "Go to next page",
+                isDisabled: isDisabled || currentPage === total,
+                page: "next",
+                ...controlProps,
+                ...controlNextProps,
+                onClick: handlerAll(
+                  controlProps == null ? void 0 : controlProps.onClick,
+                  controlNextProps == null ? void 0 : controlNextProps.onClick,
+                  onNext
+                )
+              }
+            ) }) : null,
+            withEdges ? /* @__PURE__ */ jsx(ui.li, { children: /* @__PURE__ */ jsx(
+              Component,
+              {
+                className: "ui-pagination__item--last",
+                "aria-label": "Go to last page",
+                isDisabled: isDisabled || currentPage === total,
+                page: "last",
+                ...edgeProps,
+                ...edgeLastProps,
+                onClick: handlerAll(
+                  edgeProps == null ? void 0 : edgeProps.onClick,
+                  edgeLastProps == null ? void 0 : edgeLastProps.onClick,
+                  onLast
+                )
+              }
+            ) }) : null
+          ]
+        }
+      )
+    }
+  ) });
+});
+Pagination.displayName = "Pagination";
+Pagination.__ui__ = "Pagination";
+
+export {
+  Pagination
+};
+//# sourceMappingURL=chunk-2SJMAKWY.mjs.map

package/dist/chunk-2SJMAKWY.mjs.map

@@ -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 type { 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 container element.\n   */\n  containerProps?: HTMLUIProps<\"nav\">\n  /**\n   * Props for next of the control button element.\n   */\n  controlNextProps?: Omit<PaginationItemProps, \"page\">\n  /**\n   * Props for previous of the control button element.\n   */\n  controlPrevProps?: Omit<PaginationItemProps, \"page\">\n  /**\n   * Props for control button element.\n   */\n  controlProps?: Omit<PaginationItemProps, \"page\">\n  /**\n   * Props for first of the edge button element.\n   */\n  edgeFirstProps?: Omit<PaginationItemProps, \"page\">\n  /**\n   * Props for last of the edge button element.\n   */\n  edgeLastProps?: Omit<PaginationItemProps, \"page\">\n  /**\n   * Props for edge button element.\n   */\n  edgeProps?: Omit<PaginationItemProps, \"page\">\n  /**\n   * Props for button element.\n   */\n  itemProps?: Omit<PaginationItemProps, \"page\">\n}\n\nexport interface PaginationProps\n  extends Omit<HTMLUIProps<\"ul\">, \"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, \"ul\">((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    containerProps,\n    controlNextProps,\n    controlPrevProps,\n    controlProps,\n    edgeFirstProps,\n    edgeLastProps,\n    edgeProps,\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        <ui.li key={key}>\n          <Component\n            aria-label={page !== \"ellipsis\" ? `Go to page ${page}` : undefined}\n            isActive={currentPage === page}\n            isDisabled={isDisabled}\n            {...itemProps}\n            page={page}\n            onClick={handlerAll(\n              itemProps?.onClick,\n              page !== \"ellipsis\" ? () => onChange(page) : undefined,\n            )}\n          />\n        </ui.li>\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.nav\n        ref={ref}\n        className={cx(\"ui-pagination\", className)}\n        data-disabled={dataAttr(isDisabled)}\n        __css={css}\n        {...containerProps}\n      >\n        <ui.ul\n          className=\"ui-pagination-inner\"\n          data-disabled={dataAttr(isDisabled)}\n          __css={{\n            alignItems: \"center\",\n            display: \"flex\",\n            ...styles.inner,\n          }}\n          {...rest}\n        >\n          {withEdges ? (\n            <ui.li>\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}\n                {...edgeFirstProps}\n                onClick={handlerAll(\n                  edgeProps?.onClick,\n                  edgeFirstProps?.onClick,\n                  onFirst,\n                )}\n              />\n            </ui.li>\n          ) : null}\n\n          {withControls ? (\n            <ui.li>\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}\n                {...controlPrevProps}\n                onClick={handlerAll(\n                  controlProps?.onClick,\n                  controlPrevProps?.onClick,\n                  onPrev,\n                )}\n              />\n            </ui.li>\n          ) : null}\n\n          {children}\n\n          {withControls ? (\n            <ui.li>\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}\n                {...controlNextProps}\n                onClick={handlerAll(\n                  controlProps?.onClick,\n                  controlNextProps?.onClick,\n                  onNext,\n                )}\n              />\n            </ui.li>\n          ) : null}\n\n          {withEdges ? (\n            <ui.li>\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}\n                {...edgeLastProps}\n                onClick={handlerAll(\n                  edgeProps?.onClick,\n                  edgeLastProps?.onClick,\n                  onLast,\n                )}\n              />\n            </ui.li>\n          ) : null}\n        </ui.ul>\n      </ui.nav>\n    </PaginationProvider>\n  )\n})\n\nPagination.displayName = \"Pagination\"\nPagination.__ui__ = \"Pagination\"\n"],"mappings":"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","names":["page"]}

package/dist/chunk-LFUBRVFO.mjs

@@ -0,0 +1,78 @@
+"use client"
+import {
+  PaginationEllipsisIcon,
+  PaginationFirstIcon,
+  PaginationLastIcon,
+  PaginationNextIcon,
+  PaginationPrevIcon
+} from "./chunk-VZWGYG76.mjs";
+import {
+  usePaginationContext
+} from "./chunk-O6EIBNLC.mjs";
+
+// src/pagination-item.tsx
+import { forwardRef, ui } from "@yamada-ui/core";
+import { Ripple, useRipple } from "@yamada-ui/ripple";
+import { cx, dataAttr } from "@yamada-ui/utils";
+import { jsx, jsxs } from "react/jsx-runtime";
+var iconMap = {
+  ellipsis: /* @__PURE__ */ jsx(PaginationEllipsisIcon, {}),
+  first: /* @__PURE__ */ jsx(PaginationFirstIcon, {}),
+  last: /* @__PURE__ */ jsx(PaginationLastIcon, {}),
+  next: /* @__PURE__ */ jsx(PaginationNextIcon, {}),
+  prev: /* @__PURE__ */ jsx(PaginationPrevIcon, {})
+};
+var PaginationItem = forwardRef(
+  ({ className, children, disableRipple, isActive, isDisabled, page, ...rest }, ref) => {
+    var _a;
+    const styles = usePaginationContext();
+    const isEllipsis = page === "ellipsis";
+    const { onPointerDown, ...rippleProps } = useRipple({
+      ...rest,
+      isDisabled: disableRipple || isDisabled || isEllipsis
+    });
+    children != null ? children : children = (_a = iconMap[page]) != null ? _a : page;
+    const css = {
+      alignItems: "center",
+      display: "flex",
+      justifyContent: "center",
+      overflow: "hidden",
+      position: "relative",
+      userSelect: "none",
+      ...styles.item,
+      ...styles[page]
+    };
+    const Component = ui[isEllipsis ? "span" : "button"];
+    return /* @__PURE__ */ jsxs(
+      Component,
+      {
+        ref,
+        ...!isEllipsis ? {
+          "data-disabled": dataAttr(isDisabled),
+          "data-selected": dataAttr(isActive),
+          disabled: isDisabled
+        } : {},
+        className: cx(
+          "ui-pagination__item",
+          isEllipsis ? "ui-pagination__item--ellipsis" : void 0,
+          className
+        ),
+        tabIndex: !isEllipsis ? 0 : -1,
+        __css: css,
+        ...rest,
+        onPointerDown,
+        children: [
+          children,
+          /* @__PURE__ */ jsx(Ripple, { isDisabled: disableRipple || isDisabled, ...rippleProps })
+        ]
+      }
+    );
+  }
+);
+PaginationItem.displayName = "PaginationItem";
+PaginationItem.__ui__ = "PaginationItem";
+
+export {
+  PaginationItem
+};
+//# sourceMappingURL=chunk-LFUBRVFO.mjs.map

package/dist/chunk-LFUBRVFO.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/pagination-item.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps } from \"@yamada-ui/core\"\nimport type { ReactNode } from \"react\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { Ripple, useRipple } from \"@yamada-ui/ripple\"\nimport { cx, dataAttr } from \"@yamada-ui/utils\"\nimport {\n  PaginationEllipsisIcon,\n  PaginationFirstIcon,\n  PaginationLastIcon,\n  PaginationNextIcon,\n  PaginationPrevIcon,\n} from \"./pagination-icon\"\nimport { usePaginationContext } from \"./use-pagination\"\n\ninterface PaginationItemOptions {\n  /**\n   * The type of the page or item assigned to the pagination item.\n   */\n  page: \"ellipsis\" | \"first\" | \"last\" | \"next\" | \"prev\" | number\n  /**\n   * If `true`, disable ripple effects when pressing a element.\n   *\n   * @default false\n   */\n  disableRipple?: boolean\n  /**\n   * If `true`, the pagination item will be activated.\n   *\n   * @default false\n   */\n  isActive?: boolean\n  /**\n   * If `true`, the pagination item will be disabled.\n   *\n   * @default false\n   */\n  isDisabled?: boolean\n}\n\nexport interface PaginationItemProps\n  extends Omit<HTMLUIProps<\"button\">, \"page\">,\n    PaginationItemOptions {}\n\nconst iconMap: {\n  [key in \"ellipsis\" | \"first\" | \"last\" | \"next\" | \"prev\" | number]: ReactNode\n} = {\n  ellipsis: <PaginationEllipsisIcon />,\n  first: <PaginationFirstIcon />,\n  last: <PaginationLastIcon />,\n  next: <PaginationNextIcon />,\n  prev: <PaginationPrevIcon />,\n}\n\nexport const PaginationItem = forwardRef<PaginationItemProps, \"button\">(\n  (\n    { className, children, disableRipple, isActive, isDisabled, page, ...rest },\n    ref,\n  ) => {\n    const styles = usePaginationContext()\n    const isEllipsis = page === \"ellipsis\"\n    const { onPointerDown, ...rippleProps } = useRipple({\n      ...rest,\n      isDisabled: disableRipple || isDisabled || isEllipsis,\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    const Component = ui[isEllipsis ? \"span\" : \"button\"]\n\n    return (\n      <Component\n        ref={ref}\n        {...(!isEllipsis\n          ? {\n              \"data-disabled\": dataAttr(isDisabled),\n              \"data-selected\": dataAttr(isActive),\n              disabled: isDisabled,\n            }\n          : {})}\n        className={cx(\n          \"ui-pagination__item\",\n          isEllipsis ? \"ui-pagination__item--ellipsis\" : undefined,\n          className,\n        )}\n        tabIndex={!isEllipsis ? 0 : -1}\n        __css={css}\n        {...rest}\n        onPointerDown={onPointerDown}\n      >\n        {children}\n\n        <Ripple isDisabled={disableRipple || isDisabled} {...rippleProps} />\n      </Component>\n    )\n  },\n)\n\nPaginationItem.displayName = \"PaginationItem\"\nPaginationItem.__ui__ = \"PaginationItem\"\n"],"mappings":";;;;;;;;;;;;;AAEA,SAAS,YAAY,UAAU;AAC/B,SAAS,QAAQ,iBAAiB;AAClC,SAAS,IAAI,gBAAgB;AA0CjB,cAmCN,YAnCM;AAHZ,IAAM,UAEF;AAAA,EACF,UAAU,oBAAC,0BAAuB;AAAA,EAClC,OAAO,oBAAC,uBAAoB;AAAA,EAC5B,MAAM,oBAAC,sBAAmB;AAAA,EAC1B,MAAM,oBAAC,sBAAmB;AAAA,EAC1B,MAAM,oBAAC,sBAAmB;AAC5B;AAEO,IAAM,iBAAiB;AAAA,EAC5B,CACE,EAAE,WAAW,UAAU,eAAe,UAAU,YAAY,MAAM,GAAG,KAAK,GAC1E,QACG;AAzDP;AA0DI,UAAM,SAAS,qBAAqB;AACpC,UAAM,aAAa,SAAS;AAC5B,UAAM,EAAE,eAAe,GAAG,YAAY,IAAI,UAAU;AAAA,MAClD,GAAG;AAAA,MACH,YAAY,iBAAiB,cAAc;AAAA,IAC7C,CAAC;AAED,8CAAa,aAAQ,IAAI,MAAZ,YAAiB;AAE9B,UAAM,MAAmB;AAAA,MACvB,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,UAAU;AAAA,MACV,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,GAAG,OAAO;AAAA,MACV,GAAG,OAAO,IAAI;AAAA,IAChB;AAEA,UAAM,YAAY,GAAG,aAAa,SAAS,QAAQ;AAEnD,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACC,GAAI,CAAC,aACF;AAAA,UACE,iBAAiB,SAAS,UAAU;AAAA,UACpC,iBAAiB,SAAS,QAAQ;AAAA,UAClC,UAAU;AAAA,QACZ,IACA,CAAC;AAAA,QACL,WAAW;AAAA,UACT;AAAA,UACA,aAAa,kCAAkC;AAAA,UAC/C;AAAA,QACF;AAAA,QACA,UAAU,CAAC,aAAa,IAAI;AAAA,QAC5B,OAAO;AAAA,QACN,GAAG;AAAA,QACJ;AAAA,QAEC;AAAA;AAAA,UAED,oBAAC,UAAO,YAAY,iBAAiB,YAAa,GAAG,aAAa;AAAA;AAAA;AAAA,IACpE;AAAA,EAEJ;AACF;AAEA,eAAe,cAAc;AAC7B,eAAe,SAAS;","names":[]}

package/dist/index.js

@@ -192,51 +192,53 @@ var iconMap = {
   next: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PaginationNextIcon, {}),
   prev: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PaginationPrevIcon, {})
 };
-var PaginationItem = ({
-  className,
-  children,
-  disableRipple,
-  isActive,
-  isDisabled,
-  page,
-  ...rest
-}) => {
-  var _a;
-  const styles = usePaginationContext();
-  const { onPointerDown, ...rippleProps } = (0, import_ripple.useRipple)({
-    ...rest,
-    isDisabled: disableRipple || isDisabled
-  });
-  children != null ? children : children = (_a = iconMap[page]) != null ? _a : page;
-  const css = {
-    alignItems: "center",
-    display: "flex",
-    justifyContent: "center",
-    overflow: "hidden",
-    position: "relative",
-    userSelect: "none",
-    ...styles.item,
-    ...styles[page]
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-    import_core.ui.button,
-    {
-      type: "button",
-      className: (0, import_utils2.cx)("ui-pagination__item", className),
-      "data-disabled": (0, import_utils2.dataAttr)(isDisabled),
-      "data-selected": (0, import_utils2.dataAttr)(isActive),
-      disabled: isDisabled,
-      tabIndex: page !== "ellipsis" ? 0 : -1,
-      __css: css,
+var PaginationItem = (0, import_core.forwardRef)(
+  ({ className, children, disableRipple, isActive, isDisabled, page, ...rest }, ref) => {
+    var _a;
+    const styles = usePaginationContext();
+    const isEllipsis = page === "ellipsis";
+    const { onPointerDown, ...rippleProps } = (0, import_ripple.useRipple)({
       ...rest,
-      onPointerDown,
-      children: [
-        children,
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ripple.Ripple, { isDisabled: disableRipple || isDisabled, ...rippleProps })
-      ]
-    }
-  );
-};
+      isDisabled: disableRipple || isDisabled || isEllipsis
+    });
+    children != null ? children : children = (_a = iconMap[page]) != null ? _a : page;
+    const css = {
+      alignItems: "center",
+      display: "flex",
+      justifyContent: "center",
+      overflow: "hidden",
+      position: "relative",
+      userSelect: "none",
+      ...styles.item,
+      ...styles[page]
+    };
+    const Component = import_core.ui[isEllipsis ? "span" : "button"];
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      Component,
+      {
+        ref,
+        ...!isEllipsis ? {
+          "data-disabled": (0, import_utils2.dataAttr)(isDisabled),
+          "data-selected": (0, import_utils2.dataAttr)(isActive),
+          disabled: isDisabled
+        } : {},
+        className: (0, import_utils2.cx)(
+          "ui-pagination__item",
+          isEllipsis ? "ui-pagination__item--ellipsis" : void 0,
+          className
+        ),
+        tabIndex: !isEllipsis ? 0 : -1,
+        __css: css,
+        ...rest,
+        onPointerDown,
+        children: [
+          children,
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ripple.Ripple, { isDisabled: disableRipple || isDisabled, ...rippleProps })
+        ]
+      }
+    );
+  }
+);
 PaginationItem.displayName = "PaginationItem";
 PaginationItem.__ui__ = "PaginationItem";
 
@@ -255,13 +257,13 @@ var Pagination = (0, import_core2.forwardRef)((props, ref) => {
     total,
     withControls: _withControls = true,
     withEdges: _withEdges = false,
+    containerProps,
     controlNextProps,
     controlPrevProps,
     controlProps,
     edgeFirstProps,
     edgeLastProps,
     edgeProps,
-    innerProps,
     itemProps,
     onChange: onChangeProp,
     ...rest
@@ -278,117 +280,113 @@ var Pagination = (0, import_core2.forwardRef)((props, ref) => {
     onChange: onChangeProp
   });
   const children = (0, import_react2.useMemo)(
-    () => range.map((page2, key) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    () => range.map((page2, key) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core2.ui.li, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       Component,
       {
-        "aria-label": page2 === "ellipsis" ? "Jump to omitted pages" : `Go to page ${page2}`,
+        "aria-label": page2 !== "ellipsis" ? `Go to page ${page2}` : void 0,
         isActive: currentPage === page2,
         isDisabled,
-        page: page2,
         ...itemProps,
+        page: page2,
         onClick: (0, import_utils3.handlerAll)(
           itemProps == null ? void 0 : itemProps.onClick,
           page2 !== "ellipsis" ? () => onChange(page2) : void 0
         )
-      },
-      key
-    )),
+      }
+    ) }, key)),
     [Component, currentPage, isDisabled, onChange, range, itemProps]
   );
   const css = {
-    alignItems: "center",
-    display: "flex",
     ...styles.container
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PaginationProvider, { value: styles, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-    import_core2.ui.div,
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PaginationProvider, { value: styles, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    import_core2.ui.nav,
     {
       ref,
       className: (0, import_utils3.cx)("ui-pagination", className),
-      role: "navigation",
-      __css: css,
-      ...rest,
       "data-disabled": (0, import_utils3.dataAttr)(isDisabled),
-      children: [
-        withEdges ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          Component,
-          {
-            className: "ui-pagination__item--first",
-            "aria-label": "Go to first page",
-            isDisabled: isDisabled || currentPage === 1,
-            page: "first",
-            ...edgeProps,
-            ...edgeFirstProps,
-            onClick: (0, import_utils3.handlerAll)(
-              edgeProps == null ? void 0 : edgeProps.onClick,
-              edgeFirstProps == null ? void 0 : edgeFirstProps.onClick,
-              onFirst
-            )
-          }
-        ) : null,
-        withControls ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          Component,
-          {
-            className: "ui-pagination__item--prev",
-            "aria-label": "Go to previous page",
-            isDisabled: isDisabled || currentPage === 1,
-            page: "prev",
-            ...controlProps,
-            ...controlPrevProps,
-            onClick: (0, import_utils3.handlerAll)(
-              controlProps == null ? void 0 : controlProps.onClick,
-              controlPrevProps == null ? void 0 : controlPrevProps.onClick,
-              onPrev
-            )
-          }
-        ) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          import_core2.ui.div,
-          {
-            className: "ui-pagination-inner",
-            __css: {
-              alignItems: "center",
-              display: "flex",
-              justifyContent: "center",
-              ...styles.inner
-            },
-            ...innerProps,
-            children
-          }
-        ),
-        withControls ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          Component,
-          {
-            className: "ui-pagination__item--next",
-            "aria-label": "Go to next page",
-            isDisabled: isDisabled || currentPage === total,
-            page: "next",
-            ...controlProps,
-            ...controlNextProps,
-            onClick: (0, import_utils3.handlerAll)(
-              controlProps == null ? void 0 : controlProps.onClick,
-              controlNextProps == null ? void 0 : controlNextProps.onClick,
-              onNext
-            )
-          }
-        ) : null,
-        withEdges ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          Component,
-          {
-            className: "ui-pagination__item--last",
-            "aria-label": "Go to last page",
-            isDisabled: isDisabled || currentPage === total,
-            page: "last",
-            ...edgeProps,
-            ...edgeLastProps,
-            onClick: (0, import_utils3.handlerAll)(
-              edgeProps == null ? void 0 : edgeProps.onClick,
-              edgeLastProps == null ? void 0 : edgeLastProps.onClick,
-              onLast
-            )
-          }
-        ) : null
-      ]
+      __css: css,
+      ...containerProps,
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        import_core2.ui.ul,
+        {
+          className: "ui-pagination-inner",
+          "data-disabled": (0, import_utils3.dataAttr)(isDisabled),
+          __css: {
+            alignItems: "center",
+            display: "flex",
+            ...styles.inner
+          },
+          ...rest,
+          children: [
+            withEdges ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core2.ui.li, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              Component,
+              {
+                className: "ui-pagination__item--first",
+                "aria-label": "Go to first page",
+                isDisabled: isDisabled || currentPage === 1,
+                page: "first",
+                ...edgeProps,
+                ...edgeFirstProps,
+                onClick: (0, import_utils3.handlerAll)(
+                  edgeProps == null ? void 0 : edgeProps.onClick,
+                  edgeFirstProps == null ? void 0 : edgeFirstProps.onClick,
+                  onFirst
+                )
+              }
+            ) }) : null,
+            withControls ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core2.ui.li, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              Component,
+              {
+                className: "ui-pagination__item--prev",
+                "aria-label": "Go to previous page",
+                isDisabled: isDisabled || currentPage === 1,
+                page: "prev",
+                ...controlProps,
+                ...controlPrevProps,
+                onClick: (0, import_utils3.handlerAll)(
+                  controlProps == null ? void 0 : controlProps.onClick,
+                  controlPrevProps == null ? void 0 : controlPrevProps.onClick,
+                  onPrev
+                )
+              }
+            ) }) : null,
+            children,
+            withControls ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core2.ui.li, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              Component,
+              {
+                className: "ui-pagination__item--next",
+                "aria-label": "Go to next page",
+                isDisabled: isDisabled || currentPage === total,
+                page: "next",
+                ...controlProps,
+                ...controlNextProps,
+                onClick: (0, import_utils3.handlerAll)(
+                  controlProps == null ? void 0 : controlProps.onClick,
+                  controlNextProps == null ? void 0 : controlNextProps.onClick,
+                  onNext
+                )
+              }
+            ) }) : null,
+            withEdges ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core2.ui.li, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              Component,
+              {
+                className: "ui-pagination__item--last",
+                "aria-label": "Go to last page",
+                isDisabled: isDisabled || currentPage === total,
+                page: "last",
+                ...edgeProps,
+                ...edgeLastProps,
+                onClick: (0, import_utils3.handlerAll)(
+                  edgeProps == null ? void 0 : edgeProps.onClick,
+                  edgeLastProps == null ? void 0 : edgeLastProps.onClick,
+                  onLast
+                )
+              }
+            ) }) : null
+          ]
+        }
+      )
     }
   ) });
 });