@sproutsocial/seeds-react-pagination 0.1.27 → 0.1.29

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 yarn run v1.22.22
-$ tsup --dts
+$ tsup --dts && cp src/pagination.css dist/pagination.css
 CLI Building entry: src/index.ts
 CLI Using tsconfig: tsconfig.json
 CLI tsup v8.5.0
@@ -8,14 +8,14 @@ $ tsup --dts
 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 14ms
-ESM dist/esm/index.js     7.07 KB
-ESM dist/esm/index.js.map 15.50 KB
-ESM ⚡️ Build success in 14ms
+CJS dist/index.js     15.12 KB
+CJS dist/index.js.map 26.65 KB
+CJS ⚡️ Build success in 87ms
+ESM dist/esm/index.js     12.16 KB
+ESM dist/esm/index.js.map 26.54 KB
+ESM ⚡️ Build success in 87ms
 DTS Build start
-DTS ⚡️ Build success in 4196ms
-DTS dist/index.d.ts  3.08 KB
-DTS dist/index.d.mts 3.08 KB
-Done in 5.88s.
+DTS ⚡️ Build success in 5791ms
+DTS dist/index.d.ts  3.83 KB
+DTS dist/index.d.mts 3.83 KB
+Done in 7.59s.

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @sproutsocial/seeds-react-pagination
 
+## 0.1.29
+
+### Patch Changes
+
+- da85fb8: Migrate Pagination to the Tailwind hybrid pattern: a pure-CSS Tailwind
+  implementation with a styled-components fallback for system-prop / `styled()`
+  consumers, preserving full backward compatibility. Component CSS is shipped via
+  `@sproutsocial/racine/css/components` and its rules are wrapped in
+  `@layer components` so consumer Tailwind utilities win the cascade. An optional
+  `className` is now forwarded to the root container so consumers can apply
+  Tailwind utility overrides.
+- Updated dependencies [ef91a0d]
+  - @sproutsocial/seeds-react-system-props@3.1.4
+  - @sproutsocial/seeds-react-icon@2.4.8
+  - @sproutsocial/seeds-react-select@1.1.49
+  - @sproutsocial/seeds-react-text@1.5.3
+
+## 0.1.28
+
+### Patch Changes
+
+- @sproutsocial/seeds-react-icon@2.4.7
+- @sproutsocial/seeds-react-select@1.1.48
+
 ## 0.1.27
 
 ### Patch Changes

package/dist/esm/index.js

@@ -1,71 +1,13 @@
-// src/Pagination.tsx
-import "react";
+// src/PaginationHybrid.tsx
+import { hasStyledProps } from "@sproutsocial/seeds-react-system-props";
+
+// src/PaginationStyled.tsx
 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 = ({
+// src/usePaginationModel.ts
+import "react";
+var usePaginationModel = ({
   paginationConfig,
   currentPageIndex,
   pageSize,
@@ -132,10 +74,106 @@ var Pagination = ({
     return pages;
   };
   const pageNumbers = getPageNumbers();
+  return {
+    displayType,
+    pageSizeOptions,
+    tableCountFunction,
+    totalPages,
+    currentPage,
+    startRow,
+    endRow,
+    canGoPrevious,
+    canGoNext,
+    handlePrevious,
+    handleNext,
+    handlePageSizeChange,
+    pageNumbers
+  };
+};
+
+// 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/PaginationStyled.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var PaginationStyled = (props) => {
+  const { pageSize, totalRows, onPageChange, className } = props;
+  const {
+    displayType,
+    pageSizeOptions,
+    tableCountFunction,
+    totalPages,
+    currentPage,
+    startRow,
+    endRow,
+    canGoPrevious,
+    canGoNext,
+    handlePrevious,
+    handleNext,
+    handlePageSizeChange,
+    pageNumbers
+  } = usePaginationModel(props);
   if (totalPages <= 1 && !pageSizeOptions) {
     return null;
   }
-  return /* @__PURE__ */ jsxs(StyledPaginationContainer, { children: [
+  return /* @__PURE__ */ jsxs(StyledPaginationContainer, { className, children: [
     /* @__PURE__ */ jsx(StyledPaginationInfo, { children: tableCountFunction({
       startNum: startRow,
       endNum: endRow,
@@ -206,6 +244,141 @@ var Pagination = ({
   ] });
 };
 
+// src/PaginationTailwind.tsx
+import { Select as Select2 } from "@sproutsocial/seeds-react-select";
+import { Icon as Icon2 } from "@sproutsocial/seeds-react-icon";
+import { Text as Text2 } from "@sproutsocial/seeds-react-text";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function cn(...inputs) {
+  const classes = [];
+  for (const input of inputs) {
+    if (!input) continue;
+    if (typeof input === "string") {
+      classes.push(input);
+    } else if (typeof input === "object") {
+      for (const [key, value] of Object.entries(input)) {
+        if (value) {
+          classes.push(key);
+        }
+      }
+    }
+  }
+  return classes.join(" ");
+}
+var PaginationTailwind = (props) => {
+  const { pageSize, totalRows, onPageChange, className } = props;
+  const {
+    displayType,
+    pageSizeOptions,
+    tableCountFunction,
+    totalPages,
+    currentPage,
+    startRow,
+    endRow,
+    canGoPrevious,
+    canGoNext,
+    handlePrevious,
+    handleNext,
+    handlePageSizeChange,
+    pageNumbers
+  } = usePaginationModel(props);
+  if (totalPages <= 1 && !pageSizeOptions) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs2("div", { className: cn("seeds-pagination-container", className), children: [
+    /* @__PURE__ */ jsx2(Text2, { className: cn("seeds-pagination-info"), children: tableCountFunction({
+      startNum: startRow,
+      endNum: endRow,
+      totalRowCount: totalRows
+    }) }),
+    pageSizeOptions && displayType === "dropdown" && /* @__PURE__ */ jsx2("div", { className: cn("seeds-pagination-page-size-selector"), children: /* @__PURE__ */ jsx2(
+      Select2,
+      {
+        id: "page-size-select",
+        name: "page-size",
+        value: String(pageSize),
+        onChange: handlePageSizeChange,
+        ariaLabel: "Rows per page",
+        size: "small",
+        children: pageSizeOptions.map((size) => /* @__PURE__ */ jsxs2("option", { value: size, children: [
+          size,
+          " per page"
+        ] }, size))
+      }
+    ) }),
+    totalPages > 1 && /* @__PURE__ */ jsx2("div", { className: cn("seeds-pagination-controls"), children: /* @__PURE__ */ jsxs2("div", { className: cn("seeds-pagination-page-buttons"), children: [
+      /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "button",
+          className: cn("seeds-pagination-button"),
+          onClick: handlePrevious,
+          disabled: !canGoPrevious,
+          "aria-label": "Previous page",
+          children: /* @__PURE__ */ jsx2(Icon2, { name: "chevron-left-outline" })
+        }
+      ),
+      pageNumbers.map((pageNum, index) => {
+        if (pageNum === "...") {
+          return /* @__PURE__ */ jsx2(
+            "button",
+            {
+              type: "button",
+              className: cn("seeds-pagination-button"),
+              disabled: true,
+              "aria-label": "More pages",
+              children: /* @__PURE__ */ jsx2(Icon2, { name: "ellipsis-horizontal-outline" })
+            },
+            `ellipsis-${index}`
+          );
+        }
+        const page = pageNum;
+        const isCurrentPage = page === currentPage;
+        return /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            className: cn("seeds-pagination-button", {
+              "seeds-pagination-button-selected": isCurrentPage
+            }),
+            onClick: () => onPageChange(page - 1),
+            disabled: isCurrentPage,
+            "aria-label": `Page ${page}`,
+            "aria-current": isCurrentPage ? "page" : void 0,
+            children: page
+          },
+          page
+        );
+      }),
+      /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "button",
+          className: cn("seeds-pagination-button"),
+          onClick: handleNext,
+          disabled: !canGoNext,
+          "aria-label": "Next page",
+          children: /* @__PURE__ */ jsx2(Icon2, { name: "chevron-right-outline" })
+        }
+      )
+    ] }) })
+  ] });
+};
+
+// src/PaginationHybrid.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var PaginationHybrid = (props) => {
+  if (hasStyledProps(props)) {
+    return /* @__PURE__ */ jsx3(PaginationStyled, { ...props });
+  }
+  return /* @__PURE__ */ jsx3(PaginationTailwind, { ...props });
+};
+
+// src/Pagination.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var Pagination = (props) => /* @__PURE__ */ jsx4(PaginationHybrid, { ...props });
+Pagination.displayName = "Pagination";
+
 // src/PaginationTypes.ts
 import "react";
 var PAGE_SIZE_OPTIONS_STANDARD = [10, 25, 50, 100];

package/dist/esm/index.js.map

@@ -1 +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":"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","names":[]}
+{"version":3,"sources":["../../src/PaginationHybrid.tsx","../../src/PaginationStyled.tsx","../../src/usePaginationModel.ts","../../src/styles.ts","../../src/PaginationTailwind.tsx","../../src/Pagination.tsx","../../src/PaginationTypes.ts"],"sourcesContent":["/**\n * Hybrid Pagination component.\n * Routes between the Tailwind implementation (preferred) and the\n * styled-components implementation (for consumers using system props).\n */\n\nimport { hasStyledProps } from \"@sproutsocial/seeds-react-system-props\";\nimport { PaginationStyled } from \"./PaginationStyled\";\nimport { PaginationTailwind } from \"./PaginationTailwind\";\nimport type { PaginationProps } from \"./PaginationTypes\";\n\nexport const PaginationHybrid = (props: PaginationProps) => {\n  // Pagination exposes domain props plus an optional className, none of which\n  // are styled-system props, so hasStyledProps is effectively always false; the\n  // styled-components branch is retained as a pattern-conformance fallback.\n  if (hasStyledProps(props)) {\n    return <PaginationStyled {...props} />;\n  }\n  return <PaginationTailwind {...props} />;\n};\n","/**\n * Styled-components implementation of the Pagination component.\n * Composes the styled sub-components from styles.ts. Retained for backward\n * compatibility (system props / styled() extension) via PaginationHybrid.\n */\n\nimport { Select } from \"@sproutsocial/seeds-react-select\";\nimport { Icon } from \"@sproutsocial/seeds-react-icon\";\nimport type { PaginationProps } from \"./PaginationTypes\";\nimport { usePaginationModel } from \"./usePaginationModel\";\nimport {\n  StyledPaginationContainer,\n  StyledPaginationControls,\n  StyledPaginationInfo,\n  StyledPageSizeSelector,\n  StyledPageButtons,\n  StyledPaginationButton,\n} from \"./styles\";\n\nexport const PaginationStyled = (props: PaginationProps) => {\n  const { pageSize, totalRows, onPageChange, className } = props;\n  const {\n    displayType,\n    pageSizeOptions,\n    tableCountFunction,\n    totalPages,\n    currentPage,\n    startRow,\n    endRow,\n    canGoPrevious,\n    canGoNext,\n    handlePrevious,\n    handleNext,\n    handlePageSizeChange,\n    pageNumbers,\n  } = usePaginationModel(props);\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 className={className}>\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","/**\n * Presentation-agnostic Pagination model: page math, the page-number token\n * list, and the event handlers consumed identically by PaginationTailwind and\n * PaginationStyled. Contains NO rendering — the JSX and the `return null` guard\n * stay in each component — so the two implementations cannot drift apart. Call\n * it unconditionally at the top of each component, before any early return.\n */\n\nimport * as React from \"react\";\nimport type { PaginationProps } from \"./PaginationTypes\";\n\nexport const usePaginationModel = ({\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  return {\n    displayType,\n    pageSizeOptions,\n    tableCountFunction,\n    totalPages,\n    currentPage,\n    startRow,\n    endRow,\n    canGoPrevious,\n    canGoNext,\n    handlePrevious,\n    handleNext,\n    handlePageSizeChange,\n    pageNumbers,\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","/**\n * Tailwind/CSS implementation of the Pagination component.\n * Uses Seeds pagination CSS classes from pagination.css.\n */\n\nimport { Select } from \"@sproutsocial/seeds-react-select\";\nimport { Icon } from \"@sproutsocial/seeds-react-icon\";\nimport { Text } from \"@sproutsocial/seeds-react-text\";\nimport type { PaginationProps } from \"./PaginationTypes\";\nimport { usePaginationModel } from \"./usePaginationModel\";\n\n// Utility for merging class names properly\nfunction cn(\n  ...inputs: (string | undefined | null | false | Record<string, boolean>)[]\n): string {\n  const classes: string[] = [];\n\n  for (const input of inputs) {\n    if (!input) continue;\n\n    if (typeof input === \"string\") {\n      classes.push(input);\n    } else if (typeof input === \"object\") {\n      for (const [key, value] of Object.entries(input)) {\n        if (value) {\n          classes.push(key);\n        }\n      }\n    }\n  }\n\n  return classes.join(\" \");\n}\n\nexport const PaginationTailwind = (props: PaginationProps) => {\n  const { pageSize, totalRows, onPageChange, className } = props;\n  const {\n    displayType,\n    pageSizeOptions,\n    tableCountFunction,\n    totalPages,\n    currentPage,\n    startRow,\n    endRow,\n    canGoPrevious,\n    canGoNext,\n    handlePrevious,\n    handleNext,\n    handlePageSizeChange,\n    pageNumbers,\n  } = usePaginationModel(props);\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    <div className={cn(\"seeds-pagination-container\", className)}>\n      <Text className={cn(\"seeds-pagination-info\")}>\n        {tableCountFunction({\n          startNum: startRow,\n          endNum: endRow,\n          totalRowCount: totalRows,\n        })}\n      </Text>\n      {/* Page size selector */}\n      {pageSizeOptions && displayType === \"dropdown\" && (\n        <div className={cn(\"seeds-pagination-page-size-selector\")}>\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        </div>\n      )}\n\n      {/* TODO: Add inline page size selector for displayType === 'inline' */}\n\n      {/* Page navigation controls */}\n      {totalPages > 1 && (\n        <div className={cn(\"seeds-pagination-controls\")}>\n          <div className={cn(\"seeds-pagination-page-buttons\")}>\n            <button\n              type=\"button\"\n              className={cn(\"seeds-pagination-button\")}\n              onClick={handlePrevious}\n              disabled={!canGoPrevious}\n              aria-label=\"Previous page\"\n            >\n              <Icon name=\"chevron-left-outline\" />\n            </button>\n\n            {pageNumbers.map((pageNum, index) => {\n              if (pageNum === \"...\") {\n                return (\n                  <button\n                    type=\"button\"\n                    key={`ellipsis-${index}`}\n                    className={cn(\"seeds-pagination-button\")}\n                    disabled\n                    aria-label=\"More pages\"\n                  >\n                    <Icon name=\"ellipsis-horizontal-outline\" />\n                  </button>\n                );\n              }\n\n              const page = pageNum as number;\n              const isCurrentPage = page === currentPage;\n\n              return (\n                <button\n                  type=\"button\"\n                  key={page}\n                  className={cn(\"seeds-pagination-button\", {\n                    \"seeds-pagination-button-selected\": isCurrentPage,\n                  })}\n                  onClick={() => onPageChange(page - 1)}\n                  disabled={isCurrentPage}\n                  aria-label={`Page ${page}`}\n                  aria-current={isCurrentPage ? \"page\" : undefined}\n                >\n                  {page}\n                </button>\n              );\n            })}\n\n            <button\n              type=\"button\"\n              className={cn(\"seeds-pagination-button\")}\n              onClick={handleNext}\n              disabled={!canGoNext}\n              aria-label=\"Next page\"\n            >\n              <Icon name=\"chevron-right-outline\" />\n            </button>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n};\n","import { PaginationHybrid } from \"./PaginationHybrid\";\nimport type { PaginationProps } from \"./PaginationTypes\";\n\n/**\n * Pagination component. Automatically routes between the Tailwind implementation\n * (preferred) and the styled-components implementation (for consumers using\n * system props or styled() extension).\n *\n * Defined as a self-named component (rather than a bare re-export of\n * PaginationHybrid) so the `react-docgen` props-docs generation in the Publish\n * pipeline has a suitable component definition to analyze.\n */\nexport const Pagination = (props: PaginationProps) => (\n  <PaginationHybrid {...props} />\n);\n\nPagination.displayName = \"Pagination\";\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 */\n/**\n * Props for the Pagination component.\n */\nexport interface 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   * Optional class name applied to the root container. Lets consumers layer\n   * Tailwind utility overrides (e.g. `mx-200`, `p-300`) on top of the component\n   * styles. Because `className` is not a styled-system prop, providing it keeps\n   * the component on the Tailwind rendering path.\n   */\n  className?: string;\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":["Select","Icon","Text","jsx","jsxs","Text","Select","Icon","jsx","jsx"]}

package/dist/index.d.mts

@@ -39,6 +39,24 @@ type TypeAllowedPageSizeOptions = typeof PAGE_SIZE_OPTIONS_STANDARD | typeof PAG
  * />
  * ```
  */
+/**
+ * Props for the Pagination component.
+ */
+interface PaginationProps {
+    paginationConfig: TypePaginationConfig;
+    currentPageIndex: number;
+    pageSize: number;
+    totalRows: number;
+    onPageChange: (pageIndex: number) => void;
+    onPageSizeChange: (pageSize: number) => void;
+    /**
+     * Optional class name applied to the root container. Lets consumers layer
+     * Tailwind utility overrides (e.g. `mx-200`, `p-300`) on top of the component
+     * styles. Because `className` is not a styled-system prop, providing it keeps
+     * the component on the Tailwind rendering path.
+     */
+    className?: string;
+}
 interface TypePaginationConfig {
     /**
      * Initial number of rows per page.
@@ -78,14 +96,18 @@ interface TypePaginationConfig {
     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;
+/**
+ * Pagination component. Automatically routes between the Tailwind implementation
+ * (preferred) and the styled-components implementation (for consumers using
+ * system props or styled() extension).
+ *
+ * Defined as a self-named component (rather than a bare re-export of
+ * PaginationHybrid) so the `react-docgen` props-docs generation in the Publish
+ * pipeline has a suitable component definition to analyze.
+ */
+declare const Pagination: {
+    (props: PaginationProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
-export { PAGE_SIZE_OPTIONS, Pagination, type TypeAllowedPageSizeOptions, type TypePaginationConfig };
+export { PAGE_SIZE_OPTIONS, Pagination, type PaginationProps, type TypeAllowedPageSizeOptions, type TypePaginationConfig };

package/dist/index.d.ts

@@ -39,6 +39,24 @@ type TypeAllowedPageSizeOptions = typeof PAGE_SIZE_OPTIONS_STANDARD | typeof PAG
  * />
  * ```
  */
+/**
+ * Props for the Pagination component.
+ */
+interface PaginationProps {
+    paginationConfig: TypePaginationConfig;
+    currentPageIndex: number;
+    pageSize: number;
+    totalRows: number;
+    onPageChange: (pageIndex: number) => void;
+    onPageSizeChange: (pageSize: number) => void;
+    /**
+     * Optional class name applied to the root container. Lets consumers layer
+     * Tailwind utility overrides (e.g. `mx-200`, `p-300`) on top of the component
+     * styles. Because `className` is not a styled-system prop, providing it keeps
+     * the component on the Tailwind rendering path.
+     */
+    className?: string;
+}
 interface TypePaginationConfig {
     /**
      * Initial number of rows per page.
@@ -78,14 +96,18 @@ interface TypePaginationConfig {
     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;
+/**
+ * Pagination component. Automatically routes between the Tailwind implementation
+ * (preferred) and the styled-components implementation (for consumers using
+ * system props or styled() extension).
+ *
+ * Defined as a self-named component (rather than a bare re-export of
+ * PaginationHybrid) so the `react-docgen` props-docs generation in the Publish
+ * pipeline has a suitable component definition to analyze.
+ */
+declare const Pagination: {
+    (props: PaginationProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
-export { PAGE_SIZE_OPTIONS, Pagination, type TypeAllowedPageSizeOptions, type TypePaginationConfig };
+export { PAGE_SIZE_OPTIONS, Pagination, type PaginationProps, type TypeAllowedPageSizeOptions, type TypePaginationConfig };