feat(toast): fix-toast-animation

apps/docs/content/components/toast/disable-animation.raw.jsx

@@ -0,0 +1,24 @@
+import {addToast, ToastProvider, Button} from "@heroui/react";
+
+export default function App() {
+  return (
+    <>
+      <div className="fixed z-[100]">
+        <ToastProvider disableAnimation={true} />
+      </div>
+      <div className="flex flex-wrap gap-2">
+        <Button
+          variant="flat"
+          onPress={() => {
+            addToast({
+              title: "Toast Title",
+              description: "Toast Displayed Successfully",
+            });
+          }}
+        >
+          Show Toast (No Animation)
+        </Button>
+      </div>
+    </>
+  );
+}

apps/docs/content/components/toast/disable-animation.ts

@@ -0,0 +1,10 @@
+import App from "./disable-animation.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};
+

apps/docs/content/components/toast/index.ts

@@ -6,6 +6,7 @@ import placement from "./placement";
 import usage from "./usage";
 import customCloseIcon from "./custom-close-icon";
 import close from "./close";
+import disableAnimation from "./disable-animation";
 
 export const toastContent = {
   color,
@@ -16,4 +17,5 @@ export const toastContent = {
   placement,
   usage,
   customCloseIcon,
+  disableAnimation,
 };

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

@@ -116,6 +116,15 @@ Toast comes with 6 color variants to convey different meanings.
     files={toastContent.close}
 />
 
+### Disable Animation
+
+You can disable animations for all toasts by setting `disableAnimation={true}` on the `ToastProvider`.
+
+<CodeDemo
+  title="Disable Animation"
+  files={toastContent.disableAnimation}
+/>
+
 ### Custom Styles
 
 You can customize the alert by passing custom Tailwind CSS classes to the component slots.