gladvn 0.2.17 → 0.2.19

package/src/dev/showcase/sheet.tsx

@@ -1,15 +1,7 @@
-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 { FilterIcon, PanelRightIcon, SettingsIcon } from "lucide-react";
+
 import { Button } from "../../components/micro/button";
 import { Input } from "../../components/micro/input";
 import { Label } from "../../components/micro/label";
@@ -20,10 +12,19 @@ import {
   SheetDescription,
   SheetFooter,
   SheetHeader,
+  SheetPortal,
   SheetTitle,
   SheetTrigger,
-  SheetPortal,
 } from "../../components/micro/sheet";
+import { useDevContext } from "../../dev/components/dev-context";
+import {
+  DocsCode,
+  DocsP,
+  ExampleGrid,
+  ExampleSection,
+  Showcase,
+  ShowcaseDocs,
+} from "../../dev/components/showcase";
 import { type Size } from "../../lib/types";
 
 // ──────────────────────────────────────────────────────────
@@ -39,36 +40,59 @@ function SheetMicroShowcase({ globalSize }: { globalSize: Size }) {
         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>`}
+    <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 */}
@@ -283,17 +307,21 @@ function SheetMicroShowcase({ globalSize }: { globalSize: Size }) {
           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>`}
+    <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
@@ -318,24 +346,33 @@ function SheetMicroShowcase({ globalSize }: { globalSize: Size }) {
           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>`}
+    <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
@@ -377,37 +414,39 @@ function SheetMicroShowcase({ globalSize }: { globalSize: Size }) {
         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" />}>
+        <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}>
@@ -451,39 +490,48 @@ function SheetMicroShowcase({ globalSize }: { globalSize: Size }) {
         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>`}
+    <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} />}>

package/src/dev/showcase/sidebar.tsx

@@ -1,4 +1,3 @@
-import { DocsP, ExampleSection, Showcase, ShowcaseDocs } from "../../dev/components/showcase";
 import { FolderIcon, Package2Icon, SettingsIcon, UserIcon } from "lucide-react";
 
 import {
@@ -9,6 +8,12 @@ import {
   SidebarMenuItemList,
   useSidebarToggle,
 } from "../../components/micro/sidebar";
+import {
+  DocsP,
+  ExampleSection,
+  Showcase,
+  ShowcaseDocs,
+} from "../../dev/components/showcase";
 
 function SidebarMicroShowcase() {
   const { sidebarRef, toggleSidebar, defaultState } =
@@ -107,10 +112,9 @@ export default function SidebarShowcase() {
       generalConcept={
         <ShowcaseDocs>
           <DocsP>
-            Sidebar tối giản chỉ dùng CSS và DOM attribute để chuyển
-            trạng thái expanded/collapsed. Không có JS transition, không
-            re-render. Sử dụng useSidebarToggle hook để toggle bằng
-            direct DOM mutation.
+            Sidebar tối giản chỉ dùng CSS và DOM attribute để chuyển trạng thái
+            expanded/collapsed. Không có JS transition, không re-render. Sử dụng
+            useSidebarToggle hook để toggle bằng direct DOM mutation.
           </DocsP>
         </ShowcaseDocs>
       }

package/src/dev/showcase/skeleton.tsx

@@ -20,14 +20,13 @@ function SkeletonMicroShowcase() {
         description="Thay đổi hình dạng thông qua các class Tailwind: w-..., h-..., rounded-full, v.v."
         fullWidth
         codeString={`<div className="flex flex-wrap items-center gap-6 w-full p-4 border border-border rounded-lg bg-card">
-  <Skeleton className="h-4 w-48" />
-  <Skeleton className="h-4 w-32" />
-  <Skeleton className="h-4 w-64" />
-  <Skeleton className="size-12 rounded-full" />
-  <Skeleton className="h-24 w-40 rounded-xl" />
-  <Skeleton className="h-10 w-24 rounded-md" />
-</div>
-`}
+    <Skeleton className="h-4 w-48" />
+    <Skeleton className="h-4 w-32" />
+    <Skeleton className="h-4 w-64" />
+    <Skeleton className="size-12 rounded-full" />
+    <Skeleton className="h-24 w-40 rounded-xl" />
+    <Skeleton className="h-10 w-24 rounded-md" />
+  </div>`}
       >
         <div className="flex flex-wrap items-center gap-6 w-full p-4 border border-border rounded-lg bg-card">
           <Skeleton className="h-4 w-48" />
@@ -44,19 +43,18 @@ function SkeletonMicroShowcase() {
           label="Card Profile"
           description="Khung xương mô phỏng ảnh đại diện, tên người dùng và số liệu."
           codeString={`<div className="space-y-6 w-full max-w-sm rounded-lg border border-border bg-card p-4">
-  <div className="flex items-center space-x-4">
-    <Skeleton className="h-12 w-12 rounded-full" />
-    <div className="space-y-2">
-      <Skeleton className="h-4 w-[200px]" />
-      <Skeleton className="h-4 w-[150px]" />
+    <div className="flex items-center space-x-4">
+      <Skeleton className="h-12 w-12 rounded-full" />
+      <div className="space-y-2">
+        <Skeleton className="h-4 w-[200px]" />
+        <Skeleton className="h-4 w-[150px]" />
+      </div>
     </div>
-  </div>
-  <div className="grid grid-cols-2 gap-4">
-    <Skeleton className="h-24 rounded-xl" />
-    <Skeleton className="h-24 rounded-xl" />
-  </div>
-</div>
-`}
+    <div className="grid grid-cols-2 gap-4">
+      <Skeleton className="h-24 rounded-xl" />
+      <Skeleton className="h-24 rounded-xl" />
+    </div>
+  </div>`}
         >
           <div className="space-y-6 w-full max-w-sm rounded-lg border border-border bg-card p-4">
             <div className="flex items-center space-x-4">
@@ -77,16 +75,15 @@ function SkeletonMicroShowcase() {
           label="Article / Blog Post"
           description="Khung xương mô phỏng các đoạn văn bản (text blocks)."
           codeString={`<div className="space-y-4 w-full max-w-sm rounded-lg border border-border bg-card p-4">
-  <Skeleton className="h-6 w-3/4" />
-  <Skeleton className="h-4 w-full" />
-  <Skeleton className="h-4 w-full" />
-  <Skeleton className="h-4 w-5/6" />
-  <div className="pt-2" />
-  <Skeleton className="h-4 w-full" />
-  <Skeleton className="h-4 w-4/5" />
-  <Skeleton className="h-4 w-2/3" />
-</div>
-`}
+    <Skeleton className="h-6 w-3/4" />
+    <Skeleton className="h-4 w-full" />
+    <Skeleton className="h-4 w-full" />
+    <Skeleton className="h-4 w-5/6" />
+    <div className="pt-2" />
+    <Skeleton className="h-4 w-full" />
+    <Skeleton className="h-4 w-4/5" />
+    <Skeleton className="h-4 w-2/3" />
+  </div>`}
         >
           <div className="space-y-4 w-full max-w-sm rounded-lg border border-border bg-card p-4">
             <Skeleton className="h-6 w-3/4" />
@@ -106,29 +103,28 @@ function SkeletonMicroShowcase() {
           label="List Items / Table Rows"
           description="Sử dụng vòng lặp hoặc nhiều thẻ lặp lại để mô phỏng danh sách."
           codeString={`<div className="space-y-4 w-full max-w-sm rounded-lg border border-border bg-card p-4">
-  <div className="flex items-center space-x-4">
-    <Skeleton className="h-8 w-8 rounded-full" />
-    <div className="space-y-2">
-      <Skeleton className="h-3 w-[180px]" />
-      <Skeleton className="h-3 w-[100px]" />
+    <div className="flex items-center space-x-4">
+      <Skeleton className="h-8 w-8 rounded-full" />
+      <div className="space-y-2">
+        <Skeleton className="h-3 w-[180px]" />
+        <Skeleton className="h-3 w-[100px]" />
+      </div>
     </div>
-  </div>
-  <div className="flex items-center space-x-4">
-    <Skeleton className="h-8 w-8 rounded-full" />
-    <div className="space-y-2">
-      <Skeleton className="h-3 w-[150px]" />
-      <Skeleton className="h-3 w-[120px]" />
+    <div className="flex items-center space-x-4">
+      <Skeleton className="h-8 w-8 rounded-full" />
+      <div className="space-y-2">
+        <Skeleton className="h-3 w-[150px]" />
+        <Skeleton className="h-3 w-[120px]" />
+      </div>
     </div>
-  </div>
-  <div className="flex items-center space-x-4">
-    <Skeleton className="h-8 w-8 rounded-full" />
-    <div className="space-y-2">
-      <Skeleton className="h-3 w-[170px]" />
-      <Skeleton className="h-3 w-[90px]" />
+    <div className="flex items-center space-x-4">
+      <Skeleton className="h-8 w-8 rounded-full" />
+      <div className="space-y-2">
+        <Skeleton className="h-3 w-[170px]" />
+        <Skeleton className="h-3 w-[90px]" />
+      </div>
     </div>
-  </div>
-</div>
-`}
+  </div>`}
         >
           <div className="space-y-4 w-full max-w-sm rounded-lg border border-border bg-card p-4">
             <div className="flex items-center space-x-4">
@@ -159,16 +155,15 @@ function SkeletonMicroShowcase() {
           label="Media / Image Placeholder"
           description="Khung xương lớn mô phỏng hình ảnh hoặc video player."
           codeString={`<div className="space-y-4 w-full max-w-sm rounded-lg border border-border bg-card p-4">
-  <Skeleton className="h-48 w-full rounded-md" />
-  <div className="flex justify-between items-center pt-2">
-    <div className="space-y-2">
-      <Skeleton className="h-4 w-[150px]" />
-      <Skeleton className="h-3 w-[100px]" />
+    <Skeleton className="h-48 w-full rounded-md" />
+    <div className="flex justify-between items-center pt-2">
+      <div className="space-y-2">
+        <Skeleton className="h-4 w-[150px]" />
+        <Skeleton className="h-3 w-[100px]" />
+      </div>
+      <Skeleton className="h-8 w-16 rounded-md" />
     </div>
-    <Skeleton className="h-8 w-16 rounded-md" />
-  </div>
-</div>
-`}
+  </div>`}
         >
           <div className="space-y-4 w-full max-w-sm rounded-lg border border-border bg-card p-4">
             <Skeleton className="h-48 w-full rounded-md" />