fumadocs-ui 12.3.5 → 12.4.0

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

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

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

@@ -9,7 +9,7 @@ import {
 } from "./chunk-HLGNIWUN.js";
 import {
   buttonVariants
-} from "./chunk-CPOVVDVF.js";
+} from "./chunk-VUIQ7ZYI.js";
 import {
   twMerge
 } from "./chunk-TK3TM3MR.js";

package/dist/{chunk-AN2Y6MA2.js → chunk-IIDV3RNQ.js}

@@ -18,10 +18,14 @@ function hasActive(items, url) {
     return false;
   });
 }
+function isSecondary(item) {
+  return "secondary" in item && item.secondary === true || item.type === "secondary" || item.type === "icon";
+}
 
 export {
   defaultImageSizes,
   isActive,
   replaceOrDefault,
-  hasActive
+  hasActive,
+  isSecondary
 };

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

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

package/dist/{chunk-FOIG7ZU7.js → chunk-NZA3MCPM.js}

@@ -5,7 +5,7 @@ import {
 } from "./chunk-GHKJ6EFT.js";
 import {
   isActive
-} from "./chunk-AN2Y6MA2.js";
+} from "./chunk-IIDV3RNQ.js";
 import {
   useSearchContext
 } from "./chunk-ET4TW6M5.js";
@@ -18,8 +18,9 @@ import {
   CollapsibleTrigger
 } from "./chunk-7XPZOMJ2.js";
 import {
-  buttonVariants
-} from "./chunk-CPOVVDVF.js";
+  buttonVariants,
+  itemVariants
+} from "./chunk-VUIQ7ZYI.js";
 import {
   twMerge
 } from "./chunk-TK3TM3MR.js";
@@ -117,14 +118,15 @@ import Link2 from "fumadocs-core/link";
 import { ChevronDown } from "lucide-react";
 import { usePathname } from "next/navigation";
 import { cva } from "class-variance-authority";
-import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { useEffect as useEffect2, useState as useState2 } from "react";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var linkItemVariants = cva(
-  "inline-flex items-center gap-1.5 rounded-lg p-2 text-muted-foreground transition-colors data-[state=open]:bg-accent [&_svg]:size-4",
+  "-m-2 inline-flex items-center gap-1 p-2 text-muted-foreground transition-colors [&_svg]:size-4",
   {
     variants: {
       active: {
-        true: "bg-accent text-accent-foreground",
-        false: "hover:bg-accent hover:transition-none"
+        true: "text-primary",
+        false: "hover:text-accent-foreground"
       }
     },
     defaultVariants: {
@@ -139,51 +141,65 @@ function LinkItem({
   ...props
 }) {
   const pathname = usePathname();
-  if (item.type === "custom") {
-    const itemOn = item.on ?? "all";
-    if (itemOn === "all" || itemOn === on) return item.children;
-    return /* @__PURE__ */ jsx3(Fragment, {});
-  }
+  if (item.on && item.on !== "all" && item.on !== on) return null;
+  if (item.type === "custom") return item.children;
   if (item.type === "menu" && on === "nav") {
-    return /* @__PURE__ */ jsxs2(Popover, { children: [
-      /* @__PURE__ */ jsxs2(
-        PopoverTrigger,
-        {
-          className: twMerge(linkItemVariants({ className })),
-          ...props,
-          children: [
-            item.text,
-            /* @__PURE__ */ jsx3(ChevronDown, { className: "ms-auto size-4" })
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsx3(PopoverContent, { className: "flex flex-col", children: item.items.map((child, i) => /* @__PURE__ */ jsx3(LinkItem, { item: child, on: "menu" }, i)) })
-    ] });
+    return /* @__PURE__ */ jsxs2(
+      LinksMenu,
+      {
+        items: item.items,
+        className: twMerge(linkItemVariants({ className })),
+        ...props,
+        children: [
+          item.icon,
+          item.text,
+          /* @__PURE__ */ jsx3(ChevronDown, { className: "ms-auto !size-3.5" })
+        ]
+      }
+    );
   }
   if (item.type === "menu") {
     return /* @__PURE__ */ jsxs2(Collapsible, { className: "flex flex-col", children: [
       /* @__PURE__ */ jsxs2(
         CollapsibleTrigger,
         {
-          className: twMerge(linkItemVariants({ className }), "group/link"),
+          className: twMerge(itemVariants({ className }), "group/link"),
           ...props,
           children: [
             item.icon,
             item.text,
-            /* @__PURE__ */ jsx3(ChevronDown, { className: "ms-auto size-4 group-data-[state=closed]/link:-rotate-90" })
+            /* @__PURE__ */ jsx3(ChevronDown, { className: "ms-auto transition-transform group-data-[state=closed]/link:-rotate-90" })
           ]
         }
       ),
-      /* @__PURE__ */ jsx3(CollapsibleContent, { children: /* @__PURE__ */ jsx3("div", { className: "flex flex-col py-1 ps-4", children: item.items.map((child, i) => /* @__PURE__ */ jsx3(LinkItem, { item: child, on: "menu" }, i)) }) })
+      /* @__PURE__ */ jsx3(CollapsibleContent, { children: /* @__PURE__ */ jsx3("div", { className: "ms-2 flex flex-col border-s py-2 ps-2", children: item.items.map((child, i) => /* @__PURE__ */ jsx3(LinkItem, { item: child, on: "menu" }, i)) }) })
     ] });
   }
+  if (item.type === "button") {
+    return /* @__PURE__ */ jsxs2(
+      Link2,
+      {
+        href: item.url,
+        external: item.external,
+        className: twMerge(
+          buttonVariants({ color: "secondary" }),
+          "gap-1.5 [&_svg]:size-4",
+          className
+        ),
+        children: [
+          item.icon,
+          item.text
+        ]
+      }
+    );
+  }
   const activeType = item.active ?? "url";
-  const active = activeType !== "none" ? isActive(item.url, pathname, activeType === "nested-url") : false;
-  if (item.type === "secondary" && on === "nav") {
+  const active = activeType !== "none" && isActive(item.url, pathname, activeType === "nested-url");
+  if ((item.type === "secondary" || item.type === "icon") && on === "nav") {
     return /* @__PURE__ */ jsx3(
       Link2,
       {
-        "aria-label": item.text,
+        "aria-label": item.label,
         href: item.url,
         external: item.external,
         className: twMerge(
@@ -204,10 +220,10 @@ function LinkItem({
       href: item.url,
       external: item.external,
       className: twMerge(
-        linkItemVariants({
-          active,
-          className
-        })
+        on === "nav" ? linkItemVariants({
+          active
+        }) : itemVariants({ active }),
+        className
       ),
       ...props,
       children: [
@@ -217,37 +233,20 @@ function LinkItem({
     }
   );
 }
-
-// src/components/layout/links-menu.tsx
-import { useEffect as useEffect2, useState as useState2 } from "react";
-import { usePathname as usePathname2 } from "next/navigation";
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 function LinksMenu({
   items,
   footer,
   ...props
 }) {
   const [open, setOpen] = useState2(false);
-  const pathname = usePathname2();
+  const pathname = usePathname();
   useEffect2(() => {
     setOpen(false);
   }, [pathname]);
-  return /* @__PURE__ */ jsxs3(Popover, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx4(
-      PopoverTrigger,
-      {
-        ...props,
-        className: twMerge(
-          buttonVariants({
-            size: "icon",
-            color: "ghost",
-            className: props.className
-          })
-        )
-      }
-    ),
-    /* @__PURE__ */ jsxs3(PopoverContent, { className: "flex flex-col", children: [
-      items.map((item, i) => /* @__PURE__ */ jsx4(LinkItem, { item, on: "menu" }, i)),
+  return /* @__PURE__ */ jsxs2(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx3(PopoverTrigger, { ...props }),
+    /* @__PURE__ */ jsxs2(PopoverContent, { className: "flex flex-col", children: [
+      items.map((item, i) => /* @__PURE__ */ jsx3(LinkItem, { item, on: "menu" }, i)),
       footer
     ] })
   ] });
@@ -258,7 +257,7 @@ import { cva as cva2 } from "class-variance-authority";
 import { Moon, Sun } from "lucide-react";
 import { useTheme } from "next-themes";
 import { useCallback as useCallback2 } from "react";
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var buttonVariants2 = cva2("size-7 rounded-full p-1.5 text-muted-foreground", {
   variants: {
     dark: {
@@ -275,7 +274,7 @@ function ThemeToggle({
   const onToggle = useCallback2(() => {
     setTheme(resolvedTheme === "dark" ? "light" : "dark");
   }, [setTheme, resolvedTheme]);
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs3(
     "button",
     {
       type: "button",
@@ -287,8 +286,8 @@ function ThemeToggle({
       onClick: onToggle,
       ...props,
       children: [
-        /* @__PURE__ */ jsx5(Sun, { className: twMerge(buttonVariants2({ dark: false })) }),
-        /* @__PURE__ */ jsx5(Moon, { className: twMerge(buttonVariants2({ dark: true })) })
+        /* @__PURE__ */ jsx4(Sun, { className: twMerge(buttonVariants2({ dark: false })) }),
+        /* @__PURE__ */ jsx4(Moon, { className: twMerge(buttonVariants2({ dark: true })) })
       ]
     }
   );

package/dist/{chunk-34Z7WODD.js → chunk-R3M2OC5U.js}

@@ -1,6 +1,6 @@
 import {
   hasActive
-} from "./chunk-AN2Y6MA2.js";
+} from "./chunk-IIDV3RNQ.js";
 
 // src/contexts/tree.tsx
 import { usePathname } from "next/navigation";

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

@@ -15,7 +15,22 @@ var buttonVariants = cva(
     }
   }
 );
+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"
+      }
+    },
+    defaultVariants: {
+      active: false
+    }
+  }
+);
 
 export {
-  buttonVariants
+  buttonVariants,
+  itemVariants
 };

package/dist/components/accordion.js

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

package/dist/components/api.js

@@ -2,13 +2,13 @@
 import {
   Accordion,
   Accordions
-} from "../chunk-3WVIP3N5.js";
+} from "../chunk-6JD7NGHG.js";
 import "../chunk-2KMKNVSN.js";
 import {
   Tab,
   Tabs
 } from "../chunk-NUPTR2L5.js";
-import "../chunk-CPOVVDVF.js";
+import "../chunk-VUIQ7ZYI.js";
 import {
   twMerge
 } from "../chunk-TK3TM3MR.js";

package/dist/components/banner.js

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

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/codeblock.js

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

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

@@ -1,11 +1,11 @@
 "use client";
 import {
   SearchDialog
-} from "../../chunk-U2R7CI27.js";
+} from "../../chunk-BZ53GHJX.js";
 import "../../chunk-3F57TIUQ.js";
 import "../../chunk-ET4TW6M5.js";
 import "../../chunk-HLGNIWUN.js";
-import "../../chunk-CPOVVDVF.js";
+import "../../chunk-VUIQ7ZYI.js";
 import "../../chunk-TK3TM3MR.js";
 import "../../chunk-MLKGABMK.js";
 

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

@@ -1,13 +1,13 @@
 "use client";
 import {
   SearchDialog
-} from "../../chunk-U2R7CI27.js";
+} from "../../chunk-BZ53GHJX.js";
 import "../../chunk-3F57TIUQ.js";
 import "../../chunk-ET4TW6M5.js";
 import {
   useI18n
 } from "../../chunk-HLGNIWUN.js";
-import "../../chunk-CPOVVDVF.js";
+import "../../chunk-VUIQ7ZYI.js";
 import "../../chunk-TK3TM3MR.js";
 import "../../chunk-MLKGABMK.js";
 

package/dist/components/dialog/search.js

@@ -1,10 +1,10 @@
 import {
   SearchDialog
-} from "../../chunk-U2R7CI27.js";
+} from "../../chunk-BZ53GHJX.js";
 import "../../chunk-3F57TIUQ.js";
 import "../../chunk-ET4TW6M5.js";
 import "../../chunk-HLGNIWUN.js";
-import "../../chunk-CPOVVDVF.js";
+import "../../chunk-VUIQ7ZYI.js";
 import "../../chunk-TK3TM3MR.js";
 import "../../chunk-MLKGABMK.js";
 export {

package/dist/components/image-zoom.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   defaultImageSizes
-} from "../chunk-AN2Y6MA2.js";
+} from "../chunk-IIDV3RNQ.js";
 import "../chunk-MLKGABMK.js";
 
 // src/components/image-zoom.tsx

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

@@ -9,7 +9,7 @@ import {
 } from "../../chunk-HLGNIWUN.js";
 import {
   buttonVariants
-} from "../../chunk-CPOVVDVF.js";
+} from "../../chunk-VUIQ7ZYI.js";
 import {
   twMerge
 } from "../../chunk-TK3TM3MR.js";

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

@@ -6,7 +6,7 @@ import {
 } from "../../chunk-GHKJ6EFT.js";
 import {
   isActive
-} from "../../chunk-AN2Y6MA2.js";
+} from "../../chunk-IIDV3RNQ.js";
 import {
   twMerge
 } from "../../chunk-TK3TM3MR.js";

package/dist/components/roll-button.js

@@ -1,11 +1,11 @@
 "use client";
 import {
   useTreeContext
-} from "../chunk-34Z7WODD.js";
-import "../chunk-AN2Y6MA2.js";
+} from "../chunk-R3M2OC5U.js";
+import "../chunk-IIDV3RNQ.js";
 import {
   buttonVariants
-} from "../chunk-CPOVVDVF.js";
+} from "../chunk-VUIQ7ZYI.js";
 import {
   twMerge
 } from "../chunk-TK3TM3MR.js";
@@ -47,7 +47,7 @@ function RollButton({
       className: twMerge(
         buttonVariants({
           color: "secondary",
-          className: "fixed top-[108px] [&_svg]:size-4 gap-1 left-1/2 translate-x-[-50%] z-10 shadow-md rounded-full transition-all md:top-4"
+          className: "fixed top-[72px] [&_svg]:size-4 gap-1 left-1/2 translate-x-[-50%] z-10 shadow-md rounded-full transition-all md:top-12 lg:top-4"
         }),
         !show && "pointer-events-none translate-y-20 opacity-0"
       ),

package/dist/docs.client.d.ts

@@ -1,19 +1,13 @@
-import { L as LinkItemType, S as SidebarProps, a as SharedNavProps } from './layout-k6u62Bk9.js';
-export { b as Sidebar } from './layout-k6u62Bk9.js';
+import { S as SidebarProps, a as SharedNavProps } from './layout-ZAteQVYk.js';
+export { L as LinksMenu, b as Sidebar } from './layout-ZAteQVYk.js';
 export { T as TreeContextProvider } from './tree-CrKzI9Nz.js';
 import { ButtonHTMLAttributes } from 'react';
 import 'fumadocs-core/server';
 
-interface LinksMenuProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    items: LinkItemType[];
-    footer?: React.ReactNode;
-}
-declare function LinksMenu({ items, footer, ...props }: LinksMenuProps): React.ReactElement;
-
 declare function DynamicSidebar(props: SidebarProps): React.ReactElement;
 
 declare function ThemeToggle({ className, ...props }: ButtonHTMLAttributes<HTMLButtonElement>): React.ReactElement;
 
 declare function SubNav({ title, url, transparentMode, children, enableSearch, }: SharedNavProps): React.ReactElement;
 
-export { DynamicSidebar, LinksMenu, SubNav, ThemeToggle };
+export { DynamicSidebar, SubNav, ThemeToggle };

package/dist/docs.client.js

@@ -7,7 +7,7 @@ import {
   SearchToggle,
   ThemeToggle,
   Title
-} from "./chunk-FOIG7ZU7.js";
+} from "./chunk-NZA3MCPM.js";
 import {
   ScrollArea,
   ScrollViewport
@@ -16,11 +16,11 @@ import "./chunk-GHKJ6EFT.js";
 import {
   TreeContextProvider,
   useTreeContext
-} from "./chunk-34Z7WODD.js";
+} from "./chunk-R3M2OC5U.js";
 import {
   hasActive,
   isActive
-} from "./chunk-AN2Y6MA2.js";
+} from "./chunk-IIDV3RNQ.js";
 import {
   useSidebar
 } from "./chunk-3F57TIUQ.js";
@@ -34,8 +34,9 @@ import {
   CollapsibleTrigger
 } from "./chunk-7XPZOMJ2.js";
 import {
-  buttonVariants
-} from "./chunk-CPOVVDVF.js";
+  buttonVariants,
+  itemVariants
+} from "./chunk-VUIQ7ZYI.js";
 import {
   twMerge
 } from "./chunk-TK3TM3MR.js";
@@ -46,7 +47,6 @@ 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";
@@ -60,17 +60,6 @@ import {
 } from "react";
 import Link from "fumadocs-core/link";
 import { Fragment, 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,