@veracity/vui/dist/toast/ToastItem.js

Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.

import styled from "../core/styled.js";
import { Icon } from "../icon/icon.js";
import { DismissButton } from "../dismissButton/DismissButton.js";
import { Spinner } from "../spinner/spinner.js";
import { intentStyle } from "./theme.js";
import { memo } from "react";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

//#region src/toast/ToastItem.tsx
const intentIcon = {
	info: "uiInfoCircle",
	success: "uiCheckCircle",
	warning: "uiExclamationTriangle",
	danger: "uiExclamationCircle"
};
const TOAST_ICON_SIZE = 16;
const toastTypography = `
  --vui-toast-text-size: var(--vui-font-size-sm, 14px);
  --vui-toast-text-weight: var(--vui-caption-font-weight, 400);
  --vui-toast-text-line-height: var(--vui-caption-line-height, 150%);
  font-size: var(--vui-toast-text-size);
  font-weight: var(--vui-toast-text-weight);
  line-height: var(--vui-toast-text-line-height);
`;
const toastTitleTypography = `
  --vui-toast-title-weight: var(--vui-caption-font-weight-bold, 600);
  font-weight: var(--vui-toast-title-weight);
`;
const ToastRoot = styled.div`
  ${`
  
  --vui-toast-gap-row: 16px;
  --vui-toast-gap-text: 0px;
  --vui-toast-gap-action-bar: 8px;
  --vui-toast-padding-row: 8px 16px;
  --vui-toast-padding-icon: 8px 0 0;
  --vui-toast-padding-text: 4px 0;
  --vui-toast-padding-action-bar: 8px 16px;

  
  --vui-toast-min-height: 56px;
  --vui-toast-min-width: 320px;
  --vui-toast-width-default: 480px;
  --vui-toast-width-wide: 560px;
  --vui-toast-text-clamp: 2;
  --vui-toast-title-line-height: 24px;

  
  --vui-toast-shadow:
    0px 0px 1px 0px rgba(0, 0, 0, 0.05),
    0px 10px 20px 0px rgba(0, 0, 0, 0.15);

  
  --vui-toast-animation-duration: 0.2s;
  --vui-toast-animation-timing: ease-in-out;

`}
  animation: vui-fadeDown var(--vui-toast-animation-duration) var(--vui-toast-animation-timing);
  box-shadow: var(--vui-toast-shadow);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: var(--vui-toast-min-height);
  min-width: var(--vui-toast-min-width);
  width: ${({ $size }) => $size === "wide" ? "var(--vui-toast-width-wide)" : "var(--vui-toast-width-default)"};
  ${({ $status }) => intentStyle[$status]}
`;
const Row = styled.div`
  align-items: stretch;
  display: flex;
  flex-direction: row;
  gap: var(--vui-toast-gap-row);
  padding: var(--vui-toast-padding-row);
`;
const IconWrap = styled.div`
  align-self: ${({ $inline }) => $inline ? "center" : "flex-start"};
  color: var(--vui-toast-intent-color);
  display: flex;
  flex-shrink: 0;
  padding: ${({ $inline }) => $inline ? "0" : "var(--vui-toast-padding-icon)"};
`;
const TextArea = styled.div`
  ${toastTypography}
  display: ${({ $inline }) => $inline ? "block" : "flex"};
  flex: 1;
  flex-direction: column;
  gap: var(--vui-toast-gap-text);
  min-width: 0;
  padding: var(--vui-toast-padding-text);
`;
const InlineClamp = styled.span`
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--vui-toast-text-clamp);
  color: var(--vui-toast-intent-color);
  display: -webkit-box;
  overflow: hidden;
  word-break: break-word;
`;
const Title = styled.p`
  ${toastTitleTypography}
  color: var(--vui-toast-intent-color);
  display: ${({ $inline }) => $inline ? "inline" : "block"};
  line-height: var(--vui-toast-title-line-height);
  margin: 0;
`;
const Description = styled.p`
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--vui-toast-text-clamp);
  color: var(--vui-toast-intent-color);
  display: ${({ $inline }) => $inline ? "inline" : "-webkit-box"};
  margin: 0;
  overflow: hidden;
`;
const DismissWrap = styled.div`
  --vui-dismiss-fg: var(--vui-toast-intent-color);
  align-items: flex-start;
  align-self: ${({ $inline }) => $inline ? "center" : "flex-start"};
  display: flex;
  flex-shrink: 0;
`;
const ActionBar = styled.div`
  align-items: center;
  background-color: var(--vui-background-default, white);
  box-sizing: border-box;
  display: flex;
  gap: var(--vui-toast-gap-action-bar);
  justify-content: flex-end;
  padding: var(--vui-toast-padding-action-bar);
  width: 100%;
`;
const ContentBar = styled.div`
  background-color: var(--vui-toast-content-bg, var(--vui-background-default, white));
  box-sizing: border-box;
  display: flex;
  gap: var(--vui-toast-gap-action-bar);
  padding: var(--vui-toast-padding-action-bar);
  width: 100%;
`;
const resolveToastIcon = (icon, status) => {
	if (icon !== void 0 && icon !== "") return typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, {
		name: icon,
		h: TOAST_ICON_SIZE,
		w: TOAST_ICON_SIZE
	}) : icon;
	if (status === "loading") return /* @__PURE__ */ jsx(Spinner, {
		size: "xxs",
		p: 0
	});
	return /* @__PURE__ */ jsx(Icon, {
		name: intentIcon[status] ?? "uiExclamationCircle",
		h: TOAST_ICON_SIZE,
		w: TOAST_ICON_SIZE
	});
};
const ToastItemInner = ({ action, content, icon, onClose, showDismissButton = true, size = "default", status = "info", text, textLayout = "stacked", title }) => {
	const isInline = textLayout === "inline";
	const resolvedIcon = resolveToastIcon(icon, status);
	return /* @__PURE__ */ jsxs(ToastRoot, {
		role: "status",
		"aria-live": "polite",
		$status: status,
		$size: size,
		children: [
			/* @__PURE__ */ jsxs(Row, { children: [
				/* @__PURE__ */ jsx(IconWrap, {
					$inline: isInline,
					children: resolvedIcon
				}),
				/* @__PURE__ */ jsx(TextArea, {
					$inline: isInline,
					children: isInline ? /* @__PURE__ */ jsxs(InlineClamp, { children: [
						!!title && /* @__PURE__ */ jsx(Title, {
							$inline: true,
							children: title
						}),
						!!title && !!text && " ",
						!!text && /* @__PURE__ */ jsx(Description, {
							$inline: true,
							children: text
						})
					] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [!!title && /* @__PURE__ */ jsx(Title, { children: title }), !!text && /* @__PURE__ */ jsx(Description, { children: text })] })
				}),
				showDismissButton && onClose && /* @__PURE__ */ jsx(DismissWrap, {
					$inline: isInline,
					children: /* @__PURE__ */ jsx(DismissButton, {
						size: "md",
						onClick: onClose,
						"aria-label": "Close"
					})
				})
			] }),
			!!content && /* @__PURE__ */ jsx(ContentBar, { children: content }),
			!!action && /* @__PURE__ */ jsx(ActionBar, { children: action })
		]
	});
};
const ToastItem = memo(ToastItemInner);
ToastItem.displayName = "ToastItem";

//#endregion
export { ToastItem };
globalThis.__vuiVersion__ = "5.3.1"
//# sourceMappingURL=ToastItem.js.map