fumadocs-ui 15.2.14 → 15.2.15

package/css/preset.css

@@ -13,10 +13,10 @@
   --fd-nav-height: 0px;
   --fd-tocnav-height: 0px;
 
-  --fd-diff-remove-color: rgba(200, 10, 100, 0.12);
-  --fd-diff-remove-symbol-color: rgb(230, 10, 100);
-  --fd-diff-add-color: rgba(14, 180, 100, 0.12);
-  --fd-diff-add-symbol-color: rgb(10, 200, 100);
+  --color-fd-diff-remove: rgba(200, 10, 100, 0.12);
+  --color-fd-diff-remove-symbol: rgb(230, 10, 100);
+  --color-fd-diff-add: rgba(14, 180, 100, 0.12);
+  --color-fd-diff-add-symbol: rgb(10, 200, 100);
 }
 
 @layer base {

package/css/shiki.css

@@ -1,51 +1,42 @@
-.fd-codeblock pre > * {
-  display: grid;
-  font-size: 13px;
-}
-
 .shiki:not(.not-fumadocs-codeblock *) {
   code span {
     color: var(--shiki-light);
   }
 
-  code .diff.remove {
-    background-color: var(--fd-diff-remove-color);
-    opacity: 0.7;
-  }
-
   code .diff::before {
     position: absolute;
     left: 6px;
   }
 
+  code .diff.remove {
+    opacity: 0.7;
+    @apply bg-fd-diff-remove;
+  }
+
   code .diff.remove::before {
     content: '-';
-    color: var(--fd-diff-remove-symbol-color);
+    @apply text-fd-diff-remove-symbol;
   }
 
   code .diff.add {
-    background-color: var(--fd-diff-add-color);
+    @apply bg-fd-diff-add;
   }
 
   code .diff.add::before {
     content: '+';
-    color: var(--fd-diff-add-symbol-color);
+    @apply text-fd-diff-add-symbol;
   }
 
   code .diff {
-    margin: 0 -16px;
-    padding: 0 16px;
-    position: relative;
+    width: calc(100% + 8 * var(--spacing));
+
+    @apply relative inline-block -mx-4 px-4;
   }
 
   .highlighted {
-    margin: 0 -16px;
-    padding: 0 16px;
-    background-color: color-mix(
-      in oklab,
-      var(--color-fd-primary) 10%,
-      transparent
-    );
+    width: calc(100% + 8 * var(--spacing));
+
+    @apply inline-block -mx-4 px-4 bg-fd-primary/10;
   }
 
   .highlighted-word {

package/dist/components/codeblock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"codeblock.d.ts","sourceRoot":"","sources":["../../src/components/codeblock.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,KAAK,cAAc,EACnB,KAAK,SAAS,EAGf,MAAM,OAAO,CAAC;AASf,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AAE3E,MAAM,MAAM,cAAc,GAAG,cAAc,CAAC,WAAW,CAAC,GAAG;IACzD;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,aAAa,CAAC,EAAE,uBAAuB,CAAC;CACzC,CAAC;AAEF,eAAO,MAAM,GAAG,2HAYf,CAAC;AAIF,eAAO,MAAM,SAAS;IAxCpB;;;;OAIG;WACI,SAAS;IAEhB;;;;OAIG;gBACS,OAAO;IAEnB;;;;OAIG;qBACc,OAAO;oBAER,uBAAuB;+CAkGxC,CAAC"}
+{"version":3,"file":"codeblock.d.ts","sourceRoot":"","sources":["../../src/components/codeblock.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,KAAK,cAAc,EACnB,KAAK,SAAS,EAGf,MAAM,OAAO,CAAC;AASf,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AAE3E,MAAM,MAAM,cAAc,GAAG,cAAc,CAAC,WAAW,CAAC,GAAG;IACzD;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,aAAa,CAAC,EAAE,uBAAuB,CAAC;CACzC,CAAC;AAEF,eAAO,MAAM,GAAG,2HAef,CAAC;AAIF,eAAO,MAAM,SAAS;IA3CpB;;;;OAIG;WACI,SAAS;IAEhB;;;;OAIG;gBACS,OAAO;IAEnB;;;;OAIG;qBACc,OAAO;oBAER,uBAAuB;+CAqGxC,CAAC"}

package/dist/components/codeblock.js

@@ -7,7 +7,7 @@ import { ScrollArea, ScrollBar, ScrollViewport, } from '../components/ui/scroll-
 import { useCopyButton } from '../utils/use-copy-button.js';
 import { buttonVariants } from '../components/ui/button.js';
 export const Pre = forwardRef(({ className, ...props }, ref) => {
-    return (_jsx("pre", { ref: ref, className: cn('p-4 focus-visible:outline-none', className), ...props, children: props.children }));
+    return (_jsx("pre", { ref: ref, className: cn('text-[13px] p-4 focus-visible:outline-none *:block *:w-full', className), ...props, children: props.children }));
 });
 Pre.displayName = 'Pre';
 export const CodeBlock = forwardRef(({ title, allowCopy = true, keepBackground = false, icon, viewportProps, ...props }, ref) => {

package/dist/layouts/home/navbar.d.ts

@@ -1,9 +1,9 @@
-import { type ComponentProps, type HTMLAttributes } from 'react';
+import { type ComponentProps } from 'react';
 import { type VariantProps } from 'class-variance-authority';
 import { type LinkProps } from 'fumadocs-core/link';
 import { BaseLinkItem } from '../../layouts/links.js';
 import type { NavigationMenuContentProps, NavigationMenuTriggerProps } from '@radix-ui/react-navigation-menu';
-export declare function Navbar(props: HTMLAttributes<HTMLElement>): import("react/jsx-runtime").JSX.Element;
+export declare function Navbar(props: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
 export declare const NavbarMenu: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-navigation-menu").NavigationMenuItemProps & import("react").RefAttributes<HTMLLIElement>, "ref"> & import("react").RefAttributes<HTMLLIElement>>;
 export declare function NavbarMenuContent(props: NavigationMenuContentProps): import("react/jsx-runtime").JSX.Element;
 export declare function NavbarMenuTrigger(props: NavigationMenuTriggerProps): import("react/jsx-runtime").JSX.Element;

package/dist/layouts/home/navbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"navbar.d.ts","sourceRoot":"","sources":["../../../src/layouts/home/navbar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,cAAc,EAAY,MAAM,OAAO,CAAC;AAC3E,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAa,EAAE,KAAK,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE1D,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAW/C,OAAO,KAAK,EACV,0BAA0B,EAC1B,0BAA0B,EAC3B,MAAM,iCAAiC,CAAC;AAOzC,wBAAgB,MAAM,CAAC,KAAK,EAAE,cAAc,CAAC,WAAW,CAAC,2CA2BxD;AAED,eAAO,MAAM,UAAU,yNAAqB,CAAC;AAE7C,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,0BAA0B,2CAYlE;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,0BAA0B,2CASlE;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,SAAS,2CAc9C;AAED,QAAA,MAAM,YAAY;;8EAiBhB,CAAC;AAEH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,OAAO,EACP,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,YAAY,CAAC,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,2CAczE"}
+{"version":3,"file":"navbar.d.ts","sourceRoot":"","sources":["../../../src/layouts/home/navbar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,cAAc,EAAY,MAAM,OAAO,CAAC;AACtD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAa,EAAE,KAAK,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE1D,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAW/C,OAAO,KAAK,EACV,0BAA0B,EAC1B,0BAA0B,EAC3B,MAAM,iCAAiC,CAAC;AAOzC,wBAAgB,MAAM,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,2CAkClD;AAED,eAAO,MAAM,UAAU,yNAAqB,CAAC;AAE7C,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,0BAA0B,2CAYlE;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,0BAA0B,2CASlE;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,SAAS,2CAc9C;AAED,QAAA,MAAM,YAAY;;8EAiBhB,CAAC;AAEH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,OAAO,EACP,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,YAAY,CAAC,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,2CAczE"}

package/dist/layouts/home/navbar.js

@@ -12,12 +12,15 @@ const navItemVariants = cva('inline-flex items-center gap-1 p-2 text-fd-muted-fo
 export function Navbar(props) {
     const [value, setValue] = useState('');
     const { isTransparent } = useNav();
-    return (_jsx(NavigationMenu, { value: value, onValueChange: setValue, asChild: true, children: _jsxs("header", { id: "nd-nav", ...props, className: cn('fixed left-1/2 top-(--fd-banner-height) z-40 box-content w-full max-w-fd-container -translate-x-1/2 border-b border-fd-foreground/10 transition-colors lg:mt-2 lg:w-[calc(100%-1rem)] lg:rounded-2xl lg:border', value.length > 0 ? 'shadow-lg' : 'shadow-sm', (!isTransparent || value.length > 0) &&
-                'bg-fd-background/80 backdrop-blur-lg', props.className), children: [_jsx(NavigationMenuList, { className: "flex h-14 w-full flex-row items-center px-4 lg:h-12", asChild: true, children: _jsx("nav", { children: props.children }) }), _jsx(NavigationMenuViewport, {})] }) }));
+    return (_jsx(NavigationMenu, { value: value, onValueChange: setValue, asChild: true, children: _jsxs("header", { id: "nd-nav", ...props, className: cn('fixed left-(--fd-nav-left) top-(--fd-banner-height) z-40 box-content w-full max-w-fd-container -translate-x-1/2 border-b border-fd-foreground/10 transition-colors lg:mt-2 lg:w-[calc(100%-1rem)] lg:rounded-2xl lg:border', value.length > 0 ? 'shadow-lg' : 'shadow-sm', (!isTransparent || value.length > 0) &&
+                'bg-fd-background/80 backdrop-blur-lg', props.className), style: {
+                '--fd-nav-left': 'calc(50% - var(--removed-body-scroll-bar-size,0px) / 2)',
+                ...props.style,
+            }, children: [_jsx(NavigationMenuList, { className: "flex h-14 w-full flex-row items-center px-4 lg:h-12", asChild: true, children: _jsx("nav", { children: props.children }) }), _jsx(NavigationMenuViewport, {})] }) }));
 }
 export const NavbarMenu = NavigationMenuItem;
 export function NavbarMenuContent(props) {
-    return (_jsx(NavigationMenuContent, { ...props, className: cn('grid grid-cols-1 gap-3 px-4 pb-4 md:grid-cols-2 lg:grid-cols-3', props.className), children: props.children }));
+    return (_jsx(NavigationMenuContent, { ...props, className: cn('grid grid-cols-1 gap-3 p-4 md:grid-cols-2 lg:grid-cols-3', props.className), children: props.children }));
 }
 export function NavbarMenuTrigger(props) {
     return (_jsx(NavigationMenuTrigger, { ...props, className: cn(navItemVariants(), 'rounded-md', props.className), children: props.children }));

package/dist/style.css

@@ -77,10 +77,10 @@
     --fd-banner-height: 0px;
     --fd-nav-height: 0px;
     --fd-tocnav-height: 0px;
-    --fd-diff-remove-color: rgba(200, 10, 100, 0.12);
-    --fd-diff-remove-symbol-color: rgb(230, 10, 100);
-    --fd-diff-add-color: rgba(14, 180, 100, 0.12);
-    --fd-diff-add-symbol-color: rgb(10, 200, 100);
+    --color-fd-diff-remove: rgba(200, 10, 100, 0.12);
+    --color-fd-diff-remove-symbol: rgb(230, 10, 100);
+    --color-fd-diff-add: rgba(14, 180, 100, 0.12);
+    --color-fd-diff-add-symbol: rgb(10, 200, 100);
   }
 }
 @layer base {
@@ -348,6 +348,9 @@
   .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%);
   }
@@ -1432,9 +1435,6 @@
   .pb-2 {
     padding-bottom: calc(var(--spacing) * 2);
   }
-  .pb-4 {
-    padding-bottom: calc(var(--spacing) * 4);
-  }
   .pb-6 {
     padding-bottom: calc(var(--spacing) * 6);
   }
@@ -1649,6 +1649,16 @@
       grid-row-start: 1;
     }
   }
+  .\*\:block {
+    :is(& > *) {
+      display: block;
+    }
+  }
+  .\*\:w-full {
+    :is(& > *) {
+      width: 100%;
+    }
+  }
   .group-hover\:opacity-100 {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {
@@ -2351,45 +2361,45 @@
   --color-fd-secondary: hsl(0, 0%, 18%);
   --color-fd-muted-foreground: hsl(0, 0%, 72%);
 }
-.fd-codeblock pre > * {
-  display: grid;
-  font-size: 13px;
-}
 .shiki:not(.not-fumadocs-codeblock *) {
   code span {
     color: var(--shiki-light);
   }
-  code .diff.remove {
-    background-color: var(--fd-diff-remove-color);
-    opacity: 0.7;
-  }
   code .diff::before {
     position: absolute;
     left: 6px;
   }
+  code .diff.remove {
+    opacity: 0.7;
+    background-color: var(--color-fd-diff-remove);
+  }
   code .diff.remove::before {
     content: '-';
-    color: var(--fd-diff-remove-symbol-color);
+    color: var(--color-fd-diff-remove-symbol);
   }
   code .diff.add {
-    background-color: var(--fd-diff-add-color);
+    background-color: var(--color-fd-diff-add);
   }
   code .diff.add::before {
     content: '+';
-    color: var(--fd-diff-add-symbol-color);
+    color: var(--color-fd-diff-add-symbol);
   }
   code .diff {
-    margin: 0 -16px;
-    padding: 0 16px;
+    width: calc(100% + 8 * var(--spacing));
     position: relative;
+    margin-inline: calc(var(--spacing) * -4);
+    display: inline-block;
+    padding-inline: calc(var(--spacing) * 4);
   }
   .highlighted {
-    margin: 0 -16px;
-    padding: 0 16px;
-    background-color: color-mix( in oklab, hsl(0, 0%, 9%) 10%, transparent );
+    width: calc(100% + 8 * var(--spacing));
+    margin-inline: calc(var(--spacing) * -4);
+    display: inline-block;
+    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);
     }
+    padding-inline: calc(var(--spacing) * 4);
   }
   .highlighted-word {
     padding: 1px 2px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fumadocs-ui",
-  "version": "15.2.14",
+  "version": "15.2.15",
   "description": "The framework for building a documentation website in Next.js",
   "keywords": [
     "NextJs",
@@ -87,7 +87,7 @@
     "postcss-selector-parser": "^7.1.0",
     "react-medium-image-zoom": "^5.2.14",
     "tailwind-merge": "^3.2.0",
-    "fumadocs-core": "15.2.14"
+    "fumadocs-core": "15.2.15"
   },
   "devDependencies": {
     "@next/eslint-plugin-next": "^15.3.1",
@@ -100,7 +100,7 @@
     "tsc-alias": "^1.8.15",
     "@fumadocs/cli": "0.1.1",
     "eslint-config-custom": "0.0.0",
-    "fumadocs-core": "15.2.14",
+    "fumadocs-core": "15.2.15",
     "tsconfig": "0.0.0"
   },
   "peerDependencies": {