fumadocs-ui 8.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Fuma
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,5 @@
+# Fumadocs UI
+
+The Next.js framework for building documentation website.
+
+[Read Documentation](https://fumadocs.vercel.app/docs/ui)

package/dist/chunk-24NYFO7H.js

@@ -0,0 +1,31 @@
+// src/utils/use-copy-button.ts
+import {
+  useState,
+  useRef,
+  useEffect,
+  useCallback
+} from "react";
+function useCopyButton(onCopy) {
+  const [checked, setChecked] = useState(false);
+  const timeoutRef = useRef(null);
+  const onClick = useCallback(() => {
+    if (timeoutRef.current)
+      window.clearTimeout(timeoutRef.current);
+    timeoutRef.current = window.setTimeout(() => {
+      setChecked(false);
+    }, 1500);
+    onCopy();
+    setChecked(true);
+  }, [onCopy]);
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current)
+        window.clearTimeout(timeoutRef.current);
+    };
+  }, []);
+  return [checked, onClick];
+}
+
+export {
+  useCopyButton
+};

package/dist/chunk-2ZR5Z6B2.js

@@ -0,0 +1,105 @@
+import {
+  ScrollArea
+} from "./chunk-OG3QOLYP.js";
+import {
+  useCopyButton
+} from "./chunk-24NYFO7H.js";
+import {
+  buttonVariants
+} from "./chunk-5KW7ATCP.js";
+import {
+  cn
+} from "./chunk-KCGRUOMD.js";
+
+// src/components/codeblock.tsx
+import { CheckIcon, CopyIcon } from "lucide-react";
+import { forwardRef, useCallback, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Pre = forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx("pre", { ref, className: cn("nd-codeblock py-4", className), ...props, children: props.children });
+  }
+);
+Pre.displayName = "Pre";
+var CodeBlock = forwardRef(
+  ({ title, allowCopy = true, className, ...props }, ref) => {
+    const areaRef = useRef(null);
+    const onCopy = useCallback(() => {
+      const pre = areaRef.current?.getElementsByTagName("pre").item(0);
+      if (!pre?.textContent)
+        return;
+      void navigator.clipboard.writeText(pre.textContent);
+    }, []);
+    return /* @__PURE__ */ jsxs(
+      "figure",
+      {
+        ref,
+        className: cn(
+          "not-prose group relative my-6 overflow-hidden rounded-lg border bg-secondary/50 text-sm",
+          className
+        ),
+        ...props,
+        children: [
+          title ? /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center border-b bg-muted py-1.5 pl-4 pr-2 text-muted-foreground", children: [
+            /* @__PURE__ */ jsx("figcaption", { className: "flex-1", children: title }),
+            allowCopy ? /* @__PURE__ */ jsx(CopyButton, { onCopy }) : null
+          ] }) : allowCopy && /* @__PURE__ */ jsx(
+            CopyButton,
+            {
+              className: "absolute right-2 top-2 z-[2]",
+              onCopy
+            }
+          ),
+          /* @__PURE__ */ jsx(ScrollArea, { ref: areaRef, children: props.children })
+        ]
+      }
+    );
+  }
+);
+CodeBlock.displayName = "CodeBlock";
+function CopyButton({
+  className,
+  onCopy,
+  ...props
+}) {
+  const [checked, onClick] = useCopyButton(onCopy);
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: cn(
+        buttonVariants({
+          color: "muted",
+          className: "transition-all group-hover:opacity-100"
+        }),
+        !checked && "opacity-0",
+        className
+      ),
+      "aria-label": "Copy Text",
+      onClick,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          CheckIcon,
+          {
+            className: cn("size-3.5 transition-transform", !checked && "scale-0")
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          CopyIcon,
+          {
+            className: cn(
+              "absolute size-3.5 transition-transform",
+              checked && "scale-0"
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+
+export {
+  Pre,
+  CodeBlock
+};

package/dist/chunk-36MVEJ25.js

@@ -0,0 +1,39 @@
+// src/contexts/search.tsx
+import { createContext, useContext, useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var SearchContext = createContext(void 0);
+function useSearchContext() {
+  const ctx = useContext(SearchContext);
+  if (!ctx)
+    throw new Error("Missing root provider");
+  return ctx;
+}
+function SearchProvider({
+  SearchDialog,
+  children,
+  preload = true,
+  links = []
+}) {
+  const [isOpen, setIsOpen] = useState(preload ? false : void 0);
+  useEffect(() => {
+    const handler = (e) => {
+      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
+        setIsOpen(true);
+        e.preventDefault();
+      }
+    };
+    window.addEventListener("keydown", handler);
+    return () => {
+      window.removeEventListener("keydown", handler);
+    };
+  }, []);
+  return /* @__PURE__ */ jsxs(SearchContext.Provider, { value: { links, setOpenSearch: setIsOpen }, children: [
+    isOpen !== void 0 && /* @__PURE__ */ jsx(SearchDialog, { open: isOpen, onOpenChange: setIsOpen }),
+    children
+  ] });
+}
+
+export {
+  useSearchContext,
+  SearchProvider
+};

package/dist/chunk-5EZE3X7G.js

@@ -0,0 +1,31 @@
+import {
+  cn
+} from "./chunk-KCGRUOMD.js";
+
+// src/components/ui/collapsible.tsx
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var Collapsible = CollapsiblePrimitive.Root;
+var CollapsibleTrigger2 = CollapsiblePrimitive.CollapsibleTrigger;
+var CollapsibleContent2 = forwardRef(({ className, children, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    CollapsiblePrimitive.CollapsibleContent,
+    {
+      ref,
+      className: cn(
+        "overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+});
+CollapsibleContent2.displayName = CollapsiblePrimitive.CollapsibleContent.displayName;
+
+export {
+  Collapsible,
+  CollapsibleTrigger2 as CollapsibleTrigger,
+  CollapsibleContent2 as CollapsibleContent
+};

package/dist/chunk-5KW7ATCP.js

@@ -0,0 +1,23 @@
+// src/theme/variants.ts
+import { cva } from "class-variance-authority";
+var buttonVariants = cva(
+  "inline-flex items-center justify-center rounded-md p-2 text-sm font-medium transition-colors duration-100",
+  {
+    variants: {
+      color: {
+        outline: "border hover:bg-accent hover:text-accent-foreground",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        secondary: "border bg-secondary text-secondary-foreground hover:bg-accent hover:text-accent-foreground",
+        muted: "bg-muted text-secondary-foreground hover:bg-accent hover:text-accent-foreground"
+      },
+      size: {
+        lg: "px-4 py-2 text-medium",
+        icon: "p-1.5 [&_svg]:size-5"
+      }
+    }
+  }
+);
+
+export {
+  buttonVariants
+};

package/dist/chunk-6C3VEZWH.js

@@ -0,0 +1,9 @@
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+export {
+  __export
+};

package/dist/chunk-CBOHU2VN.js

@@ -0,0 +1,28 @@
+import {
+  cn
+} from "./chunk-KCGRUOMD.js";
+
+// src/components/heading.tsx
+import { LinkIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Heading({
+  as,
+  className,
+  ...props
+}) {
+  const As = as ?? "h1";
+  return /* @__PURE__ */ jsx(As, { className: cn("scroll-m-20", className), ...props, children: props.id ? /* @__PURE__ */ jsxs("a", { href: `#${props.id}`, className: "not-prose group", children: [
+    props.children,
+    /* @__PURE__ */ jsx(
+      LinkIcon,
+      {
+        "aria-label": "Link to section",
+        className: "ml-2 inline size-4 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100"
+      }
+    )
+  ] }) : props.children });
+}
+
+export {
+  Heading
+};

package/dist/chunk-EDUYFB4P.js

@@ -0,0 +1,43 @@
+// src/utils/shared.ts
+var defaultImageSizes = "(max-width: 768px) 100vw, (max-width: 1200px) 70vw, 800px";
+function isActive(url, pathname, nested = true) {
+  return url === pathname || nested && pathname.startsWith(`${url}/`);
+}
+function replaceOrDefault(obj, def) {
+  if (obj?.enabled === false)
+    return;
+  if (obj?.component !== void 0)
+    return obj.component;
+  return def;
+}
+function hasActive(items, url) {
+  return items.some((item) => {
+    if (item.type === "page") {
+      return item.url === url;
+    }
+    if (item.type === "folder")
+      return item.index?.url === url || hasActive(item.children, url);
+    return false;
+  });
+}
+function flattenTree(tree) {
+  return tree.flatMap((node) => {
+    if (node.type === "separator")
+      return [];
+    if (node.type === "folder") {
+      const children = flattenTree(node.children);
+      if (!node.root && node.index)
+        return [node.index, ...children];
+      return children;
+    }
+    return [node];
+  });
+}
+
+export {
+  defaultImageSizes,
+  isActive,
+  replaceOrDefault,
+  hasActive,
+  flattenTree
+};

package/dist/chunk-F62NYOL5.js

@@ -0,0 +1,44 @@
+import {
+  cn
+} from "./chunk-KCGRUOMD.js";
+
+// src/components/card.tsx
+import Link from "fumadocs-core/link";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Cards(props) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...props,
+      className: cn("grid grid-cols-1 gap-4 sm:grid-cols-2", props.className),
+      children: props.children
+    }
+  );
+}
+function Card({
+  icon,
+  title,
+  description,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    Link,
+    {
+      ...props,
+      className: cn(
+        "not-prose block rounded-lg border bg-card p-4 text-sm text-card-foreground shadow-md transition-colors hover:bg-muted/80",
+        props.className
+      ),
+      children: [
+        icon ? /* @__PURE__ */ jsx("div", { className: "mb-2 w-fit rounded-md border bg-muted p-2 text-muted-foreground [&_svg]:size-4", children: icon }) : null,
+        /* @__PURE__ */ jsx("h3", { className: "mb-1 font-medium", children: title }),
+        /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: description })
+      ]
+    }
+  );
+}
+
+export {
+  Cards,
+  Card
+};

package/dist/chunk-GZQICERS.js

@@ -0,0 +1,31 @@
+import {
+  cn
+} from "./chunk-KCGRUOMD.js";
+
+// src/components/ui/popover.tsx
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var Popover = PopoverPrimitive.Root;
+var PopoverTrigger = PopoverPrimitive.Trigger;
+var PopoverContent = React.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+  PopoverPrimitive.Content,
+  {
+    ref,
+    align,
+    sideOffset,
+    side: "bottom",
+    className: cn(
+      "z-50 max-w-[90vw] rounded-md border bg-popover p-2 text-popover-foreground shadow-md outline-none data-[state=closed]:animate-popover-out data-[state=open]:animate-popover-in",
+      className
+    ),
+    ...props
+  }
+) }));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export {
+  Popover,
+  PopoverTrigger,
+  PopoverContent
+};

package/dist/chunk-IXYX64FW.js

@@ -0,0 +1,243 @@
+import {
+  useSearchContext
+} from "./chunk-36MVEJ25.js";
+import {
+  useI18n
+} from "./chunk-YAHHY62W.js";
+import {
+  buttonVariants
+} from "./chunk-5KW7ATCP.js";
+import {
+  cn
+} from "./chunk-KCGRUOMD.js";
+
+// src/components/dialog/search.tsx
+import { FileTextIcon, HashIcon, TextIcon } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useMemo } from "react";
+
+// src/components/ui/command.tsx
+import { Command as CommandPrimitive } from "cmdk";
+import { Search } from "lucide-react";
+import * as React2 from "react";
+
+// src/components/ui/dialog.tsx
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Dialog = DialogPrimitive.Root;
+var DialogContent = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { children: [
+  /* @__PURE__ */ jsx(DialogPrimitive.DialogOverlay, { className: "fixed inset-0 z-50 bg-background/50 backdrop-blur-sm data-[state=closed]:animate-fade-out data-[state=open]:animate-fade-in" }),
+  /* @__PURE__ */ jsx(
+    DialogPrimitive.Content,
+    {
+      ref,
+      className: cn(
+        "fixed left-[50%] top-[10vh] z-50 w-[98vw] max-w-[640px] origin-left translate-x-[-50%] rounded-lg border bg-popover p-6 text-popover-foreground shadow-lg data-[state=closed]:animate-dialog-out data-[state=open]:animate-dialog-in",
+        className
+      ),
+      ...props,
+      children
+    }
+  )
+] }));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+function DialogHeader({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex flex-col space-y-1.5 text-center sm:text-left",
+        className
+      ),
+      ...props
+    }
+  );
+}
+DialogHeader.displayName = "DialogHeader";
+function DialogFooter({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cn("mt-auto flex flex-col p-3", className), ...props });
+}
+DialogFooter.displayName = "DialogFooter";
+var DialogClose = DialogPrimitive.Close;
+
+// src/components/ui/command.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var Command = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
+  CommandPrimitive,
+  {
+    ref,
+    className: cn("flex max-h-[80vh] flex-col", className),
+    shouldFilter: false,
+    loop: true,
+    ...props
+  }
+));
+Command.displayName = CommandPrimitive.displayName;
+var CommandInput = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 px-3", children: [
+  /* @__PURE__ */ jsx2(Search, { className: "size-4 shrink-0 text-muted-foreground" }),
+  /* @__PURE__ */ jsx2(
+    CommandPrimitive.Input,
+    {
+      ref,
+      className: cn(
+        "w-full bg-transparent py-3 text-base outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed",
+        className
+      ),
+      ...props
+    }
+  ),
+  /* @__PURE__ */ jsx2(
+    DialogClose,
+    {
+      className: cn(
+        buttonVariants({
+          color: "outline",
+          size: "icon",
+          className: "text-xs"
+        })
+      ),
+      children: "Esc"
+    }
+  )
+] }));
+CommandInput.displayName = CommandPrimitive.Input.displayName;
+var CommandList = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
+  CommandPrimitive.List,
+  {
+    ref,
+    className: cn("max-h-[460px] overflow-y-auto border-t p-2", className),
+    ...props
+  }
+));
+CommandList.displayName = CommandPrimitive.List.displayName;
+var CommandEmpty = React2.forwardRef((props, ref) => /* @__PURE__ */ jsx2(
+  CommandPrimitive.Empty,
+  {
+    ref,
+    className: "py-12 text-center text-sm",
+    ...props
+  }
+));
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
+var CommandGroup = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
+  CommandPrimitive.Group,
+  {
+    ref,
+    className: cn(
+      "overflow-hidden [&_[cmdk-group-heading]]:px-3 [&_[cmdk-group-heading]]:py-2 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+      className
+    ),
+    ...props
+  }
+));
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
+var CommandSeparator = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
+  CommandPrimitive.Separator,
+  {
+    ref,
+    className: cn("h-px bg-border", className),
+    ...props
+  }
+));
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
+var CommandItem = React2.forwardRef(({ className, icon, nested = false, children, ...props }, ref) => /* @__PURE__ */ jsx2(
+  CommandPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      "select-none rounded-lg px-2 text-sm aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        className: cn(
+          "flex min-h-10 items-center gap-3",
+          nested && "ml-2 gap-2 border-l pl-4"
+        ),
+        children: [
+          /* @__PURE__ */ jsx2("div", { className: "text-muted-foreground [&_svg]:size-4", children: icon }),
+          /* @__PURE__ */ jsx2("p", { className: "w-0 flex-1 truncate", children })
+        ]
+      }
+    )
+  }
+));
+CommandItem.displayName = CommandPrimitive.Item.displayName;
+
+// src/components/dialog/search.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function SearchDialog(props) {
+  return /* @__PURE__ */ jsx3(Dialog, { ...props, children: props.children });
+}
+function SearchDialogContent({
+  footer,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs3(DialogContent, { className: "p-0", children: [
+    /* @__PURE__ */ jsx3(Search2, { ...props }),
+    footer ? /* @__PURE__ */ jsx3(DialogFooter, { className: "border-t", children: footer }) : null
+  ] });
+}
+function Search2({ search, onSearchChange, results }) {
+  const { text } = useI18n();
+  const router = useRouter();
+  const { links, setOpenSearch } = useSearchContext();
+  const defaultItems = useMemo(() => {
+    return links.map(([name, link]) => ({
+      type: "page",
+      id: name,
+      content: name,
+      url: link
+    }));
+  }, [links]);
+  const items = results === "empty" ? defaultItems : results;
+  const hideList = results === "empty" && defaultItems.length === 0;
+  const onOpen = (url) => {
+    router.push(url);
+    setOpenSearch(false);
+  };
+  return /* @__PURE__ */ jsxs3(Command, { children: [
+    /* @__PURE__ */ jsx3(
+      CommandInput,
+      {
+        value: search,
+        onValueChange: onSearchChange,
+        placeholder: text.search
+      }
+    ),
+    /* @__PURE__ */ jsxs3(CommandList, { className: cn(hideList && "hidden"), children: [
+      /* @__PURE__ */ jsx3(CommandEmpty, { children: text.searchNoResult }),
+      /* @__PURE__ */ jsx3(CommandGroup, { value: "result", children: items.map((item) => /* @__PURE__ */ jsx3(
+        CommandItem,
+        {
+          value: item.id,
+          onSelect: () => {
+            onOpen(item.url);
+          },
+          icon: {
+            text: /* @__PURE__ */ jsx3(TextIcon, {}),
+            heading: /* @__PURE__ */ jsx3(HashIcon, {}),
+            page: /* @__PURE__ */ jsx3(FileTextIcon, {})
+          }[item.type],
+          nested: item.type !== "page",
+          children: item.content
+        },
+        item.id
+      )) })
+    ] })
+  ] });
+}
+
+export {
+  SearchDialog,
+  SearchDialogContent
+};

package/dist/chunk-KCGRUOMD.js

@@ -0,0 +1,13 @@
+// src/utils/cn.ts
+import { extendTailwindMerge } from "tailwind-merge";
+var cn = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      "font-size": [{ text: ["medium"] }]
+    }
+  }
+});
+
+export {
+  cn
+};