fumadocs-ui 12.4.2 → 12.5.1

package/dist/{docs.client.js → chunk-IY5T63PK.js}

@@ -1,50 +1,35 @@
-"use client";
 import {
   LargeSearchToggle,
-  LinkItem,
-  LinksMenu,
-  NavBox,
-  SearchToggle,
-  ThemeToggle,
-  Title
-} from "./chunk-NZA3MCPM.js";
+  LinkItem
+} from "./chunk-4NMHXJDQ.js";
 import {
   ScrollArea,
   ScrollViewport
 } from "./chunk-VYTHQTZE.js";
-import "./chunk-GHKJ6EFT.js";
 import {
-  TreeContextProvider,
   useTreeContext
 } from "./chunk-R3M2OC5U.js";
 import {
   hasActive,
   isActive
 } from "./chunk-IIDV3RNQ.js";
-import {
-  useSidebar
-} from "./chunk-3F57TIUQ.js";
 import {
   useSearchContext
 } from "./chunk-ET4TW6M5.js";
-import "./chunk-HLGNIWUN.js";
+import {
+  useOnChange
+} from "./chunk-V7IGWU5C.js";
 import {
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger
 } from "./chunk-7XPZOMJ2.js";
 import {
-  buttonVariants,
   itemVariants
-} from "./chunk-VUIQ7ZYI.js";
+} from "./chunk-YSCK5YFO.js";
 import {
   twMerge
 } from "./chunk-TK3TM3MR.js";
-import "./chunk-MLKGABMK.js";
-
-// src/docs.client.tsx
-import { SidebarTrigger } from "fumadocs-core/sidebar";
-import { Menu, X } from "lucide-react";
 
 // src/components/layout/sidebar.tsx
 import { ChevronDown, ExternalLinkIcon } from "lucide-react";
@@ -54,7 +39,6 @@ import {
   createContext,
   useCallback,
   useContext,
-  useEffect,
   useMemo,
   useState
 } from "react";
@@ -168,7 +152,6 @@ function PageNode({
   item: { icon, external = false, url, name }
 }) {
   const pathname = usePathname();
-  const { closeOnRedirect } = useSidebar();
   const active = isActive(url, pathname, false);
   return /* @__PURE__ */ jsxs(
     Link,
@@ -176,9 +159,6 @@ function PageNode({
       href: url,
       external,
       className: twMerge(itemVariants({ active })),
-      onClick: useCallback(() => {
-        closeOnRedirect.current = !active;
-      }, [closeOnRedirect, active]),
       children: [
         icon ?? (external ? /* @__PURE__ */ jsx(ExternalLinkIcon, {}) : null),
         name
@@ -191,7 +171,6 @@ function FolderNode({
   level
 }) {
   const { defaultOpenLevel } = useContext(Context);
-  const { closeOnRedirect } = useSidebar();
   const pathname = usePathname();
   const active = index !== void 0 && isActive(index.url, pathname, false);
   const childActive = useMemo(
@@ -199,20 +178,21 @@ function FolderNode({
     [children, pathname]
   );
   const shouldExtend = active || childActive || defaultOpenLevel >= level || defaultOpen;
-  const [extend, setExtend] = useState(shouldExtend);
-  useEffect(() => {
-    if (shouldExtend) setExtend(true);
-  }, [shouldExtend]);
+  const [open, setOpen] = useState(shouldExtend);
+  useOnChange(shouldExtend, (v) => {
+    if (v) setOpen(v);
+  });
   const onClick = useCallback(
     (e) => {
-      if (e.target !== e.currentTarget || active) {
-        setExtend((prev) => !prev);
+      if (
+        // clicking on icon
+        e.target.hasAttribute("data-icon") || active
+      ) {
+        setOpen((prev) => !prev);
         e.preventDefault();
-      } else {
-        closeOnRedirect.current = !active;
       }
     },
-    [closeOnRedirect, active]
+    [active]
   );
   const content = /* @__PURE__ */ jsxs(Fragment, { children: [
     icon,
@@ -220,11 +200,12 @@ function FolderNode({
     /* @__PURE__ */ jsx(
       ChevronDown,
       {
-        className: twMerge("ms-auto transition-transform", !extend && "-rotate-90")
+        "data-icon": true,
+        className: twMerge("ms-auto transition-transform", !open && "-rotate-90")
       }
     )
   ] });
-  return /* @__PURE__ */ jsxs(Collapsible, { open: extend, onOpenChange: setExtend, children: [
+  return /* @__PURE__ */ jsxs(Collapsible, { open, onOpenChange: setOpen, children: [
     index ? /* @__PURE__ */ jsx(
       Link,
       {
@@ -250,146 +231,6 @@ function SeparatorNode({
   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 as Fragment2, 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 closeTimeRef = useRef(0);
-  const onCollapse = useCallback2(() => {
-    setCollapsed((v) => !v);
-    setHover(false);
-    closeTimeRef.current = Date.now() + 150;
-  }, [setCollapsed]);
-  const onEnter = useCallback2((e) => {
-    if (e.pointerType === "touch" || closeTimeRef.current > Date.now()) 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);
-        closeTimeRef.current = Date.now() + 150;
-      },
-      Math.min(e.clientX, document.body.clientWidth - e.clientX) > 100 ? 0 : 500
-    );
-  }, []);
-  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
-    collapsed ? /* @__PURE__ */ jsx2(
-      "div",
-      {
-        className: "fixed inset-y-0 start-0 w-6 max-md:hidden xl:w-[50px]",
-        onPointerEnter: onEnter,
-        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-2 z-10 max-md:hidden"
-          })
-        ),
-        onClick: onCollapse,
-        children: /* @__PURE__ */ jsx2(SidebarIcon, {})
-      }
-    ) : null,
-    /* @__PURE__ */ jsx2(
-      Sidebar,
-      {
-        ...props,
-        aside: {
-          "data-collapse": collapsed,
-          "data-hover": hover,
-          onPointerEnter: onEnter,
-          onPointerLeave: onLeave,
-          "aria-hidden": Boolean(collapsed && !hover),
-          className: twMerge(
-            "md:transition-[transform,margin]",
-            collapsed && [
-              "md:top-1 md:mr-[-240px] md:h-[calc(100dvh-4px)] md:animate-sidebar-collapse md:rounded-xl md:border md:shadow-md xl:mr-[-260px]",
-              hover ? "md:translate-x-1 rtl:md:-translate-x-1" : "md:-translate-x-full rtl:md:translate-x-full"
-            ]
-          )
-        },
-        footer: /* @__PURE__ */ jsxs2(Fragment2, { 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,
-  transparentMode,
-  children,
-  enableSearch = true
-}) {
-  const { open } = useSidebar();
-  const { enabled } = useSearchContext();
-  return /* @__PURE__ */ jsxs3(
-    NavBox,
-    {
-      id: "nd-subnav",
-      className: "flex h-14 flex-row items-center px-4 md:hidden",
-      transparentMode,
-      children: [
-        /* @__PURE__ */ jsx3(Title, { url, title }),
-        /* @__PURE__ */ jsx3("div", { className: "flex flex-1 flex-row items-center", children }),
-        enabled && enableSearch ? /* @__PURE__ */ jsx3(SearchToggle, {}) : null,
-        /* @__PURE__ */ jsx3(
-          SidebarTrigger,
-          {
-            className: twMerge(
-              buttonVariants({
-                color: "ghost",
-                size: "icon",
-                className: "-me-2"
-              })
-            ),
-            children: open ? /* @__PURE__ */ jsx3(X, {}) : /* @__PURE__ */ jsx3(Menu, {})
-          }
-        )
-      ]
-    }
-  );
-}
 export {
-  DynamicSidebar,
-  LinksMenu,
-  Sidebar,
-  SubNav,
-  ThemeToggle,
-  TreeContextProvider
+  Sidebar
 };

package/dist/{chunk-KH555T4I.js → chunk-QQAMPLSA.js}

@@ -8,7 +8,7 @@ import {
 } from "./chunk-2KMKNVSN.js";
 import {
   buttonVariants
-} from "./chunk-VUIQ7ZYI.js";
+} from "./chunk-YSCK5YFO.js";
 import {
   twMerge
 } from "./chunk-TK3TM3MR.js";

package/dist/{chunk-NUPTR2L5.js → chunk-QZBW7643.js}

@@ -6,12 +6,7 @@ import {
 } from "./chunk-MLKGABMK.js";
 
 // src/components/tabs.tsx
-import {
-  useEffect,
-  useMemo,
-  useState,
-  useCallback
-} from "react";
+import { useMemo, useState, useCallback, useLayoutEffect } from "react";
 
 // src/components/ui/tabs.tsx
 var tabs_exports = {};
@@ -99,11 +94,11 @@ function Tabs2({
   items = [],
   persist = false,
   defaultIndex = 0,
-  children
+  ...props
 }) {
   const values = useMemo(() => items.map((item) => toValue(item)), [items]);
   const [value, setValue] = useState(values[defaultIndex]);
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!id) return;
     const onUpdate = (v) => {
       if (values.includes(v)) setValue(v);
@@ -130,10 +125,11 @@ function Tabs2({
     {
       value,
       onValueChange,
-      className: "my-4",
+      ...props,
+      className: twMerge("my-4", props.className),
       children: [
         /* @__PURE__ */ jsx2(TabsList, { children: values.map((v, i) => /* @__PURE__ */ jsx2(TabsTrigger, { value: v, children: items[i] }, v)) }),
-        children
+        props.children
       ]
     }
   );

package/dist/chunk-UDMQQ2YW.js

@@ -0,0 +1,90 @@
+import {
+  twMerge
+} from "./chunk-TK3TM3MR.js";
+
+// src/components/layout/nav.tsx
+import Link from "fumadocs-core/link";
+import {
+  useEffect,
+  useState
+} from "react";
+import { jsx } from "react/jsx-runtime";
+function NavBox({
+  transparentMode = "none",
+  ...props
+}) {
+  const [transparent, setTransparent] = useState(transparentMode !== "none");
+  useEffect(() => {
+    if (transparentMode !== "top") return;
+    const listener = () => {
+      setTransparent(window.scrollY < 10);
+    };
+    listener();
+    window.addEventListener("scroll", listener);
+    return () => {
+      window.removeEventListener("scroll", listener);
+    };
+  }, [transparentMode]);
+  return /* @__PURE__ */ jsx(
+    "header",
+    {
+      ...props,
+      className: twMerge(
+        "sticky top-0 z-50 border-b transition-colors",
+        transparent ? "border-transparent" : "border-foreground/10 bg-background/60 backdrop-blur-md",
+        props.className
+      )
+    }
+  );
+}
+function Title({ title, url = "/" }) {
+  return /* @__PURE__ */ jsx(Link, { href: url, className: "inline-flex items-center gap-2.5 font-semibold", children: title });
+}
+
+// src/components/layout/theme-toggle.tsx
+import { cva } from "class-variance-authority";
+import { Moon, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
+import { useCallback } from "react";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var buttonVariants = cva("size-7 rounded-full p-1.5 text-muted-foreground", {
+  variants: {
+    dark: {
+      true: "dark:bg-accent dark:text-accent-foreground",
+      false: "bg-accent text-accent-foreground dark:bg-transparent dark:text-muted-foreground"
+    }
+  }
+});
+function ThemeToggle({
+  className,
+  ...props
+}) {
+  const { setTheme, resolvedTheme } = useTheme();
+  const onToggle = useCallback(() => {
+    setTheme(resolvedTheme === "dark" ? "light" : "dark");
+  }, [setTheme, resolvedTheme]);
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: twMerge(
+        "inline-flex items-center rounded-full border p-0.5",
+        className
+      ),
+      "data-theme-toggle": "",
+      "aria-label": "Toggle Theme",
+      onClick: onToggle,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx2(Sun, { className: twMerge(buttonVariants({ dark: false })) }),
+        /* @__PURE__ */ jsx2(Moon, { className: twMerge(buttonVariants({ dark: true })) })
+      ]
+    }
+  );
+}
+
+export {
+  NavBox,
+  Title,
+  ThemeToggle
+};

package/dist/chunk-V7IGWU5C.js

@@ -0,0 +1,13 @@
+// src/utils/use-on-change.ts
+import { useState } from "react";
+function useOnChange(value, onChange) {
+  const [prev, setPrev] = useState(value);
+  if (prev !== value) {
+    onChange(value, prev);
+    setPrev(value);
+  }
+}
+
+export {
+  useOnChange
+};

package/dist/{chunk-6JD7NGHG.js → chunk-YKLVLKDA.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-2KMKNVSN.js";
 import {
   buttonVariants
-} from "./chunk-VUIQ7ZYI.js";
+} from "./chunk-YSCK5YFO.js";
 import {
   twMerge
 } from "./chunk-TK3TM3MR.js";
@@ -24,10 +24,8 @@ var Accordions = forwardRef(({ type = "single", className, defaultValue, ...prop
   useEffect(() => {
     const id = window.location.hash.substring(1);
     if (id.length > 0)
-      setValue((prev) => {
-        return type === "single" ? id : [id, ...Array.isArray(prev) ? prev : []];
-      });
-  }, [type]);
+      setValue((prev) => typeof prev === "string" ? id : [id, ...prev]);
+  }, []);
   return (
     // @ts-expect-error -- Multiple types
     /* @__PURE__ */ jsx(
@@ -37,7 +35,7 @@ var Accordions = forwardRef(({ type = "single", className, defaultValue, ...prop
         ref,
         value,
         onValueChange: setValue,
-        collapsible: true,
+        collapsible: type === "single" ? true : void 0,
         className: twMerge(
           "divide-y divide-border overflow-hidden rounded-lg border bg-card",
           className

package/dist/{chunk-VUIQ7ZYI.js → chunk-YSCK5YFO.js}

@@ -10,6 +10,7 @@ var buttonVariants = cva(
         secondary: "border bg-secondary text-secondary-foreground hover:bg-accent hover:text-accent-foreground"
       },
       size: {
+        sm: "gap-1 p-0.5 text-xs",
         icon: "p-1.5 [&_svg]:size-5"
       }
     }

package/dist/{chunk-3F57TIUQ.js → chunk-YXSAWF3G.js}

@@ -1,11 +1,14 @@
+import {
+  useOnChange
+} from "./chunk-V7IGWU5C.js";
+
 // src/contexts/sidebar.tsx
 import {
   createContext,
   useContext,
   useState,
   useMemo,
-  useRef,
-  useEffect
+  useRef
 } from "react";
 import { usePathname } from "next/navigation";
 import { SidebarProvider as BaseProvider } from "fumadocs-core/sidebar";
@@ -19,16 +22,16 @@ function useSidebar() {
 function SidebarProvider({
   children
 }) {
-  const closeOnRedirect = useRef(false);
+  const closeOnRedirect = useRef(true);
   const [open, setOpen] = useState(false);
   const [collapsed, setCollapsed] = useState(false);
   const pathname = usePathname();
-  useEffect(() => {
+  useOnChange(pathname, () => {
     if (closeOnRedirect.current) {
       setOpen(false);
-      closeOnRedirect.current = false;
     }
-  }, [pathname]);
+    closeOnRedirect.current = true;
+  });
   return /* @__PURE__ */ jsx(
     SidebarContext.Provider,
     {

package/dist/components/accordion.js

@@ -2,9 +2,9 @@
 import {
   Accordion,
   Accordions
-} from "../chunk-6JD7NGHG.js";
+} from "../chunk-YKLVLKDA.js";
 import "../chunk-2KMKNVSN.js";
-import "../chunk-VUIQ7ZYI.js";
+import "../chunk-YSCK5YFO.js";
 import "../chunk-TK3TM3MR.js";
 import "../chunk-MLKGABMK.js";
 export {

package/dist/components/api.d.ts

@@ -1,7 +1,21 @@
-import { HTMLAttributes, ReactNode } from 'react';
+import { MouseEventHandler, HTMLAttributes, ReactNode } from 'react';
+export { twMerge as cn } from 'tailwind-merge';
+import * as class_variance_authority_types from 'class-variance-authority/types';
 import { Tabs, Tab } from './tabs.js';
 import '@radix-ui/react-tabs';
 
+declare function useOnChange<T>(value: T, onChange: (current: T, previous: T) => void): void;
+
+declare function useCopyButton(onCopy: () => void): [checked: boolean, onClick: MouseEventHandler];
+
+declare const buttonVariants: (props?: ({
+    color?: "outline" | "ghost" | "secondary" | null | undefined;
+    size?: "sm" | "icon" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const itemVariants: (props?: ({
+    active?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+
 declare function Root({ children, className, ...props }: HTMLAttributes<HTMLDivElement>): React.ReactElement;
 declare function API({ className, children, ...props }: HTMLAttributes<HTMLDivElement>): React.ReactElement;
 interface APIInfoProps extends HTMLAttributes<HTMLDivElement> {
@@ -36,4 +50,4 @@ declare function ObjectCollapsible(props: {
     children: ReactNode;
 }): React.ReactElement;
 
-export { API, APIExample, APIInfo, type APIInfoProps, ExampleResponse, ObjectCollapsible, Property, Request, Requests, Response, ResponseTypes, Responses, Root, TypeScriptResponse };
+export { API, APIExample, APIInfo, type APIInfoProps, ExampleResponse, ObjectCollapsible, Property, Request, Requests, Response, ResponseTypes, Responses, Root, TypeScriptResponse, buttonVariants, itemVariants, useCopyButton, useOnChange };

package/dist/components/api.js

@@ -2,19 +2,27 @@
 import {
   Accordion,
   Accordions
-} from "../chunk-6JD7NGHG.js";
-import "../chunk-2KMKNVSN.js";
+} from "../chunk-YKLVLKDA.js";
+import {
+  useCopyButton
+} from "../chunk-2KMKNVSN.js";
+import {
+  useOnChange
+} from "../chunk-V7IGWU5C.js";
 import {
   Tab,
   Tabs
-} from "../chunk-NUPTR2L5.js";
-import "../chunk-VUIQ7ZYI.js";
+} from "../chunk-QZBW7643.js";
+import {
+  buttonVariants,
+  itemVariants
+} from "../chunk-YSCK5YFO.js";
 import {
   twMerge
 } from "../chunk-TK3TM3MR.js";
 import "../chunk-MLKGABMK.js";
 
-// src/components/api.tsx
+// src/components/api-legacy.tsx
 import { cva } from "class-variance-authority";
 import { jsx, jsxs } from "react/jsx-runtime";
 function Root({
@@ -154,5 +162,10 @@ export {
   ResponseTypes,
   Responses,
   Root,
-  TypeScriptResponse
+  TypeScriptResponse,
+  buttonVariants,
+  twMerge as cn,
+  itemVariants,
+  useCopyButton,
+  useOnChange
 };

package/dist/components/banner.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   buttonVariants
-} from "../chunk-VUIQ7ZYI.js";
+} from "../chunk-YSCK5YFO.js";
 import {
   twMerge
 } from "../chunk-TK3TM3MR.js";

package/dist/components/codeblock.js

@@ -2,10 +2,10 @@
 import {
   CodeBlock,
   Pre
-} from "../chunk-KH555T4I.js";
+} from "../chunk-QQAMPLSA.js";
 import "../chunk-VYTHQTZE.js";
 import "../chunk-2KMKNVSN.js";
-import "../chunk-VUIQ7ZYI.js";
+import "../chunk-YSCK5YFO.js";
 import "../chunk-TK3TM3MR.js";
 import "../chunk-MLKGABMK.js";
 export {

package/dist/components/dialog/search-algolia.d.ts

@@ -1,14 +1,22 @@
 import { SearchIndex } from 'algoliasearch/lite';
 import { Options } from 'fumadocs-core/search-algolia/client';
 import { ReactNode } from 'react';
-import { SharedProps } from './search.js';
+import { SharedProps, TagItem } from './search.js';
 import 'fumadocs-core/search/shared';
 
 interface AlgoliaSearchDialogProps extends SharedProps {
     index: SearchIndex;
     searchOptions?: Options;
     footer?: ReactNode;
+    defaultTag?: string;
+    tags?: TagItem[];
+    /**
+     * Add the "Powered by Algolia" label, this is useful for free tier users
+     *
+     * @defaultValue false
+     */
+    showAlgolia?: boolean;
 }
-declare function AlgoliaSearchDialog({ index, searchOptions, ...props }: AlgoliaSearchDialogProps): React.ReactElement;
+declare function AlgoliaSearchDialog({ index, searchOptions, tags, defaultTag, showAlgolia, ...props }: AlgoliaSearchDialogProps): React.ReactElement;
 
 export { type AlgoliaSearchDialogProps, AlgoliaSearchDialog as default };