gladvn 0.2.19 → 0.2.20

package/src/dev/showcase/select.tsx

@@ -9,21 +9,19 @@ import {
   FieldContent,
   FieldDescription,
   FieldError,
-  FieldLabel,
-} from "../../components/micro/field";
+  FieldLabel } from "../../components/micro/field";
 import {
   Select,
   SelectContent,
   SelectGroup,
   SelectItem,
   SelectLabel,
-  SelectPortal,
+  
   SelectScrollDownButton,
   SelectScrollUpButton,
   SelectSeparator,
   SelectTrigger,
-  SelectValue,
-} from "../../components/micro/select";
+  SelectValue } from "../../components/micro/select";
 import { useDevContext } from "../../dev/components/dev-context";
 import {
   DocsCode,
@@ -32,23 +30,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({
-  language: z.string().min(1, "Vui lòng chọn một ngôn ngữ."),
-});
+  language: z.string().min(1, "Vui lòng chọn một ngôn ngữ.") });
 type FormValues = z.infer<typeof formSchema>;
 
 function SelectForm({ size }: { size: Size }) {
   const form = useForm<FormValues>({
     resolver: zodResolver(formSchema),
-    defaultValues: { language: "" },
-  });
+    defaultValues: { language: "" } });
 
   return (
     <form
@@ -87,8 +82,7 @@ const rhfCode = `const formSchema = z.object({ language: z.string().min(1, "Bắ
 function SelectForm({ size }: { size: Size }) {
   const form = useForm({
     resolver: zodResolver(formSchema),
-    defaultValues: { language: "" },
-  });
+    defaultValues: { language: "" } });
 
   return (
     <form onSubmit={form.handleSubmit(console.log)} className="space-y-6">
@@ -280,13 +274,12 @@ function SelectMicroShowcase({ globalSize }: { globalSize: Size }) {
         items={{
           next: "Next.js",
           vite: "Vite",
-          remix: "Remix",
-        }}
+          remix: "Remix" }}
       >
         <SelectTrigger>
           <SelectValue placeholder="Chọn framework..." />
         </SelectTrigger>
-        <SelectPortal>
+        
           <SelectContent>
             <SelectScrollUpButton />
             <SelectItem value="next">Next.js</SelectItem>
@@ -294,7 +287,7 @@ function SelectMicroShowcase({ globalSize }: { globalSize: Size }) {
             <SelectItem value="remix">Remix</SelectItem>
             <SelectScrollDownButton />
           </SelectContent>
-        </SelectPortal>
+        
       </Select>
     </FieldContent>
     <FieldDescription>
@@ -310,7 +303,6 @@ function SelectMicroShowcase({ globalSize }: { globalSize: Size }) {
                   <SelectValue placeholder="Chọn framework..." />
                 </SelectTrigger>
 
-                <SelectPortal>
                   <SelectContent>
                     <SelectScrollUpButton />
                     <SelectItem value="next">Next.js</SelectItem>
@@ -318,7 +310,7 @@ function SelectMicroShowcase({ globalSize }: { globalSize: Size }) {
                     <SelectItem value="remix">Remix</SelectItem>
                     <SelectScrollDownButton />
                   </SelectContent>
-                </SelectPortal>
+                
               </Select>
             </FieldContent>
             <FieldDescription>
@@ -338,13 +330,12 @@ function SelectMicroShowcase({ globalSize }: { globalSize: Size }) {
           orange: "Orange",
           lemon: "Lemon",
           strawberry: "Strawberry",
-          blueberry: "Blueberry",
-        }}
+          blueberry: "Blueberry" }}
       >
         <SelectTrigger>
           <SelectValue placeholder="Chọn loại quả..." />
         </SelectTrigger>
-        <SelectPortal>
+        
           <SelectContent>
             <SelectGroup>
               <SelectLabel>
@@ -364,7 +355,7 @@ function SelectMicroShowcase({ globalSize }: { globalSize: Size }) {
               </SelectItem>
             </SelectGroup>
           </SelectContent>
-        </SelectPortal>
+        
       </Select>
     </FieldContent>
   </Field>`}
@@ -377,13 +368,12 @@ function SelectMicroShowcase({ globalSize }: { globalSize: Size }) {
                   orange: "Orange",
                   lemon: "Lemon",
                   strawberry: "Strawberry",
-                  blueberry: "Blueberry",
-                }}
+                  blueberry: "Blueberry" }}
               >
                 <SelectTrigger size={globalSize}>
                   <SelectValue placeholder="Chọn loại quả..." />
                 </SelectTrigger>
-                <SelectPortal>
+                
                   <SelectContent>
                     <SelectGroup>
                       <SelectLabel>Họ cam chanh (Citrus)</SelectLabel>
@@ -397,7 +387,7 @@ function SelectMicroShowcase({ globalSize }: { globalSize: Size }) {
                       <SelectItem value="blueberry">Blueberry</SelectItem>
                     </SelectGroup>
                   </SelectContent>
-                </SelectPortal>
+                
               </Select>
             </FieldContent>
           </Field>
@@ -415,11 +405,11 @@ function SelectMicroShowcase({ globalSize }: { globalSize: Size }) {
         <SelectTrigger aria-invalid={true}>
           <SelectValue placeholder="Chọn dự án..." />
         </SelectTrigger>
-        <SelectPortal>
+        
           <SelectContent>
             <SelectItem value="p1">Project 1</SelectItem>
           </SelectContent>
-        </SelectPortal>
+        
       </Select>
     </FieldContent>
     <FieldError>Vui lòng chọn một dự án hợp lệ.</FieldError>
@@ -432,11 +422,11 @@ function SelectMicroShowcase({ globalSize }: { globalSize: Size }) {
                 <SelectTrigger size={globalSize} aria-invalid={true}>
                   <SelectValue placeholder="Chọn dự án..." />
                 </SelectTrigger>
-                <SelectPortal>
+                
                   <SelectContent>
                     <SelectItem value="p1">Project 1</SelectItem>
                   </SelectContent>
-                </SelectPortal>
+                
               </Select>
             </FieldContent>
             <FieldError>Vui lòng chọn một dự án hợp lệ.</FieldError>
@@ -453,13 +443,13 @@ function SelectMicroShowcase({ globalSize }: { globalSize: Size }) {
         <SelectTrigger disabled>
           <SelectValue placeholder="Chọn múi giờ..." />
         </SelectTrigger>
-        <SelectPortal>
+        
           <SelectContent>
             <SelectItem value="gmt">
               GMT+7 (Indochina Time)
             </SelectItem>
           </SelectContent>
-        </SelectPortal>
+        
       </Select>
     </FieldContent>
     <FieldDescription>
@@ -474,11 +464,11 @@ function SelectMicroShowcase({ globalSize }: { globalSize: Size }) {
                 <SelectTrigger size={globalSize} disabled>
                   <SelectValue placeholder="Chọn múi giờ..." />
                 </SelectTrigger>
-                <SelectPortal>
+                
                   <SelectContent>
                     <SelectItem value="gmt">GMT+7 (Indochina Time)</SelectItem>
                   </SelectContent>
-                </SelectPortal>
+                
               </Select>
             </FieldContent>
             <FieldDescription>
@@ -672,12 +662,10 @@ export default function SelectShowcase() {
       tabs={[
         {
           label: "Micro (Primitive)",
-          content: <SelectMicroShowcase globalSize={globalSize} />,
-        },
+          content: <SelectMicroShowcase globalSize={globalSize} /> },
         {
           label: "Macro (Preset)",
-          content: <SelectMacroShowcase globalSize={globalSize} />,
-        },
+          content: <SelectMacroShowcase globalSize={globalSize} /> },
       ]}
     />
   );

package/src/dev/showcase/separator.tsx

@@ -5,8 +5,7 @@ import {
   DocsP,
   ExampleSection,
   Showcase,
-  ShowcaseDocs,
-} from "../../dev/components/showcase";
+  ShowcaseDocs } from "../../dev/components/showcase";
 
 // ──────────────────────────────────────────────────────────
 // SECTION 1: Micro Content (Only Micro exists)

package/src/dev/showcase/sheet.tsx

@@ -12,10 +12,9 @@ import {
   SheetDescription,
   SheetFooter,
   SheetHeader,
-  SheetPortal,
+  
   SheetTitle,
-  SheetTrigger,
-} from "../../components/micro/sheet";
+  SheetTrigger } from "../../components/micro/sheet";
 import { useDevContext } from "../../dev/components/dev-context";
 import {
   DocsCode,
@@ -23,8 +22,7 @@ import {
   ExampleGrid,
   ExampleSection,
   Showcase,
-  ShowcaseDocs,
-} from "../../dev/components/showcase";
+  ShowcaseDocs } from "../../dev/components/showcase";
 import { type Size } from "../../lib/types";
 
 // ──────────────────────────────────────────────────────────
@@ -47,7 +45,7 @@ function SheetMicroShowcase({ globalSize }: { globalSize: Size }) {
         </Button>
       }
     />
-    <SheetPortal>
+    
       <SheetContent side="right">
         <SheetHeader>
           <SheetTitle>Edit Profile</SheetTitle>
@@ -91,7 +89,7 @@ function SheetMicroShowcase({ globalSize }: { globalSize: Size }) {
           <Button>Lưu thay đổi</Button>
         </SheetFooter>
       </SheetContent>
-    </SheetPortal>
+    
   </Sheet>`}
       >
         <div className="grid grid-cols-2 gap-2">
@@ -109,7 +107,6 @@ function SheetMicroShowcase({ globalSize }: { globalSize: Size }) {
               top
             </SheetTrigger>
 
-            <SheetPortal>
               <SheetContent side="top">
                 <SheetHeader>
                   <SheetTitle>Edit Profile</SheetTitle>
@@ -138,7 +135,7 @@ function SheetMicroShowcase({ globalSize }: { globalSize: Size }) {
                   <Button size={globalSize}>Lưu thay đổi</Button>
                 </SheetFooter>
               </SheetContent>
-            </SheetPortal>
+            
           </Sheet>
 
           {/* right */}
@@ -155,7 +152,6 @@ function SheetMicroShowcase({ globalSize }: { globalSize: Size }) {
               right
             </SheetTrigger>
 
-            <SheetPortal>
               <SheetContent side="right">
                 <SheetHeader>
                   <SheetTitle>Edit Profile</SheetTitle>
@@ -194,7 +190,7 @@ function SheetMicroShowcase({ globalSize }: { globalSize: Size }) {
                   <Button size={globalSize}>Lưu thay đổi</Button>
                 </SheetFooter>
               </SheetContent>
-            </SheetPortal>
+            
           </Sheet>
 
           {/* bottom */}
@@ -211,7 +207,6 @@ function SheetMicroShowcase({ globalSize }: { globalSize: Size }) {
               bottom
             </SheetTrigger>
 
-            <SheetPortal>
               <SheetContent side="bottom">
                 <SheetHeader>
                   <SheetTitle>Edit Profile</SheetTitle>
@@ -240,7 +235,7 @@ function SheetMicroShowcase({ globalSize }: { globalSize: Size }) {
                   <Button size={globalSize}>Lưu thay đổi</Button>
                 </SheetFooter>
               </SheetContent>
-            </SheetPortal>
+            
           </Sheet>
 
           {/* left */}
@@ -257,7 +252,6 @@ function SheetMicroShowcase({ globalSize }: { globalSize: Size }) {
               left
             </SheetTrigger>
 
-            <SheetPortal>
               <SheetContent side="left">
                 <SheetHeader>
                   <SheetTitle>Edit Profile</SheetTitle>
@@ -296,7 +290,7 @@ function SheetMicroShowcase({ globalSize }: { globalSize: Size }) {
                   <Button size={globalSize}>Lưu thay đổi</Button>
                 </SheetFooter>
               </SheetContent>
-            </SheetPortal>
+            
           </Sheet>
         </div>
       </ExampleSection>
@@ -311,7 +305,7 @@ function SheetMicroShowcase({ globalSize }: { globalSize: Size }) {
       <PanelRightIcon />
       Mở Sheet
     </SheetTrigger>
-    <SheetPortal>
+    
       <SheetContent side="right">
         <SheetHeader>
           <SheetTitle>Có nút đóng</SheetTitle>
@@ -320,7 +314,7 @@ function SheetMicroShowcase({ globalSize }: { globalSize: Size }) {
           </SheetDescription>
         </SheetHeader>
       </SheetContent>
-    </SheetPortal>
+    
   </Sheet>`}
         >
           <Sheet>
@@ -331,14 +325,13 @@ function SheetMicroShowcase({ globalSize }: { globalSize: Size }) {
               Mở Sheet
             </SheetTrigger>
 
-            <SheetPortal>
               <SheetContent side="right">
                 <SheetHeader>
                   <SheetTitle>Có nút đóng</SheetTitle>
                   <SheetDescription>Nút X xuất hiện tự động.</SheetDescription>
                 </SheetHeader>
               </SheetContent>
-            </SheetPortal>
+            
           </Sheet>
         </ExampleSection>
 
@@ -350,7 +343,7 @@ function SheetMicroShowcase({ globalSize }: { globalSize: Size }) {
       <PanelRightIcon />
       Không có X
     </SheetTrigger>
-    <SheetPortal>
+    
       <SheetContent side="right" showCloseButton={false}>
         <SheetHeader>
           <SheetTitle>Ẩn nút đóng</SheetTitle>
@@ -371,7 +364,7 @@ function SheetMicroShowcase({ globalSize }: { globalSize: Size }) {
           </SheetClose>
         </SheetFooter>
       </SheetContent>
-    </SheetPortal>
+    
   </Sheet>`}
         >
           <Sheet>
@@ -382,7 +375,6 @@ function SheetMicroShowcase({ globalSize }: { globalSize: Size }) {
               Không có X
             </SheetTrigger>
 
-            <SheetPortal>
               <SheetContent side="right" showCloseButton={false}>
                 <SheetHeader>
                   <SheetTitle>Ẩn nút đóng</SheetTitle>
@@ -404,7 +396,7 @@ function SheetMicroShowcase({ globalSize }: { globalSize: Size }) {
                   </SheetClose>
                 </SheetFooter>
               </SheetContent>
-            </SheetPortal>
+            
           </Sheet>
         </ExampleSection>
       </ExampleGrid>
@@ -420,7 +412,7 @@ function SheetMicroShowcase({ globalSize }: { globalSize: Size }) {
         <SettingsIcon />
         Toggle Controlled
       </SheetTrigger>
-      <SheetPortal>
+      
         <SheetContent side="right">
           <SheetHeader>
             <SheetTitle>Controlled Mode</SheetTitle>
@@ -435,7 +427,7 @@ function SheetMicroShowcase({ globalSize }: { globalSize: Size }) {
             </Button>
           </SheetFooter>
         </SheetContent>
-      </SheetPortal>
+      
     </Sheet>
     <p className="text-sm text-muted-foreground">
       Trạng thái:{" "}
@@ -457,7 +449,6 @@ function SheetMicroShowcase({ globalSize }: { globalSize: Size }) {
               Toggle Controlled
             </SheetTrigger>
 
-            <SheetPortal>
               <SheetContent side="right">
                 <SheetHeader>
                   <SheetTitle>Controlled Mode</SheetTitle>
@@ -471,7 +462,7 @@ function SheetMicroShowcase({ globalSize }: { globalSize: Size }) {
                   </Button>
                 </SheetFooter>
               </SheetContent>
-            </SheetPortal>
+            
           </Sheet>
           <p className="text-sm text-muted-foreground">
             Trạng thái:{" "}
@@ -494,7 +485,7 @@ function SheetMicroShowcase({ globalSize }: { globalSize: Size }) {
       <FilterIcon />
       Lọc dữ liệu
     </SheetTrigger>
-    <SheetPortal>
+    
       <SheetContent side="right">
         <SheetHeader>
           <SheetTitle>Bộ lọc</SheetTitle>
@@ -530,7 +521,7 @@ function SheetMicroShowcase({ globalSize }: { globalSize: Size }) {
           <Button>Áp dụng</Button>
         </SheetFooter>
       </SheetContent>
-    </SheetPortal>
+    
   </Sheet>`}
       >
         <Sheet>
@@ -539,7 +530,6 @@ function SheetMicroShowcase({ globalSize }: { globalSize: Size }) {
             Lọc dữ liệu
           </SheetTrigger>
 
-          <SheetPortal>
             <SheetContent side="right">
               <SheetHeader>
                 <SheetTitle>Bộ lọc</SheetTitle>
@@ -570,7 +560,7 @@ function SheetMicroShowcase({ globalSize }: { globalSize: Size }) {
                 <Button size={globalSize}>Áp dụng</Button>
               </SheetFooter>
             </SheetContent>
-          </SheetPortal>
+          
         </Sheet>
       </ExampleSection>
     </div>
@@ -606,8 +596,7 @@ export default function SheetShowcase() {
       tabs={[
         {
           label: "Micro (Primitive)",
-          content: <SheetMicroShowcase globalSize={globalSize} />,
-        },
+          content: <SheetMicroShowcase globalSize={globalSize} /> },
       ]}
     />
   );

package/src/dev/showcase/sidebar.tsx

@@ -6,14 +6,12 @@ import {
   SidebarLogo,
   SidebarMenuItem,
   SidebarMenuItemList,
-  useSidebarToggle,
-} from "../../components/micro/sidebar";
+  useSidebarToggle } from "../../components/micro/sidebar";
 import {
   DocsP,
   ExampleSection,
   Showcase,
-  ShowcaseDocs,
-} from "../../dev/components/showcase";
+  ShowcaseDocs } from "../../dev/components/showcase";
 
 function SidebarMicroShowcase() {
   const { sidebarRef, toggleSidebar, defaultState } =

package/src/dev/showcase/skeleton.tsx

@@ -6,8 +6,7 @@ import {
   ExampleGrid,
   ExampleSection,
   Showcase,
-  ShowcaseDocs,
-} from "../../dev/components/showcase";
+  ShowcaseDocs } from "../../dev/components/showcase";
 
 // ──────────────────────────────────────────────────────────
 // SECTION 1: Micro Content (Only Micro exists)

package/src/dev/showcase/slider.tsx

@@ -6,15 +6,13 @@ import {
   FieldContent,
   FieldDescription,
   FieldError,
-  FieldLabel,
-} from "../../components/micro/field";
+  FieldLabel } from "../../components/micro/field";
 import {
   Slider as CompositionalSlider,
   SliderControl,
   SliderIndicator,
   SliderThumb,
-  SliderTrack,
-} from "../../components/micro/slider";
+  SliderTrack } from "../../components/micro/slider";
 import { useDevContext } from "../../dev/components/dev-context";
 import {
   DocsCode,
@@ -23,8 +21,7 @@ import {
   ExampleGrid,
   ExampleSection,
   Showcase,
-  ShowcaseDocs,
-} from "../../dev/components/showcase";
+  ShowcaseDocs } from "../../dev/components/showcase";
 import { type Size } from "../../lib/types";
 
 // ──────────────────────────────────────────────────────────
@@ -523,12 +520,10 @@ export default function SliderShowcase() {
       tabs={[
         {
           label: "Micro (Primitive)",
-          content: <SliderMicroShowcase globalSize={globalSize} />,
-        },
+          content: <SliderMicroShowcase globalSize={globalSize} /> },
         {
           label: "Macro (Preset)",
-          content: <SliderMacroShowcase globalSize={globalSize} />,
-        },
+          content: <SliderMacroShowcase globalSize={globalSize} /> },
       ]}
     />
   );