@base-ui/react 1.0.0 → 1.2.0

package/esm/toast/arrow/ToastArrow.js

@@ -23,11 +23,11 @@ export const ToastArrow = /*#__PURE__*/React.forwardRef(function ToastArrow(comp
     arrowUncentered,
     arrowStyles
   } = useToastPositionerContext();
-  const state = React.useMemo(() => ({
+  const state = {
     side,
     align,
     uncentered: arrowUncentered
-  }), [side, align, arrowUncentered]);
+  };
   const element = useRenderElement('div', componentProps, {
     state,
     ref: [forwardedRef, arrowRef],

package/esm/toast/arrow/ToastArrowDataAttributes.js

@@ -1,14 +1,15 @@
-export let ToastArrowDataAttributes = /*#__PURE__*/function (ToastArrowDataAttributes) {
+import { CommonPopupDataAttributes } from "../../utils/popupStateMapping.js";
+export let ToastArrowDataAttributes = function (ToastArrowDataAttributes) {
   /**
    * Indicates which side the toast is positioned relative to the anchor.
    * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
    */
-  ToastArrowDataAttributes["side"] = "data-side";
+  ToastArrowDataAttributes[ToastArrowDataAttributes["side"] = CommonPopupDataAttributes.side] = "side";
   /**
    * Indicates how the toast is aligned relative to specified side.
    * @type {'start' | 'center' | 'end'}
    */
-  ToastArrowDataAttributes["align"] = "data-align";
+  ToastArrowDataAttributes[ToastArrowDataAttributes["align"] = CommonPopupDataAttributes.align] = "align";
   /**
    * Present when the toast arrow is uncentered.
    */

package/esm/toast/close/ToastClose.d.ts

@@ -6,7 +6,7 @@ import type { BaseUIComponentProps, NativeButtonProps } from "../../utils/types.
  *
  * Documentation: [Base UI Toast](https://base-ui.com/react/components/toast)
  */
-export declare const ToastClose: React.ForwardRefExoticComponent<ToastCloseProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const ToastClose: React.ForwardRefExoticComponent<Omit<ToastCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export interface ToastCloseState {
   /**
    * The type of the toast.

package/esm/toast/close/ToastClose.js

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { useToastRootContext } from "../root/ToastRootContext.js";
-import { useToastContext } from "../provider/ToastProviderContext.js";
+import { useToastProviderContext } from "../provider/ToastProviderContext.js";
 import { useButton } from "../../use-button/useButton.js";
 import { useRenderElement } from "../../utils/useRenderElement.js";
 
@@ -20,13 +20,11 @@ export const ToastClose = /*#__PURE__*/React.forwardRef(function ToastClose(comp
     nativeButton = true,
     ...elementProps
   } = componentProps;
-  const {
-    close,
-    expanded
-  } = useToastContext();
+  const store = useToastProviderContext();
   const {
     toast
   } = useToastRootContext();
+  const expanded = store.useState('expanded');
   const [hasFocus, setHasFocus] = React.useState(false);
   const {
     getButtonProps,
@@ -35,16 +33,16 @@ export const ToastClose = /*#__PURE__*/React.forwardRef(function ToastClose(comp
     disabled,
     native: nativeButton
   });
-  const state = React.useMemo(() => ({
+  const state = {
     type: toast.type
-  }), [toast.type]);
+  };
   const element = useRenderElement('button', componentProps, {
     ref: [forwardedRef, buttonRef],
     state,
     props: [{
       'aria-hidden': !expanded && !hasFocus,
       onClick() {
-        close(toast.id);
+        store.closeToast(toast.id);
       },
       onFocus() {
         setHasFocus(true);

package/esm/toast/content/ToastContent.d.ts

@@ -6,7 +6,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  *
  * Documentation: [Base UI Toast](https://base-ui.com/react/components/toast)
  */
-export declare const ToastContent: React.ForwardRefExoticComponent<ToastContentProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ToastContent: React.ForwardRefExoticComponent<Omit<ToastContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ToastContentState {
   /**
    * Whether the toast viewport is expanded.

package/esm/toast/content/ToastContent.js

@@ -46,10 +46,10 @@ export const ToastContent = /*#__PURE__*/React.forwardRef(function ToastContent(
     };
   }, [recalculateHeight]);
   const behind = visibleIndex > 0;
-  const state = React.useMemo(() => ({
+  const state = {
     expanded,
     behind
-  }), [expanded, behind]);
+  };
   const element = useRenderElement('div', componentProps, {
     ref: [forwardedRef, contentRef],
     state,

package/esm/toast/createToastManager.d.ts

@@ -2,13 +2,13 @@ import type { ToastManagerAddOptions, ToastManagerPromiseOptions, ToastManagerUp
 /**
  * Creates a new toast manager.
  */
-export declare function createToastManager(): ToastManager;
-export interface ToastManager {
+export declare function createToastManager<Data extends object = any>(): ToastManager<Data>;
+export interface ToastManager<Data extends object = any> {
   ' subscribe': (listener: (data: ToastManagerEvent) => void) => () => void;
-  add: <Data extends object>(options: ToastManagerAddOptions<Data>) => string;
+  add: <T extends Data = Data>(options: ToastManagerAddOptions<T>) => string;
   close: (id: string) => void;
-  update: <Data extends object>(id: string, updates: ToastManagerUpdateOptions<Data>) => void;
-  promise: <Value, Data extends object>(promiseValue: Promise<Value>, options: ToastManagerPromiseOptions<Value, Data>) => Promise<Value>;
+  update: <T extends Data = Data>(id: string, updates: ToastManagerUpdateOptions<T>) => void;
+  promise: <Value, T extends Data = Data>(promiseValue: Promise<Value>, options: ToastManagerPromiseOptions<Value, T>) => Promise<Value>;
 }
 export interface ToastManagerEvent {
   action: 'add' | 'close' | 'update' | 'promise';

package/esm/toast/createToastManager.js

@@ -3,7 +3,7 @@ import { generateId } from '@base-ui/utils/generateId';
  * Creates a new toast manager.
  */
 export function createToastManager() {
-  const listeners = [];
+  const listeners = new Set();
   function emit(data) {
     listeners.forEach(listener => listener(data));
   }
@@ -11,12 +11,9 @@ export function createToastManager() {
     // This should be private aside from ToastProvider needing to access it.
     // https://x.com/drosenwasser/status/1816947740032872664
     ' subscribe': function subscribe(listener) {
-      listeners.push(listener);
+      listeners.add(listener);
       return () => {
-        const index = listeners.indexOf(listener);
-        if (index !== -1) {
-          listeners.splice(index, 1);
-        }
+        listeners.delete(listener);
       };
     },
     add(options) {

package/esm/toast/description/ToastDescription.d.ts

@@ -7,7 +7,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  *
  * Documentation: [Base UI Toast](https://base-ui.com/react/components/toast)
  */
-export declare const ToastDescription: React.ForwardRefExoticComponent<ToastDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+export declare const ToastDescription: React.ForwardRefExoticComponent<Omit<ToastDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
 export interface ToastDescriptionState {
   /**
    * The type of the toast.

package/esm/toast/description/ToastDescription.js

@@ -22,14 +22,12 @@ export const ToastDescription = /*#__PURE__*/React.forwardRef(function ToastDesc
     ...elementProps
   } = componentProps;
   const {
-    toast
+    toast,
+    setDescriptionId
   } = useToastRootContext();
   const children = childrenProp ?? toast.description;
   const shouldRender = Boolean(children);
   const id = useId(idProp);
-  const {
-    setDescriptionId
-  } = useToastRootContext();
   useIsoLayoutEffect(() => {
     if (!shouldRender) {
       return undefined;
@@ -39,9 +37,9 @@ export const ToastDescription = /*#__PURE__*/React.forwardRef(function ToastDesc
       setDescriptionId(undefined);
     };
   }, [shouldRender, id, setDescriptionId]);
-  const state = React.useMemo(() => ({
+  const state = {
     type: toast.type
-  }), [toast.type]);
+  };
   const element = useRenderElement('p', componentProps, {
     ref: forwardedRef,
     state,

package/esm/toast/portal/ToastPortal.d.ts

@@ -6,7 +6,7 @@ import { FloatingPortalLite } from "../../utils/FloatingPortalLite.js";
  *
  * Documentation: [Base UI Toast](https://base-ui.com/react/components/toast)
  */
-export declare const ToastPortal: import("react").ForwardRefExoticComponent<FloatingPortalLite.Props<any> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ToastPortal: import("react").ForwardRefExoticComponent<Omit<FloatingPortalLite.Props<any>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export declare namespace ToastPortal {
   interface State {}
 }

package/esm/toast/positioner/ToastPositioner.d.ts

@@ -8,7 +8,7 @@ import type { ToastObject } from "../useToastManager.js";
  *
  * Documentation: [Base UI Toast](https://base-ui.com/react/components/toast)
  */
-export declare const ToastPositioner: React.ForwardRefExoticComponent<ToastPositionerProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ToastPositioner: React.ForwardRefExoticComponent<Omit<ToastPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ToastPositionerState {
   side: Side;
   align: Align;
@@ -18,13 +18,13 @@ export interface ToastPositionerProps extends BaseUIComponentProps<'div', ToastP
   /**
    * An element to position the toast against.
    */
-  anchor?: Element | null;
+  anchor?: (Element | null) | undefined;
   /**
    * Which side of the anchor element to align the toast against.
    * May automatically change to avoid collisions.
    * @default 'top'
    */
-  side?: Side;
+  side?: Side | undefined;
   /**
    * The toast object associated with the positioner.
    */

package/esm/toast/positioner/ToastPositioner.js

@@ -6,11 +6,12 @@ import { useAnchorPositioning } from "../../utils/useAnchorPositioning.js";
 import { popupStateMapping } from "../../utils/popupStateMapping.js";
 import { useRenderElement } from "../../utils/useRenderElement.js";
 import { EMPTY_OBJECT, POPUP_COLLISION_AVOIDANCE } from "../../utils/constants.js";
+import { getDisabledMountTransitionStyles } from "../../utils/getDisabledMountTransitionStyles.js";
 import { ToastPositionerContext } from "./ToastPositionerContext.js";
 import { useFloatingRootContext } from "../../floating-ui-react/index.js";
 import { NOOP } from "../../utils/noop.js";
 import { ToastRootCssVars } from "../root/ToastRootCssVars.js";
-import { useToastContext } from "../provider/ToastProviderContext.js";
+import { useToastProviderContext } from "../provider/ToastProviderContext.js";
 
 /**
  * Positions the toast against the anchor.
@@ -24,9 +25,7 @@ export const ToastPositioner = /*#__PURE__*/React.forwardRef(function ToastPosit
     toast,
     ...props
   } = componentProps;
-  const {
-    toasts
-  } = useToastContext();
+  const store = useToastProviderContext();
   const positionerProps = toast.positionerProps ?? EMPTY_OBJECT;
   const {
     render,
@@ -46,8 +45,8 @@ export const ToastPositioner = /*#__PURE__*/React.forwardRef(function ToastPosit
     ...elementProps
   } = props;
   const [positionerElement, setPositionerElement] = React.useState(null);
-  const domIndex = React.useMemo(() => toasts.indexOf(toast), [toast, toasts]);
-  const visibleIndex = React.useMemo(() => toasts.filter(t => t.transitionStatus !== 'ending').indexOf(toast), [toast, toasts]);
+  const domIndex = store.useState('toastIndex', toast.id);
+  const visibleIndex = store.useState('toastVisibleIndex', toast.id);
   const anchor = isElement(anchorProp) ? anchorProp : null;
   const floatingRootContext = useFloatingRootContext({
     open: true,
@@ -98,7 +97,7 @@ export const ToastPositioner = /*#__PURE__*/React.forwardRef(function ToastPosit
   }), [state, positioning.arrowRef, positioning.arrowStyles, positioning.arrowUncentered]);
   const element = useRenderElement('div', componentProps, {
     state,
-    props: [defaultProps, elementProps],
+    props: [defaultProps, getDisabledMountTransitionStyles(toast.transitionStatus), elementProps],
     ref: [forwardedRef, setPositionerElement],
     stateAttributesMapping: popupStateMapping
   });

package/esm/toast/positioner/ToastPositionerDataAttributes.js

@@ -8,11 +8,11 @@ export let ToastPositionerDataAttributes = function (ToastPositionerDataAttribut
    * Indicates which side the toast is positioned relative to the trigger.
    * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
    */
-  ToastPositionerDataAttributes["side"] = "data-side";
+  ToastPositionerDataAttributes[ToastPositionerDataAttributes["side"] = CommonPopupDataAttributes.side] = "side";
   /**
    * Indicates how the toast is aligned relative to specified side.
    * @type {'start' | 'center' | 'end'}
    */
-  ToastPositionerDataAttributes["align"] = "data-align";
+  ToastPositionerDataAttributes[ToastPositionerDataAttributes["align"] = CommonPopupDataAttributes.align] = "align";
   return ToastPositionerDataAttributes;
 }({});

package/esm/toast/provider/ToastProvider.d.ts

@@ -13,17 +13,17 @@ export interface ToastProviderProps {
    * A value of `0` will prevent the toast from being dismissed automatically.
    * @default 5000
    */
-  timeout?: number;
+  timeout?: number | undefined;
   /**
    * The maximum number of toasts that can be displayed at once.
    * When the limit is reached, the oldest toast will be removed to make room for the new one.
    * @default 3
    */
-  limit?: number;
+  limit?: number | undefined;
   /**
    * A global manager for toasts to use outside of a React component.
    */
-  toastManager?: ToastManager;
+  toastManager?: ToastManager | undefined;
 }
 export declare namespace ToastProvider {
   type Props = ToastProviderProps;

package/esm/toast/provider/ToastProvider.js

@@ -1,20 +1,17 @@
 'use client';
 
 import * as React from 'react';
-import { ownerDocument } from '@base-ui/utils/owner';
-import { useStableCallback } from '@base-ui/utils/useStableCallback';
-import { generateId } from '@base-ui/utils/generateId';
-import { Timeout } from '@base-ui/utils/useTimeout';
-import { activeElement, contains } from "../../floating-ui-react/utils.js";
+import { useOnMount } from '@base-ui/utils/useOnMount';
+import { useRefWithInit } from '@base-ui/utils/useRefWithInit';
 import { ToastContext } from "./ToastProviderContext.js";
-import { isFocusVisible } from "../utils/focusVisible.js";
-import { resolvePromiseOptions } from "../utils/resolvePromiseOptions.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { ToastStore } from "../store.js";
+
 /**
  * Provides a context for creating and managing toasts.
  *
  * Documentation: [Base UI Toast](https://base-ui.com/react/components/toast)
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 export const ToastProvider = function ToastProvider(props) {
   const {
     children,
@@ -22,229 +19,17 @@ export const ToastProvider = function ToastProvider(props) {
     limit = 3,
     toastManager
   } = props;
-  const [toasts, setToasts] = React.useState([]);
-  const [hovering, setHovering] = React.useState(false);
-  const [focused, setFocused] = React.useState(false);
-  const [prevFocusElement, setPrevFocusElement] = React.useState(null);
-  if (toasts.length === 0) {
-    if (hovering) {
-      setHovering(false);
-    }
-    if (focused) {
-      setFocused(false);
-    }
-  }
-  const expanded = hovering || focused;
-  const timersRef = React.useRef(new Map());
-  const viewportRef = React.useRef(null);
-  const windowFocusedRef = React.useRef(true);
-  const isPausedRef = React.useRef(false);
-  function handleFocusManagement(toastId) {
-    const activeEl = activeElement(ownerDocument(viewportRef.current));
-    if (!viewportRef.current || !contains(viewportRef.current, activeEl) || !isFocusVisible(activeEl)) {
-      return;
-    }
-    const currentIndex = toasts.findIndex(toast => toast.id === toastId);
-    let nextToast = null;
-
-    // Try to find the next toast that isn't animating out
-    let index = currentIndex + 1;
-    while (index < toasts.length) {
-      if (toasts[index].transitionStatus !== 'ending') {
-        nextToast = toasts[index];
-        break;
-      }
-      index += 1;
-    }
-
-    // Go backwards if no next toast is found
-    if (!nextToast) {
-      index = currentIndex - 1;
-      while (index >= 0) {
-        if (toasts[index].transitionStatus !== 'ending') {
-          nextToast = toasts[index];
-          break;
-        }
-        index -= 1;
-      }
-    }
-    if (nextToast) {
-      nextToast.ref?.current?.focus();
-    } else {
-      prevFocusElement?.focus({
-        preventScroll: true
-      });
-    }
-  }
-  const pauseTimers = useStableCallback(() => {
-    if (isPausedRef.current) {
-      return;
-    }
-    isPausedRef.current = true;
-    timersRef.current.forEach(timer => {
-      if (timer.timeout) {
-        timer.timeout.clear();
-        const elapsed = Date.now() - timer.start;
-        const remaining = timer.delay - elapsed;
-        timer.remaining = remaining > 0 ? remaining : 0;
-      }
-    });
-  });
-  const resumeTimers = useStableCallback(() => {
-    if (!isPausedRef.current) {
-      return;
-    }
-    isPausedRef.current = false;
-    timersRef.current.forEach((timer, id) => {
-      timer.remaining = timer.remaining > 0 ? timer.remaining : timer.delay;
-      timer.timeout ??= Timeout.create();
-      timer.timeout.start(timer.remaining, () => {
-        timersRef.current.delete(id);
-        timer.callback();
-      });
-      timer.start = Date.now();
-    });
-  });
-  const close = useStableCallback(toastId => {
-    setToasts(prevToasts => {
-      const toastsWithEnding = prevToasts.map(toast => toast.id === toastId ? {
-        ...toast,
-        transitionStatus: 'ending',
-        height: 0
-      } : toast);
-      const activeToasts = toastsWithEnding.filter(t => t.transitionStatus !== 'ending');
-      return toastsWithEnding.map(toast => {
-        if (toast.transitionStatus === 'ending') {
-          return toast;
-        }
-        const isActiveToastLimited = activeToasts.indexOf(toast) >= limit;
-        return {
-          ...toast,
-          limited: isActiveToastLimited
-        };
-      });
-    });
-    const timer = timersRef.current.get(toastId);
-    if (timer && timer.timeout) {
-      timer.timeout.clear();
-      timersRef.current.delete(toastId);
-    }
-    const toast = toasts.find(t => t.id === toastId);
-    toast?.onClose?.();
-    handleFocusManagement(toastId);
-    if (toasts.length === 1) {
-      setHovering(false);
-      setFocused(false);
-    }
-  });
-  const remove = useStableCallback(toastId => {
-    setToasts(prev => prev.filter(toast => toast.id !== toastId));
-    const toast = toasts.find(t => t.id === toastId);
-    toast?.onRemove?.();
-  });
-  const scheduleTimer = useStableCallback((id, delay, callback) => {
-    const start = Date.now();
-    const shouldStartActive = windowFocusedRef.current && !hovering && !focused;
-    const currentTimeout = shouldStartActive ? Timeout.create() : undefined;
-    currentTimeout?.start(delay, () => {
-      timersRef.current.delete(id);
-      callback();
-    });
-    timersRef.current.set(id, {
-      timeout: currentTimeout,
-      start: shouldStartActive ? start : 0,
-      delay,
-      remaining: delay,
-      callback
-    });
-  });
-  const add = useStableCallback(toast => {
-    const id = toast.id || generateId('toast');
-    const toastToAdd = {
-      ...toast,
-      id,
-      transitionStatus: 'starting'
-    };
-    setToasts(prev => {
-      const updatedToasts = [toastToAdd, ...prev];
-      const activeToasts = updatedToasts.filter(t => t.transitionStatus !== 'ending');
-
-      // Mark oldest toasts for removal when over limit
-      if (activeToasts.length > limit) {
-        const excessCount = activeToasts.length - limit;
-        const oldestActiveToasts = activeToasts.slice(-excessCount);
-        return updatedToasts.map(t => oldestActiveToasts.some(old => old.id === t.id) ? {
-          ...t,
-          limited: true
-        } : {
-          ...t,
-          limited: false
-        });
-      }
-      return updatedToasts.map(t => ({
-        ...t,
-        limited: false
-      }));
-    });
-    const duration = toastToAdd.timeout ?? timeout;
-    if (toastToAdd.type !== 'loading' && duration > 0) {
-      scheduleTimer(id, duration, () => close(id));
-    }
-    if (hovering || focused || !windowFocusedRef.current) {
-      pauseTimers();
-    }
-    return id;
-  });
-  const update = useStableCallback((id, updates) => {
-    setToasts(prev => prev.map(toast => toast.id === id ? {
-      ...toast,
-      ...updates
-    } : toast));
-  });
-  const promise = useStableCallback((promiseValue, options) => {
-    // Create a loading toast (which does not auto-dismiss).
-    const loadingOptions = resolvePromiseOptions(options.loading);
-    const id = add({
-      ...loadingOptions,
-      type: 'loading'
-    });
-    const handledPromise = promiseValue.then(result => {
-      const successOptions = resolvePromiseOptions(options.success, result);
-      update(id, {
-        ...successOptions,
-        type: 'success'
-      });
-      const successTimeout = successOptions.timeout ?? timeout;
-      if (successTimeout > 0) {
-        scheduleTimer(id, successTimeout, () => close(id));
-      }
-      if (hovering || focused || !windowFocusedRef.current) {
-        pauseTimers();
-      }
-      return result;
-    }).catch(error => {
-      const errorOptions = resolvePromiseOptions(options.error, error);
-      update(id, {
-        ...errorOptions,
-        type: 'error'
-      });
-      const errorTimeout = errorOptions.timeout ?? timeout;
-      if (errorTimeout > 0) {
-        scheduleTimer(id, errorTimeout, () => close(id));
-      }
-      if (hovering || focused || !windowFocusedRef.current) {
-        pauseTimers();
-      }
-      return Promise.reject(error);
-    });
-
-    // Private API used exclusively by `Manager` to handoff the promise
-    // back to the manager after it's handled here.
-    if ({}.hasOwnProperty.call(options, 'setPromise')) {
-      options.setPromise(handledPromise);
-    }
-    return handledPromise;
-  });
+  const store = useRefWithInit(() => new ToastStore({
+    timeout,
+    limit,
+    viewport: null,
+    toasts: [],
+    hovering: false,
+    focused: false,
+    isWindowFocused: true,
+    prevFocusElement: null
+  })).current;
+  useOnMount(store.disposeEffect);
   React.useEffect(function subscribeToToastManager() {
     if (!toastManager) {
       return undefined;
@@ -255,40 +40,23 @@ export const ToastProvider = function ToastProvider(props) {
     }) => {
       const id = options.id;
       if (action === 'promise' && options.promise) {
-        promise(options.promise, options);
+        store.promiseToast(options.promise, options);
       } else if (action === 'update' && id) {
-        update(id, options);
+        store.updateToast(id, options);
       } else if (action === 'close' && id) {
-        close(id);
+        store.closeToast(id);
       } else {
-        add(options);
+        store.addToast(options);
       }
     });
     return unsubscribe;
-  }, [add, update, scheduleTimer, timeout, toastManager, promise, close]);
-  const contextValue = React.useMemo(() => ({
-    toasts,
-    setToasts,
-    hovering,
-    setHovering,
-    focused,
-    setFocused,
-    expanded,
-    add,
-    close,
-    remove,
-    update,
-    promise,
-    pauseTimers,
-    resumeTimers,
-    prevFocusElement,
-    setPrevFocusElement,
-    viewportRef,
-    scheduleTimer,
-    windowFocusedRef
-  }), [add, close, focused, hovering, expanded, pauseTimers, prevFocusElement, promise, remove, resumeTimers, scheduleTimer, toasts, update]);
+  }, [store, timeout, toastManager]);
+  store.useSyncedValues({
+    timeout,
+    limit
+  });
   return /*#__PURE__*/_jsx(ToastContext.Provider, {
-    value: contextValue,
+    value: store,
     children: children
   });
 };

package/esm/toast/provider/ToastProviderContext.d.ts

@@ -1,26 +1,5 @@
 import * as React from 'react';
-import type { ToastObject, ToastManagerAddOptions, ToastManagerPromiseOptions, ToastManagerUpdateOptions } from "../useToastManager.js";
-export interface ToastContextValue<Data extends object> {
-  toasts: ToastObject<Data>[];
-  setToasts: React.Dispatch<React.SetStateAction<ToastObject<Data>[]>>;
-  hovering: boolean;
-  setHovering: React.Dispatch<React.SetStateAction<boolean>>;
-  focused: boolean;
-  setFocused: React.Dispatch<React.SetStateAction<boolean>>;
-  expanded: boolean;
-  add: (options: ToastManagerAddOptions<Data>) => string;
-  update: (id: string, options: ToastManagerUpdateOptions<Data>) => void;
-  promise: <Value>(value: Promise<Value>, options: ToastManagerPromiseOptions<Value, Data>) => Promise<Value>;
-  close: (id: string) => void;
-  pauseTimers: () => void;
-  resumeTimers: () => void;
-  remove: (id: string) => void;
-  prevFocusElement: HTMLElement | null;
-  setPrevFocusElement: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
-  viewportRef: React.RefObject<HTMLElement | null>;
-  windowFocusedRef: React.RefObject<boolean>;
-  scheduleTimer: (id: string, delay: number, callback: () => void) => void;
-}
-export type ToastContext<Data extends object> = ToastContextValue<Data>;
-export declare const ToastContext: React.Context<ToastContext<any> | undefined>;
-export declare function useToastContext(): ToastContext<any>;
+import { ToastStore } from "../store.js";
+export type ToastContext = ToastStore;
+export declare const ToastContext: React.Context<ToastStore | undefined>;
+export declare function useToastProviderContext(): ToastStore;