@farming-labs/theme 0.0.47 → 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

@@ -0,0 +1,36 @@
+import { ReactNode } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/hover-link.d.ts
+interface HoverLinkProps {
+  href: string;
+  title: string;
+  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,
+  title,
+  description,
+  children,
+  linkLabel,
+  previewLabel,
+  external,
+  prefetch,
+  showIndicator,
+  align,
+  side,
+  sideOffset,
+  closeDelay
+}: HoverLinkProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { HoverLink, HoverLinkProps };

package/dist/hover-link.mjs

@@ -0,0 +1,210 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+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", 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);
+			closeTimerRef.current = null;
+		}
+	}
+	function openPopover() {
+		clearCloseTimer();
+		setOpen(true);
+	}
+	function closePopover() {
+		clearCloseTimer();
+		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 () => {
+			if (closeTimerRef.current !== null) window.clearTimeout(closeTimerRef.current);
+		};
+	}, []);
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: (nextOpen) => {
+			clearCloseTimer();
+			setOpen(nextOpen);
+		},
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsxs("button", {
+				ref: triggerRef,
+				type: "button",
+				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",
+					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: underlineColor,
+					font: "inherit",
+					lineHeight: "inherit",
+					verticalAlign: "baseline",
+					appearance: "none",
+					transition: "text-decoration-color 180ms ease"
+				},
+				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, {
+			ref: contentRef,
+			align,
+			side,
+			sideOffset,
+			onPointerEnter: openPopover,
+			onPointerLeave: (event) => {
+				if (isWithinHoverArea(event.relatedTarget)) return;
+				closePopover();
+			},
+			onFocusCapture: openPopover,
+			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)",
+				border: "1px solid color-mix(in srgb, var(--color-fd-border, #2a2a2a) 88%, transparent)",
+				background: "var(--color-fd-popover, var(--color-fd-background, #0b0b0b))",
+				color: "var(--color-fd-popover-foreground, var(--color-fd-foreground, currentColor))",
+				padding: "0.95rem 1rem",
+				boxShadow: "0 20px 45px color-mix(in srgb, var(--color-fd-background, #000) 78%, transparent)",
+				backdropFilter: "blur(14px)"
+			},
+			children: /* @__PURE__ */ jsxs("div", {
+				style: {
+					display: "flex",
+					flexDirection: "column",
+					gap: "0.75rem"
+				},
+				children: [/* @__PURE__ */ jsxs("div", {
+					style: {
+						display: "flex",
+						flexDirection: "column",
+						gap: "0.35rem"
+					},
+					children: [
+						previewLabel ? /* @__PURE__ */ jsx("span", {
+							style: {
+								fontSize: "0.68rem",
+								textTransform: "uppercase",
+								letterSpacing: "0.1em",
+								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: previewLabel
+						}) : null,
+						/* @__PURE__ */ jsx(Link, {
+							href,
+							external,
+							prefetch,
+							style: {
+								fontSize: "1rem",
+								fontWeight: 600,
+								lineHeight: 1.3,
+								color: "var(--color-fd-popover-foreground, currentColor)",
+								textDecoration: "none"
+							},
+							children: title
+						}),
+						/* @__PURE__ */ jsx("p", {
+							style: {
+								margin: 0,
+								fontSize: "0.92rem",
+								lineHeight: 1.6,
+								color: "color-mix(in srgb, var(--color-fd-popover-foreground, currentColor) 74%, transparent)"
+							},
+							children: description
+						})
+					]
+				}), /* @__PURE__ */ jsx("div", {
+					style: {
+						display: "flex",
+						alignItems: "center",
+						justifyContent: "space-between",
+						gap: "0.75rem",
+						paddingTop: "0.25rem",
+						borderTop: "1px solid color-mix(in srgb, var(--color-fd-border, #2a2a2a) 72%, transparent)"
+					},
+					children: /* @__PURE__ */ jsxs(Link, {
+						href,
+						external,
+						prefetch,
+						style: {
+							display: "inline-flex",
+							alignItems: "center",
+							gap: "0.4rem",
+							fontSize: "0.8rem",
+							fontWeight: 600,
+							textTransform: "uppercase",
+							letterSpacing: "0.08em",
+							fontFamily: "var(--fd-font-mono, var(--font-geist-mono, ui-monospace, monospace))",
+							color: "var(--color-fd-primary, var(--color-fd-popover-foreground, currentColor))",
+							textDecoration: "none"
+						},
+						children: [linkLabel, /* @__PURE__ */ jsx("span", {
+							"aria-hidden": "true",
+							children: "→"
+						})]
+					})
+				})]
+			})
+		})]
+	});
+}
+
+//#endregion
+export { HoverLink };

package/dist/index.d.mts

@@ -5,9 +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, 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, 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/index.mjs

@@ -5,10 +5,11 @@ import { DocsCommandSearch } from "./docs-command-search.mjs";
 import { createDocsLayout, createDocsMetadata, createPageMetadata } from "./docs-layout.mjs";
 import { RootProvider } from "./provider.mjs";
 import { DefaultUIDefaults, fumadocs } from "./default/index.mjs";
+import { HoverLink } from "./hover-link.mjs";
 import { DocsLayout } from "fumadocs-ui/layouts/docs";
 import { 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 { CodeBlock, CodeBlockTab, CodeBlockTabs, CodeBlockTabsList, CodeBlockTabsTrigger, DocsBody, DocsCommandSearch, DocsLayout, DocsPage, DocsPageClient, DefaultUIDefaults as FumadocsUIDefaults, PageActions, Pre, RootProvider, Tab, Tabs, createDocsLayout, createDocsMetadata, createPageMetadata, createTheme, deepMerge, defineDocs, extendTheme, fumadocs, withLangInUrl };
+export { CodeBlock, CodeBlockTab, CodeBlockTabs, CodeBlockTabsList, CodeBlockTabsTrigger, DocsBody, DocsCommandSearch, DocsLayout, DocsPage, DocsPageClient, DefaultUIDefaults as FumadocsUIDefaults, HoverLink, PageActions, Pre, RootProvider, Tab, Tabs, createDocsLayout, createDocsMetadata, createPageMetadata, createTheme, deepMerge, defineDocs, extendTheme, fumadocs, withLangInUrl };

package/dist/mdx.d.mts

@@ -1,6 +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";
@@ -11,6 +12,7 @@ import * as fumadocs_ui_components_callout0 from "fumadocs-ui/components/callout
 //#region src/mdx.d.ts
 declare const extendedMdxComponents: {
   img: typeof MDXImg;
+  HoverLink: typeof HoverLink;
   Tab: typeof Tab;
   Tabs: typeof Tabs;
   CodeBlockTab: typeof fumadocs_ui_components_codeblock0.CodeBlockTab;
@@ -36,7 +38,9 @@ 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
-export { GetMDXComponentsOptions, Tab, Tabs, defaultMdxComponents, extendedMdxComponents, getMDXComponents };
+export { GetMDXComponentsOptions, HoverLink, Tab, Tabs, defaultMdxComponents, extendedMdxComponents, getMDXComponents };

package/dist/mdx.mjs

@@ -1,26 +1,79 @@
+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,
+	HoverLink,
 	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;
 }
 
 //#endregion
-export { Tab, Tabs, defaultMdxComponents, extendedMdxComponents, getMDXComponents };
+export { HoverLink, Tab, Tabs, defaultMdxComponents, extendedMdxComponents, getMDXComponents };

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.47",
+  "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.47"
+    "@farming-labs/docs": "0.0.50"
   },
   "peerDependencies": {
     "@farming-labs/docs": ">=0.0.1",