fumadocs-ui 13.2.1 → 13.3.0

package/dist/page.client.js

@@ -1,4 +1,7 @@
 "use client";
+import {
+  useTocThumb
+} from "./chunk-QDCOD7BQ.js";
 import {
   useTreeContext
 } from "./chunk-LSTPTAZ5.js";
@@ -21,7 +24,7 @@ import {
 import "./chunk-MLKGABMK.js";
 
 // src/page.client.tsx
-import { useEffect, useMemo as useMemo2, useState as useState2 } from "react";
+import { useEffect, useMemo as useMemo2, useState } from "react";
 import { ChevronLeft, ChevronRight as ChevronRight3 } from "lucide-react";
 import Link2 from "next/link";
 import { usePathname as usePathname2 } from "next/navigation";
@@ -30,15 +33,9 @@ import { cva } from "class-variance-authority";
 // src/components/layout/toc.tsx
 import { ChevronRight, Text } from "lucide-react";
 import * as Primitive from "fumadocs-core/toc";
-import {
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState
-} from "react";
+import { useMemo, useRef } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var TocProvider = Primitive.AnchorProvider;
-function Toc({ items, header, footer }) {
+function Toc({ header, footer, children }) {
   const { text } = useI18n();
   return /* @__PURE__ */ jsxs(
     "div",
@@ -51,18 +48,22 @@ function Toc({ items, header, footer }) {
           /* @__PURE__ */ jsx(Text, { className: "size-4" }),
           text.toc
         ] }),
-        /* @__PURE__ */ jsx(TOCItems, { items }),
+        children,
         footer
       ]
     }
   );
 }
-function TocPopover({ items, header, footer }) {
+function TocPopover({
+  header,
+  footer,
+  items,
+  children
+}) {
   const { text } = useI18n();
   const active = Primitive.useActiveAnchor();
   const current = useMemo(() => {
-    if (!active) return;
-    return items.find((item) => item.url === `#${active}`)?.title;
+    return items.find((item) => active === item.url.slice(1))?.title;
   }, [items, active]);
   return /* @__PURE__ */ jsxs(Popover, { children: [
     /* @__PURE__ */ jsxs(PopoverTrigger, { className: "inline-flex size-full items-center gap-2 text-nowrap px-4 py-2 text-left md:px-3", children: [
@@ -84,7 +85,7 @@ function TocPopover({ items, header, footer }) {
         "data-toc-popover": "",
         children: [
           header,
-          /* @__PURE__ */ jsx(TOCItems, { items, isMenu: true }),
+          children,
           footer
         ]
       }
@@ -97,17 +98,7 @@ function TOCItems({
 }) {
   const { text } = useI18n();
   const containerRef = useRef(null);
-  const [pos, setPos] = useState();
-  const active = Primitive.useActiveAnchor();
-  useLayoutEffect(() => {
-    const container = containerRef.current;
-    if (!active || !container) return;
-    const element = container.querySelector(
-      `a[href="#${active}"]`
-    );
-    if (!element) return;
-    setPos([element.offsetTop, element.clientHeight]);
-  }, [active]);
+  const pos = useTocThumb(containerRef);
   if (items.length === 0)
     return /* @__PURE__ */ jsx("div", { className: "rounded-lg border bg-fd-card p-3 text-xs text-fd-muted-foreground", children: text.tocNoHeadings });
   return /* @__PURE__ */ jsx(ScrollArea, { className: twMerge("flex flex-col", isMenu && "-ms-3"), children: /* @__PURE__ */ jsxs(ScrollViewport, { className: "relative min-h-0 text-sm", ref: containerRef, children: [
@@ -115,11 +106,10 @@ function TOCItems({
       "div",
       {
         role: "none",
-        className: "absolute start-0 w-0.5 bg-fd-primary transition-all",
+        className: "absolute start-0 w-px bg-fd-primary transition-all",
         style: {
-          top: pos ? `${pos[0].toString()}px` : void 0,
-          height: pos ? `${pos[1].toString()}px` : void 0,
-          display: pos ? "block" : "hidden"
+          top: pos[0],
+          height: pos[1]
         }
       }
     ),
@@ -127,8 +117,8 @@ function TOCItems({
       "div",
       {
         className: twMerge(
-          "flex flex-col gap-1 text-fd-muted-foreground",
-          !isMenu && "border-s-2 border-fd-foreground/10"
+          "flex flex-col text-fd-muted-foreground",
+          !isMenu && "border-s border-fd-foreground/10"
         ),
         children: items.map((item) => /* @__PURE__ */ jsx(TOCItem2, { item }, item.url))
       }
@@ -141,10 +131,10 @@ function TOCItem2({ item }) {
     {
       href: item.url,
       className: twMerge(
-        "py-1 transition-colors [overflow-wrap:anywhere] data-[active=true]:font-medium data-[active=true]:text-fd-primary",
-        item.depth <= 2 && "ps-4",
-        item.depth === 3 && "ps-7",
-        item.depth >= 4 && "ps-10"
+        "py-1.5 transition-colors [overflow-wrap:anywhere] first:pt-0 last:pb-0 data-[active=true]:text-fd-primary",
+        item.depth <= 2 && "ps-3.5",
+        item.depth === 3 && "ps-6",
+        item.depth >= 4 && "ps-8"
       ),
       children: item.title
     }
@@ -153,7 +143,9 @@ function TOCItem2({ item }) {
 
 // src/components/layout/breadcrumb.tsx
 import { ChevronRight as ChevronRight2 } from "lucide-react";
-import { useBreadcrumb } from "fumadocs-core/breadcrumb";
+import {
+  useBreadcrumb
+} from "fumadocs-core/breadcrumb";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { Fragment as Fragment2 } from "react";
@@ -168,33 +160,25 @@ function Breadcrumb({
     includePage: full,
     ...options
   });
-  return /* @__PURE__ */ jsx2(
-    "div",
-    {
-      className: twMerge(
-        "-mb-3 flex flex-row items-center gap-1 text-sm font-medium text-fd-muted-foreground",
-        items.length === 0 && "hidden"
-      ),
-      children: items.map((item, i) => /* @__PURE__ */ jsxs2(Fragment2, { children: [
-        i !== 0 && /* @__PURE__ */ jsx2(ChevronRight2, { className: "size-4 shrink-0 rtl:rotate-180" }),
-        item.url ? /* @__PURE__ */ jsx2(
-          Link,
-          {
-            href: item.url,
-            className: "truncate hover:text-fd-accent-foreground",
-            children: item.name
-          }
-        ) : /* @__PURE__ */ jsx2("span", { className: "truncate", children: item.name })
-      ] }, i))
-    }
-  );
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ jsx2("div", { className: "-mb-3 flex flex-row items-center gap-1 text-sm font-medium text-fd-muted-foreground", children: items.map((item, i) => /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    i !== 0 && /* @__PURE__ */ jsx2(ChevronRight2, { className: "size-4 shrink-0 rtl:rotate-180" }),
+    item.url ? /* @__PURE__ */ jsx2(
+      Link,
+      {
+        href: item.url,
+        className: "truncate hover:text-fd-accent-foreground",
+        children: item.name
+      }
+    ) : /* @__PURE__ */ jsx2("span", { className: "truncate", children: item.name })
+  ] }, i)) });
 }
 
 // src/page.client.tsx
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function LastUpdate(props) {
   const { text } = useI18n();
-  const [date, setDate] = useState2("");
+  const [date, setDate] = useState("");
   useEffect(() => {
     setDate(props.date.toLocaleDateString());
   }, [props.date]);
@@ -249,7 +233,7 @@ export {
   Breadcrumb,
   Footer,
   LastUpdate,
+  TOCItems,
   Toc,
-  TocPopover,
-  TocProvider
+  TocPopover
 };

package/dist/page.d.ts

@@ -1,14 +1,20 @@
-import * as React$1 from 'react';
+import * as react from 'react';
 import { ReactNode, HTMLAttributes } from 'react';
 import { TableOfContents } from 'fumadocs-core/server';
+import { Page } from 'fumadocs-core/source';
+import { AnchorProviderProps } from 'fumadocs-core/toc';
 import { TOCProps, BreadcrumbProps, FooterProps } from './page.client.js';
-import 'fumadocs-core/toc';
 import 'fumadocs-core/breadcrumb';
 
-type TableOfContentOptions = Omit<TOCProps, 'items'> & {
+type TableOfContentOptions = Omit<TOCProps, 'items' | 'children'> & Pick<AnchorProviderProps, 'single'> & {
     enabled: boolean;
     component: ReactNode;
+    /**
+     * @defaultValue 'normal'
+     */
+    style?: 'normal' | 'clerk';
 };
+type TableOfContentPopoverOptions = Omit<TableOfContentOptions, 'single'>;
 interface BreadcrumbOptions extends BreadcrumbProps {
     enabled: boolean;
     component: ReactNode;
@@ -26,7 +32,7 @@ interface DocsPageProps {
      */
     full?: boolean;
     tableOfContent?: Partial<TableOfContentOptions>;
-    tableOfContentPopover?: Partial<TableOfContentOptions>;
+    tableOfContentPopover?: Partial<TableOfContentPopoverOptions>;
     /**
      * Replace or disable breadcrumb
      */
@@ -42,7 +48,13 @@ declare function DocsPage({ toc, tableOfContent, breadcrumb, tableOfContentPopov
 /**
  * Add typography styles
  */
-declare const DocsBody: React$1.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+declare const DocsBody: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+declare const DocsDescription: react.ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & react.RefAttributes<HTMLParagraphElement>>;
+declare const DocsTitle: react.ForwardRefExoticComponent<HTMLAttributes<HTMLHeadingElement> & react.RefAttributes<HTMLHeadingElement>>;
+declare function DocsCategory({ page, pages, ...props }: HTMLAttributes<HTMLDivElement> & {
+    page: Page;
+    pages: Page[];
+}): React.ReactElement;
 /**
  * For separate MDX page
  */
@@ -50,4 +62,4 @@ declare function withArticle({ children, }: {
     children: React.ReactNode;
 }): React.ReactElement;
 
-export { DocsBody, DocsPage, type DocsPageProps, withArticle };
+export { DocsBody, DocsCategory, DocsDescription, DocsPage, type DocsPageProps, DocsTitle, withArticle };

package/dist/page.js

@@ -3,12 +3,16 @@ import {
   TocPopover,
   Breadcrumb,
   Footer,
-  TocProvider,
+  TOCItems,
   LastUpdate,
 } from "./page.client"
 import {
   replaceOrDefault
 } from "./chunk-UOD2T27N.js";
+import {
+  Card,
+  Cards
+} from "./chunk-WLTWFYQA.js";
 import {
   twMerge
 } from "./chunk-TK3TM3MR.js";
@@ -16,7 +20,10 @@ import "./chunk-MLKGABMK.js";
 
 // src/page.tsx
 import { forwardRef } from "react";
+import dynamic from "next/dynamic";
+import { AnchorProvider } from "fumadocs-core/toc";
 import { jsx, jsxs } from "react/jsx-runtime";
+var ClerkTOCItems = dynamic(() => import("./toc-clerk-5OPLPRKO.js"));
 function DocsPage({
   toc = [],
   tableOfContent = {},
@@ -32,7 +39,7 @@ function DocsPage({
     enabled: tableOfContent.enabled ?? !full,
     ...tableOfContent
   };
-  return /* @__PURE__ */ jsxs(TocProvider, { toc, children: [
+  return /* @__PURE__ */ jsxs(AnchorProvider, { toc, single: tableOfContent.single, children: [
     /* @__PURE__ */ jsxs(
       "div",
       {
@@ -56,7 +63,8 @@ function DocsPage({
                   {
                     items: toc,
                     header: tocPopoverOptions.header,
-                    footer: tocPopoverOptions.footer
+                    footer: tocPopoverOptions.footer,
+                    children: tocPopoverOptions.style === "clerk" ? /* @__PURE__ */ jsx(ClerkTOCItems, { items: toc, isMenu: true }) : /* @__PURE__ */ jsx(TOCItems, { items: toc, isMenu: true })
                   }
                 )
               }
@@ -74,19 +82,56 @@ function DocsPage({
     ),
     replaceOrDefault(
       tocOptions,
-      /* @__PURE__ */ jsx(
-        Toc,
-        {
-          items: toc,
-          header: tocOptions.header,
-          footer: tocOptions.footer
-        }
-      )
+      /* @__PURE__ */ jsx(Toc, { header: tocOptions.header, footer: tocOptions.footer, children: tocOptions.style === "clerk" ? /* @__PURE__ */ jsx(ClerkTOCItems, { items: toc }) : /* @__PURE__ */ jsx(TOCItems, { items: toc }) })
     )
   ] });
 }
 var DocsBody = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: twMerge("prose", className), ...props }));
 DocsBody.displayName = "DocsBody";
+var DocsDescription = forwardRef((props, ref) => {
+  if (props.children === void 0) return null;
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      ref,
+      ...props,
+      className: twMerge("mb-8 text-lg text-fd-muted-foreground", props.className),
+      children: props.children
+    }
+  );
+});
+DocsDescription.displayName = "DocsDescription";
+var DocsTitle = forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx(
+    "h1",
+    {
+      ref,
+      ...props,
+      className: twMerge("text-3xl font-bold", props.className),
+      children: props.children
+    }
+  );
+});
+DocsTitle.displayName = "DocsTitle";
+function DocsCategory({
+  page,
+  pages,
+  ...props
+}) {
+  const filtered = pages.filter(
+    (item) => item.file.dirname === page.file.dirname && item.file.name !== page.file.name
+  );
+  return /* @__PURE__ */ jsx(Cards, { ...props, children: filtered.map((item) => /* @__PURE__ */ jsx(
+    Card,
+    {
+      title: item.data.title,
+      description: item.data.description ?? "No Description",
+      href: item.url
+    },
+    item.url
+  )) });
+}
+DocsBody.displayName = "DocsBody";
 function withArticle({
   children
 }) {
@@ -94,6 +139,9 @@ function withArticle({
 }
 export {
   DocsBody,
+  DocsCategory,
+  DocsDescription,
   DocsPage,
+  DocsTitle,
   withArticle
 };

package/dist/provider.d.ts

@@ -1,4 +1,4 @@
-import * as React$1 from 'react';
+import * as react from 'react';
 import { MutableRefObject, ReactNode } from 'react';
 import { ThemeProviderProps } from 'next-themes/dist/types';
 import { DefaultSearchDialogProps } from './components/dialog/search-default.js';
@@ -61,7 +61,7 @@ interface SidebarContext {
      */
     closeOnRedirect: MutableRefObject<boolean>;
 }
-declare const SidebarContext: React$1.Context<SidebarContext | undefined>;
+declare const SidebarContext: react.Context<SidebarContext | undefined>;
 declare function useSidebar(): SidebarContext;
 
 interface SearchOptions extends Omit<SearchProviderProps, 'options' | 'children'> {