gladvn 0.2.18 → 0.2.20

package/src/components/micro/alert-dialog.tsx

@@ -7,6 +7,7 @@ import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog
 import { Button } from "../../components/micro/button";
 import { type Size } from "../../lib/types";
 import { cn } from "../../lib/utils";
+import { ThemeWrapper } from "./theme-provider";
 
 /**
  * @description A modal dialog that interrupts the user with important content and expects a response.
@@ -36,7 +37,7 @@ function AlertDialogClose({ ...props }: AlertDialogPrimitive.Close.Props) {
   );
 }
 
-const AlertDialogPortal = AlertDialogPrimitive.Portal;
+
 
 function AlertDialogOverlay({
   className,
@@ -54,17 +55,18 @@ function AlertDialogOverlay({
   );
 }
 
-function AlertDialogContent({
-  className,
-  size = "md",
-  ...props
-}: AlertDialogPrimitive.Popup.Props & {
-  size?: Size;
-}) {
-  return (
-    <>
+const AlertDialogContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Popup> & {
+    container?: React.ComponentProps<typeof AlertDialogPrimitive.Portal>["container"];
+    size?: Size;
+  }
+>(({ className, container, size = "md", ...props }, ref) => (
+  <AlertDialogPrimitive.Portal container={container}>
+    <ThemeWrapper>
       <AlertDialogOverlay />
       <AlertDialogPrimitive.Popup
+        ref={ref}
         data-slot="alert-dialog-content"
         data-size={size}
         className={cn(
@@ -77,9 +79,10 @@ function AlertDialogContent({
         )}
         {...props}
       />
-    </>
-  );
-}
+    </ThemeWrapper>
+  </AlertDialogPrimitive.Portal>
+));
+AlertDialogContent.displayName = "AlertDialogContent";
 
 function AlertDialogHeader({
   className,
@@ -208,7 +211,6 @@ export {
   AlertDialogHeader,
   AlertDialogMedia,
   AlertDialogOverlay,
-  AlertDialogPortal,
   AlertDialogTitle,
   AlertDialogTrigger,
 };

package/src/components/micro/combobox.tsx

@@ -22,6 +22,7 @@ import { CheckIcon, ChevronDownIcon, XIcon } from "lucide-react";
 
 import { InputGroupButton } from "../../components/micro/input-group";
 import { cn } from "../../lib/utils";
+import { ThemeWrapper } from "./theme-provider";
 
 const ComboboxContext = React.createContext<{
   anchor: Element | null;
@@ -98,7 +99,9 @@ const ComboboxContent = React.forwardRef<
     Pick<
       ComboboxPrimitive.Positioner.Props,
       "side" | "align" | "sideOffset" | "alignOffset" | "anchor"
-    >
+    > & {
+      container?: React.ComponentProps<typeof ComboboxPrimitive.Portal>["container"];
+    }
 >(
   (
     {
@@ -108,31 +111,35 @@ const ComboboxContent = React.forwardRef<
       align = "start",
       alignOffset = 0,
       anchor,
+      container,
       ...props
     },
     ref,
   ) => {
     const { anchor: contextAnchor } = React.useContext(ComboboxContext);
     return (
-      <ComboboxPrimitive.Positioner
-        side={side}
-        sideOffset={sideOffset}
-        align={align}
-        alignOffset={alignOffset}
-        anchor={anchor || contextAnchor}
-        className="isolate z-50"
-      >
-        <ComboboxPrimitive.Popup
-          ref={ref}
-          data-slot="combobox-content"
-          data-chips={!!anchor}
-          className={cn(
-            "group/combobox-content relative max-h-(--available-height) min-w-(--anchor-width) max-w-(--available-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 p-1 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 [&_[data-slot=input-group]]:mb-1 [&_[data-slot=input-group]]:w-full [&_[data-slot=input-group]]:border-input/30 [&_[data-slot=input-group]]:bg-input/30 [&_[data-slot=input-group]]:shadow-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
-            className,
-          )}
-          {...props}
-        />
-      </ComboboxPrimitive.Positioner>
+      <ComboboxPrimitive.Portal container={container}>
+        <ThemeWrapper>
+          <ComboboxPrimitive.Positioner
+            side={side}
+            sideOffset={sideOffset}
+            align={align}
+            alignOffset={alignOffset}
+            anchor={anchor || contextAnchor}
+            className="isolate z-50"
+          >
+            <ComboboxPrimitive.Popup
+              ref={ref}
+              data-slot="combobox-content"
+              className={cn(
+                "group/combobox-content relative max-h-(--available-height) min-w-(--anchor-width) max-w-(--available-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 p-1 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 [&_[data-slot=input-group]]:mb-1 [&_[data-slot=input-group]]:w-full [&_[data-slot=input-group]]:border-input/30 [&_[data-slot=input-group]]:bg-input/30 [&_[data-slot=input-group]]:shadow-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+                className,
+              )}
+              {...props}
+            />
+          </ComboboxPrimitive.Positioner>
+        </ThemeWrapper>
+      </ComboboxPrimitive.Portal>
     );
   },
 );
@@ -232,7 +239,7 @@ function ComboboxSeparator({
   );
 }
 
-const ComboboxPortal = ComboboxPrimitive.Portal;
+
 
 const comboboxChipsVariants = cva(
   "group/combobox-chips flex flex-wrap items-center gap-1 rounded-lg border border-input bg-transparent bg-clip-padding transition-colors focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:focus-within:ring-3 has-aria-invalid:focus-within:ring-destructive/20 has-[[data-slot=combobox-chip]]:px-1 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:focus-within:ring-destructive/40 has-disabled:opacity-50 has-disabled:cursor-not-allowed has-disabled:pointer-events-none",
@@ -359,7 +366,6 @@ export {
   ComboboxItem,
   ComboboxLabel,
   ComboboxList,
-  ComboboxPortal,
   ComboboxSeparator,
   ComboboxTrigger,
   ComboboxValue,

package/src/components/micro/context-menu.tsx

@@ -13,6 +13,7 @@ import { ContextMenu as ContextMenuPrimitive } from "@base-ui/react/context-menu
 import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
 
 import { cn } from "../../lib/utils";
+import { ThemeWrapper } from "./theme-provider";
 
 type ContextMenuVariant = "destructive";
 
@@ -32,8 +33,7 @@ function ContextMenu({ ...props }: ContextMenuPrimitive.Root.Props) {
 }
 ContextMenu.displayName = "ContextMenu";
 
-const ContextMenuPortal = ContextMenuPrimitive.Portal;
-ContextMenuPortal.displayName = "ContextMenuPortal";
+
 
 const ContextMenuTrigger = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.Trigger>,
@@ -48,39 +48,56 @@ const ContextMenuTrigger = React.forwardRef<
 ));
 ContextMenuTrigger.displayName = "ContextMenuTrigger";
 
-function ContextMenuContent({
-  className,
-  align = "start",
-  alignOffset = 4,
-  side = "right",
-  sideOffset = 0,
-  ...props
-}: ContextMenuPrimitive.Popup.Props &
-  Pick<
-    ContextMenuPrimitive.Positioner.Props,
-    "align" | "alignOffset" | "side" | "sideOffset"
-  >) {
-  return (
-    <>
-      <ContextMenuPrimitive.Positioner
-        className="isolate z-50 outline-none"
-        align={align}
-        alignOffset={alignOffset}
-        side={side}
-        sideOffset={sideOffset}
-      >
-        <ContextMenuPrimitive.Popup
-          data-slot="context-menu-content"
-          className={cn(
-            "z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
-            className,
-          )}
-          {...props}
-        />
-      </ContextMenuPrimitive.Positioner>
-    </>
-  );
-}
+const ContextMenuContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Popup> &
+    Pick<
+      React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Positioner>,
+      "align" | "alignOffset" | "side" | "sideOffset"
+    > & {
+      container?: React.ComponentProps<typeof ContextMenuPrimitive.Portal>["container"];
+    }
+>(
+  (
+    {
+      className,
+      align = "start",
+      alignOffset = 0,
+      side = "right",
+      sideOffset = 4,
+      container,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <ContextMenuPrimitive.Portal container={container}>
+        <ThemeWrapper>
+          <ContextMenuPrimitive.Positioner
+            align={align}
+            alignOffset={alignOffset}
+            side={side}
+            sideOffset={sideOffset}
+            className="isolate z-50 outline-none"
+          >
+            <ContextMenuPrimitive.Popup
+              ref={ref}
+              data-slot="context-menu-content"
+              className={cn(
+                "z-50 min-w-[8rem] origin-(--transform-origin) overflow-hidden rounded-lg border bg-popover p-1 text-popover-foreground shadow-md duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+                className,
+              )}
+              {...props}
+            >
+              {children}
+            </ContextMenuPrimitive.Popup>
+          </ContextMenuPrimitive.Positioner>
+        </ThemeWrapper>
+      </ContextMenuPrimitive.Portal>
+    );
+  },
+);
 ContextMenuContent.displayName = "ContextMenuContent";
 
 function ContextMenuGroup({ ...props }: ContextMenuPrimitive.Group.Props) {
@@ -274,7 +291,6 @@ export {
   ContextMenuGroup,
   ContextMenuItem,
   ContextMenuLabel,
-  ContextMenuPortal,
   ContextMenuRadioGroup,
   ContextMenuRadioItem,
   ContextMenuSeparator,

package/src/components/micro/dialog.tsx

@@ -12,6 +12,7 @@ import * as React from "react";
 import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
 
 import { cn } from "../../lib/utils";
+import { ThemeWrapper } from "./theme-provider";
 
 function Dialog({ ...props }: DialogPrimitive.Root.Props) {
   return <DialogPrimitive.Root data-slot="dialog" {...props} />;
@@ -25,7 +26,7 @@ const DialogTrigger = React.forwardRef<
 ));
 DialogTrigger.displayName = "DialogTrigger";
 
-const DialogPortal = DialogPrimitive.Portal;
+
 
 const DialogClose = React.forwardRef<
   HTMLButtonElement,
@@ -53,23 +54,27 @@ DialogOverlay.displayName = "DialogOverlay";
 
 const DialogContent = React.forwardRef<
   HTMLDivElement,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Popup>
->(({ className, children, ...props }, ref) => (
-  <>
-    <DialogOverlay />
-    <DialogPrimitive.Popup
-      ref={ref}
-      data-slot="dialog-content"
-      className={cn(
-        "group/dialog-content fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-y-auto",
-        "data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
-        className,
-      )}
-      {...props}
-    >
-      {children}
-    </DialogPrimitive.Popup>
-  </>
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Popup> & {
+    container?: React.ComponentProps<typeof DialogPrimitive.Portal>["container"];
+  }
+>(({ className, children, container, ...props }, ref) => (
+  <DialogPrimitive.Portal container={container}>
+    <ThemeWrapper>
+      <DialogOverlay />
+      <DialogPrimitive.Popup
+        ref={ref}
+        data-slot="dialog-content"
+        className={cn(
+          "group/dialog-content fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-y-auto",
+          "data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </DialogPrimitive.Popup>
+    </ThemeWrapper>
+  </DialogPrimitive.Portal>
 ));
 DialogContent.displayName = "DialogContent";
 
@@ -138,7 +143,6 @@ export {
   DialogFooter,
   DialogHeader,
   DialogOverlay,
-  DialogPortal,
   DialogTitle,
   DialogTrigger,
 };

package/src/components/micro/drawer.tsx

@@ -14,6 +14,7 @@ import type {} from "@radix-ui/react-dialog";
 import { Drawer as DrawerPrimitive } from "vaul";
 
 import { cn } from "../../lib/utils";
+import { ThemeWrapper } from "./theme-provider";
 
 function Drawer({
   ...props
@@ -30,7 +31,7 @@ const DrawerTrigger = React.forwardRef<
 ));
 DrawerTrigger.displayName = "DrawerTrigger";
 
-const DrawerPortal = DrawerPrimitive.Portal;
+
 
 const DrawerClose = React.forwardRef<
   React.ElementRef<typeof DrawerPrimitive.Close>,
@@ -58,23 +59,27 @@ DrawerOverlay.displayName = "DrawerOverlay";
 
 const DrawerContent = React.forwardRef<
   React.ElementRef<typeof DrawerPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <DrawerPortal data-slot="drawer-portal">
-    <DrawerOverlay />
-    <DrawerPrimitive.Content
-      ref={ref}
-      data-slot="drawer-content"
-      className={cn(
-        "group/drawer-content fixed z-50 flex h-auto flex-col bg-popover text-sm text-popover-foreground data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm",
-        className,
-      )}
-      {...props}
-    >
-      <div className="mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
-      {children}
-    </DrawerPrimitive.Content>
-  </DrawerPortal>
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content> & {
+    container?: React.ComponentProps<typeof DrawerPrimitive.Portal>["container"];
+  }
+>(({ className, children, container, ...props }, ref) => (
+  <DrawerPrimitive.Portal container={container}>
+    <ThemeWrapper>
+      <DrawerOverlay />
+      <DrawerPrimitive.Content
+        ref={ref}
+        data-slot="drawer-content"
+        className={cn(
+          "group/drawer-content fixed z-50 flex h-auto flex-col bg-popover text-sm text-popover-foreground data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm",
+          className,
+        )}
+        {...props}
+      >
+        <div className="mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
+        {children}
+      </DrawerPrimitive.Content>
+    </ThemeWrapper>
+  </DrawerPrimitive.Portal>
 ));
 DrawerContent.displayName = "DrawerContent";
 
@@ -144,7 +149,6 @@ export {
   DrawerFooter,
   DrawerHeader,
   DrawerOverlay,
-  DrawerPortal,
   DrawerTitle,
   DrawerTrigger,
 };

package/src/components/micro/dropdown-menu.tsx

@@ -13,6 +13,7 @@ import { Menu as MenuPrimitive } from "@base-ui/react/menu";
 import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
 
 import { cn } from "../../lib/utils";
+import { ThemeWrapper } from "./theme-provider";
 
 export type DropdownMenuVariant = "destructive";
 
@@ -21,8 +22,7 @@ function DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {
 }
 DropdownMenu.displayName = "DropdownMenu";
 
-const DropdownMenuPortal = MenuPrimitive.Portal;
-DropdownMenuPortal.displayName = "DropdownMenuPortal";
+
 
 const DropdownMenuTrigger = React.forwardRef<
   HTMLButtonElement,
@@ -37,32 +37,36 @@ const DropdownMenuTrigger = React.forwardRef<
 DropdownMenuTrigger.displayName = "DropdownMenuTrigger";
 
 const DropdownMenuContent = React.forwardRef<
-  React.ElementRef<typeof MenuPrimitive.Popup>,
-  MenuPrimitive.Popup.Props &
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<typeof MenuPrimitive.Popup> &
     Pick<
-      MenuPrimitive.Positioner.Props,
+      React.ComponentPropsWithoutRef<typeof MenuPrimitive.Positioner>,
       "align" | "alignOffset" | "side" | "sideOffset"
-    >
+    > & {
+      container?: React.ComponentProps<typeof MenuPrimitive.Portal>["container"];
+    }
 >(
   (
     {
+      className,
+      sideOffset = 4,
+      side = "bottom",
       align = "start",
       alignOffset = 0,
-      side = "bottom",
-      sideOffset = 4,
-      className,
+      container,
+      children,
       ...props
     },
     ref,
-  ) => {
-    return (
-      <>
+  ) => (
+    <MenuPrimitive.Portal container={container}>
+      <ThemeWrapper>
         <MenuPrimitive.Positioner
-          className="isolate z-50 outline-none"
           align={align}
           alignOffset={alignOffset}
           side={side}
           sideOffset={sideOffset}
+          className="isolate z-50 outline-none"
         >
           <MenuPrimitive.Popup
             ref={ref}
@@ -72,11 +76,13 @@ const DropdownMenuContent = React.forwardRef<
               className,
             )}
             {...props}
-          />
+          >
+            {children}
+          </MenuPrimitive.Popup>
         </MenuPrimitive.Positioner>
-      </>
-    );
-  },
+      </ThemeWrapper>
+    </MenuPrimitive.Portal>
+  ),
 );
 DropdownMenuContent.displayName = "DropdownMenuContent";
 
@@ -294,7 +300,6 @@ export {
   DropdownMenuGroup,
   DropdownMenuItem,
   DropdownMenuLabel,
-  DropdownMenuPortal,
   DropdownMenuRadioGroup,
   DropdownMenuRadioItem,
   DropdownMenuSeparator,

package/src/components/micro/hover-card.tsx

@@ -12,6 +12,7 @@ import * as React from "react";
 import { PreviewCard as PreviewCardPrimitive } from "@base-ui/react/preview-card";
 
 import { cn } from "../../lib/utils";
+import { ThemeWrapper } from "./theme-provider";
 
 /**
  * @description For sighted users to preview content available behind a link.
@@ -38,15 +39,17 @@ const HoverCardTrigger = React.forwardRef<
 ));
 HoverCardTrigger.displayName = "HoverCardTrigger";
 
-const HoverCardPortal = PreviewCardPrimitive.Portal;
+
 
 const HoverCardContent = React.forwardRef<
-  React.ElementRef<typeof PreviewCardPrimitive.Popup>,
+  HTMLDivElement,
   React.ComponentPropsWithoutRef<typeof PreviewCardPrimitive.Popup> &
     Pick<
       React.ComponentPropsWithoutRef<typeof PreviewCardPrimitive.Positioner>,
       "align" | "alignOffset" | "side" | "sideOffset"
-    >
+    > & {
+      container?: React.ComponentProps<typeof PreviewCardPrimitive.Portal>["container"];
+    }
 >(
   (
     {
@@ -55,33 +58,38 @@ const HoverCardContent = React.forwardRef<
       sideOffset = 4,
       align = "center",
       alignOffset = 4,
+      container,
       ...props
     },
     ref,
   ) => {
     return (
-      <PreviewCardPrimitive.Positioner
-        align={align}
-        alignOffset={alignOffset}
-        side={side}
-        sideOffset={sideOffset}
-        className="isolate"
-      >
-        <PreviewCardPrimitive.Popup
-          ref={ref}
-          data-slot="hover-card-content"
-          className={cn(
-            "z-50 w-64 origin-(--transform-origin) rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100",
-            "data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-            "data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 motion-reduce:animate-none motion-reduce:transition-none",
-            className,
-          )}
-          {...props}
-        />
-      </PreviewCardPrimitive.Positioner>
+      <PreviewCardPrimitive.Portal container={container}>
+        <ThemeWrapper>
+          <PreviewCardPrimitive.Positioner
+            align={align}
+            alignOffset={alignOffset}
+            side={side}
+            sideOffset={sideOffset}
+            className="isolate"
+          >
+            <PreviewCardPrimitive.Popup
+              ref={ref}
+              data-slot="hover-card-content"
+              className={cn(
+                "z-50 w-64 origin-(--transform-origin) rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100",
+                "data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+                "data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 motion-reduce:animate-none motion-reduce:transition-none",
+                className,
+              )}
+              {...props}
+            />
+          </PreviewCardPrimitive.Positioner>
+        </ThemeWrapper>
+      </PreviewCardPrimitive.Portal>
     );
   },
 );
 HoverCardContent.displayName = "HoverCardContent";
 
-export { HoverCard, HoverCardContent, HoverCardPortal, HoverCardTrigger };
+export { HoverCard, HoverCardContent, HoverCardTrigger };

package/src/components/micro/menubar.tsx

@@ -19,7 +19,6 @@ import {
   DropdownMenuGroup,
   DropdownMenuItem,
   DropdownMenuLabel,
-  DropdownMenuPortal,
   DropdownMenuRadioGroup,
   DropdownMenuSeparator,
   DropdownMenuShortcut,
@@ -64,12 +63,6 @@ function MenubarGroup({
   return <DropdownMenuGroup data-slot="menubar-group" {...props} />;
 }
 
-function MenubarPortal({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPortal>) {
-  return <DropdownMenuPortal data-slot="menubar-portal" {...props} />;
-}
-
 function MenubarTrigger({
   className,
   ...props
@@ -291,7 +284,6 @@ export {
   MenubarItem,
   MenubarLabel,
   MenubarMenu,
-  MenubarPortal,
   MenubarRadioGroup,
   MenubarRadioItem,
   MenubarSeparator,