@hanzogui/toast 3.0.2 → 7.3.0

package/dist/jsx/ToastComposable.mjs

@@ -0,0 +1,895 @@
+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.mjs";
+import { dispatchNativeToast } from "./dispatchNativeToast.mjs";
+import { useAnimatedDragGesture } from "./useAnimatedDragGesture.mjs";
+import { useToastAnimations } from "./useToastAnimations.mjs";
+import { useReducedMotion } from "./useReducedMotion.mjs";
+import { DefaultCloseIcon, ToastActionFrame, ToastCloseFrame, ToastItemFrame, ToastPositionWrapper } from "./ToastItemFrame.mjs";
+import { jsx, jsxs } from "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 = 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");
+  }
+  return ctx;
+}
+function resolveSwipeDirection(direction, position) {
+  if (direction !== "auto") return direction;
+  const [yPosition, xPosition] = position.split("-");
+  if (!isWeb) {
+    return yPosition === "top" ? "up" : "down";
+  }
+  if (xPosition === "left") return "left";
+  if (xPosition === "right") return "right";
+  return "horizontal";
+}
+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 = 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 ToastState.subscribe(toast => {
+      if (toast.dismiss) {
+        setToasts(toasts2 => toasts2.map(t => t.id === toast.id ? {
+          ...t,
+          delete: true
+        } : t));
+        return;
+      }
+      if (native) {
+        const handled = dispatchNativeToast(toast, {
+          duration,
+          burntOptions: burntOptionsRef.current,
+          notificationOptions: notificationOptionsRef.current
+        });
+        if (handled) return;
+      }
+      setToasts(toasts2 => {
+        const idx = toasts2.findIndex(t => t.id === toast.id);
+        if (idx !== -1) {
+          return [...toasts2.slice(0, idx), {
+            ...toasts2[idx],
+            ...toast
+          }, ...toasts2.slice(idx + 1)];
+        }
+        return [toast, ...toasts2];
+      });
+    });
+  }, [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) {
+        ToastState.dismiss(toastToRemove.id);
+      }
+      return toasts2.filter(({
+        id
+      }) => id !== toastToRemove.id);
+    });
+  }, []);
+  const swipeDirection = resolveSwipeDirection(swipeDirectionProp, position);
+  const currentTheme = 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__ */jsx(ToastContext.Provider, {
+    ...contextValue,
+    children: /* @__PURE__ */jsx(Theme, {
+      name: resolvedTheme,
+      children
+    })
+  });
+});
+const 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"
+  }
+});
+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
+  } = 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 (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 (!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__ */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: () => {
+        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);
+        }
+      }
+    }),
+    ...(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__ */jsx(Portal, {
+      zIndex: portalZIndex,
+      children: content
+    });
+  }
+  return content;
+});
+function ToastList({
+  renderItem
+}) {
+  const ctx = useToastContext();
+  const maxRender = ctx.toasts.length;
+  return /* @__PURE__ */jsx(AnimatePresence, {
+    children: ctx.toasts.slice(0, maxRender).map((toast, index) => {
+      const handleClose = () => {
+        if (toast.dismissible === false) return;
+        toast.onDismiss?.(toast);
+        ctx.removeToast(toast);
+      };
+      const 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({
+  toast
+}) {
+  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__ */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: e => {
+            toast.cancel?.onClick?.(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: e => {
+            toast.action?.onClick?.(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({
+  animatedStyle,
+  gestureHandlers,
+  gesture,
+  AnimatedView,
+  dragRef,
+  children
+}) {
+  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) {
+    const gh = getGestureHandler();
+    const 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
+  });
+}
+const ToastItemInner = 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 = 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 = 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 = 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
+  } = useToastAnimations({
+    reducedMotion: ctx.reducedMotion,
+    swipeAxis: ctx.swipeDirection === "up" || ctx.swipeDirection === "down" || ctx.swipeDirection === "vertical" ? "vertical" : "horizontal"
+  });
+  const {
+    isDragging,
+    gestureHandlers,
+    gesture
+  } = 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();
+      });
+    }
+  });
+  const handleLayout = React.useCallback(event => {
+    if (!isWeb) return;
+    if (removed) return;
+    if (!ctx.expanded && index !== 0) return;
+    const {
+      height
+    } = event.nativeEvent.layout;
+    ctx.setToastHeight(toast.id, height);
+  }, [toast.id, ctx.setToastHeight, index, ctx.expanded, removed]);
+  React.useEffect(() => {
+    if (!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 (isWeb) {
+    for (const t of ctx.toasts) {
+      const h = ctx.heights[t.id];
+      if (h != null && h > 0) {
+        frontToastHeight = h;
+        break;
+      }
+    }
+  }
+  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 = 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__ */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 ?? 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: 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__ */jsx(View, {
+          position: "absolute",
+          left: 0,
+          right: 0,
+          height: gapFillerHeight,
+          pointerEvents: "auto",
+          ...(isTop ? {
+            top: "100%"
+          } : {
+            bottom: "100%"
+          })
+        }), /* @__PURE__ */jsx(ToastItemContext.Provider, {
+          value: itemContextValue,
+          children
+        })]
+      })
+    })
+  });
+});
+const ToastTitle = styled(SizableText, {
+  name: "ToastTitle",
+  variants: {
+    unstyled: {
+      false: {
+        color: "$color",
+        fontWeight: "600",
+        size: "$4"
+      }
+    }
+  },
+  defaultVariants: {
+    unstyled: process.env.GUI_HEADLESS === "1"
+  }
+});
+const ToastDescription = styled(SizableText, {
+  name: "ToastDescription",
+  variants: {
+    unstyled: {
+      false: {
+        color: "$color11",
+        size: "$2"
+      }
+    }
+  },
+  defaultVariants: {
+    unstyled: process.env.GUI_HEADLESS === "1"
+  }
+});
+const ToastClose = ToastCloseFrame.styleable(function ToastClose2(props, ref) {
+  let handleClose;
+  try {
+    const itemCtx = useToastItemContext();
+    handleClose = itemCtx.handleClose;
+  } catch {}
+  const ctx = useToastContext();
+  return /* @__PURE__ */jsx(ToastCloseFrame, {
+    ref,
+    "aria-label": "Close toast",
+    onPress: handleClose,
+    ...props,
+    children: props.children ?? ctx.icons?.close ?? /* @__PURE__ */jsx(DefaultCloseIcon, {})
+  });
+});
+const ToastAction = ToastActionFrame.styleable(function ToastAction2(props, ref) {
+  return /* @__PURE__ */jsx(ToastActionFrame, {
+    ref,
+    ...props
+  });
+});
+function ToastIcon(props) {
+  const ctx = useToastContext();
+  let toast;
+  try {
+    const itemCtx = useToastItemContext();
+    toast = itemCtx.toast;
+  } catch {
+    return null;
+  }
+  if (!toast) return null;
+  if (toast.icon !== void 0) {
+    return /* @__PURE__ */jsx(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__ */jsx(View, {
+    flexShrink: 0,
+    marginTop: "$0.5",
+    children: icon
+  });
+}
+function useToasts() {
+  const ctx = useToastContext();
+  return {
+    toasts: ctx.toasts,
+    expanded: ctx.expanded,
+    position: ctx.position
+  };
+}
+function useToastItem() {
+  return useToastItemContext();
+}
+ToastRoot.displayName = "Toast";
+const 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.mjs.map