fix sonner

components/ui/sonner.tsx

@@ -2,9 +2,11 @@
 
 import { usePathname } from "next/navigation";
 import { useTheme } from "next-themes";
-import { useEffect, useState } from "react";
+import { useEffect, useState, type CSSProperties } from "react";
 import { Toaster as Sonner, type ToasterProps } from "sonner";
 
+import { cn } from "@/lib/utils";
+
 export function Toaster(props: ToasterProps) {
   const pathname = usePathname();
   const { resolvedTheme = "light" } = useTheme();
@@ -15,15 +17,31 @@ export function Toaster(props: ToasterProps) {
   }, [pathname]);
 
   const isArabic = documentLang === "ar";
-  const toastFontFamily = isArabic ? "var(--font-dubai), sans-serif" : "var(--font-museo), sans-serif";
+  const toastFontClassName = isArabic ? "font-arabic text-right tracking-normal" : "font-latin text-left";
+  const toasterStyle: CSSProperties & Record<"--width", string> = {
+    "--width": "max-content",
+    left: "50%",
+    right: "auto",
+    transform: "translateX(-50%)",
+    ...(props.style ?? {}),
+  };
 
   return (
     <Sonner
+      {...props}
+      dir={props.dir ?? "ltr"}
       theme={resolvedTheme as ToasterProps["theme"]}
-      position="top-center"
-      duration={1800}
+      position={props.position ?? "top-center"}
+      duration={props.duration ?? 1800}
+      closeButton={props.closeButton ?? false}
+      offset={props.offset ?? "16px"}
+      mobileOffset={props.mobileOffset ?? "16px"}
+      className={cn("toaster group", props.className)}
+      style={toasterStyle}
       toastOptions={{
+        ...props.toastOptions,
         style: {
+          ...(props.toastOptions?.style ?? {}),
           borderRadius: "16px",
           padding: "10px 12px",
           minWidth: "0",
@@ -31,22 +49,41 @@ export function Toaster(props: ToasterProps) {
           background: "hsl(var(--card))",
           color: "hsl(var(--card-foreground))",
           border: "1px solid hsl(var(--border))",
-          fontFamily: toastFontFamily,
+          direction: isArabic ? "rtl" : "ltr",
+          textAlign: isArabic ? "right" : "left",
         },
         classNames: {
-          toast:
-            "min-w-0 max-w-[min(calc(100vw-2rem),32rem)] rounded-[16px] border border-border bg-card px-3 py-2 text-card-foreground shadow-panel",
-          default:
+          ...props.toastOptions?.classNames,
+          toast: cn(
+            "group toast group-[.toaster]:min-w-0 group-[.toaster]:w-fit group-[.toaster]:max-w-[min(calc(100vw-2rem),32rem)] group-[.toaster]:rounded-[16px] group-[.toaster]:border group-[.toaster]:border-border group-[.toaster]:bg-card group-[.toaster]:px-3 group-[.toaster]:py-2 group-[.toaster]:text-card-foreground group-[.toaster]:shadow-panel",
+            toastFontClassName,
+            props.toastOptions?.classNames?.toast,
+          ),
+          title: cn(
+            "text-[13px] font-medium leading-5",
+            isArabic ? "text-right" : "text-left",
+            props.toastOptions?.classNames?.title,
+          ),
+          description: cn(
+            "text-[13px] leading-5 text-muted-foreground",
+            isArabic ? "text-right" : "text-left",
+            props.toastOptions?.classNames?.description,
+          ),
+          default: cn(
             "border-border bg-card text-card-foreground",
-          title: "text-[13px] font-medium leading-5",
-          description: "text-[13px] leading-5 text-muted-foreground",
-          success:
+            props.toastOptions?.classNames?.default,
+          ),
+          success: cn(
             "border-status-success/30 bg-status-success-soft text-status-success dark:border-status-success/40 dark:bg-status-success-soft dark:text-status-success",
-          error:
+            props.toastOptions?.classNames?.success,
+          ),
+          error: cn(
             "border-destructive/30 bg-destructive/10 text-destructive dark:border-destructive/40 dark:bg-destructive/20 dark:text-destructive-foreground",
+            props.toastOptions?.classNames?.error,
+          ),
+          closeButton: "hidden",
         },
       }}
-      {...props}
     />
   );
 }