/// <reference types="react" />
import { ReactElement, FunctionComponent } from 'react';
import { InputProps as InputProps$1 } from 'package/components/types';

declare enum imgFitEnum {
    CUSTOM = "custom",
    COVER = "cover",
    CONTAIN = "contain"
}

interface KaElementProps {
    children?: any;
    code: string;
    options?: any;
    xs?: any;
    sm?: any;
    data?: any;
    selected?: any;
    hover?: any;
}
interface KaContainerProps extends KaElementProps {
    simple?: any;
}
interface InputProps extends ElementProps {
    modelValue?: any;
}
interface ElementProps {
    className: string;
    children: string | ReactElement;
    options?: Options;
    templateClass?: string;
    value?: any;
    lazyValue?: any;
    deactivated?: boolean;
    disabled?: boolean;
}
interface Options {
    animation?: string;
    animationIn?: string;
    animationOut?: string;
    keepAlive?: boolean;
    lazyOptions?: LazyOptions;
    visibilityDelay?: number;
    hidden?: any;
    style?: ElementStyle;
    $state?: {
        selected?: boolean;
    };
    $inheritState?: ElementCssState;
    $containerParent?: {
        [key: string]: boolean;
    };
    labelPosition?: string;
    click?: (e?: React.MouseEvent<HTMLAnchorElement | HTMLDivElement>) => void;
    href?: string;
    hasTransform?: boolean;
    alt?: string;
    defaultImage?: string;
    imgFit?: imgFitEnum;
    flexDirection?: string;
    overflow?: string;
    bgType?: number;
    videoOptions?: {
        src: string;
    };
    lottieOptions?: {
        src: string;
    };
    buttonIcon?: any;
    debounce?: number;
    placeholder?: string;
    tooltip?: {
        title?: string;
        content?: string;
    };
}
interface LazyOptions {
    [key: string]: any;
}
interface ElementStyle {
    padding?: Array<number>;
    innerImg?: string;
    innerImgFit?: imgFitEnum;
    innerBackgroundColor?: string;
    innerOpacity?: number;
    color?: string;
    border?: Array<number>;
    borderColor?: Array<number>;
    borderRadius?: any;
    borderStyle?: any;
    canOverflow?: any;
    zoom?: number;
    boxShadow?: Array<any>;
}
interface ElementCssState {
    hover?: boolean;
}
interface FullComponentProps {
    code: string;
    children: string;
    options?: Options;
}

/**
 * Displays a text based on HTML content
 * @param value some HTML content to display
 * @returns
 */
declare const Text: FunctionComponent<ElementProps>;

/**
 * Displays a Button based on HTML content
 * @param value some HTML content to display
 * @returns
 */
declare const Button: FunctionComponent<ElementProps>;

/**
 * Iframe is a function component that takes in a className and lazyValue and returns an iframe element
 * with the className and src set to the lazyValue.
 * @param  - ElementProps - This is the type of the props that the component will receive.
 */
declare const Iframe: FunctionComponent<ElementProps>;

/**
 * Displays an Image with possible options
 * @param value an url for the image source
 * @param options contains properties : "alt" (description), "defaultImage" and "fit".
 * @returns img component
 */
declare const Image: ({ lazyValue, options, className }: ElementProps) => JSX.Element;

/**
 * Displays a separator, style depends on options of the element wrapper
 * @returns
 */
declare const Separator: FunctionComponent<ElementProps>;

/**
 * Displays a Collection View, was a youtube video player..
 * @returns
 */
declare const CollectionView: FunctionComponent<ElementProps>;

declare const Video: ({ lazyValue, options, className }: ElementProps) => JSX.Element;

declare const Lottie: ({ lazyValue, options, className, deactivated }: ElementProps) => JSX.Element;

/**
 * A text Input component
 * @returns
 */
declare const StringInput: FunctionComponent<InputProps$1>;

interface ElementWrapperProps {
    Element?: FunctionComponent<ElementProps>;
    code: string;
    options?: Options;
    value?: any;
    lazyOptions?: any;
    children: string | ReactElement;
    selected?: any;
    hover?: any;
    xs?: any;
    sm?: any;
    hasLabelSlot?: boolean;
    labelPosition?: string;
    labelClass?: string;
    label?: string;
}
/**
 * A wrapper of base kapix components like Text, Image, Button etc.
 * Will manage animations, visibility, responsiveness, conditionally-applied style etc.
 * @returns A styled and computed wrapper for base component.
 */
declare const ElementWrapper: ({ hasLabelSlot, labelPosition, labelClass, label, children, options, Element, code, xs, sm, lazyOptions, value }: ElementWrapperProps) => JSX.Element;

interface ContainerProps {
    children: any;
    simple?: boolean;
    options?: Options;
    code: string;
    xs?: any;
    sm?: any;
    data?: any;
    lazyOptions?: any;
}
/**
 * A container, that can be "simple" or not, used for layout purposes or specific objects like video
 * @returns
 */
declare const Container: ({ children, simple, options, code, xs, sm, lazyOptions }: ContainerProps) => JSX.Element;

/**
 * scroll to the component that has appropriate code (needs "id" on outer div of Element and Container)
 *
 */
declare const scrollTo: ({ el }: {
    el: string;
}) => void;

export { ElementCssState, ElementProps, ElementStyle, FullComponentProps, InputProps, KaContainerProps, KaElementProps, Button as KapixButton, CollectionView as KapixCollectionView, Container as KapixContainer, ElementWrapper as KapixElement, Iframe as KapixIframe, Image as KapixImage, Lottie as KapixLottie, Separator as KapixSeparator, StringInput as KapixStringInput, Text as KapixText, Video as KapixVideo, LazyOptions, Options, scrollTo };