@salutejs/plasma-new-hope 0.158.0-canary.1464.11126763959.0 → 0.159.0-canary.1443.11131308290.0

package/styled-components/es/components/Slider/components/Single/Single.js

@@ -1,5 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["min", "max", "value", "disabled", "onChangeCommitted", "onChange", "ariaLabel", "label", "labelContentLeft", "showRangeValues", "showCurrentValue", "hideMinValueDiff", "hideMaxValueDiff", "labelPlacement", "rangeValuesPlacement", "multipleStepSize", "defaultValue", "size", "name"];
+var _excluded = ["min", "max", "value", "disabled", "onChangeCommitted", "onChange", "ariaLabel", "label", "labelContentLeft", "showRangeValues", "showCurrentValue", "hideMinValueDiff", "hideMaxValueDiff", "labelPlacement", "rangeValuesPlacement", "multipleStepSize", "size"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -18,12 +18,10 @@ import React, { useCallback, useEffect, useState, useRef } from 'react';
 import { SliderBase } from '../SliderBase/SliderBase';
 import { Handler } from '../../ui';
 import { sizeData } from '../../utils';
-import { cx, isNumber, noop } from '../../../../utils';
+import { cx, isNumber } from '../../../../utils';
 import { classes } from '../../Slider.tokens';
-import { InputHidden } from '../SliderBase/SliderBase.styles';
 import { Label, LabelContentLeft, LabelWrapper, SingleWrapper, SliderBaseWrapper, StyledRangeValue } from './Single.styles';
 export var SingleSlider = function SingleSlider(_ref) {
-  var _ref2;
   var min = _ref.min,
     max = _ref.max,
     value = _ref.value,
@@ -43,10 +41,8 @@ export var SingleSlider = function SingleSlider(_ref) {
     rangeValuesPlacement = _ref$rangeValuesPlace === void 0 ? 'outer' : _ref$rangeValuesPlace,
     _ref$multipleStepSize = _ref.multipleStepSize,
     multipleStepSize = _ref$multipleStepSize === void 0 ? 10 : _ref$multipleStepSize,
-    defaultValue = _ref.defaultValue,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'm' : _ref$size,
-    name = _ref.name,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState({
       xHandle: 0,
@@ -56,7 +52,6 @@ export var SingleSlider = function SingleSlider(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     state = _useState2[0],
     setState = _useState2[1];
-  var innerRef = useRef(null);
   var _useState3 = useState(0),
     _useState4 = _slicedToArray(_useState3, 2),
     startOffset = _useState4[0],
@@ -65,7 +60,7 @@ export var SingleSlider = function SingleSlider(_ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     endOffset = _useState6[0],
     setEndOffset = _useState6[1];
-  var _useState7 = useState((_ref2 = value !== null && value !== void 0 ? value : defaultValue) !== null && _ref2 !== void 0 ? _ref2 : min),
+  var _useState7 = useState(value),
     _useState8 = _slicedToArray(_useState7, 2),
     dragValue = _useState8[0],
     setDragValue = _useState8[1];
@@ -73,14 +68,14 @@ export var SingleSlider = function SingleSlider(_ref) {
   var hasLabelContent = label || labelContentLeft;
   var labelPlacementClass = labelPlacement === 'outer' ? classes.labelPlacementOuter : classes.labelPlacementInner;
   var rangeValuesPlacementClass = rangeValuesPlacement === 'outer' ? classes.rangeValuesPlacementOuter : classes.rangeValuesPlacementInner;
-  var hideMinValueDiffClass = hideMinValueDiff && dragValue - min <= hideMinValueDiff ? classes.hideMinValue : '';
-  var hideMaxValueDiffClass = hideMaxValueDiff && max - dragValue <= hideMaxValueDiff ? classes.hideMaxValue : '';
+  var hideMinValueDiffClass = hideMinValueDiff && value - min <= hideMinValueDiff ? classes.hideMinValue : '';
+  var hideMaxValueDiffClass = hideMaxValueDiff && max - value <= hideMaxValueDiff ? classes.hideMaxValue : '';
   var startLabelRef = useRef(null);
   var endLabelRef = useRef(null);
   var activeFirstValue = dragValue === min ? classes.activeRangeValue : undefined;
   var activeSecondValue = dragValue === max ? classes.activeRangeValue : undefined;
   useEffect(function () {
-    var localValue = Math.min(Math.max(dragValue, min), max) - min;
+    var localValue = Math.min(Math.max(value, min), max) - min;
     if (rangeValuesPlacement === 'outer') {
       var _startLabelRef$curren, _endLabelRef$current;
       var startWidth = (_startLabelRef$curren = startLabelRef.current) === null || _startLabelRef$curren === void 0 ? void 0 : _startLabelRef$curren.offsetWidth;
@@ -101,7 +96,7 @@ export var SingleSlider = function SingleSlider(_ref) {
         railFillWidth: stepSize * localValue
       });
     });
-  }, [dragValue, labelPlacement, stepSize, rangeValuesPlacement, min, max, setStartOffset, setEndOffset]);
+  }, [value, labelPlacement, stepSize, rangeValuesPlacement, min, max, setStartOffset, setEndOffset]);
   var setStepSize = useCallback(function (newStepSize) {
     setState(function (prevState) {
       return _objectSpread(_objectSpread({}, prevState), {}, {
@@ -118,17 +113,7 @@ export var SingleSlider = function SingleSlider(_ref) {
       });
     });
     if (onChange) {
-      if (value !== undefined) {
-        onChange(newValue);
-      }
-      if (name && !value) {
-        onChange({
-          target: {
-            value: newValue,
-            name: name
-          }
-        });
-      }
+      onChange(newValue);
     }
     setDragValue(newValue);
   };
@@ -179,11 +164,5 @@ export var SingleSlider = function SingleSlider(_ref) {
   })), showRangeValues && /*#__PURE__*/React.createElement(StyledRangeValue, {
     ref: endLabelRef,
     className: cx(classes.maxRangeValue, hideMaxValueDiffClass, activeSecondValue)
-  }, max)), /*#__PURE__*/React.createElement(InputHidden, _extends({
-    name: name,
-    type: "number",
-    datatype: "slider-single",
-    value: dragValue,
-    ref: innerRef
-  }, noop)));
+  }, max)));
 };

package/styled-components/es/components/Slider/components/SliderBase/SliderBase.styles.js

@@ -1,5 +1,4 @@
 import styled from 'styled-components';
-import { applyHidden } from '../../../../mixins';
 import { tokens } from '../../Slider.tokens';
 export var Slider = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-ik0bjb-0"
@@ -12,7 +11,4 @@ export var Rail = /*#__PURE__*/styled.div.withConfig({
 })(["position:relative;top:50%;height:var(", ");border-radius:var(", ");background-color:var(", ");overflow:hidden;transform:translateY(-50%);"], tokens.railHeight, tokens.railBorderRadius, tokens.railBackgroundColor);
 export var Fill = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-ik0bjb-3"
-})(["position:absolute;height:100%;top:0;left:0;background:var(", ");width:0;"], tokens.fillColor);
-export var InputHidden = /*#__PURE__*/styled.input.withConfig({
-  componentId: "plasma-new-hope__sc-ik0bjb-4"
-})(["", ";"], /*#__PURE__*/applyHidden());
+})(["position:absolute;height:100%;top:0;left:0;background:var(", ");width:0;"], tokens.fillColor);

package/styled-components/es/components/Slider/components/index.js

@@ -1,4 +1,3 @@
 export * from './Single/Single';
 export * from './Double/Double';
-export * from './DoubleUncontrolled/DoubleUncontrolled';
 export {};

package/styled-components/es/components/Steps/Steps.js

@@ -0,0 +1,123 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["view", "size", "orientation", "contentAlign", "hasLine", "hasContent", "hasLoader", "items", "onChange", "current", "status"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import React, { forwardRef, useState, useEffect } from 'react';
+import cls from 'classnames';
+import { classes } from './Steps.tokens';
+import { base } from './Steps.styles';
+import { StepItem } from './ui';
+import { base as sizeCSS } from './variations/_size/base';
+import { base as viewCSS } from './variations/_view/base';
+export var stepsRoot = function stepsRoot(Root) {
+  return /*#__PURE__*/forwardRef(function (props, outerRef) {
+    var _props$view = props.view,
+      view = _props$view === void 0 ? 'default' : _props$view,
+      _props$size = props.size,
+      size = _props$size === void 0 ? 's' : _props$size,
+      _props$orientation = props.orientation,
+      orientation = _props$orientation === void 0 ? 'horizontal' : _props$orientation,
+      _props$contentAlign = props.contentAlign,
+      contentAlign = _props$contentAlign === void 0 ? 'left' : _props$contentAlign,
+      _props$hasLine = props.hasLine,
+      hasLine = _props$hasLine === void 0 ? true : _props$hasLine,
+      _props$hasContent = props.hasContent,
+      hasContent = _props$hasContent === void 0 ? 'all' : _props$hasContent,
+      hasLoader = props.hasLoader,
+      _props$items = props.items,
+      items = _props$items === void 0 ? [] : _props$items,
+      onChange = props.onChange,
+      current = props.current,
+      status = props.status,
+      rest = _objectWithoutProperties(props, _excluded);
+    var _useState = useState(),
+      _useState2 = _slicedToArray(_useState, 2),
+      prevIndex = _useState2[0],
+      setPrevIndex = _useState2[1];
+    var isUncontrolled = current !== undefined;
+    var hasIndicator = items.some(function (item) {
+      return item.indicator != null;
+    });
+    var isSimple = items.every(function (item) {
+      return !item.title && !item.content;
+    });
+    useEffect(function () {
+      return function () {
+        if (current !== undefined) {
+          setPrevIndex(current);
+        } else {
+          var index = items.findIndex(function (item) {
+            return item.status === 'active';
+          });
+          setPrevIndex(index !== -1 ? index : undefined);
+        }
+      };
+    }, [current, items]);
+    return /*#__PURE__*/React.createElement(Root, _extends({
+      size: size,
+      view: view,
+      ref: outerRef,
+      className: cls(_defineProperty(_defineProperty(_defineProperty({}, classes.verticalOrientation, orientation === 'vertical'), classes.simple, isSimple), classes.hasIndicator, hasIndicator))
+    }, rest), items.map(function (item, index) {
+      var itemStatus = 'inactive';
+      if (isUncontrolled) {
+        if (current > index) {
+          itemStatus = 'completed';
+        } else if (current === index) {
+          itemStatus = status || 'active';
+        }
+      } else {
+        itemStatus = status || item.status || 'inactive';
+      }
+      if (item.disabled) {
+        itemStatus = 'inactive';
+      }
+      var isActive = itemStatus === 'active';
+      var content = item.content;
+      if (hasContent === 'active' && !isActive || hasContent === 'none') {
+        content = '';
+      }
+      return /*#__PURE__*/React.createElement(StepItem, {
+        key: index,
+        index: index,
+        title: item.title,
+        content: content,
+        indicator: item.indicator,
+        status: itemStatus,
+        size: size,
+        orientation: orientation,
+        contentAlign: orientation === 'horizontal' ? contentAlign : 'left',
+        hasLine: hasLine,
+        hasLoader: hasLoader && isActive,
+        onClick: onChange ? function () {
+          return onChange(item, index, prevIndex);
+        } : undefined,
+        items: items
+      });
+    }));
+  });
+};
+export var stepsConfig = {
+  name: 'Steps',
+  tag: 'div',
+  layout: stepsRoot,
+  base: base,
+  variations: {
+    size: sizeCSS,
+    view: viewCSS
+  },
+  defaults: {
+    view: 'default',
+    size: 's'
+  }
+};

package/styled-components/es/components/Steps/Steps.review-doc.mdx

@@ -0,0 +1,304 @@
+---
+id: steps
+title: Steps
+---
+
+# Steps
+Шаги могут отображаться в нескольких размерах, в упрощенном виде и в горизонтальной/вертикальной ориентации
+
+```tsx live
+import { ReactNode } from 'react';
+
+export type StepStatus = 'active' | 'inactive' | 'completed';
+
+export interface StepItemProps {
+  /**
+   * Заголовок
+   */
+  title?: string;
+  /**
+   * Контент, может быть как React компонентом, так и функцией
+   */
+  content?: string | ReactNode | ((status: StepStatus, index: number, items: StepItemProps[]) => ReactNode);
+  /**
+   * Индикатор шага, может быть как React компонентом, так и функцией
+   */
+  indicator?: number | string | ReactNode | ((status: StepStatus, item: StepItemProps) => ReactNode | null);
+  /**
+   * Статус шага: активный, инактивный, завершенный
+   * @description
+   * active - активный шаг
+   * inactive - не пройденный шаг
+   * completed - пройденный шаг
+   */
+  status?: StepStatus;
+  /**
+   * Отключенный шаг
+   * @default false
+   */
+  disabled?: boolean;
+}
+
+interface BaseSteps {
+  /**
+   * Ориентация компонента
+   * @default 'horizontal'
+   */
+  orientation?: 'horizontal' | 'vertical';
+  /**
+   * Выравнивание контента в шагах
+   * @default 'left'
+   */
+  contentAlign?: 'left' | 'center';
+  /**
+   * Включает разделительную линию
+   * @default true
+   */
+  hasLine?: boolean;
+  /**
+   * Индекс текущего шага, для uncontrolled компонента
+   */
+  current?: number;
+  /**
+   * Статус текущего шага, имеет приоритет над item.status
+   */
+  status?: StepStatus;
+  /**
+   * Обработчик изменения шага, делает индикаторы и заголовки шагов кликабельными
+   */
+  onChange?: (item: StepItemProps, index: number, prevIndex?: number) => void;
+  /**
+   * Массив шагов
+   */
+  items: StepItemProps[];
+}
+
+type IndicatorSizeSimple = 8 | 16;
+type IndicatorSize = 24 | 36;
+
+export type Steps = BaseSteps & {
+  /**
+   * Размер шага
+   */
+  size: 'xs' | 's';
+  indicatorSize: never;
+} & {
+  /**
+   * Размер шага
+   */
+  size: 'm' | 'l';
+  /**
+   * Размер индикатора
+   */
+  indicatorSize: IndicatorSize | IndicatorSizeSimple;
+};
+
+```
+
+примеры использования https://codesandbox.io/p/devbox/crzql2?file=%2Fsrc%2FDemo.tsx%3A23%2C1
+
+```
+import React, { useState } from 'react';
+import { fullItems } from './App.data.tsx';
+import { Steps } from './Steps/Steps.tsx';
+import { StepItemProps, StepStatus } from './Steps/Steps.types';
+
+const DemoContent: React.FC<{ onClick: () => void; status: string; index?: number; current?: number }> = ({
+  onClick,
+  status,
+  index,
+  current = 0,
+  children,
+}) => {
+  return (
+    <>
+      <div>Content</div>
+      <button onClick={onClick} disabled={index !== (current || 0)}>
+        {children}
+      </button>
+    </>
+  );
+};
+
+export const DemoWithExternalControl = () => {
+  const items = [
+    {
+      title: 'Title',
+      indicator: '1',
+      content: 'Content',
+    },
+    {
+      title: 'Title',
+      indicator: '2',
+      content: 'Content',
+    },
+    {
+      title: 'Title',
+      indicator: '3',
+      content: 'Content',
+    },
+    {
+      title: 'Title',
+      indicator: '4',
+      content: 'Content',
+    },
+  ];
+
+  const [current, setCurrent] = useState(1);
+  const [status, setStatus] = useState('active');
+
+  const isLast = current === items.length - 1;
+
+  const onClick = () => {
+    if (isLast) {
+      setStatus('completed');
+    } else {
+      setCurrent(current + 1);
+    }
+  };
+
+  return (
+    <>
+      <Steps style={{ width: '1000px' }} current={current} status={status} items={items} />
+      <br />
+      <div>
+        External control:{' '}
+        <button onClick={onClick} style={{ width: '5rem' }}>
+          {isLast ? 'complete' : 'next'}
+        </button>
+      </div>
+      <hr />
+    </>
+  );
+};
+
+export const DemoWithInternalControls = () => {
+  const [current, setCurrent] = useState(undefined);
+  const [status, setStatus] = useState<StepStatus | undefined>();
+
+  const renderContent = (status, index, items) => {
+    const isFirst = index === 0 && current === undefined;
+    const isLast = index === items.length - 1;
+
+    const onNext = () => setCurrent((current) => (current === undefined ? 0 : current + 1));
+    const onComplete = () => {
+      setStatus('completed');
+    };
+
+    return (
+      <DemoContent onClick={isLast ? onComplete : onNext} index={index} status={status} current={current}>
+        {isFirst && 'go'}
+        {isLast && 'complete'}
+        {!isFirst && !isLast && 'next'}
+      </DemoContent>
+    );
+  };
+
+  return (
+    <Steps
+      current={current}
+      status={status}
+      items={[
+        {
+          title: 'Title',
+          indicator: '1',
+          content: renderContent,
+        },
+        {
+          title: 'Title',
+          indicator: '2',
+          content: renderContent,
+        },
+        {
+          title: 'Title',
+          indicator: '3',
+          content: renderContent,
+        },
+        {
+          title: 'Title',
+          indicator: '4',
+          content: renderContent,
+        },
+      ]}
+    />
+  );
+};
+
+export const DemoWithControlledUsage = () => {
+  const [exampleItems, setExampleItems] = useState<StepItemProps[]>(() =>
+    fullItems.map((item) => ({ ...item, status: 'inactive' }))
+  );
+
+  return (
+    <Steps
+      style={{ width: '1000px' }}
+      onChange={(item, index) => {
+        setExampleItems(
+          exampleItems.map((item, itemIndex) => {
+            if (index > itemIndex) {
+              return { ...item, status: 'completed' };
+            }
+
+            if (index === itemIndex) {
+              return { ...item, status: 'active' };
+            }
+
+            return { ...item, status: 'inactive' };
+          })
+        );
+      }}
+      items={exampleItems}
+    />
+  );
+};
+
+export const DemoWithControlledFreeUsage = () => {
+  const [items, setItems] = useState<StepItemProps[]>(() => fullItems.map((item) => ({ ...item, status: 'inactive' })));
+
+  return (
+    <Steps
+      style={{ width: '1000px' }}
+      onChange={(item, index, prevIndex) => {
+        console.log('!!! onChange', index, prevIndex);
+
+        const newItems = [...items];
+        if (prevIndex !== undefined) {
+          newItems[prevIndex].status = 'completed';
+        }
+        newItems[index].status = 'active';
+
+        setItems(newItems);
+      }}
+      items={items}
+    />
+  );
+};
+
+export const DemoControlledWithStatus = () => {
+  const [items, setItems] = useState<StepItemProps[]>(() => fullItems.map(({ status, ...item }) => ({ ...item })));
+  return (
+    <Steps
+      style={{ width: '1000px' }}
+      current={2}
+      status="active"
+      onClick={(item, index) => {
+        setItems(
+          items.map((item, itemIndex) => {
+            if (index > itemIndex) {
+              return { ...item, status: 'completed' };
+            }
+
+            if (index === itemIndex) {
+              return { ...item, status: 'active' };
+            }
+
+            return { ...item, status: 'inactive' };
+          })
+        );
+      }}
+      items={items}
+    />
+  );
+};
+
+```

package/styled-components/es/components/Steps/Steps.styles.js

@@ -0,0 +1,3 @@
+import { css } from 'styled-components';
+import { classes, tokens } from './Steps.tokens';
+export var base = /*#__PURE__*/css(["display:flex;flex-direction:row;&.", "{align-items:center;&.", "{height:var(", ");}&:not(.", "){height:var(", ");}&.", "{&.", "{width:var(", ");height:auto;}&:not(.", "){width:var(", ");height:auto;}}}&.", "{display:inline;flex-direction:column;justify-content:center;&.", "{display:inline-flex;}}"], classes.simple, classes.hasIndicator, tokens.activeIndicatorSize, classes.hasIndicator, tokens.activeBulletSize, classes.verticalOrientation, classes.hasIndicator, tokens.activeIndicatorSize, classes.hasIndicator, tokens.activeBulletSize, classes.verticalOrientation, classes.simple);

package/styled-components/es/components/Steps/Steps.template-doc.mdx

@@ -0,0 +1,84 @@
+---
+id: steps
+title: Steps
+---
+
+import { PropsTable, Description } from '@site/src/components';
+
+# Steps
+
+<Description name="Steps" />
+<PropsTable name="Steps" />
+
+## Вариант использования с управлением текущим элементом из вне
+
+```tsx live
+import React, { useState } from 'react';
+import { Steps, Button } from '@salutejs/{{ package }}';
+
+export function App() {
+    const items = [{
+        indicator: 1,
+    }, {
+        indicator: 2,
+    }, {
+        indicator: 3,
+    }];
+
+    const [current, setCurrent] = useState<number>(0);
+    const onClick = () => setCurrent(() => current + 1);
+
+    return (
+        <section>
+            <Steps items={items}
+                current={current}
+            />
+            <br />
+            <Button view="secondary" onClick={onClick}>
+                Next
+            </Button>
+        </section>
+    );
+}
+```
+
+## Вариант более гибкого использования через onChange и status в items
+
+```tsx live
+import React, { useState } from 'react';
+import { Steps, StepItemProps  } from '@salutejs/{{ package }}';
+
+export function App() {
+    const initialItems = [{
+        indicator: 1,
+        title: 'Title',
+        content: 'Content',
+    }, {
+        indicator: 2,
+        title: 'Title',
+        content: 'Content',
+    }, {
+        indicator: 3,
+        title: 'Title',
+        content: 'Content',
+    }];
+
+    const [items, setItems] = useState(initialItems);
+
+    const onChange = (item: StepItemProps, index: number, prevIndex: number) => {
+        if (prevIndex !== undefined) {
+            items[prevIndex].status = 'completed';
+        }
+
+        items[index].status = 'active';
+
+        setItems([...items]);
+    };
+
+    return (
+        <section>
+            <Steps items={items} onChange={onChange} />
+        </section>
+    );
+}
+```