@cloud-ru/uikit-product-fields-predefined 2.4.7 → 2.4.8-preview-f8642e85.0

package/README.md

@@ -351,6 +351,31 @@
 | onChange | `(value: string, mask: InputMask<Record<string, unknown>>) => void` | - |  |
 | ref | `LegacyRef<HTMLInputElement>` | - | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} |
 | key | `Key` | - |  |
+## FieldCode
+### Props
+| name | type | default value | description |
+|------|------|---------------|-------------|
+| codeLength* | `number` | - | Количество цифр в коде |
+| className | `string` | - | CSS-класс компонента |
+| cellClassName | `string` | - | CSS-класс ячейки кода |
+| spacing | `number[]` | - | Позиции, после которых нужно вставить пробел (индексы символов, после которых будет пробел) |
+| showEmptyChars | `boolean` | - | Подсветить пустые символы кода |
+| resendCode | `ResendCodeProps` | - | Компонент отправки нового кода |
+| focusEffects | `readonly FieldCodeFocusEffect[]` | - | Сценарии автофокуса; по умолчанию — первая ячейка при монтировании и после сброса (см. `FieldCodeFocusEffect`) |
+| value | `string` | - | Значение кода |
+| onChange | `(code: string) => void` | - | Колбек изменения значения |
+| onComplete | `(code: string) => void` | - | Колбек достижения ввода всех символов кода |
+| disabled | `boolean` | - | Деактивирован ли элемент Является ли поле деактивированным |
+| label | `string` | - | Лейбл |
+| size | enum Size: `"s"`, `"m"`, `"l"` | - | Размер |
+| error | `string` | - |  |
+| ref | `LegacyRef<HTMLInputElement>` | - | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} |
+| key | `Key` | - |  |
+## FieldCodeFocusEffect
+Когда дергать `moveFocus` у `FieldCode` (массив `focusEffects`, порядок не важен).
+### Props
+| name | type | default value | description |
+|------|------|---------------|-------------|
 
 
 [//]: DOCUMENTATION_SECTION_END

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

@@ -0,0 +1,42 @@
+import { FieldDecoratorProps } from '@snack-uikit/fields';
+import { type ResendCodeProps } from './components';
+import { type FieldCodeFocusEffect } from './constants';
+import { UseCodeInputParams } from './hooks';
+export type FieldCodeRef = {
+    /** Перенести фокус на ячейку с индексом `index` */
+    moveFocus: (index: number) => void;
+    /** Убрать фокус со всех ячеек кода */
+    blurFields: () => void;
+    /** Сбросить значение кода */
+    resetCode: () => void;
+};
+export type FieldCodeProps = {
+    /** CSS-класс компонента */
+    className?: string;
+    /** CSS-класс ячейки кода */
+    cellClassName?: string;
+    /** Позиции, после которых нужно вставить пробел (индексы символов, после которых будет пробел) */
+    spacing?: number[];
+    /** Подсветить пустые символы кода */
+    showEmptyChars?: boolean;
+    /** Компонент отправки нового кода */
+    resendCode?: ResendCodeProps;
+    /** Сценарии автофокуса; по умолчанию — первая ячейка при монтировании и после сброса (см. `FieldCodeFocusEffect`) */
+    focusEffects?: readonly FieldCodeFocusEffect[];
+} & Omit<UseCodeInputParams, 'moveFocus'> & Pick<FieldDecoratorProps, 'size' | 'disabled' | 'label' | 'error'>;
+export declare const FieldCode: import("react").ForwardRefExoticComponent<{
+    /** CSS-класс компонента */
+    className?: string;
+    /** CSS-класс ячейки кода */
+    cellClassName?: string;
+    /** Позиции, после которых нужно вставить пробел (индексы символов, после которых будет пробел) */
+    spacing?: number[];
+    /** Подсветить пустые символы кода */
+    showEmptyChars?: boolean;
+    /** Компонент отправки нового кода */
+    resendCode?: ResendCodeProps;
+    /** Сценарии автофокуса; по умолчанию — первая ячейка при монтировании и после сброса (см. `FieldCodeFocusEffect`) */
+    focusEffects?: readonly FieldCodeFocusEffect[];
+} & Omit<UseCodeInputParams, "moveFocus"> & Pick<FieldDecoratorProps, "size" | "label" | "error" | "disabled"> & import("react").RefAttributes<FieldCodeRef>>;
+export type { FieldCodeFocusEffect } from './constants';
+export { FIELD_CODE_DEFAULT_FOCUS_EFFECTS } from './constants';

package/dist/cjs/components/FieldCode/FieldCode.js

@@ -0,0 +1,47 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FIELD_CODE_DEFAULT_FOCUS_EFFECTS = exports.FieldCode = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const fields_1 = require("@snack-uikit/fields");
+const components_1 = require("./components");
+const constants_1 = require("./constants");
+const hooks_1 = require("./hooks");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+const utils_1 = require("./utils");
+exports.FieldCode = (0, react_1.forwardRef)(function FieldCode(props, ref) {
+    var _a;
+    const { codeLength, className, cellClassName, value, onChange, spacing, onComplete, size, disabled, label, error, showEmptyChars, resendCode, focusEffects = constants_1.FIELD_CODE_DEFAULT_FOCUS_EFFECTS, } = props;
+    const { inputsRef, moveFocus, blurFields } = (0, hooks_1.useFocusCell)(codeLength);
+    const { code, cellHandlers, onChangeCode } = (0, hooks_1.useCodeInput)({ value, onChange, codeLength, moveFocus, onComplete });
+    const { resetCode } = (0, hooks_1.useFieldHelpers)({
+        onChangeCode,
+        focusEffects,
+        moveFocus,
+        showEmptyChars,
+        code,
+        codeLength,
+    });
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        moveFocus,
+        blurFields,
+        resetCode,
+    }), [moveFocus, blurFields, resetCode]);
+    const resolvedDecoratorProps = {
+        label,
+        disabled,
+        size,
+        error,
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.fieldCode, className), children: [(0, jsx_runtime_1.jsx)(fields_1.FieldDecorator, Object.assign({}, resolvedDecoratorProps, { children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.codeContainer, "data-size": size, children: code.map((char, index) => ((0, jsx_runtime_1.jsx)(components_1.Cell, { ref: inputRef => {
+                            if (inputRef) {
+                                inputsRef.current[index] = inputRef;
+                            }
+                        }, className: (0, classnames_1.default)((spacing === null || spacing === void 0 ? void 0 : spacing.includes(index)) && styles_module_scss_1.default.cellSpacing, cellClassName), size: size, value: char, disabled: disabled, autoComplete: index === 0 ? 'one-time-code' : undefined, onKeyDown: e => cellHandlers.onKeyDown(e, index), onPaste: cellHandlers.onPaste, onChange: e => cellHandlers.onChange(e, index), validationState: (0, utils_1.getCellValidationState)(char, showEmptyChars, Boolean(error)) }, index))) }) })), resendCode ? (0, jsx_runtime_1.jsx)(components_1.ResendCode, Object.assign({}, resendCode, { size: (_a = resendCode.size) !== null && _a !== void 0 ? _a : size })) : null] }));
+});
+var constants_2 = require("./constants");
+Object.defineProperty(exports, "FIELD_CODE_DEFAULT_FOCUS_EFFECTS", { enumerable: true, get: function () { return constants_2.FIELD_CODE_DEFAULT_FOCUS_EFFECTS; } });

package/dist/cjs/components/FieldCode/components/Cell/Cell.d.ts

@@ -0,0 +1,5 @@
+import { FieldTextProps } from '@snack-uikit/fields';
+export declare const Cell: import("react").ForwardRefExoticComponent<{
+    /** CSS-класс ячейки кода */
+    className?: string;
+} & Pick<FieldTextProps, "size" | "onPaste" | "onChange" | "onKeyDown" | "value" | "disabled" | "autoComplete" | "validationState"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/cjs/components/FieldCode/components/Cell/Cell.js

@@ -0,0 +1,27 @@
+"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.Cell = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const fields_1 = require("@snack-uikit/fields");
+const constants_1 = require("../../constants");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+exports.Cell = (0, react_1.forwardRef)((props, ref) => {
+    const { className, size, value } = props, fieldCellProps = __rest(props, ["className", "size", "value"]);
+    return ((0, jsx_runtime_1.jsx)(fields_1.FieldText, Object.assign({ inputMode: 'numeric', ref: ref, className: (0, classnames_1.default)(styles_module_scss_1.default.cell, className), "data-size": size, showClearButton: false, value: value === constants_1.ZERO_WIDTH_SPACE ? '' : value, size: size }, fieldCellProps)));
+});

package/dist/cjs/components/FieldCode/components/Cell/index.d.ts

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

package/dist/cjs/components/FieldCode/components/Cell/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("./Cell"), exports);

package/dist/cjs/components/FieldCode/components/Cell/styles.module.css

@@ -0,0 +1,3 @@
+.cell input{
+  text-align:center;
+}

package/dist/cjs/components/FieldCode/components/ResendCode/ResendCode.d.ts

@@ -0,0 +1,8 @@
+import { ButtonFunctionProps } from '@snack-uikit/button';
+export type ResendCodeProps = {
+    /** Колбек отправки нового кода */
+    onResend: () => void;
+    /** Количество секунд до следующего отправления кода */
+    secondsToNextResend: number;
+} & Pick<ButtonFunctionProps, 'size' | 'disabled'>;
+export declare function ResendCode(props: ResendCodeProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/FieldCode/components/ResendCode/ResendCode.js

@@ -0,0 +1,28 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ResendCode = ResendCode;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const uikit_product_icons_1 = require("@cloud-ru/uikit-product-icons");
+const uikit_product_locale_1 = require("@cloud-ru/uikit-product-locale");
+const button_1 = require("@snack-uikit/button");
+const utils_1 = require("./utils");
+function ResendCode(props) {
+    const { onResend, secondsToNextResend } = props, buttonProps = __rest(props, ["onResend", "secondsToNextResend"]);
+    const { t } = (0, uikit_product_locale_1.useLocale)('FieldsPredefined');
+    return ((0, jsx_runtime_1.jsx)(button_1.ButtonFunction, Object.assign({ label: secondsToNextResend > 0
+            ? t('FieldCode.resendCodeButtons.resendCodeWithVia', {
+                timer: (0, utils_1.formatSecondsAsMmSs)(secondsToNextResend),
+            })
+            : t('FieldCode.resendCodeButtons.resendCode'), onClick: onResend, icon: (0, jsx_runtime_1.jsx)(uikit_product_icons_1.UpdateSVG, {}), iconPosition: 'before' }, buttonProps)));
+}

package/dist/cjs/components/FieldCode/components/ResendCode/index.d.ts

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

package/dist/cjs/components/FieldCode/components/ResendCode/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("./ResendCode"), exports);

package/dist/cjs/components/FieldCode/components/ResendCode/utils.d.ts

@@ -0,0 +1 @@
+export declare function formatSecondsAsMmSs(totalSeconds: number): string;

package/dist/cjs/components/FieldCode/components/ResendCode/utils.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatSecondsAsMmSs = formatSecondsAsMmSs;
+function formatSecondsAsMmSs(totalSeconds) {
+    const minutes = Math.floor(totalSeconds / 60);
+    const seconds = totalSeconds % 60;
+    return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
+}

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

@@ -0,0 +1,2 @@
+export * from './Cell';
+export * from './ResendCode';

package/dist/cjs/components/FieldCode/components/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("./Cell"), exports);
+__exportStar(require("./ResendCode"), exports);

package/dist/cjs/components/FieldCode/constants.d.ts

@@ -0,0 +1,14 @@
+export declare const ZERO_WIDTH_SPACE = "\u200B";
+/**
+ * Когда дергать `moveFocus` у `FieldCode` (массив `focusEffects`, порядок не важен).
+ * @see {@link FIELD_CODE_DEFAULT_FOCUS_EFFECTS}
+ */
+export type FieldCodeFocusEffect = 
+/** После монтирования — ячейка `0`. */
+'firstCellOnMount'
+/** После `ref.resetCode()` — ячейка `0`. */
+ | 'firstCellOnReset'
+/** При включении `showEmptyChars` — первая пустая (все заполнены — последняя); не на каждый ввод. */
+ | 'firstCellWhenShowEmptyChars';
+/** Дефолтный набор для `focusEffects`. */
+export declare const FIELD_CODE_DEFAULT_FOCUS_EFFECTS: readonly FieldCodeFocusEffect[];

package/dist/cjs/components/FieldCode/constants.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FIELD_CODE_DEFAULT_FOCUS_EFFECTS = exports.ZERO_WIDTH_SPACE = void 0;
+exports.ZERO_WIDTH_SPACE = '\u200B';
+/** Дефолтный набор для `focusEffects`. */
+exports.FIELD_CODE_DEFAULT_FOCUS_EFFECTS = [
+    'firstCellOnMount',
+    'firstCellOnReset',
+    'firstCellWhenShowEmptyChars',
+];

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

@@ -0,0 +1,3 @@
+export * from './useCodeInput';
+export * from './useFocusCell';
+export * from './useFieldHelpers';

package/dist/cjs/components/FieldCode/hooks/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("./useCodeInput"), exports);
+__exportStar(require("./useFocusCell"), exports);
+__exportStar(require("./useFieldHelpers"), exports);

package/dist/cjs/components/FieldCode/hooks/useCodeInput.d.ts

@@ -0,0 +1,22 @@
+import { ClipboardEvent, KeyboardEvent } from 'react';
+export type UseCodeInputParams = {
+    /** Количество цифр в коде */
+    codeLength: number;
+    /** Значение кода */
+    value?: string;
+    /** Колбек изменения значения */
+    onChange?: (code: string) => void;
+    /** Функция фокуса */
+    moveFocus: (index: number) => void;
+    /** Колбек достижения ввода всех символов кода */
+    onComplete?: (code: string) => void;
+};
+export declare function useCodeInput(params: UseCodeInputParams): {
+    code: string[];
+    cellHandlers: {
+        onKeyDown: (e: KeyboardEvent<HTMLInputElement>, index: number) => void;
+        onPaste: (e: ClipboardEvent<HTMLInputElement>) => void;
+        onChange: (code: string, index: number) => void;
+    };
+    onChangeCode: (value: any, ...args: any[]) => any | void;
+};

package/dist/cjs/components/FieldCode/hooks/useCodeInput.js

@@ -0,0 +1,98 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCodeInput = useCodeInput;
+const reactuse_1 = require("@siberiacancode/reactuse");
+const react_1 = require("react");
+const utils_1 = require("@snack-uikit/utils");
+const constants_1 = require("../constants");
+const utils_2 = require("../utils");
+const buildCodeArray = (str, codeLength) => Array.from({ length: codeLength }, (_, idx) => str[idx] || constants_1.ZERO_WIDTH_SPACE);
+function useCodeInput(params) {
+    const { value: valueProp, onChange: onChangeProp, codeLength, moveFocus, onComplete } = params;
+    const [value = '', onChange] = (0, utils_1.useValueControl)({
+        value: valueProp,
+        onChange: onChangeProp,
+        defaultValue: '',
+    });
+    const codeRef = (0, reactuse_1.useRefState)(buildCodeArray(value, codeLength));
+    const updateCodeByIndex = (0, react_1.useCallback)((index, newChar) => {
+        codeRef.current[index] = newChar;
+        onChange === null || onChange === void 0 ? void 0 : onChange(codeRef.current.join(''));
+    }, [codeRef, onChange]);
+    const updateFullCode = (0, react_1.useCallback)((newCode) => {
+        codeRef.current = newCode.split('');
+        onChange === null || onChange === void 0 ? void 0 : onChange(newCode);
+        moveFocus(codeLength - 1);
+        onComplete === null || onComplete === void 0 ? void 0 : onComplete(newCode);
+    }, [codeLength, codeRef, moveFocus, onChange, onComplete]);
+    const handleAfterCellUpdate = (0, react_1.useCallback)((index) => {
+        const normalizedCode = codeRef.current.join('');
+        const isLastInput = index === codeLength - 1;
+        const isAllInputsFilled = (0, utils_2.isStringCodeLength)(normalizedCode, codeLength);
+        if (!isLastInput) {
+            moveFocus(index + 1);
+        }
+        else if (isAllInputsFilled) {
+            onComplete === null || onComplete === void 0 ? void 0 : onComplete(normalizedCode);
+        }
+    }, [codeLength, codeRef, moveFocus, onComplete]);
+    const deleteChar = (0, react_1.useCallback)((index) => {
+        if (codeRef.current[index] && !(0, utils_2.isZeroWidthSpace)(codeRef.current[index])) {
+            updateCodeByIndex(index, constants_1.ZERO_WIDTH_SPACE);
+        }
+        else if (index > 0) {
+            moveFocus(index - 1);
+        }
+    }, [codeRef, moveFocus, updateCodeByIndex]);
+    const onAutoCompleteInput = (0, react_1.useCallback)((code, index) => {
+        if ((0, utils_2.isStringCodeLength)(code, codeLength)) {
+            updateFullCode(code);
+            return;
+        }
+        if (!(0, utils_2.isNumberChar)(code)) {
+            return;
+        }
+        updateCodeByIndex(index, code);
+        handleAfterCellUpdate(index);
+    }, [codeLength, handleAfterCellUpdate, updateCodeByIndex, updateFullCode]);
+    const onKeyDown = (0, react_1.useCallback)((e, index) => {
+        switch (e.key) {
+            case 'ArrowLeft':
+                moveFocus(index - 1);
+                break;
+            case 'ArrowRight':
+                moveFocus(index + 1);
+                break;
+            case 'Backspace':
+                deleteChar(index);
+                break;
+            default:
+                if ((0, utils_2.isNumberChar)(e.key)) {
+                    e.preventDefault();
+                    updateCodeByIndex(index, e.key);
+                    handleAfterCellUpdate(index);
+                }
+                break;
+        }
+    }, [deleteChar, handleAfterCellUpdate, moveFocus, updateCodeByIndex]);
+    const onPaste = (0, react_1.useCallback)((e) => {
+        var _a;
+        const codeInput = (_a = e === null || e === void 0 ? void 0 : e.clipboardData.getData('text')) !== null && _a !== void 0 ? _a : '';
+        if (!(0, utils_2.isStringCodeLength)(codeInput, codeLength)) {
+            return;
+        }
+        updateFullCode(codeInput);
+    }, [codeLength, updateFullCode]);
+    (0, react_1.useEffect)(() => {
+        codeRef.current = buildCodeArray(value, codeLength);
+    }, [codeLength, codeRef, value]);
+    return {
+        code: codeRef.current,
+        cellHandlers: {
+            onKeyDown,
+            onPaste,
+            onChange: onAutoCompleteInput,
+        },
+        onChangeCode: onChange,
+    };
+}

package/dist/cjs/components/FieldCode/hooks/useFieldHelpers.d.ts

@@ -0,0 +1,13 @@
+import { type FieldCodeFocusEffect } from '../constants';
+type UseFieldHelpersParams = {
+    onChangeCode: (code: string) => void;
+    moveFocus: (index: number) => void;
+    focusEffects: readonly FieldCodeFocusEffect[];
+    showEmptyChars?: boolean;
+    code: readonly string[];
+    codeLength: number;
+};
+export declare function useFieldHelpers(params: UseFieldHelpersParams): {
+    resetCode: () => void;
+};
+export {};

package/dist/cjs/components/FieldCode/hooks/useFieldHelpers.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFieldHelpers = useFieldHelpers;
+const react_1 = require("react");
+const utils_1 = require("../utils");
+function useFieldHelpers(params) {
+    const { onChangeCode, moveFocus, focusEffects: focusEffectsProp, showEmptyChars, code, codeLength } = params;
+    const focusEffectsKey = [...focusEffectsProp].sort().join(',');
+    const focusEffects = (0, react_1.useMemo)(() => [...focusEffectsProp], 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [focusEffectsKey]);
+    const resetCode = (0, react_1.useCallback)(() => {
+        onChangeCode('');
+        if (focusEffects.includes('firstCellOnReset')) {
+            moveFocus(0);
+        }
+    }, [focusEffects, moveFocus, onChangeCode]);
+    (0, react_1.useEffect)(() => {
+        if (focusEffects.includes('firstCellOnMount')) {
+            moveFocus(0);
+        }
+    }, [focusEffects, moveFocus]);
+    (0, react_1.useEffect)(() => {
+        if (!focusEffects.includes('firstCellWhenShowEmptyChars') || !showEmptyChars) {
+            return;
+        }
+        const emptyIndex = (0, utils_1.getFirstEmptyCellIndex)(code);
+        if (emptyIndex >= 0) {
+            moveFocus(emptyIndex);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [showEmptyChars, focusEffects, moveFocus, codeLength]);
+    return { resetCode };
+}

package/dist/cjs/components/FieldCode/hooks/useFocusCell.d.ts

@@ -0,0 +1,5 @@
+export declare function useFocusCell(codeLength: number): {
+    inputsRef: import("react").MutableRefObject<HTMLInputElement[]>;
+    moveFocus: (newIndex: number) => void;
+    blurFields: () => void;
+};

package/dist/cjs/components/FieldCode/hooks/useFocusCell.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFocusCell = useFocusCell;
+const react_1 = require("react");
+function useFocusCell(codeLength) {
+    const inputsRef = (0, react_1.useRef)([]);
+    const focusInput = (0, react_1.useCallback)((index) => {
+        var _a;
+        (_a = inputsRef.current[index]) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [inputsRef]);
+    const moveFocus = (0, react_1.useCallback)((newIndex) => {
+        if (newIndex >= 0 && newIndex < codeLength) {
+            focusInput(newIndex);
+        }
+    }, [codeLength, focusInput]);
+    const blurFields = (0, react_1.useCallback)(() => {
+        inputsRef.current.forEach(input => {
+            input === null || input === void 0 ? void 0 : input.blur();
+        });
+    }, [inputsRef]);
+    return { inputsRef, moveFocus, blurFields };
+}

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

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

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

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

@@ -0,0 +1,30 @@
+.fieldCode{
+  display:flex;
+  flex-direction:column;
+  align-items:center;
+  gap:8px;
+}
+
+.codeContainer{
+  display:flex;
+  justify-content:center;
+}
+.codeContainer[data-size=s]{
+  gap:8px;
+}
+.codeContainer[data-size=m]{
+  gap:8px;
+}
+.codeContainer[data-size=l]{
+  gap:12px;
+}
+
+.cellSpacing[data-size=s]{
+  margin-right:2px;
+}
+.cellSpacing[data-size=m]{
+  margin-right:8px;
+}
+.cellSpacing[data-size=l]{
+  margin-right:12px;
+}

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

@@ -0,0 +1,6 @@
+import { FieldTextProps } from '@snack-uikit/fields';
+export declare const isNumberChar: (char: string) => boolean;
+export declare const isStringCodeLength: (input: string, codeLength: number) => boolean;
+export declare const isZeroWidthSpace: (value: string) => value is "​";
+export declare function getFirstEmptyCellIndex(code: readonly string[]): number;
+export declare const getCellValidationState: (value: string, showEmptyChars?: boolean, error?: boolean) => FieldTextProps["validationState"];

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

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCellValidationState = exports.isZeroWidthSpace = exports.isStringCodeLength = exports.isNumberChar = void 0;
+exports.getFirstEmptyCellIndex = getFirstEmptyCellIndex;
+const constants_1 = require("./constants");
+const isNumberChar = (char) => /^\d$/.test(char);
+exports.isNumberChar = isNumberChar;
+const isStringCodeLength = (input, codeLength) => new RegExp(`^\\d{${codeLength}}$`).test(input);
+exports.isStringCodeLength = isStringCodeLength;
+const isZeroWidthSpace = (value) => value === constants_1.ZERO_WIDTH_SPACE;
+exports.isZeroWidthSpace = isZeroWidthSpace;
+function getFirstEmptyCellIndex(code) {
+    return code.findIndex(exports.isZeroWidthSpace);
+}
+const getCellValidationState = (value, showEmptyChars, error) => {
+    if (showEmptyChars) {
+        return (0, exports.isZeroWidthSpace)(value) ? 'error' : 'default';
+    }
+    return error ? 'error' : 'default';
+};
+exports.getCellValidationState = getCellValidationState;

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

@@ -6,3 +6,4 @@ export * from './AIDisclaimer';
 export * from './FieldName';
 export * from './FieldDescription';
 export * from './FieldMask';
+export * from './FieldCode';

package/dist/cjs/components/index.js

@@ -22,3 +22,4 @@ __exportStar(require("./AIDisclaimer"), exports);
 __exportStar(require("./FieldName"), exports);
 __exportStar(require("./FieldDescription"), exports);
 __exportStar(require("./FieldMask"), exports);
+__exportStar(require("./FieldCode"), exports);