fumadocs-ui 16.6.3 → 16.6.5

package/css/generated/shared.css

@@ -537,6 +537,7 @@
 @source inline("main");
 @source inline("make");
 @source inline("mapped");
+@source inline("margin");
 @source inline("marginBottom");
 @source inline("mark");
 @source inline("marked");

package/css/lib/shiki.css

@@ -4,45 +4,38 @@
 
   code span {
     color: var(--shiki-light);
+    font-style: var(--shiki-light-font-style);
   }
-}
-
-.dark .shiki:not(.not-fumadocs-codeblock *) {
-  code span {
-    color: var(--shiki-dark);
-  }
-}
 
-:is(pre *):is(.shiki *):not(.not-fumadocs-codeblock *) {
-  .line& {
+  .line {
     position: relative;
     padding-left: var(--padding-left);
     padding-right: var(--padding-right);
   }
 
-  .line:empty& {
+  .line:empty {
     height: 1lh;
   }
 
-  .has-focused .line&:not(.focused) {
+  &.has-focused .line:not(.focused) {
     filter: blur(2px);
     transition: filter 200ms;
   }
 
-  .has-focused:hover .line&:not(.focused) {
+  &.has-focused:hover .line:not(.focused) {
     filter: blur(0);
   }
 
-  [data-line-numbers] .twoslash-meta-line& {
+  &[data-line-numbers] .twoslash-meta-line {
     padding-left: calc(var(--padding-left) + 7 * var(--spacing));
   }
 
-  [data-line-numbers] .line& {
+  &[data-line-numbers] .line {
     counter-increment: line;
     padding-left: calc(var(--padding-left) + 7 * var(--spacing));
   }
 
-  [data-line-numbers] .line&::after {
+  &[data-line-numbers] .line::after {
     position: absolute;
     content: counter(line);
     color: color-mix(
@@ -53,41 +46,48 @@
     @apply top-0 left-4;
   }
 
-  .diff&::before {
+  .diff::before {
     position: absolute;
     left: calc(var(--spacing) * 1.5);
   }
 
-  .diff.remove& {
+  .diff.remove {
     opacity: 0.7;
     --fd-counter-color: var(--color-fd-diff-remove-symbol);
     @apply bg-fd-diff-remove;
   }
 
-  .diff.remove&::before {
+  .diff.remove::before {
     content: '-';
     @apply text-fd-diff-remove-symbol;
   }
 
-  .diff.add& {
+  .diff.add {
     --fd-counter-color: var(--color-fd-diff-add-symbol);
     @apply bg-fd-diff-add;
   }
 
-  .diff.add&::before {
+  .diff.add::before {
     content: '+';
     @apply text-fd-diff-add-symbol;
   }
 
-  .highlighted& {
+  .highlighted {
     --fd-counter-color: var(--color-fd-primary);
     padding-left: calc(var(--padding-left) - 2px);
 
     @apply border-l-2 border-fd-primary/50 bg-fd-primary/10;
   }
 
-  .highlighted-word& {
+  .highlighted-word {
     padding: 1px;
     @apply border -my-px border-fd-primary/30 bg-fd-primary/10 rounded-md font-medium;
   }
 }
+
+.dark .shiki:not(.not-fumadocs-codeblock *) {
+  code span {
+    color: var(--shiki-dark);
+    font-style: var(--shiki-dark-font-style);
+  }
+}

package/dist/components/type-table.d.ts

@@ -26,6 +26,9 @@ interface TypeNode {
   default?: ReactNode;
   required?: boolean;
   deprecated?: boolean;
+  /**
+   * a list of parameters info if the type is a function.
+   */
   parameters?: ParameterNode[];
   returns?: ReactNode;
 }

package/dist/layouts/home/client.js

@@ -65,45 +65,48 @@ function Header({ nav = {}, i18n = false, links, githubUrl, themeSwitch = {}, se
 					})
 				]
 			}),
-			/* @__PURE__ */ jsxs("ul", {
+			/* @__PURE__ */ jsxs("div", {
 				className: "flex flex-row items-center ms-auto -me-1.5 lg:hidden",
 				children: [searchToggle.enabled !== false && (searchToggle.components?.sm ?? /* @__PURE__ */ jsx(SearchToggle, {
 					className: "p-2",
 					hideIfDisabled: true
-				})), /* @__PURE__ */ jsxs(NavigationMenuItem, { children: [/* @__PURE__ */ jsx(NavigationMenuTrigger, {
-					"aria-label": "Toggle Menu",
-					className: cn(buttonVariants({
-						size: "icon",
-						color: "ghost",
-						className: "group [&_svg]:size-5.5"
-					})),
-					onPointerMove: nav.enableHoverToOpen ? void 0 : (e) => e.preventDefault(),
-					children: /* @__PURE__ */ jsx(ChevronDown, { className: "transition-transform duration-300 group-data-[state=open]:rotate-180" })
-				}), /* @__PURE__ */ jsxs(NavigationMenuContent, {
-					className: "flex flex-col p-4 sm:flex-row sm:items-center sm:justify-end",
-					children: [menuItems.filter((item) => !isSecondary(item)).map((item, i) => /* @__PURE__ */ jsx(MobileNavigationMenuLinkItem, {
-						item,
-						className: "sm:hidden"
-					}, i)), /* @__PURE__ */ jsxs("div", {
-						className: "-ms-1.5 flex flex-row items-center gap-2 max-sm:mt-2",
-						children: [
-							menuItems.filter(isSecondary).map((item, i) => /* @__PURE__ */ jsx(MobileNavigationMenuLinkItem, {
-								item,
-								className: cn(item.type === "icon" && "-mx-1 first:ms-0")
-							}, i)),
-							/* @__PURE__ */ jsx("div", {
-								role: "separator",
-								className: "flex-1"
-							}),
-							i18n && /* @__PURE__ */ jsxs(LanguageToggle, { children: [
-								/* @__PURE__ */ jsx(Languages, { className: "size-5" }),
-								/* @__PURE__ */ jsx(LanguageToggleText, {}),
-								/* @__PURE__ */ jsx(ChevronDown, { className: "size-3 text-fd-muted-foreground" })
-							] }),
-							themeSwitch.enabled !== false && (themeSwitch.component ?? /* @__PURE__ */ jsx(ThemeToggle, { mode: themeSwitch?.mode }))
-						]
-					})]
-				})] })]
+				})), /* @__PURE__ */ jsx(NavigationMenuItem, {
+					asChild: true,
+					children: /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(NavigationMenuTrigger, {
+						"aria-label": "Toggle Menu",
+						className: cn(buttonVariants({
+							size: "icon",
+							color: "ghost",
+							className: "group [&_svg]:size-5.5"
+						})),
+						onPointerMove: nav.enableHoverToOpen ? void 0 : (e) => e.preventDefault(),
+						children: /* @__PURE__ */ jsx(ChevronDown, { className: "transition-transform duration-300 group-data-[state=open]:rotate-180" })
+					}), /* @__PURE__ */ jsxs(NavigationMenuContent, {
+						className: "flex flex-col p-4 sm:flex-row sm:items-center sm:justify-end",
+						children: [menuItems.filter((item) => !isSecondary(item)).map((item, i) => /* @__PURE__ */ jsx(MobileNavigationMenuLinkItem, {
+							item,
+							className: "sm:hidden"
+						}, i)), /* @__PURE__ */ jsxs("div", {
+							className: "-ms-1.5 flex flex-row items-center gap-2 max-sm:mt-2",
+							children: [
+								menuItems.filter(isSecondary).map((item, i) => /* @__PURE__ */ jsx(MobileNavigationMenuLinkItem, {
+									item,
+									className: cn(item.type === "icon" && "-mx-1 first:ms-0")
+								}, i)),
+								/* @__PURE__ */ jsx("div", {
+									role: "separator",
+									className: "flex-1"
+								}),
+								i18n && /* @__PURE__ */ jsxs(LanguageToggle, { children: [
+									/* @__PURE__ */ jsx(Languages, { className: "size-5" }),
+									/* @__PURE__ */ jsx(LanguageToggleText, {}),
+									/* @__PURE__ */ jsx(ChevronDown, { className: "size-3 text-fd-muted-foreground" })
+								] }),
+								themeSwitch.enabled !== false && (themeSwitch.component ?? /* @__PURE__ */ jsx(ThemeToggle, { mode: themeSwitch?.mode }))
+							]
+						})]
+					})] })
+				})]
 			})
 		]
 	});
@@ -136,10 +139,7 @@ function HeaderNavigationMenu({ transparentMode = "none", ...props }) {
 	});
 }
 function NavigationMenuLinkItem({ item, ...props }) {
-	if (item.type === "custom") return /* @__PURE__ */ jsx("div", {
-		...props,
-		children: item.children
-	});
+	if (item.type === "custom") return item.children;
 	if (item.type === "menu") {
 		const children = item.items.map((child, j) => {
 			if (child.type === "custom") return /* @__PURE__ */ jsx(Fragment, { children: child.children }, j);

package/dist/layouts/home/navbar.js

@@ -18,7 +18,7 @@ function NavbarMenuContent(props) {
 function NavbarMenuTrigger(props) {
 	return /* @__PURE__ */ jsx(NavigationMenuTrigger, {
 		...props,
-		className: cn(navItemVariants(), "rounded-md", props.className),
+		className: cn(navItemVariants(), "text-sm rounded-md", props.className),
 		children: props.children
 	});
 }

package/dist/layouts/notebook/client.d.ts

@@ -41,6 +41,6 @@ declare function NavbarLinkItem({
   ...props
 }: {
   item: LinkItemType;
-} & HTMLAttributes<HTMLElement>): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | react_jsx_runtime0.JSX.Element | null | undefined;
+} & HTMLAttributes<HTMLElement>): string | number | bigint | boolean | react_jsx_runtime0.JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined;
 //#endregion
 export { LayoutBody, LayoutContext, LayoutContextProvider, LayoutHeader, LayoutHeaderTabs, LayoutInfo, NavbarLinkItem };

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

@@ -62,7 +62,7 @@ declare function resolveLinkItems({
 declare function renderTitleNav({
   title,
   url
-}: Partial<NavOptions>, props: ComponentProps<'a'>): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | react_jsx_runtime0.JSX.Element | null | undefined;
+}: Partial<NavOptions>, props: ComponentProps<'a'>): string | number | bigint | boolean | react_jsx_runtime0.JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined;
 declare function useLinkItems({
   githubUrl,
   links

package/dist/og/takumi.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { ImageResponse, ImageResponseOptions } from "@takumi-rs/image-response";
+
+//#region src/og/takumi.d.ts
+interface GenerateProps {
+  title: ReactNode;
+  description?: ReactNode;
+  icon?: ReactNode;
+  primaryColor?: string;
+  primaryTextColor?: string;
+  site?: ReactNode;
+}
+declare function generateOGImage(options: GenerateProps & ImageResponseOptions): ImageResponse;
+declare function generate({
+  primaryColor,
+  primaryTextColor,
+  ...props
+}: GenerateProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { generate, generateOGImage };

package/dist/og/takumi.js

@@ -0,0 +1,72 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ImageResponse } from "@takumi-rs/image-response";
+
+//#region src/og/takumi.tsx
+function generateOGImage(options) {
+	const { title, description, icon, site, primaryColor, primaryTextColor, ...rest } = options;
+	return new ImageResponse(generate({
+		title,
+		description,
+		icon,
+		site,
+		primaryTextColor,
+		primaryColor
+	}), {
+		width: 1200,
+		height: 630,
+		...rest
+	});
+}
+function generate({ primaryColor = "rgba(255,150,255,0.3)", primaryTextColor = "rgb(255,150,255)", ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			width: "100%",
+			height: "100%",
+			color: "white",
+			padding: "4rem",
+			backgroundColor: "#0c0c0c",
+			backgroundImage: `linear-gradient(to top right, ${primaryColor}, transparent)`
+		},
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				style: {
+					display: "flex",
+					flexDirection: "row",
+					alignItems: "center",
+					gap: "16px",
+					marginBottom: "12px",
+					color: primaryTextColor
+				},
+				children: [props.icon, /* @__PURE__ */ jsx("p", {
+					style: {
+						fontSize: "56px",
+						fontWeight: 600,
+						margin: 0
+					},
+					children: props.site
+				})]
+			}),
+			/* @__PURE__ */ jsx("p", {
+				style: {
+					fontWeight: 800,
+					fontSize: "82px",
+					margin: 0
+				},
+				children: props.title
+			}),
+			/* @__PURE__ */ jsx("p", {
+				style: {
+					fontSize: "52px",
+					color: "rgba(240,240,240,0.8)",
+					margin: 0
+				},
+				children: props.description
+			})
+		]
+	});
+}
+
+//#endregion
+export { generate, generateOGImage };

package/dist/og.js

@@ -42,7 +42,8 @@ function generate({ primaryColor = "rgba(255,150,255,0.3)", primaryTextColor = "
 				children: [props.icon, /* @__PURE__ */ jsx("p", {
 					style: {
 						fontSize: "56px",
-						fontWeight: 600
+						fontWeight: 600,
+						margin: 0
 					},
 					children: props.site
 				})]
@@ -50,14 +51,16 @@ function generate({ primaryColor = "rgba(255,150,255,0.3)", primaryTextColor = "
 			/* @__PURE__ */ jsx("p", {
 				style: {
 					fontWeight: 800,
-					fontSize: "82px"
+					fontSize: "82px",
+					margin: 0
 				},
 				children: props.title
 			}),
 			/* @__PURE__ */ jsx("p", {
 				style: {
 					fontSize: "52px",
-					color: "rgba(240,240,240,0.8)"
+					color: "rgba(240,240,240,0.8)",
+					margin: 0
 				},
 				children: props.description
 			})

package/dist/style.css

@@ -2855,37 +2855,31 @@
   --padding-right: calc(var(--spacing) * 4);
   code span {
     color: var(--shiki-light);
+    font-style: var(--shiki-light-font-style);
   }
-}
-.dark .shiki:not(.not-fumadocs-codeblock *) {
-  code span {
-    color: var(--shiki-dark);
-  }
-}
-:is(pre *):is(.shiki *):not(.not-fumadocs-codeblock *) {
-  .line& {
+  .line {
     position: relative;
     padding-left: var(--padding-left);
     padding-right: var(--padding-right);
   }
-  .line:empty& {
+  .line:empty {
     height: 1lh;
   }
-  .has-focused .line&:not(.focused) {
+  &.has-focused .line:not(.focused) {
     filter: blur(2px);
     transition: filter 200ms;
   }
-  .has-focused:hover .line&:not(.focused) {
+  &.has-focused:hover .line:not(.focused) {
     filter: blur(0);
   }
-  [data-line-numbers] .twoslash-meta-line& {
+  &[data-line-numbers] .twoslash-meta-line {
     padding-left: calc(var(--padding-left) + 7 * var(--spacing));
   }
-  [data-line-numbers] .line& {
+  &[data-line-numbers] .line {
     counter-increment: line;
     padding-left: calc(var(--padding-left) + 7 * var(--spacing));
   }
-  [data-line-numbers] .line&::after {
+  &[data-line-numbers] .line::after {
     position: absolute;
     content: counter(line);
     color: var(--fd-counter-color, hsl(0, 0%, 45.1%));
@@ -2895,28 +2889,28 @@
     top: calc(var(--spacing) * 0);
     left: calc(var(--spacing) * 4);
   }
-  .diff&::before {
+  .diff::before {
     position: absolute;
     left: calc(var(--spacing) * 1.5);
   }
-  .diff.remove& {
+  .diff.remove {
     opacity: 0.7;
     --fd-counter-color: var(--color-fd-diff-remove-symbol);
     background-color: var(--color-fd-diff-remove);
   }
-  .diff.remove&::before {
+  .diff.remove::before {
     content: '-';
     color: var(--color-fd-diff-remove-symbol);
   }
-  .diff.add& {
+  .diff.add {
     --fd-counter-color: var(--color-fd-diff-add-symbol);
     background-color: var(--color-fd-diff-add);
   }
-  .diff.add&::before {
+  .diff.add::before {
     content: '+';
     color: var(--color-fd-diff-add-symbol);
   }
-  .highlighted& {
+  .highlighted {
     --fd-counter-color: var(--color-fd-primary);
     padding-left: calc(var(--padding-left) - 2px);
     border-left-style: var(--tw-border-style);
@@ -2930,7 +2924,7 @@
       background-color: color-mix(in oklab, var(--color-fd-primary) 10%, transparent);
     }
   }
-  .highlighted-word& {
+  .highlighted-word {
     padding: 1px;
     margin-block: -1px;
     border-radius: var(--radius-md);
@@ -2948,6 +2942,12 @@
     font-weight: var(--font-weight-medium);
   }
 }
+.dark .shiki:not(.not-fumadocs-codeblock *) {
+  code span {
+    color: var(--shiki-dark);
+    font-style: var(--shiki-dark-font-style);
+  }
+}
 :root {
   --fd-sidebar-drawer-offset: 100%;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fumadocs-ui",
-  "version": "16.6.3",
+  "version": "16.6.5",
   "description": "The Radix UI version of Fumadocs UI",
   "keywords": [
     "Docs",
@@ -89,6 +89,10 @@
       "types": "./dist/og.d.ts",
       "import": "./dist/og.js"
     },
+    "./og/*": {
+      "types": "./dist/og/*.d.ts",
+      "import": "./dist/og/*.js"
+    },
     "./utils/get-sidebar-tabs": {
       "types": "./dist/components/sidebar/tabs/index.d.ts",
       "import": "./dist/components/sidebar/tabs/index.js"
@@ -135,20 +139,24 @@
     "unified": "^11.0.5",
     "@fumadocs/cli": "1.2.4",
     "eslint-config-custom": "0.0.0",
-    "fumadocs-core": "16.6.3",
+    "fumadocs-core": "16.6.5",
     "tsconfig": "0.0.0"
   },
   "peerDependencies": {
+    "@takumi-rs/image-response": "^0.68.17",
     "@types/react": "*",
     "next": "16.x.x",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
-    "fumadocs-core": "16.6.3"
+    "fumadocs-core": "16.6.5"
   },
   "peerDependenciesMeta": {
     "next": {
       "optional": true
     },
+    "@takumi-rs/image-response": {
+      "optional": true
+    },
     "@types/react": {
       "optional": true
     }