gladvn 0.2.16 → 0.2.18

package/src/dev/showcase/empty.tsx

@@ -1,11 +1,3 @@
-import {
-  DocsP,
-  ExampleGrid,
-  ExampleSection,
-  Showcase,
-  ShowcaseDocs,
-} from "../../dev/components/showcase";
-
 import {
   CheckCircle2Icon,
   FileTextIcon,
@@ -27,6 +19,13 @@ import {
   EmptyMedia,
   EmptyTitle,
 } from "../../components/micro/empty";
+import {
+  DocsP,
+  ExampleGrid,
+  ExampleSection,
+  Showcase,
+  ShowcaseDocs,
+} from "../../dev/components/showcase";
 
 // ──────────────────────────────────────────────────────────
 // SECTION 1: Macro Content
@@ -39,12 +38,14 @@ function EmptyMacroShowcase() {
           label="Tiêu chuẩn (Standard)"
           description="Đầy đủ icon, title, description, action button."
           codeString={`<EmptyPreset
-  icon={<FolderOpenIcon className="size-4 text-muted-foreground" />}
-  title="No projects yet"
-  description="Create your first project to get started."
-  action={<Button>New Project</Button>}
-  className="w-full min-h-[280px]"
-/>`}
+    icon={
+      <FolderOpenIcon className="size-4 text-muted-foreground" />
+    }
+    title="No projects yet"
+    description="Create your first project to get started."
+    action={<Button>New Project</Button>}
+    className="w-full min-h-[280px]"
+  />`}
         >
           <EmptyPreset
             icon={<FolderOpenIcon className="size-4 text-muted-foreground" />}
@@ -59,12 +60,11 @@ function EmptyMacroShowcase() {
           label="Không có Icon (Without Icon)"
           description="Bỏ prop icon — phù hợp khi không cần hình ảnh minh họa."
           codeString={`<EmptyPreset
-  title="No notifications"
-  description="You're all caught up. Check back later."
-  action={<Button variant="outline">Refresh</Button>}
-  className="w-full min-h-[280px]"
-/>
-`}
+    title="No notifications"
+    description="You're all caught up. Check back later."
+    action={<Button variant="outline">Refresh</Button>}
+    className="w-full min-h-[280px]"
+  />`}
         >
           <EmptyPreset
             title="No notifications"
@@ -80,11 +80,13 @@ function EmptyMacroShowcase() {
           label="Không có Nút (Without Action)"
           description="Chỉ hiển thị trạng thái, không yêu cầu hành động."
           codeString={`<EmptyPreset
-  icon={<InboxIcon className="size-4 text-muted-foreground" />}
-  title="No messages"
-  description="Messages from your team will appear here."
-  className="w-full min-h-[240px]"
-/>`}
+    icon={
+      <InboxIcon className="size-4 text-muted-foreground" />
+    }
+    title="No messages"
+    description="Messages from your team will appear here."
+    className="w-full min-h-[240px]"
+  />`}
         >
           <EmptyPreset
             icon={<InboxIcon className="size-4 text-muted-foreground" />}
@@ -98,10 +100,9 @@ function EmptyMacroShowcase() {
           label="Tối giản (Minimal)"
           description="Chỉ có tiêu đề."
           codeString={`<EmptyPreset
-  title="Nothing here yet"
-  className="w-full min-h-[240px]"
-/>
-`}
+    title="Nothing here yet"
+    className="w-full min-h-[240px]"
+  />`}
         >
           <EmptyPreset
             title="Nothing here yet"
@@ -116,17 +117,19 @@ function EmptyMacroShowcase() {
           description="Pattern phổ biến khi tìm kiếm không ra kết quả."
           fullWidth
           codeString={`<EmptyPreset
-  icon={<SearchIcon className="size-4 text-muted-foreground" />}
-  title={'No results for "invoice"'}
-  description="Try a different search term or clear all active filters."
-  action={
-    <div className="flex gap-2">
-      <Button variant="outline">Clear filters</Button>
-      <Button>Browse all</Button>
-    </div>
-  }
-  className="w-full min-h-[240px]"
-/>`}
+    icon={
+      <SearchIcon className="size-4 text-muted-foreground" />
+    }
+    title={'No results for "invoice"'}
+    description="Try a different search term or clear all active filters."
+    action={
+      <div className="flex gap-2">
+        <Button variant="outline">Clear filters</Button>
+        <Button>Browse all</Button>
+      </div>
+    }
+    className="w-full min-h-[240px]"
+  />`}
         >
           <div className="w-full max-w-md">
             <EmptyPreset
@@ -149,16 +152,19 @@ function EmptyMacroShowcase() {
           description="Description chứa liên kết HTML."
           fullWidth
           codeString={`<EmptyPreset
-  icon={<FileTextIcon className="size-4 text-muted-foreground" />}
-  title="No documents"
-  description={
-    <>
-      Upload or create your first document. <a href="#">Learn more</a>.
-    </>
-  }
-  action={<Button>Upload Document</Button>}
-  className="w-full min-h-[240px]"
-/>`}
+    icon={
+      <FileTextIcon className="size-4 text-muted-foreground" />
+    }
+    title="No documents"
+    description={
+      <>
+        Upload or create your first document.{" "}
+        <a href="#">Learn more</a>.
+      </>
+    }
+    action={<Button>Upload Document</Button>}
+    className="w-full min-h-[240px]"
+  />`}
         >
           <div className="w-full max-w-md">
             <EmptyPreset
@@ -191,22 +197,21 @@ function EmptyMicroShowcase() {
           label="Cơ bản (Default)"
           description="Trạng thái trống cơ bản với cấu trúc thủ công."
           codeString={`<Empty className="w-full min-h-[280px]">
-  <EmptyHeader>
-    <EmptyTitle>No customers found</EmptyTitle>
-    <EmptyDescription>
-      Get started by adding your first customer.
-    </EmptyDescription>
-  </EmptyHeader>
-  <EmptyContent>
-    <EmptyAction>
-      <Button>
-        <PlusIcon className="mr-2" />
-        Add Customer
-      </Button>
-    </EmptyAction>
-  </EmptyContent>
-</Empty>
-`}
+    <EmptyHeader>
+      <EmptyTitle>No customers found</EmptyTitle>
+      <EmptyDescription>
+        Get started by adding your first customer.
+      </EmptyDescription>
+    </EmptyHeader>
+    <EmptyContent>
+      <EmptyAction>
+        <Button>
+          <PlusIcon className="mr-2" />
+          Add Customer
+        </Button>
+      </EmptyAction>
+    </EmptyContent>
+  </Empty>`}
         >
           <Empty className="w-full min-h-[280px]">
             <EmptyHeader>
@@ -230,24 +235,24 @@ function EmptyMicroShowcase() {
           label="Kèm Icon nền màu (Icon Variant)"
           description="Dùng EmptyMedia variant='icon' để hiển thị background mờ cho Icon."
           codeString={`<Empty className="w-full min-h-[280px]">
-  <EmptyHeader>
-    <EmptyMedia variant="icon">
-      <FolderOpenIcon className="size-4 text-muted-foreground" />
-    </EmptyMedia>
-    <EmptyTitle>No projects</EmptyTitle>
-    <EmptyDescription>
-      You don't have any active projects.
-    </EmptyDescription>
-  </EmptyHeader>
-  <EmptyContent>
-    <EmptyAction>
-      <Button>
-        <PlusIcon className="mr-2" />
-        New Project
-      </Button>
-    </EmptyAction>
-  </EmptyContent>
-</Empty>`}
+    <EmptyHeader>
+      <EmptyMedia variant="icon">
+        <FolderOpenIcon className="size-4 text-muted-foreground" />
+      </EmptyMedia>
+      <EmptyTitle>No projects</EmptyTitle>
+      <EmptyDescription>
+        You don't have any active projects.
+      </EmptyDescription>
+    </EmptyHeader>
+    <EmptyContent>
+      <EmptyAction>
+        <Button>
+          <PlusIcon className="mr-2" />
+          New Project
+        </Button>
+      </EmptyAction>
+    </EmptyContent>
+  </Empty>`}
         >
           <Empty className="w-full min-h-[280px]">
             <EmptyHeader>
@@ -276,14 +281,13 @@ function EmptyMicroShowcase() {
           label="Chỉ văn bản (Text Only)"
           description="Không icon, không action."
           codeString={`<Empty className="w-full min-h-[200px]">
-  <EmptyHeader>
-    <EmptyTitle>No results</EmptyTitle>
-    <EmptyDescription>
-      Try adjusting your filters or search terms.
-    </EmptyDescription>
-  </EmptyHeader>
-</Empty>
-`}
+    <EmptyHeader>
+      <EmptyTitle>No results</EmptyTitle>
+      <EmptyDescription>
+        Try adjusting your filters or search terms.
+      </EmptyDescription>
+    </EmptyHeader>
+  </Empty>`}
         >
           <Empty className="w-full min-h-[200px]">
             <EmptyHeader>
@@ -299,17 +303,17 @@ function EmptyMicroShowcase() {
           label="Link bên trong mô tả (Link in Description)"
           description="EmptyDescription tự động style thẻ <a> bên trong."
           codeString={`<Empty className="w-full min-h-[200px]">
-  <EmptyHeader>
-    <EmptyMedia variant="icon">
-      <InboxIcon className="size-4 text-muted-foreground" />
-    </EmptyMedia>
-    <EmptyTitle>No messages yet</EmptyTitle>
-    <EmptyDescription>
-      Messages from your team will appear here. Learn more in our{" "}
-      <a href="#">documentation</a>.
-    </EmptyDescription>
-  </EmptyHeader>
-</Empty>`}
+    <EmptyHeader>
+      <EmptyMedia variant="icon">
+        <InboxIcon className="size-4 text-muted-foreground" />
+      </EmptyMedia>
+      <EmptyTitle>No messages yet</EmptyTitle>
+      <EmptyDescription>
+        Messages from your team will appear here. Learn more
+        in our <a href="#">documentation</a>.
+      </EmptyDescription>
+    </EmptyHeader>
+  </Empty>`}
         >
           <Empty className="w-full min-h-[200px]">
             <EmptyHeader>
@@ -331,24 +335,25 @@ function EmptyMicroShowcase() {
         description="Nút xóa bộ lọc nằm tách biệt khỏi hành động chính."
         fullWidth
         codeString={`<div className="w-full max-w-md">
-  <Empty className="w-full min-h-[240px]">
-    <EmptyHeader>
-      <EmptyMedia variant="icon">
-        <SearchIcon className="size-4 text-muted-foreground" />
-      </EmptyMedia>
-      <EmptyTitle>No results for &quot;invoice&quot;</EmptyTitle>
-      <EmptyDescription>
-        Try a different search term or clear all filters.
-      </EmptyDescription>
-    </EmptyHeader>
-    <EmptyContent>
-      <EmptyAction>
-        <Button variant="outline">Clear filters</Button>
-      </EmptyAction>
-    </EmptyContent>
-  </Empty>
-</div>
-`}
+    <Empty className="w-full min-h-[240px]">
+      <EmptyHeader>
+        <EmptyMedia variant="icon">
+          <SearchIcon className="size-4 text-muted-foreground" />
+        </EmptyMedia>
+        <EmptyTitle>
+          No results for &quot;invoice&quot;
+        </EmptyTitle>
+        <EmptyDescription>
+          Try a different search term or clear all filters.
+        </EmptyDescription>
+      </EmptyHeader>
+      <EmptyContent>
+        <EmptyAction>
+          <Button variant="outline">Clear filters</Button>
+        </EmptyAction>
+      </EmptyContent>
+    </Empty>
+  </div>`}
       >
         <div className="w-full max-w-md">
           <Empty className="w-full min-h-[240px]">
@@ -376,46 +381,56 @@ function EmptyMicroShowcase() {
         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">
-        <CheckCircle2Icon 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">
-          Giao diện trống tiêu chuẩn
-        </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">
+          <CheckCircle2Icon
+            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">
+            Giao diện trống tiêu chuẩn
+          </h3>
+        </div>
       </div>
+      <p className="text-xs text-muted-foreground leading-relaxed">
+        Dùng \`EmptyPreset\` khi bạn chỉ cần một cấu trúc
+        trạng thái trống mặc định, bao gồm icon, tiêu đề, mô
+        tả và nút hành động. Giúp rút ngắn code đáng kể.
+      </p>
     </div>
-    <p className="text-xs text-muted-foreground leading-relaxed">
-      Dùng \`EmptyPreset\` khi bạn chỉ cần một cấu trúc trạng thái trống mặc định, bao gồm icon, tiêu đề, mô tả và nút hành động. Giúp rút ngắn code đáng kể.
-    </p>
-  </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">
-        <LayersIcon 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">
-          Bố cục tuỳ biến phức tạp
-        </h3>
+    {/* ── 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">
+          <LayersIcon
+            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">
+            Bố cục tuỳ biến phức tạp
+          </h3>
+        </div>
       </div>
+      <p className="text-xs text-muted-foreground leading-relaxed">
+        Dùng các thành phần con khi cần render SVG animation
+        tuỳ chỉnh, hoán đổi vị trí của phần mô tả hoặc nút,
+        thêm nội dung phụ như danh sách liên kết.
+      </p>
     </div>
-    <p className="text-xs text-muted-foreground leading-relaxed">
-      Dùng các thành phần con khi cần render SVG animation tuỳ chỉnh, hoán đổi vị trí của phần mô tả hoặc nút, thêm nội dung phụ như danh sách liên kết.
-    </p>
-  </div>
-</div>`}
+  </div>`}
       >
         <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
           {/* ── Story 1: Macro wins ── */}
@@ -479,8 +494,8 @@ export default function EmptyShowcase() {
         <ShowcaseDocs>
           <DocsP>
             Dùng để thông báo cho người dùng rằng không có dữ liệu để hiển thị ở
-            đây. Nó thường đi kèm với hình ảnh hoặc icon minh họa
-            và một hành động hướng dẫn để lấp đầy nội dung này (ví dụ: Tạo mới).
+            đây. Nó thường đi kèm với hình ảnh hoặc icon minh họa và một hành
+            động hướng dẫn để lấp đầy nội dung này (ví dụ: Tạo mới).
           </DocsP>
         </ShowcaseDocs>
       }

package/src/dev/showcase/hover-card.tsx

@@ -1,14 +1,4 @@
-import { useDevContext } from "../../dev/components/dev-context";
-import {
-  DocsCode,
-  DocsP,
-  ExampleGrid,
-  ExampleSection,
-  Showcase,
-  ShowcaseDocs,
-} from "../../dev/components/showcase";
 import { CalendarIcon } from "lucide-react";
-import { useState } from "react";
 
 import {
   Avatar,
@@ -19,9 +9,18 @@ import { Button } from "../../components/micro/button";
 import {
   HoverCard,
   HoverCardContent,
-  HoverCardTrigger,
   HoverCardPortal,
+  HoverCardTrigger,
 } from "../../components/micro/hover-card";
+import { useDevContext } from "../../dev/components/dev-context";
+import {
+  DocsCode,
+  DocsP,
+  ExampleGrid,
+  ExampleSection,
+  Showcase,
+  ShowcaseDocs,
+} from "../../dev/components/showcase";
 import { type Size } from "../../lib/types";
 
 // ──────────────────────────────────────────────────────────
@@ -65,28 +64,42 @@ function HoverCardMicroShowcase({ globalSize }: { globalSize: Size }) {
         label="Default"
         description="Di chuột qua liên kết để xem bản xem trước. Trigger render dưới dạng Button với variant link."
         codeString={`<HoverCard>
-  <HoverCardTrigger render={<Button variant="link" />}>
-    @nextjs
-  </HoverCardTrigger>
-  <HoverCardPortal><HoverCardContent className="w-80">
-    <div className="flex justify-between space-x-4">
-      <Avatar>
-        <AvatarImage src="https://github.com/vercel.png" alt="Vercel avatar" />
-        <AvatarFallback>VC</AvatarFallback>
-      </Avatar>
-      <div className="space-y-1">
-        <h4 className="text-sm font-semibold">@nextjs</h4>
-        <p className="text-sm">
-          The React Framework – created and maintained by @vercel.
-        </p>
-        <div className="flex items-center pt-2">
-          <CalendarIcon aria-hidden="true" focusable="false" className="mr-2 h-4 w-4 opacity-70" />
-          <span className="text-xs text-muted-foreground">Joined December 2021</span>
+    <HoverCardTrigger render={<Button variant="link" />}>
+      @nextjs
+    </HoverCardTrigger>
+    <HoverCardPortal>
+      <HoverCardContent className="w-80">
+        <div className="flex justify-between space-x-4">
+          <Avatar>
+            <AvatarImage
+              src="https://github.com/vercel.png"
+              alt="Vercel avatar"
+            />
+            <AvatarFallback>VC</AvatarFallback>
+          </Avatar>
+          <div className="space-y-1">
+            <h4 className="text-sm font-semibold">
+              @nextjs
+            </h4>
+            <p className="text-sm">
+              The React Framework – created and maintained
+              by @vercel.
+            </p>
+            <div className="flex items-center pt-2">
+              <CalendarIcon
+                aria-hidden="true"
+                focusable="false"
+                className="mr-2 h-4 w-4 opacity-70"
+              />
+              <span className="text-xs text-muted-foreground">
+                Joined December 2021
+              </span>
+            </div>
+          </div>
         </div>
-      </div>
-    </div>
-  </HoverCardContent></HoverCardPortal>
-</HoverCard>`}
+      </HoverCardContent>
+    </HoverCardPortal>
+  </HoverCard>`}
       >
         <HoverCard>
           <HoverCardTrigger
@@ -108,9 +121,15 @@ function HoverCardMicroShowcase({ globalSize }: { globalSize: Size }) {
         label="Vị trí (Side)"
         description="HoverCard có thể xuất hiện ở bốn phía của trigger thông qua prop side."
         codeString={`<HoverCard>
-  <HoverCardTrigger render={<Button variant="outline">Top</Button>} />
-  <HoverCardPortal><HoverCardContent side="top" className="w-80">...</HoverCardContent></HoverCardPortal>
-</HoverCard>`}
+    <HoverCardTrigger
+      render={<Button variant="outline">Top</Button>}
+    />
+    <HoverCardPortal>
+      <HoverCardContent side="top" className="w-80">
+        ...
+      </HoverCardContent>
+    </HoverCardPortal>
+  </HoverCard>`}
       >
         <div className="flex flex-wrap items-center justify-center gap-4 py-8">
           {(["top", "right", "bottom", "left"] as const).map((side) => (
@@ -175,8 +194,8 @@ function HoverCardMicroShowcase({ globalSize }: { globalSize: Size }) {
           label="Trigger: Button Link"
           description="Trigger render như Button variant link — phù hợp cho text nội tuyến."
           codeString={`<HoverCardTrigger render={<Button variant="link" />}>
-  @nextjs
-</HoverCardTrigger>`}
+    @nextjs
+  </HoverCardTrigger>`}
         >
           <HoverCard>
             <HoverCardTrigger
@@ -197,10 +216,15 @@ function HoverCardMicroShowcase({ globalSize }: { globalSize: Size }) {
           label="Trigger: Thẻ anchor thuần"
           description="Trigger render như thẻ <a> HTML thuần — phù hợp cho liên kết tự nhiên trong văn bản."
           codeString={`<HoverCardTrigger
-  render={<a href="#" className="text-primary underline underline-offset-4" />}
->
-  @nextjs
-</HoverCardTrigger>`}
+    render={
+      <a
+        href="#"
+        className="text-primary underline underline-offset-4"
+      />
+    }
+  >
+    @nextjs
+  </HoverCardTrigger>`}
         >
           <HoverCard>
             <HoverCardTrigger
@@ -229,19 +253,35 @@ function HoverCardMicroShowcase({ globalSize }: { globalSize: Size }) {
         description="Tuỳ chỉnh thời gian trễ trước khi card xuất hiện hoặc biến mất. Props delay và closeDelay đặt trên HoverCardTrigger."
         fullWidth
         codeString={`<HoverCard>
-  <HoverCardTrigger delay={0} render={<Button />}>Tức thì</HoverCardTrigger>
-  <HoverCardPortal><HoverCardContent>...</HoverCardContent></HoverCardPortal>
-</HoverCard>
+    <HoverCardTrigger delay={0} render={<Button />}>
+      Tức thì
+    </HoverCardTrigger>
+    <HoverCardPortal>
+      <HoverCardContent>...</HoverCardContent>
+    </HoverCardPortal>
+  </HoverCard>
 
-<HoverCard>
-  <HoverCardTrigger delay={500} render={<Button />}>Mặc định (500ms)</HoverCardTrigger>
-  <HoverCardPortal><HoverCardContent>...</HoverCardContent></HoverCardPortal>
-</HoverCard>
+  <HoverCard>
+    <HoverCardTrigger delay={500} render={<Button />}>
+      Mặc định (500ms)
+    </HoverCardTrigger>
+    <HoverCardPortal>
+      <HoverCardContent>...</HoverCardContent>
+    </HoverCardPortal>
+  </HoverCard>
 
-<HoverCard>
-  <HoverCardTrigger delay={1500} closeDelay={500} render={<Button />}>Chậm (1500ms)</HoverCardTrigger>
-  <HoverCardPortal><HoverCardContent>...</HoverCardContent></HoverCardPortal>
-</HoverCard>`}
+  <HoverCard>
+    <HoverCardTrigger
+      delay={1500}
+      closeDelay={500}
+      render={<Button />}
+    >
+      Chậm (1500ms)
+    </HoverCardTrigger>
+    <HoverCardPortal>
+      <HoverCardContent>...</HoverCardContent>
+    </HoverCardPortal>
+  </HoverCard>`}
       >
         <div className="grid grid-cols-1 md:grid-cols-3 gap-4 w-full">
           <HoverCard>