fumadocs-ui 8.0.0

package/dist/layout.js

@@ -0,0 +1,97 @@
+import {
+  Nav,
+  TreeContextProvider,
+  Sidebar,
+} from "./layout.client.js"
+import {
+  replaceOrDefault
+} from "./chunk-EDUYFB4P.js";
+import {
+  cn
+} from "./chunk-KCGRUOMD.js";
+import "./chunk-6C3VEZWH.js";
+
+// src/layout.tsx
+import { GithubIcon } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function Layout({
+  nav = {},
+  links = [],
+  children
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    getNav(false, false, links, nav),
+    children
+  ] });
+}
+function DocsLayout({
+  nav = {},
+  sidebar = {},
+  links = [],
+  containerProps,
+  tree,
+  children
+}) {
+  const sidebarEnabled = sidebar.enabled ?? true;
+  const sidebarCollaspible = sidebarEnabled && (sidebar.collapsible ?? true);
+  return /* @__PURE__ */ jsxs(TreeContextProvider, { tree, children: [
+    getNav(sidebarEnabled, sidebarCollaspible, links, nav),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...containerProps,
+        className: cn(
+          "container flex flex-row gap-6 xl:gap-12",
+          containerProps?.className
+        ),
+        children: [
+          replaceOrDefault(
+            sidebar,
+            /* @__PURE__ */ jsx(
+              Sidebar,
+              {
+                items: links,
+                defaultOpenLevel: sidebar.defaultOpenLevel,
+                banner: sidebar.banner,
+                footer: sidebar.footer
+              }
+            )
+          ),
+          children
+        ]
+      }
+    )
+  ] });
+}
+function getNav(enableSidebar, collapsibleSidebar, items, { githubUrl, links, ...props }) {
+  let iconLinks = links ?? [];
+  if (githubUrl)
+    iconLinks = [
+      ...iconLinks,
+      {
+        href: githubUrl,
+        label: "Github",
+        icon: /* @__PURE__ */ jsx(GithubIcon, {}),
+        external: true
+      }
+    ];
+  return replaceOrDefault(
+    props,
+    /* @__PURE__ */ jsx(
+      Nav,
+      {
+        title: "My App",
+        ...props,
+        items,
+        links: iconLinks,
+        enableSidebar,
+        collapsibleSidebar,
+        children: props.children
+      }
+    )
+  );
+}
+export {
+  DocsLayout,
+  Layout
+};

package/dist/mdx.client.d.mts

@@ -0,0 +1,7 @@
+import { HTMLAttributes } from 'react';
+
+declare function Pre({ title, allowCopy, ...props }: HTMLAttributes<HTMLPreElement> & {
+    allowCopy?: boolean;
+}): JSX.Element;
+
+export { Pre };

package/dist/mdx.client.js

@@ -0,0 +1,23 @@
+"use client";
+import {
+  CodeBlock,
+  Pre
+} from "./chunk-2ZR5Z6B2.js";
+import "./chunk-OG3QOLYP.js";
+import "./chunk-24NYFO7H.js";
+import "./chunk-5KW7ATCP.js";
+import "./chunk-KCGRUOMD.js";
+import "./chunk-6C3VEZWH.js";
+
+// src/mdx.client.tsx
+import { jsx } from "react/jsx-runtime";
+function Pre2({
+  title,
+  allowCopy,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(CodeBlock, { title, allowCopy, children: /* @__PURE__ */ jsx(Pre, { ...props }) });
+}
+export {
+  Pre2 as Pre
+};

package/dist/mdx.d.mts

@@ -0,0 +1,36 @@
+import { Pre } from './mdx.client.mjs';
+import { FC, AnchorHTMLAttributes, ImgHTMLAttributes, TableHTMLAttributes } from 'react';
+import { Card, Cards } from './components/card.mjs';
+import 'fumadocs-core/link';
+
+declare function Image(props: ImgHTMLAttributes<HTMLImageElement>): JSX.Element;
+declare function Table(props: TableHTMLAttributes<HTMLTableElement>): JSX.Element;
+declare const defaultMdxComponents: {
+    pre: typeof Pre;
+    Card: typeof Card;
+    Cards: typeof Cards;
+    a: FC<AnchorHTMLAttributes<HTMLAnchorElement>>;
+    img: typeof Image;
+    h1: (props: React.HTMLAttributes<HTMLHeadingElement>) => JSX.Element;
+    h2: (props: React.HTMLAttributes<HTMLHeadingElement>) => JSX.Element;
+    h3: (props: React.HTMLAttributes<HTMLHeadingElement>) => JSX.Element;
+    h4: (props: React.HTMLAttributes<HTMLHeadingElement>) => JSX.Element;
+    h5: (props: React.HTMLAttributes<HTMLHeadingElement>) => JSX.Element;
+    h6: (props: React.HTMLAttributes<HTMLHeadingElement>) => JSX.Element;
+    table: typeof Table;
+};
+/**
+ * **Server Component Only**
+ *
+ * Sometimes, if you directly pass a client component to MDX Components, it will throw an error
+ *
+ * To solve this, you can re-create the component in a server component like: `(props) => <Component {...props} />`
+ *
+ * This function does that for you
+ *
+ * @param c - MDX Components
+ * @returns MDX Components with re-created client components
+ */
+declare function createComponents<Components extends Record<string, FC<unknown>>>(c: Components): Components;
+
+export { createComponents, defaultMdxComponents as default };

package/dist/mdx.js

@@ -0,0 +1,51 @@
+import { Pre } from "./mdx.client.js"
+import {
+  defaultImageSizes
+} from "./chunk-EDUYFB4P.js";
+import {
+  Card,
+  Cards
+} from "./chunk-F62NYOL5.js";
+import {
+  Heading
+} from "./chunk-CBOHU2VN.js";
+import "./chunk-KCGRUOMD.js";
+import "./chunk-6C3VEZWH.js";
+
+// src/mdx.tsx
+import Link from "fumadocs-core/link";
+import NextImage from "next/image";
+import { jsx } from "react/jsx-runtime";
+function Image(props) {
+  return /* @__PURE__ */ jsx(NextImage, { sizes: defaultImageSizes, ...props });
+}
+function Table(props) {
+  return /* @__PURE__ */ jsx("div", { className: "relative overflow-auto", children: /* @__PURE__ */ jsx("table", { ...props }) });
+}
+var defaultMdxComponents = {
+  pre: Pre,
+  Card,
+  Cards,
+  a: Link,
+  img: Image,
+  h1: (props) => /* @__PURE__ */ jsx(Heading, { as: "h1", ...props }),
+  h2: (props) => /* @__PURE__ */ jsx(Heading, { as: "h2", ...props }),
+  h3: (props) => /* @__PURE__ */ jsx(Heading, { as: "h3", ...props }),
+  h4: (props) => /* @__PURE__ */ jsx(Heading, { as: "h4", ...props }),
+  h5: (props) => /* @__PURE__ */ jsx(Heading, { as: "h5", ...props }),
+  h6: (props) => /* @__PURE__ */ jsx(Heading, { as: "h6", ...props }),
+  table: Table
+};
+function createComponents(c) {
+  const mapped = Object.entries(c).map(([k, V]) => {
+    return [
+      k,
+      Object.keys(V).length === 0 ? (props) => /* @__PURE__ */ jsx(V, { ...props }) : V
+    ];
+  });
+  return Object.fromEntries(mapped);
+}
+export {
+  createComponents,
+  defaultMdxComponents as default
+};

package/dist/page.client.d.mts

@@ -0,0 +1,29 @@
+import { TOCItemType } from 'fumadocs-core/server';
+
+declare function TOCItems({ items }: {
+    items: TOCItemType[];
+}): JSX.Element;
+
+declare function Breadcrumb(): JSX.Element;
+
+declare function LastUpdate(props: {
+    date: Date;
+}): JSX.Element;
+interface FooterProps {
+    /**
+     * Items including information for the next and previous page
+     */
+    items?: {
+        previous?: {
+            name: string;
+            url: string;
+        };
+        next?: {
+            name: string;
+            url: string;
+        };
+    };
+}
+declare function Footer({ items }: FooterProps): JSX.Element;
+
+export { Breadcrumb, Footer, type FooterProps, LastUpdate, TOCItems };

package/dist/page.client.js

@@ -0,0 +1,168 @@
+"use client";
+import {
+  useTreeContext
+} from "./chunk-UIZNMCLD.js";
+import "./chunk-EDUYFB4P.js";
+import {
+  useI18n
+} from "./chunk-YAHHY62W.js";
+import {
+  cn
+} from "./chunk-KCGRUOMD.js";
+import "./chunk-6C3VEZWH.js";
+
+// src/page.client.tsx
+import { useEffect as useEffect2, useMemo, useState as useState2 } from "react";
+import { cva } from "class-variance-authority";
+import { ChevronLeftIcon, ChevronRightIcon as ChevronRightIcon2 } from "lucide-react";
+import Link2 from "next/link";
+import { usePathname as usePathname2 } from "next/navigation";
+
+// src/components/toc.tsx
+import { TextIcon } from "lucide-react";
+import * as Primitive from "fumadocs-core/toc";
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function TOCItems({ items }) {
+  const { text } = useI18n();
+  const [pos, setPos] = useState();
+  return /* @__PURE__ */ jsxs(
+    Primitive.TOCProvider,
+    {
+      toc: items,
+      className: "relative overflow-hidden pt-4 text-sm first:pt-0",
+      children: [
+        /* @__PURE__ */ jsxs("h3", { className: "mb-4 inline-flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(TextIcon, { className: "size-4" }),
+          text.toc
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 border-l-2 text-muted-foreground", children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              role: "none",
+              className: cn(
+                "absolute left-0 border-l-2 transition-all",
+                pos && "border-primary"
+              ),
+              style: {
+                top: pos?.[0],
+                height: pos?.[1]
+              }
+            }
+          ),
+          items.map((item) => /* @__PURE__ */ jsx(TOCItem2, { item, setMarker: setPos }, item.url))
+        ] })
+      ]
+    }
+  );
+}
+function TOCItem2({
+  item,
+  setMarker
+}) {
+  const active = Primitive.useActiveAnchor(item.url);
+  const ref = useRef(null);
+  useEffect(() => {
+    if (active && ref.current) {
+      setMarker([ref.current.offsetTop, ref.current.clientHeight]);
+    }
+  }, [active, setMarker]);
+  return /* @__PURE__ */ jsx(
+    Primitive.TOCItem,
+    {
+      ref,
+      href: item.url,
+      className: cn(
+        "overflow-hidden text-ellipsis py-1 transition-colors data-[active=true]:font-medium data-[active=true]:text-primary",
+        item.depth <= 2 && "pl-4",
+        item.depth === 3 && "pl-7",
+        item.depth >= 4 && "pl-10"
+      ),
+      children: item.title
+    }
+  );
+}
+
+// src/components/breadcrumb.tsx
+import { ChevronRightIcon } from "lucide-react";
+import { useBreadcrumb } from "fumadocs-core/breadcrumb";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { Fragment } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function Breadcrumb() {
+  const { root } = useTreeContext();
+  const pathname = usePathname();
+  const items = useBreadcrumb(pathname, root);
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      className: cn(
+        "flex flex-row items-center gap-1 text-sm text-muted-foreground",
+        items.length === 1 && "hidden"
+      ),
+      children: items.map((item, i) => {
+        const isLast = items.length === i + 1;
+        const style = cn(
+          "overflow-hidden whitespace-nowrap",
+          isLast ? "text-foreground" : "text-ellipsis"
+        );
+        return (
+          // eslint-disable-next-line react/no-array-index-key -- Won't re-render
+          /* @__PURE__ */ jsxs2(Fragment, { children: [
+            i !== 0 && /* @__PURE__ */ jsx2(ChevronRightIcon, { className: "size-4 shrink-0" }),
+            item.url ? /* @__PURE__ */ jsx2(Link, { href: item.url, className: style, children: item.name }) : /* @__PURE__ */ jsx2("p", { className: style, 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("");
+  useEffect2(() => {
+    setDate(props.date.toLocaleDateString());
+  }, [props.date]);
+  return /* @__PURE__ */ jsxs3("p", { className: "mt-8 text-xs text-muted-foreground", children: [
+    text.lastUpdate,
+    " ",
+    date
+  ] });
+}
+var footerItem = cva(
+  "flex flex-row items-center gap-2 text-muted-foreground transition-colors hover:text-foreground"
+);
+function Footer({ items }) {
+  const tree = useTreeContext();
+  const pathname = usePathname2();
+  const { previous, next } = useMemo(() => {
+    if (items)
+      return items;
+    const currentIndex = tree.list.findIndex((item) => item.url === pathname);
+    return {
+      previous: tree.list[currentIndex - 1],
+      next: tree.list[currentIndex + 1]
+    };
+  }, [items, pathname, tree.list]);
+  return /* @__PURE__ */ jsxs3("div", { className: "mt-4 flex flex-row flex-wrap gap-4 border-t py-12", children: [
+    previous ? /* @__PURE__ */ jsxs3(Link2, { href: previous.url, className: footerItem(), children: [
+      /* @__PURE__ */ jsx3(ChevronLeftIcon, { className: "size-5 shrink-0" }),
+      /* @__PURE__ */ jsx3("p", { className: "font-medium text-foreground", children: previous.name })
+    ] }) : null,
+    next ? /* @__PURE__ */ jsxs3(Link2, { href: next.url, className: footerItem({ className: "ml-auto" }), children: [
+      /* @__PURE__ */ jsx3("p", { className: "text-end font-medium text-foreground", children: next.name }),
+      /* @__PURE__ */ jsx3(ChevronRightIcon2, { className: "size-5 shrink-0" })
+    ] }) : null
+  ] });
+}
+export {
+  Breadcrumb,
+  Footer,
+  LastUpdate,
+  TOCItems
+};

package/dist/page.d.mts

@@ -0,0 +1,49 @@
+import * as react from 'react';
+import { ReactNode, HTMLAttributes } from 'react';
+import { TableOfContents, TOCItemType } from 'fumadocs-core/server';
+import { FooterProps } from './page.client.mjs';
+
+type TableOfContentOptions = Omit<TOCProps, 'items'> & {
+    enabled: boolean;
+    component: ReactNode;
+};
+interface BreadcrumbOptions {
+    enabled: boolean;
+    component: ReactNode;
+}
+interface FooterOptions extends FooterProps {
+    enabled: boolean;
+    component: ReactNode;
+}
+interface DocsPageProps {
+    toc?: TableOfContents;
+    tableOfContent?: Partial<TableOfContentOptions>;
+    /**
+     * Replace or disable breadcrumb
+     */
+    breadcrumb?: Partial<BreadcrumbOptions>;
+    /**
+     * Footer navigation, you can disable it by passing `false`
+     */
+    footer?: Partial<FooterOptions>;
+    lastUpdate?: Date | string | number;
+    children: ReactNode;
+}
+declare function DocsPage({ tableOfContent, breadcrumb, footer, ...props }: DocsPageProps): JSX.Element;
+interface TOCProps {
+    items: TOCItemType[];
+    /**
+     * Custom content in TOC container, before the main TOC
+     */
+    header: ReactNode;
+    /**
+     * Custom content in TOC container, after the main TOC
+     */
+    footer: ReactNode;
+}
+/**
+ * Add typography styles
+ */
+declare const DocsBody: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+
+export { DocsBody, DocsPage, type DocsPageProps };

package/dist/page.js

@@ -0,0 +1,56 @@
+import {
+  TOCItems,
+  Breadcrumb,
+  Footer,
+  LastUpdate,
+} from "./page.client.js"
+import {
+  replaceOrDefault
+} from "./chunk-EDUYFB4P.js";
+import {
+  cn
+} from "./chunk-KCGRUOMD.js";
+import "./chunk-6C3VEZWH.js";
+
+// src/page.tsx
+import { forwardRef } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function DocsPage({
+  tableOfContent = {},
+  breadcrumb = {},
+  footer = {},
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("article", { className: "flex w-0 flex-1 flex-col gap-6 py-10", children: [
+      replaceOrDefault(breadcrumb, /* @__PURE__ */ jsx(Breadcrumb, {})),
+      props.children,
+      props.lastUpdate ? /* @__PURE__ */ jsx(LastUpdate, { date: new Date(props.lastUpdate) }) : null,
+      replaceOrDefault(footer, /* @__PURE__ */ jsx(Footer, { items: footer.items }))
+    ] }),
+    replaceOrDefault(
+      tableOfContent,
+      /* @__PURE__ */ jsx(
+        Toc,
+        {
+          items: props.toc ?? [],
+          header: tableOfContent.header,
+          footer: tableOfContent.footer
+        }
+      )
+    )
+  ] });
+}
+function Toc(props) {
+  return /* @__PURE__ */ jsxs("div", { className: "sticky top-16 flex h-body w-[220px] flex-col gap-4 divide-y py-10 max-lg:hidden xl:w-[260px]", children: [
+    props.header,
+    props.items.length > 0 && /* @__PURE__ */ jsx(TOCItems, { items: props.items }),
+    props.footer ? /* @__PURE__ */ jsx("div", { className: "pt-4 first:pt-0", children: props.footer }) : null
+  ] });
+}
+var DocsBody = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("prose", className), ...props }));
+DocsBody.displayName = "DocsBody";
+export {
+  DocsBody,
+  DocsPage
+};

package/dist/provider.d.mts

@@ -0,0 +1,50 @@
+import * as react from 'react';
+import { ComponentType, ReactNode } from 'react';
+import { SharedProps } from './components/dialog/search.mjs';
+export { u as useI18n } from './i18n-dw7ODAws.mjs';
+export { u as useTreeContext } from './tree-Zwtp9xPv.mjs';
+import 'fumadocs-core/search/shared';
+import 'fumadocs-core/server';
+
+interface SearchProviderProps {
+    /**
+     * Preload search dialog before opening it
+     *
+     * @defaultValue `true`
+     */
+    preload?: boolean;
+    /**
+     * Custom links to be displayed if search is empty
+     */
+    links?: SearchContextType['links'];
+    /**
+     * Replace default search dialog, allowing you to use other solutions such as Algolia Search
+     *
+     * It receives the `open` and `onOpenChange` prop, shall be lazy loaded with `next/dynamic`
+     */
+    SearchDialog: ComponentType<SharedProps>;
+    children: ReactNode;
+}
+interface SearchContextType {
+    links: [name: string, link: string][];
+    setOpenSearch: (value: boolean) => void;
+}
+declare function useSearchContext(): SearchContextType;
+
+type SidebarCollapseContext = [open: boolean, setOpen: (v: boolean) => void];
+declare const SidebarCollapseContext: react.Context<SidebarCollapseContext | undefined>;
+declare function useSidebarCollapse(): SidebarCollapseContext;
+
+interface RootProviderProps {
+    search?: Partial<Omit<SearchProviderProps, 'children'>>;
+    /**
+     * Wrap the body in `ThemeProvider` (next-themes)
+     *
+     * @defaultValue true
+     */
+    enableThemeProvider?: boolean;
+    children: ReactNode;
+}
+declare function RootProvider({ children, enableThemeProvider, search, }: RootProviderProps): JSX.Element;
+
+export { RootProvider, type RootProviderProps, useSearchContext, useSidebarCollapse };

package/dist/provider.js

@@ -0,0 +1,51 @@
+"use client";
+import {
+  SidebarCollapseProvider,
+  useSidebarCollapse
+} from "./chunk-PLXR6QNH.js";
+import {
+  useTreeContext
+} from "./chunk-UIZNMCLD.js";
+import "./chunk-EDUYFB4P.js";
+import {
+  SearchProvider,
+  useSearchContext
+} from "./chunk-36MVEJ25.js";
+import {
+  useI18n
+} from "./chunk-YAHHY62W.js";
+import "./chunk-6C3VEZWH.js";
+
+// src/provider.tsx
+import { SidebarProvider } from "fumadocs-core/sidebar";
+import { ThemeProvider } from "next-themes";
+import dynamic from "next/dynamic";
+import { jsx } from "react/jsx-runtime";
+var DefaultSearchDialog = dynamic(
+  () => import("./components/dialog/search-default.js"),
+  { ssr: false }
+);
+function RootProvider({
+  children,
+  enableThemeProvider = true,
+  search
+}) {
+  const body = /* @__PURE__ */ jsx(SidebarProvider, { children: /* @__PURE__ */ jsx(SidebarCollapseProvider, { children: /* @__PURE__ */ jsx(SearchProvider, { SearchDialog: DefaultSearchDialog, ...search, children }) }) });
+  return enableThemeProvider ? /* @__PURE__ */ jsx(
+    ThemeProvider,
+    {
+      attribute: "class",
+      defaultTheme: "system",
+      enableSystem: true,
+      disableTransitionOnChange: true,
+      children: body
+    }
+  ) : body;
+}
+export {
+  RootProvider,
+  useI18n,
+  useSearchContext,
+  useSidebarCollapse,
+  useTreeContext
+};