@nordcom/nordstar-header/dist/header.js

Generic simple component to render headers for landing pages and similar.

var __defProp = Object.defineProperty;
var __name = (target, value) => __defProp(target, "name", { value, configurable: !0 });
import "react";
import { jsx } from "react/jsx-runtime";
import { Card } from "@nordcom/nordstar-card";
import { forwardRef, cn } from "@nordcom/nordstar-system";
import { View } from "@nordcom/nordstar-view";
const Header = /* @__PURE__ */ __name(({ sticky = !0, className, children, ...props }) => /* @__PURE__ */ jsx(
  Card,
  {
    ...props,
    as: "header",
    borderless: !0,
    className: cn(
      "[var(--layout-page-width)]:px-0 z-10 mb-3 flex min-h-20 w-full items-center justify-center rounded-none border-0 border-none bg-background/95 px-3 py-2 backdrop-blur supports-[backdrop-filter]:bg-background/75 md:h-20",
      sticky && "sticky inset-0 bottom-auto z-40 border-0 border-b-2 border-solid border-background-highlight",
      className
    ),
    "data-sticky": sticky,
    children: /* @__PURE__ */ jsx(
      View,
      {
        as: "div",
        className: cn(
          "m-0 grid h-full w-full grid-cols-[1fr] items-center justify-center gap-3 border-0 border-none p-0 md:grid-cols-[1fr_auto]"
        ),
        withoutWrapper: !0,
        children
      }
    )
  }
), "Header"), Logo = forwardRef(({ as, className, ...props }, ref) => /* @__PURE__ */ jsx(
  as || "section",
  {
    ...props,
    ref,
    draggable: !1,
    className: cn(
      "text-lg font-extrabold uppercase *:h-full *:object-contain *:object-left [&>a]:transition-colors [&>a]:hover:text-primary",
      className
    )
  }
)), Menu = forwardRef(({ as, className, overflowShadow = !0, ...props }, ref) => /* @__PURE__ */ jsx(
  as || "nav",
  {
    ...props,
    ref,
    draggable: !1,
    className: cn(
      "md:overflow-x flex w-full touch-auto select-none items-center gap-6 overflow-x-auto scroll-smooth py-3 md:justify-end",
      overflowShadow && "animate-scroll-shadow-inset [animation-timeline:scroll(self_inline)]",
      className
    ),
    "data-overflow-shadow": overflowShadow
  }
)), Link = forwardRef(({ as, className, ...props }, ref) => /* @__PURE__ */ jsx(
  as || "a",
  {
    ...props,
    ref,
    draggable: !1,
    className: cn(
      "font-base cursor-pointer whitespace-nowrap break-all text-sm font-extrabold uppercase leading-none transition-colors hover:text-primary active:text-primary md:text-base",
      className
    )
  }
)), header = Object.assign(Header, {
  displayName: "Nordstar.Header",
  Logo: Object.assign(Logo, {
    displayName: "Nordstar.Header.Logo"
  }),
  Menu: Object.assign(Menu, {
    displayName: "Nordstar.Header.Menu",
    Link: Object.assign(Link, {
      displayName: "Nordstar.Header.Menu.Link"
    })
  })
});
export {
  header as default
};
//# sourceMappingURL=header.js.map