@nex-ui/react/dist/cjs/components/alert/Alert.cjs

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

"use client";
'use strict';

var jsxRuntime = require('react/jsx-runtime');
var icons = require('@nex-ui/icons');
var react = require('react');
var utils = require('@nex-ui/utils');
var useDefaultProps = require('../utils/useDefaultProps.cjs');
var useSlotClasses = require('../utils/useSlotClasses.cjs');
var useStyles = require('../utils/useStyles.cjs');
var useSlot = require('../utils/useSlot.cjs');
var Button = require('../button/Button.cjs');
var alert = require('../../theme/recipes/alert.cjs');

const useSlotAriaProps = (ownerState)=>{
    const { role = 'alert', slotProps } = ownerState;
    const ariaLabel = slotProps?.closeButton?.['aria-label'];
    return react.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.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 = react.useMemo(()=>{
        if (iconProp) return iconProp;
        switch(status){
            case 'info':
                return /*#__PURE__*/ jsxRuntime.jsx(icons.ExclamationCircleFilled, {});
            case 'success':
                return /*#__PURE__*/ jsxRuntime.jsx(icons.CheckCircleFilled, {});
            case 'warning':
                return /*#__PURE__*/ jsxRuntime.jsx(icons.ExclamationShieldFilled, {});
            case 'error':
                return /*#__PURE__*/ jsxRuntime.jsx(icons.ExclamationSquareFilled, {});
            default:
                if (utils.__DEV__) {
                    console.error('[Nex UI] Alert: Unknown status %s', status);
                }
                return null;
        }
    }, [
        iconProp,
        status
    ]);
    const color = react.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.useSlotClasses({
        name: 'Alert',
        slots,
        classNames
    });
    const slotAriaProps = useSlotAriaProps(ownerState);
    const styles = useStyles.useStyles({
        ownerState,
        name: 'Alert',
        recipe: alert.alertRecipe
    });
    const [AlertRoot, getAlertRootProps] = useSlot.useSlot({
        elementType: 'div',
        externalForwardedProps: remainingProps,
        style: styles.root,
        classNames: slotClasses.root,
        a11y: slotAriaProps.root,
        dataAttrs: {
            radius,
            variant,
            color,
            status
        }
    });
    const [AlertIcon, getAlertIconProps] = useSlot.useSlot({
        elementType: 'div',
        style: styles.icon,
        externalSlotProps: slotProps?.icon,
        classNames: slotClasses.icon
    });
    const [AlertContent, getAlertContentProps] = useSlot.useSlot({
        elementType: 'div',
        style: styles.content,
        externalSlotProps: slotProps?.content,
        classNames: slotClasses.content
    });
    const [AlertTitle, getAlertTitleProps] = useSlot.useSlot({
        elementType: 'div',
        style: styles.title,
        externalSlotProps: slotProps?.title,
        classNames: slotClasses.title
    });
    const [AlertDescription, getAlertDescriptionProps] = useSlot.useSlot({
        elementType: 'div',
        style: styles.description,
        externalSlotProps: slotProps?.description,
        classNames: slotClasses.description
    });
    const [AlertCloseButton, getAlertCloseButtonProps] = useSlot.useSlot({
        elementType: Button.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__*/ jsxRuntime.jsxs(AlertRoot, {
        ...getAlertRootProps(),
        children: [
            icon && !hideIcon && /*#__PURE__*/ jsxRuntime.jsx(AlertIcon, {
                ...getAlertIconProps(),
                children: icon
            }),
            /*#__PURE__*/ jsxRuntime.jsxs(AlertContent, {
                ...getAlertContentProps(),
                children: [
                    title && /*#__PURE__*/ jsxRuntime.jsx(AlertTitle, {
                        ...getAlertTitleProps(),
                        children: title
                    }),
                    description && /*#__PURE__*/ jsxRuntime.jsx(AlertDescription, {
                        ...getAlertDescriptionProps(),
                        children: description
                    })
                ]
            }),
            closable && !action ? /*#__PURE__*/ jsxRuntime.jsx(AlertCloseButton, {
                ...getAlertCloseButtonProps(),
                children: /*#__PURE__*/ jsxRuntime.jsx(icons.CloseOutlined, {})
            }) : action
        ]
    });
};
Alert.displayName = 'Alert';

exports.Alert = Alert;