fumadocs-ui 16.6.5 → 16.6.6

package/css/generated/flux.css

@@ -2,6 +2,7 @@
 @source inline("!isActive");
 @source inline("!open");
 @source inline("*:rounded-lg");
+@source inline("---spacing");
 @source inline("--fd-toc-width");
 @source inline("--removed-body-scroll-bar-size");
 @source inline("--spacing");
@@ -12,7 +13,6 @@
 @source inline("[&_svg]:shrink-0");
 @source inline("[&_svg]:size-4");
 @source inline("[grid-area:main]");
-@source inline("[scrollbar-width:none]");
 @source inline("a");
 @source inline("absolute");
 @source inline("active");
@@ -187,6 +187,7 @@
 @source inline("inline-flex");
 @source inline("input");
 @source inline("inset-0");
+@source inline("inset-x-0");
 @source inline("interface");
 @source inline("invisible");
 @source inline("isActive");
@@ -207,7 +208,7 @@
 @source inline("located");
 @source inline("lucide-react");
 @source inline("main");
-@source inline("mask-[linear-gradient(to_bottom,transparent,white_calc(var(--spacing)*14),white_calc(100%-var(--spacing)*14),transparent)]");
+@source inline("mask-[linear-gradient(to_bottom,transparent,white_--spacing(14),white_calc(100%---spacing(14)),transparent)]");
 @source inline("max");
 @source inline("max-h-[50vh]");
 @source inline("max-w-[1200px]");
@@ -221,6 +222,7 @@
 @source inline("menuItems");
 @source inline("mergeRefs");
 @source inline("min");
+@source inline("min-h-0");
 @source inline("min-h-11");
 @source inline("min-w-0");
 @source inline("mode");
@@ -249,6 +251,7 @@
 @source inline("number");
 @source inline("object");
 @source inline("of");
+@source inline("onAnimationComplete");
 @source inline("onClick");
 @source inline("onOpenChange");
 @source inline("opacity");
@@ -260,7 +263,6 @@
 @source inline("overflow-x-clip");
 @source inline("overflow-y-auto");
 @source inline("overflow-y-hidden");
-@source inline("overscroll-contain");
 @source inline("p");
 @source inline("p-1");
 @source inline("p-1.5");
@@ -311,10 +313,12 @@
 @source inline("rounded-lg");
 @source inline("rounded-xl");
 @source inline("rtl:rotate-180");
+@source inline("scale");
 @source inline("searchToggle");
 @source inline("secondary");
 @source inline("selected");
 @source inline("selectedIdx");
+@source inline("setBlockScroll");
 @source inline("setContainer");
 @source inline("setDate");
 @source inline("setOpen");
@@ -378,6 +382,7 @@
 @source inline("tocOptions");
 @source inline("tocPopoverEnabled");
 @source inline("tool");
+@source inline("top-0");
 @source inline("transform");
 @source inline("transition");
 @source inline("transition-all");
@@ -385,6 +390,7 @@
 @source inline("transition-opacity");
 @source inline("transition-transform");
 @source inline("translate-x-[calc(-50%-var(--removed-body-scroll-bar-size,0px)/2)]");
+@source inline("translateY");
 @source inline("tree");
 @source inline("true");
 @source inline("truncate");
@@ -400,6 +406,7 @@
 @source inline("useMemo");
 @source inline("usePathname");
 @source inline("useRef");
+@source inline("useSearchContext");
 @source inline("useSidebar");
 @source inline("useState");
 @source inline("useTOCItems");

package/css/generated/shared.css

@@ -480,6 +480,7 @@
 @source inline("is");
 @source inline("isActive");
 @source inline("isLoading");
+@source inline("isOpen");
 @source inline("isWindows");
 @source inline("it");
 @source inline("item");

package/dist/components/ui/button.d.ts

@@ -5,7 +5,7 @@ import * as class_variance_authority_types0 from "class-variance-authority/types
 declare const buttonVariants: (props?: ({
   variant?: "primary" | "outline" | "ghost" | "secondary" | null | undefined;
   color?: "primary" | "outline" | "ghost" | "secondary" | null | undefined;
-  size?: "icon" | "sm" | "icon-sm" | "icon-xs" | null | undefined;
+  size?: "sm" | "icon" | "icon-sm" | "icon-xs" | null | undefined;
 } & class_variance_authority_types0.ClassProp) | undefined) => string;
 type ButtonProps = VariantProps<typeof buttonVariants>;
 //#endregion

package/dist/contexts/search.d.ts

@@ -49,6 +49,7 @@ interface SearchProviderProps {
 }
 interface SearchContextType {
   enabled: boolean;
+  open: boolean;
   hotKey: HotKey[];
   setOpenSearch: (value: boolean) => void;
 }

package/dist/contexts/search.js

@@ -6,6 +6,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/contexts/search.tsx
 const SearchContext = createContext({
 	enabled: false,
+	open: false,
 	hotKey: [],
 	setOpenSearch: () => void 0
 });
@@ -42,9 +43,10 @@ function SearchProvider({ SearchDialog, children, preload = true, options, hotKe
 	return /* @__PURE__ */ jsxs(SearchContext, {
 		value: useMemo(() => ({
 			enabled: true,
+			open: isOpen ?? false,
 			hotKey,
 			setOpenSearch: setIsOpen
-		}), [hotKey]),
+		}), [isOpen, hotKey]),
 		children: [isOpen !== void 0 && /* @__PURE__ */ jsx(Suspense, {
 			fallback: null,
 			children: /* @__PURE__ */ jsx(SearchDialog, {

package/dist/layouts/flux/index.d.ts

@@ -58,7 +58,6 @@ declare function NavigationPanel({
   tabDropdown,
   tool,
   link,
-  className,
   children,
   ...props
 }: NavigationPanelProps & Omit<ComponentProps<typeof motion.div>, 'children'> & {

package/dist/layouts/flux/index.js

@@ -5,6 +5,7 @@ import { buttonVariants } from "../../components/ui/button.js";
 import { TreeContextProvider } from "../../contexts/tree.js";
 import { SidebarViewport, useSidebar } from "../../components/sidebar/base.js";
 import { LinkItem } from "../../utils/link-item.js";
+import { useSearchContext } from "../../contexts/search.js";
 import { SearchToggle } from "../shared/search-toggle.js";
 import { renderTitleNav, useLinkItems } from "../shared/index.js";
 import { LanguageToggle } from "../shared/language-toggle.js";
@@ -117,10 +118,16 @@ function NavigationSidebarTrigger() {
 		})
 	});
 }
-function NavigationPanel({ head, tabDropdown, tool, link, className, children = (v) => v, ...props }) {
+function NavigationPanel({ head, tabDropdown, tool, link, children = (v) => v, ...props }) {
+	const { open } = useSearchContext();
 	return /* @__PURE__ */ jsx(motion.div, {
-		className: cn("fixed left-1/2 w-[calc(100%-var(--removed-body-scroll-bar-size,0px))] translate-x-[calc(-50%-var(--removed-body-scroll-bar-size,0px)/2)] bottom-0 z-40 bg-fd-popover text-fd-popover-foreground border-t shadow-lg sm:bottom-6 sm:rounded-2xl sm:border sm:max-w-[380px]", className),
 		...props,
+		className: cn("fixed left-1/2 w-[calc(100%-var(--removed-body-scroll-bar-size,0px))] translate-x-[calc(-50%-var(--removed-body-scroll-bar-size,0px)/2)] bottom-0 z-40 bg-fd-popover text-fd-popover-foreground border-t shadow-lg sm:bottom-6 sm:rounded-2xl sm:border sm:max-w-[380px]", props.className),
+		animate: props.animate ?? {
+			scale: open ? .9 : 1,
+			translateY: open ? 20 : 0,
+			opacity: open ? .8 : 1
+		},
 		children: children(/* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex flex-row items-center ps-2.5 p-1 gap-2 min-h-11",
 			children: [head, /* @__PURE__ */ jsx("div", {

package/dist/layouts/flux/sidebar.js

@@ -5,7 +5,7 @@ import { mergeRefs } from "../../utils/merge-refs.js";
 import { SidebarCollapseTrigger as SidebarCollapseTrigger$1, SidebarFolder as SidebarFolder$1, SidebarFolderContent as SidebarFolderContent$1, SidebarFolderLink as SidebarFolderLink$1, SidebarFolderTrigger as SidebarFolderTrigger$1, SidebarItem as SidebarItem$1, SidebarProvider, SidebarSeparator as SidebarSeparator$1, SidebarTrigger as SidebarTrigger$1, SidebarViewport as SidebarViewport$1, useFolder, useFolderDepth, useSidebar } from "../../components/sidebar/base.js";
 import { createLinkItemRenderer } from "../../components/sidebar/link-item.js";
 import { createPageTreeRenderer } from "../../components/sidebar/page-tree.js";
-import { useEffect, useEffectEvent, useRef } from "react";
+import { useEffect, useEffectEvent, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { motion } from "motion/react";
@@ -43,6 +43,7 @@ function SidebarTrigger(props) {
 }
 function SidebarContent({ ref: refProp, className, children, ...props }) {
 	const ref = useRef(null);
+	const [blockScroll, setBlockScroll] = useState(false);
 	const { open, setOpen } = useSidebar();
 	const listener = useEffectEvent((e) => {
 		if (open && e.key === "Escape") {
@@ -56,8 +57,9 @@ function SidebarContent({ ref: refProp, className, children, ...props }) {
 			window.removeEventListener("keydown", listener);
 		};
 	}, []);
+	if (open && !blockScroll) setBlockScroll(true);
 	return /* @__PURE__ */ jsx(RemoveScroll, {
-		enabled: open,
+		enabled: blockScroll,
 		children: /* @__PURE__ */ jsx(motion.div, {
 			className: cn("fixed inset-0 py-10 z-30 backdrop-blur-md bg-fd-background/60", !open && "pointer-events-none"),
 			initial: "hide",
@@ -70,8 +72,11 @@ function SidebarContent({ ref: refProp, className, children, ...props }) {
 			onClick: () => {
 				setOpen(false);
 			},
+			onAnimationComplete: (definition) => {
+				if (definition === "hide") setBlockScroll(false);
+			},
 			children: /* @__PURE__ */ jsx(motion.div, {
-				className: "absolute overflow-y-auto pr-(--removed-body-scroll-bar-size,0) [scrollbar-width:none] py-16 inset-0 bottom-26 overscroll-contain mask-[linear-gradient(to_bottom,transparent,white_calc(var(--spacing)*14),white_calc(100%-var(--spacing)*14),transparent)] lg:text-sm",
+				className: "absolute top-0 min-h-0 inset-x-0 bottom-26 overflow-y-auto fd-scroll-container pr-(--removed-body-scroll-bar-size,0) py-16 mask-[linear-gradient(to_bottom,transparent,white_--spacing(14),white_calc(100%---spacing(14)),transparent)] lg:text-sm",
 				variants: {
 					show: {
 						y: 0,
@@ -83,14 +88,13 @@ function SidebarContent({ ref: refProp, className, children, ...props }) {
 					}
 				},
 				transition: {
-					duration: .3,
+					duration: .4,
 					ease: [
 						.16,
 						1,
 						.3,
 						1
-					],
-					opacity: { duration: .1 }
+					]
 				},
 				children: /* @__PURE__ */ jsx(motion.aside, {
 					id: "nd-sidebar",

package/dist/style.css

@@ -1472,12 +1472,12 @@
   .bg-transparent {
     background-color: transparent;
   }
+  .mask-\[linear-gradient\(to_bottom\,transparent\,white_--spacing\(14\)\,white_calc\(100\%---spacing\(14\)\)\,transparent\)\] {
+    mask-image: linear-gradient(to bottom,transparent,white calc(var(--spacing) * 14),white calc(100% - calc(var(--spacing) * 14)),transparent);
+  }
   .mask-\[linear-gradient\(to_bottom\,transparent\,white_16px\,white_calc\(100\%-16px\)\,transparent\)\] {
     mask-image: linear-gradient(to bottom,transparent,white 16px,white calc(100% - 16px),transparent);
   }
-  .mask-\[linear-gradient\(to_bottom\,transparent\,white_calc\(var\(--spacing\)\*14\)\,white_calc\(100\%-var\(--spacing\)\*14\)\,transparent\)\] {
-    mask-image: linear-gradient(to bottom,transparent,white calc(var(--spacing) * 14),white calc(100% - var(--spacing) * 14),transparent);
-  }
   .mask-\[linear-gradient\(to_bottom\,white\,white_30px\,transparent_80px\)\] {
     mask-image: linear-gradient(to bottom,white,white 30px,transparent 80px);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fumadocs-ui",
-  "version": "16.6.5",
+  "version": "16.6.6",
   "description": "The Radix UI version of Fumadocs UI",
   "keywords": [
     "Docs",
@@ -139,7 +139,7 @@
     "unified": "^11.0.5",
     "@fumadocs/cli": "1.2.4",
     "eslint-config-custom": "0.0.0",
-    "fumadocs-core": "16.6.5",
+    "fumadocs-core": "16.6.6",
     "tsconfig": "0.0.0"
   },
   "peerDependencies": {
@@ -148,7 +148,7 @@
     "next": "16.x.x",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
-    "fumadocs-core": "16.6.5"
+    "fumadocs-core": "16.6.6"
   },
   "peerDependenciesMeta": {
     "next": {