@cloud-ru/ds-fields 1.0.0

package/dist/esm/components/FieldSlider/utils/generateAllowedValues.js

@@ -0,0 +1,13 @@
+export function generateAllowedValues(min, max, step) {
+    // step <= 0 (или null) дал бы бесконечный цикл — снэп к шкале невозможен, возвращаем только min.
+    if (step === null || step <= 0) {
+        return [min];
+    }
+    const values = [];
+    let current = min;
+    while (current <= max) {
+        values.push(parseFloat(current.toFixed(10)));
+        current += step;
+    }
+    return values;
+}

package/dist/esm/components/FieldSlider/utils/getClosestMark.d.ts

@@ -0,0 +1,4 @@
+export declare function getClosestMark<T>(value: number, marks: T[], getMarkValue: (value: T) => number): {
+    lowestDiff: number;
+    mark: T;
+} | undefined;

package/dist/esm/components/FieldSlider/utils/getClosestMark.js

@@ -0,0 +1,13 @@
+function getDiff(value, mark) {
+    return Math.abs(mark - value);
+}
+export function getClosestMark(value, marks, getMarkValue) {
+    if (marks.length === 0) {
+        return undefined;
+    }
+    const [first, ...others] = marks;
+    return others.reduce((acc, mark) => {
+        const diff = getDiff(value, getMarkValue(mark));
+        return diff < acc.lowestDiff ? { lowestDiff: diff, mark } : acc;
+    }, { lowestDiff: getDiff(value, getMarkValue(first)), mark: first });
+}

package/dist/esm/components/FieldSlider/utils/getMarkLabel.d.ts

@@ -0,0 +1,2 @@
+import { ReactNode } from 'react';
+export declare function getMarkLabel(mark: unknown): ReactNode;

package/dist/esm/components/FieldSlider/utils/getMarkLabel.js

@@ -0,0 +1,4 @@
+import { isMarkObject } from './isMarkObject.js';
+export function getMarkLabel(mark) {
+    return isMarkObject(mark) ? mark.label : mark;
+}

package/dist/esm/components/FieldSlider/utils/getTextFieldValue.d.ts

@@ -0,0 +1,2 @@
+import { SliderValue, TextInputFormatter } from '../types.js';
+export declare function getTextFieldValue(value: SliderValue, textInputFormatter?: TextInputFormatter): string;

package/dist/esm/components/FieldSlider/utils/getTextFieldValue.js

@@ -0,0 +1,6 @@
+export function getTextFieldValue(value, textInputFormatter) {
+    if (Array.isArray(value)) {
+        return value.map(v => (textInputFormatter ? textInputFormatter(v) : String(v))).join(' – ');
+    }
+    return textInputFormatter ? textInputFormatter(value) : String(value);
+}

package/dist/esm/components/FieldSlider/utils/index.d.ts

@@ -0,0 +1,5 @@
+export * from './generateAllowedValues.js';
+export * from './getClosestMark.js';
+export * from './getMarkLabel.js';
+export * from './getTextFieldValue.js';
+export * from './isMarkObject.js';

package/dist/esm/components/FieldSlider/utils/index.js

@@ -0,0 +1,5 @@
+export * from './generateAllowedValues.js';
+export * from './getClosestMark.js';
+export * from './getMarkLabel.js';
+export * from './getTextFieldValue.js';
+export * from './isMarkObject.js';

package/dist/esm/components/FieldSlider/utils/isMarkObject.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+type MarkObject = {
+    label: ReactNode;
+};
+export declare function isMarkObject(mark: unknown): mark is MarkObject;
+export {};

package/dist/esm/components/FieldSlider/utils/isMarkObject.js

@@ -0,0 +1,3 @@
+export function isMarkObject(mark) {
+    return Boolean(mark && typeof mark === 'object' && 'label' in mark);
+}

package/dist/esm/components/FieldStepper/FieldStepper.d.ts

@@ -0,0 +1,81 @@
+import { FieldDecoratorProps } from '@cloud-ru/ds-field-decorator';
+import { TooltipProps } from '@cloud-ru/ds-tooltip';
+import { ChangeEvent, FocusEvent, ReactNode } from 'react';
+import { FieldLayoutPresets } from '../../hooks/index.js';
+type FieldStepperDecoratorProps = Omit<FieldDecoratorProps, 'children'>;
+type FieldStepperOwnProps = {
+    /** CSS-класс корня `FieldDecorator` */
+    className?: string;
+    /** CSS-класс оболочки поля */
+    fieldClassName?: string;
+    /** Значение (controlled-режим) */
+    value?: number;
+    /** Начальное значение (uncontrolled-режим). По умолчанию выводится из `min`/`max`. */
+    defaultValue?: number;
+    /** Колбек смены значения. Второй аргумент — событие, если изменение пришло из ручного ввода. */
+    onChange?(value: number, event?: ChangeEvent<HTMLInputElement>): void;
+    /** Минимум */
+    min?: number;
+    /** Максимум */
+    max?: number;
+    /**
+     * Шаг приращения
+     * @default 1
+     */
+    step?: number;
+    /**
+     * Разрешить ввод значений вне `min`/`max`. Если `false`, на blur значение клампится.
+     * @default true
+     */
+    allowMoreThanLimits?: boolean;
+    /** Поле выключено */
+    disabled?: boolean;
+    /** Только для чтения */
+    readonly?: boolean;
+    /** HTML id */
+    id?: string;
+    /** HTML name */
+    name?: string;
+    /** Автофокус. На mobile выключается адаптивно (см. `layoutPresets`) */
+    autoFocus?: boolean;
+    /**
+     * Переопределение адаптивных дефолтов по раскладке. Участвует `autoFocus`: на mobile он выключен
+     * (открывает клавиатуру без действия). Вернуть на mobile — `layoutPresets={{ mobile: { autoFocus: true } }}`.
+     */
+    layoutPresets?: FieldLayoutPresets;
+    /**
+     * Фон поля (acrylic)
+     * @default true
+     */
+    background?: boolean;
+    /**
+     * Показывать кнопку копирования значения (видна в readonly, при `!disabled`).
+     * @default true
+     */
+    showCopyButton?: boolean;
+    /** Колбек после успешного копирования значения. */
+    onCopyButtonClick?(): void;
+    /** Префикс — текст или иконка слева от значения */
+    prefix?: ReactNode;
+    /** Постфикс — текст или иконка справа от значения (например, единица измерения) */
+    postfix?: ReactNode;
+    /** Тултип над кнопкой `+` */
+    plusButtonTooltip?: TooltipProps;
+    /** Тултип над кнопкой `−` */
+    minusButtonTooltip?: TooltipProps;
+    /**
+     * Тексты тултипа клампа (показывается на 2с после blur с выходом за `min`/`max`).
+     * @default { min: 'Значение должно быть больше либо равно {value}', max: 'Значение должно быть меньше либо равно {value}' }
+     */
+    clampTooltipText?: {
+        min?: (value: number) => string;
+        max?: (value: number) => string;
+    };
+    /** Колбек фокуса */
+    onFocus?(event: FocusEvent<HTMLInputElement>): void;
+    /** Колбек блюра */
+    onBlur?(event: FocusEvent<HTMLInputElement>): void;
+};
+export type FieldStepperProps = FieldStepperDecoratorProps & FieldStepperOwnProps;
+export declare const FieldStepper: import("react").ForwardRefExoticComponent<FieldStepperDecoratorProps & FieldStepperOwnProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/dist/esm/components/FieldStepper/FieldStepper.js

@@ -0,0 +1,154 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '@cloud-ru/ds-button';
+import { Divider } from '@cloud-ru/ds-divider';
+import { FieldDecorator, SIZE, VALIDATION_STATE } from '@cloud-ru/ds-field-decorator';
+import { CheckSVG, CopySVG, MinusSVG, PlusSVG } from '@cloud-ru/ds-icons/interface/system';
+import { BUTTON_SIZE_MAP, InputPrivate, TYPE } from '@cloud-ru/ds-input-private';
+import { Tooltip } from '@cloud-ru/ds-tooltip';
+import { extractSupportProps, useValueControl } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import mergeRefs from 'merge-refs';
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState, } from 'react';
+import { TEST_IDS } from '../../constants.js';
+import { useAdaptiveAutoFocus } from '../../hooks/index.js';
+import { copyTextToClipboard, FieldElementButton, getAcrylicProps, VARIANT } from '../shared/index.js';
+import fieldStyles from '../shared/styles.module.css';
+import styles from './styles.module.css';
+import { applyStep, clamp, defaultClampMaxText, defaultClampMinText, getDefaultValue } from './utils.js';
+export const FieldStepper = forwardRef(function FieldStepper({ label = '', labelTooltip, caption, hint, error, validationState = VALIDATION_STATE.Default, showHintIcon, length, required, size = SIZE.M, className, fieldClassName, background = true, showCopyButton = true, onCopyButtonClick, value: valueProp, defaultValue, onChange, min, max, step = 1, allowMoreThanLimits = true, disabled, readonly: readOnly, id, name, autoFocus, layoutPresets, prefix, postfix, plusButtonTooltip, minusButtonTooltip, clampTooltipText, onFocus, onBlur, 'data-test-id': dataTestId, ...rest }, ref) {
+    const localRef = useRef(null);
+    const copyButtonRef = useRef(null);
+    const [focusVisible, setFocusVisible] = useState(false);
+    const [hover, setHover] = useState(false);
+    const [clampTooltip, setClampTooltip] = useState(null);
+    const [copied, setCopied] = useState(false);
+    const clampTimerRef = useRef(undefined);
+    const copiedTimerRef = useRef(undefined);
+    const resolvedAutoFocus = useAdaptiveAutoFocus(autoFocus, layoutPresets);
+    useEffect(() => () => {
+        if (clampTimerRef.current) {
+            clearTimeout(clampTimerRef.current);
+        }
+        if (copiedTimerRef.current) {
+            clearTimeout(copiedTimerRef.current);
+        }
+    }, []);
+    // controlled/uncontrolled: внутреннее состояние при отсутствии `value`; событие в `onChange`
+    // (ручной ввод) пробрасываем сами, useValueControl передаёт только значение.
+    const [value = getDefaultValue(min, max), setValue] = useValueControl({ value: valueProp, defaultValue });
+    const effectiveValidationState = useMemo(() => (error ? VALIDATION_STATE.Error : validationState), [error, validationState]);
+    const isMinusDisabled = (typeof min === 'number' && value <= min) || disabled || readOnly;
+    const isPlusDisabled = (typeof max === 'number' && value >= max) || disabled || readOnly;
+    // Кнопки −/+ и ручной ввод приводятся к единой модели относительно `allowMoreThanLimits`:
+    // при `false` значение клампится сразу, при `true` остаётся как есть (кламп откладывается до blur).
+    const emitValue = useCallback((next, event) => {
+        const resolved = allowMoreThanLimits ? next : clamp(next, min, max);
+        setValue(resolved);
+        onChange?.(resolved, event);
+    }, [allowMoreThanLimits, max, min, onChange, setValue]);
+    const handleMinus = useCallback(() => {
+        emitValue(applyStep(value, -step));
+    }, [emitValue, step, value]);
+    const handlePlus = useCallback(() => {
+        emitValue(applyStep(value, step));
+    }, [emitValue, step, value]);
+    const handleInputChange = useCallback((raw, event) => {
+        if (raw === '' || raw === '-') {
+            return;
+        }
+        const parsed = Number(raw);
+        if (Number.isNaN(parsed)) {
+            return;
+        }
+        // Во время набора значение не клампим даже при allowMoreThanLimits=false —
+        // кламп откладывается до blur (паритет с легаси), там же показывается clampTooltip.
+        setValue(parsed);
+        onChange?.(parsed, event);
+    }, [onChange, setValue]);
+    const showClampTooltip = useCallback((message) => {
+        setClampTooltip(message);
+        if (clampTimerRef.current) {
+            clearTimeout(clampTimerRef.current);
+        }
+        clampTimerRef.current = setTimeout(() => setClampTooltip(null), 2000);
+    }, []);
+    const handleBlur = useCallback((event) => {
+        if (!allowMoreThanLimits) {
+            if (typeof max === 'number' && value > max) {
+                setValue(max);
+                onChange?.(max);
+                showClampTooltip((clampTooltipText?.max ?? defaultClampMaxText)(max));
+            }
+            else if (typeof min === 'number' && value < min) {
+                setValue(min);
+                onChange?.(min);
+                showClampTooltip((clampTooltipText?.min ?? defaultClampMinText)(min));
+            }
+        }
+        onBlur?.(event);
+    }, [allowMoreThanLimits, clampTooltipText, max, min, onBlur, onChange, setValue, showClampTooltip, value]);
+    const handleFocus = useCallback((event) => {
+        setFocusVisible(event.target.matches(':focus-visible'));
+        if (clampTimerRef.current) {
+            clearTimeout(clampTimerRef.current);
+        }
+        setClampTooltip(null);
+        onFocus?.(event);
+    }, [onFocus]);
+    // Ширина инпута по числу символов значения (минимум 2ch), задаётся через `ch`-юниты в CSS-переменной —
+    // без px-хардкода и подгонки под ширину глифа.
+    const inputWidthCh = Math.max(2, String(value).length);
+    const handleMouseEnter = useCallback(() => {
+        if (!readOnly) {
+            setHover(true);
+        }
+    }, [readOnly]);
+    const handleMouseLeave = useCallback(() => {
+        setHover(false);
+    }, []);
+    const showCopyUi = Boolean(showCopyButton && readOnly && !disabled);
+    const handleCopy = useCallback((event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        copyTextToClipboard(String(value)).then(copied => {
+            if (!copied) {
+                return;
+            }
+            onCopyButtonClick?.();
+            setCopied(true);
+            if (copiedTimerRef.current) {
+                clearTimeout(copiedTimerRef.current);
+            }
+            copiedTimerRef.current = setTimeout(() => setCopied(false), 2000);
+        });
+    }, [onCopyButtonClick, value]);
+    // Клавиатурный путь к copy в readonly (кнопка с tabIndex −1 недостижима по Tab): ArrowRight из
+    // инпута → copy, ArrowLeft с copy → назад. input type=number не даёт selection API — гейт только
+    // по readonly. Кнопки −/+ остаются вне пути (tabIndex −1, паритет с легаси ButtonFunction).
+    const handleInputKeyDown = useCallback((event) => {
+        if (event.key === 'ArrowRight' && readOnly && showCopyUi && copyButtonRef.current) {
+            event.preventDefault();
+            copyButtonRef.current.focus();
+        }
+    }, [readOnly, showCopyUi]);
+    const handleCopyButtonKeyDown = useCallback((event) => {
+        if (event.key === 'ArrowLeft') {
+            event.preventDefault();
+            localRef.current?.focus();
+        }
+    }, []);
+    const renderStepButton = (variant) => {
+        const isMinus = variant === 'minus';
+        const tooltip = isMinus ? minusButtonTooltip : plusButtonTooltip;
+        const button = (_jsx(FieldElementButton, { variant: isMinus ? VARIANT.Before : VARIANT.After, size: size, action: isMinus ? _jsx(MinusSVG, {}) : _jsx(PlusSVG, {}), onClick: isMinus ? handleMinus : handlePlus, disabled: isMinus ? isMinusDisabled : isPlusDisabled, tabIndex: -1, "data-test-id": isMinus ? TEST_IDS.fieldStepperMinus : TEST_IDS.fieldStepperPlus }));
+        return tooltip ? (_jsx(Tooltip, { ...tooltip, triggerClassName: styles.stepButtonTrigger, children: button })) : (button);
+    };
+    const shell = (_jsxs("div", { className: cn(fieldStyles.fieldWrapper, fieldClassName), "data-size": size, "data-validation-state": effectiveValidationState, "data-disabled": disabled || undefined, "data-readonly": readOnly || undefined, "data-withbackground": background || undefined, "data-focusvisible": focusVisible || undefined, "data-hover": !readOnly && hover ? true : undefined, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [_jsxs("div", { className: fieldStyles.backgroundWrapper, children: [_jsx("div", { className: fieldStyles.materialLayer, ...getAcrylicProps({
+                            validationState: effectiveValidationState,
+                            disabled,
+                            readonly: readOnly,
+                            hover,
+                            focusVisible,
+                        }), children: _jsx("div", { className: fieldStyles.acrylicBg, "aria-hidden": true }) }), _jsx("div", { className: fieldStyles.borderStateLayer, "data-state": 'borderOnBackground' }), _jsx("div", { className: fieldStyles.focusLayer })] }), _jsxs("div", { className: fieldStyles.elementWrapperBefore, children: [renderStepButton('minus'), _jsx("div", { className: fieldStyles.lineWrapper, "data-outline": background || undefined, children: _jsx(Divider, { orientation: 'vertical', variant: 'regular' }) })] }), _jsx("div", { className: fieldStyles.fieldContainer, children: _jsx("div", { className: fieldStyles.contentWrapper, children: _jsxs("div", { className: styles.valueArea, children: [prefix && _jsx("span", { className: styles.affix, children: prefix }), _jsx("div", { className: styles.inputWrapper, style: { '--field-stepper-input-ch': inputWidthCh }, children: _jsx(InputPrivate, { ref: mergeRefs(ref, localRef), className: cn(fieldStyles.fieldInput, styles.input), value: String(value), type: TYPE.Number, disabled: disabled, readonly: readOnly, onChange: handleInputChange, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleInputKeyDown, id: id, name: name, min: min, max: max, step: step, autoFocus: resolvedAutoFocus, "data-test-id": TEST_IDS.fieldStepperInput, ...extractSupportProps(rest) }) }), postfix && _jsx("span", { className: styles.affix, children: postfix })] }) }) }), _jsxs("div", { className: fieldStyles.elementWrapperAfter, children: [showCopyUi && (_jsx("span", { className: styles.copyButton, children: _jsx(Button, { innerRef: copyButtonRef, type: 'button', view: 'function', appearance: 'neutral', size: BUTTON_SIZE_MAP[size], icon: copied ? _jsx(CheckSVG, {}) : _jsx(CopySVG, {}), onClick: handleCopy, onKeyDown: handleCopyButtonKeyDown, tabIndex: -1, "data-test-id": TEST_IDS.fieldStepperCopyButton }) })), _jsx("div", { className: fieldStyles.lineWrapper, "data-outline": background || undefined, children: _jsx(Divider, { orientation: 'vertical', variant: 'regular' }) }), renderStepButton('plus')] })] }));
+    return (_jsx(FieldDecorator, { className: className, label: label, labelTooltip: labelTooltip, caption: caption, hint: hint, error: error, validationState: effectiveValidationState, showHintIcon: showHintIcon, length: length, required: required, labelFor: id, disabled: disabled, readonly: readOnly, size: size, "data-test-id": dataTestId, children: clampTooltip ? (_jsx(Tooltip, { tip: clampTooltip, open: true, "data-test-id": TEST_IDS.fieldStepperLimitTooltip, children: shell })) : (shell) }));
+});

package/dist/esm/components/FieldStepper/index.d.ts

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

package/dist/esm/components/FieldStepper/index.js

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

package/dist/esm/components/FieldStepper/styles.module.css

@@ -0,0 +1,78 @@
+.stepButtonTrigger{
+  display:flex;
+  align-items:stretch;
+  height:100%;
+}
+
+.copyButton{
+  display:flex;
+  align-items:center;
+  height:100%;
+}
+
+.valueArea{
+  display:flex;
+  flex:1 1 auto;
+  align-items:baseline;
+  justify-content:center;
+  min-width:0;
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+  text-align:center;
+}
+[data-size=s] .valueArea{
+  gap:var(--sn-field-anatomy-size-s-fieldContainer-contentWrapper-inputLine-gap, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px)));
+}
+[data-size=m] .valueArea{
+  gap:var(--sn-field-anatomy-size-s-fieldContainer-contentWrapper-inputLine-gap, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px)));
+}
+[data-size=l] .valueArea{
+  gap:var(--sn-field-anatomy-size-l-fieldContainer-contentWrapper-inputLine-gap, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-primitive-dimension-12, 12px)));
+}
+
+.inputWrapper{
+  display:flex;
+  flex:0 0 auto;
+  width:calc((var(--field-stepper-input-ch, 2) + 1) * 1ch);
+  max-width:100%;
+}
+
+.input{
+  flex:0 0 auto;
+  width:100%;
+  min-width:1ch;
+  text-align:center;
+  -moz-appearance:textfield;
+}
+.input::-webkit-outer-spin-button, .input::-webkit-inner-spin-button{
+  margin:0;
+  -webkit-appearance:none;
+}
+
+.affix{
+  flex-shrink:0;
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+}
+[data-size=s] .affix{
+  font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-s, var(--sn-brand-font-fontWeight-light-regular-body-s, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
+  font-size:var(--sn-regular-body-s-fontSize, var(--sn-density-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
+  letter-spacing:var(--sn-regular-body-s-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
+}
+[data-size=m] .affix{
+  font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-m, var(--sn-brand-font-fontWeight-light-regular-body-m, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
+  font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
+  letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
+}
+[data-size=l] .affix{
+  font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-l, var(--sn-brand-font-fontWeight-light-regular-body-l, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-l-lineHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
+  font-size:var(--sn-regular-body-l-fontSize, var(--sn-density-typography-roleBody-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
+  letter-spacing:var(--sn-regular-body-l-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize16, 8px));
+}

package/dist/esm/components/FieldStepper/utils.d.ts

@@ -0,0 +1,14 @@
+/** Начальное значение для uncontrolled-режима: выводится из `min`/`max`, иначе `0`. */
+export declare function getDefaultValue(min?: number, max?: number): number;
+/** Зажимает значение в диапазон `[min, max]` (границы опциональны). */
+export declare function clamp(value: number, min?: number, max?: number): number;
+/** Приращение значения на `step` с компенсацией погрешности float (округление до 10 знаков). */
+export declare function applyStep(value: number, step: number): number;
+/**
+ * Дефолтный текст тултипа клампа для нижней границы.
+ */
+export declare function defaultClampMinText(value: number): string;
+/**
+ * Дефолтный текст тултипа клампа для верхней границы.
+ */
+export declare function defaultClampMaxText(value: number): string;

package/dist/esm/components/FieldStepper/utils.js

@@ -0,0 +1,38 @@
+/** Начальное значение для uncontrolled-режима: выводится из `min`/`max`, иначе `0`. */
+export function getDefaultValue(min, max) {
+    if (typeof min === 'number' && min > 0) {
+        return min;
+    }
+    if (typeof max === 'number' && max < 0) {
+        return max;
+    }
+    return 0;
+}
+/** Зажимает значение в диапазон `[min, max]` (границы опциональны). */
+export function clamp(value, min, max) {
+    let next = value;
+    if (typeof min === 'number') {
+        next = Math.max(next, min);
+    }
+    if (typeof max === 'number') {
+        next = Math.min(next, max);
+    }
+    return next;
+}
+/** Приращение значения на `step` с компенсацией погрешности float (округление до 10 знаков). */
+export function applyStep(value, step) {
+    const sum = value + step;
+    return Number(sum.toFixed(10));
+}
+/**
+ * Дефолтный текст тултипа клампа для нижней границы.
+ */
+export function defaultClampMinText(value) {
+    return `Значение должно быть больше либо равно ${value}`;
+}
+/**
+ * Дефолтный текст тултипа клампа для верхней границы.
+ */
+export function defaultClampMaxText(value) {
+    return `Значение должно быть меньше либо равно ${value}`;
+}

package/dist/esm/components/FieldText/FieldText.d.ts

@@ -0,0 +1,11 @@
+import { FieldComboProps } from '../FieldCombo/index.js';
+/**
+ * Пропсы простого текстового поля. От `FieldCombo` отличается отсутствием слотов:
+ * префикса, постфикса, иконок и кнопок-сегментов. Нужен слот — берите `FieldCombo`.
+ */
+export type FieldTextProps = Omit<FieldComboProps, 'prefix' | 'postfix' | 'iconBefore' | 'iconAfter' | 'prefixIcon' | 'elementBefore' | 'elementAfter' | 'innerTestIds'>;
+/**
+ * Текстовое поле: заголовок, подсказка, плейсхолдер, значение и кнопки очистки и копирования.
+ * Слоты вокруг строки ввода не поддерживает — для них есть `FieldCombo`.
+ */
+export declare const FieldText: import("react").ForwardRefExoticComponent<Omit<FieldTextProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/esm/components/FieldText/FieldText.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { TEST_IDS } from '../../constants.js';
+import { FieldCombo } from '../FieldCombo/index.js';
+/**
+ * Текстовое поле: заголовок, подсказка, плейсхолдер, значение и кнопки очистки и копирования.
+ * Слоты вокруг строки ввода не поддерживает — для них есть `FieldCombo`.
+ */
+export const FieldText = forwardRef(function FieldText(props, ref) {
+    return (_jsx(FieldCombo, { ...props, ref: ref, innerTestIds: { shell: TEST_IDS.fieldTextShell, input: TEST_IDS.fieldTextInput } }));
+});

package/dist/esm/components/FieldText/index.d.ts

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

package/dist/esm/components/FieldText/index.js

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

package/dist/esm/components/FieldTextArea/FieldTextArea.d.ts

@@ -0,0 +1,95 @@
+import { FieldDecoratorProps } from '@cloud-ru/ds-field-decorator';
+import { ChangeEvent, FocusEvent, HTMLAttributes, KeyboardEvent, ReactNode } from 'react';
+import { FieldLayoutPresets } from '../../hooks/index.js';
+type FieldTextAreaDecoratorProps = Omit<FieldDecoratorProps, 'children'>;
+type FieldTextAreaOwnProps = {
+    /** CSS-класс корня `FieldDecorator` */
+    className?: string;
+    /** CSS-класс оболочки поля */
+    fieldClassName?: string;
+    /** Значение (controlled-режим) */
+    value?: string;
+    /** Начальное значение (uncontrolled-режим) */
+    defaultValue?: string;
+    /** Колбек смены значения */
+    onChange?(value: string, event?: ChangeEvent<HTMLTextAreaElement>): void;
+    /** Плейсхолдер */
+    placeholder?: string;
+    /** HTML id */
+    id?: string;
+    /** HTML name */
+    name?: string;
+    /** Максимальное количество символов */
+    maxLength?: number;
+    /** Поле выключено */
+    disabled?: boolean;
+    /** Только для чтения */
+    readonly?: boolean;
+    /** Автофокус. На mobile выключается адаптивно (см. `layoutPresets`) */
+    autoFocus?: boolean;
+    /**
+     * Переопределение адаптивных дефолтов по раскладке. Участвует `autoFocus`: на mobile он выключен
+     * (открывает клавиатуру без действия). Вернуть на mobile — `layoutPresets={{ mobile: { autoFocus: true } }}`.
+     */
+    layoutPresets?: FieldLayoutPresets;
+    /** Режим виртуальной клавиатуры (`inputmode` нативного `<textarea>`) */
+    inputMode?: HTMLAttributes<HTMLTextAreaElement>['inputMode'];
+    /** Проверка орфографии */
+    spellCheck?: boolean;
+    /**
+     * Минимальное количество строк
+     * @default 3
+     */
+    minRows?: number;
+    /**
+     * Максимальное количество строк (после — появляется скролл)
+     * @default 1000
+     */
+    maxRows?: number;
+    /**
+     * Разрешить ввод свыше `maxLength` символов (счётчик продолжит расти).
+     * @default true
+     */
+    allowMoreThanMaxLength?: boolean;
+    /**
+     * Нода над textarea — ряд элементов до контента (Figma `elementWrapperBefore` /
+     * `slotBeforeContent`): тулбар с кнопками, чипами и т.п.
+     */
+    header?: ReactNode;
+    /**
+     * Нода под textarea — ряд элементов после контента (Figma `elementWrapperAfter` /
+     * `slotAfterContent`): действия, счётчик-плагин и т.п.
+     */
+    footer?: ReactNode;
+    /**
+     * Можно ли менять высоту мышкой за нижний угол. Игнорируется при `disabled` или `readonly`.
+     * @default false
+     */
+    resizable?: boolean;
+    /**
+     * Фон поля (acrylic)
+     * @default true
+     */
+    background?: boolean;
+    /**
+     * Кнопка очистки (видна при value && !readonly)
+     * @default true
+     */
+    showClearButton?: boolean;
+    /**
+     * Кнопка копирования (видна при value && !disabled, независимо от readonly)
+     * @default true
+     */
+    showCopyButton?: boolean;
+    /** Колбек после копирования */
+    onCopyButtonClick?(): void;
+    /** Колбек фокуса */
+    onFocus?(event: FocusEvent<HTMLTextAreaElement>): void;
+    /** Колбек блюра */
+    onBlur?(event: FocusEvent<HTMLTextAreaElement>): void;
+    /** Колбек нажатия клавиши */
+    onKeyDown?(event: KeyboardEvent<HTMLTextAreaElement>): void;
+};
+export type FieldTextAreaProps = FieldTextAreaDecoratorProps & FieldTextAreaOwnProps;
+export declare const FieldTextArea: import("react").ForwardRefExoticComponent<FieldTextAreaDecoratorProps & FieldTextAreaOwnProps & import("react").RefAttributes<HTMLTextAreaElement>>;
+export {};