gladvn 0.2.19 → 0.2.21

package/src/dev/showcase/dialog.tsx

@@ -11,10 +11,9 @@ import {
   DialogDescription,
   DialogFooter,
   DialogHeader,
-  DialogPortal,
+  
   DialogTitle,
-  DialogTrigger,
-} from "../../components/micro/dialog";
+  DialogTrigger } from "../../components/micro/dialog";
 import { Input } from "../../components/micro/input";
 import { Label } from "../../components/micro/label";
 import { useDevContext } from "../../dev/components/dev-context";
@@ -25,8 +24,7 @@ import {
   ExampleGrid,
   ExampleSection,
   Showcase,
-  ShowcaseDocs,
-} from "../../dev/components/showcase";
+  ShowcaseDocs } from "../../dev/components/showcase";
 import { type Size } from "../../lib/types";
 import { cn } from "../../lib/utils";
 
@@ -412,7 +410,6 @@ function DialogMicroShowcase({ globalSize }: { globalSize: Size }) {
       }
     />
 
-    <DialogPortal>
       <DialogContent className={contentClass}>
         <DialogHeader>
           <DialogTitle>Update Subscription</DialogTitle>
@@ -441,7 +438,7 @@ function DialogMicroShowcase({ globalSize }: { globalSize: Size }) {
           <span className="sr-only">Close</span>
         </DialogClose>
       </DialogContent>
-    </DialogPortal>
+    
   </Dialog>`}
         >
           <Dialog>
@@ -453,7 +450,6 @@ function DialogMicroShowcase({ globalSize }: { globalSize: Size }) {
               }
             />
 
-            <DialogPortal>
               <DialogContent className={contentClass}>
                 <DialogHeader>
                   <DialogTitle>Update Subscription</DialogTitle>
@@ -486,7 +482,7 @@ function DialogMicroShowcase({ globalSize }: { globalSize: Size }) {
                   <span className="sr-only">Close</span>
                 </DialogClose>
               </DialogContent>
-            </DialogPortal>
+            
           </Dialog>
         </ExampleSection>
 
@@ -500,7 +496,6 @@ function DialogMicroShowcase({ globalSize }: { globalSize: Size }) {
       }
     />
 
-    <DialogPortal>
       <DialogContent className={contentClass}>
         <DialogHeader>
           <DialogTitle>Edit profile</DialogTitle>
@@ -551,7 +546,7 @@ function DialogMicroShowcase({ globalSize }: { globalSize: Size }) {
           <span className="sr-only">Close</span>
         </DialogClose>
       </DialogContent>
-    </DialogPortal>
+    
   </Dialog>`}
         >
           <Dialog>
@@ -563,7 +558,6 @@ function DialogMicroShowcase({ globalSize }: { globalSize: Size }) {
               }
             />
 
-            <DialogPortal>
               <DialogContent className={contentClass}>
                 <DialogHeader>
                   <DialogTitle>Edit profile</DialogTitle>
@@ -613,7 +607,7 @@ function DialogMicroShowcase({ globalSize }: { globalSize: Size }) {
                   <span className="sr-only">Close</span>
                 </DialogClose>
               </DialogContent>
-            </DialogPortal>
+            
           </Dialog>
         </ExampleSection>
       </ExampleGrid>
@@ -627,7 +621,6 @@ function DialogMicroShowcase({ globalSize }: { globalSize: Size }) {
       render={<Button variant="outline">View Terms</Button>}
     />
 
-    <DialogPortal>
       <DialogContent className={contentClass}>
         <DialogHeader>
           <DialogTitle>Terms of Service</DialogTitle>
@@ -649,7 +642,7 @@ function DialogMicroShowcase({ globalSize }: { globalSize: Size }) {
           <Button>Accept</Button>
         </DialogFooter>
       </DialogContent>
-    </DialogPortal>
+    
   </Dialog>`}
         >
           <Dialog>
@@ -661,7 +654,6 @@ function DialogMicroShowcase({ globalSize }: { globalSize: Size }) {
               }
             />
 
-            <DialogPortal>
               <DialogContent className={contentClass}>
                 <DialogHeader>
                   <DialogTitle>Terms of Service</DialogTitle>
@@ -683,7 +675,7 @@ function DialogMicroShowcase({ globalSize }: { globalSize: Size }) {
                   <Button size={globalSize}>Accept</Button>
                 </DialogFooter>
               </DialogContent>
-            </DialogPortal>
+            
           </Dialog>
         </ExampleSection>
 
@@ -697,7 +689,6 @@ function DialogMicroShowcase({ globalSize }: { globalSize: Size }) {
       }
     />
 
-    <DialogPortal>
       <DialogContent className={contentClass}>
         <DialogHeader>
           <DialogTitle>Detailed Report</DialogTitle>
@@ -727,7 +718,7 @@ function DialogMicroShowcase({ globalSize }: { globalSize: Size }) {
           <span className="sr-only">Close</span>
         </DialogClose>
       </DialogContent>
-    </DialogPortal>
+    
   </Dialog>`}
         >
           <Dialog>
@@ -739,7 +730,6 @@ function DialogMicroShowcase({ globalSize }: { globalSize: Size }) {
               }
             />
 
-            <DialogPortal>
               <DialogContent className={contentClass}>
                 <DialogHeader>
                   <DialogTitle>Detailed Report</DialogTitle>
@@ -769,7 +759,7 @@ function DialogMicroShowcase({ globalSize }: { globalSize: Size }) {
                   <span className="sr-only">Close</span>
                 </DialogClose>
               </DialogContent>
-            </DialogPortal>
+            
           </Dialog>
         </ExampleSection>
       </ExampleGrid>
@@ -795,7 +785,7 @@ function DialogMicroShowcase({ globalSize }: { globalSize: Size }) {
       open={controlledOpen}
       onOpenChange={setControlledOpen}
     >
-      <DialogPortal>
+      
         <DialogContent className={contentClass}>
           <DialogHeader>
             <DialogTitle>Controlled Dialog</DialogTitle>
@@ -829,7 +819,7 @@ function DialogMicroShowcase({ globalSize }: { globalSize: Size }) {
             <span className="sr-only">Close</span>
           </DialogClose>
         </DialogContent>
-      </DialogPortal>
+      
     </Dialog>
   </div>`}
         >
@@ -848,7 +838,7 @@ function DialogMicroShowcase({ globalSize }: { globalSize: Size }) {
             </div>
 
             <Dialog open={controlledOpen} onOpenChange={setControlledOpen}>
-              <DialogPortal>
+              
                 <DialogContent className={contentClass}>
                   <DialogHeader>
                     <DialogTitle>Controlled Dialog</DialogTitle>
@@ -883,7 +873,7 @@ function DialogMicroShowcase({ globalSize }: { globalSize: Size }) {
                     <span className="sr-only">Close</span>
                   </DialogClose>
                 </DialogContent>
-              </DialogPortal>
+              
             </Dialog>
           </div>
         </ExampleSection>
@@ -898,7 +888,6 @@ function DialogMicroShowcase({ globalSize }: { globalSize: Size }) {
       }
     />
 
-    <DialogPortal>
       <DialogContent
         className={cn(
           contentClass,
@@ -948,7 +937,7 @@ function DialogMicroShowcase({ globalSize }: { globalSize: Size }) {
           <span className="sr-only">Close</span>
         </DialogClose>
       </DialogContent>
-    </DialogPortal>
+    
   </Dialog>`}
         >
           <Dialog>
@@ -960,7 +949,6 @@ function DialogMicroShowcase({ globalSize }: { globalSize: Size }) {
               }
             />
 
-            <DialogPortal>
               <DialogContent
                 className={cn(
                   contentClass,
@@ -1011,7 +999,7 @@ function DialogMicroShowcase({ globalSize }: { globalSize: Size }) {
                   <span className="sr-only">Close</span>
                 </DialogClose>
               </DialogContent>
-            </DialogPortal>
+            
           </Dialog>
         </ExampleSection>
 
@@ -1136,12 +1124,10 @@ export default function DialogShowcase() {
       tabs={[
         {
           label: "Micro (Primitive)",
-          content: <DialogMicroShowcase globalSize={globalSize} />,
-        },
+          content: <DialogMicroShowcase globalSize={globalSize} /> },
         {
           label: "Macro (Preset)",
-          content: <DialogMacroShowcase globalSize={globalSize} />,
-        },
+          content: <DialogMacroShowcase globalSize={globalSize} /> },
       ]}
       generalConcept={
         <ShowcaseDocs>

package/src/dev/showcase/drawer.tsx

@@ -6,17 +6,15 @@ import {
   DrawerDescription,
   DrawerFooter,
   DrawerHeader,
-  DrawerPortal,
+  
   DrawerTitle,
-  DrawerTrigger,
-} from "../../components/micro/drawer";
+  DrawerTrigger } from "../../components/micro/drawer";
 import {
   DocsP,
   ExampleGrid,
   ExampleSection,
   Showcase,
-  ShowcaseDocs,
-} from "../../dev/components/showcase";
+  ShowcaseDocs } from "../../dev/components/showcase";
 
 // ──────────────────────────────────────────────────────────
 // SECTION 2: Micro Content (không export)
@@ -32,7 +30,7 @@ function DrawerMicroShowcase() {
     <DrawerTrigger asChild>
       <Button variant="outline">Open Bottom</Button>
     </DrawerTrigger>
-    <DrawerPortal>
+    
       <DrawerContent>
         <div className="mx-auto w-full max-w-sm">
           <DrawerHeader>
@@ -77,7 +75,7 @@ function DrawerMicroShowcase() {
           </DrawerFooter>
         </div>
       </DrawerContent>
-    </DrawerPortal>
+    
   </Drawer>`}
         >
           <Drawer>
@@ -85,7 +83,6 @@ function DrawerMicroShowcase() {
               <Button variant="outline">Open Bottom</Button>
             </DrawerTrigger>
 
-            <DrawerPortal>
               <DrawerContent>
                 <div className="mx-auto w-full max-w-sm">
                   <DrawerHeader>
@@ -130,7 +127,7 @@ function DrawerMicroShowcase() {
                   </DrawerFooter>
                 </div>
               </DrawerContent>
-            </DrawerPortal>
+            
           </Drawer>
         </ExampleSection>
 
@@ -141,7 +138,7 @@ function DrawerMicroShowcase() {
     <DrawerTrigger asChild>
       <Button variant="outline">Show Info</Button>
     </DrawerTrigger>
-    <DrawerPortal>
+    
       <DrawerContent>
         <div className="mx-auto w-full max-w-sm">
           <DrawerHeader>
@@ -160,7 +157,7 @@ function DrawerMicroShowcase() {
           </DrawerFooter>
         </div>
       </DrawerContent>
-    </DrawerPortal>
+    
   </Drawer>`}
         >
           <Drawer>
@@ -168,7 +165,6 @@ function DrawerMicroShowcase() {
               <Button variant="outline">Show Info</Button>
             </DrawerTrigger>
 
-            <DrawerPortal>
               <DrawerContent>
                 <div className="mx-auto w-full max-w-sm">
                   <DrawerHeader>
@@ -186,7 +182,7 @@ function DrawerMicroShowcase() {
                   </DrawerFooter>
                 </div>
               </DrawerContent>
-            </DrawerPortal>
+            
           </Drawer>
         </ExampleSection>
         <ExampleSection
@@ -196,7 +192,7 @@ function DrawerMicroShowcase() {
     <DrawerTrigger asChild>
       <Button variant="outline">Open Left</Button>
     </DrawerTrigger>
-    <DrawerPortal>
+    
       <DrawerContent>
         <DrawerHeader>
           <DrawerTitle>Sidebar Menu</DrawerTitle>
@@ -217,14 +213,14 @@ function DrawerMicroShowcase() {
           </DrawerClose>
         </DrawerFooter>
       </DrawerContent>
-    </DrawerPortal>
+    
   </Drawer>
 
   <Drawer direction="right">
     <DrawerTrigger asChild>
       <Button variant="outline">Open Right</Button>
     </DrawerTrigger>
-    <DrawerPortal>
+    
       <DrawerContent>
         <DrawerHeader>
           <DrawerTitle>Filters</DrawerTitle>
@@ -244,7 +240,7 @@ function DrawerMicroShowcase() {
           </DrawerClose>
         </DrawerFooter>
       </DrawerContent>
-    </DrawerPortal>
+    
   </Drawer>`}
         >
           <Drawer direction="left">
@@ -252,7 +248,6 @@ function DrawerMicroShowcase() {
               <Button variant="outline">Open Left</Button>
             </DrawerTrigger>
 
-            <DrawerPortal>
               <DrawerContent>
                 <DrawerHeader>
                   <DrawerTitle>Sidebar Menu</DrawerTitle>
@@ -273,7 +268,7 @@ function DrawerMicroShowcase() {
                   </DrawerClose>
                 </DrawerFooter>
               </DrawerContent>
-            </DrawerPortal>
+            
           </Drawer>
 
           <Drawer direction="right">
@@ -281,7 +276,6 @@ function DrawerMicroShowcase() {
               <Button variant="outline">Open Right</Button>
             </DrawerTrigger>
 
-            <DrawerPortal>
               <DrawerContent>
                 <DrawerHeader>
                   <DrawerTitle>Filters</DrawerTitle>
@@ -301,7 +295,7 @@ function DrawerMicroShowcase() {
                   </DrawerClose>
                 </DrawerFooter>
               </DrawerContent>
-            </DrawerPortal>
+            
           </Drawer>
         </ExampleSection>
 
@@ -312,7 +306,7 @@ function DrawerMicroShowcase() {
     <DrawerTrigger asChild>
       <Button variant="outline">Open Top</Button>
     </DrawerTrigger>
-    <DrawerPortal>
+    
       <DrawerContent>
         <div className="mx-auto w-full max-w-sm">
           <DrawerHeader>
@@ -333,7 +327,7 @@ function DrawerMicroShowcase() {
           </DrawerFooter>
         </div>
       </DrawerContent>
-    </DrawerPortal>
+    
   </Drawer>`}
         >
           <Drawer direction="top">
@@ -341,7 +335,6 @@ function DrawerMicroShowcase() {
               <Button variant="outline">Open Top</Button>
             </DrawerTrigger>
 
-            <DrawerPortal>
               <DrawerContent>
                 <div className="mx-auto w-full max-w-sm">
                   <DrawerHeader>
@@ -362,7 +355,7 @@ function DrawerMicroShowcase() {
                   </DrawerFooter>
                 </div>
               </DrawerContent>
-            </DrawerPortal>
+            
           </Drawer>
         </ExampleSection>
       </ExampleGrid>
@@ -391,8 +384,7 @@ export default function DrawerShowcase() {
       tabs={[
         {
           label: "Micro (Primitive)",
-          content: <DrawerMicroShowcase />,
-        },
+          content: <DrawerMicroShowcase /> },
       ]}
     />
   );

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

@@ -5,8 +5,7 @@ import {
   HelpCircleIcon,
   LogOutIcon,
   SettingsIcon,
-  UserIcon,
-} from "lucide-react";
+  UserIcon } from "lucide-react";
 
 import { Button } from "../../components/micro/button";
 import {
@@ -16,7 +15,7 @@ import {
   DropdownMenuGroup,
   DropdownMenuItem,
   DropdownMenuLabel,
-  DropdownMenuPortal,
+  
   DropdownMenuRadioGroup,
   DropdownMenuRadioItem,
   DropdownMenuSeparator,
@@ -24,16 +23,14 @@ import {
   DropdownMenuSub,
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-} from "../../components/micro/dropdown-menu";
+  DropdownMenuTrigger } from "../../components/micro/dropdown-menu";
 import { useDevContext } from "../../dev/components/dev-context";
 import {
   DocsP,
   ExampleGrid,
   ExampleSection,
   Showcase,
-  ShowcaseDocs,
-} from "../../dev/components/showcase";
+  ShowcaseDocs } from "../../dev/components/showcase";
 import { type Size } from "../../lib/types";
 
 // ──────────────────────────────────────────────────────────
@@ -54,7 +51,6 @@ function DropdownMenuMicroShowcase({ globalSize }: { globalSize: Size }) {
       render={<Button variant="outline">Open Menu</Button>}
     />
 
-    <DropdownMenuPortal>
       <DropdownMenuContent className="w-56">
         <DropdownMenuGroup>
           <DropdownMenuLabel>My Account</DropdownMenuLabel>
@@ -88,7 +84,7 @@ function DropdownMenuMicroShowcase({ globalSize }: { globalSize: Size }) {
           <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
         </DropdownMenuItem>
       </DropdownMenuContent>
-    </DropdownMenuPortal>
+    
   </DropdownMenu>`}
         >
           <DropdownMenu>
@@ -100,7 +96,6 @@ function DropdownMenuMicroShowcase({ globalSize }: { globalSize: Size }) {
               }
             />
 
-            <DropdownMenuPortal>
               <DropdownMenuContent className="w-56">
                 <DropdownMenuGroup>
                   <DropdownMenuLabel>My Account</DropdownMenuLabel>
@@ -134,7 +129,7 @@ function DropdownMenuMicroShowcase({ globalSize }: { globalSize: Size }) {
                   <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
                 </DropdownMenuItem>
               </DropdownMenuContent>
-            </DropdownMenuPortal>
+            
           </DropdownMenu>
         </ExampleSection>
 
@@ -146,7 +141,6 @@ function DropdownMenuMicroShowcase({ globalSize }: { globalSize: Size }) {
       render={<Button variant="outline">Actions</Button>}
     />
 
-    <DropdownMenuPortal>
       <DropdownMenuContent className="w-56">
         <DropdownMenuGroup>
           <DropdownMenuLabel>Actions</DropdownMenuLabel>
@@ -170,7 +164,7 @@ function DropdownMenuMicroShowcase({ globalSize }: { globalSize: Size }) {
           <span>Log out</span>
         </DropdownMenuItem>
       </DropdownMenuContent>
-    </DropdownMenuPortal>
+    
   </DropdownMenu>`}
         >
           <DropdownMenu>
@@ -182,7 +176,6 @@ function DropdownMenuMicroShowcase({ globalSize }: { globalSize: Size }) {
               }
             />
 
-            <DropdownMenuPortal>
               <DropdownMenuContent className="w-56">
                 <DropdownMenuGroup>
                   <DropdownMenuLabel>Actions</DropdownMenuLabel>
@@ -206,7 +199,7 @@ function DropdownMenuMicroShowcase({ globalSize }: { globalSize: Size }) {
                   <span>Log out</span>
                 </DropdownMenuItem>
               </DropdownMenuContent>
-            </DropdownMenuPortal>
+            
           </DropdownMenu>
         </ExampleSection>
         <ExampleSection
@@ -217,7 +210,6 @@ function DropdownMenuMicroShowcase({ globalSize }: { globalSize: Size }) {
       render={<Button variant="outline">Advanced</Button>}
     />
 
-    <DropdownMenuPortal>
       <DropdownMenuContent className="w-56">
         <DropdownMenuGroup>
           <DropdownMenuLabel>Appearance</DropdownMenuLabel>
@@ -243,13 +235,12 @@ function DropdownMenuMicroShowcase({ globalSize }: { globalSize: Size }) {
               Theme
             </DropdownMenuSubTrigger>
 
-            <DropdownMenuPortal>
               <DropdownMenuSubContent>
                 <DropdownMenuItem>Light</DropdownMenuItem>
                 <DropdownMenuItem>Dark</DropdownMenuItem>
                 <DropdownMenuItem>System</DropdownMenuItem>
               </DropdownMenuSubContent>
-            </DropdownMenuPortal>
+            
           </DropdownMenuSub>
           <DropdownMenuSeparator />
           <DropdownMenuRadioGroup value="bottom">
@@ -265,7 +256,7 @@ function DropdownMenuMicroShowcase({ globalSize }: { globalSize: Size }) {
           </DropdownMenuRadioGroup>
         </DropdownMenuGroup>
       </DropdownMenuContent>
-    </DropdownMenuPortal>
+    
   </DropdownMenu>`}
         >
           <DropdownMenu>
@@ -276,7 +267,7 @@ function DropdownMenuMicroShowcase({ globalSize }: { globalSize: Size }) {
                 </Button>
               }
             />
-            <DropdownMenuPortal>
+            
               <DropdownMenuContent className="w-56">
                 <DropdownMenuGroup>
                   <DropdownMenuLabel>Appearance</DropdownMenuLabel>
@@ -299,13 +290,13 @@ function DropdownMenuMicroShowcase({ globalSize }: { globalSize: Size }) {
                   <DropdownMenuSeparator />
                   <DropdownMenuSub>
                     <DropdownMenuSubTrigger>Theme</DropdownMenuSubTrigger>
-                    <DropdownMenuPortal>
+                    
                       <DropdownMenuSubContent>
                         <DropdownMenuItem>Light</DropdownMenuItem>
                         <DropdownMenuItem>Dark</DropdownMenuItem>
                         <DropdownMenuItem>System</DropdownMenuItem>
                       </DropdownMenuSubContent>
-                    </DropdownMenuPortal>
+                    
                   </DropdownMenuSub>
                   <DropdownMenuSeparator />
                   <DropdownMenuRadioGroup value="bottom">
@@ -321,7 +312,7 @@ function DropdownMenuMicroShowcase({ globalSize }: { globalSize: Size }) {
                   </DropdownMenuRadioGroup>
                 </DropdownMenuGroup>
               </DropdownMenuContent>
-            </DropdownMenuPortal>
+            
           </DropdownMenu>
         </ExampleSection>
         <ExampleSection
@@ -333,7 +324,7 @@ function DropdownMenuMicroShowcase({ globalSize }: { globalSize: Size }) {
         <Button variant="outline">View Options</Button>
       }
     />
-    <DropdownMenuPortal>
+    
       <DropdownMenuContent className="w-48">
         <DropdownMenuGroup>
           <DropdownMenuLabel inset>View</DropdownMenuLabel>
@@ -360,7 +351,7 @@ function DropdownMenuMicroShowcase({ globalSize }: { globalSize: Size }) {
           </DropdownMenuItem>
         </DropdownMenuGroup>
       </DropdownMenuContent>
-    </DropdownMenuPortal>
+    
   </DropdownMenu>`}
         >
           <DropdownMenu>
@@ -371,7 +362,7 @@ function DropdownMenuMicroShowcase({ globalSize }: { globalSize: Size }) {
                 </Button>
               }
             />
-            <DropdownMenuPortal>
+            
               <DropdownMenuContent className="w-48">
                 <DropdownMenuGroup>
                   <DropdownMenuLabel inset>View</DropdownMenuLabel>
@@ -388,7 +379,7 @@ function DropdownMenuMicroShowcase({ globalSize }: { globalSize: Size }) {
                   <DropdownMenuItem inset>Two Columns</DropdownMenuItem>
                 </DropdownMenuGroup>
               </DropdownMenuContent>
-            </DropdownMenuPortal>
+            
           </DropdownMenu>
         </ExampleSection>
       </ExampleGrid>
@@ -416,8 +407,7 @@ export default function DropdownMenuShowcase() {
       tabs={[
         {
           label: "Micro (Primitive)",
-          content: <DropdownMenuMicroShowcase globalSize={globalSize} />,
-        },
+          content: <DropdownMenuMicroShowcase globalSize={globalSize} /> },
       ]}
     />
   );

package/src/dev/showcase/empty.tsx

@@ -5,8 +5,7 @@ import {
   InboxIcon,
   LayersIcon,
   PlusIcon,
-  SearchIcon,
-} from "lucide-react";
+  SearchIcon } from "lucide-react";
 
 import { EmptyPreset } from "../../components/macro/empty-preset";
 import { Button } from "../../components/micro/button";
@@ -17,15 +16,13 @@ import {
   EmptyDescription,
   EmptyHeader,
   EmptyMedia,
-  EmptyTitle,
-} from "../../components/micro/empty";
+  EmptyTitle } from "../../components/micro/empty";
 import {
   DocsP,
   ExampleGrid,
   ExampleSection,
   Showcase,
-  ShowcaseDocs,
-} from "../../dev/components/showcase";
+  ShowcaseDocs } from "../../dev/components/showcase";
 
 // ──────────────────────────────────────────────────────────
 // SECTION 1: Macro Content