@ubx/docs-ui 0.6.0 → 0.7.0

package/dist/Header.d.ts

@@ -8,7 +8,7 @@ export type SectionTab = {
     label: string;
     href: string;
 };
-export declare function Header({ nav, tabs, activeTab, mobileMenu, search, }: {
+export declare function Header({ nav, tabs, activeTab, mobileMenu, search, showThemeToggle, }: {
     nav: NavLink[];
     /** Omit entirely for a single-tier header, which is the provider site. */
     tabs?: SectionTab[];
@@ -25,4 +25,17 @@ export declare function Header({ nav, tabs, activeTab, mobileMenu, search, }: {
      * search at all.
      */
     search?: React.ReactNode;
+    /**
+     * Render the theme toggle. Default true, which is every docs site.
+     *
+     * ubiquex-web opts out because it is dark-only: it defines no light
+     * palette and no [data-theme] rules, so a toggle there would switch
+     * between dark and dark. Shipping a control that does nothing is worse
+     * than not shipping it.
+     *
+     * This is a recorded compromise, not a design position. The real fix
+     * is a light palette for that site, at which point this prop should go
+     * away rather than being set to true.
+     */
+    showThemeToggle?: boolean;
 }): import("react").JSX.Element;

package/dist/Header.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Link from "next/link";
 import { ThemeToggle } from "./ThemeToggle";
-export function Header({ nav, tabs, activeTab, mobileMenu, search, }) {
+export function Header({ nav, tabs, activeTab, mobileMenu, search, showThemeToggle = true, }) {
     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, _jsx(ThemeToggle, {})] }), 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, 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) => {
                         // 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/PageShell.d.ts

@@ -49,6 +49,8 @@ export type PageShellProps = {
      * heading in `children` as normal.
      */
     intro?: React.ReactNode;
+    /** See Header's own showThemeToggle. Default true. */
+    showThemeToggle?: boolean;
     /** Footer identity. Required for the reason stated on Footer itself. */
     footer: {
         tagline: React.ReactNode;
@@ -59,7 +61,7 @@ export type PageShellProps = {
     };
     children: React.ReactNode;
 };
-export declare function PageShell({ nav, tabs, activeTab, sidebar, sidebarLabel, searchPlaceholder, searchPlacement, intro, footer, children, }: PageShellProps): React.JSX.Element;
+export declare function PageShell({ nav, tabs, activeTab, sidebar, sidebarLabel, searchPlaceholder, searchPlacement, intro, showThemeToggle, footer, children, }: PageShellProps): React.JSX.Element;
 /**
  * Sets data-theme from localStorage before paint.
  *

package/dist/PageShell.js

@@ -9,10 +9,10 @@ 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, footer, children, }) {
+export function PageShell({ nav, tabs, activeTab, sidebar, sidebarLabel = "Navigation", searchPlaceholder, searchPlacement = "header", intro, showThemeToggle = true, 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, mobileMenu: sidebar ? (_jsx(MobileSidebarToggle, { label: sidebarLabel, children: sidebar })) : undefined }), sidebar ? (
+    return (_jsxs(_Fragment, { children: [_jsx(Header, { nav: nav, tabs: tabs, activeTab: activeTab, search: headerSearch, showThemeToggle: showThemeToggle, 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 })] }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ubx/docs-ui",
-  "version": "0.6.0",
+  "version": "0.7.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",