import * as React from 'react';

export type AvatarSize = "auto" | "x-small" | "small" | "medium" | "large" | "x-large";

export type AvatarVariant = "circle" | "rectangle";

export interface AvatarProps {
    name: string;
    /**
     * URL of the image to display as the background image
     */
    src?: string;
    /**
     * Accessible label
     */
    alt?: string;
    size?: AvatarSize;
    variant?: AvatarVariant;
    /**
     * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
     * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
     * familiar CSS-like shorthand. For example: `margin="small auto large"`.
     */
    margin?: any;
    inline?: boolean;
    /**
     * Callback fired when the avatar image has loaded
     */
    onImageLoaded?: (...args: any[])=>any;
    /**
     * the element type to render as
     */
    as?: any;
    elementRef?: (...args: any[])=>any;
}

export class Avatar extends React.Component<AvatarProps, any> {
    render(): JSX.Element;

}




export type BadgeType = "count" | "notification";

export type BadgeVariant = "primary" | "success" | "danger";

export interface BadgeProps {
    count?: number;
    /**
     * The number at which the count gets truncated by
     * formatOverflowText. For example, a countUntil of 100
     * would stop the count at 99.
     */
    countUntil?: number;
    children?: React.ReactElement<any>;
    /**
     * Render Badge as a counter (`count`) or as a smaller dot (`notification`) with
     * no count number displayed.
     */
    type?: BadgeType;
    /**
     * Render Badge as an inline html element that is not positioned relative
     * to a child.
     */
    standalone?: boolean;
    /**
     * Make the Badge slowly pulse twice to get the user's attention.
     */
    pulse?: boolean;
    variant?: BadgeVariant;
    /**
     * Supported values are `top start`, `top end`, `end center`, `bottom end`,
     * `bottom start`, and `start center`
     */
    placement?: any;
    /**
     * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
     * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
     * familiar CSS-like shorthand. For example: `margin="small auto large"`.
     */
    margin?: any;
    /**
     * provides a reference to the underlying html root element
     */
    elementRef?: (...args: any[])=>any;
    formatOverflowText?: (...args: any[])=>any;
    formatOutput?: (...args: any[])=>any;
    as?: any;
}

export class Badge extends React.Component<BadgeProps, any> {
    render(): JSX.Element;

}




export type HeadingBorder = "none" | "top" | "bottom";

export type HeadingColor = "primary" | "secondary" | "primary-inverse" | "secondary-inverse" | "inherit";

export type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "reset";

export interface HeadingProps {
    border?: HeadingBorder;
    children?: any;
    color?: HeadingColor;
    level?: HeadingLevel;
    /**
     * the element type to render as (defaults to the level)
     */
    as?: any;
    ellipsis?: boolean;
    /**
     * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
     * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
     * familiar CSS-like shorthand. For example: `margin="small auto large"`.
     */
    margin?: any;
    elementRef?: (...args: any[])=>any;
}

export class Heading extends React.Component<HeadingProps, any> {
    render(): JSX.Element;

}




export interface ImgOverlay {
    color: string;
    opacity: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
    blend?: "normal" | "multiply" | "screen" | "overlay" | "color-burn";
}

export type ImgConstrain = "cover" | "contain";

export type ImgHeight = string | number;

export type ImgWidth = string | number;

export interface ImgProps {
    src: string;
    alt?: string;
    inline?: boolean;
    /**
     * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
     * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
     * familiar CSS-like shorthand. For example: `margin="small auto large"`.
     */
    margin?: any;
    /**
     * Valid values for `opacity` are `0` - `10`. Valid values for `blend` are
     * `normal` (default), `multiply`, `screen`, `overlay`, and `color-burn`.
     */
    overlay?: ImgOverlay;
    grayscale?: boolean;
    blur?: boolean;
    cover?: boolean;
    constrain?: ImgConstrain;
    elementRef?: (...args: any[])=>any;
    height?: ImgHeight;
    width?: ImgWidth;
}

export class Img extends React.Component<ImgProps, any> {
    render(): JSX.Element;

}




export type LinkVariant = "default" | "inverse";

export type LinkIcon = ((...args: any[])=>any) | React.ReactElement<any>;

export type LinkIconPlacement = "start" | "end";

export type LinkDisplay = "auto" | "block" | "inline-block" | "flex" | "inline-flex";

export interface LinkProps {
    href?: string;
    children: React.ReactNode;
    variant?: LinkVariant;
    /**
     * provides a reference to the underlying focusable (`button` or `a`) element
     */
    linkRef?: (...args: any[])=>any;
    /**
     * provides a reference to the underlying html element
     */
    elementRef?: (...args: any[])=>any;
    /**
     * the element type to render as (will default to `<a>` if href is provided)
     */
    as?: any;
    disabled?: boolean;
    onClick?: (...args: any[])=>any;
    /**
     * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
     * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
     * familiar CSS-like shorthand. For example: `margin="small auto large"`.
     */
    margin?: any;
    /**
     * Add an SVG icon to the Link. Do not add icons directly as
     * children.
     */
    icon?: LinkIcon;
    /**
     * Place the icon before or after the text in the Link.
     */
    iconPlacement?: LinkIconPlacement;
    /**
     * Set the CSS display property of the Link element. 'auto' sets no display property.
     */
    display?: LinkDisplay;
    /**
     * Set `false` to remove default underline if Link does not appear inline with text
     */
    isWithinText?: boolean;
}

export class Link extends React.Component<LinkProps, any> {
    render(): JSX.Element;

}




export type ListAs = "ul" | "ol";

export type ListSize = "small" | "medium" | "large";

export type ListVariant = "default" | "unstyled" | "inline";

export type ListDelimiter = "none" | "pipe" | "slash" | "arrow" | "dashed" | "solid";

export type ListItemSpacing = "none" | "xxx-small" | "xx-small" | "x-small" | "small" | "medium" | "large" | "x-large" | "xx-large";

export interface ListProps {
    /**
     * Only accepts `<List.Item>` as a child
     */
    children?: any;
    as?: ListAs;
    /**
     * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
     * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
     * familiar CSS-like shorthand. For example: `margin="small auto large"`.
     */
    margin?: any;
    size?: ListSize;
    variant?: ListVariant;
    delimiter?: ListDelimiter;
    /**
     * Sets the margin separating each ListItem.
     */
    itemSpacing?: ListItemSpacing;
    elementRef?: (...args: any[])=>any;
}

export class List extends React.Component<ListProps, any> {
    render(): JSX.Element;

}




export interface MetricsListProps {
    /**
     * children of type `MetricsList.Item`
     */
    children?: any;
}

export class MetricsList extends React.Component<MetricsListProps, any> {
    render(): JSX.Element;

}




export type PillVariant = "default" | "success" | "danger" | "primary" | "warning" | "message";

export interface PillProps {
    text: React.ReactNode;
    /**
     * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
     * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
     * familiar CSS-like shorthand. For example: `margin="small auto large"`.
     */
    margin?: any;
    variant?: PillVariant;
    elementRef?: (...args: any[])=>any;
    as?: any;
}

export class Pill extends React.Component<PillProps, any> {
    render(): JSX.Element;

}




export type ProgressSize = "x-small" | "small" | "medium" | "large";

export type ProgressVariant = "bar" | "circle" | "bar-inverse" | "circle-inverse";

export interface ProgressProps {
    /**
     * A label is required for accessibility
     */
    label: string;
    /**
     * Different-sized progress bars and circles
     */
    size?: ProgressSize;
    /**
     * Maximum value (defaults to 100)
     */
    valueMax?: number;
    /**
     * Receives the progress of the event
     */
    valueNow?: number;
    /**
     * A function that returns the current value formatted for screen readers
     */
    formatValueText?: (...args: any[])=>any;
    /**
     * A function to format the displayed value. If null the value will not display.
     */
    formatDisplayedValue?: (...args: any[])=>any;
    /**
     * Animate the progress meter to the current value when the component
     * has mounted
     */
    animateOnMount?: boolean;
    /**
     * The bar changes to your theme's success color when complete
     */
    successColor?: boolean;
    /**
     * Choose either a progress bar or circle. The `-inverse` variants are for
     * when you need the Progress component to appear on inverse backgrounds
     */
    variant?: ProgressVariant;
    /**
     * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
     * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
     * familiar CSS-like shorthand. For example: `margin="small auto large"`.
     */
    margin?: any;
    elementRef?: (...args: any[])=>any;
}

export class Progress extends React.Component<ProgressProps, any> {
    render(): JSX.Element;

}




export type RatingIconCount = 3 | 5;

export type RatingSize = "small" | "medium" | "large";

export interface RatingProps {
    /**
     * A label is required for accessibility
     */
    label: string;
    /**
     * A function that returns the current value formatted for screen readers
     */
    formatValueText?: (...args: any[])=>any;
    /**
     * Choose from a 0-3 or 0-5 rating system
     */
    iconCount?: RatingIconCount;
    /**
     * Choose from different rating icon sizes
     */
    size?: RatingSize;
    /**
     * The maximum rating (defaults to iconCount)
     */
    valueMax?: number;
    /**
     * The current rating
     */
    valueNow?: number;
    /**
     * Set to make the icons animate when they become filled
     */
    animateFill?: boolean;
    /**
     * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
     * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
     * familiar CSS-like shorthand. For example: `margin="small auto large"`.
     */
    margin?: any;
}

export class Rating extends React.Component<RatingProps, any> {
    render(): JSX.Element;

}




export type SpinnerRenderTitle = ((...args: any[])=>any) | React.ReactNode;

export type SpinnerSize = "x-small" | "small" | "medium" | "large";

export type SpinnerVariant = "default" | "inverse";

export interface SpinnerProps {
    /**
     * Give the spinner a title to be read by screenreaders (Deprecated)
     */
    title?: string;
    /**
     * Give the spinner a title to be read by screenreaders
     */
    renderTitle?: SpinnerRenderTitle;
    /**
     * Different-sized spinners
     */
    size?: SpinnerSize;
    /**
     * Different color schemes for use with light or dark backgrounds
     */
    variant?: SpinnerVariant;
    /**
     * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
     * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
     * familiar CSS-like shorthand. For example: `margin="small auto large"`.
     */
    margin?: any;
    elementRef?: (...args: any[])=>any;
    as?: any;
}

export class Spinner extends React.Component<SpinnerProps, any> {
    render(): JSX.Element;

}




export type TableSize = "small" | "medium" | "large";

export type TableStriped = "columns" | "rows";

export type TableLayout = "auto" | "fixed";

export interface TableProps {
    /**
     * Set the table's caption element (its label)
     */
    caption: React.ReactNode;
    /**
     * Build the table markup via the children prop
     */
    children?: React.ReactNode;
    /**
     * Highlight each row on hover
     */
    hover?: boolean;
    /**
     * Controls the padding and font-size of table cells
     */
    size?: TableSize;
    /**
     * Add a light background color to alternate rows or columns
     */
    striped?: TableStriped;
    /**
     * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
     * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
     * familiar CSS-like shorthand. For example: `margin="small auto large"`.
     */
    margin?: any;
    /**
     * provides a reference to the underlying html element
     */
    elementRef?: (...args: any[])=>any;
    /**
     * `auto` lets the browser determine table column widths based on cell content,
     * while `fixed` forces columns of equal width.
     */
    layout?: TableLayout;
}

export class Table extends React.Component<TableProps, any> {
    render(): JSX.Element;

}




export type TagText = string | React.ReactNode;

export type TagSize = "small" | "medium" | "large";

export type TagVariant = "default" | "inline";

export interface TagProps {
    className?: string;
    text: TagText;
    title?: string;
    /**
     * Whether or not to disable the tag
     */
    disabled?: boolean;
    /**
     * Works just like disabled but keeps the same styles as if it were active
     */
    readOnly?: boolean;
    dismissible?: boolean;
    /**
     * Valid values are `0`, `none`, `auto`, `xxxx-small`, `xx-small`, `x-small`,
     * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
     * familiar CSS-like shorthand. For example: `margin="small auto large"`.
     */
    margin?: any;
    /**
     * If you add an onClick prop, Tag renders as a clickable button
     */
    onClick?: (...args: any[])=>any;
    /**
     * Provides a reference to the underlying html root element
     */
    elementRef?: (...args: any[])=>any;
    size?: TagSize;
    variant?: TagVariant;
}

export class Tag extends React.Component<TagProps, any> {
    render(): JSX.Element;

}




export type TextWrap = "normal" | "break-word";

export type TextWeight = "normal" | "light" | "bold";

export type TextFontStyle = "italic" | "normal";

export type TextSize = "x-small" | "small" | "medium" | "large" | "x-large" | "xx-large";

export type TextLineHeight = "default" | "fit" | "condensed" | "double";

export type TextLetterSpacing = "normal" | "condensed" | "expanded";

export type TextTransform = "none" | "capitalize" | "uppercase" | "lowercase";

export type TextColor = "primary" | "secondary" | "primary-inverse" | "secondary-inverse" | "success" | "error" | "alert" | "warning" | "brand";

export interface TextProps {
    /**
     * the element type to render as
     */
    as?: any;
    wrap?: TextWrap;
    weight?: TextWeight;
    fontStyle?: TextFontStyle;
    size?: TextSize;
    lineHeight?: TextLineHeight;
    letterSpacing?: TextLetterSpacing;
    transform?: TextTransform;
    color?: TextColor;
    children?: React.ReactNode;
    elementRef?: (...args: any[])=>any;
}

export class Text extends React.Component<TextProps, any> {
    render(): JSX.Element;

}




export type TruncateTextMaxLines = string | number;

export type TruncateTextPosition = "end" | "middle";

export type TruncateTextTruncate = "character" | "word";

export interface TruncateTextProps {
    /**
     * The content to be truncated.
     */
    children: React.ReactNode;
    /**
     * Number of lines to allow before truncating. `auto` will fit to parent
     */
    maxLines?: TruncateTextMaxLines;
    /**
     * Where to place the ellipsis within the string
     */
    position?: TruncateTextPosition;
    /**
     * Add ellipsis after words or after any character
     */
    truncate?: TruncateTextTruncate;
    /**
     * A string to use as the ellipsis
     */
    ellipsis?: string;
    /**
     * Characters to ignore at truncated end of string
     */
    ignore?: string[];
    /**
     * Debounce delay in milliseconds
     */
    debounce?: number;
    /**
     * Callback when truncated text has changed
     */
    onUpdate?: (...args: any[])=>any;
    /**
     * Force truncation of invisible elements (hack; will be removed in favor
     * of a better fix)
     */
    shouldTruncateWhenInvisible?: boolean;
}

export class TruncateText extends React.Component<TruncateTextProps, any> {
    render(): JSX.Element;

}