@farming-labs/theme 0.1.124 → 0.1.126

package/dist/index.d.mts

@@ -13,10 +13,10 @@ import { PageActions } from "./page-actions.mjs";
 import { withLangInUrl } from "./i18n.mjs";
 import { HoverLink, HoverLinkProps } from "./hover-link.mjs";
 import { Prompt, PromptProps } from "./prompt.mjs";
-import { Agent } from "./mdx.mjs";
+import { Agent, CodeGroup } from "./mdx.mjs";
 import { DocsLayout } from "fumadocs-ui/layouts/docs";
 import { AIConfig, BreadcrumbConfig, ChangelogConfig, ChangelogFrontmatter, CopyMarkdownConfig, DocsConfig, DocsFeedbackData, DocsFeedbackValue, DocsMetadata, DocsNav, DocsTheme, FeedbackConfig, 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, Agent, type BreadcrumbConfig, type ChangelogConfig, type ChangelogFrontmatter, CodeBlock, CodeBlockTab, CodeBlockTabs, CodeBlockTabsList, CodeBlockTabsTrigger, CommandGridUIDefaults, ConcreteUIDefaults, type CopyMarkdownConfig, DocsBody, DocsClientHooks, DocsCommandSearch, type DocsConfig, DocsFeedback, type DocsFeedbackData, type DocsFeedbackProps, type DocsFeedbackValue, DocsLayout, type DocsMetadata, type DocsNav, DocsPage, DocsPageClient, type DocsTheme, type FeedbackConfig, type FontStyle, DefaultUIDefaults as FumadocsUIDefaults, HardlineUIDefaults, HoverLink, type HoverLinkProps, LedgerUIDefaults, type OGConfig, type OpenDocsConfig, type OpenDocsProvider, PageActions, type PageActionsConfig, type PageFrontmatter, Pre, Prompt, type PromptProps, RootProvider, type SidebarConfig, Tab, Tabs, type ThemeToggleConfig, type TypographyConfig, type UIConfig, commandGrid, concrete, createDocsLayout, createDocsMetadata, createPageMetadata, createTheme, deepMerge, defineDocs, extendTheme, fumadocs, hardline, ledger, withLangInUrl };
+export { type AIConfig, Agent, type BreadcrumbConfig, type ChangelogConfig, type ChangelogFrontmatter, CodeBlock, CodeBlockTab, CodeBlockTabs, CodeBlockTabsList, CodeBlockTabsTrigger, CodeGroup, CommandGridUIDefaults, ConcreteUIDefaults, type CopyMarkdownConfig, DocsBody, DocsClientHooks, DocsCommandSearch, type DocsConfig, DocsFeedback, type DocsFeedbackData, type DocsFeedbackProps, type DocsFeedbackValue, DocsLayout, type DocsMetadata, type DocsNav, DocsPage, DocsPageClient, type DocsTheme, type FeedbackConfig, type FontStyle, DefaultUIDefaults as FumadocsUIDefaults, HardlineUIDefaults, HoverLink, type HoverLinkProps, LedgerUIDefaults, type OGConfig, type OpenDocsConfig, type OpenDocsProvider, PageActions, type PageActionsConfig, type PageFrontmatter, Pre, Prompt, type PromptProps, RootProvider, type SidebarConfig, Tab, Tabs, type ThemeToggleConfig, type TypographyConfig, type UIConfig, commandGrid, concrete, createDocsLayout, createDocsMetadata, createPageMetadata, createTheme, deepMerge, defineDocs, extendTheme, fumadocs, hardline, ledger, withLangInUrl };

package/dist/index.mjs

@@ -13,11 +13,11 @@ import { LedgerUIDefaults, ledger } from "./ledger/index.mjs";
 import { DocsClientHooks } from "./docs-client-hooks.mjs";
 import { HoverLink } from "./hover-link.mjs";
 import { Prompt } from "./prompt.mjs";
-import { Agent } from "./mdx.mjs";
+import { Agent, CodeGroup } from "./mdx.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 { Agent, CodeBlock, CodeBlockTab, CodeBlockTabs, CodeBlockTabsList, CodeBlockTabsTrigger, CommandGridUIDefaults, ConcreteUIDefaults, DocsBody, DocsClientHooks, DocsCommandSearch, DocsFeedback, DocsLayout, DocsPage, DocsPageClient, DefaultUIDefaults as FumadocsUIDefaults, HardlineUIDefaults, HoverLink, LedgerUIDefaults, PageActions, Pre, Prompt, RootProvider, Tab, Tabs, commandGrid, concrete, createDocsLayout, createDocsMetadata, createPageMetadata, createTheme, deepMerge, defineDocs, extendTheme, fumadocs, hardline, ledger, withLangInUrl };
+export { Agent, CodeBlock, CodeBlockTab, CodeBlockTabs, CodeBlockTabsList, CodeBlockTabsTrigger, CodeGroup, CommandGridUIDefaults, ConcreteUIDefaults, DocsBody, DocsClientHooks, DocsCommandSearch, DocsFeedback, DocsLayout, DocsPage, DocsPageClient, DefaultUIDefaults as FumadocsUIDefaults, HardlineUIDefaults, HoverLink, LedgerUIDefaults, PageActions, Pre, Prompt, RootProvider, Tab, Tabs, commandGrid, concrete, createDocsLayout, createDocsMetadata, createPageMetadata, createTheme, deepMerge, defineDocs, extendTheme, fumadocs, hardline, ledger, withLangInUrl };

package/dist/mdx.d.mts

@@ -5,8 +5,9 @@ import React from "react";
 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";
+import { CodeBlockTab, CodeBlockTabs, CodeBlockTabsList, CodeBlockTabsTrigger } from "fumadocs-ui/components/codeblock";
 import defaultMdxComponents from "fumadocs-ui/mdx";
+import * as fumadocs_ui_components_ui_tabs0 from "fumadocs-ui/components/ui/tabs";
 import * as fumadocs_ui_components_card0 from "fumadocs-ui/components/card";
 import * as fumadocs_ui_components_callout0 from "fumadocs-ui/components/callout";
 
@@ -17,18 +18,37 @@ declare function Table(props: React.ComponentPropsWithoutRef<"table">): React.De
 declare function Agent(_props: {
   children?: React.ReactNode;
 }): null;
+interface CodeGroupProps extends Omit<React.ComponentPropsWithoutRef<typeof CodeBlockTabs>, "children"> {
+  children?: React.ReactNode;
+  /**
+   * Mintlify-compatible prop. The current renderer keeps the same code tab UI
+   * and exposes this as a data attribute for theme overrides.
+   */
+  dropdown?: boolean;
+}
+declare function CodeGroup({
+  children,
+  defaultValue,
+  dropdown,
+  className,
+  ...props
+}: CodeGroupProps): React.ReactElement<Omit<fumadocs_ui_components_ui_tabs0.TabsProps, "ref"> & {
+  "data-dropdown"?: string;
+  "data-fd-code-group"?: string;
+}, string | React.JSXElementConstructor<any>> | null;
 declare const extendedMdxComponents: {
   img: typeof MDXImg;
   table: typeof Table;
   Agent: typeof Agent;
+  CodeGroup: typeof CodeGroup;
   HoverLink: typeof HoverLink;
   Prompt: typeof Prompt;
   Tab: typeof Tab;
   Tabs: typeof Tabs;
-  CodeBlockTab: typeof fumadocs_ui_components_codeblock0.CodeBlockTab;
-  CodeBlockTabs: typeof fumadocs_ui_components_codeblock0.CodeBlockTabs;
-  CodeBlockTabsList: typeof fumadocs_ui_components_codeblock0.CodeBlockTabsList;
-  CodeBlockTabsTrigger: typeof fumadocs_ui_components_codeblock0.CodeBlockTabsTrigger;
+  CodeBlockTab: typeof CodeBlockTab;
+  CodeBlockTabs: typeof CodeBlockTabs;
+  CodeBlockTabsList: typeof CodeBlockTabsList;
+  CodeBlockTabsTrigger: typeof CodeBlockTabsTrigger;
   pre: (props: React.HTMLAttributes<HTMLPreElement>) => react_jsx_runtime0.JSX.Element;
   Card: typeof fumadocs_ui_components_card0.Card;
   Cards: typeof fumadocs_ui_components_card0.Cards;
@@ -56,4 +76,4 @@ interface GetMDXComponentsOptions {
 }
 declare function getMDXComponents<T extends Record<string, unknown> = Record<string, unknown>>(overrides?: T, options?: GetMDXComponentsOptions): typeof extendedMdxComponents & T;
 //#endregion
-export { Agent, GetMDXComponentsOptions, HoverLink, Prompt, Tab, Tabs, defaultMdxComponents, extendedMdxComponents, getMDXComponents };
+export { Agent, CodeGroup, CodeGroupProps, GetMDXComponentsOptions, HoverLink, Prompt, Tab, Tabs, defaultMdxComponents, extendedMdxComponents, getMDXComponents };

package/dist/mdx.mjs

@@ -6,6 +6,7 @@ import { extractPromptText } from "./prompt-text.mjs";
 import { Prompt } from "./prompt.mjs";
 import React from "react";
 import { Tab, Tabs } from "fumadocs-ui/components/tabs";
+import { CodeBlockTab, CodeBlockTabs, CodeBlockTabsList, CodeBlockTabsTrigger } from "fumadocs-ui/components/codeblock";
 import defaultMdxComponents from "fumadocs-ui/mdx";
 
 //#region src/mdx.ts
@@ -33,11 +34,132 @@ function Table(props) {
 function Agent(_props) {
 	return null;
 }
+const codeGroupLabelProps = [
+	"title",
+	"filename",
+	"file",
+	"name",
+	"label",
+	"value",
+	"data-title",
+	"data-filename",
+	"data-file"
+];
+function cx(...values) {
+	return values.filter(Boolean).join(" ") || void 0;
+}
+function getElementProps(node) {
+	if (!React.isValidElement(node)) return void 0;
+	return node.props && typeof node.props === "object" ? node.props : void 0;
+}
+function readStringProp(props, key) {
+	const value = props?.[key];
+	return typeof value === "string" && value.trim() ? value.trim() : void 0;
+}
+function parseCodeMetaLabel(meta) {
+	if (!meta) return void 0;
+	const trimmed = meta.trim();
+	if (!trimmed) return void 0;
+	const namedMatch = trimmed.match(/\b(?:title|filename|file|name|label)=["']([^"']+)["']/);
+	if (namedMatch?.[1]?.trim()) return namedMatch[1].trim();
+	const language = trimmed.split(/\s+/, 1)[0] ?? "";
+	const rest = trimmed.slice(language.length).trim();
+	if (!rest) return void 0;
+	return rest.replace(/\{[^}]*\}/g, " ").split(/\s+/).find((part) => part && !part.includes("="))?.replace(/^["']|["']$/g, "");
+}
+function parseLanguageFromProps(props) {
+	const language = readStringProp(props, "language");
+	if (language) return language;
+	return (readStringProp(props, "className")?.match(/language-([^\s]+)/))?.[1];
+}
+function getCodeGroupLabelFromNode(node) {
+	const props = getElementProps(node);
+	if (!props) return void 0;
+	for (const key of codeGroupLabelProps) {
+		const value = readStringProp(props, key);
+		if (value) return value;
+	}
+	const metaLabel = parseCodeMetaLabel(readStringProp(props, "metastring") ?? readStringProp(props, "meta") ?? readStringProp(props, "data-meta"));
+	if (metaLabel) return metaLabel;
+	const nestedLabel = getCodeGroupLabelFromNode(React.Children.toArray(props.children).find((child) => {
+		return getCodeGroupLabelFromNode(child) !== void 0;
+	}));
+	if (nestedLabel) return nestedLabel;
+	return parseLanguageFromProps(props);
+}
+function getCodeGroupItems(children) {
+	const items = [];
+	React.Children.forEach(children, (child) => {
+		if (child === null || child === void 0 || typeof child === "boolean") return;
+		if (typeof child === "string" && child.trim() === "") return;
+		const props = getElementProps(child);
+		if (props && React.isValidElement(child) && child.type === React.Fragment) {
+			items.push(...getCodeGroupItems(props.children));
+			return;
+		}
+		items.push(child);
+	});
+	return items;
+}
+function toTabValue(label, index, used) {
+	const slug = label.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "") || `code-${index + 1}`;
+	let value = slug;
+	let suffix = 2;
+	while (used.has(value)) {
+		value = `${slug}-${suffix}`;
+		suffix += 1;
+	}
+	used.add(value);
+	return value;
+}
+function stripCodeGroupLabelProps(child) {
+	if (!React.isValidElement(child)) return child;
+	return React.cloneElement(child, {
+		title: void 0,
+		filename: void 0,
+		file: void 0,
+		name: void 0,
+		label: void 0,
+		value: void 0,
+		"data-title": void 0,
+		"data-filename": void 0,
+		"data-file": void 0
+	});
+}
+function CodeGroup({ children, defaultValue, dropdown = false, className, ...props }) {
+	const usedValues = /* @__PURE__ */ new Set();
+	const items = getCodeGroupItems(children).map((child, index) => {
+		const label = getCodeGroupLabelFromNode(child) ?? `Code ${index + 1}`;
+		return {
+			child: stripCodeGroupLabelProps(child),
+			label,
+			value: toTabValue(label, index, usedValues)
+		};
+	});
+	if (items.length === 0) return null;
+	const CodeBlockTabsComponent = CodeBlockTabs;
+	return React.createElement(CodeBlockTabsComponent, {
+		...props,
+		"data-fd-code-group": "",
+		"data-dropdown": dropdown ? "" : void 0,
+		className: cx("fd-code-group", dropdown && "fd-code-group-dropdown", className),
+		defaultValue: defaultValue ?? items[0]?.value
+	}, React.createElement(CodeBlockTabsList, null, items.map((item) => React.createElement(CodeBlockTabsTrigger, {
+		key: item.value,
+		value: item.value
+	}, item.label))), items.map((item) => React.createElement(CodeBlockTab, {
+		key: item.value,
+		value: item.value,
+		forceMount: true,
+		className: "fd-code-group-panel"
+	}, item.child)));
+}
 const extendedMdxComponents = {
 	...defaultMdxComponents,
 	img: MDXImg,
 	table: Table,
 	Agent,
+	CodeGroup,
 	HoverLink,
 	Prompt,
 	Tab,
@@ -118,4 +240,4 @@ function getMDXComponents(overrides, options) {
 }
 
 //#endregion
-export { Agent, HoverLink, Prompt, Tab, Tabs, defaultMdxComponents, extendedMdxComponents, getMDXComponents };
+export { Agent, CodeGroup, HoverLink, Prompt, Tab, Tabs, defaultMdxComponents, extendedMdxComponents, getMDXComponents };

package/package.json

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

package/styles/base.css

@@ -175,6 +175,14 @@ figure.shiki pre > code > [data-line] {
   padding: 0 0.25rem;
 }
 
+.fd-code-group-panel[data-state="inactive"] {
+  display: none;
+}
+
+.fd-code-group-panel[data-state="active"] {
+  display: block;
+}
+
 /* Titled code blocks: diagonal stripe background on the title bar */
 figure.shiki:has(figcaption) > div:first-child {
   position: relative;