import React from 'react';

type HeaderTypes =
    'fixed';

type AlertTypes =
    'primary' |
    'secondary' |
    'success' |
    'info' |
    'warning' |
    'error' |
    'light' |
    'icon' |
    'option-group';

type ButtonTypes =
    'primary' |
    'secondary' |
    'success' |
    'info' |
    'warning' |
    'error' |
    'light' |
    'outline' |
    'text' |
    'xs' |
    'sm' |
    'md' |
    'lg' |
    'xl' |
    'square' |
    'default' |
    'solid' |
    'round' |
    'block' |
    'active';

type ButtonGroupTypes =
    'xs' |
    'sm' |
    'md' |
    'lg' |
    'xl';

type RowSizes =
    'xs' |
    'sm' |
    'md' |
    'lg' |
    'xl';

type RowNumbers =
    '1' |
    '2' |
    '3' |
    '4' |
    '5' |
    '6' |
    '7' |
    '8' |
    '9' |
    '10' |
    '11' |
    '12';

type InputSizes =
    'xs' |
    'sm' |
    'md' |
    'lg' |
    'xl';

type ListTypes =
    'action' |
    'focus';

type TooltipTypes =
    'top' |
    'bottom' |
    'right' |
    'left';

type TagTypes =
    'warning' |
    'error' |
    'close';

type CardTypes =
    'hover' |
    'flat';

type JumbotronAlign =
    'left' |
    'center' |
    'right';

type HeaderOption = {
    title: string;
    link: string;
    bold?: boolean;
}

type JumbotronBtn<T> = [
    string,
    JSX.Element,
    React.AllHTMLAttributes<T> | undefined,
];

type BlankslateBtn<T> = [
    JSX.Element,
    React.AllHTMLAttributes<T> | undefined,
];

type Attrs = {
    'text-align'?: React.CSSProperties['textAlign'];
    'vertical-align'?: React.CSSProperties['verticalAlign'];
    'vertical-align-num'?: React.CSSProperties['verticalAlign'];
    'bg-color'?: React.CSSProperties['backgroundColor'];
    'bg-img'?: React.CSSProperties['backgroundImage'];
    'bg-repeat'?: React.CSSProperties['backgroundRepeat'];
    'bg-position'?: React.CSSProperties['backgroundPosition'];
    'bg-position-x'?: React.CSSProperties['backgroundPositionX'];
    'bg-position-y'?: React.CSSProperties['backgroundPositionY'];
    'bg-size'?: React.CSSProperties['backgroundSize'];
    'bg-size-num'?: React.CSSProperties['backgroundSize'];
    'border-width'?: React.CSSProperties['borderWidth'];
    'border-top-width'?: React.CSSProperties['borderTopWidth'];
    'border-bottom-width'?: React.CSSProperties['borderBottomWidth'];
    'border-left-width'?: React.CSSProperties['borderLeftWidth'];
    'border-right-width'?: React.CSSProperties['borderRightWidth'];
    'border-color'?: React.CSSProperties['borderColor'];
    'border-top-color'?: React.CSSProperties['borderTopColor'];
    'border-bottom-color'?: React.CSSProperties['borderBottomColor'];
    'border-left-color'?: React.CSSProperties['borderLeftColor'];
    'border-right-color'?: React.CSSProperties['borderRightColor'];
    'border-radius'?: React.CSSProperties['borderRadius'];
    'border-top-left-radius'?: React.CSSProperties['borderTopLeftRadius'];
    'border-top-right-radius'?: React.CSSProperties['borderTopRightRadius'];
    'border-bottom-left-radius'?: React.CSSProperties['borderBottomLeftRadius'];
    'border-bottom-right-radius'?: React.CSSProperties['borderBottomRightRadius'];
    'border-style'?: React.CSSProperties['borderStyle'];
    'border-top-style'?: React.CSSProperties['borderTopStyle'];
    'border-bottom-style'?: React.CSSProperties['borderBottomStyle'];
    'border-left-style'?: React.CSSProperties['borderLeftStyle'];
    'border-right-style'?: React.CSSProperties['borderRightStyle'];
    'border-spacing'?: React.CSSProperties['borderSpacing'];
    float?: React.CSSProperties['float'];
    'font-size'?: React.CSSProperties['fontSize'];
    margin?: React.CSSProperties['margin'];
    'margin-top'?: React.CSSProperties['marginTop'];
    'margin-bottom'?: React.CSSProperties['marginBottom'];
    'margin-left'?: React.CSSProperties['marginLeft'];
    'margin-right'?: React.CSSProperties['marginRight'];
    opacity?: React.CSSProperties['opacity'];
    overflow?: React.CSSProperties['overflow'];
    padding?: React.CSSProperties['padding'];
    'padding-top'?: React.CSSProperties['paddingTop'];
    'padding-bottom'?: React.CSSProperties['paddingBottom'];
    'padding-left'?: React.CSSProperties['paddingLeft'];
    'padding-right'?: React.CSSProperties['paddingRight'];
    top?: React.CSSProperties['top'];
    bottom?: React.CSSProperties['bottom'];
    right?: React.CSSProperties['right'];
    left?: React.CSSProperties['left'];
    'text-color'?: React.CSSProperties['color'];
    visibility?: React.CSSProperties['visibility'];
    width?: React.CSSProperties['width'];
    height?: React.CSSProperties['height'];
}

interface HeaderProps<T> extends React.HTMLAttributes<T> {
    /**a string to specify the type of the Header element */
    type?: HeaderTypes;
    /**a string as the title */
    title: string;
    /**a text or element of the button for displaying options on the mobile terminal */
    small?: string | JSX.Element;
    /**an array with objects which is consist of `title`, `link` and `bold`*/
    option: (HeaderOption | JSX.Element)[];
    children?: JSX.Element;
}

interface AlertProps {
    /**a string to specify the type of the Alert element */
    type: AlertTypes;
}

interface ButtonProps<T> extends React.ButtonHTMLAttributes<T> {
    /**a string or an array to specify the type of the Button element */
    WuXType: ButtonTypes | ButtonTypes[];
    JSXType: JSX.Element;
}

interface ButtonGroupProps<T> extends React.HTMLAttributes<T> {
    /**a string */
    type: ButtonGroupTypes | ButtonGroupTypes[];
}

interface RowProps {
    size: RowSizes | RowSizes[];
    /**a string between 1 and 12 or an array of strings between 1 and 12 */
    number: RowNumbers | RowNumbers[];
}

interface BreadcrumbProps {
    /**a string or array */
    item: string | string[];
}

interface CardProps<T> extends React.HTMLAttributes<T> {
    /**a string */
    type: CardTypes;
    /**a JSX element */
    header: JSX.Element;
    /**a string or a JSX element */
    body: string | JSX.Element;
    /**a JSX element */
    footer: JSX.Element;
}

interface DialogProps<T> extends React.DialogHTMLAttributes<T> {
    /**a string */
    id: string;
    /**a string */
    header: string;
    /**a string or a JSX element */
    body: string | JSX.Element;
    /**a JSX element */
    cancel: JSX.Element;
    /**a JSX element */
    footer: JSX.Element;
    /**a JSX element to specify the button style of the Dialog element */
    btn?: JSX.Element;
}

interface DropdownProps {
    /**an array of string */
    menu: string[];
    /**a JSX element to specify the button style of the Dialog element */
    btn?: JSX.Element;
}

interface InputProps<T> extends React.InputHTMLAttributes<T> {
    /**a string to specify the size of the Input element */
    WuXSize: InputSizes;
}

interface RadioProps<T> extends React.InputHTMLAttributes<T> {
    /**a JSX element to specify the link between the each options of Radio element */
    suffix?: string | JSX.Element;
    /**an array of string to specify options for the Radio element */
    children: string[];
}

interface SelectProps<T> extends React.SelectHTMLAttributes<T> {
    /**a JSX element to specify the value value of the option for each Select element */
    value?: string;
    /**an array of string to specify options for the Select element */
    children: string[];
}

interface LoadingButtonProps<T> extends React.ButtonHTMLAttributes<T> {
    type: 'button';
}

interface LoadingSpanProps<T> extends React.HTMLAttributes<T> {
    type: 'span';
}

interface JumbotronProps<T> {
    /**a JSX element */
    before: JSX.Element;
    /**a string or a JSX element */
    title: string | JSX.Element;
    /**a string or a JSX element to specify a subtitle */
    subtitle?: string | JSX.Element;
    /**JSX elements to specify the button style of the Jumbotron element */
    btn?: JumbotronBtn<T>[];
    /**a string */
    align: JumbotronAlign;
    /**a JSX element */
    after: JSX.Element;
}

interface JumbotronTitleBlodProps<T> extends React.HTMLAttributes<T> {
    type: JSX.Element;
}

interface ListProps<T> extends React.HTMLAttributes<T> {
    /**an array with ListTypes or an array composed of ListTypes */
    type: ListTypes[] | ListTypes[][];
    /**the list text displayed by the List element */
    children: string[];
}

interface ProgressProps<T> extends React.ProgressHTMLAttributes<T> {
    value: string | number;
    max: string | number;
}

interface TooltipProps<T> extends React.ButtonHTMLAttributes<T> {
    /**a JSX element to specify the button style of the Tooltip element */
    btn?: JSX.Element;
    /**a string of ListTypes */
    WuXType: TooltipTypes;
    /**a string */
    text: string;
}

interface TableProps<T> extends React.TableHTMLAttributes<T> { }

interface TagProps<T> extends React.HTMLAttributes<T> {
    type: TagTypes | TagTypes[];
}

interface BadgeProps<T> extends React.HTMLAttributes<T> { }

interface TabProps<T, N = T[]> extends React.HTMLAttributes<T> {
    /**an array of strings, which is displayed as the tab name of the Tab element */
    names: N;
    /**an array of strings or an array of JSX element, displayed as the page under the corresponding tab */
    children: (string | number | JSX.Element)[];
    /**A callback function with the same {@link names}.map parameter, 
     * which the return is the Tab corresponding to the parameter {@link name} */
    forEach: (name: T, index: number, names: N) => string | number | JSX.Element;
}

interface BlankslateProps<T> extends React.HTMLAttributes<T> {
    /**a JSX element to specify the icon the Blankslate element */
    icon?: JSX.Element;
    /**a string or a JSX element */
    WuXTitle: string | JSX.Element;
    /**a string or a JSX element to specify a subtitle */
    subtitle?: string | JSX.Element;
    /**JSX elements to specify the button style of the Blankslate element  */
    btn?: BlankslateBtn<T>[];
}

interface CollapseProps<T> extends React.HTMLAttributes<T> {
    /**a string, which is displayed as the summary of the Collapse element */
    summary: string;
    /**a string or a JSX element, displayed as the collapse of the Collapse element */
    collapse: JSX.Element | string;
}

interface UtilityProps<A> {
    type: JSX.Element;
    attr: A;
}

declare const WuX: {
    /**Header element  
     *   
     * The parameter `props` should be an object with `title`, `small` and `option` as properties  
     * `title` is a string as the title  
     * `small` is a button for displaying options on the mobile terminal  
     * `option` is an array with {@link HeaderOption}  
     *   
     * This is an example of a Header element :
     * ```js
     * <WuX.Header
     *      title='WuX-UI-React Debug Page'
     *      small='Menu'
     *      option={[
                { title: 'Github', link: 'https://github.com/wux-ui/wux-ui-react-docs' },
                { title: 'Offical Page', link: 'https://react.wux-ui.tk/', bold: true },
                <div />
            ]}
     * />
     * ```
     * 
     * @param {HeaderProps} props an object with `title`, `small` and `option` as properties
     */
    Header<T>(props: HeaderProps<T>): JSX.Element;
    /**Container element */
    Container: (props: null) => JSX.Element;
    /**Row element
     *   
     * The parameter `props` should be an object with `size` and `number` as properties  
     * `size` and `number` should be two strings or two arrays of the same length  
     * `number` must be a string between 1 and 12 or an array of strings between 1 and 12
     *   
     * These are two examples of the Row element :
     * ```js
     * //string
     * <WuX.Row size='md' number='2'></WuX.Row>
     * //array
     * <WuX.Row size={['md', 'sm']} number={['4', '2']}></WuX.Row>
     * ```
     * 
     * @param {RowProps} props an object with `size` and `number` as properties
     */
    Row: (props: RowProps) => JSX.Element;
    /**Col element */
    Col: (props: null) => JSX.Element;
    /**Alert element
     *   
     * The parameter `props` should be an object with `type` as property  
     * `type` is a string
     *   
     * This is an example of a Alert element :
     * ```js
     * <WuX.Alert type='primary'>Primary</WuX.Alert>
     * ```
     * 
     * @param {AlertProps} props an object with `type` as property
     */
    Alert: (props: AlertProps) => JSX.Element;
    /**Button element
     *   
     * The parameter `props` should be an object with `WuXType` as property  
     * `WuXType` is a string or an array to specify the type of the Button element  
     *   
     * This is an example of a Button element :
     * ```js
     * <WuX.Button WuXType='primary'>Primary</WuX.Button>
     * ```
     * 
     * @param {ButtonProps} props an object with `WuXType` as property
     */
    Button<T>(props: ButtonProps<T>): JSX.Element;
    /**ButtonGroup element
     *   
     * The parameter `props` should be an object with `type` as property  
     * `type` is a string
     *   
     * This is an example of a ButtonGroup element :
     * ```js
     * <WuX.ButtonGroup type='xs'>
     *     <WuX.Button type='active'>1</WuX.Button>
     *     <WuX.Button>2</WuX.Button>
     *     <WuX.Button>3</WuX.Button>
     *     <WuX.Button>4</WuX.Button>
     * </WuX.ButtonGroup>
     * ```
     * 
     * @param {ButtonGroupProps} props an object with `type` as property 
     */
    ButtonGroup<T>(props: ButtonGroupProps<T>): JSX.Element;
    /**Breadcrumb element
     *   
     * The parameter `props` should be an object with `item` as property  
     * `item` is a string or array
     *   
     * This is an example of a Breadcrumb element :
     * ```js
     * <WuX.Breadcrumb item={['Home', 'Explore', 'Download', 'About']} />
     * ```
     * 
     * @param {BreadcrumbProps} props an object with `item` as property
     */
    Breadcrumb: (props: BreadcrumbProps) => JSX.Element;
    /**Card element
     *   
     * The parameter `props` should be an object with `header`, `body` and `footer` as properties  
     * `type` is a string
     * `header` and `footer` is a JSX element  
     * `body` is a string or a JSX element  
     *   
     * This is an example of a Card element :
     * ```js
     * <WuX.Card
     *     header={<img src="https://image.moeblog.gq/i/2022/07/16/nsdzkk.svg" alt='card img' />}
     *     body='Hello'
     *     footer={<>
     *         <WuX.Button type={['primary', 'text']}>Test</WuX.Button>
     *         <WuX.Button type={['secondary', 'text']}>Test</WuX.Button>
     *     </>}
     * />
     * ```
     * 
     * @param {CardProps} props an object with `header`, `body` and `footer` as properties
     */
    Card<T>(props: CardProps<T>): JSX.Element;
    /**Dialog element
     *   
     * The parameter `props` should be an object with `id`, `header`, `body`, `cancel` and `footer` as properties  
     * `id` and `header` is a string  
     * `body` is a string or a JSX element  
     * `cancel` and `footer` is a JSX element  
     * You can use `btn` to specify the button style of the Dialog element  
     *   
     * This is an example of a Dialog element :
     * ```js
     * <WuX.Dialog
     *     id='testDialog'
     *     header='Test!'
     *     body='Test!'
     *     cancel={<WuX.Button type={['secondary', 'text']}>Cancel</WuX.Button>}
     *     footer={<WuX.Button>Send</WuX.Button>}
     *     btn={<WuX.Button type='primary' />}
     * >OpenDialog</WuX.Dialog>
     * ```
     * 
     * @param {DialogProps} props an object with `id`, `header`, `body`, `cancel` and `footer` as properties
     */
    Dialog<T>(props: DialogProps<T>): JSX.Element;
    /**Dropdown element
     *   
     * The parameter `props` should be an object with `menu` as property  
     * `menu` is an array of string  
     * You can use `btn` to specify the button style of the Dropdown element  
     *   
     * These are two examples of a Dropdown element :
     * ```js
     * //normal
     * <WuX.Dropdown menu={['One', 'Two', 'Three']}>Dropdown!</WuX.Dropdown>
     * //with button type
     * <WuX.Dropdown
     *     menu={['One', 'Two', 'Three']}
     *     btn={<WuX.Button type='primary' />}
     * >Dropdown!</WuX.Dropdown>
     * ```
     * 
     * @param {DropdownProps} props an object with `menu` as property
     */
    Dropdown: (props: DropdownProps) => JSX.Element;
    /**Input element
     *   
     * The parameter `props` should be an object with `WuXSize` as property  
     * `WuXSize` is a string to specify the size of the Input element  
     *   
     * This is an example of a Input element :
     * ```js
     * <WuX.Input WuXSize='xs'>xs</WuX.Input>
     * ```
     * 
     * @param {InputProps} props an object with `WuXSize` as property
     */
    Input<T>(props: InputProps<T>): JSX.Element;
    /**Textarea element */
    Textarea<T>(props: React.TextareaHTMLAttributes<T>): JSX.Element;
    /**Check element */
    Check<T>(props: React.InputHTMLAttributes<T>): JSX.Element;
    /**Radio element
     *   
     * The parameter `props` should be an object with `children` as property  
     * `children` is an array of string to specify options for the Radio element  
     * You can use `suffix` to specify the link between the each options of Radio element  
     *   
     * These are two examples of a Radio element :
     * ```js
     * //normal
     * <WuX.Radio>{[' Test!', ' Test!']}</WuX.Radio>
     * //with the suffix
     * <WuX.Radio suffix={<br />}>{[' Test!', ' Test!']}</WuX.Radio>
     * ```
     * 
     * @param {RadioProps} props an object with `children` as property
     */
    Radio<T>(props: RadioProps<T>): JSX.Element;
    /**Range element */
    Range<T>(props: React.InputHTMLAttributes<T>): JSX.Element;
    /**Select element
     *   
     * The parameter `props` should be an object with `children` as property  
     * `children` is an array of string to specify options for the Select element  
     * You can use `value` to specify the value value of the option for each Select element  
     *   
     * These are two examples of a Select element :
     * ```js
     * //normal
     * <WuX.Select>{['我是', '一个一个', 'Homo啊']}</WuX.Select>
     * //with the value
     * <WuX.Select value={['me', 'one', 'homo']}>{['我是', '一个一个', 'Homo啊']}</WuX.Select>
     * ```
     * 
     * @param {SelectProps} props an object with `children` as property
     */
    Select<T>(props: SelectProps<T>): JSX.Element;
    /**Upload element */
    Upload<T>(props: React.InputHTMLAttributes<T>): JSX.Element;
    /**Loading element */
    Loading<T>(props: LoadingButtonProps<T> | LoadingSpanProps<T>): JSX.Element;
    /**Jumbotron element
     *   
     * The parameter `props` should be an object with `title` as property  
     * `title` is a string or a JSX element  
     * Use `subtitle` to specify a subtitle, it is a string or a JSX element  
     * You can use `btn` to specify the button style of the Jumbotron element  
     * You can use `before` or `after` to specify the element that before or after the Jumbotron element  
     *   
     * This is an example of a Jumbotron element :
     * ```js
     * <WuX.Jumbotron
     *     title={<>
     *     <b className="wux-jumbotron-title-bold">WuX-UI</b>
     *     is a CSS Framework,
     *     <br />
     *     but more.
     *     </>}
     *     subtitle=' WuX-UI is a Modern CSS Framework. '
     *     btn={[
     *         ['https://wux-ui.tk/', <WuX.Button type='round'>Offical Website</WuX.Button>],
     *         ['https://github.com/wux-ui/wux-ui', <WuX.Button type={['secondary', 'text']}>Github</WuX.Button>]
     *     ]}
     * />
     * ```
     * 
     * @param {JumbotronProps} props an object with `title` as property
     */
    Jumbotron<T>(props: JumbotronProps<T>): JSX.Element;
    /**JumbotronTitleBlod element */
    JumbotronTitleBlod<T>(props: JumbotronTitleBlodProps<T>): JSX.Element;
    /**List element
     *   
     * The parameter `props` should be an object with `type` and `children` as properties  
     * `type` is an array with ListTypes or an array composed of ListTypes  
     * `children` is the list text displayed by the List element  
     *   
     * This is an example of a List element :
     * ```js
     * <WuX.List type={[
     *     'action',
     *     'action',
     *     'action',
     *     ['action', 'focus']
     * ]}>
     *     {[
     *         'Hello',
     *         'World',
     *         '你好，世界！',
     *         'Focus'
     *     ]}
     * </WuX.List>
     * ```
     * 
     * @param {ListProps} props an object with `type` and `children` as properties
     */
    List<T>(props: ListProps<T>): JSX.Element;
    /**Progress element */
    Progress<T>(props: ProgressProps<T>): JSX.Element;
    /**Tooltip element
     *   
     * The parameter `props` should be an object with `WuXType` and `text` as properties  
     * `text` is a string  
     * `WuXType` is a string of ListTypes  
     * You can use `btn` to specify the button style of the Tooltip element  
     *   
     * This is an example of a Tooltip element :
     * ```js
     * <WuX.Tooltip WuXType='top' text='This is a Tooltip.'>Top</WuX.Tooltip>
     * ```
     * 
     * @param {TooltipProps} props an object with `WuXType` and `text` as properties
     */
    Tooltip<T>(props: TooltipProps<T>): JSX.Element;
    /**Table element
     *   
     * This is an example of a Table element :
     * ```js
     * <WuX.Table>{{
    *     '#': ['1', '2', '3'],
    *     A: ['QwQ', 'QwQ', 'QwQ'],
    *     B: ['AwA', 'AwA', 'AwA'],
    *     C: ['OwO', 'OwO', 'OwO'],
    * }}</WuX.Table>
     * ```
     */
    Table<T>(props: TableProps<T>): JSX.Element;
    /**Tag element
     *   
     * These are some examples of Tag element :
     * ```js
     * <WuX.Tag>For</WuX.Tag>
     * <WuX.Tag type='error'>Me</WuX.Tag>
     * <WuX.Tag type='warning'>
     *     9999
     *     <WuX.Tag type='close'>X</WuX.Tag>
     * </WuX.Tag>
     * ```
     */
    Tag<T>(props: TagProps<T>): JSX.Element;
    /**Badge element */
    Badge<T>(props: BadgeProps<T>): JSX.Element;
    /**Search element */
    Search<T>(props: React.InputHTMLAttributes<T>): JSX.Element;
    /**Tab element
     *    
     * The parameter `props` should be an object with `name` and `children` as properties  
     * `name` is an array of strings, which is displayed as the tab name of the Tab element  
     * `children` is an array of strings or an array of JSX element, displayed as the page under the corresponding tab
     *   
     * This is an example of a Tab element :
     * ```js
     * <WuX.Tab name={['1', '2', '3']}>{[
     *     'Test For #1',
     *     'Test For #2',
     *     'Test For #3',
     * ]}</WuX.Tab>
     * ```
     * 
     * @param {TabProps} props an object with `name` and `children` as properties
     */
    Tab<T>(props: TabProps<T>): JSX.Element;
    /**Blankslate element
     *   
     * The parameter `props` should be an object with `title` as property  
     * `title` is a string or a JSX element  
     * Use `subtitle` to specify a subtitle, it is a string or a JSX element  
     * You can use `icon` to specify the icon the Blankslate element, it is a JSX element  
     * You can use `btn` to specify the button style of the Blankslate element  
     *   
     * This is an example of a Blankslate element :
     * ```js
     * <WuX.Blankslate
     *     icon={<img src="https://react-dev.wux-ui.tk/icon.svg" className="wux-blankslate-icon" alt='icon' />}
     *     title='This is a Blankslate!'
     *     subtitle='Yeah, Blankslate!'
     *     btn={[
     *         [<WuX.Button>Great!</WuX.Button>],
     *         [<WuX.Button type='text'>Uhh...</WuX.Button>]
     *     ]}
     * />
     * ```
     * 
     * @param {BlankslateProps} props an object with `title` as property
     */
    Blankslate<T>(props: BlankslateProps<T>): JSX.Element;
    /**Typo element */
    Typo<T>(props: React.HTMLAttributes<T>): JSX.Element;
    /**Collapse element
     *    
     * The parameter `props` should be an object with `summary` and `collapse` as properties  
     * `summary` is a string, which is displayed as the summary of the Collapse element  
     * `collapse` is a string or a JSX element, displayed as the collapse of the Collapse element
     *   
     * This is an example of a Collapse element :
     * ```js
     * <WuX.Collapse
     *     summary='Hello!'
     *     collapse='This is a Test Collapse.'
     * />
     * ```
     * 
     * @param {CollapseProps} props an object with `summary` and `collapse` as properties
     */
    Collapse<T>(props: CollapseProps<T>): JSX.Element;
    /**Utilities element
     * 
     * The parameter `props` should be an object with `type` and `attr` as properties  
     * `type` is a JSX element to specify the defalut element of Utility element  
     * `attr` id an object to specify the attr of Utility element
     * 
     * This is an example of a Utility element :  
     * ```js
     * <WuX.Utility
     *     type={<p> Border~ </p>}
     *     attr={{
     *         'border-bottom-color': '#CCCCCC',
     *         'border-bottom-style': 'dashed',
     *         'border-bottom-width': '4px',
     *     }}
     * />
     * ```
     * In the DOM : 
     * ```html
     * <p border-bottom-color="#CCCCCC" border-bottom-style="dashed" border-bottom-width="4px" style="--attr-custom-border-bottom-color:#CCCCCC; --attr-custom-border-bottom-width:4px;"> Border~ </p>
     * ```
     * 
     * *Attention*: This is an additional component to support an existing standard with little browser support.
     * It can be supported only with this package.
     * 
     * @param {UtilityProps<Attrs>} props an object with `type` and `attr` as properties
     */
    Utility(props: UtilityProps<Attrs>): JSX.Element;
}

export default WuX;

/**Check if WuX supports `component` */
export const supports: (component: string) => boolean;