@sproutsocial/seeds-react-pagination 0.1.27 → 0.1.29

package/dist/index.js

@@ -35,74 +35,16 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/Pagination.tsx
-var React = require("react");
+// src/PaginationHybrid.tsx
+var import_seeds_react_system_props = require("@sproutsocial/seeds-react-system-props");
+
+// src/PaginationStyled.tsx
 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 = ({
+// src/usePaginationModel.ts
+var React = require("react");
+var usePaginationModel = ({
   paginationConfig,
   currentPageIndex,
   pageSize,
@@ -169,10 +111,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
+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/PaginationStyled.tsx
+var import_jsx_runtime = require("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__ */ (0, import_jsx_runtime.jsxs)(StyledPaginationContainer, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(StyledPaginationContainer, { className, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledPaginationInfo, { children: tableCountFunction({
       startNum: startRow,
       endNum: endRow,
@@ -243,6 +281,141 @@ var Pagination = ({
   ] });
 };
 
+// src/PaginationTailwind.tsx
+var import_seeds_react_select2 = require("@sproutsocial/seeds-react-select");
+var import_seeds_react_icon2 = require("@sproutsocial/seeds-react-icon");
+var import_seeds_react_text2 = require("@sproutsocial/seeds-react-text");
+var import_jsx_runtime2 = require("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__ */ (0, import_jsx_runtime2.jsxs)("div", { className: cn("seeds-pagination-container", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_seeds_react_text2.Text, { className: cn("seeds-pagination-info"), children: tableCountFunction({
+      startNum: startRow,
+      endNum: endRow,
+      totalRowCount: totalRows
+    }) }),
+    pageSizeOptions && displayType === "dropdown" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: cn("seeds-pagination-page-size-selector"), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_seeds_react_select2.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_runtime2.jsxs)("option", { value: size, children: [
+          size,
+          " per page"
+        ] }, size))
+      }
+    ) }),
+    totalPages > 1 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: cn("seeds-pagination-controls"), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: cn("seeds-pagination-page-buttons"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "button",
+        {
+          type: "button",
+          className: cn("seeds-pagination-button"),
+          onClick: handlePrevious,
+          disabled: !canGoPrevious,
+          "aria-label": "Previous page",
+          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_seeds_react_icon2.Icon, { name: "chevron-left-outline" })
+        }
+      ),
+      pageNumbers.map((pageNum, index) => {
+        if (pageNum === "...") {
+          return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "button",
+            {
+              type: "button",
+              className: cn("seeds-pagination-button"),
+              disabled: true,
+              "aria-label": "More pages",
+              children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_seeds_react_icon2.Icon, { name: "ellipsis-horizontal-outline" })
+            },
+            `ellipsis-${index}`
+          );
+        }
+        const page = pageNum;
+        const isCurrentPage = page === currentPage;
+        return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "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__ */ (0, import_jsx_runtime2.jsx)(
+        "button",
+        {
+          type: "button",
+          className: cn("seeds-pagination-button"),
+          onClick: handleNext,
+          disabled: !canGoNext,
+          "aria-label": "Next page",
+          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_seeds_react_icon2.Icon, { name: "chevron-right-outline" })
+        }
+      )
+    ] }) })
+  ] });
+};
+
+// src/PaginationHybrid.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var PaginationHybrid = (props) => {
+  if ((0, import_seeds_react_system_props.hasStyledProps)(props)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PaginationStyled, { ...props });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PaginationTailwind, { ...props });
+};
+
+// src/Pagination.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Pagination = (props) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PaginationHybrid, { ...props });
+Pagination.displayName = "Pagination";
+
 // src/PaginationTypes.ts
 var React2 = require("react");
 var PAGE_SIZE_OPTIONS_STANDARD = [10, 25, 50, 100];

package/dist/index.js.map

@@ -1 +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"]}
+{"version":3,"sources":["../src/index.ts","../src/PaginationHybrid.tsx","../src/PaginationStyled.tsx","../src/usePaginationModel.ts","../src/styles.ts","../src/PaginationTailwind.tsx","../src/Pagination.tsx","../src/PaginationTypes.ts"],"sourcesContent":["export { Pagination } from \"./Pagination\";\nexport * from \"./PaginationTypes\";\n","/**\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":["styled","import_seeds_react_select","import_seeds_react_icon","import_seeds_react_text","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","React"]}

package/dist/pagination.css

@@ -0,0 +1,99 @@
+/**
+ * Seeds Pagination component classes
+ * Use these instead of writing out individual Tailwind utility classes.
+ *
+ * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
+ * CSS variable definitions and dark mode support.
+ *
+ * Rules are wrapped in @layer components so consumer Tailwind utilities (which
+ * live in @layer utilities) win the cascade. Without this layer the unlayered
+ * component CSS would beat utilities like mx-200 / p-300 / inline-flex and they
+ * could not override component styling. Keep every rule inside this single block
+ * in source order — the -selected modifier and the :disabled overrides resolve
+ * by source order within the same layer.
+ */
+
+@layer components {
+  /* StyledPaginationContainer */
+  .seeds-pagination-container {
+    font-size: var(--font-size-200);
+    line-height: var(--line-height-200);
+    display: flex;
+    align-items: center;
+    gap: var(--space-300);
+    margin-top: var(--space-400);
+    flex-wrap: wrap;
+  }
+
+  /* StyledPaginationInfo (styled(Text)) */
+  .seeds-pagination-info {
+    white-space: nowrap;
+  }
+
+  /* StyledPageSizeSelector */
+  .seeds-pagination-page-size-selector {
+    display: flex;
+    align-items: center;
+    gap: var(--space-300);
+  }
+
+  /* StyledPaginationControls */
+  .seeds-pagination-controls {
+    display: flex;
+    align-items: center;
+    margin-left: auto;
+  }
+
+  /* StyledPageButtons */
+  .seeds-pagination-page-buttons {
+    display: inline-flex;
+    flex-flow: row wrap;
+    background-clip: padding-box;
+    border: 1px solid var(--color-button-secondary-border-base);
+    border-radius: var(--radius-outer);
+    padding: var(--space-100);
+    background: transparent;
+  }
+
+  /* StyledPaginationButton — base */
+  .seeds-pagination-button {
+    min-width: calc(var(--space-500) + 4px);
+    min-height: calc(var(--space-500) + 2px);
+    padding: calc(var(--space-350) - 6px);
+    line-height: var(--space-400);
+    font-weight: var(--font-weight-semibold);
+    background-color: transparent;
+    color: var(--color-text-body);
+    border: none;
+    border-radius: var(--radius-inner);
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  /* selected modifier MUST follow base (equal specificity — source order wins) */
+  .seeds-pagination-button-selected {
+    background-color: var(--color-button-secondary-bg-active);
+    color: var(--color-text-inverse);
+  }
+
+  .seeds-pagination-button:hover:not(:disabled) {
+    background-color: var(--color-listItem-bg-hover);
+  }
+
+  .seeds-pagination-button-selected:hover:not(:disabled) {
+    background-color: var(--color-button-secondary-bg-active);
+    color: var(--color-text-inverse);
+  }
+
+  .seeds-pagination-button:disabled {
+    cursor: default;
+    opacity: 0.5;
+  }
+
+  /* current page renders disabled + selected and must stay fully opaque */
+  .seeds-pagination-button-selected:disabled {
+    opacity: 1;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-pagination",
-  "version": "0.1.27",
+  "version": "0.1.29",
   "description": "Seeds React Pagination",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
@@ -12,11 +12,12 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/esm/index.js",
       "require": "./dist/index.js"
-    }
+    },
+    "./dist/pagination.css": "./dist/pagination.css"
   },
   "scripts": {
-    "build": "tsup --dts",
-    "build:debug": "tsup --dts --metafile",
+    "build": "tsup --dts && cp src/pagination.css dist/pagination.css",
+    "build:debug": "tsup --dts --metafile && cp src/pagination.css dist/pagination.css",
     "dev": "tsup --watch --dts",
     "clean": "rm -rf .turbo dist",
     "clean:modules": "rm -rf node_modules",
@@ -26,10 +27,10 @@
   },
   "dependencies": {
     "@sproutsocial/seeds-react-theme": "^4.3.1",
-    "@sproutsocial/seeds-react-system-props": "^3.1.3",
-    "@sproutsocial/seeds-react-icon": "^2.4.6",
-    "@sproutsocial/seeds-react-select": "^1.1.47",
-    "@sproutsocial/seeds-react-text": "^1.5.2"
+    "@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"
   },
   "devDependencies": {
     "@types/react": "^18.0.0",

package/postcss.config.js

@@ -0,0 +1,6 @@
+// Empty PostCSS config — prevents tsup from picking up the root postcss.config.js
+// (which runs Tailwind CSS and would fail without a tailwind.config.js in scope).
+// pagination.css uses plain CSS custom properties and needs no PostCSS processing.
+export default {
+  plugins: {},
+};

package/src/Pagination.stories.tsx

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Pagination } from "./Pagination";
+import { PAGE_SIZE_OPTIONS } from "./PaginationTypes";
+
+const meta = {
+  title: "Components/Pagination",
+  component: Pagination,
+} satisfies Meta<typeof Pagination>;
+
+export default meta;
+type Story = StoryObj<typeof Pagination>;
+
+const paginationConfig = {
+  initialPageSize: 10,
+  tableCountFunction: ({
+    startNum,
+    endNum,
+    totalRowCount,
+  }: {
+    startNum: number;
+    endNum: number;
+    totalRowCount: number;
+  }) => `${startNum}-${endNum} of ${totalRowCount}`,
+  pageSizeOptions: PAGE_SIZE_OPTIONS.STANDARD,
+};
+
+export const defaultStory: Story = {
+  name: "Default",
+  args: {
+    paginationConfig,
+    currentPageIndex: 0,
+    pageSize: 10,
+    totalRows: 100,
+    onPageChange: () => {},
+    onPageSizeChange: () => {},
+  },
+};
+
+/**
+ * Demonstrates that consumer Tailwind utility classes override the component's
+ * own styling. `className="mx-200 p-300 inline-flex"` is forwarded to the root
+ * container and wins the cascade only because the component CSS is wrapped in
+ * `@layer components` (consumer utilities live in `@layer utilities`, which has
+ * higher priority). Because `className` is not a styled-system prop, the
+ * component stays on the Tailwind rendering path.
+ */
+export const tailwindOverride: Story = {
+  name: "🚀 Tailwind class override (NEW!)",
+  args: {
+    paginationConfig,
+    currentPageIndex: 0,
+    pageSize: 10,
+    totalRows: 100,
+    className: "mx-200 p-300 inline-flex",
+    onPageChange: () => {},
+    onPageSizeChange: () => {},
+  },
+};