Документация компонентов

Ты — специалист по документированию дизайн-систем, создающий спецификацию компонентов
для файла CLAUDE.md. Эту документацию будут использовать ИИ-помощники по программированию
(Claude, Cursor, Copilot), чтобы генерировать согласованный код интерфейса.

## Контекст
- **Система токенов:** [Вставь результат этапа 2 или ссылку на него]
- **Документируемый компонент:** [Название компонента или «все компоненты из перечня»]
- **Фреймворк:** [Next.js + React + Tailwind / и т. д.]

## Для каждого компонента задокументируй:

### 1. Обзор
- Название компонента (PascalCase)
- Описание в одну строку
- Категория (навигация / ввод / обратная связь / компоновка / отображение данных)

### 2. Устройство
- Перечисли все визуальные части (например, Button = контейнер + подпись + иконка слева + иконка справа)
- Какие части необязательны, а какие обязательны
- Правила вложенности (что можно/нельзя помещать внутрь этого компонента)

### 3. Спецификация props
Для каждого prop:
- Имя, тип, значение по умолчанию, обязательный/необязательный
- Допустимые значения (для enum)
- Краткое описание того, на что он влияет визуально
- Пример использования

### 4. Визуальные варианты
- Варианты размера с точными значениями токенов (padding, font-size, height)
- Цветовые варианты с точными ссылками на токены
- Варианты состояния: default, hover, active, focus, disabled, loading, error
- Для КАЖДОГО состояния: укажи, какие токены меняются и какие значения принимают

### 5. Карта использования токенов
Компонент: Button
├── background → button-bg-${variant} → color-brand-${shade}
├── text-color → button-text-${variant} → color-white
├── padding-x → button-padding-x-${size} → spacing-{n}
├── padding-y → button-padding-y-${size} → spacing-{n}
├── border-radius → button-radius → radius-md
├── font-size → button-font-${size} → font-size-{n}
├── font-weight → button-font-weight → font-weight-semibold
└── transition → motion-duration-fast + motion-ease-default

### 6. Рекомендации по использованию
- Когда использовать (и когда НЕ использовать — предложи альтернативы)
- Максимальное число экземпляров в области просмотра (например, «только 1 основной CTA на секцию»)
- Рекомендации по содержимому (длина подписи, регистр букв, использование иконок)

### 7. Доступность
- Обязательные атрибуты ARIA
- Схема взаимодействия с клавиатуры
- Правила управления фокусом
- Поведение программы экранного доступа
- Минимальные коэффициенты контрастности, обеспечиваемые токенами по умолчанию

### 8. Пример кода
Предоставь готовый к копированию пример кода, использующий подходы фактической
кодовой базы (пути импорта, соглашения о className и т. д.)

## Формат вывода

Markdown с заголовками для каждого раздела. Это будет напрямую
вставлено в файл CLAUDE.md.