/// <reference types="react" />
declare module "utils" {
    export function css(base: string | (string | undefined | null | false)[], modifiers?: {
        [key: string]: boolean | null | undefined;
    }): string;
    export function splitByBreaks(name: string, value?: string | number | boolean | null): {
        [k: string]: boolean;
    };
    export function splitBySides(name: string, values?: string | false): {
        [x: string]: boolean;
    };
    export function useCombinedRefs<T>(...refs: (React.Ref<T> | undefined)[]): React.RefObject<T>;
    export function getRandomId(): string;
}
declare module "types" {
    export type Color = 'white' | 'transparent' | 'light-1' | 'light-2' | 'light-3' | 'light-4' | 'light-5' | 'light-6' | 'black-1' | 'black-2' | 'black-3' | 'black-4' | 'black-5' | 'dark-1' | 'dark-2' | 'dark-3' | 'dark-4' | 'dark-5' | 'dark-6' | 'accent-1' | 'accent-2' | 'accent-3' | 'accent-4' | 'accent-5' | 'accent-6' | 'green-1' | 'green-2' | 'red-1' | 'red-2';
    export type Width = 'auto' | 's' | 'm' | 'l' | '0' | '3' | '5' | '7' | '10' | '15' | '20' | '25' | '30' | '35' | '33' | '40' | '50' | '60' | '70' | '80' | '90' | '100';
    export type Breakpoints = 'sm' | 'md' | 'lg';
    export type WithBreakpoints<S extends string> = S | `${S}@${Breakpoints}` | `${S} ${S}@${Breakpoints}`;
    export type Spacing = '0' | 'xs' | 's' | 'm' | 'l' | 'xl';
    export type BySides<T extends string> = T | `${T} ${T}` | `${T} ${T} ${T} ${T}`;
    export type TagAttributes = Omit<React.HTMLAttributes<HTMLElement>, 'color' | 'width' | 'height' | 'align' | 'onChange' | 'onSelect'>;
}
declare module "BoxItem/index" {
        import { Color, Width, Spacing, BySides, WithBreakpoints } from "types";
    export interface BoxItemProps {
        flex?: '0' | '1' | '2' | '3' | '4';
        shrink?: '0' | '1' | '2' | '3' | '4';
        align?: 'right' | 'top' | 'center' | 'bottom';
        inline?: boolean;
        visible?: boolean | WithBreakpoints<'true' | 'false'>;
        color?: false | null | Color;
        background?: false | null | Color;
        width?: WithBreakpoints<Width>;
        height?: 's' | 'm' | 'l' | 'screen';
        maxWidth?: WithBreakpoints<'s' | 'm' | 'l' | 'xl'>;
        maxHeight?: WithBreakpoints<'s' | 'm' | 'l' | 'auto'>;
        margin?: Spacing | `${Spacing} ${Spacing}`;
        padding?: BySides<Spacing>;
        cursor?: 'pointer' | false | null;
    }
    export function useBoxItem<T extends BoxItemProps>({ flex, shrink, align, inline, visible, color, background, width, height, maxWidth, maxHeight, margin, padding, cursor, ...props }: T, itemClassNames?: string): [string, Omit<T, keyof BoxItemProps>];
}
declare module "Box/Box" {
        import React from 'react';
    import { TagAttributes, WithBreakpoints, BySides, Color } from "types";
    import { BoxItemProps } from "BoxItem/index";
    type BoxTags = 'a' | 'div' | 'fieldset' | 'li' | 'ul' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'header' | 'main' | 'article' | 'nav' | 'section';
    type BorderStyle = '0' | 'dotted' | 'w1' | 'w2' | 'w3' | 'w5';
    export interface BoxProps extends TagAttributes, BoxItemProps {
        as?: BoxTags;
        className?: string;
        zIndex?: '0' | '1' | '2' | '3' | '4' | '5' | 0 | 1 | 2 | 3 | 4 | 5;
        fixed?: WithBreakpoints<'0' | 'vertical' | 'horizontal' | 'bottom'>;
        stretch?: boolean;
        overflow?: 'hidden' | 'auto';
        fullScreen?: boolean;
        columns?: 1 | 2 | 3 | WithBreakpoints<'1' | '2' | '3'>;
        position?: 'auto' | 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'middle' | 'middle-left' | 'middle-right';
        vertical?: boolean;
        horizontal?: boolean;
        wrap?: boolean | WithBreakpoints<'false' | 'true'>;
        spacing?: 'overlay' | 'xs' | 's' | 'm' | 'l' | 'xl';
        justify?: 'space' | 'start' | 'center' | 'end';
        alignItems?: 'start' | 'end' | 'center' | 'baseline' | 'stretch';
        pane?: 'brackets' | 'shadow' | 'popup';
        overlay?: boolean | 'clickthrough';
        border?: BySides<BorderStyle> | false;
        borderColor?: Color | BySides<'0' | 'dark-1' | 'dark-2' | 'dark-3' | 'dark-4' | 'dark-5' | 'dark-6'>;
        borderCollapse?: boolean;
    }
    export const Box: React.ForwardRefExoticComponent<BoxProps & React.RefAttributes<HTMLElement>>;
    export default Box;
}
declare module "Icon/Icon" {
    import React from 'react';
    import { BoxItemProps } from "BoxItem/index";
    import { TagAttributes } from "types";
        export interface IconProps extends TagAttributes, BoxItemProps {
        size?: 's' | 'm' | 'l' | 'xl' | 'xxl';
        className?: string;
        children?: string;
    }
    const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<HTMLElement>>;
    export default Icon;
}
declare module "Button/Button" {
    import React from 'react';
    import { BoxItemProps } from "BoxItem/index";
        export interface ButtonProps extends BoxItemProps, React.AriaAttributes {
        size?: 's' | 'm' | 'l' | 'xl' | 'xxl';
        href?: string;
        icon?: string;
        link?: boolean;
        light?: boolean;
        title?: string;
        primary?: boolean;
        submit?: boolean;
        disabled?: boolean;
        tabIndex?: number;
        onClick?: (e: React.MouseEvent) => void;
        onMouseDown?: (e: React.MouseEvent) => void;
        children?: React.ReactNode;
    }
    const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLElement>>;
    export default Button;
}
declare module "Checkbox/Checkbox" {
    import React from 'react';
    import { BoxItemProps } from "BoxItem/index";
        export interface CheckboxProps extends BoxItemProps {
        size?: 's' | 'm' | 'l' | 'xl' | 'xxl';
        label: string;
        value?: boolean | null;
        onChange: (value: boolean) => void;
    }
    const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLElement>>;
    export default Checkbox;
}
declare module "ContentEditable/ContentEditable" {
    import React from 'react';
    import { BoxItemProps } from "BoxItem/index";
    export interface ContentEditableProps extends BoxItemProps {
        id?: string;
        value: string;
        focus?: boolean;
        selection?: number | [number, number];
        className?: string;
        placeholder?: string;
        onBlur?: () => void;
        onFocus?: () => void;
        onInput?: (value: string, selection: [number, number]) => void;
        onChange?: (value: string) => void;
        onSelection?: (range: [number, number]) => void;
        onKeyDown?: (e: React.KeyboardEvent) => void;
    }
    const ContentEditable: React.ForwardRefExoticComponent<ContentEditableProps & React.RefAttributes<HTMLDivElement>>;
    export default ContentEditable;
}
declare module "Dropdown/Dropdown" {
    import React from 'react';
    export interface DropdownProps {
        delay?: number;
        onBlur?: () => void;
        visible?: boolean;
        children: React.ReactElement<{
            ref?: React.Ref<HTMLElement>;
            onBlur?: (e: React.FocusEvent) => void;
            onFocus?: () => void;
        }>;
    }
    export default function Dropdown({ delay, onBlur, visible, children: element }: DropdownProps): React.ReactElement | null;
}
declare module "TextInput/TextInput" {
    import React from 'react';
    import { BoxItemProps } from "BoxItem/index";
        export interface TextInputProps extends BoxItemProps {
        id?: string;
        name?: string;
        type?: 'text' | 'number' | 'date' | 'password';
        focus?: boolean;
        multiline?: boolean;
        autoFocus?: boolean;
        outline?: 'xs' | 's' | 'm';
        value?: string;
        placeholder?: string;
        onBlur?: (e: React.FocusEvent) => void;
        onFocus?: (e: React.FocusEvent) => void;
        onClick?: (e: React.MouseEvent) => void;
        onChange?: (value: string, e: React.ChangeEvent) => void;
        onKeyDown?: (e: React.KeyboardEvent) => void;
        onMouseDown?: (e: React.MouseEvent) => void;
        prefix?: React.ReactNode;
        onPrefixClick?: (e: React.MouseEvent) => void;
        suffix?: React.ReactNode;
        onSuffixClick?: (e: React.MouseEvent) => void;
        className?: string;
        children?: React.ReactNode;
    }
    const TextInput: React.ForwardRefExoticComponent<TextInputProps & React.RefAttributes<HTMLInputElement>>;
    export default TextInput;
}
declare module "List/List" {
    import React, { ReactElement } from 'react';
    import { BoxProps } from "Box/Box";
    export interface Identity<ID = any> {
        id: ID;
    }
    export interface Named<ID = any> extends Identity<ID> {
        name?: string;
    }
    export type Items = Named[] | string[] | {
        [id: number]: string;
    } | {
        [id: string]: string;
    };
    export type RemoteItems<T extends Items = Items> = (query: string) => Promise<T>;
    export type InferID<T> = T extends Named<infer R> ? R : T extends Named<infer R>[] ? R : T extends RemoteItems<infer I> ? InferID<I> : T extends Identity<infer R> ? R : string;
    export type InferItem<T> = T extends Array<infer R> ? R extends string ? Named<string> : R extends number ? Named<number> : R : T extends RemoteItems<infer R> ? InferItem<R> : Named<string>;
    export interface ItemProps<T> {
        item: T;
        index?: number;
        active: boolean;
        dragged?: boolean;
        selected: boolean;
    }
    export interface Context<T = any> {
        dragEnd: (item: T) => void;
        dragBegin: (item: T) => any[];
        getItems: () => T[];
        getItemProps: (item: T) => {
            ref?: React.MutableRefObject<HTMLElement | null>;
            onClick: (e: React.MouseEvent) => void;
            onMouseEnter?: (e: React.MouseEvent) => void;
            onMouseLeave?: (e: React.MouseEvent) => void;
            onDoubleClick?: (e: React.MouseEvent) => void;
        };
    }
    export const ListContext: React.Context<Context<any>>;
    interface ListAttributes<T> extends BoxProps {
        ref?: React.Ref<HTMLElement>;
        focus?: boolean;
        items: T;
        selection?: InferID<T>[];
        tabIndex?: number;
        onBlur?: (e: React.FocusEvent) => void;
        onFocus?: (e: React.FocusEvent) => void;
        onCommit?: (item: InferItem<T>) => void;
        onSelect?: (selection: InferID<T>[]) => void;
        onKeyDown?: (e: React.KeyboardEvent, active?: InferItem<T>) => void;
        commitOn?: 'click' | 'doubleClick';
        className?: string;
        multiple?: boolean;
        swapScroll?: boolean;
        keepActive?: boolean;
        activateOnFocus?: boolean;
        activateOnHover?: boolean;
    }
    interface ListWithItemProps<T> extends ListAttributes<T> {
        children?: never;
        item: (props: ItemProps<InferItem<T>>) => ReactElement | null;
    }
    interface ListWithChildrenProps<T> extends ListAttributes<T> {
        item?: never;
        children: (items: InferItem<T>[], state: {
            selection: InferID<T>[];
            active: InferID<T> | null;
            dragging: boolean;
        }) => React.ReactElement[] | React.ReactElement | null;
    }
    export type ListProps<T> = ListWithChildrenProps<T> | ListWithItemProps<T>;
    const _default: <T extends Items>(props: ListProps<T>) => React.ReactElement<ListProps<T>, string | React.JSXElementConstructor<any>>;
    export default _default;
    export function useListContext<T>(): Context<T>;
    export function normalizeItems<T>(items: T): Named<InferID<T>>[];
}
declare module "SelectList/SelectList" {
    import React from 'react';
    import { Width } from "types";
    import { Items, InferID, ItemProps, ListProps, InferItem } from "List/List";
        export type SelectListProps<T extends Items> = Omit<ListProps<T>, 'item' | 'selection' | 'children'> & {
        item?: React.FC<ItemProps<InferItem<T>>>;
        itemWidth?: Width;
        selection?: InferID<T>;
        onPrint?: (character: string) => void;
        onClose?: (id?: InferID<T>, value?: InferItem<T>) => void | boolean;
    };
    const _default_1: <T extends Items>(props: SelectListProps<T>) => React.ReactElement<SelectListProps<T>, string | React.JSXElementConstructor<any>>;
    export default _default_1;
}
declare module "Suggest/Suggest" {
    import React, { ReactElement } from 'react';
    import { Items, InferID, ItemProps, InferItem, RemoteItems } from "List/List";
    import { BoxItemProps } from "BoxItem/index";
    export interface SuggestProps<T> extends BoxItemProps {
        id?: string;
        name?: string;
        required?: boolean;
        placeholder?: string;
        from: T;
        item?: React.FC<ItemProps<InferItem<T>>>;
        value?: string;
        onNew?: (id: string) => void;
        onChange: (id?: InferID<T>, value?: InferItem<T>) => void;
        onBlur?: () => void;
        onFocus?: () => void;
        className?: string;
    }
    export default function Suggest<T extends Items | RemoteItems>({ id, name, required, placeholder, from, item, value, onNew, onChange, onBlur, onFocus, className, ...props }: SuggestProps<T>): ReactElement;
}
declare module "Field/messages/en" {
    const Messages: {
        presence: () => string;
        between: (from: string, to: string) => string;
        unique: () => string;
        match: () => string;
        format: () => string;
        lengthShort: (min: string) => string;
        lengthLong: (max: string) => string;
        slug: () => string;
        email: () => string;
        passwordLower: (min: string) => string;
        passwordUpper: (min: string) => string;
        passwordDigit: (min: string) => string;
        passwordSymbols: (min: string) => string;
    };
    export default Messages;
}
declare module "Field/validators" {
    export type Validator<T = string> = (value: T) => string | null | false | undefined;
    export type ValidationMessage = (...args: string[]) => string;
    export type ValidationMessages = {
        [key: string]: ValidationMessage;
    };
    export function setValidationMessages(messages: ValidationMessages): void;
    export function presence(v: any): string | false;
    export function between(from: number, to: number): Validator<number>;
    export function match<T>(value: T, message?: string): Validator<T>;
    export function unique<T>(other: T[]): Validator<T>;
    export function format(re: RegExp, message?: string | ValidationMessage): Validator;
    export function length(min: number, max?: number): Validator;
    export const slug: Validator<string>;
    export const email: Validator<string>;
    export function password({ lower, upper, digits, special, length: minLength }?: {
        lower?: number;
        upper?: number;
        digits?: number;
        special?: number;
        length?: number;
    }): Validator<string>[];
}
declare module "Field/Field" {
    import React from 'react';
    import { BoxItemProps } from "BoxItem/index";
    import { Items, InferItem, ItemProps, RemoteItems } from "List/List";
    import { Validator } from "Field/validators";
        type Validators<T = string> = Validator<T> | (Validator<T> | Validator<T>[])[];
    export interface InputProps<T> {
        placeholder?: string;
        className?: string;
        onChange?: (value: T, errors?: string[]) => void;
        focus?: boolean;
        value: string;
    }
    export interface FieldProps<F extends Items | RemoteItems = never, N extends boolean = false, T = [F] extends [never] ? N extends true ? number : string : InferItem<F>, C = InputProps<T>> extends BoxItemProps {
        focus?: boolean;
        tabIndex?: number;
        className?: string;
        icon?: string;
        label?: string;
        masked?: boolean;
        numeric?: N;
        required?: boolean;
        multiline?: boolean;
        placeholder?: string;
        convert?: 'lowercase' | 'uppercase' | ((value: string) => string);
        validate?: Validators<T>;
        validateNewSuggestion?: Validators;
        from?: F;
        item?: React.FC<ItemProps<InferItem<F>>>;
        value: string | null | undefined;
        errors?: false | string | string[];
        onChange: (value: T) => void;
        onNewSuggestion?: (value: string) => void;
        prefix?: false | React.ReactNode;
        onPrefixClick?: (e: React.MouseEvent) => void;
        suffix?: false | React.ReactNode;
        onSuffixClick?: (e: React.MouseEvent) => void;
        input?: (props: C) => React.ReactElement;
        inputProps?: Omit<C, keyof InputProps<T>>;
    }
    export default function Field<F extends Items | RemoteItems = never, N extends boolean = false, T = [F] extends [never] ? N extends true ? number : string : InferItem<F>, C = InputProps<T>>({ className, icon, label, required, validate: validateFns, masked, numeric, multiline, errors: userErrors, suffix, onSuffixClick, prefix, onPrefixClick, from, item, value: actualValue, convert, onChange, onNewSuggestion, validateNewSuggestion: validateNew, input: InputComponent, inputProps: customInputProps, ...props }: FieldProps<F, N, T, C>): JSX.Element;
}
declare module "Field/messages/ru" {
    const Messages: {
        presence: () => string;
        between: (from: string, to: string) => string;
        unique: () => string;
        match: () => string;
        format: () => string;
        lengthShort: (min: string) => string;
        lengthLong: (max: string) => string;
        slug: () => string;
        email: () => string;
        passwordLower: (min: string) => string;
        passwordUpper: (min: string) => string;
        passwordDigit: (min: string) => string;
        passwordSymbols: (min: string) => string;
    };
    export default Messages;
}
declare module "Field/messages/index" {
    export { default as ru } from "Field/messages/ru";
    export { default as en } from "Field/messages/en";
}
declare module "Radio/Radio" {
    import React from 'react';
    import { BoxProps } from "Box/Box";
        export interface RadioProps extends BoxProps {
        name?: string;
        label?: string;
        value?: string;
        onChange: (value: string) => void;
        children: {
            [key: string]: string;
        };
    }
    export default function Radio({ name, label, value, onChange, children, ...props }: RadioProps): React.ReactElement<RadioProps>;
}
declare module "Text/Text" {
    import React from 'react';
    import { BoxItemProps } from "BoxItem/index";
    import { TagAttributes } from "types";
        export interface TextProps extends TagAttributes, BoxItemProps {
        as?: 'p' | 'a' | 'span' | 'pre' | 'strong' | 'em' | 'div' | 'sup' | 'sub';
        h1?: boolean;
        h2?: boolean;
        h3?: boolean;
        h4?: boolean;
        h5?: boolean;
        block?: boolean;
        sup?: boolean;
        sub?: boolean;
        caps?: boolean;
        monospace?: boolean;
        underline?: boolean;
        link?: boolean;
        href?: string;
        right?: boolean;
        center?: boolean;
        line?: boolean;
        icon?: string;
        truncate?: boolean;
        size?: 's' | 'm' | 'l' | 'xl' | 'xxl';
        small?: boolean;
        large?: boolean;
        strong?: boolean;
        weight?: 'normal' | 'medium' | 'bold';
        className?: string;
        children?: React.ReactNode;
    }
    const Text: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLElement>>;
    export default Text;
}
declare module "Theme/Theme" {
    import React from 'react';
        export interface ThemeProps {
        className?: string;
        stylesheet?: string;
        children?: React.ReactNode;
    }
    export default function Theme({ className, stylesheet, children }: ThemeProps): React.ReactElement<ThemeProps>;
}
declare module "@jsway/jui" {
    export { default as Box } from "Box/Box";
    export { useBoxItem } from "BoxItem/index";
    export { default as Button } from "Button/Button";
    export { default as Checkbox } from "Checkbox/Checkbox";
    export { default as ContentEditable } from "ContentEditable/ContentEditable";
    export { default as Dropdown } from "Dropdown/Dropdown";
    export { default as Field } from "Field/Field";
    export * as validators from "Field/validators";
    export * as validationMessages from "Field/messages/index";
    export { default as Icon } from "Icon/Icon";
    export { default as List } from "List/List";
    export { default as Radio } from "Radio/Radio";
    export { default as SelectList } from "SelectList/SelectList";
    export { default as Suggest } from "Suggest/Suggest";
    export { default as Text } from "Text/Text";
    export { default as TextInput } from "TextInput/TextInput";
    export { default as Theme } from "Theme/Theme";
    export type { BoxProps } from "Box/Box";
    export type { BoxItemProps } from "BoxItem/index";
    export type { ButtonProps } from "Button/Button";
    export type { CheckboxProps } from "Checkbox/Checkbox";
    export type { ContentEditableProps } from "ContentEditable/ContentEditable";
    export type { DropdownProps } from "Dropdown/Dropdown";
    export type { FieldProps } from "Field/Field";
    export type { IconProps } from "Icon/Icon";
    export type { ListProps, ItemProps as ListItemProps } from "List/List";
    export type { RadioProps } from "Radio/Radio";
    export type { SelectListProps } from "SelectList/SelectList";
    export type { SuggestProps } from "Suggest/Suggest";
    export type { TextProps } from "Text/Text";
    export type { TextInputProps } from "TextInput/TextInput";
    export type { ThemeProps } from "Theme/Theme";
    export type { ValidationMessages } from "Field/validators";
}
