@sima-land/ui-nucleons 45.0.0-alpha.2 → 45.0.0-alpha.21

package/package.json

@@ -1,41 +1,39 @@
 {
   "name": "@sima-land/ui-nucleons",
-  "version": "45.0.0-alpha.2",
+  "type": "commonjs",
+  "version": "45.0.0-alpha.21",
   "repository": "ssh://git@github.com:sima-land/ui-nucleons.git",
   "author": "www.sima-land.ru team",
   "license": "Apache-2.0",
   "private": false,
   "engines": {
-    "node": ">=16.15.1"
+    "node": ">=18.0.0"
   },
   "scripts": {
     "export:colors": "node .template/build.mjs",
-    "build:before": "rimraf build",
-    "build:main": "tsc --project tsconfig.build.json",
-    "build:after": "node dist.mjs",
-    "build": "npm run build:before && npm run build:main && npm run build:after",
-    "test": "BROWSERSLIST_ENV=\"test\" npx jest",
-    "coverage": "jest --clearCache && BROWSERSLIST_ENV=\"test\" npx jest --coverage",
+    "build": "npm run build:clean && npm run build:scripts && npm run build:assets && npm run build:package",
+    "build:clean": "rm -rf build",
+    "build:scripts": "tsc --project tsconfig.build.json",
+    "build:assets": "node scripts/build-assets.mjs",
+    "build:package": "cd build && npm pkg delete scripts.prepare && cd ..",
     "type-check": "tsc -p . --noEmit",
     "lint": "npm run lint:scripts && npm run lint:styles",
-    "lint:scripts": "eslint --cache src/ --ext .js,.jsx,.ts,.tsx",
+    "lint:scripts": "eslint ./src/**/*.{js,jsx,ts,tsx}",
     "lint:styles": "stylelint 'src/**/*.{css,scss}'",
-    "storybook": "BROWSERSLIST_ENV=\"storybook\" npx start-storybook -p 9009 -c .storybook",
-    "storybook:build": "BROWSERSLIST_ENV=\"storybook\" npx build-storybook --quiet --loglevel error -o build-storybook",
+    "test": "BROWSERSLIST_ENV=\"test\" npx jest",
+    "test:coverage": "jest --clearCache && BROWSERSLIST_ENV=\"test\" npx jest --coverage",
     "prettier": "prettier --write \"./src/**/*.{js,jsx,ts,tsx,css,scss}\"",
     "prettier:check": "prettier --check \"./src/**/*.{js,jsx,ts,tsx,css,scss}\""
   },
   "dependencies": {
-    "@floating-ui/react": "^0.17.0",
-    "@krutoo/input-mask": "^0.0.9",
-    "@sima-land/ui-quarks": "^3.6.0",
+    "@floating-ui/react": "^0.26.13",
+    "@krutoo/input-mask": "^0.1.0",
     "body-scroll-lock": "3.1.5",
-    "classnames": "^2.3.1",
-    "date-fns": "^2.28.0",
+    "classnames": "^2.3.2",
+    "date-fns": "^3.3.1",
     "focus-trap": "^7.2.0",
-    "lodash": "^4.17.21",
-    "overlayscrollbars": "^1.13.3",
-    "overlayscrollbars-react": "^0.3.0",
+    "overlayscrollbars": "^2.8.0",
+    "overlayscrollbars-react": "^0.5.6",
     "react-transition-group": "^4.4.2",
     "redux": "^4.2.0"
   },
@@ -44,66 +42,37 @@
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "^7.16.7",
     "@babel/preset-typescript": "^7.16.7",
-    "@playwright/test": "^1.27.1",
-    "@rushstack/eslint-patch": "^1.1.1",
-    "@sima-land/linters": "^2.1.2",
-    "@storybook/addon-actions": "^6.5.14",
-    "@storybook/addon-backgrounds": "^6.5.14",
-    "@storybook/addon-docs": "^6.5.14",
-    "@storybook/addon-storysource": "^6.5.14",
-    "@storybook/addons": "^6.5.14",
-    "@storybook/builder-webpack5": "^6.5.14",
-    "@storybook/manager-webpack5": "^6.5.14",
-    "@storybook/react": "^6.5.14",
-    "@storybook/theming": "^6.5.14",
-    "@svgr/core": "^6.2.1",
-    "@svgr/plugin-jsx": "^6.2.1",
-    "@svgr/plugin-svgo": "^6.2.0",
-    "@svgr/webpack": "^6.2.1",
-    "@testing-library/react": "^12.1.4",
+    "@playwright/test": "^1.46.1",
+    "@sima-land/linters": "^5.0.0",
+    "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
     "@types/body-scroll-lock": "^3.1.0",
-    "@types/enzyme": "^3.10.11",
     "@types/jest": "^27.4.1",
-    "@types/lodash": "^4.14.180",
     "@types/overlayscrollbars": "^1.12.1",
-    "@types/react": "^17.0.40",
-    "@types/react-dom": "^17.0.13",
+    "@types/react": "^18.2.21",
+    "@types/react-dom": "^18.2.7",
     "@types/react-transition-group": "^4.4.4",
-    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.6",
     "babel-jest": "^27.5.1",
-    "clipboard": "^2.0.11",
     "copyfiles": "^2.4.1",
-    "css-loader": "^6.7.1",
-    "enzyme": "^3.9.0",
-    "enzyme-to-json": "^3.6.2",
-    "eslint": "^8.11.0",
-    "eslint-plugin-storybook": "^0.6.4",
-    "file-loader": "^6.2.0",
+    "eslint": "^9.8.0",
     "handlebars": "^4.7.7",
     "husky": "^7.0.4",
     "jest": "^29.3.1",
     "jest-css-modules-transform": "^4.4.2",
     "jest-environment-jsdom": "^29.3.1",
     "lint-staged": "^12.3.5",
-    "lorem-ipsum": "^2.0.8",
-    "postcss": "^8.4.11",
-    "prettier": "^2.5.1",
-    "react": "^17.0.2",
-    "react-docgen-typescript": "^2.2.2",
-    "react-dom": "^17.0.2",
-    "rimraf": "^3.0.2",
-    "sass": "^1.49.9",
-    "sass-loader": "^12.6.0",
-    "style-loader": "^3.3.1",
-    "stylelint": "^14.5.3",
+    "postcss": "^8.4.24",
+    "prettier": "^3.1.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "sass": "^1.77.8",
+    "stylelint": "^15.9.0",
     "ts-node": "^10.9.1",
-    "typescript": "^4.9.4",
-    "typescript-plugin-css-modules": "^4.1.1",
-    "webpack": "^5.75.0"
+    "typescript": "^5.5.3"
   },
   "peerDependencies": {
-    "react": ">=17",
-    "react-dom": ">=17"
+    "@sima-land/ui-quarks": "^5.0.0",
+    "react": "^17.0 || ^18.0",
+    "react-dom": "^17.0 || ^18.0"
   }
 }

package/pagination/index.d.ts

@@ -1,20 +1,4 @@
-import React from 'react';
-import { BasePaginationProps } from './base-pagination';
-export interface PaginationProps {
-    /** Общее количество страниц. */
-    total: number;
-    /** Индекс текущей страницы. */
-    current: number;
-    /** Сработает при выборе страницы. */
-    onChange?: (data: {
-        value: number;
-    }) => void;
-    /** Функция возвращающая компонент кнопки. */
-    renderButton?: BasePaginationProps['renderButton'];
-}
-/**
- * Компонент списка кнопок навигации по страницам.
- * @param props Свойства.
- * @return Элемент.
- */
-export declare const Pagination: React.FC<PaginationProps>;
+export type { PaginationProps, PaginationItemProps, PaginationButton } from './types';
+export { Pagination } from './pagination';
+export { PaginationItem } from './pagination-item';
+export { getPaginationItems, getNumbersAround, validatePaginationState } from './utils';

package/pagination/index.js

@@ -1,17 +1,12 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Pagination = void 0;
-const react_1 = __importDefault(require("react"));
-const base_pagination_1 = require("./base-pagination");
-/**
- * Компонент списка кнопок навигации по страницам.
- * @param props Свойства.
- * @return Элемент.
- */
-const Pagination = ({ total, current, onChange, renderButton, }) => (react_1.default.createElement(base_pagination_1.BasePagination, { total: total, current: current, renderButton: renderButton, onButtonClick: content => {
-        Number.isFinite(content) && onChange && onChange({ value: content });
-    } }));
-exports.Pagination = Pagination;
+exports.validatePaginationState = exports.getNumbersAround = exports.getPaginationItems = exports.PaginationItem = exports.Pagination = void 0;
+var pagination_1 = require("./pagination");
+Object.defineProperty(exports, "Pagination", { enumerable: true, get: function () { return pagination_1.Pagination; } });
+var pagination_item_1 = require("./pagination-item");
+Object.defineProperty(exports, "PaginationItem", { enumerable: true, get: function () { return pagination_item_1.PaginationItem; } });
+var utils_1 = require("./utils");
+Object.defineProperty(exports, "getPaginationItems", { enumerable: true, get: function () { return utils_1.getPaginationItems; } });
+Object.defineProperty(exports, "getNumbersAround", { enumerable: true, get: function () { return utils_1.getNumbersAround; } });
+Object.defineProperty(exports, "validatePaginationState", { enumerable: true, get: function () { return utils_1.validatePaginationState; } });
+//# sourceMappingURL=index.js.map

package/pagination/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/pagination/index.ts"],"names":[],"mappings":";;;AACA,2CAA0C;AAAjC,wGAAA,UAAU,OAAA;AACnB,qDAAmD;AAA1C,iHAAA,cAAc,OAAA;AACvB,iCAAwF;AAA/E,2GAAA,kBAAkB,OAAA;AAAE,yGAAA,gBAAgB,OAAA;AAAE,gHAAA,uBAAuB,OAAA"}

package/pagination/pagination-item.d.ts

@@ -0,0 +1,7 @@
+import { PaginationItemProps } from './types';
+/**
+ * Кнопка страницы.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function PaginationItem({ rootRef, checked, disabled, children, rounds, onClick, className, href, role, ...rest }: PaginationItemProps): import("react/jsx-runtime").JSX.Element;

package/pagination/pagination-item.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PaginationItem = PaginationItem;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const bind_1 = __importDefault(require("classnames/bind"));
+const pagination_item_m_scss_1 = __importDefault(require("./pagination-item.m.scss"));
+const cx = bind_1.default.bind(pagination_item_m_scss_1.default);
+/**
+ * Кнопка страницы.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function PaginationItem({ rootRef, checked, disabled, children, rounds, onClick, className, href, role = !href ? 'button' : undefined, ...rest }) {
+    return ((0, jsx_runtime_1.jsx)("a", { "aria-disabled": disabled || undefined, "aria-current": checked || undefined, ...rest, ref: rootRef, href: disabled ? undefined : href, role: role, className: cx('root', `rounds-${rounds}`, { checked, disabled }, className), onClick: disabled ? undefined : onClick, children: children }));
+}
+//# sourceMappingURL=pagination-item.js.map

package/pagination/pagination-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination-item.js","sourceRoot":"","sources":["../../src/pagination/pagination-item.tsx"],"names":[],"mappings":";;;;;AAWA,wCA0BC;;AApCD,2DAAyC;AACzC,sFAA8C;AAE9C,MAAM,EAAE,GAAG,cAAU,CAAC,IAAI,CAAC,gCAAM,CAAC,CAAC;AAEnC;;;;GAIG;AACH,SAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,OAAO,EACP,SAAS,EACT,IAAI,EACJ,IAAI,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EACnC,GAAG,IAAI,EACa;IACpB,OAAO,CACL,+CACiB,QAAQ,IAAI,SAAS,kBACtB,OAAO,IAAI,SAAS,KAC9B,IAAI,EACR,GAAG,EAAE,OAAO,EACZ,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,EACjC,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,EAAE,CAAC,MAAM,EAAE,UAAU,MAAM,EAAE,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,SAAS,CAAC,EAC3E,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,YAEtC,QAAQ,GACP,CACL,CAAC;AACJ,CAAC"}

package/pagination/pagination-item.m.scss

@@ -0,0 +1,49 @@
+@use '../colors';
+
+.root {
+  --pagination-item-color: #{colors.$basic-gray87};
+  --pagination-item-background: #fff;
+  --pagination-item-border-color: #{colors.$basic-gray12};
+  --pagination-item-font-size: 14px;
+  --pagination-item-line-height: 20px;
+  width: 40px;
+  height: 40px;
+  flex-shrink: 0;
+  color: var(--pagination-item-color);
+  background: var(--pagination-item-background);
+  box-shadow: inset 0 0 0 1px var(--pagination-item-border-color);
+  font-size: var(--pagination-item-font-size);
+  line-height: var(--pagination-item-line-height);
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  overflow: hidden;
+  text-decoration: none;
+  font-style: normal;
+  &.checked {
+    cursor: default;
+    --pagination-item-color: #fff;
+    --pagination-item-background: #{colors.$basic-gray87};
+    --pagination-item-border-color: #{colors.$basic-gray87};
+  }
+  &.disabled {
+    --pagination-item-color: #{colors.$basic-gray24};
+    --pagination-item-background: #fff;
+    --pagination-item-border-color: #{colors.$basic-gray12};
+  }
+  &:not(.checked):not(.disabled):hover {
+    cursor: pointer;
+    --pagination-item-background: #{colors.$basic-gray4};
+  }
+  &.rounds-all {
+    border-radius: 4px;
+  }
+  &.rounds-left {
+    border-radius: 4px 0 0 4px;
+  }
+  &.rounds-right {
+    border-radius: 0 4px 4px 0;
+  }
+}

package/pagination/pagination.d.ts

@@ -0,0 +1,7 @@
+import type { PaginationProps } from './types';
+/**
+ * Кнопки навигации по страницам.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function Pagination({ rootRef, current: currentProp, total: totalProp, onPageChange, getItems, renderItem, className, ...restProps }: PaginationProps): import("react/jsx-runtime").JSX.Element;

package/pagination/pagination.js

@@ -0,0 +1,96 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Pagination = Pagination;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const utils_1 = require("./utils");
+const pagination_item_1 = require("./pagination-item");
+const ArrowExpandLeft_1 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/ArrowExpandLeft"));
+const ArrowExpandRight_1 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/ArrowExpandRight"));
+const bind_1 = __importDefault(require("classnames/bind"));
+const pagination_m_scss_1 = __importDefault(require("./pagination.m.scss"));
+const cx = bind_1.default.bind(pagination_m_scss_1.default);
+/**
+ * Кнопки навигации по страницам.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function Pagination({ rootRef, current: currentProp, total: totalProp, onPageChange, getItems = utils_1.getPaginationItems, renderItem = renderPaginationItem, className, ...restProps }) {
+    const { current, total } = (0, react_1.useMemo)(() => (0, utils_1.validatePaginationState)({ current: currentProp, total: totalProp }), [currentProp, totalProp]);
+    const items = (0, react_1.useMemo)(() => getItems({ current, total }), [current, total, getItems]);
+    const onChangeRef = (0, react_1.useRef)(onPageChange);
+    onChangeRef.current = onPageChange;
+    const getItemProps = (0, react_1.useCallback)((item, index, userProps = {}) => {
+        // eslint-disable-next-line jsdoc/require-jsdoc
+        const onClick = event => {
+            if (item.value !== current) {
+                onChangeRef.current?.(event, item);
+            }
+            userProps.onClick?.(event);
+        };
+        if (item.type === 'page') {
+            let rounds;
+            if (index === 0 || items[index - 1].type === 'prev') {
+                rounds = total === 1 ? 'all' : 'left';
+            }
+            else if (index === items.length - 1 || items[index + 1].type === 'next') {
+                rounds = 'right';
+            }
+            return {
+                rounds,
+                checked: item.value === current,
+                'aria-label': `Перейти на страницу ${item.value}`,
+                children: item.value,
+                ...userProps,
+                onClick,
+                className: cx('page', userProps.className, item.value > 999 && 'large'),
+            };
+        }
+        if (item.type === 'prev') {
+            return {
+                rounds: 'all',
+                disabled: current <= 1,
+                'aria-label': 'Предыдущая страница',
+                children: (0, jsx_runtime_1.jsx)(ArrowExpandLeft_1.default, { fill: 'currentColor' }),
+                ...userProps,
+                onClick,
+                className: cx('prev', userProps.className),
+            };
+        }
+        if (item.type === 'more') {
+            return {
+                'aria-label': `Перейти на страницу ${item.value}`,
+                children: '…',
+                ...userProps,
+                onClick,
+                className: cx('page', userProps.className),
+            };
+        }
+        if (item.type === 'next') {
+            return {
+                rounds: 'all',
+                disabled: current >= total,
+                'aria-label': 'Следующая страница',
+                children: (0, jsx_runtime_1.jsx)(ArrowExpandRight_1.default, { fill: 'currentColor' }),
+                ...userProps,
+                onClick,
+                className: cx('next', userProps.className),
+            };
+        }
+        return {};
+    }, [current, total, items]);
+    return ((0, jsx_runtime_1.jsx)("div", { ref: rootRef, className: cx('root', className), role: 'navigation', "aria-label": '\u041D\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044F \u043F\u043E \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0430\u043C', ...restProps, children: items.map((item, index) => ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: renderItem(item, userProps => getItemProps(item, index, userProps)) }, index))) }));
+}
+/**
+ * Рендер кнопки по умолчанию.
+ * @param button Данные кнопки.
+ * @param getProps Вернет свойства для PaginationItem.
+ * @return Элемент.
+ */
+function renderPaginationItem(button, getProps) {
+    return (0, jsx_runtime_1.jsx)(pagination_item_1.PaginationItem, { ...getProps() });
+}
+//# sourceMappingURL=pagination.js.map

package/pagination/pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.js","sourceRoot":"","sources":["../../src/pagination/pagination.tsx"],"names":[],"mappings":"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"}

package/pagination/pagination.m.scss

@@ -0,0 +1,21 @@
+.root {
+  display: flex;
+}
+
+.prev + .page,
+.prev + .next {
+  margin-left: 8px;
+}
+
+.page + .next {
+  margin-left: 8px;
+}
+
+.page + .page {
+  margin-left: -1px;
+}
+
+.large {
+  --pagination-item-font-size: 12px;
+  --pagination-item-line-height: 16px;
+}

package/pagination/types.d.ts

@@ -0,0 +1,28 @@
+import type { AnchorHTMLAttributes, HTMLAttributes, MouseEvent, ReactNode, Ref } from 'react';
+export interface PaginationButton {
+    type: 'page' | 'prev' | 'next' | 'more';
+    value: number;
+}
+export interface PaginationItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    rounds?: 'all' | 'right' | 'left';
+    checked?: boolean;
+    disabled?: boolean;
+    rootRef?: Ref<HTMLAnchorElement>;
+}
+export interface GetPaginationItemProps {
+    (userProps?: PaginationItemProps): PaginationItemProps;
+}
+export interface RenderPaginationItem {
+    (item: PaginationButton, getProps: GetPaginationItemProps): ReactNode;
+}
+export interface PaginationProps extends HTMLAttributes<HTMLDivElement> {
+    rootRef?: Ref<HTMLDivElement>;
+    current?: number;
+    total?: number;
+    onPageChange?: (event: MouseEvent<HTMLAnchorElement>, button: PaginationButton) => void;
+    getItems?: (payload: {
+        current: number;
+        total: number;
+    }) => PaginationButton[];
+    renderItem?: RenderPaginationItem;
+}

package/pagination/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/pagination/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/pagination/types.ts"],"names":[],"mappings":""}

package/pagination/utils.d.ts

@@ -1,54 +1,38 @@
-interface IPageButton {
-    value: number;
-    content: string | number;
-}
-type State = {
-    current: number;
-    range: number;
-    total: number;
-};
-export declare const cx: (...args: import("classnames").ArgumentArray) => string;
-/**
- * Фабрика объектов с данными о кнопке страницы.
- * @param value Номер целевой страницы.
- * @param content Содержимое кнопки.
- * @return Список кнопок.
- */
-export declare const PageButton: (value: number, content?: string | number) => IPageButton;
+import type { PaginationButton } from './types';
 /**
- * Возвращает список кнопок навигации.
- * @param props Свойства.
- * @param props.current Номер текущей страницы.
- * @param props.total Номер последней страницы.
- * @param props.buttonKeys Значения, которые будут использованы для не числовых кнопок.
- * @param props.buttonKeys.more Значение для отображения кнопки группы пропущенных чисел.
- * @return Список кнопок.
+ * Обрабатывает состояние кнопок пагинации.
+ * @param state Состояние.
+ * @return Валидное состояние.
  */
-export declare const getPageButtons: ({ current, total, buttonKeys, }: {
-    current: number;
+export declare function validatePaginationState({ total, current }: {
+    total?: number;
+    current?: number;
+}): {
     total: number;
-    buttonKeys?: {
-        more: string | number;
-    } | undefined;
-}) => IPageButton[];
+    current: number;
+};
 /**
- * Возвращает корректный диапазон вокруг текущего значения в соответствии с дизайнерской задумкой.
- * По возможности показывает начало/конец списка при смещении.
- * При current = 4, range = 5 вместо [2,3,4,5,6] вернет [1,2,3,4,5].
+ * Формирует список кнопок навигации по страницам по дизайн-гайдам.
  * @param props Свойства.
- * @param props.current Число вокруг которого нужно сформировать список.
- * @param props.range Размер списка.
- * @param props.total Максимальное значение.
- * @return Список номеров.
+ * @param config Конфиг.
+ * @return Список.
  */
-export declare const getCorrectRangeNumbers: ({ current, range: rangeSize, total }: State) => number[];
+export declare function getPaginationItems({ total, current, }: {
+    total: number;
+    current: number;
+}, { arrows, }?: {
+    arrows?: boolean | 'active';
+}): PaginationButton[];
 /**
- * Возвращает список чисел вокруг заданного.
+ * Возвращает список натуральных чисел вокруг заданного.
  * @param props Свойства.
  * @param props.current Число вокруг которого нужно сформировать список.
  * @param props.range Размер списка.
  * @param props.total Максимальное значение.
  * @return Список номеров.
  */
-export declare const getRangeNumbers: ({ current, range: rangeSize, total }: State) => number[];
-export {};
+export declare function getNumbersAround({ current, range: rangeSize, total, }: {
+    current: number;
+    range: number;
+    total: number;
+}): number[];