gladvn 0.2.36 → 0.2.37

package/src/dev/showcase/command.tsx

@@ -24,7 +24,7 @@ import {
 import {
   DocsP,
   ExampleGrid,
-  ExampleSection,
+  ShowcaseExample,
   Showcase,
   ShowcaseDocs
 } from "../../dev/components/showcase";
@@ -33,15 +33,12 @@ function CommandMicroShowcase() {
   const [open, setOpen] = useState(false);
 
   return (
-    <div className="space-y-10 mt-6">
+    <div className="space-y-10">
       <ExampleGrid>
-        <ExampleSection
-          label="Default"
-          description="Bảng lệnh có thể tìm kiếm với các mục được nhóm."
-          codeString={`<Command className="border border-border rounded-xl shadow-sm overflow-hidden bg-background w-full">
+        <ShowcaseExample title="Default" description="Bảng lệnh có thể tìm kiếm với các mục được nhóm." code={`<Command className="border border-border rounded-xl shadow-sm overflow-hidden bg-background w-full">
     <CommandInput placeholder="Type a command or search..." />
     <CommandList>
-      <CommandEmpty>No results found.</CommandEmpty>
+      <CommandEmpty>Không tìm thấy kết quả.</CommandEmpty>
       <CommandGroup heading="Suggestions">
         <CommandItem>
           <CalendarIcon className="mr-2 h-4 w-4" />
@@ -49,7 +46,7 @@ function CommandMicroShowcase() {
         </CommandItem>
         <CommandItem>
           <SmileIcon className="mr-2 h-4 w-4" />
-          <span>Search Emoji</span>
+          <span>Tìm kiếm Emoji</span>
         </CommandItem>
         <CommandItem disabled>
           <CalculatorIcon className="mr-2 h-4 w-4" />
@@ -60,7 +57,7 @@ function CommandMicroShowcase() {
       <CommandGroup heading="Settings">
         <CommandItem>
           <UserIcon className="mr-2 h-4 w-4" />
-          <span>Profile</span>
+          <span>Hồ sơ</span>
           <CommandShortcut>⌘P</CommandShortcut>
         </CommandItem>
         <CommandItem>
@@ -70,69 +67,67 @@ function CommandMicroShowcase() {
         </CommandItem>
         <CommandItem>
           <SettingsIcon className="mr-2 h-4 w-4" />
-          <span>Settings</span>
+          <span>Cài đặt</span>
           <CommandShortcut>⌘S</CommandShortcut>
         </CommandItem>
       </CommandGroup>
     </CommandList>
   </Command>
-`}
-        >
-          <Command className="border border-border rounded-xl shadow-sm overflow-hidden bg-background w-full">
-            <CommandInput placeholder="Type a command or search..." />
-            <CommandList>
-              <CommandEmpty>No results found.</CommandEmpty>
-              <CommandGroup heading="Suggestions">
-                <CommandItem>
-                  <CalendarIcon className="mr-2 h-4 w-4" />
-                  <span>Calendar</span>
-                </CommandItem>
-                <CommandItem>
-                  <SmileIcon className="mr-2 h-4 w-4" />
-                  <span>Search Emoji</span>
-                </CommandItem>
-                <CommandItem disabled>
-                  <CalculatorIcon className="mr-2 h-4 w-4" />
-                  <span>Calculator</span>
-                </CommandItem>
-              </CommandGroup>
-              <CommandSeparator />
-              <CommandGroup heading="Settings">
-                <CommandItem>
-                  <UserIcon className="mr-2 h-4 w-4" />
-                  <span>Profile</span>
-                  <CommandShortcut>⌘P</CommandShortcut>
-                </CommandItem>
-                <CommandItem>
-                  <CreditCardIcon className="mr-2 h-4 w-4" />
-                  <span>Billing</span>
-                  <CommandShortcut>⌘B</CommandShortcut>
-                </CommandItem>
-                <CommandItem>
-                  <SettingsIcon className="mr-2 h-4 w-4" />
-                  <span>Settings</span>
-                  <CommandShortcut>⌘S</CommandShortcut>
-                </CommandItem>
-              </CommandGroup>
-            </CommandList>
-          </Command>
-        </ExampleSection>
+`} preview={
+                      <>
+              <Command className="border border-border rounded-xl shadow-sm overflow-hidden bg-background w-full">
+                          <CommandInput placeholder="Type a command or search..." />
+                          <CommandList>
+                            <CommandEmpty>Không tìm thấy kết quả.</CommandEmpty>
+                            <CommandGroup heading="Suggestions">
+                              <CommandItem>
+                                <CalendarIcon className="mr-2 h-4 w-4" />
+                                <span>Calendar</span>
+                              </CommandItem>
+                              <CommandItem>
+                                <SmileIcon className="mr-2 h-4 w-4" />
+                                <span>Tìm kiếm Emoji</span>
+                              </CommandItem>
+                              <CommandItem disabled>
+                                <CalculatorIcon className="mr-2 h-4 w-4" />
+                                <span>Calculator</span>
+                              </CommandItem>
+                            </CommandGroup>
+                            <CommandSeparator />
+                            <CommandGroup heading="Settings">
+                              <CommandItem>
+                                <UserIcon className="mr-2 h-4 w-4" />
+                                <span>Hồ sơ</span>
+                                <CommandShortcut>⌘P</CommandShortcut>
+                              </CommandItem>
+                              <CommandItem>
+                                <CreditCardIcon className="mr-2 h-4 w-4" />
+                                <span>Billing</span>
+                                <CommandShortcut>⌘B</CommandShortcut>
+                              </CommandItem>
+                              <CommandItem>
+                                <SettingsIcon className="mr-2 h-4 w-4" />
+                                <span>Cài đặt</span>
+                                <CommandShortcut>⌘S</CommandShortcut>
+                              </CommandItem>
+                            </CommandGroup>
+                          </CommandList>
+                        </Command>
+                      </>
+                    } />
 
-        <ExampleSection
-          label="Flat List"
-          description="Nhóm duy nhất không có tiêu đề."
-          codeString={`<Command className="border border-border rounded-xl shadow-sm overflow-hidden bg-background w-full">
-    <CommandInput placeholder="Search actions..." />
+        <ShowcaseExample title="Flat List" description="Nhóm duy nhất không có tiêu đề." code={`<Command className="border border-border rounded-xl shadow-sm overflow-hidden bg-background w-full">
+    <CommandInput placeholder="Tìm kiếm hành động..." />
     <CommandList>
       <CommandEmpty>No actions found.</CommandEmpty>
       <CommandGroup>
         <CommandItem>
           <UserIcon className="mr-2 h-4 w-4" />
-          <span>View Profile</span>
+          <span>Xem hồ sơ</span>
         </CommandItem>
         <CommandItem>
           <SettingsIcon className="mr-2 h-4 w-4" />
-          <span>Open Settings</span>
+          <span>Mở cài đặt</span>
         </CommandItem>
         <CommandItem>
           <CalendarIcon className="mr-2 h-4 w-4" />
@@ -145,45 +140,43 @@ function CommandMicroShowcase() {
       </CommandGroup>
     </CommandList>
   </Command>
-`}
-        >
-          <Command className="border border-border rounded-xl shadow-sm overflow-hidden bg-background w-full">
-            <CommandInput placeholder="Search actions..." />
-            <CommandList>
-              <CommandEmpty>No actions found.</CommandEmpty>
-              <CommandGroup>
-                <CommandItem>
-                  <UserIcon className="mr-2 h-4 w-4" />
-                  <span>View Profile</span>
-                </CommandItem>
-                <CommandItem>
-                  <SettingsIcon className="mr-2 h-4 w-4" />
-                  <span>Open Settings</span>
-                </CommandItem>
-                <CommandItem>
-                  <CalendarIcon className="mr-2 h-4 w-4" />
-                  <span>Schedule Meeting</span>
-                </CommandItem>
-                <CommandItem>
-                  <CreditCardIcon className="mr-2 h-4 w-4" />
-                  <span>Manage Billing</span>
-                </CommandItem>
-              </CommandGroup>
-            </CommandList>
-          </Command>
-        </ExampleSection>
+`} preview={
+                      <>
+              <Command className="border border-border rounded-xl shadow-sm overflow-hidden bg-background w-full">
+                          <CommandInput placeholder="Tìm kiếm hành động..." />
+                          <CommandList>
+                            <CommandEmpty>No actions found.</CommandEmpty>
+                            <CommandGroup>
+                              <CommandItem>
+                                <UserIcon className="mr-2 h-4 w-4" />
+                                <span>Xem hồ sơ</span>
+                              </CommandItem>
+                              <CommandItem>
+                                <SettingsIcon className="mr-2 h-4 w-4" />
+                                <span>Mở cài đặt</span>
+                              </CommandItem>
+                              <CommandItem>
+                                <CalendarIcon className="mr-2 h-4 w-4" />
+                                <span>Schedule Meeting</span>
+                              </CommandItem>
+                              <CommandItem>
+                                <CreditCardIcon className="mr-2 h-4 w-4" />
+                                <span>Manage Billing</span>
+                              </CommandItem>
+                            </CommandGroup>
+                          </CommandList>
+                        </Command>
+                      </>
+                    } />
       </ExampleGrid>
 
-      <ExampleSection
-        label="Dialog Menu"
-        description="Menu lệnh được hiển thị bên trong dialog."
-        codeString={`<Button onClick={() => setOpen(true)}>
+      <ShowcaseExample title="Dialog Menu" description="Menu lệnh được hiển thị bên trong dialog." code={`<Button onClick={() => setOpen(true)}>
     Open Command Palette
   </Button>
   <CommandDialog open={open} onOpenChange={setOpen}>
     <CommandInput placeholder="Type a command or search..." />
     <CommandList>
-      <CommandEmpty>No results found.</CommandEmpty>
+      <CommandEmpty>Không tìm thấy kết quả.</CommandEmpty>
       <CommandGroup heading="Suggestions">
         <CommandItem>
           <CalendarIcon className="mr-2 h-4 w-4" />
@@ -191,43 +184,40 @@ function CommandMicroShowcase() {
         </CommandItem>
         <CommandItem>
           <SmileIcon className="mr-2 h-4 w-4" />
-          <span>Search Emoji</span>
+          <span>Tìm kiếm Emoji</span>
         </CommandItem>
       </CommandGroup>
     </CommandList>
-  </CommandDialog>`}
-      >
-        <Button onClick={() => setOpen(true)}>Open Command Palette</Button>
-        <CommandDialog open={open} onOpenChange={setOpen}>
-          <CommandInput placeholder="Type a command or search..." />
-          <CommandList>
-            <CommandEmpty>No results found.</CommandEmpty>
-            <CommandGroup heading="Suggestions">
-              <CommandItem>
-                <CalendarIcon className="mr-2 h-4 w-4" />
-                <span>Calendar</span>
-              </CommandItem>
-              <CommandItem>
-                <SmileIcon className="mr-2 h-4 w-4" />
-                <span>Search Emoji</span>
-              </CommandItem>
-            </CommandGroup>
-          </CommandList>
-        </CommandDialog>
-      </ExampleSection>
+  </CommandDialog>`} preview={
+                  <>
+          <Button onClick={() => setOpen(true)}>Mở Command Palette</Button><CommandDialog open={open} onOpenChange={setOpen}>
+                    <CommandInput placeholder="Type a command or search..." />
+                    <CommandList>
+                      <CommandEmpty>Không tìm thấy kết quả.</CommandEmpty>
+                      <CommandGroup heading="Suggestions">
+                        <CommandItem>
+                          <CalendarIcon className="mr-2 h-4 w-4" />
+                          <span>Calendar</span>
+                        </CommandItem>
+                        <CommandItem>
+                          <SmileIcon className="mr-2 h-4 w-4" />
+                          <span>Tìm kiếm Emoji</span>
+                        </CommandItem>
+                      </CommandGroup>
+                    </CommandList>
+                  </CommandDialog>
+                  </>
+                } />
     </div>
   );
 }
 
-// ──────────────────────────────────────────────────────────
-// SECTION 3: Entry point
-// ──────────────────────────────────────────────────────────
 export default function CommandShowcase() {
   return (
     <Showcase
       title="Command"
       description="Command palette có tìm kiếm, kích hoạt bằng phím tắt (⌘K)."
-      generalConcept={
+      guideline={
         <ShowcaseDocs>
           <DocsP>
             Dùng để tạo các bảng lệnh (command palette) hoặc menu chọn có khả
@@ -237,11 +227,7 @@ export default function CommandShowcase() {
           </DocsP>
         </ShowcaseDocs>
       }
-      tabs={[
-        {
-          label: "Micro (Primitive)",
-          content: <CommandMicroShowcase /> },
-      ]}
+      micro={{ content: <CommandMicroShowcase /> }}
     />
   );
 }

package/src/dev/showcase/context-menu.tsx

@@ -19,25 +19,19 @@ import {
 } from "../../components/micro/context-menu";
 import {
   DocsP,
-  ExampleSection,
+  ShowcaseExample,
   Showcase,
   ShowcaseDocs
 } from "../../dev/components/showcase";
 
-// ──────────────────────────────────────────────────────────
-// SECTION 2: Micro Content (không export)
-// ──────────────────────────────────────────────────────────
 function ContextMenuMicroShowcase() {
   const [showBookmarks, setShowBookmarks] = useState(true);
   const [showFullUrls, setShowFullUrls] = useState(false);
   const [person, setPerson] = useState("pedro");
 
   return (
-    <div className="space-y-10 mt-6">
-      <ExampleSection
-        label="Full Context Menu"
-        description="Nhấp chuột phải vào khu vực bên dưới để mở."
-        codeString={`<ContextMenu>
+    <div className="space-y-10">
+      <ShowcaseExample title="Full Context Menu" description="Nhấp chuột phải vào khu vực bên dưới để mở." code={`<ContextMenu>
     <ContextMenuTrigger className="flex h-[150px] w-full max-w-[400px] items-center justify-center rounded-md border border-border border-dashed text-sm">
       Right click here
     </ContextMenuTrigger>
@@ -112,77 +106,75 @@ function ContextMenuMicroShowcase() {
         </ContextMenuGroup>
       </ContextMenuContent>
     
-  </ContextMenu>`}
-      >
-        <ContextMenu>
-          <ContextMenuTrigger className="flex h-[150px] w-full max-w-[400px] items-center justify-center rounded-md border border-border border-dashed text-sm">
-            Right click here
-          </ContextMenuTrigger>
+  </ContextMenu>`} preview={
+                  <>
+          <ContextMenu>
+                    <ContextMenuTrigger className="flex h-[150px] w-full max-w-[400px] items-center justify-center rounded-md border border-border border-dashed text-sm">
+                      Right click here
+                    </ContextMenuTrigger>
 
-            <ContextMenuContent className="w-64">
-              <ContextMenuItem inset>
-                Back
-                <ContextMenuShortcut>⌘[</ContextMenuShortcut>
-              </ContextMenuItem>
-              <ContextMenuItem inset disabled>
-                Forward
-                <ContextMenuShortcut>⌘]</ContextMenuShortcut>
-              </ContextMenuItem>
-              <ContextMenuItem inset>
-                Reload
-                <ContextMenuShortcut>⌘R</ContextMenuShortcut>
-              </ContextMenuItem>
-              <ContextMenuSub>
-                <ContextMenuSubTrigger inset>More Tools</ContextMenuSubTrigger>
+                      <ContextMenuContent className="w-64">
+                        <ContextMenuItem inset>
+                          Back
+                          <ContextMenuShortcut>⌘[</ContextMenuShortcut>
+                        </ContextMenuItem>
+                        <ContextMenuItem inset disabled>
+                          Forward
+                          <ContextMenuShortcut>⌘]</ContextMenuShortcut>
+                        </ContextMenuItem>
+                        <ContextMenuItem inset>
+                          Reload
+                          <ContextMenuShortcut>⌘R</ContextMenuShortcut>
+                        </ContextMenuItem>
+                        <ContextMenuSub>
+                          <ContextMenuSubTrigger inset>More Tools</ContextMenuSubTrigger>
 
-                  <ContextMenuSubContent className="w-48">
-                    <ContextMenuItem>
-                      Save Page As...
-                      <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>
-                    </ContextMenuItem>
-                    <ContextMenuItem>Create Shortcut...</ContextMenuItem>
-                    <ContextMenuItem>Name Window...</ContextMenuItem>
-                    <ContextMenuSeparator />
-                    <ContextMenuItem>Developer Tools</ContextMenuItem>
-                  </ContextMenuSubContent>
-                
-              </ContextMenuSub>
-              <ContextMenuSeparator />
-              <ContextMenuCheckboxItem
-                checked={showBookmarks}
-                onCheckedChange={setShowBookmarks}
-              >
-                Show Bookmarks Bar
-                <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>
-              </ContextMenuCheckboxItem>
-              <ContextMenuCheckboxItem
-                checked={showFullUrls}
-                onCheckedChange={setShowFullUrls}
-              >
-                Show Full URLs
-              </ContextMenuCheckboxItem>
-              <ContextMenuSeparator />
-              <ContextMenuGroup>
-                <ContextMenuLabel inset>People</ContextMenuLabel>
-                <ContextMenuSeparator />
-                <ContextMenuRadioGroup value={person} onValueChange={setPerson}>
-                  <ContextMenuRadioItem value="pedro">
-                    Pedro Duarte
-                  </ContextMenuRadioItem>
-                  <ContextMenuRadioItem value="colm">
-                    Colm Tuite
-                  </ContextMenuRadioItem>
-                </ContextMenuRadioGroup>
-              </ContextMenuGroup>
-            </ContextMenuContent>
-          
-        </ContextMenu>
-      </ExampleSection>
+                            <ContextMenuSubContent className="w-48">
+                              <ContextMenuItem>
+                                Save Page As...
+                                <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>
+                              </ContextMenuItem>
+                              <ContextMenuItem>Create Shortcut...</ContextMenuItem>
+                              <ContextMenuItem>Name Window...</ContextMenuItem>
+                              <ContextMenuSeparator />
+                              <ContextMenuItem>Developer Tools</ContextMenuItem>
+                            </ContextMenuSubContent>
+                          
+                        </ContextMenuSub>
+                        <ContextMenuSeparator />
+                        <ContextMenuCheckboxItem
+                          checked={showBookmarks}
+                          onCheckedChange={setShowBookmarks}
+                        >
+                          Show Bookmarks Bar
+                          <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>
+                        </ContextMenuCheckboxItem>
+                        <ContextMenuCheckboxItem
+                          checked={showFullUrls}
+                          onCheckedChange={setShowFullUrls}
+                        >
+                          Show Full URLs
+                        </ContextMenuCheckboxItem>
+                        <ContextMenuSeparator />
+                        <ContextMenuGroup>
+                          <ContextMenuLabel inset>People</ContextMenuLabel>
+                          <ContextMenuSeparator />
+                          <ContextMenuRadioGroup value={person} onValueChange={setPerson}>
+                            <ContextMenuRadioItem value="pedro">
+                              Pedro Duarte
+                            </ContextMenuRadioItem>
+                            <ContextMenuRadioItem value="colm">
+                              Colm Tuite
+                            </ContextMenuRadioItem>
+                          </ContextMenuRadioGroup>
+                        </ContextMenuGroup>
+                      </ContextMenuContent>
+                    
+                  </ContextMenu>
+                  </>
+                } />
 
-      <ExampleSection
-        label="Destructive Variant"
-        description="Context menu với các action nguy hiểm hiển thị màu destructive."
-        codeString={`<ContextMenu>
+      <ShowcaseExample title="Destructive Variant" description="Context menu với các action nguy hiểm hiển thị màu destructive." code={`<ContextMenu>
     <ContextMenuTrigger className="flex h-[100px] w-full max-w-[300px] items-center justify-center rounded-md border border-border border-dashed text-sm">
       Right click here
     </ContextMenuTrigger>
@@ -200,41 +192,39 @@ function ContextMenuMicroShowcase() {
         </ContextMenuItem>
       </ContextMenuContent>
     
-  </ContextMenu>`}
-      >
-        <ContextMenu>
-          <ContextMenuTrigger className="flex h-[100px] w-full max-w-[300px] items-center justify-center rounded-md border border-border border-dashed text-sm">
-            Right click here
-          </ContextMenuTrigger>
+  </ContextMenu>`} preview={
+                  <>
+          <ContextMenu>
+                    <ContextMenuTrigger className="flex h-[100px] w-full max-w-[300px] items-center justify-center rounded-md border border-border border-dashed text-sm">
+                      Right click here
+                    </ContextMenuTrigger>
 
-            <ContextMenuContent className="w-52">
-              <ContextMenuItem>
-                Rename
-                <ContextMenuShortcut>⌘R</ContextMenuShortcut>
-              </ContextMenuItem>
-              <ContextMenuItem>Duplicate</ContextMenuItem>
-              <ContextMenuSeparator />
-              <ContextMenuItem variant="destructive">
-                Delete
-                <ContextMenuShortcut>⌫</ContextMenuShortcut>
-              </ContextMenuItem>
-            </ContextMenuContent>
-          
-        </ContextMenu>
-      </ExampleSection>
+                      <ContextMenuContent className="w-52">
+                        <ContextMenuItem>
+                          Rename
+                          <ContextMenuShortcut>⌘R</ContextMenuShortcut>
+                        </ContextMenuItem>
+                        <ContextMenuItem>Duplicate</ContextMenuItem>
+                        <ContextMenuSeparator />
+                        <ContextMenuItem variant="destructive">
+                          Delete
+                          <ContextMenuShortcut>⌫</ContextMenuShortcut>
+                        </ContextMenuItem>
+                      </ContextMenuContent>
+                    
+                  </ContextMenu>
+                  </>
+                } />
     </div>
   );
 }
 
-// ──────────────────────────────────────────────────────────
-// SECTION 3: Entry point (export default)
-// ──────────────────────────────────────────────────────────
 export default function ContextMenuShowcase() {
   return (
     <Showcase
       title="Context Menu"
       description="Menu ngữ cảnh hiển thị khi click chuột phải — dùng cho các hành động nhanh."
-      generalConcept={
+      guideline={
         <ShowcaseDocs>
           <DocsP>
             Dùng để hiển thị danh sách các tuỳ chọn hoặc hành động liên quan tới
@@ -242,11 +232,7 @@ export default function ContextMenuShowcase() {
           </DocsP>
         </ShowcaseDocs>
       }
-      tabs={[
-        {
-          label: "Micro (Primitive)",
-          content: <ContextMenuMicroShowcase /> },
-      ]}
+      micro={{ content: <ContextMenuMicroShowcase /> }}
     />
   );
 }