@fumadocs/base-ui 16.7.0 → 16.7.2

package/dist/layouts/notebook/page/slots/toc-popover.js

@@ -1,141 +0,0 @@
-"use client";
-import { useI18n } from "../../../../contexts/i18n.js";
-import { cn } from "../../../../utils/cn.js";
-import { TOCScrollArea, useTOCItems } from "../../../../components/toc/index.js";
-import { TOCItems } from "../../../../components/toc/default.js";
-import { TOCItems as TOCItems$1 } from "../../../../components/toc/clerk.js";
-import { useTreePath } from "../../../../contexts/tree.js";
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../../../components/ui/collapsible.js";
-import { useNotebookLayout } from "../../client.js";
-import { createContext, use, useEffect, useEffectEvent, useMemo, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { ChevronDown } from "lucide-react";
-import { useActiveAnchor } from "fumadocs-core/toc";
-//#region src/layouts/notebook/page/slots/toc-popover.tsx
-const TocPopoverContext = createContext(null);
-function TOCPopover({ container, trigger, content, header, footer, style }) {
-	return /* @__PURE__ */ jsxs(PageTOCPopover, {
-		...container,
-		children: [/* @__PURE__ */ jsx(PageTOCPopoverTrigger, { ...trigger }), /* @__PURE__ */ jsxs(PageTOCPopoverContent, {
-			...content,
-			children: [
-				header,
-				/* @__PURE__ */ jsx(TOCScrollArea, { children: style === "clerk" ? /* @__PURE__ */ jsx(TOCItems$1, {}) : /* @__PURE__ */ jsx(TOCItems, {}) }),
-				footer
-			]
-		})]
-	});
-}
-function PageTOCPopover({ className, children, ...rest }) {
-	const ref = useRef(null);
-	const [open, setOpen] = useState(false);
-	const { isNavTransparent } = useNotebookLayout();
-	const onClick = useEffectEvent((e) => {
-		if (!open) return;
-		if (ref.current && !ref.current.contains(e.target)) setOpen(false);
-	});
-	useEffect(() => {
-		window.addEventListener("click", onClick);
-		return () => {
-			window.removeEventListener("click", onClick);
-		};
-	}, []);
-	return /* @__PURE__ */ jsx(TocPopoverContext, {
-		value: useMemo(() => ({
-			open,
-			setOpen
-		}), [setOpen, open]),
-		children: /* @__PURE__ */ jsx(Collapsible, {
-			open,
-			onOpenChange: setOpen,
-			"data-toc-popover": "",
-			className: cn("sticky top-(--fd-docs-row-2) z-10 [grid-area:toc-popover] h-(--fd-toc-popover-height) xl:hidden max-xl:layout:[--fd-toc-popover-height:--spacing(10)]", className),
-			...rest,
-			children: /* @__PURE__ */ jsx("header", {
-				ref,
-				className: cn("border-b backdrop-blur-sm transition-colors", (!isNavTransparent || open) && "bg-fd-background/80", open && "shadow-lg"),
-				children
-			})
-		})
-	});
-}
-function PageTOCPopoverTrigger({ className, ...props }) {
-	const { text } = useI18n();
-	const { open } = use(TocPopoverContext);
-	const items = useTOCItems();
-	const active = useActiveAnchor();
-	const selected = useMemo(() => items.findIndex((item) => active === item.url.slice(1)), [items, active]);
-	const path = useTreePath().at(-1);
-	const showItem = selected !== -1 && !open;
-	return /* @__PURE__ */ jsxs(CollapsibleTrigger, {
-		className: cn("flex w-full h-10 items-center text-sm text-fd-muted-foreground gap-2.5 px-4 py-2.5 text-start focus-visible:outline-none [&_svg]:size-4 md:px-6", className),
-		"data-toc-popover-trigger": "",
-		...props,
-		children: [
-			/* @__PURE__ */ jsx(ProgressCircle, {
-				value: (selected + 1) / Math.max(1, items.length),
-				max: 1,
-				className: cn("shrink-0", open && "text-fd-primary")
-			}),
-			/* @__PURE__ */ jsxs("span", {
-				className: "grid flex-1 *:my-auto *:row-start-1 *:col-start-1",
-				children: [/* @__PURE__ */ jsx("span", {
-					className: cn("truncate transition-[opacity,translate,color]", open && "text-fd-foreground", showItem && "opacity-0 -translate-y-full pointer-events-none"),
-					children: path?.name ?? text.toc
-				}), /* @__PURE__ */ jsx("span", {
-					className: cn("truncate transition-[opacity,translate]", !showItem && "opacity-0 translate-y-full pointer-events-none"),
-					children: items[selected]?.title
-				})]
-			}),
-			/* @__PURE__ */ jsx(ChevronDown, { className: cn("shrink-0 transition-transform mx-0.5", open && "rotate-180") })
-		]
-	});
-}
-function clamp(input, min, max) {
-	if (input < min) return min;
-	if (input > max) return max;
-	return input;
-}
-function ProgressCircle({ value, strokeWidth = 2, size = 24, min = 0, max = 100, ...restSvgProps }) {
-	const normalizedValue = clamp(value, min, max);
-	const radius = (size - strokeWidth) / 2;
-	const circumference = 2 * Math.PI * radius;
-	const progress = normalizedValue / max * circumference;
-	const circleProps = {
-		cx: size / 2,
-		cy: size / 2,
-		r: radius,
-		fill: "none",
-		strokeWidth
-	};
-	return /* @__PURE__ */ jsxs("svg", {
-		role: "progressbar",
-		viewBox: `0 0 ${size} ${size}`,
-		"aria-valuenow": normalizedValue,
-		"aria-valuemin": min,
-		"aria-valuemax": max,
-		...restSvgProps,
-		children: [/* @__PURE__ */ jsx("circle", {
-			...circleProps,
-			className: "stroke-current/25"
-		}), /* @__PURE__ */ jsx("circle", {
-			...circleProps,
-			stroke: "currentColor",
-			strokeDasharray: circumference,
-			strokeDashoffset: circumference - progress,
-			strokeLinecap: "round",
-			transform: `rotate(-90 ${size / 2} ${size / 2})`,
-			className: "transition-all"
-		})]
-	});
-}
-function PageTOCPopoverContent(props) {
-	return /* @__PURE__ */ jsx(CollapsibleContent, {
-		"data-toc-popover-content": "",
-		...props,
-		className: cn("flex flex-col px-4 max-h-[50vh] md:px-6", props.className),
-		children: props.children
-	});
-}
-//#endregion
-export { TOCPopover };