@ozen-ui/kit 0.75.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/StepperVertical/package.json

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

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

@@ -1,42 +1,49 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Select = exports.cnSelect = void 0;
+exports.Select = void 0;
 var tslib_1 = require("tslib");
 require("./Select.css");
 var react_1 = tslib_1.__importStar(require("react"));
+var logger_1 = require("@ozen-ui/logger");
 var react_is_1 = require("react-is");
 var useControlled_1 = require("../../hooks/useControlled");
+var useDevEffect_1 = require("../../hooks/useDevEffect");
 var useMultiRef_1 = require("../../hooks/useMultiRef");
 var useThemeProps_1 = require("../../hooks/useThemeProps");
-var classname_1 = require("../../utils/classname");
+var utils_1 = require("../../utils");
 var isKeys_1 = require("../../utils/isKeys");
 var isString_1 = require("../../utils/isString");
 var DataList_1 = require("../DataList");
 var components_1 = require("./components");
 var constants_1 = require("./constants");
 var helpers_1 = require("./helpers");
-exports.cnSelect = (0, classname_1.cn)('Select');
+var SelectContext_1 = require("./SelectContext");
 var SelectRender = function (inProps, ref) {
     var props = (0, useThemeProps_1.useThemeProps)({
         props: inProps,
         name: 'Select',
     });
-    var _a = props.size, size = _a === void 0 ? constants_1.SELECT_DEFAULT_SIZE : _a, _b = props.autoFocus, autoFocus = _b === void 0 ? constants_1.SELECT_DEFAULT_AUTO_FOCUS : _b, _c = props.fullWidth, fullWidth = _c === void 0 ? constants_1.SELECT_DEFAULT_FULL_WIDTH : _c, _d = props.disabled, disabled = _d === void 0 ? constants_1.SELECT_DEFAULT_DISABLED : _d, _e = props.required, required = _e === void 0 ? constants_1.SELECT_DEFAULT_REQUIRED : _e, _f = props.multiline, multiline = _f === void 0 ? constants_1.SELECT_DEFAULT_MULTILINE : _f, _g = props.defaultOpen, defaultOpen = _g === void 0 ? constants_1.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 = tslib_1.__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 ? constants_1.SELECT_DEFAULT_SIZE : _a, _b = props.autoFocus, autoFocus = _b === void 0 ? constants_1.SELECT_DEFAULT_AUTO_FOCUS : _b, _c = props.fullWidth, fullWidth = _c === void 0 ? constants_1.SELECT_DEFAULT_FULL_WIDTH : _c, _d = props.disabled, disabled = _d === void 0 ? constants_1.SELECT_DEFAULT_DISABLED : _d, _e = props.required, required = _e === void 0 ? constants_1.SELECT_DEFAULT_REQUIRED : _e, _f = props.multiline, multiline = _f === void 0 ? constants_1.SELECT_DEFAULT_MULTILINE : _f, _g = props.defaultOpen, defaultOpen = _g === void 0 ? constants_1.SELECT_DEFAULT_DEFAULT_OPEN : _g, _h = props.renderRightLayout, renderRightLayout = _h === void 0 ? constants_1.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 ? constants_1.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 ? constants_1.SELECT_DEFAULT_ERROR : _k, other = tslib_1.__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"]);
+    (0, useDevEffect_1.useDevEffect)(function () {
+        if (renderRightLayout.length !== new Set(renderRightLayout).size) {
+            logger_1.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 = (0, react_1.useRef)(null);
     var bodyRef = (0, useMultiRef_1.useMultiRef)([(bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.ref) || bodyRefProp, bodyInnerRef]);
     var dataListProps = dataListPropsProp || menuProps;
-    var _h = tslib_1.__read((0, useControlled_1.useControlled)({
+    var _l = tslib_1.__read((0, useControlled_1.useControlled)({
         value: valueProp,
         defaultValue: defaultValue,
         name: 'Select',
         state: 'value',
-    }), 2), valueState = _h[0], setValueState = _h[1];
-    var _j = tslib_1.__read((0, useControlled_1.useControlled)({
+    }), 2), valueState = _l[0], setValueState = _l[1];
+    var _m = tslib_1.__read((0, useControlled_1.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 !(0, react_1.isValidElement)(child) || child.type !== DataList_1.DataListOption; };
     var resolvedChildren = (0, react_is_1.isFragment)(children)
@@ -125,8 +132,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 = (0, utils_1.isArray)(valueState)
+        ? valueState.length > 0
+        : (0, utils_1.isNotNil)(valueState);
     (0, react_1.useEffect)(function () {
         var _a;
         /** Устанавливает фокус на элементе контроля
@@ -141,8 +156,23 @@ var SelectRender = function (inProps, ref) {
         if (autoFocus)
             (_a = bodyInnerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }, [autoFocus]);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(components_1.SelectInput, tslib_1.__assign({ size: size, disabled: disabled, required: required, multiline: multiline, fullWidth: fullWidth }, other, { open: open, value: inputValue(), onClick: handleClick, onKeyDown: handleKeyDown, renderedValue: renderValue({
+    return (react_1.default.createElement(SelectContext_1.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_1.default.createElement(components_1.SelectInput, tslib_1.__assign({}, other, { value: inputValue(), onClick: handleClick, onKeyDown: handleKeyDown, renderedValue: renderValue({
                 label: currentLabel,
                 value: valueState,
             }), bodyProps: tslib_1.__assign(tslib_1.__assign({}, bodyProps), { ref: bodyRef }), ref: ref })),

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

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSelectContext = exports.SelectContext = exports.SelectContextDefaultValue = void 0;
+var react_1 = require("react");
+var environment_1 = require("../../constants/environment");
+var constants_1 = require("./constants");
+exports.SelectContextDefaultValue = {
+    renderRightLayout: constants_1.SELECT_DEFAULT_RENDER_RIGHT_LAYOUT,
+    disabled: constants_1.SELECT_DEFAULT_DISABLED,
+    size: constants_1.SELECT_DEFAULT_SIZE,
+    open: constants_1.SELECT_DEFAULT_DEFAULT_OPEN,
+    hasValue: false,
+    onClear: function () { },
+    clearText: '',
+    renderLeft: undefined,
+    renderRight: undefined,
+    showClearButton: constants_1.SELECT_DEFAULT_SHOW_CLEAR_BUTTON,
+    required: constants_1.SELECT_DEFAULT_REQUIRED,
+    multiline: constants_1.SELECT_DEFAULT_MULTILINE,
+    fullWidth: constants_1.SELECT_DEFAULT_FULL_WIDTH,
+    error: false,
+};
+exports.SelectContext = (0, react_1.createContext)(exports.SelectContextDefaultValue);
+var useSelectContext = function () { return (0, react_1.useContext)(exports.SelectContext); };
+exports.useSelectContext = useSelectContext;
+// Именованный провайдер
+if (environment_1.isDev) {
+    exports.SelectContext.displayName = 'SelectContext';
+}

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

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