dxd-style-code 0.1.11 → 0.1.13

package/src/components/molecules/DXRadioCard/DXRadioCard.stories.js

@@ -5,6 +5,70 @@ export default {
   title: 'Molecules/DXRadioCard',
   component: DXRadioCard,
   tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# DXRadioCard
+
+Компонент карточки с радиокнопкой для выбора одного варианта из группы с визуальным выделением.
+
+## Назначение
+
+DXRadioCard предоставляет способ выбора одного варианта из группы через карточки вместо
+обычных радиокнопок. Компонент идеально подходит для выбора планов, тарифов и других
+вариантов, требующих визуального выделения.
+
+## Архитектура
+
+### Использует
+- Нативный input type="radio" - для семантики и доступности
+- Динамический рендеринг иконки - для опциональной иконки
+
+### Используется в
+- Выбор планов подписки
+- Выбор тарифов
+- Выбор вариантов доставки
+- Любые места, требующие визуальный выбор варианта
+
+## Внутренняя логика
+
+### Визуальное состояние
+- **selected**: Темная рамка (\`border-slate-900\`), светлый фон (\`bg-slate-50\`), галочка справа
+- **unselected**: Светлая рамка (\`border-slate-200\`), белый фон, hover эффект
+
+### Иконка
+Опциональная иконка слева от контента:
+- В выбранном состоянии: темный цвет (\`text-slate-900\`)
+- В невыбранном состоянии: серый цвет (\`text-slate-400\`)
+
+### Галочка
+При выборе карточки:
+- Отображается круглая галочка справа вверху
+- Темный фон с белой галочкой
+
+## Особенности
+
+### v-model
+Полностью поддерживает двустороннее связывание через \`v-model\` для String, Number или Boolean значений.
+
+### Структура
+Карточка состоит из:
+- Иконка (опционально)
+- Заголовок (\`title\`)
+- Описание (\`description\`)
+- Дополнительный контент (через default slot)
+
+### Состояния
+- **disabled** - отключает карточку (opacity, cursor-not-allowed)
+- **selected** - визуально выделяет выбранную карточку
+
+### Слоты
+- **default** - дополнительный контент внутри карточки
+        `,
+      },
+    },
+  },
 };
 
 export const Default = {

package/src/components/molecules/DXRadioGroup/DXRadioGroup.stories.js

@@ -5,6 +5,90 @@ export default {
   title: 'Molecules/DXRadioGroup',
   component: DXRadioGroup,
   tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# DXRadioGroup
+
+Компонент группы радиокнопок для выбора одного значения из списка опций.
+
+## Назначение
+
+DXRadioGroup предоставляет способ группировки радиокнопок для выбора одного значения.
+Компонент автоматически управляет состоянием выбора, синхронизирует стили и поддерживает
+вертикальное и горизонтальное расположение.
+
+## Архитектура
+
+### Использует
+- \`DXRadio\` - отдельные радиокнопки в группе
+
+### Используется в
+- Формы с выбором одного варианта
+- Настройки и конфигурация
+- Фильтры с одним выбором
+- Любые места, требующие выбор одного значения из группы
+
+## Внутренняя логика
+
+### Структура опций
+Опции передаются через массив объектов:
+\`\`\`
+[{ value: 'value1', label: 'Label 1' }, { value: 'value2', label: 'Label 2' }]
+\`\`\`
+
+Каждая опция может содержать:
+- \`value\` - значение опции (обязательно)
+- \`label\` - текст опции (обязательно)
+- \`disabled\` - отключить конкретную опцию
+- \`color\` - цвет для custom variant (переопределяет глобальный цвет)
+
+### Расположение
+- **vertical** (по умолчанию): Вертикальное расположение (\`flex-col\`)
+- **horizontal**: Горизонтальное расположение (\`flex flex-wrap\`)
+
+### Варианты
+- **default**: Нативные радиокнопки с кастомной стилизацией
+- **custom**: Кастомные радиокнопки с точкой и настраиваемыми цветами
+
+### Размеры
+Поддерживает 3 размера:
+- **sm** - маленький
+- **md** - средний (по умолчанию)
+- **lg** - большой
+
+### Цвета (для custom variant)
+Поддерживает 6 цветовых вариантов:
+- **slate** - нейтральный серый
+- **primary** - основной цвет (по умолчанию)
+- **success** - зеленый цвет
+- **danger** - красный цвет
+- **warning** - желтый цвет
+- **info** - синий цвет
+
+## Особенности
+
+### v-model
+Полностью поддерживает двустороннее связывание через \`v-model\` для String, Number или Boolean значений.
+
+### Лейбл и вспомогательный текст
+- \`label\` - отображается над группой
+- \`helper\` - вспомогательный текст под группой
+
+### Состояния
+- **disabled** - отключает всю группу
+- Можно отключить отдельные опции через \`disabled\` в объекте опции
+
+### Синхронизация
+Все радиокнопки в группе автоматически синхронизируются:
+- Размер применяется ко всем кнопкам
+- Вариант применяется ко всем кнопкам
+- Цвет применяется ко всем кнопкам (если не переопределен в опции)
+        `,
+      },
+    },
+  },
   argTypes: {
     variant: {
       control: 'select',

package/src/components/molecules/DXRating/DXRating.stories.js

@@ -1,11 +1,12 @@
 import { ref } from 'vue';
 import DXRating from './DXRating.vue';
 import DXFormControl from '../DXFormControl/DXFormControl.vue';
+import DXText from '../../atoms/DXText/DXText.vue';
 
 export default {
   title: 'Molecules/DXRating',
   component: DXRating,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'category:data-display'],
   parameters: {
     docs: {
       description: {
@@ -264,7 +265,7 @@ export const HeartSymbol = {
           symbol="heart"
           color="red"
         />
-        <p class="text-sm text-slate-600">Выбрано: {{ heartRating }}</p>
+        <DXText tag="p" size="sm" color="muted">Выбрано: {{ heartRating }}</DXText>
       </div>
     `,
   }),

package/src/components/molecules/DXSearchBar/DXSearchBar.stories.js

@@ -4,7 +4,7 @@ import DXSearchBar from './DXSearchBar.vue';
 export default {
   title: 'Molecules/DXSearchBar',
   component: DXSearchBar,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'category:feedback'],
   parameters: {
     docs: {
       description: {

package/src/components/molecules/DXSearchBar/DXSearchBar.vue

@@ -34,12 +34,15 @@
             class="cursor-pointer text-slate-400 hover:text-slate-600"
             @click="handleClear"
           />
-          <span
+          <DXText
             v-if="hotkey && !modelValue"
-            class="text-xs text-slate-400 border border-slate-200 rounded px-1.5 py-0.5"
+            tag="span"
+            size="xs"
+            color="muted"
+            class="border border-slate-200 rounded px-1.5 py-0.5"
           >
             {{ hotkeyLabel }}
-          </span>
+          </DXText>
         </div>
       </template>
     </DXInput>
@@ -53,9 +56,9 @@
       >
         <!-- История поиска -->
         <div v-if="showHistory && historyItems.length > 0 && !modelValue" class="p-2">
-          <div class="px-2 py-1 text-xs font-semibold text-slate-500 uppercase">
+          <DXText tag="div" size="xs" weight="semibold" color="muted" class="px-2 py-1 uppercase">
             История поиска
-          </div>
+          </DXText>
           <div
             v-for="(item, index) in historyItems"
             :key="index"
@@ -64,7 +67,7 @@
             @click="selectHistoryItem(item)"
             @mouseenter="selectedHistoryIndex = index"
           >
-            <span>{{ item }}</span>
+            <DXText tag="span">{{ item }}</DXText>
             <DXIcon
               :icon="ClockIcon"
               size="xs"
@@ -83,24 +86,24 @@
             @click="selectSuggestion(suggestion)"
             @mouseenter="selectedSuggestionIndex = index"
           >
-            <div class="font-medium">{{ suggestion.title }}</div>
-            <div v-if="suggestion.category" class="text-xs text-slate-500 mt-0.5">
+            <DXText tag="div" weight="medium">{{ suggestion.title }}</DXText>
+            <DXText v-if="suggestion.category" tag="div" size="xs" color="muted" class="mt-0.5">
               {{ suggestion.category }}
-            </div>
+            </DXText>
           </div>
         </div>
 
         <!-- Фильтры -->
         <div v-if="filters && filters.length > 0" class="p-2 border-t border-slate-200">
-          <div class="px-2 py-1 text-xs font-semibold text-slate-500 uppercase mb-2">
+          <DXText tag="div" size="xs" weight="semibold" color="muted" class="px-2 py-1 uppercase mb-2">
             Фильтры
-          </div>
+          </DXText>
           <div
             v-for="filter in filters"
             :key="filter.id"
             class="mb-2"
           >
-            <label class="block text-xs text-slate-600 mb-1">{{ filter.label }}</label>
+            <DXText tag="label" size="xs" color="muted" class="block mb-1">{{ filter.label }}</DXText>
             <select
               v-model="selectedFilters[filter.id]"
               class="w-full text-sm border border-slate-200 rounded-lg px-2 py-1 focus:outline-none focus:ring-2 focus:ring-slate-900/10"
@@ -128,6 +131,7 @@ import { useClassComposition } from "../../../composables/useClassComposition";
 import DXInput from "../DXInput/DXInput.vue";
 import DXIcon from "../../atoms/DXIcon/DXIcon.vue";
 import DXLoader from "../../atoms/DXLoader/DXLoader.vue";
+import DXText from "../../atoms/DXText/DXText.vue";
 import {
   MagnifyingGlassIcon,
   XMarkIcon,

package/src/components/molecules/DXSearchSelect/DXSearchSelect.stories.js

@@ -5,6 +5,77 @@ export default {
   title: 'Molecules/DXSearchSelect',
   component: DXSearchSelect,
   tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# DXSearchSelect
+
+Компонент выбора с поиском, поддерживающий одиночный и множественный выбор.
+
+## Назначение
+
+DXSearchSelect предоставляет расширенный select с встроенным поиском, поддержкой
+множественного выбора и возможностью создания новых опций. Компонент идеально подходит
+для больших списков опций.
+
+## Архитектура
+
+### Использует
+- Динамический dropdown - для отображения опций
+- Поисковая строка - для фильтрации опций
+
+### Используется в
+- Выбор пользователей
+- Выбор тегов и категорий
+- Множественный выбор из больших списков
+- Любые места, требующие выбор с поиском
+
+## Внутренняя логика
+
+### Режимы выбора
+- **single** (по умолчанию): Выбор одного значения
+- **multiple**: Выбор нескольких значений
+
+### Поиск
+- Фильтрация опций происходит в реальном времени
+- Поиск нечувствителен к регистру
+- При отсутствии результатов показывается "Не найдено"
+
+### Множественный выбор
+При \`multiple={true}\`:
+- Выбранные опции отображаются как теги над полем
+- Каждый тег можно удалить отдельно
+- Отображается количество выбранных элементов
+
+### Создание новых опций
+При \`creatable={true}\`:
+- Можно создать новую опцию из поискового запроса
+- Отображается кнопка "Создать ..." при отсутствии результатов
+
+## Особенности
+
+### v-model
+Полностью поддерживает двустороннее связывание через \`v-model\`:
+- Для single: String или Number
+- Для multiple: Array значений
+
+### Структура опций
+Опции передаются через массив объектов:
+\`\`\`
+[{ value: 'value', label: 'Label', icon?: Icon }]
+\`\`\`
+
+### Иконки
+Каждая опция может иметь иконку через \`icon\` свойство.
+
+### Клавиатурная навигация
+- **Escape** - закрытие dropdown
+- Поисковая строка не закрывает dropdown при вводе
+        `,
+      },
+    },
+  },
 };
 
 const users = [

package/src/components/molecules/DXSegmentedControl/DXSegmentedControl.stories.js

@@ -24,6 +24,80 @@ export default {
   title: 'Molecules/DXSegmentedControl',
   component: DXSegmentedControl,
   tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# DXSegmentedControl
+
+Компонент сегментированного контрола для выбора одного значения из группы с плавающим индикатором.
+
+## Назначение
+
+DXSegmentedControl предоставляет способ выбора одного значения из группы опций с визуальным
+индикатором выбранного сегмента. Компонент поддерживает иконки, счетчики, анимации и
+автоматически адаптирует размер индикатора под выбранный сегмент.
+
+## Архитектура
+
+### Использует
+- \`DXIcon\` - для иконок в опциях
+- Динамическое позиционирование - для плавающего индикатора
+
+### Используется в
+- Переключение режимов отображения
+- Фильтры и сортировка
+- Настройки и опции
+- Любые места, требующие выбора одного значения из группы
+
+## Внутренняя логика
+
+### Плавающий индикатор
+Компонент использует абсолютно позиционированный индикатор, который автоматически
+перемещается к выбранному сегменту:
+- Размер индикатора соответствует размеру выбранной кнопки
+- Позиция вычисляется динамически на основе offset выбранной кнопки
+- Плавная анимация перемещения через CSS transitions
+
+### Структура опций
+Каждая опция может содержать:
+- \`value\` - значение опции (обязательно)
+- \`label\` - текст опции
+- \`icon\` - иконка (Heroicon компонент)
+- \`count\` - счетчик (число)
+
+### Анимации иконок
+- Глобальная анимация через \`iconAnimation\` prop
+- При \`animateActiveOnly={true}\` (по умолчанию) - анимируется только активная иконка
+- При \`animateActiveOnly={false}\` - анимируются все иконки
+
+### Счетчики
+Счетчики отображаются как бейджи справа от текста/иконки:
+- В активном сегменте: темный фон (\`bg-slate-800 text-white\`)
+- В неактивных сегментах: светлый фон (\`bg-slate-200 text-slate-700\`)
+
+## Особенности
+
+### v-model
+Полностью поддерживает двустороннее связывание через \`v-model\` для String, Number или Boolean значений.
+
+### Визуальное оформление
+- Фон группы: \`bg-slate-100\`
+- Скругление: \`rounded-xl\`
+- Индикатор: белый фон с тенью (\`bg-white shadow-sm\`)
+- Активный сегмент: темный текст (\`text-slate-900\`)
+- Неактивные сегменты: серый текст (\`text-slate-600\`)
+
+### Состояния
+- **disabled** - отключает весь контрол
+- **selected** - визуально выделяет выбранный сегмент
+
+### Лейбл
+Поддерживает опциональный \`label\` prop для отображения лейбла над контролом.
+        `,
+      },
+    },
+  },
   argTypes: {
     iconAnimation: {
       control: 'select',

package/src/components/molecules/DXSelect/DXSelect.stories.js

@@ -12,7 +12,98 @@ import {
 export default {
   title: 'Molecules/DXSelect',
   component: DXSelect,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'category:form'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# DXSelect
+
+Компонент выпадающего списка с поддержкой иконок, валидации и интеграции с группами полей.
+
+## Назначение
+
+DXSelect предоставляет стандартизированный выпадающий список для выбора одного значения из списка опций.
+Компонент поддерживает иконки, валидацию, состояния ошибок и автоматическую адаптацию при использовании внутри DXInputGroup.
+
+## Архитектура
+
+### Использует
+- \`DXFormLabel\` - для отображения лейбла, ошибок и вспомогательного текста
+- \`DXIconWrapper\` - для отображения иконки слева
+- \`DXIcon\` - для иконки chevron справа
+- \`useSize\` composable - для унификации размеров (sm, md, lg)
+- \`useClassComposition\` composable - для объединения CSS классов
+- \`provide/inject\` - для интеграции с DXInputGroup
+
+### Используется в
+- \`DXInputGroup\` - группы полей с аддонами
+- Формы выбора значений
+- Фильтры и сортировка
+- Любые места, требующие выбора из списка опций
+
+## Внутренняя логика
+
+### Интеграция с DXInputGroup
+При использовании внутри \`DXInputGroup\`:
+- Поле автоматически регистрируется в группе через \`provide/inject\`
+- Размер синхронизируется с размером группы
+- Состояние \`disabled\` наследуется от группы
+- Состояние \`error\` синхронизируется с группой
+- Border-radius адаптируется в зависимости от наличия аддонов слева/справа
+
+### Структура опций
+Опции передаются через массив объектов:
+\`\`\`
+[{ value: 'value1', label: 'Label 1' }, { value: 'value2', label: 'Label 2' }]
+\`\`\`
+- \`value\` - значение опции (String или Number)
+- \`label\` - отображаемый текст
+
+### Иконки
+- **prefixIcon**: Иконка слева от селекта (Heroicon компонент)
+- **chevron**: Иконка справа (ChevronDownIcon, всегда отображается)
+- Размер иконки автоматически адаптируется к размеру поля
+
+### Валидация
+- При наличии \`error\` prop, поле получает красную рамку (\`border-rose-300\`)
+- Текст ошибки отображается через \`DXFormLabel\`
+- Состояние ошибки синхронизируется с \`DXInputGroup\`
+
+### Размеры
+Поддерживает три размера:
+- **sm** - компактный размер
+- **md** - средний размер (по умолчанию)
+- **lg** - крупный размер
+
+## Особенности
+
+### v-model
+Полностью поддерживает двустороннее связывание через \`v-model\` для String или Number значений.
+
+### Placeholder
+- Поддерживает \`placeholder\` prop для отображения подсказки
+- Placeholder отображается как disabled опция в начале списка
+
+### Состояния
+- **disabled** - отключает поле (opacity-60, cursor-not-allowed, bg-slate-50)
+- **error** - визуально выделяет ошибку (красная рамка)
+- **required** - отмечает поле как обязательное (через DXFormLabel)
+
+### Лейбл и вспомогательный текст
+- \`label\` - отображается над полем
+- \`helper\` - вспомогательный текст под полем
+- \`error\` - текст ошибки (заменяет helper при наличии)
+
+### Нативный select
+Компонент использует нативный HTML \`<select>\` элемент, что обеспечивает:
+- Нативную доступность
+- Работу с клавиатурой
+- Поддержку мобильных устройств
+        `,
+      },
+    },
+  },
 };
 
 const options = [

package/src/components/molecules/DXStatCard/DXStatCard.stories.js

@@ -15,7 +15,7 @@ const ArrowTrendingUpIconComponent = ArrowTrendingUpIcon;
 export default {
   title: 'Molecules/DXStatCard',
   component: DXStatCard,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'category:data-display'],
   parameters: {
     docs: {
       description: {

package/src/components/molecules/DXStatCard/DXStatCard.vue

@@ -12,38 +12,41 @@
     <div class="flex items-start justify-between">
       <div class="flex-1">
         <!-- Заголовок -->
-        <div v-if="title" class="text-sm font-medium text-slate-600 mb-1">
+        <DXText v-if="title" tag="div" size="sm" weight="medium" color="muted" class="mb-1">
           {{ title }}
-        </div>
+        </DXText>
 
         <!-- Значение -->
         <div class="flex items-baseline gap-2">
-          <span :class="valueClasses">
+          <DXText tag="span" :size="valueSize" weight="bold" color="default">
             {{ formattedValue }}
-          </span>
+          </DXText>
           <!-- Тренд -->
-          <div
+          <DXText
             v-if="trend"
-            :class="trendClasses"
-            class="flex items-center gap-0.5 text-xs font-medium"
+            tag="div"
+            size="xs"
+            weight="medium"
+            :color="trendColor"
+            class="flex items-center gap-0.5"
           >
             <DXIcon
               :icon="trend.direction === 'up' ? ArrowUpIcon : ArrowDownIcon"
               size="xs"
             />
-            <span>{{ Math.abs(trend.value) }}%</span>
-          </div>
+            <DXText tag="span" size="xs" weight="medium">{{ Math.abs(trend.value) }}%</DXText>
+          </DXText>
         </div>
 
         <!-- Описание -->
-        <div v-if="description" class="text-xs text-slate-500 mt-1">
+        <DXText v-if="description" tag="div" size="xs" color="muted" class="mt-1">
           {{ description }}
-        </div>
+        </DXText>
 
         <!-- Сравнение -->
-        <div v-if="comparison" class="text-xs text-slate-500 mt-1">
+        <DXText v-if="comparison" tag="div" size="xs" color="muted" class="mt-1">
           {{ comparison }}
-        </div>
+        </DXText>
       </div>
 
       <!-- Иконка -->
@@ -62,6 +65,7 @@ import { useClassComposition } from "../../../composables/useClassComposition";
 import { useVariantButton } from "../../../composables/useVariant";
 import DXCard from "../../atoms/DXCard/DXCard.vue";
 import DXIcon from "../../atoms/DXIcon/DXIcon.vue";
+import DXText from "../../atoms/DXText/DXText.vue";
 import { ArrowUpIcon, ArrowDownIcon } from "@heroicons/vue/24/outline";
 
 const props = defineProps({
@@ -203,32 +207,32 @@ const formattedValue = computed(() => {
  * 
  * @returns {Array} Массив классов
  */
-const valueClasses = computed(() => {
+const valueSize = computed(() => {
   const sizeMap = {
-    sm: "text-2xl font-bold text-slate-900",
-    md: "text-3xl font-bold text-slate-900",
-    lg: "text-4xl font-bold text-slate-900",
+    sm: "2xl",
+    md: "3xl",
+    lg: "4xl",
   };
   return sizeMap[props.size] || sizeMap.md;
 });
 
 /**
- * Классы для тренда
+ * Цвет тренда
  * 
  * @description
- * Вычисляет классы для отображения тренда на основе направления.
+ * Вычисляет цвет для отображения тренда на основе направления.
  * 
- * @returns {Array} Массив классов
+ * @returns {string} Цвет для DXText
  */
-const trendClasses = computed(() => {
-  if (!props.trend) return [];
+const trendColor = computed(() => {
+  if (!props.trend) return 'default';
   
-  const directionClasses = {
-    up: "text-green-600",
-    down: "text-rose-600",
+  const directionColors = {
+    up: "success",
+    down: "danger",
   };
   
-  return directionClasses[props.trend.direction] || "";
+  return directionColors[props.trend.direction] || "default";
 });
 
 /**

package/src/components/molecules/DXTableFiltersPanel/index.js

@@ -5,3 +5,6 @@ export { default } from './DXTableFiltersPanel.vue';
 
 
 
+
+
+