@ozen-ui/kit 0.0.1

package/__inner__/esm/components/Pagination/Pagination.js

@@ -0,0 +1,77 @@
+import { __assign, __rest } from "tslib";
+import React, { useMemo, forwardRef } from 'react';
+import { useThemeProps } from '../../hooks/useThemeProps';
+import { cn } from '../../utils/classname';
+import { isNumber } from '../../utils/isNumber';
+import { PaginationItem, cnPaginationItem, } from './components';
+import { PAGINATION_DEFAULT_PAGE, PAGINATION_DEFAULT_SIBLING_COUNT, PAGINATION_DEFAULT_SIZE, ELLIPSIS, NEXT, PAGE, PREVIOUS, } from './constants';
+import { createPaginationRange } from './helpers/createPaginationRange';
+import { getItemAriaLabel as createAriaLabel } from './helpers/getItemAriaLabel';
+import { withNavigationButton } from './helpers/withNavigationButtons/withNavigationButtons';
+import './Pagination.css';
+export var cnPagination = cn('Pagination');
+export var Pagination = forwardRef(function (inProps, ref) {
+    var props = useThemeProps({ props: inProps, name: 'Pagination' });
+    var _a = props.page, page = _a === void 0 ? PAGINATION_DEFAULT_PAGE : _a, _b = props.size, size = _b === void 0 ? PAGINATION_DEFAULT_SIZE : _b, _c = props.siblingCount, siblingCount = _c === void 0 ? PAGINATION_DEFAULT_SIBLING_COUNT : _c, pageSize = props.pageSize, totalCount = props.totalCount, className = props.className, onPageChange = props.onPageChange, _d = props.getItemAriaLabel, getItemAriaLabel = _d === void 0 ? createAriaLabel : _d, 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _e = props.renderComponent, 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    renderComponent = _e === void 0 ? function (_a) {
+        var className = _a.className, rest = __rest(_a, ["className"]);
+        return (React.createElement(PaginationItem, __assign({}, rest)));
+    } : _e, otherProps = __rest(props, ["page", "size", "siblingCount", "pageSize", "totalCount", "className", "onPageChange", "getItemAriaLabel", "renderComponent"]);
+    var _f = useMemo(function () {
+        var selected = page + 1;
+        return {
+            selected: selected,
+            previous: selected - 1,
+            next: selected + 1
+        };
+    }, [page]), selected = _f.selected, previous = _f.previous, next = _f.next;
+    var range = useMemo(function () {
+        return createPaginationRange({
+            page: selected,
+            pageSize: pageSize,
+            siblingCount: siblingCount,
+            totalCount: totalCount
+        });
+    }, [selected, pageSize, siblingCount, totalCount]);
+    var paginationPropsRange = useMemo(function () {
+        var paginationRange = withNavigationButton(range);
+        return paginationRange.map(function (pageButton) {
+            var _a, _b;
+            var isPageNumber = isNumber(pageButton);
+            var type = isPageNumber ? PAGE : pageButton;
+            var isSelected = pageButton === selected;
+            var mapper = (_a = {},
+                _a[PAGE] = isPageNumber ? pageButton : null,
+                _a[NEXT] = next,
+                _a[PREVIOUS] = previous,
+                _a[ELLIPSIS] = null,
+                _a);
+            var mapperDisabled = (_b = {},
+                _b[PREVIOUS] = page <= 0,
+                _b[NEXT] = range.length <= 1 || page === range[range.length - 2],
+                _b[ELLIPSIS] = true,
+                _b[PAGE] = false,
+                _b);
+            return {
+                type: type,
+                size: size,
+                selected: isSelected,
+                page: mapper[type],
+                disabled: mapperDisabled[type],
+                'aria-label': getItemAriaLabel({
+                    page: mapper[type],
+                    selected: isSelected,
+                    type: type
+                }),
+                onClick: onPageChange,
+                className: cnPaginationItem({ size: size, selected: isSelected })
+            };
+        });
+    }, [range, selected, previous, next, size, getItemAriaLabel, onPageChange]);
+    return (React.createElement("nav", __assign({ "aria-label": "\u043D\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044F \u043F\u043E \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0430\u043C", className: cnPagination({}, [className]), ref: ref }, otherProps),
+        React.createElement("ul", { className: cnPagination('List') }, paginationPropsRange.map(function (item, index) { return (React.createElement("li", { key: item.type === ELLIPSIS ? index : item.page + item.type }, renderComponent(item))); }))));
+});
+Pagination.displayName = 'Pagination';

package/__inner__/esm/components/Pagination/components/PaginationItem/PaginationItem.css

@@ -0,0 +1,52 @@
+/* stylelint-disable */
+.PaginationItem {
+  --pagination-item-background: transparent;
+  --pagination-item-border-width: var(--border-width-s);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  min-inline-size: var(--pagination-item-size);
+  block-size: var(--pagination-item-size);
+  border: var(--pagination-item-border-width) solid transparent;
+  border-radius: var(--pagination-item-border-radius);
+  color: var(--color-content-primary);
+  background-color: var(--pagination-item-background);
+  cursor: pointer;
+  text-decoration: none;
+  text-align: center;
+  outline: none;
+}
+.PaginationItem_size_s {
+      font: var(--typography-text-s-font);
+      letter-spacing: var(--typography-text-s-letter_spacing, 0);
+      text-transform: var(--typography-text-s-text_transform, none);
+
+      --pagination-item-size: 32px;
+      --pagination-item-border-radius: var(--border-radius-xs);
+    }
+.PaginationItem_size_l {
+      font: var(--typography-text-l-font);
+      letter-spacing: var(--typography-text-l-letter_spacing, 0);
+      text-transform: var(--typography-text-l-text_transform, none);
+
+      --pagination-item-size: 56px;
+      --pagination-item-border-radius: var(--border-radius-s);
+    }
+.PaginationItem:hover:not(.PaginationItem_selected) {
+    --pagination-item-background: var(--color-background-primary-hover);
+  }
+.PaginationItem:active:not(.PaginationItem_selected) {
+    --pagination-item-background: var(--color-background-primary-pressed);
+  }
+.PaginationItem:focus {
+    box-shadow: var(--shadow-outline-focused);
+  }
+.PaginationItem:focus:not(:focus-visible) {
+      box-shadow: none;
+    }
+.PaginationItem_selected {
+    border: var(--pagination-item-border-width) solid
+      var(--color-background-action);
+    cursor: initial;
+  }

package/__inner__/esm/components/Pagination/components/PaginationItem/PaginationItem.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import type { ButtonHTMLAttributes } from 'react';
+import type { ExtendableProps } from '../../../../types/ExtendableProps';
+import type { PaginationSizeVariant } from '../../types';
+import './PaginationItem.css';
+export declare const paginationVariant: readonly ["Previous", "First", "Page", "last", "Next", "Ellipsis"];
+export type PaginationVariant = (typeof paginationVariant)[number];
+export declare const cnPaginationItem: import("@bem-react/classname").ClassNameFormatter;
+interface BaseProps {
+    type: PaginationVariant;
+    page: number | null;
+    selected?: boolean;
+    disabled?: boolean;
+    size?: PaginationSizeVariant;
+    children?: never;
+    onClick?(page: number): void;
+}
+type ButtonElProps = ButtonHTMLAttributes<HTMLButtonElement>;
+export type PaginationItemProps = ExtendableProps<ButtonElProps, BaseProps>;
+export declare const PaginationItem: React.ForwardRefExoticComponent<BaseProps & Omit<ButtonElProps, keyof BaseProps> & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/__inner__/esm/components/Pagination/components/PaginationItem/PaginationItem.js

@@ -0,0 +1,47 @@
+var _a;
+import { __assign, __rest } from "tslib";
+import React, { forwardRef } from 'react';
+import { ChevronLeftIcon, ChevronRightIcon, MenuHorizontalIcon, } from '@ozen-ui/icons';
+import { cn } from '../../../../utils/classname';
+import { isNumber } from '../../../../utils/isNumber';
+import { IconButton } from '../../../IconButton';
+import { ELLIPSIS, NEXT, PREVIOUS, FIRST, PAGE, LAST } from '../../constants';
+import './PaginationItem.css';
+export var paginationVariant = [
+    PREVIOUS,
+    FIRST,
+    PAGE,
+    LAST,
+    NEXT,
+    ELLIPSIS,
+];
+export var cnPaginationItem = cn('PaginationItem');
+var sizeMapper = {
+    l: {
+        size: 'm',
+        textSize: 'text-l'
+    },
+    s: {
+        size: '2xs',
+        textSize: 'text-s'
+    }
+};
+var iconsMapper = (_a = {},
+    _a[PREVIOUS] = ChevronLeftIcon,
+    _a[NEXT] = ChevronRightIcon,
+    _a[ELLIPSIS] = MenuHorizontalIcon,
+    _a);
+export var PaginationItem = forwardRef(function (_a, ref) {
+    var type = _a.type, page = _a.page, _b = _a.selected, selected = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.size, size = _d === void 0 ? 's' : _d, onClick = _a.onClick, className = _a.className, otherProps = __rest(_a, ["type", "page", "selected", "disabled", "size", "onClick", "className"]);
+    var sizeConfig = sizeMapper[size];
+    var handleClick = function () {
+        if (onClick && !selected && isNumber(page)) {
+            onClick(page - 1);
+        }
+    };
+    if (type === PREVIOUS || type === NEXT || type === ELLIPSIS) {
+        return (React.createElement(IconButton, __assign({ disabled: disabled, tabIndex: disabled ? -1 : 0, icon: iconsMapper[type], size: sizeConfig.size, onClick: handleClick, ref: ref }, otherProps, { color: "secondary" })));
+    }
+    return (React.createElement("button", __assign({ className: cnPaginationItem({ size: size, selected: selected }, [className]), tabIndex: selected ? -1 : 0, onClick: handleClick, "aria-current": selected, ref: ref }, otherProps), page));
+});
+PaginationItem.displayName = 'PaginationItem';

package/__inner__/esm/components/Pagination/components/PaginationItem/index.d.ts

@@ -0,0 +1 @@
+export * from './PaginationItem';

package/__inner__/esm/components/Pagination/components/PaginationItem/index.js

@@ -0,0 +1 @@
+export * from './PaginationItem';

package/__inner__/esm/components/Pagination/components/index.d.ts

@@ -0,0 +1 @@
+export * from './PaginationItem';

package/__inner__/esm/components/Pagination/components/index.js

@@ -0,0 +1 @@
+export * from './PaginationItem';

package/__inner__/esm/components/Pagination/constants.d.ts

@@ -0,0 +1,9 @@
+export declare const PAGINATION_DEFAULT_SIZE = "s";
+export declare const PAGINATION_DEFAULT_SIBLING_COUNT = 2;
+export declare const PAGINATION_DEFAULT_PAGE = 0;
+export declare const ELLIPSIS = "Ellipsis";
+export declare const PREVIOUS = "Previous";
+export declare const NEXT = "Next";
+export declare const FIRST = "First";
+export declare const LAST = "last";
+export declare const PAGE = "Page";

package/__inner__/esm/components/Pagination/constants.js

@@ -0,0 +1,9 @@
+export var PAGINATION_DEFAULT_SIZE = 's';
+export var PAGINATION_DEFAULT_SIBLING_COUNT = 2;
+export var PAGINATION_DEFAULT_PAGE = 0;
+export var ELLIPSIS = 'Ellipsis';
+export var PREVIOUS = 'Previous';
+export var NEXT = 'Next';
+export var FIRST = 'First';
+export var LAST = 'last';
+export var PAGE = 'Page';

package/__inner__/esm/components/Pagination/helpers/createPaginationRange/calculateSiblingIndexes/calculateSiblingIndexes.d.ts

@@ -0,0 +1,15 @@
+import type { PaginationBaseProps } from '../../../index';
+type Params = Required<Pick<PaginationBaseProps, 'page' | 'siblingCount'>> & {
+    /** Всего страниц */
+    totalPageCount: number;
+};
+/**
+ * Рассчитывает с какого индекса отображать соседей текущей выбранной страницы.
+ * Например: Всего 10 страниц, 5 страница выбрана, кол-во отображаемых соседей 2, значит мы должны отображать слева 3 и 4, справа 6 и 7.
+ * Слева начинаем отображать с 3 (3,4), справа отображаем до  7(6,7)
+ */
+export declare const calculateSiblingIndexes: ({ page, siblingCount, totalPageCount, }: Params) => {
+    leftSiblingStartIndex: number;
+    rightSiblingEndIndex: number;
+};
+export {};

package/__inner__/esm/components/Pagination/helpers/createPaginationRange/calculateSiblingIndexes/calculateSiblingIndexes.js

@@ -0,0 +1,14 @@
+/**
+ * Рассчитывает с какого индекса отображать соседей текущей выбранной страницы.
+ * Например: Всего 10 страниц, 5 страница выбрана, кол-во отображаемых соседей 2, значит мы должны отображать слева 3 и 4, справа 6 и 7.
+ * Слева начинаем отображать с 3 (3,4), справа отображаем до  7(6,7)
+ */
+export var calculateSiblingIndexes = function (_a) {
+    var page = _a.page, siblingCount = _a.siblingCount, totalPageCount = _a.totalPageCount;
+    var leftSiblingStartIndex = Math.max(page - siblingCount, 1);
+    var rightSiblingEndIndex = Math.min(page + siblingCount, totalPageCount);
+    return {
+        leftSiblingStartIndex: leftSiblingStartIndex,
+        rightSiblingEndIndex: rightSiblingEndIndex
+    };
+};

package/__inner__/esm/components/Pagination/helpers/createPaginationRange/calculateSiblingIndexes/index.d.ts

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

package/__inner__/esm/components/Pagination/helpers/createPaginationRange/calculateSiblingIndexes/index.js

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

package/__inner__/esm/components/Pagination/helpers/createPaginationRange/canHaveDotsOrSiblings/canHaveDotsOrSiblings.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Если общее количество страниц больше чем количество страниц в пагинации
+ * мы отображаем троеточие или соседей(siblings)
+ * @param {number} siblingCount - количество страниц, отображаемое рядом с текущей страницой.
+ * @param {number} totalPageCount - общее количество страниц
+ * @returns A boolean value.
+ */
+export declare const canHaveDotsOrSiblings: (siblingCount: number, totalPageCount: number) => boolean;

package/__inner__/esm/components/Pagination/helpers/createPaginationRange/canHaveDotsOrSiblings/canHaveDotsOrSiblings.js

@@ -0,0 +1,14 @@
+var MINIMUM_PAGE_NUMBER_ELEMENTS_IN_PAGINATION_ROW = 5;
+/**
+ * Если общее количество страниц больше чем количество страниц в пагинации
+ * мы отображаем троеточие или соседей(siblings)
+ * @param {number} siblingCount - количество страниц, отображаемое рядом с текущей страницой.
+ * @param {number} totalPageCount - общее количество страниц
+ * @returns A boolean value.
+ */
+export var canHaveDotsOrSiblings = function (siblingCount, totalPageCount) {
+    var itemsToShow = 3 + 2 * siblingCount;
+    var totalPageNumberInPaginationRow = siblingCount + MINIMUM_PAGE_NUMBER_ELEMENTS_IN_PAGINATION_ROW;
+    return (totalPageCount > totalPageNumberInPaginationRow &&
+        itemsToShow < totalPageCount - 1);
+};

package/__inner__/esm/components/Pagination/helpers/createPaginationRange/canHaveDotsOrSiblings/index.d.ts

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

package/__inner__/esm/components/Pagination/helpers/createPaginationRange/canHaveDotsOrSiblings/index.js

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

package/__inner__/esm/components/Pagination/helpers/createPaginationRange/createPaginationRange.d.ts

@@ -0,0 +1,5 @@
+import type { PaginationBaseProps } from '../../index';
+import { EllipsisType } from '../../types';
+type Params = Required<Pick<PaginationBaseProps, 'page' | 'pageSize' | 'totalCount' | 'siblingCount'>>;
+export declare const createPaginationRange: ({ page, pageSize, totalCount, siblingCount, }: Params) => (number | EllipsisType)[];
+export {};

package/__inner__/esm/components/Pagination/helpers/createPaginationRange/createPaginationRange.js

@@ -0,0 +1,41 @@
+import { __read, __spreadArray } from "tslib";
+import { ELLIPSIS } from '../../constants';
+import { range } from '../range';
+import { calculateSiblingIndexes } from './calculateSiblingIndexes';
+import { canHaveDotsOrSiblings } from './canHaveDotsOrSiblings';
+import { shouldShowDots } from './shouldShowDots';
+var FIRST_PAGE_INDEX = 1;
+export var createPaginationRange = function (_a) {
+    var page = _a.page, pageSize = _a.pageSize, totalCount = _a.totalCount, siblingCount = _a.siblingCount;
+    var totalPageCount = Math.ceil(totalCount / pageSize);
+    var lastPageIndex = totalPageCount;
+    var itemsToShow = 3 + 2 * siblingCount;
+    if (!canHaveDotsOrSiblings(siblingCount, totalPageCount)) {
+        return range(FIRST_PAGE_INDEX, lastPageIndex);
+    }
+    var _b = calculateSiblingIndexes({ page: page, siblingCount: siblingCount, totalPageCount: totalPageCount }), leftSiblingStartIndex = _b.leftSiblingStartIndex, rightSiblingEndIndex = _b.rightSiblingEndIndex;
+    var _c = shouldShowDots({
+        leftSiblingStartIndex: leftSiblingStartIndex,
+        rightSiblingEndIndex: rightSiblingEndIndex,
+        totalPageCount: totalPageCount
+    }), shouldShowLeftDots = _c.shouldShowLeftDots, shouldShowRightDots = _c.shouldShowRightDots;
+    if (!shouldShowLeftDots && shouldShowRightDots) {
+        var leftRange = range(1, itemsToShow);
+        return __spreadArray(__spreadArray([], __read(leftRange), false), [ELLIPSIS, totalPageCount], false);
+    }
+    if (shouldShowLeftDots && !shouldShowRightDots) {
+        var rightRange = range(totalPageCount - itemsToShow + 1, totalPageCount);
+        return __spreadArray([FIRST_PAGE_INDEX, ELLIPSIS], __read(rightRange), false);
+    }
+    if (shouldShowLeftDots && shouldShowRightDots) {
+        var middleRange = range(leftSiblingStartIndex, rightSiblingEndIndex);
+        return __spreadArray(__spreadArray([
+            FIRST_PAGE_INDEX,
+            ELLIPSIS
+        ], __read(middleRange), false), [
+            ELLIPSIS,
+            lastPageIndex,
+        ], false);
+    }
+    return range(FIRST_PAGE_INDEX, lastPageIndex);
+};

package/__inner__/esm/components/Pagination/helpers/createPaginationRange/index.d.ts

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

package/__inner__/esm/components/Pagination/helpers/createPaginationRange/index.js

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

package/__inner__/esm/components/Pagination/helpers/createPaginationRange/shouldShowDots.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    leftSiblingStartIndex: number;
+    rightSiblingEndIndex: number;
+    totalPageCount: number;
+}
+export declare const shouldShowDots: ({ leftSiblingStartIndex, rightSiblingEndIndex, totalPageCount, }: Props) => {
+    shouldShowLeftDots: boolean;
+    shouldShowRightDots: boolean;
+};
+export {};

package/__inner__/esm/components/Pagination/helpers/createPaginationRange/shouldShowDots.js

@@ -0,0 +1,9 @@
+export var shouldShowDots = function (_a) {
+    var leftSiblingStartIndex = _a.leftSiblingStartIndex, rightSiblingEndIndex = _a.rightSiblingEndIndex, totalPageCount = _a.totalPageCount;
+    var shouldShowLeftDots = leftSiblingStartIndex > 3;
+    var shouldShowRightDots = rightSiblingEndIndex < totalPageCount - 2;
+    return {
+        shouldShowLeftDots: shouldShowLeftDots,
+        shouldShowRightDots: shouldShowRightDots
+    };
+};

package/__inner__/esm/components/Pagination/helpers/getItemAriaLabel/getItemAriaLabel.d.ts

@@ -0,0 +1,7 @@
+import type { PaginationItemProps } from '../../components';
+type Args = Pick<PaginationItemProps, 'type' | 'selected'> & {
+    page: number | string | null;
+};
+export type GetItemAriaLabel = (params: Args) => string;
+export declare const getItemAriaLabel: GetItemAriaLabel;
+export {};

package/__inner__/esm/components/Pagination/helpers/getItemAriaLabel/getItemAriaLabel.js

@@ -0,0 +1,17 @@
+import { NEXT, PAGE, PREVIOUS } from '../../constants';
+export var getItemAriaLabel = function (_a) {
+    var page = _a.page, type = _a.type, selected = _a.selected;
+    if (type === NEXT) {
+        return 'Перейти на следующую страницу';
+    }
+    if (type === PREVIOUS) {
+        return 'Перейти на предыдущую страницу';
+    }
+    if (selected) {
+        return "\u0421\u0442\u0440\u0430\u043D\u0438\u0446\u0430 ".concat(page);
+    }
+    if (type === PAGE) {
+        return "\u041F\u0435\u0440\u0435\u0439\u0442\u0438 \u043D\u0430 \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0443 ".concat(page);
+    }
+    return '';
+};

package/__inner__/esm/components/Pagination/helpers/getItemAriaLabel/index.d.ts

@@ -0,0 +1 @@
+export * from './getItemAriaLabel';

package/__inner__/esm/components/Pagination/helpers/getItemAriaLabel/index.js

@@ -0,0 +1 @@
+export * from './getItemAriaLabel';

package/__inner__/esm/components/Pagination/helpers/range/index.d.ts

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

package/__inner__/esm/components/Pagination/helpers/range/index.js

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

package/__inner__/esm/components/Pagination/helpers/range/range.d.ts

@@ -0,0 +1 @@
+export declare const range: (start: number, end: number) => number[];

package/__inner__/esm/components/Pagination/helpers/range/range.js

@@ -0,0 +1,4 @@
+export var range = function (start, end) {
+    var length = end - start + 1;
+    return Array.from({ length: length }, function (_, index) { return index + start; });
+};

package/__inner__/esm/components/Pagination/helpers/withNavigationButtons/withNavigationButtons.d.ts

@@ -0,0 +1,8 @@
+import type { EllipsisType, NextType, PreviousType } from '../../types';
+export type PaginationRangeType = (EllipsisType | number)[];
+export type PaginationRangeWithNavigationType = [
+    PreviousType,
+    ...PaginationRangeType,
+    NextType
+];
+export declare const withNavigationButton: (arr: PaginationRangeType) => ["Previous", ...(number | "Ellipsis")[], "Next"];

package/__inner__/esm/components/Pagination/helpers/withNavigationButtons/withNavigationButtons.js

@@ -0,0 +1,3 @@
+import { __read, __spreadArray } from "tslib";
+import { NEXT, PREVIOUS } from '../../constants';
+export var withNavigationButton = function (arr) { return __spreadArray(__spreadArray([PREVIOUS], __read(arr), false), [NEXT], false); };

package/__inner__/esm/components/Pagination/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Pagination';
+export * from './components';
+export * from './types';

package/__inner__/esm/components/Pagination/index.js

@@ -0,0 +1,3 @@
+export * from './Pagination';
+export * from './components';
+export * from './types';

package/__inner__/esm/components/Pagination/types.d.ts

@@ -0,0 +1,38 @@
+import React, { HTMLAttributes } from 'react';
+import { PaginationItemProps } from './components';
+import { ELLIPSIS, NEXT, PREVIOUS } from './constants';
+import { GetItemAriaLabel } from './helpers/getItemAriaLabel';
+export type EllipsisType = typeof ELLIPSIS;
+export type PreviousType = typeof PREVIOUS;
+export type NextType = typeof NEXT;
+export declare const paginationSizeVariant: readonly ["s", "l"];
+export type PaginationSizeVariant = (typeof paginationSizeVariant)[number];
+export type PaginationBaseProps = {
+    /**  Общее количество элементов. */
+    totalCount: number;
+    /** Количество элементов отображаемое на странице. */
+    pageSize: number;
+    /**
+     * Текущая выбранная страница.
+     * @default 0
+     */
+    page?: number;
+    /**
+     * Количество всегда видимых страниц до и после текущей страницы.
+     * @default 2
+     */
+    siblingCount?: number;
+    /** Устанавливает размер кнопок в пагинации.
+     * @default 's'
+     */
+    size?: PaginationSizeVariant;
+    /** Кастомный класс для пагинации. */
+    className?: string;
+    /** Коллбэк, вызывается на смену страницы. */
+    onPageChange(page: number): void;
+    /** Функция форматирования атрибута aria-label. */
+    getItemAriaLabel?: GetItemAriaLabel;
+    /** Рендер функция, для отображения кнопок пагинации.  */
+    renderComponent?: (PagItemProps: PaginationItemProps) => React.ReactNode;
+};
+export type PaginationProps = PaginationBaseProps & HTMLAttributes<HTMLElement>;

package/__inner__/esm/components/Pagination/types.js

@@ -0,0 +1 @@
+export var paginationSizeVariant = ['s', 'l'];

package/__inner__/esm/components/Popover/Popover.css

@@ -0,0 +1,107 @@
+.Popover {
+  box-shadow: var(--shadow-l);
+  border-radius: var(--border-radius-xs);
+  background-color: var(--color-background-main);
+  z-index: var(--z-index-popover);
+  inline-size: auto;
+  box-sizing: border-box;
+  outline: none;
+}
+
+  .Popover-Arrow {
+    display: flex;
+  }
+
+  .Popover-Arrow_variant_light {
+        color: var(--color-background-main);
+      }
+
+  .Popover-Arrow_variant_dark {
+        color: var(--color-background-main-inverse);
+      }
+
+  .Popover[data-popper-placement^='top'] > .Popover-Arrow_size_xs {
+        inset-block-end: -9px;
+      }
+
+  .Popover[data-popper-placement^='top'] > .Popover-Arrow_size_xs svg {
+          transform: rotate(270deg);
+        }
+
+  .Popover[data-popper-placement^='top'] > .Popover-Arrow_size_s {
+        inset-block-end: -12px;
+      }
+
+  .Popover[data-popper-placement^='top'] > .Popover-Arrow_size_s svg {
+          transform: rotate(270deg);
+        }
+
+  .Popover[data-popper-placement^='bottom'] > .Popover-Arrow_size_xs {
+        inset-block-start: -9px;
+      }
+
+  .Popover[data-popper-placement^='bottom'] > .Popover-Arrow_size_xs svg {
+          transform: rotate(90deg);
+        }
+
+  .Popover[data-popper-placement^='bottom'] > .Popover-Arrow_size_s {
+        inset-block-start: -12px;
+      }
+
+  .Popover[data-popper-placement^='bottom'] > .Popover-Arrow_size_s svg {
+          transform: rotate(90deg);
+        }
+
+  .Popover[data-popper-placement^='left'] > .Popover-Arrow_size_xs {
+        inset-inline-end: -6px;
+      }
+
+  .Popover[data-popper-placement^='left'] > .Popover-Arrow_size_xs svg {
+          transform: rotate(180deg);
+        }
+
+  .Popover[data-popper-placement^='left'] > .Popover-Arrow_size_s {
+        inset-inline-end: -8px;
+      }
+
+  .Popover[data-popper-placement^='left'] > .Popover-Arrow_size_s svg {
+          transform: rotate(180deg);
+        }
+
+  .Popover[data-popper-placement^='right'] > .Popover-Arrow_size_xs {
+        inset-inline-start: -6px;
+      }
+
+  .Popover[data-popper-placement^='right'] > .Popover-Arrow_size_s {
+        inset-inline-start: -8px;
+      }
+
+  .Popover_disableInteractive {
+    pointer-events: none;
+  }
+
+.Popover_animation-enter {
+    opacity: 0;
+  }
+
+.Popover_animation-enter-active {
+    opacity: 1;
+    transition: opacity var(--transition-default);
+  }
+
+.Popover_animation-enter-done {
+    opacity: 1;
+  }
+
+.Popover_animation-exit {
+    opacity: 1;
+  }
+
+.Popover_animation-exit-active {
+    opacity: 0;
+    transition: opacity var(--transition-default);
+  }
+
+.Popover_animation-exit-done {
+    opacity: 0;
+  }

package/__inner__/esm/components/Popover/Popover.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import './Popover.css';
+import type { PopoverProps } from './types';
+export declare const cnPopover: import("@bem-react/classname").ClassNameFormatter;
+export declare const Popover: React.ForwardRefExoticComponent<Omit<PopoverProps, "ref"> & React.RefAttributes<HTMLDivElement>>;