@windrun-huaiin/third-ui 21.0.0 → 22.0.0

package/src/fuma/base/custom-header.tsx

@@ -5,28 +5,24 @@ import {
   type CSSProperties,
   Fragment,
   type ReactNode,
+  type FC,
   useMemo,
   useState,
 } from 'react';
 import { cva } from 'class-variance-authority';
 import { ChevronDownIcon, LanguagesIcon } from '@windrun-huaiin/base-ui/icons';
+import { cn } from '@windrun-huaiin/lib/utils';
 import Link from 'fumadocs-core/link';
 import { HomeLayoutProps } from 'fumadocs-ui/layouts/home';
 import {
-  BaseLinkItem,
+  LinkItem,
   type LinkItemType,
-  getLinks,
+  resolveLinkItems,
 } 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,
   type LanguageSelectProps,
-} from 'fumadocs-ui/components/layout/language-toggle';
+  LanguageSelectText,
+} from 'fumadocs-ui/layouts/shared/slots/language-select';
 import {
   NavigationMenu,
   NavigationMenuContent,
@@ -38,12 +34,12 @@ import {
 } from 'fumadocs-ui/components/ui/navigation-menu';
 import { Popover, PopoverContent, PopoverTrigger } 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';
 
 export type NavbarCSSVars = CSSProperties & {
   '--fd-banner-height'?: string;
-  '--fd-nav-height'?: string;
+  '--fd-header-height'?: string;
   '--fd-nav-max-width'?: string;
 };
 
@@ -143,7 +139,7 @@ export function CustomHomeHeader({
   mobileMenuActionsOrder = DEFAULT_MOBILE_MENU_ACTIONS,
 }: CustomHomeHeaderProps) {
   const finalLinks = useMemo(
-    () => getLinks(links, githubUrl),
+    () => resolveLinkItems({ links, githubUrl }),
     [links, githubUrl],
   );
 
@@ -172,16 +168,11 @@ export function CustomHomeHeader({
   const desktopActionNodes: Record<DesktopAction, ReactNode> = {
     search:
       searchToggle.enabled !== false
-        ? searchToggle.components?.lg ?? (
-            <LargeSearchToggle
-              className="w-full rounded-full ps-2.5 max-w-[240px]"
-              hideIfDisabled
-            />
-          )
+        ? searchToggle.components?.lg ?? null
         : null,
     theme:
       themeSwitch.enabled !== false
-        ? themeSwitch.component ?? <ThemeToggle mode={themeSwitch?.mode} />
+        ? themeSwitch.component ?? <HeaderThemeSwitch mode={themeSwitch?.mode} />
         : null,
     i18n: i18n ? (
       <CompactLanguageToggle>
@@ -238,13 +229,13 @@ export function CustomHomeHeader({
     i18n: i18n ? (
       <CompactLanguageToggle>
         <LanguagesIcon className="size-5" />
-        <LanguageToggleText />
+        <LanguageSelectText />
         <ChevronDownIcon className="size-3 text-fd-muted-foreground" />
       </CompactLanguageToggle>
     ) : null,
     theme:
       themeSwitch.enabled !== false
-        ? themeSwitch.component ?? <ThemeToggle mode={themeSwitch?.mode} />
+        ? themeSwitch.component ?? <HeaderThemeSwitch mode={themeSwitch?.mode} />
         : null,
   };
   const shouldRenderMobileUtilities = mobileMenuActionsOrder.some(
@@ -305,9 +296,7 @@ export function CustomHomeHeader({
     ) : null;
   const mobileSearchNode =
     searchToggle.enabled !== false
-      ? searchToggle.components?.sm ?? (
-          <SearchToggle className="p-2" hideIfDisabled />
-        )
+      ? searchToggle.components?.sm ?? null
       : null;
   const mobileBarNodes: Record<MobileBarAction, ReactNode> = {
     pinned: mobilePinnedNode,
@@ -329,7 +318,7 @@ export function CustomHomeHeader({
         href={nav.url ?? '/'}
         className="inline-flex items-center gap-2.5 font-semibold"
       >
-        {nav.title}
+        {renderNavTitle(nav.title)}
       </Link>
       {nav.children}
       <ul className="flex flex-row items-center gap-2 px-6 max-sm:hidden">
@@ -379,11 +368,11 @@ function CustomNavbar({
   ...props
 }: CustomNavbarProps) {
   const [value, setValue] = useState('');
-  const { isTransparent } = useNav();
+  const isTransparent = false;
 
   const cssVars: NavbarCSSVars = {
     '--fd-banner-height': `${bannerHeight}rem`,
-    '--fd-nav-height': `${headerHeight}rem`,
+    '--fd-header-height': `${headerHeight}rem`,
     ...(maxContentWidth
       ? {
           '--fd-nav-max-width':
@@ -401,9 +390,8 @@ function CustomNavbar({
         : 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 = {
     ...cssVars,
@@ -431,7 +419,7 @@ function CustomNavbar({
       >
         <NavigationMenuList
           className="flex w-full items-center gap-4 px-1"
-          style={{ height: 'var(--fd-nav-height)' }}
+          style={{ height: 'var(--fd-header-height)' }}
           asChild
         >
           <nav>{props.children}</nav>
@@ -535,7 +523,7 @@ function NavbarLinkItem({
   return (
     <NavigationMenuItem>
       <NavigationMenuLink asChild>
-        <BaseLinkItem
+        <LinkItem
           item={item}
           aria-label={item.type === 'icon' ? item.label : undefined}
           {...props}
@@ -545,7 +533,7 @@ function NavbarLinkItem({
           )}
         >
           {item.type === 'icon' ? item.icon : item.text}
-        </BaseLinkItem>
+        </LinkItem>
       </NavigationMenuLink>
     </NavigationMenuItem>
   );
@@ -593,7 +581,7 @@ function MenuLinkItem({
 
   return (
     <NavigationMenuLink asChild>
-      <BaseLinkItem
+      <LinkItem
         item={item}
         className={cn(
           {
@@ -613,7 +601,7 @@ function MenuLinkItem({
       >
         {item.icon}
         {item.type === 'icon' ? undefined : item.text}
-      </BaseLinkItem>
+      </LinkItem>
     </NavigationMenuLink>
   );
 }
@@ -719,3 +707,12 @@ function isSecondary(item: LinkItemType): boolean {
 function isMobilePinned(item: LinkItemType): boolean {
   return Boolean((item as { mobilePinned?: boolean }).mobilePinned);
 }
+
+function renderNavTitle(title: unknown): ReactNode {
+  if (typeof title === 'function') {
+    const TitleComponent = title as FC<ComponentProps<'a'>>;
+    return <TitleComponent />;
+  }
+
+  return (title as ReactNode | null | undefined) ?? null;
+}

package/src/fuma/base/custom-home-layout.tsx

@@ -1,6 +1,6 @@
 import type { CSSProperties, ReactNode } from 'react';
 import { HomeLayout, type HomeLayoutProps } from 'fumadocs-ui/layouts/home';
-import { type LinkItemType } from 'fumadocs-ui/layouts/docs';
+import { type LinkItemType } from 'fumadocs-ui/layouts/shared';
 import { FumaBannerSuit } from '@third-ui/fuma/fuma-banner-suit';
 import { Footer } from '@third-ui/main/footer';
 import { GoToTop } from '@third-ui/main/go-to-top';
@@ -129,7 +129,7 @@ export function CustomHomeLayout({
 
   const layoutStyle: NavbarCSSVars = {
     '--fd-banner-height': `${resolvedBannerHeight}rem`,
-    '--fd-nav-height': `${headerHeight}rem`,
+    '--fd-header-height': `${headerHeight}rem`,
     paddingTop: floatingNav
       ? `calc(var(--fd-banner-height) + ${resolvedPaddingTop}rem)`
       : `${resolvedPaddingTop}rem`,

package/src/fuma/base/header-theme-switch.tsx

@@ -0,0 +1,88 @@
+'use client';
+
+import { cva } from 'class-variance-authority';
+import { AirplayIcon, MoonIcon, SunIcon } from '@windrun-huaiin/base-ui/icons';
+import { useTheme } from 'next-themes';
+import { type ComponentProps, useEffect, useState } from 'react';
+import { cn } from '@windrun-huaiin/lib/utils';
+
+const itemVariants = 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', SunIcon] as const, ['dark', MoonIcon] as const, ['system', AirplayIcon] as const];
+
+export interface HeaderThemeSwitchProps extends ComponentProps<'div'> {
+  mode?: 'light-dark' | 'light-dark-system';
+}
+
+export function HeaderThemeSwitch({
+  className,
+  mode = 'light-dark',
+  ...props
+}: HeaderThemeSwitchProps) {
+  const { setTheme, theme, resolvedTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const container = 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 (
+      <button
+        type="button"
+        className={container}
+        aria-label="Toggle Theme"
+        onClick={() => setTheme(value === 'light' ? 'dark' : 'light')}
+        data-theme-toggle=""
+      >
+        {full.map(([key, Icon]) => {
+          if (key === 'system') return null;
+
+          return (
+            <Icon
+              key={key}
+              fill="currentColor"
+              className={cn(
+                itemVariants({ active: value === key }),
+                iconClassName,
+              )}
+            />
+          );
+        })}
+      </button>
+    );
+  }
+
+  const value = mounted ? theme : null;
+
+  return (
+    <div className={container} data-theme-toggle="" {...props}>
+      {full.map(([key, Icon]) => (
+        <button
+          key={key}
+          type="button"
+          aria-label={key}
+          className={cn(itemVariants({ active: value === key }))}
+          onClick={() => setTheme(key)}
+        >
+          <Icon className={iconClassName} fill="currentColor" />
+        </button>
+      ))}
+    </div>
+  );
+}

package/src/fuma/base/index.ts

@@ -1,2 +1,3 @@
 export * from './custom-header';
 export * from './custom-home-layout';
+export * from './site-layout';

package/src/fuma/base/site-layout.tsx

@@ -0,0 +1,289 @@
+import { type ComponentProps, type HTMLAttributes, type ReactNode } from 'react';
+import { RootProvider } from 'fumadocs-ui/provider/next';
+import { DocsLayout, type DocsLayoutProps } from 'fumadocs-ui/layouts/docs';
+import { type HomeLayoutProps } from 'fumadocs-ui/layouts/home';
+import { CustomHomeLayout, type CustomHomeLayoutProps, type ExtendedLinkItem, type HeaderActionOrders } from './custom-home-layout';
+
+type RootProviderI18n = NonNullable<ComponentProps<typeof RootProvider>['i18n']>;
+
+export interface DocsRootProviderProps {
+  i18n: RootProviderI18n;
+  children: ReactNode;
+}
+
+type SiteMenuConfig = HTMLAttributes<HTMLElement> & {
+  banner?: ReactNode;
+};
+
+interface SiteNavSharedFields {
+  secondary?: boolean;
+  mobilePinned?: boolean;
+}
+
+export interface SiteNavLinkItemConfig extends SiteNavSharedFields {
+  type?: 'main' | 'icon' | 'button';
+  text: ReactNode;
+  url: string;
+  external?: boolean;
+  icon?: ReactNode;
+  description?: ReactNode;
+  menu?: SiteMenuConfig;
+  on?: 'nav' | 'menu' | 'all';
+  label?: string;
+}
+
+export interface SiteNavMenuItemConfig extends SiteNavSharedFields {
+  type: 'menu';
+  text: ReactNode;
+  url?: string;
+  external?: boolean;
+  icon?: ReactNode;
+  description?: ReactNode;
+  items: SiteNavItemConfig[];
+  menu?: SiteMenuConfig;
+  on?: 'nav' | 'menu' | 'all';
+}
+
+export interface SiteNavCustomItemConfig extends SiteNavSharedFields {
+  type: 'custom';
+  children: ReactNode;
+}
+
+export type SiteNavItemConfig =
+  | SiteNavLinkItemConfig
+  | SiteNavMenuItemConfig
+  | SiteNavCustomItemConfig;
+
+export interface SiteBaseLayoutConfig {
+  nav?: HomeLayoutProps['nav'];
+  i18n?: HomeLayoutProps['i18n'];
+  githubUrl?: string;
+  links?: SiteNavItemConfig[];
+  searchToggle?: HomeLayoutProps['searchToggle'];
+  themeSwitch?: HomeLayoutProps['themeSwitch'];
+}
+
+export interface SiteHomeLayoutConfig extends SiteBaseLayoutConfig {
+  showBanner?: boolean;
+  bannerHeight?: number;
+  headerHeight?: number;
+  headerPaddingTop?: number;
+  navbarClassName?: string;
+  floatingNav?: boolean;
+  banner?: ReactNode;
+  footer?: ReactNode;
+  goToTop?: ReactNode;
+  showFooter?: boolean;
+  showGoToTop?: boolean;
+  actionOrders?: HeaderActionOrders;
+  localePrefixAsNeeded?: boolean;
+  defaultLocale?: string;
+}
+
+export interface SiteDocsLayoutConfig extends SiteBaseLayoutConfig {
+  tree: DocsLayoutProps['tree'];
+  sidebar?: DocsLayoutProps['sidebar'];
+}
+
+export interface SiteMenuLeafConfig {
+  text: ReactNode;
+  path: string;
+  description?: ReactNode;
+  icon?: ReactNode;
+  className?: string;
+  external?: boolean;
+}
+
+export interface SiteMenuGroupConfig {
+  text: ReactNode;
+  path?: string;
+  landing?: SiteMenuLeafConfig;
+  items: SiteMenuLeafConfig[];
+}
+
+export interface CreateSiteNavItemContext {
+  resolveUrl: (path: string) => string;
+}
+
+export interface CreateSiteNavGroupOptions {
+  featuredClassName?: string;
+  featuredBanner?: ReactNode;
+}
+
+export interface CreateSiteBaseLayoutOptions {
+  homeUrl: string;
+  title: ReactNode;
+  i18n?: HomeLayoutProps['i18n'];
+  githubUrl?: string;
+  transparentMode?: HomeLayoutProps['nav'] extends infer T
+    ? T extends { transparentMode?: infer U }
+      ? U
+      : never
+    : never;
+}
+
+function normalizeNavItems(items?: SiteNavItemConfig[]): ExtendedLinkItem[] | undefined {
+  if (!items) return undefined;
+
+  return items.map((item) => {
+    if (item.type === 'menu') {
+      return {
+        ...item,
+        items: normalizeNavItems(item.items) ?? [],
+      } as ExtendedLinkItem;
+    }
+
+    return item as ExtendedLinkItem;
+  });
+}
+
+export function createSiteNavLink(
+  item: SiteMenuLeafConfig,
+  context: CreateSiteNavItemContext,
+): SiteNavLinkItemConfig {
+  return {
+    type: 'main',
+    text: item.text,
+    ...(item.description ? { description: item.description } : {}),
+    url: context.resolveUrl(item.path),
+    ...(item.external ? { external: item.external } : {}),
+    ...(item.icon || item.className
+      ? {
+          menu: {
+            ...(item.icon ? { banner: item.icon } : {}),
+            ...(item.className ? { className: item.className } : {}),
+          },
+        }
+      : {}),
+  };
+}
+
+export function createSiteNavGroup(
+  item: SiteMenuGroupConfig,
+  context: CreateSiteNavItemContext,
+  options?: CreateSiteNavGroupOptions,
+): SiteNavMenuItemConfig {
+  return {
+    type: 'menu',
+    text: item.text,
+    ...(item.path ? { url: context.resolveUrl(item.path) } : {}),
+    items: [
+      ...(item.landing
+        ? [
+            {
+              ...createSiteNavLink(item.landing, context),
+              menu: {
+                ...(options?.featuredBanner ? { banner: options.featuredBanner } : {}),
+                className: options?.featuredClassName ?? 'md:row-span-2',
+              },
+            } satisfies SiteNavLinkItemConfig,
+          ]
+        : []),
+      ...item.items.map((child) => createSiteNavLink(child, context)),
+    ],
+  };
+}
+
+export function createSiteBaseLayoutConfig(
+  options: CreateSiteBaseLayoutOptions,
+): SiteBaseLayoutConfig {
+  return {
+    nav: {
+      url: options.homeUrl,
+      title: options.title,
+      transparentMode: options.transparentMode ?? 'none',
+    },
+    ...(options.i18n ? { i18n: options.i18n } : {}),
+    ...(options.githubUrl ? { githubUrl: options.githubUrl } : {}),
+  };
+}
+
+function toHomeLayoutOptions(config: SiteBaseLayoutConfig): HomeLayoutProps {
+  return {
+    ...(config.nav ? { nav: config.nav } : {}),
+    ...(config.i18n ? { i18n: config.i18n } : {}),
+    ...(config.githubUrl ? { githubUrl: config.githubUrl } : {}),
+    ...(config.links ? { links: normalizeNavItems(config.links) } : {}),
+    ...(config.searchToggle ? { searchToggle: config.searchToggle } : {}),
+    ...(config.themeSwitch ? { themeSwitch: config.themeSwitch } : {}),
+  };
+}
+
+function toDocsLayoutOptions(config: SiteDocsLayoutConfig): DocsLayoutProps {
+  return {
+    ...(config.nav ? { nav: config.nav } : {}),
+    ...(config.i18n ? { i18n: config.i18n } : {}),
+    ...(config.githubUrl ? { githubUrl: config.githubUrl } : {}),
+    ...(config.links ? { links: normalizeNavItems(config.links) } : {}),
+    ...(config.searchToggle ? { searchToggle: config.searchToggle } : {}),
+    ...(config.themeSwitch ? { themeSwitch: config.themeSwitch } : {}),
+    ...(config.sidebar ? { sidebar: config.sidebar } : {}),
+    tree: config.tree,
+  };
+}
+
+export function DocsRootProvider({ i18n, children }: DocsRootProviderProps) {
+  return <RootProvider i18n={i18n}>{children}</RootProvider>;
+}
+
+export function SiteHomeLayout({
+  locale,
+  config,
+  children,
+}: {
+  locale: string;
+  config: SiteHomeLayoutConfig;
+  children: ReactNode;
+}) {
+  const {
+    actionOrders,
+    banner,
+    bannerHeight,
+    defaultLocale,
+    floatingNav,
+    footer,
+    goToTop,
+    headerHeight,
+    headerPaddingTop,
+    localePrefixAsNeeded,
+    navbarClassName,
+    showBanner,
+    showFooter,
+    showGoToTop,
+    ...baseConfig
+  } = config;
+
+  const options = toHomeLayoutOptions(baseConfig);
+
+  const layoutProps: CustomHomeLayoutProps = {
+    locale,
+    options,
+    ...(actionOrders ? { actionOrders } : {}),
+    ...(banner ? { banner } : {}),
+    ...(bannerHeight != null ? { bannerHeight } : {}),
+    ...(defaultLocale ? { defaultLocale } : {}),
+    ...(floatingNav != null ? { floatingNav } : {}),
+    ...(footer ? { footer } : {}),
+    ...(goToTop ? { goToTop } : {}),
+    ...(headerHeight != null ? { headerHeight } : {}),
+    ...(headerPaddingTop != null ? { headerPaddingTop } : {}),
+    ...(localePrefixAsNeeded != null ? { localePrefixAsNeeded } : {}),
+    ...(navbarClassName ? { navbarClassName } : {}),
+    ...(showBanner != null ? { showBanner } : {}),
+    ...(showFooter != null ? { showFooter } : {}),
+    ...(showGoToTop != null ? { showGoToTop } : {}),
+  };
+
+  return <CustomHomeLayout {...layoutProps}>{children}</CustomHomeLayout>;
+}
+
+export function SiteDocsLayout({
+  config,
+  children,
+}: {
+  config: SiteDocsLayoutConfig;
+  children: ReactNode;
+}) {
+  const options = toDocsLayoutOptions(config);
+  return <DocsLayout {...options}>{children}</DocsLayout>;
+}

package/src/fuma/fuma-banner-suit.tsx

@@ -10,36 +10,38 @@ export async function FumaBannerSuit({
   showBanner: boolean;
   floating?: boolean;
 }) {
-  const t = await getTranslations({ locale, namespace: 'home' });
-  const heightValue = showBanner ? 3 : 0.5;
+  const heightValue = 3;
   const height = `${heightValue}rem`;
+
+  if (!showBanner) {
+    return (
+      <div
+        aria-hidden="true"
+        className="m-0 rounded-none bg-neutral-100 dark:bg-neutral-900"
+        style={{
+          position: floating ? 'fixed' : 'relative',
+          top: floating ? 0 : undefined,
+          left: floating ? 0 : undefined,
+          width: floating ? '100vw' : '100%',
+          zIndex: floating ? 1001 : undefined,
+          height,
+          minHeight: height,
+          maxHeight: height,
+        }}
+      />
+    );
+  }
+
+  const t = await getTranslations({ locale, namespace: 'home' });
   const bannerText = t('banner');
   return (
-    <>
-      {showBanner ? (
-        <Banner
-          variant="rainbow"
-          changeLayout={true}
-          height={heightValue}
-          floating={floating}
-        >
-          <p className="text-sm sm:text-xl md:text-xl">{bannerText}</p>
-        </Banner>
-      ) : (
-        <div
-          className="m-0 rounded-none bg-neutral-100 dark:bg-neutral-900"
-          style={{
-            position: floating ? 'fixed' : 'relative',
-            top: floating ? 0 : undefined,
-            left: floating ? 0 : undefined,
-            width: floating ? '100vw' : '100%',
-            zIndex: floating ? 1001 : undefined,
-            height: height,
-            minHeight: height,
-            maxHeight: height,
-          }}
-        />
-      )}
-    </>
+    <Banner
+      variant="rainbow"
+      changeLayout={true}
+      height={heightValue}
+      floating={floating}
+    >
+      <p className="text-sm sm:text-xl md:text-xl">{bannerText}</p>
+    </Banner>
   );
 }

package/src/fuma/fuma-page-genarator.tsx

@@ -137,7 +137,7 @@ export function createFumaPage({
           enabled: false,
         }}
         toc={content.toc}
-        article={{ className: 'max-sm:pb-16' }}
+        className="max-sm:pb-16"
       >
         <DocsTitle>{page.data.title}</DocsTitle>
         <DocsDescription className="mb-2">{page.data.description}</DocsDescription>

package/src/fuma/{mdx → heavy}/image-grid.tsx

@@ -32,4 +32,4 @@ export function ImageGrid({
       ))}
     </div>
   );
-} 
+} 

package/src/fuma/heavy/index.ts

@@ -0,0 +1,7 @@
+'use client';
+
+export * from './image-zoom';
+export * from './image-grid';
+export * from './math';
+export * from './mermaid';
+

package/src/fuma/mdx/index.ts

@@ -1,9 +1,6 @@
 'use client';
 
-export * from './mermaid';
-export * from './image-zoom';
 export * from './trophy-card';
-export * from './image-grid';
 export * from './zia-card';
 export * from './gradient-button';
 export * from './toc-base';
@@ -13,5 +10,3 @@ export * from './toc-footer-wrapper';
 export * from './toc-clerk-portable';
 export * from './banner';
 export * from './suno-embed';
-export * from './markdown-component-map';
-export * from './math';