@nex-ui/react/dist/esm/components/alert/Alert.mjs

🎉 A beautiful, modern, and reliable React component library.

"use client";
import { jsx, jsxs } from 'react/jsx-runtime';
import { ExclamationSquareFilled, ExclamationShieldFilled, CheckCircleFilled, ExclamationCircleFilled, CloseOutlined } from '@nex-ui/icons';
import { useMemo } from 'react';
import { __DEV__ } from '@nex-ui/utils';
import { useDefaultProps } from '../utils/useDefaultProps.mjs';
import { useSlotClasses } from '../utils/useSlotClasses.mjs';
import { useStyles } from '../utils/useStyles.mjs';
import { useSlot } from '../utils/useSlot.mjs';
import { Button } from '../button/Button.mjs';
import { alertRecipe } from '../../theme/recipes/alert.mjs';

const useSlotAriaProps = (ownerState)=>{
    const { role = 'alert', slotProps } = ownerState;
    const ariaLabel = slotProps?.closeButton?.['aria-label'];
    return useMemo(()=>{
        return {
            root: {
                role
            },
            closeButton: {
                'aria-label': ariaLabel ?? 'Close alert'
            }
        };
    }, [
        ariaLabel,
        role
    ]);
};
const slots = [
    'root',
    'icon',
    'content',
    'title',
    'description',
    'closeButton'
];
const Alert = (inProps)=>{
    const props = useDefaultProps({
        name: 'Alert',
        props: inProps
    });
    const { title, closable, onClose, description, action, slotProps, hideIcon, classNames, icon: iconProp, color: colorProp, status = 'info', variant = 'faded', radius = 'md', ...remainingProps } = props;
    const icon = useMemo(()=>{
        if (iconProp) return iconProp;
        switch(status){
            case 'info':
                return /*#__PURE__*/ jsx(ExclamationCircleFilled, {});
            case 'success':
                return /*#__PURE__*/ jsx(CheckCircleFilled, {});
            case 'warning':
                return /*#__PURE__*/ jsx(ExclamationShieldFilled, {});
            case 'error':
                return /*#__PURE__*/ jsx(ExclamationSquareFilled, {});
            default:
                if (__DEV__) {
                    console.error('[Nex UI] Alert: Unknown status %s', status);
                }
                return null;
        }
    }, [
        iconProp,
        status
    ]);
    const color = useMemo(()=>{
        if (colorProp) return colorProp;
        switch(status){
            case 'info':
                return 'blue';
            case 'success':
                return 'green';
            case 'warning':
                return 'yellow';
            case 'error':
                return 'red';
        }
    }, [
        colorProp,
        status
    ]);
    const ownerState = {
        ...props,
        status,
        variant,
        icon,
        color,
        radius
    };
    const slotClasses = useSlotClasses({
        name: 'Alert',
        slots,
        classNames
    });
    const slotAriaProps = useSlotAriaProps(ownerState);
    const styles = useStyles({
        ownerState,
        name: 'Alert',
        recipe: alertRecipe
    });
    const [AlertRoot, getAlertRootProps] = useSlot({
        elementType: 'div',
        externalForwardedProps: remainingProps,
        style: styles.root,
        classNames: slotClasses.root,
        a11y: slotAriaProps.root,
        dataAttrs: {
            radius,
            variant,
            color,
            status
        }
    });
    const [AlertIcon, getAlertIconProps] = useSlot({
        elementType: 'div',
        style: styles.icon,
        externalSlotProps: slotProps?.icon,
        classNames: slotClasses.icon
    });
    const [AlertContent, getAlertContentProps] = useSlot({
        elementType: 'div',
        style: styles.content,
        externalSlotProps: slotProps?.content,
        classNames: slotClasses.content
    });
    const [AlertTitle, getAlertTitleProps] = useSlot({
        elementType: 'div',
        style: styles.title,
        externalSlotProps: slotProps?.title,
        classNames: slotClasses.title
    });
    const [AlertDescription, getAlertDescriptionProps] = useSlot({
        elementType: 'div',
        style: styles.description,
        externalSlotProps: slotProps?.description,
        classNames: slotClasses.description
    });
    const [AlertCloseButton, getAlertCloseButtonProps] = useSlot({
        elementType: Button,
        style: styles.closeButton,
        shouldForwardComponent: false,
        externalSlotProps: slotProps?.closeButton,
        classNames: slotClasses.closeButton,
        a11y: slotAriaProps.closeButton,
        additionalProps: {
            color,
            variant: 'ghost',
            size: 'sm',
            iconOnly: true,
            radius: 'full',
            onClick: onClose
        }
    });
    return /*#__PURE__*/ jsxs(AlertRoot, {
        ...getAlertRootProps(),
        children: [
            icon && !hideIcon && /*#__PURE__*/ jsx(AlertIcon, {
                ...getAlertIconProps(),
                children: icon
            }),
            /*#__PURE__*/ jsxs(AlertContent, {
                ...getAlertContentProps(),
                children: [
                    title && /*#__PURE__*/ jsx(AlertTitle, {
                        ...getAlertTitleProps(),
                        children: title
                    }),
                    description && /*#__PURE__*/ jsx(AlertDescription, {
                        ...getAlertDescriptionProps(),
                        children: description
                    })
                ]
            }),
            closable && !action ? /*#__PURE__*/ jsx(AlertCloseButton, {
                ...getAlertCloseButtonProps(),
                children: /*#__PURE__*/ jsx(CloseOutlined, {})
            }) : action
        ]
    });
};
Alert.displayName = 'Alert';

export { Alert };