dxd-style-code 0.1.11 → 0.1.13

package/src/components/organisms/DXSettingsPanel/DXSettingsPanel.vue

@@ -30,9 +30,9 @@
                   :key="group.id || group.title"
                   class="space-y-4"
                 >
-                  <h4 v-if="group.title" class="text-sm font-semibold text-slate-700">
+                  <DXHeading v-if="group.title" level="4" size="sm" weight="semibold" color="default">
                     {{ group.title }}
-                  </h4>
+                  </DXHeading>
                   <div class="space-y-3">
                     <slot
                       :name="`setting-${group.id || group.title}`"
@@ -48,9 +48,9 @@
                           <label class="text-sm font-medium text-slate-900">
                             {{ setting.label }}
                           </label>
-                          <p v-if="setting.description" class="text-xs text-slate-500 mt-1">
+                          <DXText v-if="setting.description" tag="p" size="xs" color="muted" class="mt-1">
                             {{ setting.description }}
-                          </p>
+                          </DXText>
                         </div>
                         <div class="ml-4">
                           <component
@@ -73,7 +73,7 @@
       <div v-else-if="layout === 'sidebar'" class="flex gap-6">
         <!-- Sidebar -->
         <div :class="sidebarClasses">
-          <nav class="space-y-1">
+          <DXNav type="menu" class="space-y-1">
             <button
               v-for="category in categories"
               :key="category.id"
@@ -82,7 +82,7 @@
             >
               {{ category.label }}
             </button>
-          </nav>
+          </DXNav>
         </div>
 
         <!-- Content -->
@@ -99,9 +99,9 @@
                 :key="group.id || group.title"
                 class="space-y-4"
               >
-                <h4 v-if="group.title" class="text-sm font-semibold text-slate-700">
+                <DXHeading v-if="group.title" level="4" size="sm" weight="semibold" color="default">
                   {{ group.title }}
-                </h4>
+                </DXHeading>
                 <div class="space-y-3">
                   <div
                     v-for="setting in group.settings"
@@ -152,6 +152,9 @@ import DXSelect from "../../molecules/DXSelect/DXSelect.vue";
 import DXToggle from "../../atoms/DXToggle/DXToggle.vue";
 import DXTabs from "../DXTabs/DXTabs.vue";
 import DXButton from "../../atoms/DXButton/DXButton.vue";
+import DXHeading from "../../atoms/DXHeading/DXHeading.vue";
+import DXText from "../../atoms/DXText/DXText.vue";
+import DXNav from "../../atoms/DXNav/DXNav.vue";
 import { MagnifyingGlassIcon } from "@heroicons/vue/24/outline";
 
 const props = defineProps({

package/src/components/organisms/DXSidebar/DXSidebar.stories.js

@@ -8,7 +8,7 @@ import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/vue/24/outline';
 export default {
   title: 'Organisms/DXSidebar',
   component: DXSidebar,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'category:navigation'],
   parameters: {
     docs: {
       description: {

package/src/components/organisms/DXSidebarMenu/DXSidebarMenu.stories.js

@@ -21,7 +21,110 @@ import {
 export default {
   title: 'Organisms/DXSidebarMenu',
   component: DXSidebarMenu,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'category:navigation'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# DXSidebarMenu
+
+Компонент меню боковой панели с поддержкой секций, вложенных элементов, поиска и compact режима.
+
+## Назначение
+
+DXSidebarMenu предоставляет полнофункциональное меню для боковой панели с поддержкой
+секций, вложенных элементов (children), иконок, badges, поиска и компактного режима.
+Компонент автоматически управляет активным элементом и поддерживает роутинг.
+
+## Архитектура
+
+### Использует
+- \`DXNav\` - для обертки навигации
+- \`DXSidebarMenuItem\` - для элементов меню
+- \`DXInput\` - для поиска
+- \`DXIcon\` - для иконок
+- \`DXDivider\` - для разделителей
+- \`DXHeading\` - для заголовка
+- \`useMenu\` composable - для логики меню
+
+### Используется в
+- \`DXSidebar\` - для боковой панели
+- \`DXAppLayout\` - для навигации приложения
+- Самостоятельные боковые меню
+
+## Внутренняя логика
+
+### Структура данных
+Меню состоит из секций, каждая секция содержит массив элементов:
+\`\`\`
+[{
+  title?: 'Section Title',
+  items: [{
+    id: 'item-id',
+    label: 'Item Label',
+    icon?: Icon,
+    to?: '/path',
+    badge?: '5',
+    badgeVariant?: 'danger',
+    children?: [...]
+  }]
+}]
+\`\`\`
+
+### Поиск
+При \`searchable={true}\` и \`!compact\`:
+- Отображается поисковая строка
+- Фильтруются элементы меню по \`label\`
+- Поиск нечувствителен к регистру
+
+### Compact режим
+При \`compact={true}\`:
+- Скрывается текст, показываются только иконки
+- Скрываются заголовки секций (показываются разделители)
+- Скрывается поиск
+- Скрывается футер
+- Меню становится компактным
+
+### Collapsible
+При \`collapsible={true}\`:
+- Отображается кнопка для переключения compact режима
+- Кнопка автоматически позиционируется
+
+### Активный элемент
+Активный элемент определяется через:
+- \`activeItem\` prop (приоритет)
+- \`$route.path\` (если используется Vue Router)
+- Сравнение \`to\` с текущим маршрутом
+
+### Вложенные элементы
+Элементы могут иметь \`children\` для создания вложенной структуры:
+- Вложенные элементы отображаются при клике на родительский
+- Поддерживается многоуровневая вложенность
+
+## Особенности
+
+### Слоты
+- **header** - кастомный заголовок
+- **footer** - кастомный футер (скрывается в compact режиме)
+
+### Ширина
+Поддерживает 4 варианта ширины:
+- **sm** - маленькая
+- **md** - средняя (по умолчанию)
+- **lg** - большая
+- **full** - на всю ширину
+
+### Badges
+Элементы могут иметь badges для отображения счетчиков:
+- \`badge\` - текст badge
+- \`badgeVariant\` - вариант badge (danger, info, success и т.д.)
+
+### Роутинг
+Поддерживает интеграцию с Vue Router через \`to\` prop в элементах меню.
+        `,
+      },
+    },
+  },
   argTypes: {
     showHeader: {
       control: { type: 'boolean' },

package/src/components/organisms/DXSidebarMenu/DXSidebarMenu.vue

@@ -7,7 +7,7 @@
     <!-- Заголовок -->
     <div v-if="shouldShowHeader" :class="headerClasses">
       <slot v-if="!compact" name="header">
-        <h2 v-if="title" :class="headerTitleClasses">{{ title }}</h2>
+        <DXHeading v-if="title" level="2" :size="headerSizeMap" weight="bold" color="default" :class="headerTitleClasses">{{ title }}</DXHeading>
       </slot>
       
       <!-- Кнопка переключения compact режима -->
@@ -42,7 +42,7 @@
     </div>
 
     <!-- Меню -->
-    <nav :class="menuClasses">
+    <DXNav type="menu" :class="menuClasses">
       <div 
         v-for="(section, sectionIndex) in filteredSections" 
         :key="sectionIndex"
@@ -70,7 +70,7 @@
           @child-click="handleItemClick"
         />
       </div>
-    </nav>
+    </DXNav>
 
     <!-- Футер -->
     <div v-if="$slots.footer && !compact" :class="footerClasses">
@@ -91,6 +91,8 @@ import DXSidebarMenuItem from './DXSidebarMenuItem.vue';
 import DXInput from '../../molecules/DXInput/DXInput.vue';
 import DXIcon from '../../atoms/DXIcon/DXIcon.vue';
 import DXDivider from '../../atoms/DXDivider/DXDivider.vue';
+import DXHeading from '../../atoms/DXHeading/DXHeading.vue';
+import DXNav from '../../atoms/DXNav/DXNav.vue';
 
 const $slots = useSlots();
 
@@ -220,10 +222,18 @@ const headerClasses = computed(() => [
 ]);
 
 const headerTitleClasses = computed(() => [
-  'font-bold text-slate-900',
   HEADER_SIZE_CLASSES[props.headerSize].title
 ]);
 
+const headerSizeMap = computed(() => {
+  const sizeMap = {
+    sm: 'base',
+    md: 'lg',
+    lg: 'xl',
+  };
+  return sizeMap[props.headerSize] || sizeMap.md;
+});
+
 const menuClasses = computed(() => [
   'flex-1 overflow-y-auto py-4 px-3 space-y-6',
   internalCompact.value && 'px-2'

package/src/components/organisms/DXSidebarMenu/README.md

@@ -165,8 +165,8 @@ const currentPage = ref('/home');
           A
         </div>
         <div>
-          <h2 class="text-sm font-bold">Admin Panel</h2>
-          <p class="text-xs text-slate-500">v2.0.0</p>
+          <DXHeading level="2" size="sm" weight="bold">Admin Panel</DXHeading>
+          <DXText tag="p" size="xs" color="muted">v2.0.0</DXText>
         </div>
       </div>
     </template>
@@ -257,7 +257,7 @@ const sections = [
         <span class="text-white font-bold">S</span>
       </div>
       <div>
-        <h2 class="text-sm font-bold">Shop Admin</h2>
+        <DXHeading level="2" size="sm" weight="bold">Shop Admin</DXHeading>
       </div>
     </div>
   </template>

package/src/components/organisms/DXTable/DXTable.stories.js

@@ -2,11 +2,138 @@ import { ref } from 'vue';
 import DXTable from './DXTable.vue';
 import DXButton from '../../atoms/DXButton/DXButton.vue';
 import DXBadge from '../../atoms/DXBadge/DXBadge.vue';
+import DXHeading from '../../atoms/DXHeading/DXHeading.vue';
+import DXText from '../../atoms/DXText/DXText.vue';
 
 export default {
   title: 'Organisms/DXTable',
   component: DXTable,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'category:data-display'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# DXTable
+
+Полнофункциональная таблица данных с поддержкой сортировки, фильтрации, поиска, пагинации и выбора строк.
+
+## Назначение
+
+DXTable предоставляет комплексное решение для отображения и управления табличными данными. Компонент поддерживает
+локальную и API-режимы работы, сортировку, фильтрацию, поиск, пагинацию, выбор строк, группировку и множество
+настроек визуального оформления.
+
+## Архитектура
+
+### Использует
+- \`DXBaseTable\` - базовая таблица для отображения данных
+- \`DXTableToolbar\` - панель инструментов с поиском и переключением колонок
+- \`DXTablePagination\` - пагинация с выбором размера страницы
+- \`DXTableFiltersPanel\` - панель активных фильтров
+- Composables:
+  - \`useTableData\` - управление данными (локальные/API)
+  - \`useTableSort\` - сортировка данных
+  - \`useTableFilter\` - фильтрация и поиск
+  - \`useTablePagination\` - пагинация
+  - \`useTableSelection\` - выбор строк
+  - \`useTableColumns\` - управление видимостью колонок
+
+### Используется в
+- Списки пользователей
+- Таблицы заказов
+- Административные панели
+- Отчеты и аналитика
+- Любые места, требующие отображения структурированных данных
+
+## Внутренняя логика
+
+### Режимы работы с данными
+- **local** (по умолчанию): Данные обрабатываются локально, все операции (сортировка, фильтрация, пагинация) выполняются на клиенте
+- **api**: Данные загружаются с сервера, операции выполняются на сервере через API запросы
+
+### Структура колонок
+Каждая колонка может иметь:
+- \`key\` - ключ поля в данных
+- \`label\` - заголовок колонки
+- \`sortable\` - можно ли сортировать
+- \`filterable\` - можно ли фильтровать
+- \`filterOptions\` - опции фильтра (если не указаны, собираются автоматически из данных)
+- \`width\` - ширина колонки
+- \`align\` - выравнивание (left, center, right)
+- \`format\` - функция форматирования значения
+
+### Сортировка
+- Поддерживает сортировку по любой колонке с \`sortable={true}\`
+- Три состояния: нет сортировки → asc → desc → нет сортировки
+- Можно задать начальную сортировку через \`defaultSort\`
+- Событие \`sort\` при изменении сортировки
+
+### Фильтрация
+- Поддерживает фильтрацию по любой колонке с \`filterable={true}\`
+- Опции фильтра могут быть заданы явно через \`filterOptions\` или собираются автоматически
+- Панель активных фильтров показывает примененные фильтры
+- Событие \`filter\` при изменении фильтров
+
+### Поиск
+- Глобальный поиск по всем колонкам (если \`searchable={true}\`)
+- Поиск выполняется в реальном времени
+- Отображается в тулбаре
+
+### Пагинация
+- Поддерживает пагинацию (если \`paginated={true}\`)
+- Настраиваемый размер страницы (по умолчанию 10)
+- Опции размера страницы: [10, 25, 50, 100] (настраивается)
+- События: \`page-change\`, \`page-size-change\`
+
+### Выбор строк
+- Поддерживает выбор строк (если \`selectable={true}\`)
+- Чекбокс в заголовке для выбора всех
+- События: \`row-select\`, \`select-all\`, \`selection-clear\`
+
+### Группировка
+- Поддерживает группировку по колонке (через \`groupBy\` prop)
+- Группы отображаются с заголовками
+
+## Особенности
+
+### Размеры
+Поддерживает три размера: \`sm\`, \`md\` (по умолчанию), \`lg\`.
+
+### Визуальные опции
+- **stickyHeader** - фиксированный заголовок при прокрутке (по умолчанию true)
+- **striped** - чередующиеся цвета строк
+- **bordered** - границы вокруг ячеек
+- **hoverable** - эффект при наведении на строку (по умолчанию true)
+- **dense** - компактный режим
+
+### Тулбар
+- Поиск (если \`searchable={true}\`)
+- Переключение видимости колонок (если \`columnToggle={true}\`)
+- Слот \`toolbar-actions\` для кастомных действий
+- Счетчик выбранных строк
+
+### Слоты
+- \`toolbar-actions\` - действия в тулбаре
+- Слоты для кастомизации ячеек: \`cell-[columnKey]\`
+- Слоты для кастомизации заголовков: \`header-[columnKey]\`
+- Слоты для действий строк: \`actions\`
+
+### События
+- \`row-click\` - клик по строке
+- \`row-select\` - выбор строки
+- \`select-all\` - выбор всех строк
+- \`sort\` - изменение сортировки
+- \`filter\` - изменение фильтров
+- \`page-change\` - изменение страницы
+- \`page-size-change\` - изменение размера страницы
+- \`edit\` - редактирование строки
+- \`delete\` - удаление строки
+- \`data-loaded\` - данные загружены (для API режима)
+- \`error\` - ошибка загрузки данных
+        `,
+      },
+    },
+  },
 };
 
 // Sample data
@@ -161,11 +288,11 @@ export const WithFilters = {
     },
     template: `
       <div class="p-4">
-        <h3 class="text-lg font-semibold mb-4">Фильтры в заголовках столбцов</h3>
-        <p class="text-sm text-slate-600 mb-4">
+        <DXHeading level="3" size="lg" weight="semibold" class="mb-4">Фильтры в заголовках столбцов</DXHeading>
+        <DXText tag="p" size="sm" color="muted" class="mb-4">
           Кликните на иконку воронки в заголовке столбца, чтобы открыть фильтр.
           Активные фильтры отображаются в панели над таблицей.
-        </p>
+        </DXText>
         <DXTable
           :columns="columns"
           :data="data"
@@ -187,10 +314,10 @@ export const WithFilterOptions = {
     },
     template: `
       <div class="p-4">
-        <h3 class="text-lg font-semibold mb-4">Фильтры с предопределенными опциями</h3>
-        <p class="text-sm text-slate-600 mb-4">
+        <DXHeading level="3" size="lg" weight="semibold" class="mb-4">Фильтры с предопределенными опциями</DXHeading>
+        <DXText tag="p" size="sm" color="muted" class="mb-4">
           Некоторые столбцы имеют предопределенные опции фильтрации.
-        </p>
+        </DXText>
         <DXTable
           :columns="columns"
           :data="data"
@@ -213,11 +340,11 @@ export const WithMultipleFilters = {
     },
     template: `
       <div class="p-4">
-        <h3 class="text-lg font-semibold mb-4">Множественные активные фильтры</h3>
-        <p class="text-sm text-slate-600 mb-4">
+        <DXHeading level="3" size="lg" weight="semibold" class="mb-4">Множественные активные фильтры</DXHeading>
+        <DXText tag="p" size="sm" color="muted" class="mb-4">
           Примените несколько фильтров одновременно. Все активные фильтры 
           отображаются в панели над таблицей с возможностью удаления.
-        </p>
+        </DXText>
         <DXTable
           :columns="columns"
           :data="data"
@@ -421,7 +548,7 @@ export const CustomCells = {
         </template>
         
         <template #cell-role="{ value }">
-          <span class="font-semibold text-blue-600">{{ value }}</span>
+          <DXText tag="span" weight="semibold" color="primary">{{ value }}</DXText>
         </template>
 
         <template #actions="{ row }">

package/src/components/organisms/DXTable/DXTable.vue

@@ -80,7 +80,7 @@ import { computed, useSlots } from 'vue';
 const slots = useSlots();
 
 // Components
-import DXBaseTable from '../../molecules/DXBaseTable/DXBaseTable.vue';
+import DXBaseTable from '../DXBaseTable/DXBaseTable.vue';
 import DXTableToolbar from '../../molecules/DXTableToolbar/DXTableToolbar.vue';
 import DXTablePagination from '../../molecules/DXTablePagination/DXTablePagination.vue';
 import DXTableFiltersPanel from '../../molecules/DXTableFiltersPanel/DXTableFiltersPanel.vue';

package/src/components/organisms/DXTabs/DXTabs.stories.js

@@ -16,7 +16,97 @@ import {
 export default {
   title: 'Organisms/DXTabs',
   component: DXTabs,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'category:navigation'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# DXTabs
+
+Компонент вкладок с поддержкой иконок, счетчиков, различных вариантов оформления и компактного режима.
+
+## Назначение
+
+DXTabs предоставляет способ организации контента в виде вкладок. Компонент поддерживает различные варианты
+визуального оформления, иконки, счетчики, анимации и компактный режим для адаптации под различные размеры экранов.
+
+## Архитектура
+
+### Использует
+- \`DXIcon\` - для отображения иконок во вкладках
+- Анимации иконок - для интерактивности
+
+### Используется в
+- Навигация по разделам
+- Переключение режимов отображения
+- Фильтрация контента
+- Настройки с категориями
+- Любые места, требующие организации контента по вкладкам
+
+## Внутренняя логика
+
+### Варианты оформления
+- **buttons** (по умолчанию): Вкладки выглядят как кнопки с фоном
+- **tabs-top**: Классические вкладки с подчеркиванием сверху
+- **tabs-bottom**: Вкладки с подчеркиванием снизу
+
+### Выравнивание
+Поддерживает три варианта выравнивания:
+- **left** (по умолчанию) - выравнивание по левому краю
+- **center** - выравнивание по центру
+- **right** - выравнивание по правому краю
+
+### Структура табов
+Каждый таб может содержать:
+- \`value\` - уникальное значение таба (обязательно)
+- \`label\` - текст таба (обязательно)
+- \`icon\` - иконка (Heroicon компонент, опционально)
+- \`count\` - счетчик (число, опционально)
+- \`iconAnimation\` - анимация иконки для конкретного таба (опционально)
+
+### Компактный режим
+При \`compact={true}\`:
+- В неактивных табах скрывается текст, показываются только иконки
+- В активном табе или при наведении текст показывается
+- Режим \`icon-badge\` показывает иконку и счетчик
+- Режим \`icon\` показывает только иконку
+
+### Прокрутка
+При \`scrollable={true}\` (по умолчанию):
+- Если табы не помещаются в контейнер, появляется горизонтальная прокрутка
+- Прокрутка автоматически центрирует активный таб
+
+### Анимации иконок
+- Глобальная анимация через \`iconAnimation\` prop
+- Индивидуальная анимация через \`iconAnimation\` в объекте таба
+- Поддерживаемые анимации: \`none\`, \`wiggle\`, \`scale\`, \`rotate\`
+
+## Особенности
+
+### v-model
+Полностью поддерживает двустороннее связывание через \`v-model\` для значения активного таба.
+
+### Счетчики
+- Счетчики отображаются как бейджи справа от текста/иконки
+- В активном табе счетчик имеет темный фон
+- В неактивных табах счетчик имеет светлый фон
+
+### Состояния
+- **active** - активный таб (визуально выделен)
+- **hover** - таб при наведении
+- **disabled** - отключенный таб (если поддерживается)
+
+### Доступность
+- Использует \`role="tab"\` для семантики
+- \`aria-selected\` для указания активного таба
+- Поддержка клавиатурной навигации
+
+### Интеграция с контентом
+DXTabs управляет только самими вкладками. Контент вкладок должен управляться отдельно через условный рендеринг на основе \`v-model\` значения.
+        `,
+      },
+    },
+  },
   argTypes: {
     variant: {
       control: 'select',

package/src/components/organisms/DXUserProfileCard/DXUserProfileCard.stories.js

@@ -4,7 +4,7 @@ import DXUserProfileCard from './DXUserProfileCard.vue';
 export default {
   title: 'Organisms/DXUserProfileCard',
   component: DXUserProfileCard,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'category:data-display'],
   parameters: {
     docs: {
       description: {

package/src/components/organisms/DXUserProfileCard/DXUserProfileCard.vue

@@ -22,15 +22,15 @@
     <!-- Info -->
     <div :class="infoClasses">
       <slot name="info">
-        <h3 v-if="user?.name" :class="nameClasses">
+        <DXHeading v-if="user?.name" :level="3" :size="nameSize" weight="semibold" color="default">
           {{ user.name }}
-        </h3>
-        <p v-if="user?.role" :class="roleClasses">
+        </DXHeading>
+        <DXText v-if="user?.role" tag="p" :size="roleSize" color="muted" class="mt-1">
           {{ user.role }}
-        </p>
-        <p v-if="user?.bio" :class="bioClasses">
+        </DXText>
+        <DXText v-if="user?.bio" tag="p" :size="bioSize" color="muted" class="mt-2">
           {{ user.bio }}
-        </p>
+        </DXText>
       </slot>
     </div>
 
@@ -98,6 +98,8 @@ import DXCard from "../../atoms/DXCard/DXCard.vue";
 import DXAvatar from "../../atoms/DXAvatar/DXAvatar.vue";
 import DXButton from "../../atoms/DXButton/DXButton.vue";
 import DXBadge from "../../atoms/DXBadge/DXBadge.vue";
+import DXHeading from "../../atoms/DXHeading/DXHeading.vue";
+import DXText from "../../atoms/DXText/DXText.vue";
 
 const props = defineProps({
   /**
@@ -235,11 +237,11 @@ const infoClasses = computed(() =>
  * 
  * @returns {string} Tailwind CSS классы
  */
-const nameClasses = computed(() => {
+const nameSize = computed(() => {
   const sizeMap = {
-    sm: "text-lg font-semibold text-slate-900",
-    md: "text-xl font-semibold text-slate-900",
-    lg: "text-2xl font-semibold text-slate-900",
+    sm: "lg",
+    md: "xl",
+    lg: "2xl",
   };
   return sizeMap[props.size] || sizeMap.md;
 });
@@ -252,11 +254,11 @@ const nameClasses = computed(() => {
  * 
  * @returns {string} Tailwind CSS классы
  */
-const roleClasses = computed(() => {
+const roleSize = computed(() => {
   const sizeMap = {
-    sm: "text-sm text-slate-600 mt-1",
-    md: "text-base text-slate-600 mt-1",
-    lg: "text-lg text-slate-600 mt-1",
+    sm: "sm",
+    md: "md",
+    lg: "lg",
   };
   return sizeMap[props.size] || sizeMap.md;
 });
@@ -269,11 +271,11 @@ const roleClasses = computed(() => {
  * 
  * @returns {string} Tailwind CSS классы
  */
-const bioClasses = computed(() => {
+const bioSize = computed(() => {
   const sizeMap = {
-    sm: "text-xs text-slate-500 mt-2",
-    md: "text-sm text-slate-500 mt-2",
-    lg: "text-base text-slate-500 mt-2",
+    sm: "xs",
+    md: "sm",
+    lg: "md",
   };
   return sizeMap[props.size] || sizeMap.md;
 });

package/src/components/organisms/index.js

@@ -5,6 +5,7 @@ export { default as DXAuthenticationForm } from './DXAuthenticationForm';
 export { default as DXChartContainer } from './DXChartContainer';
 export { default as DXChatInterface } from './DXChatInterface';
 export { default as DXCommentSection } from './DXCommentSection';
+export { default as DXBaseTable } from './DXBaseTable';
 export { default as DXDataTable } from './DXDataTable';
 export { default as DXDropdown } from './DXDropdown';
 export { default as DXEmptyState } from './DXEmptyState';