chore: import upstream snapshot with attribution

2026-07-13 13:32:57 +08:00
commit cd420f9332
4811 changed files with 884702 additions and 0 deletions
@@ -0,0 +1,94 @@
+import { useEffect, useRef, useState } from "react";
+import { Callout, type CalloutVariant } from "~/components/primitives/Callout";
+import { cn } from "~/utils/cn";
+
+const CALLOUT_ANIMATION_MS = 300;
+
+type AnimatedCalloutProps = {
+  show: boolean;
+  variant: CalloutVariant;
+  className?: string;
+  children: React.ReactNode;
+  /** When set, the callout auto-hides after this many milliseconds. */
+  autoHideMs?: number;
+  onAutoHide?: () => void;
+  onHidden?: () => void;
+};
+
+export function AnimatedCallout({
+  show,
+  variant,
+  className,
+  children,
+  autoHideMs,
+  onAutoHide,
+  onHidden,
+}: AnimatedCalloutProps) {
+  const [rendered, setRendered] = useState(show);
+  const [autoDismissed, setAutoDismissed] = useState(false);
+  const onAutoHideRef = useRef(onAutoHide);
+  const onHiddenRef = useRef(onHidden);
+
+  useEffect(() => {
+    onAutoHideRef.current = onAutoHide;
+  }, [onAutoHide]);
+
+  useEffect(() => {
+    onHiddenRef.current = onHidden;
+  }, [onHidden]);
+
+  const shouldShow = show && !autoDismissed;
+
+  useEffect(() => {
+    if (!show) {
+      setAutoDismissed(false);
+    }
+  }, [show]);
+
+  useEffect(() => {
+    if (shouldShow) {
+      setRendered(true);
+      return;
+    }
+
+    if (!rendered) {
+      return;
+    }
+
+    const hideTimer = window.setTimeout(() => {
+      setRendered(false);
+      onHiddenRef.current?.();
+    }, CALLOUT_ANIMATION_MS);
+
+    return () => window.clearTimeout(hideTimer);
+  }, [shouldShow, rendered]);
+
+  useEffect(() => {
+    if (!shouldShow || autoHideMs === undefined) {
+      return;
+    }
+
+    const closeTimer = window.setTimeout(() => {
+      setAutoDismissed(true);
+      onAutoHideRef.current?.();
+    }, autoHideMs);
+    return () => window.clearTimeout(closeTimer);
+  }, [shouldShow, autoHideMs]);
+
+  if (!rendered) {
+    return null;
+  }
+
+  return (
+    <div
+      aria-hidden={!shouldShow}
+      className={cn(
+        "transition-opacity duration-300",
+        shouldShow ? "opacity-100" : "pointer-events-none opacity-0",
+        className
+      )}
+    >
+      <Callout variant={variant}>{children}</Callout>
+    </div>
+  );
+}