@cloud-ru/ds-fields 1.0.0

package/dist/cjs/components/shared/utils.d.ts

@@ -0,0 +1,69 @@
+import { Size, ValidationState } from '@cloud-ru/ds-field-decorator';
+import { ButtonSize, Size as InputPrivateSize } from '@cloud-ru/ds-input-private';
+import { MouseEvent } from 'react';
+/**
+ * Копирует текст в буфер обмена (через `copyToClipboard` из `@cloud-ru/ds-utils`). Резолвится в `true`
+ * при успехе — поля используют это, чтобы показать индикатор «скопировано».
+ */
+export declare function copyTextToClipboard(text: string): Promise<boolean>;
+/**
+ * Курсор в начале строки ввода (нет выделения, обе границы на позиции 0). Используется
+ * полями (`FieldCombo`, `FieldSecure`) для перевода ArrowLeft в левый слот, когда дальше
+ * влево по тексту двигаться некуда.
+ */
+export declare const isCursorAtStart: (el: HTMLInputElement | null) => boolean;
+/**
+ * Курсор в конце строки ввода (нет выделения, обе границы на длине значения). Используется
+ * полями для перевода ArrowRight в правый слот, когда дальше вправо по тексту двигаться некуда.
+ */
+export declare const isCursorAtEnd: (el: HTMLInputElement | null) => boolean;
+type AcrylicLevel = 'default' | '1Level' | '2Level';
+type AcrylicAppearance = 'neutral' | 'red' | 'yellow' | 'green';
+type AcrylicParams = {
+    validationState?: ValidationState;
+    disabled?: boolean;
+    readonly?: boolean;
+    hover?: boolean;
+    focusVisible?: boolean;
+};
+/**
+ * Appearance acrylic-фона поля. Тонируется по состоянию валидации (Figma: error→red,
+ * warning→yellow, success→green; valid/default — нейтральный фон). На неактивном поле
+ * (disabled/readonly) тонировка снимается — фон нейтральный.
+ */
+export declare function getAcrylicAppearance({ validationState, disabled, readonly }: AcrylicParams): AcrylicAppearance;
+/**
+ * Уровень acrylic-фона поля. `default` для disabled/readonly и для покоя тонированных
+ * (error/warning/success) состояний (red/green/yellow background по Figma); `2Level` на
+ * hover/focus; `1Level` для нейтрального поля в покое.
+ */
+export declare function getAcrylicLevel({ validationState, disabled, readonly, hover, focusVisible, }: AcrylicParams): AcrylicLevel;
+/**
+ * data-* атрибуты acrylic-материала поля (appearance + level) одним объектом для spread
+ * на materialLayer — единый источник тонировки фона по валидации для всех полей shell.
+ */
+export declare function getAcrylicProps(params: AcrylicParams): {
+    'data-acrylic-appearance': AcrylicAppearance;
+    'data-acrylic-level': AcrylicLevel;
+};
+/**
+ * Гасит mousedown на слот-обёртке функциональной кнопки (clear/copy): фокус остаётся в input.
+ * Статический обработчик, общий для полей со слотами (`FieldDate`, `FieldSelect`).
+ */
+export declare const preventSlotMouseDown: (event: MouseEvent<HTMLSpanElement>) => void;
+/**
+ * Гасит click на слот-обёртке: не доходит до триггера, чтобы клик по кнопке не
+ * тогглил dropdown/calendar. Общий статический обработчик для полей со слотами.
+ */
+export declare const stopSlotClickPropagation: (event: MouseEvent<HTMLSpanElement>) => void;
+/**
+ * Размер поля → размер `InputPrivate`. Оси `'s' | 'm' | 'l'` совпадают, маппинг тождественный —
+ * хелпер убирает инлайн-касты `size as InputPrivateSize` из реализаций полей.
+ */
+export declare function toInputSize(size?: Size): InputPrivateSize;
+/**
+ * Размер поля → размер кнопки-слота. У кнопок нет `l`, поэтому `l` сводится к `m`
+ * через `BUTTON_SIZE_MAP` (паритет с input-private), а не приводится небезопасным кастом.
+ */
+export declare function toButtonSize(size?: Size): ButtonSize;
+export {};

package/dist/cjs/components/shared/utils.js

@@ -0,0 +1,104 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.stopSlotClickPropagation = exports.preventSlotMouseDown = exports.isCursorAtEnd = exports.isCursorAtStart = void 0;
+exports.copyTextToClipboard = copyTextToClipboard;
+exports.getAcrylicAppearance = getAcrylicAppearance;
+exports.getAcrylicLevel = getAcrylicLevel;
+exports.getAcrylicProps = getAcrylicProps;
+exports.toInputSize = toInputSize;
+exports.toButtonSize = toButtonSize;
+const field_decorator_1 = require("@cloud-ru/ds-field-decorator");
+const input_private_1 = require("@cloud-ru/ds-input-private");
+const utils_1 = require("@cloud-ru/ds-utils");
+/**
+ * Копирует текст в буфер обмена (через `copyToClipboard` из `@cloud-ru/ds-utils`). Резолвится в `true`
+ * при успехе — поля используют это, чтобы показать индикатор «скопировано».
+ */
+function copyTextToClipboard(text) {
+    if (!(0, utils_1.isBrowser)() || text.length === 0) {
+        return Promise.resolve(false);
+    }
+    return (0, utils_1.copyToClipboard)(text);
+}
+/**
+ * Курсор в начале строки ввода (нет выделения, обе границы на позиции 0). Используется
+ * полями (`FieldCombo`, `FieldSecure`) для перевода ArrowLeft в левый слот, когда дальше
+ * влево по тексту двигаться некуда.
+ */
+const isCursorAtStart = (el) => Boolean(el && el.selectionStart === 0 && el.selectionEnd === 0);
+exports.isCursorAtStart = isCursorAtStart;
+/**
+ * Курсор в конце строки ввода (нет выделения, обе границы на длине значения). Используется
+ * полями для перевода ArrowRight в правый слот, когда дальше вправо по тексту двигаться некуда.
+ */
+const isCursorAtEnd = (el) => Boolean(el && el.selectionStart === el.value.length && el.selectionEnd === el.value.length);
+exports.isCursorAtEnd = isCursorAtEnd;
+const VALIDATION_ACRYLIC_APPEARANCE = {
+    [field_decorator_1.VALIDATION_STATE.Error]: 'red',
+    [field_decorator_1.VALIDATION_STATE.Warning]: 'yellow',
+    [field_decorator_1.VALIDATION_STATE.Success]: 'green',
+};
+function isColoredValidation(validationState) {
+    return Boolean(validationState && VALIDATION_ACRYLIC_APPEARANCE[validationState]);
+}
+/**
+ * Appearance acrylic-фона поля. Тонируется по состоянию валидации (Figma: error→red,
+ * warning→yellow, success→green; valid/default — нейтральный фон). На неактивном поле
+ * (disabled/readonly) тонировка снимается — фон нейтральный.
+ */
+function getAcrylicAppearance({ validationState, disabled, readonly }) {
+    if (disabled || readonly) {
+        return 'neutral';
+    }
+    return (validationState && VALIDATION_ACRYLIC_APPEARANCE[validationState]) || 'neutral';
+}
+/**
+ * Уровень acrylic-фона поля. `default` для disabled/readonly и для покоя тонированных
+ * (error/warning/success) состояний (red/green/yellow background по Figma); `2Level` на
+ * hover/focus; `1Level` для нейтрального поля в покое.
+ */
+function getAcrylicLevel({ validationState, disabled, readonly, hover, focusVisible, }) {
+    if (disabled || readonly) {
+        return 'default';
+    }
+    if (hover || focusVisible) {
+        return '2Level';
+    }
+    return isColoredValidation(validationState) ? 'default' : '1Level';
+}
+/**
+ * data-* атрибуты acrylic-материала поля (appearance + level) одним объектом для spread
+ * на materialLayer — единый источник тонировки фона по валидации для всех полей shell.
+ */
+function getAcrylicProps(params) {
+    return {
+        'data-acrylic-appearance': getAcrylicAppearance(params),
+        'data-acrylic-level': getAcrylicLevel(params),
+    };
+}
+/**
+ * Гасит mousedown на слот-обёртке функциональной кнопки (clear/copy): фокус остаётся в input.
+ * Статический обработчик, общий для полей со слотами (`FieldDate`, `FieldSelect`).
+ */
+const preventSlotMouseDown = (event) => event.preventDefault();
+exports.preventSlotMouseDown = preventSlotMouseDown;
+/**
+ * Гасит click на слот-обёртке: не доходит до триггера, чтобы клик по кнопке не
+ * тогглил dropdown/calendar. Общий статический обработчик для полей со слотами.
+ */
+const stopSlotClickPropagation = (event) => event.stopPropagation();
+exports.stopSlotClickPropagation = stopSlotClickPropagation;
+/**
+ * Размер поля → размер `InputPrivate`. Оси `'s' | 'm' | 'l'` совпадают, маппинг тождественный —
+ * хелпер убирает инлайн-касты `size as InputPrivateSize` из реализаций полей.
+ */
+function toInputSize(size = field_decorator_1.SIZE.M) {
+    return size;
+}
+/**
+ * Размер поля → размер кнопки-слота. У кнопок нет `l`, поэтому `l` сводится к `m`
+ * через `BUTTON_SIZE_MAP` (паритет с input-private), а не приводится небезопасным кастом.
+ */
+function toButtonSize(size = field_decorator_1.SIZE.M) {
+    return input_private_1.BUTTON_SIZE_MAP[size];
+}

package/dist/cjs/constants.d.ts

@@ -0,0 +1,61 @@
+export declare const TEST_IDS: {
+    readonly fieldDecorator: "field-decorator";
+    readonly fieldDecoratorLabel: "field-decorator__label";
+    readonly fieldDecoratorRequired: "field-decorator__required-sign";
+    readonly fieldDecoratorLabelTooltip: "field-decorator__label-tooltip";
+    readonly fieldDecoratorCaption: "field-decorator__caption";
+    readonly fieldDecoratorHint: "field-decorator__hint";
+    readonly fieldDecoratorCounter: "field-decorator__counter";
+    readonly fieldCombo: "field-combo";
+    readonly fieldComboInput: "field-combo__input";
+    readonly fieldComboElementButton: "field-combo__element-button";
+    readonly fieldComboShell: "field-combo__shell";
+    readonly fieldText: "field-text";
+    readonly fieldTextInput: "field-text__input";
+    readonly fieldTextShell: "field-text__shell";
+    readonly fieldTextCopyButton: "button-copy-value";
+    readonly fieldSecure: "field-secure";
+    readonly fieldSecureInput: "field-secure__input";
+    readonly fieldSecureHideButton: "button-toggle-hidden";
+    readonly fieldSecureShell: "field-secure__shell";
+    readonly fieldSecureSkeleton: "field-secure__skeleton";
+    readonly fieldTextArea: "field-textarea";
+    readonly fieldTextAreaInput: "field-textarea__input";
+    readonly fieldTextAreaScrollArea: "field-textarea__scroll-area";
+    readonly fieldTextAreaShell: "field-textarea__shell";
+    readonly fieldStepper: "field-stepper";
+    readonly fieldStepperInput: "field-stepper__input";
+    readonly fieldStepperMinus: "field-stepper__minus-button";
+    readonly fieldStepperPlus: "field-stepper__plus-button";
+    readonly fieldStepperCopyButton: "field-stepper__copy-button";
+    readonly fieldStepperLimitTooltip: "field-stepper__limit-tooltip";
+    readonly fieldSlider: "field-slider";
+    readonly fieldSliderInput: "field-slider__input";
+    readonly fieldSliderCopyButton: "field-slider__copy-button";
+    readonly fieldSliderHandle: "field-slider__slider";
+    readonly fieldSliderField: "field-slider__field";
+    readonly fieldSelect: "field-select";
+    readonly fieldSelectChips: "field-select__chips";
+    readonly fieldSelectInput: "field-select__input";
+    readonly fieldSelectClear: "field-select__clear";
+    readonly fieldSelectCopy: "field-select__copy";
+    readonly fieldDate: "field-date";
+    readonly fieldDateInput: "field-date__input";
+    readonly fieldDateInputFrom: "field-date__input-from";
+    readonly fieldDateInputTo: "field-date__input-to";
+    readonly fieldDateClear: "field-date__clear";
+    readonly fieldDateCopy: "field-date__copy";
+    readonly fieldDateCalendar: "field-date__calendar";
+    readonly fieldDateCalendarDropdown: "field-date__calendar-dropdown";
+    readonly fieldColor: "field-color";
+    readonly fieldColorInput: "field-color__input";
+    readonly fieldColorSwatch: "field-color__swatch";
+    readonly fieldColorChevron: "field-color__chevron";
+    readonly fieldColorPicker: "field-color__picker";
+    readonly fieldColorSheetTitle: "field-color__sheet-title";
+    readonly fieldColorCancel: "field-color__cancel";
+    readonly fieldColorApply: "field-color__apply";
+    readonly fieldTime: "field-time";
+    readonly fieldTimeInput: "field-time__input";
+    readonly fieldTimeIcon: "field-time__icon";
+};

package/dist/cjs/constants.js

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TEST_IDS = void 0;
+exports.TEST_IDS = {
+    fieldDecorator: 'field-decorator',
+    fieldDecoratorLabel: 'field-decorator__label',
+    fieldDecoratorRequired: 'field-decorator__required-sign',
+    fieldDecoratorLabelTooltip: 'field-decorator__label-tooltip',
+    fieldDecoratorCaption: 'field-decorator__caption',
+    fieldDecoratorHint: 'field-decorator__hint',
+    fieldDecoratorCounter: 'field-decorator__counter',
+    fieldCombo: 'field-combo',
+    fieldComboInput: 'field-combo__input',
+    fieldComboElementButton: 'field-combo__element-button',
+    // Внутренняя оболочка (`fieldWrapper`): несёт effectiveValidationState (error форсит 'error'),
+    // тогда как корень с публичным data-test-id хранит RAW `validationState`.
+    fieldComboShell: 'field-combo__shell',
+    fieldText: 'field-text',
+    fieldTextInput: 'field-text__input',
+    fieldTextShell: 'field-text__shell',
+    // Кнопка копирования общая для всех полей (дефолт `useCopyButton`).
+    fieldTextCopyButton: 'button-copy-value',
+    fieldSecure: 'field-secure',
+    fieldSecureInput: 'field-secure__input',
+    fieldSecureHideButton: 'button-toggle-hidden',
+    fieldSecureShell: 'field-secure__shell',
+    // Skeleton, заменяющий input во время async-загрузки значения (asyncValueGetter).
+    fieldSecureSkeleton: 'field-secure__skeleton',
+    fieldTextArea: 'field-textarea',
+    fieldTextAreaInput: 'field-textarea__input',
+    fieldTextAreaScrollArea: 'field-textarea__scroll-area',
+    fieldTextAreaShell: 'field-textarea__shell',
+    fieldStepper: 'field-stepper',
+    fieldStepperInput: 'field-stepper__input',
+    fieldStepperMinus: 'field-stepper__minus-button',
+    fieldStepperPlus: 'field-stepper__plus-button',
+    fieldStepperCopyButton: 'field-stepper__copy-button',
+    fieldStepperLimitTooltip: 'field-stepper__limit-tooltip',
+    fieldSlider: 'field-slider',
+    fieldSliderInput: 'field-slider__input',
+    fieldSliderCopyButton: 'field-slider__copy-button',
+    fieldSliderHandle: 'field-slider__slider',
+    // Внутренняя оболочка слайдера: на ней живут data-validation-state / disabled / readonly /
+    // withbackground / focusvisible (корень с data-test-id их не несёт).
+    fieldSliderField: 'field-slider__field',
+    fieldSelect: 'field-select',
+    fieldSelectChips: 'field-select__chips',
+    fieldSelectInput: 'field-select__input',
+    fieldSelectClear: 'field-select__clear',
+    fieldSelectCopy: 'field-select__copy',
+    fieldDate: 'field-date',
+    fieldDateInput: 'field-date__input',
+    fieldDateInputFrom: 'field-date__input-from',
+    fieldDateInputTo: 'field-date__input-to',
+    fieldDateClear: 'field-date__clear',
+    fieldDateCopy: 'field-date__copy',
+    fieldDateCalendar: 'field-date__calendar',
+    // CalendarDropdown (@cloud-ru/ds-calendar) тегирует контент открытого календаря только когда ему передан
+    // `data-test-id` (его билдер строит контент-узел как `content-<id>`). FieldDate проставляет этот id,
+    // чтобы портальный календарь был адресуем в e2e/visual; реальный узел контента — `content-field-date__calendar-dropdown`.
+    fieldDateCalendarDropdown: 'field-date__calendar-dropdown',
+    fieldColor: 'field-color',
+    fieldColorInput: 'field-color__input',
+    fieldColorSwatch: 'field-color__swatch',
+    fieldColorChevron: 'field-color__chevron',
+    // ColorPicker (@cloud-ru/ds-color-picker) тегирует свой корень только переданным data-test-id
+    // (root рендерит `{...extractSupportProps(rest)}`). FieldColor проставляет этот id, чтобы
+    // открытая палитра была адресуема в play/e2e.
+    fieldColorPicker: 'field-color__picker',
+    fieldColorSheetTitle: 'field-color__sheet-title',
+    fieldColorCancel: 'field-color__cancel',
+    fieldColorApply: 'field-color__apply',
+    fieldTime: 'field-time',
+    fieldTimeInput: 'field-time__input',
+    fieldTimeIcon: 'field-time__icon',
+};

package/dist/cjs/hooks/index.d.ts

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

package/dist/cjs/hooks/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("./useAdaptiveAutoFocus"), exports);

package/dist/cjs/hooks/useAdaptiveAutoFocus.d.ts

@@ -0,0 +1,7 @@
+import { LayoutPresets } from '@cloud-ru/ds-adaptive';
+/** Пресеты адаптивных дефолтов поля по раскладке (сейчас — только `autoFocus`). */
+export type FieldLayoutPresets = LayoutPresets<{
+    autoFocus: boolean;
+}>;
+/** Резолвит `autoFocus` по раскладке: desktop — проп, mobile — выключен; переопределяемо через `layoutPresets`. */
+export declare function useAdaptiveAutoFocus(autoFocus?: boolean, layoutPresets?: FieldLayoutPresets): boolean;

package/dist/cjs/hooks/useAdaptiveAutoFocus.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAdaptiveAutoFocus = useAdaptiveAutoFocus;
+const adaptive_1 = require("@cloud-ru/ds-adaptive");
+// На mobile autoFocus выключен — иначе открывает экранную клавиатуру без действия пользователя.
+const DS_AUTOFOCUS_PRESET = { mobile: { autoFocus: false } };
+/** Резолвит `autoFocus` по раскладке: desktop — проп, mobile — выключен; переопределяемо через `layoutPresets`. */
+function useAdaptiveAutoFocus(autoFocus = false, layoutPresets) {
+    return (0, adaptive_1.useLayoutDefaults)({ autoFocus: false }, (0, adaptive_1.mergePresets)(DS_AUTOFOCUS_PRESET, layoutPresets), { autoFocus }).autoFocus;
+}

package/dist/cjs/index.d.ts

@@ -0,0 +1,3 @@
+export * from './components';
+export * from './constants';
+export * from './hooks';

package/dist/cjs/index.js

@@ -0,0 +1,19 @@
+"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("./components"), exports);
+__exportStar(require("./constants"), exports);
+__exportStar(require("./hooks"), exports);

package/dist/cjs/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "commonjs"
+}

package/dist/cjs/segments/index.d.ts

@@ -0,0 +1,2 @@
+export * from './segments';
+export * from './useSegmentedMask';

package/dist/cjs/segments/index.js

@@ -0,0 +1,18 @@
+"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("./segments"), exports);
+__exportStar(require("./useSegmentedMask"), exports);

package/dist/cjs/segments/segments.d.ts

@@ -0,0 +1,22 @@
+export type SegmentKey = 'day' | 'month' | 'year' | 'hours' | 'minutes' | 'seconds';
+/** Описание одного сегмента маски: его границы в строке + допустимые значения + плейсхолдер. */
+export type SlotMeta = {
+    key: SegmentKey;
+    /** Индекс начала сегмента в строке маски (включительно). */
+    start: number;
+    /** Индекс конца сегмента в строке маски (исключительно). */
+    end: number;
+    min: number;
+    max: number;
+    /** Текст-плейсхолдер сегмента (`ДД`, `чч`, …), длина = `end - start`. */
+    placeholder: string;
+};
+export type SegmentsMode = 'date' | 'date-time' | 'time';
+/**
+ * Строит строку-маску и список сегментов с их границами/границами значений для заданного режима.
+ * Границы (`start`/`end`) считаются по позиции плейсхолдера сегмента в собранной маске.
+ */
+export declare function buildSegments(mode: SegmentsMode, showSeconds?: boolean): {
+    mask: string;
+    slots: SlotMeta[];
+};

package/dist/cjs/segments/segments.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildSegments = buildSegments;
+const DATE_DEFS = [
+    { key: 'day', len: 2, min: 1, max: 31, placeholder: 'ДД', separator: '' },
+    { key: 'month', len: 2, min: 1, max: 12, placeholder: 'ММ', separator: '.' },
+    { key: 'year', len: 4, min: 1, max: 9999, placeholder: 'ГГГГ', separator: '.' },
+];
+// Дату и время разделяет запятой (легаси `ДД.ММ.ГГГГ, чч:мм:сс`).
+const DATE_TIME_SEPARATOR = ', ';
+function timeDefs(showSeconds, firstSeparator) {
+    const defs = [
+        { key: 'hours', len: 2, min: 0, max: 23, placeholder: 'чч', separator: firstSeparator },
+        { key: 'minutes', len: 2, min: 0, max: 59, placeholder: 'мм', separator: ':' },
+    ];
+    if (showSeconds) {
+        defs.push({ key: 'seconds', len: 2, min: 0, max: 59, placeholder: 'сс', separator: ':' });
+    }
+    return defs;
+}
+function defsForMode(mode, showSeconds) {
+    if (mode === 'date') {
+        return DATE_DEFS;
+    }
+    if (mode === 'time') {
+        return timeDefs(showSeconds, '');
+    }
+    return [...DATE_DEFS, ...timeDefs(showSeconds, DATE_TIME_SEPARATOR)];
+}
+/**
+ * Строит строку-маску и список сегментов с их границами/границами значений для заданного режима.
+ * Границы (`start`/`end`) считаются по позиции плейсхолдера сегмента в собранной маске.
+ */
+function buildSegments(mode, showSeconds = true) {
+    const defs = defsForMode(mode, showSeconds);
+    let mask = '';
+    const slots = [];
+    for (const def of defs) {
+        mask += def.separator;
+        const start = mask.length;
+        mask += def.placeholder;
+        const end = mask.length;
+        slots.push({ key: def.key, start, end, min: def.min, max: def.max, placeholder: def.placeholder });
+    }
+    return { mask, slots };
+}

package/dist/cjs/segments/useSegmentedMask.d.ts

@@ -0,0 +1,43 @@
+import { ClipboardEvent, KeyboardEvent, MouseEvent, RefObject } from 'react';
+import { SlotMeta } from './segments';
+type UseSegmentedMaskParams = {
+    inputRef: RefObject<HTMLInputElement | null>;
+    /** Полная строка-маска (плейсхолдеры всех сегментов + разделители). */
+    mask: string;
+    /** Сегменты в порядке следования. */
+    slots: SlotMeta[];
+    readonly?: boolean;
+    disabled?: boolean;
+    /**
+     * Записать новое значение в контролируемый input. InputPrivate — controlled, поэтому после
+     * императивной правки DOM (`input.value = …`) синхронизируем React-state тем же значением:
+     * `value === DOM` → React не перезаписывает input и сохраняет `setSelectionRange` (подсветку сегмента).
+     */
+    setValue(masked: string): void;
+    /** Текущее значение маски после правки — для парсинга в `Date`/`TimeValue` (пустая строка, если не заполнено). */
+    onMaskedChange(masked: string): void;
+    /** ArrowDown — открыть пикер / передать фокус в него. */
+    onArrowDown?(): void;
+    /** ArrowUp — закрыть пикер, если он открыт. */
+    onArrowUp?(): void;
+    /** Escape — закрыть пикер. */
+    onEscape?(): void;
+    /** Любая правка ввода (паритет с легаси — закрывает пикер). */
+    onEdit?(): void;
+};
+/**
+ * Сегментный ввод даты/времени (порт `useDateField` из @snack-uikit/fields). Каретка ходит по
+ * сегментам (`setSelectionRange` подсвечивает текущий), цифры заполняют сегмент с авто-переходом,
+ * стрелки двигают по сегментам, Backspace очищает сегмент до плейсхолдера.
+ */
+export declare function useSegmentedMask({ inputRef, mask, slots, readonly, disabled, setValue, onMaskedChange, onArrowDown, onArrowUp, onEscape, onEdit, }: UseSegmentedMaskParams): {
+    handleKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
+    handleClick: (event: MouseEvent<HTMLInputElement>) => void;
+    handleFocus: () => void;
+    handleBlur: () => void;
+    handlePaste: (event: ClipboardEvent<HTMLInputElement>) => void;
+    selectSlot: (slot: SlotMeta) => void;
+    firstSlot: SlotMeta;
+    lastSlot: SlotMeta;
+};
+export {};