feat(toast): handle duration prop

Author: vvv-sss

src/components/toast/toast.hooks.ts

@@ -0,0 +1,52 @@
+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 id - The unique ID of the toast
+ * @param hide - Function to hide the toast
+ *
+ * @example
+ * ```tsx
+ * useToastDuration(4000, toastId, hide);
+ * ```
+ */
+export function useToastDuration(
+  duration: number | null | undefined,
+  id: string | undefined,
+  hide: ((ids?: string | string[]) => void) | undefined
+): void {
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  useEffect(() => {
+    // Clear any existing timeout
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+
+    // Only set timeout if duration is valid and id/hide are available
+    if (
+      duration !== null &&
+      duration !== undefined &&
+      !isNaN(duration) &&
+      duration > 0 &&
+      duration !== Infinity &&
+      id &&
+      hide
+    ) {
+      timeoutRef.current = setTimeout(() => {
+        hide(id);
+      }, duration);
+    }
+
+    // Cleanup timeout on unmount or when duration/id/hide changes
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
+      }
+    };
+  }, [duration, id, hide]);
+}

src/components/toast/toast.tsx

@@ -7,9 +7,11 @@ import { cn } from '../../helpers/theme';
 import type { ViewRef } from '../../helpers/types';
 import { createContext } from '../../helpers/utils';
 import * as ToastPrimitive from '../../primitives/toast';
+import type { ToastComponentProps } from '../../providers/toast';
 import { Button } from '../button';
 import { useToastRootAnimation } from './toast.animation';
 import { DISPLAY_NAME } from './toast.constants';
+import { useToastDuration } from './toast.hooks';
 import toastStyles, { styleSheet } from './toast.styles';
 import type {
   ToastActionProps,
@@ -39,9 +41,18 @@ const ToastRoot = forwardRef<ViewRef, ToastRootProps>((props, ref) => {
     className,
     style,
     animation,
+    duration = 4000,
+    hide,
     ...restProps
   } = props;
 
+  // Access id from props (id is omitted from ToastRootProps type but available at runtime)
+  const toastProps = props as ToastRootProps & Pick<ToastComponentProps, 'id'>;
+  const { id } = toastProps;
+
+  // Handle automatic toast dismissal based on duration
+  useToastDuration(duration, id, hide);
+
   const tvStyles = toastStyles.root({
     className,
   });

src/components/toast/toast.types.ts

@@ -105,6 +105,12 @@ export interface ToastRootProps
    * @default 'top'
    */
   placement?: ToastPlacement;
+  /**
+   * Duration in milliseconds before the toast automatically disappears
+   * Set to `null` or `Infinity` to prevent auto-hide
+   * @default 4000
+   */
+  duration?: number | null;
   /**
    * Additional CSS class for the toast container
    */