@tamagui/toast 2.0.0-rc.8 → 2.0.0

package/dist/cjs/ToastComposable.cjs

@@ -2,33 +2,35 @@ var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf,
-  __hasOwnProp = Object.prototype.hasOwnProperty;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
-    for (var name in all) __defProp(target, name, {
-      get: all[name],
-      enumerable: !0
-    });
-  },
-  __copyProps = (to, from, except, desc) => {
-    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
       get: () => from[key],
       enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
     });
-    return to;
-  };
+  }
+  return to;
+};
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-    value: mod,
-    enumerable: !0
-  }) : target, mod)),
-  __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-    value: !0
-  }), mod);
+// If the importer is in node compatibility mode or this is not an ESM
+// file that has been converted to a CommonJS file using a Babel-
+// compatible transform (i.e. "__esModule" has not been set), then set
+// "default" to the CommonJS "module.exports" for node compatibility.
+isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+  value: mod,
+  enumerable: true
+}) : target, mod));
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
 var ToastComposable_exports = {};
 __export(ToastComposable_exports, {
   Toast: () => Toast,
@@ -36,248 +38,412 @@ __export(ToastComposable_exports, {
   useToasts: () => useToasts
 });
 module.exports = __toCommonJS(ToastComposable_exports);
-var import_animate_presence = require("@tamagui/animate-presence"),
-  import_constants = require("@tamagui/constants"),
-  import_core = require("@tamagui/core"),
-  import_helpers = require("@tamagui/helpers"),
-  import_portal = require("@tamagui/portal"),
-  import_stacks = require("@tamagui/stacks"),
-  import_text = require("@tamagui/text"),
-  React = __toESM(require("react"), 1),
-  import_ToastState = require("./ToastState.cjs"),
-  import_useAnimatedDragGesture = require("./useAnimatedDragGesture.cjs"),
-  import_useToastAnimations = require("./useToastAnimations.cjs"),
-  import_useReducedMotion = require("./useReducedMotion.cjs"),
-  import_jsx_runtime = require("react/jsx-runtime");
-const VISIBLE_TOASTS_AMOUNT = 4,
-  VIEWPORT_OFFSET = 24,
-  TOAST_GAP = 14,
-  TOAST_LIFETIME = 4e3,
-  TIME_BEFORE_UNMOUNT = 200,
-  ToastContext = (0, import_core.createStyledContext)({}, "Toast__"),
-  useToastContext = ToastContext.useStyledContext,
-  ToastItemContext = React.createContext(null);
+var import_animate_presence = require("@tamagui/animate-presence");
+var import_constants = require("@tamagui/constants");
+var import_native = require("@tamagui/native");
+var import_core = require("@tamagui/core");
+var import_helpers = require("@tamagui/helpers");
+var import_portal = require("@tamagui/portal");
+var import_stacks = require("@tamagui/stacks");
+var import_text = require("@tamagui/text");
+var React = __toESM(require("react"), 1);
+var import_ToastState = require("./ToastState.cjs");
+var import_dispatchNativeToast = require("./dispatchNativeToast.cjs");
+var import_useAnimatedDragGesture = require("./useAnimatedDragGesture.cjs");
+var import_useToastAnimations = require("./useToastAnimations.cjs");
+var import_useReducedMotion = require("./useReducedMotion.cjs");
+var import_ToastItemFrame = require("./ToastItemFrame.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+const VISIBLE_TOASTS_AMOUNT = 4;
+const VIEWPORT_OFFSET = 16;
+const TOAST_GAP = 14;
+const TOAST_LIFETIME = 4e3;
+const FIXED_TOAST_HEIGHT = 72;
+const TIME_BEFORE_UNMOUNT = 200;
+const DEFAULT_HOTKEY = ["altKey", "KeyT"];
+const ToastContext = (0, import_core.createStyledContext)({}, "Toast__");
+const useToastContext = ToastContext.useStyledContext;
+const ToastItemContext = React.createContext(null);
 function useToastItemContext() {
   const ctx = React.useContext(ToastItemContext);
-  if (!ctx) throw new Error("useToastItemContext must be used within Toast.Item or Toast.List");
+  if (!ctx) {
+    throw new Error("useToastItemContext must be used within Toast.Item or Toast.List");
+  }
   return ctx;
 }
-const DefaultSuccessIcon = () => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_text.SizableText, {
-    size: "$5",
-    color: "$green10",
-    children: "\u2713"
-  }),
-  DefaultErrorIcon = () => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_text.SizableText, {
-    size: "$5",
-    color: "$red10",
-    children: "\u2715"
-  }),
-  DefaultWarningIcon = () => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_text.SizableText, {
-    size: "$5",
-    color: "$yellow10",
-    children: "\u26A0"
-  }),
-  DefaultInfoIcon = () => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_text.SizableText, {
-    size: "$5",
-    color: "$blue10",
-    children: "\u2139"
-  }),
-  DefaultLoadingIcon = () => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_text.SizableText, {
-    size: "$5",
-    color: "$color11",
-    children: "\u27F3"
-  }),
-  DefaultCloseIcon = () => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_text.SizableText, {
-    size: "$1",
-    color: "$color11",
-    children: "\u2715"
-  });
 function resolveSwipeDirection(direction, position) {
   if (direction !== "auto") return direction;
   const [yPosition, xPosition] = position.split("-");
-  return xPosition === "left" ? "left" : xPosition === "right" ? "right" : yPosition === "top" ? "up" : "down";
+  if (!import_constants.isWeb) {
+    return yPosition === "top" ? "up" : "down";
+  }
+  if (xPosition === "left") return "left";
+  if (xPosition === "right") return "right";
+  return "horizontal";
 }
-const ToastRoot = React.forwardRef(function (props, ref) {
-    const {
-        children,
-        position = "bottom-right",
-        duration = TOAST_LIFETIME,
-        gap = TOAST_GAP,
-        visibleToasts = VISIBLE_TOASTS_AMOUNT,
-        swipeDirection: swipeDirectionProp = "auto",
-        swipeThreshold = 50,
-        closeButton = !1,
-        theme: themeProp,
-        reducedMotion: reducedMotionProp,
-        icons
-      } = props,
-      reducedMotion = (0, import_useReducedMotion.useReducedMotion)(reducedMotionProp),
-      [toasts, setToasts] = React.useState([]),
-      [heights, setHeights] = React.useState([]),
-      [expanded, setExpanded] = React.useState(!1),
-      [interacting, setInteracting] = React.useState(!1);
-    React.useEffect(() => import_ToastState.ToastState.subscribe(toast => {
+const ToastRoot = React.forwardRef(function ToastRoot2(props, _ref) {
+  const {
+    children,
+    position = "bottom-right",
+    duration = TOAST_LIFETIME,
+    gap = TOAST_GAP,
+    visibleToasts = VISIBLE_TOASTS_AMOUNT,
+    swipeDirection: swipeDirectionProp = "auto",
+    swipeThreshold = 50,
+    toastHeight = FIXED_TOAST_HEIGHT,
+    closeButton = false,
+    expand = false,
+    theme: themeProp,
+    reducedMotion: reducedMotionProp,
+    native = false,
+    burntOptions,
+    notificationOptions,
+    icons
+  } = props;
+  const reducedMotion = (0, import_useReducedMotion.useReducedMotion)(reducedMotionProp);
+  const [toasts, setToasts] = React.useState([]);
+  const [heights, setHeights] = React.useState({});
+  const [localExpanded, setExpanded] = React.useState(false);
+  const expanded = expand || localExpanded;
+  const [interacting, setInteracting] = React.useState(false);
+  const heightsLockedRef = React.useRef(false);
+  const prevExpandedRef = React.useRef(expanded);
+  React.useLayoutEffect(() => {
+    if (prevExpandedRef.current !== expanded) {
+      heightsLockedRef.current = true;
+      prevExpandedRef.current = expanded;
+    }
+    const timer = setTimeout(() => {
+      heightsLockedRef.current = false;
+    }, 350);
+    return () => clearTimeout(timer);
+  }, [expanded]);
+  const setToastHeight = React.useCallback((toastId, height) => {
+    if (heightsLockedRef.current) return;
+    const rounded = Math.round(height);
+    setHeights(prev => {
+      const existing = prev[toastId];
+      if (existing != null && Math.abs(existing - rounded) <= 2) return prev;
+      return {
+        ...prev,
+        [toastId]: rounded
+      };
+    });
+  }, []);
+  const removeToastHeight = React.useCallback(toastId => {
+    setHeights(prev => {
+      if (!(toastId in prev)) return prev;
+      const next = {
+        ...prev
+      };
+      delete next[toastId];
+      return next;
+    });
+  }, []);
+  const dismissCooldownRef = React.useRef(false);
+  const dismissCooldownTimerRef = React.useRef(null);
+  const triggerDismissCooldown = React.useCallback(() => {
+    dismissCooldownRef.current = true;
+    if (dismissCooldownTimerRef.current) {
+      clearTimeout(dismissCooldownTimerRef.current);
+    }
+    dismissCooldownTimerRef.current = setTimeout(() => {
+      dismissCooldownRef.current = false;
+    }, 800);
+  }, []);
+  const isInDismissCooldown = React.useCallback(() => dismissCooldownRef.current, []);
+  const burntOptionsRef = React.useRef(burntOptions);
+  const notificationOptionsRef = React.useRef(notificationOptions);
+  React.useEffect(() => {
+    burntOptionsRef.current = burntOptions;
+  }, [burntOptions]);
+  React.useEffect(() => {
+    notificationOptionsRef.current = notificationOptions;
+  }, [notificationOptions]);
+  React.useEffect(() => {
+    return import_ToastState.ToastState.subscribe(toast => {
       if (toast.dismiss) {
         setToasts(toasts2 => toasts2.map(t => t.id === toast.id ? {
           ...t,
-          delete: !0
+          delete: true
         } : t));
         return;
       }
+      if (native) {
+        const handled = (0, import_dispatchNativeToast.dispatchNativeToast)(toast, {
+          duration,
+          burntOptions: burntOptionsRef.current,
+          notificationOptions: notificationOptionsRef.current
+        });
+        if (handled) return;
+      }
       setToasts(toasts2 => {
         const idx = toasts2.findIndex(t => t.id === toast.id);
-        return idx !== -1 ? [...toasts2.slice(0, idx), {
-          ...toasts2[idx],
-          ...toast
-        }, ...toasts2.slice(idx + 1)] : [toast, ...toasts2];
+        if (idx !== -1) {
+          return [...toasts2.slice(0, idx), {
+            ...toasts2[idx],
+            ...toast
+          }, ...toasts2.slice(idx + 1)];
+        }
+        return [toast, ...toasts2];
       });
-    }), []), React.useEffect(() => {
-      toasts.length <= 1 && setExpanded(!1);
-    }, [toasts.length]);
-    const removeToast = React.useCallback(toastToRemove => {
-        setToasts(toasts2 => (toasts2.find(t => t.id === toastToRemove.id)?.delete || import_ToastState.ToastState.dismiss(toastToRemove.id), toasts2.filter(({
-          id
-        }) => id !== toastToRemove.id)));
-      }, []),
-      swipeDirection = resolveSwipeDirection(swipeDirectionProp, position),
-      currentTheme = (0, import_core.useThemeName)(),
-      resolvedTheme = themeProp === "system" || !themeProp ? currentTheme?.includes("dark") ? "dark" : "light" : themeProp,
-      contextValue = {
-        toasts,
-        heights,
-        setHeights,
-        expanded,
-        setExpanded,
-        interacting,
-        setInteracting,
-        removeToast,
-        position,
-        duration,
-        gap,
-        visibleToasts,
-        swipeDirection,
-        swipeThreshold,
-        closeButton,
-        reducedMotion,
-        icons
-      };
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToastContext.Provider, {
-      ...contextValue,
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_core.Theme, {
-        name: resolvedTheme,
-        children
-      })
     });
-  }),
-  ToastViewportFrame = (0, import_core.styled)(import_core.View, {
-    name: "ToastViewport",
-    variants: {
-      unstyled: {
-        false: {
-          position: import_constants.isWeb ? "fixed" : "absolute",
-          zIndex: 1e5,
-          pointerEvents: "box-none",
-          maxWidth: "100%",
-          width: 356,
-          minHeight: 1
-        }
+  }, [native, duration]);
+  const prevToastCountRef = React.useRef(toasts.length);
+  React.useEffect(() => {
+    const prevCount = prevToastCountRef.current;
+    prevToastCountRef.current = toasts.length;
+    if (toasts.length <= 1 && !dismissCooldownRef.current) {
+      setExpanded(false);
+    } else if (toasts.length > prevCount && expanded) {
+      setExpanded(false);
+    }
+  }, [toasts.length, expanded]);
+  const removeToast = React.useCallback(toastToRemove => {
+    setToasts(toasts2 => {
+      if (!toasts2.find(t => t.id === toastToRemove.id)?.delete) {
+        import_ToastState.ToastState.dismiss(toastToRemove.id);
+      }
+      return toasts2.filter(({
+        id
+      }) => id !== toastToRemove.id);
+    });
+  }, []);
+  const swipeDirection = resolveSwipeDirection(swipeDirectionProp, position);
+  const currentTheme = (0, import_core.useThemeName)();
+  const resolvedTheme = themeProp === "system" || !themeProp ? currentTheme?.includes("dark") ? "dark" : "light" : themeProp;
+  const contextValue = {
+    toasts,
+    heights,
+    setToastHeight,
+    removeToastHeight,
+    expanded,
+    setExpanded,
+    interacting,
+    setInteracting,
+    triggerDismissCooldown,
+    isInDismissCooldown,
+    removeToast,
+    position,
+    duration,
+    gap,
+    visibleToasts,
+    swipeDirection,
+    swipeThreshold,
+    toastHeight,
+    closeButton,
+    reducedMotion,
+    native,
+    burntOptions,
+    notificationOptions,
+    icons
+  };
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToastContext.Provider, {
+    ...contextValue,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_core.Theme, {
+      name: resolvedTheme,
+      children
+    })
+  });
+});
+const ToastViewportFrame = (0, import_core.styled)(import_core.View, {
+  name: "ToastViewport",
+  variants: {
+    unstyled: {
+      false: {
+        position: import_constants.isWeb ? "fixed" : "absolute",
+        zIndex: 1e5,
+        pointerEvents: "box-none",
+        maxWidth: "100%",
+        ...(import_constants.isWeb && {
+          width: 356
+        }),
+        minHeight: 1
       }
-    },
-    defaultVariants: {
-      unstyled: process.env.TAMAGUI_HEADLESS === "1"
     }
-  }),
-  ToastViewport = ToastViewportFrame.styleable(function (props, ref) {
-    const {
-        offset = VIEWPORT_OFFSET,
-        hotkey = ["altKey", "KeyT"],
-        label = "Notifications",
-        portalToRoot = !0,
-        children,
-        ...rest
-      } = props,
-      ctx = useToastContext(),
-      listRef = React.useRef(null),
-      hoverTimeoutRef = React.useRef(null),
-      hoverCooldownRef = React.useRef(!1),
-      [yPosition, xPosition] = ctx.position.split("-"),
-      offsetStyles = React.useMemo(() => {
-        const styles = {},
-          defaultOffset = typeof offset == "number" ? offset : VIEWPORT_OFFSET,
-          offsetObj = typeof offset == "object" ? offset : {
-            top: defaultOffset,
-            right: defaultOffset,
-            bottom: defaultOffset,
-            left: defaultOffset
-          };
-        return yPosition === "top" ? styles.top = offsetObj.top ?? defaultOffset : styles.bottom = offsetObj.bottom ?? defaultOffset, xPosition === "left" ? styles.left = offsetObj.left ?? defaultOffset : xPosition === "right" ? styles.right = offsetObj.right ?? defaultOffset : (styles.left = "50%", styles.transform = "translateX(-50%)"), styles;
-      }, [offset, yPosition, xPosition]);
-    if (React.useEffect(() => {
-      if (!import_constants.isWeb) return;
-      const handleKeyDown = event => {
-        hotkey.length > 0 && hotkey.every(key => event[key] || event.code === key) && (ctx.setExpanded(!0), listRef.current?.focus()), event.code === "Escape" && ctx.setExpanded(!1);
-      };
-      return document.addEventListener("keydown", handleKeyDown), () => document.removeEventListener("keydown", handleKeyDown);
-    }, [hotkey]), ctx.toasts.length === 0) return null;
-    const hotkeyLabel = hotkey.join("+").replace(/Key/g, "").replace(/Digit/g, ""),
-      content = /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToastViewportFrame, {
-        ref: listRef,
-        "aria-label": `${label} ${hotkeyLabel}`,
-        tabIndex: -1,
-        "aria-live": "polite",
-        style: offsetStyles,
-        "data-y-position": yPosition,
-        "data-x-position": xPosition,
-        onMouseEnter: () => {
-          ctx.toasts.length > 1 && !ctx.interacting && !hoverCooldownRef.current && (hoverTimeoutRef.current = setTimeout(() => ctx.setExpanded(!0), 50));
-        },
-        onMouseLeave: () => {
-          hoverTimeoutRef.current && (clearTimeout(hoverTimeoutRef.current), hoverTimeoutRef.current = null), ctx.interacting || ctx.setExpanded(!1);
-        },
-        onPointerDown: () => {
-          hoverTimeoutRef.current && (clearTimeout(hoverTimeoutRef.current), hoverTimeoutRef.current = null), ctx.setInteracting(!0);
-        },
-        onPointerUp: () => ctx.setInteracting(!1),
-        ...rest,
-        children
-      });
-    return portalToRoot && import_constants.isWeb ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_portal.Portal, {
-      children: content
-    }) : content;
+  },
+  defaultVariants: {
+    unstyled: process.env.TAMAGUI_HEADLESS === "1"
+  }
+});
+const ToastViewport = ToastViewportFrame.styleable(function ToastViewport2(props, ref) {
+  const {
+    offset = VIEWPORT_OFFSET,
+    hotkey = DEFAULT_HOTKEY,
+    label = "Notifications",
+    portalToRoot = true,
+    portalZIndex = Number.MAX_SAFE_INTEGER,
+    children,
+    ...rest
+  } = props;
+  const ctx = useToastContext();
+  const listRef = React.useRef(null);
+  const hoverTimeoutRef = React.useRef(null);
+  const hoverCooldownRef = React.useRef(false);
+  const deferredCollapseRef = React.useRef(null);
+  const mouseInsideRef = React.useRef(false);
+  const [yPosition, xPosition] = ctx.position.split("-");
+  const {
+    insets: safeInsets
+  } = (0, import_core.useConfiguration)();
+  const offsetStyles = React.useMemo(() => {
+    const styles = {};
+    const defaultOffset = typeof offset === "number" ? offset : VIEWPORT_OFFSET;
+    const offsetObj = typeof offset === "object" ? offset : {
+      top: defaultOffset,
+      right: defaultOffset,
+      bottom: defaultOffset,
+      left: defaultOffset
+    };
+    const safeTop = safeInsets?.top ?? 0;
+    const safeBottom = safeInsets?.bottom ?? 0;
+    const topOffset = safeTop > 0 ? safeTop : offsetObj.top ?? defaultOffset;
+    const bottomOffset = safeBottom > 0 ? safeBottom : offsetObj.bottom ?? defaultOffset;
+    if (yPosition === "top") styles.top = topOffset;else styles.bottom = bottomOffset;
+    if (import_constants.isWeb) {
+      if (xPosition === "left") styles.left = offsetObj.left ?? defaultOffset;else if (xPosition === "right") styles.right = offsetObj.right ?? defaultOffset;else {
+        styles.left = "50%";
+        styles.transform = "translateX(-50%)";
+      }
+    } else {
+      styles.left = offsetObj.left ?? defaultOffset;
+      styles.right = offsetObj.right ?? defaultOffset;
+    }
+    return styles;
+  }, [offset, yPosition, xPosition]);
+  React.useEffect(() => {
+    if (!import_constants.isWeb) return;
+    const handleKeyDown = event => {
+      const isHotkeyPressed = hotkey.length > 0 && hotkey.every(key => event[key] || event.code === key);
+      if (isHotkeyPressed) {
+        ctx.setExpanded(true);
+        listRef.current?.focus();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [hotkey]);
+  if (ctx.toasts.length === 0) return null;
+  const hotkeyLabel = hotkey.join("+").replace(/Key/g, "").replace(/Digit/g, "");
+  const content = /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToastViewportFrame, {
+    ref: listRef,
+    "aria-label": `${label} ${hotkeyLabel}`,
+    tabIndex: -1,
+    "aria-live": "polite",
+    style: offsetStyles,
+    "data-y-position": yPosition,
+    "data-x-position": xPosition,
+    ...(import_constants.isWeb ? {
+      onMouseEnter: () => {
+        mouseInsideRef.current = true;
+        if (deferredCollapseRef.current) {
+          clearTimeout(deferredCollapseRef.current);
+          deferredCollapseRef.current = null;
+        }
+        if (ctx.toasts.length > 1 && !ctx.interacting && !hoverCooldownRef.current) {
+          hoverTimeoutRef.current = setTimeout(() => ctx.setExpanded(true), 50);
+        }
+      },
+      onMouseLeave: () => {
+        mouseInsideRef.current = false;
+        if (hoverTimeoutRef.current) {
+          clearTimeout(hoverTimeoutRef.current);
+          hoverTimeoutRef.current = null;
+        }
+        if (!ctx.interacting && !ctx.isInDismissCooldown()) {
+          ctx.setExpanded(false);
+        } else if (ctx.isInDismissCooldown()) {
+          if (deferredCollapseRef.current) {
+            clearTimeout(deferredCollapseRef.current);
+          }
+          deferredCollapseRef.current = setTimeout(() => {
+            deferredCollapseRef.current = null;
+            if (!mouseInsideRef.current) {
+              ctx.setExpanded(false);
+            }
+          }, 1200);
+        }
+      },
+      onPointerDown: () => {
+        if (hoverTimeoutRef.current) {
+          clearTimeout(hoverTimeoutRef.current);
+          hoverTimeoutRef.current = null;
+        }
+        ctx.setInteracting(true);
+      },
+      onPointerUp: () => ctx.setInteracting(false),
+      onPointerCancel: () => ctx.setInteracting(false)
+    } : {
+      onPress: () => {
+        if (ctx.toasts.length > 1) {
+          ctx.setExpanded(prev => !prev);
+        }
+      }
+    }),
+    ...(import_constants.isWeb && {
+      onFocus: event => {
+        if (!event.currentTarget.contains(event.relatedTarget)) {
+          if (ctx.toasts.length > 1) {
+            ctx.setExpanded(true);
+          }
+          ctx.setInteracting(true);
+        }
+      },
+      onBlur: event => {
+        if (!event.currentTarget.contains(event.relatedTarget)) {
+          ctx.setInteracting(false);
+          if (!ctx.isInDismissCooldown()) {
+            ctx.setExpanded(false);
+          }
+        }
+      }
+    }),
+    ...rest,
+    children
   });
+  if (portalToRoot) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_portal.Portal, {
+      zIndex: portalZIndex,
+      children: content
+    });
+  }
+  return content;
+});
 function ToastList({
   renderItem
 }) {
-  const ctx = useToastContext(),
-    getHeightBeforeMe = index => {
-      const heightIndex = ctx.heights.findIndex(h => h.toastId === ctx.toasts[index]?.id);
-      return heightIndex === -1 ? 0 : ctx.heights.reduce((prev, curr, i) => i >= heightIndex ? prev : prev + curr.height, 0);
-    };
+  const ctx = useToastContext();
+  const maxRender = ctx.toasts.length;
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_animate_presence.AnimatePresence, {
-    children: ctx.toasts.map((toast, index) => {
+    children: ctx.toasts.slice(0, maxRender).map((toast, index) => {
       const handleClose = () => {
-          toast.dismissible !== !1 && (toast.onDismiss?.(toast), ctx.removeToast(toast));
-        },
-        itemContextValue = {
-          toast,
-          handleClose
-        };
-      return renderItem ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToastItemContext.Provider, {
+        if (toast.dismissible === false) return;
+        toast.onDismiss?.(toast);
+        ctx.removeToast(toast);
+      };
+      const itemContextValue = {
+        toast,
+        handleClose
+      };
+      if (!renderItem) {
+        return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToastItemContext.Provider, {
+          value: itemContextValue,
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToastItemInner, {
+            toast,
+            index,
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(DefaultToastContent, {
+              toast
+            })
+          })
+        }, toast.id);
+      }
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToastItemContext.Provider, {
         value: itemContextValue,
         children: renderItem({
           toast,
           index,
           handleClose
         })
-      }, toast.id) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToastItemContext.Provider, {
-        value: itemContextValue,
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToastItemInner, {
-          toast,
-          index,
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(DefaultToastContent, {
-            toast
-          })
-        })
       }, toast.id);
     })
   });
@@ -285,17 +451,18 @@ function ToastList({
 function DefaultToastContent({
   toast
 }) {
-  const ctx = useToastContext(),
-    {
-      handleClose
-    } = useToastItemContext(),
-    toastType = toast.type ?? "default",
-    title = typeof toast.title == "function" ? toast.title() : toast.title,
-    description = typeof toast.description == "function" ? toast.description() : toast.description;
+  const ctx = useToastContext();
+  const {
+    handleClose
+  } = useToastItemContext();
+  const toastType = toast.type ?? "default";
+  const dismissible = toast.dismissible !== false;
+  const title = typeof toast.title === "function" ? toast.title() : toast.title;
+  const description = typeof toast.description === "function" ? toast.description() : toast.description;
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_stacks.XStack, {
     alignItems: "flex-start",
     gap: "$3",
-    children: [toastType !== "default" && /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToastIcon, {}), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_stacks.YStack, {
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(ToastIcon, {}), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_stacks.YStack, {
       flex: 1,
       gap: "$1",
       children: [title && /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToastTitle, {
@@ -305,17 +472,18 @@ function DefaultToastContent({
       }), (toast.action || toast.cancel) && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_stacks.XStack, {
         gap: "$2",
         marginTop: "$2",
-        children: [toast.cancel && /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToastActionFrame, {
+        children: [toast.cancel && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ToastItemFrame.ToastActionFrame, {
           backgroundColor: "transparent",
           onPress: e => {
-            toast.cancel?.onClick?.(e), handleClose();
+            toast.cancel?.onClick?.(e);
+            handleClose();
           },
           children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_text.SizableText, {
             size: "$2",
             color: "$color11",
             children: toast.cancel.label
           })
-        }), toast.action && /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToastActionFrame, {
+        }), toast.action && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ToastItemFrame.ToastActionFrame, {
           backgroundColor: "$color12",
           hoverStyle: {
             backgroundColor: "$color11"
@@ -324,7 +492,10 @@ function DefaultToastContent({
             backgroundColor: "$color10"
           },
           onPress: e => {
-            toast.action?.onClick?.(e), e.defaultPrevented || handleClose();
+            toast.action?.onClick?.(e);
+            if (!e.defaultPrevented) {
+              handleClose();
+            }
           },
           children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_text.SizableText, {
             size: "$2",
@@ -334,73 +505,57 @@ function DefaultToastContent({
           })
         })]
       })]
-    }), ctx.closeButton && /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToastClose, {})]
+    }), ctx.closeButton && dismissible && /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToastClose, {})]
   });
 }
-const ToastPositionWrapper = (0, import_core.styled)(import_stacks.YStack, {
-    name: "ToastPositionWrapper",
-    pointerEvents: "auto",
-    position: "absolute",
-    left: 0,
-    right: 0,
-    opacity: 1,
-    scale: 1,
-    y: 0,
-    x: 0
-  }),
-  ToastItemFrame = (0, import_core.styled)(import_stacks.YStack, {
-    name: "ToastItem",
-    userSelect: "none",
-    cursor: "grab",
-    focusable: !0,
-    variants: {
-      unstyled: {
-        false: {
-          backgroundColor: "$background",
-          borderRadius: "$4",
-          paddingHorizontal: "$4",
-          paddingVertical: "$3",
-          borderWidth: 1,
-          borderColor: "$borderColor",
-          shadowColor: "rgba(0, 0, 0, 0.15)",
-          shadowOffset: {
-            width: 0,
-            height: 4
-          },
-          shadowRadius: 12,
-          focusVisibleStyle: {
-            outlineWidth: 2,
-            outlineColor: "$color8",
-            outlineStyle: "solid"
-          }
-        }
-      }
-    },
-    defaultVariants: {
-      unstyled: process.env.TAMAGUI_HEADLESS === "1"
-    }
-  });
 function DragWrapper({
   animatedStyle,
   gestureHandlers,
+  gesture,
   AnimatedView,
   dragRef,
   children
 }) {
-  return import_constants.isWeb ? /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
-    ref: dragRef,
-    style: {
-      flex: 1,
-      display: "flex",
-      flexDirection: "column",
-      userSelect: "none",
-      WebkitUserSelect: "none",
-      touchAction: "none",
-      cursor: "grab"
-    },
-    ...gestureHandlers,
-    children
-  }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(AnimatedView, {
+  if (import_constants.isWeb) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+      ref: dragRef,
+      style: {
+        flex: 1,
+        display: "flex",
+        flexDirection: "column",
+        userSelect: "none",
+        WebkitUserSelect: "none",
+        touchAction: "none",
+        cursor: "default"
+      },
+      ...gestureHandlers,
+      children
+    });
+  }
+  if (gesture) {
+    const gh = (0, import_native.getGestureHandler)();
+    const GestureDetector = gh.state.GestureDetector;
+    if (GestureDetector) {
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(GestureDetector, {
+        gesture,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_core.View, {
+          style: {
+            flex: 1
+          },
+          ...{
+            collapsable: false
+          },
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(AnimatedView, {
+            style: [{
+              flex: 1
+            }, animatedStyle],
+            children
+          })
+        })
+      });
+    }
+  }
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(AnimatedView, {
     style: [{
       flex: 1
     }, animatedStyle],
@@ -408,318 +563,351 @@ function DragWrapper({
     children
   });
 }
-const ToastItemInner = ToastItemFrame.styleable(function (props, ref) {
-    const {
-        toast,
-        index,
-        children,
-        ...rest
-      } = props,
-      ctx = useToastContext(),
-      [mounted, setMounted] = React.useState(!1),
-      [removed, setRemoved] = React.useState(!1),
-      [swipeOut, setSwipeOut] = React.useState(!1),
-      closeTimerRef = React.useRef(null),
-      closeTimerStartRef = React.useRef(0),
-      lastPauseTimeRef = React.useRef(0),
-      remainingTimeRef = React.useRef(toast.duration ?? ctx.duration),
-      isFront = index === 0,
-      isVisible = index < ctx.visibleToasts,
-      toastType = toast.type ?? "default",
-      dismissible = toast.dismissible !== !1,
-      duration = toast.duration ?? ctx.duration,
-      [yPosition] = ctx.position.split("-"),
-      isTop = yPosition === "top",
-      heightIndex = React.useMemo(() => ctx.heights.findIndex(h => h.toastId === toast.id) || 0, [ctx.heights, toast.id]),
-      toastsHeightBefore = React.useMemo(() => ctx.heights.reduce((prev, curr, i) => i >= heightIndex ? prev : prev + curr.height, 0), [ctx.heights, heightIndex]),
-      startTimer = React.useCallback(() => {
-        duration === Number.POSITIVE_INFINITY || toastType === "loading" || (closeTimerStartRef.current = Date.now(), closeTimerRef.current = setTimeout(() => {
-          toast.onAutoClose?.(toast), setRemoved(!0), setTimeout(() => ctx.removeToast(toast), TIME_BEFORE_UNMOUNT);
-        }, remainingTimeRef.current));
-      }, [duration, toastType, toast, ctx.removeToast]),
-      pauseTimer = (0, import_core.useEvent)(() => {
-        if (closeTimerRef.current && clearTimeout(closeTimerRef.current), lastPauseTimeRef.current < closeTimerStartRef.current) {
-          const elapsed = Date.now() - closeTimerStartRef.current;
-          remainingTimeRef.current = Math.max(0, remainingTimeRef.current - elapsed);
-        }
-        lastPauseTimeRef.current = Date.now();
-      }),
-      resumeTimer = (0, import_core.useEvent)(() => {
-        startTimer();
+const ToastItemInner = import_ToastItemFrame.ToastItemFrame.styleable(function ToastItem(props, ref) {
+  const {
+    toast,
+    index,
+    children,
+    ...rest
+  } = props;
+  const ctx = useToastContext();
+  const [mounted, setMounted] = React.useState(false);
+  const [removed, setRemoved] = React.useState(false);
+  const [swipeOut, setSwipeOut] = React.useState(false);
+  const [offsetBeforeRemove, setOffsetBeforeRemove] = React.useState(0);
+  const swipeExitYRef = React.useRef(null);
+  const closeTimerRef = React.useRef(null);
+  const closeTimerStartRef = React.useRef(0);
+  const lastPauseTimeRef = React.useRef(0);
+  const remainingTimeRef = React.useRef(toast.duration ?? ctx.duration);
+  const isFront = index === 0;
+  const isVisible = index < ctx.visibleToasts;
+  const toastType = toast.type ?? "default";
+  const dismissible = toast.dismissible !== false;
+  const duration = toast.duration ?? ctx.duration;
+  const [yPosition] = ctx.position.split("-");
+  const isTop = yPosition === "top";
+  const expandedOffset = import_constants.isWeb ? (() => {
+    let totalHeight = 0;
+    let activeCount = 0;
+    for (let i = 0; i < index; i++) {
+      const toastId = ctx.toasts[i]?.id;
+      if (toastId == null) continue;
+      const h = ctx.heights[toastId];
+      if (h === 0) continue;
+      totalHeight += h ?? ctx.toastHeight;
+      activeCount++;
+    }
+    return totalHeight + activeCount * ctx.gap;
+  })() : index * (ctx.toastHeight + ctx.gap);
+  const expandedOffsetRef = React.useRef(expandedOffset);
+  expandedOffsetRef.current = expandedOffset;
+  const isExpandedRef = React.useRef(ctx.expanded);
+  isExpandedRef.current = ctx.expanded;
+  const startTimer = React.useCallback(() => {
+    if (duration === Number.POSITIVE_INFINITY || toastType === "loading") return;
+    closeTimerStartRef.current = Date.now();
+    closeTimerRef.current = setTimeout(() => {
+      toast.onAutoClose?.(toast);
+      setRemoved(true);
+      setTimeout(() => ctx.removeToast(toast), TIME_BEFORE_UNMOUNT);
+    }, remainingTimeRef.current);
+  }, [duration, toastType, toast, ctx.removeToast]);
+  const pauseTimer = (0, import_core.useEvent)(() => {
+    if (closeTimerRef.current) {
+      clearTimeout(closeTimerRef.current);
+    }
+    if (lastPauseTimeRef.current < closeTimerStartRef.current) {
+      const elapsed = Date.now() - closeTimerStartRef.current;
+      remainingTimeRef.current = Math.max(0, remainingTimeRef.current - elapsed);
+    }
+    lastPauseTimeRef.current = Date.now();
+  });
+  const resumeTimer = (0, import_core.useEvent)(() => {
+    if (ctx.expanded || ctx.interacting) return;
+    remainingTimeRef.current = duration;
+    startTimer();
+  });
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
+  React.useEffect(() => {
+    if (toast.delete) {
+      setRemoved(true);
+      if (isExpandedRef.current) {
+        setOffsetBeforeRemove(expandedOffsetRef.current);
+      }
+      setTimeout(() => ctx.removeToast(toast), TIME_BEFORE_UNMOUNT);
+    }
+  }, [toast.delete, toast, ctx.removeToast]);
+  React.useEffect(() => {
+    if (ctx.expanded || ctx.interacting) {
+      pauseTimer();
+    } else {
+      startTimer();
+    }
+    return () => {
+      if (closeTimerRef.current) clearTimeout(closeTimerRef.current);
+    };
+  }, [ctx.expanded, ctx.interacting, startTimer]);
+  React.useEffect(() => {
+    remainingTimeRef.current = duration;
+  }, [duration]);
+  const {
+    setDragOffset,
+    springBack,
+    animateOut,
+    animatedStyle,
+    AnimatedView,
+    dragRef
+  } = (0, import_useToastAnimations.useToastAnimations)({
+    reducedMotion: ctx.reducedMotion,
+    swipeAxis: ctx.swipeDirection === "up" || ctx.swipeDirection === "down" || ctx.swipeDirection === "vertical" ? "vertical" : "horizontal"
+  });
+  const {
+    isDragging,
+    gestureHandlers,
+    gesture
+  } = (0, import_useAnimatedDragGesture.useAnimatedDragGesture)({
+    direction: ctx.swipeDirection,
+    threshold: ctx.swipeThreshold,
+    disabled: !dismissible || toastType === "loading",
+    expanded: ctx.expanded,
+    onDragStart: pauseTimer,
+    onDragMove: setDragOffset,
+    onDismiss: (exitDirection, velocity) => {
+      ctx.triggerDismissCooldown();
+      setSwipeOut(true);
+      toast.onDismiss?.(toast);
+      swipeExitYRef.current = isExpandedRef.current ? isTop ? expandedOffsetRef.current : -expandedOffsetRef.current : isFront ? 0 : isTop ? ctx.gap * index : -ctx.gap * index;
+      setRemoved(true);
+      ctx.removeToast(toast);
+      animateOut(exitDirection, velocity);
+    },
+    onCancel: () => {
+      springBack(() => {
+        resumeTimer();
       });
-    React.useEffect(() => {
-      setMounted(!0);
-    }, []), React.useEffect(() => {
-      toast.delete && (setRemoved(!0), setTimeout(() => {
-        ctx.removeToast(toast);
-      }, TIME_BEFORE_UNMOUNT));
-    }, [toast.delete, toast, ctx.removeToast]), React.useEffect(() => (ctx.expanded || ctx.interacting ? pauseTimer() : startTimer(), () => {
-      closeTimerRef.current && clearTimeout(closeTimerRef.current);
-    }), [ctx.expanded, ctx.interacting, startTimer]), React.useEffect(() => {
-      remainingTimeRef.current = duration;
-    }, [duration]);
+    }
+  });
+  const handleLayout = React.useCallback(event => {
+    if (!import_constants.isWeb) return;
+    if (removed) return;
+    if (!ctx.expanded && index !== 0) return;
     const {
-        setDragOffset,
-        springBack,
-        animateOut,
-        animatedStyle,
-        AnimatedView,
-        dragRef
-      } = (0, import_useToastAnimations.useToastAnimations)({
-        reducedMotion: ctx.reducedMotion
-      }),
-      {
-        isDragging,
-        gestureHandlers
-      } = (0, import_useAnimatedDragGesture.useAnimatedDragGesture)({
-        direction: ctx.swipeDirection,
-        threshold: ctx.swipeThreshold,
-        disabled: !dismissible || toastType === "loading",
-        expanded: ctx.expanded,
-        onDragStart: pauseTimer,
-        onDragMove: setDragOffset,
-        onDismiss: (exitDirection, velocity) => {
-          setSwipeOut(!0), toast.onDismiss?.(toast), setRemoved(!0), ctx.setHeights(prev => prev.filter(h => h.toastId !== toast.id)), animateOut(exitDirection, velocity, () => ctx.removeToast(toast));
-        },
-        onCancel: () => {
-          springBack(() => {
-            resumeTimer();
-          });
-        }
-      }),
-      handleLayout = React.useCallback(event => {
-        const {
-          height
-        } = event.nativeEvent.layout;
-        ctx.setHeights(prev => prev.find(h => h.toastId === toast.id) ? prev.map(h => h.toastId === toast.id ? {
-          ...h,
-          height
-        } : h) : [{
-          toastId: toast.id,
-          height
-        }, ...prev]);
-      }, [toast.id]);
-    React.useEffect(() => () => {
-      ctx.setHeights(prev => prev.filter(h => h.toastId !== toast.id));
-    }, [toast.id]);
-    const handleClose = React.useCallback(() => {
-        dismissible && (toast.onDismiss?.(toast), setRemoved(!0), setTimeout(() => ctx.removeToast(toast), TIME_BEFORE_UNMOUNT));
-      }, [dismissible, toast, ctx.removeToast]),
-      frontToastHeight = ctx.heights.length > 0 ? ctx.heights[0]?.height ?? 55 : 55,
-      stackScale = !ctx.expanded && !isFront ? 1 - index * 0.05 : 1,
-      expandedOffset = toastsHeightBefore + index * ctx.gap,
-      peekVisible = 10,
-      stackY = ctx.expanded ? isTop ? expandedOffset : -expandedOffset : isFront ? 0 : isTop ? peekVisible * index : -peekVisible * index,
-      computedOpacity = index >= ctx.visibleToasts ? 0 : !ctx.expanded && index === ctx.visibleToasts - 1 ? 0.5 : 1,
-      computedZIndex = removed ? 0 : ctx.visibleToasts - index + 1,
-      computedHeight = !ctx.expanded && !isFront ? frontToastHeight : void 0,
-      computedPointerEvents = index >= ctx.visibleToasts ? "none" : "auto",
-      gapFillerHeight = ctx.expanded ? ctx.gap + 1 : 0,
-      dataAttributes = {
-        "data-mounted": mounted ? "true" : "false",
-        "data-removed": removed ? "true" : "false",
-        "data-swipe-out": swipeOut ? "true" : "false",
-        "data-visible": isVisible ? "true" : "false",
-        "data-front": isFront ? "true" : "false",
-        "data-index": String(index),
-        "data-type": toastType,
-        "data-expanded": ctx.expanded ? "true" : "false"
-      };
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToastPositionWrapper, {
-      ref,
-      ...dataAttributes,
-      onLayout: handleLayout,
-      transition: isDragging || ctx.reducedMotion ? void 0 : "200ms",
-      y: stackY,
-      scale: stackScale,
-      opacity: computedOpacity,
-      zIndex: computedZIndex,
-      height: computedHeight,
-      overflow: computedHeight ? "hidden" : void 0,
-      pointerEvents: computedPointerEvents,
-      top: isTop ? 0 : void 0,
-      bottom: isTop ? void 0 : 0,
-      ...(import_constants.isWeb && !isFront && !ctx.expanded && {
-        style: {
-          transformOrigin: isTop ? "top center" : "bottom center"
-        }
-      }),
-      enterStyle: ctx.reducedMotion ? {
-        opacity: 0
-      } : {
-        opacity: 0,
-        y: isTop ? -10 : 10,
-        scale: 0.95
-      },
-      exitStyle: ctx.reducedMotion ? {
-        opacity: 0
-      } : {
-        opacity: 0,
-        x: 0,
-        y: swipeOut ? 0 : isTop ? -10 : 10,
-        scale: swipeOut ? 1 : 0.95
-      },
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(DragWrapper, {
-        animatedStyle,
-        gestureHandlers,
-        AnimatedView,
-        dragRef,
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(ToastItemFrame, {
-          role: "status",
-          "aria-live": "polite",
-          "aria-atomic": !0,
-          tabIndex: 0,
-          ...(import_constants.isWeb && {
-            onKeyDown: event => {
-              event.key === "Escape" && dismissible && handleClose();
-            }
-          }),
-          ...rest,
-          children: [ctx.expanded && gapFillerHeight > 0 && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_core.View, {
-            position: "absolute",
-            left: 0,
-            right: 0,
-            height: gapFillerHeight,
-            pointerEvents: "auto",
-            ...(isTop ? {
-              top: "100%"
-            } : {
-              bottom: "100%"
-            })
-          }), children]
-        })
-      })
-    });
-  }),
-  ToastTitle = (0, import_core.styled)(import_text.SizableText, {
-    name: "ToastTitle",
-    variants: {
-      unstyled: {
-        false: {
-          color: "$color",
-          fontWeight: "600",
-          size: "$4"
-        }
+      height
+    } = event.nativeEvent.layout;
+    ctx.setToastHeight(toast.id, height);
+  }, [toast.id, ctx.setToastHeight, index, ctx.expanded, removed]);
+  React.useEffect(() => {
+    if (!import_constants.isWeb) return;
+    return () => {
+      ctx.removeToastHeight(toast.id);
+    };
+  }, [toast.id, ctx.removeToastHeight]);
+  const handleClose = React.useCallback(() => {
+    if (!dismissible) return;
+    ctx.triggerDismissCooldown();
+    toast.onDismiss?.(toast);
+    setRemoved(true);
+    if (isExpandedRef.current) {
+      setOffsetBeforeRemove(expandedOffsetRef.current);
+    }
+    setTimeout(() => ctx.removeToast(toast), TIME_BEFORE_UNMOUNT);
+  }, [dismissible, toast, ctx.removeToast, ctx.triggerDismissCooldown]);
+  const itemContextValue = React.useMemo(() => ({
+    toast,
+    handleClose
+  }), [toast, handleClose]);
+  let frontToastHeight = -1;
+  if (import_constants.isWeb) {
+    for (const t of ctx.toasts) {
+      const h = ctx.heights[t.id];
+      if (h != null && h > 0) {
+        frontToastHeight = h;
+        break;
       }
-    },
-    defaultVariants: {
-      unstyled: process.env.TAMAGUI_HEADLESS === "1"
     }
-  }),
-  ToastDescription = (0, import_core.styled)(import_text.SizableText, {
-    name: "ToastDescription",
-    variants: {
-      unstyled: {
-        false: {
-          color: "$color11",
-          size: "$2"
-        }
+  }
+  const stackScale = !ctx.expanded && !isFront ? 1 - index * 0.05 : 1;
+  const activeExpandedOffset = removed ? offsetBeforeRemove : expandedOffset;
+  const stackY = ctx.expanded ? isTop ? activeExpandedOffset : -activeExpandedOffset : isFront ? 0 : isTop ? ctx.gap * index : -ctx.gap * index;
+  const computedOpacity = removed && !swipeOut ? 0 : index >= ctx.visibleToasts ? 0 : 1;
+  const computedZIndex = removed ? 0 : ctx.visibleToasts - index + 1;
+  const computedHeight = import_constants.isWeb ? ctx.expanded ? ctx.heights[toast.id] || void 0 : !isFront && frontToastHeight > 0 ? frontToastHeight : void 0 : void 0;
+  const computedPointerEvents = index >= ctx.visibleToasts ? "none" : "auto";
+  const gapFillerHeight = ctx.expanded ? ctx.gap + 1 : 0;
+  const dataAttributes = {
+    "data-mounted": mounted ? "true" : "false",
+    "data-removed": removed ? "true" : "false",
+    "data-swipe-out": swipeOut ? "true" : "false",
+    "data-visible": isVisible ? "true" : "false",
+    "data-front": isFront ? "true" : "false",
+    "data-index": String(index),
+    "data-type": toastType,
+    "data-expanded": ctx.expanded ? "true" : "false"
+  };
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ToastItemFrame.ToastPositionWrapper, {
+    ref,
+    testID: rest.testID,
+    accessibilityLabel: rest.accessibilityLabel,
+    ...dataAttributes,
+    transition: isDragging || ctx.reducedMotion ? void 0 : removed ? "200ms" : "400ms",
+    animateOnly: import_constants.isWeb ? ["transform", "opacity", "height"] : ["transform", "opacity"],
+    y: stackY,
+    scale: stackScale,
+    opacity: computedOpacity,
+    zIndex: computedZIndex,
+    height: computedHeight,
+    overflow: "visible",
+    pointerEvents: computedPointerEvents,
+    top: isTop ? 0 : void 0,
+    bottom: isTop ? void 0 : 0,
+    ...(import_constants.isWeb && !isFront && {
+      style: {
+        transformOrigin: isTop ? "top center" : "bottom center"
       }
+    }),
+    enterStyle: ctx.reducedMotion ? {
+      opacity: 0
+    } : {
+      opacity: 0,
+      y: isTop ? -80 : 80
     },
-    defaultVariants: {
-      unstyled: process.env.TAMAGUI_HEADLESS === "1"
-    }
-  }),
-  ToastCloseFrame = (0, import_core.styled)(import_stacks.XStack, {
-    name: "ToastClose",
-    render: "button",
-    alignItems: "center",
-    justifyContent: "center",
-    cursor: "pointer",
-    variants: {
-      unstyled: {
-        false: {
-          width: 20,
-          height: 20,
-          borderRadius: "$10",
-          backgroundColor: "$color5",
-          hoverStyle: {
-            backgroundColor: "$color6"
-          },
-          pressStyle: {
-            backgroundColor: "$color7"
+    exitStyle: ctx.reducedMotion ? {
+      opacity: 0
+    } : swipeOut ? {
+      opacity: 0,
+      y: swipeExitYRef.current ?? stackY,
+      scale: stackScale
+    } : {
+      opacity: 0,
+      y: stackY,
+      scale: stackScale
+    },
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(DragWrapper, {
+      animatedStyle,
+      gestureHandlers,
+      gesture,
+      AnimatedView,
+      dragRef,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_ToastItemFrame.ToastItemFrame, {
+        role: "status",
+        "aria-live": "polite",
+        "aria-atomic": true,
+        tabIndex: 0,
+        onLayout: handleLayout,
+        ...(import_constants.isWeb && {
+          onKeyDown: event => {
+            if (event.key === "Escape" && dismissible) {
+              const current = event.currentTarget;
+              const container = current.closest("[aria-label]");
+              if (container) {
+                const focusables = container.querySelectorAll('[tabindex="0"]');
+                const arr = Array.from(focusables);
+                const idx = arr.indexOf(current);
+                const next = arr[idx + 1] || arr[idx - 1];
+                next?.focus();
+              }
+              handleClose();
+            }
           }
-        }
+        }),
+        ...rest,
+        children: [ctx.expanded && gapFillerHeight > 0 && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_core.View, {
+          position: "absolute",
+          left: 0,
+          right: 0,
+          height: gapFillerHeight,
+          pointerEvents: "auto",
+          ...(isTop ? {
+            top: "100%"
+          } : {
+            bottom: "100%"
+          })
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToastItemContext.Provider, {
+          value: itemContextValue,
+          children
+        })]
+      })
+    })
+  });
+});
+const ToastTitle = (0, import_core.styled)(import_text.SizableText, {
+  name: "ToastTitle",
+  variants: {
+    unstyled: {
+      false: {
+        color: "$color",
+        fontWeight: "600",
+        size: "$4"
       }
-    },
-    defaultVariants: {
-      unstyled: process.env.TAMAGUI_HEADLESS === "1"
     }
-  }),
-  ToastClose = ToastCloseFrame.styleable(function (props, ref) {
-    let handleClose;
-    try {
-      handleClose = useToastItemContext().handleClose;
-    } catch {}
-    const ctx = useToastContext();
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToastCloseFrame, {
-      ref,
-      "aria-label": "Close toast",
-      onPress: handleClose,
-      ...props,
-      children: props.children ?? ctx.icons?.close ?? /* @__PURE__ */(0, import_jsx_runtime.jsx)(DefaultCloseIcon, {})
-    });
-  }),
-  ToastActionFrame = (0, import_core.styled)(import_stacks.XStack, {
-    name: "ToastAction",
-    render: "button",
-    alignItems: "center",
-    justifyContent: "center",
-    cursor: "pointer",
-    variants: {
-      unstyled: {
-        false: {
-          borderRadius: "$2",
-          paddingHorizontal: "$2",
-          height: 24,
-          backgroundColor: "$color5",
-          hoverStyle: {
-            backgroundColor: "$color6"
-          },
-          pressStyle: {
-            backgroundColor: "$color7"
-          }
-        }
+  },
+  defaultVariants: {
+    unstyled: process.env.TAMAGUI_HEADLESS === "1"
+  }
+});
+const ToastDescription = (0, import_core.styled)(import_text.SizableText, {
+  name: "ToastDescription",
+  variants: {
+    unstyled: {
+      false: {
+        color: "$color11",
+        size: "$2"
       }
-    },
-    defaultVariants: {
-      unstyled: process.env.TAMAGUI_HEADLESS === "1"
     }
-  }),
-  ToastAction = ToastActionFrame.styleable(function (props, ref) {
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToastActionFrame, {
-      ref,
-      ...props
-    });
+  },
+  defaultVariants: {
+    unstyled: process.env.TAMAGUI_HEADLESS === "1"
+  }
+});
+const ToastClose = import_ToastItemFrame.ToastCloseFrame.styleable(function ToastClose2(props, ref) {
+  let handleClose;
+  try {
+    const itemCtx = useToastItemContext();
+    handleClose = itemCtx.handleClose;
+  } catch {}
+  const ctx = useToastContext();
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ToastItemFrame.ToastCloseFrame, {
+    ref,
+    "aria-label": "Close toast",
+    onPress: handleClose,
+    ...props,
+    children: props.children ?? ctx.icons?.close ?? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ToastItemFrame.DefaultCloseIcon, {})
+  });
+});
+const ToastAction = import_ToastItemFrame.ToastActionFrame.styleable(function ToastAction2(props, ref) {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ToastItemFrame.ToastActionFrame, {
+    ref,
+    ...props
   });
+});
 function ToastIcon(props) {
   const ctx = useToastContext();
   let toast;
   try {
-    toast = useToastItemContext().toast;
+    const itemCtx = useToastItemContext();
+    toast = itemCtx.toast;
   } catch {
     return null;
   }
   if (!toast) return null;
-  if (toast.icon !== void 0) return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_core.View, {
-    flexShrink: 0,
-    marginTop: "$0.5",
-    children: toast.icon
-  });
-  const toastType = toast.type ?? "default",
-    icon = {
-      default: null,
-      success: ctx.icons?.success ?? /* @__PURE__ */(0, import_jsx_runtime.jsx)(DefaultSuccessIcon, {}),
-      error: ctx.icons?.error ?? /* @__PURE__ */(0, import_jsx_runtime.jsx)(DefaultErrorIcon, {}),
-      warning: ctx.icons?.warning ?? /* @__PURE__ */(0, import_jsx_runtime.jsx)(DefaultWarningIcon, {}),
-      info: ctx.icons?.info ?? /* @__PURE__ */(0, import_jsx_runtime.jsx)(DefaultInfoIcon, {}),
-      loading: ctx.icons?.loading ?? /* @__PURE__ */(0, import_jsx_runtime.jsx)(DefaultLoadingIcon, {})
-    }[toastType];
-  return icon ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_core.View, {
+  if (toast.icon !== void 0) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_core.View, {
+      flexShrink: 0,
+      marginTop: "$0.5",
+      children: toast.icon
+    });
+  }
+  const toastType = toast.type ?? "default";
+  const icon = ctx.icons?.[toastType] ?? null;
+  if (!icon) return null;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_core.View, {
     flexShrink: 0,
     marginTop: "$0.5",
     children: icon
-  }) : null;
+  });
 }
 function useToasts() {
   const ctx = useToastContext();
@@ -732,6 +920,7 @@ function useToasts() {
 function useToastItem() {
   return useToastItemContext();
 }
+ToastRoot.displayName = "Toast";
 const Toast = (0, import_helpers.withStaticProperties)(ToastRoot, {
   Viewport: ToastViewport,
   List: ToastList,