feat: adopt kumo green ui system

components/ui/dialog.tsx

@@ -1,6 +1,10 @@
+"use client";
+
 import * as React from "react";
 import { X } from "lucide-react";
+import { Dialog as KumoDialog } from "@cloudflare/kumo/components/dialog";
 
+import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 
 type DialogProps = {
@@ -21,38 +25,35 @@ export function Dialog({
   footer,
   onClose,
   className,
-}: DialogProps): React.ReactElement | null {
-  if (!open) {
-    return null;
-  }
-
+}: DialogProps): React.ReactElement {
   return (
-    <div className="fixed inset-0 z-50 flex items-end justify-center bg-black/32 p-3 backdrop-blur-sm sm:items-center">
-      <section
-        aria-modal="true"
+    <KumoDialog.Root
+      onOpenChange={(nextOpen) => {
+        if (!nextOpen) {
+          onClose();
+        }
+      }}
+      open={open}
+    >
+      <KumoDialog
         className={cn(
-          "flex max-h-[92svh] w-full max-w-3xl flex-col overflow-hidden rounded-lg border bg-card shadow-xl",
+          "flex max-h-[92svh] w-[min(calc(100vw-1.5rem),48rem)] flex-col overflow-hidden rounded-lg border border-kumo-line bg-kumo-base p-0 shadow-xl",
           className,
         )}
-        role="dialog"
+        size="xl"
       >
-        <header className="flex shrink-0 items-start justify-between gap-4 border-b p-5">
+        <header className="flex shrink-0 items-start justify-between gap-4 border-b border-kumo-line p-5">
           <div className="min-w-0">
-            <h2 className="text-lg font-semibold">{title}</h2>
-            {description ? <p className="mt-1 text-sm text-muted-foreground">{description}</p> : null}
+            <KumoDialog.Title>{title}</KumoDialog.Title>
+            {description ? <KumoDialog.Description className="mt-1">{description}</KumoDialog.Description> : null}
           </div>
-          <button
-            aria-label="关闭弹窗"
-            className="inline-flex size-10 shrink-0 items-center justify-center rounded-md border bg-background text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-            onClick={onClose}
-            type="button"
-          >
+          <Button aria-label="关闭弹窗" onClick={onClose} size="icon" type="button" variant="outline">
             <X className="size-4" aria-hidden="true" />
-          </button>
+          </Button>
         </header>
         <div className="min-h-0 flex-1 overflow-y-auto p-5">{children}</div>
-        {footer ? <footer className="shrink-0 border-t bg-secondary/35 p-4">{footer}</footer> : null}
-      </section>
-    </div>
+        {footer ? <footer className="shrink-0 border-t border-kumo-line bg-kumo-recessed p-4">{footer}</footer> : null}
+      </KumoDialog>
+    </KumoDialog.Root>
   );
 }