@cloud-ru/ds-fields 1.0.0

package/dist/cjs/components/FieldSlider/styles.module.css

@@ -0,0 +1,44 @@
+.fieldSlider{
+  display:flex;
+  flex-direction:column;
+  gap:0;
+  align-self:stretch;
+  width:100%;
+}
+
+.sliderWrapper{
+  display:flex;
+  align-items:center;
+  width:100%;
+}
+[data-size=s] .sliderWrapper{
+  padding-right:var(--sn-field-anatomy-size-s-sliderWrapper-lineWrapper-paddingHorizontal, var(--sn-brand-anatomy-radius-field-s, var(--sn-primitive-dimension-2, 2px)));
+  padding-left:var(--sn-field-anatomy-size-s-sliderWrapper-lineWrapper-paddingHorizontal, var(--sn-brand-anatomy-radius-field-s, var(--sn-primitive-dimension-2, 2px)));
+}
+[data-size=m] .sliderWrapper{
+  padding-right:var(--sn-field-anatomy-size-m-sliderWrapper-lineWrapper-paddingHorizontal, var(--sn-brand-anatomy-radius-field-m, var(--sn-primitive-dimension-2, 2px)));
+  padding-left:var(--sn-field-anatomy-size-m-sliderWrapper-lineWrapper-paddingHorizontal, var(--sn-brand-anatomy-radius-field-m, var(--sn-primitive-dimension-2, 2px)));
+}
+[data-size=l] .sliderWrapper{
+  padding-right:var(--sn-field-anatomy-size-l-sliderWrapper-lineWrapper-paddingHorizontal, var(--sn-brand-anatomy-radius-field-l, var(--sn-primitive-dimension-2, 2px)));
+  padding-left:var(--sn-field-anatomy-size-l-sliderWrapper-lineWrapper-paddingHorizontal, var(--sn-brand-anatomy-radius-field-l, var(--sn-primitive-dimension-2, 2px)));
+}
+
+.slider{
+  width:100%;
+}
+
+.postfixIcon{
+  display:flex;
+  flex-shrink:0;
+  align-items:center;
+  justify-content:center;
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+}
+
+.copyButton{
+  display:flex;
+  flex-shrink:0;
+  align-items:center;
+  justify-content:center;
+}

package/dist/cjs/components/FieldSlider/types.d.ts

@@ -0,0 +1,4 @@
+/** Форматирование значения слайдера в строку текстового поля. */
+export type TextInputFormatter = (value: number) => string;
+/** Значение слайдера: число или диапазон `[min, max]` при `range`. */
+export type SliderValue = number | number[];

package/dist/cjs/components/FieldSlider/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/components/FieldSlider/utils/generateAllowedValues.d.ts

@@ -0,0 +1 @@
+export declare function generateAllowedValues(min: number, max: number, step: number | null): number[];

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

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateAllowedValues = generateAllowedValues;
+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/cjs/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/cjs/components/FieldSlider/utils/getClosestMark.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getClosestMark = getClosestMark;
+function getDiff(value, mark) {
+    return Math.abs(mark - value);
+}
+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/cjs/components/FieldSlider/utils/getMarkLabel.d.ts

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

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getMarkLabel = getMarkLabel;
+const isMarkObject_1 = require("./isMarkObject");
+function getMarkLabel(mark) {
+    return (0, isMarkObject_1.isMarkObject)(mark) ? mark.label : mark;
+}

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

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

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

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTextFieldValue = getTextFieldValue;
+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/cjs/components/FieldSlider/utils/index.d.ts

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

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

@@ -0,0 +1,21 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./generateAllowedValues"), exports);
+__exportStar(require("./getClosestMark"), exports);
+__exportStar(require("./getMarkLabel"), exports);
+__exportStar(require("./getTextFieldValue"), exports);
+__exportStar(require("./isMarkObject"), exports);

package/dist/cjs/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/cjs/components/FieldSlider/utils/isMarkObject.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isMarkObject = isMarkObject;
+function isMarkObject(mark) {
+    return Boolean(mark && typeof mark === 'object' && 'label' in mark);
+}

package/dist/cjs/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';
+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/cjs/components/FieldStepper/FieldStepper.js

@@ -0,0 +1,160 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldStepper = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const button_1 = require("@cloud-ru/ds-button");
+const divider_1 = require("@cloud-ru/ds-divider");
+const field_decorator_1 = require("@cloud-ru/ds-field-decorator");
+const system_1 = require("@cloud-ru/ds-icons/interface/system");
+const input_private_1 = require("@cloud-ru/ds-input-private");
+const tooltip_1 = require("@cloud-ru/ds-tooltip");
+const utils_1 = require("@cloud-ru/ds-utils");
+const classnames_1 = __importDefault(require("classnames"));
+const merge_refs_1 = __importDefault(require("merge-refs"));
+const react_1 = require("react");
+const constants_1 = require("../../constants");
+const hooks_1 = require("../../hooks");
+const shared_1 = require("../shared");
+const styles_module_scss_1 = __importDefault(require('../shared/styles.module.css'));
+const styles_module_scss_2 = __importDefault(require('./styles.module.css'));
+const utils_2 = require("./utils");
+exports.FieldStepper = (0, react_1.forwardRef)(function FieldStepper({ label = '', labelTooltip, caption, hint, error, validationState = field_decorator_1.VALIDATION_STATE.Default, showHintIcon, length, required, size = field_decorator_1.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 = (0, react_1.useRef)(null);
+    const copyButtonRef = (0, react_1.useRef)(null);
+    const [focusVisible, setFocusVisible] = (0, react_1.useState)(false);
+    const [hover, setHover] = (0, react_1.useState)(false);
+    const [clampTooltip, setClampTooltip] = (0, react_1.useState)(null);
+    const [copied, setCopied] = (0, react_1.useState)(false);
+    const clampTimerRef = (0, react_1.useRef)(undefined);
+    const copiedTimerRef = (0, react_1.useRef)(undefined);
+    const resolvedAutoFocus = (0, hooks_1.useAdaptiveAutoFocus)(autoFocus, layoutPresets);
+    (0, react_1.useEffect)(() => () => {
+        if (clampTimerRef.current) {
+            clearTimeout(clampTimerRef.current);
+        }
+        if (copiedTimerRef.current) {
+            clearTimeout(copiedTimerRef.current);
+        }
+    }, []);
+    // controlled/uncontrolled: внутреннее состояние при отсутствии `value`; событие в `onChange`
+    // (ручной ввод) пробрасываем сами, useValueControl передаёт только значение.
+    const [value = (0, utils_2.getDefaultValue)(min, max), setValue] = (0, utils_1.useValueControl)({ value: valueProp, defaultValue });
+    const effectiveValidationState = (0, react_1.useMemo)(() => (error ? field_decorator_1.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 = (0, react_1.useCallback)((next, event) => {
+        const resolved = allowMoreThanLimits ? next : (0, utils_2.clamp)(next, min, max);
+        setValue(resolved);
+        onChange?.(resolved, event);
+    }, [allowMoreThanLimits, max, min, onChange, setValue]);
+    const handleMinus = (0, react_1.useCallback)(() => {
+        emitValue((0, utils_2.applyStep)(value, -step));
+    }, [emitValue, step, value]);
+    const handlePlus = (0, react_1.useCallback)(() => {
+        emitValue((0, utils_2.applyStep)(value, step));
+    }, [emitValue, step, value]);
+    const handleInputChange = (0, react_1.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 = (0, react_1.useCallback)((message) => {
+        setClampTooltip(message);
+        if (clampTimerRef.current) {
+            clearTimeout(clampTimerRef.current);
+        }
+        clampTimerRef.current = setTimeout(() => setClampTooltip(null), 2000);
+    }, []);
+    const handleBlur = (0, react_1.useCallback)((event) => {
+        if (!allowMoreThanLimits) {
+            if (typeof max === 'number' && value > max) {
+                setValue(max);
+                onChange?.(max);
+                showClampTooltip((clampTooltipText?.max ?? utils_2.defaultClampMaxText)(max));
+            }
+            else if (typeof min === 'number' && value < min) {
+                setValue(min);
+                onChange?.(min);
+                showClampTooltip((clampTooltipText?.min ?? utils_2.defaultClampMinText)(min));
+            }
+        }
+        onBlur?.(event);
+    }, [allowMoreThanLimits, clampTooltipText, max, min, onBlur, onChange, setValue, showClampTooltip, value]);
+    const handleFocus = (0, react_1.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 = (0, react_1.useCallback)(() => {
+        if (!readOnly) {
+            setHover(true);
+        }
+    }, [readOnly]);
+    const handleMouseLeave = (0, react_1.useCallback)(() => {
+        setHover(false);
+    }, []);
+    const showCopyUi = Boolean(showCopyButton && readOnly && !disabled);
+    const handleCopy = (0, react_1.useCallback)((event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        (0, shared_1.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 = (0, react_1.useCallback)((event) => {
+        if (event.key === 'ArrowRight' && readOnly && showCopyUi && copyButtonRef.current) {
+            event.preventDefault();
+            copyButtonRef.current.focus();
+        }
+    }, [readOnly, showCopyUi]);
+    const handleCopyButtonKeyDown = (0, react_1.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 = ((0, jsx_runtime_1.jsx)(shared_1.FieldElementButton, { variant: isMinus ? shared_1.VARIANT.Before : shared_1.VARIANT.After, size: size, action: isMinus ? (0, jsx_runtime_1.jsx)(system_1.MinusSVG, {}) : (0, jsx_runtime_1.jsx)(system_1.PlusSVG, {}), onClick: isMinus ? handleMinus : handlePlus, disabled: isMinus ? isMinusDisabled : isPlusDisabled, tabIndex: -1, "data-test-id": isMinus ? constants_1.TEST_IDS.fieldStepperMinus : constants_1.TEST_IDS.fieldStepperPlus }));
+        return tooltip ? ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { ...tooltip, triggerClassName: styles_module_scss_2.default.stepButtonTrigger, children: button })) : (button);
+    };
+    const shell = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.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: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.backgroundWrapper, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.materialLayer, ...(0, shared_1.getAcrylicProps)({
+                            validationState: effectiveValidationState,
+                            disabled,
+                            readonly: readOnly,
+                            hover,
+                            focusVisible,
+                        }), children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.acrylicBg, "aria-hidden": true }) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.borderStateLayer, "data-state": 'borderOnBackground' }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.focusLayer })] }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.elementWrapperBefore, children: [renderStepButton('minus'), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.lineWrapper, "data-outline": background || undefined, children: (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical', variant: 'regular' }) })] }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.fieldContainer, children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.contentWrapper, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_2.default.valueArea, children: [prefix && (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_2.default.affix, children: prefix }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_2.default.inputWrapper, style: { '--field-stepper-input-ch': inputWidthCh }, children: (0, jsx_runtime_1.jsx)(input_private_1.InputPrivate, { ref: (0, merge_refs_1.default)(ref, localRef), className: (0, classnames_1.default)(styles_module_scss_1.default.fieldInput, styles_module_scss_2.default.input), value: String(value), type: input_private_1.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": constants_1.TEST_IDS.fieldStepperInput, ...(0, utils_1.extractSupportProps)(rest) }) }), postfix && (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_2.default.affix, children: postfix })] }) }) }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.elementWrapperAfter, children: [showCopyUi && ((0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_2.default.copyButton, children: (0, jsx_runtime_1.jsx)(button_1.Button, { innerRef: copyButtonRef, type: 'button', view: 'function', appearance: 'neutral', size: input_private_1.BUTTON_SIZE_MAP[size], icon: copied ? (0, jsx_runtime_1.jsx)(system_1.CheckSVG, {}) : (0, jsx_runtime_1.jsx)(system_1.CopySVG, {}), onClick: handleCopy, onKeyDown: handleCopyButtonKeyDown, tabIndex: -1, "data-test-id": constants_1.TEST_IDS.fieldStepperCopyButton }) })), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.lineWrapper, "data-outline": background || undefined, children: (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical', variant: 'regular' }) }), renderStepButton('plus')] })] }));
+    return ((0, jsx_runtime_1.jsx)(field_decorator_1.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 ? ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { tip: clampTooltip, open: true, "data-test-id": constants_1.TEST_IDS.fieldStepperLimitTooltip, children: shell })) : (shell) }));
+});

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

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

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

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./FieldStepper"), exports);

package/dist/cjs/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/cjs/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/cjs/components/FieldStepper/utils.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDefaultValue = getDefaultValue;
+exports.clamp = clamp;
+exports.applyStep = applyStep;
+exports.defaultClampMinText = defaultClampMinText;
+exports.defaultClampMaxText = defaultClampMaxText;
+/** Начальное значение для uncontrolled-режима: выводится из `min`/`max`, иначе `0`. */
+function getDefaultValue(min, max) {
+    if (typeof min === 'number' && min > 0) {
+        return min;
+    }
+    if (typeof max === 'number' && max < 0) {
+        return max;
+    }
+    return 0;
+}
+/** Зажимает значение в диапазон `[min, max]` (границы опциональны). */
+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 знаков). */
+function applyStep(value, step) {
+    const sum = value + step;
+    return Number(sum.toFixed(10));
+}
+/**
+ * Дефолтный текст тултипа клампа для нижней границы.
+ */
+function defaultClampMinText(value) {
+    return `Значение должно быть больше либо равно ${value}`;
+}
+/**
+ * Дефолтный текст тултипа клампа для верхней границы.
+ */
+function defaultClampMaxText(value) {
+    return `Значение должно быть меньше либо равно ${value}`;
+}

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

@@ -0,0 +1,11 @@
+import { FieldComboProps } from '../FieldCombo';
+/**
+ * Пропсы простого текстового поля. От `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/cjs/components/FieldText/FieldText.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldText = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const constants_1 = require("../../constants");
+const FieldCombo_1 = require("../FieldCombo");
+/**
+ * Текстовое поле: заголовок, подсказка, плейсхолдер, значение и кнопки очистки и копирования.
+ * Слоты вокруг строки ввода не поддерживает — для них есть `FieldCombo`.
+ */
+exports.FieldText = (0, react_1.forwardRef)(function FieldText(props, ref) {
+    return ((0, jsx_runtime_1.jsx)(FieldCombo_1.FieldCombo, { ...props, ref: ref, innerTestIds: { shell: constants_1.TEST_IDS.fieldTextShell, input: constants_1.TEST_IDS.fieldTextInput } }));
+});

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

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

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

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./FieldText"), exports);