From 6419e4ae7cc2834a96097cd3399bb98fa9a96db0 Mon Sep 17 00:00:00 2001
From: WK Wong <wingkwong.code@gmail.com>
Date: Wed, 19 Feb 2025 13:36:44 +0800
Subject: [PATCH 1/2] fix(toast): shouldShowTimeoutProgess typo

---
 .changeset/thirty-candles-listen.md                 | 5 +++++
 packages/components/toast/stories/toast.stories.tsx | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/thirty-candles-listen.md

diff --git a/.changeset/thirty-candles-listen.md b/.changeset/thirty-candles-listen.md
new file mode 100644
index 0000000000..769e27b4ed
--- /dev/null
+++ b/.changeset/thirty-candles-listen.md
@@ -0,0 +1,5 @@
+---
+"@heroui/toast": patch
+---
+
+fix shouldShowTimeoutProgess typo (#4856)
diff --git a/packages/components/toast/stories/toast.stories.tsx b/packages/components/toast/stories/toast.stories.tsx
index b501f18789..1fed97e011 100644
--- a/packages/components/toast/stories/toast.stories.tsx
+++ b/packages/components/toast/stories/toast.stories.tsx
@@ -107,7 +107,7 @@ const ShowTimeoutProgressTemplate = (args: ToastProps) => {
             title: "Toast Title",
             description: "Toast Description",
             timeout: 3000,
-            shouldShowTimeoutProgess: true,
+            shouldShowTimeoutProgress: true,
             ...args,
           });
         }}

From 461b0da229c7884ed6e08850053f5b933f5d7bca Mon Sep 17 00:00:00 2001
From: WK Wong <wingkwong.code@gmail.com>
Date: Wed, 19 Feb 2025 13:39:36 +0800
Subject: [PATCH 2/2] fix(toast): shouldShowTimeoutProgess typo

---
 packages/components/toast/src/use-toast.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/components/toast/src/use-toast.ts b/packages/components/toast/src/use-toast.ts
index a442678767..91cc57d1ed 100644
--- a/packages/components/toast/src/use-toast.ts
+++ b/packages/components/toast/src/use-toast.ts
@@ -100,7 +100,7 @@ export interface ToastProps extends ToastVariantProps {
   /**
    * should apply styles to indicate timeout progress
    */
-  shouldShowTimeoutProgess?: boolean;
+  shouldShowTimeoutProgress?: boolean;
   /**
    * The severity of the toast. This changes the icon without having to change the color.
    * @default "default"
@@ -154,7 +154,7 @@ export function useToast<T extends ToastProps>(originalProps: UseToastProps<T>)
     toastOffset = 0,
     motionProps,
     timeout = 6000,
-    shouldShowTimeoutProgess = false,
+    shouldShowTimeoutProgress = false,
     icon,
     onClose,
     severity,
@@ -222,7 +222,7 @@ export function useToast<T extends ToastProps>(originalProps: UseToastProps<T>)
 
       if (progressBarRef.current) {
         progressBarRef.current.style.width = `${
-          shouldShowTimeoutProgess ? progressRef.current : 0
+          shouldShowTimeoutProgress ? progressRef.current : 0
         }%`;
       }
 
@@ -238,7 +238,7 @@ export function useToast<T extends ToastProps>(originalProps: UseToastProps<T>)
         cancelAnimationFrame(animationRef.current);
       }
     };
-  }, [timeout, shouldShowTimeoutProgess, state, isToastHovered, index, total, isRegionExpanded]);
+  }, [timeout, shouldShowTimeoutProgress, state, isToastHovered, index, total, isRegionExpanded]);
 
   const [isLoading, setIsLoading] = useState<boolean>(!!promiseProp);