@tamagui/toast 1.7.10 → 1.8.0

package/dist/cjs/Toast.js

@@ -28,477 +28,76 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var Toast_exports = {};
 __export(Toast_exports, {
-  Action: () => Action,
-  Close: () => Close,
-  Description: () => Description,
-  Provider: () => Provider,
-  Root: () => Root,
-  Title: () => Title,
   Toast: () => Toast,
-  ToastAction: () => ToastAction,
-  ToastClose: () => ToastClose,
-  ToastDescription: () => ToastDescription,
-  ToastProvider: () => ToastProvider,
-  ToastTitle: () => ToastTitle,
-  ToastViewport: () => ToastViewport,
-  Viewport: () => Viewport
+  ToastProvider: () => import_ToastProvider.ToastProvider,
+  ToastViewport: () => import_ToastViewport.ToastViewport,
+  createToast: () => import_createToast.createToast,
+  createToastScope: () => import_ToastProvider.createToastScope
 });
 module.exports = __toCommonJS(Toast_exports);
-var import_jsx_runtime = (
-  // <Collection.Provider scope={__scopeToast}>
-  require("react/jsx-runtime")
-);
-var import_compose_refs = require("@tamagui/compose-refs");
+var import_jsx_runtime = require("react/jsx-runtime");
 var import_core = require("@tamagui/core");
-var import_portal = require("@tamagui/portal");
 var import_stacks = require("@tamagui/stacks");
+var import_text = require("@tamagui/text");
 var import_use_controllable_state = require("@tamagui/use-controllable-state");
-var import_visually_hidden = require("@tamagui/visually-hidden");
 var React = __toESM(require("react"));
-var ReactDOM = __toESM(require("react-dom"));
-const PROVIDER_NAME = "ToastProvider";
-const [ToastProviderProvider, useToastProviderContext] = [];
-const ToastProvider = (props) => {
-  const {
-    __scopeToast,
-    label = "Notification",
-    duration = 5e3,
-    swipeDirection = "right",
-    swipeThreshold = 50,
-    children
-  } = props;
-  const [viewport, setViewport] = React.useState(null);
-  const [toastCount, setToastCount] = React.useState(0);
-  const isFocusedToastEscapeKeyDownRef = React.useRef(false);
-  const isClosePausedRef = React.useRef(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    ToastProviderProvider,
-    {
-      scope: __scopeToast,
-      label,
-      duration,
-      swipeDirection,
-      swipeThreshold,
-      toastCount,
-      viewport,
-      onViewportChange: setViewport,
-      onToastAdd: React.useCallback(
-        () => setToastCount((prevCount) => prevCount + 1),
-        []
-      ),
-      onToastRemove: React.useCallback(
-        () => setToastCount((prevCount) => prevCount - 1),
-        []
-      ),
-      isFocusedToastEscapeKeyDownRef,
-      isClosePausedRef,
-      children
-    }
-  );
-};
-ToastProvider.propTypes = {
-  label(props) {
-    if (props.label && typeof props.label === "string" && !props.label.trim()) {
-      const error = `Invalid prop \`label\` supplied to \`${PROVIDER_NAME}\`. Expected non-empty \`string\`.`;
-      return new Error(error);
-    }
-    return null;
-  }
-};
-ToastProvider.displayName = PROVIDER_NAME;
-const VIEWPORT_NAME = "ToastViewport";
-const VIEWPORT_DEFAULT_HOTKEY = ["F8"];
-const VIEWPORT_PAUSE = "toast.viewportPause";
-const VIEWPORT_RESUME = "toast.viewportResume";
-const ToastViewport = React.forwardRef(
-  (props, forwardedRef) => {
-    const {
-      __scopeToast,
-      hotkey = VIEWPORT_DEFAULT_HOTKEY,
-      label = "Notifications ({hotkey})",
-      ...viewportProps
-    } = props;
-    const context = useToastProviderContext(VIEWPORT_NAME, __scopeToast);
-    const wrapperRef = React.useRef(null);
-    const headFocusProxyRef = React.useRef(null);
-    const tailFocusProxyRef = React.useRef(null);
-    const ref = React.useRef(null);
-    const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, ref, context.onViewportChange);
-    const hotkeyLabel = hotkey.join("+").replace(/Key/g, "").replace(/Digit/g, "");
-    const hasToasts = context.toastCount > 0;
-    React.useEffect(() => {
-      const handleKeyDown = (event) => {
-        var _a;
-        const isHotkeyPressed = hotkey.every(
-          (key) => event[key] || event.code === key
-        );
-        if (isHotkeyPressed)
-          (_a = ref.current) == null ? void 0 : _a.focus();
-      };
-      document.addEventListener("keydown", handleKeyDown);
-      return () => document.removeEventListener("keydown", handleKeyDown);
-    }, [hotkey]);
-    React.useEffect(() => {
-      const wrapper = wrapperRef.current;
-      const viewport = ref.current;
-      if (wrapper && viewport) {
-        const handlePause = () => {
-          const pauseEvent = new CustomEvent(VIEWPORT_PAUSE);
-          context.isClosePausedRef.current = true;
-        };
-        const handleResume = () => {
-          const resumeEvent = new CustomEvent(VIEWPORT_RESUME);
-          context.isClosePausedRef.current = false;
-        };
-        wrapper.addEventListener("focusin", handlePause);
-        wrapper.addEventListener("focusout", handleResume);
-        wrapper.addEventListener("pointerenter", handlePause);
-        wrapper.addEventListener("pointerleave", handleResume);
-        window.addEventListener("blur", handlePause);
-        window.addEventListener("focus", handleResume);
-        return () => {
-          wrapper.removeEventListener("focusin", handlePause);
-          wrapper.removeEventListener("focusout", handleResume);
-          wrapper.removeEventListener("pointerenter", handlePause);
-          wrapper.removeEventListener("pointerleave", handleResume);
-          window.removeEventListener("blur", handlePause);
-          window.removeEventListener("focus", handleResume);
-        };
-      }
-    }, [context.isClosePausedRef]);
-    React.useEffect(
-      () => {
-        const viewport = ref.current;
-        if (viewport) {
-          const handleKeyDown = (event) => {
-            var _a;
-            const isMetaKey = event.altKey || event.ctrlKey || event.metaKey;
-            const isTabKey = event.key === "Tab" && !isMetaKey;
-            if (isTabKey) {
-              const focusedElement = document.activeElement;
-              const isTabbingBackwards = event.shiftKey;
-              const targetIsViewport = event.target === viewport;
-              if (targetIsViewport && isTabbingBackwards) {
-                (_a = headFocusProxyRef.current) == null ? void 0 : _a.focus();
-                return;
-              }
-              const tabbingDirection = isTabbingBackwards ? "backwards" : "forwards";
-            }
-          };
-          return () => {
-          };
-        }
-      },
-      [
-        // getItems, getSortedTabbableCandidates
-      ]
-    );
-    return null;
-  }
-);
-ToastViewport.displayName = VIEWPORT_NAME;
-const FOCUS_PROXY_NAME = "ToastFocusProxy";
-const FocusProxy = React.forwardRef(
-  (props, forwardedRef) => {
-    const { __scopeToast, onFocusFromOutsideViewport, ...proxyProps } = props;
-    const context = useToastProviderContext(FOCUS_PROXY_NAME, __scopeToast);
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_visually_hidden.VisuallyHidden,
-      {
-        "aria-hidden": true,
-        tabIndex: 0,
-        ...proxyProps,
-        ref: forwardedRef,
-        position: import_core.isWeb ? "fixed" : "absolute",
-        onFocus: (event) => {
-          var _a;
-          const prevFocusedElement = event.relatedTarget;
-          const isFocusFromOutsideViewport = !((_a = context.viewport) == null ? void 0 : _a.contains(prevFocusedElement));
-          if (isFocusFromOutsideViewport)
-            onFocusFromOutsideViewport();
-        }
-      }
-    );
-  }
-);
-FocusProxy.displayName = FOCUS_PROXY_NAME;
-const TOAST_NAME = "Toast";
-const TOAST_SWIPE_START = "toast.swipeStart";
-const TOAST_SWIPE_MOVE = "toast.swipeMove";
-const TOAST_SWIPE_CANCEL = "toast.swipeCancel";
-const TOAST_SWIPE_END = "toast.swipeEnd";
-const Toast = React.forwardRef(
-  (props, forwardedRef) => {
-    const {
-      forceMount,
-      open: openProp,
-      defaultOpen,
-      onOpenChange,
-      ...toastProps
-    } = props;
-    const [open, setOpen] = (0, import_use_controllable_state.useControllableState)({
-      prop: openProp,
-      defaultProp: true,
-      onChange: onOpenChange,
-      transition: true
-    });
-    return (
-      // <Presence present={forceMount || open}>
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        ToastImpl,
-        {
-          open,
-          ...toastProps,
-          ref: forwardedRef,
-          onClose: () => setOpen(false)
-        }
-      )
-    );
-  }
-);
-Toast.displayName = TOAST_NAME;
-const [ToastInteractiveProvider, useToastInteractiveContext] = {};
-const ToastImpl = React.forwardRef(
-  (props, forwardedRef) => {
-    const {
-      __scopeToast,
-      type = "foreground",
-      duration: durationProp,
-      open,
-      onClose,
-      onEscapeKeyDown,
-      onSwipeStart,
-      onSwipeMove,
-      onSwipeCancel,
-      onSwipeEnd,
-      ...toastProps
-    } = props;
-    const context = useToastProviderContext(TOAST_NAME, __scopeToast);
-    const ref = React.useRef(null);
-    const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, ref);
-    const pointerStartRef = React.useRef(null);
-    const swipeDeltaRef = React.useRef(null);
-    const duration = durationProp || context.duration;
-    const closeTimerStartTimeRef = React.useRef(0);
-    const closeTimerRemainingTimeRef = React.useRef(duration);
-    const closeTimerRef = React.useRef(0);
-    const { onToastAdd, onToastRemove } = context;
-    const handleClose = (0, import_core.useEvent)(() => {
-      onClose();
-    });
-    const startTimer = React.useCallback(
-      (duration2) => {
-        if (!duration2 || duration2 === Infinity)
-          return;
-        window.clearTimeout(closeTimerRef.current);
-        closeTimerStartTimeRef.current = (/* @__PURE__ */ new Date()).getTime();
-        closeTimerRef.current = window.setTimeout(handleClose, duration2);
-      },
-      [handleClose]
-    );
-    React.useEffect(() => {
-      const viewport = context.viewport;
-      if (viewport) {
-        const handleResume = () => {
-          startTimer(closeTimerRemainingTimeRef.current);
-        };
-        const handlePause = () => {
-          const elapsedTime = (/* @__PURE__ */ new Date()).getTime() - closeTimerStartTimeRef.current;
-          closeTimerRemainingTimeRef.current = closeTimerRemainingTimeRef.current - elapsedTime;
-          window.clearTimeout(closeTimerRef.current);
-        };
-        viewport.addEventListener(VIEWPORT_PAUSE, handlePause);
-        viewport.addEventListener(VIEWPORT_RESUME, handleResume);
-        return () => {
-          viewport.removeEventListener(VIEWPORT_PAUSE, handlePause);
-          viewport.removeEventListener(VIEWPORT_RESUME, handleResume);
-        };
+var import_constants = require("./constants");
+var import_createToast = require("./createToast");
+var import_ToastAnnounce = require("./ToastAnnounce");
+var import_ToastImpl = require("./ToastImpl");
+var import_ToastProvider = require("./ToastProvider");
+var import_ToastViewport = require("./ToastViewport");
+const TITLE_NAME = "ToastTitle";
+const ToastTitleFrame = (0, import_core.styled)(import_text.SizableText, {
+  name: TITLE_NAME,
+  color: "$color",
+  variants: {
+    unstyled: {
+      false: {
+        size: "$4"
       }
-    }, [context.viewport, duration, startTimer]);
-    React.useEffect(() => {
-      if (open && !context.isClosePausedRef.current)
-        startTimer(duration);
-    }, [open, duration, context.isClosePausedRef, startTimer]);
-    React.useEffect(() => {
-      onToastAdd();
-      return () => onToastRemove();
-    }, [onToastAdd, onToastRemove]);
-    if (!context.viewport)
-      return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        ToastAnnounce,
-        {
-          __scopeToast,
-          role: "status",
-          "aria-live": type === "foreground" ? "assertive" : "polite",
-          "aria-atomic": true,
-          children: props.children
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        ToastInteractiveProvider,
-        {
-          scope: __scopeToast,
-          isInteractive: true,
-          onClose: handleClose,
-          children: ReactDOM.createPortal(
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {}),
-            // <Collection.ItemSlot scope={__scopeToast}>
-            // <DismissableLayer.Root
-            //   asChild
-            //   onEscapeKeyDown={composeEventHandlers(onEscapeKeyDown, () => {
-            //     if (!context.isFocusedToastEscapeKeyDownRef.current) handleClose()
-            //     context.isFocusedToastEscapeKeyDownRef.current = false
-            //   })}
-            // >
-            // <Primitive.li
-            //   // Ensure toasts are announced as status list or status when focused
-            //   role="status"
-            //   aria-live="off"
-            //   aria-atomic
-            //   tabIndex={0}
-            //   data-state={open ? 'open' : 'closed'}
-            //   data-swipe-direction={context.swipeDirection}
-            //   {...toastProps}
-            //   ref={composedRefs}
-            //   style={{ userSelect: 'none', touchAction: 'none', ...props.style }}
-            //   onKeyDown={composeEventHandlers(props.onKeyDown, (event) => {
-            //     if (event.key !== 'Escape') return
-            //     onEscapeKeyDown?.(event.nativeEvent)
-            //     if (!event.nativeEvent.defaultPrevented) {
-            //       context.isFocusedToastEscapeKeyDownRef.current = true
-            //       handleClose()
-            //     }
-            //   })}
-            //   onPointerDown={composeEventHandlers(props.onPointerDown, (event) => {
-            //     if (event.button !== 0) return
-            //     pointerStartRef.current = { x: event.clientX, y: event.clientY }
-            //   })}
-            //   onPointerMove={composeEventHandlers(props.onPointerMove, (event) => {
-            //     if (!pointerStartRef.current) return
-            //     const x = event.clientX - pointerStartRef.current.x
-            //     const y = event.clientY - pointerStartRef.current.y
-            //     const hasSwipeMoveStarted = Boolean(swipeDeltaRef.current)
-            //     const isHorizontalSwipe = ['left', 'right'].includes(context.swipeDirection)
-            //     const clamp = ['left', 'up'].includes(context.swipeDirection)
-            //       ? Math.min
-            //       : Math.max
-            //     const clampedX = isHorizontalSwipe ? clamp(0, x) : 0
-            //     const clampedY = !isHorizontalSwipe ? clamp(0, y) : 0
-            //     const moveStartBuffer = event.pointerType === 'touch' ? 10 : 2
-            //     const delta = { x: clampedX, y: clampedY }
-            //     const eventDetail = { originalEvent: event, delta }
-            //     if (hasSwipeMoveStarted) {
-            //       swipeDeltaRef.current = delta
-            //       handleAndDispatchCustomEvent(TOAST_SWIPE_MOVE, onSwipeMove, eventDetail, {
-            //         discrete: false,
-            //       })
-            //     } else if (isDeltaInDirection(delta, context.swipeDirection, moveStartBuffer)) {
-            //       swipeDeltaRef.current = delta
-            //       handleAndDispatchCustomEvent(TOAST_SWIPE_START, onSwipeStart, eventDetail, {
-            //         discrete: false,
-            //       })
-            //       ;(event.target as HTMLElement).setPointerCapture(event.pointerId)
-            //     } else if (Math.abs(x) > moveStartBuffer || Math.abs(y) > moveStartBuffer) {
-            //       // User is swiping in wrong direction so we disable swipe gesture
-            //       // for the current pointer down interaction
-            //       pointerStartRef.current = null
-            //     }
-            //   })}
-            //   onPointerUp={composeEventHandlers(props.onPointerUp, (event) => {
-            //     const delta = swipeDeltaRef.current
-            //     ;(event.target as HTMLElement).releasePointerCapture(event.pointerId)
-            //     swipeDeltaRef.current = null
-            //     pointerStartRef.current = null
-            //     if (delta) {
-            //       const toast = event.currentTarget
-            //       const eventDetail = { originalEvent: event, delta }
-            //       if (isDeltaInDirection(delta, context.swipeDirection, context.swipeThreshold)) {
-            //         handleAndDispatchCustomEvent(TOAST_SWIPE_END, onSwipeEnd, eventDetail, {
-            //           discrete: true,
-            //         })
-            //       } else {
-            //         handleAndDispatchCustomEvent(TOAST_SWIPE_CANCEL, onSwipeCancel, eventDetail, {
-            //           discrete: true,
-            //         })
-            //       }
-            //       // Prevent click event from triggering on items within the toast when
-            //       // pointer up is part of a swipe gesture
-            //       toast.addEventListener('click', (event) => event.preventDefault(), {
-            //         once: true,
-            //       })
-            //     }
-            //   })}
-            // />
-            // </DismissableLayer.Root>,
-            // </Collection.ItemSlot>,
-            context.viewport
-          )
-        }
-      )
-    ] });
-  }
-);
-ToastImpl.propTypes = {
-  type(props) {
-    if (props.type && !["foreground", "background"].includes(props.type)) {
-      const error = `Invalid prop \`type\` supplied to \`${TOAST_NAME}\`. Expected \`foreground | background\`.`;
-      return new Error(error);
     }
-    return null;
+  },
+  defaultVariants: {
+    unstyled: false
   }
-};
-const ToastAnnounce = (props) => {
-  const { __scopeToast, children, ...announceProps } = props;
-  const context = useToastProviderContext(TOAST_NAME, __scopeToast);
-  const [renderAnnounceText, setRenderAnnounceText] = React.useState(false);
-  const [isAnnounced, setIsAnnounced] = React.useState(false);
-  const [fragment, setFragment] = React.useState();
-  const [rootFragmentNode, setRootFragmentNode] = React.useState(null);
-  const announceTextContent = React.useMemo(() => {
-    return rootFragmentNode ? getAnnounceTextContent(rootFragmentNode) : null;
-  }, [rootFragmentNode]);
-  (0, import_core.useIsomorphicLayoutEffect)(() => {
-    setFragment(new DocumentFragment());
-  }, []);
-  useNextFrame(() => setRenderAnnounceText(true));
-  React.useEffect(() => {
-    const timer = window.setTimeout(() => setIsAnnounced(true), 1e3);
-    return () => window.clearTimeout(timer);
-  }, []);
-  return isAnnounced ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    fragment && // @ts-ignore
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_portal.Portal, { container: fragment, ref: setRootFragmentNode, children: [
-      context.label,
-      " ",
-      children
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_portal.Portal, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_visually_hidden.VisuallyHidden, { ...announceProps, children: renderAnnounceText && announceTextContent }) })
-  ] });
-};
-const TITLE_NAME = "ToastTitle";
+});
 const ToastTitle = React.forwardRef(
   (props, forwardedRef) => {
     const { __scopeToast, ...titleProps } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stacks.YStack, { ...titleProps, ref: forwardedRef });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToastTitleFrame, { ...titleProps, ref: forwardedRef });
   }
 );
 ToastTitle.displayName = TITLE_NAME;
 const DESCRIPTION_NAME = "ToastDescription";
-const ToastDescription = React.forwardRef((props, forwardedRef) => {
-  const { __scopeToast, ...descriptionProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stacks.YStack, { ...descriptionProps, ref: forwardedRef });
+const ToastDescriptionFrame = (0, import_core.styled)(import_text.SizableText, {
+  name: DESCRIPTION_NAME,
+  color: "$color11",
+  variants: {
+    unstyled: {
+      false: {
+        size: "$1"
+      }
+    }
+  },
+  defaultVariants: {
+    unstyled: false
+  }
 });
+const ToastDescription = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeToast, ...descriptionProps } = props;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToastDescriptionFrame, { ...descriptionProps, ref: forwardedRef });
+  }
+);
 ToastDescription.displayName = DESCRIPTION_NAME;
 const ACTION_NAME = "ToastAction";
 const ToastAction = React.forwardRef(
   (props, forwardedRef) => {
     const { altText, ...actionProps } = props;
-    const context = useToastInteractiveContext(ACTION_NAME, props.__scopeToast);
     if (!altText)
       return null;
-    return context.isInteractive ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToastClose, { ...actionProps, ref: forwardedRef }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: altText });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ToastAnnounce.ToastAnnounceExclude, { altText, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToastClose, { ...actionProps, ref: forwardedRef }) });
   }
 );
 ToastAction.propTypes = {
@@ -511,119 +110,72 @@ ToastAction.propTypes = {
 };
 ToastAction.displayName = ACTION_NAME;
 const CLOSE_NAME = "ToastClose";
+const ToastCloseFrame = (0, import_core.styled)(import_stacks.ThemeableStack, {
+  name: CLOSE_NAME,
+  tag: "button"
+});
 const ToastClose = React.forwardRef(
   (props, forwardedRef) => {
     const { __scopeToast, ...closeProps } = props;
-    const interactiveContext = useToastInteractiveContext(CLOSE_NAME, __scopeToast);
-    return interactiveContext.isInteractive ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_stacks.YStack,
+    const interactiveContext = (0, import_ToastImpl.useToastInteractiveContext)(CLOSE_NAME, __scopeToast);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ToastAnnounce.ToastAnnounceExclude, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      ToastCloseFrame,
       {
-        tag: "button",
+        accessibilityLabel: "Dialog Close",
         ...closeProps,
         ref: forwardedRef,
         onPress: (0, import_core.composeEventHandlers)(props.onPress, interactiveContext.onClose)
       }
-    ) : null;
+    ) });
   }
 );
 ToastClose.displayName = CLOSE_NAME;
-function handleAndDispatchCustomEvent(name, handler, detail, { discrete }) {
-  const currentTarget = detail.originalEvent.currentTarget;
-  const event = new CustomEvent(name, { bubbles: true, cancelable: true, detail });
-  if (handler)
-    currentTarget.addEventListener(name, handler, { once: true });
-  if (discrete) {
-  } else {
-    currentTarget.dispatchEvent(event);
-  }
-}
-const isDeltaInDirection = (delta, direction, threshold = 0) => {
-  const deltaX = Math.abs(delta.x);
-  const deltaY = Math.abs(delta.y);
-  const isDeltaX = deltaX > deltaY;
-  if (direction === "left" || direction === "right") {
-    return isDeltaX && deltaX > threshold;
-  } else {
-    return !isDeltaX && deltaY > threshold;
-  }
-};
-function useNextFrame(callback = () => {
-}) {
-  const fn = (0, import_core.useEvent)(callback);
-  (0, import_core.useIsomorphicLayoutEffect)(() => {
-    let raf1 = 0;
-    let raf2 = 0;
-    raf1 = window.requestAnimationFrame(
-      () => raf2 = window.requestAnimationFrame(fn)
+const ToastComponent = React.forwardRef(
+  import_ToastImpl.ToastImplFrame.extractable((props, forwardedRef) => {
+    const { forceMount, open: openProp, defaultOpen, onOpenChange, ...toastProps } = props;
+    const [open, setOpen] = (0, import_use_controllable_state.useControllableState)({
+      prop: openProp,
+      defaultProp: defaultOpen ?? true,
+      onChange: onOpenChange
+    });
+    const id = (0, import_core.useId)();
+    const onPause = (0, import_core.useEvent)(props.onPause);
+    const onResume = (0, import_core.useEvent)(props.onResume);
+    if (!forceMount && !open)
+      return null;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_ToastImpl.ToastImpl,
+      {
+        id,
+        open,
+        ...toastProps,
+        ref: forwardedRef,
+        onClose: () => setOpen(false),
+        onPause,
+        onResume,
+        onSwipeEnd: (0, import_core.composeEventHandlers)(props.onSwipeEnd, (event) => {
+          setOpen(false);
+        })
+      }
     );
-    return () => {
-      window.cancelAnimationFrame(raf1);
-      window.cancelAnimationFrame(raf2);
-    };
-  }, [fn]);
-}
-function getAnnounceTextContent(container) {
-  const textContent = [];
-  const childNodes = Array.from(container.childNodes);
-  childNodes.forEach((node) => {
-    if (node.nodeType === node.TEXT_NODE && node.textContent)
-      textContent.push(node.textContent);
-    if (isHTMLElement(node)) {
-      const isHidden = node.ariaHidden || node.hidden || node.style.display === "none";
-      if (!isHidden)
-        textContent.push(...getAnnounceTextContent(node));
-    }
-  });
-  return textContent;
-}
-function isHTMLElement(node) {
-  return node.nodeType === node.ELEMENT_NODE;
-}
-function getTabbableCandidates(container) {
-  const nodes = [];
-  const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
-    acceptNode: (node) => {
-      const isHiddenInput = node.tagName === "INPUT" && node.type === "hidden";
-      if (node.disabled || node.hidden || isHiddenInput)
-        return NodeFilter.FILTER_SKIP;
-      return node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
-    }
-  });
-  while (walker.nextNode())
-    nodes.push(walker.currentNode);
-  return nodes;
-}
-function focusFirst(candidates) {
-  const previouslyFocusedElement = document.activeElement;
-  return candidates.some((candidate) => {
-    if (candidate === previouslyFocusedElement)
-      return true;
-    candidate.focus();
-    return document.activeElement !== previouslyFocusedElement;
-  });
-}
-const Provider = ToastProvider;
-const Viewport = ToastViewport;
-const Root = Toast;
-const Title = ToastTitle;
-const Description = ToastDescription;
-const Action = ToastAction;
-const Close = ToastClose;
+  })
+);
+ToastComponent.displayName = import_constants.TOAST_NAME;
+const Toast = (0, import_core.withStaticProperties)(
+  (0, import_core.themeable)(ToastComponent, import_ToastImpl.ToastImplFrame.staticConfig),
+  {
+    Title: ToastTitle,
+    Description: ToastDescription,
+    Action: ToastAction,
+    Close: ToastClose
+  }
+);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  Action,
-  Close,
-  Description,
-  Provider,
-  Root,
-  Title,
   Toast,
-  ToastAction,
-  ToastClose,
-  ToastDescription,
   ToastProvider,
-  ToastTitle,
   ToastViewport,
-  Viewport
+  createToast,
+  createToastScope
 });
 //# sourceMappingURL=Toast.js.map