@windrun-huaiin/third-ui 21.0.0 → 22.0.1

package/README.md

@@ -42,10 +42,7 @@ Your-project/
 
 ## Usage Example
 
-### Import all components
-```tsx
-import { ClerkUser, CTA, TOC } from '@windrun-huaiin/third-ui';
-```
+Root entry import is not supported. Always import from an explicit subpath such as `@windrun-huaiin/third-ui/clerk` or `@windrun-huaiin/third-ui/main`.
 
 ### Import components by module
 ```tsx
@@ -56,7 +53,10 @@ import { ClerkUser, ClerkOrganization } from '@windrun-huaiin/third-ui/clerk';
 import { CTA, Features } from '@windrun-huaiin/third-ui/main';
 
 // Only import Fumadocs components  
-import { TOC, FumaBannerSuit } from '@windrun-huaiin/third-ui/fuma';
+import { FumaPageGenerator, FumaBannerSuit } from '@windrun-huaiin/third-ui/fuma/server';
+
+// Shared MDX building blocks
+import { TocFooterWrapper, PortableClerkTOC } from '@windrun-huaiin/third-ui/fuma/mdx';
 ```
 
 ### Use components
@@ -219,4 +219,4 @@ All configuration parameters will be automatically obtained from the global conf
 - [Newspaper Template](https://newspaper-template.org/en)
 - [breathing exercise](https://breathingexercise.net/en)
 - [ai directory list](https://aidirectorylist.com/en)
-- [reve image directory](https://reveimage.directory/en)
+- [reve image directory](https://reveimage.directory/en)

package/dist/ai/ai-markdown.js

@@ -4,7 +4,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var utils = require('@windrun-huaiin/lib/utils');
 var hastUtilToJsxRuntime = require('hast-util-to-jsx-runtime');
-var markdownComponentMap = require('../fuma/mdx/markdown-component-map.js');
+var markdownComponentMap = require('../fuma/share/markdown-component-map.js');
 var React = require('react');
 var remarkGfm = require('remark-gfm');
 var remarkParse = require('remark-parse');

package/dist/ai/ai-markdown.mjs

@@ -2,7 +2,7 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { cn } from '@windrun-huaiin/lib/utils';
 import { toJsxRuntime } from 'hast-util-to-jsx-runtime';
-import { baseMarkdownComponents } from '../fuma/mdx/markdown-component-map.mjs';
+import { baseMarkdownComponents } from '../fuma/share/markdown-component-map.mjs';
 import { useMemo } from 'react';
 import remarkGfm from 'remark-gfm';
 import remarkParse from 'remark-parse';

package/dist/clerk/clerk-page-context-generator.js

@@ -5,13 +5,14 @@ var jsxRuntime = require('react/jsx-runtime');
 var signupWithFingerprintClient = require('./signup-with-fingerprint-client.js');
 var signinWithFingerprintClient = require('./signin-with-fingerprint-client.js');
 
+const clerkPageContainerClassName = 'flex min-h-dvh w-full items-start justify-center px-6 pt-[calc(var(--fd-banner-height,0px)+var(--fd-header-height,3.5rem)+1rem)] pb-6 md:px-8 md:pt-[calc(var(--fd-banner-height,0px)+var(--fd-header-height,3.5rem)+1.5rem)] md:pb-8';
 /**
  * Create a SignUp page with fingerprint support
  * Note: This must be used within a FingerprintProvider
  */
 function createSignUpPageWithFingerprint() {
     return function SignUpPage() {
-        return (jsxRuntime.jsx("div", { className: "flex-1 flex justify-center m-16", children: jsxRuntime.jsx(signupWithFingerprintClient.SignUpWithFingerprint, {}) }));
+        return (jsxRuntime.jsx("div", { className: clerkPageContainerClassName, children: jsxRuntime.jsx(signupWithFingerprintClient.SignUpWithFingerprint, {}) }));
     };
 }
 /**
@@ -20,7 +21,7 @@ function createSignUpPageWithFingerprint() {
  */
 function createSignInPageWithFingerprint() {
     return function SignInPage() {
-        return (jsxRuntime.jsx("div", { className: "flex-1 flex justify-center m-16", children: jsxRuntime.jsx(signinWithFingerprintClient.SignInWithFingerprint, {}) }));
+        return (jsxRuntime.jsx("div", { className: clerkPageContainerClassName, children: jsxRuntime.jsx(signinWithFingerprintClient.SignInWithFingerprint, {}) }));
     };
 }
 

package/dist/clerk/clerk-page-context-generator.mjs

@@ -3,13 +3,14 @@ import { jsx } from 'react/jsx-runtime';
 import { SignUpWithFingerprint } from './signup-with-fingerprint-client.mjs';
 import { SignInWithFingerprint } from './signin-with-fingerprint-client.mjs';
 
+const clerkPageContainerClassName = 'flex min-h-dvh w-full items-start justify-center px-6 pt-[calc(var(--fd-banner-height,0px)+var(--fd-header-height,3.5rem)+1rem)] pb-6 md:px-8 md:pt-[calc(var(--fd-banner-height,0px)+var(--fd-header-height,3.5rem)+1.5rem)] md:pb-8';
 /**
  * Create a SignUp page with fingerprint support
  * Note: This must be used within a FingerprintProvider
  */
 function createSignUpPageWithFingerprint() {
     return function SignUpPage() {
-        return (jsx("div", { className: "flex-1 flex justify-center m-16", children: jsx(SignUpWithFingerprint, {}) }));
+        return (jsx("div", { className: clerkPageContainerClassName, children: jsx(SignUpWithFingerprint, {}) }));
     };
 }
 /**
@@ -18,7 +19,7 @@ function createSignUpPageWithFingerprint() {
  */
 function createSignInPageWithFingerprint() {
     return function SignInPage() {
-        return (jsx("div", { className: "flex-1 flex justify-center m-16", children: jsx(SignInWithFingerprint, {}) }));
+        return (jsx("div", { className: clerkPageContainerClassName, children: jsx(SignInWithFingerprint, {}) }));
     };
 }
 

package/dist/clerk/clerk-page-generator.js

@@ -3,20 +3,21 @@
 var jsxRuntime = require('react/jsx-runtime');
 var nextjs = require('@clerk/nextjs');
 
+const clerkPageContainerClassName = 'flex min-h-dvh w-full items-start justify-center px-6 pt-[calc(var(--fd-banner-height,0px)+var(--fd-header-height,3.5rem)+1rem)] pb-6 md:px-8 md:pt-[calc(var(--fd-banner-height,0px)+var(--fd-header-height,3.5rem)+1.5rem)] md:pb-8';
 // Legacy page generators (for backward compatibility)
 function createSignInPage() {
     return function SignInPage() {
-        return (jsxRuntime.jsx("div", { className: "flex-1 flex justify-center m-16", children: jsxRuntime.jsx(nextjs.SignIn, {}) }));
+        return (jsxRuntime.jsx("div", { className: clerkPageContainerClassName, children: jsxRuntime.jsx(nextjs.SignIn, {}) }));
     };
 }
 function createSignUpPage() {
     return function SignUpPage() {
-        return (jsxRuntime.jsx("div", { className: "flex-1 flex justify-center m-16", children: jsxRuntime.jsx(nextjs.SignUp, {}) }));
+        return (jsxRuntime.jsx("div", { className: clerkPageContainerClassName, children: jsxRuntime.jsx(nextjs.SignUp, {}) }));
     };
 }
 function createWaitlistPage() {
     return function WaitlistPage() {
-        return (jsxRuntime.jsx("div", { className: "flex-1 flex justify-center m-16", children: jsxRuntime.jsx(nextjs.Waitlist, {}) }));
+        return (jsxRuntime.jsx("div", { className: clerkPageContainerClassName, children: jsxRuntime.jsx(nextjs.Waitlist, {}) }));
     };
 }
 

package/dist/clerk/clerk-page-generator.mjs

@@ -1,20 +1,21 @@
 import { jsx } from 'react/jsx-runtime';
 import { SignIn, SignUp, Waitlist } from '@clerk/nextjs';
 
+const clerkPageContainerClassName = 'flex min-h-dvh w-full items-start justify-center px-6 pt-[calc(var(--fd-banner-height,0px)+var(--fd-header-height,3.5rem)+1rem)] pb-6 md:px-8 md:pt-[calc(var(--fd-banner-height,0px)+var(--fd-header-height,3.5rem)+1.5rem)] md:pb-8';
 // Legacy page generators (for backward compatibility)
 function createSignInPage() {
     return function SignInPage() {
-        return (jsx("div", { className: "flex-1 flex justify-center m-16", children: jsx(SignIn, {}) }));
+        return (jsx("div", { className: clerkPageContainerClassName, children: jsx(SignIn, {}) }));
     };
 }
 function createSignUpPage() {
     return function SignUpPage() {
-        return (jsx("div", { className: "flex-1 flex justify-center m-16", children: jsx(SignUp, {}) }));
+        return (jsx("div", { className: clerkPageContainerClassName, children: jsx(SignUp, {}) }));
     };
 }
 function createWaitlistPage() {
     return function WaitlistPage() {
-        return (jsx("div", { className: "flex-1 flex justify-center m-16", children: jsx(Waitlist, {}) }));
+        return (jsx("div", { className: clerkPageContainerClassName, children: jsx(Waitlist, {}) }));
     };
 }
 

package/dist/fuma/base/custom-header.d.ts

@@ -2,7 +2,7 @@ import { type CSSProperties } from 'react';
 import { HomeLayoutProps } from 'fumadocs-ui/layouts/home';
 export type NavbarCSSVars = CSSProperties & {
     '--fd-banner-height'?: string;
-    '--fd-nav-height'?: string;
+    '--fd-header-height'?: string;
     '--fd-nav-max-width'?: string;
 };
 export interface CustomHomeHeaderProps extends HomeLayoutProps {

package/dist/fuma/base/custom-header.js

@@ -6,17 +6,15 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var classVarianceAuthority = require('class-variance-authority');
 var icons = require('@windrun-huaiin/base-ui/icons');
+var utils = require('@windrun-huaiin/lib/utils');
 var Link = require('fumadocs-core/link');
 var shared = require('fumadocs-ui/layouts/shared');
-var cn = require('fumadocs-ui/utils/cn');
-var searchToggle = require('fumadocs-ui/components/layout/search-toggle');
-var themeToggle = require('fumadocs-ui/components/layout/theme-toggle');
-var languageToggle = require('fumadocs-ui/components/layout/language-toggle');
+var languageSelect = require('fumadocs-ui/layouts/shared/slots/language-select');
 var navigationMenu = require('fumadocs-ui/components/ui/navigation-menu');
 var popover = require('fumadocs-ui/components/ui/popover');
 var button = require('fumadocs-ui/components/ui/button');
-var layout = require('fumadocs-ui/contexts/layout');
 var i18n = require('fumadocs-ui/contexts/i18n');
+var headerThemeSwitch = require('./header-theme-switch.js');
 
 const DEFAULT_DESKTOP_ACTIONS = [
     'search',
@@ -35,9 +33,9 @@ const DEFAULT_MOBILE_MENU_ACTIONS = [
     'i18n',
     'theme',
 ];
-function CustomHomeHeader({ nav = {}, i18n = false, links, githubUrl, themeSwitch = {}, searchToggle: searchToggle$1 = {}, bannerHeight = 0, headerHeight = 2.5, maxContentWidth = 1400, navbarClassName, floating = false, desktopActionsOrder = DEFAULT_DESKTOP_ACTIONS, mobileBarActionsOrder = DEFAULT_MOBILE_BAR_ACTIONS, mobileMenuActionsOrder = DEFAULT_MOBILE_MENU_ACTIONS, }) {
+function CustomHomeHeader({ nav = {}, i18n = false, links, githubUrl, themeSwitch = {}, searchToggle = {}, bannerHeight = 0, headerHeight = 2.5, maxContentWidth = 1400, navbarClassName, floating = false, desktopActionsOrder = DEFAULT_DESKTOP_ACTIONS, mobileBarActionsOrder = DEFAULT_MOBILE_BAR_ACTIONS, mobileMenuActionsOrder = DEFAULT_MOBILE_MENU_ACTIONS, }) {
     var _a, _b, _c, _d, _e, _f, _g;
-    const finalLinks = React.useMemo(() => shared.getLinks(links, githubUrl), [links, githubUrl]);
+    const finalLinks = React.useMemo(() => shared.resolveLinkItems({ links, githubUrl }), [links, githubUrl]);
     const navItems = finalLinks.filter((item) => { var _a; return ['nav', 'all'].includes((_a = item.on) !== null && _a !== void 0 ? _a : 'all'); });
     const menuItems = finalLinks.filter((item) => { var _a; return ['menu', 'all'].includes((_a = item.on) !== null && _a !== void 0 ? _a : 'all'); });
     const mobilePinnedItems = navItems.filter((item) => isSecondary(item) && isMobilePinned(item));
@@ -53,19 +51,19 @@ function CustomHomeHeader({ nav = {}, i18n = false, links, githubUrl, themeSwitc
         ? desktopSecondaryItems.filter((item) => !isGithubItem(item, githubUrl))
         : desktopSecondaryItems;
     const desktopActionNodes = {
-        search: searchToggle$1.enabled !== false
-            ? (_b = (_a = searchToggle$1.components) === null || _a === void 0 ? void 0 : _a.lg) !== null && _b !== void 0 ? _b : (jsxRuntime.jsx(searchToggle.LargeSearchToggle, { className: "w-full rounded-full ps-2.5 max-w-[240px]", hideIfDisabled: true }))
+        search: searchToggle.enabled !== false
+            ? (_b = (_a = searchToggle.components) === null || _a === void 0 ? void 0 : _a.lg) !== null && _b !== void 0 ? _b : null
             : null,
         theme: themeSwitch.enabled !== false
-            ? (_c = themeSwitch.component) !== null && _c !== void 0 ? _c : jsxRuntime.jsx(themeToggle.ThemeToggle, { mode: themeSwitch === null || themeSwitch === void 0 ? void 0 : themeSwitch.mode })
+            ? (_c = themeSwitch.component) !== null && _c !== void 0 ? _c : jsxRuntime.jsx(headerThemeSwitch.HeaderThemeSwitch, { mode: themeSwitch === null || themeSwitch === void 0 ? void 0 : themeSwitch.mode })
             : null,
         i18n: i18n ? (jsxRuntime.jsx(CompactLanguageToggle, { children: jsxRuntime.jsx(icons.LanguagesIcon, { className: "size-5" }) })) : null,
-        secondary: desktopSecondaryDisplayItems.length ? (jsxRuntime.jsx("ul", { className: "flex flex-row gap-2 items-center empty:hidden", children: desktopSecondaryDisplayItems.map((item, i) => (jsxRuntime.jsx(NavbarLinkItem, { item: item, className: cn.cn(item.type === 'icon' && [
+        secondary: desktopSecondaryDisplayItems.length ? (jsxRuntime.jsx("ul", { className: "flex flex-row gap-2 items-center empty:hidden", children: desktopSecondaryDisplayItems.map((item, i) => (jsxRuntime.jsx(NavbarLinkItem, { item: item, className: utils.cn(item.type === 'icon' && [
                     '-mx-1',
                     i === 0 && 'ms-0',
                     i === desktopSecondaryDisplayItems.length - 1 && 'me-0',
                 ]) }, i))) })) : null,
-        github: githubDesktopItem ? (jsxRuntime.jsx(NavbarLinkItem, { item: githubDesktopItem, className: cn.cn(githubDesktopItem.type === 'icon' && '-mx-1') })) : null,
+        github: githubDesktopItem ? (jsxRuntime.jsx(NavbarLinkItem, { item: githubDesktopItem, className: utils.cn(githubDesktopItem.type === 'icon' && '-mx-1') })) : null,
     };
     const mobileMenuActionsIncludeGithub = mobileMenuActionsOrder.includes('github');
     const githubMobileMenuItem = mobileMenuActionsIncludeGithub
@@ -78,9 +76,9 @@ function CustomHomeHeader({ nav = {}, i18n = false, links, githubUrl, themeSwitc
         secondary: secondaryMenuDisplayItems.length ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: secondaryMenuDisplayItems.map((item, i) => (jsxRuntime.jsx(MenuLinkItem, { item: item, className: "-me-1.5" }, i))) })) : null,
         github: githubMobileMenuItem ? (jsxRuntime.jsx(MenuLinkItem, { item: githubMobileMenuItem, className: "-me-1.5" })) : null,
         separator: jsxRuntime.jsx("div", { role: "separator", className: "flex-1" }),
-        i18n: i18n ? (jsxRuntime.jsxs(CompactLanguageToggle, { children: [jsxRuntime.jsx(icons.LanguagesIcon, { className: "size-5" }), jsxRuntime.jsx(languageToggle.LanguageToggleText, {}), jsxRuntime.jsx(icons.ChevronDownIcon, { className: "size-3 text-fd-muted-foreground" })] })) : null,
+        i18n: i18n ? (jsxRuntime.jsxs(CompactLanguageToggle, { children: [jsxRuntime.jsx(icons.LanguagesIcon, { className: "size-5" }), jsxRuntime.jsx(languageSelect.LanguageSelectText, {}), jsxRuntime.jsx(icons.ChevronDownIcon, { className: "size-3 text-fd-muted-foreground" })] })) : null,
         theme: themeSwitch.enabled !== false
-            ? (_d = themeSwitch.component) !== null && _d !== void 0 ? _d : jsxRuntime.jsx(themeToggle.ThemeToggle, { mode: themeSwitch === null || themeSwitch === void 0 ? void 0 : themeSwitch.mode })
+            ? (_d = themeSwitch.component) !== null && _d !== void 0 ? _d : jsxRuntime.jsx(headerThemeSwitch.HeaderThemeSwitch, { mode: themeSwitch === null || themeSwitch === void 0 ? void 0 : themeSwitch.mode })
             : null,
     };
     const shouldRenderMobileUtilities = mobileMenuActionsOrder.some((action) => action !== 'separator' && Boolean(mobileMenuActionNodes[action]));
@@ -89,7 +87,7 @@ function CustomHomeHeader({ nav = {}, i18n = false, links, githubUrl, themeSwitc
             return null;
         return mobileMenuActionNodes[action];
     };
-    const menuNode = (jsxRuntime.jsxs(Menu, { children: [jsxRuntime.jsx(MenuTrigger, { "aria-label": "Toggle Menu", className: cn.cn(button.buttonVariants({
+    const menuNode = (jsxRuntime.jsxs(Menu, { children: [jsxRuntime.jsx(MenuTrigger, { "aria-label": "Toggle Menu", className: utils.cn(button.buttonVariants({
                     size: 'icon',
                     color: 'ghost',
                     className: 'group [&_svg]:size-5.5',
@@ -100,8 +98,8 @@ function CustomHomeHeader({ nav = {}, i18n = false, links, githubUrl, themeSwitc
                             return (jsxRuntime.jsx(React.Fragment, { children: node }, `mobile-menu-${action}`));
                         }) })) : null] })] }));
     const mobilePinnedNode = mobilePinnedItems.length > 0 ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: mobilePinnedItems.map((item, i) => (jsxRuntime.jsx(NavbarLinkItem, { item: item, className: "max-sm:-mr-1" }, `mobile-pinned-${i}`))) })) : null;
-    const mobileSearchNode = searchToggle$1.enabled !== false
-        ? (_f = (_e = searchToggle$1.components) === null || _e === void 0 ? void 0 : _e.sm) !== null && _f !== void 0 ? _f : (jsxRuntime.jsx(searchToggle.SearchToggle, { className: "p-2", hideIfDisabled: true }))
+    const mobileSearchNode = searchToggle.enabled !== false
+        ? (_f = (_e = searchToggle.components) === null || _e === void 0 ? void 0 : _e.sm) !== null && _f !== void 0 ? _f : null
         : null;
     const mobileBarNodes = {
         pinned: mobilePinnedNode,
@@ -109,7 +107,7 @@ function CustomHomeHeader({ nav = {}, i18n = false, links, githubUrl, themeSwitc
         menu: menuNode,
     };
     const getMobileBarNode = (action) => { var _a; return (_a = mobileBarNodes[action]) !== null && _a !== void 0 ? _a : null; };
-    return (jsxRuntime.jsxs(CustomNavbar, { bannerHeight: bannerHeight, headerHeight: headerHeight, maxContentWidth: maxContentWidth, className: navbarClassName, floating: floating, children: [jsxRuntime.jsx(Link, { href: (_g = nav.url) !== null && _g !== void 0 ? _g : '/', className: "inline-flex items-center gap-2.5 font-semibold", children: nav.title }), nav.children, jsxRuntime.jsx("ul", { className: "flex flex-row items-center gap-2 px-6 max-sm:hidden", children: navItems
+    return (jsxRuntime.jsxs(CustomNavbar, { bannerHeight: bannerHeight, headerHeight: headerHeight, maxContentWidth: maxContentWidth, className: navbarClassName, floating: floating, children: [jsxRuntime.jsx(Link, { href: (_g = nav.url) !== null && _g !== void 0 ? _g : '/', className: "inline-flex items-center gap-2.5 font-semibold", children: renderNavTitle(nav.title) }), nav.children, jsxRuntime.jsx("ul", { className: "flex flex-row items-center gap-2 px-6 max-sm:hidden", children: navItems
                     .filter((item) => !isSecondary(item))
                     .map((item, i) => (jsxRuntime.jsx(NavbarLinkItem, { item: item, className: "text-sm" }, i))) }), jsxRuntime.jsx("div", { className: "flex flex-row items-center justify-end gap-1.5 flex-1 max-lg:hidden", children: desktopActionsOrder.map((action) => {
                     const node = desktopActionNodes[action];
@@ -124,8 +122,7 @@ function CustomHomeHeader({ nav = {}, i18n = false, links, githubUrl, themeSwitc
 function CustomNavbar(_a) {
     var { bannerHeight = 0, headerHeight = 2.5, maxContentWidth = 1400, className, style, floating = false } = _a, props = tslib.__rest(_a, ["bannerHeight", "headerHeight", "maxContentWidth", "className", "style", "floating"]);
     const [value, setValue] = React.useState('');
-    const { isTransparent } = layout.useNav();
-    const cssVars = Object.assign({ '--fd-banner-height': `${bannerHeight}rem`, '--fd-nav-height': `${headerHeight}rem` }, (maxContentWidth
+    const cssVars = Object.assign({ '--fd-banner-height': `${bannerHeight}rem`, '--fd-header-height': `${headerHeight}rem` }, (maxContentWidth
         ? {
             '--fd-nav-max-width': typeof maxContentWidth === 'number'
                 ? `${maxContentWidth}px`
@@ -138,17 +135,14 @@ function CustomNavbar(_a) {
             : maxContentWidth
         : '88rem';
     const minNavWidth = '15rem';
-    const floatingWidth = `clamp(${minNavWidth}, 100vw, ${resolvedMaxWidth})`;
     const widthStyle = floating
-        ? { width: floatingWidth }
+        ? { width: `clamp(${minNavWidth}, 100vw, ${resolvedMaxWidth})` }
         : { width: '100%', maxWidth: resolvedMaxWidth, minWidth: minNavWidth };
     const headerStyle = Object.assign(Object.assign(Object.assign({}, cssVars), widthStyle), style);
-    return (jsxRuntime.jsx(navigationMenu.NavigationMenu, { value: value, onValueChange: setValue, asChild: true, children: jsxRuntime.jsxs("header", Object.assign({}, props, { style: headerStyle, className: cn.cn('rounded-2xl border px-4 py-1 transition-[background-color,box-shadow,transform] duration-300 backdrop-blur-xl shadow-lg shadow-black/5', floating
+    return (jsxRuntime.jsx(navigationMenu.NavigationMenu, { value: value, onValueChange: setValue, asChild: true, children: jsxRuntime.jsxs("header", Object.assign({}, props, { style: headerStyle, className: utils.cn('rounded-2xl border px-4 py-1 transition-[background-color,box-shadow,transform] duration-300 backdrop-blur-xl shadow-lg shadow-black/5', floating
                 ? 'fixed left-1/2 top-[--fd-banner-height] z-1001 -translate-x-1/2'
-                : 'relative mx-auto w-full', isTransparent
-                ? 'border-transparent bg-transparent shadow-transparent'
-                : 'border border-fd-border/60 bg-white/85 dark:border-white/20 dark:bg-neutral-900/75', value.length > 0 &&
-                'max-lg:rounded-b-3xl border-fd-border/60 bg-white dark:border-white/20 dark:bg-neutral-900', className), children: [jsxRuntime.jsx(navigationMenu.NavigationMenuList, { className: "flex w-full items-center gap-4 px-1", style: { height: 'var(--fd-nav-height)' }, asChild: true, children: jsxRuntime.jsx("nav", { children: props.children }) }), jsxRuntime.jsx(navigationMenu.NavigationMenuViewport, {})] })) }));
+                : 'relative mx-auto w-full', 'border border-fd-border/60 bg-white/85 dark:border-white/20 dark:bg-neutral-900/75', value.length > 0 &&
+                'max-lg:rounded-b-3xl border-fd-border/60 bg-white dark:border-white/20 dark:bg-neutral-900', className), children: [jsxRuntime.jsx(navigationMenu.NavigationMenuList, { className: "flex w-full items-center gap-4 px-1", style: { height: 'var(--fd-header-height)' }, asChild: true, children: jsxRuntime.jsx("nav", { children: props.children }) }), jsxRuntime.jsx(navigationMenu.NavigationMenuViewport, {})] })) }));
 }
 const navItemVariants = classVarianceAuthority.cva('[&_svg]:size-4', {
     variants: {
@@ -179,23 +173,23 @@ function NavbarLinkItem(_a) {
                 return jsxRuntime.jsx(React.Fragment, { children: child.children }, j);
             }
             const _c = (_a = child.menu) !== null && _a !== void 0 ? _a : {}, { banner = child.icon ? (jsxRuntime.jsx("div", { className: "w-fit rounded-md border bg-fd-muted p-1 [&_svg]:size-4", children: child.icon })) : null } = _c, rest = tslib.__rest(_c, ["banner"]);
-            return (jsxRuntime.jsx(navigationMenu.NavigationMenuLink, { asChild: true, children: jsxRuntime.jsx(Link, Object.assign({ href: child.url, external: child.external }, rest, { className: cn.cn('flex flex-col gap-2 rounded-lg border bg-fd-card p-3 transition-colors hover:bg-fd-accent/80 hover:text-fd-accent-foreground', rest.className), children: (_b = rest.children) !== null && _b !== void 0 ? _b : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [banner, jsxRuntime.jsx("p", { className: "text-[15px] font-medium", children: child.text }), jsxRuntime.jsx("p", { className: "text-sm text-fd-muted-foreground empty:hidden", children: child.description })] })) })) }, `${j}-${child.url}`));
+            return (jsxRuntime.jsx(navigationMenu.NavigationMenuLink, { asChild: true, children: jsxRuntime.jsx(Link, Object.assign({ href: child.url, external: child.external }, rest, { className: utils.cn('flex flex-col gap-2 rounded-lg border bg-fd-card p-3 transition-colors hover:bg-fd-accent/80 hover:text-fd-accent-foreground', rest.className), children: (_b = rest.children) !== null && _b !== void 0 ? _b : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [banner, jsxRuntime.jsx("p", { className: "text-[15px] font-medium", children: child.text }), jsxRuntime.jsx("p", { className: "text-sm text-fd-muted-foreground empty:hidden", children: child.description })] })) })) }, `${j}-${child.url}`));
         });
-        return (jsxRuntime.jsxs(navigationMenu.NavigationMenuItem, { children: [jsxRuntime.jsx(navigationMenu.NavigationMenuTrigger, Object.assign({}, props, { className: cn.cn(navItemVariants(), 'rounded-md', props.className), children: item.url ? (jsxRuntime.jsx(Link, { href: item.url, external: item.external, children: item.text })) : (item.text) })), jsxRuntime.jsx(navigationMenu.NavigationMenuContent, { className: "grid grid-cols-1 gap-2 p-4 md:grid-cols-2 lg:grid-cols-3", children: children })] }));
+        return (jsxRuntime.jsxs(navigationMenu.NavigationMenuItem, { children: [jsxRuntime.jsx(navigationMenu.NavigationMenuTrigger, Object.assign({}, props, { className: utils.cn(navItemVariants(), 'rounded-md', props.className), children: item.url ? (jsxRuntime.jsx(Link, { href: item.url, external: item.external, children: item.text })) : (item.text) })), jsxRuntime.jsx(navigationMenu.NavigationMenuContent, { className: "grid grid-cols-1 gap-2 p-4 md:grid-cols-2 lg:grid-cols-3", children: children })] }));
     }
-    return (jsxRuntime.jsx(navigationMenu.NavigationMenuItem, { children: jsxRuntime.jsx(navigationMenu.NavigationMenuLink, { asChild: true, children: jsxRuntime.jsx(shared.BaseLinkItem, Object.assign({ item: item, "aria-label": item.type === 'icon' ? item.label : undefined }, props, { className: cn.cn(navItemVariants({ variant: item.type }), props.className), children: item.type === 'icon' ? item.icon : item.text })) }) }));
+    return (jsxRuntime.jsx(navigationMenu.NavigationMenuItem, { children: jsxRuntime.jsx(navigationMenu.NavigationMenuLink, { asChild: true, children: jsxRuntime.jsx(shared.LinkItem, Object.assign({ item: item, "aria-label": item.type === 'icon' ? item.label : undefined }, props, { className: utils.cn(navItemVariants({ variant: item.type }), props.className), children: item.type === 'icon' ? item.icon : item.text })) }) }));
 }
 const Menu = navigationMenu.NavigationMenuItem;
 function MenuLinkItem(_a) {
     var _b;
     var { item } = _a, props = tslib.__rest(_a, ["item"]);
     if (item.type === 'custom')
-        return jsxRuntime.jsx("div", { className: cn.cn('grid', props.className), children: item.children });
+        return jsxRuntime.jsx("div", { className: utils.cn('grid', props.className), children: item.children });
     if (item.type === 'menu') {
         const header = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [item.icon, item.text] }));
-        return (jsxRuntime.jsxs("div", { className: cn.cn('mb-4 flex flex-col', props.className), children: [jsxRuntime.jsx("p", { className: "mb-1 text-sm text-fd-muted-foreground", children: item.url ? (jsxRuntime.jsx(navigationMenu.NavigationMenuLink, { asChild: true, children: jsxRuntime.jsx(Link, { href: item.url, external: item.external, children: header }) })) : (header) }), item.items.map((child, i) => (jsxRuntime.jsx(MenuLinkItem, { item: child }, i)))] }));
+        return (jsxRuntime.jsxs("div", { className: utils.cn('mb-4 flex flex-col', props.className), children: [jsxRuntime.jsx("p", { className: "mb-1 text-sm text-fd-muted-foreground", children: item.url ? (jsxRuntime.jsx(navigationMenu.NavigationMenuLink, { asChild: true, children: jsxRuntime.jsx(Link, { href: item.url, external: item.external, children: header }) })) : (header) }), item.items.map((child, i) => (jsxRuntime.jsx(MenuLinkItem, { item: child }, i)))] }));
     }
-    return (jsxRuntime.jsx(navigationMenu.NavigationMenuLink, { asChild: true, children: jsxRuntime.jsxs(shared.BaseLinkItem, { item: item, className: cn.cn({
+    return (jsxRuntime.jsx(navigationMenu.NavigationMenuLink, { asChild: true, children: jsxRuntime.jsxs(shared.LinkItem, { item: item, className: utils.cn({
                 main: 'inline-flex items-center gap-2 py-1.5 transition-colors hover:text-fd-popover-foreground/50 data-[active=true]:font-medium data-[active=true]:text-fd-primary [&_svg]:size-4',
                 icon: button.buttonVariants({
                     size: 'icon',
@@ -212,17 +206,17 @@ function MenuTrigger(_a) {
     return (jsxRuntime.jsx(navigationMenu.NavigationMenuTrigger, Object.assign({}, props, { onPointerMove: enableHover ? undefined : (e) => e.preventDefault(), children: props.children })));
 }
 function MenuContent(props) {
-    return (jsxRuntime.jsx(navigationMenu.NavigationMenuContent, Object.assign({}, props, { className: cn.cn('flex flex-col p-4 w-full max-w-full min-w-0', props.className), style: Object.assign({ minWidth: 0, width: '100%', maxWidth: '100%' }, props.style), children: props.children })));
+    return (jsxRuntime.jsx(navigationMenu.NavigationMenuContent, Object.assign({}, props, { className: utils.cn('flex flex-col p-4 w-full max-w-full min-w-0', props.className), style: Object.assign({ minWidth: 0, width: '100%', maxWidth: '100%' }, props.style), children: props.children })));
 }
 function CompactLanguageToggle(_a) {
     var { contentClassName } = _a, props = tslib.__rest(_a, ["contentClassName"]);
     const context = i18n.useI18n();
     if (!context.locales)
         throw new Error('Missing `<I18nProvider />`');
-    return (jsxRuntime.jsxs(popover.Popover, { children: [jsxRuntime.jsx(popover.PopoverTrigger, Object.assign({ "aria-label": context.text.chooseLanguage }, props, { className: cn.cn(button.buttonVariants({
+    return (jsxRuntime.jsxs(popover.Popover, { children: [jsxRuntime.jsx(popover.PopoverTrigger, Object.assign({ "aria-label": context.text.chooseLanguage }, props, { className: utils.cn(button.buttonVariants({
                     color: 'ghost',
                     className: 'gap-1.5 py-1.5 px-1',
-                }), props.className), children: props.children })), jsxRuntime.jsxs(popover.PopoverContent, { className: cn.cn('flex min-w-[150px] z-1001 flex-col overflow-x-hidden rounded-xl border bg-fd-popover/60 p-0 text-fd-popover-foreground backdrop-blur-lg', contentClassName), children: [jsxRuntime.jsx("p", { className: "mb-1 p-2 text-xs font-medium text-fd-muted-foreground", children: context.text.chooseLanguage }), context.locales.map((item) => (jsxRuntime.jsx("button", { type: "button", className: cn.cn('p-2 text-start text-sm', item.locale === context.locale
+                }), props.className), children: props.children })), jsxRuntime.jsxs(popover.PopoverContent, { className: utils.cn('flex min-w-[150px] z-1001 flex-col overflow-x-hidden rounded-xl border bg-fd-popover/60 p-0 text-fd-popover-foreground backdrop-blur-lg', contentClassName), children: [jsxRuntime.jsx("p", { className: "mb-1 p-2 text-xs font-medium text-fd-muted-foreground", children: context.text.chooseLanguage }), context.locales.map((item) => (jsxRuntime.jsx("button", { type: "button", className: utils.cn('p-2 text-start text-sm', item.locale === context.locale
                             ? 'bg-fd-primary/10 font-medium text-fd-primary'
                             : 'hover:bg-fd-accent hover:text-fd-accent-foreground'), onClick: () => {
                             var _a;
@@ -240,5 +234,13 @@ function isSecondary(item) {
 function isMobilePinned(item) {
     return Boolean(item.mobilePinned);
 }
+function renderNavTitle(title) {
+    var _a;
+    if (typeof title === 'function') {
+        const TitleComponent = title;
+        return jsxRuntime.jsx(TitleComponent, {});
+    }
+    return (_a = title) !== null && _a !== void 0 ? _a : null;
+}
 
 exports.CustomHomeHeader = CustomHomeHeader;

package/dist/fuma/base/custom-header.mjs

@@ -4,17 +4,15 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useMemo, Fragment as Fragment$1, useState } from 'react';
 import { cva } from 'class-variance-authority';
 import { LanguagesIcon, ChevronDownIcon } from '@windrun-huaiin/base-ui/icons';
+import { cn } from '@windrun-huaiin/lib/utils';
 import Link from 'fumadocs-core/link';
-import { getLinks, BaseLinkItem } from 'fumadocs-ui/layouts/shared';
-import { cn } from 'fumadocs-ui/utils/cn';
-import { LargeSearchToggle, SearchToggle } from 'fumadocs-ui/components/layout/search-toggle';
-import { ThemeToggle } from 'fumadocs-ui/components/layout/theme-toggle';
-import { LanguageToggleText } from 'fumadocs-ui/components/layout/language-toggle';
+import { resolveLinkItems, LinkItem } from 'fumadocs-ui/layouts/shared';
+import { LanguageSelectText } from 'fumadocs-ui/layouts/shared/slots/language-select';
 import { NavigationMenuItem, NavigationMenuLink, NavigationMenuTrigger, NavigationMenuContent, NavigationMenu, NavigationMenuList, NavigationMenuViewport } from 'fumadocs-ui/components/ui/navigation-menu';
 import { Popover, PopoverTrigger, PopoverContent } from 'fumadocs-ui/components/ui/popover';
 import { buttonVariants } from 'fumadocs-ui/components/ui/button';
-import { useNav } from 'fumadocs-ui/contexts/layout';
 import { useI18n } from 'fumadocs-ui/contexts/i18n';
+import { HeaderThemeSwitch } from './header-theme-switch.mjs';
 
 const DEFAULT_DESKTOP_ACTIONS = [
     'search',
@@ -35,7 +33,7 @@ const DEFAULT_MOBILE_MENU_ACTIONS = [
 ];
 function CustomHomeHeader({ nav = {}, i18n = false, links, githubUrl, themeSwitch = {}, searchToggle = {}, bannerHeight = 0, headerHeight = 2.5, maxContentWidth = 1400, navbarClassName, floating = false, desktopActionsOrder = DEFAULT_DESKTOP_ACTIONS, mobileBarActionsOrder = DEFAULT_MOBILE_BAR_ACTIONS, mobileMenuActionsOrder = DEFAULT_MOBILE_MENU_ACTIONS, }) {
     var _a, _b, _c, _d, _e, _f, _g;
-    const finalLinks = useMemo(() => getLinks(links, githubUrl), [links, githubUrl]);
+    const finalLinks = useMemo(() => resolveLinkItems({ links, githubUrl }), [links, githubUrl]);
     const navItems = finalLinks.filter((item) => { var _a; return ['nav', 'all'].includes((_a = item.on) !== null && _a !== void 0 ? _a : 'all'); });
     const menuItems = finalLinks.filter((item) => { var _a; return ['menu', 'all'].includes((_a = item.on) !== null && _a !== void 0 ? _a : 'all'); });
     const mobilePinnedItems = navItems.filter((item) => isSecondary(item) && isMobilePinned(item));
@@ -52,10 +50,10 @@ function CustomHomeHeader({ nav = {}, i18n = false, links, githubUrl, themeSwitc
         : desktopSecondaryItems;
     const desktopActionNodes = {
         search: searchToggle.enabled !== false
-            ? (_b = (_a = searchToggle.components) === null || _a === void 0 ? void 0 : _a.lg) !== null && _b !== void 0 ? _b : (jsx(LargeSearchToggle, { className: "w-full rounded-full ps-2.5 max-w-[240px]", hideIfDisabled: true }))
+            ? (_b = (_a = searchToggle.components) === null || _a === void 0 ? void 0 : _a.lg) !== null && _b !== void 0 ? _b : null
             : null,
         theme: themeSwitch.enabled !== false
-            ? (_c = themeSwitch.component) !== null && _c !== void 0 ? _c : jsx(ThemeToggle, { mode: themeSwitch === null || themeSwitch === void 0 ? void 0 : themeSwitch.mode })
+            ? (_c = themeSwitch.component) !== null && _c !== void 0 ? _c : jsx(HeaderThemeSwitch, { mode: themeSwitch === null || themeSwitch === void 0 ? void 0 : themeSwitch.mode })
             : null,
         i18n: i18n ? (jsx(CompactLanguageToggle, { children: jsx(LanguagesIcon, { className: "size-5" }) })) : null,
         secondary: desktopSecondaryDisplayItems.length ? (jsx("ul", { className: "flex flex-row gap-2 items-center empty:hidden", children: desktopSecondaryDisplayItems.map((item, i) => (jsx(NavbarLinkItem, { item: item, className: cn(item.type === 'icon' && [
@@ -76,9 +74,9 @@ function CustomHomeHeader({ nav = {}, i18n = false, links, githubUrl, themeSwitc
         secondary: secondaryMenuDisplayItems.length ? (jsx(Fragment, { children: secondaryMenuDisplayItems.map((item, i) => (jsx(MenuLinkItem, { item: item, className: "-me-1.5" }, i))) })) : null,
         github: githubMobileMenuItem ? (jsx(MenuLinkItem, { item: githubMobileMenuItem, className: "-me-1.5" })) : null,
         separator: jsx("div", { role: "separator", className: "flex-1" }),
-        i18n: i18n ? (jsxs(CompactLanguageToggle, { children: [jsx(LanguagesIcon, { className: "size-5" }), jsx(LanguageToggleText, {}), jsx(ChevronDownIcon, { className: "size-3 text-fd-muted-foreground" })] })) : null,
+        i18n: i18n ? (jsxs(CompactLanguageToggle, { children: [jsx(LanguagesIcon, { className: "size-5" }), jsx(LanguageSelectText, {}), jsx(ChevronDownIcon, { className: "size-3 text-fd-muted-foreground" })] })) : null,
         theme: themeSwitch.enabled !== false
-            ? (_d = themeSwitch.component) !== null && _d !== void 0 ? _d : jsx(ThemeToggle, { mode: themeSwitch === null || themeSwitch === void 0 ? void 0 : themeSwitch.mode })
+            ? (_d = themeSwitch.component) !== null && _d !== void 0 ? _d : jsx(HeaderThemeSwitch, { mode: themeSwitch === null || themeSwitch === void 0 ? void 0 : themeSwitch.mode })
             : null,
     };
     const shouldRenderMobileUtilities = mobileMenuActionsOrder.some((action) => action !== 'separator' && Boolean(mobileMenuActionNodes[action]));
@@ -99,7 +97,7 @@ function CustomHomeHeader({ nav = {}, i18n = false, links, githubUrl, themeSwitc
                         }) })) : null] })] }));
     const mobilePinnedNode = mobilePinnedItems.length > 0 ? (jsx(Fragment, { children: mobilePinnedItems.map((item, i) => (jsx(NavbarLinkItem, { item: item, className: "max-sm:-mr-1" }, `mobile-pinned-${i}`))) })) : null;
     const mobileSearchNode = searchToggle.enabled !== false
-        ? (_f = (_e = searchToggle.components) === null || _e === void 0 ? void 0 : _e.sm) !== null && _f !== void 0 ? _f : (jsx(SearchToggle, { className: "p-2", hideIfDisabled: true }))
+        ? (_f = (_e = searchToggle.components) === null || _e === void 0 ? void 0 : _e.sm) !== null && _f !== void 0 ? _f : null
         : null;
     const mobileBarNodes = {
         pinned: mobilePinnedNode,
@@ -107,7 +105,7 @@ function CustomHomeHeader({ nav = {}, i18n = false, links, githubUrl, themeSwitc
         menu: menuNode,
     };
     const getMobileBarNode = (action) => { var _a; return (_a = mobileBarNodes[action]) !== null && _a !== void 0 ? _a : null; };
-    return (jsxs(CustomNavbar, { bannerHeight: bannerHeight, headerHeight: headerHeight, maxContentWidth: maxContentWidth, className: navbarClassName, floating: floating, children: [jsx(Link, { href: (_g = nav.url) !== null && _g !== void 0 ? _g : '/', className: "inline-flex items-center gap-2.5 font-semibold", children: nav.title }), nav.children, jsx("ul", { className: "flex flex-row items-center gap-2 px-6 max-sm:hidden", children: navItems
+    return (jsxs(CustomNavbar, { bannerHeight: bannerHeight, headerHeight: headerHeight, maxContentWidth: maxContentWidth, className: navbarClassName, floating: floating, children: [jsx(Link, { href: (_g = nav.url) !== null && _g !== void 0 ? _g : '/', className: "inline-flex items-center gap-2.5 font-semibold", children: renderNavTitle(nav.title) }), nav.children, jsx("ul", { className: "flex flex-row items-center gap-2 px-6 max-sm:hidden", children: navItems
                     .filter((item) => !isSecondary(item))
                     .map((item, i) => (jsx(NavbarLinkItem, { item: item, className: "text-sm" }, i))) }), jsx("div", { className: "flex flex-row items-center justify-end gap-1.5 flex-1 max-lg:hidden", children: desktopActionsOrder.map((action) => {
                     const node = desktopActionNodes[action];
@@ -122,8 +120,7 @@ function CustomHomeHeader({ nav = {}, i18n = false, links, githubUrl, themeSwitc
 function CustomNavbar(_a) {
     var { bannerHeight = 0, headerHeight = 2.5, maxContentWidth = 1400, className, style, floating = false } = _a, props = __rest(_a, ["bannerHeight", "headerHeight", "maxContentWidth", "className", "style", "floating"]);
     const [value, setValue] = useState('');
-    const { isTransparent } = useNav();
-    const cssVars = Object.assign({ '--fd-banner-height': `${bannerHeight}rem`, '--fd-nav-height': `${headerHeight}rem` }, (maxContentWidth
+    const cssVars = Object.assign({ '--fd-banner-height': `${bannerHeight}rem`, '--fd-header-height': `${headerHeight}rem` }, (maxContentWidth
         ? {
             '--fd-nav-max-width': typeof maxContentWidth === 'number'
                 ? `${maxContentWidth}px`
@@ -136,17 +133,14 @@ function CustomNavbar(_a) {
             : maxContentWidth
         : '88rem';
     const minNavWidth = '15rem';
-    const floatingWidth = `clamp(${minNavWidth}, 100vw, ${resolvedMaxWidth})`;
     const widthStyle = floating
-        ? { width: floatingWidth }
+        ? { width: `clamp(${minNavWidth}, 100vw, ${resolvedMaxWidth})` }
         : { width: '100%', maxWidth: resolvedMaxWidth, minWidth: minNavWidth };
     const headerStyle = Object.assign(Object.assign(Object.assign({}, cssVars), widthStyle), style);
     return (jsx(NavigationMenu, { value: value, onValueChange: setValue, asChild: true, children: jsxs("header", Object.assign({}, props, { style: headerStyle, className: cn('rounded-2xl border px-4 py-1 transition-[background-color,box-shadow,transform] duration-300 backdrop-blur-xl shadow-lg shadow-black/5', floating
                 ? 'fixed left-1/2 top-[--fd-banner-height] z-1001 -translate-x-1/2'
-                : 'relative mx-auto w-full', isTransparent
-                ? 'border-transparent bg-transparent shadow-transparent'
-                : 'border border-fd-border/60 bg-white/85 dark:border-white/20 dark:bg-neutral-900/75', value.length > 0 &&
-                'max-lg:rounded-b-3xl border-fd-border/60 bg-white dark:border-white/20 dark:bg-neutral-900', className), children: [jsx(NavigationMenuList, { className: "flex w-full items-center gap-4 px-1", style: { height: 'var(--fd-nav-height)' }, asChild: true, children: jsx("nav", { children: props.children }) }), jsx(NavigationMenuViewport, {})] })) }));
+                : 'relative mx-auto w-full', 'border border-fd-border/60 bg-white/85 dark:border-white/20 dark:bg-neutral-900/75', value.length > 0 &&
+                'max-lg:rounded-b-3xl border-fd-border/60 bg-white dark:border-white/20 dark:bg-neutral-900', className), children: [jsx(NavigationMenuList, { className: "flex w-full items-center gap-4 px-1", style: { height: 'var(--fd-header-height)' }, asChild: true, children: jsx("nav", { children: props.children }) }), jsx(NavigationMenuViewport, {})] })) }));
 }
 const navItemVariants = cva('[&_svg]:size-4', {
     variants: {
@@ -181,7 +175,7 @@ function NavbarLinkItem(_a) {
         });
         return (jsxs(NavigationMenuItem, { children: [jsx(NavigationMenuTrigger, Object.assign({}, props, { className: cn(navItemVariants(), 'rounded-md', props.className), children: item.url ? (jsx(Link, { href: item.url, external: item.external, children: item.text })) : (item.text) })), jsx(NavigationMenuContent, { className: "grid grid-cols-1 gap-2 p-4 md:grid-cols-2 lg:grid-cols-3", children: children })] }));
     }
-    return (jsx(NavigationMenuItem, { children: jsx(NavigationMenuLink, { asChild: true, children: jsx(BaseLinkItem, Object.assign({ item: item, "aria-label": item.type === 'icon' ? item.label : undefined }, props, { className: cn(navItemVariants({ variant: item.type }), props.className), children: item.type === 'icon' ? item.icon : item.text })) }) }));
+    return (jsx(NavigationMenuItem, { children: jsx(NavigationMenuLink, { asChild: true, children: jsx(LinkItem, Object.assign({ item: item, "aria-label": item.type === 'icon' ? item.label : undefined }, props, { className: cn(navItemVariants({ variant: item.type }), props.className), children: item.type === 'icon' ? item.icon : item.text })) }) }));
 }
 const Menu = NavigationMenuItem;
 function MenuLinkItem(_a) {
@@ -193,7 +187,7 @@ function MenuLinkItem(_a) {
         const header = (jsxs(Fragment, { children: [item.icon, item.text] }));
         return (jsxs("div", { className: cn('mb-4 flex flex-col', props.className), children: [jsx("p", { className: "mb-1 text-sm text-fd-muted-foreground", children: item.url ? (jsx(NavigationMenuLink, { asChild: true, children: jsx(Link, { href: item.url, external: item.external, children: header }) })) : (header) }), item.items.map((child, i) => (jsx(MenuLinkItem, { item: child }, i)))] }));
     }
-    return (jsx(NavigationMenuLink, { asChild: true, children: jsxs(BaseLinkItem, { item: item, className: cn({
+    return (jsx(NavigationMenuLink, { asChild: true, children: jsxs(LinkItem, { item: item, className: cn({
                 main: 'inline-flex items-center gap-2 py-1.5 transition-colors hover:text-fd-popover-foreground/50 data-[active=true]:font-medium data-[active=true]:text-fd-primary [&_svg]:size-4',
                 icon: buttonVariants({
                     size: 'icon',
@@ -238,5 +232,13 @@ function isSecondary(item) {
 function isMobilePinned(item) {
     return Boolean(item.mobilePinned);
 }
+function renderNavTitle(title) {
+    var _a;
+    if (typeof title === 'function') {
+        const TitleComponent = title;
+        return jsx(TitleComponent, {});
+    }
+    return (_a = title) !== null && _a !== void 0 ? _a : null;
+}
 
 export { CustomHomeHeader };

package/dist/fuma/base/custom-home-layout.d.ts

@@ -1,6 +1,6 @@
 import type { CSSProperties, ReactNode } from 'react';
 import { type HomeLayoutProps } from 'fumadocs-ui/layouts/home';
-import { type LinkItemType } from 'fumadocs-ui/layouts/docs';
+import { type LinkItemType } from 'fumadocs-ui/layouts/shared';
 import { type DesktopAction, type MobileBarAction, type MobileMenuAction } from './custom-header';
 export type ExtendedLinkItem = LinkItemType & {
     mobilePinned?: boolean;

package/dist/fuma/base/custom-home-layout.js

@@ -11,7 +11,7 @@ var customHeader = require('./custom-header.js');
 function CustomHomeLayout({ locale, options, children, showBanner = false, bannerHeight, headerHeight = 2.5, headerPaddingTop, navbarClassName, banner, footer: footer$1, goToTop: goToTop$1, showFooter = true, showGoToTop = true, style, floatingNav = false, actionOrders, localePrefixAsNeeded = true, defaultLocale = 'en', }) {
     const resolvedBannerHeight = bannerHeight !== null && bannerHeight !== void 0 ? bannerHeight : (showBanner ? 3 : 0.5);
     const resolvedPaddingTop = headerPaddingTop !== null && headerPaddingTop !== void 0 ? headerPaddingTop : (showBanner ? 0 : 0.5);
-    const layoutStyle = Object.assign({ '--fd-banner-height': `${resolvedBannerHeight}rem`, '--fd-nav-height': `${headerHeight}rem`, paddingTop: floatingNav
+    const layoutStyle = Object.assign({ '--fd-banner-height': `${resolvedBannerHeight}rem`, '--fd-header-height': `${headerHeight}rem`, paddingTop: floatingNav
             ? `calc(var(--fd-banner-height) + ${resolvedPaddingTop}rem)`
             : `${resolvedPaddingTop}rem` }, style);
     const { nav } = options, homeLayoutProps = tslib.__rest(options, ["nav"]);

package/dist/fuma/base/custom-home-layout.mjs

@@ -9,7 +9,7 @@ import { CustomHomeHeader } from './custom-header.mjs';
 function CustomHomeLayout({ locale, options, children, showBanner = false, bannerHeight, headerHeight = 2.5, headerPaddingTop, navbarClassName, banner, footer, goToTop, showFooter = true, showGoToTop = true, style, floatingNav = false, actionOrders, localePrefixAsNeeded = true, defaultLocale = 'en', }) {
     const resolvedBannerHeight = bannerHeight !== null && bannerHeight !== void 0 ? bannerHeight : (showBanner ? 3 : 0.5);
     const resolvedPaddingTop = headerPaddingTop !== null && headerPaddingTop !== void 0 ? headerPaddingTop : (showBanner ? 0 : 0.5);
-    const layoutStyle = Object.assign({ '--fd-banner-height': `${resolvedBannerHeight}rem`, '--fd-nav-height': `${headerHeight}rem`, paddingTop: floatingNav
+    const layoutStyle = Object.assign({ '--fd-banner-height': `${resolvedBannerHeight}rem`, '--fd-header-height': `${headerHeight}rem`, paddingTop: floatingNav
             ? `calc(var(--fd-banner-height) + ${resolvedPaddingTop}rem)`
             : `${resolvedPaddingTop}rem` }, style);
     const { nav } = options, homeLayoutProps = __rest(options, ["nav"]);

package/dist/fuma/base/header-theme-switch.d.ts

@@ -0,0 +1,5 @@
+import { type ComponentProps } from 'react';
+export interface HeaderThemeSwitchProps extends ComponentProps<'div'> {
+    mode?: 'light-dark' | 'light-dark-system';
+}
+export declare function HeaderThemeSwitch({ className, mode, ...props }: HeaderThemeSwitchProps): import("react/jsx-runtime").JSX.Element;

package/dist/fuma/base/header-theme-switch.js

@@ -0,0 +1,42 @@
+"use client";
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var classVarianceAuthority = require('class-variance-authority');
+var icons = require('@windrun-huaiin/base-ui/icons');
+var nextThemes = require('next-themes');
+var React = require('react');
+var utils = require('@windrun-huaiin/lib/utils');
+
+const itemVariants = classVarianceAuthority.cva('inline-flex size-6.5 items-center justify-center rounded-full p-1.5', {
+    variants: {
+        active: {
+            true: 'bg-fd-accent',
+            false: '',
+        },
+    },
+});
+const full = [['light', icons.SunIcon], ['dark', icons.MoonIcon], ['system', icons.AirplayIcon]];
+function HeaderThemeSwitch(_a) {
+    var { className, mode = 'light-dark' } = _a, props = tslib.__rest(_a, ["className", "mode"]);
+    const { setTheme, theme, resolvedTheme } = nextThemes.useTheme();
+    const [mounted, setMounted] = React.useState(false);
+    React.useEffect(() => {
+        setMounted(true);
+    }, []);
+    const container = utils.cn('inline-flex items-center rounded-full border p-1 overflow-hidden *:rounded-full', className);
+    const iconClassName = 'size-3.5 text-neutral-600 dark:text-neutral-300';
+    if (mode === 'light-dark') {
+        const value = mounted ? resolvedTheme : null;
+        return (jsxRuntime.jsx("button", { type: "button", className: container, "aria-label": "Toggle Theme", onClick: () => setTheme(value === 'light' ? 'dark' : 'light'), "data-theme-toggle": "", children: full.map(([key, Icon]) => {
+                if (key === 'system')
+                    return null;
+                return (jsxRuntime.jsx(Icon, { fill: "currentColor", className: utils.cn(itemVariants({ active: value === key }), iconClassName) }, key));
+            }) }));
+    }
+    const value = mounted ? theme : null;
+    return (jsxRuntime.jsx("div", Object.assign({ className: container, "data-theme-toggle": "" }, props, { children: full.map(([key, Icon]) => (jsxRuntime.jsx("button", { type: "button", "aria-label": key, className: utils.cn(itemVariants({ active: value === key })), onClick: () => setTheme(key), children: jsxRuntime.jsx(Icon, { className: iconClassName, fill: "currentColor" }) }, key))) })));
+}
+
+exports.HeaderThemeSwitch = HeaderThemeSwitch;