fumadocs-ui 11.3.2 → 12.0.0

package/dist/docs.client.js

@@ -0,0 +1,396 @@
+"use client";
+import {
+  LargeSearchToggle,
+  LinkItem,
+  SearchToggle,
+  ThemeToggle
+} from "./chunk-JQW5DMD2.js";
+import {
+  TreeContextProvider,
+  useTreeContext
+} from "./chunk-34Z7WODD.js";
+import {
+  ScrollArea,
+  ScrollViewport
+} from "./chunk-VYTHQTZE.js";
+import "./chunk-UBVEKNRF.js";
+import {
+  hasActive,
+  isActive
+} from "./chunk-AN2Y6MA2.js";
+import {
+  useSidebar
+} from "./chunk-3F57TIUQ.js";
+import {
+  useSearchContext
+} from "./chunk-FSPYEOFC.js";
+import "./chunk-CRYPD6UZ.js";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger
+} from "./chunk-7XPZOMJ2.js";
+import {
+  buttonVariants
+} from "./chunk-7GZKFBAP.js";
+import {
+  twMerge
+} from "./chunk-TK3TM3MR.js";
+import "./chunk-MLKGABMK.js";
+
+// src/docs.client.tsx
+import Link2 from "next/link";
+import { SidebarTrigger } from "fumadocs-core/sidebar";
+import { Menu, X } from "lucide-react";
+
+// src/components/layout/sidebar.tsx
+import { cva } from "class-variance-authority";
+import { ChevronDown, ExternalLinkIcon } from "lucide-react";
+import * as Base from "fumadocs-core/sidebar";
+import { usePathname } from "next/navigation";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState
+} from "react";
+import Link from "fumadocs-core/link";
+import { jsx, jsxs } from "react/jsx-runtime";
+var itemVariants = cva(
+  "flex w-full flex-row items-center gap-2 rounded-md px-2 py-1.5 text-muted-foreground transition-colors duration-100 [&_svg]:size-4",
+  {
+    variants: {
+      active: {
+        true: "bg-primary/10 font-medium text-primary",
+        false: "hover:bg-accent/50 hover:text-accent-foreground/80 hover:transition-none"
+      }
+    }
+  }
+);
+var defaultComponents = {
+  Folder: FolderNode,
+  Separator: SeparatorNode,
+  Item: PageNode
+};
+var Context = createContext({
+  defaultOpenLevel: 1,
+  components: defaultComponents
+});
+function Sidebar({
+  footer,
+  components,
+  defaultOpenLevel = 1,
+  banner,
+  items,
+  aside,
+  bannerProps,
+  footerProps
+}) {
+  const context = useMemo(
+    () => ({
+      defaultOpenLevel,
+      components: { ...defaultComponents, ...components }
+    }),
+    [components, defaultOpenLevel]
+  );
+  return /* @__PURE__ */ jsx(Context.Provider, { value: context, children: /* @__PURE__ */ jsxs(
+    Base.SidebarList,
+    {
+      id: "nd-sidebar",
+      blockScrollingWidth: 768,
+      ...aside,
+      className: twMerge(
+        "z-30 flex w-full flex-col text-[15px] md:sticky md:top-0 md:h-dvh md:w-[240px] md:border-e md:bg-card md:text-sm xl:w-[260px]",
+        "max-md:fixed max-md:inset-0 max-md:bg-background/80 max-md:pt-16 max-md:backdrop-blur-md max-md:data-[open=false]:hidden",
+        aside?.className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ...bannerProps,
+            className: twMerge(
+              "flex flex-col gap-2 border-b px-4 py-2 md:p-3 md:pt-10",
+              bannerProps?.className
+            ),
+            children: [
+              banner,
+              /* @__PURE__ */ jsx(LargeSearchToggle, { className: "rounded-lg max-md:hidden" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(ViewportContent, { children: items.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: items.map((item, i) => /* @__PURE__ */ jsx(LinkItem, { item, on: "menu" }, i)) }) }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ...footerProps,
+            className: twMerge(
+              "flex flex-row items-center border-t px-4 py-2 md:px-3",
+              footerProps?.className
+            ),
+            children: footer
+          }
+        )
+      ]
+    }
+  ) });
+}
+function ViewportContent({
+  children
+}) {
+  const { root } = useTreeContext();
+  return /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1", children: /* @__PURE__ */ jsx(ScrollViewport, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-8 p-4 pb-10 md:px-3", children: [
+    children,
+    /* @__PURE__ */ jsx(NodeList, { items: root.children })
+  ] }) }) });
+}
+function NodeList({
+  items,
+  level = 0,
+  ...props
+}) {
+  const { components } = useContext(Context);
+  return /* @__PURE__ */ jsx("div", { ...props, children: items.map((item) => {
+    const id = `${item.type}_${item.name}`;
+    switch (item.type) {
+      case "separator":
+        return /* @__PURE__ */ jsx(components.Separator, { item }, id);
+      case "folder":
+        return /* @__PURE__ */ jsx(components.Folder, { item, level: level + 1 }, id);
+      default:
+        return /* @__PURE__ */ jsx(components.Item, { item }, item.url);
+    }
+  }) });
+}
+function PageNode({
+  item: { icon, external = false, url, name }
+}) {
+  const pathname = usePathname();
+  const { closeOnRedirect } = useSidebar();
+  const active = isActive(url, pathname, false);
+  return /* @__PURE__ */ jsxs(
+    Link,
+    {
+      href: url,
+      external,
+      className: twMerge(itemVariants({ active })),
+      onClick: useCallback(() => {
+        closeOnRedirect.current = !active;
+      }, [closeOnRedirect, active]),
+      children: [
+        icon ?? (external ? /* @__PURE__ */ jsx(ExternalLinkIcon, {}) : null),
+        name
+      ]
+    }
+  );
+}
+function FolderNode({
+  item: { name, children, index, icon, defaultOpen = false },
+  level
+}) {
+  const { defaultOpenLevel } = useContext(Context);
+  const { closeOnRedirect } = useSidebar();
+  const pathname = usePathname();
+  const active = index !== void 0 && isActive(index.url, pathname, false);
+  const childActive = useMemo(
+    () => hasActive(children, pathname),
+    [children, pathname]
+  );
+  const shouldExtend = active || childActive || defaultOpenLevel >= level || defaultOpen;
+  const [extend, setExtend] = useState(shouldExtend);
+  useEffect(() => {
+    if (shouldExtend) setExtend(true);
+  }, [shouldExtend]);
+  const onClick = useCallback(
+    (e) => {
+      if (e.target !== e.currentTarget || active) {
+        setExtend((prev) => !prev);
+        e.preventDefault();
+      } else {
+        closeOnRedirect.current = !active;
+      }
+    },
+    [closeOnRedirect, active]
+  );
+  return /* @__PURE__ */ jsxs(Collapsible, { open: extend, onOpenChange: setExtend, children: [
+    index ? /* @__PURE__ */ jsxs(
+      Link,
+      {
+        className: twMerge(itemVariants({ active })),
+        href: index.url,
+        onClick,
+        children: [
+          icon,
+          name,
+          /* @__PURE__ */ jsx(
+            ChevronDown,
+            {
+              className: twMerge(
+                "ms-auto transition-transform",
+                !extend && "-rotate-90"
+              )
+            }
+          )
+        ]
+      }
+    ) : /* @__PURE__ */ jsxs(CollapsibleTrigger, { className: twMerge(itemVariants({ active })), children: [
+      icon,
+      name,
+      /* @__PURE__ */ jsx(
+        ChevronDown,
+        {
+          className: twMerge(
+            "ms-auto transition-transform",
+            !extend && "-rotate-90"
+          )
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx(
+      NodeList,
+      {
+        className: "ms-2 flex flex-col border-s py-2 ps-2",
+        items: children,
+        level
+      }
+    ) })
+  ] });
+}
+function SeparatorNode({
+  item
+}) {
+  return /* @__PURE__ */ jsx("p", { className: "mb-2 mt-8 px-2 font-medium first:mt-0", children: item.name });
+}
+
+// src/components/layout/dynamic-sidebar.tsx
+import { useCallback as useCallback2, useRef, useState as useState2 } from "react";
+import { SidebarIcon } from "lucide-react";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function DynamicSidebar(props) {
+  const { collapsed, setCollapsed } = useSidebar();
+  const [hover, setHover] = useState2(false);
+  const timerRef = useRef(0);
+  const onCollapse = useCallback2(() => {
+    setCollapsed(!collapsed);
+  }, [collapsed, setCollapsed]);
+  const onHover = useCallback2((e) => {
+    if (e.pointerType === "touch") return;
+    window.clearTimeout(timerRef.current);
+    setHover(true);
+  }, []);
+  const onLeave = useCallback2((e) => {
+    if (e.pointerType === "touch") return;
+    window.clearTimeout(timerRef.current);
+    timerRef.current = window.setTimeout(() => {
+      setHover(false);
+    }, 300);
+  }, []);
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    collapsed ? /* @__PURE__ */ jsx2(
+      "div",
+      {
+        className: "fixed inset-y-0 start-0 w-4 max-md:hidden xl:static xl:w-[260px]",
+        onPointerEnter: onHover,
+        onPointerLeave: onLeave
+      }
+    ) : null,
+    collapsed ? /* @__PURE__ */ jsx2(
+      "button",
+      {
+        type: "button",
+        "aria-label": "Collapse Sidebar",
+        className: twMerge(
+          buttonVariants({
+            color: "secondary",
+            size: "icon",
+            className: "fixed start-4 bottom-4 z-10 max-md:hidden"
+          })
+        ),
+        onClick: onCollapse,
+        children: /* @__PURE__ */ jsx2(SidebarIcon, {})
+      }
+    ) : null,
+    /* @__PURE__ */ jsx2(
+      Sidebar,
+      {
+        ...props,
+        aside: {
+          "data-collapse": collapsed,
+          "data-hover": hover,
+          onPointerEnter: onHover,
+          onPointerLeave: onLeave,
+          "aria-hidden": Boolean(collapsed && !hover),
+          className: twMerge(
+            "overflow-hidden md:transition-transform",
+            collapsed && "md:fixed md:inset-y-2 md:start-2 md:h-auto md:rounded-xl md:border md:shadow-md"
+          )
+        },
+        footer: /* @__PURE__ */ jsxs2(Fragment, { children: [
+          props.footer,
+          /* @__PURE__ */ jsx2(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Collapse Sidebar",
+              className: twMerge(
+                buttonVariants({
+                  color: "ghost",
+                  size: "icon",
+                  className: "max-md:hidden"
+                })
+              ),
+              onClick: onCollapse,
+              children: /* @__PURE__ */ jsx2(SidebarIcon, {})
+            }
+          )
+        ] })
+      }
+    )
+  ] });
+}
+
+// src/docs.client.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function SubNav({
+  title,
+  url = "/",
+  children,
+  enableSearch = true
+}) {
+  const { open } = useSidebar();
+  const { enabled } = useSearchContext();
+  return /* @__PURE__ */ jsxs3(
+    "nav",
+    {
+      id: "nd-subnav",
+      className: "sticky top-0 z-40 flex h-16 w-full flex-row items-center border-b bg-background/50 px-4 backdrop-blur-md md:hidden [&_svg]:size-5",
+      children: [
+        /* @__PURE__ */ jsx3(Link2, { href: url, className: "inline-flex items-center gap-3 font-semibold", children: title }),
+        children,
+        enabled && enableSearch ? /* @__PURE__ */ jsx3(SearchToggle, { className: "ml-auto" }) : null,
+        /* @__PURE__ */ jsx3(
+          SidebarTrigger,
+          {
+            className: twMerge(
+              buttonVariants({
+                color: "ghost",
+                size: "icon",
+                className: (!enabled || !enableSearch) && "ml-auto"
+              })
+            ),
+            children: open ? /* @__PURE__ */ jsx3(X, {}) : /* @__PURE__ */ jsx3(Menu, {})
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  DynamicSidebar,
+  Sidebar,
+  SubNav,
+  ThemeToggle,
+  TreeContextProvider
+};

package/dist/{i18n-K879Pt9h.d.ts → i18n-CE8z-AAs.d.ts}

@@ -6,6 +6,7 @@ interface Translations {
     chooseLanguage: string;
     nextPage: string;
     previousPage: string;
+    chooseTheme: string;
 }
 interface NamedTranslation extends Partial<Translations> {
     /**

package/dist/i18n.d.ts

@@ -1,10 +1,7 @@
-import { SelectProps } from '@radix-ui/react-select';
 import { ReactNode } from 'react';
-import { N as NamedTranslation } from './i18n-K879Pt9h.js';
-export { T as Translations } from './i18n-K879Pt9h.js';
+import { N as NamedTranslation } from './i18n-CE8z-AAs.js';
+export { T as Translations } from './i18n-CE8z-AAs.js';
 
-type LanguageSelectProps = Omit<SelectProps, 'value' | 'onValueChange'>;
-declare function LanguageSelect({ ...props }: LanguageSelectProps): React.ReactElement;
 interface I18nProviderProps {
     /**
      * Force a locale
@@ -18,4 +15,4 @@ interface I18nProviderProps {
 }
 declare function I18nProvider({ translations, locale: forceLocale, children, }: I18nProviderProps): React.ReactElement;
 
-export { I18nProvider, LanguageSelect, type LanguageSelectProps };
+export { I18nProvider };

package/dist/i18n.js

@@ -2,110 +2,13 @@
 import {
   I18nContext,
   useI18n
-} from "./chunk-PW7TBOIJ.js";
-import {
-  twMerge
-} from "./chunk-TK3TM3MR.js";
+} from "./chunk-CRYPD6UZ.js";
 import "./chunk-MLKGABMK.js";
 
 // src/i18n.tsx
 import { useCallback } from "react";
 import { useRouter, usePathname } from "next/navigation";
-
-// src/components/ui/select.tsx
-import * as SelectPrimitive from "@radix-ui/react-select";
-import { Check, ChevronDown } from "lucide-react";
-import * as React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-var Select = SelectPrimitive.Root;
-var SelectValue = SelectPrimitive.Value;
-var SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
-  SelectPrimitive.Trigger,
-  {
-    ref,
-    className: twMerge(
-      "flex h-10 w-full items-center justify-between rounded-lg border px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-muted-foreground",
-      className
-    ),
-    ...props,
-    children: [
-      children,
-      /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDown, { className: "size-4 opacity-50" }) })
-    ]
-  }
-));
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectContent = React.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx(
-  SelectPrimitive.Content,
-  {
-    ref,
-    className: twMerge(
-      "relative z-50 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=closed]:animate-popover-out data-[state=open]:animate-popover-in",
-      className
-    ),
-    position,
-    ...props,
-    children: /* @__PURE__ */ jsx(
-      SelectPrimitive.Viewport,
-      {
-        className: twMerge(
-          "p-1",
-          position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
-        ),
-        children
-      }
-    )
-  }
-) }));
-SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  SelectPrimitive.Label,
-  {
-    ref,
-    className: twMerge("py-1.5 pl-8 pr-2 text-sm font-semibold", className),
-    ...props
-  }
-));
-SelectLabel.displayName = SelectPrimitive.Label.displayName;
-var SelectItem = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
-  SelectPrimitive.Item,
-  {
-    ref,
-    className: twMerge(
-      "relative flex w-full select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    ),
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "size-4" }) }) }),
-      /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })
-    ]
-  }
-));
-SelectItem.displayName = SelectPrimitive.Item.displayName;
-var SelectSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  SelectPrimitive.Separator,
-  {
-    ref,
-    className: twMerge("-mx-1 my-1 h-px bg-muted", className),
-    ...props
-  }
-));
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
-
-// src/i18n.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-function LanguageSelect({
-  ...props
-}) {
-  const context = useI18n();
-  if (!context.translations) throw new Error("Missing prop `translations`");
-  const languages = Object.entries(context.translations);
-  return /* @__PURE__ */ jsxs2(Select, { value: context.locale, onValueChange: context.onChange, ...props, children: [
-    /* @__PURE__ */ jsx2(SelectTrigger, { children: /* @__PURE__ */ jsx2(SelectValue, { placeholder: context.text.chooseLanguage }) }),
-    /* @__PURE__ */ jsx2(SelectContent, { children: languages.map(([lang, { name }]) => /* @__PURE__ */ jsx2(SelectItem, { value: lang, children: name }, lang)) })
-  ] });
-}
+import { jsx } from "react/jsx-runtime";
 function I18nProvider({
   translations = {},
   locale: forceLocale,
@@ -124,7 +27,7 @@ function I18nProvider({
     },
     [segments, router]
   );
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx(
     I18nContext.Provider,
     {
       value: {
@@ -141,6 +44,5 @@ function I18nProvider({
   );
 }
 export {
-  I18nProvider,
-  LanguageSelect
+  I18nProvider
 };

package/dist/{layout-WuS8Ab4e.d.ts → layout.client-Duq0TTke.d.ts}

@@ -1,5 +1,5 @@
-import { PageTree } from 'fumadocs-core/server';
 import { ReactNode, HTMLAttributes } from 'react';
+import { PageTree } from 'fumadocs-core/server';
 
 interface NavProps {
     title?: ReactNode;
@@ -8,8 +8,6 @@ interface NavProps {
      * @defaultValue '/'
      */
     url?: string;
-    items: LinkItemType[];
-    enableSidebar: boolean;
     /**
      * Show/hide search toggle
      *
@@ -23,7 +21,9 @@ interface NavProps {
     transparentMode?: 'always' | 'top' | 'none';
     children?: ReactNode;
 }
-declare function Nav({ title, url, items, transparentMode, enableSidebar, enableSearch, children, }: NavProps): React.ReactElement;
+declare function Nav({ title, url, items, transparentMode, enableSearch, children, }: NavProps & {
+    items: LinkItemType[];
+}): React.ReactElement;
 
 interface SidebarProps {
     items: LinkItemType[];
@@ -36,7 +36,9 @@ interface SidebarProps {
     defaultOpenLevel?: number;
     components?: Partial<Components>;
     banner?: React.ReactNode;
+    bannerProps?: HTMLAttributes<HTMLDivElement>;
     footer?: React.ReactNode;
+    footerProps?: HTMLAttributes<HTMLDivElement>;
 }
 interface Components {
     Item: React.FC<{
@@ -50,8 +52,8 @@ interface Components {
         item: PageTree.Separator;
     }>;
 }
-declare function Sidebar({ footer, components, defaultOpenLevel, banner, items, ...props }: SidebarProps & {
-    className?: string;
+declare function Sidebar({ footer, components, defaultOpenLevel, banner, items, aside, bannerProps, footerProps, }: SidebarProps & {
+    aside?: HTMLAttributes<HTMLElement> & Record<string, unknown>;
 }): React.ReactElement;
 
 type ActiveType = 'none' | 'url' | 'nested-url';
@@ -85,13 +87,9 @@ type LinkItemType = {
     text: string;
     external?: boolean;
 };
-interface NavOptions extends Omit<NavProps, 'enableSidebar' | 'collapsibleSidebar' | 'items'> {
+interface NavOptions extends Omit<NavProps, 'items'> {
     enabled: boolean;
     component: ReactNode;
-    /**
-     * GitHub url displayed on the navbar
-     */
-    githubUrl: string;
 }
 interface SidebarOptions extends Omit<SidebarProps, 'items'> {
     enabled: boolean;
@@ -99,19 +97,29 @@ interface SidebarOptions extends Omit<SidebarProps, 'items'> {
     collapsible: boolean;
 }
 interface BaseLayoutProps {
+    /**
+     * GitHub url
+     */
+    githubUrl?: string;
     links?: LinkItemType[];
     /**
      * Replace or disable navbar
      */
     nav?: Partial<NavOptions>;
-    children: ReactNode;
+    children?: ReactNode;
 }
 interface DocsLayoutProps extends BaseLayoutProps {
     tree: PageTree.Root;
     sidebar?: Partial<SidebarOptions>;
     containerProps?: HTMLAttributes<HTMLDivElement>;
+    /**
+     * Enable Language Switch
+     *
+     * @defaultValue false
+     */
+    i18n?: boolean;
 }
-declare function Layout({ nav, links, children, }: BaseLayoutProps): React.ReactElement;
-declare function DocsLayout({ nav, sidebar, links, containerProps, tree, children, }: DocsLayoutProps): React.ReactElement;
+declare function Layout({ nav, links, githubUrl, children, }: BaseLayoutProps): React.ReactElement;
+declare function DocsLayout({ nav, githubUrl, sidebar, links, containerProps, tree, i18n, children, }: DocsLayoutProps): React.ReactElement;
 
-export { type BaseLayoutProps as B, type DocsLayoutProps as D, type LinkItemType as L, Nav as N, type SidebarProps as S, Sidebar as a, Layout as b, DocsLayout as c };
+export { type BaseLayoutProps as B, type DocsLayoutProps as D, type LinkItemType as L, type NavProps as N, type SidebarProps as S, Sidebar as a, Layout as b, DocsLayout as c, Nav as d };

package/dist/layout.client.d.ts

@@ -1,9 +1,3 @@
-export { T as TreeContextProvider } from './tree-CrKzI9Nz.js';
-import { S as SidebarProps } from './layout-WuS8Ab4e.js';
-export { N as Nav, a as Sidebar } from './layout-WuS8Ab4e.js';
-import 'fumadocs-core/server';
+export { d as Nav } from './layout.client-Duq0TTke.js';
 import 'react';
-
-declare function DynamicSidebar(props: SidebarProps): React.ReactElement;
-
-export { DynamicSidebar };
+import 'fumadocs-core/server';