@ozen-ui/kit 0.75.0 → 0.77.0

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

@@ -1,20 +1,20 @@
 import { __assign, __read, __rest } from "tslib";
 import '../../Select.css';
 import React, { forwardRef, useCallback } from 'react';
-import { classnames } from '@bem-react/classnames';
-import { ChevronDownIcon } from '@ozen-ui/icons';
 import { useBoolean } from '../../../../hooks/useBoolean';
 import { FieldControl } from '../../../FieldControl';
 import { FieldHint } from '../../../FieldHint';
 import { FieldIcon } from '../../../FieldIcon';
 import { FieldLabel } from '../../../FieldLabel';
 import { Fieldset } from '../../../Fieldset';
-import { SELECT_DEFAULT_MULTILINE, SELECT_DEFAULT_SIZE } from '../../constants';
-import { cnSelect } from '../../index';
+import { cnSelect } from '../../classNames';
+import { useSelectContext } from '../../SelectContext';
 import { SelectInputContextConsumer } from '../SelectInputContextConsumer';
+import { SelectInputRenderRight } from '../SelectInputRenderRight';
 export var SelectInput = forwardRef(function (_a, ref) {
-    var _b = _a.size, size = _b === void 0 ? SELECT_DEFAULT_SIZE : _b, _c = _a.multiline, multiline = _c === void 0 ? 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 = __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 = __read(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 = __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 = 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 = __read(useBoolean(), 2), focused = _c[0], _d = _c[1], on = _d.on, off = _d.off;
     var filled = !!valueProp || valueProp === 0;
     var handleFocus = useCallback(function (e) {
         on();
@@ -31,8 +31,7 @@ export var SelectInput = forwardRef(function (_a, ref) {
                 React.createElement("div", { className: cnSelect('HiddenLabel'), "aria-hidden": true }, label),
                 React.createElement(FieldLabel, __assign({}, labelProps, { className: cnSelect('Label', [labelProps === null || labelProps === void 0 ? void 0 : labelProps.className]), ref: (labelProps === null || labelProps === void 0 ? void 0 : labelProps.ref) || labelRef }), label),
                 React.createElement(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.createElement(FieldIcon, { icon: renderRight, className: cnSelect('RenderRight') }),
-            React.createElement(FieldIcon, { icon: ChevronDownIcon, className: classnames(cnSelect('RenderRight'), cnSelect('DropDownIcon', { open: open })) }),
+            React.createElement(SelectInputRenderRight, null),
             React.createElement(Fieldset, { className: cnSelect('Fieldset') })),
         React.createElement(FieldHint, __assign({}, hintProps), hint)));
 });

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

@@ -1,7 +1,7 @@
 import { __assign, __read } from "tslib";
 import React from 'react';
 import { useFieldControl } from '../../../FieldControl';
-import { cnSelect } from '../../index';
+import { cnSelect } from '../../classNames';
 export 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 = useFieldControl();

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

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

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

@@ -0,0 +1,38 @@
+import { __read } from "tslib";
+import React from 'react';
+import { classnames } from '@bem-react/classnames';
+import { ChevronDownIcon, CrossIcon } from '@ozen-ui/icons';
+import { useFieldControl } from '../../../FieldControl';
+import { FieldIcon } from '../../../FieldIcon';
+import { IconButton } from '../../../IconButtonNext';
+import { cnSelect } from '../../classNames';
+import { useSelectContext } from '../../SelectContext';
+export var SelectInputRenderRight = function () {
+    var _a = __read(useFieldControl(), 1), _b = _a[0], focused = _b.focused, hovered = _b.hovered;
+    var _c = 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.createElement(IconButton, { key: "clear", tabIndex: -1, size: size, variant: "function", icon: CrossIcon, title: clearText, "aria-label": clearText, onClick: function (event) {
+            event.preventDefault();
+            event.stopPropagation();
+            onClear === null || onClear === void 0 ? void 0 : onClear(event);
+        }, className: classnames(cnSelect('RenderRight'), cnSelect('ClearIcon', {
+            visibility: isVisibleClearButton,
+        })), compressed: true }));
+    return (React.createElement(React.Fragment, null,
+        showClearButton && !isVisibleClearButton && clearButton,
+        renderRightLayout.map(function (element) {
+            if (element === 'suffix') {
+                return (React.createElement(FieldIcon, { key: element, icon: renderRight, className: classnames(cnSelect('RenderRight', { nonInteractive: true }), cnSelect('Suffix')) }));
+            }
+            if (element === 'clear') {
+                if (!isVisibleClearButton || !showClearButton) {
+                    return null;
+                }
+                return clearButton;
+            }
+            if (element === 'chevron') {
+                return (React.createElement(FieldIcon, { key: element, icon: ChevronDownIcon, className: classnames(cnSelect('RenderRight', { nonInteractive: true }), 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."));
+        })));
+};

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

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

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

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

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

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

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

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

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

@@ -5,3 +5,10 @@ export var SELECT_DEFAULT_REQUIRED = false;
 export var SELECT_DEFAULT_MULTILINE = false;
 export var SELECT_DEFAULT_DEFAULT_OPEN = false;
 export var SELECT_DEFAULT_SIZE = 'm';
+export var SELECT_DEFAULT_ERROR = false;
+export var SELECT_DEFAULT_RENDER_RIGHT_LAYOUT = [
+    'suffix',
+    'clear',
+    'chevron',
+];
+export var SELECT_DEFAULT_SHOW_CLEAR_BUTTON = false;

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

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

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

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

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

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

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

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

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

@@ -0,0 +1 @@
+export var selectRenderRightElement = ['suffix', 'clear', 'chevron'];

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

@@ -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__/esm/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__/esm/components/Select/types.js

@@ -1 +1,2 @@
-export {};
+import { formElementSizeVariant } from '../../types';
+export var selectSizeVariant = formElementSizeVariant;

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 {};