@teamix-evo/ui 0.1.1 → 0.3.0

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

@@ -33,7 +33,7 @@ const NativeSelect = React.forwardRef<HTMLSelectElement, NativeSelectProps>(
         ref={ref}
         disabled={disabled}
         className={cn(
-          'flex h-9 w-full appearance-none rounded-md border border-input bg-background py-1 pl-3 pr-8 text-sm shadow-sm',
+          'flex h-9 w-full appearance-none rounded-md border border-input bg-background py-1 pl-3 pr-8 text-xs shadow-sm',
           'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
           'disabled:cursor-not-allowed disabled:opacity-50',
           className,

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

@@ -2,12 +2,13 @@
 id: navigation-menu
 name: NavigationMenu
 type: component
-category: navigation
+category: deprecated
 since: 0.1.0
-package: "@teamix-evo/ui"
+package: '@teamix-evo/ui'
+displayName: 导航菜单
 ---
 
-# NavigationMenu
+# NavigationMenu 导航菜单
 
 主导航菜单 — Radix NavigationMenu。**用于网站 / 营销页 / 应用顶部主导航**(产品 / 文档 / 定价 / 关于)。
 **与 Menubar 区别**:NavigationMenu 是**网页级横向导航**(每项可有富 Content 面板,展示子页面预览);Menubar 是**应用级菜单**(文件 / 编辑等)。
@@ -68,9 +69,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 +86,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 +114,5 @@ import {
       </NavigationMenuLink>
     </NavigationMenuItem>
   </NavigationMenuList>
-</NavigationMenu>
+</NavigationMenu>;
 ```

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

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import {
   NavigationMenu,
   NavigationMenuList,
@@ -8,11 +8,20 @@ import {
   NavigationMenuLink,
   navigationMenuTriggerStyle,
 } from './navigation-menu';
+import { cn } from '@/utils/cn';
 
 const meta: Meta<typeof NavigationMenu> = {
-  title: '导航 · Navigation/NavigationMenu',
+  title: '废弃 · Deprecated/NavigationMenu',
   component: NavigationMenu,
   tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '⚠️ **已废弃** — 仅 Storybook 留档,不通过 manifest 对外发布。\n\nNavigationMenu 导航菜单 —— 在网站、营销页或应用顶部承载主导航，每项可展开富面板预览子页面。Radix `NavigationMenu` 内核 + shadcn 原子，**对齐 antd `Menu mode="horizontal"`** 的水平主导航能力，对齐 shadcn `NavigationMenu` 的 `NavigationMenuTrigger` / `NavigationMenuContent` / `NavigationMenuLink` / `navigationMenuTriggerStyle`，并补足 antd 的 `disabled` 项与简单链接形态。视觉走 OpenTrek semantic tokens，所有样式来自 `@teamix-evo/tokens`，无 mock。',
+      },
+    },
+  },
 };
 
 export default meta;
@@ -77,20 +86,73 @@ 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>
             </ul>
           </NavigationMenuContent>
         </NavigationMenuItem>
+        <NavigationMenuItem>
+          <NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>
+            <a href="#docs" onClick={(e) => e.preventDefault()}>
+              文档
+            </a>
+          </NavigationMenuLink>
+        </NavigationMenuItem>
+        <NavigationMenuItem>
+          <NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>
+            <a href="#pricing" onClick={(e) => e.preventDefault()}>
+              定价
+            </a>
+          </NavigationMenuLink>
+        </NavigationMenuItem>
         <NavigationMenuItem>
           <NavigationMenuLink
             asChild
-            className={navigationMenuTriggerStyle()}
+            className={cn(
+              navigationMenuTriggerStyle(),
+              'pointer-events-none opacity-50',
+            )}
+            aria-disabled
           >
+            <span>企业版（即将上线）</span>
+          </NavigationMenuLink>
+        </NavigationMenuItem>
+      </NavigationMenuList>
+    </NavigationMenu>
+  ),
+};
+
+export const SimpleLinks: Story = {
+  parameters: { layout: 'centered' },
+  render: () => (
+    <NavigationMenu>
+      <NavigationMenuList>
+        {['首页', '产品', '文档', '社区', '联系我们'].map((label) => (
+          <NavigationMenuItem key={label}>
+            <NavigationMenuLink
+              asChild
+              className={navigationMenuTriggerStyle()}
+            >
+              <a href={`#${label}`} onClick={(e) => e.preventDefault()}>
+                {label}
+              </a>
+            </NavigationMenuLink>
+          </NavigationMenuItem>
+        ))}
+      </NavigationMenuList>
+    </NavigationMenu>
+  ),
+};
+
+export const DisabledItem: Story = {
+  parameters: { layout: 'centered' },
+  render: () => (
+    <NavigationMenu>
+      <NavigationMenuList>
+        <NavigationMenuItem>
+          <NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>
             <a href="#docs" onClick={(e) => e.preventDefault()}>
               文档
             </a>
@@ -99,10 +161,19 @@ export const Default: Story = {
         <NavigationMenuItem>
           <NavigationMenuLink
             asChild
-            className={navigationMenuTriggerStyle()}
+            aria-disabled
+            className={cn(
+              navigationMenuTriggerStyle(),
+              'pointer-events-none opacity-50',
+            )}
           >
-            <a href="#pricing" onClick={(e) => e.preventDefault()}>
-              定价
+            <span>API（内部预览）</span>
+          </NavigationMenuLink>
+        </NavigationMenuItem>
+        <NavigationMenuItem>
+          <NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>
+            <a href="#blog" onClick={(e) => e.preventDefault()}>
+              博客
             </a>
           </NavigationMenuLink>
         </NavigationMenuItem>
@@ -110,3 +181,35 @@ export const Default: Story = {
     </NavigationMenu>
   ),
 };
+
+/**
+ * “纵向”其实是侧边列表形态的导航。Radix `NavigationMenu` 主要面向水平、
+ * 可开富面板的主导航；需要侧边导航选 `Sidebar`。下面是将 NavigationMenu
+ * `orientation="vertical"` 下的简样实例（供对齐 antd `Menu mode="vertical"` 的过度能力）。
+ */
+export const Vertical: Story = {
+  parameters: { layout: 'centered' },
+  render: () => (
+    <NavigationMenu orientation="vertical" className="w-56 max-w-none flex-col items-stretch">
+      <NavigationMenuList className="w-full flex-col items-stretch gap-0">
+        {[
+          { label: '仪表盘', href: '#dashboard' },
+          { label: '项目', href: '#projects' },
+          { label: '任务', href: '#tasks' },
+          { label: '设置', href: '#settings' },
+        ].map((it) => (
+          <NavigationMenuItem key={it.label} className="w-full">
+            <NavigationMenuLink
+              asChild
+              className={cn(navigationMenuTriggerStyle(), 'w-full justify-start')}
+            >
+              <a href={it.href} onClick={(e) => e.preventDefault()}>
+                {it.label}
+              </a>
+            </NavigationMenuLink>
+          </NavigationMenuItem>
+        ))}
+      </NavigationMenuList>
+    </NavigationMenu>
+  ),
+};

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

@@ -11,7 +11,10 @@ const NavigationMenu = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
   <NavigationMenuPrimitive.Root
     ref={ref}
-    className={cn('relative z-10 flex max-w-max flex-1 items-center justify-center', className)}
+    className={cn(
+      'relative z-10 flex max-w-max flex-1 items-center justify-center',
+      className,
+    )}
     {...props}
   >
     {children}
@@ -38,7 +41,7 @@ NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
 const NavigationMenuItem = NavigationMenuPrimitive.Item;
 
 const navigationMenuTriggerStyle = cva(
-  'group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50',
+  'group inline-flex h-9 w-max cursor-pointer items-center justify-center rounded-md bg-background px-4 py-2 text-xs font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50',
 );
 
 const NavigationMenuTrigger = React.forwardRef<
@@ -84,7 +87,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 border-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 +104,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,12 +4,13 @@ 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(...)` 等触发。
+卡片式通知 — antd 独有补足。**等价 antd `Notification`**(右上角 title + description 卡片),与 sonner 同一渲染栈。基于 sonner `toast.custom` 二次封装,业务侧**只需要挂载一次 `<Toaster />`**,后续在任意地方调 `notification.success(...)` / `notification.destructive(...)` 等触发。4 档语义色对齐 [ADR 0021](../../../../docs/adr/0021-semantic-color-api-unification.md):`primary / success / warning / destructive`。
 
 ## When to use
 
@@ -23,19 +24,26 @@ 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) |
-| `sonner` | component | Toast 通知 — sonner 包装,等价 antd message + notification 并集(toast() 函数式 API + Toaster 容器) |
+| Entry    | 类型      | 描述                                                                                                                       |
+| -------- | --------- | -------------------------------------------------------------------------------------------------------------------------- |
+| `cn`     | util      | Tailwind className 合并工具(clsx + tailwind-merge)                                                                         |
+| `sonner` | component | Toast 通知 — sonner 包装,等价 antd message + notification 并集(toast() 函数式 API + Toaster 容器,面性 5 状态图标 + 无边框) |
 
 ### 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 生成纪律
@@ -51,7 +60,7 @@ pnpm add sonner@^1.5.0 lucide-react@^0.460.0
 - **业务侧必须挂载 `<Toaster />`** —— Notification 与 toast 共用同一容器,通常挂在 root layout
 - **`title` 用动词或事件名**:"部署成功"/"订单已创建";**不要**写"提示"等空话
 - **`description` 解释后果或下一步**:"用户可在 1 分钟内访问新版本"/"详情请查看订单页";**不要**重复 title
-- **类型语义不要混淆**:`success` 用于成功完成,`warning` 用于风险提示但操作未失败,`error` 用于真正失败 — 与 `Alert` / `Toast` 的语义一致
+- **语义不要混淆**:`success` 用于成功完成,`warning` 用于风险提示但操作未失败,`destructive` 用于真正失败 — 与 `Alert` / `Toast` 的语义一致(对齐 ADR 0021,不再使用 `info` / `error` 字面)
 - **不要在 onConfirm 里同时调 toast 和 notification** — 单次反馈选一种,避免视觉噪音
 - **`destroy(id)` 主动关闭**:用于"自动重试成功"等场景,把之前的 error notification 替换掉
 
@@ -71,14 +80,14 @@ notification.warning({
   description: '请在 3 天内续费,否则服务将暂停',
 });
 
-notification.error({
+notification.destructive({
   title: '上传失败',
   description: '请检查网络连接后重试',
 });
 
 // 自定义 + 操作按钮(action 透传 sonner)
 const id = notification.open({
-  type: 'info',
+  color: 'primary',
   title: '新版本可用',
   description: 'v2.5 已发布,刷新页面以应用更新',
   action: { label: '刷新', onClick: () => location.reload() },
@@ -89,3 +98,36 @@ notification.destroy(id);
 ```
 
 > 应用根组件需要挂载一次 `<Toaster />`(来自 `sonner` entry),Notification 与 toast 共用此容器。
+
+---
+
+## Notification 形态 — 旧库 API → 新映射
+
+> 旧库 `Notification`(hybridcloud,含 open/success/error/warning 命令式) → 新库 `notification`(小写对象)。
+> 新库基于 sonner `toast.custom` 封装,共用 `<Toaster />` 容器。
+
+### 命名 & 结构映射
+
+| 旧库                                 | 新库                                      | 说明                          |
+| ------------------------------------ | ----------------------------------------- | ----------------------------- |
+| `Notification` (类)                  | `notification` (对象)                     | 大小写变更                    |
+| `Notification.success()`             | `notification.success()`                  | 直接映射                      |
+| `Notification.error()`               | `notification.destructive()`              | error → destructive(ADR 0021) |
+| `Notification.warning()`             | `notification.warning()`                  | 直接映射                      |
+| `Notification.notice()`              | `notification.open({ color: 'primary' })` | notice → primary              |
+| `options.content`                    | `options.description`                     | 字段重命名                    |
+| `options.type`                       | `options.color`                           | type → color(4 档语义色)      |
+| `Notification.close(key)`            | `notification.destroy(id)`                | 主动关闭                      |
+| `Notification.config({ placement })` | `<Toaster position="..." />`              | 声明式配置                    |
+| `size: large/medium`                 | 不复刻                                    | 固定尺寸                      |
+| `icon` 自定义                        | 不复刻                                    | 固定语义图标(规范化)          |
+| `type='help'`                        | `notification.open({ color: 'primary' })` | 合并到 primary                |
+
+### 迁移 FAQ
+
+| 问题                          | 回答                                                                |
+| ----------------------------- | ------------------------------------------------------------------- |
+| error 为什么变成 destructive? | 对齐 ADR 0021 语义色规范,统一用 destructive 表示错误/危险           |
+| Notification 和 toast 的关系? | 共用 Toaster 容器;简短提示用 toast,带标题+描述的卡片用 notification |
+| 怎么控制位置?                 | `<Toaster position="top-right" />`(默认右上)                        |
+| 怎么加 action 按钮?           | `notification.open({ ..., action: { label, onClick } })`            |

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

@@ -1,16 +1,16 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Toaster } from '@/components/sonner/sonner';
 import { notification } from './notification';
 import { Button } from '@/components/button/button';
 
 const meta: Meta = {
-  title: '反馈与浮层 · Feedback/Notification',
+  title: '反馈 · Feedback/Notification',
   tags: ['autodocs'],
   parameters: {
     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 触发。4 档语义色(primary / success / warning / destructive)对齐 ADR 0021，与 toast(message)互补。',
       },
     },
   },
@@ -27,10 +27,13 @@ export const Playground: Story = {
         <Button
           variant="outline"
           onClick={() =>
-            notification.info({ title: '提示', description: '这是一条 info 通知' })
+            notification.primary({
+              title: '提示',
+              description: '这是一条 primary 通知',
+            })
           }
         >
-          Info
+          Primary
         </Button>
         <Button
           onClick={() =>
@@ -56,13 +59,13 @@ export const Playground: Story = {
         <Button
           variant="destructive"
           onClick={() =>
-            notification.error({
+            notification.destructive({
               title: '上传失败',
               description: '请检查网络连接后重试',
             })
           }
         >
-          Error
+          Destructive
         </Button>
       </div>
     </div>
@@ -76,13 +79,12 @@ export const WithAction: Story = {
       <Button
         onClick={() =>
           notification.open({
-            type: 'info',
+            color: 'primary',
             title: '新版本可用',
             description: 'v2.5 已发布,刷新页面以应用更新',
             action: {
               label: '刷新',
               onClick: () => {
-                // eslint-disable-next-line no-alert
                 alert('刷新');
               },
             },

package/src/components/notification/notification.tsx

@@ -14,40 +14,54 @@ import { cn } from '@/utils/cn';
  *   - `notification.open()` 是 **title + description 卡片**(对应 antd `notification`)
  */
 
-export type NotificationType = 'info' | 'success' | 'warning' | 'error';
+export type NotificationColor =
+  | 'primary'
+  | 'success'
+  | 'warning'
+  | 'destructive';
 
-export interface NotificationOptions extends Omit<ExternalToast, 'description' | 'icon'> {
+export interface NotificationOptions
+  extends Omit<ExternalToast, 'description' | 'icon'> {
   /** 标题(antd `message` 并集,但 antd 这里命名为 message,易混淆 — 我们用更准确的 `title`)。 */
   title: React.ReactNode;
   /** 描述(antd `description` 并集)。 */
   description?: React.ReactNode;
   /**
-   * 状态 — 决定左侧 icon 颜色;`open()` 默认 `info`。
-   * `success` / `warning` / `error` 也可用对应快捷方法。
+   * 语义色(对齐 ADR 0021)— 决定左侧 icon 颜色;`open()` 默认 `primary`。
+   * `success` / `warning` / `destructive` 也可用对应快捷方法。
    */
-  type?: NotificationType;
+  color?: NotificationColor;
+  /**
+   * 自定义左侧 icon — 覆盖默认按 `color` 映射的 lucide icon。
+   * 传 `null` 显式隐藏 icon(只展示文字内容)。
+   * @example
+   *   notification.open({ icon: <UserPlus className="size-5 text-primary" />, title: '新用户加入' })
+   */
+  icon?: React.ReactNode | null;
 }
 
-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" />,
-  error: <XCircle className="size-5 text-destructive" />,
+const iconMap: Record<NotificationColor, React.ReactNode> = {
+  primary: <Info className="size-5 text-primary" />,
+  success: <CheckCircle2 className="size-5 text-success" />,
+  warning: <AlertCircle className="size-5 text-warning" />,
+  destructive: <XCircle className="size-5 text-destructive" />,
 };
 
 function fire(
-  type: NotificationType,
-  { title, description, ...rest }: NotificationOptions,
+  color: NotificationColor,
+  { title, description, icon, ...rest }: NotificationOptions,
 ) {
+  // icon: undefined → 默认按 color 映射;null → 显式隐藏 icon;其他 ReactNode → 自定义
+  const iconNode = icon === undefined ? iconMap[color] : icon;
   return toast.custom(
     (id) => (
       <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 border-border bg-background p-4 text-xs shadow-lg',
         )}
       >
-        <span className="mt-0.5 shrink-0">{iconMap[type]}</span>
+        {iconNode ? <span className="mt-0.5 shrink-0">{iconNode}</span> : null}
         <div className="min-w-0 flex-1">
           <div className="font-semibold leading-tight">{title}</div>
           {description ? (
@@ -58,7 +72,7 @@ function fire(
           type="button"
           aria-label="关闭"
           onClick={() => toast.dismiss(id)}
-          className="text-muted-foreground transition-colors hover:text-foreground"
+          className="cursor-pointer text-muted-foreground transition-colors hover:text-foreground"
         >
           ×
         </button>
@@ -70,13 +84,14 @@ function fire(
 
 const notification = {
   /**
-   * 通用打开 — 通过 `type` 区分状态;若只传 title,样式同 `info`。
+   * 通用打开 — 通过 `color` 区分状态;若只传 title,样式同 `primary`。
    */
-  open: (opts: NotificationOptions) => fire(opts.type ?? 'info', opts),
-  info: (opts: Omit<NotificationOptions, 'type'>) => fire('info', opts),
-  success: (opts: Omit<NotificationOptions, 'type'>) => fire('success', opts),
-  warning: (opts: Omit<NotificationOptions, 'type'>) => fire('warning', opts),
-  error: (opts: Omit<NotificationOptions, 'type'>) => fire('error', opts),
+  open: (opts: NotificationOptions) => fire(opts.color ?? 'primary', opts),
+  primary: (opts: Omit<NotificationOptions, 'color'>) => fire('primary', opts),
+  success: (opts: Omit<NotificationOptions, 'color'>) => fire('success', opts),
+  warning: (opts: Omit<NotificationOptions, 'color'>) => fire('warning', opts),
+  destructive: (opts: Omit<NotificationOptions, 'color'>) =>
+    fire('destructive', opts),
   /** 主动关闭某条(传 `id`)/ 全部(不传)。 */
   destroy: (id?: string | number) => toast.dismiss(id),
 };