From 68539bee0d85aca9439875359b2d4983e5644eb1 Mon Sep 17 00:00:00 2001
From: Hooray <304327508@qq.com>
Date: Wed, 24 Jun 2026 16:38:56 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E9=87=8D=E6=9E=84=20components=20?=
 =?UTF-8?q?=E5=AD=90=E5=8C=85=E7=BB=84=E4=BB=B6=E7=9B=AE=E5=BD=95=E5=92=8C?=
 =?UTF-8?q?=E5=AF=BC=E5=87=BA=E7=BB=93=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/router/modules/component.example.ts   |  16 --
 .../src/views/component_example/button.vue    |   2 +-
 .../views/component_example/button_group.vue  |  17 --
 .../src/views/component_example/checkbox.vue  |   2 +-
 .../component_example/checkbox_group.vue      |  17 --
 .../src/views/component_example/kbd.vue       |  14 +-
 packages/components/src/basic/alert/index.ts  |   1 +
 packages/components/src/basic/avatar/index.ts |   1 +
 packages/components/src/basic/badge/index.ts  |   1 +
 .../src/basic/button-group/README.md          |  26 --
 .../src/basic/button-group/_examples/index.ts |  38 ---
 .../index.vue => button/ButtonGroup.vue}      |   0
 .../components/src/basic/button/README.md     |  27 ++
 .../_examples/_group-basic.vue}               |   6 +-
 .../_examples/_group-nested.vue}              |   6 +-
 .../_examples/_group-separator.vue}           |   6 +-
 .../_examples/_group-vertical.vue}            |   6 +-
 .../_examples/_group-with-components.vue}     |   6 +-
 .../src/basic/button/_examples/index.ts       |  35 +++
 .../button-group/ButtonGroup.vue              |   0
 .../button-group/ButtonGroupSeparator.vue     |   0
 .../button-group/ButtonGroupText.vue          |   0
 .../button-group/index.ts                     |   0
 packages/components/src/basic/button/index.ts |   2 +
 .../separator/Separator.vue                   |   0
 .../separator/index.ts                        |   0
 packages/components/src/basic/card/index.ts   |   1 +
 .../src/basic/checkbox-group/README.md        |  61 -----
 .../basic/checkbox-group/_examples/index.ts   |  38 ---
 .../index.vue => checkbox/CheckboxGroup.vue}  |   2 +-
 .../components/src/basic/checkbox/README.md   |  62 +++++
 .../_examples/_group-basic.vue}               |   2 +-
 .../_examples/_group-custom-option.vue}       |   2 +-
 .../_examples/_group-description.vue}         |   2 +-
 .../_examples/_group-disabled.vue}            |   2 +-
 .../_examples/_group-limit.vue}               |   2 +-
 .../src/basic/checkbox/_examples/index.ts     |  45 +++-
 .../components/src/basic/checkbox/index.ts    |   2 +
 .../components/src/basic/collapsible/index.ts |   1 +
 .../src/basic/context-menu/index.ts           |   1 +
 .../src/basic/descriptions/index.ts           |   2 +
 .../components/src/basic/divider/index.ts     |   1 +
 packages/components/src/basic/drawer/index.ts | 138 +----------
 .../components/src/basic/drawer/useDrawer.ts  | 135 ++++++++++
 .../components/src/basic/dropdown/index.ts    |   1 +
 .../components/src/basic/file-upload/index.ts |   2 +
 .../src/basic/file-upload/index.vue           |   2 +-
 .../components/src/basic/fixed-bar/index.ts   |   1 +
 .../components/src/basic/hover-card/index.ts  |   1 +
 packages/components/src/basic/icon/index.ts   |   1 +
 .../src/basic/image-preview/index.ts          |  24 +-
 .../src/basic/image-preview/preview.vue       |   2 +-
 .../basic/image-preview/useImagePreview.ts    |  22 ++
 .../src/basic/image-upload/index.ts           |   2 +
 .../components/src/basic/input-otp/index.ts   |   1 +
 packages/components/src/basic/input/index.ts  |   1 +
 .../components/src/basic/kbd-group/README.md  |  28 ---
 .../src/basic/kbd-group/_examples/index.ts    |  10 -
 .../{kbd-group/index.vue => kbd/KbdGroup.vue} |   0
 packages/components/src/basic/kbd/README.md   |  29 +++
 .../_examples/_group-basic.vue}               |   4 +-
 .../src/basic/kbd/_examples/index.ts          |   7 +
 packages/components/src/basic/kbd/index.ts    |   2 +
 packages/components/src/basic/label/index.ts  |   1 +
 packages/components/src/basic/modal/index.ts  | 234 +-----------------
 .../components/src/basic/modal/useModal.ts    | 231 +++++++++++++++++
 .../src/basic/number-field/index.ts           |   1 +
 .../components/src/basic/page-header/index.ts |   1 +
 .../components/src/basic/page-main/index.ts   |   1 +
 .../components/src/basic/pagination/index.ts  |   1 +
 .../src/basic/password-strength/index.ts      |   1 +
 .../components/src/basic/popover/index.ts     |   1 +
 .../components/src/basic/progress/index.ts    |   1 +
 .../components/src/basic/radio-group/index.ts |   1 +
 .../components/src/basic/scroll-area/index.ts |   1 +
 .../components/src/basic/search-bar/index.ts  |   1 +
 packages/components/src/basic/select/index.ts |   1 +
 packages/components/src/basic/slider/index.ts |   1 +
 packages/components/src/basic/switch/index.ts |   1 +
 packages/components/src/basic/table/index.ts  |   2 +
 packages/components/src/basic/tabs/index.ts   |   1 +
 packages/components/src/basic/tag/index.ts    |   1 +
 .../components/src/basic/textarea/index.ts    |   1 +
 packages/components/src/basic/toast/index.ts  |   7 +-
 .../components/src/basic/toast/useToast.ts    |   5 +
 .../components/src/basic/tooltip/index.ts     |   1 +
 packages/components/src/basic/trend/index.ts  |   1 +
 packages/components/src/examples.ts           |   3 -
 packages/components/src/index.ts              | 109 ++++----
 89 files changed, 732 insertions(+), 746 deletions(-)
 delete mode 100644 apps/example/src/views/component_example/button_group.vue
 delete mode 100644 apps/example/src/views/component_example/checkbox_group.vue
 create mode 100644 packages/components/src/basic/alert/index.ts
 create mode 100644 packages/components/src/basic/avatar/index.ts
 create mode 100644 packages/components/src/basic/badge/index.ts
 delete mode 100644 packages/components/src/basic/button-group/README.md
 delete mode 100644 packages/components/src/basic/button-group/_examples/index.ts
 rename packages/components/src/basic/{button-group/index.vue => button/ButtonGroup.vue} (100%)
 rename packages/components/src/basic/{button-group/_examples/_basic.vue => button/_examples/_group-basic.vue} (85%)
 rename packages/components/src/basic/{button-group/_examples/_nested.vue => button/_examples/_group-nested.vue} (90%)
 rename packages/components/src/basic/{button-group/_examples/_separator.vue => button/_examples/_group-separator.vue} (94%)
 rename packages/components/src/basic/{button-group/_examples/_vertical.vue => button/_examples/_group-vertical.vue} (85%)
 rename packages/components/src/basic/{button-group/_examples/_with-components.vue => button/_examples/_group-with-components.vue} (94%)
 rename packages/components/src/basic/{button-group => button}/button-group/ButtonGroup.vue (100%)
 rename packages/components/src/basic/{button-group => button}/button-group/ButtonGroupSeparator.vue (100%)
 rename packages/components/src/basic/{button-group => button}/button-group/ButtonGroupText.vue (100%)
 rename packages/components/src/basic/{button-group => button}/button-group/index.ts (100%)
 create mode 100644 packages/components/src/basic/button/index.ts
 rename packages/components/src/basic/{button-group => button}/separator/Separator.vue (100%)
 rename packages/components/src/basic/{button-group => button}/separator/index.ts (100%)
 create mode 100644 packages/components/src/basic/card/index.ts
 delete mode 100644 packages/components/src/basic/checkbox-group/README.md
 delete mode 100644 packages/components/src/basic/checkbox-group/_examples/index.ts
 rename packages/components/src/basic/{checkbox-group/index.vue => checkbox/CheckboxGroup.vue} (99%)
 rename packages/components/src/basic/{checkbox-group/_examples/_basic.vue => checkbox/_examples/_group-basic.vue} (93%)
 rename packages/components/src/basic/{checkbox-group/_examples/_custom-option.vue => checkbox/_examples/_group-custom-option.vue} (97%)
 rename packages/components/src/basic/{checkbox-group/_examples/_description.vue => checkbox/_examples/_group-description.vue} (94%)
 rename packages/components/src/basic/{checkbox-group/_examples/_disabled.vue => checkbox/_examples/_group-disabled.vue} (93%)
 rename packages/components/src/basic/{checkbox-group/_examples/_limit.vue => checkbox/_examples/_group-limit.vue} (95%)
 create mode 100644 packages/components/src/basic/checkbox/index.ts
 create mode 100644 packages/components/src/basic/collapsible/index.ts
 create mode 100644 packages/components/src/basic/context-menu/index.ts
 create mode 100644 packages/components/src/basic/descriptions/index.ts
 create mode 100644 packages/components/src/basic/divider/index.ts
 create mode 100644 packages/components/src/basic/drawer/useDrawer.ts
 create mode 100644 packages/components/src/basic/dropdown/index.ts
 create mode 100644 packages/components/src/basic/file-upload/index.ts
 create mode 100644 packages/components/src/basic/fixed-bar/index.ts
 create mode 100644 packages/components/src/basic/hover-card/index.ts
 create mode 100644 packages/components/src/basic/icon/index.ts
 create mode 100644 packages/components/src/basic/image-preview/useImagePreview.ts
 create mode 100644 packages/components/src/basic/image-upload/index.ts
 create mode 100644 packages/components/src/basic/input-otp/index.ts
 create mode 100644 packages/components/src/basic/input/index.ts
 delete mode 100644 packages/components/src/basic/kbd-group/README.md
 delete mode 100644 packages/components/src/basic/kbd-group/_examples/index.ts
 rename packages/components/src/basic/{kbd-group/index.vue => kbd/KbdGroup.vue} (100%)
 rename packages/components/src/basic/{kbd-group/_examples/_basic.vue => kbd/_examples/_group-basic.vue} (83%)
 create mode 100644 packages/components/src/basic/kbd/index.ts
 create mode 100644 packages/components/src/basic/label/index.ts
 create mode 100644 packages/components/src/basic/modal/useModal.ts
 create mode 100644 packages/components/src/basic/number-field/index.ts
 create mode 100644 packages/components/src/basic/page-header/index.ts
 create mode 100644 packages/components/src/basic/page-main/index.ts
 create mode 100644 packages/components/src/basic/pagination/index.ts
 create mode 100644 packages/components/src/basic/password-strength/index.ts
 create mode 100644 packages/components/src/basic/popover/index.ts
 create mode 100644 packages/components/src/basic/progress/index.ts
 create mode 100644 packages/components/src/basic/radio-group/index.ts
 create mode 100644 packages/components/src/basic/scroll-area/index.ts
 create mode 100644 packages/components/src/basic/search-bar/index.ts
 create mode 100644 packages/components/src/basic/select/index.ts
 create mode 100644 packages/components/src/basic/slider/index.ts
 create mode 100644 packages/components/src/basic/switch/index.ts
 create mode 100644 packages/components/src/basic/table/index.ts
 create mode 100644 packages/components/src/basic/tabs/index.ts
 create mode 100644 packages/components/src/basic/tag/index.ts
 create mode 100644 packages/components/src/basic/textarea/index.ts
 create mode 100644 packages/components/src/basic/toast/useToast.ts
 create mode 100644 packages/components/src/basic/tooltip/index.ts
 create mode 100644 packages/components/src/basic/trend/index.ts

diff --git a/apps/example/src/router/modules/component.example.ts b/apps/example/src/router/modules/component.example.ts
index 29186710..d1f885c7 100755
--- a/apps/example/src/router/modules/component.example.ts
+++ b/apps/example/src/router/modules/component.example.ts
@@ -45,14 +45,6 @@ const routes: RouteRecordRaw = {
         title: '按钮',
       },
     },
-    {
-      path: 'button_group',
-      name: 'componentExampleButtonGroup',
-      component: () => import('@/views/component_example/button_group.vue'),
-      meta: {
-        title: '按钮组',
-      },
-    },
     {
       path: 'card',
       name: 'componentExampleCard',
@@ -69,14 +61,6 @@ const routes: RouteRecordRaw = {
         title: '复选框',
       },
     },
-    {
-      path: 'checkbox_group',
-      name: 'componentExampleCheckboxGroup',
-      component: () => import('@/views/component_example/checkbox_group.vue'),
-      meta: {
-        title: '复选框组',
-      },
-    },
     {
       path: 'collapsible',
       name: 'componentExampleCollapsible',
diff --git a/apps/example/src/views/component_example/button.vue b/apps/example/src/views/component_example/button.vue
index 92ec48bc..db47daeb 100644
--- a/apps/example/src/views/component_example/button.vue
+++ b/apps/example/src/views/component_example/button.vue
@@ -4,7 +4,7 @@ import { button } from '@fantastic-admin/components/examples'
 
 <template>
   <div>
-    <FaPageHeader title="按钮" description="FaButton" />
+    <FaPageHeader title="按钮" description="FaButton / FaButtonGroup" />
     <FaPageMain
       v-for="example in button"
       :key="example.title"
diff --git a/apps/example/src/views/component_example/button_group.vue b/apps/example/src/views/component_example/button_group.vue
deleted file mode 100644
index 0b3ef4cd..00000000
--- a/apps/example/src/views/component_example/button_group.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import { buttonGroup } from '@fantastic-admin/components/examples'
-</script>
-
-<template>
-  <div>
-    <FaPageHeader title="按钮组" description="FaButtonGroup" />
-    <FaPageMain
-      v-for="example in buttonGroup"
-      :key="example.title"
-      :code="example.componentRaw"
-      :title="example.title"
-    >
-      <component :is="example.component" />
-    </FaPageMain>
-  </div>
-</template>
diff --git a/apps/example/src/views/component_example/checkbox.vue b/apps/example/src/views/component_example/checkbox.vue
index f46d16aa..850b8520 100644
--- a/apps/example/src/views/component_example/checkbox.vue
+++ b/apps/example/src/views/component_example/checkbox.vue
@@ -4,7 +4,7 @@ import { checkbox } from '@fantastic-admin/components/examples'
 
 <template>
   <div>
-    <FaPageHeader title="复选框" description="FaCheckbox" />
+    <FaPageHeader title="复选框" description="FaCheckbox / FaCheckboxGroup" />
     <FaPageMain
       v-for="example in checkbox"
       :key="example.title"
diff --git a/apps/example/src/views/component_example/checkbox_group.vue b/apps/example/src/views/component_example/checkbox_group.vue
deleted file mode 100644
index ae887e2d..00000000
--- a/apps/example/src/views/component_example/checkbox_group.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import { checkboxGroup } from '@fantastic-admin/components/examples'
-</script>
-
-<template>
-  <div>
-    <FaPageHeader title="复选框组" description="FaCheckboxGroup" />
-    <FaPageMain
-      v-for="example in checkboxGroup"
-      :key="example.title"
-      :code="example.componentRaw"
-      :title="example.title"
-    >
-      <component :is="example.component" />
-    </FaPageMain>
-  </div>
-</template>
diff --git a/apps/example/src/views/component_example/kbd.vue b/apps/example/src/views/component_example/kbd.vue
index 21948d60..2faa735b 100644
--- a/apps/example/src/views/component_example/kbd.vue
+++ b/apps/example/src/views/component_example/kbd.vue
@@ -1,20 +1,12 @@
 <script setup lang="ts">
-import { kbd, kbdGroup } from '@fantastic-admin/components/examples'
-
-const examples = [
-  ...kbd,
-  ...kbdGroup.map(example => ({
-    ...example,
-    title: '组合',
-  })),
-]
+import { kbd } from '@fantastic-admin/components/examples'
 </script>
 
 <template>
   <div>
-    <FaPageHeader title="键盘" description="FaKbd" />
+    <FaPageHeader title="键盘" description="FaKbd / FaKbdGroup" />
     <FaPageMain
-      v-for="example in examples"
+      v-for="example in kbd"
       :key="example.title"
       :code="example.componentRaw"
       :title="example.title"
diff --git a/packages/components/src/basic/alert/index.ts b/packages/components/src/basic/alert/index.ts
new file mode 100644
index 00000000..264d47af
--- /dev/null
+++ b/packages/components/src/basic/alert/index.ts
@@ -0,0 +1 @@
+export { default as Alert } from './index.vue'
diff --git a/packages/components/src/basic/avatar/index.ts b/packages/components/src/basic/avatar/index.ts
new file mode 100644
index 00000000..3547153f
--- /dev/null
+++ b/packages/components/src/basic/avatar/index.ts
@@ -0,0 +1 @@
+export { default as Avatar } from './index.vue'
diff --git a/packages/components/src/basic/badge/index.ts b/packages/components/src/basic/badge/index.ts
new file mode 100644
index 00000000..9c23c912
--- /dev/null
+++ b/packages/components/src/basic/badge/index.ts
@@ -0,0 +1 @@
+export { default as Badge } from './index.vue'
diff --git a/packages/components/src/basic/button-group/README.md b/packages/components/src/basic/button-group/README.md
deleted file mode 100644
index 31efe4c7..00000000
--- a/packages/components/src/basic/button-group/README.md
+++ /dev/null
@@ -1,26 +0,0 @@
-# FaButtonGroup 按钮组
-
-将多个按钮组合在一起的容器组件，支持水平/垂直排列和分割线。
-
-## 使用场景
-
-- 将多个按钮组合在一起的容器组件，支持水平/垂直排列和分割线。
-- 常见用法：垂直排列、带分割线、工具栏按钮组、垂直菜单。
-
-## Props
-
-| 参数 | 说明 | 类型 | 默认值 |
-|------|------|------|--------|
-| orientation | 排列方向 | `'horizontal' \| 'vertical'` | `'horizontal'` |
-| separator | 是否显示分割线 | `boolean` | `false` |
-| class | 自定义类名 | `HTMLAttributes['class']` | `undefined` |
-
-## Slots
-
-| 名称 | 说明 |
-|------|------|
-| default | 默认插槽，放置 FaButton 组件 |
-
-## 注意事项
-
-- 无特殊限制，建议按示例中的受控方式接入，并结合业务容器尺寸验证最终展示效果。
diff --git a/packages/components/src/basic/button-group/_examples/index.ts b/packages/components/src/basic/button-group/_examples/index.ts
deleted file mode 100644
index bfcd6c1e..00000000
--- a/packages/components/src/basic/button-group/_examples/index.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import Basic from './_basic.vue'
-import BasicRaw from './_basic.vue?raw'
-import Nested from './_nested.vue'
-import NestedRaw from './_nested.vue?raw'
-import Separator from './_separator.vue'
-import SeparatorRaw from './_separator.vue?raw'
-import Vertical from './_vertical.vue'
-import VerticalRaw from './_vertical.vue?raw'
-import WithComponents from './_with-components.vue'
-import WithComponentsRaw from './_with-components.vue?raw'
-
-export default [
-  {
-    title: '基础',
-    component: Basic,
-    componentRaw: BasicRaw,
-  },
-  {
-    title: '垂直',
-    component: Vertical,
-    componentRaw: VerticalRaw,
-  },
-  {
-    title: '分割线',
-    component: Separator,
-    componentRaw: SeparatorRaw,
-  },
-  {
-    title: '嵌套',
-    component: Nested,
-    componentRaw: NestedRaw,
-  },
-  {
-    title: '与其他组件组合',
-    component: WithComponents,
-    componentRaw: WithComponentsRaw,
-  },
-]
diff --git a/packages/components/src/basic/button-group/index.vue b/packages/components/src/basic/button/ButtonGroup.vue
similarity index 100%
rename from packages/components/src/basic/button-group/index.vue
rename to packages/components/src/basic/button/ButtonGroup.vue
diff --git a/packages/components/src/basic/button/README.md b/packages/components/src/basic/button/README.md
index 804cde25..0d05a1d8 100644
--- a/packages/components/src/basic/button/README.md
+++ b/packages/components/src/basic/button/README.md
@@ -41,3 +41,30 @@
    - `ghost`：幽灵按钮，用于更次要的操作
    - `link`：链接样式
    - `expand`：展开动画效果按钮
+
+## FaButtonGroup 按钮组
+
+将多个按钮组合在一起的容器组件，支持水平/垂直排列和分割线。
+
+## 使用场景
+
+- 将多个按钮组合在一起的容器组件，支持水平/垂直排列和分割线。
+- 常见用法：垂直排列、带分割线、工具栏按钮组、垂直菜单。
+
+## Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| orientation | 排列方向 | `'horizontal' \| 'vertical'` | `'horizontal'` |
+| separator | 是否显示分割线 | `boolean` | `false` |
+| class | 自定义类名 | `HTMLAttributes['class']` | `undefined` |
+
+## Slots
+
+| 名称 | 说明 |
+|------|------|
+| default | 默认插槽，放置 FaButton 组件 |
+
+## 注意事项
+
+- 无特殊限制，建议按示例中的受控方式接入，并结合业务容器尺寸验证最终展示效果。
diff --git a/packages/components/src/basic/button-group/_examples/_basic.vue b/packages/components/src/basic/button/_examples/_group-basic.vue
similarity index 85%
rename from packages/components/src/basic/button-group/_examples/_basic.vue
rename to packages/components/src/basic/button/_examples/_group-basic.vue
index de742019..7fcd0eec 100644
--- a/packages/components/src/basic/button-group/_examples/_basic.vue
+++ b/packages/components/src/basic/button/_examples/_group-basic.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-// 组件实际使用时无需手动导入，框架会自动导入
-import FaButton from '../../button/index.vue'
 import FaIcon from '../../icon/index.vue'
-import FaButtonGroup from '../index.vue'
+import FaButtonGroup from '../ButtonGroup.vue'
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaButton from '../index.vue'
 </script>
 
 <template>
diff --git a/packages/components/src/basic/button-group/_examples/_nested.vue b/packages/components/src/basic/button/_examples/_group-nested.vue
similarity index 90%
rename from packages/components/src/basic/button-group/_examples/_nested.vue
rename to packages/components/src/basic/button/_examples/_group-nested.vue
index d1733331..408586df 100644
--- a/packages/components/src/basic/button-group/_examples/_nested.vue
+++ b/packages/components/src/basic/button/_examples/_group-nested.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-// 组件实际使用时无需手动导入，框架会自动导入
-import FaButton from '../../button/index.vue'
 import FaIcon from '../../icon/index.vue'
-import FaButtonGroup from '../index.vue'
+import FaButtonGroup from '../ButtonGroup.vue'
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaButton from '../index.vue'
 </script>
 
 <template>
diff --git a/packages/components/src/basic/button-group/_examples/_separator.vue b/packages/components/src/basic/button/_examples/_group-separator.vue
similarity index 94%
rename from packages/components/src/basic/button-group/_examples/_separator.vue
rename to packages/components/src/basic/button/_examples/_group-separator.vue
index a6881335..c729619d 100644
--- a/packages/components/src/basic/button-group/_examples/_separator.vue
+++ b/packages/components/src/basic/button/_examples/_group-separator.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-// 组件实际使用时无需手动导入，框架会自动导入
-import FaButton from '../../button/index.vue'
 import FaIcon from '../../icon/index.vue'
-import FaButtonGroup from '../index.vue'
+import FaButtonGroup from '../ButtonGroup.vue'
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaButton from '../index.vue'
 </script>
 
 <template>
diff --git a/packages/components/src/basic/button-group/_examples/_vertical.vue b/packages/components/src/basic/button/_examples/_group-vertical.vue
similarity index 85%
rename from packages/components/src/basic/button-group/_examples/_vertical.vue
rename to packages/components/src/basic/button/_examples/_group-vertical.vue
index 155c2cb5..1b25a521 100644
--- a/packages/components/src/basic/button-group/_examples/_vertical.vue
+++ b/packages/components/src/basic/button/_examples/_group-vertical.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-// 组件实际使用时无需手动导入，框架会自动导入
-import FaButton from '../../button/index.vue'
 import FaIcon from '../../icon/index.vue'
-import FaButtonGroup from '../index.vue'
+import FaButtonGroup from '../ButtonGroup.vue'
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaButton from '../index.vue'
 </script>
 
 <template>
diff --git a/packages/components/src/basic/button-group/_examples/_with-components.vue b/packages/components/src/basic/button/_examples/_group-with-components.vue
similarity index 94%
rename from packages/components/src/basic/button-group/_examples/_with-components.vue
rename to packages/components/src/basic/button/_examples/_group-with-components.vue
index 8b8a04e0..f8318a47 100644
--- a/packages/components/src/basic/button-group/_examples/_with-components.vue
+++ b/packages/components/src/basic/button/_examples/_group-with-components.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import { shallowRef } from 'vue'
 
-// 组件实际使用时无需手动导入，框架会自动导入
-import FaButton from '../../button/index.vue'
 import FaDropdown from '../../dropdown/index.vue'
 import FaIcon from '../../icon/index.vue'
 import FaInput from '../../input/index.vue'
 import FaSelect from '../../select/index.vue'
-import FaButtonGroup from '../index.vue'
+import FaButtonGroup from '../ButtonGroup.vue'
+// 组件实际使用时无需手动导入，框架会自动导入
+import FaButton from '../index.vue'
 
 const currency = shallowRef('CNY')
 </script>
diff --git a/packages/components/src/basic/button/_examples/index.ts b/packages/components/src/basic/button/_examples/index.ts
index dbf0a417..6e58a9de 100644
--- a/packages/components/src/basic/button/_examples/index.ts
+++ b/packages/components/src/basic/button/_examples/index.ts
@@ -2,6 +2,16 @@ import Basic from './_basic.vue'
 import BasicRaw from './_basic.vue?raw'
 import Disabled from './_disabled.vue'
 import DisabledRaw from './_disabled.vue?raw'
+import GroupBasic from './_group-basic.vue'
+import GroupBasicRaw from './_group-basic.vue?raw'
+import GroupNested from './_group-nested.vue'
+import GroupNestedRaw from './_group-nested.vue?raw'
+import GroupSeparator from './_group-separator.vue'
+import GroupSeparatorRaw from './_group-separator.vue?raw'
+import GroupVertical from './_group-vertical.vue'
+import GroupVerticalRaw from './_group-vertical.vue?raw'
+import GroupWithComponents from './_group-with-components.vue'
+import GroupWithComponentsRaw from './_group-with-components.vue?raw'
 import Loading from './_loading.vue'
 import LoadingRaw from './_loading.vue?raw'
 import Size from './_size.vue'
@@ -35,4 +45,29 @@ export default [
     component: Loading,
     componentRaw: LoadingRaw,
   },
+  {
+    title: '按钮组 - 基础',
+    component: GroupBasic,
+    componentRaw: GroupBasicRaw,
+  },
+  {
+    title: '按钮组 - 垂直',
+    component: GroupVertical,
+    componentRaw: GroupVerticalRaw,
+  },
+  {
+    title: '按钮组 - 分割线',
+    component: GroupSeparator,
+    componentRaw: GroupSeparatorRaw,
+  },
+  {
+    title: '按钮组 - 嵌套',
+    component: GroupNested,
+    componentRaw: GroupNestedRaw,
+  },
+  {
+    title: '按钮组 - 与其他组件组合',
+    component: GroupWithComponents,
+    componentRaw: GroupWithComponentsRaw,
+  },
 ]
diff --git a/packages/components/src/basic/button-group/button-group/ButtonGroup.vue b/packages/components/src/basic/button/button-group/ButtonGroup.vue
similarity index 100%
rename from packages/components/src/basic/button-group/button-group/ButtonGroup.vue
rename to packages/components/src/basic/button/button-group/ButtonGroup.vue
diff --git a/packages/components/src/basic/button-group/button-group/ButtonGroupSeparator.vue b/packages/components/src/basic/button/button-group/ButtonGroupSeparator.vue
similarity index 100%
rename from packages/components/src/basic/button-group/button-group/ButtonGroupSeparator.vue
rename to packages/components/src/basic/button/button-group/ButtonGroupSeparator.vue
diff --git a/packages/components/src/basic/button-group/button-group/ButtonGroupText.vue b/packages/components/src/basic/button/button-group/ButtonGroupText.vue
similarity index 100%
rename from packages/components/src/basic/button-group/button-group/ButtonGroupText.vue
rename to packages/components/src/basic/button/button-group/ButtonGroupText.vue
diff --git a/packages/components/src/basic/button-group/button-group/index.ts b/packages/components/src/basic/button/button-group/index.ts
similarity index 100%
rename from packages/components/src/basic/button-group/button-group/index.ts
rename to packages/components/src/basic/button/button-group/index.ts
diff --git a/packages/components/src/basic/button/index.ts b/packages/components/src/basic/button/index.ts
new file mode 100644
index 00000000..2c68011d
--- /dev/null
+++ b/packages/components/src/basic/button/index.ts
@@ -0,0 +1,2 @@
+export { default as ButtonGroup } from './ButtonGroup.vue'
+export { default as Button } from './index.vue'
diff --git a/packages/components/src/basic/button-group/separator/Separator.vue b/packages/components/src/basic/button/separator/Separator.vue
similarity index 100%
rename from packages/components/src/basic/button-group/separator/Separator.vue
rename to packages/components/src/basic/button/separator/Separator.vue
diff --git a/packages/components/src/basic/button-group/separator/index.ts b/packages/components/src/basic/button/separator/index.ts
similarity index 100%
rename from packages/components/src/basic/button-group/separator/index.ts
rename to packages/components/src/basic/button/separator/index.ts
diff --git a/packages/components/src/basic/card/index.ts b/packages/components/src/basic/card/index.ts
new file mode 100644
index 00000000..a8183cc1
--- /dev/null
+++ b/packages/components/src/basic/card/index.ts
@@ -0,0 +1 @@
+export { default as Card } from './index.vue'
diff --git a/packages/components/src/basic/checkbox-group/README.md b/packages/components/src/basic/checkbox-group/README.md
deleted file mode 100644
index 76a103fe..00000000
--- a/packages/components/src/basic/checkbox-group/README.md
+++ /dev/null
@@ -1,61 +0,0 @@
-# FaCheckboxGroup 复选框组
-
-基于选项数组的复选框组组件，支持描述文案、自定义布局样式和选项插槽扩展。
-
-## 使用场景
-
-- 表单中的多选配置项
-- 多标签偏好选择
-- 权限点批量选择
-- 带说明文案的多选列表
-- 需要卡片式多选交互的场景
-
-## Props
-
-| 属性 | 类型 | 默认值 | 说明 |
-|------|------|--------|------|
-| `options` | `CheckboxGroupOption[]` | **必需** | 复选框组选项数据 |
-| `disabled` | `boolean` | `false` | 是否整体禁用 |
-| `min` | `number` | - | 最少选中数量，达到后已选项会被禁用 |
-| `max` | `number` | - | 最多选中数量，达到后未选项会被禁用 |
-| `dir` | `'ltr' \| 'rtl'` | - | 文本方向 |
-| `class` | `HTMLAttributes['class']` | - | 组容器类名 |
-| `optionClass` | `HTMLAttributes['class']` | - | 每个选项外层容器类名 |
-| `itemClass` | `HTMLAttributes['class']` | - | 复选框本体类名 |
-| `labelClass` | `HTMLAttributes['class']` | - | 标签内容类名 |
-
-### CheckboxGroupOption 接口
-
-```ts
-export interface CheckboxGroupOption {
-  label: string
-  value: AcceptableValue
-  description?: string
-  disabled?: boolean
-  id?: string
-}
-```
-
-## Slots
-
-| 名称 | 说明 |
-|------|------|
-| `option` | 自定义选项内容，slot props: `{ option, checked, disabled, id }`，`option` 会保留 `options` 中的扩展字段类型 |
-
-## Events
-
-| 事件名 | 说明 | 回调参数 |
-|--------|------|----------|
-| `change` | 选中值变化时触发 | `value: AcceptableValue[]` |
-
-通过 `v-model` 实现双向绑定。
-
-## 注意事项
-
-1. **数据驱动**：组选项必须通过 `options` 传入，不再使用多个 `FaCheckbox` 手工拼接。
-2. **v-model 类型**：组件通过 `v-model` 管理选中值数组。
-3. **禁用优先级**：组件整体 `disabled` 为 `true` 时，会覆盖单项可用状态。
-4. **数量限制**：当选中数量小于等于 `min` 时，已选项会被禁用；当选中数量大于等于 `max` 时，未选项会被禁用。
-5. **布局控制**：通过 `class` 和 `optionClass` 自定义多列或卡片式排列，不再提供 `orientation`。
-6. **描述文案布局**：存在 `description` 时，选项会自动切换为顶部对齐布局。
-7. **自定义插槽**：使用 `option` 插槽后，默认复选框本体会隐藏，需要由插槽内容自行承担完整视觉表现。
diff --git a/packages/components/src/basic/checkbox-group/_examples/index.ts b/packages/components/src/basic/checkbox-group/_examples/index.ts
deleted file mode 100644
index 2e2e7b0f..00000000
--- a/packages/components/src/basic/checkbox-group/_examples/index.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import Basic from './_basic.vue'
-import BasicRaw from './_basic.vue?raw'
-import CustomOption from './_custom-option.vue'
-import CustomOptionRaw from './_custom-option.vue?raw'
-import Description from './_description.vue'
-import DescriptionRaw from './_description.vue?raw'
-import Disabled from './_disabled.vue'
-import DisabledRaw from './_disabled.vue?raw'
-import Limit from './_limit.vue'
-import LimitRaw from './_limit.vue?raw'
-
-export default [
-  {
-    title: '基础',
-    component: Basic,
-    componentRaw: BasicRaw,
-  },
-  {
-    title: '描述',
-    component: Description,
-    componentRaw: DescriptionRaw,
-  },
-  {
-    title: '禁用',
-    component: Disabled,
-    componentRaw: DisabledRaw,
-  },
-  {
-    title: '数量限制',
-    component: Limit,
-    componentRaw: LimitRaw,
-  },
-  {
-    title: '自定义选项内容',
-    component: CustomOption,
-    componentRaw: CustomOptionRaw,
-  },
-]
diff --git a/packages/components/src/basic/checkbox-group/index.vue b/packages/components/src/basic/checkbox/CheckboxGroup.vue
similarity index 99%
rename from packages/components/src/basic/checkbox-group/index.vue
rename to packages/components/src/basic/checkbox/CheckboxGroup.vue
index 7b2294bd..5878fdda 100755
--- a/packages/components/src/basic/checkbox-group/index.vue
+++ b/packages/components/src/basic/checkbox/CheckboxGroup.vue
@@ -4,8 +4,8 @@ import type { HTMLAttributes } from 'vue'
 import { useTextDirection } from '@vueuse/core'
 import { computed, useId, watch } from 'vue'
 import { cn } from '#utils'
-import { Checkbox } from '../checkbox/checkbox'
 import { Label } from '../label/label'
+import { Checkbox } from './checkbox'
 
 export interface CheckboxGroupOption {
   label: string
diff --git a/packages/components/src/basic/checkbox/README.md b/packages/components/src/basic/checkbox/README.md
index 21833a95..4a2ffe43 100644
--- a/packages/components/src/basic/checkbox/README.md
+++ b/packages/components/src/basic/checkbox/README.md
@@ -40,3 +40,65 @@
 3. **标签点击**：点击标签文字也能触发复选框状态切换。
 4. **空标签隐藏**：当不提供默认插槽内容时，标签元素会自动隐藏。
 5. **禁用状态**：禁用状态下复选框和标签都无法点击。
+
+## FaCheckboxGroup 复选框组
+
+基于选项数组的复选框组组件，支持描述文案、自定义布局样式和选项插槽扩展。
+
+## 使用场景
+
+- 表单中的多选配置项
+- 多标签偏好选择
+- 权限点批量选择
+- 带说明文案的多选列表
+- 需要卡片式多选交互的场景
+
+## Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `options` | `CheckboxGroupOption[]` | **必需** | 复选框组选项数据 |
+| `disabled` | `boolean` | `false` | 是否整体禁用 |
+| `min` | `number` | - | 最少选中数量，达到后已选项会被禁用 |
+| `max` | `number` | - | 最多选中数量，达到后未选项会被禁用 |
+| `dir` | `'ltr' \| 'rtl'` | - | 文本方向 |
+| `class` | `HTMLAttributes['class']` | - | 组容器类名 |
+| `optionClass` | `HTMLAttributes['class']` | - | 每个选项外层容器类名 |
+| `itemClass` | `HTMLAttributes['class']` | - | 复选框本体类名 |
+| `labelClass` | `HTMLAttributes['class']` | - | 标签内容类名 |
+
+### CheckboxGroupOption 接口
+
+```ts
+export interface CheckboxGroupOption {
+  label: string
+  value: AcceptableValue
+  description?: string
+  disabled?: boolean
+  id?: string
+}
+```
+
+## Slots
+
+| 名称 | 说明 |
+|------|------|
+| `option` | 自定义选项内容，slot props: `{ option, checked, disabled, id }`，`option` 会保留 `options` 中的扩展字段类型 |
+
+## Events
+
+| 事件名 | 说明 | 回调参数 |
+|--------|------|----------|
+| `change` | 选中值变化时触发 | `value: AcceptableValue[]` |
+
+通过 `v-model` 实现双向绑定。
+
+## 注意事项
+
+1. **数据驱动**：组选项必须通过 `options` 传入，不再使用多个 `FaCheckbox` 手工拼接。
+2. **v-model 类型**：组件通过 `v-model` 管理选中值数组。
+3. **禁用优先级**：组件整体 `disabled` 为 `true` 时，会覆盖单项可用状态。
+4. **数量限制**：当选中数量小于等于 `min` 时，已选项会被禁用；当选中数量大于等于 `max` 时，未选项会被禁用。
+5. **布局控制**：通过 `class` 和 `optionClass` 自定义多列或卡片式排列，不再提供 `orientation`。
+6. **描述文案布局**：存在 `description` 时，选项会自动切换为顶部对齐布局。
+7. **自定义插槽**：使用 `option` 插槽后，默认复选框本体会隐藏，需要由插槽内容自行承担完整视觉表现。
diff --git a/packages/components/src/basic/checkbox-group/_examples/_basic.vue b/packages/components/src/basic/checkbox/_examples/_group-basic.vue
similarity index 93%
rename from packages/components/src/basic/checkbox-group/_examples/_basic.vue
rename to packages/components/src/basic/checkbox/_examples/_group-basic.vue
index 3aaef74b..5ec8aa32 100644
--- a/packages/components/src/basic/checkbox-group/_examples/_basic.vue
+++ b/packages/components/src/basic/checkbox/_examples/_group-basic.vue
@@ -2,7 +2,7 @@
 import { computed, shallowRef } from 'vue'
 
 // 组件实际使用时无需手动导入，框架会自动导入
-import FaCheckboxGroup from '../index.vue'
+import FaCheckboxGroup from '../CheckboxGroup.vue'
 
 const value = shallowRef(['music'])
 
diff --git a/packages/components/src/basic/checkbox-group/_examples/_custom-option.vue b/packages/components/src/basic/checkbox/_examples/_group-custom-option.vue
similarity index 97%
rename from packages/components/src/basic/checkbox-group/_examples/_custom-option.vue
rename to packages/components/src/basic/checkbox/_examples/_group-custom-option.vue
index d12f2793..c4db0ecd 100644
--- a/packages/components/src/basic/checkbox-group/_examples/_custom-option.vue
+++ b/packages/components/src/basic/checkbox/_examples/_group-custom-option.vue
@@ -2,7 +2,7 @@
 import { shallowRef } from 'vue'
 
 // 组件实际使用时无需手动导入，框架会自动导入
-import FaCheckboxGroup from '../index.vue'
+import FaCheckboxGroup from '../CheckboxGroup.vue'
 
 const value = shallowRef(['focus', 'balanced'])
 
diff --git a/packages/components/src/basic/checkbox-group/_examples/_description.vue b/packages/components/src/basic/checkbox/_examples/_group-description.vue
similarity index 94%
rename from packages/components/src/basic/checkbox-group/_examples/_description.vue
rename to packages/components/src/basic/checkbox/_examples/_group-description.vue
index e7e89cfa..09019b36 100644
--- a/packages/components/src/basic/checkbox-group/_examples/_description.vue
+++ b/packages/components/src/basic/checkbox/_examples/_group-description.vue
@@ -2,7 +2,7 @@
 import { computed, shallowRef } from 'vue'
 
 // 组件实际使用时无需手动导入，框架会自动导入
-import FaCheckboxGroup from '../index.vue'
+import FaCheckboxGroup from '../CheckboxGroup.vue'
 
 const value = shallowRef(['dashboard', 'report'])
 
diff --git a/packages/components/src/basic/checkbox-group/_examples/_disabled.vue b/packages/components/src/basic/checkbox/_examples/_group-disabled.vue
similarity index 93%
rename from packages/components/src/basic/checkbox-group/_examples/_disabled.vue
rename to packages/components/src/basic/checkbox/_examples/_group-disabled.vue
index c8de8284..43d96e56 100644
--- a/packages/components/src/basic/checkbox-group/_examples/_disabled.vue
+++ b/packages/components/src/basic/checkbox/_examples/_group-disabled.vue
@@ -2,7 +2,7 @@
 import { computed, shallowRef } from 'vue'
 
 // 组件实际使用时无需手动导入，框架会自动导入
-import FaCheckboxGroup from '../index.vue'
+import FaCheckboxGroup from '../CheckboxGroup.vue'
 
 const value = shallowRef(['basic'])
 
diff --git a/packages/components/src/basic/checkbox-group/_examples/_limit.vue b/packages/components/src/basic/checkbox/_examples/_group-limit.vue
similarity index 95%
rename from packages/components/src/basic/checkbox-group/_examples/_limit.vue
rename to packages/components/src/basic/checkbox/_examples/_group-limit.vue
index 37871da4..70009bd8 100644
--- a/packages/components/src/basic/checkbox-group/_examples/_limit.vue
+++ b/packages/components/src/basic/checkbox/_examples/_group-limit.vue
@@ -2,7 +2,7 @@
 import { computed, shallowRef } from 'vue'
 
 // 组件实际使用时无需手动导入，框架会自动导入
-import FaCheckboxGroup from '../index.vue'
+import FaCheckboxGroup from '../CheckboxGroup.vue'
 
 const value = shallowRef(['dashboard'])
 
diff --git a/packages/components/src/basic/checkbox/_examples/index.ts b/packages/components/src/basic/checkbox/_examples/index.ts
index 0e95b851..b77de02d 100644
--- a/packages/components/src/basic/checkbox/_examples/index.ts
+++ b/packages/components/src/basic/checkbox/_examples/index.ts
@@ -4,6 +4,16 @@ import CustomStyle from './_custom-style.vue'
 import CustomStyleRaw from './_custom-style.vue?raw'
 import Disabled from './_disabled.vue'
 import DisabledRaw from './_disabled.vue?raw'
+import GroupBasic from './_group-basic.vue'
+import GroupBasicRaw from './_group-basic.vue?raw'
+import GroupCustomOption from './_group-custom-option.vue'
+import GroupCustomOptionRaw from './_group-custom-option.vue?raw'
+import GroupDescription from './_group-description.vue'
+import GroupDescriptionRaw from './_group-description.vue?raw'
+import GroupDisabled from './_group-disabled.vue'
+import GroupDisabledRaw from './_group-disabled.vue?raw'
+import GroupLimit from './_group-limit.vue'
+import GroupLimitRaw from './_group-limit.vue?raw'
 import Indeterminate from './_indeterminate.vue'
 import IndeterminateRaw from './_indeterminate.vue?raw'
 
@@ -13,19 +23,44 @@ export default [
     component: Basic,
     componentRaw: BasicRaw,
   },
-  {
-    title: '半选状态',
-    component: Indeterminate,
-    componentRaw: IndeterminateRaw,
-  },
   {
     title: '禁用',
     component: Disabled,
     componentRaw: DisabledRaw,
   },
+  {
+    title: '半选',
+    component: Indeterminate,
+    componentRaw: IndeterminateRaw,
+  },
   {
     title: '自定义样式',
     component: CustomStyle,
     componentRaw: CustomStyleRaw,
   },
+  {
+    title: '复选框组 - 基础',
+    component: GroupBasic,
+    componentRaw: GroupBasicRaw,
+  },
+  {
+    title: '复选框组 - 描述',
+    component: GroupDescription,
+    componentRaw: GroupDescriptionRaw,
+  },
+  {
+    title: '复选框组 - 禁用',
+    component: GroupDisabled,
+    componentRaw: GroupDisabledRaw,
+  },
+  {
+    title: '复选框组 - 数量限制',
+    component: GroupLimit,
+    componentRaw: GroupLimitRaw,
+  },
+  {
+    title: '复选框组 - 自定义选项',
+    component: GroupCustomOption,
+    componentRaw: GroupCustomOptionRaw,
+  },
 ]
diff --git a/packages/components/src/basic/checkbox/index.ts b/packages/components/src/basic/checkbox/index.ts
new file mode 100644
index 00000000..889b06a5
--- /dev/null
+++ b/packages/components/src/basic/checkbox/index.ts
@@ -0,0 +1,2 @@
+export { default as CheckboxGroup } from './CheckboxGroup.vue'
+export { default as Checkbox } from './index.vue'
diff --git a/packages/components/src/basic/collapsible/index.ts b/packages/components/src/basic/collapsible/index.ts
new file mode 100644
index 00000000..461de8de
--- /dev/null
+++ b/packages/components/src/basic/collapsible/index.ts
@@ -0,0 +1 @@
+export { default as Collapsible } from './index.vue'
diff --git a/packages/components/src/basic/context-menu/index.ts b/packages/components/src/basic/context-menu/index.ts
new file mode 100644
index 00000000..44683b03
--- /dev/null
+++ b/packages/components/src/basic/context-menu/index.ts
@@ -0,0 +1 @@
+export { default as ContextMenu } from './index.vue'
diff --git a/packages/components/src/basic/descriptions/index.ts b/packages/components/src/basic/descriptions/index.ts
new file mode 100644
index 00000000..9a695d76
--- /dev/null
+++ b/packages/components/src/basic/descriptions/index.ts
@@ -0,0 +1,2 @@
+export { default as Descriptions } from './index.vue'
+export type { DescriptionDirection, DescriptionItem, DescriptionItemBase, DescriptionSize, DescriptionSlotProps, DescriptionsProps, DescriptionValue } from './index.vue'
diff --git a/packages/components/src/basic/divider/index.ts b/packages/components/src/basic/divider/index.ts
new file mode 100644
index 00000000..674b3b24
--- /dev/null
+++ b/packages/components/src/basic/divider/index.ts
@@ -0,0 +1 @@
+export { default as Divider } from './index.vue'
diff --git a/packages/components/src/basic/drawer/index.ts b/packages/components/src/basic/drawer/index.ts
index 4a69de30..1afefb61 100644
--- a/packages/components/src/basic/drawer/index.ts
+++ b/packages/components/src/basic/drawer/index.ts
@@ -1,135 +1,3 @@
-import type { Component, HTMLAttributes, VNode } from 'vue'
-import { createVNode, getCurrentInstance, h, isVNode, onUnmounted, ref, render, shallowRef, watchEffect } from 'vue'
-import Drawer from './index.vue'
-
-export interface DrawerProps {
-  id?: string
-  modelValue?: boolean
-  zIndex?: number
-  side?: 'top' | 'bottom' | 'left' | 'right'
-  title?: string | (() => string)
-  description?: string | (() => string)
-  loading?: boolean
-  closable?: boolean
-  centered?: boolean
-  bordered?: boolean
-  overlay?: boolean
-  overlayBlur?: boolean
-  showConfirmButton?: boolean
-  showCancelButton?: boolean
-  confirmButtonText?: string | (() => string)
-  cancelButtonText?: string | (() => string)
-  confirmButtonDisabled?: boolean
-  confirmButtonLoading?: boolean
-  beforeClose?: (
-    action: 'confirm' | 'cancel' | 'close',
-    done: () => void,
-  ) => void
-  header?: boolean
-  footer?: boolean
-  closeOnClickOverlay?: boolean
-  closeOnPressEscape?: boolean
-  destroyOnClose?: boolean
-  openAutoFocus?: boolean
-  contentClass?: HTMLAttributes['class']
-  headerClass?: HTMLAttributes['class']
-  footerClass?: HTMLAttributes['class']
-}
-
-export interface DrawerEmits {
-  'update:modelValue': [value: boolean]
-  'open': []
-  'opened': []
-  'close': []
-  'closed': []
-  'confirm': []
-  'cancel': []
-}
-
-type BaseOptions = Omit<DrawerProps, 'modelValue'> & {
-  content?: Component | VNode | string
-  onOpen?: () => void
-  onOpened?: () => void
-  onClose?: () => void
-  onClosed?: () => void
-  onConfirm?: () => void
-  onCancel?: () => void
-}
-
-export function useDrawer() {
-  function create(initialOptions: BaseOptions) {
-    const container = document.createElement('div')
-    const visible = ref(false)
-    const options = shallowRef<BaseOptions>({ ...initialOptions })
-    const instance = getCurrentInstance()
-    let vnode: VNode | null = null
-
-    const updateVNode = () => {
-      vnode = createVNode(Drawer, Object.assign({
-        'id': instance && instance.uid ? `FaDrawer-${instance.uid}` : undefined,
-        'modelValue': visible.value,
-        'onUpdate:modelValue': (val: boolean) => {
-          visible.value = val
-        },
-        ...options.value,
-      }), {
-        default: () => {
-          if (typeof options.value.content === 'string') {
-            return options.value.content
-          }
-          else if (isVNode(options.value.content)) {
-            return options.value.content
-          }
-          else if (options.value.content) {
-            return h(options.value.content)
-          }
-          return null
-        },
-      })
-      // 继承主应用的上下文
-      if (instance && instance.appContext) {
-        vnode.appContext = instance.appContext
-      }
-      render(vnode, container)
-    }
-
-    // 监听 visible 和 options 变化，自动重新渲染
-    watchEffect(() => {
-      updateVNode()
-    })
-
-    // 挂载到当前实例
-    instance?.proxy?.$el?.appendChild(container)
-
-    // 监听组件卸载，自动清理
-    if (instance) {
-      onUnmounted(() => {
-        if (vnode) {
-          render(null, container)
-          vnode = null
-        }
-        if (container.parentNode) {
-          container.parentNode.removeChild(container)
-        }
-      })
-    }
-
-    const open = () => {
-      visible.value = true
-    }
-    const close = () => {
-      visible.value = false
-    }
-    const update = (newOptions: BaseOptions) => {
-      options.value = { ...options.value, ...newOptions }
-    }
-    return {
-      open,
-      close,
-      update,
-    }
-  }
-  return {
-    create,
-  }
-}
+export { default as Drawer } from './index.vue'
+export { useDrawer } from './useDrawer'
+export type { DrawerEmits, DrawerProps } from './useDrawer'
diff --git a/packages/components/src/basic/drawer/useDrawer.ts b/packages/components/src/basic/drawer/useDrawer.ts
new file mode 100644
index 00000000..4a69de30
--- /dev/null
+++ b/packages/components/src/basic/drawer/useDrawer.ts
@@ -0,0 +1,135 @@
+import type { Component, HTMLAttributes, VNode } from 'vue'
+import { createVNode, getCurrentInstance, h, isVNode, onUnmounted, ref, render, shallowRef, watchEffect } from 'vue'
+import Drawer from './index.vue'
+
+export interface DrawerProps {
+  id?: string
+  modelValue?: boolean
+  zIndex?: number
+  side?: 'top' | 'bottom' | 'left' | 'right'
+  title?: string | (() => string)
+  description?: string | (() => string)
+  loading?: boolean
+  closable?: boolean
+  centered?: boolean
+  bordered?: boolean
+  overlay?: boolean
+  overlayBlur?: boolean
+  showConfirmButton?: boolean
+  showCancelButton?: boolean
+  confirmButtonText?: string | (() => string)
+  cancelButtonText?: string | (() => string)
+  confirmButtonDisabled?: boolean
+  confirmButtonLoading?: boolean
+  beforeClose?: (
+    action: 'confirm' | 'cancel' | 'close',
+    done: () => void,
+  ) => void
+  header?: boolean
+  footer?: boolean
+  closeOnClickOverlay?: boolean
+  closeOnPressEscape?: boolean
+  destroyOnClose?: boolean
+  openAutoFocus?: boolean
+  contentClass?: HTMLAttributes['class']
+  headerClass?: HTMLAttributes['class']
+  footerClass?: HTMLAttributes['class']
+}
+
+export interface DrawerEmits {
+  'update:modelValue': [value: boolean]
+  'open': []
+  'opened': []
+  'close': []
+  'closed': []
+  'confirm': []
+  'cancel': []
+}
+
+type BaseOptions = Omit<DrawerProps, 'modelValue'> & {
+  content?: Component | VNode | string
+  onOpen?: () => void
+  onOpened?: () => void
+  onClose?: () => void
+  onClosed?: () => void
+  onConfirm?: () => void
+  onCancel?: () => void
+}
+
+export function useDrawer() {
+  function create(initialOptions: BaseOptions) {
+    const container = document.createElement('div')
+    const visible = ref(false)
+    const options = shallowRef<BaseOptions>({ ...initialOptions })
+    const instance = getCurrentInstance()
+    let vnode: VNode | null = null
+
+    const updateVNode = () => {
+      vnode = createVNode(Drawer, Object.assign({
+        'id': instance && instance.uid ? `FaDrawer-${instance.uid}` : undefined,
+        'modelValue': visible.value,
+        'onUpdate:modelValue': (val: boolean) => {
+          visible.value = val
+        },
+        ...options.value,
+      }), {
+        default: () => {
+          if (typeof options.value.content === 'string') {
+            return options.value.content
+          }
+          else if (isVNode(options.value.content)) {
+            return options.value.content
+          }
+          else if (options.value.content) {
+            return h(options.value.content)
+          }
+          return null
+        },
+      })
+      // 继承主应用的上下文
+      if (instance && instance.appContext) {
+        vnode.appContext = instance.appContext
+      }
+      render(vnode, container)
+    }
+
+    // 监听 visible 和 options 变化，自动重新渲染
+    watchEffect(() => {
+      updateVNode()
+    })
+
+    // 挂载到当前实例
+    instance?.proxy?.$el?.appendChild(container)
+
+    // 监听组件卸载，自动清理
+    if (instance) {
+      onUnmounted(() => {
+        if (vnode) {
+          render(null, container)
+          vnode = null
+        }
+        if (container.parentNode) {
+          container.parentNode.removeChild(container)
+        }
+      })
+    }
+
+    const open = () => {
+      visible.value = true
+    }
+    const close = () => {
+      visible.value = false
+    }
+    const update = (newOptions: BaseOptions) => {
+      options.value = { ...options.value, ...newOptions }
+    }
+    return {
+      open,
+      close,
+      update,
+    }
+  }
+  return {
+    create,
+  }
+}
diff --git a/packages/components/src/basic/dropdown/index.ts b/packages/components/src/basic/dropdown/index.ts
new file mode 100644
index 00000000..76a819d7
--- /dev/null
+++ b/packages/components/src/basic/dropdown/index.ts
@@ -0,0 +1 @@
+export { default as Dropdown } from './index.vue'
diff --git a/packages/components/src/basic/file-upload/index.ts b/packages/components/src/basic/file-upload/index.ts
new file mode 100644
index 00000000..111ff508
--- /dev/null
+++ b/packages/components/src/basic/file-upload/index.ts
@@ -0,0 +1,2 @@
+export { default as FileUpload } from './index.vue'
+export type { FileItem, FileUploadRequestOptions } from './index.vue'
diff --git a/packages/components/src/basic/file-upload/index.vue b/packages/components/src/basic/file-upload/index.vue
index ad99a986..8b0099b0 100644
--- a/packages/components/src/basic/file-upload/index.vue
+++ b/packages/components/src/basic/file-upload/index.vue
@@ -2,7 +2,7 @@
 import axios from 'axios'
 import { filesize } from 'filesize'
 import { computed, onMounted, onUnmounted, ref, useTemplateRef } from 'vue'
-import ButtonGroup from '../button-group/index.vue'
+import ButtonGroup from '../button/ButtonGroup.vue'
 import Button from '../button/index.vue'
 import Icon from '../icon/index.vue'
 
diff --git a/packages/components/src/basic/fixed-bar/index.ts b/packages/components/src/basic/fixed-bar/index.ts
new file mode 100644
index 00000000..e86c03d8
--- /dev/null
+++ b/packages/components/src/basic/fixed-bar/index.ts
@@ -0,0 +1 @@
+export { default as FixedBar } from './index.vue'
diff --git a/packages/components/src/basic/hover-card/index.ts b/packages/components/src/basic/hover-card/index.ts
new file mode 100644
index 00000000..ff82f248
--- /dev/null
+++ b/packages/components/src/basic/hover-card/index.ts
@@ -0,0 +1 @@
+export { default as HoverCard } from './index.vue'
diff --git a/packages/components/src/basic/icon/index.ts b/packages/components/src/basic/icon/index.ts
new file mode 100644
index 00000000..fe27c39e
--- /dev/null
+++ b/packages/components/src/basic/icon/index.ts
@@ -0,0 +1 @@
+export { default as Icon } from './index.vue'
diff --git a/packages/components/src/basic/image-preview/index.ts b/packages/components/src/basic/image-preview/index.ts
index ed5c191c..0f3e9023 100644
--- a/packages/components/src/basic/image-preview/index.ts
+++ b/packages/components/src/basic/image-preview/index.ts
@@ -1,22 +1,2 @@
-import { createApp, h } from 'vue'
-import Preview from './preview.vue'
-
-export function useImagePreview() {
-  function open(src: string | string[], index = 0) {
-    const container = document.createElement('div')
-    const app = createApp({
-      render() {
-        return h(Preview, {
-          modelValue: true,
-          src,
-          index,
-        })
-      },
-    })
-    app.mount(container)
-  }
-
-  return {
-    open,
-  }
-}
+export { default as ImagePreview } from './index.vue'
+export { useImagePreview } from './useImagePreview'
diff --git a/packages/components/src/basic/image-preview/preview.vue b/packages/components/src/basic/image-preview/preview.vue
index 1c0550bb..d19677bd 100644
--- a/packages/components/src/basic/image-preview/preview.vue
+++ b/packages/components/src/basic/image-preview/preview.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { VisuallyHidden } from 'reka-ui'
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
-import ButtonGroup from '../button-group/index.vue'
+import ButtonGroup from '../button/ButtonGroup.vue'
 import Button from '../button/index.vue'
 import Icon from '../icon/index.vue'
 import { Dialog, DialogContent, DialogDescription, DialogTitle } from './dialog'
diff --git a/packages/components/src/basic/image-preview/useImagePreview.ts b/packages/components/src/basic/image-preview/useImagePreview.ts
new file mode 100644
index 00000000..ed5c191c
--- /dev/null
+++ b/packages/components/src/basic/image-preview/useImagePreview.ts
@@ -0,0 +1,22 @@
+import { createApp, h } from 'vue'
+import Preview from './preview.vue'
+
+export function useImagePreview() {
+  function open(src: string | string[], index = 0) {
+    const container = document.createElement('div')
+    const app = createApp({
+      render() {
+        return h(Preview, {
+          modelValue: true,
+          src,
+          index,
+        })
+      },
+    })
+    app.mount(container)
+  }
+
+  return {
+    open,
+  }
+}
diff --git a/packages/components/src/basic/image-upload/index.ts b/packages/components/src/basic/image-upload/index.ts
new file mode 100644
index 00000000..1049213e
--- /dev/null
+++ b/packages/components/src/basic/image-upload/index.ts
@@ -0,0 +1,2 @@
+export { default as ImageUpload } from './index.vue'
+export type { UploadRequestOptions } from './index.vue'
diff --git a/packages/components/src/basic/input-otp/index.ts b/packages/components/src/basic/input-otp/index.ts
new file mode 100644
index 00000000..151d6a9a
--- /dev/null
+++ b/packages/components/src/basic/input-otp/index.ts
@@ -0,0 +1 @@
+export { default as InputOTP } from './index.vue'
diff --git a/packages/components/src/basic/input/index.ts b/packages/components/src/basic/input/index.ts
new file mode 100644
index 00000000..c1bab5c6
--- /dev/null
+++ b/packages/components/src/basic/input/index.ts
@@ -0,0 +1 @@
+export { default as Input } from './index.vue'
diff --git a/packages/components/src/basic/kbd-group/README.md b/packages/components/src/basic/kbd-group/README.md
deleted file mode 100644
index 611d1cf9..00000000
--- a/packages/components/src/basic/kbd-group/README.md
+++ /dev/null
@@ -1,28 +0,0 @@
-# FaKbdGroup 键盘组合
-
-用于包裹多个 `FaKbd` 组件，展示组合按键的容器组件。
-
-## 使用场景
-
-- 快捷键组合展示
-- 键盘操作说明
-- 命令面板提示
-- 帮助文档中的多键组合说明
-
-## Props
-
-| 属性 | 类型 | 默认值 | 说明 |
-|------|------|--------|------|
-| `class` | `HTMLAttributes['class']` | - | 自定义 CSS 类 |
-
-## Slots
-
-| 名称 | 说明 |
-|------|------|
-| `default` | 包含的 `FaKbd` 组件 |
-
-## 注意事项
-
-1. **仅用于组合**：此组件仅用于包裹多个 `FaKbd`，不建议单独使用
-2. **间距自动**：内部的 `FaKbd` 会自动添加适当间距
-3. **灵活内容**：除了 `FaKbd` 外，也可以放入其他内容（如分隔符）
diff --git a/packages/components/src/basic/kbd-group/_examples/index.ts b/packages/components/src/basic/kbd-group/_examples/index.ts
deleted file mode 100644
index 1065244f..00000000
--- a/packages/components/src/basic/kbd-group/_examples/index.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import Basic from './_basic.vue'
-import BasicRaw from './_basic.vue?raw'
-
-export default [
-  {
-    title: '基础',
-    component: Basic,
-    componentRaw: BasicRaw,
-  },
-]
diff --git a/packages/components/src/basic/kbd-group/index.vue b/packages/components/src/basic/kbd/KbdGroup.vue
similarity index 100%
rename from packages/components/src/basic/kbd-group/index.vue
rename to packages/components/src/basic/kbd/KbdGroup.vue
diff --git a/packages/components/src/basic/kbd/README.md b/packages/components/src/basic/kbd/README.md
index 362ff273..0f03d5f8 100644
--- a/packages/components/src/basic/kbd/README.md
+++ b/packages/components/src/basic/kbd/README.md
@@ -34,3 +34,32 @@
 1. **配合使用**：组合按键时请使用 `FaKbdGroup` 包裹多个 `FaKbd`
 2. **内容长度**：按键内容不宜过长，适合单个字符或简短单词
 3. **图标支持**：可以使用 `FaIcon` 组件显示图标，图标会自动调整为合适尺寸
+
+## FaKbdGroup 键盘组合
+
+用于包裹多个 `FaKbd` 组件，展示组合按键的容器组件。
+
+## 使用场景
+
+- 快捷键组合展示
+- 键盘操作说明
+- 命令面板提示
+- 帮助文档中的多键组合说明
+
+## Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `class` | `HTMLAttributes['class']` | - | 自定义 CSS 类 |
+
+## Slots
+
+| 名称 | 说明 |
+|------|------|
+| `default` | 包含的 `FaKbd` 组件 |
+
+## 注意事项
+
+1. **仅用于组合**：此组件仅用于包裹多个 `FaKbd`，不建议单独使用
+2. **间距自动**：内部的 `FaKbd` 会自动添加适当间距
+3. **灵活内容**：除了 `FaKbd` 外，也可以放入其他内容（如分隔符）
diff --git a/packages/components/src/basic/kbd-group/_examples/_basic.vue b/packages/components/src/basic/kbd/_examples/_group-basic.vue
similarity index 83%
rename from packages/components/src/basic/kbd-group/_examples/_basic.vue
rename to packages/components/src/basic/kbd/_examples/_group-basic.vue
index 50e738f9..9f833f49 100644
--- a/packages/components/src/basic/kbd-group/_examples/_basic.vue
+++ b/packages/components/src/basic/kbd/_examples/_group-basic.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 // 组件实际使用时无需手动导入，框架会自动导入
-import FaKbd from '../../kbd/index.vue'
-import FaKbdGroup from '../index.vue'
+import FaKbd from '../index.vue'
+import FaKbdGroup from '../KbdGroup.vue'
 </script>
 
 <template>
diff --git a/packages/components/src/basic/kbd/_examples/index.ts b/packages/components/src/basic/kbd/_examples/index.ts
index 1065244f..eaf9ba97 100644
--- a/packages/components/src/basic/kbd/_examples/index.ts
+++ b/packages/components/src/basic/kbd/_examples/index.ts
@@ -1,5 +1,7 @@
 import Basic from './_basic.vue'
 import BasicRaw from './_basic.vue?raw'
+import GroupBasic from './_group-basic.vue'
+import GroupBasicRaw from './_group-basic.vue?raw'
 
 export default [
   {
@@ -7,4 +9,9 @@ export default [
     component: Basic,
     componentRaw: BasicRaw,
   },
+  {
+    title: '组合',
+    component: GroupBasic,
+    componentRaw: GroupBasicRaw,
+  },
 ]
diff --git a/packages/components/src/basic/kbd/index.ts b/packages/components/src/basic/kbd/index.ts
new file mode 100644
index 00000000..3a64354a
--- /dev/null
+++ b/packages/components/src/basic/kbd/index.ts
@@ -0,0 +1,2 @@
+export { default as Kbd } from './index.vue'
+export { default as KbdGroup } from './KbdGroup.vue'
diff --git a/packages/components/src/basic/label/index.ts b/packages/components/src/basic/label/index.ts
new file mode 100644
index 00000000..64c1e6b2
--- /dev/null
+++ b/packages/components/src/basic/label/index.ts
@@ -0,0 +1 @@
+export { default as Label } from './index.vue'
diff --git a/packages/components/src/basic/modal/index.ts b/packages/components/src/basic/modal/index.ts
index 1668bfed..ee586c85 100644
--- a/packages/components/src/basic/modal/index.ts
+++ b/packages/components/src/basic/modal/index.ts
@@ -1,231 +1,3 @@
-import type { Component, HTMLAttributes, VNode } from 'vue'
-import { createVNode, getCurrentInstance, h, isVNode, onUnmounted, ref, render, shallowRef, watchEffect } from 'vue'
-import Modal from './index.vue'
-
-export interface ModalProps {
-  id?: string
-  modelValue?: boolean
-  zIndex?: number
-  title?: string | (() => string)
-  description?: string | (() => string)
-  icon?: 'info' | 'success' | 'warning' | 'error'
-  loading?: boolean
-  closable?: boolean
-  maximize?: boolean
-  maximizable?: boolean
-  draggable?: boolean
-  center?: boolean
-  border?: boolean
-  alignCenter?: boolean
-  overlay?: boolean
-  overlayBlur?: boolean
-  showConfirmButton?: boolean
-  showCancelButton?: boolean
-  confirmButtonText?: string | (() => string)
-  cancelButtonText?: string | (() => string)
-  confirmButtonDisabled?: boolean
-  confirmButtonLoading?: boolean
-  beforeClose?: (
-    action: 'confirm' | 'cancel' | 'close',
-    done: () => void,
-  ) => void
-  header?: boolean
-  footer?: boolean
-  closeOnClickOverlay?: boolean
-  closeOnPressEscape?: boolean
-  destroyOnClose?: boolean
-  openAutoFocus?: boolean
-  class?: HTMLAttributes['class']
-  headerClass?: HTMLAttributes['class']
-  contentClass?: HTMLAttributes['class']
-  footerClass?: HTMLAttributes['class']
-}
-export interface ModalEmits {
-  'update:modelValue': [value: boolean]
-  'open': []
-  'opened': []
-  'close': []
-  'closed': []
-  'confirm': []
-  'cancel': []
-}
-
-type BaseOptions = Omit<ModalProps, 'modelValue'> & {
-  content?: Component | VNode | string
-  onOpen?: () => void
-  onOpened?: () => void
-  onClose?: () => void
-  onClosed?: () => void
-  onConfirm?: () => void
-  onCancel?: () => void
-}
-
-type alertOptions = Pick<BaseOptions, 'title' | 'description' | 'icon' | 'alignCenter' | 'overlay' | 'overlayBlur' | 'confirmButtonText' | 'confirmButtonDisabled' | 'confirmButtonLoading' | 'closeOnClickOverlay' | 'closeOnPressEscape' | 'class' | 'headerClass' | 'contentClass' | 'footerClass' | 'content' | 'onConfirm'>
-
-type confirmOptions = Pick<BaseOptions, 'title' | 'description' | 'alignCenter' | 'overlay' | 'overlayBlur' | 'confirmButtonText' | 'cancelButtonText' | 'confirmButtonDisabled' | 'confirmButtonLoading' | 'beforeClose' | 'closeOnClickOverlay' | 'closeOnPressEscape' | 'class' | 'headerClass' | 'contentClass' | 'footerClass' | 'content' | 'onConfirm' | 'onCancel'>
-
-export function useModal() {
-  function create(initialOptions: BaseOptions) {
-    const container = document.createElement('div')
-    const visible = ref(false)
-    const options = shallowRef<BaseOptions>({ ...initialOptions })
-    const instance = getCurrentInstance()
-    let vnode: VNode | null = null
-
-    const updateVNode = () => {
-      vnode = createVNode(Modal, Object.assign({
-        'id': instance && instance.uid ? `FaModal-${instance.uid}` : undefined,
-        'modelValue': visible.value,
-        'onUpdate:modelValue': (val: boolean) => {
-          visible.value = val
-        },
-        ...options.value,
-      }), {
-        default: () => {
-          if (typeof options.value.content === 'string') {
-            return options.value.content
-          }
-          else if (isVNode(options.value.content)) {
-            return options.value.content
-          }
-          else if (options.value.content) {
-            return h(options.value.content)
-          }
-          return null
-        },
-      })
-      // 继承主应用的上下文
-      if (instance && instance.appContext) {
-        vnode.appContext = instance.appContext
-      }
-      render(vnode, container)
-    }
-
-    // 监听 visible 和 options 变化，自动重新渲染
-    watchEffect(() => {
-      updateVNode()
-    })
-
-    // 挂载到当前实例
-    instance?.proxy?.$el?.appendChild(container)
-
-    // 监听组件卸载，自动清理
-    if (instance) {
-      onUnmounted(() => {
-        if (vnode) {
-          render(null, container)
-          vnode = null
-        }
-        if (container.parentNode) {
-          container.parentNode.removeChild(container)
-        }
-      })
-    }
-
-    const open = () => {
-      visible.value = true
-    }
-    const close = () => {
-      visible.value = false
-    }
-    const update = (newOptions: BaseOptions) => {
-      options.value = { ...options.value, ...newOptions }
-    }
-    return {
-      open,
-      close,
-      update,
-    }
-  }
-  function info(options: alertOptions) {
-    const defaultOptions: BaseOptions = {
-      icon: 'info',
-      closable: false,
-      border: false,
-      alignCenter: true,
-      closeOnClickOverlay: false,
-      destroyOnClose: true,
-      openAutoFocus: true,
-      class: 'min-h-auto max-w-[calc(100%-2rem)]',
-      contentClass: 'py-0 min-h-auto text-center sm:text-start',
-      footerClass: 'p-4',
-    }
-    const { open } = create(Object.assign(defaultOptions, options))
-    open()
-  }
-  function success(options: alertOptions) {
-    const defaultOptions: BaseOptions = {
-      icon: 'success',
-      closable: false,
-      border: false,
-      alignCenter: true,
-      closeOnClickOverlay: false,
-      destroyOnClose: true,
-      openAutoFocus: true,
-      class: 'min-h-auto max-w-[calc(100%-2rem)]',
-      contentClass: 'py-0 min-h-auto text-center sm:text-start',
-      footerClass: 'p-4',
-    }
-    const { open } = create(Object.assign(defaultOptions, options))
-    open()
-  }
-  function warning(options: alertOptions) {
-    const defaultOptions: BaseOptions = {
-      icon: 'warning',
-      closable: false,
-      border: false,
-      alignCenter: true,
-      closeOnClickOverlay: false,
-      destroyOnClose: true,
-      openAutoFocus: true,
-      class: 'min-h-auto max-w-[calc(100%-2rem)]',
-      contentClass: 'py-0 min-h-auto text-center sm:text-start',
-      footerClass: 'p-4',
-    }
-    const { open } = create(Object.assign(defaultOptions, options))
-    open()
-  }
-  function error(options: alertOptions) {
-    const defaultOptions: BaseOptions = {
-      icon: 'error',
-      closable: false,
-      border: false,
-      alignCenter: true,
-      closeOnClickOverlay: false,
-      destroyOnClose: true,
-      openAutoFocus: true,
-      class: 'min-h-auto max-w-[calc(100%-2rem)]',
-      contentClass: 'py-0 min-h-auto text-center sm:text-start',
-      footerClass: 'p-4',
-    }
-    const { open } = create(Object.assign(defaultOptions, options))
-    open()
-  }
-  function confirm(options: confirmOptions) {
-    const defaultOptions: BaseOptions = {
-      closable: false,
-      border: false,
-      alignCenter: true,
-      showCancelButton: true,
-      closeOnClickOverlay: false,
-      destroyOnClose: true,
-      openAutoFocus: true,
-      class: 'min-h-auto max-w-[calc(100%-2rem)]',
-      contentClass: 'py-0 min-h-auto text-center sm:text-start',
-      footerClass: 'p-4',
-    }
-    const { open, update } = create(Object.assign(defaultOptions, options))
-    open()
-    return {
-      update,
-    }
-  }
-  return {
-    create,
-    info,
-    success,
-    warning,
-    error,
-    confirm,
-  }
-}
+export { default as Modal } from './index.vue'
+export { useModal } from './useModal'
+export type { ModalEmits, ModalProps } from './useModal'
diff --git a/packages/components/src/basic/modal/useModal.ts b/packages/components/src/basic/modal/useModal.ts
new file mode 100644
index 00000000..1668bfed
--- /dev/null
+++ b/packages/components/src/basic/modal/useModal.ts
@@ -0,0 +1,231 @@
+import type { Component, HTMLAttributes, VNode } from 'vue'
+import { createVNode, getCurrentInstance, h, isVNode, onUnmounted, ref, render, shallowRef, watchEffect } from 'vue'
+import Modal from './index.vue'
+
+export interface ModalProps {
+  id?: string
+  modelValue?: boolean
+  zIndex?: number
+  title?: string | (() => string)
+  description?: string | (() => string)
+  icon?: 'info' | 'success' | 'warning' | 'error'
+  loading?: boolean
+  closable?: boolean
+  maximize?: boolean
+  maximizable?: boolean
+  draggable?: boolean
+  center?: boolean
+  border?: boolean
+  alignCenter?: boolean
+  overlay?: boolean
+  overlayBlur?: boolean
+  showConfirmButton?: boolean
+  showCancelButton?: boolean
+  confirmButtonText?: string | (() => string)
+  cancelButtonText?: string | (() => string)
+  confirmButtonDisabled?: boolean
+  confirmButtonLoading?: boolean
+  beforeClose?: (
+    action: 'confirm' | 'cancel' | 'close',
+    done: () => void,
+  ) => void
+  header?: boolean
+  footer?: boolean
+  closeOnClickOverlay?: boolean
+  closeOnPressEscape?: boolean
+  destroyOnClose?: boolean
+  openAutoFocus?: boolean
+  class?: HTMLAttributes['class']
+  headerClass?: HTMLAttributes['class']
+  contentClass?: HTMLAttributes['class']
+  footerClass?: HTMLAttributes['class']
+}
+export interface ModalEmits {
+  'update:modelValue': [value: boolean]
+  'open': []
+  'opened': []
+  'close': []
+  'closed': []
+  'confirm': []
+  'cancel': []
+}
+
+type BaseOptions = Omit<ModalProps, 'modelValue'> & {
+  content?: Component | VNode | string
+  onOpen?: () => void
+  onOpened?: () => void
+  onClose?: () => void
+  onClosed?: () => void
+  onConfirm?: () => void
+  onCancel?: () => void
+}
+
+type alertOptions = Pick<BaseOptions, 'title' | 'description' | 'icon' | 'alignCenter' | 'overlay' | 'overlayBlur' | 'confirmButtonText' | 'confirmButtonDisabled' | 'confirmButtonLoading' | 'closeOnClickOverlay' | 'closeOnPressEscape' | 'class' | 'headerClass' | 'contentClass' | 'footerClass' | 'content' | 'onConfirm'>
+
+type confirmOptions = Pick<BaseOptions, 'title' | 'description' | 'alignCenter' | 'overlay' | 'overlayBlur' | 'confirmButtonText' | 'cancelButtonText' | 'confirmButtonDisabled' | 'confirmButtonLoading' | 'beforeClose' | 'closeOnClickOverlay' | 'closeOnPressEscape' | 'class' | 'headerClass' | 'contentClass' | 'footerClass' | 'content' | 'onConfirm' | 'onCancel'>
+
+export function useModal() {
+  function create(initialOptions: BaseOptions) {
+    const container = document.createElement('div')
+    const visible = ref(false)
+    const options = shallowRef<BaseOptions>({ ...initialOptions })
+    const instance = getCurrentInstance()
+    let vnode: VNode | null = null
+
+    const updateVNode = () => {
+      vnode = createVNode(Modal, Object.assign({
+        'id': instance && instance.uid ? `FaModal-${instance.uid}` : undefined,
+        'modelValue': visible.value,
+        'onUpdate:modelValue': (val: boolean) => {
+          visible.value = val
+        },
+        ...options.value,
+      }), {
+        default: () => {
+          if (typeof options.value.content === 'string') {
+            return options.value.content
+          }
+          else if (isVNode(options.value.content)) {
+            return options.value.content
+          }
+          else if (options.value.content) {
+            return h(options.value.content)
+          }
+          return null
+        },
+      })
+      // 继承主应用的上下文
+      if (instance && instance.appContext) {
+        vnode.appContext = instance.appContext
+      }
+      render(vnode, container)
+    }
+
+    // 监听 visible 和 options 变化，自动重新渲染
+    watchEffect(() => {
+      updateVNode()
+    })
+
+    // 挂载到当前实例
+    instance?.proxy?.$el?.appendChild(container)
+
+    // 监听组件卸载，自动清理
+    if (instance) {
+      onUnmounted(() => {
+        if (vnode) {
+          render(null, container)
+          vnode = null
+        }
+        if (container.parentNode) {
+          container.parentNode.removeChild(container)
+        }
+      })
+    }
+
+    const open = () => {
+      visible.value = true
+    }
+    const close = () => {
+      visible.value = false
+    }
+    const update = (newOptions: BaseOptions) => {
+      options.value = { ...options.value, ...newOptions }
+    }
+    return {
+      open,
+      close,
+      update,
+    }
+  }
+  function info(options: alertOptions) {
+    const defaultOptions: BaseOptions = {
+      icon: 'info',
+      closable: false,
+      border: false,
+      alignCenter: true,
+      closeOnClickOverlay: false,
+      destroyOnClose: true,
+      openAutoFocus: true,
+      class: 'min-h-auto max-w-[calc(100%-2rem)]',
+      contentClass: 'py-0 min-h-auto text-center sm:text-start',
+      footerClass: 'p-4',
+    }
+    const { open } = create(Object.assign(defaultOptions, options))
+    open()
+  }
+  function success(options: alertOptions) {
+    const defaultOptions: BaseOptions = {
+      icon: 'success',
+      closable: false,
+      border: false,
+      alignCenter: true,
+      closeOnClickOverlay: false,
+      destroyOnClose: true,
+      openAutoFocus: true,
+      class: 'min-h-auto max-w-[calc(100%-2rem)]',
+      contentClass: 'py-0 min-h-auto text-center sm:text-start',
+      footerClass: 'p-4',
+    }
+    const { open } = create(Object.assign(defaultOptions, options))
+    open()
+  }
+  function warning(options: alertOptions) {
+    const defaultOptions: BaseOptions = {
+      icon: 'warning',
+      closable: false,
+      border: false,
+      alignCenter: true,
+      closeOnClickOverlay: false,
+      destroyOnClose: true,
+      openAutoFocus: true,
+      class: 'min-h-auto max-w-[calc(100%-2rem)]',
+      contentClass: 'py-0 min-h-auto text-center sm:text-start',
+      footerClass: 'p-4',
+    }
+    const { open } = create(Object.assign(defaultOptions, options))
+    open()
+  }
+  function error(options: alertOptions) {
+    const defaultOptions: BaseOptions = {
+      icon: 'error',
+      closable: false,
+      border: false,
+      alignCenter: true,
+      closeOnClickOverlay: false,
+      destroyOnClose: true,
+      openAutoFocus: true,
+      class: 'min-h-auto max-w-[calc(100%-2rem)]',
+      contentClass: 'py-0 min-h-auto text-center sm:text-start',
+      footerClass: 'p-4',
+    }
+    const { open } = create(Object.assign(defaultOptions, options))
+    open()
+  }
+  function confirm(options: confirmOptions) {
+    const defaultOptions: BaseOptions = {
+      closable: false,
+      border: false,
+      alignCenter: true,
+      showCancelButton: true,
+      closeOnClickOverlay: false,
+      destroyOnClose: true,
+      openAutoFocus: true,
+      class: 'min-h-auto max-w-[calc(100%-2rem)]',
+      contentClass: 'py-0 min-h-auto text-center sm:text-start',
+      footerClass: 'p-4',
+    }
+    const { open, update } = create(Object.assign(defaultOptions, options))
+    open()
+    return {
+      update,
+    }
+  }
+  return {
+    create,
+    info,
+    success,
+    warning,
+    error,
+    confirm,
+  }
+}
diff --git a/packages/components/src/basic/number-field/index.ts b/packages/components/src/basic/number-field/index.ts
new file mode 100644
index 00000000..bc9bd822
--- /dev/null
+++ b/packages/components/src/basic/number-field/index.ts
@@ -0,0 +1 @@
+export { default as NumberField } from './index.vue'
diff --git a/packages/components/src/basic/page-header/index.ts b/packages/components/src/basic/page-header/index.ts
new file mode 100644
index 00000000..834a0048
--- /dev/null
+++ b/packages/components/src/basic/page-header/index.ts
@@ -0,0 +1 @@
+export { default as PageHeader } from './index.vue'
diff --git a/packages/components/src/basic/page-main/index.ts b/packages/components/src/basic/page-main/index.ts
new file mode 100644
index 00000000..bebec675
--- /dev/null
+++ b/packages/components/src/basic/page-main/index.ts
@@ -0,0 +1 @@
+export { default as PageMain } from './index.vue'
diff --git a/packages/components/src/basic/pagination/index.ts b/packages/components/src/basic/pagination/index.ts
new file mode 100644
index 00000000..c3866b8c
--- /dev/null
+++ b/packages/components/src/basic/pagination/index.ts
@@ -0,0 +1 @@
+export { default as Pagination } from './index.vue'
diff --git a/packages/components/src/basic/password-strength/index.ts b/packages/components/src/basic/password-strength/index.ts
new file mode 100644
index 00000000..193bcbef
--- /dev/null
+++ b/packages/components/src/basic/password-strength/index.ts
@@ -0,0 +1 @@
+export { default as PasswordStrength } from './index.vue'
diff --git a/packages/components/src/basic/popover/index.ts b/packages/components/src/basic/popover/index.ts
new file mode 100644
index 00000000..33d6da1a
--- /dev/null
+++ b/packages/components/src/basic/popover/index.ts
@@ -0,0 +1 @@
+export { default as Popover } from './index.vue'
diff --git a/packages/components/src/basic/progress/index.ts b/packages/components/src/basic/progress/index.ts
new file mode 100644
index 00000000..102eb371
--- /dev/null
+++ b/packages/components/src/basic/progress/index.ts
@@ -0,0 +1 @@
+export { default as Progress } from './index.vue'
diff --git a/packages/components/src/basic/radio-group/index.ts b/packages/components/src/basic/radio-group/index.ts
new file mode 100644
index 00000000..5dbb1487
--- /dev/null
+++ b/packages/components/src/basic/radio-group/index.ts
@@ -0,0 +1 @@
+export { default as RadioGroup } from './index.vue'
diff --git a/packages/components/src/basic/scroll-area/index.ts b/packages/components/src/basic/scroll-area/index.ts
new file mode 100644
index 00000000..f9c8dc45
--- /dev/null
+++ b/packages/components/src/basic/scroll-area/index.ts
@@ -0,0 +1 @@
+export { default as ScrollArea } from './index.vue'
diff --git a/packages/components/src/basic/search-bar/index.ts b/packages/components/src/basic/search-bar/index.ts
new file mode 100644
index 00000000..49f2de4c
--- /dev/null
+++ b/packages/components/src/basic/search-bar/index.ts
@@ -0,0 +1 @@
+export { default as SearchBar } from './index.vue'
diff --git a/packages/components/src/basic/select/index.ts b/packages/components/src/basic/select/index.ts
new file mode 100644
index 00000000..f59eb2ae
--- /dev/null
+++ b/packages/components/src/basic/select/index.ts
@@ -0,0 +1 @@
+export { default as Select } from './index.vue'
diff --git a/packages/components/src/basic/slider/index.ts b/packages/components/src/basic/slider/index.ts
new file mode 100644
index 00000000..d2298131
--- /dev/null
+++ b/packages/components/src/basic/slider/index.ts
@@ -0,0 +1 @@
+export { default as Slider } from './index.vue'
diff --git a/packages/components/src/basic/switch/index.ts b/packages/components/src/basic/switch/index.ts
new file mode 100644
index 00000000..ec60d8d2
--- /dev/null
+++ b/packages/components/src/basic/switch/index.ts
@@ -0,0 +1 @@
+export { default as Switch } from './index.vue'
diff --git a/packages/components/src/basic/table/index.ts b/packages/components/src/basic/table/index.ts
new file mode 100644
index 00000000..00e0ba2a
--- /dev/null
+++ b/packages/components/src/basic/table/index.ts
@@ -0,0 +1,2 @@
+export { default as Table } from './index.vue'
+export type { TableAlign, TableCellSlotProps, TableColumn, TableColumnFixed, TableEmptySlotProps, TableExpandedState, TableFooterSlotProps, TableHeaderSlotProps, TableProps, TableSelectionColumn, TableSelectionDisabled, TableSortingState, TableToolbarSlotProps } from './index.vue'
diff --git a/packages/components/src/basic/tabs/index.ts b/packages/components/src/basic/tabs/index.ts
new file mode 100644
index 00000000..3992771e
--- /dev/null
+++ b/packages/components/src/basic/tabs/index.ts
@@ -0,0 +1 @@
+export { default as Tabs } from './index.vue'
diff --git a/packages/components/src/basic/tag/index.ts b/packages/components/src/basic/tag/index.ts
new file mode 100644
index 00000000..3d6d63b0
--- /dev/null
+++ b/packages/components/src/basic/tag/index.ts
@@ -0,0 +1 @@
+export { default as Tag } from './index.vue'
diff --git a/packages/components/src/basic/textarea/index.ts b/packages/components/src/basic/textarea/index.ts
new file mode 100644
index 00000000..b527e905
--- /dev/null
+++ b/packages/components/src/basic/textarea/index.ts
@@ -0,0 +1 @@
+export { default as Textarea } from './index.vue'
diff --git a/packages/components/src/basic/toast/index.ts b/packages/components/src/basic/toast/index.ts
index e0a96ec2..bef89eb9 100644
--- a/packages/components/src/basic/toast/index.ts
+++ b/packages/components/src/basic/toast/index.ts
@@ -1,5 +1,2 @@
-import { toast } from 'vue-sonner'
-
-export function useToast() {
-  return toast
-}
+export { default as Toast } from './index.vue'
+export { useToast } from './useToast'
diff --git a/packages/components/src/basic/toast/useToast.ts b/packages/components/src/basic/toast/useToast.ts
new file mode 100644
index 00000000..e0a96ec2
--- /dev/null
+++ b/packages/components/src/basic/toast/useToast.ts
@@ -0,0 +1,5 @@
+import { toast } from 'vue-sonner'
+
+export function useToast() {
+  return toast
+}
diff --git a/packages/components/src/basic/tooltip/index.ts b/packages/components/src/basic/tooltip/index.ts
new file mode 100644
index 00000000..77bea0be
--- /dev/null
+++ b/packages/components/src/basic/tooltip/index.ts
@@ -0,0 +1 @@
+export { default as Tooltip } from './index.vue'
diff --git a/packages/components/src/basic/trend/index.ts b/packages/components/src/basic/trend/index.ts
new file mode 100644
index 00000000..d3f1505b
--- /dev/null
+++ b/packages/components/src/basic/trend/index.ts
@@ -0,0 +1 @@
+export { default as Trend } from './index.vue'
diff --git a/packages/components/src/examples.ts b/packages/components/src/examples.ts
index 468a93a1..396fafaf 100644
--- a/packages/components/src/examples.ts
+++ b/packages/components/src/examples.ts
@@ -1,10 +1,8 @@
 export { default as alert } from './basic/alert/_examples'
 export { default as avatar } from './basic/avatar/_examples'
 export { default as badge } from './basic/badge/_examples'
-export { default as buttonGroup } from './basic/button-group/_examples'
 export { default as button } from './basic/button/_examples'
 export { default as card } from './basic/card/_examples'
-export { default as checkboxGroup } from './basic/checkbox-group/_examples'
 export { default as checkbox } from './basic/checkbox/_examples'
 export { default as collapsible } from './basic/collapsible/_examples'
 export { default as contextMenu } from './basic/context-menu/_examples'
@@ -20,7 +18,6 @@ export { default as imagePreview } from './basic/image-preview/_examples'
 export { default as imageUpload } from './basic/image-upload/_examples'
 export { default as inputOtp } from './basic/input-otp/_examples'
 export { default as input } from './basic/input/_examples'
-export { default as kbdGroup } from './basic/kbd-group/_examples'
 export { default as kbd } from './basic/kbd/_examples'
 export { default as label } from './basic/label/_examples'
 export { default as modal } from './basic/modal/_examples'
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index 2290ab7c..42814fce 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -1,57 +1,54 @@
 // 基础版组件
-export { default as FaAlert } from './basic/alert/index.vue'
-export { default as FaAvatar } from './basic/avatar/index.vue'
-export { default as FaBadge } from './basic/badge/index.vue'
-export { default as FaButtonGroup } from './basic/button-group/index.vue'
-export { default as FaButton } from './basic/button/index.vue'
-export { default as FaCard } from './basic/card/index.vue'
-export { default as FaCheckboxGroup } from './basic/checkbox-group/index.vue'
-export { default as FaCheckbox } from './basic/checkbox/index.vue'
-export { default as FaCollapsible } from './basic/collapsible/index.vue'
-export { default as FaContextMenu } from './basic/context-menu/index.vue'
-export { default as FaDescriptions } from './basic/descriptions/index.vue'
-export type { DescriptionDirection, DescriptionItem, DescriptionItemBase, DescriptionSize, DescriptionSlotProps, DescriptionsProps, DescriptionValue } from './basic/descriptions/index.vue'
-export { default as FaDivider } from './basic/divider/index.vue'
-export type { DrawerEmits, DrawerProps } from './basic/drawer/index'
-export { useDrawer as useFaDrawer } from './basic/drawer/index'
-export { default as FaDrawer } from './basic/drawer/index.vue'
-export { default as FaDropdown } from './basic/dropdown/index.vue'
-export { default as FaFileUpload } from './basic/file-upload/index.vue'
-export type { FileItem, FileUploadRequestOptions } from './basic/file-upload/index.vue'
-export { default as FaFixedBar } from './basic/fixed-bar/index.vue'
-export { default as FaHoverCard } from './basic/hover-card/index.vue'
-export { default as FaIcon } from './basic/icon/index.vue'
-export { useImagePreview as useFaImagePreview } from './basic/image-preview/index'
-export { default as FaImagePreview } from './basic/image-preview/index.vue'
-export { default as FaImageUpload } from './basic/image-upload/index.vue'
-export type { UploadRequestOptions } from './basic/image-upload/index.vue'
-export { default as FaInputOTP } from './basic/input-otp/index.vue'
-export { default as FaInput } from './basic/input/index.vue'
-export { default as FaKbdGroup } from './basic/kbd-group/index.vue'
-export { default as FaKbd } from './basic/kbd/index.vue'
-export { default as FaLabel } from './basic/label/index.vue'
-export type { ModalEmits, ModalProps } from './basic/modal/index'
-export { useModal as useFaModal } from './basic/modal/index'
-export { default as FaModal } from './basic/modal/index.vue'
-export { default as FaNumberField } from './basic/number-field/index.vue'
-export { default as FaPageHeader } from './basic/page-header/index.vue'
-export { default as FaPageMain } from './basic/page-main/index.vue'
-export { default as FaPagination } from './basic/pagination/index.vue'
-export { default as FaPasswordStrength } from './basic/password-strength/index.vue'
-export { default as FaPopover } from './basic/popover/index.vue'
-export { default as FaProgress } from './basic/progress/index.vue'
-export { default as FaRadioGroup } from './basic/radio-group/index.vue'
-export { default as FaScrollArea } from './basic/scroll-area/index.vue'
-export { default as FaSearchBar } from './basic/search-bar/index.vue'
-export { default as FaSelect } from './basic/select/index.vue'
-export { default as FaSlider } from './basic/slider/index.vue'
-export { default as FaSwitch } from './basic/switch/index.vue'
-export { default as FaTable } from './basic/table/index.vue'
-export type { TableAlign, TableCellSlotProps, TableColumn, TableColumnFixed, TableEmptySlotProps, TableExpandedState, TableFooterSlotProps, TableHeaderSlotProps, TableProps, TableSelectionColumn, TableSelectionDisabled, TableSortingState, TableToolbarSlotProps } from './basic/table/index.vue'
-export { default as FaTabs } from './basic/tabs/index.vue'
-export { default as FaTag } from './basic/tag/index.vue'
-export { default as FaTextarea } from './basic/textarea/index.vue'
-export { useToast as useFaToast } from './basic/toast/index'
-export { default as FaToast } from './basic/toast/index.vue'
-export { default as FaTooltip } from './basic/tooltip/index.vue'
-export { default as FaTrend } from './basic/trend/index.vue'
+export { Alert as FaAlert } from './basic/alert'
+export { Avatar as FaAvatar } from './basic/avatar'
+export { Badge as FaBadge } from './basic/badge'
+export { Button as FaButton, ButtonGroup as FaButtonGroup } from './basic/button'
+export { Card as FaCard } from './basic/card'
+export { Checkbox as FaCheckbox, CheckboxGroup as FaCheckboxGroup } from './basic/checkbox'
+export { Collapsible as FaCollapsible } from './basic/collapsible'
+export { ContextMenu as FaContextMenu } from './basic/context-menu'
+export { Descriptions as FaDescriptions } from './basic/descriptions'
+export type { DescriptionDirection, DescriptionItem, DescriptionItemBase, DescriptionSize, DescriptionSlotProps, DescriptionsProps, DescriptionValue } from './basic/descriptions'
+export { Divider as FaDivider } from './basic/divider'
+export { Drawer as FaDrawer } from './basic/drawer'
+export type { DrawerEmits, DrawerProps } from './basic/drawer'
+export { useDrawer as useFaDrawer } from './basic/drawer'
+export { Dropdown as FaDropdown } from './basic/dropdown'
+export { FileUpload as FaFileUpload } from './basic/file-upload'
+export type { FileItem, FileUploadRequestOptions } from './basic/file-upload'
+export { FixedBar as FaFixedBar } from './basic/fixed-bar'
+export { HoverCard as FaHoverCard } from './basic/hover-card'
+export { Icon as FaIcon } from './basic/icon'
+export { ImagePreview as FaImagePreview } from './basic/image-preview'
+export { useImagePreview as useFaImagePreview } from './basic/image-preview'
+export { ImageUpload as FaImageUpload } from './basic/image-upload'
+export type { UploadRequestOptions } from './basic/image-upload'
+export { Input as FaInput } from './basic/input'
+export { InputOTP as FaInputOTP } from './basic/input-otp'
+export { Kbd as FaKbd, KbdGroup as FaKbdGroup } from './basic/kbd'
+export { Label as FaLabel } from './basic/label'
+export { Modal as FaModal } from './basic/modal'
+export type { ModalEmits, ModalProps } from './basic/modal'
+export { useModal as useFaModal } from './basic/modal'
+export { NumberField as FaNumberField } from './basic/number-field'
+export { PageHeader as FaPageHeader } from './basic/page-header'
+export { PageMain as FaPageMain } from './basic/page-main'
+export { Pagination as FaPagination } from './basic/pagination'
+export { PasswordStrength as FaPasswordStrength } from './basic/password-strength'
+export { Popover as FaPopover } from './basic/popover'
+export { Progress as FaProgress } from './basic/progress'
+export { RadioGroup as FaRadioGroup } from './basic/radio-group'
+export { ScrollArea as FaScrollArea } from './basic/scroll-area'
+export { SearchBar as FaSearchBar } from './basic/search-bar'
+export { Select as FaSelect } from './basic/select'
+export { Slider as FaSlider } from './basic/slider'
+export { Switch as FaSwitch } from './basic/switch'
+export { Table as FaTable } from './basic/table'
+export type { TableAlign, TableCellSlotProps, TableColumn, TableColumnFixed, TableEmptySlotProps, TableExpandedState, TableFooterSlotProps, TableHeaderSlotProps, TableProps, TableSelectionColumn, TableSelectionDisabled, TableSortingState, TableToolbarSlotProps } from './basic/table'
+export { Tabs as FaTabs } from './basic/tabs'
+export { Tag as FaTag } from './basic/tag'
+export { Textarea as FaTextarea } from './basic/textarea'
+export { Toast as FaToast } from './basic/toast'
+export { useToast as useFaToast } from './basic/toast'
+export { Tooltip as FaTooltip } from './basic/tooltip'
+export { Trend as FaTrend } from './basic/trend'