@hanzogui/toast 7.0.0 → 7.3.0

package/dist/esm/ToastComposable.native.js

@@ -0,0 +1,984 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AnimatePresence } from "@hanzogui/animate-presence";
+import { isWeb } from "@hanzogui/constants";
+import { getGestureHandler } from "@hanzogui/native";
+import { createStyledContext, styled, Theme, useConfiguration, useEvent, useThemeName, View } from "@hanzogui/core";
+import { withStaticProperties } from "@hanzogui/helpers";
+import { Portal } from "@hanzogui/portal";
+import { XStack, YStack } from "@hanzogui/stacks";
+import { SizableText } from "@hanzogui/text";
+import * as React from "react";
+import { ToastState } from "./ToastState.native.js";
+import { dispatchNativeToast } from "./dispatchNativeToast.native.js";
+import { useAnimatedDragGesture } from "./useAnimatedDragGesture.native.js";
+import { useToastAnimations } from "./useToastAnimations.native.js";
+import { useReducedMotion } from "./useReducedMotion.native.js";
+import { DefaultCloseIcon, ToastActionFrame, ToastCloseFrame, ToastItemFrame, ToastPositionWrapper } from "./ToastItemFrame.native.js";
+function _type_of(obj) {
+  "@swc/helpers - typeof";
+
+  return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
+}
+var VISIBLE_TOASTS_AMOUNT = 4;
+var VIEWPORT_OFFSET = 16;
+var TOAST_GAP = 14;
+var TOAST_LIFETIME = 4e3;
+var FIXED_TOAST_HEIGHT = 72;
+var TIME_BEFORE_UNMOUNT = 200;
+var DEFAULT_HOTKEY = ["altKey", "KeyT"];
+var ToastContext = createStyledContext({}, "Toast__");
+var useToastContext = ToastContext.useStyledContext;
+var ToastItemContext = /* @__PURE__ */React.createContext(null);
+function useToastItemContext() {
+  var ctx = React.useContext(ToastItemContext);
+  if (!ctx) {
+    throw new Error("useToastItemContext must be used within Toast.Item or Toast.List");
+  }
+  return ctx;
+}
+function resolveSwipeDirection(direction, position) {
+  if (direction !== "auto") return direction;
+  var [yPosition, xPosition] = position.split("-");
+  if (!isWeb) {
+    return yPosition === "top" ? "up" : "down";
+  }
+  if (xPosition === "left") return "left";
+  if (xPosition === "right") return "right";
+  return "horizontal";
+}
+var ToastRoot = /* @__PURE__ */React.forwardRef(function ToastRoot2(props, _ref) {
+  var {
+    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;
+  var reducedMotion = useReducedMotion(reducedMotionProp);
+  var [toasts, setToasts] = React.useState([]);
+  var [heights, setHeights] = React.useState({});
+  var [localExpanded, setExpanded] = React.useState(false);
+  var expanded = expand || localExpanded;
+  var [interacting, setInteracting] = React.useState(false);
+  var heightsLockedRef = React.useRef(false);
+  var prevExpandedRef = React.useRef(expanded);
+  React.useLayoutEffect(function () {
+    if (prevExpandedRef.current !== expanded) {
+      heightsLockedRef.current = true;
+      prevExpandedRef.current = expanded;
+    }
+    var timer = setTimeout(function () {
+      heightsLockedRef.current = false;
+    }, 350);
+    return function () {
+      return clearTimeout(timer);
+    };
+  }, [expanded]);
+  var setToastHeight = React.useCallback(function (toastId, height) {
+    if (heightsLockedRef.current) return;
+    var rounded = Math.round(height);
+    setHeights(function (prev) {
+      var existing = prev[toastId];
+      if (existing != null && Math.abs(existing - rounded) <= 2) return prev;
+      return {
+        ...prev,
+        [toastId]: rounded
+      };
+    });
+  }, []);
+  var removeToastHeight = React.useCallback(function (toastId) {
+    setHeights(function (prev) {
+      if (!(toastId in prev)) return prev;
+      var next = {
+        ...prev
+      };
+      delete next[toastId];
+      return next;
+    });
+  }, []);
+  var dismissCooldownRef = React.useRef(false);
+  var dismissCooldownTimerRef = React.useRef(null);
+  var triggerDismissCooldown = React.useCallback(function () {
+    dismissCooldownRef.current = true;
+    if (dismissCooldownTimerRef.current) {
+      clearTimeout(dismissCooldownTimerRef.current);
+    }
+    dismissCooldownTimerRef.current = setTimeout(function () {
+      dismissCooldownRef.current = false;
+    }, 800);
+  }, []);
+  var isInDismissCooldown = React.useCallback(function () {
+    return dismissCooldownRef.current;
+  }, []);
+  var burntOptionsRef = React.useRef(burntOptions);
+  var notificationOptionsRef = React.useRef(notificationOptions);
+  React.useEffect(function () {
+    burntOptionsRef.current = burntOptions;
+  }, [burntOptions]);
+  React.useEffect(function () {
+    notificationOptionsRef.current = notificationOptions;
+  }, [notificationOptions]);
+  React.useEffect(function () {
+    return ToastState.subscribe(function (toast) {
+      if (toast.dismiss) {
+        setToasts(function (toasts2) {
+          return toasts2.map(function (t) {
+            return t.id === toast.id ? {
+              ...t,
+              delete: true
+            } : t;
+          });
+        });
+        return;
+      }
+      if (native) {
+        var handled = dispatchNativeToast(toast, {
+          duration,
+          burntOptions: burntOptionsRef.current,
+          notificationOptions: notificationOptionsRef.current
+        });
+        if (handled) return;
+      }
+      setToasts(function (toasts2) {
+        var idx = toasts2.findIndex(function (t) {
+          return t.id === toast.id;
+        });
+        if (idx !== -1) {
+          return [...toasts2.slice(0, idx), {
+            ...toasts2[idx],
+            ...toast
+          }, ...toasts2.slice(idx + 1)];
+        }
+        return [toast, ...toasts2];
+      });
+    });
+  }, [native, duration]);
+  var prevToastCountRef = React.useRef(toasts.length);
+  React.useEffect(function () {
+    var 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]);
+  var removeToast = React.useCallback(function (toastToRemove) {
+    setToasts(function (toasts2) {
+      var _toasts_find;
+      if (!((_toasts_find = toasts2.find(function (t) {
+        return t.id === toastToRemove.id;
+      })) === null || _toasts_find === void 0 ? void 0 : _toasts_find.delete)) {
+        ToastState.dismiss(toastToRemove.id);
+      }
+      return toasts2.filter(function (param) {
+        var {
+          id
+        } = param;
+        return id !== toastToRemove.id;
+      });
+    });
+  }, []);
+  var swipeDirection = resolveSwipeDirection(swipeDirectionProp, position);
+  var currentTheme = useThemeName();
+  var resolvedTheme = themeProp === "system" || !themeProp ? (currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.includes("dark")) ? "dark" : "light" : themeProp;
+  var 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__ */_jsx(ToastContext.Provider, {
+    ...contextValue,
+    children: /* @__PURE__ */_jsx(Theme, {
+      name: resolvedTheme,
+      children
+    })
+  });
+});
+var ToastViewportFrame = styled(View, {
+  name: "ToastViewport",
+  variants: {
+    unstyled: {
+      false: {
+        position: isWeb ? "fixed" : "absolute",
+        zIndex: 1e5,
+        pointerEvents: "box-none",
+        maxWidth: "100%",
+        ...(isWeb && {
+          width: 356
+        }),
+        minHeight: 1
+      }
+    }
+  },
+  defaultVariants: {
+    unstyled: process.env.GUI_HEADLESS === "1"
+  }
+});
+var ToastViewport = ToastViewportFrame.styleable(function ToastViewport2(props, ref) {
+  var {
+    offset = VIEWPORT_OFFSET,
+    hotkey = DEFAULT_HOTKEY,
+    label = "Notifications",
+    portalToRoot = true,
+    portalZIndex = Number.MAX_SAFE_INTEGER,
+    children,
+    ...rest
+  } = props;
+  var ctx = useToastContext();
+  var listRef = React.useRef(null);
+  var hoverTimeoutRef = React.useRef(null);
+  var hoverCooldownRef = React.useRef(false);
+  var deferredCollapseRef = React.useRef(null);
+  var mouseInsideRef = React.useRef(false);
+  var [yPosition, xPosition] = ctx.position.split("-");
+  var {
+    insets: safeInsets
+  } = useConfiguration();
+  var offsetStyles = React.useMemo(function () {
+    var styles = {};
+    var defaultOffset = typeof offset === "number" ? offset : VIEWPORT_OFFSET;
+    var offsetObj = (typeof offset === "undefined" ? "undefined" : _type_of(offset)) === "object" ? offset : {
+      top: defaultOffset,
+      right: defaultOffset,
+      bottom: defaultOffset,
+      left: defaultOffset
+    };
+    var _safeInsets_top;
+    var safeTop = (_safeInsets_top = safeInsets === null || safeInsets === void 0 ? void 0 : safeInsets.top) !== null && _safeInsets_top !== void 0 ? _safeInsets_top : 0;
+    var _safeInsets_bottom;
+    var safeBottom = (_safeInsets_bottom = safeInsets === null || safeInsets === void 0 ? void 0 : safeInsets.bottom) !== null && _safeInsets_bottom !== void 0 ? _safeInsets_bottom : 0;
+    var _offsetObj_top;
+    var topOffset = safeTop > 0 ? safeTop : (_offsetObj_top = offsetObj.top) !== null && _offsetObj_top !== void 0 ? _offsetObj_top : defaultOffset;
+    var _offsetObj_bottom;
+    var bottomOffset = safeBottom > 0 ? safeBottom : (_offsetObj_bottom = offsetObj.bottom) !== null && _offsetObj_bottom !== void 0 ? _offsetObj_bottom : defaultOffset;
+    if (yPosition === "top") styles.top = topOffset;else styles.bottom = bottomOffset;
+    if (isWeb) {
+      var _offsetObj_left, _offsetObj_right;
+      if (xPosition === "left") styles.left = (_offsetObj_left = offsetObj.left) !== null && _offsetObj_left !== void 0 ? _offsetObj_left : defaultOffset;else if (xPosition === "right") styles.right = (_offsetObj_right = offsetObj.right) !== null && _offsetObj_right !== void 0 ? _offsetObj_right : defaultOffset;else {
+        styles.left = "50%";
+        styles.transform = "translateX(-50%)";
+      }
+    } else {
+      var _offsetObj_left1;
+      styles.left = (_offsetObj_left1 = offsetObj.left) !== null && _offsetObj_left1 !== void 0 ? _offsetObj_left1 : defaultOffset;
+      var _offsetObj_right1;
+      styles.right = (_offsetObj_right1 = offsetObj.right) !== null && _offsetObj_right1 !== void 0 ? _offsetObj_right1 : defaultOffset;
+    }
+    return styles;
+  }, [offset, yPosition, xPosition]);
+  React.useEffect(function () {
+    if (!isWeb) return;
+    var handleKeyDown = function (event) {
+      var isHotkeyPressed = hotkey.length > 0 && hotkey.every(function (key) {
+        return event[key] || event.code === key;
+      });
+      if (isHotkeyPressed) {
+        var _listRef_current;
+        ctx.setExpanded(true);
+        (_listRef_current = listRef.current) === null || _listRef_current === void 0 ? void 0 : _listRef_current.focus();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return function () {
+      return document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [hotkey]);
+  if (ctx.toasts.length === 0) return null;
+  var hotkeyLabel = hotkey.join("+").replace(/Key/g, "").replace(/Digit/g, "");
+  var content = /* @__PURE__ */_jsx(ToastViewportFrame, {
+    ref: listRef,
+    "aria-label": `${label} ${hotkeyLabel}`,
+    tabIndex: -1,
+    "aria-live": "polite",
+    style: offsetStyles,
+    "data-y-position": yPosition,
+    "data-x-position": xPosition,
+    ...(isWeb ? {
+      onMouseEnter: function () {
+        mouseInsideRef.current = true;
+        if (deferredCollapseRef.current) {
+          clearTimeout(deferredCollapseRef.current);
+          deferredCollapseRef.current = null;
+        }
+        if (ctx.toasts.length > 1 && !ctx.interacting && !hoverCooldownRef.current) {
+          hoverTimeoutRef.current = setTimeout(function () {
+            return ctx.setExpanded(true);
+          }, 50);
+        }
+      },
+      onMouseLeave: function () {
+        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(function () {
+            deferredCollapseRef.current = null;
+            if (!mouseInsideRef.current) {
+              ctx.setExpanded(false);
+            }
+          }, 1200);
+        }
+      },
+      onPointerDown: function () {
+        if (hoverTimeoutRef.current) {
+          clearTimeout(hoverTimeoutRef.current);
+          hoverTimeoutRef.current = null;
+        }
+        ctx.setInteracting(true);
+      },
+      onPointerUp: function () {
+        return ctx.setInteracting(false);
+      },
+      onPointerCancel: function () {
+        return ctx.setInteracting(false);
+      }
+    } : {
+      onPress: function () {
+        if (ctx.toasts.length > 1) {
+          ctx.setExpanded(function (prev) {
+            return !prev;
+          });
+        }
+      }
+    }),
+    ...(isWeb && {
+      onFocus: function (event) {
+        if (!event.currentTarget.contains(event.relatedTarget)) {
+          if (ctx.toasts.length > 1) {
+            ctx.setExpanded(true);
+          }
+          ctx.setInteracting(true);
+        }
+      },
+      onBlur: function (event) {
+        if (!event.currentTarget.contains(event.relatedTarget)) {
+          ctx.setInteracting(false);
+          if (!ctx.isInDismissCooldown()) {
+            ctx.setExpanded(false);
+          }
+        }
+      }
+    }),
+    ...rest,
+    children
+  });
+  if (portalToRoot) {
+    return /* @__PURE__ */_jsx(Portal, {
+      zIndex: portalZIndex,
+      children: content
+    });
+  }
+  return content;
+});
+function ToastList(param) {
+  var {
+    renderItem
+  } = param;
+  var ctx = useToastContext();
+  var maxRender = ctx.toasts.length;
+  return /* @__PURE__ */_jsx(AnimatePresence, {
+    children: ctx.toasts.slice(0, maxRender).map(function (toast, index) {
+      var handleClose = function () {
+        var _toast_onDismiss;
+        if (toast.dismissible === false) return;
+        (_toast_onDismiss = toast.onDismiss) === null || _toast_onDismiss === void 0 ? void 0 : _toast_onDismiss.call(toast, toast);
+        ctx.removeToast(toast);
+      };
+      var itemContextValue = {
+        toast,
+        handleClose
+      };
+      if (!renderItem) {
+        return /* @__PURE__ */_jsx(ToastItemContext.Provider, {
+          value: itemContextValue,
+          children: /* @__PURE__ */_jsx(ToastItemInner, {
+            toast,
+            index,
+            children: /* @__PURE__ */_jsx(DefaultToastContent, {
+              toast
+            })
+          })
+        }, toast.id);
+      }
+      return /* @__PURE__ */_jsx(ToastItemContext.Provider, {
+        value: itemContextValue,
+        children: renderItem({
+          toast,
+          index,
+          handleClose
+        })
+      }, toast.id);
+    })
+  });
+}
+function DefaultToastContent(param) {
+  var {
+    toast
+  } = param;
+  var ctx = useToastContext();
+  var {
+    handleClose
+  } = useToastItemContext();
+  var _toast_type;
+  var toastType = (_toast_type = toast.type) !== null && _toast_type !== void 0 ? _toast_type : "default";
+  var dismissible = toast.dismissible !== false;
+  var title = typeof toast.title === "function" ? toast.title() : toast.title;
+  var description = typeof toast.description === "function" ? toast.description() : toast.description;
+  return /* @__PURE__ */_jsxs(XStack, {
+    alignItems: "flex-start",
+    gap: "$3",
+    children: [/* @__PURE__ */_jsx(ToastIcon, {}), /* @__PURE__ */_jsxs(YStack, {
+      flex: 1,
+      gap: "$1",
+      children: [title && /* @__PURE__ */_jsx(ToastTitle, {
+        children: title
+      }), description && /* @__PURE__ */_jsx(ToastDescription, {
+        children: description
+      }), (toast.action || toast.cancel) && /* @__PURE__ */_jsxs(XStack, {
+        gap: "$2",
+        marginTop: "$2",
+        children: [toast.cancel && /* @__PURE__ */_jsx(ToastActionFrame, {
+          backgroundColor: "transparent",
+          onPress: function (e) {
+            var _toast_cancel_onClick, _toast_cancel;
+            (_toast_cancel = toast.cancel) === null || _toast_cancel === void 0 ? void 0 : (_toast_cancel_onClick = _toast_cancel.onClick) === null || _toast_cancel_onClick === void 0 ? void 0 : _toast_cancel_onClick.call(_toast_cancel, e);
+            handleClose();
+          },
+          children: /* @__PURE__ */_jsx(SizableText, {
+            size: "$2",
+            color: "$color11",
+            children: toast.cancel.label
+          })
+        }), toast.action && /* @__PURE__ */_jsx(ToastActionFrame, {
+          backgroundColor: "$color12",
+          hoverStyle: {
+            backgroundColor: "$color11"
+          },
+          pressStyle: {
+            backgroundColor: "$color10"
+          },
+          onPress: function (e) {
+            var _toast_action_onClick, _toast_action;
+            (_toast_action = toast.action) === null || _toast_action === void 0 ? void 0 : (_toast_action_onClick = _toast_action.onClick) === null || _toast_action_onClick === void 0 ? void 0 : _toast_action_onClick.call(_toast_action, e);
+            if (!e.defaultPrevented) {
+              handleClose();
+            }
+          },
+          children: /* @__PURE__ */_jsx(SizableText, {
+            size: "$2",
+            fontWeight: "600",
+            color: "$background",
+            children: toast.action.label
+          })
+        })]
+      })]
+    }), ctx.closeButton && dismissible && /* @__PURE__ */_jsx(ToastClose, {})]
+  });
+}
+function DragWrapper(param) {
+  var {
+    animatedStyle,
+    gestureHandlers,
+    gesture,
+    AnimatedView,
+    dragRef,
+    children
+  } = param;
+  if (isWeb) {
+    return /* @__PURE__ */_jsx("div", {
+      ref: dragRef,
+      style: {
+        flex: 1,
+        display: "flex",
+        flexDirection: "column",
+        userSelect: "none",
+        WebkitUserSelect: "none",
+        touchAction: "none",
+        cursor: "default"
+      },
+      ...gestureHandlers,
+      children
+    });
+  }
+  if (gesture) {
+    var gh = getGestureHandler();
+    var GestureDetector = gh.state.GestureDetector;
+    if (GestureDetector) {
+      return /* @__PURE__ */_jsx(GestureDetector, {
+        gesture,
+        children: /* @__PURE__ */_jsx(View, {
+          style: {
+            flex: 1
+          },
+          ...{
+            collapsable: false
+          },
+          children: /* @__PURE__ */_jsx(AnimatedView, {
+            style: [{
+              flex: 1
+            }, animatedStyle],
+            children
+          })
+        })
+      });
+    }
+  }
+  return /* @__PURE__ */_jsx(AnimatedView, {
+    style: [{
+      flex: 1
+    }, animatedStyle],
+    ...gestureHandlers,
+    children
+  });
+}
+var ToastItemInner = ToastItemFrame.styleable(function ToastItem(props, ref) {
+  var {
+    toast,
+    index,
+    children,
+    ...rest
+  } = props;
+  var ctx = useToastContext();
+  var [mounted, setMounted] = React.useState(false);
+  var [removed, setRemoved] = React.useState(false);
+  var [swipeOut, setSwipeOut] = React.useState(false);
+  var [offsetBeforeRemove, setOffsetBeforeRemove] = React.useState(0);
+  var swipeExitYRef = React.useRef(null);
+  var closeTimerRef = React.useRef(null);
+  var closeTimerStartRef = React.useRef(0);
+  var lastPauseTimeRef = React.useRef(0);
+  var _toast_duration;
+  var remainingTimeRef = React.useRef((_toast_duration = toast.duration) !== null && _toast_duration !== void 0 ? _toast_duration : ctx.duration);
+  var isFront = index === 0;
+  var isVisible = index < ctx.visibleToasts;
+  var _toast_type;
+  var toastType = (_toast_type = toast.type) !== null && _toast_type !== void 0 ? _toast_type : "default";
+  var dismissible = toast.dismissible !== false;
+  var _toast_duration1;
+  var duration = (_toast_duration1 = toast.duration) !== null && _toast_duration1 !== void 0 ? _toast_duration1 : ctx.duration;
+  var [yPosition] = ctx.position.split("-");
+  var isTop = yPosition === "top";
+  var expandedOffset = isWeb ? function () {
+    var totalHeight = 0;
+    var activeCount = 0;
+    for (var i = 0; i < index; i++) {
+      var _ctx_toasts_i;
+      var toastId = (_ctx_toasts_i = ctx.toasts[i]) === null || _ctx_toasts_i === void 0 ? void 0 : _ctx_toasts_i.id;
+      if (toastId == null) continue;
+      var h2 = ctx.heights[toastId];
+      if (h2 === 0) continue;
+      totalHeight += h2 !== null && h2 !== void 0 ? h2 : ctx.toastHeight;
+      activeCount++;
+    }
+    return totalHeight + activeCount * ctx.gap;
+  }() : index * (ctx.toastHeight + ctx.gap);
+  var expandedOffsetRef = React.useRef(expandedOffset);
+  expandedOffsetRef.current = expandedOffset;
+  var isExpandedRef = React.useRef(ctx.expanded);
+  isExpandedRef.current = ctx.expanded;
+  var startTimer = React.useCallback(function () {
+    if (duration === Number.POSITIVE_INFINITY || toastType === "loading") return;
+    closeTimerStartRef.current = Date.now();
+    closeTimerRef.current = setTimeout(function () {
+      var _toast_onAutoClose;
+      (_toast_onAutoClose = toast.onAutoClose) === null || _toast_onAutoClose === void 0 ? void 0 : _toast_onAutoClose.call(toast, toast);
+      setRemoved(true);
+      setTimeout(function () {
+        return ctx.removeToast(toast);
+      }, TIME_BEFORE_UNMOUNT);
+    }, remainingTimeRef.current);
+  }, [duration, toastType, toast, ctx.removeToast]);
+  var pauseTimer = useEvent(function () {
+    if (closeTimerRef.current) {
+      clearTimeout(closeTimerRef.current);
+    }
+    if (lastPauseTimeRef.current < closeTimerStartRef.current) {
+      var elapsed = Date.now() - closeTimerStartRef.current;
+      remainingTimeRef.current = Math.max(0, remainingTimeRef.current - elapsed);
+    }
+    lastPauseTimeRef.current = Date.now();
+  });
+  var resumeTimer = useEvent(function () {
+    if (ctx.expanded || ctx.interacting) return;
+    remainingTimeRef.current = duration;
+    startTimer();
+  });
+  React.useEffect(function () {
+    setMounted(true);
+  }, []);
+  React.useEffect(function () {
+    if (toast.delete) {
+      setRemoved(true);
+      if (isExpandedRef.current) {
+        setOffsetBeforeRemove(expandedOffsetRef.current);
+      }
+      setTimeout(function () {
+        return ctx.removeToast(toast);
+      }, TIME_BEFORE_UNMOUNT);
+    }
+  }, [toast.delete, toast, ctx.removeToast]);
+  React.useEffect(function () {
+    if (ctx.expanded || ctx.interacting) {
+      pauseTimer();
+    } else {
+      startTimer();
+    }
+    return function () {
+      if (closeTimerRef.current) clearTimeout(closeTimerRef.current);
+    };
+  }, [ctx.expanded, ctx.interacting, startTimer]);
+  React.useEffect(function () {
+    remainingTimeRef.current = duration;
+  }, [duration]);
+  var {
+    setDragOffset,
+    springBack,
+    animateOut,
+    animatedStyle,
+    AnimatedView,
+    dragRef
+  } = useToastAnimations({
+    reducedMotion: ctx.reducedMotion,
+    swipeAxis: ctx.swipeDirection === "up" || ctx.swipeDirection === "down" || ctx.swipeDirection === "vertical" ? "vertical" : "horizontal"
+  });
+  var {
+    isDragging,
+    gestureHandlers,
+    gesture
+  } = useAnimatedDragGesture({
+    direction: ctx.swipeDirection,
+    threshold: ctx.swipeThreshold,
+    disabled: !dismissible || toastType === "loading",
+    expanded: ctx.expanded,
+    onDragStart: pauseTimer,
+    onDragMove: setDragOffset,
+    onDismiss: function (exitDirection, velocity) {
+      var _toast_onDismiss;
+      ctx.triggerDismissCooldown();
+      setSwipeOut(true);
+      (_toast_onDismiss = toast.onDismiss) === null || _toast_onDismiss === void 0 ? void 0 : _toast_onDismiss.call(toast, 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: function () {
+      springBack(function () {
+        resumeTimer();
+      });
+    }
+  });
+  var handleLayout = React.useCallback(function (event) {
+    if (!isWeb) return;
+    if (removed) return;
+    if (!ctx.expanded && index !== 0) return;
+    var {
+      height
+    } = event.nativeEvent.layout;
+    ctx.setToastHeight(toast.id, height);
+  }, [toast.id, ctx.setToastHeight, index, ctx.expanded, removed]);
+  React.useEffect(function () {
+    if (!isWeb) return;
+    return function () {
+      ctx.removeToastHeight(toast.id);
+    };
+  }, [toast.id, ctx.removeToastHeight]);
+  var handleClose = React.useCallback(function () {
+    var _toast_onDismiss;
+    if (!dismissible) return;
+    ctx.triggerDismissCooldown();
+    (_toast_onDismiss = toast.onDismiss) === null || _toast_onDismiss === void 0 ? void 0 : _toast_onDismiss.call(toast, toast);
+    setRemoved(true);
+    if (isExpandedRef.current) {
+      setOffsetBeforeRemove(expandedOffsetRef.current);
+    }
+    setTimeout(function () {
+      return ctx.removeToast(toast);
+    }, TIME_BEFORE_UNMOUNT);
+  }, [dismissible, toast, ctx.removeToast, ctx.triggerDismissCooldown]);
+  var itemContextValue = React.useMemo(function () {
+    return {
+      toast,
+      handleClose
+    };
+  }, [toast, handleClose]);
+  var frontToastHeight = -1;
+  if (isWeb) {
+    var _iteratorNormalCompletion = true,
+      _didIteratorError = false,
+      _iteratorError = void 0;
+    try {
+      for (var _iterator = ctx.toasts[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+        var t = _step.value;
+        var h = ctx.heights[t.id];
+        if (h != null && h > 0) {
+          frontToastHeight = h;
+          break;
+        }
+      }
+    } catch (err) {
+      _didIteratorError = true;
+      _iteratorError = err;
+    } finally {
+      try {
+        if (!_iteratorNormalCompletion && _iterator.return != null) {
+          _iterator.return();
+        }
+      } finally {
+        if (_didIteratorError) {
+          throw _iteratorError;
+        }
+      }
+    }
+  }
+  var stackScale = !ctx.expanded && !isFront ? 1 - index * 0.05 : 1;
+  var activeExpandedOffset = removed ? offsetBeforeRemove : expandedOffset;
+  var stackY = ctx.expanded ? isTop ? activeExpandedOffset : -activeExpandedOffset : isFront ? 0 : isTop ? ctx.gap * index : -ctx.gap * index;
+  var computedOpacity = removed && !swipeOut ? 0 : index >= ctx.visibleToasts ? 0 : 1;
+  var computedZIndex = removed ? 0 : ctx.visibleToasts - index + 1;
+  var computedHeight = isWeb ? ctx.expanded ? ctx.heights[toast.id] || void 0 : !isFront && frontToastHeight > 0 ? frontToastHeight : void 0 : void 0;
+  var computedPointerEvents = index >= ctx.visibleToasts ? "none" : "auto";
+  var gapFillerHeight = ctx.expanded ? ctx.gap + 1 : 0;
+  var 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"
+  };
+  var _swipeExitYRef_current;
+  return /* @__PURE__ */_jsx(ToastPositionWrapper, {
+    ref,
+    testID: rest.testID,
+    accessibilityLabel: rest.accessibilityLabel,
+    ...dataAttributes,
+    transition: isDragging || ctx.reducedMotion ? void 0 : removed ? "200ms" : "400ms",
+    animateOnly: 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,
+    ...(isWeb && !isFront && {
+      style: {
+        transformOrigin: isTop ? "top center" : "bottom center"
+      }
+    }),
+    enterStyle: ctx.reducedMotion ? {
+      opacity: 0
+    } : {
+      opacity: 0,
+      y: isTop ? -80 : 80
+    },
+    exitStyle: ctx.reducedMotion ? {
+      opacity: 0
+    } : swipeOut ? {
+      opacity: 0,
+      y: (_swipeExitYRef_current = swipeExitYRef.current) !== null && _swipeExitYRef_current !== void 0 ? _swipeExitYRef_current : stackY,
+      scale: stackScale
+    } : {
+      opacity: 0,
+      y: stackY,
+      scale: stackScale
+    },
+    children: /* @__PURE__ */_jsx(DragWrapper, {
+      animatedStyle,
+      gestureHandlers,
+      gesture,
+      AnimatedView,
+      dragRef,
+      children: /* @__PURE__ */_jsxs(ToastItemFrame, {
+        role: "status",
+        "aria-live": "polite",
+        "aria-atomic": true,
+        tabIndex: 0,
+        onLayout: handleLayout,
+        ...(isWeb && {
+          onKeyDown: function (event) {
+            if (event.key === "Escape" && dismissible) {
+              var current = event.currentTarget;
+              var container = current.closest("[aria-label]");
+              if (container) {
+                var focusables = container.querySelectorAll('[tabindex="0"]');
+                var arr = Array.from(focusables);
+                var idx = arr.indexOf(current);
+                var next = arr[idx + 1] || arr[idx - 1];
+                next === null || next === void 0 ? void 0 : next.focus();
+              }
+              handleClose();
+            }
+          }
+        }),
+        ...rest,
+        children: [/* gap filler to prevent hover flicker */
+        ctx.expanded && gapFillerHeight > 0 && /* @__PURE__ */_jsx(View, {
+          position: "absolute",
+          left: 0,
+          right: 0,
+          height: gapFillerHeight,
+          pointerEvents: "auto",
+          ...(isTop ? {
+            top: "100%"
+          } : {
+            bottom: "100%"
+          })
+        }), /* @__PURE__ */_jsx(ToastItemContext.Provider, {
+          value: itemContextValue,
+          children
+        })]
+      })
+    })
+  });
+});
+var ToastTitle = styled(SizableText, {
+  name: "ToastTitle",
+  variants: {
+    unstyled: {
+      false: {
+        color: "$color",
+        fontWeight: "600",
+        size: "$4"
+      }
+    }
+  },
+  defaultVariants: {
+    unstyled: process.env.GUI_HEADLESS === "1"
+  }
+});
+var ToastDescription = styled(SizableText, {
+  name: "ToastDescription",
+  variants: {
+    unstyled: {
+      false: {
+        color: "$color11",
+        size: "$2"
+      }
+    }
+  },
+  defaultVariants: {
+    unstyled: process.env.GUI_HEADLESS === "1"
+  }
+});
+var ToastClose = ToastCloseFrame.styleable(function ToastClose2(props, ref) {
+  var _ctx_icons;
+  var handleClose;
+  try {
+    var itemCtx = useToastItemContext();
+    handleClose = itemCtx.handleClose;
+  } catch (e) {}
+  var ctx = useToastContext();
+  var _props_children, _ref;
+  return /* @__PURE__ */_jsx(ToastCloseFrame, {
+    ref,
+    "aria-label": "Close toast",
+    onPress: handleClose,
+    ...props,
+    children: (_ref = (_props_children = props.children) !== null && _props_children !== void 0 ? _props_children : (_ctx_icons = ctx.icons) === null || _ctx_icons === void 0 ? void 0 : _ctx_icons.close) !== null && _ref !== void 0 ? _ref : /* @__PURE__ */_jsx(DefaultCloseIcon, {})
+  });
+});
+var ToastAction = ToastActionFrame.styleable(function ToastAction2(props, ref) {
+  return /* @__PURE__ */_jsx(ToastActionFrame, {
+    ref,
+    ...props
+  });
+});
+function ToastIcon(props) {
+  var _ctx_icons;
+  var ctx = useToastContext();
+  var toast;
+  try {
+    var itemCtx = useToastItemContext();
+    toast = itemCtx.toast;
+  } catch (e) {
+    return null;
+  }
+  if (!toast) return null;
+  if (toast.icon !== void 0) {
+    return /* @__PURE__ */_jsx(View, {
+      flexShrink: 0,
+      marginTop: "$0.5",
+      children: toast.icon
+    });
+  }
+  var _toast_type;
+  var toastType = (_toast_type = toast.type) !== null && _toast_type !== void 0 ? _toast_type : "default";
+  var _ctx_icons_toastType;
+  var icon = (_ctx_icons_toastType = (_ctx_icons = ctx.icons) === null || _ctx_icons === void 0 ? void 0 : _ctx_icons[toastType]) !== null && _ctx_icons_toastType !== void 0 ? _ctx_icons_toastType : null;
+  if (!icon) return null;
+  return /* @__PURE__ */_jsx(View, {
+    flexShrink: 0,
+    marginTop: "$0.5",
+    children: icon
+  });
+}
+function useToasts() {
+  var ctx = useToastContext();
+  return {
+    toasts: ctx.toasts,
+    expanded: ctx.expanded,
+    position: ctx.position
+  };
+}
+function useToastItem() {
+  return useToastItemContext();
+}
+ToastRoot.displayName = "Toast";
+var Toast = withStaticProperties(ToastRoot, {
+  Viewport: ToastViewport,
+  List: ToastList,
+  Item: ToastItemInner,
+  Title: ToastTitle,
+  Description: ToastDescription,
+  Close: ToastClose,
+  Action: ToastAction,
+  Icon: ToastIcon
+});
+export { Toast, useToastItem, useToasts };
+//# sourceMappingURL=ToastComposable.native.js.map