fumadocs-ui 14.1.0 → 14.2.0

package/dist/chunk-45REPLUI.js

@@ -0,0 +1,259 @@
+import {
+  buttonVariants
+} from "./chunk-QKOA6KEZ.js";
+import {
+  FileText,
+  Hash,
+  LoaderCircle,
+  Search,
+  Text
+} from "./chunk-5QPVK7QM.js";
+import {
+  twMerge
+} from "./chunk-TK3TM3MR.js";
+import {
+  useSearchContext
+} from "./chunk-ET4TW6M5.js";
+import {
+  useSidebar
+} from "./chunk-27HFSL7N.js";
+import {
+  useI18n
+} from "./chunk-EFMHXXHW.js";
+
+// src/components/dialog/search.tsx
+import { useRouter } from "next/navigation";
+import {
+  useMemo,
+  useEffect,
+  useState,
+  useRef
+} from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogOverlay,
+  DialogTitle
+} from "@radix-ui/react-dialog";
+import { jsx, jsxs } from "react/jsx-runtime";
+function SearchDialog({
+  open,
+  onOpenChange,
+  footer,
+  links = [],
+  ...props
+}) {
+  const { text } = useI18n();
+  const defaultItems = useMemo(
+    () => links.map(([name, link]) => ({
+      type: "page",
+      id: name,
+      content: name,
+      url: link
+    })),
+    [links]
+  );
+  return /* @__PURE__ */ jsxs(Dialog, { open, onOpenChange, children: [
+    /* @__PURE__ */ jsx(DialogOverlay, { className: "fixed inset-0 z-50 bg-fd-background/50 backdrop-blur-sm data-[state=closed]:animate-fd-fade-out data-[state=open]:animate-fd-fade-in" }),
+    /* @__PURE__ */ jsxs(
+      DialogContent,
+      {
+        "aria-describedby": text.search,
+        className: "fixed left-1/2 top-[10vh] z-50 w-[98vw] max-w-screen-sm origin-left -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: [
+          /* @__PURE__ */ jsx(DialogTitle, { className: "hidden", children: text.search }),
+          /* @__PURE__ */ jsx(
+            SearchInput,
+            {
+              search: props.search,
+              onSearchChange: props.onSearchChange,
+              isLoading: props.isLoading
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            SearchList,
+            {
+              items: props.results === "empty" ? defaultItems : props.results,
+              hideResults: props.results === "empty" && defaultItems.length === 0
+            }
+          ),
+          footer ? /* @__PURE__ */ jsx("div", { className: "mt-auto flex flex-col border-t p-3", children: footer }) : null
+        ]
+      }
+    )
+  ] });
+}
+var icons = {
+  text: /* @__PURE__ */ jsx(Text, { className: "size-4 text-fd-muted-foreground" }),
+  heading: /* @__PURE__ */ jsx(Hash, { className: "size-4 text-fd-muted-foreground" }),
+  page: /* @__PURE__ */ jsx(FileText, { className: "size-4 text-fd-muted-foreground" })
+};
+function SearchInput({ search, onSearchChange, isLoading }) {
+  const { text } = useI18n();
+  const { setOpenSearch } = useSearchContext();
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center gap-2 px-3", children: [
+    /* @__PURE__ */ jsx(LoadingIndicator, { isLoading: isLoading ?? false }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        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"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": "Close Search",
+        onClick: () => {
+          setOpenSearch(false);
+        },
+        className: twMerge(
+          buttonVariants({
+            color: "outline",
+            className: "text-xs p-1.5"
+          })
+        ),
+        children: "Esc"
+      }
+    )
+  ] });
+}
+function SearchList({ items, hideResults = false }) {
+  const [active, setActive] = useState();
+  const { text } = useI18n();
+  const router = useRouter();
+  const sidebar = useSidebar();
+  const { setOpenSearch } = useSearchContext();
+  if (items.length > 0 && (!active || items.every((item) => item.id !== active))) {
+    setActive(items[0].id);
+  }
+  const listenerRef = useRef();
+  listenerRef.current = (e) => {
+    if (e.key === "ArrowDown" || e.key == "ArrowUp") {
+      setActive((cur) => {
+        const idx = items.findIndex((item) => item.id === cur);
+        if (idx === -1) return items.at(0)?.id;
+        return items.at(
+          (e.key === "ArrowDown" ? idx + 1 : idx - 1) % items.length
+        )?.id;
+      });
+      e.preventDefault();
+    }
+    if (e.key === "Enter") {
+      const selected = items.find((item) => item.id === active);
+      if (selected) onOpen(selected.url);
+      e.preventDefault();
+    }
+  };
+  useEffect(() => {
+    const listener = (e) => {
+      listenerRef.current?.(e);
+    };
+    window.addEventListener("keydown", listener);
+    return () => {
+      window.removeEventListener("keydown", listener);
+    };
+  }, []);
+  const onOpen = (url) => {
+    router.push(url);
+    setOpenSearch(false);
+    sidebar.setOpen(false);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: twMerge(
+        "flex max-h-[460px] flex-col overflow-y-auto border-t p-2",
+        hideResults && "hidden"
+      ),
+      children: [
+        items.length === 0 ? /* @__PURE__ */ jsx("div", { className: "py-12 text-center text-sm", children: text.searchNoResult }) : null,
+        items.map((item) => /* @__PURE__ */ jsxs(
+          CommandItem,
+          {
+            value: item.id,
+            active,
+            onActiveChange: setActive,
+            onClick: () => {
+              onOpen(item.url);
+            },
+            children: [
+              item.type !== "page" ? /* @__PURE__ */ jsx(
+                "div",
+                {
+                  role: "none",
+                  className: "ms-2 h-full min-h-10 w-px bg-fd-border"
+                }
+              ) : null,
+              icons[item.type],
+              /* @__PURE__ */ jsx("p", { className: "w-0 flex-1 truncate", children: item.content })
+            ]
+          },
+          item.id
+        ))
+      ]
+    }
+  );
+}
+function LoadingIndicator({ isLoading }) {
+  return /* @__PURE__ */ jsxs("div", { className: "relative size-4", children: [
+    /* @__PURE__ */ jsx(
+      LoaderCircle,
+      {
+        className: twMerge(
+          "absolute size-full animate-spin text-fd-primary transition-opacity",
+          !isLoading && "opacity-0"
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Search,
+      {
+        className: twMerge(
+          "absolute size-full text-fd-muted-foreground transition-opacity",
+          isLoading && "opacity-0"
+        )
+      }
+    )
+  ] });
+}
+function CommandItem({
+  active,
+  onActiveChange,
+  value,
+  ...props
+}) {
+  const ref = useRef(null);
+  useEffect(() => {
+    const element = ref.current;
+    if (active === value && element) {
+      element.scrollIntoView({
+        block: "nearest"
+      });
+    }
+  }, [active, value]);
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      type: "button",
+      "aria-selected": active === value,
+      onPointerMove: () => onActiveChange(value),
+      ...props,
+      className: twMerge(
+        "flex min-h-10 select-none flex-row items-center gap-2.5 rounded-lg px-2 text-start text-sm aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-selected:bg-fd-accent aria-selected:text-fd-accent-foreground",
+        props.className
+      ),
+      children: props.children
+    }
+  );
+}
+
+export {
+  SearchDialog
+};

package/dist/chunk-DGKCMOIC.js

@@ -0,0 +1,56 @@
+import {
+  twMerge
+} from "./chunk-TK3TM3MR.js";
+
+// src/components/dialog/tag-list.tsx
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+var itemVariants = cva(
+  "rounded-md border px-2 py-0.5 text-xs font-medium text-fd-muted-foreground transition-colors",
+  {
+    variants: {
+      active: {
+        true: "bg-fd-accent text-fd-accent-foreground"
+      }
+    }
+  }
+);
+function TagsList({
+  tag,
+  onTagChange,
+  items,
+  allowClear,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...props,
+      className: twMerge("flex flex-row items-center gap-1", props.className),
+      children: [
+        items.map((item) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: twMerge(itemVariants({ active: tag === item.value })),
+            onClick: () => {
+              if (tag === item.value && allowClear) {
+                onTagChange(void 0);
+              } else {
+                onTagChange(item.value);
+              }
+            },
+            tabIndex: -1,
+            children: item.name
+          },
+          item.value
+        )),
+        props.children
+      ]
+    }
+  );
+}
+
+export {
+  TagsList
+};

package/dist/components/callout.d.ts

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import { HTMLAttributes, ReactNode } from 'react';
 
-declare const Callout: react.ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "title" | "icon" | "type"> & {
+declare const Callout: react.ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "title" | "type" | "icon"> & {
     title?: ReactNode;
     /**
      * @defaultValue info

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

@@ -1,12 +1,13 @@
-import { SearchIndex } from 'algoliasearch/lite';
+import { AlgoliaOptions } from 'fumadocs-core/search/client';
 import { ReactNode } from 'react';
-import { SearchOptions } from '@algolia/client-search';
-import { SharedProps, TagItem } from './search.js';
+import { SharedProps } from './search.js';
+import { T as TagItem } from '../../tag-list-BsEgfE3x.js';
+import 'react/jsx-runtime';
 import 'fumadocs-core/server';
 
 interface AlgoliaSearchDialogProps extends SharedProps {
-    index: SearchIndex;
-    searchOptions?: SearchOptions;
+    index: AlgoliaOptions['index'];
+    searchOptions?: Omit<AlgoliaOptions, 'index'>;
     footer?: ReactNode;
     defaultTag?: string;
     tags?: TagItem[];
@@ -23,6 +24,6 @@ interface AlgoliaSearchDialogProps extends SharedProps {
      */
     allowClear?: boolean;
 }
-declare function AlgoliaSearchDialog({ index, searchOptions, tags, defaultTag, showAlgolia, allowClear, ...props }: AlgoliaSearchDialogProps): React.ReactElement;
+declare function AlgoliaSearchDialog({ index, searchOptions, tags, defaultTag, showAlgolia, allowClear, ...props }: AlgoliaSearchDialogProps): ReactNode;
 
 export { type AlgoliaSearchDialogProps, AlgoliaSearchDialog as default };

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

@@ -1,8 +1,10 @@
 "use client";
 import {
-  SearchDialog,
   TagsList
-} from "../../chunk-TYZZJ335.js";
+} from "../../chunk-DGKCMOIC.js";
+import {
+  SearchDialog
+} from "../../chunk-45REPLUI.js";
 import "../../chunk-QKOA6KEZ.js";
 import "../../chunk-5QPVK7QM.js";
 import "../../chunk-TK3TM3MR.js";
@@ -12,7 +14,9 @@ import "../../chunk-EFMHXXHW.js";
 import "../../chunk-MLKGABMK.js";
 
 // src/components/dialog/search-algolia.tsx
-import { useDocsSearch } from "fumadocs-core/search/client";
+import {
+  useDocsSearch
+} from "fumadocs-core/search/client";
 import { useState } from "react";
 import { useOnChange } from "fumadocs-core/utils/use-on-change";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

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

@@ -1,5 +1,7 @@
 import { ReactNode } from 'react';
-import { SharedProps, TagItem } from './search.js';
+import { SharedProps } from './search.js';
+import { T as TagItem } from '../../tag-list-BsEgfE3x.js';
+import 'react/jsx-runtime';
 import 'fumadocs-core/server';
 
 interface DefaultSearchDialogProps extends SharedProps {
@@ -25,6 +27,6 @@ interface DefaultSearchDialogProps extends SharedProps {
      */
     allowClear?: boolean;
 }
-declare function DefaultSearchDialog({ defaultTag, tags, api, delayMs, type, allowClear, ...props }: DefaultSearchDialogProps): React.ReactElement;
+declare function DefaultSearchDialog({ defaultTag, tags, api, delayMs, type, allowClear, ...props }: DefaultSearchDialogProps): ReactNode;
 
 export { type DefaultSearchDialogProps, DefaultSearchDialog as default };

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

@@ -1,8 +1,10 @@
 "use client";
 import {
-  SearchDialog,
   TagsList
-} from "../../chunk-TYZZJ335.js";
+} from "../../chunk-DGKCMOIC.js";
+import {
+  SearchDialog
+} from "../../chunk-45REPLUI.js";
 import "../../chunk-QKOA6KEZ.js";
 import "../../chunk-5QPVK7QM.js";
 import "../../chunk-TK3TM3MR.js";

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

@@ -0,0 +1,32 @@
+import { OramaCloudOptions } from 'fumadocs-core/search/client';
+import { ReactNode } from 'react';
+import { SharedProps } from './search.js';
+import { T as TagItem } from '../../tag-list-BsEgfE3x.js';
+import 'react/jsx-runtime';
+import 'fumadocs-core/server';
+
+interface OramaSearchDialogProps extends SharedProps {
+    client: OramaCloudOptions['client'];
+    searchOptions?: OramaCloudOptions['params'];
+    footer?: ReactNode;
+    defaultTag?: string;
+    tags?: TagItem[];
+    /**
+     * Add the "Powered by Orama" label
+     *
+     * @defaultValue false
+     */
+    showOrama?: boolean;
+    /**
+     * Allow to clear tag filters
+     *
+     * @defaultValue false
+     */
+    allowClear?: boolean;
+}
+/**
+ * Orama Cloud integration
+ */
+declare function OramaSearchDialog({ client, searchOptions, tags, defaultTag, showOrama, allowClear, ...props }: OramaSearchDialogProps): ReactNode;
+
+export { type OramaSearchDialogProps, OramaSearchDialog as default };

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

@@ -0,0 +1,82 @@
+"use client";
+import {
+  TagsList
+} from "../../chunk-DGKCMOIC.js";
+import {
+  SearchDialog
+} from "../../chunk-45REPLUI.js";
+import "../../chunk-QKOA6KEZ.js";
+import "../../chunk-5QPVK7QM.js";
+import "../../chunk-TK3TM3MR.js";
+import "../../chunk-ET4TW6M5.js";
+import "../../chunk-27HFSL7N.js";
+import "../../chunk-EFMHXXHW.js";
+import "../../chunk-MLKGABMK.js";
+
+// src/components/dialog/search-orama.tsx
+import {
+  useDocsSearch
+} from "fumadocs-core/search/client";
+import { useState } from "react";
+import { useOnChange } from "fumadocs-core/utils/use-on-change";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function OramaSearchDialog({
+  client,
+  searchOptions,
+  tags,
+  defaultTag,
+  showOrama = false,
+  allowClear = false,
+  ...props
+}) {
+  const [tag, setTag] = useState(defaultTag);
+  const { search, setSearch, query } = useDocsSearch(
+    {
+      type: "orama-cloud",
+      client,
+      params: searchOptions
+    },
+    void 0,
+    tag
+  );
+  useOnChange(defaultTag, (v) => {
+    setTag(v);
+  });
+  return /* @__PURE__ */ jsx(
+    SearchDialog,
+    {
+      search,
+      onSearchChange: setSearch,
+      results: query.data ?? [],
+      isLoading: query.isLoading,
+      ...props,
+      footer: tags ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          TagsList,
+          {
+            tag,
+            onTagChange: setTag,
+            items: tags,
+            allowClear,
+            children: showOrama ? /* @__PURE__ */ jsx(Label, {}) : null
+          }
+        ),
+        props.footer
+      ] }) : props.footer
+    }
+  );
+}
+function Label() {
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      href: "https://orama.com",
+      rel: "noreferrer noopener",
+      className: "ms-auto text-xs text-fd-muted-foreground",
+      children: "Search powered by Orama"
+    }
+  );
+}
+export {
+  OramaSearchDialog as default
+};

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

@@ -1,5 +1,6 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import { SortedResult } from 'fumadocs-core/server';
-import { ReactElement, HTMLAttributes, ReactNode } from 'react';
+import { ReactNode } from 'react';
 
 type SearchLink = [name: string, href: string];
 interface SharedProps {
@@ -10,28 +11,19 @@ interface SharedProps {
      */
     links?: SearchLink[];
 }
-interface SearchDialogProps extends SharedProps, Omit<SearchContentProps, 'items'> {
+type SearchDialogProps = SharedProps & SearchValueProps & Omit<SearchResultProps, 'items'> & {
     results: SortedResult[] | 'empty';
     footer?: ReactNode;
-}
-interface SearchContentProps {
+};
+interface SearchValueProps {
     search: string;
     onSearchChange: (v: string) => void;
     isLoading?: boolean;
+}
+interface SearchResultProps {
     items: SortedResult[];
     hideResults?: boolean;
 }
-declare function SearchDialog({ open, onOpenChange, footer, links, ...props }: SearchDialogProps): ReactElement;
-interface TagItem {
-    name: string;
-    value: string | undefined;
-}
-interface TagsListProps extends HTMLAttributes<HTMLDivElement> {
-    tag?: string;
-    onTagChange: (tag: string | undefined) => void;
-    allowClear?: boolean;
-    items: TagItem[];
-}
-declare function TagsList({ tag, onTagChange, items, allowClear, ...props }: TagsListProps): ReactNode;
+declare function SearchDialog({ open, onOpenChange, footer, links, ...props }: SearchDialogProps): react_jsx_runtime.JSX.Element;
 
-export { SearchDialog, type SearchLink, type SharedProps, type TagItem, TagsList, type TagsListProps };
+export { SearchDialog, type SearchLink, type SharedProps };

package/dist/components/dialog/search.js

@@ -1,7 +1,7 @@
+"use client";
 import {
-  SearchDialog,
-  TagsList
-} from "../../chunk-TYZZJ335.js";
+  SearchDialog
+} from "../../chunk-45REPLUI.js";
 import "../../chunk-QKOA6KEZ.js";
 import "../../chunk-5QPVK7QM.js";
 import "../../chunk-TK3TM3MR.js";
@@ -10,6 +10,5 @@ import "../../chunk-27HFSL7N.js";
 import "../../chunk-EFMHXXHW.js";
 import "../../chunk-MLKGABMK.js";
 export {
-  SearchDialog,
-  TagsList
+  SearchDialog
 };

package/dist/layouts/docs.client.js

@@ -1,4 +1,7 @@
 "use client";
+import {
+  RootToggle
+} from "../chunk-WRBUXI2A.js";
 import {
   Sidebar,
   itemVariants
@@ -12,14 +15,11 @@ import {
 import {
   SearchToggle
 } from "../chunk-V6RONFCQ.js";
+import "../chunk-CDPVENXR.js";
 import {
   LanguageToggle,
   LanguageToggleText
 } from "../chunk-KZTWSBYY.js";
-import {
-  RootToggle
-} from "../chunk-WRBUXI2A.js";
-import "../chunk-CDPVENXR.js";
 import {
   Collapsible,
   CollapsibleContent,

package/dist/layouts/home.client.js

@@ -9,11 +9,11 @@ import {
   LargeSearchToggle,
   SearchToggle
 } from "../chunk-V6RONFCQ.js";
+import "../chunk-CDPVENXR.js";
 import {
   LanguageToggle,
   LanguageToggleText
 } from "../chunk-KZTWSBYY.js";
-import "../chunk-CDPVENXR.js";
 import {
   buttonVariants
 } from "../chunk-QKOA6KEZ.js";

package/dist/mdx.d.ts

@@ -18,7 +18,7 @@ declare const defaultMdxComponents: {
     h5: (props: React.HTMLAttributes<HTMLHeadingElement>) => react_jsx_runtime.JSX.Element;
     h6: (props: React.HTMLAttributes<HTMLHeadingElement>) => react_jsx_runtime.JSX.Element;
     table: typeof Table;
-    Callout: react.ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "title" | "icon" | "type"> & {
+    Callout: react.ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "title" | "type" | "icon"> & {
         title?: react.ReactNode;
         type?: "info" | "warn" | "error";
         icon?: react.ReactNode;

package/dist/provider.d.ts

@@ -5,6 +5,8 @@ import { DefaultSearchDialogProps } from './components/dialog/search-default.js'
 import { SearchLink, SharedProps } from './components/dialog/search.js';
 export { u as useI18n } from './i18n-Db2HAPOu.js';
 export { u as useTreeContext } from './tree-06ley65N.js';
+import './tag-list-BsEgfE3x.js';
+import 'react/jsx-runtime';
 import 'fumadocs-core/server';
 
 interface HotKey {