fix: toast styles

.changeset/violet-toes-love.md

@@ -0,0 +1,6 @@
+---
+"@heroui/toast": patch
+"@heroui/theme": patch
+---
+
+Fix toast styles

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>

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"
       />
-    </>
   );
 }

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>
   );
 }

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 () => {

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;

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"],