@veracity/vui/dist/header/header.js

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

import { useClickOutside } from "../utils/react.js";
import { cs } from "../utils/styles.js";
import { useLinks } from "../core/links.js";
import { useStyleConfig } from "../core/theme.js";
import { useUp } from "../core/media.js";
import styled from "../core/styled.js";
import vui from "../core/vui.js";
import { HeaderProvider } from "./context.js";
import { HeaderAccountUserInfo } from "./headerAccountUserInfo.js";
import { HeaderAccount } from "./headerAccount.js";
import { HeaderApplicationName } from "./headerApplicationName.js";
import { HeaderContent } from "./headerContent.js";
import { HeaderCreateAccount } from "./headerCreateAccount.js";
import { HeaderDivider } from "./headerDivider.js";
import { HeaderLinkItem } from "./headerLinkItem.js";
import { HeaderLogo } from "./headerLogo.js";
import { HeaderMainLinks } from "./headerMainLinks.js";
import { HeaderMobileContent } from "./headerMobileContent.js";
import { HeaderMobileToggle } from "./headerMobileToggle.js";
import { HeaderNotifications } from "./headerNotifications.js";
import { HeaderServicesMessage } from "./headerServicesMessage.js";
import { HeaderServices } from "./headerServices.js";
import { HeaderSignIn } from "./headerSignIn.js";
import { HeaderSupport } from "./headerSupport.js";
import { useRef, useState } from "react";
import { jsx } from "react/jsx-runtime";

//#region src/header/header.tsx
const HeaderBase = styled.headerBox`
  align-items: center;
  background-color: white;
  border-bottom: 1px solid darkBlue.main;
  display: flex;
  position: relative;
`;
/** Branded Veracity Header with logo, links, services, account and other data. Controls max-width of the content. */
const Header = vui((props, ref) => {
	const { className, isSticky, size, variant, ...rest } = props;
	const [isMobileOpen, setIsMobileOpen] = useState(false);
	const mobileContentRef = useRef(null);
	const mobileToggleRef = useRef(null);
	const styles = useStyleConfig("Header", props);
	const headerHeight = 72;
	const [links] = useLinks();
	useClickOutside([mobileContentRef, mobileToggleRef], () => {
		setIsMobileOpen(false);
	});
	const isDesktop = useUp("lg");
	return /* @__PURE__ */ jsx(HeaderProvider, {
		value: {
			headerHeight,
			isDesktop,
			isMobile: !isDesktop,
			isMobileOpen,
			links,
			mobileContentRef,
			mobileToggleRef,
			setIsMobileOpen,
			size,
			variant
		},
		children: /* @__PURE__ */ jsx(HeaderBase, {
			className: cs("vui-header", className),
			h: headerHeight,
			position: isSticky ? "sticky" : "static",
			px: {
				xs: 2,
				lg: 5
			},
			ref,
			role: "banner",
			top: isSticky ? 0 : "auto",
			...styles.container,
			...rest
		})
	});
});
Header.Account = HeaderAccount;
Header.AccountUserInfo = HeaderAccountUserInfo;
Header.Support = HeaderSupport;
Header.ApplicationName = HeaderApplicationName;
Header.Content = HeaderContent;
Header.CreateAccount = HeaderCreateAccount;
Header.Divider = HeaderDivider;
Header.LinkItem = HeaderLinkItem;
Header.Logo = HeaderLogo;
Header.MainLinks = HeaderMainLinks;
Header.MobileContent = HeaderMobileContent;
Header.MobileToggle = HeaderMobileToggle;
Header.Notifications = HeaderNotifications;
Header.Services = HeaderServices;
Header.ServicesMessage = HeaderServicesMessage;
Header.SignIn = HeaderSignIn;
Header.displayName = "Header";

//#endregion
export { Header, Header as default, HeaderBase };
globalThis.__vuiVersion__ = "5.3.1"
//# sourceMappingURL=header.js.map