(0);
+ const onClick = () => setCurrent(() => current + 1);
+
+ return (
+
+ );
+}
+```
+
+## Вариант более гибкого использования через onChange и status в items
+
+```tsx live
+import React, { useState } from 'react';
+import { Steps, StepItemProps } from '@salutejs/plasma-giga';
+
+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 (
+
+ );
+}
+```
diff --git a/website/plasma-giga-docs/docs/components/Switch.mdx b/website/plasma-giga-docs/docs/components/Switch.mdx
new file mode 100644
index 0000000000..16dd194bca
--- /dev/null
+++ b/website/plasma-giga-docs/docs/components/Switch.mdx
@@ -0,0 +1,60 @@
+---
+id: switch
+title: Switch
+---
+
+import { PropsTable, Description } from '@site/src/components';
+
+# Switch
+
+
+
+## Использование
+Компонент `Switch` может содержать лейбл.
+
+```tsx live
+import React from 'react';
+import { Switch } from '@salutejs/plasma-giga';
+
+export function App() {
+ return (
+
+ );
+}
+```
+
+## Примеры
+
+### Размер Switch
+Размер компонента задается с помощью свойства `size`.
+
+```tsx live
+import React from 'react';
+import { Button } from '@salutejs/plasma-giga';
+
+export function App() {
+ return (
+
+
+
+
+
+ );
+}
+```
+
+Размер переключателя задается с помощью свойства `toggleSize`.
+
+```tsx live
+import React from 'react';
+import { Button } from '@salutejs/plasma-giga';
+
+export function App() {
+ return (
+
+
+
+
+ );
+}
+```
diff --git a/website/plasma-giga-docs/docs/components/Tabs.mdx b/website/plasma-giga-docs/docs/components/Tabs.mdx
new file mode 100644
index 0000000000..dad973a755
--- /dev/null
+++ b/website/plasma-giga-docs/docs/components/Tabs.mdx
@@ -0,0 +1,245 @@
+---
+id: tabs
+title: Tabs
+---
+
+import { PropsTable, Description } from '@site/src/components';
+
+## Tabs
+
+
+
+
+## TabItem
+
+
+
+
+:::caution Взаимоисключающие свойства
+Свойство `value` - это значение таба. Оно отображается справа от основного текста.
+`value` и `contentRight` взаимоисключающие: если передано одно, второе передать нельзя.
+:::
+
+## TabsController (deprecated)
+Вместо этого используйте Tabs, TabItem, указав параметры index, itemIndex, onIndexChange.
+
+
+
+
+## Использование
+
+### Стандартное подключение, без клавиатурной навигации
+
+```tsx live
+import React, { useState } from 'react';
+import { Tabs, TabItem } from '@salutejs/plasma-giga';
+import { IconClock } from '@salutejs/plasma-icons';
+
+export function App() {
+ const items = Array(4).fill(0);
+ const [index, setIndex] = useState(0);
+
+ return (
+
+
+ {items.map((_, i) => (
+ }
+ onClick={() => setIndex(i)}
+ >
+ {`Label${i + 1}`}
+
+ ))}
+
+
+ );
+}
+```
+
+### Расположение табов
+Табы могут быть горизонтальными (по умолчанию) и вертикальными. За это отвечает свойство `orientation`.
+
+```tsx live
+import React, { useState } from 'react';
+import { Tabs, TabItem } from '@salutejs/plasma-giga';
+import { IconClock } from '@salutejs/plasma-icons';
+
+export function App() {
+ const items = Array(8).fill(0);
+ const [index, setIndex] = useState(0);
+
+ return (
+
+
+ {items.map((_, i) => (
+ }
+ onClick={() => setIndex(i)}
+ >
+ {`Label${i + 1}`}
+
+ ))}
+
+
+ );
+}
+```
+
+### Пример с прокруткой
+
+```tsx live
+import React, { useState } from 'react';
+import { Tabs, TabItem } from '@salutejs/plasma-giga';
+import { IconClock } from '@salutejs/plasma-icons';
+
+export function App() {
+ const items = Array(8).fill(0);
+ const [index, setIndex] = useState(0);
+
+ return (
+
+
+ {items.map((_, i) => (
+ }
+ onClick={() => setIndex(i)}
+ >
+ {`Label${i + 1}`}
+
+ ))}
+
+
+ );
+}
+```
+
+### Пример с Dropdown
+
+```tsx live
+import React, { useState } from 'react';
+import { Tabs, TabItem, Dropdown } from '@salutejs/plasma-giga';
+
+export function App() {
+ const items = Array(8).fill(0);
+ const [index, setIndex] = useState(0);
+
+ const maxItemQuantity = 3;
+ const visibleItems = items.slice(0, maxItemQuantity);
+ const otherItems = items.slice(maxItemQuantity);
+
+ const dropdownItems = otherItems.map((_, i) => {
+ const itemIndex = maxItemQuantity + i;
+
+ return {
+ label: `Label${itemIndex + 1}`,
+ value: itemIndex,
+ };
+ });
+
+ return (
+
+
+ {visibleItems.map((_, i) => (
+ setIndex(i)}
+ tabIndex={0}
+ size="xs"
+ >
+ {`Label${i + 1}`}
+
+ ))}
+ {dropdownItems.length > 0 && (
+
+ setIndex(item.value)}>
+
+ ShowAll
+
+
+
+ )}
+
+
+Для горизонтальных табов: клавиши ArrowLeft, ArrowRight, Home, End для навигации по вкладкам.
+Для вертикальных табов: клавиши ArrowUp, ArrowDown, Home, End для навигации по вкладкам.
+
+```tsx live
+import React, { useState } from 'react';
+import { Tabs, TabItem } from '@salutejs/plasma-giga';
+import { IconClock } from '@salutejs/plasma-icons';
+
+export function App() {
+ const items = Array(4).fill(0);
+ const [horizontalIndex, setHorizontalIndex] = useState(0);
+ const [verticalIndex, setVerticalIndex] = useState(0);
+
+ return (
+
+
+
+ {items.map((_, i) => (
+ setHorizontalIndex(i)}
+ selected={i === horizontalIndex}
+ tabIndex={0}
+ contentLeft={}
+ onClick={() => setHorizontalIndex(i)}
+ >
+ {`Label${i + 1}`}
+
+ ))}
+
+
+
+
+
+ {items.map((_, i) => (
+ setVerticalIndex(i)}
+ selected={i === verticalIndex}
+ tabIndex={0}
+ contentLeft={}
+ onClick={() => setVerticalIndex(i)}
+ >
+ {`Label${i + 1}`}
+
+ ))}
+
+
+
+ }
+ />
+
+ );
+}
+```
+
+### Размеры компонента
+Высоту и ширину можно регулировать с помощью свойств `height` и `width`,
+указав значения в `rem` или соответствующие свойствам css значения.
+`height` и `width` отвечают за **всю** высоту и ширину компонента.
+
+```tsx live
+import React from 'react';
+import { TextArea } from '@salutejs/plasma-giga';
+
+export function App() {
+ return (
+
+
+
+ );
+}
+```
+
+Свойства `rows` и `cols` указываются в абсолютных единицах, отвечают за фиксированное количество строк и столбцов.
+
+```tsx live
+import React from 'react';
+import { TextArea } from '@salutejs/plasma-giga';
+
+export function App() {
+ return (
+
+
+
+ );
+}
+```
+
+### Autoresize
+Также можно включить автоматическое регулирование высоты поля ввода по длине контента внутри (параметра `value`).
+Для этого необходимо использовать свойство `autoResize`.
+
+Свойства `minAuto`, `maxAuto` указываются в абсолютных единицах и отвечают за минимальное и максимальное количество строк.
+
+```tsx live
+import React from 'react';
+import { TextArea } from '@salutejs/plasma-giga';
+
+export function App() {
+ const [value, setValue] = React.useState('Значение');
+
+ return (
+
+