fumadocs-ui 15.3.1 → 15.3.3

package/dist/page.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { forwardRef, } from 'react';
+import { forwardRef, lazy } from 'react';
 import { AnchorProvider } from 'fumadocs-core/toc';
 import { slot } from './layouts/shared.js';
 import { cn } from './utils/cn.js';
@@ -8,7 +8,7 @@ import { Toc, TOCItems, TOCScrollArea, } from './components/layout/toc.js';
 import { buttonVariants } from './components/ui/button.js';
 import { Edit, Text } from './icons.js';
 import { I18nLabel } from './contexts/i18n.js';
-import ClerkTOCItems from './components/layout/toc-clerk.js';
+const ClerkTOCItems = lazy(() => import('./components/layout/toc-clerk.js'));
 export function DocsPage({ toc = [], full = false, editOnGithub, tableOfContentPopover: { enabled: tocPopoverEnabled, component: tocPopoverReplace, ...tocPopoverOptions } = {}, tableOfContent: { enabled: tocEnabled, component: tocReplace, ...tocOptions } = {}, ...props }) {
     const isTocRequired = toc.length > 0 ||
         tocOptions.footer !== undefined ||
@@ -21,7 +21,7 @@ export function DocsPage({ toc = [], full = false, editOnGithub, tableOfContentP
     return (_jsxs(AnchorProvider, { toc: toc, single: tocOptions.single, children: [_jsxs(PageBody, { ...props.container, className: cn(props.container?.className), style: {
                     '--fd-tocnav-height': !tocPopoverEnabled ? '0px' : undefined,
                     ...props.container?.style,
-                }, children: [slot({ enabled: tocPopoverEnabled, component: tocPopoverReplace }, _jsxs(TocPopover, { className: "h-10", children: [_jsx(TocPopoverTrigger, { className: "w-full", items: toc }), _jsxs(TocPopoverContent, { children: [tocPopoverOptions.header, _jsx(TOCScrollArea, { isMenu: true, children: tocPopoverOptions.style === 'clerk' ? (_jsx(ClerkTOCItems, { items: toc })) : (_jsx(TOCItems, { items: toc })) }), tocPopoverOptions.footer] })] }), {
+                }, children: [slot({ enabled: tocPopoverEnabled, component: tocPopoverReplace }, _jsxs(TocPopover, { className: "h-10", children: [_jsx(TocPopoverTrigger, { className: "w-full", items: toc }), _jsxs(TocPopoverContent, { children: [tocPopoverOptions.header, _jsx(TOCScrollArea, { className: "px-4 md:px-6", children: tocPopoverOptions.style === 'clerk' ? (_jsx(ClerkTOCItems, { items: toc })) : (_jsx(TOCItems, { items: toc })) }), tocPopoverOptions.footer] })] }), {
                         items: toc,
                         ...tocPopoverOptions,
                     }), _jsxs(PageArticle, { ...props.article, className: cn(full || !tocEnabled ? 'max-w-[1120px]' : 'max-w-[860px]', props.article?.className), children: [slot(props.breadcrumb, _jsx(Breadcrumb, { ...props.breadcrumb })), props.children, _jsx("div", { role: "none", className: "flex-1" }), _jsxs("div", { className: "flex flex-row flex-wrap items-center justify-between gap-4 empty:hidden", children: [editOnGithub && (_jsx(EditOnGitHub, { href: `https://github.com/${editOnGithub.owner}/${editOnGithub.repo}/blob/${editOnGithub.sha}/${editOnGithub.path.startsWith('/') ? editOnGithub.path.slice(1) : editOnGithub.path}` })), props.lastUpdate && (_jsx(LastUpdate, { date: new Date(props.lastUpdate) }))] }), slot(props.footer, _jsx(Footer, { items: props.footer?.items }))] })] }), slot({ enabled: tocEnabled, component: tocReplace }, _jsxs(Toc, { children: [tocOptions.header, _jsxs("h3", { className: "inline-flex items-center gap-1.5 text-sm text-fd-muted-foreground", children: [_jsx(Text, { className: "size-4" }), _jsx(I18nLabel, { label: "toc" })] }), _jsx(TOCScrollArea, { children: tocOptions.style === 'clerk' ? (_jsx(ClerkTOCItems, { items: toc })) : (_jsx(TOCItems, { items: toc })) }), tocOptions.footer] }), {
@@ -55,6 +55,6 @@ DocsTitle.displayName = 'DocsTitle';
 /**
  * For separate MDX page
  */
-export function withArticle({ children }) {
-    return (_jsx("main", { className: "container py-12", children: _jsx("article", { className: "prose", children: children }) }));
+export function withArticle(props) {
+    return (_jsx("main", { ...props, className: cn('container py-12', props.className), children: _jsx("article", { className: "prose", children: props.children }) }));
 }

package/dist/style.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.5 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.7 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme, base, components, utilities;
 @layer theme {
@@ -9,6 +9,7 @@
       "Courier New", monospace;
     --color-red-500: oklch(63.7% 0.237 25.331);
     --color-orange-500: oklch(70.5% 0.213 47.604);
+    --color-green-500: oklch(72.3% 0.219 149.579);
     --color-blue-500: oklch(62.3% 0.214 259.815);
     --color-black: #000;
     --spacing: 0.25rem;
@@ -67,12 +68,14 @@
     --color-fd-diff-add-symbol: rgb(10, 200, 100);
     --animate-fd-fade-in: fd-fade-in 300ms ease;
     --animate-fd-fade-out: fd-fade-out 300ms ease;
-    --animate-fd-dialog-in: fd-dialog-in 200ms cubic-bezier(0.32, 0.72, 0, 1);
-    --animate-fd-dialog-out: fd-dialog-out 300ms cubic-bezier(0.32, 0.72, 0, 1);
+    --animate-fd-dialog-in: fd-dialog-in 240ms cubic-bezier(0.16, 1, 0.3, 1);
+    --animate-fd-dialog-out: fd-dialog-out 240ms cubic-bezier(0.16, 1, 0.3, 1);
     --animate-fd-popover-in: fd-popover-in 150ms ease;
     --animate-fd-popover-out: fd-popover-out 150ms ease;
-    --animate-fd-collapsible-down: fd-collapsible-down 150ms ease-out;
-    --animate-fd-collapsible-up: fd-collapsible-up 150ms ease-out;
+    --animate-fd-collapsible-down: fd-collapsible-down 150ms
+    cubic-bezier(0.45, 0, 0.55, 1);
+    --animate-fd-collapsible-up: fd-collapsible-up 150ms
+    cubic-bezier(0.45, 0, 0.55, 1);
     --animate-fd-accordion-down: fd-accordion-down 200ms ease-out;
     --animate-fd-accordion-up: fd-accordion-up 200ms ease-out;
     --animate-fd-nav-menu-in: fd-nav-menu-in 200ms ease;
@@ -354,9 +357,6 @@
   .bottom-1\.5 {
     bottom: calc(var(--spacing) * 1.5);
   }
-  .left-\(--fd-nav-left\) {
-    left: var(--fd-nav-left);
-  }
   .left-1\/2 {
     left: calc(1/2 * 100%);
   }
@@ -409,9 +409,6 @@
   .-mx-1 {
     margin-inline: calc(var(--spacing) * -1);
   }
-  .-mx-2 {
-    margin-inline: calc(var(--spacing) * -2);
-  }
   .\!my-0 {
     margin-block: calc(var(--spacing) * 0) !important;
   }
@@ -442,6 +439,9 @@
   .ms-auto {
     margin-inline-start: auto;
   }
+  .ms-px {
+    margin-inline-start: 1px;
+  }
   .-me-\(--fd-sidebar-width\) {
     margin-inline-end: calc(var(--fd-sidebar-width) * -1);
   }
@@ -847,9 +847,6 @@
   .mr-auto {
     margin-right: auto;
   }
-  .-mb-1 {
-    margin-bottom: calc(var(--spacing) * -1);
-  }
   .mb-1 {
     margin-bottom: calc(var(--spacing) * 1);
   }
@@ -889,6 +886,19 @@
   .table {
     display: table;
   }
+  .fd-scroll-container {
+    &::-webkit-scrollbar {
+      width: 5px;
+      height: 5px;
+    }
+    &::-webkit-scrollbar-thumb {
+      border-radius: 5px;
+      background: var(--color-fd-border);
+    }
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+  }
   .size-3 {
     width: calc(var(--spacing) * 3);
     height: calc(var(--spacing) * 3);
@@ -947,6 +957,9 @@
   .max-h-\[50vh\] {
     max-height: 50vh;
   }
+  .max-h-\[80svh\] {
+    max-height: 80svh;
+  }
   .max-h-\[400px\] {
     max-height: 400px;
   }
@@ -1001,6 +1014,9 @@
   .w-full {
     width: 100%;
   }
+  .w-max {
+    width: max-content;
+  }
   .w-px {
     width: 1px;
   }
@@ -1040,6 +1056,9 @@
   .min-w-\[220px\] {
     min-width: 220px;
   }
+  .min-w-full {
+    min-width: 100%;
+  }
   .flex-1 {
     flex: 1;
   }
@@ -1265,6 +1284,12 @@
       border-inline-start-color: color-mix(in oklab, var(--color-blue-500) 50%, transparent);
     }
   }
+  .border-s-green-500\/50 {
+    border-inline-start-color: color-mix(in srgb, oklch(72.3% 0.219 149.579) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-inline-start-color: color-mix(in oklab, var(--color-green-500) 50%, transparent);
+    }
+  }
   .border-s-orange-500\/50 {
     border-inline-start-color: color-mix(in srgb, oklch(70.5% 0.213 47.604) 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1343,6 +1368,9 @@
   .fill-blue-500 {
     fill: var(--color-blue-500);
   }
+  .fill-green-500 {
+    fill: var(--color-green-500);
+  }
   .fill-orange-500 {
     fill: var(--color-orange-500);
   }
@@ -1445,9 +1473,6 @@
   .ps-\[calc\(var\(--fd-layout-offset\)\+var\(--fd-sidebar-width\)\)\] {
     padding-inline-start: calc(var(--fd-layout-offset) + var(--fd-sidebar-width));
   }
-  .ps-px {
-    padding-inline-start: 1px;
-  }
   .pe-\(--fd-layout-offset\) {
     padding-inline-end: var(--fd-layout-offset);
   }
@@ -1460,8 +1485,8 @@
   .pt-0 {
     padding-top: calc(var(--spacing) * 0);
   }
-  .pt-4 {
-    padding-top: calc(var(--spacing) * 4);
+  .pt-1\.5 {
+    padding-top: calc(var(--spacing) * 1.5);
   }
   .pt-8 {
     padding-top: calc(var(--spacing) * 8);
@@ -1686,6 +1711,9 @@
   .\[--fd-tocnav-height\:36px\] {
     --fd-tocnav-height: 36px;
   }
+  .\[scrollbar-width\:none\] {
+    scrollbar-width: none;
+  }
   .\*\:col-start-1 {
     :is(& > *) {
       grid-column-start: 1;
@@ -1696,14 +1724,19 @@
       grid-row-start: 1;
     }
   }
-  .\*\:block {
+  .\*\:my-auto {
     :is(& > *) {
-      display: block;
+      margin-block: auto;
     }
   }
-  .\*\:w-full {
+  .\*\:flex {
     :is(& > *) {
-      width: 100%;
+      display: flex;
+    }
+  }
+  .\*\:flex-col {
+    :is(& > *) {
+      flex-direction: column;
     }
   }
   .group-hover\:opacity-100 {
@@ -1875,6 +1908,11 @@
       display: none;
     }
   }
+  .data-\[empty\=true\]\:hidden {
+    &[data-empty="true"] {
+      display: none;
+    }
+  }
   .data-\[motion\=from-end\]\:animate-fd-enterFromRight {
     &[data-motion="from-end"] {
       animation: var(--animate-fd-enterFromRight);
@@ -2028,16 +2066,6 @@
       background-color: var(--color-fd-background);
     }
   }
-  .max-md\:pt-6 {
-    @media (width < 48rem) {
-      padding-top: calc(var(--spacing) * 6);
-    }
-  }
-  .max-md\:pb-6 {
-    @media (width < 48rem) {
-      padding-bottom: calc(var(--spacing) * 6);
-    }
-  }
   .max-sm\:mt-2 {
     @media (width < 40rem) {
       margin-top: calc(var(--spacing) * 2);
@@ -2170,11 +2198,6 @@
       height: calc(var(--spacing) * 12);
     }
   }
-  .lg\:w-\[calc\(100\%-1rem\)\] {
-    @media (width >= 64rem) {
-      width: calc(100% - 1rem);
-    }
-  }
   .lg\:grid-cols-3 {
     @media (width >= 64rem) {
       grid-template-columns: repeat(3, minmax(0, 1fr));
@@ -2206,6 +2229,11 @@
       --fd-nav-height: calc(var(--spacing) * 24);
     }
   }
+  .lg\:\[--fd-padding\:1rem\] {
+    @media (width >= 64rem) {
+      --fd-padding: 1rem;
+    }
+  }
   .lg\:\[--fd-sidebar-width\:286px\] {
     @media (width >= 64rem) {
       --fd-sidebar-width: 286px;
@@ -2278,12 +2306,6 @@
       padding-left: calc(var(--spacing) * 3);
     }
   }
-  .\[\&_svg\]\:\!size-4\.5 {
-    & svg {
-      width: calc(var(--spacing) * 4.5) !important;
-      height: calc(var(--spacing) * 4.5) !important;
-    }
-  }
   .\[\&_svg\]\:size-3\.5 {
     & svg {
       width: calc(var(--spacing) * 3.5);
@@ -2366,10 +2388,16 @@
     color: var(--shiki-light);
   }
   code .line {
-    min-height: 1em;
+    line-height: 1.45em;
+    min-height: 1.45em;
     position: relative;
-    display: inline-block;
-    width: 100%;
+  }
+  &.has-focused code .line:not(.focused) {
+    filter: blur(2px);
+    transition: filter 200ms;
+  }
+  &.has-focused:hover code .line:not(.focused) {
+    filter: blur(0);
   }
   &[data-line-numbers] code .twoslash-meta-line {
     margin-left: calc(var(--spacing) * 7);
@@ -2408,9 +2436,6 @@
     content: '+';
     color: var(--color-fd-diff-add-symbol);
   }
-  code .diff {
-    position: relative;
-  }
   .highlighted {
     background-color: color-mix(in srgb, hsl(0, 0%, 9%) 10%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2418,17 +2443,21 @@
     }
   }
   .highlighted-word {
-    padding: 1px 2px;
-    margin: -1px -3px;
-    border: 1px solid color-mix(in srgb, hsl(0, 0%, 9%) 50%, transparent);
+    padding: 1px;
+    margin-block: -1px;
+    border-radius: var(--radius-md);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: color-mix(in srgb, hsl(0, 0%, 9%) 30%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
-      border: 1px solid color-mix(in oklab, var(--color-fd-primary) 50%, transparent);
+      border-color: color-mix(in oklab, var(--color-fd-primary) 30%, transparent);
     }
-    background-color: color-mix( in oklab, hsl(0, 0%, 9%) 10%, transparent );
+    background-color: color-mix(in srgb, hsl(0, 0%, 9%) 10%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix( in oklab, var(--color-fd-primary) 10%, transparent );
+      background-color: color-mix(in oklab, var(--color-fd-primary) 10%, transparent);
     }
-    border-radius: 2px;
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
   }
 }
 .dark .shiki:not(.not-fumadocs-codeblock *) {
@@ -2742,7 +2771,7 @@
     transform: scale(1);
   }
   to {
-    transform: scale(1.06);
+    transform: scale(1.04);
     opacity: 0;
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fumadocs-ui",
-  "version": "15.3.1",
+  "version": "15.3.3",
   "description": "The framework for building a documentation website in Next.js",
   "keywords": [
     "NextJs",
@@ -88,21 +88,21 @@
     "postcss-selector-parser": "^7.1.0",
     "react-medium-image-zoom": "^5.2.14",
     "react-remove-scroll": "^2.6.3",
-    "tailwind-merge": "^3.2.0",
-    "fumadocs-core": "15.3.1"
+    "tailwind-merge": "^3.3.0",
+    "fumadocs-core": "15.3.3"
   },
   "devDependencies": {
-    "@next/eslint-plugin-next": "^15.3.1",
-    "@tailwindcss/cli": "^4.1.5",
+    "@next/eslint-plugin-next": "^15.3.2",
+    "@tailwindcss/cli": "^4.1.7",
     "@types/lodash.merge": "^4.6.9",
-    "@types/react": "^19.1.3",
-    "@types/react-dom": "^19.1.3",
-    "next": "15.3.1",
-    "tailwindcss": "^4.1.5",
+    "@types/react": "^19.1.4",
+    "@types/react-dom": "^19.1.5",
+    "next": "15.3.2",
+    "tailwindcss": "^4.1.7",
     "tsc-alias": "^1.8.16",
     "@fumadocs/cli": "0.1.1",
     "eslint-config-custom": "0.0.0",
-    "fumadocs-core": "15.3.1",
+    "fumadocs-core": "15.3.3",
     "tsconfig": "0.0.0"
   },
   "peerDependencies": {