mimir-ui-kit 1.3.2 → 1.4.1

package/README.md

@@ -1,54 +1,54 @@
-# Mimir-ui
-
-## Установка и запуск проекта
-
-1. Установите зависимости:
-   ```bash
-   npm install
-   ```
-2. Запуск storybook
-   ```bash
-   npm run storybook
-   ```
-
-## Сборка проекта
-
-1. Скрипт для сборки
-   ```bash
-   npm run build
-   ```
-
-## Поднятие версии для публикации на npm
-
-Для поднятия версии пакета перед публикацией на npm используем следующие скрипты:
-
-1. `patch`: Этот скрипт увеличивает версию пакета на один патч (например, с версии 1.0.0 до 1.0.1). Он автоматически обновляет версию в файле package.json и создает коммит с обновленной версией.
-   ```bash
-   npm version patch
-   ```
-2. `minor`: Этот скрипт увеличивает версию пакета на один минорный уровень (например, с версии 1.0.0 до 1.1.0). Также обновляет версию в package.json и создает коммит.
-   ```bash
-   npm version minor
-   ```
-3. `major`: Этот скрипт увеличивает версию пакета на один мажорный уровень (например, с версии 1.0.0 до 2.0.0). Он также обновляет версию в package.json и создает коммит.
-   ```bash
-   npm version major
-   ```
-
-## Публикация на npm
-
-1. Скрипт для публикации на npm:
-   ```bash
-   npm publish
-   ```
-
-## Ручная Генерация иконок
-
-1. Экспортируем с фигмы иконку.
-2. Добавляем ее в папку svgs.
-3. Запускаем скрипт:
-   ```bash
-   npm run icons
-   ```
-4. Смотрим в папку `icons/components`
+# Mimir-ui
+
+## Установка и запуск проекта
+
+1. Установите зависимости:
+   ```bash
+   npm install
+   ```
+2. Запуск storybook
+   ```bash
+   npm run storybook
+   ```
+
+## Сборка проекта
+
+1. Скрипт для сборки
+   ```bash
+   npm run build
+   ```
+
+## Поднятие версии для публикации на npm
+
+Для поднятия версии пакета перед публикацией на npm используем следующие скрипты:
+
+1. `patch`: Этот скрипт увеличивает версию пакета на один патч (например, с версии 1.0.0 до 1.0.1). Он автоматически обновляет версию в файле package.json и создает коммит с обновленной версией.
+   ```bash
+   npm version patch
+   ```
+2. `minor`: Этот скрипт увеличивает версию пакета на один минорный уровень (например, с версии 1.0.0 до 1.1.0). Также обновляет версию в package.json и создает коммит.
+   ```bash
+   npm version minor
+   ```
+3. `major`: Этот скрипт увеличивает версию пакета на один мажорный уровень (например, с версии 1.0.0 до 2.0.0). Он также обновляет версию в package.json и создает коммит.
+   ```bash
+   npm version major
+   ```
+
+## Публикация на npm
+
+1. Скрипт для публикации на npm:
+   ```bash
+   npm publish
+   ```
+
+## Ручная Генерация иконок
+
+1. Экспортируем с фигмы иконку.
+2. Добавляем ее в папку svgs.
+3. Запускаем скрипт:
+   ```bash
+   npm run icons
+   ```
+4. Смотрим в папку `icons/components`
 5. Готово.

package/dist/assets/Button.css

@@ -1 +1 @@
-._button_1hqwa_2{--button-loader-color: var(--button-color);--button-cursor: pointer;position:relative;display:inline-flex;flex-shrink:0;align-items:center;box-sizing:border-box;max-width:100%;height:var(--button-height);padding:0 var(--button-space);overflow:hidden;color:var(--button-color);font-weight:var(--font-weight-text-semibold);font-size:var(--button-font-size);font-family:var(--font-inter);line-height:var(--line-height-text-s1);white-space:nowrap;-webkit-text-decoration:none;text-decoration:none;text-overflow:ellipsis;-moz-column-gap:var(--button-gap);column-gap:var(--button-gap);background:var(--button-bg-color);border:none;border-radius:var(--control-radius);cursor:pointer;cursor:var(--button-cursor);transition:background-color .3s ease,border-color .15s ease,box-shadow .15s ease,color .15s ease,fill .15s ease;-webkit-appearance:none;-moz-appearance:none;appearance:none}._button_1hqwa_2:hover{color:var(--button-color-hover);background:var(--button-bg-color-hover)}._button_1hqwa_2:active{color:var(--button-color-active);background:var(--button-bg-color-active)}._button_1hqwa_2:focus{box-shadow:0 0 2px var(--sapphire-normal)}._button_1hqwa_2._clear_1hqwa_41:focus{box-shadow:none}._button_1hqwa_2 svg{color:currentcolor;fill:currentcolor}._button_1hqwa_2 svg path{color:currentcolor;fill:currentcolor}._xs_1hqwa_53{--button-height: var(--button-height-xs);--button-font-size: var(--control-text-size-xs);--button-space: var(--control-space-xs);--button-gap: 4px;--button-border-radius: var(--button-border-radius-s)}._s_1hqwa_61{--button-height: var(--button-height-s);--button-font-size: var(--control-text-size-s);--button-space: var(--control-space-s);--button-gap: 4px;--button-border-radius: var(--button-border-radius-s)}._m_1hqwa_69{--button-height: var(--button-height-m);--button-font-size: var(--control-text-size-m);--button-space: var(--control-space-m);--button-gap: 8px;--button-border-radius: var(--button-border-radius-m)}._l_1hqwa_77{--button-height: var(--button-height-l);--button-font-size: var(--control-text-size-l);--button-space: var(--control-space-l);--button-gap: 8px;--button-border-radius: var(--button-border-radius-l)}._xl_1hqwa_85{--button-height: var(--button-height-xl);--button-space: var(--control-space-l);--button-gap: 8px;--button-border-radius: var(--button-border-radius-l);font-weight:var(--font-weight-text-medium);font-size:var(--size-text-l)}._xxl_1hqwa_94{--button-height: var(--button-height-xxl);--button-space: var(--control-space-xxl);--button-border-radius: var(--button-border-radius-l);--button-gap: 8px;font-weight:var(--font-weight-text-medium);font-size:var(--size-text-l)}._default-button_1hqwa_103._primary-sapphire_1hqwa_103{--button-bg-color: var(--sapphire-normal);--button-color-hover: var(--light-text);--button-color-active: var(--light-text);--button-bg-color-active: var(--sapphire-active);--button-bg-color-hover: var(--sapphire-hover);--button-color: var(--light-text);--button-border: transparent}._default-button_1hqwa_103._primary-citrine_1hqwa_112{--button-bg-color: var(--citrine-normal);--button-color-hover: var(--light-text);--button-color-active: var(--light-text);--button-bg-color-active: var(--citrine-active);--button-bg-color-hover: var(--citrine-hover);--button-color: var(--light-text);--button-border: transparent}._default-button_1hqwa_103._secondary-asphalt_1hqwa_121{--button-bg-color: var(--asphalt-normal);--button-color-hover: var(--light-text);--button-color-active: var(--light-text);--button-bg-color-active: var(--asphalt-active);--button-bg-color-hover: var(--asphalt-hover);--button-color: var(--light-text);--button-border: transparent}._default-button_1hqwa_103._secondary-gray_1hqwa_130{--button-bg-color: var(--gray-normal);--button-color-hover: var(--counter-text);--button-color-active: var(--light-text);--button-bg-color-active: var(--gray-active);--button-bg-color-hover: var(--gray-hover);--button-color: var(--dark-text);--button-border: transparent}._default-button_1hqwa_103._secondary-white_1hqwa_139{--button-bg-color: var(--white-normal);--button-color-hover: var(--counter-text);--button-color-active: var(--light-text);--button-bg-color-active: var(--white-active);--button-bg-color-hover: var(--white-hover);--button-color: var(--dark-text);--button-border: transparent}._default-button_1hqwa_103._secondary-red_1hqwa_148{--button-bg-color: var(--red-normal);--button-color-hover: var(--light-text);--button-color-active: var(--light-text);--button-bg-color-active: var(--red-active);--button-bg-color-hover: var(--red-hover);--button-color: var(--light-text);--button-border: transparent}._round-button_1hqwa_158{--button-border-radius-l: 24px;--button-border-radius-m: 20px;--button-border-radius-s: 16px;--button-border-radius-xs: 12px;border-radius:var(--button-border-radius)}._round-button_1hqwa_158._black_1hqwa_165{--button-bg-color: var(--asphalt-normal);--button-bg-color-hover: var(--asphalt-hover);--button-bg-color-active: var(--sapphire-normal);--button-bg-color-focus: var(--sapphire-normal);--button-color: var(--light-text);--button-color-hover: var(--light-text);--button-color-active: var(--light-text)}._round-button_1hqwa_158._gray_1hqwa_174{--button-bg-color: var(--gray-normal);--button-bg-color-hover: var(--gray-hover);--button-bg-color-active: var(--sapphire-normal);--button-bg-color-focus: var(--sapphire-normal);--button-color: var(--asphalt-normal);--button-color-hover: var(--asphalt-hover);--button-color-active: var(--light-text)}._round-button_1hqwa_158._white_1hqwa_183{--button-bg-color: var(--white-normal);--button-bg-color-hover: var(--white-hover);--button-bg-color-active: var(--sapphire-normal);--button-bg-color-focus: var(--sapphire-normal);--button-color: var(--asphalt-normal);--button-color-hover: var(--asphalt-hover);--button-color-active: var(--light-text)}._full_1hqwa_193{display:block;width:100%}._disabled_1hqwa_198{--button-cursor: not-allowed;color:var(--light-text);background-color:var(--disabled)}._disabled_1hqwa_198:hover,._disabled_1hqwa_198:active,._disabled_1hqwa_198:focus{color:var(--light-text);background-color:var(--disabled);box-shadow:none}._icon-button_1hqwa_209{justify-content:center;min-width:var(--button-height);padding:0}
+._button_6nidf_2{--button-loader-color: var(--button-color);--button-cursor: pointer;position:relative;display:inline-flex;flex-shrink:0;align-items:center;box-sizing:border-box;max-width:100%;height:var(--button-height);padding:0 var(--button-space);overflow:hidden;color:var(--button-color);font-weight:var(--font-weight-text-semibold);font-size:var(--button-font-size);font-family:var(--font-inter);line-height:var(--line-height-text-s1);white-space:nowrap;text-transform:uppercase;-webkit-text-decoration:none;text-decoration:none;text-overflow:ellipsis;-moz-column-gap:var(--button-gap);column-gap:var(--button-gap);background:var(--button-bg-color);border:none;border-radius:var(--control-radius);cursor:pointer;cursor:var(--button-cursor);transition:background-color .3s ease,border-color .15s ease,box-shadow .15s ease,color .15s ease,fill .15s ease;-webkit-appearance:none;-moz-appearance:none;appearance:none}._button_6nidf_2:hover{color:var(--button-color-hover);background:var(--button-bg-color-hover)}._button_6nidf_2:active{color:var(--button-color-active);background:var(--button-bg-color-active)}._button_6nidf_2:focus{box-shadow:0 0 2px var(--sapphire-normal)}._button_6nidf_2._clear_6nidf_42:focus{box-shadow:none}._button_6nidf_2 svg{color:currentcolor;fill:currentcolor}._button_6nidf_2 svg path{color:currentcolor;fill:currentcolor}._xs_6nidf_54{--button-height: var(--button-height-xs);--button-font-size: var(--control-text-size-xs);--button-space: var(--control-space-xs);--button-gap: 4px;--button-border-radius: var(--button-border-radius-s)}._s_6nidf_62{--button-height: var(--button-height-s);--button-font-size: var(--control-text-size-s);--button-space: var(--control-space-s);--button-gap: 4px;--button-border-radius: var(--button-border-radius-s)}._m_6nidf_70{--button-height: var(--button-height-m);--button-font-size: var(--size-text-m);--button-space: var(--control-space-m);--button-gap: 8px;--button-border-radius: var(--button-border-radius-m)}._l_6nidf_78{--button-height: var(--button-height-l);--button-font-size: var(--size-text-m);--button-space: var(--control-space-l);--button-gap: 8px;--button-border-radius: var(--button-border-radius-l)}._xl_6nidf_86{--button-height: var(--button-height-xl);--button-space: var(--control-space-l);--button-gap: 8px;--button-border-radius: var(--button-border-radius-l);--button-font-size: var(--size-text-m);font-weight:var(--font-weight-text-medium)}._xxl_6nidf_95{--button-height: var(--button-height-xxl);--button-space: var(--control-space-xxl);--button-border-radius: var(--button-border-radius-l);--button-gap: 8px;font-weight:var(--font-weight-text-medium);--button-font-size: var(--size-text-m)}._default-button_6nidf_104._primary-sapphire_6nidf_104{--button-bg-color: var(--sapphire-normal);--button-color-hover: var(--light-text);--button-color-active: var(--light-text);--button-bg-color-active: var(--sapphire-active);--button-bg-color-hover: var(--sapphire-hover);--button-color: var(--light-text);--button-border: transparent}._default-button_6nidf_104._primary-citrine_6nidf_113{--button-bg-color: var(--citrine-normal);--button-color-hover: var(--light-text);--button-color-active: var(--light-text);--button-bg-color-active: var(--citrine-active);--button-bg-color-hover: var(--citrine-hover);--button-color: var(--light-text);--button-border: transparent}._default-button_6nidf_104._secondary-asphalt_6nidf_122{--button-bg-color: var(--asphalt-normal);--button-color-hover: var(--light-text);--button-color-active: var(--light-text);--button-bg-color-active: var(--asphalt-active);--button-bg-color-hover: var(--asphalt-hover);--button-color: var(--light-text);--button-border: transparent}._default-button_6nidf_104._secondary-gray_6nidf_131{--button-bg-color: var(--gray-normal);--button-color-hover: var(--counter-text);--button-color-active: var(--light-text);--button-bg-color-active: var(--gray-active);--button-bg-color-hover: var(--gray-hover);--button-color: var(--dark-text);--button-border: transparent}._default-button_6nidf_104._secondary-white_6nidf_140{--button-bg-color: var(--white-normal);--button-color-hover: var(--counter-text);--button-color-active: var(--light-text);--button-bg-color-active: var(--white-active);--button-bg-color-hover: var(--white);--button-color: var(--dark-text);--button-border: transparent}._default-button_6nidf_104._secondary-red_6nidf_149{--button-bg-color: var(--red-normal);--button-color-hover: var(--light-text);--button-color-active: var(--light-text);--button-bg-color-active: var(--red-active);--button-bg-color-hover: var(--red-hover);--button-color: var(--light-text);--button-border: transparent}._round-button_6nidf_159{--button-border-radius-l: 24px;--button-border-radius-m: 20px;--button-border-radius-s: 16px;--button-border-radius-xs: 12px;border-radius:var(--button-border-radius)}._round-button_6nidf_159._black_6nidf_166{--button-bg-color: var(--asphalt-normal);--button-bg-color-hover: var(--asphalt-hover);--button-bg-color-active: var(--sapphire-normal);--button-bg-color-focus: var(--sapphire-normal);--button-color: var(--light-text);--button-color-hover: var(--light-text);--button-color-active: var(--light-text)}._round-button_6nidf_159._gray_6nidf_175{--button-bg-color: var(--gray-normal);--button-bg-color-hover: var(--gray-hover);--button-bg-color-active: var(--sapphire-normal);--button-bg-color-focus: var(--sapphire-normal);--button-color: var(--asphalt-normal);--button-color-hover: var(--asphalt-hover);--button-color-active: var(--light-text)}._round-button_6nidf_159._white_6nidf_184{--button-bg-color: var(--white-normal);--button-bg-color-hover: var(--white-hover);--button-bg-color-active: var(--sapphire-normal);--button-bg-color-focus: var(--sapphire-normal);--button-color: var(--asphalt-normal);--button-color-hover: var(--asphalt-hover);--button-color-active: var(--light-text)}._full_6nidf_194{display:flex;justify-content:center;width:100%}._disabled_6nidf_200{--button-cursor: not-allowed;color:var(--light-text);background-color:var(--disabled)}._disabled_6nidf_200:hover,._disabled_6nidf_200:active,._disabled_6nidf_200:focus{color:var(--light-text);background-color:var(--disabled);box-shadow:none}._icon-button_6nidf_211{justify-content:center;min-width:var(--button-height);padding:0}

package/dist/assets/Drawer.css

@@ -0,0 +1 @@
+._drawer_vy4rv_3{--drawer-width: 808px;--drawer-z-index: 1000;position:fixed;z-index:1000;z-index:var(--drawer-z-index);display:flex;flex-direction:column;width:808px;width:var(--drawer-width);height:100%;overflow:auto;background-color:var(--black-5);transition:all .3s ease;pointer-events:none}._drawer_vy4rv_3 ._content_vy4rv_17{position:relative;z-index:var(--modal-z-index);display:flex;flex:1;flex-direction:column;padding:var(--space-m) var(--space-4xl) var(--space-4xl);transition:all .3s ease}@media (max-width: 600px){._drawer_vy4rv_3 ._content_vy4rv_17{--drawer-width: 100%;padding:var(--space-m)}}._drawer_vy4rv_3 ._header_vy4rv_32{display:flex;gap:var(--space-xs);height:68px}._drawer_vy4rv_3 ._header_vy4rv_32:not(:last-child){margin-bottom:var(--space-2xl)}._drawer_vy4rv_3 ._header_vy4rv_32 ._title_vy4rv_40{flex:1;align-self:flex-end;font-weight:var(--font-weight-text-medium);font-size:var(--size-text-xl3);line-height:var(--line-height-text-s1);letter-spacing:.7px}@media (max-width: 600px){._drawer_vy4rv_3 ._header_vy4rv_32 ._title_vy4rv_40{font-size:var(--size-text-xl2);line-height:var(--line-height-text-xs)}}._drawer_vy4rv_3 ._header_vy4rv_32 ._space_vy4rv_54{flex:0 0 var(--button-height-m)}@media (max-width: 600px){._drawer_vy4rv_3 ._header_vy4rv_32{height:55px}._drawer_vy4rv_3 ._header_vy4rv_32:not(:last-child){margin-bottom:var(--space-m)}}._drawer_vy4rv_3 ._inner_vy4rv_65{flex:1}._drawer_vy4rv_3 ._button_vy4rv_68{position:absolute;top:var(--space-m);right:var(--space-m)}._drawer_vy4rv_3 ._footer_vy4rv_73{display:block;padding-top:var(--space-4xl)}@media (max-width: 600px){._drawer_vy4rv_3 ._footer_vy4rv_73{padding-top:var(--space-m)}}._drawer_vy4rv_3 ._footer-button_vy4rv_82{display:block;margin-left:auto}._drawer_vy4rv_3._left_vy4rv_86{top:0;left:-100%}._drawer_vy4rv_3._right_vy4rv_90{top:0;right:-100%}._drawer_vy4rv_3._bottom_vy4rv_94{right:50%;bottom:-100%;left:50%;max-height:80vh;border-top-left-radius:var(--control-radius);border-top-right-radius:var(--control-radius);transform:translate(-50%)}._drawer_vy4rv_3._opened_vy4rv_103{transition:all .3s ease;pointer-events:auto}._drawer_vy4rv_3._opened_vy4rv_103._left_vy4rv_86{left:0%;transition:left .3s ease}._drawer_vy4rv_3._opened_vy4rv_103._right_vy4rv_90{right:0%;transition:right .3s ease}._drawer_vy4rv_3._opened_vy4rv_103._bottom_vy4rv_94{bottom:0%}._drawer_vy4rv_3._is-closing_vy4rv_118._left_vy4rv_86{left:-100%}._drawer_vy4rv_3._is-closing_vy4rv_118._right_vy4rv_90{right:-100%}._drawer_vy4rv_3._is-closing_vy4rv_118._bottom_vy4rv_94{bottom:-100%}@media (max-width: 1440px){._drawer_vy4rv_3{--drawer-width: 608px}}@media (max-width: 1280px){._drawer_vy4rv_3{--drawer-width: 648px}}@media (max-width: 768px){._drawer_vy4rv_3{--drawer-width: 584px}}@media (max-width: 600px){._drawer_vy4rv_3{--drawer-width: 100%}._drawer_vy4rv_3._bottom_vy4rv_94{max-width:359px}}._overlay_vy4rv_151{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0009;opacity:0;transition:all .3s ease}._overlay_vy4rv_151._opened_vy4rv_103{opacity:1;transition:all .3s ease}._overlay_vy4rv_151._is-closing_vy4rv_118{opacity:0;transition:all .3s ease}

package/dist/components/Button/Button.d.ts

@@ -26,7 +26,6 @@ export type TProps = TCommonButtonProps & ComponentProps<'button'> & {
 };
 /**
  * Компонент кнопки, который можно настраивать с различными темами и размерами.
-
  */
 export declare const Button: import('react').ForwardRefExoticComponent<(Omit<import('./types').TButtonDefaultFormProps & {
     isIconButton: true;

package/dist/components/Button/Button.js

@@ -1,21 +1,21 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { c as classNames } from "../../index-CweZ_OcN.js";
+import { forwardRef } from "react";
 import { EButtonVariantDefault, EButtonForm } from "./constants.js";
 import { Icon } from "../../icons/Icon.js";
-import '../../assets/Button.css';const button = "_button_1hqwa_2";
-const clear = "_clear_1hqwa_41";
-const xs = "_xs_1hqwa_53";
-const s = "_s_1hqwa_61";
-const m = "_m_1hqwa_69";
-const l = "_l_1hqwa_77";
-const xl = "_xl_1hqwa_85";
-const xxl = "_xxl_1hqwa_94";
-const black = "_black_1hqwa_165";
-const gray = "_gray_1hqwa_174";
-const white = "_white_1hqwa_183";
-const full = "_full_1hqwa_193";
-const disabled = "_disabled_1hqwa_198";
+import '../../assets/Button.css';const button = "_button_6nidf_2";
+const clear = "_clear_6nidf_42";
+const xs = "_xs_6nidf_54";
+const s = "_s_6nidf_62";
+const m = "_m_6nidf_70";
+const l = "_l_6nidf_78";
+const xl = "_xl_6nidf_86";
+const xxl = "_xxl_6nidf_95";
+const black = "_black_6nidf_166";
+const gray = "_gray_6nidf_175";
+const white = "_white_6nidf_184";
+const full = "_full_6nidf_194";
+const disabled = "_disabled_6nidf_200";
 const cls = {
   button,
   clear,
@@ -25,20 +25,20 @@ const cls = {
   l,
   xl,
   xxl,
-  "default-button": "_default-button_1hqwa_103",
-  "primary-sapphire": "_primary-sapphire_1hqwa_103",
-  "primary-citrine": "_primary-citrine_1hqwa_112",
-  "secondary-asphalt": "_secondary-asphalt_1hqwa_121",
-  "secondary-gray": "_secondary-gray_1hqwa_130",
-  "secondary-white": "_secondary-white_1hqwa_139",
-  "secondary-red": "_secondary-red_1hqwa_148",
-  "round-button": "_round-button_1hqwa_158",
+  "default-button": "_default-button_6nidf_104",
+  "primary-sapphire": "_primary-sapphire_6nidf_104",
+  "primary-citrine": "_primary-citrine_6nidf_113",
+  "secondary-asphalt": "_secondary-asphalt_6nidf_122",
+  "secondary-gray": "_secondary-gray_6nidf_131",
+  "secondary-white": "_secondary-white_6nidf_140",
+  "secondary-red": "_secondary-red_6nidf_149",
+  "round-button": "_round-button_6nidf_159",
   black,
   gray,
   white,
   full,
   disabled,
-  "icon-button": "_icon-button_1hqwa_209"
+  "icon-button": "_icon-button_6nidf_211"
 };
 const Button = forwardRef(
   (props, ref) => {
@@ -68,9 +68,9 @@ const Button = forwardRef(
     };
     const buttonClassNames = classNames(
       cls.button,
+      className,
       mods,
-      clear2 ? [] : [cls[form ?? ""], cls[size]],
-      className
+      clear2 ? [] : [cls[form ?? ""], cls[size]]
     );
     return /* @__PURE__ */ jsxs(
       "button",

package/dist/components/Drawer/Drawer.d.ts

@@ -0,0 +1,38 @@
+import { PropsWithChildren, ReactNode } from 'react';
+import { EDrawerPosition } from './constants';
+
+type TProps = {
+    /**
+     * Обязательный заголовок.
+     */
+    title: string;
+    /**
+     * Флаг отвечачающий за показ/скрытие.
+     */
+    isOpen?: boolean;
+    /**
+     * Настраиваемый паддинг для body, что бы избежать скачка контента при overflow: hidden
+     */
+    paddingRight?: number;
+    /**
+     * Функция закрытия шторки
+     */
+    onClose?: VoidFunction;
+    /**
+     * Дополнительный класс для родительской обертки.
+     */
+    className?: string;
+    /**
+     * Позиция шторки.
+     */
+    position?: `${EDrawerPosition}` | EDrawerPosition;
+    /**
+     * Кастомный footer. По дефолту в нем расположена кнопка для закрытия.
+     */
+    footer?: ReactNode;
+};
+/**
+ * Компонент шторки, который может выезжать слева, справа или внизу.
+ */
+export declare const Drawer: ({ isOpen, onClose, title, className, position, paddingRight, footer, children }: PropsWithChildren<TProps>) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/Drawer/Drawer.js

@@ -0,0 +1,144 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { c as classNames } from "../../index-CweZ_OcN.js";
+import { useState, useRef, useCallback, useEffect } from "react";
+import { EDrawerPosition } from "./constants.js";
+import { useMediaQuery } from "../../hooks/useMediaQuery/useMediaQuery.js";
+import { EMediaQuery } from "../../hooks/useMediaQuery/constants.js";
+import { useLockBodyScroll } from "../../hooks/useLockBodyScroll/useLockBodyScroll.js";
+import { Button } from "../Button/Button.js";
+import { EButtonVariantDefault, EButtonSize } from "../Button/constants.js";
+import { Portal } from "../Portal/Portal.js";
+import '../../assets/Drawer.css';const drawer = "_drawer_vy4rv_3";
+const content = "_content_vy4rv_17";
+const header = "_header_vy4rv_32";
+const title = "_title_vy4rv_40";
+const space = "_space_vy4rv_54";
+const inner = "_inner_vy4rv_65";
+const button = "_button_vy4rv_68";
+const footer = "_footer_vy4rv_73";
+const left = "_left_vy4rv_86";
+const right = "_right_vy4rv_90";
+const bottom = "_bottom_vy4rv_94";
+const opened = "_opened_vy4rv_103";
+const overlay = "_overlay_vy4rv_151";
+const cls = {
+  drawer,
+  content,
+  header,
+  title,
+  space,
+  inner,
+  button,
+  footer,
+  "footer-button": "_footer-button_vy4rv_82",
+  left,
+  right,
+  bottom,
+  opened,
+  "is-closing": "_is-closing_vy4rv_118",
+  overlay
+};
+const ANIMATION_DELAY = 300;
+const Drawer = ({
+  isOpen,
+  onClose,
+  title: title2,
+  className,
+  position = EDrawerPosition.RIGHT,
+  paddingRight = 8,
+  footer: footer2,
+  children
+}) => {
+  const [isClosing, setIsClosing] = useState(false);
+  const [isMounted, setIsMounted] = useState(false);
+  const [isBodyScrollLocked, setIsBodyScrollLocked] = useState(false);
+  const timerRef = useRef();
+  const contentRef = useRef(null);
+  const isBottomPosition = position === EDrawerPosition.BOTTOM;
+  const isMobile = useMediaQuery(EMediaQuery.XS1);
+  useLockBodyScroll({
+    on: isBodyScrollLocked,
+    paddingRight
+  });
+  const handleClose = useCallback(() => {
+    if (onClose) {
+      setIsClosing(true);
+      setIsBodyScrollLocked(false);
+      timerRef.current = setTimeout(() => {
+        onClose();
+        setIsClosing(false);
+      }, ANIMATION_DELAY);
+    }
+  }, [onClose]);
+  const handleKeyDown = useCallback(
+    (event) => {
+      if (event.key === "Escape") {
+        handleClose();
+      }
+    },
+    [handleClose]
+  );
+  useEffect(() => {
+    if (isOpen) {
+      setIsBodyScrollLocked(true);
+      setIsMounted(true);
+      window.addEventListener("keydown", handleKeyDown);
+    }
+    return () => {
+      setIsMounted(false);
+      clearTimeout(timerRef.current);
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [isOpen, handleKeyDown]);
+  const mods = {
+    [cls.opened]: isMounted,
+    [cls["is-closing"]]: isClosing
+  };
+  if (!isOpen) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(Portal, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-hidden": isOpen,
+        role: "dialog",
+        style: {
+          minHeight: isBottomPosition && contentRef.current ? contentRef.current.offsetHeight : void 0
+        },
+        className: classNames(cls.drawer, cls[position], mods, className),
+        children: /* @__PURE__ */ jsxs("section", { className: classNames(cls.content, cls[position]), children: [
+          /* @__PURE__ */ jsxs("header", { className: cls.header, children: [
+            /* @__PURE__ */ jsx("h2", { className: cls.title, children: title2 }),
+            /* @__PURE__ */ jsx("div", { className: cls.space, children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: EButtonVariantDefault.SecondaryWhite,
+                isIconButton: true,
+                size: isMobile ? EButtonSize.S : EButtonSize.M,
+                iconName: "Close16px",
+                onClick: handleClose,
+                className: cls.button
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsx("div", { ref: contentRef, className: cls.inner, children }),
+          /* @__PURE__ */ jsx("footer", { className: cls.footer, children: footer2 || /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: isMobile ? EButtonSize.M : EButtonSize.XXL,
+              full: isMobile,
+              onClick: handleClose,
+              className: cls["footer-button"],
+              children: "Закрыть"
+            }
+          ) })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: classNames(cls.overlay, mods), onClick: handleClose })
+  ] });
+};
+export {
+  Drawer
+};

package/dist/components/Drawer/constants.d.ts

@@ -0,0 +1,5 @@
+export declare enum EDrawerPosition {
+    LEFT = "left",
+    RIGHT = "right",
+    BOTTOM = "bottom"
+}

package/dist/components/Drawer/constants.js

@@ -0,0 +1,9 @@
+var EDrawerPosition = /* @__PURE__ */ ((EDrawerPosition2) => {
+  EDrawerPosition2["LEFT"] = "left";
+  EDrawerPosition2["RIGHT"] = "right";
+  EDrawerPosition2["BOTTOM"] = "bottom";
+  return EDrawerPosition2;
+})(EDrawerPosition || {});
+export {
+  EDrawerPosition
+};

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

@@ -0,0 +1,2 @@
+export { Drawer } from './Drawer';
+export { EDrawerPosition } from './constants';

package/dist/components/Drawer/index.js

@@ -0,0 +1,6 @@
+import { Drawer } from "./Drawer.js";
+import { EDrawerPosition } from "./constants.js";
+export {
+  Drawer,
+  EDrawerPosition
+};

package/dist/components/Portal/Portal.d.ts

@@ -0,0 +1,7 @@
+import { PropsWithChildren } from 'react';
+
+type TProps = {
+    element?: HTMLElement;
+};
+export declare const Portal: ({ element, children }: PropsWithChildren<TProps>) => import('react').ReactPortal;
+export {};

package/dist/components/Portal/Portal.js

@@ -0,0 +1,10 @@
+import { createPortal } from "react-dom";
+const Portal = ({
+  element = document.body,
+  children
+}) => {
+  return createPortal(children, element);
+};
+export {
+  Portal
+};

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

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

package/dist/components/Portal/index.js

@@ -0,0 +1,4 @@
+import { Portal } from "./Portal.js";
+export {
+  Portal
+};

package/dist/components/index.d.ts

@@ -13,5 +13,7 @@ export type { TButtonPropsWithoutStyles } from './MergedButton';
 export { Image } from './Image';
 export { Loader } from './Loader';
 export { Slider } from './Slider';
+export { Drawer } from './Drawer';
+export { EDrawerPosition } from './Drawer';
 export { Steps, EStepsPrimaryColor, EStepsSecondaryColor, EStepsSize, type TCommonStepsProps } from './Steps';
 export { Vote, EVoteSize, type TCommonVoteProps } from './Vote';

package/dist/components/index.js

@@ -12,16 +12,20 @@ import { EMergedButtonVariantRound } from "./MergedButton/constants.js";
 import { AppImage } from "./Image/Image.js";
 import { Loader } from "./Loader/Loader.js";
 import { Slider } from "./Slider/Slider.js";
+import { Drawer } from "./Drawer/Drawer.js";
+import { EDrawerPosition } from "./Drawer/constants.js";
 import { Steps } from "./Steps/Steps.js";
 import { EStepsPrimaryColor, EStepsSecondaryColor, EStepsSize } from "./Steps/constants.js";
 import { Vote } from "./Vote/Vote.js";
 import { EVoteSize } from "./Vote/constants.js";
 export {
   Button,
+  Drawer,
   EButtonForm,
   EButtonSize,
   EButtonVariantDefault,
   EButtonVariantRound,
+  EDrawerPosition,
   EInputSize,
   EInputVariant,
   EMergedButtonVariantRound,

package/dist/hooks/index.d.ts

@@ -1 +1,2 @@
 export { useMediaQuery, EMediaQuery } from './useMediaQuery';
+export { useLockBodyScroll } from './useLockBodyScroll';

package/dist/hooks/index.js

@@ -1,6 +1,8 @@
 import { useMediaQuery } from "./useMediaQuery/useMediaQuery.js";
 import { EMediaQuery } from "./useMediaQuery/constants.js";
+import { useLockBodyScroll } from "./useLockBodyScroll/useLockBodyScroll.js";
 export {
   EMediaQuery,
+  useLockBodyScroll,
   useMediaQuery
 };

package/dist/hooks/useLockBodyScroll/index.d.ts

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

package/dist/hooks/useLockBodyScroll/index.js

@@ -0,0 +1,4 @@
+import { useLockBodyScroll } from "./useLockBodyScroll.js";
+export {
+  useLockBodyScroll
+};

package/dist/hooks/useLockBodyScroll/useLockBodyScroll.d.ts

@@ -0,0 +1,6 @@
+type TUseLockBodyScroll = {
+    on?: boolean;
+    paddingRight?: number;
+};
+export declare function useLockBodyScroll({ on, paddingRight }: TUseLockBodyScroll): void;
+export {};

package/dist/hooks/useLockBodyScroll/useLockBodyScroll.js

@@ -0,0 +1,20 @@
+import { useLayoutEffect } from "react";
+function useLockBodyScroll({ on, paddingRight }) {
+  useLayoutEffect(() => {
+    const hasVerticalScrollbar = document.documentElement.scrollHeight > document.documentElement.clientHeight;
+    if (!on || !hasVerticalScrollbar) return;
+    const originalStyle = window.getComputedStyle(document.body).overflow;
+    const originalPaddingStyle = window.getComputedStyle(
+      document.body
+    ).paddingRight;
+    document.body.style.overflow = "hidden";
+    document.body.style.paddingRight = `${paddingRight}px`;
+    return () => {
+      document.body.style.overflow = originalStyle;
+      document.body.style.paddingRight = originalPaddingStyle;
+    };
+  }, [on, paddingRight]);
+}
+export {
+  useLockBodyScroll
+};

package/dist/index.js

@@ -12,19 +12,24 @@ import { EMergedButtonVariantRound } from "./components/MergedButton/constants.j
 import { AppImage } from "./components/Image/Image.js";
 import { Loader } from "./components/Loader/Loader.js";
 import { Slider } from "./components/Slider/Slider.js";
+import { Drawer } from "./components/Drawer/Drawer.js";
+import { EDrawerPosition } from "./components/Drawer/constants.js";
 import { Steps } from "./components/Steps/Steps.js";
 import { EStepsPrimaryColor, EStepsSecondaryColor, EStepsSize } from "./components/Steps/constants.js";
 import { Vote } from "./components/Vote/Vote.js";
 import { EVoteSize } from "./components/Vote/constants.js";
 import { useMediaQuery } from "./hooks/useMediaQuery/useMediaQuery.js";
 import { EMediaQuery } from "./hooks/useMediaQuery/constants.js";
+import { useLockBodyScroll } from "./hooks/useLockBodyScroll/useLockBodyScroll.js";
 import { Icon } from "./icons/Icon.js";
 import './assets/index.css';export {
   Button,
+  Drawer,
   EButtonForm,
   EButtonSize,
   EButtonVariantDefault,
   EButtonVariantRound,
+  EDrawerPosition,
   EInputSize,
   EInputVariant,
   EMediaQuery,
@@ -47,5 +52,6 @@ import './assets/index.css';export {
   Vote,
   getMaskedInputPhoneValue,
   getUnmaskedInputValue,
+  useLockBodyScroll,
   useMediaQuery
 };

package/package.json

@@ -1,127 +1,127 @@
-{
-  "name": "mimir-ui-kit",
-  "private": false,
-  "version": "1.3.2",
-  "type": "module",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "default": "./dist/index.js"
-    },
-    "./components": {
-      "types": "./dist/components/index.d.ts",
-      "default": "./dist/components/index.js"
-    },
-    "./hooks": {
-      "types": "./dist/hooks/index.d.ts",
-      "default": "./dist/hooks/index.js"
-    },
-    "./icons": {
-      "types": "./dist/icons/index.d.ts",
-      "default": "./dist/icons/index.js"
-    },
-    "./styles": {
-      "default": "./dist/assets/index.css"
-    }
-  },
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "files": [
-    "dist"
-  ],
-  "sideEffects": [
-    "**/*.{css,scss}"
-  ],
-  "scripts": {
-    "build": "tsc --p ./tsconfig-build.json && vite build",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "ts:check": "tsc -b",
-    "lint:fix": "eslint . --ext ts,tsx --fix",
-    "lint:prettier": "npx prettier . --write",
-    "lint:stylelint": "stylelint '**/*.module{.css,.scss}'",
-    "lint:stylelint:fix": "stylelint '**/*.module{.css,.scss}' --fix",
-    "icons": "svgr --expand-props start ./src/icons/svgs",
-    "prepare": "husky"
-  },
-  "devDependencies": {
-    "@chromatic-com/storybook": "^1.6.1",
-    "@headlessui/react": "^2.1.2",
-    "@laynezh/vite-plugin-lib-assets": "^0.5.23",
-    "@loadable/component": "^5.15.2",
-    "@storybook/addon-essentials": "^8.2.2",
-    "@storybook/addon-interactions": "^8.2.2",
-    "@storybook/addon-links": "^8.2.2",
-    "@storybook/addon-onboarding": "^8.2.2",
-    "@storybook/blocks": "^8.2.2",
-    "@storybook/builder-vite": "^8.2.2",
-    "@storybook/react": "^8.2.2",
-    "@storybook/react-vite": "^8.2.2",
-    "@storybook/test": "^8.2.2",
-    "@svgr/cli": "^8.1.0",
-    "@svgr/core": "^8.1.0",
-    "@svgr/plugin-svgo": "^8.1.0",
-    "@types/node": "^20.14.10",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^7.13.1",
-    "@typescript-eslint/parser": "^7.13.1",
-    "@vitejs/plugin-react": "^4.3.1",
-    "autoprefixer": "^10.4.19",
-    "chalk": "4.1.2",
-    "classnames": "^2.5.1",
-    "dotenv": "^16.4.5",
-    "eslint": "^8.57.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-react-refresh": "^0.4.7",
-    "eslint-plugin-storybook": "^0.8.0",
-    "glob": "10.3.10",
-    "husky": "^9.0.11",
-    "lint-staged": "^15.2.7",
-    "p-limit": "^6.1.0",
-    "postcss-preset-env": "^9.6.0",
-    "prettier": "^3.3.3",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "sass": "^1.77.7",
-    "storybook": "^8.2.2",
-    "stylelint": "^16.7.0",
-    "stylelint-config-idiomatic-order": "^10.0.0",
-    "stylelint-config-rational-order": "^0.1.2",
-    "stylelint-config-standard": "^36.0.1",
-    "stylelint-order": "^6.0.4",
-    "stylelint-prettier": "^5.0.0",
-    "stylelint-scss": "^6.4.0",
-    "superagent": "^9.0.2",
-    "typescript": "^5.2.2",
-    "vite": "^5.3.1",
-    "vite-plugin-dts": "^3.9.1",
-    "vite-plugin-lib-inject-css": "^2.1.1",
-    "vite-plugin-svgr": "^4.2.0"
-  },
-  "peerDependencies": {
-    "@headlessui/react": "^2.1.2",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
-  "lint-staged": {
-    "**/*.{ts,tsx}": [
-      "eslint",
-      "prettier --write"
-    ],
-    "**/*.{css,scss}": [
-      "stylelint --fix"
-    ]
-  },
-  "dependencies": {
-    "swiper": "^11.1.5",
-    "use-clipboard-copy": "^0.2.0"
-  }
-}
+{
+  "name": "mimir-ui-kit",
+  "private": false,
+  "version": "1.4.1",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./components": {
+      "types": "./dist/components/index.d.ts",
+      "default": "./dist/components/index.js"
+    },
+    "./hooks": {
+      "types": "./dist/hooks/index.d.ts",
+      "default": "./dist/hooks/index.js"
+    },
+    "./icons": {
+      "types": "./dist/icons/index.d.ts",
+      "default": "./dist/icons/index.js"
+    },
+    "./styles": {
+      "default": "./dist/assets/index.css"
+    }
+  },
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.{css,scss}"
+  ],
+  "scripts": {
+    "build": "tsc --p ./tsconfig-build.json && vite build",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "ts:check": "tsc -b",
+    "lint:fix": "eslint . --ext ts,tsx --fix",
+    "lint:prettier": "npx prettier . --write",
+    "lint:stylelint": "stylelint '**/*.module{.css,.scss}'",
+    "lint:stylelint:fix": "stylelint '**/*.module{.css,.scss}' --fix",
+    "icons": "svgr --expand-props start ./src/icons/svgs",
+    "prepare": "husky"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^1.6.1",
+    "@headlessui/react": "^2.1.2",
+    "@laynezh/vite-plugin-lib-assets": "^0.5.23",
+    "@loadable/component": "^5.15.2",
+    "@storybook/addon-essentials": "^8.2.2",
+    "@storybook/addon-interactions": "^8.2.2",
+    "@storybook/addon-links": "^8.2.2",
+    "@storybook/addon-onboarding": "^8.2.2",
+    "@storybook/blocks": "^8.2.2",
+    "@storybook/builder-vite": "^8.2.2",
+    "@storybook/react": "^8.2.2",
+    "@storybook/react-vite": "^8.2.2",
+    "@storybook/test": "^8.2.2",
+    "@svgr/cli": "^8.1.0",
+    "@svgr/core": "^8.1.0",
+    "@svgr/plugin-svgo": "^8.1.0",
+    "@types/node": "^20.14.10",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^7.13.1",
+    "@typescript-eslint/parser": "^7.13.1",
+    "@vitejs/plugin-react": "^4.3.1",
+    "autoprefixer": "^10.4.19",
+    "chalk": "4.1.2",
+    "classnames": "^2.5.1",
+    "dotenv": "^16.4.5",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-refresh": "^0.4.7",
+    "eslint-plugin-storybook": "^0.8.0",
+    "glob": "10.3.10",
+    "husky": "^9.0.11",
+    "lint-staged": "^15.2.7",
+    "p-limit": "^6.1.0",
+    "postcss-preset-env": "^9.6.0",
+    "prettier": "^3.3.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "sass": "^1.77.7",
+    "storybook": "^8.2.2",
+    "stylelint": "^16.7.0",
+    "stylelint-config-idiomatic-order": "^10.0.0",
+    "stylelint-config-rational-order": "^0.1.2",
+    "stylelint-config-standard": "^36.0.1",
+    "stylelint-order": "^6.0.4",
+    "stylelint-prettier": "^5.0.0",
+    "stylelint-scss": "^6.4.0",
+    "superagent": "^9.0.2",
+    "typescript": "^5.2.2",
+    "vite": "^5.3.1",
+    "vite-plugin-dts": "^3.9.1",
+    "vite-plugin-lib-inject-css": "^2.1.1",
+    "vite-plugin-svgr": "^4.2.0"
+  },
+  "peerDependencies": {
+    "@headlessui/react": "^2.1.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "**/*.{ts,tsx}": [
+      "eslint",
+      "prettier --write"
+    ],
+    "**/*.{css,scss}": [
+      "stylelint --fix"
+    ]
+  },
+  "dependencies": {
+    "swiper": "^11.1.5",
+    "use-clipboard-copy": "^0.2.0"
+  }
+}