@drivy/cobalt/components/Alerter/index.js

Opinionated design system for Drivy's projects.

import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
import { createToaster, Portal, Toaster, Toast } from '@ark-ui/react';
import cx from 'classnames';
import '../Icon/index.js';
import InfoFilledIcon from '../Icon/__generated__/InfoFilledIcon.js';
import CheckCircleIcon from '../Icon/__generated__/CheckCircleIcon.js';
import ContextualWarningCircleFilledIcon from '../Icon/__generated__/ContextualWarningCircleFilledIcon.js';

const DEFAULT_TIMEOUT = 3000;
const MAX_TEXT_TIMEOUT = 9000;
const computeTimeDurationFromText = (content) => {
    if (typeof content !== "string")
        return DEFAULT_TIMEOUT;
    return Math.min(Math.max(DEFAULT_TIMEOUT, content.length * 90), MAX_TEXT_TIMEOUT);
};
const toaster = createToaster({
    overlap: true,
    gap: 12,
    placement: "bottom",
    max: 12,
});
const useAlerts = () => {
    return {
        sendAlert: ({ message, status, duration, }) => toaster.create({
            description: message,
            type: status,
            duration: duration !== null && duration !== void 0 ? duration : computeTimeDurationFromText(message),
        }),
    };
};
const STATUS_ICONS_MAP = {
    info: InfoFilledIcon,
    success: CheckCircleIcon,
    error: ContextualWarningCircleFilledIcon,
};
const STATUS_ICON_COLOR_MAP = {
    info: "tertiary",
    success: "success",
    error: "error",
};
const Alerter = ({ children }) => {
    return (jsxs(Fragment, { children: [children, jsx(Portal, { children: jsx(Toaster, { toaster: toaster, className: "cobalt-alerter", children: (toast) => {
                        const status = toast.type;
                        const IconComp = STATUS_ICONS_MAP[status];
                        return (jsx(Toast.Root, { className: cx("cobalt-alert"), children: jsxs("div", { className: "cobalt-alert__wrapper", children: [jsx(IconComp, { size: 20, color: STATUS_ICON_COLOR_MAP[status] }), jsx(Toast.Description, { children: toast.description })] }) }, toast.id));
                    } }) })] }));
};

export { Alerter as default, useAlerts };
//# sourceMappingURL=index.js.map