fumadocs-ui 14.2.0 → 14.3.0

package/dist/theme/typography.js

@@ -0,0 +1,71 @@
+export const typography = {
+    css: {
+        '--tw-prose-body': `theme('colors.fd-foreground / 90%')`,
+        '--tw-prose-headings': `theme('colors.fd-foreground')`,
+        '--tw-prose-lead': `theme('colors.fd-foreground')`,
+        '--tw-prose-links': `theme('colors.fd-foreground')`,
+        '--tw-prose-bold': `theme('colors.fd-foreground')`,
+        '--tw-prose-counters': `theme('colors.fd-muted.foreground')`,
+        '--tw-prose-bullets': `theme('colors.fd-muted.foreground')`,
+        '--tw-prose-hr': `theme('colors.fd-border')`,
+        '--tw-prose-quotes': `theme('colors.fd-foreground')`,
+        '--tw-prose-quote-borders': `theme('colors.fd-border')`,
+        '--tw-prose-captions': `theme('colors.fd-foreground')`,
+        '--tw-prose-code': `theme('colors.fd-foreground')`,
+        '--tw-prose-th-borders': `theme('colors.fd-border')`,
+        '--tw-prose-td-borders': `theme('colors.fd-border')`,
+        '--tw-prose-kbd': `theme('colors.fd-foreground')`,
+        '--tw-prose-kbd-shadows': `theme('colors.fd-primary.DEFAULT / 50%')`,
+        // not used
+        '--tw-prose-pre-bg': false,
+        '--tw-prose-pre-code': false,
+        fontSize: '16px',
+        maxWidth: 'none',
+        a: false,
+        'a:hover': false,
+        'a:not([data-card])': {
+            color: 'var(--tw-prose-links)',
+            transition: 'opacity 0.3s',
+            fontWeight: '400',
+            textDecoration: 'underline',
+            textUnderlineOffset: '2px',
+            textDecorationColor: `theme('colors.fd-primary.DEFAULT')`,
+        },
+        'a:not([data-card]):hover': {
+            opacity: '80%',
+        },
+        table: {
+            fontSize: '14px',
+        },
+        'thead th': {
+            textAlign: 'start',
+        },
+        h2: {
+            fontWeight: '600',
+        },
+        code: {
+            padding: '3px',
+            border: 'solid 1px',
+            fontSize: '13px',
+            borderColor: `theme('colors.fd-border')`,
+            borderRadius: '5px',
+            fontWeight: '400',
+            background: `theme('colors.fd-muted.DEFAULT')`,
+        },
+        kbd: {
+            boxShadow: '0 0 0 1px var(--tw-prose-kbd-shadows),0 3px 0 var(--tw-prose-kbd-shadows)',
+        },
+        ul: {
+            paddingInlineStart: '1rem',
+        },
+        'ul > li': {
+            paddingInlineStart: '0',
+        },
+        // Disabled styles, handled by Fumadocs UI
+        'pre code': false,
+        'pre code::after': false,
+        'pre code::before': false,
+        'code::after': false,
+        'code::before': false,
+    },
+};

package/dist/utils/cn.d.ts

@@ -0,0 +1,2 @@
+export { twMerge as cn } from 'tailwind-merge';
+//# sourceMappingURL=cn.d.ts.map

package/dist/utils/cn.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cn.d.ts","sourceRoot":"","sources":["../../src/utils/cn.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,EAAE,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/utils/cn.js

@@ -0,0 +1 @@
+export { twMerge as cn } from 'tailwind-merge';

package/dist/utils/get-sidebar-tabs.d.ts

@@ -0,0 +1,7 @@
+import type { PageTree } from 'fumadocs-core/server';
+import type { Option } from '../components/layout/root-toggle';
+export interface TabOptions {
+    transform?: (option: Option, node: PageTree.Folder) => Option | null;
+}
+export declare function getSidebarTabs(pageTree: PageTree.Root, { transform }?: TabOptions): Option[];
+//# sourceMappingURL=get-sidebar-tabs.d.ts.map

package/dist/utils/get-sidebar-tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-sidebar-tabs.d.ts","sourceRoot":"","sources":["../../src/utils/get-sidebar-tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AAE9D,MAAM,WAAW,UAAU;IACzB,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,CAAC,MAAM,KAAK,MAAM,GAAG,IAAI,CAAC;CACtE;AAED,wBAAgB,cAAc,CAC5B,QAAQ,EAAE,QAAQ,CAAC,IAAI,EACvB,EAAE,SAAS,EAAE,GAAE,UAAe,GAC7B,MAAM,EAAE,CAqBV"}

package/dist/utils/get-sidebar-tabs.js

@@ -0,0 +1,20 @@
+export function getSidebarTabs(pageTree, { transform } = {}) {
+    const options = [];
+    function traverse(node) {
+        if (node.type === 'folder' && node.root && node.index) {
+            const option = {
+                url: node.index.url,
+                title: node.name,
+                icon: node.icon,
+                description: node.description,
+            };
+            const mapped = transform ? transform(option, node) : option;
+            if (mapped)
+                options.push(mapped);
+        }
+        if (node.type === 'folder')
+            node.children.forEach(traverse);
+    }
+    pageTree.children.forEach(traverse);
+    return options;
+}

package/dist/utils/is-active.d.ts

@@ -0,0 +1,2 @@
+export declare function isActive(url: string, pathname: string, nested?: boolean): boolean;
+//# sourceMappingURL=is-active.d.ts.map

package/dist/utils/is-active.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"is-active.d.ts","sourceRoot":"","sources":["../../src/utils/is-active.ts"],"names":[],"mappings":"AAAA,wBAAgB,QAAQ,CACtB,GAAG,EAAE,MAAM,EACX,QAAQ,EAAE,MAAM,EAChB,MAAM,UAAO,GACZ,OAAO,CAET"}

package/dist/utils/is-active.js

@@ -0,0 +1,3 @@
+export function isActive(url, pathname, nested = true) {
+    return url === pathname || (nested && pathname.startsWith(`${url}/`));
+}

package/dist/utils/use-copy-button.d.ts

@@ -0,0 +1,3 @@
+import { type MouseEventHandler } from 'react';
+export declare function useCopyButton(onCopy: () => void): [checked: boolean, onClick: MouseEventHandler];
+//# sourceMappingURL=use-copy-button.d.ts.map

package/dist/utils/use-copy-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-copy-button.d.ts","sourceRoot":"","sources":["../../src/utils/use-copy-button.ts"],"names":[],"mappings":"AACA,OAAO,EAKL,KAAK,iBAAiB,EACvB,MAAM,OAAO,CAAC;AAEf,wBAAgB,aAAa,CAC3B,MAAM,EAAE,MAAM,IAAI,GACjB,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,iBAAiB,CAAC,CAuBhD"}

package/dist/utils/use-copy-button.js

@@ -0,0 +1,25 @@
+'use client';
+import { useState, useRef, useEffect, useCallback, } from 'react';
+export function useCopyButton(onCopy) {
+    const [checked, setChecked] = useState(false);
+    const timeoutRef = useRef(null);
+    const callbackRef = useRef(onCopy);
+    callbackRef.current = onCopy;
+    const onClick = useCallback(() => {
+        if (timeoutRef.current)
+            window.clearTimeout(timeoutRef.current);
+        timeoutRef.current = window.setTimeout(() => {
+            setChecked(false);
+        }, 1500);
+        callbackRef.current();
+        setChecked(true);
+    }, []);
+    // Avoid updates after being unmounted
+    useEffect(() => {
+        return () => {
+            if (timeoutRef.current)
+                window.clearTimeout(timeoutRef.current);
+        };
+    }, []);
+    return [checked, onClick];
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fumadocs-ui",
-  "version": "14.2.0",
+  "version": "14.3.0",
   "description": "The framework for building a documentation website in Next.js",
   "keywords": [
     "NextJs",
@@ -63,21 +63,22 @@
     "@radix-ui/react-tabs": "^1.1.1",
     "@tailwindcss/typography": "^0.5.15",
     "class-variance-authority": "^0.7.0",
-    "next-themes": "^0.3.0",
+    "lucide-react": "^0.455.0",
+    "next-themes": "^0.4.3",
     "react-medium-image-zoom": "^5.2.10",
     "tailwind-merge": "^2.5.4",
-    "fumadocs-core": "14.2.0"
+    "fumadocs-core": "14.3.0"
   },
   "devDependencies": {
-    "@next/eslint-plugin-next": "^15.0.1",
+    "@next/eslint-plugin-next": "^15.0.3",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
-    "lucide-react": "^0.453.0",
-    "next": "15.0.2",
+    "next": "15.0.3",
     "postcss": "^8.4.47",
     "postcss-cli": "^11.0.0",
     "postcss-lightningcss": "^1.0.1",
     "tailwindcss": "^3.4.13",
+    "tsc-alias": "^1.8.10",
     "@fumadocs/cli": "0.0.3",
     "eslint-config-custom": "0.0.0",
     "tsconfig": "0.0.0"
@@ -98,11 +99,10 @@
   },
   "scripts": {
     "build": "pnpm build:layout && pnpm build:tailwind",
-    "build:layout": "tsup",
+    "build:layout": "tsc --project tsconfig.build.json && tsc-alias -p tsconfig.build.json",
     "build:tailwind": "postcss css/*.css --dir dist && postcss src/components/*.css --dir dist/components",
     "clean": "rimraf dist",
-    "dev": "concurrently \"pnpm dev:layout\" \"pnpm dev:tailwind\"",
-    "dev:layout": "tsup --watch",
+    "dev": "concurrently \"tsc -w --project tsconfig.build.json\" \"tsc-alias -w -p tsconfig.build.json\" \"pnpm dev:tailwind\"",
     "dev:tailwind": "postcss css/*.css --dir dist --watch",
     "lint": "eslint .",
     "types:check": "tsc --noEmit"

package/dist/chunk-27HFSL7N.js

@@ -1,53 +0,0 @@
-// src/contexts/sidebar.tsx
-import {
-  createContext,
-  useContext,
-  useState,
-  useMemo,
-  useRef
-} from "react";
-import { usePathname } from "next/navigation";
-import { SidebarProvider as BaseProvider } from "fumadocs-core/sidebar";
-import { useOnChange } from "fumadocs-core/utils/use-on-change";
-import { jsx } from "react/jsx-runtime";
-var SidebarContext = createContext(void 0);
-function useSidebar() {
-  const ctx = useContext(SidebarContext);
-  if (!ctx) throw new Error("Missing root provider");
-  return ctx;
-}
-function SidebarProvider({
-  children
-}) {
-  const closeOnRedirect = useRef(true);
-  const [open, setOpen] = useState(false);
-  const [collapsed, setCollapsed] = useState(false);
-  const pathname = usePathname();
-  useOnChange(pathname, () => {
-    if (closeOnRedirect.current) {
-      setOpen(false);
-    }
-    closeOnRedirect.current = true;
-  });
-  return /* @__PURE__ */ jsx(
-    SidebarContext.Provider,
-    {
-      value: useMemo(
-        () => ({
-          open,
-          setOpen,
-          collapsed,
-          setCollapsed,
-          closeOnRedirect
-        }),
-        [open, collapsed]
-      ),
-      children: /* @__PURE__ */ jsx(BaseProvider, { open, onOpenChange: setOpen, children })
-    }
-  );
-}
-
-export {
-  useSidebar,
-  SidebarProvider
-};

package/dist/chunk-2FLZOPQN.js

@@ -1,54 +0,0 @@
-import {
-  twMerge
-} from "./chunk-TK3TM3MR.js";
-
-// src/components/ui/scroll-area.tsx
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
-import * as React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-var ScrollArea = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
-  ScrollAreaPrimitive.Root,
-  {
-    ref,
-    className: twMerge("overflow-hidden", className),
-    ...props,
-    children: [
-      children,
-      /* @__PURE__ */ jsx(ScrollAreaPrimitive.Corner, {}),
-      /* @__PURE__ */ jsx(ScrollBar, { orientation: "vertical" })
-    ]
-  }
-));
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-var ScrollViewport = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
-  ScrollAreaPrimitive.Viewport,
-  {
-    ref,
-    className: twMerge("size-full rounded-[inherit]", className),
-    ...props,
-    children
-  }
-));
-ScrollViewport.displayName = ScrollAreaPrimitive.Viewport.displayName;
-var ScrollBar = React.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx(
-  ScrollAreaPrimitive.Scrollbar,
-  {
-    ref,
-    orientation,
-    className: twMerge(
-      "flex select-none data-[state=hidden]:animate-fd-fade-out",
-      orientation === "vertical" && "h-full w-1.5",
-      orientation === "horizontal" && "h-1.5 flex-col",
-      className
-    ),
-    ...props,
-    children: /* @__PURE__ */ jsx(ScrollAreaPrimitive.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-fd-border" })
-  }
-));
-ScrollBar.displayName = ScrollAreaPrimitive.Scrollbar.displayName;
-
-export {
-  ScrollArea,
-  ScrollViewport,
-  ScrollBar
-};

package/dist/chunk-2KMKNVSN.js

@@ -1,29 +0,0 @@
-// 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-45REPLUI.js

@@ -1,259 +0,0 @@
-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
-};