mimir-ui-kit 1.14.3 → 1.14.4

package/README.md

@@ -1,62 +1,62 @@
-# Mimir-ui
-
-## Установка и запуск проекта
-
-1. Установите зависимости:
-   ```bash
-   npm install
-   ```
-2. Запуск storybook
-   ```bash
-   npm run storybook
-   ```
-
-## Сборка проекта
-
-1. Скрипт для сборки
-   ```bash
-   npm run build
-   ```
-
-## Создание нового компонента
-
-```bash
-npm run create-component <ComponentName>
-```
-
-## Поднятие версии для публикации на 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. Готово.
+# Mimir-ui
+
+## Установка и запуск проекта
+
+1. Установите зависимости:
+   ```bash
+   npm install
+   ```
+2. Запуск storybook
+   ```bash
+   npm run storybook
+   ```
+
+## Сборка проекта
+
+1. Скрипт для сборки
+   ```bash
+   npm run build
+   ```
+
+## Создание нового компонента
+
+```bash
+npm run create-component <ComponentName>
+```
+
+## Поднятие версии для публикации на 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_ycj38_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;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_ycj38_2:hover{color:var(--button-color-hover);background:var(--button-bg-color-hover)}._button_ycj38_2:active{color:var(--button-color-active);background:var(--button-bg-color-active)}._button_ycj38_2:focus{box-shadow:0 0 2px var(--sapphire-normal)}._button_ycj38_2._clear_ycj38_41:focus{box-shadow:none}._button_ycj38_2 svg{color:currentcolor;fill:currentcolor}._button_ycj38_2 svg path{color:currentcolor;fill:currentcolor}._xs_ycj38_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_ycj38_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_ycj38_69{--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_ycj38_77{--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_ycj38_85{--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_ycj38_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);--button-font-size: var(--size-text-m)}._m-s_ycj38_103{--button-height: var(--button-height-ms);font-weight:var(--font-weight-text-regular);border-radius:var(--control-radius-xs)!important;--button-gap: var(--space-2xs);--button-font-size: var(--size-text-s)}._default-button_ycj38_111{border-radius:var(--control-radius)}._default-button_ycj38_111._primary-sapphire_ycj38_114{--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_ycj38_111._primary-citrine_ycj38_123{--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_ycj38_111._secondary-asphalt_ycj38_132{--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_ycj38_111._secondary-gray_ycj38_141{--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_ycj38_111._secondary-white_ycj38_150{--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_ycj38_111._secondary-red_ycj38_159{--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_ycj38_169{--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_ycj38_169._black_ycj38_176{--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_ycj38_169._gray_ycj38_185{--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_ycj38_169._white_ycj38_194{--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_ycj38_204{display:flex;justify-content:center;width:100%}._disabled_ycj38_210{--button-cursor: not-allowed;color:var(--light-text);background-color:var(--disabled)}._disabled_ycj38_210:hover,._disabled_ycj38_210:active,._disabled_ycj38_210:focus{color:var(--light-text);background-color:var(--disabled);box-shadow:none}._icon-button_ycj38_221{justify-content:center;min-width:var(--button-height);padding:0}
+._button_dmyer_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-color:var(--border-color);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_dmyer_2:hover{color:var(--button-color-hover);background:var(--button-bg-color-hover);border-color:var(--border-color-hover)}._button_dmyer_2:active{color:var(--button-color-active);background:var(--button-bg-color-active);border-color:var(--border-color-active)}._button_dmyer_2:focus{box-shadow:0 0 2px var(--sapphire-normal)}._button_dmyer_2._clear_dmyer_44:focus{box-shadow:none}._button_dmyer_2 svg{color:currentcolor;fill:currentcolor}._button_dmyer_2 svg path{color:currentcolor;fill:currentcolor}._xs_dmyer_56{--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_dmyer_64{--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_dmyer_72{--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_dmyer_80{--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_dmyer_88{--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_dmyer_97{--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)}._m-s_dmyer_106{--button-height: var(--button-height-ms);font-weight:var(--font-weight-text-regular);border-radius:var(--control-radius-xs)!important;--button-gap: var(--space-2xs);--button-font-size: var(--size-text-s)}._default-button_dmyer_114{border-radius:var(--control-radius)}._default-button_dmyer_114._primary-sapphire_dmyer_117{--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_dmyer_114._primary-citrine_dmyer_126{--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_dmyer_114._secondary-asphalt_dmyer_135{--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_dmyer_114._secondary-gray_dmyer_144{--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_dmyer_114._secondary-white_dmyer_153{--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_dmyer_114._secondary-red_dmyer_162{--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_dmyer_172{--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_dmyer_172._black_dmyer_179{--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_dmyer_172._gray_dmyer_188{--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_dmyer_172._white_dmyer_197{--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)}._outline-button_dmyer_207{--button-bg-color: transparent;--button-bg-color-hover: transparent;--button-bg-color-active: transparent;--button-bg-color-focus: transparent;border:1px solid var(--border-color);border-radius:var(--control-radius)}._outline-button_dmyer_207._outline-asphalt_dmyer_215{--border-color: var(--disabled-color);--button-color: var(--black-80);--border-color-hover: var(--black-80);--button-color-hover: var(--black-80);--border-color-active: var(--black-100);--button-color-active: var(--black-100)}._outline-button_dmyer_207._outline-gray_dmyer_223{--border-color: var(--black-5);--button-color: var(--black-5);--border-color-hover: var(--black-5);--button-color-hover: var(--counter-text);--border-color-active: var(--black-80);--button-color-active: var(--white);--button-bg-color-active: var(--black-80)}._outline-button_dmyer_207._outline-white_dmyer_232{--border-color: var(--white);--button-color: var(--white);--border-color-hover: var(--white);--button-color-hover: var(--counter-text);--border-color-active: var(--black-80);--button-color-active: var(--white);--button-bg-color-active: var(--black-80)}._outline-button_dmyer_207._outline-red_dmyer_241{--border-color: var(--error-normal);--button-color: var(--error-normal);--border-color-hover: var(--red-hover);--button-color-hover: var(--red-hover);--border-color-active: var(--red-active);--button-color-active: var(--white);--button-bg-color-active: var(--red-active)}._full_dmyer_251{display:flex;justify-content:center;width:100%}._disabled_dmyer_257{--button-cursor: not-allowed;color:var(--light-text);background-color:var(--disabled)}._disabled_dmyer_257:hover,._disabled_dmyer_257:active,._disabled_dmyer_257:focus{color:var(--light-text);background-color:var(--disabled);box-shadow:none}._disabled_dmyer_257._outline-button_dmyer_207{color:var(--disabled);background-color:transparent;border:1px solid var(--disabled)}._icon-button_dmyer_273{justify-content:center;min-width:var(--button-height);padding:0}

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

@@ -131,4 +131,56 @@ export declare const Button: import('react').ForwardRefExoticComponent<(Omit<imp
      * Идентификатор формы, к которой привязана кнопка.
      */
     formId?: string;
+}, "ref"> | Omit<import('./types').TButtonOutlineFormProps & {
+    isIconButton: true;
+    iconName: TIcon;
+    leftIcon?: never;
+    rightIcon?: never;
+} & import('react').ClassAttributes<HTMLButtonElement> & import('react').ButtonHTMLAttributes<HTMLButtonElement> & {
+    /**
+     * Класс, применяемый к корневому элементу кнопки.
+     */
+    className?: string;
+    /**
+     * Флаг, указывающий, отключена ли кнопка.
+     */
+    disabled?: boolean;
+    /**
+     * Флаг, указывающий, что кнопка занимает все доступное пространство.
+     */
+    full?: boolean;
+    /**
+     * Флаг, отключащий абсолютно все модификации кнопки (variant, size).
+     */
+    clear?: boolean;
+    /**
+     * Идентификатор формы, к которой привязана кнопка.
+     */
+    formId?: string;
+}, "ref"> | Omit<import('./types').TButtonOutlineFormProps & {
+    isIconButton?: false;
+    iconName?: never;
+    leftIcon?: import('react').ReactNode;
+    rightIcon?: import('react').ReactNode;
+} & import('react').ClassAttributes<HTMLButtonElement> & import('react').ButtonHTMLAttributes<HTMLButtonElement> & {
+    /**
+     * Класс, применяемый к корневому элементу кнопки.
+     */
+    className?: string;
+    /**
+     * Флаг, указывающий, отключена ли кнопка.
+     */
+    disabled?: boolean;
+    /**
+     * Флаг, указывающий, что кнопка занимает все доступное пространство.
+     */
+    full?: boolean;
+    /**
+     * Флаг, отключащий абсолютно все модификации кнопки (variant, size).
+     */
+    clear?: boolean;
+    /**
+     * Идентификатор формы, к которой привязана кнопка.
+     */
+    formId?: string;
 }, "ref">) & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/components/Button/Button.js

@@ -3,19 +3,19 @@ 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_ycj38_2";
-const clear = "_clear_ycj38_41";
-const xs = "_xs_ycj38_53";
-const s = "_s_ycj38_61";
-const m = "_m_ycj38_69";
-const l = "_l_ycj38_77";
-const xl = "_xl_ycj38_85";
-const xxl = "_xxl_ycj38_94";
-const black = "_black_ycj38_176";
-const gray = "_gray_ycj38_185";
-const white = "_white_ycj38_194";
-const full = "_full_ycj38_204";
-const disabled = "_disabled_ycj38_210";
+import '../../assets/Button.css';const button = "_button_dmyer_2";
+const clear = "_clear_dmyer_44";
+const xs = "_xs_dmyer_56";
+const s = "_s_dmyer_64";
+const m = "_m_dmyer_72";
+const l = "_l_dmyer_80";
+const xl = "_xl_dmyer_88";
+const xxl = "_xxl_dmyer_97";
+const black = "_black_dmyer_179";
+const gray = "_gray_dmyer_188";
+const white = "_white_dmyer_197";
+const full = "_full_dmyer_251";
+const disabled = "_disabled_dmyer_257";
 const cls = {
   button,
   clear,
@@ -25,21 +25,26 @@ const cls = {
   l,
   xl,
   xxl,
-  "m-s": "_m-s_ycj38_103",
-  "default-button": "_default-button_ycj38_111",
-  "primary-sapphire": "_primary-sapphire_ycj38_114",
-  "primary-citrine": "_primary-citrine_ycj38_123",
-  "secondary-asphalt": "_secondary-asphalt_ycj38_132",
-  "secondary-gray": "_secondary-gray_ycj38_141",
-  "secondary-white": "_secondary-white_ycj38_150",
-  "secondary-red": "_secondary-red_ycj38_159",
-  "round-button": "_round-button_ycj38_169",
+  "m-s": "_m-s_dmyer_106",
+  "default-button": "_default-button_dmyer_114",
+  "primary-sapphire": "_primary-sapphire_dmyer_117",
+  "primary-citrine": "_primary-citrine_dmyer_126",
+  "secondary-asphalt": "_secondary-asphalt_dmyer_135",
+  "secondary-gray": "_secondary-gray_dmyer_144",
+  "secondary-white": "_secondary-white_dmyer_153",
+  "secondary-red": "_secondary-red_dmyer_162",
+  "round-button": "_round-button_dmyer_172",
   black,
   gray,
   white,
+  "outline-button": "_outline-button_dmyer_207",
+  "outline-asphalt": "_outline-asphalt_dmyer_215",
+  "outline-gray": "_outline-gray_dmyer_223",
+  "outline-white": "_outline-white_dmyer_232",
+  "outline-red": "_outline-red_dmyer_241",
   full,
   disabled,
-  "icon-button": "_icon-button_ycj38_221"
+  "icon-button": "_icon-button_dmyer_273"
 };
 const Button = forwardRef(
   (props, ref) => {

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

@@ -11,6 +11,12 @@ export declare enum EButtonVariantRound {
     Gray = "gray",
     White = "white"
 }
+export declare enum EButtonVariantOutline {
+    Asphalt = "outline-asphalt",
+    Gray = "outline-gray",
+    White = "outline-white",
+    Red = "outline-red"
+}
 export declare enum EButtonSize {
     XS = "xs",
     S = "s",
@@ -22,5 +28,6 @@ export declare enum EButtonSize {
 }
 export declare enum EButtonForm {
     DefaultButton = "default-button",
-    RoundButton = "round-button"
+    RoundButton = "round-button",
+    OutlineButton = "outline-button"
 }

package/dist/components/Button/constants.js

@@ -13,6 +13,13 @@ var EButtonVariantRound = /* @__PURE__ */ ((EButtonVariantRound2) => {
   EButtonVariantRound2["White"] = "white";
   return EButtonVariantRound2;
 })(EButtonVariantRound || {});
+var EButtonVariantOutline = /* @__PURE__ */ ((EButtonVariantOutline2) => {
+  EButtonVariantOutline2["Asphalt"] = "outline-asphalt";
+  EButtonVariantOutline2["Gray"] = "outline-gray";
+  EButtonVariantOutline2["White"] = "outline-white";
+  EButtonVariantOutline2["Red"] = "outline-red";
+  return EButtonVariantOutline2;
+})(EButtonVariantOutline || {});
 var EButtonSize = /* @__PURE__ */ ((EButtonSize2) => {
   EButtonSize2["XS"] = "xs";
   EButtonSize2["S"] = "s";
@@ -26,11 +33,13 @@ var EButtonSize = /* @__PURE__ */ ((EButtonSize2) => {
 var EButtonForm = /* @__PURE__ */ ((EButtonForm2) => {
   EButtonForm2["DefaultButton"] = "default-button";
   EButtonForm2["RoundButton"] = "round-button";
+  EButtonForm2["OutlineButton"] = "outline-button";
   return EButtonForm2;
 })(EButtonForm || {});
 export {
   EButtonForm,
   EButtonSize,
   EButtonVariantDefault,
+  EButtonVariantOutline,
   EButtonVariantRound
 };

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

@@ -1,2 +1,2 @@
 export { Button, type TProps as TButtonProps } from './Button';
-export { EButtonForm, EButtonSize, EButtonVariantDefault, EButtonVariantRound } from './constants';
+export { EButtonForm, EButtonSize, EButtonVariantDefault, EButtonVariantRound, EButtonVariantOutline } from './constants';

package/dist/components/Button/index.js

@@ -1,9 +1,10 @@
 import { Button } from "./Button.js";
-import { EButtonForm, EButtonSize, EButtonVariantDefault, EButtonVariantRound } from "./constants.js";
+import { EButtonForm, EButtonSize, EButtonVariantDefault, EButtonVariantOutline, EButtonVariantRound } from "./constants.js";
 export {
   Button,
   EButtonForm,
   EButtonSize,
   EButtonVariantDefault,
+  EButtonVariantOutline,
   EButtonVariantRound
 };

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

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { EButtonSize, EButtonVariantDefault, EButtonVariantRound, EButtonForm } from './constants';
+import { EButtonSize, EButtonVariantDefault, EButtonVariantRound, EButtonForm, EButtonVariantOutline } from './constants';
 import { TIcon } from '../../icons';
 
 type TButtonRoundFormSize = Exclude<EButtonSize, 'xxl'> & Exclude<EButtonSize, 'xl'>;
@@ -13,6 +13,11 @@ export type TButtonRoundFormProps = {
     variant?: EButtonVariantRound | `${EButtonVariantRound}`;
     size?: TButtonRoundFormSize | `${TButtonRoundFormSize}`;
 };
+export type TButtonOutlineFormProps = {
+    form?: EButtonForm.OutlineButton;
+    variant?: EButtonVariantOutline | `${EButtonVariantOutline}`;
+    size?: EButtonSize | `${EButtonSize}`;
+};
 export type TButtonIsIconProps = {
     isIconButton: true;
     iconName: TIcon;
@@ -24,5 +29,5 @@ export type TButtonIsIconProps = {
     leftIcon?: ReactNode;
     rightIcon?: ReactNode;
 };
-export type TCommonButtonProps = (TButtonDefaultFormProps | TButtonRoundFormProps) & TButtonIsIconProps;
+export type TCommonButtonProps = (TButtonDefaultFormProps | TButtonRoundFormProps | TButtonOutlineFormProps) & TButtonIsIconProps;
 export {};

package/package.json

@@ -1,128 +1,128 @@
-{
-  "name": "mimir-ui-kit",
-  "private": false,
-  "version": "1.14.3",
-  "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",
-    "create-component": "node createComponent.js"
-  },
-  "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 --ignore-path .eslintignore",
-      "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.14.4",
+  "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",
+    "create-component": "node createComponent.js"
+  },
+  "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 --ignore-path .eslintignore",
+      "prettier --write"
+    ],
+    "**/*.{css,scss}": [
+      "stylelint --fix --formatter verbose"
+    ]
+  },
+  "dependencies": {
+    "swiper": "^11.1.5",
+    "use-clipboard-copy": "^0.2.0"
+  }
+}