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

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

import "react";
import { jsx as o } from "react/jsx-runtime";
import { Card as l } from "@nordcom/nordstar-card";
import { forwardRef as i, cn as s } from "@nordcom/nordstar-system";
import { View as d } from "@nordcom/nordstar-view";
const c = ({ sticky: e = !0, className: a, children: r, ...t }) => /* @__PURE__ */ o(
  l,
  {
    ...t,
    as: "header",
    borderless: !0,
    className: s(
      "[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",
      e && "sticky inset-0 bottom-auto z-40 border-0 border-b-2 border-solid border-background-highlight",
      a
    ),
    "data-sticky": e,
    children: /* @__PURE__ */ o(
      d,
      {
        as: "div",
        className: s(
          "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: r
      }
    )
  }
), m = i(({ as: e, className: a, ...r }, t) => /* @__PURE__ */ o(
  e || "section",
  {
    ...r,
    ref: t,
    draggable: !1,
    className: s(
      "text-lg font-extrabold uppercase *:h-full *:object-contain *:object-left [&>a]:transition-colors [&>a]:hover:text-primary",
      a
    )
  }
)), u = i(({ as: e, className: a, overflowShadow: r = !0, ...t }, n) => /* @__PURE__ */ o(
  e || "nav",
  {
    ...t,
    ref: n,
    draggable: !1,
    className: s(
      "md:overflow-x flex w-full touch-auto select-none items-center gap-6 overflow-x-auto scroll-smooth py-3 md:justify-end",
      r && "animate-scroll-shadow-inset [animation-timeline:scroll(self_inline)]",
      a
    ),
    "data-overflow-shadow": r
  }
)), b = i(({ as: e, className: a, ...r }, t) => /* @__PURE__ */ o(
  e || "a",
  {
    ...r,
    ref: t,
    draggable: !1,
    className: s(
      "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",
      a
    )
  }
)), N = Object.assign(c, {
  displayName: "Nordstar.Header",
  Logo: Object.assign(m, {
    displayName: "Nordstar.Header.Logo"
  }),
  Menu: Object.assign(u, {
    displayName: "Nordstar.Header.Menu",
    Link: Object.assign(b, {
      displayName: "Nordstar.Header.Menu.Link"
    })
  })
});
export {
  N as default
};
//# sourceMappingURL=header.js.map