@pingux/astro 2.119.0-alpha.2 → 2.119.0-alpha.4

package/lib/cjs/hooks/usePagination/usePagination.js

@@ -0,0 +1,178 @@
+"use strict";
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+var _parseInt2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/parse-int"));
+var _react = require("react");
+var _PaginationContext = require("../../context/PaginationContext");
+var _useProgressiveState5 = _interopRequireDefault(require("../useProgressiveState"));
+var _excluded = ["currentPageIndex", "nextButtonProps", "offsetCount", "offsetMenuProps", "offsetOptions", "onOffsetCountChange", "onPageIndexChange", "previousButtonProps", "totalCount"];
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context3 = ownKeys(Object(source), !0)).call(_context3, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+var getRangeString = function getRangeString(_ref) {
+  var _context, _context2;
+  var first = _ref.first,
+    last = _ref.last,
+    total = _ref.total;
+  return (0, _concat["default"])(_context = (0, _concat["default"])(_context2 = "".concat(first + 1, "-")).call(_context2, Math.min(last + 1, total), " of ")).call(_context, total);
+};
+var getNewIndexOnOffsetChange = function getNewIndexOnOffsetChange(_ref2) {
+  var first = _ref2.first,
+    newOffset = _ref2.newOffset;
+  var newLast = Math.floor(first / newOffset);
+  return newLast;
+};
+var defaultOffsetOptions = [10, 25, 50];
+var usePagination = function usePagination(props) {
+  var currentPageIndexProp = props.currentPageIndex,
+    nextButtonProps = props.nextButtonProps,
+    offsetCountProp = props.offsetCount,
+    offsetMenuProps = props.offsetMenuProps,
+    _props$offsetOptions = props.offsetOptions,
+    offsetOptions = _props$offsetOptions === void 0 ? defaultOffsetOptions : _props$offsetOptions,
+    onOffsetCountChange = props.onOffsetCountChange,
+    onPageIndexChange = props.onPageIndexChange,
+    previousButtonProps = props.previousButtonProps,
+    totalCount = props.totalCount,
+    others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var isMountedRef = (0, _react.useRef)(false);
+  var initialIndexValue = currentPageIndexProp || 0;
+  var initialOffsetValue = offsetCountProp || 10;
+  var _useProgressiveState = (0, _useProgressiveState5["default"])(currentPageIndexProp, initialIndexValue),
+    _useProgressiveState2 = (0, _slicedToArray2["default"])(_useProgressiveState, 2),
+    currentPageIndex = _useProgressiveState2[0],
+    setCurrentPageIndex = _useProgressiveState2[1];
+  var _useProgressiveState3 = (0, _useProgressiveState5["default"])(offsetCountProp, initialOffsetValue),
+    _useProgressiveState4 = (0, _slicedToArray2["default"])(_useProgressiveState3, 2),
+    offsetCount = _useProgressiveState4[0],
+    setOffsetCount = _useProgressiveState4[1];
+  var _useState = (0, _react.useState)(currentPageIndex),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    firstRenderedIndex = _useState2[0],
+    setFirstRenderedIndex = _useState2[1];
+  var _useState3 = (0, _react.useState)((currentPageIndex + 1) * offsetCount - 1),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    lastRenderedIndex = _useState4[0],
+    setLastRenderedIndex = _useState4[1];
+  (0, _react.useEffect)(function () {
+    var calculatedLastIndex = (currentPageIndex + 1) * offsetCount - 1;
+    setFirstRenderedIndex(currentPageIndex * offsetCount);
+    setLastRenderedIndex(Math.min(calculatedLastIndex, totalCount));
+  }, [currentPageIndex, offsetCount, totalCount]);
+  (0, _react.useEffect)(function () {
+    if (isMountedRef.current) {
+      var newIndex = getNewIndexOnOffsetChange({
+        newOffset: offsetCount,
+        first: firstRenderedIndex
+      });
+      setCurrentPageIndex(newIndex);
+      if (onPageIndexChange) {
+        onPageIndexChange(newIndex);
+      }
+    }
+  }, [offsetCount]);
+  (0, _react.useEffect)(function () {
+    isMountedRef.current = true;
+  }, []);
+  var lastIndex = Math.ceil(totalCount / offsetCount);
+  var isFirstIndex = currentPageIndex === 0;
+  var isLastIndex = lastIndex - 1 === currentPageIndex;
+  var popoverButtonString = (0, _react.useMemo)(function () {
+    return getRangeString({
+      first: firstRenderedIndex,
+      last: lastRenderedIndex,
+      total: totalCount
+    });
+  }, [firstRenderedIndex, lastRenderedIndex, totalCount]);
+  var setOffsetCountCallback = (0, _react.useCallback)(function (keys) {
+    if (keys !== null && keys !== void 0 && keys.currentKey) {
+      setOffsetCount((0, _parseInt2["default"])(keys.currentKey, 10));
+      if (onOffsetCountChange && isMountedRef.current) {
+        onOffsetCountChange((0, _parseInt2["default"])(keys.currentKey, 10));
+      }
+    }
+  }, [setOffsetCount, onOffsetCountChange, isMountedRef]);
+  var paginationState = (0, _react.useMemo)(function () {
+    return {
+      isFirstIndex: isFirstIndex,
+      isLastIndex: isLastIndex,
+      firstRenderedIndex: firstRenderedIndex,
+      lastRenderedIndex: lastRenderedIndex,
+      offsetCount: offsetCount,
+      totalCount: totalCount,
+      currentPageIndex: currentPageIndex,
+      popoverButtonString: popoverButtonString,
+      setOffsetCount: setOffsetCountCallback,
+      offsetOptions: offsetOptions
+    };
+  }, [isFirstIndex, isLastIndex, firstRenderedIndex, lastRenderedIndex, offsetCount, totalCount, currentPageIndex, popoverButtonString, setOffsetCountCallback, offsetOptions]);
+  var contextState = (0, _react.useMemo)(function () {
+    return {
+      firstRenderedIndex: firstRenderedIndex,
+      lastRenderedIndex: lastRenderedIndex,
+      offsetCount: offsetCount,
+      totalCount: totalCount,
+      currentPageIndex: currentPageIndex
+    };
+  }, [firstRenderedIndex, lastRenderedIndex, offsetCount, totalCount, currentPageIndex]);
+  var _useContext = (0, _react.useContext)(_PaginationContext.PaginationContext),
+    setPaginationState = _useContext.setPaginationState;
+  (0, _react.useEffect)(function () {
+    if (setPaginationState) {
+      setPaginationState(_objectSpread({}, contextState));
+    }
+  }, [contextState, setPaginationState]);
+  var nextIndex = function nextIndex() {
+    if (!isLastIndex) {
+      setCurrentPageIndex(currentPageIndex + 1);
+      if (onPageIndexChange) {
+        onPageIndexChange(currentPageIndex + 1);
+      }
+    }
+  };
+  var previousIndex = function previousIndex() {
+    if (!isFirstIndex) {
+      setCurrentPageIndex(currentPageIndex - 1);
+      if (onPageIndexChange) {
+        onPageIndexChange(currentPageIndex - 1);
+      }
+    }
+  };
+  var nextButtonPropsSpread = _objectSpread(_objectSpread({
+    'aria-label': 'Next Page'
+  }, nextButtonProps), {}, {
+    isDisabled: isLastIndex,
+    onPress: nextIndex
+  });
+  var previousButtonPropsSpread = _objectSpread(_objectSpread({
+    'aria-label': 'Previous Page'
+  }, previousButtonProps), {}, {
+    isDisabled: isFirstIndex,
+    onPress: previousIndex
+  });
+  var containerProps = _objectSpread({}, others);
+  return {
+    state: paginationState,
+    previousButtonProps: previousButtonPropsSpread,
+    nextButtonProps: nextButtonPropsSpread,
+    containerProps: containerProps,
+    offsetMenuProps: offsetMenuProps
+  };
+};
+var _default = usePagination;
+exports["default"] = _default;

package/lib/cjs/hooks/usePaginationState/index.d.ts

@@ -0,0 +1 @@
+export { default } from './usePaginationState';

package/lib/cjs/hooks/usePaginationState/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+_Object$defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _usePaginationState["default"];
+  }
+});
+var _usePaginationState = _interopRequireDefault(require("./usePaginationState"));

package/lib/cjs/hooks/usePaginationState/usePaginationState.d.ts

@@ -0,0 +1,4 @@
+declare const usePaginationState: () => {
+    paginationState: import("../../types/pagination").PaginationContextState;
+};
+export default usePaginationState;

package/lib/cjs/hooks/usePaginationState/usePaginationState.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = require("react");
+var _PaginationContext = require("../../context/PaginationContext");
+var usePaginationState = function usePaginationState() {
+  var _useContext = (0, _react.useContext)(_PaginationContext.PaginationContext),
+    paginationState = _useContext.paginationState;
+  return {
+    paginationState: paginationState
+  };
+};
+var _default = usePaginationState;
+exports["default"] = _default;

package/lib/cjs/index.d.ts

@@ -134,6 +134,8 @@ export * from './components/NumberField';
 export { default as OverlayPanel } from './components/OverlayPanel';
 export * from './components/OverlayPanel';
 export { default as PageHeader } from './components/PageHeader';
+export { default as Pagination } from './components/Pagination';
+export { default as PaginationProvider } from './components/Pagination/PaginationProvider';
 export { default as PanelHeader } from './components/PanelHeader';
 export { default as PanelHeaderCloseButton } from './components/PanelHeader/controls/PanelHeaderCloseButton';
 export { default as PanelHeaderMenu } from './components/PanelHeader/controls/PanelHeaderMenu';
@@ -206,6 +208,7 @@ export { default as TooltipTrigger } from './components/TooltipTrigger';
 export * from './components/TooltipTrigger';
 export { default as TreeView } from './components/TreeView';
 export * from './components/TreeView';
+export { PaginationContext } from './context/PaginationContext';
 export { default as NextGenDarkTheme } from './styles/themeOverrides/nextGenDarkMode';
 export { default as OnyxDarkTheme } from './styles/themeOverrides/nextGenDarkMode';
 export { default as NextGenTheme } from './styles/themes/next-gen';

package/lib/cjs/index.js

@@ -101,6 +101,8 @@ var _exportNames = {
   NumberField: true,
   OverlayPanel: true,
   PageHeader: true,
+  Pagination: true,
+  PaginationProvider: true,
   PanelHeader: true,
   PanelHeaderCloseButton: true,
   PanelHeaderMenu: true,
@@ -142,6 +144,7 @@ var _exportNames = {
   TimeZonePicker: true,
   TooltipTrigger: true,
   TreeView: true,
+  PaginationContext: true,
   NextGenDarkTheme: true,
   OnyxDarkTheme: true,
   NextGenTheme: true,
@@ -675,6 +678,24 @@ _Object$defineProperty(exports, "PageHeader", {
     return _PageHeader["default"];
   }
 });
+_Object$defineProperty(exports, "Pagination", {
+  enumerable: true,
+  get: function get() {
+    return _Pagination["default"];
+  }
+});
+_Object$defineProperty(exports, "PaginationContext", {
+  enumerable: true,
+  get: function get() {
+    return _PaginationContext.PaginationContext;
+  }
+});
+_Object$defineProperty(exports, "PaginationProvider", {
+  enumerable: true,
+  get: function get() {
+    return _PaginationProvider["default"];
+  }
+});
 _Object$defineProperty(exports, "PanelHeader", {
   enumerable: true,
   get: function get() {
@@ -1639,6 +1660,8 @@ _forEachInstanceProperty(_context47 = _Object$keys(_OverlayPanel)).call(_context
   });
 });
 var _PageHeader = _interopRequireDefault(require("./components/PageHeader"));
+var _Pagination = _interopRequireDefault(require("./components/Pagination"));
+var _PaginationProvider = _interopRequireDefault(require("./components/Pagination/PaginationProvider"));
 var _PanelHeader = _interopRequireDefault(require("./components/PanelHeader"));
 var _PanelHeaderCloseButton = _interopRequireDefault(require("./components/PanelHeader/controls/PanelHeaderCloseButton"));
 var _PanelHeaderMenu = _interopRequireDefault(require("./components/PanelHeader/controls/PanelHeaderMenu"));
@@ -2031,6 +2054,7 @@ _forEachInstanceProperty(_context79 = _Object$keys(_TreeView)).call(_context79,
     }
   });
 });
+var _PaginationContext = require("./context/PaginationContext");
 var _nextGenDarkMode = _interopRequireDefault(require("./styles/themeOverrides/nextGenDarkMode"));
 var _nextGen = _interopRequireDefault(require("./styles/themes/next-gen"));
 var _types = require("./types");

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/buttons.d.ts

@@ -8,6 +8,9 @@ declare const buttons: {
             color: string;
         };
     };
+    paginationMenu: {
+        color: string;
+    };
     neutral: {
         color: string;
     };

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/buttons.js

@@ -66,6 +66,9 @@ var buttons = {
       color: 'black'
     }
   },
+  paginationMenu: {
+    color: 'text.secondary'
+  },
   neutral: {
     color: 'gray-400'
   },

package/lib/cjs/styles/themes/next-gen/convertedComponentList.js

@@ -5,7 +5,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports.nextGenOnlyComponents = exports["default"] = exports.componentSpecificNextGenBlacklist = exports.astroBlacklistStory = void 0;
-var nextGenConvertedComponents = ['DataTable', 'Message', 'Button', 'Badge', 'IconButton', 'CheckboxField', 'Messages', 'PopoverMenu', 'TextField', 'PasswordField', 'SearchField', 'SelectField', 'Modal', 'RadioField', 'MultiValuesField', 'TextAreaField', 'RadioGroupField', 'Tabs', 'ProgressBar', 'NavBar', 'OverlayPanel', 'AstroProvider', 'ListView', 'NavigationHeader', 'Avatar', 'MultivaluesField', 'Text', 'Link', 'Card', 'IconWrapper', 'ComboBoxField', 'CodeView', 'Sticker Sheet', 'NextGen ListViewItem', 'Skeleton'];
+var nextGenConvertedComponents = ['DataTable', 'Message', 'Button', 'Badge', 'IconButton', 'CheckboxField', 'Messages', 'PopoverMenu', 'TextField', 'PasswordField', 'SearchField', 'SelectField', 'Modal', 'RadioField', 'MultiValuesField', 'TextAreaField', 'RadioGroupField', 'Tabs', 'ProgressBar', 'NavBar', 'OverlayPanel', 'AstroProvider', 'ListView', 'NavigationHeader', 'Avatar', 'MultivaluesField', 'Text', 'Link', 'Card', 'IconWrapper', 'ComboBoxField', 'CodeView', 'Sticker Sheet', 'NextGen ListViewItem', 'Skeleton', 'Pagination'];
 var componentSpecificNextGenBlacklist = {
   AstroProvider: ['Default', 'With Custom Theme Override'],
   Badge: ['Status Badge Variants', 'Badge With Left Slot And Icon', 'Callout Badges', 'Removable'],

package/lib/cjs/styles/themes/next-gen/next-gen.d.ts

@@ -1086,6 +1086,23 @@ declare const _default: {
             };
             transition: string;
         };
+        paginationMenu: {
+            px: string;
+            py: string;
+            color: string;
+            transition: string;
+            fontSize: string;
+            textDecoration: string;
+            '&.is-pressed': {
+                textDecoration: string;
+                outline: string;
+                color: string;
+            };
+            '&.is-focused': {
+                textDecoration: string;
+                outline: string;
+            };
+        };
     };
     forms: {
         input: import("theme-ui").ThemeUICSSObject;

package/lib/cjs/styles/themes/next-gen/variants/button.d.ts

@@ -853,5 +853,22 @@ declare const buttons: {
         };
         transition: string;
     };
+    paginationMenu: {
+        px: string;
+        py: string;
+        color: string;
+        transition: string;
+        fontSize: string;
+        textDecoration: string;
+        '&.is-pressed': {
+            textDecoration: string;
+            outline: string;
+            color: string;
+        };
+        '&.is-focused': {
+            textDecoration: string;
+            outline: string;
+        };
+    };
 };
 export default buttons;

package/lib/cjs/styles/themes/next-gen/variants/button.js

@@ -153,6 +153,11 @@ var link = {
     outline: 'none'
   }
 };
+var paginationMenu = _objectSpread(_objectSpread({}, link), {}, {
+  px: '0px',
+  py: '0px',
+  color: 'text.primary'
+});
 var withIcon = _objectSpread(_objectSpread({}, secondary), {}, {
   display: 'inline-flex'
 });
@@ -350,7 +355,8 @@ var buttons = {
   primaryWithIcon: primaryWithIcon,
   iconButtons: iconButtons,
   modalCloseButton: modalCloseButton,
-  aiChat: aiChat
+  aiChat: aiChat,
+  paginationMenu: paginationMenu
 };
 var _default = buttons;
 exports["default"] = _default;

package/lib/cjs/styles/variants/variants.js

@@ -45,6 +45,7 @@ var _Message = _interopRequireDefault(require("../../components/Messages/Message
 var _Modal = _interopRequireDefault(require("../../components/Modal/Modal.styles"));
 var _NavBar = _interopRequireDefault(require("../../components/NavBar/NavBar.styles"));
 var _OverlayPanel = _interopRequireDefault(require("../../components/OverlayPanel/OverlayPanel.styles"));
+var _Pagination = _interopRequireDefault(require("../../components/Pagination/Pagination.styles"));
 var _PanelHeader = _interopRequireDefault(require("../../components/PanelHeader/PanelHeader.styles"));
 var _PopoverMenu = _interopRequireDefault(require("../../components/PopoverMenu/PopoverMenu.styles"));
 var _ProgressBar = _interopRequireDefault(require("../../components/ProgressBar/ProgressBar.styles"));
@@ -96,8 +97,9 @@ var _default = _objectSpread({
   modal: _Modal["default"],
   navBar: _NavBar["default"],
   overlayPanel: _OverlayPanel["default"],
-  popoverMenu: _PopoverMenu["default"],
+  pagination: _Pagination["default"],
   panelHeader: _PanelHeader["default"],
+  popoverMenu: _PopoverMenu["default"],
   progressBar: _ProgressBar["default"],
   rockerButton: _RockerButton["default"],
   scrollBox: _ScrollBox["default"],

package/lib/cjs/types/pagination.d.ts

@@ -0,0 +1,46 @@
+import { ReactNode } from 'react';
+import { ButtonProps } from './button';
+import { PopoverMenuProps } from './popoverMenu';
+type PaginationState = {
+    currentPageIndex: number;
+    firstRenderedIndex: number;
+    isFirstIndex: boolean;
+    isLastIndex: boolean;
+    lastRenderedIndex: number;
+    offsetCount: number;
+    offsetOptions: number[];
+    popoverButtonString: string;
+    setOffsetCount: (keys?: object) => void;
+    totalCount: number;
+};
+export type PaginationContextState = {
+    firstRenderedIndex: number;
+    lastRenderedIndex: number;
+    offsetCount: number;
+    totalCount: number;
+    currentPageIndex: number;
+};
+export interface PaginationContextProps {
+    paginationState: PaginationContextState;
+    setPaginationState?: (paginationState: PaginationContextState) => void;
+}
+export interface PaginationProviderProps {
+    children: ReactNode;
+}
+export interface PaginationProps {
+    currentPageIndex?: number;
+    nextButtonProps?: ButtonProps;
+    offsetMenuProps?: object;
+    offsetCount?: number;
+    offsetOptions?: number[];
+    onOffsetCountChange?: (index: number) => void;
+    onPageIndexChange?: (index: number) => void;
+    previousButtonProps?: ButtonProps;
+    setCurrentPageIndex?: () => void;
+    totalCount: number;
+}
+export interface RangeSelectPopoverProps extends PopoverMenuProps {
+    buttonProps?: ButtonProps;
+    state: PaginationState;
+}
+export {};

package/lib/cjs/types/pagination.js

@@ -0,0 +1,6 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/components/Button/Buttons.styles.js

@@ -276,6 +276,9 @@ var exampleText = _objectSpread(_objectSpread({}, base), {}, {
   background: 'none',
   '&.is-focused': _objectSpread({}, defaultFocus)
 });
+var paginationMenu = _objectSpread(_objectSpread({}, link), {}, {
+  fontWeight: 0
+});
 export default {
   colorBlock: colorBlock,
   colorBlockPrimary: colorBlockPrimary,
@@ -296,6 +299,7 @@ export default {
   inlinePrimaryWithIcon: inlinePrimaryWithIcon,
   inlineWithIcon: inlineWithIcon,
   link: link,
+  paginationMenu: paginationMenu,
   primary: primary,
   primaryWithIcon: primaryWithIcon,
   quiet: quiet,

package/lib/components/ListView/ListView.stories.js

@@ -76,7 +76,7 @@ var items = [{
   name: 'Snake',
   id: '3'
 }];
-var animals = [{
+export var animals = [{
   name: 'Aardvark'
 }, {
   name: 'Albatross'

package/lib/components/Pagination/Pagination.js

@@ -0,0 +1,64 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["setOffsetCount", "offsetOptions"];
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import React, { forwardRef } from 'react';
+import ChevronLeftIcon from '@pingux/mdi-react/ChevronLeftIcon';
+import ChevronRightIcon from '@pingux/mdi-react/ChevronRightIcon';
+import { useLocalOrForwardRef } from '../../hooks';
+import usePagination from '../../hooks/usePagination';
+import { Box, Button, Icon, IconButton, Item, Menu, OverlayProvider, PopoverMenu } from '../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var RangeSelectPopover = /*#__PURE__*/forwardRef(function (props, ref) {
+  var state = props.state,
+    buttonProps = props.buttonProps;
+  var setOffsetCount = state.setOffsetCount,
+    offsetOptions = state.offsetOptions,
+    others = _objectWithoutProperties(state, _excluded);
+  var menuRef = useLocalOrForwardRef(ref);
+  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Box, {
+    sx: {
+      flexGrow: 1
+    }
+  }, ___EmotionJSX(PopoverMenu, {
+    ref: menuRef
+  }, ___EmotionJSX(Button, _extends({}, buttonProps, {
+    variant: "paginationMenu"
+  }), state.popoverButtonString), ___EmotionJSX(Menu, _extends({
+    onSelectionChange: setOffsetCount,
+    selectionMode: "single"
+  }, others), _mapInstanceProperty(offsetOptions).call(offsetOptions, function (option) {
+    return ___EmotionJSX(Item, {
+      key: option,
+      textValue: "".concat(option)
+    }, "Show", ' ', option, ' ', "Results");
+  })))));
+});
+var Pagination = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _usePagination = usePagination(props),
+    state = _usePagination.state,
+    previousButtonProps = _usePagination.previousButtonProps,
+    nextButtonProps = _usePagination.nextButtonProps,
+    containerProps = _usePagination.containerProps,
+    offsetMenuProps = _usePagination.offsetMenuProps;
+  var paginationRef = useLocalOrForwardRef(ref);
+  return ___EmotionJSX(Box, _extends({
+    isRow: true,
+    variant: "pagination.container"
+  }, containerProps, {
+    ref: paginationRef
+  }), ___EmotionJSX(Box, {
+    variant: "pagination.wrapper",
+    isRow: true
+  }, ___EmotionJSX(RangeSelectPopover, _extends({}, offsetMenuProps, {
+    state: state
+  })), ___EmotionJSX(Box, {
+    variant: "pagination.iconWrapper",
+    isRow: true
+  }, ___EmotionJSX(IconButton, previousButtonProps, ___EmotionJSX(Icon, {
+    icon: ChevronLeftIcon
+  })), ___EmotionJSX(IconButton, nextButtonProps, ___EmotionJSX(Icon, {
+    icon: ChevronRightIcon
+  })))));
+});
+export default Pagination;

package/lib/components/Pagination/Pagination.mdx

@@ -0,0 +1,68 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/Pagination/Pagination" />
+
+# Pagination
+
+The Pagination component allows users to navigate through large datasets by dividing them into smaller, more manageable pages. It provides controls for navigating between pages and selecting the number of items displayed per page.
+
+### Features
+
+- Customizable offset options to control the number of items displayed per page.
+- Next/Previous navigation buttons for seamless page transitions.
+- Works in both controlled and uncontrolled states.
+- Integrates with `PaginationContext` for managing state.
+
+### Required Components
+
+This component requires the following components:
+- `PaginationProvider`
+- `ListView` (optional for displaying paginated data)
+
+### Accessibility
+
+This component adheres to the [WCAG 2.1 - 2.4.4 Link Purpose (In Context)](https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-in-context.html) accessibility guidelines.
+
+#### Keyboard Navigation
+
+| Key           | Functions                          |
+|---------------|-----------------------------------|
+| Tab           | Moves focus between controls.    |
+| Enter         | Activates the focused control.   |
+
+#### Screen Readers
+
+This component uses the following attributes to assist screen readers:
+- **`aria-label`**: Provides an accessible name for the pagination controls.
+- **`aria-disabled`**: Indicates when navigation buttons are disabled.
+- **`aria-live`**: Updates screen readers with changes in pagination state.
+
+### Usage
+
+```tsx
+import { Pagination, PaginationProvider } from '@pingux/astro';
+
+<PaginationProvider>
+  <Pagination totalCount={250} />
+  <ListView
+    items={animals.slice(paginationState.firstRenderedIndex, paginationState.lastRenderedIndex).map(item => ({
+      name: item.name,
+      key: item.name,
+      id: item.name,
+    }))}
+  >
+    {(item) => (
+      <Item key={item.name}>
+        <ListViewItem
+          data={{
+            text: item.name,
+            icon: FormSelectIcon,
+          }}
+          iconProps={{
+            color: 'text.secondary',
+          }}
+        />
+      </Item>
+    )}
+  </ListView>
+</PaginationProvider>