@fumadocs/base-ui 16.7.12 → 16.7.14

package/css/generated/shared.css

@@ -24,8 +24,6 @@
 @source inline("--easing");
 @source inline("--fd-animated-height");
 @source inline("--fd-banner-height");
-@source inline("--fd-height");
-@source inline("--fd-top");
 @source inline("--padding-right");
 @source inline("--popup-height");
 @source inline("--popup-width");
@@ -282,7 +280,6 @@
 @source inline("data-ending-style:h-0");
 @source inline("data-ending-style:opacity-0");
 @source inline("data-ending-style:scale-90");
-@source inline("data-hidden");
 @source inline("data-icon");
 @source inline("data-instant:transition-none");
 @source inline("data-line-numbers");
@@ -726,7 +723,7 @@
 @source inline("onChange");
 @source inline("onChangeRef");
 @source inline("onClick");
-@source inline("onContainerResize");
+@source inline("onCompute");
 @source inline("onCopy");
 @source inline("onKey");
 @source inline("onKeyDown");
@@ -736,7 +733,6 @@
 @source inline("onPointerLeave");
 @source inline("onPointerMove");
 @source inline("onPrint");
-@source inline("onResize");
 @source inline("onSearchChange");
 @source inline("onSearchChangeCallback");
 @source inline("onSelect");
@@ -943,6 +939,7 @@
 @source inline("setActive");
 @source inline("setChecked");
 @source inline("setCollapsed");
+@source inline("setComputed");
 @source inline("setHidden");
 @source inline("setHover");
 @source inline("setIsOpen");
@@ -1063,7 +1060,6 @@
 @source inline("this");
 @source inline("throw");
 @source inline("thumbBox");
-@source inline("thumbRef");
 @source inline("tier");
 @source inline("timeoutRef");
 @source inline("timerRef");
@@ -1118,7 +1114,6 @@
 @source inline("updateAnchor");
 @source inline("updated");
 @source inline("updates");
-@source inline("upper");
 @source inline("upperOffset");
 @source inline("upperX");
 @source inline("url");

package/dist/components/image-zoom.d.ts

@@ -1,7 +1,7 @@
+import { UncontrolledProps } from "../node_modules/.pnpm/react-medium-image-zoom@5.4.3_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/react-medium-image-zoom/dist/Uncontrolled.js";
 import { ComponentProps } from "react";
 import { ImageProps } from "fumadocs-core/framework";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
-import { UncontrolledProps } from "react-medium-image-zoom";
 
 //#region src/components/image-zoom.d.ts
 type ImageZoomProps = ImageProps & {

package/dist/components/image-zoom.js

@@ -1,8 +1,8 @@
 "use client";
+import { Uncontrolled } from "../node_modules/.pnpm/react-medium-image-zoom@5.4.3_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/react-medium-image-zoom/dist/Uncontrolled.js";
 import "./image-zoom2.css";
 import { Image } from "fumadocs-core/framework";
 import { jsx } from "react/jsx-runtime";
-import Zoom from "react-medium-image-zoom";
 //#region src/components/image-zoom.tsx
 function getImageSrc(src) {
 	if (typeof src === "string") return src;
@@ -13,7 +13,7 @@ function getImageSrc(src) {
 	return "";
 }
 function ImageZoom({ zoomInProps, children, rmiz, ...props }) {
-	return /* @__PURE__ */ jsx(Zoom, {
+	return /* @__PURE__ */ jsx(Uncontrolled, {
 		zoomMargin: 20,
 		wrapElement: "span",
 		...rmiz,

package/dist/components/toc/clerk.js

@@ -3,7 +3,7 @@ import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
 import { useI18n } from "../../contexts/i18n.js";
 import { cn } from "../../utils/cn.js";
 import { mergeRefs } from "../../utils/merge-refs.js";
-import { TocThumb, useTOCItems } from "./index.js";
+import { useTOCItems } from "./index.js";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import * as Primitive from "fumadocs-core/toc";
@@ -31,7 +31,7 @@ function TOCItems({ ref, className, thumbBox = true, ...props }) {
 		const output = [];
 		for (let i = 0; i < items.length; i++) {
 			const item = items[i];
-			const element = container.querySelector(`a[href="#${item.url.slice(1)}"]`);
+			const element = container.querySelector(`a[href="${item.url}"]`);
 			if (!element) continue;
 			const styles = getComputedStyle(element);
 			const x = getLineOffset(item.depth) + .5;
@@ -91,31 +91,27 @@ function TOCItems({ ref, className, thumbBox = true, ...props }) {
 			width: w,
 			height: h,
 			d,
-			itemLineLengths
+			itemLineLengths,
+			positions
 		});
 	}, [items, thumbBox]);
 	useEffect(() => {
+		const container = containerRef.current;
+		if (!container) return;
+		const observer = new ResizeObserver(onPrint);
+		observer.observe(container);
 		onPrint();
+		return () => {
+			observer.unobserve(container);
+		};
 	}, [onPrint]);
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [svg && /* @__PURE__ */ jsxs(TocThumb, {
-		containerRef,
-		onContainerResize: onPrint,
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [svg && /* @__PURE__ */ jsxs("div", {
 		className: "absolute top-0 inset-s-0",
 		style: {
 			width: svg.width,
 			height: svg.height
 		},
-		children: [/* @__PURE__ */ jsx("svg", {
-			xmlns: "http://www.w3.org/2000/svg",
-			viewBox: `0 0 ${svg.width} ${svg.height}`,
-			className: "absolute transition-[clip-path]",
-			style: {
-				width: svg.width,
-				height: svg.height,
-				clipPath: `polygon(0 var(--fd-top), 100% var(--fd-top), 100% calc(var(--fd-top) + var(--fd-height)), 0 calc(var(--fd-top) + var(--fd-height)))`
-			},
-			children: svg.content
-		}), thumbBox && /* @__PURE__ */ jsx(ThumbBox, { computed: svg })]
+		children: [/* @__PURE__ */ jsx(ThumbTrack, { computed: svg }), thumbBox && /* @__PURE__ */ jsx(ThumbBox, { computed: svg })]
 	}), /* @__PURE__ */ jsx("div", {
 		ref: mergeRefs(containerRef, ref),
 		className: cn("flex flex-col", className),
@@ -129,6 +125,25 @@ function TOCEmpty() {
 		children: text.tocNoHeadings
 	});
 }
+function ThumbTrack({ computed }) {
+	const items = Primitive.useItems();
+	const startIdx = items.findIndex((item) => item.active);
+	if (startIdx === -1) return;
+	const endIdx = items.findLastIndex((item) => item.active);
+	const top = `${computed.positions[startIdx][0]}px`;
+	const bottom = `${computed.positions[endIdx][1]}px`;
+	return /* @__PURE__ */ jsx("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		viewBox: `0 0 ${computed.width} ${computed.height}`,
+		className: "absolute transition-[clip-path]",
+		style: {
+			width: computed.width,
+			height: computed.height,
+			clipPath: `polygon(0 ${top}, 100% ${top}, 100% ${bottom}, 0 ${bottom})`
+		},
+		children: computed.content
+	});
+}
 function ThumbBox({ computed }) {
 	const items = Primitive.useItems();
 	const previousRef = useRef(null);

package/dist/components/toc/default.js

@@ -3,8 +3,8 @@ import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
 import { useI18n } from "../../contexts/i18n.js";
 import { cn } from "../../utils/cn.js";
 import { mergeRefs } from "../../utils/merge-refs.js";
-import { TocThumb } from "./index.js";
-import { useRef } from "react";
+import { useTOCItems } from "./index.js";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as Primitive from "fumadocs-core/toc";
 //#region src/components/toc/default.tsx
@@ -15,19 +15,55 @@ var default_exports = /* @__PURE__ */ __exportAll({
 });
 function TOCItems({ ref, className, ...props }) {
 	const containerRef = useRef(null);
+	const items = useTOCItems();
+	const [computed, setComputed] = useState(null);
+	const onCompute = useCallback(() => {
+		const container = containerRef.current;
+		if (!container) return;
+		if (items.length === 0) {
+			setComputed(null);
+			return;
+		}
+		const positions = [];
+		for (const item of items) {
+			const element = container.querySelector(`a[href="${item.url}"]`);
+			if (!element) continue;
+			const styles = getComputedStyle(element);
+			positions.push([element.offsetTop + parseFloat(styles.paddingTop), element.offsetTop + element.clientHeight - parseFloat(styles.paddingBottom)]);
+		}
+		setComputed({ positions });
+	}, [items]);
+	useEffect(() => {
+		const container = containerRef.current;
+		if (!container) return;
+		const observer = new ResizeObserver(onCompute);
+		observer.observe(container);
+		onCompute();
+		return () => {
+			observer.disconnect();
+		};
+	}, [onCompute]);
 	return /* @__PURE__ */ jsxs("div", {
 		className: "relative",
-		children: [/* @__PURE__ */ jsx(TocThumb, {
-			containerRef,
-			className: "absolute inset-y-0 inset-s-0 bg-fd-primary w-px transition-[clip-path]",
-			style: { clipPath: "polygon(0 var(--fd-top), 100% var(--fd-top), 100% calc(var(--fd-top) + var(--fd-height)), 0 calc(var(--fd-top) + var(--fd-height)))" }
-		}), /* @__PURE__ */ jsx("div", {
+		children: [computed && /* @__PURE__ */ jsx(TocThumb, { computed }), /* @__PURE__ */ jsx("div", {
 			ref: mergeRefs(ref, containerRef),
 			className: cn("flex flex-col border-s border-fd-foreground/10", className),
 			...props
 		})]
 	});
 }
+function TocThumb({ computed }) {
+	const items = Primitive.useItems();
+	const startIdx = items.findIndex((item) => item.active);
+	if (startIdx === -1) return;
+	const endIdx = items.findLastIndex((item) => item.active);
+	const top = `${computed.positions[startIdx][0]}px`;
+	const bottom = `${computed.positions[endIdx][1]}px`;
+	return /* @__PURE__ */ jsx("div", {
+		className: "absolute inset-y-0 inset-s-0 bg-fd-primary w-px transition-[clip-path]",
+		style: { clipPath: `polygon(0 ${top}, 100% ${top}, 100% ${bottom}, 0 ${bottom})` }
+	});
+}
 function TOCEmpty() {
 	const { text } = useI18n();
 	return /* @__PURE__ */ jsx("div", {

package/dist/components/toc/index.d.ts

@@ -1,4 +1,4 @@
-import { ComponentProps, RefObject } from "react";
+import { ComponentProps } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as Primitive from "fumadocs-core/toc";
 
@@ -16,14 +16,5 @@ declare function TOCScrollArea({
   className,
   ...props
 }: ComponentProps<'div'>): _$react_jsx_runtime0.JSX.Element;
-interface TocThumbProps extends ComponentProps<'div'> {
-  containerRef: RefObject<HTMLElement | null>;
-  onContainerResize?: () => void;
-}
-declare function TocThumb({
-  containerRef,
-  onContainerResize,
-  ...props
-}: TocThumbProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
-export { TOCProvider, TOCProviderProps, TOCScrollArea, TocThumb, useActiveAnchor, useActiveAnchors, useItems, useTOCItems };
+export { TOCProvider, TOCProviderProps, TOCScrollArea, useActiveAnchor, useActiveAnchors, useItems, useTOCItems };

package/dist/components/toc/index.js

@@ -2,15 +2,13 @@
 import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
 import { cn } from "../../utils/cn.js";
 import { mergeRefs } from "../../utils/merge-refs.js";
-import { createContext, use, useEffect, useEffectEvent, useRef } from "react";
+import { createContext, use, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 import * as Primitive from "fumadocs-core/toc";
-import { useOnChange } from "fumadocs-core/utils/use-on-change";
 //#region src/components/toc/index.tsx
 var toc_exports = /* @__PURE__ */ __exportAll({
 	TOCProvider: () => TOCProvider,
 	TOCScrollArea: () => TOCScrollArea,
-	TocThumb: () => TocThumb,
 	useActiveAnchor: () => useActiveAnchor,
 	useActiveAnchors: () => useActiveAnchors,
 	useItems: () => useItems,
@@ -43,60 +41,5 @@ function TOCScrollArea({ ref, className, ...props }) {
 		})
 	});
 }
-function TocThumb({ containerRef, onContainerResize, ...props }) {
-	const thumbRef = useRef(null);
-	const active = useActiveAnchors();
-	function update(info) {
-		const element = thumbRef.current;
-		const container = containerRef.current;
-		if (!element || !container) return;
-		element.style.setProperty("--fd-top", `${info.top}px`);
-		element.style.setProperty("--fd-height", `${info.height}px`);
-	}
-	function calc(active) {
-		const container = containerRef.current;
-		if (!container || container.clientHeight === 0) return null;
-		if (active.length === 0) return {
-			height: 0,
-			top: 0
-		};
-		let upper = Number.MAX_VALUE;
-		let lower = 0;
-		for (const item of active) {
-			const element = container.querySelector(`a[href="#${item}"]`);
-			if (!element) continue;
-			const styles = getComputedStyle(element);
-			upper = Math.min(upper, element.offsetTop + parseFloat(styles.paddingTop));
-			lower = Math.max(lower, element.offsetTop + element.clientHeight - parseFloat(styles.paddingBottom));
-		}
-		return {
-			top: upper,
-			height: lower - upper
-		};
-	}
-	const onResize = useEffectEvent(() => {
-		const result = calc(active);
-		if (result) update(result);
-		onContainerResize?.();
-	});
-	useEffect(() => {
-		if (!containerRef.current) return;
-		const container = containerRef.current;
-		const observer = new ResizeObserver(onResize);
-		observer.observe(container);
-		return () => {
-			observer.disconnect();
-		};
-	}, [containerRef]);
-	useOnChange(active, () => {
-		const result = calc(active);
-		if (result) update(result);
-	});
-	return /* @__PURE__ */ jsx("div", {
-		ref: thumbRef,
-		"data-hidden": active.length === 0,
-		...props
-	});
-}
 //#endregion
-export { TOCProvider, TOCScrollArea, TocThumb, toc_exports, useActiveAnchor, useActiveAnchors, useItems, useTOCItems };
+export { TOCProvider, TOCScrollArea, toc_exports, useActiveAnchor, useActiveAnchors, useItems, useTOCItems };

package/dist/node_modules/.pnpm/react-medium-image-zoom@5.4.3_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/react-medium-image-zoom/dist/Controlled.d.ts

@@ -0,0 +1,36 @@
+import React from "react";
+
+//#region ../../node_modules/.pnpm/react-medium-image-zoom@5.4.3_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/react-medium-image-zoom/dist/Controlled.d.ts
+declare const enum ModalState {
+  LOADED = "LOADED",
+  LOADING = "LOADING",
+  UNLOADED = "UNLOADED",
+  UNLOADING = "UNLOADING"
+}
+interface ControlledProps {
+  a11yNameButtonUnzoom?: string;
+  a11yNameButtonZoom?: string;
+  canSwipeToUnzoom?: boolean;
+  children: React.ReactNode;
+  classDialog?: string;
+  IconUnzoom?: React.ElementType;
+  IconZoom?: React.ElementType;
+  isDisabled?: boolean;
+  isZoomed: boolean;
+  onZoomChange?: (value: boolean, data: {
+    event: React.SyntheticEvent | Event;
+  }) => void;
+  swipeToUnzoomThreshold?: number;
+  wrapElement?: 'div' | 'span';
+  ZoomContent?: (data: {
+    buttonUnzoom: React.ReactElement<HTMLButtonElement>;
+    img: React.ReactElement | null;
+    isZoomImgLoaded: boolean;
+    modalState: ModalState;
+    onUnzoom: (e: Event) => void;
+  }) => React.ReactElement;
+  zoomImg?: React.ImgHTMLAttributes<HTMLImageElement>;
+  zoomMargin?: number;
+}
+//#endregion
+export { ControlledProps };