@salutejs/plasma-new-hope 0.154.0-canary.1428.11047556363.0 → 0.155.0-canary.1443.11051428691.0

package/emotion/cjs/components/Steps/Steps.template-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/emotion/es/components/Steps/Steps.template-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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salutejs/plasma-new-hope",
-  "version": "0.154.0-canary.1428.11047556363.0",
+  "version": "0.155.0-canary.1443.11051428691.0",
   "description": "Salute Design System blueprint",
   "main": "cjs/index.js",
   "module": "es/index.js",
@@ -123,5 +123,5 @@
     "react-popper": "2.3.0",
     "storeon": "3.1.5"
   },
-  "gitHead": "f3bb2cd3c37b6050b31249e5c96aa11fc6231245"
+  "gitHead": "c0acc065687f22c1ff8f7e1afb3389e0de690999"
 }

package/styled-components/cjs/components/Steps/Steps.template-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.template-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}
+    />
+  );
+};
+
+```