@automattic/vip-design-system 2.18.0 → 2.18.1

package/build/system/Pagination/Pagination.d.ts

@@ -1,11 +1,6 @@
 /** @jsxImportSource theme-ui */
-import { ThemeUIStyleObject } from 'theme-ui';
-export type PaginationVariant = 'full' | 'compact';
-export interface PaginationProps {
-    /** Whether to show the items-per-page dropdown selector.
-     * @default false
-     */
-    displayItemsPerPageSelector?: boolean;
+import { PaginationLayoutProps } from './PaginationLayout';
+export interface PaginationProps extends PaginationLayoutProps {
     /** The currently active page number (1-based). */
     currentPage: number;
     /** Total number of items across all pages. Used to compute totalPages if not provided. */
@@ -22,25 +17,20 @@ export interface PaginationProps {
     hasNextPage?: boolean;
     /** The maximum page number that can be reached. Used for open-ended pagination without totalPages. */
     maxReachablePage?: number;
-    /** The display variant: 'full' shows page number buttons, 'compact' shows a page dropdown.
-     * @default 'full'
+    /** When true, shows a compact dropdown page selector instead of individual page buttons.
+     * @default false
      */
-    variant?: PaginationVariant;
-    /** Available page size options for the items-per-page selector.
-     * @default [20, 50, 100]
+    compact?: boolean;
+    /** Display variant. Use 'compact' for dropdown page selector. Equivalent to the `compact` prop.
+     * @default 'full'
+     * @deprecated Use the `compact` prop instead, or `SimplePagination` for cursor-based navigation.
      */
-    pageSizeOptions?: number[];
-    /** Additional CSS class name for the pagination container. */
-    className?: string;
-    /** Theme UI style overrides. */
-    sx?: ThemeUIStyleObject;
-    /** Optional content rendered between the items-per-page selector and page navigation. */
-    children?: React.ReactNode;
+    variant?: 'full' | 'compact';
 }
 export type PageNumberItem = number | 'ellipsis';
 export declare function getPageNumbers(currentPage: number, totalPages?: number, hasNextPage?: boolean, maxReachablePage?: number): PageNumberItem[];
 /**
  * A pagination control for navigating through paged content.
- * Supports full page-number buttons and compact dropdown modes, with optional items-per-page selection.
+ * Shows page-number buttons by default, or a compact dropdown when `compact` is true.
  */
 export declare const Pagination: import("react").ForwardRefExoticComponent<PaginationProps & import("react").RefAttributes<HTMLElement>>;

package/build/system/Pagination/Pagination.js

@@ -1,14 +1,14 @@
-var _excluded = ["displayItemsPerPageSelector", "currentPage", "totalItems", "totalPages", "itemsPerPage", "onPageChange", "onItemsPerPageChange", "hasNextPage", "maxReachablePage", "variant", "pageSizeOptions", "className", "sx", "children"];
+var _excluded = ["currentPage", "totalItems", "totalPages", "itemsPerPage", "onPageChange", "onItemsPerPageChange", "hasNextPage", "maxReachablePage", "compact", "variant", "displayItemsPerPageSelector", "pageSizeOptions", "className", "sx", "children"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 /** @jsxImportSource theme-ui */
 
-import classNames from 'classnames';
 import { forwardRef } from 'react';
 import { BiDotsHorizontalRounded } from 'react-icons/bi';
 import { MdChevronLeft, MdChevronRight } from 'react-icons/md';
 import { Flex } from 'theme-ui';
-import { containerStyles, navigationStyles, pageButtonStyles, activePageButtonStyles, arrowButtonStyles, compactTextStyles } from './styles';
+import { PaginationLayout } from './PaginationLayout';
+import { navigationStyles, pageButtonStyles, activePageButtonStyles, arrowButtonStyles, compactTextStyles } from './styles';
 import { Box } from '../Box';
 import { Button } from '../Button';
 import { Select } from '../NewForm';
@@ -75,32 +75,12 @@ export function getPageNumbers(currentPage, totalPages, hasNextPage, maxReachabl
   // Fully open-ended middle
   return [1, 'ellipsis'].concat(range(currentPage - PAGES_BEFORE_CURRENT, currentPage + PAGES_AFTER_CURRENT + 1), ['ellipsis']);
 }
-var ItemsPerPageSelect = function ItemsPerPageSelect(_ref) {
-  var itemsPerPage = _ref.itemsPerPage,
-    pageSizeOptions = _ref.pageSizeOptions,
-    onItemsPerPageChange = _ref.onItemsPerPageChange;
-  return _jsx(Select, {
-    id: "items-per-page",
-    "aria-label": "Items per page",
-    separator: false,
-    value: itemsPerPage,
-    options: pageSizeOptions.map(function (size) {
-      return {
-        value: size,
-        label: size.toString() + " / page"
-      };
-    }),
-    onChange: function onChange(option) {
-      return onItemsPerPageChange(Number(option == null ? void 0 : option.value));
-    }
-  });
-};
-var PageNumbers = function PageNumbers(_ref2) {
-  var currentPage = _ref2.currentPage,
-    totalPages = _ref2.totalPages,
-    hasNextPage = _ref2.hasNextPage,
-    maxReachablePage = _ref2.maxReachablePage,
-    onPageChange = _ref2.onPageChange;
+var PageNumbers = function PageNumbers(_ref) {
+  var currentPage = _ref.currentPage,
+    totalPages = _ref.totalPages,
+    hasNextPage = _ref.hasNextPage,
+    maxReachablePage = _ref.maxReachablePage,
+    onPageChange = _ref.onPageChange;
   var pages = getPageNumbers(currentPage, totalPages, hasNextPage, maxReachablePage);
   return _jsx(_Fragment, {
     children: pages.map(function (page, index) {
@@ -121,11 +101,11 @@ var PageNumbers = function PageNumbers(_ref2) {
     })
   });
 };
-var CompactPageSelector = function CompactPageSelector(_ref3) {
-  var currentPage = _ref3.currentPage,
-    totalPages = _ref3.totalPages,
-    maxReachablePage = _ref3.maxReachablePage,
-    onPageChange = _ref3.onPageChange;
+var CompactPageSelector = function CompactPageSelector(_ref2) {
+  var currentPage = _ref2.currentPage,
+    totalPages = _ref2.totalPages,
+    maxReachablePage = _ref2.maxReachablePage,
+    onPageChange = _ref2.onPageChange;
   var isOpenEnded = totalPages === undefined;
   var upperBound = isOpenEnded ? maxReachablePage != null ? maxReachablePage : currentPage + 1 : totalPages;
   var pageOptions = Array.from({
@@ -175,58 +155,60 @@ var CompactPageSelector = function CompactPageSelector(_ref3) {
 
 /**
  * A pagination control for navigating through paged content.
- * Supports full page-number buttons and compact dropdown modes, with optional items-per-page selection.
+ * Shows page-number buttons by default, or a compact dropdown when `compact` is true.
  */
-export var Pagination = /*#__PURE__*/forwardRef(function (_ref4, ref) {
-  var _ref4$displayItemsPer = _ref4.displayItemsPerPageSelector,
-    displayItemsPerPageSelector = _ref4$displayItemsPer === void 0 ? false : _ref4$displayItemsPer,
-    currentPage = _ref4.currentPage,
-    totalItems = _ref4.totalItems,
-    totalPages = _ref4.totalPages,
-    itemsPerPage = _ref4.itemsPerPage,
-    onPageChange = _ref4.onPageChange,
-    onItemsPerPageChange = _ref4.onItemsPerPageChange,
-    hasNextPage = _ref4.hasNextPage,
-    maxReachablePage = _ref4.maxReachablePage,
-    _ref4$variant = _ref4.variant,
-    variant = _ref4$variant === void 0 ? 'full' : _ref4$variant,
-    _ref4$pageSizeOptions = _ref4.pageSizeOptions,
-    pageSizeOptions = _ref4$pageSizeOptions === void 0 ? [20, 50, 100] : _ref4$pageSizeOptions,
-    className = _ref4.className,
-    sx = _ref4.sx,
-    children = _ref4.children,
-    rest = _objectWithoutPropertiesLoose(_ref4, _excluded);
+export var Pagination = /*#__PURE__*/forwardRef(function (_ref3, ref) {
+  var currentPage = _ref3.currentPage,
+    totalItems = _ref3.totalItems,
+    totalPages = _ref3.totalPages,
+    itemsPerPage = _ref3.itemsPerPage,
+    onPageChange = _ref3.onPageChange,
+    onItemsPerPageChange = _ref3.onItemsPerPageChange,
+    hasNextPage = _ref3.hasNextPage,
+    maxReachablePage = _ref3.maxReachablePage,
+    _ref3$compact = _ref3.compact,
+    compact = _ref3$compact === void 0 ? false : _ref3$compact,
+    variant = _ref3.variant,
+    displayItemsPerPageSelector = _ref3.displayItemsPerPageSelector,
+    pageSizeOptions = _ref3.pageSizeOptions,
+    className = _ref3.className,
+    sx = _ref3.sx,
+    children = _ref3.children,
+    rest = _objectWithoutPropertiesLoose(_ref3, _excluded);
+  var isCompact = compact || variant === 'compact';
   var resolvedTotalPages = totalPages != null ? totalPages : totalItems !== undefined ? Math.ceil(totalItems / itemsPerPage) : undefined;
   var isFirstPage = currentPage <= 1;
-  var isLastPage = resolvedTotalPages !== undefined ? currentPage >= resolvedTotalPages : hasNextPage === false;
-  return _jsxs("nav", _extends({
+  var isLastPage;
+  if (resolvedTotalPages !== undefined) {
+    isLastPage = currentPage >= resolvedTotalPages;
+  } else {
+    isLastPage = hasNextPage === false;
+  }
+  return _jsxs(PaginationLayout, _extends({
     ref: ref,
-    "aria-label": "Pagination",
-    className: classNames('vip-pagination-component', className),
-    sx: _extends({}, containerStyles, sx)
+    displayItemsPerPageSelector: displayItemsPerPageSelector,
+    itemsPerPage: itemsPerPage,
+    pageSizeOptions: pageSizeOptions,
+    onItemsPerPageChange: onItemsPerPageChange,
+    className: className,
+    sx: sx
   }, rest, {
     children: [_jsx(Box, {
-      children: displayItemsPerPageSelector && _jsx(ItemsPerPageSelect, {
-        itemsPerPage: itemsPerPage,
-        pageSizeOptions: pageSizeOptions,
-        onItemsPerPageChange: onItemsPerPageChange
-      })
-    }), _jsx(Box, {
       sx: {
         flex: 1
       },
       children: children
     }), _jsxs(Flex, {
       sx: navigationStyles,
-      children: [variant === 'full' && _jsx(PageNumbers, {
+      children: [isCompact ? _jsx(CompactPageSelector, {
         currentPage: currentPage,
         totalPages: resolvedTotalPages,
-        hasNextPage: hasNextPage,
         maxReachablePage: maxReachablePage,
         onPageChange: onPageChange
-      }), variant === 'compact' && _jsx(CompactPageSelector, {
+      }) : _jsx(PageNumbers, {
         currentPage: currentPage,
         totalPages: resolvedTotalPages,
+        hasNextPage: hasNextPage,
         maxReachablePage: maxReachablePage,
         onPageChange: onPageChange
       }), _jsx(Button, {

package/build/system/Pagination/Pagination.stories.js

@@ -1,5 +1,4 @@
-var _excluded = ["initialPage", "totalItems", "initialItemsPerPage", "displayItemsPerPageSelector"],
-  _excluded2 = ["initialPage", "initialItemsPerPage", "hasNextPage"];
+var _excluded = ["initialPage", "totalItems", "initialItemsPerPage", "displayItemsPerPageSelector", "compact"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 /** @jsxImportSource theme-ui */
@@ -20,7 +19,7 @@ var meta = {
   parameters: {
     docs: {
       description: {
-        component: "\nA Pagination component for navigating paged data.\n\n## Variants\n\n- **full** (default): Shows individual page number buttons with ellipsis for large page counts.\n- **compact**: Shows a dropdown page selector instead of individual page numbers.\n\n## Component Properties\n"
+        component: "\nA Pagination component for navigating paged data.\n\n## Modes\n\n- **Default**: Shows individual page number buttons with ellipsis for large page counts.\n- **Compact** (`compact` prop): Shows a dropdown page selector instead of individual page numbers.\n\nFor cursor-based pagination with only prev/next arrows, see `SimplePagination`.\n\n## Component Properties\n"
       }
     }
   }
@@ -35,6 +34,8 @@ var PaginationWithState = function PaginationWithState(_ref) {
     initialItemsPerPage = _ref$initialItemsPerP === void 0 ? 20 : _ref$initialItemsPerP,
     _ref$displayItemsPerP = _ref.displayItemsPerPageSelector,
     displayItemsPerPageSelector = _ref$displayItemsPerP === void 0 ? false : _ref$displayItemsPerP,
+    _ref$compact = _ref.compact,
+    compact = _ref$compact === void 0 ? false : _ref$compact,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   var _useState = useState(initialPage),
     currentPage = _useState[0],
@@ -49,6 +50,7 @@ var PaginationWithState = function PaginationWithState(_ref) {
     itemsPerPage: itemsPerPage,
     onPageChange: setCurrentPage,
     displayItemsPerPageSelector: displayItemsPerPageSelector,
+    compact: compact,
     onItemsPerPageChange: function onItemsPerPageChange(size) {
       setItemsPerPage(size);
       setCurrentPage(1);
@@ -78,14 +80,15 @@ var OpenEndedPaginationWithState = function OpenEndedPaginationWithState(_ref2)
     _ref2$initialItemsPer = _ref2.initialItemsPerPage,
     initialItemsPerPage = _ref2$initialItemsPer === void 0 ? 20 : _ref2$initialItemsPer,
     hasNextPage = _ref2.hasNextPage,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+    _ref2$compact = _ref2.compact,
+    compact = _ref2$compact === void 0 ? false : _ref2$compact;
   var _useState3 = useState(initialPage),
     currentPage = _useState3[0],
     setCurrentPage = _useState3[1];
   var _useState4 = useState(initialItemsPerPage),
     itemsPerPage = _useState4[0],
     setItemsPerPage = _useState4[1];
-  return _jsx(Pagination, _extends({
+  return _jsx(Pagination, {
     currentPage: currentPage,
     itemsPerPage: itemsPerPage,
     onPageChange: setCurrentPage,
@@ -93,8 +96,8 @@ var OpenEndedPaginationWithState = function OpenEndedPaginationWithState(_ref2)
       setItemsPerPage(size);
       setCurrentPage(1);
     },
-    hasNextPage: hasNextPage
-  }, props, {
+    hasNextPage: hasNextPage,
+    compact: compact,
     children: _jsxs(Flex, {
       sx: {
         justifyContent: 'center',
@@ -111,14 +114,13 @@ var OpenEndedPaginationWithState = function OpenEndedPaginationWithState(_ref2)
         children: ["Page ", currentPage, " (open-ended)"]
       })]
     })
-  }));
+  });
 };
 export var Primary = {
   args: {
     currentPage: 1,
     totalItems: 200,
     itemsPerPage: 20,
-    variant: 'full',
     displayItemsPerPageSelector: false
   }
 };
@@ -130,7 +132,7 @@ export var Default = {
 export var Compact = {
   render: function render() {
     return _jsx(PaginationWithState, {
-      variant: "compact"
+      compact: true
     });
   }
 };
@@ -230,7 +232,7 @@ export var OpenEnded = {
 export var OpenEndedCompact = {
   render: function render() {
     return _jsx(OpenEndedPaginationWithState, {
-      variant: "compact"
+      compact: true
     });
   }
 };

package/build/system/Pagination/Pagination.test.js

@@ -166,7 +166,7 @@ describe('<Pagination />', function () {
   });
   it('renders compact variant with Page text', function () {
     render(_jsx(Pagination, _extends({}, defaultProps, {
-      variant: "compact",
+      compact: true,
       currentPage: 3
     })));
     expect(screen.getByText('Page')).toBeInTheDocument();
@@ -205,7 +205,7 @@ describe('<Pagination />', function () {
       while (1) switch (_context5.n) {
         case 0:
           _render2 = render(_jsx(Pagination, _extends({}, defaultProps, {
-            variant: "compact",
+            compact: true,
             currentPage: 5
           }))), container = _render2.container;
           _t2 = expect;
@@ -370,7 +370,7 @@ describe('<Pagination /> open-ended mode', function () {
   })));
   it('renders compact variant with "Page" but without "of Y"', function () {
     render(_jsx(Pagination, _extends({}, openEndedProps, {
-      variant: "compact"
+      compact: true
     })));
     expect(screen.getByText('Page')).toBeInTheDocument();
     expect(screen.queryByText(/of \d+/)).not.toBeInTheDocument();
@@ -397,7 +397,7 @@ describe('<Pagination /> open-ended mode', function () {
       while (1) switch (_context9.n) {
         case 0:
           _render5 = render(_jsx(Pagination, _extends({}, openEndedProps, {
-            variant: "compact"
+            compact: true
           }))), container = _render5.container;
           _t5 = expect;
           _context9.n = 1;

package/build/system/Pagination/PaginationLayout.d.ts

@@ -0,0 +1,27 @@
+/** @jsxImportSource theme-ui */
+import { ThemeUIStyleObject } from 'theme-ui';
+export interface PaginationLayoutProps {
+    /** Whether to show the items-per-page dropdown selector.
+     * @default false
+     */
+    displayItemsPerPageSelector?: boolean;
+    /** Number of items displayed per page. */
+    itemsPerPage?: number;
+    /** Available page size options for the items-per-page selector.
+     * @default [20, 50, 100]
+     */
+    pageSizeOptions?: number[];
+    /** Callback fired when the user changes the items-per-page value. */
+    onItemsPerPageChange?: (itemsPerPage: number) => void;
+    /** Additional CSS class name for the pagination container. */
+    className?: string;
+    /** Theme UI style overrides. */
+    sx?: ThemeUIStyleObject;
+    /** Slot for variant-specific content (page numbers, arrows, etc.). */
+    children?: React.ReactNode;
+}
+/**
+ * Shared layout wrapper for pagination components.
+ * Renders the nav landmark, optional items-per-page selector, and variant content.
+ */
+export declare const PaginationLayout: import("react").ForwardRefExoticComponent<PaginationLayoutProps & import("react").RefAttributes<HTMLElement>>;

package/build/system/Pagination/PaginationLayout.js

@@ -0,0 +1,63 @@
+var _excluded = ["displayItemsPerPageSelector", "itemsPerPage", "pageSizeOptions", "onItemsPerPageChange", "className", "sx", "children"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+/** @jsxImportSource theme-ui */
+
+import classNames from 'classnames';
+import { forwardRef } from 'react';
+import { containerStyles } from './styles';
+import { Box } from '../Box';
+import { Select } from '../NewForm';
+import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
+var ItemsPerPageSelect = function ItemsPerPageSelect(_ref) {
+  var itemsPerPage = _ref.itemsPerPage,
+    pageSizeOptions = _ref.pageSizeOptions,
+    onItemsPerPageChange = _ref.onItemsPerPageChange;
+  return _jsx(Select, {
+    id: "items-per-page",
+    "aria-label": "Items per page",
+    separator: false,
+    value: itemsPerPage,
+    options: pageSizeOptions.map(function (size) {
+      return {
+        value: size,
+        label: size.toString() + " / page"
+      };
+    }),
+    onChange: function onChange(option) {
+      return onItemsPerPageChange(Number(option == null ? void 0 : option.value));
+    }
+  });
+};
+
+/**
+ * Shared layout wrapper for pagination components.
+ * Renders the nav landmark, optional items-per-page selector, and variant content.
+ */
+export var PaginationLayout = /*#__PURE__*/forwardRef(function (_ref2, ref) {
+  var _ref2$displayItemsPer = _ref2.displayItemsPerPageSelector,
+    displayItemsPerPageSelector = _ref2$displayItemsPer === void 0 ? false : _ref2$displayItemsPer,
+    itemsPerPage = _ref2.itemsPerPage,
+    _ref2$pageSizeOptions = _ref2.pageSizeOptions,
+    pageSizeOptions = _ref2$pageSizeOptions === void 0 ? [20, 50, 100] : _ref2$pageSizeOptions,
+    onItemsPerPageChange = _ref2.onItemsPerPageChange,
+    className = _ref2.className,
+    sx = _ref2.sx,
+    children = _ref2.children,
+    rest = _objectWithoutPropertiesLoose(_ref2, _excluded);
+  return _jsxs("nav", _extends({
+    ref: ref,
+    "aria-label": "Pagination",
+    className: classNames('vip-pagination-component', className),
+    sx: _extends({}, containerStyles, sx)
+  }, rest, {
+    children: [_jsx(Box, {
+      children: displayItemsPerPageSelector && itemsPerPage && onItemsPerPageChange && _jsx(ItemsPerPageSelect, {
+        itemsPerPage: itemsPerPage,
+        pageSizeOptions: pageSizeOptions,
+        onItemsPerPageChange: onItemsPerPageChange
+      })
+    }), children]
+  }));
+});
+PaginationLayout.displayName = 'PaginationLayout';

package/build/system/Pagination/SimplePagination.d.ts

@@ -0,0 +1,26 @@
+/** @jsxImportSource theme-ui */
+import { PaginationLayoutProps } from './PaginationLayout';
+/** A navigation parameter for SimplePagination. */
+export interface SimpleNavigationParam {
+    /** The query parameter name (e.g., 'after', 'before'). */
+    param: string;
+    /** The parameter token value. */
+    value: string;
+}
+export interface SimplePaginationProps extends PaginationLayoutProps {
+    /** Whether there is a next page available. */
+    hasNextPage?: boolean;
+    /** Whether there is a previous page available. */
+    hasPreviousPage?: boolean;
+    /** Navigation parameter for the next page. */
+    nextParam?: SimpleNavigationParam;
+    /** Navigation parameter for the previous page. */
+    previousParam?: SimpleNavigationParam;
+    /** Callback fired when the user navigates. Receives the param name and value. */
+    onNavigate: (param: string, value: string) => void;
+}
+/**
+ * A pagination control with only previous/next arrow buttons.
+ * Designed for cursor-based pagination APIs with custom param names (e.g., `after`/`before`).
+ */
+export declare const SimplePagination: import("react").ForwardRefExoticComponent<SimplePaginationProps & import("react").RefAttributes<HTMLElement>>;

package/build/system/Pagination/SimplePagination.js

@@ -0,0 +1,76 @@
+var _excluded = ["hasNextPage", "hasPreviousPage", "nextParam", "previousParam", "onNavigate", "displayItemsPerPageSelector", "itemsPerPage", "pageSizeOptions", "onItemsPerPageChange", "className", "sx", "children"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+/** @jsxImportSource theme-ui */
+
+import { forwardRef } from 'react';
+import { MdChevronLeft, MdChevronRight } from 'react-icons/md';
+import { Flex } from 'theme-ui';
+import { PaginationLayout } from './PaginationLayout';
+import { navigationStyles, arrowButtonStyles } from './styles';
+import { Box } from '../Box';
+import { Button } from '../Button';
+
+/** A navigation parameter for SimplePagination. */
+import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
+/**
+ * A pagination control with only previous/next arrow buttons.
+ * Designed for cursor-based pagination APIs with custom param names (e.g., `after`/`before`).
+ */
+export var SimplePagination = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var hasNextPage = _ref.hasNextPage,
+    hasPreviousPage = _ref.hasPreviousPage,
+    nextParam = _ref.nextParam,
+    previousParam = _ref.previousParam,
+    onNavigate = _ref.onNavigate,
+    displayItemsPerPageSelector = _ref.displayItemsPerPageSelector,
+    itemsPerPage = _ref.itemsPerPage,
+    pageSizeOptions = _ref.pageSizeOptions,
+    onItemsPerPageChange = _ref.onItemsPerPageChange,
+    className = _ref.className,
+    sx = _ref.sx,
+    children = _ref.children,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var isPrevDisabled = !hasPreviousPage || !(previousParam != null && previousParam.value);
+  var isNextDisabled = !hasNextPage || !(nextParam != null && nextParam.value);
+  return _jsxs(PaginationLayout, _extends({
+    ref: ref,
+    displayItemsPerPageSelector: displayItemsPerPageSelector,
+    itemsPerPage: itemsPerPage,
+    pageSizeOptions: pageSizeOptions,
+    onItemsPerPageChange: onItemsPerPageChange,
+    className: className,
+    sx: sx
+  }, rest, {
+    children: [_jsx(Box, {
+      sx: {
+        flex: 1
+      },
+      children: children
+    }), _jsxs(Flex, {
+      sx: navigationStyles,
+      children: [_jsx(Button, {
+        "aria-label": "Previous page",
+        disabled: isPrevDisabled,
+        onClick: function onClick() {
+          return previousParam && onNavigate(previousParam.param, previousParam.value);
+        },
+        sx: arrowButtonStyles,
+        children: _jsx(MdChevronLeft, {
+          size: 20
+        })
+      }), _jsx(Button, {
+        "aria-label": "Next page",
+        disabled: isNextDisabled,
+        onClick: function onClick() {
+          return nextParam && onNavigate(nextParam.param, nextParam.value);
+        },
+        sx: arrowButtonStyles,
+        children: _jsx(MdChevronRight, {
+          size: 20
+        })
+      })]
+    })]
+  }));
+});
+SimplePagination.displayName = 'SimplePagination';

package/build/system/Pagination/SimplePagination.stories.d.ts

@@ -0,0 +1,13 @@
+/** @jsxImportSource theme-ui */
+/**
+ * Internal dependencies
+ */
+import { SimplePagination } from './SimplePagination';
+import type { StoryObj, Meta } from '@storybook/react-vite';
+declare const meta: Meta<typeof SimplePagination>;
+export default meta;
+type Story = StoryObj<typeof SimplePagination>;
+export declare const Default: Story;
+export declare const FirstPage: Story;
+export declare const LastPage: Story;
+export declare const WithPageSize: Story;