@tamagui/toast 1.144.2 → 1.144.4

package/dist/cjs/ToastComposable.cjs

@@ -0,0 +1,891 @@
+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 __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, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    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);
+var ToastComposable_exports = {};
+__export(ToastComposable_exports, {
+  Toast: () => Toast,
+  useToastItem: () => useToastItem,
+  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);
+function useToastItemContext() {
+  const ctx = React.useContext(ToastItemContext);
+  if (!ctx) throw new Error("useToastItemContext must be used within Toast.Item or Toast.List");
+  return ctx;
+}
+const ICON_SIZE = 20,
+  DefaultSuccessIcon = () => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_core.View, {
+    width: ICON_SIZE,
+    height: ICON_SIZE,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      width: ICON_SIZE,
+      height: ICON_SIZE,
+      fill: "none",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)("circle", {
+        cx: "12",
+        cy: "12",
+        r: "10",
+        fill: "var(--green5)"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("path", {
+        d: "M8 12.5l2.5 2.5 5.5-5.5",
+        stroke: "var(--green10)",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      })]
+    })
+  }),
+  DefaultErrorIcon = () => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_core.View, {
+    width: ICON_SIZE,
+    height: ICON_SIZE,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      width: ICON_SIZE,
+      height: ICON_SIZE,
+      fill: "none",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)("circle", {
+        cx: "12",
+        cy: "12",
+        r: "10",
+        fill: "var(--red5)"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("path", {
+        d: "M15 9l-6 6M9 9l6 6",
+        stroke: "var(--red10)",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      })]
+    })
+  }),
+  DefaultWarningIcon = () => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_core.View, {
+    width: ICON_SIZE,
+    height: ICON_SIZE,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      width: ICON_SIZE,
+      height: ICON_SIZE,
+      fill: "none",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)("path", {
+        d: "M12 3L2 21h20L12 3z",
+        fill: "var(--yellow5)",
+        stroke: "var(--yellow8)",
+        strokeWidth: "1.5",
+        strokeLinejoin: "round"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("path", {
+        d: "M12 10v4",
+        stroke: "var(--yellow11)",
+        strokeWidth: "2",
+        strokeLinecap: "round"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("circle", {
+        cx: "12",
+        cy: "17",
+        r: "1",
+        fill: "var(--yellow11)"
+      })]
+    })
+  }),
+  DefaultInfoIcon = () => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_core.View, {
+    width: ICON_SIZE,
+    height: ICON_SIZE,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      width: ICON_SIZE,
+      height: ICON_SIZE,
+      fill: "none",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)("circle", {
+        cx: "12",
+        cy: "12",
+        r: "10",
+        fill: "var(--blue5)"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("path", {
+        d: "M12 11v5",
+        stroke: "var(--blue10)",
+        strokeWidth: "2",
+        strokeLinecap: "round"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("circle", {
+        cx: "12",
+        cy: "8",
+        r: "1",
+        fill: "var(--blue10)"
+      })]
+    })
+  }),
+  spinKeyframes = import_constants.isWeb ? `
+@keyframes toast-spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+` : "";
+if (import_constants.isWeb && typeof document < "u") {
+  const styleId = "tamagui-toast-spin";
+  if (!document.getElementById(styleId)) {
+    const style = document.createElement("style");
+    style.id = styleId, style.textContent = spinKeyframes, document.head.appendChild(style);
+  }
+}
+const DefaultLoadingIcon = () => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_core.View, {
+    width: ICON_SIZE,
+    height: ICON_SIZE,
+    ...(import_constants.isWeb && {
+      style: {
+        animation: "toast-spin 1s linear infinite"
+      }
+    }),
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      width: ICON_SIZE,
+      height: ICON_SIZE,
+      fill: "none",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)("circle", {
+        cx: "12",
+        cy: "12",
+        r: "10",
+        stroke: "var(--color5)",
+        strokeWidth: "2.5"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("path", {
+        d: "M12 2a10 10 0 0 1 10 10",
+        stroke: "var(--color11)",
+        strokeWidth: "2.5",
+        strokeLinecap: "round"
+      })]
+    })
+  }),
+  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";
+}
+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),
+      setToastHeight = React.useCallback((toastId, height) => {
+        setHeights(prev => ({
+          ...prev,
+          [toastId]: height
+        }));
+      }, []),
+      removeToastHeight = React.useCallback(toastId => {
+        setHeights(prev => {
+          const next = {
+            ...prev
+          };
+          return delete next[toastId], next;
+        });
+      }, []),
+      dismissCooldownRef = React.useRef(!1),
+      dismissCooldownTimerRef = React.useRef(null),
+      triggerDismissCooldown = () => {
+        dismissCooldownRef.current = !0, dismissCooldownTimerRef.current && clearTimeout(dismissCooldownTimerRef.current), dismissCooldownTimerRef.current = setTimeout(() => {
+          dismissCooldownRef.current = !1;
+        }, 800);
+      },
+      isInDismissCooldown = () => dismissCooldownRef.current;
+    React.useEffect(() => import_ToastState.ToastState.subscribe(toast => {
+      if (toast.dismiss) {
+        setToasts(toasts2 => toasts2.map(t => t.id === toast.id ? {
+          ...t,
+          delete: !0
+        } : t));
+        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];
+      });
+    }), []), React.useEffect(() => {
+      toasts.length <= 1 && !dismissCooldownRef.current && 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,
+        setToastHeight,
+        removeToastHeight,
+        expanded,
+        setExpanded,
+        interacting,
+        setInteracting,
+        triggerDismissCooldown,
+        isInDismissCooldown,
+        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
+        }
+      }
+    },
+    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.isInDismissCooldown() && ctx.setExpanded(!1);
+        },
+        onPointerDown: () => {
+          hoverTimeoutRef.current && (clearTimeout(hoverTimeoutRef.current), hoverTimeoutRef.current = null), ctx.setInteracting(!0);
+        },
+        onPointerUp: () => ctx.setInteracting(!1),
+        onPointerCancel: () => ctx.setInteracting(!1),
+        ...rest,
+        children
+      });
+    return portalToRoot && import_constants.isWeb ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_portal.Portal, {
+      children: content
+    }) : content;
+  });
+function ToastList({
+  renderItem
+}) {
+  const ctx = useToastContext();
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_animate_presence.AnimatePresence, {
+    children: ctx.toasts.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, {
+        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);
+    })
+  });
+}
+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;
+  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, {
+      flex: 1,
+      gap: "$1",
+      children: [title && /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToastTitle, {
+        children: title
+      }), description && /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToastDescription, {
+        children: description
+      }), (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, {
+          backgroundColor: "transparent",
+          onPress: e => {
+            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, {
+          backgroundColor: "$color12",
+          hoverStyle: {
+            backgroundColor: "$color11"
+          },
+          pressStyle: {
+            backgroundColor: "$color10"
+          },
+          onPress: e => {
+            toast.action?.onClick?.(e), e.defaultPrevented || handleClose();
+          },
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_text.SizableText, {
+            size: "$2",
+            fontWeight: "600",
+            color: "$background",
+            children: toast.action.label
+          })
+        })]
+      })]
+    }), ctx.closeButton && /* @__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,
+  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, {
+    style: [{
+      flex: 1
+    }, animatedStyle],
+    ...gestureHandlers,
+    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",
+      toastsHeightBefore = React.useMemo(() => {
+        let total = 0;
+        for (let i = 0; i < index; i++) {
+          const toastId = ctx.toasts[i]?.id;
+          toastId != null && (total += ctx.heights[toastId] ?? 55);
+        }
+        return total;
+      }, [ctx.toasts, ctx.heights, index]),
+      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();
+      });
+    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 {
+        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) => {
+          ctx.triggerDismissCooldown(), setSwipeOut(!0), toast.onDismiss?.(toast), setRemoved(!0), animateOut(exitDirection, velocity, () => {
+            ctx.removeToast(toast);
+          });
+        },
+        onCancel: () => {
+          springBack(() => {
+            resumeTimer();
+          });
+        }
+      }),
+      handleLayout = React.useCallback(event => {
+        const {
+          height
+        } = event.nativeEvent.layout;
+        ctx.setToastHeight(toast.id, height);
+      }, [toast.id, ctx.setToastHeight]);
+    React.useEffect(() => () => {
+      ctx.removeToastHeight(toast.id);
+    }, [toast.id, ctx.removeToastHeight]);
+    const handleClose = React.useCallback(() => {
+        dismissible && (toast.onDismiss?.(toast), setRemoved(!0), setTimeout(() => ctx.removeToast(toast), TIME_BEFORE_UNMOUNT));
+      }, [dismissible, toast, ctx.removeToast]),
+      frontToastId = ctx.toasts[0]?.id,
+      frontToastHeight = frontToastId != null ? ctx.heights[frontToastId] ?? 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 = removed || 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
+      } : swipeOut ? {
+        opacity: 0,
+        x: 0,
+        y: 0,
+        scale: 1
+      } : {
+        opacity: 0,
+        y: stackY,
+        scale: stackScale
+      },
+      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"
+        }
+      }
+    },
+    defaultVariants: {
+      unstyled: process.env.TAMAGUI_HEADLESS === "1"
+    }
+  }),
+  ToastDescription = (0, import_core.styled)(import_text.SizableText, {
+    name: "ToastDescription",
+    variants: {
+      unstyled: {
+        false: {
+          color: "$color11",
+          size: "$2"
+        }
+      }
+    },
+    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"
+          }
+        }
+      }
+    },
+    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"
+    }
+  }),
+  ToastAction = ToastActionFrame.styleable(function (props, ref) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToastActionFrame, {
+      ref,
+      ...props
+    });
+  });
+function ToastIcon(props) {
+  const ctx = useToastContext();
+  let toast;
+  try {
+    toast = useToastItemContext().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, {
+    flexShrink: 0,
+    marginTop: "$0.5",
+    children: icon
+  }) : null;
+}
+function useToasts() {
+  const ctx = useToastContext();
+  return {
+    toasts: ctx.toasts,
+    expanded: ctx.expanded,
+    position: ctx.position
+  };
+}
+function useToastItem() {
+  return useToastItemContext();
+}
+const Toast = (0, import_helpers.withStaticProperties)(ToastRoot, {
+  Viewport: ToastViewport,
+  List: ToastList,
+  Item: ToastItemInner,
+  Title: ToastTitle,
+  Description: ToastDescription,
+  Close: ToastClose,
+  Action: ToastAction,
+  Icon: ToastIcon
+});