fumadocs-ui 15.3.0 → 15.3.1

package/css/shiki.css

@@ -3,9 +3,30 @@
     color: var(--shiki-light);
   }
 
+  code .line {
+    min-height: 1em;
+    @apply relative inline-block w-full;
+  }
+
+  &[data-line-numbers] code .twoslash-meta-line {
+    @apply ml-7;
+  }
+
+  &[data-line-numbers] code .line {
+    width: calc(100% - 7 * var(--spacing));
+    counter-increment: line;
+    @apply ml-7;
+
+    &::after {
+      position: absolute;
+      content: counter(line);
+      @apply top-0 -left-5 text-fd-muted-foreground/60;
+    }
+  }
+
   code .diff::before {
     position: absolute;
-    left: 6px;
+    left: var(--spacing);
   }
 
   code .diff.remove {
@@ -28,15 +49,11 @@
   }
 
   code .diff {
-    width: calc(100% + 8 * var(--spacing));
-
-    @apply relative inline-block -mx-4 px-4;
+    @apply relative;
   }
 
   .highlighted {
-    width: calc(100% + 8 * var(--spacing));
-
-    @apply inline-block -mx-4 px-4 bg-fd-primary/10;
+    @apply bg-fd-primary/10;
   }
 
   .highlighted-word {

package/dist/components/codeblock.d.ts

@@ -20,6 +20,14 @@ export type CodeBlockProps = HTMLAttributes<HTMLElement> & {
      */
     keepBackground?: boolean;
     viewportProps?: ScrollAreaViewportProps;
+    /**
+     * show line numbers
+     */
+    'data-line-numbers'?: boolean;
+    /**
+     * @defaultValue 1
+     */
+    'data-line-numbers-start'?: number;
 };
 export declare const Pre: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLPreElement> & import("react").RefAttributes<HTMLPreElement>>;
 export declare const CodeBlock: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
@@ -42,5 +50,13 @@ export declare const CodeBlock: import("react").ForwardRefExoticComponent<HTMLAt
      */
     keepBackground?: boolean;
     viewportProps?: ScrollAreaViewportProps;
+    /**
+     * show line numbers
+     */
+    'data-line-numbers'?: boolean;
+    /**
+     * @defaultValue 1
+     */
+    'data-line-numbers-start'?: number;
 } & import("react").RefAttributes<HTMLElement>>;
 //# sourceMappingURL=codeblock.d.ts.map

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,EAEf,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;+CAiGxC,CAAC"}
+{"version":3,"file":"codeblock.d.ts","sourceRoot":"","sources":["../../src/components/codeblock.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,KAAK,cAAc,EACnB,KAAK,SAAS,EAEf,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;IAExC;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B;;OAEG;IACH,yBAAyB,CAAC,EAAE,MAAM,CAAC;CACpC,CAAC;AAEF,eAAO,MAAM,GAAG,2HAYf,CAAC;AAIF,eAAO,MAAM,SAAS;IAlDpB;;;;OAIG;WACI,SAAS;IAEhB;;;;OAIG;gBACS,OAAO;IAEnB;;;;OAIG;qBACc,OAAO;oBAER,uBAAuB;IAEvC;;OAEG;0BACmB,OAAO;IAE7B;;OAEG;gCACyB,MAAM;+CA4GnC,CAAC"}

package/dist/components/codeblock.js

@@ -7,10 +7,10 @@ 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('text-[13px] p-4 *:block *:w-full', className), ...props, children: props.children }));
+    return (_jsx("pre", { ref: ref, className: cn('size-full *:block *:w-full', className), ...props, children: props.children }));
 });
 Pre.displayName = 'Pre';
-export const CodeBlock = forwardRef(({ title, allowCopy = true, keepBackground = false, icon, viewportProps, ...props }, ref) => {
+export const CodeBlock = forwardRef(({ title, allowCopy = true, keepBackground = false, icon, viewportProps, children, ...props }, ref) => {
     const areaRef = useRef(null);
     const onCopy = () => {
         const pre = areaRef.current?.getElementsByTagName('pre').item(0);
@@ -26,7 +26,12 @@ export const CodeBlock = forwardRef(({ title, allowCopy = true, keepBackground =
                             ? {
                                 __html: icon,
                             }
-                            : undefined, children: typeof icon !== 'string' ? icon : null })) : null, _jsx("figcaption", { className: "flex-1 truncate text-fd-muted-foreground", children: title }), allowCopy ? (_jsx(CopyButton, { className: "-me-2", onCopy: onCopy })) : null] })) : (allowCopy && (_jsx(CopyButton, { className: "absolute right-2 top-2 z-[2] backdrop-blur-md", onCopy: onCopy }))), _jsxs(ScrollArea, { ref: areaRef, dir: "ltr", children: [_jsx(ScrollViewport, { ...viewportProps, className: cn('max-h-[600px]', viewportProps?.className), children: props.children }), _jsx(ScrollBar, { orientation: "horizontal" })] })] }));
+                            : undefined, children: typeof icon !== 'string' ? icon : null })) : null, _jsx("figcaption", { className: "flex-1 truncate text-fd-muted-foreground", children: title }), allowCopy ? (_jsx(CopyButton, { className: "-me-2", onCopy: onCopy })) : null] })) : (allowCopy && (_jsx(CopyButton, { className: "absolute right-2 top-2 z-[2] backdrop-blur-md", onCopy: onCopy }))), _jsxs(ScrollArea, { ref: areaRef, dir: "ltr", children: [_jsx(ScrollViewport, { ...viewportProps, className: cn('text-[13px] py-3.5 [&_.line]:px-4 max-h-[600px]', props['data-line-numbers'] && '[&_.line]:pl-3', viewportProps?.className), style: {
+                            counterSet: props['data-line-numbers']
+                                ? `line ${Number(props['data-line-numbers-start'] ?? 1) - 1}`
+                                : undefined,
+                            ...viewportProps?.style,
+                        }, children: children }), _jsx(ScrollBar, { orientation: "horizontal" })] })] }));
 });
 CodeBlock.displayName = 'CodeBlock';
 function CopyButton({ className, onCopy, ...props }) {

package/dist/components/layout/sidebar.js

@@ -79,7 +79,7 @@ export function Sidebar({ defaultOpenLevel = 0, prefetch = true, collapsible = t
         }, children: _jsx("div", { className: "flex w-(--fd-sidebar-width) h-full max-w-full flex-col ms-auto border-e", children: _jsx(Context.Provider, { value: context, children: props.children }) }) }));
 }
 export function SidebarHeader(props) {
-    return (_jsx("div", { ...props, className: cn('flex flex-col gap-3 px-4 pt-4 max-md:pt-6 max-md:pb-4 empty:hidden', props.className), children: props.children }));
+    return (_jsx("div", { ...props, className: cn('flex flex-col gap-3 px-4 pt-4 max-md:pt-6 empty:hidden', props.className), children: props.children }));
 }
 export function SidebarFooter(props) {
     return (_jsx("div", { ...props, className: cn('flex flex-col border-t px-4 py-3 empty:hidden max-md:pb-6', props.className), children: props.children }));

package/dist/layouts/home/menu.js

@@ -41,5 +41,5 @@ export function MenuTrigger({ enableHover = false, ...props }) {
         }), props.className), children: props.children }));
 }
 export function MenuContent(props) {
-    return (_jsx(NavigationMenuContent, { ...props, className: cn('flex flex-col p-4', props.className), children: props.children }));
+    return (_jsx(NavigationMenuContent, { ...props, className: cn('flex flex-col px-4 pb-4', props.className), children: props.children }));
 }

package/dist/layouts/notebook.js

@@ -38,7 +38,7 @@ export function DocsLayout(props) {
                                                     color: 'ghost',
                                                     size: 'icon-sm',
                                                     className: 'text-fd-muted-foreground mb-auto',
-                                                })), children: _jsx(SidebarIcon, {}) }))] })), nav.children, sidebarBanner, tabMode === 'sidebar' && tabs.length > 0 ? (_jsx(RootToggle, { options: tabs })) : null] }), _jsxs(SidebarViewport, { children: [tabMode === 'navbar' &&
+                                                })), children: _jsx(SidebarIcon, {}) }))] })), nav.children, sidebarBanner, tabMode === 'sidebar' && tabs.length > 0 ? (_jsx(RootToggle, { className: "mb-2", options: tabs })) : null] }), _jsxs(SidebarViewport, { children: [tabMode === 'navbar' &&
                                         tabs.map((tab, i) => (_jsx(SidebarLayoutTab, { item: tab, className: cn('lg:hidden', i === tabs.length - 1 && 'mb-4') }, tab.url))), links.map((item, i) => (_jsx(SidebarLinkItem, { item: item, className: cn('lg:hidden', i === links.length - 1 && 'mb-4') }, i))), _jsx(SidebarPageTree, { components: sidebarComponents })] }), _jsxs(SidebarFooter, { className: cn('flex flex-row items-center', !sidebarFooter && 'md:hidden'), children: [i18n ? (_jsx(LanguageToggle, { className: "me-auto md:hidden", children: _jsx(Languages, { className: "size-5 text-fd-muted-foreground" }) })) : null, slot(themeSwitch, _jsx(ThemeToggle, { className: "md:hidden", mode: themeSwitch?.mode ?? 'light-dark-system' })), sidebarFooter] })] }), _jsx(DocsNavbar, { ...props, links: links, tabs: tabMode == 'navbar' ? tabs : [] }), _jsx(StylesProvider, { ...pageStyles, children: props.children })] }) }) }));
 }
 function DocsNavbar({ links, tabs, ...props }) {

package/dist/page-client.js

@@ -21,7 +21,7 @@ export function TocPopoverTrigger({ items, ...props }) {
     const selected = useMemo(() => items.findIndex((item) => active === item.url.slice(1)), [items, active]);
     const path = useTreePath().at(-1);
     const showItem = selected !== -1 && !open;
-    return (_jsxs(CollapsibleTrigger, { ...props, className: cn('flex flex-row items-center text-sm text-fd-muted-foreground gap-2.5 px-4 py-2.5 text-start focus-visible:outline-none [&_svg]:shrink-0 [&_svg]:size-4 md:px-6', props.className), children: [_jsx(ProgressCircle, { value: (selected + 1) / items.length, max: 1, className: cn(open && 'text-fd-primary') }), _jsxs("span", { className: "grid flex-1 *:row-start-1 *:col-start-1", children: [_jsx("span", { className: cn('truncate transition-all', open && 'text-fd-foreground', showItem && 'opacity-0 -translate-y-full pointer-events-none'), children: path?.name ?? text.toc }), _jsx("span", { className: cn('truncate transition-all', !showItem && 'opacity-0 translate-y-full pointer-events-none'), children: items[selected]?.title })] }), _jsx(ChevronDown, { className: cn('opacity-50 transition-transform', open && 'rotate-180') })] }));
+    return (_jsxs(CollapsibleTrigger, { ...props, className: cn('flex flex-row items-center text-sm text-fd-muted-foreground gap-2.5 px-4 py-2.5 text-start focus-visible:outline-none [&_svg]:shrink-0 [&_svg]:size-4 md:px-6', props.className), children: [_jsx(ProgressCircle, { value: (selected + 1) / items.length, max: 1, className: cn(open && 'text-fd-primary') }), _jsxs("span", { className: "grid flex-1 *:row-start-1 *:col-start-1", children: [_jsx("span", { className: cn('truncate transition-all', open && 'text-fd-foreground', showItem && 'opacity-0 -translate-y-full pointer-events-none'), children: path?.name ?? text.toc }), _jsx("span", { className: cn('truncate transition-all', !showItem && 'opacity-0 translate-y-full pointer-events-none'), children: items[selected]?.title })] }), _jsx(ChevronDown, { className: cn('transition-transform', open && 'rotate-180') })] }));
 }
 function clamp(input, min, max) {
     if (input < min)

package/dist/style.css

@@ -1421,6 +1421,9 @@
   .py-3 {
     padding-block: calc(var(--spacing) * 3);
   }
+  .py-3\.5 {
+    padding-block: calc(var(--spacing) * 3.5);
+  }
   .py-8 {
     padding-block: calc(var(--spacing) * 8);
   }
@@ -1472,6 +1475,9 @@
   .pb-2 {
     padding-bottom: calc(var(--spacing) * 2);
   }
+  .pb-4 {
+    padding-bottom: calc(var(--spacing) * 4);
+  }
   .pb-6 {
     padding-bottom: calc(var(--spacing) * 6);
   }
@@ -1587,9 +1593,6 @@
   .opacity-0 {
     opacity: 0%;
   }
-  .opacity-50 {
-    opacity: 50%;
-  }
   .shadow-lg {
     --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -2030,11 +2033,6 @@
       padding-top: calc(var(--spacing) * 6);
     }
   }
-  .max-md\:pb-4 {
-    @media (width < 48rem) {
-      padding-bottom: calc(var(--spacing) * 4);
-    }
-  }
   .max-md\:pb-6 {
     @media (width < 48rem) {
       padding-bottom: calc(var(--spacing) * 6);
@@ -2270,6 +2268,16 @@
       background-color: var(--shiki-dark-bg);
     }
   }
+  .\[\&_\.line\]\:px-4 {
+    & .line {
+      padding-inline: calc(var(--spacing) * 4);
+    }
+  }
+  .\[\&_\.line\]\:pl-3 {
+    & .line {
+      padding-left: calc(var(--spacing) * 3);
+    }
+  }
   .\[\&_svg\]\:\!size-4\.5 {
     & svg {
       width: calc(var(--spacing) * 4.5) !important;
@@ -2357,9 +2365,33 @@
   code span {
     color: var(--shiki-light);
   }
+  code .line {
+    min-height: 1em;
+    position: relative;
+    display: inline-block;
+    width: 100%;
+  }
+  &[data-line-numbers] code .twoslash-meta-line {
+    margin-left: calc(var(--spacing) * 7);
+  }
+  &[data-line-numbers] code .line {
+    width: calc(100% - 7 * var(--spacing));
+    counter-increment: line;
+    margin-left: calc(var(--spacing) * 7);
+    &::after {
+      position: absolute;
+      content: counter(line);
+      top: calc(var(--spacing) * 0);
+      left: calc(var(--spacing) * -5);
+      color: color-mix(in srgb, hsl(0, 0%, 45.1%) 60%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        color: color-mix(in oklab, var(--color-fd-muted-foreground) 60%, transparent);
+      }
+    }
+  }
   code .diff::before {
     position: absolute;
-    left: 6px;
+    left: var(--spacing);
   }
   code .diff.remove {
     opacity: 0.7;
@@ -2377,21 +2409,13 @@
     color: var(--color-fd-diff-add-symbol);
   }
   code .diff {
-    width: calc(100% + 8 * var(--spacing));
     position: relative;
-    margin-inline: calc(var(--spacing) * -4);
-    display: inline-block;
-    padding-inline: calc(var(--spacing) * 4);
   }
   .highlighted {
-    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);
     }
-    padding-inline: calc(var(--spacing) * 4);
   }
   .highlighted-word {
     padding: 1px 2px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fumadocs-ui",
-  "version": "15.3.0",
+  "version": "15.3.1",
   "description": "The framework for building a documentation website in Next.js",
   "keywords": [
     "NextJs",
@@ -89,7 +89,7 @@
     "react-medium-image-zoom": "^5.2.14",
     "react-remove-scroll": "^2.6.3",
     "tailwind-merge": "^3.2.0",
-    "fumadocs-core": "15.3.0"
+    "fumadocs-core": "15.3.1"
   },
   "devDependencies": {
     "@next/eslint-plugin-next": "^15.3.1",
@@ -102,7 +102,7 @@
     "tsc-alias": "^1.8.16",
     "@fumadocs/cli": "0.1.1",
     "eslint-config-custom": "0.0.0",
-    "fumadocs-core": "15.3.0",
+    "fumadocs-core": "15.3.1",
     "tsconfig": "0.0.0"
   },
   "peerDependencies": {