[Toast] Create new Toast component

docs/reference/generated/toast-close.json

@@ -0,0 +1,16 @@
+{
+  "name": "ToastClose",
+  "description": "Closes the toast when clicked.\nRenders a `<button>` element.",
+  "props": {
+    "className": {
+      "type": "string | (state) => string",
+      "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."
+    },
+    "render": {
+      "type": "React.ReactElement | (props, state) => React.ReactElement",
+      "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
+    }
+  },
+  "dataAttributes": {},
+  "cssVariables": {}
+}

docs/reference/generated/toast-content.json

@@ -0,0 +1,16 @@
+{
+  "name": "ToastContent",
+  "description": "Groups content parts of the toast (title and description) to be announced.\nRenders a `<div>` element.",
+  "props": {
+    "className": {
+      "type": "string | (state) => string",
+      "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."
+    },
+    "render": {
+      "type": "React.ReactElement | (props, state) => React.ReactElement",
+      "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
+    }
+  },
+  "dataAttributes": {},
+  "cssVariables": {}
+}

docs/reference/generated/toast-description.json

@@ -0,0 +1,16 @@
+{
+  "name": "ToastDescription",
+  "description": "A description that describes the toast.\nRenders a `<p>` element.",
+  "props": {
+    "className": {
+      "type": "string | (state) => string",
+      "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."
+    },
+    "render": {
+      "type": "React.ReactElement | (props, state) => React.ReactElement",
+      "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
+    }
+  },
+  "dataAttributes": {},
+  "cssVariables": {}
+}

docs/reference/generated/toast-provider.json

@@ -0,0 +1,18 @@
+{
+  "name": "ToastProvider",
+  "description": "Provides a context for creating and managing toasts.",
+  "props": {
+    "limit": {
+      "type": "number",
+      "default": "3",
+      "description": "The maximum number of toasts that can be displayed at once.\nWhen the limit is reached, the oldest toast will be removed to make room for the new one."
+    },
+    "timeout": {
+      "type": "number",
+      "default": "5000",
+      "description": "The default amount of time (in ms) before a toast is auto dismissed."
+    }
+  },
+  "dataAttributes": {},
+  "cssVariables": {}
+}

docs/reference/generated/toast-root.json

@@ -0,0 +1,26 @@
+{
+  "name": "ToastRoot",
+  "description": "Groups all parts of an individual toast.\nRenders a `<div>` element.",
+  "props": {
+    "swipeDirection": {
+      "type": "'down' | 'left' | 'right' | 'up'",
+      "default": "'up'",
+      "description": "Direction in which the toast can be swiped to dismiss."
+    },
+    "swipeThreshold": {
+      "type": "number",
+      "default": "20",
+      "description": "Threshold in pixels to determine if swipe should close toast or cancel."
+    },
+    "className": {
+      "type": "string | (state) => string",
+      "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."
+    },
+    "render": {
+      "type": "React.ReactElement | (props, state) => React.ReactElement",
+      "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
+    }
+  },
+  "dataAttributes": {},
+  "cssVariables": {}
+}

docs/reference/generated/toast-title.json

@@ -0,0 +1,16 @@
+{
+  "name": "ToastTitle",
+  "description": "A title that labels the toast.\nRenders an `<h2>` element.",
+  "props": {
+    "className": {
+      "type": "string | (state) => string",
+      "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."
+    },
+    "render": {
+      "type": "React.ReactElement | (props, state) => React.ReactElement",
+      "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
+    }
+  },
+  "dataAttributes": {},
+  "cssVariables": {}
+}

docs/reference/generated/toast-viewport.json

@@ -0,0 +1,16 @@
+{
+  "name": "ToastViewport",
+  "description": "A container viewport for toasts.\nRenders a `<div>` element.",
+  "props": {
+    "className": {
+      "type": "string | (state) => string",
+      "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."
+    },
+    "render": {
+      "type": "React.ReactElement | (props, state) => React.ReactElement",
+      "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
+    }
+  },
+  "dataAttributes": {},
+  "cssVariables": {}
+}

docs/src/app/(private)/experiments/toast.module.css

@@ -0,0 +1,78 @@
+.viewport {
+  width: 300px;
+  position: fixed;
+  left: 50%;
+  top: 20px;
+  transform: translateX(-50%);
+}
+
+.root {
+  position: absolute;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+  transform-origin: top center;
+  background: white;
+  padding: 1rem;
+  width: 300px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  border-radius: 10px;
+  z-index: calc(2147483647 - var(--toast-index));
+  transition:
+    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
+    opacity 0.5s;
+  transform: translateY(calc(var(--toast-index) * 15px)) scale(calc(1 - (var(--toast-index) * 0.1)));
+  opacity: 1;
+  --gap: 10px;
+  user-select: none;
+
+  &::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 100%;
+    width: 100%;
+    height: calc(var(--gap) + 1px);
+  }
+
+  &[data-expanded] {
+    transform: translateY(calc(var(--toast-offset) + calc(var(--toast-index) * var(--gap))));
+  }
+
+  &[data-starting-style],
+  &[data-ending-style] {
+    transform: translateY(-150%);
+  }
+
+  &[data-ending-style] {
+    transition-duration: 0.2s;
+    transition-timing-function: ease-in;
+  }
+
+  /* Apply momentum-based animation for drag-dismissed toasts */
+  &[data-drag-dismissed][data-ending-style] {
+    transition-duration: calc(0.3s / var(--toast-momentum, 1));
+    transition-timing-function: linear;
+  }
+}
+
+.title {
+  font-weight: 600;
+  margin-bottom: 4px;
+}
+
+.button {
+  background: royalblue;
+  color: white;
+  padding: 0.5rem;
+  border-radius: 5px;
+  text-align: center;
+  margin-top: 1rem;
+}
+
+.close {
+  position: absolute;
+  right: 0;
+  top: 0;
+  padding: 0.5rem;
+}

docs/src/app/(private)/experiments/toast.tsx

@@ -0,0 +1,128 @@
+'use client';
+import * as React from 'react';
+import { Toast } from '@base-ui-components/react/toast';
+import styles from './toast.module.css';
+
+function showGlobalToast() {
+  Toast.add({
+    title: 'Global toast',
+    description: 'This toast was created outside of a React component',
+  });
+}
+
+function fetchUserData() {
+  return new Promise((resolve, reject) => {
+    // Simulate API call with a 50% chance of success
+    setTimeout(() => {
+      const success = Math.random() > 0.5;
+      if (success) {
+        resolve({ name: 'John Doe', email: '[email protected]' });
+      } else {
+        reject(new Error('Failed to fetch user data'));
+      }
+    }, 1000);
+  });
+}
+
+export default function Page() {
+  return (
+    <Toast.Provider>
+      <Toast.Viewport className={styles.viewport}>
+        <Toasts />
+      </Toast.Viewport>
+      <ToastButtons />
+    </Toast.Provider>
+  );
+}
+
+function ToastButtons() {
+  const toast = Toast.useToast();
+
+  function showRegularToast() {
+    toast.add({
+      title: 'Toast created',
+      description: 'This is a toast.',
+    });
+  }
+
+  function showActionToast() {
+    toast.add({
+      type: 'undo',
+      title: 'Message deleted',
+    });
+  }
+
+  return (
+    <div
+      style={{
+        position: 'fixed',
+        bottom: 20,
+        display: 'flex',
+        gap: 10,
+        justifyContent: 'center',
+      }}
+    >
+      <button className={styles.button} type="button" onClick={showRegularToast}>
+        Show regular toast
+      </button>
+      <button className={styles.button} type="button" onClick={showActionToast}>
+        Show action toast
+      </button>
+      <button className={styles.button} type="button" onClick={showGlobalToast}>
+        Show global toast
+      </button>
+      <ToastPromiseExample />
+    </div>
+  );
+}
+
+function Toasts() {
+  const { toasts } = Toast.useToast();
+  return toasts.map((toast) => (
+    <Toast.Root key={toast.id} toast={toast} className={styles.root}>
+      <Toast.Content>
+        {toast.title && <Toast.Title>{toast.title}</Toast.Title>}
+        {toast.description && (
+          <Toast.Description>{toast.description}</Toast.Description>
+        )}
+        {toast.type === 'undo' && (
+          <button
+            className={styles.button}
+            type="button"
+            onClick={() => alert('Action undone')}
+          >
+            Undo
+          </button>
+        )}
+      </Toast.Content>
+      <Toast.Close className={styles.close} aria-label="Close">
+        x
+      </Toast.Close>
+    </Toast.Root>
+  ));
+}
+
+function ToastPromiseExample() {
+  const toast = Toast.useToast();
+
+  const handlePromiseClick = () => {
+    toast
+      .promise(fetchUserData(), {
+        loading: 'Fetching user data...',
+        success: 'User data loaded!',
+        error: 'Failed to load user data',
+      })
+      .then((data) => {
+        console.log('User data:', data);
+      })
+      .catch((err) => {
+        console.error('Error handled:', err);
+      });
+  };
+
+  return (
+    <button className={styles.button} type="button" onClick={handlePromiseClick}>
+      Show promise toast
+    </button>
+  );
+}