@cloud-ru/ds-stepper 1.0.0

package/dist/esm/helperComponents/index.js

@@ -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';

package/dist/esm/hooks/useStepperController.d.ts

@@ -0,0 +1,25 @@
+import { StepData, StepState, StepsValidator, StepViewData } from '../types.js';
+export type UseStepperControllerParams = {
+    steps: StepData[];
+    defaultCurrentStepIndex?: number;
+    validator?: StepsValidator;
+    onChangeCurrentStep?: (newValue: number, prevValue: number) => void;
+    onCompleteChange?: (isCompleted: boolean) => void;
+    allowFreeNavigation: boolean;
+};
+export type UseStepperControllerResult = {
+    stepsView: StepViewData[];
+    currentStepIndex: number;
+    currentStepState: StepState;
+    isCompleted: boolean;
+    stepCount: number;
+    goNext: (stepIndex?: number) => void;
+    goPrev: (stepIndex?: number) => void;
+    resetValidation: () => void;
+    setValidator: (validator: StepsValidator) => void;
+};
+/**
+ * Общий контроллер состояния шагов — используется одинаково в Stepper и
+ * MobileStepper. Порт из @snack-uikit/stepper без изменений поведения.
+ */
+export declare function useStepperController({ steps, defaultCurrentStepIndex, validator: validatorProp, onChangeCurrentStep, onCompleteChange, allowFreeNavigation, }: UseStepperControllerParams): UseStepperControllerResult;

package/dist/esm/hooks/useStepperController.js

@@ -0,0 +1,121 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { STEP_STATE } from '../constants.js';
+const DEFAULT_VALIDATOR = async () => true;
+/**
+ * Общий контроллер состояния шагов — используется одинаково в Stepper и
+ * MobileStepper. Порт из @snack-uikit/stepper без изменений поведения.
+ */
+export function useStepperController({ steps, defaultCurrentStepIndex = 0, validator: validatorProp = DEFAULT_VALIDATOR, onChangeCurrentStep, onCompleteChange, allowFreeNavigation, }) {
+    const isCompletedByDefault = defaultCurrentStepIndex === steps.length - 1;
+    const [currentStepState, setCurrentStepState] = useState(isCompletedByDefault ? STEP_STATE.Completed : STEP_STATE.Current);
+    const [currentStepIndex, setCurrentStepIndexValue] = useState(defaultCurrentStepIndex);
+    const [isCompleted, setIsCompleted] = useState(isCompletedByDefault);
+    const [stepsValidator, setStepsValidator] = useState();
+    useEffect(() => {
+        onCompleteChange?.(isCompleted);
+    }, [isCompleted, onCompleteChange]);
+    const setCurrentStepIndex = useCallback((newValue) => {
+        setCurrentStepIndexValue(prevValue => {
+            if (prevValue !== newValue) {
+                onChangeCurrentStep?.(newValue, prevValue);
+            }
+            return newValue;
+        });
+    }, [onChangeCurrentStep]);
+    const goNext = useCallback((newStepIndexUnsafety = currentStepIndex + 1) => {
+        if (currentStepIndex >= steps.length || isCompleted || newStepIndexUnsafety <= currentStepIndex) {
+            return;
+        }
+        const newStepIndex = Math.min(steps.length - 1, newStepIndexUnsafety);
+        setCurrentStepState(STEP_STATE.Loading);
+        const validator = stepsValidator?.value || validatorProp;
+        validator(currentStepIndex, newStepIndex)
+            .catch(() => false)
+            .then(isValid => {
+            if (!isValid) {
+                setCurrentStepState(STEP_STATE.Rejected);
+                return;
+            }
+            if (currentStepIndex === steps.length - 1) {
+                setCurrentStepState(STEP_STATE.Completed);
+                setIsCompleted(true);
+            }
+            else {
+                setCurrentStepIndex(newStepIndex);
+                setCurrentStepState(STEP_STATE.Current);
+            }
+        });
+    }, [currentStepIndex, isCompleted, setCurrentStepIndex, steps.length, stepsValidator?.value, validatorProp]);
+    const moveToStep = useCallback((stepIndex) => {
+        if (isCompleted) {
+            setIsCompleted(false);
+        }
+        setCurrentStepIndex(stepIndex);
+        setCurrentStepState(STEP_STATE.Current);
+    }, [isCompleted, setCurrentStepIndex]);
+    const goToStep = useCallback((newStepIndex) => {
+        if (newStepIndex < 0 || newStepIndex >= steps.length) {
+            return;
+        }
+        if (newStepIndex === currentStepIndex) {
+            return;
+        }
+        moveToStep(newStepIndex);
+    }, [currentStepIndex, steps, moveToStep]);
+    const goPrev = useCallback((index = currentStepIndex - 1) => {
+        if (currentStepIndex === 0 || index < 0 || index > currentStepIndex) {
+            return;
+        }
+        if (index === currentStepIndex && !isCompleted) {
+            return;
+        }
+        moveToStep(index);
+    }, [currentStepIndex, isCompleted, moveToStep]);
+    const getStepOnClick = useCallback((stepIndex) => {
+        if (allowFreeNavigation) {
+            return () => goToStep(stepIndex);
+        }
+        if (stepIndex < currentStepIndex || (stepIndex === currentStepIndex && isCompleted)) {
+            return () => goPrev(stepIndex);
+        }
+        if (stepIndex === currentStepIndex + 1) {
+            return () => goNext();
+        }
+        return undefined;
+    }, [allowFreeNavigation, currentStepIndex, goNext, goPrev, goToStep, isCompleted]);
+    const stepsView = useMemo(() => steps.map((step, index) => {
+        const number = index + 1;
+        let state = STEP_STATE.Waiting;
+        if (index < currentStepIndex) {
+            state = STEP_STATE.Completed;
+        }
+        else if (index === currentStepIndex) {
+            state = currentStepState;
+        }
+        return {
+            ...step,
+            number,
+            state,
+            onClick: getStepOnClick(index),
+        };
+    }), [steps, currentStepIndex, currentStepState, getStepOnClick]);
+    const resetValidation = useCallback(() => {
+        if (currentStepState === STEP_STATE.Rejected) {
+            setCurrentStepState(STEP_STATE.Current);
+        }
+    }, [currentStepState]);
+    const setValidator = useCallback((validator) => {
+        setStepsValidator({ value: validator });
+    }, []);
+    return {
+        stepsView,
+        currentStepIndex,
+        currentStepState,
+        isCompleted,
+        stepCount: steps.length,
+        goNext,
+        goPrev,
+        resetValidation,
+        setValidator,
+    };
+}

package/dist/esm/index.d.ts

@@ -0,0 +1,5 @@
+export * from './components/index.js';
+export * from './constants.js';
+export * from './context.js';
+export * from './types.js';
+export * from './utils.js';

package/dist/esm/index.js

@@ -0,0 +1,5 @@
+export * from './components/index.js';
+export * from './constants.js';
+export * from './context.js';
+export * from './types.js';
+export * from './utils.js';

package/dist/esm/style.css

@@ -0,0 +1,356 @@
+@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)));
+}
+.stepper{
+  display:flex;
+  flex-direction:row;
+  align-items:flex-start;
+  width:100%;
+}
+.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));
+}
+.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)));
+}
+.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/types.d.ts

@@ -0,0 +1,51 @@
+import { ValueOf } from '@cloud-ru/ds-utils';
+import { ReactElement } from 'react';
+import { STEP_STATE } from './constants.js';
+export type StepState = ValueOf<typeof STEP_STATE>;
+export type StepsValidator = (prevStepIndex: number, newStepIndex: number) => Promise<boolean>;
+export type StepData = {
+    title: string;
+    description?: string;
+};
+export type StepViewData = StepData & {
+    onClick?: () => void;
+    state: StepState;
+    number: number;
+};
+export type StepperApi = {
+    stepper: ReactElement;
+    goNext: (stepIndex?: number) => void;
+    goPrev: (stepIndex?: number) => void;
+    resetValidation: () => void;
+    setValidator: (validator: StepsValidator) => void;
+    isCompleted: boolean;
+    currentStepIndex: number;
+    stepCount: number;
+};
+/** Псевдоним `StepperApi` для обратной совместимости. */
+export type StepperState = StepperApi;
+/** Публичные пропсы адаптивного `Stepper` (единые для desktop/mobile поверхностей). */
+export type StepperProps = {
+    /** Массив шагов */
+    steps: StepData[];
+    /** Индекс текущего шага по-дефолту */
+    defaultCurrentStepIndex?: number;
+    /** Валидатор шагов. Выполняется при смене шага. Принимает первым аргументом индекс текущего, вторым — индекс нового шага. Возвращает Promise<boolean>: false → шаг помечается как Rejected. */
+    validator?: StepsValidator;
+    /** CSS-класс */
+    className?: string;
+    /**
+     * Render function. Принимает `stepper` — JSX-элемент степпера, а также api:
+     * `goNext`, `goPrev`, `resetValidation`, `setValidator`, `isCompleted`,
+     * `currentStepIndex`, `stepCount`.
+     */
+    children: (params: StepperApi) => ReactElement;
+    /** Колбек смены текущего степа */
+    onChangeCurrentStep?: (newValue: number, prevValue: number) => void;
+    /** Колбек изменения завершённости */
+    onCompleteChange?: (isCompleted: boolean) => void;
+    /** data-test-id */
+    'data-test-id'?: string;
+    /** Позволяет свободно переключаться между разными шагами без валидации */
+    allowFreeNavigation?: boolean;
+};

package/dist/esm/types.js

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

package/dist/esm/utils.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Собирает data-test-id для вложенных элементов: `${root}${postfix}`.
+ * Возвращает undefined если либо postfix, либо testId пустые — так родитель
+ * может передать атрибут только когда сам получил тест-ид.
+ */
+export declare const getTestIdBuilder: (postfix?: string) => (testId?: string) => string | undefined;

package/dist/esm/utils.js

@@ -0,0 +1,6 @@
+/**
+ * Собирает data-test-id для вложенных элементов: `${root}${postfix}`.
+ * Возвращает undefined если либо postfix, либо testId пустые — так родитель
+ * может передать атрибут только когда сам получил тест-ид.
+ */
+export const getTestIdBuilder = (postfix) => (testId) => postfix && testId ? `${testId}${postfix}` : undefined;