gladvn 0.2.17 → 0.2.18

package/src/dev/showcase/command.tsx

@@ -1,3 +1,15 @@
+import { useState } from "react";
+
+import {
+  CalculatorIcon,
+  CalendarIcon,
+  CreditCardIcon,
+  SettingsIcon,
+  SmileIcon,
+  UserIcon,
+} from "lucide-react";
+
+import { CommandDialog } from "../../components/macro/command-preset";
 import { Button } from "../../components/micro/button";
 import {
   Command,
@@ -9,7 +21,6 @@ import {
   CommandSeparator,
   CommandShortcut,
 } from "../../components/micro/command";
-import { CommandDialog } from "../../components/macro/command-preset";
 import {
   DocsP,
   ExampleGrid,
@@ -17,15 +28,6 @@ import {
   Showcase,
   ShowcaseDocs,
 } from "../../dev/components/showcase";
-import {
-  CalculatorIcon,
-  CalendarIcon,
-  CreditCardIcon,
-  SettingsIcon,
-  SmileIcon,
-  UserIcon,
-} from "lucide-react";
-import { useState } from "react";
 
 function CommandMicroShowcase() {
   const [open, setOpen] = useState(false);
@@ -175,24 +177,25 @@ function CommandMicroShowcase() {
       <ExampleSection
         label="Dialog Menu"
         description="Menu lệnh được hiển thị bên trong dialog."
-        codeString={`<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>
-`}
+        codeString={`<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>`}
       >
         <Button onClick={() => setOpen(true)}>Open Command Palette</Button>
         <CommandDialog open={open} onOpenChange={setOpen}>

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

@@ -1,3 +1,5 @@
+import { useState } from "react";
+
 import {
   ContextMenu,
   ContextMenuCheckboxItem,
@@ -5,6 +7,7 @@ import {
   ContextMenuGroup,
   ContextMenuItem,
   ContextMenuLabel,
+  ContextMenuPortal,
   ContextMenuRadioGroup,
   ContextMenuRadioItem,
   ContextMenuSeparator,
@@ -13,7 +16,6 @@ import {
   ContextMenuSubContent,
   ContextMenuSubTrigger,
   ContextMenuTrigger,
-  ContextMenuPortal,
 } from "../../components/micro/context-menu";
 import {
   DocsP,
@@ -22,8 +24,6 @@ import {
   ShowcaseDocs,
 } from "../../dev/components/showcase";
 
-import { useState } from "react";
-
 // ──────────────────────────────────────────────────────────
 // SECTION 2: Micro Content (không export)
 // ──────────────────────────────────────────────────────────
@@ -38,65 +38,81 @@ function ContextMenuMicroShowcase() {
         label="Full Context Menu"
         description="Nhấp chuột phải vào khu vực bên dưới để mở."
         codeString={`<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>
-  <ContextMenuPortal><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>
-      <ContextMenuPortal><ContextMenuSubContent className="w-48">
-        <ContextMenuItem>
-          Save Page As...
-          <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>
+    <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>
+    <ContextMenuPortal>
+      <ContextMenuContent className="w-64">
+        <ContextMenuItem inset>
+          Back
+          <ContextMenuShortcut>⌘[</ContextMenuShortcut>
         </ContextMenuItem>
-        <ContextMenuItem>Create Shortcut...</ContextMenuItem>
-        <ContextMenuItem>Name Window...</ContextMenuItem>
+        <ContextMenuItem inset disabled>
+          Forward
+          <ContextMenuShortcut>⌘]</ContextMenuShortcut>
+        </ContextMenuItem>
+        <ContextMenuItem inset>
+          Reload
+          <ContextMenuShortcut>⌘R</ContextMenuShortcut>
+        </ContextMenuItem>
+        <ContextMenuSub>
+          <ContextMenuSubTrigger inset>
+            More Tools
+          </ContextMenuSubTrigger>
+          <ContextMenuPortal>
+            <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>
+          </ContextMenuPortal>
+        </ContextMenuSub>
+        <ContextMenuSeparator />
+        <ContextMenuCheckboxItem
+          checked={showBookmarks}
+          onCheckedChange={setShowBookmarks}
+        >
+          Show Bookmarks Bar
+          <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>
+        </ContextMenuCheckboxItem>
+        <ContextMenuCheckboxItem
+          checked={showFullUrls}
+          onCheckedChange={setShowFullUrls}
+        >
+          Show Full URLs
+        </ContextMenuCheckboxItem>
         <ContextMenuSeparator />
-        <ContextMenuItem>Developer Tools</ContextMenuItem>
-      </ContextMenuSubContent></ContextMenuPortal>
-    </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></ContextMenuPortal>
-</ContextMenu>
-`}
+        <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>
+    </ContextMenuPortal>
+  </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">
@@ -169,23 +185,24 @@ function ContextMenuMicroShowcase() {
         label="Destructive Variant"
         description="Context menu với các action nguy hiểm hiển thị màu destructive."
         codeString={`<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>
-  <ContextMenuPortal><ContextMenuContent className="w-52">
-    <ContextMenuItem>
-      Rename
-      <ContextMenuShortcut>⌘R</ContextMenuShortcut>
-    </ContextMenuItem>
-    <ContextMenuItem>Duplicate</ContextMenuItem>
-    <ContextMenuSeparator />
-    <ContextMenuItem variant="destructive">
-      Delete
-      <ContextMenuShortcut>⌫</ContextMenuShortcut>
-    </ContextMenuItem>
-  </ContextMenuContent></ContextMenuPortal>
-</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>
+    <ContextMenuPortal>
+      <ContextMenuContent className="w-52">
+        <ContextMenuItem>
+          Rename
+          <ContextMenuShortcut>⌘R</ContextMenuShortcut>
+        </ContextMenuItem>
+        <ContextMenuItem>Duplicate</ContextMenuItem>
+        <ContextMenuSeparator />
+        <ContextMenuItem variant="destructive">
+          Delete
+          <ContextMenuShortcut>⌫</ContextMenuShortcut>
+        </ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenuPortal>
+  </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">