@alfalab/core-components-steps 1.1.0

package/cssm/Component.js

@@ -0,0 +1,60 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var cn = require('classnames');
+var components_step_Component = require('./components/step/Component.js');
+require('@alfalab/hooks');
+require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
+require('@alfalab/icons-glyph/ExclamationCircleMIcon');
+require('@alfalab/icons-glyph/ClockMIcon');
+require('@alfalab/core-components-badge/cssm');
+require('./components/step-indicator/index.module.css');
+require('./components/step-indicator/Component.js');
+require('./components/step/index.module.css');
+var styles = require('./index.module.css');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
+var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
+
+var Steps = function (_a) {
+    var _b;
+    var className = _a.className, children = _a.children, _c = _a.defaultActiveStep, defaultActiveStep = _c === void 0 ? 1 : _c, activeStepProp = _a.activeStep, _d = _a.isMarkCompletedSteps, isMarkCompletedSteps = _d === void 0 ? true : _d, _e = _a.isVerticalAlign, isVerticalAlign = _e === void 0 ? false : _e, _f = _a.ordered, ordered = _f === void 0 ? true : _f, _g = _a.interactive, interactive = _g === void 0 ? true : _g, checkIsStepDisabled = _a.checkIsStepDisabled, checkIsStepError = _a.checkIsStepError, checkIsStepWarning = _a.checkIsStepWarning, checkIsStepWaiting = _a.checkIsStepWaiting, checkIsStepPositive = _a.checkIsStepPositive, checkIsStepCustom = _a.checkIsStepCustom, onChange = _a.onChange, dataTestId = _a.dataTestId;
+    var _h = React.useState(activeStepProp || defaultActiveStep), activeStep = _h[0], setActiveStep = _h[1];
+    var stepsLength = React__default['default'].Children.count(children);
+    React.useEffect(function () {
+        if (activeStepProp) {
+            setActiveStep(activeStepProp);
+        }
+    }, [activeStepProp]);
+    var handleStepClick = function (stepNumber) {
+        setActiveStep(stepNumber);
+        if (onChange) {
+            onChange(stepNumber);
+        }
+    };
+    if (!stepsLength)
+        return null;
+    return (React__default['default'].createElement("div", { className: cn__default['default'](className, styles__default['default'].component, (_b = {},
+            _b[styles__default['default'].vertical] = isVerticalAlign,
+            _b)), "data-test-id": dataTestId }, React__default['default'].Children.map(children, function (step, index) {
+        var stepNumber = index + 1;
+        var isSelected = stepNumber === activeStep;
+        var isStepCompleted = isMarkCompletedSteps && stepNumber < activeStep;
+        var disabled = checkIsStepDisabled ? checkIsStepDisabled(stepNumber) : false;
+        var isPositive = checkIsStepPositive ? checkIsStepPositive(stepNumber) : false;
+        var isError = checkIsStepError ? checkIsStepError(stepNumber) : false;
+        var isWarning = checkIsStepWarning ? checkIsStepWarning(stepNumber) : false;
+        var isWaiting = checkIsStepWaiting ? checkIsStepWaiting(stepNumber) : false;
+        var customStepIndicator = checkIsStepCustom && checkIsStepCustom(stepNumber);
+        var isNotLastStep = stepsLength !== stepNumber;
+        var isInteractive = !disabled && interactive;
+        return (React__default['default'].createElement(components_step_Component.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 }, step));
+    })));
+};
+
+exports.Steps = Steps;

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

@@ -0,0 +1,70 @@
+/// <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;
+    /**
+     * Управление ориентацией компонента
+     * @default false
+     */
+    isVerticalAlign?: boolean;
+    /**
+     * Указывает, является ли текущий шаг последним в списке
+     */
+    isNotLastStep?: boolean;
+    /**
+     * Обработчик нажатия на текущей шаг
+     * @param stepNumber - номер шага
+     */
+    onClick: (stepNumber: number) => void;
+};
+declare const Step: React.FC<StepProps>;
+export { StepProps, Step };

package/cssm/components/step/Component.js

@@ -0,0 +1,126 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var cn = require('classnames');
+var hooks = require('@alfalab/hooks');
+var CheckmarkCircleMIcon = require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
+var ExclamationCircleMIcon = require('@alfalab/icons-glyph/ExclamationCircleMIcon');
+var ClockMIcon = require('@alfalab/icons-glyph/ClockMIcon');
+require('@alfalab/core-components-badge/cssm');
+require('../step-indicator/index.module.css');
+var components_stepIndicator_Component = require('../step-indicator/Component.js');
+var styles = require('./index.module.css');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
+var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+var __assign = function () {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s)
+                if (Object.prototype.hasOwnProperty.call(s, p))
+                    t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+var Step = function (_a) {
+    var _b, _c, _d, _e;
+    var children = _a.children, stepNumber = _a.stepNumber, isSelected = _a.isSelected, disabled = _a.disabled, ordered = _a.ordered, isPositive = _a.isPositive, isError = _a.isError, isWarning = _a.isWarning, isWaiting = _a.isWaiting, customStepIndicator = _a.customStepIndicator, isStepCompleted = _a.isStepCompleted, onClick = _a.onClick, interactive = _a.interactive, isVerticalAlign = _a.isVerticalAlign, isNotLastStep = _a.isNotLastStep;
+    var stepRef = React.useRef(null);
+    var focused = hooks.useFocus(stepRef, 'keyboard')[0];
+    var handleButtonClick = function () {
+        if (!disabled && onClick) {
+            onClick(stepNumber);
+        }
+    };
+    var handleTextClick = function (e) {
+        if (!interactive) {
+            e.stopPropagation();
+        }
+    };
+    var handleKeyDown = function (event) {
+        if (event.key === 'Enter') {
+            handleButtonClick();
+        }
+    };
+    var getStepIndicator = function () {
+        if (customStepIndicator) {
+            return React__default['default'].createElement(components_stepIndicator_Component.StepIndicator, __assign({}, customStepIndicator));
+        }
+        if (isError) {
+            return React__default['default'].createElement(components_stepIndicator_Component.StepIndicator, { iconColor: 'negative', content: React__default['default'].createElement(ExclamationCircleMIcon.ExclamationCircleMIcon, null) });
+        }
+        if (isWarning) {
+            return React__default['default'].createElement(components_stepIndicator_Component.StepIndicator, { iconColor: 'attention', content: React__default['default'].createElement(ExclamationCircleMIcon.ExclamationCircleMIcon, null) });
+        }
+        if (isWaiting) {
+            return React__default['default'].createElement(components_stepIndicator_Component.StepIndicator, { iconColor: 'secondary', content: React__default['default'].createElement(ClockMIcon.ClockMIcon, null) });
+        }
+        if (isPositive) {
+            return React__default['default'].createElement(components_stepIndicator_Component.StepIndicator, { iconColor: 'positive', content: React__default['default'].createElement(CheckmarkCircleMIcon.CheckmarkCircleMIcon, null) });
+        }
+        if (isStepCompleted) {
+            return React__default['default'].createElement(components_stepIndicator_Component.StepIndicator, { iconColor: 'positive', content: React__default['default'].createElement(CheckmarkCircleMIcon.CheckmarkCircleMIcon, null), className: styles__default['default'].completedIndicator });
+        }
+        if (!ordered) {
+            return (React__default['default'].createElement("div", { className: styles__default['default'].checkbox },
+                React__default['default'].createElement("span", { className: styles__default['default'].dot })));
+        }
+        return stepNumber;
+    };
+    var renderDash = function () {
+        var _a;
+        return (React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].dash, (_a = {},
+                _a[styles__default['default'].vertical] = isVerticalAlign,
+                _a[styles__default['default'].completed] = isStepCompleted,
+                _a)) }));
+    };
+    return (React__default['default'].createElement("div", { role: 'button', tabIndex: 0, ref: stepRef, className: cn__default['default'](styles__default['default'].step, (_b = {},
+            _b[styles__default['default'].completed] = isStepCompleted,
+            _b[styles__default['default'].error] = isError,
+            _b[styles__default['default'].selected] = isSelected,
+            _b[styles__default['default'].disabled] = disabled,
+            _b[styles__default['default'].focused] = focused,
+            _b[styles__default['default'].vertical] = isVerticalAlign,
+            _b[styles__default['default'].interactive] = interactive,
+            _b)), onClick: handleButtonClick, onKeyDown: handleKeyDown },
+        React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].indicator, (_c = {},
+                _c[styles__default['default'].vertical] = isVerticalAlign,
+                _c[styles__default['default'].interactive] = interactive,
+                _c)) },
+            React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].option, (_d = {},
+                    _d[styles__default['default'].unordered] = !ordered,
+                    _d[styles__default['default'].vertical] = isVerticalAlign,
+                    _d[styles__default['default'].error] = isError,
+                    _d)) }, getStepIndicator()),
+            isNotLastStep && isVerticalAlign && renderDash()),
+        React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].text, (_e = {},
+                _e[styles__default['default'].interactive] = interactive,
+                _e)), onClick: handleTextClick }, children),
+        isNotLastStep && !isVerticalAlign && renderDash()));
+};
+
+exports.Step = Step;

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

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

package/cssm/components/step/index.js

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('react');
+require('classnames');
+var components_step_Component = require('./Component.js');
+require('@alfalab/hooks');
+require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
+require('@alfalab/icons-glyph/ExclamationCircleMIcon');
+require('@alfalab/icons-glyph/ClockMIcon');
+require('@alfalab/core-components-badge/cssm');
+require('../step-indicator/index.module.css');
+require('../step-indicator/Component.js');
+require('./index.module.css');
+
+
+
+exports.Step = components_step_Component.Step;

package/cssm/components/step/index.module.css

@@ -0,0 +1,150 @@
+:root {
+    --color-light-border-link: #007aff;
+    --color-light-border-primary: #dbdee1;
+    --color-light-graphic-positive: #2fc26e;
+    --color-light-graphic-primary: #0b1f35;
+    --color-light-graphic-primary-inverted: #fff;
+    --color-light-graphic-quaternary: #dbdee1;
+    --color-light-text-primary: #0b1f35;
+    --color-light-bg-primary-inverted-alpha-7: rgba(11, 31, 53, 0.07);
+    --color-light-bg-primary-inverted-alpha-15: rgba(11, 31, 53, 0.15);
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --gap-3xs: 2px;
+    --gap-2xs: 4px;
+    --gap-xs: 8px;
+}
+:root {
+    --focus-color: var(--color-light-border-link);
+}
+:root {
+    --steps-option-svg-color: var(--color-light-graphic-positive);
+    --steps-dash-border: 2px solid var(--color-light-graphic-positive);
+}
+.step {
+    display: flex;
+    outline: none
+}
+.step:not(.vertical) {
+        align-items: center;
+    }
+.step.interactive:not(.disabled):hover {
+    cursor: pointer;
+}
+.step.disabled:hover .text {
+        background: unset;
+    }
+.step.disabled .indicator {
+        cursor: unset;
+    }
+.indicator {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    margin-right: var(--gap-2xs)
+}
+.indicator.vertical {
+        flex-direction: column;
+        margin-right: var(--gap-xs);
+    }
+.option {
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: 700;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--color-light-graphic-primary);
+    background: var(--color-light-graphic-quaternary);
+    min-width: 24px;
+    height: 24px;
+    border-radius: 50%
+}
+.option.vertical {
+        margin-top: var(--gap-xs);
+    }
+.dash {
+    flex: 1 1 auto;
+    min-width: 24px;
+    border-top: 2px solid var(--color-light-border-primary);
+    margin-right: var(--gap-xs)
+}
+.dash.completed {
+        border-top: var(--steps-dash-border);
+    }
+.dash.vertical {
+        min-width: unset;
+        min-height: 24px;
+        margin-right: 0;
+        margin-top: var(--gap-xs);
+        border-left: 2px solid var(--color-light-border-primary);
+        border-top: none;
+    }
+.dash.completed.vertical {
+        border-left: var(--steps-dash-border);
+    }
+.text {
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 400;
+
+    transition: background 0.2s;
+    padding: var(--gap-xs);
+    color: var(--color-light-text-primary);
+    border-radius: var(--gap-xs);
+    height: min-content
+}
+.text.interactive:not(.disabled):hover {
+            background: var(--color-light-bg-primary-inverted-alpha-7);
+        }
+.text.interactive:not(.disabled):active {
+            background: var(--color-light-bg-primary-inverted-alpha-15);
+        }
+.focused {
+    outline: var(--gap-3xs) solid var(--focus-color);
+    outline-offset: var(--gap-3xs);
+}
+.selected .text {
+        color: var(--color-light-graphic-primary);
+    }
+.selected .option {
+        color: var(--color-light-graphic-primary-inverted);
+        background: var(--color-light-graphic-primary);
+    }
+.checkbox {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    width: 20px;
+    height: 20px;
+    border: 2px solid var(--color-light-graphic-quaternary);
+}
+.dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: var(--color-light-graphic-quaternary);
+}
+.selected .checkbox {
+    border: 2px solid var(--color-light-graphic-primary)
+}
+.selected .checkbox .dot {
+        background: var(--color-light-graphic-primary);
+    }
+.option:not(.error).unordered {
+    background: unset;
+}
+.completedIndicator > [class*='positive'] {
+    color: var(--steps-option-svg-color);
+    background-color: var(--steps-option-svg-color);
+}

package/cssm/components/step-indicator/Component.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import React from 'react';
+import { BadgeProps } from "@alfalab/core-components-badge";
+type StepIndicatorProps = Pick<BadgeProps, 'content' | 'iconColor' | 'className'>;
+declare const StepIndicator: React.FC<StepIndicatorProps>;
+export { StepIndicatorProps, StepIndicator };

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

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var cn = require('classnames');
+var coreComponentsBadge = require('@alfalab/core-components-badge/cssm');
+var styles = require('./index.module.css');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
+var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
+
+var StepIndicator = function (_a) {
+    var content = _a.content, iconColor = _a.iconColor, className = _a.className;
+    return (React__default['default'].createElement(coreComponentsBadge.Badge, { size: 'l', view: 'icon', iconColor: iconColor, className: cn__default['default'](styles__default['default'].component, className), content: content }));
+};
+
+exports.StepIndicator = StepIndicator;

package/cssm/components/step-indicator/index.d.ts

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

package/cssm/components/step-indicator/index.js

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('react');
+require('classnames');
+require('@alfalab/core-components-badge/cssm');
+require('./index.module.css');
+var components_stepIndicator_Component = require('./Component.js');
+
+
+
+exports.StepIndicator = components_stepIndicator_Component.StepIndicator;

package/cssm/components/step-indicator/index.module.css

@@ -0,0 +1,3 @@
+.component {
+    padding: 0;
+}

package/cssm/index.d.ts

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

package/cssm/index.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('react');
+require('classnames');
+require('./components/step/Component.js');
+require('@alfalab/hooks');
+require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
+require('@alfalab/icons-glyph/ExclamationCircleMIcon');
+require('@alfalab/icons-glyph/ClockMIcon');
+require('@alfalab/core-components-badge/cssm');
+require('./components/step-indicator/index.module.css');
+require('./components/step-indicator/Component.js');
+require('./components/step/index.module.css');
+require('./index.module.css');
+var Component = require('./Component.js');
+
+
+
+exports.Steps = Component.Steps;

package/cssm/index.module.css

@@ -0,0 +1,17 @@
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+.component {
+    display: flex;
+    align-items: center;
+    flex-direction: row
+}
+.component.vertical {
+        flex-direction: column;
+        align-items: flex-start;
+    }

package/esm/Component.d.ts

@@ -0,0 +1,89 @@
+/// <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;
+    /**
+     * Кастомный метод для управления состоянием 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 }
+     */
+    checkIsStepCustom?: (stepNumber: number) => StepIndicatorProps;
+    /**
+     * Обработчик клика на шаг
+     * @param stepNumber - номер активного шага
+     */
+    onChange?: (stepNumber: number) => void;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+declare const Steps: React.FC<StepsProps>;
+export { StepsProps, Steps };

package/esm/Component.js

@@ -0,0 +1,50 @@
+import React, { useState, useEffect } from 'react';
+import cn from 'classnames';
+import { Step } from './components/step/Component.js';
+import '@alfalab/hooks';
+import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
+import '@alfalab/icons-glyph/ExclamationCircleMIcon';
+import '@alfalab/icons-glyph/ClockMIcon';
+import '@alfalab/core-components-badge/esm';
+import './components/step-indicator/Component.js';
+
+var styles = {"component":"steps__component_rm960","vertical":"steps__vertical_rm960"};
+require('./index.css')
+
+var Steps = function (_a) {
+    var _b;
+    var className = _a.className, children = _a.children, _c = _a.defaultActiveStep, defaultActiveStep = _c === void 0 ? 1 : _c, activeStepProp = _a.activeStep, _d = _a.isMarkCompletedSteps, isMarkCompletedSteps = _d === void 0 ? true : _d, _e = _a.isVerticalAlign, isVerticalAlign = _e === void 0 ? false : _e, _f = _a.ordered, ordered = _f === void 0 ? true : _f, _g = _a.interactive, interactive = _g === void 0 ? true : _g, checkIsStepDisabled = _a.checkIsStepDisabled, checkIsStepError = _a.checkIsStepError, checkIsStepWarning = _a.checkIsStepWarning, checkIsStepWaiting = _a.checkIsStepWaiting, checkIsStepPositive = _a.checkIsStepPositive, checkIsStepCustom = _a.checkIsStepCustom, onChange = _a.onChange, dataTestId = _a.dataTestId;
+    var _h = useState(activeStepProp || defaultActiveStep), activeStep = _h[0], setActiveStep = _h[1];
+    var stepsLength = React.Children.count(children);
+    useEffect(function () {
+        if (activeStepProp) {
+            setActiveStep(activeStepProp);
+        }
+    }, [activeStepProp]);
+    var handleStepClick = function (stepNumber) {
+        setActiveStep(stepNumber);
+        if (onChange) {
+            onChange(stepNumber);
+        }
+    };
+    if (!stepsLength)
+        return null;
+    return (React.createElement("div", { className: cn(className, styles.component, (_b = {},
+            _b[styles.vertical] = isVerticalAlign,
+            _b)), "data-test-id": dataTestId }, React.Children.map(children, function (step, index) {
+        var stepNumber = index + 1;
+        var isSelected = stepNumber === activeStep;
+        var isStepCompleted = isMarkCompletedSteps && stepNumber < activeStep;
+        var disabled = checkIsStepDisabled ? checkIsStepDisabled(stepNumber) : false;
+        var isPositive = checkIsStepPositive ? checkIsStepPositive(stepNumber) : false;
+        var isError = checkIsStepError ? checkIsStepError(stepNumber) : false;
+        var isWarning = checkIsStepWarning ? checkIsStepWarning(stepNumber) : false;
+        var isWaiting = checkIsStepWaiting ? checkIsStepWaiting(stepNumber) : false;
+        var customStepIndicator = checkIsStepCustom && checkIsStepCustom(stepNumber);
+        var isNotLastStep = stepsLength !== stepNumber;
+        var 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 }, step));
+    })));
+};
+
+export { Steps };