@hanzogui/toast 8.3.0 → 8.3.2

package/dist/esm/ToastComposable.mjs

@@ -1,909 +0,0 @@
-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 useToastContextValue = ToastContext.useStyledContext;
-function hasToastContext(ctx) {
-  return !!ctx && Array.isArray(ctx.toasts) && typeof ctx.setToastHeight === "function" && typeof ctx.removeToast === "function";
-}
-function useToastContext(consumerName) {
-  const ctx = useToastContextValue();
-  if (!hasToastContext(ctx)) {
-    throw new Error(`\`${consumerName}\` must be used within \`Toast\``);
-  }
-  return ctx;
-}
-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("Toast.Viewport");
-  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: /* @__PURE__ */jsx(ToastContext.Provider, {
-        ...ctx,
-        children: content
-      })
-    });
-  }
-  return content;
-});
-function ToastList({
-  renderItem
-}) {
-  const ctx = useToastContext("Toast.List");
-  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("Toast.Item");
-  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("Toast.Item");
-  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, {
-        "data-slot": "toast",
-        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("Toast.Close");
-  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("Toast.Icon");
-  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("useToasts");
-  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