mimir-ui-kit 1.14.2 → 1.14.4

Sign up to get free protection for your applications and to get access to all the features.
package/README.md CHANGED
@@ -1,62 +1,62 @@
1
- # Mimir-ui
2
-
3
- ## Установка и запуск проекта
4
-
5
- 1. Установите зависимости:
6
- ```bash
7
- npm install
8
- ```
9
- 2. Запуск storybook
10
- ```bash
11
- npm run storybook
12
- ```
13
-
14
- ## Сборка проекта
15
-
16
- 1. Скрипт для сборки
17
- ```bash
18
- npm run build
19
- ```
20
-
21
- ## Создание нового компонента
22
-
23
- ```bash
24
- npm run create-component <ComponentName>
25
- ```
26
-
27
- ## Поднятие версии для публикации на npm
28
-
29
- Для поднятия версии пакета перед публикацией на npm используем следующие скрипты:
30
-
31
- 1. `patch`: Этот скрипт увеличивает версию пакета на один патч (например, с версии 1.0.0 до 1.0.1). Он автоматически обновляет версию в файле package.json и создает коммит с обновленной версией.
32
-
33
- ```bash
34
- npm version patch
35
- ```
36
-
37
- 2. `minor`: Этот скрипт увеличивает версию пакета на один минорный уровень (например, с версии 1.0.0 до 1.1.0). Также обновляет версию в package.json и создает коммит.
38
- ```bash
39
- npm version minor
40
- ```
41
- 3. `major`: Этот скрипт увеличивает версию пакета на один мажорный уровень (например, с версии 1.0.0 до 2.0.0). Он также обновляет версию в package.json и создает коммит.
42
- ```bash
43
- npm version major
44
- ```
45
-
46
- ## Публикация на npm
47
-
48
- 1. Скрипт для публикации на npm:
49
- ```bash
50
- npm publish
51
- ```
52
-
53
- ## Ручная Генерация иконок
54
-
55
- 1. Экспортируем с фигмы иконку.
56
- 2. Добавляем ее в папку svgs.
57
- 3. Запускаем скрипт:
58
- ```bash
59
- npm run icons
60
- ```
61
- 4. Смотрим в папку `icons/components`
62
- 5. Готово.
1
+ # Mimir-ui
2
+
3
+ ## Установка и запуск проекта
4
+
5
+ 1. Установите зависимости:
6
+ ```bash
7
+ npm install
8
+ ```
9
+ 2. Запуск storybook
10
+ ```bash
11
+ npm run storybook
12
+ ```
13
+
14
+ ## Сборка проекта
15
+
16
+ 1. Скрипт для сборки
17
+ ```bash
18
+ npm run build
19
+ ```
20
+
21
+ ## Создание нового компонента
22
+
23
+ ```bash
24
+ npm run create-component <ComponentName>
25
+ ```
26
+
27
+ ## Поднятие версии для публикации на npm
28
+
29
+ Для поднятия версии пакета перед публикацией на npm используем следующие скрипты:
30
+
31
+ 1. `patch`: Этот скрипт увеличивает версию пакета на один патч (например, с версии 1.0.0 до 1.0.1). Он автоматически обновляет версию в файле package.json и создает коммит с обновленной версией.
32
+
33
+ ```bash
34
+ npm version patch
35
+ ```
36
+
37
+ 2. `minor`: Этот скрипт увеличивает версию пакета на один минорный уровень (например, с версии 1.0.0 до 1.1.0). Также обновляет версию в package.json и создает коммит.
38
+ ```bash
39
+ npm version minor
40
+ ```
41
+ 3. `major`: Этот скрипт увеличивает версию пакета на один мажорный уровень (например, с версии 1.0.0 до 2.0.0). Он также обновляет версию в package.json и создает коммит.
42
+ ```bash
43
+ npm version major
44
+ ```
45
+
46
+ ## Публикация на npm
47
+
48
+ 1. Скрипт для публикации на npm:
49
+ ```bash
50
+ npm publish
51
+ ```
52
+
53
+ ## Ручная Генерация иконок
54
+
55
+ 1. Экспортируем с фигмы иконку.
56
+ 2. Добавляем ее в папку svgs.
57
+ 3. Запускаем скрипт:
58
+ ```bash
59
+ npm run icons
60
+ ```
61
+ 4. Смотрим в папку `icons/components`
62
+ 5. Готово.
@@ -1 +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}
1
+ ._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}
@@ -131,4 +131,56 @@ export declare const Button: import('react').ForwardRefExoticComponent<(Omit<imp
131
131
  * Идентификатор формы, к которой привязана кнопка.
132
132
  */
133
133
  formId?: string;
134
+ }, "ref"> | Omit<import('./types').TButtonOutlineFormProps & {
135
+ isIconButton: true;
136
+ iconName: TIcon;
137
+ leftIcon?: never;
138
+ rightIcon?: never;
139
+ } & import('react').ClassAttributes<HTMLButtonElement> & import('react').ButtonHTMLAttributes<HTMLButtonElement> & {
140
+ /**
141
+ * Класс, применяемый к корневому элементу кнопки.
142
+ */
143
+ className?: string;
144
+ /**
145
+ * Флаг, указывающий, отключена ли кнопка.
146
+ */
147
+ disabled?: boolean;
148
+ /**
149
+ * Флаг, указывающий, что кнопка занимает все доступное пространство.
150
+ */
151
+ full?: boolean;
152
+ /**
153
+ * Флаг, отключащий абсолютно все модификации кнопки (variant, size).
154
+ */
155
+ clear?: boolean;
156
+ /**
157
+ * Идентификатор формы, к которой привязана кнопка.
158
+ */
159
+ formId?: string;
160
+ }, "ref"> | Omit<import('./types').TButtonOutlineFormProps & {
161
+ isIconButton?: false;
162
+ iconName?: never;
163
+ leftIcon?: import('react').ReactNode;
164
+ rightIcon?: import('react').ReactNode;
165
+ } & import('react').ClassAttributes<HTMLButtonElement> & import('react').ButtonHTMLAttributes<HTMLButtonElement> & {
166
+ /**
167
+ * Класс, применяемый к корневому элементу кнопки.
168
+ */
169
+ className?: string;
170
+ /**
171
+ * Флаг, указывающий, отключена ли кнопка.
172
+ */
173
+ disabled?: boolean;
174
+ /**
175
+ * Флаг, указывающий, что кнопка занимает все доступное пространство.
176
+ */
177
+ full?: boolean;
178
+ /**
179
+ * Флаг, отключащий абсолютно все модификации кнопки (variant, size).
180
+ */
181
+ clear?: boolean;
182
+ /**
183
+ * Идентификатор формы, к которой привязана кнопка.
184
+ */
185
+ formId?: string;
134
186
  }, "ref">) & import('react').RefAttributes<HTMLButtonElement>>;
@@ -3,19 +3,19 @@ import { c as classNames } from "../../index-CweZ_OcN.js";
3
3
  import { forwardRef } from "react";
4
4
  import { EButtonVariantDefault, EButtonForm } from "./constants.js";
5
5
  import { Icon } from "../../icons/Icon.js";
6
- import '../../assets/Button.css';const button = "_button_ycj38_2";
7
- const clear = "_clear_ycj38_41";
8
- const xs = "_xs_ycj38_53";
9
- const s = "_s_ycj38_61";
10
- const m = "_m_ycj38_69";
11
- const l = "_l_ycj38_77";
12
- const xl = "_xl_ycj38_85";
13
- const xxl = "_xxl_ycj38_94";
14
- const black = "_black_ycj38_176";
15
- const gray = "_gray_ycj38_185";
16
- const white = "_white_ycj38_194";
17
- const full = "_full_ycj38_204";
18
- const disabled = "_disabled_ycj38_210";
6
+ import '../../assets/Button.css';const button = "_button_dmyer_2";
7
+ const clear = "_clear_dmyer_44";
8
+ const xs = "_xs_dmyer_56";
9
+ const s = "_s_dmyer_64";
10
+ const m = "_m_dmyer_72";
11
+ const l = "_l_dmyer_80";
12
+ const xl = "_xl_dmyer_88";
13
+ const xxl = "_xxl_dmyer_97";
14
+ const black = "_black_dmyer_179";
15
+ const gray = "_gray_dmyer_188";
16
+ const white = "_white_dmyer_197";
17
+ const full = "_full_dmyer_251";
18
+ const disabled = "_disabled_dmyer_257";
19
19
  const cls = {
20
20
  button,
21
21
  clear,
@@ -25,21 +25,26 @@ const cls = {
25
25
  l,
26
26
  xl,
27
27
  xxl,
28
- "m-s": "_m-s_ycj38_103",
29
- "default-button": "_default-button_ycj38_111",
30
- "primary-sapphire": "_primary-sapphire_ycj38_114",
31
- "primary-citrine": "_primary-citrine_ycj38_123",
32
- "secondary-asphalt": "_secondary-asphalt_ycj38_132",
33
- "secondary-gray": "_secondary-gray_ycj38_141",
34
- "secondary-white": "_secondary-white_ycj38_150",
35
- "secondary-red": "_secondary-red_ycj38_159",
36
- "round-button": "_round-button_ycj38_169",
28
+ "m-s": "_m-s_dmyer_106",
29
+ "default-button": "_default-button_dmyer_114",
30
+ "primary-sapphire": "_primary-sapphire_dmyer_117",
31
+ "primary-citrine": "_primary-citrine_dmyer_126",
32
+ "secondary-asphalt": "_secondary-asphalt_dmyer_135",
33
+ "secondary-gray": "_secondary-gray_dmyer_144",
34
+ "secondary-white": "_secondary-white_dmyer_153",
35
+ "secondary-red": "_secondary-red_dmyer_162",
36
+ "round-button": "_round-button_dmyer_172",
37
37
  black,
38
38
  gray,
39
39
  white,
40
+ "outline-button": "_outline-button_dmyer_207",
41
+ "outline-asphalt": "_outline-asphalt_dmyer_215",
42
+ "outline-gray": "_outline-gray_dmyer_223",
43
+ "outline-white": "_outline-white_dmyer_232",
44
+ "outline-red": "_outline-red_dmyer_241",
40
45
  full,
41
46
  disabled,
42
- "icon-button": "_icon-button_ycj38_221"
47
+ "icon-button": "_icon-button_dmyer_273"
43
48
  };
44
49
  const Button = forwardRef(
45
50
  (props, ref) => {
@@ -11,6 +11,12 @@ export declare enum EButtonVariantRound {
11
11
  Gray = "gray",
12
12
  White = "white"
13
13
  }
14
+ export declare enum EButtonVariantOutline {
15
+ Asphalt = "outline-asphalt",
16
+ Gray = "outline-gray",
17
+ White = "outline-white",
18
+ Red = "outline-red"
19
+ }
14
20
  export declare enum EButtonSize {
15
21
  XS = "xs",
16
22
  S = "s",
@@ -22,5 +28,6 @@ export declare enum EButtonSize {
22
28
  }
23
29
  export declare enum EButtonForm {
24
30
  DefaultButton = "default-button",
25
- RoundButton = "round-button"
31
+ RoundButton = "round-button",
32
+ OutlineButton = "outline-button"
26
33
  }
@@ -13,6 +13,13 @@ var EButtonVariantRound = /* @__PURE__ */ ((EButtonVariantRound2) => {
13
13
  EButtonVariantRound2["White"] = "white";
14
14
  return EButtonVariantRound2;
15
15
  })(EButtonVariantRound || {});
16
+ var EButtonVariantOutline = /* @__PURE__ */ ((EButtonVariantOutline2) => {
17
+ EButtonVariantOutline2["Asphalt"] = "outline-asphalt";
18
+ EButtonVariantOutline2["Gray"] = "outline-gray";
19
+ EButtonVariantOutline2["White"] = "outline-white";
20
+ EButtonVariantOutline2["Red"] = "outline-red";
21
+ return EButtonVariantOutline2;
22
+ })(EButtonVariantOutline || {});
16
23
  var EButtonSize = /* @__PURE__ */ ((EButtonSize2) => {
17
24
  EButtonSize2["XS"] = "xs";
18
25
  EButtonSize2["S"] = "s";
@@ -26,11 +33,13 @@ var EButtonSize = /* @__PURE__ */ ((EButtonSize2) => {
26
33
  var EButtonForm = /* @__PURE__ */ ((EButtonForm2) => {
27
34
  EButtonForm2["DefaultButton"] = "default-button";
28
35
  EButtonForm2["RoundButton"] = "round-button";
36
+ EButtonForm2["OutlineButton"] = "outline-button";
29
37
  return EButtonForm2;
30
38
  })(EButtonForm || {});
31
39
  export {
32
40
  EButtonForm,
33
41
  EButtonSize,
34
42
  EButtonVariantDefault,
43
+ EButtonVariantOutline,
35
44
  EButtonVariantRound
36
45
  };
@@ -1,2 +1,2 @@
1
1
  export { Button, type TProps as TButtonProps } from './Button';
2
- export { EButtonForm, EButtonSize, EButtonVariantDefault, EButtonVariantRound } from './constants';
2
+ export { EButtonForm, EButtonSize, EButtonVariantDefault, EButtonVariantRound, EButtonVariantOutline } from './constants';
@@ -1,9 +1,10 @@
1
1
  import { Button } from "./Button.js";
2
- import { EButtonForm, EButtonSize, EButtonVariantDefault, EButtonVariantRound } from "./constants.js";
2
+ import { EButtonForm, EButtonSize, EButtonVariantDefault, EButtonVariantOutline, EButtonVariantRound } from "./constants.js";
3
3
  export {
4
4
  Button,
5
5
  EButtonForm,
6
6
  EButtonSize,
7
7
  EButtonVariantDefault,
8
+ EButtonVariantOutline,
8
9
  EButtonVariantRound
9
10
  };
@@ -1,5 +1,5 @@
1
1
  import { ReactNode } from 'react';
2
- import { EButtonSize, EButtonVariantDefault, EButtonVariantRound, EButtonForm } from './constants';
2
+ import { EButtonSize, EButtonVariantDefault, EButtonVariantRound, EButtonForm, EButtonVariantOutline } from './constants';
3
3
  import { TIcon } from '../../icons';
4
4
 
5
5
  type TButtonRoundFormSize = Exclude<EButtonSize, 'xxl'> & Exclude<EButtonSize, 'xl'>;
@@ -13,6 +13,11 @@ export type TButtonRoundFormProps = {
13
13
  variant?: EButtonVariantRound | `${EButtonVariantRound}`;
14
14
  size?: TButtonRoundFormSize | `${TButtonRoundFormSize}`;
15
15
  };
16
+ export type TButtonOutlineFormProps = {
17
+ form?: EButtonForm.OutlineButton;
18
+ variant?: EButtonVariantOutline | `${EButtonVariantOutline}`;
19
+ size?: EButtonSize | `${EButtonSize}`;
20
+ };
16
21
  export type TButtonIsIconProps = {
17
22
  isIconButton: true;
18
23
  iconName: TIcon;
@@ -24,5 +29,5 @@ export type TButtonIsIconProps = {
24
29
  leftIcon?: ReactNode;
25
30
  rightIcon?: ReactNode;
26
31
  };
27
- export type TCommonButtonProps = (TButtonDefaultFormProps | TButtonRoundFormProps) & TButtonIsIconProps;
32
+ export type TCommonButtonProps = (TButtonDefaultFormProps | TButtonRoundFormProps | TButtonOutlineFormProps) & TButtonIsIconProps;
28
33
  export {};
@@ -33,7 +33,9 @@ type TProps = {
33
33
  /**
34
34
  * Кастомный footer. По дефолту в нем расположена кнопка для закрытия.
35
35
  */
36
- footer?: ReactNode;
36
+ footer?: ReactNode | ((props: {
37
+ handleClose: VoidFunction;
38
+ }) => JSX.Element);
37
39
  };
38
40
  /**
39
41
  * Компонент шторки, который может выезжать слева, справа или внизу.
@@ -124,7 +124,7 @@ const Drawer = ({
124
124
  ) })
125
125
  ] }),
126
126
  /* @__PURE__ */ jsx("div", { ref: contentRef, className: cls.inner, children }),
127
- /* @__PURE__ */ jsx("footer", { className: cls.footer, children: footer2 || /* @__PURE__ */ jsx(
127
+ /* @__PURE__ */ jsx("footer", { className: cls.footer, children: typeof footer2 === "function" ? footer2({ handleClose }) : footer2 || /* @__PURE__ */ jsx(
128
128
  Button,
129
129
  {
130
130
  size: isMobile ? EButtonSize.M : EButtonSize.XXL,
package/package.json CHANGED
@@ -1,128 +1,128 @@
1
- {
2
- "name": "mimir-ui-kit",
3
- "private": false,
4
- "version": "1.14.2",
5
- "type": "module",
6
- "exports": {
7
- ".": {
8
- "types": "./dist/index.d.ts",
9
- "default": "./dist/index.js"
10
- },
11
- "./components": {
12
- "types": "./dist/components/index.d.ts",
13
- "default": "./dist/components/index.js"
14
- },
15
- "./hooks": {
16
- "types": "./dist/hooks/index.d.ts",
17
- "default": "./dist/hooks/index.js"
18
- },
19
- "./icons": {
20
- "types": "./dist/icons/index.d.ts",
21
- "default": "./dist/icons/index.js"
22
- },
23
- "./styles": {
24
- "default": "./dist/assets/index.css"
25
- }
26
- },
27
- "module": "./dist/index.js",
28
- "types": "./dist/index.d.ts",
29
- "files": [
30
- "dist"
31
- ],
32
- "sideEffects": [
33
- "**/*.{css,scss}"
34
- ],
35
- "scripts": {
36
- "build": "tsc --p ./tsconfig-build.json && vite build",
37
- "storybook": "storybook dev -p 6006",
38
- "build-storybook": "storybook build",
39
- "ts:check": "tsc -b",
40
- "lint:fix": "eslint . --ext ts,tsx --fix",
41
- "lint:prettier": "npx prettier . --write",
42
- "lint:stylelint": "stylelint '**/*.module{.css,.scss}'",
43
- "lint:stylelint:fix": "stylelint '**/*.module{.css,.scss}' --fix",
44
- "icons": "svgr --expand-props start ./src/icons/svgs",
45
- "prepare": "husky",
46
- "create-component": "node createComponent.js"
47
- },
48
- "devDependencies": {
49
- "@chromatic-com/storybook": "^1.6.1",
50
- "@headlessui/react": "^2.1.2",
51
- "@laynezh/vite-plugin-lib-assets": "^0.5.23",
52
- "@loadable/component": "^5.15.2",
53
- "@storybook/addon-essentials": "^8.2.2",
54
- "@storybook/addon-interactions": "^8.2.2",
55
- "@storybook/addon-links": "^8.2.2",
56
- "@storybook/addon-onboarding": "^8.2.2",
57
- "@storybook/blocks": "^8.2.2",
58
- "@storybook/builder-vite": "^8.2.2",
59
- "@storybook/react": "^8.2.2",
60
- "@storybook/react-vite": "^8.2.2",
61
- "@storybook/test": "^8.2.2",
62
- "@svgr/cli": "^8.1.0",
63
- "@svgr/core": "^8.1.0",
64
- "@svgr/plugin-svgo": "^8.1.0",
65
- "@types/node": "^20.14.10",
66
- "@types/react": "^18.3.3",
67
- "@types/react-dom": "^18.3.0",
68
- "@typescript-eslint/eslint-plugin": "^7.13.1",
69
- "@typescript-eslint/parser": "^7.13.1",
70
- "@vitejs/plugin-react": "^4.3.1",
71
- "autoprefixer": "^10.4.19",
72
- "chalk": "4.1.2",
73
- "classnames": "^2.5.1",
74
- "dotenv": "^16.4.5",
75
- "eslint": "^8.57.0",
76
- "eslint-config-prettier": "^9.1.0",
77
- "eslint-plugin-import": "^2.29.1",
78
- "eslint-plugin-react-hooks": "^4.6.2",
79
- "eslint-plugin-react-refresh": "^0.4.7",
80
- "eslint-plugin-storybook": "^0.8.0",
81
- "glob": "10.3.10",
82
- "husky": "^9.0.11",
83
- "lint-staged": "^15.2.7",
84
- "p-limit": "^6.1.0",
85
- "postcss-preset-env": "^9.6.0",
86
- "prettier": "^3.3.3",
87
- "react": "^18.3.1",
88
- "react-dom": "^18.3.1",
89
- "sass": "^1.77.7",
90
- "storybook": "^8.2.2",
91
- "stylelint": "^16.7.0",
92
- "stylelint-config-idiomatic-order": "^10.0.0",
93
- "stylelint-config-rational-order": "^0.1.2",
94
- "stylelint-config-standard": "^36.0.1",
95
- "stylelint-order": "^6.0.4",
96
- "stylelint-prettier": "^5.0.0",
97
- "stylelint-scss": "^6.4.0",
98
- "superagent": "^9.0.2",
99
- "typescript": "^5.2.2",
100
- "vite": "^5.3.1",
101
- "vite-plugin-dts": "^3.9.1",
102
- "vite-plugin-lib-inject-css": "^2.1.1",
103
- "vite-plugin-svgr": "^4.2.0"
104
- },
105
- "peerDependencies": {
106
- "@headlessui/react": "^2.1.2",
107
- "react": "^18.3.1",
108
- "react-dom": "^18.3.1"
109
- },
110
- "husky": {
111
- "hooks": {
112
- "pre-commit": "lint-staged"
113
- }
114
- },
115
- "lint-staged": {
116
- "**/*.{ts,tsx}": [
117
- "eslint --ignore-path .eslintignore",
118
- "prettier --write"
119
- ],
120
- "**/*.{css,scss}": [
121
- "stylelint --fix"
122
- ]
123
- },
124
- "dependencies": {
125
- "swiper": "^11.1.5",
126
- "use-clipboard-copy": "^0.2.0"
127
- }
128
- }
1
+ {
2
+ "name": "mimir-ui-kit",
3
+ "private": false,
4
+ "version": "1.14.4",
5
+ "type": "module",
6
+ "exports": {
7
+ ".": {
8
+ "types": "./dist/index.d.ts",
9
+ "default": "./dist/index.js"
10
+ },
11
+ "./components": {
12
+ "types": "./dist/components/index.d.ts",
13
+ "default": "./dist/components/index.js"
14
+ },
15
+ "./hooks": {
16
+ "types": "./dist/hooks/index.d.ts",
17
+ "default": "./dist/hooks/index.js"
18
+ },
19
+ "./icons": {
20
+ "types": "./dist/icons/index.d.ts",
21
+ "default": "./dist/icons/index.js"
22
+ },
23
+ "./styles": {
24
+ "default": "./dist/assets/index.css"
25
+ }
26
+ },
27
+ "module": "./dist/index.js",
28
+ "types": "./dist/index.d.ts",
29
+ "files": [
30
+ "dist"
31
+ ],
32
+ "sideEffects": [
33
+ "**/*.{css,scss}"
34
+ ],
35
+ "scripts": {
36
+ "build": "tsc --p ./tsconfig-build.json && vite build",
37
+ "storybook": "storybook dev -p 6006",
38
+ "build-storybook": "storybook build",
39
+ "ts:check": "tsc -b",
40
+ "lint:fix": "eslint . --ext ts,tsx --fix",
41
+ "lint:prettier": "npx prettier . --write",
42
+ "lint:stylelint": "stylelint '**/*.module{.css,.scss}'",
43
+ "lint:stylelint:fix": "stylelint '**/*.module{.css,.scss}' --fix",
44
+ "icons": "svgr --expand-props start ./src/icons/svgs",
45
+ "prepare": "husky",
46
+ "create-component": "node createComponent.js"
47
+ },
48
+ "devDependencies": {
49
+ "@chromatic-com/storybook": "^1.6.1",
50
+ "@headlessui/react": "^2.1.2",
51
+ "@laynezh/vite-plugin-lib-assets": "^0.5.23",
52
+ "@loadable/component": "^5.15.2",
53
+ "@storybook/addon-essentials": "^8.2.2",
54
+ "@storybook/addon-interactions": "^8.2.2",
55
+ "@storybook/addon-links": "^8.2.2",
56
+ "@storybook/addon-onboarding": "^8.2.2",
57
+ "@storybook/blocks": "^8.2.2",
58
+ "@storybook/builder-vite": "^8.2.2",
59
+ "@storybook/react": "^8.2.2",
60
+ "@storybook/react-vite": "^8.2.2",
61
+ "@storybook/test": "^8.2.2",
62
+ "@svgr/cli": "^8.1.0",
63
+ "@svgr/core": "^8.1.0",
64
+ "@svgr/plugin-svgo": "^8.1.0",
65
+ "@types/node": "^20.14.10",
66
+ "@types/react": "^18.3.3",
67
+ "@types/react-dom": "^18.3.0",
68
+ "@typescript-eslint/eslint-plugin": "^7.13.1",
69
+ "@typescript-eslint/parser": "^7.13.1",
70
+ "@vitejs/plugin-react": "^4.3.1",
71
+ "autoprefixer": "^10.4.19",
72
+ "chalk": "4.1.2",
73
+ "classnames": "^2.5.1",
74
+ "dotenv": "^16.4.5",
75
+ "eslint": "^8.57.0",
76
+ "eslint-config-prettier": "^9.1.0",
77
+ "eslint-plugin-import": "^2.29.1",
78
+ "eslint-plugin-react-hooks": "^4.6.2",
79
+ "eslint-plugin-react-refresh": "^0.4.7",
80
+ "eslint-plugin-storybook": "^0.8.0",
81
+ "glob": "10.3.10",
82
+ "husky": "^9.0.11",
83
+ "lint-staged": "^15.2.7",
84
+ "p-limit": "^6.1.0",
85
+ "postcss-preset-env": "^9.6.0",
86
+ "prettier": "^3.3.3",
87
+ "react": "^18.3.1",
88
+ "react-dom": "^18.3.1",
89
+ "sass": "^1.77.7",
90
+ "storybook": "^8.2.2",
91
+ "stylelint": "^16.7.0",
92
+ "stylelint-config-idiomatic-order": "^10.0.0",
93
+ "stylelint-config-rational-order": "^0.1.2",
94
+ "stylelint-config-standard": "^36.0.1",
95
+ "stylelint-order": "^6.0.4",
96
+ "stylelint-prettier": "^5.0.0",
97
+ "stylelint-scss": "^6.4.0",
98
+ "superagent": "^9.0.2",
99
+ "typescript": "^5.2.2",
100
+ "vite": "^5.3.1",
101
+ "vite-plugin-dts": "^3.9.1",
102
+ "vite-plugin-lib-inject-css": "^2.1.1",
103
+ "vite-plugin-svgr": "^4.2.0"
104
+ },
105
+ "peerDependencies": {
106
+ "@headlessui/react": "^2.1.2",
107
+ "react": "^18.3.1",
108
+ "react-dom": "^18.3.1"
109
+ },
110
+ "husky": {
111
+ "hooks": {
112
+ "pre-commit": "lint-staged"
113
+ }
114
+ },
115
+ "lint-staged": {
116
+ "**/*.{ts,tsx}": [
117
+ "eslint --ignore-path .eslintignore",
118
+ "prettier --write"
119
+ ],
120
+ "**/*.{css,scss}": [
121
+ "stylelint --fix --formatter verbose"
122
+ ]
123
+ },
124
+ "dependencies": {
125
+ "swiper": "^11.1.5",
126
+ "use-clipboard-copy": "^0.2.0"
127
+ }
128
+ }