@hh.ru/magritte-ui-pincode-input 1.0.1

package/PincodeInput.d.ts

@@ -0,0 +1,25 @@
+import { type FocusEventHandler } from 'react';
+export type PincodeInputSize = 'medium' | 'large';
+export interface PincodeInputProps {
+    /**
+     * Количество цифр в пин-коде, если не указано будет выбрано автоматически
+     * в зависимости от размера инпута ( medium - 6, large - 4)
+     */
+    digitsCount?: number | null;
+    /** Размер инпута */
+    size?: PincodeInputSize;
+    /** Обработчик изменений */
+    onChange?: (value: string) => void;
+    /** Обработчик фокуса */
+    onFocus?: FocusEventHandler<HTMLInputElement>;
+    /** Обработчик потери фокуса */
+    onBlur?: FocusEventHandler<HTMLInputElement>;
+    /** Флаг наличия ошибки */
+    invalid?: boolean;
+    /** Текст описания */
+    description?: string;
+    /** Текст сообщения об ошибке */
+    errorMessage?: string;
+    'data-qa'?: string;
+}
+export declare const PincodeInput: import("react").ForwardRefExoticComponent<PincodeInputProps & import("react").RefAttributes<HTMLDivElement>>;

package/PincodeInput.js

@@ -0,0 +1,164 @@
+import './index.css';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useState, useRef } from 'react';
+import classnames from 'classnames';
+import { keyboardMatch, keyboardKeys } from '@hh.ru/magritte-common-keyboard';
+import { Selection } from '@hh.ru/magritte-common-text-selection';
+import { FormHelper } from '@hh.ru/magritte-ui-form-helper';
+
+var styles = {"pincode-input":"magritte-pincode-input___RpWyq_1-0-1","pincodeInput":"magritte-pincode-input___RpWyq_1-0-1","medium":"magritte-medium___wfRSc_1-0-1","placeholder":"magritte-placeholder___10kQ0_1-0-1","focus":"magritte-focus___IuhXb_1-0-1","invalid":"magritte-invalid___hB8h2_1-0-1","focus-visible":"magritte-focus-visible___BN1eD_1-0-1","focusVisible":"magritte-focus-visible___BN1eD_1-0-1","digit-box-container":"magritte-digit-box-container___BqMWw_1-0-1","digitBoxContainer":"magritte-digit-box-container___BqMWw_1-0-1","digit-box":"magritte-digit-box___6J0Q2_1-0-1","digitBox":"magritte-digit-box___6J0Q2_1-0-1","digits-input":"magritte-digits-input___4QeLj_1-0-1","digitsInput":"magritte-digits-input___4QeLj_1-0-1","caret-left":"magritte-caret-left___iZMuA_1-0-1","caretLeft":"magritte-caret-left___iZMuA_1-0-1","caret-right":"magritte-caret-right___u8wNk_1-0-1","caretRight":"magritte-caret-right___u8wNk_1-0-1","caret-blink":"magritte-caret-blink___-bhg7_1-0-1","caretBlink":"magritte-caret-blink___-bhg7_1-0-1","value-container":"magritte-value-container___9JR3e_1-0-1","valueContainer":"magritte-value-container___9JR3e_1-0-1"};
+
+const moveCaretTo = (ref, position, callback) => 
+// Каретка сдвигается при изменении содержимого инпута автоматически
+// Поэтому двигаем её асинхронно, чтобы сдвиг происходил после нативного, иначе она окажется не в нужной позиции
+requestAnimationFrame(() => {
+    if (ref.current) {
+        Selection.setCaretPosition(ref.current, position);
+        callback?.();
+    }
+});
+const getCaretPosition = (ref) => ref.current ? (Selection.getCaretPosition(ref.current) ?? 0) : 0;
+const PincodeInput = forwardRef(({ digitsCount: _digitsCount = null, size = 'large', invalid = false, onFocus, onBlur, onChange, description, errorMessage, 'data-qa': dataQa = 'magritte-pincode-input', }, ref) => {
+    const digitsCount = _digitsCount ?? (size === 'medium' ? 6 : 4);
+    const [value, setValue] = useState('');
+    const [caretPosition, setCaretPosition] = useState(0);
+    const [focused, setFocused] = useState(false);
+    const [focusVisible, setFocusVisible] = useState(false);
+    const inputRef = useRef(null);
+    const selectionRef = useRef(null);
+    const updateValue = (newValue) => {
+        setValue(newValue);
+        onChange?.(newValue);
+    };
+    const refineCaretPosition = () => {
+        // если попытаться получить позицию каретки синхронно, то получим позицию до изменения
+        requestAnimationFrame(() => {
+            if (!inputRef.current) {
+                return;
+            }
+            // Когда перемещаемся между цифрами если в позиции введена цифра, то ввод должен заменят именно её
+            // а не сдвигать весь текст после нее врпаво, как в обычном инпуте.
+            // Поэтому здесь проверяем если в позиции что-то введено, то не просто устанавливаем каретку, а выделяем
+            // символ, чтобы при вводе он заменился
+            const caretPosition = getCaretPosition(inputRef);
+            const value = inputRef.current?.value ?? '';
+            const digitNumberToSelect = Math.min(caretPosition, Math.min(value.length, digitsCount - 1));
+            const selection = Selection.get(inputRef.current);
+            if (selectionRef.current && selection.start !== selection.end) {
+                return;
+            }
+            selectionRef.current = null;
+            if (value.length > digitNumberToSelect) {
+                Selection.set(inputRef.current, digitNumberToSelect, digitNumberToSelect + 1, 'forward');
+                selectionRef.current = digitNumberToSelect;
+            }
+            setCaretPosition(caretPosition);
+        });
+    };
+    return (jsxs("div", { ref: ref, "data-qa": dataQa, children: [jsxs("div", { "data-qa": "magritte-pincode-input-wrapper", className: classnames(styles.pincodeInput, {
+                    [styles.focus]: focused,
+                    [styles.focusVisible]: focusVisible,
+                    [styles.medium]: size === 'medium',
+                    [styles.invalid]: invalid,
+                }), onClick: (event) => {
+                    const caretPosition = Math.min(Number(event.target?.dataset?.digitIndex ?? value.length), value.length);
+                    inputRef.current?.focus();
+                    moveCaretTo(inputRef, caretPosition);
+                    refineCaretPosition();
+                }, 
+                // Этот обработчик нужен для того, чтобы не сбрасывался фокус при клике на дочерние элементы
+                // Визуально это проявляется как моргание цвета рамки если клик происходит когда инпут в фокусе
+                onMouseDown: (event) => event.preventDefault(), style: { '--magritte-pincode-digits-count': digitsCount }, children: [jsx("input", { ref: inputRef, autoComplete: "one-time-code", pattern: `\\d{${digitsCount}}`, "data-qa": "magritte-pincode-input-field", className: styles.digitsInput, type: "text", inputMode: "numeric", maxLength: digitsCount, value: value, onFocus: (event) => {
+                            onFocus?.(event);
+                            refineCaretPosition();
+                            if (!event.defaultPrevented) {
+                                setFocused(true);
+                                setFocusVisible(!!inputRef.current?.classList.contains('focus-visible'));
+                                if (invalid) {
+                                    // По спеке если инпут помечен как invalid при фокусе содержимое должно очищаться
+                                    updateValue('');
+                                }
+                            }
+                        }, onBlur: (event) => {
+                            onBlur?.(event);
+                            if (!event.defaultPrevented) {
+                                setFocused(false);
+                                setFocusVisible(false);
+                            }
+                        }, onKeyDown: (event) => {
+                            if (!inputRef.current) {
+                                return;
+                            }
+                            const isLeft = keyboardMatch(event, keyboardKeys.ArrowLeft);
+                            // Если одна из цифр выделена, и мы пытаемся передвинут каретку влево с помощью клавиатуры,
+                            // нужно делать это вручную, так как цифры мы выделяем справо на лево, и при нативном
+                            // перемещении курсо просто встанет перед выделенной цифрой, а refineCaretPosition yсова её
+                            // выделит и поставит каретку в исходное положение. Т.е. без этого кода не получится
+                            // передвинуть каретку влево, если выделена цифра
+                            if (isLeft && selectionRef.current !== null) {
+                                event.preventDefault();
+                                moveCaretTo(inputRef, Math.max(0, Math.min(selectionRef.current - 1, digitsCount - 1)), refineCaretPosition);
+                                return;
+                            }
+                            if (keyboardMatch(event, keyboardKeys.Backspace) && selectionRef.current !== null) {
+                                // При нажатии backspace действует следующая логика:
+                                // Если каретка находится в позиции последней введенной цифры, то удаляем её
+                                // и оставляем каретку на той же позиции
+                                // Если каретка находится в другой позиции, то удаляем цифру слева от каретки и
+                                // сдвигаем каретку влево
+                                event.preventDefault();
+                                const deleteIndex = selectionRef.current === value.length - 1
+                                    ? selectionRef.current
+                                    : Math.max(selectionRef.current - 1, 0);
+                                const newValue = `${value.slice(0, deleteIndex)}${value.slice(deleteIndex + 1)}`;
+                                updateValue(newValue);
+                                if (selectionRef.current !== value.length - 1) {
+                                    moveCaretTo(inputRef, Math.max(selectionRef.current - 1, 0), refineCaretPosition);
+                                    return;
+                                }
+                            }
+                            refineCaretPosition();
+                        }, onChange: (event) => {
+                            updateValue(event.target.value);
+                            if (selectionRef.current !== null) {
+                                // При изменении, если была выделена цифра, то каретку надо сдвинуть на следующую
+                                // позицию вручную
+                                moveCaretTo(inputRef, selectionRef.current + 1, refineCaretPosition);
+                                return;
+                            }
+                            refineCaretPosition();
+                        }, onPaste: (event) => {
+                            event.preventDefault();
+                            const pasteValue = event.clipboardData.getData('text').replace(/\D/g, '');
+                            if (pasteValue.length === digitsCount) {
+                                updateValue(pasteValue);
+                                moveCaretTo(inputRef, digitsCount, refineCaretPosition);
+                                return;
+                            }
+                            const caretPosition = Math.min(getCaretPosition(inputRef), selectionRef.current ?? value.length);
+                            const newValue = `${value.slice(0, caretPosition)}${pasteValue}${value.slice(caretPosition + pasteValue.length)}`.slice(0, digitsCount);
+                            updateValue(newValue);
+                            moveCaretTo(inputRef, caretPosition + pasteValue.length, refineCaretPosition);
+                        } }), jsx("div", { className: styles.digitBoxContainer, children: Array.from({ length: digitsCount }).map((_, index) => (jsx("div", { className: classnames(styles.digitBox), "data-digit-index": index, children: jsx("span", { className: classnames(styles.valueContainer, {
+                                    // в позицию ничего не введено, и каретка не находится в этой позиции
+                                    [styles.placeholder]: index >= value.length &&
+                                        (!focused ||
+                                            (index !== caretPosition &&
+                                                !(caretPosition === digitsCount && index === digitsCount - 1))),
+                                    // в позицию введена цифра, каретка находится в этой позиции, фокус
+                                    // установлен в инпут, это не крайняя справа цифра из введенных
+                                    [styles.caretLeft]: index === caretPosition && index !== value.length - 1 && focused,
+                                    // в позицию введена цифра, каретка находится в этой позиции, либо в следующей
+                                    // если введены все цифры (потому что при вводе последней цифры каретка
+                                    // должна уходить за нее), фокус установлен в инпут, это крайняя справа цифра
+                                    // из введенных
+                                    [styles.caretRight]: (index === caretPosition ||
+                                        (index === digitsCount - 1 && index === caretPosition - 1)) &&
+                                        index === value.length - 1 &&
+                                        focused,
+                                }), "data-qa": `magritte-pincode-input-digit-${index}`, children: value[index] || (caretPosition === index && focused ? '' : '•') }) }, index))) })] }), jsx(FormHelper, { invalid: invalid, description: description, errorMessage: errorMessage, "data-qa": "magritte-pincode-input-message" })] }));
+});
+PincodeInput.displayName = 'PincodeInput';
+
+export { PincodeInput };
+//# sourceMappingURL=PincodeInput.js.map

package/PincodeInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PincodeInput.js","sources":["../src/PincodeInput.tsx"],"sourcesContent":["import { type CSSProperties, type FocusEventHandler, useRef, useState, RefObject, forwardRef } from 'react';\nimport classnames from 'classnames';\n\nimport { keyboardKeys, keyboardMatch } from '@hh.ru/magritte-common-keyboard';\nimport { Selection } from '@hh.ru/magritte-common-text-selection';\nimport { FormHelper } from '@hh.ru/magritte-ui-form-helper';\n\nimport styles from './pincodeInput.less';\n\nconst moveCaretTo = (ref: RefObject<HTMLInputElement>, position: number, callback?: VoidFunction) =>\n    // Каретка сдвигается при изменении содержимого инпута автоматически\n    // Поэтому двигаем её асинхронно, чтобы сдвиг происходил после нативного, иначе она окажется не в нужной позиции\n    requestAnimationFrame(() => {\n        if (ref.current) {\n            Selection.setCaretPosition(ref.current, position);\n            callback?.();\n        }\n    });\n\nconst getCaretPosition = (ref: RefObject<HTMLInputElement>) =>\n    ref.current ? (Selection.getCaretPosition(ref.current) ?? 0) : 0;\n\nexport type PincodeInputSize = 'medium' | 'large';\n\nexport interface PincodeInputProps {\n    /**\n     * Количество цифр в пин-коде, если не указано будет выбрано автоматически\n     * в зависимости от размера инпута ( medium - 6, large - 4)\n     */\n    digitsCount?: number | null;\n    /** Размер инпута */\n    size?: PincodeInputSize;\n    /** Обработчик изменений */\n    onChange?: (value: string) => void;\n    /** Обработчик фокуса */\n    onFocus?: FocusEventHandler<HTMLInputElement>;\n    /** Обработчик потери фокуса */\n    onBlur?: FocusEventHandler<HTMLInputElement>;\n    /** Флаг наличия ошибки */\n    invalid?: boolean;\n    /** Текст описания */\n    description?: string;\n    /** Текст сообщения об ошибке */\n    errorMessage?: string;\n    'data-qa'?: string;\n}\n\nexport const PincodeInput = forwardRef<HTMLDivElement, PincodeInputProps>(\n    (\n        {\n            digitsCount: _digitsCount = null,\n            size = 'large',\n            invalid = false,\n            onFocus,\n            onBlur,\n            onChange,\n            description,\n            errorMessage,\n            'data-qa': dataQa = 'magritte-pincode-input',\n        },\n        ref\n    ) => {\n        const digitsCount = _digitsCount ?? (size === 'medium' ? 6 : 4);\n        const [value, setValue] = useState<string>('');\n        const [caretPosition, setCaretPosition] = useState<number>(0);\n        const [focused, setFocused] = useState(false);\n        const [focusVisible, setFocusVisible] = useState(false);\n\n        const inputRef = useRef<HTMLInputElement>(null);\n        const selectionRef = useRef<number | null>(null);\n\n        const updateValue = (newValue: string) => {\n            setValue(newValue);\n            onChange?.(newValue);\n        };\n\n        const refineCaretPosition = () => {\n            // если попытаться получить позицию каретки синхронно, то получим позицию до изменения\n            requestAnimationFrame(() => {\n                if (!inputRef.current) {\n                    return;\n                }\n                // Когда перемещаемся между цифрами если в позиции введена цифра, то ввод должен заменят именно её\n                // а не сдвигать весь текст после нее врпаво, как в обычном инпуте.\n                // Поэтому здесь проверяем если в позиции что-то введено, то не просто устанавливаем каретку, а выделяем\n                // символ, чтобы при вводе он заменился\n                const caretPosition = getCaretPosition(inputRef);\n                const value = inputRef.current?.value ?? '';\n                const digitNumberToSelect = Math.min(caretPosition, Math.min(value.length, digitsCount - 1));\n                const selection = Selection.get(inputRef.current);\n                if (selectionRef.current && selection.start !== selection.end) {\n                    return;\n                }\n                selectionRef.current = null;\n                if (value.length > digitNumberToSelect) {\n                    Selection.set(inputRef.current, digitNumberToSelect, digitNumberToSelect + 1, 'forward');\n                    selectionRef.current = digitNumberToSelect;\n                }\n                setCaretPosition(caretPosition);\n            });\n        };\n\n        return (\n            <div ref={ref} data-qa={dataQa}>\n                <div\n                    data-qa=\"magritte-pincode-input-wrapper\"\n                    className={classnames(styles.pincodeInput, {\n                        [styles.focus]: focused,\n                        [styles.focusVisible]: focusVisible,\n                        [styles.medium]: size === 'medium',\n                        [styles.invalid]: invalid,\n                    })}\n                    onClick={(event) => {\n                        const caretPosition = Math.min(\n                            Number((event.target as HTMLElement)?.dataset?.digitIndex ?? value.length),\n                            value.length\n                        );\n                        inputRef.current?.focus();\n                        moveCaretTo(inputRef, caretPosition);\n                        refineCaretPosition();\n                    }}\n                    // Этот обработчик нужен для того, чтобы не сбрасывался фокус при клике на дочерние элементы\n                    // Визуально это проявляется как моргание цвета рамки если клик происходит когда инпут в фокусе\n                    onMouseDown={(event) => event.preventDefault()}\n                    style={{ '--magritte-pincode-digits-count': digitsCount } as CSSProperties}\n                >\n                    <input\n                        ref={inputRef}\n                        autoComplete=\"one-time-code\"\n                        pattern={`\\\\d{${digitsCount}}`}\n                        data-qa=\"magritte-pincode-input-field\"\n                        className={styles.digitsInput}\n                        type=\"text\"\n                        inputMode=\"numeric\"\n                        maxLength={digitsCount}\n                        value={value}\n                        onFocus={(event) => {\n                            onFocus?.(event);\n                            refineCaretPosition();\n                            if (!event.defaultPrevented) {\n                                setFocused(true);\n                                setFocusVisible(!!inputRef.current?.classList.contains('focus-visible'));\n                                if (invalid) {\n                                    // По спеке если инпут помечен как invalid при фокусе содержимое должно очищаться\n                                    updateValue('');\n                                }\n                            }\n                        }}\n                        onBlur={(event) => {\n                            onBlur?.(event);\n                            if (!event.defaultPrevented) {\n                                setFocused(false);\n                                setFocusVisible(false);\n                            }\n                        }}\n                        onKeyDown={(event) => {\n                            if (!inputRef.current) {\n                                return;\n                            }\n\n                            const isLeft = keyboardMatch(event, keyboardKeys.ArrowLeft);\n\n                            // Если одна из цифр выделена, и мы пытаемся передвинут каретку влево с помощью клавиатуры,\n                            // нужно делать это вручную, так как цифры мы выделяем справо на лево, и при нативном\n                            // перемещении курсо просто встанет перед выделенной цифрой, а refineCaretPosition yсова её\n                            // выделит и поставит каретку в исходное положение. Т.е. без этого кода не получится\n                            // передвинуть каретку влево, если выделена цифра\n                            if (isLeft && selectionRef.current !== null) {\n                                event.preventDefault();\n                                moveCaretTo(\n                                    inputRef,\n                                    Math.max(0, Math.min(selectionRef.current - 1, digitsCount - 1)),\n                                    refineCaretPosition\n                                );\n                                return;\n                            }\n\n                            if (keyboardMatch(event, keyboardKeys.Backspace) && selectionRef.current !== null) {\n                                // При нажатии backspace действует следующая логика:\n                                // Если каретка находится в позиции последней введенной цифры, то удаляем её\n                                // и оставляем каретку на той же позиции\n                                // Если каретка находится в другой позиции, то удаляем цифру слева от каретки и\n                                // сдвигаем каретку влево\n                                event.preventDefault();\n                                const deleteIndex =\n                                    selectionRef.current === value.length - 1\n                                        ? selectionRef.current\n                                        : Math.max(selectionRef.current - 1, 0);\n                                const newValue = `${value.slice(0, deleteIndex)}${value.slice(deleteIndex + 1)}`;\n                                updateValue(newValue);\n                                if (selectionRef.current !== value.length - 1) {\n                                    moveCaretTo(inputRef, Math.max(selectionRef.current - 1, 0), refineCaretPosition);\n                                    return;\n                                }\n                            }\n\n                            refineCaretPosition();\n                        }}\n                        onChange={(event) => {\n                            updateValue(event.target.value);\n                            if (selectionRef.current !== null) {\n                                // При изменении, если была выделена цифра, то каретку надо сдвинуть на следующую\n                                // позицию вручную\n                                moveCaretTo(inputRef, selectionRef.current + 1, refineCaretPosition);\n                                return;\n                            }\n                            refineCaretPosition();\n                        }}\n                        onPaste={(event) => {\n                            event.preventDefault();\n                            const pasteValue = event.clipboardData.getData('text').replace(/\\D/g, '');\n                            if (pasteValue.length === digitsCount) {\n                                updateValue(pasteValue);\n                                moveCaretTo(inputRef, digitsCount, refineCaretPosition);\n                                return;\n                            }\n\n                            const caretPosition = Math.min(\n                                getCaretPosition(inputRef),\n                                selectionRef.current ?? value.length\n                            );\n                            const newValue =\n                                `${value.slice(0, caretPosition)}${pasteValue}${value.slice(caretPosition + pasteValue.length)}`.slice(\n                                    0,\n                                    digitsCount\n                                );\n                            updateValue(newValue);\n                            moveCaretTo(inputRef, caretPosition + pasteValue.length, refineCaretPosition);\n                        }}\n                    />\n                    <div className={styles.digitBoxContainer}>\n                        {/* eslint-disable-next-line no-restricted-properties */}\n                        {Array.from({ length: digitsCount }).map((_, index) => (\n                            <div key={index} className={classnames(styles.digitBox)} data-digit-index={index}>\n                                <span\n                                    className={classnames(styles.valueContainer, {\n                                        // в позицию ничего не введено, и каретка не находится в этой позиции\n                                        [styles.placeholder]:\n                                            index >= value.length &&\n                                            (!focused ||\n                                                (index !== caretPosition &&\n                                                    !(caretPosition === digitsCount && index === digitsCount - 1))),\n                                        // в позицию введена цифра, каретка находится в этой позиции, фокус\n                                        // установлен в инпут, это не крайняя справа цифра из введенных\n                                        [styles.caretLeft]:\n                                            index === caretPosition && index !== value.length - 1 && focused,\n                                        // в позицию введена цифра, каретка находится в этой позиции, либо в следующей\n                                        // если введены все цифры (потому что при вводе последней цифры каретка\n                                        // должна уходить за нее), фокус установлен в инпут, это крайняя справа цифра\n                                        // из введенных\n                                        [styles.caretRight]:\n                                            (index === caretPosition ||\n                                                (index === digitsCount - 1 && index === caretPosition - 1)) &&\n                                            index === value.length - 1 &&\n                                            focused,\n                                    })}\n                                    data-qa={`magritte-pincode-input-digit-${index}`}\n                                >\n                                    {value[index] || (caretPosition === index && focused ? '' : '•')}\n                                </span>\n                            </div>\n                        ))}\n                    </div>\n                </div>\n                <FormHelper\n                    invalid={invalid}\n                    description={description}\n                    errorMessage={errorMessage}\n                    data-qa=\"magritte-pincode-input-message\"\n                />\n            </div>\n        );\n    }\n);\n\nPincodeInput.displayName = 'PincodeInput';\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/index.css

@@ -0,0 +1,144 @@
+:root{
+  --magritte-color-text-primary-v21-0-0:#000000;
+  --magritte-color-component-input-stroke-state-field-hovered-v21-0-0:#CCD5DF;
+  --magritte-color-component-input-stroke-state-field-focused-v21-0-0:#0070ff;
+  --magritte-color-component-input-stroke-state-accent-focused-accessible-v21-0-0:#0070ff7a;
+  --magritte-color-component-input-stroke-state-field-invalid-v21-0-0:#ff4d3a;
+  --magritte-color-component-input-background-field-v21-0-0:#ffffff;
+  --magritte-color-component-input-background-state-field-hovered-v21-0-0:#ffffff;
+  --magritte-color-component-input-background-state-field-focused-v21-0-0:#ffffff;
+  --magritte-color-component-input-background-state-field-invalid-v21-0-0:#ffffff;
+  --magritte-color-component-input-stroke-field-v21-0-0:#DCE3EB;
+  --magritte-color-component-input-text-state-content-focused-v21-0-0:#000000;
+  --magritte-color-component-input-text-state-placeholder-hovered-v21-0-0:#768694;
+  --magritte-color-component-input-text-state-placeholder-focused-v21-0-0:#AABBCA;
+  --magritte-color-component-input-text-state-placeholder-invalid-v21-0-0:#AABBCA;
+  --magritte-color-component-input-text-placeholder-v21-0-0:#AABBCA;
+}
+:root{
+  --magritte-font-families-body-v21-0-0:hh sans;
+  --magritte-semantic-border-width-default-v21-0-0:1px;
+  --magritte-semantic-border-width-focused-v21-0-0:2px;
+  --magritte-static-border-radius-300-v21-0-0:12px;
+  --magritte-static-border-radius-450-v21-0-0:18px;
+}
+.magritte-night-theme{
+  --magritte-color-text-primary-v21-0-0:#ffffff;
+  --magritte-color-component-input-stroke-state-field-hovered-v21-0-0:#3B3B3B;
+  --magritte-color-component-input-stroke-state-field-focused-v21-0-0:#0070ff;
+  --magritte-color-component-input-stroke-state-accent-focused-accessible-v21-0-0:#0070ff7a;
+  --magritte-color-component-input-stroke-state-field-invalid-v21-0-0:#ff4d3a;
+  --magritte-color-component-input-background-field-v21-0-0:#1B1B1B;
+  --magritte-color-component-input-background-state-field-hovered-v21-0-0:#1B1B1B;
+  --magritte-color-component-input-background-state-field-focused-v21-0-0:#1B1B1B;
+  --magritte-color-component-input-background-state-field-invalid-v21-0-0:#1B1B1B;
+  --magritte-color-component-input-stroke-field-v21-0-0:#303030;
+  --magritte-color-component-input-text-placeholder-v21-0-0:#535353;
+  --magritte-color-component-input-text-state-content-focused-v21-0-0:#ffffff;
+  --magritte-color-component-input-text-state-placeholder-hovered-v21-0-0:#5E5E5E;
+  --magritte-color-component-input-text-state-placeholder-focused-v21-0-0:#535353;
+  --magritte-color-component-input-text-state-placeholder-invalid-v21-0-0:#535353;
+}
+.magritte-pincode-input___RpWyq_1-0-1{
+  --magritte-pincode-input-padding-horizontal:20px;
+  --magritte-pincode-input-padding-vertical:8px;
+  --magritte-pincode-input-gap:6px;
+  box-sizing:border-box;
+  height:88px;
+  border:var(--magritte-semantic-border-width-default-v21-0-0) solid var(--magritte-color-component-input-stroke-field-v21-0-0);
+  border-radius:var(--magritte-static-border-radius-450-v21-0-0);
+  background-color:var(--magritte-color-component-input-background-field-v21-0-0);
+  padding:var(--magritte-pincode-input-padding-vertical) var(--magritte-pincode-input-padding-horizontal);
+  position:relative;
+  cursor:text;
+  font-family:var(--magritte-font-families-body-v21-0-0);
+  font-size:32px;
+  font-style:normal;
+  font-weight:normal;
+  line-height:40px;
+  color:var(--magritte-color-component-input-text-state-content-focused-v21-0-0);
+}
+.magritte-pincode-input___RpWyq_1-0-1.magritte-medium___wfRSc_1-0-1{
+  font-size:28px;
+  --magritte-pincode-input-padding-horizontal:16px;
+  --magritte-pincode-input-padding-vertical:6px;
+  --magritte-pincode-input-gap:4px;
+  border-radius:var(--magritte-static-border-radius-300-v21-0-0);
+  height:76px;
+}
+.magritte-pincode-input___RpWyq_1-0-1:hover{
+  border-color:var(--magritte-color-component-input-stroke-state-field-hovered-v21-0-0);
+  background-color:var(--magritte-color-component-input-background-state-field-hovered-v21-0-0);
+}
+.magritte-pincode-input___RpWyq_1-0-1:hover .magritte-placeholder___10kQ0_1-0-1{
+  color:var(--magritte-color-component-input-text-state-placeholder-hovered-v21-0-0);
+}
+.magritte-pincode-input___RpWyq_1-0-1.magritte-focus___IuhXb_1-0-1{
+  border:var(--magritte-semantic-border-width-focused-v21-0-0) solid var(--magritte-color-component-input-stroke-state-field-focused-v21-0-0);
+  background-color:var(--magritte-color-component-input-background-state-field-focused-v21-0-0);
+  padding:var(--magritte-pincode-input-padding-vertical) calc(var(--magritte-pincode-input-padding-horizontal) - 1px);
+}
+.magritte-pincode-input___RpWyq_1-0-1.magritte-focus___IuhXb_1-0-1 .magritte-placeholder___10kQ0_1-0-1{
+  color:var(--magritte-color-component-input-text-state-placeholder-focused-v21-0-0);
+}
+.magritte-pincode-input___RpWyq_1-0-1.magritte-invalid___hB8h2_1-0-1{
+  border:var(--magritte-semantic-border-width-default-v21-0-0) solid var(--magritte-color-component-input-stroke-state-field-invalid-v21-0-0);
+  background-color:var(--magritte-color-component-input-background-state-field-invalid-v21-0-0);
+}
+.magritte-pincode-input___RpWyq_1-0-1.magritte-invalid___hB8h2_1-0-1 .magritte-placeholder___10kQ0_1-0-1{
+  color:var(--magritte-color-component-input-text-state-placeholder-invalid-v21-0-0);
+}
+.magritte-pincode-input___RpWyq_1-0-1.magritte-focus-visible___BN1eD_1-0-1{
+  outline:var(--magritte-color-component-input-stroke-state-accent-focused-accessible-v21-0-0) solid 4px;
+}
+.magritte-digit-box-container___BqMWw_1-0-1{
+  display:flex;
+  gap:var(--magritte-pincode-input-gap);
+  position:relative;
+  justify-content:stretch;
+  align-items:stretch;
+  height:100%;
+}
+.magritte-digit-box___6J0Q2_1-0-1{
+  flex:0 0 calc((100% - (var(--magritte-pincode-input-gap) * (var(--magritte-pincode-digits-count) - 1))) / var(--magritte-pincode-digits-count));
+  display:flex;
+  align-items:center;
+  justify-content:center;
+}
+.magritte-digits-input___4QeLj_1-0-1{
+  display:block;
+  position:absolute;
+  inset:0;
+  border-width:0;
+  background:none;
+  opacity:0;
+  outline:none;
+  appearance:none;
+  caret-color:transparent;
+  z-index:0;
+  pointer-events:none;
+}
+.magritte-digits-input___4QeLj_1-0-1::selection{
+  background-color:transparent;
+}
+.magritte-digits-input___4QeLj_1-0-1::-moz-selection{
+  background-color:transparent;
+}
+.magritte-caret-left___iZMuA_1-0-1::before,
+.magritte-caret-right___u8wNk_1-0-1::after{
+  content:'';
+  block-size:1em;
+  border-left:1px solid var(--magritte-color-text-primary-v21-0-0);
+  animation:magritte-caret-blink___-bhg7_1-0-1 1s steps(1) infinite;
+}
+.magritte-placeholder___10kQ0_1-0-1{
+  color:var(--magritte-color-component-input-text-placeholder-v21-0-0);
+}
+.magritte-value-container___9JR3e_1-0-1{
+  pointer-events:none;
+}
+@keyframes magritte-caret-blink___-bhg7_1-0-1{
+  50%{
+    opacity:0;
+  }
+}

package/index.d.ts

@@ -0,0 +1 @@
+export * from '@hh.ru/magritte-ui-pincode-input/PincodeInput';

package/index.js

@@ -0,0 +1,9 @@
+import './index.css';
+export { PincodeInput } from './PincodeInput.js';
+import 'react/jsx-runtime';
+import 'react';
+import 'classnames';
+import '@hh.ru/magritte-common-keyboard';
+import '@hh.ru/magritte-common-text-selection';
+import '@hh.ru/magritte-ui-form-helper';
+//# sourceMappingURL=index.js.map

package/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@hh.ru/magritte-ui-pincode-input",
+  "version": "1.0.1",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "sideEffects": [
+    "index.css"
+  ],
+  "scripts": {
+    "build": "yarn root:build $(pwd)",
+    "build-test-branch": "yarn root:build-test-branch $(pwd)",
+    "changelog": "yarn root:changelog $(pwd)",
+    "prepack": "yarn root:prepack $(pwd)",
+    "postpublish": "yarn root:postpublish $(pwd)",
+    "stylelint-test": "yarn root:stylelint-test $(pwd)",
+    "eslint-test": "yarn root:eslint-test $(pwd)",
+    "ts-config": "yarn root:ts-config $(pwd)",
+    "ts-check": "yarn root:ts-check $(pwd)",
+    "test": "yarn root:test $(pwd)",
+    "watch": "yarn root:watch $(pwd)"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@hh.ru/magritte-common-keyboard": "4.0.4",
+    "@hh.ru/magritte-common-text-selection": "0.1.5",
+    "@hh.ru/magritte-ui-form-helper": "1.0.21"
+  },
+  "peerDependencies": {
+    "classnames": ">=2.3.2",
+    "react": ">=18.2.0"
+  },
+  "gitHead": "75a6b12c08b7ca443e43da143a22adfc91282816"
+}