@arolariu/components
Version:
🎨 70+ beautiful, accessible React components built on Base UI. TypeScript-first, CSS Modules styling, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡
148 lines • 5.42 kB
TypeScript
/**
* @fileoverview Base UI-backed toast provider and imperative toast bridge.
*
* Replaces the previous `sonner` runtime dependency while preserving the existing public exports:
* `Toaster` for container rendering and `toast` for imperative notifications used throughout the
* website and component consumers.
*/
import { Toast } from "@base-ui/react/toast";
import * as React from "react";
type ToastPosition = "top-left" | "top-right" | "bottom-left" | "bottom-right" | "top-center" | "bottom-center";
type ToastVariant = "default" | "success" | "error" | "info" | "warning" | "loading";
type ToastIdentifier = number | string;
type ToastRenderable = React.ReactNode | (() => React.ReactNode);
type ToastPromise<Value> = Promise<Value> | (() => Promise<Value>);
interface ToastAction {
label: React.ReactNode;
onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
}
type ToastActionRenderable = React.ReactNode | ToastAction;
interface ToastOptions {
id?: ToastIdentifier;
description?: ToastRenderable;
duration?: number;
className?: string;
descriptionClassName?: string;
closeButton?: boolean;
closeButtonAriaLabel?: string;
style?: React.CSSProperties;
priority?: "high" | "low";
action?: ToastActionRenderable;
cancel?: ToastActionRenderable;
onDismiss?: (toast: ToastSnapshot) => void;
onAutoClose?: (toast: ToastSnapshot) => void;
}
interface ToastPromiseResolvedOptions extends ToastOptions {
message: ToastRenderable;
}
type ToastPromiseState<Value> = ToastRenderable | ToastPromiseResolvedOptions | ((value: Value) => ToastRenderable | ToastPromiseResolvedOptions | Promise<ToastRenderable | ToastPromiseResolvedOptions>);
interface ToastPromiseOptions<Value> extends ToastOptions {
loading?: ToastRenderable | ToastPromiseResolvedOptions;
success?: ToastPromiseState<Value>;
error?: ToastPromiseState<unknown>;
finally?: () => void | Promise<void>;
}
interface ToasterProps {
/**
* Screen position used for the toast viewport.
* @default "bottom-right"
*/
position?: ToastPosition;
/**
* Default auto-dismiss duration, in milliseconds, for each toast.
* @default 5000
*/
duration?: number;
/**
* Maximum number of simultaneously visible toasts.
* @default 3
*/
visibleToasts?: number;
/**
* Whether to render a close button for each toast by default.
* @default true
*/
closeButton?: boolean;
/**
* Accessible label announced for the toast viewport container.
* @default "Notifications"
*/
containerAriaLabel?: string;
/**
* Additional CSS classes merged with the toast viewport.
* @default undefined
*/
className?: string;
/**
* Inline styles applied to the toast viewport.
* @default undefined
*/
style?: React.CSSProperties;
/**
* Default options merged into each toast created while this toaster is mounted.
* @default undefined
*/
toastOptions?: ToastOptions;
}
interface ToastSnapshot {
id: string;
variant: ToastVariant;
title?: React.ReactNode;
description?: React.ReactNode;
}
interface ToastUpdateOptions extends ToastOptions {
message?: ToastRenderable;
variant?: ToastVariant;
}
interface ToastApi {
(message: ToastRenderable, options?: ToastOptions): string;
success: (message: ToastRenderable, options?: ToastOptions) => string;
error: (message: ToastRenderable, options?: ToastOptions) => string;
info: (message: ToastRenderable, options?: ToastOptions) => string;
warning: (message: ToastRenderable, options?: ToastOptions) => string;
loading: (message: ToastRenderable, options?: ToastOptions) => string;
message: (message: ToastRenderable, options?: ToastOptions) => string;
update: (toastId: ToastIdentifier, options: ToastUpdateOptions) => string;
dismiss: (toastId?: ToastIdentifier) => string | undefined;
promise: <Value>(promise: ToastPromise<Value>, options?: ToastPromiseOptions<Value>) => Promise<Value>;
custom: (renderer: (toastId: string) => React.ReactElement, options?: ToastOptions) => string;
getToasts: () => ReadonlyArray<ToastSnapshot>;
getHistory: () => ReadonlyArray<ToastSnapshot>;
}
/**
* Toast notification container.
*
* @remarks
* Renders the Base UI provider, portal, and viewport with defaults that preserve the previous
* shared `Toaster` export behavior used by the website.
*
* @example
* ```tsx
* <Toaster position='top-right' visibleToasts={5} />
* ```
*
* @see {@link https://base-ui.com/react/components/toast | Base UI Toast Docs}
*/
/**
* Toaster is the root viewport container for displaying toast notifications.
* It should be rendered once at the app root level.
*/
declare const Toaster: React.ForwardRefExoticComponent<ToasterProps & React.RefAttributes<HTMLDivElement>>;
/**
* Imperative toast API for creating transient notifications outside React render flows.
*
* @remarks
* Built on Base UI's toast manager and preserved as a drop-in replacement for the previous
* `sonner` export surface.
*
* @example
* ```tsx
* toast.success("Profile updated");
* ```
*
* @see {@link https://base-ui.com/react/components/toast | Base UI Toast Docs}
*/
declare const toast: ToastApi;
export { toast, Toaster };
export type { Toast };
//# sourceMappingURL=toast.d.ts.map