import React, { ReactNode } from 'react';
import { UseQueryResult } from '@tanstack/react-query';

declare const FavoriteHeart: ({ id, name, onChange, onMouseDown, disabled, size, }: {
    /** The unique id of the favorite item to be fetched from API. */
    id: string;
    /** Name of item to be favorited. Used to generate unique name of control, needed for accessibility. */
    name: string;
    /** Called once the favorite heart has been clicked and updated. */
    onChange?: (isFavorited: boolean, event: React.ChangeEvent<HTMLInputElement> | React.KeyboardEvent<HTMLInputElement>) => void;
    onMouseDown?: (event: React.MouseEvent<HTMLInputElement, MouseEvent>) => void;
    disabled?: boolean;
    /**
     * @param {string} props.size  A CSS length unit like '2rem' or '32px' to be applied to the height and
     * width of the outer container. Sizes smaller '1.5rem' or equivalent will have no effect.
     */
    size?: string;
}) => JSX.Element;

type Favorite = {
    id: string;
    pos: number;
};
declare const useFavoritesQuery: (applicationId: string) => UseQueryResult<Favorite[], unknown>;

declare const FavoritesProvider: ({ children, onFavoritesChange, applicationId, maxFavorites, }: {
    children: ReactNode;
    onFavoritesChange?: (favorites: Favorite[]) => void;
    applicationId?: string;
    maxFavorites?: number;
}) => JSX.Element;

export { FavoriteHeart, FavoritesProvider, FavoritesProvider as default, useFavoritesQuery };