gladvn 0.2.14

package/src/dev/showcase/toast.tsx

@@ -0,0 +1,119 @@
+import { useDevContext } from "../../dev/components/dev-context";
+import {
+  DocsH3,
+  DocsP,
+  ExampleSection,
+  Showcase,
+  ShowcaseDocs,
+} from "../../dev/components/showcase";
+import { useState } from "react";
+import { toast } from "sonner";
+
+import { Button } from "../../components/micro/button";
+import { type Size } from "../../lib/types";
+
+function ToastMicroShowcase({ globalSize }: { globalSize: Size }) {
+  return (
+    <div className="space-y-10 mt-6">
+      <ExampleSection
+        label="Toast Notifications"
+        description="Nhấp để kích hoạt các loại toast khác nhau."
+        codeString={`<div className="flex flex-wrap gap-3">
+  <Button
+    variant="outline"
+    onClick={() => {
+      toast("Event has been created", {
+        description: "Sunday, December 03, 2023 at 9:00 AM",
+        action: {
+          label: "Undo",
+          onClick: () => console.log("Undo"),
+        },
+      });
+    }}
+  >
+    Show Toast
+  </Button>
+  <Button
+    variant="outline"
+    color="success"
+    onClick={() => {
+      toast.success("Profile updated successfully");
+    }}
+  >
+    Success Toast
+  </Button>
+  <Button
+    variant="outline"
+    color="destructive"
+    onClick={() => {
+      toast.error("Failed to update profile");
+    }}
+  >
+    Error Toast
+  </Button>
+</div>
+`}
+      >
+        <div className="flex flex-wrap gap-3">
+          <Button
+            variant="outline"
+            size={globalSize}
+            onClick={() => {
+              toast("Event has been created", {
+                description: "Sunday, December 03, 2023 at 9:00 AM",
+                action: {
+                  label: "Undo",
+                  onClick: () => console.log("Undo"),
+                },
+              });
+            }}
+          >
+            Show Toast
+          </Button>
+          <Button
+            variant="outline"
+            color="success"
+            size={globalSize}
+            onClick={() => {
+              toast.success("Profile updated successfully");
+            }}
+          >
+            Success Toast
+          </Button>
+          <Button
+            variant="outline"
+            color="destructive"
+            size={globalSize}
+            onClick={() => {
+              toast.error("Failed to update profile");
+            }}
+          >
+            Error Toast
+          </Button>
+        </div>
+      </ExampleSection>
+    </div>
+  );
+}
+
+export default function ToastShowcase() {
+  const { size: globalSize } = useDevContext();
+  return (
+    <Showcase
+      title="Toast"
+      description="Một thông báo ngắn gọn được hiển thị tạm thời."
+      generalConcept={
+        <ShowcaseDocs>
+          <DocsH3>Toast (Sonner)</DocsH3>
+          <DocsP>Sử dụng để hiển thị các thông báo nhanh cho người dùng.</DocsP>
+        </ShowcaseDocs>
+      }
+      tabs={[
+        {
+          label: "Micro (Primitive)",
+          content: <ToastMicroShowcase globalSize={globalSize} />,
+        },
+      ]}
+    />
+  );
+}

package/src/dev/showcase/toggle-group.tsx

@@ -0,0 +1,223 @@
+import { useDevContext } from "../../dev/components/dev-context";
+import { useState } from "react";
+import {
+  AlignCenterIcon,
+  AlignLeftIcon,
+  AlignRightIcon,
+  BoldIcon,
+  ItalicIcon,
+  UnderlineIcon,
+} from "lucide-react";
+
+import {
+  ToggleGroup,
+  ToggleGroupItem,
+} from "../../components/micro/toggle-group";
+import { type Size } from "../../lib/types";
+import {
+  DocsCode,
+  DocsH3,
+  DocsP,
+  ExampleGrid,
+  ExampleSection,
+  Showcase,
+  ShowcaseDocs,
+} from "../../dev/components/showcase";
+
+// ──────────────────────────────────────────────────────────
+// SECTION 1: Micro Content
+// ──────────────────────────────────────────────────────────
+function ToggleGroupMicroShowcase({ globalSize }: { globalSize: Size }) {
+  return (
+    <div className="space-y-10 mt-6">
+      {/* Single vs Multiple */}
+      <ExampleGrid>
+        <ExampleSection
+          label="Single Selection"
+          description="Chỉ có một mục có thể hoạt động tại một thời điểm."
+          codeString={`<ToggleGroup defaultValue={["center"]}>
+  <ToggleGroupItem value="left" aria-label="Align left">
+    <AlignLeftIcon />
+  </ToggleGroupItem>
+  <ToggleGroupItem value="center" aria-label="Align center">
+    <AlignCenterIcon />
+  </ToggleGroupItem>
+  <ToggleGroupItem value="right" aria-label="Align right">
+    <AlignRightIcon />
+  </ToggleGroupItem>
+</ToggleGroup>`}
+        >
+          <ToggleGroup defaultValue={["center"]} size={globalSize}>
+            <ToggleGroupItem value="left" aria-label="Align left">
+              <AlignLeftIcon />
+            </ToggleGroupItem>
+            <ToggleGroupItem value="center" aria-label="Align center">
+              <AlignCenterIcon />
+            </ToggleGroupItem>
+            <ToggleGroupItem value="right" aria-label="Align right">
+              <AlignRightIcon />
+            </ToggleGroupItem>
+          </ToggleGroup>
+        </ExampleSection>
+
+        <ExampleSection
+          label="Multiple Selection"
+          description="Nhiều mục có thể được kích hoạt đồng thời."
+          codeString={`<ToggleGroup defaultValue={["bold", "italic"]}>
+  <ToggleGroupItem value="bold" aria-label="Toggle bold">
+    <BoldIcon />
+  </ToggleGroupItem>
+  <ToggleGroupItem value="italic" aria-label="Toggle italic">
+    <ItalicIcon />
+  </ToggleGroupItem>
+  <ToggleGroupItem value="underline" aria-label="Toggle underline">
+    <UnderlineIcon />
+  </ToggleGroupItem>
+</ToggleGroup>`}
+        >
+          <ToggleGroup defaultValue={["bold", "italic"]} size={globalSize}>
+            <ToggleGroupItem value="bold" aria-label="Toggle bold">
+              <BoldIcon />
+            </ToggleGroupItem>
+            <ToggleGroupItem value="italic" aria-label="Toggle italic">
+              <ItalicIcon />
+            </ToggleGroupItem>
+            <ToggleGroupItem value="underline" aria-label="Toggle underline">
+              <UnderlineIcon />
+            </ToggleGroupItem>
+          </ToggleGroup>
+        </ExampleSection>
+      </ExampleGrid>
+
+      {/* Variants */}
+      <ExampleGrid>
+        <ExampleSection
+          label="Outline Variant"
+          description='variant="outline" — viền bao quanh từng item.'
+          codeString={`<ToggleGroup variant="outline">
+  <ToggleGroupItem value="bold" aria-label="Bold"><BoldIcon /></ToggleGroupItem>
+  <ToggleGroupItem value="italic" aria-label="Italic"><ItalicIcon /></ToggleGroupItem>
+  <ToggleGroupItem value="underline" aria-label="Underline"><UnderlineIcon /></ToggleGroupItem>
+</ToggleGroup>`}
+        >
+          <ToggleGroup variant="outline" size={globalSize}>
+            <ToggleGroupItem value="bold" aria-label="Bold">
+              <BoldIcon />
+            </ToggleGroupItem>
+            <ToggleGroupItem value="italic" aria-label="Italic">
+              <ItalicIcon />
+            </ToggleGroupItem>
+            <ToggleGroupItem value="underline" aria-label="Underline">
+              <UnderlineIcon />
+            </ToggleGroupItem>
+          </ToggleGroup>
+        </ExampleSection>
+
+        <ExampleSection
+          label="Compact (spacing={0})"
+          description="spacing={0} — các nút dính liền nhau, phù hợp với toolbar."
+          codeString={`<ToggleGroup variant="outline" spacing={0}>
+  <ToggleGroupItem value="left" aria-label="Align left"><AlignLeftIcon /></ToggleGroupItem>
+  <ToggleGroupItem value="center" aria-label="Align center"><AlignCenterIcon /></ToggleGroupItem>
+  <ToggleGroupItem value="right" aria-label="Align right"><AlignRightIcon /></ToggleGroupItem>
+</ToggleGroup>`}
+        >
+          <ToggleGroup variant="outline" spacing={0} size={globalSize}>
+            <ToggleGroupItem value="left" aria-label="Align left">
+              <AlignLeftIcon />
+            </ToggleGroupItem>
+            <ToggleGroupItem value="center" aria-label="Align center">
+              <AlignCenterIcon />
+            </ToggleGroupItem>
+            <ToggleGroupItem value="right" aria-label="Align right">
+              <AlignRightIcon />
+            </ToggleGroupItem>
+          </ToggleGroup>
+        </ExampleSection>
+      </ExampleGrid>
+
+      {/* Vertical & Disabled */}
+      <ExampleGrid>
+        <ExampleSection
+          label="Vertical"
+          description='orientation="vertical" — sắp xếp các nút theo chiều dọc.'
+          codeString={`<ToggleGroup orientation="vertical">
+  <ToggleGroupItem value="bold" aria-label="Bold"><BoldIcon /></ToggleGroupItem>
+  <ToggleGroupItem value="italic" aria-label="Italic"><ItalicIcon /></ToggleGroupItem>
+  <ToggleGroupItem value="underline" aria-label="Underline"><UnderlineIcon /></ToggleGroupItem>
+</ToggleGroup>`}
+        >
+          <ToggleGroup orientation="vertical" size={globalSize}>
+            <ToggleGroupItem value="bold" aria-label="Bold">
+              <BoldIcon />
+            </ToggleGroupItem>
+            <ToggleGroupItem value="italic" aria-label="Italic">
+              <ItalicIcon />
+            </ToggleGroupItem>
+            <ToggleGroupItem value="underline" aria-label="Underline">
+              <UnderlineIcon />
+            </ToggleGroupItem>
+          </ToggleGroup>
+        </ExampleSection>
+
+        <ExampleSection
+          label="Disabled Items"
+          description="Từng ToggleGroupItem có thể bị vô hiệu hóa riêng lẻ."
+          codeString={`<ToggleGroup>
+  <ToggleGroupItem value="bold" aria-label="Bold"><BoldIcon /></ToggleGroupItem>
+  <ToggleGroupItem value="italic" disabled aria-label="Italic (disabled)"><ItalicIcon /></ToggleGroupItem>
+  <ToggleGroupItem value="underline" aria-label="Underline"><UnderlineIcon /></ToggleGroupItem>
+</ToggleGroup>`}
+        >
+          <ToggleGroup size={globalSize}>
+            <ToggleGroupItem value="bold" aria-label="Bold">
+              <BoldIcon />
+            </ToggleGroupItem>
+            <ToggleGroupItem
+              value="italic"
+              disabled
+              aria-label="Italic (disabled)"
+            >
+              <ItalicIcon />
+            </ToggleGroupItem>
+            <ToggleGroupItem value="underline" aria-label="Underline">
+              <UnderlineIcon />
+            </ToggleGroupItem>
+          </ToggleGroup>
+        </ExampleSection>
+      </ExampleGrid>
+    </div>
+  );
+}
+
+// ──────────────────────────────────────────────────────────
+// SECTION 2: Entry point
+// ──────────────────────────────────────────────────────────
+export default function ToggleGroupShowcase() {
+  const { size: globalSize } = useDevContext();
+  return (
+    <Showcase
+      title="Toggle Group"
+      description="Một tập hợp các nút hai trạng thái có thể bật hoặc tắt, hỗ trợ đơn và đa lựa chọn."
+      generalConcept={
+        <ShowcaseDocs>
+          <DocsH3>Toggle Group</DocsH3>
+          <DocsP>
+            <DocsCode>ToggleGroup</DocsCode> nhóm nhiều{" "}
+            <DocsCode>ToggleGroupItem</DocsCode> lại với nhau. Props{" "}
+            <DocsCode>variant</DocsCode> và <DocsCode>size</DocsCode> được
+            truyền qua Context xuống tất cả items — không cần set trên từng
+            item. Dùng <DocsCode>{"spacing={0}"}</DocsCode> để tạo toolbar
+            compact với các nút dính liền nhau.
+          </DocsP>
+        </ShowcaseDocs>
+      }
+      tabs={[
+        {
+          label: "Micro (Primitive)",
+          content: <ToggleGroupMicroShowcase globalSize={globalSize} />,
+        },
+      ]}
+    />
+  );
+}

package/src/dev/showcase/toggle.tsx

@@ -0,0 +1,171 @@
+import { useDevContext } from "../../dev/components/dev-context";
+import { useState } from "react";
+import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react";
+
+import { Toggle } from "../../components/micro/toggle";
+import { type Size } from "../../lib/types";
+import {
+  DocsCode,
+  DocsH3,
+  DocsP,
+  ExampleGrid,
+  ExampleSection,
+  Showcase,
+  ShowcaseDocs,
+} from "../../dev/components/showcase";
+
+// ──────────────────────────────────────────────────────────
+// SECTION 1: Micro Content
+// ──────────────────────────────────────────────────────────
+function ToggleMicroShowcase({ globalSize }: { globalSize: Size }) {
+  return (
+    <div className="space-y-10 mt-6">
+      {/* Variants */}
+      <ExampleGrid>
+        <ExampleSection
+          label="Default (Ghost)"
+          description="Variant mặc định — không viền, chỉ đổi nền khi pressed."
+          codeString={`<Toggle aria-label="Toggle italic">
+  <ItalicIcon />
+  Italic
+</Toggle>
+<Toggle aria-label="Toggle bold">
+  <BoldIcon />
+  Bold
+</Toggle>`}
+        >
+          <div className="flex gap-2">
+            <Toggle aria-label="Toggle italic" size={globalSize}>
+              <ItalicIcon />
+              Italic
+            </Toggle>
+            <Toggle aria-label="Toggle bold" size={globalSize}>
+              <BoldIcon />
+              Bold
+            </Toggle>
+          </div>
+        </ExampleSection>
+
+        <ExampleSection
+          label="Outline"
+          description='variant="outline" thêm viền border-input xung quanh toggle.'
+          codeString={`<Toggle variant="outline" aria-label="Toggle italic">
+  <ItalicIcon />
+  Italic
+</Toggle>
+<Toggle variant="outline" aria-label="Toggle underline">
+  <UnderlineIcon />
+  Underline
+</Toggle>`}
+        >
+          <div className="flex gap-2">
+            <Toggle
+              variant="outline"
+              aria-label="Toggle italic"
+              size={globalSize}
+            >
+              <ItalicIcon />
+              Italic
+            </Toggle>
+            <Toggle
+              variant="outline"
+              aria-label="Toggle underline"
+              size={globalSize}
+            >
+              <UnderlineIcon />
+              Underline
+            </Toggle>
+          </div>
+        </ExampleSection>
+      </ExampleGrid>
+
+      {/* Icon Only & Disabled */}
+      <ExampleGrid>
+        <ExampleSection
+          label="Icon Only"
+          description="Toggle chỉ có icon — luôn truyền aria-label để đảm bảo a11y."
+          codeString={`<Toggle aria-label="Toggle italic"><ItalicIcon /></Toggle>
+<Toggle aria-label="Toggle bold"><BoldIcon /></Toggle>
+<Toggle variant="outline" aria-label="Toggle underline"><UnderlineIcon /></Toggle>`}
+        >
+          <div className="flex gap-2">
+            <Toggle aria-label="Toggle italic" size={globalSize}>
+              <ItalicIcon />
+            </Toggle>
+            <Toggle aria-label="Toggle bold" size={globalSize}>
+              <BoldIcon />
+            </Toggle>
+            <Toggle
+              variant="outline"
+              aria-label="Toggle underline"
+              size={globalSize}
+            >
+              <UnderlineIcon />
+            </Toggle>
+          </div>
+        </ExampleSection>
+
+        <ExampleSection
+          label="Disabled"
+          description="Toggle bị vô hiệu hóa — không thể tương tác, hiển thị mờ."
+          codeString={`<Toggle disabled aria-label="Toggle italic">
+  <ItalicIcon />
+  Italic
+</Toggle>
+<Toggle variant="outline" disabled aria-label="Toggle bold">
+  <BoldIcon />
+  Bold
+</Toggle>`}
+        >
+          <div className="flex gap-2">
+            <Toggle disabled aria-label="Toggle italic" size={globalSize}>
+              <ItalicIcon />
+              Italic
+            </Toggle>
+            <Toggle
+              variant="outline"
+              disabled
+              aria-label="Toggle bold"
+              size={globalSize}
+            >
+              <BoldIcon />
+              Bold
+            </Toggle>
+          </div>
+        </ExampleSection>
+      </ExampleGrid>
+    </div>
+  );
+}
+
+// ──────────────────────────────────────────────────────────
+// SECTION 2: Entry point
+// ──────────────────────────────────────────────────────────
+export default function ToggleShowcase() {
+  const { size: globalSize } = useDevContext();
+  return (
+    <Showcase
+      title="Toggle"
+      description="Nút hai trạng thái có thể bật hoặc tắt, hỗ trợ icon, text, variants và sizes."
+      generalConcept={
+        <ShowcaseDocs>
+          <DocsH3>Toggle</DocsH3>
+          <DocsP>
+            <DocsCode>Toggle</DocsCode> là nút có 2 trạng thái bật/tắt dựa trên{" "}
+            <DocsCode>aria-pressed</DocsCode>. Hỗ trợ 2 variant:{" "}
+            <DocsCode>default</DocsCode> (ghost, không viền) và{" "}
+            <DocsCode>outline</DocsCode> (có viền). Luôn truyền{" "}
+            <DocsCode>aria-label</DocsCode> khi Toggle chỉ chứa icon để đảm bảo
+            a11y.
+          </DocsP>
+        </ShowcaseDocs>
+      }
+      tabs={[
+        {
+          label: "Micro (Primitive)",
+          content: <ToggleMicroShowcase globalSize={globalSize} />,
+        },
+      ]}
+    />
+  );
+}