Skies.ui元件 (Components)
Modal 對話框
Skies.ui Modal：原生 dialog／showModal、backdrop、標題與 aria、底部操作；模態視窗範例。
Modal 對話框
Modal 以原生 <dialog> 與 showModal() 實作（非 Radix）：ModalTrigger 開啟，ModalContent 內須含 ModalTitle（無障礙 aria-labelledby）、可選 ModalDescription（aria-describedby），以及 ModalHeader / ModalFooter 版面輔助。關閉可用 ModalClose（可 asChild 包 Button）、點 backdrop、或 Esc。
預設用法
import {
Button,
Modal,
ModalClose,
ModalContent,
ModalDescription,
ModalFooter,
ModalHeader,
ModalTitle,
ModalTrigger,
} from "@skies-ui/ui";
export function Example() {
return (
<Modal>
<ModalTrigger asChild>
<Button variant="outline">開啟</Button>
</ModalTrigger>
<ModalContent>
<ModalHeader>
<ModalTitle>標題</ModalTitle>
<ModalDescription>說明文字</ModalDescription>
</ModalHeader>
<ModalFooter>
<ModalClose asChild>
<Button type="button" variant="outline">
取消
</Button>
</ModalClose>
<ModalClose asChild>
<Button type="button">確認</Button>
</ModalClose>
</ModalFooter>
</ModalContent>
</Modal>
);
}受控開關
使用 open 與 onOpenChange 由外部狀態控制（例如 URL 或 store）。
與表單
可在 ModalContent 內放 Input / Textarea 等；送出後呼叫 onOpenChange(false) 或包在 ModalClose 的按鈕上關閉。
API 摘要
| 元件 | 說明 |
|---|---|
Modal | 根；open / defaultOpen / onOpenChange |
ModalTrigger | 開啟；常用 asChild 包 Button |
ModalContent | 原生 <dialog>；樣式含 [&::backdrop]:… |
ModalTitle | 必填，且須放在 ModalContent 內以綁定 id |
ModalDescription | 選用；同樣須在 ModalContent 內 |
ModalHeader / ModalFooter | 純版面 div |
ModalClose | 關閉；可 asChild |
全組為 Client Component（"use client"）。若需與 Radix Dialog 完全相同的行為細節，可日後改為 Radix 實作。