@veracity/vui/dist/heading/heading.js

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

import { filterUndefined } from "../utils/object.js";
import { cs } from "../utils/styles.js";
import { omitThemingProps, useStyleConfig } from "../core/theme.js";
import { useUp } from "../core/media.js";
import styled from "../core/styled.js";
import vui from "../core/vui.js";
import { jsx } from "react/jsx-runtime";

//#region src/heading/heading.tsx
const HeadingBase = styled.h2Box`
  font-weight: demi;
  transition-duration: fast;
`;
/** Used to define headings and titles for pages, articles, panels, etc. */
const Heading = vui((props, ref) => {
	const { align, casing, children, className, decoration, text, weight, ...rest } = omitThemingProps(props);
	const { fontSize, lineHeight, ...restStyles } = useStyleConfig("Heading", props);
	const hClassName = props.size ? `vui-${props.size}` : "";
	const aliasedProps = filterUndefined({
		fontWeight: weight,
		textAlign: align,
		textDecoration: decoration,
		textTransform: casing
	});
	const isDesktop = useUp(993);
	const fontSizeDesktop = fontSize?.desktop || fontSize;
	const fontSizeMobile = fontSize?.mobile || fontSize;
	const lineHeightDesktop = lineHeight?.desktop || lineHeight;
	const lineHeightMobile = lineHeight?.mobile || lineHeight;
	return /* @__PURE__ */ jsx(HeadingBase, {
		className: cs("vui-heading", hClassName, className),
		fontSize: isDesktop ? fontSizeDesktop : fontSizeMobile,
		lineHeight: isDesktop ? lineHeightDesktop : lineHeightMobile,
		ref,
		...restStyles,
		...aliasedProps,
		...rest,
		children: children ?? text
	});
});
Heading.displayName = "Heading";

//#endregion
export { Heading, Heading as default, HeadingBase };
globalThis.__vuiVersion__ = "5.3.1"
//# sourceMappingURL=heading.js.map