@sproutsocial/seeds-react-pagination 0.1.0

package/.turbo/turbo-build.log

@@ -0,0 +1,21 @@
+yarn run v1.22.22
+$ tsup --dts
+CLI Building entry: src/index.ts
+CLI Using tsconfig: tsconfig.json
+CLI tsup v8.5.0
+CLI Using tsup config: /home/runner/work/seeds/seeds/seeds-react/seeds-react-pagination/tsup.config.ts
+CLI Target: es2022
+CLI Cleaning output folder
+CJS Build start
+ESM Build start
+CJS dist/index.js     9.42 KB
+CJS dist/index.js.map 15.70 KB
+CJS ⚡️ Build success in 160ms
+ESM dist/esm/index.js     7.07 KB
+ESM dist/esm/index.js.map 15.50 KB
+ESM ⚡️ Build success in 155ms
+DTS Build start
+DTS ⚡️ Build success in 25208ms
+DTS dist/index.d.ts  3.08 KB
+DTS dist/index.d.mts 3.08 KB
+Done in 33.52s.

package/dist/esm/index.js

@@ -0,0 +1,223 @@
+// src/Pagination.tsx
+import "react";
+import { Select } from "@sproutsocial/seeds-react-select";
+import { Icon } from "@sproutsocial/seeds-react-icon";
+
+// src/styles.ts
+import styled from "styled-components";
+import { Text } from "@sproutsocial/seeds-react-text";
+var StyledPaginationContainer = styled.div`
+  ${(props) => props.theme.typography[200]}
+  display: flex;
+  align-items: center;
+  gap: ${(props) => props.theme.space[300]};
+  margin-top: ${(props) => props.theme.space[400]};
+  flex-wrap: wrap;
+`;
+var StyledPaginationControls = styled.div`
+  display: flex;
+  align-items: center;
+  margin-left: auto;
+`;
+var StyledPaginationInfo = styled(Text)`
+  white-space: nowrap;
+`;
+var StyledPageSizeSelector = styled.div`
+  display: flex;
+  align-items: center;
+  gap: ${(props) => props.theme.space[300]};
+`;
+var StyledPageButtons = styled.div`
+  display: inline-flex;
+  flex-flow: row wrap;
+  background-clip: padding-box;
+  border: 1px solid
+    ${(props) => props.theme.colors.button.secondary.border.base};
+  border-radius: ${(props) => props.theme.radii.outer};
+  padding: ${(props) => props.theme.space[100]};
+  background: transparent;
+`;
+var StyledPaginationButton = styled.button`
+  min-width: calc(${(props) => props.theme.space[500]} + 4px);
+  min-height: calc(${(props) => props.theme.space[500]} + 2px);
+  padding: calc(${(props) => props.theme.space[350]} - 6px);
+  line-height: ${(props) => props.theme.space[400]};
+  font-weight: ${(props) => props.theme.fontWeights.semibold};
+  background-color: ${(props) => props.isSelected ? props.theme.colors.button.secondary.background.active : "transparent"};
+  color: ${(props) => props.isSelected ? props.theme.colors.text.inverse : props.theme.colors.text.body};
+  border: none;
+  border-radius: ${(props) => props.theme.radii.inner};
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  &:hover:not(:disabled) {
+    color: ${(props) => props.isSelected ? props.theme.colors.text.inverse : void 0};
+    background-color: ${(props) => props.isSelected ? props.theme.colors.button.secondary.background.active : props.theme.colors.listItem.background.hover};
+  }
+
+  &:disabled {
+    cursor: default;
+    opacity: ${(props) => props.isSelected ? 1 : 0.5};
+  }
+`;
+
+// src/Pagination.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var Pagination = ({
+  paginationConfig,
+  currentPageIndex,
+  pageSize,
+  totalRows,
+  onPageChange,
+  onPageSizeChange
+}) => {
+  const { displayType, pageSizeOptions, tableCountFunction } = paginationConfig;
+  const totalPages = Math.ceil(totalRows / pageSize);
+  const currentPage = currentPageIndex + 1;
+  const startRow = totalRows === 0 ? 0 : currentPageIndex * pageSize + 1;
+  const endRow = Math.min((currentPageIndex + 1) * pageSize, totalRows);
+  const canGoPrevious = currentPageIndex > 0;
+  const canGoNext = currentPageIndex < totalPages - 1;
+  const handlePrevious = () => {
+    if (canGoPrevious) {
+      onPageChange(currentPageIndex - 1);
+    }
+  };
+  const handleNext = () => {
+    if (canGoNext) {
+      onPageChange(currentPageIndex + 1);
+    }
+  };
+  const handlePageSizeChange = (e) => {
+    const newPageSize = Number(e.currentTarget.value);
+    onPageSizeChange(newPageSize);
+    onPageChange(0);
+  };
+  const getPageNumbers = () => {
+    const pages = [];
+    const size = paginationConfig.size || "default";
+    const NUM_PAGE_LOWER = size === "mini" ? 0 : 1;
+    const NUM_PAGE_UPPER = size === "mini" ? 0 : 2;
+    if (totalPages <= 5 + NUM_PAGE_LOWER + NUM_PAGE_UPPER) {
+      for (let i = 1; i <= totalPages; i++) {
+        pages.push(i);
+      }
+    } else {
+      pages.push(1);
+      if (currentPage > 3 + NUM_PAGE_LOWER) {
+        pages.push("...");
+      }
+      let start;
+      let end;
+      if (currentPage <= 3 + NUM_PAGE_LOWER) {
+        start = 2;
+        end = 3 + NUM_PAGE_LOWER + NUM_PAGE_UPPER;
+      } else if (currentPage > totalPages - (3 + NUM_PAGE_UPPER)) {
+        start = totalPages - (2 + NUM_PAGE_LOWER + NUM_PAGE_UPPER);
+        end = totalPages - 1;
+      } else {
+        start = currentPage - NUM_PAGE_LOWER;
+        end = currentPage + NUM_PAGE_UPPER;
+      }
+      for (let i = start; i <= end; i++) {
+        pages.push(i);
+      }
+      if (currentPage < totalPages - (2 + NUM_PAGE_UPPER)) {
+        pages.push("...");
+      }
+      pages.push(totalPages);
+    }
+    return pages;
+  };
+  const pageNumbers = getPageNumbers();
+  if (totalPages <= 1 && !pageSizeOptions) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(StyledPaginationContainer, { children: [
+    /* @__PURE__ */ jsx(StyledPaginationInfo, { children: tableCountFunction({
+      startNum: startRow,
+      endNum: endRow,
+      totalRowCount: totalRows
+    }) }),
+    pageSizeOptions && displayType === "dropdown" && /* @__PURE__ */ jsx(StyledPageSizeSelector, { children: /* @__PURE__ */ jsx(
+      Select,
+      {
+        id: "page-size-select",
+        name: "page-size",
+        value: String(pageSize),
+        onChange: handlePageSizeChange,
+        ariaLabel: "Rows per page",
+        size: "small",
+        children: pageSizeOptions.map((size) => /* @__PURE__ */ jsxs("option", { value: size, children: [
+          size,
+          " per page"
+        ] }, size))
+      }
+    ) }),
+    totalPages > 1 && /* @__PURE__ */ jsx(StyledPaginationControls, { children: /* @__PURE__ */ jsxs(StyledPageButtons, { children: [
+      /* @__PURE__ */ jsx(
+        StyledPaginationButton,
+        {
+          onClick: handlePrevious,
+          disabled: !canGoPrevious,
+          "aria-label": "Previous page",
+          children: /* @__PURE__ */ jsx(Icon, { name: "chevron-left-outline" })
+        }
+      ),
+      pageNumbers.map((pageNum, index) => {
+        if (pageNum === "...") {
+          return /* @__PURE__ */ jsx(
+            StyledPaginationButton,
+            {
+              disabled: true,
+              "aria-label": "More pages",
+              children: /* @__PURE__ */ jsx(Icon, { name: "ellipsis-horizontal-outline" })
+            },
+            `ellipsis-${index}`
+          );
+        }
+        const page = pageNum;
+        const isCurrentPage = page === currentPage;
+        return /* @__PURE__ */ jsx(
+          StyledPaginationButton,
+          {
+            onClick: () => onPageChange(page - 1),
+            disabled: isCurrentPage,
+            "aria-label": `Page ${page}`,
+            "aria-current": isCurrentPage ? "page" : void 0,
+            isSelected: isCurrentPage,
+            children: page
+          },
+          page
+        );
+      }),
+      /* @__PURE__ */ jsx(
+        StyledPaginationButton,
+        {
+          onClick: handleNext,
+          disabled: !canGoNext,
+          "aria-label": "Next page",
+          children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right-outline" })
+        }
+      )
+    ] }) })
+  ] });
+};
+
+// src/PaginationTypes.ts
+import "react";
+var PAGE_SIZE_OPTIONS_STANDARD = [10, 25, 50, 100];
+var PAGE_SIZE_OPTIONS_COMPACT = [5, 10, 20];
+var PAGE_SIZE_OPTIONS_LARGE = [50, 100, 200, 500];
+var PAGE_SIZE_OPTIONS = {
+  STANDARD: PAGE_SIZE_OPTIONS_STANDARD,
+  COMPACT: PAGE_SIZE_OPTIONS_COMPACT,
+  LARGE: PAGE_SIZE_OPTIONS_LARGE
+};
+export {
+  PAGE_SIZE_OPTIONS,
+  Pagination
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Pagination.tsx","../../src/styles.ts","../../src/PaginationTypes.ts"],"sourcesContent":["import * as React from \"react\";\nimport { Select } from \"@sproutsocial/seeds-react-select\";\nimport { Icon } from \"@sproutsocial/seeds-react-icon\";\nimport type { TypePaginationConfig } from \"./PaginationTypes\";\nimport {\n  StyledPaginationContainer,\n  StyledPaginationControls,\n  StyledPaginationInfo,\n  StyledPageSizeSelector,\n  StyledPageButtons,\n  StyledPaginationButton,\n} from \"./styles\";\n\ninterface PaginationProps {\n  paginationConfig: TypePaginationConfig;\n  currentPageIndex: number;\n  pageSize: number;\n  totalRows: number;\n  onPageChange: (pageIndex: number) => void;\n  onPageSizeChange: (pageSize: number) => void;\n}\n\nexport const Pagination = ({\n  paginationConfig,\n  currentPageIndex,\n  pageSize,\n  totalRows,\n  onPageChange,\n  onPageSizeChange,\n}: PaginationProps) => {\n  const { displayType, pageSizeOptions, tableCountFunction } = paginationConfig;\n\n  // Calculate pagination values\n  const totalPages = Math.ceil(totalRows / pageSize);\n  const currentPage = currentPageIndex + 1; // Convert 0-based to 1-based for display\n  const startRow = totalRows === 0 ? 0 : currentPageIndex * pageSize + 1;\n  const endRow = Math.min((currentPageIndex + 1) * pageSize, totalRows);\n\n  const canGoPrevious = currentPageIndex > 0;\n  const canGoNext = currentPageIndex < totalPages - 1;\n\n  const handlePrevious = () => {\n    if (canGoPrevious) {\n      onPageChange(currentPageIndex - 1);\n    }\n  };\n\n  const handleNext = () => {\n    if (canGoNext) {\n      onPageChange(currentPageIndex + 1);\n    }\n  };\n\n  const handlePageSizeChange = (e: React.SyntheticEvent<HTMLSelectElement>) => {\n    const newPageSize = Number(e.currentTarget.value);\n    onPageSizeChange(newPageSize);\n    // Reset to first page when page size changes\n    onPageChange(0);\n  };\n\n  // Generate page number buttons using web-app-core's algorithm\n  const getPageNumbers = () => {\n    const pages: (number | string)[] = [];\n    const size = paginationConfig.size || \"default\";\n\n    // Configuration for how many pages to show around current page\n    const NUM_PAGE_LOWER = size === \"mini\" ? 0 : 1;\n    const NUM_PAGE_UPPER = size === \"mini\" ? 0 : 2;\n\n    // If number of pages is small enough, show all the page tokens without ellipsis\n    if (totalPages <= 5 + NUM_PAGE_LOWER + NUM_PAGE_UPPER) {\n      for (let i = 1; i <= totalPages; i++) {\n        pages.push(i);\n      }\n    } else {\n      // Add first page\n      pages.push(1);\n\n      // Add ellipsis at the beginning if needed\n      if (currentPage > 3 + NUM_PAGE_LOWER) {\n        pages.push(\"...\");\n      }\n\n      // Add pages in the middle\n      let start: number;\n      let end: number; // inclusive index\n\n      // If near beginning - Show number of pages before ending ellipsis\n      if (currentPage <= 3 + NUM_PAGE_LOWER) {\n        start = 2;\n        end = 3 + NUM_PAGE_LOWER + NUM_PAGE_UPPER;\n      } else if (currentPage > totalPages - (3 + NUM_PAGE_UPPER)) {\n        // If near end - Show number of pages after starting ellipsis\n        start = totalPages - (2 + NUM_PAGE_LOWER + NUM_PAGE_UPPER);\n        end = totalPages - 1;\n      } else {\n        // If in the middle - Show number of pages between two ellipses\n        start = currentPage - NUM_PAGE_LOWER;\n        end = currentPage + NUM_PAGE_UPPER;\n      }\n\n      for (let i = start; i <= end; i++) {\n        pages.push(i);\n      }\n\n      // Add a final ellipsis if necessary\n      if (currentPage < totalPages - (2 + NUM_PAGE_UPPER)) {\n        pages.push(\"...\");\n      }\n\n      // Add the last page number\n      pages.push(totalPages);\n    }\n\n    return pages;\n  };\n\n  const pageNumbers = getPageNumbers();\n\n  if (totalPages <= 1 && !pageSizeOptions) {\n    // No pagination needed if only one page and no page size options\n    return null;\n  }\n\n  return (\n    <StyledPaginationContainer>\n      <StyledPaginationInfo>\n        {tableCountFunction({\n          startNum: startRow,\n          endNum: endRow,\n          totalRowCount: totalRows,\n        })}\n      </StyledPaginationInfo>\n      {/* Page size selector */}\n      {pageSizeOptions && displayType === \"dropdown\" && (\n        <StyledPageSizeSelector>\n          <Select\n            id=\"page-size-select\"\n            name=\"page-size\"\n            value={String(pageSize)}\n            onChange={handlePageSizeChange}\n            ariaLabel=\"Rows per page\"\n            size=\"small\"\n          >\n            {pageSizeOptions.map((size) => (\n              <option key={size} value={size}>\n                {size} per page\n              </option>\n            ))}\n          </Select>\n        </StyledPageSizeSelector>\n      )}\n\n      {/* TODO: Add inline page size selector for displayType === 'inline' */}\n\n      {/* Page navigation controls */}\n      {totalPages > 1 && (\n        <StyledPaginationControls>\n          <StyledPageButtons>\n            <StyledPaginationButton\n              onClick={handlePrevious}\n              disabled={!canGoPrevious}\n              aria-label=\"Previous page\"\n            >\n              <Icon name=\"chevron-left-outline\" />\n            </StyledPaginationButton>\n\n            {pageNumbers.map((pageNum, index) => {\n              if (pageNum === \"...\") {\n                return (\n                  <StyledPaginationButton\n                    key={`ellipsis-${index}`}\n                    disabled\n                    aria-label=\"More pages\"\n                  >\n                    <Icon name=\"ellipsis-horizontal-outline\" />\n                  </StyledPaginationButton>\n                );\n              }\n\n              const page = pageNum as number;\n              const isCurrentPage = page === currentPage;\n\n              return (\n                <StyledPaginationButton\n                  key={page}\n                  onClick={() => onPageChange(page - 1)}\n                  disabled={isCurrentPage}\n                  aria-label={`Page ${page}`}\n                  aria-current={isCurrentPage ? \"page\" : undefined}\n                  isSelected={isCurrentPage}\n                >\n                  {page}\n                </StyledPaginationButton>\n              );\n            })}\n\n            <StyledPaginationButton\n              onClick={handleNext}\n              disabled={!canGoNext}\n              aria-label=\"Next page\"\n            >\n              <Icon name=\"chevron-right-outline\" />\n            </StyledPaginationButton>\n          </StyledPageButtons>\n        </StyledPaginationControls>\n      )}\n    </StyledPaginationContainer>\n  );\n};\n","import styled from \"styled-components\";\nimport { Text } from \"@sproutsocial/seeds-react-text\";\n\n// Pagination Styles\nexport const StyledPaginationContainer = styled.div`\n  ${(props) => props.theme.typography[200]}\n  display: flex;\n  align-items: center;\n  gap: ${(props) => props.theme.space[300]};\n  margin-top: ${(props) => props.theme.space[400]};\n  flex-wrap: wrap;\n`;\n\nexport const StyledPaginationControls = styled.div`\n  display: flex;\n  align-items: center;\n  margin-left: auto;\n`;\n\nexport const StyledPaginationInfo = styled(Text)`\n  white-space: nowrap;\n`;\n\nexport const StyledPageSizeSelector = styled.div`\n  display: flex;\n  align-items: center;\n  gap: ${(props) => props.theme.space[300]};\n`;\n\nexport const StyledPageButtons = styled.div`\n  display: inline-flex;\n  flex-flow: row wrap;\n  background-clip: padding-box;\n  border: 1px solid\n    ${(props) => props.theme.colors.button.secondary.border.base};\n  border-radius: ${(props) => props.theme.radii.outer};\n  padding: ${(props) => props.theme.space[100]};\n  background: transparent;\n`;\n\nexport const StyledPaginationButton = styled.button<{ isSelected?: boolean }>`\n  min-width: calc(${(props) => props.theme.space[500]} + 4px);\n  min-height: calc(${(props) => props.theme.space[500]} + 2px);\n  padding: calc(${(props) => props.theme.space[350]} - 6px);\n  line-height: ${(props) => props.theme.space[400]};\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  background-color: ${(props) =>\n    props.isSelected\n      ? props.theme.colors.button.secondary.background.active\n      : \"transparent\"};\n  color: ${(props) =>\n    props.isSelected\n      ? props.theme.colors.text.inverse\n      : props.theme.colors.text.body};\n  border: none;\n  border-radius: ${(props) => props.theme.radii.inner};\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n\n  &:hover:not(:disabled) {\n    color: ${(props) =>\n      props.isSelected ? props.theme.colors.text.inverse : undefined};\n    background-color: ${(props) =>\n      props.isSelected\n        ? props.theme.colors.button.secondary.background.active\n        : props.theme.colors.listItem.background.hover};\n  }\n\n  &:disabled {\n    cursor: default;\n    opacity: ${(props) => (props.isSelected ? 1 : 0.5)};\n  }\n`;\n","import * as React from \"react\";\n\n/**\n * Standard page size option sets for pagination.\n * Export these constants to maintain consistency across tables.\n */\nconst PAGE_SIZE_OPTIONS_STANDARD = [10, 25, 50, 100] as const;\nconst PAGE_SIZE_OPTIONS_COMPACT = [5, 10, 20] as const;\nconst PAGE_SIZE_OPTIONS_LARGE = [50, 100, 200, 500] as const;\n\nexport const PAGE_SIZE_OPTIONS = {\n  STANDARD: PAGE_SIZE_OPTIONS_STANDARD,\n  COMPACT: PAGE_SIZE_OPTIONS_COMPACT,\n  LARGE: PAGE_SIZE_OPTIONS_LARGE,\n};\n\n/**\n * Allowed page size option sets.\n * Use one of the predefined PAGE_SIZE_OPTIONS for consistency.\n */\nexport type TypeAllowedPageSizeOptions =\n  | typeof PAGE_SIZE_OPTIONS_STANDARD\n  | typeof PAGE_SIZE_OPTIONS_COMPACT\n  | typeof PAGE_SIZE_OPTIONS_LARGE;\n\n/**\n * Configuration for pagination controls with page navigation and size selection.\n *\n * @example\n * ```tsx\n * <Pagination\n *   paginationConfig={{\n *     initialPageSize: 25,\n *     displayType: 'dropdown',\n *     pageSizeOptions: PAGE_SIZE_OPTIONS.STANDARD,\n *     tableCountFunction: ({ startNum, endNum, totalRowCount }) =>\n *       `${startNum}-${endNum} of ${totalRowCount}`\n *   }}\n *   currentPageIndex={0}\n *   pageSize={25}\n *   totalRows={100}\n *   onPageChange={(index) => console.log('Page:', index)}\n *   onPageSizeChange={(size) => console.log('Page size:', size)}\n * />\n * ```\n */\nexport interface TypePaginationConfig {\n  /**\n   * Initial number of rows per page.\n   * @default 10\n   */\n  initialPageSize: number;\n  /**\n   * Function that returns the intl for displaying the table counts underneath a DataTable\n   */\n  tableCountFunction: (args: {\n    startNum: number;\n    endNum: number;\n    totalRowCount: number;\n  }) => React.ReactNode;\n  /**\n   * Display mode for page size selector.\n   * - 'dropdown': Shows page size selector as a dropdown\n   * Only used when pageSizeOptions is provided.\n   * @default 'dropdown'\n   */\n  displayType?: \"dropdown\";\n  /**\n   * Optional array of page size options for the selector.\n   * If not provided, page size selection will not be available.\n   * Use PAGE_SIZE_OPTIONS constants for consistency.\n   *\n   * @example\n   * pageSizeOptions: PAGE_SIZE_OPTIONS.STANDARD // [10, 25, 50, 100]\n   */\n  pageSizeOptions?: TypeAllowedPageSizeOptions;\n  /**\n   * Size variant for page number display.\n   * - 'default': Shows current page ±1-2 pages (more visible pages)\n   * - 'mini': Shows only current page (fewer visible pages)\n   * @default 'default'\n   */\n  size?: \"default\" | \"mini\";\n}\n"],"mappings":";AAAA,OAAuB;AACvB,SAAS,cAAc;AACvB,SAAS,YAAY;;;ACFrB,OAAO,YAAY;AACnB,SAAS,YAAY;AAGd,IAAM,4BAA4B,OAAO;AAAA,IAC5C,CAAC,UAAU,MAAM,MAAM,WAAW,GAAG,CAAC;AAAA;AAAA;AAAA,SAGjC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,gBAC1B,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAAA;AAI1C,IAAM,2BAA2B,OAAO;AAAA;AAAA;AAAA;AAAA;AAMxC,IAAM,uBAAuB,OAAO,IAAI;AAAA;AAAA;AAIxC,IAAM,yBAAyB,OAAO;AAAA;AAAA;AAAA,SAGpC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAGnC,IAAM,oBAAoB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,MAKlC,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO,UAAU,OAAO,IAAI;AAAA,mBAC7C,CAAC,UAAU,MAAM,MAAM,MAAM,KAAK;AAAA,aACxC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAAA;AAIvC,IAAM,yBAAyB,OAAO;AAAA,oBACzB,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,qBAChC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,kBACpC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,iBAClC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,iBACjC,CAAC,UAAU,MAAM,MAAM,YAAY,QAAQ;AAAA,sBACtC,CAAC,UACnB,MAAM,aACF,MAAM,MAAM,OAAO,OAAO,UAAU,WAAW,SAC/C,aAAa;AAAA,WACV,CAAC,UACR,MAAM,aACF,MAAM,MAAM,OAAO,KAAK,UACxB,MAAM,MAAM,OAAO,KAAK,IAAI;AAAA;AAAA,mBAEjB,CAAC,UAAU,MAAM,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAOxC,CAAC,UACR,MAAM,aAAa,MAAM,MAAM,OAAO,KAAK,UAAU,MAAS;AAAA,wBAC5C,CAAC,UACnB,MAAM,aACF,MAAM,MAAM,OAAO,OAAO,UAAU,WAAW,SAC/C,MAAM,MAAM,OAAO,SAAS,WAAW,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,eAKvC,CAAC,UAAW,MAAM,aAAa,IAAI,GAAI;AAAA;AAAA;;;ADsDhD,cAmBQ,YAnBR;AAxGC,IAAM,aAAa,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAuB;AACrB,QAAM,EAAE,aAAa,iBAAiB,mBAAmB,IAAI;AAG7D,QAAM,aAAa,KAAK,KAAK,YAAY,QAAQ;AACjD,QAAM,cAAc,mBAAmB;AACvC,QAAM,WAAW,cAAc,IAAI,IAAI,mBAAmB,WAAW;AACrE,QAAM,SAAS,KAAK,KAAK,mBAAmB,KAAK,UAAU,SAAS;AAEpE,QAAM,gBAAgB,mBAAmB;AACzC,QAAM,YAAY,mBAAmB,aAAa;AAElD,QAAM,iBAAiB,MAAM;AAC3B,QAAI,eAAe;AACjB,mBAAa,mBAAmB,CAAC;AAAA,IACnC;AAAA,EACF;AAEA,QAAM,aAAa,MAAM;AACvB,QAAI,WAAW;AACb,mBAAa,mBAAmB,CAAC;AAAA,IACnC;AAAA,EACF;AAEA,QAAM,uBAAuB,CAAC,MAA+C;AAC3E,UAAM,cAAc,OAAO,EAAE,cAAc,KAAK;AAChD,qBAAiB,WAAW;AAE5B,iBAAa,CAAC;AAAA,EAChB;AAGA,QAAM,iBAAiB,MAAM;AAC3B,UAAM,QAA6B,CAAC;AACpC,UAAM,OAAO,iBAAiB,QAAQ;AAGtC,UAAM,iBAAiB,SAAS,SAAS,IAAI;AAC7C,UAAM,iBAAiB,SAAS,SAAS,IAAI;AAG7C,QAAI,cAAc,IAAI,iBAAiB,gBAAgB;AACrD,eAAS,IAAI,GAAG,KAAK,YAAY,KAAK;AACpC,cAAM,KAAK,CAAC;AAAA,MACd;AAAA,IACF,OAAO;AAEL,YAAM,KAAK,CAAC;AAGZ,UAAI,cAAc,IAAI,gBAAgB;AACpC,cAAM,KAAK,KAAK;AAAA,MAClB;AAGA,UAAI;AACJ,UAAI;AAGJ,UAAI,eAAe,IAAI,gBAAgB;AACrC,gBAAQ;AACR,cAAM,IAAI,iBAAiB;AAAA,MAC7B,WAAW,cAAc,cAAc,IAAI,iBAAiB;AAE1D,gBAAQ,cAAc,IAAI,iBAAiB;AAC3C,cAAM,aAAa;AAAA,MACrB,OAAO;AAEL,gBAAQ,cAAc;AACtB,cAAM,cAAc;AAAA,MACtB;AAEA,eAAS,IAAI,OAAO,KAAK,KAAK,KAAK;AACjC,cAAM,KAAK,CAAC;AAAA,MACd;AAGA,UAAI,cAAc,cAAc,IAAI,iBAAiB;AACnD,cAAM,KAAK,KAAK;AAAA,MAClB;AAGA,YAAM,KAAK,UAAU;AAAA,IACvB;AAEA,WAAO;AAAA,EACT;AAEA,QAAM,cAAc,eAAe;AAEnC,MAAI,cAAc,KAAK,CAAC,iBAAiB;AAEvC,WAAO;AAAA,EACT;AAEA,SACE,qBAAC,6BACC;AAAA,wBAAC,wBACE,6BAAmB;AAAA,MAClB,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,eAAe;AAAA,IACjB,CAAC,GACH;AAAA,IAEC,mBAAmB,gBAAgB,cAClC,oBAAC,0BACC;AAAA,MAAC;AAAA;AAAA,QACC,IAAG;AAAA,QACH,MAAK;AAAA,QACL,OAAO,OAAO,QAAQ;AAAA,QACtB,UAAU;AAAA,QACV,WAAU;AAAA,QACV,MAAK;AAAA,QAEJ,0BAAgB,IAAI,CAAC,SACpB,qBAAC,YAAkB,OAAO,MACvB;AAAA;AAAA,UAAK;AAAA,aADK,IAEb,CACD;AAAA;AAAA,IACH,GACF;AAAA,IAMD,aAAa,KACZ,oBAAC,4BACC,+BAAC,qBACC;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,SAAS;AAAA,UACT,UAAU,CAAC;AAAA,UACX,cAAW;AAAA,UAEX,8BAAC,QAAK,MAAK,wBAAuB;AAAA;AAAA,MACpC;AAAA,MAEC,YAAY,IAAI,CAAC,SAAS,UAAU;AACnC,YAAI,YAAY,OAAO;AACrB,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC,UAAQ;AAAA,cACR,cAAW;AAAA,cAEX,8BAAC,QAAK,MAAK,+BAA8B;AAAA;AAAA,YAJpC,YAAY,KAAK;AAAA,UAKxB;AAAA,QAEJ;AAEA,cAAM,OAAO;AACb,cAAM,gBAAgB,SAAS;AAE/B,eACE;AAAA,UAAC;AAAA;AAAA,YAEC,SAAS,MAAM,aAAa,OAAO,CAAC;AAAA,YACpC,UAAU;AAAA,YACV,cAAY,QAAQ,IAAI;AAAA,YACxB,gBAAc,gBAAgB,SAAS;AAAA,YACvC,YAAY;AAAA,YAEX;AAAA;AAAA,UAPI;AAAA,QAQP;AAAA,MAEJ,CAAC;AAAA,MAED;AAAA,QAAC;AAAA;AAAA,UACC,SAAS;AAAA,UACT,UAAU,CAAC;AAAA,UACX,cAAW;AAAA,UAEX,8BAAC,QAAK,MAAK,yBAAwB;AAAA;AAAA,MACrC;AAAA,OACF,GACF;AAAA,KAEJ;AAEJ;;;AEjNA,OAAuB;AAMvB,IAAM,6BAA6B,CAAC,IAAI,IAAI,IAAI,GAAG;AACnD,IAAM,4BAA4B,CAAC,GAAG,IAAI,EAAE;AAC5C,IAAM,0BAA0B,CAAC,IAAI,KAAK,KAAK,GAAG;AAE3C,IAAM,oBAAoB;AAAA,EAC/B,UAAU;AAAA,EACV,SAAS;AAAA,EACT,OAAO;AACT;","names":[]}

package/dist/index.d.mts

@@ -0,0 +1,91 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+/**
+ * Standard page size option sets for pagination.
+ * Export these constants to maintain consistency across tables.
+ */
+declare const PAGE_SIZE_OPTIONS_STANDARD: readonly [10, 25, 50, 100];
+declare const PAGE_SIZE_OPTIONS_COMPACT: readonly [5, 10, 20];
+declare const PAGE_SIZE_OPTIONS_LARGE: readonly [50, 100, 200, 500];
+declare const PAGE_SIZE_OPTIONS: {
+    STANDARD: readonly [10, 25, 50, 100];
+    COMPACT: readonly [5, 10, 20];
+    LARGE: readonly [50, 100, 200, 500];
+};
+/**
+ * Allowed page size option sets.
+ * Use one of the predefined PAGE_SIZE_OPTIONS for consistency.
+ */
+type TypeAllowedPageSizeOptions = typeof PAGE_SIZE_OPTIONS_STANDARD | typeof PAGE_SIZE_OPTIONS_COMPACT | typeof PAGE_SIZE_OPTIONS_LARGE;
+/**
+ * Configuration for pagination controls with page navigation and size selection.
+ *
+ * @example
+ * ```tsx
+ * <Pagination
+ *   paginationConfig={{
+ *     initialPageSize: 25,
+ *     displayType: 'dropdown',
+ *     pageSizeOptions: PAGE_SIZE_OPTIONS.STANDARD,
+ *     tableCountFunction: ({ startNum, endNum, totalRowCount }) =>
+ *       `${startNum}-${endNum} of ${totalRowCount}`
+ *   }}
+ *   currentPageIndex={0}
+ *   pageSize={25}
+ *   totalRows={100}
+ *   onPageChange={(index) => console.log('Page:', index)}
+ *   onPageSizeChange={(size) => console.log('Page size:', size)}
+ * />
+ * ```
+ */
+interface TypePaginationConfig {
+    /**
+     * Initial number of rows per page.
+     * @default 10
+     */
+    initialPageSize: number;
+    /**
+     * Function that returns the intl for displaying the table counts underneath a DataTable
+     */
+    tableCountFunction: (args: {
+        startNum: number;
+        endNum: number;
+        totalRowCount: number;
+    }) => React.ReactNode;
+    /**
+     * Display mode for page size selector.
+     * - 'dropdown': Shows page size selector as a dropdown
+     * Only used when pageSizeOptions is provided.
+     * @default 'dropdown'
+     */
+    displayType?: "dropdown";
+    /**
+     * Optional array of page size options for the selector.
+     * If not provided, page size selection will not be available.
+     * Use PAGE_SIZE_OPTIONS constants for consistency.
+     *
+     * @example
+     * pageSizeOptions: PAGE_SIZE_OPTIONS.STANDARD // [10, 25, 50, 100]
+     */
+    pageSizeOptions?: TypeAllowedPageSizeOptions;
+    /**
+     * Size variant for page number display.
+     * - 'default': Shows current page ±1-2 pages (more visible pages)
+     * - 'mini': Shows only current page (fewer visible pages)
+     * @default 'default'
+     */
+    size?: "default" | "mini";
+}
+
+interface PaginationProps {
+    paginationConfig: TypePaginationConfig;
+    currentPageIndex: number;
+    pageSize: number;
+    totalRows: number;
+    onPageChange: (pageIndex: number) => void;
+    onPageSizeChange: (pageSize: number) => void;
+}
+declare const Pagination: ({ paginationConfig, currentPageIndex, pageSize, totalRows, onPageChange, onPageSizeChange, }: PaginationProps) => react_jsx_runtime.JSX.Element | null;
+
+export { PAGE_SIZE_OPTIONS, Pagination, type TypeAllowedPageSizeOptions, type TypePaginationConfig };

package/dist/index.d.ts

@@ -0,0 +1,91 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+/**
+ * Standard page size option sets for pagination.
+ * Export these constants to maintain consistency across tables.
+ */
+declare const PAGE_SIZE_OPTIONS_STANDARD: readonly [10, 25, 50, 100];
+declare const PAGE_SIZE_OPTIONS_COMPACT: readonly [5, 10, 20];
+declare const PAGE_SIZE_OPTIONS_LARGE: readonly [50, 100, 200, 500];
+declare const PAGE_SIZE_OPTIONS: {
+    STANDARD: readonly [10, 25, 50, 100];
+    COMPACT: readonly [5, 10, 20];
+    LARGE: readonly [50, 100, 200, 500];
+};
+/**
+ * Allowed page size option sets.
+ * Use one of the predefined PAGE_SIZE_OPTIONS for consistency.
+ */
+type TypeAllowedPageSizeOptions = typeof PAGE_SIZE_OPTIONS_STANDARD | typeof PAGE_SIZE_OPTIONS_COMPACT | typeof PAGE_SIZE_OPTIONS_LARGE;
+/**
+ * Configuration for pagination controls with page navigation and size selection.
+ *
+ * @example
+ * ```tsx
+ * <Pagination
+ *   paginationConfig={{
+ *     initialPageSize: 25,
+ *     displayType: 'dropdown',
+ *     pageSizeOptions: PAGE_SIZE_OPTIONS.STANDARD,
+ *     tableCountFunction: ({ startNum, endNum, totalRowCount }) =>
+ *       `${startNum}-${endNum} of ${totalRowCount}`
+ *   }}
+ *   currentPageIndex={0}
+ *   pageSize={25}
+ *   totalRows={100}
+ *   onPageChange={(index) => console.log('Page:', index)}
+ *   onPageSizeChange={(size) => console.log('Page size:', size)}
+ * />
+ * ```
+ */
+interface TypePaginationConfig {
+    /**
+     * Initial number of rows per page.
+     * @default 10
+     */
+    initialPageSize: number;
+    /**
+     * Function that returns the intl for displaying the table counts underneath a DataTable
+     */
+    tableCountFunction: (args: {
+        startNum: number;
+        endNum: number;
+        totalRowCount: number;
+    }) => React.ReactNode;
+    /**
+     * Display mode for page size selector.
+     * - 'dropdown': Shows page size selector as a dropdown
+     * Only used when pageSizeOptions is provided.
+     * @default 'dropdown'
+     */
+    displayType?: "dropdown";
+    /**
+     * Optional array of page size options for the selector.
+     * If not provided, page size selection will not be available.
+     * Use PAGE_SIZE_OPTIONS constants for consistency.
+     *
+     * @example
+     * pageSizeOptions: PAGE_SIZE_OPTIONS.STANDARD // [10, 25, 50, 100]
+     */
+    pageSizeOptions?: TypeAllowedPageSizeOptions;
+    /**
+     * Size variant for page number display.
+     * - 'default': Shows current page ±1-2 pages (more visible pages)
+     * - 'mini': Shows only current page (fewer visible pages)
+     * @default 'default'
+     */
+    size?: "default" | "mini";
+}
+
+interface PaginationProps {
+    paginationConfig: TypePaginationConfig;
+    currentPageIndex: number;
+    pageSize: number;
+    totalRows: number;
+    onPageChange: (pageIndex: number) => void;
+    onPageSizeChange: (pageSize: number) => void;
+}
+declare const Pagination: ({ paginationConfig, currentPageIndex, pageSize, totalRows, onPageChange, onPageSizeChange, }: PaginationProps) => react_jsx_runtime.JSX.Element | null;
+
+export { PAGE_SIZE_OPTIONS, Pagination, type TypeAllowedPageSizeOptions, type TypePaginationConfig };

package/dist/index.js

@@ -0,0 +1,261 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  PAGE_SIZE_OPTIONS: () => PAGE_SIZE_OPTIONS,
+  Pagination: () => Pagination
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/Pagination.tsx
+var React = require("react");
+var import_seeds_react_select = require("@sproutsocial/seeds-react-select");
+var import_seeds_react_icon = require("@sproutsocial/seeds-react-icon");
+
+// src/styles.ts
+var import_styled_components = __toESM(require("styled-components"));
+var import_seeds_react_text = require("@sproutsocial/seeds-react-text");
+var StyledPaginationContainer = import_styled_components.default.div`
+  ${(props) => props.theme.typography[200]}
+  display: flex;
+  align-items: center;
+  gap: ${(props) => props.theme.space[300]};
+  margin-top: ${(props) => props.theme.space[400]};
+  flex-wrap: wrap;
+`;
+var StyledPaginationControls = import_styled_components.default.div`
+  display: flex;
+  align-items: center;
+  margin-left: auto;
+`;
+var StyledPaginationInfo = (0, import_styled_components.default)(import_seeds_react_text.Text)`
+  white-space: nowrap;
+`;
+var StyledPageSizeSelector = import_styled_components.default.div`
+  display: flex;
+  align-items: center;
+  gap: ${(props) => props.theme.space[300]};
+`;
+var StyledPageButtons = import_styled_components.default.div`
+  display: inline-flex;
+  flex-flow: row wrap;
+  background-clip: padding-box;
+  border: 1px solid
+    ${(props) => props.theme.colors.button.secondary.border.base};
+  border-radius: ${(props) => props.theme.radii.outer};
+  padding: ${(props) => props.theme.space[100]};
+  background: transparent;
+`;
+var StyledPaginationButton = import_styled_components.default.button`
+  min-width: calc(${(props) => props.theme.space[500]} + 4px);
+  min-height: calc(${(props) => props.theme.space[500]} + 2px);
+  padding: calc(${(props) => props.theme.space[350]} - 6px);
+  line-height: ${(props) => props.theme.space[400]};
+  font-weight: ${(props) => props.theme.fontWeights.semibold};
+  background-color: ${(props) => props.isSelected ? props.theme.colors.button.secondary.background.active : "transparent"};
+  color: ${(props) => props.isSelected ? props.theme.colors.text.inverse : props.theme.colors.text.body};
+  border: none;
+  border-radius: ${(props) => props.theme.radii.inner};
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  &:hover:not(:disabled) {
+    color: ${(props) => props.isSelected ? props.theme.colors.text.inverse : void 0};
+    background-color: ${(props) => props.isSelected ? props.theme.colors.button.secondary.background.active : props.theme.colors.listItem.background.hover};
+  }
+
+  &:disabled {
+    cursor: default;
+    opacity: ${(props) => props.isSelected ? 1 : 0.5};
+  }
+`;
+
+// src/Pagination.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Pagination = ({
+  paginationConfig,
+  currentPageIndex,
+  pageSize,
+  totalRows,
+  onPageChange,
+  onPageSizeChange
+}) => {
+  const { displayType, pageSizeOptions, tableCountFunction } = paginationConfig;
+  const totalPages = Math.ceil(totalRows / pageSize);
+  const currentPage = currentPageIndex + 1;
+  const startRow = totalRows === 0 ? 0 : currentPageIndex * pageSize + 1;
+  const endRow = Math.min((currentPageIndex + 1) * pageSize, totalRows);
+  const canGoPrevious = currentPageIndex > 0;
+  const canGoNext = currentPageIndex < totalPages - 1;
+  const handlePrevious = () => {
+    if (canGoPrevious) {
+      onPageChange(currentPageIndex - 1);
+    }
+  };
+  const handleNext = () => {
+    if (canGoNext) {
+      onPageChange(currentPageIndex + 1);
+    }
+  };
+  const handlePageSizeChange = (e) => {
+    const newPageSize = Number(e.currentTarget.value);
+    onPageSizeChange(newPageSize);
+    onPageChange(0);
+  };
+  const getPageNumbers = () => {
+    const pages = [];
+    const size = paginationConfig.size || "default";
+    const NUM_PAGE_LOWER = size === "mini" ? 0 : 1;
+    const NUM_PAGE_UPPER = size === "mini" ? 0 : 2;
+    if (totalPages <= 5 + NUM_PAGE_LOWER + NUM_PAGE_UPPER) {
+      for (let i = 1; i <= totalPages; i++) {
+        pages.push(i);
+      }
+    } else {
+      pages.push(1);
+      if (currentPage > 3 + NUM_PAGE_LOWER) {
+        pages.push("...");
+      }
+      let start;
+      let end;
+      if (currentPage <= 3 + NUM_PAGE_LOWER) {
+        start = 2;
+        end = 3 + NUM_PAGE_LOWER + NUM_PAGE_UPPER;
+      } else if (currentPage > totalPages - (3 + NUM_PAGE_UPPER)) {
+        start = totalPages - (2 + NUM_PAGE_LOWER + NUM_PAGE_UPPER);
+        end = totalPages - 1;
+      } else {
+        start = currentPage - NUM_PAGE_LOWER;
+        end = currentPage + NUM_PAGE_UPPER;
+      }
+      for (let i = start; i <= end; i++) {
+        pages.push(i);
+      }
+      if (currentPage < totalPages - (2 + NUM_PAGE_UPPER)) {
+        pages.push("...");
+      }
+      pages.push(totalPages);
+    }
+    return pages;
+  };
+  const pageNumbers = getPageNumbers();
+  if (totalPages <= 1 && !pageSizeOptions) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(StyledPaginationContainer, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledPaginationInfo, { children: tableCountFunction({
+      startNum: startRow,
+      endNum: endRow,
+      totalRowCount: totalRows
+    }) }),
+    pageSizeOptions && displayType === "dropdown" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledPageSizeSelector, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_seeds_react_select.Select,
+      {
+        id: "page-size-select",
+        name: "page-size",
+        value: String(pageSize),
+        onChange: handlePageSizeChange,
+        ariaLabel: "Rows per page",
+        size: "small",
+        children: pageSizeOptions.map((size) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("option", { value: size, children: [
+          size,
+          " per page"
+        ] }, size))
+      }
+    ) }),
+    totalPages > 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledPaginationControls, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(StyledPageButtons, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        StyledPaginationButton,
+        {
+          onClick: handlePrevious,
+          disabled: !canGoPrevious,
+          "aria-label": "Previous page",
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_icon.Icon, { name: "chevron-left-outline" })
+        }
+      ),
+      pageNumbers.map((pageNum, index) => {
+        if (pageNum === "...") {
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            StyledPaginationButton,
+            {
+              disabled: true,
+              "aria-label": "More pages",
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_icon.Icon, { name: "ellipsis-horizontal-outline" })
+            },
+            `ellipsis-${index}`
+          );
+        }
+        const page = pageNum;
+        const isCurrentPage = page === currentPage;
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          StyledPaginationButton,
+          {
+            onClick: () => onPageChange(page - 1),
+            disabled: isCurrentPage,
+            "aria-label": `Page ${page}`,
+            "aria-current": isCurrentPage ? "page" : void 0,
+            isSelected: isCurrentPage,
+            children: page
+          },
+          page
+        );
+      }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        StyledPaginationButton,
+        {
+          onClick: handleNext,
+          disabled: !canGoNext,
+          "aria-label": "Next page",
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_icon.Icon, { name: "chevron-right-outline" })
+        }
+      )
+    ] }) })
+  ] });
+};
+
+// src/PaginationTypes.ts
+var React2 = require("react");
+var PAGE_SIZE_OPTIONS_STANDARD = [10, 25, 50, 100];
+var PAGE_SIZE_OPTIONS_COMPACT = [5, 10, 20];
+var PAGE_SIZE_OPTIONS_LARGE = [50, 100, 200, 500];
+var PAGE_SIZE_OPTIONS = {
+  STANDARD: PAGE_SIZE_OPTIONS_STANDARD,
+  COMPACT: PAGE_SIZE_OPTIONS_COMPACT,
+  LARGE: PAGE_SIZE_OPTIONS_LARGE
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PAGE_SIZE_OPTIONS,
+  Pagination
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/Pagination.tsx","../src/styles.ts","../src/PaginationTypes.ts"],"sourcesContent":["export { Pagination } from \"./Pagination\";\nexport * from \"./PaginationTypes\";\n","import * as React from \"react\";\nimport { Select } from \"@sproutsocial/seeds-react-select\";\nimport { Icon } from \"@sproutsocial/seeds-react-icon\";\nimport type { TypePaginationConfig } from \"./PaginationTypes\";\nimport {\n  StyledPaginationContainer,\n  StyledPaginationControls,\n  StyledPaginationInfo,\n  StyledPageSizeSelector,\n  StyledPageButtons,\n  StyledPaginationButton,\n} from \"./styles\";\n\ninterface PaginationProps {\n  paginationConfig: TypePaginationConfig;\n  currentPageIndex: number;\n  pageSize: number;\n  totalRows: number;\n  onPageChange: (pageIndex: number) => void;\n  onPageSizeChange: (pageSize: number) => void;\n}\n\nexport const Pagination = ({\n  paginationConfig,\n  currentPageIndex,\n  pageSize,\n  totalRows,\n  onPageChange,\n  onPageSizeChange,\n}: PaginationProps) => {\n  const { displayType, pageSizeOptions, tableCountFunction } = paginationConfig;\n\n  // Calculate pagination values\n  const totalPages = Math.ceil(totalRows / pageSize);\n  const currentPage = currentPageIndex + 1; // Convert 0-based to 1-based for display\n  const startRow = totalRows === 0 ? 0 : currentPageIndex * pageSize + 1;\n  const endRow = Math.min((currentPageIndex + 1) * pageSize, totalRows);\n\n  const canGoPrevious = currentPageIndex > 0;\n  const canGoNext = currentPageIndex < totalPages - 1;\n\n  const handlePrevious = () => {\n    if (canGoPrevious) {\n      onPageChange(currentPageIndex - 1);\n    }\n  };\n\n  const handleNext = () => {\n    if (canGoNext) {\n      onPageChange(currentPageIndex + 1);\n    }\n  };\n\n  const handlePageSizeChange = (e: React.SyntheticEvent<HTMLSelectElement>) => {\n    const newPageSize = Number(e.currentTarget.value);\n    onPageSizeChange(newPageSize);\n    // Reset to first page when page size changes\n    onPageChange(0);\n  };\n\n  // Generate page number buttons using web-app-core's algorithm\n  const getPageNumbers = () => {\n    const pages: (number | string)[] = [];\n    const size = paginationConfig.size || \"default\";\n\n    // Configuration for how many pages to show around current page\n    const NUM_PAGE_LOWER = size === \"mini\" ? 0 : 1;\n    const NUM_PAGE_UPPER = size === \"mini\" ? 0 : 2;\n\n    // If number of pages is small enough, show all the page tokens without ellipsis\n    if (totalPages <= 5 + NUM_PAGE_LOWER + NUM_PAGE_UPPER) {\n      for (let i = 1; i <= totalPages; i++) {\n        pages.push(i);\n      }\n    } else {\n      // Add first page\n      pages.push(1);\n\n      // Add ellipsis at the beginning if needed\n      if (currentPage > 3 + NUM_PAGE_LOWER) {\n        pages.push(\"...\");\n      }\n\n      // Add pages in the middle\n      let start: number;\n      let end: number; // inclusive index\n\n      // If near beginning - Show number of pages before ending ellipsis\n      if (currentPage <= 3 + NUM_PAGE_LOWER) {\n        start = 2;\n        end = 3 + NUM_PAGE_LOWER + NUM_PAGE_UPPER;\n      } else if (currentPage > totalPages - (3 + NUM_PAGE_UPPER)) {\n        // If near end - Show number of pages after starting ellipsis\n        start = totalPages - (2 + NUM_PAGE_LOWER + NUM_PAGE_UPPER);\n        end = totalPages - 1;\n      } else {\n        // If in the middle - Show number of pages between two ellipses\n        start = currentPage - NUM_PAGE_LOWER;\n        end = currentPage + NUM_PAGE_UPPER;\n      }\n\n      for (let i = start; i <= end; i++) {\n        pages.push(i);\n      }\n\n      // Add a final ellipsis if necessary\n      if (currentPage < totalPages - (2 + NUM_PAGE_UPPER)) {\n        pages.push(\"...\");\n      }\n\n      // Add the last page number\n      pages.push(totalPages);\n    }\n\n    return pages;\n  };\n\n  const pageNumbers = getPageNumbers();\n\n  if (totalPages <= 1 && !pageSizeOptions) {\n    // No pagination needed if only one page and no page size options\n    return null;\n  }\n\n  return (\n    <StyledPaginationContainer>\n      <StyledPaginationInfo>\n        {tableCountFunction({\n          startNum: startRow,\n          endNum: endRow,\n          totalRowCount: totalRows,\n        })}\n      </StyledPaginationInfo>\n      {/* Page size selector */}\n      {pageSizeOptions && displayType === \"dropdown\" && (\n        <StyledPageSizeSelector>\n          <Select\n            id=\"page-size-select\"\n            name=\"page-size\"\n            value={String(pageSize)}\n            onChange={handlePageSizeChange}\n            ariaLabel=\"Rows per page\"\n            size=\"small\"\n          >\n            {pageSizeOptions.map((size) => (\n              <option key={size} value={size}>\n                {size} per page\n              </option>\n            ))}\n          </Select>\n        </StyledPageSizeSelector>\n      )}\n\n      {/* TODO: Add inline page size selector for displayType === 'inline' */}\n\n      {/* Page navigation controls */}\n      {totalPages > 1 && (\n        <StyledPaginationControls>\n          <StyledPageButtons>\n            <StyledPaginationButton\n              onClick={handlePrevious}\n              disabled={!canGoPrevious}\n              aria-label=\"Previous page\"\n            >\n              <Icon name=\"chevron-left-outline\" />\n            </StyledPaginationButton>\n\n            {pageNumbers.map((pageNum, index) => {\n              if (pageNum === \"...\") {\n                return (\n                  <StyledPaginationButton\n                    key={`ellipsis-${index}`}\n                    disabled\n                    aria-label=\"More pages\"\n                  >\n                    <Icon name=\"ellipsis-horizontal-outline\" />\n                  </StyledPaginationButton>\n                );\n              }\n\n              const page = pageNum as number;\n              const isCurrentPage = page === currentPage;\n\n              return (\n                <StyledPaginationButton\n                  key={page}\n                  onClick={() => onPageChange(page - 1)}\n                  disabled={isCurrentPage}\n                  aria-label={`Page ${page}`}\n                  aria-current={isCurrentPage ? \"page\" : undefined}\n                  isSelected={isCurrentPage}\n                >\n                  {page}\n                </StyledPaginationButton>\n              );\n            })}\n\n            <StyledPaginationButton\n              onClick={handleNext}\n              disabled={!canGoNext}\n              aria-label=\"Next page\"\n            >\n              <Icon name=\"chevron-right-outline\" />\n            </StyledPaginationButton>\n          </StyledPageButtons>\n        </StyledPaginationControls>\n      )}\n    </StyledPaginationContainer>\n  );\n};\n","import styled from \"styled-components\";\nimport { Text } from \"@sproutsocial/seeds-react-text\";\n\n// Pagination Styles\nexport const StyledPaginationContainer = styled.div`\n  ${(props) => props.theme.typography[200]}\n  display: flex;\n  align-items: center;\n  gap: ${(props) => props.theme.space[300]};\n  margin-top: ${(props) => props.theme.space[400]};\n  flex-wrap: wrap;\n`;\n\nexport const StyledPaginationControls = styled.div`\n  display: flex;\n  align-items: center;\n  margin-left: auto;\n`;\n\nexport const StyledPaginationInfo = styled(Text)`\n  white-space: nowrap;\n`;\n\nexport const StyledPageSizeSelector = styled.div`\n  display: flex;\n  align-items: center;\n  gap: ${(props) => props.theme.space[300]};\n`;\n\nexport const StyledPageButtons = styled.div`\n  display: inline-flex;\n  flex-flow: row wrap;\n  background-clip: padding-box;\n  border: 1px solid\n    ${(props) => props.theme.colors.button.secondary.border.base};\n  border-radius: ${(props) => props.theme.radii.outer};\n  padding: ${(props) => props.theme.space[100]};\n  background: transparent;\n`;\n\nexport const StyledPaginationButton = styled.button<{ isSelected?: boolean }>`\n  min-width: calc(${(props) => props.theme.space[500]} + 4px);\n  min-height: calc(${(props) => props.theme.space[500]} + 2px);\n  padding: calc(${(props) => props.theme.space[350]} - 6px);\n  line-height: ${(props) => props.theme.space[400]};\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  background-color: ${(props) =>\n    props.isSelected\n      ? props.theme.colors.button.secondary.background.active\n      : \"transparent\"};\n  color: ${(props) =>\n    props.isSelected\n      ? props.theme.colors.text.inverse\n      : props.theme.colors.text.body};\n  border: none;\n  border-radius: ${(props) => props.theme.radii.inner};\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n\n  &:hover:not(:disabled) {\n    color: ${(props) =>\n      props.isSelected ? props.theme.colors.text.inverse : undefined};\n    background-color: ${(props) =>\n      props.isSelected\n        ? props.theme.colors.button.secondary.background.active\n        : props.theme.colors.listItem.background.hover};\n  }\n\n  &:disabled {\n    cursor: default;\n    opacity: ${(props) => (props.isSelected ? 1 : 0.5)};\n  }\n`;\n","import * as React from \"react\";\n\n/**\n * Standard page size option sets for pagination.\n * Export these constants to maintain consistency across tables.\n */\nconst PAGE_SIZE_OPTIONS_STANDARD = [10, 25, 50, 100] as const;\nconst PAGE_SIZE_OPTIONS_COMPACT = [5, 10, 20] as const;\nconst PAGE_SIZE_OPTIONS_LARGE = [50, 100, 200, 500] as const;\n\nexport const PAGE_SIZE_OPTIONS = {\n  STANDARD: PAGE_SIZE_OPTIONS_STANDARD,\n  COMPACT: PAGE_SIZE_OPTIONS_COMPACT,\n  LARGE: PAGE_SIZE_OPTIONS_LARGE,\n};\n\n/**\n * Allowed page size option sets.\n * Use one of the predefined PAGE_SIZE_OPTIONS for consistency.\n */\nexport type TypeAllowedPageSizeOptions =\n  | typeof PAGE_SIZE_OPTIONS_STANDARD\n  | typeof PAGE_SIZE_OPTIONS_COMPACT\n  | typeof PAGE_SIZE_OPTIONS_LARGE;\n\n/**\n * Configuration for pagination controls with page navigation and size selection.\n *\n * @example\n * ```tsx\n * <Pagination\n *   paginationConfig={{\n *     initialPageSize: 25,\n *     displayType: 'dropdown',\n *     pageSizeOptions: PAGE_SIZE_OPTIONS.STANDARD,\n *     tableCountFunction: ({ startNum, endNum, totalRowCount }) =>\n *       `${startNum}-${endNum} of ${totalRowCount}`\n *   }}\n *   currentPageIndex={0}\n *   pageSize={25}\n *   totalRows={100}\n *   onPageChange={(index) => console.log('Page:', index)}\n *   onPageSizeChange={(size) => console.log('Page size:', size)}\n * />\n * ```\n */\nexport interface TypePaginationConfig {\n  /**\n   * Initial number of rows per page.\n   * @default 10\n   */\n  initialPageSize: number;\n  /**\n   * Function that returns the intl for displaying the table counts underneath a DataTable\n   */\n  tableCountFunction: (args: {\n    startNum: number;\n    endNum: number;\n    totalRowCount: number;\n  }) => React.ReactNode;\n  /**\n   * Display mode for page size selector.\n   * - 'dropdown': Shows page size selector as a dropdown\n   * Only used when pageSizeOptions is provided.\n   * @default 'dropdown'\n   */\n  displayType?: \"dropdown\";\n  /**\n   * Optional array of page size options for the selector.\n   * If not provided, page size selection will not be available.\n   * Use PAGE_SIZE_OPTIONS constants for consistency.\n   *\n   * @example\n   * pageSizeOptions: PAGE_SIZE_OPTIONS.STANDARD // [10, 25, 50, 100]\n   */\n  pageSizeOptions?: TypeAllowedPageSizeOptions;\n  /**\n   * Size variant for page number display.\n   * - 'default': Shows current page ±1-2 pages (more visible pages)\n   * - 'mini': Shows only current page (fewer visible pages)\n   * @default 'default'\n   */\n  size?: \"default\" | \"mini\";\n}\n"],"mappings":"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","names":["styled","React"]}

package/jest.config.js

@@ -0,0 +1,11 @@
+const baseConfig = require("@sproutsocial/seeds-testing");
+
+/**
+ * @type {import('jest').Config}
+ */
+const config = {
+  ...baseConfig,
+  displayName: "seeds-react-pagination",
+};
+
+module.exports = config;

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@sproutsocial/seeds-react-pagination",
+  "version": "0.1.0",
+  "description": "Seeds React Pagination",
+  "author": "Sprout Social, Inc.",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/esm/index.js",
+      "require": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "build": "tsup --dts",
+    "build:debug": "tsup --dts --metafile",
+    "dev": "tsup --watch --dts",
+    "clean": "rm -rf .turbo dist",
+    "clean:modules": "rm -rf node_modules",
+    "typecheck": "tsc --noEmit",
+    "test": "jest",
+    "test:watch": "jest --watch --coverage=false"
+  },
+  "dependencies": {
+    "@sproutsocial/seeds-react-theme": "^3.5.1",
+    "@sproutsocial/seeds-react-system-props": "^3.0.2",
+    "@sproutsocial/seeds-react-icon": "^2.2.4",
+    "@sproutsocial/seeds-react-select": "^1.1.21",
+    "@sproutsocial/seeds-react-text": "^1.4.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/styled-components": "^5.1.26",
+    "@sproutsocial/eslint-config-seeds": "*",
+    "react": "^18.0.0",
+    "styled-components": "^5.2.3",
+    "tsup": "^8.3.4",
+    "typescript": "^5.6.2",
+    "@sproutsocial/seeds-tsconfig": "*",
+    "@sproutsocial/seeds-testing": "*",
+    "@sproutsocial/seeds-react-testing-library": "*"
+  },
+  "peerDependencies": {
+    "styled-components": "^5.2.3"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}

package/src/Pagination.tsx

@@ -0,0 +1,210 @@
+import * as React from "react";
+import { Select } from "@sproutsocial/seeds-react-select";
+import { Icon } from "@sproutsocial/seeds-react-icon";
+import type { TypePaginationConfig } from "./PaginationTypes";
+import {
+  StyledPaginationContainer,
+  StyledPaginationControls,
+  StyledPaginationInfo,
+  StyledPageSizeSelector,
+  StyledPageButtons,
+  StyledPaginationButton,
+} from "./styles";
+
+interface PaginationProps {
+  paginationConfig: TypePaginationConfig;
+  currentPageIndex: number;
+  pageSize: number;
+  totalRows: number;
+  onPageChange: (pageIndex: number) => void;
+  onPageSizeChange: (pageSize: number) => void;
+}
+
+export const Pagination = ({
+  paginationConfig,
+  currentPageIndex,
+  pageSize,
+  totalRows,
+  onPageChange,
+  onPageSizeChange,
+}: PaginationProps) => {
+  const { displayType, pageSizeOptions, tableCountFunction } = paginationConfig;
+
+  // Calculate pagination values
+  const totalPages = Math.ceil(totalRows / pageSize);
+  const currentPage = currentPageIndex + 1; // Convert 0-based to 1-based for display
+  const startRow = totalRows === 0 ? 0 : currentPageIndex * pageSize + 1;
+  const endRow = Math.min((currentPageIndex + 1) * pageSize, totalRows);
+
+  const canGoPrevious = currentPageIndex > 0;
+  const canGoNext = currentPageIndex < totalPages - 1;
+
+  const handlePrevious = () => {
+    if (canGoPrevious) {
+      onPageChange(currentPageIndex - 1);
+    }
+  };
+
+  const handleNext = () => {
+    if (canGoNext) {
+      onPageChange(currentPageIndex + 1);
+    }
+  };
+
+  const handlePageSizeChange = (e: React.SyntheticEvent<HTMLSelectElement>) => {
+    const newPageSize = Number(e.currentTarget.value);
+    onPageSizeChange(newPageSize);
+    // Reset to first page when page size changes
+    onPageChange(0);
+  };
+
+  // Generate page number buttons using web-app-core's algorithm
+  const getPageNumbers = () => {
+    const pages: (number | string)[] = [];
+    const size = paginationConfig.size || "default";
+
+    // Configuration for how many pages to show around current page
+    const NUM_PAGE_LOWER = size === "mini" ? 0 : 1;
+    const NUM_PAGE_UPPER = size === "mini" ? 0 : 2;
+
+    // If number of pages is small enough, show all the page tokens without ellipsis
+    if (totalPages <= 5 + NUM_PAGE_LOWER + NUM_PAGE_UPPER) {
+      for (let i = 1; i <= totalPages; i++) {
+        pages.push(i);
+      }
+    } else {
+      // Add first page
+      pages.push(1);
+
+      // Add ellipsis at the beginning if needed
+      if (currentPage > 3 + NUM_PAGE_LOWER) {
+        pages.push("...");
+      }
+
+      // Add pages in the middle
+      let start: number;
+      let end: number; // inclusive index
+
+      // If near beginning - Show number of pages before ending ellipsis
+      if (currentPage <= 3 + NUM_PAGE_LOWER) {
+        start = 2;
+        end = 3 + NUM_PAGE_LOWER + NUM_PAGE_UPPER;
+      } else if (currentPage > totalPages - (3 + NUM_PAGE_UPPER)) {
+        // If near end - Show number of pages after starting ellipsis
+        start = totalPages - (2 + NUM_PAGE_LOWER + NUM_PAGE_UPPER);
+        end = totalPages - 1;
+      } else {
+        // If in the middle - Show number of pages between two ellipses
+        start = currentPage - NUM_PAGE_LOWER;
+        end = currentPage + NUM_PAGE_UPPER;
+      }
+
+      for (let i = start; i <= end; i++) {
+        pages.push(i);
+      }
+
+      // Add a final ellipsis if necessary
+      if (currentPage < totalPages - (2 + NUM_PAGE_UPPER)) {
+        pages.push("...");
+      }
+
+      // Add the last page number
+      pages.push(totalPages);
+    }
+
+    return pages;
+  };
+
+  const pageNumbers = getPageNumbers();
+
+  if (totalPages <= 1 && !pageSizeOptions) {
+    // No pagination needed if only one page and no page size options
+    return null;
+  }
+
+  return (
+    <StyledPaginationContainer>
+      <StyledPaginationInfo>
+        {tableCountFunction({
+          startNum: startRow,
+          endNum: endRow,
+          totalRowCount: totalRows,
+        })}
+      </StyledPaginationInfo>
+      {/* Page size selector */}
+      {pageSizeOptions && displayType === "dropdown" && (
+        <StyledPageSizeSelector>
+          <Select
+            id="page-size-select"
+            name="page-size"
+            value={String(pageSize)}
+            onChange={handlePageSizeChange}
+            ariaLabel="Rows per page"
+            size="small"
+          >
+            {pageSizeOptions.map((size) => (
+              <option key={size} value={size}>
+                {size} per page
+              </option>
+            ))}
+          </Select>
+        </StyledPageSizeSelector>
+      )}
+
+      {/* TODO: Add inline page size selector for displayType === 'inline' */}
+
+      {/* Page navigation controls */}
+      {totalPages > 1 && (
+        <StyledPaginationControls>
+          <StyledPageButtons>
+            <StyledPaginationButton
+              onClick={handlePrevious}
+              disabled={!canGoPrevious}
+              aria-label="Previous page"
+            >
+              <Icon name="chevron-left-outline" />
+            </StyledPaginationButton>
+
+            {pageNumbers.map((pageNum, index) => {
+              if (pageNum === "...") {
+                return (
+                  <StyledPaginationButton
+                    key={`ellipsis-${index}`}
+                    disabled
+                    aria-label="More pages"
+                  >
+                    <Icon name="ellipsis-horizontal-outline" />
+                  </StyledPaginationButton>
+                );
+              }
+
+              const page = pageNum as number;
+              const isCurrentPage = page === currentPage;
+
+              return (
+                <StyledPaginationButton
+                  key={page}
+                  onClick={() => onPageChange(page - 1)}
+                  disabled={isCurrentPage}
+                  aria-label={`Page ${page}`}
+                  aria-current={isCurrentPage ? "page" : undefined}
+                  isSelected={isCurrentPage}
+                >
+                  {page}
+                </StyledPaginationButton>
+              );
+            })}
+
+            <StyledPaginationButton
+              onClick={handleNext}
+              disabled={!canGoNext}
+              aria-label="Next page"
+            >
+              <Icon name="chevron-right-outline" />
+            </StyledPaginationButton>
+          </StyledPageButtons>
+        </StyledPaginationControls>
+      )}
+    </StyledPaginationContainer>
+  );
+};

package/src/PaginationTypes.ts

@@ -0,0 +1,84 @@
+import * as React from "react";
+
+/**
+ * Standard page size option sets for pagination.
+ * Export these constants to maintain consistency across tables.
+ */
+const PAGE_SIZE_OPTIONS_STANDARD = [10, 25, 50, 100] as const;
+const PAGE_SIZE_OPTIONS_COMPACT = [5, 10, 20] as const;
+const PAGE_SIZE_OPTIONS_LARGE = [50, 100, 200, 500] as const;
+
+export const PAGE_SIZE_OPTIONS = {
+  STANDARD: PAGE_SIZE_OPTIONS_STANDARD,
+  COMPACT: PAGE_SIZE_OPTIONS_COMPACT,
+  LARGE: PAGE_SIZE_OPTIONS_LARGE,
+};
+
+/**
+ * Allowed page size option sets.
+ * Use one of the predefined PAGE_SIZE_OPTIONS for consistency.
+ */
+export type TypeAllowedPageSizeOptions =
+  | typeof PAGE_SIZE_OPTIONS_STANDARD
+  | typeof PAGE_SIZE_OPTIONS_COMPACT
+  | typeof PAGE_SIZE_OPTIONS_LARGE;
+
+/**
+ * Configuration for pagination controls with page navigation and size selection.
+ *
+ * @example
+ * ```tsx
+ * <Pagination
+ *   paginationConfig={{
+ *     initialPageSize: 25,
+ *     displayType: 'dropdown',
+ *     pageSizeOptions: PAGE_SIZE_OPTIONS.STANDARD,
+ *     tableCountFunction: ({ startNum, endNum, totalRowCount }) =>
+ *       `${startNum}-${endNum} of ${totalRowCount}`
+ *   }}
+ *   currentPageIndex={0}
+ *   pageSize={25}
+ *   totalRows={100}
+ *   onPageChange={(index) => console.log('Page:', index)}
+ *   onPageSizeChange={(size) => console.log('Page size:', size)}
+ * />
+ * ```
+ */
+export interface TypePaginationConfig {
+  /**
+   * Initial number of rows per page.
+   * @default 10
+   */
+  initialPageSize: number;
+  /**
+   * Function that returns the intl for displaying the table counts underneath a DataTable
+   */
+  tableCountFunction: (args: {
+    startNum: number;
+    endNum: number;
+    totalRowCount: number;
+  }) => React.ReactNode;
+  /**
+   * Display mode for page size selector.
+   * - 'dropdown': Shows page size selector as a dropdown
+   * Only used when pageSizeOptions is provided.
+   * @default 'dropdown'
+   */
+  displayType?: "dropdown";
+  /**
+   * Optional array of page size options for the selector.
+   * If not provided, page size selection will not be available.
+   * Use PAGE_SIZE_OPTIONS constants for consistency.
+   *
+   * @example
+   * pageSizeOptions: PAGE_SIZE_OPTIONS.STANDARD // [10, 25, 50, 100]
+   */
+  pageSizeOptions?: TypeAllowedPageSizeOptions;
+  /**
+   * Size variant for page number display.
+   * - 'default': Shows current page ±1-2 pages (more visible pages)
+   * - 'mini': Shows only current page (fewer visible pages)
+   * @default 'default'
+   */
+  size?: "default" | "mini";
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export { Pagination } from "./Pagination";
+export * from "./PaginationTypes";

package/src/styles.ts

@@ -0,0 +1,75 @@
+import styled from "styled-components";
+import { Text } from "@sproutsocial/seeds-react-text";
+
+// Pagination Styles
+export const StyledPaginationContainer = styled.div`
+  ${(props) => props.theme.typography[200]}
+  display: flex;
+  align-items: center;
+  gap: ${(props) => props.theme.space[300]};
+  margin-top: ${(props) => props.theme.space[400]};
+  flex-wrap: wrap;
+`;
+
+export const StyledPaginationControls = styled.div`
+  display: flex;
+  align-items: center;
+  margin-left: auto;
+`;
+
+export const StyledPaginationInfo = styled(Text)`
+  white-space: nowrap;
+`;
+
+export const StyledPageSizeSelector = styled.div`
+  display: flex;
+  align-items: center;
+  gap: ${(props) => props.theme.space[300]};
+`;
+
+export const StyledPageButtons = styled.div`
+  display: inline-flex;
+  flex-flow: row wrap;
+  background-clip: padding-box;
+  border: 1px solid
+    ${(props) => props.theme.colors.button.secondary.border.base};
+  border-radius: ${(props) => props.theme.radii.outer};
+  padding: ${(props) => props.theme.space[100]};
+  background: transparent;
+`;
+
+export const StyledPaginationButton = styled.button<{ isSelected?: boolean }>`
+  min-width: calc(${(props) => props.theme.space[500]} + 4px);
+  min-height: calc(${(props) => props.theme.space[500]} + 2px);
+  padding: calc(${(props) => props.theme.space[350]} - 6px);
+  line-height: ${(props) => props.theme.space[400]};
+  font-weight: ${(props) => props.theme.fontWeights.semibold};
+  background-color: ${(props) =>
+    props.isSelected
+      ? props.theme.colors.button.secondary.background.active
+      : "transparent"};
+  color: ${(props) =>
+    props.isSelected
+      ? props.theme.colors.text.inverse
+      : props.theme.colors.text.body};
+  border: none;
+  border-radius: ${(props) => props.theme.radii.inner};
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  &:hover:not(:disabled) {
+    color: ${(props) =>
+      props.isSelected ? props.theme.colors.text.inverse : undefined};
+    background-color: ${(props) =>
+      props.isSelected
+        ? props.theme.colors.button.secondary.background.active
+        : props.theme.colors.listItem.background.hover};
+  }
+
+  &:disabled {
+    cursor: default;
+    opacity: ${(props) => (props.isSelected ? 1 : 0.5)};
+  }
+`;

package/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "@sproutsocial/seeds-tsconfig/bundler/dom/library-monorepo",
+  "compilerOptions": {
+    "jsx": "react-jsx"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist", "**/*.stories.tsx", "**/*.stories.ts"]
+}

package/tsup.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig((options) => ({
+  entry: ["src/index.ts"],
+  format: ["cjs", "esm"],
+  clean: true,
+  legacyOutput: true,
+  dts: options.dts,
+  external: ["react"],
+  sourcemap: true,
+  metafile: options.metafile,
+}));