@lobehub/ui/es/Toast/Toast.mjs

Lobe UI is an open-source UI component library for building AIGC web apps

'use client';

import Icon_default from "../Icon/Icon.mjs";
import { useToastContext } from "./context.mjs";
import { actionVariants, rootVariants, styles } from "./style.mjs";
import { memo } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { cssVar, cx } from "antd-style";
import { AlertTriangle, CheckCircle, Info, Loader2, X, XCircle } from "lucide-react";
import { Toast } from "@base-ui/react/toast";

//#region src/Toast/Toast.tsx
const typeIcons = {
	default: Info,
	error: XCircle,
	info: Info,
	loading: Loader2,
	success: CheckCircle,
	warning: AlertTriangle
};
const typeColors = {
	default: cssVar.colorText,
	error: cssVar.colorError,
	info: cssVar.colorInfo,
	loading: cssVar.colorPrimary,
	success: cssVar.colorSuccess,
	warning: cssVar.colorWarning
};
const ToastItem = memo(({ toast, classNames, styles: customStyles }) => {
	const { position, swipeDirection } = useToastContext();
	const toastData = toast.data;
	const type = toastData?.type ?? "default";
	const closable = toastData?.closable ?? true;
	const hideCloseButton = toastData?.hideCloseButton ?? false;
	const showCloseButton = closable && !hideCloseButton;
	const icon = toastData?.icon;
	const title = toast.title ?? toastData?.title;
	const description = toast.description ?? toastData?.description;
	const actionProps = toast.actionProps ?? toastData?.actionProps;
	const actions = toastData?.actions;
	const iconColor = typeColors[type];
	const IconComponent = icon ?? typeIcons[type];
	const isLoading = type === "loading";
	const renderIcon = () => {
		if (!IconComponent) return null;
		return /* @__PURE__ */ jsx("div", {
			className: cx(styles.icon, classNames?.icon),
			style: customStyles?.icon,
			children: /* @__PURE__ */ jsx(Icon_default, {
				color: iconColor,
				icon: IconComponent,
				size: 18,
				spin: isLoading
			})
		});
	};
	const renderActions = () => {
		if (actions && actions.length > 0) return /* @__PURE__ */ jsx("div", {
			className: cx(styles.actions, classNames?.actions),
			style: customStyles?.actions,
			children: actions.map((action, index) => /* @__PURE__ */ jsx(Toast.Action, {
				className: cx(actionVariants({ variant: action.variant ?? "primary" }), classNames?.action),
				onClick: action.onClick,
				style: customStyles?.action,
				...action.props,
				children: action.label
			}, index))
		});
		if (actionProps) return /* @__PURE__ */ jsx(Toast.Action, {
			className: cx(actionVariants({ variant: "primary" }), classNames?.action),
			style: customStyles?.action,
			...actionProps
		});
		return null;
	};
	return /* @__PURE__ */ jsx(Toast.Root, {
		className: cx(rootVariants({ position }), classNames?.root),
		style: {
			...customStyles?.root,
			...toastData?.style
		},
		swipeDirection,
		toast,
		children: /* @__PURE__ */ jsx(Toast.Content, {
			className: cx(styles.content, classNames?.content),
			style: customStyles?.content,
			children: /* @__PURE__ */ jsxs("div", {
				className: styles.toastBody,
				children: [renderIcon(), /* @__PURE__ */ jsxs("div", {
					className: styles.contentArea,
					children: [
						/* @__PURE__ */ jsxs("div", {
							className: styles.titleRow,
							children: [title && /* @__PURE__ */ jsx(Toast.Title, {
								className: cx(styles.title, classNames?.title),
								style: customStyles?.title,
								children: title
							}), showCloseButton && /* @__PURE__ */ jsx(Toast.Close, {
								"aria-label": "Close",
								className: cx(styles.close, classNames?.close),
								style: customStyles?.close,
								children: /* @__PURE__ */ jsx(X, { size: 14 })
							})]
						}),
						description && /* @__PURE__ */ jsx(Toast.Description, {
							className: cx(styles.description, classNames?.description),
							style: {
								marginBlockStart: title ? 4 : 0,
								...customStyles?.description
							},
							children: description
						}),
						renderActions()
					]
				})]
			})
		})
	});
});
ToastItem.displayName = "ToastItem";
var Toast_default = ToastItem;

//#endregion
export { Toast_default as default };
//# sourceMappingURL=Toast.mjs.map