feat: add useNoticeTimer hook and enhance Notification component

- Add useNoticeTimer hook for auto-close timer with pause/resume support
- Add onClose callback prop for timeout-based closing
- Add pauseOnHover support (default: true) to pause timer on mouse hover
- Add onClick handler support
- Set default duration to 4.5 seconds

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: zombieJ

src/Notification.tsx

@@ -1,21 +1,40 @@
 import * as React from 'react';
+import useNoticeTimer from './hooks/useNoticeTimer';
+import { useEvent } from '@rc-component/util';
 
 export interface NotificationProps {
   content?: React.ReactNode;
   actions?: React.ReactNode;
   close?: React.ReactNode;
-  duration?: number | false | null;
+  duration?: number | false;
   pauseOnHover?: boolean;
   onClick?: React.MouseEventHandler<HTMLDivElement>;
+  /** Callback when notification is closed by timeout */
+  onClose?: () => void;
 }
 
 const Notification = React.forwardRef<HTMLDivElement, NotificationProps>((props, ref) => {
-  const { content, actions, close, ...restProps } = props;
+  const { content, actions, close, duration = 4.5, pauseOnHover = true, onClick, onClose } = props;
+
+  // ========================= Close ==========================
+  const onEventClose = useEvent(onClose);
+
+  // ======================== Duration ========================
+  const [onResume, onPause] = useNoticeTimer(duration, onEventClose);
+
+  // ========================= Render =========================
   return (
-    <div ref={ref} {...restProps}>
+    <div ref={ref} onClick={onClick} onMouseEnter={onPause} onMouseLeave={onResume}>
       {content}
       {close && (
-        <button className="close" aria-label="Close">
+        <button
+          className="close"
+          aria-label="Close"
+          onClick={(e) => {
+            e.stopPropagation();
+            onEventClose();
+          }}
+        >
           {close}
         </button>
       )}

src/hooks/useNoticeTimer.ts

@@ -0,0 +1,44 @@
+import * as React from 'react';
+
+export default function useNoticeTimer(duration: number | false, onClose: VoidFunction) {
+  // Normalize: `false` means no auto-close
+  const mergedDuration: number = typeof duration === 'number' ? duration : 0;
+
+  const startTimestampRef = React.useRef(0);
+  const leftTimeRef = React.useRef(mergedDuration * 1000);
+  const timerRef = React.useRef<NodeJS.Timeout>();
+
+  const clear = () => {
+    clearTimeout(timerRef.current);
+  };
+
+  const onResume = () => {
+    clear();
+
+    // Only start timer when there is remaining time
+    if (leftTimeRef.current > 0) {
+      startTimestampRef.current = Date.now();
+      timerRef.current = setTimeout(() => {
+        onClose();
+      }, leftTimeRef.current);
+    }
+  };
+
+  const onPause = () => {
+    clear();
+
+    // Record how much time is left so onResume can continue from here
+    leftTimeRef.current -= Date.now() - startTimestampRef.current;
+  };
+
+  React.useEffect(() => {
+    // Reset remaining time whenever duration changes, then (re)start the timer
+    leftTimeRef.current = mergedDuration * 1000;
+    onResume();
+
+    // Clear the timer on unmount or before next effect run
+    return clear;
+  }, []);
+
+  return [onResume, onPause] as const;
+}