@dreamtree-org/twreact-ui 1.3.10 → 2.0.0

package/dist/esm/components/feedback/ToastItem.js

@@ -0,0 +1,348 @@
+'use client';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { forwardRef, useState, useRef, useCallback, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { cn } from '../../utils/cn.js';
+import { Bell, Info, AlertTriangle, XCircle, CheckCircle2, X } from 'lucide-react';
+import { TOUCH_TARGET } from '../../utils/touchTarget.js';
+import { usePresentation } from '../../hooks/usePresentation.js';
+import { useToastSwipe } from './ToastSwipe.js';
+
+var _excluded = ["id", "title", "message", "description", "type", "duration", "onClose", "position", "statusIcon", "actions", "color", "footerNote", "showFooterNote", "portal", "paused", "swipeToDismiss", "mobilePosition", "mobileOffset", "closeLabel", "className", "style", "onMouseEnter", "onMouseLeave", "onFocus", "onBlur", "onPointerDown", "onPointerUp", "onPointerCancel"];
+// The single toast card. Re-exported as `Toast` from ./Toast.jsx, which also
+// holds the provider / hook; the stack lives in ./ToastStack.jsx.
+// Errors interrupt (role="alert", assertive); everything else waits for the
+// screen reader to finish (role="status", polite). Consumers can still pass
+// their own role / aria-live, which win because ...props spreads last.
+var liveRegionProps = function liveRegionProps(type) {
+  return type === 'error' ? {
+    role: 'alert',
+    'aria-live': 'assertive',
+    'aria-atomic': 'true'
+  } : {
+    role: 'status',
+    'aria-live': 'polite',
+    'aria-atomic': 'true'
+  };
+};
+var STATUS_CONFIG = {
+  success: {
+    icon: CheckCircle2,
+    iconClass: 'text-success-600 dark:text-success-400',
+    progressClass: 'bg-success-500 dark:bg-success-400'
+  },
+  error: {
+    icon: XCircle,
+    iconClass: 'text-error-600 dark:text-error-400',
+    progressClass: 'bg-error-500 dark:bg-error-400'
+  },
+  warning: {
+    icon: AlertTriangle,
+    iconClass: 'text-warning-600 dark:text-warning-400',
+    progressClass: 'bg-warning-500 dark:bg-warning-400'
+  },
+  info: {
+    icon: Info,
+    iconClass: 'text-info-600 dark:text-info-400',
+    progressClass: 'bg-info-500 dark:bg-info-400'
+  },
+  "default": {
+    icon: Bell,
+    iconClass: 'text-primary-600 dark:text-primary-400',
+    progressClass: 'bg-primary-500 dark:bg-primary-400'
+  }
+};
+// Phone offset above the bottom edge (default 5rem, clearing a FootNav, in the
+// classes below); `mobileOffset` sets this CSS variable.
+var MOBILE_OFFSET_VAR = '--dt-toast-mobile-offset';
+/** CSS length for `mobileOffset`: numbers are px, strings pass through. */
+var toCssLength = function toCssLength(value) {
+  return typeof value === 'number' ? "".concat(value, "px") : value;
+};
+var STANDALONE_POSITION_CLASSES = {
+  'top-right': 'top-4 right-4',
+  'top-left': 'top-4 left-4',
+  'bottom-right': 'bottom-4 right-4',
+  'bottom-left': 'bottom-4 left-4',
+  'top-center': 'top-4 left-1/2 transform -translate-x-1/2',
+  'bottom-center': 'bottom-4 left-1/2 transform -translate-x-1/2'
+};
+// Phone placement for a standalone (portaled) toast: full width inside a 1rem
+// gutter, above the safe area and the FootNav.
+var STANDALONE_MOBILE_CLASSES = {
+  'bottom-center': 'inset-x-4 bottom-[calc(var(--dt-toast-mobile-offset,5rem)+env(safe-area-inset-bottom,0px))]',
+  'top-center': 'inset-x-4 top-[calc(1rem+env(safe-area-inset-top,0px))]'
+};
+var ACTION_BASE = 'inline-flex items-center justify-center px-3 py-1.5 text-xs font-medium rounded-control border shadow-xs transition-colors motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-1 focus-visible:ring-offset-surface';
+var ACTION_PRIMARY = 'bg-primary-600 hover:bg-primary-700 text-white border-primary-600 dark:bg-primary-500 dark:hover:bg-primary-400 dark:border-primary-500';
+var ACTION_SECONDARY = 'bg-line/40 text-foreground border-line hover:bg-line/70 dark:bg-line/30 dark:hover:bg-line/60';
+var callAll = function callAll() {
+  for (var _len = arguments.length, fns = new Array(_len), _key = 0; _key < _len; _key++) {
+    fns[_key] = arguments[_key];
+  }
+  return function (e) {
+    return fns.forEach(function (fn) {
+      return fn === null || fn === void 0 ? void 0 : fn(e);
+    });
+  };
+};
+// Pausing the auto-dismiss timer: hover, focus inside, a touch press, a swipe,
+// the "Click to stop." footer link, or the `paused` prop (the stack pauses
+// every toast while the user interacts with it).
+function usePauseReasons() {
+  var _useState = useState({}),
+    _useState2 = _slicedToArray(_useState, 2),
+    reasons = _useState2[0],
+    setReasons = _useState2[1];
+  var set = useCallback(function (reason, on) {
+    setReasons(function (prev) {
+      return Boolean(prev[reason]) === on ? prev : _objectSpread2(_objectSpread2({}, prev), {}, _defineProperty({}, reason, on));
+    });
+  }, []);
+  return [Object.values(reasons).some(Boolean), set];
+}
+var Toast = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var id = _ref.id,
+    title = _ref.title,
+    message = _ref.message,
+    description = _ref.description,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'info' : _ref$type,
+    _ref$duration = _ref.duration,
+    duration = _ref$duration === void 0 ? 5000 : _ref$duration,
+    onClose = _ref.onClose,
+    _ref$position = _ref.position,
+    position = _ref$position === void 0 ? 'top-right' : _ref$position,
+    statusIcon = _ref.statusIcon,
+    _ref$actions = _ref.actions,
+    actions = _ref$actions === void 0 ? [] : _ref$actions,
+    color = _ref.color,
+    footerNote = _ref.footerNote,
+    _ref$showFooterNote = _ref.showFooterNote,
+    showFooterNote = _ref$showFooterNote === void 0 ? false : _ref$showFooterNote,
+    _ref$portal = _ref.portal,
+    portal = _ref$portal === void 0 ? true : _ref$portal,
+    _ref$paused = _ref.paused,
+    paused = _ref$paused === void 0 ? false : _ref$paused,
+    _ref$swipeToDismiss = _ref.swipeToDismiss,
+    swipeToDismiss = _ref$swipeToDismiss === void 0 ? true : _ref$swipeToDismiss,
+    _ref$mobilePosition = _ref.mobilePosition,
+    mobilePosition = _ref$mobilePosition === void 0 ? 'bottom-center' : _ref$mobilePosition,
+    mobileOffset = _ref.mobileOffset,
+    _ref$closeLabel = _ref.closeLabel,
+    closeLabel = _ref$closeLabel === void 0 ? 'Close notification' : _ref$closeLabel,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    style = _ref.style,
+    onMouseEnter = _ref.onMouseEnter,
+    onMouseLeave = _ref.onMouseLeave,
+    onFocus = _ref.onFocus,
+    onBlur = _ref.onBlur,
+    onPointerDown = _ref.onPointerDown,
+    onPointerUp = _ref.onPointerUp,
+    onPointerCancel = _ref.onPointerCancel,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useState3 = useState(true),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isVisible = _useState4[0],
+    setIsVisible = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isLeaving = _useState6[0],
+    setIsLeaving = _useState6[1];
+  var _usePauseReasons = usePauseReasons(),
+    _usePauseReasons2 = _slicedToArray(_usePauseReasons, 2),
+    selfPaused = _usePauseReasons2[0],
+    setPaused = _usePauseReasons2[1];
+  var isPaused = paused || selfPaused;
+  var isPhone = usePresentation('auto') === 'sheet';
+  var progressBarRef = useRef(null);
+  var timerTextRef = useRef(null);
+  var startTimeRef = useRef(null);
+  var remainingRef = useRef(duration);
+  var timerRef = useRef(null);
+  var animFrameRef = useRef(null);
+  var handleClose = useCallback(function () {
+    if (isLeaving) return;
+    setIsLeaving(true);
+    setTimeout(function () {
+      setIsVisible(false);
+      onClose === null || onClose === void 0 || onClose(id);
+    }, 300);
+  }, [id, onClose, isLeaving]);
+  var swipe = useToastSwipe({
+    enabled: swipeToDismiss && !isLeaving,
+    onDismiss: handleClose
+  });
+  var handleStopTimer = useCallback(function (e) {
+    e === null || e === void 0 || e.stopPropagation();
+    setPaused('stopped', true);
+    if (timerRef.current) clearTimeout(timerRef.current);
+    if (animFrameRef.current) cancelAnimationFrame(animFrameRef.current);
+  }, [setPaused]);
+  // Direct DOM-based progress updates to prevent 60 FPS React re-renders and glitches
+  useEffect(function () {
+    if (duration <= 0) return;
+    if (isPaused) {
+      if (timerRef.current) clearTimeout(timerRef.current);
+      if (animFrameRef.current) cancelAnimationFrame(animFrameRef.current);
+      return;
+    }
+    startTimeRef.current = Date.now();
+    timerRef.current = setTimeout(function () {
+      handleClose();
+    }, remainingRef.current);
+    var _updateProgress = function updateProgress() {
+      var elapsed = startTimeRef.current ? Date.now() - startTimeRef.current : 0;
+      var currentRemaining = Math.max(0, remainingRef.current - elapsed);
+      var pct = currentRemaining / duration * 100;
+      if (progressBarRef.current) {
+        progressBarRef.current.style.width = "".concat(pct, "%");
+      }
+      if (timerTextRef.current) {
+        var secs = Math.ceil(currentRemaining / 1000);
+        timerTextRef.current.textContent = "This message will close in ".concat(secs, " seconds. ");
+      }
+      if (currentRemaining > 0 && !isPaused) {
+        animFrameRef.current = requestAnimationFrame(_updateProgress);
+      }
+    };
+    animFrameRef.current = requestAnimationFrame(_updateProgress);
+    return function () {
+      if (timerRef.current) clearTimeout(timerRef.current);
+      if (animFrameRef.current) cancelAnimationFrame(animFrameRef.current);
+      if (!isPaused && startTimeRef.current) {
+        var elapsed = Date.now() - startTimeRef.current;
+        remainingRef.current = Math.max(0, remainingRef.current - elapsed);
+      }
+    };
+  }, [duration, isPaused, handleClose]);
+  if (!isVisible) return null;
+  var statusStyle = STATUS_CONFIG[type] || STATUS_CONFIG.info;
+  var StatusIconComponent = statusStyle.icon;
+  var bodyText = description || message;
+  var mobileClass = portal && isPhone && mobilePosition ? STANDALONE_MOBILE_CLASSES[mobilePosition] : null;
+  var positionClass = mobileClass || STANDALONE_POSITION_CLASSES[position] || STANDALONE_POSITION_CLASSES['top-right'];
+  // Swipe: follow the finger, fade with distance, then leave the way it went.
+  // A centred standalone toast keeps its -50% shift under the inline transform.
+  var rootStyle = _objectSpread2({}, style);
+  if (mobileClass && mobileOffset != null) rootStyle[MOBILE_OFFSET_VAR] = toCssLength(mobileOffset);
+  var centerShift = portal && !mobileClass && /-center$/.test(position) ? 'translateX(-50%) ' : '';
+  if (swipe.swipedOut) {
+    rootStyle.transform = "".concat(centerShift, "translateX(").concat(swipe.swipedOut * 110, "%)");
+    rootStyle.opacity = 0;
+  } else if (swipe.offset) {
+    rootStyle.transform = "".concat(centerShift, "translateX(").concat(swipe.offset, "px)");
+    rootStyle.opacity = Math.max(0.2, 1 - Math.abs(swipe.offset) / 240);
+  }
+  var onTouchPress = function onTouchPress(e) {
+    if (e.pointerType && e.pointerType !== 'mouse') setPaused('touch', true);
+  };
+  var onTouchRelease = function onTouchRelease() {
+    return setPaused('touch', false);
+  };
+  var toastContent = jsxs("div", _objectSpread2(_objectSpread2(_objectSpread2({
+    ref: ref,
+    "data-swiping": swipe.dragging ? '' : undefined,
+    "data-swipe-out": swipe.swipedOut ? swipe.swipedOut > 0 ? 'right' : 'left' : undefined,
+    onMouseEnter: callAll(function () {
+      return setPaused('hover', true);
+    }, onMouseEnter),
+    onMouseLeave: callAll(function () {
+      return setPaused('hover', false);
+    }, onMouseLeave),
+    onFocus: callAll(function () {
+      return setPaused('focus', true);
+    }, onFocus),
+    onBlur: callAll(function (e) {
+      if (!e.currentTarget.contains(e.relatedTarget)) setPaused('focus', false);
+    }, onBlur),
+    onPointerDown: callAll(onTouchPress, swipe.dragProps.onPointerDown, onPointerDown),
+    onPointerMove: swipe.dragProps.onPointerMove,
+    onPointerUp: callAll(onTouchRelease, swipe.dragProps.onPointerUp, onPointerUp),
+    onPointerCancel: callAll(onTouchRelease, swipe.dragProps.onPointerCancel, onPointerCancel),
+    className: cn('relative overflow-hidden rounded-card border border-line bg-surface text-foreground shadow-overlay', 'dark:border-line dark:bg-surface dark:text-foreground', 'max-w-md w-full touch-pan-y select-none', !swipe.dragging && 'transition-[opacity,transform] duration-base ease-standard motion-reduce:transition-none', isLeaving && !swipe.swipedOut ? 'opacity-0 scale-95 translate-y-1 motion-reduce:scale-100 motion-reduce:translate-y-0' : 'animate-slide-up motion-reduce:animate-none', portal ? ['fixed z-toast', positionClass, mobileClass && 'w-auto max-w-none'] : '', className),
+    style: rootStyle
+  }, liveRegionProps(type)), props), {}, {
+    children: [jsx("div", {
+      className: "p-4",
+      children: jsxs("div", {
+        className: "flex items-start gap-3 justify-between",
+        children: [jsx("span", {
+          className: "flex-shrink-0 mt-0.5",
+          "aria-hidden": "true",
+          children: statusIcon ? statusIcon : jsx(StatusIconComponent, {
+            className: cn('h-5 w-5', statusStyle.iconClass)
+          })
+        }), jsxs("div", {
+          className: "flex-1 min-w-0 select-text",
+          children: [title && jsx("h4", {
+            className: "text-sm font-semibold text-foreground leading-snug",
+            children: title
+          }), bodyText && jsx("p", {
+            className: "mt-1 text-xs text-muted leading-relaxed whitespace-pre-line",
+            children: bodyText
+          }), actions && actions.length > 0 && jsx("div", {
+            className: "mt-3 flex items-center gap-2 flex-wrap",
+            children: actions.map(function (actItem, idx) {
+              return jsx("button", {
+                type: "button",
+                onClick: function onClick(e) {
+                  var _actItem$onClick;
+                  (_actItem$onClick = actItem.onClick) === null || _actItem$onClick === void 0 || _actItem$onClick.call(actItem, e);
+                  if (actItem.dismiss !== false) {
+                    handleClose();
+                  }
+                },
+                className: cn(ACTION_BASE, actItem.variant === 'primary' ? ACTION_PRIMARY : ACTION_SECONDARY, actItem.className),
+                children: actItem.label
+              }, actItem.id || actItem.label || "act-".concat(idx));
+            })
+          })]
+        }), jsx("button", {
+          type: "button",
+          "aria-label": closeLabel,
+          className: cn('inline-flex h-11 w-11 -mr-2.5 -mt-2.5 flex-shrink-0 items-center justify-center rounded-control text-muted hover:text-foreground hover:bg-line/50 transition-colors motion-reduce:transition-none outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500', TOUCH_TARGET),
+          onClick: handleClose,
+          children: jsx(X, {
+            className: "h-4 w-4",
+            "aria-hidden": "true"
+          })
+        })]
+      })
+    }), (showFooterNote || footerNote) && duration > 0 && jsx("div", {
+      className: "px-4 py-2 bg-line/20 border-t border-line text-[11px] text-muted flex items-center justify-between",
+      children: jsx("span", {
+        children: footerNote ? footerNote : jsxs(Fragment, {
+          children: [jsxs("span", {
+            ref: timerTextRef,
+            children: ["This message will close in ", Math.ceil(duration / 1000), " seconds.", ' ']
+          }), jsx("button", {
+            type: "button",
+            onClick: handleStopTimer,
+            className: "font-medium text-foreground hover:underline inline rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500",
+            children: "Click to stop."
+          })]
+        })
+      })
+    }), duration > 0 && jsx("div", {
+      className: "absolute bottom-0 left-0 right-0 h-0.5 bg-line/60 overflow-hidden rounded-b-card",
+      children: jsx("div", {
+        ref: progressBarRef,
+        className: cn('h-full', color ? '' : statusStyle.progressClass),
+        style: {
+          width: '100%',
+          backgroundColor: color || undefined
+        }
+      })
+    })]
+  }));
+  if (portal) {
+    return /*#__PURE__*/createPortal(toastContent, document.body);
+  }
+  return toastContent;
+});
+Toast.displayName = 'Toast';
+
+export { MOBILE_OFFSET_VAR, STATUS_CONFIG, Toast as default, toCssLength };

package/dist/esm/components/feedback/ToastStack.js

@@ -0,0 +1,130 @@
+'use client';
+import { slicedToArray as _slicedToArray, defineProperty as _defineProperty, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { cn } from '../../utils/cn.js';
+import { usePresentation } from '../../hooks/usePresentation.js';
+import { useClickOutside } from '../../hooks/useClickOutside.js';
+import Toast, { toCssLength, MOBILE_OFFSET_VAR } from './ToastItem.js';
+
+// Internal (not exported). The stack behind <ToastContainer> and
+// <ToastProvider>. Up to `visibleToasts` toasts list normally; past that the
+// stack collapses Sonner-style (newest in front, older ones peeking behind)
+// and expands while the pointer is over it, focus is inside it, or after a
+// tap — pausing every timer meanwhile.
+var POSITION_CLASSES = {
+  'top-right': 'top-4 right-4 items-end',
+  'top-left': 'top-4 left-4 items-start',
+  'bottom-right': 'bottom-4 right-4 items-end',
+  'bottom-left': 'bottom-4 left-4 items-start',
+  'top-center': 'top-4 left-1/2 transform -translate-x-1/2 items-center',
+  'bottom-center': 'bottom-4 left-1/2 transform -translate-x-1/2 items-center'
+};
+// Phones: full width inside a 1rem gutter, clear of the safe area and the FootNav.
+var MOBILE_POSITION_CLASSES = {
+  'bottom-center': 'inset-x-0 bottom-[var(--dt-toast-mobile-offset,5rem)] px-4 pt-2 pb-safe items-stretch',
+  'top-center': 'inset-x-0 top-2 px-4 pb-2 pt-safe items-stretch'
+};
+var PEEK_PX = 14; // how far each older toast shows behind the front one
+var PEEK_SCALE = 0.05; // how much smaller each older toast is
+/** Inline transform for a collapsed toast `depth` steps behind the front one. */
+function collapsedStyle(depth, fromBottom, visibleToasts) {
+  return {
+    transform: "translateY(".concat((fromBottom ? -1 : 1) * depth * PEEK_PX, "px) scale(").concat(1 - depth * PEEK_SCALE, ")"),
+    transformOrigin: fromBottom ? 'bottom center' : 'top center',
+    zIndex: 1000 - depth,
+    opacity: depth >= visibleToasts ? 0 : 1
+  };
+}
+var ToastStack = function ToastStack(_ref) {
+  var _ref$toasts = _ref.toasts,
+    toasts = _ref$toasts === void 0 ? [] : _ref$toasts,
+    _ref$position = _ref.position,
+    position = _ref$position === void 0 ? 'top-right' : _ref$position,
+    onRemove = _ref.onRemove,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    expand = _ref.expand,
+    _ref$visibleToasts = _ref.visibleToasts,
+    visibleToasts = _ref$visibleToasts === void 0 ? 3 : _ref$visibleToasts,
+    _ref$mobilePosition = _ref.mobilePosition,
+    mobilePosition = _ref$mobilePosition === void 0 ? 'bottom-center' : _ref$mobilePosition,
+    mobileOffset = _ref.mobileOffset;
+  var listRef = useRef(null);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    hovered = _useState2[0],
+    setHovered = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    focused = _useState4[0],
+    setFocused = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    tapped = _useState6[0],
+    setTapped = _useState6[1];
+  var isPhone = usePresentation('auto') === 'sheet';
+  useClickOutside(listRef, function () {
+    return setTapped(false);
+  }, {
+    enabled: tapped
+  });
+  if (!toasts || toasts.length === 0) {
+    return null;
+  }
+  var mobile = Boolean(isPhone && MOBILE_POSITION_CLASSES[mobilePosition]);
+  var placement = mobile ? mobilePosition : position;
+  var fromBottom = placement.startsWith('bottom');
+  var posClass = mobile ? MOBILE_POSITION_CLASSES[mobilePosition] : ['p-2', POSITION_CLASSES[position] || POSITION_CLASSES['top-right']];
+  var count = toasts.length;
+  var limit = Math.max(1, Number(visibleToasts) || 3);
+  var collapsible = expand === true ? false : count > (expand === false ? 1 : limit);
+  var interacting = hovered || focused || tapped;
+  var collapsed = collapsible && !interacting;
+  var style = mobile && mobileOffset != null ? _defineProperty({}, MOBILE_OFFSET_VAR, toCssLength(mobileOffset)) : undefined;
+  return /*#__PURE__*/createPortal(jsx("div", {
+    role: "region",
+    "aria-label": "Notifications",
+    "data-expanded": collapsed ? 'false' : 'true',
+    className: cn('fixed z-toast flex flex-col max-h-[calc(100dvh-2rem)] pointer-events-none', collapsed ? 'overflow-visible' : 'overflow-y-auto overflow-x-hidden [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden', posClass, className),
+    style: style,
+    children: jsx("div", {
+      ref: listRef,
+      "data-toast-list": "",
+      className: cn(collapsed ? 'grid grid-cols-1 grid-rows-1' : 'flex flex-col gap-3', 'w-full', mobile ? '' : 'max-w-md'),
+      onMouseEnter: function onMouseEnter() {
+        return setHovered(true);
+      },
+      onMouseLeave: function onMouseLeave() {
+        return setHovered(false);
+      },
+      onFocus: function onFocus() {
+        return setFocused(true);
+      },
+      onBlur: function onBlur(e) {
+        if (!e.currentTarget.contains(e.relatedTarget)) setFocused(false);
+      },
+      onPointerDown: function onPointerDown(e) {
+        if (collapsible && e.pointerType && e.pointerType !== 'mouse') setTapped(true);
+      },
+      children: toasts.map(function (t, i) {
+        var depth = count - 1 - i;
+        return jsx("div", {
+          "data-toast-depth": depth,
+          className: cn('pointer-events-auto w-full', mobile ? 'max-w-none' : 'max-w-md', collapsible && 'transition-[transform,opacity] duration-base ease-standard motion-reduce:transition-none', collapsed && ['col-start-1 row-start-1', fromBottom ? 'self-end' : 'self-start'], collapsed && depth >= limit && 'pointer-events-none'),
+          style: collapsed ? collapsedStyle(depth, fromBottom, limit) : undefined,
+          children: jsx(Toast, _objectSpread2(_objectSpread2({}, t), {}, {
+            portal: false,
+            position: position,
+            paused: collapsible && interacting ? true : t.paused,
+            className: cn(mobile && 'max-w-none', t.className),
+            onClose: onRemove
+          }))
+        }, t.id);
+      })
+    })
+  }), document.body);
+};
+
+export { collapsedStyle, ToastStack as default };

package/dist/esm/components/feedback/ToastSwipe.js

@@ -0,0 +1,52 @@
+'use client';
+import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { useState } from 'react';
+import { useSheetDrag } from '../../hooks/useSheetDrag.js';
+
+// Internal (not exported). Horizontal swipe-to-dismiss for a Toast, built on
+// the Sheet's pointer-drag core: a press only becomes a swipe past a small
+// slop, so taps on the toast's buttons still click. Pair the root with
+// `touch-pan-y` so vertical page scroll keeps working on touch screens.
+var SWIPE_DISTANCE = 64; // px past which a release dismisses
+var SWIPE_FLICK_VELOCITY = 0.5; // px per ms
+var SWIPE_FLICK_MIN = 16; // px a flick must travel
+/**
+ * @param {{ enabled?: boolean, onDismiss: (direction: 1 | -1) => void }} options
+ * @returns {{
+ *   offset: number,       // px to translate the toast by (0 at rest)
+ *   dragging: boolean,
+ *   swipedOut: 0 | 1 | -1, // direction the toast left in, 0 while it stays
+ *   dragProps: object,     // pointer handlers for the toast root
+ * }}
+ */
+function useToastSwipe(_ref) {
+  var _ref$enabled = _ref.enabled,
+    enabled = _ref$enabled === void 0 ? true : _ref$enabled,
+    onDismiss = _ref.onDismiss;
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    swipedOut = _useState2[0],
+    setSwipedOut = _useState2[1];
+  var onRelease = function onRelease(_ref2) {
+    var delta = _ref2.delta,
+      velocity = _ref2.velocity;
+    var flick = Math.abs(velocity) >= SWIPE_FLICK_VELOCITY && Math.abs(delta) > SWIPE_FLICK_MIN;
+    if (!flick && Math.abs(delta) < SWIPE_DISTANCE) return; // spring back
+    var direction = delta < 0 ? -1 : 1;
+    setSwipedOut(direction);
+    onDismiss(direction);
+  };
+  var drag = useSheetDrag({
+    edge: 'right',
+    enabled: enabled && swipedOut === 0,
+    onRelease: onRelease
+  });
+  return {
+    offset: drag.dragging ? drag.delta : 0,
+    dragging: drag.dragging,
+    swipedOut: swipedOut,
+    dragProps: drag.dragProps
+  };
+}
+
+export { SWIPE_DISTANCE, SWIPE_FLICK_VELOCITY, useToastSwipe };