fumadocs-ui 11.2.1 → 11.3.0

package/dist/{chunk-2KA2UOM3.js → chunk-FSPYEOFC.js}

@@ -3,6 +3,7 @@ import { createContext, useContext, useEffect, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var SearchContext = createContext({
   enabled: false,
+  hotKey: [],
   setOpenSearch: () => void 0
 });
 function useSearchContext() {
@@ -13,12 +14,24 @@ function SearchProvider({
   children,
   preload = true,
   options,
+  hotKey = [
+    {
+      key: "k",
+      display: "K"
+    },
+    {
+      key: (e) => e.metaKey || e.ctrlKey,
+      display: "\u2318"
+    }
+  ],
   links
 }) {
   const [isOpen, setIsOpen] = useState(preload ? false : void 0);
   useEffect(() => {
     const handler = (e) => {
-      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
+      if (hotKey.every(
+        (v) => typeof v.key === "string" ? e.key === v.key : v.key(e)
+      )) {
         setIsOpen(true);
         e.preventDefault();
       }
@@ -27,23 +40,28 @@ function SearchProvider({
     return () => {
       window.removeEventListener("keydown", handler);
     };
-  }, []);
-  const ctx = useMemo(
-    () => ({ enabled: true, setOpenSearch: setIsOpen }),
-    []
+  }, [hotKey]);
+  return /* @__PURE__ */ jsxs(
+    SearchContext.Provider,
+    {
+      value: useMemo(
+        () => ({ enabled: true, hotKey, setOpenSearch: setIsOpen }),
+        [hotKey]
+      ),
+      children: [
+        isOpen !== void 0 && /* @__PURE__ */ jsx(
+          SearchDialog,
+          {
+            open: isOpen,
+            onOpenChange: setIsOpen,
+            links,
+            ...options
+          }
+        ),
+        children
+      ]
+    }
   );
-  return /* @__PURE__ */ jsxs(SearchContext.Provider, { value: ctx, children: [
-    isOpen !== void 0 && /* @__PURE__ */ jsx(
-      SearchDialog,
-      {
-        open: isOpen,
-        onOpenChange: setIsOpen,
-        links,
-        ...options
-      }
-    ),
-    children
-  ] });
 }
 
 export {

package/dist/{chunk-HUXFUKD2.js → chunk-PXDQVGII.js}

@@ -1,6 +1,6 @@
 import {
   useSearchContext
-} from "./chunk-2KA2UOM3.js";
+} from "./chunk-FSPYEOFC.js";
 import {
   useI18n
 } from "./chunk-PW7TBOIJ.js";

package/dist/chunk-WPJ4ENAT.js

@@ -0,0 +1,39 @@
+// src/contexts/sidebar.tsx
+import { createContext, useContext, useState, useMemo } from "react";
+import { SidebarProvider as BaseProvider } from "fumadocs-core/sidebar";
+import { jsx } from "react/jsx-runtime";
+var SidebarContext = createContext(
+  void 0
+);
+function useSidebar() {
+  const ctx = useContext(SidebarContext);
+  if (!ctx)
+    throw new Error("Missing root provider");
+  return ctx;
+}
+function SidebarProvider({
+  children
+}) {
+  const [open, setOpen] = useState(true);
+  const [collapsed, setCollapsed] = useState(false);
+  return /* @__PURE__ */ jsx(
+    SidebarContext.Provider,
+    {
+      value: useMemo(
+        () => ({
+          open,
+          setOpen,
+          collapsed,
+          setCollapsed
+        }),
+        [open, collapsed]
+      ),
+      children: /* @__PURE__ */ jsx(BaseProvider, { open, onOpenChange: setOpen, children })
+    }
+  );
+}
+
+export {
+  useSidebar,
+  SidebarProvider
+};

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/dialog/search-algolia.js

@@ -1,8 +1,8 @@
 "use client";
 import {
   SearchDialog
-} from "../../chunk-HUXFUKD2.js";
-import "../../chunk-2KA2UOM3.js";
+} from "../../chunk-PXDQVGII.js";
+import "../../chunk-FSPYEOFC.js";
 import "../../chunk-PW7TBOIJ.js";
 import "../../chunk-7GZKFBAP.js";
 import "../../chunk-TK3TM3MR.js";

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

@@ -1,8 +1,8 @@
 "use client";
 import {
   SearchDialog
-} from "../../chunk-HUXFUKD2.js";
-import "../../chunk-2KA2UOM3.js";
+} from "../../chunk-PXDQVGII.js";
+import "../../chunk-FSPYEOFC.js";
 import {
   useI18n
 } from "../../chunk-PW7TBOIJ.js";

package/dist/components/dialog/search.js

@@ -1,7 +1,7 @@
 import {
   SearchDialog
-} from "../../chunk-HUXFUKD2.js";
-import "../../chunk-2KA2UOM3.js";
+} from "../../chunk-PXDQVGII.js";
+import "../../chunk-FSPYEOFC.js";
 import "../../chunk-PW7TBOIJ.js";
 import "../../chunk-7GZKFBAP.js";
 import "../../chunk-TK3TM3MR.js";

package/dist/layout.client.js

@@ -1,7 +1,7 @@
 "use client";
 import {
-  useSidebarCollapse
-} from "./chunk-PLXR6QNH.js";
+  useSidebar
+} from "./chunk-WPJ4ENAT.js";
 import {
   TreeContextProvider,
   useTreeContext
@@ -21,7 +21,7 @@ import {
 } from "./chunk-7F2LGCS6.js";
 import {
   useSearchContext
-} from "./chunk-2KA2UOM3.js";
+} from "./chunk-FSPYEOFC.js";
 import {
   useI18n
 } from "./chunk-PW7TBOIJ.js";
@@ -42,7 +42,7 @@ import "./chunk-6C3VEZWH.js";
 import { MenuIcon, MoreVertical, SearchIcon, X } from "lucide-react";
 import Link2 from "fumadocs-core/link";
 import { SidebarTrigger } from "fumadocs-core/sidebar";
-import { useEffect, useState } from "react";
+import { useCallback as useCallback2, useEffect, useState } from "react";
 import { usePathname as usePathname2 } from "next/navigation";
 
 // src/components/theme-toggle.tsx
@@ -296,7 +296,7 @@ function LinksMenu({ items, ...props }) {
     ),
     /* @__PURE__ */ jsxs3(PopoverContent, { className: "flex flex-col", children: [
       items.map((item, i) => /* @__PURE__ */ jsx3(LinkItem, { item, on: "menu" }, i)),
-      /* @__PURE__ */ jsxs3("div", { className: "flex flex-row px-2 py-1 items-center justify-between", children: [
+      /* @__PURE__ */ jsxs3("div", { className: "flex flex-row items-center justify-between px-2 py-1", children: [
         /* @__PURE__ */ jsx3("p", { className: "font-medium", children: "Theme" }),
         /* @__PURE__ */ jsx3(ThemeToggle, {})
       ] })
@@ -304,11 +304,11 @@ function LinksMenu({ items, ...props }) {
   ] });
 }
 function SearchToggle() {
-  const { setOpenSearch } = useSearchContext();
+  const { hotKey, setOpenSearch } = useSearchContext();
   const { text } = useI18n();
-  const onClick = () => {
+  const onClick = useCallback2(() => {
     setOpenSearch(true);
-  };
+  }, [setOpenSearch]);
   return /* @__PURE__ */ jsxs3(Fragment, { children: [
     /* @__PURE__ */ jsx3(
       "button",
@@ -335,7 +335,7 @@ function SearchToggle() {
         children: [
           /* @__PURE__ */ jsx3(SearchIcon, { className: "ms-1 size-4" }),
           text.search,
-          /* @__PURE__ */ jsx3("div", { className: "ms-auto inline-flex gap-0.5 text-xs", children: ["\u2318", "K"].map((k) => /* @__PURE__ */ jsx3("kbd", { className: "rounded-md border bg-background px-1.5", children: k }, k)) })
+          /* @__PURE__ */ jsx3("div", { className: "ms-auto inline-flex gap-0.5 text-xs", children: hotKey.map((k, i) => /* @__PURE__ */ jsx3("kbd", { className: "rounded-md border bg-background px-1.5", children: k.display }, i)) })
         ]
       }
     )
@@ -349,7 +349,7 @@ import * as Base from "fumadocs-core/sidebar";
 import { usePathname as usePathname3 } from "next/navigation";
 import {
   createContext,
-  useCallback as useCallback2,
+  useCallback as useCallback3,
   useContext,
   useEffect as useEffect2,
   useMemo,
@@ -396,14 +396,20 @@ function Sidebar({
   return /* @__PURE__ */ jsx4(SidebarContext.Provider, { value: context, children: /* @__PURE__ */ jsxs4(
     Base.SidebarList,
     {
-      minWidth: 768,
+      blockScrollingWidth: 768,
       className: twMerge(
         "flex w-full flex-col text-[15px] md:sticky md:top-16 md:h-body md:w-[240px] md:text-sm xl:w-[260px]",
-        "max-md:fixed max-md:inset-0 max-md:z-40 max-md:bg-background/80 max-md:pt-16 max-md:backdrop-blur-md max-md:data-[open=false]:hidden",
+        "max-md:fixed max-md:inset-0 max-md:z-40 max-md:pt-16 max-md:data-[open=false]:hidden",
         props.className
       ),
       children: [
-        /* @__PURE__ */ jsx4("div", { id: "sidebar-background", className: "absolute z-[-1] size-full" }),
+        /* @__PURE__ */ jsx4(
+          "div",
+          {
+            id: "sidebar-background",
+            className: "absolute z-[-1] size-full max-md:bg-background/80 max-md:backdrop-blur-md"
+          }
+        ),
         /* @__PURE__ */ jsxs4(ViewportContent, { children: [
           banner,
           items.length > 0 && /* @__PURE__ */ jsx4("div", { className: "flex flex-col md:hidden", children: items.map((item, i) => /* @__PURE__ */ jsx4(LinkItem, { item, on: "menu" }, i)) })
@@ -429,7 +435,7 @@ function ViewportContent({
   children
 }) {
   const { root } = useTreeContext();
-  return /* @__PURE__ */ jsx4(ScrollArea, { className: "flex-1", children: /* @__PURE__ */ jsx4(ScrollViewport, { children: /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-8 pb-10 pt-4 px-4 md:px-3 md:pt-10", children: [
+  return /* @__PURE__ */ jsx4(ScrollArea, { className: "flex-1", children: /* @__PURE__ */ jsx4(ScrollViewport, { children: /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-8 p-4 pb-10 md:px-3 md:pt-10", children: [
     children,
     /* @__PURE__ */ jsx4(NodeList, { items: root.children })
   ] }) }) });
@@ -488,7 +494,7 @@ function FolderNode({
     if (shouldExtend)
       setExtend(true);
   }, [shouldExtend]);
-  const onClick = useCallback2(
+  const onClick = useCallback3(
     (e) => {
       if (e.target !== e.currentTarget || active) {
         setExtend((prev) => !prev);
@@ -548,23 +554,23 @@ function SeparatorNode({
 }
 
 // src/components/dynamic-sidebar.tsx
-import { useCallback as useCallback3, useRef, useState as useState3 } from "react";
+import { useCallback as useCallback4, useRef, useState as useState3 } from "react";
 import { SidebarIcon } from "lucide-react";
 import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function DynamicSidebar(props) {
-  const [open, setOpen] = useSidebarCollapse();
+  const { collapsed, setCollapsed } = useSidebar();
   const [hover, setHover] = useState3(false);
   const timerRef = useRef(0);
-  const onCollapse = () => {
-    setOpen(!open);
-  };
-  const onHover = useCallback3((e) => {
+  const onCollapse = useCallback4(() => {
+    setCollapsed(!collapsed);
+  }, [collapsed, setCollapsed]);
+  const onHover = useCallback4((e) => {
     if (e.pointerType === "touch")
       return;
     window.clearTimeout(timerRef.current);
     setHover(true);
   }, []);
-  const onLeave = useCallback3((e) => {
+  const onLeave = useCallback4((e) => {
     if (e.pointerType === "touch")
       return;
     window.clearTimeout(timerRef.current);
@@ -573,7 +579,7 @@ function DynamicSidebar(props) {
     }, 300);
   }, []);
   return /* @__PURE__ */ jsxs5(Fragment2, { children: [
-    !open ? /* @__PURE__ */ jsx5(
+    collapsed ? /* @__PURE__ */ jsx5(
       "div",
       {
         className: "fixed bottom-0 start-0 top-16 max-md:hidden",
@@ -586,11 +592,11 @@ function DynamicSidebar(props) {
         }
       }
     ) : null,
-    !open ? /* @__PURE__ */ jsx5(
+    collapsed ? /* @__PURE__ */ jsx5(
       "button",
       {
         type: "button",
-        "aria-label": "Trigger Sidebar",
+        "aria-label": "Collapse Sidebar",
         className: twMerge(
           buttonVariants({
             color: "secondary",
@@ -606,27 +612,27 @@ function DynamicSidebar(props) {
       "div",
       {
         id: "dynamic-sidebar",
-        "data-open": open,
+        "data-open": !collapsed,
         "data-hover": hover,
         onPointerEnter: onHover,
         onPointerLeave: onLeave,
-        "aria-hidden": !open && !hover,
+        "aria-hidden": Boolean(collapsed && !hover),
         className: twMerge(
           "z-40 transition-transform max-md:absolute",
-          !open && "md:fixed md:bottom-2 md:start-2 md:top-16 md:overflow-hidden md:rounded-xl md:border md:bg-background md:shadow-md"
+          collapsed && "md:fixed md:bottom-2 md:start-2 md:top-16 md:overflow-hidden md:rounded-xl md:border md:bg-background md:shadow-md"
         ),
         children: /* @__PURE__ */ jsx5(
           Sidebar,
           {
             ...props,
-            className: twMerge(!open && "md:h-full"),
+            className: twMerge(collapsed && "md:h-full"),
             footer: /* @__PURE__ */ jsxs5(Fragment2, { children: [
               props.footer,
               /* @__PURE__ */ jsx5(
                 "button",
                 {
                   type: "button",
-                  "aria-label": "Trigger Sidebar",
+                  "aria-label": "Collapse Sidebar",
                   className: twMerge(
                     buttonVariants({
                       color: "ghost",

package/dist/page.d.ts

@@ -45,5 +45,11 @@ interface TOCProps {
  * Add typography styles
  */
 declare const DocsBody: React$1.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+/**
+ * For separate MDX page
+ */
+declare function withArticle({ children, }: {
+    children: React.ReactNode;
+}): React.ReactElement;
 
-export { DocsBody, DocsPage, type DocsPageProps };
+export { DocsBody, DocsPage, type DocsPageProps, withArticle };

package/dist/page.js

@@ -50,7 +50,13 @@ function Toc(props) {
 }
 var DocsBody = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: twMerge("prose", className), ...props }));
 DocsBody.displayName = "DocsBody";
+function withArticle({
+  children
+}) {
+  return /* @__PURE__ */ jsx("main", { className: "container py-12", children: /* @__PURE__ */ jsx("article", { className: "prose", children }) });
+}
 export {
   DocsBody,
-  DocsPage
+  DocsPage,
+  withArticle
 };

package/dist/provider.d.ts

@@ -1,5 +1,5 @@
-import * as React$1 from 'react';
 import { ReactNode } 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-p5QWhj_3.js';
@@ -7,6 +7,13 @@ export { u as useTreeContext } from './tree-cqNEopxM.js';
 import 'fumadocs-core/search/shared';
 import 'fumadocs-core/server';
 
+interface HotKey {
+    display: React.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
@@ -19,30 +26,37 @@ interface SearchProviderProps {
      */
     links?: SearchLink[];
     /**
-     * The shortcuts to trigger search dialog
+     * Hotkeys for triggering search dialog
+     *
+     * @defaultValue K + Meta/Ctrl
      */
-    hotKey?: string[];
+    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$1.ComponentType<SharedProps>;
+    SearchDialog: React.ComponentType<SharedProps>;
     /**
      * Additional props to the dialog
      */
     options?: Partial<SharedProps>;
-    children?: React$1.ReactNode;
+    children?: React.ReactNode;
 }
 interface SearchContextType {
     enabled: boolean;
+    hotKey: HotKey[];
     setOpenSearch: (value: boolean) => void;
 }
 declare function useSearchContext(): SearchContextType;
 
-type SidebarCollapseContext = [open: boolean, setOpen: (v: boolean) => void];
-declare const SidebarCollapseContext: React$1.Context<SidebarCollapseContext | undefined>;
-declare function useSidebarCollapse(): SidebarCollapseContext;
+interface SidebarCollapseContext {
+    open: boolean;
+    setOpen: (v: boolean) => void;
+    collapsed: boolean;
+    setCollapsed: (v: boolean) => void;
+}
+declare function useSidebar(): SidebarCollapseContext;
 
 interface SearchOptions extends Omit<SearchProviderProps, 'options' | 'children'> {
     options?: Partial<DefaultSearchDialogProps> | SearchProviderProps['options'];
@@ -66,10 +80,22 @@ interface RootProviderProps {
      * Wrap the body in `ThemeProvider` (next-themes)
      *
      * @defaultValue true
+     * @deprecated Use `theme.enable` instead
      */
     enableThemeProvider?: boolean;
+    /**
+     * Customise options of `next-themes`
+     */
+    theme?: Partial<ThemeProviderProps> & {
+        /**
+         * Enable `next-themes`
+         *
+         * @defaultValue true
+         */
+        enabled?: boolean;
+    };
     children: ReactNode;
 }
-declare function RootProvider({ children, dir, enableThemeProvider, search, }: RootProviderProps): React.ReactElement;
+declare function RootProvider({ children, dir, enableThemeProvider, theme: { enabled, ...theme }, search, }: RootProviderProps): React.ReactElement;
 
-export { RootProvider, type RootProviderProps, useSearchContext, useSidebarCollapse };
+export { RootProvider, type RootProviderProps, useSearchContext, useSidebar };

package/dist/provider.js

@@ -1,8 +1,8 @@
 "use client";
 import {
-  SidebarCollapseProvider,
-  useSidebarCollapse
-} from "./chunk-PLXR6QNH.js";
+  SidebarProvider,
+  useSidebar
+} from "./chunk-WPJ4ENAT.js";
 import {
   useTreeContext
 } from "./chunk-C4PI62MH.js";
@@ -10,14 +10,13 @@ import "./chunk-7F2LGCS6.js";
 import {
   SearchProvider,
   useSearchContext
-} from "./chunk-2KA2UOM3.js";
+} from "./chunk-FSPYEOFC.js";
 import {
   useI18n
 } from "./chunk-PW7TBOIJ.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 { DirectionProvider } from "@radix-ui/react-direction";
@@ -30,12 +29,13 @@ function RootProvider({
   children,
   dir,
   enableThemeProvider = true,
+  theme: { enabled = true, ...theme } = {},
   search
 }) {
-  let body = /* @__PURE__ */ jsx(SidebarProvider, { children: /* @__PURE__ */ jsx(SidebarCollapseProvider, { children }) });
+  let body = /* @__PURE__ */ jsx(DirectionProvider, { dir: dir ?? "ltr", children: /* @__PURE__ */ jsx(SidebarProvider, { children }) });
   if (search?.enabled !== false)
     body = /* @__PURE__ */ jsx(SearchProvider, { SearchDialog: DefaultSearchDialog, ...search, children: body });
-  if (enableThemeProvider)
+  if (enabled && enableThemeProvider)
     body = /* @__PURE__ */ jsx(
       ThemeProvider,
       {
@@ -43,17 +43,16 @@ function RootProvider({
         defaultTheme: "system",
         enableSystem: true,
         disableTransitionOnChange: true,
+        ...theme,
         children: body
       }
     );
-  if (dir)
-    body = /* @__PURE__ */ jsx(DirectionProvider, { dir, children: body });
   return body;
 }
 export {
   RootProvider,
   useI18n,
   useSearchContext,
-  useSidebarCollapse,
+  useSidebar,
   useTreeContext
 };

package/dist/tailwind-plugin.cjs

@@ -162,7 +162,7 @@ var neutral = {
       "--muted-foreground": "0 0% 30%"
     },
     "#sidebar-background": {
-      background: "hsl(var(--secondary))",
+      background: "hsl(var(--secondary)/.8)",
       borderRight: "1px solid",
       borderRightColor: "theme(borderColor.border)"
     },

package/dist/tailwind-plugin.js

@@ -128,7 +128,7 @@ var neutral = {
       "--muted-foreground": "0 0% 30%"
     },
     "#sidebar-background": {
-      background: "hsl(var(--secondary))",
+      background: "hsl(var(--secondary)/.8)",
       borderRight: "1px solid",
       borderRightColor: "theme(borderColor.border)"
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fumadocs-ui",
-  "version": "11.2.1",
+  "version": "11.3.0",
   "description": "The framework for building a documentation website in Next.js",
   "keywords": [
     "NextJs",
@@ -92,16 +92,16 @@
     "@tailwindcss/typography": "^0.5.13",
     "class-variance-authority": "^0.7.0",
     "cmdk": "^1.0.0",
-    "lucide-react": "^0.378.0",
+    "lucide-react": "^0.379.0",
     "next-themes": "^0.3.0",
     "react-medium-image-zoom": "^5.2.4",
     "tailwind-merge": "^2.3.0",
-    "fumadocs-core": "11.2.1"
+    "fumadocs-core": "11.3.0"
   },
   "devDependencies": {
     "@algolia/client-search": "^4.23.3",
     "@next/eslint-plugin-next": "^14.2.3",
-    "@types/react": "^18.3.2",
+    "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "algoliasearch": "^4.23.3",
     "next": "^14.2.3",

package/dist/chunk-PLXR6QNH.js

@@ -1,21 +0,0 @@
-// src/contexts/sidebar.tsx
-import { createContext, useContext, useState } from "react";
-import { jsx } from "react/jsx-runtime";
-var SidebarCollapseContext = createContext(void 0);
-function useSidebarCollapse() {
-  const ctx = useContext(SidebarCollapseContext);
-  if (!ctx)
-    throw new Error("Missing root provider");
-  return ctx;
-}
-function SidebarCollapseProvider({
-  children
-}) {
-  const [open, setOpen] = useState(true);
-  return /* @__PURE__ */ jsx(SidebarCollapseContext.Provider, { value: [open, setOpen], children });
-}
-
-export {
-  useSidebarCollapse,
-  SidebarCollapseProvider
-};