chore: adding the region props

apps/docs/content/docs/components/toast.mdx

@@ -180,7 +180,7 @@ Toast has the following slots:
 ## Accessibility
 
 - Toast has role of `alert`
-- All Toasts are present in ToastRegion.
+- All Toasts are present in `ToastRegion`.
 - Close button has aria-label="Close" by default
 - When no toast are present, ToastRegion is removed from the DOM
 
@@ -331,9 +331,27 @@ Toast has the following slots:
       description: "Props to be passed to all toasts",
       default: "-"
     },
+    {
+      attribute: "regionProps",
+      type: "ToastRegionProps",
+      description: "Props to be passed to toast region",
+      default: "-"
+    },
   ]}
 />
 
+### ToastRegion Props
+
+<APITable
+  data={[
+    {
+      attribute: "classNames",
+      type: "Partial<Record<\"base\", string>>",
+      description: "Allows to set custom class names for the toast region slots.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### Toast Events
 

packages/components/toast/src/toast-provider.tsx

@@ -1,7 +1,7 @@
 import {ToastOptions, ToastQueue, useToastQueue} from "@react-stately/toast";
 import {useProviderContext} from "@heroui/system";
 
-import {ToastRegion} from "./toast-region";
+import {RegionProps, ToastRegion} from "./toast-region";
 import {ToastProps, ToastPlacement} from "./use-toast";
 
 let globalToastQueue: ToastQueue<ToastProps> | null = null;
@@ -12,6 +12,7 @@ interface ToastProviderProps {
   disableAnimation?: boolean;
   toastProps?: ToastProps;
   toastOffset?: number;
+  regionProps?: RegionProps;
 }
 
 export const getToastQueue = () => {
@@ -31,6 +32,7 @@ export const ToastProvider = ({
   maxVisibleToasts = 3,
   toastOffset = 0,
   toastProps = {},
+  regionProps,
 }: ToastProviderProps) => {
   const toastQueue = useToastQueue(getToastQueue());
   const globalContext = useProviderContext();
@@ -48,6 +50,7 @@ export const ToastProvider = ({
       toastOffset={toastOffset}
       toastProps={toastProps}
       toastQueue={toastQueue}
+      {...regionProps}
     />
   );
 };

packages/components/toast/src/toast-region.tsx

@@ -3,12 +3,23 @@ import {useToastRegion, AriaToastRegionProps} from "@react-aria/toast";
 import {QueuedToast, ToastState} from "@react-stately/toast";
 import {useHover} from "@react-aria/interactions";
 import {mergeProps} from "@react-aria/utils";
-import {toastRegion, ToastRegionVariantProps} from "@heroui/theme";
+import {
+  SlotsToClasses,
+  toastRegion,
+  ToastRegionSlots,
+  ToastRegionVariantProps,
+} from "@heroui/theme";
+import {clsx} from "@heroui/shared-utils";
 
 import Toast from "./toast";
 import {ToastProps, ToastPlacement} from "./use-toast";
 
-interface ToastRegionProps<T> extends AriaToastRegionProps, ToastRegionVariantProps {
+export interface RegionProps {
+  className?: string;
+  classNames?: SlotsToClasses<ToastRegionSlots>;
+}
+
+interface ToastRegionProps<T> extends AriaToastRegionProps, ToastRegionVariantProps, RegionProps {
   toastQueue: ToastState<T>;
   placement?: ToastPlacement;
   maxVisibleToasts: number;
@@ -23,6 +34,8 @@ export function ToastRegion<T extends ToastProps>({
   maxVisibleToasts,
   toastOffset,
   toastProps = {},
+  className,
+  classNames,
   ...props
 }: ToastRegionProps<T>) {
   const ref = useRef(null);
@@ -41,6 +54,8 @@ export function ToastRegion<T extends ToastProps>({
     [disableAnimation],
   );
 
+  const baseStyles = clsx(className, classNames?.base);
+
   useEffect(() => {
     function handleTouchOutside(event: TouchEvent) {
       if (ref.current && !(ref.current as HTMLDivElement).contains(event.target as Node)) {
@@ -65,7 +80,7 @@ export function ToastRegion<T extends ToastProps>({
     <div
       {...mergeProps(regionProps, hoverProps)}
       ref={ref}
-      className={slots.base()}
+      className={slots.base({class: clsx(baseStyles, classNames?.base)})}
       data-placement={placement}
       onTouchStart={handleTouchStart}
     >