fumadocs-ui 11.3.2 → 12.0.1

package/dist/components/roll-button.js

@@ -1,4 +1,8 @@
 "use client";
+import {
+  useTreeContext
+} from "../chunk-34Z7WODD.js";
+import "../chunk-AN2Y6MA2.js";
 import {
   buttonVariants
 } from "../chunk-7GZKFBAP.js";
@@ -9,12 +13,19 @@ import "../chunk-MLKGABMK.js";
 
 // src/components/roll-button.tsx
 import { ChevronUp } from "lucide-react";
-import { useEffect, useState } from "react";
-import { jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { usePathname } from "next/navigation";
+import { jsx, jsxs } from "react/jsx-runtime";
 function RollButton({
-  percentage = 0.2
+  percentage = 0.1
 }) {
   const [show, setShow] = useState(false);
+  const { navigation } = useTreeContext();
+  const pathname = usePathname();
+  const current = useMemo(
+    () => navigation.find((item) => item.url === pathname),
+    [pathname, navigation]
+  );
   useEffect(() => {
     const listener = () => {
       const element = document.scrollingElement;
@@ -27,7 +38,7 @@ function RollButton({
       window.removeEventListener("scroll", listener);
     };
   }, [percentage]);
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     "button",
     {
       type: "button",
@@ -35,18 +46,20 @@ function RollButton({
       className: twMerge(
         buttonVariants({
           color: "secondary",
-          size: "icon",
-          className: "fixed bottom-8 p-3 right-8 z-50 shadow-md rounded-full transition-all"
+          className: "fixed top-16 [&_svg]:size-4 gap-1 left-1/2 translate-x-[-50%] z-10 shadow-md rounded-full transition-all md:top-4"
         }),
         !show && "translate-y-20 opacity-0"
       ),
-      onClick: () => {
+      onClick: useCallback(() => {
         document.scrollingElement?.scrollTo({
           top: 0,
           behavior: "smooth"
         });
-      },
-      children: /* @__PURE__ */ jsx(ChevronUp, {})
+      }, []),
+      children: [
+        current?.icon ?? /* @__PURE__ */ jsx(ChevronUp, {}),
+        current?.name
+      ]
     }
   );
 }

package/dist/components/type-table.js

@@ -3,7 +3,7 @@ import {
   Popover,
   PopoverContent,
   PopoverTrigger
-} from "../chunk-WNKY4RA5.js";
+} from "../chunk-UBVEKNRF.js";
 import {
   twMerge
 } from "../chunk-TK3TM3MR.js";

package/dist/docs.client.d.ts

@@ -0,0 +1,19 @@
+import { L as LinkItemType, S as SidebarProps, N as NavProps } from './layout.client-Duq0TTke.js';
+export { a as Sidebar } from './layout.client-Duq0TTke.js';
+export { T as TreeContextProvider } from './tree-CrKzI9Nz.js';
+import { ButtonHTMLAttributes } from 'react';
+import 'fumadocs-core/server';
+
+interface LinksMenuProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    items: LinkItemType[];
+    footer?: React.ReactNode;
+}
+declare function LinksMenu({ items, footer, ...props }: LinksMenuProps): React.ReactElement;
+
+declare function DynamicSidebar(props: SidebarProps): React.ReactElement;
+
+declare function ThemeToggle({ className, ...props }: ButtonHTMLAttributes<HTMLButtonElement>): React.ReactElement;
+
+declare function SubNav({ title, url, children, enableSearch, }: NavProps): React.ReactElement;
+
+export { DynamicSidebar, LinksMenu, SubNav, ThemeToggle };

package/dist/docs.client.js

@@ -0,0 +1,406 @@
+"use client";
+import {
+  LargeSearchToggle,
+  LinkItem,
+  LinksMenu,
+  SearchToggle,
+  ThemeToggle
+} from "./chunk-2BHQGWSJ.js";
+import {
+  ScrollArea,
+  ScrollViewport
+} from "./chunk-VYTHQTZE.js";
+import "./chunk-UBVEKNRF.js";
+import {
+  TreeContextProvider,
+  useTreeContext
+} from "./chunk-34Z7WODD.js";
+import {
+  hasActive,
+  isActive
+} from "./chunk-AN2Y6MA2.js";
+import {
+  useSidebar
+} from "./chunk-3F57TIUQ.js";
+import {
+  useSearchContext
+} from "./chunk-FSPYEOFC.js";
+import "./chunk-CRYPD6UZ.js";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger
+} from "./chunk-7XPZOMJ2.js";
+import {
+  buttonVariants
+} from "./chunk-7GZKFBAP.js";
+import {
+  twMerge
+} from "./chunk-TK3TM3MR.js";
+import "./chunk-MLKGABMK.js";
+
+// src/docs.client.tsx
+import Link2 from "next/link";
+import { SidebarTrigger } from "fumadocs-core/sidebar";
+import { Menu, X } from "lucide-react";
+
+// src/components/layout/sidebar.tsx
+import { cva } from "class-variance-authority";
+import { ChevronDown, ExternalLinkIcon } from "lucide-react";
+import * as Base from "fumadocs-core/sidebar";
+import { usePathname } from "next/navigation";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState
+} from "react";
+import Link from "fumadocs-core/link";
+import { jsx, jsxs } from "react/jsx-runtime";
+var itemVariants = cva(
+  "flex w-full flex-row items-center gap-2 rounded-md px-2 py-1.5 text-muted-foreground transition-colors duration-100 [&_svg]:size-4",
+  {
+    variants: {
+      active: {
+        true: "bg-primary/10 font-medium text-primary",
+        false: "hover:bg-accent/50 hover:text-accent-foreground/80 hover:transition-none"
+      }
+    }
+  }
+);
+var defaultComponents = {
+  Folder: FolderNode,
+  Separator: SeparatorNode,
+  Item: PageNode
+};
+var Context = createContext({
+  defaultOpenLevel: 1,
+  components: defaultComponents
+});
+function Sidebar({
+  footer,
+  components,
+  defaultOpenLevel = 1,
+  banner,
+  items,
+  aside,
+  bannerProps,
+  footerProps
+}) {
+  const context = useMemo(
+    () => ({
+      defaultOpenLevel,
+      components: { ...defaultComponents, ...components }
+    }),
+    [components, defaultOpenLevel]
+  );
+  return /* @__PURE__ */ jsx(Context.Provider, { value: context, children: /* @__PURE__ */ jsxs(
+    Base.SidebarList,
+    {
+      id: "nd-sidebar",
+      blockScrollingWidth: 768,
+      ...aside,
+      className: twMerge(
+        "z-30 flex w-full flex-col text-[15px] md:sticky md:top-0 md:h-dvh md:w-[240px] md:border-e md:bg-card md:text-sm xl:w-[260px]",
+        "max-md:fixed max-md:inset-0 max-md:bg-background/80 max-md:pt-16 max-md:backdrop-blur-md max-md:data-[open=false]:hidden",
+        aside?.className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ...bannerProps,
+            className: twMerge(
+              "flex flex-col gap-2 px-4 pt-2 md:px-3 md:pt-6",
+              bannerProps?.className
+            ),
+            children: [
+              banner,
+              /* @__PURE__ */ jsx(LargeSearchToggle, { className: "rounded-lg max-md:hidden" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(ViewportContent, { children: items.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-col md:hidden", children: items.map((item, i) => /* @__PURE__ */ jsx(LinkItem, { item, on: "menu" }, i)) }) }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ...footerProps,
+            className: twMerge(
+              "flex flex-row items-center border-t px-4 py-2 md:px-3",
+              footerProps?.className
+            ),
+            children: footer
+          }
+        )
+      ]
+    }
+  ) });
+}
+function ViewportContent({
+  children
+}) {
+  const { root } = useTreeContext();
+  return /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1", children: /* @__PURE__ */ jsx(
+    ScrollViewport,
+    {
+      style: {
+        maskImage: "linear-gradient(to bottom, transparent 2px, white 16px, white calc(100% - 16px), transparent calc(100% - 2px))"
+      },
+      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-8 p-4 md:px-3", children: [
+        children,
+        /* @__PURE__ */ jsx(NodeList, { items: root.children })
+      ] })
+    }
+  ) });
+}
+function NodeList({
+  items,
+  level = 0,
+  ...props
+}) {
+  const { components } = useContext(Context);
+  return /* @__PURE__ */ jsx("div", { ...props, children: items.map((item) => {
+    const id = `${item.type}_${item.name}`;
+    switch (item.type) {
+      case "separator":
+        return /* @__PURE__ */ jsx(components.Separator, { item }, id);
+      case "folder":
+        return /* @__PURE__ */ jsx(components.Folder, { item, level: level + 1 }, id);
+      default:
+        return /* @__PURE__ */ jsx(components.Item, { item }, item.url);
+    }
+  }) });
+}
+function PageNode({
+  item: { icon, external = false, url, name }
+}) {
+  const pathname = usePathname();
+  const { closeOnRedirect } = useSidebar();
+  const active = isActive(url, pathname, false);
+  return /* @__PURE__ */ jsxs(
+    Link,
+    {
+      href: url,
+      external,
+      className: twMerge(itemVariants({ active })),
+      onClick: useCallback(() => {
+        closeOnRedirect.current = !active;
+      }, [closeOnRedirect, active]),
+      children: [
+        icon ?? (external ? /* @__PURE__ */ jsx(ExternalLinkIcon, {}) : null),
+        name
+      ]
+    }
+  );
+}
+function FolderNode({
+  item: { name, children, index, icon, defaultOpen = false },
+  level
+}) {
+  const { defaultOpenLevel } = useContext(Context);
+  const { closeOnRedirect } = useSidebar();
+  const pathname = usePathname();
+  const active = index !== void 0 && isActive(index.url, pathname, false);
+  const childActive = useMemo(
+    () => hasActive(children, pathname),
+    [children, pathname]
+  );
+  const shouldExtend = active || childActive || defaultOpenLevel >= level || defaultOpen;
+  const [extend, setExtend] = useState(shouldExtend);
+  useEffect(() => {
+    if (shouldExtend) setExtend(true);
+  }, [shouldExtend]);
+  const onClick = useCallback(
+    (e) => {
+      if (e.target !== e.currentTarget || active) {
+        setExtend((prev) => !prev);
+        e.preventDefault();
+      } else {
+        closeOnRedirect.current = !active;
+      }
+    },
+    [closeOnRedirect, active]
+  );
+  return /* @__PURE__ */ jsxs(Collapsible, { open: extend, onOpenChange: setExtend, children: [
+    index ? /* @__PURE__ */ jsxs(
+      Link,
+      {
+        className: twMerge(itemVariants({ active })),
+        href: index.url,
+        onClick,
+        children: [
+          icon,
+          name,
+          /* @__PURE__ */ jsx(
+            ChevronDown,
+            {
+              className: twMerge(
+                "ms-auto transition-transform",
+                !extend && "-rotate-90"
+              )
+            }
+          )
+        ]
+      }
+    ) : /* @__PURE__ */ jsxs(CollapsibleTrigger, { className: twMerge(itemVariants({ active })), children: [
+      icon,
+      name,
+      /* @__PURE__ */ jsx(
+        ChevronDown,
+        {
+          className: twMerge(
+            "ms-auto transition-transform",
+            !extend && "-rotate-90"
+          )
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx(
+      NodeList,
+      {
+        className: "ms-2 flex flex-col border-s py-2 ps-2",
+        items: children,
+        level
+      }
+    ) })
+  ] });
+}
+function SeparatorNode({
+  item
+}) {
+  return /* @__PURE__ */ jsx("p", { className: "mb-2 mt-8 px-2 font-medium first:mt-0", children: item.name });
+}
+
+// src/components/layout/dynamic-sidebar.tsx
+import { useCallback as useCallback2, useRef, useState as useState2 } from "react";
+import { SidebarIcon } from "lucide-react";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function DynamicSidebar(props) {
+  const { collapsed, setCollapsed } = useSidebar();
+  const [hover, setHover] = useState2(false);
+  const timerRef = useRef(0);
+  const onCollapse = useCallback2(() => {
+    setCollapsed(!collapsed);
+  }, [collapsed, setCollapsed]);
+  const onHover = useCallback2((e) => {
+    if (e.pointerType === "touch") return;
+    window.clearTimeout(timerRef.current);
+    setHover(true);
+  }, []);
+  const onLeave = useCallback2((e) => {
+    if (e.pointerType === "touch") return;
+    window.clearTimeout(timerRef.current);
+    timerRef.current = window.setTimeout(() => {
+      setHover(false);
+    }, 300);
+  }, []);
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    collapsed ? /* @__PURE__ */ jsx2(
+      "div",
+      {
+        className: "fixed inset-y-0 start-0 w-4 max-md:hidden xl:static xl:w-[260px]",
+        onPointerEnter: onHover,
+        onPointerLeave: onLeave
+      }
+    ) : null,
+    collapsed ? /* @__PURE__ */ jsx2(
+      "button",
+      {
+        type: "button",
+        "aria-label": "Collapse Sidebar",
+        className: twMerge(
+          buttonVariants({
+            color: "secondary",
+            size: "icon",
+            className: "fixed start-4 bottom-4 z-10 max-md:hidden"
+          })
+        ),
+        onClick: onCollapse,
+        children: /* @__PURE__ */ jsx2(SidebarIcon, {})
+      }
+    ) : null,
+    /* @__PURE__ */ jsx2(
+      Sidebar,
+      {
+        ...props,
+        aside: {
+          "data-collapse": collapsed,
+          "data-hover": hover,
+          onPointerEnter: onHover,
+          onPointerLeave: onLeave,
+          "aria-hidden": Boolean(collapsed && !hover),
+          className: twMerge(
+            "overflow-hidden md:transition-transform",
+            collapsed && "md:fixed md:inset-y-2 md:start-2 md:h-auto md:rounded-xl md:border md:shadow-md"
+          )
+        },
+        footer: /* @__PURE__ */ jsxs2(Fragment, { children: [
+          props.footer,
+          /* @__PURE__ */ jsx2(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Collapse Sidebar",
+              className: twMerge(
+                buttonVariants({
+                  color: "ghost",
+                  size: "icon",
+                  className: "max-md:hidden"
+                })
+              ),
+              onClick: onCollapse,
+              children: /* @__PURE__ */ jsx2(SidebarIcon, {})
+            }
+          )
+        ] })
+      }
+    )
+  ] });
+}
+
+// src/docs.client.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function SubNav({
+  title,
+  url = "/",
+  children,
+  enableSearch = true
+}) {
+  const { open } = useSidebar();
+  const { enabled } = useSearchContext();
+  return /* @__PURE__ */ jsxs3(
+    "nav",
+    {
+      id: "nd-subnav",
+      className: "sticky top-0 z-40 flex h-16 w-full flex-row items-center border-b bg-background/80 px-4 backdrop-blur-md md:hidden [&_svg]:size-5",
+      children: [
+        /* @__PURE__ */ jsx3(Link2, { href: url, className: "inline-flex items-center gap-3 font-semibold", children: title }),
+        children,
+        enabled && enableSearch ? /* @__PURE__ */ jsx3(SearchToggle, { className: "ms-auto" }) : null,
+        /* @__PURE__ */ jsx3(
+          SidebarTrigger,
+          {
+            className: twMerge(
+              buttonVariants({
+                color: "ghost",
+                size: "icon",
+                className: (!enabled || !enableSearch) && "ms-auto"
+              })
+            ),
+            children: open ? /* @__PURE__ */ jsx3(X, {}) : /* @__PURE__ */ jsx3(Menu, {})
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  DynamicSidebar,
+  LinksMenu,
+  Sidebar,
+  SubNav,
+  ThemeToggle,
+  TreeContextProvider
+};

package/dist/{i18n-K879Pt9h.d.ts → i18n-CE8z-AAs.d.ts}

@@ -6,6 +6,7 @@ interface Translations {
     chooseLanguage: string;
     nextPage: string;
     previousPage: string;
+    chooseTheme: string;
 }
 interface NamedTranslation extends Partial<Translations> {
     /**

package/dist/i18n.d.ts

@@ -1,10 +1,7 @@
-import { SelectProps } from '@radix-ui/react-select';
 import { ReactNode } from 'react';
-import { N as NamedTranslation } from './i18n-K879Pt9h.js';
-export { T as Translations } from './i18n-K879Pt9h.js';
+import { N as NamedTranslation } from './i18n-CE8z-AAs.js';
+export { T as Translations } from './i18n-CE8z-AAs.js';
 
-type LanguageSelectProps = Omit<SelectProps, 'value' | 'onValueChange'>;
-declare function LanguageSelect({ ...props }: LanguageSelectProps): React.ReactElement;
 interface I18nProviderProps {
     /**
      * Force a locale
@@ -18,4 +15,4 @@ interface I18nProviderProps {
 }
 declare function I18nProvider({ translations, locale: forceLocale, children, }: I18nProviderProps): React.ReactElement;
 
-export { I18nProvider, LanguageSelect, type LanguageSelectProps };
+export { I18nProvider };

package/dist/i18n.js

@@ -2,110 +2,13 @@
 import {
   I18nContext,
   useI18n
-} from "./chunk-PW7TBOIJ.js";
-import {
-  twMerge
-} from "./chunk-TK3TM3MR.js";
+} from "./chunk-CRYPD6UZ.js";
 import "./chunk-MLKGABMK.js";
 
 // src/i18n.tsx
 import { useCallback } from "react";
 import { useRouter, usePathname } from "next/navigation";
-
-// src/components/ui/select.tsx
-import * as SelectPrimitive from "@radix-ui/react-select";
-import { Check, ChevronDown } from "lucide-react";
-import * as React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-var Select = SelectPrimitive.Root;
-var SelectValue = SelectPrimitive.Value;
-var SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
-  SelectPrimitive.Trigger,
-  {
-    ref,
-    className: twMerge(
-      "flex h-10 w-full items-center justify-between rounded-lg border px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-muted-foreground",
-      className
-    ),
-    ...props,
-    children: [
-      children,
-      /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDown, { className: "size-4 opacity-50" }) })
-    ]
-  }
-));
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectContent = React.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx(
-  SelectPrimitive.Content,
-  {
-    ref,
-    className: twMerge(
-      "relative z-50 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=closed]:animate-popover-out data-[state=open]:animate-popover-in",
-      className
-    ),
-    position,
-    ...props,
-    children: /* @__PURE__ */ jsx(
-      SelectPrimitive.Viewport,
-      {
-        className: twMerge(
-          "p-1",
-          position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
-        ),
-        children
-      }
-    )
-  }
-) }));
-SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  SelectPrimitive.Label,
-  {
-    ref,
-    className: twMerge("py-1.5 pl-8 pr-2 text-sm font-semibold", className),
-    ...props
-  }
-));
-SelectLabel.displayName = SelectPrimitive.Label.displayName;
-var SelectItem = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
-  SelectPrimitive.Item,
-  {
-    ref,
-    className: twMerge(
-      "relative flex w-full select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    ),
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "size-4" }) }) }),
-      /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })
-    ]
-  }
-));
-SelectItem.displayName = SelectPrimitive.Item.displayName;
-var SelectSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  SelectPrimitive.Separator,
-  {
-    ref,
-    className: twMerge("-mx-1 my-1 h-px bg-muted", className),
-    ...props
-  }
-));
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
-
-// src/i18n.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-function LanguageSelect({
-  ...props
-}) {
-  const context = useI18n();
-  if (!context.translations) throw new Error("Missing prop `translations`");
-  const languages = Object.entries(context.translations);
-  return /* @__PURE__ */ jsxs2(Select, { value: context.locale, onValueChange: context.onChange, ...props, children: [
-    /* @__PURE__ */ jsx2(SelectTrigger, { children: /* @__PURE__ */ jsx2(SelectValue, { placeholder: context.text.chooseLanguage }) }),
-    /* @__PURE__ */ jsx2(SelectContent, { children: languages.map(([lang, { name }]) => /* @__PURE__ */ jsx2(SelectItem, { value: lang, children: name }, lang)) })
-  ] });
-}
+import { jsx } from "react/jsx-runtime";
 function I18nProvider({
   translations = {},
   locale: forceLocale,
@@ -124,7 +27,7 @@ function I18nProvider({
     },
     [segments, router]
   );
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx(
     I18nContext.Provider,
     {
       value: {
@@ -141,6 +44,5 @@ function I18nProvider({
   );
 }
 export {
-  I18nProvider,
-  LanguageSelect
+  I18nProvider
 };