gladvn 0.2.17 → 0.2.18

package/src/dev/showcase/breadcrumb.tsx

@@ -1,10 +1,3 @@
-import {
-  DocsP,
-  ExampleGrid,
-  ExampleSection,
-  Showcase,
-  ShowcaseDocs,
-} from "../../dev/components/showcase";
 import { SlashIcon } from "lucide-react";
 
 import { BreadcrumbPreset } from "../../components/macro/breadcrumb-preset";
@@ -24,6 +17,13 @@ import {
   DropdownMenuPortal,
   DropdownMenuTrigger,
 } from "../../components/micro/dropdown-menu";
+import {
+  DocsP,
+  ExampleGrid,
+  ExampleSection,
+  Showcase,
+  ShowcaseDocs,
+} from "../../dev/components/showcase";
 
 // ──────────────────────────────────────────────────────────
 // SECTION 1: Macro Content
@@ -36,13 +36,12 @@ function BreadcrumbMacroShowcase() {
           label="Tiêu chuẩn (Standard)"
           description="Mảng điều hướng cơ bản."
           codeString={`<BreadcrumbPreset
-  items={[
-    { label: "Trang chủ", href: "/" },
-    { label: "Thành phần", href: "/components" },
-    { label: "Breadcrumb" },
-  ]}
-/>
-`}
+    items={[
+      { label: "Trang chủ", href: "/" },
+      { label: "Thành phần", href: "/components" },
+      { label: "Breadcrumb" },
+    ]}
+  />`}
         >
           <BreadcrumbPreset
             items={[
@@ -57,14 +56,13 @@ function BreadcrumbMacroShowcase() {
           label="Nhiều cấp (Deep Navigation)"
           description="Đường dẫn dài hơn điển hình cho các trang lồng nhau."
           codeString={`<BreadcrumbPreset
-  items={[
-    { label: "Dashboard", href: "/dashboard" },
-    { label: "Cài đặt", href: "/settings" },
-    { label: "Tài khoản", href: "/settings/account" },
-    { label: "Hóa đơn" },
-  ]}
-/>
-`}
+    items={[
+      { label: "Dashboard", href: "/dashboard" },
+      { label: "Cài đặt", href: "/settings" },
+      { label: "Tài khoản", href: "/settings/account" },
+      { label: "Hóa đơn" },
+    ]}
+  />`}
         >
           <BreadcrumbPreset
             items={[
@@ -91,21 +89,22 @@ function BreadcrumbMicroShowcase() {
         description="Lắp ráp thủ công các item với dấu phân cách chevron mặc định."
         fullWidth
         codeString={`<Breadcrumb className="w-full max-w-lg">
-  <BreadcrumbList>
-    <BreadcrumbItem>
-      <BreadcrumbLink href="/">Trang chủ</BreadcrumbLink>
-    </BreadcrumbItem>
-    <BreadcrumbSeparator />
-    <BreadcrumbItem>
-      <BreadcrumbLink href="/components">Thành phần</BreadcrumbLink>
-    </BreadcrumbItem>
-    <BreadcrumbSeparator />
-    <BreadcrumbItem>
-      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
-    </BreadcrumbItem>
-  </BreadcrumbList>
-</Breadcrumb>
-`}
+    <BreadcrumbList>
+      <BreadcrumbItem>
+        <BreadcrumbLink href="/">Trang chủ</BreadcrumbLink>
+      </BreadcrumbItem>
+      <BreadcrumbSeparator />
+      <BreadcrumbItem>
+        <BreadcrumbLink href="/components">
+          Thành phần
+        </BreadcrumbLink>
+      </BreadcrumbItem>
+      <BreadcrumbSeparator />
+      <BreadcrumbItem>
+        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+      </BreadcrumbItem>
+    </BreadcrumbList>
+  </Breadcrumb>`}
       >
         <Breadcrumb className="w-full max-w-lg">
           <BreadcrumbList>
@@ -129,24 +128,26 @@ function BreadcrumbMicroShowcase() {
           label="Đổi dấu phân cách (Custom Separator)"
           description="Truyền icon bất kỳ (VD: SlashIcon) vào bên trong BreadcrumbSeparator."
           codeString={`<Breadcrumb className="w-full max-w-lg">
-  <BreadcrumbList>
-    <BreadcrumbItem>
-      <BreadcrumbLink href="/">Trang chủ</BreadcrumbLink>
-    </BreadcrumbItem>
-    <BreadcrumbSeparator>
-      <SlashIcon className="size-3.5" />
-    </BreadcrumbSeparator>
-    <BreadcrumbItem>
-      <BreadcrumbLink href="/components">Thành phần</BreadcrumbLink>
-    </BreadcrumbItem>
-    <BreadcrumbSeparator>
-      <SlashIcon className="size-3.5" />
-    </BreadcrumbSeparator>
-    <BreadcrumbItem>
-      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
-    </BreadcrumbItem>
-  </BreadcrumbList>
-</Breadcrumb>`}
+    <BreadcrumbList>
+      <BreadcrumbItem>
+        <BreadcrumbLink href="/">Trang chủ</BreadcrumbLink>
+      </BreadcrumbItem>
+      <BreadcrumbSeparator>
+        <SlashIcon className="size-3.5" />
+      </BreadcrumbSeparator>
+      <BreadcrumbItem>
+        <BreadcrumbLink href="/components">
+          Thành phần
+        </BreadcrumbLink>
+      </BreadcrumbItem>
+      <BreadcrumbSeparator>
+        <SlashIcon className="size-3.5" />
+      </BreadcrumbSeparator>
+      <BreadcrumbItem>
+        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+      </BreadcrumbItem>
+    </BreadcrumbList>
+  </Breadcrumb>`}
         >
           <Breadcrumb className="w-full max-w-lg">
             <BreadcrumbList>
@@ -173,36 +174,38 @@ function BreadcrumbMicroShowcase() {
           label="Dấu ba chấm (With Ellipsis)"
           description="Sử dụng BreadcrumbEllipsis cùng DropdownMenu để giấu các đường dẫn trung gian."
           codeString={`<Breadcrumb className="w-full max-w-lg">
-  <BreadcrumbList>
-    <BreadcrumbItem>
-      <BreadcrumbLink href="/">Trang chủ</BreadcrumbLink>
-    </BreadcrumbItem>
-    <BreadcrumbSeparator />
-    <BreadcrumbItem>
-      <DropdownMenu>
-        <DropdownMenuTrigger className="flex items-center gap-1 hover:text-foreground">
-          <BreadcrumbEllipsis className="h-4 w-4" />
-          <span className="sr-only">Toggle menu</span>
-        </DropdownMenuTrigger>
-        <DropdownMenuPortal>
-          <DropdownMenuContent align="start">
-            <DropdownMenuItem>Tài liệu</DropdownMenuItem>
-            <DropdownMenuItem>Giao diện</DropdownMenuItem>
-            <DropdownMenuItem>GitHub</DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenuPortal>
-      </DropdownMenu>
-    </BreadcrumbItem>
-    <BreadcrumbSeparator />
-    <BreadcrumbItem>
-      <BreadcrumbLink href="/docs/components">Thành phần</BreadcrumbLink>
-    </BreadcrumbItem>
-    <BreadcrumbSeparator />
-    <BreadcrumbItem>
-      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
-    </BreadcrumbItem>
-  </BreadcrumbList>
-</Breadcrumb>`}
+    <BreadcrumbList>
+      <BreadcrumbItem>
+        <BreadcrumbLink href="/">Trang chủ</BreadcrumbLink>
+      </BreadcrumbItem>
+      <BreadcrumbSeparator />
+      <BreadcrumbItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger className="flex items-center gap-1 hover:text-foreground">
+            <BreadcrumbEllipsis className="h-4 w-4" />
+            <span className="sr-only">Toggle menu</span>
+          </DropdownMenuTrigger>
+          <DropdownMenuPortal>
+            <DropdownMenuContent align="start">
+              <DropdownMenuItem>Tài liệu</DropdownMenuItem>
+              <DropdownMenuItem>Giao diện</DropdownMenuItem>
+              <DropdownMenuItem>GitHub</DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenuPortal>
+        </DropdownMenu>
+      </BreadcrumbItem>
+      <BreadcrumbSeparator />
+      <BreadcrumbItem>
+        <BreadcrumbLink href="/docs/components">
+          Thành phần
+        </BreadcrumbLink>
+      </BreadcrumbItem>
+      <BreadcrumbSeparator />
+      <BreadcrumbItem>
+        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+      </BreadcrumbItem>
+    </BreadcrumbList>
+  </Breadcrumb>`}
         >
           <Breadcrumb className="w-full max-w-lg">
             <BreadcrumbList>

package/src/dev/showcase/button.tsx

@@ -1,3 +1,9 @@
+import { useState } from "react";
+
+import { DownloadIcon, MailIcon, PlusIcon } from "lucide-react";
+
+import { Button, ButtonIcon } from "../../components/micro/button";
+import { Spinner } from "../../components/micro/spinner";
 import { useDevContext } from "../../dev/components/dev-context";
 import {
   DocsP,
@@ -6,11 +12,6 @@ import {
   Showcase,
   ShowcaseDocs,
 } from "../../dev/components/showcase";
-import { DownloadIcon, MailIcon, PlusIcon } from "lucide-react";
-import { useState } from "react";
-
-import { Button, ButtonIcon } from "../../components/micro/button";
-import { Spinner } from "../../components/micro/spinner";
 import { type Size } from "../../lib/types";
 
 function ButtonMicroShowcase({ globalSize }: { globalSize: Size }) {
@@ -33,22 +34,11 @@ function ButtonMicroShowcase({ globalSize }: { globalSize: Size }) {
       <ExampleSection
         label="Variants"
         description="Tất cả các kiểu hiển thị hiện có."
-        codeString={`<Button variant="solid">
-  Solid
-</Button>
-<Button variant="outline">
-  Outline
-</Button>
-<Button variant="soft">
-  Soft
-</Button>
-<Button variant="ghost">
-  Ghost
-</Button>
-<Button variant="link">
-  Link
-</Button>
-`}
+        codeString={`<Button variant="solid">Solid</Button>
+  <Button variant="outline">Outline</Button>
+  <Button variant="soft">Soft</Button>
+  <Button variant="ghost">Ghost</Button>
+  <Button variant="link">Link</Button>`}
       >
         <Button size={globalSize} variant="solid">
           Solid
@@ -71,34 +61,15 @@ function ButtonMicroShowcase({ globalSize }: { globalSize: Size }) {
       <ExampleSection
         label="Colors"
         description="Các màu semantic đi kèm variant solid."
-        codeString={`<Button color="primary">
-  Primary
-</Button>
-<Button color="secondary">
-  Secondary
-</Button>
-<Button color="destructive">
-  Destructive
-</Button>
-<Button color="warning">
-  Warning
-</Button>
-<Button color="success">
-  Success
-</Button>
-<Button color="info">
-  Info
-</Button>
-<Button color="tertiary">
-  Tertiary
-</Button>
-<Button color="muted">
-  Muted
-</Button>
-<Button color="accent">
-  Accent
-</Button>
-`}
+        codeString={`<Button color="primary">Primary</Button>
+  <Button color="secondary">Secondary</Button>
+  <Button color="destructive">Destructive</Button>
+  <Button color="warning">Warning</Button>
+  <Button color="success">Success</Button>
+  <Button color="info">Info</Button>
+  <Button color="tertiary">Tertiary</Button>
+  <Button color="muted">Muted</Button>
+  <Button color="accent">Accent</Button>`}
       >
         <Button size={globalSize} color="primary">
           Primary
@@ -135,14 +106,13 @@ function ButtonMicroShowcase({ globalSize }: { globalSize: Size }) {
           label="With Icon"
           description="Button kèm icon ở đầu hoặc cuối."
           codeString={`<Button variant="outline">
-  <ButtonIcon render={<MailIcon />} />
-  Login with Email
-</Button>
-<Button>
-  <ButtonIcon render={<DownloadIcon />} />
-  Download
-</Button>
-`}
+    <ButtonIcon render={<MailIcon />} />
+    Login with Email
+  </Button>
+  <Button>
+    <ButtonIcon render={<DownloadIcon />} />
+    Download
+  </Button>`}
         >
           <Button size={globalSize} variant="outline">
             <ButtonIcon render={<MailIcon />} />
@@ -158,15 +128,14 @@ function ButtonMicroShowcase({ globalSize }: { globalSize: Size }) {
           label="Icon Only"
           description="Button vuông chỉ chứa icon."
           codeString={`<Button variant="outline" iconOnly={true}>
-  <ButtonIcon render={<PlusIcon />} />
-</Button>
-<Button variant="ghost" iconOnly={true}>
-  <ButtonIcon render={<MailIcon />} />
-</Button>
-<Button variant="soft" iconOnly={true}>
-  <ButtonIcon render={<DownloadIcon />} />
-</Button>
-`}
+    <ButtonIcon render={<PlusIcon />} />
+  </Button>
+  <Button variant="ghost" iconOnly={true}>
+    <ButtonIcon render={<MailIcon />} />
+  </Button>
+  <Button variant="soft" iconOnly={true}>
+    <ButtonIcon render={<DownloadIcon />} />
+  </Button>`}
         >
           <Button size={globalSize} variant="outline" iconOnly={true}>
             <ButtonIcon render={<PlusIcon />} />
@@ -184,22 +153,19 @@ function ButtonMicroShowcase({ globalSize }: { globalSize: Size }) {
       <ExampleSection
         label="Disabled"
         description="Button không thể tương tác, hiển thị mờ."
-        codeString={`<Button disabled>
-  Solid Disabled
-</Button>
-<Button variant="outline" disabled>
-  Outline Disabled
-</Button>
-<Button variant="soft" disabled>
-  Soft Disabled
-</Button>
-<Button variant="ghost" disabled>
-  Ghost Disabled
-</Button>
-<Button variant="link" disabled>
-  Link Disabled
-</Button>
-`}
+        codeString={`<Button disabled>Solid Disabled</Button>
+  <Button variant="outline" disabled>
+    Outline Disabled
+  </Button>
+  <Button variant="soft" disabled>
+    Soft Disabled
+  </Button>
+  <Button variant="ghost" disabled>
+    Ghost Disabled
+  </Button>
+  <Button variant="link" disabled>
+    Link Disabled
+  </Button>`}
       >
         <Button size={globalSize} disabled>
           Solid Disabled
@@ -224,13 +190,18 @@ function ButtonMicroShowcase({ globalSize }: { globalSize: Size }) {
           label="Loading State"
           description="Button kèm Spinner khi đang xử lý async."
           fullWidth
-          codeString={`<Button color="primary" className="w-full" disabled={isSending} onClick={handleSend}>
-  {isSending && <Spinner />}
-  {isSending ? "Sending..." : "Send Message"}
-</Button>
-<Button variant="outline" className="w-full">
-  Save Draft
-</Button>`}
+          codeString={`<Button
+    color="primary"
+    className="w-full"
+    disabled={isSending}
+    onClick={handleSend}
+  >
+    {isSending && <Spinner />}
+    {isSending ? "Sending..." : "Send Message"}
+  </Button>
+  <Button variant="outline" className="w-full">
+    Save Draft
+  </Button>`}
         >
           <div className="flex flex-col gap-3 w-full max-w-xs mx-auto">
             <Button
@@ -253,10 +224,15 @@ function ButtonMicroShowcase({ globalSize }: { globalSize: Size }) {
           label="Destructive"
           description="Xác nhận hành động nguy hiểm (xoá dữ liệu, huỷ tài khoản...)."
           fullWidth
-          codeString={`<Button color="destructive" className="w-full mt-1" disabled={isDeleting} onClick={handleDelete}>
-  {isDeleting && <Spinner />}
-  {isDeleting ? "Deleting..." : "Delete Permanently"}
-</Button>`}
+          codeString={`<Button
+    color="destructive"
+    className="w-full mt-1"
+    disabled={isDeleting}
+    onClick={handleDelete}
+  >
+    {isDeleting && <Spinner />}
+    {isDeleting ? "Deleting..." : "Delete Permanently"}
+  </Button>`}
         >
           <div className="w-full max-w-xs mx-auto rounded-lg border border-destructive/20 bg-destructive/5 p-4 flex flex-col gap-2">
             <p className="text-sm font-medium">Delete Workspace</p>
@@ -292,9 +268,9 @@ export default function ButtonShowcase() {
       generalConcept={
         <ShowcaseDocs>
           <DocsP>
-            Thành phần cơ bản để người dùng tương tác. Hỗ trợ nhiều variant,
-            màu sắc, icon, và trạng thái loading/disabled. Thường được dùng
-            trong form, dialog, hoặc toolbar.
+            Thành phần cơ bản để người dùng tương tác. Hỗ trợ nhiều variant, màu
+            sắc, icon, và trạng thái loading/disabled. Thường được dùng trong
+            form, dialog, hoặc toolbar.
           </DocsP>
         </ShowcaseDocs>
       }

package/src/dev/showcase/calendar.tsx

@@ -1,3 +1,9 @@
+import { useState } from "react";
+
+import { type DateRange } from "react-day-picker";
+
+import { DatePicker } from "../../components/macro/date-picker";
+import { Calendar } from "../../components/micro/calendar";
 import { useDevContext } from "../../dev/components/dev-context";
 import {
   DocsP,
@@ -6,11 +12,6 @@ import {
   Showcase,
   ShowcaseDocs,
 } from "../../dev/components/showcase";
-import { useState } from "react";
-import { type DateRange } from "react-day-picker";
-
-import { Calendar } from "../../components/micro/calendar";
-import { DatePicker } from "../../components/macro/date-picker";
 import { type Size } from "../../lib/types";
 
 function CalendarMicroShowcase({ globalSize }: { globalSize: Size }) {
@@ -110,10 +111,10 @@ function CalendarMicroShowcase({ globalSize }: { globalSize: Size }) {
           label="Disabled Dates"
           description="Vô hiệu hóa chọn ngày (VD: ngày trong quá khứ)."
           codeString={`<Calendar
-  mode="single"
-  disabled={(date) => date < new Date()}
-  className="rounded-xl border border-border shadow"
-/>`}
+    mode="single"
+    disabled={(date) => date < new Date()}
+    className="rounded-xl border border-border shadow"
+  />`}
         >
           <div className="border border-border rounded-xl inline-block bg-card p-3">
             <Calendar
@@ -132,12 +133,12 @@ function CalendarMicroShowcase({ globalSize }: { globalSize: Size }) {
         label="Two Months"
         description="Hiển thị 2 tháng liền kề (numberOfMonths=2) thường dùng cho Date Range."
         codeString={`<Calendar
-  mode="range"
-  selected={date}
-  onSelect={setDate}
-  numberOfMonths={2}
-  className="rounded-xl border border-border shadow"
-/>`}
+    mode="range"
+    selected={date}
+    onSelect={setDate}
+    numberOfMonths={2}
+    className="rounded-xl border border-border shadow"
+  />`}
       >
         <div className="border border-border rounded-xl inline-block bg-card p-3 overflow-x-auto max-w-full">
           <Calendar
@@ -156,10 +157,10 @@ function CalendarMicroShowcase({ globalSize }: { globalSize: Size }) {
         label="With Navigation"
         description="Lịch với điều hướng thả xuống cho tháng/năm."
         codeString={`<Calendar
-  mode="single"
-  captionLayout="dropdown"
-  className="rounded-xl border border-border shadow"
-/>`}
+    mode="single"
+    captionLayout="dropdown"
+    className="rounded-xl border border-border shadow"
+  />`}
       >
         <div className="border border-border rounded-xl inline-block bg-card p-3">
           <Calendar
@@ -240,12 +241,13 @@ function CalendarMacroShowcase({ globalSize }: { globalSize: Size }) {
         <ExampleSection
           label="Single Dropdown"
           description="Sổ danh sách để chọn tháng và năm nhanh chóng thay vì click qua lại liên tục."
-          codeString={`<DatePicker className="w-64"
-      label="Birthday"
-      captionLayout="dropdown"
-      startMonth={new Date(1900, 0)}
-      endMonth={new Date()}
-    />`}
+          codeString={`<DatePicker
+    className="w-64"
+    label="Birthday"
+    captionLayout="dropdown"
+    startMonth={new Date(1900, 0)}
+    endMonth={new Date()}
+  />`}
         >
           <DatePicker
             className="w-64"
@@ -261,14 +263,15 @@ function CalendarMacroShowcase({ globalSize }: { globalSize: Size }) {
         <ExampleSection
           label="Range Dropdown"
           description="Sổ danh sách cho cả 2 tháng khi chọn khoảng thời gian (cần numberOfMonths={2})."
-          codeString={`<DatePicker className="w-fit"
-      mode="range"
-      label="Date Range with Dropdowns"
-      captionLayout="dropdown"
-      numberOfMonths={2}
-      startMonth={new Date(2020, 0)}
-      endMonth={new Date(2030, 11)}
-    />`}
+          codeString={`<DatePicker
+    className="w-fit"
+    mode="range"
+    label="Date Range with Dropdowns"
+    captionLayout="dropdown"
+    numberOfMonths={2}
+    startMonth={new Date(2020, 0)}
+    endMonth={new Date(2030, 11)}
+  />`}
         >
           <DatePicker
             className="w-fit"
@@ -289,7 +292,8 @@ function CalendarMacroShowcase({ globalSize }: { globalSize: Size }) {
       <ExampleSection
         label="With Label & Description"
         description="Hiển thị label và mô tả bên dưới trigger."
-        codeString={`<DatePicker className="w-64"
+        codeString={`<DatePicker
+    className="w-64"
     label="Start Date"
     description="Chọn ngày bắt đầu dự án."
     placeholder="Pick a date"
@@ -310,7 +314,8 @@ function CalendarMacroShowcase({ globalSize }: { globalSize: Size }) {
       <ExampleSection
         label="Error State"
         description="Trigger hiển thị viền đỏ khi có errorMessage."
-        codeString={`<DatePicker className="w-64"
+        codeString={`<DatePicker
+    className="w-64"
     label="Due Date"
     errorMessage="Due date is required."
   />`}
@@ -329,10 +334,7 @@ function CalendarMacroShowcase({ globalSize }: { globalSize: Size }) {
       <ExampleSection
         label="Disabled"
         description="Trigger bị vô hiệu hoá, người dùng không thể mở calendar."
-        codeString={`<DatePicker className="w-64"
-    label="Date"
-    disabled
-  />`}
+        codeString={`<DatePicker className="w-64" label="Date" disabled />`}
       >
         <DatePicker
           className="w-64"