@teamix-evo/ui 0.1.1 → 0.2.0

package/src/components/rate/rate.stories.tsx

@@ -11,7 +11,7 @@ const meta: Meta<typeof Rate> = {
     docs: {
       description: {
         component:
-          '星级评分 — 评论 / 商品评分 / 偏好满意度。支持半星 + 再次点击清零 + 自定义图标 + 只读展示。等价 antd `Rate`。视觉走 OpenTrek tokens,所有样式来自 `@teamix-evo/design`,无 mock。',
+          '星级评分 — 评论 / 商品评分 / 偏好满意度。支持半星 + 再次点击清零 + 自定义图标 + 只读展示。等价 antd `Rate`。',
       },
     },
   },
@@ -22,7 +22,13 @@ const meta: Meta<typeof Rate> = {
     disabled: { control: 'boolean' },
     size: { control: 'inline-radio', options: ['sm', 'default', 'lg'] },
   },
-  args: { count: 5, allowHalf: false, allowClear: true, disabled: false, size: 'default' },
+  args: {
+    count: 5,
+    allowHalf: false,
+    allowClear: true,
+    disabled: false,
+    size: 'default',
+  },
 };
 
 export default meta;
@@ -64,7 +70,9 @@ export const ReadOnly: Story = {
   render: () => (
     <div className="flex items-center gap-2">
       <Rate disabled value={4.5} allowHalf size="sm" />
-      <span className="text-sm text-muted-foreground">4.5 / 5 (1,287 评价)</span>
+      <span className="text-sm text-muted-foreground">
+        4.5 / 5 (1,287 评价)
+      </span>
     </div>
   ),
 };

package/src/components/rate/rate.tsx

@@ -128,9 +128,9 @@ const Rate = React.forwardRef<HTMLDivElement, RateProps>(
               ) : null}
 
               {filledFull ? (
-                <span className="text-amber-400">{React.isValidElement(Icon) ? React.cloneElement(Icon as React.ReactElement<{ fill?: string }>, { fill: 'currentColor' }) : Icon}</span>
+                <span className="text-warning">{React.isValidElement(Icon) ? React.cloneElement(Icon as React.ReactElement<{ fill?: string }>, { fill: 'currentColor' }) : Icon}</span>
               ) : filledHalf ? (
-                <span className="relative inline-block text-amber-400">
+                <span className="relative inline-block text-warning">
                   <span className="absolute inset-0 overflow-hidden" style={{ clipPath: 'inset(0 50% 0 0)' }}>
                     {React.isValidElement(Icon)
                       ? React.cloneElement(Icon as React.ReactElement<{ fill?: string }>, { fill: 'currentColor' })

package/src/components/resizable/resizable.meta.md

@@ -1,13 +1,14 @@
 ---
 id: resizable
 name: Resizable
+displayName: 可拖拽分栏
 type: component
 category: layout
 since: 0.1.0
-package: "@teamix-evo/ui"
+package: '@teamix-evo/ui'
 ---
 
-# Resizable
+# Resizable 可拖拽分栏
 
 可拖拽分栏 — 基于 [`react-resizable-panels`](https://react-resizable-panels.vercel.app/),桌面应用 / 编辑器风格(VS Code、Figma、Slack)。
 对应 antd `Splitter`(v5.16+)的核心场景。
@@ -25,18 +26,29 @@ package: "@teamix-evo/ui"
 - 临时分栏 → `Sheet` / `Drawer`
 - 卡片网格 → CSS Grid
 
+## Props
+
 <!-- auto:props:begin -->
-_(组件无 `<Name>Props` interface — props 详见 [`resizable.tsx`](./resizable.tsx))_
+
+#### ResizableHandle
+
+| 名称         | 类型      | 默认值  | 必填 | 说明                                                        |
+| ------------ | --------- | ------- | ---- | ----------------------------------------------------------- |
+| `withHandle` | `boolean` | `false` | –    | 是否在 handle 上显示握把图标(`GripVertical`),提升可发现性。 |
+
 <!-- auto:props:end -->
 
+## 依赖
+
 <!-- auto:deps:begin -->
+
 ### 同库依赖
 
 > `teamix-evo ui add resizable` 时,以下 entry 会被自动连带安装(无需手动 add)。
 
-| Entry | 类型 | 描述 |
-| --- | --- | --- |
-| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
+| Entry | 类型 | 描述                                               |
+| ----- | ---- | -------------------------------------------------- |
+| `cn`  | util | Tailwind className 合并工具(clsx + tailwind-merge) |
 
 ### npm 依赖
 
@@ -45,9 +57,8 @@ _(组件无 `<Name>Props` interface — props 详见 [`resizable.tsx`](./resizab
 ```bash
 pnpm add react-resizable-panels@^2.0.0 lucide-react@^0.460.0
 ```
-<!-- auto:deps:end -->
 
-> 子组件:`ResizablePanelGroup`(`direction="horizontal" | "vertical"`)/ `ResizablePanel`(`defaultSize / minSize / maxSize` 百分比)/ `ResizableHandle`(分隔条,`withHandle` 显示握把)。
+<!-- auto:deps:end -->
 
 ## AI 生成纪律
 

package/src/components/resizable/resizable.stories.tsx

@@ -13,7 +13,7 @@ const meta: Meta<typeof ResizablePanelGroup> = {
     docs: {
       description: {
         component:
-          '可拖拽分栏 — 编辑器 / 桌面应用风格(VS Code、Figma)。基于 react-resizable-panels,支持横/纵向、嵌套、min/max 限制、握把可视化。OpenTrek tokens 适配。',
+          '可拖拽分栏 — 编辑器 / 桌面应用风格(VS Code、Figma)。基于 react-resizable-panels,支持横/纵向、嵌套、min/max 限制、握把可视化。',
       },
     },
   },

package/src/components/result/result.meta.md

@@ -4,10 +4,11 @@ name: Result
 type: component
 category: feedback
 since: 0.1.0
-package: "@teamix-evo/ui"
+package: '@teamix-evo/ui'
+displayName: 结果页
 ---
 
-# Result
+# Result 结果页
 
 结果页 — antd 独有补足。**整页级反馈**:操作成功、失败、404、403、500 等场景的居中状态页(图标 + 标题 + 副标题 + 操作区)。
 
@@ -24,24 +25,31 @@ package: "@teamix-evo/ui"
 - 短暂消息 → `Sonner`
 - 阻断式确认 → `AlertDialog`
 
+## Props
+
 <!-- auto:props:begin -->
-| 名称 | 类型 | 默认值 | 必填 | 说明 |
-| --- | --- | --- | --- | --- |
-| `status` | `ResultStatus` | `"info"` | – | 状态类型 — 决定默认图标和配色;`404 / 403 / 500` 显示大字号错误码代替图标。 |
-| `icon` | `React.ReactNode` | – | – | 自定义图标(覆盖默认)。 |
-| `title` | `React.ReactNode` | – | – | 标题。 |
-| `subTitle` | `React.ReactNode` | – | – | 副标题(描述)。 |
-| `extra` | `React.ReactNode` | – | – | 操作区(放 Button)。 |
+
+| 名称       | 类型              | 默认值   | 必填 | 说明                                                                       |
+| ---------- | ----------------- | -------- | ---- | -------------------------------------------------------------------------- |
+| `status`   | `ResultStatus`    | `"info"` | –    | 状态类型 — 决定默认图标和配色;`404 / 403 / 500` 显示大字号错误码代替图标。 |
+| `icon`     | `React.ReactNode` | –        | –    | 自定义图标(覆盖默认)。                                                     |
+| `title`    | `React.ReactNode` | –        | –    | 标题。                                                                     |
+| `subTitle` | `React.ReactNode` | –        | –    | 副标题(描述)。                                                             |
+| `extra`    | `React.ReactNode` | –        | –    | 操作区(放 Button)。                                                        |
+
 <!-- auto:props:end -->
 
+## 依赖
+
 <!-- auto:deps:begin -->
+
 ### 同库依赖
 
 > `teamix-evo ui add result` 时,以下 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 lucide-react@^0.460.0
 ```
+
 <!-- auto:deps:end -->
 
 ## AI 生成纪律

package/src/components/result/result.stories.tsx

@@ -10,7 +10,7 @@ const meta: Meta<typeof Result> = {
     docs: {
       description: {
         component:
-          '结果页 — 整页级反馈(成功 / 失败 / 404 / 403 / 500)。图标 + 标题 + 副标题 + 操作区,自动配色。OpenTrek tokens 适配,等价 antd Result。',
+          '结果页 — 整页级反馈（成功 / 失败 / 404 / 403 / 500）。图标 + 标题 + 副标题 + 操作区，自动配色。等价 antd Result。',
       },
     },
   },
@@ -62,10 +62,6 @@ export const NotFound: Story = {
 export const Forbidden: Story = {
   parameters: { controls: { disable: true } },
   render: () => (
-    <Result
-      status="403"
-      title="无权访问"
-      subTitle="联系管理员申请访问权限。"
-    />
+    <Result status="403" title="无权访问" subTitle="联系管理员申请访问权限。" />
   ),
 };

package/src/components/result/result.tsx

@@ -11,10 +11,10 @@ import { cn } from '@/utils/cn';
 export type ResultStatus = 'success' | 'error' | 'info' | 'warning' | '404' | '403' | '500';
 
 const iconMap = {
-  success: { Icon: CheckCircle2, color: 'text-emerald-500' },
+  success: { Icon: CheckCircle2, color: 'text-success' },
   error: { Icon: XCircle, color: 'text-destructive' },
-  info: { Icon: Info, color: 'text-blue-500' },
-  warning: { Icon: AlertCircle, color: 'text-amber-500' },
+  info: { Icon: Info, color: 'text-info' },
+  warning: { Icon: AlertCircle, color: 'text-warning' },
   '404': { Icon: AlertCircle, color: 'text-muted-foreground' },
   '403': { Icon: AlertCircle, color: 'text-muted-foreground' },
   '500': { Icon: AlertCircle, color: 'text-destructive' },

package/src/components/scroll-area/scroll-area.meta.md

@@ -1,13 +1,14 @@
 ---
 id: scroll-area
 name: ScrollArea
+displayName: 滚动区域
 type: component
 category: layout
 since: 0.1.0
-package: "@teamix-evo/ui"
+package: '@teamix-evo/ui'
 ---
 
-# ScrollArea
+# ScrollArea 滚动区域
 
 自定义滚动容器 — Radix ScrollArea。**shadcn-only**(antd 用原生滚动)。
 **核心价值**:跨浏览器一致的滚动条样式 + 触屏友好 + 自动隐藏 thumb。
@@ -28,7 +29,9 @@ package: "@teamix-evo/ui"
 > 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成。
 
 <!-- auto:props:begin -->
+
 _(no props)_
+
 <!-- auto:props:end -->
 
 ## 依赖
@@ -36,13 +39,14 @@ _(no props)_
 > 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成,数据源是 [`manifest.json`](../../../manifest.json)。**手工编辑 marker 之间的内容会在下次生成时被覆盖**。
 
 <!-- auto:deps:begin -->
+
 ### 同库依赖
 
 > `teamix-evo ui add scroll-area` 时,以下 entry 会被自动连带安装(无需手动 add)。
 
-| Entry | 类型 | 描述 |
-| --- | --- | --- |
-| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
+| Entry | 类型 | 描述                                               |
+| ----- | ---- | -------------------------------------------------- |
+| `cn`  | util | Tailwind className 合并工具(clsx + tailwind-merge) |
 
 ### npm 依赖
 
@@ -51,6 +55,7 @@ _(no props)_
 ```bash
 pnpm add @radix-ui/react-scroll-area@^1.2.0
 ```
+
 <!-- auto:deps:end -->
 
 > 子组件:`ScrollArea`(主容器,内置 Viewport + ScrollBar 组合)/ `ScrollBar`(独立 ScrollBar,需要自定义双向滚动时使用)。

package/src/components/scroll-area/scroll-area.stories.tsx

@@ -5,6 +5,14 @@ const meta: Meta<typeof ScrollArea> = {
   title: '布局与容器 · Layout/ScrollArea',
   component: ScrollArea,
   tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '自定义滚动容器 — 基于 Radix ScrollArea,跨浏览器一致的滚动条样式 + 触屏友好 + 自动隐藏 thumb。shadcn 专有,antd 用原生滚动。',
+      },
+    },
+  },
 };
 
 export default meta;

package/src/components/scroll-area/scroll-area.tsx

@@ -15,7 +15,7 @@ const ScrollArea = React.forwardRef<
     className={cn('relative overflow-hidden', className)}
     {...props}
   >
-    <ScrollAreaPrimitive.Viewport className="size-full rounded-[inherit]">
+    <ScrollAreaPrimitive.Viewport className="size-full rounded-inherit">
       {children}
     </ScrollAreaPrimitive.Viewport>
     <ScrollBar />
@@ -36,9 +36,9 @@ const ScrollBar = React.forwardRef<
     className={cn(
       'flex touch-none select-none transition-colors',
       orientation === 'vertical' &&
-        'h-full w-2.5 border-l border-l-transparent p-[1px]',
+        'h-full w-2.5 border-l border-l-transparent p-px',
       orientation === 'horizontal' &&
-        'h-2.5 flex-col border-t border-t-transparent p-[1px]',
+        'h-2.5 flex-col border-t border-t-transparent p-px',
       className,
     )}
     {...props}

package/src/components/segmented/segmented.meta.md

@@ -4,10 +4,11 @@ name: Segmented
 type: component
 category: form
 since: 0.1.0
-package: "@teamix-evo/ui"
+package: '@teamix-evo/ui'
+displayName: 分段控制器
 ---
 
-# Segmented
+# Segmented 分段控制器
 
 分段控制器 — antd 独有补足。**等价 antd `Segmented`**(v5.0+)。视觉类似 iOS/macOS 系统 Segmented Control,强调**互斥单选 + 紧凑紧贴**(日 / 周 / 月、列表 / 网格、明 / 暗主题切换)。
 
@@ -24,25 +25,28 @@ package: "@teamix-evo/ui"
 - 选项超过 6 个 → 改用 `Select` / `Tabs`
 
 <!-- auto:props:begin -->
-| 名称 | 类型 | 默认值 | 必填 | 说明 |
-| --- | --- | --- | --- | --- |
-| `options` | `SegmentedOption[]` | – | ✓ | 候选项数组。 |
-| `value` | `string` | – | – | 受控 value。 |
-| `defaultValue` | `string` | – | – | uncontrolled 初值。 |
-| `onChange` | `(value: string) => void` | – | – | value 变化回调。 |
-| `size` | `'sm' \| 'default' \| 'lg'` | `"default"` | – | 尺寸。 |
-| `block` | `boolean` | `false` | – | 是否撑满父容器宽度(antd `block` 并集)。 |
-| `disabled` | `boolean` | – | – | 整组禁用。 |
+
+| 名称           | 类型                        | 默认值      | 必填 | 说明                                    |
+| -------------- | --------------------------- | ----------- | ---- | --------------------------------------- |
+| `options`      | `SegmentedOption[]`         | –           | ✓    | 候选项数组。                            |
+| `value`        | `string`                    | –           | –    | 受控 value。                            |
+| `defaultValue` | `string`                    | –           | –    | uncontrolled 初值。                     |
+| `onChange`     | `(value: string) => void`   | –           | –    | value 变化回调。                        |
+| `size`         | `'sm' \| 'default' \| 'lg'` | `"default"` | –    | 尺寸。                                  |
+| `block`        | `boolean`                   | `false`     | –    | 是否撑满父容器宽度(antd `block` 并集)。 |
+| `disabled`     | `boolean`                   | –           | –    | 整组禁用。                              |
+
 <!-- auto:props:end -->
 
 <!-- auto:deps:begin -->
+
 ### 同库依赖
 
 > `teamix-evo ui add segmented` 时,以下 entry 会被自动连带安装(无需手动 add)。
 
-| Entry | 类型 | 描述 |
-| --- | --- | --- |
-| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
+| Entry | 类型 | 描述                                               |
+| ----- | ---- | -------------------------------------------------- |
+| `cn`  | util | Tailwind className 合并工具(clsx + tailwind-merge) |
 
 ### npm 依赖
 
@@ -51,6 +55,7 @@ package: "@teamix-evo/ui"
 ```bash
 pnpm add class-variance-authority@^0.7.0
 ```
+
 <!-- auto:deps:end -->
 
 ## AI 生成纪律

package/src/components/segmented/segmented.stories.tsx

@@ -11,7 +11,7 @@ const meta: Meta<typeof Segmented> = {
     docs: {
       description: {
         component:
-          '分段控制器 — iOS / macOS 风格的紧凑互斥单选(视图切换、时间区间、主题档)。等价 antd `Segmented`(v5.0+),与 ToggleGroup 互补(后者偏工具栏多选)。视觉走 OpenTrek tokens,所有样式来自 `@teamix-evo/design`,无 mock。',
+          '分段控制器 — iOS / macOS 风格的紧凑互斥单选（视图切换、时间区间、主题档）。等价 antd `Segmented`（v5.0+），与 ToggleGroup 互补（后者偏工具栏多选）。',
       },
     },
   },
@@ -49,9 +49,17 @@ export const WithIcons: Story = {
         value={v}
         onChange={setV}
         options={[
-          { value: 'grid', label: '网格', icon: <LayoutGrid className="size-4" /> },
+          {
+            value: 'grid',
+            label: '网格',
+            icon: <LayoutGrid className="size-4" />,
+          },
           { value: 'list', label: '列表', icon: <List className="size-4" /> },
-          { value: 'cal', label: '日历', icon: <Calendar className="size-4" /> },
+          {
+            value: 'cal',
+            label: '日历',
+            icon: <Calendar className="size-4" />,
+          },
         ]}
       />
     );
@@ -79,9 +87,30 @@ export const Sizes: Story = {
   parameters: { controls: { disable: true } },
   render: () => (
     <div className="flex flex-col items-start gap-3">
-      <Segmented size="sm" defaultValue="a" options={[{ value: 'a', label: 'A' }, { value: 'b', label: 'B' }]} />
-      <Segmented size="default" defaultValue="a" options={[{ value: 'a', label: 'A' }, { value: 'b', label: 'B' }]} />
-      <Segmented size="lg" defaultValue="a" options={[{ value: 'a', label: 'A' }, { value: 'b', label: 'B' }]} />
+      <Segmented
+        size="sm"
+        defaultValue="a"
+        options={[
+          { value: 'a', label: 'A' },
+          { value: 'b', label: 'B' },
+        ]}
+      />
+      <Segmented
+        size="default"
+        defaultValue="a"
+        options={[
+          { value: 'a', label: 'A' },
+          { value: 'b', label: 'B' },
+        ]}
+      />
+      <Segmented
+        size="lg"
+        defaultValue="a"
+        options={[
+          { value: 'a', label: 'A' },
+          { value: 'b', label: 'B' },
+        ]}
+      />
     </div>
   ),
 };

package/src/components/select/select.meta.md

@@ -4,10 +4,11 @@ name: Select
 type: component
 category: form
 since: 0.1.0
-package: "@teamix-evo/ui"
+package: '@teamix-evo/ui'
+displayName: 下拉选择
 ---
 
-# Select
+# Select 下拉选择
 
 下拉选择 — Radix Select 标准实现。**仅单选**(Radix Select 设计如此),多选 / 搜索请用 `Combobox`(基于 Command + Popover,在 v0.x)。
 对应 antd `Select` 的最常见单选场景;antd 的 `mode="multiple"` / `showSearch` / `tags` 等高级形态由 Combobox 接力。
@@ -27,12 +28,22 @@ package: "@teamix-evo/ui"
 
 ## Props
 
-> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成。下表是 `SelectTrigger` 的 props;`Select`(Root)透传 Radix `value / defaultValue / onValueChange / open / disabled / required / name`。
+> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成。`Select`(Root)透传 Radix `value / defaultValue / onValueChange / open / disabled / required / name`。
 
 <!-- auto:props:begin -->
-| 名称 | 类型 | 默认值 | 必填 | 说明 |
-| --- | --- | --- | --- | --- |
-| `position` | `React.ComponentPropsWithoutRef< typeof SelectPrimitive.Content >['position']` | `"popper"` | – | 浮层定位策略。`popper` 跟随 trigger 并自动避让边界;`item-aligned` 把当前选中项与 trigger 对齐(类似原生 `<select>`)。默认 `popper` 与 antd Select 行为一致。 |
+
+#### SelectTrigger
+
+| 名称   | 类型                        | 默认值      | 必填 | 说明         |
+| ------ | --------------------------- | ----------- | ---- | ------------ |
+| `size` | `'sm' \| 'default' \| 'lg'` | `"default"` | –    | 触发器尺寸。 |
+
+#### SelectContent
+
+| 名称       | 类型                                                                           | 默认值     | 必填 | 说明                                                                                                                                                        |
+| ---------- | ------------------------------------------------------------------------------ | ---------- | ---- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `position` | `React.ComponentPropsWithoutRef< typeof SelectPrimitive.Content >['position']` | `"popper"` | –    | 浮层定位策略。`popper` 跟随 trigger 并自动避让边界;`item-aligned` 把当前选中项与 trigger 对齐(类似原生 `<select>`)。默认 `popper` 与 antd Select 行为一致。 |
+
 <!-- auto:props:end -->
 
 ## 依赖
@@ -40,13 +51,14 @@ package: "@teamix-evo/ui"
 > 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成,数据源是 [`manifest.json`](../../../manifest.json)。**手工编辑 marker 之间的内容会在下次生成时被覆盖**。
 
 <!-- auto:deps:begin -->
+
 ### 同库依赖
 
 > `teamix-evo ui add select` 时,以下 entry 会被自动连带安装(无需手动 add)。
 
-| Entry | 类型 | 描述 |
-| --- | --- | --- |
-| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
+| Entry | 类型 | 描述                                               |
+| ----- | ---- | -------------------------------------------------- |
+| `cn`  | util | Tailwind className 合并工具(clsx + tailwind-merge) |
 
 ### npm 依赖
 
@@ -55,6 +67,7 @@ package: "@teamix-evo/ui"
 ```bash
 pnpm add @radix-ui/react-select@^2.1.0 lucide-react@^0.460.0
 ```
+
 <!-- auto:deps:end -->
 
 > 完整子组件:`Select / SelectGroup / SelectValue / SelectTrigger / SelectContent / SelectLabel / SelectItem / SelectSeparator / SelectScrollUpButton / SelectScrollDownButton`。

package/src/components/select/select.stories.tsx

@@ -18,7 +18,7 @@ const meta: Meta<typeof SelectTrigger> = {
     docs: {
       description: {
         component:
-          '下拉选择 — 从预置选项中选中一个值，由按钮触发弹出选项列表。Radix Select 实现 + antd Select 的并集能力：支持 `SelectGroup` / `SelectLabel` / `SelectSeparator` 组合出分组下拉，`size`（sm / default / lg）可调，默认带键盘导航与文本检索。视觉走 OpenTrek semantic tokens，所有样式来自 `@teamix-evo/design`，无 mock。',
+          '下拉选择 — 从预置选项中选中一个值，由按钮触发弹出选项列表。Radix Select 实现 + antd Select 的并集能力：支持 `SelectGroup` / `SelectLabel` / `SelectSeparator` 组合出分组下拉，`size`（sm / default / lg）可调，默认带键盘导航与文本检索。',
       },
     },
   },

package/src/components/select/select.tsx

@@ -101,7 +101,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        'relative z-50 max-h-96 min-w-menu overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         position === 'popper' &&
           'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
         className,
@@ -114,7 +114,7 @@ const SelectContent = React.forwardRef<
         className={cn(
           'p-1',
           position === 'popper' &&
-            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]',
+            'h-radix-select-trigger w-full min-w-radix-select-trigger',
         )}
       >
         {children}

package/src/components/separator/separator.meta.md

@@ -1,13 +1,14 @@
 ---
 id: separator
 name: Separator
+displayName: 分隔线
 type: component
 category: foundation
 since: 0.1.0
-package: "@teamix-evo/ui"
+package: '@teamix-evo/ui'
 ---
 
-# Separator
+# Separator 分隔线
 
 分隔线 — Radix Separator(语义层)+ antd Divider 的 `dashed` 与中间装饰文本(`children`)。
 
@@ -27,12 +28,14 @@ package: "@teamix-evo/ui"
 > 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成。
 
 <!-- auto:props:begin -->
-| 名称 | 类型 | 默认值 | 必填 | 说明 |
-| --- | --- | --- | --- | --- |
-| `orientation` | `'horizontal' \| 'vertical'` | `"horizontal"` | – | 分隔方向。 |
-| `decorative` | `boolean` | `true` | – | `true` 时不参与无障碍树(语义上仅装饰性)。 |
-| `dashed` | `boolean` | `false` | – | 虚线样式(antd Divider 并集)。 |
-| `children` | `React.ReactNode` | – | – | 中间装饰文本(antd Divider 并集)。提供时改用"两端线段 + 中间文本"布局, Radix Separator 不再使用,但通过 `role="separator"` 保留无障碍语义。 |
+
+| 名称          | 类型                         | 默认值         | 必填 | 说明                                                                                                                                      |
+| ------------- | ---------------------------- | -------------- | ---- | ----------------------------------------------------------------------------------------------------------------------------------------- |
+| `orientation` | `'horizontal' \| 'vertical'` | `"horizontal"` | –    | 分隔方向。                                                                                                                                |
+| `decorative`  | `boolean`                    | `true`         | –    | `true` 时不参与无障碍树(语义上仅装饰性)。                                                                                                 |
+| `dashed`      | `boolean`                    | `false`        | –    | 虚线样式(antd Divider 并集)。                                                                                                             |
+| `children`    | `React.ReactNode`            | –              | –    | 中间装饰文本(antd Divider 并集)。提供时改用"两端线段 + 中间文本"布局, Radix Separator 不再使用,但通过 `role="separator"` 保留无障碍语义。 |
+
 <!-- 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 separator` 时,以下 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-separator@^1.1.0
 ```
+
 <!-- auto:deps:end -->
 
 ## AI 生成纪律

package/src/components/separator/separator.stories.tsx

@@ -9,7 +9,7 @@ const meta: Meta<typeof Separator> = {
     docs: {
       description: {
         component:
-          '分隔线 — 在视觉上或语义上区隔内容。Radix Separator 实现 + antd Divider 的并集能力：支持水平 / 垂直两种 `orientation`，可传 `dashed` 虚线样式，中间可嵌入 `children` 为文字分隔（antd `Divider` 中部文字能力）。视觉走 OpenTrek semantic tokens，所有样式来自 `@teamix-evo/design`，无 mock。',
+          '分隔线 — 在视觉上或语义上区隔内容。Radix Separator 实现 + antd Divider 的并集能力：支持水平 / 垂直两种 `orientation`，可传 `dashed` 虚线样式，中间可嵌入 `children` 为文字分隔。',
       },
     },
   },