@cloud-ru/ds-stepper 1.0.0

package/dist/esm/constants.d.ts

@@ -0,0 +1,16 @@
+export declare const STEP_STATE: {
+    readonly Completed: "completed";
+    readonly Current: "current";
+    readonly Loading: "loading";
+    readonly Waiting: "waiting";
+    readonly Rejected: "rejected";
+};
+export declare const TEST_IDS: {
+    readonly root: "stepper";
+    readonly stepSuffix: "_element-step";
+    readonly tailSuffix: "_element-tail";
+};
+/** Сборка test-id'а конкретного шага по root testId и индексу. */
+export declare function getStepTestId(rootTestId: string): string;
+/** Сборка test-id'а tail-линии по root testId. */
+export declare function getTailTestId(rootTestId: string): string;

package/dist/esm/constants.js

@@ -0,0 +1,20 @@
+export const STEP_STATE = {
+    Completed: 'completed',
+    Current: 'current',
+    Loading: 'loading',
+    Waiting: 'waiting',
+    Rejected: 'rejected',
+};
+export const TEST_IDS = {
+    root: 'stepper',
+    stepSuffix: '_element-step',
+    tailSuffix: '_element-tail',
+};
+/** Сборка test-id'а конкретного шага по root testId и индексу. */
+export function getStepTestId(rootTestId) {
+    return `${rootTestId}${TEST_IDS.stepSuffix}`;
+}
+/** Сборка test-id'а tail-линии по root testId. */
+export function getTailTestId(rootTestId) {
+    return `${rootTestId}${TEST_IDS.tailSuffix}`;
+}

package/dist/esm/context.d.ts

@@ -0,0 +1,3 @@
+import { StepperApi } from './types.js';
+export declare const StepperContext: import("react").Context<StepperApi>;
+export declare const useStepperApi: () => StepperApi;

package/dist/esm/context.js

@@ -0,0 +1,14 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+const defaultApi = {
+    stepper: _jsx(_Fragment, {}),
+    stepCount: 0,
+    isCompleted: false,
+    currentStepIndex: 0,
+    goNext() { },
+    goPrev() { },
+    resetValidation() { },
+    setValidator() { },
+};
+export const StepperContext = createContext(defaultApi);
+export const useStepperApi = () => useContext(StepperContext);

package/dist/esm/helperComponents/DesktopStep/DesktopStep.d.ts

@@ -0,0 +1,12 @@
+import { StepViewData } from '../../types.js';
+export type DesktopStepProps = {
+    /** Данные шага для отображения */
+    step: StepViewData;
+    /** CSS-класс */
+    className?: string;
+    /** Скрыть хвост-линию: нужно сторям, которые показывают шаг в отрыве от ряда */
+    hideTailLine?: boolean;
+    /** data-test-id */
+    'data-test-id'?: string;
+};
+export declare function DesktopStep({ step, className, 'data-test-id': testId, hideTailLine }: DesktopStepProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/helperComponents/DesktopStep/DesktopStep.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Typography } from '@cloud-ru/ds-typography';
+import cn from 'classnames';
+import { STEP_STATE } from '../../constants.js';
+import { getTestIdBuilder } from '../../utils.js';
+import { StepIcon } from '../StepIcon/index.js';
+import styles from './styles.module.css';
+const getTailTestId = getTestIdBuilder('_element-tail');
+const getStepTestId = getTestIdBuilder('_element-step');
+export function DesktopStep({ step, className, 'data-test-id': testId, hideTailLine }) {
+    // hover/press state-layer есть только у кликабельных навигационных кружков —
+    // completed (назад) и waiting (вперёд). Current/loading/rejected по макету не
+    // реагируют на hover/press (активный/в процессе/ошибка — не цель навигации).
+    // Focus-ring — у всех (это outline на кнопке, не зависит от state-layer).
+    const hasStateLayer = step.state !== STEP_STATE.Current && step.state !== STEP_STATE.Rejected && step.state !== STEP_STATE.Loading;
+    // В макете слой разный: у пройденного шага он лежит на акценте, у будущего — на фоне.
+    const stateLayer = step.state === STEP_STATE.Completed ? 'emptyDarkOnAccent' : 'emptyNeutralOnBackground';
+    return (_jsxs("div", { className: cn(styles.step, className), "data-state": step.state, children: [_jsxs("div", { className: styles.track, children: [_jsxs("button", { type: 'button', className: styles.statusContainer, onClick: step.onClick, disabled: !step.onClick, "data-test-id": getStepTestId(testId), "data-state": step.state, children: [_jsx("span", { className: styles.stateLayer, "data-state": hasStateLayer ? stateLayer : undefined, "aria-hidden": true }), _jsx(StepIcon, { state: step.state, number: step.number, className: styles.icon })] }), !hideTailLine && (_jsx("div", { className: styles.tail, "data-completed": step.state === STEP_STATE.Completed || undefined, "data-test-id": getTailTestId(testId), children: _jsx("div", { className: styles.tailLine }) }))] }), _jsxs("div", { className: styles.content, children: [_jsx(Typography, { variant: 'body', size: 'm', as: 'div', className: styles.title, children: step.title }), step.description && (_jsx(Typography, { variant: 'body', size: 's', as: 'div', className: styles.description, children: step.description }))] })] }));
+}

package/dist/esm/helperComponents/DesktopStep/index.d.ts

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

package/dist/esm/helperComponents/DesktopStep/index.js

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

package/dist/esm/helperComponents/DesktopStep/styles.module.css

@@ -0,0 +1,169 @@
+@charset "UTF-8";
+.step{
+  display:flex;
+  flex:1 1 0;
+  flex-direction:column;
+  gap:var(--sn-stepper-anatomy-stepRow-gap, var(--sn-primitive-dimension-4, 4px));
+  align-items:flex-start;
+  box-sizing:border-box;
+  min-width:0;
+}
+
+.track{
+  display:flex;
+  gap:var(--sn-stepper-anatomy-step-gap, var(--sn-primitive-dimension-8, 8px));
+  align-items:center;
+  box-sizing:border-box;
+  width:100%;
+  padding-right:var(--sn-stepper-anatomy-step-paddingHorizontal, var(--sn-primitive-dimension-4, 4px));
+  padding-left:var(--sn-stepper-anatomy-step-paddingHorizontal, var(--sn-primitive-dimension-4, 4px));
+}
+
+.statusContainer{
+  all:unset;
+  cursor:pointer;
+  position:relative;
+  display:inline-flex;
+  flex-shrink:0;
+  align-items:center;
+  justify-content:center;
+  box-sizing:border-box;
+  border-radius:50%;
+  outline:none;
+}
+.statusContainer .stateLayer{
+  position:absolute;
+  inset:0;
+  border-radius:inherit;
+}
+.statusContainer .stateLayer[data-state=borderOnBackground]{
+  border-color:var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
+  border-style:solid;
+  border-width:var(--sn-primitive-strokeWeight-strokeRegular, 1px);
+}
+.statusContainer .stateLayer[data-state=emptyNeutralOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(120, 123, 138, 0)));
+}
+.statusContainer .stateLayer[data-state=activatedOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, var(--sn-brandRole-color-brandA-backgroundActivatedDefault, rgba(56, 159, 116, 0.1490196078))));
+}
+.statusContainer .stateLayer[data-state=versionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
+}
+.statusContainer .stateLayer[data-state=emptyVersionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-defaultEmpty-filled, rgba(0, 0, 0, 0));
+}
+.statusContainer .stateLayer[data-state=inversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-default-filled, rgba(255, 255, 255, 0.1019607843));
+}
+.statusContainer .stateLayer[data-state=emptyInversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-defaultEmpty-filled, rgba(255, 255, 255, 0));
+}
+.statusContainer .stateLayer[data-state=emptyDarkOnAccent]{
+  background:var(--sn-theme-color-material-stateLayer-darkOnAccent-defaultEmpty-filled, rgba(0, 0, 0, 0));
+}
+@media (hover: hover){
+  .statusContainer:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground]{
+    border-color:var(--sn-theme-color-material-stateLayer-neutral-border-hovered-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-hovered-borderColor, rgba(159, 166, 198, 0.6509803922)));
+  }
+  .statusContainer:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground]{
+    background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(188, 195, 220, 0.1490196078)));
+  }
+  .statusContainer:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
+    background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, var(--sn-brandRole-color-brandA-backgroundActivatedHovered, rgba(56, 159, 116, 0.3490196078))));
+  }
+  .statusContainer:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
+  }
+  .statusContainer:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
+  }
+  .statusContainer:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
+  }
+  .statusContainer:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
+  }
+  .statusContainer:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent]{
+    background:var(--sn-theme-color-material-stateLayer-darkOnAccent-hovered-filled, rgba(0, 0, 0, 0.0588235294));
+  }
+}
+.statusContainer{
+}
+.statusContainer[data-loading] .stateLayer[data-state=borderOnBackground], .statusContainer:active:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground], .statusContainer[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground]{
+  border-color:var(--sn-theme-color-material-stateLayer-neutral-border-pressed-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-pressed-borderColor, rgba(159, 166, 198, 0.8)));
+}
+.statusContainer[data-loading] .stateLayer[data-state=emptyNeutralOnBackground], .statusContainer:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground], .statusContainer[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(188, 195, 220, 0.3019607843)));
+}
+.statusContainer[data-loading] .stateLayer[data-state=activatedOnBackground], .statusContainer:active:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground], .statusContainer[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, var(--sn-brandRole-color-brandA-backgroundActivatedPressed, rgba(56, 159, 116, 0.4509803922))));
+}
+.statusContainer[data-loading] .stateLayer[data-state=versionOnColor], .statusContainer:active:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor], .statusContainer[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
+}
+.statusContainer[data-loading] .stateLayer[data-state=emptyVersionOnColor], .statusContainer:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor], .statusContainer[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
+}
+.statusContainer[data-loading] .stateLayer[data-state=inversionOnColor], .statusContainer:active:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor], .statusContainer[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
+}
+.statusContainer[data-loading] .stateLayer[data-state=emptyInversionOnColor], .statusContainer:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor], .statusContainer[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
+}
+.statusContainer[data-loading] .stateLayer[data-state=emptyDarkOnAccent], .statusContainer:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent], .statusContainer[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent]{
+  background:var(--sn-theme-color-material-stateLayer-darkOnAccent-pressed-filled, rgba(0, 0, 0, 0.1215686275));
+}
+.statusContainer:disabled{
+  cursor:default;
+}
+.statusContainer:focus-visible{
+  outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-available-complementary, #000000);
+  outline-offset:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
+}
+
+.stateLayer{
+  border-radius:inherit;
+}
+
+.icon{
+  pointer-events:none;
+}
+
+.tail{
+  flex:1 1 auto;
+  min-width:16px;
+  height:var(--sn-stepper-anatomy-size-m-progressWrapper-progressLine-height, var(--sn-primitive-dimension-2, 2px));
+}
+.tail .tailLine{
+  width:100%;
+  height:100%;
+  border-radius:var(--sn-stepper-anatomy-size-m-progressWrapper-progressLine-borderRadius, var(--sn-primitive-dimension-full, 10000px));
+  background-color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+}
+.tail[data-completed] .tailLine{
+  background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
+}
+
+.content{
+  display:flex;
+  flex-direction:column;
+  min-width:0;
+  padding-right:var(--sn-stepper-anatomy-stepRow-contentWrapper-stepText-paddingHorizontal, var(--sn-stepper-anatomy-step-paddingHorizontal, var(--sn-primitive-dimension-4, 4px)));
+  padding-left:var(--sn-stepper-anatomy-stepRow-contentWrapper-stepText-paddingHorizontal, var(--sn-stepper-anatomy-step-paddingHorizontal, var(--sn-primitive-dimension-4, 4px)));
+}
+
+.title{
+  overflow:hidden;
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+  text-overflow:ellipsis;
+  white-space:nowrap;
+}
+
+.description{
+  overflow:hidden;
+  display:-webkit-box;
+  -webkit-box-orient:vertical;
+  -webkit-line-clamp:2;
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+}

package/dist/esm/helperComponents/DesktopStepper/DesktopStepper.d.ts

@@ -0,0 +1,5 @@
+import { StepperProps } from '../../types.js';
+export declare function DesktopStepper({ children, steps, className, onChangeCurrentStep, onCompleteChange, defaultCurrentStepIndex, validator, 'data-test-id': testId, allowFreeNavigation, }: StepperProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace DesktopStepper {
+    var displayName: string;
+}

package/dist/esm/helperComponents/DesktopStepper/DesktopStepper.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import cn from 'classnames';
+import { StepperContext } from '../../context.js';
+import { useStepperController } from '../../hooks/useStepperController.js';
+import { DesktopStep } from '../DesktopStep/index.js';
+import styles from './styles.module.css';
+export function DesktopStepper({ children, steps, className, onChangeCurrentStep, onCompleteChange, defaultCurrentStepIndex = 0, validator, 'data-test-id': testId, allowFreeNavigation = false, }) {
+    const { stepsView, currentStepIndex, isCompleted, stepCount, goNext, goPrev, resetValidation, setValidator } = useStepperController({
+        steps,
+        defaultCurrentStepIndex,
+        validator,
+        onChangeCurrentStep,
+        onCompleteChange,
+        allowFreeNavigation,
+    });
+    const stepper = (_jsx("div", { className: cn(styles.stepper, className), "data-test-id": testId, children: stepsView.map((step, index) => (_jsx(DesktopStep, { step: step, "data-test-id": testId }, step.title + index))) }));
+    const stepperApi = {
+        goNext,
+        goPrev,
+        currentStepIndex,
+        isCompleted,
+        resetValidation,
+        stepCount,
+        stepper,
+        setValidator,
+    };
+    return _jsx(StepperContext.Provider, { value: stepperApi, children: children(stepperApi) });
+}
+DesktopStepper.displayName = 'DesktopStepper';

package/dist/esm/helperComponents/DesktopStepper/index.d.ts

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

package/dist/esm/helperComponents/DesktopStepper/index.js

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

package/dist/esm/helperComponents/DesktopStepper/styles.module.css

@@ -0,0 +1,6 @@
+.stepper{
+  display:flex;
+  flex-direction:row;
+  align-items:flex-start;
+  width:100%;
+}

package/dist/esm/helperComponents/MobileStep/MobileStep.d.ts

@@ -0,0 +1,8 @@
+import { StepViewData } from '../../types.js';
+export type MobileStepProps = {
+    /** Данные шага для отображения */
+    step: StepViewData;
+    /** data-test-id */
+    'data-test-id'?: string;
+};
+export declare function MobileStep({ step, 'data-test-id': testId }: MobileStepProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/helperComponents/MobileStep/MobileStep.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckSVG, CrossSVG } from '@cloud-ru/ds-icons/interface/system';
+import { Sun } from '@cloud-ru/ds-loader';
+import { STEP_STATE } from '../../constants.js';
+import { getTestIdBuilder } from '../../utils.js';
+import styles from './styles.module.css';
+const getStepTestId = getTestIdBuilder('_element-step');
+function getContent(state) {
+    switch (state) {
+        case STEP_STATE.Completed:
+            return _jsx(CheckSVG, { size: 24 });
+        case STEP_STATE.Rejected:
+            return _jsx(CrossSVG, { size: 24 });
+        case STEP_STATE.Loading:
+            return _jsx(Sun, { size: 's' });
+        default:
+            return null;
+    }
+}
+export function MobileStep({ step, 'data-test-id': testId }) {
+    return (_jsxs("button", { type: 'button', className: styles.step, onClick: step.onClick, disabled: !step.onClick, "data-test-id": getStepTestId(testId), "data-state": step.state, children: [_jsx("div", { className: styles.track }), _jsx("div", { className: styles.status, children: getContent(step.state) })] }));
+}

package/dist/esm/helperComponents/MobileStep/index.d.ts

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

package/dist/esm/helperComponents/MobileStep/index.js

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

package/dist/esm/helperComponents/MobileStep/styles.module.css

@@ -0,0 +1,114 @@
+.step{
+  all:unset;
+  cursor:pointer;
+  position:relative;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  width:100%;
+  min-height:24px;
+  outline:none;
+}
+.step:disabled{
+  cursor:default;
+}
+.step:focus-visible{
+  border-radius:2px;
+  outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-available-complementary, #000000);
+  outline-offset:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
+}
+
+.track{
+  position:relative;
+  width:100%;
+  height:var(--sn-stepper-anatomy-size-s-progressWrapper-progressLine-height, var(--sn-primitive-dimension-4, 4px));
+  border-radius:var(--sn-stepper-anatomy-size-s-progressWrapper-progressLine-borderRadius, var(--sn-primitive-dimension-full, 10000px));
+  background-color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+  transition:background-color 150ms ease;
+}
+
+.status{
+  pointer-events:none;
+  position:absolute;
+  top:50%;
+  left:50%;
+  transform:translate(-50%, -50%);
+  display:none;
+  align-items:center;
+  justify-content:center;
+  width:var(--sn-stepper-anatomy-size-s-stepStatus-width, var(--sn-primitive-dimension-24, 24px));
+  height:var(--sn-stepper-anatomy-size-s-stepStatus-height, var(--sn-primitive-dimension-24, 24px));
+  border-radius:50%;
+}
+
+.track::after,
+.status::after{
+  pointer-events:none;
+  content:"";
+  position:absolute;
+  inset:0;
+  border-radius:inherit;
+  background-color:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(120, 123, 138, 0)));
+  transition:background-color 150ms ease;
+}
+
+.step[data-state=completed] .track::after,
+.step[data-state=completed] .status::after{
+  background-color:var(--sn-theme-color-material-stateLayer-darkOnAccent-defaultEmpty-filled, rgba(0, 0, 0, 0));
+}
+
+@media (hover: hover){
+  .step:not(:disabled):hover .track::after,
+  .step:not(:disabled):hover .status::after{
+    background-color:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(188, 195, 220, 0.1490196078)));
+  }
+}
+.step:not(:disabled):active .track::after,
+.step:not(:disabled):active .status::after{
+  background-color:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(188, 195, 220, 0.3019607843)));
+}
+
+@media (hover: hover){
+  .step[data-state=completed]:not(:disabled):hover .track::after,
+  .step[data-state=completed]:not(:disabled):hover .status::after{
+    background-color:var(--sn-theme-color-material-stateLayer-darkOnAccent-hovered-filled, rgba(0, 0, 0, 0.0588235294));
+  }
+}
+.step[data-state=completed]:not(:disabled):active .track::after,
+.step[data-state=completed]:not(:disabled):active .status::after{
+  background-color:var(--sn-theme-color-material-stateLayer-darkOnAccent-pressed-filled, rgba(0, 0, 0, 0.1215686275));
+}
+
+.step[data-state=current] .track{
+  background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
+}
+
+.step[data-state=completed] .track{
+  background-color:var(--sn-theme-color-primary-decor, var(--sn-brand-color-primary-80, var(--sn-brandRole-color-brandA-80, var(--sn-primitive-color-brandA-80, #caeadb))));
+}
+
+.step[data-state=completed] .status{
+  display:flex;
+  color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
+  background-color:var(--sn-theme-color-primary-decor, var(--sn-brand-color-primary-80, var(--sn-brandRole-color-brandA-80, var(--sn-primitive-color-brandA-80, #caeadb))));
+}
+
+.step[data-state=loading] .track{
+  background-color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+}
+
+.step[data-state=loading] .status{
+  display:flex;
+  color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-45, var(--sn-primitive-color-gray-45, #81869c)));
+  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3)));
+}
+
+.step[data-state=rejected] .track{
+  background-color:var(--sn-theme-color-red-accent, var(--sn-primitive-color-red-55, #d52e33));
+}
+
+.step[data-state=rejected] .status{
+  display:flex;
+  color:var(--sn-theme-color-red-onAccent, var(--sn-primitive-color-red-99, #fffaf7));
+  background-color:var(--sn-theme-color-red-accent, var(--sn-primitive-color-red-55, #d52e33));
+}

package/dist/esm/helperComponents/MobileStepper/MobileStepper.d.ts

@@ -0,0 +1,5 @@
+import { StepperProps } from '../../types.js';
+export declare function MobileStepper({ children, steps, className, onChangeCurrentStep, onCompleteChange, defaultCurrentStepIndex, validator, allowFreeNavigation, 'data-test-id': testId, }: StepperProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace MobileStepper {
+    var displayName: string;
+}

package/dist/esm/helperComponents/MobileStepper/MobileStepper.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Typography } from '@cloud-ru/ds-typography';
+import cn from 'classnames';
+import { StepperContext } from '../../context.js';
+import { useStepperController } from '../../hooks/useStepperController.js';
+import { MobileStep } from '../MobileStep/index.js';
+import styles from './styles.module.css';
+export function MobileStepper({ children, steps, className, onChangeCurrentStep, onCompleteChange, defaultCurrentStepIndex = 0, validator, allowFreeNavigation = false, 'data-test-id': testId, }) {
+    const { stepsView, currentStepIndex, isCompleted, stepCount, goNext, goPrev, resetValidation, setValidator } = useStepperController({
+        steps,
+        defaultCurrentStepIndex,
+        validator,
+        onChangeCurrentStep,
+        onCompleteChange,
+        allowFreeNavigation,
+    });
+    const currentStep = stepsView[currentStepIndex];
+    const stepper = (_jsxs("div", { className: cn(styles.stepper, className), "data-test-id": testId, children: [_jsx("div", { className: styles.steps, style: { gridTemplateColumns: `repeat(${stepsView.length}, 1fr)` }, children: stepsView.map((step, index) => (_jsx(MobileStep, { step: step, "data-test-id": testId }, step.title + index))) }), currentStep && (_jsxs("div", { className: styles.content, children: [_jsx(Typography, { variant: 'body', size: 'm', as: 'div', className: styles.title, children: currentStep.title }), currentStep.description && (_jsx(Typography, { variant: 'body', size: 's', as: 'div', className: styles.description, children: currentStep.description }))] }))] }));
+    const stepperApi = {
+        goNext,
+        goPrev,
+        currentStepIndex,
+        isCompleted,
+        resetValidation,
+        stepCount,
+        stepper,
+        setValidator,
+    };
+    return _jsx(StepperContext.Provider, { value: stepperApi, children: children(stepperApi) });
+}
+MobileStepper.displayName = 'MobileStepper';

package/dist/esm/helperComponents/MobileStepper/index.d.ts

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

package/dist/esm/helperComponents/MobileStepper/index.js

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

package/dist/esm/helperComponents/MobileStepper/styles.module.css

@@ -0,0 +1,32 @@
+.stepper{
+  display:flex;
+  flex-direction:column;
+  gap:var(--sn-stepper-anatomy-stepRow-gap, var(--sn-primitive-dimension-4, 4px));
+  width:100%;
+}
+
+.steps{
+  display:grid;
+  gap:var(--sn-stepper-anatomy-step-gap, var(--sn-primitive-dimension-8, 8px));
+  width:100%;
+}
+
+.content{
+  display:flex;
+  flex-direction:column;
+}
+
+.title{
+  overflow:hidden;
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+  text-overflow:ellipsis;
+  white-space:nowrap;
+}
+
+.description{
+  overflow:hidden;
+  display:-webkit-box;
+  -webkit-box-orient:vertical;
+  -webkit-line-clamp:2;
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+}

package/dist/esm/helperComponents/StepIcon/StepIcon.d.ts

@@ -0,0 +1,10 @@
+import { StepState } from '../../types.js';
+export type StepIconProps = {
+    /** Состояние шага */
+    state: StepState;
+    /** Порядковый номер шага (1-based) */
+    number: number;
+    /** CSS-класс */
+    className?: string;
+};
+export declare function StepIcon({ state, number, className }: StepIconProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/helperComponents/StepIcon/StepIcon.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CheckSVG, CrossSVG } from '@cloud-ru/ds-icons/interface/system';
+import { Sun } from '@cloud-ru/ds-loader';
+import { Typography } from '@cloud-ru/ds-typography';
+import cn from 'classnames';
+import { useMemo } from 'react';
+import { STEP_STATE } from '../../constants.js';
+import styles from './styles.module.css';
+function getContent(state, number) {
+    switch (state) {
+        case STEP_STATE.Completed:
+            return _jsx(CheckSVG, { size: 24 });
+        case STEP_STATE.Rejected:
+            return _jsx(CrossSVG, { size: 24 });
+        case STEP_STATE.Loading:
+            return _jsx(Sun, { size: 's' });
+        default:
+            return number;
+    }
+}
+export function StepIcon({ state, number, className }) {
+    const content = useMemo(() => getContent(state, number), [number, state]);
+    return (_jsx("div", { "data-state": state, className: cn(styles.icon, className), children: typeof content === 'number' ? (_jsx(Typography, { variant: 'label', size: 'l', as: 'span', children: content })) : (content) }));
+}

package/dist/esm/helperComponents/StepIcon/index.d.ts

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

package/dist/esm/helperComponents/StepIcon/index.js

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

package/dist/esm/helperComponents/StepIcon/styles.module.css

@@ -0,0 +1,35 @@
+.icon{
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  box-sizing:border-box;
+  width:var(--sn-stepper-anatomy-size-m-stepStatus-width, var(--sn-primitive-dimension-32, 32px));
+  height:var(--sn-stepper-anatomy-size-m-stepStatus-height, var(--sn-primitive-dimension-32, 32px));
+  border:var(--sn-stepper-anatomy-size-m-stepStatus-borderWidth, var(--sn-primitive-strokeWeight-strokeRegular, 1px)) solid transparent;
+  border-radius:50%;
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+  background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
+  transition:background-color 150ms ease, color 150ms ease, border-color 150ms ease;
+}
+.icon[data-state=waiting]{
+  border-color:var(--sn-theme-color-available-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+  background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
+}
+.icon[data-state=current]{
+  color:var(--sn-theme-color-primary-onAccent, var(--sn-brand-color-primary-onAccentLight, var(--sn-brandRole-color-brandA-onAccentLight, var(--sn-primitive-color-brandA-99, #fbfffc))));
+  background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
+}
+.icon[data-state=loading]{
+  border-color:var(--sn-theme-color-available-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
+  color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-45, var(--sn-primitive-color-gray-45, #81869c)));
+  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3)));
+}
+.icon[data-state=completed]{
+  color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
+  background-color:var(--sn-theme-color-primary-decor, var(--sn-brand-color-primary-80, var(--sn-brandRole-color-brandA-80, var(--sn-primitive-color-brandA-80, #caeadb))));
+}
+.icon[data-state=rejected]{
+  color:var(--sn-theme-color-red-onAccent, var(--sn-primitive-color-red-99, #fffaf7));
+  background-color:var(--sn-theme-color-red-accent, var(--sn-primitive-color-red-55, #d52e33));
+}

package/dist/esm/helperComponents/index.d.ts

@@ -0,0 +1,5 @@
+export * from './DesktopStep/index.js';
+export * from './DesktopStepper/index.js';
+export * from './MobileStep/index.js';
+export * from './MobileStepper/index.js';
+export * from './StepIcon/index.js';