react-compact-toast/dist/index.d.mts

A tiny, compact, and fully customizable toast notification library.

import * as react0 from "react";
import * as react_jsx_runtime0 from "react/jsx-runtime";

//#region src/types/index.d.ts
type ToastPosition = 'bottomCenter' | 'bottomLeft' | 'bottomRight' | 'topCenter' | 'topLeft' | 'topRight';
type ToastProps = {
  toastId: string;
  text: string;
  icon?: React.JSX.Element | string | 'default';
  highlightText?: string;
  highlightColor?: string;
  autoClose?: false | number;
  closeOnClick?: boolean;
  position?: ToastPosition;
  offset?: number | string;
  className?: string;
  containerStyle?: React.CSSProperties;
};
declare const enum ToastEvent {
  Add = 0,
  Delete = 1,
  Update = 2,
}
type EventCallbacks = {
  [ToastEvent.Add]: (props: ToastProps) => void;
  [ToastEvent.Delete]: (id: string) => void;
  [ToastEvent.Update]: (id: string, text: string) => void;
};
type TimeoutId = ReturnType<typeof setTimeout>;
interface EventManager {
  list: Map<ToastEvent, EventCallbacks[keyof EventCallbacks][]>;
  emitQueue: Map<ToastEvent, TimeoutId[]>;
  activeToastCount: number;
  on<E extends ToastEvent>(event: E, callback: EventCallbacks[E]): EventManager;
  off<E extends ToastEvent>(event: E, callback?: EventCallbacks[E]): EventManager;
  cancelEmit(event: ToastEvent): EventManager;
  emit<E extends ToastEvent>(event: E, ...args: Parameters<EventCallbacks[E]>): void;
}
//#endregion
//#region src/core/event-manager.d.ts
declare const eventManager: EventManager;
//#endregion
//#region src/core/toast.d.ts
type ToastOptions = Omit<ToastProps, 'toastId'>;
/**
 * Creates and displays a toast notification.
 *
 * @param {ToastOptions | string} options - Toast configuration options or a simple text message
 *   - If a string is provided, it will be converted to `{ text: options }`
 *   - If an object is provided, it should contain toast configuration properties:
 * @param {string} options.text - The text content to display in the toast
 * @param {React.JSX.Element | string | 'default'} [options.icon] - Icon to display in the toast:
 *   - JSX Element: Custom React component
 *   - string: Text/emoji icon
 *   - 'default': Default icon
 *   - undefined: No icon
 * @param {string} [options.highlightText] - Text to highlight with a different color
 * @param {string} [options.highlightColor] - Custom color for the highlighted text (CSS color value)
 * @param {false | number} [options.autoClose=3000] - Auto-close behavior:
 *   - `false`: Toast will not close automatically
 *   - `number`: Time in milliseconds before the toast closes automatically
 * @param {boolean} [options.closeOnClick=true] - Whether the toast should close when clicked
 * @param {ToastPosition} [options.position='bottomCenter'] - Position where the toast appears:
 *   - 'topLeft' | 'topCenter' | 'topRight' | 'bottomLeft' | 'bottomCenter' | 'bottomRight'
 * @param {string} [options.className] - Custom CSS classes to apply to the toast
 * @param {string | number} [options.offset] - Custom offset from screen edge:
 *   - `string`: CSS value like '50px', '2rem', '5vh'
 *   - `number`: Pixel value (e.g., 50 becomes '50px')
 * @param {React.CSSProperties} [options.containerStyle] - Custom inline styles to apply to the toast container
 * @returns {string} The unique ID of the created toast
 *
 * @example
 * // Simple text toast
 * toast('Hello, world!');
 *
 * @example
 * // Toast with custom options
 * toast({
 *   text: 'Custom notification',
 *   icon: '🚀',
 *   highlightText: 'Custom',
 *   highlightColor: '#ff6b6b',
 *   autoClose: 5000,
 *   closeOnClick: true,
 *   position: 'topRight',
 *   className: 'bg-blue-500 text-white rounded-lg',
 *   offset: 50, // 50px from screen edge
 *   containerStyle: { right: '100px', top: '50px' }, // Custom container positioning
 * });
 *
 * @example
 * // Toast with custom offset
 * toast({
 *   text: 'Far from edge',
 *   position: 'topCenter',
 *   offset: '100px', // 100px from top
 * });
 */
declare const toast: (options: ToastOptions | string) => string;
//#endregion
//#region src/components/toast.d.ts
declare const Toast: ({
  toastId,
  text,
  icon,
  highlightText,
  highlightColor,
  autoClose,
  closeOnClick,
  position,
  offset,
  className
}: ToastProps) => react_jsx_runtime0.JSX.Element;
//#endregion
//#region src/components/toast-container.d.ts
declare const _default: react0.MemoExoticComponent<() => react_jsx_runtime0.JSX.Element>;
//#endregion
//#region src/hooks/use-toast.d.ts
declare const useToast: (toastId: string, autoClose?: number | false, closeOnClick?: boolean) => {
  isExiting: boolean;
  handleAnimationEnd: () => void;
  handleClick: () => void;
};
//#endregion
//#region src/hooks/use-toast-container.d.ts
type ToastPositionGroup = {
  toasts: ToastProps[];
  containerStyle?: React.CSSProperties;
};
declare const useToastContainer: () => {
  getToastPositionGroupToRender: () => Map<ToastPosition, ToastPositionGroup>;
};
//#endregion
export { type EventCallbacks, type EventManager, type TimeoutId, Toast, _default as ToastContainer, type ToastEvent, type ToastPosition, type ToastProps, eventManager, toast, useToast, useToastContainer };
//# sourceMappingURL=index.d.mts.map