Skies.ui元件 (Components)
Toast 通知
Skies.ui Toast：toast() 排程，根 layout 的 Toaster 以 Radix Toast 顯示。可傳 title、description、選填 status（success／warning／destructive，省略為中性）、duration（毫秒）；useToast 取用。
範例與用法
"use client";
import { Button, toast } from "@skies-ui/ui";
toast({ title: "完成", description: "操作已成功。" });
toast({ status: "success", title: "成功", description: "…" });
toast({ status: "warning", title: "請留意", description: "…" });
toast({ status: "destructive", title: "錯誤", description: "…" });toast() 回傳 { id, dismiss }，可手動關閉該則。
安裝
npx skies-ui@latest add toast見 安裝與 CLI。根版面需掛 <Toaster />（本文件站已在 apps/docs/src/app/layout.tsx 設定）。
import { Toaster } from "@skies-ui/ui";
export default function RootLayout({ children }) {
return (
<html lang="zh-TW">
<body>
{children}
<Toaster />
</body>
</html>
);
}變體（status）
status | 用途 |
|---|---|
| （省略） | 中性／一般通知 |
success | 成功完成 |
warning | 需留意、非阻斷警示 |
destructive | 錯誤或失敗 |
組合與行為
useToast()：在 Client Component 內取得{ toast, dismiss, toasts }（除錯或自訂 UI）。- 狀態存於模組內 store，不必再包
ToastProvider。 Toaster= RadixProvider+Viewport+ 依 store 渲染。
API 參考
| 項目 | 說明 |
|---|---|
toast({ title?, description?, status?, duration? }) | 推入一則；至少 title 或 description |
status | success | warning | destructive（可省略） |
dismissToast(id) | 依 id 移除 |
useToast() | { toast, dismiss, toasts } |
Toaster | Client；與 toast 搭配使用 |
toastVariants | 需要自組外觀時可匯出重用 |
Modal 對話框
Skies.ui Modal：原生 dialog + showModal（非 Radix）。ModalTrigger 開啟；ModalContent 須含 ModalTitle（aria-labelledby）、可選 ModalDescription（aria-describedby）、ModalHeader／ModalFooter。關閉：ModalClose（可 asChild）、backdrop、Esc。
Table 表格
Skies.ui Table：外層建議 overflow-x-auto，內為語意 table。TableHeader／Body／Footer 對應 thead／tbody／tfoot；TableRow、TableHead、TableCell、TableCaption；樣式與 border-border、muted 一致。