fumadocs-ui 14.2.1 → 14.3.0

package/dist/page.js

@@ -1,177 +1,89 @@
-import {
-  Toc,
-  TocPopover,
-  Breadcrumb,
-  Footer,
-  TOCItems,
-  LastUpdate,
-} from "./page.client"
-import {
-  replaceOrDefault
-} from "./chunk-E3VO2QQT.js";
-import {
-  Card,
-  Cards
-} from "./chunk-GHOAONNQ.js";
-import {
-  twMerge
-} from "./chunk-TK3TM3MR.js";
-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-SKE4LBT7.js"));
-var EditOnGitHub = dynamic(
-  () => import("./edit-on-github-FIYOWWPQ.js")
-);
-function DocsPage({
-  toc = [],
-  breadcrumb = {},
-  full = false,
-  footer = {},
-  tableOfContentPopover: {
-    enabled: tocPopoverEnabled = true,
-    component: tocPopoverReplace,
-    ...tocPopoverOptions
-  } = {},
-  tableOfContent: {
-    // disable TOC on full mode, you can still enable it with `enabled` option.
-    enabled: tocEnabled = !full,
-    component: tocReplace,
-    ...tocOptions
-  } = {},
-  ...props
-}) {
-  return /* @__PURE__ */ jsxs(AnchorProvider, { toc, single: tocOptions.single, children: [
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        id: "nd-page",
-        className: "flex w-full min-w-0 max-w-[var(--fd-page-width)] flex-col md:transition-[max-width]",
-        style: {
-          "--fd-page-width": "calc(min(100vw, var(--fd-layout-width)) - var(--fd-sidebar-width) - var(--fd-toc-width))",
-          "--fd-toc-width": tocEnabled ? void 0 : "0px"
-        },
-        children: [
-          replaceOrDefault(
-            { enabled: tocPopoverEnabled, component: tocPopoverReplace },
-            /* @__PURE__ */ jsx(TocPopover, { items: toc, ...tocPopoverOptions, className: "lg:hidden", children: tocPopoverOptions.style === "clerk" ? /* @__PURE__ */ jsx(ClerkTOCItems, { items: toc, isMenu: true }) : /* @__PURE__ */ jsx(TOCItems, { items: toc, isMenu: true }) }),
-            {
-              items: toc,
-              ...tocPopoverOptions
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "article",
-            {
-              className: twMerge(
-                "mx-auto flex w-full flex-1 flex-col gap-6 px-4 pt-10 md:px-6 md:pt-12",
-                tocEnabled ? "max-w-[860px]" : "max-w-[1120px]"
-              ),
-              children: [
-                replaceOrDefault(breadcrumb, /* @__PURE__ */ jsx(Breadcrumb, { ...breadcrumb })),
-                props.children,
-                /* @__PURE__ */ jsx("div", { role: "none", className: "flex-1" }),
-                /* @__PURE__ */ jsxs("div", { className: "flex flex-row flex-wrap items-center justify-between gap-4 empty:hidden", children: [
-                  props.editOnGithub ? /* @__PURE__ */ jsx(EditOnGitHub, { ...props.editOnGithub }) : null,
-                  props.lastUpdate ? /* @__PURE__ */ jsx(LastUpdate, { date: new Date(props.lastUpdate) }) : null
-                ] }),
-                replaceOrDefault(footer, /* @__PURE__ */ jsx(Footer, { items: footer.items }))
-              ]
-            }
-          )
-        ]
-      }
-    ),
-    replaceOrDefault(
-      { enabled: tocEnabled, component: tocReplace },
-      /* @__PURE__ */ jsx(Toc, { ...tocOptions, children: tocOptions.style === "clerk" ? /* @__PURE__ */ jsx(ClerkTOCItems, { items: toc }) : /* @__PURE__ */ jsx(TOCItems, { items: toc }) }),
-      {
-        items: toc,
-        ...tocOptions
-      },
-      /* @__PURE__ */ jsx("div", { role: "none", className: "flex-1" })
-    )
-  ] });
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, } from 'react';
+import dynamic from 'next/dynamic';
+import { AnchorProvider } from 'fumadocs-core/toc';
+import { Card, Cards } from './components/card';
+import { replaceOrDefault } from './layouts/shared';
+import { cn } from './utils/cn';
+import { Footer, LastUpdate, PageContainer, PageHeader, } from './page.client';
+import { Breadcrumb, } from './components/layout/breadcrumb';
+import { Toc, TOCItems } from './components/layout/toc';
+import { TocPopoverTrigger, TocPopover, TocPopoverContent, } from './components/layout/toc-popover';
+import { buttonVariants } from './components/ui/button';
+import { Edit, Text } from 'lucide-react';
+import { I18nLabel } from './contexts/i18n';
+const ClerkTOCItems = dynamic(() => import('./components/layout/toc-clerk'));
+export function DocsPage({ toc = [], breadcrumb = {}, full = false, footer = {}, tableOfContentPopover: { enabled: tocPopoverEnabled = true, component: tocPopoverReplace, ...tocPopoverOptions } = {}, tableOfContent: { 
+// disable TOC on full mode, you can still enable it with `enabled` option.
+enabled: tocEnabled = !full, component: tocReplace, ...tocOptions } = {}, ...props }) {
+    return (_jsxs(AnchorProvider, { toc: toc, single: tocOptions.single, children: [_jsxs(PageContainer, { style: {
+                    '--fd-toc-width': tocEnabled ? undefined : '0px',
+                }, children: [replaceOrDefault({ enabled: tocPopoverEnabled, component: tocPopoverReplace }, _jsx(PageHeader, { className: "lg:hidden", children: _jsxs(TocPopover, { children: [_jsx(TocPopoverTrigger, { className: "size-full", items: toc }), _jsxs(TocPopoverContent, { children: [tocPopoverOptions.header, tocPopoverOptions.style === 'clerk' ? (_jsx(ClerkTOCItems, { items: toc, isMenu: true })) : (_jsx(TOCItems, { items: toc, isMenu: true })), tocPopoverOptions.footer] })] }) }), {
+                        items: toc,
+                        ...tocPopoverOptions,
+                    }), _jsxs("article", { className: cn('mx-auto flex w-full flex-1 flex-col gap-6 px-4 pt-10 md:px-6 md:pt-12', tocEnabled ? 'max-w-[860px]' : 'max-w-[1120px]'), children: [replaceOrDefault(breadcrumb, _jsx(Breadcrumb, { ...breadcrumb })), props.children, _jsx("div", { role: "none", className: "flex-1" }), _jsxs("div", { className: "flex flex-row flex-wrap items-center justify-between gap-4 empty:hidden", children: [props.editOnGithub ? (_jsx(EditOnGitHub, { ...props.editOnGithub })) : null, props.lastUpdate ? (_jsx(LastUpdate, { date: new Date(props.lastUpdate) })) : null] }), replaceOrDefault(footer, _jsx(Footer, { items: footer.items }))] })] }), replaceOrDefault({ enabled: tocEnabled, component: tocReplace }, _jsx(Toc, { children: _jsxs("div", { className: "flex h-full w-[var(--fd-toc-width)] max-w-full flex-col gap-3", children: [tocOptions.header, _jsxs("h3", { className: "-ms-0.5 inline-flex items-center gap-1.5 text-sm text-fd-muted-foreground", children: [_jsx(Text, { className: "size-4" }), _jsx(I18nLabel, { label: "toc" })] }), tocOptions.style === 'clerk' ? (_jsx(ClerkTOCItems, { items: toc })) : (_jsx(TOCItems, { items: toc })), tocOptions.footer] }) }), {
+                items: toc,
+                ...tocOptions,
+            }, _jsx("div", { role: "none", className: "flex-1" }))] }));
 }
-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
-    }
-  );
+function EditOnGitHub({ owner, repo, sha, path, ...props }) {
+    const href = `https://github.com/${owner}/${repo}/blob/${sha}/${path.startsWith('/') ? path.slice(1) : path}`;
+    return (_jsxs("a", { href: href, target: "_blank", rel: "noreferrer noopener", ...props, className: cn(buttonVariants({
+            color: 'secondary',
+            className: 'gap-1.5 py-1 text-fd-muted-foreground',
+        }), props.className), children: [_jsx(Edit, { className: "size-3.5" }), _jsx(I18nLabel, { label: "editOnGithub" })] }));
+}
+/**
+ * Add typography styles
+ */
+export const DocsBody = forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn('prose', className), ...props })));
+DocsBody.displayName = 'DocsBody';
+export const DocsDescription = forwardRef((props, ref) => {
+    // don't render if no description provided
+    if (props.children === undefined)
+        return null;
+    return (_jsx("p", { ref: ref, ...props, className: cn('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
-    }
-  );
+DocsDescription.displayName = 'DocsDescription';
+export const DocsTitle = forwardRef((props, ref) => {
+    return (_jsx("h1", { ref: ref, ...props, className: cn('text-3xl font-bold', props.className), children: props.children }));
 });
-DocsTitle.displayName = "DocsTitle";
+DocsTitle.displayName = 'DocsTitle';
 function findParent(node, page) {
-  if ("index" in node && node.index?.$ref?.file === page.file.path) {
-    return node;
-  }
-  for (const child of node.children) {
-    if (child.type === "folder") {
-      const parent = findParent(child, page);
-      if (parent) return parent;
+    if ('index' in node && node.index?.$ref?.file === page.file.path) {
+        return node;
     }
-    if (child.type === "page" && child.$ref?.file === page.file.path) {
-      return node;
+    for (const child of node.children) {
+        if (child.type === 'folder') {
+            const parent = findParent(child, page);
+            if (parent)
+                return parent;
+        }
+        if (child.type === 'page' && child.$ref?.file === page.file.path) {
+            return node;
+        }
     }
-  }
 }
-function DocsCategory({
-  page,
-  from,
-  tree: forcedTree,
-  ...props
-}) {
-  const tree = forcedTree ?? (from._i18n ? from.pageTree[page.locale ?? from._i18n.defaultLanguage] : from.pageTree);
-  const parent = findParent(tree, page);
-  if (!parent) return null;
-  const items = parent.children.flatMap((item) => {
-    if (item.type !== "page" || item.url === page.url) return [];
-    return from.getNodePage(item) ?? [];
-  });
-  return /* @__PURE__ */ jsx(Cards, { ...props, children: items.map((item) => /* @__PURE__ */ jsx(
-    Card,
-    {
-      title: item.data.title,
-      description: item.data.description ?? "No Description",
-      href: item.url
-    },
-    item.url
-  )) });
+export function DocsCategory({ page, from, tree: forcedTree, ...props }) {
+    const tree = forcedTree ??
+        (from._i18n
+            ? from.pageTree[page.locale ?? from._i18n.defaultLanguage]
+            : from.pageTree);
+    const parent = findParent(tree, page);
+    if (!parent)
+        return null;
+    const items = parent.children.flatMap((item) => {
+        if (item.type !== 'page' || item.url === page.url)
+            return [];
+        return from.getNodePage(item) ?? [];
+    });
+    return (_jsx(Cards, { ...props, children: items.map((item) => (_jsx(Card, { title: item.data.title, description: item.data.description ??
+                'No Description', href: item.url }, item.url))) }));
 }
-DocsBody.displayName = "DocsBody";
-function withArticle({
-  children
-}) {
-  return /* @__PURE__ */ jsx("main", { className: "container py-12", children: /* @__PURE__ */ jsx("article", { className: "prose", children }) });
+DocsBody.displayName = 'DocsBody';
+/**
+ * For separate MDX page
+ */
+export function withArticle({ children }) {
+    return (_jsx("main", { className: "container py-12", children: _jsx("article", { className: "prose", children: children }) }));
 }
-export {
-  DocsBody,
-  DocsCategory,
-  DocsDescription,
-  DocsPage,
-  DocsTitle,
-  withArticle
-};

package/dist/provider.d.ts

@@ -1,70 +1,7 @@
-import * as react from 'react';
-import { ReactNode, MutableRefObject } from 'react';
-import { ThemeProviderProps } from 'next-themes/dist/types';
-import { DefaultSearchDialogProps } from './components/dialog/search-default.js';
-import { SearchLink, SharedProps } from './components/dialog/search.js';
-export { u as useI18n } from './i18n-Db2HAPOu.js';
-export { u as useTreeContext } from './tree-06ley65N.js';
-import './tag-list-BsEgfE3x.js';
-import 'react/jsx-runtime';
-import 'fumadocs-core/server';
-
-interface HotKey {
-    display: ReactNode;
-    /**
-     * Key code or a function determining whether the key is pressed.
-     */
-    key: string | ((e: KeyboardEvent) => boolean);
-}
-interface SearchProviderProps {
-    /**
-     * Preload search dialog before opening it
-     *
-     * @defaultValue `true`
-     */
-    preload?: boolean;
-    /**
-     * Custom links to be displayed if search is empty
-     */
-    links?: SearchLink[];
-    /**
-     * Hotkeys for triggering search dialog
-     *
-     * @defaultValue Meta/Ctrl + K
-     */
-    hotKey?: HotKey[];
-    /**
-     * Replace default search dialog, allowing you to use other solutions such as Algolia Search
-     *
-     * It receives the `open` and `onOpenChange` prop, can be lazy loaded with `next/dynamic`
-     */
-    SearchDialog: React.ComponentType<SharedProps>;
-    /**
-     * Additional props to the dialog
-     */
-    options?: Partial<SharedProps>;
-    children?: ReactNode;
-}
-interface SearchContextType {
-    enabled: boolean;
-    hotKey: HotKey[];
-    setOpenSearch: (value: boolean) => void;
-}
-declare function useSearchContext(): SearchContextType;
-
-interface SidebarContext {
-    open: boolean;
-    setOpen: React.Dispatch<React.SetStateAction<boolean>>;
-    collapsed: boolean;
-    setCollapsed: React.Dispatch<React.SetStateAction<boolean>>;
-    /**
-     * When set to false, don't close the sidebar when navigate to another page
-     */
-    closeOnRedirect: MutableRefObject<boolean>;
-}
-declare const SidebarContext: react.Context<SidebarContext | undefined>;
-declare function useSidebar(): SidebarContext;
-
+import { ThemeProvider } from 'next-themes';
+import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import type { DefaultSearchDialogProps } from './components/dialog/search-default';
+import { type SearchProviderProps } from './contexts/search';
 interface SearchOptions extends Omit<SearchProviderProps, 'options' | 'children'> {
     options?: Partial<DefaultSearchDialogProps> | SearchProviderProps['options'];
     /**
@@ -74,7 +11,7 @@ interface SearchOptions extends Omit<SearchProviderProps, 'options' | 'children'
      */
     enabled?: boolean;
 }
-interface RootProviderProps {
+export interface RootProviderProps {
     /**
      * `dir` option for Radix UI
      */
@@ -86,7 +23,7 @@ interface RootProviderProps {
     /**
      * Customise options of `next-themes`
      */
-    theme?: Partial<ThemeProviderProps> & {
+    theme?: Partial<ComponentPropsWithoutRef<typeof ThemeProvider>> & {
         /**
          * Enable `next-themes`
          *
@@ -96,6 +33,9 @@ interface RootProviderProps {
     };
     children: ReactNode;
 }
-declare function RootProvider({ children, dir, theme: { enabled, ...theme }, search, }: RootProviderProps): React.ReactElement;
-
-export { RootProvider, type RootProviderProps, useSearchContext, useSidebar };
+export declare function RootProvider({ children, dir, theme: { enabled, ...theme }, search, }: RootProviderProps): React.ReactElement;
+export { useI18n, I18nLabel } from './contexts/i18n';
+export * from './contexts/search';
+export * from './contexts/sidebar';
+export * from './contexts/tree';
+//# sourceMappingURL=provider.d.ts.map

package/dist/provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../src/provider.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAE,KAAK,wBAAwB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGtE,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,oCAAoC,CAAC;AAEnF,OAAO,EAAkB,KAAK,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAE7E,UAAU,aACR,SAAQ,IAAI,CAAC,mBAAmB,EAAE,SAAS,GAAG,UAAU,CAAC;IACzD,OAAO,CAAC,EAAE,OAAO,CAAC,wBAAwB,CAAC,GAAG,mBAAmB,CAAC,SAAS,CAAC,CAAC;IAC7E;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,GAAG,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IAEpB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IAEhC;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC,wBAAwB,CAAC,OAAO,aAAa,CAAC,CAAC,GAAG;QAChE;;;;WAIG;QACH,OAAO,CAAC,EAAE,OAAO,CAAC;KACnB,CAAC;IAEF,QAAQ,EAAE,SAAS,CAAC;CACrB;AAOD,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,GAAG,EACH,KAAK,EAAE,EAAE,OAAc,EAAE,GAAG,KAAK,EAAO,EACxC,MAAM,GACP,EAAE,iBAAiB,GAAG,KAAK,CAAC,YAAY,CA4BxC;AAED,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AACrD,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC"}

package/dist/provider.js

@@ -1,56 +1,20 @@
-"use client";
-import {
-  SearchProvider,
-  useSearchContext
-} from "./chunk-UUGCW3UP.js";
-import {
-  useTreeContext
-} from "./chunk-YL3MZH7N.js";
-import {
-  SidebarProvider,
-  useSidebar
-} from "./chunk-27HFSL7N.js";
-import {
-  useI18n
-} from "./chunk-EFMHXXHW.js";
-import "./chunk-MLKGABMK.js";
-
-// src/provider.tsx
-import { ThemeProvider } from "next-themes";
-import dynamic from "next/dynamic";
-import { DirectionProvider } from "@radix-ui/react-direction";
-import { jsx } from "react/jsx-runtime";
-var DefaultSearchDialog = dynamic(
-  () => import("./components/dialog/search-default.js"),
-  { ssr: false }
-);
-function RootProvider({
-  children,
-  dir,
-  theme: { enabled = true, ...theme } = {},
-  search
-}) {
-  let body = children;
-  if (search?.enabled !== false)
-    body = /* @__PURE__ */ jsx(SearchProvider, { SearchDialog: DefaultSearchDialog, ...search, children: body });
-  if (enabled)
-    body = /* @__PURE__ */ jsx(
-      ThemeProvider,
-      {
-        attribute: "class",
-        defaultTheme: "system",
-        enableSystem: true,
-        disableTransitionOnChange: true,
-        ...theme,
-        children: body
-      }
-    );
-  return /* @__PURE__ */ jsx(DirectionProvider, { dir: dir ?? "ltr", children: /* @__PURE__ */ jsx(SidebarProvider, { children: body }) });
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ThemeProvider } from 'next-themes';
+import dynamic from 'next/dynamic';
+import { DirectionProvider } from '@radix-ui/react-direction';
+import { SidebarProvider } from './contexts/sidebar';
+import { SearchProvider } from './contexts/search';
+const DefaultSearchDialog = dynamic(() => import('./components/dialog/search-default'), { ssr: false });
+export function RootProvider({ children, dir, theme: { enabled = true, ...theme } = {}, search, }) {
+    let body = children;
+    if (search?.enabled !== false)
+        body = (_jsx(SearchProvider, { SearchDialog: DefaultSearchDialog, ...search, children: body }));
+    if (enabled)
+        body = (_jsx(ThemeProvider, { attribute: "class", defaultTheme: "system", enableSystem: true, disableTransitionOnChange: true, ...theme, children: body }));
+    return (_jsx(DirectionProvider, { dir: dir ?? 'ltr', children: _jsx(SidebarProvider, { children: body }) }));
 }
-export {
-  RootProvider,
-  useI18n,
-  useSearchContext,
-  useSidebar,
-  useTreeContext
-};
+export { useI18n, I18nLabel } from './contexts/i18n';
+export * from './contexts/search';
+export * from './contexts/sidebar';
+export * from './contexts/tree';