gladvn 0.2.18 → 0.2.20

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

@@ -6,17 +6,15 @@ import {
   NavigationMenuItem,
   NavigationMenuLink,
   NavigationMenuList,
-  NavigationMenuPortal,
+  
   NavigationMenuPositioner,
   NavigationMenuTrigger,
-  navigationMenuTriggerStyle,
-} from "../../components/micro/navigation-menu";
+  navigationMenuTriggerStyle } from "../../components/micro/navigation-menu";
 import {
   DocsP,
   ExampleSection,
   Showcase,
-  ShowcaseDocs,
-} from "../../dev/components/showcase";
+  ShowcaseDocs } from "../../dev/components/showcase";
 import { cn } from "../../lib/utils";
 
 const ListItem = React.forwardRef<
@@ -147,9 +145,9 @@ function NavigationMenuMicroShowcase() {
         </NavigationMenuLink>
       </NavigationMenuItem>
     </NavigationMenuList>
-    <NavigationMenuPortal>
+    
       <NavigationMenuPositioner />
-    </NavigationMenuPortal>
+    
   </NavigationMenu>`}
       >
         <NavigationMenu>
@@ -233,9 +231,9 @@ function NavigationMenuMicroShowcase() {
               </NavigationMenuLink>
             </NavigationMenuItem>
           </NavigationMenuList>
-          <NavigationMenuPortal>
+          
             <NavigationMenuPositioner />
-          </NavigationMenuPortal>
+          
         </NavigationMenu>
       </ExampleSection>
 
@@ -255,9 +253,9 @@ function NavigationMenuMicroShowcase() {
         </NavigationMenuContent>
       </NavigationMenuItem>
     </NavigationMenuList>
-    <NavigationMenuPortal>
+    
       <NavigationMenuPositioner />
-    </NavigationMenuPortal>
+    
   </NavigationMenu>`}
       >
         <NavigationMenu>
@@ -272,9 +270,9 @@ function NavigationMenuMicroShowcase() {
               </NavigationMenuContent>
             </NavigationMenuItem>
           </NavigationMenuList>
-          <NavigationMenuPortal>
+          
             <NavigationMenuPositioner />
-          </NavigationMenuPortal>
+          
         </NavigationMenu>
       </ExampleSection>
     </div>
@@ -301,8 +299,7 @@ export default function NavigationMenuShowcase() {
       tabs={[
         {
           label: "Micro (Primitive)",
-          content: <NavigationMenuMicroShowcase />,
-        },
+          content: <NavigationMenuMicroShowcase /> },
       ]}
     />
   );

package/src/dev/showcase/overview.tsx

@@ -15,32 +15,28 @@ import {
   PaletteIcon,
   ShieldCheckIcon,
   SlidersHorizontalIcon,
-  SparklesIcon,
-} from "lucide-react";
+  SparklesIcon } from "lucide-react";
 import { toast } from "sonner";
 
 import { ProgressPreset as Progress } from "../../components/macro/progress-preset";
 import {
   Avatar,
   AvatarFallback,
-  AvatarImage,
-} from "../../components/micro/avatar";
+  AvatarImage } from "../../components/micro/avatar";
 import { Button } from "../../components/micro/button";
 import {
   Card,
   CardContent,
   CardHeader,
-  CardTitle,
-} from "../../components/micro/card";
+  CardTitle } from "../../components/micro/card";
 import { Label } from "../../components/micro/label";
 import {
   Select,
   SelectContent,
   SelectItem,
-  SelectPortal,
+  
   SelectTrigger,
-  SelectValue,
-} from "../../components/micro/select";
+  SelectValue } from "../../components/micro/select";
 import { Switch } from "../../components/micro/switch";
 import { ColorSwatch } from "../../dev/components/showcase";
 import { COLORS, STATS } from "../../dev/data";
@@ -49,8 +45,7 @@ import { cn } from "../../lib/utils";
 function CodeBlock({
   type,
   title,
-  children,
-}: {
+  children }: {
   type: "success" | "destructive";
   title: string;
   children: React.ReactNode;
@@ -218,7 +213,7 @@ export default function OverviewSection() {
                     <SelectTrigger className="w-full bg-background/50">
                       <SelectValue placeholder="Chọn vùng" />
                     </SelectTrigger>
-                    <SelectPortal>
+                    
                       <SelectContent>
                         <SelectItem value="edge">
                           Edge Network (Toàn cầu)
@@ -230,7 +225,7 @@ export default function OverviewSection() {
                           AP South East (Sing)
                         </SelectItem>
                       </SelectContent>
-                    </SelectPortal>
+                    
                   </Select>
                 </div>
               </div>
@@ -956,20 +951,14 @@ export default function OverviewSection() {
             </h3>
             <p className="text-muted-foreground text-xl leading-relaxed">
               Dark section bên trong Light app? Dễ. Nhưng khi Tooltip hay Dialog
-              render qua Portal — chúng thoát khỏi DOM tree và{" "}
+              render nổi qua cơ chế Portaling — chúng thoát khỏi DOM tree hiện tại và{" "}
               <strong className="text-foreground">mất theme</strong>. Hầu hết
               thư viện bỏ cuộc ở đây.
             </p>
             <p className="text-muted-foreground text-xl leading-relaxed">
-              gladvn dùng{" "}
-              <code className="text-sm bg-warning/20 text-warning px-1.5 py-0.5 rounded">
-                {"<ThemeWrapper>"}
-              </code>{" "}
-              để tunnel theme xuyên qua Portal boundary.{" "}
-              <strong className="text-foreground">
-                Dialog, Tooltip, Select... luôn đúng màu, dù render ở đâu trong
-                DOM.
-              </strong>
+              Nhưng hiện tại thư viện đã áp dụng <strong>Zero-Portal API</strong> (kể từ v0.2.20).
+              Bạn không cần phải import <code className="text-sm bg-warning/20 text-warning px-1.5 py-0.5 rounded">ThemeWrapper</code> hay <code className="text-sm bg-warning/20 text-warning px-1.5 py-0.5 rounded">*Portal</code> nữa.
+              Toàn bộ logic portaling và ThemeWrapper đã được nhúng sẵn vào trong các <code className="text-sm bg-warning/20 text-warning px-1.5 py-0.5 rounded">*Content</code> components (VD: <code className="text-sm bg-warning/20 text-warning px-1.5 py-0.5 rounded">DialogContent</code>, <code className="text-sm bg-warning/20 text-warning px-1.5 py-0.5 rounded">TooltipContent</code>).
             </p>
           </div>
 
@@ -1033,8 +1022,7 @@ export default function OverviewSection() {
                 className="animate-fade-up"
                 style={{
                   animationDelay: `${i * 50}ms`,
-                  animationFillMode: "both",
-                }}
+                  animationFillMode: "both" }}
               >
                 <ColorSwatch color={c} />
               </div>
@@ -1058,8 +1046,7 @@ export default function OverviewSection() {
                 name: "Ý Le",
                 role: "Creator & Maintainer",
                 avatar: "https://github.com/duongacy.png",
-                url: "https://github.com/duongacy",
-              },
+                url: "https://github.com/duongacy" },
             ].map((user) => (
               <a
                 key={user.name}

package/src/dev/showcase/pagination.tsx

@@ -8,8 +8,7 @@ import {
   PaginationItem,
   PaginationLink,
   PaginationNext,
-  PaginationPrevious,
-} from "../../components/micro/pagination";
+  PaginationPrevious } from "../../components/micro/pagination";
 import { useDevContext } from "../../dev/components/dev-context";
 import {
   DocsCode,
@@ -18,8 +17,7 @@ import {
   ExampleGrid,
   ExampleSection,
   Showcase,
-  ShowcaseDocs,
-} from "../../dev/components/showcase";
+  ShowcaseDocs } from "../../dev/components/showcase";
 import { type Size } from "../../lib/types";
 
 // ──────────────────────────────────────────────────────────
@@ -332,12 +330,10 @@ export default function PaginationShowcase() {
       tabs={[
         {
           label: "Micro (Primitive)",
-          content: <PaginationMicroShowcase globalSize={globalSize} />,
-        },
+          content: <PaginationMicroShowcase globalSize={globalSize} /> },
         {
           label: "Macro (Preset)",
-          content: <PaginationMacroShowcase globalSize={globalSize} />,
-        },
+          content: <PaginationMacroShowcase globalSize={globalSize} /> },
       ]}
     />
   );

package/src/dev/showcase/popover.tsx

@@ -10,18 +10,16 @@ import {
   PopoverContent,
   PopoverDescription,
   PopoverHeader,
-  PopoverPortal,
+  
   PopoverTitle,
-  PopoverTrigger,
-} from "../../components/micro/popover";
+  PopoverTrigger } from "../../components/micro/popover";
 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";
 
 // ──────────────────────────────────────────────────────────
@@ -44,7 +42,7 @@ function PopoverMicroShowcase({ globalSize }: { globalSize: Size }) {
       </Button>
     }
   />
-  <PopoverPortal><PopoverContent className="w-80" sideOffset={8}>
+  <PopoverContent className="w-80" sideOffset={8}>
     <PopoverHeader>
       <PopoverTitle>Dimensions</PopoverTitle>
       <PopoverDescription>
@@ -69,7 +67,7 @@ function PopoverMicroShowcase({ globalSize }: { globalSize: Size }) {
         />
       </div>
     </div>
-  </PopoverContent></PopoverPortal>
+  </PopoverContent>
 </Popover>
 `}
         >
@@ -82,7 +80,6 @@ function PopoverMicroShowcase({ globalSize }: { globalSize: Size }) {
               }
             />
 
-            <PopoverPortal>
               <PopoverContent className="w-80" sideOffset={8}>
                 <PopoverHeader>
                   <PopoverTitle>Dimensions</PopoverTitle>
@@ -109,7 +106,7 @@ function PopoverMicroShowcase({ globalSize }: { globalSize: Size }) {
                   </div>
                 </div>
               </PopoverContent>
-            </PopoverPortal>
+            
           </Popover>
         </ExampleSection>
 
@@ -130,7 +127,7 @@ function PopoverMicroShowcase({ globalSize }: { globalSize: Size }) {
           </Button>
         }
       />
-      <PopoverPortal>
+      
         <PopoverContent
           className="w-64"
           sideOffset={8}
@@ -143,7 +140,7 @@ function PopoverMicroShowcase({ globalSize }: { globalSize: Size }) {
             </PopoverDescription>
           </PopoverHeader>
         </PopoverContent>
-      </PopoverPortal>
+      
     </Popover>
 
     <Popover>
@@ -154,7 +151,7 @@ function PopoverMicroShowcase({ globalSize }: { globalSize: Size }) {
           </Button>
         }
       />
-      <PopoverPortal>
+      
         <PopoverContent className="w-56" sideOffset={8}>
           <PopoverHeader>
             <PopoverTitle>Cài đặt nhanh</PopoverTitle>
@@ -180,7 +177,7 @@ function PopoverMicroShowcase({ globalSize }: { globalSize: Size }) {
             </Button>
           </div>
         </PopoverContent>
-      </PopoverPortal>
+      
     </Popover>
   </div>`}
         >
@@ -199,7 +196,6 @@ function PopoverMicroShowcase({ globalSize }: { globalSize: Size }) {
                 }
               />
 
-              <PopoverPortal>
                 <PopoverContent className="w-64" sideOffset={8} align="start">
                   <PopoverHeader>
                     <PopoverTitle>Thông báo</PopoverTitle>
@@ -208,7 +204,7 @@ function PopoverMicroShowcase({ globalSize }: { globalSize: Size }) {
                     </PopoverDescription>
                   </PopoverHeader>
                 </PopoverContent>
-              </PopoverPortal>
+              
             </Popover>
 
             <Popover>
@@ -220,7 +216,6 @@ function PopoverMicroShowcase({ globalSize }: { globalSize: Size }) {
                 }
               />
 
-              <PopoverPortal>
                 <PopoverContent className="w-56" sideOffset={8}>
                   <PopoverHeader>
                     <PopoverTitle>Cài đặt nhanh</PopoverTitle>
@@ -240,7 +235,7 @@ function PopoverMicroShowcase({ globalSize }: { globalSize: Size }) {
                     </Button>
                   </div>
                 </PopoverContent>
-              </PopoverPortal>
+              
             </Popover>
           </div>
         </ExampleSection>
@@ -253,7 +248,7 @@ function PopoverMicroShowcase({ globalSize }: { globalSize: Size }) {
     <PopoverTrigger asChild>
       <Button variant="outline">top</Button>
     </PopoverTrigger>
-    <PopoverPortal>
+    
       <PopoverContent
         side="top"
         sideOffset={8}
@@ -261,7 +256,7 @@ function PopoverMicroShowcase({ globalSize }: { globalSize: Size }) {
       >
         Hiển thị ở phía <strong>top</strong>
       </PopoverContent>
-    </PopoverPortal>
+    
   </Popover>`}
       >
         <div className="flex flex-wrap items-center justify-center gap-4 py-8">
@@ -278,7 +273,7 @@ function PopoverMicroShowcase({ globalSize }: { globalSize: Size }) {
                   </Button>
                 }
               />
-              <PopoverPortal>
+              
                 <PopoverContent
                   side={side}
                   sideOffset={8}
@@ -286,7 +281,7 @@ function PopoverMicroShowcase({ globalSize }: { globalSize: Size }) {
                 >
                   Hiển thị ở phía <strong className="capitalize">{side}</strong>
                 </PopoverContent>
-              </PopoverPortal>
+              
             </Popover>
           ))}
         </div>
@@ -302,7 +297,7 @@ function PopoverMicroShowcase({ globalSize }: { globalSize: Size }) {
         Toggle Controlled Popover
       </Button>
     </PopoverTrigger>
-    <PopoverPortal>
+    
       <PopoverContent className="w-80" sideOffset={8}>
         <PopoverHeader>
           <PopoverTitle>Controlled Mode</PopoverTitle>
@@ -321,7 +316,7 @@ function PopoverMicroShowcase({ globalSize }: { globalSize: Size }) {
           </Button>
         </div>
       </PopoverContent>
-    </PopoverPortal>
+    
   </Popover>
   )`}
       >
@@ -334,7 +329,7 @@ function PopoverMicroShowcase({ globalSize }: { globalSize: Size }) {
                 </Button>
               }
             />
-            <PopoverPortal>
+            
               <PopoverContent className="w-80" sideOffset={8}>
                 <PopoverHeader>
                   <PopoverTitle>Controlled Mode</PopoverTitle>
@@ -353,7 +348,7 @@ function PopoverMicroShowcase({ globalSize }: { globalSize: Size }) {
                   </Button>
                 </div>
               </PopoverContent>
-            </PopoverPortal>
+            
           </Popover>
 
           <div className="text-sm text-muted-foreground">
@@ -393,8 +388,7 @@ export default function PopoverShowcase() {
       tabs={[
         {
           label: "Micro (Primitive)",
-          content: <PopoverMicroShowcase globalSize={globalSize} />,
-        },
+          content: <PopoverMicroShowcase globalSize={globalSize} /> },
       ]}
     />
   );

package/src/dev/showcase/progress.tsx

@@ -4,8 +4,7 @@ import {
   ProgressIndicator,
   ProgressLabel,
   ProgressTrack,
-  ProgressValue,
-} from "../../components/micro/progress";
+  ProgressValue } from "../../components/micro/progress";
 import { useDevContext } from "../../dev/components/dev-context";
 import {
   DocsCode,
@@ -14,8 +13,7 @@ import {
   ExampleGrid,
   ExampleSection,
   Showcase,
-  ShowcaseDocs,
-} from "../../dev/components/showcase";
+  ShowcaseDocs } from "../../dev/components/showcase";
 import { type Size } from "../../lib/types";
 
 // ──────────────────────────────────────────────────────────
@@ -317,12 +315,10 @@ export default function ProgressShowcase() {
       tabs={[
         {
           label: "Micro (Primitive)",
-          content: <ProgressMicroShowcase globalSize={globalSize} />,
-        },
+          content: <ProgressMicroShowcase globalSize={globalSize} /> },
         {
           label: "Macro (Preset)",
-          content: <ProgressMacroShowcase globalSize={globalSize} />,
-        },
+          content: <ProgressMacroShowcase globalSize={globalSize} /> },
       ]}
     />
   );

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

@@ -15,23 +15,20 @@ import {
   ExampleGrid,
   ExampleSection,
   Showcase,
-  ShowcaseDocs,
-} from "../../dev/components/showcase";
+  ShowcaseDocs } from "../../dev/components/showcase";
 import { type Size } from "../../lib/types";
 
 // ──────────────────────────────────────────────────────────
 // RHF Form Demo (Macro)
 // ──────────────────────────────────────────────────────────
 const formSchema = z.object({
-  notify: z.string().min(1, "Vui lòng chọn phương thức thông báo."),
-});
+  notify: z.string().min(1, "Vui lòng chọn phương thức thông báo.") });
 type FormValues = z.infer<typeof formSchema>;
 
 function RadioGroupForm({ size }: { size: Size }) {
   const form = useForm<FormValues>({
     resolver: zodResolver(formSchema),
-    defaultValues: { notify: "" },
-  });
+    defaultValues: { notify: "" } });
 
   return (
     <form
@@ -69,8 +66,7 @@ const rhfCode = `const formSchema = z.object({ notify: z.string().min(1, "Bắt
 function RadioGroupForm({ size }: { size: Size }) {
   const form = useForm({
     resolver: zodResolver(formSchema),
-    defaultValues: { notify: "" },
-  });
+    defaultValues: { notify: "" } });
 
   return (
     <form onSubmit={form.handleSubmit(console.log)} className="space-y-6">
@@ -174,8 +170,7 @@ function RadioGroupMacroShowcase({ globalSize }: { globalSize: Size }) {
       {
         value: "system",
         label: "Theo hệ thống",
-        description: "Khuyên dùng để tiết kiệm pin",
-      },
+        description: "Khuyên dùng để tiết kiệm pin" },
     ]}
     defaultValue="system"
   />`}
@@ -191,8 +186,7 @@ function RadioGroupMacroShowcase({ globalSize }: { globalSize: Size }) {
               {
                 value: "system",
                 label: "Theo hệ thống",
-                description: "Khuyên dùng để tiết kiệm pin",
-              },
+                description: "Khuyên dùng để tiết kiệm pin" },
             ]}
             defaultValue="system"
           />
@@ -683,12 +677,10 @@ export default function RadioGroupShowcase() {
       tabs={[
         {
           label: "Micro (Primitive)",
-          content: <RadioGroupMicroShowcase globalSize={globalSize} />,
-        },
+          content: <RadioGroupMicroShowcase globalSize={globalSize} /> },
         {
           label: "Macro (Preset)",
-          content: <RadioGroupMacroShowcase globalSize={globalSize} />,
-        },
+          content: <RadioGroupMacroShowcase globalSize={globalSize} /> },
       ]}
     />
   );

package/src/dev/showcase/resizable.tsx

@@ -1,16 +1,14 @@
 import {
   ResizableHandle,
   ResizablePanel,
-  ResizablePanelGroup,
-} from "../../components/micro/resizable";
+  ResizablePanelGroup } from "../../components/micro/resizable";
 import {
   DocsCode,
   DocsP,
   ExampleGrid,
   ExampleSection,
   Showcase,
-  ShowcaseDocs,
-} from "../../dev/components/showcase";
+  ShowcaseDocs } from "../../dev/components/showcase";
 
 // ──────────────────────────────────────────────────────────
 // SECTION 1: Micro Content

package/src/dev/showcase/scroll-area.tsx

@@ -6,8 +6,7 @@ import {
   ExampleGrid,
   ExampleSection,
   Showcase,
-  ShowcaseDocs,
-} from "../../dev/components/showcase";
+  ShowcaseDocs } from "../../dev/components/showcase";
 
 // ──────────────────────────────────────────────────────────
 // SECTION 1: Explicit Sub-components for Demo