@veracity/vui/dist/definition/definitionContent.js

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

import { isArray } from "../utils/assertion.js";
import { cs } from "../utils/styles.js";
import { useStyleConfig } from "../core/theme.js";
import styled from "../core/styled.js";
import vui from "../core/vui.js";
import { Box } from "../box/box.js";
import { Icon } from "../icon/icon.js";
import { P } from "../p/p.js";
import { useEffect } from "react";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

//#region src/definition/definitionContent.tsx
const DefinitionItemKey = styled.dtBox``;
const DefinitionItemValue = styled.ddBox``;
const DefinitionContent = vui((props, ref) => {
	const { startIcon, endIcon, iconLeft, iconRight, isLabelBold, isValueBold, items, orientation } = props;
	const resolvedStartIcon = startIcon ?? iconLeft;
	const resolvedEndIcon = endIcon ?? iconRight;
	const styles = useStyleConfig("Definition", props);
	useEffect(() => {
		if (iconLeft !== void 0) console.warn("[Definition] `iconLeft` is deprecated. Use `startIcon` instead.");
		if (iconRight !== void 0) console.warn("[Definition] `iconRight` is deprecated. Use `endIcon` instead.");
	}, [iconLeft, iconRight]);
	return /* @__PURE__ */ jsx(Fragment$1, { children: isArray(items) ? items.map(({ key, value, ...props }, index) => /* @__PURE__ */ jsxs(Box, {
		className: "vui-definitionItemWrapper",
		ref,
		children: [/* @__PURE__ */ jsxs(DefinitionItemKey, {
			fontWeight: isLabelBold ? "demi" : "default",
			...styles.dt,
			children: [
				props.keyHasIcon && resolvedStartIcon && /* @__PURE__ */ jsx(Icon, {
					className: cs("vui-definitionIcon"),
					name: resolvedStartIcon,
					...styles.icon
				}),
				key,
				props.keyHasIcon && resolvedEndIcon && /* @__PURE__ */ jsx(Icon, {
					className: cs("vui-definitionIcon"),
					name: resolvedEndIcon,
					...styles.icon
				})
			]
		}), isArray(value) ? /* @__PURE__ */ jsx(DefinitionItemValue, {
			display: "block",
			fontWeight: isValueBold ? "demi" : "default",
			...styles.dd,
			children: orientation === "horizontal" ? value.join(", ") : value.map((value, index) => /* @__PURE__ */ jsxs(P, {
				display: "flex",
				children: [
					props.valueHasIcon && resolvedStartIcon && /* @__PURE__ */ jsx(Icon, {
						className: cs("vui-definitionIcon"),
						name: resolvedStartIcon,
						...styles.icon
					}),
					value,
					props.valueHasIcon && resolvedEndIcon && /* @__PURE__ */ jsx(Icon, {
						className: cs("vui-definitionIcon"),
						name: resolvedEndIcon,
						...styles.icon
					})
				]
			}, index + value))
		}, index) : /* @__PURE__ */ jsxs(DefinitionItemValue, {
			fontWeight: isValueBold ? "demi" : "default",
			...styles.dd,
			children: [
				props.valueHasIcon && resolvedStartIcon && /* @__PURE__ */ jsx(Icon, {
					className: cs("vui-definitionIcon"),
					name: resolvedStartIcon,
					...styles.icon
				}),
				value,
				props.valueHasIcon && resolvedEndIcon && /* @__PURE__ */ jsx(Icon, {
					className: cs("vui-definitionIcon"),
					name: resolvedEndIcon,
					...styles.icon
				})
			]
		})]
	}, index)) : items });
});
DefinitionContent.displayName = "DefinitionContent";

//#endregion
export { DefinitionContent, DefinitionContent as default, DefinitionItemKey, DefinitionItemValue };
globalThis.__vuiVersion__ = "5.3.1"
//# sourceMappingURL=definitionContent.js.map