@ozen-ui/kit 0.75.0 → 0.77.0

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cnSelect = void 0;
+var utils_1 = require("../../utils");
+exports.cnSelect = (0, utils_1.cn)('Select');

package/__inner__/cjs/components/Select/components/SelectInput/SelectInput.js

@@ -4,20 +4,20 @@ exports.SelectInput = void 0;
 var tslib_1 = require("tslib");
 require("../../Select.css");
 var react_1 = tslib_1.__importStar(require("react"));
-var classnames_1 = require("@bem-react/classnames");
-var icons_1 = require("@ozen-ui/icons");
 var useBoolean_1 = require("../../../../hooks/useBoolean");
 var FieldControl_1 = require("../../../FieldControl");
 var FieldHint_1 = require("../../../FieldHint");
 var FieldIcon_1 = require("../../../FieldIcon");
 var FieldLabel_1 = require("../../../FieldLabel");
 var Fieldset_1 = require("../../../Fieldset");
-var constants_1 = require("../../constants");
-var index_1 = require("../../index");
+var classNames_1 = require("../../classNames");
+var SelectContext_1 = require("../../SelectContext");
 var SelectInputContextConsumer_1 = require("../SelectInputContextConsumer");
+var SelectInputRenderRight_1 = require("../SelectInputRenderRight");
 exports.SelectInput = (0, react_1.forwardRef)(function (_a, ref) {
-    var _b = _a.size, size = _b === void 0 ? constants_1.SELECT_DEFAULT_SIZE : _b, _c = _a.multiline, multiline = _c === void 0 ? constants_1.SELECT_DEFAULT_MULTILINE : _c, open = _a.open, label = _a.label, error = _a.error, id = _a.id, name = _a.name, renderLeft = _a.renderLeft, renderRight = _a.renderRight, renderedValue = _a.renderedValue, fullWidth = _a.fullWidth, disabled = _a.disabled, hint = _a.hint, required = _a.required, className = _a.className, inputProps = _a.inputProps, valueProp = _a.value, placeholderProp = _a.placeholder, defaultValue = _a.defaultValue, onFocus = _a.onFocus, onBlur = _a.onBlur, onClick = _a.onClick, onKeyDown = _a.onKeyDown, labelProps = _a.labelProps, fieldProps = _a.fieldProps, hintProps = _a.hintProps, labelRef = _a.labelRef, inputRef = _a.inputRef, fieldRef = _a.fieldRef, bodyProps = _a.bodyProps, other = tslib_1.__rest(_a, ["size", "multiline", "open", "label", "error", "id", "name", "renderLeft", "renderRight", "renderedValue", "fullWidth", "disabled", "hint", "required", "className", "inputProps", "value", "placeholder", "defaultValue", "onFocus", "onBlur", "onClick", "onKeyDown", "labelProps", "fieldProps", "hintProps", "labelRef", "inputRef", "fieldRef", "bodyProps"]);
-    var _d = tslib_1.__read((0, useBoolean_1.useBoolean)(), 2), focused = _d[0], _e = _d[1], on = _e.on, off = _e.off;
+    var label = _a.label, id = _a.id, name = _a.name, renderedValue = _a.renderedValue, hint = _a.hint, className = _a.className, inputProps = _a.inputProps, valueProp = _a.value, placeholderProp = _a.placeholder, defaultValue = _a.defaultValue, onFocus = _a.onFocus, onBlur = _a.onBlur, onClick = _a.onClick, onKeyDown = _a.onKeyDown, labelProps = _a.labelProps, fieldProps = _a.fieldProps, hintProps = _a.hintProps, labelRef = _a.labelRef, inputRef = _a.inputRef, fieldRef = _a.fieldRef, bodyProps = _a.bodyProps, other = tslib_1.__rest(_a, ["label", "id", "name", "renderedValue", "hint", "className", "inputProps", "value", "placeholder", "defaultValue", "onFocus", "onBlur", "onClick", "onKeyDown", "labelProps", "fieldProps", "hintProps", "labelRef", "inputRef", "fieldRef", "bodyProps"]);
+    var _b = (0, SelectContext_1.useSelectContext)(), open = _b.open, required = _b.required, disabled = _b.disabled, fullWidth = _b.fullWidth, renderLeft = _b.renderLeft, multiline = _b.multiline, size = _b.size, error = _b.error;
+    var _c = tslib_1.__read((0, useBoolean_1.useBoolean)(), 2), focused = _c[0], _d = _c[1], on = _d.on, off = _d.off;
     var filled = !!valueProp || valueProp === 0;
     var handleFocus = (0, react_1.useCallback)(function (e) {
         on();
@@ -27,16 +27,15 @@ exports.SelectInput = (0, react_1.forwardRef)(function (_a, ref) {
         off();
         onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
     }, [onBlur]);
-    return (react_1.default.createElement(FieldControl_1.FieldControl, tslib_1.__assign({ size: size, error: error, filled: filled, focused: focused, disabled: disabled, required: required, fullWidth: fullWidth }, other, { ref: ref, className: (0, index_1.cnSelect)({ multiline: multiline }, [className]) }),
-        react_1.default.createElement("div", tslib_1.__assign({ role: "button", "aria-expanded": open, "aria-haspopup": "listbox" }, bodyProps, { onClick: onClick, onBlur: handleBlur, onKeyDown: onKeyDown, onFocus: handleFocus, tabIndex: disabled ? -1 : 0, className: (0, index_1.cnSelect)('Body', [bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.className]) }),
-            react_1.default.createElement(FieldIcon_1.FieldIcon, { icon: renderLeft, className: (0, index_1.cnSelect)('RenderLeft') }),
-            react_1.default.createElement("div", { className: (0, index_1.cnSelect)('FieldContainer') },
-                react_1.default.createElement("div", { className: (0, index_1.cnSelect)('HiddenLabel'), "aria-hidden": true }, label),
-                react_1.default.createElement(FieldLabel_1.FieldLabel, tslib_1.__assign({}, labelProps, { className: (0, index_1.cnSelect)('Label', [labelProps === null || labelProps === void 0 ? void 0 : labelProps.className]), ref: (labelProps === null || labelProps === void 0 ? void 0 : labelProps.ref) || labelRef }), label),
+    return (react_1.default.createElement(FieldControl_1.FieldControl, tslib_1.__assign({ size: size, error: error, filled: filled, focused: focused, disabled: disabled, required: required, fullWidth: fullWidth }, other, { ref: ref, className: (0, classNames_1.cnSelect)({ multiline: multiline }, [className]) }),
+        react_1.default.createElement("div", tslib_1.__assign({ role: "button", "aria-expanded": open, "aria-haspopup": "listbox" }, bodyProps, { onClick: onClick, onBlur: handleBlur, onKeyDown: onKeyDown, onFocus: handleFocus, tabIndex: disabled ? -1 : 0, className: (0, classNames_1.cnSelect)('Body', [bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.className]) }),
+            react_1.default.createElement(FieldIcon_1.FieldIcon, { icon: renderLeft, className: (0, classNames_1.cnSelect)('RenderLeft') }),
+            react_1.default.createElement("div", { className: (0, classNames_1.cnSelect)('FieldContainer') },
+                react_1.default.createElement("div", { className: (0, classNames_1.cnSelect)('HiddenLabel'), "aria-hidden": true }, label),
+                react_1.default.createElement(FieldLabel_1.FieldLabel, tslib_1.__assign({}, labelProps, { className: (0, classNames_1.cnSelect)('Label', [labelProps === null || labelProps === void 0 ? void 0 : labelProps.className]), ref: (labelProps === null || labelProps === void 0 ? void 0 : labelProps.ref) || labelRef }), label),
                 react_1.default.createElement(SelectInputContextConsumer_1.SelectInputContextConsumer, { id: id, name: name, value: valueProp, fieldProps: fieldProps, inputProps: inputProps, defaultValue: defaultValue, renderedValue: renderedValue, placeholder: placeholderProp, fieldRef: (fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.ref) || fieldRef, inputRef: (inputProps === null || inputProps === void 0 ? void 0 : inputProps.ref) || inputRef })),
-            react_1.default.createElement(FieldIcon_1.FieldIcon, { icon: renderRight, className: (0, index_1.cnSelect)('RenderRight') }),
-            react_1.default.createElement(FieldIcon_1.FieldIcon, { icon: icons_1.ChevronDownIcon, className: (0, classnames_1.classnames)((0, index_1.cnSelect)('RenderRight'), (0, index_1.cnSelect)('DropDownIcon', { open: open })) }),
-            react_1.default.createElement(Fieldset_1.Fieldset, { className: (0, index_1.cnSelect)('Fieldset') })),
+            react_1.default.createElement(SelectInputRenderRight_1.SelectInputRenderRight, null),
+            react_1.default.createElement(Fieldset_1.Fieldset, { className: (0, classNames_1.cnSelect)('Fieldset') })),
         react_1.default.createElement(FieldHint_1.FieldHint, tslib_1.__assign({}, hintProps), hint)));
 });
 exports.SelectInput.displayName = 'SelectInput';

package/__inner__/cjs/components/Select/components/SelectInput/types.d.ts

@@ -1,10 +1,7 @@
 import type { ComponentPropsWithRef, ComponentRef, ReactNode, Ref } from 'react';
 import type { ExtendableComponentPropsWithRef } from '../../../../types/ExtendableComponentPropsWithRef';
-import type { FormElementSizeVariant } from '../../../../types/FormElementSizeVariant';
 import type { FieldHintProps } from '../../../FieldHint';
-import type { FieldIconProps } from '../../../FieldIcon';
 import type { FieldLabelProps } from '../../../FieldLabel';
-export type SelectInputSizeVariant = FormElementSizeVariant;
 type LabelProps = FieldLabelProps;
 type HintProps = FieldHintProps;
 type InputProps = ComponentPropsWithRef<'input'> & {
@@ -46,31 +43,14 @@ export type SelectInputProps = ExtendableComponentPropsWithRef<{
     name?: string;
     /** Лейбл */
     label?: string;
-    /** Размер компонента */
-    size?: SelectInputSizeVariant;
     /** Подсказка. Отображается, когда вариант не выбран */
     placeholder?: string;
     /** Если `true` устанавливает автофокус */
     autoFocus?: boolean;
-    /** Если `true` переводит поле в состояние ошибки */
-    error?: boolean;
-    /** Если `true` растягивает поле на всю ширину */
-    fullWidth?: boolean;
     /** Дополнительное описание к полю */
     hint?: string | null | undefined;
-    /** Если `true` делает элемент неактивным */
-    disabled?: boolean;
-    /** Если `true` делает элемент обязательным к заполнению */
-    required?: boolean;
     /** Если `true` отключает обводку */
     disableStroke?: boolean;
-    /** Если `true` предотвращает сокращение текста в значении и
-     * задает гибкую высоту контейнера компонента */
-    multiline?: boolean;
-    /** Текст или иконка слева */
-    renderLeft?: FieldIconProps['icon'];
-    /** Текст или иконка справа */
-    renderRight?: FieldIconProps['icon'];
     /** Значение для отображения */
     renderedValue?: ReactNode;
     /** Выбранное значение */
@@ -87,8 +67,6 @@ export type SelectInputProps = ExtendableComponentPropsWithRef<{
     bodyProps?: BodyProps;
     /** Cвойства FieldHint */
     hintProps?: Omit<HintProps, 'children'>;
-    /** Признак раскрытого списка */
-    open?: boolean;
     /** Идентификатор компонента для тестов */
     'data-testid'?: string;
     /** Содержимое компонента */

package/__inner__/cjs/components/Select/components/SelectInputContextConsumer/SelectInputContextConsumer.js

@@ -4,7 +4,7 @@ exports.SelectInputContextConsumer = void 0;
 var tslib_1 = require("tslib");
 var react_1 = tslib_1.__importDefault(require("react"));
 var FieldControl_1 = require("../../../FieldControl");
-var index_1 = require("../../index");
+var classNames_1 = require("../../classNames");
 var SelectInputContextConsumer = function (_a) {
     var id = _a.id, name = _a.name, _b = _a.value, valueProp = _b === void 0 ? '' : _b, placeholderProp = _a.placeholder, defaultValue = _a.defaultValue, inputProps = _a.inputProps, inputRef = _a.inputRef, fieldRef = _a.fieldRef, fieldProps = _a.fieldProps, renderedValue = _a.renderedValue;
     var context = (0, FieldControl_1.useFieldControl)();
@@ -13,9 +13,9 @@ var SelectInputContextConsumer = function (_a) {
     var hasLabel = !!label;
     var placeholder = (focused || !hasLabel) && !valueProp && (react_1.default.createElement("span", null, placeholderProp));
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", tslib_1.__assign({}, fieldProps, { className: (0, index_1.cnSelect)('Field', { filled: filled, asPlaceholder: !!placeholder }, [
+        react_1.default.createElement("div", tslib_1.__assign({}, fieldProps, { className: (0, classNames_1.cnSelect)('Field', { filled: filled, asPlaceholder: !!placeholder }, [
                 fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.className,
             ]), ref: fieldRef }), placeholder || renderedValue),
-        react_1.default.createElement("input", tslib_1.__assign({ id: id, name: name, defaultValue: defaultValue, value: valueProp, disabled: disabled, required: required, tabIndex: -1, "aria-hidden": true, readOnly: true }, inputProps, { className: (0, index_1.cnSelect)('Input', [inputProps === null || inputProps === void 0 ? void 0 : inputProps.className]), ref: inputRef }))));
+        react_1.default.createElement("input", tslib_1.__assign({ id: id, name: name, defaultValue: defaultValue, value: valueProp, disabled: disabled, required: required, tabIndex: -1, "aria-hidden": true, readOnly: true }, inputProps, { className: (0, classNames_1.cnSelect)('Input', [inputProps === null || inputProps === void 0 ? void 0 : inputProps.className]), ref: inputRef }))));
 };
 exports.SelectInputContextConsumer = SelectInputContextConsumer;

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const SelectInputRenderRight: () => React.JSX.Element;

package/__inner__/cjs/components/Select/components/SelectInputRenderRight/SelectInputRenderRight.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectInputRenderRight = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+var classnames_1 = require("@bem-react/classnames");
+var icons_1 = require("@ozen-ui/icons");
+var FieldControl_1 = require("../../../FieldControl");
+var FieldIcon_1 = require("../../../FieldIcon");
+var IconButtonNext_1 = require("../../../IconButtonNext");
+var classNames_1 = require("../../classNames");
+var SelectContext_1 = require("../../SelectContext");
+var SelectInputRenderRight = function () {
+    var _a = tslib_1.__read((0, FieldControl_1.useFieldControl)(), 1), _b = _a[0], focused = _b.focused, hovered = _b.hovered;
+    var _c = (0, SelectContext_1.useSelectContext)(), hasValue = _c.hasValue, open = _c.open, onClear = _c.onClear, renderRight = _c.renderRight, clearText = _c.clearText, renderRightLayout = _c.renderRightLayout, showClearButton = _c.showClearButton, size = _c.size;
+    var isVisibleClearButton = !!(hovered || open || focused) && hasValue;
+    var clearButton = (react_1.default.createElement(IconButtonNext_1.IconButton, { key: "clear", tabIndex: -1, size: size, variant: "function", icon: icons_1.CrossIcon, title: clearText, "aria-label": clearText, onClick: function (event) {
+            event.preventDefault();
+            event.stopPropagation();
+            onClear === null || onClear === void 0 ? void 0 : onClear(event);
+        }, className: (0, classnames_1.classnames)((0, classNames_1.cnSelect)('RenderRight'), (0, classNames_1.cnSelect)('ClearIcon', {
+            visibility: isVisibleClearButton,
+        })), compressed: true }));
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        showClearButton && !isVisibleClearButton && clearButton,
+        renderRightLayout.map(function (element) {
+            if (element === 'suffix') {
+                return (react_1.default.createElement(FieldIcon_1.FieldIcon, { key: element, icon: renderRight, className: (0, classnames_1.classnames)((0, classNames_1.cnSelect)('RenderRight', { nonInteractive: true }), (0, classNames_1.cnSelect)('Suffix')) }));
+            }
+            if (element === 'clear') {
+                if (!isVisibleClearButton || !showClearButton) {
+                    return null;
+                }
+                return clearButton;
+            }
+            if (element === 'chevron') {
+                return (react_1.default.createElement(FieldIcon_1.FieldIcon, { key: element, icon: icons_1.ChevronDownIcon, className: (0, classnames_1.classnames)((0, classNames_1.cnSelect)('RenderRight', { nonInteractive: true }), (0, classNames_1.cnSelect)('DropDownIcon', { open: open })) }));
+            }
+            throw new Error("\u042D\u043B\u0435\u043C\u0435\u043D\u0442 \"".concat(element, "\" \u043D\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0432 renderRight."));
+        })));
+};
+exports.SelectInputRenderRight = SelectInputRenderRight;

package/__inner__/cjs/components/Select/components/SelectInputRenderRight/index.d.ts

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

package/__inner__/cjs/components/Select/components/SelectInputRenderRight/index.js

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

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

@@ -1 +1,2 @@
 export * from './SelectInput';
+export * from './SelectInputRenderRight';

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

@@ -2,3 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./SelectInput"), exports);
+tslib_1.__exportStar(require("./SelectInputRenderRight"), exports);

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

@@ -5,3 +5,6 @@ export declare const SELECT_DEFAULT_REQUIRED = false;
 export declare const SELECT_DEFAULT_MULTILINE = false;
 export declare const SELECT_DEFAULT_DEFAULT_OPEN = false;
 export declare const SELECT_DEFAULT_SIZE = "m";
+export declare const SELECT_DEFAULT_ERROR = false;
+export declare const SELECT_DEFAULT_RENDER_RIGHT_LAYOUT: ("clear" | "suffix" | "chevron")[];
+export declare const SELECT_DEFAULT_SHOW_CLEAR_BUTTON = false;

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SELECT_DEFAULT_SIZE = exports.SELECT_DEFAULT_DEFAULT_OPEN = exports.SELECT_DEFAULT_MULTILINE = exports.SELECT_DEFAULT_REQUIRED = exports.SELECT_DEFAULT_DISABLED = exports.SELECT_DEFAULT_FULL_WIDTH = exports.SELECT_DEFAULT_AUTO_FOCUS = void 0;
+exports.SELECT_DEFAULT_SHOW_CLEAR_BUTTON = exports.SELECT_DEFAULT_RENDER_RIGHT_LAYOUT = exports.SELECT_DEFAULT_ERROR = exports.SELECT_DEFAULT_SIZE = exports.SELECT_DEFAULT_DEFAULT_OPEN = exports.SELECT_DEFAULT_MULTILINE = exports.SELECT_DEFAULT_REQUIRED = exports.SELECT_DEFAULT_DISABLED = exports.SELECT_DEFAULT_FULL_WIDTH = exports.SELECT_DEFAULT_AUTO_FOCUS = void 0;
 exports.SELECT_DEFAULT_AUTO_FOCUS = false;
 exports.SELECT_DEFAULT_FULL_WIDTH = false;
 exports.SELECT_DEFAULT_DISABLED = false;
@@ -8,3 +8,10 @@ exports.SELECT_DEFAULT_REQUIRED = false;
 exports.SELECT_DEFAULT_MULTILINE = false;
 exports.SELECT_DEFAULT_DEFAULT_OPEN = false;
 exports.SELECT_DEFAULT_SIZE = 'm';
+exports.SELECT_DEFAULT_ERROR = false;
+exports.SELECT_DEFAULT_RENDER_RIGHT_LAYOUT = [
+    'suffix',
+    'clear',
+    'chevron',
+];
+exports.SELECT_DEFAULT_SHOW_CLEAR_BUTTON = false;

package/__inner__/cjs/components/Select/entities/index.d.ts

@@ -0,0 +1,2 @@
+export * from './onClear';
+export * from './render';

package/__inner__/cjs/components/Select/entities/index.js

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

package/__inner__/cjs/components/Select/entities/onClear.d.ts

@@ -0,0 +1,2 @@
+import type { MouseEvent } from 'react';
+export type SelectOnClear = (event: MouseEvent<HTMLElement>) => void;

package/__inner__/cjs/components/Select/entities/onClear.js

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

package/__inner__/cjs/components/Select/entities/render.d.ts

@@ -0,0 +1,6 @@
+import type { FieldIconProps } from '../../FieldIcon';
+export declare const selectRenderRightElement: readonly ["suffix", "clear", "chevron"];
+export type SelectRenderRightElement = (typeof selectRenderRightElement)[number];
+export type SelectRenderRightLayout = SelectRenderRightElement[];
+export type SelectRenderLeft = FieldIconProps['icon'];
+export type SelectRenderRight = FieldIconProps['icon'];

package/__inner__/cjs/components/Select/entities/render.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.selectRenderRightElement = void 0;
+exports.selectRenderRightElement = ['suffix', 'clear', 'chevron'];

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

@@ -1,4 +1,5 @@
 export { DataListOption as Option } from '../DataList';
 export { ListItemText as OptionItemText, ListItemIcon as OptionItemIcon, } from '../List';
+export * from './classNames';
 export * from './Select';
 export * from './types';

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

@@ -7,5 +7,6 @@ Object.defineProperty(exports, "Option", { enumerable: true, get: function () {
 var List_1 = require("../List");
 Object.defineProperty(exports, "OptionItemText", { enumerable: true, get: function () { return List_1.ListItemText; } });
 Object.defineProperty(exports, "OptionItemIcon", { enumerable: true, get: function () { return List_1.ListItemIcon; } });
+tslib_1.__exportStar(require("./classNames"), exports);
 tslib_1.__exportStar(require("./Select"), exports);
 tslib_1.__exportStar(require("./types"), exports);

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

@@ -1,13 +1,14 @@
 import type { ReactElement, ReactNode, SyntheticEvent } from 'react';
-import type { ExtendableComponentPropsWithRef } from '../../types/ExtendableComponentPropsWithRef';
-import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
+import type { ExtendableComponentPropsWithRef } from '../../types';
 import type { WithDisplayName } from '../../types/react';
 import type { DataListBaseProps, DataListOptionProps, DataListSelected } from '../DataList';
 import type { SelectInputProps, SelectInputRef } from './components';
-export type SelectPropSize = FormElementSizeVariant;
+import type { SelectOnClear, SelectRenderLeft, SelectRenderRight, SelectRenderRightLayout } from './entities';
+export declare const selectSizeVariant: readonly ["2xs", "xs", "s", "m", "l"];
+export type SelectPropSize = (typeof selectSizeVariant)[number];
 export type SelectLabel<MULTIPLE extends boolean = false> = (MULTIPLE extends true ? DataListOptionProps['label'][] : DataListOptionProps['label']) | undefined;
 export type SelectPropValue<MULTIPLE extends boolean = false> = DataListSelected<MULTIPLE>;
-export type SelectPropOnChange<MULTIPLE extends boolean = false> = (value: SelectPropValue<MULTIPLE>, e: SyntheticEvent | KeyboardEvent) => void;
+export type SelectPropOnChange<MULTIPLE extends boolean = false> = (value: SelectPropValue<MULTIPLE>, e: SyntheticEvent | KeyboardEvent | MouseEvent) => void;
 export type SelectedOption<MULTIPLE extends boolean = false> = {
     label?: SelectLabel<MULTIPLE>;
     value?: SelectPropValue<MULTIPLE>;
@@ -60,6 +61,30 @@ export type SelectProps<MULTIPLE extends boolean = false> = ExtendableComponentP
     renderValue?: SelectPropRenderValue<MULTIPLE>;
     /** Содержимое компонента */
     children?: ReactNode;
+    /** Layout правой части инпута.
+     * Определяет порядок и наличие элементов */
+    renderRightLayout?: SelectRenderRightLayout;
+    /** Функция обратного вызова, которая вызывается при очистке значения поля */
+    onClear?: SelectOnClear;
+    /** Текст для кнопки очистки поля */
+    clearText?: string;
+    /** Если `true`, то отображает кнопку закрытия */
+    showClearButton?: boolean;
+    /** Текст или иконка слева */
+    renderLeft?: SelectRenderLeft;
+    /** Текст или иконка справа */
+    renderRight?: SelectRenderRight;
+    /** Если `true` растягивает поле на всю ширину */
+    fullWidth?: boolean;
+    /** Если `true` предотвращает сокращение текста в значении и
+     * задает гибкую высоту контейнера компонента */
+    multiline?: boolean;
+    /** Если `true` делает элемент неактивным */
+    disabled?: boolean;
+    /** Если `true` делает элемент обязательным к заполнению */
+    required?: boolean;
+    /** Если `true` переводит поле в состояние ошибки */
+    error?: boolean;
     /** Свойства компонента DataList */
     dataListProps?: Partial<Omit<DataListBaseProps<MULTIPLE>, 'onClose' | 'open' | 'anchorRef' | 'multiple' | 'selected' | 'onSelect'>>;
     /** Функция обратного вызова, которая будет вызвана когда компонент запрашивает закрытие */
@@ -70,6 +95,6 @@ export type SelectProps<MULTIPLE extends boolean = false> = ExtendableComponentP
     multiple?: MULTIPLE;
     /** Идентификатор компонента для тестов */
     'data-testid'?: string;
-} & Pick<SelectInputProps, 'id' | 'name' | 'label' | 'placeholder' | 'disabled' | 'required' | 'disableStroke' | 'error' | 'hint' | 'fullWidth' | 'renderLeft' | 'renderRight' | 'multiline' | 'inputProps' | 'labelProps' | 'hintProps' | 'bodyProps' | 'inputRef' | 'labelRef' | 'bodyRef'> & SelectPropsDeprecated<MULTIPLE>, 'div'>;
+} & Pick<SelectInputProps, 'id' | 'name' | 'label' | 'placeholder' | 'disableStroke' | 'hint' | 'inputProps' | 'labelProps' | 'hintProps' | 'bodyProps' | 'inputRef' | 'labelRef' | 'bodyRef'> & SelectPropsDeprecated<MULTIPLE>, 'div'>;
 export type SelectComponent = WithDisplayName<(<MULTIPLE extends boolean = false>(props: SelectProps<MULTIPLE>) => ReactElement | null)>;
 export {};

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

@@ -1,2 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.selectSizeVariant = void 0;
+var types_1 = require("../../types");
+exports.selectSizeVariant = types_1.formElementSizeVariant;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/__inner__/cjs/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">;