fumadocs-ui 15.4.2 → 15.5.1

package/css/preset.css

@@ -5,6 +5,7 @@
 
 @theme {
   --spacing-fd-container: 1400px;
+  --fd-page-width: 1200px;
   --fd-sidebar-width: 0px;
   --fd-toc-width: 0px;
   --fd-layout-width: 100vw;
@@ -242,6 +243,17 @@
   [data-rmiz-modal-overlay='visible'] {
     background-color: var(--color-fd-background);
   }
+
+  :root,
+  #nd-docs-layout {
+    --fd-layout-offset: max(calc(50vw - var(--fd-layout-width) / 2), 0px);
+  }
+}
+
+@variant max-xl {
+  #nd-docs-layout:has([data-toc-popover]) {
+    --fd-tocnav-height: calc(var(--spacing) * 10);
+  }
 }
 
 @utility fd-scroll-container {

package/dist/components/accordion.d.ts

@@ -1,7 +1,9 @@
 import type { AccordionMultipleProps, AccordionSingleProps } from '@radix-ui/react-accordion';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
+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">, "value"> & {
-    title: string;
+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,EACV,sBAAsB,EACtB,oBAAoB,EACrB,MAAM,2BAA2B,CAAC;AACnC,OAAO,KAAK,kBAAkB,MAAM,2BAA2B,CAAC;AAYhE,eAAO,MAAM,UAAU,8MA+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

@@ -2,32 +2,40 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { Check, ChevronRight, Link as LinkIcon } from '../icons.js';
-import { forwardRef, useEffect, useState, } from 'react';
+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-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]/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 pb-2 text-[15px] 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/dialog/search-algolia.d.ts

@@ -1,8 +1,9 @@
 import { type AlgoliaOptions } from 'fumadocs-core/search/client';
 import { type ReactNode } from 'react';
-import { type SharedProps, type TagItem } from './search.js';
+import type { SearchLink, SharedProps, TagItem } from '../../contexts/search.js';
 export interface AlgoliaSearchDialogProps extends SharedProps {
     searchOptions: AlgoliaOptions;
+    links?: SearchLink[];
     footer?: ReactNode;
     defaultTag?: string;
     tags?: TagItem[];
@@ -19,5 +20,5 @@ export interface AlgoliaSearchDialogProps extends SharedProps {
      */
     allowClear?: boolean;
 }
-export default function AlgoliaSearchDialog({ 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,EACL,KAAK,cAAc,EAEpB,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAEjD,OAAO,EAEL,KAAK,WAAW,EAChB,KAAK,OAAO,EAGb,MAAM,UAAU,CAAC;AAElB,MAAM,WAAW,wBAAyB,SAAQ,WAAW;IAC3D,aAAa,EAAE,cAAc,CAAC;IAE9B,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,IAAI,EACJ,UAAU,EACV,WAAmB,EACnB,UAAkB,EAClB,GAAG,KAAK,EACT,EAAE,wBAAwB,GAAG,SAAS,CAyCtC"}
+{"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;AAgB1D,OAAO,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAG1E,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,2CAgE1B"}

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

@@ -1,19 +1,30 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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, TagsListItem, } from './search.js';
-export default function AlgoliaSearchDialog({ 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',
+        tag,
+        locale,
         ...searchOptions,
-    }, undefined, tag);
+    });
+    const defaultItems = useMemo(() => 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: _jsxs(_Fragment, { children: [tags ? (_jsxs(TagsList, { tag: tag, onTagChange: setTag, allowClear: allowClear, children: [tags.map((tag) => (_jsx(TagsListItem, { value: tag.value, children: tag.name }, tag.value))), showAlgolia && _jsx(AlgoliaTitle, {})] })) : (showAlgolia && _jsx(AlgoliaTitle, {})), 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, {})] }), query.data !== 'empty' && query.data && (_jsx(SearchDialogList, { items: query.data })), query.data === 'empty' && defaultItems.length > 0 && (_jsx(SearchDialogList, { items: 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,7 @@
 import { type ReactNode } from 'react';
-import { type SharedProps, type TagItem } from './search.js';
+import type { SearchLink, SharedProps, TagItem } from '../../contexts/search.js';
 export interface DefaultSearchDialogProps extends SharedProps {
+    links?: SearchLink[];
     /**
      * @defaultValue 'fetch'
      */
@@ -23,5 +24,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

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

@@ -1 +1 @@
-{"version":3,"file":"search-default.d.ts","sourceRoot":"","sources":["../../../src/components/dialog/search-default.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAGjD,OAAO,EAEL,KAAK,WAAW,EAChB,KAAK,OAAO,EAGb,MAAM,UAAU,CAAC;AAElB,MAAM,WAAW,wBAAyB,SAAQ,WAAW;IAC3D;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAE1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC;IAEjB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC1C,UAAU,EACV,IAAI,EACJ,GAAG,EACH,OAAO,EACP,IAAc,EACd,UAAkB,EAClB,GAAG,KAAK,EACT,EAAE,wBAAwB,GAAG,SAAS,CA6CtC"}
+{"version":3,"file":"search-default.d.ts","sourceRoot":"","sources":["../../../src/components/dialog/search-default.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,SAAS,EAAqB,MAAM,OAAO,CAAC;AAiB1D,OAAO,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAE1E,MAAM,WAAW,wBAAyB,SAAQ,WAAW;IAC3D,KAAK,CAAC,EAAE,UAAU,EAAE,CAAC;IAErB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAE1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC;IAEjB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC1C,UAAU,EACV,IAAS,EACT,GAAG,EACH,OAAO,EACP,IAAc,EACd,UAAkB,EAClB,KAAU,EACV,MAAM,EACN,GAAG,KAAK,EACT,EAAE,wBAAwB,2CAsE1B"}

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

@@ -1,24 +1,36 @@
 '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 { useI18n } from '../../contexts/i18n.js';
-import { SearchDialog, TagsList, TagsListItem, } from './search.js';
-export default function DefaultSearchDialog({ defaultTag, tags, api, delayMs, type = 'fetch', allowClear = false, ...props }) {
+import { SearchDialog, SearchDialogClose, SearchDialogContent, SearchDialogFooter, SearchDialogHeader, SearchDialogIcon, SearchDialogInput, SearchDialogList, SearchDialogOverlay, TagsList, TagsListItem, } from './search.js';
+export default function DefaultSearchDialog({ defaultTag, tags = [], api, delayMs, type = 'fetch', allowClear = false, links = [], footer, ...props }) {
     const { locale } = useI18n();
     const [tag, setTag] = useState(defaultTag);
     const { search, setSearch, query } = useDocsSearch(type === 'fetch'
         ? {
             type: 'fetch',
             api,
+            locale,
+            tag,
+            delayMs,
         }
         : {
             type: 'static',
             from: api,
-        }, locale, tag, delayMs);
+            locale,
+            tag,
+            delayMs,
+        });
+    const defaultItems = useMemo(() => 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, isLoading: query.isLoading, results: query.data ?? [], ...props, footer: _jsxs(_Fragment, { children: [tags && (_jsx(TagsList, { tag: tag, onTagChange: setTag, allowClear: allowClear, children: tags.map((tag) => (_jsx(TagsListItem, { value: tag.value, children: tag.name }, tag.value))) })), props.footer] }) }));
+    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, {})] }), query.data !== 'empty' && query.data && (_jsx(SearchDialogList, { items: query.data })), query.data === 'empty' && defaultItems.length > 0 && (_jsx(SearchDialogList, { items: defaultItems }))] }), _jsxs(SearchDialogFooter, { children: [tags.length > 0 && (_jsx(TagsList, { tag: tag, onTagChange: setTag, allowClear: allowClear, children: tags.map((tag) => (_jsx(TagsListItem, { value: tag.value, children: tag.name }, tag.value))) })), footer] })] }));
 }

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

@@ -1,7 +1,8 @@
 import { type OramaCloudOptions } from 'fumadocs-core/search/client';
 import { type ReactNode } from 'react';
-import { type SharedProps, type TagItem } from './search.js';
+import type { SearchLink, SharedProps, TagItem } from '../../contexts/search.js';
 export interface OramaSearchDialogProps extends SharedProps {
+    links?: SearchLink[];
     client: OramaCloudOptions['client'];
     searchOptions?: OramaCloudOptions['params'];
     index?: OramaCloudOptions['index'];
@@ -24,5 +25,5 @@ export interface OramaSearchDialogProps extends SharedProps {
 /**
  * Orama Cloud integration
  */
-export default function OramaSearchDialog({ client, searchOptions, tags, defaultTag, showOrama, allowClear, index, ...props }: OramaSearchDialogProps): ReactNode;
+export default function OramaSearchDialog({ client, searchOptions, tags, defaultTag, showOrama, allowClear, index, footer, links, ...props }: OramaSearchDialogProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=search-orama.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"search-orama.d.ts","sourceRoot":"","sources":["../../../src/components/dialog/search-orama.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,iBAAiB,EAEvB,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAEjD,OAAO,EAEL,KAAK,WAAW,EAChB,KAAK,OAAO,EAGb,MAAM,UAAU,CAAC;AAElB,MAAM,WAAW,sBAAuB,SAAQ,WAAW;IACzD,MAAM,EAAE,iBAAiB,CAAC,QAAQ,CAAC,CAAC;IACpC,aAAa,CAAC,EAAE,iBAAiB,CAAC,QAAQ,CAAC,CAAC;IAC5C,KAAK,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;IAEnC,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC;IAEjB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,MAAM,EACN,aAAa,EACb,IAAI,EACJ,UAAU,EACV,SAAiB,EACjB,UAAkB,EAClB,KAAK,EACL,GAAG,KAAK,EACT,EAAE,sBAAsB,GAAG,SAAS,CA2CpC"}
+{"version":3,"file":"search-orama.d.ts","sourceRoot":"","sources":["../../../src/components/dialog/search-orama.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,iBAAiB,EAEvB,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAE,KAAK,SAAS,EAAqB,MAAM,OAAO,CAAC;AAgB1D,OAAO,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAG1E,MAAM,WAAW,sBAAuB,SAAQ,WAAW;IACzD,KAAK,CAAC,EAAE,UAAU,EAAE,CAAC;IACrB,MAAM,EAAE,iBAAiB,CAAC,QAAQ,CAAC,CAAC;IACpC,aAAa,CAAC,EAAE,iBAAiB,CAAC,QAAQ,CAAC,CAAC;IAC5C,KAAK,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;IAEnC,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC;IAEjB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,MAAM,EACN,aAAa,EACb,IAAS,EACT,UAAU,EACV,SAAiB,EACjB,UAAkB,EAClB,KAAK,EACL,MAAM,EACN,KAAU,EACV,GAAG,KAAK,EACT,EAAE,sBAAsB,2CAmExB"}

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

@@ -1,24 +1,35 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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, TagsListItem, } from './search.js';
+import { SearchDialog, SearchDialogClose, SearchDialogContent, SearchDialogFooter, SearchDialogHeader, SearchDialogIcon, SearchDialogInput, SearchDialogList, SearchDialogOverlay, TagsList, TagsListItem, } from './search.js';
+import { useI18n } from '../../contexts/i18n.js';
 /**
  * Orama Cloud integration
  */
-export default function OramaSearchDialog({ client, searchOptions, tags, defaultTag, showOrama = false, allowClear = false, index, ...props }) {
+export default function OramaSearchDialog({ client, searchOptions, tags = [], defaultTag, showOrama = false, allowClear = false, index, footer, links = [], ...props }) {
+    const { locale } = useI18n();
     const [tag, setTag] = useState(defaultTag);
     const { search, setSearch, query } = useDocsSearch({
         type: 'orama-cloud',
         client,
         index,
         params: searchOptions,
-    }, undefined, tag);
+        locale,
+        tag,
+    });
+    const defaultItems = useMemo(() => 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: _jsxs(_Fragment, { children: [tags ? (_jsxs(TagsList, { tag: tag, onTagChange: setTag, allowClear: allowClear, children: [tags.map((tag) => (_jsx(TagsListItem, { value: tag.value, children: tag.name }, tag.value))), showOrama && _jsx(Label, {})] })) : (showOrama && _jsx(Label, {})), props.footer] }) }));
+    const label = showOrama && _jsx(Label, {});
+    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, {})] }), query.data !== 'empty' && query.data && (_jsx(SearchDialogList, { items: query.data })), query.data === 'empty' && defaultItems.length > 0 && (_jsx(SearchDialogList, { items: 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 Label() {
     return (_jsx("a", { href: "https://orama.com", rel: "noreferrer noopener", className: "ms-auto text-xs text-fd-muted-foreground", children: "Search powered by Orama" }));

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

@@ -1,31 +1,43 @@
 import { type ComponentProps, type ReactNode } from 'react';
+import { DialogContent, DialogOverlay } from '@radix-ui/react-dialog';
 import type { SortedResult } from 'fumadocs-core/server';
-export type SearchLink = [name: string, href: string];
+import type { SharedProps } from '../../contexts/search.js';
 type ReactSortedResult = Omit<SortedResult, 'content'> & {
     external?: boolean;
     content: ReactNode;
 };
-export interface TagItem {
-    name: string;
-    value: string;
-}
-export interface SharedProps {
-    open: boolean;
-    onOpenChange: (open: boolean) => void;
-    /**
-     * Custom links to be displayed if search is empty
-     */
-    links?: SearchLink[];
-}
-interface SearchDialogProps extends SharedProps {
+export type { SharedProps };
+export interface SearchDialogProps extends SharedProps {
     search: string;
     onSearchChange: (v: string) => void;
     isLoading?: boolean;
-    hideResults?: boolean;
-    results: ReactSortedResult[] | 'empty';
-    footer?: ReactNode;
+    children: ReactNode;
 }
-export declare function SearchDialog({ open, onOpenChange, footer, links, search, onSearchChange, isLoading, ...props }: SearchDialogProps): import("react/jsx-runtime").JSX.Element;
+export declare function SearchDialog({ open, onOpenChange, search, onSearchChange, isLoading, children, }: SearchDialogProps): import("react/jsx-runtime").JSX.Element;
+export declare function SearchDialogHeader(props: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+export declare function SearchDialogInput(props: ComponentProps<'input'>): import("react/jsx-runtime").JSX.Element;
+export declare function SearchDialogClose({ children, className, ...props }: ComponentProps<'button'>): import("react/jsx-runtime").JSX.Element;
+export declare function SearchDialogFooter(props: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+export declare function SearchDialogOverlay(props: ComponentProps<typeof DialogOverlay>): import("react/jsx-runtime").JSX.Element;
+export declare function SearchDialogContent({ children, ...props }: ComponentProps<typeof DialogContent>): import("react/jsx-runtime").JSX.Element;
+export declare function SearchDialogList({ items, Empty, Item, ...props }: Omit<ComponentProps<'div'>, 'children'> & {
+    items: ReactSortedResult[];
+    /**
+     * Renderer for empty list UI
+     */
+    Empty?: () => ReactNode;
+    /**
+     * Renderer for items
+     */
+    Item?: (props: {
+        item: ReactSortedResult;
+        onClick: () => void;
+    }) => ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function SearchDialogListItem({ item, className, children, ...props }: ComponentProps<'button'> & {
+    item: ReactSortedResult;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function SearchDialogIcon(props: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
 export interface TagsListProps extends ComponentProps<'div'> {
     tag?: string;
     onTagChange: (tag: string | undefined) => void;
@@ -35,5 +47,20 @@ export declare function TagsList({ tag, onTagChange, allowClear, ...props }: Tag
 export declare function TagsListItem({ value, className, ...props }: ComponentProps<'button'> & {
     value: string;
 }): import("react/jsx-runtime").JSX.Element;
-export {};
+export declare function useSearch(): {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    search: string;
+    onSearchChange: (v: string) => void;
+    isLoading: boolean;
+};
+export declare function useTagsList(): {
+    value?: string;
+    onValueChange: (value: string | undefined) => void;
+    allowClear: boolean;
+};
+export declare function useSearchList(): {
+    active: string | null;
+    setActive: (v: string | null) => void;
+};
 //# sourceMappingURL=search.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"search.d.ts","sourceRoot":"","sources":["../../../src/components/dialog/search.tsx"],"names":[],"mappings":"AASA,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AAUf,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAKzD,MAAM,MAAM,UAAU,GAAG,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC;AAEtD,KAAK,iBAAiB,GAAG,IAAI,CAAC,YAAY,EAAE,SAAS,CAAC,GAAG;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,SAAS,CAAC;CACpB,CAAC;AAEF,MAAM,WAAW,OAAO;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAEtC;;OAEG;IACH,KAAK,CAAC,EAAE,UAAU,EAAE,CAAC;CACtB;AAED,UAAU,iBAAkB,SAAQ,WAAW;IAC7C,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,EAAE,iBAAiB,EAAE,GAAG,OAAO,CAAC;IAEvC,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,YAAY,EACZ,MAAM,EACN,KAAU,EACV,MAAM,EACN,cAAc,EACd,SAAS,EACT,GAAG,KAAK,EACT,EAAE,iBAAiB,2CA6DnB;AAkJD,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC1D,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAC/C,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAmBD,wBAAgB,QAAQ,CAAC,EACvB,GAAG,EACH,WAAW,EACX,UAAkB,EAClB,GAAG,KAAK,EACT,EAAE,aAAa,2CAoBf;AAED,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,QAAQ,CAAC,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAC;CACf,2CAmBA"}
+{"version":3,"file":"search.d.ts","sourceRoot":"","sources":["../../../src/components/dialog/search.tsx"],"names":[],"mappings":"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"}

package/dist/components/dialog/search.js

@@ -1,56 +1,81 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { FileText, Hash, LoaderCircle, Search as SearchIcon, Text, } from '../../icons.js';
-import { useCallback, useEffect, useMemo, useState, } from 'react';
-import { useI18n } from '../../contexts/i18n.js';
+import { createContext, Fragment, useCallback, useContext, useEffect, useMemo, useState, } from 'react';
+import { I18nLabel, useI18n } from '../../contexts/i18n.js';
 import { cn } from '../../utils/cn.js';
 import { buttonVariants } from '../../components/ui/button.js';
 import { Dialog, DialogContent, DialogOverlay, DialogTitle, } from '@radix-ui/react-dialog';
 import { cva } from 'class-variance-authority';
 import { useEffectEvent } from 'fumadocs-core/utils/use-effect-event';
-import { createContext, useRouter } from 'fumadocs-core/framework';
-export function SearchDialog({ open, onOpenChange, footer, links = [], search, onSearchChange, isLoading, ...props }) {
+import { useRouter } from 'fumadocs-core/framework';
+import { useOnChange } from 'fumadocs-core/utils/use-on-change';
+const Context = createContext(null);
+const ListContext = createContext(null);
+const TagsListContext = createContext(null);
+export function SearchDialog({ open, onOpenChange, search, onSearchChange, isLoading = false, children, }) {
+    const [active, setActive] = useState(null);
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsx(Context.Provider, { value: useMemo(() => ({
+                open,
+                onOpenChange,
+                search,
+                onSearchChange,
+                active,
+                setActive,
+                isLoading,
+            }), [active, isLoading, onOpenChange, onSearchChange, open, search]), children: children }) }));
+}
+export function SearchDialogHeader(props) {
+    return (_jsx("div", { ...props, className: cn('flex flex-row items-center gap-2 px-3', props.className) }));
+}
+export function SearchDialogInput(props) {
+    const { text } = useI18n();
+    const { search, onSearchChange } = useSearch();
+    return (_jsx("input", { ...props, value: search, onChange: (e) => onSearchChange(e.target.value), placeholder: text.search, className: "w-0 flex-1 bg-transparent py-3 text-base placeholder:text-fd-muted-foreground focus-visible:outline-none" }));
+}
+export function SearchDialogClose({ children = 'Esc', className, ...props }) {
+    const { onOpenChange } = useSearch();
+    return (_jsx("button", { type: "button", onClick: () => onOpenChange(false), className: cn(buttonVariants({
+            color: 'outline',
+            className: 'text-xs p-1.5',
+        }), className), ...props, children: children }));
+}
+export function SearchDialogFooter(props) {
+    return (_jsx("div", { ...props, className: cn('mt-auto border-t p-3 empty:hidden', props.className) }));
+}
+export function SearchDialogOverlay(props) {
+    return (_jsx(DialogOverlay, { ...props, className: cn('fixed inset-0 z-50 bg-black/30 backdrop-blur-sm data-[state=closed]:animate-fd-fade-out data-[state=open]:animate-fd-fade-in', props.className) }));
+}
+export function SearchDialogContent({ children, ...props }) {
     const { text } = useI18n();
-    const [active, setActive] = useState();
-    const defaultItems = useMemo(() => links.map(([name, link]) => ({
-        type: 'page',
-        id: name,
-        content: name,
-        url: link,
-    })), [links]);
-    return (_jsxs(Dialog, { open: open, onOpenChange: onOpenChange, children: [_jsx(DialogOverlay, { className: "fixed inset-0 z-50 bg-black/30 backdrop-blur-sm data-[state=closed]:animate-fd-fade-out data-[state=open]:animate-fd-fade-in" }), _jsxs(DialogContent, { "aria-describedby": undefined, className: "fixed left-1/2 top-[10vh] z-50 w-[98vw] max-w-screen-sm -translate-x-1/2 rounded-lg border bg-fd-popover text-fd-popover-foreground shadow-lg data-[state=closed]:animate-fd-dialog-out data-[state=open]:animate-fd-dialog-in", children: [_jsx(DialogTitle, { className: "hidden", children: text.search }), _jsxs("div", { className: "flex flex-row items-center gap-2 px-3", children: [_jsx(LoadingIndicator, { isLoading: isLoading ?? false }), _jsx("input", { value: search, onChange: (e) => {
-                                    onSearchChange(e.target.value);
-                                    setActive(undefined);
-                                }, placeholder: text.search, className: "w-0 flex-1 bg-transparent py-3 text-base placeholder:text-fd-muted-foreground focus-visible:outline-none" }), _jsx("button", { type: "button", "aria-label": "Close Search", onClick: () => onOpenChange(false), className: cn(buttonVariants({
-                                    color: 'outline',
-                                    className: 'text-xs p-1.5',
-                                })), children: "Esc" })] }), props.results !== 'empty' || defaultItems.length > 0 ? (_jsx(SearchResults, { active: active, onActiveChange: setActive, items: props.results === 'empty' ? defaultItems : props.results, onSelect: () => onOpenChange(false) })) : null, _jsx("div", { className: "mt-auto flex flex-col border-t p-3 empty:hidden", children: footer })] })] }));
+    return (_jsxs(DialogContent, { "aria-describedby": undefined, ...props, className: cn('fixed left-1/2 top-[10vh] z-50 w-[98vw] max-w-screen-sm -translate-x-1/2 rounded-lg border bg-fd-popover text-fd-popover-foreground shadow-lg data-[state=closed]:animate-fd-dialog-out data-[state=open]:animate-fd-dialog-in', props.className), children: [_jsx(DialogTitle, { className: "hidden", children: text.search }), children] }));
 }
 const icons = {
     text: _jsx(Text, { className: "size-4 text-fd-muted-foreground" }),
     heading: _jsx(Hash, { className: "size-4 text-fd-muted-foreground" }),
     page: _jsx(FileText, { className: "size-4 text-fd-muted-foreground" }),
 };
-function SearchResults({ items, active = items.at(0)?.id, onActiveChange, onSelect, ...props }) {
-    const { text } = useI18n();
+export function SearchDialogList({ items, Empty = () => (_jsx("div", { className: "py-12 text-center text-sm", children: _jsx(I18nLabel, { label: "searchNoResult" }) })), Item = (props) => _jsx(SearchDialogListItem, { ...props }), ...props }) {
+    const [active, setActive] = useState(items.at(0)?.id ?? null);
+    const { onOpenChange } = useSearch();
     const router = useRouter();
     const onOpen = ({ external, url }) => {
         if (external)
             window.open(url, '_blank')?.focus();
         else
             router.push(url);
-        onSelect?.(url);
+        onOpenChange(false);
     };
     const onKey = useEffectEvent((e) => {
         if (e.key === 'ArrowDown' || e.key == 'ArrowUp') {
-            const idx = items.findIndex((item) => item.id === active);
-            if (idx === -1) {
-                onActiveChange(items.at(0)?.id);
-            }
-            else {
-                onActiveChange(items.at((e.key === 'ArrowDown' ? idx + 1 : idx - 1) % items.length)
-                    ?.id);
-            }
+            let idx = items.findIndex((item) => item.id === active);
+            if (idx === -1)
+                idx = 0;
+            else if (e.key === 'ArrowDown')
+                idx++;
+            else
+                idx--;
+            setActive(items.at(idx % items.length)?.id ?? null);
             e.preventDefault();
         }
         if (e.key === 'Enter') {
@@ -66,21 +91,29 @@ function SearchResults({ items, active = items.at(0)?.id, onActiveChange, onSele
             window.removeEventListener('keydown', onKey);
         };
     }, [onKey]);
-    return (_jsxs("div", { ...props, className: cn('flex max-h-[460px] flex-col overflow-y-auto border-t p-2', props.className), children: [items.length === 0 ? (_jsx("div", { className: "py-12 text-center text-sm", children: text.searchNoResult })) : null, items.map((item) => (_jsxs(CommandItem, { active: active === item.id, onPointerMove: () => onActiveChange(item.id), onClick: () => {
-                    onOpen(item);
-                }, children: [item.type !== 'page' ? (_jsx("div", { role: "none", className: "ms-2 h-full min-h-10 w-px bg-fd-border" })) : null, icons[item.type], _jsx("p", { className: "w-0 flex-1 truncate", children: item.content })] }, item.id)))] }));
-}
-function LoadingIndicator({ isLoading }) {
-    return (_jsxs("div", { className: "relative size-4", children: [_jsx(LoaderCircle, { className: cn('absolute size-full animate-spin text-fd-primary transition-opacity', !isLoading && 'opacity-0') }), _jsx(SearchIcon, { className: cn('absolute size-full text-fd-muted-foreground transition-opacity', isLoading && 'opacity-0') })] }));
+    useOnChange(items, () => {
+        if (items.length > 0)
+            setActive(items[0].id);
+    });
+    return (_jsx("div", { ...props, className: cn('flex max-h-[460px] flex-col overflow-y-auto border-t p-2', props.className), children: _jsxs(ListContext.Provider, { value: useMemo(() => ({
+                active,
+                setActive,
+            }), [active]), children: [items.length === 0 && Empty(), items.map((item) => (_jsx(Fragment, { children: Item({ item, onClick: () => onOpen(item) }) }, item.id)))] }) }));
 }
-function CommandItem({ active = false, ...props }) {
-    return (_jsx("button", { ref: useCallback((element) => {
+export function SearchDialogListItem({ item, className, children, ...props }) {
+    const { active: activeId, setActive } = useSearchList();
+    const active = item.id === activeId;
+    return (_jsxs("button", { type: "button", ref: useCallback((element) => {
             if (active && element) {
                 element.scrollIntoView({
                     block: 'nearest',
                 });
             }
-        }, [active]), type: "button", "aria-selected": active, ...props, className: cn('flex min-h-10 select-none flex-row items-center gap-2.5 rounded-lg px-2 text-start text-sm', active && 'bg-fd-accent text-fd-accent-foreground', props.className), children: props.children }));
+        }, [active]), "aria-selected": active, className: cn('flex min-h-10 select-none flex-row items-center gap-2.5 rounded-lg px-2 text-start text-sm', active && 'bg-fd-accent text-fd-accent-foreground', className), onPointerMove: () => setActive(item.id), ...props, children: [item.type !== 'page' && (_jsx("div", { role: "none", className: "ms-2 h-full min-h-10 w-px bg-fd-border" })), icons[item.type], _jsx("p", { className: "w-0 flex-1 truncate", children: children ?? item.content })] }));
+}
+export function SearchDialogIcon(props) {
+    const { isLoading } = useSearch();
+    return (_jsxs("div", { ...props, className: cn('relative size-4', props.className), children: [_jsx(LoaderCircle, { className: cn('absolute size-full animate-spin text-fd-primary transition-opacity', !isLoading && 'opacity-0') }), _jsx(SearchIcon, { className: cn('absolute size-full text-fd-muted-foreground transition-opacity', isLoading && 'opacity-0') })] }));
 }
 const itemVariants = cva('rounded-md border px-2 py-0.5 text-xs font-medium text-fd-muted-foreground transition-colors', {
     variants: {
@@ -89,7 +122,6 @@ const itemVariants = cva('rounded-md border px-2 py-0.5 text-xs font-medium text
         },
     },
 });
-const TagsListContext = createContext('TagsList');
 export function TagsList({ tag, onTagChange, allowClear = false, ...props }) {
     return (_jsx("div", { ...props, className: cn('flex items-center gap-1 flex-wrap', props.className), children: _jsx(TagsListContext.Provider, { value: useMemo(() => ({
                 value: tag,
@@ -98,8 +130,27 @@ export function TagsList({ tag, onTagChange, allowClear = false, ...props }) {
             }), [allowClear, onTagChange, tag]), children: props.children }) }));
 }
 export function TagsListItem({ value, className, ...props }) {
-    const ctx = TagsListContext.use();
-    return (_jsx("button", { type: "button", "data-active": value === ctx.value, className: cn(itemVariants({ active: value === ctx.value, className })), onClick: () => {
-            ctx.onValueChange(ctx.value === value && ctx.allowClear ? undefined : value);
+    const { onValueChange, value: selectedValue, allowClear } = useTagsList();
+    const selected = value === selectedValue;
+    return (_jsx("button", { type: "button", "data-active": selected, className: cn(itemVariants({ active: selected, className })), onClick: () => {
+            onValueChange(selected && allowClear ? undefined : value);
         }, tabIndex: -1, ...props, children: props.children }));
 }
+export function useSearch() {
+    const ctx = useContext(Context);
+    if (!ctx)
+        throw new Error('Missing <SearchDialog />');
+    return ctx;
+}
+export function useTagsList() {
+    const ctx = useContext(TagsListContext);
+    if (!ctx)
+        throw new Error('Missing <TagsList />');
+    return ctx;
+}
+export function useSearchList() {
+    const ctx = useContext(ListContext);
+    if (!ctx)
+        throw new Error('Missing <SearchDialogList />');
+    return ctx;
+}

package/dist/components/layout/sidebar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/layout/sidebar.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,cAAc,EAEnB,KAAK,EAAE,EAEP,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AACf,OAAa,EAAE,KAAK,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAU1D,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAGnE,OAAO,KAAK,EACV,uBAAuB,EACvB,uBAAuB,EACxB,MAAM,6BAA6B,CAAC;AACrC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAMrD,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,OAAO,CAAC;IAC3D;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AA2BD,wBAAgB,OAAO,CAAC,EACtB,gBAAoB,EACpB,QAAe,EACf,WAAkB,EAClB,GAAG,KAAK,EACT,EAAE,YAAY,2CAgHd;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,2CASzD;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,2CASzD;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,eAAe,2CAcrD;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,GAAG,CAAC,2CAkB1D;AAED,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,SAAS,GAAG;IACb,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,2CAsBA;AAED,wBAAgB,aAAa,CAAC,EAC5B,WAAmB,EACnB,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,2CAgBA;AAED,wBAAgB,oBAAoB,CAAC,EACnC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,uBAAuB,2CAqBzB;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,SAAS,2CAsCjD;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,uBAAuB,2CAqBlE;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,cAAc,CAAC,QAAQ,CAAC,2CAgBrE;AAgBD,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,EAAE,CAAC;QAAE,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAA;KAAE,CAAC,CAAC;IAClC,MAAM,EAAE,EAAE,CAAC;QAAE,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,SAAS,CAAA;KAAE,CAAC,CAAC;IAC1E,SAAS,EAAE,EAAE,CAAC;QAAE,IAAI,EAAE,QAAQ,CAAC,SAAS,CAAA;KAAE,CAAC,CAAC;CAC7C;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;CACzC,2CAuDA"}
+{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/layout/sidebar.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,cAAc,EAEnB,KAAK,EAAE,EAEP,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AACf,OAAa,EAAE,KAAK,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAU1D,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAGnE,OAAO,KAAK,EACV,uBAAuB,EACvB,uBAAuB,EACxB,MAAM,6BAA6B,CAAC;AACrC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAMrD,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,OAAO,CAAC;IAC3D;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AA2BD,wBAAgB,OAAO,CAAC,EACtB,gBAAoB,EACpB,QAAe,EACf,WAAkB,EAClB,GAAG,KAAK,EACT,EAAE,YAAY,2CAiHd;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,2CASzD;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,2CASzD;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,eAAe,2CAcrD;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,GAAG,CAAC,2CAkB1D;AAED,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,SAAS,GAAG;IACb,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,2CAsBA;AAED,wBAAgB,aAAa,CAAC,EAC5B,WAAmB,EACnB,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,2CAgBA;AAED,wBAAgB,oBAAoB,CAAC,EACnC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,uBAAuB,2CAqBzB;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,SAAS,2CAsCjD;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,uBAAuB,2CAqBlE;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,cAAc,CAAC,QAAQ,CAAC,2CAgBrE;AAgBD,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,EAAE,CAAC;QAAE,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAA;KAAE,CAAC,CAAC;IAClC,MAAM,EAAE,EAAE,CAAC;QAAE,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,SAAS,CAAA;KAAE,CAAC,CAAC;IAC1E,SAAS,EAAE,EAAE,CAAC;QAAE,IAAI,EAAE,QAAQ,CAAC,SAAS,CAAA;KAAE,CAAC,CAAC;CAC7C;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;CACzC,2CAuDA"}