fix: adding junior's suggestions

packages/components/toast/package.json

@@ -43,7 +43,8 @@
     "@nextui-org/react-utils": "workspace:*",
     "@nextui-org/shared-utils": "workspace:*",
     "@nextui-org/shared-icons": "workspace:*",
-    "@react-aria/button": "3.9.5",
+    "@nextui-org/dom-animation": "workspace:*",
+    "@nextui-org/spinner": "workspace:*",
     "@react-aria/toast": "3.0.0-beta.15",
     "@react-aria/utils": "3.24.1",
     "@react-aria/interactions": "3.22.5",

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

@@ -1,9 +1,9 @@
-import {useEffect, useRef, useState} from "react";
+import {useEffect, useMemo, useRef, useState} from "react";
 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 {clsx} from "@nextui-org/shared-utils";
+import {toastRegion} from "@nextui-org/theme";
 
 import Toast from "./toast";
 import {ToastProps} from "./use-toast";
@@ -36,6 +36,14 @@ export function ToastRegion<T extends ToastProps>({
 
   const [isTouched, setIsTouched] = useState(false);
 
+  const slots = useMemo(
+    () =>
+      toastRegion({
+        disableAnimation,
+      }),
+    [disableAnimation],
+  );
+
   useEffect(() => {
     function handleTouchOutside(event: TouchEvent) {
       if (ref.current && !(ref.current as HTMLDivElement).contains(event.target as Node)) {
@@ -54,17 +62,8 @@ export function ToastRegion<T extends ToastProps>({
     };
   }, []);
 
-  const placementStyles: Record<string, string> = {
-    "right-bottom": "fixed flex flex-col bottom-0 right-0 pr-2",
-    "left-bottom": "fixed flex flex-col bottom-0 left-0 pl-2",
-    "center-bottom": "fixed flex flex-col bottom-0 left-1/2 -translate-x-1/2",
-    "right-top": "fixed flex flex-col top-0 right-0 pr-2",
-    "left-top": "fixed flex flex-col top-0 left-0 pl-2",
-    "center-top": "fixed flex flex-col top-0 left-1/2 -translate-x-1/2",
-  };
-  const placementStyle = placement ? placementStyles[placement] : placementStyles["right-bottom"];
   const [heights, setHeights] = useState<number[]>([]);
-  const total = toastQueue.visibleToasts.length;
+  const total = toastQueue.visibleToasts?.length ?? 0;
   const handleTouchStart = () => {
     setIsTouched(true);
   };
@@ -73,7 +72,7 @@ export function ToastRegion<T extends ToastProps>({
     <div
       {...mergeProps(regionProps, hoverProps)}
       ref={ref}
-      className={clsx(disableAnimation ? placementStyle : "")}
+      className={slots.base()}
       data-placement={placement}
       onTouchStart={handleTouchStart}
     >

packages/components/toast/src/toast.tsx

@@ -7,10 +7,9 @@ import {
   SuccessIcon,
   WarningIcon,
 } from "@nextui-org/shared-icons";
-import {motion, AnimatePresence} from "framer-motion";
+import {AnimatePresence, motion} from "framer-motion";
 import {cloneElement, isValidElement} from "react";
-
-import {Spinner} from "../../spinner/src";
+import {Spinner} from "@nextui-org/spinner";
 
 import {UseToastProps, useToast} from "./use-toast";
 

packages/core/theme/src/components/toast.ts

@@ -2,6 +2,32 @@ import type {VariantProps} from "tailwind-variants";
 
 import {tv} from "../utils/tv";
 
+const toastRegion = tv({
+  slots: {
+    base: "",
+  },
+  variants: {
+    disableAnimation: {
+      false: {
+        base: "",
+      },
+      true: {
+        base: [
+          "data-[placement=right-bottom]:bottom-0 data-[placement=right-bottom]:right-0 w-full px-2 sm:w-auto sm:px-0 data-[placement=right-bottom]:fixed data-[placement=right-bottom]:flex data-[placement=right-bottom]:flex-col",
+          "data-[placement=left-bottom]:bottom-0 data-[placement=left-bottom]:left-0 w-full px-2 sm:w-auto sm:px-0 data-[placement=left-bottom]:fixed data-[placement=left-bottom]:flex data-[placement=left-bottom]:flex-col",
+          "data-[placement=center-bottom]:bottom-0 data-[placement=center-bottom]:fixed w-full px-2 sm:w-auto sm:px-0 data-[placement=center-bottom]:flex data-[placement=center-bottom]:flex-col data-[placement=center-bottom]:left-1/2 data-[placement=center-bottom]:-translate-x-1/2",
+          "data-[placement=right-top]:top-0 data-[placement=right-top]:right-0 w-full px-2 sm:w-auto sm:px-0 data-[placement=right-top]:fixed data-[placement=right-top]:flex data-[placement=right-top]:flex-col",
+          "data-[placement=left-top]:top-0 data-[placement=left-top]:left-0 w-full px-2 sm:w-auto sm:px-0 data-[placement=left-top]:fixed data-[placement=left-top]:flex data-[placement=left-top]:flex-col",
+          "data-[placement=center-top]:top-0 data-[placement=center-top]:fixed w-full px-2 sm:w-auto sm:px-0 data-[placement=center-top]:flex data-[placement=center-top]:flex-col data-[placement=center-top]:left-1/2 data-[placement=center-top]:-translate-x-1/2",
+        ],
+      },
+    },
+  },
+  defaultVariants: {
+    disableAnimation: false,
+  },
+});
+
 const toast = tv({
   slots: {
     base: [
@@ -345,4 +371,4 @@ const toast = tv({
 export type ToastVariantProps = VariantProps<typeof toast>;
 export type ToastSlots = keyof ReturnType<typeof toast>;
 
-export {toast};
+export {toast, toastRegion};