gladvn 0.2.17 → 0.2.18

package/src/dev/showcase/pagination.tsx

@@ -1,13 +1,3 @@
-import { useDevContext } from "../../dev/components/dev-context";
-import {
-  DocsCode,
-  DocsH3,
-  DocsP,
-  ExampleGrid,
-  ExampleSection,
-  Showcase,
-  ShowcaseDocs,
-} from "../../dev/components/showcase";
 import { useState } from "react";
 
 import { PaginationPreset } from "../../components/macro/pagination-preset";
@@ -20,6 +10,16 @@ import {
   PaginationNext,
   PaginationPrevious,
 } from "../../components/micro/pagination";
+import { useDevContext } from "../../dev/components/dev-context";
+import {
+  DocsCode,
+  DocsH3,
+  DocsP,
+  ExampleGrid,
+  ExampleSection,
+  Showcase,
+  ShowcaseDocs,
+} from "../../dev/components/showcase";
 import { type Size } from "../../lib/types";
 
 // ──────────────────────────────────────────────────────────
@@ -34,15 +34,14 @@ function PaginationMacroShowcase({ globalSize }: { globalSize: Size }) {
         <ExampleSection
           label="Tiêu chuẩn (Standard)"
           description="Phân trang cơ bản với state điều khiển."
-          codeString={`const [currentPage, setCurrentPage] = useState(1);
-
-return (
+          codeString={`const [currentPage, setCurrentPage] = useState(1); return
+  (
   <PaginationPreset
     currentPage={currentPage}
     totalPages={10}
     onPageChange={setCurrentPage}
   />
-);`}
+  );`}
         >
           <PaginationPreset
             currentPage={currentPage}
@@ -99,34 +98,29 @@ function PaginationMicroShowcase({ globalSize }: { globalSize: Size }) {
         label="Cơ bản (Default)"
         description="Lắp ráp thủ công các item và link. Hỗ trợ prop size."
         codeString={`<Pagination>
-  <PaginationContent>
-    <PaginationItem>
-      <PaginationPrevious href="#" />
-    </PaginationItem>
-    <PaginationItem>
-      <PaginationLink href="#">
-        1
-      </PaginationLink>
-    </PaginationItem>
-    <PaginationItem>
-      <PaginationLink href="#" isActive>
-        2
-      </PaginationLink>
-    </PaginationItem>
-    <PaginationItem>
-      <PaginationLink href="#">
-        3
-      </PaginationLink>
-    </PaginationItem>
-    <PaginationItem>
-      <PaginationEllipsis />
-    </PaginationItem>
-    <PaginationItem>
-      <PaginationNext href="#" />
-    </PaginationItem>
-  </PaginationContent>
-</Pagination>
-`}
+    <PaginationContent>
+      <PaginationItem>
+        <PaginationPrevious href="#" />
+      </PaginationItem>
+      <PaginationItem>
+        <PaginationLink href="#">1</PaginationLink>
+      </PaginationItem>
+      <PaginationItem>
+        <PaginationLink href="#" isActive>
+          2
+        </PaginationLink>
+      </PaginationItem>
+      <PaginationItem>
+        <PaginationLink href="#">3</PaginationLink>
+      </PaginationItem>
+      <PaginationItem>
+        <PaginationEllipsis />
+      </PaginationItem>
+      <PaginationItem>
+        <PaginationNext href="#" />
+      </PaginationItem>
+    </PaginationContent>
+  </Pagination>`}
       >
         <Pagination>
           <PaginationContent>
@@ -163,38 +157,76 @@ function PaginationMicroShowcase({ globalSize }: { globalSize: Size }) {
         description="So sánh nhanh khi nào dùng Micro và 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">
-        <svg xmlns="http://www.w3.org/2000/svg" className="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
-      </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ử lý tự động</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">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="size-4"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            aria-hidden="true"
+          >
+            <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
+          </svg>
+        </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ử lý tự động
+          </h3>
+        </div>
       </div>
+      <p className="text-xs text-muted-foreground leading-relaxed">
+        Dùng Preset khi bạn chỉ muốn truyền vào{" "}
+        <DocsCode>currentPage</DocsCode> và{" "}
+        <DocsCode>totalPages</DocsCode> để tự động sinh ra
+        UI phân trang chuẩn xác (bao gồm dấu ba chấm).
+      </p>
     </div>
-    <p className="text-xs text-muted-foreground leading-relaxed">
-      Dùng Preset khi bạn chỉ muốn truyền vào <DocsCode>currentPage</DocsCode> và <DocsCode>totalPages</DocsCode> để tự động sinh ra UI phân trang chuẩn xác (bao gồm dấu ba chấm).
-    </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">
-        <svg xmlns="http://www.w3.org/2000/svg" className="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
-      </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">Tuỳ biến HTML / SEO</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">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="size-4"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            aria-hidden="true"
+          >
+            <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" />
+          </svg>
+        </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">
+            Tuỳ biến HTML / SEO
+          </h3>
+        </div>
       </div>
+      <p className="text-xs text-muted-foreground leading-relaxed">
+        Dùng Micro khi bạn muốn dùng{" "}
+        <DocsCode>&lt;a&gt;</DocsCode> tag thực sự thay vì
+        onClick (tốt cho SEO) hoặc khi bạn có luồng logic
+        hiển thị pagination đặc biệt.
+      </p>
     </div>
-    <p className="text-xs text-muted-foreground leading-relaxed">
-      Dùng Micro khi bạn muốn dùng <DocsCode>&lt;a&gt;</DocsCode> tag thực sự thay vì onClick (tốt cho SEO) hoặc khi bạn có luồng logic hiển thị pagination đặc biệt.
-    </p>
-  </div>
-</div>`}
+  </div>`}
       >
         <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
           {/* Story 1: Macro wins */}

package/src/dev/showcase/popover.tsx

@@ -1,13 +1,7 @@
-import { useDevContext } from "../../dev/components/dev-context";
-import {
-  DocsP,
-  ExampleGrid,
-  ExampleSection,
-  Showcase,
-  ShowcaseDocs,
-} from "../../dev/components/showcase";
 import { useState } from "react";
 
+import { Bell, Settings } from "lucide-react";
+
 import { Button } from "../../components/micro/button";
 import { Input } from "../../components/micro/input";
 import { Label } from "../../components/micro/label";
@@ -16,12 +10,19 @@ import {
   PopoverContent,
   PopoverDescription,
   PopoverHeader,
+  PopoverPortal,
   PopoverTitle,
   PopoverTrigger,
-  PopoverPortal,
 } from "../../components/micro/popover";
+import { useDevContext } from "../../dev/components/dev-context";
+import {
+  DocsP,
+  ExampleGrid,
+  ExampleSection,
+  Showcase,
+  ShowcaseDocs,
+} from "../../dev/components/showcase";
 import { type Size } from "../../lib/types";
-import { Bell, Settings } from "lucide-react";
 
 // ──────────────────────────────────────────────────────────
 // SECTION 2: Micro Content (không export)
@@ -116,59 +117,72 @@ function PopoverMicroShowcase({ globalSize }: { globalSize: Size }) {
           label="Icon Trigger"
           description="Mở Popover bằng Icon Button."
           codeString={`<div className="flex gap-4">
-  <Popover>
-    <PopoverTrigger
-      render={
-        <Button
-          variant="ghost"
-          size="md"
-          iconOnly
-          className="rounded-full"
+    <Popover>
+      <PopoverTrigger
+        render={
+          <Button
+            variant="ghost"
+            size="md"
+            iconOnly
+            className="rounded-full"
+          >
+            <Bell className="size-4" />
+          </Button>
+        }
+      />
+      <PopoverPortal>
+        <PopoverContent
+          className="w-64"
+          sideOffset={8}
+          align="start"
         >
-          <Bell className="size-4" />
-        </Button>
-      }
-    />
-    <PopoverPortal><PopoverContent className="w-64" sideOffset={8} align="start">
-      <PopoverHeader>
-        <PopoverTitle>Thông báo</PopoverTitle>
-        <PopoverDescription>
-          Bạn có 3 tin nhắn chưa đọc.
-        </PopoverDescription>
-      </PopoverHeader>
-    </PopoverContent></PopoverPortal>
-  </Popover>
+          <PopoverHeader>
+            <PopoverTitle>Thông báo</PopoverTitle>
+            <PopoverDescription>
+              Bạn có 3 tin nhắn chưa đọc.
+            </PopoverDescription>
+          </PopoverHeader>
+        </PopoverContent>
+      </PopoverPortal>
+    </Popover>
 
-  <Popover>
-    <PopoverTrigger
-      render={
-        <Button variant="outline" size="md" iconOnly>
-          <Settings className="size-4" />
-        </Button>
-      }
-    />
-    <PopoverPortal><PopoverContent className="w-56" sideOffset={8}>
-      <PopoverHeader>
-        <PopoverTitle>Cài đặt nhanh</PopoverTitle>
-      </PopoverHeader>
-      <div className="flex flex-col gap-2 mt-2">
-        <Button variant="ghost" className="justify-start">
-          Tài khoản
-        </Button>
-        <Button variant="ghost" className="justify-start">
-          Giao diện
-        </Button>
-        <Button
-          variant="ghost"
-          className="justify-start text-destructive hover:text-destructive"
-        >
-          Đăng xuất
-        </Button>
-      </div>
-    </PopoverContent></PopoverPortal>
-  </Popover>
-</div>
-`}
+    <Popover>
+      <PopoverTrigger
+        render={
+          <Button variant="outline" size="md" iconOnly>
+            <Settings className="size-4" />
+          </Button>
+        }
+      />
+      <PopoverPortal>
+        <PopoverContent className="w-56" sideOffset={8}>
+          <PopoverHeader>
+            <PopoverTitle>Cài đặt nhanh</PopoverTitle>
+          </PopoverHeader>
+          <div className="flex flex-col gap-2 mt-2">
+            <Button
+              variant="ghost"
+              className="justify-start"
+            >
+              Tài khoản
+            </Button>
+            <Button
+              variant="ghost"
+              className="justify-start"
+            >
+              Giao diện
+            </Button>
+            <Button
+              variant="ghost"
+              className="justify-start text-destructive hover:text-destructive"
+            >
+              Đăng xuất
+            </Button>
+          </div>
+        </PopoverContent>
+      </PopoverPortal>
+    </Popover>
+  </div>`}
         >
           <div className="flex gap-4">
             <Popover>
@@ -236,13 +250,19 @@ function PopoverMicroShowcase({ globalSize }: { globalSize: Size }) {
         label="Placement (Vị trí)"
         description="Popover có thể hiển thị ở nhiều hướng khác nhau so với trigger (Top, Bottom, Left, Right)."
         codeString={`<Popover>
-  <PopoverTrigger asChild>
-    <Button variant="outline">top</Button>
-  </PopoverTrigger>
-  <PopoverPortal><PopoverContent side="top" sideOffset={8} className="w-48 text-center text-sm p-4">
-    Hiển thị ở phía <strong>top</strong>
-  </PopoverContent></PopoverPortal>
-</Popover>`}
+    <PopoverTrigger asChild>
+      <Button variant="outline">top</Button>
+    </PopoverTrigger>
+    <PopoverPortal>
+      <PopoverContent
+        side="top"
+        sideOffset={8}
+        className="w-48 text-center text-sm p-4"
+      >
+        Hiển thị ở phía <strong>top</strong>
+      </PopoverContent>
+    </PopoverPortal>
+  </Popover>`}
       >
         <div className="flex flex-wrap items-center justify-center gap-4 py-8">
           {(["top", "right", "bottom", "left"] as const).map((side) => (
@@ -275,28 +295,35 @@ function PopoverMicroShowcase({ globalSize }: { globalSize: Size }) {
       <ExampleSection
         label="Controlled State"
         description="Quản lý trạng thái đóng/mở của Popover thông qua React state (open và onOpenChange)."
-        codeString={`const [isOpen, setIsOpen] = React.useState(false)
-
-return (
+        codeString={`const [isOpen, setIsOpen] = React.useState(false) return (
   <Popover open={isOpen} onOpenChange={setIsOpen}>
     <PopoverTrigger asChild>
-      <Button variant="outline">Toggle Controlled Popover</Button>
+      <Button variant="outline">
+        Toggle Controlled Popover
+      </Button>
     </PopoverTrigger>
-    <PopoverPortal><PopoverContent className="w-80" sideOffset={8}>
-      <PopoverHeader>
-        <PopoverTitle>Controlled Mode</PopoverTitle>
-        <PopoverDescription>
-          Popover này được control bởi state. Bạn có thể đóng nó bằng nút bên dưới hoặc click ra ngoài.
-        </PopoverDescription>
-      </PopoverHeader>
-      <div className="mt-4 flex justify-end">
-        <Button size="sm" color="secondary" onClick={() => setIsOpen(false)}>
-          Đóng Popover
-        </Button>
-      </div>
-    </PopoverContent></PopoverPortal>
+    <PopoverPortal>
+      <PopoverContent className="w-80" sideOffset={8}>
+        <PopoverHeader>
+          <PopoverTitle>Controlled Mode</PopoverTitle>
+          <PopoverDescription>
+            Popover này được control bởi state. Bạn có thể
+            đóng nó bằng nút bên dưới hoặc click ra ngoài.
+          </PopoverDescription>
+        </PopoverHeader>
+        <div className="mt-4 flex justify-end">
+          <Button
+            size="sm"
+            color="secondary"
+            onClick={() => setIsOpen(false)}
+          >
+            Đóng Popover
+          </Button>
+        </div>
+      </PopoverContent>
+    </PopoverPortal>
   </Popover>
-)`}
+  )`}
       >
         <div className="flex items-center gap-4">
           <Popover open={isOpen} onOpenChange={setIsOpen}>