@evinvest/uikit 0.4.0 → 0.5.0

package/dist/index.d.ts

@@ -344,6 +344,8 @@ interface HeaderNavItem {
     label: string;
     href: string;
 }
+/** Chrome density preset — see the `variant` prop on {@link HeaderProps}. */
+type HeaderVariant = "marketing" | "compact";
 interface HeaderProps {
     nav: readonly HeaderNavItem[];
     /** Right-side call-to-action slot; also re-rendered at the mobile menu's bottom. */
@@ -354,8 +356,20 @@ interface HeaderProps {
     homeHref?: string;
     className?: string;
     linkComponent?: React.ElementType;
+    /**
+     * Chrome density, per host surface.
+     * - `"marketing"` (default): the scroll-aware bar — tall and transparent over a
+     *   hero, condensing to an opaque blurred bar past 50px.
+     * - `"compact"`: a fixed short, opaque bar for app surfaces (e.g. the cabinet)
+     *   whose content sits directly beneath it — no scroll growth, so a sticky
+     *   sidebar can butt flush against a known 4rem height.
+     */
+    variant?: HeaderVariant;
+    /** Drop the primary nav — the desktop row and the mobile menu — keeping only the
+     *  lockup and CTA. The lockup still links home. */
+    hideNav?: boolean;
 }
-declare function Header({ nav, cta, mobileCta, tagline, homeHref, className, linkComponent, }: HeaderProps): React.JSX.Element;
+declare function Header({ nav, cta, mobileCta, tagline, homeHref, className, linkComponent, variant, hideNav, }: HeaderProps): React.JSX.Element;
 
 declare function Input({ className, type, ...props }: React.ComponentProps<"input">): React.JSX.Element;
 

package/dist/index.js

@@ -1183,25 +1183,37 @@ function Header({
   tagline = "Quy Nhon Fund",
   homeHref = "/",
   className,
-  linkComponent
+  linkComponent,
+  variant = "marketing",
+  hideNav = false
 }) {
   const L = linkComponent ?? "a";
+  const compact = variant === "compact";
   const [hasScrolled, setHasScrolled] = React23.useState(false);
   React23.useEffect(() => {
+    if (compact) return;
     const handleScroll = () => setHasScrolled(window.scrollY > 50);
     window.addEventListener("scroll", handleScroll);
     return () => window.removeEventListener("scroll", handleScroll);
-  }, []);
+  }, [compact]);
   return /* @__PURE__ */ jsx14(
     "header",
     {
       "data-slot": "header",
+      "data-variant": variant,
       className: cn(
-        "fixed top-0 left-0 w-full z-[60] transition-all duration-500 border-b",
-        hasScrolled ? "bg-main-black/90 backdrop-blur-md border-main-mist/10 py-4" : "bg-transparent border-transparent py-6",
+        "fixed top-0 left-0 w-full z-[60] border-b",
+        compact ? (
+          // Fixed 4rem bar (py-3 + the 40px lockup): opaque by default so app
+          // content beneath it never bleeds through.
+          "h-16 bg-main-black/90 backdrop-blur-md border-main-mist/10"
+        ) : cn(
+          "transition-all duration-500",
+          hasScrolled ? "bg-main-black/90 backdrop-blur-md border-main-mist/10 py-4" : "bg-transparent border-transparent py-6"
+        ),
         className
       ),
-      children: /* @__PURE__ */ jsxs4(Container, { className: "flex items-center justify-between gap-4", children: [
+      children: /* @__PURE__ */ jsxs4(Container, { className: "flex h-full items-center justify-between gap-4", children: [
         /* @__PURE__ */ jsxs4(
           L,
           {
@@ -1217,7 +1229,7 @@ function Header({
             ]
           }
         ),
-        /* @__PURE__ */ jsx14("nav", { className: "hidden lg:flex items-center gap-6 font-mono-tech text-xs tracking-widest uppercase", children: nav.map((item) => /* @__PURE__ */ jsx14(
+        !hideNav && /* @__PURE__ */ jsx14("nav", { className: "hidden lg:flex items-center gap-6 font-mono-tech text-xs tracking-widest uppercase", children: nav.map((item) => /* @__PURE__ */ jsx14(
           L,
           {
             href: item.href,
@@ -1228,7 +1240,7 @@ function Header({
         )) }),
         /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-3", children: [
           cta,
-          /* @__PURE__ */ jsx14(MobileMenu, { nav, cta: mobileCta ?? cta, linkComponent: L })
+          !hideNav && /* @__PURE__ */ jsx14(MobileMenu, { nav, cta: mobileCta ?? cta, linkComponent: L })
         ] })
       ] })
     }