@automattic/vip-design-system 2.16.1 → 2.17.1

package/build/system/NewForm/FormSelect.d.ts

@@ -17,6 +17,7 @@ interface FormSelectProps {
     options: Option[];
     required?: boolean;
     label?: string;
+    separator?: boolean;
     getOptionLabel?: (option: Option) => string;
     getOptionValue?: (option: Option) => string | number;
     onChange?: (option: Option | undefined, event: React.ChangeEvent<HTMLSelectElement>) => void;

package/build/system/NewForm/FormSelect.js

@@ -1,4 +1,4 @@
-var _excluded = ["disabled", "isInline", "placeholder", "forLabel", "options", "required", "label", "getOptionLabel", "getOptionValue", "onChange", "hasError", "errorMessage", "wrapperSx"],
+var _excluded = ["disabled", "isInline", "placeholder", "forLabel", "options", "required", "label", "getOptionLabel", "getOptionValue", "onChange", "hasError", "errorMessage", "wrapperSx", "separator"],
   _excluded2 = ["options"];
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -63,6 +63,8 @@ var FormSelect = /*#__PURE__*/React.forwardRef(function (_ref2, forwardRef) {
     hasError = _ref2.hasError,
     errorMessage = _ref2.errorMessage,
     wrapperSx = _ref2.wrapperSx,
+    _ref2$separator = _ref2.separator,
+    separator = _ref2$separator === void 0 ? true : _ref2$separator,
     props = _objectWithoutPropertiesLoose(_ref2, _excluded);
   if (isDev && options.length > MAX_SUGGESTED_OPTIONS) {
     // eslint-disable-next-line no-console
@@ -112,7 +114,9 @@ var FormSelect = /*#__PURE__*/React.forwardRef(function (_ref2, forwardRef) {
         ref: forwardRef,
         sx: _extends({
           cursor: disabled ? 'not-allowed' : 'pointer'
-        }, defaultStyles),
+        }, defaultStyles, !separator && {
+          paddingRight: 6
+        }),
         required: required,
         disabled: disabled,
         "aria-required": required,
@@ -127,7 +131,8 @@ var FormSelect = /*#__PURE__*/React.forwardRef(function (_ref2, forwardRef) {
           return groupOptions ? renderGroup(optionLabel(option), groupOptions) : renderOption(optionLabel(option), optionValue(option));
         })]
       })), _jsx(FormSelectArrow, {
-        iconSize: ICON_SIZE
+        iconSize: ICON_SIZE,
+        separator: separator
       })]
     }), hasError && errorMessage && _jsx(Validation, {
       isValid: false,

package/build/system/NewForm/FormSelectArrow.d.ts

@@ -5,6 +5,7 @@
 import React from 'react';
 interface FormSelectArrowProps {
     iconSize?: number;
+    separator?: boolean;
 }
 export declare const FormSelectArrow: React.ForwardRefExoticComponent<FormSelectArrowProps & React.RefAttributes<SVGSVGElement>>;
 export {};

package/build/system/NewForm/FormSelectArrow.js

@@ -1,4 +1,4 @@
-var _excluded = ["iconSize"];
+var _excluded = ["iconSize", "separator"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 /** @jsxImportSource theme-ui */
@@ -13,23 +13,26 @@ import { MdExpandMore } from 'react-icons/md';
  */
 import { baseControlBorderStyle as borderStyle } from '../Form/Input.styles';
 import { jsx as _jsx } from "theme-ui/jsx-runtime";
-var arrowStyles = {
-  position: 'absolute',
-  paddingLeft: 2,
-  borderLeftWidth: borderStyle.borderWidth,
-  borderLeftStyle: borderStyle.borderStyle,
-  borderLeftColor: borderStyle.borderColor,
-  right: 3,
-  top: '7px',
-  pointerEvents: 'none',
-  svg: {
-    fill: borderStyle.borderColor
-  }
-};
 export var FormSelectArrow = /*#__PURE__*/React.forwardRef(function (_ref, forwardRef) {
   var _ref$iconSize = _ref.iconSize,
     iconSize = _ref$iconSize === void 0 ? 24 : _ref$iconSize,
+    _ref$separator = _ref.separator,
+    separator = _ref$separator === void 0 ? true : _ref$separator,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var arrowStyles = _extends({
+    position: 'absolute',
+    right: 3,
+    top: '7px',
+    pointerEvents: 'none',
+    svg: {
+      fill: borderStyle.borderColor
+    }
+  }, separator && {
+    paddingLeft: 2,
+    borderLeftWidth: borderStyle.borderWidth,
+    borderLeftStyle: borderStyle.borderStyle,
+    borderLeftColor: borderStyle.borderColor
+  });
   return _jsx("div", {
     ref: forwardRef,
     children: _jsx(MdExpandMore, _extends({

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

@@ -0,0 +1,23 @@
+/** @jsxImportSource theme-ui */
+/// <reference types="react" />
+import { ThemeUIStyleObject } from 'theme-ui';
+export type PaginationVariant = 'full' | 'compact';
+export interface PaginationProps {
+    displayItemsPerPageSelector?: boolean;
+    currentPage: number;
+    totalItems?: number;
+    totalPages?: number;
+    itemsPerPage: number;
+    onPageChange: (page: number) => void;
+    onItemsPerPageChange: (itemsPerPage: number) => void;
+    hasNextPage?: boolean;
+    maxReachablePage?: number;
+    variant?: PaginationVariant;
+    pageSizeOptions?: number[];
+    className?: string;
+    sx?: ThemeUIStyleObject;
+    children?: React.ReactNode;
+}
+export type PageNumberItem = number | 'ellipsis';
+export declare function getPageNumbers(currentPage: number, totalPages?: number, hasNextPage?: boolean, maxReachablePage?: number): PageNumberItem[];
+export declare const Pagination: import("react").ForwardRefExoticComponent<PaginationProps & import("react").RefAttributes<HTMLElement>>;

package/build/system/Pagination/Pagination.js

@@ -0,0 +1,256 @@
+var _excluded = ["displayItemsPerPageSelector", "currentPage", "totalItems", "totalPages", "itemsPerPage", "onPageChange", "onItemsPerPageChange", "hasNextPage", "maxReachablePage", "variant", "pageSizeOptions", "className", "sx", "children"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+/** @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 { Box } from '../Box';
+import { Button } from '../Button';
+import { Select } from '../NewForm';
+import { Text } from '../Text';
+import { jsx as _jsx } from "theme-ui/jsx-runtime";
+import { Fragment as _Fragment } from "theme-ui/jsx-runtime";
+import { jsxs as _jsxs } from "theme-ui/jsx-runtime";
+function range(start, end) {
+  return Array.from({
+    length: end - start + 1
+  }, function (_, i) {
+    return start + i;
+  });
+}
+
+/** Total number of visible items (page numbers + ellipsis indicators) in the pagination bar. */
+var VISIBLE_PAGE_SLOTS = 8;
+
+/** When currentPage <= this value, the "near start" layout is used (no leading ellipsis). */
+var NEAR_START_THRESHOLD = 5;
+
+/** Pages shown before the current page in the middle layout. */
+var PAGES_BEFORE_CURRENT = 1;
+
+/** Pages shown after the current page in the bounded middle layout. */
+var PAGES_AFTER_CURRENT = 2;
+export function getPageNumbers(currentPage, totalPages, hasNextPage, maxReachablePage) {
+  var _last;
+  // Resolve the last known page
+  var last;
+  if (totalPages !== undefined) {
+    last = Math.max(1, Number(totalPages));
+  } else if (hasNextPage === false) {
+    last = currentPage;
+  }
+  if (last !== undefined && (!Number.isFinite(last) || last < 1)) {
+    return [];
+  }
+
+  // Effective end anchor: known last page, or capped reachable page
+  var end = (_last = last) != null ? _last : maxReachablePage !== undefined ? Math.max(currentPage, maxReachablePage) : undefined;
+
+  // Small page count — show all without ellipsis
+  if (end !== undefined && end <= VISIBLE_PAGE_SLOTS) {
+    return range(1, end);
+  }
+
+  // Near start
+  if (currentPage <= NEAR_START_THRESHOLD) {
+    if (end !== undefined) return [].concat(range(1, NEAR_START_THRESHOLD + 1), ['ellipsis', end]);
+    return [].concat(range(1, VISIBLE_PAGE_SLOTS - 1), ['ellipsis']);
+  }
+
+  // Near end (bounded only — open-ended has no "end zone")
+  if (last !== undefined && currentPage >= last - (NEAR_START_THRESHOLD - 1)) {
+    return [1, 'ellipsis'].concat(range(last - NEAR_START_THRESHOLD, last));
+  }
+
+  // Middle
+  if (end !== undefined) {
+    var rangeEnd = Math.min(currentPage + PAGES_AFTER_CURRENT, end);
+    var middle = range(currentPage - PAGES_BEFORE_CURRENT, rangeEnd);
+    if (rangeEnd >= end) return [1, 'ellipsis'].concat(middle);
+    return [1, 'ellipsis'].concat(middle, ['ellipsis', end]);
+  }
+
+  // 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 pages = getPageNumbers(currentPage, totalPages, hasNextPage, maxReachablePage);
+  return _jsx(_Fragment, {
+    children: pages.map(function (page, index) {
+      if (page === 'ellipsis') {
+        return _jsx(BiDotsHorizontalRounded, {}, "ellipsis-" + index);
+      }
+      var isActive = page === currentPage;
+      return _jsx(Button, {
+        type: "button",
+        onClick: function onClick() {
+          return onPageChange(page);
+        },
+        "aria-label": "Go to page " + page,
+        "aria-current": isActive ? 'page' : undefined,
+        sx: isActive ? activePageButtonStyles : pageButtonStyles,
+        children: page
+      }, page);
+    })
+  });
+};
+var CompactPageSelector = function CompactPageSelector(_ref3) {
+  var currentPage = _ref3.currentPage,
+    totalPages = _ref3.totalPages,
+    maxReachablePage = _ref3.maxReachablePage,
+    onPageChange = _ref3.onPageChange;
+  var isOpenEnded = totalPages === undefined;
+  var upperBound = isOpenEnded ? maxReachablePage != null ? maxReachablePage : currentPage + 1 : totalPages;
+  var pageOptions = Array.from({
+    length: upperBound
+  }, function (_, i) {
+    return i + 1;
+  });
+  return _jsxs(Flex, {
+    sx: compactTextStyles,
+    children: [_jsx(Text, {
+      as: "span",
+      sx: {
+        fontSize: 2,
+        color: 'heading',
+        mb: 0
+      },
+      children: "Page"
+    }), _jsx(Select, {
+      id: "page",
+      "aria-label": "Page",
+      separator: false,
+      value: currentPage,
+      onChange: function onChange(option) {
+        return onPageChange(Number(option == null ? void 0 : option.value));
+      },
+      options: pageOptions.map(function (page) {
+        return {
+          value: page,
+          label: page.toString()
+        };
+      }),
+      sx: {
+        minWidth: '70px',
+        mx: 1
+      }
+    }), !isOpenEnded && _jsxs(Text, {
+      as: "span",
+      sx: {
+        fontSize: 2,
+        color: 'heading',
+        mb: 0
+      },
+      children: ["of ", totalPages]
+    })]
+  });
+};
+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);
+  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({
+    ref: ref,
+    "aria-label": "Pagination",
+    className: classNames('vip-pagination-component', className),
+    sx: _extends({}, containerStyles, 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, {
+        currentPage: currentPage,
+        totalPages: resolvedTotalPages,
+        hasNextPage: hasNextPage,
+        maxReachablePage: maxReachablePage,
+        onPageChange: onPageChange
+      }), variant === 'compact' && _jsx(CompactPageSelector, {
+        currentPage: currentPage,
+        totalPages: resolvedTotalPages,
+        maxReachablePage: maxReachablePage,
+        onPageChange: onPageChange
+      }), _jsx(Button, {
+        "aria-label": "Previous page",
+        disabled: isFirstPage,
+        onClick: function onClick() {
+          return onPageChange(currentPage - 1);
+        },
+        sx: _extends({}, arrowButtonStyles, {
+          ml: 4
+        }),
+        children: _jsx(MdChevronLeft, {
+          size: 20
+        })
+      }), _jsx(Button, {
+        "aria-label": "Next page",
+        disabled: isLastPage,
+        onClick: function onClick() {
+          return onPageChange(currentPage + 1);
+        },
+        sx: arrowButtonStyles,
+        children: _jsx(MdChevronRight, {
+          size: 20
+        })
+      })]
+    })]
+  }));
+});
+Pagination.displayName = 'Pagination';

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

@@ -0,0 +1,19 @@
+/** @jsxImportSource theme-ui */
+/**
+ * Internal dependencies
+ */
+import { Pagination } from './Pagination';
+import type { StoryObj, Meta } from '@storybook/react';
+declare const meta: Meta<typeof Pagination>;
+export default meta;
+type Story = StoryObj<typeof Pagination>;
+export declare const Default: Story;
+export declare const Compact: Story;
+export declare const FewPages: Story;
+export declare const MiddlePage: Story;
+export declare const CustomPageSizes: Story;
+export declare const WithItemsPerPageSelector: Story;
+export declare const OpenEndedCursorBased: Story;
+export declare const OpenEnded: Story;
+export declare const OpenEndedCompact: Story;
+export declare const OpenEndedLastPage: Story;

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

@@ -0,0 +1,236 @@
+var _excluded = ["initialPage", "totalItems", "initialItemsPerPage", "displayItemsPerPageSelector"],
+  _excluded2 = ["initialPage", "initialItemsPerPage", "hasNextPage"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+/** @jsxImportSource theme-ui */
+
+import { useState } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import { Pagination } from './Pagination';
+import { Badge } from '../Badge';
+import { Flex } from '../Flex';
+import { Text } from '../Text';
+import { jsx as _jsx } from "theme-ui/jsx-runtime";
+import { jsxs as _jsxs } from "theme-ui/jsx-runtime";
+var meta = {
+  title: 'Pagination',
+  component: Pagination,
+  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"
+      }
+    }
+  }
+};
+export default meta;
+var PaginationWithState = function PaginationWithState(_ref) {
+  var _ref$initialPage = _ref.initialPage,
+    initialPage = _ref$initialPage === void 0 ? 1 : _ref$initialPage,
+    _ref$totalItems = _ref.totalItems,
+    totalItems = _ref$totalItems === void 0 ? 200 : _ref$totalItems,
+    _ref$initialItemsPerP = _ref.initialItemsPerPage,
+    initialItemsPerPage = _ref$initialItemsPerP === void 0 ? 20 : _ref$initialItemsPerP,
+    _ref$displayItemsPerP = _ref.displayItemsPerPageSelector,
+    displayItemsPerPageSelector = _ref$displayItemsPerP === void 0 ? false : _ref$displayItemsPerP,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var _useState = useState(initialPage),
+    currentPage = _useState[0],
+    setCurrentPage = _useState[1];
+  var _useState2 = useState(initialItemsPerPage),
+    itemsPerPage = _useState2[0],
+    setItemsPerPage = _useState2[1];
+  var totalPages = Math.ceil(totalItems / itemsPerPage);
+  return _jsx(Pagination, _extends({
+    currentPage: currentPage,
+    totalItems: totalItems,
+    itemsPerPage: itemsPerPage,
+    onPageChange: setCurrentPage,
+    displayItemsPerPageSelector: displayItemsPerPageSelector,
+    onItemsPerPageChange: function onItemsPerPageChange(size) {
+      setItemsPerPage(size);
+      setCurrentPage(1);
+    }
+  }, props, {
+    children: _jsxs(Flex, {
+      sx: {
+        justifyContent: 'center',
+        alignItems: 'center',
+        verticalAlign: 'middle'
+      },
+      children: [_jsx(Badge, {
+        variant: "gold",
+        sx: {
+          mr: 2
+        },
+        children: "DEBUG"
+      }), _jsxs(Text, {
+        children: ["Page ", currentPage, " of ", totalPages]
+      })]
+    })
+  }));
+};
+var OpenEndedPaginationWithState = function OpenEndedPaginationWithState(_ref2) {
+  var _ref2$initialPage = _ref2.initialPage,
+    initialPage = _ref2$initialPage === void 0 ? 1 : _ref2$initialPage,
+    _ref2$initialItemsPer = _ref2.initialItemsPerPage,
+    initialItemsPerPage = _ref2$initialItemsPer === void 0 ? 20 : _ref2$initialItemsPer,
+    hasNextPage = _ref2.hasNextPage,
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+  var _useState3 = useState(initialPage),
+    currentPage = _useState3[0],
+    setCurrentPage = _useState3[1];
+  var _useState4 = useState(initialItemsPerPage),
+    itemsPerPage = _useState4[0],
+    setItemsPerPage = _useState4[1];
+  return _jsx(Pagination, _extends({
+    currentPage: currentPage,
+    itemsPerPage: itemsPerPage,
+    onPageChange: setCurrentPage,
+    onItemsPerPageChange: function onItemsPerPageChange(size) {
+      setItemsPerPage(size);
+      setCurrentPage(1);
+    },
+    hasNextPage: hasNextPage
+  }, props, {
+    children: _jsxs(Flex, {
+      sx: {
+        justifyContent: 'center',
+        alignItems: 'center',
+        verticalAlign: 'middle'
+      },
+      children: [_jsx(Badge, {
+        variant: "gold",
+        sx: {
+          mr: 2
+        },
+        children: "DEBUG"
+      }), _jsxs(Text, {
+        children: ["Page ", currentPage, " (open-ended)"]
+      })]
+    })
+  }));
+};
+export var Default = {
+  render: function render() {
+    return _jsx(PaginationWithState, {});
+  }
+};
+export var Compact = {
+  render: function render() {
+    return _jsx(PaginationWithState, {
+      variant: "compact"
+    });
+  }
+};
+export var FewPages = {
+  render: function render() {
+    return _jsx(PaginationWithState, {
+      totalItems: 200,
+      initialItemsPerPage: 10
+    });
+  }
+};
+export var MiddlePage = {
+  render: function render() {
+    return _jsx(PaginationWithState, {
+      totalItems: 500,
+      initialItemsPerPage: 10,
+      initialPage: 25
+    });
+  }
+};
+export var CustomPageSizes = {
+  render: function render() {
+    return _jsx(PaginationWithState, {
+      totalItems: 1000,
+      initialItemsPerPage: 25,
+      pageSizeOptions: [25, 50, 100, 250]
+    });
+  }
+};
+export var WithItemsPerPageSelector = {
+  render: function render() {
+    return _jsx(PaginationWithState, {
+      totalItems: 100,
+      initialItemsPerPage: 25,
+      displayItemsPerPageSelector: true
+    });
+  }
+};
+var CursorBasedPaginationWithState = function CursorBasedPaginationWithState() {
+  var _useState5 = useState(1),
+    currentPage = _useState5[0],
+    setCurrentPage = _useState5[1];
+  var _useState6 = useState(20),
+    itemsPerPage = _useState6[0],
+    setItemsPerPage = _useState6[1];
+  var _useState7 = useState(1),
+    maxVisited = _useState7[0],
+    setMaxVisited = _useState7[1];
+  var handlePageChange = function handlePageChange(page) {
+    setCurrentPage(page);
+    setMaxVisited(function (prev) {
+      return Math.max(prev, page);
+    });
+  };
+  var hasNextPage = true; // Simulate always having a next page
+  var maxReachablePage = hasNextPage ? maxVisited + 1 : maxVisited;
+  return _jsx(Pagination, {
+    currentPage: currentPage,
+    itemsPerPage: itemsPerPage,
+    onPageChange: handlePageChange,
+    onItemsPerPageChange: function onItemsPerPageChange(size) {
+      setItemsPerPage(size);
+      setCurrentPage(1);
+      setMaxVisited(1);
+    },
+    hasNextPage: hasNextPage,
+    maxReachablePage: maxReachablePage,
+    displayItemsPerPageSelector: true,
+    children: _jsxs(Flex, {
+      sx: {
+        justifyContent: 'center',
+        alignItems: 'center',
+        verticalAlign: 'middle'
+      },
+      children: [_jsx(Badge, {
+        variant: "gold",
+        sx: {
+          mr: 2
+        },
+        children: "DEBUG"
+      }), _jsxs(Text, {
+        children: ["Page ", currentPage, " \u2014 max reachable: ", maxReachablePage]
+      })]
+    })
+  });
+};
+export var OpenEndedCursorBased = {
+  render: function render() {
+    return _jsx(CursorBasedPaginationWithState, {});
+  }
+};
+export var OpenEnded = {
+  render: function render() {
+    return _jsx(OpenEndedPaginationWithState, {});
+  }
+};
+export var OpenEndedCompact = {
+  render: function render() {
+    return _jsx(OpenEndedPaginationWithState, {
+      variant: "compact"
+    });
+  }
+};
+export var OpenEndedLastPage = {
+  render: function render() {
+    return _jsx(OpenEndedPaginationWithState, {
+      hasNextPage: false,
+      initialPage: 15
+    });
+  }
+};

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

@@ -0,0 +1,2 @@
+/** @jsxImportSource theme-ui */
+import '@testing-library/jest-dom';