@payfit/unity-components/dist/esm/components/table/parts/TableEmptyState.d.ts

import { VariantProps } from '@payfit/unity-themes';
import { PropsWithChildren, ReactNode } from 'react';
export declare const tableEmptyState: import('tailwind-variants').TVReturnType<{
    [key: string]: {
        [key: string]: import('tailwind-merge').ClassNameValue | {
            base?: import('tailwind-merge').ClassNameValue;
            wrapper?: import('tailwind-merge').ClassNameValue;
        };
    };
} | {
    [x: string]: {
        [x: string]: import('tailwind-merge').ClassNameValue | {
            base?: import('tailwind-merge').ClassNameValue;
            wrapper?: import('tailwind-merge').ClassNameValue;
        };
    };
} | {}, {
    base: string;
    wrapper: string;
}, undefined, {
    [key: string]: {
        [key: string]: import('tailwind-merge').ClassNameValue | {
            base?: import('tailwind-merge').ClassNameValue;
            wrapper?: import('tailwind-merge').ClassNameValue;
        };
    };
} | {}, {
    base: string;
    wrapper: string;
}, import('tailwind-variants').TVReturnType<unknown, {
    base: string;
    wrapper: string;
}, undefined, unknown, unknown, undefined>>;
export type TableEmptyStateProps = PropsWithChildren<VariantProps<typeof tableEmptyState>> & {
    className?: string;
};
export interface TableEmptyStateTextProps extends PropsWithChildren {
    /**
     * The text's variant. It can be one of two options:
     * - `title` renders an `h6` element with `bodyStrong` style
     * - `description` renders a `p` element with `body` style
     */
    variant: 'title' | 'description';
}
/**
 * The `TableEmptyStateText` component provides styled text elements for empty state messages.
 * Use this component to create consistent text hierarchies within empty states, with support for titles and descriptions.
 * @param {TableEmptyStateTextProps} props - The props for the `TableEmptyStateText` component
 * @see {TableEmptyStateTextProps} for all available props
 * @example
 * ```tsx
 * import { TableEmptyStateText } from '@payfit/unity-components'
 *
 * <TableEmptyStateText variant="title">No results found</TableEmptyStateText>
 * <TableEmptyStateText variant="description">Try adjusting your search filters</TableEmptyStateText>
 * ```
 * @remarks
 * [API](https://unity-components.payfit.io/?path=/story/data-table-tableemptystate--docs) • [Design docs]()
 */
declare const TableEmptyStateText: import('react').ForwardRefExoticComponent<TableEmptyStateTextProps & import('react').RefAttributes<HTMLElement>>;
/**
 * The `TableEmptyState` component provides a standardized way to display empty states in tables when there's no data to show.
 * Use this component to improve user experience by providing clear feedback and guidance when a table has no content.
 * @param {TableEmptyStateProps} props - The props for the `TableEmptyState` component
 * @see {@link TableEmptyStateProps} for all available props
 * @example
 * ```tsx
 * import { TableEmptyState } from '@payfit/unity-components'
 *
 * <TableEmptyState>
 *   <img src="/images/empty-state.svg" alt="No data" />
 *   <TableEmptyStateText>No data available</TableEmptyStateText>
 * </TableEmptyState>
 * ```
 * @remarks
 * {@link https://unity-components.payfit.io/?path=/story/data-table-tableemptystate--docs|API and Demos} • {@link https://payfit.design|Design docs}
 */
declare const TableEmptyState: import('react').ForwardRefExoticComponent<VariantProps<import('tailwind-variants').TVReturnType<{
    [key: string]: {
        [key: string]: import('tailwind-merge').ClassNameValue | {
            base?: import('tailwind-merge').ClassNameValue;
            wrapper?: import('tailwind-merge').ClassNameValue;
        };
    };
} | {
    [x: string]: {
        [x: string]: import('tailwind-merge').ClassNameValue | {
            base?: import('tailwind-merge').ClassNameValue;
            wrapper?: import('tailwind-merge').ClassNameValue;
        };
    };
} | {}, {
    base: string;
    wrapper: string;
}, undefined, {
    [key: string]: {
        [key: string]: import('tailwind-merge').ClassNameValue | {
            base?: import('tailwind-merge').ClassNameValue;
            wrapper?: import('tailwind-merge').ClassNameValue;
        };
    };
} | {}, {
    base: string;
    wrapper: string;
}, import('tailwind-variants').TVReturnType<unknown, {
    base: string;
    wrapper: string;
}, undefined, unknown, unknown, undefined>>> & {
    children?: ReactNode | undefined;
} & {
    className?: string;
} & import('react').RefAttributes<HTMLDivElement>>;
/**
 * A pre-configured loading state for tables.
 * Use this component to indicate that data is being loaded.
 * @see {TableEmptyState}
 * @example
 * ```tsx
 * import { TableEmptyStateLoading } from '@payfit/unity-components'
 *
 * <TableBody renderEmptyState={() => <TableEmptyStateLoading />}>{[]}</TableBody>
 * ```
 */
declare const TableEmptyStateLoading: () => import("react/jsx-runtime").JSX.Element;
/**
 * A pre-configured empty state for tables with no data.
 * Use this component to indicate that no results were found and provide guidance on how to adjust search or filters.
 * @param props - The component props
 * @param props.description - The description text to display explaining why there's no data
 * @param props.onButtonPress - Optional callback fired when the "Enable settings" button is clicked. If not provided, the button won't be rendered.
 * @see {TableEmptyState}
 * @example
 * ```tsx
 * import { TableEmptyStateNoData } from '@payfit/unity-components'
 *
 * // Without button
 * <TableBody renderEmptyState={() => <TableEmptyStateNoData description="No data available" />}>{[]}</TableBody>
 *
 * // With "Enable settings" button
 * <TableBody renderEmptyState={() => <TableEmptyStateNoData description="No data available" onButtonPress={() => console.log('Enable settings')} />}>{[]}</TableBody>
 * ```
 */
declare const TableEmptyStateNoData: ({ description, onButtonPress, }: {
    description: ReactNode;
    onButtonPress?: () => void;
}) => import("react/jsx-runtime").JSX.Element;
/**
 * A pre-configured error state for tables.
 * Use this component to indicate that an error occurred while loading data and provide guidance on how to resolve it.
 * @param props - The component props
 * @param props.onButtonPress - Optional callback fired when the "Go to dashboard" button is clicked. If not provided, the button won't be rendered.
 * @see {TableEmptyState}
 * @example
 * ```tsx
 * import { TableEmptyStateError } from '@payfit/unity-components'
 *
 * // Without button
 * <TableBody renderEmptyState={() => <TableEmptyStateError />}>{[]}</TableBody>
 *
 * // With "Go to dashboard" button
 * <TableBody renderEmptyState={() => <TableEmptyStateError onButtonPress={() => navigate('/dashboard')} />}>{[]}</TableBody>
 * ```
 */
declare const TableEmptyStateError: ({ onButtonPress, }: {
    onButtonPress?: () => void;
}) => import("react/jsx-runtime").JSX.Element;
/**
 * A pre-configured empty state for tables when no search results are found.
 * Use this component to indicate that the current filters or search didn't return any results.
 * @param props - The component props
 * @param props.onButtonPress - Optional callback fired when the "Reset filters" button is clicked. If not provided, the button won't be rendered.
 * @see {TableEmptyState}
 * @example
 * ```tsx
 * import { TableNoSearchResults } from '@payfit/unity-components'
 *
 * // Without button
 * <TableBody renderEmptyState={() => <TableNoSearchResults />}>{[]}</TableBody>
 *
 * // With "Reset filters" button
 * <TableBody renderEmptyState={() => <TableNoSearchResults onButtonPress={() => clearFilters()} />}>{[]}</TableBody>
 * ```
 */
declare const TableNoSearchResults: ({ onButtonPress, }: {
    onButtonPress?: () => void;
}) => import("react/jsx-runtime").JSX.Element;
export { TableEmptyState, TableEmptyStateText, TableEmptyStateLoading, TableEmptyStateNoData, TableEmptyStateError, TableNoSearchResults, };