goobs-frontend
Version:
A comprehensive React-based libary for building modern web applications
161 lines • 6.37 kB
TypeScript
import { default as React } from 'react';
/**
* Comprehensive styling options for {@link Alert}. Transcribed verbatim from
* the former `AlertStyles` in `src/theme/alert.ts` so the public prop contract
* is unchanged; the component now consumes these as CSS custom properties via
* its CSS module rather than feeding a JS theme generator.
*/
export interface AlertStyles {
/** Theme variant: 'light' (default), 'dark', or 'sacred'. */
theme?: 'light' | 'dark' | 'sacred';
/** Container background; set on the `background` shorthand, so the severity background (a longhand) still wins unless that is also overridden. */
backgroundColor?: string;
/** Container border color; highest-precedence border hook (caller > severity > theme). */
borderColor?: string;
/** Container border radius. */
borderRadius?: string;
/** Container border width. */
borderWidth?: string;
/** Container box shadow. */
boxShadow?: string;
/** Container backdrop-filter (e.g. a blur). */
backdropFilter?: string;
/** Container background-image. */
backgroundImage?: string;
/** Message font family. */
fontFamily?: string;
/** Message font size. */
fontSize?: string;
/** Message line height. */
lineHeight?: string | number;
/** Container padding. */
padding?: string;
/** Container background on hover. */
hoverBackgroundColor?: string;
/** Container border color on hover. */
hoverBorderColor?: string;
/** Container box shadow on hover. */
hoverBoxShadow?: string;
/** Container transform on hover. */
hoverTransform?: string;
/** Background when severity is 'error'. */
errorBackgroundColor?: string;
/** Border color when severity is 'error'. */
errorBorderColor?: string;
/** Text/icon color when severity is 'error'. */
errorColor?: string;
/** Text shadow when severity is 'error'. */
errorTextShadow?: string;
/** Background when severity is 'warning'. */
warningBackgroundColor?: string;
/** Border color when severity is 'warning'. */
warningBorderColor?: string;
/** Text/icon color when severity is 'warning'. */
warningColor?: string;
/** Text shadow when severity is 'warning'. */
warningTextShadow?: string;
/** Background when severity is 'info'. */
infoBackgroundColor?: string;
/** Border color when severity is 'info'. */
infoBorderColor?: string;
/** Text/icon color when severity is 'info'. */
infoColor?: string;
/** Text shadow when severity is 'info'. */
infoTextShadow?: string;
/** Background when severity is 'success'. */
successBackgroundColor?: string;
/** Border color when severity is 'success'. */
successBorderColor?: string;
/** Text/icon color when severity is 'success'. */
successColor?: string;
/** Text shadow when severity is 'success'. */
successTextShadow?: string;
/** Severity icon width (default 20px; 24px on sacred). */
iconWidth?: string;
/** Severity icon height (default 20px; 24px on sacred). */
iconHeight?: string;
/** Severity icon CSS filter (sacred defaults to a currentColor drop-shadow glow). */
iconFilter?: string;
/** Severity icon transform on container hover. */
iconHoverTransform?: string;
/** Severity icon filter on container hover. */
iconHoverFilter?: string;
/** Message text color (overrides the severity color). */
messageColor?: string;
/** Message font weight. */
messageFontWeight?: string | number;
/** Message letter spacing. */
messageLetterSpacing?: string;
/** Close button width. */
closeButtonWidth?: string;
/** Close button height. */
closeButtonHeight?: string;
/** Close button border radius. */
closeButtonBorderRadius?: string;
/** Close button border shorthand. */
closeButtonBorder?: string;
/** Close button background. */
closeButtonBackground?: string;
/** Close button text color. */
closeButtonColor?: string;
/** Close button font size. */
closeButtonFontSize?: string;
/** Close button font family. */
closeButtonFontFamily?: string;
/** Close button text shadow. */
closeButtonTextShadow?: string;
/** Close button background on hover. */
closeButtonHoverBackground?: string;
/** Close button border color on hover. */
closeButtonHoverBorderColor?: string;
/** Close button transform on hover. */
closeButtonHoverTransform?: string;
/** Close button box shadow on hover. */
closeButtonHoverBoxShadow?: string;
/** Flex gap between icon, message, and close button. */
gap?: string;
/** Container margin shorthand. */
margin?: string;
/** Container top margin. */
marginTop?: string;
/** Container bottom margin. */
marginBottom?: string;
/** Container left margin. */
marginLeft?: string;
/** Container right margin. */
marginRight?: string;
/** Replaces the whole container transition with `all <duration> <easing>`. */
transitionDuration?: string;
/** Easing used with transitionDuration (default cubic-bezier(0.4, 0, 0.2, 1)); ignored without it. */
transitionEasing?: string;
/** Set false to remove the container border entirely (default: bordered). */
outline?: boolean;
/** Container width. */
width?: string;
/** Container max-width. */
maxWidth?: string;
/** Container min-width. */
minWidth?: string;
/** Container height. */
height?: string;
/** Container max-height. */
maxHeight?: string;
/** Container min-height. */
minHeight?: string;
}
export interface AlertProps {
/** The severity of the alert, which determines the icon and color scheme. */
severity: 'error' | 'warning' | 'info' | 'success';
/** The message to be displayed in the alert. */
message: string;
/** Callback fired when the alert is closed. If not provided, the close button will not be shown. */
onClose?: () => void;
/** Comprehensive styling options including theme, custom colors, and layout properties. */
styles?: AlertStyles;
}
/**
* A component for displaying important messages with different severity levels and themes.
*/
declare const Alert: React.FC<AlertProps>;
export default Alert;
//# sourceMappingURL=index.d.ts.map