gladvn 0.2.36 → 0.2.37

package/src/dev/showcase/toast.tsx

@@ -5,7 +5,7 @@ import { useDevContext } from "../../dev/components/dev-context";
 import {
   DocsH3,
   DocsP,
-  ExampleSection,
+  ShowcaseExample,
   Showcase,
   ShowcaseDocs
 } from "../../dev/components/showcase";
@@ -13,20 +13,17 @@ 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">
+    <div className="space-y-10">
+      <ShowcaseExample title="Toast Notifications" description="Nhấp để kích hoạt các loại toast khác nhau." code={`<div className="flex flex-wrap gap-3">
     <Button
       variant="outline"
       onClick={() => {
-        toast("Event has been created", {
+        toast("Sự kiện đã được tạo", {
           description:
-            "Sunday, December 03, 2023 at 9:00 AM",
+            "Chủ nhật, ngày 03 tháng 12 năm 2023 lúc 9:00 sáng",
           action: {
-            label: "Undo",
-            onClick: () => console.log("Undo") } })
+            label: "Hoàn tác",
+            onClick: () => console.log("Hoàn tác") } })
       }}
     >
       Show Toast
@@ -49,44 +46,45 @@ function ToastMicroShowcase({ globalSize }: { globalSize: Size }) {
     >
       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>`} preview={
+                  <>
+          <div className="flex flex-wrap gap-3">
+                    <Button
+                      variant="outline"
+                      size={globalSize}
+                      onClick={() => {
+                        toast("Sự kiện đã được tạo", {
+                          description: "Chủ nhật, ngày 03 tháng 12 năm 2023 lúc 9:00 sáng",
+                          action: {
+                            label: "Hoàn tác",
+                            onClick: () => console.log("Hoàn tác") } });
+                      }}
+                    >
+                      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>
+                  </>
+                } />
     </div>
   );
 }
@@ -97,17 +95,13 @@ export default function ToastShowcase() {
     <Showcase
       title="Toast"
       description="Một thông báo ngắn gọn được hiển thị tạm thời."
-      generalConcept={
+      guideline={
         <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} /> },
-      ]}
+      micro={{ content: <ToastMicroShowcase globalSize={globalSize} /> }}
     />
   );
 }

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

@@ -17,24 +17,17 @@ import {
   DocsH3,
   DocsP,
   ExampleGrid,
-  ExampleSection,
+  ShowcaseExample,
   Showcase,
   ShowcaseDocs
 } from "../../dev/components/showcase";
 import { type Size } from "../../lib/types";
 
-// ──────────────────────────────────────────────────────────
-// SECTION 1: Micro Content
-// ──────────────────────────────────────────────────────────
 function ToggleGroupMicroShowcase({ globalSize }: { globalSize: Size }) {
   return (
-    <div className="space-y-10 mt-6">
-      {/* Single vs Multiple */}
+    <div className="space-y-10">
       <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"]}>
+        <ShowcaseExample title="Single Selection" description="Chỉ có một mục có thể hoạt động tại một thời điểm." code={`<ToggleGroup defaultValue={["center"]}>
     <ToggleGroupItem value="left" aria-label="Align left">
       <AlignLeftIcon />
     </ToggleGroupItem>
@@ -47,25 +40,23 @@ function ToggleGroupMicroShowcase({ globalSize }: { globalSize: Size }) {
     <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>
+  </ToggleGroup>`} preview={
+                      <>
+              <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
-          label="Multiple Selection"
-          description="Nhiều mục có thể được kích hoạt đồng thời."
-          codeString={`<ToggleGroup defaultValue={["bold", "italic"]}>
+        <ShowcaseExample title="Multiple Selection" description="Nhiều mục có thể được kích hoạt đồng thời." code={`<ToggleGroup defaultValue={["bold", "italic"]}>
     <ToggleGroupItem value="bold" aria-label="Toggle bold">
       <BoldIcon />
     </ToggleGroupItem>
@@ -81,28 +72,25 @@ function ToggleGroupMicroShowcase({ globalSize }: { globalSize: Size }) {
     >
       <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>
+  </ToggleGroup>`} preview={
+                      <>
+              <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>
+                      </>
+                    } />
       </ExampleGrid>
 
-      {/* Variants */}
       <ExampleGrid>
-        <ExampleSection
-          label="Outline Variant"
-          description='variant="outline" — viền bao quanh từng item.'
-          codeString={`<ToggleGroup variant="outline">
+        <ShowcaseExample title="Outline Variant" description='variant="outline" — viền bao quanh từng item.' code={`<ToggleGroup variant="outline">
     <ToggleGroupItem value="bold" aria-label="Bold">
       <BoldIcon />
     </ToggleGroupItem>
@@ -115,25 +103,23 @@ function ToggleGroupMicroShowcase({ globalSize }: { globalSize: Size }) {
     >
       <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>
+  </ToggleGroup>`} preview={
+                      <>
+              <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
-          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}>
+        <ShowcaseExample title="Compact (spacing={0})" description="spacing={0} — các nút dính liền nhau, phù hợp với toolbar." code={`<ToggleGroup variant="outline" spacing={0}>
     <ToggleGroupItem value="left" aria-label="Align left">
       <AlignLeftIcon />
     </ToggleGroupItem>
@@ -146,28 +132,25 @@ function ToggleGroupMicroShowcase({ globalSize }: { globalSize: Size }) {
     <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>
+  </ToggleGroup>`} preview={
+                      <>
+              <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>
+                      </>
+                    } />
       </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">
+        <ShowcaseExample title="Vertical" description='orientation="vertical" — sắp xếp các nút theo chiều dọc.' code={`<ToggleGroup orientation="vertical">
     <ToggleGroupItem value="bold" aria-label="Bold">
       <BoldIcon />
     </ToggleGroupItem>
@@ -180,25 +163,23 @@ function ToggleGroupMicroShowcase({ globalSize }: { globalSize: Size }) {
     >
       <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>
+  </ToggleGroup>`} preview={
+                      <>
+              <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
-          label="Disabled Items"
-          description="Từng ToggleGroupItem có thể bị vô hiệu hóa riêng lẻ."
-          codeString={`<ToggleGroup>
+        <ShowcaseExample title="Disabled Items" description="Từng ToggleGroupItem có thể bị vô hiệu hóa riêng lẻ." code={`<ToggleGroup>
     <ToggleGroupItem value="bold" aria-label="Bold">
       <BoldIcon />
     </ToggleGroupItem>
@@ -215,39 +196,37 @@ function ToggleGroupMicroShowcase({ globalSize }: { globalSize: Size }) {
     >
       <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>
+  </ToggleGroup>`} preview={
+                      <>
+              <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>
+                      </>
+                    } />
       </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={
+      guideline={
         <ShowcaseDocs>
           <DocsH3>Toggle Group</DocsH3>
           <DocsP>
@@ -260,11 +239,7 @@ export default function ToggleGroupShowcase() {
           </DocsP>
         </ShowcaseDocs>
       }
-      tabs={[
-        {
-          label: "Micro (Primitive)",
-          content: <ToggleGroupMicroShowcase globalSize={globalSize} /> },
-      ]}
+      micro={{ content: <ToggleGroupMicroShowcase globalSize={globalSize} /> }}
     />
   );
 }