@sima-land/ui-nucleons 44.2.10 → 45.0.0-alpha.1

package/stepper/index.d.ts

@@ -1,30 +1,38 @@
-import React from 'react';
-declare type Size = 's' | 'm';
-interface StepperCSS extends React.CSSProperties {
+import React, { CSSProperties, InputHTMLAttributes, MouseEventHandler } from 'react';
+/** Размер Stepper (влияет на высоту и минимальную ширину). */
+export type StepperSize = 's' | 'm';
+/** Стили Stepper. */
+export interface StepperStyle extends CSSProperties {
+    /** Ширина. */
     '--stepper-width'?: string;
 }
-export interface StepperProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'style'> {
+export interface StepperProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'style'> {
     /** Нужно ли выводить кнопку добавления. */
     canAdd?: boolean;
     /** Нужно ли выводить кнопку вычитания. */
     canSubtract?: boolean;
+    /** Делает кнопку "+" отключенной. */
+    plusDisabled?: boolean;
+    /** Делает кнопку "-" отключенной. */
+    minusDisabled?: boolean;
+    /** Нужно ли предотвращать blur на поле при нажатии "+/-". */
+    buttonClickBehavior?: 'prevent-input-blur';
     /** Сработает при добавлении. */
-    onAdd?: React.MouseEventHandler;
+    onAdd?: MouseEventHandler;
     /** Сработает при вычитании. */
-    onSubtract?: React.MouseEventHandler;
+    onSubtract?: MouseEventHandler;
     /** Размер. */
-    size?: Size;
+    size?: StepperSize;
     /** Идентификатор для систем автоматизированного тестирования. */
     'data-testid'?: string;
     /** Стили корневого элемента. */
-    style?: StepperCSS;
+    style?: StepperStyle;
     /** Нужно ли показывать состояние ошибки. */
     failed?: boolean;
 }
 /**
- * Компонент поля количества.
+ * Stepper - поле ввода количества.
  * @param props Свойства.
  * @return Элемент.
  */
 export declare const Stepper: React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<HTMLInputElement>>;
-export {};

package/stepper/index.js

@@ -45,16 +45,25 @@ const stepper_module_scss_1 = __importDefault(require("./stepper.module.scss"));
 const bind_1 = __importDefault(require("classnames/bind"));
 const cx = bind_1.default.bind(stepper_module_scss_1.default);
 /**
- * Компонент поля количества.
+ * Stepper - поле ввода количества.
  * @param props Свойства.
  * @return Элемент.
  */
-exports.Stepper = (0, react_1.forwardRef)((_a, ref) => {
-    var { canAdd = true, canSubtract = true, className, disabled, readOnly, onAdd, onBlur, onChange, onFocus, onSubtract, size = 'm', style, value, failed, 'data-testid': testId = 'stepper' } = _a, inputProps = __rest(_a, ["canAdd", "canSubtract", "className", "disabled", "readOnly", "onAdd", "onBlur", "onChange", "onFocus", "onSubtract", "size", "style", "value", "failed", 'data-testid']);
+exports.Stepper = (0, react_1.forwardRef)(function Stepper(_a, forwardedRef) {
+    var _b, _c;
+    var { buttonClickBehavior, canAdd = true, canSubtract = true, className, disabled, plusDisabled = disabled, minusDisabled = disabled, readOnly, onAdd, onBlur, onChange, onFocus, onSubtract, size = 'm', style, value, failed, 'data-testid': testId = 'stepper' } = _a, inputProps = __rest(_a, ["buttonClickBehavior", "canAdd", "canSubtract", "className", "disabled", "plusDisabled", "minusDisabled", "readOnly", "onAdd", "onBlur", "onChange", "onFocus", "onSubtract", "size", "style", "value", "failed", 'data-testid']);
+    const ref = (0, react_1.useRef)(null);
     const [focused, setFocused] = (0, react_1.useState)(false);
-    return (react_1.default.createElement("div", { "data-testid": testId, style: style, className: cx('root', `size-${size}`, { disabled, focused, readonly: readOnly, failed }, className) },
-        react_1.default.createElement("button", { className: cx('button', { hidden: !canSubtract }), "data-testid": 'stepper:minus', onClick: canSubtract && !disabled && !readOnly ? onSubtract : undefined },
-            react_1.default.createElement(minus_1.default, null)),
+    (0, react_1.useImperativeHandle)(forwardedRef, () => ref.current);
+    const noBlurOnMousedown = (0, react_1.useCallback)(event => {
+        if (focused && event.target !== ref.current && buttonClickBehavior === 'prevent-input-blur') {
+            event.preventDefault();
+        }
+    }, [focused, buttonClickBehavior]);
+    const rootClassName = cx('root', `size-${size}`, { disabled, focused, failed }, className);
+    return (react_1.default.createElement("div", { "data-testid": testId, style: style, className: rootClassName, onMouseDown: noBlurOnMousedown },
+        react_1.default.createElement("button", { tabIndex: -1, hidden: !canSubtract, disabled: (_b = minusDisabled !== null && minusDisabled !== void 0 ? minusDisabled : disabled) !== null && _b !== void 0 ? _b : readOnly, className: cx('button'), "data-testid": 'stepper:minus', "aria-label": '\u0423\u043C\u0435\u043D\u044C\u0448\u0438\u0442\u044C', onMouseDown: noBlurOnMousedown, onClick: canSubtract && !minusDisabled && !disabled && !readOnly ? onSubtract : undefined },
+            react_1.default.createElement(minus_1.default, { className: stepper_module_scss_1.default.svg })),
         react_1.default.createElement("input", Object.assign({}, inputProps, { ref: ref, readOnly: readOnly, "data-testid": 'stepper:input', className: cx('input'), value: value, disabled: disabled, onChange: onChange, onFocus: e => {
                 setFocused(true);
                 onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
@@ -62,6 +71,6 @@ exports.Stepper = (0, react_1.forwardRef)((_a, ref) => {
                 setFocused(false);
                 onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
             } })),
-        react_1.default.createElement("button", { className: cx('button', { hidden: !canAdd }), "data-testid": 'stepper:plus', onClick: canAdd && !disabled && !readOnly ? onAdd : undefined },
-            react_1.default.createElement(plus_1.default, null))));
+        react_1.default.createElement("button", { tabIndex: -1, hidden: !canAdd, disabled: (_c = plusDisabled !== null && plusDisabled !== void 0 ? plusDisabled : disabled) !== null && _c !== void 0 ? _c : readOnly, className: cx('button'), "data-testid": 'stepper:plus', "aria-label": '\u0423\u0432\u0435\u043B\u0438\u0447\u0438\u0442\u044C', onMouseDown: noBlurOnMousedown, onClick: canAdd && !plusDisabled && !disabled && !readOnly ? onAdd : undefined },
+            react_1.default.createElement(plus_1.default, { className: stepper_module_scss_1.default.svg }))));
 });

package/stepper/stepper.module.scss

@@ -7,24 +7,15 @@
   border-radius: 4px;
   color: colors.$basic-gray87;
   background: colors.$basic-gray8;
-  &.focused:not(.disabled) {
+  &.focused {
     border-color: colors.$basic-blue;
   }
   &.disabled {
     color: colors.$basic-gray24;
     border-color: colors.$basic-gray4;
     background: colors.$basic-gray4;
-    .button {
-      fill: colors.$basic-gray24;
-    }
   }
-  &.readonly {
-    .button {
-      fill: colors.$basic-gray24;
-    }
-  }
-  &.failed:not(.disabled):not(.focused) {
-    border-color: transparent;
+  &.failed {
     color: colors.$additional-deep-red;
   }
   &.size-s {
@@ -65,7 +56,7 @@
   background: transparent;
   width: var(--stepper-button-width);
   height: 100%;
-  fill: colors.$basic-gray87;
+  color: colors.$basic-gray87;
   flex-shrink: 0;
   &:first-child {
     justify-content: flex-end;
@@ -73,11 +64,19 @@
   &:last-child {
     justify-content: flex-start;
   }
-  &:not(.hidden) {
+  &:not(.hidden):not(:disabled) {
     cursor: pointer;
   }
-  &.hidden {
-    opacity: 0;
+  &:disabled {
+    color: colors.$basic-gray24;
     pointer-events: none;
   }
+  &[hidden] {
+    pointer-events: none;
+    opacity: 0;
+  }
+}
+
+.svg {
+  fill: currentColor;
 }

package/styling/fonts.d.ts

@@ -1,6 +1,6 @@
-export declare type Size = 12 | 14 | 16 | 20 | 24 | 32 | 48 | 64;
-export declare type LineHeight = 16 | 20 | 24 | 28 | 32 | 40 | 60 | 80;
-export declare type Weight = 400 | 600 | 700;
+export type Size = 12 | 14 | 16 | 20 | 24 | 32 | 48 | 64;
+export type LineHeight = 16 | 20 | 24 | 28 | 32 | 40 | 60 | 80;
+export type Weight = 400 | 600 | 700;
 export declare const SIZES: Set<Size>;
 export declare const LINE_HEIGHTS: Set<LineHeight>;
 export declare const WEIGHTS: Set<Weight>;

package/switcher-row/index.d.ts

@@ -0,0 +1,42 @@
+import { CSSProperties, ReactNode } from 'react';
+export interface SwitcherRowProps {
+    /** Содержимое. */
+    children?: ReactNode;
+    /** Направление текста. */
+    textAlign?: 'left' | 'right';
+    /** Стили корневого элемента. */
+    style?: CSSProperties;
+    /** CSS-класс корневого элемента. */
+    className?: string;
+    /** Позиция поля. */
+    fieldPosition?: 'start' | 'end';
+    /** Идентификатор для систем автоматизированного тестирования. */
+    'data-testid'?: string;
+}
+/**
+ * Блок вывода полей-переключателей (Checkbox, Toggle, RadioButton).
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function SwitcherRow({ children, className, style, textAlign, fieldPosition, 'data-testid': testId, }: SwitcherRowProps): JSX.Element;
+export declare namespace SwitcherRow {
+    var Label: typeof SwitcherRowLabel;
+    var Comment: typeof SwitcherRowComment;
+}
+/**
+ * Слот ярлыка.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+declare function SwitcherRowLabel({ children }: {
+    children?: ReactNode;
+}): JSX.Element;
+/**
+ * Слот комментария.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+declare function SwitcherRowComment({ children }: {
+    children?: ReactNode;
+}): JSX.Element;
+export {};

package/switcher-row/index.js

@@ -0,0 +1,59 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SwitcherRow = void 0;
+const react_1 = __importDefault(require("react"));
+const checkbox_1 = require("../checkbox");
+const define_slots_1 = require("../helpers/define-slots");
+const radio_button_1 = require("../radio-button");
+const toggle_1 = require("../toggle");
+const bind_1 = __importDefault(require("classnames/bind"));
+const switcher_row_module_scss_1 = __importDefault(require("./switcher-row.module.scss"));
+const cx = bind_1.default.bind(switcher_row_module_scss_1.default);
+/**
+ * Блок вывода полей-переключателей (Checkbox, Toggle, RadioButton).
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function SwitcherRow({ children, className, style, textAlign, fieldPosition = 'start', 'data-testid': testId = 'switcher-row', }) {
+    var _a;
+    const { toggle, checkbox, radio, label, comment } = (0, define_slots_1.defineSlots)(children, {
+        toggle: toggle_1.Toggle,
+        checkbox: checkbox_1.Checkbox,
+        radio: radio_button_1.RadioButton,
+        label: SwitcherRowLabel,
+        comment: SwitcherRowComment,
+    });
+    const input = (_a = toggle !== null && toggle !== void 0 ? toggle : checkbox) !== null && _a !== void 0 ? _a : radio;
+    const failed = input === null || input === void 0 ? void 0 : input.props.failed;
+    const disabled = input === null || input === void 0 ? void 0 : input.props.disabled;
+    const fieldId = input === null || input === void 0 ? void 0 : input.props.id;
+    const fieldColumn = input && (react_1.default.createElement("div", { className: cx('col', 'field-col', { 'toggle-col': toggle }) }, input));
+    return (react_1.default.createElement("div", { className: cx('root', `text-align-${textAlign}`, { failed, disabled }, className), style: style, "data-testid": testId },
+        fieldPosition === 'start' && fieldColumn,
+        react_1.default.createElement("label", { className: cx('col', 'main-col'), htmlFor: fieldId },
+            label && (react_1.default.createElement("span", { className: cx('label', { 'for-toggle': toggle }), "data-testid": 'switcher-row:label' }, label)),
+            comment && (react_1.default.createElement("span", { className: cx('comment'), "data-testid": 'switcher-row:comment' }, comment))),
+        fieldPosition === 'end' && fieldColumn));
+}
+exports.SwitcherRow = SwitcherRow;
+/**
+ * Слот ярлыка.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function SwitcherRowLabel({ children }) {
+    return react_1.default.createElement(react_1.default.Fragment, null, children);
+}
+/**
+ * Слот комментария.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function SwitcherRowComment({ children }) {
+    return react_1.default.createElement(react_1.default.Fragment, null, children);
+}
+SwitcherRow.Label = SwitcherRowLabel;
+SwitcherRow.Comment = SwitcherRowComment;

package/switcher-row/switcher-row.module.scss

@@ -0,0 +1,59 @@
+@use '../colors';
+
+.root {
+  --label-color: #{colors.$basic-gray87};
+  --comment-color: #{colors.$basic-gray38};
+  display: flex;
+  flex-direction: row;
+  &.text-align-left {
+    text-align: left;
+  }
+  &.text-align-right {
+    text-align: right;
+  }
+  &.disabled {
+    --label-color: #{colors.$basic-gray24};
+    --comment-color: #{colors.$basic-gray24};
+  }
+  &.failed {
+    --label-color: #{colors.$additional-deep-red};
+  }
+}
+
+.col + .col {
+  margin-left: 8px;
+}
+
+.toggle-col + .col {
+  margin-left: 12px;
+}
+
+.field-col {
+  flex-grow: 0;
+}
+
+.main-col {
+  flex-grow: 1;
+  cursor: pointer;
+}
+
+.label {
+  display: block;
+  font-size: inherit;
+  line-height: inherit;
+  font-weight: inherit;
+  color: var(--label-color);
+  &.for-toggle {
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 24px;
+  }
+}
+
+.comment {
+  display: block;
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 400;
+  color: var(--comment-color);
+}

package/text/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Size, LineHeight, Weight } from '../styling/fonts';
 import { Token } from '../colors';
-declare type Align = 'left' | 'center' | 'right' | 'justify';
+type Align = 'left' | 'center' | 'right' | 'justify';
 export interface TextProps {
     /** Направление. */
     align?: Align;

package/text-button/index.d.ts

@@ -0,0 +1,42 @@
+import React, { AnchorHTMLAttributes, ButtonHTMLAttributes, ComponentType, Ref, SVGAttributes } from 'react';
+import { LinkColor } from '../link';
+export type TextButtonSize = 's' | 'm';
+export type TextButtonColor = LinkColor;
+interface CommonProps {
+    /** Размер. */
+    size?: TextButtonSize;
+    /** Цвет. */
+    color?: TextButtonColor;
+    /** Иконка перед текстом. */
+    startIcon?: ComponentType<SVGAttributes<SVGSVGElement>>;
+    /** Иконка после текста. */
+    endIcon?: ComponentType<SVGAttributes<SVGSVGElement>>;
+    /** Ref для элемента button. Будет заполнен только при appearance: 'button'. */
+    buttonRef?: Ref<HTMLButtonElement>;
+    /** Ref для элемента a. Будет заполнен только при appearance: 'link'. */
+    anchorRef?: Ref<HTMLAnchorElement>;
+    /** Нужно ли выводить подчеркивание. */
+    underline?: boolean;
+    /** Отключенное состояние. */
+    disabled?: boolean;
+    /** Отступ от иконок. */
+    iconGutter?: 4 | 8;
+    /** Идентификатор для систем автоматизированного тестирования. */
+    'data-testid'?: string;
+}
+export type TextButtonAsButtonProps = CommonProps & Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof CommonProps> & {
+    /** Какой элемент выводить в качестве текстовой кнопки. */
+    as?: 'button';
+};
+export type TextButtonAsAnchorProps = CommonProps & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof CommonProps> & {
+    /** Какой элемент выводить в качестве текстовой кнопки. */
+    as: 'anchor';
+};
+export type TextButtonProps = TextButtonAsButtonProps | TextButtonAsAnchorProps;
+/**
+ * Текстовая кнопка.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function TextButton({ size, color, children, className, startIcon: StartIcon, endIcon: EndIcon, buttonRef, anchorRef, underline, disabled, iconGutter, 'data-testid': testId, ...restProps }: TextButtonProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export {};

package/text-button/index.js

@@ -0,0 +1,46 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextButton = void 0;
+const react_1 = __importDefault(require("react"));
+const bind_1 = __importDefault(require("classnames/bind"));
+const text_button_module_scss_1 = __importDefault(require("./text-button.module.scss"));
+const cx = bind_1.default.bind(text_button_module_scss_1.default);
+/**
+ * Текстовая кнопка.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function TextButton(_a) {
+    var { size = 'm', color = 'basic-blue', children, className, startIcon: StartIcon, endIcon: EndIcon, buttonRef, anchorRef, underline, disabled, iconGutter = 8, 'data-testid': testId = 'text-button' } = _a, restProps = __rest(_a, ["size", "color", "children", "className", "startIcon", "endIcon", "buttonRef", "anchorRef", "underline", "disabled", "iconGutter", 'data-testid']);
+    const rooClassName = cx('root', `color-${color}`, `size-${size}`, `icon-gutter-${iconGutter}`, underline && 'underline', disabled && 'disabled', className);
+    const content = (react_1.default.createElement(react_1.default.Fragment, null,
+        StartIcon && react_1.default.createElement(StartIcon, { className: cx('icon-start') }),
+        children,
+        EndIcon && react_1.default.createElement(EndIcon, { className: cx('icon-end') })));
+    let result;
+    switch (restProps.as) {
+        case 'anchor':
+            result = (react_1.default.createElement("a", Object.assign({}, restProps, { ref: anchorRef, className: rooClassName, "data-testid": testId }), content));
+            break;
+        case 'button':
+        default:
+            result = (react_1.default.createElement("button", Object.assign({}, restProps, { ref: buttonRef, className: rooClassName, disabled: disabled, "data-testid": testId }), content));
+            break;
+    }
+    return result;
+}
+exports.TextButton = TextButton;

package/text-button/text-button.module.scss

@@ -0,0 +1,96 @@
+@use '../colors';
+@use '../utils';
+@use '../link/link-util';
+
+.root {
+  @include utils.reset-button;
+  @include utils.focus-visible;
+  display: inline-flex;
+  align-items: center;
+  font-weight: 600;
+  white-space: nowrap;
+  background: transparent;
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+.root,
+.root:link,
+.root:visited,
+.root:hover,
+.root:active {
+  cursor: default;
+  text-decoration: none;
+  border-bottom-color: transparent;
+  &.underline {
+    box-shadow: inset 0 -1px 0 0 currentColor;
+  }
+}
+
+.root:hover {
+  cursor: pointer;
+}
+
+.size-s {
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.size-m {
+  font-size: 16px;
+  line-height: 24px;
+}
+
+.icon-gutter-4 {
+  --text-button-icon-gutter: 4px;
+}
+
+.icon-gutter-8 {
+  --text-button-icon-gutter: 8px;
+}
+
+// ниже двойные классы для высокой специфичности в монолите
+.root.disabled {
+  color: colors.$basic-gray24;
+  pointer-events: none;
+}
+
+.root:not(.disabled).color-basic-blue {
+  @include link-util.color('basic-blue');
+}
+
+.root:not(.disabled).color-basic-gray87 {
+  @include link-util.color('basic-gray87');
+}
+
+.root:not(.disabled).color-basic-gray38 {
+  @include link-util.color('basic-gray38');
+}
+
+.root:not(.disabled).color-basic-white {
+  @include link-util.color('basic-white');
+}
+
+.root:not(.disabled).color-additional-red {
+  @include link-util.color('additional-red');
+}
+
+.root:not(.disabled).color-additional-teal {
+  @include link-util.color('additional-teal');
+}
+
+// иконки
+.icon-start,
+.icon-end {
+  flex-shrink: 0;
+  fill: currentColor;
+}
+
+.icon-start {
+  margin-right: var(--text-button-icon-gutter);
+}
+
+.icon-end {
+  margin-left: var(--text-button-icon-gutter);
+}

package/text-field/index.d.ts

@@ -1,14 +1,14 @@
 import React from 'react';
-import { BaseInputProps } from '../base-input';
+import { BaseInputProps } from '../base-input-deprecated';
 import { SmallRounds } from '../styling/shapes';
-declare type Variant = 'desktop' | 'mobile';
-export declare type DesktopSize = 'xs' | 's' | 'l';
-declare type Classes = {
+type Variant = 'desktop' | 'mobile';
+export type DesktopSize = 'xs' | 's' | 'l';
+type Classes = {
     root?: string;
     baseInput?: string;
     blockFocused?: string;
 };
-declare type IgnoredInputProps = 'size' | 'onClick' | 'onInput' | 'onChange' | 'onKeyDown' | 'onKeyUp' | 'onSelect';
+type IgnoredInputProps = 'size' | 'onClick' | 'onInput' | 'onChange' | 'onKeyDown' | 'onKeyUp' | 'onSelect';
 export interface TextFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, IgnoredInputProps> {
     /** Ярлык. */
     label?: string;
@@ -57,10 +57,11 @@ export declare const HEIGHTS: {
     readonly l: 56;
 };
 export declare const DEFAULTS: {
-    readonly size: "s" | "xs" | "l";
+    readonly size: "xs" | "s" | "l";
 };
 /**
  * Компонент текстового поля.
+ * @deprecated На адаптивных страницах следует использовать Input или Textarea.
  * @param props Свойства.
  * @return Элемент.
  */

package/text-field/index.js

@@ -30,7 +30,7 @@ exports.TextField = exports.DEFAULTS = exports.HEIGHTS = void 0;
 const react_1 = __importStar(require("react"));
 const lodash_1 = require("lodash");
 const box_1 = require("../box");
-const base_input_1 = require("../base-input");
+const base_input_deprecated_1 = require("../base-input-deprecated");
 const shapes_1 = require("../styling/shapes");
 const bind_1 = __importDefault(require("classnames/bind"));
 const text_field_module_scss_1 = __importDefault(require("./text-field.module.scss"));
@@ -52,6 +52,7 @@ const isVisible = (value) => !(0, lodash_1.isNil)(value) && `${value}` !== '';
 const modifiersToClasses = ({ disabled, failed, focused, variant, }) => cx(disabled && 'disabled', failed && 'failed', focused && 'focused', variant && `variant-${variant}`);
 /**
  * Компонент текстового поля.
+ * @deprecated На адаптивных страницах следует использовать Input или Textarea.
  * @param props Свойства.
  * @return Элемент.
  */
@@ -87,7 +88,7 @@ exports.TextField = (0, react_1.forwardRef)(function TextField({ autoFocus, capt
             react_1.default.createElement("div", { className: cx('main-column') },
                 withLabel && (react_1.default.createElement("label", { className: cx('label', commonModifyClasses, hasValue && 'filled', labelAsPlaceholder && 'as-placeholder'), htmlFor: id, children: label, "data-testid": 'text-field:label' })),
                 react_1.default.createElement("div", { className: cx('input-wrapper') },
-                    react_1.default.createElement(base_input_1.BaseInput, Object.assign({}, baseInputProps, { type: type, id: id, name: name, autoComplete: autoComplete, "data-testid": 'text-field:field', multiline: multiline, ref: baseInputRef, placeholder: withLabel && labelAsPlaceholder ? undefined : placeholder, restPlaceholder: withLabel && labelAsPlaceholder ? undefined : restPlaceholder, autoFocus: autoFocus, className: cx('base-input', commonModifyClasses, classes.baseInput, size && `size-${size}`), defaultValue: defaultValue, value: value, readOnly: readOnly, disabled: disabled, onFocus: (event) => {
+                    react_1.default.createElement(base_input_deprecated_1.BaseInput, Object.assign({}, baseInputProps, { type: type, id: id, name: name, autoComplete: autoComplete, "data-testid": 'text-field:field', multiline: multiline, ref: baseInputRef, placeholder: withLabel && labelAsPlaceholder ? undefined : placeholder, restPlaceholder: withLabel && labelAsPlaceholder ? undefined : restPlaceholder, autoFocus: autoFocus, className: cx('base-input', commonModifyClasses, classes.baseInput, size && `size-${size}`), defaultValue: defaultValue, value: value, readOnly: readOnly, disabled: disabled, onFocus: (event) => {
                             onFocus && onFocus(event);
                             toggleHasValue(Boolean(event.target.value));
                             toggleFocused(true);

package/textarea/index.d.ts

@@ -0,0 +1,21 @@
+import { TextareaHTMLAttributes, Ref } from 'react';
+import { BaseInputAsTextareaProps } from '../base-input';
+import { FieldBlockProps } from '../field-block';
+type HTMLTextareaProps = Pick<TextareaHTMLAttributes<HTMLTextAreaElement>, 'autoComplete' | 'autoFocus' | 'defaultValue' | 'disabled' | 'id' | 'name' | 'onBlur' | 'onChange' | 'onFocus' | 'onInput' | 'placeholder' | 'readOnly' | 'required' | 'rows' | 'value'>;
+export interface TextareaProps extends HTMLTextareaProps, FieldBlockProps {
+    /** Ref элемента textarea. */
+    textareaRef?: Ref<HTMLTextAreaElement>;
+    /** Свойства BaseInputProps. */
+    baseInputProps?: BaseInputAsTextareaProps;
+    /** Стили корневого элемента. */
+    style?: Required<FieldBlockProps>['rootProps']['style'];
+    /** CSS-класс корневого элемента. */
+    className?: Required<FieldBlockProps>['rootProps']['className'];
+}
+/**
+ * Текстовая область.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function Textarea({ textareaRef, baseInputProps, style, className, autoComplete, autoFocus, defaultValue, disabled, id, name, onBlur, onChange, onFocus, onInput, placeholder, readOnly, required, rows, value, label, failed, caption, blockProps, 'data-testid': testId, ...restProps }: TextareaProps): JSX.Element;
+export {};