/// <reference types="react" />

import { JSX as JSX_2 } from 'react/jsx-runtime';
import { default as React_2 } from 'react';
import { ReactElement } from 'react';
import { ReactNode } from 'react';

declare function between(from: number, to: number): Validator<number>;

declare type BorderStyle = '0' | 'dotted' | 'w1' | 'w2' | 'w3' | 'w5';

export declare const Box: React_2.ForwardRefExoticComponent<BoxProps & React_2.RefAttributes<HTMLElement>>;

export declare interface BoxItemProps {
    flex?: WithBreakpoints<'0' | '1' | '2' | '3' | '4' | Exclude<Width, 'fit' | 'screen'>>;
    shrink?: '0' | '1' | '2' | '3' | '4';
    aspect?: '1-1' | '1-2' | '2-1' | '3-4' | '4-3' | '16-9';
    align?: 'right' | 'top' | 'center' | 'bottom';
    inline?: boolean;
    visible?: boolean | Hover<'true' | 'false' | 'visible' | 'invisible'> | WithBreakpoints<'true' | 'false'>;
    color?: false | null | Hover<Color>;
    background?: false | null | Hover<Color>;
    opacity?: Hover<'100' | '90' | '80' | '70' | '60' | '50' | '40' | '30' | '20' | '10' | '0'>;
    width?: WithBreakpoints<Width>;
    height?: Width;
    maxWidth?: WithBreakpoints<'s' | 'm' | 'l' | 'xl'>;
    maxHeight?: WithBreakpoints<'xxs' | 'xs' | 's' | 'm' | 'l' | 'auto'>;
    margin?: Spacing | `${Spacing} ${Spacing}`;
    padding?: BySides<Spacing>;
    cursor?: 'pointer' | 'auto' | 'move' | 'grab' | 'not-allowed' | false | null;
    hoverable?: boolean;
    radius?: BySides<'1' | '2' | '3' | '0' | 'round'> | false;
    shadow?: boolean | '1' | '2' | '3';
    border?: BySides<BorderStyle> | 'inset-1' | 'inset-2' | 'inset-3' | 'inset-5' | false;
    borderColor?: Hover<Color> | BySides<'0' | 'white' | 'black' | 'grey-1' | 'grey-2' | 'grey-3' | 'grey-4' | 'grey-5' | 'grey-6'>;
    borderCollapse?: boolean;
    zIndex?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
    position?: 'auto' | 'sticky' | 'sticky-top' | 'sticky-top-left' | 'sticky-left' | 'sticky-right' | 'sticky-bottom' | 'inside' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'overlay';
    overlay?: boolean | 'clickthrough';
    clickthrough?: boolean;
}

export declare interface BoxProps extends TagAttributes, BoxItemProps {
    as?: BoxTags;
    className?: string;
    fixed?: WithBreakpoints<'0' | 'vertical' | 'horizontal' | 'bottom'>;
    stretch?: boolean;
    overflow?: 'hidden' | 'auto';
    fullScreen?: boolean;
    grid?: 'columns' | 'template';
    columns?: 1 | 2 | 3 | 4 | WithBreakpoints<'1' | '2' | '3' | '4'>;
    gridRows?: string;
    gridColumns?: string;
    vertical?: boolean;
    horizontal?: boolean;
    wrap?: boolean | WithBreakpoints<'false' | 'true'>;
    spacing?: 'overlay' | ByAxis<'xs' | 's' | 'm' | 'l' | 'xl'>;
    justify?: 'space' | 'start' | 'center' | 'end';
    alignItems?: 'start' | 'end' | 'center' | 'baseline' | 'stretch';
    separator?: BorderStyle;
    separatorSymbol?: string;
}

declare type BoxTags = 'a' | 'div' | 'fieldset' | 'li' | 'ul' | 'aside' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'label' | 'legend' | 'header' | 'main' | 'article' | 'nav' | 'section';

declare type Breakpoints = 'sm' | 'md' | 'lg';

export declare const Button: React_2.ForwardRefExoticComponent<ButtonProps & React_2.RefAttributes<HTMLAnchorElement>>;

export declare interface ButtonProps extends BoxItemProps, React_2.AriaAttributes {
    as?: (props: {
        href?: string;
        title?: string;
        tabIndex?: number;
        className?: string;
        onClick?: React_2.MouseEventHandler;
        onMouseDown?: React_2.MouseEventHandler;
        children: React_2.ReactNode;
    }) => React_2.ReactElement;
    size?: 's' | 'm' | 'l' | 'xl' | 'xxl';
    href?: string;
    icon?: string;
    link?: boolean;
    label?: string;
    light?: boolean;
    title?: string;
    primary?: boolean;
    variant?: 'primary' | 'danger' | 'link' | 'ghost' | 'outline';
    className?: string;
    submit?: boolean;
    disabled?: boolean;
    tabIndex?: number;
    onClick?: (e: React_2.MouseEvent) => void;
    onMouseDown?: (e: React_2.MouseEvent) => void;
    children?: React_2.ReactNode;
}

declare type ByAxis<T extends string> = T | `${T} ${T}`;

declare type BySides<T extends string> = T | `${T} ${T}` | `${T} ${T} ${T} ${T}`;

export declare const Checkbox: React_2.ForwardRefExoticComponent<CheckboxProps & React_2.RefAttributes<HTMLLabelElement>>;

export declare interface CheckboxProps extends BoxItemProps {
    size?: 's' | 'm' | 'l' | 'xl' | 'xxl';
    label?: string;
    truncate?: boolean;
    id?: string;
    value?: boolean | null;
    onChange: (value: boolean) => void;
}

export declare type Color = 'white' | 'black' | 'transparent' | 'light-1' | 'light-2' | 'light-3' | 'light-4' | 'light-5' | 'light-6' | 'grey-1' | 'grey-2' | 'grey-3' | 'grey-4' | 'grey-5' | 'grey-6' | '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 declare const ContentEditable: React_2.ForwardRefExoticComponent<ContentEditableProps & React_2.RefAttributes<HTMLDivElement>>;

export declare 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_2.KeyboardEvent) => void;
}

declare interface Context<T = any> {
    dragEnd: (item: T) => void;
    dragBegin: (item: T) => any[];
    getItems: () => T[];
    getItemProps: (item: T) => {
        ref?: React_2.MutableRefObject<HTMLElement | null>;
        onClick: (e: React_2.MouseEvent) => void;
        onMouseEnter?: (e: React_2.MouseEvent) => void;
        onMouseLeave?: (e: React_2.MouseEvent) => void;
        onDoubleClick?: (e: React_2.MouseEvent) => void;
    };
}

export declare function css(base: string | (string | undefined | null | false)[], modifiers?: {
    [key: string]: boolean | null | undefined;
}): string;

export declare function Dropdown({ onHide, onHideByEscape, passActiveToTrigger, trigger, triggerRef: givenTriggerRef, hideOnEscape: shouldHideOnEscape, direction, children: content, }: DropdownProps): JSX_2.Element;

export declare namespace Dropdown {
    var Context: React_2.Context<{
        hide: () => void;
    }>;
    var HideButton: React_2.ForwardRefExoticComponent<ButtonProps & React_2.RefAttributes<HTMLAnchorElement>>;
}

export declare interface DropdownProps {
    onHide?: () => void;
    onHideByEscape?: () => void;
    direction?: 'top' | 'bottom' | 'auto';
    passActiveToTrigger?: boolean;
    trigger?: React_2.ReactElement<{
        onClick: React_2.MouseEventHandler;
        active?: boolean;
        ref?: React_2.Ref<HTMLElement>;
    }>;
    triggerRef?: React_2.RefObject<HTMLElement>;
    hideOnEscape?: boolean;
    children: React_2.ReactElement<BoxProps & {
        style?: React_2.StyleHTMLAttributes<HTMLElement>;
        ref?: React_2.Ref<HTMLElement>;
    }>;
}

declare const email: Validator<string>;

export declare function Field<F extends Items | RemoteQueriedItems = never, N extends boolean = false, D extends boolean = false, T = [F] extends [never] ? N extends true ? number : D extends true ? Date : string : InferItem<F>, C = InputProps<T>>({ className, id: givenId, icon, label, required, validate: validateFns, locale, debounceInterval, masked, date, numeric, multiline, errors: userErrors, yearRange, suffix, onSuffixClick, prefix, onPrefixClick, from, item, value: actualValue, convert, onChange, onNewSuggestion, validateNewSuggestion: validateNew, input: InputComponent, inputProps: customInputProps, ...props }: FieldProps<F, N, D, T, C>): JSX_2.Element;

export declare interface FieldProps<F extends Items | RemoteQueriedItems = never, N extends boolean = false, D extends boolean = false, T = [F] extends [never] ? N extends true ? number : D extends true ? Date : string : InferItem<F>, C = InputProps<T>> extends BoxItemProps {
    focus?: boolean;
    tabIndex?: number;
    className?: string;
    id?: string;
    icon?: string;
    label?: string;
    locale?: string;
    debounceInterval?: number;
    masked?: boolean;
    date?: D;
    numeric?: N;
    required?: boolean;
    multiline?: boolean;
    placeholder?: string;
    yearRange?: number;
    convert?: 'lowercase' | 'uppercase' | ((value: string) => string);
    validate?: Validators<T>;
    validateNewSuggestion?: Validators;
    from?: F;
    item?: React_2.FC<ListItemProps<InferItem<F>>>;
    name?: string;
    value: string | number | null | undefined;
    errors?: false | string | string[];
    onChange: (value: T) => void;
    onNewSuggestion?: (value: string) => void;
    prefix?: false | React_2.ReactNode;
    onPrefixClick?: (e: React_2.MouseEvent) => void;
    suffix?: false | React_2.ReactNode;
    onSuffixClick?: (e: React_2.MouseEvent) => void;
    input?: (props: C) => React_2.ReactNode;
    inputProps?: Omit<C, keyof InputProps<T>>;
}

declare function format(re: RegExp, message?: string | ValidationMessage): Validator;

declare type Hover<T extends string> = T | `${T}@hover` | `${T} ${T}@hover`;

export declare const Icon: React_2.ForwardRefExoticComponent<IconProps & React_2.RefAttributes<HTMLElement>>;

export declare interface IconProps extends TagAttributes, BoxItemProps {
    href?: string;
    size?: 's' | 'm' | 'l' | 'xl' | 'xxl';
    className?: string;
    children?: string;
}

declare interface Identity<ID = any> {
    id: ID;
    name?: string;
}

export declare type InferID<T> = T extends Identity<infer R> ? R : T extends Identity<infer R>[] ? R : T extends RemoteItems<infer I> ? InferID<I> : T extends RemoteQueriedItems<infer I> ? InferID<I> : string;

export declare type InferItem<T> = T extends Array<infer R> ? R extends string ? Identity<string> : R extends number ? Identity<number> : R : T extends RemoteItems<infer R> ? InferItem<R> : T extends RemoteQueriedItems<infer R> ? InferItem<R> : Identity<string>;

declare type InputElement = HTMLInputElement | HTMLTextAreaElement;

declare interface InputProps<T> {
    placeholder?: string;
    className?: string;
    onChange?: (value: T, errors?: string[]) => void;
    onError?: (errors?: string[]) => void;
    focus?: boolean;
    value: string;
    name?: string;
    id?: string;
}

export declare type Items = Identity[] | string[] | {
    [id: string]: string;
};

export declare const LazyList: <T extends Items | RemoteItems>(props: LazyListProps<T>) => React_2.ReactElement<LazyListProps<T>>;

export declare interface LazyListProps<T> extends BoxProps {
    item: React_2.FC<ListItemProps<InferItem<T>>>;
    itemHeight: number;
    chunkSize?: number;
    items: T;
    itemsCount?: () => Promise<number>;
    loading?: React_2.FC<{
        index: number;
    }>;
    selection?: null | InferID<T> | InferID<T>[];
    ref?: React_2.Ref<HTMLElement>;
    focus?: boolean;
    tabIndex?: number;
    className?: string;
    onBlur?: (e: React_2.FocusEvent) => void;
    onFocus?: (e: React_2.FocusEvent) => void;
    commitOn?: 'click' | 'doubleClick';
    onCommit?: (item: InferItem<T>) => void;
    onSelect?: (selection: InferID<T>[]) => void;
    onKeyDown?: (e: React_2.KeyboardEvent, active?: InferItem<T>) => void;
    multiple?: boolean;
    swapScroll?: boolean;
    keepActive?: boolean;
    activateOnFocus?: boolean;
    activateOnHover?: boolean;
}

declare function length_2(min: number, max?: number): Validator;

export declare const List: <T extends Items>(props: ListProps<T>) => ReactElement<ListProps<T>>;

declare interface ListAttributes<T> extends Omit<BoxProps, 'children'> {
    ref?: React_2.Ref<HTMLElement>;
    focus?: boolean;
    items: T;
    selection?: InferID<T>[];
    tabIndex?: number;
    onBlur?: (e: React_2.FocusEvent) => void;
    onFocus?: (e: React_2.FocusEvent) => void;
    onCommit?: (item: InferItem<T>) => void;
    onSelect?: (selection: InferID<T>[]) => void;
    onKeyDown?: (e: React_2.KeyboardEvent, active?: InferItem<T>) => void;
    commitOn?: 'click' | 'doubleClick';
    className?: string;
    multiple?: boolean;
    swapScroll?: boolean;
    keepActive?: boolean;
    activateOnFocus?: boolean;
    activateOnHover?: boolean;
}

export declare interface ListItemProps<T = Identity> {
    item: T;
    index: number;
    active: boolean;
    dragged?: boolean;
    selected: boolean;
}

export declare type ListProps<T> = ListWithChildrenProps<T> | ListWithItemProps<T>;

declare interface ListWithChildrenProps<T> extends ListAttributes<T> {
    item?: never;
    children: (items: InferItem<T>[], state: {
        selection: InferID<T>[];
        active: InferID<T> | null;
        dragging: boolean;
    }) => ReactNode;
}

declare interface ListWithItemProps<T> extends ListAttributes<T> {
    children?: never;
    item: React_2.FC<ListItemProps<InferItem<T>>>;
}

declare function match<T>(value: T, message?: string): Validator<T>;

declare 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;
};

declare const Messages_2: {
    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;
};

declare function password({ lower, upper, digits, special, length: minLength, }?: {
    lower?: number;
    upper?: number;
    digits?: number;
    special?: number;
    length?: number;
}): Validator<string>[];

declare function presence(v: any): string | false;

export declare function Radio({ name, label, value, onChange, options, ...props }: RadioProps): React_2.ReactElement<RadioProps>;

export declare interface RadioProps extends Omit<BoxProps, 'children'> {
    name?: string;
    label?: string;
    value?: string;
    onChange: (value: string) => void;
    options: {
        [key: string]: string;
    };
}

export declare type RemoteItems<T extends Items = Items> = (range: [number, number]) => Promise<T>;

export declare type RemoteQueriedItems<T extends Items = Items> = (query: string, range: [number, number]) => Promise<T>;

export declare const Select: <T extends Items, R extends boolean>(props: SelectProps<T, R>) => ReactElement<SelectProps<T, R>>;

export declare const SelectList: <T extends Items>(props: SelectListProps<T>) => React_2.ReactElement<SelectListProps<T>>;

export declare type SelectListProps<T extends Items = Items> = Omit<ListProps<T>, 'item' | 'selection' | 'children' | 'onCommit'> & {
    item?: React_2.FC<ListItemProps<InferItem<T>>>;
    itemWidth?: Width;
    selection?: InferID<T>;
    onPrint?: (character: string) => void;
    onClose?: (id?: InferID<T>, value?: InferItem<T>) => void | boolean;
    onCommit?: (id?: InferID<T>, value?: InferItem<T>) => void | boolean;
    dropdown?: boolean;
};

export declare interface SelectProps<T extends Items, R extends boolean> extends BoxItemProps {
    id?: string;
    name?: string;
    focus?: boolean;
    required?: R;
    placeholder?: string;
    clearText?: string | null;
    onClick?: (option: R extends true ? InferItem<T> : InferItem<T> | null) => void;
    onChange?: (option: R extends true ? InferItem<T> : InferItem<T> | null) => void;
    options: T;
    value?: string;
    className?: string;
}

declare function setValidationMessages(messages: ValidationMessages): void;

declare const slug: Validator<string>;

declare type Spacing = '0' | 'xs' | 's' | 'm' | 'l' | 'xl';

export declare function Suggest<T extends Items | RemoteQueriedItems>({ id, name, debounceInterval, required, placeholder, from, item, value, onNew, onChange, onBlur, onFocus, selection, className, ...props }: SuggestProps<T>): ReactElement;

export declare interface SuggestProps<T = Identity> extends BoxItemProps {
    id?: string;
    name?: string;
    debounceInterval?: number;
    required?: boolean;
    placeholder?: string;
    from: T;
    item?: React_2.FC<ListItemProps<InferItem<T>>>;
    value?: string;
    onNew?: (id: string) => void;
    selection?: InferID<T>;
    onChange: (id?: InferID<T>, value?: InferItem<T>) => void;
    onBlur?: React_2.FocusEventHandler;
    onFocus?: React_2.FocusEventHandler;
    className?: string;
}

declare type TagAttributes = Omit<React.HTMLAttributes<HTMLElement>, 'color' | 'width' | 'height' | 'align' | 'onChange' | 'onSelect'>;

declare const Text_2: React_2.ForwardRefExoticComponent<TextProps & React_2.RefAttributes<HTMLElement>>;
export { Text_2 as Text }

export declare const TextInput: React_2.ForwardRefExoticComponent<TextInputProps & React_2.RefAttributes<InputElement>>;

export declare interface TextInputProps extends BoxItemProps {
    id?: string;
    name?: string;
    type?: 'text' | 'number' | 'date' | 'password' | 'search';
    focus?: boolean;
    multiline?: boolean;
    autoFocus?: boolean;
    outline?: 'xs' | 's' | 'm';
    value?: string;
    defaultValue?: string;
    placeholder?: string;
    onBlur?: (e: React_2.FocusEvent<InputElement>) => void;
    onFocus?: (e: React_2.FocusEvent<InputElement>) => void;
    onClick?: (e: React_2.MouseEvent<InputElement>) => void;
    onChange?: (value: string, e: React_2.ChangeEvent) => void;
    onKeyDown?: (e: React_2.KeyboardEvent<InputElement>) => void;
    onKeyUp?: (e: React_2.KeyboardEvent<InputElement>) => void;
    onMouseDown?: (e: React_2.MouseEvent<InputElement>) => void;
    onMouseUp?: (e: React_2.MouseEvent<InputElement>) => void;
    onContainerBlur?: (e: React_2.FocusEvent & {
        value: string;
    }) => void;
    onContainerFocus?: (e: React_2.FocusEvent & {
        value: string;
    }) => void;
    onContainerKeyDown?: (e: React_2.KeyboardEvent & {
        value: string;
    }) => void;
    prefix?: React_2.ReactNode;
    onPrefixClick?: (e: React_2.MouseEvent<InputElement>) => void;
    suffix?: React_2.ReactNode;
    onSuffixClick?: (e: React_2.MouseEvent<InputElement>) => void;
    className?: string;
    children?: React_2.ReactNode;
}

export declare interface TextProps extends TagAttributes, BoxItemProps {
    as?: 'p' | 'a' | 'span' | 'pre' | 'strong' | 'em' | 'div' | 'sup' | 'sub' | 'legend' | 'label' | ((props: TagAttributes & {
        children: ReactNode;
    }) => ReactElement);
    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;
    iconPosition?: 'before' | 'after';
    truncate?: boolean;
    lineClamp?: boolean | '2' | '3' | '4' | '5' | '6' | '7' | '8';
    size?: 's' | 'm' | 'l' | 'xl' | 'xxl' | '3xl' | '4xl' | '5xl';
    small?: boolean;
    large?: boolean;
    strong?: boolean;
    weight?: 'normal' | 'medium' | 'bold';
    leading?: 's' | 'm' | 'l';
    spacing?: 's' | 'm' | 'l' | 'xl';
    className?: string;
    children?: React_2.ReactNode;
}

export declare function Theme({ stylesheet, className, children, ...customSettings }: ThemeProps & Partial<ThemeSettings>): JSX_2.Element;

export declare interface ThemeProps {
    className?: string;
    stylesheet?: string;
    children?: React_2.ReactNode;
}

declare interface ThemeSettings {
    debounceInterval: number;
}

declare function unique<T>(other: T[]): Validator<T>;

export declare function useBoxItem<T extends BoxItemProps>({ flex, aspect, shrink, align, inline, visible, color, background, opacity, width, height, maxWidth, maxHeight, margin, padding, cursor, radius, shadow, hoverable, border, borderColor, borderCollapse, overlay, clickthrough, zIndex, position, ...props }: T, itemClassNames?: string): [string, Omit<T, keyof BoxItemProps>];

export declare function useListContext<T = Identity>(): Context<T>;

declare type ValidationMessage = (...args: string[]) => string;

export declare type ValidationMessages = {
    [key: string]: ValidationMessage;
};

declare namespace validationMessages {
    export {
        Messages as ru,
        Messages_2 as en
    }
}
export { validationMessages }

declare type Validator<T = string> = (value: T) => string | null | false | undefined;

declare type Validators<T = string> = Validator<T> | (Validator<T> | Validator<T>[])[];

declare namespace validators {
    export {
        setValidationMessages,
        presence,
        between,
        match,
        unique,
        format,
        length_2 as length,
        password,
        Validator,
        ValidationMessage,
        ValidationMessages,
        slug,
        email
    }
}
export { validators }

declare type Width = 'auto' | '1px' | '5px' | '10px' | '1em' | '2em' | '3em' | '5em' | 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | '0' | '3' | '5' | '7' | '10' | '15' | '20' | '25' | '30' | '35' | '33' | '40' | '50' | '60' | '70' | '80' | '90' | '100' | 'screen' | 'fit';

declare type WithBreakpoints<S extends string> = S | `${S}@${Breakpoints}` | `${S} ${S}@${Breakpoints}`;

export { }
