fumadocs-ui 12.1.1 → 12.1.3

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

@@ -3,7 +3,7 @@ import {
 } from "./chunk-3F57TIUQ.js";
 import {
   useSearchContext
-} from "./chunk-FSPYEOFC.js";
+} from "./chunk-ET4TW6M5.js";
 import {
   useI18n
 } from "./chunk-HLGNIWUN.js";

package/dist/{chunk-YJDZJ4BG.js → chunk-IOZPSMRL.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";
@@ -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 h-16 border-b transition-colors",
+        transparent ? "border-transparent" : "border-foreground/10 bg-background/80 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/chunk-MXPAPA74.js

@@ -0,0 +1,106 @@
+import {
+  useCopyButton
+} from "./chunk-2KMKNVSN.js";
+import {
+  buttonVariants
+} from "./chunk-H5USAX5W.js";
+import {
+  twMerge
+} from "./chunk-TK3TM3MR.js";
+
+// src/components/accordion.tsx
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { Check, ChevronRight, LinkIcon } from "lucide-react";
+import {
+  forwardRef,
+  useState,
+  useEffect
+} from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Accordions = forwardRef(({ type = "single", className, defaultValue, ...props }, ref) => {
+  const [value, setValue] = useState(
+    type === "single" ? defaultValue ?? "" : defaultValue ?? []
+  );
+  useEffect(() => {
+    const id = window.location.hash.substring(1);
+    if (id.length > 0)
+      setValue((prev) => {
+        return type === "single" ? id : [id, ...Array.isArray(prev) ? prev : []];
+      });
+  }, [type]);
+  return (
+    // @ts-expect-error -- Multiple types
+    /* @__PURE__ */ jsx(
+      AccordionPrimitive.Root,
+      {
+        type,
+        ref,
+        value,
+        onValueChange: setValue,
+        collapsible: true,
+        className: twMerge(
+          "divide-y divide-border overflow-hidden rounded-lg border bg-card",
+          className
+        ),
+        ...props
+      }
+    )
+  );
+});
+Accordions.displayName = "Accordions";
+var Accordion = forwardRef(({ title, className, id, children, ...props }, ref) => {
+  return /* @__PURE__ */ jsxs(
+    AccordionPrimitive.Item,
+    {
+      ref,
+      value: id ?? title,
+      className: twMerge("group/accordion relative scroll-m-20", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs(
+          AccordionPrimitive.Header,
+          {
+            id,
+            className: "not-prose flex flex-row items-center font-medium text-foreground",
+            children: [
+              /* @__PURE__ */ jsxs(AccordionPrimitive.Trigger, { className: "flex flex-1 items-center gap-2 p-4 text-start focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: [
+                /* @__PURE__ */ jsx(ChevronRight, { className: "-ms-1 size-4 text-muted-foreground transition-transform duration-200 group-data-[state=open]/accordion:rotate-90" }),
+                title
+              ] }),
+              id ? /* @__PURE__ */ jsx(CopyButton, { id }) : null
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(AccordionPrimitive.Content, { className: "overflow-hidden data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down", children: /* @__PURE__ */ jsx("div", { className: "p-4 pt-0 prose-no-margin", children }) })
+      ]
+    }
+  );
+});
+function CopyButton({ id }) {
+  const [checked, onClick] = useCopyButton(() => {
+    const url = new URL(window.location.href);
+    url.hash = id;
+    void navigator.clipboard.writeText(url.toString());
+  });
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": "Copy Link",
+      className: twMerge(
+        buttonVariants({
+          color: "ghost",
+          className: "text-muted-foreground me-2"
+        })
+      ),
+      onClick,
+      children: checked ? /* @__PURE__ */ jsx(Check, { className: "size-3.5" }) : /* @__PURE__ */ jsx(LinkIcon, { className: "size-3.5" })
+    }
+  );
+}
+Accordion.displayName = "Accordion";
+
+export {
+  Accordions,
+  Accordion
+};

package/dist/chunk-NUPTR2L5.js

@@ -0,0 +1,166 @@
+import {
+  twMerge
+} from "./chunk-TK3TM3MR.js";
+import {
+  __export
+} from "./chunk-MLKGABMK.js";
+
+// src/components/tabs.tsx
+import {
+  useEffect,
+  useMemo,
+  useState,
+  useCallback
+} from "react";
+
+// src/components/ui/tabs.tsx
+var tabs_exports = {};
+__export(tabs_exports, {
+  Tabs: () => Tabs,
+  TabsContent: () => TabsContent,
+  TabsList: () => TabsList,
+  TabsTrigger: () => TabsTrigger
+});
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var Tabs = React.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.Root,
+    {
+      ref,
+      ...props,
+      className: twMerge(
+        "flex flex-col overflow-hidden rounded-xl border bg-card",
+        props.className
+      )
+    }
+  );
+});
+Tabs.displayName = "Tabs";
+var TabsList = React.forwardRef((props, ref) => /* @__PURE__ */ jsx(
+  TabsPrimitive.List,
+  {
+    ref,
+    ...props,
+    className: twMerge(
+      "flex flex-row items-end gap-4 overflow-x-auto bg-secondary px-4 text-muted-foreground",
+      props.className
+    )
+  }
+));
+TabsList.displayName = "TabsList";
+var TabsTrigger = React.forwardRef((props, ref) => /* @__PURE__ */ jsx(
+  TabsPrimitive.Trigger,
+  {
+    ref,
+    ...props,
+    className: twMerge(
+      "whitespace-nowrap border-b border-transparent py-2 text-sm font-medium transition-colors hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=active]:border-primary data-[state=active]:text-primary",
+      props.className
+    )
+  }
+));
+TabsTrigger.displayName = "TabsTrigger";
+var TabsContent = React.forwardRef((props, ref) => /* @__PURE__ */ jsx(
+  TabsPrimitive.Content,
+  {
+    ref,
+    ...props,
+    className: twMerge("p-4", props.className)
+  }
+));
+TabsContent.displayName = "TabsContent";
+
+// src/components/tabs.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var listeners = /* @__PURE__ */ new Map();
+function addChangeListener(id, listener) {
+  const list = listeners.get(id) ?? [];
+  list.push(listener);
+  listeners.set(id, list);
+}
+function removeChangeListener(id, listener) {
+  const list = listeners.get(id) ?? [];
+  listeners.set(
+    id,
+    list.filter((item) => item !== listener)
+  );
+}
+function update(id, v, persist) {
+  listeners.get(id)?.forEach((item) => {
+    item(v);
+  });
+  if (persist) localStorage.setItem(id, v);
+  else sessionStorage.setItem(id, v);
+}
+function Tabs2({
+  id,
+  items = [],
+  persist = false,
+  defaultIndex = 0,
+  children
+}) {
+  const values = useMemo(() => items.map((item) => toValue(item)), [items]);
+  const [value, setValue] = useState(values[defaultIndex]);
+  useEffect(() => {
+    if (!id) return;
+    const onUpdate = (v) => {
+      if (values.includes(v)) setValue(v);
+    };
+    const previous = persist ? localStorage.getItem(id) : sessionStorage.getItem(id);
+    if (previous) onUpdate(previous);
+    addChangeListener(id, onUpdate);
+    return () => {
+      removeChangeListener(id, onUpdate);
+    };
+  }, [id, persist, values]);
+  const onValueChange = useCallback(
+    (v) => {
+      if (id) {
+        update(id, v, persist);
+      } else {
+        setValue(v);
+      }
+    },
+    [id, persist]
+  );
+  return /* @__PURE__ */ jsxs(
+    Tabs,
+    {
+      value,
+      onValueChange,
+      className: "my-4",
+      children: [
+        /* @__PURE__ */ jsx2(TabsList, { children: values.map((v, i) => /* @__PURE__ */ jsx2(TabsTrigger, { value: v, children: items[i] }, v)) }),
+        children
+      ]
+    }
+  );
+}
+function toValue(v) {
+  return v.toLowerCase().replace(/\s/, "-");
+}
+function Tab({
+  value,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
+    TabsContent,
+    {
+      value: toValue(value),
+      className: twMerge(
+        "prose-no-margin [&>figure:only-child]:-m-4 [&>figure:only-child]:rounded-none [&>figure:only-child]:border-none",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+export {
+  tabs_exports,
+  Tabs2 as Tabs,
+  Tab
+};

package/dist/components/accordion.js

@@ -1,106 +1,12 @@
 "use client";
 import {
-  useCopyButton
-} from "../chunk-2KMKNVSN.js";
-import {
-  buttonVariants
-} from "../chunk-H5USAX5W.js";
-import {
-  twMerge
-} from "../chunk-TK3TM3MR.js";
+  Accordion,
+  Accordions
+} from "../chunk-MXPAPA74.js";
+import "../chunk-2KMKNVSN.js";
+import "../chunk-H5USAX5W.js";
+import "../chunk-TK3TM3MR.js";
 import "../chunk-MLKGABMK.js";
-
-// src/components/accordion.tsx
-import * as AccordionPrimitive from "@radix-ui/react-accordion";
-import { Check, ChevronRight, LinkIcon } from "lucide-react";
-import {
-  forwardRef,
-  useState,
-  useEffect
-} from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-var Accordions = forwardRef(({ type = "single", className, defaultValue, ...props }, ref) => {
-  const [value, setValue] = useState(
-    type === "single" ? defaultValue ?? "" : defaultValue ?? []
-  );
-  useEffect(() => {
-    const id = window.location.hash.substring(1);
-    if (id.length > 0)
-      setValue((prev) => {
-        return type === "single" ? id : [id, ...Array.isArray(prev) ? prev : []];
-      });
-  }, [type]);
-  return (
-    // @ts-expect-error -- Multiple types
-    /* @__PURE__ */ jsx(
-      AccordionPrimitive.Root,
-      {
-        type,
-        ref,
-        value,
-        onValueChange: setValue,
-        collapsible: true,
-        className: twMerge(
-          "divide-y divide-border overflow-hidden rounded-lg border bg-card",
-          className
-        ),
-        ...props
-      }
-    )
-  );
-});
-Accordions.displayName = "Accordions";
-var Accordion = forwardRef(({ title, className, id, children, ...props }, ref) => {
-  return /* @__PURE__ */ jsxs(
-    AccordionPrimitive.Item,
-    {
-      ref,
-      value: id ?? title,
-      className: twMerge("group/accordion relative scroll-m-20", className),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsxs(
-          AccordionPrimitive.Header,
-          {
-            id,
-            className: "not-prose flex flex-row items-center font-medium text-foreground",
-            children: [
-              /* @__PURE__ */ jsxs(AccordionPrimitive.Trigger, { className: "flex flex-1 items-center gap-2 p-4 text-start focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: [
-                /* @__PURE__ */ jsx(ChevronRight, { className: "size-4 text-muted-foreground transition-transform duration-200 group-data-[state=open]/accordion:rotate-90" }),
-                title
-              ] }),
-              id ? /* @__PURE__ */ jsx(CopyButton, { id }) : null
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(AccordionPrimitive.Content, { className: "overflow-hidden data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down", children: /* @__PURE__ */ jsx("div", { className: "ms-2 p-4 pt-0 prose-no-margin", children }) })
-      ]
-    }
-  );
-});
-function CopyButton({ id }) {
-  const [checked, onClick] = useCopyButton(() => {
-    const url = new URL(window.location.href);
-    url.hash = id;
-    void navigator.clipboard.writeText(url.toString());
-  });
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      type: "button",
-      "aria-label": "Copy Link",
-      className: twMerge(
-        buttonVariants({
-          color: "ghost",
-          className: "text-muted-foreground me-2"
-        })
-      ),
-      onClick,
-      children: checked ? /* @__PURE__ */ jsx(Check, { className: "size-3.5" }) : /* @__PURE__ */ jsx(LinkIcon, { className: "size-3.5" })
-    }
-  );
-}
-Accordion.displayName = "Accordion";
 export {
   Accordion,
   Accordions

package/dist/components/api.d.ts

@@ -1,4 +1,6 @@
 import { HTMLAttributes, ReactNode } from 'react';
+import { Tabs, Tab } from './tabs.js';
+import '@radix-ui/react-tabs';
 
 declare function Root({ children, className, ...props }: HTMLAttributes<HTMLDivElement>): React.ReactElement;
 declare function API({ className, children, ...props }: HTMLAttributes<HTMLDivElement>): React.ReactElement;
@@ -16,5 +18,21 @@ interface PropertyProps {
 }
 declare function Property({ name, type, required, deprecated, children, }: PropertyProps): React.ReactElement;
 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;
+declare function ExampleResponse(props: {
+    children: ReactNode;
+}): React.ReactElement;
+declare function TypeScriptResponse(props: {
+    children: ReactNode;
+}): React.ReactElement;
+declare function ObjectCollapsible(props: {
+    children: ReactNode;
+}): React.ReactElement;
 
-export { API, APIExample, APIInfo, type APIInfoProps, Property, Root };
+export { API, APIExample, APIInfo, type APIInfoProps, ExampleResponse, ObjectCollapsible, Property, Request, Requests, Response, ResponseTypes, Responses, Root, TypeScriptResponse };