gladvn 0.2.14

package/src/dev/showcase/pagination.tsx

@@ -0,0 +1,312 @@
+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";
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "../../components/micro/pagination";
+import { type Size } from "../../lib/types";
+
+// ──────────────────────────────────────────────────────────
+// SECTION 1: Macro Content
+// ──────────────────────────────────────────────────────────
+function PaginationMacroShowcase({ globalSize }: { globalSize: Size }) {
+  const [currentPage, setCurrentPage] = useState(1);
+
+  return (
+    <div className="space-y-10 mt-6">
+      <ExampleGrid>
+        <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 (
+  <PaginationPreset
+    currentPage={currentPage}
+    totalPages={10}
+    onPageChange={setCurrentPage}
+  />
+);`}
+        >
+          <PaginationPreset
+            currentPage={currentPage}
+            totalPages={10}
+            onPageChange={setCurrentPage}
+            size={globalSize}
+          />
+        </ExampleSection>
+
+        <ExampleSection
+          label="Nhiều trang (Many Pages)"
+          description="Tự động thêm dấu ba chấm (ellipsis) khi số trang lớn."
+          codeString={`<PaginationPreset currentPage={50} totalPages={100} />
+`}
+        >
+          <PaginationPreset
+            currentPage={50}
+            totalPages={100}
+            size={globalSize}
+          />
+        </ExampleSection>
+      </ExampleGrid>
+
+      <ExampleGrid>
+        <ExampleSection
+          label="Trang đầu tiên (First Page)"
+          description="Nút Previous tự động bị mờ đi."
+          codeString={`<PaginationPreset currentPage={1} totalPages={5} />
+`}
+        >
+          <PaginationPreset currentPage={1} totalPages={5} size={globalSize} />
+        </ExampleSection>
+
+        <ExampleSection
+          label="Trang cuối cùng (Last Page)"
+          description="Nút Next tự động bị mờ đi."
+          codeString={`<PaginationPreset currentPage={5} totalPages={5} />
+`}
+        >
+          <PaginationPreset currentPage={5} totalPages={5} size={globalSize} />
+        </ExampleSection>
+      </ExampleGrid>
+    </div>
+  );
+}
+
+// ──────────────────────────────────────────────────────────
+// SECTION 2: Micro Content
+// ──────────────────────────────────────────────────────────
+function PaginationMicroShowcase({ globalSize }: { globalSize: Size }) {
+  return (
+    <div className="space-y-10 mt-6">
+      <ExampleSection
+        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>
+`}
+      >
+        <Pagination>
+          <PaginationContent>
+            <PaginationItem>
+              <PaginationPrevious href="#" size={globalSize} />
+            </PaginationItem>
+            <PaginationItem>
+              <PaginationLink href="#" size={globalSize}>
+                1
+              </PaginationLink>
+            </PaginationItem>
+            <PaginationItem>
+              <PaginationLink href="#" isActive size={globalSize}>
+                2
+              </PaginationLink>
+            </PaginationItem>
+            <PaginationItem>
+              <PaginationLink href="#" size={globalSize}>
+                3
+              </PaginationLink>
+            </PaginationItem>
+            <PaginationItem>
+              <PaginationEllipsis />
+            </PaginationItem>
+            <PaginationItem>
+              <PaginationNext href="#" size={globalSize} />
+            </PaginationItem>
+          </PaginationContent>
+        </Pagination>
+      </ExampleSection>
+
+      <ExampleSection
+        label="🧭 Use Case Comparison"
+        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>
+      </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>
+
+  {/* 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>
+</div>`}
+      >
+        <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>
+              </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>
+
+          {/* 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>
+        </div>
+      </ExampleSection>
+    </div>
+  );
+}
+
+// ──────────────────────────────────────────────────────────
+// SECTION 3: Entry point
+// ──────────────────────────────────────────────────────────
+export default function PaginationShowcase() {
+  const { size: globalSize } = useDevContext();
+  return (
+    <Showcase
+      title="Pagination"
+      description="Thanh phân trang với điều hướng trước/sau, tự động rút gọn dấu ba chấm."
+      generalConcept={
+        <ShowcaseDocs>
+          <DocsH3>Khi nào nên dùng Macro</DocsH3>
+          <DocsP>
+            <DocsCode>PaginationPreset</DocsCode> tự động tính toán số trang,
+            dấu ba chấm (ellipsis) và vô hiệu hóa nút Prev/Next. Bạn chỉ cần
+            truyền <DocsCode>currentPage</DocsCode> và{" "}
+            <DocsCode>totalPages</DocsCode>.
+          </DocsP>
+          <DocsH3>Khi nào nên dùng Micro</DocsH3>
+          <DocsP>
+            Dùng <DocsCode>Pagination</DocsCode> khi bạn muốn tự kiểm soát cấu
+            trúc HTML, thay đổi icon, hoặc dùng phân trang dạng tĩnh (như SEO
+            link /page/1, /page/2) thay vì phụ thuộc vào React state.
+          </DocsP>
+        </ShowcaseDocs>
+      }
+      tabs={[
+        {
+          label: "Micro (Primitive)",
+          content: <PaginationMicroShowcase globalSize={globalSize} />,
+        },
+        {
+          label: "Macro (Preset)",
+          content: <PaginationMacroShowcase globalSize={globalSize} />,
+        },
+      ]}
+    />
+  );
+}

package/src/dev/showcase/popover.tsx

@@ -0,0 +1,374 @@
+import { useDevContext } from "../../dev/components/dev-context";
+import {
+  DocsP,
+  ExampleGrid,
+  ExampleSection,
+  Showcase,
+  ShowcaseDocs,
+} from "../../dev/components/showcase";
+import { useState } from "react";
+
+import { Button } from "../../components/micro/button";
+import { Input } from "../../components/micro/input";
+import { Label } from "../../components/micro/label";
+import {
+  Popover,
+  PopoverContent,
+  PopoverDescription,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverTrigger,
+  PopoverPortal,
+} from "../../components/micro/popover";
+import { type Size } from "../../lib/types";
+import { Bell, Settings } from "lucide-react";
+
+// ──────────────────────────────────────────────────────────
+// SECTION 2: Micro Content (không export)
+// ──────────────────────────────────────────────────────────
+function PopoverMicroShowcase({ globalSize }: { globalSize: Size }) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <div className="space-y-10 mt-6">
+      <ExampleGrid>
+        <ExampleSection
+          label="Default"
+          description="Cửa sổ Popover tiêu chuẩn."
+          codeString={`<Popover>
+  <PopoverTrigger
+    render={
+      <Button variant="outline" size="${globalSize}">
+        Open Popover
+      </Button>
+    }
+  />
+  <PopoverPortal><PopoverContent className="w-80" sideOffset={8}>
+    <PopoverHeader>
+      <PopoverTitle>Dimensions</PopoverTitle>
+      <PopoverDescription>
+        Cài đặt kích thước cho layer.
+      </PopoverDescription>
+    </PopoverHeader>
+    <div className="grid gap-4 mt-4">
+      <div className="grid grid-cols-3 items-center gap-4">
+        <Label htmlFor="width">Width</Label>
+        <Input
+          id="width"
+          defaultValue="100%"
+          className="col-span-2 h-8"
+        />
+      </div>
+      <div className="grid grid-cols-3 items-center gap-4">
+        <Label htmlFor="height">Height</Label>
+        <Input
+          id="height"
+          defaultValue="200px"
+          className="col-span-2 h-8"
+        />
+      </div>
+    </div>
+  </PopoverContent></PopoverPortal>
+</Popover>
+`}
+        >
+          <Popover>
+            <PopoverTrigger
+              render={
+                <Button variant="outline" size={globalSize}>
+                  Open Popover
+                </Button>
+              }
+            />
+
+            <PopoverPortal>
+              <PopoverContent className="w-80" sideOffset={8}>
+                <PopoverHeader>
+                  <PopoverTitle>Dimensions</PopoverTitle>
+                  <PopoverDescription>
+                    Cài đặt kích thước cho layer.
+                  </PopoverDescription>
+                </PopoverHeader>
+                <div className="grid gap-4 mt-4">
+                  <div className="grid grid-cols-3 items-center gap-4">
+                    <Label htmlFor="width">Width</Label>
+                    <Input
+                      id="width"
+                      defaultValue="100%"
+                      className="col-span-2 h-8"
+                    />
+                  </div>
+                  <div className="grid grid-cols-3 items-center gap-4">
+                    <Label htmlFor="height">Height</Label>
+                    <Input
+                      id="height"
+                      defaultValue="200px"
+                      className="col-span-2 h-8"
+                    />
+                  </div>
+                </div>
+              </PopoverContent>
+            </PopoverPortal>
+          </Popover>
+        </ExampleSection>
+
+        <ExampleSection
+          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"
+        >
+          <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>
+
+  <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>
+              <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">
+                  <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>
+        </ExampleSection>
+      </ExampleGrid>
+
+      <ExampleSection
+        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>`}
+      >
+        <div className="flex flex-wrap items-center justify-center gap-4 py-8">
+          {(["top", "right", "bottom", "left"] as const).map((side) => (
+            <Popover key={side}>
+              <PopoverTrigger
+                render={
+                  <Button
+                    variant="outline"
+                    size={globalSize}
+                    className="capitalize"
+                  >
+                    {side}
+                  </Button>
+                }
+              />
+              <PopoverPortal>
+                <PopoverContent
+                  side={side}
+                  sideOffset={8}
+                  className="w-48 text-center text-sm p-4"
+                >
+                  Hiển thị ở phía <strong className="capitalize">{side}</strong>
+                </PopoverContent>
+              </PopoverPortal>
+            </Popover>
+          ))}
+        </div>
+      </ExampleSection>
+
+      <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 (
+  <Popover open={isOpen} onOpenChange={setIsOpen}>
+    <PopoverTrigger asChild>
+      <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>
+  </Popover>
+)`}
+      >
+        <div className="flex items-center gap-4">
+          <Popover open={isOpen} onOpenChange={setIsOpen}>
+            <PopoverTrigger
+              render={
+                <Button variant="outline" size={globalSize}>
+                  Toggle Controlled Popover
+                </Button>
+              }
+            />
+            <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="text-sm text-muted-foreground">
+            Trạng thái hiện tại:{" "}
+            <strong
+              data-active={isOpen ? "" : undefined}
+              className="data-active:text-primary"
+            >
+              {isOpen ? "Mở" : "Đóng"}
+            </strong>
+          </div>
+        </div>
+      </ExampleSection>
+    </div>
+  );
+}
+
+// ──────────────────────────────────────────────────────────
+// SECTION 3: Entry point (export default)
+// ──────────────────────────────────────────────────────────
+export default function PopoverShowcase() {
+  const { size: globalSize } = useDevContext();
+  return (
+    <Showcase
+      title="Popover"
+      description="Popup nội dung phong phú, kích hoạt bằng một nút hoặc trigger."
+      generalConcept={
+        <ShowcaseDocs>
+          <DocsP>
+            Popover là một floating panel hiển thị khi người dùng click vào một
+            phần tử (trigger). Khác với Tooltip (hiển thị khi hover), Popover
+            dùng cho những nội dung phong phú hơn, chứa các tương tác phức tạp
+            như form, danh sách cài đặt, v.v.
+          </DocsP>
+        </ShowcaseDocs>
+      }
+      tabs={[
+        {
+          label: "Micro (Primitive)",
+          content: <PopoverMicroShowcase globalSize={globalSize} />,
+        },
+      ]}
+    />
+  );
+}