@ozen-ui/kit 0.8.0 → 0.9.1

package/__inner__/cjs/components/Select/Select.css

@@ -4,6 +4,7 @@
   --textfield-background-color: var(--color-background-primary);
   --textfield-border-width: var(--border-width-s);
   --textfield-border-color: var(--color-border-main);
+  font: var(--textfield-input-font);
   display: inline-flex;
   vertical-align: top;
   flex-direction: column;
@@ -21,19 +22,6 @@
     inline-size: 100%;
     box-sizing: border-box;
   }
-.Select-Fieldset {
-    position: absolute;
-    inset-block-end: 0;
-    inset-inline-end: 0;
-    inset-block-start: 0;
-    inset-inline-start: 0;
-    margin: 0;
-    padding: 0;
-    pointer-events: none;
-    border-radius: var(--border-radius-xs);
-    border: var(--textfield-border-width) solid var(--textfield-border-color);
-    transition: border var(--transition-default);
-  }
 .Select-Body {
     position: relative;
     display: flex;
@@ -64,7 +52,6 @@
     color: var(--textfield-color);
     box-sizing: border-box;
     block-size: var(--textfield-input-block-size);
-    font: var(--textfield-input-font);
     align-items: center;
   }
 .Select-Field span {
@@ -176,7 +163,8 @@
   }
 .Select_animation-enter-active {
     opacity: 1;
-    transition: opacity var(--transition-default),
+    transition:
+      opacity var(--transition-default),
       transform var(--transition-default);
     transform: translate(0);
     pointer-events: none;
@@ -192,7 +180,8 @@
   }
 .Select_animation-exit-active {
     opacity: 0;
-    transition: opacity var(--transition-default),
+    transition:
+      opacity var(--transition-default),
       transform var(--transition-default);
     transform: translate(0, calc(var(--space-s) * -1));
     pointer-events: none;

package/__inner__/cjs/components/Select/components/SelectInput/SelectInput.js

@@ -10,6 +10,7 @@ var useMultiRef_1 = require("../../../../hooks/useMultiRef");
 var FieldHint_1 = require("../../../FieldHint");
 var FieldIcon_1 = require("../../../FieldIcon");
 var FieldLabel_1 = require("../../../FieldLabel");
+var Fieldset_1 = require("../../../Fieldset");
 var index_1 = require("../../index");
 exports.SelectInput = (0, react_1.forwardRef)(function (_a, ref) {
     var _b = _a.size, size = _b === void 0 ? 'm' : _b, _c = _a.multiline, multiline = _c === void 0 ? false : _c, label = _a.label, error = _a.error, id = _a.id, name = _a.name, renderLeft = _a.renderLeft, renderRight = _a.renderRight, inputRef = _a.inputRef, fieldRef = _a.fieldRef, fullWidth = _a.fullWidth, disabled = _a.disabled, hint = _a.hint, required = _a.required, className = _a.className, inputProps = _a.inputProps, valueProp = _a.value, defaultValue = _a.defaultValue, onFocus = _a.onFocus, onBlur = _a.onBlur, onKeyDown = _a.onKeyDown, labelRef = _a.labelRef, labelProps = _a.labelProps, fieldProps = _a.fieldProps, onClick = _a.onClick, focused = _a.focused, placeholderProp = _a.placeholder, renderedValue = _a.renderedValue, bodyProps = _a.bodyProps, bodyRefProp = _a.bodyRef, open = _a.open, other = tslib_1.__rest(_a, ["size", "multiline", "label", "error", "id", "name", "renderLeft", "renderRight", "inputRef", "fieldRef", "fullWidth", "disabled", "hint", "required", "className", "inputProps", "value", "defaultValue", "onFocus", "onBlur", "onKeyDown", "labelRef", "labelProps", "fieldProps", "onClick", "focused", "placeholder", "renderedValue", "bodyProps", "bodyRef", "open"]);
@@ -35,7 +36,7 @@ exports.SelectInput = (0, react_1.forwardRef)(function (_a, ref) {
                 react_1["default"].createElement("input", tslib_1.__assign({ id: id, name: name, defaultValue: defaultValue, value: valueProp, disabled: disabled, required: required, tabIndex: -1, "aria-hidden": true, readOnly: true }, inputProps, { className: (0, index_1.cnSelect)('Input', [inputProps === null || inputProps === void 0 ? void 0 : inputProps.className]), ref: inputRef }))),
             react_1["default"].createElement(FieldIcon_1.FieldIcon, { className: (0, index_1.cnSelect)('RenderRight'), icon: renderRight, size: size }),
             react_1["default"].createElement(FieldIcon_1.FieldIcon, { className: (0, classnames_1.classnames)((0, index_1.cnSelect)('RenderRight'), (0, index_1.cnSelect)('DropDownIcon', { open: open })), icon: icons_1.ChevronDownIcon, size: size }),
-            react_1["default"].createElement("fieldset", { className: (0, index_1.cnSelect)('Fieldset') })),
+            react_1["default"].createElement(Fieldset_1.Fieldset, { className: (0, index_1.cnSelect)('Fieldset') })),
         react_1["default"].createElement(FieldHint_1.FieldHint, { size: size, error: error, disabled: disabled }, hint)));
 });
 exports.SelectInput.displayName = 'SelectInput';

package/__inner__/cjs/components/Select/types.d.ts

@@ -1,5 +1,4 @@
-import React, { SyntheticEvent } from 'react';
-import type { HTMLAttributes } from 'react';
+import type { HTMLAttributes, SyntheticEvent, ReactNode } from 'react';
 import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
 import type { MenuProps } from '../Menu';
 import type { SelectInputProps } from './components';
@@ -10,7 +9,7 @@ export type SelectedOptionProp = {
     label?: SelectPropLabel;
     value?: SelectPropValue;
 };
-export type SelectRenderValue = (option: SelectedOptionProp) => React.ReactNode | null;
+export type SelectRenderValue = (option: SelectedOptionProp) => ReactNode | null;
 type SelectOpenControlledProps = {
     /** Текущее состояние списка. Если `true`, список отображается. */
     open?: boolean;
@@ -47,7 +46,7 @@ export type SelectProps = {
     /** Рендер-функция для выбранного значения */
     renderValue?: SelectRenderValue;
     /** Содержимое компонента */
-    children?: React.ReactNode;
+    children?: ReactNode;
     /** Свойства компонента Menu */
     menuProps?: Omit<MenuProps, 'onClose' | 'open' | 'anchorRef'>;
     /** Функция обратного вызова, которая будет вызвана когда компонент запрашивает закрытие */

package/__inner__/cjs/components/Slider/types.d.ts

@@ -1,7 +1,7 @@
 import type { ElementType, ComponentPropsWithRef, ChangeEvent } from 'react';
 import type { PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
 import type { TooltipProps } from '../Tooltip';
-import { SLIDER_DEFAULT_TAG } from './constants';
+import type { SLIDER_DEFAULT_TAG } from './constants';
 export declare const sliderSizeVariant: readonly ["m", "l"];
 export type SliderSizeVariant = (typeof sliderSizeVariant)[number];
 export type SliderValue = number;

package/__inner__/cjs/components/Snackbar/types.d.ts

@@ -1,4 +1,4 @@
-import { SnackbarItemProps } from './components/SnackbarItem';
+import type { SnackbarItemProps } from './components/SnackbarItem';
 export declare const snackbarVerticalAlignVariant: readonly ["top", "bottom"];
 export declare const snackbarHorizontalAlignVariant: readonly ["left", "center", "right"];
 export declare const snackbarStatusVariant: readonly ["success", "info", "warning", "error"];

package/__inner__/cjs/components/Tag/components/RemoveButton/RemoveButton.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import type { FC } from 'react';
 import type { IconProps } from '@ozen-ui/icons';
 export declare const removeButtonSizeVariant: readonly ["s", "xs", "2xs"];
 export type RemoveButtonSizeVariant = (typeof removeButtonSizeVariant)[number];

package/__inner__/cjs/components/Textarea/Textarea.css

@@ -1,39 +1,13 @@
 .Textarea {
-  --textfield-color: var(--color-content-primary);
-  --textfield-background-color: var(--color-background-primary);
-  --textfield-border-width: var(--border-width-s);
-  --textfield-border-color: var(--color-border-main);
   --textfield-scroll-size: 12px;
-  min-block-size: var(--textfield-input-block-size);
-  display: inline-flex;
-  vertical-align: top;
-  flex-direction: column;
+  min-block-size: var(--textfield-input-height);
   position: relative;
-  cursor: text;
 }
 
-  .Textarea > * {
-    cursor: text;
-  }
-
   .Textarea-Label {
     padding: 0 var(--textfield-gutter-x);
   }
 
-  .Textarea-Fieldset {
-    position: absolute;
-    inset-block-end: 0;
-    inset-inline-end: 0;
-    inset-block-start: 0;
-    inset-inline-start: 0;
-    margin: 0;
-    padding: 0;
-    pointer-events: none;
-    border-radius: var(--border-radius-xs);
-    border: var(--textfield-border-width) solid var(--textfield-border-color);
-    transition: border var(--transition-default);
-  }
-
   .Textarea-Body,
   .Textarea-Field {
     transition: background-color var(--transition-slow);
@@ -50,10 +24,9 @@
     transition: background-color var(--transition-slow);
     color: var(--textfield-color);
     border-radius: var(--border-radius-xs);
-    padding-block-start: 16px;
-    padding-block-end: 16px;
     min-block-size: inherit;
     block-size: inherit;
+    padding: var(--textfield-input-padding);
   }
 
   .Textarea-Field {
@@ -95,7 +68,7 @@
     border: none;
     display: flex;
     outline: none;
-    font: var(--textfield-input-font);
+    font: inherit;
     background-color: var(--textfield-background-color);
     color: var(--textfield-color);
     padding: 0 var(--textfield-gutter-x);
@@ -126,80 +99,3 @@
         resize: vertical;
         overflow: hidden;
       }
-
-  .Textarea_hasLabel .Textarea-Field::placeholder {
-        opacity: 0;
-      }
-
-  .Textarea_hasLabel .Textarea-Field:focus::placeholder {
-        opacity: 1;
-      }
-
-  .Textarea_hasLabel .Textarea-Body {
-      padding: var(--textfield-input-padding);
-    }
-
-  .Textarea_fullWidth {
-    inline-size: 100%;
-  }
-
-  .Textarea_size_2xs {
-      --textfield-gutter-x: 12px;
-      --textfield-input-block-size: 32px;
-      --textfield-input-font: var(--typography-text-2xs-font);
-      --textfield-input-padding: 8px 0 8px;
-    }
-
-  .Textarea_size_xs {
-      --textfield-gutter-x: 12px;
-      --textfield-input-block-size: 40px;
-      --textfield-input-font: var(--typography-text-xs-font);
-      --textfield-input-padding: 19px 0 4px;
-    }
-
-  .Textarea_size_s {
-      --textfield-gutter-x: 16px;
-      --textfield-input-block-size: 48px;
-      --textfield-input-font: var(--typography-text-s-font);
-      --textfield-input-padding: 21px 0 6px;
-    }
-
-  .Textarea_size_m {
-      --textfield-gutter-x: 20px;
-      --textfield-input-block-size: 56px;
-      --textfield-input-font: var(--typography-text-m-font);
-      --textfield-input-padding: 24px 0 6px;
-    }
-
-  .Textarea_size_l {
-      --textfield-gutter-x: 24px;
-      --textfield-input-block-size: 64px;
-      --textfield-input-font: var(--typography-text-l-font);
-      --textfield-input-padding: 26px 0 6px;
-    }
-
-  .Textarea:hover {
-    --textfield-border-color: var(--color-border-main-hover);
-  }
-
-  .Textarea_focused,
-  .Textarea_focused:hover {
-    --textfield-border-width: var(--border-width-m);
-    --textfield-background-color: var(--color-background-main);
-    --textfield-border-color: var(--color-border-action);
-  }
-
-  .Textarea_error,
-  .Textarea_error.Textarea:hover,
-  .Textarea_error.Textarea_focused,
-  .Textarea_error.Textarea_focused:hover {
-    --textfield-border-color: var(--color-border-error);
-  }
-
-  .Textarea_disabled {
-    --textfield-border-color: var(--color-border-disabled);
-    --textfield-background-color: var(--color-background-disabled);
-    --textfield-color: var(--color-content-secondary);
-    pointer-events: none;
-    cursor: default;
-  }

package/__inner__/cjs/components/Textarea/Textarea.d.ts

@@ -1,63 +1,5 @@
 import './Textarea.css';
 import React from 'react';
-import type { HTMLAttributes, TextareaHTMLAttributes, Ref } from 'react';
-import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
-import { type FieldLabelProps } from '../FieldLabel';
+import type { TextareaProps } from './index';
 export declare const cnTextarea: import("@bem-react/classname").ClassNameFormatter;
-export type TextareaSizeVariant = FormElementSizeVariant;
-export declare const textareaExpandVariant: readonly ["autoSize", "verticalResize"];
-export type TextareaExpandVariant = (typeof textareaExpandVariant)[number];
-type TextareaElement = TextareaHTMLAttributes<HTMLTextAreaElement>;
-export type TextareaProps = {
-    /** Атрибут id для элемента input */
-    id?: string;
-    /** Атрибут name для элемента input */
-    name?: string;
-    /** Лейбл */
-    label?: string;
-    /** Размер компонента */
-    size?: TextareaSizeVariant;
-    /** Подсказка. Отображается, когда вариант не выбран */
-    placeholder?: string;
-    /** Если {true} устанавливает автофокус */
-    autoFocus?: boolean;
-    /** Если {true} переводит поле в состояние ошибки */
-    error?: boolean;
-    /** Если {true} растягивает поле на всю ширину */
-    fullWidth?: boolean;
-    /** Дополнительное описание к полю */
-    hint?: string | null | undefined;
-    /** Если {true} делает элемент неактивным */
-    disabled?: boolean;
-    /** Если {true} делает элемент обязательным к заполнению */
-    required?: boolean;
-    /** Устанавливает максимальное число символов, которое может быть введено пользователем в текстовом поле. */
-    maxLength?: number;
-    /** Количество колонок */
-    cols?: number;
-    /** Количество строк */
-    rows?: number;
-    /** Расширяемость поля */
-    expand?: TextareaExpandVariant;
-    /** Выбранное значение */
-    value?: string;
-    /** Значение по умолчанию (неконтролируемый компонент) */
-    defaultValue?: string;
-    /** Обработчик события на изменение значения поля */
-    onChange?: TextareaElement['onChange'];
-    /** Ссылка на элемент textarea */
-    textareaRef?: Ref<HTMLTextAreaElement>;
-    /** Свойства элемента textarea */
-    textareaProps?: TextareaElement & {
-        'data-testid'?: string;
-    };
-    /** Ссылка на FieldLabel */
-    labelRef?: FieldLabelProps['ref'];
-    /** Свойства FieldLabel */
-    labelProps?: FieldLabelProps;
-    /** Ссылка на корневой DOM-элемент компонента */
-    ref?: Ref<HTMLDivElement>;
-    'data-testid'?: string;
-} & Omit<HTMLAttributes<HTMLDivElement>, 'value' | 'defaultValue' | 'onChange'>;
 export declare const Textarea: React.ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export {};

package/__inner__/cjs/components/Textarea/Textarea.js

@@ -1,78 +1,24 @@
 "use strict";
 exports.__esModule = true;
-exports.Textarea = exports.textareaExpandVariant = exports.cnTextarea = void 0;
+exports.Textarea = exports.cnTextarea = void 0;
 var tslib_1 = require("tslib");
 require("./Textarea.css");
 var react_1 = tslib_1.__importStar(require("react"));
-var useMultiRef_1 = require("../../hooks/useMultiRef");
 var useThemeProps_1 = require("../../hooks/useThemeProps");
 var classname_1 = require("../../utils/classname");
-var FieldHint_1 = require("../FieldHint");
-var FieldLabel_1 = require("../FieldLabel");
+var FieldControl_1 = require("../FieldControl");
+var components_1 = require("./components");
+var constants_1 = require("./constants");
 exports.cnTextarea = (0, classname_1.cn)('Textarea');
-exports.textareaExpandVariant = ['autoSize', 'verticalResize'];
 exports.Textarea = (0, react_1.forwardRef)(function (inProps, ref) {
     var props = (0, useThemeProps_1.useThemeProps)({
         props: inProps,
         name: 'Textarea'
     });
-    var _a = props.size, size = _a === void 0 ? 'm' : _a, autoFocus = props.autoFocus, maxLength = props.maxLength, expand = props.expand, placeholder = props.placeholder, id = props.id, name = props.name, error = props.error, fullWidth = props.fullWidth, cols = props.cols, rows = props.rows, className = props.className, label = props.label, hint = props.hint, valueProp = props.value, defaultValue = props.defaultValue, onChange = props.onChange, required = props.required, textareaRef = props.textareaRef, disabled = props.disabled, textareaProps = props.textareaProps, labelRef = props.labelRef, labelProps = props.labelProps, other = tslib_1.__rest(props, ["size", "autoFocus", "maxLength", "expand", "placeholder", "id", "name", "error", "fullWidth", "cols", "rows", "className", "label", "hint", "value", "defaultValue", "onChange", "required", "textareaRef", "disabled", "textareaProps", "labelRef", "labelProps"]);
-    var fieldRef = (0, react_1.useRef)(null);
-    var isControlled = typeof valueProp !== 'undefined';
-    var _b = tslib_1.__read((0, react_1.useState)(), 2), focused = _b[0], setFocused = _b[1];
-    var _c = tslib_1.__read((0, react_1.useState)(defaultValue), 2), valueState = _c[0], setValueState = _c[1];
-    var filled = isControlled ? !!valueProp : !!valueState;
-    // autoSize
-    (0, react_1.useEffect)(function () {
-        if (fieldRef.current && expand === 'autoSize') {
-            fieldRef.current.style.blockSize = '0px';
-            var scrollHeight = fieldRef.current.scrollHeight;
-            fieldRef.current.style.blockSize = "".concat(scrollHeight, "px");
-        }
-    }, [valueProp, valueState]);
-    // maxLength
-    var counter = (0, react_1.useMemo)(function () {
-        var _a;
-        var value = valueProp || valueState;
-        return maxLength ? "".concat((_a = value === null || value === void 0 ? void 0 : value.length) !== null && _a !== void 0 ? _a : 0, " / ").concat(maxLength) : undefined;
-    }, [maxLength, valueProp, valueState]);
-    var handleFocus = (0, react_1.useCallback)(function (e) {
-        var _a;
-        setFocused(true);
-        (_a = textareaProps === null || textareaProps === void 0 ? void 0 : textareaProps.onFocus) === null || _a === void 0 ? void 0 : _a.call(textareaProps, e);
-    }, [textareaProps === null || textareaProps === void 0 ? void 0 : textareaProps.onFocus]);
-    var handleBlur = (0, react_1.useCallback)(function (e) {
-        var _a;
-        setFocused(false);
-        (_a = textareaProps === null || textareaProps === void 0 ? void 0 : textareaProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(textareaProps, e);
-    }, [textareaProps === null || textareaProps === void 0 ? void 0 : textareaProps.onBlur]);
-    var handleChange = (0, react_1.useCallback)(function (e) {
-        if (disabled)
-            return;
-        var value = e.target.value;
-        if (!isControlled || maxLength || expand === 'autoSize') {
-            setValueState(value);
-        }
-        onChange === null || onChange === void 0 ? void 0 : onChange(e);
-    }, [onChange, isControlled, disabled, maxLength, expand]);
-    return (react_1["default"].createElement("div", tslib_1.__assign({}, other, { className: (0, exports.cnTextarea)({
-            size: size,
-            required: required,
-            fullWidth: fullWidth,
-            error: error,
-            disabled: disabled,
-            hasLabel: !!label,
-            expand: expand,
-            focused: focused
+    var _a = props.size, size = _a === void 0 ? constants_1.TEXTAREA_DEFAULT_SIZE : _a, autoFocus = props.autoFocus, maxLength = props.maxLength, expand = props.expand, placeholder = props.placeholder, id = props.id, name = props.name, error = props.error, fullWidth = props.fullWidth, cols = props.cols, rows = props.rows, className = props.className, label = props.label, hint = props.hint, value = props.value, defaultValue = props.defaultValue, onChange = props.onChange, required = props.required, textareaRef = props.textareaRef, disabled = props.disabled, textareaProps = props.textareaProps, labelRef = props.labelRef, labelProps = props.labelProps, other = tslib_1.__rest(props, ["size", "autoFocus", "maxLength", "expand", "placeholder", "id", "name", "error", "fullWidth", "cols", "rows", "className", "label", "hint", "value", "defaultValue", "onChange", "required", "textareaRef", "disabled", "textareaProps", "labelRef", "labelProps"]);
+    return (react_1["default"].createElement(FieldControl_1.FieldControl, tslib_1.__assign({ size: size, error: error, disabled: disabled, required: required, fullWidth: fullWidth }, other, { className: (0, exports.cnTextarea)({
+            expand: expand
         }, [className]), ref: ref }),
-        react_1["default"].createElement("label", { className: (0, exports.cnTextarea)('Body') },
-            label && (react_1["default"].createElement(FieldLabel_1.FieldLabel, tslib_1.__assign({ filled: filled, focused: focused, required: required, disabled: disabled, size: size }, labelProps, { className: (0, exports.cnTextarea)('Label', [labelProps === null || labelProps === void 0 ? void 0 : labelProps.className]), ref: labelRef }), label)),
-            react_1["default"].createElement("textarea", tslib_1.__assign({ id: id, name: name, cols: cols, rows: rows, disabled: disabled, value: valueProp, required: required, defaultValue: defaultValue, maxLength: maxLength, placeholder: placeholder, autoFocus: autoFocus }, textareaProps, { className: (0, exports.cnTextarea)('Field', { filled: filled }, [
-                    textareaProps === null || textareaProps === void 0 ? void 0 : textareaProps.className,
-                ]), onFocus: handleFocus, onBlur: handleBlur, onChange: handleChange, ref: (0, useMultiRef_1.useMultiRef)([textareaRef, fieldRef]) })),
-            react_1["default"].createElement("fieldset", { className: (0, exports.cnTextarea)('Fieldset') })),
-        (hint || maxLength) && (react_1["default"].createElement(FieldHint_1.FieldHint, { size: size, error: error, disabled: disabled },
-            hint,
-            maxLength && (react_1["default"].createElement("span", { className: (0, exports.cnTextarea)('Counter', { disabled: disabled }) }, counter))))));
+        react_1["default"].createElement(components_1.TextareaConsumer, { autoFocus: autoFocus, maxLength: maxLength, placeholder: placeholder, id: id, name: name, cols: cols, expand: expand, rows: rows, label: label, hint: hint, value: value, defaultValue: defaultValue, onChange: onChange, textareaRef: textareaRef, textareaProps: textareaProps, labelRef: labelRef, labelProps: labelProps })));
 });
 exports.Textarea.displayName = 'Textarea';

package/__inner__/cjs/components/Textarea/components/TextareaConsumer.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { TextareaProps } from '../../Textarea';
+export declare const TextareaConsumer: React.FC<TextareaProps>;

package/__inner__/cjs/components/Textarea/components/TextareaConsumer.js

@@ -0,0 +1,36 @@
+"use strict";
+exports.__esModule = true;
+exports.TextareaConsumer = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var useMultiRef_1 = require("../../../hooks/useMultiRef");
+var FieldControl_1 = require("../../FieldControl");
+var FieldHint_1 = require("../../FieldHint");
+var FieldInput_1 = require("../../FieldInput");
+var FieldLabel_1 = require("../../FieldLabel");
+var Fieldset_1 = require("../../Fieldset");
+var Textarea_1 = require("../../Textarea");
+var index_1 = require("./index");
+var TextareaConsumer = function (_a) {
+    var labelProps = _a.labelProps, labelRef = _a.labelRef, maxLength = _a.maxLength, label = _a.label, id = _a.id, name = _a.name, cols = _a.cols, rows = _a.rows, disabled = _a.disabled, valueProp = _a.value, required = _a.required, defaultValue = _a.defaultValue, placeholder = _a.placeholder, autoFocus = _a.autoFocus, textareaProps = _a.textareaProps, onChange = _a.onChange, textareaRef = _a.textareaRef, expand = _a.expand, hint = _a.hint;
+    var fieldRef = (0, react_1.useRef)(null);
+    var context = (0, react_1.useContext)(FieldControl_1.FieldControlContext);
+    var _b = tslib_1.__read(context, 1), value = _b[0].value;
+    // autoSize
+    (0, react_1.useEffect)(function () {
+        if (fieldRef.current && expand === 'autoSize') {
+            fieldRef.current.style.blockSize = '0px';
+            var scrollHeight = fieldRef.current.scrollHeight;
+            fieldRef.current.style.blockSize = "".concat(scrollHeight, "px");
+        }
+    }, [value]);
+    return (react_1["default"].createElement(react_1["default"].Fragment, null,
+        react_1["default"].createElement("label", { className: (0, Textarea_1.cnTextarea)('Body') },
+            react_1["default"].createElement(FieldLabel_1.FieldLabel, tslib_1.__assign({}, labelProps, { className: (0, Textarea_1.cnTextarea)('Label', [labelProps === null || labelProps === void 0 ? void 0 : labelProps.className]), ref: labelRef || (labelProps === null || labelProps === void 0 ? void 0 : labelProps.ref) }), label),
+            react_1["default"].createElement(FieldInput_1.FieldInput, tslib_1.__assign({ as: "textarea", id: id, name: name, cols: cols, rows: rows, disabled: disabled, value: valueProp, required: required, defaultValue: defaultValue, maxLength: maxLength, placeholder: placeholder, autoFocus: autoFocus, onChange: onChange }, textareaProps, { className: (0, Textarea_1.cnTextarea)('Field', {}, [textareaProps === null || textareaProps === void 0 ? void 0 : textareaProps.className]), ref: (0, useMultiRef_1.useMultiRef)([textareaRef || (textareaProps === null || textareaProps === void 0 ? void 0 : textareaProps.ref), fieldRef]) })),
+            react_1["default"].createElement(Fieldset_1.Fieldset, null)),
+        react_1["default"].createElement(FieldHint_1.FieldHint, null,
+            hint,
+            maxLength && react_1["default"].createElement(index_1.TextareaCounter, { maxLength: maxLength }))));
+};
+exports.TextareaConsumer = TextareaConsumer;

package/__inner__/cjs/components/Textarea/components/TextareaCounter.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentPropsWithRef, FC } from 'react';
+import type { TextareaProps } from '../index';
+export type TextareaCounter = ComponentPropsWithRef<'span'> & {
+    maxLength: TextareaProps['maxLength'];
+    disabled?: TextareaProps['disabled'];
+};
+export declare const TextareaCounter: FC<TextareaCounter>;

package/__inner__/cjs/components/Textarea/components/TextareaCounter.js

@@ -0,0 +1,25 @@
+"use strict";
+exports.__esModule = true;
+exports.TextareaCounter = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var FieldControl_1 = require("../../FieldControl");
+var index_1 = require("../index");
+var TextareaCounter = function (_a) {
+    var _b, _c, _d;
+    var maxLength = _a.maxLength, disabledProp = _a.disabled;
+    var context = (0, react_1.useContext)(FieldControl_1.FieldControlContext);
+    var _e = tslib_1.__read(context, 1), fieldControl = _e[0];
+    var disabled = disabledProp;
+    // maxLength
+    var counter = maxLength
+        ? "".concat((_d = (_c = (_b = fieldControl.value) === null || _b === void 0 ? void 0 : _b.toString()) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0, " / ").concat(maxLength)
+        : undefined;
+    if (fieldControl) {
+        if (disabled === undefined && fieldControl.disabled) {
+            disabled = fieldControl.disabled;
+        }
+    }
+    return react_1["default"].createElement("span", { className: (0, index_1.cnTextarea)('Counter', { disabled: disabled }) }, counter);
+};
+exports.TextareaCounter = TextareaCounter;

package/__inner__/cjs/components/Textarea/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from './TextareaCounter';
+export * from './TextareaConsumer';

package/__inner__/cjs/components/Textarea/components/index.js

@@ -0,0 +1,5 @@
+"use strict";
+exports.__esModule = true;
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./TextareaCounter"), exports);
+tslib_1.__exportStar(require("./TextareaConsumer"), exports);

package/__inner__/cjs/components/Textarea/constants.d.ts

@@ -0,0 +1 @@
+export declare const TEXTAREA_DEFAULT_SIZE = "m";

package/__inner__/cjs/components/Textarea/constants.js

@@ -0,0 +1,4 @@
+"use strict";
+exports.__esModule = true;
+exports.TEXTAREA_DEFAULT_SIZE = void 0;
+exports.TEXTAREA_DEFAULT_SIZE = 'm';

package/__inner__/cjs/components/Textarea/index.d.ts

@@ -1 +1,2 @@
 export * from './Textarea';
+export * from './types';

package/__inner__/cjs/components/Textarea/index.js

@@ -2,3 +2,4 @@
 exports.__esModule = true;
 var tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./Textarea"), exports);
+tslib_1.__exportStar(require("./types"), exports);

package/__inner__/cjs/components/Textarea/types.d.ts

@@ -0,0 +1,69 @@
+import type { Ref, ComponentPropsWithRef, ComponentRef } from 'react';
+import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
+import type { FIELD_CONTROL_DEFAULT_TAG } from '../FieldControl';
+import type { FieldLabelProps } from '../FieldLabel';
+export type TextareaSizeVariant = FormElementSizeVariant;
+export declare const textareaExpandVariant: readonly ["autoSize", "verticalResize"];
+export type TextareaExpandVariant = (typeof textareaExpandVariant)[number];
+type TextareaPropsDeprecated = {
+    /**
+     * deprecated
+     * Ссылка на FieldLabel
+     * */
+    labelRef?: FieldLabelProps['ref'];
+    /**
+     * deprecated
+     * Ссылка на элемент textarea
+     * */
+    textareaRef?: Ref<HTMLTextAreaElement>;
+};
+type TextareaElement = ComponentPropsWithRef<'textarea'>;
+export type TextareaProps = Omit<ComponentPropsWithRef<typeof FIELD_CONTROL_DEFAULT_TAG>, 'size' | 'onChange'> & {
+    /** Атрибут id для элемента input */
+    id?: string;
+    /** Атрибут name для элемента input */
+    name?: string;
+    /** Лейбл */
+    label?: string;
+    /** Размер компонента */
+    size?: TextareaSizeVariant;
+    /** Подсказка. Отображается, когда вариант не выбран */
+    placeholder?: string;
+    /** Если {true} устанавливает автофокус */
+    autoFocus?: boolean;
+    /** Если {true} переводит поле в состояние ошибки */
+    error?: boolean;
+    /** Если {true} растягивает поле на всю ширину */
+    fullWidth?: boolean;
+    /** Дополнительное описание к полю */
+    hint?: string | null | undefined;
+    /** Если {true} делает элемент неактивным */
+    disabled?: boolean;
+    /** Если {true} делает элемент обязательным к заполнению */
+    required?: boolean;
+    /** Устанавливает максимальное число символов, которое может быть введено пользователем в текстовом поле. */
+    maxLength?: number;
+    /** Количество колонок */
+    cols?: number;
+    /** Количество строк */
+    rows?: number;
+    /** Расширяемость поля */
+    expand?: TextareaExpandVariant;
+    /** Выбранное значение */
+    value?: string;
+    /** Значение по умолчанию (неконтролируемый компонент) */
+    defaultValue?: string;
+    /** Обработчик события на изменение значения поля */
+    onChange?: TextareaElement['onChange'];
+    /** Свойства элемента textarea */
+    textareaProps?: TextareaElement & {
+        'data-testid'?: string;
+    };
+    /** Свойства FieldLabel */
+    labelProps?: FieldLabelProps;
+    /** Ссылка на корневой DOM-элемент компонента */
+    ref?: ComponentRef<typeof FIELD_CONTROL_DEFAULT_TAG>;
+    /** data-атрибут для тестирования */
+    'data-testid'?: string;
+} & TextareaPropsDeprecated;
+export {};

package/__inner__/cjs/components/Textarea/types.js

@@ -0,0 +1,4 @@
+"use strict";
+exports.__esModule = true;
+exports.textareaExpandVariant = void 0;
+exports.textareaExpandVariant = ['autoSize', 'verticalResize'];

package/__inner__/cjs/components/ThemeProvider/ThemeProvider.d.ts

@@ -1,5 +1,6 @@
 import './ThemeProvider.css';
-import React, { ComponentRef, ElementType } from 'react';
+import type { ComponentRef, ElementType } from 'react';
+import React from 'react';
 import { type PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
 import type { Theme } from './types';
 export declare const THEME_DEFAULT_TAG = "div";

package/__inner__/cjs/components/ThemeProvider/types.d.ts

@@ -12,6 +12,7 @@ import type { CollapseProps } from '../Collapse';
 import type { ContainerProps } from '../Container';
 import type { DataListProps } from '../DataList';
 import type { DividerProps } from '../Divider';
+import type { FieldControlProps } from '../FieldControl';
 import type { FileProps } from '../File';
 import type { FilePickerProps } from '../FilePicker';
 import type { FormGroupProps } from '../FormGroup';
@@ -72,6 +73,7 @@ export type Theme = {
         Container?: Partial<ContainerProps>;
         DataList?: Partial<DataListProps>;
         Divider?: Partial<DividerProps>;
+        FieldControl?: Partial<FieldControlProps>;
         File?: Partial<FileProps>;
         FilePicker?: Partial<FilePickerProps>;
         FormGroup?: Partial<FormGroupProps>;

package/__inner__/cjs/components/Tooltip/types.d.ts

@@ -1,6 +1,6 @@
 import type { Ref, ReactNode, ReactElement, ComponentPropsWithRef } from 'react';
 import type { PopoverBaseProps } from '../Popover';
-import { TOOLTIP_DEFAULT_TAG } from './constants';
+import type { TOOLTIP_DEFAULT_TAG } from './constants';
 export declare const tooltipSizeVariant: readonly ["xs", "s"];
 export type TooltipSizeVariant = (typeof tooltipSizeVariant)[number];
 export declare const tooltipVariant: readonly ["light", "dark"];