From b6a9cc1bb8f6d400be1580a44097f1c97dfae79a Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Sun, 16 Feb 2025 12:15:26 -0300
Subject: [PATCH] fix: toast styles

---
 .changeset/violet-toes-love.md                |  6 +++++
 apps/docs/app/providers.tsx                   |  3 ++-
 .../components/scripts/script-providers.tsx   | 17 ++++++++-----
 .../components/toast/placement.raw.jsx        | 25 ++++++-------------
 .../components/toast/__tests__/toast.test.tsx |  4 +--
 packages/components/toast/src/use-toast.ts    |  4 +--
 packages/core/theme/src/components/toast.ts   |  2 +-
 7 files changed, 31 insertions(+), 30 deletions(-)
 create mode 100644 .changeset/violet-toes-love.md

diff --git a/.changeset/violet-toes-love.md b/.changeset/violet-toes-love.md
new file mode 100644
index 000000000..6fe03817d
--- /dev/null
+++ b/.changeset/violet-toes-love.md
@@ -0,0 +1,6 @@
+---
+"@heroui/toast": patch
+"@heroui/theme": patch
+---
+
+Fix toast styles
diff --git a/apps/docs/app/providers.tsx b/apps/docs/app/providers.tsx
index f31a0fd05..fd981ace4 100644
--- a/apps/docs/app/providers.tsx
+++ b/apps/docs/app/providers.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import * as React from "react";
-import {HeroUIProvider} from "@heroui/react";
+import {HeroUIProvider, ToastProvider} from "@heroui/react";
 import {ThemeProvider as NextThemesProvider} from "next-themes";
 import {ThemeProviderProps} from "next-themes";
 import {useRouter} from "next/navigation";
@@ -44,6 +44,7 @@ export function Providers({children, themeProps}: ProvidersProps) {
   return (
     <ProviderWrapper>
       <HeroUIProvider navigate={router.push}>
+        <ToastProvider />
         <NextThemesProvider {...themeProps}>{children}</NextThemesProvider>
       </HeroUIProvider>
     </ProviderWrapper>
diff --git a/apps/docs/components/scripts/script-providers.tsx b/apps/docs/components/scripts/script-providers.tsx
index 1b7c8b155..c01650763 100644
--- a/apps/docs/components/scripts/script-providers.tsx
+++ b/apps/docs/components/scripts/script-providers.tsx
@@ -13,18 +13,24 @@ export function ScriptProviders({ isKapaEnabled = true }: { isKapaEnabled?: bool
   }, []);
 
   React.useEffect(() => {
+    function hideKapa() {
     const kapaElements = document.querySelectorAll('[id^="kapa-"]');
-    const display = pathname.includes("toast") ? "none" : "block";
+    const display = pathname === "/docs/components/toast" ? "none" : "block";
 
-    kapaElements.forEach(element => (element as HTMLElement).style.display = display);
-  }, [pathname]);
 
-  if (!isKapaEnabled || !isMounted) {
+      kapaElements.forEach((element) => (element as HTMLElement).style.display = display);
+    }
+
+    setTimeout(() => {
+      hideKapa();
+    }, 500);
+  }, [pathname, isMounted]);
+
+  if (!isKapaEnabled) {
     return null;
   }
 
   return (
-    <>
       <Script
         defer
         data-modal-disclaimer="This is a custom LLM for HeroUI with access to all developer docs (heroui.com/docs) and GitHub Issues and PRs (github.com/heroui-inc/heroui)."
@@ -36,6 +42,5 @@ export function ScriptProviders({ isKapaEnabled = true }: { isKapaEnabled?: bool
         src="https://widget.kapa.ai/kapa-widget.bundle.js"
         strategy="afterInteractive"
       />
-    </>
   );
 }
diff --git a/apps/docs/content/components/toast/placement.raw.jsx b/apps/docs/content/components/toast/placement.raw.jsx
index a7ab53233..af5b3b706 100644
--- a/apps/docs/content/components/toast/placement.raw.jsx
+++ b/apps/docs/content/components/toast/placement.raw.jsx
@@ -1,26 +1,15 @@
-import {addToast, Button, ToastProvider} from "@heroui/react";
+import {addToast, Button} from "@heroui/react";
 import React from "react";
 
 export default function App() {
-  const [placement, setPlacement] = React.useState("right-bottom");
-
   return (
-    <>
-      <ToastProvider placement={placement} toastOffset={placement.includes("top") ? 60 : 0} />
-      <div className="flex flex-wrap gap-2">
-        {[
-          "left-top",
-          "right-top",
-          "center-top",
-          "left-bottom",
-          "right-bottom",
-          "center-bottom",
-        ].map((position) => (
+    <div className="flex flex-wrap gap-2">
+      {["top-left", "top-center", "top-right", "bottom-left", "bottom-center", "bottom-right"].map(
+        (position) => (
           <Button
             key={position}
             variant={"flat"}
             onPress={() => {
-              setPlacement(position);
               addToast({
                 title: "Toast title",
                 description: "Toast displayed successfully",
@@ -29,8 +18,8 @@ export default function App() {
           >
             {position}
           </Button>
-        ))}
-      </div>
-    </>
+        ),
+      )}
+    </div>
   );
 }
diff --git a/packages/components/toast/__tests__/toast.test.tsx b/packages/components/toast/__tests__/toast.test.tsx
index 613a9db71..3fe3e0192 100644
--- a/packages/components/toast/__tests__/toast.test.tsx
+++ b/packages/components/toast/__tests__/toast.test.tsx
@@ -127,7 +127,7 @@ describe("Toast", () => {
   it("should work with placement", async () => {
     const wrapper = render(
       <>
-        <ToastProvider placement="left-bottom" />
+        <ToastProvider placement="bottom-left" />
         <button
           data-testid="button"
           onClick={() => {
@@ -144,7 +144,7 @@ describe("Toast", () => {
 
     const region = wrapper.getByRole("region");
 
-    expect(region).toHaveAttribute("data-placement", "left-bottom");
+    expect(region).toHaveAttribute("data-placement", "bottom-left");
   });
 
   it("should have loading-icon when promise prop is passed.", async () => {
diff --git a/packages/components/toast/src/use-toast.ts b/packages/components/toast/src/use-toast.ts
index b6661f075..f3f6824c0 100644
--- a/packages/components/toast/src/use-toast.ts
+++ b/packages/components/toast/src/use-toast.ts
@@ -341,12 +341,12 @@ export function useToast<T extends ToastProps>(originalProps: UseToastProps<T>)
   const getDragElasticConstraints = (placement: string) => {
     const elasticConstraint = {top: 0, bottom: 0, right: 0, left: 0};
 
-    if (placement === "center-bottom") {
+    if (placement === "bottom-center") {
       elasticConstraint.bottom = 1;
 
       return elasticConstraint;
     }
-    if (placement === "center-top") {
+    if (placement === "top-center") {
       elasticConstraint.top = 1;
 
       return elasticConstraint;
diff --git a/packages/core/theme/src/components/toast.ts b/packages/core/theme/src/components/toast.ts
index 690abe945..6b7feb8c8 100644
--- a/packages/core/theme/src/components/toast.ts
+++ b/packages/core/theme/src/components/toast.ts
@@ -41,7 +41,7 @@ const toast = tv({
       "outline-none",
       "p-3 sm:mx-1",
       "my-1",
-      "w-full sm:w-[356px]",
+      "w-full sm:w-[270px] md:w-[300px]",
       "min-h-4",
     ],
     title: ["text-small", "me-4", "text-foreground"],