gladvn 0.2.14

package/src/dev/showcase/separator.tsx

@@ -0,0 +1,126 @@
+import { Separator } from "../../components/micro/separator";
+import {
+  DocsCode,
+  DocsH3,
+  DocsP,
+  ExampleSection,
+  Showcase,
+  ShowcaseDocs,
+} from "../../dev/components/showcase";
+
+// ──────────────────────────────────────────────────────────
+// SECTION 1: Micro Content (Only Micro exists)
+// ──────────────────────────────────────────────────────────
+function SeparatorMicroShowcase() {
+  return (
+    <div className="space-y-10 mt-6">
+      <ExampleSection
+        label="Ngang (Horizontal)"
+        description="Sử dụng để phân tách các khối nội dung từ trên xuống dưới."
+        fullWidth
+        codeString={`<div className="w-full max-w-sm rounded-lg border border-border bg-card p-6">
+  <div className="space-y-1">
+    <h4 className="text-sm font-medium leading-none">
+      Gladcn UI
+    </h4>
+    <p className="text-sm text-muted-foreground">
+      Bộ UI Component mã nguồn mở.
+    </p>
+  </div>
+  <Separator className="my-4" />
+  <div className="text-sm text-muted-foreground">
+    Cập nhật lần cuối: Hôm nay
+  </div>
+</div>
+`}
+      >
+        <div className="w-full max-w-sm rounded-lg border border-border bg-card p-6">
+          <div className="space-y-1">
+            <h4 className="text-sm font-medium leading-none">Gladcn UI</h4>
+            <p className="text-sm text-muted-foreground">
+              Bộ UI Component mã nguồn mở.
+            </p>
+          </div>
+          <Separator className="my-4" />
+          <div className="text-sm text-muted-foreground">
+            Cập nhật lần cuối: Hôm nay
+          </div>
+        </div>
+      </ExampleSection>
+
+      <ExampleSection
+        label="Dọc (Vertical)"
+        description="Sử dụng để phân tách các mục nằm ngang (như menu, thanh công cụ)."
+        codeString={`<div className="flex h-5 items-center space-x-4 text-sm">
+  <div className="font-medium hover:underline cursor-pointer">Blog</div>
+  <Separator orientation="vertical" />
+  <div className="font-medium hover:underline cursor-pointer">Tài liệu</div>
+  <Separator orientation="vertical" />
+  <div className="font-medium hover:underline cursor-pointer">Mã nguồn</div>
+</div>
+`}
+      >
+        <div className="flex h-5 items-center space-x-4 text-sm">
+          <div className="font-medium hover:underline cursor-pointer">Blog</div>
+          <Separator orientation="vertical" />
+          <div className="font-medium hover:underline cursor-pointer">
+            Tài liệu
+          </div>
+          <Separator orientation="vertical" />
+          <div className="font-medium hover:underline cursor-pointer">
+            Mã nguồn
+          </div>
+        </div>
+      </ExampleSection>
+      <ExampleSection
+        label="Decorative vs Semantic"
+        description='Semantic (mặc định) được screen reader đọc. Truyền aria-hidden="true" khi Separator chỉ mang tính trang trí thuần.'
+        codeString={`{/* Semantic — screen reader đọc được */}
+<Separator />
+
+{/* Decorative — chỉ là đường kẻ trực quan */}
+<Separator aria-hidden="true" />`}
+      >
+        <div className="flex flex-col gap-6 w-full max-w-sm">
+          <div>
+            <p className="text-xs text-muted-foreground mb-2">
+              Semantic (mặc định — screen reader nhận ra)
+            </p>
+            <Separator />
+          </div>
+          <div>
+            <p className="text-xs text-muted-foreground mb-2">
+              Decorative — <code className="text-xs">aria-hidden="true"</code>
+            </p>
+            <Separator aria-hidden="true" />
+          </div>
+        </div>
+      </ExampleSection>
+    </div>
+  );
+}
+
+// ──────────────────────────────────────────────────────────
+// SECTION 3: Entry point
+// ──────────────────────────────────────────────────────────
+export default function SeparatorShowcase() {
+  return (
+    <Showcase
+      title="Separator"
+      description="Thành phần phân cách trực quan hoặc ngữ nghĩa giữa các khối nội dung (Đường kẻ)."
+      generalConcept={
+        <ShowcaseDocs>
+          <DocsH3>Separator (Phân cách)</DocsH3>
+          <DocsP>
+            <DocsCode>Separator</DocsCode> không có phiên bản Macro vì bản chất
+            nó chỉ là một đường kẻ phân tách giao diện. Mặc định là đường kẻ
+            ngang (<DocsCode>orientation="horizontal"</DocsCode>).
+          </DocsP>
+        </ShowcaseDocs>
+      }
+      tabs={[
+        { label: "Micro (Primitive)", content: <SeparatorMicroShowcase /> },
+      ]}
+    />
+  );
+}

package/src/dev/showcase/sheet.tsx

@@ -0,0 +1,566 @@
+import { useDevContext } from "../../dev/components/dev-context";
+import {
+  DocsCode,
+  DocsP,
+  ExampleGrid,
+  ExampleSection,
+  Showcase,
+  ShowcaseDocs,
+} from "../../dev/components/showcase";
+import { FilterIcon, PanelRightIcon, SettingsIcon } from "lucide-react";
+import { useState } from "react";
+
+import { Button } from "../../components/micro/button";
+import { Input } from "../../components/micro/input";
+import { Label } from "../../components/micro/label";
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+  SheetPortal,
+} from "../../components/micro/sheet";
+import { type Size } from "../../lib/types";
+
+// ──────────────────────────────────────────────────────────
+// SECTION 2: Micro Content (không export)
+// ──────────────────────────────────────────────────────────
+function SheetMicroShowcase({ globalSize }: { globalSize: Size }) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div className="space-y-10 mt-6">
+      {/* ── Sides ── */}
+      <ExampleSection
+        label="Hướng trượt (Side)"
+        description="Sheet có thể trượt ra từ bốn cạnh: right (mặc định), left, top, bottom."
+        codeString={`<Sheet>
+  <SheetTrigger render={<Button variant="outline" className="capitalize">right</Button>} />
+  <SheetPortal><SheetContent side="right">
+    <SheetHeader>
+      <SheetTitle>Edit Profile</SheetTitle>
+      <SheetDescription>
+        Thay đổi thông tin tài khoản của bạn và nhấn Lưu.
+      </SheetDescription>
+    </SheetHeader>
+    <div className="grid gap-4 py-4 px-4">
+      <div className="grid grid-cols-4 items-center gap-4">
+        <Label htmlFor="name-right" className="text-right">
+          Tên
+        </Label>
+        <Input id="name-right" defaultValue="Pedro Duarte" className="col-span-3" />
+      </div>
+      <div className="grid grid-cols-4 items-center gap-4">
+        <Label htmlFor="username-right" className="text-right">
+          Username
+        </Label>
+        <Input id="username-right" defaultValue="@peduarte" className="col-span-3" />
+      </div>
+    </div>
+    <SheetFooter>
+      <SheetClose render={<Button variant="outline" />}>
+        Huỷ
+      </SheetClose>
+      <Button>Lưu thay đổi</Button>
+    </SheetFooter>
+  </SheetContent></SheetPortal>
+</Sheet>`}
+      >
+        <div className="grid grid-cols-2 gap-2">
+          {/* top */}
+          <Sheet>
+            <SheetTrigger
+              render={
+                <Button
+                  variant="outline"
+                  size={globalSize}
+                  className="w-full"
+                />
+              }
+            >
+              top
+            </SheetTrigger>
+
+            <SheetPortal>
+              <SheetContent side="top">
+                <SheetHeader>
+                  <SheetTitle>Edit Profile</SheetTitle>
+                  <SheetDescription>
+                    Thay đổi thông tin tài khoản của bạn và nhấn Lưu.
+                  </SheetDescription>
+                </SheetHeader>
+                <div className="grid gap-4 py-4 px-4">
+                  <div className="grid grid-cols-4 items-center gap-4">
+                    <Label htmlFor="name-top" className="text-right">
+                      Tên
+                    </Label>
+                    <Input
+                      id="name-top"
+                      defaultValue="Pedro Duarte"
+                      className="col-span-3"
+                    />
+                  </div>
+                </div>
+                <SheetFooter>
+                  <SheetClose
+                    render={<Button variant="outline" size={globalSize} />}
+                  >
+                    Huỷ
+                  </SheetClose>
+                  <Button size={globalSize}>Lưu thay đổi</Button>
+                </SheetFooter>
+              </SheetContent>
+            </SheetPortal>
+          </Sheet>
+
+          {/* right */}
+          <Sheet>
+            <SheetTrigger
+              render={
+                <Button
+                  variant="outline"
+                  size={globalSize}
+                  className="w-full"
+                />
+              }
+            >
+              right
+            </SheetTrigger>
+
+            <SheetPortal>
+              <SheetContent side="right">
+                <SheetHeader>
+                  <SheetTitle>Edit Profile</SheetTitle>
+                  <SheetDescription>
+                    Thay đổi thông tin tài khoản của bạn và nhấn Lưu.
+                  </SheetDescription>
+                </SheetHeader>
+                <div className="grid gap-4 py-4 px-4">
+                  <div className="grid grid-cols-4 items-center gap-4">
+                    <Label htmlFor="name-right" className="text-right">
+                      Tên
+                    </Label>
+                    <Input
+                      id="name-right"
+                      defaultValue="Pedro Duarte"
+                      className="col-span-3"
+                    />
+                  </div>
+                  <div className="grid grid-cols-4 items-center gap-4">
+                    <Label htmlFor="username-right" className="text-right">
+                      Username
+                    </Label>
+                    <Input
+                      id="username-right"
+                      defaultValue="@peduarte"
+                      className="col-span-3"
+                    />
+                  </div>
+                </div>
+                <SheetFooter>
+                  <SheetClose
+                    render={<Button variant="outline" size={globalSize} />}
+                  >
+                    Huỷ
+                  </SheetClose>
+                  <Button size={globalSize}>Lưu thay đổi</Button>
+                </SheetFooter>
+              </SheetContent>
+            </SheetPortal>
+          </Sheet>
+
+          {/* bottom */}
+          <Sheet>
+            <SheetTrigger
+              render={
+                <Button
+                  variant="outline"
+                  size={globalSize}
+                  className="w-full"
+                />
+              }
+            >
+              bottom
+            </SheetTrigger>
+
+            <SheetPortal>
+              <SheetContent side="bottom">
+                <SheetHeader>
+                  <SheetTitle>Edit Profile</SheetTitle>
+                  <SheetDescription>
+                    Thay đổi thông tin tài khoản của bạn và nhấn Lưu.
+                  </SheetDescription>
+                </SheetHeader>
+                <div className="grid gap-4 py-4 px-4">
+                  <div className="grid grid-cols-4 items-center gap-4">
+                    <Label htmlFor="name-bottom" className="text-right">
+                      Tên
+                    </Label>
+                    <Input
+                      id="name-bottom"
+                      defaultValue="Pedro Duarte"
+                      className="col-span-3"
+                    />
+                  </div>
+                </div>
+                <SheetFooter>
+                  <SheetClose
+                    render={<Button variant="outline" size={globalSize} />}
+                  >
+                    Huỷ
+                  </SheetClose>
+                  <Button size={globalSize}>Lưu thay đổi</Button>
+                </SheetFooter>
+              </SheetContent>
+            </SheetPortal>
+          </Sheet>
+
+          {/* left */}
+          <Sheet>
+            <SheetTrigger
+              render={
+                <Button
+                  variant="outline"
+                  size={globalSize}
+                  className="w-full"
+                />
+              }
+            >
+              left
+            </SheetTrigger>
+
+            <SheetPortal>
+              <SheetContent side="left">
+                <SheetHeader>
+                  <SheetTitle>Edit Profile</SheetTitle>
+                  <SheetDescription>
+                    Thay đổi thông tin tài khoản của bạn và nhấn Lưu.
+                  </SheetDescription>
+                </SheetHeader>
+                <div className="grid gap-4 py-4 px-4">
+                  <div className="grid grid-cols-4 items-center gap-4">
+                    <Label htmlFor="name-left" className="text-right">
+                      Tên
+                    </Label>
+                    <Input
+                      id="name-left"
+                      defaultValue="Pedro Duarte"
+                      className="col-span-3"
+                    />
+                  </div>
+                  <div className="grid grid-cols-4 items-center gap-4">
+                    <Label htmlFor="username-left" className="text-right">
+                      Username
+                    </Label>
+                    <Input
+                      id="username-left"
+                      defaultValue="@peduarte"
+                      className="col-span-3"
+                    />
+                  </div>
+                </div>
+                <SheetFooter>
+                  <SheetClose
+                    render={<Button variant="outline" size={globalSize} />}
+                  >
+                    Huỷ
+                  </SheetClose>
+                  <Button size={globalSize}>Lưu thay đổi</Button>
+                </SheetFooter>
+              </SheetContent>
+            </SheetPortal>
+          </Sheet>
+        </div>
+      </ExampleSection>
+
+      {/* ── showCloseButton ── */}
+      <ExampleGrid>
+        <ExampleSection
+          label="Có nút đóng (mặc định)"
+          description="showCloseButton={true} — nút X tự động hiển thị ở góc trên phải."
+          codeString={`<Sheet>
+  <SheetTrigger render={<Button variant="outline" />}>
+    <PanelRightIcon />
+    Mở Sheet
+  </SheetTrigger>
+  <SheetPortal><SheetContent side="right">
+    <SheetHeader>
+      <SheetTitle>Có nút đóng</SheetTitle>
+      <SheetDescription>Nút X xuất hiện tự động.</SheetDescription>
+    </SheetHeader>
+  </SheetContent></SheetPortal>
+</Sheet>`}
+        >
+          <Sheet>
+            <SheetTrigger
+              render={<Button variant="outline" size={globalSize} />}
+            >
+              <PanelRightIcon aria-hidden="true" />
+              Mở Sheet
+            </SheetTrigger>
+
+            <SheetPortal>
+              <SheetContent side="right">
+                <SheetHeader>
+                  <SheetTitle>Có nút đóng</SheetTitle>
+                  <SheetDescription>Nút X xuất hiện tự động.</SheetDescription>
+                </SheetHeader>
+              </SheetContent>
+            </SheetPortal>
+          </Sheet>
+        </ExampleSection>
+
+        <ExampleSection
+          label="Ẩn nút đóng"
+          description="showCloseButton={false} — dùng khi muốn tự control nút đóng bên trong nội dung."
+          codeString={`<Sheet>
+  <SheetTrigger render={<Button variant="outline" />}>
+    <PanelRightIcon />
+    Không có X
+  </SheetTrigger>
+  <SheetPortal><SheetContent side="right" showCloseButton={false}>
+    <SheetHeader>
+      <SheetTitle>Ẩn nút đóng</SheetTitle>
+      <SheetDescription>
+        Consumer tự render nút đóng trong footer.
+      </SheetDescription>
+    </SheetHeader>
+    <SheetFooter>
+      <SheetClose render={<Button variant="outline" className="w-full" />}>
+        Đóng thủ công
+      </SheetClose>
+    </SheetFooter>
+  </SheetContent></SheetPortal>
+</Sheet>`}
+        >
+          <Sheet>
+            <SheetTrigger
+              render={<Button variant="outline" size={globalSize} />}
+            >
+              <PanelRightIcon aria-hidden="true" />
+              Không có X
+            </SheetTrigger>
+
+            <SheetPortal>
+              <SheetContent side="right" showCloseButton={false}>
+                <SheetHeader>
+                  <SheetTitle>Ẩn nút đóng</SheetTitle>
+                  <SheetDescription>
+                    Consumer tự render nút đóng trong footer.
+                  </SheetDescription>
+                </SheetHeader>
+                <SheetFooter>
+                  <SheetClose
+                    render={
+                      <Button
+                        variant="outline"
+                        size={globalSize}
+                        className="w-full"
+                      />
+                    }
+                  >
+                    Đóng thủ công
+                  </SheetClose>
+                </SheetFooter>
+              </SheetContent>
+            </SheetPortal>
+          </Sheet>
+        </ExampleSection>
+      </ExampleGrid>
+
+      {/* ── Controlled ── */}
+      <ExampleSection
+        label="Controlled State"
+        description="Quản lý trạng thái đóng/mở qua React state với open và onOpenChange."
+        codeString={`const [open, setOpen] = useState(false);
+
+<div className="flex items-center gap-4">
+  <Sheet open={open} onOpenChange={setOpen}>
+    <SheetTrigger render={<Button variant="outline" />}>
+      <SettingsIcon />
+      Toggle Controlled
+    </SheetTrigger>
+    <SheetPortal><SheetContent side="right">
+      <SheetHeader>
+        <SheetTitle>Controlled Mode</SheetTitle>
+        <SheetDescription>
+          Sheet được điều khiển hoàn toàn bởi React state.
+        </SheetDescription>
+      </SheetHeader>
+      <SheetFooter>
+        <Button onClick={() => setOpen(false)}>
+          Đóng bằng state
+        </Button>
+      </SheetFooter>
+    </SheetContent></SheetPortal>
+  </Sheet>
+  <p className="text-sm text-muted-foreground">
+    Trạng thái:{" "}
+    <strong
+      data-active={open ? "" : undefined}
+      className="data-active:text-primary"
+    >
+      {open ? "Mở" : "Đóng"}
+    </strong>
+  </p>
+</div>`}
+      >
+        <div className="flex items-center gap-4">
+          <Sheet open={open} onOpenChange={setOpen}>
+            <SheetTrigger
+              render={<Button variant="outline" size={globalSize} />}
+            >
+              <SettingsIcon aria-hidden="true" />
+              Toggle Controlled
+            </SheetTrigger>
+
+            <SheetPortal>
+              <SheetContent side="right">
+                <SheetHeader>
+                  <SheetTitle>Controlled Mode</SheetTitle>
+                  <SheetDescription>
+                    Sheet được điều khiển hoàn toàn bởi React state.
+                  </SheetDescription>
+                </SheetHeader>
+                <SheetFooter>
+                  <Button size={globalSize} onClick={() => setOpen(false)}>
+                    Đóng bằng state
+                  </Button>
+                </SheetFooter>
+              </SheetContent>
+            </SheetPortal>
+          </Sheet>
+          <p className="text-sm text-muted-foreground">
+            Trạng thái:{" "}
+            <strong
+              data-active={open ? "" : undefined}
+              className="data-active:text-primary"
+            >
+              {open ? "Mở" : "Đóng"}
+            </strong>
+          </p>
+        </div>
+      </ExampleSection>
+
+      {/* ── Real-world: Filter Panel ── */}
+      <ExampleSection
+        label="Use case — Filter Panel"
+        description="Sheet dùng làm bảng lọc dữ liệu bên phải — pattern phổ biến trong dashboard, table view."
+        codeString={`<Sheet>
+  <SheetTrigger render={<Button variant="outline" />}>
+    <FilterIcon />
+    Lọc dữ liệu
+  </SheetTrigger>
+  <SheetPortal><SheetContent side="right">
+    <SheetHeader>
+      <SheetTitle>Bộ lọc</SheetTitle>
+      <SheetDescription>
+        Tinh chỉnh kết quả hiển thị theo điều kiện.
+      </SheetDescription>
+    </SheetHeader>
+    <div className="flex flex-col gap-4 p-4">
+      <div className="flex flex-col gap-2">
+        <Label htmlFor="filter-status">Trạng thái</Label>
+        <Input id="filter-status" placeholder="Tất cả" />
+      </div>
+      <div className="flex flex-col gap-2">
+        <Label htmlFor="filter-date-from">Từ ngày</Label>
+        <Input id="filter-date-from" type="date" />
+      </div>
+      <div className="flex flex-col gap-2">
+        <Label htmlFor="filter-date-to">Đến ngày</Label>
+        <Input id="filter-date-to" type="date" />
+      </div>
+    </div>
+    <SheetFooter>
+      <SheetClose render={<Button variant="outline" />}>
+        Xoá bộ lọc
+      </SheetClose>
+      <Button>Áp dụng</Button>
+    </SheetFooter>
+  </SheetContent></SheetPortal>
+</Sheet>`}
+      >
+        <Sheet>
+          <SheetTrigger render={<Button variant="outline" size={globalSize} />}>
+            <FilterIcon aria-hidden="true" />
+            Lọc dữ liệu
+          </SheetTrigger>
+
+          <SheetPortal>
+            <SheetContent side="right">
+              <SheetHeader>
+                <SheetTitle>Bộ lọc</SheetTitle>
+                <SheetDescription>
+                  Tinh chỉnh kết quả hiển thị theo điều kiện.
+                </SheetDescription>
+              </SheetHeader>
+              <div className="flex flex-col gap-4 p-4">
+                <div className="flex flex-col gap-2">
+                  <Label htmlFor="filter-status">Trạng thái</Label>
+                  <Input id="filter-status" placeholder="Tất cả" />
+                </div>
+                <div className="flex flex-col gap-2">
+                  <Label htmlFor="filter-date-from">Từ ngày</Label>
+                  <Input id="filter-date-from" type="date" />
+                </div>
+                <div className="flex flex-col gap-2">
+                  <Label htmlFor="filter-date-to">Đến ngày</Label>
+                  <Input id="filter-date-to" type="date" />
+                </div>
+              </div>
+              <SheetFooter>
+                <SheetClose
+                  render={<Button variant="outline" size={globalSize} />}
+                >
+                  Xoá bộ lọc
+                </SheetClose>
+                <Button size={globalSize}>Áp dụng</Button>
+              </SheetFooter>
+            </SheetContent>
+          </SheetPortal>
+        </Sheet>
+      </ExampleSection>
+    </div>
+  );
+}
+
+// ──────────────────────────────────────────────────────────
+// SECTION 3: Entry point (export default)
+// ──────────────────────────────────────────────────────────
+export default function SheetShowcase() {
+  const { size: globalSize } = useDevContext();
+  return (
+    <Showcase
+      title="Sheet"
+      description="Panel trượt từ cạnh màn hình — mở rộng Dialog để hiển thị nội dung bổ sung mà không rời trang."
+      generalConcept={
+        <ShowcaseDocs>
+          <DocsP>
+            <DocsCode>Sheet</DocsCode> là một variant của Dialog, nhưng thay vì
+            hiện ở giữa màn hình, nó trượt ra từ một cạnh (right, left, top,
+            bottom). Phù hợp cho navigation drawer, filter panel, settings
+            sidebar, hay form chỉnh sửa.
+          </DocsP>
+          <DocsP>
+            <DocsCode>SheetContent</DocsCode> tự tích hợp{" "}
+            <DocsCode>Portal</DocsCode> và <DocsCode>Overlay</DocsCode> bên
+            trong. Prop <DocsCode>showCloseButton</DocsCode> cho phép bật/tắt
+            nút X tự động. Dùng <DocsCode>open</DocsCode> /{" "}
+            <DocsCode>onOpenChange</DocsCode> để controlled mode.
+          </DocsP>
+        </ShowcaseDocs>
+      }
+      tabs={[
+        {
+          label: "Micro (Primitive)",
+          content: <SheetMicroShowcase globalSize={globalSize} />,
+        },
+      ]}
+    />
+  );
+}