import { CSSProperties, FC, ReactNode } from 'react';
import { Dialog as DialogBase } from '@base-ui/react/dialog';
export declare const KUMO_DIALOG_VARIANTS: {
    readonly size: {
        readonly base: {
            readonly classes: "min-w-96";
            readonly description: "Default dialog width";
        };
        readonly sm: {
            readonly classes: "min-w-72";
            readonly description: "Small dialog for simple confirmations";
        };
        readonly lg: {
            readonly classes: "min-w-[32rem]";
            readonly description: "Large dialog for complex content";
        };
        readonly xl: {
            readonly classes: "min-w-[48rem]";
            readonly description: "Extra large dialog for detailed views";
        };
    };
};
export declare const KUMO_DIALOG_DEFAULT_VARIANTS: {
    readonly size: "base";
};
export declare const KUMO_DIALOG_STYLING: {
    readonly dimensions: {
        readonly sm: {
            readonly width: 350;
            readonly titleSize: 20;
            readonly descSize: 16;
            readonly padding: 16;
            readonly gap: 8;
            readonly buttonSize: "sm";
        };
        readonly base: {
            readonly width: 384;
            readonly titleSize: 20;
            readonly descSize: 16;
            readonly padding: 24;
            readonly gap: 16;
            readonly buttonSize: "base";
        };
        readonly lg: {
            readonly width: 512;
            readonly titleSize: 20;
            readonly descSize: 16;
            readonly padding: 24;
            readonly gap: 16;
            readonly buttonSize: "base";
        };
        readonly xl: {
            readonly width: 768;
            readonly titleSize: 20;
            readonly descSize: 16;
            readonly padding: 24;
            readonly gap: 16;
            readonly buttonSize: "base";
        };
    };
    readonly baseTokens: {
        readonly background: "color-surface";
        readonly text: "text-color-surface";
        readonly borderRadius: 12;
        readonly shadow: "shadow-m";
    };
    readonly backdrop: {
        readonly background: "color-surface-secondary";
        readonly opacity: 0.8;
    };
    readonly header: {
        readonly title: {
            readonly fontWeight: 600;
            readonly color: "text-color-surface";
        };
        readonly closeIcon: {
            readonly name: "ph-x";
            readonly size: 20;
            readonly color: "text-color-muted";
        };
    };
    readonly description: {
        readonly fontWeight: 400;
        readonly color: "text-color-muted";
    };
    readonly buttons: {
        readonly primary: {
            readonly background: "color-primary";
            readonly text: "white";
        };
        readonly secondary: {
            readonly ring: "color-border";
            readonly text: "text-color-surface";
        };
    };
};
export type KumoDialogSize = keyof typeof KUMO_DIALOG_VARIANTS.size;
export interface KumoDialogVariantsProps {
    size?: KumoDialogSize;
}
export declare function dialogVariants({ size, }?: KumoDialogVariantsProps): string;
export type DialogProps = KumoDialogVariantsProps & {
    className?: string;
    children: ReactNode;
    style?: CSSProperties;
};
type DialogComponent = FC<DialogProps> & {
    Root: typeof DialogBase.Root;
    Trigger: typeof DialogBase.Trigger;
    Title: typeof DialogBase.Title;
    Description: typeof DialogBase.Description;
    Close: typeof DialogBase.Close;
};
declare const Dialog: DialogComponent;
declare const DialogRoot: typeof DialogBase.Root;
declare const DialogTrigger: DialogBase.Trigger;
declare const DialogTitle: import('react').ForwardRefExoticComponent<import('@base-ui/react/dialog').DialogTitleProps & import('react').RefAttributes<HTMLParagraphElement>>;
declare const DialogDescription: import('react').ForwardRefExoticComponent<import('@base-ui/react/dialog').DialogDescriptionProps & import('react').RefAttributes<HTMLParagraphElement>>;
declare const DialogClose: import('react').ForwardRefExoticComponent<import('@base-ui/react/dialog').DialogCloseProps & import('react').RefAttributes<HTMLButtonElement>>;
export { Dialog, DialogRoot, DialogTrigger, DialogTitle, DialogDescription, DialogClose, };
//# sourceMappingURL=dialog.d.ts.map