fumadocs-ui 15.5.4 → 15.6.0

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/page-client.js

@@ -150,7 +150,7 @@ export function PageBreadcrumb({ includeRoot = false, includeSeparator, includeP
     }, [includePage, includeRoot, includeSeparator, path, root]);
     if (items.length === 0)
         return null;
-    return (_jsx("div", { ...props, className: cn('flex items-center gap-1.5 text-[15px] text-fd-muted-foreground', props.className), children: items.map((item, i) => {
+    return (_jsx("div", { ...props, className: cn('flex items-center gap-1.5 text-sm text-fd-muted-foreground', props.className), children: items.map((item, i) => {
             const className = cn('truncate', i === items.length - 1 && 'text-fd-primary font-medium');
             return (_jsxs(Fragment, { children: [i !== 0 && _jsx("span", { className: "text-fd-foreground/30", children: "/" }), item.url ? (_jsx(Link, { href: item.url, className: cn(className, 'transition-opacity hover:opacity-80'), children: item.name })) : (_jsx("span", { className: className, children: item.name }))] }, i));
         }) }));

package/dist/layouts/docs/page.js

@@ -21,6 +21,6 @@ export function PageTOCPopoverItems({ variant = 'normal', ...props }) {
     return (_jsx(TOCScrollArea, { ...props, children: variant === 'clerk' ? _jsx(ClerkTOCItems, {}) : _jsx(TOCItems, {}) }));
 }
 export function PageArticle(props) {
-    return (_jsx("article", { ...props, className: cn('flex min-w-0 w-full flex-col gap-6 px-4 pt-8 md:px-6 md:mx-auto xl:pt-12 xl:px-12', props.className), children: props.children }));
+    return (_jsx("article", { ...props, className: cn('flex min-w-0 w-full flex-col gap-4 px-4 pt-8 md:px-6 md:mx-auto xl:pt-12 xl:px-12', props.className), children: props.children }));
 }
 export { PageRoot, PageBreadcrumb, PageFooter, PageLastUpdate, PageTOC, PageTOCPopover, PageTOCPopoverTrigger, PageTOCPopoverContent, };

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/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,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,2CA0BlD;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,2CA8BlD;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,7 +12,9 @@ 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 top-(--fd-banner-height) z-40 inset-x-0 backdrop-blur-lg border-b transition-colors *:mx-auto *:max-w-fd-container', value.length > 0 ? 'shadow-lg' : 'shadow-sm', (!isTransparent || value.length > 0) && 'bg-fd-background/80', props.className), children: [_jsx(NavigationMenuList, { className: "flex h-14 w-full items-center px-4", asChild: true, children: _jsx("nav", { children: props.children }) }), _jsx(NavigationMenuViewport, { className: "text-fd-popover-foreground" })] }) }));
+    return (_jsx(NavigationMenu, { value: value, onValueChange: setValue, asChild: true, children: _jsxs("header", { id: "nd-nav", ...props, className: cn('fixed top-(--fd-banner-height) z-40 left-0 backdrop-blur-lg border-b transition-colors *:mx-auto *:max-w-fd-container', value.length > 0 && 'max-lg:shadow-lg max-lg:rounded-b-2xl', (!isTransparent || value.length > 0) && 'bg-fd-background/80', props.className), style: {
+                right: 'var(--removed-body-scroll-bar-size, 0px)',
+            }, children: [_jsx(NavigationMenuList, { className: "flex h-14 w-full items-center px-4", asChild: true, children: _jsx("nav", { children: props.children }) }), _jsx(NavigationMenuViewport, {})] }) }));
 }
 export const NavbarMenu = NavigationMenuItem;
 export function NavbarMenuContent(props) {

package/dist/layouts/notebook-client.d.ts

@@ -5,6 +5,7 @@ export declare function Navbar({ mode, ...props }: ComponentProps<'header'> & {
 }): import("react/jsx-runtime").JSX.Element;
 export declare function LayoutBody(props: ComponentProps<'main'>): import("react/jsx-runtime").JSX.Element;
 export declare function NavbarSidebarTrigger({ className, ...props }: ComponentProps<'button'>): import("react/jsx-runtime").JSX.Element;
-export declare function LayoutTabs(props: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
-export declare function LayoutTab(item: Option): import("react/jsx-runtime").JSX.Element;
+export declare function LayoutTabs({ options, ...props }: ComponentProps<'div'> & {
+    options: Option[];
+}): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=notebook-client.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"notebook-client.d.ts","sourceRoot":"","sources":["../../src/layouts/notebook-client.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAQ5C,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AAE9D,wBAAgB,MAAM,CAAC,EACrB,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,QAAQ,CAAC,GAAG;IAAE,IAAI,EAAE,KAAK,GAAG,MAAM,CAAA;CAAE,2CAoBrD;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,MAAM,CAAC,2CAqBvD;AAED,wBAAgB,oBAAoB,CAAC,EACnC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,QAAQ,CAAC,2CAkB1B;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,2CAYtD;AAED,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,2CAqBrC"}
+{"version":3,"file":"notebook-client.d.ts","sourceRoot":"","sources":["../../src/layouts/notebook-client.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,cAAc,EAAW,MAAM,OAAO,CAAC;AAQrD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AAE9D,wBAAgB,MAAM,CAAC,EACrB,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,QAAQ,CAAC,GAAG;IAAE,IAAI,EAAE,KAAK,GAAG,MAAM,CAAA;CAAE,2CAoBrD;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,MAAM,CAAC,2CAqBvD;AAED,wBAAgB,oBAAoB,CAAC,EACnC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,QAAQ,CAAC,2CAkB1B;AAED,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;IACzB,OAAO,EAAE,MAAM,EAAE,CAAC;CACnB,2CA+BA"}

package/dist/layouts/notebook-client.js

@@ -1,6 +1,7 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from '../utils/cn.js';
+import { useMemo } from 'react';
 import { useSidebar } from '../contexts/sidebar.js';
 import { useNav } from '../contexts/layout.js';
 import { buttonVariants } from '../components/ui/button.js';
@@ -32,16 +33,19 @@ export function NavbarSidebarTrigger({ className, ...props }) {
             className,
         })), onClick: () => setOpen((prev) => !prev), children: _jsx(SidebarIcon, {}) }));
 }
-export function LayoutTabs(props) {
-    return (_jsx("div", { ...props, className: cn('flex flex-row items-end gap-6 overflow-auto', props.className), children: props.children }));
-}
-export function LayoutTab(item) {
-    const { closeOnRedirect } = useSidebar();
+export function LayoutTabs({ options, ...props }) {
     const pathname = usePathname();
-    const selected = item.urls
-        ? item.urls.has(pathname.endsWith('/') ? pathname.slice(0, -1) : pathname)
-        : isActive(item.url, pathname, true);
-    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: item.url, onClick: () => {
-            closeOnRedirect.current = false;
-        }, children: item.title }));
+    const selected = useMemo(() => {
+        const url = pathname.endsWith('/') ? pathname.slice(0, -1) : pathname;
+        return options.findLast((option) => {
+            if (option.urls) {
+                return option.urls.has(url);
+            }
+            return isActive(option.url, pathname, true);
+        });
+    }, [options, pathname]);
+    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 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,EAIL,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;AAsLD,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

@@ -11,7 +11,7 @@ import { LanguageToggle } from '../components/layout/language-toggle.js';
 import { ThemeToggle } from '../components/layout/theme-toggle.js';
 import { Popover, PopoverContent, PopoverTrigger, } from '../components/ui/popover.js';
 import { getSidebarTabsFromOptions, SidebarLinkItem, } from '../layouts/docs/shared.js';
-import { LayoutBody, LayoutTab, LayoutTabs, Navbar, NavbarSidebarTrigger, } from './notebook-client.js';
+import { LayoutBody, LayoutTabs, Navbar, NavbarSidebarTrigger, } from './notebook-client.js';
 import { NavProvider } from '../contexts/layout.js';
 import { RootToggle } from '../components/layout/root-toggle.js';
 import Link from 'fumadocs-core/link';
@@ -29,10 +29,10 @@ export function DocsLayout(props) {
                     className: 'mt-px mb-auto text-fd-muted-foreground',
                 })), 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'
-                            ? '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
+                            ? 'border-e-0 md:bg-transparent'
+                            : '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',
@@ -49,7 +49,7 @@ function DocsNavbar({ links, tabs, searchToggle = {}, themeSwitch = {}, ...props
                                     color: 'ghost',
                                     size: 'icon-sm',
                                 }), 'text-fd-muted-foreground -ms-1.5 me-2 data-[collapsed=false]:hidden max-md:hidden'), children: _jsx(SidebarIcon, {}) })) : null, nav] }), searchToggle.enabled !== false &&
-                        (searchToggle.components?.lg ?? (_jsx(LargeSearchToggle, { hideIfDisabled: true, className: cn('w-full my-auto max-md:hidden', navMode === 'top'
+                        (searchToggle.components?.lg ? (_jsx("div", { className: cn('w-full my-auto max-md:hidden', navMode === 'top' ? 'rounded-xl max-w-sm' : 'max-w-[240px]'), children: searchToggle.components?.lg })) : (_jsx(LargeSearchToggle, { hideIfDisabled: true, className: cn('w-full my-auto max-md:hidden', navMode === 'top'
                                 ? 'rounded-xl max-w-sm ps-2.5'
                                 : 'max-w-[240px]') }))), _jsxs("div", { className: "flex flex-1 flex-row items-center justify-end", children: [_jsx("div", { className: "flex flex-row items-center gap-6 px-4 empty:hidden max-lg:hidden", children: links
                                     .filter((item) => item.type !== 'icon')
@@ -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", children: tabs.map((tab) => (_jsx(LayoutTab, { ...tab }, tab.url))) })) : null] }));
+                                }), '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,