@dxtmisha/wiki 0.39.2 → 0.39.4

package/src/media/mdx/Button/wikiMdxButton.ts

@@ -1,43 +0,0 @@
-import type { StorybookComponentsMdxItem } from '../../../types/storybookTypes'
-
-import buttonEn from './button.en.mdx'
-import buttonRu from './button.ru.mdx'
-import primaryEn from './primary.en.mdx'
-import primaryRu from './primary.ru.mdx'
-import secondaryEn from './secondary.en.mdx'
-import secondaryRu from './secondary.ru.mdx'
-import outlineEn from './outline.en.mdx'
-import outlineRu from './outline.ru.mdx'
-import textEn from './text.en.mdx'
-import textRu from './text.ru.mdx'
-
-/**
- * MDX files for Button component
- *
- * MDX файлы для компонента Button
- */
-export const wikiMdxButton: StorybookComponentsMdxItem = {
-  name: 'Button',
-  descriptions: {
-    button: {
-      en: buttonEn,
-      ru: buttonRu
-    },
-    primary: {
-      en: primaryEn,
-      ru: primaryRu
-    },
-    secondary: {
-      en: secondaryEn,
-      ru: secondaryRu
-    },
-    outline: {
-      en: outlineEn,
-      ru: outlineRu
-    },
-    text: {
-      en: textEn,
-      ru: textRu
-    }
-  }
-}

package/src/media/mdx/Cell/cell.en.mdx

@@ -1,57 +0,0 @@
-## Description
-
-Universal container component for displaying structured content with labels, descriptions, and interactive actions in lists and interface elements.
-
-Cell provides a consistent way to represent information blocks with support for text hierarchy (label, description, caption), interactive states, icons, and progress indicators. The component integrates ripple effects, skeleton states, and flexible content positioning for creating modern interface lists.
-
-**Key features:**
-
-- Structured content hierarchy (label, description, caption)
-- Interactive states (focus, selected, disabled, readonly)
-- Built-in icon and progress indicator support
-- Ripple effect integration for tactile feedback
-- Skeleton system for loading states
-- Customizable dividers and dynamic behavior
-- Flexible slot system for custom content
-- Optimized for list and menu interfaces
-
-**Typical use cases:**
-
-- List items in navigation menus and settings
-- Contact cards and profile entries
-- Action sheets and selection lists
-- Settings panels and configuration items
-- Data tables and structured information displays
-- Mobile-first interface components
-
-```html
-<script setup>
-import { ref } from 'vue'
-
-const selected = ref(false)
-const loading = ref(false)
-
-const handleClick = () => {
-  console.log('Cell clicked')
-  selected.value = !selected.value
-}
-</script>
-
-<template>
-  <Cell
-    label="Notification Settings"
-    description="Manage how you receive notifications"
-    caption="Updated today"
-    icon="notifications"
-    :selected="selected"
-    :skeleton="loading"
-    @click="handleClick"
-  >
-    <template #trailing>
-      <Icon name="chevron_right" />
-    </template>
-  </Cell>
-</template>
-```
-
-> Cell is designed as a universal building block for creating consistent list-based interfaces with rich content and interactive states.

package/src/media/mdx/Cell/cell.ru.mdx

@@ -1,57 +0,0 @@
-## Описание
-
-Универсальный контейнерный компонент для отображения структурированного контента с метками, описаниями и интерактивными действиями в списках и элементах интерфейса.
-
-Cell обеспечивает единообразное представление информационных блоков с поддержкой текстовой иерархии (метка, описание, подпись), интерактивных состояний, иконок и индикаторов прогресса. Компонент интегрирует эффекты ripple, состояния скелетонов и гибкое позиционирование контента для создания современных интерфейсных списков.
-
-**Основные возможности:**
-
-- Структурированная иерархия контента (метка, описание, подпись)
-- Интерактивные состояния (focus, selected, disabled, readonly)
-- Встроенная поддержка иконок и индикаторов прогресса
-- Интеграция эффекта ripple для тактильной обратной связи
-- Система скелетонов для состояний загрузки
-- Настраиваемые разделители и динамическое поведение
-- Гибкая система слотов для пользовательского контента
-- Оптимизирован для списковых и меню интерфейсов
-
-**Типичные сценарии использования:**
-
-- Элементы списков в меню навигации и настройках
-- Карточки контактов и профильные записи
-- Списки действий и выбора элементов
-- Панели настроек и элементы конфигурации
-- Таблицы данных и структурированные информационные блоки
-- Компоненты интерфейса mobile-first
-
-```html
-<script setup>
-import { ref } from 'vue'
-
-const selected = ref(false)
-const loading = ref(false)
-
-const handleClick = () => {
-  console.log('Ячейка нажата')
-  selected.value = !selected.value
-}
-</script>
-
-<template>
-  <Cell
-    label="Настройки уведомлений"
-    description="Управление способами получения уведомлений"
-    caption="Обновлено сегодня"
-    icon="notifications"
-    :selected="selected"
-    :skeleton="loading"
-    @click="handleClick"
-  >
-    <template #trailing>
-      <Icon name="chevron_right" />
-    </template>
-  </Cell>
-</template>
-```
-
-> Cell разработан как универсальный строительный блок для создания единообразных списковых интерфейсов с богатым контентом и интерактивными состояниями.

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

@@ -1,8 +0,0 @@
-- `trailing(props: CellClassesSub): any` — Slot for placing control elements or indicators at the end of the cell (icons, switches, buttons).
-- `body(props: CellClassesSub): any` — Slot for placing additional content at the bottom of the cell (metadata, secondary actions, details).
-
-> **CellClassesSub:**
-> - `label: string` — CSS class for the label element (`{className}__label`).
-> - `description: string` — CSS class for the description element (`{className}__description`).
-> - `caption: string` — CSS class for the caption element (`{className}__caption`).
-> - `trailing: string` — CSS class for the trailing area element (`{className}__trailing`).

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

@@ -1,8 +0,0 @@
-- `trailing(props: CellClassesSub): any` — Слот для размещения элементов управления или индикаторов в конце ячейки (иконки, переключатели, кнопки).
-- `body(props: CellClassesSub): any` — Слот для размещения дополнительного контента в нижней части ячейки (метаданные, вторичные действия, детали).
-
-> **CellClassesSub:**
-> - `label: string` — CSS-класс для элемента метки (`{className}__label`).
-> - `description: string` — CSS-класс для элемента описания (`{className}__description`).
-> - `caption: string` — CSS-класс для элемента подписи (`{className}__caption`).
-> - `trailing: string` — CSS-класс для элемента области trailing (`{className}__trailing`).

package/src/media/mdx/Cell/wikiMdxCell.ts

@@ -1,25 +0,0 @@
-import type { StorybookComponentsMdxItem } from '../../../types/storybookTypes'
-
-import cellEn from './cell.en.mdx'
-import cellRu from './cell.ru.mdx'
-import slotsEn from './slots.en.mdx'
-import slotsRu from './slots.ru.mdx'
-
-/**
- * MDX files for Cell component
- *
- * MDX файлы для компонента Cell
- */
-export const wikiMdxCell: StorybookComponentsMdxItem = {
-  name: 'Cell',
-  descriptions: {
-    cell: {
-      en: cellEn,
-      ru: cellRu
-    },
-    slots: {
-      en: slotsEn,
-      ru: slotsRu
-    }
-  }
-}

package/src/media/mdx/Checkbox/checkbox.en.mdx

@@ -1,22 +0,0 @@
-Component for creating interactive checkboxes with support for multiple selection, validation, and state customization.
-
-Checkbox manages the selection state of elements (checked, unchecked, indeterminate state), supports validation, form integration, customizable icons, and transition animations. The component automatically handles state changes, focus management, and event generation during user interaction.
-
-**Key features:**
-
-- Three states: checked, unchecked, indeterminate
-- Built-in validation with custom error messages
-- Support for labels and descriptions
-- Customizable icons for different states
-- Form integration via name and value attributes
-- Disabled, loading, and skeleton states
-- Ripple effect on interaction
-- Adaptive layout and styling
-
-**Common use cases:**
-
-- Agreement with terms and policies
-- Multiple item selection from lists
-- Settings and feature toggles
-- Forms with checkboxes for confirmation
-- Group selection with parent indeterminate state

package/src/media/mdx/Checkbox/checkbox.ru.mdx

@@ -1,22 +0,0 @@
-Компонент для создания интерактивных чекбоксов с поддержкой множественного выбора, валидации и настройки состояний.
-
-Checkbox управляет состоянием выбора элементов (отмечен, не отмечен, неопределённое состояние), поддерживает валидацию, интеграцию с формами, настраиваемые иконки и анимацию переходов. Компонент автоматически обрабатывает изменение состояний, управление фокусом и генерацию событий при взаимодействии пользователя.
-
-**Основные возможности:**
-
-- Три состояния: отмечен, не отмечен, неопределённое (indeterminate)
-- Встроенная валидация с пользовательскими сообщениями об ошибках
-- Поддержка меток (label) и описания (description)
-- Настраиваемые иконки для разных состояний
-- Интеграция с формами через name и value
-- Состояния disabled, loading и skeleton
-- Эффект ripple при взаимодействии
-- Адаптивная раскладка и стилизация
-
-**Типичные сценарии использования:**
-
-- Согласие с условиями и политиками
-- Множественный выбор элементов из списка
-- Настройки и переключение функций
-- Формы с чекбоксами для подтверждения
-- Групповой выбор с родительским indeterminate состоянием

package/src/media/mdx/Checkbox/indeterminate.en.mdx

@@ -1,61 +0,0 @@
-## Indeterminate state
-
-The `indeterminate` property controls the third checkbox state — indeterminate (partially selected). This state is visually displayed as a horizontal line instead of a checkmark.
-
-**Properties:**
-
-- `indeterminate` — enables the indeterminate state of the checkbox
-- `iconIndeterminate` — custom icon for the indeterminate state
-- `value` — remains `null` or a special value in the indeterminate state
-
-The indeterminate state is typically used for parent checkboxes in a group when only some child elements are selected.
-
-```html
-<script setup>
-import { ref, computed } from 'vue'
-
-const items = ref([
-  { id: 1, label: 'Item 1', checked: true },
-  { id: 2, label: 'Item 2', checked: false },
-  { id: 3, label: 'Item 3', checked: true }
-])
-
-const allChecked = computed({
-  get: () => items.value.every(item => item.checked),
-  set: (value) => {
-    items.value.forEach(item => item.checked = value)
-  }
-})
-
-const indeterminate = computed(() => {
-  const checkedCount = items.value.filter(item => item.checked).length
-  return checkedCount > 0 && checkedCount < items.value.length
-})
-</script>
-
-<template>
-  <!-- Parent checkbox with partial selection indicator -->
-  <Checkbox
-    v-model="allChecked"
-    :indeterminate="indeterminate"
-    label="Select all"
-  />
-
-  <!-- Child checkboxes -->
-  <div style="margin-left: 24px">
-    <Checkbox
-      v-for="item in items"
-      :key="item.id"
-      v-model="item.checked"
-      :label="item.label"
-    />
-  </div>
-
-  <!-- Using with custom icon -->
-  <Checkbox
-    indeterminate
-    iconIndeterminate="remove"
-    label="Partially selected"
-  />
-</template>
-```

package/src/media/mdx/Checkbox/indeterminate.ru.mdx

@@ -1,61 +0,0 @@
-## Неопределённое состояние
-
-Свойство `indeterminate` управляет третьим состоянием чекбокса — неопределённым (частично выбранным). Это состояние визуально отображается как горизонтальная линия вместо галочки.
-
-**Свойства:**
-
-- `indeterminate` — включает неопределённое состояние чекбокса
-- `iconIndeterminate` — пользовательская иконка для неопределённого состояния
-- `value` — остается `null` или специальное значение в неопределённом состоянии
-
-Неопределённое состояние обычно используется для родительских чекбоксов в группе, когда выбраны только некоторые дочерние элементы.
-
-```html
-<script setup>
-import { ref, computed } from 'vue'
-
-const items = ref([
-  { id: 1, label: 'Пункт 1', checked: true },
-  { id: 2, label: 'Пункт 2', checked: false },
-  { id: 3, label: 'Пункт 3', checked: true }
-])
-
-const allChecked = computed({
-  get: () => items.value.every(item => item.checked),
-  set: (value) => {
-    items.value.forEach(item => item.checked = value)
-  }
-})
-
-const indeterminate = computed(() => {
-  const checkedCount = items.value.filter(item => item.checked).length
-  return checkedCount > 0 && checkedCount < items.value.length
-})
-</script>
-
-<template>
-  <!-- Родительский чекбокс с индикатором частичного выбора -->
-  <Checkbox
-    v-model="allChecked"
-    :indeterminate="indeterminate"
-    label="Выбрать все"
-  />
-
-  <!-- Дочерние чекбоксы -->
-  <div style="margin-left: 24px">
-    <Checkbox
-      v-for="item in items"
-      :key="item.id"
-      v-model="item.checked"
-      :label="item.label"
-    />
-  </div>
-
-  <!-- Использование с пользовательской иконкой -->
-  <Checkbox
-    indeterminate
-    iconIndeterminate="remove"
-    label="Частично выбрано"
-  />
-</template>
-```

package/src/media/mdx/Checkbox/value.en.mdx

@@ -1,64 +0,0 @@
-## Value Management
-
-The `value`, `valueVariant`, and `valueVariantHide` properties are designed for managing checkbox values during form submission and two-way data binding.
-
-**Properties:**
-
-- `value` — current checkbox state (true/false or custom values)
-- `valueVariant` — value passed when checkbox is checked
-- `valueVariantHide` — value passed when checkbox is unchecked (default: "0")
-
-Properties work together: `value` determines the current checkbox state and works with `v-model` for two-way binding. `valueVariant` allows setting a custom value for the checked state (e.g., "yes", "1", "active"), which will be passed during form submission. `valueVariantHide` automatically creates a hidden input field with the specified value, which is submitted when the checkbox is unchecked, ensuring data presence in the form even with an inactive checkbox.
-
-```html
-<script setup>
-import { ref } from 'vue'
-
-const agreed = ref(false)
-const formData = ref({})
-
-const handleSubmit = () => {
-  console.log('Form data:', formData.value)
-}
-</script>
-
-<template>
-  <!-- Standard usage with boolean -->
-  <Checkbox
-    v-model="agreed"
-    name="terms"
-    label="I agree to the terms"
-  />
-  <!-- value: true/false -->
-
-  <!-- Custom values for form -->
-  <Checkbox
-    name="subscribe"
-    label="Subscribe to newsletter"
-    valueVariant="yes"
-    valueVariantHide="no"
-  />
-  <!-- When checked sends: subscribe=yes -->
-  <!-- When unchecked sends: subscribe=no -->
-
-  <!-- Numeric values -->
-  <Checkbox
-    name="notification"
-    label="Enable notifications"
-    valueVariant="1"
-    valueVariantHide="0"
-  />
-  <!-- When checked sends: notification=1 -->
-  <!-- When unchecked sends: notification=0 -->
-
-  <!-- Without hidden value -->
-  <Checkbox
-    name="optional"
-    label="Optional setting"
-    valueVariant="enabled"
-    :valueVariantHide="null"
-  />
-  <!-- Only sent when checked: optional=enabled -->
-  <!-- When unchecked field is not sent -->
-</template>
-```

package/src/media/mdx/Checkbox/value.ru.mdx

@@ -1,64 +0,0 @@
-## Управление значениями
-
-Свойства `value`, `valueVariant` и `valueVariantHide` предназначены для управления значениями чекбокса при отправке форм и работе с двусторонней привязкой данных.
-
-**Свойства:**
-
-- `value` — текущее состояние чекбокса (true/false или пользовательские значения)
-- `valueVariant` — значение, которое передаётся при отмеченном чекбоксе
-- `valueVariantHide` — значение, которое передаётся при неотмеченном чекбоксе (по умолчанию: "0")
-
-Свойства работают совместно: `value` определяет текущее состояние чекбокса и работает с `v-model` для двусторонней привязки. `valueVariant` позволяет установить пользовательское значение для отмеченного состояния (например, "yes", "1", "active"), которое будет передано при отправке формы. `valueVariantHide` автоматически создаёт скрытое поле input с указанным значением, которое отправляется, когда чекбокс не отмечен, обеспечивая наличие данных в форме даже при неактивном чекбоксе.
-
-```html
-<script setup>
-import { ref } from 'vue'
-
-const agreed = ref(false)
-const formData = ref({})
-
-const handleSubmit = () => {
-  console.log('Form data:', formData.value)
-}
-</script>
-
-<template>
-  <!-- Стандартное использование с boolean -->
-  <Checkbox
-    v-model="agreed"
-    name="terms"
-    label="Согласен с условиями"
-  />
-  <!-- value: true/false -->
-
-  <!-- Пользовательские значения для формы -->
-  <Checkbox
-    name="subscribe"
-    label="Подписаться на рассылку"
-    valueVariant="yes"
-    valueVariantHide="no"
-  />
-  <!-- При отметке отправит: subscribe=yes -->
-  <!-- Без отметки отправит: subscribe=no -->
-
-  <!-- Числовые значения -->
-  <Checkbox
-    name="notification"
-    label="Включить уведомления"
-    valueVariant="1"
-    valueVariantHide="0"
-  />
-  <!-- При отметке отправит: notification=1 -->
-  <!-- Без отметки отправит: notification=0 -->
-
-  <!-- Без скрытого значения -->
-  <Checkbox
-    name="optional"
-    label="Опциональная настройка"
-    valueVariant="enabled"
-    :valueVariantHide="null"
-  />
-  <!-- Отправляется только при отметке: optional=enabled -->
-  <!-- Без отметки поле не отправляется -->
-</template>
-```

package/src/media/mdx/Checkbox/wikiMdxCheckbox.ts

@@ -1,31 +0,0 @@
-import type { StorybookComponentsMdxItem } from '../../../types/storybookTypes'
-
-import checkboxEn from './checkbox.en.mdx'
-import checkboxRu from './checkbox.ru.mdx'
-import indeterminateEn from './indeterminate.en.mdx'
-import indeterminateRu from './indeterminate.ru.mdx'
-import valueEn from './value.en.mdx'
-import valueRu from './value.ru.mdx'
-
-/**
- * MDX files for Checkbox component
- *
- * MDX файлы для компонента Checkbox
- */
-export const wikiMdxCheckbox: StorybookComponentsMdxItem = {
-  name: 'Checkbox',
-  descriptions: {
-    checkbox: {
-      en: checkboxEn,
-      ru: checkboxRu
-    },
-    indeterminate: {
-      en: indeterminateEn,
-      ru: indeterminateRu
-    },
-    value: {
-      en: valueEn,
-      ru: valueRu
-    }
-  }
-}

package/src/media/mdx/Chip/assistive.en.mdx

@@ -1,16 +0,0 @@
-## Assistive chips (assistive)
-
-The Chip component supports assistive mode through the `assistive` property. In this mode, chips have a special visual style to help users complete tasks:
-
-- **Distinctive style** - visually stand out among other elements
-- **Hints and recommendations** - suggest action options or auto-completion
-- **User guidance** - help navigate the interface
-- **Icon support** - improve understanding of purpose through visual elements
-
-Assistive mode is especially useful for creating hint systems, recommendations, and helper actions that guide users to the right solutions without excessive visual noise.
-
-```html
-<Chip assistive icon="lightbulb">Recommendation</Chip>
-<Chip assistive icon="check">Hint</Chip>
-<Chip assistive>Auto-complete</Chip>
-```

package/src/media/mdx/Chip/assistive.ru.mdx

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

package/src/media/mdx/Chip/chip.en.mdx

@@ -1,75 +0,0 @@
-## Description
-
-Compact interactive element for representing input, attributes, actions, and filters in the user interface.
-
-Chip provides a unified component for displaying discrete information in a compact format with support for selection states, icons, adaptive behavior, and various visual variants (input, assistive). Inherits Button functionality while adding specialized styling and semantics for working with tags, filters, statuses, and user input. Ensures a consistent API for creating interactive chips with support for clicks, disabled/selected states, and icon integration.
-
-**Core capabilities:**
-
-- Button inheritance (icons, progress, click events)
-- Visual variants (input, assistive) for different contexts
-- State management (selected, disabled, focus, readonly)
-- Adaptive behavior (adaptive, container) for different screen sizes
-- Customizable text alignment (textAlign: left/center/right)
-- Icon support (icon, iconTrailing) and progress indicator
-- Skeleton state integration for loading
-- Value and detail passing for element identification
-
-**Typical use cases:**
-
-- Tags and labels for content categorization
-- Filters in search interfaces and catalogs
-- Displaying user-entered data (emails, contacts)
-- Statuses and state indicators
-- Assistive elements (hints, recommendations)
-- Selectable options in forms and lists
-
-```html
-<script setup>
-import { ref } from 'vue'
-
-const selectedFilters = ref(['active', 'verified'])
-const tags = ref(['Vue', 'TypeScript', 'UI'])
-
-const toggleFilter = (filter) => {
-  const index = selectedFilters.value.indexOf(filter)
-  if (index > -1) {
-    selectedFilters.value.splice(index, 1)
-  } else {
-    selectedFilters.value.push(filter)
-  }
-}
-</script>
-
-<template>
-  <!-- Basic chip -->
-  <Chip>Standard</Chip>
-
-  <!-- Input chip for user input -->
-  <Chip input icon="person">Contact</Chip>
-
-  <!-- Assistive chip for hints -->
-  <Chip assistive icon="lightbulb">Recommendation</Chip>
-
-  <!-- Filters with selection state -->
-  <Chip
-    v-for="filter in ['active', 'pending', 'verified']"
-    :key="filter"
-    :selected="selectedFilters.includes(filter)"
-    @click="toggleFilter(filter)"
-  >
-    {{ filter }}
-  </Chip>
-
-  <!-- With data passing -->
-  <Chip
-    value="filter-tag"
-    :detail="{ category: 'status', type: 'active' }"
-    @click="handleChipClick"
-  >
-    Active
-  </Chip>
-</template>
-```
-
-> Chip inherits all Button functionality, including events, icons, and progress indicators, while adding specialized styling for compact interface elements.