gladvn 0.2.19 → 0.2.20

package/src/dev/showcase/alert.tsx

@@ -5,8 +5,7 @@ import {
   InfoIcon,
   TriangleAlertIcon,
   XCircleIcon,
-  XIcon,
-} from "lucide-react";
+  XIcon } from "lucide-react";
 
 import { AlertPreset } from "../../components/macro/alert-preset";
 import {
@@ -14,8 +13,7 @@ import {
   AlertAction,
   AlertDescription,
   AlertIcon,
-  AlertTitle,
-} from "../../components/micro/alert";
+  AlertTitle } from "../../components/micro/alert";
 import { Button } from "../../components/micro/button";
 import { useDevContext } from "../../dev/components/dev-context";
 import {
@@ -26,8 +24,7 @@ import {
   ExampleGrid,
   ExampleSection,
   Showcase,
-  ShowcaseDocs,
-} from "../../dev/components/showcase";
+  ShowcaseDocs } from "../../dev/components/showcase";
 import { type Size } from "../../lib/types";
 
 // ──────────────────────────────────────────────────────────
@@ -757,12 +754,10 @@ export default function AlertShowcase() {
       tabs={[
         {
           label: "Micro (Primitive)",
-          content: <AlertMicroShowcase globalSize={globalSize} />,
-        },
+          content: <AlertMicroShowcase globalSize={globalSize} /> },
         {
           label: "Macro (Preset)",
-          content: <AlertMacroShowcase globalSize={globalSize} />,
-        },
+          content: <AlertMacroShowcase globalSize={globalSize} /> },
       ]}
     />
   );

package/src/dev/showcase/aspect-ratio.tsx

@@ -5,8 +5,7 @@ import {
   ExampleGrid,
   ExampleSection,
   Showcase,
-  ShowcaseDocs,
-} from "../../dev/components/showcase";
+  ShowcaseDocs } from "../../dev/components/showcase";
 
 const commonRatios = [
   { label: "16:9", ratio: 16 / 9, desc: "Widescreen — video, hero banners" },

package/src/dev/showcase/avatar.tsx

@@ -2,8 +2,7 @@ import {
   CheckCircle2Icon,
   CheckIcon,
   LayersIcon,
-  UserIcon,
-} from "lucide-react";
+  UserIcon } from "lucide-react";
 
 import { AvatarPreset } from "../../components/macro/avatar-preset";
 import {
@@ -12,16 +11,14 @@ import {
   AvatarFallback,
   AvatarGroup,
   AvatarGroupCount,
-  AvatarImage,
-} from "../../components/micro/avatar";
+  AvatarImage } from "../../components/micro/avatar";
 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";
 
 // ──────────────────────────────────────────────────────────
@@ -529,12 +526,10 @@ export default function AvatarShowcase() {
       tabs={[
         {
           label: "Micro (Primitive)",
-          content: <AvatarMicroShowcase globalSize={globalSize} />,
-        },
+          content: <AvatarMicroShowcase globalSize={globalSize} /> },
         {
           label: "Macro (Preset)",
-          content: <AvatarMacroShowcase globalSize={globalSize} />,
-        },
+          content: <AvatarMacroShowcase globalSize={globalSize} /> },
       ]}
     />
   );

package/src/dev/showcase/badge.tsx

@@ -8,8 +8,7 @@ import {
   ExampleGrid,
   ExampleSection,
   Showcase,
-  ShowcaseDocs,
-} from "../../dev/components/showcase";
+  ShowcaseDocs } from "../../dev/components/showcase";
 import { type Size } from "../../lib/types";
 
 export default function BadgeShowcase() {
@@ -30,8 +29,7 @@ export default function BadgeShowcase() {
       tabs={[
         {
           label: "Micro (Primitive)",
-          content: <BadgeMicroShowcase globalSize={globalSize} />,
-        },
+          content: <BadgeMicroShowcase globalSize={globalSize} /> },
       ]}
     />
   );

package/src/dev/showcase/breadcrumb.tsx

@@ -8,22 +8,19 @@ import {
   BreadcrumbLink,
   BreadcrumbList,
   BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "../../components/micro/breadcrumb";
+  BreadcrumbSeparator } from "../../components/micro/breadcrumb";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
-  DropdownMenuPortal,
-  DropdownMenuTrigger,
-} from "../../components/micro/dropdown-menu";
+  
+  DropdownMenuTrigger } from "../../components/micro/dropdown-menu";
 import {
   DocsP,
   ExampleGrid,
   ExampleSection,
   Showcase,
-  ShowcaseDocs,
-} from "../../dev/components/showcase";
+  ShowcaseDocs } from "../../dev/components/showcase";
 
 // ──────────────────────────────────────────────────────────
 // SECTION 1: Macro Content
@@ -185,13 +182,13 @@ function BreadcrumbMicroShowcase() {
             <BreadcrumbEllipsis className="h-4 w-4" />
             <span className="sr-only">Toggle menu</span>
           </DropdownMenuTrigger>
-          <DropdownMenuPortal>
+          
             <DropdownMenuContent align="start">
               <DropdownMenuItem>Tài liệu</DropdownMenuItem>
               <DropdownMenuItem>Giao diện</DropdownMenuItem>
               <DropdownMenuItem>GitHub</DropdownMenuItem>
             </DropdownMenuContent>
-          </DropdownMenuPortal>
+          
         </DropdownMenu>
       </BreadcrumbItem>
       <BreadcrumbSeparator />
@@ -219,13 +216,13 @@ function BreadcrumbMicroShowcase() {
                     <BreadcrumbEllipsis className="h-4 w-4" />
                     <span className="sr-only">Toggle menu</span>
                   </DropdownMenuTrigger>
-                  <DropdownMenuPortal>
+                  
                     <DropdownMenuContent align="start">
                       <DropdownMenuItem>Tài liệu</DropdownMenuItem>
                       <DropdownMenuItem>Giao diện</DropdownMenuItem>
                       <DropdownMenuItem>GitHub</DropdownMenuItem>
                     </DropdownMenuContent>
-                  </DropdownMenuPortal>
+                  
                 </DropdownMenu>
               </BreadcrumbItem>
               <BreadcrumbSeparator />

package/src/dev/showcase/button.tsx

@@ -10,8 +10,7 @@ import {
   ExampleGrid,
   ExampleSection,
   Showcase,
-  ShowcaseDocs,
-} from "../../dev/components/showcase";
+  ShowcaseDocs } from "../../dev/components/showcase";
 import { type Size } from "../../lib/types";
 
 function ButtonMicroShowcase({ globalSize }: { globalSize: Size }) {
@@ -277,8 +276,7 @@ export default function ButtonShowcase() {
       tabs={[
         {
           label: "Micro (Primitive)",
-          content: <ButtonMicroShowcase globalSize={globalSize} />,
-        },
+          content: <ButtonMicroShowcase globalSize={globalSize} /> },
       ]}
     />
   );

package/src/dev/showcase/calendar.tsx

@@ -10,8 +10,7 @@ import {
   ExampleGrid,
   ExampleSection,
   Showcase,
-  ShowcaseDocs,
-} from "../../dev/components/showcase";
+  ShowcaseDocs } from "../../dev/components/showcase";
 import { type Size } from "../../lib/types";
 
 function CalendarMicroShowcase({ globalSize }: { globalSize: Size }) {
@@ -23,8 +22,7 @@ function CalendarMicroShowcase({ globalSize }: { globalSize: Size }) {
   ]);
   const [dateRange, setDateRange] = useState<DateRange | undefined>({
     from: new Date(2026, 5, 15),
-    to: new Date(2026, 5, 25),
-  });
+    to: new Date(2026, 5, 25) });
 
   return (
     <div className="space-y-10 mt-6">
@@ -59,8 +57,7 @@ function CalendarMicroShowcase({ globalSize }: { globalSize: Size }) {
           description="Chọn một phạm vi ngày."
           codeString={`const [date, setDate] = React.useState<DateRange | undefined>({
   from: new Date(2026, 5, 15),
-  to: new Date(2026, 5, 25),
-})
+  to: new Date(2026, 5, 25) })
 
 <Calendar
   mode="range"
@@ -370,12 +367,10 @@ export default function CalendarShowcase() {
       tabs={[
         {
           label: "Micro (Primitive)",
-          content: <CalendarMicroShowcase globalSize={globalSize} />,
-        },
+          content: <CalendarMicroShowcase globalSize={globalSize} /> },
         {
           label: "Macro (DatePicker)",
-          content: <CalendarMacroShowcase globalSize={globalSize} />,
-        },
+          content: <CalendarMacroShowcase globalSize={globalSize} /> },
       ]}
     />
   );

package/src/dev/showcase/card.tsx

@@ -7,8 +7,7 @@ import {
   CardDescription,
   CardFooter,
   CardHeader,
-  CardTitle,
-} from "../../components/micro/card";
+  CardTitle } from "../../components/micro/card";
 import { Input } from "../../components/micro/input";
 import { Label } from "../../components/micro/label";
 import { useDevContext } from "../../dev/components/dev-context";
@@ -17,8 +16,7 @@ import {
   ExampleGrid,
   ExampleSection,
   Showcase,
-  ShowcaseDocs,
-} from "../../dev/components/showcase";
+  ShowcaseDocs } from "../../dev/components/showcase";
 import { type Size } from "../../lib/types";
 
 // ──────────────────────────────────────────────────────────
@@ -458,12 +456,10 @@ export default function CardShowcase() {
       tabs={[
         {
           label: "Micro (Primitive)",
-          content: <CardMicroShowcase globalSize={globalSize} />,
-        },
+          content: <CardMicroShowcase globalSize={globalSize} /> },
         {
           label: "Macro (Preset)",
-          content: <CardMacroShowcase globalSize={globalSize} />,
-        },
+          content: <CardMacroShowcase globalSize={globalSize} /> },
       ]}
     />
   );

package/src/dev/showcase/carousel.tsx

@@ -8,15 +8,13 @@ import {
   CarouselDots,
   CarouselItem,
   CarouselNext,
-  CarouselPrevious,
-} from "../../components/micro/carousel";
+  CarouselPrevious } from "../../components/micro/carousel";
 import {
   DocsP,
   ExampleGrid,
   ExampleSection,
   Showcase,
-  ShowcaseDocs,
-} from "../../dev/components/showcase";
+  ShowcaseDocs } from "../../dev/components/showcase";
 import { cn } from "../../lib/utils";
 
 const SLIDES = [
@@ -24,32 +22,27 @@ const SLIDES = [
     id: 1,
     title: "Modern Aesthetics",
     desc: "Crafting beautiful interfaces with tailwind.",
-    bg: "bg-gradient-to-tr from-violet-500 to-purple-500",
-  },
+    bg: "bg-gradient-to-tr from-violet-500 to-purple-500" },
   {
     id: 2,
     title: "Smooth Interactions",
     desc: "Fluid animations and micro-interactions.",
-    bg: "bg-gradient-to-tr from-pink-500 to-rose-500",
-  },
+    bg: "bg-gradient-to-tr from-pink-500 to-rose-500" },
   {
     id: 3,
     title: "Highly Customizable",
     desc: "Easily adapt to your brand.",
-    bg: "bg-gradient-to-tr from-blue-500 to-cyan-500",
-  },
+    bg: "bg-gradient-to-tr from-blue-500 to-cyan-500" },
   {
     id: 4,
     title: "Accessible by Default",
     desc: "Keyboard navigation out of the box.",
-    bg: "bg-gradient-to-tr from-emerald-500 to-teal-500",
-  },
+    bg: "bg-gradient-to-tr from-emerald-500 to-teal-500" },
   {
     id: 5,
     title: "Dark Mode Ready",
     desc: "Looks stunning on dark and light mode.",
-    bg: "bg-gradient-to-tr from-amber-500 to-orange-500",
-  },
+    bg: "bg-gradient-to-tr from-amber-500 to-orange-500" },
 ];
 
 function ControlledCarouselDemo() {
@@ -84,8 +77,7 @@ function ControlledCarouselDemo() {
                     <span className="text-4xl font-semibold">1</span>
                   </div>
                 </div>
-              ),
-            },
+              ) },
             {
               id: "c2",
               content: (
@@ -94,8 +86,7 @@ function ControlledCarouselDemo() {
                     <span className="text-4xl font-semibold">2</span>
                   </div>
                 </div>
-              ),
-            },
+              ) },
             {
               id: "c3",
               content: (
@@ -104,8 +95,7 @@ function ControlledCarouselDemo() {
                     <span className="text-4xl font-semibold">3</span>
                   </div>
                 </div>
-              ),
-            },
+              ) },
           ]}
         />
       </div>
@@ -139,8 +129,7 @@ function CarouselMacroShowcase() {
               </span>
             </div>
           </div>
-        ),
-      },
+        ) },
       {
         id: "std-2",
         content: (
@@ -151,8 +140,7 @@ function CarouselMacroShowcase() {
               </span>
             </div>
           </div>
-        ),
-      },
+        ) },
       {
         id: "std-3",
         content: (
@@ -163,8 +151,7 @@ function CarouselMacroShowcase() {
               </span>
             </div>
           </div>
-        ),
-      },
+        ) },
     ]}
   />`}
         >
@@ -179,8 +166,7 @@ function CarouselMacroShowcase() {
                         <span className="text-4xl font-semibold">1</span>
                       </div>
                     </div>
-                  ),
-                },
+                  ) },
                 {
                   id: "std-2",
                   content: (
@@ -189,8 +175,7 @@ function CarouselMacroShowcase() {
                         <span className="text-4xl font-semibold">2</span>
                       </div>
                     </div>
-                  ),
-                },
+                  ) },
                 {
                   id: "std-3",
                   content: (
@@ -199,8 +184,7 @@ function CarouselMacroShowcase() {
                         <span className="text-4xl font-semibold">3</span>
                       </div>
                     </div>
-                  ),
-                },
+                  ) },
               ]}
             />
           </div>
@@ -219,8 +203,7 @@ function CarouselMacroShowcase() {
             alt="Slide 1"
             className="rounded-xl object-cover"
           />
-        ),
-      },
+        ) },
       {
         id: "img-2",
         content: (
@@ -229,8 +212,7 @@ function CarouselMacroShowcase() {
             alt="Slide 2"
             className="rounded-xl object-cover"
           />
-        ),
-      },
+        ) },
       {
         id: "img-3",
         content: (
@@ -239,8 +221,7 @@ function CarouselMacroShowcase() {
             alt="Slide 3"
             className="rounded-xl object-cover"
           />
-        ),
-      },
+        ) },
     ]}
   />`}
         >
@@ -255,8 +236,7 @@ function CarouselMacroShowcase() {
                       alt="Slide 1"
                       className="rounded-xl object-cover"
                     />
-                  ),
-                },
+                  ) },
                 {
                   id: "img-2",
                   content: (
@@ -265,8 +245,7 @@ function CarouselMacroShowcase() {
                       alt="Slide 2"
                       className="rounded-xl object-cover"
                     />
-                  ),
-                },
+                  ) },
                 {
                   id: "img-3",
                   content: (
@@ -275,8 +254,7 @@ function CarouselMacroShowcase() {
                       alt="Slide 3"
                       className="rounded-xl object-cover"
                     />
-                  ),
-                },
+                  ) },
               ]}
             />
           </div>
@@ -301,8 +279,7 @@ function CarouselMacroShowcase() {
               </span>
             </div>
           </div>
-        ),
-      },
+        ) },
       {
         id: "loop-2",
         content: (
@@ -313,8 +290,7 @@ function CarouselMacroShowcase() {
               </span>
             </div>
           </div>
-        ),
-      },
+        ) },
       {
         id: "loop-3",
         content: (
@@ -325,8 +301,7 @@ function CarouselMacroShowcase() {
               </span>
             </div>
           </div>
-        ),
-      },
+        ) },
     ]}
   />`}
         >
@@ -343,8 +318,7 @@ function CarouselMacroShowcase() {
                         <span className="text-4xl font-semibold">1</span>
                       </div>
                     </div>
-                  ),
-                },
+                  ) },
                 {
                   id: "loop-2",
                   content: (
@@ -353,8 +327,7 @@ function CarouselMacroShowcase() {
                         <span className="text-4xl font-semibold">2</span>
                       </div>
                     </div>
-                  ),
-                },
+                  ) },
                 {
                   id: "loop-3",
                   content: (
@@ -363,8 +336,7 @@ function CarouselMacroShowcase() {
                         <span className="text-4xl font-semibold">3</span>
                       </div>
                     </div>
-                  ),
-                },
+                  ) },
               ]}
             />
           </div>
@@ -386,8 +358,7 @@ function CarouselMacroShowcase() {
               </span>
             </div>
           </div>
-        ),
-      },
+        ) },
       {
         id: "arr-2",
         content: (
@@ -398,8 +369,7 @@ function CarouselMacroShowcase() {
               </span>
             </div>
           </div>
-        ),
-      },
+        ) },
       {
         id: "arr-3",
         content: (
@@ -410,8 +380,7 @@ function CarouselMacroShowcase() {
               </span>
             </div>
           </div>
-        ),
-      },
+        ) },
     ]}
   />`}
         >
@@ -427,8 +396,7 @@ function CarouselMacroShowcase() {
                         <span className="text-4xl font-semibold">A</span>
                       </div>
                     </div>
-                  ),
-                },
+                  ) },
                 {
                   id: "arr-2",
                   content: (
@@ -437,8 +405,7 @@ function CarouselMacroShowcase() {
                         <span className="text-4xl font-semibold">B</span>
                       </div>
                     </div>
-                  ),
-                },
+                  ) },
                 {
                   id: "arr-3",
                   content: (
@@ -447,8 +414,7 @@ function CarouselMacroShowcase() {
                         <span className="text-4xl font-semibold">C</span>
                       </div>
                     </div>
-                  ),
-                },
+                  ) },
               ]}
             />
           </div>
@@ -487,24 +453,21 @@ return (
           <div className="h-full w-full border border-border rounded-xl flex items-center justify-center bg-muted/20 text-4xl font-semibold">
             A
           </div>
-        ),
-      },
+        ) },
       {
         id: "v2",
         content: (
           <div className="h-full w-full border border-border rounded-xl flex items-center justify-center bg-muted/20 text-4xl font-semibold">
             B
           </div>
-        ),
-      },
+        ) },
       {
         id: "v3",
         content: (
           <div className="h-full w-full border border-border rounded-xl flex items-center justify-center bg-muted/20 text-4xl font-semibold">
             C
           </div>
-        ),
-      },
+        ) },
     ]}
   />`}
         >
@@ -521,24 +484,21 @@ return (
                     <div className="h-full w-full border border-border rounded-xl flex items-center justify-center bg-muted/20 text-4xl font-semibold">
                       A
                     </div>
-                  ),
-                },
+                  ) },
                 {
                   id: "v2",
                   content: (
                     <div className="h-full w-full border border-border rounded-xl flex items-center justify-center bg-muted/20 text-4xl font-semibold">
                       B
                     </div>
-                  ),
-                },
+                  ) },
                 {
                   id: "v3",
                   content: (
                     <div className="h-full w-full border border-border rounded-xl flex items-center justify-center bg-muted/20 text-4xl font-semibold">
                       C
                     </div>
-                  ),
-                },
+                  ) },
               ]}
             />
           </div>