feat(toast): handle persistent duration

Author: vvv-sss

example/src/app/(home)/components/toast.tsx

@@ -81,7 +81,8 @@ const MyToast = (props: ToastComponentProps) => {
   return (
     <Toast
       variant="accent"
-      placement="bottom"
+      placement="top"
+      duration="persistent"
       className="flex-row items-center gap-3"
       {...props}
     >

src/components/toast/toast.hooks.ts

@@ -3,17 +3,18 @@ import { useEffect, useRef } from 'react';
 /**
  * Hook to handle automatic toast dismissal based on duration
  *
- * @param duration - Duration in milliseconds before the toast automatically disappears
+ * @param duration - Duration in milliseconds before the toast automatically disappears, or 'persistent' to prevent auto-hide
  * @param id - The unique ID of the toast
  * @param hide - Function to hide the toast
  *
  * @example
  * ```tsx
  * useToastDuration(4000, toastId, hide);
+ * useToastDuration('persistent', toastId, hide);
  * ```
  */
 export function useToastDuration(
-  duration: number | null | undefined,
+  duration: number | 'persistent' | undefined,
   id: string | undefined,
   hide: ((ids?: string | string[]) => void) | undefined
 ): void {
@@ -26,10 +27,16 @@ export function useToastDuration(
       timeoutRef.current = null;
     }
 
-    // Only set timeout if duration is valid and id/hide are available
+    // Handle immediate dismissal
+    if (duration === 0 && id && hide) {
+      hide(id);
+      return;
+    }
+
+    // Only set timeout if duration is a valid positive number and id/hide are available
+    // Skip timeout if duration is 'persistent', undefined, or invalid (treats as persistent)
     if (
-      duration !== null &&
-      duration !== undefined &&
+      typeof duration === 'number' &&
       !isNaN(duration) &&
       duration > 0 &&
       duration !== Infinity &&

src/components/toast/toast.types.ts

@@ -122,10 +122,10 @@ export interface ToastRootProps
   placement?: ToastPlacement;
   /**
    * Duration in milliseconds before the toast automatically disappears
-   * Set to `null` or `Infinity` to prevent auto-hide
+   * Set to `'persistent'` to prevent auto-hide (toast will remain until manually dismissed)
    * @default 4000
    */
-  duration?: number | null;
+  duration?: number | 'persistent';
   /**
    * Additional CSS class for the toast container
    */