@ozen-ui/kit 0.76.0 → 0.77.0

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/StepperVertical/StepperVertical.css

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

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

@@ -0,0 +1,18 @@
+import { __assign, __rest } from "tslib";
+import './StepperVertical.css';
+import './modules/StepperVerticalIconIndicator/StepperVerticalIconIndicator.css';
+import './modules/StepperVerticalIndicator/StepperVerticalIndicator.css';
+import './modules/StepperVerticalStep/StepperVerticalStep.css';
+import React from 'react';
+import { useThemeProps } from '../../hooks/useThemeProps';
+import { cn, polymorphicComponentWithRef } from '../../utils';
+import { Stack } from '../Stack';
+import { STEPPER_VERTICAL_DEFAULT_ELLIPSIS, STEPPER_VERTICAL_DEFAULT_TAG, } from './constants';
+import { StepperVerticalContext } from './StepperVerticalContext';
+export var cnStepperVertical = cn('StepperVertical');
+export var StepperVertical = polymorphicComponentWithRef(function (inProps, ref) {
+    var props = useThemeProps({ name: 'StepperVertical', props: inProps });
+    var children = props.children, _a = props.as, as = _a === void 0 ? STEPPER_VERTICAL_DEFAULT_TAG : _a, _b = props.ellipsis, ellipsis = _b === void 0 ? STEPPER_VERTICAL_DEFAULT_ELLIPSIS : _b, className = props.className, fullWidth = props.fullWidth, other = __rest(props, ["children", "as", "ellipsis", "className", "fullWidth"]);
+    return (React.createElement(StepperVerticalContext.Provider, { value: { ellipsis: ellipsis } },
+        React.createElement(Stack, __assign({}, other, { ref: ref, as: as, className: cnStepperVertical('', [className]), direction: "column", display: fullWidth ? 'block' : 'inline' }), children)));
+});

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

@@ -0,0 +1,14 @@
+import { useContext, createContext } from 'react';
+import { isDev } from '../../constants/environment';
+import { STEPPER_VERTICAL_DEFAULT_ELLIPSIS } from './constants';
+export var StepperVerticalContextDefaultValue = {
+    ellipsis: STEPPER_VERTICAL_DEFAULT_ELLIPSIS,
+};
+export var StepperVerticalContext = createContext(StepperVerticalContextDefaultValue);
+export var useStepperVerticalContext = function () {
+    return useContext(StepperVerticalContext);
+};
+// Именованный провайдер
+if (isDev) {
+    StepperVerticalContext.displayName = 'StepperVerticalContext';
+}

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

@@ -0,0 +1,3 @@
+export var STEPPER_VERTICAL_DEFAULT_TAG = 'div';
+export var STEPPER_VERTICAL_DEFAULT_FULL_WIDTH = false;
+export var STEPPER_VERTICAL_DEFAULT_ELLIPSIS = false;

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

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

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

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

package/__inner__/esm/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__/esm/components/StepperVertical/modules/StepperVerticalIconIndicator/StepperVerticalIconIndicator.js

@@ -0,0 +1,21 @@
+import { __assign, __rest } from "tslib";
+import { forwardRef } from 'react';
+import { useThemeProps } from '../../../../hooks/useThemeProps';
+import { cn, renderContent } from '../../../../utils';
+import { useStepperVerticalStepContext } from '../StepperVerticalStep/StepperVerticalStepContext';
+import { STEPPER_VERTICAL_STEP_DEFAULT_ICON_BY_VARIANT } from './constants';
+export var cnStepperVerticalIconIndicator = cn('StepperVerticalIconIndicator');
+export var StepperVerticalIconIndicator = forwardRef(function (inProps, ref) {
+    var props = useThemeProps({
+        props: inProps,
+        name: 'StepperVerticalIconIndicator',
+    });
+    var iconProp = props.icon, className = props.className, other = __rest(props, ["icon", "className"]);
+    var variant = useStepperVerticalStepContext().variant;
+    var icon = iconProp !== null && iconProp !== void 0 ? iconProp : STEPPER_VERTICAL_STEP_DEFAULT_ICON_BY_VARIANT[variant];
+    return renderContent({
+        content: icon,
+        props: __assign(__assign({}, other), { size: 'm', ref: ref, className: cnStepperVerticalIconIndicator({ variant: variant }, [className]) }),
+    });
+});
+StepperVerticalIconIndicator.displayName = 'StepperVerticalIconIndicator';

package/__inner__/esm/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__/esm/components/StepperVertical/modules/StepperVerticalIconIndicator/constants.js

@@ -0,0 +1,9 @@
+import { CheckCircleFilledIcon, ClockFilledIcon, CrossCircleFilledIcon, MinusCircleFilledIcon, WarningCircleFilledIcon, } from '@ozen-ui/icons';
+export var STEPPER_VERTICAL_STEP_DEFAULT_ICON_BY_VARIANT = {
+    refusal: MinusCircleFilledIcon,
+    blocked: CrossCircleFilledIcon,
+    warning: WarningCircleFilledIcon,
+    awaiting: ClockFilledIcon,
+    inProcessing: ClockFilledIcon,
+    success: CheckCircleFilledIcon,
+};

package/__inner__/esm/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__/esm/components/StepperVertical/modules/StepperVerticalIconIndicator/entities/icon.js

@@ -0,0 +1 @@
+export {};

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

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

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

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

package/__inner__/esm/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__/esm/components/StepperVertical/modules/StepperVerticalIconIndicator/index.js

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

package/__inner__/esm/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__/esm/components/StepperVertical/modules/StepperVerticalIconIndicator/types.js

@@ -0,0 +1 @@
+export {};

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

package/__inner__/esm/components/StepperVertical/modules/StepperVerticalIndicator/StepperVerticalIndicator.d.ts

@@ -0,0 +1,3 @@
+import type { StepperVerticalIndicatorBaseProps } from './types';
+export declare const cnStepperVerticalIndicator: import("@bem-react/classname").ClassNameFormatter;
+export declare const StepperVerticalIndicator: import("../../../../utils").PolymorphicComponentWithRef<StepperVerticalIndicatorBaseProps, "div", "as">;

package/__inner__/esm/components/StepperVertical/modules/StepperVerticalIndicator/StepperVerticalIndicator.js

@@ -0,0 +1,20 @@
+import { __assign, __rest } from "tslib";
+import React from 'react';
+import { useThemeProps } from '../../../../hooks/useThemeProps';
+import { cn, polymorphicComponentWithRef } from '../../../../utils';
+import { Stack } from '../../../Stack';
+import { useStepperVerticalStepContext } from '../StepperVerticalStep';
+import { STEPPER_VERTICAL_INDICATOR_DEFAULT_TAG } from './constants';
+export var cnStepperVerticalIndicator = cn('StepperVerticalIndicator');
+export var StepperVerticalIndicator = polymorphicComponentWithRef(function (inProps, ref) {
+    var props = useThemeProps({
+        props: inProps,
+        name: 'StepperVerticalIndicator',
+    });
+    var children = props.children, className = props.className, as = props.as, other = __rest(props, ["children", "className", "as"]);
+    var variant = useStepperVerticalStepContext().variant;
+    var Tag = as !== null && as !== void 0 ? as : STEPPER_VERTICAL_INDICATOR_DEFAULT_TAG;
+    return (React.createElement(Tag, __assign({}, other, { ref: ref, className: cnStepperVerticalIndicator({ variant: variant }, [className]) }),
+        React.createElement(Stack, { className: cnStepperVerticalIndicator('Content'), align: "center", justify: "center" }, children)));
+});
+StepperVerticalIndicator.displayName = 'StepperVerticalIndicator';

package/__inner__/esm/components/StepperVertical/modules/StepperVerticalIndicator/constants.d.ts

@@ -0,0 +1 @@
+export declare const STEPPER_VERTICAL_INDICATOR_DEFAULT_TAG = "div";

package/__inner__/esm/components/StepperVertical/modules/StepperVerticalIndicator/constants.js

@@ -0,0 +1 @@
+export var STEPPER_VERTICAL_INDICATOR_DEFAULT_TAG = 'div';

package/__inner__/esm/components/StepperVertical/modules/StepperVerticalIndicator/index.d.ts

@@ -0,0 +1,3 @@
+export * from './constants';
+export * from './StepperVerticalIndicator';
+export * from './types';

package/__inner__/esm/components/StepperVertical/modules/StepperVerticalIndicator/index.js

@@ -0,0 +1,3 @@
+export * from './constants';
+export * from './StepperVerticalIndicator';
+export * from './types';

package/__inner__/esm/components/StepperVertical/modules/StepperVerticalIndicator/types.d.ts

@@ -0,0 +1,11 @@
+import type { ComponentRef, ElementType, ReactNode } from 'react';
+import type { PolymorphicComponentPropsWithRef } from '../../../../utils';
+import type { STEPPER_VERTICAL_INDICATOR_DEFAULT_TAG } from './constants';
+export type StepperVerticalIndicatorRef<As extends ElementType = typeof STEPPER_VERTICAL_INDICATOR_DEFAULT_TAG> = ComponentRef<As>;
+export type StepperVerticalIndicatorBaseProps = {
+    /** Контент */
+    children: ReactNode;
+    /** Идентификатор компонента для тестов */
+    'data-testid'?: string;
+};
+export type StepperVerticalIndicatorProps<As extends ElementType = typeof STEPPER_VERTICAL_INDICATOR_DEFAULT_TAG> = PolymorphicComponentPropsWithRef<StepperVerticalIndicatorBaseProps, As>;

package/__inner__/esm/components/StepperVertical/modules/StepperVerticalIndicator/types.js

@@ -0,0 +1 @@
+export {};