gladvn 0.2.17 → 0.2.18

package/src/dev/showcase/alert-dialog.tsx

@@ -1,11 +1,5 @@
-import { useDevContext } from "../../dev/components/dev-context";
-import {
-  DocsP,
-  ExampleGrid,
-  ExampleSection,
-  Showcase,
-  ShowcaseDocs,
-} from "../../dev/components/showcase";
+import { useState } from "react";
+
 import {
   InfoIcon,
   LogOutIcon,
@@ -15,7 +9,6 @@ import {
   TrashIcon,
   XIcon,
 } from "lucide-react";
-import { useState } from "react";
 
 import { AlertDialogPreset } from "../../components/macro/alert-dialog-preset";
 import {
@@ -28,11 +21,19 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogMedia,
+  AlertDialogPortal,
   AlertDialogTitle,
   AlertDialogTrigger,
-  AlertDialogPortal,
 } from "../../components/micro/alert-dialog";
 import { Button } from "../../components/micro/button";
+import { useDevContext } from "../../dev/components/dev-context";
+import {
+  DocsP,
+  ExampleGrid,
+  ExampleSection,
+  Showcase,
+  ShowcaseDocs,
+} from "../../dev/components/showcase";
 import { type Size } from "../../lib/types";
 
 // ──────────────────────────────────────────────────────────
@@ -48,19 +49,18 @@ function AlertDialogMacroShowcase({ globalSize }: { globalSize: Size }) {
           label="Hành Động Nguy Danger (Destructive)"
           description="Sử dụng actionColor='destructive' để tạo nút hành động nguy hiểm."
           codeString={`<AlertDialogPreset
-  trigger={
-    <Button variant="outline" color="destructive">
-      Xoá Tài Khoản
-    </Button>
-  }
-  title="Bạn có chắc chắn muốn xoá?"
-  description="Hành động này không thể hoàn tác. Tài khoản và toàn bộ dữ liệu của bạn trên hệ thống sẽ bị xoá vĩnh viễn."
-  cancelLabel="Huỷ"
-  actionLabel="Xoá"
-  actionColor="destructive"
-  onAction={() => console.log("Deleted!")}
-/>
-`}
+    trigger={
+      <Button variant="outline" color="destructive">
+        Xoá Tài Khoản
+      </Button>
+    }
+    title="Bạn có chắc chắn muốn xoá?"
+    description="Hành động này không thể hoàn tác. Tài khoản và toàn bộ dữ liệu của bạn trên hệ thống sẽ bị xoá vĩnh viễn."
+    cancelLabel="Huỷ"
+    actionLabel="Xoá"
+    actionColor="destructive"
+    onAction={() => console.log("Deleted!")}
+  />`}
         >
           <AlertDialogPreset
             size={globalSize}
@@ -82,18 +82,13 @@ function AlertDialogMacroShowcase({ globalSize }: { globalSize: Size }) {
           label="Xác Nhận Tiêu Chuẩn"
           description="Dialog xác nhận thông thường chỉ với Text."
           codeString={`<AlertDialogPreset
-  trigger={
-    <Button variant="outline">
-      Đăng Xuất
-    </Button>
-  }
-  title="Đăng xuất khỏi tài khoản?"
-  description="Bạn sẽ cần nhập lại thông tin đăng nhập để truy cập vào tài khoản."
-  cancelLabel="Ở Lại"
-  actionLabel="Đăng Xuất"
-  onAction={() => console.log("Logged out!")}
-/>
-`}
+    trigger={<Button variant="outline">Đăng Xuất</Button>}
+    title="Đăng xuất khỏi tài khoản?"
+    description="Bạn sẽ cần nhập lại thông tin đăng nhập để truy cập vào tài khoản."
+    cancelLabel="Ở Lại"
+    actionLabel="Đăng Xuất"
+    onAction={() => console.log("Logged out!")}
+  />`}
         >
           <AlertDialogPreset
             size={globalSize}
@@ -116,24 +111,23 @@ function AlertDialogMacroShowcase({ globalSize }: { globalSize: Size }) {
           label="Kèm Media (Icon/Image)"
           description="Tự động chia cột Flexbox Side-by-Side khi truyền prop 'icon'."
           codeString={`<AlertDialogPreset
-  trigger={
-    <Button variant="outline" color="warning">
-      Thu Hồi Quyền
-    </Button>
-  }
-  icon={
-    <div className="flex size-full items-center justify-center rounded-full bg-warning/10">
-      <ShieldAlertIcon className="text-warning" />
-    </div>
-  }
-  title="Thu hồi quyền truy cập API?"
-  description="Tất cả các ứng dụng đang sử dụng API key này sẽ bị mất quyền truy cập ngay lập tức."
-  cancelLabel="Giữ Lại"
-  actionLabel="Thu Hồi"
-  actionColor="warning"
-  onAction={() => console.log("Revoked!")}
-/>
-`}
+    trigger={
+      <Button variant="outline" color="warning">
+        Thu Hồi Quyền
+      </Button>
+    }
+    icon={
+      <div className="flex size-full items-center justify-center rounded-full bg-warning/10">
+        <ShieldAlertIcon className="text-warning" />
+      </div>
+    }
+    title="Thu hồi quyền truy cập API?"
+    description="Tất cả các ứng dụng đang sử dụng API key này sẽ bị mất quyền truy cập ngay lập tức."
+    cancelLabel="Giữ Lại"
+    actionLabel="Thu Hồi"
+    actionColor="warning"
+    onAction={() => console.log("Revoked!")}
+  />`}
         >
           <AlertDialogPreset
             size={globalSize}
@@ -214,26 +208,23 @@ return (
           label="Custom Button Variants"
           description="Tuỳ chỉnh variant cho cả nút Action (soft) và Cancel (ghost) thông qua actionVariant/cancelVariant."
           codeString={`<AlertDialogPreset
-  trigger={
-    <Button variant="outline">
-      Custom Variants
-    </Button>
-  }
-  icon={
-    <div className="flex size-full items-center justify-center rounded-full bg-info/10">
-      <MailWarningIcon className="text-info" />
-    </div>
-  }
-  title="Gửi phản hồi?"
-  description="Phản hồi của bạn sẽ được gửi ẩn danh tới đội ngũ phát triển."
-  cancelLabel="Bỏ qua"
-  cancelVariant="ghost"
-  actionLabel="Gửi"
-  actionColor="info"
-  actionVariant="soft"
-  onAction={() => console.log("Feedback sent!")}
-/>
-`}
+    trigger={
+      <Button variant="outline">Custom Variants</Button>
+    }
+    icon={
+      <div className="flex size-full items-center justify-center rounded-full bg-info/10">
+        <MailWarningIcon className="text-info" />
+      </div>
+    }
+    title="Gửi phản hồi?"
+    description="Phản hồi của bạn sẽ được gửi ẩn danh tới đội ngũ phát triển."
+    cancelLabel="Bỏ qua"
+    cancelVariant="ghost"
+    actionLabel="Gửi"
+    actionColor="info"
+    actionVariant="soft"
+    onAction={() => console.log("Feedback sent!")}
+  />`}
         >
           <AlertDialogPreset
             size={globalSize}
@@ -262,25 +253,24 @@ return (
           label="Children (Nội dung bổ sung)"
           description="Prop children cho phép chèn thêm nội dung tuỳ ý vào phần Header."
           codeString={`<AlertDialogPreset
-  trigger={
-    <Button variant="outline" color="warning">
-      Báo Cáo Lỗi
-    </Button>
-  }
-  title="Báo cáo lỗi hệ thống"
-  description="Vui lòng kiểm tra thông tin lỗi bên dưới trước khi gửi."
-  cancelLabel="Huỷ"
-  actionLabel="Gửi Báo Cáo"
-  actionColor="warning"
-  onAction={() => console.log("Report sent!")}
->
-  <div className="mt-2 rounded-md border border-border bg-muted/50 p-3 font-mono text-xs text-muted-foreground">
-    <p>Error Code: ERR_NETWORK_TIMEOUT</p>
-    <p>Timestamp: 2026-07-05T14:30:00Z</p>
-    <p>Module: api/gateway</p>
-  </div>
-</AlertDialogPreset>
-`}
+    trigger={
+      <Button variant="outline" color="warning">
+        Báo Cáo Lỗi
+      </Button>
+    }
+    title="Báo cáo lỗi hệ thống"
+    description="Vui lòng kiểm tra thông tin lỗi bên dưới trước khi gửi."
+    cancelLabel="Huỷ"
+    actionLabel="Gửi Báo Cáo"
+    actionColor="warning"
+    onAction={() => console.log("Report sent!")}
+  >
+    <div className="mt-2 rounded-md border border-border bg-muted/50 p-3 font-mono text-xs text-muted-foreground">
+      <p>Error Code: ERR_NETWORK_TIMEOUT</p>
+      <p>Timestamp: 2026-07-05T14:30:00Z</p>
+      <p>Module: api/gateway</p>
+    </div>
+  </AlertDialogPreset>`}
         >
           <AlertDialogPreset
             size={globalSize}
@@ -310,23 +300,20 @@ return (
           label="Giao Diện Nhỏ (Compact)"
           description="Khi dùng size='sm', nội dung sẽ được căn giữa và footer tự động dàn hàng ngang 2 cột."
           codeString={`<AlertDialogPreset
-  size="sm"
-  trigger={
-    <Button variant="outline">
-      Xác Nhận Nhanh
-    </Button>
-  }
-  icon={
-    <div className="flex size-full items-center justify-center rounded-full bg-muted">
-      <InfoIcon />
-    </div>
-  }
-  title="Xác nhận hành động?"
-  description="Đây là dialog dạng nhỏ, phù hợp cho các thao tác nhanh với 2 nút nằm ngang."
-  cancelLabel="Không"
-  actionLabel="Có"
-/>
-`}
+    size="sm"
+    trigger={
+      <Button variant="outline">Xác Nhận Nhanh</Button>
+    }
+    icon={
+      <div className="flex size-full items-center justify-center rounded-full bg-muted">
+        <InfoIcon />
+      </div>
+    }
+    title="Xác nhận hành động?"
+    description="Đây là dialog dạng nhỏ, phù hợp cho các thao tác nhanh với 2 nút nằm ngang."
+    cancelLabel="Không"
+    actionLabel="Có"
+  />`}
         >
           <AlertDialogPreset
             size="sm"
@@ -362,30 +349,30 @@ function AlertDialogMicroShowcase({ globalSize }: { globalSize: Size }) {
           label="Sử dụng Cơ bản"
           description="Lắp ráp thủ công các khối Header, Title, Description, Footer."
           codeString={`<AlertDialog>
-  <AlertDialogTrigger
-    render={
-      <Button variant="outline">
-        Mở Dialog Trắng
-      </Button>
-    }
-  />
-  <AlertDialogPortal><AlertDialogContent>
-    <AlertDialogHeader>
-      <AlertDialogTitle>Cấu trúc nguyên thuỷ</AlertDialogTitle>
-      <AlertDialogDescription>
-        Không có bất kỳ layout "thần thánh" nào ép buộc ở đây. Các
-        thành phần chỉ xếp dọc (flex-col) mặc định.
-      </AlertDialogDescription>
-    </AlertDialogHeader>
-    <AlertDialogFooter>
-      <AlertDialogCancel>Huỷ bỏ</AlertDialogCancel>
-      <AlertDialogAction>
-        Tiếp tục
-      </AlertDialogAction>
-    </AlertDialogFooter>
-  </AlertDialogContent></AlertDialogPortal>
-</AlertDialog>
-`}
+    <AlertDialogTrigger
+      render={
+        <Button variant="outline">Mở Dialog Trắng</Button>
+      }
+    />
+    <AlertDialogPortal>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>
+            Cấu trúc nguyên thuỷ
+          </AlertDialogTitle>
+          <AlertDialogDescription>
+            Không có bất kỳ layout "thần thánh" nào ép buộc
+            ở đây. Các thành phần chỉ xếp dọc (flex-col) mặc
+            định.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Huỷ bỏ</AlertDialogCancel>
+          <AlertDialogAction>Tiếp tục</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialogPortal>
+  </AlertDialog>`}
         >
           <AlertDialog>
             <AlertDialogTrigger
@@ -422,34 +409,35 @@ function AlertDialogMicroShowcase({ globalSize }: { globalSize: Size }) {
           label="Tự Do Custom Layout"
           description="Bởi vì Micro component rất 'dumb', bạn có thể tự chèn thẻ div, custom flexbox để làm ra bất kỳ giao diện nào."
           codeString={`<AlertDialog>
-  <AlertDialogTrigger
-    render={
-      <Button variant="outline" color="warning">
-        Giao Diện Custom
-      </Button>
-    }
-  />
-  <AlertDialogPortal><AlertDialogContent className="border-warning/50">
-    <div className="flex flex-col-reverse items-center justify-center gap-4 py-4 sm:flex-row">
-      <div className="size-16 rounded-lg bg-warning/20 border border-warning" />
-      <AlertDialogHeader className="sm:text-left">
-        <AlertDialogTitle className="text-warning">
-          Cảnh báo Tùy chỉnh
-        </AlertDialogTitle>
-        <AlertDialogDescription>
-          Icon đang nằm bên trái, hoặc có thể dời sang phải tuỳ ý bạn
-          vì bạn đang kiểm soát HTML.
-        </AlertDialogDescription>
-      </AlertDialogHeader>
-    </div>
-    <AlertDialogFooter className="border-t-0 bg-transparent">
-      <AlertDialogCancel className="w-full">
-        Tôi đã hiểu
-      </AlertDialogCancel>
-    </AlertDialogFooter>
-  </AlertDialogContent></AlertDialogPortal>
-</AlertDialog>
-`}
+    <AlertDialogTrigger
+      render={
+        <Button variant="outline" color="warning">
+          Giao Diện Custom
+        </Button>
+      }
+    />
+    <AlertDialogPortal>
+      <AlertDialogContent className="border-warning/50">
+        <div className="flex flex-col-reverse items-center justify-center gap-4 py-4 sm:flex-row">
+          <div className="size-16 rounded-lg bg-warning/20 border border-warning" />
+          <AlertDialogHeader className="sm:text-left">
+            <AlertDialogTitle className="text-warning">
+              Cảnh báo Tùy chỉnh
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              Icon đang nằm bên trái, hoặc có thể dời sang
+              phải tuỳ ý bạn vì bạn đang kiểm soát HTML.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+        </div>
+        <AlertDialogFooter className="border-t-0 bg-transparent">
+          <AlertDialogCancel className="w-full">
+            Tôi đã hiểu
+          </AlertDialogCancel>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialogPortal>
+  </AlertDialog>`}
         >
           <AlertDialog>
             <AlertDialogTrigger
@@ -493,35 +481,35 @@ function AlertDialogMicroShowcase({ globalSize }: { globalSize: Size }) {
           label="AlertDialogMedia"
           description="Khối chứa Icon/Image, tự scale theo size của AlertDialogContent."
           codeString={`<AlertDialog>
-  <AlertDialogTrigger
-    render={
-      <Button variant="outline">
-        Với Media
-      </Button>
-    }
-  />
-  <AlertDialogPortal><AlertDialogContent>
-    <div className="flex flex-col gap-1.5 sm:flex-row sm:gap-4">
-      <AlertDialogMedia className="mx-auto mb-2 shrink-0 sm:mx-0 sm:mb-0">
-        <ShieldAlertIcon className="text-warning" />
-      </AlertDialogMedia>
-      <AlertDialogHeader>
-        <AlertDialogTitle>Cảnh báo bảo mật</AlertDialogTitle>
-        <AlertDialogDescription>
-          AlertDialogMedia là khối div chứa icon, tự động scale kích
-          thước theo data-size của AlertDialogContent.
-        </AlertDialogDescription>
-      </AlertDialogHeader>
-    </div>
-    <AlertDialogFooter>
-      <AlertDialogCancel>Huỷ</AlertDialogCancel>
-      <AlertDialogAction color="warning">
-        Xác nhận
-      </AlertDialogAction>
-    </AlertDialogFooter>
-  </AlertDialogContent></AlertDialogPortal>
-</AlertDialog>
-`}
+    <AlertDialogTrigger
+      render={<Button variant="outline">Với Media</Button>}
+    />
+    <AlertDialogPortal>
+      <AlertDialogContent>
+        <div className="flex flex-col gap-1.5 sm:flex-row sm:gap-4">
+          <AlertDialogMedia className="mx-auto mb-2 shrink-0 sm:mx-0 sm:mb-0">
+            <ShieldAlertIcon className="text-warning" />
+          </AlertDialogMedia>
+          <AlertDialogHeader>
+            <AlertDialogTitle>
+              Cảnh báo bảo mật
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              AlertDialogMedia là khối div chứa icon, tự
+              động scale kích thước theo data-size của
+              AlertDialogContent.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+        </div>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Huỷ</AlertDialogCancel>
+          <AlertDialogAction color="warning">
+            Xác nhận
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialogPortal>
+  </AlertDialog>`}
         >
           <AlertDialog>
             <AlertDialogTrigger
@@ -561,33 +549,34 @@ function AlertDialogMicroShowcase({ globalSize }: { globalSize: Size }) {
           label="AlertDialogClose"
           description="Primitive đóng dialog cơ bản, cho phép render bất kỳ element nào (không bị ép thành Button)."
           codeString={`<AlertDialog>
-  <AlertDialogTrigger
-    render={
-      <Button variant="outline">
-        Dialog Có Nút X
-      </Button>
-    }
-  />
-  <AlertDialogPortal><AlertDialogContent>
-    <AlertDialogClose className="absolute top-3 right-3 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-none">
-      <XIcon className="size-4" />
-      <span className="sr-only">Đóng</span>
-    </AlertDialogClose>
-    <AlertDialogHeader>
-      <AlertDialogTitle>AlertDialogClose</AlertDialogTitle>
-      <AlertDialogDescription>
-        Khác với AlertDialogCancel (luôn render Button),
-        AlertDialogClose là bare-bone — bạn có thể render icon X,
-        link, hay bất kỳ thứ gì.
-      </AlertDialogDescription>
-    </AlertDialogHeader>
-    <AlertDialogFooter>
-      <AlertDialogCancel>Huỷ</AlertDialogCancel>
-      <AlertDialogAction>Đồng ý</AlertDialogAction>
-    </AlertDialogFooter>
-  </AlertDialogContent></AlertDialogPortal>
-</AlertDialog>
-`}
+    <AlertDialogTrigger
+      render={
+        <Button variant="outline">Dialog Có Nút X</Button>
+      }
+    />
+    <AlertDialogPortal>
+      <AlertDialogContent>
+        <AlertDialogClose className="absolute top-3 right-3 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-none">
+          <XIcon className="size-4" />
+          <span className="sr-only">Đóng</span>
+        </AlertDialogClose>
+        <AlertDialogHeader>
+          <AlertDialogTitle>
+            AlertDialogClose
+          </AlertDialogTitle>
+          <AlertDialogDescription>
+            Khác với AlertDialogCancel (luôn render Button),
+            AlertDialogClose là bare-bone — bạn có thể
+            render icon X, link, hay bất kỳ thứ gì.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Huỷ</AlertDialogCancel>
+          <AlertDialogAction>Đồng ý</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialogPortal>
+  </AlertDialog>`}
         >
           <AlertDialog>
             <AlertDialogTrigger
@@ -629,34 +618,38 @@ function AlertDialogMicroShowcase({ globalSize }: { globalSize: Size }) {
           label="Action Colors"
           description="AlertDialogAction hỗ trợ prop color để thay đổi ngữ nghĩa hành động."
           codeString={`<AlertDialog>
-  <AlertDialogTrigger
-    render={
-      <Button variant="outline" color="destructive">
-        Xoá Tài Khoản
-      </Button>
-    }
-  />
-  <AlertDialogPortal><AlertDialogContent>
-    <div className="flex flex-col gap-1.5 sm:flex-row sm:gap-4">
-      <AlertDialogMedia className="mx-auto mb-2 shrink-0 sm:mx-0 sm:mb-0">
-        <TrashIcon className="text-destructive" />
-      </AlertDialogMedia>
-      <AlertDialogHeader>
-        <AlertDialogTitle>Xoá tài khoản vĩnh viễn?</AlertDialogTitle>
-        <AlertDialogDescription>
-          Tất cả dữ liệu sẽ bị xoá và không thể khôi phục.
-        </AlertDialogDescription>
-      </AlertDialogHeader>
-    </div>
-    <AlertDialogFooter>
-      <AlertDialogCancel>Huỷ</AlertDialogCancel>
-      <AlertDialogAction color="destructive">
-        Xoá vĩnh viễn
-      </AlertDialogAction>
-    </AlertDialogFooter>
-  </AlertDialogContent></AlertDialogPortal>
-</AlertDialog>
-`}
+    <AlertDialogTrigger
+      render={
+        <Button variant="outline" color="destructive">
+          Xoá Tài Khoản
+        </Button>
+      }
+    />
+    <AlertDialogPortal>
+      <AlertDialogContent>
+        <div className="flex flex-col gap-1.5 sm:flex-row sm:gap-4">
+          <AlertDialogMedia className="mx-auto mb-2 shrink-0 sm:mx-0 sm:mb-0">
+            <TrashIcon className="text-destructive" />
+          </AlertDialogMedia>
+          <AlertDialogHeader>
+            <AlertDialogTitle>
+              Xoá tài khoản vĩnh viễn?
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              Tất cả dữ liệu sẽ bị xoá và không thể khôi
+              phục.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+        </div>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Huỷ</AlertDialogCancel>
+          <AlertDialogAction color="destructive">
+            Xoá vĩnh viễn
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialogPortal>
+  </AlertDialog>`}
         >
           <AlertDialog>
             <AlertDialogTrigger
@@ -697,40 +690,36 @@ function AlertDialogMicroShowcase({ globalSize }: { globalSize: Size }) {
           label="Action & Cancel Variants"
           description="Tuỳ chỉnh variant cho cả Action (soft) và Cancel (ghost)."
           codeString={`<AlertDialog>
-  <AlertDialogTrigger
-    render={
-      <Button variant="outline">
-        Custom Variants
-      </Button>
-    }
-  />
-  <AlertDialogPortal><AlertDialogContent>
-    <div className="flex flex-col gap-1.5 sm:flex-row sm:gap-4">
-      <AlertDialogMedia className="mx-auto mb-2 shrink-0 sm:mx-0 sm:mb-0">
-        <LogOutIcon />
-      </AlertDialogMedia>
-      <AlertDialogHeader>
-        <AlertDialogTitle>Đăng xuất?</AlertDialogTitle>
-        <AlertDialogDescription>
-          Phiên đăng nhập của bạn sẽ kết thúc. Bạn cần nhập lại mật
-          khẩu để quay lại.
-        </AlertDialogDescription>
-      </AlertDialogHeader>
-    </div>
-    <AlertDialogFooter>
-      <AlertDialogCancel variant="ghost">
-        Ở lại
-      </AlertDialogCancel>
-      <AlertDialogAction
-        variant="soft"
-        color="info"
-      >
-        Đăng xuất
-      </AlertDialogAction>
-    </AlertDialogFooter>
-  </AlertDialogContent></AlertDialogPortal>
-</AlertDialog>
-`}
+    <AlertDialogTrigger
+      render={
+        <Button variant="outline">Custom Variants</Button>
+      }
+    />
+    <AlertDialogPortal>
+      <AlertDialogContent>
+        <div className="flex flex-col gap-1.5 sm:flex-row sm:gap-4">
+          <AlertDialogMedia className="mx-auto mb-2 shrink-0 sm:mx-0 sm:mb-0">
+            <LogOutIcon />
+          </AlertDialogMedia>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Đăng xuất?</AlertDialogTitle>
+            <AlertDialogDescription>
+              Phiên đăng nhập của bạn sẽ kết thúc. Bạn cần
+              nhập lại mật khẩu để quay lại.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+        </div>
+        <AlertDialogFooter>
+          <AlertDialogCancel variant="ghost">
+            Ở lại
+          </AlertDialogCancel>
+          <AlertDialogAction variant="soft" color="info">
+            Đăng xuất
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialogPortal>
+  </AlertDialog>`}
         >
           <AlertDialog>
             <AlertDialogTrigger
@@ -779,121 +768,135 @@ function AlertDialogMicroShowcase({ globalSize }: { globalSize: Size }) {
         description="Các kịch bản thực tế giúp bạn quyết định nên dùng Micro hay Macro."
         fullWidth
         codeString={`<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
-  {/* ── Story 1: Macro wins ── */}
-  <div className="rounded-xl border border-border bg-card p-5 flex flex-col gap-4">
-    <div className="flex items-start gap-3">
-      <span className="mt-0.5 shrink-0 rounded-full bg-green-500/10 p-1.5 text-green-600">
-        <ShieldAlertIcon className="size-4" aria-hidden="true" />
-      </span>
-      <div>
-        <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
-          Story 1 · Dùng Macro
-        </p>
-        <h3 className="mt-0.5 text-sm font-semibold text-foreground">
-          Xác nhận chuẩn mực với Icon
-        </h3>
+    {/* ── Story 1: Macro wins ── */}
+    <div className="rounded-xl border border-border bg-card p-5 flex flex-col gap-4">
+      <div className="flex items-start gap-3">
+        <span className="mt-0.5 shrink-0 rounded-full bg-green-500/10 p-1.5 text-green-600">
+          <ShieldAlertIcon
+            className="size-4"
+            aria-hidden="true"
+          />
+        </span>
+        <div>
+          <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+            Story 1 · Dùng Macro
+          </p>
+          <h3 className="mt-0.5 text-sm font-semibold text-foreground">
+            Xác nhận chuẩn mực với Icon
+          </h3>
+        </div>
       </div>
-    </div>
-
-    <p className="text-xs text-muted-foreground leading-relaxed">
-      Bạn cần làm một dialog xác nhận xoá với layout Side-by-Side
-      (Icon nằm bên trái trên màn hình lớn, nằm ở trên cùng trên màn
-      hình nhỏ).
-    </p>
-
-    <div className="rounded-lg bg-muted/50 p-3 flex justify-center">
-      <AlertDialogPreset
-        size="sm"
-        trigger={
-          <Button variant="outline" size="sm">
-            Xem Demo
-          </Button>
-        }
-        icon={
-          <div className="flex size-full items-center justify-center rounded-full bg-muted">
-            <InfoIcon />
-          </div>
-        }
-        title="Xác nhận thao tác"
-        description="Macro bọc mọi thứ vào một component duy nhất."
-        cancelLabel="Huỷ"
-        actionLabel="Tiếp tục"
-      />
-    </div>
 
-    <div className="rounded-md border border-border border-green-500/20 bg-green-500/5 px-3 py-2">
-      <p className="text-xs font-medium text-green-700 dark:text-green-400">
-        ✅ Dùng <code className="font-mono">AlertDialogPreset</code> —
-        Viết đúng 1 element. Tự động xử lý Grid/Flex responsive siêu
-        phức tạp.
+      <p className="text-xs text-muted-foreground leading-relaxed">
+        Bạn cần làm một dialog xác nhận xoá với layout
+        Side-by-Side (Icon nằm bên trái trên màn hình lớn,
+        nằm ở trên cùng trên màn hình nhỏ).
       </p>
-    </div>
-  </div>
-
-  {/* ── Story 2: Micro wins ── */}
-  <div className="rounded-xl border border-border bg-card p-5 flex flex-col gap-4">
-    <div className="flex items-start gap-3">
-      <span className="mt-0.5 shrink-0 rounded-full bg-blue-500/10 p-1.5 text-blue-600">
-        <MessageSquareWarningIcon
-          className="size-4"
-          aria-hidden="true"
-        />
-      </span>
-      <div>
-        <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
-          Story 2 · Dùng Micro
-        </p>
-        <h3 className="mt-0.5 text-sm font-semibold text-foreground">
-          Custom Layout độc lạ
-        </h3>
-      </div>
-    </div>
-
-    <p className="text-xs text-muted-foreground leading-relaxed">
-      Designer yêu cầu một Modal có Layout đặc thù: Image bự ở trên
-      cùng, Text ở dưới, Footer có 3 nút. Không có bất kỳ Preset nào
-      support layout này.
-    </p>
 
-    <div className="rounded-lg bg-muted/50 p-3 flex justify-center">
-      <AlertDialog>
-        <AlertDialogTrigger
-          render={
+      <div className="rounded-lg bg-muted/50 p-3 flex justify-center">
+        <AlertDialogPreset
+          size="sm"
+          trigger={
             <Button variant="outline" size="sm">
               Xem Demo
             </Button>
           }
+          icon={
+            <div className="flex size-full items-center justify-center rounded-full bg-muted">
+              <InfoIcon />
+            </div>
+          }
+          title="Xác nhận thao tác"
+          description="Macro bọc mọi thứ vào một component duy nhất."
+          cancelLabel="Huỷ"
+          actionLabel="Tiếp tục"
         />
-        <AlertDialogPortal><AlertDialogContent size="sm">
-          <div className="h-24 w-full rounded-md bg-muted flex items-center justify-center text-xs text-muted-foreground">
-            Custom Image
-          </div>
-          <AlertDialogHeader>
-            <AlertDialogTitle>Tùy biến 100%</AlertDialogTitle>
-          </AlertDialogHeader>
-          <AlertDialogFooter className="flex-col gap-2 sm:flex-col">
-            <Button className="w-full">Action 1</Button>
-            <Button color="secondary" variant="soft" className="w-full">
-              Action 2
-            </Button>
-            <AlertDialogCancel className="w-full">
-              Cancel
-            </AlertDialogCancel>
-          </AlertDialogFooter>
-        </AlertDialogContent></AlertDialogPortal>
-      </AlertDialog>
+      </div>
+
+      <div className="rounded-md border border-border border-green-500/20 bg-green-500/5 px-3 py-2">
+        <p className="text-xs font-medium text-green-700 dark:text-green-400">
+          ✅ Dùng{" "}
+          <code className="font-mono">
+            AlertDialogPreset
+          </code>{" "}
+          — Viết đúng 1 element. Tự động xử lý Grid/Flex
+          responsive siêu phức tạp.
+        </p>
+      </div>
     </div>
 
-    <div className="rounded-md border border-border border-blue-500/20 bg-blue-500/5 px-3 py-2">
-      <p className="text-xs font-medium text-blue-700 dark:text-blue-400">
-        ✅ Dùng <code className="font-mono">AlertDialog</code> (Micro) —
-        Không bị ràng buộc bởi bất kỳ layout định sẵn nào. Lắp ráp thẻ
-        tự do.
+    {/* ── Story 2: Micro wins ── */}
+    <div className="rounded-xl border border-border bg-card p-5 flex flex-col gap-4">
+      <div className="flex items-start gap-3">
+        <span className="mt-0.5 shrink-0 rounded-full bg-blue-500/10 p-1.5 text-blue-600">
+          <MessageSquareWarningIcon
+            className="size-4"
+            aria-hidden="true"
+          />
+        </span>
+        <div>
+          <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+            Story 2 · Dùng Micro
+          </p>
+          <h3 className="mt-0.5 text-sm font-semibold text-foreground">
+            Custom Layout độc lạ
+          </h3>
+        </div>
+      </div>
+
+      <p className="text-xs text-muted-foreground leading-relaxed">
+        Designer yêu cầu một Modal có Layout đặc thù: Image
+        bự ở trên cùng, Text ở dưới, Footer có 3 nút. Không
+        có bất kỳ Preset nào support layout này.
       </p>
+
+      <div className="rounded-lg bg-muted/50 p-3 flex justify-center">
+        <AlertDialog>
+          <AlertDialogTrigger
+            render={
+              <Button variant="outline" size="sm">
+                Xem Demo
+              </Button>
+            }
+          />
+          <AlertDialogPortal>
+            <AlertDialogContent size="sm">
+              <div className="h-24 w-full rounded-md bg-muted flex items-center justify-center text-xs text-muted-foreground">
+                Custom Image
+              </div>
+              <AlertDialogHeader>
+                <AlertDialogTitle>
+                  Tùy biến 100%
+                </AlertDialogTitle>
+              </AlertDialogHeader>
+              <AlertDialogFooter className="flex-col gap-2 sm:flex-col">
+                <Button className="w-full">Action 1</Button>
+                <Button
+                  color="secondary"
+                  variant="soft"
+                  className="w-full"
+                >
+                  Action 2
+                </Button>
+                <AlertDialogCancel className="w-full">
+                  Cancel
+                </AlertDialogCancel>
+              </AlertDialogFooter>
+            </AlertDialogContent>
+          </AlertDialogPortal>
+        </AlertDialog>
+      </div>
+
+      <div className="rounded-md border border-border border-blue-500/20 bg-blue-500/5 px-3 py-2">
+        <p className="text-xs font-medium text-blue-700 dark:text-blue-400">
+          ✅ Dùng{" "}
+          <code className="font-mono">AlertDialog</code>{" "}
+          (Micro) — Không bị ràng buộc bởi bất kỳ layout
+          định sẵn nào. Lắp ráp thẻ tự do.
+        </p>
+      </div>
     </div>
-  </div>
-</div>
-`}
+  </div>`}
       >
         <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
           {/* ── Story 1: Macro wins ── */}
@@ -913,9 +916,9 @@ function AlertDialogMicroShowcase({ globalSize }: { globalSize: Size }) {
             </div>
 
             <p className="text-xs text-muted-foreground leading-relaxed">
-              Bạn cần làm một dialog xác nhận xoá với layout Side-by-Side
-              (Icon nằm bên trái trên màn hình lớn, nằm ở trên cùng trên màn
-              hình nhỏ).
+              Bạn cần làm một dialog xác nhận xoá với layout Side-by-Side (Icon
+              nằm bên trái trên màn hình lớn, nằm ở trên cùng trên màn hình
+              nhỏ).
             </p>
 
             <div className="rounded-lg bg-muted/50 p-3 flex justify-center">