@via-profit/ui-kit 0.5.0 → 0.7.0

package/Modal/MessageBox/index.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -45,9 +55,8 @@ const MessageBoxFooter_1 = __importDefault(require("./MessageBoxFooter"));
 const MessageBoxHeader_1 = __importDefault(require("./MessageBoxHeader"));
 const ModalOverlay_1 = __importDefault(require("../BaseModal/ModalOverlay"));
 const useDialogID_1 = __importDefault(require("../BaseModal/useDialogID"));
-const useThemeProps_1 = __importDefault(require("../../ThemeProvider/useThemeProps"));
 const MessageBox = props => {
-    const _a = (0, useThemeProps_1.default)('MessageBox', props), { header, children, onRequestClose, overrides, okButtonLabel, isOpen } = _a, otherProps = __rest(_a, ["header", "children", "onRequestClose", "overrides", "okButtonLabel", "isOpen"]);
+    const { header, children, onRequestClose, overrides, okButtonLabel, isOpen } = props, otherProps = __rest(props, ["header", "children", "onRequestClose", "overrides", "okButtonLabel", "isOpen"]);
     const dialogID = (0, useDialogID_1.default)('dialog-message');
     const buttonRef = React.useRef(null);
     React.useEffect(() => {

package/Modal/index.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };

package/Pagination/PaginationContainer.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export type PaginationSize = 'medium' | 'small';
+export type PaginationContainerProps = React.HTMLAttributes<HTMLElement> & {
+    readonly size?: PaginationSize;
+};
+declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
+    readonly size?: PaginationSize;
+} & React.RefAttributes<HTMLElement>>;
+export default _default;

package/Pagination/PaginationContainer.js

@@ -0,0 +1,34 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+/**
+ * The sizes of the buttons are in `em`, so the small variant only changes the font size.
+ * The height of the buttons is the height of the controls: `theme.padding.control`
+ */
+const StyledNav = styled_1.default.nav `
+  display: inline-flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.5em;
+  font-size: ${({ $size }) => ($size === 'small' ? '0.8em' : '1em')};
+`;
+const PaginationContainer = (props, ref) => {
+    const { size = 'medium', children } = props, nativeProps = __rest(props, ["size", "children"]);
+    return (react_1.default.createElement(StyledNav, Object.assign({ "$size": size }, nativeProps, { ref: ref }), children));
+};
+exports.default = react_1.default.forwardRef(PaginationContainer);

package/Pagination/PaginationGap.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export type PaginationGapProps = React.HTMLAttributes<HTMLSpanElement>;
+declare const _default: React.ForwardRefExoticComponent<PaginationGapProps & React.RefAttributes<HTMLSpanElement>>;
+export default _default;

package/Pagination/PaginationGap.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const tokens_1 = require("../ThemeProvider/tokens");
+const StyledGap = styled_1.default.span `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.6em;
+  height: ${({ theme }) => (0, tokens_1.controlHeight)(theme)};
+  color: ${({ theme }) => theme.color.textSecondary.toString()};
+  user-select: none;
+`;
+/**
+ * The skipped range of the pages
+ */
+const PaginationGap = (props, ref) => (react_1.default.createElement(StyledGap, Object.assign({ "aria-hidden": true }, props, { ref: ref }), "\u2026"));
+exports.default = react_1.default.forwardRef(PaginationGap);

package/Pagination/PaginationIcons.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export type PaginationIconProps = React.SVGAttributes<SVGSVGElement>;
+export declare const IconPrevious: React.ForwardRefExoticComponent<PaginationIconProps & React.RefAttributes<SVGSVGElement>>;
+export declare const IconNext: React.ForwardRefExoticComponent<PaginationIconProps & React.RefAttributes<SVGSVGElement>>;
+export declare const IconFirst: React.ForwardRefExoticComponent<PaginationIconProps & React.RefAttributes<SVGSVGElement>>;
+export declare const IconLast: React.ForwardRefExoticComponent<PaginationIconProps & React.RefAttributes<SVGSVGElement>>;

package/Pagination/PaginationIcons.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconLast = exports.IconFirst = exports.IconNext = exports.IconPrevious = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const Path = styled_1.default.path `
+  fill: currentColor;
+`;
+const createIcon = (path, displayName) => {
+    const Icon = (props, ref) => (react_1.default.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", "aria-hidden": true }, props, { ref: ref }),
+        react_1.default.createElement(Path, { d: path })));
+    Icon.displayName = displayName;
+    return react_1.default.forwardRef(Icon);
+};
+exports.IconPrevious = createIcon('M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z', 'IconPrevious');
+exports.IconNext = createIcon('M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z', 'IconNext');
+exports.IconFirst = createIcon('M18.41,16.59L13.82,12L18.41,7.41L17,6L11,12L17,18L18.41,16.59M12.41,16.59L7.82,12L12.41,7.41L11,6L5,12L11,18L12.41,16.59Z', 'IconFirst');
+exports.IconLast = createIcon('M5.59,7.41L10.18,12L5.59,16.59L7,18L13,12L7,6L5.59,7.41M11.59,7.41L16.18,12L11.59,16.59L13,18L19,12L13,6L11.59,7.41Z', 'IconLast');

package/Pagination/PaginationItem.d.ts

@@ -0,0 +1,44 @@
+import React from 'react';
+import { ButtonProps } from '../Button';
+import type { PaginationItemKind } from './usePagination';
+export type PaginationItemProps = ButtonProps & {
+    /**
+     * What the button does: opens a page or goes to the first, previous, next or last page
+     */
+    readonly kind: PaginationItemKind;
+    /**
+     * The page the button opens, starts from 1
+     */
+    readonly page: number;
+    /**
+     * The button of the current page
+     */
+    readonly selected?: boolean;
+    /**
+     * The not selected page in the `standard` variant: a soft fill instead of the surface color,
+     * so the buttons are visible on the surface
+     */
+    readonly soft?: boolean;
+};
+declare const _default: React.ForwardRefExoticComponent<import("../Button/ButtonBase").ButtonBaseProps & {
+    readonly variant?: "standard" | "outlined" | "plain";
+} & {
+    /**
+     * What the button does: opens a page or goes to the first, previous, next or last page
+     */
+    readonly kind: PaginationItemKind;
+    /**
+     * The page the button opens, starts from 1
+     */
+    readonly page: number;
+    /**
+     * The button of the current page
+     */
+    readonly selected?: boolean;
+    /**
+     * The not selected page in the `standard` variant: a soft fill instead of the surface color,
+     * so the buttons are visible on the surface
+     */
+    readonly soft?: boolean;
+} & React.RefAttributes<HTMLButtonElement>>;
+export default _default;

package/Pagination/PaginationItem.js

@@ -0,0 +1,59 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_2 = require("@emotion/react");
+const Button_1 = __importDefault(require("../Button"));
+const tokens_1 = require("../ThemeProvider/tokens");
+/**
+ * `&&` raises the specificity above the own styles of the button.
+ * The button is a square of the height of the controls, the numbers of several digits make it wider
+ */
+const StyledButton = (0, styled_1.default)(Button_1.default) `
+  && {
+    box-sizing: border-box;
+    min-width: ${({ theme }) => (0, tokens_1.controlHeight)(theme)};
+    height: ${({ theme }) => (0, tokens_1.controlHeight)(theme)};
+    padding: 0 0.6em;
+    justify-content: center;
+    font-variant-numeric: tabular-nums;
+  }
+
+  ${({ $soft, disabled, theme }) => $soft &&
+    (0, react_2.css) `
+      && {
+        background-color: ${theme.color.textPrimary.alpha(0.06).toString()};
+        color: ${disabled
+        ? theme.color.textPrimary.alpha(0.3).toString()
+        : theme.color.textPrimary.toString()};
+      }
+
+      &&:hover {
+        background-color: ${disabled
+        ? theme.color.textPrimary.alpha(0.06).toString()
+        : theme.color.textPrimary.alpha(0.1).toString()};
+      }
+    `}
+`;
+/**
+ * The button of the page or of the navigation (first, previous, next, last)
+ */
+const PaginationItem = (props, ref) => {
+    const { selected, soft, kind, page } = props, buttonProps = __rest(props, ["selected", "soft", "kind", "page"]);
+    return (react_1.default.createElement(StyledButton, Object.assign({ type: "button", "aria-current": selected ? 'page' : undefined, "data-kind": kind, "$soft": Boolean(soft) }, buttonProps, { ref: ref })));
+};
+exports.default = react_1.default.forwardRef(PaginationItem);

package/Pagination/getPaginationItems.d.ts

@@ -0,0 +1,22 @@
+export type PaginationItemType = 'page' | 'gap-start' | 'gap-end';
+export type PaginationItemData = {
+    readonly type: 'page';
+    readonly page: number;
+} | {
+    readonly type: 'gap-start' | 'gap-end';
+};
+/**
+ * Returns the items of the pagination: the boundary pages, the current page with the siblings
+ * and the gaps instead of the skipped ranges. The pages start from 1.
+ * The count of the items does not depend on the current page, so the buttons do not jump
+ *
+ * @example getPaginationItems({ count: 10, page: 5, siblings: 1, boundaries: 1 })
+ * // 1 … 4 5 6 … 10
+ */
+declare const getPaginationItems: (params: {
+    readonly count: number;
+    readonly page: number;
+    readonly siblings: number;
+    readonly boundaries: number;
+}) => PaginationItemData[];
+export default getPaginationItems;

package/Pagination/getPaginationItems.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const range = (start, end) => Array.from({ length: Math.max(end - start + 1, 0) }, (_, index) => start + index);
+/**
+ * Returns the items of the pagination: the boundary pages, the current page with the siblings
+ * and the gaps instead of the skipped ranges. The pages start from 1.
+ * The count of the items does not depend on the current page, so the buttons do not jump
+ *
+ * @example getPaginationItems({ count: 10, page: 5, siblings: 1, boundaries: 1 })
+ * // 1 … 4 5 6 … 10
+ */
+const getPaginationItems = (params) => {
+    const { count, siblings, boundaries } = params;
+    const page = Math.min(Math.max(params.page, 1), Math.max(count, 1));
+    // boundaries on both sides + current + siblings + two gaps
+    if (count <= boundaries * 2 + siblings * 2 + 3) {
+        return range(1, count).map(item => ({ type: 'page', page: item }));
+    }
+    const startPages = range(1, boundaries);
+    const endPages = range(count - boundaries + 1, count);
+    // the window of the siblings keeps its size near the start and the end
+    const siblingsStart = Math.max(Math.min(page - siblings, count - boundaries - siblings * 2 - 1), boundaries + 2);
+    const siblingsEnd = Math.min(Math.max(page + siblings, boundaries + siblings * 2 + 2), count - boundaries - 1);
+    const items = startPages.map(item => ({ type: 'page', page: item }));
+    // a gap of one page is shown as the page itself
+    if (siblingsStart > boundaries + 2) {
+        items.push({ type: 'gap-start' });
+    }
+    else if (boundaries + 1 < count - boundaries) {
+        items.push({ type: 'page', page: boundaries + 1 });
+    }
+    range(siblingsStart, siblingsEnd).forEach(item => items.push({ type: 'page', page: item }));
+    if (siblingsEnd < count - boundaries - 1) {
+        items.push({ type: 'gap-end' });
+    }
+    else if (count - boundaries > boundaries) {
+        items.push({ type: 'page', page: count - boundaries });
+    }
+    endPages.forEach(item => items.push({ type: 'page', page: item }));
+    return items;
+};
+exports.default = getPaginationItems;

package/Pagination/index.d.ts

@@ -0,0 +1,104 @@
+import React from 'react';
+import type { ButtonProps } from '../Button';
+import { PaginationContainerProps, PaginationSize } from './PaginationContainer';
+import { PaginationItemProps } from './PaginationItem';
+import { PaginationGapProps } from './PaginationGap';
+import usePagination, { UsePaginationParams, PaginationItemKind } from './usePagination';
+import getPaginationItems from './getPaginationItems';
+export * from './usePagination';
+export * from './PaginationContainer';
+export * from './PaginationItem';
+export * from './PaginationGap';
+export * from './PaginationIcons';
+export * from './getPaginationItems';
+export { usePagination, getPaginationItems };
+type ButtonVariant = NonNullable<ButtonProps['variant']>;
+export type PaginationColor = 'default' | 'primary' | 'secondary' | string;
+export type PaginationProps = Omit<React.HTMLAttributes<HTMLElement>, 'onChange' | 'color'> & UsePaginationParams & {
+    /**
+     * The variant of the not selected page buttons\
+     * **Default:** `standard`
+     */
+    readonly variant?: ButtonVariant;
+    /**
+     * The color of the selected page button\
+     * **Default:** `primary`
+     */
+    readonly color?: PaginationColor;
+    /**
+     * The variant of the navigation buttons (first, previous, next, last)\
+     * **Default:** `outlined`
+     */
+    readonly navigationVariant?: ButtonVariant;
+    /**
+     * The color of the navigation buttons\
+     * **Default:** the `color` for the `standard` navigation variant, otherwise `default`
+     */
+    readonly navigationColor?: PaginationColor;
+    /**
+     * `small` — the compact variant\
+     * **Default:** `medium`
+     */
+    readonly size?: PaginationSize;
+    /**
+     * Returns the label of the button for the screen readers\
+     * **Default:** the english labels, e.g. «Go to page 3»
+     */
+    readonly getItemLabel?: (kind: PaginationItemKind, page: number, selected: boolean) => string;
+    /**
+     * Overridable components map
+     */
+    readonly overrides?: PaginationOverrides;
+};
+export interface PaginationOverrides {
+    /**
+     * The `<nav>` around the buttons
+     */
+    readonly Container?: React.ComponentType<PaginationContainerProps & React.RefAttributes<HTMLElement>>;
+    /**
+     * The button of the page and the navigation buttons. Gets the `kind` and the `page` it opens:
+     * e.g. render a link of your router instead of the button
+     */
+    readonly Item?: React.ComponentType<PaginationItemProps & React.RefAttributes<HTMLButtonElement>>;
+    /**
+     * The skipped range of the pages, `…`
+     */
+    readonly Gap?: React.ComponentType<PaginationGapProps & React.RefAttributes<HTMLSpanElement>>;
+}
+declare const _default: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLElement>, "color" | "onChange"> & UsePaginationParams & {
+    /**
+     * The variant of the not selected page buttons\
+     * **Default:** `standard`
+     */
+    readonly variant?: ButtonVariant;
+    /**
+     * The color of the selected page button\
+     * **Default:** `primary`
+     */
+    readonly color?: PaginationColor;
+    /**
+     * The variant of the navigation buttons (first, previous, next, last)\
+     * **Default:** `outlined`
+     */
+    readonly navigationVariant?: ButtonVariant;
+    /**
+     * The color of the navigation buttons\
+     * **Default:** the `color` for the `standard` navigation variant, otherwise `default`
+     */
+    readonly navigationColor?: PaginationColor;
+    /**
+     * `small` — the compact variant\
+     * **Default:** `medium`
+     */
+    readonly size?: PaginationSize;
+    /**
+     * Returns the label of the button for the screen readers\
+     * **Default:** the english labels, e.g. «Go to page 3»
+     */
+    readonly getItemLabel?: (kind: PaginationItemKind, page: number, selected: boolean) => string;
+    /**
+     * Overridable components map
+     */
+    readonly overrides?: PaginationOverrides;
+} & React.RefAttributes<HTMLElement>>;
+export default _default;

package/Pagination/index.js

@@ -0,0 +1,98 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getPaginationItems = exports.usePagination = void 0;
+const react_1 = __importDefault(require("react"));
+const PaginationContainer_1 = __importDefault(require("./PaginationContainer"));
+const PaginationItem_1 = __importDefault(require("./PaginationItem"));
+const PaginationGap_1 = __importDefault(require("./PaginationGap"));
+const PaginationIcons_1 = require("./PaginationIcons");
+const usePagination_1 = __importDefault(require("./usePagination"));
+exports.usePagination = usePagination_1.default;
+const getPaginationItems_1 = __importDefault(require("./getPaginationItems"));
+exports.getPaginationItems = getPaginationItems_1.default;
+__exportStar(require("./usePagination"), exports);
+__exportStar(require("./PaginationContainer"), exports);
+__exportStar(require("./PaginationItem"), exports);
+__exportStar(require("./PaginationGap"), exports);
+__exportStar(require("./PaginationIcons"), exports);
+__exportStar(require("./getPaginationItems"), exports);
+const defaultGetItemLabel = (kind, page, selected) => {
+    switch (kind) {
+        case 'first':
+            return 'Go to first page';
+        case 'previous':
+            return 'Go to previous page';
+        case 'next':
+            return 'Go to next page';
+        case 'last':
+            return 'Go to last page';
+        default:
+            return selected ? `Page ${page}` : `Go to page ${page}`;
+    }
+};
+const navigationIcons = {
+    first: react_1.default.createElement(PaginationIcons_1.IconFirst, null),
+    previous: react_1.default.createElement(PaginationIcons_1.IconPrevious, null),
+    next: react_1.default.createElement(PaginationIcons_1.IconNext, null),
+    last: react_1.default.createElement(PaginationIcons_1.IconLast, null),
+};
+const Pagination = (props, ref) => {
+    const { count, page, defaultPage, onChange, siblings, boundaries, showPrevNext, showFirstLast, disabled, variant = 'standard', color = 'primary', navigationVariant = 'outlined', navigationColor, size = 'medium', getItemLabel = defaultGetItemLabel, overrides, 'aria-label': ariaLabel = 'Pagination' } = props, nativeProps = __rest(props, ["count", "page", "defaultPage", "onChange", "siblings", "boundaries", "showPrevNext", "showFirstLast", "disabled", "variant", "color", "navigationVariant", "navigationColor", "size", "getItemLabel", "overrides", 'aria-label']);
+    const { items } = (0, usePagination_1.default)({
+        count,
+        page,
+        defaultPage,
+        onChange,
+        siblings,
+        boundaries,
+        showPrevNext,
+        showFirstLast,
+        disabled,
+    });
+    const overridesMap = react_1.default.useMemo(() => ({
+        Container: (overrides === null || overrides === void 0 ? void 0 : overrides.Container) || PaginationContainer_1.default,
+        Item: (overrides === null || overrides === void 0 ? void 0 : overrides.Item) || PaginationItem_1.default,
+        Gap: (overrides === null || overrides === void 0 ? void 0 : overrides.Gap) || PaginationGap_1.default,
+    }), [overrides]);
+    const navColor = navigationColor !== null && navigationColor !== void 0 ? navigationColor : (navigationVariant === 'standard' ? color : 'default');
+    return (react_1.default.createElement(overridesMap.Container, Object.assign({ size: size, "aria-label": ariaLabel }, nativeProps, { ref: ref }), items.map(item => {
+        if (item.type === 'gap') {
+            return react_1.default.createElement(overridesMap.Gap, { key: `gap-${item.position}` });
+        }
+        const label = getItemLabel(item.type, item.page, item.selected);
+        if (item.type !== 'page') {
+            // The disabled navigation button gets the soft fill, as the not selected page
+            return (react_1.default.createElement(overridesMap.Item, { key: item.type, kind: item.type, page: item.page, variant: item.disabled ? 'standard' : navigationVariant, color: item.disabled ? 'default' : navColor, soft: item.disabled, disabled: item.disabled, "aria-label": label, onClick: item.onClick }, navigationIcons[item.type]));
+        }
+        return (react_1.default.createElement(overridesMap.Item, { key: item.page, kind: "page", page: item.page, selected: item.selected, variant: item.selected ? 'standard' : variant, color: item.selected ? color : 'default', soft: !item.selected && variant === 'standard', disabled: item.disabled, "aria-label": label, onClick: item.onClick }, item.page));
+    })));
+};
+exports.default = react_1.default.forwardRef(Pagination);

package/Pagination/usePagination.d.ts

@@ -0,0 +1,105 @@
+import React from 'react';
+export type PaginationItemKind = 'page' | 'first' | 'previous' | 'next' | 'last';
+export type PaginationNavigationKind = Exclude<PaginationItemKind, 'page'>;
+/**
+ * The button of the pagination: a page or a navigation button
+ */
+export type PaginationButtonEntry = {
+    readonly type: PaginationItemKind;
+    /**
+     * The page the button opens, starts from 1
+     */
+    readonly page: number;
+    /**
+     * The button of the current page. The navigation buttons are never selected
+     */
+    readonly selected: boolean;
+    /**
+     * The button does nothing: the whole pagination is disabled
+     * or the navigation button leads out of the pages or to the current page
+     */
+    readonly disabled: boolean;
+    /**
+     * Opens the `page`
+     */
+    readonly onClick: (event: React.SyntheticEvent) => void;
+};
+/**
+ * The skipped range of the pages
+ */
+export type PaginationGapEntry = {
+    readonly type: 'gap';
+    /**
+     * The gap before the current page or after it
+     */
+    readonly position: 'start' | 'end';
+};
+export type PaginationEntry = PaginationButtonEntry | PaginationGapEntry;
+export type UsePaginationParams = {
+    /**
+     * Total count of the pages
+     */
+    readonly count: number;
+    /**
+     * The current page of the controlled pagination, starts from 1
+     */
+    readonly page?: number;
+    /**
+     * The initial page of the uncontrolled pagination\
+     * **Default:** `1`
+     */
+    readonly defaultPage?: number;
+    /**
+     * Called with the selected page
+     */
+    readonly onChange?: (page: number, event: React.SyntheticEvent) => void;
+    /**
+     * Count of the pages shown on each side of the current one\
+     * **Default:** `1`
+     */
+    readonly siblings?: number;
+    /**
+     * Count of the pages always shown at the start and at the end\
+     * **Default:** `1`
+     */
+    readonly boundaries?: number;
+    /**
+     * Show the previous and the next buttons\
+     * **Default:** `true`
+     */
+    readonly showPrevNext?: boolean;
+    /**
+     * Show the first and the last buttons\
+     * **Default:** `false`
+     */
+    readonly showFirstLast?: boolean;
+    /**
+     * Disables all the buttons
+     */
+    readonly disabled?: boolean;
+};
+export type UsePaginationResult = {
+    /**
+     * The current page, starts from 1. Always in the range of the pages
+     */
+    readonly page: number;
+    /**
+     * The count of the pages, at least 1
+     */
+    readonly count: number;
+    /**
+     * The buttons and the gaps in the order of the display
+     */
+    readonly items: readonly PaginationEntry[];
+    /**
+     * Opens the page: calls `onChange`, and changes the page of the uncontrolled pagination.
+     * The pages out of the range, the current page and any page of the disabled pagination are ignored
+     */
+    readonly setPage: (page: number, event: React.SyntheticEvent) => void;
+};
+/**
+ * The logic of the pagination without the markup: the current page, the buttons and the gaps.
+ * `<Pagination>` is built on it, use it for the pagination of your own design
+ */
+declare const usePagination: (params: UsePaginationParams) => UsePaginationResult;
+export default usePagination;