@ozen-ui/kit 0.63.0 → 0.64.0

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

@@ -0,0 +1,101 @@
+import type { ComponentPropsWithRef, ElementType } from 'react';
+import type { PolymorphicComponentPropsWithRef } from '../../utils/polymorphicComponentWithRef';
+import type { FIELD_CONTROL_DEFAULT_TAG, FieldControlBaseProps } from '../FieldControl';
+import type { FieldInputProps } from '../FieldInput';
+import type { INPUT_OTP_DEFAULT_TAG } from './constants';
+export declare const inputOTPAutoCompleteMode: readonly ["firstOnly", "all"];
+export type InputOTPAutoCompleteMode = (typeof inputOTPAutoCompleteMode)[number];
+export declare const inputOTPSizeVariant: readonly ["s", "m"];
+export type InputOTPSizeVariant = (typeof inputOTPSizeVariant)[number];
+export type InputOTPValidate = (value: string) => boolean;
+export type InputOTPRawValue = string[];
+export type InputOTPValue = InputOTPRawValue | string;
+export type InputOTPOnChange = (value: string, rawValue: InputOTPRawValue, maskedValue: string, maskedRawValue: InputOTPRawValue) => void;
+export type InputOTPOnFinish = (value: string, rawValue: InputOTPRawValue, maskedValue: string, maskedRawValue: InputOTPRawValue) => void;
+export type InputOTPInputs = HTMLInputElement[];
+export type InputOTPInputProps = FieldInputProps;
+export type InputOTPCalculatedInput = {
+    /** Значение input */
+    value: string;
+    /** Необработанное input */
+    rawValue: string;
+    /** Флаг: это предыдущий input */
+    isPrevious: boolean;
+    /** Флаг: это следующий input */
+    isNext: boolean;
+    /** Флаг: это текущий input */
+    isCurrentInput: boolean;
+    /** Флаг: это последний input */
+    isLast: boolean;
+    /** Флаг: input отключен */
+    isDisabled: boolean;
+};
+export type InputOTPMask = string | ((value: string, index: number) => string);
+export type InputOTPFinishBehaviorContext = {
+    /** Флаг: Поле полностью заполнено */
+    isFullFilled: boolean;
+    /** Значение */
+    value: string;
+    /** Необработанное значение */
+    rawValue: InputOTPRawValue;
+    /** Значение с маской */
+    maskedValue: string;
+    /** Необработанное значение с маской */
+    maskedRawValue: InputOTPRawValue;
+    /** Флаг: Это изменение на последнем input'е */
+    isChangeOnLastInput: boolean;
+    /** index input'а, на котором произошло изменение */
+    inputIndex: number;
+    /** Флаг: Был нажат enter */
+    isEnter: boolean;
+};
+export type InputOTPFinishBehavior = (context: InputOTPFinishBehaviorContext) => boolean;
+export type InputOTPDynamicInputParameter<Parameter> = Parameter | ((calculatedInput: InputOTPCalculatedInput, index: number) => Parameter);
+export type InputOTPBaseProps = {
+    /** Длина кода */
+    length: number;
+    /** Значение */
+    value?: InputOTPValue;
+    /** Значение по умолчанию */
+    defaultValue?: InputOTPValue;
+    /** Обработчик события на изменение значения поля */
+    onChange?: InputOTPOnChange;
+    /** Обработчик события на завершение ввода */
+    onFinish?: InputOTPOnFinish;
+    /** Маска значения */
+    mask?: InputOTPMask;
+    /** autoComplete */
+    autoComplete?: InputOTPInputProps['autoComplete'];
+    /**
+     * Мод autoComplete.
+     * В зависимости от режима, autoComplete будет устанавливаться разным input
+     */
+    autoCompleteMode?: InputOTPAutoCompleteMode;
+    /** Если `true` переводит поле в состояние ошибки */
+    error?: boolean;
+    /** Если `true` делает элемент неактивным */
+    disabled?: boolean;
+    /** Функция-валидатор */
+    validate?: InputOTPValidate;
+    /** Размер */
+    size?: InputOTPSizeVariant;
+    /** Лейбл */
+    ariaLabel?: string;
+    /** Если `true` отключает обводку */
+    disableStroke?: boolean;
+    /** Подсказка. Отображается, когда значение не введено */
+    placeholder?: InputOTPDynamicInputParameter<string>;
+    /** Свойства Field */
+    fieldProps?: InputOTPDynamicInputParameter<PolymorphicComponentPropsWithRef<FieldControlBaseProps, typeof FIELD_CONTROL_DEFAULT_TAG>>;
+    /** Свойства Input */
+    inputProps?: InputOTPDynamicInputParameter<FieldInputProps>;
+    /** Свойства InputContainer */
+    inputContainerProps?: InputOTPDynamicInputParameter<ComponentPropsWithRef<'div'> & {
+        'data-testid'?: string;
+    }>;
+    /** Функция, которая определяет поведение финиша */
+    finishBehavior?: InputOTPFinishBehavior;
+    /** data-атрибут для тестирования */
+    'data-testid'?: string;
+};
+export type InputOTPProps<As extends ElementType = typeof INPUT_OTP_DEFAULT_TAG> = PolymorphicComponentPropsWithRef<InputOTPBaseProps, As>;

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.inputOTPSizeVariant = exports.inputOTPAutoCompleteMode = void 0;
+// ---- AUTO-COMPLETE MODE ----
+exports.inputOTPAutoCompleteMode = ['firstOnly', 'all'];
+// ---- SIZE ----
+exports.inputOTPSizeVariant = ['s', 'm'];

package/__inner__/cjs/components/Tabs/Tabs.js

@@ -4,6 +4,7 @@ exports.Tabs = exports.cnTabs = void 0;
 var tslib_1 = require("tslib");
 require("./Tabs.css");
 var react_1 = tslib_1.__importStar(require("react"));
+var react_is_1 = require("react-is");
 var useDebounceCallback_1 = require("../../hooks/useDebounceCallback");
 var useEventListener_1 = require("../../hooks/useEventListener");
 var animateProperty_1 = require("../../utils/animateProperty");
@@ -31,9 +32,12 @@ exports.Tabs = (0, react_1.forwardRef)(function (_a, ref) {
      * для более точного контроля
      */
     var tabsValueToIndex = (0, react_1.useMemo)(function () { return new Map(); }, [children]);
+    var resolvedChildren = (0, react_is_1.isFragment)(children)
+        ? children.props.children
+        : children;
     /** Children только ноды Табов */
     var onlyTabsChildren = (0, react_1.useMemo)(function () {
-        return react_1.default.Children.toArray(children)
+        return react_1.default.Children.toArray(resolvedChildren)
             .filter(function (child) { return react_1.default.isValidElement(child) && (child === null || child === void 0 ? void 0 : child.type) === components_1.Tab; })
             .map(function (child, index) {
             if (!react_1.default.isValidElement(child))
@@ -42,7 +46,7 @@ exports.Tabs = (0, react_1.forwardRef)(function (_a, ref) {
             tabsValueToIndex.set(childValue, index);
             return react_1.default.cloneElement(child, { value: childValue });
         });
-    }, [children]);
+    }, [resolvedChildren]);
     var isScrollButtonsActive = variant === 'scrollable' &&
         !disableScrollButtons &&
         tabsListRef.current &&

package/__inner__/cjs/components/ThemeProvider/types.d.ts

@@ -111,6 +111,7 @@ export type Theme = {
         Indicator?: Partial<IndicatorProps>;
         Input?: Partial<InputProps>;
         InputNumber?: Partial<InputNumberProps>;
+        InputOTP?: Partial<InputProps>;
         Link?: Partial<LinkProps>;
         List?: Partial<ListProps>;
         ListItem?: Partial<ListItemProps>;

package/__inner__/cjs/hooks/useStoredValue/index.d.ts

@@ -0,0 +1,3 @@
+export * from './utils';
+export * from './useStoredValue';
+export * from './types';

package/__inner__/cjs/hooks/useStoredValue/index.js

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

package/__inner__/cjs/hooks/useStoredValue/types.d.ts

@@ -0,0 +1,2 @@
+import type { MutableRefObject } from 'react';
+export type StoredValue<Value> = MutableRefObject<Value>;

package/__inner__/cjs/hooks/useStoredValue/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/__inner__/cjs/hooks/useStoredValue/useStoredValue.d.ts

@@ -0,0 +1,4 @@
+import type { StoredValue } from './types';
+export declare function useStoredValue<Value>(
+/** Изначальное значение */
+initialValue: Value | (() => Value)): StoredValue<Value>;

package/__inner__/cjs/hooks/useStoredValue/useStoredValue.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStoredValue = useStoredValue;
+var react_1 = require("react");
+var isFunction_1 = require("../../utils/isFunction");
+function useStoredValue(
+/** Изначальное значение */
+initialValue) {
+    var processedInitialValue = (0, react_1.useMemo)(function () {
+        if ((0, isFunction_1.isFunction)(initialValue)) {
+            return initialValue();
+        }
+        return initialValue;
+    }, []);
+    return (0, react_1.useRef)(processedInitialValue);
+}

package/__inner__/cjs/hooks/useStoredValue/utils.d.ts

@@ -0,0 +1,2 @@
+import type { StoredValue } from './types';
+export declare function isStoredValue(valueToCheck: unknown): valueToCheck is StoredValue<unknown>;

package/__inner__/cjs/hooks/useStoredValue/utils.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isStoredValue = isStoredValue;
+function isStoredValue(valueToCheck) {
+    return (!!valueToCheck &&
+        typeof valueToCheck === 'object' &&
+        Object.prototype.hasOwnProperty.call(valueToCheck, 'current'));
+}

package/__inner__/cjs/utils/array/create-empty/createEmptyArray.d.ts

@@ -0,0 +1 @@
+export declare const createEmptyArray: (length: number) => null[];

package/__inner__/cjs/utils/array/create-empty/createEmptyArray.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createEmptyArray = void 0;
+var create_filled_1 = require("../create-filled");
+var createEmptyArray = function (length) {
+    return (0, create_filled_1.createFilledArray)(length, null);
+};
+exports.createEmptyArray = createEmptyArray;

package/__inner__/cjs/utils/array/create-empty/index.d.ts

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

package/__inner__/cjs/utils/array/create-empty/index.js

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

package/__inner__/cjs/utils/array/create-filled/createFilledArray.d.ts

@@ -0,0 +1 @@
+export declare const createFilledArray: <Value>(length: number, value: Value) => Value[];

package/__inner__/cjs/utils/array/create-filled/createFilledArray.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createFilledArray = void 0;
+var createFilledArray = function (length, value) {
+    return new Array(length).fill(value);
+};
+exports.createFilledArray = createFilledArray;

package/__inner__/cjs/utils/array/create-filled/index.d.ts

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

package/__inner__/cjs/utils/array/create-filled/index.js

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

package/__inner__/cjs/utils/array/index.d.ts

@@ -0,0 +1,2 @@
+export * from './create-empty';
+export * from './create-filled';

package/__inner__/cjs/utils/array/index.js

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

package/__inner__/cjs/utils/isFunction.d.ts

@@ -0,0 +1 @@
+export declare const isFunction: (data: unknown) => data is (...args: any[]) => any;

package/__inner__/cjs/utils/isFunction.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isFunction = void 0;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+var isFunction = function (data) {
+    return typeof data === 'function';
+};
+exports.isFunction = isFunction;

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 = 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__/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';