@farming-labs/theme 0.0.48 → 0.0.50

package/dist/colorful/index.d.mts

@@ -68,6 +68,10 @@ declare const ColorfulUIDefaults: {
     CodeBlock: {
       showCopyButton: boolean;
     };
+    HoverLink: {
+      linkLabel: string;
+      showIndicator: boolean;
+    };
     Tabs: {
       style: string;
     };

package/dist/colorful/index.mjs

@@ -70,6 +70,10 @@ const ColorfulUIDefaults = {
 			icon: true
 		},
 		CodeBlock: { showCopyButton: true },
+		HoverLink: {
+			linkLabel: "Open page",
+			showIndicator: false
+		},
 		Tabs: { style: "default" }
 	}
 };

package/dist/darkbold/index.d.mts

@@ -70,6 +70,10 @@ declare const DarkBoldUIDefaults: {
     CodeBlock: {
       showCopyButton: boolean;
     };
+    HoverLink: {
+      linkLabel: string;
+      showIndicator: boolean;
+    };
     Tabs: {
       style: string;
     };

package/dist/darkbold/index.mjs

@@ -72,6 +72,10 @@ const DarkBoldUIDefaults = {
 			icon: true
 		},
 		CodeBlock: { showCopyButton: true },
+		HoverLink: {
+			linkLabel: "Open page",
+			showIndicator: false
+		},
 		Tabs: { style: "default" }
 	}
 };

package/dist/darksharp/index.d.mts

@@ -91,6 +91,10 @@ declare const DarksharpUIDefaults: {
     CodeBlock: {
       showCopyButton: boolean;
     };
+    HoverLink: {
+      linkLabel: string;
+      showIndicator: boolean;
+    };
     Tabs: {
       style: string;
     };

package/dist/darksharp/index.mjs

@@ -87,6 +87,10 @@ const DarksharpUIDefaults = {
 			icon: true
 		},
 		CodeBlock: { showCopyButton: true },
+		HoverLink: {
+			linkLabel: "Open page",
+			showIndicator: false
+		},
 		Tabs: { style: "default" }
 	}
 };

package/dist/default/index.d.mts

@@ -90,6 +90,10 @@ declare const DefaultUIDefaults: {
     CodeBlock: {
       showCopyButton: boolean;
     };
+    HoverLink: {
+      linkLabel: string;
+      showIndicator: boolean;
+    };
     Tabs: {
       style: string;
     };

package/dist/default/index.mjs

@@ -86,6 +86,10 @@ const DefaultUIDefaults = {
 			icon: true
 		},
 		CodeBlock: { showCopyButton: true },
+		HoverLink: {
+			linkLabel: "Open page",
+			showIndicator: false
+		},
 		Tabs: { style: "default" }
 	}
 };

package/dist/greentree/index.d.mts

@@ -70,6 +70,10 @@ declare const GreenTreeUIDefaults: {
     CodeBlock: {
       showCopyButton: boolean;
     };
+    HoverLink: {
+      linkLabel: string;
+      showIndicator: boolean;
+    };
     Tabs: {
       style: string;
     };

package/dist/greentree/index.mjs

@@ -72,6 +72,10 @@ const GreenTreeUIDefaults = {
 			icon: true
 		},
 		CodeBlock: { showCopyButton: true },
+		HoverLink: {
+			linkLabel: "Open page",
+			showIndicator: false
+		},
 		Tabs: { style: "default" }
 	}
 };

package/dist/hover-link.d.mts

@@ -8,8 +8,14 @@ interface HoverLinkProps {
   description: string;
   children: ReactNode;
   linkLabel?: string;
+  previewLabel?: string;
   external?: boolean;
   prefetch?: boolean;
+  showIndicator?: boolean;
+  align?: "start" | "center" | "end";
+  side?: "top" | "right" | "bottom" | "left";
+  sideOffset?: number;
+  closeDelay?: number;
 }
 declare function HoverLink({
   href,
@@ -17,8 +23,14 @@ declare function HoverLink({
   description,
   children,
   linkLabel,
+  previewLabel,
   external,
-  prefetch
+  prefetch,
+  showIndicator,
+  align,
+  side,
+  sideOffset,
+  closeDelay
 }: HoverLinkProps): react_jsx_runtime0.JSX.Element;
 //#endregion
-export { HoverLink };
+export { HoverLink, HoverLinkProps };

package/dist/hover-link.mjs

@@ -6,9 +6,12 @@ import Link from "fumadocs-core/link";
 import { Popover, PopoverContent, PopoverTrigger } from "fumadocs-ui/components/ui/popover";
 
 //#region src/hover-link.tsx
-function HoverLink({ href, title, description, children, linkLabel = "Open page", external, prefetch }) {
+function HoverLink({ href, title, description, children, linkLabel = "Open page", previewLabel, external, prefetch, showIndicator = false, align = "center", side = "bottom", sideOffset = 12, closeDelay = 90 }) {
 	const [open, setOpen] = useState(false);
 	const closeTimerRef = useRef(null);
+	const triggerRef = useRef(null);
+	const contentRef = useRef(null);
+	const underlineColor = open ? "color-mix(in srgb, var(--color-fd-foreground, currentColor) 68%, transparent)" : "color-mix(in srgb, var(--color-fd-foreground, currentColor) 46%, transparent)";
 	function clearCloseTimer() {
 		if (closeTimerRef.current !== null) {
 			window.clearTimeout(closeTimerRef.current);
@@ -21,7 +24,14 @@ function HoverLink({ href, title, description, children, linkLabel = "Open page"
 	}
 	function closePopover() {
 		clearCloseTimer();
-		closeTimerRef.current = window.setTimeout(() => setOpen(false), 120);
+		closeTimerRef.current = window.setTimeout(() => setOpen(false), closeDelay);
+	}
+	function isWithinHoverArea(target) {
+		if (!(target instanceof Node)) return false;
+		return triggerRef.current !== null && triggerRef.current.contains(target) || contentRef.current !== null && contentRef.current.contains(target);
+	}
+	function shouldOpenFromFocus(element) {
+		return typeof element.matches === "function" && element.matches(":focus-visible");
 	}
 	useEffect(() => {
 		return () => {
@@ -30,47 +40,80 @@ function HoverLink({ href, title, description, children, linkLabel = "Open page"
 	}, []);
 	return /* @__PURE__ */ jsxs(Popover, {
 		open,
-		onOpenChange: setOpen,
+		onOpenChange: (nextOpen) => {
+			clearCloseTimer();
+			setOpen(nextOpen);
+		},
 		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
 			asChild: true,
 			children: /* @__PURE__ */ jsxs("button", {
+				ref: triggerRef,
 				type: "button",
-				onMouseEnter: openPopover,
-				onMouseLeave: closePopover,
-				onFocus: openPopover,
-				onBlur: closePopover,
-				onClick: () => setOpen((value) => !value),
+				onPointerEnter: openPopover,
+				onPointerLeave: (event) => {
+					if (isWithinHoverArea(event.relatedTarget)) return;
+					closePopover();
+				},
+				onFocus: (event) => {
+					if (!shouldOpenFromFocus(event.currentTarget)) return;
+					openPopover();
+				},
+				onBlur: (event) => {
+					if (isWithinHoverArea(event.relatedTarget)) return;
+					closePopover();
+				},
+				onClick: openPopover,
 				style: {
-					display: "inline-flex",
-					alignItems: "center",
-					gap: "0.35rem",
+					display: "inline",
 					border: "none",
 					background: "transparent",
 					padding: 0,
+					margin: 0,
 					color: "var(--color-fd-foreground, currentColor)",
 					cursor: "pointer",
 					textDecoration: "underline",
 					textDecorationStyle: "dashed",
+					textDecorationThickness: "0.08em",
 					textUnderlineOffset: "0.22em",
-					textDecorationColor: "color-mix(in srgb, var(--color-fd-border, currentColor) 85%, transparent)",
-					font: "inherit"
+					textDecorationColor: underlineColor,
+					font: "inherit",
+					lineHeight: "inherit",
+					verticalAlign: "baseline",
+					appearance: "none",
+					transition: "text-decoration-color 180ms ease"
 				},
-				children: [/* @__PURE__ */ jsx("span", { children }), /* @__PURE__ */ jsx("span", {
+				children: [/* @__PURE__ */ jsx("span", { children }), showIndicator ? /* @__PURE__ */ jsx("span", {
 					"aria-hidden": "true",
 					style: {
+						marginInlineStart: "0.3em",
 						fontSize: "0.75em",
 						opacity: .8
 					},
 					children: "+"
-				})]
+				}) : null]
 			})
 		}), /* @__PURE__ */ jsx(PopoverContent, {
-			align: "center",
-			sideOffset: 12,
-			onMouseEnter: openPopover,
-			onMouseLeave: closePopover,
+			ref: contentRef,
+			align,
+			side,
+			sideOffset,
+			onPointerEnter: openPopover,
+			onPointerLeave: (event) => {
+				if (isWithinHoverArea(event.relatedTarget)) return;
+				closePopover();
+			},
 			onFocusCapture: openPopover,
-			onBlurCapture: closePopover,
+			onBlurCapture: (event) => {
+				if (isWithinHoverArea(event.relatedTarget)) return;
+				closePopover();
+			},
+			onInteractOutside: () => {
+				clearCloseTimer();
+				setOpen(false);
+			},
+			onCloseAutoFocus: (event) => {
+				event.preventDefault();
+			},
 			style: {
 				width: "min(22rem, calc(100vw - 2rem))",
 				borderRadius: "calc(var(--radius, 0.75rem) + 2px)",
@@ -94,7 +137,7 @@ function HoverLink({ href, title, description, children, linkLabel = "Open page"
 						gap: "0.35rem"
 					},
 					children: [
-						/* @__PURE__ */ jsx("span", {
+						previewLabel ? /* @__PURE__ */ jsx("span", {
 							style: {
 								fontSize: "0.68rem",
 								textTransform: "uppercase",
@@ -102,8 +145,8 @@ function HoverLink({ href, title, description, children, linkLabel = "Open page"
 								fontFamily: "var(--fd-font-mono, var(--font-geist-mono, ui-monospace, monospace))",
 								color: "color-mix(in srgb, var(--color-fd-popover-foreground, currentColor) 55%, transparent)"
 							},
-							children: "Link Preview"
-						}),
+							children: previewLabel
+						}) : null,
 						/* @__PURE__ */ jsx(Link, {
 							href,
 							external,

package/dist/index.d.mts

@@ -5,10 +5,10 @@ import { DocsPageClient } from "./docs-page-client.mjs";
 import { RootProvider } from "./provider.mjs";
 import { PageActions } from "./page-actions.mjs";
 import { withLangInUrl } from "./i18n.mjs";
-import { HoverLink } from "./hover-link.mjs";
+import { HoverLink, HoverLinkProps } from "./hover-link.mjs";
 import { DocsLayout } from "fumadocs-ui/layouts/docs";
 import { AIConfig, BreadcrumbConfig, CopyMarkdownConfig, DocsConfig, DocsMetadata, DocsNav, DocsTheme, FontStyle, OGConfig, OpenDocsConfig, OpenDocsProvider, PageActionsConfig, PageFrontmatter, SidebarConfig, ThemeToggleConfig, TypographyConfig, UIConfig, createTheme, deepMerge, defineDocs, extendTheme } from "@farming-labs/docs";
 import { DocsBody, DocsPage } from "fumadocs-ui/layouts/docs/page";
 import { Tab, Tabs } from "fumadocs-ui/components/tabs";
 import { CodeBlock, CodeBlockTab, CodeBlockTabs, CodeBlockTabsList, CodeBlockTabsTrigger, Pre } from "fumadocs-ui/components/codeblock";
-export { type AIConfig, type BreadcrumbConfig, CodeBlock, CodeBlockTab, CodeBlockTabs, CodeBlockTabsList, CodeBlockTabsTrigger, type CopyMarkdownConfig, DocsBody, DocsCommandSearch, type DocsConfig, DocsLayout, type DocsMetadata, type DocsNav, DocsPage, DocsPageClient, type DocsTheme, type FontStyle, DefaultUIDefaults as FumadocsUIDefaults, HoverLink, type OGConfig, type OpenDocsConfig, type OpenDocsProvider, PageActions, type PageActionsConfig, type PageFrontmatter, Pre, RootProvider, type SidebarConfig, Tab, Tabs, type ThemeToggleConfig, type TypographyConfig, type UIConfig, createDocsLayout, createDocsMetadata, createPageMetadata, createTheme, deepMerge, defineDocs, extendTheme, fumadocs, withLangInUrl };
+export { type AIConfig, type BreadcrumbConfig, CodeBlock, CodeBlockTab, CodeBlockTabs, CodeBlockTabsList, CodeBlockTabsTrigger, type CopyMarkdownConfig, DocsBody, DocsCommandSearch, type DocsConfig, DocsLayout, type DocsMetadata, type DocsNav, DocsPage, DocsPageClient, type DocsTheme, type FontStyle, DefaultUIDefaults as FumadocsUIDefaults, HoverLink, type HoverLinkProps, type OGConfig, type OpenDocsConfig, type OpenDocsProvider, PageActions, type PageActionsConfig, type PageFrontmatter, Pre, RootProvider, type SidebarConfig, Tab, Tabs, type ThemeToggleConfig, type TypographyConfig, type UIConfig, createDocsLayout, createDocsMetadata, createPageMetadata, createTheme, deepMerge, defineDocs, extendTheme, fumadocs, withLangInUrl };

package/dist/mdx.d.mts

@@ -1,7 +1,7 @@
 import { HoverLink } from "./hover-link.mjs";
 import { MDXImg } from "./mdx-img.mjs";
 import React from "react";
-import { CodeBlockCopyData } from "@farming-labs/docs";
+import { CodeBlockCopyData, DocsTheme } from "@farming-labs/docs";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { Tab, Tabs } from "fumadocs-ui/components/tabs";
 import * as fumadocs_ui_components_codeblock0 from "fumadocs-ui/components/codeblock";
@@ -38,6 +38,8 @@ declare const extendedMdxComponents: {
 interface GetMDXComponentsOptions {
   /** Called when the user clicks the copy button on a code block (in addition to the default copy). */
   onCopyClick?: (data: CodeBlockCopyData) => void;
+  /** Theme config used to apply built-in MDX component defaults from `theme.ui.components`. */
+  theme?: DocsTheme;
 }
 declare function getMDXComponents<T extends Record<string, unknown> = Record<string, unknown>>(overrides?: T, options?: GetMDXComponentsOptions): typeof extendedMdxComponents & T;
 //#endregion

package/dist/mdx.mjs

@@ -1,10 +1,29 @@
 import { HoverLink } from "./hover-link.mjs";
 import { MDXImg } from "./mdx-img.mjs";
 import { createPreWithCopyCallback } from "./code-block-copy-wrapper.mjs";
+import React from "react";
 import { Tab, Tabs } from "fumadocs-ui/components/tabs";
 import defaultMdxComponents from "fumadocs-ui/mdx";
 
 //#region src/mdx.ts
+/**
+* Re-export fumadocs-ui MDX components.
+*
+* Includes all default MDX components (headings, code blocks, callouts, cards)
+* plus Tabs/Tab for tabbed content and InstallTabs for package manager tabs.
+* Overrides `img` so that ![alt](url) in markdown works without width/height
+* (uses Next Image with unoptimized + default dimensions for external URLs).
+*
+* When `options.onCopyClick` is provided, the default `pre` component is wrapped
+* so that the callback is fired when the user clicks the code block copy button.
+*
+* Usage in mdx-components.tsx:
+*   import { getMDXComponents } from "@farming-labs/theme/mdx";
+*   return getMDXComponents(
+*     { ...docsConfig.components, ...components },
+*     { onCopyClick: docsConfig.onCopyClick, theme: docsConfig.theme }
+*   );
+*/
 const extendedMdxComponents = {
 	...defaultMdxComponents,
 	img: MDXImg,
@@ -12,13 +31,45 @@ const extendedMdxComponents = {
 	Tab,
 	Tabs
 };
+const mdxComponentDefaults = { HoverLink: {
+	linkLabel: "Open page",
+	showIndicator: false,
+	align: "center",
+	side: "bottom",
+	sideOffset: 12,
+	closeDelay: 90
+} };
+function applyBuiltInComponentDefaults(options) {
+	const themeComponents = options?.theme?.ui?.components;
+	if (!themeComponents) return extendedMdxComponents;
+	const entries = Object.entries(themeComponents);
+	if (entries.length === 0) return extendedMdxComponents;
+	const components = { ...extendedMdxComponents };
+	for (const [name, value] of entries) {
+		const Component = components[name];
+		if (!Component) continue;
+		const builtInDefaults = mdxComponentDefaults[name] ?? {};
+		const componentDefaults = typeof value === "function" ? value(builtInDefaults) : {
+			...builtInDefaults,
+			...value ?? {}
+		};
+		if (!componentDefaults || typeof componentDefaults !== "object") continue;
+		components[name] = function ThemedComponent(props) {
+			return React.createElement(Component, {
+				...componentDefaults,
+				...props
+			});
+		};
+	}
+	return components;
+}
 function getMDXComponents(overrides, options) {
 	const base = {
-		...extendedMdxComponents,
+		...applyBuiltInComponentDefaults(options),
 		...overrides
 	};
 	if (options?.onCopyClick) {
-		const DefaultPre = defaultMdxComponents.pre;
+		const DefaultPre = base.pre;
 		if (DefaultPre) base.pre = createPreWithCopyCallback(DefaultPre, options.onCopyClick);
 	}
 	return base;

package/dist/pixel-border/index.d.mts

@@ -68,7 +68,12 @@ declare const PixelBorderUIDefaults: {
       sticky: boolean;
     };
   };
-  components: {};
+  components: {
+    HoverLink: {
+      linkLabel: string;
+      showIndicator: boolean;
+    };
+  };
 };
 /**
  * Pixel-border theme preset factory.

package/dist/pixel-border/index.mjs

@@ -72,7 +72,10 @@ const PixelBorderUIDefaults = {
 			sticky: true
 		}
 	},
-	components: {}
+	components: { HoverLink: {
+		linkLabel: "Open page",
+		showIndicator: false
+	} }
 };
 /**
 * Pixel-border theme preset factory.

package/dist/shiny/index.d.mts

@@ -69,6 +69,10 @@ declare const ShinyUIDefaults: {
     CodeBlock: {
       showCopyButton: boolean;
     };
+    HoverLink: {
+      linkLabel: string;
+      showIndicator: boolean;
+    };
     Tabs: {
       style: string;
     };

package/dist/shiny/index.mjs

@@ -71,6 +71,10 @@ const ShinyUIDefaults = {
 			icon: true
 		},
 		CodeBlock: { showCopyButton: true },
+		HoverLink: {
+			linkLabel: "Open page",
+			showIndicator: false
+		},
 		Tabs: { style: "default" }
 	}
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farming-labs/theme",
-  "version": "0.0.48",
+  "version": "0.0.50",
   "description": "Theme package for @farming-labs/docs — layout, provider, MDX components, and styles",
   "keywords": [
     "docs",
@@ -110,7 +110,7 @@
     "tsdown": "^0.20.3",
     "typescript": "^5.9.3",
     "vitest": "^3.2.4",
-    "@farming-labs/docs": "0.0.48"
+    "@farming-labs/docs": "0.0.50"
   },
   "peerDependencies": {
     "@farming-labs/docs": ">=0.0.1",