@octanejs/radix 0.1.32 → 0.1.33

package/dist/cjs/Toast.cjs

@@ -0,0 +1,733 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+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: () => Root,
+  ToastAction: () => Action,
+  ToastClose: () => Close,
+  ToastDescription: () => Description,
+  ToastProvider: () => Provider,
+  ToastTitle: () => Title,
+  ToastViewport: () => Viewport,
+  Viewport: () => Viewport,
+  createToastScope: () => createToastScope
+});
+module.exports = __toCommonJS(Toast_exports);
+var import_octane = require("octane");
+var import_collection = require("./collection.cjs");
+var import_compose_event_handlers = require("./compose-event-handlers.cjs");
+var import_compose_refs = require("./compose-refs.cjs");
+var import_context = require("./context.cjs");
+var import_DismissableLayer = require("./DismissableLayer.cjs");
+var import_internal = require("./internal.cjs");
+var import_Portal = require("./Portal.cjs");
+var import_Presence = require("./Presence.cjs");
+var import_Primitive = require("./Primitive.cjs");
+var import_use_callback_ref = require("./use-callback-ref.cjs");
+var import_useControllableState = require("./useControllableState.cjs");
+var import_VisuallyHidden = require("./VisuallyHidden.cjs");
+const PROVIDER_NAME = "ToastProvider";
+const [Collection, useCollection, createCollectionScope] = (0, import_collection.createCollection)("Toast");
+const [createToastContext, createToastScope] = (0, import_context.createContextScope)("Toast", [createCollectionScope]);
+const [ToastProviderProvider, useToastProviderContext] = createToastContext(PROVIDER_NAME);
+function Provider(props) {
+  const slot = (0, import_internal.S)("Toast.Provider");
+  const {
+    __scopeToast,
+    label = "Notification",
+    duration = 5e3,
+    swipeDirection = "right",
+    swipeThreshold = 50,
+    announcerContainer,
+    children
+  } = props ?? {};
+  const [viewport, setViewport] = (0, import_octane.useState)(null, (0, import_internal.subSlot)(slot, "viewport"));
+  const [toastCount, setToastCount] = (0, import_octane.useState)(0, (0, import_internal.subSlot)(slot, "count"));
+  const isFocusedToastEscapeKeyDownRef = (0, import_octane.useRef)(false, (0, import_internal.subSlot)(slot, "escKeyDown"));
+  const isClosePausedRef = (0, import_octane.useRef)(false, (0, import_internal.subSlot)(slot, "paused"));
+  return (0, import_octane.createElement)(Collection.Provider, {
+    scope: __scopeToast,
+    children: (0, import_octane.createElement)(ToastProviderProvider, {
+      scope: __scopeToast,
+      label,
+      duration,
+      swipeDirection,
+      swipeThreshold,
+      toastCount,
+      viewport,
+      onViewportChange: setViewport,
+      onToastAdd: (0, import_octane.useCallback)(
+        () => setToastCount((prevCount) => prevCount + 1),
+        [],
+        (0, import_internal.subSlot)(slot, "add")
+      ),
+      onToastRemove: (0, import_octane.useCallback)(
+        () => setToastCount((prevCount) => prevCount - 1),
+        [],
+        (0, import_internal.subSlot)(slot, "remove")
+      ),
+      isFocusedToastEscapeKeyDownRef,
+      isClosePausedRef,
+      announcerContainer,
+      children
+    })
+  });
+}
+const VIEWPORT_NAME = "ToastViewport";
+const VIEWPORT_DEFAULT_HOTKEY = ["F8"];
+const VIEWPORT_PAUSE = "toast.viewportPause";
+const VIEWPORT_RESUME = "toast.viewportResume";
+function Viewport(props) {
+  const slot = (0, import_internal.S)("Toast.Viewport");
+  const {
+    __scopeToast,
+    hotkey = VIEWPORT_DEFAULT_HOTKEY,
+    label = "Notifications ({hotkey})",
+    ref: forwardedRef,
+    ...viewportProps
+  } = props ?? {};
+  const context = useToastProviderContext(VIEWPORT_NAME, __scopeToast);
+  const getItems = useCollection(__scopeToast, (0, import_internal.subSlot)(slot, "items"));
+  const wrapperRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "wrapper"));
+  const headFocusProxyRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "head"));
+  const tailFocusProxyRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "tail"));
+  const ref = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "ref"));
+  const composedRefs = (0, import_compose_refs.useComposedRefs)(
+    forwardedRef,
+    ref,
+    context.onViewportChange,
+    (0, import_internal.subSlot)(slot, "refs")
+  );
+  const hotkeyLabel = hotkey.join("+").replace(/Key/g, "").replace(/Digit/g, "");
+  const hasToasts = context.toastCount > 0;
+  (0, import_octane.useEffect)(
+    () => {
+      const handleKeyDown = (event) => {
+        const isHotkeyPressed = hotkey.length !== 0 && hotkey.every((key) => event[key] || event.code === key);
+        if (isHotkeyPressed) ref.current?.focus();
+      };
+      document.addEventListener("keydown", handleKeyDown);
+      return () => document.removeEventListener("keydown", handleKeyDown);
+    },
+    [hotkey],
+    (0, import_internal.subSlot)(slot, "e:hotkey")
+  );
+  (0, import_octane.useEffect)(
+    () => {
+      const wrapper = wrapperRef.current;
+      const viewport = ref.current;
+      if (hasToasts && wrapper && viewport) {
+        const handlePause = () => {
+          if (!context.isClosePausedRef.current) {
+            const pauseEvent = new CustomEvent(VIEWPORT_PAUSE);
+            viewport.dispatchEvent(pauseEvent);
+            context.isClosePausedRef.current = true;
+          }
+        };
+        const handleResume = () => {
+          if (context.isClosePausedRef.current) {
+            const resumeEvent = new CustomEvent(VIEWPORT_RESUME);
+            viewport.dispatchEvent(resumeEvent);
+            context.isClosePausedRef.current = false;
+          }
+        };
+        const handleFocusOutResume = (event) => {
+          const isFocusMovingOutside = !wrapper.contains(event.relatedTarget);
+          if (isFocusMovingOutside) handleResume();
+        };
+        const handlePointerLeaveResume = () => {
+          const isFocusInside = wrapper.contains(document.activeElement);
+          if (!isFocusInside) handleResume();
+        };
+        wrapper.addEventListener("focusin", handlePause);
+        wrapper.addEventListener("focusout", handleFocusOutResume);
+        wrapper.addEventListener("pointermove", handlePause);
+        wrapper.addEventListener("pointerleave", handlePointerLeaveResume);
+        window.addEventListener("blur", handlePause);
+        window.addEventListener("focus", handleResume);
+        return () => {
+          wrapper.removeEventListener("focusin", handlePause);
+          wrapper.removeEventListener("focusout", handleFocusOutResume);
+          wrapper.removeEventListener("pointermove", handlePause);
+          wrapper.removeEventListener("pointerleave", handlePointerLeaveResume);
+          window.removeEventListener("blur", handlePause);
+          window.removeEventListener("focus", handleResume);
+        };
+      }
+    },
+    [hasToasts, context.isClosePausedRef],
+    (0, import_internal.subSlot)(slot, "e:pause")
+  );
+  const getSortedTabbableCandidates = (0, import_octane.useCallback)(
+    ({ tabbingDirection }) => {
+      const toastItems = getItems();
+      const tabbableCandidates = toastItems.map((toastItem) => {
+        const toastNode = toastItem.ref.current;
+        const toastTabbableCandidates = [toastNode, ...getTabbableCandidates(toastNode)];
+        return tabbingDirection === "forwards" ? toastTabbableCandidates : toastTabbableCandidates.reverse();
+      });
+      return (tabbingDirection === "forwards" ? tabbableCandidates.reverse() : tabbableCandidates).flat();
+    },
+    [getItems],
+    (0, import_internal.subSlot)(slot, "sorted")
+  );
+  (0, import_octane.useEffect)(
+    () => {
+      const viewport = ref.current;
+      if (viewport) {
+        const handleKeyDown = (event) => {
+          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) {
+              headFocusProxyRef.current?.focus();
+              return;
+            }
+            const tabbingDirection = isTabbingBackwards ? "backwards" : "forwards";
+            const sortedCandidates = getSortedTabbableCandidates({ tabbingDirection });
+            const index = sortedCandidates.findIndex(
+              (candidate) => candidate === focusedElement
+            );
+            if (focusFirst(sortedCandidates.slice(index + 1))) {
+              event.preventDefault();
+            } else {
+              isTabbingBackwards ? headFocusProxyRef.current?.focus() : tailFocusProxyRef.current?.focus();
+            }
+          }
+        };
+        viewport.addEventListener("keydown", handleKeyDown);
+        return () => viewport.removeEventListener("keydown", handleKeyDown);
+      }
+    },
+    [getItems, getSortedTabbableCandidates],
+    (0, import_internal.subSlot)(slot, "e:tab")
+  );
+  return (0, import_octane.createElement)(import_DismissableLayer.DismissableLayerBranch, {
+    ref: wrapperRef,
+    role: "region",
+    "aria-label": label.replace("{hotkey}", hotkeyLabel),
+    // Ensure virtual cursor from landmarks menus triggers focus/blur for pause/resume
+    tabIndex: -1,
+    // incase list has size when empty (e.g. padding), we remove pointer events so
+    // it doesn't prevent interactions with page elements that it overlays
+    style: { pointerEvents: hasToasts ? void 0 : "none" },
+    children: [
+      hasToasts ? (0, import_octane.createElement)(FocusProxy, {
+        key: "head",
+        __scopeToast,
+        ref: headFocusProxyRef,
+        onFocusFromOutsideViewport: () => {
+          const tabbableCandidates = getSortedTabbableCandidates({
+            tabbingDirection: "forwards"
+          });
+          focusFirst(tabbableCandidates);
+        }
+      }) : null,
+      /**
+       * tabindex on the the list so that it can be focused when items are removed. we focus
+       * the list instead of the viewport so it announces number of items remaining.
+       */
+      (0, import_octane.createElement)(Collection.Slot, {
+        key: "list",
+        scope: __scopeToast,
+        children: (0, import_octane.createElement)(import_Primitive.Primitive.ol, {
+          tabIndex: -1,
+          ...viewportProps,
+          ref: composedRefs,
+          // the runtime doesn't clobber the portalled toasts on re-render.
+          children: viewportProps.children
+        })
+      }),
+      hasToasts ? (0, import_octane.createElement)(FocusProxy, {
+        key: "tail",
+        __scopeToast,
+        ref: tailFocusProxyRef,
+        onFocusFromOutsideViewport: () => {
+          const tabbableCandidates = getSortedTabbableCandidates({
+            tabbingDirection: "backwards"
+          });
+          focusFirst(tabbableCandidates);
+        }
+      }) : null
+    ]
+  });
+}
+const FOCUS_PROXY_NAME = "ToastFocusProxy";
+function FocusProxy(props) {
+  const {
+    __scopeToast,
+    onFocusFromOutsideViewport,
+    ref: forwardedRef,
+    ...proxyProps
+  } = props ?? {};
+  const context = useToastProviderContext(FOCUS_PROXY_NAME, __scopeToast);
+  return (0, import_octane.createElement)(import_VisuallyHidden.VisuallyHidden, {
+    tabIndex: 0,
+    ...proxyProps,
+    ref: forwardedRef,
+    // Avoid page scrolling when focus is on the focus proxy
+    style: { position: "fixed" },
+    onFocus: (event) => {
+      const prevFocusedElement = event.relatedTarget;
+      const isFocusFromOutsideViewport = !context.viewport?.contains(prevFocusedElement);
+      if (isFocusFromOutsideViewport) onFocusFromOutsideViewport();
+    }
+  });
+}
+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";
+function Root(props) {
+  const slot = (0, import_internal.S)("Toast.Root");
+  const {
+    forceMount,
+    open: openProp,
+    defaultOpen,
+    onOpenChange,
+    ref: forwardedRef,
+    ...toastProps
+  } = props ?? {};
+  const [open, setOpen] = (0, import_useControllableState.useControllableState)(
+    { prop: openProp, defaultProp: defaultOpen ?? true, onChange: onOpenChange },
+    (0, import_internal.subSlot)(slot, "open")
+  );
+  return (0, import_octane.createElement)(import_Presence.Presence, {
+    present: forceMount || open,
+    children: (0, import_octane.createElement)(ToastImpl, {
+      open,
+      ...toastProps,
+      ref: forwardedRef,
+      onClose: () => setOpen(false),
+      onPause: (0, import_use_callback_ref.useCallbackRef)(props?.onPause, (0, import_internal.subSlot)(slot, "pause")),
+      onResume: (0, import_use_callback_ref.useCallbackRef)(props?.onResume, (0, import_internal.subSlot)(slot, "resume")),
+      onSwipeStart: (0, import_compose_event_handlers.composeEventHandlers)(props?.onSwipeStart, (event) => {
+        event.currentTarget.setAttribute("data-swipe", "start");
+      }),
+      onSwipeMove: (0, import_compose_event_handlers.composeEventHandlers)(props?.onSwipeMove, (event) => {
+        const { x, y } = event.detail.delta;
+        event.currentTarget.setAttribute("data-swipe", "move");
+        event.currentTarget.style.setProperty("--radix-toast-swipe-move-x", `${x}px`);
+        event.currentTarget.style.setProperty("--radix-toast-swipe-move-y", `${y}px`);
+      }),
+      onSwipeCancel: (0, import_compose_event_handlers.composeEventHandlers)(props?.onSwipeCancel, (event) => {
+        event.currentTarget.setAttribute("data-swipe", "cancel");
+        event.currentTarget.style.removeProperty("--radix-toast-swipe-move-x");
+        event.currentTarget.style.removeProperty("--radix-toast-swipe-move-y");
+        event.currentTarget.style.removeProperty("--radix-toast-swipe-end-x");
+        event.currentTarget.style.removeProperty("--radix-toast-swipe-end-y");
+      }),
+      onSwipeEnd: (0, import_compose_event_handlers.composeEventHandlers)(props?.onSwipeEnd, (event) => {
+        const { x, y } = event.detail.delta;
+        event.currentTarget.setAttribute("data-swipe", "end");
+        event.currentTarget.style.removeProperty("--radix-toast-swipe-move-x");
+        event.currentTarget.style.removeProperty("--radix-toast-swipe-move-y");
+        event.currentTarget.style.setProperty("--radix-toast-swipe-end-x", `${x}px`);
+        event.currentTarget.style.setProperty("--radix-toast-swipe-end-y", `${y}px`);
+        setOpen(false);
+      })
+    })
+  });
+}
+const [ToastInteractiveProvider, useToastInteractiveContext] = createToastContext(TOAST_NAME, {
+  onClose() {
+  }
+});
+function ToastImpl(props) {
+  const slot = (0, import_internal.S)("Toast.Impl");
+  const {
+    __scopeToast,
+    type = "foreground",
+    duration: durationProp,
+    open,
+    onClose,
+    onEscapeKeyDown,
+    onPause,
+    onResume,
+    onSwipeStart,
+    onSwipeMove,
+    onSwipeCancel,
+    onSwipeEnd,
+    ref: forwardedRef,
+    ...toastProps
+  } = props ?? {};
+  const context = useToastProviderContext(TOAST_NAME, __scopeToast);
+  const [node, setNode] = (0, import_octane.useState)(null, (0, import_internal.subSlot)(slot, "node"));
+  const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, setNode, (0, import_internal.subSlot)(slot, "refs"));
+  const pointerStartRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "pStart"));
+  const swipeDeltaRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "delta"));
+  const duration = durationProp || context.duration;
+  const closeTimerStartTimeRef = (0, import_octane.useRef)(0, (0, import_internal.subSlot)(slot, "timerStart"));
+  const closeTimerRemainingTimeRef = (0, import_octane.useRef)(duration, (0, import_internal.subSlot)(slot, "timerRemaining"));
+  const closeTimerRef = (0, import_octane.useRef)(0, (0, import_internal.subSlot)(slot, "timer"));
+  const { onToastAdd, onToastRemove } = context;
+  const handleClose = (0, import_use_callback_ref.useCallbackRef)(
+    () => {
+      const isFocusInToast = node?.contains(document.activeElement);
+      if (isFocusInToast) context.viewport?.focus();
+      onClose();
+    },
+    (0, import_internal.subSlot)(slot, "close")
+  );
+  const startTimer = (0, import_octane.useCallback)(
+    (duration2) => {
+      if (!duration2 || duration2 === Infinity) return;
+      window.clearTimeout(closeTimerRef.current);
+      closeTimerStartTimeRef.current = (/* @__PURE__ */ new Date()).getTime();
+      closeTimerRef.current = window.setTimeout(handleClose, duration2);
+    },
+    [handleClose],
+    (0, import_internal.subSlot)(slot, "startTimer")
+  );
+  (0, import_octane.useEffect)(
+    () => {
+      const viewport = context.viewport;
+      if (viewport) {
+        const handleResume = () => {
+          startTimer(closeTimerRemainingTimeRef.current);
+          onResume?.();
+        };
+        const handlePause = () => {
+          const elapsedTime = (/* @__PURE__ */ new Date()).getTime() - closeTimerStartTimeRef.current;
+          closeTimerRemainingTimeRef.current = closeTimerRemainingTimeRef.current - elapsedTime;
+          window.clearTimeout(closeTimerRef.current);
+          onPause?.();
+        };
+        viewport.addEventListener(VIEWPORT_PAUSE, handlePause);
+        viewport.addEventListener(VIEWPORT_RESUME, handleResume);
+        return () => {
+          viewport.removeEventListener(VIEWPORT_PAUSE, handlePause);
+          viewport.removeEventListener(VIEWPORT_RESUME, handleResume);
+        };
+      }
+    },
+    [context.viewport, duration, onPause, onResume, startTimer],
+    (0, import_internal.subSlot)(slot, "e:viewport")
+  );
+  (0, import_octane.useEffect)(
+    () => {
+      if (open && !context.isClosePausedRef.current) startTimer(duration);
+    },
+    [open, duration, context.isClosePausedRef, startTimer],
+    (0, import_internal.subSlot)(slot, "e:open")
+  );
+  (0, import_octane.useEffect)(
+    () => {
+      return () => {
+        window.clearTimeout(closeTimerRef.current);
+      };
+    },
+    [],
+    (0, import_internal.subSlot)(slot, "e:clear")
+  );
+  (0, import_octane.useEffect)(
+    () => {
+      onToastAdd();
+      return () => onToastRemove();
+    },
+    [onToastAdd, onToastRemove],
+    (0, import_internal.subSlot)(slot, "e:count")
+  );
+  const announceTextContent = (0, import_octane.useMemo)(
+    () => node ? getAnnounceTextContent(node) : null,
+    [node],
+    (0, import_internal.subSlot)(slot, "announce")
+  );
+  if (!context.viewport) return null;
+  return [
+    announceTextContent ? (0, import_octane.createElement)(ToastAnnounce, {
+      key: "announce",
+      __scopeToast,
+      // Toasts are always role=status to avoid stuttering issues with role=alert in SRs.
+      role: "status",
+      "aria-live": type === "foreground" ? "assertive" : "polite",
+      children: announceTextContent
+    }) : null,
+    (0, import_octane.createElement)(ToastInteractiveProvider, {
+      key: "toast",
+      scope: __scopeToast,
+      onClose: handleClose,
+      children: (0, import_octane.createPortal)(
+        (0, import_octane.createElement)(Collection.ItemSlot, {
+          scope: __scopeToast,
+          children: (0, import_octane.createElement)(import_DismissableLayer.DismissableLayer, {
+            asChild: true,
+            onEscapeKeyDown: (0, import_compose_event_handlers.composeEventHandlers)(onEscapeKeyDown, () => {
+              if (!context.isFocusedToastEscapeKeyDownRef.current) handleClose();
+              context.isFocusedToastEscapeKeyDownRef.current = false;
+            }),
+            children: (0, import_octane.createElement)(import_Primitive.Primitive.li, {
+              // Ensure toasts are announced as status list or status when focused
+              tabIndex: 0,
+              "data-state": open ? "open" : "closed",
+              "data-swipe-direction": context.swipeDirection,
+              ...toastProps,
+              ref: composedRefs,
+              style: { userSelect: "none", touchAction: "none", ...props?.style },
+              onKeyDown: (0, import_compose_event_handlers.composeEventHandlers)(toastProps.onKeyDown, (event) => {
+                if (event.key !== "Escape") return;
+                onEscapeKeyDown?.(event);
+                if (!event.defaultPrevented) {
+                  context.isFocusedToastEscapeKeyDownRef.current = true;
+                  handleClose();
+                }
+              }),
+              onPointerDown: (0, import_compose_event_handlers.composeEventHandlers)(
+                toastProps.onPointerDown,
+                (event) => {
+                  if (event.button !== 0) return;
+                  pointerStartRef.current = { x: event.clientX, y: event.clientY };
+                }
+              ),
+              onPointerMove: (0, import_compose_event_handlers.composeEventHandlers)(
+                toastProps.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.setPointerCapture(event.pointerId);
+                  } else if (Math.abs(x) > moveStartBuffer || Math.abs(y) > moveStartBuffer) {
+                    pointerStartRef.current = null;
+                  }
+                }
+              ),
+              onPointerUp: (0, import_compose_event_handlers.composeEventHandlers)(toastProps.onPointerUp, (event) => {
+                const delta = swipeDeltaRef.current;
+                const target = event.target;
+                if (target.hasPointerCapture(event.pointerId)) {
+                  target.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
+                    });
+                  }
+                  toast.addEventListener("click", (event2) => event2.preventDefault(), {
+                    once: true
+                  });
+                }
+              })
+            })
+          })
+        }),
+        context.viewport
+      )
+    })
+  ];
+}
+function ToastAnnounce(props) {
+  const slot = (0, import_internal.S)("Toast.Announce");
+  const { __scopeToast, children, ...announceProps } = props ?? {};
+  const context = useToastProviderContext(TOAST_NAME, __scopeToast);
+  const [renderAnnounceText, setRenderAnnounceText] = (0, import_octane.useState)(false, (0, import_internal.subSlot)(slot, "render"));
+  const [isAnnounced, setIsAnnounced] = (0, import_octane.useState)(false, (0, import_internal.subSlot)(slot, "announced"));
+  useNextFrame(() => setRenderAnnounceText(true), (0, import_internal.subSlot)(slot, "frame"));
+  (0, import_octane.useEffect)(
+    () => {
+      const timer = window.setTimeout(() => setIsAnnounced(true), 1e3);
+      return () => window.clearTimeout(timer);
+    },
+    [],
+    (0, import_internal.subSlot)(slot, "e:cleanup")
+  );
+  return isAnnounced ? null : (0, import_octane.createElement)(import_Portal.Portal, {
+    asChild: true,
+    container: context.announcerContainer || void 0,
+    children: (0, import_octane.createElement)(import_VisuallyHidden.VisuallyHidden, {
+      ...announceProps,
+      children: renderAnnounceText ? [context.label, " ", ...Array.isArray(children) ? children : [children]] : null
+    })
+  });
+}
+function Title(props) {
+  const { __scopeToast, ...titleProps } = props ?? {};
+  return (0, import_octane.createElement)(import_Primitive.Primitive.div, { ...titleProps });
+}
+function Description(props) {
+  const { __scopeToast, ...descriptionProps } = props ?? {};
+  return (0, import_octane.createElement)(import_Primitive.Primitive.div, { ...descriptionProps });
+}
+function Action(props) {
+  const { altText, ref: forwardedRef, ...actionProps } = props ?? {};
+  if (!altText || !String(altText).trim()) {
+    return null;
+  }
+  return (0, import_octane.createElement)(ToastAnnounceExclude, {
+    altText,
+    asChild: true,
+    children: (0, import_octane.createElement)(Close, { ...actionProps, ref: forwardedRef })
+  });
+}
+const CLOSE_NAME = "ToastClose";
+function Close(props) {
+  const { __scopeToast, ref: forwardedRef, ...closeProps } = props ?? {};
+  const interactiveContext = useToastInteractiveContext(CLOSE_NAME, __scopeToast);
+  return (0, import_octane.createElement)(ToastAnnounceExclude, {
+    asChild: true,
+    children: (0, import_octane.createElement)(import_Primitive.Primitive.button, {
+      type: "button",
+      ...closeProps,
+      ref: forwardedRef,
+      onClick: (0, import_compose_event_handlers.composeEventHandlers)(props?.onClick, interactiveContext.onClose)
+    })
+  });
+}
+function ToastAnnounceExclude(props) {
+  const { __scopeToast, altText, ref: forwardedRef, ...announceExcludeProps } = props ?? {};
+  return (0, import_octane.createElement)(import_Primitive.Primitive.div, {
+    "data-radix-toast-announce-exclude": "",
+    "data-radix-toast-announce-alt": altText || void 0,
+    ...announceExcludeProps,
+    ref: forwardedRef
+  });
+}
+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";
+      const isExcluded = node.dataset.radixToastAnnounceExclude === "";
+      if (!isHidden) {
+        if (isExcluded) {
+          const altText = node.dataset.radixToastAnnounceAlt;
+          if (altText) textContent.push(altText);
+        } else {
+          textContent.push(...getAnnounceTextContent(node));
+        }
+      }
+    }
+  });
+  return textContent;
+}
+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) {
+    (0, import_Primitive.dispatchDiscreteCustomEvent)(currentTarget, event);
+  } 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, slot) {
+  const fn = (0, import_use_callback_ref.useCallbackRef)(callback, (0, import_internal.subSlot)(slot, "cb"));
+  (0, import_octane.useLayoutEffect)(
+    () => {
+      let raf1 = 0;
+      let raf2 = 0;
+      raf1 = window.requestAnimationFrame(() => raf2 = window.requestAnimationFrame(fn));
+      return () => {
+        window.cancelAnimationFrame(raf1);
+        window.cancelAnimationFrame(raf2);
+      };
+    },
+    [fn],
+    (0, import_internal.subSlot)(slot, "e")
+  );
+}
+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;
+  });
+}
+// 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,
+  createToastScope
+});