@publish.os/nextjs 0.0.1-alpha.2 → 0.0.1-alpha.4

package/dist/kernel/components/blocks/navbar.d.cts

@@ -0,0 +1,16 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { LogoBlockLogo, LogoBlockAsset } from './logo-block.cjs';
+import { SiteData, TreeNode } from '@publish.os/nextjs/types';
+
+type NavbarProps = {
+    logo?: NavbarLogo;
+    site?: SiteData;
+    siteTitle?: string;
+    tree: TreeNode[];
+    showThemeToggle?: boolean;
+};
+type NavbarLogoAsset = LogoBlockAsset;
+type NavbarLogo = LogoBlockLogo;
+declare function Navbar({ logo, site, siteTitle, showThemeToggle, tree, }: NavbarProps): react_jsx_runtime.JSX.Element;
+
+export { Navbar, type NavbarLogo, type NavbarLogoAsset };

package/dist/kernel/components/blocks/navbar.d.ts

@@ -0,0 +1,16 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { LogoBlockLogo, LogoBlockAsset } from './logo-block.js';
+import { SiteData, TreeNode } from '@publish.os/nextjs/types';
+
+type NavbarProps = {
+    logo?: NavbarLogo;
+    site?: SiteData;
+    siteTitle?: string;
+    tree: TreeNode[];
+    showThemeToggle?: boolean;
+};
+type NavbarLogoAsset = LogoBlockAsset;
+type NavbarLogo = LogoBlockLogo;
+declare function Navbar({ logo, site, siteTitle, showThemeToggle, tree, }: NavbarProps): react_jsx_runtime.JSX.Element;
+
+export { Navbar, type NavbarLogo, type NavbarLogoAsset };

package/dist/kernel/components/blocks/navbar.js

@@ -0,0 +1,122 @@
+"use client";
+
+// src/kernel/components/blocks/navbar.tsx
+import {
+  LogoBlock
+} from "./logo-block.js";
+import { NavBreadcrumb } from "./nav-breadcrumb.js";
+import { Search } from "./search.js";
+import { ThemeToggle } from "./theme-toggle.js";
+import { Link } from "../ui/link.js";
+
+// src/utils/cn.ts
+import { clsx } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+var twMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      z: [
+        "z-content",
+        "z-nav",
+        "z-overlay",
+        "z-modal",
+        "z-search",
+        "z-toast",
+        "z-progress"
+      ]
+    }
+  }
+});
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/kernel/components/blocks/navbar.tsx
+import { ArrowRight } from "lucide-react";
+import NextLink from "next/link";
+import { usePathname } from "next/navigation";
+import { jsx, jsxs } from "react/jsx-runtime";
+function hasPath(node) {
+  return "path" in node && typeof node.path === "string";
+}
+function isTopLevelGroup(node) {
+  return node.type === "section" && typeof node.group === "string" && !node.group.includes("/");
+}
+function Navbar({
+  logo,
+  site,
+  siteTitle,
+  showThemeToggle = true,
+  tree
+}) {
+  const pathname = usePathname() || "/";
+  const headerSite = site ?? { name: siteTitle ?? "Site" };
+  const groups = tree.filter(hasPath).filter(isTopLevelGroup);
+  const activeGroupPath = groups.map((group) => group.path).filter((path) => pathname === path || pathname.startsWith(`${path}/`)).sort((a, b) => b.length - a.length)[0];
+  return /* @__PURE__ */ jsx("header", { className: "sticky top-0 z-nav border-b border-stroke-3 bg-surface-2 [anchor-name:--global-navbar]", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto flex min-h-[var(--layout-global-nav-height)] w-full max-w-(--layout-site-max-width) flex-col gap-3 border-x border-stroke-3 px-5 py-3 md:flex-row md:items-center md:gap-4 md:py-2 lg:px-6", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [
+      /* @__PURE__ */ jsx(
+        NextLink,
+        {
+          "aria-label": `${headerSite.name} home`,
+          className: "inline-flex h-8 shrink-0 items-center text-sm font-semibold text-foreground-1 transition-colors hover:text-accent-1 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent-1",
+          href: "/",
+          children: /* @__PURE__ */ jsx(LogoBlock, { logo, siteName: headerSite.name })
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "hidden h-4 w-px shrink-0 bg-stroke-3 md:block" }),
+      /* @__PURE__ */ jsx("div", { className: "min-w-0", children: /* @__PURE__ */ jsx(
+        NavBreadcrumb,
+        {
+          currentPath: pathname,
+          showRoot: false,
+          site: headerSite,
+          tree
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-wrap items-center justify-end gap-2", children: [
+      groups.length > 0 ? /* @__PURE__ */ jsx(
+        "nav",
+        {
+          "aria-label": "Groups",
+          className: "flex min-w-0 flex-wrap items-center gap-2 text-sm",
+          children: groups.map((group) => {
+            const path = group.path;
+            const active = path === activeGroupPath;
+            return /* @__PURE__ */ jsx(
+              Link,
+              {
+                active,
+                className: cn(
+                  "px-1 text-foreground-2",
+                  active && "text-foreground-1"
+                ),
+                href: path,
+                size: "sm",
+                variant: "link.standalone",
+                children: group.title
+              },
+              group.type === "page" ? group.fileID : group.id
+            );
+          })
+        }
+      ) : null,
+      /* @__PURE__ */ jsx(Search.DefaultDesktop, {}),
+      /* @__PURE__ */ jsx(
+        Link,
+        {
+          href: "/",
+          rightIcon: /* @__PURE__ */ jsx(ArrowRight, { "aria-hidden": "true", size: 14 }),
+          size: "sm",
+          variant: "button.primary",
+          children: "Start"
+        }
+      ),
+      showThemeToggle ? /* @__PURE__ */ jsx(ThemeToggle, {}) : null
+    ] })
+  ] }) });
+}
+export {
+  Navbar
+};