@ozen-ui/kit 0.0.1

package/__inner__/cjs/components/List/components/ListItemText/ListItemText.js

@@ -0,0 +1,25 @@
+"use strict";
+exports.__esModule = true;
+exports.ListItemText = void 0;
+var tslib_1 = require("tslib");
+require("./ListItemText.css");
+var react_1 = tslib_1.__importStar(require("react"));
+var classname_1 = require("../../../../utils/classname");
+var Typography_1 = require("../../../Typography");
+var ListContext_1 = require("../../ListContext");
+var cnListItemText = (0, classname_1.cn)('ListItemText');
+var secondaryTextSizeMapper = {
+    l: 'text-xs',
+    m: 'text-2xs',
+    s: 'text-3xs',
+    xs: 'text-3xs',
+    '2xs': 'text-3xs'
+};
+exports.ListItemText = (0, react_1.forwardRef)(function (_a, ref) {
+    var className = _a.className, primary = _a.primary, secondary = _a.secondary, primaryTypographyProps = _a.primaryTypographyProps, secondaryTypographyProps = _a.secondaryTypographyProps, other = tslib_1.__rest(_a, ["className", "primary", "secondary", "primaryTypographyProps", "secondaryTypographyProps"]);
+    var size = (0, ListContext_1.useListContext)().size;
+    return (react_1["default"].createElement("div", tslib_1.__assign({ className: cnListItemText({}, [className]) }, other, { ref: ref }),
+        react_1["default"].createElement(Typography_1.Typography, tslib_1.__assign({ className: cnListItemText('TextPrimary'), color: "primary", variant: "text-".concat(size), as: "span" }, primaryTypographyProps), primary),
+        !!secondary && (react_1["default"].createElement(Typography_1.Typography, tslib_1.__assign({ className: cnListItemText('TextSecondary'), color: "secondary", variant: secondaryTextSizeMapper[size], as: "span" }, secondaryTypographyProps), secondary))));
+});
+exports.ListItemText.displayName = 'ListItemText';

package/__inner__/cjs/components/List/components/ListItemText/index.d.ts

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

package/__inner__/cjs/components/List/components/ListItemText/index.js

@@ -0,0 +1,4 @@
+"use strict";
+exports.__esModule = true;
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./ListItemText"), exports);

package/__inner__/cjs/components/List/components/index.d.ts

@@ -0,0 +1,4 @@
+export * from './ListItem';
+export * from './ListItemText';
+export * from './ListItemIcon';
+export * from './ListItemButton';

package/__inner__/cjs/components/List/components/index.js

@@ -0,0 +1,7 @@
+"use strict";
+exports.__esModule = true;
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./ListItem"), exports);
+tslib_1.__exportStar(require("./ListItemText"), exports);
+tslib_1.__exportStar(require("./ListItemIcon"), exports);
+tslib_1.__exportStar(require("./ListItemButton"), exports);

package/__inner__/cjs/components/List/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const LIST_DEFAULT_SIZE = "m";
+export declare const LIST_DEFAULT_TAG = "ul";
+export declare const LIST_ITEM_DEFAULT_TAG = "li";
+export declare const LIST_ITEM_BUTTON_DEFAULT_TAG = "div";

package/__inner__/cjs/components/List/constants.js

@@ -0,0 +1,7 @@
+"use strict";
+exports.__esModule = true;
+exports.LIST_ITEM_BUTTON_DEFAULT_TAG = exports.LIST_ITEM_DEFAULT_TAG = exports.LIST_DEFAULT_TAG = exports.LIST_DEFAULT_SIZE = void 0;
+exports.LIST_DEFAULT_SIZE = 'm';
+exports.LIST_DEFAULT_TAG = 'ul';
+exports.LIST_ITEM_DEFAULT_TAG = 'li';
+exports.LIST_ITEM_BUTTON_DEFAULT_TAG = 'div';

package/__inner__/cjs/components/List/index.d.ts

@@ -0,0 +1,4 @@
+export * from './List';
+export * from './components';
+export * from './types';
+export { useListContext } from './ListContext';

package/__inner__/cjs/components/List/index.js

@@ -0,0 +1,9 @@
+"use strict";
+exports.__esModule = true;
+exports.useListContext = void 0;
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./List"), exports);
+tslib_1.__exportStar(require("./components"), exports);
+tslib_1.__exportStar(require("./types"), exports);
+var ListContext_1 = require("./ListContext");
+tslib_1.__createBinding(exports, ListContext_1, "useListContext");

package/__inner__/cjs/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__/cjs/components/List/types.js

@@ -0,0 +1,2 @@
+"use strict";
+exports.__esModule = true;

package/__inner__/cjs/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__/cjs/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__/cjs/components/Loader/Loader.js

@@ -0,0 +1,16 @@
+"use strict";
+exports.__esModule = true;
+exports.Loader = exports.loaderSizeVariant = void 0;
+var tslib_1 = require("tslib");
+require("./Loader.css");
+var react_1 = tslib_1.__importStar(require("react"));
+var useThemeProps_1 = require("../../hooks/useThemeProps");
+var classname_1 = require("../../utils/classname");
+var cnLoader = (0, classname_1.cn)('Loader');
+exports.loaderSizeVariant = ['s', 'm', 'l', 'xl'];
+exports.Loader = (0, react_1.forwardRef)(function (inProps, ref) {
+    var props = (0, useThemeProps_1.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 = tslib_1.__rest(props, ["size", "className", "color", 'aria-label']);
+    return (react_1["default"].createElement("div", tslib_1.__assign({ className: cnLoader({ size: size }, [className]) }, other, { "aria-label": ariaLabel, ref: ref, style: { '--loader-color': color } })));
+});
+exports.Loader.displayName = 'Loader';

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

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

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

@@ -0,0 +1,4 @@
+"use strict";
+exports.__esModule = true;
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Loader"), exports);

package/__inner__/cjs/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__/cjs/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__/cjs/components/Menu/Menu.js

@@ -0,0 +1,37 @@
+"use strict";
+exports.__esModule = true;
+exports.Menu = exports.cnMenu = void 0;
+var tslib_1 = require("tslib");
+require("./Menu.css");
+var react_1 = tslib_1.__importStar(require("react"));
+var useEventListener_1 = require("../../hooks/useEventListener");
+var useThemeProps_1 = require("../../hooks/useThemeProps");
+var classname_1 = require("../../utils/classname");
+var isKey_1 = require("../../utils/isKey");
+var Popover_1 = require("../Popover");
+var components_1 = require("./components");
+exports.cnMenu = (0, classname_1.cn)('Menu');
+var MenuContextConsumer = function (_a) {
+    var children = _a.children, menuListRef = _a.menuListRef, onClose = _a.onClose, menuListProps = _a.menuListProps;
+    var isTop = (0, Popover_1.usePopover)().isTop;
+    var docRef = (0, react_1.useRef)(document);
+    (0, useEventListener_1.useEventListener)({
+        eventName: 'keydown',
+        handler: function (event) {
+            if ((0, isKey_1.isKey)(event, 'Tab')) {
+                event.preventDefault();
+                onClose === null || onClose === void 0 ? void 0 : onClose();
+            }
+        },
+        element: docRef,
+        active: isTop
+    });
+    return (react_1["default"].createElement(components_1.MenuList, tslib_1.__assign({}, menuListProps, { ref: menuListRef, autoFocus: true }), children));
+};
+exports.Menu = (0, react_1.forwardRef)(function (inProps, ref) {
+    var props = (0, useThemeProps_1.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 = tslib_1.__rest(props, ["open", "menuListProps", "menuListRef", "onClose", "children", "className"]);
+    return (react_1["default"].createElement(Popover_1.Popover, tslib_1.__assign({ offset: [0, 4], className: (0, exports.cnMenu)('', [className]) }, other, { open: open, onClose: onClose, disableEnforceFocus: true, ref: ref }),
+        react_1["default"].createElement(MenuContextConsumer, { onClose: onClose, menuListRef: menuListRef, menuListProps: menuListProps }, children)));
+});
+exports.Menu.displayName = 'Menu';

package/__inner__/cjs/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__/cjs/components/Menu/components/MenuItem/MenuItem.js

@@ -0,0 +1,24 @@
+"use strict";
+exports.__esModule = true;
+exports.MenuItem = exports.cnMenuItem = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var useMultiRef_1 = require("../../../../hooks/useMultiRef");
+var useThemeProps_1 = require("../../../../hooks/useThemeProps");
+var classname_1 = require("../../../../utils/classname");
+var polymorphicComponentWithRef_1 = require("../../../../utils/polymorphicComponentWithRef");
+var List_1 = require("../../../List");
+exports.cnMenuItem = (0, classname_1.cn)('MenuItem');
+exports.MenuItem = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
+    var props = (0, useThemeProps_1.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 = tslib_1.__rest(props, ["children", "selected", "value", "label", "autoFocus", "className"]);
+    var innerRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(function () {
+        var _a;
+        if (autoFocus) {
+            (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, [autoFocus]);
+    return (react_1["default"].createElement(List_1.ListItemButton, tslib_1.__assign({ role: "menuitem" }, other, { ref: (0, useMultiRef_1.useMultiRef)([ref, innerRef]), className: (0, List_1.cnListItemButton)({ selected: selected }, [className, (0, exports.cnMenuItem)()]), "data-value": value, "data-label": label }), children));
+});
+exports.MenuItem.displayName = 'MenuItem';

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

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

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

@@ -0,0 +1,4 @@
+"use strict";
+exports.__esModule = true;
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./MenuItem"), exports);

package/__inner__/cjs/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__/cjs/components/Menu/components/MenuList/MenuList.js

@@ -0,0 +1,65 @@
+"use strict";
+exports.__esModule = true;
+exports.MenuList = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var react_is_1 = require("react-is");
+var useMultiRef_1 = require("../../../../hooks/useMultiRef");
+var useThemeProps_1 = require("../../../../hooks/useThemeProps");
+var List_1 = require("../../../List");
+var useMenuFocusList_1 = require("../../useMenuFocusList");
+var MenuItem_1 = require("../MenuItem");
+exports.MenuList = (0, react_1.forwardRef)(function (inProps, ref) {
+    var props = (0, useThemeProps_1.useThemeProps)({ props: inProps, name: 'MenuList' });
+    var children = props.children, _a = props.autoFocus, autoFocus = _a === void 0 ? false : _a, other = tslib_1.__rest(props, ["children", "autoFocus"]);
+    var nodesRef = (0, react_1.useRef)([]);
+    var onKeyDown = (0, useMenuFocusList_1.useMenuFocusList)(nodesRef.current).onKeyDown;
+    var activeItemIndex = -1;
+    var resolvedChildren = (0, react_is_1.isFragment)(children)
+        ? children.props.children
+        : children;
+    react_1.Children.forEach(resolvedChildren, function (child, index) {
+        if (!(0, react_1.isValidElement)(child) ||
+            (child === null || child === void 0 ? void 0 : child.type) !== MenuItem_1.MenuItem ||
+            child.props.disabled) {
+            return;
+        }
+        if (child.props.selected) {
+            activeItemIndex = index;
+        }
+        else if (activeItemIndex === -1) {
+            activeItemIndex = index;
+        }
+    });
+    return (react_1["default"].createElement(List_1.List, tslib_1.__assign({ role: "menu", as: "div", tabIndex: -1, onClick: function (e) {
+            if (e.target === e.currentTarget) {
+                nodesRef.current[0].focus();
+            }
+        }, ref: ref }, other), react_1.Children.map(resolvedChildren, function (child, index) {
+        if (!(0, react_1.isValidElement)(child) ||
+            (child === null || child === void 0 ? void 0 : child.type) !== MenuItem_1.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 = (0, useMultiRef_1.useMultiRef)([
+            elementChild.ref,
+            function (ref) {
+                nodesRef.current.push(ref);
+            },
+        ]);
+        return react_1["default"].cloneElement(elementChild, tslib_1.__assign(tslib_1.__assign({}, props), { ref: ref }));
+    })));
+});
+exports.MenuList.displayName = 'MenuList';

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

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

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

@@ -0,0 +1,4 @@
+"use strict";
+exports.__esModule = true;
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./MenuList"), exports);

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

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

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

@@ -0,0 +1,5 @@
+"use strict";
+exports.__esModule = true;
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./MenuList"), exports);
+tslib_1.__exportStar(require("./MenuItem"), exports);

package/__inner__/cjs/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__/cjs/components/Menu/index.js

@@ -0,0 +1,9 @@
+"use strict";
+exports.__esModule = true;
+exports.MenuItemIcon = exports.MenuItemText = void 0;
+var tslib_1 = require("tslib");
+var List_1 = require("../List");
+tslib_1.__createBinding(exports, List_1, "ListItemText", "MenuItemText");
+tslib_1.__createBinding(exports, List_1, "ListItemIcon", "MenuItemIcon");
+tslib_1.__exportStar(require("./Menu"), exports);
+tslib_1.__exportStar(require("./components"), exports);

package/__inner__/cjs/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__/cjs/components/Menu/useMenuFocusList.js

@@ -0,0 +1,29 @@
+"use strict";
+exports.__esModule = true;
+exports.useMenuFocusList = void 0;
+var react_1 = require("react");
+var getNextIndex_1 = require("../../utils/getNextIndex");
+var getPrevIndex_1 = require("../../utils/getPrevIndex");
+var isKey_1 = require("../../utils/isKey");
+function useMenuFocusList(nodes) {
+    var savedNodes = (0, react_1.useRef)(nodes);
+    (0, react_1.useEffect)(function () {
+        savedNodes.current = nodes;
+    }, [nodes]);
+    var onKeyDown = (0, react_1.useCallback)(function (event) {
+        if (!(0, isKey_1.isKey)(event, 'ArrowUp') && !(0, isKey_1.isKey)(event, 'ArrowDown')) {
+            return;
+        }
+        event.preventDefault();
+        var items = savedNodes.current;
+        var currentEl = event.target;
+        var currentIndex = items.indexOf(currentEl);
+        var newIndex = (0, isKey_1.isKey)(event, 'ArrowUp')
+            ? (0, getPrevIndex_1.getPrevIndex)(currentIndex, items.length)
+            : (0, getNextIndex_1.getNextIndex)(currentIndex, items.length);
+        var newEl = items[newIndex];
+        newEl === null || newEl === void 0 ? void 0 : newEl.focus();
+    }, []);
+    return { onKeyDown: onKeyDown };
+}
+exports.useMenuFocusList = useMenuFocusList;

package/__inner__/cjs/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__/cjs/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>>;