@alfalab/core-components 36.2.0 → 36.3.1

package/tag/modern/default.css

@@ -53,39 +53,39 @@
 
     /* text color */
 }
-.tag__component_x0bqi {
+.tag__component_eqbj0 {
     color: var(--tag-text-color);
     border-color: var(--tag-border-color);
     background-color: var(--tag-background-color)
 }
-.tag__component_x0bqi:disabled {
+.tag__component_eqbj0:disabled {
         border-color: var(--tag-border-color-disabled);
         color: var(--tag-text-color-disabled);
         background-color: var(--tag-background-color-disabled);
     }
-.tag__component_x0bqi:hover:not(:disabled) {
+.tag__component_eqbj0:hover:not(:disabled) {
         border-color: var(--tag-border-color-hover);
         background-color: var(--tag-background-color-hover);
     }
-.tag__component_x0bqi:active:not(:disabled) {
+.tag__component_eqbj0:active:not(:disabled) {
         border-color: var(--tag-border-color-active);
         background-color: var(--tag-background-color-active);
         color: var(--tag-text-color);
     }
-.tag__checked_x0bqi {
+.tag__checked_eqbj0 {
     border-color: var(--tag-border-color-checked);
     background-color: var(--tag-background-color-checked);
     color: var(--tag-text-color-checked)
 }
-.tag__checked_x0bqi:disabled {
+.tag__checked_eqbj0:disabled {
         background-color: var(--tag-background-color-checked-disabled);
         border-color: var(--tag-border-color-checked-disabled);
         color: var(--tag-text-color-checked-disabled);
     }
-.tag__checked_x0bqi:hover:not(:disabled):not(:active) {
+.tag__checked_eqbj0:hover:not(:disabled):not(:active) {
         background-color: var(--tag-background-color-checked-hover);
     }
-.tag__checked_x0bqi:active:not(:disabled) {
+.tag__checked_eqbj0:active:not(:disabled) {
         background-color: var(--tag-background-color-checked-active);
         color: var(--tag-text-color-checked);
     }

package/tag/modern/index.css

@@ -52,7 +52,7 @@
 
     /* text color */
 }
-.tag__component_1ikd5 {
+.tag__component_10acy {
     display: inline-flex;
     justify-content: center;
     align-content: center;
@@ -70,40 +70,40 @@
     cursor: pointer;
     outline: none
 }
-.tag__component_1ikd5:disabled {
+.tag__component_10acy:disabled {
         cursor: var(--disabled-cursor);
     }
-.tag__focused_1ikd5 {
+.tag__focused_10acy {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }
-.tag__addons_1ikd5 {
+.tag__addons_10acy {
     display: flex;
     flex-shrink: 0;
     align-items: center
 }
-.tag__addons_1ikd5:first-child {
+.tag__addons_10acy:first-child {
         margin-right: var(--gap-2xs);
     }
-.tag__addons_1ikd5:last-child {
+.tag__addons_10acy:last-child {
         margin-left: var(--gap-2xs);
     }
-.tag__addons_1ikd5:only-child {
+.tag__addons_10acy:only-child {
         margin: 0;
     }
-.tag__s_1ikd5 .tag__addons_1ikd5:first-child, .tag__m_1ikd5 .tag__addons_1ikd5:first-child {
+.tag__s_10acy .tag__addons_10acy:first-child, .tag__m_10acy .tag__addons_10acy:first-child {
         margin-right: var(--gap-xs);
     }
-.tag__s_1ikd5 .tag__addons_1ikd5:last-child, .tag__m_1ikd5 .tag__addons_1ikd5:last-child {
+.tag__s_10acy .tag__addons_10acy:last-child, .tag__m_10acy .tag__addons_10acy:last-child {
         margin-left: var(--gap-xs);
     }
-.tag__l_1ikd5 .tag__addons_1ikd5:first-child, .tag__xl_1ikd5 .tag__addons_1ikd5:first-child {
+.tag__l_10acy .tag__addons_10acy:first-child, .tag__xl_10acy .tag__addons_10acy:first-child {
         margin-right: var(--gap-s);
     }
-.tag__l_1ikd5 .tag__addons_1ikd5:last-child, .tag__xl_1ikd5 .tag__addons_1ikd5:last-child {
+.tag__l_10acy .tag__addons_10acy:last-child, .tag__xl_10acy .tag__addons_10acy:last-child {
         margin-left: var(--gap-s);
     }
-.tag__xxs_1ikd5 {
+.tag__xxs_10acy {
     min-width: 60px;
     min-height: var(--size-xs-height);
     padding: 0 var(--gap-m);
@@ -112,13 +112,13 @@
     font-weight: normal
 }
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-.tag__xxs_1ikd5 {
+.tag__xxs_10acy {
         /* Хак для ие, в котором не работает центрирование по высоте с использованием флексов, если указан min-height
         Возможно другое решение - если в будущем у компонента появится обертка, установить ей display: flex / inline-flex */
         height: 32px
 }
     }
-.tag__xs_1ikd5 {
+.tag__xs_10acy {
     min-width: 72px;
     min-height: 40px;
     padding: 0 var(--gap-l);
@@ -127,13 +127,13 @@
     font-weight: normal
 }
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-.tag__xs_1ikd5 {
+.tag__xs_10acy {
         /* Хак для ие, в котором не работает центрирование по высоте с использованием флексов, если указан min-height
         Возможно другое решение - если в будущем у компонента появится обертка, установить ей display: flex / inline-flex */
         height: 40px
 }
     }
-.tag__s_1ikd5 {
+.tag__s_10acy {
     min-width: 80px;
     min-height: var(--size-s-height);
     padding: 0 var(--gap-xl);
@@ -142,13 +142,13 @@
     font-weight: normal
 }
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-.tag__s_1ikd5 {
+.tag__s_10acy {
         /* Хак для ие, в котором не работает центрирование по высоте с использованием флексов, если указан min-height
         Возможно другое решение - если в будущем у компонента появится обертка, установить ей display: flex / inline-flex */
         height: 48px
 }
     }
-.tag__m_1ikd5 {
+.tag__m_10acy {
     font-size: 16px;
     line-height: 20px;
     font-weight: 500;
@@ -157,13 +157,13 @@
     padding: 0 28px
 }
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-.tag__m_1ikd5 {
+.tag__m_10acy {
         /* Хак для ие, в котором не работает центрирование по высоте с использованием флексов, если указан min-height
         Возможно другое решение - если в будущем у компонента появится обертка, установить ей display: flex / inline-flex */
         height: 56px
 }
     }
-.tag__l_1ikd5 {
+.tag__l_10acy {
     font-size: 18px;
     line-height: 24px;
     font-weight: 500;
@@ -172,13 +172,13 @@
     padding: 0 var(--gap-2xl)
 }
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-.tag__l_1ikd5 {
+.tag__l_10acy {
         /* Хак для ие, в котором не работает центрирование по высоте с использованием флексов, если указан min-height
         Возможно другое решение - если в будущем у компонента появится обертка, установить ей display: flex / inline-flex */
         height: 64px
 }
     }
-.tag__xl_1ikd5 {
+.tag__xl_10acy {
     font-size: 18px;
     line-height: 24px;
     font-weight: 500;
@@ -187,51 +187,51 @@
     padding: 0 36px
 }
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-.tag__xl_1ikd5 {
+.tag__xl_10acy {
         /* Хак для ие, в котором не работает центрирование по высоте с использованием флексов, если указан min-height
         Возможно другое решение - если в будущем у компонента появится обертка, установить ей display: flex / inline-flex */
         height: 72px
 }
     }
-.tag__withRightAddons_1ikd5.tag__xxs_1ikd5 {
+.tag__withRightAddons_10acy.tag__xxs_10acy {
         padding-right: var(--gap-s);
     }
-.tag__withRightAddons_1ikd5.tag__xs_1ikd5 {
+.tag__withRightAddons_10acy.tag__xs_10acy {
         padding-right: var(--gap-m);
     }
-.tag__withRightAddons_1ikd5.tag__s_1ikd5 {
+.tag__withRightAddons_10acy.tag__s_10acy {
         padding-right: var(--gap-l);
     }
-.tag__withRightAddons_1ikd5.tag__m_1ikd5 {
+.tag__withRightAddons_10acy.tag__m_10acy {
         padding-right: var(--gap-xl);
     }
-.tag__withRightAddons_1ikd5.tag__l_1ikd5 {
+.tag__withRightAddons_10acy.tag__l_10acy {
         padding-right: 28px;
     }
-.tag__withRightAddons_1ikd5.tag__xl_1ikd5 {
+.tag__withRightAddons_10acy.tag__xl_10acy {
         padding-right: var(--gap-2xl);
     }
-.tag__withLeftAddons_1ikd5.tag__xxs_1ikd5 {
+.tag__withLeftAddons_10acy.tag__xxs_10acy {
         padding-left: var(--gap-s);
     }
-.tag__withLeftAddons_1ikd5.tag__xs_1ikd5 {
+.tag__withLeftAddons_10acy.tag__xs_10acy {
         padding-left: var(--gap-m);
     }
-.tag__withLeftAddons_1ikd5.tag__s_1ikd5 {
+.tag__withLeftAddons_10acy.tag__s_10acy {
         padding-left: var(--gap-l);
     }
-.tag__withLeftAddons_1ikd5.tag__m_1ikd5 {
+.tag__withLeftAddons_10acy.tag__m_10acy {
         padding-left: var(--gap-xl);
     }
-.tag__withLeftAddons_1ikd5.tag__l_1ikd5 {
+.tag__withLeftAddons_10acy.tag__l_10acy {
         padding-left: 28px;
     }
-.tag__withLeftAddons_1ikd5.tag__xl_1ikd5 {
+.tag__withLeftAddons_10acy.tag__xl_10acy {
         padding-left: var(--gap-2xl);
     }
-.tag__defaultVariant_1ikd5 {
+.tag__defaultVariant_10acy {
     border-radius: var(--tag-border-radius);
 }
-.tag__alt_1ikd5 {
+.tag__alt_10acy {
     border-radius: var(--tag-alt-border-radius);
 }

package/tag/modern/inverted.css

@@ -54,39 +54,39 @@
     --tag-inverted-text-color-disabled: var(--color-dark-text-tertiary);
     --tag-inverted-text-color-checked-disabled: var(--color-dark-text-primary-inverted);
 }
-.tag__component_k2zx5 {
+.tag__component_1szpn {
     color: var(--tag-inverted-text-color);
     border-color: var(--tag-inverted-border-color);
     background-color: var(--tag-inverted-background-color)
 }
-.tag__component_k2zx5:disabled {
+.tag__component_1szpn:disabled {
         border-color: var(--tag-inverted-border-color-disabled);
         color: var(--tag-inverted-text-color-disabled);
         background-color: var(--tag-inverted-background-color-disabled);
     }
-.tag__component_k2zx5:hover:not(:disabled) {
+.tag__component_1szpn:hover:not(:disabled) {
         border-color: var(--tag-inverted-border-color-hover);
         background-color: var(--tag-inverted-background-color-hover);
     }
-.tag__component_k2zx5:active:not(:disabled) {
+.tag__component_1szpn:active:not(:disabled) {
         border-color: var(--tag-inverted-border-color-active);
         background-color: var(--tag-inverted-background-color-active);
         color: var(--tag-inverted-text-color);
     }
-.tag__checked_k2zx5 {
+.tag__checked_1szpn {
     border-color: var(--tag-inverted-border-color-checked);
     background-color: var(--tag-inverted-background-color-checked);
     color: var(--tag-inverted-text-color-checked)
 }
-.tag__checked_k2zx5:disabled {
+.tag__checked_1szpn:disabled {
         background-color: var(--tag-inverted-background-color-checked-disabled);
         border-color: var(--tag-inverted-border-color-checked-disabled);
         color: var(--tag-inverted-text-color-checked-disabled);
     }
-.tag__checked_k2zx5:hover:not(:disabled):not(:active) {
+.tag__checked_1szpn:hover:not(:disabled):not(:active) {
         background-color: var(--tag-inverted-background-color-checked-hover);
     }
-.tag__checked_k2zx5:active:not(:disabled) {
+.tag__checked_1szpn:active:not(:disabled) {
         background-color: var(--tag-inverted-background-color-checked-active);
         color: var(--tag-inverted-text-color-checked);
     }

package/textarea/Component.d.ts

@@ -1,230 +1,5 @@
 /// <reference types="react" />
 import React from 'react';
-import { ChangeEvent, ReactNode, TextareaHTMLAttributes } from "react";
-type NativeProps = TextareaHTMLAttributes<HTMLTextAreaElement>;
-type TextareaProps = Omit<NativeProps, 'size' | 'style' | 'value' | 'defaultValue' | 'onChange'> & {
-    /**
-     * Значение поля ввода
-     */
-    value?: string;
-    /**
-     * Начальное значение поля
-     */
-    defaultValue?: string;
-    /**
-     * Растягивает компонент на ширину контейнера
-     */
-    block?: boolean;
-    /**
-     * Размер компонента
-     */
-    size?: 's' | 'm' | 'l' | 'xl';
-    /**
-     * Набор цветов для компонента
-     */
-    colors?: 'default' | 'inverted';
-    /**
-     * Отображение ошибки
-     */
-    error?: ReactNode | boolean;
-    /**
-     * Текст подсказки
-     */
-    hint?: ReactNode;
-    /**
-     * Лейбл компонента
-     */
-    label?: React.ReactNode;
-    /**
-     * Вид лейбла внутри / снаружи
-     */
-    labelView?: 'inner' | 'outer';
-    /**
-     * Слот слева
-     */
-    leftAddons?: React.ReactNode;
-    /**
-     * Слот справа
-     */
-    rightAddons?: React.ReactNode;
-    /**
-     * Слот под компонентом
-     */
-    bottomAddons?: React.ReactNode;
-    /**
-     * Дополнительный класс
-     */
-    className?: string;
-    /**
-     * Дополнительный класс для поля
-     */
-    fieldClassName?: string;
-    /**
-     * Дополнительный класс textarea
-     */
-    textareaClassName?: string;
-    /**
-     * Управление возможностью подстраивать высоту компонента под высоту текста
-     */
-    autosize?: boolean;
-    /**
-     * Максимальное количество отображаемых строк (работает только вместе с autosize)
-     */
-    maxRows?: number;
-    /**
-     * Минимальное количество отображаемых строк (работает только вместе c autosize)
-     */
-    minRows?: number;
-    /**
-     * Максимальная высота элемента
-     */
-    maxHeight?: number;
-    /**
-     * Управление возможностью изменения размеров компонента (не работает вместе c autosize)
-     */
-    resize?: 'vertical' | 'none';
-    /**
-     * Обработчик ввода
-     */
-    onChange?: (event: ChangeEvent<HTMLTextAreaElement>, payload: {
-        value: string;
-    }) => void;
-    /**
-     * Обработчик события изменения высоты компонента (работает только вместе c autosize)
-     */
-    onHeightChange?: (height?: number) => void;
-    /**
-     * Идентификатор для систем автоматизированного тестирования
-     */
-    dataTestId?: string;
-    /**
-     * Максимальное количество символов (native prop)
-     */
-    maxLength?: number;
-    /**
-     * Показывать счетчик введенных символов
-     */
-    showCounter?: boolean;
-    /**
-     * Функция, возвращающая текст для счетчика
-     */
-    getCounterText?: (textLength: number, maxLength?: number) => string;
-    /**
-     * Нужно ли использовать нативный скроллбар.
-     */
-    nativeScrollbar?: boolean;
-};
 declare const getDefaultCounterText: (textLength: number, maxLength?: number) => string;
-declare const Textarea: React.ForwardRefExoticComponent<Omit<NativeProps, "size" | "defaultValue" | "style" | "onChange" | "value"> & {
-    /**
-     * Значение поля ввода
-     */
-    value?: string | undefined;
-    /**
-     * Начальное значение поля
-     */
-    defaultValue?: string | undefined;
-    /**
-     * Растягивает компонент на ширину контейнера
-     */
-    block?: boolean | undefined;
-    /**
-     * Размер компонента
-     */
-    size?: "s" | "m" | "l" | "xl" | undefined;
-    /**
-     * Набор цветов для компонента
-     */
-    colors?: "default" | "inverted" | undefined;
-    /**
-     * Отображение ошибки
-     */
-    error?: ReactNode | boolean;
-    /**
-     * Текст подсказки
-     */
-    hint?: ReactNode;
-    /**
-     * Лейбл компонента
-     */
-    label?: React.ReactNode;
-    /**
-     * Вид лейбла внутри / снаружи
-     */
-    labelView?: "inner" | "outer" | undefined;
-    /**
-     * Слот слева
-     */
-    leftAddons?: React.ReactNode;
-    /**
-     * Слот справа
-     */
-    rightAddons?: React.ReactNode;
-    /**
-     * Слот под компонентом
-     */
-    bottomAddons?: React.ReactNode;
-    /**
-     * Дополнительный класс
-     */
-    className?: string | undefined;
-    /**
-     * Дополнительный класс для поля
-     */
-    fieldClassName?: string | undefined;
-    /**
-     * Дополнительный класс textarea
-     */
-    textareaClassName?: string | undefined;
-    /**
-     * Управление возможностью подстраивать высоту компонента под высоту текста
-     */
-    autosize?: boolean | undefined;
-    /**
-     * Максимальное количество отображаемых строк (работает только вместе с autosize)
-     */
-    maxRows?: number | undefined;
-    /**
-     * Минимальное количество отображаемых строк (работает только вместе c autosize)
-     */
-    minRows?: number | undefined;
-    /**
-     * Максимальная высота элемента
-     */
-    maxHeight?: number | undefined;
-    /**
-     * Управление возможностью изменения размеров компонента (не работает вместе c autosize)
-     */
-    resize?: "none" | "vertical" | undefined;
-    /**
-     * Обработчик ввода
-     */
-    onChange?: ((event: ChangeEvent<HTMLTextAreaElement>, payload: {
-        value: string;
-    }) => void) | undefined;
-    /**
-     * Обработчик события изменения высоты компонента (работает только вместе c autosize)
-     */
-    onHeightChange?: ((height?: number | undefined) => void) | undefined;
-    /**
-     * Идентификатор для систем автоматизированного тестирования
-     */
-    dataTestId?: string | undefined;
-    /**
-     * Максимальное количество символов (native prop)
-     */
-    maxLength?: number | undefined;
-    /**
-     * Показывать счетчик введенных символов
-     */
-    showCounter?: boolean | undefined;
-    /**
-     * Функция, возвращающая текст для счетчика
-     */
-    getCounterText?: ((textLength: number, maxLength?: number | undefined) => string) | undefined;
-    /**
-     * Нужно ли использовать нативный скроллбар.
-     */
-    nativeScrollbar?: boolean | undefined;
-} & React.RefAttributes<HTMLTextAreaElement>>;
-export { TextareaProps, getDefaultCounterText, Textarea };
+declare const Textarea: React.ForwardRefExoticComponent<Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "size" | "defaultValue" | "style" | "onChange" | "value"> & import("./typings").TextareaIncomeProps & React.RefAttributes<HTMLTextAreaElement>>;
+export { getDefaultCounterText, Textarea };