fumadocs-ui 12.4.2 → 12.5.0

package/dist/{chunk-BZ53GHJX.js → chunk-INUQLSIT.js}

@@ -1,23 +1,27 @@
-import {
-  useSidebar
-} from "./chunk-3F57TIUQ.js";
 import {
   useSearchContext
 } from "./chunk-ET4TW6M5.js";
+import {
+  useSidebar
+} from "./chunk-YXSAWF3G.js";
 import {
   useI18n
 } from "./chunk-HLGNIWUN.js";
 import {
   buttonVariants
-} from "./chunk-VUIQ7ZYI.js";
+} from "./chunk-YSCK5YFO.js";
 import {
   twMerge
 } from "./chunk-TK3TM3MR.js";
 
 // src/components/dialog/search.tsx
-import { FileTextIcon, HashIcon, TextIcon } from "lucide-react";
+import { FileText, Hash, Text } from "lucide-react";
 import { useRouter } from "next/navigation";
-import { useMemo, useCallback } from "react";
+import {
+  useMemo,
+  useCallback
+} from "react";
+import { cva } from "class-variance-authority";
 
 // src/components/ui/command.tsx
 import { Command as CommandPrimitive } from "cmdk";
@@ -151,32 +155,35 @@ function SearchDialog({
     })),
     [links]
   );
-  return /* @__PURE__ */ jsx2(CommandDialog, { open, onOpenChange, footer, children: /* @__PURE__ */ jsx2(Search2, { defaultItems, ...props }) });
+  return /* @__PURE__ */ jsx2(CommandDialog, { open, onOpenChange, footer, children: /* @__PURE__ */ jsx2(
+    Search2,
+    {
+      ...props,
+      items: props.results === "empty" ? defaultItems : props.results,
+      hideResults: props.results === "empty" && defaultItems.length === 0
+    }
+  ) });
 }
 var icons = {
-  text: /* @__PURE__ */ jsx2(TextIcon, {}),
-  heading: /* @__PURE__ */ jsx2(HashIcon, {}),
-  page: /* @__PURE__ */ jsx2(FileTextIcon, {})
+  text: /* @__PURE__ */ jsx2(Text, {}),
+  heading: /* @__PURE__ */ jsx2(Hash, {}),
+  page: /* @__PURE__ */ jsx2(FileText, {})
 };
 function Search2({
   search,
   onSearchChange,
-  defaultItems = [],
-  results
+  items,
+  hideResults = false
 }) {
   const { text } = useI18n();
   const router = useRouter();
   const { setOpenSearch } = useSearchContext();
   const sidebar = useSidebar();
-  const items = results === "empty" ? defaultItems : results;
-  const hideList = results === "empty" && defaultItems.length === 0;
   const onOpen = (url) => {
     router.push(url);
     setOpenSearch(false);
     if (location.pathname === url.split("#")[0]) {
       sidebar.setOpen(false);
-    } else {
-      sidebar.closeOnRedirect.current = true;
     }
   };
   return /* @__PURE__ */ jsxs2(Fragment, { children: [
@@ -191,7 +198,7 @@ function Search2({
         placeholder: text.search
       }
     ),
-    /* @__PURE__ */ jsxs2(CommandList, { className: twMerge(hideList && "hidden"), children: [
+    /* @__PURE__ */ jsxs2(CommandList, { className: twMerge(hideResults && "hidden"), children: [
       /* @__PURE__ */ jsx2(CommandEmpty, { children: text.searchNoResult }),
       /* @__PURE__ */ jsx2(CommandGroup, { value: "result", children: items.map((item) => /* @__PURE__ */ jsx2(
         CommandItem,
@@ -209,7 +216,48 @@ function Search2({
     ] })
   ] });
 }
+var itemVariants = cva(
+  "rounded-md border px-2 py-0.5 text-xs font-medium text-muted-foreground transition-colors",
+  {
+    variants: {
+      active: {
+        true: "bg-accent text-accent-foreground"
+      }
+    }
+  }
+);
+function TagsList({
+  tag,
+  onTagChange,
+  items,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      ...props,
+      className: twMerge("flex flex-row items-center gap-1", props.className),
+      children: [
+        items.map((item) => /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            className: twMerge(itemVariants({ active: tag === item.value })),
+            onClick: () => {
+              onTagChange(item.value);
+            },
+            tabIndex: -1,
+            children: item.name
+          },
+          item.value
+        )),
+        props.children
+      ]
+    }
+  );
+}
 
 export {
-  SearchDialog
+  SearchDialog,
+  TagsList
 };

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-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/chunk-ZMEQF77D.js

@@ -0,0 +1,89 @@
+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
+      ),
+      "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/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 };

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

@@ -1,11 +1,15 @@
 "use client";
 import {
-  SearchDialog
-} from "../../chunk-BZ53GHJX.js";
-import "../../chunk-3F57TIUQ.js";
+  SearchDialog,
+  TagsList
+} from "../../chunk-INUQLSIT.js";
 import "../../chunk-ET4TW6M5.js";
+import "../../chunk-YXSAWF3G.js";
 import "../../chunk-HLGNIWUN.js";
-import "../../chunk-VUIQ7ZYI.js";
+import {
+  useOnChange
+} from "../../chunk-V7IGWU5C.js";
+import "../../chunk-YSCK5YFO.js";
 import "../../chunk-TK3TM3MR.js";
 import "../../chunk-MLKGABMK.js";
 
@@ -13,20 +17,50 @@ import "../../chunk-MLKGABMK.js";
 import {
   useAlgoliaSearch
 } from "fumadocs-core/search-algolia/client";
-import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function AlgoliaSearchDialog({
   index,
   searchOptions,
+  tags,
+  defaultTag,
+  showAlgolia = false,
   ...props
 }) {
-  const { search, setSearch, query } = useAlgoliaSearch(index, searchOptions);
+  const [tag, setTag] = useState(defaultTag);
+  let filters = searchOptions?.filters;
+  if (tag) {
+    filters = filters ? `tag:${tag} AND (${filters})` : `tag:${tag}`;
+  }
+  const { search, setSearch, query } = useAlgoliaSearch(index, {
+    ...searchOptions,
+    filters
+  });
+  useOnChange(defaultTag, (v) => {
+    setTag(v);
+  });
   return /* @__PURE__ */ jsx(
     SearchDialog,
     {
       search,
       onSearchChange: setSearch,
       results: query.data ?? [],
-      ...props
+      ...props,
+      footer: /* @__PURE__ */ jsxs(Fragment, { children: [
+        tags ? /* @__PURE__ */ jsx(TagsList, { tag, onTagChange: setTag, items: tags, children: showAlgolia ? /* @__PURE__ */ jsx(AlgoliaTitle, {}) : null }) : null,
+        props.footer
+      ] })
+    }
+  );
+}
+function AlgoliaTitle() {
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      href: "https://algolia.com",
+      rel: "noreferrer noopener",
+      className: "ms-auto text-xs text-muted-foreground",
+      children: "Search powered by Algolia"
     }
   );
 }

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

@@ -1,12 +1,16 @@
 import { ReactNode } from 'react';
-import { SharedProps } from './search.js';
+import { SharedProps, TagItem } from './search.js';
 import 'fumadocs-core/search/shared';
 
 interface DefaultSearchDialogProps extends SharedProps {
     /**
      * Search tag
+     *
+     * @deprecated Use Tags API instead
      */
     tag?: string;
+    defaultTag?: string;
+    tags?: TagItem[];
     /**
      * Search API URL
      */
@@ -17,6 +21,6 @@ interface DefaultSearchDialogProps extends SharedProps {
     delayMs?: number;
     footer?: ReactNode;
 }
-declare function DefaultSearchDialog({ tag, api, delayMs, ...props }: DefaultSearchDialogProps): React.ReactElement;
+declare function DefaultSearchDialog({ defaultTag, tags, api, delayMs, ...props }: DefaultSearchDialogProps): React.ReactElement;
 
 export { type DefaultSearchDialogProps, DefaultSearchDialog as default };

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

@@ -1,34 +1,48 @@
 "use client";
 import {
-  SearchDialog
-} from "../../chunk-BZ53GHJX.js";
-import "../../chunk-3F57TIUQ.js";
+  SearchDialog,
+  TagsList
+} from "../../chunk-INUQLSIT.js";
 import "../../chunk-ET4TW6M5.js";
+import "../../chunk-YXSAWF3G.js";
 import {
   useI18n
 } from "../../chunk-HLGNIWUN.js";
-import "../../chunk-VUIQ7ZYI.js";
+import {
+  useOnChange
+} from "../../chunk-V7IGWU5C.js";
+import "../../chunk-YSCK5YFO.js";
 import "../../chunk-TK3TM3MR.js";
 import "../../chunk-MLKGABMK.js";
 
 // src/components/dialog/search-default.tsx
 import { useDocsSearch } from "fumadocs-core/search/client";
-import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function DefaultSearchDialog({
-  tag,
+  defaultTag,
+  tags,
   api,
   delayMs,
   ...props
 }) {
   const { locale } = useI18n();
+  const [tag, setTag] = useState(defaultTag);
   const { search, setSearch, query } = useDocsSearch(locale, tag, api, delayMs);
+  useOnChange(defaultTag, (v) => {
+    setTag(v);
+  });
   return /* @__PURE__ */ jsx(
     SearchDialog,
     {
       search,
       onSearchChange: setSearch,
       results: query.data ?? [],
-      ...props
+      ...props,
+      footer: /* @__PURE__ */ jsxs(Fragment, { children: [
+        tags ? /* @__PURE__ */ jsx(TagsList, { tag, onTagChange: setTag, items: tags }) : null,
+        props.footer
+      ] })
     }
   );
 }