@ubx/docs-ui 0.8.0 → 0.10.0

package/dist/Header.js

@@ -1,13 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Link from "next/link";
 import { ThemeToggle } from "./ThemeToggle";
+import { MobileNav } from "./MobileNav";
 export function Header({ nav, tabs, activeTab, mobileMenu, search, showThemeToggle = true, githubUrl, }) {
     return (_jsxs("header", { className: "border-b border-border bg-background", children: [_jsxs("div", { className: "relative mx-auto flex max-w-7xl items-center gap-3 px-6 py-4", children: [mobileMenu, _jsxs(Link, { href: "/", className: "flex shrink-0 items-center", children: [_jsx("img", { src: "/logo/logo.png", alt: "ubx", className: "logo-light h-6 w-auto" }), _jsx("img", { src: "/logo/logo-dark.png", alt: "ubx", className: "logo-dark h-6 w-auto" })] }), _jsx("div", { className: "flex-1" }), _jsx("nav", { className: "absolute left-1/2 hidden -translate-x-1/2 items-center gap-5 md:flex", children: nav.map((item) => {
                             const className = item.current
                                 ? "text-sm text-primary"
                                 : "text-sm text-foreground-muted hover:text-primary";
                             return item.href.startsWith("/") ? (_jsx(Link, { href: item.href, className: className, children: item.label }, item.label)) : (_jsx("a", { href: item.href, className: className, children: item.label }, item.label));
-                        }) }), search ? _jsx("div", { className: "w-40 shrink-0 sm:w-56 lg:w-64", children: search }) : null, githubUrl ? (_jsxs("a", { href: githubUrl, className: "hidden shrink-0 items-center gap-1.5 rounded-full border border-border px-3 py-1.5 text-sm text-foreground-muted transition-colors hover:border-primary hover:text-primary sm:flex", children: [_jsx("svg", { viewBox: "0 0 16 16", width: "15", height: "15", fill: "currentColor", "aria-hidden": "true", children: _jsx("path", { d: "M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8Z" }) }), "Star us on GitHub"] })) : null, showThemeToggle ? _jsx(ThemeToggle, {}) : null] }), tabs && tabs.length > 0 ? (_jsx("div", { className: "mx-auto max-w-7xl px-6", children: _jsx("nav", { className: "flex gap-6 overflow-x-auto", children: tabs.map((tab) => {
+                        }) }), search ? _jsx("div", { className: "w-40 shrink-0 sm:w-56 lg:w-64", children: search }) : null, githubUrl ? (_jsxs("a", { href: githubUrl, className: "hidden shrink-0 items-center gap-2 rounded-full bg-primary px-4 py-[7px] text-sm text-primary-foreground transition-opacity hover:opacity-90 sm:flex", children: [_jsx("svg", { viewBox: "0 0 16 16", width: "16", height: "16", fill: "currentColor", "aria-hidden": "true", children: _jsx("path", { d: "M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8Z" }) }), "Star us on GitHub"] })) : null, showThemeToggle ? _jsx(ThemeToggle, {}) : null, _jsx(MobileNav, { nav: nav, githubUrl: githubUrl })] }), tabs && tabs.length > 0 ? (_jsx("div", { className: "mx-auto max-w-7xl px-6", children: _jsx("nav", { className: "flex gap-6 overflow-x-auto", children: tabs.map((tab) => {
                         // Prefix match, so /concepts/ledger keeps the Concepts tab
                         // lit rather than only the exact section index.
                         const active = activeTab === tab.href || activeTab?.startsWith(tab.href + "/");

package/dist/MobileNav.d.ts

@@ -0,0 +1,5 @@
+import type { NavLink } from "./Header";
+export declare function MobileNav({ nav, githubUrl }: {
+    nav: NavLink[];
+    githubUrl?: string;
+}): import("react").JSX.Element;

package/dist/MobileNav.js

@@ -0,0 +1,41 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import Link from "next/link";
+import { useEffect, useState } from "react";
+// The header's destination nav is `hidden md:flex`, so below 768px it was
+// simply gone. Measured on all three sites: navDisplay "none", and the
+// only visible header link was the logo. There was no route to Install,
+// Documentation, Tutorials, Providers or Blog on a phone, anywhere.
+//
+// Same two-state open/close as MobileSidebarToggle, and for the same
+// reason: closing flips `visible` immediately so the transition can play,
+// and the drawer only leaves the DOM once it has had time to finish.
+const TRANSITION_MS = 200;
+export function MobileNav({ nav, githubUrl }) {
+    const [mounted, setMounted] = useState(false);
+    const [visible, setVisible] = useState(false);
+    useEffect(() => {
+        if (!mounted)
+            return;
+        // Escape closes it. A drawer with no keyboard exit is a trap for
+        // anyone not using a pointer.
+        const onKey = (e) => {
+            if (e.key === "Escape")
+                close();
+        };
+        document.addEventListener("keydown", onKey);
+        return () => document.removeEventListener("keydown", onKey);
+    }, [mounted]);
+    function open() {
+        setMounted(true);
+        requestAnimationFrame(() => requestAnimationFrame(() => setVisible(true)));
+    }
+    function close() {
+        setVisible(false);
+        setTimeout(() => setMounted(false), TRANSITION_MS);
+    }
+    return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", onClick: open, "aria-label": "Open navigation", "aria-expanded": mounted, className: "flex h-9 w-9 shrink-0 items-center justify-center rounded text-foreground-muted hover:bg-surface hover:text-primary md:hidden", children: _jsx("svg", { viewBox: "0 0 20 20", width: "20", height: "20", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M3 5.5h14M3 10h14M3 14.5h14", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round" }) }) }), mounted && (_jsxs("div", { role: "dialog", "aria-modal": "true", "aria-label": "Navigation", className: "fixed inset-0 z-50 md:hidden", children: [_jsx("button", { type: "button", "aria-label": "Close navigation", onClick: close, className: "absolute inset-0 bg-foreground/40 transition-opacity duration-200 motion-reduce:transition-none " +
+                            (visible ? "opacity-100" : "opacity-0") }), _jsxs("div", { className: "absolute inset-y-0 right-0 flex w-72 max-w-[85vw] flex-col gap-1 overflow-y-auto bg-background p-5 shadow-lg " +
+                            "transition-transform duration-200 ease-out motion-reduce:transition-none " +
+                            (visible ? "translate-x-0" : "translate-x-full"), children: [_jsx("button", { type: "button", onClick: close, "aria-label": "Close navigation", className: "mb-3 flex h-8 w-8 items-center justify-center self-end rounded text-foreground-muted hover:bg-surface hover:text-primary", children: _jsx("svg", { viewBox: "0 0 16 16", width: "16", height: "16", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M4 4l8 8M12 4l-8 8", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round" }) }) }), nav.map((item) => item.href.startsWith("/") ? (_jsx(Link, { href: item.href, onClick: close, className: item.current ? "py-2 text-primary" : "py-2 text-foreground-muted hover:text-primary", children: item.label }, item.label)) : (_jsx("a", { href: item.href, onClick: close, className: item.current ? "py-2 text-primary" : "py-2 text-foreground-muted hover:text-primary", children: item.label }, item.label))), githubUrl ? (_jsx("a", { href: githubUrl, className: "mt-3 rounded-full bg-primary px-4 py-2 text-center text-sm text-primary-foreground", children: "Star us on GitHub" })) : null] })] }))] }));
+}

package/dist/PageShell.d.ts

@@ -53,6 +53,19 @@ export type PageShellProps = {
     showThemeToggle?: boolean;
     /** See Header's own githubUrl. Omitted means no button. */
     githubUrl?: string;
+    /**
+     * Render children edge to edge, with no centred, padded main column.
+     *
+     * The default wraps children in `mx-auto max-w-7xl px-6 py-12`, which
+     * is right for a docs page and wrong for a page built from full bleed
+     * tone bands: it caps every band at 1280px and insets it 24px, so the
+     * bands stop reaching the viewport edges and the alternating tones
+     * read as boxes rather than bands.
+     *
+     * ubiquex.io's home page is built that way, so it opts out and owns
+     * its own inner width. Both docs sites are unaffected.
+     */
+    fullBleed?: boolean;
     /** Footer identity. Required for the reason stated on Footer itself. */
     footer: {
         tagline: React.ReactNode;
@@ -63,7 +76,7 @@ export type PageShellProps = {
     };
     children: React.ReactNode;
 };
-export declare function PageShell({ nav, tabs, activeTab, sidebar, sidebarLabel, searchPlaceholder, searchPlacement, intro, showThemeToggle, githubUrl, footer, children, }: PageShellProps): React.JSX.Element;
+export declare function PageShell({ nav, tabs, activeTab, sidebar, sidebarLabel, searchPlaceholder, searchPlacement, intro, showThemeToggle, githubUrl, fullBleed, footer, children, }: PageShellProps): React.JSX.Element;
 /**
  * Sets data-theme from localStorage before paint.
  *

package/dist/PageShell.js

@@ -9,13 +9,13 @@ const HEADER_SEARCH_CLASS = "w-full rounded-full bg-field px-4 py-1.5 text-sm te
 /** Full size, for a landing page where search is the point. */
 const HERO_SEARCH_CLASS = "w-full rounded-full bg-field px-5 py-3 text-base text-foreground outline-none " +
     "placeholder:text-foreground-muted focus:ring-2 focus:ring-primary/30";
-export function PageShell({ nav, tabs, activeTab, sidebar, sidebarLabel = "Navigation", searchPlaceholder, searchPlacement = "header", intro, showThemeToggle = true, githubUrl, footer, children, }) {
+export function PageShell({ nav, tabs, activeTab, sidebar, sidebarLabel = "Navigation", searchPlaceholder, searchPlacement = "header", intro, showThemeToggle = true, githubUrl, fullBleed = false, footer, children, }) {
     const headerSearch = searchPlaceholder && searchPlacement === "header" ? (_jsx(GlobalSearch, { placeholder: searchPlaceholder, inputClassName: HEADER_SEARCH_CLASS })) : undefined;
     const heroSearch = searchPlaceholder && searchPlacement === "hero" ? (_jsx("div", { className: "mx-auto mt-8 max-w-xl", children: _jsx(GlobalSearch, { placeholder: searchPlaceholder, inputClassName: HERO_SEARCH_CLASS }) })) : null;
     return (_jsxs(_Fragment, { children: [_jsx(Header, { nav: nav, tabs: tabs, activeTab: activeTab, search: headerSearch, showThemeToggle: showThemeToggle, githubUrl: githubUrl, mobileMenu: sidebar ? (_jsx(MobileSidebarToggle, { label: sidebarLabel, children: sidebar })) : undefined }), sidebar ? (
             // No intro or hero search here on purpose: a page with a sidebar
             // is a content page, and a hero belongs to a landing page.
-            _jsxs("div", { className: "mx-auto flex w-full max-w-7xl flex-1 gap-10 px-6 py-10", children: [_jsx("aside", { className: "hidden w-64 shrink-0 lg:block", children: sidebar }), _jsx("main", { className: "min-w-0 flex-1", children: children })] })) : (_jsxs("main", { className: "mx-auto w-full max-w-7xl flex-1 px-6 py-12", children: [intro, heroSearch, children] })), _jsx(Footer, { tagline: footer.tagline, links: footer.links })] }));
+            _jsxs("div", { className: "mx-auto flex w-full max-w-7xl flex-1 gap-10 px-6 py-10", children: [_jsx("aside", { className: "hidden w-64 shrink-0 lg:block", children: sidebar }), _jsx("main", { className: "min-w-0 flex-1", children: children })] })) : fullBleed ? (_jsxs("main", { className: "flex-1", children: [intro, heroSearch, children] })) : (_jsxs("main", { className: "mx-auto w-full max-w-7xl flex-1 px-6 py-12", children: [intro, heroSearch, children] })), _jsx(Footer, { tagline: footer.tagline, links: footer.links })] }));
 }
 /**
  * Sets data-theme from localStorage before paint.

package/dist/index.d.ts

@@ -10,3 +10,4 @@ export { Footer } from "./Footer";
 export { MobileSidebarToggle } from "./MobileSidebarToggle";
 export { PageShell, THEME_INIT_SCRIPT } from "./PageShell";
 export type { PageShellProps } from "./PageShell";
+export { MobileNav } from "./MobileNav";

package/dist/index.js

@@ -15,3 +15,4 @@ export { ThemeToggle } from "./ThemeToggle";
 export { Footer } from "./Footer";
 export { MobileSidebarToggle } from "./MobileSidebarToggle";
 export { PageShell, THEME_INIT_SCRIPT } from "./PageShell";
+export { MobileNav } from "./MobileNav";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ubx/docs-ui",
-  "version": "0.8.0",
+  "version": "0.10.0",
   "description": "Shared UI for ubx documentation sites: the page shell, theme A, Shiki-backed CodeBlock, header, search, theme toggle.",
   "license": "Apache-2.0",
   "type": "module",