@dxtmisha/wiki 0.39.2 → 0.39.4

package/src/media/mdx/Bars/bars.ru.mdx

@@ -1,98 +0,0 @@
-## Описание
-
-Универсальный компонент панели для заголовков приложений, панелей инструментов и контекстных панелей действий с поддержкой навигации, кнопок действий и режимов массовых операций.
-
-Bars предоставляет комплексное решение для создания согласованных элементов интерфейса верхнего уровня со структурированным макетом для заголовков, описаний, обратной навигации и интерактивных наборов кнопок. Компонент интегрирует переключение режима действий для контекстных операций, единую конфигурацию кнопок и состояния загрузки скелетонов для создания современных заголовков приложений и панелей инструментов.
-
-**Основные возможности:**
-
-- Структурированная текстовая иерархия (метка и описание с динамическим обновлением)
-- Настраиваемая кнопка назад с навигацией и переключением иконки закрытия
-- Гибкие массивы кнопок (bars) для основных действий справа
-- Режим действий с отдельным контентом и набором кнопок для массовых операций
-- Двусторонняя привязка (v-model:action) для синхронизации состояния
-- Единые атрибуты кнопок (buttonAttrs) для согласованной стилизации
-- Обработка событий для взаимодействий кликов и навигации
-- Интеграция системы скелетонов для состояний загрузки
-- Кастомизация иконок для кнопок назад и закрытия
-
-**Типичные сценарии использования:**
-
-- Заголовки экранов приложения с навигацией и действиями
-- Панели инструментов для разделов и страниц
-- Контекстные панели действий для операций с выбранными элементами
-- Заголовки поиска с элементами управления фильтрами и сортировкой
-- Экраны настроек с обратной навигацией
-- Заголовки списков с поддержкой массовых действий
-- Интерфейсы множественного выбора с режимом действий
-
-```html
-<script setup>
-import { ref } from 'vue'
-
-const actionMode = ref(false)
-const selectedCount = ref(0)
-
-const handleSearch = () => {
-  console.log('Нажат поиск')
-}
-
-const handleFilter = () => {
-  console.log('Нажат фильтр')
-}
-
-const handleDelete = () => {
-  console.log('Удалить выбранные элементы')
-  actionMode.value = false
-  selectedCount.value = 0
-}
-</script>
-
-<template>
-  <div class="app-layout">
-    <!-- Стандартный заголовок с навигацией и действиями -->
-    <Bars
-      label="Сообщения"
-      description="Ваши беседы"
-      icon-back="arrow_back"
-      :bars="[
-        { icon: 'search', onClick: handleSearch },
-        { icon: 'filter_list', onClick: handleFilter },
-        { icon: 'more_vert' }
-      ]"
-    />
-
-    <!-- Заголовок с режимом действий для массовых операций -->
-    <Bars
-      v-model:action="actionMode"
-      label="Контакты"
-      description="Управление контактами"
-      :action-label="`Выбрано: ${selectedCount}`"
-      action-description="Выберите действие"
-      icon-back="arrow_back"
-      icon-close="close"
-      :bars="[
-        { icon: 'add' },
-        { icon: 'search' }
-      ]"
-      :action-bars="[
-        { icon: 'share' },
-        { icon: 'delete', onClick: handleDelete }
-      ]"
-    />
-
-    <!-- Панель инструментов с пользовательскими атрибутами кнопок -->
-    <Bars
-      label="Настройки"
-      :button-attrs="{ secondary: true }"
-      :bars="[
-        { icon: 'sync', label: 'Синхр.' },
-        { icon: 'info', label: 'Инфо' }
-      ]"
-    />
-  </div>
-</template>
-```
-
-> Bars разработан как UI-компонент верхнего уровня для создания согласованных заголовков приложений, панелей инструментов и контекстных интерфейсов действий с комплексной поддержкой навигации, управления действиями и массовых операций.
-

package/src/media/mdx/Bars/slots.en.mdx

@@ -1,2 +0,0 @@
-- `bars: any` — Slot for placing action buttons in regular mode.
-- `actionBars: any` — Slot for placing buttons in action mode.

package/src/media/mdx/Bars/slots.ru.mdx

@@ -1,2 +0,0 @@
-- `bars: any` — Слот для размещения кнопок панели действий в обычном режиме.
-- `actionBars: any` — Слот для размещения кнопок в режиме действий (action mode).

package/src/media/mdx/Bars/v-model.en.mdx

@@ -1,28 +0,0 @@
-## State management via v-model
-
-Two-way binding of action mode state via `v-model:action`.
-
-**Parameters:**
-- `action: boolean` — action mode state of the bar
-
-```html
-<script setup>
-import { ref } from 'vue'
-
-const isAction = ref(false)
-</script>
-
-<template>
-  <button @click="isAction = true">Enable action mode</button>
-
-  <Bars v-model:action="isAction">
-    <template #bars>
-      <Button>Regular button</Button>
-    </template>
-    <template #actionBars>
-      <Button>Action button</Button>
-      <Button @click="isAction = false">Close</Button>
-    </template>
-  </Bars>
-</template>
-```

package/src/media/mdx/Bars/v-model.ru.mdx

@@ -1,28 +0,0 @@
-## Управление состоянием через v-model
-
-Двусторонняя привязка состояния action-режима через `v-model:action`.
-
-**Параметры:**
-- `action: boolean` — состояние action-режима панели
-
-```html
-<script setup>
-import { ref } from 'vue'
-
-const isAction = ref(false)
-</script>
-
-<template>
-  <button @click="isAction = true">Включить action-режим</button>
-
-  <Bars v-model:action="isAction">
-    <template #bars>
-      <Button>Обычная кнопка</Button>
-    </template>
-    <template #actionBars>
-      <Button>Action-кнопка</Button>
-      <Button @click="isAction = false">Закрыть</Button>
-    </template>
-  </Bars>
-</template>
-```

package/src/media/mdx/Bars/wikiMdxBars.ts

@@ -1,37 +0,0 @@
-import type { StorybookComponentsMdxItem } from '../../../types/storybookTypes'
-
-import barsEn from './bars.en.mdx'
-import barsRu from './bars.ru.mdx'
-import actionEn from './action.en.mdx'
-import actionRu from './action.ru.mdx'
-import slotsEn from './slots.en.mdx'
-import slotsRu from './slots.ru.mdx'
-import vModelEn from './v-model.en.mdx'
-import vModelRu from './v-model.ru.mdx'
-
-/**
- * MDX files for Bars component
- *
- * MDX файлы для компонента Bars
- */
-export const wikiMdxBars: StorybookComponentsMdxItem = {
-  name: 'Bars',
-  descriptions: {
-    'bars': {
-      en: barsEn,
-      ru: barsRu
-    },
-    'action': {
-      en: actionEn,
-      ru: actionRu
-    },
-    'slots': {
-      en: slotsEn,
-      ru: slotsRu
-    },
-    'v-model': {
-      en: vModelEn,
-      ru: vModelRu
-    }
-  }
-}

package/src/media/mdx/Block/block.en.mdx

@@ -1,42 +0,0 @@
-## Description
-
-A versatile structural component that serves as a container with support for labels, descriptions, captions, icons, and headlines.
-
-Block provides a flexible foundation for building complex interface components, allowing you to combine various information elements into a single unit. The component supports HTML tag customization and provides slots for content customization.
-
-**Key Features:**
-
-- Display of headline, label, description, and caption
-- Icon support
-- Customizable HTML tag
-- Flexible layout for content organization
-- Slot support for functionality extension
-
-**Typical Use Cases:**
-
-- Content cards
-- List items
-- Information blocks
-- Sections with headers and descriptions
-- Basic building block for other components
-
-```html
-<script setup>
-import { ref } from 'vue'
-</script>
-
-<template>
-  <Block
-    headline="Block Headline"
-    label="Label"
-    description="Block description with detailed information"
-    caption="Caption"
-    icon="info"
-  >
-    Main block content
-  </Block>
-</template>
-```
-
-> Block is a fundamental component for creating structured interfaces.
-

package/src/media/mdx/Block/block.ru.mdx

@@ -1,42 +0,0 @@
-## Описание
-
-Универсальный структурный компонент, служащий контейнером с поддержкой меток, описаний, подписей, иконок и заголовков.
-
-Block обеспечивает гибкую основу для построения сложных компонентов интерфейса, позволяя комбинировать различные информационные элементы в едином блоке. Компонент поддерживает настройку HTML-тега и предоставляет слоты для кастомизации контента.
-
-**Основные возможности:**
-
-- Отображение заголовка, метки, описания и подписи
-- Поддержка иконок
-- Настраиваемый HTML-тег
-- Гибкая компоновка для организации контента
-- Поддержка слотов для расширения функциональности
-
-**Типичные сценарии использования:**
-
-- Карточки контента
-- Элементы списков
-- Информационные блоки
-- Секции с заголовками и описаниями
-- Базовый строительный блок для других компонентов
-
-```html
-<script setup>
-import { ref } from 'vue'
-</script>
-
-<template>
-  <Block
-    headline="Заголовок блока"
-    label="Метка"
-    description="Описание блока с подробной информацией"
-    caption="Подпись"
-    icon="info"
-  >
-    Основной контент блока
-  </Block>
-</template>
-```
-
-> Block является фундаментальным компонентом для создания структурированных интерфейсов.
-

package/src/media/mdx/Block/differences.en.mdx

@@ -1,47 +0,0 @@
-## Differences between Page, Section, Block, and Group
-
-All components are built on top of **Block** and differ in semantics and header levels:
-
-### Page
-This is the root structural component that serves as the main wrapper for all page content. Its primary purpose is to define the main theme and semantically link content to the first-level heading. Its main difference is its uniqueness (used once per page); therefore, choose it as the primary container when creating a new page (`<main>`, `h1`).
-
-### Section
-A container for major thematic division of the page into independent semantic blocks. It is needed for logical partitioning of content into parts like "About Us" or "Services". Unlike Block and Group, it carries higher semantic weight, so use it to form the page structure and highlight its main sections (`<section>`, `h2`).
-
-### Block
-A universal and highly flexible building block for grouping any related content. It is the base element for creating independent functional units, cards, or informational inserts. Use it in any scenario where you need to organize content without strict adherence to global page divisions (`<div>`, `h3`).
-
-### Group
-An auxiliary component for combining small thematic elements into logical groups. Its main goal is to structure details, such as form fields or sub-sections within a card. It ranks at the bottom of the hierarchy and is used for fine-tuning content structure within larger blocks or sections (`<div>`, `h4`).
-
-### Hierarchy Example
-
-```html
-<Page headline="User Account">
-  <Section label="User Profile" description="Manage personal data" icon="person">
-    <Block label="Basic Information">
-      <p>Configure your display name and bio for other users.</p>
-      
-      <Group label="Contact Details">
-        <p>Email: user@example.com</p>
-        <p>Phone: +7 (999) 000-00-00</p>
-      </Group>
-    </Block>
-    
-    <Block label="Security" description="Password and authentication settings">
-      <p>Regular password updates improve your account security.</p>
-    </Block>
-  </Section>
-
-  <Section label="Notifications" icon="notifications">
-    <Block label="Subscriptions">
-      <Group label="Email">
-        <p>Weekly news and promotions.</p>
-      </Group>
-      <Group label="SMS">
-        <p>Critical system messages only.</p>
-      </Group>
-    </Block>
-  </Section>
-</Page>
-```

package/src/media/mdx/Block/differences.ru.mdx

@@ -1,47 +0,0 @@
-## Различия между Page, Section, Block и Group
-
-Все компоненты построены на базе **Block** и различаются семантикой и уровнями заголовков:
-
-### Page
-Это корневой структурный компонент, который служит главной оберткой для всего контента страницы. Он предназначен для определения основной темы и семантической привязки содержимого к заголовку первого уровня. Его главное отличие — уникальность (используется один раз), поэтому выбирайте его как основной контейнер при создании новой страницы (`<main>`, `h1`).
-
-### Section
-Раздел для крупного тематического деления страницы на независимые смысловые блоки. Он нужен для логического разграничения контента на такие части, как «О нас» или «Услуги». В отличие от Block и Group, имеет более высокую семантическую значимость, поэтому используйте его для формирования скелета страницы и выделения её основных разделов (`<section>`, `h2`).
-
-### Block
-Универсальный и максимально гибкий строительный блок для группировки любого связанного контента. Это базовый элемент для создания независимых функциональных единиц, карточек или информационных вставок. Используйте его в любых сценариях, где требуется организовать контент без строгой привязки к глобальным разделам страницы (`<div>`, `h3`).
-
-### Group
-Вспомогательный компонент для объединения мелких тематических элементов в логические группы. Его основная цель — структурирование деталей, таких как поля формы или подразделы внутри карточки. Он находится внизу иерархии и применяется для тонкой настройки структуры контента внутри более крупных блоков или секций (`<div>`, `h4`).
-
-### Пример иерархии
-
-```html
-<Page headline="Личный кабинет">
-  <Section label="Профиль пользователя" description="Управление персональными данными" icon="person">
-    <Block label="Основная информация">
-      <p>Настройте свое отображаемое имя и биографию для других пользователей.</p>
-      
-      <Group label="Контактные данные">
-        <p>Email: user@example.com</p>
-        <p>Телефон: +7 (999) 000-00-00</p>
-      </Group>
-    </Block>
-    
-    <Block label="Безопасность" description="Настройки пароля и аутентификации">
-      <p>Регулярное обновление пароля повышает защищенность вашего аккаунта.</p>
-    </Block>
-  </Section>
-
-  <Section label="Уведомления" icon="notifications">
-    <Block label="Рассылки">
-      <Group label="Email">
-        <p>Еженедельные новости и акции.</p>
-      </Group>
-      <Group label="SMS">
-        <p>Только критические системные сообщения.</p>
-      </Group>
-    </Block>
-  </Section>
-</Page>
-```

package/src/media/mdx/Block/wikiMdxBlock.ts

@@ -1,25 +0,0 @@
-import type { StorybookComponentsMdxItem } from '../../../types/storybookTypes'
-
-import blockEn from './block.en.mdx'
-import blockRu from './block.ru.mdx'
-import differencesEn from './differences.en.mdx'
-import differencesRu from './differences.ru.mdx'
-
-/**
- * MDX files for Block component
- *
- * MDX файлы для компонента Block
- */
-export const wikiMdxBlock: StorybookComponentsMdxItem = {
-  name: 'Block',
-  descriptions: {
-    block: {
-      en: blockEn,
-      ru: blockRu
-    },
-    differences: {
-      en: differencesEn,
-      ru: differencesRu
-    }
-  }
-}

package/src/media/mdx/Button/button.en.mdx

@@ -1,29 +0,0 @@
-## Description
-
-Interactive button component for triggering user actions with support for multiple visual variants, states, and accessibility features.
-
-Button provides a comprehensive solution for creating consistent, accessible action elements with built-in support for icons, loading states, ripple effects, and skeleton placeholders. The component integrates visual variants (primary, secondary, outline, text), state management (focus, hover, disabled, selected), and adaptive behavior for responsive interfaces.
-
-**Key features:**
-
-- Multiple visual variants (primary, secondary, outline, text)
-- Comprehensive state support (focus, hover, active, disabled, selected, readonly)
-- Built-in icon positioning (leading and trailing)
-- Progress indicator integration for loading states
-- Ripple effect for tactile feedback
-- Skeleton system for loading placeholders
-- Adaptive and responsive behavior options
-- Full accessibility support (ARIA, keyboard navigation)
-- Customizable through design tokens
-
-**Typical use cases:**
-
-- Primary actions in forms and dialogs
-- Navigation and menu items
-- Toolbars and action bars
-- Call-to-action elements
-- Icon-only action buttons
-- Loading state indicators
-- Confirmation and cancellation actions
-
-> Button is designed as a universal interactive element with comprehensive state management, visual variants, and accessibility features for creating consistent action interfaces.

package/src/media/mdx/Button/button.ru.mdx

@@ -1,29 +0,0 @@
-## Описание
-
-Интерактивный компонент кнопки для инициирования действий пользователя с поддержкой множественных визуальных вариантов, состояний и функций доступности.
-
-Button предоставляет комплексное решение для создания согласованных, доступных элементов действий со встроенной поддержкой иконок, состояний загрузки, эффектов ripple и плейсхолдеров-скелетонов. Компонент интегрирует визуальные варианты (primary, secondary, outline, text), управление состояниями (focus, hover, disabled, selected) и адаптивное поведение для отзывчивых интерфейсов.
-
-**Основные возможности:**
-
-- Множественные визуальные варианты (primary, secondary, outline, text)
-- Комплексная поддержка состояний (focus, hover, active, disabled, selected, readonly)
-- Встроенное позиционирование иконок (в начале и в конце)
-- Интеграция индикатора прогресса для состояний загрузки
-- Эффект ripple для тактильной обратной связи
-- Система скелетонов для плейсхолдеров загрузки
-- Опции адаптивного и отзывчивого поведения
-- Полная поддержка доступности (ARIA, клавиатурная навигация)
-- Настройка через токены дизайна
-
-**Типичные сценарии использования:**
-
-- Основные действия в формах и диалогах
-- Элементы навигации и меню
-- Панели инструментов и действий
-- Элементы призыва к действию
-- Кнопки только с иконками
-- Индикаторы состояния загрузки
-- Действия подтверждения и отмены
-
-> Button разработан как универсальный интерактивный элемент с комплексным управлением состояниями, визуальными вариантами и функциями доступности для создания согласованных интерфейсов действий.

package/src/media/mdx/Button/outline.en.mdx

@@ -1,16 +0,0 @@
-## Outline buttons
-
-Button component supports outline mode through the `outline` property. In this mode, buttons have a minimalist visual style with transparent background and colored border:
-
-- **Minimalist design** - suitable for interfaces requiring reduced visual load
-- **Transparent background** - maintains clean appearance while remaining interactive
-- **Hover feedback** - background appears on hover for better user interaction
-- **Icon support** - works seamlessly with icons for enhanced clarity
-
-Outline mode is especially useful for creating tertiary actions, filter controls, and secondary options in cards or lists that need to be accessible without excessive visual noise.
-
-```html
-<Button outline icon="filter">Filter</Button>
-<Button outline icon="sort">Sort</Button>
-<Button outline>More options</Button>
-```

package/src/media/mdx/Button/outline.ru.mdx

@@ -1,16 +0,0 @@
-## Контурные кнопки (outline)
-
-Компонент Button поддерживает контурный режим через свойство `outline`. В этом режиме кнопки имеют минималистичный визуальный стиль с прозрачным фоном и цветной границей:
-
-- **Минималистичный дизайн** - подходит для интерфейсов, требующих сниженной визуальной нагрузки
-- **Прозрачный фон** - поддерживает чистый внешний вид, оставаясь интерактивными
-- **Обратная связь при наведении** - фон появляется при наведении для лучшего взаимодействия с пользователем
-- **Поддержка иконок** - бесшовно работает с иконками для улучшенной ясности
-
-Outline режим особенно полезен для создания третичных действий, элементов управления фильтрами и второстепенных опций в карточках или списках, которые должны быть доступны без излишнего визуального шума.
-
-```html
-<Button outline icon="filter">Фильтр</Button>
-<Button outline icon="sort">Сортировка</Button>
-<Button outline>Дополнительно</Button>
-```

package/src/media/mdx/Button/primary.en.mdx

@@ -1,16 +0,0 @@
-## Primary buttons
-
-Button component supports primary mode through the `primary` property. In this mode, buttons have a distinctive visual style for the most important actions:
-
-- **Visual emphasis** - stands out prominently among other interface elements
-- **Action hierarchy** - indicates the main or priority action on the page
-- **High contrast** - automatically applies high-contrast colors for better visibility
-- **Icon support** - enhances understanding of purpose through visual elements
-
-Primary mode is especially useful for creating main call-to-action buttons, form submissions, and confirmation actions that require user attention and should be immediately recognizable in the interface.
-
-```html
-<Button primary icon="send">Submit</Button>
-<Button primary icon="save">Save</Button>
-<Button primary>Confirm</Button>
-```

package/src/media/mdx/Button/primary.ru.mdx

@@ -1,16 +0,0 @@
-## Основные кнопки (primary)
-
-Компонент Button поддерживает основной режим через свойство `primary`. В этом режиме кнопки имеют выделяющийся визуальный стиль для самых важных действий:
-
-- **Визуальный акцент** - выделяются заметно среди других элементов интерфейса
-- **Иерархия действий** - указывают на основное или приоритетное действие на странице
-- **Высокая контрастность** - автоматически применяются высококонтрастные цвета для лучшей видимости
-- **Поддержка иконок** - улучшают понимание назначения через визуальные элементы
-
-Primary режим особенно полезен для создания основных кнопок призыва к действию, отправки форм и подтверждающих действий, которые требуют внимания пользователя и должны быть сразу узнаваемы в интерфейсе.
-
-```html
-<Button primary icon="send">Отправить</Button>
-<Button primary icon="save">Сохранить</Button>
-<Button primary>Подтвердить</Button>
-```

package/src/media/mdx/Button/secondary.en.mdx

@@ -1,16 +0,0 @@
-## Secondary buttons
-
-Button component supports secondary mode through the `secondary` property. In this mode, buttons have a less prominent visual style for alternative or supporting actions:
-
-- **Moderate emphasis** - less intrusive than primary buttons while remaining clear
-- **Action alternatives** - provides users with alternative choices without overwhelming them
-- **Balanced contrast** - uses colors with moderate contrast for better visual hierarchy
-- **Icon support** - maintains consistency with other button variants through visual elements
-
-Secondary mode is especially useful for creating cancel buttons, reset actions, and alternative choices that support the main flow without competing for primary attention in the interface.
-
-```html
-<Button secondary icon="close">Cancel</Button>
-<Button secondary icon="refresh">Reset</Button>
-<Button secondary>Skip</Button>
-```

package/src/media/mdx/Button/secondary.ru.mdx

@@ -1,16 +0,0 @@
-## Второстепенные кнопки (secondary)
-
-Компонент Button поддерживает второстепенный режим через свойство `secondary`. В этом режиме кнопки имеют менее заметный визуальный стиль для альтернативных или поддерживающих действий:
-
-- **Умеренный акцент** - менее навязчивы чем основные кнопки, оставаясь при этом понятными
-- **Альтернативные действия** - предоставляют пользователям альтернативный выбор без перегрузки
-- **Сбалансированная контрастность** - используют цвета с умеренным контрастом для лучшей визуальной иерархии
-- **Поддержка иконок** - поддерживают согласованность с другими вариантами кнопок через визуальные элементы
-
-Secondary режим особенно полезен для создания кнопок отмены, действий сброса и альтернативных вариантов выбора, которые поддерживают основной поток без конкуренции за первичное внимание в интерфейсе.
-
-```html
-<Button secondary icon="close">Отмена</Button>
-<Button secondary icon="refresh">Сброс</Button>
-<Button secondary>Пропустить</Button>
-```

package/src/media/mdx/Button/text.en.mdx

@@ -1,16 +0,0 @@
-## Text buttons
-
-Button component supports text mode through the `text` property. In this mode, buttons have a minimalist text-only style resembling links for the most unobtrusive actions:
-
-- **Unobtrusive design** - looks like plain text while remaining interactive
-- **No background or border** - maintains clean appearance without visual weight
-- **Hover feedback** - subtle background appears on hover for better interaction clarity
-- **Icon support** - seamlessly integrates icons while maintaining minimal visual impact
-
-Text mode is especially useful for creating tertiary actions, inline navigation links, and supplementary options within text content or footers that need to be accessible without drawing excessive attention.
-
-```html
-<Button text icon="info">Learn more</Button>
-<Button text icon="help">Help</Button>
-<Button text>Read details</Button>
-```

package/src/media/mdx/Button/text.ru.mdx

@@ -1,16 +0,0 @@
-## Текстовые кнопки (text)
-
-Компонент Button поддерживает текстовый режим через свойство `text`. В этом режиме кнопки имеют минималистичный текстовый стиль, напоминающий ссылки, для самых ненавязчивых действий:
-
-- **Ненавязчивый дизайн** - выглядит как обычный текст, оставаясь интерактивным
-- **Без фона и рамки** - поддерживает чистый внешний вид без визуальной нагрузки
-- **Обратная связь при наведении** - тонкий фон появляется при наведении для лучшей ясности взаимодействия
-- **Поддержка иконок** - бесшовно интегрирует иконки, сохраняя минимальное визуальное воздействие
-
-Text режим особенно полезен для создания третичных действий, встроенных навигационных ссылок и дополнительных опций внутри текстового контента или футеров, которые должны быть доступны без привлечения чрезмерного внимания.
-
-```html
-<Button text icon="info">Узнать больше</Button>
-<Button text icon="help">Справка</Button>
-<Button text>Читать детали</Button>
-```