goobs-frontend/dist/theme/confirmationcodeinput.d.ts

A comprehensive React-based libary for building modern web applications

import { default as React } from 'react';
export interface ConfirmationCodeInputTheme {
    container: {
        background: string;
        border: string;
        borderRadius: string;
        boxShadow: string;
        backdropFilter: string;
        padding: string;
        backgroundImage?: string;
    };
    containerHover: {
        transform: string;
        boxShadow: string;
        borderColor?: string;
    };
    successContainer: {
        background: string;
        border: string;
        borderRadius: string;
        boxShadow: string;
        backdropFilter: string;
        padding: string;
        backgroundImage?: string;
    };
    successIcon: {
        fontSize: string;
        color: string;
        filter?: string;
        animation?: string;
    };
    successMessage: {
        fontSize: string;
        lineHeight: string;
        color: string;
        fontFamily: string;
        fontWeight: string | number;
        letterSpacing: string;
        textTransform: string;
        textShadow?: string;
    };
    input: {
        width: string;
        height: string;
        padding: string;
        fontSize: string;
        fontFamily: string;
        fontWeight: string | number;
        letterSpacing: string;
        color: string;
        backgroundColor: string;
        borderColor: string;
        borderRadius: string;
        borderWidth: string;
        textShadow?: string;
        animation?: string;
    };
    inputFocus: {
        borderColor: string;
        borderWidth: string;
        transform: string;
        boxShadow: string;
    };
    statusIndicator: {
        width: string;
        height: string;
        borderRadius: string;
        backgroundColor: string;
        animation?: string;
    };
    statusIndicatorValid: {
        backgroundColor: string;
        animation?: string;
    };
    transition: string;
}
export interface ConfirmationCodeInputStyles {
    theme?: 'light' | 'dark' | 'sacred';
    backgroundColor?: string;
    borderColor?: string;
    borderRadius?: string;
    borderWidth?: string;
    boxShadow?: string;
    backdropFilter?: string;
    backgroundImage?: string;
    padding?: string;
    hoverBackgroundColor?: string;
    hoverBorderColor?: string;
    hoverBoxShadow?: string;
    hoverTransform?: string;
    successBackgroundColor?: string;
    successBorderColor?: string;
    successBorderRadius?: string;
    successBoxShadow?: string;
    successBackdropFilter?: string;
    successBackgroundImage?: string;
    successPadding?: string;
    successIconFontSize?: string;
    successIconColor?: string;
    successIconFilter?: string;
    successIconAnimation?: string;
    successMessageFontSize?: string;
    successMessageLineHeight?: string;
    successMessageColor?: string;
    successMessageFontFamily?: string;
    successMessageFontWeight?: string | number;
    successMessageLetterSpacing?: string;
    successMessageTextTransform?: string;
    successMessageTextShadow?: string;
    inputWidth?: string;
    inputHeight?: string;
    inputPadding?: string;
    inputFontSize?: string;
    inputFontFamily?: string;
    inputFontWeight?: string | number;
    inputLetterSpacing?: string;
    inputColor?: string;
    inputBackgroundColor?: string;
    inputBorderColor?: string;
    inputBorderRadius?: string;
    inputBorderWidth?: string;
    inputTextShadow?: string;
    inputAnimation?: string;
    inputFocusBorderColor?: string;
    inputFocusBorderWidth?: string;
    inputFocusTransform?: string;
    inputFocusBoxShadow?: string;
    statusIndicatorWidth?: string;
    statusIndicatorHeight?: string;
    statusIndicatorBorderRadius?: string;
    statusIndicatorBackgroundColor?: string;
    statusIndicatorAnimation?: string;
    statusIndicatorValidBackgroundColor?: string;
    statusIndicatorValidAnimation?: string;
    gap?: string;
    inputGap?: string;
    margin?: string;
    marginTop?: string;
    marginBottom?: string;
    marginLeft?: string;
    marginRight?: string;
    transitionDuration?: string;
    transitionEasing?: string;
    disabled?: boolean;
    outline?: boolean;
    width?: string;
    maxWidth?: string;
    minWidth?: string;
    height?: string;
    maxHeight?: string;
    minHeight?: string;
}
export declare const confirmationCodeInputThemes: Record<'light' | 'dark' | 'sacred', ConfirmationCodeInputTheme>;
export declare const getConfirmationCodeInputTheme: (styles?: ConfirmationCodeInputStyles) => ConfirmationCodeInputTheme;
export declare const getConfirmationCodeInputStyles: (styles?: ConfirmationCodeInputStyles, isHovered?: boolean, isValid?: boolean, isDisabled?: boolean) => {
    container: React.CSSProperties;
    successContainer: React.CSSProperties;
    successIcon: React.CSSProperties;
    successMessage: React.CSSProperties;
    input: React.CSSProperties;
    inputFocus: React.CSSProperties;
    statusIndicator: React.CSSProperties;
    mainContent: React.CSSProperties;
    inputsRow: React.CSSProperties;
    inputGroup: React.CSSProperties;
    buttonContainer: React.CSSProperties;
};
//# sourceMappingURL=confirmationcodeinput.d.ts.map