@teamix-evo/ui 0.5.2 → 0.6.0

package/src/components/sonner/index.tsx

@@ -21,16 +21,18 @@ import {
   toast,
   type ToasterProps as SonnerToasterProps,
 } from 'sonner';
-import {
-  CircleCheckIcon,
-  CircleHelpIcon,
-  InfoIcon,
-  Loader2Icon,
-  OctagonXIcon,
-  TriangleAlertIcon,
-} from 'lucide-react';
+import { Loader2Icon } from 'lucide-react';
 
 import { cn } from '@/lib/utils';
+import {
+  ErrorFilledIcon,
+  HelpFilledIcon,
+  InfoFilledIcon,
+  SuccessFilledIcon,
+  WarningFilledIcon,
+} from '@/components/icon';
+
+/* ─── Types ────────────────────────────────────────────────────────────────── */
 
 /**
  * 容器级摆放位置 — cloud-design Notification.config({ placement }) 的 6 档形态。
@@ -52,17 +54,13 @@ export interface ToasterProps
   maxToasts?: number;
 }
 
-/* ────────────────────────────────────────────────────────────────────────── */
-/* 内置状态图标（占位）                                                        */
-/*                                                                            */
-/* TODO(icon): 项目自研 Icon 组件就绪后，统一替换以下 STATE_ICONS 即可，         */
-/*             不影响 Toaster / toast 的 API。                                 */
-/* ────────────────────────────────────────────────────────────────────────── */
+/* ─── 内置语义图标（对齐 Alert 面性图标体系） ──────────────────────────────── */
+
 const STATE_ICONS = {
-  success: <CircleCheckIcon className="size-4 shrink-0 text-success" />,
-  info: <InfoIcon className="size-4 shrink-0 text-info" />,
-  warning: <TriangleAlertIcon className="size-4 shrink-0 text-warning" />,
-  error: <OctagonXIcon className="size-4 shrink-0 text-destructive" />,
+  success: <SuccessFilledIcon className="size-4 shrink-0 text-success" />,
+  info: <InfoFilledIcon className="size-4 shrink-0 text-info" />,
+  warning: <WarningFilledIcon className="size-4 shrink-0 text-warning" />,
+  error: <ErrorFilledIcon className="size-4 shrink-0 text-destructive" />,
   loading: (
     <Loader2Icon className="size-4 shrink-0 animate-spin text-muted-foreground" />
   ),
@@ -70,12 +68,14 @@ const STATE_ICONS = {
 
 /**
  * `help` 状态在 sonner 原生类型中不存在，作为业界常见第六档语义保留。
- * 业务侧通过 `toast(msg, { icon: HelpToastIcon })` 触发，或参考 stories 演示。
+ * 业务侧通过 `toast(msg, { icon: HelpToastIcon })` 触发。
  */
 export const HelpToastIcon = (
-  <CircleHelpIcon className="size-4 shrink-0 text-help" />
+  <HelpFilledIcon className="size-4 shrink-0 text-help" />
 );
 
+/* ─── Toaster 容器 ─────────────────────────────────────────────────────────── */
+
 function Toaster({
   theme,
   placement = 'top-right',
@@ -104,32 +104,35 @@ function Toaster({
       className={cn('toaster group', className)}
       style={
         {
-          // 容器与文字基础变量 — 沿用主题语义 token，dark 自动跟随
-          '--normal-bg': 'var(--popover)',
-          '--normal-text': 'var(--popover-foreground)',
-          '--normal-border': 'var(--border)',
+          // 基础外观 — 桥接 Tailwind v4 主题 token 到 sonner CSS 变量
+          '--normal-bg': 'var(--color-popover)',
+          '--normal-text': 'var(--color-popover-foreground)',
+          '--normal-border': 'var(--color-border)',
           '--border-radius': 'var(--radius)',
-          // 状态变量桥接 — 开启 richColors 时由 sonner 消费
-          '--success-bg': 'var(--success-bg)',
-          '--success-text': 'var(--success)',
-          '--success-border': 'var(--success-border)',
-          '--info-bg': 'var(--info-bg)',
-          '--info-text': 'var(--info)',
-          '--info-border': 'var(--info-border)',
-          '--warning-bg': 'var(--warning-bg)',
-          '--warning-text': 'var(--warning)',
-          '--warning-border': 'var(--warning-border)',
-          '--error-bg': 'var(--destructive-bg)',
-          '--error-text': 'var(--destructive)',
-          '--error-border': 'var(--destructive-border)',
+          // 关闭按钮定位 — 右上角内部
+          '--toast-close-button-start': 'unset',
+          '--toast-close-button-end': '8px',
+          '--toast-close-button-transform': 'translate(0, 8px)',
+          // richColors 状态变量桥接
+          '--success-bg': 'var(--color-success-bg)',
+          '--success-text': 'var(--color-success)',
+          '--success-border': 'var(--color-success-border)',
+          '--info-bg': 'var(--color-info-bg)',
+          '--info-text': 'var(--color-info)',
+          '--info-border': 'var(--color-info-border)',
+          '--warning-bg': 'var(--color-warning-bg)',
+          '--warning-text': 'var(--color-warning)',
+          '--warning-border': 'var(--color-warning-border)',
+          '--error-bg': 'var(--color-destructive-bg)',
+          '--error-text': 'var(--color-destructive)',
+          '--error-border': 'var(--color-destructive-border)',
           ...style,
         } as React.CSSProperties
       }
       toastOptions={{
         ...toastOptions,
         classNames: {
-          toast:
-            'group toast group-[.toaster]:bg-popover group-[.toaster]:text-popover-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
+          toast: 'group toast shadow-none',
           title: 'text-sm font-medium leading-5 text-foreground',
           description: 'text-xs leading-5 text-muted-foreground',
           actionButton:
@@ -137,7 +140,7 @@ function Toaster({
           cancelButton:
             'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground group-[.toast]:rounded-sm group-[.toast]:text-xs group-[.toast]:px-2 group-[.toast]:py-1 group-[.toast]:cursor-pointer hover:group-[.toast]:bg-muted/80',
           closeButton:
-            'group-[.toast]:bg-transparent group-[.toast]:text-muted-foreground group-[.toast]:border-border hover:group-[.toast]:text-foreground',
+            '!size-5 !border-0 !rounded-sm !bg-transparent !text-muted-foreground hover:!text-foreground hover:!bg-transparent [&>svg]:!size-4',
           ...toastOptions?.classNames,
         },
       }}

package/src/components/sonner/meta.md

@@ -30,15 +30,18 @@
 标题 + 描述 — 对应 cloud-design `Notification.open({ title, content })`。
 
 ```tsx
-<Button
-  onClick={() =>
-    toast('文件已保存', {
-      description: '你的修改已自动同步到云端，可在历史版本中找回。',
-    })
-  }
->
-  触发
-</Button>
+<>
+  <Button
+    onClick={() =>
+      toast('文件已保存', {
+        description: '你的修改已自动同步到云端，可在历史版本中找回。',
+      })
+    }
+  >
+    触发
+  </Button>
+  <Toaster />
+</>
 ```
 
 ### WithAction
@@ -46,19 +49,22 @@
 操作按钮 — 业内主流 `action` props，单击执行下一步行动并关闭。
 
 ```tsx
-<Button
-  onClick={() =>
-    toast('已删除项目「示例」', {
-      description: '删除后 7 天内可在回收站恢复。',
-      action: {
-        label: '撤销',
-        onClick: () => toast.success('已撤销删除'),
-      },
-    })
-  }
->
-  触发
-</Button>
+<>
+  <Button
+    onClick={() =>
+      toast('已删除项目「示例」', {
+        description: '删除后 7 天内可在回收站恢复。',
+        action: {
+          label: '撤销',
+          onClick: () => toast.success('已撤销删除'),
+        },
+      })
+    }
+  >
+    触发
+  </Button>
+  <Toaster />
+</>
 ```
 
 ### WithCancel
@@ -66,17 +72,20 @@
 取消按钮 — 与 action 并存的次级行动点，可阻断默认行为。
 
 ```tsx
-<Button
-  onClick={() =>
-    toast('确认离开当前页面？', {
-      description: '未保存的修改将丢失。',
-      action: { label: '继续', onClick: () => toast.info('已继续') },
-      cancel: { label: '取消', onClick: () => toast('已取消') },
-    })
-  }
->
-  触发
-</Button>
+<>
+  <Button
+    onClick={() =>
+      toast('确认离开当前页面？', {
+        description: '未保存的修改将丢失。',
+        action: { label: '继续', onClick: () => toast.info('已继续') },
+        cancel: { label: '取消', onClick: () => toast('已取消') },
+      })
+    }
+  >
+    触发
+  </Button>
+  <Toaster />
+</>
 ```
 
 ### LoadingThenResolve
@@ -84,19 +93,22 @@
 按 id 链式更新 — 等价 cloud-design `Message.loading + Message.success({ key })`。
 
 ```tsx
-<Button
-  onClick={() => {
-    const id = toast.loading('正在上传...');
-    setTimeout(() => {
-      toast.success('上传完成', {
-        id,
-        description: '文件已发布到生产环境。',
-      });
-    }, 1500);
-  }}
->
-  触发
-</Button>
+<>
+  <Button
+    onClick={() => {
+      const id = toast.loading('正在上传...');
+      setTimeout(() => {
+        toast.success('上传完成', {
+          id,
+          description: '文件已发布到生产环境。',
+        });
+      }, 1500);
+    }}
+  >
+    触发
+  </Button>
+  <Toaster />
+</>
 ```
 
 ### Duration
@@ -121,6 +133,7 @@
   >
     持久 (Infinity)
   </Button>
+  <Toaster />
 </div>
 ```
 
@@ -129,28 +142,31 @@
 自定义渲染 — `toast.custom` 完全接管节点，用于嵌入富内容卡片。
 
 ```tsx
-<Button
-  onClick={() =>
-    toast.custom((id) => (
-      <div className="flex w-80 items-start gap-3 rounded-md border border-border bg-popover p-3 text-popover-foreground shadow-lg">
-        <CircleHelpIcon className="mt-0.5 size-4 shrink-0 text-help" />
-        <div className="flex-1">
-          <div className="text-sm font-medium">自定义卡片</div>
-          <div className="mt-1 text-xs text-muted-foreground">
-            你可以在此渲染任意 JSX：表单、富文本、进度条等。
+<>
+  <Button
+    onClick={() =>
+      toast.custom((id) => (
+        <div className="flex w-80 items-start gap-3 rounded-md border border-border bg-popover p-3 text-popover-foreground">
+          <HelpFilledIcon className="mt-0.5 size-4 shrink-0 text-help" />
+          <div className="flex-1">
+            <div className="text-sm font-medium">自定义卡片</div>
+            <div className="mt-1 text-xs text-muted-foreground">
+              你可以在此渲染任意 JSX：表单、富文本、进度条等。
+            </div>
           </div>
+          <button
+            type="button"
+            className="cursor-pointer text-xs text-muted-foreground hover:text-foreground"
+            onClick={() => toast.dismiss(id)}
+          >
+            关闭
+          </button>
         </div>
-        <button
-          type="button"
-          className="cursor-pointer text-xs text-muted-foreground hover:text-foreground"
-          onClick={() => toast.dismiss(id)}
-        >
-          关闭
-        </button>
-      </div>
-    ))
-  }
->
-  触发
-</Button>
+      ))
+    }
+  >
+    触发
+  </Button>
+  <Toaster />
+</>
 ```

package/src/components/sonner/stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import * as React from 'react';
-import { CircleHelpIcon } from 'lucide-react';
+import { HelpFilledIcon } from '@/components/icon';
 import { Button } from '@/components/button';
 import { HelpToastIcon, Toaster, toast } from './index';
 
@@ -13,9 +13,8 @@ const meta: Meta<typeof Toaster> = {
   },
   decorators: [
     (Story) => (
-      <div>
+      <div style={{ minHeight: 280 }}>
         <Story />
-        <Toaster />
       </div>
     ),
   ],
@@ -26,6 +25,25 @@ type Story = StoryObj<typeof Toaster>;
 
 /** 五档语义状态 — 等价 cloud-design `Message.success / .error / .warning / .notice / .help / .loading`。 */
 export const Default: Story = {
+  parameters: {
+    docs: {
+      source: {
+        code: `import { Toaster, toast } from '@/components/sonner';
+
+// 全局挂载一次 Toaster 容器
+<Toaster />
+
+// 通过 toast() 函数式触发
+toast('默认通知');
+toast.success('保存成功');
+toast.info('已收到 3 条新消息');
+toast.warning('请检查网络连接');
+toast.error('操作失败，请重试');
+toast.loading('正在加载...');
+toast('需要帮助？', { icon: HelpToastIcon });`,
+      },
+    },
+  },
   render: () => (
     <div className="flex flex-wrap gap-2">
       <Button onClick={() => toast('默认通知')}>默认</Button>
@@ -44,6 +62,7 @@ export const Default: Story = {
         help
       </Button>
       <Button onClick={() => toast.loading('正在加载...')}>loading</Button>
+      <Toaster />
     </div>
   ),
 };
@@ -51,70 +70,82 @@ export const Default: Story = {
 /** 标题 + 描述 — 对应 cloud-design `Notification.open({ title, content })`。 */
 export const WithTitleAndDescription: Story = {
   render: () => (
-    <Button
-      onClick={() =>
-        toast('文件已保存', {
-          description: '你的修改已自动同步到云端，可在历史版本中找回。',
-        })
-      }
-    >
-      触发
-    </Button>
+    <>
+      <Button
+        onClick={() =>
+          toast('文件已保存', {
+            description: '你的修改已自动同步到云端，可在历史版本中找回。',
+          })
+        }
+      >
+        触发
+      </Button>
+      <Toaster />
+    </>
   ),
 };
 
 /** 操作按钮 — 业内主流 `action` props，单击执行下一步行动并关闭。 */
 export const WithAction: Story = {
   render: () => (
-    <Button
-      onClick={() =>
-        toast('已删除项目「示例」', {
-          description: '删除后 7 天内可在回收站恢复。',
-          action: {
-            label: '撤销',
-            onClick: () => toast.success('已撤销删除'),
-          },
-        })
-      }
-    >
-      触发
-    </Button>
+    <>
+      <Button
+        onClick={() =>
+          toast('已删除项目「示例」', {
+            description: '删除后 7 天内可在回收站恢复。',
+            action: {
+              label: '撤销',
+              onClick: () => toast.success('已撤销删除'),
+            },
+          })
+        }
+      >
+        触发
+      </Button>
+      <Toaster />
+    </>
   ),
 };
 
 /** 取消按钮 — 与 action 并存的次级行动点，可阻断默认行为。 */
 export const WithCancel: Story = {
   render: () => (
-    <Button
-      onClick={() =>
-        toast('确认离开当前页面？', {
-          description: '未保存的修改将丢失。',
-          action: { label: '继续', onClick: () => toast.info('已继续') },
-          cancel: { label: '取消', onClick: () => toast('已取消') },
-        })
-      }
-    >
-      触发
-    </Button>
+    <>
+      <Button
+        onClick={() =>
+          toast('确认离开当前页面？', {
+            description: '未保存的修改将丢失。',
+            action: { label: '继续', onClick: () => toast.info('已继续') },
+            cancel: { label: '取消', onClick: () => toast('已取消') },
+          })
+        }
+      >
+        触发
+      </Button>
+      <Toaster />
+    </>
   ),
 };
 
 /** 按 id 链式更新 — 等价 cloud-design `Message.loading + Message.success({ key })`。 */
 export const LoadingThenResolve: Story = {
   render: () => (
-    <Button
-      onClick={() => {
-        const id = toast.loading('正在上传...');
-        setTimeout(() => {
-          toast.success('上传完成', {
-            id,
-            description: '文件已发布到生产环境。',
-          });
-        }, 1500);
-      }}
-    >
-      触发
-    </Button>
+    <>
+      <Button
+        onClick={() => {
+          const id = toast.loading('正在上传...');
+          setTimeout(() => {
+            toast.success('上传完成', {
+              id,
+              description: '文件已发布到生产环境。',
+            });
+          }, 1500);
+        }}
+      >
+        触发
+      </Button>
+      <Toaster />
+    </>
   ),
 };
 
@@ -130,17 +161,20 @@ export const PromiseToast: Story = {
       });
 
     return (
-      <Button
-        onClick={() =>
-          toast.promise(mockRequest(), {
-            loading: '正在提交订单...',
-            success: (data) => `${data.name} 已提交`,
-            error: (err: Error) => `提交失败：${err.message}`,
-          })
-        }
-      >
-        触发
-      </Button>
+      <>
+        <Button
+          onClick={() =>
+            toast.promise(mockRequest(), {
+              loading: '正在提交订单...',
+              success: (data) => `${data.name} 已提交`,
+              error: (err: Error) => `提交失败：${err.message}`,
+            })
+          }
+        >
+          触发
+        </Button>
+        <Toaster />
+      </>
     );
   },
 };
@@ -165,6 +199,7 @@ export const Duration: Story = {
       >
         持久 (Infinity)
       </Button>
+      <Toaster />
     </div>
   ),
 };
@@ -215,30 +250,33 @@ export const Placement: Story = {
 /** 自定义渲染 — `toast.custom` 完全接管节点，用于嵌入富内容卡片。 */
 export const Custom: Story = {
   render: () => (
-    <Button
-      onClick={() =>
-        toast.custom((id) => (
-          <div className="flex w-80 items-start gap-3 rounded-md border border-border bg-popover p-3 text-popover-foreground shadow-lg">
-            <CircleHelpIcon className="mt-0.5 size-4 shrink-0 text-help" />
-            <div className="flex-1">
-              <div className="text-sm font-medium">自定义卡片</div>
-              <div className="mt-1 text-xs text-muted-foreground">
-                你可以在此渲染任意 JSX：表单、富文本、进度条等。
+    <>
+      <Button
+        onClick={() =>
+          toast.custom((id) => (
+            <div className="flex w-80 items-start gap-3 rounded-md border border-border bg-popover p-3 text-popover-foreground">
+              <HelpFilledIcon className="mt-0.5 size-4 shrink-0 text-help" />
+              <div className="flex-1">
+                <div className="text-sm font-medium">自定义卡片</div>
+                <div className="mt-1 text-xs text-muted-foreground">
+                  你可以在此渲染任意 JSX：表单、富文本、进度条等。
+                </div>
               </div>
+              <button
+                type="button"
+                className="cursor-pointer text-xs text-muted-foreground hover:text-foreground"
+                onClick={() => toast.dismiss(id)}
+              >
+                关闭
+              </button>
             </div>
-            <button
-              type="button"
-              className="cursor-pointer text-xs text-muted-foreground hover:text-foreground"
-              onClick={() => toast.dismiss(id)}
-            >
-              关闭
-            </button>
-          </div>
-        ))
-      }
-    >
-      触发
-    </Button>
+          ))
+        }
+      >
+        触发
+      </Button>
+      <Toaster />
+    </>
   ),
 };
 
@@ -251,7 +289,7 @@ export const DismissProgrammatic: Story = {
         <Button
           onClick={() => {
             idRef.current = toast('一条可被定向关闭的通知', {
-              description: '保留这条 id，再点"关闭它"按钮。',
+              description: '保留这条 id，再点“关闭它”按钮。',
               duration: Infinity,
             });
           }}
@@ -279,6 +317,7 @@ export const DismissProgrammatic: Story = {
         <Button variant="destructive" onClick={() => toast.dismiss()}>
           全部关闭
         </Button>
+        <Toaster />
       </div>
     );
   },