import type { RemovableRef } from '@vueuse/core';
import type { colors } from '../preset';
export declare function useAppUi(): {
    colors: import('../preset').Colors;
    avatar: {
        wrapper: string;
        background: string;
        rounded: string;
        image: string;
        placeholder: string;
        size: Record<import("..").Size, string>;
        chip: {
            base: string;
            background: string;
            position: {
                'top-right': string;
                'bottom-right': string;
                'top-left': string;
                'bottom-left': string;
            };
            size: {
                '2xs': string;
                xs: string;
                sm: string;
                md: string;
                lg: string;
                xl: string;
            };
        };
        default: {
            size: import("..").Size;
            chipPosition: string;
        };
    };
    breadcrumb: {
        wrapper: string;
        link: {
            wrapper: string;
            active: string;
            inactive: string;
        };
    };
    button: {
        base: string;
        disabled: string;
        custom: string;
        font: string;
        rounded: string;
        size: Record<import("..").Size, string>;
        gap: Record<import("..").Size, string>;
        padding: Record<import("..").Size, string>;
        square: {
            padding: Record<import("..").Size, string>;
            rounded: string;
        };
        color: Record<import("../components/button").ButtonColor, Partial<Record<import("../components/button").ButtonVariant, string>>>;
        variant: Record<import("../components/button").ButtonVariant, string>;
        icon: {
            base: string;
            size: Record<import("..").Size, string>;
        };
        default: {
            size: import("..").Size;
            variant: import("../components/button").ButtonVariant;
            color: "inherit" | "current" | "transparent" | "black" | "white" | "rose" | "pink" | "fuchsia" | "purple" | "violet" | "indigo" | "blue" | "sky" | "cyan" | "teal" | "emerald" | "green" | "lime" | "yellow" | "amber" | "orange" | "red" | "gray" | "slate" | "zinc" | "neutral" | "stone" | "lightblue" | "lightBlue" | "warmgray" | "warmGray" | "truegray" | "trueGray" | "coolgray" | "coolGray" | "bluegray" | "blueGray" | "pilot" | "primary" | "bronze" | "silver" | "gold" | "mauve" | "kaki" | "success" | "danger" | import("../components/button").ButtonColor;
            loadingIcon: string;
        };
    };
    card: {
        base: string;
        background: string;
        divide: string;
        ring: string;
        rounded: string;
        shadow: string;
        body: {
            base: string;
            background: string;
            padding: string;
        };
        header: {
            base: string;
            background: string;
            padding: string;
        };
        footer: {
            base: string;
            background: string;
            padding: string;
        };
    };
    checkbox: {
        wrapper: string;
        base: string;
        label: string;
        required: string;
    };
    collapse: {
        wrapper: string;
        item: {
            base: string;
            size: string;
            color: string;
            padding: string;
        };
        transition: {
            enterActiveClass: string;
            leaveActiveClass: string;
        };
        default: {
            openIcon: string;
            closeIcon: string;
            variant: import("../components/button").ButtonVariant;
        };
    };
    container: {
        base: string;
        padding: string;
        constrained: string;
    };
    datepicker: {
        wrapper: string;
        header: {
            wrapper: string;
            space: string;
            previous: {
                icon: string;
                rounded: string;
            };
            next: {
                icon: string;
                rounded: string;
            };
        };
        padding: string;
        default: {
            closeIcon: string;
            wrap: string;
            minHeight: string;
        };
        popper: {
            placement: string;
        };
        tooltip: {
            transition: {
                enterFromClass: string;
                enterToClass: string;
                leaveFromClass: string;
                leaveToClass: string;
            };
        };
    };
    dropdown: {
        wrapper: string;
        container: string;
        width: string;
        height: string;
        background: string;
        shadow: string;
        rounded: string;
        ring: string;
        base: string;
        divide: string;
        padding: string;
        item: {
            base: string;
            rounded: string;
            padding: string;
            size: string;
            active: string;
            inactive: string;
            disabled: string;
            icon: {
                base: string;
                active: string;
                inactive: string;
            };
            avatar: {
                base: string;
                size: import("..").Size;
            };
        };
        transition: {
            enterActiveClass: string;
            enterFromClass: string;
            enterToClass: string;
            leaveActiveClass: string;
            leaveFromClass: string;
            leaveToClass: string;
        };
        popper: import("..").PopperOptions;
    };
    dialog: {
        wrapper: string;
        inner: string;
        container: string;
        padding: string;
        base: string;
        overlay: {
            base: string;
            background: string;
            transition: {
                enter: string;
                enterFrom: string;
                enterTo: string;
                leave: string;
                leaveFrom: string;
                leaveTo: string;
            };
        };
        background: string;
        ring: string;
        rounded: string;
        shadow: string;
        width: string;
        height: string;
        transition: {
            enter: string;
            enterFrom: string;
            enterTo: string;
            leave: string;
            leaveFrom: string;
            leaveTo: string;
        };
    };
    fileUpload: {
        wrapper: string;
        base: string;
    };
    formGroup: {
        wrapper: string;
        label: {
            wrapper: string;
            base: string;
            required: string;
            disabled: string;
        };
        container: {
            base: string;
            space: string;
        };
        error: string;
    };
    icon: {
        color: {
            base: string;
            default: string;
            fluo: string;
            cyan: string;
            yellow: string;
            silver: string;
            dark: string;
            light: string;
        };
    };
    input: import("../components/input").Input;
    nav: {
        variant: {
            solid: {
                wrapper: string;
                active: string;
                item: {
                    wrapper: string;
                    base: string;
                    active: string;
                    inactive: string;
                };
                size: {
                    '2xs': string;
                    xs: string;
                    sm: string;
                    md: string;
                    lg: string;
                    xl: string;
                };
            };
            light: {
                wrapper: string;
                active: string;
                item: {
                    wrapper: string;
                    base: string;
                    active: string;
                    inactive: string;
                };
                size: {
                    '2xs': string;
                    xs: string;
                    sm: string;
                    md: string;
                    lg: string;
                    xl: string;
                };
            };
        };
        default: {
            size: import("..").Size;
            variant: "light" | "solid";
        };
    };
    notification: {
        wrapper: string;
        container: string;
        title: string;
        description: string;
        background: string;
        shadow: string;
        rounded: string;
        padding: string;
        ring: string;
        icon: {
            base: string;
            color: string;
        };
        avatar: {
            base: string;
            size: import("..").Size;
        };
        progress: {
            base: string;
            background: string;
        };
        transition: {
            enterActiveClass: string;
            enterFromClass: string;
            enterToClass: string;
            leaveActiveClass: string;
            leaveFromClass: string;
            leaveToClass: string;
        };
        default: {
            color: "inherit" | "current" | "transparent" | "black" | "white" | "rose" | "pink" | "fuchsia" | "purple" | "violet" | "indigo" | "blue" | "sky" | "cyan" | "teal" | "emerald" | "green" | "lime" | "yellow" | "amber" | "orange" | "red" | "gray" | "slate" | "zinc" | "neutral" | "stone" | "light" | "dark" | "lightblue" | "lightBlue" | "warmgray" | "warmGray" | "truegray" | "trueGray" | "coolgray" | "coolGray" | "bluegray" | "blueGray" | "fluo" | "pilot" | "primary" | "bronze" | "silver" | "gold" | "mauve" | "kaki" | "success" | "danger";
            icon: string;
            closeButton: {
                icon: string;
                color: import("../components/button").ButtonColor;
                variant: import("../components/button").ButtonVariant;
                padded: boolean;
            };
            actionButton: {
                size: import("..").Size;
                color: "inherit" | "current" | "transparent" | "black" | "white" | "rose" | "pink" | "fuchsia" | "purple" | "violet" | "indigo" | "blue" | "sky" | "cyan" | "teal" | "emerald" | "green" | "lime" | "yellow" | "amber" | "orange" | "red" | "gray" | "slate" | "zinc" | "neutral" | "stone" | "light" | "dark" | "lightblue" | "lightBlue" | "warmgray" | "warmGray" | "truegray" | "trueGray" | "coolgray" | "coolGray" | "bluegray" | "blueGray" | "fluo" | "pilot" | "primary" | "bronze" | "silver" | "gold" | "mauve" | "kaki" | "success" | "danger";
            };
        };
    };
    notifications: {
        wrapper: string;
        position: string;
        width: string;
        container: string;
    };
    popover: {
        wrapper: string;
        container: string;
        width: string;
        background: string;
        rounded: string;
        padding: string;
        ring: string;
        shadow: string;
        base: string;
        transition: {
            enterActiveClass: string;
            enterFromClass: string;
            enterToClass: string;
            leaveActiveClass: string;
            leaveFromClass: string;
            leaveToClass: string;
        };
        popper: {
            strategy: string;
        };
    };
    radio: {
        wrapper: string;
        base: string;
        label: string;
        required: string;
    };
    radioGroup: {
        wrapper: string;
        space: string;
        selectedIcon: {
            wrapper: string;
            padding: string;
            rounded: string;
            base: string;
        };
        item: {
            wrapper: string;
            contentWrapper: string;
            base: string;
            icon: {
                wrapper: string;
                padding: string;
                rounded: string;
                base: string;
            };
            title: {
                base: string;
                active: string;
                inactive: string;
            };
            subtitle: {
                base: string;
                active: string;
                inactive: string;
            };
        };
        default: {
            selectedIcon: string;
        };
    };
    select: {
        placeholder: string;
        default: {
            size: import("..").Size;
            color: "inherit" | "current" | "transparent" | "black" | "white" | "rose" | "pink" | "fuchsia" | "purple" | "violet" | "indigo" | "blue" | "sky" | "cyan" | "teal" | "emerald" | "green" | "lime" | "yellow" | "amber" | "orange" | "red" | "gray" | "slate" | "zinc" | "neutral" | "stone" | "light" | "dark" | "lightblue" | "lightBlue" | "warmgray" | "warmGray" | "truegray" | "trueGray" | "coolgray" | "coolGray" | "bluegray" | "blueGray" | "fluo" | "pilot" | "primary" | "bronze" | "silver" | "gold" | "mauve" | "kaki" | "success" | "danger";
            variant: "white" | import("../components/input").InputVariant;
            loadingIcon: string;
            trailingIcon: string;
        };
        wrapper: string;
        base: string;
        rounded: Record<import("..").Size, string>;
        size: Record<import("..").Size, string>;
        gap: Record<import("..").Size, string>;
        padding: Record<import("..").Size, string>;
        leading: {
            padding: Record<import("..").Size, string>;
        };
        trailing: {
            padding: Record<import("..").Size, string>;
        };
        color: Record<"white", Partial<Record<import("../components/input").InputVariant, string>>>;
        variant: Record<import("../components/input").InputVariant, string>;
        icon: {
            base: string;
            active: string;
            inactive: string;
            color: string;
            size: Record<import("..").Size, string>;
            leading: {
                wrapper: string;
                pointer: string;
                padding: Record<import("..").Size, string>;
            };
            trailing: {
                wrapper: string;
                pointer: string;
                padding: Record<import("..").Size, string>;
            };
        };
    };
    selectMenu: {
        wrapper: string;
        container: string;
        width: string;
        height: string;
        base: string;
        background: string;
        divide: string;
        shadow: string;
        rounded: string;
        padding: string;
        ring: string;
        input: string;
        option: {
            base: string;
            wrapper: string;
            rounded: string;
            padding: string;
            size: {
                '2xs': string;
                xs: string;
                sm: string;
                md: string;
                lg: string;
                xl: string;
            };
            color: string;
            container: string;
            active: string;
            inactive: string;
            selected: string;
            disabled: string;
            empty: string;
            icon: {
                base: string;
                active: string;
                inactive: string;
            };
            selectedIcon: {
                wrapper: string;
                padding: string;
                color: string;
                base: string;
            };
            avatar: {
                base: string;
                size: string;
            };
            chip: {
                base: string;
            };
        };
        placeholder: string;
        transition: {
            leaveActiveClass: string;
            leaveFromClass: string;
            leaveToClass: string;
        };
        popper: {
            placement: string;
        };
        default: {
            selectedIcon: string;
        };
    };
    skeleton: {
        base: string;
        background: string;
        rounded: string;
    };
    slider: {
        wrapper: string;
        overlay: {
            base: string;
            background: string;
            transition: {
                enter: string;
                enterFrom: string;
                enterTo: string;
                leave: string;
                leaveFrom: string;
                leaveTo: string;
            };
        };
        base: string;
        background: string;
        ring: string;
        rounded: string;
        padding: string;
        shadow: string;
        width: string;
        transition: {
            enter: string;
            leave: string;
        };
    };
    table: {
        wrapper: string;
        base: string;
        divide: string;
        thead: string;
        tbody: string;
        tr: {
            base: string;
            selected: string;
            hover: string;
        };
        th: {
            base: string;
            padding: string;
            color: string;
            font: string;
            size: string;
        };
        td: {
            base: string;
            padding: string;
            color: string;
            font: string;
            size: string;
        };
        emptyState: {
            wrapper: string;
            label: string;
            icon: string;
        };
        default: {
            sortAscIcon: string;
            sortDescIcon: string;
            sortButton: {
                icon: string;
                isTrailing: boolean;
                isSquare: boolean;
                color: string;
                variant: string;
                class: string;
                ui: {
                    icon: {
                        size: {
                            md: string;
                        };
                    };
                    color: {
                        dark: {
                            link: string;
                        };
                    };
                };
            };
            emptyState: {
                icon: string;
                label: string;
            };
        };
    };
    tag: {
        base: string;
        rounded: string;
        font: {
            xs: string;
            sm: string;
            md: string;
            lg: string;
        };
        size: {
            xs: string;
            sm: string;
            md: string;
            lg: string;
        };
        color: {
            fluo: {
                light: string;
                solid: string;
            };
            cyan: {
                light: string;
                solid: string;
            };
            yellow: {
                light: string;
                solid: string;
            };
            silver: {
                light: string;
                solid: string;
            };
            dark: {
                light: string;
                solid: string;
            };
            light: {
                light: string;
                solid: string;
            };
        };
        variant: {
            solid: string;
            light: string;
        };
        default: {
            size: import("..").Size;
            variant: import("../components/tag").TagVariant;
            color: "inherit" | "current" | "transparent" | "black" | "white" | "rose" | "pink" | "fuchsia" | "purple" | "violet" | "indigo" | "blue" | "sky" | "cyan" | "teal" | "emerald" | "green" | "lime" | "yellow" | "amber" | "orange" | "red" | "gray" | "slate" | "zinc" | "neutral" | "stone" | "light" | "dark" | "lightblue" | "lightBlue" | "warmgray" | "warmGray" | "truegray" | "trueGray" | "coolgray" | "coolGray" | "bluegray" | "blueGray" | "fluo" | "pilot" | "primary" | "bronze" | "silver" | "gold" | "mauve" | "kaki" | "success" | "danger";
        };
    };
    text: {
        font: string;
        size: string;
        color: {
            base: string;
            default: string;
            fluo: string;
            cyan: string;
            yellow: string;
            silver: string;
            dark: string;
            light: string;
        };
        default: {
            color: "inherit" | "current" | "transparent" | "black" | "white" | "rose" | "pink" | "fuchsia" | "purple" | "violet" | "indigo" | "blue" | "sky" | "cyan" | "teal" | "emerald" | "green" | "lime" | "yellow" | "amber" | "orange" | "red" | "gray" | "slate" | "zinc" | "neutral" | "stone" | "light" | "dark" | "lightblue" | "lightBlue" | "warmgray" | "warmGray" | "truegray" | "trueGray" | "coolgray" | "coolGray" | "bluegray" | "blueGray" | "fluo" | "pilot" | "primary" | "bronze" | "silver" | "gold" | "mauve" | "kaki" | "success" | "danger";
        };
    };
    textarea: {
        default: {
            size: import("..").Size;
            color: "inherit" | "current" | "transparent" | "black" | "white" | "rose" | "pink" | "fuchsia" | "purple" | "violet" | "indigo" | "blue" | "sky" | "cyan" | "teal" | "emerald" | "green" | "lime" | "yellow" | "amber" | "orange" | "red" | "gray" | "slate" | "zinc" | "neutral" | "stone" | "light" | "dark" | "lightblue" | "lightBlue" | "warmgray" | "warmGray" | "truegray" | "trueGray" | "coolgray" | "coolGray" | "bluegray" | "blueGray" | "fluo" | "pilot" | "primary" | "bronze" | "silver" | "gold" | "mauve" | "kaki" | "success" | "danger";
            variant: "white" | import("../components/input").InputVariant;
        };
        wrapper: string;
        base: string;
        rounded: Record<import("..").Size, string>;
        placeholder: string;
        size: Record<import("..").Size, string>;
        gap: Record<import("..").Size, string>;
        padding: Record<import("..").Size, string>;
        leading: {
            padding: Record<import("..").Size, string>;
        };
        trailing: {
            padding: Record<import("..").Size, string>;
        };
        color: Record<"white", Partial<Record<import("../components/input").InputVariant, string>>>;
        variant: Record<import("../components/input").InputVariant, string>;
        icon: {
            base: string;
            active: string;
            inactive: string;
            color: string;
            size: Record<import("..").Size, string>;
            leading: {
                wrapper: string;
                pointer: string;
                padding: Record<import("..").Size, string>;
            };
            trailing: {
                wrapper: string;
                pointer: string;
                padding: Record<import("..").Size, string>;
            };
        };
    };
    tooltip: {
        wrapper: string;
        container: string;
        width: string;
        background: string;
        shadow: string;
        rounded: string;
        ring: string;
        base: string;
        transition: {
            enterActiveClass: string;
            enterFromClass: string;
            enterToClass: string;
            leaveActiveClass: string;
            leaveFromClass: string;
            leaveToClass: string;
        };
        popper: {
            strategy: string;
        };
    };
    pagination: {
        wrapper: string;
        btnWrapper: string;
        label: string;
        base: string;
        rounded: string;
        default: {
            size: import("..").Size;
            prevButton: Partial<import("../components/button").Button>;
            nextButton: Partial<import("../components/button").Button>;
        };
    };
    toggle: {
        wrapper: string;
        label: {
            base: string;
            size: {
                sm: string;
                md: string;
            };
        };
        button: {
            base: string;
            active: string;
            disabled: string;
            inactive: string;
            size: {
                sm: string;
                md: string;
            };
        };
        slider: {
            base: string;
            active: string;
            inactive: string;
            translate: {
                sm: string;
                md: string;
            };
            size: {
                sm: string;
                md: string;
            };
        };
        icon: {
            base: string;
            active: string;
            inactive: string;
            on: string;
            off: string;
            size: {
                sm: string;
                md: string;
            };
        };
        default: {
            size: "sm" | "md";
        };
    };
    verticalNavigation: {
        wrapper: string;
        base: string;
        ring: string;
        padding: string;
        width: string;
        rounded: string;
        font: string;
        size: string;
        active: string;
        inactive: string;
        label: string;
        icon: {
            base: string;
            active: string;
            inactive: string;
        };
        avatar: {
            base: string;
            size: import("..").Size;
        };
        tag: {
            base: string;
            active: string;
            inactive: string;
        };
    };
};
export declare function useAppTheme(): {
    primaryColor: RemovableRef<keyof typeof colors>;
};