gladvn 0.2.18 → 0.2.20

package/src/dev/showcase/accordion.tsx

@@ -7,15 +7,13 @@ import {
   Accordion,
   AccordionContent,
   AccordionItem,
-  AccordionTrigger,
-} from "../../components/micro/accordion";
+  AccordionTrigger } from "../../components/micro/accordion";
 import {
   DocsP,
   ExampleGrid,
   ExampleSection,
   Showcase,
-  ShowcaseDocs,
-} from "../../dev/components/showcase";
+  ShowcaseDocs } from "../../dev/components/showcase";
 
 // ──────────────────────────────────────────────────────────
 // Shared Data
@@ -23,20 +21,16 @@ import {
 const faqItems = [
   {
     q: "Is it accessible?",
-    a: "Yes. It adheres to the WAI-ARIA design pattern. Keyboard navigation and screen readers are fully supported.",
-  },
+    a: "Yes. It adheres to the WAI-ARIA design pattern. Keyboard navigation and screen readers are fully supported." },
   {
     q: "Is it styled?",
-    a: "Yes. It comes with default styles that match the other components' aesthetic. You can override every token via CSS variables.",
-  },
+    a: "Yes. It comes with default styles that match the other components' aesthetic. You can override every token via CSS variables." },
   {
     q: "Is it animated?",
-    a: "Yes. It's animated by default with smooth expand/collapse transitions, but you can disable animation if you prefer.",
-  },
+    a: "Yes. It's animated by default with smooth expand/collapse transitions, but you can disable animation if you prefer." },
   {
     q: "Can I nest accordions?",
-    a: "Yes. You can nest accordion components inside each other to create multi-level collapsible sections.",
-  },
+    a: "Yes. You can nest accordion components inside each other to create multi-level collapsible sections." },
 ];
 
 const presetItems = [
@@ -44,19 +38,16 @@ const presetItems = [
     value: "item-1",
     title: "Is it accessible?",
     content:
-      "Yes. It adheres to the WAI-ARIA design pattern. Keyboard navigation and screen readers are fully supported.",
-  },
+      "Yes. It adheres to the WAI-ARIA design pattern. Keyboard navigation and screen readers are fully supported." },
   {
     value: "item-2",
     title: "Is it styled?",
     content:
-      "Yes. It comes with default styles that match the other components' aesthetic.",
-  },
+      "Yes. It comes with default styles that match the other components' aesthetic." },
   {
     value: "item-3",
     title: "Is it animated?",
-    content: "Yes. It's animated by default with smooth transitions.",
-  },
+    content: "Yes. It's animated by default with smooth transitions." },
 ];
 
 // ──────────────────────────────────────────────────────────
@@ -79,20 +70,17 @@ function AccordionMacroShowcase() {
         value: "item-1",
         title: "Is it accessible?",
         content:
-          "Yes. It adheres to the WAI-ARIA design pattern. Keyboard navigation and screen readers are fully supported.",
-      },
+          "Yes. It adheres to the WAI-ARIA design pattern. Keyboard navigation and screen readers are fully supported." },
       {
         value: "item-2",
         title: "Is it styled?",
         content:
-          "Yes. It comes with default styles that match the other components' aesthetic.",
-      },
+          "Yes. It comes with default styles that match the other components' aesthetic." },
       {
         value: "item-3",
         title: "Is it animated?",
         content:
-          "Yes. It's animated by default with smooth transitions.",
-      },
+          "Yes. It's animated by default with smooth transitions." },
     ]}
   />`}
         >
@@ -104,20 +92,17 @@ function AccordionMacroShowcase() {
                 value: "item-1",
                 title: "Is it accessible?",
                 content:
-                  "Yes. It adheres to the WAI-ARIA design pattern. Keyboard navigation and screen readers are fully supported.",
-              },
+                  "Yes. It adheres to the WAI-ARIA design pattern. Keyboard navigation and screen readers are fully supported." },
               {
                 value: "item-2",
                 title: "Is it styled?",
                 content:
-                  "Yes. It comes with default styles that match the other components' aesthetic.",
-              },
+                  "Yes. It comes with default styles that match the other components' aesthetic." },
               {
                 value: "item-3",
                 title: "Is it animated?",
                 content:
-                  "Yes. It's animated by default with smooth transitions.",
-              },
+                  "Yes. It's animated by default with smooth transitions." },
             ]}
           />
         </ExampleSection>
@@ -134,20 +119,17 @@ function AccordionMacroShowcase() {
         value: "item-1",
         title: "Is it accessible?",
         content:
-          "Yes. It adheres to the WAI-ARIA design pattern. Keyboard navigation and screen readers are fully supported.",
-      },
+          "Yes. It adheres to the WAI-ARIA design pattern. Keyboard navigation and screen readers are fully supported." },
       {
         value: "item-2",
         title: "Is it styled?",
         content:
-          "Yes. It comes with default styles that match the other components' aesthetic.",
-      },
+          "Yes. It comes with default styles that match the other components' aesthetic." },
       {
         value: "item-3",
         title: "Is it animated?",
         content:
-          "Yes. It's animated by default with smooth transitions.",
-      },
+          "Yes. It's animated by default with smooth transitions." },
     ]}
   />`}
         >
@@ -160,20 +142,17 @@ function AccordionMacroShowcase() {
                 value: "item-1",
                 title: "Is it accessible?",
                 content:
-                  "Yes. It adheres to the WAI-ARIA design pattern. Keyboard navigation and screen readers are fully supported.",
-              },
+                  "Yes. It adheres to the WAI-ARIA design pattern. Keyboard navigation and screen readers are fully supported." },
               {
                 value: "item-2",
                 title: "Is it styled?",
                 content:
-                  "Yes. It comes with default styles that match the other components' aesthetic.",
-              },
+                  "Yes. It comes with default styles that match the other components' aesthetic." },
               {
                 value: "item-3",
                 title: "Is it animated?",
                 content:
-                  "Yes. It's animated by default with smooth transitions.",
-              },
+                  "Yes. It's animated by default with smooth transitions." },
             ]}
           />
         </ExampleSection>
@@ -194,18 +173,15 @@ return (
               {
                 value: "item-1",
                 title: "Is it accessible?",
-                content: "Yes. It adheres to the WAI-ARIA design pattern. Keyboard navigation and screen readers are fully supported.",
-              },
+                content: "Yes. It adheres to the WAI-ARIA design pattern. Keyboard navigation and screen readers are fully supported." },
               {
                 value: "item-2",
                 title: "Is it styled?",
-                content: "Yes. It comes with default styles that match the other components' aesthetic.",
-              },
+                content: "Yes. It comes with default styles that match the other components' aesthetic." },
               {
                 value: "item-3",
                 title: "Is it animated?",
-                content: "Yes. It's animated by default with smooth transitions.",
-              },
+                content: "Yes. It's animated by default with smooth transitions." },
             ]}
   />
 );`}
@@ -229,20 +205,17 @@ return (
                   value: "item-1",
                   title: "Is it accessible?",
                   content:
-                    "Yes. It adheres to the WAI-ARIA design pattern. Keyboard navigation and screen readers are fully supported.",
-                },
+                    "Yes. It adheres to the WAI-ARIA design pattern. Keyboard navigation and screen readers are fully supported." },
                 {
                   value: "item-2",
                   title: "Is it styled?",
                   content:
-                    "Yes. It comes with default styles that match the other components' aesthetic.",
-                },
+                    "Yes. It comes with default styles that match the other components' aesthetic." },
                 {
                   value: "item-3",
                   title: "Is it animated?",
                   content:
-                    "Yes. It's animated by default with smooth transitions.",
-                },
+                    "Yes. It's animated by default with smooth transitions." },
               ]}
             />
           </div>
@@ -258,21 +231,18 @@ return (
         value: "enabled-1",
         title: "Available Feature",
         content:
-          "This feature is available and can be expanded normally.",
-      },
+          "This feature is available and can be expanded normally." },
       {
         value: "disabled-1",
         title: "Premium Feature (Locked)",
         content:
           "This content is hidden behind a premium plan.",
-        disabled: true,
-      },
+        disabled: true },
       {
         value: "enabled-2",
         title: "Another Feature",
         content:
-          "This is another available feature you can interact with freely.",
-      },
+          "This is another available feature you can interact with freely." },
     ]}
   />`}
         >
@@ -283,20 +253,17 @@ return (
                 value: "enabled-1",
                 title: "Available Feature",
                 content:
-                  "This feature is available and can be expanded normally.",
-              },
+                  "This feature is available and can be expanded normally." },
               {
                 value: "disabled-1",
                 title: "Premium Feature (Locked)",
                 content: "This content is hidden behind a premium plan.",
-                disabled: true,
-              },
+                disabled: true },
               {
                 value: "enabled-2",
                 title: "Another Feature",
                 content:
-                  "This is another available feature you can interact with freely.",
-              },
+                  "This is another available feature you can interact with freely." },
             ]}
           />
         </ExampleSection>
@@ -322,8 +289,7 @@ return (
               Edit Profile
             </button>
           </div>
-        ),
-      },
+        ) },
     ]}
   />`}
         >
@@ -342,8 +308,7 @@ return (
                       Edit Profile
                     </button>
                   </div>
-                ),
-              },
+                ) },
             ]}
           />
         </ExampleSection>
@@ -365,12 +330,10 @@ return (
                 value: "installation",
                 title: "Installation",
                 content:
-                  "Run npm install to add the component to your project.",
-              },
+                  "Run npm install to add the component to your project." },
             ]}
           />
-        ),
-      },
+        ) },
       {
         value: "advanced",
         title: "Advanced Usage",
@@ -382,12 +345,10 @@ return (
                 value: "controlled",
                 title: "Controlled Mode",
                 content:
-                  "Use the value and onValueChange props to control which items are open.",
-              },
+                  "Use the value and onValueChange props to control which items are open." },
             ]}
           />
-        ),
-      },
+        ) },
     ]}
   />`}
         >
@@ -405,12 +366,10 @@ return (
                         value: "installation",
                         title: "Installation",
                         content:
-                          "Run npm install to add the component to your project.",
-                      },
+                          "Run npm install to add the component to your project." },
                     ]}
                   />
-                ),
-              },
+                ) },
               {
                 value: "advanced",
                 title: "Advanced Usage",
@@ -422,12 +381,10 @@ return (
                         value: "controlled",
                         title: "Controlled Mode",
                         content:
-                          "Use the value and onValueChange props to control which items are open.",
-                      },
+                          "Use the value and onValueChange props to control which items are open." },
                     ]}
                   />
-                ),
-              },
+                ) },
             ]}
           />
         </ExampleSection>
@@ -821,14 +778,12 @@ function AccordionMicroShowcase() {
               value: "Is it accessible?",
               title: "Is it accessible?",
               content:
-                "Yes. It adheres to the WAI-ARIA design pattern.",
-            },
+                "Yes. It adheres to the WAI-ARIA design pattern." },
             {
               value: "Is it styled?",
               title: "Is it styled?",
               content:
-                "Yes. It comes with default styles that match the other components' aesthetic.",
-            },
+                "Yes. It comes with default styles that match the other components' aesthetic." },
           ]}
         />
       </div>
@@ -929,14 +884,12 @@ function AccordionMicroShowcase() {
                   {
                     value: "Is it accessible?",
                     title: "Is it accessible?",
-                    content: "Yes. It adheres to the WAI-ARIA design pattern.",
-                  },
+                    content: "Yes. It adheres to the WAI-ARIA design pattern." },
                   {
                     value: "Is it styled?",
                     title: "Is it styled?",
                     content:
-                      "Yes. It comes with default styles that match the other components' aesthetic.",
-                  },
+                      "Yes. It comes with default styles that match the other components' aesthetic." },
                 ]}
               />
             </div>

package/src/dev/showcase/alert-dialog.tsx

@@ -7,8 +7,7 @@ import {
   MessageSquareWarningIcon,
   ShieldAlertIcon,
   TrashIcon,
-  XIcon,
-} from "lucide-react";
+  XIcon } from "lucide-react";
 
 import { AlertDialogPreset } from "../../components/macro/alert-dialog-preset";
 import {
@@ -21,10 +20,9 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogMedia,
-  AlertDialogPortal,
+  
   AlertDialogTitle,
-  AlertDialogTrigger,
-} from "../../components/micro/alert-dialog";
+  AlertDialogTrigger } from "../../components/micro/alert-dialog";
 import { Button } from "../../components/micro/button";
 import { useDevContext } from "../../dev/components/dev-context";
 import {
@@ -32,8 +30,7 @@ import {
   ExampleGrid,
   ExampleSection,
   Showcase,
-  ShowcaseDocs,
-} from "../../dev/components/showcase";
+  ShowcaseDocs } from "../../dev/components/showcase";
 import { type Size } from "../../lib/types";
 
 // ──────────────────────────────────────────────────────────
@@ -354,7 +351,7 @@ function AlertDialogMicroShowcase({ globalSize }: { globalSize: Size }) {
         <Button variant="outline">Mở Dialog Trắng</Button>
       }
     />
-    <AlertDialogPortal>
+    
       <AlertDialogContent>
         <AlertDialogHeader>
           <AlertDialogTitle>
@@ -371,7 +368,7 @@ function AlertDialogMicroShowcase({ globalSize }: { globalSize: Size }) {
           <AlertDialogAction>Tiếp tục</AlertDialogAction>
         </AlertDialogFooter>
       </AlertDialogContent>
-    </AlertDialogPortal>
+    
   </AlertDialog>`}
         >
           <AlertDialog>
@@ -383,7 +380,6 @@ function AlertDialogMicroShowcase({ globalSize }: { globalSize: Size }) {
               }
             />
 
-            <AlertDialogPortal>
               <AlertDialogContent size={globalSize}>
                 <AlertDialogHeader>
                   <AlertDialogTitle>Cấu trúc nguyên thuỷ</AlertDialogTitle>
@@ -401,7 +397,7 @@ function AlertDialogMicroShowcase({ globalSize }: { globalSize: Size }) {
                   </AlertDialogAction>
                 </AlertDialogFooter>
               </AlertDialogContent>
-            </AlertDialogPortal>
+            
           </AlertDialog>
         </ExampleSection>
 
@@ -416,7 +412,7 @@ function AlertDialogMicroShowcase({ globalSize }: { globalSize: Size }) {
         </Button>
       }
     />
-    <AlertDialogPortal>
+    
       <AlertDialogContent className="border-warning/50">
         <div className="flex flex-col-reverse items-center justify-center gap-4 py-4 sm:flex-row">
           <div className="size-16 rounded-lg bg-warning/20 border border-warning" />
@@ -436,7 +432,7 @@ function AlertDialogMicroShowcase({ globalSize }: { globalSize: Size }) {
           </AlertDialogCancel>
         </AlertDialogFooter>
       </AlertDialogContent>
-    </AlertDialogPortal>
+    
   </AlertDialog>`}
         >
           <AlertDialog>
@@ -448,7 +444,6 @@ function AlertDialogMicroShowcase({ globalSize }: { globalSize: Size }) {
               }
             />
 
-            <AlertDialogPortal>
               <AlertDialogContent
                 size={globalSize}
                 className="border-warning/50"
@@ -471,7 +466,7 @@ function AlertDialogMicroShowcase({ globalSize }: { globalSize: Size }) {
                   </AlertDialogCancel>
                 </AlertDialogFooter>
               </AlertDialogContent>
-            </AlertDialogPortal>
+            
           </AlertDialog>
         </ExampleSection>
       </ExampleGrid>
@@ -484,7 +479,7 @@ function AlertDialogMicroShowcase({ globalSize }: { globalSize: Size }) {
     <AlertDialogTrigger
       render={<Button variant="outline">Với Media</Button>}
     />
-    <AlertDialogPortal>
+    
       <AlertDialogContent>
         <div className="flex flex-col gap-1.5 sm:flex-row sm:gap-4">
           <AlertDialogMedia className="mx-auto mb-2 shrink-0 sm:mx-0 sm:mb-0">
@@ -508,7 +503,7 @@ function AlertDialogMicroShowcase({ globalSize }: { globalSize: Size }) {
           </AlertDialogAction>
         </AlertDialogFooter>
       </AlertDialogContent>
-    </AlertDialogPortal>
+    
   </AlertDialog>`}
         >
           <AlertDialog>
@@ -520,7 +515,6 @@ function AlertDialogMicroShowcase({ globalSize }: { globalSize: Size }) {
               }
             />
 
-            <AlertDialogPortal>
               <AlertDialogContent size={globalSize}>
                 <div className="flex flex-col gap-1.5 sm:flex-row sm:gap-4">
                   <AlertDialogMedia className="mx-auto mb-2 shrink-0 sm:mx-0 sm:mb-0">
@@ -541,7 +535,7 @@ function AlertDialogMicroShowcase({ globalSize }: { globalSize: Size }) {
                   </AlertDialogAction>
                 </AlertDialogFooter>
               </AlertDialogContent>
-            </AlertDialogPortal>
+            
           </AlertDialog>
         </ExampleSection>
 
@@ -554,7 +548,7 @@ function AlertDialogMicroShowcase({ globalSize }: { globalSize: Size }) {
         <Button variant="outline">Dialog Có Nút X</Button>
       }
     />
-    <AlertDialogPortal>
+    
       <AlertDialogContent>
         <AlertDialogClose className="absolute top-3 right-3 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-none">
           <XIcon className="size-4" />
@@ -575,7 +569,7 @@ function AlertDialogMicroShowcase({ globalSize }: { globalSize: Size }) {
           <AlertDialogAction>Đồng ý</AlertDialogAction>
         </AlertDialogFooter>
       </AlertDialogContent>
-    </AlertDialogPortal>
+    
   </AlertDialog>`}
         >
           <AlertDialog>
@@ -587,7 +581,6 @@ function AlertDialogMicroShowcase({ globalSize }: { globalSize: Size }) {
               }
             />
 
-            <AlertDialogPortal>
               <AlertDialogContent size={globalSize}>
                 <AlertDialogClose className="absolute top-3 right-3 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-none">
                   <XIcon className="size-4" />
@@ -608,7 +601,7 @@ function AlertDialogMicroShowcase({ globalSize }: { globalSize: Size }) {
                   </AlertDialogAction>
                 </AlertDialogFooter>
               </AlertDialogContent>
-            </AlertDialogPortal>
+            
           </AlertDialog>
         </ExampleSection>
       </ExampleGrid>
@@ -625,7 +618,7 @@ function AlertDialogMicroShowcase({ globalSize }: { globalSize: Size }) {
         </Button>
       }
     />
-    <AlertDialogPortal>
+    
       <AlertDialogContent>
         <div className="flex flex-col gap-1.5 sm:flex-row sm:gap-4">
           <AlertDialogMedia className="mx-auto mb-2 shrink-0 sm:mx-0 sm:mb-0">
@@ -648,7 +641,7 @@ function AlertDialogMicroShowcase({ globalSize }: { globalSize: Size }) {
           </AlertDialogAction>
         </AlertDialogFooter>
       </AlertDialogContent>
-    </AlertDialogPortal>
+    
   </AlertDialog>`}
         >
           <AlertDialog>
@@ -660,7 +653,6 @@ function AlertDialogMicroShowcase({ globalSize }: { globalSize: Size }) {
               }
             />
 
-            <AlertDialogPortal>
               <AlertDialogContent size={globalSize}>
                 <div className="flex flex-col gap-1.5 sm:flex-row sm:gap-4">
                   <AlertDialogMedia className="mx-auto mb-2 shrink-0 sm:mx-0 sm:mb-0">
@@ -682,7 +674,7 @@ function AlertDialogMicroShowcase({ globalSize }: { globalSize: Size }) {
                   </AlertDialogAction>
                 </AlertDialogFooter>
               </AlertDialogContent>
-            </AlertDialogPortal>
+            
           </AlertDialog>
         </ExampleSection>
 
@@ -695,7 +687,7 @@ function AlertDialogMicroShowcase({ globalSize }: { globalSize: Size }) {
         <Button variant="outline">Custom Variants</Button>
       }
     />
-    <AlertDialogPortal>
+    
       <AlertDialogContent>
         <div className="flex flex-col gap-1.5 sm:flex-row sm:gap-4">
           <AlertDialogMedia className="mx-auto mb-2 shrink-0 sm:mx-0 sm:mb-0">
@@ -718,7 +710,7 @@ function AlertDialogMicroShowcase({ globalSize }: { globalSize: Size }) {
           </AlertDialogAction>
         </AlertDialogFooter>
       </AlertDialogContent>
-    </AlertDialogPortal>
+    
   </AlertDialog>`}
         >
           <AlertDialog>
@@ -730,7 +722,6 @@ function AlertDialogMicroShowcase({ globalSize }: { globalSize: Size }) {
               }
             />
 
-            <AlertDialogPortal>
               <AlertDialogContent size={globalSize}>
                 <div className="flex flex-col gap-1.5 sm:flex-row sm:gap-4">
                   <AlertDialogMedia className="mx-auto mb-2 shrink-0 sm:mx-0 sm:mb-0">
@@ -757,7 +748,7 @@ function AlertDialogMicroShowcase({ globalSize }: { globalSize: Size }) {
                   </AlertDialogAction>
                 </AlertDialogFooter>
               </AlertDialogContent>
-            </AlertDialogPortal>
+            
           </AlertDialog>
         </ExampleSection>
       </ExampleGrid>
@@ -859,7 +850,7 @@ function AlertDialogMicroShowcase({ globalSize }: { globalSize: Size }) {
               </Button>
             }
           />
-          <AlertDialogPortal>
+          
             <AlertDialogContent size="sm">
               <div className="h-24 w-full rounded-md bg-muted flex items-center justify-center text-xs text-muted-foreground">
                 Custom Image
@@ -883,7 +874,7 @@ function AlertDialogMicroShowcase({ globalSize }: { globalSize: Size }) {
                 </AlertDialogCancel>
               </AlertDialogFooter>
             </AlertDialogContent>
-          </AlertDialogPortal>
+          
         </AlertDialog>
       </div>
 
@@ -985,7 +976,6 @@ function AlertDialogMicroShowcase({ globalSize }: { globalSize: Size }) {
                   }
                 />
 
-                <AlertDialogPortal>
                   <AlertDialogContent size="sm">
                     <div className="h-24 w-full rounded-md bg-muted flex items-center justify-center text-xs text-muted-foreground">
                       Custom Image
@@ -1007,7 +997,7 @@ function AlertDialogMicroShowcase({ globalSize }: { globalSize: Size }) {
                       </AlertDialogCancel>
                     </AlertDialogFooter>
                   </AlertDialogContent>
-                </AlertDialogPortal>
+                
               </AlertDialog>
             </div>
 
@@ -1047,12 +1037,10 @@ export default function AlertDialogShowcase() {
       tabs={[
         {
           label: "Micro (Primitive)",
-          content: <AlertDialogMicroShowcase globalSize={globalSize} />,
-        },
+          content: <AlertDialogMicroShowcase globalSize={globalSize} /> },
         {
           label: "Macro (Preset)",
-          content: <AlertDialogMacroShowcase globalSize={globalSize} />,
-        },
+          content: <AlertDialogMacroShowcase globalSize={globalSize} /> },
       ]}
     />
   );