gladvn 0.2.14

package/src/dev/showcase/item.tsx

@@ -0,0 +1,295 @@
+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";
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemFooter,
+  ItemGroup,
+  ItemHeader,
+  ItemMedia,
+  ItemSeparator,
+  ItemTitle,
+} from "../../components/micro/item";
+import { type Size } from "../../lib/types";
+import {
+  DocsH3,
+  DocsP,
+  ExampleGrid,
+  ExampleSection,
+  Showcase,
+  ShowcaseDocs,
+} from "../../dev/components/showcase";
+
+function ItemMicroShowcase({ globalSize }: { globalSize: Size }) {
+  return (
+    <div className="space-y-10 mt-6">
+      <ExampleGrid>
+        <ExampleSection
+          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>
+`}
+        >
+          <Item size={globalSize} className="w-full">
+            <ItemContent>
+              <ItemTitle>Basic Item Content</ItemTitle>
+              <ItemDescription>
+                This item shows structured text.
+              </ItemDescription>
+            </ItemContent>
+          </Item>
+        </ExampleSection>
+
+        <ExampleSection
+          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>
+`}
+        >
+          <Item size={globalSize} 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>
+        </ExampleSection>
+      </ExampleGrid>
+
+      <ExampleGrid>
+        <ExampleSection
+          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>
+`}
+        >
+          <div className="flex flex-col gap-3 w-full">
+            <Item variant="outline" size={globalSize}>
+              <ItemContent>
+                <ItemTitle>Outline Variant</ItemTitle>
+              </ItemContent>
+            </Item>
+            <Item variant="muted" size={globalSize}>
+              <ItemContent>
+                <ItemTitle>Muted Variant</ItemTitle>
+              </ItemContent>
+            </Item>
+          </div>
+        </ExampleSection>
+
+        <ExampleSection
+          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>
+`}
+        >
+          <div className="flex flex-col gap-3 w-full">
+            <Item size={globalSize}>
+              <ItemMedia variant="icon" className="bg-primary/10 text-primary">
+                <CheckIcon className="size-4" />
+              </ItemMedia>
+              <ItemContent>
+                <ItemTitle>Icon Variant</ItemTitle>
+              </ItemContent>
+            </Item>
+            <Item size={globalSize}>
+              <ItemMedia variant="image" className="bg-muted">
+                <UserIcon className="size-4 text-muted-foreground" />
+              </ItemMedia>
+              <ItemContent>
+                <ItemTitle>Image Variant</ItemTitle>
+              </ItemContent>
+            </Item>
+          </div>
+        </ExampleSection>
+
+        <ExampleSection
+          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>
+`}
+        >
+          <Item size={globalSize} className="w-full">
+            <ItemContent>
+              <ItemTitle>Actionable Item</ItemTitle>
+            </ItemContent>
+            <ItemActions>
+              <Button variant="ghost" size="sm" className="size-8 p-0" iconOnly>
+                <HeartIcon className="size-4" />
+              </Button>
+              <Button variant="ghost" size="sm" className="size-8 p-0" iconOnly>
+                <MoreVerticalIcon className="size-4" />
+              </Button>
+            </ItemActions>
+          </Item>
+        </ExampleSection>
+      </ExampleGrid>
+
+      <ExampleSection
+        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>
+`}
+      >
+        <ItemGroup className="w-full max-w-sm mx-auto">
+          <Item size={globalSize}>
+            <ItemContent>
+              <ItemTitle>Account Settings</ItemTitle>
+            </ItemContent>
+          </Item>
+          <ItemSeparator />
+          <Item size={globalSize}>
+            <ItemContent>
+              <ItemTitle>Notification Preferences</ItemTitle>
+            </ItemContent>
+          </Item>
+          <ItemSeparator />
+          <Item size={globalSize}>
+            <ItemContent>
+              <ItemTitle className="text-destructive">Delete Account</ItemTitle>
+            </ItemContent>
+          </Item>
+        </ItemGroup>
+      </ExampleSection>
+
+      <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>
+`}
+      >
+        <Item
+          size={globalSize}
+          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>
+      </ExampleSection>
+    </div>
+  );
+}
+
+export default function ItemShowcase() {
+  const { size: globalSize } = useDevContext();
+  return (
+    <Showcase
+      title="Item"
+      description="Container linh hoạt cho danh sách hoặc khối nội dung có cấu trúc."
+      generalConcept={
+        <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.
+          </DocsP>
+        </ShowcaseDocs>
+      }
+      tabs={[
+        {
+          label: "Micro (Primitive)",
+          content: <ItemMicroShowcase globalSize={globalSize} />,
+        },
+      ]}
+    />
+  );
+}

package/src/dev/showcase/kbd.tsx

@@ -0,0 +1,276 @@
+import {
+  DocsCode,
+  DocsP,
+  ExampleGrid,
+  ExampleSection,
+  Showcase,
+  ShowcaseDocs,
+} from "../../dev/components/showcase";
+import {
+  CopyIcon,
+  FileIcon,
+  FilePlusIcon,
+  FolderOpenIcon,
+  SaveIcon,
+} from "lucide-react";
+
+import { Button } from "../../components/micro/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  DropdownMenuPortal,
+} from "../../components/micro/dropdown-menu";
+import { Kbd, KbdGroup } from "../../components/micro/kbd";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger, TooltipPortal } from "../../components/micro/tooltip";
+
+// ──────────────────────────────────────────────────────────
+// SECTION 2: Micro Content (không export)
+// ──────────────────────────────────────────────────────────
+function KbdMicroShowcase() {
+  return (
+    <div className="space-y-10 mt-6">
+      {/* ── Kbd đơn ── */}
+      <ExampleGrid>
+        <ExampleSection
+          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>`}
+        >
+          <p className="text-sm text-muted-foreground">
+            Press <Kbd>⌘</Kbd> <Kbd>K</Kbd> to open search.
+          </p>
+        </ExampleSection>
+
+        <ExampleSection
+          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>`}
+        >
+          <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>
+        </ExampleSection>
+      </ExampleGrid>
+
+      {/* ── Ký tự & Symbols ── */}
+      <ExampleSection
+        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>`}
+      >
+        <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>
+      </ExampleSection>
+
+      {/* ── Kbd trong Tooltip ── */}
+      <ExampleSection
+        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>`}
+      >
+        <div className="flex items-center gap-3">
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger
+                render={
+                  <Button variant="outline" iconOnly>
+                    <SaveIcon aria-hidden="true" />
+                  </Button>
+                }
+              />
+              <TooltipPortal>
+                          <TooltipContent>
+                                          Lưu tài liệu <Kbd>⌘</Kbd>
+                                          <Kbd>S</Kbd>
+                                        </TooltipContent>
+                          </TooltipPortal>
+            </Tooltip>
+          </TooltipProvider>
+
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger
+                render={
+                  <Button variant="outline" iconOnly>
+                    <CopyIcon aria-hidden="true" />
+                  </Button>
+                }
+              />
+              <TooltipPortal>
+                          <TooltipContent>
+                                          Sao chép <Kbd>⌘</Kbd>
+                                          <Kbd>C</Kbd>
+                                        </TooltipContent>
+                          </TooltipPortal>
+            </Tooltip>
+          </TooltipProvider>
+        </div>
+      </ExampleSection>
+
+      {/* ── Use case thực tế: Menu với shortcuts ── */}
+      <ExampleSection
+        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>
+
+<DropdownMenuItem>
+  <SaveIcon />
+  Save
+  <KbdGroup className="ml-auto">
+    <Kbd>⌘</Kbd><Kbd>S</Kbd>
+  </KbdGroup>
+</DropdownMenuItem>`}
+      >
+        <DropdownMenu>
+          <DropdownMenuTrigger
+            render={<Button variant="outline">File menu</Button>}
+          />
+          <DropdownMenuPortal>
+            <DropdownMenuContent className="w-56">
+              <DropdownMenuItem>
+                <FilePlusIcon aria-hidden="true" />
+                New File
+                <KbdGroup className="ml-auto">
+                  <Kbd>⌘</Kbd>
+                  <Kbd>N</Kbd>
+                </KbdGroup>
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <FolderOpenIcon aria-hidden="true" />
+                Open...
+                <KbdGroup className="ml-auto">
+                  <Kbd>⌘</Kbd>
+                  <Kbd>O</Kbd>
+                </KbdGroup>
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem>
+                <SaveIcon aria-hidden="true" />
+                Save
+                <KbdGroup className="ml-auto">
+                  <Kbd>⌘</Kbd>
+                  <Kbd>S</Kbd>
+                </KbdGroup>
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <FileIcon aria-hidden="true" />
+                Save As...
+                <KbdGroup className="ml-auto">
+                  <Kbd>⌘</Kbd>
+                  <Kbd>⇧</Kbd>
+                  <Kbd>S</Kbd>
+                </KbdGroup>
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenuPortal>
+        </DropdownMenu>
+      </ExampleSection>
+
+      {/* ── Gợi ý inline trong form ── */}
+      <ExampleSection
+        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>`}
+      >
+        <div className="space-y-3">
+          <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>
+          <p className="text-sm text-muted-foreground">
+            Dùng <Kbd>Tab</Kbd> để chuyển trường, <Kbd>Esc</Kbd> để huỷ.
+          </p>
+        </div>
+      </ExampleSection>
+    </div>
+  );
+}
+
+// ──────────────────────────────────────────────────────────
+// SECTION 3: Entry point (export default)
+// ──────────────────────────────────────────────────────────
+export default function KbdShowcase() {
+  return (
+    <Showcase
+      title="Keyboard Shortcut"
+      description="Hiển thị phím tắt bàn phím dạng inline với thẻ HTML semantic <kbd>."
+      generalConcept={
+        <ShowcaseDocs>
+          <DocsP>
+            <DocsCode>Kbd</DocsCode> dùng thẻ HTML semantic{" "}
+            <DocsCode>&lt;kbd&gt;</DocsCode> để biểu diễn một phím bàn phím.
+            Screen reader nhận ra đây là keyboard input thay vì văn bản thường.
+          </DocsP>
+          <DocsP>
+            <DocsCode>KbdGroup</DocsCode> nhóm nhiều <DocsCode>Kbd</DocsCode>{" "}
+            lại để tạo tổ hợp phím (ví dụ: ⌘ + ⇧ + P). Kbd tự thích nghi màu sắc
+            khi nằm trong <DocsCode>TooltipContent</DocsCode> nhờ data-slot
+            context.
+          </DocsP>
+        </ShowcaseDocs>
+      }
+      tabs={[{ label: "Micro (Primitive)", content: <KbdMicroShowcase /> }]}
+    />
+  );
+}

package/src/dev/showcase/label.tsx

@@ -0,0 +1,121 @@
+import { useDevContext } from "../../dev/components/dev-context";
+import {
+  DocsCode,
+  DocsP,
+  ExampleSection,
+  Showcase,
+  ShowcaseDocs,
+} from "../../dev/components/showcase";
+import { useState } from "react";
+
+import { Label } from "../../components/micro/label";
+import { type Size } from "../../lib/types";
+
+// ──────────────────────────────────────────────────────────
+// SECTION 2: Micro Content (không export)
+// ──────────────────────────────────────────────────────────
+function LabelMicroShowcase({ globalSize }: { globalSize: Size }) {
+  return (
+    <div className="space-y-10 mt-6">
+      <ExampleSection
+        label="Default"
+        description="Cách sử dụng nhãn tiêu chuẩn."
+        codeString={`<Label htmlFor="terms">
+  Accept terms and conditions
+</Label>
+`}
+      >
+        <Label htmlFor="terms" size={globalSize}>
+          Accept terms and conditions
+        </Label>
+      </ExampleSection>
+
+      <ExampleSection
+        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>
+`}
+      >
+        <div data-disabled="true" className="group">
+          <Label htmlFor="disabled" size={globalSize}>
+            This label is disabled
+          </Label>
+        </div>
+      </ExampleSection>
+
+      <ExampleSection
+        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>
+`}
+      >
+        <div data-invalid="true" className="group">
+          <Label htmlFor="error" size={globalSize}>
+            Email is required
+          </Label>
+        </div>
+      </ExampleSection>
+
+      <ExampleSection
+        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>
+`}
+      >
+        <div className="flex items-center gap-2">
+          <input
+            type="checkbox"
+            disabled
+            id="peer-disabled"
+            className="peer w-4 h-4"
+          />
+          <Label htmlFor="peer-disabled" size={globalSize}>
+            Disabled by peer checkbox
+          </Label>
+        </div>
+      </ExampleSection>
+    </div>
+  );
+}
+
+// ──────────────────────────────────────────────────────────
+// SECTION 3: Entry point (export default)
+// ──────────────────────────────────────────────────────────
+export default function LabelShowcase() {
+  const { size: globalSize } = useDevContext();
+  return (
+    <Showcase
+      title="Label"
+      description="Nhãn gắn với form control, cải thiện accessibility."
+      generalConcept={
+        <ShowcaseDocs>
+          <DocsP>
+            Label được sử dụng để gắn nhãn cho các trường nhập liệu form. Nó cải
+            thiện khả năng truy cập (accessibility) bằng cách liên kết văn bản
+            với một form control cụ thể (thông qua thuộc tính{" "}
+            <DocsCode>htmlFor</DocsCode>).
+          </DocsP>
+        </ShowcaseDocs>
+      }
+      tabs={[
+        {
+          label: "Micro (Primitive)",
+          content: <LabelMicroShowcase globalSize={globalSize} />,
+        },
+      ]}
+    />
+  );
+}