fixed review comments

src/components/ui/AlertDialog/contexts/AlertDialogContext.tsx

@@ -1,18 +1,15 @@
-import { createContext } from 'react';
-import { FloatingContext } from '@floating-ui/react';
+import { createContext } from "react";
 
 type AlertDialogContextType = {
   isOpen: boolean;
   handleOpenChange: (open: boolean) => void;
-  floaterContext: FloatingContext;
   rootClass: string;
   handleOverlayClick: () => void;
 };
 
 export const AlertDialogContext = createContext<AlertDialogContextType>({
   isOpen: false,
   handleOpenChange: () => {},
-  floaterContext: {} as FloatingContext,
-  rootClass: '',
+  rootClass: "",
   handleOverlayClick: () => {},
 });

src/components/ui/AlertDialog/shards/AlertDialogPortal.tsx

@@ -1,21 +1,35 @@
-import React, { useContext } from 'react';
-import Floater from '~/core/primitives/Floater';
-import { AlertDialogContext } from '../contexts/AlertDialogContext';
+import React, { useContext } from "react";
+import Floater from "~/core/primitives/Floater";
+import { AlertDialogContext } from "../contexts/AlertDialogContext";
 
 export type AlertDialogPortalProps = {
-    children: React.ReactNode;
-
-}
+  children: React.ReactNode;
+};
 
-const AlertDialogPortal = ({ children } : AlertDialogPortalProps) => {
-    const {rootClass} = useContext(AlertDialogContext)
-    const rootElement = document.getElementsByClassName(rootClass)[0] as HTMLElement | null;
+const AlertDialogPortal = ({ children }: AlertDialogPortalProps) => {
+  const { rootClass } = useContext(AlertDialogContext);
+  const rootElement = document.getElementsByClassName(
+    rootClass
+  )[0] as HTMLElement | null;
 
-    return (
-        <Floater.Portal root={rootElement || document.body}>
-            {children}
-        </Floater.Portal>
-    );
+  return (
+    <Floater.Portal
+      root={
+        rootElement ||
+        (() => {
+          if (process.env.NODE_ENV === "development") {
+            console.warn(
+              `AlertDialog: No element found with class "${rootClass}". ` +
+                "Falling back to document.body. Dark mode styling may not work correctly."
+            );
+          }
+          return document.body;
+        })()
+      }
+    >
+      {children}
+    </Floater.Portal>
+  );
 };
 
 export default AlertDialogPortal;

src/components/ui/AlertDialog/shards/AlertDialogRoot.tsx

@@ -14,7 +14,7 @@ export type AlertDialogRootProps = {
 
 const COMPONENT_NAME = 'AlertDialog';
 
-const AlertDialogRoot = ({ children, customRootClass = '', open, onOpenChange, onClickOutside } : AlertDialogRootProps) => {
+const AlertDialogRoot = ({ children, customRootClass = '', open, onOpenChange, onClickOutside=()=>{} } : AlertDialogRootProps) => {
     const { context: floaterContext } = Floater.useFloating();
     const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
     const [isOpen, setIsOpen] = useState(open);