fumadocs-ui 15.7.8 → 15.7.10

package/css/neutral.css

@@ -7,7 +7,7 @@
   --color-fd-popover-foreground: hsl(0, 0%, 15.1%);
   --color-fd-card: hsl(0, 0%, 94.7%);
   --color-fd-card-foreground: hsl(0, 0%, 3.9%);
-  --color-fd-border: hsla(0, 0%, 62%, 20%);
+  --color-fd-border: hsla(0, 0%, 80%, 50%);
   --color-fd-primary: hsl(0, 0%, 9%);
   --color-fd-primary-foreground: hsl(0, 0%, 98%);
   --color-fd-secondary: hsl(0, 0%, 93.1%);

package/dist/components/codeblock.js

@@ -15,7 +15,7 @@ export function CodeBlock({ ref, title, allowCopy, keepBackground = false, icon,
     const inTab = useContext(TabsContext) !== null;
     const areaRef = useRef(null);
     allowCopy ?? (allowCopy = !inTab);
-    return (_jsxs("figure", { ref: ref, dir: "ltr", ...props, className: cn(inTab ? 'bg-fd-secondary' : 'my-4 bg-fd-card', keepBackground && 'bg-(--shiki-light-bg) dark:bg-(--shiki-dark-bg)', 'shiki relative border shadow-md rounded-xl outline-none not-prose overflow-hidden text-sm', props.className), children: [title ? (_jsxs("div", { className: "flex text-fd-muted-foreground items-center gap-2 h-9.5 border-b px-4", children: [typeof icon === 'string' ? (_jsx("div", { className: "[&_svg]:size-3.5", dangerouslySetInnerHTML: {
+    return (_jsxs("figure", { ref: ref, dir: "ltr", ...props, className: cn(inTab ? 'bg-fd-secondary' : 'my-4 bg-fd-card', keepBackground && 'bg-(--shiki-light-bg) dark:bg-(--shiki-dark-bg)', 'shiki relative border shadow-sm rounded-xl outline-none not-prose overflow-hidden text-sm', props.className), children: [title ? (_jsxs("div", { className: "flex text-fd-muted-foreground items-center gap-2 h-9.5 border-b px-4", children: [typeof icon === 'string' ? (_jsx("div", { className: "[&_svg]:size-3.5", dangerouslySetInnerHTML: {
                             __html: icon,
                         } })) : (icon), _jsx("figcaption", { className: "flex-1 truncate", children: title }), Actions({
                         className: '-me-2',
@@ -51,7 +51,7 @@ function CopyButton({ className, containerRef, ...props }) {
 export function CodeBlockTabs({ ref, ...props }) {
     const containerRef = useRef(null);
     const nested = useContext(TabsContext) !== null;
-    return (_jsx(Tabs, { ref: mergeRefs(containerRef, ref), ...props, className: cn('bg-fd-card rounded-xl border', nested ? 'shadow-sm' : 'my-4', props.className), children: _jsx(TabsContext.Provider, { value: useMemo(() => ({
+    return (_jsx(Tabs, { ref: mergeRefs(containerRef, ref), ...props, className: cn('bg-fd-card rounded-xl border', !nested && 'my-4', props.className), children: _jsx(TabsContext.Provider, { value: useMemo(() => ({
                 containerRef,
                 nested,
             }), [nested]), children: props.children }) }));

package/dist/components/layout/sidebar.js

@@ -14,7 +14,7 @@ import { cva } from 'class-variance-authority';
 import { useTreeContext, useTreePath } from '../../contexts/tree.js';
 import { useMediaQuery } from 'fumadocs-core/utils/use-media-query';
 import { Presence } from '@radix-ui/react-presence';
-const itemVariants = cva('relative flex flex-row items-center gap-2 rounded-xl p-2 ps-(--sidebar-item-offset) text-start text-fd-muted-foreground [overflow-wrap:anywhere] [&_svg]:size-4 [&_svg]:shrink-0', {
+const itemVariants = cva('relative flex flex-row items-center gap-2 rounded-lg p-2 ps-(--sidebar-item-offset) text-start text-fd-muted-foreground [overflow-wrap:anywhere] [&_svg]:size-4 [&_svg]:shrink-0', {
     variants: {
         active: {
             true: 'bg-fd-primary/10 text-fd-primary',
@@ -44,7 +44,7 @@ export function SidebarContent(props) {
         setHover(false);
         closeTimeRef.current = Date.now() + 150;
     });
-    return (_jsx("aside", { id: "nd-sidebar", ...props, "data-collapsed": collapsed, className: cn('fixed left-0 rtl:left-auto rtl:right-(--removed-body-scroll-bar-size,0) flex flex-col items-end top-(--fd-sidebar-top) bottom-(--fd-sidebar-margin) z-20 bg-fd-card text-sm border-e transition-[top,opacity,translate,width] max-md:hidden *:w-(--fd-sidebar-width)', collapsed && [
+    return (_jsx("aside", { id: "nd-sidebar", ...props, "data-collapsed": collapsed, className: cn('fixed left-0 rtl:left-auto rtl:right-(--removed-body-scroll-bar-size,0) flex flex-col items-end top-(--fd-sidebar-top) bottom-(--fd-sidebar-margin) z-20 bg-fd-card text-sm border-e transition-[top,opacity,translate,width] duration-200 max-md:hidden *:w-(--fd-sidebar-width)', collapsed && [
             'rounded-xl border translate-x-(--fd-sidebar-offset) rtl:-translate-x-(--fd-sidebar-offset)',
             hover ? 'z-50 shadow-lg' : 'opacity-0',
         ], props.className), style: {

package/dist/components/type-table.d.ts

@@ -1,24 +1,32 @@
-import type { ReactNode } from 'react';
-export declare function Info({ children }: {
-    children: ReactNode;
-}): ReactNode;
-interface ObjectType {
+import { type ReactNode } from 'react';
+export interface ParameterNode {
+    name: string;
+    description: ReactNode;
+}
+export interface TypeNode {
     /**
      * Additional description of the field
      */
     description?: ReactNode;
-    type: string;
+    /**
+     * type signature (short)
+     */
+    type: ReactNode;
+    /**
+     * type signature (full)
+     */
     typeDescription?: ReactNode;
     /**
-     * Optional link to the type
+     * Optional `href` for the type
      */
     typeDescriptionLink?: string;
-    default?: string;
+    default?: ReactNode;
     required?: boolean;
     deprecated?: boolean;
+    parameters?: ParameterNode[];
+    returns?: ReactNode;
 }
 export declare function TypeTable({ type }: {
-    type: Record<string, ObjectType>;
+    type: Record<string, TypeNode>;
 }): import("react/jsx-runtime").JSX.Element;
-export {};
 //# sourceMappingURL=type-table.d.ts.map

package/dist/components/type-table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"type-table.d.ts","sourceRoot":"","sources":["../../src/components/type-table.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,wBAAgB,IAAI,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,GAAG,SAAS,CAWrE;AAED,UAAU,UAAU;IAClB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAeD,wBAAgB,SAAS,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,CAAA;CAAE,2CAuDvE"}
+{"version":3,"file":"type-table.d.ts","sourceRoot":"","sources":["../../src/components/type-table.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAOjD,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,SAAS,CAAC;CACxB;AAED,MAAM,WAAW,QAAQ;IACvB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB;;OAEG;IACH,IAAI,EAAE,SAAS,CAAC;IAEhB;;OAEG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC;IAE5B;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAE7B,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,UAAU,CAAC,EAAE,aAAa,EAAE,CAAC;IAE7B,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAYD,wBAAgB,SAAS,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAA;CAAE,2CAYrE"}

package/dist/components/type-table.js

@@ -1,24 +1,27 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Info as InfoIcon, Link as LinkIcon } from '../icons.js';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ChevronDown } from '../icons.js';
 import Link from 'fumadocs-core/link';
 import { cva } from 'class-variance-authority';
 import { cn } from '../utils/cn.js';
-import { Popover, PopoverContent, PopoverTrigger, } from '../components/ui/popover.js';
-export function Info({ children }) {
-    return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { children: _jsx(InfoIcon, { className: "size-4" }) }), _jsx(PopoverContent, { className: "prose max-h-[400px] min-w-[220px] max-w-[400px] overflow-auto text-sm prose-no-margin", children: children })] }));
-}
-const field = cva('inline-flex flex-row items-center gap-1');
-const code = cva('rounded-md bg-fd-secondary p-1 text-fd-secondary-foreground', {
+import { useState } from 'react';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from '../components/ui/collapsible.js';
+const keyVariants = cva('text-fd-primary', {
     variants: {
-        color: {
-            primary: 'bg-fd-primary/10 text-fd-primary',
-            deprecated: 'line-through text-fd-primary/50',
+        deprecated: {
+            true: 'line-through text-fd-primary/50',
         },
     },
 });
+const fieldVariants = cva('text-fd-muted-foreground not-prose');
 export function TypeTable({ type }) {
-    return (_jsx("div", { className: "prose my-6 overflow-auto prose-no-margin", children: _jsxs("table", { className: "whitespace-nowrap text-sm text-fd-muted-foreground", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { className: "w-[45%]", children: "Prop" }), _jsx("th", { className: "w-[30%]", children: "Type" }), _jsx("th", { className: "w-1/4", children: "Default" })] }) }), _jsx("tbody", { children: Object.entries(type).map(([key, value]) => (_jsxs("tr", { children: [_jsx("td", { children: _jsxs("div", { className: field(), children: [_jsxs("code", { className: cn(code({
-                                                color: value.deprecated ? 'deprecated' : 'primary',
-                                            })), children: [key, !value.required && '?'] }), value.description ? _jsx(Info, { children: value.description }) : null] }) }), _jsx("td", { children: _jsxs("div", { className: field(), children: [_jsx("code", { className: code(), children: value.type }), value.typeDescription ? (_jsx(Info, { children: value.typeDescription })) : null, value.typeDescriptionLink ? (_jsx(Link, { href: value.typeDescriptionLink, children: _jsx(LinkIcon, { className: "size-4 text-fd-muted-foreground" }) })) : null] }) }), _jsx("td", { children: value.default ? (_jsx("code", { className: code(), children: value.default })) : ('-') })] }, key))) })] }) }));
+    return (_jsxs("div", { className: "@container flex flex-col p-1 bg-fd-card text-fd-card-foreground rounded-2xl border my-6 text-sm overflow-hidden", children: [_jsxs("div", { className: "flex font-medium items-center px-3 py-1 not-prose text-fd-muted-foreground", children: [_jsx("p", { className: "w-[25%]", children: "Prop" }), _jsx("p", { className: "@max-xl:hidden", children: "Type" })] }), Object.entries(type).map(([key, value]) => (_jsx(Item, { name: key, item: value }, key)))] }));
+}
+function Item({ name, item: { parameters = [], description, required = false, deprecated, typeDescription, default: defaultValue, type, typeDescriptionLink, returns, }, }) {
+    const [open, setOpen] = useState(false);
+    return (_jsxs(Collapsible, { open: open, onOpenChange: setOpen, className: cn('rounded-xl border overflow-hidden transition-all', open
+            ? 'shadow-sm bg-fd-background not-last:mb-2'
+            : 'border-transparent'), children: [_jsxs(CollapsibleTrigger, { className: "relative flex flex-row items-center w-full group text-start px-3 py-2 not-prose hover:bg-fd-accent", children: [_jsx("span", { className: "pe-2 min-w-fit font-medium w-[25%]", children: _jsxs("code", { className: cn(keyVariants({
+                                deprecated,
+                            })), children: [name, !required && '?'] }) }), typeDescriptionLink ? (_jsx(Link, { href: typeDescriptionLink, className: "underline @max-xl:hidden", children: type })) : (_jsx("span", { className: "@max-xl:hidden", children: type })), _jsx(ChevronDown, { className: "absolute end-2 size-4 text-fd-muted-foreground transition-transform group-data-[state=open]:rotate-180" })] }), _jsx(CollapsibleContent, { children: _jsxs("div", { className: "grid grid-cols-[1fr_3fr] gap-x-2 gap-y-4 text-sm p-3 overflow-auto fd-scroll-container border-t", children: [_jsx("div", { className: "text-sm prose col-span-full prose-no-margin empty:hidden", children: description }), typeDescription && (_jsxs(_Fragment, { children: [_jsx("p", { className: cn(fieldVariants()), children: "Type" }), _jsx("p", { className: "my-auto not-prose", children: typeDescription })] })), defaultValue && (_jsxs(_Fragment, { children: [_jsx("p", { className: cn(fieldVariants()), children: "Default" }), _jsx("p", { className: "my-auto not-prose", children: defaultValue })] })), parameters.length > 0 && (_jsxs(_Fragment, { children: [_jsx("p", { className: cn(fieldVariants()), children: "Parameters" }), _jsx("div", { className: "flex flex-col gap-2", children: parameters.map((param) => (_jsxs("div", { className: "inline-flex items-center gap-1", children: [_jsxs("p", { className: "font-medium not-prose", children: [param.name, " -"] }), _jsx("div", { className: "text-sm prose prose-no-margin", children: param.description })] }, param.name))) })] })), returns && (_jsxs(_Fragment, { children: [_jsx("p", { className: cn(fieldVariants()), children: "Returns" }), _jsx("div", { className: "my-auto text-sm prose prose-no-margin", children: returns })] }))] }) })] }));
 }

package/dist/provider/base.js

@@ -36,7 +36,6 @@ function I18nProvider({ locales = [], locale, onLocaleChange, ...props }) {
             segments[0] = value;
         }
         router.push(`/${segments.join('/')}`);
-        router.refresh();
     });
     return (_jsx(I18nContext.Provider, { value: useMemo(() => ({
             locale,

package/dist/style.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.12 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme, base, components, utilities;
 @layer theme {
@@ -44,7 +44,7 @@
     --color-fd-popover-foreground: hsl(0, 0%, 15.1%);
     --color-fd-card: hsl(0, 0%, 94.7%);
     --color-fd-card-foreground: hsl(0, 0%, 3.9%);
-    --color-fd-border: hsla(0, 0%, 62%, 20%);
+    --color-fd-border: hsla(0, 0%, 80%, 50%);
     --color-fd-primary: hsl(0, 0%, 9%);
     --color-fd-primary-foreground: hsl(0, 0%, 98%);
     --color-fd-secondary: hsl(0, 0%, 93.1%);
@@ -400,6 +400,9 @@
   .z-\[-1\] {
     z-index: -1;
   }
+  .col-span-full {
+    grid-column: 1 / -1;
+  }
   .container {
     width: 100%;
     @media (width >= 40rem) {
@@ -1009,9 +1012,6 @@
   .max-h-\[80svh\] {
     max-height: 80svh;
   }
-  .max-h-\[400px\] {
-    max-height: 400px;
-  }
   .max-h-\[460px\] {
     max-height: 460px;
   }
@@ -1036,14 +1036,8 @@
   .w-1\.5 {
     width: calc(var(--spacing) * 1.5);
   }
-  .w-1\/4 {
-    width: calc(1/4 * 100%);
-  }
-  .w-\[30\%\] {
-    width: 30%;
-  }
-  .w-\[45\%\] {
-    width: 45%;
+  .w-\[25\%\] {
+    width: 25%;
   }
   .w-\[85\%\] {
     width: 85%;
@@ -1078,9 +1072,6 @@
   .max-w-\[380px\] {
     max-width: 380px;
   }
-  .max-w-\[400px\] {
-    max-width: 400px;
-  }
   .max-w-\[860px\] {
     max-width: 860px;
   }
@@ -1096,12 +1087,12 @@
   .min-w-0 {
     min-width: calc(var(--spacing) * 0);
   }
-  .min-w-\[220px\] {
-    min-width: 220px;
-  }
   .min-w-\[240px\] {
     min-width: 240px;
   }
+  .min-w-fit {
+    min-width: fit-content;
+  }
   .min-w-full {
     min-width: 100%;
   }
@@ -1167,6 +1158,9 @@
   .grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
+  .grid-cols-\[1fr_3fr\] {
+    grid-template-columns: 1fr 3fr;
+  }
   .flex-col {
     flex-direction: column;
   }
@@ -1221,6 +1215,12 @@
   .gap-6 {
     gap: calc(var(--spacing) * 6);
   }
+  .gap-x-2 {
+    column-gap: calc(var(--spacing) * 2);
+  }
+  .gap-y-4 {
+    row-gap: calc(var(--spacing) * 4);
+  }
   .divide-y {
     :where(& > :not(:last-child)) {
       --tw-divide-y-reverse: 0;
@@ -1506,6 +1506,9 @@
   .pe-\(--fd-toc-width\) {
     padding-inline-end: var(--fd-toc-width);
   }
+  .pe-2 {
+    padding-inline-end: calc(var(--spacing) * 2);
+  }
   .pe-2\.5 {
     padding-inline-end: calc(var(--spacing) * 2.5);
   }
@@ -1715,7 +1718,7 @@
     backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
   }
   .transition {
-    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
@@ -1841,6 +1844,11 @@
       border-bottom-width: 1px;
     }
   }
+  .not-last\:mb-2 {
+    &:not(*:last-child) {
+      margin-bottom: calc(var(--spacing) * 2);
+    }
+  }
   .group-data-\[state\=active\]\:bg-fd-primary {
     &:is(:where(.group)[data-state="active"] *) {
       background-color: var(--color-fd-primary);
@@ -1900,7 +1908,6 @@
   }
   .before\:content-\[\'\'\] {
     &::before {
-      content: var(--tw-content);
       --tw-content: '';
       content: var(--tw-content);
     }
@@ -2122,7 +2129,6 @@
     :is(& *) {
       &[data-active="true"] {
         &::before {
-          content: var(--tw-content);
           --tw-content: '';
           content: var(--tw-content);
         }
@@ -2496,6 +2502,11 @@
       --fd-toc-width: 286px;
     }
   }
+  .\@max-xl\:hidden {
+    @container (width < 36rem) {
+      display: none;
+    }
+  }
   .\@max-lg\:col-span-full {
     @container (width < 32rem) {
       grid-column: 1 / -1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fumadocs-ui",
-  "version": "15.7.8",
+  "version": "15.7.10",
   "description": "The framework for building a documentation website in Next.js",
   "keywords": [
     "NextJs",
@@ -121,20 +121,20 @@
     "react-medium-image-zoom": "^5.3.0",
     "scroll-into-view-if-needed": "^3.1.0",
     "tailwind-merge": "^3.3.1",
-    "fumadocs-core": "15.7.8"
+    "fumadocs-core": "15.7.10"
   },
   "devDependencies": {
     "@next/eslint-plugin-next": "^15.5.2",
-    "@tailwindcss/cli": "^4.1.12",
+    "@tailwindcss/cli": "^4.1.13",
     "@types/lodash.merge": "^4.6.9",
     "@types/react": "^19.1.12",
     "@types/react-dom": "^19.1.9",
     "next": "15.5.2",
-    "tailwindcss": "^4.1.12",
+    "tailwindcss": "^4.1.13",
     "tsc-alias": "^1.8.16",
     "@fumadocs/cli": "1.0.1",
     "eslint-config-custom": "0.0.0",
-    "fumadocs-core": "15.7.8",
+    "fumadocs-core": "15.7.10",
     "tsconfig": "0.0.0"
   },
   "peerDependencies": {