gladvn 0.2.18 → 0.2.20

package/src/dev/showcase/hover-card.tsx

@@ -3,15 +3,13 @@ import { CalendarIcon } from "lucide-react";
 import {
   Avatar,
   AvatarFallback,
-  AvatarImage,
-} from "../../components/micro/avatar";
+  AvatarImage } from "../../components/micro/avatar";
 import { Button } from "../../components/micro/button";
 import {
   HoverCard,
   HoverCardContent,
-  HoverCardPortal,
-  HoverCardTrigger,
-} from "../../components/micro/hover-card";
+  
+  HoverCardTrigger } from "../../components/micro/hover-card";
 import { useDevContext } from "../../dev/components/dev-context";
 import {
   DocsCode,
@@ -19,8 +17,7 @@ import {
   ExampleGrid,
   ExampleSection,
   Showcase,
-  ShowcaseDocs,
-} from "../../dev/components/showcase";
+  ShowcaseDocs } from "../../dev/components/showcase";
 import { type Size } from "../../lib/types";
 
 // ──────────────────────────────────────────────────────────
@@ -67,7 +64,7 @@ function HoverCardMicroShowcase({ globalSize }: { globalSize: Size }) {
     <HoverCardTrigger render={<Button variant="link" />}>
       @nextjs
     </HoverCardTrigger>
-    <HoverCardPortal>
+    
       <HoverCardContent className="w-80">
         <div className="flex justify-between space-x-4">
           <Avatar>
@@ -98,7 +95,7 @@ function HoverCardMicroShowcase({ globalSize }: { globalSize: Size }) {
           </div>
         </div>
       </HoverCardContent>
-    </HoverCardPortal>
+    
   </HoverCard>`}
       >
         <HoverCard>
@@ -108,11 +105,10 @@ function HoverCardMicroShowcase({ globalSize }: { globalSize: Size }) {
             @nextjs
           </HoverCardTrigger>
 
-          <HoverCardPortal>
             <HoverCardContent className="w-80">
               <NextJsCard />
             </HoverCardContent>
-          </HoverCardPortal>
+          
         </HoverCard>
       </ExampleSection>
 
@@ -124,11 +120,11 @@ function HoverCardMicroShowcase({ globalSize }: { globalSize: Size }) {
     <HoverCardTrigger
       render={<Button variant="outline">Top</Button>}
     />
-    <HoverCardPortal>
+    
       <HoverCardContent side="top" className="w-80">
         ...
       </HoverCardContent>
-    </HoverCardPortal>
+    
   </HoverCard>`}
       >
         <div className="flex flex-wrap items-center justify-center gap-4 py-8">
@@ -146,11 +142,10 @@ function HoverCardMicroShowcase({ globalSize }: { globalSize: Size }) {
                 }
               />
 
-              <HoverCardPortal>
                 <HoverCardContent side={side} className="w-72">
                   <NextJsCard />
                 </HoverCardContent>
-              </HoverCardPortal>
+              
             </HoverCard>
           ))}
         </div>
@@ -163,7 +158,7 @@ function HoverCardMicroShowcase({ globalSize }: { globalSize: Size }) {
             key={align}
             label={`Align: ${align}`}
             description={`Card căn ${align} theo trục ngang.`}
-            codeString={`<HoverCardPortal><HoverCardContent align="${align}" className="w-80">...</HoverCardContent></HoverCardPortal>`}
+            codeString={`<HoverCardContent align="${align}" className="w-80">...</HoverCardContent>`}
           >
             <HoverCard>
               <HoverCardTrigger
@@ -178,11 +173,10 @@ function HoverCardMicroShowcase({ globalSize }: { globalSize: Size }) {
                 }
               />
 
-              <HoverCardPortal>
                 <HoverCardContent align={align} className="w-64">
                   <NextJsCard />
                 </HoverCardContent>
-              </HoverCardPortal>
+              
             </HoverCard>
           </ExampleSection>
         ))}
@@ -204,11 +198,10 @@ function HoverCardMicroShowcase({ globalSize }: { globalSize: Size }) {
               @nextjs
             </HoverCardTrigger>
 
-            <HoverCardPortal>
               <HoverCardContent className="w-80">
                 <NextJsCard />
               </HoverCardContent>
-            </HoverCardPortal>
+            
           </HoverCard>
         </ExampleSection>
 
@@ -238,11 +231,10 @@ function HoverCardMicroShowcase({ globalSize }: { globalSize: Size }) {
               @nextjs
             </HoverCardTrigger>
 
-            <HoverCardPortal>
               <HoverCardContent className="w-80">
                 <NextJsCard />
               </HoverCardContent>
-            </HoverCardPortal>
+            
           </HoverCard>
         </ExampleSection>
       </ExampleGrid>
@@ -256,18 +248,18 @@ function HoverCardMicroShowcase({ globalSize }: { globalSize: Size }) {
     <HoverCardTrigger delay={0} render={<Button />}>
       Tức thì
     </HoverCardTrigger>
-    <HoverCardPortal>
+    
       <HoverCardContent>...</HoverCardContent>
-    </HoverCardPortal>
+    
   </HoverCard>
 
   <HoverCard>
     <HoverCardTrigger delay={500} render={<Button />}>
       Mặc định (500ms)
     </HoverCardTrigger>
-    <HoverCardPortal>
+    
       <HoverCardContent>...</HoverCardContent>
-    </HoverCardPortal>
+    
   </HoverCard>
 
   <HoverCard>
@@ -278,9 +270,9 @@ function HoverCardMicroShowcase({ globalSize }: { globalSize: Size }) {
     >
       Chậm (1500ms)
     </HoverCardTrigger>
-    <HoverCardPortal>
+    
       <HoverCardContent>...</HoverCardContent>
-    </HoverCardPortal>
+    
   </HoverCard>`}
       >
         <div className="grid grid-cols-1 md:grid-cols-3 gap-4 w-full">
@@ -294,11 +286,10 @@ function HoverCardMicroShowcase({ globalSize }: { globalSize: Size }) {
               }
             />
 
-            <HoverCardPortal>
               <HoverCardContent className="w-72">
                 <NextJsCard />
               </HoverCardContent>
-            </HoverCardPortal>
+            
           </HoverCard>
 
           <HoverCard>
@@ -311,11 +302,10 @@ function HoverCardMicroShowcase({ globalSize }: { globalSize: Size }) {
               }
             />
 
-            <HoverCardPortal>
               <HoverCardContent className="w-72">
                 <NextJsCard />
               </HoverCardContent>
-            </HoverCardPortal>
+            
           </HoverCard>
 
           <HoverCard>
@@ -329,11 +319,10 @@ function HoverCardMicroShowcase({ globalSize }: { globalSize: Size }) {
               }
             />
 
-            <HoverCardPortal>
               <HoverCardContent className="w-72">
                 <NextJsCard />
               </HoverCardContent>
-            </HoverCardPortal>
+            
           </HoverCard>
         </div>
       </ExampleSection>
@@ -368,8 +357,7 @@ export default function HoverCardShowcase() {
       tabs={[
         {
           label: "Micro (Primitive)",
-          content: <HoverCardMicroShowcase globalSize={globalSize} />,
-        },
+          content: <HoverCardMicroShowcase globalSize={globalSize} /> },
       ]}
     />
   );

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

@@ -8,8 +8,7 @@ import {
   MinusIcon,
   PlusIcon,
   SearchIcon,
-  XIcon,
-} from "lucide-react";
+  XIcon } from "lucide-react";
 
 import {
   InputGroup,
@@ -17,8 +16,7 @@ import {
   InputGroupButton,
   InputGroupInput,
   InputGroupText,
-  InputGroupTextarea,
-} from "../../components/micro/input-group";
+  InputGroupTextarea } from "../../components/micro/input-group";
 import { useDevContext } from "../../dev/components/dev-context";
 import {
   DocsCode,
@@ -29,8 +27,7 @@ import {
   ExampleGrid,
   ExampleSection,
   Showcase,
-  ShowcaseDocs,
-} from "../../dev/components/showcase";
+  ShowcaseDocs } from "../../dev/components/showcase";
 import { type Size } from "../../lib/types";
 
 function InputGroupMicroShowcase({ globalSize }: { globalSize: Size }) {
@@ -536,8 +533,7 @@ export default function InputGroupShowcase() {
       tabs={[
         {
           label: "Micro (Primitive)",
-          content: <InputGroupMicroShowcase globalSize={globalSize} />,
-        },
+          content: <InputGroupMicroShowcase globalSize={globalSize} /> },
       ]}
     />
   );

package/src/dev/showcase/input-otp.tsx

@@ -5,14 +5,12 @@ import {
   Field,
   FieldContent,
   FieldError,
-  FieldLabel,
-} from "../../components/micro/field";
+  FieldLabel } from "../../components/micro/field";
 import {
   InputOTP,
   InputOTPGroup,
   InputOTPSeparator,
-  InputOTPSlot,
-} from "../../components/micro/input-otp";
+  InputOTPSlot } from "../../components/micro/input-otp";
 import { useDevContext } from "../../dev/components/dev-context";
 import {
   DocsCode,
@@ -21,8 +19,7 @@ import {
   ExampleGrid,
   ExampleSection,
   Showcase,
-  ShowcaseDocs,
-} from "../../dev/components/showcase";
+  ShowcaseDocs } from "../../dev/components/showcase";
 import { type Size } from "../../lib/types";
 
 // ──────────────────────────────────────────────────────────
@@ -402,12 +399,10 @@ export default function InputOTPShowcase() {
       tabs={[
         {
           label: "Micro (Primitive)",
-          content: <InputOTPMicroShowcase globalSize={globalSize} />,
-        },
+          content: <InputOTPMicroShowcase globalSize={globalSize} /> },
         {
           label: "Macro (Preset)",
-          content: <InputOTPMacroShowcase globalSize={globalSize} />,
-        },
+          content: <InputOTPMacroShowcase globalSize={globalSize} /> },
       ]}
     />
   );

package/src/dev/showcase/input.tsx

@@ -6,15 +6,13 @@ import {
   FieldContent,
   FieldDescription,
   FieldError,
-  FieldLabel,
-} from "../../components/micro/field";
+  FieldLabel } from "../../components/micro/field";
 import { Input } from "../../components/micro/input";
 import {
   InputGroup,
   InputGroupAddon,
   InputGroupInput,
-  InputGroupText,
-} from "../../components/micro/input-group";
+  InputGroupText } from "../../components/micro/input-group";
 import { useDevContext } from "../../dev/components/dev-context";
 import {
   DocsCode,
@@ -25,8 +23,7 @@ import {
   ExampleGrid,
   ExampleSection,
   Showcase,
-  ShowcaseDocs,
-} from "../../dev/components/showcase";
+  ShowcaseDocs } from "../../dev/components/showcase";
 import { type Size } from "../../lib/types";
 
 // ──────────────────────────────────────────────────────────
@@ -554,12 +551,10 @@ export default function InputShowcase() {
       tabs={[
         {
           label: "Micro (Primitive)",
-          content: <InputMicroShowcase globalSize={globalSize} />,
-        },
+          content: <InputMicroShowcase globalSize={globalSize} /> },
         {
           label: "Macro (Preset)",
-          content: <InputMacroShowcase globalSize={globalSize} />,
-        },
+          content: <InputMacroShowcase globalSize={globalSize} /> },
       ]}
     />
   );

package/src/dev/showcase/item.tsx

@@ -11,8 +11,7 @@ import {
   ItemHeader,
   ItemMedia,
   ItemSeparator,
-  ItemTitle,
-} from "../../components/micro/item";
+  ItemTitle } from "../../components/micro/item";
 import { useDevContext } from "../../dev/components/dev-context";
 import {
   DocsH3,
@@ -20,8 +19,7 @@ import {
   ExampleGrid,
   ExampleSection,
   Showcase,
-  ShowcaseDocs,
-} from "../../dev/components/showcase";
+  ShowcaseDocs } from "../../dev/components/showcase";
 import { type Size } from "../../lib/types";
 
 function ItemMicroShowcase({ globalSize }: { globalSize: Size }) {
@@ -290,8 +288,7 @@ export default function ItemShowcase() {
       tabs={[
         {
           label: "Micro (Primitive)",
-          content: <ItemMicroShowcase globalSize={globalSize} />,
-        },
+          content: <ItemMicroShowcase globalSize={globalSize} /> },
       ]}
     />
   );

package/src/dev/showcase/kbd.tsx

@@ -3,34 +3,30 @@ import {
   FileIcon,
   FilePlusIcon,
   FolderOpenIcon,
-  SaveIcon,
-} from "lucide-react";
+  SaveIcon } from "lucide-react";
 
 import { Button } from "../../components/micro/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
-  DropdownMenuPortal,
+  
   DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "../../components/micro/dropdown-menu";
+  DropdownMenuTrigger } from "../../components/micro/dropdown-menu";
 import { Kbd, KbdGroup } from "../../components/micro/kbd";
 import {
   Tooltip,
   TooltipContent,
-  TooltipPortal,
+  
   TooltipProvider,
-  TooltipTrigger,
-} from "../../components/micro/tooltip";
+  TooltipTrigger } from "../../components/micro/tooltip";
 import {
   DocsCode,
   DocsP,
   ExampleGrid,
   ExampleSection,
   Showcase,
-  ShowcaseDocs,
-} from "../../dev/components/showcase";
+  ShowcaseDocs } from "../../dev/components/showcase";
 
 // ──────────────────────────────────────────────────────────
 // SECTION 2: Micro Content (không export)
@@ -136,12 +132,12 @@ function KbdMicroShowcase() {
                   </Button>
                 }
               />
-              <TooltipPortal>
+              
                 <TooltipContent>
                   Lưu tài liệu <Kbd>⌘</Kbd>
                   <Kbd>S</Kbd>
                 </TooltipContent>
-              </TooltipPortal>
+              
             </Tooltip>
           </TooltipProvider>
 
@@ -154,12 +150,12 @@ function KbdMicroShowcase() {
                   </Button>
                 }
               />
-              <TooltipPortal>
+              
                 <TooltipContent>
                   Sao chép <Kbd>⌘</Kbd>
                   <Kbd>C</Kbd>
                 </TooltipContent>
-              </TooltipPortal>
+              
             </Tooltip>
           </TooltipProvider>
         </div>
@@ -191,7 +187,7 @@ function KbdMicroShowcase() {
           <DropdownMenuTrigger
             render={<Button variant="outline">File menu</Button>}
           />
-          <DropdownMenuPortal>
+          
             <DropdownMenuContent className="w-56">
               <DropdownMenuItem>
                 <FilePlusIcon aria-hidden="true" />
@@ -228,7 +224,7 @@ function KbdMicroShowcase() {
                 </KbdGroup>
               </DropdownMenuItem>
             </DropdownMenuContent>
-          </DropdownMenuPortal>
+          
         </DropdownMenu>
       </ExampleSection>
 

package/src/dev/showcase/label.tsx

@@ -5,8 +5,7 @@ import {
   DocsP,
   ExampleSection,
   Showcase,
-  ShowcaseDocs,
-} from "../../dev/components/showcase";
+  ShowcaseDocs } from "../../dev/components/showcase";
 import { type Size } from "../../lib/types";
 
 // ──────────────────────────────────────────────────────────
@@ -106,8 +105,7 @@ export default function LabelShowcase() {
       tabs={[
         {
           label: "Micro (Primitive)",
-          content: <LabelMicroShowcase globalSize={globalSize} />,
-        },
+          content: <LabelMicroShowcase globalSize={globalSize} /> },
       ]}
     />
   );

package/src/dev/showcase/menubar.tsx

@@ -8,7 +8,7 @@ import {
   MenubarItem,
   MenubarLabel,
   MenubarMenu,
-  MenubarPortal,
+  
   MenubarRadioGroup,
   MenubarRadioItem,
   MenubarSeparator,
@@ -16,15 +16,13 @@ import {
   MenubarSub,
   MenubarSubContent,
   MenubarSubTrigger,
-  MenubarTrigger,
-} from "../../components/micro/menubar";
+  MenubarTrigger } from "../../components/micro/menubar";
 import {
   DocsP,
   ExampleGrid,
   ExampleSection,
   Showcase,
-  ShowcaseDocs,
-} from "../../dev/components/showcase";
+  ShowcaseDocs } from "../../dev/components/showcase";
 
 // ──────────────────────────────────────────────────────────
 // SECTION 1: Micro Content
@@ -125,7 +123,7 @@ function MenubarMicroShowcase() {
         <Menubar className="w-fit">
           <MenubarMenu>
             <MenubarTrigger>File</MenubarTrigger>
-            <MenubarPortal>
+            
               <MenubarContent>
                 <MenubarItem>
                   New Tab <MenubarShortcut>⌘T</MenubarShortcut>
@@ -148,11 +146,11 @@ function MenubarMicroShowcase() {
                   Print... <MenubarShortcut>⌘P</MenubarShortcut>
                 </MenubarItem>
               </MenubarContent>
-            </MenubarPortal>
+            
           </MenubarMenu>
           <MenubarMenu>
             <MenubarTrigger>View</MenubarTrigger>
-            <MenubarPortal>
+            
               <MenubarContent>
                 <MenubarCheckboxItem
                   checked={showBookmarks}
@@ -174,11 +172,11 @@ function MenubarMicroShowcase() {
                   Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>
                 </MenubarItem>
               </MenubarContent>
-            </MenubarPortal>
+            
           </MenubarMenu>
           <MenubarMenu>
             <MenubarTrigger>Profiles</MenubarTrigger>
-            <MenubarPortal>
+            
               <MenubarContent>
                 <MenubarGroup>
                   <MenubarLabel inset>Select Profile</MenubarLabel>
@@ -194,7 +192,7 @@ function MenubarMicroShowcase() {
                 <MenubarSeparator />
                 <MenubarItem inset>Add Profile...</MenubarItem>
               </MenubarContent>
-            </MenubarPortal>
+            
           </MenubarMenu>
         </Menubar>
       </ExampleSection>
@@ -227,7 +225,7 @@ function MenubarMicroShowcase() {
           <Menubar className="w-fit">
             <MenubarMenu>
               <MenubarTrigger>View</MenubarTrigger>
-              <MenubarPortal>
+              
                 <MenubarContent>
                   <MenubarCheckboxItem
                     checked={showBookmarks}
@@ -242,7 +240,7 @@ function MenubarMicroShowcase() {
                     Show Full URLs
                   </MenubarCheckboxItem>
                 </MenubarContent>
-              </MenubarPortal>
+              
             </MenubarMenu>
           </Menubar>
         </ExampleSection>
@@ -277,7 +275,7 @@ function MenubarMicroShowcase() {
           <Menubar className="w-fit">
             <MenubarMenu>
               <MenubarTrigger>Profile</MenubarTrigger>
-              <MenubarPortal>
+              
                 <MenubarContent>
                   <MenubarLabel inset>Account</MenubarLabel>
                   <MenubarSeparator />
@@ -287,7 +285,7 @@ function MenubarMicroShowcase() {
                     <MenubarRadioItem value="andy">Andy</MenubarRadioItem>
                   </MenubarRadioGroup>
                 </MenubarContent>
-              </MenubarPortal>
+              
             </MenubarMenu>
           </Menubar>
         </ExampleSection>
@@ -320,7 +318,7 @@ function MenubarMicroShowcase() {
           <Menubar className="w-fit">
             <MenubarMenu>
               <MenubarTrigger>File</MenubarTrigger>
-              <MenubarPortal>
+              
                 <MenubarContent>
                   <MenubarSub>
                     <MenubarSubTrigger>Share</MenubarSubTrigger>
@@ -334,7 +332,7 @@ function MenubarMicroShowcase() {
                     Print... <MenubarShortcut>⌘P</MenubarShortcut>
                   </MenubarItem>
                 </MenubarContent>
-              </MenubarPortal>
+              
             </MenubarMenu>
           </Menubar>
         </ExampleSection>
@@ -366,7 +364,7 @@ function MenubarMicroShowcase() {
           <Menubar className="w-fit">
             <MenubarMenu>
               <MenubarTrigger>Edit</MenubarTrigger>
-              <MenubarPortal>
+              
                 <MenubarContent>
                   <MenubarItem>
                     Undo <MenubarShortcut>⌘Z</MenubarShortcut>
@@ -382,7 +380,7 @@ function MenubarMicroShowcase() {
                     Copy <MenubarShortcut>⌘C</MenubarShortcut>
                   </MenubarItem>
                 </MenubarContent>
-              </MenubarPortal>
+              
             </MenubarMenu>
           </Menubar>
         </ExampleSection>