fumadocs-ui 13.4.9 → 14.0.0

package/dist/layouts/home.client.js

@@ -0,0 +1,274 @@
+"use client";
+import {
+  BaseLinkItem,
+  ButtonItem,
+  IconItem,
+  ThemeToggle
+} from "../chunk-PZTQPB4U.js";
+import {
+  LargeSearchToggle,
+  SearchToggle
+} from "../chunk-V6RONFCQ.js";
+import {
+  LanguageToggle,
+  LanguageToggleText
+} from "../chunk-KZTWSBYY.js";
+import "../chunk-CDPVENXR.js";
+import {
+  buttonVariants
+} from "../chunk-QKOA6KEZ.js";
+import {
+  NavContext,
+  NavProvider,
+  Title
+} from "../chunk-MCX7E6ZW.js";
+import "../chunk-IVBHRX3O.js";
+import {
+  ChevronDown,
+  Languages
+} from "../chunk-5QPVK7QM.js";
+import {
+  twMerge
+} from "../chunk-TK3TM3MR.js";
+import {
+  useSearchContext
+} from "../chunk-ET4TW6M5.js";
+import "../chunk-EFMHXXHW.js";
+import "../chunk-MLKGABMK.js";
+
+// src/layouts/home.client.tsx
+import { useContext, useMemo, useState } from "react";
+
+// src/layouts/nav-item.tsx
+import { Fragment } from "react";
+import { cva } from "class-variance-authority";
+import Link2 from "fumadocs-core/link";
+
+// src/components/ui/navigation-menu.tsx
+import * as React from "react";
+import * as Primitive from "@radix-ui/react-navigation-menu";
+import { jsx } from "react/jsx-runtime";
+var NavigationMenu = Primitive.Root;
+var NavigationMenuList = Primitive.List;
+var NavigationMenuItem = Primitive.Item;
+var NavigationMenuTrigger = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+  Primitive.Trigger,
+  {
+    ref,
+    className: twMerge("data-[state=open]:bg-fd-accent/50", className),
+    ...props,
+    children
+  }
+));
+NavigationMenuTrigger.displayName = Primitive.Trigger.displayName;
+var NavigationMenuContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Primitive.Content,
+  {
+    ref,
+    className: twMerge(
+      "absolute inset-x-0 top-0 data-[motion=from-end]:animate-fd-enterFromRight data-[motion=from-start]:animate-fd-enterFromLeft data-[motion=to-end]:animate-fd-exitToRight data-[motion=to-start]:animate-fd-exitToLeft",
+      className
+    ),
+    ...props
+  }
+));
+NavigationMenuContent.displayName = Primitive.Content.displayName;
+var NavigationMenuLink = Primitive.Link;
+var NavigationMenuViewport = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: "flex w-full justify-center", children: /* @__PURE__ */ jsx(
+  Primitive.Viewport,
+  {
+    ...props,
+    className: twMerge(
+      "relative h-[var(--radix-navigation-menu-viewport-height)] w-full origin-[top_center] overflow-hidden text-fd-popover-foreground transition-[width,height] duration-300 data-[state=closed]:animate-fd-nav-menu-out data-[state=open]:animate-fd-nav-menu-in",
+      className
+    )
+  }
+) }));
+NavigationMenuViewport.displayName = Primitive.Viewport.displayName;
+
+// src/layouts/nav-item.tsx
+import { Fragment as Fragment2, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var navItemVariants = cva(
+  "inline-flex items-center gap-1 p-2 text-fd-muted-foreground transition-colors hover:text-fd-accent-foreground data-[active=true]:text-fd-primary [&_svg]:size-4"
+);
+function NavItem({ item, ...props }) {
+  if (item.type === "custom") return /* @__PURE__ */ jsx2("div", { ...props, children: item.children });
+  if (item.type === "menu") {
+    return /* @__PURE__ */ jsxs(NavigationMenuItem, { ...props, children: [
+      /* @__PURE__ */ jsx2(NavigationMenuTrigger, { className: twMerge(navItemVariants(), "rounded-md"), children: item.url ? /* @__PURE__ */ jsx2(Link2, { href: item.url, children: item.text }) : item.text }),
+      /* @__PURE__ */ jsx2(NavigationMenuContent, { className: "grid grid-cols-1 gap-3 px-4 pb-4 md:grid-cols-2 lg:grid-cols-3", children: /* @__PURE__ */ jsx2(MenuItemContent, { item }) })
+    ] });
+  }
+  if (item.type === "button") {
+    return /* @__PURE__ */ jsx2(NavigationMenuItem, { ...props, children: /* @__PURE__ */ jsx2(NavigationMenuLink, { asChild: true, children: /* @__PURE__ */ jsx2(ButtonItem, { item }) }) });
+  }
+  if (item.type === "icon") {
+    return /* @__PURE__ */ jsx2(NavigationMenuItem, { ...props, children: /* @__PURE__ */ jsx2(NavigationMenuLink, { asChild: true, children: /* @__PURE__ */ jsx2(IconItem, { item }) }) });
+  }
+  return /* @__PURE__ */ jsx2(NavigationMenuItem, { ...props, children: /* @__PURE__ */ jsx2(NavigationMenuLink, { asChild: true, children: /* @__PURE__ */ jsx2(BaseLinkItem, { item, className: twMerge(navItemVariants()), children: item.text }) }) });
+}
+function MenuItemContent({ item }) {
+  return /* @__PURE__ */ jsx2(Fragment2, { children: item.items.map((child, i) => {
+    if (child.type === "custom")
+      return /* @__PURE__ */ jsx2(Fragment, { children: child.children }, i);
+    const { banner, footer, ...menuProps } = child.menu ?? {};
+    return /* @__PURE__ */ jsx2(NavigationMenuLink, { asChild: true, children: /* @__PURE__ */ jsxs(
+      Link2,
+      {
+        external: child.external,
+        href: child.url,
+        ...menuProps,
+        className: twMerge(
+          "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",
+          menuProps.className
+        ),
+        children: [
+          banner ?? (child.icon ? /* @__PURE__ */ jsx2("div", { className: "w-fit rounded-md border bg-fd-muted p-1 [&_svg]:size-4", children: child.icon }) : null),
+          /* @__PURE__ */ jsx2("p", { className: "-mb-1 text-sm font-medium", children: child.text }),
+          child.description ? /* @__PURE__ */ jsx2("p", { className: "text-[13px] text-fd-muted-foreground", children: child.description }) : null,
+          footer
+        ]
+      }
+    ) }, i);
+  }) });
+}
+function MenuItem({ item, ...rest }) {
+  if (item.type === "button") {
+    return /* @__PURE__ */ jsx2(NavigationMenuLink, { asChild: true, children: /* @__PURE__ */ jsx2(ButtonItem, { item, ...rest }) });
+  }
+  if (item.type === "custom")
+    return /* @__PURE__ */ jsx2("div", { ...rest, className: twMerge("grid", rest.className), children: item.children });
+  if (item.type === "menu") {
+    return /* @__PURE__ */ jsxs("div", { ...rest, className: twMerge("mb-4 flex flex-col", rest.className), children: [
+      /* @__PURE__ */ jsx2("p", { className: "mb-1 text-sm text-fd-muted-foreground", children: item.url ? /* @__PURE__ */ jsx2(NavigationMenuLink, { asChild: true, children: /* @__PURE__ */ jsxs(Link2, { href: item.url, children: [
+        item.icon,
+        item.text
+      ] }) }) : /* @__PURE__ */ jsxs(Fragment2, { children: [
+        item.icon,
+        item.text
+      ] }) }),
+      item.items.map((child, i) => /* @__PURE__ */ jsx2(MenuItem, { item: child }, i))
+    ] });
+  }
+  if (item.type === "icon") {
+    return /* @__PURE__ */ jsx2(NavigationMenuLink, { asChild: true, children: /* @__PURE__ */ jsx2(IconItem, { item }) });
+  }
+  return /* @__PURE__ */ jsx2(NavigationMenuLink, { asChild: true, children: /* @__PURE__ */ jsxs(
+    BaseLinkItem,
+    {
+      item,
+      ...rest,
+      className: twMerge(
+        "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",
+        rest.className
+      ),
+      children: [
+        item.icon,
+        item.text
+      ]
+    }
+  ) });
+}
+
+// src/layouts/home.client.tsx
+import { Fragment as Fragment3, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function Nav({
+  items,
+  enableSearch = true,
+  ...props
+}) {
+  const search = useSearchContext();
+  const [navItems, menuItems] = useMemo(
+    () => [
+      items.filter((item) => ["nav", "all"].includes(item.on ?? "all")),
+      items.filter((item) => ["menu", "all"].includes(item.on ?? "all"))
+    ],
+    [items]
+  );
+  return /* @__PURE__ */ jsxs2(Fragment3, { children: [
+    /* @__PURE__ */ jsx3(
+      "div",
+      {
+        "aria-hidden": "true",
+        className: "fixed inset-x-0 top-[var(--fd-banner-height)] z-40 h-6 bg-fd-background",
+        style: {
+          maskImage: "linear-gradient(to bottom,white,transparent)"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs2(Header, { children: [
+      /* @__PURE__ */ jsx3(Title, { title: props.title, url: props.url }),
+      props.children,
+      /* @__PURE__ */ jsx3(NavigationMenuList, { className: "flex flex-row items-center gap-2 max-sm:hidden", children: navItems.filter((item) => !isSecondary(item)).map((item, i) => /* @__PURE__ */ jsx3(NavItem, { item, className: "text-sm" }, i)) }),
+      /* @__PURE__ */ jsxs2("div", { className: "flex flex-1 flex-row items-center justify-end lg:gap-1.5", children: [
+        enableSearch && search.enabled ? /* @__PURE__ */ jsxs2(Fragment3, { children: [
+          /* @__PURE__ */ jsx3(SearchToggle, { className: "lg:hidden" }),
+          /* @__PURE__ */ jsx3(LargeSearchToggle, { className: "w-full max-w-[240px] max-lg:hidden" })
+        ] }) : null,
+        !props.disableThemeSwitch ? /* @__PURE__ */ jsx3(ThemeToggle, { className: "max-lg:hidden" }) : null,
+        props.i18n ? /* @__PURE__ */ jsx3(LanguageToggle, { className: "-me-1.5 max-lg:hidden", children: /* @__PURE__ */ jsx3(Languages, { className: "size-5" }) }) : null,
+        navItems.filter(isSecondary).map((item, i) => /* @__PURE__ */ jsx3(
+          NavItem,
+          {
+            item,
+            className: "-me-1.5 list-none max-lg:hidden"
+          },
+          i
+        )),
+        /* @__PURE__ */ jsxs2(NavigationMenuItem, { className: "list-none lg:hidden", children: [
+          /* @__PURE__ */ jsx3(
+            NavigationMenuTrigger,
+            {
+              className: twMerge(
+                buttonVariants({
+                  size: "icon",
+                  color: "ghost"
+                }),
+                "group -me-2"
+              ),
+              children: /* @__PURE__ */ jsx3(ChevronDown, { className: "size-3 transition-transform duration-300 group-data-[state=open]:rotate-180" })
+            }
+          ),
+          /* @__PURE__ */ jsxs2(NavigationMenuContent, { className: "flex flex-col p-4 sm:flex-row sm:items-center sm:justify-end", children: [
+            menuItems.filter((item) => !isSecondary(item)).map((item, i) => /* @__PURE__ */ jsx3(MenuItem, { item, className: "sm:hidden" }, i)),
+            /* @__PURE__ */ jsxs2("div", { className: "-ms-1.5 flex flex-row items-center gap-1.5 max-sm:mt-2", children: [
+              props.i18n ? /* @__PURE__ */ jsxs2(LanguageToggle, { className: "me-auto", children: [
+                /* @__PURE__ */ jsx3(Languages, { className: "size-5" }),
+                /* @__PURE__ */ jsx3(LanguageToggleText, {}),
+                /* @__PURE__ */ jsx3(ChevronDown, { className: "size-3 text-fd-muted-foreground" })
+              ] }) : null,
+              /* @__PURE__ */ jsx3("div", { className: "flex flex-row items-center empty:hidden", children: menuItems.filter(isSecondary).map((item, i) => /* @__PURE__ */ jsx3(MenuItem, { item }, i)) }),
+              !props.disableThemeSwitch ? /* @__PURE__ */ jsx3(ThemeToggle, { className: twMerge(!props.i18n && "ms-auto") }) : null
+            ] })
+          ] })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function Header({ children }) {
+  const [value, setValue] = useState("");
+  const { isTransparent } = useContext(NavContext);
+  return /* @__PURE__ */ jsx3(NavigationMenu, { value, onValueChange: setValue, asChild: true, children: /* @__PURE__ */ jsxs2(
+    "header",
+    {
+      id: "nd-nav",
+      className: twMerge(
+        "fixed left-1/2 top-[var(--fd-banner-height)] z-40 mt-1 w-[calc(100%-1rem)] max-w-fd-container -translate-x-1/2 rounded-2xl border border-fd-foreground/10 transition-colors",
+        value.length > 0 ? "shadow-lg" : "shadow-sm",
+        (!isTransparent || value.length > 0) && "bg-fd-background/80 backdrop-blur-lg"
+      ),
+      children: [
+        /* @__PURE__ */ jsx3("nav", { className: "flex h-12 w-full flex-row items-center gap-6 px-4", children }),
+        /* @__PURE__ */ jsx3(NavigationMenuViewport, {})
+      ]
+    }
+  ) });
+}
+function isSecondary(item) {
+  return "secondary" in item && item.secondary === true || item.type === "icon";
+}
+export {
+  Nav,
+  NavProvider
+};

package/dist/layouts/home.d.ts

@@ -0,0 +1,7 @@
+import { HTMLAttributes } from 'react';
+import { B as BaseLayoutProps } from '../shared-ElIzX-sQ.js';
+
+type HomeLayoutProps = BaseLayoutProps & HTMLAttributes<HTMLElement>;
+declare function HomeLayout({ nav: { transparentMode, ...nav }, links, githubUrl, i18n, disableThemeSwitch, ...props }: HomeLayoutProps): React.ReactElement;
+
+export { HomeLayout, type HomeLayoutProps };

package/dist/layouts/home.js

@@ -0,0 +1,55 @@
+import { Nav, NavProvider } from "./home.client"
+import {
+  getLinks,
+  replaceOrDefault
+} from "../chunk-UQIRU7MP.js";
+import {
+  twMerge
+} from "../chunk-TK3TM3MR.js";
+import "../chunk-MLKGABMK.js";
+
+// src/layouts/home.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function HomeLayout({
+  nav: { transparentMode, ...nav } = {},
+  links = [],
+  githubUrl,
+  i18n,
+  disableThemeSwitch,
+  ...props
+}) {
+  const finalLinks = getLinks(links, githubUrl);
+  return /* @__PURE__ */ jsx(NavProvider, { transparentMode, children: /* @__PURE__ */ jsxs(
+    "main",
+    {
+      id: "nd-home-layout",
+      ...props,
+      className: twMerge(
+        "flex flex-1 flex-col pt-[var(--fd-nav-height)]",
+        props.className
+      ),
+      style: {
+        "--fd-nav-height": "54px",
+        ...props.style
+      },
+      children: [
+        replaceOrDefault(
+          nav,
+          /* @__PURE__ */ jsx(
+            Nav,
+            {
+              items: finalLinks,
+              i18n,
+              disableThemeSwitch,
+              ...nav
+            }
+          )
+        ),
+        props.children
+      ]
+    }
+  ) });
+}
+export {
+  HomeLayout
+};

package/dist/layouts/shared.d.ts

@@ -0,0 +1,2 @@
+import 'react';
+export { B as BaseLayoutProps, S as SharedNavProps, g as getLinks, r as replaceOrDefault } from '../shared-ElIzX-sQ.js';

package/dist/layouts/shared.js

@@ -0,0 +1,9 @@
+import {
+  getLinks,
+  replaceOrDefault
+} from "../chunk-UQIRU7MP.js";
+import "../chunk-MLKGABMK.js";
+export {
+  getLinks,
+  replaceOrDefault
+};

package/dist/mdx.client.js

@@ -2,10 +2,11 @@
 import {
   CodeBlock,
   Pre
-} from "./chunk-774JT2B6.js";
-import "./chunk-2FLZOPQN.js";
+} from "./chunk-5KVEK5A7.js";
 import "./chunk-2KMKNVSN.js";
-import "./chunk-EDNTYBXS.js";
+import "./chunk-QKOA6KEZ.js";
+import "./chunk-2FLZOPQN.js";
+import "./chunk-5QPVK7QM.js";
 import "./chunk-TK3TM3MR.js";
 import "./chunk-MLKGABMK.js";
 

package/dist/mdx.d.ts

@@ -2,7 +2,6 @@ import * as react from 'react';
 import { FC, HTMLAttributes, AnchorHTMLAttributes, ImgHTMLAttributes, TableHTMLAttributes } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { Card, Cards } from './components/card.js';
-import 'fumadocs-core/link';
 
 declare function Image(props: ImgHTMLAttributes<HTMLImageElement>): React.ReactElement;
 declare function Table(props: TableHTMLAttributes<HTMLTableElement>): React.ReactElement;

package/dist/mdx.js

@@ -1,17 +1,15 @@
 import { Pre } from "./mdx.client"
 import {
-  defaultImageSizes
-} from "./chunk-UOD2T27N.js";
-import {
-  Card,
-  Cards
-} from "./chunk-WLTWFYQA.js";
+  Heading
+} from "./chunk-IHIFNFRB.js";
 import {
   Callout
-} from "./chunk-KWZZNVSY.js";
+} from "./chunk-CPGKWLLV.js";
+import "./chunk-5QPVK7QM.js";
 import {
-  Heading
-} from "./chunk-ERUVE5R6.js";
+  Card,
+  Cards
+} from "./chunk-GHOAONNQ.js";
 import {
   twMerge
 } from "./chunk-TK3TM3MR.js";
@@ -25,7 +23,7 @@ function Image(props) {
   return /* @__PURE__ */ jsx(
     NextImage,
     {
-      sizes: defaultImageSizes,
+      sizes: "(max-width: 768px) 100vw, (max-width: 1200px) 70vw, 900px",
       ...props,
       className: twMerge("rounded-lg", props.className)
     }

package/dist/og.d.ts

@@ -10,13 +10,7 @@ interface GenerateProps {
     primaryTextColor?: string;
     site?: ReactNode;
 }
-declare function getImageMeta(baseUrl: string, slugs?: string[]): {
-    alt: string;
-    url: string;
-    width: number;
-    height: number;
-};
 declare function generateOGImage(options: GenerateProps & ImageResponseOptions): ImageResponse;
 declare function generate({ primaryColor, primaryTextColor, ...props }: GenerateProps): ReactElement;
 
-export { generate, generateOGImage, getImageMeta };
+export { generate, generateOGImage };

package/dist/og.js

@@ -3,14 +3,6 @@ import "./chunk-MLKGABMK.js";
 // src/og.tsx
 import { ImageResponse } from "next/og";
 import { jsx, jsxs } from "react/jsx-runtime";
-function getImageMeta(baseUrl, slugs = []) {
-  return {
-    alt: "Banner",
-    url: `/${[...baseUrl.split("/"), ...slugs, "og.png"].filter((v) => v.length > 0).join("/")}`,
-    width: 1200,
-    height: 630
-  };
-}
 function generateOGImage(options) {
   const {
     title,
@@ -52,9 +44,8 @@ function generate({
         height: "100%",
         color: "white",
         padding: "4rem",
-        backgroundColor: "#000000",
-        backgroundImage: `linear-gradient(to top right, ${primaryColor}, transparent), linear-gradient(to top, #303030 2px, transparent 2px), linear-gradient(to right, #303030 2px, transparent 2px)`,
-        backgroundSize: "100% 100%, 40px 40px, 40px 40px"
+        backgroundColor: "#0c0c0c",
+        backgroundImage: `linear-gradient(to top right, ${primaryColor}, transparent)`
       },
       children: [
         /* @__PURE__ */ jsxs(
@@ -74,8 +65,8 @@ function generate({
                 "p",
                 {
                   style: {
-                    fontSize: "64px",
-                    fontWeight: 800
+                    fontSize: "56px",
+                    fontWeight: 600
                   },
                   children: props.site
                 }
@@ -109,6 +100,5 @@ function generate({
 }
 export {
   generate,
-  generateOGImage,
-  getImageMeta
+  generateOGImage
 };

package/dist/page.client.d.ts

@@ -14,8 +14,9 @@ interface TOCProps {
     children: ReactNode;
 }
 declare function Toc({ header, footer, children }: TOCProps): ReactElement;
-declare function TocPopover({ header, footer, items, children, }: TOCProps & {
+declare function TocPopover({ items, ...props }: TOCProps & {
     items: TOCItemType[];
+    className?: string;
 }): ReactElement;
 declare function TOCItems({ items, isMenu, }: {
     items: TOCItemType[];