@neuctra/ui/dist/types/components/basic/Alert.d.ts

A modern, responsive, customizable React UI component library powered by Tailwind CSS and Vite.

import { default as React, ReactNode } from 'react';
export type AlertType = "success" | "error" | "warning" | "info" | "loading";
export type ToastVariant = "soft" | "light" | "dark";
export type ToastPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
export interface Toast {
    id: string;
    title?: string;
    description?: string;
    type?: AlertType;
    variant?: ToastVariant;
    duration?: number;
    /** Overrides the default type icon (success/error/etc). Pass any node, or `null` to render no icon at all. */
    icon?: ReactNode;
    className?: string;
    style?: React.CSSProperties;
    titleClassName?: string;
    descriptionClassName?: string;
    iconClassName?: string;
    contentClassName?: string;
    closeButtonClassName?: string;
}
export interface ToastContextProps {
    toast: ToastFunction;
    dismiss: (id?: string) => void;
}
export type ToastFunction = {
    /** Returns the toast's id, so it can be updated (pass the same `id` back in) or dismissed later. */
    (input: Omit<Toast, "id"> | string): string;
    success: (message: string, options?: Partial<Toast>) => string;
    error: (message: string, options?: Partial<Toast>) => string;
    warning: (message: string, options?: Partial<Toast>) => string;
    info: (message: string, options?: Partial<Toast>) => string;
    /** Persists until dismissed or replaced — pair with `.promise()` or dismiss it manually once the async work finishes. */
    loading: (message: string, options?: Partial<Toast>) => string;
    /**
     * Shows a loading toast, then morphs it in place into a success or error
     * toast once `promise` settles — the react-hot-toast async pattern.
     */
    promise: <T>(promise: Promise<T>, messages: {
        loading: string;
        success: string | ((data: T) => string);
        error: string | ((error: unknown) => string);
    }, options?: Partial<Toast>) => Promise<T>;
    dismiss: (id?: string) => void;
};
/** Standalone toast trigger — import and call from anywhere, no hook or provider lookup required. */
export declare const toast: ToastFunction;
/**
 * Kept for consumers who prefer a hook — returns the exact same global
 * `toast`/`dismiss`, so mixing `useToast()` and the standalone `toast` import
 * in the same app is always in sync. No longer throws if called without a
 * mounted `<ToastProvider>` (matches react-hot-toast: toasts just won't be
 * visible until a provider is rendered somewhere in the tree).
 */
export declare const useToast: () => ToastContextProps;
export interface ToastProviderProps {
    children: ReactNode;
    /** Maximum toasts kept on screen at once. Oldest are dropped first. */
    maxToasts?: number;
    /** Customize the fixed toast viewport that hosts all toasts. */
    containerClassName?: string;
    /** Corner (or edge-center) the toast stack anchors to. */
    position?: ToastPosition;
}
/**
 * Renders the toast viewport for the whole app. Mount this ONCE near your
 * root — every `toast()` call (standalone import or `useToast()`) renders
 * into whichever `<ToastProvider>` is mounted, the same way there should
 * only be one `<Toaster />` in a react-hot-toast app.
 */
export declare const ToastProvider: React.FC<ToastProviderProps>;
declare const ToastItem: React.FC<{
    toast: Toast;
    onClose: () => void;
}>;
export default ToastItem;