@ozen-ui/kit 0.0.1

package/__inner__/esm/components/Tabs/components/TabsIndicator/index.d.ts

@@ -0,0 +1 @@
+export * from './TabsIndicator';

package/__inner__/esm/components/Tabs/components/TabsIndicator/index.js

@@ -0,0 +1 @@
+export * from './TabsIndicator';

package/__inner__/esm/components/Tabs/components/index.d.ts

@@ -0,0 +1,3 @@
+export * from './TabsIndicator';
+export * from './ScrollButton';
+export * from './Tab';

package/__inner__/esm/components/Tabs/components/index.js

@@ -0,0 +1,3 @@
+export * from './TabsIndicator';
+export * from './ScrollButton';
+export * from './Tab';

package/__inner__/esm/components/Tabs/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Tabs';
+export * from './components/Tab';
+export * from './types';

package/__inner__/esm/components/Tabs/index.js

@@ -0,0 +1,3 @@
+export * from './Tabs';
+export * from './components/Tab';
+export * from './types';

package/__inner__/esm/components/Tabs/types.d.ts

@@ -0,0 +1,43 @@
+import type { Ref, HTMLAttributes, ReactElement, SyntheticEvent } from 'react';
+import type { TabProps } from './components';
+export declare const tabsSizeVariant: readonly ["xs", "s", "m", "l"];
+export declare const tabsVariant: readonly ["default", "scrollable"];
+export type TabsSizeVariant = (typeof tabsSizeVariant)[number];
+export type TabsVariant = (typeof tabsVariant)[number];
+/** Коды клавиши стрелок для управления фокусом */
+export declare enum ControlKeys {
+    ArrowLeft = "ArrowLeft",
+    ArrowRight = "ArrowRight"
+}
+export type TabsMeta = {
+    tabsListMeta: null | DOMRect;
+    scrollBoxMeta: null | {
+        scrollLeft: number;
+        left: number;
+        right: number;
+    };
+    activeTabMeta: null | DOMRect;
+};
+export interface TabsContextValue {
+    /** Callback вызываемый при смене активной вкладки */
+    onChange?: (event: SyntheticEvent<HTMLElement>, value: string | number) => void;
+    /** Текущая вкладка */
+    currentValue: string | number;
+    /** Размер */
+    size: TabsSizeVariant;
+}
+export type TabsProps = Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> & {
+    children: ReactElement<TabProps>[] | ReactElement<TabProps>;
+    /** Текущее значение */
+    value: TabsContextValue['currentValue'];
+    /** Отключить кнопки скролла */
+    disableScrollButtons?: boolean;
+    /** Вариант отображения */
+    variant?: TabsVariant;
+    /** Callback при изменении состояния */
+    onChange?: TabsContextValue['onChange'];
+    /** Ссылка на HTML элемент */
+    ref?: Ref<HTMLDivElement>;
+    /** Размер */
+    size?: TabsSizeVariant;
+};

package/__inner__/esm/components/Tabs/types.js

@@ -0,0 +1,8 @@
+export var tabsSizeVariant = ['xs', 's', 'm', 'l'];
+export var tabsVariant = ['default', 'scrollable'];
+/** Коды клавиши стрелок для управления фокусом */
+export var ControlKeys;
+(function (ControlKeys) {
+    ControlKeys["ArrowLeft"] = "ArrowLeft";
+    ControlKeys["ArrowRight"] = "ArrowRight";
+})(ControlKeys || (ControlKeys = {}));

package/__inner__/esm/components/Tag/Tag.css

@@ -0,0 +1,110 @@
+/* stylelint-disable */
+.Tag {
+  display: inline-flex;
+  align-items: center;
+  border-radius: var(--border-radius-xs);
+  padding: var(--tag-padding);
+  gap: var(--space-xs);
+  outline: none;
+  border: none;
+}
+.Tag_size_2xs {
+      font: var(--typography-text-3xs-font);
+      letter-spacing: var(--typography-text-3xs-letter_spacing, 0);
+      text-transform: var(--typography-text-3xs-text_transform, none);
+
+      --tag-padding: 0 4px;
+    }
+.Tag_size_xs {
+      font: var(--typography-text-xs-font);
+      letter-spacing: var(--typography-text-xs-letter_spacing, 0);
+      text-transform: var(--typography-text-xs-text_transform, none);
+
+      --tag-padding: 4px 8px;
+    }
+.Tag_size_s {
+      font: var(--typography-text-s-font);
+      letter-spacing: var(--typography-text-s-letter_spacing, 0);
+      text-transform: var(--typography-text-s-text_transform, none);
+
+      --tag-padding: 6px 12px;
+    }
+.Tag_variant_neutral {
+      background-color: var(--color-background-secondary);
+      color: var(--color-content-primary);
+    }
+.Tag_variant_action {
+      background-color: var(--color-background-action-light);
+      color: var(--color-content-action-dark);
+    }
+.Tag_variant_error {
+      background-color: var(--color-background-error-light);
+      color: var(--color-content-error-dark);
+    }
+.Tag_variant_warning {
+      background-color: var(--color-background-warning-light);
+      color: var(--color-content-warning-dark);
+    }
+.Tag_variant_success {
+      background-color: var(--color-background-success-light);
+      color: var(--color-content-success-dark);
+    }
+.Tag_variant_info {
+      background-color: var(--color-background-info-light);
+      color: var(--color-content-info-dark);
+    }
+.Tag-Label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+.Tag-RemoveButton {
+    color: inherit;
+    flex-shrink: 0;
+    cursor: pointer;
+  }
+a.Tag, button.Tag, [role='button'].Tag {
+    cursor: pointer;
+  }
+a.Tag_variant_neutral:hover, button.Tag_variant_neutral:hover, [role='button'].Tag_variant_neutral:hover {
+          background-color: var(--color-background-secondary-hover);
+        }
+a.Tag_variant_neutral:active, button.Tag_variant_neutral:active, [role='button'].Tag_variant_neutral:active {
+          background-color: var(--color-background-secondary-pressed);
+        }
+a.Tag_variant_action:hover, button.Tag_variant_action:hover, [role='button'].Tag_variant_action:hover {
+          background-color: var(--color-background-action-light-hover);
+        }
+a.Tag_variant_action:active, button.Tag_variant_action:active, [role='button'].Tag_variant_action:active {
+          background-color: var(--color-background-action-light-pressed);
+        }
+a.Tag_variant_error:hover, button.Tag_variant_error:hover, [role='button'].Tag_variant_error:hover {
+          background-color: var(--color-background-error-light-hover);
+        }
+a.Tag_variant_error:active, button.Tag_variant_error:active, [role='button'].Tag_variant_error:active {
+          background-color: var(--color-background-error-light-pressed);
+        }
+a.Tag_variant_warning:hover, button.Tag_variant_warning:hover, [role='button'].Tag_variant_warning:hover {
+          background-color: var(--color-background-warning-light-hover);
+        }
+a.Tag_variant_warning:active, button.Tag_variant_warning:active, [role='button'].Tag_variant_warning:active {
+          background-color: var(--color-background-warning-light-pressed);
+        }
+a.Tag_variant_success:hover, button.Tag_variant_success:hover, [role='button'].Tag_variant_success:hover {
+          background-color: var(--color-background-success-light-hover);
+        }
+a.Tag_variant_success:active, button.Tag_variant_success:active, [role='button'].Tag_variant_success:active {
+          background-color: var(--color-background-success-light-pressed);
+        }
+a.Tag_variant_info:hover, button.Tag_variant_info:hover, [role='button'].Tag_variant_info:hover {
+          background-color: var(--color-background-info-light-hover);
+        }
+a.Tag_variant_info:active, button.Tag_variant_info:active, [role='button'].Tag_variant_info:active {
+          background-color: var(--color-background-info-light-pressed);
+        }
+a.Tag:focus:not(:focus-visible), button.Tag:focus:not(:focus-visible), [role='button'].Tag:focus:not(:focus-visible) {
+      box-shadow: none;
+    }
+a.Tag:focus, button.Tag:focus, [role='button'].Tag:focus {
+      box-shadow: var(--shadow-outline-focused);
+    }

package/__inner__/esm/components/Tag/Tag.d.ts

@@ -0,0 +1,30 @@
+import './Tag.css';
+import type { ElementType, FC } from 'react';
+import type { IconProps, IconSize } from '@ozen-ui/icons';
+import { type PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
+import { type RemoveButtonProps } from './components';
+export declare const tagVariant: readonly ["neutral", "action", "error", "warning", "success", "info"];
+export declare const tagSizeVariant: readonly ["2xs", "xs", "s"];
+export type TagVariant = (typeof tagVariant)[number];
+export type TagSizeVariant = (typeof tagSizeVariant)[number];
+export type TagIcon = FC<IconProps & {
+    size?: IconSize;
+}>;
+export declare const cnTag: import("@bem-react/classname").ClassNameFormatter;
+type TagBaseProps = {
+    /** Текст лейбла внутри тега */
+    label: string;
+    /** Размер */
+    size?: TagSizeVariant;
+    /** Вариант компонента */
+    variant?: TagVariant;
+    /** Callback для обработчика клика по иконке */
+    onRemove?: RemoveButtonProps['onClick'];
+    /** Иконка слева */
+    iconLeft?: TagIcon;
+    /** Иконка справа */
+    iconRight?: TagIcon;
+};
+export type TagProps<As extends ElementType = 'div'> = PolymorphicComponentPropsWithoutRef<TagBaseProps, As>;
+export declare const Tag: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<TagBaseProps, "div">;
+export {};

package/__inner__/esm/components/Tag/Tag.js

@@ -0,0 +1,28 @@
+import { __assign, __rest } from "tslib";
+import './Tag.css';
+import React from 'react';
+import { useThemeProps } from '../../hooks/useThemeProps';
+import { cn } from '../../utils/classname';
+import { polymorphicComponentWithRef, } from '../../utils/polymorphicComponentWithRef';
+import { RemoveButton } from './components';
+import { TAG_DEFAULT_AS, TAG_DEFAULT_SIZE, TAG_DEFAULT_VARIANT, } from './constants';
+export var tagVariant = [
+    'neutral',
+    'action',
+    'error',
+    'warning',
+    'success',
+    'info',
+];
+export var tagSizeVariant = ['2xs', 'xs', 's'];
+export var cnTag = cn('Tag');
+export var Tag = polymorphicComponentWithRef(function (inProps, ref) {
+    var props = useThemeProps({ props: inProps, name: 'Tag' });
+    var _a = props.size, size = _a === void 0 ? TAG_DEFAULT_SIZE : _a, _b = props.as, Tag = _b === void 0 ? TAG_DEFAULT_AS : _b, _c = props.variant, variant = _c === void 0 ? TAG_DEFAULT_VARIANT : _c, IconLeft = props.iconLeft, IconRight = props.iconRight, label = props.label, className = props.className, onRemove = props.onRemove, other = __rest(props, ["size", "as", "variant", "iconLeft", "iconRight", "label", "className", "onRemove"]);
+    return (React.createElement(Tag, __assign({ className: cnTag({ variant: variant, size: size }, [className]) }, other, { ref: ref }),
+        IconLeft && React.createElement(IconLeft, { size: "s" }),
+        React.createElement("span", { className: cnTag('Label') }, label),
+        IconRight && React.createElement(IconRight, { size: "s" }),
+        !!onRemove && (React.createElement(RemoveButton, { onClick: onRemove, className: cnTag('RemoveButton'), size: size }))));
+});
+Tag.displayName = 'Tag';

package/__inner__/esm/components/Tag/components/RemoveButton/Remove2xsIcon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { IconProps } from '@ozen-ui/icons';
+export declare const Remove2xsIcon: React.FC<IconProps>;

package/__inner__/esm/components/Tag/components/RemoveButton/Remove2xsIcon.js

@@ -0,0 +1,5 @@
+import { __assign } from "tslib";
+import React, { forwardRef } from 'react';
+export var Remove2xsIcon = forwardRef(function (props, ref) { return (React.createElement("svg", __assign({ width: "8", height: "8", viewBox: "0 0 8 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { ref: ref }),
+    React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M1.14645 1.14645C1.34171 0.951184 1.65829 0.951184 1.85355 1.14645L4 3.29289L6.14645 1.14645C6.34171 0.951184 6.65829 0.951184 6.85355 1.14645C7.04882 1.34171 7.04882 1.65829 6.85355 1.85355L4.70711 4L6.85355 6.14645C7.04882 6.34171 7.04882 6.65829 6.85355 6.85355C6.65829 7.04882 6.34171 7.04882 6.14645 6.85355L4 4.70711L1.85355 6.85355C1.65829 7.04882 1.34171 7.04882 1.14645 6.85355C0.951184 6.65829 0.951184 6.34171 1.14645 6.14645L3.29289 4L1.14645 1.85355C0.951184 1.65829 0.951184 1.34171 1.14645 1.14645Z", fill: "currentColor" }))); });
+Remove2xsIcon.displayName = 'Remove2xsIcon';

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

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+import type { IconProps } from '@ozen-ui/icons';
+export declare const removeButtonSizeVariant: readonly ["s", "xs", "2xs"];
+export type RemoveButtonSizeVariant = (typeof removeButtonSizeVariant)[number];
+export interface RemoveButtonProps extends IconProps {
+    size: RemoveButtonSizeVariant;
+    className?: string;
+}
+export declare const RemoveButton: FC<RemoveButtonProps>;

package/__inner__/esm/components/Tag/components/RemoveButton/RemoveButton.js

@@ -0,0 +1,16 @@
+import { __assign, __rest } from "tslib";
+import React, { useMemo, forwardRef } from 'react';
+import { Remove2xsIcon } from './Remove2xsIcon';
+import { RemoveSIcon } from './RemoveSIcon';
+export var removeButtonSizeVariant = ['s', 'xs', '2xs'];
+var icons = {
+    s: RemoveSIcon,
+    xs: RemoveSIcon,
+    '2xs': Remove2xsIcon
+};
+export var RemoveButton = forwardRef(function (_a, ref) {
+    var size = _a.size, props = __rest(_a, ["size"]);
+    var Icon = useMemo(function () { return icons[size]; }, [size]);
+    return React.createElement(Icon, __assign({}, props, { ref: ref }));
+});
+RemoveButton.displayName = 'RemoveButton';

package/__inner__/esm/components/Tag/components/RemoveButton/RemoveSIcon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { IconProps } from '@ozen-ui/icons';
+export declare const RemoveSIcon: React.FC<IconProps>;

package/__inner__/esm/components/Tag/components/RemoveButton/RemoveSIcon.js

@@ -0,0 +1,5 @@
+import { __assign } from "tslib";
+import React, { forwardRef } from 'react';
+export var RemoveSIcon = forwardRef(function (props, ref) { return (React.createElement("svg", __assign({ width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { ref: ref }),
+    React.createElement("path", { d: "M3.75776 3.75739C3.46486 4.05028 3.46486 4.52516 3.75776 4.81805L6.93974 8.00003L3.75776 11.182C3.46486 11.4749 3.46486 11.9498 3.75776 12.2427C4.05065 12.5356 4.52552 12.5356 4.81842 12.2427L8.0004 9.06069L11.1824 12.2427C11.4753 12.5356 11.9501 12.5356 12.243 12.2427C12.5359 11.9498 12.5359 11.4749 12.243 11.182L9.06106 8.00003L12.243 4.81805C12.5359 4.52516 12.5359 4.05028 12.243 3.75739C11.9501 3.4645 11.4753 3.4645 11.1824 3.75739L8.0004 6.93937L4.81842 3.75739C4.52552 3.4645 4.05065 3.4645 3.75776 3.75739Z", fill: "currentColor" }))); });
+RemoveSIcon.displayName = 'RemoveSIcon';

package/__inner__/esm/components/Tag/components/RemoveButton/index.d.ts

@@ -0,0 +1 @@
+export * from './RemoveButton';

package/__inner__/esm/components/Tag/components/RemoveButton/index.js

@@ -0,0 +1 @@
+export * from './RemoveButton';

package/__inner__/esm/components/Tag/components/index.d.ts

@@ -0,0 +1 @@
+export * from './RemoveButton';

package/__inner__/esm/components/Tag/components/index.js

@@ -0,0 +1 @@
+export * from './RemoveButton';

package/__inner__/esm/components/Tag/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const TAG_DEFAULT_AS = "div";
+export declare const TAG_DEFAULT_VARIANT = "neutral";
+export declare const TAG_DEFAULT_SIZE = "s";

package/__inner__/esm/components/Tag/constants.js

@@ -0,0 +1,3 @@
+export var TAG_DEFAULT_AS = 'div';
+export var TAG_DEFAULT_VARIANT = 'neutral';
+export var TAG_DEFAULT_SIZE = 's';

package/__inner__/esm/components/Tag/index.d.ts

@@ -0,0 +1 @@
+export * from './Tag';

package/__inner__/esm/components/Tag/index.js

@@ -0,0 +1 @@
+export * from './Tag';

package/__inner__/esm/components/Textarea/Textarea.css

@@ -0,0 +1,205 @@
+.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;
+  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);
+  }
+
+  .Textarea-Body {
+    position: relative;
+    inline-size: 100%;
+    display: flex;
+    border: none;
+    outline: none;
+    box-sizing: border-box;
+    background-color: var(--textfield-background-color);
+    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;
+  }
+
+  .Textarea-Field {
+    --scroll-bar-size: 12px;
+  }
+
+  .Textarea-Field::-webkit-scrollbar {
+    inline-size: var(--scroll-bar-size);
+  }
+
+  .Textarea-Field::-webkit-scrollbar-thumb {
+    background-color: var(--color-background-secondary);
+    border-radius: calc(var(--scroll-bar-size) / 2);
+    border: calc(var(--scroll-bar-size) / 4) solid transparent;
+    background-clip: padding-box;
+    border-image: initial;
+    min-block-size: 24px;
+  }
+
+  .Textarea-Field::-webkit-scrollbar-thumb:hover,
+    .Textarea-Field::-webkit-scrollbar-thumb:active {
+      border: calc(var(--scroll-bar-size) / 4) solid transparent;
+      background-clip: padding-box;
+    }
+
+  .Textarea-Field::-webkit-scrollbar-thumb:hover {
+      background-color: var(--color-background-secondary-hover);
+    }
+
+  .Textarea-Field::-webkit-scrollbar-thumb:active {
+      background-color: var(--color-background-secondary-pressed);
+    }
+
+  .Textarea-Field::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+
+  .Textarea-Field {
+    border: none;
+    display: flex;
+    outline: none;
+    font: var(--textfield-input-font);
+    background-color: var(--textfield-background-color);
+    color: var(--textfield-color);
+    padding: 0 var(--textfield-gutter-x);
+    inline-size: inherit;
+    resize: none;
+}
+
+  .Textarea-Field::placeholder {
+      opacity: 1;
+      color: var(--color-content-tertiary);
+    }
+
+  .Textarea-Counter {
+    float: right;
+    margin-inline-start: var(--space-l);
+    color: var(--color-content-secondary);
+  }
+
+  .Textarea-Counter_disabled {
+      color: var(--color-content-disabled);
+    }
+
+  .Textarea_expand_autoSize .Textarea-Body {
+        resize: none;
+      }
+
+  .Textarea_expand_verticalResize .Textarea-Body {
+        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__/esm/components/Textarea/Textarea.d.ts

@@ -0,0 +1,63 @@
+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';
+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 {};