@tuwaio/docs-ui 0.5.6 → 0.5.7

package/dist/components/Logo.cjs

@@ -58,7 +58,7 @@ function SiteLogo({
             alt: "TUWA",
             width,
             height,
-            className: "tuwadocs:block tuwadocs:dark:hidden tuwadocs:h-auto tuwadocs:transition-opacity tuwadocs:duration-300",
+            className: "tuwadocs:block tuwadocs:dark:hidden tuwadocs:h-auto tuwadocs:max-w-none tuwadocs:transition-opacity tuwadocs:duration-300",
             style: { width: `${width}px`, height: "auto" },
             loading: "eager",
             decoding: "async"
@@ -71,7 +71,7 @@ function SiteLogo({
             alt: "TUWA",
             width,
             height,
-            className: "tuwadocs:hidden tuwadocs:dark:block tuwadocs:h-auto tuwadocs:transition-opacity tuwadocs:duration-300",
+            className: "tuwadocs:hidden tuwadocs:dark:block tuwadocs:h-auto tuwadocs:max-w-none tuwadocs:transition-opacity tuwadocs:duration-300",
             style: {
               width: `${width}px`,
               height: "auto",

package/dist/components/Logo.d.cts

@@ -20,6 +20,9 @@ interface SiteLogoProps {
  * Using standalone <img> tags isolates each SVG document context, completely avoiding
  * WebKit/Safari SVG ID collision and gradient-rendering bugs.
  * Pure presentation element with no event handlers, ensuring it can safely cross Server/Client component boundaries.
+ *
+ * The logo keeps its `width` in a narrow flex row: the images opt out of the `max-width: 100%` of Tailwind's base
+ * styles, which let the logo link of the Nextra navbar shrink below the logo, so the logo painted over the next items.
  */
 declare function SiteLogo({ width, height, className, lightSrc, darkSrc, }: SiteLogoProps): react__default.JSX.Element;
 declare const TuwaLogo: typeof SiteLogo;

package/dist/components/Logo.d.ts

@@ -20,6 +20,9 @@ interface SiteLogoProps {
  * Using standalone <img> tags isolates each SVG document context, completely avoiding
  * WebKit/Safari SVG ID collision and gradient-rendering bugs.
  * Pure presentation element with no event handlers, ensuring it can safely cross Server/Client component boundaries.
+ *
+ * The logo keeps its `width` in a narrow flex row: the images opt out of the `max-width: 100%` of Tailwind's base
+ * styles, which let the logo link of the Nextra navbar shrink below the logo, so the logo painted over the next items.
  */
 declare function SiteLogo({ width, height, className, lightSrc, darkSrc, }: SiteLogoProps): react__default.JSX.Element;
 declare const TuwaLogo: typeof SiteLogo;

package/dist/components/Logo.js

@@ -23,7 +23,7 @@ function SiteLogo({
             alt: "TUWA",
             width,
             height,
-            className: "tuwadocs:block tuwadocs:dark:hidden tuwadocs:h-auto tuwadocs:transition-opacity tuwadocs:duration-300",
+            className: "tuwadocs:block tuwadocs:dark:hidden tuwadocs:h-auto tuwadocs:max-w-none tuwadocs:transition-opacity tuwadocs:duration-300",
             style: { width: `${width}px`, height: "auto" },
             loading: "eager",
             decoding: "async"
@@ -36,7 +36,7 @@ function SiteLogo({
             alt: "TUWA",
             width,
             height,
-            className: "tuwadocs:hidden tuwadocs:dark:block tuwadocs:h-auto tuwadocs:transition-opacity tuwadocs:duration-300",
+            className: "tuwadocs:hidden tuwadocs:dark:block tuwadocs:h-auto tuwadocs:max-w-none tuwadocs:transition-opacity tuwadocs:duration-300",
             style: {
               width: `${width}px`,
               height: "auto",

package/dist/components/NavBar.cjs

@@ -26,20 +26,21 @@ var import_utils = require("@tuwaio/nova-core/utils");
 var import_nextra_theme_docs = require("nextra-theme-docs");
 var import_utils2 = require("../utils");
 function Navbar({ links, logo, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_nextra_theme_docs.Navbar, { logo, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tuwadocs:flex tuwadocs:items-center tuwadocs:gap-3", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_nextra_theme_docs.Navbar, { logo, className: "tuwadocs:[&>:first-child]:shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tuwadocs:flex tuwadocs:shrink-0 tuwadocs:items-center tuwadocs:gap-3", children: [
     (links ?? import_utils2.baseNavLinks).map(({ title, href, image, className }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       "a",
       {
         href,
         target: "_blank",
         rel: "noopener noreferrer",
+        title,
         className: (0, import_utils.cn)(
-          "tuwadocs:hidden tuwadocs:sm:flex tuwadocs:items-center tuwadocs:gap-1 tuwadocs:px-3 tuwadocs:py-1.5 tuwadocs:text-sm tuwadocs:font-medium tuwadocs:transition-colors tuwadocs:text-[var(--tuwa-text-primary)]",
+          "tuwadocs:hidden tuwadocs:sm:flex tuwadocs:items-center tuwadocs:gap-1 tuwadocs:px-3 tuwadocs:py-1.5 tuwadocs:text-sm tuwadocs:font-medium tuwadocs:whitespace-nowrap tuwadocs:transition-colors tuwadocs:text-[var(--tuwa-text-primary)]",
           className
         ),
         children: [
           image,
-          title
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "tuwadocs:sr-only tuwadocs:lg:not-sr-only", children: title })
         ]
       },
       title

package/dist/components/NavBar.d.cts

@@ -5,7 +5,7 @@ import { ReactNode } from 'react';
  * A link to an external page, rendered with its icon by {@link Navbar} and {@link Footer}. Links open in a new tab.
  */
 type SocialLink = {
-    /** Text of the link (hidden on small screens) */
+    /** Text of the link; {@link Navbar} shows it from 1024px wide and keeps it as the accessible name and tooltip below */
     title: string;
     /** Absolute URL of the page */
     href: string;
@@ -27,7 +27,12 @@ interface NavProps {
 }
 /**
  * The navbar of a TUWA documentation site: the `Navbar` of `nextra-theme-docs` with the logo and a row of external
- * links, hidden on small screens. Render it in the `navbar` prop of the Nextra `Layout`.
+ * links. Render it in the `navbar` prop of the Nextra `Layout`.
+ *
+ * The row stays on one line of the 64px Nextra header from 320px wide: the links are hidden below 640px and show only
+ * their icons below 1024px, so the Nextra search, the top-level pages and `children` such as {@link LocaleSwitcher}
+ * keep their room. The logo never shrinks; the top-level pages of Nextra scroll instead. Below 768px the stylesheet
+ * (`dist/index.css`) makes the header opaque in the theme background, so the page never shows through it.
  *
  * @param props - See {@link NavProps}.
  * @returns The navbar.

package/dist/components/NavBar.d.ts

@@ -5,7 +5,7 @@ import { ReactNode } from 'react';
  * A link to an external page, rendered with its icon by {@link Navbar} and {@link Footer}. Links open in a new tab.
  */
 type SocialLink = {
-    /** Text of the link (hidden on small screens) */
+    /** Text of the link; {@link Navbar} shows it from 1024px wide and keeps it as the accessible name and tooltip below */
     title: string;
     /** Absolute URL of the page */
     href: string;
@@ -27,7 +27,12 @@ interface NavProps {
 }
 /**
  * The navbar of a TUWA documentation site: the `Navbar` of `nextra-theme-docs` with the logo and a row of external
- * links, hidden on small screens. Render it in the `navbar` prop of the Nextra `Layout`.
+ * links. Render it in the `navbar` prop of the Nextra `Layout`.
+ *
+ * The row stays on one line of the 64px Nextra header from 320px wide: the links are hidden below 640px and show only
+ * their icons below 1024px, so the Nextra search, the top-level pages and `children` such as {@link LocaleSwitcher}
+ * keep their room. The logo never shrinks; the top-level pages of Nextra scroll instead. Below 768px the stylesheet
+ * (`dist/index.css`) makes the header opaque in the theme background, so the page never shows through it.
  *
  * @param props - See {@link NavProps}.
  * @returns The navbar.

package/dist/components/NavBar.js

@@ -3,20 +3,21 @@ import { cn } from "@tuwaio/nova-core/utils";
 import { Navbar as NextraNavbar } from "nextra-theme-docs";
 import { baseNavLinks } from "../utils";
 function Navbar({ links, logo, children }) {
-  return /* @__PURE__ */ jsx(NextraNavbar, { logo, children: /* @__PURE__ */ jsxs("div", { className: "tuwadocs:flex tuwadocs:items-center tuwadocs:gap-3", children: [
+  return /* @__PURE__ */ jsx(NextraNavbar, { logo, className: "tuwadocs:[&>:first-child]:shrink-0", children: /* @__PURE__ */ jsxs("div", { className: "tuwadocs:flex tuwadocs:shrink-0 tuwadocs:items-center tuwadocs:gap-3", children: [
     (links ?? baseNavLinks).map(({ title, href, image, className }) => /* @__PURE__ */ jsxs(
       "a",
       {
         href,
         target: "_blank",
         rel: "noopener noreferrer",
+        title,
         className: cn(
-          "tuwadocs:hidden tuwadocs:sm:flex tuwadocs:items-center tuwadocs:gap-1 tuwadocs:px-3 tuwadocs:py-1.5 tuwadocs:text-sm tuwadocs:font-medium tuwadocs:transition-colors tuwadocs:text-[var(--tuwa-text-primary)]",
+          "tuwadocs:hidden tuwadocs:sm:flex tuwadocs:items-center tuwadocs:gap-1 tuwadocs:px-3 tuwadocs:py-1.5 tuwadocs:text-sm tuwadocs:font-medium tuwadocs:whitespace-nowrap tuwadocs:transition-colors tuwadocs:text-[var(--tuwa-text-primary)]",
           className
         ),
         children: [
           image,
-          title
+          /* @__PURE__ */ jsx("span", { className: "tuwadocs:sr-only tuwadocs:lg:not-sr-only", children: title })
         ]
       },
       title

package/dist/index.css

@@ -849,6 +849,9 @@ html {
   .tuwadocs\:w-full {
     width: 100%;
   }
+  .tuwadocs\:max-w-none {
+    max-width: none;
+  }
   .tuwadocs\:min-w-0 {
     min-width: 0px;
   }
@@ -1164,6 +1167,9 @@ html {
     --tw-tracking: var(--tuwadocs-tracking-widest);
     letter-spacing: var(--tuwadocs-tracking-widest);
   }
+  .tuwadocs\:whitespace-nowrap {
+    white-space: nowrap;
+  }
   .tuwadocs\:text-\[\#0052ff\] {
     color: #0052ff;
   }
@@ -1379,6 +1385,16 @@ html {
     }
   }
   @media (width >= 64rem) {
+    .tuwadocs\:lg\:not-sr-only {
+      position: static;
+      width: auto;
+      height: auto;
+      padding: 0;
+      margin: 0;
+      overflow: visible;
+      clip-path: none;
+      white-space: normal;
+    }
     .tuwadocs\:lg\:sticky {
       position: sticky;
     }
@@ -1458,6 +1474,9 @@ html {
       display: none;
     }
   }
+  .tuwadocs\:\[\&\>\:first-child\]\:shrink-0 > :first-child {
+    flex-shrink: 0;
+  }
 }
 html {
   font-size: 16px;
@@ -2008,11 +2027,13 @@ article .nextra-border a:hover {
 article a[href^='http']:after {
   filter: hue-rotate(210deg) saturate(1.5);
 }
-@media (max-width: 768px) {
+@media (max-width: 767.98px), (pointer: coarse) and (max-width: 1023.98px) {
   .nextra-navbar {
     backdrop-filter: none;
-    background: white;
+    background: rgb(var(--nextra-bg, 255 255 255));
   }
+}
+@media (max-width: 768px) {
   .tuwa-footer-link span {
     display: none;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tuwaio/docs-ui",
-  "version": "0.5.6",
+  "version": "0.5.7",
   "private": false,
   "author": "Oleksandr Tkach",
   "license": "Apache-2.0",
@@ -85,14 +85,13 @@
   "devDependencies": {
     "@heroicons/react": "^2.2.0",
     "@tailwindcss/postcss": "^4.3.3",
-    "@tailwindcss/vite": "^4.3.3",
     "@types/node": "^26.6.5",
     "@types/react": "^19.3.0",
-    "autoprefixer": "^10.6.1",
+    "autoprefixer": "^10.6.2",
     "next": "16.4.3",
     "nextra": "^4.6.1",
     "nextra-theme-docs": "^4.6.1",
-    "postcss": "^8.5.31",
+    "postcss": "^8.5.32",
     "postcss-cli": "^12.0.0",
     "react": "^19.3.1",
     "tailwindcss": "^4.3.3",