fumadocs-ui 10.0.1 → 10.0.2

package/dist/{chunk-N7GXEVOA.js → chunk-VYTHQTZE.js}

@@ -13,14 +13,23 @@ var ScrollArea = React.forwardRef(({ className, children, ...props }, ref) => /*
     className: twMerge("overflow-hidden", className),
     ...props,
     children: [
-      /* @__PURE__ */ jsx(ScrollAreaPrimitive.Viewport, { className: "size-full rounded-[inherit]", children }),
+      children,
       /* @__PURE__ */ jsx(ScrollAreaPrimitive.Corner, {}),
-      /* @__PURE__ */ jsx(ScrollBar, { orientation: "horizontal" }),
       /* @__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,
   {
@@ -39,5 +48,7 @@ var ScrollBar = React.forwardRef(({ className, orientation = "vertical", ...prop
 ScrollBar.displayName = ScrollAreaPrimitive.Scrollbar.displayName;
 
 export {
-  ScrollArea
+  ScrollArea,
+  ScrollViewport,
+  ScrollBar
 };

package/dist/{chunk-Q3BC4RGT.js → chunk-ZDIJ7KSY.js}

@@ -1,6 +1,8 @@
 import {
-  ScrollArea
-} from "./chunk-N7GXEVOA.js";
+  ScrollArea,
+  ScrollBar,
+  ScrollViewport
+} from "./chunk-VYTHQTZE.js";
 import {
   useCopyButton
 } from "./chunk-24NYFO7H.js";
@@ -56,7 +58,10 @@ var CodeBlock = forwardRef(
               onCopy
             }
           ),
-          /* @__PURE__ */ jsx(ScrollArea, { ref: areaRef, children: props.children })
+          /* @__PURE__ */ jsxs(ScrollArea, { ref: areaRef, children: [
+            /* @__PURE__ */ jsx(ScrollViewport, { children: props.children }),
+            /* @__PURE__ */ jsx(ScrollBar, { orientation: "horizontal" })
+          ] })
         ]
       }
     );

package/dist/components/codeblock.js

@@ -2,8 +2,8 @@
 import {
   CodeBlock,
   Pre
-} from "../chunk-Q3BC4RGT.js";
-import "../chunk-N7GXEVOA.js";
+} from "../chunk-ZDIJ7KSY.js";
+import "../chunk-VYTHQTZE.js";
 import "../chunk-24NYFO7H.js";
 import "../chunk-7GZKFBAP.js";
 import "../chunk-TK3TM3MR.js";

package/dist/layout.client.js

@@ -7,8 +7,9 @@ import {
   useTreeContext
 } from "./chunk-C4PI62MH.js";
 import {
-  ScrollArea
-} from "./chunk-N7GXEVOA.js";
+  ScrollArea,
+  ScrollViewport
+} from "./chunk-VYTHQTZE.js";
 import {
   Popover,
   PopoverContent,
@@ -338,11 +339,11 @@ function Sidebar({
         "max-md:fixed max-md:inset-0 max-md:z-40 max-md:bg-background/80 max-md:pt-16 max-md:backdrop-blur-md max-md:data-[open=false]:hidden"
       ),
       children: /* @__PURE__ */ jsxs3(SidebarContext.Provider, { value: context, children: [
-        /* @__PURE__ */ jsx3(ScrollArea, { className: "flex-1", children: /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-8 pb-10 pt-4 max-md:px-4 md:pr-3 md:pt-10", children: [
+        /* @__PURE__ */ jsx3(ScrollArea, { className: "flex-1", children: /* @__PURE__ */ jsx3(ScrollViewport, { children: /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-8 pb-10 pt-4 max-md:px-4 md:pr-3 md:pt-10", children: [
           banner,
           items.length > 0 && /* @__PURE__ */ jsx3("div", { className: "lg:hidden", children: items.map((item) => /* @__PURE__ */ jsx3(BaseItem, { item, nested: true }, item.url)) }),
           /* @__PURE__ */ jsx3(NodeList, { items: root.children })
-        ] }) }),
+        ] }) }) }),
         /* @__PURE__ */ jsxs3(
           "div",
           {

package/dist/mdx.client.js

@@ -2,8 +2,8 @@
 import {
   CodeBlock,
   Pre
-} from "./chunk-Q3BC4RGT.js";
-import "./chunk-N7GXEVOA.js";
+} from "./chunk-ZDIJ7KSY.js";
+import "./chunk-VYTHQTZE.js";
 import "./chunk-24NYFO7H.js";
 import "./chunk-7GZKFBAP.js";
 import "./chunk-TK3TM3MR.js";

package/dist/page.client.js

@@ -2,6 +2,10 @@
 import {
   useTreeContext
 } from "./chunk-C4PI62MH.js";
+import {
+  ScrollArea,
+  ScrollViewport
+} from "./chunk-VYTHQTZE.js";
 import "./chunk-7F2LGCS6.js";
 import {
   useI18n
@@ -12,7 +16,7 @@ import {
 import "./chunk-6C3VEZWH.js";
 
 // src/page.client.tsx
-import { useEffect as useEffect2, useMemo, useState as useState2 } from "react";
+import { useEffect as useEffect2, useMemo, useState } from "react";
 import { cva } from "class-variance-authority";
 import { ChevronLeftIcon, ChevronRightIcon as ChevronRightIcon2 } from "lucide-react";
 import Link2 from "next/link";
@@ -21,41 +25,35 @@ import { usePathname as usePathname2 } from "next/navigation";
 // src/components/toc.tsx
 import { TextIcon } from "lucide-react";
 import * as Primitive from "fumadocs-core/toc";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 function TOCItems({ items }) {
   const { text } = useI18n();
-  const [pos, setPos] = useState();
-  return /* @__PURE__ */ jsxs(
-    Primitive.TOCProvider,
-    {
-      toc: items,
-      className: "relative overflow-hidden pt-4 text-sm first:pt-0",
-      children: [
-        /* @__PURE__ */ jsxs("h3", { className: "mb-4 inline-flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx(TextIcon, { className: "size-4" }),
-          text.toc
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 border-l-2 text-muted-foreground", children: [
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              role: "none",
-              className: twMerge(
-                "absolute left-0 border-l-2 transition-all",
-                pos && "border-primary"
-              ),
-              style: {
-                top: pos?.[0],
-                height: pos?.[1]
-              }
-            }
-          ),
-          items.map((item) => /* @__PURE__ */ jsx(TOCItem2, { item, setMarker: setPos }, item.url))
-        ] })
-      ]
-    }
-  );
+  const containerRef = useRef(null);
+  const markerRef = useRef(null);
+  const setPos = ([top, height]) => {
+    const element = markerRef.current;
+    if (!element)
+      return;
+    element.style.setProperty("top", `${top}px`);
+    element.style.setProperty("height", `${height}px`);
+    element.style.setProperty("display", `block`);
+  };
+  return /* @__PURE__ */ jsx(ScrollArea, { className: "pt-4 text-sm first:pt-0", children: /* @__PURE__ */ jsx(ScrollViewport, { className: "relative", ref: containerRef, children: /* @__PURE__ */ jsxs(Primitive.TOCScrollProvider, { containerRef, toc: items, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "none",
+        ref: markerRef,
+        className: "absolute left-0 hidden border-l-2 border-primary transition-all"
+      }
+    ),
+    /* @__PURE__ */ jsxs("h3", { className: "mb-4 inline-flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(TextIcon, { className: "size-4" }),
+      text.toc
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1 border-l-2 text-muted-foreground", children: items.map((item) => /* @__PURE__ */ jsx(TOCItem2, { item, setMarker: setPos }, item.url)) })
+  ] }) }) });
 }
 function TOCItem2({
   item,
@@ -124,7 +122,7 @@ function Breadcrumb() {
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function LastUpdate(props) {
   const { text } = useI18n();
-  const [date, setDate] = useState2("");
+  const [date, setDate] = useState("");
   useEffect2(() => {
     setDate(props.date.toLocaleDateString());
   }, [props.date]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fumadocs-ui",
-  "version": "10.0.1",
+  "version": "10.0.2",
   "description": "The framework for building a documentation website in Next.js",
   "keywords": [
     "NextJs",
@@ -97,7 +97,7 @@
     "react-medium-image-zoom": "^5.1.10",
     "tailwind-merge": "^2.2.1",
     "tailwindcss": "^3.4.1",
-    "fumadocs-core": "10.0.1"
+    "fumadocs-core": "10.0.2"
   },
   "devDependencies": {
     "@algolia/client-search": "^4.22.1",