@tale-ui/react 0.0.3

package/esm/toast/root/ToastRoot.js

@@ -0,0 +1,511 @@
+'use client';
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { ownerDocument } from '@tale-ui/utils/owner';
+import { inertValue } from '@tale-ui/utils/inertValue';
+import { useIsoLayoutEffect } from '@tale-ui/utils/useIsoLayoutEffect';
+import { useStableCallback } from '@tale-ui/utils/useStableCallback';
+import { activeElement, contains, getTarget } from "../../floating-ui-react/utils.js";
+import { ToastRootContext } from "./ToastRootContext.js";
+import { transitionStatusMapping } from "../../utils/stateAttributesMapping.js";
+import { useToastProviderContext } from "../provider/ToastProviderContext.js";
+import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useOpenChangeComplete } from "../../utils/useOpenChangeComplete.js";
+import { ToastRootCssVars } from "./ToastRootCssVars.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const stateAttributesMapping = {
+  ...transitionStatusMapping,
+  swipeDirection(value) {
+    return value ? {
+      'data-swipe-direction': value
+    } : null;
+  }
+};
+const SWIPE_THRESHOLD = 40;
+const REVERSE_CANCEL_THRESHOLD = 10;
+const OPPOSITE_DIRECTION_DAMPING_FACTOR = 0.5;
+const MIN_DRAG_THRESHOLD = 1;
+function getDisplacement(direction, deltaX, deltaY) {
+  switch (direction) {
+    case 'up':
+      return -deltaY;
+    case 'down':
+      return deltaY;
+    case 'left':
+      return -deltaX;
+    case 'right':
+      return deltaX;
+    default:
+      return 0;
+  }
+}
+function getElementTransform(element) {
+  const computedStyle = window.getComputedStyle(element);
+  const transform = computedStyle.transform;
+  let translateX = 0;
+  let translateY = 0;
+  let scale = 1;
+  if (transform && transform !== 'none') {
+    const matrix = transform.match(/matrix(?:3d)?\(([^)]+)\)/);
+    if (matrix) {
+      const values = matrix[1].split(', ').map(parseFloat);
+      if (values.length === 6) {
+        translateX = values[4];
+        translateY = values[5];
+        scale = Math.sqrt(values[0] * values[0] + values[1] * values[1]);
+      } else if (values.length === 16) {
+        translateX = values[12];
+        translateY = values[13];
+        scale = values[0];
+      }
+    }
+  }
+  return {
+    x: translateX,
+    y: translateY,
+    scale
+  };
+}
+
+/**
+ * Groups all parts of an individual toast.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Tale UI Toast](https://base-ui.com/react/components/toast)
+ */
+export const ToastRoot = /*#__PURE__*/React.forwardRef(function ToastRoot(componentProps, forwardedRef) {
+  const {
+    toast,
+    render,
+    className,
+    swipeDirection = ['down', 'right'],
+    ...elementProps
+  } = componentProps;
+  const isAnchored = toast.positionerProps?.anchor !== undefined;
+  let swipeDirections = [];
+  if (!isAnchored) {
+    swipeDirections = Array.isArray(swipeDirection) ? swipeDirection : [swipeDirection];
+  }
+  const swipeEnabled = swipeDirections.length > 0;
+  const store = useToastProviderContext();
+  const [currentSwipeDirection, setCurrentSwipeDirection] = React.useState(undefined);
+  const [isSwiping, setIsSwiping] = React.useState(false);
+  const [isRealSwipe, setIsRealSwipe] = React.useState(false);
+  const [dragDismissed, setDragDismissed] = React.useState(false);
+  const [dragOffset, setDragOffset] = React.useState({
+    x: 0,
+    y: 0
+  });
+  const [initialTransform, setInitialTransform] = React.useState({
+    x: 0,
+    y: 0,
+    scale: 1
+  });
+  const [titleId, setTitleId] = React.useState();
+  const [descriptionId, setDescriptionId] = React.useState();
+  const [lockedDirection, setLockedDirection] = React.useState(null);
+  const rootRef = React.useRef(null);
+  const dragStartPosRef = React.useRef({
+    x: 0,
+    y: 0
+  });
+  const initialTransformRef = React.useRef({
+    x: 0,
+    y: 0,
+    scale: 1
+  });
+  const intendedSwipeDirectionRef = React.useRef(undefined);
+  const maxSwipeDisplacementRef = React.useRef(0);
+  const cancelledSwipeRef = React.useRef(false);
+  const swipeCancelBaselineRef = React.useRef({
+    x: 0,
+    y: 0
+  });
+  const isFirstPointerMoveRef = React.useRef(false);
+  const domIndex = store.useState('toastIndex', toast.id);
+  const visibleIndex = store.useState('toastVisibleIndex', toast.id);
+  const offsetY = store.useState('toastOffsetY', toast.id);
+  const focused = store.useState('focused');
+  const expanded = store.useState('expanded');
+  useOpenChangeComplete({
+    open: toast.transitionStatus !== 'ending',
+    ref: rootRef,
+    onComplete() {
+      if (toast.transitionStatus === 'ending') {
+        store.removeToast(toast.id);
+      }
+    }
+  });
+
+  /**
+   * Recalculates the natural height of the toast and updates it in the toast manager.
+   * @param flushSync Whether to flush the update synchronously. Use in observer
+   * callbacks to avoid visual flickers.
+   */
+  const recalculateHeight = useStableCallback((flushSync = false) => {
+    const element = rootRef.current;
+    if (!element) {
+      return;
+    }
+    const previousHeight = element.style.height;
+    element.style.height = 'auto';
+    const height = element.offsetHeight;
+    element.style.height = previousHeight;
+    function update() {
+      store.updateToastInternal(toast.id, {
+        ref: rootRef,
+        height,
+        ...(toast.transitionStatus === 'starting' ? {
+          transitionStatus: undefined
+        } : {})
+      });
+    }
+    if (flushSync) {
+      ReactDOM.flushSync(update);
+    } else {
+      update();
+    }
+  });
+  useIsoLayoutEffect(recalculateHeight, [recalculateHeight]);
+  function applyDirectionalDamping(deltaX, deltaY) {
+    let newDeltaX = deltaX;
+    let newDeltaY = deltaY;
+    if (!swipeDirections.includes('left') && !swipeDirections.includes('right')) {
+      newDeltaX = deltaX > 0 ? deltaX ** OPPOSITE_DIRECTION_DAMPING_FACTOR : -(Math.abs(deltaX) ** OPPOSITE_DIRECTION_DAMPING_FACTOR);
+    } else {
+      if (!swipeDirections.includes('right') && deltaX > 0) {
+        newDeltaX = deltaX ** OPPOSITE_DIRECTION_DAMPING_FACTOR;
+      }
+      if (!swipeDirections.includes('left') && deltaX < 0) {
+        newDeltaX = -(Math.abs(deltaX) ** OPPOSITE_DIRECTION_DAMPING_FACTOR);
+      }
+    }
+    if (!swipeDirections.includes('up') && !swipeDirections.includes('down')) {
+      newDeltaY = deltaY > 0 ? deltaY ** OPPOSITE_DIRECTION_DAMPING_FACTOR : -(Math.abs(deltaY) ** OPPOSITE_DIRECTION_DAMPING_FACTOR);
+    } else {
+      if (!swipeDirections.includes('down') && deltaY > 0) {
+        newDeltaY = deltaY ** OPPOSITE_DIRECTION_DAMPING_FACTOR;
+      }
+      if (!swipeDirections.includes('up') && deltaY < 0) {
+        newDeltaY = -(Math.abs(deltaY) ** OPPOSITE_DIRECTION_DAMPING_FACTOR);
+      }
+    }
+    return {
+      x: newDeltaX,
+      y: newDeltaY
+    };
+  }
+  function handlePointerDown(event) {
+    if (event.button !== 0) {
+      return;
+    }
+    if (event.pointerType === 'touch') {
+      store.pauseTimers();
+    }
+    const target = getTarget(event.nativeEvent);
+    const isInteractiveElement = target ? target.closest('button,a,input,textarea,[role="button"],[data-swipe-ignore]') : false;
+    if (isInteractiveElement) {
+      return;
+    }
+    cancelledSwipeRef.current = false;
+    intendedSwipeDirectionRef.current = undefined;
+    maxSwipeDisplacementRef.current = 0;
+    dragStartPosRef.current = {
+      x: event.clientX,
+      y: event.clientY
+    };
+    swipeCancelBaselineRef.current = dragStartPosRef.current;
+    if (rootRef.current) {
+      const transform = getElementTransform(rootRef.current);
+      initialTransformRef.current = transform;
+      setInitialTransform(transform);
+      setDragOffset({
+        x: transform.x,
+        y: transform.y
+      });
+    }
+    store.setHovering(true);
+    setIsSwiping(true);
+    setIsRealSwipe(false);
+    setLockedDirection(null);
+    isFirstPointerMoveRef.current = true;
+    rootRef.current?.setPointerCapture(event.pointerId);
+  }
+  function handlePointerMove(event) {
+    if (!isSwiping) {
+      return;
+    }
+
+    // Prevent text selection on Safari
+    event.preventDefault();
+    if (isFirstPointerMoveRef.current) {
+      // Adjust the starting position to the current position on the first move
+      // to account for the delay between pointerdown and the first pointermove on iOS.
+      dragStartPosRef.current = {
+        x: event.clientX,
+        y: event.clientY
+      };
+      isFirstPointerMoveRef.current = false;
+    }
+    const {
+      clientY,
+      clientX,
+      movementX,
+      movementY
+    } = event;
+    if (movementY < 0 && clientY > swipeCancelBaselineRef.current.y || movementY > 0 && clientY < swipeCancelBaselineRef.current.y) {
+      swipeCancelBaselineRef.current = {
+        x: swipeCancelBaselineRef.current.x,
+        y: clientY
+      };
+    }
+    if (movementX < 0 && clientX > swipeCancelBaselineRef.current.x || movementX > 0 && clientX < swipeCancelBaselineRef.current.x) {
+      swipeCancelBaselineRef.current = {
+        x: clientX,
+        y: swipeCancelBaselineRef.current.y
+      };
+    }
+    const deltaX = clientX - dragStartPosRef.current.x;
+    const deltaY = clientY - dragStartPosRef.current.y;
+    const cancelDeltaY = clientY - swipeCancelBaselineRef.current.y;
+    const cancelDeltaX = clientX - swipeCancelBaselineRef.current.x;
+    if (!isRealSwipe) {
+      const movementDistance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+      if (movementDistance >= MIN_DRAG_THRESHOLD) {
+        setIsRealSwipe(true);
+        if (lockedDirection === null) {
+          const hasHorizontal = swipeDirections.includes('left') || swipeDirections.includes('right');
+          const hasVertical = swipeDirections.includes('up') || swipeDirections.includes('down');
+          if (hasHorizontal && hasVertical) {
+            const absX = Math.abs(deltaX);
+            const absY = Math.abs(deltaY);
+            setLockedDirection(absX > absY ? 'horizontal' : 'vertical');
+          }
+        }
+      }
+    }
+    let candidate;
+    if (!intendedSwipeDirectionRef.current) {
+      if (lockedDirection === 'vertical') {
+        if (deltaY > 0) {
+          candidate = 'down';
+        } else if (deltaY < 0) {
+          candidate = 'up';
+        }
+      } else if (lockedDirection === 'horizontal') {
+        if (deltaX > 0) {
+          candidate = 'right';
+        } else if (deltaX < 0) {
+          candidate = 'left';
+        }
+      } else if (Math.abs(deltaX) >= Math.abs(deltaY)) {
+        candidate = deltaX > 0 ? 'right' : 'left';
+      } else {
+        candidate = deltaY > 0 ? 'down' : 'up';
+      }
+      if (candidate && swipeDirections.includes(candidate)) {
+        intendedSwipeDirectionRef.current = candidate;
+        maxSwipeDisplacementRef.current = getDisplacement(candidate, deltaX, deltaY);
+        setCurrentSwipeDirection(candidate);
+      }
+    } else {
+      const direction = intendedSwipeDirectionRef.current;
+      const currentDisplacement = getDisplacement(direction, cancelDeltaX, cancelDeltaY);
+      if (currentDisplacement > SWIPE_THRESHOLD) {
+        cancelledSwipeRef.current = false;
+        setCurrentSwipeDirection(direction);
+      } else if (!(swipeDirections.includes('left') && swipeDirections.includes('right')) && !(swipeDirections.includes('up') && swipeDirections.includes('down')) && maxSwipeDisplacementRef.current - currentDisplacement >= REVERSE_CANCEL_THRESHOLD) {
+        // Mark that a change-of-mind has occurred
+        cancelledSwipeRef.current = true;
+      }
+    }
+    const dampedDelta = applyDirectionalDamping(deltaX, deltaY);
+    let newOffsetX = initialTransformRef.current.x;
+    let newOffsetY = initialTransformRef.current.y;
+    if (lockedDirection === 'horizontal') {
+      if (swipeDirections.includes('left') || swipeDirections.includes('right')) {
+        newOffsetX += dampedDelta.x;
+      }
+    } else if (lockedDirection === 'vertical') {
+      if (swipeDirections.includes('up') || swipeDirections.includes('down')) {
+        newOffsetY += dampedDelta.y;
+      }
+    } else {
+      if (swipeDirections.includes('left') || swipeDirections.includes('right')) {
+        newOffsetX += dampedDelta.x;
+      }
+      if (swipeDirections.includes('up') || swipeDirections.includes('down')) {
+        newOffsetY += dampedDelta.y;
+      }
+    }
+    setDragOffset({
+      x: newOffsetX,
+      y: newOffsetY
+    });
+  }
+  function handlePointerUp(event) {
+    if (!isSwiping) {
+      return;
+    }
+    setIsSwiping(false);
+    setIsRealSwipe(false);
+    setLockedDirection(null);
+    rootRef.current?.releasePointerCapture(event.pointerId);
+    if (cancelledSwipeRef.current) {
+      setDragOffset({
+        x: initialTransform.x,
+        y: initialTransform.y
+      });
+      setCurrentSwipeDirection(undefined);
+      return;
+    }
+    let shouldClose = false;
+    const deltaX = dragOffset.x - initialTransform.x;
+    const deltaY = dragOffset.y - initialTransform.y;
+    let dismissDirection;
+    for (const direction of swipeDirections) {
+      switch (direction) {
+        case 'right':
+          if (deltaX > SWIPE_THRESHOLD) {
+            shouldClose = true;
+            dismissDirection = 'right';
+          }
+          break;
+        case 'left':
+          if (deltaX < -SWIPE_THRESHOLD) {
+            shouldClose = true;
+            dismissDirection = 'left';
+          }
+          break;
+        case 'down':
+          if (deltaY > SWIPE_THRESHOLD) {
+            shouldClose = true;
+            dismissDirection = 'down';
+          }
+          break;
+        case 'up':
+          if (deltaY < -SWIPE_THRESHOLD) {
+            shouldClose = true;
+            dismissDirection = 'up';
+          }
+          break;
+        default:
+          break;
+      }
+      if (shouldClose) {
+        break;
+      }
+    }
+    if (shouldClose) {
+      setCurrentSwipeDirection(dismissDirection);
+      setDragDismissed(true);
+      store.closeToast(toast.id);
+    } else {
+      setDragOffset({
+        x: initialTransform.x,
+        y: initialTransform.y
+      });
+      setCurrentSwipeDirection(undefined);
+    }
+  }
+  function handleKeyDown(event) {
+    if (event.key === 'Escape') {
+      if (!rootRef.current || !contains(rootRef.current, activeElement(ownerDocument(rootRef.current)))) {
+        return;
+      }
+      store.closeToast(toast.id);
+    }
+  }
+  React.useEffect(() => {
+    if (!swipeEnabled) {
+      return undefined;
+    }
+    const element = rootRef.current;
+    if (!element) {
+      return undefined;
+    }
+    function preventDefaultTouchStart(event) {
+      if (contains(element, event.target)) {
+        event.preventDefault();
+      }
+    }
+    element.addEventListener('touchmove', preventDefaultTouchStart, {
+      passive: false
+    });
+    return () => {
+      element.removeEventListener('touchmove', preventDefaultTouchStart);
+    };
+  }, [swipeEnabled]);
+  function getDragStyles() {
+    if (!isSwiping && dragOffset.x === initialTransform.x && dragOffset.y === initialTransform.y && !dragDismissed) {
+      return {
+        [ToastRootCssVars.swipeMovementX]: '0px',
+        [ToastRootCssVars.swipeMovementY]: '0px'
+      };
+    }
+    const deltaX = dragOffset.x - initialTransform.x;
+    const deltaY = dragOffset.y - initialTransform.y;
+    return {
+      transition: isSwiping ? 'none' : undefined,
+      // While swiping, freeze the element at its current visual transform so it doesn't snap to the
+      // end position.
+      transform: isSwiping ? `translateX(${dragOffset.x}px) translateY(${dragOffset.y}px) scale(${initialTransform.scale})` : undefined,
+      [ToastRootCssVars.swipeMovementX]: `${deltaX}px`,
+      [ToastRootCssVars.swipeMovementY]: `${deltaY}px`
+    };
+  }
+  const isHighPriority = toast.priority === 'high';
+  const defaultProps = {
+    role: isHighPriority ? 'alertdialog' : 'dialog',
+    tabIndex: 0,
+    'aria-modal': false,
+    'aria-labelledby': titleId,
+    'aria-describedby': descriptionId,
+    'aria-hidden': isHighPriority && !focused ? true : undefined,
+    onPointerDown: swipeEnabled ? handlePointerDown : undefined,
+    onPointerMove: swipeEnabled ? handlePointerMove : undefined,
+    onPointerUp: swipeEnabled ? handlePointerUp : undefined,
+    onKeyDown: handleKeyDown,
+    inert: inertValue(toast.limited),
+    style: {
+      ...getDragStyles(),
+      [ToastRootCssVars.index]: toast.transitionStatus === 'ending' ? domIndex : visibleIndex,
+      [ToastRootCssVars.offsetY]: `${offsetY}px`,
+      [ToastRootCssVars.height]: toast.height ? `${toast.height}px` : undefined
+    }
+  };
+  const toastRoot = React.useMemo(() => ({
+    rootRef,
+    toast,
+    titleId,
+    setTitleId,
+    descriptionId,
+    setDescriptionId,
+    swiping: isSwiping,
+    swipeDirection: currentSwipeDirection,
+    recalculateHeight,
+    index: domIndex,
+    visibleIndex,
+    expanded
+  }), [toast, titleId, descriptionId, isSwiping, currentSwipeDirection, recalculateHeight, domIndex, visibleIndex, expanded]);
+  const state = {
+    transitionStatus: toast.transitionStatus,
+    expanded,
+    limited: toast.limited || false,
+    type: toast.type,
+    swiping: toastRoot.swiping,
+    swipeDirection: toastRoot.swipeDirection
+  };
+  const element = useRenderElement('div', componentProps, {
+    ref: [forwardedRef, toastRoot.rootRef],
+    state,
+    stateAttributesMapping,
+    props: [defaultProps, elementProps]
+  });
+  return /*#__PURE__*/_jsx(ToastRootContext.Provider, {
+    value: toastRoot,
+    children: element
+  });
+});
+if (process.env.NODE_ENV !== "production") ToastRoot.displayName = "ToastRoot";

package/esm/toast/root/ToastRootContext.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import type { ToastObject } from "../useToastManager.js";
+export interface ToastRootContext {
+  toast: ToastObject<any>;
+  rootRef: React.RefObject<HTMLElement | null>;
+  titleId: string | undefined;
+  setTitleId: React.Dispatch<React.SetStateAction<string | undefined>>;
+  descriptionId: string | undefined;
+  setDescriptionId: React.Dispatch<React.SetStateAction<string | undefined>>;
+  swiping: boolean;
+  swipeDirection: 'up' | 'down' | 'left' | 'right' | undefined;
+  index: number;
+  visibleIndex: number;
+  expanded: boolean;
+  recalculateHeight: (flushSync?: boolean) => void;
+}
+export declare const ToastRootContext: React.Context<ToastRootContext | undefined>;
+export declare function useToastRootContext(): ToastRootContext;

package/esm/toast/root/ToastRootContext.js

@@ -0,0 +1,12 @@
+'use client';
+
+import * as React from 'react';
+export const ToastRootContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== "production") ToastRootContext.displayName = "ToastRootContext";
+export function useToastRootContext() {
+  const context = React.useContext(ToastRootContext);
+  if (!context) {
+    throw /* FIXME (minify-errors-in-prod): Unminified error message in production build! */new Error('Tale UI: ToastRootContext is missing. Toast parts must be used within <Toast.Root>.');
+  }
+  return context;
+}

package/esm/toast/root/ToastRootCssVars.d.ts

@@ -0,0 +1,27 @@
+export declare enum ToastRootCssVars {
+  /**
+   * Indicates the index of the toast in the list.
+   * @type {number}
+   */
+  index = "--toast-index",
+  /**
+   * Indicates the vertical pixels offset of the toast in the list when expanded.
+   * @type {number}
+   */
+  offsetY = "--toast-offset-y",
+  /**
+   * Indicates the measured natural height of the toast in pixels.
+   * @type {number}
+   */
+  height = "--toast-height",
+  /**
+   * Indicates the horizontal swipe movement of the toast.
+   * @type {number}
+   */
+  swipeMovementX = "--toast-swipe-movement-x",
+  /**
+   * Indicates the vertical swipe movement of the toast.
+   * @type {number}
+   */
+  swipeMovementY = "--toast-swipe-movement-y",
+}

package/esm/toast/root/ToastRootCssVars.js

@@ -0,0 +1,28 @@
+export let ToastRootCssVars = /*#__PURE__*/function (ToastRootCssVars) {
+  /**
+   * Indicates the index of the toast in the list.
+   * @type {number}
+   */
+  ToastRootCssVars["index"] = "--toast-index";
+  /**
+   * Indicates the vertical pixels offset of the toast in the list when expanded.
+   * @type {number}
+   */
+  ToastRootCssVars["offsetY"] = "--toast-offset-y";
+  /**
+   * Indicates the measured natural height of the toast in pixels.
+   * @type {number}
+   */
+  ToastRootCssVars["height"] = "--toast-height";
+  /**
+   * Indicates the horizontal swipe movement of the toast.
+   * @type {number}
+   */
+  ToastRootCssVars["swipeMovementX"] = "--toast-swipe-movement-x";
+  /**
+   * Indicates the vertical swipe movement of the toast.
+   * @type {number}
+   */
+  ToastRootCssVars["swipeMovementY"] = "--toast-swipe-movement-y";
+  return ToastRootCssVars;
+}({});

package/esm/toast/root/ToastRootDataAttributes.d.ts

@@ -0,0 +1,35 @@
+export declare enum ToastRootDataAttributes {
+  /**
+   * Present when the toast is expanded in the viewport.
+   * @type {boolean}
+   */
+  expanded = "data-expanded",
+  /**
+   * Present when the toast was removed due to exceeding the limit.
+   * @type {boolean}
+   */
+  limited = "data-limited",
+  /**
+   * The type of the toast.
+   * @type {string}
+   */
+  type = "data-type",
+  /**
+   * Present when the toast is being swiped.
+   * @type {boolean}
+   */
+  swiping = "data-swiping",
+  /**
+   * The direction the toast was swiped.
+   * @type {'up' | 'down' | 'left' | 'right'}
+   */
+  swipeDirection = "data-swipe-direction",
+  /**
+   * Present when the toast is animating in.
+   */
+  startingStyle = "data-starting-style",
+  /**
+   * Present when the toast is animating out.
+   */
+  endingStyle = "data-ending-style",
+}

package/esm/toast/root/ToastRootDataAttributes.js

@@ -0,0 +1,36 @@
+export let ToastRootDataAttributes = /*#__PURE__*/function (ToastRootDataAttributes) {
+  /**
+   * Present when the toast is expanded in the viewport.
+   * @type {boolean}
+   */
+  ToastRootDataAttributes["expanded"] = "data-expanded";
+  /**
+   * Present when the toast was removed due to exceeding the limit.
+   * @type {boolean}
+   */
+  ToastRootDataAttributes["limited"] = "data-limited";
+  /**
+   * The type of the toast.
+   * @type {string}
+   */
+  ToastRootDataAttributes["type"] = "data-type";
+  /**
+   * Present when the toast is being swiped.
+   * @type {boolean}
+   */
+  ToastRootDataAttributes["swiping"] = "data-swiping";
+  /**
+   * The direction the toast was swiped.
+   * @type {'up' | 'down' | 'left' | 'right'}
+   */
+  ToastRootDataAttributes["swipeDirection"] = "data-swipe-direction";
+  /**
+   * Present when the toast is animating in.
+   */
+  ToastRootDataAttributes["startingStyle"] = "data-starting-style";
+  /**
+   * Present when the toast is animating out.
+   */
+  ToastRootDataAttributes["endingStyle"] = "data-ending-style";
+  return ToastRootDataAttributes;
+}({});