@teamix-evo/ui 0.1.1 → 0.2.0

package/src/components/sheet/sheet.meta.md

@@ -1,13 +1,14 @@
 ---
 id: sheet
 name: Sheet
+displayName: 侧边面板
 type: component
 category: feedback
 since: 0.1.0
-package: "@teamix-evo/ui"
+package: '@teamix-evo/ui'
 ---
 
-# Sheet
+# Sheet 侧边面板
 
 侧边滑出面板 — Radix Dialog 底座 + side 方向变体(left / right / top / bottom)+ antd Drawer `placement` 并集。
 **与 Dialog 的关键差异**:Sheet 从屏幕边缘滑入,模态阻断同样;`Drawer` 是底部可拖拽抽屉(iOS 风格,移动端体验)。
@@ -30,9 +31,11 @@ package: "@teamix-evo/ui"
 > 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成。下表是 `SheetContent` 的 props;`Sheet`(Root)透传 Radix `open / defaultOpen / onOpenChange / modal`。
 
 <!-- auto:props:begin -->
-| 名称 | 类型 | 默认值 | 必填 | 说明 |
-| --- | --- | --- | --- | --- |
-| `side` | `'top' \| 'right' \| 'bottom' \| 'left'` | `"right"` | – | 弹出方向(antd Drawer `placement` 并集)。 |
+
+| 名称   | 类型                                     | 默认值    | 必填 | 说明                                     |
+| ------ | ---------------------------------------- | --------- | ---- | ---------------------------------------- |
+| `side` | `'top' \| 'right' \| 'bottom' \| 'left'` | `"right"` | –    | 弹出方向(antd Drawer `placement` 并集)。 |
+
 <!-- auto:props:end -->
 
 ## 依赖
@@ -40,13 +43,14 @@ package: "@teamix-evo/ui"
 > 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成,数据源是 [`manifest.json`](../../../manifest.json)。**手工编辑 marker 之间的内容会在下次生成时被覆盖**。
 
 <!-- auto:deps:begin -->
+
 ### 同库依赖
 
 > `teamix-evo ui add sheet` 时,以下 entry 会被自动连带安装(无需手动 add)。
 
-| Entry | 类型 | 描述 |
-| --- | --- | --- |
-| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
+| Entry | 类型 | 描述                                               |
+| ----- | ---- | -------------------------------------------------- |
+| `cn`  | util | Tailwind className 合并工具(clsx + tailwind-merge) |
 
 ### npm 依赖
 
@@ -55,6 +59,7 @@ package: "@teamix-evo/ui"
 ```bash
 pnpm add @radix-ui/react-dialog@^1.1.0 class-variance-authority@^0.7.0 lucide-react@^0.460.0
 ```
+
 <!-- auto:deps:end -->
 
 > 子组件:`Sheet` / `SheetTrigger` / `SheetContent`(`side` 在此)/ `SheetHeader` / `SheetFooter` / `SheetTitle` / `SheetDescription` / `SheetClose` / `SheetOverlay` / `SheetPortal`。
@@ -71,8 +76,14 @@ pnpm add @radix-ui/react-dialog@^1.1.0 class-variance-authority@^0.7.0 lucide-re
 
 ```tsx
 import {
-  Sheet, SheetTrigger, SheetContent, SheetHeader,
-  SheetTitle, SheetDescription, SheetFooter, SheetClose,
+  Sheet,
+  SheetTrigger,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetDescription,
+  SheetFooter,
+  SheetClose,
 } from '@/components/ui/sheet';
 import { Button } from '@/components/ui/button';
 
@@ -93,5 +104,5 @@ import { Button } from '@/components/ui/button';
       <Button>保存</Button>
     </SheetFooter>
   </SheetContent>
-</Sheet>
+</Sheet>;
 ```

package/src/components/sheet/sheet.stories.tsx

@@ -19,7 +19,7 @@ const meta: Meta<typeof SheetContent> = {
     docs: {
       description: {
         component:
-          '侧边抽屉 — 从屏幕边缘滑入的补充内容面板，补充主区不中断主流程。语义上是 Dialog 的表弟但定位于边缘，对齐 antd `Drawer`；Radix Dialog 内核实现 + shadcn `Sheet` 的 `side` 变体 (top / right / bottom / left) 。视觉走 OpenTrek semantic tokens，所有样式来自 `@teamix-evo/design`，无 mock。',
+          '侧边抽屉 — 从屏幕边缘滑入的补充内容面板，补充主区不中断主流程。语义上是 Dialog 的表弟但定位于边缘，对齐 antd `Drawer`；Radix Dialog 内核实现 + shadcn `Sheet` 的 `side` 变体 (top / right / bottom / left)。',
       },
     },
   },

package/src/components/sidebar/sidebar.meta.md

@@ -1,13 +1,14 @@
 ---
 id: sidebar
 name: Sidebar
+displayName: 侧边栏
 type: component
 category: navigation
 since: 0.1.0
-package: "@teamix-evo/ui"
+package: '@teamix-evo/ui'
 ---
 
-# Sidebar
+# Sidebar 侧边栏
 
 侧边导航栏 — shadcn 风格复合组件,**对应 antd `Layout.Sider + Menu`**。
 **精简版**(MVP):涵盖 Provider + 折叠状态 + Header/Footer/Content + Menu + Trigger。
@@ -30,12 +31,31 @@ package: "@teamix-evo/ui"
 > 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成。下表是 `Sidebar` 主容器 props。
 
 <!-- auto:props:begin -->
-| 名称 | 类型 | 默认值 | 必填 | 说明 |
-| --- | --- | --- | --- | --- |
-| `side` | `'left' \| 'right'` | `"left"` | – | 侧边方向。 |
-| `collapsible` | `'icon' \| 'offcanvas' \| 'none'` | `"icon"` | – | 折叠模式 — `icon` 折叠后只剩图标列(64px);`offcanvas` 完全收起(0px)。 |
-| `width` | `string` | `"16rem"` | – | 展开宽度。 |
-| `collapsedWidth` | `string` | `"3rem"` | – | 折叠后宽度(`collapsible="icon"` 时生效)。 |
+
+#### Sidebar
+
+| 名称             | 类型                              | 默认值    | 必填 | 说明                                                                 |
+| ---------------- | --------------------------------- | --------- | ---- | -------------------------------------------------------------------- |
+| `side`           | `'left' \| 'right'`               | `"left"`  | –    | 侧边方向。                                                           |
+| `collapsible`    | `'icon' \| 'offcanvas' \| 'none'` | `"icon"`  | –    | 折叠模式 — `icon` 折叠后只剩图标列(64px);`offcanvas` 完全收起(0px)。 |
+| `width`          | `string`                          | `"16rem"` | –    | 展开宽度。                                                           |
+| `collapsedWidth` | `string`                          | `"3rem"`  | –    | 折叠后宽度(`collapsible="icon"` 时生效)。                            |
+
+#### SidebarProvider
+
+| 名称           | 类型                      | 默认值 | 必填 | 说明                |
+| -------------- | ------------------------- | ------ | ---- | ------------------- |
+| `open`         | `boolean`                 | –      | –    | 受控 open 状态。    |
+| `defaultOpen`  | `boolean`                 | `true` | –    | 非受控初始状态。    |
+| `onOpenChange` | `(open: boolean) => void` | –      | –    | open 状态变化回调。 |
+
+#### SidebarMenuButton
+
+| 名称       | 类型      | 默认值 | 必填 | 说明                                  |
+| ---------- | --------- | ------ | ---- | ------------------------------------- |
+| `isActive` | `boolean` | –      | –    | 当前激活态(高亮显示)。                |
+| `asChild`  | `boolean` | –      | –    | 用 Slot 渲染为子元素(配合路由 Link)。 |
+
 <!-- auto:props:end -->
 
 ## 依赖
@@ -43,15 +63,16 @@ package: "@teamix-evo/ui"
 > 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成,数据源是 [`manifest.json`](../../../manifest.json)。**手工编辑 marker 之间的内容会在下次生成时被覆盖**。
 
 <!-- auto:deps:begin -->
+
 ### 同库依赖
 
 > `teamix-evo ui add sidebar` 时,以下 entry 会被自动连带安装(无需手动 add)。
 
-| Entry | 类型 | 描述 |
-| --- | --- | --- |
-| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
-| `button` | component | 通用按钮 — shadcn 实现 + antd 功能扩展(loading / icon / shape / block / dashed variant) |
-| `separator` | component | 分隔线 — Radix Separator + antd Divider 的 dashed / 中间装饰文本 |
+| Entry       | 类型      | 描述                                                                                    |
+| ----------- | --------- | --------------------------------------------------------------------------------------- |
+| `cn`        | util      | Tailwind className 合并工具(clsx + tailwind-merge)                                      |
+| `button`    | component | 通用按钮 — shadcn 实现 + antd 功能扩展(loading / icon / shape / block / dashed variant) |
+| `separator` | component | 分隔线 — Radix Separator + antd Divider 的 dashed / 中间装饰文本                        |
 
 ### npm 依赖
 
@@ -60,9 +81,8 @@ package: "@teamix-evo/ui"
 ```bash
 pnpm add @radix-ui/react-slot@^1.1.0 class-variance-authority@^0.7.0 lucide-react@^0.460.0
 ```
-<!-- auto:deps:end -->
 
-> 完整子组件:`SidebarProvider`(Context 容器,必装)/ `Sidebar`(主侧边栏)/ `SidebarHeader` / `SidebarFooter` / `SidebarContent`(中间滚动区)/ `SidebarGroup` + `SidebarGroupLabel` / `SidebarMenu` + `SidebarMenuItem` + `SidebarMenuButton`(支持 `isActive` / `asChild`)/ `SidebarSeparator` / `SidebarTrigger`(切换按钮)/ `SidebarInset`(主内容区)+ `useSidebar()` hook。
+<!-- auto:deps:end -->
 
 ## AI 生成纪律
 
@@ -77,9 +97,18 @@ pnpm add @radix-ui/react-slot@^1.1.0 class-variance-authority@^0.7.0 lucide-reac
 
 ```tsx
 import {
-  SidebarProvider, Sidebar, SidebarHeader, SidebarContent,
-  SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuItem,
-  SidebarMenuButton, SidebarFooter, SidebarTrigger, SidebarInset,
+  SidebarProvider,
+  Sidebar,
+  SidebarHeader,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuItem,
+  SidebarMenuButton,
+  SidebarFooter,
+  SidebarTrigger,
+  SidebarInset,
 } from '@/components/ui/sidebar';
 import { Home, Settings, Inbox, Users } from 'lucide-react';
 

package/src/components/sidebar/sidebar.stories.tsx

@@ -20,7 +20,15 @@ const meta: Meta<typeof Sidebar> = {
   title: '导航 · Navigation/Sidebar',
   component: Sidebar,
   tags: ['autodocs'],
-  parameters: { layout: 'fullscreen' },
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          '侧边导航栏 — shadcn 风格复合组件,对应 antd Layout.Sider + Menu。支持 icon 折叠 / offcanvas 收起,提供 Provider + Menu + Trigger + Inset 全套子组件。',
+      },
+    },
+  },
 };
 
 export default meta;
@@ -46,10 +54,7 @@ function DemoLayout({ active }: { active: string }) {
             <SidebarMenu>
               {items.map((it) => (
                 <SidebarMenuItem key={it.title}>
-                  <SidebarMenuButton
-                    asChild
-                    isActive={active === it.url}
-                  >
+                  <SidebarMenuButton asChild isActive={active === it.url}>
                     <a href={it.url} onClick={(e) => e.preventDefault()}>
                       <it.icon />
                       <span>{it.title}</span>

package/src/components/skeleton/skeleton.meta.md

@@ -1,13 +1,14 @@
 ---
 id: skeleton
 name: Skeleton
+displayName: 骨架屏
 type: component
 category: foundation
 since: 0.1.0
-package: "@teamix-evo/ui"
+package: '@teamix-evo/ui'
 ---
 
-# Skeleton
+# Skeleton 骨架屏
 
 骨架屏占位 — shadcn 单元素 pulse + antd 子组件家族(`SkeletonAvatar / SkeletonImage / SkeletonButton / SkeletonInput / SkeletonParagraph`)。
 
@@ -29,9 +30,31 @@ package: "@teamix-evo/ui"
 > 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成。
 
 <!-- auto:props:begin -->
-| 名称 | 类型 | 默认值 | 必填 | 说明 |
-| --- | --- | --- | --- | --- |
-| `shape` | `'rect' \| 'circle' \| 'line'` | `"rect"` | – | 形状变体。`rect` 默认矩形;`circle` 圆形(用于 Avatar 占位);`line` 单行文本占位。 |
+
+#### Skeleton
+
+| 名称    | 类型                           | 默认值   | 必填 | 说明                                                                            |
+| ------- | ------------------------------ | -------- | ---- | ------------------------------------------------------------------------------- |
+| `shape` | `'rect' \| 'circle' \| 'line'` | `"rect"` | –    | 形状变体。`rect` 默认矩形;`circle` 圆形(用于 Avatar 占位);`line` 单行文本占位。 |
+
+#### SkeletonAvatar
+
+| 名称   | 类型                        | 默认值      | 必填 | 说明                              |
+| ------ | --------------------------- | ----------- | ---- | --------------------------------- |
+| `size` | `'sm' \| 'default' \| 'lg'` | `"default"` | –    | 尺寸:sm 32 / default 40 / lg 64。 |
+
+#### SkeletonButton
+
+| 名称   | 类型                        | 默认值      | 必填 | 说明   |
+| ------ | --------------------------- | ----------- | ---- | ------ |
+| `size` | `'sm' \| 'default' \| 'lg'` | `"default"` | –    | 尺寸。 |
+
+#### SkeletonParagraph
+
+| 名称   | 类型     | 默认值 | 必填 | 说明                                                |
+| ------ | -------- | ------ | ---- | --------------------------------------------------- |
+| `rows` | `number` | `3`    | –    | 段落行数。最后一行宽度自动收窄至 60%,模拟自然段尾。 |
+
 <!-- auto:props:end -->
 
 ## 依赖
@@ -39,13 +62,14 @@ package: "@teamix-evo/ui"
 > 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成,数据源是 [`manifest.json`](../../../manifest.json)。**手工编辑 marker 之间的内容会在下次生成时被覆盖**。
 
 <!-- auto:deps:begin -->
+
 ### 同库依赖
 
 > `teamix-evo ui add skeleton` 时,以下 entry 会被自动连带安装(无需手动 add)。
 
-| Entry | 类型 | 描述 |
-| --- | --- | --- |
-| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
+| Entry | 类型 | 描述                                               |
+| ----- | ---- | -------------------------------------------------- |
+| `cn`  | util | Tailwind className 合并工具(clsx + tailwind-merge) |
 
 ### npm 依赖
 
@@ -54,9 +78,8 @@ package: "@teamix-evo/ui"
 ```bash
 pnpm add class-variance-authority@^0.7.0
 ```
-<!-- auto:deps:end -->
 
-> 子组件 `SkeletonAvatar / SkeletonImage / SkeletonButton / SkeletonInput / SkeletonParagraph` 各自的 Props 可在 [`skeleton.tsx`](./skeleton.tsx) 查看。
+<!-- auto:deps:end -->
 
 ## AI 生成纪律
 

package/src/components/skeleton/skeleton.stories.tsx

@@ -16,7 +16,7 @@ const meta: Meta<typeof Skeleton> = {
     docs: {
       description: {
         component:
-          '骨架屏 — 在内容加载过程中呈现占位图形，减少加载期间的视觉跳动。shadcn `Skeleton` 原子 + antd `Skeleton` 的能力并集：除原子 `Skeleton`（支持 `shape: rect | circle | line`）外，同时提供预设组合 `SkeletonAvatar` / `SkeletonImage` / `SkeletonButton` / `SkeletonInput` / `SkeletonParagraph`。视觉走 OpenTrek semantic tokens，所有样式来自 `@teamix-evo/design`，无 mock。',
+          '骨架屏 — 在内容加载过程中呈现占位图形，减少加载期间的视觉跳动。shadcn `Skeleton` 原子 + antd 能力并集：支持 `shape: rect | circle | line`，同时提供预设组合 `SkeletonAvatar` / `SkeletonImage` / `SkeletonButton` / `SkeletonInput` / `SkeletonParagraph`。',
       },
     },
   },

package/src/components/slider/slider.meta.md

@@ -1,13 +1,14 @@
 ---
 id: slider
 name: Slider
+displayName: 滑块
 type: component
 category: form
 since: 0.1.0
 package: '@teamix-evo/ui'
 ---
 
-# Slider
+# Slider 滑块
 
 滑块 — Radix Slider + antd 的 `marks` 刻度标签。**单 / 双滑块由 `value`/`defaultValue` 数组长度决定**(传 `[lo, hi]` 自动变范围滑块)。
 
@@ -28,9 +29,11 @@ package: '@teamix-evo/ui'
 > 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成。
 
 <!-- auto:props:begin -->
-| 名称 | 类型 | 默认值 | 必填 | 说明 |
-| --- | --- | --- | --- | --- |
-| `marks` | `Record<number, React.ReactNode>` | – | – | 刻度标记(antd `marks` 并集)。键为 0~max 的数值,值为标签文本。 渲染时小标记点 + 文字标签出现在轨道下方。 |
+
+| 名称    | 类型                              | 默认值 | 必填 | 说明                                                                                                    |
+| ------- | --------------------------------- | ------ | ---- | ------------------------------------------------------------------------------------------------------- |
+| `marks` | `Record<number, React.ReactNode>` | –      | –    | 刻度标记(antd `marks` 并集)。键为 0~max 的数值,值为标签文本。 渲染时小标记点 + 文字标签出现在轨道下方。 |
+
 <!-- auto:props:end -->
 
 ## 依赖
@@ -38,13 +41,14 @@ package: '@teamix-evo/ui'
 > 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成,数据源是 [`manifest.json`](../../../manifest.json)。**手工编辑 marker 之间的内容会在下次生成时被覆盖**。
 
 <!-- auto:deps:begin -->
+
 ### 同库依赖
 
 > `teamix-evo ui add slider` 时,以下 entry 会被自动连带安装(无需手动 add)。
 
-| Entry | 类型 | 描述 |
-| --- | --- | --- |
-| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
+| Entry | 类型 | 描述                                               |
+| ----- | ---- | -------------------------------------------------- |
+| `cn`  | util | Tailwind className 合并工具(clsx + tailwind-merge) |
 
 ### npm 依赖
 
@@ -53,6 +57,7 @@ package: '@teamix-evo/ui'
 ```bash
 pnpm add @radix-ui/react-slider@^1.2.0
 ```
+
 <!-- auto:deps:end -->
 
 > 透传所有 Radix Slider.Root props(`min` / `max` / `step` / `disabled` / `onValueChange` / `name` / `inverted` 等)。

package/src/components/slider/slider.stories.tsx

@@ -9,7 +9,7 @@ const meta: Meta<typeof Slider> = {
     docs: {
       description: {
         component:
-          '滑块 — 在给定范围内选取一个数值或一段区间。Radix Slider 实现 + antd 的 `marks` 刻度能力：`value` / `defaultValue` 为数组，长度为 1 时为单滑块、为 2 时自动切换为区间滑块；可配 `marks` 渲染轨道下方的刻度点与标签。视觉走 OpenTrek semantic tokens，所有样式来自 `@teamix-evo/design`，无 mock。',
+          '滑块 — 在给定范围内选取一个数值或一段区间。Radix Slider 实现 + antd 的 `marks` 刻度能力：`value` / `defaultValue` 为数组，长度为 1 时为单滑块、为 2 时自动切换为区间滑块；可配 `marks` 渲染轨道下方的刻度点与标签。',
       },
     },
   },

package/src/components/sonner/sonner.meta.md

@@ -4,10 +4,11 @@ name: Sonner
 type: component
 category: feedback
 since: 0.1.0
-package: "@teamix-evo/ui"
+package: '@teamix-evo/ui'
+displayName: 轻提示
 ---
 
-# Sonner
+# Sonner 轻提示
 
 Toast 通知 — 基于 [`sonner`](https://sonner.emilkowal.ski/),已**同时覆盖** antd `message`(行内简短)+ `notification`(标题 + 描述 + 行动)的并集。
 
@@ -31,7 +32,9 @@ Toast 通知 — 基于 [`sonner`](https://sonner.emilkowal.ski/),已**同时覆
 > 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成。下表是 `<Toaster />` 的 props。`toast()` 函数式 API 见下方 Examples。
 
 <!-- auto:props:begin -->
+
 _(no props)_
+
 <!-- auto:props:end -->
 
 ## 依赖
@@ -39,6 +42,7 @@ _(no props)_
 > 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成,数据源是 [`manifest.json`](../../../manifest.json)。**手工编辑 marker 之间的内容会在下次生成时被覆盖**。
 
 <!-- auto:deps:begin -->
+
 ### 同库依赖
 
 _无 — 本组件不依赖其他 ui entry。_
@@ -50,6 +54,7 @@ _无 — 本组件不依赖其他 ui entry。_
 ```bash
 pnpm add sonner@^1.5.0
 ```
+
 <!-- auto:deps:end -->
 
 > 透传所有 sonner `<Toaster>` 原生属性(`position` / `richColors` / `expand` / `closeButton` 等)。
@@ -68,7 +73,7 @@ pnpm add sonner@^1.5.0
 import { Toaster, toast } from '@/components/ui/sonner';
 
 // 应用根
-<Toaster position="top-right" richColors />
+<Toaster position="top-right" richColors />;
 
 // 简单消息(等价 antd message)
 toast('已复制到剪贴板');

package/src/components/sonner/sonner.stories.tsx

@@ -6,6 +6,14 @@ const meta: Meta<typeof Toaster> = {
   title: '反馈与浮层 · Feedback/Sonner',
   component: Toaster,
   tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Toast 轻提示 — 基于 sonner 的函数式通知，同时覆盖 antd `message`（简短行内）和 `notification`（标题 + 描述 + 行动）的并集。应用根挂载 `<Toaster />`，任意位置 `toast()` 触发；支持 success / error / warning / promise 等语义方法。',
+      },
+    },
+  },
   argTypes: {
     position: {
       control: 'select',
@@ -64,14 +72,11 @@ export const Playground: Story = {
       <Button
         variant="outline"
         onClick={() =>
-          toast.promise(
-            new Promise((res) => setTimeout(res, 1500)),
-            {
-              loading: '保存中...',
-              success: '保存成功',
-              error: '保存失败',
-            },
-          )
+          toast.promise(new Promise((res) => setTimeout(res, 1500)), {
+            loading: '保存中...',
+            success: '保存成功',
+            error: '保存失败',
+          })
         }
       >
         Promise

package/src/components/space/space.meta.md

@@ -1,13 +1,14 @@
 ---
 id: space
 name: Space
+displayName: 间距
 type: component
 category: layout
 since: 0.1.0
-package: "@teamix-evo/ui"
+package: '@teamix-evo/ui'
 ---
 
-# Space
+# Space 间距
 
 间距容器 — antd 独有补足。**等价 antd `Space`**:把同语义并排子项统一间距、对齐与可选换行,可选 `split` 节点(常用 Separator)。与 `Flex` 区别:Space 偏向**小集合 inline 间距**(按钮组、tag 组、表单 label-value 对),Flex 偏向**完整布局容器**。
 
@@ -23,25 +24,32 @@ package: "@teamix-evo/ui"
 - 按钮粘连共享边线 → `ButtonGroup`
 - 大段排版分段 → `Typography Prose`
 
+## Props
+
 <!-- auto:props:begin -->
-| 名称 | 类型 | 默认值 | 必填 | 说明 |
-| --- | --- | --- | --- | --- |
-| `direction` | `'horizontal' \| 'vertical'` | `"horizontal"` | – | 排列方向(antd `direction` 并集)。 |
-| `size` | `'sm' \| 'default' \| 'lg'` | `"default"` | – | 间距档位(antd `size` 并集) — 走 design 间距刻度,不接受 number。 |
-| `wrap` | `boolean` | `false` | – | 是否自动换行(antd `wrap` 并集) — horizontal 模式生效。 |
-| `align` | `'start' \| 'center' \| 'end' \| 'baseline' \| 'stretch'` | `"center"` | – | 主轴对齐方式(antd `align` 并集)。 |
-| `justify` | `'start' \| 'center' \| 'end' \| 'between' \| 'around'` | – | – | 副轴对齐(antd `Space` 无,Space.Compact 也无 — 但中后台需求高,补)。 |
-| `split` | `React.ReactNode` | – | – | 分隔节点(antd `split` 并集) — 在每两个子项之间插入(常用 `<Separator>`)。 |
+
+| 名称        | 类型                                                      | 默认值         | 必填 | 说明                                                                     |
+| ----------- | --------------------------------------------------------- | -------------- | ---- | ------------------------------------------------------------------------ |
+| `direction` | `'horizontal' \| 'vertical'`                              | `"horizontal"` | –    | 排列方向(antd `direction` 并集)。                                        |
+| `size`      | `'sm' \| 'default' \| 'lg'`                               | `"default"`    | –    | 间距档位(antd `size` 并集) — 走 design 间距刻度,不接受 number。          |
+| `wrap`      | `boolean`                                                 | `false`        | –    | 是否自动换行(antd `wrap` 并集) — horizontal 模式生效。                   |
+| `align`     | `'start' \| 'center' \| 'end' \| 'baseline' \| 'stretch'` | `"center"`     | –    | 主轴对齐方式(antd `align` 并集)。                                        |
+| `justify`   | `'start' \| 'center' \| 'end' \| 'between' \| 'around'`   | –              | –    | 副轴对齐(antd `Space` 无,Space.Compact 也无 — 但中后台需求高,补)。       |
+| `split`     | `React.ReactNode`                                         | –              | –    | 分隔节点(antd `split` 并集) — 在每两个子项之间插入(常用 `<Separator>`)。 |
+
 <!-- auto:props:end -->
 
+## 依赖
+
 <!-- auto:deps:begin -->
+
 ### 同库依赖
 
 > `teamix-evo ui add space` 时,以下 entry 会被自动连带安装(无需手动 add)。
 
-| Entry | 类型 | 描述 |
-| --- | --- | --- |
-| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
+| Entry | 类型 | 描述                                               |
+| ----- | ---- | -------------------------------------------------- |
+| `cn`  | util | Tailwind className 合并工具(clsx + tailwind-merge) |
 
 ### npm 依赖
 
@@ -50,6 +58,7 @@ package: "@teamix-evo/ui"
 ```bash
 pnpm add class-variance-authority@^0.7.0
 ```
+
 <!-- auto:deps:end -->
 
 ## AI 生成纪律

package/src/components/space/space.stories.tsx

@@ -11,7 +11,7 @@ const meta: Meta<typeof Space> = {
     docs: {
       description: {
         component:
-          '间距容器 — 把同语义并排子项统一间距、对齐与可选换行(按钮组、tag 组、表单 label-value 对)。等价 antd `Space`,与 Flex 互补:Space 偏 inline 小集合,Flex 偏完整布局。视觉走 OpenTrek tokens,所有样式来自 `@teamix-evo/design`,无 mock。',
+          '间距容器 — 把同语义并排子项统一间距、对齐与可选换行(按钮组、tag 组、表单 label-value 对)。等价 antd `Space`,与 Flex 互补:Space 偏 inline 小集合,Flex 偏完整布局。',
       },
     },
   },
@@ -28,7 +28,12 @@ const meta: Meta<typeof Space> = {
       options: ['start', 'center', 'end', 'between', 'around'],
     },
   },
-  args: { direction: 'horizontal', size: 'default', wrap: false, align: 'center' },
+  args: {
+    direction: 'horizontal',
+    size: 'default',
+    wrap: false,
+    align: 'center',
+  },
 };
 
 export default meta;
@@ -58,10 +63,19 @@ export const Vertical: Story = {
 export const WithSplit: Story = {
   parameters: { controls: { disable: true } },
   render: () => (
-    <Space split={<Separator orientation="vertical" className="h-4" />} size="sm">
-      <a href="#" className="text-sm text-primary hover:underline">查看</a>
-      <a href="#" className="text-sm text-primary hover:underline">编辑</a>
-      <a href="#" className="text-sm text-destructive hover:underline">删除</a>
+    <Space
+      split={<Separator orientation="vertical" className="h-4" />}
+      size="sm"
+    >
+      <a href="#" className="text-sm text-primary hover:underline">
+        查看
+      </a>
+      <a href="#" className="text-sm text-primary hover:underline">
+        编辑
+      </a>
+      <a href="#" className="text-sm text-destructive hover:underline">
+        删除
+      </a>
     </Space>
   ),
 };