gladvn 0.2.17 → 0.2.18

package/src/dev/showcase/item.tsx

@@ -1,5 +1,3 @@
-import { useDevContext } from "../../dev/components/dev-context";
-import { useState } from "react";
 import { CheckIcon, HeartIcon, MoreVerticalIcon, UserIcon } from "lucide-react";
 
 import { Button } from "../../components/micro/button";
@@ -15,7 +13,7 @@ import {
   ItemSeparator,
   ItemTitle,
 } from "../../components/micro/item";
-import { type Size } from "../../lib/types";
+import { useDevContext } from "../../dev/components/dev-context";
 import {
   DocsH3,
   DocsP,
@@ -24,6 +22,7 @@ import {
   Showcase,
   ShowcaseDocs,
 } from "../../dev/components/showcase";
+import { type Size } from "../../lib/types";
 
 function ItemMicroShowcase({ globalSize }: { globalSize: Size }) {
   return (
@@ -33,14 +32,13 @@ function ItemMicroShowcase({ globalSize }: { globalSize: Size }) {
           label="Basic Content"
           description="Item cơ bản với tiêu đề và mô tả."
           codeString={`<Item className="w-full">
-  <ItemContent>
-    <ItemTitle>Basic Item Content</ItemTitle>
-    <ItemDescription>
-      This item shows structured text.
-    </ItemDescription>
-  </ItemContent>
-</Item>
-`}
+    <ItemContent>
+      <ItemTitle>Basic Item Content</ItemTitle>
+      <ItemDescription>
+        This item shows structured text.
+      </ItemDescription>
+    </ItemContent>
+  </Item>`}
         >
           <Item size={globalSize} className="w-full">
             <ItemContent>
@@ -56,15 +54,14 @@ function ItemMicroShowcase({ globalSize }: { globalSize: Size }) {
           label="With Media"
           description="Item kèm icon hoặc avatar."
           codeString={`<Item className="w-full">
-  <ItemMedia className="bg-primary/10 text-primary rounded-md p-2">
-    <UserIcon className="size-4" />
-  </ItemMedia>
-  <ItemContent>
-    <ItemTitle>User Profile</ItemTitle>
-    <ItemDescription>Manage your account</ItemDescription>
-  </ItemContent>
-</Item>
-`}
+    <ItemMedia className="bg-primary/10 text-primary rounded-md p-2">
+      <UserIcon className="size-4" />
+    </ItemMedia>
+    <ItemContent>
+      <ItemTitle>User Profile</ItemTitle>
+      <ItemDescription>Manage your account</ItemDescription>
+    </ItemContent>
+  </Item>`}
         >
           <Item size={globalSize} className="w-full">
             <ItemMedia className="bg-primary/10 text-primary rounded-md p-2">
@@ -83,18 +80,17 @@ function ItemMicroShowcase({ globalSize }: { globalSize: Size }) {
           label="Variants"
           description="Các variant khác nhau: outline, muted."
           codeString={`<div className="flex flex-col gap-3 w-full">
-  <Item variant="outline">
-    <ItemContent>
-      <ItemTitle>Outline Variant</ItemTitle>
-    </ItemContent>
-  </Item>
-  <Item variant="muted">
-    <ItemContent>
-      <ItemTitle>Muted Variant</ItemTitle>
-    </ItemContent>
-  </Item>
-</div>
-`}
+    <Item variant="outline">
+      <ItemContent>
+        <ItemTitle>Outline Variant</ItemTitle>
+      </ItemContent>
+    </Item>
+    <Item variant="muted">
+      <ItemContent>
+        <ItemTitle>Muted Variant</ItemTitle>
+      </ItemContent>
+    </Item>
+  </div>`}
         >
           <div className="flex flex-col gap-3 w-full">
             <Item variant="outline" size={globalSize}>
@@ -114,24 +110,26 @@ function ItemMicroShowcase({ globalSize }: { globalSize: Size }) {
           label="Media Variants"
           description="ItemMedia hỗ trợ các variant riêng: icon và image."
           codeString={`<div className="flex flex-col gap-3 w-full">
-  <Item>
-    <ItemMedia variant="icon" className="bg-primary/10 text-primary">
-      <CheckIcon className="size-4" />
-    </ItemMedia>
-    <ItemContent>
-      <ItemTitle>Icon Variant</ItemTitle>
-    </ItemContent>
-  </Item>
-  <Item>
-    <ItemMedia variant="image" className="bg-muted">
-      <UserIcon className="size-4 text-muted-foreground" />
-    </ItemMedia>
-    <ItemContent>
-      <ItemTitle>Image Variant</ItemTitle>
-    </ItemContent>
-  </Item>
-</div>
-`}
+    <Item>
+      <ItemMedia
+        variant="icon"
+        className="bg-primary/10 text-primary"
+      >
+        <CheckIcon className="size-4" />
+      </ItemMedia>
+      <ItemContent>
+        <ItemTitle>Icon Variant</ItemTitle>
+      </ItemContent>
+    </Item>
+    <Item>
+      <ItemMedia variant="image" className="bg-muted">
+        <UserIcon className="size-4 text-muted-foreground" />
+      </ItemMedia>
+      <ItemContent>
+        <ItemTitle>Image Variant</ItemTitle>
+      </ItemContent>
+    </Item>
+  </div>`}
         >
           <div className="flex flex-col gap-3 w-full">
             <Item size={globalSize}>
@@ -157,19 +155,26 @@ function ItemMicroShowcase({ globalSize }: { globalSize: Size }) {
           label="With Actions"
           description="Item có các nút hành động ở cuối (ItemActions)."
           codeString={`<Item className="w-full">
-  <ItemContent>
-    <ItemTitle>Actionable Item</ItemTitle>
-  </ItemContent>
-  <ItemActions>
-    <Button variant="ghost" size="sm" className="size-8 p-0">
-      <HeartIcon className="size-4" />
-    </Button>
-    <Button variant="ghost" size="sm" className="size-8 p-0">
-      <MoreVerticalIcon className="size-4" />
-    </Button>
-  </ItemActions>
-</Item>
-`}
+    <ItemContent>
+      <ItemTitle>Actionable Item</ItemTitle>
+    </ItemContent>
+    <ItemActions>
+      <Button
+        variant="ghost"
+        size="sm"
+        className="size-8 p-0"
+      >
+        <HeartIcon className="size-4" />
+      </Button>
+      <Button
+        variant="ghost"
+        size="sm"
+        className="size-8 p-0"
+      >
+        <MoreVerticalIcon className="size-4" />
+      </Button>
+    </ItemActions>
+  </Item>`}
         >
           <Item size={globalSize} className="w-full">
             <ItemContent>
@@ -191,25 +196,26 @@ function ItemMicroShowcase({ globalSize }: { globalSize: Size }) {
         label="Item Group"
         description="Nhóm các Item và phân cách bằng ItemSeparator."
         codeString={`<ItemGroup className="w-full max-w-sm mx-auto">
-  <Item>
-    <ItemContent>
-      <ItemTitle>Account Settings</ItemTitle>
-    </ItemContent>
-  </Item>
-  <ItemSeparator />
-  <Item>
-    <ItemContent>
-      <ItemTitle>Notification Preferences</ItemTitle>
-    </ItemContent>
-  </Item>
-  <ItemSeparator />
-  <Item>
-    <ItemContent>
-      <ItemTitle className="text-destructive">Delete Account</ItemTitle>
-    </ItemContent>
-  </Item>
-</ItemGroup>
-`}
+    <Item>
+      <ItemContent>
+        <ItemTitle>Account Settings</ItemTitle>
+      </ItemContent>
+    </Item>
+    <ItemSeparator />
+    <Item>
+      <ItemContent>
+        <ItemTitle>Notification Preferences</ItemTitle>
+      </ItemContent>
+    </Item>
+    <ItemSeparator />
+    <Item>
+      <ItemContent>
+        <ItemTitle className="text-destructive">
+          Delete Account
+        </ItemTitle>
+      </ItemContent>
+    </Item>
+  </ItemGroup>`}
       >
         <ItemGroup className="w-full max-w-sm mx-auto">
           <Item size={globalSize}>
@@ -235,20 +241,17 @@ function ItemMicroShowcase({ globalSize }: { globalSize: Size }) {
       <ExampleSection
         label="With Header and Footer"
         description="Item phức tạp với ItemHeader và ItemFooter."
-        codeString={`<Item
-  className="w-full max-w-sm mx-auto flex-col items-start gap-2"
->
-  <ItemHeader className="text-xs text-muted-foreground">
-    Order #12345
-  </ItemHeader>
-  <ItemContent>
-    <ItemTitle>Mechanical Keyboard v2</ItemTitle>
-  </ItemContent>
-  <ItemFooter className="text-xs text-success flex items-center gap-1">
-    <CheckIcon className="size-3" /> Delivered
-  </ItemFooter>
-</Item>
-`}
+        codeString={`<Item className="w-full max-w-sm mx-auto flex-col items-start gap-2">
+    <ItemHeader className="text-xs text-muted-foreground">
+      Order #12345
+    </ItemHeader>
+    <ItemContent>
+      <ItemTitle>Mechanical Keyboard v2</ItemTitle>
+    </ItemContent>
+    <ItemFooter className="text-xs text-success flex items-center gap-1">
+      <CheckIcon className="size-3" /> Delivered
+    </ItemFooter>
+  </Item>`}
       >
         <Item
           size={globalSize}
@@ -279,8 +282,8 @@ export default function ItemShowcase() {
         <ShowcaseDocs>
           <DocsH3>Item</DocsH3>
           <DocsP>
-            Sử dụng để tạo danh sách hoặc khối nội dung có icon, tiêu đề,
-            mô tả và hành động.
+            Sử dụng để tạo danh sách hoặc khối nội dung có icon, tiêu đề, mô tả
+            và hành động.
           </DocsP>
         </ShowcaseDocs>
       }

package/src/dev/showcase/kbd.tsx

@@ -1,11 +1,3 @@
-import {
-  DocsCode,
-  DocsP,
-  ExampleGrid,
-  ExampleSection,
-  Showcase,
-  ShowcaseDocs,
-} from "../../dev/components/showcase";
 import {
   CopyIcon,
   FileIcon,
@@ -19,16 +11,26 @@ import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownMenuPortal,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-  DropdownMenuPortal,
 } from "../../components/micro/dropdown-menu";
 import { Kbd, KbdGroup } from "../../components/micro/kbd";
 import {
   Tooltip,
   TooltipContent,
+  TooltipPortal,
   TooltipProvider,
-  TooltipTrigger, TooltipPortal } from "../../components/micro/tooltip";
+  TooltipTrigger,
+} from "../../components/micro/tooltip";
+import {
+  DocsCode,
+  DocsP,
+  ExampleGrid,
+  ExampleSection,
+  Showcase,
+  ShowcaseDocs,
+} from "../../dev/components/showcase";
 
 // ──────────────────────────────────────────────────────────
 // SECTION 2: Micro Content (không export)
@@ -42,8 +44,8 @@ function KbdMicroShowcase() {
           label="Kbd — Phím đơn"
           description="Hiển thị một phím bàn phím riêng lẻ dùng thẻ <kbd> semantic."
           codeString={`<p className="text-sm text-muted-foreground">
-  Press <Kbd>⌘</Kbd> <Kbd>K</Kbd> to open search.
-</p>`}
+    Press <Kbd>⌘</Kbd> <Kbd>K</Kbd> to open search.
+  </p>`}
         >
           <p className="text-sm text-muted-foreground">
             Press <Kbd>⌘</Kbd> <Kbd>K</Kbd> to open search.
@@ -54,13 +56,13 @@ function KbdMicroShowcase() {
           label="KbdGroup — Tổ hợp phím"
           description="Nhóm nhiều phím cạnh nhau với khoảng cách đều. Dùng khi biểu diễn tổ hợp phím như Ctrl+Shift+P."
           codeString={`<p className="text-sm text-muted-foreground flex items-center gap-2">
-  Open Command Palette
-  <KbdGroup>
-    <Kbd>⌘</Kbd>
-    <Kbd>⇧</Kbd>
-    <Kbd>P</Kbd>
-  </KbdGroup>
-</p>`}
+    Open Command Palette
+    <KbdGroup>
+      <Kbd>⌘</Kbd>
+      <Kbd>⇧</Kbd>
+      <Kbd>P</Kbd>
+    </KbdGroup>
+  </p>`}
         >
           <p className="text-sm text-muted-foreground flex items-center gap-2">
             Open Command Palette
@@ -78,17 +80,17 @@ function KbdMicroShowcase() {
         label="Ký tự & Symbols"
         description="Kbd có thể chứa ký tự Unicode, chữ cái, số hoặc tên phím dài."
         codeString={`<div className="flex flex-wrap items-center gap-2">
-  <Kbd>Ctrl</Kbd>
-  <Kbd>Alt</Kbd>
-  <Kbd>⌘</Kbd>
-  <Kbd>⇧</Kbd>
-  <Kbd>⌫</Kbd>
-  <Kbd>↵</Kbd>
-  <Kbd>Tab</Kbd>
-  <Kbd>Esc</Kbd>
-  <Kbd>F1</Kbd>
-  <Kbd>→</Kbd>
-</div>`}
+    <Kbd>Ctrl</Kbd>
+    <Kbd>Alt</Kbd>
+    <Kbd>⌘</Kbd>
+    <Kbd>⇧</Kbd>
+    <Kbd>⌫</Kbd>
+    <Kbd>↵</Kbd>
+    <Kbd>Tab</Kbd>
+    <Kbd>Esc</Kbd>
+    <Kbd>F1</Kbd>
+    <Kbd>→</Kbd>
+  </div>`}
       >
         <div className="flex flex-wrap items-center gap-2">
           <Kbd>Ctrl</Kbd>
@@ -109,13 +111,20 @@ function KbdMicroShowcase() {
         label="Kbd trong Tooltip"
         description="Kbd tự đổi màu khi nằm trong TooltipContent — màu nền sáng trên nền tối của tooltip, không cần thêm class."
         codeString={`<TooltipProvider>
-  <Tooltip>
-    <TooltipTrigger render={<Button variant="outline" iconOnly><SaveIcon /></Button>} />
-    <TooltipContent>
-      Lưu tài liệu <Kbd>⌘</Kbd><Kbd>S</Kbd>
-    </TooltipContent>
-  </Tooltip>
-</TooltipProvider>`}
+    <Tooltip>
+      <TooltipTrigger
+        render={
+          <Button variant="outline" iconOnly>
+            <SaveIcon />
+          </Button>
+        }
+      />
+      <TooltipContent>
+        Lưu tài liệu <Kbd>⌘</Kbd>
+        <Kbd>S</Kbd>
+      </TooltipContent>
+    </Tooltip>
+  </TooltipProvider>`}
       >
         <div className="flex items-center gap-3">
           <TooltipProvider>
@@ -128,11 +137,11 @@ function KbdMicroShowcase() {
                 }
               />
               <TooltipPortal>
-                          <TooltipContent>
-                                          Lưu tài liệu <Kbd>⌘</Kbd>
-                                          <Kbd>S</Kbd>
-                                        </TooltipContent>
-                          </TooltipPortal>
+                <TooltipContent>
+                  Lưu tài liệu <Kbd>⌘</Kbd>
+                  <Kbd>S</Kbd>
+                </TooltipContent>
+              </TooltipPortal>
             </Tooltip>
           </TooltipProvider>
 
@@ -146,11 +155,11 @@ function KbdMicroShowcase() {
                 }
               />
               <TooltipPortal>
-                          <TooltipContent>
-                                          Sao chép <Kbd>⌘</Kbd>
-                                          <Kbd>C</Kbd>
-                                        </TooltipContent>
-                          </TooltipPortal>
+                <TooltipContent>
+                  Sao chép <Kbd>⌘</Kbd>
+                  <Kbd>C</Kbd>
+                </TooltipContent>
+              </TooltipPortal>
             </Tooltip>
           </TooltipProvider>
         </div>
@@ -161,20 +170,22 @@ function KbdMicroShowcase() {
         label="Use case — Menu với Keyboard Shortcut"
         description="Kbd dùng trong DropdownMenuItem để hiển thị phím tắt bên cạnh label — pattern phổ biến trong text editor, IDE, Figma."
         codeString={`<DropdownMenuItem>
-  <FileIcon />
-  New File
-  <KbdGroup className="ml-auto">
-    <Kbd>⌘</Kbd><Kbd>N</Kbd>
-  </KbdGroup>
-</DropdownMenuItem>
+    <FileIcon />
+    New File
+    <KbdGroup className="ml-auto">
+      <Kbd>⌘</Kbd>
+      <Kbd>N</Kbd>
+    </KbdGroup>
+  </DropdownMenuItem>
 
-<DropdownMenuItem>
-  <SaveIcon />
-  Save
-  <KbdGroup className="ml-auto">
-    <Kbd>⌘</Kbd><Kbd>S</Kbd>
-  </KbdGroup>
-</DropdownMenuItem>`}
+  <DropdownMenuItem>
+    <SaveIcon />
+    Save
+    <KbdGroup className="ml-auto">
+      <Kbd>⌘</Kbd>
+      <Kbd>S</Kbd>
+    </KbdGroup>
+  </DropdownMenuItem>`}
       >
         <DropdownMenu>
           <DropdownMenuTrigger
@@ -226,8 +237,13 @@ function KbdMicroShowcase() {
         label="Gợi ý inline trong văn bản"
         description="Kbd dùng inline trong đoạn văn bản để gợi ý phím tắt — phổ biến trong help text, onboarding, documentation."
         codeString={`<p className="text-sm text-muted-foreground">
-  Nhấn <Kbd>Enter</Kbd> để gửi, hoặc <KbdGroup><Kbd>⇧</Kbd><Kbd>Enter</Kbd></KbdGroup> để xuống dòng.
-</p>`}
+    Nhấn <Kbd>Enter</Kbd> để gửi, hoặc{" "}
+    <KbdGroup>
+      <Kbd>⇧</Kbd>
+      <Kbd>Enter</Kbd>
+    </KbdGroup>{" "}
+    để xuống dòng.
+  </p>`}
       >
         <div className="space-y-3">
           <p className="text-sm text-muted-foreground">

package/src/dev/showcase/label.tsx

@@ -1,3 +1,4 @@
+import { Label } from "../../components/micro/label";
 import { useDevContext } from "../../dev/components/dev-context";
 import {
   DocsCode,
@@ -6,9 +7,6 @@ import {
   Showcase,
   ShowcaseDocs,
 } from "../../dev/components/showcase";
-import { useState } from "react";
-
-import { Label } from "../../components/micro/label";
 import { type Size } from "../../lib/types";
 
 // ──────────────────────────────────────────────────────────
@@ -20,10 +18,7 @@ function LabelMicroShowcase({ globalSize }: { globalSize: Size }) {
       <ExampleSection
         label="Default"
         description="Cách sử dụng nhãn tiêu chuẩn."
-        codeString={`<Label htmlFor="terms">
-  Accept terms and conditions
-</Label>
-`}
+        codeString={`<Label htmlFor="terms">Accept terms and conditions</Label>`}
       >
         <Label htmlFor="terms" size={globalSize}>
           Accept terms and conditions
@@ -34,11 +29,8 @@ function LabelMicroShowcase({ globalSize }: { globalSize: Size }) {
         label="Disabled"
         description="Trạng thái bị vô hiệu hóa khi nằm trong group bị vô hiệu."
         codeString={`<div data-disabled="true" className="group">
-  <Label htmlFor="disabled">
-    This label is disabled
-  </Label>
-</div>
-`}
+    <Label htmlFor="disabled">This label is disabled</Label>
+  </div>`}
       >
         <div data-disabled="true" className="group">
           <Label htmlFor="disabled" size={globalSize}>
@@ -51,11 +43,8 @@ function LabelMicroShowcase({ globalSize }: { globalSize: Size }) {
         label="Error State"
         description="Hiển thị màu đỏ khi nằm trong group bị lỗi (data-invalid)."
         codeString={`<div data-invalid="true" className="group">
-  <Label htmlFor="error">
-    Email is required
-  </Label>
-</div>
-`}
+    <Label htmlFor="error">Email is required</Label>
+  </div>`}
       >
         <div data-invalid="true" className="group">
           <Label htmlFor="error" size={globalSize}>
@@ -68,12 +57,16 @@ function LabelMicroShowcase({ globalSize }: { globalSize: Size }) {
         label="With Peer Input"
         description="Phản hồi trạng thái disabled của input liền kề (dùng class peer)."
         codeString={`<div className="flex items-center gap-2">
-  <input type="checkbox" disabled id="peer-disabled" className="peer w-4 h-4" />
-  <Label htmlFor="peer-disabled">
-    Disabled by peer checkbox
-  </Label>
-</div>
-`}
+    <input
+      type="checkbox"
+      disabled
+      id="peer-disabled"
+      className="peer w-4 h-4"
+    />
+    <Label htmlFor="peer-disabled">
+      Disabled by peer checkbox
+    </Label>
+  </div>`}
       >
         <div className="flex items-center gap-2">
           <input