@ozen-ui/kit 0.63.1 → 0.64.0

package/InputOTP/package.json

@@ -0,0 +1,5 @@
+{
+	"main": "../__inner__/cjs/components/InputOTP/index.js",
+	"module": "../__inner__/esm/components/InputOTP/index.js",
+	"types": "../__inner__/esm/components/InputOTP/index.d.ts"
+}

package/__inner__/cjs/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__/cjs/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__/cjs/components/InputOTP/InputOTP.js

@@ -0,0 +1,179 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputOTP = exports.cnInputOTP = void 0;
+var tslib_1 = require("tslib");
+require("./InputOTP.css");
+var react_1 = tslib_1.__importStar(require("react"));
+var useControlled_1 = require("../../hooks/useControlled");
+var useStoredValue_1 = require("../../hooks/useStoredValue");
+var useThemeProps_1 = require("../../hooks/useThemeProps");
+var array_1 = require("../../utils/array");
+var classname_1 = require("../../utils/classname");
+var isFunction_1 = require("../../utils/isFunction");
+var isString_1 = require("../../utils/isString");
+var polymorphicComponentWithRef_1 = require("../../utils/polymorphicComponentWithRef");
+var setRef_1 = require("../../utils/setRef");
+var FieldControl_1 = require("../FieldControl");
+var FieldInput_1 = require("../FieldInput");
+var Fieldset_1 = require("../Fieldset");
+var Stack_1 = require("../Stack");
+var constants_1 = require("./constants");
+var helper_1 = require("./helper");
+var hooks_1 = require("./hooks");
+exports.cnInputOTP = (0, classname_1.cn)('InputOTP');
+exports.InputOTP = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
+    var props = (0, useThemeProps_1.useThemeProps)({
+        props: inProps,
+        name: 'InputOTP',
+    });
+    var _a = props.as, as = _a === void 0 ? constants_1.INPUT_OTP_DEFAULT_TAG : _a, className = props.className, length = props.length, autoComplete = props.autoComplete, _b = props.autoCompleteMode, autoCompleteMode = _b === void 0 ? constants_1.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 ? constants_1.INPUT_OTP_DEFAULT_DISABLE_STROKE : _c, validate = props.validate, _d = props.size, size = _d === void 0 ? constants_1.INPUT_OTP_DEFAULT_SIZE : _d, inputProps = props.inputProps, fieldProps = props.fieldProps, _e = props.finishBehavior, finishBehavior = _e === void 0 ? constants_1.INPUT_OTP_DEFAULT_FINISH_BEHAVIOR : _e, inputContainerProps = props.inputContainerProps, other = tslib_1.__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 = tslib_1.__read((0, react_1.useState)(null), 2), focusedInputIndex = _f[0], setFocusedInputIndex = _f[1];
+    var _g = tslib_1.__read((0, useControlled_1.useControlled)({
+        value: (0, isString_1.isString)(value) ? (0, helper_1.valueToArray)(value) : value,
+        defaultValue: (0, react_1.useMemo)(function () {
+            if ((0, isString_1.isString)(defaultValue)) {
+                return (0, helper_1.valueToArray)(defaultValue);
+            }
+            return defaultValue !== null && defaultValue !== void 0 ? defaultValue : [];
+        }, []),
+        name: 'InputOtp',
+    }), 2), valueByIndex = _g[0], setValueByIndexState = _g[1];
+    var inputs = (0, useStoredValue_1.useStoredValue)([]);
+    var setValueByIndex = function (valueByIndex) {
+        setValueByIndexState(valueByIndex);
+        if (onChangeFromProps) {
+            var maskedValueByIndex = (0, helper_1.maskValue)(mask, valueByIndex);
+            onChangeFromProps((0, helper_1.valueToString)(valueByIndex), valueByIndex, (0, helper_1.valueToString)(maskedValueByIndex), maskedValueByIndex);
+        }
+    };
+    var calculateInput = function (valueByIndex, index) {
+        return (0, helper_1.calculateInput)({
+            valueByIndex: valueByIndex,
+            mask: mask,
+            disabled: disabled,
+            index: index,
+            length: length,
+            focusedInputIndex: focusedInputIndex,
+        });
+    };
+    var _h = (0, hooks_1.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();
+    };
+    (0, react_1.useEffect)(function () {
+        if (!autoFocus) {
+            return;
+        }
+        focusFirstNonFilledInput();
+    }, []);
+    (0, react_1.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_1.default.createElement(Stack_1.Stack, tslib_1.__assign({ as: as, className: (0, exports.cnInputOTP)({
+            size: size,
+            disabled: disabled,
+        }, [className]), gap: constants_1.INPUT_OTP_SPACING_BY_SIZE[size] }, other, { ref: ref }), (0, array_1.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 = (0, isFunction_1.isFunction)(inputContainerProps)
+            ? inputContainerProps(calculatedInput, index)
+            : inputContainerProps;
+        var processedFieldProps = (0, isFunction_1.isFunction)(fieldProps)
+            ? fieldProps(calculatedInput, index)
+            : fieldProps;
+        var processedInputProps = (0, isFunction_1.isFunction)(inputProps)
+            ? inputProps(calculatedInput, index)
+            : inputProps;
+        var processedPlaceholder = (0, isFunction_1.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_1.default.createElement("div", tslib_1.__assign({ key: index }, processedContainerProps, { className: (0, exports.cnInputOTP)('InputContainer', [
+                processedContainerProps === null || processedContainerProps === void 0 ? void 0 : processedContainerProps.className,
+            ]), onClick: function () {
+                if (isInputDisabled) {
+                    focusFirstNonFilledInput();
+                }
+            } }),
+            react_1.default.createElement(FieldControl_1.FieldControl, tslib_1.__assign({ size: size, disabled: disabled, error: error, disableStroke: disableStroke }, processedFieldProps, { className: (0, exports.cnInputOTP)('Field', {
+                    notAvailable: isInputDisabled,
+                }, [processedFieldProps === null || processedFieldProps === void 0 ? void 0 : processedFieldProps.className]) }),
+                react_1.default.createElement(FieldInput_1.FieldInput, tslib_1.__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: (0, exports.cnInputOTP)('Input', [
+                        processedInputProps === null || processedInputProps === void 0 ? void 0 : processedInputProps.className,
+                    ]), ref: function (instance) {
+                        if (instance) {
+                            inputs.current[index] = instance;
+                        }
+                        (0, setRef_1.setRef)(processedInputProps === null || processedInputProps === void 0 ? void 0 : processedInputProps.ref, instance);
+                    } })),
+                react_1.default.createElement(Fieldset_1.Fieldset, null))));
+    })));
+});

package/__inner__/cjs/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 = false;
+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__/cjs/components/InputOTP/constants.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.INPUT_OTP_DEFAULT_FINISH_BEHAVIOR = exports.INPUT_OTP_SPACING_BY_SIZE = exports.INPUT_OTP_DEFAULT_SIZE = exports.INPUT_OTP_DEFAULT_DISABLE_STROKE = exports.INPUT_OTP_DEFAULT_AUTO_COMPLETE_MODE = exports.INPUT_OTP_DEFAULT_TAG = void 0;
+var presets_1 = require("./presets");
+exports.INPUT_OTP_DEFAULT_TAG = 'div';
+exports.INPUT_OTP_DEFAULT_AUTO_COMPLETE_MODE = 'firstOnly';
+exports.INPUT_OTP_DEFAULT_DISABLE_STROKE = false;
+exports.INPUT_OTP_DEFAULT_SIZE = 's';
+exports.INPUT_OTP_SPACING_BY_SIZE = {
+    s: 's',
+    m: 's',
+};
+exports.INPUT_OTP_DEFAULT_FINISH_BEHAVIOR = presets_1.INPUT_OTP_FINISH_BEHAVIOR_PRESET.FULL_FILLED_NON_LAST_INPUT;

package/__inner__/cjs/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__/cjs/components/InputOTP/helper.js

@@ -0,0 +1,87 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.valueToArray = exports.valueToString = exports.calculateInput = exports.maskValue = exports.maskSymbol = void 0;
+var isFunction_1 = require("../../utils/isFunction");
+var isNumber_1 = require("../../utils/isNumber");
+var isString_1 = require("../../utils/isString");
+var maskSymbol = function (mask, value, index) {
+    if (value === '') {
+        return '';
+    }
+    if ((0, isString_1.isString)(mask)) {
+        return mask;
+    }
+    if ((0, isFunction_1.isFunction)(mask)) {
+        return mask(value, index);
+    }
+    return value;
+};
+exports.maskSymbol = maskSymbol;
+var maskValue = function (mask, value) { var _a; return (_a = value === null || value === void 0 ? void 0 : value.map(function (value, index) { return (0, exports.maskSymbol)(mask, value, index); })) !== null && _a !== void 0 ? _a : []; };
+exports.maskValue = maskValue;
+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 = (0, exports.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 = (0, isNumber_1.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,
+    };
+};
+exports.calculateInput = calculateInput;
+var valueToString = function (value) {
+    if (!value) {
+        return '';
+    }
+    return value
+        .map(function (value) {
+        if (value === '') {
+            return ' ';
+        }
+        return value;
+    })
+        .join('');
+};
+exports.valueToString = valueToString;
+var valueToArray = function (value) {
+    return value.split('').map(function (value) {
+        if (value === ' ') {
+            return '';
+        }
+        return value;
+    });
+};
+exports.valueToArray = valueToArray;

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

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

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

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./useInputOTPEvents"), exports);

package/__inner__/cjs/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__/cjs/components/InputOTP/hooks/useInputOTPEvents.js

@@ -0,0 +1,183 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useInputOTPEvents = void 0;
+var tslib_1 = require("tslib");
+var isFunction_1 = require("../../../utils/isFunction");
+var isKey_1 = require("../../../utils/isKey");
+var isKeys_1 = require("../../../utils/isKeys");
+var isNumber_1 = require("../../../utils/isNumber");
+var helper_1 = require("../helper");
+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 ((0, isFunction_1.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 = (0, helper_1.valueToString)(requiredValueByIndex);
+        var isFullFilledValue = requiredValueByIndex.filter(function (value) { return value !== ''; }).length === length;
+        var isChangeOnLastInput = index + 1 === length;
+        var maskedRawValue = (0, helper_1.maskValue)(mask, valueByIndex);
+        var finishContext = {
+            isChangeOnLastInput: isChangeOnLastInput,
+            inputIndex: index,
+            value: (0, helper_1.valueToString)(valueByIndex),
+            rawValue: valueByIndex !== null && valueByIndex !== void 0 ? valueByIndex : [],
+            maskedValue: (0, helper_1.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 (0, helper_1.maskSymbol)(mask, value, index); })) !== null && _a !== void 0 ? _a : [];
+                onFinish(stringValue, valueByIndex !== null && valueByIndex !== void 0 ? valueByIndex : [], (0, helper_1.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 = (0, helper_1.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 ? tslib_1.__spreadArray([], tslib_1.__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 ((0, isKey_1.isKey)(event, 'Backspace')) {
+            var newValueByIndex = valueByIndex ? tslib_1.__spreadArray([], tslib_1.__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 ((0, isKeys_1.isKeys)(event, ['ArrowLeft', 'ArrowDown'])) {
+            event.preventDefault();
+            var previousInput = inputs.current[index - 1];
+            if (previousInput) {
+                previousInput.focus();
+            }
+        }
+        else if ((0, isKeys_1.isKeys)(event, ['ArrowRight', 'ArrowUp'])) {
+            event.preventDefault();
+            var nextInput = inputs.current[index + 1];
+            if (nextInput) {
+                nextInput.focus();
+            }
+        }
+        else if ((0, isKey_1.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 ? tslib_1.__spreadArray([], tslib_1.__read(valueByIndex), false) : [];
+        var lastChangedInputIndex = {
+            current: null,
+        };
+        var focusedInputIndex = {
+            current: null,
+        };
+        tslib_1.__spreadArray([], tslib_1.__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 ((0, isNumber_1.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,
+    };
+};
+exports.useInputOTPEvents = useInputOTPEvents;

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

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

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

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./presets"), exports);
+tslib_1.__exportStar(require("./InputOTP"), exports);
+tslib_1.__exportStar(require("./types"), exports);

package/__inner__/cjs/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;
+};

package/__inner__/cjs/components/InputOTP/presets.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.INPUT_OTP_FINISH_BEHAVIOR_PRESET = exports.INPUT_OTP_MASK_PRESET = exports.INPUT_OTP_VALIDATE_PRESET = void 0;
+exports.INPUT_OTP_VALIDATE_PRESET = {
+    TEXT: function (value) { return /[a-zA-Z]{1}/.test(value); },
+    NUMERIC: function (value) { return /\d{1}/.test(value); },
+    TEXT_NUMERIC: function (value) { return /[a-zA-Z0-9]{1}/.test(value); },
+};
+exports.INPUT_OTP_MASK_PRESET = {
+    PASSWORD: '•',
+};
+exports.INPUT_OTP_FINISH_BEHAVIOR_PRESET = {
+    FULL_FILLED_NON_LAST_INPUT: function (_a) {
+        var isFullFilled = _a.isFullFilled;
+        return isFullFilled;
+    },
+    FULL_FILLED_ON_LAST_INPUT: function (_a) {
+        var isFullFilled = _a.isFullFilled, isChangeOnLastInput = _a.isChangeOnLastInput, isEnter = _a.isEnter;
+        if (isFullFilled && isChangeOnLastInput) {
+            return true;
+        }
+        if (isFullFilled && isEnter) {
+            return true;
+        }
+        return false;
+    },
+};