@ozen-ui/kit 0.75.0 → 0.77.0

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

@@ -9,7 +9,7 @@ export declare function withDefaultGetters<OPTION>(props: AutocompleteProps<OPTI
     defaultValue?: import("./types").AutocompletePropValue<OPTION>;
     open?: boolean;
     defaultOpen?: boolean;
-    onChange?: ((e: import("react").SyntheticEvent | KeyboardEvent, value: OPTION | null) => void) | undefined;
+    onChange?: ((e: import("react").SyntheticEvent | KeyboardEvent | MouseEvent, value: OPTION | null) => void) | undefined;
     inputValue?: string;
     onInputChange?: (e: import("react").ChangeEvent<HTMLInputElement> | null, value: string) => void;
     renderInput?: import("./types").AutocompleteRenderInput;
@@ -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__/esm/components/Autocomplete/types.d.ts

@@ -35,7 +35,7 @@ export type AutocompleteProps<OPTION = AutocompleteDefaultOption> = {
     /** Состояние открытие по умолчанию (неконтролируемый компонент) */
     defaultOpen?: boolean;
     /** Функция обратного вызова, которая будет вызвана при выборе значения */
-    onChange?: (e: SyntheticEvent | KeyboardEvent, value: OPTION | null) => void;
+    onChange?: (e: SyntheticEvent | KeyboardEvent | MouseEvent, value: OPTION | null) => void;
     /** Введённое значение в текстовом поле */
     inputValue?: string;
     /** Функция обратного вызова, которая будет вызвана при вводе значения с клавиатуры */

package/__inner__/esm/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__/esm/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__/esm/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__/esm/components/DataList/types.d.ts

@@ -12,7 +12,7 @@ export type DataListPayload<MULTIPLE extends boolean> = {
     name?: string;
     value: DataListSelected<MULTIPLE>;
 };
-export type DataListOnSelect<MULTIPLE extends boolean> = (event: SyntheticEvent | KeyboardEvent, payload: DataListPayload<MULTIPLE>) => void;
+export type DataListOnSelect<MULTIPLE extends boolean> = (event: SyntheticEvent | KeyboardEvent | MouseEvent, payload: DataListPayload<MULTIPLE>) => void;
 export type DataListBaseProps<MULTIPLE extends boolean = false> = {
     /** Имя списка */
     name?: string;

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

@@ -11,6 +11,7 @@ import { isString } from '../../utils/isString';
 import { polymorphicComponentWithRef } from '../../utils/polymorphicComponentWithRef';
 import { setRef } from '../../utils/setRef';
 import { FieldControl } from '../FieldControl';
+import { FieldHint } from '../FieldHint';
 import { FieldInput } from '../FieldInput';
 import { Fieldset } from '../Fieldset';
 import { Stack } from '../Stack';
@@ -23,7 +24,7 @@ export var InputOTP = polymorphicComponentWithRef(function (inProps, ref) {
         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 _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, hint = props.hint, 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", "hint"]);
     var _f = __read(useState(null), 2), focusedInputIndex = _f[0], setFocusedInputIndex = _f[1];
     var _g = __read(useControlled({
         value: isString(value) ? valueToArray(value) : value,
@@ -97,81 +98,83 @@ export var InputOTP = polymorphicComponentWithRef(function (inProps, ref) {
     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();
+        }, [className]), direction: "column" }, other, { ref: ref }),
+        React.createElement(Stack, { className: cnInputOTP('Inputs'), gap: INPUT_OTP_SPACING_BY_SIZE[size] }, 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.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))));
-    })));
+                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))));
+        })),
+        React.createElement(FieldHint, { className: cnInputOTP('Hint'), size: "l", disabled: disabled, error: error }, hint)));
 });
 InputOTP.displayName = 'InputOTP';

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

@@ -1,16 +1,21 @@
 export var 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); },
 };
 export var INPUT_OTP_MASK_PRESET = {
     PASSWORD: '•',
 };
 export var 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__/esm/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__/esm/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__/esm/components/Select/Select.css

@@ -79,10 +79,19 @@
       }
 
   .Select-RenderLeft,
-  .Select-RenderRight {
+  .Select-RenderRight_nonInteractive {
     pointer-events: none;
   }
 
+  .Select-ClearIcon {
+    visibility: hidden;
+    transition: visibility var(--transition-default);
+  }
+
+  .Select-ClearIcon_visibility {
+      visibility: visible;
+    }
+
   .Select-DropDownIcon {
     display: flex;
     align-items: center;

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

@@ -1,4 +1,3 @@
 import './Select.css';
 import type { SelectComponent } from './types';
-export declare const cnSelect: import("@bem-react/classname").ClassNameFormatter;
 export declare const Select: SelectComponent;

package/__inner__/esm/components/Select/Select.js

@@ -1,39 +1,46 @@
 import { __assign, __read, __rest, __spreadArray } from "tslib";
 import './Select.css';
 import React, { Children, forwardRef, isValidElement, useEffect, useRef, } from 'react';
+import { logger } from '@ozen-ui/logger';
 import { isFragment } from 'react-is';
 import { useControlled } from '../../hooks/useControlled';
+import { useDevEffect } from '../../hooks/useDevEffect';
 import { useMultiRef } from '../../hooks/useMultiRef';
 import { useThemeProps } from '../../hooks/useThemeProps';
-import { cn } from '../../utils/classname';
+import { isArray, isNotNil } from '../../utils';
 import { isKeys } from '../../utils/isKeys';
 import { isString } from '../../utils/isString';
 import { DataList, DataListOption } from '../DataList';
 import { SelectInput } from './components';
-import { SELECT_DEFAULT_AUTO_FOCUS, SELECT_DEFAULT_DEFAULT_OPEN, SELECT_DEFAULT_DISABLED, SELECT_DEFAULT_FULL_WIDTH, SELECT_DEFAULT_MULTILINE, SELECT_DEFAULT_REQUIRED, SELECT_DEFAULT_SIZE, } from './constants';
+import { SELECT_DEFAULT_AUTO_FOCUS, SELECT_DEFAULT_DEFAULT_OPEN, SELECT_DEFAULT_DISABLED, SELECT_DEFAULT_FULL_WIDTH, SELECT_DEFAULT_RENDER_RIGHT_LAYOUT, SELECT_DEFAULT_MULTILINE, SELECT_DEFAULT_REQUIRED, SELECT_DEFAULT_SIZE, SELECT_DEFAULT_SHOW_CLEAR_BUTTON, SELECT_DEFAULT_ERROR, } from './constants';
 import { isMultipleLabel, isMultipleParams, isNotMultipleLabel, isNotMultipleParams, } from './helpers';
-export var cnSelect = cn('Select');
+import { SelectContext } from './SelectContext';
 var SelectRender = function (inProps, ref) {
     var props = useThemeProps({
         props: inProps,
         name: 'Select',
     });
-    var _a = props.size, size = _a === void 0 ? SELECT_DEFAULT_SIZE : _a, _b = props.autoFocus, autoFocus = _b === void 0 ? SELECT_DEFAULT_AUTO_FOCUS : _b, _c = props.fullWidth, fullWidth = _c === void 0 ? SELECT_DEFAULT_FULL_WIDTH : _c, _d = props.disabled, disabled = _d === void 0 ? SELECT_DEFAULT_DISABLED : _d, _e = props.required, required = _e === void 0 ? SELECT_DEFAULT_REQUIRED : _e, _f = props.multiline, multiline = _f === void 0 ? SELECT_DEFAULT_MULTILINE : _f, _g = props.defaultOpen, defaultOpen = _g === void 0 ? SELECT_DEFAULT_DEFAULT_OPEN : _g, valueProp = props.value, defaultValue = props.defaultValue, onChange = props.onChange, renderValueProp = props.renderValue, children = props.children, onClick = props.onClick, onKeyDown = props.onKeyDown, menuProps = props.menuProps, dataListPropsProp = props.dataListProps, bodyProps = props.bodyProps, bodyRefProp = props.bodyRef, onCloseProp = props.onClose, onOpenProp = props.onOpen, openProp = props.open, multiple = props.multiple, other = __rest(props, ["size", "autoFocus", "fullWidth", "disabled", "required", "multiline", "defaultOpen", "value", "defaultValue", "onChange", "renderValue", "children", "onClick", "onKeyDown", "menuProps", "dataListProps", "bodyProps", "bodyRef", "onClose", "onOpen", "open", "multiple"]);
+    var _a = props.size, size = _a === void 0 ? SELECT_DEFAULT_SIZE : _a, _b = props.autoFocus, autoFocus = _b === void 0 ? SELECT_DEFAULT_AUTO_FOCUS : _b, _c = props.fullWidth, fullWidth = _c === void 0 ? SELECT_DEFAULT_FULL_WIDTH : _c, _d = props.disabled, disabled = _d === void 0 ? SELECT_DEFAULT_DISABLED : _d, _e = props.required, required = _e === void 0 ? SELECT_DEFAULT_REQUIRED : _e, _f = props.multiline, multiline = _f === void 0 ? SELECT_DEFAULT_MULTILINE : _f, _g = props.defaultOpen, defaultOpen = _g === void 0 ? SELECT_DEFAULT_DEFAULT_OPEN : _g, _h = props.renderRightLayout, renderRightLayout = _h === void 0 ? SELECT_DEFAULT_RENDER_RIGHT_LAYOUT : _h, valueProp = props.value, defaultValue = props.defaultValue, onChange = props.onChange, renderValueProp = props.renderValue, children = props.children, onClick = props.onClick, onKeyDown = props.onKeyDown, menuProps = props.menuProps, dataListPropsProp = props.dataListProps, bodyProps = props.bodyProps, bodyRefProp = props.bodyRef, onCloseProp = props.onClose, onOpenProp = props.onOpen, openProp = props.open, multiple = props.multiple, _j = props.showClearButton, showClearButton = _j === void 0 ? SELECT_DEFAULT_SHOW_CLEAR_BUTTON : _j, renderLeft = props.renderLeft, renderRight = props.renderRight, onClearProp = props.onClear, clearText = props.clearText, _k = props.error, error = _k === void 0 ? SELECT_DEFAULT_ERROR : _k, other = __rest(props, ["size", "autoFocus", "fullWidth", "disabled", "required", "multiline", "defaultOpen", "renderRightLayout", "value", "defaultValue", "onChange", "renderValue", "children", "onClick", "onKeyDown", "menuProps", "dataListProps", "bodyProps", "bodyRef", "onClose", "onOpen", "open", "multiple", "showClearButton", "renderLeft", "renderRight", "onClear", "clearText", "error"]);
+    useDevEffect(function () {
+        if (renderRightLayout.length !== new Set(renderRightLayout).size) {
+            logger.error("\u0412 renderRightLayout [".concat(renderRightLayout.map(function (element) { return "\"".concat(element, "\""); }).join(', '), "] \u0435\u0441\u0442\u044C \u0434\u0443\u0431\u043B\u0438\u0440\u0443\u044E\u0449\u0438\u0435 \u044D\u043B\u0435\u043C\u0435\u043D\u0442\u044B, \u043F\u0435\u0440\u0435\u043F\u0440\u043E\u0432\u0435\u0440\u044C\u0442\u0435 \u043F\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0435\u043C\u044B\u0435 \u0434\u0430\u043D\u043D\u044B\u0435."));
+        }
+    }, [renderRightLayout]);
     var bodyInnerRef = useRef(null);
     var bodyRef = useMultiRef([(bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.ref) || bodyRefProp, bodyInnerRef]);
     var dataListProps = dataListPropsProp || menuProps;
-    var _h = __read(useControlled({
+    var _l = __read(useControlled({
         value: valueProp,
         defaultValue: defaultValue,
         name: 'Select',
         state: 'value',
-    }), 2), valueState = _h[0], setValueState = _h[1];
-    var _j = __read(useControlled({
+    }), 2), valueState = _l[0], setValueState = _l[1];
+    var _m = __read(useControlled({
         value: openProp,
         defaultValue: defaultOpen,
         name: 'Select',
         state: 'open',
-    }), 2), open = _j[0], setOpen = _j[1];
+    }), 2), open = _m[0], setOpen = _m[1];
     var currentLabel;
     var isNotSelectOption = function (child) { return !isValidElement(child) || child.type !== DataListOption; };
     var resolvedChildren = isFragment(children)
@@ -122,8 +129,16 @@ var SelectRender = function (inProps, ref) {
             return (params === null || params === void 0 ? void 0 : params.value) || '';
         return '';
     };
+    var onClear = function (event) {
+        setValueState(undefined);
+        onChange === null || onChange === void 0 ? void 0 : onChange(undefined, event);
+        onClearProp === null || onClearProp === void 0 ? void 0 : onClearProp(event);
+    };
     /** Представление значение элемента контроля */
     var renderValue = renderValueProp || renderDefaultValue;
+    var hasValue = isArray(valueState)
+        ? valueState.length > 0
+        : isNotNil(valueState);
     useEffect(function () {
         var _a;
         /** Устанавливает фокус на элементе контроля
@@ -138,8 +153,23 @@ var SelectRender = function (inProps, ref) {
         if (autoFocus)
             (_a = bodyInnerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }, [autoFocus]);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(SelectInput, __assign({ size: size, disabled: disabled, required: required, multiline: multiline, fullWidth: fullWidth }, other, { open: open, value: inputValue(), onClick: handleClick, onKeyDown: handleKeyDown, renderedValue: renderValue({
+    return (React.createElement(SelectContext.Provider, { value: {
+            open: open !== null && open !== void 0 ? open : false,
+            hasValue: hasValue,
+            size: size,
+            disabled: disabled,
+            renderRightLayout: renderRightLayout,
+            showClearButton: showClearButton,
+            fullWidth: fullWidth,
+            required: required,
+            multiline: multiline,
+            onClear: onClear,
+            clearText: clearText !== null && clearText !== void 0 ? clearText : '',
+            renderRight: renderRight,
+            renderLeft: renderLeft,
+            error: error,
+        } },
+        React.createElement(SelectInput, __assign({}, other, { value: inputValue(), onClick: handleClick, onKeyDown: handleKeyDown, renderedValue: renderValue({
                 label: currentLabel,
                 value: valueState,
             }), bodyProps: __assign(__assign({}, bodyProps), { ref: bodyRef }), ref: ref })),

package/__inner__/esm/components/Select/SelectContext.d.ts

@@ -0,0 +1,21 @@
+import type { SelectOnClear, SelectRenderLeft, SelectRenderRight, SelectRenderRightLayout } from './entities';
+import type { SelectPropSize } from './types';
+export type SelectContextValue = {
+    renderRightLayout: SelectRenderRightLayout;
+    size: SelectPropSize;
+    open: boolean;
+    disabled: boolean;
+    hasValue: boolean;
+    onClear: SelectOnClear;
+    renderLeft: SelectRenderLeft;
+    renderRight: SelectRenderRight;
+    clearText: string;
+    showClearButton: boolean;
+    required: boolean;
+    multiline: boolean;
+    fullWidth: boolean;
+    error: boolean;
+};
+export declare const SelectContextDefaultValue: SelectContextValue;
+export declare const SelectContext: import("react").Context<SelectContextValue>;
+export declare const useSelectContext: () => SelectContextValue;

package/__inner__/esm/components/Select/SelectContext.js

@@ -0,0 +1,25 @@
+import { useContext, createContext } from 'react';
+import { isDev } from '../../constants/environment';
+import { SELECT_DEFAULT_RENDER_RIGHT_LAYOUT, SELECT_DEFAULT_SIZE, SELECT_DEFAULT_DEFAULT_OPEN, SELECT_DEFAULT_DISABLED, SELECT_DEFAULT_SHOW_CLEAR_BUTTON, SELECT_DEFAULT_REQUIRED, SELECT_DEFAULT_MULTILINE, SELECT_DEFAULT_FULL_WIDTH, } from './constants';
+export var SelectContextDefaultValue = {
+    renderRightLayout: SELECT_DEFAULT_RENDER_RIGHT_LAYOUT,
+    disabled: SELECT_DEFAULT_DISABLED,
+    size: SELECT_DEFAULT_SIZE,
+    open: SELECT_DEFAULT_DEFAULT_OPEN,
+    hasValue: false,
+    onClear: function () { },
+    clearText: '',
+    renderLeft: undefined,
+    renderRight: undefined,
+    showClearButton: SELECT_DEFAULT_SHOW_CLEAR_BUTTON,
+    required: SELECT_DEFAULT_REQUIRED,
+    multiline: SELECT_DEFAULT_MULTILINE,
+    fullWidth: SELECT_DEFAULT_FULL_WIDTH,
+    error: false,
+};
+export var SelectContext = createContext(SelectContextDefaultValue);
+export var useSelectContext = function () { return useContext(SelectContext); };
+// Именованный провайдер
+if (isDev) {
+    SelectContext.displayName = 'SelectContext';
+}

package/__inner__/esm/components/Select/classNames.d.ts

@@ -0,0 +1 @@
+export declare const cnSelect: import("@bem-react/classname").ClassNameFormatter;

package/__inner__/esm/components/Select/classNames.js

@@ -0,0 +1,2 @@
+import { cn } from '../../utils';
+export var cnSelect = cn('Select');