@ozen-ui/kit 0.0.1

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

@@ -0,0 +1,17 @@
+import type { ElementType, ReactNode } from 'react';
+import { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
+import { PolymorphicComponentPropsWithRef } from '../../utils/polymorphicComponentWithRef';
+import { LIST_DEFAULT_TAG } from './constants';
+export type ListSizeVariant = FormElementSizeVariant;
+export type ListContextValue = {
+    size: ListSizeVariant;
+};
+export type ListBaseProps = {
+    /** Содержимое компонента */
+    children?: ReactNode;
+    /** Размер компонента */
+    size?: ListSizeVariant;
+    /** Идентификатор компонента для тестов */
+    'data-testid'?: string;
+};
+export type ListProps<As extends ElementType = typeof LIST_DEFAULT_TAG> = PolymorphicComponentPropsWithRef<ListBaseProps, As>;

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

@@ -0,0 +1 @@
+export {};

package/__inner__/esm/components/Loader/Loader.css

@@ -0,0 +1,36 @@
+.Loader {
+  --loader-color: var(--color-background-action);
+  color: var(--loader-color);
+  vertical-align: top;
+  display: inline-flex;
+  border: 2px solid currentcolor;
+  border-inline-end-color: transparent;
+  border-radius: 50%;
+  animation: 0.75s linear infinite spinner-border;
+}
+
+  .Loader_size_s {
+    inline-size: 12px;
+    block-size: 12px;
+  }
+
+  .Loader_size_m {
+    inline-size: 20px;
+    block-size: 20px;
+  }
+
+  .Loader_size_l {
+    inline-size: 28px;
+    block-size: 28px;
+  }
+
+  .Loader_size_xl {
+    inline-size: 44px;
+    block-size: 44px;
+  }
+
+@keyframes spinner-border {
+  to {
+    transform: rotate(360deg);
+  }
+}

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

@@ -0,0 +1,21 @@
+import './Loader.css';
+import React from 'react';
+import type { HTMLAttributes } from 'react';
+export declare const loaderSizeVariant: readonly ["s", "m", "l", "xl"];
+export type LoaderSizeVariant = (typeof loaderSizeVariant)[number];
+export type LoaderProps = {
+    /** Дополнительный класс */
+    className?: string;
+    /** Размер прелоадера */
+    size?: LoaderSizeVariant;
+    /** Цвет */
+    color?: string;
+} & HTMLAttributes<HTMLDivElement>;
+export declare const Loader: React.ForwardRefExoticComponent<{
+    /** Дополнительный класс */
+    className?: string | undefined;
+    /** Размер прелоадера */
+    size?: "s" | "m" | "l" | "xl" | undefined;
+    /** Цвет */
+    color?: string | undefined;
+} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

package/__inner__/esm/components/Loader/Loader.js

@@ -0,0 +1,13 @@
+import { __assign, __rest } from "tslib";
+import './Loader.css';
+import React, { forwardRef } from 'react';
+import { useThemeProps } from '../../hooks/useThemeProps';
+import { cn } from '../../utils/classname';
+var cnLoader = cn('Loader');
+export var loaderSizeVariant = ['s', 'm', 'l', 'xl'];
+export var Loader = forwardRef(function (inProps, ref) {
+    var props = useThemeProps({ props: inProps, name: 'Loader' });
+    var _a = props.size, size = _a === void 0 ? 'm' : _a, className = props.className, color = props.color, _b = props["aria-label"], ariaLabel = _b === void 0 ? 'Загрузка' : _b, other = __rest(props, ["size", "className", "color", 'aria-label']);
+    return (React.createElement("div", __assign({ className: cnLoader({ size: size }, [className]) }, other, { "aria-label": ariaLabel, ref: ref, style: { '--loader-color': color } })));
+});
+Loader.displayName = 'Loader';

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

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

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

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

package/__inner__/esm/components/Menu/Menu.css

@@ -0,0 +1,33 @@
+.Menu {
+  --scroll-bar-size: 12px;
+}
+  .Menu::-webkit-scrollbar {
+    inline-size: var(--scroll-bar-size);
+  }
+  .Menu::-webkit-scrollbar-thumb {
+    background-color: var(--color-background-secondary);
+    border-radius: calc(var(--scroll-bar-size) / 2);
+    border: calc(var(--scroll-bar-size) / 4) solid transparent;
+    background-clip: padding-box;
+    border-image: initial;
+    min-block-size: 24px;
+  }
+  .Menu::-webkit-scrollbar-thumb:hover,
+    .Menu::-webkit-scrollbar-thumb:active {
+      border: calc(var(--scroll-bar-size) / 4) solid transparent;
+      background-clip: padding-box;
+    }
+  .Menu::-webkit-scrollbar-thumb:hover {
+      background-color: var(--color-background-secondary-hover);
+    }
+  .Menu::-webkit-scrollbar-thumb:active {
+      background-color: var(--color-background-secondary-pressed);
+    }
+  .Menu::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+  .Menu {
+  scroll-behavior: smooth;
+  overflow: hidden auto;
+  max-block-size: 40vb;
+}

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

@@ -0,0 +1,12 @@
+import './Menu.css';
+import React from 'react';
+import type { RefObject } from 'react';
+import { type PopoverProps } from '../Popover';
+import { type MenuListProps } from './components';
+export declare const cnMenu: import("@bem-react/classname").ClassNameFormatter;
+export type MenuProps = {
+    /** Свойства компонента MenuList */
+    menuListProps?: Omit<MenuListProps, 'children'>;
+    menuListRef?: RefObject<HTMLDivElement>;
+} & Omit<PopoverProps, 'disableEnforceFocus'>;
+export declare const Menu: React.ForwardRefExoticComponent<Omit<MenuProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/__inner__/esm/components/Menu/Menu.js

@@ -0,0 +1,34 @@
+import { __assign, __rest } from "tslib";
+import './Menu.css';
+import React, { forwardRef, useRef } from 'react';
+import { useEventListener } from '../../hooks/useEventListener';
+import { useThemeProps } from '../../hooks/useThemeProps';
+import { cn } from '../../utils/classname';
+import { isKey } from '../../utils/isKey';
+import { Popover, usePopover } from '../Popover';
+import { MenuList } from './components';
+export var cnMenu = cn('Menu');
+var MenuContextConsumer = function (_a) {
+    var children = _a.children, menuListRef = _a.menuListRef, onClose = _a.onClose, menuListProps = _a.menuListProps;
+    var isTop = usePopover().isTop;
+    var docRef = useRef(document);
+    useEventListener({
+        eventName: 'keydown',
+        handler: function (event) {
+            if (isKey(event, 'Tab')) {
+                event.preventDefault();
+                onClose === null || onClose === void 0 ? void 0 : onClose();
+            }
+        },
+        element: docRef,
+        active: isTop
+    });
+    return (React.createElement(MenuList, __assign({}, menuListProps, { ref: menuListRef, autoFocus: true }), children));
+};
+export var Menu = forwardRef(function (inProps, ref) {
+    var props = useThemeProps({ props: inProps, name: 'Menu' });
+    var open = props.open, menuListProps = props.menuListProps, menuListRef = props.menuListRef, onClose = props.onClose, children = props.children, className = props.className, other = __rest(props, ["open", "menuListProps", "menuListRef", "onClose", "children", "className"]);
+    return (React.createElement(Popover, __assign({ offset: [0, 4], className: cnMenu('', [className]) }, other, { open: open, onClose: onClose, disableEnforceFocus: true, ref: ref }),
+        React.createElement(MenuContextConsumer, { onClose: onClose, menuListRef: menuListRef, menuListProps: menuListProps }, children)));
+});
+Menu.displayName = 'Menu';

package/__inner__/esm/components/Menu/components/MenuItem/MenuItem.d.ts

@@ -0,0 +1,17 @@
+import { ElementType } from 'react';
+import { type PolymorphicComponentPropsWithoutRef } from '../../../../utils/polymorphicComponentWithRef';
+import { type ListItemButtonBaseProps } from '../../../List';
+import { LIST_ITEM_BUTTON_DEFAULT_TAG } from '../../../List/constants';
+export declare const cnMenuItem: import("@bem-react/classname").ClassNameFormatter;
+export type MenuItemBaseProps = ListItemButtonBaseProps & {
+    /** Если {true} отображает элемент меню как выбранный */
+    selected?: boolean;
+    /** Используется для вычисления лейбла выбранного элемента меню в выпадающих списках */
+    label?: string;
+    /** Используется для вычисления значения выбранного элемента меню в выпадающих списках */
+    value?: string | number;
+    /** Если {true} устанавливает автофокус */
+    autoFocus?: boolean;
+};
+export type MenuItemProps<As extends ElementType = typeof LIST_ITEM_BUTTON_DEFAULT_TAG> = PolymorphicComponentPropsWithoutRef<MenuItemBaseProps, As>;
+export declare const MenuItem: import("../../../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<MenuItemBaseProps, "div">;

package/__inner__/esm/components/Menu/components/MenuItem/MenuItem.js

@@ -0,0 +1,21 @@
+import { __assign, __rest } from "tslib";
+import React, { useEffect, useRef } from 'react';
+import { useMultiRef } from '../../../../hooks/useMultiRef';
+import { useThemeProps } from '../../../../hooks/useThemeProps';
+import { cn } from '../../../../utils/classname';
+import { polymorphicComponentWithRef, } from '../../../../utils/polymorphicComponentWithRef';
+import { cnListItemButton, ListItemButton, } from '../../../List';
+export var cnMenuItem = cn('MenuItem');
+export var MenuItem = polymorphicComponentWithRef(function (inProps, ref) {
+    var props = useThemeProps({ props: inProps, name: 'MenuItem' });
+    var children = props.children, selected = props.selected, value = props.value, label = props.label, _a = props.autoFocus, autoFocus = _a === void 0 ? false : _a, className = props.className, other = __rest(props, ["children", "selected", "value", "label", "autoFocus", "className"]);
+    var innerRef = useRef(null);
+    useEffect(function () {
+        var _a;
+        if (autoFocus) {
+            (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, [autoFocus]);
+    return (React.createElement(ListItemButton, __assign({ role: "menuitem" }, other, { ref: useMultiRef([ref, innerRef]), className: cnListItemButton({ selected: selected }, [className, cnMenuItem()]), "data-value": value, "data-label": label }), children));
+});
+MenuItem.displayName = 'MenuItem';

package/__inner__/esm/components/Menu/components/MenuItem/index.d.ts

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

package/__inner__/esm/components/Menu/components/MenuItem/index.js

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

package/__inner__/esm/components/Menu/components/MenuList/MenuList.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ListProps } from '../../../List';
+export type MenuListProps = {
+    /** Если {true} устанавливает автофокус на первый или выбранный элемент в списке */
+    autoFocus?: boolean;
+} & ListProps;
+export declare const MenuList: React.ForwardRefExoticComponent<Omit<MenuListProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/__inner__/esm/components/Menu/components/MenuList/MenuList.js

@@ -0,0 +1,62 @@
+import { __assign, __rest } from "tslib";
+import React, { forwardRef, useRef, isValidElement, Children } from 'react';
+import { isFragment } from 'react-is';
+import { useMultiRef } from '../../../../hooks/useMultiRef';
+import { useThemeProps } from '../../../../hooks/useThemeProps';
+import { List } from '../../../List';
+import { useMenuFocusList } from '../../useMenuFocusList';
+import { MenuItem } from '../MenuItem';
+export var MenuList = forwardRef(function (inProps, ref) {
+    var props = useThemeProps({ props: inProps, name: 'MenuList' });
+    var children = props.children, _a = props.autoFocus, autoFocus = _a === void 0 ? false : _a, other = __rest(props, ["children", "autoFocus"]);
+    var nodesRef = useRef([]);
+    var onKeyDown = useMenuFocusList(nodesRef.current).onKeyDown;
+    var activeItemIndex = -1;
+    var resolvedChildren = isFragment(children)
+        ? children.props.children
+        : children;
+    Children.forEach(resolvedChildren, function (child, index) {
+        if (!isValidElement(child) ||
+            (child === null || child === void 0 ? void 0 : child.type) !== MenuItem ||
+            child.props.disabled) {
+            return;
+        }
+        if (child.props.selected) {
+            activeItemIndex = index;
+        }
+        else if (activeItemIndex === -1) {
+            activeItemIndex = index;
+        }
+    });
+    return (React.createElement(List, __assign({ role: "menu", as: "div", tabIndex: -1, onClick: function (e) {
+            if (e.target === e.currentTarget) {
+                nodesRef.current[0].focus();
+            }
+        }, ref: ref }, other), Children.map(resolvedChildren, function (child, index) {
+        if (!isValidElement(child) ||
+            (child === null || child === void 0 ? void 0 : child.type) !== MenuItem ||
+            child.props.disabled) {
+            return child;
+        }
+        var isActiveElement = activeItemIndex === index;
+        var elementChild = child;
+        var props = {
+            tabIndex: isActiveElement ? 0 : -1,
+            autoFocus: autoFocus && isActiveElement,
+            onKeyDown: function (event) {
+                var _a, _b;
+                onKeyDown(event);
+                (_b = (_a = child.props).onKeyDown) === null || _b === void 0 ? void 0 : _b.call(_a, event);
+            }
+        };
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        var ref = useMultiRef([
+            elementChild.ref,
+            function (ref) {
+                nodesRef.current.push(ref);
+            },
+        ]);
+        return React.cloneElement(elementChild, __assign(__assign({}, props), { ref: ref }));
+    })));
+});
+MenuList.displayName = 'MenuList';

package/__inner__/esm/components/Menu/components/MenuList/index.d.ts

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

package/__inner__/esm/components/Menu/components/MenuList/index.js

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

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

@@ -0,0 +1,2 @@
+export * from './MenuList';
+export * from './MenuItem';

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

@@ -0,0 +1,2 @@
+export * from './MenuList';
+export * from './MenuItem';

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

@@ -0,0 +1,3 @@
+export { ListItemText as MenuItemText, ListItemIcon as MenuItemIcon, } from '../List';
+export * from './Menu';
+export * from './components';

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

@@ -0,0 +1,3 @@
+export { ListItemText as MenuItemText, ListItemIcon as MenuItemIcon, } from '../List';
+export * from './Menu';
+export * from './components';

package/__inner__/esm/components/Menu/useMenuFocusList.d.ts

@@ -0,0 +1,5 @@
+import type { KeyboardEvent } from 'react';
+export type MenuFocusProps = {
+    onKeyDown: (event: KeyboardEvent) => void;
+};
+export declare function useMenuFocusList(nodes: Array<HTMLElement>): MenuFocusProps;

package/__inner__/esm/components/Menu/useMenuFocusList.js

@@ -0,0 +1,25 @@
+import { useCallback, useEffect, useRef } from 'react';
+import { getNextIndex } from '../../utils/getNextIndex';
+import { getPrevIndex } from '../../utils/getPrevIndex';
+import { isKey } from '../../utils/isKey';
+export function useMenuFocusList(nodes) {
+    var savedNodes = useRef(nodes);
+    useEffect(function () {
+        savedNodes.current = nodes;
+    }, [nodes]);
+    var onKeyDown = useCallback(function (event) {
+        if (!isKey(event, 'ArrowUp') && !isKey(event, 'ArrowDown')) {
+            return;
+        }
+        event.preventDefault();
+        var items = savedNodes.current;
+        var currentEl = event.target;
+        var currentIndex = items.indexOf(currentEl);
+        var newIndex = isKey(event, 'ArrowUp')
+            ? getPrevIndex(currentIndex, items.length)
+            : getNextIndex(currentIndex, items.length);
+        var newEl = items[newIndex];
+        newEl === null || newEl === void 0 ? void 0 : newEl.focus();
+    }, []);
+    return { onKeyDown: onKeyDown };
+}

package/__inner__/esm/components/Modal/Modal.css

@@ -0,0 +1,70 @@
+.no-scroll {
+  overflow: hidden;
+}
+
+.Modal {
+  position: fixed;
+  z-index: var(--z-index-modal);
+  inset: 0;
+}
+
+.Modal:not(.Modal_hasBackdrop) {
+    pointer-events: none;
+  }
+
+.Modal:not(.Modal_hasBackdrop) .Modal-Window {
+      pointer-events: auto;
+    }
+
+.Modal-Window {
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: 50%;
+    transform: translate(-50%, -50%);
+    inline-size: 400px;
+    background-color: var(--color-background-main);
+    box-sizing: border-box;
+    border: 2px solid black;
+    padding: var(--space-2xl);
+  }
+
+.Modal_hidden {
+    visibility: hidden;
+  }
+
+.Modal_animation-enter .Modal-Window, .Modal_animation-appear .Modal-Window {
+      opacity: 0;
+      transform: translate(-50%, -50%) translateY(100px);
+    }
+
+.Modal_animation-enter-active .Modal-Window, .Modal_animation-appear-active .Modal-Window {
+      opacity: 1;
+      transition: opacity var(--transition-slow),
+        transform var(--transition-slow);
+      transform: translate(-50%, -50%) translateY(0);
+    }
+
+.Modal_animation-enter-done .Modal-Window {
+      opacity: 1;
+      transform: translate(-50%, -50%) translateY(0);
+    }
+
+.Modal_animation-exit .Modal-Window {
+      opacity: 1;
+      visibility: visible;
+      transform: translate(-50%, -50%) translateY(0);
+    }
+
+.Modal_animation-exit-active .Modal-Window {
+      opacity: 0;
+      visibility: visible;
+      transition: opacity var(--transition-slow),
+        transform var(--transition-slow);
+      transform: translate(-50%, -50%) translateY(100px);
+    }
+
+.Modal_animation-exit-done .Modal-Window {
+      opacity: 0;
+      transform: translate(-50%, -50%) translateY(100px);
+      visibility: hidden;
+    }

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

@@ -0,0 +1,52 @@
+import './Modal.css';
+import React from 'react';
+import type { ReactNode, ComponentPropsWithRef } from 'react';
+import { CSSTransitionProps } from 'react-transition-group/CSSTransition';
+import { BackdropProps } from '../Backdrop';
+import { PortalProps, PortalRef } from '../Portal';
+export declare const cnModal: import("@bem-react/classname").ClassNameFormatter;
+export type ModalProps = {
+    /** Признак по которому компонент будет представлен */
+    open?: boolean;
+    /** Содержимое модального окна */
+    children: ReactNode;
+    /** Функция обратного вызова которая будет вызвана до начала
+     * перехода компонента в состояние представлен */
+    onEnter?: () => void;
+    /** Функция обратного вызова которая будет вызвана после завершения
+     * перехода компонента в состояние представлен */
+    onEntered?: () => void;
+    /** Функция обратного вызова которая будет вызвана до начала
+     * перехода компонента в состояние не представлен */
+    onExit?: () => void;
+    /** Функция обратного вызова которая будет вызвана после
+     * завершения перехода в состояние не представлен */
+    onExited?: () => void;
+    /** Функция обратного вызова которая будет вызвана когда компонент запрашивает
+     *  закрытие (нажатие на клавишу {ESC}, клик по подложке Backdrop) */
+    onClose?: () => void;
+    /** Если {true} скрывает подложку */
+    hideBackdrop?: boolean;
+    /** Если {true} предотвращает размонтирование компонента при событии закрыть */
+    keepMounted?: boolean;
+    /** Свойства компонента Backdrop (подложка) */
+    backdropProps?: BackdropProps & {
+        'data-testid'?: string;
+    };
+    /** Свойства по управлению анимацией перехода */
+    transitionProps?: Partial<CSSTransitionProps> & {
+        'data-testid'?: string;
+    };
+    /** Свойства окна с контентом */
+    windowProps?: ComponentPropsWithRef<'div'> & {
+        'data-testid'?: string;
+    };
+    /** Кастомный класс контейнера модального окна */
+    className?: string;
+    /** Идентификатор компонента для тестов */
+    'data-testid'?: string;
+    /** Контейнер для монтирования всплывающего окна */
+    container?: PortalProps['container'];
+} & PortalProps;
+export type ModalRef = PortalRef;
+export declare const Modal: React.ForwardRefExoticComponent<Omit<ModalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/__inner__/esm/components/Modal/Modal.js

@@ -0,0 +1,82 @@
+import { __assign, __read, __rest, __spreadArray } from "tslib";
+import './Modal.css';
+import React, { useRef, useEffect, useState, useCallback, forwardRef, } from 'react';
+import { CSSTransition } from 'react-transition-group';
+import { useClickOutside } from '../../hooks/useClickOutside';
+import { useEventListener } from '../../hooks/useEventListener';
+import { useFocusTrap } from '../../hooks/useFocusTrap';
+import { useMultiRef } from '../../hooks/useMultiRef';
+import { cn } from '../../utils/classname';
+import { isKey } from '../../utils/isKey';
+import { Backdrop } from '../Backdrop';
+import { Portal } from '../Portal';
+import { useModalManager } from './index';
+export var cnModal = cn('Modal');
+export var Modal = forwardRef(function (_a, ref) {
+    var _b = _a.open, open = _b === void 0 ? false : _b, _c = _a.keepMounted, keepMounted = _c === void 0 ? false : _c, _d = _a.hideBackdrop, hideBackdrop = _d === void 0 ? false : _d, children = _a.children, onEnter = _a.onEnter, onEntered = _a.onEntered, onExit = _a.onExit, onExitedProp = _a.onExited, onClose = _a.onClose, backdropProps = _a.backdropProps, windowProps = _a.windowProps, transitionProps = _a.transitionProps, className = _a.className, other = __rest(_a, ["open", "keepMounted", "hideBackdrop", "children", "onEnter", "onEntered", "onExit", "onExited", "onClose", "backdropProps", "windowProps", "transitionProps", "className"]);
+    var hasBackdrop = !hideBackdrop;
+    var hasScrollOnBody = useRef(null);
+    var modalInnerRef = useRef(null);
+    var focusedElement = useRef(null);
+    var isClickOutSide = useRef(null);
+    var _e = __read(useState(false), 2), openState = _e[0], setOpenState = _e[1];
+    var _f = useModalManager(modalInnerRef, 1000, openState), isTop = _f.isTop, refsClickOutside = _f.refsClickOutside;
+    useClickOutside({
+        refs: __spreadArray([modalInnerRef], __read(refsClickOutside), false),
+        handler: function () {
+            isClickOutSide.current = true;
+            onClose === null || onClose === void 0 ? void 0 : onClose();
+        }
+    });
+    useEffect(function () {
+        var _a;
+        // Сохраняем фокус активного элемента до момента открытия всплывающего окна
+        if (open) {
+            isClickOutSide.current = null;
+            focusedElement.current =
+                document.activeElement;
+            (_a = focusedElement.current) === null || _a === void 0 ? void 0 : _a.blur();
+        }
+        setOpenState(open);
+    }, [open]);
+    var trapRef = useFocusTrap({
+        active: isTop,
+        focusinTrap: false
+    });
+    var onExited = useCallback(function () {
+        var _a, _b;
+        // Возвращаем фокус активного элемента
+        if (!isClickOutSide.current &&
+            (((_a = modalInnerRef.current) === null || _a === void 0 ? void 0 : _a.contains(document.activeElement)) ||
+                document.activeElement === document.body)) {
+            (_b = focusedElement.current) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+        onExitedProp === null || onExitedProp === void 0 ? void 0 : onExitedProp();
+    }, [onExitedProp]);
+    // Нажатие клавиши {ESC}
+    useEventListener({
+        eventName: 'keydown',
+        handler: function (event) {
+            if (!isKey(event, 'Escape')) {
+                return;
+            }
+            onClose === null || onClose === void 0 ? void 0 : onClose();
+        },
+        active: isTop
+    });
+    // Блокирует прокрутку основного окна приложения
+    useEffect(function () {
+        if (openState) {
+            hasScrollOnBody.current = document.body.classList.contains('no-scroll');
+            document.body.classList.add('no-scroll');
+        }
+        else if (!hasScrollOnBody.current) {
+            document.body.classList.remove('no-scroll');
+        }
+    }, [openState]);
+    return (React.createElement(CSSTransition, __assign({ classNames: cnModal({ animation: true }), timeout: 300 }, transitionProps, { "in": openState, onEnter: onEnter, onEntered: onEntered, onExit: onExit, onExited: onExited, unmountOnExit: !keepMounted, appear: true }),
+        React.createElement(Portal, __assign({}, other, { className: cnModal({ hidden: keepMounted && !openState, hasBackdrop: hasBackdrop }, [className]), ref: useMultiRef([modalInnerRef, ref]) }),
+            !hideBackdrop && (React.createElement(Backdrop, __assign({ zIndex: -1 }, backdropProps, { onClick: onClose, open: openState, className: backdropProps === null || backdropProps === void 0 ? void 0 : backdropProps.className }))),
+            React.createElement("div", __assign({}, windowProps, { className: cnModal('Window', [windowProps === null || windowProps === void 0 ? void 0 : windowProps.className]), tabIndex: -1, ref: useMultiRef([trapRef, windowProps === null || windowProps === void 0 ? void 0 : windowProps.ref]) }), children))));
+});
+Modal.displayName = 'Modal';

package/__inner__/esm/components/Modal/ModalManager.d.ts

@@ -0,0 +1,9 @@
+import { type RefObject } from 'react';
+import { type UsePortalManager } from '../Portal';
+type UseModalManager = {
+    portals: UsePortalManager['portals'];
+    refsClickOutside: RefObject<HTMLElement>[];
+    isTop: boolean;
+};
+export declare function useModalManager(ref: RefObject<HTMLElement>, key: number, open: boolean): UseModalManager;
+export {};

package/__inner__/esm/components/Modal/ModalManager.js

@@ -0,0 +1,27 @@
+import { useEffect } from 'react';
+import { usePortalManager } from '../Portal';
+export function useModalManager(ref, key, open) {
+    var _a;
+    var _b = usePortalManager(), portals = _b.portals, add = _b.add, remove = _b.remove;
+    var index = 0;
+    portals.forEach(function (portal, i) {
+        if (portal.ref === ref) {
+            index = i;
+        }
+    });
+    var refsClickOutside = index > -1 ? portals.slice(index + 1).map(function (_a) {
+        var ref = _a.ref;
+        return ref;
+    }) : [];
+    var filteredPortals = portals.filter(function (portal) { return portal.key === key; });
+    var isTop = ((_a = filteredPortals[filteredPortals.length - 1]) === null || _a === void 0 ? void 0 : _a.ref) === ref;
+    useEffect(function () {
+        if (open) {
+            add({ ref: ref, key: key });
+        }
+        return function () {
+            remove(ref);
+        };
+    }, [open, key]);
+    return { portals: portals, refsClickOutside: refsClickOutside, isTop: isTop };
+}

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

@@ -0,0 +1,2 @@
+export * from './Modal';
+export * from './ModalManager';

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

@@ -0,0 +1,2 @@
+export * from './Modal';
+export * from './ModalManager';

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

@@ -0,0 +1,13 @@
+.Pagination {
+  display: block;
+}
+
+.Pagination-List {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 2px;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import './Pagination.css';
+export declare const cnPagination: import("@bem-react/classname").ClassNameFormatter;
+export declare const Pagination: React.ForwardRefExoticComponent<import("./types").PaginationBaseProps & React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;