@crossed/ui/lib/typescript/feedback/Alert.d.ts

A universal & performant styling library for React Native, Next.js & React

/**
 * Copyright (c) Paymium.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root of this projects source tree.
 */
import { type TextProps } from '../typography/Text';
import { type CrossedMethods } from '@crossed/styled';
import { type YBoxProps } from '../layout/YBox';
import { type ButtonProps, type ButtonTextProps } from '../buttons/Button';
export declare const alertDescriptionStyles: {
    base: CrossedMethods<{
        base: {
            flexShrink: number;
            flexGrow: number;
        };
    }>;
    error: CrossedMethods<{
        base: {
            color: "#EF4444" | "#A21A1A";
        };
    }>;
    success: CrossedMethods<{
        base: {
            color: "#188551" | "#3ABB7D";
        };
    }>;
    warning: CrossedMethods<{
        base: {
            color: "#AD5C23" | "#F97316";
        };
    }>;
    info: CrossedMethods<{
        base: {
            color: "#285F9B" | "#93C5FD";
        };
    }>;
};
export declare const alertActionTextStyles: {
    error: CrossedMethods<{
        base: {
            color: "#EF4444" | "#A21A1A";
        };
        ':hover': {
            color: "#EF4444" | "#A21A1A";
        };
        ':active': {
            color: "#EF4444" | "#A21A1A";
        };
    }>;
    success: CrossedMethods<{
        base: {
            color: "#188551" | "#3ABB7D";
        };
        ':hover': {
            color: "#188551" | "#3ABB7D";
        };
        ':active': {
            color: "#188551" | "#3ABB7D";
        };
    }>;
    warning: CrossedMethods<{
        base: {
            color: "#AD5C23" | "#F97316";
        };
        ':hover': {
            color: "#AD5C23" | "#F97316";
        };
        ':active': {
            color: "#AD5C23" | "#F97316";
        };
    }>;
    info: CrossedMethods<{
        base: {
            color: "#285F9B" | "#93C5FD";
        };
        ':hover': {
            color: "#285F9B" | "#93C5FD";
        };
        ':active': {
            color: "#285F9B" | "#93C5FD";
        };
    }>;
};
export declare const alertStyles: {
    readonly containerIcon: CrossedMethods<{
        readonly base: {
            readonly alignSelf: "center";
        };
        readonly media: {
            readonly md: {
                readonly alignSelf: "baseline";
                readonly paddingTop: 3;
            };
        };
    }>;
    readonly container: CrossedMethods<{
        readonly base: {
            readonly paddingVertical: 8;
            readonly paddingHorizontal: 16;
            readonly padding: 8;
            readonly borderRadius: 8;
            readonly borderWidth: 1;
            readonly borderStyle: "solid";
            readonly alignItems: "center";
            readonly gap: 8;
        };
        readonly variants: {};
        readonly media: {
            readonly md: {
                readonly flexDirection: "row";
                readonly gap: 16;
            };
        };
    }>;
    readonly group: CrossedMethods<{
        readonly base: {
            readonly flex: 1;
            readonly flexShrink: 1;
        };
    }>;
};
declare const containerStyles: {
    error: CrossedMethods<{
        base: {
            borderColor: "#2D2D61" | "#EF4444";
            backgroundColor: "#2D2D61" | "#FFE6E6";
        };
    }>;
    success: CrossedMethods<{
        base: {
            borderColor: "#2D2D61" | "#3ABB7D";
            backgroundColor: "#2D2D61" | "#EDFFF6";
        };
    }>;
    warning: CrossedMethods<{
        base: {
            borderColor: "#2D2D61" | "#F97316";
            backgroundColor: "#2D2D61" | "#FFF0E6";
        };
    }>;
    info: CrossedMethods<{
        base: {
            borderColor: "#2D2D61" | "#93C5FD";
            backgroundColor: "#2D2D61" | "#EEF6FF";
        };
    }>;
};
type Status = keyof typeof containerStyles;
export type AlertProps = YBoxProps & {
    /**
     * Select style of alert
     * @default 'infos'
     */
    status?: Status;
};
export type AlertIconProps = {
    style?: CrossedMethods<any>;
};
declare const AlertIcon: {
    ({ style }: AlertIconProps): import("react/jsx-runtime").JSX.Element;
    displayName: string;
};
declare const AlertDescription: import("react").NamedExoticComponent<TextProps>;
export type GroupProps = {
    style?: CrossedMethods<any, any>;
} & Omit<TextProps, 'style'>;
declare const AlertGroup: {
    ({ style, ...props }: GroupProps): import("react/jsx-runtime").JSX.Element;
    displayName: string;
};
declare const ActionText: {
    (props: ButtonTextProps): import("react/jsx-runtime").JSX.Element;
    displayName: string;
};
declare const Alert: {
    ({ status, children, style, ...props }: AlertProps): import("react/jsx-runtime").JSX.Element;
    displayName: string;
} & {
    Icon: {
        ({ style }: AlertIconProps): import("react/jsx-runtime").JSX.Element;
        displayName: string;
    };
    Description: import("react").NamedExoticComponent<TextProps>;
    Action: {
        (props: ButtonProps): import("react/jsx-runtime").JSX.Element;
        displayName: string;
    } & {
        Text: {
            (props: ButtonTextProps): import("react/jsx-runtime").JSX.Element;
            displayName: string;
        };
    };
    Group: {
        ({ style, ...props }: GroupProps): import("react/jsx-runtime").JSX.Element;
        displayName: string;
    };
};
export { Alert, AlertIcon, ActionText, AlertDescription, AlertGroup };
//# sourceMappingURL=Alert.d.ts.map