fumadocs-ui 15.5.5 → 15.6.0

package/css/neutral.css

@@ -30,7 +30,7 @@
   --color-fd-primary: hsl(0, 0%, 98%);
   --color-fd-primary-foreground: hsl(0, 0%, 9%);
   --color-fd-secondary: hsl(0, 0%, 12.9%);
-  --color-fd-secondary-foreground: hsl(0, 0%, 98%);
+  --color-fd-secondary-foreground: hsl(0, 0%, 92%);
   --color-fd-accent: hsla(0, 0%, 40.9%, 30%);
   --color-fd-accent-foreground: hsl(0, 0%, 90%);
   --color-fd-ring: hsl(0, 0%, 54.9%);

package/css/preset.css

@@ -3,6 +3,13 @@
 @source '../dist/**/*.js';
 @plugin '../dist/theme/typography/index.js';
 
+@theme static {
+  --color-fd-info: oklch(62.3% 0.214 259.815);
+  --color-fd-warning: oklch(76.9% 0.188 70.08);
+  --color-fd-error: oklch(63.7% 0.237 25.331);
+  --color-fd-success: oklch(72.3% 0.219 149.579);
+}
+
 @theme {
   --spacing-fd-container: 1400px;
   --fd-page-width: 1200px;
@@ -110,14 +117,14 @@
   @keyframes fd-popover-in {
     from {
       opacity: 0;
-      transform: translateY(-12px) scale(0.9);
+      transform: scale(0.7);
     }
   }
 
   @keyframes fd-popover-out {
     to {
       opacity: 0;
-      transform: translateY(-12px) scale(0.9);
+      transform: scale(0.7);
     }
   }
 

package/css/shiki.css

@@ -1,11 +1,16 @@
 .shiki:not(.not-fumadocs-codeblock *) {
+  --padding-left: calc(var(--spacing) * 3);
+  --padding-right: calc(var(--spacing) * 3);
+
   code span {
     color: var(--shiki-light);
   }
 
   code .line {
+    position: relative;
     min-height: 1lh;
-    @apply relative;
+    padding-left: var(--padding-left);
+    padding-right: var(--padding-right);
   }
 
   &.has-focused code .line:not(.focused) {
@@ -24,6 +29,7 @@
   &[data-line-numbers] code .line {
     width: calc(100% - 7 * var(--spacing));
     counter-increment: line;
+    padding-left: calc(var(--padding-left) - var(--spacing));
     @apply ml-7;
 
     &::after {

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

@@ -1 +1 @@
-{"version":3,"file":"callout.d.ts","sourceRoot":"","sources":["../../src/components/callout.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAkCxE,eAAO,MAAM,OAAO;YA1BV,SAAS;IACjB;;OAEG;WACI,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS;IAExD;;OAEG;WACI,SAAS;kDAoDjB,CAAC"}
+{"version":3,"file":"callout.d.ts","sourceRoot":"","sources":["../../src/components/callout.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAmBxE,eAAO,MAAM,OAAO;YAZV,SAAS;IACjB;;OAEG;WACI,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS;IAExD;;OAEG;WACI,SAAS;kDAyCjB,CAAC"}

package/dist/components/callout.js

@@ -2,28 +2,18 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CircleCheck, CircleX, Info, TriangleAlert } from '../icons.js';
 import { forwardRef } from 'react';
 import { cn } from '../utils/cn.js';
-import { cva } from 'class-variance-authority';
-const calloutVariants = cva('my-4 flex gap-2 rounded-lg border border-s-2 bg-fd-card p-3 text-sm text-fd-card-foreground shadow-md', {
-    variants: {
-        type: {
-            info: 'border-s-blue-500/50',
-            warn: 'border-s-amber-500/50',
-            error: 'border-s-red-500/50',
-            success: 'border-s-green-500/50',
-        },
-    },
-});
 export const Callout = forwardRef(({ className, children, title, type = 'info', icon, ...props }, ref) => {
-    if (type === 'warning')
-        type = 'warn';
-    return (_jsxs("div", { ref: ref, className: cn(calloutVariants({
-            type: type,
-        }), className), ...props, children: [icon ??
-                {
-                    info: _jsx(Info, { className: "size-5 fill-blue-500 text-fd-card" }),
-                    warn: (_jsx(TriangleAlert, { className: "size-5 fill-amber-500 text-fd-card" })),
-                    error: _jsx(CircleX, { className: "size-5 fill-red-500 text-fd-card" }),
-                    success: (_jsx(CircleCheck, { className: "size-5 fill-green-500 text-fd-card" })),
-                }[type], _jsxs("div", { className: "min-w-0 flex flex-col gap-2 flex-1", children: [title ? _jsx("p", { className: "font-medium !my-0", children: title }) : null, _jsx("div", { className: "text-fd-muted-foreground prose-no-margin empty:hidden", children: children })] })] }));
+    if (type === 'warn')
+        type = 'warning';
+    const DefaultIcon = {
+        info: Info,
+        warning: TriangleAlert,
+        error: CircleX,
+        success: CircleCheck,
+    }[type];
+    return (_jsxs("div", { ref: ref, className: cn('flex gap-2 my-4 rounded-xl border bg-fd-card p-3 ps-1 text-sm text-fd-card-foreground shadow-md', className), ...props, style: {
+            '--callout-color': `var(--color-fd-${type})`,
+            ...props.style,
+        }, children: [_jsx("div", { role: "none", className: "w-1 bg-(--callout-color)/50 rounded-sm" }), icon ?? (_jsx(DefaultIcon, { className: "size-5 -me-0.5 fill-(--callout-color) text-fd-card" })), _jsxs("div", { className: "flex flex-col gap-2 min-w-0 flex-1", children: [title ? _jsx("p", { className: "font-medium !my-0", children: title }) : null, _jsx("div", { className: "text-fd-muted-foreground prose-no-margin empty:hidden", children: children })] })] }));
 });
 Callout.displayName = 'Callout';

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

@@ -1 +1 @@
-{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../src/components/card.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvD,wBAAgB,KAAK,CAAC,KAAK,EAAE,cAAc,CAAC,cAAc,CAAC,2CAS1D;AAED,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,GAAG;IACnE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,wBAAgB,IAAI,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,2CA6BrE"}
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../src/components/card.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvD,wBAAgB,KAAK,CAAC,KAAK,EAAE,cAAc,CAAC,cAAc,CAAC,2CAS1D;AAED,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,GAAG;IACnE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,wBAAgB,IAAI,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,2CA2BrE"}

package/dist/components/card.js

@@ -2,9 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Link from 'fumadocs-core/link';
 import { cn } from '../utils/cn.js';
 export function Cards(props) {
-    return (_jsx("div", { ...props, className: cn('grid grid-cols-2 gap-4 @container', props.className), children: props.children }));
+    return (_jsx("div", { ...props, className: cn('grid grid-cols-2 gap-3 @container', props.className), children: props.children }));
 }
 export function Card({ icon, title, description, ...props }) {
     const E = props.href ? Link : 'div';
-    return (_jsxs(E, { ...props, "data-card": true, className: cn('block rounded-lg border bg-fd-card p-4 text-fd-card-foreground shadow-md transition-colors @max-lg:col-span-full', props.href && 'hover:bg-fd-accent/80', props.className), children: [icon ? (_jsx("div", { className: "not-prose mb-2 w-fit rounded-md border bg-fd-muted p-1.5 text-fd-muted-foreground [&_svg]:size-4", children: icon })) : null, _jsx("h3", { className: "not-prose mb-1 text-sm font-medium", children: title }), description ? (_jsx("p", { className: "!my-0 text-sm text-fd-muted-foreground", children: description })) : null, props.children ? (_jsx("div", { className: "text-sm text-fd-muted-foreground prose-no-margin", children: props.children })) : null] }));
+    return (_jsxs(E, { ...props, "data-card": true, className: cn('block rounded-xl border bg-fd-card p-4 text-fd-card-foreground transition-colors @max-lg:col-span-full', props.href && 'hover:bg-fd-accent/80', props.className), children: [icon ? (_jsx("div", { className: "not-prose mb-2 w-fit shadow-md rounded-lg border bg-fd-muted p-1.5 text-fd-muted-foreground [&_svg]:size-4", children: icon })) : null, _jsx("h3", { className: "not-prose mb-1 text-sm font-medium", children: title }), description ? (_jsx("p", { className: "!my-0 text-sm text-fd-muted-foreground", children: description })) : null, _jsx("div", { className: "text-sm text-fd-muted-foreground prose-no-margin empty:hidden", children: props.children })] }));
 }

package/dist/components/codeblock.d.ts

@@ -1,5 +1,6 @@
-import { type HTMLAttributes, type ReactNode } from 'react';
-export type CodeBlockProps = HTMLAttributes<HTMLElement> & {
+import { type ComponentProps, type HTMLAttributes, type ReactNode } from 'react';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '../components/tabs.unstyled.js';
+export interface CodeBlockProps extends ComponentProps<'figure'> {
     /**
      * Icon of code block
      *
@@ -27,35 +28,15 @@ export type CodeBlockProps = HTMLAttributes<HTMLElement> & {
      * @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> & {
-    /**
-     * Icon of code block
-     *
-     * When passed as a string, it assumes the value is the HTML of icon
-     */
-    icon?: ReactNode;
-    /**
-     * Allow to copy code with copy button
-     *
-     * @defaultValue true
-     */
-    allowCopy?: boolean;
-    /**
-     * Keep original background color generated by Shiki or Rehype Code
-     *
-     * @defaultValue false
-     */
-    keepBackground?: boolean;
-    viewportProps?: HTMLAttributes<HTMLElement>;
-    /**
-     * show line numbers
-     */
-    'data-line-numbers'?: boolean;
-    /**
-     * @defaultValue 1
-     */
-    'data-line-numbers-start'?: number;
-} & import("react").RefAttributes<HTMLElement>>;
+    Actions?: (props: {
+        className?: string;
+        children?: ReactNode;
+    }) => ReactNode;
+}
+export declare function Pre(props: ComponentProps<'pre'>): import("react/jsx-runtime").JSX.Element;
+export declare function CodeBlock({ ref, title, allowCopy, keepBackground, icon, viewportProps, children, Actions, ...props }: CodeBlockProps): import("react/jsx-runtime").JSX.Element;
+export declare function CodeBlockTabs({ ref, ...props }: ComponentProps<typeof Tabs>): import("react/jsx-runtime").JSX.Element;
+export declare function CodeBlockTabsList(props: ComponentProps<typeof TabsList>): import("react/jsx-runtime").JSX.Element;
+export declare function CodeBlockTabsTrigger({ children, ...props }: ComponentProps<typeof TabsTrigger>): import("react/jsx-runtime").JSX.Element;
+export declare const CodeBlockTab: (props: ComponentProps<typeof TabsContent>) => import("react/jsx-runtime").JSX.Element;
 //# 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;AAKf,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,cAAc,CAAC,WAAW,CAAC,CAAC;IAE5C;;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,cAAc,CAAC,WAAW,CAAC;IAE3C;;OAEG;0BACmB,OAAO;IAE7B;;OAEG;gCACyB,MAAM;+CAyGnC,CAAC"}
+{"version":3,"file":"codeblock.d.ts","sourceRoot":"","sources":["../../src/components/codeblock.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,cAAc,EAEnB,KAAK,cAAc,EACnB,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AAIf,OAAO,EACL,IAAI,EACJ,WAAW,EACX,QAAQ,EACR,WAAW,EACZ,MAAM,4BAA4B,CAAC;AAGpC,MAAM,WAAW,cAAe,SAAQ,cAAc,CAAC,QAAQ,CAAC;IAC9D;;;;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,cAAc,CAAC,WAAW,CAAC,CAAC;IAE5C;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B;;OAEG;IACH,yBAAyB,CAAC,EAAE,MAAM,CAAC;IAEnC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,SAAS,CAAA;KAAE,KAAK,SAAS,CAAC;CAC9E;AAOD,wBAAgB,GAAG,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,2CAS/C;AAED,wBAAgB,SAAS,CAAC,EACxB,GAAG,EACH,KAAK,EACL,SAAS,EACT,cAAsB,EACtB,IAAI,EACJ,aAAkB,EAClB,QAAQ,EACR,OAEC,EACD,GAAG,KAAK,EACT,EAAE,cAAc,2CAwEhB;AAwCD,wBAAgB,aAAa,CAAC,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,2CA2B3E;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,QAAQ,CAAC,2CAoBvE;AAED,wBAAgB,oBAAoB,CAAC,EACnC,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,WAAW,CAAC,2CAapC;AAED,eAAO,MAAM,YAAY,GAAI,OAAO,cAAc,CAAC,OAAO,WAAW,CAAC,4CAErE,CAAC"}

package/dist/components/codeblock.js

@@ -1,18 +1,40 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Check, Copy } from '../icons.js';
-import { forwardRef, useRef, } from 'react';
+import { createContext, useContext, useMemo, useRef, } from 'react';
 import { cn } from '../utils/cn.js';
 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('min-w-full w-max *:flex *:flex-col', className), ...props, children: props.children }));
-});
-Pre.displayName = 'Pre';
-export const CodeBlock = forwardRef(({ title, allowCopy = true, keepBackground = false, icon, viewportProps, children, ...props }, ref) => {
+import { Tabs, TabsContent, TabsList, TabsTrigger, } from '../components/tabs.unstyled.js';
+import { mergeRefs } from '../utils/merge-refs.js';
+const TabsContext = createContext(null);
+export function Pre(props) {
+    return (_jsx("pre", { ...props, className: cn('min-w-full w-max *:flex *:flex-col', props.className), children: props.children }));
+}
+export function CodeBlock({ ref, title, allowCopy, keepBackground = false, icon, viewportProps = {}, children, Actions = (props) => (_jsx("div", { ...props, className: cn('empty:hidden', props.className) })), ...props }) {
+    const isTab = useContext(TabsContext) !== null;
     const areaRef = useRef(null);
-    const onCopy = () => {
-        const pre = areaRef.current?.getElementsByTagName('pre').item(0);
+    allowCopy ?? (allowCopy = !isTab);
+    const bg = cn('bg-fd-secondary', keepBackground && 'bg-(--shiki-light-bg) dark:bg-(--shiki-dark-bg)');
+    return (_jsxs("figure", { ref: ref, dir: "ltr", ...props, className: cn(isTab ? [bg, 'rounded-lg shadow-sm'] : 'my-4 rounded-xl bg-fd-card p-1', 'shiki relative border outline-none not-prose overflow-hidden text-sm', props.className), children: [title ? (_jsxs("div", { className: cn('flex text-fd-muted-foreground items-center gap-2 ps-3 h-9.5', isTab && 'border-b'), children: [typeof icon === 'string' ? (_jsx("div", { className: "[&_svg]:size-3.5", dangerouslySetInnerHTML: {
+                            __html: icon,
+                        } })) : (icon), _jsx("figcaption", { className: "flex-1 truncate", children: title }), Actions({
+                        children: allowCopy && _jsx(CopyButton, { containerRef: areaRef }),
+                    })] })) : (Actions({
+                className: 'absolute top-1 right-1 z-2 bg-fd-card rounded-bl-lg border-l border-b text-fd-muted-foreground',
+                children: allowCopy && _jsx(CopyButton, { containerRef: areaRef }),
+            })), _jsx("div", { ref: areaRef, ...viewportProps, className: cn(!isTab && [bg, 'rounded-lg border'], 'text-[13px] py-3.5 overflow-auto max-h-[600px] fd-scroll-container', viewportProps.className), style: {
+                    // space for toolbar
+                    '--padding-right': !title ? 'calc(var(--spacing) * 8)' : undefined,
+                    counterSet: props['data-line-numbers']
+                        ? `line ${Number(props['data-line-numbers-start'] ?? 1) - 1}`
+                        : undefined,
+                    ...viewportProps.style,
+                }, children: children })] }));
+}
+function CopyButton({ className, containerRef, ...props }) {
+    const [checked, onClick] = useCopyButton(() => {
+        const pre = containerRef.current?.getElementsByTagName('pre').item(0);
         if (!pre)
             return;
         const clone = pre.cloneNode(true);
@@ -20,22 +42,25 @@ export const CodeBlock = forwardRef(({ title, allowCopy = true, keepBackground =
             node.replaceWith('\n');
         });
         void navigator.clipboard.writeText(clone.textContent ?? '');
-    };
-    return (_jsxs("figure", { ref: ref, dir: "ltr", ...props, className: cn('not-prose group relative my-4 overflow-hidden rounded-lg border bg-fd-card text-sm outline-none', keepBackground && 'bg-(--shiki-light-bg) dark:bg-(--shiki-dark-bg)', props.className), children: [title ? (_jsxs("div", { className: "flex items-center gap-2 bg-fd-secondary px-4 py-1.5", children: [icon ? (_jsx("div", { className: "text-fd-muted-foreground [&_svg]:size-3.5", dangerouslySetInnerHTML: typeof icon === 'string'
-                            ? {
-                                __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 })] })) : (allowCopy && (_jsx(CopyButton, { className: "absolute right-2 top-2 z-[2] backdrop-blur-md", onCopy: onCopy }))), _jsx("div", { ref: areaRef, ...viewportProps, className: cn('text-[13px] py-3.5 overflow-auto [&_.line]:px-4 max-h-[600px] fd-scroll-container', 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 })] }));
-});
-CodeBlock.displayName = 'CodeBlock';
-function CopyButton({ className, onCopy, ...props }) {
-    const [checked, onClick] = useCopyButton(onCopy);
-    return (_jsxs("button", { type: "button", className: cn(buttonVariants({
+    });
+    return (_jsx("button", { type: "button", className: cn(buttonVariants({
             color: 'ghost',
-        }), 'transition-opacity group-hover:opacity-100 [&_svg]:size-3.5', !checked && '[@media(hover:hover)]:opacity-0', className), "aria-label": checked ? 'Copied Text' : 'Copy Text', onClick: onClick, ...props, children: [_jsx(Check, { className: cn('transition-transform', !checked && 'scale-0') }), _jsx(Copy, { className: cn('absolute transition-transform', checked && 'scale-0') })] }));
+            className: '[&_svg]:size-3.5',
+        }), className), "aria-label": checked ? 'Copied Text' : 'Copy Text', onClick: onClick, ...props, children: checked ? _jsx(Check, {}) : _jsx(Copy, {}) }));
+}
+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 p-1 rounded-xl border overflow-hidden', !nested && 'my-4', props.className), children: _jsx(TabsContext.Provider, { value: useMemo(() => ({
+                containerRef,
+                nested,
+            }), [nested]), children: props.children }) }));
+}
+export function CodeBlockTabsList(props) {
+    const { containerRef, nested } = useContext(TabsContext);
+    return (_jsxs(TabsList, { ...props, className: cn('flex flex-row overflow-x-auto px-1 -mx-1 text-fd-muted-foreground', props.className), children: [props.children, !nested && (_jsx(CopyButton, { className: "sticky ms-auto right-0 bg-fd-card backdrop-blur-sm", containerRef: containerRef }))] }));
+}
+export function CodeBlockTabsTrigger({ children, ...props }) {
+    return (_jsxs(TabsTrigger, { ...props, className: cn('relative group inline-flex text-sm font-medium items-center gap-2 px-2 first:ms-1 py-1.5 hover:text-fd-accent-foreground data-[state=active]:text-fd-primary [&_svg]:size-3.5', props.className), children: [_jsx("div", { className: "absolute inset-x-2 bottom-0 h-px group-data-[state=active]:bg-fd-primary" }), children] }));
 }
+export const CodeBlockTab = (props) => (_jsx(TabsContent, { ...props, asChild: true }));

package/dist/components/layout/sidebar.js

@@ -208,5 +208,5 @@ function getOffset(level) {
 function Border({ level, active }) {
     if (level <= 1)
         return null;
-    return (_jsx("div", { className: cn('absolute w-px inset-y-3 z-[2] start-2.5 md:inset-y-2', active && 'bg-fd-primary') }));
+    return (_jsx("div", { className: cn('absolute w-px inset-y-3 z-2 start-2.5 md:inset-y-2', active && 'bg-fd-primary') }));
 }

package/dist/components/tabs.d.ts

@@ -1,18 +1,7 @@
+import * as React from 'react';
 import { type ComponentProps, type ReactNode } from 'react';
-import * as Primitive from './ui/tabs.js';
-export interface TabsProps extends ComponentProps<typeof Primitive.Tabs> {
-    /**
-     * Identifier for Sharing value of tabs
-     */
-    groupId?: string;
-    /**
-     * Enable persistent
-     */
-    persist?: boolean;
-    /**
-     * If true, updates the URL hash based on the tab's id
-     */
-    updateAnchor?: boolean;
+import * as Unstyled from './tabs.unstyled.js';
+export interface TabsProps extends Omit<ComponentProps<typeof Unstyled.Tabs>, 'value' | 'onValueChange'> {
     /**
      * Use simple mode instead of advanced usage as documented in https://radix-ui.com/primitives/docs/components/tabs.
      */
@@ -28,15 +17,15 @@ export interface TabsProps extends ComponentProps<typeof Primitive.Tabs> {
      */
     label?: ReactNode;
 }
-export declare const TabsList: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-tabs").TabsListProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export declare const TabsTrigger: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-tabs").TabsTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-export declare function Tabs({ ref, className, groupId, items, persist, label, defaultIndex, updateAnchor, defaultValue, ...props }: TabsProps): import("react/jsx-runtime").JSX.Element;
-export interface TabProps extends Omit<ComponentProps<typeof Primitive.TabsContent>, 'value'> {
+export declare const TabsList: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-tabs").TabsListProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-tabs").TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare function Tabs({ ref, className, items, label, defaultIndex, defaultValue, ...props }: TabsProps): import("react/jsx-runtime").JSX.Element;
+export interface TabProps extends Omit<ComponentProps<typeof Unstyled.TabsContent>, 'value'> {
     /**
      * Value of tab, detect from index if unspecified.
      */
     value?: string;
 }
 export declare function Tab({ value, ...props }: TabProps): import("react/jsx-runtime").JSX.Element;
-export declare function TabsContent({ value, className, ...props }: ComponentProps<typeof Primitive.TabsContent>): import("react/jsx-runtime").JSX.Element;
+export declare function TabsContent({ value, className, ...props }: ComponentProps<typeof Unstyled.TabsContent>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=tabs.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/components/tabs.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,cAAc,EAEnB,KAAK,SAAS,EAQf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,SAAS,MAAM,WAAW,CAAC;AAsBvC,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,OAAO,SAAS,CAAC,IAAI,CAAC;IACtE;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IAEjB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAcD,eAAO,MAAM,QAAQ,sMAAqB,CAAC;AAC3C,eAAO,MAAM,WAAW,+MAAwB,CAAC;AAEjD,wBAAgB,IAAI,CAAC,EACnB,GAAG,EACH,SAAS,EACT,OAAO,EACP,KAAK,EACL,OAAe,EACf,KAAK,EACL,YAAgB,EAChB,YAAoB,EACpB,YAAmE,EACnE,GAAG,KAAK,EACT,EAAE,SAAS,2CAsFX;AAED,MAAM,WAAW,QACf,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IACnE;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,GAAG,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,QAAQ,2CAgBhD;AAED,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,SAAS,CAAC,WAAW,CAAC,2CAoB9C"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/components/tabs.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACL,KAAK,cAAc,EAEnB,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,QAAQ,MAAM,iBAAiB,CAAC;AAI5C,MAAM,WAAW,SACf,SAAQ,IAAI,CACV,cAAc,CAAC,OAAO,QAAQ,CAAC,IAAI,CAAC,EACpC,OAAO,GAAG,eAAe,CAC1B;IACD;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IAEjB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAaD,eAAO,MAAM,QAAQ,wKAYnB,CAAC;AAGH,eAAO,MAAM,WAAW,iLAYtB,CAAC;AAGH,wBAAgB,IAAI,CAAC,EACnB,GAAG,EACH,SAAS,EACT,KAAK,EACL,KAAK,EACL,YAAgB,EAChB,YAAmE,EACnE,GAAG,KAAK,EACT,EAAE,SAAS,2CAqCX;AAED,MAAM,WAAW,QACf,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IAClE;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,GAAG,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,QAAQ,2CAgBhD;AAED,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,QAAQ,CAAC,WAAW,CAAC,2CAc7C"}

package/dist/components/tabs.js

@@ -1,20 +1,9 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createContext, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, } from 'react';
+import * as React from 'react';
+import { createContext, useContext, useEffect, useId, useMemo, useState, } from 'react';
 import { cn } from '../utils/cn.js';
-import * as Primitive from './ui/tabs.js';
-import { useEffectEvent } from 'fumadocs-core/utils/use-effect-event';
-import { mergeRefs } from '../utils/merge-refs.js';
-const listeners = new Map();
-function addChangeListener(id, listener) {
-    const list = listeners.get(id) ?? [];
-    list.push(listener);
-    listeners.set(id, list);
-}
-function removeChangeListener(id, listener) {
-    const list = listeners.get(id) ?? [];
-    listeners.set(id, list.filter((item) => item !== listener));
-}
+import * as Unstyled from './tabs.unstyled.js';
 const TabsContext = createContext(null);
 function useTabContext() {
     const ctx = useContext(TabsContext);
@@ -22,63 +11,18 @@ function useTabContext() {
         throw new Error('You must wrap your component in <Tabs>');
     return ctx;
 }
-export const TabsList = Primitive.TabsList;
-export const TabsTrigger = Primitive.TabsTrigger;
-export function Tabs({ ref, className, groupId, items, persist = false, label, defaultIndex = 0, updateAnchor = false, defaultValue = items ? escapeValue(items[defaultIndex]) : undefined, ...props }) {
-    const tabsRef = useRef(null);
+export const TabsList = React.forwardRef((props, ref) => (_jsx(Unstyled.TabsList, { ref: ref, ...props, className: cn('flex gap-3.5 text-fd-secondary-foreground overflow-x-auto px-4 not-prose', props.className) })));
+TabsList.displayName = 'TabsList';
+export const TabsTrigger = React.forwardRef((props, ref) => (_jsx(Unstyled.TabsTrigger, { ref: ref, ...props, className: cn('inline-flex items-center gap-2 whitespace-nowrap text-fd-muted-foreground border-b border-transparent py-2 text-sm font-medium transition-colors [&_svg]:size-4 hover:text-fd-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=active]:border-fd-primary data-[state=active]:text-fd-primary', props.className) })));
+TabsTrigger.displayName = 'TabsTrigger';
+export function Tabs({ ref, className, items, label, defaultIndex = 0, defaultValue = items ? escapeValue(items[defaultIndex]) : undefined, ...props }) {
     const [value, setValue] = useState(defaultValue);
-    const valueToIdMap = useMemo(() => new Map(), []);
     const collection = useMemo(() => [], []);
-    const onUpdate = useEffectEvent((v) => {
-        if (items && !items.some((item) => escapeValue(item) === v))
-            return;
-        setValue(v);
-    });
-    useLayoutEffect(() => {
-        if (!groupId)
-            return;
-        const previous = persist
-            ? localStorage.getItem(groupId)
-            : sessionStorage.getItem(groupId);
-        if (previous)
-            onUpdate(previous);
-        addChangeListener(groupId, onUpdate);
-        return () => {
-            removeChangeListener(groupId, onUpdate);
-        };
-    }, [groupId, onUpdate, persist]);
-    useLayoutEffect(() => {
-        const hash = window.location.hash.slice(1);
-        if (!hash)
-            return;
-        for (const [value, id] of valueToIdMap.entries()) {
-            if (id === hash) {
-                setValue(value);
-                tabsRef.current?.scrollIntoView();
-                break;
-            }
-        }
-    }, [valueToIdMap]);
-    return (_jsxs(Primitive.Tabs, { ref: mergeRefs(ref, tabsRef), value: value, onValueChange: (v) => {
-            if (updateAnchor) {
-                const id = valueToIdMap.get(v);
-                if (id) {
-                    window.history.replaceState(null, '', `#${id}`);
-                }
-            }
-            if (groupId) {
-                listeners.get(groupId)?.forEach((item) => {
-                    item(v);
-                });
-                if (persist)
-                    localStorage.setItem(groupId, v);
-                else
-                    sessionStorage.setItem(groupId, v);
-            }
-            else {
-                setValue(v);
-            }
-        }, className: cn('my-4', className), ...props, children: [items && (_jsxs(TabsList, { children: [label && (_jsx("span", { className: "text-sm font-medium my-auto me-auto", children: label })), items.map((item) => (_jsx(TabsTrigger, { value: escapeValue(item), children: item }, item)))] })), _jsx(TabsContext.Provider, { value: useMemo(() => ({ items, valueToIdMap, collection }), [valueToIdMap, collection, items]), children: props.children })] }));
+    return (_jsxs(Unstyled.Tabs, { ref: ref, className: cn('flex flex-col overflow-hidden rounded-xl border bg-fd-secondary my-4', className), value: value, onValueChange: (v) => {
+            if (items && !items.some((item) => escapeValue(item) === v))
+                return;
+            setValue(v);
+        }, ...props, children: [items && (_jsxs(TabsList, { children: [label && (_jsx("span", { className: "text-sm font-medium my-auto me-auto", children: label })), items.map((item) => (_jsx(TabsTrigger, { value: escapeValue(item), children: item }, item)))] })), _jsx(TabsContext.Provider, { value: useMemo(() => ({ items, collection }), [collection, items]), children: props.children })] }));
 }
 export function Tab({ value, ...props }) {
     const { items } = useTabContext();
@@ -90,11 +34,7 @@ export function Tab({ value, ...props }) {
     return (_jsx(TabsContent, { value: escapeValue(resolved), ...props, children: props.children }));
 }
 export function TabsContent({ value, className, ...props }) {
-    const { valueToIdMap } = useTabContext();
-    if (props.id) {
-        valueToIdMap.set(value, props.id);
-    }
-    return (_jsx(Primitive.TabsContent, { value: value, forceMount: true, className: cn('prose-no-margin data-[state=inactive]:hidden [&>figure:only-child]:-m-4 [&>figure:only-child]:border-none', className), ...props, children: props.children }));
+    return (_jsx(Unstyled.TabsContent, { value: value, forceMount: true, className: cn('p-4 text-[15px] bg-fd-background rounded-xl outline-none prose-no-margin data-[state=inactive]:hidden [&>figure:only-child]:-m-4 [&>figure:only-child]:border-none', className), ...props, children: props.children }));
 }
 /**
  * Inspired by Headless UI.
@@ -116,6 +56,9 @@ function useCollectionIndex() {
         collection.push(key);
     return collection.indexOf(key);
 }
+/**
+ * only escape whitespaces in values in simple mode
+ */
 function escapeValue(v) {
     return v.toLowerCase().replace(/\s/, '-');
 }

package/dist/components/tabs.unstyled.d.ts

@@ -0,0 +1,24 @@
+import { type ComponentProps } from 'react';
+import * as Primitive from '@radix-ui/react-tabs';
+export interface TabsProps extends ComponentProps<typeof Primitive.Tabs> {
+    /**
+     * Identifier for Sharing value of tabs
+     */
+    groupId?: string;
+    /**
+     * Enable persistent
+     */
+    persist?: boolean;
+    /**
+     * If true, updates the URL hash based on the tab's id
+     */
+    updateAnchor?: boolean;
+}
+export declare const TabsList: import("react").ForwardRefExoticComponent<Primitive.TabsListProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const TabsTrigger: import("react").ForwardRefExoticComponent<Primitive.TabsTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+/**
+ * @internal You better not use it
+ */
+export declare function Tabs({ ref, groupId, persist, updateAnchor, defaultValue, value: _value, onValueChange: _onValueChange, ...props }: TabsProps): import("react/jsx-runtime").JSX.Element;
+export declare function TabsContent({ value, ...props }: ComponentProps<typeof Primitive.TabsContent>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=tabs.unstyled.d.ts.map

package/dist/components/tabs.unstyled.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.unstyled.d.ts","sourceRoot":"","sources":["../../src/components/tabs.unstyled.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,cAAc,EAOpB,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,SAAS,MAAM,sBAAsB,CAAC;AAqBlD,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,OAAO,SAAS,CAAC,IAAI,CAAC;IACtE;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAYD,eAAO,MAAM,QAAQ,oHAAqB,CAAC;AAE3C,eAAO,MAAM,WAAW,0HAAwB,CAAC;AAEjD;;GAEG;AACH,wBAAgB,IAAI,CAAC,EACnB,GAAG,EACH,OAAO,EACP,OAAe,EACf,YAAoB,EACpB,YAAY,EACZ,KAAK,EAAE,MAAM,EACb,aAAa,EAAE,cAAc,EAC7B,GAAG,KAAK,EACT,EAAE,SAAS,2CAsEX;AAED,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,SAAS,CAAC,WAAW,CAAC,2CAY9C"}

package/dist/components/tabs.unstyled.js

@@ -0,0 +1,89 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useLayoutEffect, useMemo, useRef, useState, } from 'react';
+import * as Primitive from '@radix-ui/react-tabs';
+import { mergeRefs } from '../utils/merge-refs.js';
+import { useEffectEvent } from 'fumadocs-core/utils/use-effect-event';
+const listeners = new Map();
+function addChangeListener(id, listener) {
+    const list = listeners.get(id) ?? [];
+    list.push(listener);
+    listeners.set(id, list);
+}
+function removeChangeListener(id, listener) {
+    const list = listeners.get(id) ?? [];
+    listeners.set(id, list.filter((item) => item !== listener));
+}
+const TabsContext = createContext(null);
+function useTabContext() {
+    const ctx = useContext(TabsContext);
+    if (!ctx)
+        throw new Error('You must wrap your component in <Tabs>');
+    return ctx;
+}
+export const TabsList = Primitive.TabsList;
+export const TabsTrigger = Primitive.TabsTrigger;
+/**
+ * @internal You better not use it
+ */
+export function Tabs({ ref, groupId, persist = false, updateAnchor = false, defaultValue, value: _value, onValueChange: _onValueChange, ...props }) {
+    const tabsRef = useRef(null);
+    const [value, setValue] = _value === undefined
+        ? // eslint-disable-next-line react-hooks/rules-of-hooks -- not supposed to change controlled/uncontrolled
+            useState(defaultValue)
+        : [_value, _onValueChange ?? (() => undefined)];
+    const onChange = useEffectEvent((v) => setValue(v));
+    const valueToIdMap = useMemo(() => new Map(), []);
+    useLayoutEffect(() => {
+        if (!groupId)
+            return;
+        const previous = persist
+            ? localStorage.getItem(groupId)
+            : sessionStorage.getItem(groupId);
+        if (previous)
+            onChange(previous);
+        addChangeListener(groupId, onChange);
+        return () => {
+            removeChangeListener(groupId, onChange);
+        };
+    }, [groupId, onChange, persist]);
+    useLayoutEffect(() => {
+        const hash = window.location.hash.slice(1);
+        if (!hash)
+            return;
+        for (const [value, id] of valueToIdMap.entries()) {
+            if (id === hash) {
+                onChange(value);
+                tabsRef.current?.scrollIntoView();
+                break;
+            }
+        }
+    }, [onChange, valueToIdMap]);
+    return (_jsx(Primitive.Tabs, { ref: mergeRefs(ref, tabsRef), value: value, onValueChange: (v) => {
+            if (updateAnchor) {
+                const id = valueToIdMap.get(v);
+                if (id) {
+                    window.history.replaceState(null, '', `#${id}`);
+                }
+            }
+            if (groupId) {
+                listeners.get(groupId)?.forEach((item) => {
+                    item(v);
+                });
+                if (persist)
+                    localStorage.setItem(groupId, v);
+                else
+                    sessionStorage.setItem(groupId, v);
+            }
+            else {
+                setValue(v);
+            }
+        }, ...props, children: _jsx(TabsContext.Provider, { value: useMemo(() => ({ valueToIdMap }), [valueToIdMap]), children: props.children }) }));
+}
+export function TabsContent({ value, ...props }) {
+    const { valueToIdMap } = useTabContext();
+    if (props.id) {
+        valueToIdMap.set(value, props.id);
+    }
+    return (_jsx(Primitive.TabsContent, { value: value, ...props, children: props.children }));
+}

package/dist/layouts/docs.js

@@ -22,17 +22,17 @@ export function DocsLayout({ nav: { transparentMode, ...nav } = {}, sidebar: { t
     const variables = cn('md:[--fd-sidebar-width:268px] lg:[--fd-sidebar-width:286px] xl:[--fd-toc-width:286px]', !nav.component && nav.enabled !== false
         ? '[--fd-nav-height:56px] md:[--fd-nav-height:0px]'
         : undefined);
-    const sidebar = sidebarComponent ?? (_jsxs(_Fragment, { children: [sidebarCollapsible ? _jsx(CollapsibleControl, {}) : null, _jsxs(Sidebar, { ...sidebarProps, collapsible: sidebarCollapsible, children: [_jsx(HideIfEmpty, { children: _jsxs(SidebarHeader, { children: [_jsxs("div", { className: "flex max-md:hidden", children: [_jsx(Link, { href: nav.url ?? '/', className: "inline-flex text-[15px] items-center gap-2.5 font-medium me-auto", children: nav.title }), nav.children, sidebarCollapsible && (_jsx(SidebarCollapseTrigger, { className: cn(buttonVariants({
+    const sidebar = sidebarComponent ?? (_jsxs(_Fragment, { children: [sidebarCollapsible ? _jsx(CollapsibleControl, {}) : null, _jsxs(Sidebar, { ...sidebarProps, collapsible: sidebarCollapsible, children: [_jsx(HideIfEmpty, { children: _jsxs(SidebarHeader, { className: "data-[empty=true]:hidden", children: [_jsxs("div", { className: "flex max-md:hidden", children: [_jsx(Link, { href: nav.url ?? '/', className: "inline-flex text-[15px] items-center gap-2.5 font-medium me-auto", children: nav.title }), nav.children, sidebarCollapsible && (_jsx(SidebarCollapseTrigger, { className: cn(buttonVariants({
                                                 color: 'ghost',
                                                 size: 'icon-sm',
                                                 className: 'mb-auto text-fd-muted-foreground max-md:hidden',
                                             })), children: _jsx(SidebarIcon, {}) }))] }), searchToggle.enabled !== false &&
                                     (searchToggle.components?.lg ?? (_jsx(LargeSearchToggle, { hideIfDisabled: true, className: "max-md:hidden" }))), tabs.length > 0 && _jsx(RootToggle, { options: tabs }), sidebarBanner] }) }), _jsxs(SidebarViewport, { children: [links
                                 .filter((v) => v.type !== 'icon')
-                                .map((item, i, list) => (_jsx(SidebarLinkItem, { item: item, className: cn(i === list.length - 1 && 'mb-4') }, i))), _jsx(SidebarPageTree, { components: sidebarComponents })] }), _jsxs(SidebarFooter, { className: "empty:hidden", children: [_jsx(HideIfEmpty, { children: _jsxs("div", { className: "flex items-center justify-end", children: [links
+                                .map((item, i, list) => (_jsx(SidebarLinkItem, { item: item, className: cn(i === list.length - 1 && 'mb-4') }, i))), _jsx(SidebarPageTree, { components: sidebarComponents })] }), _jsx(HideIfEmpty, { children: _jsxs(SidebarFooter, { className: "data-[empty=true]:hidden", children: [_jsxs("div", { className: "flex items-center justify-end empty:hidden", children: [links
                                             .filter((item) => item.type === 'icon')
                                             .map((item, i, arr) => (_jsx(BaseLinkItem, { item: item, className: cn(buttonVariants({ size: 'icon', color: 'ghost' }), 'text-fd-muted-foreground md:[&_svg]:size-4.5', i === arr.length - 1 && 'me-auto'), "aria-label": item.label, children: item.icon }, i))), i18n ? (_jsxs(LanguageToggle, { className: "me-1.5", children: [_jsx(Languages, { className: "size-4.5" }), _jsx(LanguageToggleText, { className: "md:hidden" })] })) : null, themeSwitch.enabled !== false &&
-                                            (themeSwitch.component ?? (_jsx(ThemeToggle, { className: "p-0", mode: themeSwitch.mode })))] }) }), sidebarFooter] })] })] }));
+                                            (themeSwitch.component ?? (_jsx(ThemeToggle, { className: "p-0", mode: themeSwitch.mode })))] }), sidebarFooter] }) })] })] }));
     return (_jsx(TreeContextProvider, { tree: props.tree, children: _jsxs(NavProvider, { transparentMode: transparentMode, children: [nav.enabled !== false &&
                     (nav.component ?? (_jsxs(Navbar, { className: "h-14 md:hidden", children: [_jsx(Link, { href: nav.url ?? '/', className: "inline-flex items-center gap-2.5 font-semibold", children: nav.title }), _jsx("div", { className: "flex-1", children: nav.children }), searchToggle?.enabled !== false &&
                                 (searchToggle.components?.sm ?? (_jsx(SearchToggle, { className: "p-2", hideIfDisabled: true }))), _jsx(NavbarSidebarTrigger, { className: "p-2 -me-1.5 md:hidden" })] }))), _jsxs(LayoutBody, { ...props.containerProps, className: cn(variables, props.containerProps?.className), children: [sidebarEnabled && sidebar, children] })] }) }));

package/dist/layouts/notebook-client.js

@@ -44,8 +44,8 @@ export function LayoutTabs({ options, ...props }) {
             return isActive(option.url, pathname, true);
         });
     }, [options, pathname]);
-    return (_jsx("div", { ...props, className: cn('flex flex-row items-end gap-6 overflow-auto', props.className), children: options.map((option) => (_jsx(LayoutTab, { selected: selected === option, option: option }, option.url))) }));
+    return (_jsx("div", { ...props, className: cn('flex flex-row items-center gap-2 overflow-auto', props.className), children: options.map((option) => (_jsx(LayoutTab, { selected: selected === option, option: option }, option.url))) }));
 }
 function LayoutTab({ option, selected = false, }) {
-    return (_jsx(Link, { className: cn('inline-flex items-center py-2.5 border-b border-transparent gap-2 text-fd-muted-foreground text-sm text-nowrap', selected && 'text-fd-foreground font-medium border-fd-primary'), href: option.url, children: option.title }));
+    return (_jsx(Link, { className: cn('inline-flex rounded-full items-center px-2 py-1.5 font-medium gap-2 text-fd-muted-foreground text-sm text-nowrap', selected && 'bg-fd-primary/10 text-fd-primary'), href: option.url, children: option.title }));
 }

package/dist/layouts/notebook.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"notebook.d.ts","sourceRoot":"","sources":["../../src/layouts/notebook.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,cAAc,EAAW,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,KAAK,eAAe,EAAY,MAAM,kBAAkB,CAAC;AAqBlE,OAAO,EAGL,KAAK,cAAc,EACpB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAGL,MAAM,EACN,oBAAoB,EACrB,MAAM,mBAAmB,CAAC;AAU3B,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAE/B,GAAG,CAAC,EAAE,eAAe,CAAC,KAAK,CAAC,GAAG;QAC7B,IAAI,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;KACvB,CAAC;IAEF,OAAO,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;IAElC,cAAc,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CACjD;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,2CAiJhD;AA8LD,OAAO,EAAE,MAAM,EAAE,oBAAoB,EAAE,CAAC"}
+{"version":3,"file":"notebook.d.ts","sourceRoot":"","sources":["../../src/layouts/notebook.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,cAAc,EAAW,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,KAAK,eAAe,EAAY,MAAM,kBAAkB,CAAC;AAqBlE,OAAO,EAGL,KAAK,cAAc,EACpB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAGL,MAAM,EACN,oBAAoB,EACrB,MAAM,mBAAmB,CAAC;AAU3B,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAE/B,GAAG,CAAC,EAAE,eAAe,CAAC,KAAK,CAAC,GAAG;QAC7B,IAAI,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;KACvB,CAAC;IAEF,OAAO,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;IAElC,cAAc,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CACjD;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,2CAiJhD;AAiMD,OAAO,EAAE,MAAM,EAAE,oBAAoB,EAAE,CAAC"}

package/dist/layouts/notebook.js

@@ -30,9 +30,9 @@ export function DocsLayout(props) {
                 })), children: _jsx(SidebarIcon, {}) }))] }));
     return (_jsx(TreeContextProvider, { tree: props.tree, children: _jsx(NavProvider, { transparentMode: transparentMode, children: _jsxs(LayoutBody, { ...props.containerProps, className: cn(variables, props.containerProps?.className), children: [_jsxs(Sidebar, { ...sidebar, className: cn(navMode === 'top'
                             ? 'border-e-0 md:bg-transparent'
-                            : 'md:[--fd-nav-height:0px]', sidebar.className), children: [_jsx(HideIfEmpty, { children: _jsxs(SidebarHeader, { children: [navMode === 'auto' && sidebarHeader, nav.children, sidebarBanner, tabMode === 'sidebar' && tabs.length > 0 ? (_jsx(RootToggle, { className: "mb-2", options: tabs })) : null, tabMode === 'navbar' && tabs.length > 0 && (_jsx(RootToggle, { options: tabs, className: "lg:hidden" }))] }) }), _jsxs(SidebarViewport, { children: [links
+                            : 'md:[--fd-nav-height:0px]', sidebar.className), children: [_jsx(HideIfEmpty, { children: _jsxs(SidebarHeader, { className: "data-[empty=true]:hidden", children: [navMode === 'auto' && sidebarHeader, nav.children, sidebarBanner, tabMode === 'sidebar' && tabs.length > 0 ? (_jsx(RootToggle, { className: "mb-2", options: tabs })) : null, tabMode === 'navbar' && tabs.length > 0 && (_jsx(RootToggle, { options: tabs, className: "lg:hidden" }))] }) }), _jsxs(SidebarViewport, { children: [links
                                         .filter((item) => item.type !== 'icon')
-                                        .map((item, i) => (_jsx(SidebarLinkItem, { item: item, className: cn('lg:hidden', i === links.length - 1 && 'mb-4') }, i))), _jsx(SidebarPageTree, { components: sidebarComponents })] }), _jsx(HideIfEmpty, { children: _jsxs(SidebarFooter, { className: "flex flex-row items-center justify-end", children: [_jsx("div", { className: "flex items-center flex-1 empty:hidden lg:hidden", children: links
+                                        .map((item, i) => (_jsx(SidebarLinkItem, { item: item, className: cn('lg:hidden', i === links.length - 1 && 'mb-4') }, i))), _jsx(SidebarPageTree, { components: sidebarComponents })] }), _jsx(HideIfEmpty, { children: _jsxs(SidebarFooter, { className: "flex flex-row items-center justify-end data-[empty=true]:hidden", children: [_jsx("div", { className: "flex items-center flex-1 empty:hidden lg:hidden", children: links
                                                 .filter((item) => item.type === 'icon')
                                                 .map((item, i) => (_jsx(BaseLinkItem, { item: item, className: cn(buttonVariants({
                                                     size: 'icon-sm',
@@ -60,7 +60,7 @@ function DocsNavbar({ links, tabs, searchToggle = {}, themeSwitch = {}, ...props
                                 (themeSwitch.component ?? (_jsx(ThemeToggle, { className: "ms-2 max-md:hidden", mode: themeSwitch.mode ?? 'light-dark-system' }))), sidebarCollapsible && navMode === 'top' ? (_jsx(SidebarCollapseTrigger, { className: cn(buttonVariants({
                                     color: 'secondary',
                                     size: 'icon-sm',
-                                }), 'ms-2 text-fd-muted-foreground rounded-full max-md:hidden'), children: _jsx(SidebarIcon, {}) })) : null] })] }), tabs.length > 0 && (_jsx(LayoutTabs, { className: "px-6 border-b h-10 max-lg:hidden", options: tabs }))] }));
+                                }), 'ms-2 text-fd-muted-foreground rounded-full max-md:hidden'), children: _jsx(SidebarIcon, {}) })) : null] })] }), tabs.length > 0 && (_jsx(LayoutTabs, { className: cn('border-b h-10 max-lg:hidden', navMode === 'top' ? 'px-4' : 'px-6'), options: tabs }))] }));
 }
 function NavbarLinkItem({ item, ...props }) {
     if (item.type === 'menu') {

package/dist/mdx.d.ts

@@ -1,10 +1,15 @@
 import type { AnchorHTMLAttributes, FC, HTMLAttributes, ImgHTMLAttributes, TableHTMLAttributes } from 'react';
 import { Card, Cards } from './components/card.js';
+import { CodeBlockTabs, CodeBlockTabsList, CodeBlockTabsTrigger } from './components/codeblock.js';
 declare function Image(props: ImgHTMLAttributes<HTMLImageElement> & {
     sizes?: string;
 }): import("react/jsx-runtime").JSX.Element;
 declare function Table(props: TableHTMLAttributes<HTMLTableElement>): import("react/jsx-runtime").JSX.Element;
 declare const defaultMdxComponents: {
+    CodeBlockTab: (props: import("react").ComponentProps<typeof import("./components/tabs.unstyled.js").TabsContent>) => import("react/jsx-runtime").JSX.Element;
+    CodeBlockTabs: typeof CodeBlockTabs;
+    CodeBlockTabsList: typeof CodeBlockTabsList;
+    CodeBlockTabsTrigger: typeof CodeBlockTabsTrigger;
     pre: (props: HTMLAttributes<HTMLPreElement>) => import("react/jsx-runtime").JSX.Element;
     Card: typeof Card;
     Cards: typeof Cards;

package/dist/mdx.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mdx.d.ts","sourceRoot":"","sources":["../src/mdx.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,oBAAoB,EACpB,EAAE,EACF,cAAc,EACd,iBAAiB,EACjB,mBAAmB,EACpB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAMhD,iBAAS,KAAK,CACZ,KAAK,EAAE,iBAAiB,CAAC,gBAAgB,CAAC,GAAG;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,2CAUF;AAED,iBAAS,KAAK,CAAC,KAAK,EAAE,mBAAmB,CAAC,gBAAgB,CAAC,2CAM1D;AAED,QAAA,MAAM,oBAAoB;iBACX,cAAc,CAAC,cAAc,CAAC;;;OAOhC,EAAE,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;;gBAE1C,cAAc,CAAC,kBAAkB,CAAC;gBAGlC,cAAc,CAAC,kBAAkB,CAAC;gBAGlC,cAAc,CAAC,kBAAkB,CAAC;gBAGlC,cAAc,CAAC,kBAAkB,CAAC;gBAGlC,cAAc,CAAC,kBAAkB,CAAC;gBAGlC,cAAc,CAAC,kBAAkB,CAAC;;;;;;;CAK/C,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,cAAc,cAAc,EAAE,kBAK5D,CAAC;AAEJ,OAAO,EAAE,oBAAoB,IAAI,OAAO,EAAE,CAAC"}
+{"version":3,"file":"mdx.d.ts","sourceRoot":"","sources":["../src/mdx.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,oBAAoB,EACpB,EAAE,EACF,cAAc,EACd,iBAAiB,EACjB,mBAAmB,EACpB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAIhD,OAAO,EAGL,aAAa,EACb,iBAAiB,EACjB,oBAAoB,EAErB,MAAM,wBAAwB,CAAC;AAEhC,iBAAS,KAAK,CACZ,KAAK,EAAE,iBAAiB,CAAC,gBAAgB,CAAC,GAAG;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,2CAUF;AAED,iBAAS,KAAK,CAAC,KAAK,EAAE,mBAAmB,CAAC,gBAAgB,CAAC,2CAM1D;AAED,QAAA,MAAM,oBAAoB;;;;;iBAKX,cAAc,CAAC,cAAc,CAAC;;;OAOhC,EAAE,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;;gBAE1C,cAAc,CAAC,kBAAkB,CAAC;gBAGlC,cAAc,CAAC,kBAAkB,CAAC;gBAGlC,cAAc,CAAC,kBAAkB,CAAC;gBAGlC,cAAc,CAAC,kBAAkB,CAAC;gBAGlC,cAAc,CAAC,kBAAkB,CAAC;gBAGlC,cAAc,CAAC,kBAAkB,CAAC;;;;;;;CAK/C,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,cAAc,cAAc,EAAE,kBAK5D,CAAC;AAEJ,OAAO,EAAE,oBAAoB,IAAI,OAAO,EAAE,CAAC"}

package/dist/mdx.js

@@ -5,7 +5,7 @@ import { Card, Cards } from './components/card.js';
 import { Callout } from './components/callout.js';
 import { Heading } from './components/heading.js';
 import { cn } from './utils/cn.js';
-import { CodeBlock, Pre } from './components/codeblock.js';
+import { CodeBlock, CodeBlockTab, CodeBlockTabs, CodeBlockTabsList, CodeBlockTabsTrigger, Pre, } from './components/codeblock.js';
 function Image(props) {
     return (_jsx(FrameworkImage, { sizes: "(max-width: 768px) 100vw, (max-width: 1200px) 70vw, 900px", ...props, src: props.src, className: cn('rounded-lg', props.className) }));
 }
@@ -13,6 +13,10 @@ function Table(props) {
     return (_jsx("div", { className: "relative overflow-auto prose-no-margin my-6", children: _jsx("table", { ...props }) }));
 }
 const defaultMdxComponents = {
+    CodeBlockTab,
+    CodeBlockTabs,
+    CodeBlockTabsList,
+    CodeBlockTabsTrigger,
     pre: (props) => (_jsx(CodeBlock, { ...props, children: _jsx(Pre, { children: props.children }) })),
     Card,
     Cards,

package/dist/style.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.10 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme, base, components, utilities;
 @layer theme {
@@ -7,10 +7,6 @@
       "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
-    --color-red-500: oklch(63.7% 0.237 25.331);
-    --color-amber-500: oklch(76.9% 0.188 70.08);
-    --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;
     --breakpoint-sm: 40rem;
@@ -34,7 +30,6 @@
     --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
     --blur-xs: 4px;
     --blur-sm: 8px;
-    --blur-md: 12px;
     --blur-lg: 16px;
     --blur-xl: 24px;
     --default-transition-duration: 150ms;
@@ -56,6 +51,10 @@
     --color-fd-secondary-foreground: hsl(0, 0%, 9%);
     --color-fd-accent: hsla(0, 0%, 82%, 50%);
     --color-fd-accent-foreground: hsl(0, 0%, 9%);
+    --color-fd-info: oklch(62.3% 0.214 259.815);
+    --color-fd-warning: oklch(76.9% 0.188 70.08);
+    --color-fd-error: oklch(63.7% 0.237 25.331);
+    --color-fd-success: oklch(72.3% 0.219 149.579);
     --spacing-fd-container: 1400px;
     --fd-page-width: 1200px;
     --fd-sidebar-width: 0px;
@@ -304,6 +303,9 @@
   .inset-x-0 {
     inset-inline: calc(var(--spacing) * 0);
   }
+  .inset-x-2 {
+    inset-inline: calc(var(--spacing) * 2);
+  }
   .inset-y-0 {
     inset-block: calc(var(--spacing) * 0);
   }
@@ -349,27 +351,33 @@
   .top-0 {
     top: calc(var(--spacing) * 0);
   }
+  .top-1 {
+    top: calc(var(--spacing) * 1);
+  }
   .top-1\.5 {
     top: calc(var(--spacing) * 1.5);
   }
   .top-1\/2 {
     top: calc(1/2 * 100%);
   }
-  .top-2 {
-    top: calc(var(--spacing) * 2);
-  }
   .top-4 {
     top: calc(var(--spacing) * 4);
   }
   .top-14 {
     top: calc(var(--spacing) * 14);
   }
-  .right-2 {
-    right: calc(var(--spacing) * 2);
+  .right-0 {
+    right: calc(var(--spacing) * 0);
+  }
+  .right-1 {
+    right: calc(var(--spacing) * 1);
   }
   .bottom-\(--fd-sidebar-margin\) {
     bottom: var(--fd-sidebar-margin);
   }
+  .bottom-0 {
+    bottom: calc(var(--spacing) * 0);
+  }
   .bottom-1\.5 {
     bottom: calc(var(--spacing) * 1.5);
   }
@@ -379,6 +387,9 @@
   .left-1\/2 {
     left: calc(1/2 * 100%);
   }
+  .z-2 {
+    z-index: 2;
+  }
   .z-10 {
     z-index: 10;
   }
@@ -397,9 +408,6 @@
   .z-\[-1\] {
     z-index: -1;
   }
-  .z-\[2\] {
-    z-index: 2;
-  }
   .container {
     width: 100%;
     @media (width >= 40rem) {
@@ -461,12 +469,12 @@
   .ms-px {
     margin-inline-start: 1px;
   }
+  .-me-0\.5 {
+    margin-inline-end: calc(var(--spacing) * -0.5);
+  }
   .-me-1\.5 {
     margin-inline-end: calc(var(--spacing) * -1.5);
   }
-  .-me-2 {
-    margin-inline-end: calc(var(--spacing) * -2);
-  }
   .me-1\.5 {
     margin-inline-end: calc(var(--spacing) * 1.5);
   }
@@ -973,6 +981,9 @@
   .h-1\.5 {
     height: calc(var(--spacing) * 1.5);
   }
+  .h-9\.5 {
+    height: calc(var(--spacing) * 9.5);
+  }
   .h-10 {
     height: calc(var(--spacing) * 10);
   }
@@ -988,6 +999,9 @@
   .h-full {
     height: 100%;
   }
+  .h-px {
+    height: 1px;
+  }
   .max-h-\[50vh\] {
     max-height: 50vh;
   }
@@ -1012,6 +1026,9 @@
   .w-0 {
     width: calc(var(--spacing) * 0);
   }
+  .w-1 {
+    width: calc(var(--spacing) * 1);
+  }
   .w-1\.5 {
     width: calc(var(--spacing) * 1.5);
   }
@@ -1123,12 +1140,6 @@
     --tw-translate-y: 100%;
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
-  .scale-0 {
-    --tw-scale-x: 0%;
-    --tw-scale-y: 0%;
-    --tw-scale-z: 0%;
-    scale: var(--tw-scale-x) var(--tw-scale-y);
-  }
   .-rotate-90 {
     rotate: calc(90deg * -1);
   }
@@ -1265,6 +1276,9 @@
   .rounded-xl {
     border-radius: var(--radius-xl);
   }
+  .rounded-bl-lg {
+    border-bottom-left-radius: var(--radius-lg);
+  }
   .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -1273,10 +1287,6 @@
     border-inline-start-style: var(--tw-border-style);
     border-inline-start-width: 1px;
   }
-  .border-s-2 {
-    border-inline-start-style: var(--tw-border-style);
-    border-inline-start-width: 2px;
-  }
   .border-e {
     border-inline-end-style: var(--tw-border-style);
     border-inline-end-width: 1px;
@@ -1307,34 +1317,13 @@
       border-color: color-mix(in oklab, var(--color-fd-foreground) 10%, transparent);
     }
   }
-  .border-fd-primary {
-    border-color: var(--color-fd-primary);
-  }
   .border-transparent {
     border-color: transparent;
   }
-  .border-s-amber-500\/50 {
-    border-inline-start-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 50%, transparent);
+  .bg-\(--callout-color\)\/50 {
+    background-color: var(--callout-color);
     @supports (color: color-mix(in lab, red, red)) {
-      border-inline-start-color: color-mix(in oklab, var(--color-amber-500) 50%, transparent);
-    }
-  }
-  .border-s-blue-500\/50 {
-    border-inline-start-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      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-red-500\/50 {
-    border-inline-start-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-inline-start-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+      background-color: color-mix(in oklab, var(--callout-color) 50%, transparent);
     }
   }
   .bg-\(--shiki-light-bg\) {
@@ -1397,17 +1386,8 @@
   .\[mask-image\:linear-gradient\(to_bottom\,transparent\,white_16px\,white_calc\(100\%-16px\)\,transparent\)\] {
     mask-image: linear-gradient(to bottom,transparent,white 16px,white calc(100% - 16px),transparent);
   }
-  .fill-amber-500 {
-    fill: var(--color-amber-500);
-  }
-  .fill-blue-500 {
-    fill: var(--color-blue-500);
-  }
-  .fill-green-500 {
-    fill: var(--color-green-500);
-  }
-  .fill-red-500 {
-    fill: var(--color-red-500);
+  .fill-\(--callout-color\) {
+    fill: var(--callout-color);
   }
   .stroke-current\/25 {
     stroke: currentcolor;
@@ -1445,6 +1425,9 @@
   .px-\(--fd-layout-offset\) {
     padding-inline: var(--fd-layout-offset);
   }
+  .px-1 {
+    padding-inline: calc(var(--spacing) * 1);
+  }
   .px-1\.5 {
     padding-inline: calc(var(--spacing) * 1.5);
   }
@@ -1487,6 +1470,9 @@
   .py-12 {
     padding-block: calc(var(--spacing) * 12);
   }
+  .ps-1 {
+    padding-inline-start: calc(var(--spacing) * 1);
+  }
   .ps-2 {
     padding-inline-start: calc(var(--spacing) * 2);
   }
@@ -1683,11 +1669,6 @@
     -webkit-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,);
     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,);
   }
-  .backdrop-blur-md {
-    --tw-backdrop-blur: blur(var(--blur-md));
-    -webkit-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,);
-    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,);
-  }
   .backdrop-blur-sm {
     --tw-backdrop-blur: blur(var(--blur-sm));
     -webkit-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,);
@@ -1813,11 +1794,9 @@
       flex-direction: column;
     }
   }
-  .group-hover\:opacity-100 {
-    &:is(:where(.group):hover *) {
-      @media (hover: hover) {
-        opacity: 100%;
-      }
+  .group-data-\[state\=active\]\:bg-fd-primary {
+    &:is(:where(.group)[data-state="active"] *) {
+      background-color: var(--color-fd-primary);
     }
   }
   .group-data-\[state\=open\]\:rotate-90 {
@@ -1842,6 +1821,11 @@
       color: var(--color-fd-muted-foreground);
     }
   }
+  .first\:ms-1 {
+    &:first-child {
+      margin-inline-start: calc(var(--spacing) * 1);
+    }
+  }
   .first\:mt-0 {
     &:first-child {
       margin-top: calc(var(--spacing) * 0);
@@ -1982,6 +1966,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);
@@ -2388,16 +2377,6 @@
       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-3\.5 {
     & svg {
       width: calc(var(--spacing) * 3.5);
@@ -2452,11 +2431,6 @@
       border-style: none;
     }
   }
-  .\[\@media\(hover\:hover\)\]\:opacity-0 {
-    @media (hover:hover) {
-      opacity: 0%;
-    }
-  }
 }
 .dark {
   --color-fd-background: hsl(0, 0%, 7.04%);
@@ -2471,7 +2445,7 @@
   --color-fd-primary: hsl(0, 0%, 98%);
   --color-fd-primary-foreground: hsl(0, 0%, 9%);
   --color-fd-secondary: hsl(0, 0%, 12.9%);
-  --color-fd-secondary-foreground: hsl(0, 0%, 98%);
+  --color-fd-secondary-foreground: hsl(0, 0%, 92%);
   --color-fd-accent: hsla(0, 0%, 40.9%, 30%);
   --color-fd-accent-foreground: hsl(0, 0%, 90%);
   --color-fd-ring: hsl(0, 0%, 54.9%);
@@ -2482,12 +2456,16 @@
   --color-fd-muted-foreground: hsl(0, 0%, 72%);
 }
 .shiki:not(.not-fumadocs-codeblock *) {
+  --padding-left: calc(var(--spacing) * 3);
+  --padding-right: calc(var(--spacing) * 3);
   code span {
     color: var(--shiki-light);
   }
   code .line {
-    min-height: 1lh;
     position: relative;
+    min-height: 1lh;
+    padding-left: var(--padding-left);
+    padding-right: var(--padding-right);
   }
   &.has-focused code .line:not(.focused) {
     filter: blur(2px);
@@ -2502,6 +2480,7 @@
   &[data-line-numbers] code .line {
     width: calc(100% - 7 * var(--spacing));
     counter-increment: line;
+    padding-left: calc(var(--padding-left) - var(--spacing));
     margin-left: calc(var(--spacing) * 7);
     &::after {
       position: absolute;
@@ -2614,21 +2593,6 @@
   inherits: false;
   initial-value: 0;
 }
-@property --tw-scale-x {
-  syntax: "*";
-  inherits: false;
-  initial-value: 1;
-}
-@property --tw-scale-y {
-  syntax: "*";
-  inherits: false;
-  initial-value: 1;
-}
-@property --tw-scale-z {
-  syntax: "*";
-  inherits: false;
-  initial-value: 1;
-}
 @property --tw-rotate-x {
   syntax: "*";
   inherits: false;
@@ -2821,6 +2785,21 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-scale-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-scale-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-scale-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
 @keyframes pulse {
   50% {
     opacity: 0.5;
@@ -2883,13 +2862,13 @@
 @keyframes fd-popover-in {
   from {
     opacity: 0;
-    transform: translateY(-12px) scale(0.9);
+    transform: scale(0.7);
   }
 }
 @keyframes fd-popover-out {
   to {
     opacity: 0;
-    transform: translateY(-12px) scale(0.9);
+    transform: scale(0.7);
   }
 }
 @keyframes fd-fade-in {
@@ -2985,9 +2964,6 @@
       --tw-translate-x: 0;
       --tw-translate-y: 0;
       --tw-translate-z: 0;
-      --tw-scale-x: 1;
-      --tw-scale-y: 1;
-      --tw-scale-z: 1;
       --tw-rotate-x: initial;
       --tw-rotate-y: initial;
       --tw-rotate-z: initial;
@@ -3033,6 +3009,9 @@
       --tw-backdrop-saturate: initial;
       --tw-backdrop-sepia: initial;
       --tw-duration: initial;
+      --tw-scale-x: 1;
+      --tw-scale-y: 1;
+      --tw-scale-z: 1;
       --radix-collapsible-content-height: 0px;
     }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fumadocs-ui",
-  "version": "15.5.5",
+  "version": "15.6.0",
   "description": "The framework for building a documentation website in Next.js",
   "keywords": [
     "NextJs",
@@ -89,20 +89,20 @@
     "react-medium-image-zoom": "^5.2.14",
     "scroll-into-view-if-needed": "^3.1.0",
     "tailwind-merge": "^3.3.1",
-    "fumadocs-core": "15.5.5"
+    "fumadocs-core": "15.6.0"
   },
   "devDependencies": {
     "@next/eslint-plugin-next": "^15.3.4",
-    "@tailwindcss/cli": "^4.1.10",
+    "@tailwindcss/cli": "^4.1.11",
     "@types/lodash.merge": "^4.6.9",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
     "next": "15.3.4",
-    "tailwindcss": "^4.1.10",
+    "tailwindcss": "^4.1.11",
     "tsc-alias": "^1.8.16",
     "@fumadocs/cli": "0.2.1",
-    "fumadocs-core": "15.5.5",
     "eslint-config-custom": "0.0.0",
+    "fumadocs-core": "15.6.0",
     "tsconfig": "0.0.0"
   },
   "peerDependencies": {

package/dist/components/ui/tabs.d.ts

@@ -1,8 +0,0 @@
-import * as TabsPrimitive from '@radix-ui/react-tabs';
-import * as React from 'react';
-declare const Tabs: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const TabsList: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-declare const TabsContent: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export { Tabs, TabsList, TabsTrigger, TabsContent };
-//# sourceMappingURL=tabs.d.ts.map

package/dist/components/ui/tabs.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/components/ui/tabs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,aAAa,MAAM,sBAAsB,CAAC;AACtD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,QAAA,MAAM,IAAI,mJAcR,CAAC;AAIH,QAAA,MAAM,QAAQ,uJAYZ,CAAC;AAGH,QAAA,MAAM,WAAW,gKAYf,CAAC;AAGH,QAAA,MAAM,WAAW,0JAYf,CAAC;AAGH,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/ui/tabs.js

@@ -1,16 +0,0 @@
-'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as TabsPrimitive from '@radix-ui/react-tabs';
-import * as React from 'react';
-import { cn } from '../../utils/cn.js';
-const Tabs = React.forwardRef((props, ref) => {
-    return (_jsx(TabsPrimitive.Root, { ref: ref, ...props, className: cn('flex flex-col overflow-hidden rounded-xl border bg-fd-secondary', props.className) }));
-});
-Tabs.displayName = 'Tabs';
-const TabsList = React.forwardRef((props, ref) => (_jsx(TabsPrimitive.List, { ref: ref, ...props, className: cn('flex gap-3.5 text-fd-secondary-foreground overflow-x-auto px-4 not-prose', props.className) })));
-TabsList.displayName = 'TabsList';
-const TabsTrigger = React.forwardRef((props, ref) => (_jsx(TabsPrimitive.Trigger, { ref: ref, ...props, className: cn('inline-flex items-center gap-2 whitespace-nowrap text-fd-muted-foreground border-b border-transparent py-2 text-sm font-medium transition-colors [&_svg]:size-4 hover:text-fd-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=active]:border-fd-primary data-[state=active]:text-fd-primary', props.className) })));
-TabsTrigger.displayName = 'TabsTrigger';
-const TabsContent = React.forwardRef((props, ref) => (_jsx(TabsPrimitive.Content, { ref: ref, ...props, className: cn('p-4 text-[15px] bg-fd-background rounded-xl outline-none', props.className) })));
-TabsContent.displayName = 'TabsContent';
-export { Tabs, TabsList, TabsTrigger, TabsContent };