fumadocs-ui 14.1.1 → 14.2.1

package/dist/{chunk-PZTQPB4U.js → chunk-AFMXKA2S.js}

@@ -7,7 +7,7 @@ import {
 import {
   Moon,
   Sun
-} from "./chunk-5QPVK7QM.js";
+} from "./chunk-VPJMNIJX.js";
 import {
   twMerge
 } from "./chunk-TK3TM3MR.js";

package/dist/chunk-CLF6ZVYS.js

@@ -0,0 +1,259 @@
+import {
+  buttonVariants
+} from "./chunk-QKOA6KEZ.js";
+import {
+  FileText,
+  Hash,
+  LoaderCircle,
+  Search,
+  Text
+} from "./chunk-VPJMNIJX.js";
+import {
+  twMerge
+} from "./chunk-TK3TM3MR.js";
+import {
+  useSearchContext
+} from "./chunk-UUGCW3UP.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": void 0,
+        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/{chunk-CPGKWLLV.js → chunk-F534DZID.js}

@@ -2,7 +2,7 @@ import {
   CircleX,
   Info,
   TriangleAlert
-} from "./chunk-5QPVK7QM.js";
+} from "./chunk-VPJMNIJX.js";
 import {
   twMerge
 } from "./chunk-TK3TM3MR.js";

package/dist/{chunk-WRBUXI2A.js → chunk-IL64LMKR.js}

@@ -8,7 +8,7 @@ import {
 } from "./chunk-IVBHRX3O.js";
 import {
   ChevronDown
-} from "./chunk-5QPVK7QM.js";
+} from "./chunk-VPJMNIJX.js";
 import {
   twMerge
 } from "./chunk-TK3TM3MR.js";

package/dist/{chunk-IHIFNFRB.js → chunk-ILBYBJ5C.js}

@@ -1,6 +1,6 @@
 import {
   Link
-} from "./chunk-5QPVK7QM.js";
+} from "./chunk-VPJMNIJX.js";
 import {
   twMerge
 } from "./chunk-TK3TM3MR.js";

package/dist/{chunk-JUOW3DZK.js → chunk-J6XGK6ZG.js}

@@ -1,6 +1,6 @@
 import {
   LargeSearchToggle
-} from "./chunk-V6RONFCQ.js";
+} from "./chunk-W36BQGMB.js";
 import {
   isActive
 } from "./chunk-CDPVENXR.js";
@@ -16,13 +16,13 @@ import {
 import {
   ChevronDown,
   ExternalLink
-} from "./chunk-5QPVK7QM.js";
+} from "./chunk-VPJMNIJX.js";
 import {
   twMerge
 } from "./chunk-TK3TM3MR.js";
 import {
   useSearchContext
-} from "./chunk-ET4TW6M5.js";
+} from "./chunk-UUGCW3UP.js";
 import {
   useTreeContext
 } from "./chunk-YL3MZH7N.js";

package/dist/{chunk-ET4TW6M5.js → chunk-UUGCW3UP.js}

@@ -1,5 +1,11 @@
 // src/contexts/search.tsx
-import { createContext, useContext, useEffect, useMemo, useState } from "react";
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useState
+} from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var SearchContext = createContext({
   enabled: false,
@@ -9,6 +15,14 @@ var SearchContext = createContext({
 function useSearchContext() {
   return useContext(SearchContext);
 }
+function MetaOrControl() {
+  const [key, setKey] = useState("\u2318");
+  useEffect(() => {
+    const isWindows = window.navigator.userAgent.includes("Windows");
+    if (isWindows) setKey("Ctrl");
+  }, []);
+  return key;
+}
 function SearchProvider({
   SearchDialog,
   children,
@@ -17,7 +31,7 @@ function SearchProvider({
   hotKey = [
     {
       key: (e) => e.metaKey || e.ctrlKey,
-      display: "\u2318"
+      display: /* @__PURE__ */ jsx(MetaOrControl, {})
     },
     {
       key: "k",