@alfalab/core-components 36.2.0 → 36.3.1

package/textarea/modern/index.css

@@ -1,6 +1,7 @@
-/* hash: akchg */
+/* hash: 1wfjg */
 :root {
     --color-light-border-link: #007aff;
+    --color-light-graphic-negative-alpha-40: rgba(241, 80, 69, 0.4);
 }
 :root {
 
@@ -46,6 +47,7 @@
     --form-control-labeled-m-paddings: 28px var(--gap-s) 8px;
     --form-control-labeled-l-paddings: 32px var(--gap-s) 12px;
     --form-control-labeled-xl-paddings: 38px var(--gap-m) 14px;
+    --form-control-sub-paddings: 0;
 
     /* disabled */
 
@@ -86,27 +88,26 @@
         var(--textarea-xl-min-height) - var(--textarea-xl-filled-margin-top)
     );
 }
-.textarea__scrollable_tq9dn {
+.textarea__scrollable_1a7jc {
     position: relative;
     display: block;
     box-sizing: border-box;
     width: 100%;
 }
-.textarea__scrollableWrapper_tq9dn {
+.textarea__scrollableWrapper_1a7jc {
     box-sizing: border-box
 }
-.textarea__scrollableWrapper_tq9dn > * {
+.textarea__scrollableWrapper_1a7jc > * {
         font-family: var(--font-family);
     }
-.textarea__textarea_tq9dn {
+.textarea__textarea_1a7jc {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
-
     position: relative;
     display: block;
     width: 100%;
-    height: 100%;
+    min-height: 100%;
     background: none;
     border: none;
     margin: 0;
@@ -115,139 +116,172 @@
     resize: none;
     -webkit-appearance: none
 }
-.textarea__textarea_tq9dn.textarea__s_tq9dn {
+.textarea__textarea_1a7jc.textarea__s_1a7jc {
         padding-top: var(--textarea-s-padding-top);
         padding-bottom: var(--gap-xs);
     }
-.textarea__textarea_tq9dn.textarea__m_tq9dn {
+.textarea__textarea_1a7jc.textarea__m_1a7jc {
         padding-top: var(--textarea-m-padding-top);
         padding-bottom: var(--gap-xs);
     }
-.textarea__textarea_tq9dn.textarea__l_tq9dn {
+.textarea__textarea_1a7jc.textarea__l_1a7jc {
         padding-top: var(--textarea-l-padding-top);
         padding-bottom: var(--gap-xs);
     }
-.textarea__textarea_tq9dn.textarea__xl_tq9dn {
+.textarea__textarea_1a7jc.textarea__xl_1a7jc {
         padding-top: var(--textarea-xl-padding-top);
         padding-bottom: var(--gap-xs);
     }
-.textarea__textarea_tq9dn.textarea__textareaHidden_tq9dn {
+.textarea__textarea_1a7jc.textarea__textareaHidden_1a7jc {
         position: absolute;
         transform: translateX(-10000px);
     }
-.textarea__textarea_tq9dn::placeholder {
+.textarea__textarea_1a7jc::placeholder {
     transition: opacity 0.2s ease, color 0.2s ease;
 }
-.textarea__hasInnerLabel_tq9dn::placeholder {
+.textarea__hasInnerLabel_1a7jc::placeholder {
     opacity: 0;
 }
-.textarea__resizeVertical_tq9dn {
+.textarea__resizeVertical_1a7jc {
     resize: vertical;
 }
+.textarea__pseudoTextarea_1a7jc {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    box-sizing: border-box;
+    word-wrap: break-word;
+    white-space: pre-wrap;
+    z-index: -1;
+    overflow: hidden;
+    max-height: 100%
+}
+.textarea__pseudoTextarea_1a7jc span {
+        color: transparent;
+    }
+.textarea__pseudoTextarea_1a7jc .textarea__overflow_1a7jc {
+        background-color: var(--color-light-graphic-negative-alpha-40);
+    }
+.textarea__pseudoTextarea_1a7jc.textarea__nativeScrollbar_1a7jc {
+        overflow: auto;
+    }
+.textarea__pseudoTextarea_1a7jc.textarea__customScrollbar_1a7jc {
+        max-height: none;
+    }
+.textarea__sub_1a7jc {
+    font-size: 14px;
+    line-height: 18px;
+    font-weight: 400;
+    display: block;
+    /* adjusting overall height 👌 */
+    margin-top: 6px;
+    padding: var(--form-control-sub-paddings);
+}
 /* SIZES */
-.textarea__textarea_tq9dn.textarea__s_tq9dn, .textarea__scrollable_tq9dn.textarea__s_tq9dn {
+.textarea__textarea_1a7jc.textarea__s_1a7jc, .textarea__scrollable_1a7jc.textarea__s_1a7jc {
         min-height: var(--textarea-s-min-height);
     }
-.textarea__textarea_tq9dn.textarea__m_tq9dn, .textarea__scrollable_tq9dn.textarea__m_tq9dn {
+.textarea__textarea_1a7jc.textarea__m_1a7jc, .textarea__scrollable_1a7jc.textarea__m_1a7jc {
         min-height: var(--textarea-m-min-height);
     }
-.textarea__textarea_tq9dn.textarea__l_tq9dn, .textarea__scrollable_tq9dn.textarea__l_tq9dn {
+.textarea__textarea_1a7jc.textarea__l_1a7jc, .textarea__scrollable_1a7jc.textarea__l_1a7jc {
         min-height: var(--textarea-l-min-height);
     }
-.textarea__textarea_tq9dn.textarea__xl_tq9dn, .textarea__scrollable_tq9dn.textarea__xl_tq9dn {
+.textarea__textarea_1a7jc.textarea__xl_1a7jc, .textarea__scrollable_1a7jc.textarea__xl_1a7jc {
         min-height: var(--textarea-xl-min-height);
     }
 /* Паддинги взяты из стилей form-control */
-.textarea__scrollable_tq9dn.textarea__s_tq9dn .textarea__textarea_tq9dn, .textarea__scrollable_tq9dn.textarea__m_tq9dn .textarea__textarea_tq9dn, .textarea__scrollable_tq9dn.textarea__l_tq9dn .textarea__textarea_tq9dn {
+.textarea__scrollable_1a7jc.textarea__s_1a7jc .textarea__textarea_1a7jc, .textarea__scrollable_1a7jc.textarea__m_1a7jc .textarea__textarea_1a7jc, .textarea__scrollable_1a7jc.textarea__l_1a7jc .textarea__textarea_1a7jc {
             padding-left: var(--gap-s);
             padding-right: var(--gap-s);
         }
-.textarea__scrollable_tq9dn.textarea__xl_tq9dn .textarea__textarea_tq9dn {
+.textarea__scrollable_1a7jc.textarea__xl_1a7jc .textarea__textarea_1a7jc {
             padding-left: var(--gap-m);
             padding-right: var(--gap-m);
         }
 /* Паддинги взяты из стилей form-control */
-.textarea__scrollableWithLabel_tq9dn.textarea__s_tq9dn .textarea__textarea_tq9dn {
+.textarea__scrollableWithLabel_1a7jc.textarea__s_1a7jc .textarea__textarea_1a7jc {
         padding: var(--form-control-labeled-s-paddings);
     }
-.textarea__scrollableWithLabel_tq9dn.textarea__m_tq9dn .textarea__textarea_tq9dn {
+.textarea__scrollableWithLabel_1a7jc.textarea__m_1a7jc .textarea__textarea_1a7jc {
         padding: var(--form-control-labeled-m-paddings);
     }
-.textarea__scrollableWithLabel_tq9dn.textarea__l_tq9dn .textarea__textarea_tq9dn {
+.textarea__scrollableWithLabel_1a7jc.textarea__l_1a7jc .textarea__textarea_1a7jc {
         padding: var(--form-control-labeled-l-paddings);
     }
-.textarea__scrollableWithLabel_tq9dn.textarea__xl_tq9dn .textarea__textarea_tq9dn {
+.textarea__scrollableWithLabel_1a7jc.textarea__xl_1a7jc .textarea__textarea_1a7jc {
         padding: var(--form-control-labeled-xl-paddings);
     }
 /* DISABLED STATE */
-.textarea__textarea_tq9dn:disabled {
+.textarea__textarea_1a7jc:disabled {
     cursor: var(--disabled-cursor);
     opacity: 1;
 }
 /* READ-ONLY STATE */
-.textarea__textarea_tq9dn:read-only {
+.textarea__textarea_1a7jc:read-only {
     cursor: var(--disabled-cursor);
 }
 /* FOCUS STATE */
-.textarea__textarea_tq9dn:focus.textarea__hasInnerLabel_tq9dn::placeholder {
+.textarea__textarea_1a7jc:focus.textarea__hasInnerLabel_1a7jc::placeholder {
     opacity: 1;
 }
-.textarea__focusVisible_tq9dn {
+.textarea__focusVisible_1a7jc {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }
 /* FILLED STATE */
-.textarea__textarea_tq9dn.textarea__filled_tq9dn.textarea__hasInnerLabel_tq9dn {
+.textarea__textarea_1a7jc.textarea__filled_1a7jc.textarea__hasInnerLabel_1a7jc {
     padding-top: 0
 }
-.textarea__textarea_tq9dn.textarea__filled_tq9dn.textarea__hasInnerLabel_tq9dn.textarea__s_tq9dn {
+.textarea__textarea_1a7jc.textarea__filled_1a7jc.textarea__hasInnerLabel_1a7jc.textarea__s_1a7jc {
         margin-top: var(--textarea-s-filled-margin-top);
         min-height: var(--textarea-s-filled-min-height);
         height: var(--textarea-s-filled-min-height);
     }
-.textarea__textarea_tq9dn.textarea__filled_tq9dn.textarea__hasInnerLabel_tq9dn.textarea__m_tq9dn {
+.textarea__textarea_1a7jc.textarea__filled_1a7jc.textarea__hasInnerLabel_1a7jc.textarea__m_1a7jc {
         margin-top: var(--textarea-m-filled-margin-top);
         min-height: var(--textarea-m-filled-min-height);
         height: var(--textarea-m-filled-min-height);
     }
-.textarea__textarea_tq9dn.textarea__filled_tq9dn.textarea__hasInnerLabel_tq9dn.textarea__l_tq9dn {
+.textarea__textarea_1a7jc.textarea__filled_1a7jc.textarea__hasInnerLabel_1a7jc.textarea__l_1a7jc {
         margin-top: var(--textarea-l-filled-margin-top);
         min-height: var(--textarea-l-filled-min-height);
         height: var(--textarea-l-filled-min-height);
     }
-.textarea__textarea_tq9dn.textarea__filled_tq9dn.textarea__hasInnerLabel_tq9dn.textarea__xl_tq9dn {
+.textarea__textarea_1a7jc.textarea__filled_1a7jc.textarea__hasInnerLabel_1a7jc.textarea__xl_1a7jc {
         margin-top: var(--textarea-xl-filled-margin-top);
         min-height: var(--textarea-xl-filled-min-height);
         height: var(--textarea-xl-filled-min-height);
     }
-.textarea__scrollableWithLabel_tq9dn.textarea__filled_tq9dn .textarea__textarea_tq9dn {
+.textarea__scrollableWithLabel_1a7jc.textarea__filled_1a7jc .textarea__textarea_1a7jc {
         padding-top: 0;
     }
-.textarea__scrollableWithLabel_tq9dn.textarea__filled_tq9dn.textarea__s_tq9dn {
+.textarea__scrollableWithLabel_1a7jc.textarea__filled_1a7jc.textarea__s_1a7jc {
         margin-top: var(--textarea-s-filled-margin-top);
         min-height: var(--textarea-s-filled-min-height)
     }
-.textarea__scrollableWithLabel_tq9dn.textarea__filled_tq9dn.textarea__s_tq9dn .textarea__textarea_tq9dn {
+.textarea__scrollableWithLabel_1a7jc.textarea__filled_1a7jc.textarea__s_1a7jc .textarea__textarea_1a7jc {
             min-height: var(--textarea-s-filled-min-height);
         }
-.textarea__scrollableWithLabel_tq9dn.textarea__filled_tq9dn.textarea__m_tq9dn {
+.textarea__scrollableWithLabel_1a7jc.textarea__filled_1a7jc.textarea__m_1a7jc {
         margin-top: var(--textarea-m-filled-margin-top);
         min-height: var(--textarea-m-filled-min-height)
     }
-.textarea__scrollableWithLabel_tq9dn.textarea__filled_tq9dn.textarea__m_tq9dn .textarea__textarea_tq9dn {
+.textarea__scrollableWithLabel_1a7jc.textarea__filled_1a7jc.textarea__m_1a7jc .textarea__textarea_1a7jc {
             min-height: var(--textarea-m-filled-min-height);
         }
-.textarea__scrollableWithLabel_tq9dn.textarea__filled_tq9dn.textarea__l_tq9dn {
+.textarea__scrollableWithLabel_1a7jc.textarea__filled_1a7jc.textarea__l_1a7jc {
         margin-top: var(--textarea-l-filled-margin-top);
         min-height: var(--textarea-l-filled-min-height)
     }
-.textarea__scrollableWithLabel_tq9dn.textarea__filled_tq9dn.textarea__l_tq9dn .textarea__textarea_tq9dn {
+.textarea__scrollableWithLabel_1a7jc.textarea__filled_1a7jc.textarea__l_1a7jc .textarea__textarea_1a7jc {
             min-height: var(--textarea-l-filled-min-height);
         }
-.textarea__scrollableWithLabel_tq9dn.textarea__filled_tq9dn.textarea__xl_tq9dn {
+.textarea__scrollableWithLabel_1a7jc.textarea__filled_1a7jc.textarea__xl_1a7jc {
         margin-top: var(--textarea-xl-filled-margin-top);
         min-height: var(--textarea-xl-filled-min-height)
     }
-.textarea__scrollableWithLabel_tq9dn.textarea__filled_tq9dn.textarea__xl_tq9dn .textarea__textarea_tq9dn {
+.textarea__scrollableWithLabel_1a7jc.textarea__filled_1a7jc.textarea__xl_1a7jc .textarea__textarea_1a7jc {
             min-height: var(--textarea-xl-filled-min-height);
         }

package/textarea/modern/index.js

@@ -5,4 +5,5 @@ import 'classnames';
 import '@alfalab/hooks';
 import '../../form-control/modern';
 import '../../scrollbar/modern';
+import './PseudoTextArea-39df3bec.js';
 export { Textarea, getDefaultCounterText } from './Component.js';

package/textarea/modern/inverted.css

@@ -1,7 +1,9 @@
-/* hash: 10js0 */
+/* hash: d626c */
 :root {
     --color-light-graphic-primary-inverted: #fff;
+    --color-light-text-negative: #d91d0b;
     --color-light-text-primary-inverted: #fff;
+    --color-light-text-secondary: rgba(11, 31, 53, 0.7);
     --color-light-text-secondary-inverted: rgba(255, 255, 255, 0.7);
     --color-light-text-tertiary-inverted: rgba(255, 255, 255, 0.4);
 }
@@ -33,64 +35,92 @@
 
     /* управляет видимостью иконки ошибки, если она стоит рядом с другой иконкой */
 }
-.textarea__input_1qdl7 {
+.textarea__input_7tr43 {
     color: var(--input-inverted-color);
     caret-color: var(--input-inverted-caret-color);
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
-.textarea__input_1qdl7:-webkit-autofill {
+.textarea__input_7tr43:-webkit-autofill {
     -webkit-text-fill-color: var(--input-inverted-color);
 }
-.textarea__input_1qdl7::placeholder {
+.textarea__input_7tr43::placeholder {
     color: var(--input-inverted-placeholder-color);
 }
-.textarea__hasInnerLabel_1qdl7::placeholder {
+.textarea__hasInnerLabel_7tr43::placeholder {
     color: var(--input-inverted-with-label-placeholder-color);
 }
-.textarea__clearIcon_1qdl7 {
+.textarea__clearIcon_7tr43 {
     color: var(--color-light-graphic-primary-inverted);
 }
 /* READ-ONLY STATE */
-.textarea__input_1qdl7:read-only {
+.textarea__input_7tr43:read-only {
     color: var(--input-inverted-read-only-color)
 }
-.textarea__input_1qdl7:read-only:focus::placeholder {
+.textarea__input_7tr43:read-only:focus::placeholder {
         color: var(--input-inverted-placeholder-color);
     }
 /* DISABLED STATE */
-.textarea__input_1qdl7:disabled {
+.textarea__input_7tr43:disabled {
     color: var(--input-inverted-disabled-color);
     -webkit-text-fill-color: var(--input-inverted-disabled-color);
 }
 /* FOCUS STATE */
-.textarea__input_1qdl7:focus::placeholder {
+.textarea__input_7tr43:focus::placeholder {
     color: var(--input-inverted-focus-placeholder-color);
 }
 /* ERROR STATE */
-.textarea__error_1qdl7 {
+.textarea__error_7tr43 {
     color: var(--input-inverted-error-color);
     caret-color: var(--input-inverted-error-color);
 }
-.textarea__textarea_1qdl7 {
+:root {
+    --form-control-hint-color: var(--color-light-text-secondary);
+
+    /* disabled */
+
+    /* focus */
+
+    /* hover */
+
+    /* error */
+    --form-control-error-color: var(--color-light-text-negative);
+
+    /* height */
+
+    /* paddings */
+
+    /* disabled */
+
+    /* font */
+
+    /* border-radius */
+}
+.textarea__textarea_7tr43 {
     color: var(--input-inverted-color);
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
-.textarea__textarea_1qdl7::placeholder {
+.textarea__textarea_7tr43::placeholder {
     color: var(--input-inverted-placeholder-color);
 }
-.textarea__hasInnerLabel_1qdl7::placeholder {
+.textarea__hasInnerLabel_7tr43::placeholder {
     color: var(--input-inverted-with-label-placeholder-color);
 }
 /* DISABLED STATE */
-.textarea__textarea_1qdl7:disabled {
+.textarea__textarea_7tr43:disabled {
     color: var(--input-inverted-disabled-color);
     -webkit-text-fill-color: var(--input-inverted-disabled-color);
 }
 /* READ-ONLY STATE */
-.textarea__textarea_1qdl7:read-only {
+.textarea__textarea_7tr43:read-only {
     color: var(--input-inverted-read-only-color);
 }
 /* FOCUS STATE */
-.textarea__textarea_1qdl7:focus::placeholder {
+.textarea__textarea_7tr43:focus::placeholder {
     color: var(--input-inverted-focus-placeholder-color);
 }
+.textarea__hint_7tr43 {
+    color: var(--form-control-hint-color);
+}
+.textarea__error_7tr43 {
+    color: var(--form-control-error-color);
+}

package/textarea/modern/typings.d.ts

@@ -0,0 +1,117 @@
+import React from 'react';
+import { ChangeEvent, ReactNode, TextareaHTMLAttributes } from "react";
+type NativeProps = TextareaHTMLAttributes<HTMLTextAreaElement>;
+type TextareaProps = Omit<NativeProps, 'size' | 'style' | 'value' | 'defaultValue' | 'onChange'> & TextareaIncomeProps;
+type TextareaIncomeProps = {
+    /**
+     * Значение поля ввода
+     */
+    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;
+};
+export { TextareaProps, TextareaIncomeProps };

package/textarea/modern/typings.js

@@ -0,0 +1 @@
+

package/textarea/typings.d.ts

@@ -0,0 +1,117 @@
+import React from 'react';
+import { ChangeEvent, ReactNode, TextareaHTMLAttributes } from "react";
+type NativeProps = TextareaHTMLAttributes<HTMLTextAreaElement>;
+type TextareaProps = Omit<NativeProps, 'size' | 'style' | 'value' | 'defaultValue' | 'onChange'> & TextareaIncomeProps;
+type TextareaIncomeProps = {
+    /**
+     * Значение поля ввода
+     */
+    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;
+};
+export { TextareaProps, TextareaIncomeProps };

package/textarea/typings.js

@@ -0,0 +1 @@
+

package/themes/click.css

@@ -319,12 +319,15 @@
     --color-dark-graphic-accent-tint-10: rgb(241, 70, 58);
     --color-dark-graphic-accent-tint-15: rgb(241, 80, 69);
     --color-dark-graphic-accent-tint-30: rgb(244, 111, 102);
+    --color-dark-graphic-negative-alpha-10: rgba(241, 80, 69, 0.1);
     --color-dark-graphic-negative-alpha-30: rgba(241, 80, 69, 0.3);
+    --color-dark-graphic-negative-alpha-40: rgba(241, 80, 69, 0.4);
     --color-dark-graphic-negative-shade-20: rgb(193, 64, 55);
     --color-dark-graphic-negative-shade-30: rgb(169, 56, 48);
     --color-dark-graphic-negative-tint-7: rgb(242, 92, 82);
     --color-dark-graphic-negative-tint-15: rgb(243, 106, 97);
     --color-dark-graphic-negative-tint-30: rgb(245, 133, 125);
+    --color-dark-graphic-positive-alpha-10: rgba(47, 194, 110, 0.1);
     --color-dark-graphic-positive-tint-10: rgb(68, 200, 125);
     --color-dark-graphic-positive-tint-30: rgb(109, 212, 154);
     --color-dark-graphic-primary-alpha-30: rgba(255, 255, 255, 0.3);
@@ -466,12 +469,15 @@
     --color-light-graphic-accent-shade-10: rgb(215, 44, 32);
     --color-light-graphic-accent-shade-15: rgb(203, 42, 31);
     --color-light-graphic-accent-shade-30: rgb(167, 34, 25);
+    --color-light-graphic-negative-alpha-10: rgba(241, 80, 69, 0.1);
     --color-light-graphic-negative-alpha-30: rgba(241, 80, 69, 0.3);
+    --color-light-graphic-negative-alpha-40: rgba(241, 80, 69, 0.4);
     --color-light-graphic-negative-tint-20: rgb(244, 115, 106);
     --color-light-graphic-negative-tint-30: rgb(245, 133, 125);
     --color-light-graphic-negative-shade-7: rgb(224, 74, 64);
     --color-light-graphic-negative-shade-15: rgb(205, 68, 59);
     --color-light-graphic-negative-shade-30: rgb(169, 56, 48);
+    --color-light-graphic-positive-alpha-10: rgba(47, 194, 110, 0.1);
     --color-light-graphic-positive-shade-10: rgb(42, 175, 99);
     --color-light-graphic-positive-shade-30: rgb(33, 136, 77);
     --color-light-graphic-primary-alpha-30: rgba(11, 31, 53, 0.3);