@alfalab/core-components-steps 1.6.3 → 1.7.0

package/modern/components/step/index.css

@@ -1,4 +1,4 @@
-/* hash: zeykt */
+/* hash: uzdw6 */
 :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } /* deprecated */ :root {
     --color-light-neutral-translucent-1300: rgba(3, 3, 6, 0.88);
@@ -37,26 +37,26 @@
 } :root {
     --steps-option-svg-color: var(--color-light-status-positive);
     --steps-dash-border: 2px solid var(--color-light-status-positive);
-} .steps__step_wyak7 {
+} .steps__step_14of2 {
     display: flex;
     outline: none
-} .steps__step_wyak7:not(.steps__vertical_wyak7) {
+} .steps__step_14of2:not(.steps__vertical_14of2) {
         align-items: center;
-    } .steps__step_wyak7.steps__interactive_wyak7:not(.steps__disabled_wyak7):hover {
+    } .steps__step_14of2.steps__interactive_14of2:not(.steps__disabled_14of2):hover {
     cursor: pointer;
-} .steps__step_wyak7.steps__disabled_wyak7:hover .steps__text_wyak7 {
+} .steps__step_14of2.steps__disabled_14of2:hover .steps__text_14of2 {
         background: unset;
-    } .steps__step_wyak7.steps__disabled_wyak7 .steps__indicator_wyak7 {
+    } .steps__step_14of2.steps__disabled_14of2 .steps__indicator_14of2 {
         cursor: unset;
-    } .steps__indicator_wyak7 {
+    } .steps__indicator_14of2 {
     cursor: pointer;
     display: flex;
     align-items: center;
     margin-right: var(--gap-4)
-} .steps__indicator_wyak7.steps__vertical_wyak7 {
+} .steps__indicator_14of2.steps__vertical_14of2 {
         flex-direction: column;
         margin-right: var(--gap-8);
-    } .steps__option_wyak7 {
+    } .steps__option_14of2 {
     font-size: 14px;
     line-height: 20px;
     font-weight: 700;
@@ -69,33 +69,33 @@
     min-width: 24px;
     height: 24px;
     border-radius: var(--border-radius-circle)
-} .steps__option_wyak7.steps__vertical_wyak7 {
+} .steps__option_14of2.steps__vertical_14of2 {
         margin-top: var(--gap-8);
-    } .steps__dash_wyak7 {
+    } .steps__dash_14of2 {
     flex: 1 1 auto;
     min-width: 24px;
     border-top: 2px solid var(--color-light-neutral-translucent-300);
     margin-right: var(--gap-8)
-} .steps__dash_wyak7.steps__size-16_wyak7 {
+} .steps__dash_14of2.steps__size-16_14of2 {
         min-width: 16px;
-    } .steps__dash_wyak7.steps__size-8_wyak7 {
+    } .steps__dash_14of2.steps__size-8_14of2 {
         min-width: 8px;
-    } .steps__dash_wyak7.steps__completed_wyak7 {
+    } .steps__dash_14of2.steps__completed_14of2 {
         border-top: var(--steps-dash-border);
-    } .steps__dash_wyak7.steps__vertical_wyak7 {
+    } .steps__dash_14of2.steps__vertical_14of2 {
         min-width: unset;
         min-height: 24px;
         margin-right: 0;
         margin-top: var(--gap-8);
         border-left: 2px solid var(--color-light-neutral-translucent-300);
         border-top: none
-    } .steps__dash_wyak7.steps__vertical_wyak7.steps__size-16_wyak7 {
+    } .steps__dash_14of2.steps__vertical_14of2.steps__size-16_14of2 {
             min-height: 16px;
-        } .steps__dash_wyak7.steps__vertical_wyak7.steps__size-8_wyak7 {
+        } .steps__dash_14of2.steps__vertical_14of2.steps__size-8_14of2 {
             min-height: 8px;
-        } .steps__dash_wyak7.steps__completed_wyak7.steps__vertical_wyak7 {
+        } .steps__dash_14of2.steps__completed_14of2.steps__vertical_14of2 {
         border-left: var(--steps-dash-border);
-    } .steps__text_wyak7 {
+    } .steps__text_14of2 {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
@@ -105,19 +105,19 @@
     color: var(--color-light-text-primary);
     border-radius: var(--gap-8);
     height: min-content
-} .steps__text_wyak7.steps__interactive_wyak7:not(.steps__disabled_wyak7):hover {
+} .steps__text_14of2.steps__interactive_14of2:not(.steps__disabled_14of2):hover {
             background: var(--color-light-transparent-default-hover);
-        } .steps__text_wyak7.steps__interactive_wyak7:not(.steps__disabled_wyak7):active {
+        } .steps__text_14of2.steps__interactive_14of2:not(.steps__disabled_14of2):active {
             background: var(--color-light-transparent-default-press);
-        } .steps__focused_wyak7 {
+        } .steps__focused_14of2 {
     outline: var(--gap-2) solid var(--focus-color);
     outline-offset: var(--gap-2);
-} .steps__selected_wyak7 .steps__text_wyak7 {
+} .steps__selected_14of2 .steps__text_14of2 {
         color: var(--color-light-text-primary);
-    } .steps__selected_wyak7 .steps__option_wyak7 {
+    } .steps__selected_14of2 .steps__option_14of2 {
         color: var(--color-light-text-primary-inverted);
         background: var(--color-light-neutral-translucent-1300);
-    } .steps__checkbox_wyak7 {
+    } .steps__checkbox_14of2 {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -125,20 +125,20 @@
     width: 20px;
     height: 20px;
     border: 2px solid var(--color-light-neutral-translucent-300);
-} .steps__dot_wyak7 {
+} .steps__dot_14of2 {
     width: 10px;
     height: 10px;
     border-radius: var(--border-radius-circle);
     background: var(--color-light-neutral-translucent-300);
-} .steps__selected_wyak7 .steps__checkbox_wyak7 {
+} .steps__selected_14of2 .steps__checkbox_14of2 {
     border: 2px solid var(--color-light-neutral-translucent-1300)
-} .steps__selected_wyak7 .steps__checkbox_wyak7 .steps__dot_wyak7 {
+} .steps__selected_14of2 .steps__checkbox_14of2 .steps__dot_14of2 {
         background: var(--color-light-neutral-translucent-1300);
-    } .steps__option_wyak7:not(.steps__error_wyak7).steps__unordered_wyak7 {
+    } .steps__option_14of2:not(.steps__error_14of2).steps__unordered_14of2 {
     background: unset;
-} .steps__completedIndicator_wyak7 > [class*='positive'] {
+} .steps__completedIndicator_14of2 > [class*='positive'] {
     color: var(--steps-option-svg-color);
     background-color: var(--steps-option-svg-color);
-} .steps__fullWidth_wyak7 {
+} .steps__fullWidth_14of2 {
     width: 100%;
 }

package/modern/components/step-indicator/Component.js

@@ -2,7 +2,7 @@ import React from 'react';
 import cn from 'classnames';
 import { Badge } from '@alfalab/core-components-badge/modern';
 
-const styles = {"component":"steps__component_1igwc"};
+const styles = {"component":"steps__component_18el7"};
 require('./index.css')
 
 const StepIndicator = ({ content, iconColor, className }) => (React.createElement(Badge, { size: 'l', view: 'icon', iconColor: iconColor, className: cn(styles.component, className), content: content }));

package/modern/components/step-indicator/index.css

@@ -1,4 +1,4 @@
-/* hash: 1e3fn */
-.steps__component_1igwc.steps__component_1igwc {
+/* hash: 19nuy */
+.steps__component_18el7.steps__component_18el7 {
     padding: 0;
 }

package/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: 1i2a1 */
+/* hash: jq6h1 */
 :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -18,11 +18,11 @@
     /* новые значения, используйте их */
 } :root {
 } :root {
-} .steps__component_airbo {
+} .steps__component_t81r1 {
     display: flex;
     align-items: center;
     flex-direction: row
-} .steps__component_airbo.steps__vertical_airbo {
+} .steps__component_t81r1.steps__vertical_t81r1 {
         flex-direction: column;
         align-items: flex-start;
     }

package/moderncssm/Component.d.ts

@@ -0,0 +1,99 @@
+/// <reference types="react" />
+import React from 'react';
+import { ReactNode } from "react";
+import { StepIndicatorProps } from "./components/step-indicator/index";
+type StepsProps = {
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дочерние элементы
+     */
+    children: ReactNode;
+    /**
+     * Активный шаг, указанный по умолчанию
+     * @default 1
+     */
+    defaultActiveStep?: number;
+    /**
+     * Активный шаг
+     */
+    activeStep?: number;
+    /**
+     * Управление возможностью отключения пометки пройденного шага
+     * @default true
+     */
+    isMarkCompletedSteps?: boolean;
+    /**
+     * Управление ориентацией компонента
+     * @default false
+     */
+    isVerticalAlign?: boolean;
+    /**
+     * Управление отображением номера шага
+     */
+    ordered?: boolean;
+    /**
+     * Включение / отключение интерактивности шагов
+     */
+    interactive?: boolean;
+    /**
+     * Растягивание шагов на всю ширину блока для вертикальной ориентации
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Минимальное расстояние между шагами
+     * @default 24
+     */
+    minSpaceBetweenSteps?: 8 | 16 | 24;
+    /**
+     * Кастомный метод для управления состоянием disabled шага и
+     * возможностью перехода на этот шаг
+     * @param stepNumber - номер шага
+     * @return Флаг состояния disabled
+     */
+    checkIsStepDisabled?: (stepNumber: number) => boolean;
+    /**
+     * Кастомный метод для управления состоянием шага error
+     * @param stepNumber - номер шага
+     * @return Флаг состояния error
+     */
+    checkIsStepError?: (stepNumber: number) => boolean;
+    /**
+     * Кастомный метод для управления состоянием шага warning
+     * @param stepNumber - номер шага
+     * @return Флаг состояния warning
+     */
+    checkIsStepWarning?: (stepNumber: number) => boolean;
+    /**
+     * Кастомный метод для управления состоянием шага waiting
+     * @param stepNumber - номер шага
+     * @return Флаг состояния waiting
+     */
+    checkIsStepWaiting?: (stepNumber: number) => boolean;
+    /**
+     * Кастомный метод для управления состоянием шага positive
+     * @param stepNumber - номер шага
+     * @return Флаг состояния positive
+     */
+    checkIsStepPositive?: (stepNumber: number) => boolean;
+    /**
+     * Кастомный метод для установки кастомного индикатора шага
+     * @param stepNumber - номер шага
+     * @return Объект StepIndicatorProps { className, content, iconColor } или null
+     */
+    checkIsStepCustom?: (stepNumber: number) => StepIndicatorProps | null;
+    /**
+     * Обработчик клика на шаг
+     * @param stepNumber - номер активного шага
+     */
+    onChange?: (stepNumber: number) => void;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+declare const Steps: React.FC<StepsProps>;
+export { StepsProps, Steps };

package/moderncssm/Component.js

@@ -0,0 +1,39 @@
+import React, { useState } from 'react';
+import cn from 'classnames';
+import { Step } from './components/step/Component.js';
+import styles from './index.module.css';
+
+const Steps = ({ className, children, defaultActiveStep = 1, activeStep: activeStepProp, isMarkCompletedSteps = true, isVerticalAlign = false, ordered = true, interactive = true, fullWidth = false, minSpaceBetweenSteps = 24, checkIsStepDisabled, checkIsStepError, checkIsStepWarning, checkIsStepWaiting, checkIsStepPositive, checkIsStepCustom, onChange, dataTestId, }) => {
+    const uncontrolled = activeStepProp === undefined;
+    const [activeStep, setActiveStep] = useState(defaultActiveStep);
+    const stepsLength = React.Children.count(children);
+    const handleStepClick = (stepNumber) => {
+        if (uncontrolled) {
+            setActiveStep(stepNumber);
+        }
+        if (onChange) {
+            onChange(stepNumber);
+        }
+    };
+    if (!stepsLength)
+        return null;
+    const visibleActiveStep = uncontrolled ? activeStep : activeStepProp;
+    return (React.createElement("div", { className: cn(className, styles.component, {
+            [styles.vertical]: isVerticalAlign,
+        }), "data-test-id": dataTestId }, React.Children.map(children, (step, index) => {
+        const stepNumber = index + 1;
+        const isSelected = stepNumber === visibleActiveStep;
+        const isStepCompleted = isMarkCompletedSteps && stepNumber < visibleActiveStep;
+        const disabled = checkIsStepDisabled ? checkIsStepDisabled(stepNumber) : false;
+        const isPositive = checkIsStepPositive ? checkIsStepPositive(stepNumber) : false;
+        const isError = checkIsStepError ? checkIsStepError(stepNumber) : false;
+        const isWarning = checkIsStepWarning ? checkIsStepWarning(stepNumber) : false;
+        const isWaiting = checkIsStepWaiting ? checkIsStepWaiting(stepNumber) : false;
+        const customStepIndicator = checkIsStepCustom && checkIsStepCustom(stepNumber);
+        const isNotLastStep = stepsLength !== stepNumber;
+        const isInteractive = !disabled && interactive;
+        return (React.createElement(Step, { stepNumber: stepNumber, isSelected: isSelected, isStepCompleted: isStepCompleted, disabled: disabled, isPositive: isPositive, isError: isError, isWarning: isWarning, isWaiting: isWaiting, customStepIndicator: customStepIndicator, onClick: handleStepClick, ordered: ordered, interactive: isInteractive, isVerticalAlign: isVerticalAlign, isNotLastStep: isNotLastStep, key: stepNumber, fullWidth: fullWidth, minSpaceBetweenSteps: minSpaceBetweenSteps }, step));
+    })));
+};
+
+export { Steps };

package/moderncssm/components/step/Component.d.ts

@@ -0,0 +1,80 @@
+/// <reference types="react" />
+import React from 'react';
+import { ReactNode } from "react";
+import { StepIndicatorProps } from "../step-indicator/index";
+type StepProps = {
+    /**
+     * Название шага
+     */
+    children: ReactNode;
+    /**
+     * Номер шага
+     */
+    stepNumber: number;
+    /**
+     * Маркер того, что текущий шаг выбран
+     */
+    isSelected: boolean;
+    /**
+     * Маркер того, что текущий шаг доступен для клика
+     */
+    disabled: boolean;
+    /**
+     * Управление отображением номера шага
+     */
+    ordered?: boolean;
+    /**
+     * Включение / отключение интерактивности шагов
+     */
+    interactive?: boolean;
+    /**
+     * Маркер того, что текущий шаг находится в состоянии "Positive"
+     */
+    isPositive: boolean;
+    /**
+     * Маркер того, что текущий шаг находится в состоянии "Error"
+     */
+    isError: boolean;
+    /**
+     * Маркер того, что текущий шаг находится в состоянии "Warning"
+     */
+    isWarning: boolean;
+    /**
+     * Маркер того, что текущий шаг находится в состоянии "Waiting"
+     */
+    isWaiting: boolean;
+    /**
+     * Маркер того, что текущий шаг нужно пометить как завершенный
+     */
+    isStepCompleted: boolean;
+    /**
+     * Свойства кастомного индикатора текущего шага
+     */
+    customStepIndicator?: StepIndicatorProps | null;
+    /**
+     * Управление ориентацией компонента
+     * @default false
+     */
+    isVerticalAlign?: boolean;
+    /**
+     * Указывает, является ли текущий шаг последним в списке
+     */
+    isNotLastStep?: boolean;
+    /**
+     * Маркер того, что шаг растягивается на всю ширину блока
+     * для вертикальной ориентации
+     */
+    fullWidth?: boolean;
+    /**
+     * Минимальное расстояние между шагами
+     * @default 24
+     */
+    minSpaceBetweenSteps?: 8 | 16 | 24;
+    /**
+     * Обработчик нажатия на текущей шаг
+     * @param stepNumber - номер шага
+     */
+    onClick: (stepNumber: number) => void;
+};
+declare const Step: React.FC<StepProps>;
+export { StepProps, Step };

package/moderncssm/components/step/Component.js

@@ -0,0 +1,89 @@
+import React, { useRef } from 'react';
+import cn from 'classnames';
+import { useFocus } from '@alfalab/hooks';
+import { CheckmarkCircleMIcon } from '@alfalab/icons-glyph/CheckmarkCircleMIcon';
+import { ClockMIcon } from '@alfalab/icons-glyph/ClockMIcon';
+import { ExclamationCircleMIcon } from '@alfalab/icons-glyph/ExclamationCircleMIcon';
+import { StepIndicator } from '../step-indicator/Component.js';
+import styles from './index.module.css';
+
+const SIZE_TO_CLASSNAME_MAP = {
+    8: 'size-8',
+    16: 'size-16',
+    24: 'size-24',
+};
+const Step = ({ children, stepNumber, isSelected, disabled, ordered, isPositive, isError, isWarning, isWaiting, customStepIndicator, isStepCompleted, onClick, interactive, isVerticalAlign, isNotLastStep, fullWidth, minSpaceBetweenSteps = 24, }) => {
+    const stepRef = useRef(null);
+    const [focused] = useFocus(stepRef, 'keyboard');
+    const handleButtonClick = () => {
+        if (!disabled && interactive && onClick) {
+            onClick(stepNumber);
+        }
+    };
+    const handleTextClick = (e) => {
+        if (!interactive) {
+            e.stopPropagation();
+        }
+    };
+    const handleKeyDown = (event) => {
+        if (event.key === 'Enter') {
+            handleButtonClick();
+        }
+    };
+    const getStepIndicator = () => {
+        if (customStepIndicator) {
+            return React.createElement(StepIndicator, { ...customStepIndicator });
+        }
+        if (isError) {
+            return React.createElement(StepIndicator, { iconColor: 'negative', content: React.createElement(ExclamationCircleMIcon, null) });
+        }
+        if (isWarning) {
+            return React.createElement(StepIndicator, { iconColor: 'attention', content: React.createElement(ExclamationCircleMIcon, null) });
+        }
+        if (isWaiting) {
+            return React.createElement(StepIndicator, { iconColor: 'secondary', content: React.createElement(ClockMIcon, null) });
+        }
+        if (isPositive) {
+            return React.createElement(StepIndicator, { iconColor: 'positive', content: React.createElement(CheckmarkCircleMIcon, null) });
+        }
+        if (isStepCompleted) {
+            return (React.createElement(StepIndicator, { iconColor: 'positive', content: React.createElement(CheckmarkCircleMIcon, null), className: styles.completedIndicator }));
+        }
+        if (!ordered) {
+            return (React.createElement("div", { className: styles.checkbox },
+                React.createElement("span", { className: styles.dot })));
+        }
+        return stepNumber;
+    };
+    const renderDash = () => (React.createElement("div", { className: cn(styles.dash, {
+            [styles.vertical]: isVerticalAlign,
+            [styles.completed]: isStepCompleted,
+        }, styles[SIZE_TO_CLASSNAME_MAP[minSpaceBetweenSteps]]) }));
+    return (React.createElement("div", { role: 'button', tabIndex: 0, ref: stepRef, className: cn(styles.step, {
+            [styles.completed]: isStepCompleted,
+            [styles.error]: isError,
+            [styles.selected]: isSelected,
+            [styles.disabled]: disabled,
+            [styles.focused]: focused,
+            [styles.vertical]: isVerticalAlign,
+            [styles.interactive]: interactive,
+            [styles.fullWidth]: fullWidth && isVerticalAlign,
+        }), onClick: handleButtonClick, onKeyDown: handleKeyDown },
+        React.createElement("div", { className: cn(styles.indicator, {
+                [styles.vertical]: isVerticalAlign,
+                [styles.interactive]: interactive,
+            }) },
+            React.createElement("div", { className: cn(styles.option, {
+                    [styles.unordered]: !ordered,
+                    [styles.vertical]: isVerticalAlign,
+                    [styles.error]: isError,
+                }) }, getStepIndicator()),
+            isNotLastStep && isVerticalAlign && renderDash()),
+        React.createElement("div", { className: cn(styles.text, {
+                [styles.interactive]: interactive,
+                [styles.fullWidth]: fullWidth && isVerticalAlign,
+            }), onClick: handleTextClick }, children),
+        isNotLastStep && !isVerticalAlign && renderDash()));
+};
+
+export { Step };

package/moderncssm/components/step/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/moderncssm/components/step/index.js

@@ -0,0 +1 @@
+export { Step } from './Component.js';