fumadocs-ui 15.2.8 → 16.0.3

package/css/solar.css

@@ -0,0 +1,48 @@
+@import './neutral.css';
+
+@theme {
+  --color-fd-primary: oklch(0.487 0.083 262.691);
+  --color-fd-article: hsl(0, 0%, 97%);
+}
+
+:root {
+  letter-spacing: -0.25px;
+  --fd-layout-width: 1600px;
+  --fd-page-width: 1400px;
+}
+
+.dark {
+  --color-fd-primary: oklch(0.902 0.0461 259.51);
+  --color-fd-article: hsl(0, 0%, 7.04%);
+  --color-fd-background: hsl(0, 0%, 5.04%);
+}
+
+@variant md {
+  #nd-page article {
+    @apply bg-fd-article rounded-xl border shadow-xl my-4;
+  }
+
+  #nd-tocnav,
+  #nd-subnav > div {
+    border: none;
+  }
+
+  .fd-default-layout #nd-page article {
+    @apply mx-4;
+  }
+
+  .fd-notebook-layout #nd-page article {
+    @apply mx-6;
+  }
+}
+
+#nd-sidebar {
+  @apply bg-fd-background;
+}
+
+#nd-sidebar[data-collapsed='false'] {
+  border: none;
+  --color-fd-muted: inherit;
+  --color-fd-secondary: inherit;
+  --color-fd-muted-foreground: inherit;
+}

package/css/vitepress.css

@@ -1,3 +1,5 @@
+@import './default.css';
+
 @theme {
   --color-fd-muted: hsl(0, 0%, 96.1%);
   --color-fd-popover: hsl(0, 0%, 100%);
@@ -63,16 +65,13 @@
 
 #nd-sidebar {
   background-color: hsl(240, 6%, 97%);
+  border-color: transparent;
 }
 
 .dark #nd-sidebar {
   background-color: hsl(240, 4%, 9%);
 }
 
-#nd-sidebar > div {
-  border-color: transparent;
-}
-
 button[data-search-full] {
   background-color: var(--color-fd-background);
 }

package/dist/components/accordion.d.ts

@@ -1,6 +1,9 @@
+import type { AccordionMultipleProps, AccordionSingleProps } from '@radix-ui/react-accordion';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
-export declare const Accordions: import("react").ForwardRefExoticComponent<(Omit<AccordionPrimitive.AccordionSingleProps, "value" | "onValueChange"> | Omit<AccordionPrimitive.AccordionMultipleProps, "value" | "onValueChange">) & import("react").RefAttributes<HTMLDivElement>>;
-export declare const Accordion: import("react").ForwardRefExoticComponent<Omit<Omit<AccordionPrimitive.AccordionItemProps & import("react").RefAttributes<HTMLDivElement>, "ref">, "value"> & {
-    title: string;
+import { type ReactNode } from 'react';
+export declare const Accordions: import("react").ForwardRefExoticComponent<(Omit<AccordionSingleProps, "value" | "onValueChange"> | Omit<AccordionMultipleProps, "value" | "onValueChange">) & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Accordion: import("react").ForwardRefExoticComponent<Omit<Omit<AccordionPrimitive.AccordionItemProps & import("react").RefAttributes<HTMLDivElement>, "ref">, "title" | "value"> & {
+    title: string | ReactNode;
+    value?: string;
 } & import("react").RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=accordion.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../src/components/accordion.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,kBAAkB,MAAM,2BAA2B,CAAC;AAgBhE,eAAO,MAAM,UAAU,oPA+BrB,CAAC;AAIH,eAAO,MAAM,SAAS;WAGX,MAAM;kDA0Bf,CAAC"}
+{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../src/components/accordion.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,sBAAsB,EACtB,oBAAoB,EACrB,MAAM,2BAA2B,CAAC;AACnC,OAAO,KAAK,kBAAkB,MAAM,2BAA2B,CAAC;AAEhE,OAAO,EAGL,KAAK,SAAS,EAIf,MAAM,OAAO,CAAC;AAMf,eAAO,MAAM,UAAU,8MAuCrB,CAAC;AAIH,eAAO,MAAM,SAAS;WAMX,MAAM,GAAG,SAAS;YACjB,MAAM;kDAiCjB,CAAC"}

package/dist/components/accordion.js

@@ -1,33 +1,41 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
-import { Check, ChevronRight, LinkIcon } from 'lucide-react';
-import { forwardRef, useState, useEffect, } from 'react';
+import { Check, ChevronRight, Link as LinkIcon } from '../icons.js';
+import { forwardRef, useEffect, useRef, useState, } from 'react';
 import { cn } from '../utils/cn.js';
 import { useCopyButton } from '../utils/use-copy-button.js';
 import { buttonVariants } from '../components/ui/button.js';
+import { mergeRefs } from '../utils/merge-refs.js';
 export const Accordions = forwardRef(({ type = 'single', className, defaultValue, ...props }, ref) => {
-    const [value, setValue] = useState(type === 'single' ? (defaultValue ?? '') : (defaultValue ?? []));
+    const rootRef = useRef(null);
+    const composedRef = mergeRefs(ref, rootRef);
+    const [value, setValue] = useState(() => type === 'single' ? (defaultValue ?? '') : (defaultValue ?? []));
     useEffect(() => {
         const id = window.location.hash.substring(1);
-        if (id.length > 0)
-            setValue((prev) => (typeof prev === 'string' ? id : [id, ...prev]));
+        const element = rootRef.current;
+        if (!element || id.length === 0)
+            return;
+        const selected = document.getElementById(id);
+        if (!selected || !element.contains(selected))
+            return;
+        const value = selected.getAttribute('data-accordion-value');
+        if (value)
+            setValue((prev) => (typeof prev === 'string' ? value : [value, ...prev]));
     }, []);
     return (
     // @ts-expect-error -- Multiple types
-    _jsx(AccordionPrimitive.Root, { type: type, ref: ref, value: value, onValueChange: setValue, collapsible: type === 'single' ? true : undefined, className: cn('divide-y divide-fd-border overflow-hidden rounded-lg border bg-fd-card', className), ...props }));
+    _jsx(AccordionPrimitive.Root, { type: type, ref: composedRef, value: value, onValueChange: setValue, collapsible: type === 'single' ? true : undefined, className: cn('divide-y divide-fd-border overflow-hidden rounded-lg border bg-fd-card', className), ...props }));
 });
 Accordions.displayName = 'Accordions';
-export const Accordion = forwardRef(({ title, className, id, children, ...props }, ref) => {
-    return (_jsxs(AccordionPrimitive.Item, { ref: ref, 
-        // Use `id` instead if presents
-        value: id ?? title, className: cn('group/accordion relative scroll-m-20', className), ...props, children: [_jsxs(AccordionPrimitive.Header, { id: id, className: "not-prose flex flex-row items-center text-fd-card-foreground font-medium has-focus-visible:bg-fd-accent", children: [_jsxs(AccordionPrimitive.Trigger, { className: "flex flex-1 items-center gap-2 px-4 py-2.5 text-start focus-visible:outline-none", children: [_jsx(ChevronRight, { className: "-ms-1 size-4 shrink-0 text-fd-muted-foreground transition-transform duration-200 group-data-[state=open]/accordion:rotate-90" }), title] }), id ? _jsx(CopyButton, { id: id }) : null] }), _jsx(AccordionPrimitive.Content, { className: "overflow-hidden data-[state=closed]:animate-fd-accordion-up data-[state=open]:animate-fd-accordion-down", children: _jsx("div", { className: "px-4 py-2 prose-no-margin", children: children }) })] }));
+export const Accordion = forwardRef(({ title, className, id, value = String(title), children, ...props }, ref) => {
+    return (_jsxs(AccordionPrimitive.Item, { ref: ref, value: value, className: cn('scroll-m-24', className), ...props, children: [_jsxs(AccordionPrimitive.Header, { id: id, "data-accordion-value": value, className: "not-prose flex flex-row items-center text-fd-card-foreground font-medium has-focus-visible:bg-fd-accent", children: [_jsxs(AccordionPrimitive.Trigger, { className: "group flex flex-1 items-center gap-2 px-3 py-2.5 text-start focus-visible:outline-none", children: [_jsx(ChevronRight, { className: "size-4 shrink-0 text-fd-muted-foreground transition-transform duration-200 group-data-[state=open]:rotate-90" }), title] }), id ? _jsx(CopyButton, { id: id }) : null] }), _jsx(AccordionPrimitive.Content, { className: "overflow-hidden data-[state=closed]:animate-fd-accordion-up data-[state=open]:animate-fd-accordion-down", children: _jsx("div", { className: "px-4 pb-2 text-[15px] prose-no-margin", children: children }) })] }));
 });
 function CopyButton({ id }) {
     const [checked, onClick] = useCopyButton(() => {
         const url = new URL(window.location.href);
         url.hash = id;
-        void navigator.clipboard.writeText(url.toString());
+        return navigator.clipboard.writeText(url.toString());
     });
     return (_jsx("button", { type: "button", "aria-label": "Copy Link", className: cn(buttonVariants({
             color: 'ghost',

package/dist/components/banner.d.ts

@@ -1,5 +1,6 @@
 import { type HTMLAttributes } from 'react';
-export declare function Banner({ id, variant, changeLayout, height, ...props }: HTMLAttributes<HTMLDivElement> & {
+type BannerVariant = 'rainbow' | 'normal';
+export declare function Banner({ id, variant, changeLayout, height, rainbowColors, ...props }: HTMLAttributes<HTMLDivElement> & {
     /**
      * @defaultValue 3rem
      */
@@ -7,7 +8,11 @@ export declare function Banner({ id, variant, changeLayout, height, ...props }:
     /**
      * @defaultValue 'normal'
      */
-    variant?: 'rainbow' | 'normal';
+    variant?: BannerVariant;
+    /**
+     * For rainbow variant only, customise the colors
+     */
+    rainbowColors?: string[];
     /**
      * Change Fumadocs layout styles
      *
@@ -15,4 +20,5 @@ export declare function Banner({ id, variant, changeLayout, height, ...props }:
      */
     changeLayout?: boolean;
 }): import("react/jsx-runtime").JSX.Element | null;
+export {};
 //# sourceMappingURL=banner.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"banner.d.ts","sourceRoot":"","sources":["../../src/components/banner.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,cAAc,EAAuB,MAAM,OAAO,CAAC;AAKjE,wBAAgB,MAAM,CAAC,EACrB,EAAE,EACF,OAAkB,EAClB,YAAmB,EACnB,MAAe,EACf,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,cAAc,CAAC,GAAG;IAClC;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAE/B;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,kDAkEA"}
+{"version":3,"file":"banner.d.ts","sourceRoot":"","sources":["../../src/components/banner.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,cAAc,EAAuB,MAAM,OAAO,CAAC;AAKjE,KAAK,aAAa,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE1C,wBAAgB,MAAM,CAAC,EACrB,EAAE,EACF,OAAkB,EAClB,YAAmB,EACnB,MAAe,EACf,aAKC,EACD,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,cAAc,CAAC,GAAG;IAClC;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IAEzB;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,kDAuEA"}

package/dist/components/banner.js

@@ -1,10 +1,15 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
-import { X } from 'lucide-react';
+import { X } from '../icons.js';
 import { cn } from '../utils/cn.js';
 import { buttonVariants } from '../components/ui/button.js';
-export function Banner({ id, variant = 'normal', changeLayout = true, height = '3rem', ...props }) {
+export function Banner({ id, variant = 'normal', changeLayout = true, height = '3rem', rainbowColors = [
+    'rgba(0,149,255,0.56)',
+    'rgba(231,77,255,0.77)',
+    'rgba(255,0,0,0.73)',
+    'rgba(131,255,166,0.66)',
+], ...props }) {
     const [open, setOpen] = useState(true);
     const globalKey = id ? `nd-banner-${id}` : null;
     useEffect(() => {
@@ -13,47 +18,37 @@ export function Banner({ id, variant = 'normal', changeLayout = true, height = '
     }, [globalKey]);
     if (!open)
         return null;
-    return (_jsxs("div", { id: id, ...props, className: cn('sticky top-0 z-40 flex flex-row items-center justify-center bg-fd-secondary px-4 text-center text-sm font-medium', variant === 'rainbow' && 'bg-fd-background', !open && 'hidden', props.className), style: {
+    return (_jsxs("div", { id: id, ...props, className: cn('sticky top-0 z-40 flex flex-row items-center justify-center px-4 text-center text-sm font-medium', variant === 'normal' && 'bg-fd-secondary', variant === 'rainbow' && 'bg-fd-background', !open && 'hidden', props.className), style: {
             height,
         }, children: [changeLayout && open ? (_jsx("style", { children: globalKey
                     ? `:root:not(.${globalKey}) { --fd-banner-height: ${height}; }`
                     : `:root { --fd-banner-height: ${height}; }` })) : null, globalKey ? (_jsx("style", { children: `.${globalKey} #${id} { display: none; }` })) : null, globalKey ? (_jsx("script", { dangerouslySetInnerHTML: {
                     __html: `if (localStorage.getItem('${globalKey}') === 'true') document.documentElement.classList.add('${globalKey}');`,
-                } })) : null, variant === 'rainbow' ? rainbowLayer : null, props.children, id ? (_jsx("button", { type: "button", "aria-label": "Close Banner", onClick: () => {
+                } })) : null, variant === 'rainbow'
+                ? flow({
+                    colors: rainbowColors,
+                })
+                : null, props.children, id ? (_jsx("button", { type: "button", "aria-label": "Close Banner", onClick: () => {
                     setOpen(false);
                     if (globalKey)
                         localStorage.setItem(globalKey, 'true');
                 }, className: cn(buttonVariants({
                     color: 'ghost',
-                    className: 'absolute end-2 top-1/2 -translate-y-1/2 text-fd-muted-foreground',
-                    size: 'icon',
+                    className: 'absolute end-2 top-1/2 -translate-y-1/2 text-fd-muted-foreground/50',
+                    size: 'icon-sm',
                 })), children: _jsx(X, {}) })) : null] }));
 }
 const maskImage = 'linear-gradient(to bottom,white,transparent), radial-gradient(circle at top center, white, transparent)';
-const rainbowLayer = (_jsxs(_Fragment, { children: [_jsx("div", { className: "absolute inset-0 z-[-1]", style: {
-                maskImage,
-                maskComposite: 'intersect',
-                animation: 'fd-moving-banner 16s linear infinite',
-                '--start': 'rgba(0,87,255,0.5)',
-                '--mid': 'rgba(255,0,166,0.77)',
-                '--end': 'rgba(255,77,0,0.4)',
-                '--via': 'rgba(164,255,68,0.4)',
-                animationDirection: 'reverse',
-                backgroundImage: 'repeating-linear-gradient(60deg, var(--end), var(--start) 2%, var(--start) 5%, transparent 8%, transparent 14%, var(--via) 18%, var(--via) 22%, var(--mid) 28%, var(--mid) 30%, var(--via) 34%, var(--via) 36%, transparent, var(--end) calc(50% - 12px))',
-                backgroundSize: '200% 100%',
-                mixBlendMode: 'difference',
-            } }), _jsx("div", { className: "absolute inset-0 z-[-1]", style: {
-                maskImage,
-                maskComposite: 'intersect',
-                animation: 'fd-moving-banner 20s linear infinite',
-                '--start': 'rgba(255,120,120,0.5)',
-                '--mid': 'rgba(36,188,255,0.4)',
-                '--end': 'rgba(64,0,255,0.51)',
-                '--via': 'rgba(255,89,0,0.56)',
-                backgroundImage: 'repeating-linear-gradient(45deg, var(--end), var(--start) 4%, var(--start) 8%, transparent 9%, transparent 14%, var(--mid) 16%, var(--mid) 20%, transparent, var(--via) 36%, var(--via) 40%, transparent 42%, var(--end) 46%, var(--end) calc(50% - 16.8px))',
-                backgroundSize: '200% 100%',
-                mixBlendMode: 'color-dodge',
-            } }), _jsx("style", { children: `@keyframes fd-moving-banner {
+function flow({ colors }) {
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "absolute inset-0 z-[-1]", style: {
+                    maskImage,
+                    maskComposite: 'intersect',
+                    animation: 'fd-moving-banner 20s linear infinite',
+                    backgroundImage: `repeating-linear-gradient(70deg, ${[...colors, colors[0]].map((color, i) => `${color} ${(i * 50) / colors.length}%`).join(', ')})`,
+                    backgroundSize: '200% 100%',
+                    filter: 'saturate(2)',
+                } }), _jsx("style", { children: `@keyframes fd-moving-banner {
             from { background-position: 0% 0;  }
             to { background-position: 100% 0;  }
          }` })] }));
+}

package/dist/components/callout.d.ts

@@ -1,10 +1,10 @@
 import { type HTMLAttributes, type ReactNode } from 'react';
-export declare const Callout: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "icon" | "type" | "title"> & {
+export declare const Callout: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "title" | "type" | "icon"> & {
     title?: ReactNode;
     /**
      * @defaultValue info
      */
-    type?: "info" | "warn" | "error";
+    type?: "info" | "warn" | "error" | "success" | "warning";
     /**
      * Force an icon
      */

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;AAiCxE,eAAO,MAAM,OAAO;YAzBV,SAAS;IACjB;;OAEG;WACI,MAAM,GAAG,MAAM,GAAG,OAAO;IAEhC;;OAEG;WACI,SAAS;kDA8CjB,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;AAqBxE,eAAO,MAAM,OAAO;YAdV,SAAS;IACjB;;OAEG;WACI,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS;IAExD;;OAEG;WACI,SAAS;kDA0CjB,CAAC"}

package/dist/components/callout.js

@@ -1,25 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AlertTriangle, CircleX, Info } from 'lucide-react';
+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-6 flex flex-row 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-orange-500/50',
-            error: 'border-s-red-500/50',
-        },
-    },
-});
+const iconClass = 'size-5 -me-0.5 fill-(--callout-color) text-fd-card';
 export const Callout = forwardRef(({ className, children, title, type = 'info', icon, ...props }, ref) => {
-    return (_jsxs("div", { ref: ref, className: cn(calloutVariants({
-            type: type,
-        }), className), ...props, children: [icon ??
+    if (type === 'warn')
+        type = 'warning';
+    if (type === 'tip')
+        type = 'info';
+    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}, var(--color-fd-muted))`,
+            ...props.style,
+        }, children: [_jsx("div", { role: "none", className: "w-0.5 bg-(--callout-color)/50 rounded-sm" }), icon ??
                 {
-                    info: _jsx(Info, { className: "size-5 fill-blue-500 text-fd-card" }),
-                    warn: (_jsx(AlertTriangle, { className: "size-5 fill-orange-500 text-fd-card" })),
-                    error: _jsx(CircleX, { className: "size-5 fill-red-500 text-fd-card" }),
-                }[type], _jsxs("div", { className: "min-w-0 flex-1", children: [title ? _jsx("p", { className: "not-prose mb-2 font-medium", children: title }) : null, _jsx("div", { className: "text-fd-muted-foreground prose-no-margin", children: children })] })] }));
+                    info: _jsx(Info, { className: iconClass }),
+                    warning: _jsx(TriangleAlert, { className: iconClass }),
+                    error: _jsx(CircleX, { className: iconClass }),
+                    success: _jsx(CircleCheck, { className: iconClass }),
+                }[type], _jsxs("div", { className: "flex flex-col gap-2 min-w-0 flex-1", children: [title && _jsx("p", { className: "font-medium !my-0", children: title }), _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,6 +1,6 @@
-import { type HTMLAttributes, type ReactNode } from 'react';
-import type { ScrollAreaViewportProps } from '@radix-ui/react-scroll-area';
-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
      *
@@ -19,28 +19,24 @@ export type CodeBlockProps = HTMLAttributes<HTMLElement> & {
      * @defaultValue false
      */
     keepBackground?: boolean;
-    viewportProps?: ScrollAreaViewportProps;
-};
-export declare const Pre: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLPreElement> & import("react").RefAttributes<HTMLPreElement>>;
-export declare const CodeBlock: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    viewportProps?: 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
+     * show line numbers
      */
-    allowCopy?: boolean;
+    'data-line-numbers'?: boolean;
     /**
-     * Keep original background color generated by Shiki or Rehype Code
-     *
-     * @defaultValue false
+     * @defaultValue 1
      */
-    keepBackground?: boolean;
-    viewportProps?: ScrollAreaViewportProps;
-} & import("react").RefAttributes<HTMLElement>>;
+    'data-line-numbers-start'?: number;
+    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 function 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,EAEL,KAAK,cAAc,EACnB,KAAK,SAAS,EAIf,MAAM,OAAO,CAAC;AASf,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AAE3E,MAAM,MAAM,cAAc,GAAG,cAAc,CAAC,WAAW,CAAC,GAAG;IACzD;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,aAAa,CAAC,EAAE,uBAAuB,CAAC;CACzC,CAAC;AAEF,eAAO,MAAM,GAAG,2HAYf,CAAC;AAIF,eAAO,MAAM,SAAS;IAxCpB;;;;OAIG;WACI,SAAS;IAEhB;;;;OAIG;gBACS,OAAO;IAEnB;;;;OAIG;qBACc,OAAO;oBAER,uBAAuB;+CAkGxC,CAAC"}
+{"version":3,"file":"codeblock.d.ts","sourceRoot":"","sources":["../../src/components/codeblock.tsx"],"names":[],"mappings":"AAEA,OAAO,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,SAAgB,EAChB,cAAsB,EACtB,IAAI,EACJ,aAAkB,EAClB,QAAQ,EACR,OAEC,EACD,GAAG,KAAK,EACT,EAAE,cAAc,2CAkEhB;AA0CD,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,2CAYvE;AAED,wBAAgB,oBAAoB,CAAC,EACnC,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,WAAW,CAAC,2CAapC;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,WAAW,CAAC,2CAErE"}

package/dist/components/codeblock.js

@@ -1,37 +1,68 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Check, Copy } from 'lucide-react';
-import { forwardRef, useCallback, useRef, } from 'react';
+import { Check, Clipboard } from '../icons.js';
+import { createContext, useContext, useMemo, useRef, } from 'react';
 import { cn } from '../utils/cn.js';
-import { ScrollArea, ScrollBar, ScrollViewport, } from '../components/ui/scroll-area.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('p-4 focus-visible:outline-none', className), ...props, children: props.children }));
-});
-Pre.displayName = 'Pre';
-export const CodeBlock = forwardRef(({ title, allowCopy = true, keepBackground = false, icon, viewportProps, ...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 = true, keepBackground = false, icon, viewportProps = {}, children, Actions = (props) => (_jsx("div", { ...props, className: cn('empty:hidden', props.className) })), ...props }) {
+    const inTab = useContext(TabsContext) !== null;
     const areaRef = useRef(null);
-    const onCopy = useCallback(() => {
-        const pre = areaRef.current?.getElementsByTagName('pre').item(0);
+    return (_jsxs("figure", { ref: ref, dir: "ltr", ...props, className: cn(inTab
+            ? 'bg-fd-secondary -mx-px -mb-px last:rounded-b-xl'
+            : 'my-4 bg-fd-card rounded-xl', keepBackground && 'bg-(--shiki-light-bg) dark:bg-(--shiki-dark-bg)', 'shiki relative border shadow-sm outline-none not-prose overflow-hidden text-sm', props.className), children: [title ? (_jsxs("div", { className: "flex text-fd-muted-foreground items-center gap-2 h-9.5 border-b px-4", children: [typeof icon === 'string' ? (_jsx("div", { className: "[&_svg]:size-3.5", dangerouslySetInnerHTML: {
+                            __html: icon,
+                        } })) : (icon), _jsx("figcaption", { className: "flex-1 truncate", children: title }), Actions({
+                        className: '-me-2',
+                        children: allowCopy && _jsx(CopyButton, { containerRef: areaRef }),
+                    })] })) : (Actions({
+                className: 'absolute top-2 right-2 z-2 backdrop-blur-lg rounded-lg text-fd-muted-foreground',
+                children: allowCopy && _jsx(CopyButton, { containerRef: areaRef }),
+            })), _jsx("div", { ref: areaRef, ...viewportProps, className: cn('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);
         clone.querySelectorAll('.nd-copy-ignore').forEach((node) => {
-            node.remove();
+            node.replaceWith('\n');
         });
         void navigator.clipboard.writeText(clone.textContent ?? '');
-    }, []);
-    return (_jsxs("figure", { ref: ref, ...props, className: cn('not-prose group fd-codeblock relative my-6 overflow-hidden rounded-lg border bg-fd-secondary/50 text-sm', keepBackground && 'bg-(--shiki-light-bg) dark:bg-(--shiki-dark-bg)', props.className), children: [title ? (_jsxs("div", { className: "flex flex-row items-center gap-2 border-b bg-fd-muted 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 })) : null] })) : (allowCopy && (_jsx(CopyButton, { className: "absolute right-2 top-2 z-[2] backdrop-blur-md", onCopy: onCopy }))), _jsxs(ScrollArea, { ref: areaRef, dir: "ltr", children: [_jsx(ScrollViewport, { ...viewportProps, className: cn('max-h-[600px]', viewportProps?.className), children: props.children }), _jsx(ScrollBar, { orientation: "horizontal" })] })] }));
-});
-CodeBlock.displayName = 'CodeBlock';
-function CopyButton({ className, onCopy, ...props }) {
-    const [checked, onClick] = useCopyButton(onCopy);
-    return (_jsxs("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') })] }));
+    });
+    return (_jsx("button", { type: "button", "data-checked": checked || undefined, className: cn(buttonVariants({
+            className: 'hover:text-fd-accent-foreground data-[checked]:text-fd-accent-foreground',
+            size: 'icon-xs',
+        }), className), "aria-label": checked ? 'Copied Text' : 'Copy Text', onClick: onClick, ...props, children: checked ? _jsx(Check, {}) : _jsx(Clipboard, {}) }));
+}
+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 rounded-xl border', !nested && 'my-4', props.className), children: _jsx(TabsContext.Provider, { value: useMemo(() => ({
+                containerRef,
+                nested,
+            }), [nested]), children: props.children }) }));
+}
+export function CodeBlockTabsList(props) {
+    return (_jsx(TabsList, { ...props, className: cn('flex flex-row px-2 overflow-x-auto text-fd-muted-foreground', props.className), children: props.children }));
+}
+export function CodeBlockTabsTrigger({ children, ...props }) {
+    return (_jsxs(TabsTrigger, { ...props, className: cn('relative group inline-flex text-sm font-medium text-nowrap items-center transition-colors gap-2 px-2 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 function CodeBlockTab(props) {
+    return _jsx(TabsContent, { ...props });
 }

package/dist/components/dialog/search-algolia.d.ts

@@ -1,9 +1,10 @@
 import { type AlgoliaOptions } from 'fumadocs-core/search/client';
 import { type ReactNode } from 'react';
-import { type SharedProps, type TagItem } from './search.js';
+import { type SharedProps } from './search.js';
+import type { SearchLink, TagItem } from '../../contexts/search.js';
 export interface AlgoliaSearchDialogProps extends SharedProps {
-    index: AlgoliaOptions['index'];
-    searchOptions?: Omit<AlgoliaOptions, 'index'>;
+    searchOptions: AlgoliaOptions;
+    links?: SearchLink[];
     footer?: ReactNode;
     defaultTag?: string;
     tags?: TagItem[];
@@ -20,5 +21,5 @@ export interface AlgoliaSearchDialogProps extends SharedProps {
      */
     allowClear?: boolean;
 }
-export default function AlgoliaSearchDialog({ index, searchOptions, tags, defaultTag, showAlgolia, allowClear, ...props }: AlgoliaSearchDialogProps): ReactNode;
+export default function AlgoliaSearchDialog({ searchOptions, tags, defaultTag, showAlgolia, allowClear, links, footer, ...props }: AlgoliaSearchDialogProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=search-algolia.d.ts.map

package/dist/components/dialog/search-algolia.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"search-algolia.d.ts","sourceRoot":"","sources":["../../../src/components/dialog/search-algolia.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,cAAc,EACpB,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAEjD,OAAO,EAEL,KAAK,WAAW,EAEhB,KAAK,OAAO,EACb,MAAM,UAAU,CAAC;AAElB,MAAM,WAAW,wBAAyB,SAAQ,WAAW;IAC3D,KAAK,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IAC/B,aAAa,CAAC,EAAE,IAAI,CAAC,cAAc,EAAE,OAAO,CAAC,CAAC;IAC9C,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC;IAEjB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC1C,KAAK,EACL,aAAa,EACb,IAAI,EACJ,UAAU,EACV,WAAmB,EACnB,UAAkB,EAClB,GAAG,KAAK,EACT,EAAE,wBAAwB,GAAG,SAAS,CA0CtC"}
+{"version":3,"file":"search-algolia.d.ts","sourceRoot":"","sources":["../../../src/components/dialog/search-algolia.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,cAAc,EAEpB,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAE,KAAK,SAAS,EAAqB,MAAM,OAAO,CAAC;AAE1D,OAAO,EAUL,KAAK,WAAW,EAGjB,MAAM,UAAU,CAAC;AAElB,OAAO,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAG7D,MAAM,WAAW,wBAAyB,SAAQ,WAAW;IAC3D,aAAa,EAAE,cAAc,CAAC;IAC9B,KAAK,CAAC,EAAE,UAAU,EAAE,CAAC;IAErB,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC;IAEjB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC1C,aAAa,EACb,IAAS,EACT,UAAU,EACV,WAAmB,EACnB,UAAkB,EAClB,KAAU,EACV,MAAM,EACN,GAAG,KAAK,EACT,EAAE,wBAAwB,2CA4D1B"}

package/dist/components/dialog/search-algolia.js

@@ -1,20 +1,34 @@
 'use client';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useDocsSearch, } from 'fumadocs-core/search/client';
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { useOnChange } from 'fumadocs-core/utils/use-on-change';
-import { SearchDialog, TagsList, } from './search.js';
-export default function AlgoliaSearchDialog({ index, searchOptions, tags, defaultTag, showAlgolia = false, allowClear = false, ...props }) {
+import { SearchDialog, SearchDialogClose, SearchDialogContent, SearchDialogFooter, SearchDialogHeader, SearchDialogIcon, SearchDialogInput, SearchDialogList, SearchDialogOverlay, TagsList, TagsListItem, } from './search.js';
+import { useI18n } from '../../contexts/i18n.js';
+export default function AlgoliaSearchDialog({ searchOptions, tags = [], defaultTag, showAlgolia = false, allowClear = false, links = [], footer, ...props }) {
     const [tag, setTag] = useState(defaultTag);
+    const { locale } = useI18n();
     const { search, setSearch, query } = useDocsSearch({
         type: 'algolia',
-        index,
+        tag,
+        locale,
         ...searchOptions,
-    }, undefined, tag);
+    });
+    const defaultItems = useMemo(() => {
+        if (links.length === 0)
+            return null;
+        return links.map(([name, link]) => ({
+            type: 'page',
+            id: name,
+            content: name,
+            url: link,
+        }));
+    }, [links]);
     useOnChange(defaultTag, (v) => {
         setTag(v);
     });
-    return (_jsx(SearchDialog, { search: search, onSearchChange: setSearch, results: query.data ?? [], isLoading: query.isLoading, ...props, footer: tags ? (_jsxs(_Fragment, { children: [_jsx(TagsList, { tag: tag, onTagChange: setTag, items: tags, allowClear: allowClear, children: showAlgolia ? _jsx(AlgoliaTitle, {}) : null }), props.footer] })) : (props.footer) }));
+    const label = showAlgolia && _jsx(AlgoliaTitle, {});
+    return (_jsxs(SearchDialog, { search: search, onSearchChange: setSearch, isLoading: query.isLoading, ...props, children: [_jsx(SearchDialogOverlay, {}), _jsxs(SearchDialogContent, { children: [_jsxs(SearchDialogHeader, { children: [_jsx(SearchDialogIcon, {}), _jsx(SearchDialogInput, {}), _jsx(SearchDialogClose, {})] }), _jsx(SearchDialogList, { items: query.data !== 'empty' ? query.data : defaultItems })] }), _jsxs(SearchDialogFooter, { children: [tags.length > 0 ? (_jsxs(TagsList, { tag: tag, onTagChange: setTag, allowClear: allowClear, children: [tags.map((tag) => (_jsx(TagsListItem, { value: tag.value, children: tag.name }, tag.value))), label] })) : (label), footer] })] }));
 }
 function AlgoliaTitle() {
     return (_jsx("a", { href: "https://algolia.com", rel: "noreferrer noopener", className: "ms-auto text-xs text-fd-muted-foreground", children: "Search powered by Algolia" }));

package/dist/components/dialog/search-default.d.ts

@@ -1,6 +1,8 @@
 import { type ReactNode } from 'react';
-import { type SharedProps, type TagItem } from './search.js';
+import { type SharedProps } from './search.js';
+import type { SearchLink, TagItem } from '../../contexts/search.js';
 export interface DefaultSearchDialogProps extends SharedProps {
+    links?: SearchLink[];
     /**
      * @defaultValue 'fetch'
      */
@@ -23,5 +25,5 @@ export interface DefaultSearchDialogProps extends SharedProps {
      */
     allowClear?: boolean;
 }
-export default function DefaultSearchDialog({ defaultTag, tags, api, delayMs, type, allowClear, ...props }: DefaultSearchDialogProps): ReactNode;
+export default function DefaultSearchDialog({ defaultTag, tags, api, delayMs, type, allowClear, links, footer, ...props }: DefaultSearchDialogProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=search-default.d.ts.map