@alfalab/core-components-pagination 1.1.0

package/CHANGELOG.md

@@ -0,0 +1,11 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# 1.1.0 (2021-12-29)
+
+
+### Features
+
+* **table:** компоненты для построения таблиц  ([#911](https://github.com/alfa-laboratory/core-components/issues/911)) ([4ac648a](https://github.com/alfa-laboratory/core-components/commit/4ac648abd4de08bf68babc2f122f432d5b14080e))

package/dist/Component.d.ts

@@ -0,0 +1,41 @@
+import { FC } from 'react';
+type PaginationProps = {
+    /**
+     * Текущая страница (с нуля)
+     */
+    currentPageIndex: number;
+    /**
+     * Количество страниц
+     */
+    pagesCount: number;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Скрывает стрелки, если выбрана первая или последняя страница
+     */
+    hideArrows?: boolean;
+    /**
+     * Количество видимых страниц по бокам
+     */
+    sidePadding?: number;
+    /**
+     * Количество видимых страниц вокруг выбранной
+     */
+    activePadding?: number;
+    /**
+     * Режим пагинации
+     */
+    view?: 'default' | 'per-page';
+    /**
+     * Обработчик переключения страницы
+     */
+    onPageChange?: (pageIndex: number) => void;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+declare const Pagination: FC<PaginationProps>;
+export { PaginationProps, Pagination };

package/dist/Component.js

@@ -0,0 +1,42 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var cn = require('classnames');
+var ChevronBackMIcon = require('@alfalab/icons-glyph/ChevronBackMIcon');
+var ChevronForwardMIcon = require('@alfalab/icons-glyph/ChevronForwardMIcon');
+var components_tag_index = require('./components/tag/index.js');
+require('@alfalab/core-components-tag');
+var components_defaultView_index = require('./components/default-view/index.js');
+var components_perPageView_index = require('./components/per-page-view/index.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
+
+var styles = {"component":"pagination__component_1bqlk","default":"pagination__default_1bqlk"};
+require('./index.css')
+
+var Pagination = function (_a) {
+    var _b = _a.currentPageIndex, currentPageIndex = _b === void 0 ? 0 : _b, pagesCount = _a.pagesCount, className = _a.className, _c = _a.sidePadding, sidePadding = _c === void 0 ? 1 : _c, _d = _a.activePadding, activePadding = _d === void 0 ? 2 : _d, _e = _a.hideArrows, hideArrows = _e === void 0 ? true : _e, _f = _a.view, view = _f === void 0 ? 'default' : _f, _g = _a.onPageChange, onPageChange = _g === void 0 ? function () { return null; } : _g, dataTestId = _a.dataTestId;
+    var handlePageClick = function (pageIndex) {
+        onPageChange(pageIndex);
+    };
+    var handleNextPageClick = function () {
+        handlePageClick(Math.min(pagesCount - 1, currentPageIndex + 1));
+    };
+    var handlePrevPageClick = function () {
+        handlePageClick(Math.max(0, currentPageIndex - 1));
+    };
+    var shouldRenderPrevArrow = view === 'per-page' || !hideArrows || currentPageIndex > 0;
+    var shouldRenderNextArrow = view === 'per-page' || !hideArrows || currentPageIndex < pagesCount - 1;
+    return (React__default['default'].createElement("div", { className: cn__default['default'](styles.component, className, styles[view]), "data-test-id": dataTestId },
+        shouldRenderPrevArrow && (React__default['default'].createElement(components_tag_index.Tag, { className: styles.arrow, disabled: currentPageIndex <= 0, onClick: handlePrevPageClick, rightAddons: React__default['default'].createElement(ChevronBackMIcon.ChevronBackMIcon, { width: 16, height: 16 }) })),
+        view === 'default' && (React__default['default'].createElement(components_defaultView_index.DefaultView, { activePadding: activePadding, sidePadding: sidePadding, currentPageIndex: currentPageIndex, pagesCount: pagesCount, onPageChange: handlePageClick })),
+        view === 'per-page' && (React__default['default'].createElement(components_perPageView_index.PerPageView, { currentPageIndex: currentPageIndex, pagesCount: pagesCount })),
+        shouldRenderNextArrow && (React__default['default'].createElement(components_tag_index.Tag, { className: styles.arrow, disabled: currentPageIndex >= pagesCount - 1, onClick: handleNextPageClick, rightAddons: React__default['default'].createElement(ChevronForwardMIcon.ChevronForwardMIcon, { width: 16, height: 16 }) }))));
+};
+
+exports.Pagination = Pagination;

package/dist/components/default-view/index.css

@@ -0,0 +1,22 @@
+/* hash: a3bgi */
+:root {
+    --color-light-text-secondary: #546272;
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+.pagination__dots_kix4e {
+    width: 32px;
+    height: 32px;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--color-light-text-secondary);
+    cursor: default;
+}

package/dist/components/default-view/index.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { PaginationProps } from "../../Component";
+type DefaultViewProps = Pick<PaginationProps, 'sidePadding' | 'activePadding' | 'pagesCount' | 'currentPageIndex' | 'onPageChange'>;
+declare const DefaultView: FC<DefaultViewProps>;
+export { DefaultView };

package/dist/components/default-view/index.js

@@ -0,0 +1,56 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+require('classnames');
+var components_tag_index = require('../tag/index.js');
+require('@alfalab/core-components-tag');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var styles = {"dots":"pagination__dots_kix4e"};
+require('./index.css')
+
+var DefaultView = function (_a) {
+    var _b = _a.sidePadding, sidePadding = _b === void 0 ? 2 : _b, _c = _a.activePadding, activePadding = _c === void 0 ? 1 : _c, pagesCount = _a.pagesCount, currentPageIndex = _a.currentPageIndex, _d = _a.onPageChange, onPageChange = _d === void 0 ? function () { return null; } : _d;
+    var maxHalfCount = sidePadding + activePadding + 1;
+    var maxElementsCount = maxHalfCount * 2 + 1;
+    var itemsFit = pagesCount <= maxElementsCount;
+    var elementsCount = itemsFit ? pagesCount : maxElementsCount;
+    var getPageIndex = React.useCallback(function (elementIndex) {
+        var lastIndex = pagesCount - 1;
+        var reverseIndex = lastIndex - currentPageIndex;
+        var lastElementIndex = elementsCount - 1;
+        var reverseElementIndex = lastElementIndex - elementIndex;
+        var hasCollapsedItems = function (index) { return !itemsFit && index >= maxHalfCount; };
+        if (elementIndex < sidePadding) {
+            return elementIndex;
+        }
+        if (elementIndex === sidePadding && hasCollapsedItems(currentPageIndex)) {
+            return null;
+        }
+        if (reverseElementIndex === sidePadding && hasCollapsedItems(reverseIndex)) {
+            return null;
+        }
+        if (reverseElementIndex < sidePadding) {
+            return lastIndex - reverseElementIndex;
+        }
+        var computedIndex = currentPageIndex - maxHalfCount + elementIndex;
+        return Math.min(lastIndex - reverseElementIndex, Math.max(elementIndex, computedIndex));
+    }, [currentPageIndex, elementsCount, itemsFit, maxHalfCount, pagesCount, sidePadding]);
+    return (React__default['default'].createElement(React__default['default'].Fragment, null, Array(elementsCount)
+        .fill('')
+        .map(function (_, i) {
+        var pageIndex = getPageIndex(i);
+        if (pageIndex === null) {
+            return (React__default['default'].createElement("div", { key: i.toString(), className: styles.dots }, "..."));
+        }
+        var active = currentPageIndex === pageIndex;
+        return (React__default['default'].createElement(components_tag_index.Tag, { key: i.toString(), checked: active, disabled: active, onClick: function () { return onPageChange(pageIndex); } }, pageIndex + 1));
+    })));
+};
+
+exports.DefaultView = DefaultView;

package/dist/components/per-page-view/index.css

@@ -0,0 +1,16 @@
+/* hash: 1ylzb */
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --gap-m: 16px;
+}
+.pagination__component_begf8 {
+    display: block;
+    margin: 0 var(--gap-m);
+}

package/dist/components/per-page-view/index.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { PaginationProps } from "../../Component";
+type PerPageViewProps = Pick<PaginationProps, 'pagesCount' | 'currentPageIndex'>;
+declare const PerPageView: FC<PerPageViewProps>;
+export { PerPageView };

package/dist/components/per-page-view/index.js

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var styles = {"component":"pagination__component_begf8"};
+require('./index.css')
+
+var PerPageView = function (_a) {
+    var pagesCount = _a.pagesCount, currentPageIndex = _a.currentPageIndex;
+    return (React__default['default'].createElement("span", { className: styles.component },
+        currentPageIndex + 1,
+        " \u0438\u0437 ",
+        pagesCount,
+        " \u0441\u0442\u0440\u0430\u043D\u0438\u0446"));
+};
+
+exports.PerPageView = PerPageView;

package/dist/components/tag/index.css

@@ -0,0 +1,52 @@
+/* hash: x8h03 */
+:root {
+    --color-light-bg-neutral: #dbdee1;
+    --color-light-bg-secondary-inverted: #233549;
+    --color-light-bg-tertiary: #e7e9eb;
+    --color-light-text-primary: #0b1f35;
+    --color-light-text-primary-inverted: #fff;
+    --color-light-text-secondary: #546272;
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --border-radius-m: 8px;
+}
+.pagination__tag_1gidc.pagination__tag_1gidc {
+    color: var(--color-light-text-secondary);
+    border-radius: var(--border-radius-m);
+    border: none;
+    flex-shrink: 0;
+    min-width: auto;
+    min-height: auto;
+    width: 32px;
+    height: 32px;
+    padding: 0
+}
+.pagination__tag_1gidc.pagination__tag_1gidc:disabled:not(.pagination__checked_1gidc) {
+        opacity: 0.3;
+    }
+.pagination__tag_1gidc.pagination__tag_1gidc:hover:not(:disabled) {
+        background-color: var(--color-light-bg-tertiary);
+        color: var(--color-light-text-primary);
+    }
+.pagination__tag_1gidc.pagination__tag_1gidc:active:not(:disabled) {
+        background-color: var(--color-light-bg-neutral);
+    }
+.pagination__tag_1gidc.pagination__tag_1gidc.pagination__checked_1gidc {
+        cursor: default;
+        background-color: var(--color-light-bg-secondary-inverted);
+        color: var(--color-light-text-primary-inverted);
+    }
+.pagination__tag_1gidc.pagination__tag_1gidc.pagination__checked_1gidc:hover:not(:disabled) {
+        color: var(--color-light-text-primary-inverted);
+    }
+.pagination__tag_1gidc.pagination__tag_1gidc.pagination__checked_1gidc:active:not(:disabled) {
+        color: var(--color-light-text-primary);
+    }

package/dist/components/tag/index.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { TagProps } from "@alfalab/core-components-tag";
+declare const Tag: FC<TagProps>;
+export { Tag };

package/dist/components/tag/index.js

@@ -0,0 +1,62 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var cn = require('classnames');
+var coreComponentsTag = require('@alfalab/core-components-tag');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+var __assign = function () {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s)
+                if (Object.prototype.hasOwnProperty.call(s, p))
+                    t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+function __rest(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 styles = {"tag":"pagination__tag_1gidc","checked":"pagination__checked_1gidc"};
+require('./index.css')
+
+var Tag = function (_a) {
+    var _b;
+    var className = _a.className, checked = _a.checked, restProps = __rest(_a, ["className", "checked"]);
+    return (React__default['default'].createElement(coreComponentsTag.Tag, __assign({}, restProps, { checked: checked, size: 'xxs', className: cn__default['default'](className, styles.tag, (_b = {}, _b[styles.checked] = checked, _b)) })));
+};
+
+exports.Tag = Tag;

package/dist/cssm/Component.d.ts

@@ -0,0 +1,41 @@
+import { FC } from 'react';
+type PaginationProps = {
+    /**
+     * Текущая страница (с нуля)
+     */
+    currentPageIndex: number;
+    /**
+     * Количество страниц
+     */
+    pagesCount: number;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Скрывает стрелки, если выбрана первая или последняя страница
+     */
+    hideArrows?: boolean;
+    /**
+     * Количество видимых страниц по бокам
+     */
+    sidePadding?: number;
+    /**
+     * Количество видимых страниц вокруг выбранной
+     */
+    activePadding?: number;
+    /**
+     * Режим пагинации
+     */
+    view?: 'default' | 'per-page';
+    /**
+     * Обработчик переключения страницы
+     */
+    onPageChange?: (pageIndex: number) => void;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+declare const Pagination: FC<PaginationProps>;
+export { PaginationProps, Pagination };

package/dist/cssm/Component.js

@@ -0,0 +1,44 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var cn = require('classnames');
+var ChevronBackMIcon = require('@alfalab/icons-glyph/ChevronBackMIcon');
+var ChevronForwardMIcon = require('@alfalab/icons-glyph/ChevronForwardMIcon');
+var components_tag_index = require('./components/tag/index.js');
+require('@alfalab/core-components-tag/dist/cssm');
+require('./components/tag/index.module.css');
+require('./components/default-view/index.module.css');
+var components_defaultView_index = require('./components/default-view/index.js');
+require('./components/per-page-view/index.module.css');
+var components_perPageView_index = require('./components/per-page-view/index.js');
+var styles = require('./index.module.css');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
+var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
+
+var Pagination = function (_a) {
+    var _b = _a.currentPageIndex, currentPageIndex = _b === void 0 ? 0 : _b, pagesCount = _a.pagesCount, className = _a.className, _c = _a.sidePadding, sidePadding = _c === void 0 ? 1 : _c, _d = _a.activePadding, activePadding = _d === void 0 ? 2 : _d, _e = _a.hideArrows, hideArrows = _e === void 0 ? true : _e, _f = _a.view, view = _f === void 0 ? 'default' : _f, _g = _a.onPageChange, onPageChange = _g === void 0 ? function () { return null; } : _g, dataTestId = _a.dataTestId;
+    var handlePageClick = function (pageIndex) {
+        onPageChange(pageIndex);
+    };
+    var handleNextPageClick = function () {
+        handlePageClick(Math.min(pagesCount - 1, currentPageIndex + 1));
+    };
+    var handlePrevPageClick = function () {
+        handlePageClick(Math.max(0, currentPageIndex - 1));
+    };
+    var shouldRenderPrevArrow = view === 'per-page' || !hideArrows || currentPageIndex > 0;
+    var shouldRenderNextArrow = view === 'per-page' || !hideArrows || currentPageIndex < pagesCount - 1;
+    return (React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].component, className, styles__default['default'][view]), "data-test-id": dataTestId },
+        shouldRenderPrevArrow && (React__default['default'].createElement(components_tag_index.Tag, { className: styles__default['default'].arrow, disabled: currentPageIndex <= 0, onClick: handlePrevPageClick, rightAddons: React__default['default'].createElement(ChevronBackMIcon.ChevronBackMIcon, { width: 16, height: 16 }) })),
+        view === 'default' && (React__default['default'].createElement(components_defaultView_index.DefaultView, { activePadding: activePadding, sidePadding: sidePadding, currentPageIndex: currentPageIndex, pagesCount: pagesCount, onPageChange: handlePageClick })),
+        view === 'per-page' && (React__default['default'].createElement(components_perPageView_index.PerPageView, { currentPageIndex: currentPageIndex, pagesCount: pagesCount })),
+        shouldRenderNextArrow && (React__default['default'].createElement(components_tag_index.Tag, { className: styles__default['default'].arrow, disabled: currentPageIndex >= pagesCount - 1, onClick: handleNextPageClick, rightAddons: React__default['default'].createElement(ChevronForwardMIcon.ChevronForwardMIcon, { width: 16, height: 16 }) }))));
+};
+
+exports.Pagination = Pagination;

package/dist/cssm/components/default-view/index.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { PaginationProps } from "../../Component";
+type DefaultViewProps = Pick<PaginationProps, 'sidePadding' | 'activePadding' | 'pagesCount' | 'currentPageIndex' | 'onPageChange'>;
+declare const DefaultView: FC<DefaultViewProps>;
+export { DefaultView };

package/dist/cssm/components/default-view/index.js

@@ -0,0 +1,56 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+require('classnames');
+var components_tag_index = require('../tag/index.js');
+require('@alfalab/core-components-tag/dist/cssm');
+require('../tag/index.module.css');
+var styles = require('./index.module.css');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
+
+var DefaultView = function (_a) {
+    var _b = _a.sidePadding, sidePadding = _b === void 0 ? 2 : _b, _c = _a.activePadding, activePadding = _c === void 0 ? 1 : _c, pagesCount = _a.pagesCount, currentPageIndex = _a.currentPageIndex, _d = _a.onPageChange, onPageChange = _d === void 0 ? function () { return null; } : _d;
+    var maxHalfCount = sidePadding + activePadding + 1;
+    var maxElementsCount = maxHalfCount * 2 + 1;
+    var itemsFit = pagesCount <= maxElementsCount;
+    var elementsCount = itemsFit ? pagesCount : maxElementsCount;
+    var getPageIndex = React.useCallback(function (elementIndex) {
+        var lastIndex = pagesCount - 1;
+        var reverseIndex = lastIndex - currentPageIndex;
+        var lastElementIndex = elementsCount - 1;
+        var reverseElementIndex = lastElementIndex - elementIndex;
+        var hasCollapsedItems = function (index) { return !itemsFit && index >= maxHalfCount; };
+        if (elementIndex < sidePadding) {
+            return elementIndex;
+        }
+        if (elementIndex === sidePadding && hasCollapsedItems(currentPageIndex)) {
+            return null;
+        }
+        if (reverseElementIndex === sidePadding && hasCollapsedItems(reverseIndex)) {
+            return null;
+        }
+        if (reverseElementIndex < sidePadding) {
+            return lastIndex - reverseElementIndex;
+        }
+        var computedIndex = currentPageIndex - maxHalfCount + elementIndex;
+        return Math.min(lastIndex - reverseElementIndex, Math.max(elementIndex, computedIndex));
+    }, [currentPageIndex, elementsCount, itemsFit, maxHalfCount, pagesCount, sidePadding]);
+    return (React__default['default'].createElement(React__default['default'].Fragment, null, Array(elementsCount)
+        .fill('')
+        .map(function (_, i) {
+        var pageIndex = getPageIndex(i);
+        if (pageIndex === null) {
+            return (React__default['default'].createElement("div", { key: i.toString(), className: styles__default['default'].dots }, "..."));
+        }
+        var active = currentPageIndex === pageIndex;
+        return (React__default['default'].createElement(components_tag_index.Tag, { key: i.toString(), checked: active, disabled: active, onClick: function () { return onPageChange(pageIndex); } }, pageIndex + 1));
+    })));
+};
+
+exports.DefaultView = DefaultView;

package/dist/cssm/components/default-view/index.module.css

@@ -0,0 +1,21 @@
+:root {
+    --color-light-text-secondary: #546272;
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+.dots {
+    width: 32px;
+    height: 32px;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--color-light-text-secondary);
+    cursor: default;
+}

package/dist/cssm/components/per-page-view/index.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { PaginationProps } from "../../Component";
+type PerPageViewProps = Pick<PaginationProps, 'pagesCount' | 'currentPageIndex'>;
+declare const PerPageView: FC<PerPageViewProps>;
+export { PerPageView };

package/dist/cssm/components/per-page-view/index.js

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var styles = require('./index.module.css');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
+
+var PerPageView = function (_a) {
+    var pagesCount = _a.pagesCount, currentPageIndex = _a.currentPageIndex;
+    return (React__default['default'].createElement("span", { className: styles__default['default'].component },
+        currentPageIndex + 1,
+        " \u0438\u0437 ",
+        pagesCount,
+        " \u0441\u0442\u0440\u0430\u043D\u0438\u0446"));
+};
+
+exports.PerPageView = PerPageView;

package/dist/cssm/components/per-page-view/index.module.css

@@ -0,0 +1,15 @@
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --gap-m: 16px;
+}
+.component {
+    display: block;
+    margin: 0 var(--gap-m);
+}

package/dist/cssm/components/tag/index.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { TagProps } from "@alfalab/core-components-tag";
+declare const Tag: FC<TagProps>;
+export { Tag };

package/dist/cssm/components/tag/index.js

@@ -0,0 +1,61 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var cn = require('classnames');
+var coreComponentsTag = require('@alfalab/core-components-tag/dist/cssm');
+var styles = require('./index.module.css');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
+var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+var __assign = function () {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s)
+                if (Object.prototype.hasOwnProperty.call(s, p))
+                    t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+function __rest(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 Tag = function (_a) {
+    var _b;
+    var className = _a.className, checked = _a.checked, restProps = __rest(_a, ["className", "checked"]);
+    return (React__default['default'].createElement(coreComponentsTag.Tag, __assign({}, restProps, { checked: checked, size: 'xxs', className: cn__default['default'](className, styles__default['default'].tag, (_b = {}, _b[styles__default['default'].checked] = checked, _b)) })));
+};
+
+exports.Tag = Tag;