@ozen-ui/kit 0.76.0 → 0.77.0

package/ImageBase/package.json

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

package/__inner__/cjs/components/Autocomplete/helper.d.ts

@@ -38,16 +38,16 @@ export declare function withDefaultGetters<OPTION>(props: AutocompleteProps<OPTI
     label?: string | undefined;
     style?: import("react").CSSProperties | undefined;
     autoFocus?: boolean | undefined;
-    className?: string | undefined;
+    className?: string | undefined | undefined;
     onKeyDown?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
     disabled?: boolean | undefined;
     placeholder?: string | undefined;
     required?: boolean | undefined;
     fullWidth?: boolean | undefined;
-    hint?: string | null | undefined;
+    hint?: string | null | undefined | undefined;
     disableStroke?: boolean | undefined;
-    renderLeft?: import("../FieldIcon").FieldIconProps["icon"];
-    renderRight?: import("../FieldIcon").FieldIconProps["icon"];
+    renderLeft?: string | number | import("react").FC<import("@ozen-ui/icons").IconProps> | import("react").ReactElement<import("@ozen-ui/icons").IconProps, string | import("react").JSXElementConstructor<any>> | (() => import("react").ReactElement<import("@ozen-ui/icons").IconProps, string | import("react").JSXElementConstructor<any>>) | undefined;
+    renderRight?: string | number | import("react").FC<import("@ozen-ui/icons").IconProps> | import("react").ReactElement<import("@ozen-ui/icons").IconProps, string | import("react").JSXElementConstructor<any>> | (() => import("react").ReactElement<import("@ozen-ui/icons").IconProps, string | import("react").JSXElementConstructor<any>>) | undefined;
     inputProps?: import("../FieldInput").FieldInputProps | undefined;
     bodyProps?: import("react").ComponentPropsWithRef<"label"> | undefined;
     hintProps?: Omit<import("../FieldHint").FieldHintProps, "children"> | undefined;

package/__inner__/cjs/components/AutocompleteBase/AutocompleteBase.d.ts

@@ -2,5 +2,6 @@ import './modules/AutocompleteBaseDropdown/AutocompleteBaseDropdown.css';
 import './modules/AutocompleteBaseInput/AutocompleteBaseInput.css';
 import './modules/AutocompleteBaseInputTag/AutocompleteBaseInputTag.css';
 import React from 'react';
+import { AUTOCOMPLETE_BASE_DEFAULT_MULTIPLE } from './constants';
 import type { AutocompleteBaseProps } from './types';
-export declare const AutocompleteBase: <Option, Multiple extends boolean = false>(inProps: AutocompleteBaseProps<Option, Multiple>) => React.JSX.Element;
+export declare const AutocompleteBase: <Option, Multiple extends boolean = typeof AUTOCOMPLETE_BASE_DEFAULT_MULTIPLE>(inProps: AutocompleteBaseProps<Option, Multiple>) => React.JSX.Element;

package/__inner__/cjs/components/AutocompleteNext/helpers.d.ts

@@ -44,16 +44,16 @@ export declare function withDefaultGetters<OPTION = AutocompleteDefaultOption, M
     label?: string | undefined;
     style?: import("react").CSSProperties | undefined;
     autoFocus?: boolean | undefined;
-    className?: string | undefined;
+    className?: string | undefined | undefined;
     onKeyDown?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
     disabled?: boolean | undefined;
     placeholder?: string | undefined;
     required?: boolean | undefined;
     fullWidth?: boolean | undefined;
-    hint?: string | null | undefined;
+    hint?: string | null | undefined | undefined;
     disableStroke?: boolean | undefined;
-    renderLeft?: import("../FieldIcon").FieldIconProps["icon"];
-    renderRight?: import("../FieldIcon").FieldIconProps["icon"];
+    renderLeft?: string | number | import("react").FC<import("@ozen-ui/icons").IconProps> | import("react").ReactElement<import("@ozen-ui/icons").IconProps, string | import("react").JSXElementConstructor<any>> | (() => import("react").ReactElement<import("@ozen-ui/icons").IconProps, string | import("react").JSXElementConstructor<any>>) | undefined;
+    renderRight?: string | number | import("react").FC<import("@ozen-ui/icons").IconProps> | import("react").ReactElement<import("@ozen-ui/icons").IconProps, string | import("react").JSXElementConstructor<any>> | (() => import("react").ReactElement<import("@ozen-ui/icons").IconProps, string | import("react").JSXElementConstructor<any>>) | undefined;
     inputProps?: import("../FieldInput").FieldInputProps | undefined;
     bodyProps?: import("react").ComponentPropsWithRef<"label"> | undefined;
     hintProps?: Omit<import("../FieldHint").FieldHintProps, "children"> | undefined;

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

@@ -1,4 +1,4 @@
-import type { ComponentPropsWithRef, ElementType, ReactNode } from 'react';
+import type { ComponentPropsWithRef, ComponentRef, ElementType, ReactNode } from 'react';
 import type { IconProps } from '@ozen-ui/icons';
 import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
 import type { PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
@@ -46,3 +46,4 @@ export type ButtonBaseProps = {
     'data-testid'?: string;
 };
 export type ButtonProps<As extends ElementType = typeof BUTTON_DEFAULT_TAG> = PolymorphicComponentPropsWithoutRef<ButtonBaseProps, As>;
+export type ButtonRef<As extends ElementType = typeof BUTTON_DEFAULT_TAG> = ComponentRef<As>;

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

@@ -14,6 +14,7 @@ var isString_1 = require("../../utils/isString");
 var polymorphicComponentWithRef_1 = require("../../utils/polymorphicComponentWithRef");
 var setRef_1 = require("../../utils/setRef");
 var FieldControl_1 = require("../FieldControl");
+var FieldHint_1 = require("../FieldHint");
 var FieldInput_1 = require("../FieldInput");
 var Fieldset_1 = require("../Fieldset");
 var Stack_1 = require("../Stack");
@@ -26,7 +27,7 @@ exports.InputOTP = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef
         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 _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, hint = props.hint, 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", "hint"]);
     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,
@@ -100,81 +101,83 @@ exports.InputOTP = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef
     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();
+        }, [className]), direction: "column" }, other, { ref: ref }),
+        react_1.default.createElement(Stack_1.Stack, { className: (0, exports.cnInputOTP)('Inputs'), gap: constants_1.INPUT_OTP_SPACING_BY_SIZE[size] }, (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';
                 }
-            } }),
-            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))));
-    })));
+                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))));
+        })),
+        react_1.default.createElement(FieldHint_1.FieldHint, { className: (0, exports.cnInputOTP)('Hint'), size: "l", disabled: disabled, error: error }, hint)));
 });
 exports.InputOTP.displayName = 'InputOTP';

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

@@ -1,8 +1,8 @@
 import type { StackGapVariant } from '../Stack';
-import type { InputOTPAutoCompleteMode, InputOTPSizeVariant } from './types';
+import type { 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_DEFAULT_AUTO_COMPLETE_MODE = "firstOnly";
+export declare const INPUT_OTP_DEFAULT_DISABLE_STROKE = false;
+export declare const INPUT_OTP_DEFAULT_SIZE = "s";
 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/presets.d.ts

@@ -1,12 +1,17 @@
 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: {
+    /** Реагирует на полный ввод на любом из input */
     FULL_FILLED_NON_LAST_INPUT: ({ isFullFilled }: import("./types").InputOTPFinishBehaviorContext) => boolean;
+    /** Реагирует на полный ввод только на последнем input, либо на нажатие на Enter при полном заполнении */
     FULL_FILLED_ON_LAST_INPUT: ({ isFullFilled, isChangeOnLastInput, isEnter, }: import("./types").InputOTPFinishBehaviorContext) => boolean;
 };

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

@@ -2,18 +2,23 @@
 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 = {
+    /** Реагирует на полный ввод на любом из input */
     FULL_FILLED_NON_LAST_INPUT: function (_a) {
         var isFullFilled = _a.isFullFilled;
         return isFullFilled;
     },
+    /** Реагирует на полный ввод только на последнем input, либо на нажатие на Enter при полном заполнении */
     FULL_FILLED_ON_LAST_INPUT: function (_a) {
         var isFullFilled = _a.isFullFilled, isChangeOnLastInput = _a.isChangeOnLastInput, isEnter = _a.isEnter;
         if (isFullFilled && isChangeOnLastInput) {

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

@@ -1,4 +1,4 @@
-import type { ComponentPropsWithRef, ElementType } from 'react';
+import type { ComponentPropsWithRef, ComponentRef, ElementType, ReactNode } from 'react';
 import type { PolymorphicComponentPropsWithRef } from '../../utils/polymorphicComponentWithRef';
 import type { FIELD_CONTROL_DEFAULT_TAG, FieldControlBaseProps } from '../FieldControl';
 import type { FieldInputProps } from '../FieldInput';
@@ -38,15 +38,15 @@ export type InputOTPFinishBehaviorContext = {
     value: string;
     /** Необработанное значение */
     rawValue: InputOTPRawValue;
-    /** Значение с маской */
+    /** Значение с примененной маской */
     maskedValue: string;
-    /** Необработанное значение с маской */
+    /** Необработанное значение с примененной маской */
     maskedRawValue: InputOTPRawValue;
-    /** Флаг: Это изменение на последнем input'е */
+    /** Если `true` — это изменение на последнем input */
     isChangeOnLastInput: boolean;
-    /** index input'а, на котором произошло изменение */
+    /** index input, на котором произошло изменение */
     inputIndex: number;
-    /** Флаг: Был нажат enter */
+    /** Если `true` — это нажатие Enter */
     isEnter: boolean;
 };
 export type InputOTPFinishBehavior = (context: InputOTPFinishBehaviorContext) => boolean;
@@ -87,6 +87,8 @@ export type InputOTPBaseProps = {
     placeholder?: InputOTPDynamicInputParameter<string>;
     /** Свойства Field */
     fieldProps?: InputOTPDynamicInputParameter<PolymorphicComponentPropsWithRef<FieldControlBaseProps, typeof FIELD_CONTROL_DEFAULT_TAG>>;
+    /** Дополнительное описание к полю */
+    hint?: ReactNode;
     /** Свойства Input */
     inputProps?: InputOTPDynamicInputParameter<FieldInputProps>;
     /** Свойства InputContainer */
@@ -99,3 +101,4 @@ export type InputOTPBaseProps = {
     'data-testid'?: string;
 };
 export type InputOTPProps<As extends ElementType = typeof INPUT_OTP_DEFAULT_TAG> = PolymorphicComponentPropsWithRef<InputOTPBaseProps, As>;
+export type InputOTPRef<As extends ElementType = typeof INPUT_OTP_DEFAULT_TAG> = ComponentRef<As>;

package/__inner__/cjs/components/OzenProvider/providers/theme/entities/defaultProps.d.ts

@@ -66,6 +66,7 @@ import type { SelectProps } from '../../../../Select';
 import type { SliderProps } from '../../../../Slider';
 import type { SnackbarProviderProps } from '../../../../Snackbar';
 import type { StackProps } from '../../../../Stack';
+import type { StepperVerticalProps, StepperVerticalStepButtonProps, StepperVerticalStepProps, StepperVerticalIndicatorProps, StepperVerticalIconIndicatorProps } from '../../../../StepperVertical';
 import type { TableContainerProps, TableProps, TableCaptionProps, TableCellProps } from '../../../../Table';
 import type { TagProps } from '../../../../Tag';
 import type { TagProps as TagPropsNext } from '../../../../TagNext';
@@ -188,6 +189,11 @@ export type ThemeDefaultProps = {
     Slider?: Partial<SliderProps>;
     SnackbarProvider?: Partial<SnackbarProviderProps>;
     Stack?: Partial<StackProps>;
+    StepperVertical?: Partial<StepperVerticalProps>;
+    StepperVerticalStep?: Partial<StepperVerticalStepProps>;
+    StepperVerticalStepButton?: Partial<StepperVerticalStepButtonProps>;
+    StepperVerticalIconIndicator?: Partial<StepperVerticalIconIndicatorProps>;
+    StepperVerticalIndicator?: Partial<StepperVerticalIndicatorProps>;
     Table?: Partial<TableProps>;
     TableCaption?: Partial<TableCaptionProps>;
     TableCell?: Partial<TableCellProps>;

package/__inner__/cjs/components/StepperVertical/StepperVertical.css

@@ -0,0 +1,4 @@
+.StepperVertical {
+  max-inline-size: 100%;
+  box-sizing: border-box;
+}

package/__inner__/cjs/components/StepperVertical/StepperVertical.d.ts

@@ -0,0 +1,7 @@
+import './StepperVertical.css';
+import './modules/StepperVerticalIconIndicator/StepperVerticalIconIndicator.css';
+import './modules/StepperVerticalIndicator/StepperVerticalIndicator.css';
+import './modules/StepperVerticalStep/StepperVerticalStep.css';
+import type { StepperVerticalBaseProps } from './types';
+export declare const cnStepperVertical: import("@bem-react/classname").ClassNameFormatter;
+export declare const StepperVertical: import("../../utils").PolymorphicComponentWithRef<StepperVerticalBaseProps, "div", "as">;

package/__inner__/cjs/components/StepperVertical/StepperVertical.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StepperVertical = exports.cnStepperVertical = void 0;
+var tslib_1 = require("tslib");
+require("./StepperVertical.css");
+require("./modules/StepperVerticalIconIndicator/StepperVerticalIconIndicator.css");
+require("./modules/StepperVerticalIndicator/StepperVerticalIndicator.css");
+require("./modules/StepperVerticalStep/StepperVerticalStep.css");
+var react_1 = tslib_1.__importDefault(require("react"));
+var useThemeProps_1 = require("../../hooks/useThemeProps");
+var utils_1 = require("../../utils");
+var Stack_1 = require("../Stack");
+var constants_1 = require("./constants");
+var StepperVerticalContext_1 = require("./StepperVerticalContext");
+exports.cnStepperVertical = (0, utils_1.cn)('StepperVertical');
+exports.StepperVertical = (0, utils_1.polymorphicComponentWithRef)(function (inProps, ref) {
+    var props = (0, useThemeProps_1.useThemeProps)({ name: 'StepperVertical', props: inProps });
+    var children = props.children, _a = props.as, as = _a === void 0 ? constants_1.STEPPER_VERTICAL_DEFAULT_TAG : _a, _b = props.ellipsis, ellipsis = _b === void 0 ? constants_1.STEPPER_VERTICAL_DEFAULT_ELLIPSIS : _b, className = props.className, fullWidth = props.fullWidth, other = tslib_1.__rest(props, ["children", "as", "ellipsis", "className", "fullWidth"]);
+    return (react_1.default.createElement(StepperVerticalContext_1.StepperVerticalContext.Provider, { value: { ellipsis: ellipsis } },
+        react_1.default.createElement(Stack_1.Stack, tslib_1.__assign({}, other, { ref: ref, as: as, className: (0, exports.cnStepperVertical)('', [className]), direction: "column", display: fullWidth ? 'block' : 'inline' }), children)));
+});

package/__inner__/cjs/components/StepperVertical/StepperVerticalContext.d.ts

@@ -0,0 +1,6 @@
+export type StepperVerticalContextValue = {
+    ellipsis: boolean;
+};
+export declare const StepperVerticalContextDefaultValue: StepperVerticalContextValue;
+export declare const StepperVerticalContext: import("react").Context<StepperVerticalContextValue>;
+export declare const useStepperVerticalContext: () => StepperVerticalContextValue;

package/__inner__/cjs/components/StepperVertical/StepperVerticalContext.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStepperVerticalContext = exports.StepperVerticalContext = exports.StepperVerticalContextDefaultValue = void 0;
+var react_1 = require("react");
+var environment_1 = require("../../constants/environment");
+var constants_1 = require("./constants");
+exports.StepperVerticalContextDefaultValue = {
+    ellipsis: constants_1.STEPPER_VERTICAL_DEFAULT_ELLIPSIS,
+};
+exports.StepperVerticalContext = (0, react_1.createContext)(exports.StepperVerticalContextDefaultValue);
+var useStepperVerticalContext = function () {
+    return (0, react_1.useContext)(exports.StepperVerticalContext);
+};
+exports.useStepperVerticalContext = useStepperVerticalContext;
+// Именованный провайдер
+if (environment_1.isDev) {
+    exports.StepperVerticalContext.displayName = 'StepperVerticalContext';
+}

package/__inner__/cjs/components/StepperVertical/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const STEPPER_VERTICAL_DEFAULT_TAG = "div";
+export declare const STEPPER_VERTICAL_DEFAULT_FULL_WIDTH = false;
+export declare const STEPPER_VERTICAL_DEFAULT_ELLIPSIS = false;

package/__inner__/cjs/components/StepperVertical/constants.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.STEPPER_VERTICAL_DEFAULT_ELLIPSIS = exports.STEPPER_VERTICAL_DEFAULT_FULL_WIDTH = exports.STEPPER_VERTICAL_DEFAULT_TAG = void 0;
+exports.STEPPER_VERTICAL_DEFAULT_TAG = 'div';
+exports.STEPPER_VERTICAL_DEFAULT_FULL_WIDTH = false;
+exports.STEPPER_VERTICAL_DEFAULT_ELLIPSIS = false;

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

@@ -0,0 +1,5 @@
+export * from './modules';
+export * from './constants';
+export * from './StepperVertical';
+export * from './StepperVerticalContext';
+export * from './types';

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

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./modules"), exports);
+tslib_1.__exportStar(require("./constants"), exports);
+tslib_1.__exportStar(require("./StepperVertical"), exports);
+tslib_1.__exportStar(require("./StepperVerticalContext"), exports);
+tslib_1.__exportStar(require("./types"), exports);

package/__inner__/cjs/components/StepperVertical/modules/StepperVerticalIconIndicator/StepperVerticalIconIndicator.css

@@ -0,0 +1,4 @@
+.StepperVerticalIconIndicator {
+  color: var(--stepper-vertical-indicator-color);
+  transition: var(--transition-default) color;
+}

package/__inner__/cjs/components/StepperVertical/modules/StepperVerticalIconIndicator/StepperVerticalIconIndicator.d.ts

@@ -0,0 +1,3 @@
+import type { StepperVerticalIconIndicatorProps } from './types';
+export declare const cnStepperVerticalIconIndicator: import("@bem-react/classname").ClassNameFormatter;
+export declare const StepperVerticalIconIndicator: import("react").ForwardRefExoticComponent<Omit<StepperVerticalIconIndicatorProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;

package/__inner__/cjs/components/StepperVertical/modules/StepperVerticalIconIndicator/StepperVerticalIconIndicator.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StepperVerticalIconIndicator = exports.cnStepperVerticalIconIndicator = void 0;
+var tslib_1 = require("tslib");
+var react_1 = require("react");
+var useThemeProps_1 = require("../../../../hooks/useThemeProps");
+var utils_1 = require("../../../../utils");
+var StepperVerticalStepContext_1 = require("../StepperVerticalStep/StepperVerticalStepContext");
+var constants_1 = require("./constants");
+exports.cnStepperVerticalIconIndicator = (0, utils_1.cn)('StepperVerticalIconIndicator');
+exports.StepperVerticalIconIndicator = (0, react_1.forwardRef)(function (inProps, ref) {
+    var props = (0, useThemeProps_1.useThemeProps)({
+        props: inProps,
+        name: 'StepperVerticalIconIndicator',
+    });
+    var iconProp = props.icon, className = props.className, other = tslib_1.__rest(props, ["icon", "className"]);
+    var variant = (0, StepperVerticalStepContext_1.useStepperVerticalStepContext)().variant;
+    var icon = iconProp !== null && iconProp !== void 0 ? iconProp : constants_1.STEPPER_VERTICAL_STEP_DEFAULT_ICON_BY_VARIANT[variant];
+    return (0, utils_1.renderContent)({
+        content: icon,
+        props: tslib_1.__assign(tslib_1.__assign({}, other), { size: 'm', ref: ref, className: (0, exports.cnStepperVerticalIconIndicator)({ variant: variant }, [className]) }),
+    });
+});
+exports.StepperVerticalIconIndicator.displayName = 'StepperVerticalIconIndicator';

package/__inner__/cjs/components/StepperVertical/modules/StepperVerticalIconIndicator/constants.d.ts

@@ -0,0 +1,3 @@
+import type { StepperVerticalStepVariant } from '../StepperVerticalStep/entities';
+import type { StepperVerticalStepIconIndicatorIcon } from './entities';
+export declare const STEPPER_VERTICAL_STEP_DEFAULT_ICON_BY_VARIANT: Readonly<Record<StepperVerticalStepVariant, StepperVerticalStepIconIndicatorIcon>>;

package/__inner__/cjs/components/StepperVertical/modules/StepperVerticalIconIndicator/constants.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.STEPPER_VERTICAL_STEP_DEFAULT_ICON_BY_VARIANT = void 0;
+var icons_1 = require("@ozen-ui/icons");
+exports.STEPPER_VERTICAL_STEP_DEFAULT_ICON_BY_VARIANT = {
+    refusal: icons_1.MinusCircleFilledIcon,
+    blocked: icons_1.CrossCircleFilledIcon,
+    warning: icons_1.WarningCircleFilledIcon,
+    awaiting: icons_1.ClockFilledIcon,
+    inProcessing: icons_1.ClockFilledIcon,
+    success: icons_1.CheckCircleFilledIcon,
+};

package/__inner__/cjs/components/StepperVertical/modules/StepperVerticalIconIndicator/entities/icon.d.ts

@@ -0,0 +1,3 @@
+import type { IconProps } from '@ozen-ui/icons';
+import type { RenderContentType } from '../../../../../utils';
+export type StepperVerticalStepIconIndicatorIcon = RenderContentType<IconProps>['content'];

package/__inner__/cjs/components/StepperVertical/modules/StepperVerticalIconIndicator/entities/icon.js

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

package/__inner__/cjs/components/StepperVertical/modules/StepperVerticalIconIndicator/entities/index.d.ts

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

package/__inner__/cjs/components/StepperVertical/modules/StepperVerticalIconIndicator/entities/index.js

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

package/__inner__/cjs/components/StepperVertical/modules/StepperVerticalIconIndicator/index.d.ts

@@ -0,0 +1,4 @@
+export * from './entities';
+export * from './constants';
+export * from './StepperVerticalIconIndicator';
+export * from './types';

package/__inner__/cjs/components/StepperVertical/modules/StepperVerticalIconIndicator/index.js

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

package/__inner__/cjs/components/StepperVertical/modules/StepperVerticalIconIndicator/types.d.ts

@@ -0,0 +1,7 @@
+import type { IconProps, IconRef } from '@ozen-ui/icons';
+import type { StepperVerticalStepIconIndicatorIcon } from './entities';
+export type StepperVerticalIconIndicatorRef = IconRef;
+export type StepperVerticalIconIndicatorProps = {
+    /** Иконка */
+    icon?: StepperVerticalStepIconIndicatorIcon;
+} & IconProps;

package/__inner__/cjs/components/StepperVertical/modules/StepperVerticalIconIndicator/types.js

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

package/__inner__/cjs/components/StepperVertical/modules/StepperVerticalIndicator/StepperVerticalIndicator.css

@@ -0,0 +1,20 @@
+/* stylelint-disable */
+.StepperVerticalIndicator {
+  font: var(--typography-text-3xs-font);
+  letter-spacing: var(--typography-text-3xs-letter_spacing, 0);
+  text-transform: var(--typography-text-3xs-text_transform, none);
+  box-sizing: border-box;
+  inline-size: 24px;
+  block-size: 24px;
+  padding: var(--spacing-4xs);
+}
+.StepperVerticalIndicator-Content {
+    overflow: hidden;
+    box-sizing: border-box;
+    inline-size: 100%;
+    block-size: 100%;
+    border-radius: 100%;
+    color: var(--stepper-vertical-indicator-text-color);
+    background-color: var(--stepper-vertical-indicator-color);
+    transition: var(--transition-default) background-color, var(--transition-default) color;
+  }