fumadocs-ui 11.3.1 → 12.0.0

package/dist/components/layout/language-toggle.js

@@ -0,0 +1,58 @@
+"use client";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger
+} from "../../chunk-UBVEKNRF.js";
+import {
+  useI18n
+} from "../../chunk-CRYPD6UZ.js";
+import {
+  buttonVariants
+} from "../../chunk-7GZKFBAP.js";
+import {
+  twMerge
+} from "../../chunk-TK3TM3MR.js";
+import "../../chunk-MLKGABMK.js";
+
+// src/components/layout/language-toggle.tsx
+import { useState } from "react";
+import { LanguagesIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function LanguageToggle(props) {
+  const context = useI18n();
+  const [open, setOpen] = useState(false);
+  if (!context.translations) throw new Error("Missing `<I18nProvider />`");
+  const languages = Object.entries(context.translations);
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, ...props, children: [
+    /* @__PURE__ */ jsx(
+      PopoverTrigger,
+      {
+        "aria-label": context.text.chooseLanguage,
+        className: twMerge(buttonVariants({ size: "icon", color: "ghost" })),
+        children: /* @__PURE__ */ jsx(LanguagesIcon, {})
+      }
+    ),
+    /* @__PURE__ */ jsxs(PopoverContent, { className: "flex flex-col p-1", children: [
+      /* @__PURE__ */ jsx("p", { className: "mb-2 p-2 font-medium text-muted-foreground", children: context.text.chooseLanguage }),
+      languages.map(([lang, { name }]) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: twMerge(
+            "rounded-md p-2 text-left text-sm transition-colors duration-100",
+            lang === context.locale ? "bg-primary/10 font-medium text-primary" : "hover:bg-accent hover:text-accent-foreground"
+          ),
+          onClick: () => {
+            context.onChange?.(lang);
+          },
+          children: name
+        },
+        lang
+      ))
+    ] })
+  ] });
+}
+export {
+  LanguageToggle
+};

package/dist/components/layout/root-toggle.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+
+interface Option {
+    /**
+     * Redirect URL of the folder, usually the index page
+     */
+    url: string;
+    icon: ReactNode;
+    title: ReactNode;
+    description: ReactNode;
+}
+declare function RootToggle({ options, }: {
+    options: Option[];
+}): React.ReactElement;
+
+export { RootToggle };

package/dist/components/layout/root-toggle.js

@@ -0,0 +1,60 @@
+"use client";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger
+} from "../../chunk-UBVEKNRF.js";
+import {
+  isActive
+} from "../../chunk-AN2Y6MA2.js";
+import {
+  twMerge
+} from "../../chunk-TK3TM3MR.js";
+import "../../chunk-MLKGABMK.js";
+
+// src/components/layout/root-toggle.tsx
+import { ChevronDown } from "lucide-react";
+import { useState } from "react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function RootToggle({
+  options
+}) {
+  const [open, setOpen] = useState(false);
+  const pathname = usePathname();
+  const selected = options.find((item) => isActive(item.url, pathname, true)) ?? options[0];
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxs(PopoverTrigger, { className: "-mx-2 flex flex-row items-center gap-2 rounded-lg p-2 hover:bg-muted", children: [
+      /* @__PURE__ */ jsx(Item, { ...selected }),
+      /* @__PURE__ */ jsx(ChevronDown, { className: "size-4 text-muted-foreground" })
+    ] }),
+    /* @__PURE__ */ jsx(PopoverContent, { className: "w-[var(--radix-popover-trigger-width)] overflow-hidden p-0", children: options.map((item) => /* @__PURE__ */ jsx(
+      Link,
+      {
+        href: item.url,
+        onClick: () => {
+          setOpen(false);
+        },
+        className: twMerge(
+          "flex w-full flex-row gap-2 p-2",
+          selected === item ? "bg-accent text-accent-foreground" : "hover:bg-accent/50"
+        ),
+        children: /* @__PURE__ */ jsx(Item, { ...item })
+      },
+      item.url
+    )) })
+  ] });
+}
+function Item({ title, icon, description }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    icon,
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 text-left", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: title }),
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: description })
+    ] })
+  ] });
+}
+export {
+  RootToggle
+};

package/dist/components/roll-button.js

@@ -5,7 +5,7 @@ import {
 import {
   twMerge
 } from "../chunk-TK3TM3MR.js";
-import "../chunk-6C3VEZWH.js";
+import "../chunk-MLKGABMK.js";
 
 // src/components/roll-button.tsx
 import { ChevronUp } from "lucide-react";
@@ -18,8 +18,7 @@ function RollButton({
   useEffect(() => {
     const listener = () => {
       const element = document.scrollingElement;
-      if (!element)
-        return;
+      if (!element) return;
       const nearTop = element.scrollTop / (element.scrollHeight - element.clientHeight) < percentage;
       setShow(!nearTop);
     };

package/dist/components/steps.js

@@ -1,4 +1,4 @@
-import "../chunk-6C3VEZWH.js";
+import "../chunk-MLKGABMK.js";
 
 // src/components/steps.tsx
 import { jsx } from "react/jsx-runtime";

package/dist/components/tabs.js

@@ -4,7 +4,7 @@ import {
 } from "../chunk-TK3TM3MR.js";
 import {
   __export
-} from "../chunk-6C3VEZWH.js";
+} from "../chunk-MLKGABMK.js";
 
 // src/components/tabs.tsx
 import { useEffect, useMemo, useState } from "react";
@@ -74,10 +74,8 @@ function update(id, v, persist) {
   listeners.get(id)?.forEach((item) => {
     item(v);
   });
-  if (persist)
-    localStorage.setItem(id, v);
-  else
-    sessionStorage.setItem(id, v);
+  if (persist) localStorage.setItem(id, v);
+  else sessionStorage.setItem(id, v);
 }
 function Tabs2({
   id,
@@ -89,15 +87,12 @@ function Tabs2({
   const values = useMemo(() => items.map((item) => toValue(item)), [items]);
   const [value, setValue] = useState(values[defaultIndex]);
   useEffect(() => {
-    if (!id)
-      return;
+    if (!id) return;
     const onUpdate = (v) => {
-      if (values.includes(v))
-        setValue(v);
+      if (values.includes(v)) setValue(v);
     };
     const previous = persist ? localStorage.getItem(id) : sessionStorage.getItem(id);
-    if (previous)
-      onUpdate(previous);
+    if (previous) onUpdate(previous);
     addChangeListener(id, onUpdate);
     return () => {
       removeChangeListener(id, onUpdate);

package/dist/components/type-table.js

@@ -3,11 +3,11 @@ import {
   Popover,
   PopoverContent,
   PopoverTrigger
-} from "../chunk-WNKY4RA5.js";
+} from "../chunk-UBVEKNRF.js";
 import {
   twMerge
 } from "../chunk-TK3TM3MR.js";
-import "../chunk-6C3VEZWH.js";
+import "../chunk-MLKGABMK.js";
 
 // src/components/type-table.tsx
 import { InfoIcon } from "lucide-react";

package/dist/docs.client.d.ts

@@ -0,0 +1,13 @@
+import { S as SidebarProps, N as NavProps } from './layout.client-Duq0TTke.js';
+export { a as Sidebar } from './layout.client-Duq0TTke.js';
+export { T as TreeContextProvider } from './tree-CrKzI9Nz.js';
+import { ButtonHTMLAttributes } from 'react';
+import 'fumadocs-core/server';
+
+declare function DynamicSidebar(props: SidebarProps): React.ReactElement;
+
+declare function ThemeToggle({ className, ...props }: ButtonHTMLAttributes<HTMLButtonElement>): React.ReactElement;
+
+declare function SubNav({ title, url, children, enableSearch, }: NavProps): React.ReactElement;
+
+export { DynamicSidebar, SubNav, ThemeToggle };

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-p5QWhj_3.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-p5QWhj_3.js';
-export { T as Translations } from './i18n-p5QWhj_3.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 };