import { MotionProps } from 'framer-motion';
import { LongPressReactEvents } from 'use-long-press';
import { ReactElement, ReactNode, ElementType, CSSProperties } from 'react';
import { EntityName, DomainService, ExtractDomain, ServiceData, HassEntityWithService, HistoryOptions } from '@hakit/core';
import { CSSInterpolation } from '@emotion/serialize';
import { RipplesProps, AvailableQueries, ModalByEntityDomainProps, ButtonBarProps, SvgGraphProps, RelatedEntity } from '../..';
import { FeatureEntity } from './FeatureEntity';
import { useResizeDetectorProps } from 'react-resize-detector';
type Extendable<T extends ElementType> = Omit<React.ComponentPropsWithRef<T> & MotionProps, "onClick" | "disabled" | "title" | "children" | "active">;
type AllowedFeaturedEntity = ReactElement<typeof FeatureEntity> | false | null | undefined;
type AllowedFeaturedEntities = AllowedFeaturedEntity | AllowedFeaturedEntity[];
type AllowedRelatedEntity = ReactElement<typeof RelatedEntity> | false | null | undefined;
type AllowedRelatedEntities = AllowedRelatedEntity | AllowedRelatedEntity[];
export type CardBaseProps<T extends ElementType = "div", E extends EntityName = EntityName> = Extendable<T> & AvailableQueries & {
    /** convert the component type to something else @default "div" */
    as?: T;
    /** children to render alongside the card */
    children?: ReactNode;
    /** should the card be disabled, this will disable any click events, service calls and scale effects */
    disabled?: boolean;
    /** Optional active param, By default this is updated via home assistant  @default undefined */
    active?: boolean;
    /** By default, the title is retrieved from the domain name, or you can specify a manual title @default undefined */
    title?: ReactNode;
    /** The name of your entity */
    entity?: E;
    /** The service name to call */
    service?: DomainService<ExtractDomain<E>>;
    /** The data to pass to the service */
    serviceData?: ServiceData<ExtractDomain<E>, DomainService<ExtractDomain<E>>>;
    /** allows you to place a fully functional and interactive element at predefined zones of the card, like displaying an icon in the top left which might be a sensor indicating battery level */
    relatedEntities?: AllowedRelatedEntities;
    /** provide a FeatureEntity component as a list or individual components to render a bar at the bottom of the card */
    features?: AllowedFeaturedEntities;
    /** props to pass to the feature bar */
    featureBarProps?: Omit<ButtonBarProps, "children">;
    /** callback to fire after a long press event */
    longPressCallback?: E extends undefined ? (entity: null, event: LongPressReactEvents) => void : (entity: HassEntityWithService<ExtractDomain<E>>, event: LongPressReactEvents) => void;
    /** The onClick handler is called when the card is pressed, the first argument will be entity object with api methods if entity is provided  */
    /** The onClick handler is called when the button is pressed, the first argument will be entity object with api methods if entity is provided  */
    onClick?: E extends undefined ? (entity: null, event: React.MouseEvent<HTMLElement>) => void : (entity: HassEntityWithService<ExtractDomain<E>>, event: React.MouseEvent<HTMLElement>) => void;
    /** props to pass to the modal */
    modalProps?: Partial<ModalByEntityDomainProps<E>>;
    /** include ripples or not */
    disableRipples?: boolean;
    /** disable the scale effect on the card when clicked */
    disableScale?: boolean;
    /** disable the styles of the card when in the active state */
    disableActiveState?: boolean;
    /** This also controls the animated modal border-radius, update the border radius of the card @default "16px" */
    borderRadius?: CSSProperties["borderRadius"];
    /** completely disable the automated column sizes, this will default to whatever width is provided by the user or the card @default false */
    disableColumns?: boolean;
    /** props to pass to the ripple component if enabled */
    rippleProps?: Omit<RipplesProps, "children">;
    /** className to provide to the trigger element */
    triggerClass?: string;
    /** the graph settings containing the entity to display a graph in the background of the card */
    graph?: {
        /** the entity to display the graph for */
        entity: EntityName;
        /** the props to pass to the svg graph, control the styles and colors of the graph from here */
        props?: SvgGraphProps;
        /** the space at the bottom of the card is automatically calculated by the available height, you can adjust this by manipulating the value here @default 0px */
        adjustGraphSpaceBy?: CSSProperties["paddingBottom"];
        /** options to pass to the history request */
        historyOptions?: HistoryOptions;
    };
    /**
     *
     * A css string to update the card, this is similar to how you'd write scss.
     *
     * ```jsx
     * export const MyComponent = (otherProps) => {
     *   return <SomeCard cssStyles={`
     *     color: var(--ha-900-contrast);
     *    .some-selector {
     *        &:hover {
     *            background-color: var(--ha-A400);
     *        }
     *    }
     * `} {...otherProps} />
     * }
     * ```
     */
    cssStyles?: CSSInterpolation;
    /** remove all base styles of the card and just use the inbuilt functionality */
    onlyFunctionality?: boolean;
    /** props to pass to the resize detector, this is useful if you want to trigger something whenever the card resizes */
    resizeDetectorProps?: useResizeDetectorProps<HTMLElement>;
};
/**
 * This is the base card component that every other card component should extend, it comes with everything we need to be able to replicate functionality
 * like the modal popup, ripples and more.
 *
 * You can use this if you want an empty shell of a component that you can build on top of.
 * */
export declare const CardBase: import('react').MemoExoticComponent<(<T extends ElementType, E extends EntityName>(props: CardBaseProps<T, E>) => import("@emotion/react/jsx-runtime").JSX.Element)>;
export {};
//# sourceMappingURL=index.d.ts.map