fumadocs-ui 12.1.2 → 12.2.0

package/dist/{chunk-MXPAPA74.js → chunk-3WVIP3N5.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-2KMKNVSN.js";
 import {
   buttonVariants
-} from "./chunk-H5USAX5W.js";
+} from "./chunk-CPOVVDVF.js";
 import {
   twMerge
 } from "./chunk-TK3TM3MR.js";

package/dist/{chunk-H5USAX5W.js → chunk-CPOVVDVF.js}

@@ -10,7 +10,6 @@ var buttonVariants = cva(
         secondary: "border bg-secondary text-secondary-foreground hover:bg-accent hover:text-accent-foreground"
       },
       size: {
-        lg: "px-4 py-2 text-[15px]",
         icon: "p-1.5 [&_svg]:size-5"
       }
     }

package/dist/{chunk-45QF3XKA.js → chunk-G7WCPUM7.js}

@@ -3,13 +3,13 @@ import {
 } from "./chunk-3F57TIUQ.js";
 import {
   useSearchContext
-} from "./chunk-FSPYEOFC.js";
+} from "./chunk-ET4TW6M5.js";
 import {
   useI18n
 } from "./chunk-HLGNIWUN.js";
 import {
   buttonVariants
-} from "./chunk-H5USAX5W.js";
+} from "./chunk-CPOVVDVF.js";
 import {
   twMerge
 } from "./chunk-TK3TM3MR.js";

package/dist/{chunk-U4G4ZLRB.js → chunk-Q3FSJZ3E.js}

@@ -8,7 +8,7 @@ import {
 } from "./chunk-2KMKNVSN.js";
 import {
   buttonVariants
-} from "./chunk-H5USAX5W.js";
+} from "./chunk-CPOVVDVF.js";
 import {
   twMerge
 } from "./chunk-TK3TM3MR.js";

package/dist/{chunk-YJDZJ4BG.js → chunk-XVCWFZ3A.js}

@@ -8,7 +8,7 @@ import {
 } from "./chunk-AN2Y6MA2.js";
 import {
   useSearchContext
-} from "./chunk-FSPYEOFC.js";
+} from "./chunk-ET4TW6M5.js";
 import {
   useI18n
 } from "./chunk-HLGNIWUN.js";
@@ -19,7 +19,7 @@ import {
 } from "./chunk-7XPZOMJ2.js";
 import {
   buttonVariants
-} from "./chunk-H5USAX5W.js";
+} from "./chunk-CPOVVDVF.js";
 import {
   twMerge
 } from "./chunk-TK3TM3MR.js";
@@ -67,22 +67,64 @@ function LargeSearchToggle(props) {
       children: [
         /* @__PURE__ */ jsx(SearchIcon, { className: "ms-1 size-4" }),
         text.search,
-        /* @__PURE__ */ jsx("div", { className: "ms-auto inline-flex gap-0.5 text-xs", children: hotKey.map((k, i) => /* @__PURE__ */ jsx("kbd", { className: "rounded-md border bg-background px-1.5", children: k.display }, i)) })
+        /* @__PURE__ */ jsx("div", { className: "ms-auto inline-flex gap-0.5", children: hotKey.map((k, i) => /* @__PURE__ */ jsx("kbd", { className: "rounded-md border bg-background px-1.5", children: k.display }, i)) })
       ]
     }
   );
 }
 
-// src/components/layout/links-menu.tsx
-import { useEffect, useState } from "react";
-import { usePathname as usePathname2 } from "next/navigation";
+// src/components/layout/nav.tsx
+import Link from "fumadocs-core/link";
+import {
+  useEffect,
+  useState
+} from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function NavBox({
+  transparentMode = "none",
+  ...props
+}) {
+  const [transparent, setTransparent] = useState(transparentMode !== "none");
+  useEffect(() => {
+    if (transparentMode !== "top") return;
+    const listener = () => {
+      setTransparent(window.scrollY < 10);
+    };
+    listener();
+    window.addEventListener("scroll", listener);
+    return () => {
+      window.removeEventListener("scroll", listener);
+    };
+  }, [transparentMode]);
+  return /* @__PURE__ */ jsx2(
+    "header",
+    {
+      ...props,
+      className: twMerge(
+        "sticky top-0 z-50 border-b transition-colors",
+        transparent ? "border-transparent" : "border-foreground/10 bg-background/60 backdrop-blur-md",
+        props.className
+      )
+    }
+  );
+}
+function Title({ title, url = "/" }) {
+  return /* @__PURE__ */ jsx2(
+    Link,
+    {
+      href: url,
+      className: "inline-flex items-center gap-2.5 font-semibold [&_svg]:size-5",
+      children: title
+    }
+  );
+}
 
 // src/components/layout/link-item.tsx
-import Link from "fumadocs-core/link";
+import Link2 from "fumadocs-core/link";
 import { ChevronDown } from "lucide-react";
 import { usePathname } from "next/navigation";
 import { cva } from "class-variance-authority";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var linkItemVariants = cva(
   "inline-flex items-center gap-1.5 rounded-lg p-2 text-muted-foreground transition-colors data-[state=open]:bg-accent [&_svg]:size-4",
   {
@@ -113,11 +155,11 @@ function LinkItem({
           ...props,
           children: [
             item.text,
-            /* @__PURE__ */ jsx2(ChevronDown, { className: "ms-auto size-4" })
+            /* @__PURE__ */ jsx3(ChevronDown, { className: "ms-auto size-4" })
           ]
         }
       ),
-      /* @__PURE__ */ jsx2(PopoverContent, { className: "flex flex-col", children: item.items.map((child, i) => /* @__PURE__ */ jsx2(LinkItem, { item: child, on: "menu" }, i)) })
+      /* @__PURE__ */ jsx3(PopoverContent, { className: "flex flex-col", children: item.items.map((child, i) => /* @__PURE__ */ jsx3(LinkItem, { item: child, on: "menu" }, i)) })
     ] });
   }
   if (item.type === "menu") {
@@ -130,18 +172,18 @@ function LinkItem({
           children: [
             item.icon,
             item.text,
-            /* @__PURE__ */ jsx2(ChevronDown, { className: "ms-auto size-4 group-data-[state=closed]/link:-rotate-90" })
+            /* @__PURE__ */ jsx3(ChevronDown, { className: "ms-auto size-4 group-data-[state=closed]/link:-rotate-90" })
           ]
         }
       ),
-      /* @__PURE__ */ jsx2(CollapsibleContent, { children: /* @__PURE__ */ jsx2("div", { className: "flex flex-col py-1 ps-4", children: item.items.map((child, i) => /* @__PURE__ */ jsx2(LinkItem, { item: child, on: "menu" }, i)) }) })
+      /* @__PURE__ */ jsx3(CollapsibleContent, { children: /* @__PURE__ */ jsx3("div", { className: "flex flex-col py-1 ps-4", children: item.items.map((child, i) => /* @__PURE__ */ jsx3(LinkItem, { item: child, on: "menu" }, i)) }) })
     ] });
   }
   const activeType = item.active ?? "url";
   const active = activeType !== "none" ? isActive(item.url, pathname, activeType === "nested-url") : false;
   if (item.type === "secondary" && on === "nav") {
-    return /* @__PURE__ */ jsx2(
-      Link,
+    return /* @__PURE__ */ jsx3(
+      Link2,
       {
         "aria-label": item.text,
         href: item.url,
@@ -159,7 +201,7 @@ function LinkItem({
     );
   }
   return /* @__PURE__ */ jsxs2(
-    Link,
+    Link2,
     {
       href: item.url,
       external: item.external,
@@ -179,19 +221,21 @@ function LinkItem({
 }
 
 // src/components/layout/links-menu.tsx
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { useEffect as useEffect2, useState as useState2 } from "react";
+import { usePathname as usePathname2 } from "next/navigation";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 function LinksMenu({
   items,
   footer,
   ...props
 }) {
-  const [open, setOpen] = useState(false);
+  const [open, setOpen] = useState2(false);
   const pathname = usePathname2();
-  useEffect(() => {
+  useEffect2(() => {
     setOpen(false);
   }, [pathname]);
   return /* @__PURE__ */ jsxs3(Popover, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx3(
+    /* @__PURE__ */ jsx4(
       PopoverTrigger,
       {
         ...props,
@@ -205,7 +249,7 @@ function LinksMenu({
       }
     ),
     /* @__PURE__ */ jsxs3(PopoverContent, { className: "flex flex-col", children: [
-      items.map((item, i) => /* @__PURE__ */ jsx3(LinkItem, { item, on: "menu" }, i)),
+      items.map((item, i) => /* @__PURE__ */ jsx4(LinkItem, { item, on: "menu" }, i)),
       footer
     ] })
   ] });
@@ -216,7 +260,7 @@ import { cva as cva2 } from "class-variance-authority";
 import { Moon, Sun } from "lucide-react";
 import { useTheme } from "next-themes";
 import { useCallback as useCallback2 } from "react";
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var buttonVariants2 = cva2("size-7 rounded-full p-1.5 text-muted-foreground", {
   variants: {
     dark: {
@@ -245,8 +289,8 @@ function ThemeToggle({
       onClick: onToggle,
       ...props,
       children: [
-        /* @__PURE__ */ jsx4(Sun, { className: twMerge(buttonVariants2({ dark: false })) }),
-        /* @__PURE__ */ jsx4(Moon, { className: twMerge(buttonVariants2({ dark: true })) })
+        /* @__PURE__ */ jsx5(Sun, { className: twMerge(buttonVariants2({ dark: false })) }),
+        /* @__PURE__ */ jsx5(Moon, { className: twMerge(buttonVariants2({ dark: true })) })
       ]
     }
   );
@@ -255,6 +299,8 @@ function ThemeToggle({
 export {
   SearchToggle,
   LargeSearchToggle,
+  NavBox,
+  Title,
   LinkItem,
   LinksMenu,
   ThemeToggle

package/dist/components/accordion.js

@@ -2,9 +2,9 @@
 import {
   Accordion,
   Accordions
-} from "../chunk-MXPAPA74.js";
+} from "../chunk-3WVIP3N5.js";
 import "../chunk-2KMKNVSN.js";
-import "../chunk-H5USAX5W.js";
+import "../chunk-CPOVVDVF.js";
 import "../chunk-TK3TM3MR.js";
 import "../chunk-MLKGABMK.js";
 export {

package/dist/components/api.d.ts

@@ -20,6 +20,8 @@ declare function Property({ name, type, required, deprecated, children, }: Prope
 declare function APIExample({ children, className, ...props }: HTMLAttributes<HTMLDivElement>): React.ReactElement;
 declare const Responses: typeof Tabs;
 declare const Response: typeof Tab;
+declare const Requests: typeof Tabs;
+declare const Request: typeof Tab;
 declare function ResponseTypes(props: {
     children: ReactNode;
 }): React.ReactElement;
@@ -33,4 +35,4 @@ declare function ObjectCollapsible(props: {
     children: ReactNode;
 }): React.ReactElement;
 
-export { API, APIExample, APIInfo, type APIInfoProps, ExampleResponse, ObjectCollapsible, Property, Response, ResponseTypes, Responses, Root, TypeScriptResponse };
+export { API, APIExample, APIInfo, type APIInfoProps, ExampleResponse, ObjectCollapsible, Property, Request, Requests, Response, ResponseTypes, Responses, Root, TypeScriptResponse };

package/dist/components/api.js

@@ -6,18 +6,15 @@ import {
 import {
   Accordion,
   Accordions
-} from "../chunk-MXPAPA74.js";
+} from "../chunk-3WVIP3N5.js";
 import "../chunk-2KMKNVSN.js";
-import {
-  buttonVariants
-} from "../chunk-H5USAX5W.js";
+import "../chunk-CPOVVDVF.js";
 import {
   twMerge
 } from "../chunk-TK3TM3MR.js";
 import "../chunk-MLKGABMK.js";
 
 // src/components/api.tsx
-import { useState } from "react";
 import { cva } from "class-variance-authority";
 import { jsx, jsxs } from "react/jsx-runtime";
 function Root({
@@ -28,7 +25,10 @@ function Root({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: twMerge("space-y-24 text-sm text-muted-foreground", className),
+      className: twMerge(
+        "flex flex-col gap-24 text-sm text-muted-foreground",
+        className
+      ),
       ...props,
       children
     }
@@ -42,7 +42,10 @@ function API({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: twMerge("flex flex-col gap-x-6 gap-y-2 xl:flex-row", className),
+      className: twMerge(
+        "flex flex-col gap-x-6 gap-y-2 xl:flex-row xl:items-start",
+        className
+      ),
       ...props,
       children
     }
@@ -53,7 +56,9 @@ var badgeVariants = cva("rounded-lg border px-1 py-0.5 text-xs font-medium", {
     color: {
       green: "border-green-400/50 bg-green-400/20 text-green-600 dark:text-green-400",
       yellow: "border-yellow-400/50 bg-yellow-400/20 text-yellow-600 dark:text-yellow-400",
-      red: "border-red-400/50 bg-red-400/20 text-red-600 dark:text-red-400"
+      red: "border-red-400/50 bg-red-400/20 text-red-600 dark:text-red-400",
+      blue: "border-blue-400/50 bg-blue-400/20 text-blue-600 dark:text-blue-400",
+      orange: "border-orange-400/50 bg-orange-400/20 text-orange-600 dark:text-orange-400"
     }
   }
 });
@@ -66,12 +71,14 @@ function APIInfo({
 }) {
   let color = "green";
   if (["GET", "HEAD"].includes(method)) color = "green";
-  if (["POST", "PATCH", "PUT"].includes(method)) color = "yellow";
+  if (["PUT"].includes(method)) color = "yellow";
+  if (["PATCH"].includes(method)) color = "orange";
+  if (["POST"].includes(method)) color = "blue";
   if (["DELETE"].includes(method)) color = "red";
-  return /* @__PURE__ */ jsxs("div", { className: twMerge("flex-1", className), ...props, children: [
-    /* @__PURE__ */ jsxs("h2", { className: "not-prose mb-2 inline-flex items-center gap-3 font-mono", children: [
-      /* @__PURE__ */ jsx("div", { className: twMerge(badgeVariants({ color })), children: method }),
-      /* @__PURE__ */ jsx("p", { className: "text-xs", children: route })
+  return /* @__PURE__ */ jsxs("div", { className: twMerge("flex-1 prose-no-margin", className), ...props, children: [
+    /* @__PURE__ */ jsxs("h2", { className: "flex flex-row items-center gap-3 rounded-lg border bg-card p-3 text-base", children: [
+      /* @__PURE__ */ jsx("span", { className: twMerge(badgeVariants({ color })), children: method }),
+      /* @__PURE__ */ jsx("code", { children: route })
     ] }),
     children
   ] });
@@ -98,40 +105,19 @@ function APIExample({
   className,
   ...props
 }) {
-  const [isOpen, setIsOpen] = useState(false);
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     "div",
     {
-      className: twMerge("sticky top-6 h-fit xl:w-2/5 xl:min-w-[400px]", className),
+      className: twMerge("sticky top-6 prose-no-margin xl:w-[400px]", className),
       ...props,
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center gap-4 xl:hidden", children: [
-          /* @__PURE__ */ jsx("div", { className: "h-px flex-1 bg-border" }),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              className: twMerge(
-                buttonVariants({
-                  color: "secondary",
-                  size: "lg"
-                })
-              ),
-              onClick: () => {
-                setIsOpen((v) => !v);
-              },
-              children: "More Details"
-            }
-          ),
-          /* @__PURE__ */ jsx("div", { className: "h-px flex-1 bg-border" })
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: twMerge(!isOpen && "max-xl:hidden"), children })
-      ]
+      children
     }
   );
 }
 var Responses = Tabs;
 var Response = Tab;
+var Requests = Tabs;
+var Request = Tab;
 function ResponseTypes(props) {
   return /* @__PURE__ */ jsx(
     Accordions,
@@ -159,6 +145,8 @@ export {
   ExampleResponse,
   ObjectCollapsible,
   Property,
+  Request,
+  Requests,
   Response,
   ResponseTypes,
   Responses,

package/dist/components/callout.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { HTMLAttributes, ReactNode } from 'react';
 
-declare const Callout: React.ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "title" | "icon" | "type"> & {
+declare const Callout: React.ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "title" | "type" | "icon"> & {
     title?: ReactNode;
     /**
      * @defaultValue info

package/dist/components/codeblock.js

@@ -2,10 +2,10 @@
 import {
   CodeBlock,
   Pre
-} from "../chunk-U4G4ZLRB.js";
+} from "../chunk-Q3FSJZ3E.js";
 import "../chunk-VYTHQTZE.js";
 import "../chunk-2KMKNVSN.js";
-import "../chunk-H5USAX5W.js";
+import "../chunk-CPOVVDVF.js";
 import "../chunk-TK3TM3MR.js";
 import "../chunk-MLKGABMK.js";
 export {

package/dist/components/dialog/search-algolia.js

@@ -1,11 +1,11 @@
 "use client";
 import {
   SearchDialog
-} from "../../chunk-45QF3XKA.js";
+} from "../../chunk-G7WCPUM7.js";
 import "../../chunk-3F57TIUQ.js";
-import "../../chunk-FSPYEOFC.js";
+import "../../chunk-ET4TW6M5.js";
 import "../../chunk-HLGNIWUN.js";
-import "../../chunk-H5USAX5W.js";
+import "../../chunk-CPOVVDVF.js";
 import "../../chunk-TK3TM3MR.js";
 import "../../chunk-MLKGABMK.js";
 

package/dist/components/dialog/search-default.js

@@ -1,13 +1,13 @@
 "use client";
 import {
   SearchDialog
-} from "../../chunk-45QF3XKA.js";
+} from "../../chunk-G7WCPUM7.js";
 import "../../chunk-3F57TIUQ.js";
-import "../../chunk-FSPYEOFC.js";
+import "../../chunk-ET4TW6M5.js";
 import {
   useI18n
 } from "../../chunk-HLGNIWUN.js";
-import "../../chunk-H5USAX5W.js";
+import "../../chunk-CPOVVDVF.js";
 import "../../chunk-TK3TM3MR.js";
 import "../../chunk-MLKGABMK.js";
 

package/dist/components/dialog/search.js

@@ -1,10 +1,10 @@
 import {
   SearchDialog
-} from "../../chunk-45QF3XKA.js";
+} from "../../chunk-G7WCPUM7.js";
 import "../../chunk-3F57TIUQ.js";
-import "../../chunk-FSPYEOFC.js";
+import "../../chunk-ET4TW6M5.js";
 import "../../chunk-HLGNIWUN.js";
-import "../../chunk-H5USAX5W.js";
+import "../../chunk-CPOVVDVF.js";
 import "../../chunk-TK3TM3MR.js";
 import "../../chunk-MLKGABMK.js";
 export {

package/dist/components/layout/language-toggle.js

@@ -9,7 +9,7 @@ import {
 } from "../../chunk-HLGNIWUN.js";
 import {
   buttonVariants
-} from "../../chunk-H5USAX5W.js";
+} from "../../chunk-CPOVVDVF.js";
 import {
   twMerge
 } from "../../chunk-TK3TM3MR.js";

package/dist/components/layout/root-toggle.js

@@ -27,7 +27,7 @@ function RootToggle({
   return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsxs(PopoverTrigger, { className: "-mx-2 flex flex-row items-center gap-2.5 rounded-lg p-2 hover:bg-muted", children: [
       /* @__PURE__ */ jsx(Item, { ...selected }),
-      /* @__PURE__ */ jsx(ChevronDown, { className: "me-1.5 size-4 text-muted-foreground" })
+      /* @__PURE__ */ jsx(ChevronDown, { className: "size-4 text-muted-foreground md:me-1.5" })
     ] }),
     /* @__PURE__ */ jsx(PopoverContent, { className: "w-[var(--radix-popover-trigger-width)] overflow-hidden p-0", children: options.map((item) => /* @__PURE__ */ jsx(
       Link,

package/dist/components/roll-button.js

@@ -5,7 +5,7 @@ import {
 import "../chunk-AN2Y6MA2.js";
 import {
   buttonVariants
-} from "../chunk-H5USAX5W.js";
+} from "../chunk-CPOVVDVF.js";
 import {
   twMerge
 } from "../chunk-TK3TM3MR.js";
@@ -47,7 +47,7 @@ function RollButton({
       className: twMerge(
         buttonVariants({
           color: "secondary",
-          className: "fixed top-16 [&_svg]:size-4 gap-1 left-1/2 translate-x-[-50%] z-10 shadow-md rounded-full transition-all md:top-4"
+          className: "fixed top-20 [&_svg]:size-4 gap-1 left-1/2 translate-x-[-50%] z-10 shadow-md rounded-full transition-all md:top-6"
         }),
         !show && "translate-y-20 opacity-0"
       ),

package/dist/docs.client.d.ts

@@ -1,5 +1,5 @@
-import { L as LinkItemType, S as SidebarProps, N as NavProps } from './layout.client-BzAmSQXB.js';
-export { a as Sidebar } from './layout.client-BzAmSQXB.js';
+import { L as LinkItemType, S as SidebarProps, a as SharedNavProps } from './layout-C2Cxe6NB.js';
+export { b as Sidebar } from './layout-C2Cxe6NB.js';
 export { T as TreeContextProvider } from './tree-CrKzI9Nz.js';
 import { ButtonHTMLAttributes } from 'react';
 import 'fumadocs-core/server';
@@ -14,6 +14,6 @@ declare function DynamicSidebar(props: SidebarProps): React.ReactElement;
 
 declare function ThemeToggle({ className, ...props }: ButtonHTMLAttributes<HTMLButtonElement>): React.ReactElement;
 
-declare function SubNav({ title, url, children, enableSearch, }: NavProps): React.ReactElement;
+declare function SubNav({ title, url, transparentMode, children, enableSearch, }: SharedNavProps): React.ReactElement;
 
 export { DynamicSidebar, LinksMenu, SubNav, ThemeToggle };