gladvn 0.2.17 → 0.2.18

package/src/dev/showcase/toast.tsx

@@ -1,3 +1,6 @@
+import { toast } from "sonner";
+
+import { Button } from "../../components/micro/button";
 import { useDevContext } from "../../dev/components/dev-context";
 import {
   DocsH3,
@@ -6,10 +9,6 @@ import {
   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 }) {
@@ -19,40 +18,40 @@ function ToastMicroShowcase({ globalSize }: { globalSize: Size }) {
         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>
-`}
+    <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

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

@@ -1,5 +1,3 @@
-import { useDevContext } from "../../dev/components/dev-context";
-import { useState } from "react";
 import {
   AlignCenterIcon,
   AlignLeftIcon,
@@ -13,7 +11,7 @@ import {
   ToggleGroup,
   ToggleGroupItem,
 } from "../../components/micro/toggle-group";
-import { type Size } from "../../lib/types";
+import { useDevContext } from "../../dev/components/dev-context";
 import {
   DocsCode,
   DocsH3,
@@ -23,6 +21,7 @@ import {
   Showcase,
   ShowcaseDocs,
 } from "../../dev/components/showcase";
+import { type Size } from "../../lib/types";
 
 // ──────────────────────────────────────────────────────────
 // SECTION 1: Micro Content
@@ -36,16 +35,19 @@ function ToggleGroupMicroShowcase({ globalSize }: { globalSize: Size }) {
           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>`}
+    <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">
@@ -64,16 +66,22 @@ function ToggleGroupMicroShowcase({ globalSize }: { globalSize: Size }) {
           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>`}
+    <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">
@@ -95,10 +103,19 @@ function ToggleGroupMicroShowcase({ globalSize }: { globalSize: Size }) {
           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>`}
+    <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">
@@ -117,10 +134,19 @@ function ToggleGroupMicroShowcase({ globalSize }: { globalSize: Size }) {
           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>`}
+    <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">
@@ -142,10 +168,19 @@ function ToggleGroupMicroShowcase({ globalSize }: { globalSize: Size }) {
           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>`}
+    <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">
@@ -164,10 +199,23 @@ function ToggleGroupMicroShowcase({ globalSize }: { globalSize: Size }) {
           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>`}
+    <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">

package/src/dev/showcase/toggle.tsx

@@ -1,9 +1,7 @@
-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 { useDevContext } from "../../dev/components/dev-context";
 import {
   DocsCode,
   DocsH3,
@@ -13,6 +11,7 @@ import {
   Showcase,
   ShowcaseDocs,
 } from "../../dev/components/showcase";
+import { type Size } from "../../lib/types";
 
 // ──────────────────────────────────────────────────────────
 // SECTION 1: Micro Content
@@ -26,13 +25,13 @@ function ToggleMicroShowcase({ globalSize }: { globalSize: Size }) {
           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>`}
+    <ItalicIcon />
+    Italic
+  </Toggle>
+  <Toggle aria-label="Toggle bold">
+    <BoldIcon />
+    Bold
+  </Toggle>`}
         >
           <div className="flex gap-2">
             <Toggle aria-label="Toggle italic" size={globalSize}>
@@ -50,13 +49,13 @@ function ToggleMicroShowcase({ globalSize }: { globalSize: Size }) {
           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>`}
+    <ItalicIcon />
+    Italic
+  </Toggle>
+  <Toggle variant="outline" aria-label="Toggle underline">
+    <UnderlineIcon />
+    Underline
+  </Toggle>`}
         >
           <div className="flex gap-2">
             <Toggle
@@ -84,9 +83,15 @@ function ToggleMicroShowcase({ globalSize }: { globalSize: Size }) {
         <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>`}
+          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}>
@@ -109,13 +114,17 @@ function ToggleMicroShowcase({ globalSize }: { globalSize: Size }) {
           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>`}
+    <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}>