@teamix-evo/ui 0.1.1 → 0.2.0

package/src/components/mentions/mentions.meta.md

@@ -1,13 +1,14 @@
 ---
 id: mentions
 name: Mentions
+displayName: 提及
 type: component
 category: form
 since: 0.1.0
-package: "@teamix-evo/ui"
+package: '@teamix-evo/ui'
 ---
 
-# Mentions
+# Mentions 提及
 
 @提及 — antd 独有补足。在 Textarea 中输入 `@`(或自定义 `prefix`)即弹出候选下拉,选中后插入 `@name `。键盘 ↑↓ 切换、Enter / Tab 选中、Esc 关闭。**异步候选**用 `onSearch(query)` 由消费方刷新 `options`。
 
@@ -21,34 +22,42 @@ package: "@teamix-evo/ui"
 - 全字段候选(下拉选单)→ `Select` / `Combobox`
 - 仅是搜索输入 → `Input` + 业务侧自渲染建议列表
 
+## Props
+
 <!-- auto:props:begin -->
-| 名称 | 类型 | 默认值 | 必填 | 说明 |
-| --- | --- | --- | --- | --- |
-| `options` | `MentionsOption[]` | – | ✓ | 候选项(antd `options` 并集)。 |
-| `value` | `string` | – | – | 受控值。 |
-| `defaultValue` | `string` | – | – | uncontrolled 初值。 |
-| `onChange` | `(value: string) => void` | – | – | 文本变化回调。 |
-| `prefix` | `string` | `"@"` | – | 触发符(antd `prefix` 并集) — 通常是 `@` 或 `#`。 |
-| `split` | `string` | `" "` | – | 选中候选项后插入文本的尾随分隔(对齐 antd `split` 默认空格)。 |
-| `onSearch` | `(query: string, prefix: string) => void` | – | – | 用户在 prefix 后输入时的搜索回调,用于业务侧异步刷新 `options`。 |
-| `onSelect` | `(option: MentionsOption, prefix: string) => void` | – | – | 选中候选项时回调。 |
-| `rows` | `number` | `3` | – | 文本框尺寸传透传 Textarea(行数)。 |
-| `disabled` | `boolean` | – | – | 禁用。 |
+
+| 名称           | 类型                                               | 默认值 | 必填 | 说明                                                            |
+| -------------- | -------------------------------------------------- | ------ | ---- | --------------------------------------------------------------- |
+| `options`      | `MentionsOption[]`                                 | –      | ✓    | 候选项(antd `options` 并集)。                                   |
+| `value`        | `string`                                           | –      | –    | 受控值。                                                        |
+| `defaultValue` | `string`                                           | –      | –    | uncontrolled 初值。                                             |
+| `onChange`     | `(value: string) => void`                          | –      | –    | 文本变化回调。                                                  |
+| `prefix`       | `string`                                           | `"@"`  | –    | 触发符(antd `prefix` 并集) — 通常是 `@` 或 `#`。                |
+| `split`        | `string`                                           | `" "`  | –    | 选中候选项后插入文本的尾随分隔(对齐 antd `split` 默认空格)。    |
+| `onSearch`     | `(query: string, prefix: string) => void`          | –      | –    | 用户在 prefix 后输入时的搜索回调,用于业务侧异步刷新 `options`。 |
+| `onSelect`     | `(option: MentionsOption, prefix: string) => void` | –      | –    | 选中候选项时回调。                                              |
+| `rows`         | `number`                                           | `3`    | –    | 文本框尺寸传透传 Textarea(行数)。                               |
+| `disabled`     | `boolean`                                          | –      | –    | 禁用。                                                          |
+
 <!-- auto:props:end -->
 
+## 依赖
+
 <!-- auto:deps:begin -->
+
 ### 同库依赖
 
 > `teamix-evo ui add mentions` 时,以下 entry 会被自动连带安装(无需手动 add)。
 
-| Entry | 类型 | 描述 |
-| --- | --- | --- |
-| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
+| Entry      | 类型      | 描述                                                   |
+| ---------- | --------- | ------------------------------------------------------ |
+| `cn`       | util      | Tailwind className 合并工具(clsx + tailwind-merge)     |
 | `textarea` | component | 多行文本输入 — shadcn 基底 + antd autoSize / showCount |
 
 ### npm 依赖
 
 _无 — 本组件不依赖任何 npm 包。_
+
 <!-- auto:deps:end -->
 
 ## AI 生成纪律
@@ -73,7 +82,7 @@ const users = [
 ];
 
 // 静态候选
-<Mentions options={users} placeholder="输入 @ 提及同事..." />
+<Mentions options={users} placeholder="输入 @ 提及同事..." />;
 
 // 异步候选
 const [opts, setOpts] = React.useState(users);
@@ -83,7 +92,7 @@ const [opts, setOpts] = React.useState(users);
     const list = await fetchUsers(q);
     setOpts(list);
   }}
-/>
+/>;
 
 // 双触发符:@ + # — 当前组件支持单 prefix,如需多触发请实例化两个 Mentions
 ```

package/src/components/mentions/mentions.stories.tsx

@@ -10,7 +10,7 @@ const meta: Meta<typeof Mentions> = {
     docs: {
       description: {
         component:
-          '@提及输入 — Textarea + @ 触发候选下拉(评论 @ 同事、# 话题)。↑↓ 切换、Enter / Tab 选中、Esc 关闭。异步候选用 onSearch 由消费方刷新 options。视觉走 OpenTrek tokens,等价 antd `Mentions`,所有样式来自 `@teamix-evo/design`,无 mock。',
+          '@提及输入 — Textarea + @ 触发候选下拉（评论 @ 同事、# 话题）。↑↓ 切换、Enter / Tab 选中、Esc 关闭。异步候选用 onSearch 由消费方刷新 options。等价 antd `Mentions`。',
       },
     },
   },

package/src/components/mentions/mentions.tsx

@@ -68,10 +68,11 @@ function getTriggerContext(
   // Walk backwards from caret until we hit a whitespace, newline, or `prefix`.
   for (let i = caret - 1; i >= 0; i--) {
     const ch = value[i];
+    if (ch === undefined) return null;
     if (ch === prefix) {
       // The char immediately before prefix must be start-of-string / whitespace / newline,
       // otherwise we'd trigger on emails like a@b.
-      const prev = i === 0 ? '' : value[i - 1];
+      const prev = i === 0 ? '' : (value[i - 1] ?? '');
       if (prev === '' || /\s/.test(prev)) {
         return { start: i, query: value.slice(i + 1, caret) };
       }

package/src/components/menubar/menubar.meta.md

@@ -1,13 +1,14 @@
 ---
 id: menubar
 name: Menubar
+displayName: 菜单栏
 type: component
 category: navigation
 since: 0.1.0
-package: "@teamix-evo/ui"
+package: '@teamix-evo/ui'
 ---
 
-# Menubar
+# Menubar 菜单栏
 
 应用顶部菜单栏 — Radix Menubar(典型 macOS 风格,文件 / 编辑 / 视图 / 帮助)。
 **与 DropdownMenu 区别**:Menubar 是**横排多个一级菜单**,鼠标 hover 切换;DropdownMenu 是单个独立下拉。
@@ -28,7 +29,9 @@ package: "@teamix-evo/ui"
 > 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成。下表是 `Menubar`(Root) 的 props。
 
 <!-- auto:props:begin -->
+
 _(组件无 `<Name>Props` interface — props 详见 [`menubar.tsx`](./menubar.tsx))_
+
 <!-- auto:props:end -->
 
 ## 依赖
@@ -36,13 +39,14 @@ _(组件无 `<Name>Props` interface — props 详见 [`menubar.tsx`](./menubar.t
 > 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成,数据源是 [`manifest.json`](../../../manifest.json)。**手工编辑 marker 之间的内容会在下次生成时被覆盖**。
 
 <!-- auto:deps:begin -->
+
 ### 同库依赖
 
 > `teamix-evo ui add menubar` 时,以下 entry 会被自动连带安装(无需手动 add)。
 
-| Entry | 类型 | 描述 |
-| --- | --- | --- |
-| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
+| Entry | 类型 | 描述                                               |
+| ----- | ---- | -------------------------------------------------- |
+| `cn`  | util | Tailwind className 合并工具(clsx + tailwind-merge) |
 
 ### npm 依赖
 
@@ -51,6 +55,7 @@ _(组件无 `<Name>Props` interface — props 详见 [`menubar.tsx`](./menubar.t
 ```bash
 pnpm add @radix-ui/react-menubar@^1.1.0 lucide-react@^0.460.0
 ```
+
 <!-- auto:deps:end -->
 
 > 完整子组件:`Menubar` / `MenubarMenu` / `MenubarTrigger` / `MenubarContent` / `MenubarItem` / `MenubarCheckboxItem` / `MenubarRadioItem` / `MenubarLabel` / `MenubarSeparator` / `MenubarShortcut` / `MenubarSub` / `MenubarSubTrigger` / `MenubarSubContent` / `MenubarGroup` / `MenubarRadioGroup` / `MenubarPortal`。
@@ -66,17 +71,28 @@ pnpm add @radix-ui/react-menubar@^1.1.0 lucide-react@^0.460.0
 
 ```tsx
 import {
-  Menubar, MenubarMenu, MenubarTrigger, MenubarContent,
-  MenubarItem, MenubarSeparator, MenubarShortcut,
-  MenubarSub, MenubarSubTrigger, MenubarSubContent,
+  Menubar,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarContent,
+  MenubarItem,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarSub,
+  MenubarSubTrigger,
+  MenubarSubContent,
 } from '@/components/ui/menubar';
 
 <Menubar>
   <MenubarMenu>
     <MenubarTrigger>文件</MenubarTrigger>
     <MenubarContent>
-      <MenubarItem>新建文件 <MenubarShortcut>⌘N</MenubarShortcut></MenubarItem>
-      <MenubarItem>打开 <MenubarShortcut>⌘O</MenubarShortcut></MenubarItem>
+      <MenubarItem>
+        新建文件 <MenubarShortcut>⌘N</MenubarShortcut>
+      </MenubarItem>
+      <MenubarItem>
+        打开 <MenubarShortcut>⌘O</MenubarShortcut>
+      </MenubarItem>
       <MenubarSeparator />
       <MenubarSub>
         <MenubarSubTrigger>分享</MenubarSubTrigger>
@@ -86,15 +102,21 @@ import {
         </MenubarSubContent>
       </MenubarSub>
       <MenubarSeparator />
-      <MenubarItem>退出 <MenubarShortcut>⌘Q</MenubarShortcut></MenubarItem>
+      <MenubarItem>
+        退出 <MenubarShortcut>⌘Q</MenubarShortcut>
+      </MenubarItem>
     </MenubarContent>
   </MenubarMenu>
   <MenubarMenu>
     <MenubarTrigger>编辑</MenubarTrigger>
     <MenubarContent>
-      <MenubarItem>撤销 <MenubarShortcut>⌘Z</MenubarShortcut></MenubarItem>
-      <MenubarItem>重做 <MenubarShortcut>⇧⌘Z</MenubarShortcut></MenubarItem>
+      <MenubarItem>
+        撤销 <MenubarShortcut>⌘Z</MenubarShortcut>
+      </MenubarItem>
+      <MenubarItem>
+        重做 <MenubarShortcut>⇧⌘Z</MenubarShortcut>
+      </MenubarItem>
     </MenubarContent>
   </MenubarMenu>
-</Menubar>
+</Menubar>;
 ```

package/src/components/menubar/menubar.stories.tsx

@@ -16,6 +16,14 @@ const meta: Meta<typeof Menubar> = {
   title: '导航 · Navigation/Menubar',
   component: Menubar,
   tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '应用顶部菜单栏 — Radix Menubar(macOS 风格)。支持多级子菜单、快捷键、Checkbox/Radio 选项、hover 切换。',
+      },
+    },
+  },
 };
 
 export default meta;

package/src/components/menubar/menubar.tsx

@@ -72,7 +72,7 @@ const MenubarSubContent = React.forwardRef<
   <MenubarPrimitive.SubContent
     ref={ref}
     className={cn(
-      'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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',
+      'z-50 min-w-menu overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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',
       className,
     )}
     {...props}
@@ -95,7 +95,7 @@ const MenubarContent = React.forwardRef<
         alignOffset={alignOffset}
         sideOffset={sideOffset}
         className={cn(
-          'z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+          'z-50 min-w-menu-md overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
           className,
         )}
         {...props}

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

@@ -4,10 +4,11 @@ name: NativeSelect
 type: component
 category: form
 since: 0.1.0
-package: "@teamix-evo/ui"
+package: '@teamix-evo/ui'
+displayName: 原生下拉
 ---
 
-# NativeSelect
+# NativeSelect 原生下拉
 
 原生下拉选择 — shadcn 2025-10 新增。**原生 `<select>` 元素**的样式封装,零 JS 开销,移动端弹起系统 picker,直接参与 form `submit`。与 `Select`(Radix)互为补充,分别面向"原生友好"与"可定制项 UI"两种诉求。
 
@@ -23,20 +24,27 @@ package: "@teamix-evo/ui"
 - 需要搜索 / 虚拟列表 / 自定义选项渲染 → `Select`(Radix)/ `Combobox`
 - 多选 → `Select multiple`(原生 multi 体验差)→ 用 Radix 版
 
+## Props
+
 <!-- auto:props:begin -->
-| 名称 | 类型 | 默认值 | 必填 | 说明 |
-| --- | --- | --- | --- | --- |
-| `wrapperClassName` | `string` | – | – | 容器额外 className(给外层 wrapper,而非 `<select>` 本身)。 |
+
+| 名称               | 类型     | 默认值 | 必填 | 说明                                                      |
+| ------------------ | -------- | ------ | ---- | --------------------------------------------------------- |
+| `wrapperClassName` | `string` | –      | –    | 容器额外 className(给外层 wrapper,而非 `<select>` 本身)。 |
+
 <!-- auto:props:end -->
 
+## 依赖
+
 <!-- auto:deps:begin -->
+
 ### 同库依赖
 
 > `teamix-evo ui add native-select` 时,以下 entry 会被自动连带安装(无需手动 add)。
 
-| Entry | 类型 | 描述 |
-| --- | --- | --- |
-| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
+| Entry | 类型 | 描述                                               |
+| ----- | ---- | -------------------------------------------------- |
+| `cn`  | util | Tailwind className 合并工具(clsx + tailwind-merge) |
 
 ### npm 依赖
 
@@ -45,6 +53,7 @@ package: "@teamix-evo/ui"
 ```bash
 pnpm add lucide-react@^0.460.0
 ```
+
 <!-- auto:deps:end -->
 
 ## AI 生成纪律

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

@@ -9,7 +9,7 @@ const meta: Meta<typeof NativeSelect> = {
     docs: {
       description: {
         component:
-          '原生下拉选择 — 原生 `<select>` 元素的样式封装,零 JS 开销,移动端弹起系统 picker,直接参与 form submit。与 Radix `Select` 互为补充:NativeSelect 面向原生 / 移动端友好,Radix Select 面向自定义项 UI / 受控复杂表单。shadcn 2025-10 新增,等价 antd 体系中无直接对应(antd Select 全用 popup)。视觉走 OpenTrek tokens,所有样式来自 `@teamix-evo/design`,无 mock。',
+          '原生下拉选择 — 原生 `<select>` 元素的样式封装，零 JS 开销，移动端弹起系统 picker，直接参与 form submit。与 Radix `Select` 互为补充：NativeSelect 面向原生 / 移动端友好，Radix Select 面向自定义项 UI / 受控复杂表单。shadcn 2025-10 新增。',
       },
     },
   },
@@ -63,7 +63,7 @@ export const InForm: Story = {
       onSubmit={(e) => {
         e.preventDefault();
         const fd = new FormData(e.currentTarget);
-        // eslint-disable-next-line no-alert
+
         alert(`提交: sort=${fd.get('sort')}`);
       }}
       className="flex items-center gap-2"
@@ -72,7 +72,10 @@ export const InForm: Story = {
         <option value="date">按日期</option>
         <option value="name">按名称</option>
       </NativeSelect>
-      <button type="submit" className="rounded-md border px-3 py-1 text-sm hover:bg-accent">
+      <button
+        type="submit"
+        className="rounded-md border px-3 py-1 text-sm hover:bg-accent"
+      >
         提交
       </button>
     </form>

package/src/components/navigation-menu/navigation-menu.meta.md

@@ -4,10 +4,11 @@ name: NavigationMenu
 type: component
 category: navigation
 since: 0.1.0
-package: "@teamix-evo/ui"
+package: '@teamix-evo/ui'
+displayName: 导航菜单
 ---
 
-# NavigationMenu
+# NavigationMenu 导航菜单
 
 主导航菜单 — Radix NavigationMenu。**用于网站 / 营销页 / 应用顶部主导航**(产品 / 文档 / 定价 / 关于)。
 **与 Menubar 区别**:NavigationMenu 是**网页级横向导航**(每项可有富 Content 面板,展示子页面预览);Menubar 是**应用级菜单**(文件 / 编辑等)。
@@ -29,7 +30,9 @@ package: "@teamix-evo/ui"
 > 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成。下表是 `NavigationMenu`(Root) 的 props。
 
 <!-- auto:props:begin -->
+
 _(组件无 `<Name>Props` interface — props 详见 [`navigation-menu.tsx`](./navigation-menu.tsx))_
+
 <!-- auto:props:end -->
 
 ## 依赖
@@ -37,13 +40,14 @@ _(组件无 `<Name>Props` interface — props 详见 [`navigation-menu.tsx`](./n
 > 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成,数据源是 [`manifest.json`](../../../manifest.json)。**手工编辑 marker 之间的内容会在下次生成时被覆盖**。
 
 <!-- auto:deps:begin -->
+
 ### 同库依赖
 
 > `teamix-evo ui add navigation-menu` 时,以下 entry 会被自动连带安装(无需手动 add)。
 
-| Entry | 类型 | 描述 |
-| --- | --- | --- |
-| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
+| Entry | 类型 | 描述                                               |
+| ----- | ---- | -------------------------------------------------- |
+| `cn`  | util | Tailwind className 合并工具(clsx + tailwind-merge) |
 
 ### npm 依赖
 
@@ -52,6 +56,7 @@ _(组件无 `<Name>Props` interface — props 详见 [`navigation-menu.tsx`](./n
 ```bash
 pnpm add @radix-ui/react-navigation-menu@^1.2.0 class-variance-authority@^0.7.0 lucide-react@^0.460.0
 ```
+
 <!-- auto:deps:end -->
 
 > 完整子组件:`NavigationMenu` / `NavigationMenuList` / `NavigationMenuItem` / `NavigationMenuTrigger` / `NavigationMenuContent` / `NavigationMenuLink` / `NavigationMenuIndicator` / `NavigationMenuViewport` + `navigationMenuTriggerStyle`(给独立 Link 复用 trigger 视觉)。
@@ -68,9 +73,13 @@ pnpm add @radix-ui/react-navigation-menu@^1.2.0 class-variance-authority@^0.7.0
 ```tsx
 import * as React from 'react';
 import {
-  NavigationMenu, NavigationMenuList, NavigationMenuItem,
-  NavigationMenuTrigger, NavigationMenuContent,
-  NavigationMenuLink, navigationMenuTriggerStyle,
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuTrigger,
+  NavigationMenuContent,
+  NavigationMenuLink,
+  navigationMenuTriggerStyle,
 } from '@/components/ui/navigation-menu';
 
 <NavigationMenu>
@@ -81,9 +90,14 @@ import {
         <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2">
           <li>
             <NavigationMenuLink asChild>
-              <a href="/design" className="block rounded-md p-3 hover:bg-accent">
+              <a
+                href="/design"
+                className="block rounded-md p-3 hover:bg-accent"
+              >
                 <div className="text-sm font-medium">Design</div>
-                <p className="text-xs text-muted-foreground">设计体系与 tokens</p>
+                <p className="text-xs text-muted-foreground">
+                  设计体系与 tokens
+                </p>
               </a>
             </NavigationMenuLink>
           </li>
@@ -104,5 +118,5 @@ import {
       </NavigationMenuLink>
     </NavigationMenuItem>
   </NavigationMenuList>
-</NavigationMenu>
+</NavigationMenu>;
 ```

package/src/components/navigation-menu/navigation-menu.stories.tsx

@@ -13,6 +13,14 @@ const meta: Meta<typeof NavigationMenu> = {
   title: '导航 · Navigation/NavigationMenu',
   component: NavigationMenu,
   tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '导航菜单 — 网站 / 营销页 / 应用顶部主导航（产品 / 文档 / 定价），每项可有富 Content 面板展示子页面预览。Radix NavigationMenu 实现，shadcn 显式版，与 Menubar（应用级菜单）互补。',
+      },
+    },
+  },
 };
 
 export default meta;
@@ -77,9 +85,7 @@ export const Default: Story = {
                     className="block rounded-md p-3 hover:bg-accent"
                   >
                     <div className="text-sm font-medium">Skills</div>
-                    <p className="text-xs text-muted-foreground">
-                      AI IDE 技能
-                    </p>
+                    <p className="text-xs text-muted-foreground">AI IDE 技能</p>
                   </a>
                 </NavigationMenuLink>
               </li>
@@ -87,20 +93,14 @@ export const Default: Story = {
           </NavigationMenuContent>
         </NavigationMenuItem>
         <NavigationMenuItem>
-          <NavigationMenuLink
-            asChild
-            className={navigationMenuTriggerStyle()}
-          >
+          <NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>
             <a href="#docs" onClick={(e) => e.preventDefault()}>
               文档
             </a>
           </NavigationMenuLink>
         </NavigationMenuItem>
         <NavigationMenuItem>
-          <NavigationMenuLink
-            asChild
-            className={navigationMenuTriggerStyle()}
-          >
+          <NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>
             <a href="#pricing" onClick={(e) => e.preventDefault()}>
               定价
             </a>

package/src/components/navigation-menu/navigation-menu.tsx

@@ -84,7 +84,7 @@ const NavigationMenuViewport = React.forwardRef<
     <NavigationMenuPrimitive.Viewport
       ref={ref}
       className={cn(
-        'origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]',
+        'origin-top-center relative mt-1.5 h-radix-nav-viewport w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-radix-nav-viewport',
         className,
       )}
       {...props}
@@ -101,11 +101,12 @@ const NavigationMenuIndicator = React.forwardRef<
   <NavigationMenuPrimitive.Indicator
     ref={ref}
     className={cn(
-      'top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in',
+      'top-full z-1 flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in',
       className,
     )}
     {...props}
   >
+    {/* eslint-disable-next-line teamix-evo/no-arbitrary-tw-value -- indicator arrow tip alignment 60% is shadcn-canonical, not a tokenizable layout value. */}
     <div className="relative top-[60%] size-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
   </NavigationMenuPrimitive.Indicator>
 ));

package/src/components/notification/notification.meta.md

@@ -4,10 +4,11 @@ name: notification
 type: component
 category: feedback
 since: 0.1.0
-package: "@teamix-evo/ui"
+package: '@teamix-evo/ui'
+displayName: 通知
 ---
 
-# Notification
+# Notification 通知
 
 卡片式通知 — antd 独有补足。**等价 antd `Notification`**(右上角 title + description 卡片),与 sonner 同一渲染栈。基于 sonner `toast.custom` 二次封装,业务侧**只需要挂载一次 `<Toaster />`**,后续在任意地方调 `notification.success(...)` / `notification.error(...)` 等触发。
 
@@ -23,18 +24,25 @@ package: "@teamix-evo/ui"
 - 阻塞式确认 → `Dialog` / `AlertDialog` / `Popconfirm`
 - 表单字段错误 → `FieldError`(就近显示)
 
+## Props
+
 <!-- auto:props:begin -->
+
 _(组件无 `<Name>Props` interface — props 详见 [`notification.tsx`](./notification.tsx))_
+
 <!-- auto:props:end -->
 
+## 依赖
+
 <!-- auto:deps:begin -->
+
 ### 同库依赖
 
 > `teamix-evo ui add notification` 时,以下 entry 会被自动连带安装(无需手动 add)。
 
-| Entry | 类型 | 描述 |
-| --- | --- | --- |
-| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
+| Entry    | 类型      | 描述                                                                                              |
+| -------- | --------- | ------------------------------------------------------------------------------------------------- |
+| `cn`     | util      | Tailwind className 合并工具(clsx + tailwind-merge)                                                |
 | `sonner` | component | Toast 通知 — sonner 包装,等价 antd message + notification 并集(toast() 函数式 API + Toaster 容器) |
 
 ### npm 依赖
@@ -44,6 +52,7 @@ _(组件无 `<Name>Props` interface — props 详见 [`notification.tsx`](./noti
 ```bash
 pnpm add sonner@^1.5.0 lucide-react@^0.460.0
 ```
+
 <!-- auto:deps:end -->
 
 ## AI 生成纪律

package/src/components/notification/notification.stories.tsx

@@ -10,7 +10,7 @@ const meta: Meta = {
     docs: {
       description: {
         component:
-          '卡片式通知 — 右上角 title + description 卡片(部署成功 / 配额提醒)。基于 sonner toast.custom,业务侧只需挂载一次 `<Toaster />`,后续在任意地方 imperative 触发。等价 antd `Notification`,与 toast(message)互补。视觉走 OpenTrek tokens,所有样式来自 `@teamix-evo/design`,无 mock。',
+          '卡片式通知 — 右上角 title + description 卡片（部署成功 / 配额提醒）。基于 sonner toast.custom，业务侧只需挂载一次 `<Toaster />`，后续在任意地方 imperative 触发。等价 antd `Notification`，与 toast(message)互补。',
       },
     },
   },
@@ -27,7 +27,10 @@ export const Playground: Story = {
         <Button
           variant="outline"
           onClick={() =>
-            notification.info({ title: '提示', description: '这是一条 info 通知' })
+            notification.info({
+              title: '提示',
+              description: '这是一条 info 通知',
+            })
           }
         >
           Info
@@ -82,7 +85,6 @@ export const WithAction: Story = {
             action: {
               label: '刷新',
               onClick: () => {
-                // eslint-disable-next-line no-alert
                 alert('刷新');
               },
             },

package/src/components/notification/notification.tsx

@@ -30,8 +30,8 @@ export interface NotificationOptions extends Omit<ExternalToast, 'description' |
 
 const iconMap: Record<NotificationType, React.ReactNode> = {
   info: <Info className="size-5 text-primary" />,
-  success: <CheckCircle2 className="size-5 text-emerald-500" />,
-  warning: <AlertCircle className="size-5 text-amber-500" />,
+  success: <CheckCircle2 className="size-5 text-success" />,
+  warning: <AlertCircle className="size-5 text-warning" />,
   error: <XCircle className="size-5 text-destructive" />,
 };
 
@@ -44,7 +44,7 @@ function fire(
       <div
         role="alert"
         className={cn(
-          'flex w-[360px] gap-3 rounded-md border bg-background p-4 text-sm shadow-lg',
+          'flex w-notification gap-3 rounded-md border bg-background p-4 text-sm shadow-lg',
         )}
       >
         <span className="mt-0.5 shrink-0">{iconMap[type]}</span>