gladvn 0.2.19 → 0.2.20

package/src/dev/showcase/chart.tsx

@@ -5,15 +5,13 @@ import {
   ChartLegend,
   ChartLegendContent,
   ChartTooltip,
-  ChartTooltipContent,
-} from "../../components/micro/chart";
+  ChartTooltipContent } from "../../components/micro/chart";
 import {
   DocsCode,
   DocsP,
   ExampleSection,
   Showcase,
-  ShowcaseDocs,
-} from "../../dev/components/showcase";
+  ShowcaseDocs } from "../../dev/components/showcase";
 
 export default function ChartShowcase() {
   return (
@@ -34,8 +32,7 @@ export default function ChartShowcase() {
       tabs={[
         {
           label: "Micro (Primitive)",
-          content: <ChartMicroShowcase />,
-        },
+          content: <ChartMicroShowcase /> },
       ]}
     />
   );
@@ -59,13 +56,10 @@ function ChartMicroShowcase() {
 const chartConfig = {
   desktop: {
     label: "Desktop",
-    color: "hsl(var(--chart-1))",
-  },
+    color: "hsl(var(--chart-1))" },
   mobile: {
     label: "Mobile",
-    color: "hsl(var(--chart-2))",
-  },
-} satisfies ChartConfig
+    color: "hsl(var(--chart-2))" } } satisfies ChartConfig
 
 <ChartContainer
   config={chartConfig}
@@ -91,13 +85,10 @@ const chartConfig = {
           config={{
             desktop: {
               label: "Desktop",
-              color: "hsl(var(--chart-1))",
-            },
+              color: "hsl(var(--chart-1))" },
             mobile: {
               label: "Mobile",
-              color: "hsl(var(--chart-2))",
-            },
-          }}
+              color: "hsl(var(--chart-2))" } }}
           className="min-h-[200px] w-full max-w-lg"
         >
           <BarChart

package/src/dev/showcase/checkbox.tsx

@@ -12,8 +12,7 @@ import {
   Field,
   FieldDescription,
   FieldError,
-  FieldLabel,
-} from "../../components/micro/field";
+  FieldLabel } from "../../components/micro/field";
 import { Label } from "../../components/micro/label";
 import { useDevContext } from "../../dev/components/dev-context";
 import {
@@ -21,23 +20,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({
-  mobile: z.boolean().default(false).optional(),
-});
+  mobile: z.boolean().default(false).optional() });
 type FormValues = z.infer<typeof formSchema>;
 
 function CheckboxForm({ size }: { size: Size }) {
   const form = useForm<FormValues>({
     resolver: zodResolver(formSchema),
-    defaultValues: { mobile: false },
-  });
+    defaultValues: { mobile: false } });
 
   function onSubmit(values: FormValues) {
     alert(JSON.stringify(values, null, 2));
@@ -74,8 +70,7 @@ const rhfCode = `const formSchema = z.object({ mobile: z.boolean().default(false
 function CheckboxForm({ size }: { size: Size }) {
   const form = useForm({
     resolver: zodResolver(formSchema),
-    defaultValues: { mobile: false },
-  });
+    defaultValues: { mobile: false } });
 
   return (
     <form onSubmit={form.handleSubmit(console.log)} className="space-y-6">
@@ -665,12 +660,10 @@ export default function CheckboxShowcase() {
       tabs={[
         {
           label: "Micro (Primitive)",
-          content: <CheckboxMicroShowcase globalSize={globalSize} />,
-        },
+          content: <CheckboxMicroShowcase globalSize={globalSize} /> },
         {
           label: "Macro (Preset)",
-          content: <CheckboxMacroShowcase globalSize={globalSize} />,
-        },
+          content: <CheckboxMacroShowcase globalSize={globalSize} /> },
       ]}
     />
   );

package/src/dev/showcase/collapsible.tsx

@@ -6,15 +6,13 @@ import { Button } from "../../components/micro/button";
 import {
   Collapsible,
   CollapsibleContent,
-  CollapsibleTrigger,
-} from "../../components/micro/collapsible";
+  CollapsibleTrigger } from "../../components/micro/collapsible";
 import {
   DocsP,
   ExampleGrid,
   ExampleSection,
   Showcase,
-  ShowcaseDocs,
-} from "../../dev/components/showcase";
+  ShowcaseDocs } from "../../dev/components/showcase";
 
 function CollapsibleMicroShowcase() {
   const [isOpen, setIsOpen] = React.useState(false);
@@ -314,8 +312,7 @@ export default function CollapsibleShowcase() {
       tabs={[
         {
           label: "Micro (Primitive)",
-          content: <CollapsibleMicroShowcase />,
-        },
+          content: <CollapsibleMicroShowcase /> },
       ]}
     />
   );

package/src/dev/showcase/combobox.tsx

@@ -18,23 +18,20 @@ import {
   ComboboxItem,
   ComboboxLabel,
   ComboboxList,
-  ComboboxPortal,
+  
   ComboboxSeparator,
   ComboboxTrigger,
-  ComboboxValue,
-} from "../../components/micro/combobox";
+  ComboboxValue } from "../../components/micro/combobox";
 import {
   Field,
   FieldContent,
   FieldDescription,
   FieldError,
-  FieldLabel,
-} from "../../components/micro/field";
+  FieldLabel } from "../../components/micro/field";
 import {
   InputGroup,
   InputGroupAddon,
-  InputGroupInput,
-} from "../../components/micro/input-group";
+  InputGroupInput } from "../../components/micro/input-group";
 import { useDevContext } from "../../dev/components/dev-context";
 import {
   DocsCode,
@@ -42,8 +39,7 @@ import {
   ExampleGrid,
   ExampleSection,
   Showcase,
-  ShowcaseDocs,
-} from "../../dev/components/showcase";
+  ShowcaseDocs } from "../../dev/components/showcase";
 import { type Size } from "../../lib/types";
 
 const frontendFrameworks = ["react", "vue", "svelte"];
@@ -56,15 +52,13 @@ const engineItems = ["v8", "spidermonkey"];
 // RHF Form Demo (Macro)
 // ──────────────────────────────────────────────────────────
 const formSchema = z.object({
-  framework: z.string().min(1, "Vui lòng chọn một framework."),
-});
+  framework: z.string().min(1, "Vui lòng chọn một framework.") });
 type FormValues = z.infer<typeof formSchema>;
 
 function ComboboxForm({ size }: { size: Size }) {
   const form = useForm<FormValues>({
     resolver: zodResolver(formSchema),
-    defaultValues: { framework: "" },
-  });
+    defaultValues: { framework: "" } });
 
   return (
     <form
@@ -106,8 +100,7 @@ const rhfCode = `const formSchema = z.object({ framework: z.string().min(1, "B
 function ComboboxForm({ size }: { size: Size }) {
   const form = useForm({
     resolver: zodResolver(formSchema),
-    defaultValues: { framework: "" },
-  });
+    defaultValues: { framework: "" } });
 
   return (
     <form onSubmit={form.handleSubmit(console.log)} className="space-y-6">
@@ -248,8 +241,7 @@ function ComboboxMacroShowcase({ globalSize }: { globalSize: Size }) {
     emptyText="Không tìm thấy múi giờ."
     options={Array.from({ length: 50 }).map((_, i) => ({
       value: \`utc\${i - 12}\`,
-      label: \`UTC \${i - 12 > 0 ? "+" : ""}\${i - 12}:00\`,
-    }))}
+      label: \`UTC \${i - 12 > 0 ? "+" : ""}\${i - 12}:00\` }))}
   />`}
         >
           <ComboboxPreset
@@ -261,8 +253,7 @@ function ComboboxMacroShowcase({ globalSize }: { globalSize: Size }) {
             emptyText="Không tìm thấy múi giờ."
             options={Array.from({ length: 50 }).map((_, i) => ({
               value: `utc${i - 12}`,
-              label: `UTC ${i - 12 > 0 ? "+" : ""}${i - 12}:00`,
-            }))}
+              label: `UTC ${i - 12 > 0 ? "+" : ""}${i - 12}:00` }))}
           />
         </ExampleSection>
       </ExampleGrid>
@@ -306,7 +297,7 @@ function ComboboxMicroShowcase({ globalSize }: { globalSize: Size }) {
             </InputGroupAddon>
           </InputGroup>
         </ComboboxAnchor>
-        <ComboboxPortal>
+        
           <ComboboxContent>
             <ComboboxEmpty>Không tìm thấy.</ComboboxEmpty>
             <ComboboxList>
@@ -332,7 +323,7 @@ function ComboboxMicroShowcase({ globalSize }: { globalSize: Size }) {
               </ComboboxGroup>
             </ComboboxList>
           </ComboboxContent>
-        </ComboboxPortal>
+        
       </Combobox>
     </FieldContent>
   </Field>`}
@@ -354,7 +345,6 @@ function ComboboxMicroShowcase({ globalSize }: { globalSize: Size }) {
                   </InputGroup>
                 </ComboboxAnchor>
 
-                <ComboboxPortal>
                   <ComboboxContent>
                     <ComboboxEmpty>Không tìm thấy.</ComboboxEmpty>
                     <ComboboxList>
@@ -372,7 +362,7 @@ function ComboboxMicroShowcase({ globalSize }: { globalSize: Size }) {
                       </ComboboxGroup>
                     </ComboboxList>
                   </ComboboxContent>
-                </ComboboxPortal>
+                
               </Combobox>
             </FieldContent>
           </Field>
@@ -392,7 +382,7 @@ function ComboboxMicroShowcase({ globalSize }: { globalSize: Size }) {
           </ComboboxChip>
           <ComboboxChipsInput placeholder="Thêm thẻ..." />
         </ComboboxChips>
-        <ComboboxPortal>
+        
           <ComboboxContent>
             <ComboboxEmpty>
               Không tìm thấy thẻ.
@@ -412,7 +402,7 @@ function ComboboxMicroShowcase({ globalSize }: { globalSize: Size }) {
               </ComboboxItem>
             </ComboboxList>
           </ComboboxContent>
-        </ComboboxPortal>
+        
       </Combobox>
     </FieldContent>
     <FieldDescription>
@@ -432,7 +422,6 @@ function ComboboxMicroShowcase({ globalSize }: { globalSize: Size }) {
                   <ComboboxChipsInput placeholder="Thêm thẻ..." />
                 </ComboboxChips>
 
-                <ComboboxPortal>
                   <ComboboxContent>
                     <ComboboxEmpty>Không tìm thấy thẻ.</ComboboxEmpty>
                     <ComboboxList>
@@ -444,7 +433,7 @@ function ComboboxMicroShowcase({ globalSize }: { globalSize: Size }) {
                       <ComboboxItem value="docs">Tài liệu</ComboboxItem>
                     </ComboboxList>
                   </ComboboxContent>
-                </ComboboxPortal>
+                
               </Combobox>
             </FieldContent>
             <FieldDescription>
@@ -477,7 +466,7 @@ function ComboboxMicroShowcase({ globalSize }: { globalSize: Size }) {
             </InputGroupAddon>
           </InputGroup>
         </ComboboxAnchor>
-        <ComboboxPortal>
+        
           <ComboboxContent>
             <ComboboxList>
               <ComboboxItem value="react">
@@ -485,7 +474,7 @@ function ComboboxMicroShowcase({ globalSize }: { globalSize: Size }) {
               </ComboboxItem>
             </ComboboxList>
           </ComboboxContent>
-        </ComboboxPortal>
+        
       </Combobox>
     </FieldContent>
   </Field>`}
@@ -510,13 +499,12 @@ function ComboboxMicroShowcase({ globalSize }: { globalSize: Size }) {
                   </InputGroup>
                 </ComboboxAnchor>
 
-                <ComboboxPortal>
                   <ComboboxContent>
                     <ComboboxList>
                       <ComboboxItem value="react">React</ComboboxItem>
                     </ComboboxList>
                   </ComboboxContent>
-                </ComboboxPortal>
+                
               </Combobox>
             </FieldContent>
           </Field>
@@ -542,7 +530,7 @@ function ComboboxMicroShowcase({ globalSize }: { globalSize: Size }) {
             </InputGroupAddon>
           </InputGroup>
         </ComboboxAnchor>
-        <ComboboxPortal>
+        
           <ComboboxContent>
             <ComboboxEmpty>
               Không tìm thấy mã.
@@ -556,7 +544,7 @@ function ComboboxMicroShowcase({ globalSize }: { globalSize: Size }) {
               </ComboboxItem>
             </ComboboxList>
           </ComboboxContent>
-        </ComboboxPortal>
+        
       </Combobox>
     </FieldContent>
     <FieldError>Mã này đã hết hạn.</FieldError>
@@ -580,7 +568,6 @@ function ComboboxMicroShowcase({ globalSize }: { globalSize: Size }) {
                   </InputGroup>
                 </ComboboxAnchor>
 
-                <ComboboxPortal>
                   <ComboboxContent>
                     <ComboboxEmpty>Không tìm thấy mã.</ComboboxEmpty>
                     <ComboboxList>
@@ -588,7 +575,7 @@ function ComboboxMicroShowcase({ globalSize }: { globalSize: Size }) {
                       <ComboboxItem value="sale50">Giảm 50%</ComboboxItem>
                     </ComboboxList>
                   </ComboboxContent>
-                </ComboboxPortal>
+                
               </Combobox>
             </FieldContent>
             <FieldError>Mã này đã hết hạn.</FieldError>
@@ -607,7 +594,7 @@ function ComboboxMicroShowcase({ globalSize }: { globalSize: Size }) {
         <ComboboxTrigger className="w-full justify-between flex items-center border border-border rounded-md p-2 hover:bg-accent focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring">
           <ComboboxValue placeholder="Chọn một engine" />
         </ComboboxTrigger>
-        <ComboboxPortal>
+        
           <ComboboxContent>
             <div className="p-1">
               <InputGroup className="w-full">
@@ -627,7 +614,7 @@ function ComboboxMicroShowcase({ globalSize }: { globalSize: Size }) {
               </ComboboxItem>
             </ComboboxList>
           </ComboboxContent>
-        </ComboboxPortal>
+        
       </Combobox>
     </FieldContent>
   </Field>`}
@@ -640,7 +627,6 @@ function ComboboxMicroShowcase({ globalSize }: { globalSize: Size }) {
                   <ComboboxValue placeholder="Chọn một engine" />
                 </ComboboxTrigger>
 
-                <ComboboxPortal>
                   <ComboboxContent>
                     <div className="p-1">
                       <InputGroup size={globalSize} className="w-full">
@@ -658,7 +644,7 @@ function ComboboxMicroShowcase({ globalSize }: { globalSize: Size }) {
                       </ComboboxItem>
                     </ComboboxList>
                   </ComboboxContent>
-                </ComboboxPortal>
+                
               </Combobox>
             </FieldContent>
           </Field>
@@ -838,12 +824,10 @@ export default function ComboboxShowcase() {
       tabs={[
         {
           label: "Micro (Primitive)",
-          content: <ComboboxMicroShowcase globalSize={globalSize} />,
-        },
+          content: <ComboboxMicroShowcase globalSize={globalSize} /> },
         {
           label: "Macro (Preset)",
-          content: <ComboboxMacroShowcase globalSize={globalSize} />,
-        },
+          content: <ComboboxMacroShowcase globalSize={globalSize} /> },
       ]}
     />
   );

package/src/dev/showcase/command.tsx

@@ -6,8 +6,7 @@ import {
   CreditCardIcon,
   SettingsIcon,
   SmileIcon,
-  UserIcon,
-} from "lucide-react";
+  UserIcon } from "lucide-react";
 
 import { CommandDialog } from "../../components/macro/command-preset";
 import { Button } from "../../components/micro/button";
@@ -19,15 +18,13 @@ import {
   CommandItem,
   CommandList,
   CommandSeparator,
-  CommandShortcut,
-} from "../../components/micro/command";
+  CommandShortcut } from "../../components/micro/command";
 import {
   DocsP,
   ExampleGrid,
   ExampleSection,
   Showcase,
-  ShowcaseDocs,
-} from "../../dev/components/showcase";
+  ShowcaseDocs } from "../../dev/components/showcase";
 
 function CommandMicroShowcase() {
   const [open, setOpen] = useState(false);
@@ -240,8 +237,7 @@ export default function CommandShowcase() {
       tabs={[
         {
           label: "Micro (Primitive)",
-          content: <CommandMicroShowcase />,
-        },
+          content: <CommandMicroShowcase /> },
       ]}
     />
   );

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

@@ -7,7 +7,7 @@ import {
   ContextMenuGroup,
   ContextMenuItem,
   ContextMenuLabel,
-  ContextMenuPortal,
+  
   ContextMenuRadioGroup,
   ContextMenuRadioItem,
   ContextMenuSeparator,
@@ -15,14 +15,12 @@ import {
   ContextMenuSub,
   ContextMenuSubContent,
   ContextMenuSubTrigger,
-  ContextMenuTrigger,
-} from "../../components/micro/context-menu";
+  ContextMenuTrigger } from "../../components/micro/context-menu";
 import {
   DocsP,
   ExampleSection,
   Showcase,
-  ShowcaseDocs,
-} from "../../dev/components/showcase";
+  ShowcaseDocs } from "../../dev/components/showcase";
 
 // ──────────────────────────────────────────────────────────
 // SECTION 2: Micro Content (không export)
@@ -41,7 +39,7 @@ function ContextMenuMicroShowcase() {
     <ContextMenuTrigger className="flex h-[150px] w-full max-w-[400px] items-center justify-center rounded-md border border-border border-dashed text-sm">
       Right click here
     </ContextMenuTrigger>
-    <ContextMenuPortal>
+    
       <ContextMenuContent className="w-64">
         <ContextMenuItem inset>
           Back
@@ -59,7 +57,7 @@ function ContextMenuMicroShowcase() {
           <ContextMenuSubTrigger inset>
             More Tools
           </ContextMenuSubTrigger>
-          <ContextMenuPortal>
+          
             <ContextMenuSubContent className="w-48">
               <ContextMenuItem>
                 Save Page As...
@@ -78,7 +76,7 @@ function ContextMenuMicroShowcase() {
                 Developer Tools
               </ContextMenuItem>
             </ContextMenuSubContent>
-          </ContextMenuPortal>
+          
         </ContextMenuSub>
         <ContextMenuSeparator />
         <ContextMenuCheckboxItem
@@ -111,7 +109,7 @@ function ContextMenuMicroShowcase() {
           </ContextMenuRadioGroup>
         </ContextMenuGroup>
       </ContextMenuContent>
-    </ContextMenuPortal>
+    
   </ContextMenu>`}
       >
         <ContextMenu>
@@ -119,7 +117,6 @@ function ContextMenuMicroShowcase() {
             Right click here
           </ContextMenuTrigger>
 
-          <ContextMenuPortal>
             <ContextMenuContent className="w-64">
               <ContextMenuItem inset>
                 Back
@@ -136,7 +133,6 @@ function ContextMenuMicroShowcase() {
               <ContextMenuSub>
                 <ContextMenuSubTrigger inset>More Tools</ContextMenuSubTrigger>
 
-                <ContextMenuPortal>
                   <ContextMenuSubContent className="w-48">
                     <ContextMenuItem>
                       Save Page As...
@@ -147,7 +143,7 @@ function ContextMenuMicroShowcase() {
                     <ContextMenuSeparator />
                     <ContextMenuItem>Developer Tools</ContextMenuItem>
                   </ContextMenuSubContent>
-                </ContextMenuPortal>
+                
               </ContextMenuSub>
               <ContextMenuSeparator />
               <ContextMenuCheckboxItem
@@ -177,7 +173,7 @@ function ContextMenuMicroShowcase() {
                 </ContextMenuRadioGroup>
               </ContextMenuGroup>
             </ContextMenuContent>
-          </ContextMenuPortal>
+          
         </ContextMenu>
       </ExampleSection>
 
@@ -188,7 +184,7 @@ function ContextMenuMicroShowcase() {
     <ContextMenuTrigger className="flex h-[100px] w-full max-w-[300px] items-center justify-center rounded-md border border-border border-dashed text-sm">
       Right click here
     </ContextMenuTrigger>
-    <ContextMenuPortal>
+    
       <ContextMenuContent className="w-52">
         <ContextMenuItem>
           Rename
@@ -201,7 +197,7 @@ function ContextMenuMicroShowcase() {
           <ContextMenuShortcut>⌫</ContextMenuShortcut>
         </ContextMenuItem>
       </ContextMenuContent>
-    </ContextMenuPortal>
+    
   </ContextMenu>`}
       >
         <ContextMenu>
@@ -209,7 +205,6 @@ function ContextMenuMicroShowcase() {
             Right click here
           </ContextMenuTrigger>
 
-          <ContextMenuPortal>
             <ContextMenuContent className="w-52">
               <ContextMenuItem>
                 Rename
@@ -222,7 +217,7 @@ function ContextMenuMicroShowcase() {
                 <ContextMenuShortcut>⌫</ContextMenuShortcut>
               </ContextMenuItem>
             </ContextMenuContent>
-          </ContextMenuPortal>
+          
         </ContextMenu>
       </ExampleSection>
     </div>
@@ -248,8 +243,7 @@ export default function ContextMenuShowcase() {
       tabs={[
         {
           label: "Micro (Primitive)",
-          content: <ContextMenuMicroShowcase />,
-        },
+          content: <ContextMenuMicroShowcase /> },
       ]}
     />
   );