@ozen-ui/kit 0.63.1 → 0.65.0

package/__inner__/esm/components/FormGroup/types.d.ts

@@ -13,5 +13,7 @@ export type FormGroupBaseProps = {
     children?: ReactNode;
     /** Направление */
     direction?: FormGroupDirectionVariant;
+    /** data-атрибут для тестирования */
+    'data-testid'?: string;
 };
 export type FormGroupProps<As extends ElementType = 'div'> = PolymorphicComponentPropsWithoutRef<FormGroupBaseProps, As>;

package/__inner__/esm/components/FormTitle/FormTitle.d.ts

@@ -5,6 +5,7 @@ import { type PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphi
 export type FormTitleBaseProps = {
     /** Размер — влияет на размер шрифта и отступы заголовка */
     size?: FormElementSizeVariant;
+    'data-testid'?: string;
 };
 export type FormTitleProps<As extends ElementType = 'div'> = PolymorphicComponentPropsWithoutRef<FormTitleBaseProps, As>;
 export declare const cnFormTitle: import("@bem-react/classname").ClassNameFormatter;

package/__inner__/esm/components/IconButtonNext/types.d.ts

@@ -8,6 +8,7 @@ export declare const iconButtonColorVariant: readonly ["primary", "secondary", "
 export declare const iconButtonVariant: readonly ["contained", "contained-additional", "ghost", "function", "floating"];
 export type IconButtonVariant = (typeof iconButtonVariant)[number];
 export type IconButtonColorVariant = (typeof iconButtonColorVariant)[number];
+export type IconButtonSize = FormElementSizeVariant;
 export type IconButtonIcon = RenderContentType<IconProps>['content'];
 export type IconButtonBaseProps = {
     /** Иконка */
@@ -15,7 +16,7 @@ export type IconButtonBaseProps = {
     /** Вариант представления компонента */
     variant?: IconButtonVariant;
     /** Размер */
-    size?: FormElementSizeVariant;
+    size?: IconButtonSize;
     /** Основной цвет компонента */
     color?: IconButtonColorVariant;
     /** Цвет иконки кнопки */
@@ -30,6 +31,8 @@ export type IconButtonBaseProps = {
     className?: string;
     /** Если `true` делает компонент круглым  */
     rounded?: boolean;
+    /** Идентификатор компонента для тестов */
+    'data-testid'?: string;
     children?: never;
 };
 export type IconButtonProps<As extends ElementType = typeof ICON_BUTTON_DEFAULT_TAG> = PolymorphicComponentPropsWithoutRef<IconButtonBaseProps, As>;

package/__inner__/esm/components/IconButtonNext/utils.d.ts

@@ -1,5 +1,5 @@
-import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
 import type { LoaderSizeVariant } from '../Loader';
+import type { IconButtonSize } from './types';
 export declare const loaderSizeMapper: {
-    [key in FormElementSizeVariant]: LoaderSizeVariant;
+    [key in IconButtonSize]: LoaderSizeVariant;
 };

package/__inner__/esm/components/InputOTP/InputOTP.css

@@ -0,0 +1,60 @@
+/* stylelint-disable */
+.InputOTP-Field {
+    position: relative;
+  }
+.InputOTP-Field_notAvailable {
+      pointer-events: none;
+    }
+.InputOTP .FieldControl_error:not(.FieldControl_disabled) {
+    --textfield-color: var(--color-content-error);
+    --textfield-background-color: var(--color-background-primary);
+  }
+.InputOTP:not(.InputOTP_disabled) .InputOTP-InputContainer {
+      cursor: pointer;
+    }
+.InputOTP_size_s {
+      --otp-input-inline-size: 40px;
+    }
+.InputOTP_size_s .InputOTP-Input {
+        font: var(--typography-text-s-font);
+        letter-spacing: var(--typography-text-s-letter_spacing, 0);
+        text-transform: var(--typography-text-s-text_transform, none);
+      }
+.InputOTP_size_m {
+      --otp-input-inline-size: 44px;
+    }
+.InputOTP_size_m .InputOTP-Input {
+        font: var(--typography-text-l-font);
+        letter-spacing: var(--typography-text-l-letter_spacing, 0);
+        text-transform: var(--typography-text-l-text_transform, none);
+      }
+.InputOTP-Input {
+    box-sizing: border-box;
+    padding: var(--textfield-input-padding);
+    background-color: var(--textfield-background-color);
+    transition: background-color box-shadow var(--transition-slow);
+    color: var(--textfield-color);
+    border-radius: var(--textfield-border-radius);
+    block-size: var(--textfield-input-height);
+    text-align: center;
+    border: none;
+    outline: none;
+    display: block;
+    inline-size: var(--otp-input-inline-size);
+  }
+.InputOTP-Input:-webkit-autofill,
+    .InputOTP-Input:-webkit-autofill:hover,
+    .InputOTP-Input:-webkit-autofill:focus {
+      box-shadow: 0 0 0 1000px var(--textfield-background-color) inset !important;
+      background-color: transparent !important;
+      -webkit-text-fill-color: var(--textfield-color);
+    }
+.InputOTP-Input::-webkit-outer-spin-button,
+    .InputOTP-Input::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+              appearance: none;
+      margin: 0;
+    }
+.InputOTP-Input:disabled {
+      opacity: 1;
+    }

package/__inner__/esm/components/InputOTP/InputOTP.d.ts

@@ -0,0 +1,4 @@
+import './InputOTP.css';
+import type { InputOTPBaseProps } from './types';
+export declare const cnInputOTP: import("@bem-react/classname").ClassNameFormatter;
+export declare const InputOTP: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<InputOTPBaseProps, "div">;

package/__inner__/esm/components/InputOTP/InputOTP.js

@@ -0,0 +1,176 @@
+import { __assign, __read, __rest } from "tslib";
+import './InputOTP.css';
+import React, { useImperativeHandle, useEffect, useMemo, useState, } from 'react';
+import { useControlled } from '../../hooks/useControlled';
+import { useStoredValue } from '../../hooks/useStoredValue';
+import { useThemeProps } from '../../hooks/useThemeProps';
+import { createEmptyArray } from '../../utils/array';
+import { cn } from '../../utils/classname';
+import { isFunction } from '../../utils/isFunction';
+import { isString } from '../../utils/isString';
+import { polymorphicComponentWithRef } from '../../utils/polymorphicComponentWithRef';
+import { setRef } from '../../utils/setRef';
+import { FieldControl } from '../FieldControl';
+import { FieldInput } from '../FieldInput';
+import { Fieldset } from '../Fieldset';
+import { Stack } from '../Stack';
+import { INPUT_OTP_DEFAULT_AUTO_COMPLETE_MODE, INPUT_OTP_DEFAULT_DISABLE_STROKE, INPUT_OTP_DEFAULT_FINISH_BEHAVIOR, INPUT_OTP_DEFAULT_SIZE, INPUT_OTP_DEFAULT_TAG, INPUT_OTP_SPACING_BY_SIZE, } from './constants';
+import { maskValue, calculateInput as externalCalculateInput, valueToString, valueToArray, } from './helper';
+import { useInputOTPEvents } from './hooks';
+export var cnInputOTP = cn('InputOTP');
+export var InputOTP = polymorphicComponentWithRef(function (inProps, ref) {
+    var props = useThemeProps({
+        props: inProps,
+        name: 'InputOTP',
+    });
+    var _a = props.as, as = _a === void 0 ? INPUT_OTP_DEFAULT_TAG : _a, className = props.className, length = props.length, autoComplete = props.autoComplete, _b = props.autoCompleteMode, autoCompleteMode = _b === void 0 ? INPUT_OTP_DEFAULT_AUTO_COMPLETE_MODE : _b, placeholder = props.placeholder, disabled = props.disabled, error = props.error, onChangeFromProps = props.onChange, ariaLabel = props.ariaLabel, value = props.value, defaultValue = props.defaultValue, mask = props.mask, autoFocus = props.autoFocus, onFinish = props.onFinish, onPasteFromProps = props.onPaste, onKeyDownFromProps = props.onKeyDown, _c = props.disableStroke, disableStroke = _c === void 0 ? INPUT_OTP_DEFAULT_DISABLE_STROKE : _c, validate = props.validate, _d = props.size, size = _d === void 0 ? INPUT_OTP_DEFAULT_SIZE : _d, inputProps = props.inputProps, fieldProps = props.fieldProps, _e = props.finishBehavior, finishBehavior = _e === void 0 ? INPUT_OTP_DEFAULT_FINISH_BEHAVIOR : _e, inputContainerProps = props.inputContainerProps, other = __rest(props, ["as", "className", "length", "autoComplete", "autoCompleteMode", "placeholder", "disabled", "error", "onChange", "ariaLabel", "value", "defaultValue", "mask", "autoFocus", "onFinish", "onPaste", "onKeyDown", "disableStroke", "validate", "size", "inputProps", "fieldProps", "finishBehavior", "inputContainerProps"]);
+    var _f = __read(useState(null), 2), focusedInputIndex = _f[0], setFocusedInputIndex = _f[1];
+    var _g = __read(useControlled({
+        value: isString(value) ? valueToArray(value) : value,
+        defaultValue: useMemo(function () {
+            if (isString(defaultValue)) {
+                return valueToArray(defaultValue);
+            }
+            return defaultValue !== null && defaultValue !== void 0 ? defaultValue : [];
+        }, []),
+        name: 'InputOtp',
+    }), 2), valueByIndex = _g[0], setValueByIndexState = _g[1];
+    var inputs = useStoredValue([]);
+    var setValueByIndex = function (valueByIndex) {
+        setValueByIndexState(valueByIndex);
+        if (onChangeFromProps) {
+            var maskedValueByIndex = maskValue(mask, valueByIndex);
+            onChangeFromProps(valueToString(valueByIndex), valueByIndex, valueToString(maskedValueByIndex), maskedValueByIndex);
+        }
+    };
+    var calculateInput = function (valueByIndex, index) {
+        return externalCalculateInput({
+            valueByIndex: valueByIndex,
+            mask: mask,
+            disabled: disabled,
+            index: index,
+            length: length,
+            focusedInputIndex: focusedInputIndex,
+        });
+    };
+    var _h = useInputOTPEvents({
+        inputs: inputs,
+        valueByIndex: valueByIndex,
+        setValueByIndex: setValueByIndex,
+        validate: validate,
+        onFinish: onFinish,
+        onPaste: onPasteFromProps,
+        onKeyDown: onKeyDownFromProps,
+        length: length,
+        mask: mask,
+        finishBehavior: finishBehavior,
+    }), onInputSelect = _h.onInputSelect, onInputChange = _h.onInputChange, onKeyDown = _h.onKeyDown, onPaste = _h.onPaste;
+    var getFirstNonFilledInput = function () {
+        var firstNonFilledInputIndex = inputs.current.findIndex(function (_, index) {
+            var _a;
+            var inputValue = (_a = valueByIndex === null || valueByIndex === void 0 ? void 0 : valueByIndex[index]) !== null && _a !== void 0 ? _a : '';
+            return inputValue === '';
+        });
+        return inputs.current[firstNonFilledInputIndex];
+    };
+    var focusFirstNonFilledInput = function () {
+        var _a;
+        (_a = getFirstNonFilledInput()) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    useEffect(function () {
+        if (!autoFocus) {
+            return;
+        }
+        focusFirstNonFilledInput();
+    }, []);
+    useImperativeHandle(ref, function () { return ({
+        focus: function () {
+            var _a;
+            if (getFirstNonFilledInput()) {
+                focusFirstNonFilledInput();
+            }
+            else {
+                (_a = inputs.current[length - 1]) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+        },
+    }); });
+    return (React.createElement(Stack, __assign({ as: as, className: cnInputOTP({
+            size: size,
+            disabled: disabled,
+        }, [className]), gap: INPUT_OTP_SPACING_BY_SIZE[size] }, other, { ref: ref }), createEmptyArray(length).map(function (_, index) {
+        var _a, _b;
+        var calculatedInput = calculateInput(valueByIndex, index);
+        var isInputDisabled = calculatedInput.isDisabled, value = calculatedInput.value;
+        var processedAutocomplete = (function () {
+            if (autoCompleteMode === 'firstOnly') {
+                return !!autoComplete && index === 0 ? autoComplete : 'off';
+            }
+            return autoComplete;
+        })();
+        var processedContainerProps = isFunction(inputContainerProps)
+            ? inputContainerProps(calculatedInput, index)
+            : inputContainerProps;
+        var processedFieldProps = isFunction(fieldProps)
+            ? fieldProps(calculatedInput, index)
+            : fieldProps;
+        var processedInputProps = isFunction(inputProps)
+            ? inputProps(calculatedInput, index)
+            : inputProps;
+        var processedPlaceholder = isFunction(placeholder)
+            ? placeholder(calculatedInput, index)
+            : placeholder;
+        return (
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
+        React.createElement("div", __assign({ key: index }, processedContainerProps, { className: cnInputOTP('InputContainer', [
+                processedContainerProps === null || processedContainerProps === void 0 ? void 0 : processedContainerProps.className,
+            ]), onClick: function () {
+                if (isInputDisabled) {
+                    focusFirstNonFilledInput();
+                }
+            } }),
+            React.createElement(FieldControl, __assign({ size: size, disabled: disabled, error: error, disableStroke: disableStroke }, processedFieldProps, { className: cnInputOTP('Field', {
+                    notAvailable: isInputDisabled,
+                }, [processedFieldProps === null || processedFieldProps === void 0 ? void 0 : processedFieldProps.className]) }),
+                React.createElement(FieldInput, __assign({ inputMode: (_a = processedInputProps === null || processedInputProps === void 0 ? void 0 : processedInputProps.inputMode) !== null && _a !== void 0 ? _a : 'numeric', type: (_b = processedInputProps === null || processedInputProps === void 0 ? void 0 : processedInputProps.type) !== null && _b !== void 0 ? _b : 'text', value: value, autoComplete: processedAutocomplete, "aria-label": ariaLabel && "".concat(ariaLabel, ": ").concat(index + 1, "."), placeholder: processedPlaceholder, disabled: isInputDisabled }, processedInputProps, { onMouseDown: function (event) {
+                        var _a;
+                        (_a = processedInputProps === null || processedInputProps === void 0 ? void 0 : processedInputProps.onMouseDown) === null || _a === void 0 ? void 0 : _a.call(processedInputProps, event);
+                        onInputSelect(index);
+                    }, onTouchStart: function (event) {
+                        var _a;
+                        (_a = processedInputProps === null || processedInputProps === void 0 ? void 0 : processedInputProps.onTouchStart) === null || _a === void 0 ? void 0 : _a.call(processedInputProps, event);
+                        onInputSelect(index);
+                    }, onPointerDown: function (event) {
+                        var _a;
+                        (_a = processedInputProps === null || processedInputProps === void 0 ? void 0 : processedInputProps.onPointerDown) === null || _a === void 0 ? void 0 : _a.call(processedInputProps, event);
+                        onInputSelect(index);
+                    }, onChange: function (event) {
+                        var _a;
+                        (_a = processedInputProps === null || processedInputProps === void 0 ? void 0 : processedInputProps.onChange) === null || _a === void 0 ? void 0 : _a.call(processedInputProps, event);
+                        onInputChange(event, index);
+                    }, onKeyDown: function (event) {
+                        var _a;
+                        (_a = processedInputProps === null || processedInputProps === void 0 ? void 0 : processedInputProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(processedInputProps, event);
+                        onKeyDown(event, index);
+                    }, onPaste: function (event) {
+                        var _a;
+                        (_a = processedInputProps === null || processedInputProps === void 0 ? void 0 : processedInputProps.onPaste) === null || _a === void 0 ? void 0 : _a.call(processedInputProps, event);
+                        onPaste(event, index);
+                    }, onFocus: function (event) {
+                        var _a;
+                        (_a = processedInputProps === null || processedInputProps === void 0 ? void 0 : processedInputProps.onFocus) === null || _a === void 0 ? void 0 : _a.call(processedInputProps, event);
+                        setFocusedInputIndex(index);
+                    }, onBlur: function (event) {
+                        var _a;
+                        (_a = processedInputProps === null || processedInputProps === void 0 ? void 0 : processedInputProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(processedInputProps, event);
+                        setFocusedInputIndex(null);
+                    }, className: cnInputOTP('Input', [
+                        processedInputProps === null || processedInputProps === void 0 ? void 0 : processedInputProps.className,
+                    ]), ref: function (instance) {
+                        if (instance) {
+                            inputs.current[index] = instance;
+                        }
+                        setRef(processedInputProps === null || processedInputProps === void 0 ? void 0 : processedInputProps.ref, instance);
+                    } })),
+                React.createElement(Fieldset, null))));
+    })));
+});

package/__inner__/esm/components/InputOTP/constants.d.ts

@@ -0,0 +1,8 @@
+import type { StackGapVariant } from '../Stack';
+import type { InputOTPAutoCompleteMode, InputOTPSizeVariant } from './types';
+export declare const INPUT_OTP_DEFAULT_TAG = "div";
+export declare const INPUT_OTP_DEFAULT_AUTO_COMPLETE_MODE: InputOTPAutoCompleteMode;
+export declare const INPUT_OTP_DEFAULT_DISABLE_STROKE: boolean;
+export declare const INPUT_OTP_DEFAULT_SIZE: InputOTPSizeVariant;
+export declare const INPUT_OTP_SPACING_BY_SIZE: Readonly<Record<InputOTPSizeVariant, StackGapVariant>>;
+export declare const INPUT_OTP_DEFAULT_FINISH_BEHAVIOR: ({ isFullFilled }: import("./types").InputOTPFinishBehaviorContext) => boolean;

package/__inner__/esm/components/InputOTP/constants.js

@@ -0,0 +1,10 @@
+import { INPUT_OTP_FINISH_BEHAVIOR_PRESET } from './presets';
+export var INPUT_OTP_DEFAULT_TAG = 'div';
+export var INPUT_OTP_DEFAULT_AUTO_COMPLETE_MODE = 'firstOnly';
+export var INPUT_OTP_DEFAULT_DISABLE_STROKE = false;
+export var INPUT_OTP_DEFAULT_SIZE = 's';
+export var INPUT_OTP_SPACING_BY_SIZE = {
+    s: 's',
+    m: 's',
+};
+export var INPUT_OTP_DEFAULT_FINISH_BEHAVIOR = INPUT_OTP_FINISH_BEHAVIOR_PRESET.FULL_FILLED_NON_LAST_INPUT;

package/__inner__/esm/components/InputOTP/helper.d.ts

@@ -0,0 +1,13 @@
+import type { InputOTPMask, InputOTPRawValue, InputOTPCalculatedInput } from './types';
+export declare const maskSymbol: (mask: InputOTPMask | undefined, value: string, index: number) => string;
+export declare const maskValue: (mask: InputOTPMask | undefined, value: InputOTPRawValue | undefined) => string[];
+export declare const calculateInput: ({ valueByIndex, index, mask, length, disabled: isDisabledGlobal, focusedInputIndex, }: {
+    valueByIndex: string[] | undefined;
+    index: number;
+    mask: InputOTPMask | undefined;
+    length: number;
+    disabled: boolean | undefined;
+    focusedInputIndex: number | null;
+}) => InputOTPCalculatedInput;
+export declare const valueToString: (value: InputOTPRawValue | undefined) => string;
+export declare const valueToArray: (value: string) => string[];

package/__inner__/esm/components/InputOTP/helper.js

@@ -0,0 +1,79 @@
+import { isFunction } from '../../utils/isFunction';
+import { isNumber } from '../../utils/isNumber';
+import { isString } from '../../utils/isString';
+export var maskSymbol = function (mask, value, index) {
+    if (value === '') {
+        return '';
+    }
+    if (isString(mask)) {
+        return mask;
+    }
+    if (isFunction(mask)) {
+        return mask(value, index);
+    }
+    return value;
+};
+export var maskValue = function (mask, value) { var _a; return (_a = value === null || value === void 0 ? void 0 : value.map(function (value, index) { return maskSymbol(mask, value, index); })) !== null && _a !== void 0 ? _a : []; };
+export var calculateInput = function (_a) {
+    var _b;
+    var valueByIndex = _a.valueByIndex, index = _a.index, mask = _a.mask, length = _a.length, isDisabledGlobal = _a.disabled, focusedInputIndex = _a.focusedInputIndex;
+    var requiredValueByIndex = valueByIndex !== null && valueByIndex !== void 0 ? valueByIndex : [];
+    var value = (_b = requiredValueByIndex[index]) !== null && _b !== void 0 ? _b : '';
+    var maskedValue = maskSymbol(mask, value, index);
+    var lastFilledInputIndex = requiredValueByIndex.findLastIndex(function (value) { return value !== '' && value !== undefined; });
+    var isBackward = index <= lastFilledInputIndex;
+    var isPrevious = index === lastFilledInputIndex;
+    var isNext = index === lastFilledInputIndex + 2;
+    var isCurrentInput = index === lastFilledInputIndex + 1;
+    var isLast = index === length - 1;
+    var isPreviousByFocusedInput = isNumber(focusedInputIndex) && index < focusedInputIndex;
+    var isFocusedInput = index === focusedInputIndex;
+    var isDisabled = (function () {
+        if (isDisabledGlobal) {
+            return true;
+        }
+        if (isFocusedInput) {
+            return false;
+        }
+        if (isPreviousByFocusedInput) {
+            return false;
+        }
+        if (isBackward) {
+            return false;
+        }
+        if (value !== '') {
+            return false;
+        }
+        return !isCurrentInput;
+    })();
+    return {
+        value: maskedValue,
+        rawValue: value,
+        isPrevious: isPrevious,
+        isNext: isNext,
+        isCurrentInput: isCurrentInput,
+        isLast: isLast,
+        isDisabled: isDisabled,
+    };
+};
+export var valueToString = function (value) {
+    if (!value) {
+        return '';
+    }
+    return value
+        .map(function (value) {
+        if (value === '') {
+            return ' ';
+        }
+        return value;
+    })
+        .join('');
+};
+export var valueToArray = function (value) {
+    return value.split('').map(function (value) {
+        if (value === ' ') {
+            return '';
+        }
+        return value;
+    });
+};

package/__inner__/esm/components/InputOTP/hooks/index.d.ts

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

package/__inner__/esm/components/InputOTP/hooks/index.js

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

package/__inner__/esm/components/InputOTP/hooks/useInputOTPEvents.d.ts

@@ -0,0 +1,20 @@
+import type { ChangeEvent, ClipboardEvent, ClipboardEventHandler, KeyboardEvent, KeyboardEventHandler } from 'react';
+import type { StoredValue } from '../../../hooks/useStoredValue';
+import type { InputOTPRawValue, InputOTPInputs, InputOTPOnFinish, InputOTPValidate, InputOTPMask, InputOTPFinishBehavior } from '../types';
+export declare const useInputOTPEvents: ({ inputs, valueByIndex, setValueByIndex, validate: validateFromProps, length, onPaste: onPasteFromProps, onKeyDown: onKeyDownFromProps, onFinish, mask, finishBehavior, }: {
+    inputs: StoredValue<InputOTPInputs>;
+    valueByIndex: InputOTPRawValue | undefined;
+    setValueByIndex: (valueByIndex: InputOTPRawValue) => void;
+    validate: InputOTPValidate | undefined;
+    length: number;
+    onKeyDown: KeyboardEventHandler<HTMLElement> | undefined;
+    onPaste: ClipboardEventHandler<HTMLElement> | undefined;
+    onFinish: InputOTPOnFinish | undefined;
+    mask: InputOTPMask | undefined;
+    finishBehavior: InputOTPFinishBehavior;
+}) => {
+    onInputChange: (event: ChangeEvent<HTMLInputElement>, index: number) => void;
+    onKeyDown: (event: KeyboardEvent<HTMLInputElement>, index: number) => void;
+    onPaste: (event: ClipboardEvent<HTMLInputElement>, inputIndex: number) => void;
+    onInputSelect: (index: number) => void;
+};

package/__inner__/esm/components/InputOTP/hooks/useInputOTPEvents.js

@@ -0,0 +1,179 @@
+import { __read, __spreadArray } from "tslib";
+import { isFunction } from '../../../utils/isFunction';
+import { isKey } from '../../../utils/isKey';
+import { isKeys } from '../../../utils/isKeys';
+import { isNumber } from '../../../utils/isNumber';
+import { maskSymbol, maskValue, valueToString } from '../helper';
+export var useInputOTPEvents = function (_a) {
+    var inputs = _a.inputs, valueByIndex = _a.valueByIndex, setValueByIndex = _a.setValueByIndex, validateFromProps = _a.validate, length = _a.length, onPasteFromProps = _a.onPaste, onKeyDownFromProps = _a.onKeyDown, onFinish = _a.onFinish, mask = _a.mask, finishBehavior = _a.finishBehavior;
+    var validate = function (value) {
+        if (isFunction(validateFromProps)) {
+            return validateFromProps(value);
+        }
+        return true;
+    };
+    var tryToFinish = function (valueByIndex, index, options) {
+        var _a;
+        var _b = (options !== null && options !== void 0 ? options : {}).isEnter, isEnter = _b === void 0 ? false : _b;
+        var requiredValueByIndex = valueByIndex !== null && valueByIndex !== void 0 ? valueByIndex : [];
+        var stringValue = valueToString(requiredValueByIndex);
+        var isFullFilledValue = requiredValueByIndex.filter(function (value) { return value !== ''; }).length === length;
+        var isChangeOnLastInput = index + 1 === length;
+        var maskedRawValue = maskValue(mask, valueByIndex);
+        var finishContext = {
+            isChangeOnLastInput: isChangeOnLastInput,
+            inputIndex: index,
+            value: valueToString(valueByIndex),
+            rawValue: valueByIndex !== null && valueByIndex !== void 0 ? valueByIndex : [],
+            maskedValue: valueToString(maskedRawValue),
+            maskedRawValue: maskedRawValue,
+            isFullFilled: isFullFilledValue,
+            isEnter: isEnter,
+        };
+        var isFinish = finishBehavior(finishContext);
+        if (isFinish) {
+            var activeElement = document.activeElement;
+            if (activeElement instanceof HTMLElement) {
+                activeElement.blur();
+            }
+            if (onFinish) {
+                var maskedValueByIndex = (_a = valueByIndex === null || valueByIndex === void 0 ? void 0 : valueByIndex.map(function (value, index) { return maskSymbol(mask, value, index); })) !== null && _a !== void 0 ? _a : [];
+                onFinish(stringValue, valueByIndex !== null && valueByIndex !== void 0 ? valueByIndex : [], valueToString(maskedValueByIndex), maskedValueByIndex);
+            }
+        }
+    };
+    var onInputChange = function (event, index) {
+        event.preventDefault();
+        var target = event.target;
+        var value = (function () {
+            var _a;
+            var previousValue = (_a = valueByIndex === null || valueByIndex === void 0 ? void 0 : valueByIndex[index]) !== null && _a !== void 0 ? _a : '';
+            var previousMaskedValue = maskSymbol(mask, previousValue, index);
+            var rawValue = target.value;
+            var changedValuePart = rawValue.replace(previousMaskedValue, '');
+            if (changedValuePart.length > 1) {
+                return changedValuePart.slice(0, 1);
+            }
+            return changedValuePart;
+        })();
+        var isValidValue = validate(value);
+        var newValueByIndex = valueByIndex ? __spreadArray([], __read(valueByIndex), false) : [];
+        if (isValidValue) {
+            newValueByIndex[index] = value;
+            var isLastInput = index === length - 1;
+            var firstEmptyInputIndex = newValueByIndex.findIndex(function (value) { return !value; });
+            if (isLastInput && firstEmptyInputIndex !== -1) {
+                var firstEmptyInput = inputs.current[firstEmptyInputIndex];
+                if (firstEmptyInput) {
+                    firstEmptyInput.focus();
+                }
+            }
+            else {
+                var nextInput = inputs.current[index + 1];
+                if (nextInput) {
+                    nextInput.disabled = false;
+                    nextInput.focus();
+                }
+            }
+            setValueByIndex(newValueByIndex);
+        }
+        tryToFinish(newValueByIndex, index);
+    };
+    var onKeyDown = function (event, index) {
+        if (onKeyDownFromProps) {
+            onKeyDownFromProps(event);
+        }
+        var target = event.target;
+        if (isKey(event, 'Backspace')) {
+            var newValueByIndex = valueByIndex ? __spreadArray([], __read(valueByIndex), false) : [];
+            if (target.value === '') {
+                var previousInput = inputs.current[index - 1];
+                var previousInputIndex = index - 1;
+                if (previousInput) {
+                    newValueByIndex[previousInputIndex] = '';
+                    previousInput.focus();
+                    event.preventDefault();
+                }
+            }
+            else {
+                newValueByIndex[index] = '';
+            }
+            setValueByIndex(newValueByIndex);
+        }
+        else if (isKeys(event, ['ArrowLeft', 'ArrowDown'])) {
+            event.preventDefault();
+            var previousInput = inputs.current[index - 1];
+            if (previousInput) {
+                previousInput.focus();
+            }
+        }
+        else if (isKeys(event, ['ArrowRight', 'ArrowUp'])) {
+            event.preventDefault();
+            var nextInput = inputs.current[index + 1];
+            if (nextInput) {
+                nextInput.focus();
+            }
+        }
+        else if (isKey(event, 'Enter')) {
+            tryToFinish(valueByIndex, index, {
+                isEnter: true,
+            });
+        }
+    };
+    var onPaste = function (event, inputIndex) {
+        event.preventDefault();
+        if (onPasteFromProps) {
+            onPasteFromProps(event);
+        }
+        var currentInputs = inputs.current;
+        var pastedValue = event.clipboardData.getData('Text');
+        var newValueByIndex = valueByIndex ? __spreadArray([], __read(valueByIndex), false) : [];
+        var lastChangedInputIndex = {
+            current: null,
+        };
+        var focusedInputIndex = {
+            current: null,
+        };
+        __spreadArray([], __read(pastedValue), false).forEach(function (symbol, symbolIndex) {
+            var currentInputIndex = symbolIndex + inputIndex;
+            var isIndexExistInArray = currentInputIndex >= 0 && currentInputIndex < currentInputs.length;
+            if (isIndexExistInArray && validate(symbol)) {
+                lastChangedInputIndex.current = currentInputIndex;
+                newValueByIndex[currentInputIndex] = symbol;
+                var nextInput = currentInputs[currentInputIndex + 1];
+                if (nextInput) {
+                    focusedInputIndex.current = currentInputIndex + 1;
+                }
+            }
+        });
+        if (isNumber(focusedInputIndex.current)) {
+            var input = currentInputs[focusedInputIndex.current];
+            if (input) {
+                input.disabled = false;
+                input.focus();
+            }
+        }
+        setValueByIndex(newValueByIndex);
+        if (lastChangedInputIndex.current !== null) {
+            tryToFinish(newValueByIndex, lastChangedInputIndex.current);
+        }
+    };
+    var onInputSelect = function (index) {
+        setTimeout(function () {
+            var currentInput = inputs.current[index];
+            if (!currentInput) {
+                return;
+            }
+            var originalType = currentInput.type;
+            currentInput.type = 'text';
+            currentInput.setSelectionRange(1, 1);
+            currentInput.type = originalType;
+        });
+    };
+    return {
+        onInputChange: onInputChange,
+        onKeyDown: onKeyDown,
+        onPaste: onPaste,
+        onInputSelect: onInputSelect,
+    };
+};

package/__inner__/esm/components/InputOTP/index.d.ts

@@ -0,0 +1,3 @@
+export * from './presets';
+export * from './InputOTP';
+export * from './types';

package/__inner__/esm/components/InputOTP/index.js

@@ -0,0 +1,3 @@
+export * from './presets';
+export * from './InputOTP';
+export * from './types';

package/__inner__/esm/components/InputOTP/presets.d.ts

@@ -0,0 +1,12 @@
+export declare const INPUT_OTP_VALIDATE_PRESET: {
+    TEXT: (value: string) => boolean;
+    NUMERIC: (value: string) => boolean;
+    TEXT_NUMERIC: (value: string) => boolean;
+};
+export declare const INPUT_OTP_MASK_PRESET: {
+    PASSWORD: string;
+};
+export declare const INPUT_OTP_FINISH_BEHAVIOR_PRESET: {
+    FULL_FILLED_NON_LAST_INPUT: ({ isFullFilled }: import("./types").InputOTPFinishBehaviorContext) => boolean;
+    FULL_FILLED_ON_LAST_INPUT: ({ isFullFilled, isChangeOnLastInput, isEnter, }: import("./types").InputOTPFinishBehaviorContext) => boolean;
+};