fumadocs-ui 13.4.9 → 14.0.0

package/dist/{chunk-YIOV4KEY.js → chunk-TYZZJ335.js}

@@ -1,3 +1,16 @@
+import {
+  buttonVariants
+} from "./chunk-QKOA6KEZ.js";
+import {
+  FileText,
+  Hash,
+  LoaderCircle,
+  Search,
+  Text
+} from "./chunk-5QPVK7QM.js";
+import {
+  twMerge
+} from "./chunk-TK3TM3MR.js";
 import {
   useSearchContext
 } from "./chunk-ET4TW6M5.js";
@@ -7,19 +20,11 @@ import {
 import {
   useI18n
 } from "./chunk-EFMHXXHW.js";
-import {
-  buttonVariants
-} from "./chunk-EDNTYBXS.js";
-import {
-  twMerge
-} from "./chunk-TK3TM3MR.js";
 
 // src/components/dialog/search.tsx
-import { FileText, Hash, Loader2, SearchIcon, Text } from "lucide-react";
 import { useRouter } from "next/navigation";
 import {
-  useMemo,
-  useCallback
+  useMemo
 } from "react";
 import { cva } from "class-variance-authority";
 
@@ -155,7 +160,7 @@ function SearchDialog({
   );
   return /* @__PURE__ */ jsxs2(CommandDialog, { open, onOpenChange, children: [
     /* @__PURE__ */ jsx2(
-      Search,
+      Search2,
       {
         ...props,
         items: props.results === "empty" ? defaultItems : props.results,
@@ -170,7 +175,7 @@ var icons = {
   heading: /* @__PURE__ */ jsx2(Hash, {}),
   page: /* @__PURE__ */ jsx2(FileText, {})
 };
-function Search({
+function Search2({
   search,
   onSearchChange,
   items,
@@ -194,13 +199,13 @@ function Search({
       {
         value: search,
         onValueChange: onSearchChange,
-        onClose: useCallback(() => {
+        onClose: () => {
           setOpenSearch(false);
-        }, [setOpenSearch]),
+        },
         placeholder: text.search,
         children: /* @__PURE__ */ jsxs2("div", { className: "relative size-4", children: [
           /* @__PURE__ */ jsx2(
-            Loader2,
+            LoaderCircle,
             {
               className: twMerge(
                 "absolute size-full animate-spin text-fd-primary transition-opacity",
@@ -209,7 +214,7 @@ function Search({
             }
           ),
           /* @__PURE__ */ jsx2(
-            SearchIcon,
+            Search,
             {
               className: twMerge(
                 "absolute size-full text-fd-muted-foreground transition-opacity",
@@ -252,6 +257,7 @@ function TagsList({
   tag,
   onTagChange,
   items,
+  allowClear,
   ...props
 }) {
   return /* @__PURE__ */ jsxs2(
@@ -266,7 +272,11 @@ function TagsList({
             type: "button",
             className: twMerge(itemVariants({ active: tag === item.value })),
             onClick: () => {
-              onTagChange(item.value);
+              if (tag === item.value && allowClear) {
+                onTagChange(void 0);
+              } else {
+                onTagChange(item.value);
+              }
             },
             tabIndex: -1,
             children: item.name

package/dist/{chunk-HOIRMHZT.js → chunk-UQIRU7MP.js}

@@ -1,4 +1,4 @@
-// src/layout.shared.tsx
+// src/layouts/shared.tsx
 import { jsx } from "react/jsx-runtime";
 function getLinks(links, githubUrl) {
   let result = links ?? [];
@@ -15,7 +15,13 @@ function getLinks(links, githubUrl) {
     ];
   return result;
 }
+function replaceOrDefault(obj, def, disabled) {
+  if (obj?.enabled === false) return disabled;
+  if (obj?.component !== void 0) return obj.component;
+  return def;
+}
 
 export {
-  getLinks
+  getLinks,
+  replaceOrDefault
 };

package/dist/chunk-V6RONFCQ.js

@@ -0,0 +1,69 @@
+import {
+  buttonVariants
+} from "./chunk-QKOA6KEZ.js";
+import {
+  Search
+} from "./chunk-5QPVK7QM.js";
+import {
+  twMerge
+} from "./chunk-TK3TM3MR.js";
+import {
+  useSearchContext
+} from "./chunk-ET4TW6M5.js";
+import {
+  useI18n
+} from "./chunk-EFMHXXHW.js";
+
+// src/components/layout/search-toggle.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function SearchToggle(props) {
+  const { setOpenSearch } = useSearchContext();
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: twMerge(
+        buttonVariants({
+          size: "icon",
+          color: "ghost",
+          className: props.className
+        })
+      ),
+      "data-search": "",
+      "aria-label": "Open Search",
+      onClick: () => {
+        setOpenSearch(true);
+      },
+      children: /* @__PURE__ */ jsx(Search, {})
+    }
+  );
+}
+function LargeSearchToggle(props) {
+  const { hotKey, setOpenSearch } = useSearchContext();
+  const { text } = useI18n();
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      "data-search-full": "",
+      ...props,
+      className: twMerge(
+        "inline-flex items-center gap-2 rounded-full border bg-fd-secondary/50 p-1.5 text-sm text-fd-muted-foreground transition-colors hover:bg-fd-accent hover:text-fd-accent-foreground",
+        props.className
+      ),
+      onClick: () => {
+        setOpenSearch(true);
+      },
+      children: [
+        /* @__PURE__ */ jsx(Search, { className: "ms-1 size-4" }),
+        text.search,
+        /* @__PURE__ */ jsx("div", { className: "ms-auto inline-flex gap-0.5", children: hotKey.map((k, i) => /* @__PURE__ */ jsx("kbd", { className: "rounded-md border bg-fd-background px-1.5", children: k.display }, i)) })
+      ]
+    }
+  );
+}
+
+export {
+  SearchToggle,
+  LargeSearchToggle
+};

package/dist/chunk-WRBUXI2A.js

@@ -0,0 +1,82 @@
+import {
+  isActive
+} from "./chunk-CDPVENXR.js";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger
+} from "./chunk-IVBHRX3O.js";
+import {
+  ChevronDown
+} from "./chunk-5QPVK7QM.js";
+import {
+  twMerge
+} from "./chunk-TK3TM3MR.js";
+import {
+  useSidebar
+} from "./chunk-27HFSL7N.js";
+
+// src/components/layout/root-toggle.tsx
+import { useMemo, useState } from "react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function RootToggle({
+  options,
+  ...props
+}) {
+  const [open, setOpen] = useState(false);
+  const { closeOnRedirect } = useSidebar();
+  const pathname = usePathname();
+  const selected = useMemo(() => {
+    return options.find((item) => isActive(item.url, pathname, true));
+  }, [options, pathname]);
+  const onClick = () => {
+    closeOnRedirect.current = false;
+    setOpen(false);
+  };
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxs(
+      PopoverTrigger,
+      {
+        ...props,
+        className: twMerge(
+          "flex flex-row items-center gap-2.5 rounded-lg p-1 hover:bg-fd-accent/50 hover:text-fd-accent-foreground",
+          props.className
+        ),
+        children: [
+          selected ? /* @__PURE__ */ jsx(Item, { ...selected }) : null,
+          /* @__PURE__ */ jsx(ChevronDown, { className: "size-4 text-fd-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,
+      {
+        href: item.url,
+        onClick,
+        ...item.props,
+        className: twMerge(
+          "flex w-full flex-row items-center gap-2.5 p-1.5",
+          selected === item ? "bg-fd-accent text-fd-accent-foreground" : "hover:bg-fd-accent/50",
+          item.props?.className
+        ),
+        children: /* @__PURE__ */ jsx(Item, { ...item })
+      },
+      item.url
+    )) })
+  ] });
+}
+function Item(props) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    props.icon,
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 text-left", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: props.title }),
+      props.description ? /* @__PURE__ */ jsx("p", { className: "text-xs text-fd-muted-foreground", children: props.description }) : null
+    ] })
+  ] });
+}
+
+export {
+  RootToggle
+};

package/dist/chunk-YL3MZH7N.js

@@ -0,0 +1,66 @@
+// src/contexts/tree.tsx
+import { usePathname } from "next/navigation";
+import {
+  createContext,
+  useContext,
+  useMemo,
+  useRef
+} from "react";
+import { searchPath } from "fumadocs-core/breadcrumb";
+import { jsx } from "react/jsx-runtime";
+var TreeContext = createContext(void 0);
+function scanNavigationList(tree, list) {
+  tree.forEach((node) => {
+    if (node.type === "folder") {
+      if (node.index) {
+        list.push(node.index);
+      }
+      scanNavigationList(node.children, list);
+      return;
+    }
+    if (node.type === "page" && !node.external) {
+      list.push(node);
+    }
+  });
+}
+function TreeContextProvider({
+  children,
+  tree
+}) {
+  const pathname = usePathname();
+  const cache = useRef();
+  const value = useMemo(() => {
+    const path = searchPath(tree.children, pathname) ?? [];
+    const root = path.findLast(
+      (item) => item.type === "folder" && item.root
+    ) ?? tree;
+    return {
+      path,
+      root,
+      getNeighbours() {
+        cache.current ??= /* @__PURE__ */ new WeakMap();
+        let result = cache.current.get(root);
+        if (!result) {
+          result = [];
+          scanNavigationList(root.children, result);
+          cache.current.set(root, result);
+        }
+        const idx = result.findIndex((item) => item.url === pathname);
+        if (idx === -1) return [void 0, void 0];
+        return [result[idx - 1], result[idx + 1]];
+      }
+    };
+  }, [pathname, tree]);
+  return /* @__PURE__ */ jsx(TreeContext.Provider, { value, children });
+}
+function useTreeContext() {
+  const ctx = useContext(TreeContext);
+  if (!ctx)
+    throw new Error("You must wrap this component under <DocsLayout />");
+  return ctx;
+}
+
+export {
+  TreeContextProvider,
+  useTreeContext
+};

package/dist/components/accordion.js

@@ -4,7 +4,12 @@ import {
 } from "../chunk-2KMKNVSN.js";
 import {
   buttonVariants
-} from "../chunk-EDNTYBXS.js";
+} from "../chunk-QKOA6KEZ.js";
+import {
+  Check,
+  ChevronRight,
+  Link
+} from "../chunk-5QPVK7QM.js";
 import {
   twMerge
 } from "../chunk-TK3TM3MR.js";
@@ -12,7 +17,6 @@ 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,
@@ -94,7 +98,7 @@ function CopyButton({ id }) {
         })
       ),
       onClick,
-      children: checked ? /* @__PURE__ */ jsx(Check, { className: "size-3.5" }) : /* @__PURE__ */ jsx(LinkIcon, { className: "size-3.5" })
+      children: checked ? /* @__PURE__ */ jsx(Check, { className: "size-3.5" }) : /* @__PURE__ */ jsx(Link, { className: "size-3.5" })
     }
   );
 }

package/dist/components/api.d.ts

@@ -5,12 +5,9 @@ import 'react';
 
 declare const buttonVariants: (props?: ({
     color?: "outline" | "ghost" | "secondary" | null | undefined;
-    size?: "sm" | "icon" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-declare const itemVariants: (props?: ({
-    active?: boolean | null | undefined;
+    size?: "icon" | "sm" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 
 declare const useCopyButton: typeof useCopyButton$1;
 
-export { buttonVariants, itemVariants, useCopyButton };
+export { buttonVariants, useCopyButton };

package/dist/components/api.js

@@ -1,8 +1,7 @@
 import { _useCopyButton } from "./api.client"
 import {
-  buttonVariants,
-  itemVariants
-} from "../chunk-EDNTYBXS.js";
+  buttonVariants
+} from "../chunk-QKOA6KEZ.js";
 import {
   twMerge
 } from "../chunk-TK3TM3MR.js";
@@ -13,6 +12,5 @@ var useCopyButton = _useCopyButton;
 export {
   buttonVariants,
   twMerge as cn,
-  itemVariants,
   useCopyButton
 };

package/dist/components/banner.js

@@ -1,7 +1,10 @@
 "use client";
 import {
   buttonVariants
-} from "../chunk-EDNTYBXS.js";
+} from "../chunk-QKOA6KEZ.js";
+import {
+  X
+} from "../chunk-5QPVK7QM.js";
 import {
   twMerge
 } from "../chunk-TK3TM3MR.js";
@@ -9,7 +12,6 @@ import "../chunk-MLKGABMK.js";
 
 // src/components/banner.tsx
 import { useCallback, useEffect, useState } from "react";
-import { X } from "lucide-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function Banner({
   id,
@@ -19,7 +21,6 @@ function Banner({
 }) {
   const [open, setOpen] = useState(true);
   const globalKey = id ? `nd-banner-${id}` : void 0;
-  const cssFilter = `:not(.${globalKey ?? "nd-banner-never"} *)`;
   useEffect(() => {
     if (globalKey) setOpen(localStorage.getItem(globalKey) !== "true");
   }, [globalKey]);
@@ -40,9 +41,7 @@ function Banner({
       ),
       children: [
         changeLayout && open ? /* @__PURE__ */ jsx("style", { children: `
-        #nd-sidebar${cssFilter}, #nd-nav${cssFilter}, #nd-subnav${cssFilter}, [data-toc]${cssFilter} { top: 3rem; }
-        #nd-tocnav${cssFilter} { top: 6.5rem; }
-        #nd-sidebar${cssFilter}, [data-toc]${cssFilter} { height: calc(100dvh - 3rem); }
+        :root:not(.${globalKey ?? "nd-banner-never"}) { --fd-banner-height: 3rem; }
         ` }) : null,
         globalKey ? /* @__PURE__ */ jsx("style", { children: `.${globalKey} #${id} { display: none; }` }) : null,
         id ? /* @__PURE__ */ jsx(

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" | "type" | "icon"> & {
+declare const Callout: react.ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "title" | "icon" | "type"> & {
     title?: ReactNode;
     /**
      * @defaultValue info

package/dist/components/callout.js

@@ -1,6 +1,7 @@
 import {
   Callout
-} from "../chunk-KWZZNVSY.js";
+} from "../chunk-CPGKWLLV.js";
+import "../chunk-5QPVK7QM.js";
 import "../chunk-TK3TM3MR.js";
 import "../chunk-MLKGABMK.js";
 export {

package/dist/components/card.d.ts

@@ -1,12 +1,13 @@
-import { LinkProps } from 'fumadocs-core/link';
 import { HTMLAttributes, ReactNode } from 'react';
 
 declare function Cards(props: HTMLAttributes<HTMLDivElement>): React.ReactElement;
-type CardProps = {
+type CardProps = HTMLAttributes<HTMLElement> & {
     icon?: ReactNode;
-    title: string;
-    description?: string;
-} & Omit<LinkProps, 'title'>;
+    title: ReactNode;
+    description?: ReactNode;
+    href?: string;
+    external?: boolean;
+};
 declare function Card({ icon, title, description, ...props }: CardProps): React.ReactElement;
 
 export { Card, type CardProps, Cards };

package/dist/components/card.js

@@ -1,7 +1,7 @@
 import {
   Card,
   Cards
-} from "../chunk-WLTWFYQA.js";
+} from "../chunk-GHOAONNQ.js";
 import "../chunk-TK3TM3MR.js";
 import "../chunk-MLKGABMK.js";
 export {

package/dist/components/codeblock.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";
 export {

package/dist/components/dialog/search-algolia.d.ts

@@ -1,12 +1,12 @@
 import { SearchIndex } from 'algoliasearch/lite';
-import { Options } from 'fumadocs-core/search-algolia/client';
 import { ReactNode } from 'react';
+import { SearchOptions } from '@algolia/client-search';
 import { SharedProps, TagItem } from './search.js';
-import 'fumadocs-core/search/shared';
+import 'fumadocs-core/server';
 
 interface AlgoliaSearchDialogProps extends SharedProps {
     index: SearchIndex;
-    searchOptions?: Options;
+    searchOptions?: SearchOptions;
     footer?: ReactNode;
     defaultTag?: string;
     tags?: TagItem[];
@@ -16,7 +16,13 @@ interface AlgoliaSearchDialogProps extends SharedProps {
      * @defaultValue false
      */
     showAlgolia?: boolean;
+    /**
+     * Allow to clear tag filters
+     *
+     * @defaultValue false
+     */
+    allowClear?: boolean;
 }
-declare function AlgoliaSearchDialog({ index, searchOptions, tags, defaultTag, showAlgolia, ...props }: AlgoliaSearchDialogProps): React.ReactElement;
+declare function AlgoliaSearchDialog({ index, searchOptions, tags, defaultTag, showAlgolia, allowClear, ...props }: AlgoliaSearchDialogProps): React.ReactElement;
 
 export { type AlgoliaSearchDialogProps, AlgoliaSearchDialog as default };

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

@@ -2,18 +2,17 @@
 import {
   SearchDialog,
   TagsList
-} from "../../chunk-YIOV4KEY.js";
+} from "../../chunk-TYZZJ335.js";
+import "../../chunk-QKOA6KEZ.js";
+import "../../chunk-5QPVK7QM.js";
+import "../../chunk-TK3TM3MR.js";
 import "../../chunk-ET4TW6M5.js";
 import "../../chunk-27HFSL7N.js";
 import "../../chunk-EFMHXXHW.js";
-import "../../chunk-EDNTYBXS.js";
-import "../../chunk-TK3TM3MR.js";
 import "../../chunk-MLKGABMK.js";
 
 // src/components/dialog/search-algolia.tsx
-import {
-  useAlgoliaSearch
-} from "fumadocs-core/search-algolia/client";
+import { useDocsSearch } from "fumadocs-core/search/client";
 import { useState } from "react";
 import { useOnChange } from "fumadocs-core/utils/use-on-change";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -23,17 +22,19 @@ function AlgoliaSearchDialog({
   tags,
   defaultTag,
   showAlgolia = false,
+  allowClear = false,
   ...props
 }) {
   const [tag, setTag] = useState(defaultTag);
-  let filters = searchOptions?.filters;
-  if (tag) {
-    filters = filters ? `tag:${tag} AND (${filters})` : `tag:${tag}`;
-  }
-  const { search, setSearch, query } = useAlgoliaSearch(index, {
-    ...searchOptions,
-    filters
-  });
+  const { search, setSearch, query } = useDocsSearch(
+    {
+      type: "algolia",
+      index,
+      ...searchOptions
+    },
+    void 0,
+    tag
+  );
   useOnChange(defaultTag, (v) => {
     setTag(v);
   });
@@ -46,7 +47,16 @@ function AlgoliaSearchDialog({
       isLoading: query.isLoading,
       ...props,
       footer: tags ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(TagsList, { tag, onTagChange: setTag, items: tags, children: showAlgolia ? /* @__PURE__ */ jsx(AlgoliaTitle, {}) : null }),
+        /* @__PURE__ */ jsx(
+          TagsList,
+          {
+            tag,
+            onTagChange: setTag,
+            items: tags,
+            allowClear,
+            children: showAlgolia ? /* @__PURE__ */ jsx(AlgoliaTitle, {}) : null
+          }
+        ),
         props.footer
       ] }) : props.footer
     }

package/dist/components/dialog/search-default.d.ts

@@ -1,14 +1,12 @@
 import { ReactNode } from 'react';
 import { SharedProps, TagItem } from './search.js';
-import 'fumadocs-core/search/shared';
+import 'fumadocs-core/server';
 
 interface DefaultSearchDialogProps extends SharedProps {
     /**
-     * Search tag
-     *
-     * @deprecated Use Tags API instead
+     * @defaultValue 'fetch'
      */
-    tag?: string;
+    type?: 'fetch' | 'static';
     defaultTag?: string;
     tags?: TagItem[];
     /**
@@ -20,7 +18,13 @@ interface DefaultSearchDialogProps extends SharedProps {
      */
     delayMs?: number;
     footer?: ReactNode;
+    /**
+     * Allow to clear tag filters
+     *
+     * @defaultValue false
+     */
+    allowClear?: boolean;
 }
-declare function DefaultSearchDialog({ defaultTag, tags, api, delayMs, ...props }: DefaultSearchDialogProps): React.ReactElement;
+declare function DefaultSearchDialog({ defaultTag, tags, api, delayMs, type, allowClear, ...props }: DefaultSearchDialogProps): React.ReactElement;
 
 export { type DefaultSearchDialogProps, DefaultSearchDialog as default };