@farming-labs/theme 0.1.54 → 0.1.57

package/dist/docs-layout.mjs

@@ -11,7 +11,7 @@ import path from "node:path";
 import matter from "gray-matter";
 import { DocsLayout } from "fumadocs-ui/layouts/docs";
 import { Suspense } from "react";
-import { buildPageOpenGraph, buildPageTwitter, resolveChangelogConfig, resolveDocsAgentMdxContent } from "@farming-labs/docs";
+import { applySidebarFolderIndexBehavior, buildPageOpenGraph, buildPageTwitter, resolveChangelogConfig, resolveDocsAgentMdxContent, resolvePageSidebarFolderIndexBehavior } from "@farming-labs/docs";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/docs-layout.tsx
@@ -182,6 +182,7 @@ function buildTree(config, ctx, flat = false) {
 					url,
 					icon
 				},
+				folderIndexBehavior: resolvePageSidebarFolderIndexBehavior(data.sidebar),
 				children: folderChildren,
 				...flat ? {
 					collapsible: false,
@@ -622,7 +623,10 @@ function createDocsLayout(config, options) {
 	});
 	const readingTimeEnabled = readingTimeEnabledByDefault || Object.keys(readingTimeMap).length > 0;
 	return function DocsLayoutWrapper({ children }) {
-		const tree = buildTree(config, localeContext, !!sidebarFlat);
+		const tree = applySidebarFolderIndexBehavior(buildTree(config, localeContext, !!sidebarFlat), {
+			sidebar: config.sidebar,
+			defaultBehavior: "link"
+		});
 		const localizedTree = i18n ? localizeTreeUrls(tree, activeLocale) : tree;
 		const finalSidebarProps = { ...sidebarProps };
 		const sidebarFooter = sidebarProps.footer;

package/dist/tanstack-layout.d.mts

@@ -14,6 +14,7 @@ interface FolderNode {
   name: string;
   icon?: ReactNode;
   index?: PageNode;
+  folderIndexBehavior?: "link" | "toggle";
   children: (PageNode | FolderNode)[];
   collapsible?: boolean;
   defaultOpen?: boolean;

package/dist/tanstack-layout.mjs

@@ -7,6 +7,7 @@ import { SidebarSearchWithAI } from "./sidebar-search-ai.mjs";
 import { LocaleThemeControl } from "./locale-theme-control.mjs";
 import { DocsLayout } from "fumadocs-ui/layouts/docs";
 import { Suspense } from "react";
+import { applySidebarFolderIndexBehavior } from "@farming-labs/docs";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/tanstack-layout.tsx
@@ -257,7 +258,13 @@ function TanstackDocsLayout({ config, tree, locale, description, readingTime, la
 		aiDefaultModelId = rawModelConfig.defaultModel ?? rawModelConfig.models?.[0]?.id ?? aiDefaultModelId;
 	}
 	const i18n = config.i18n;
-	const resolvedTree = resolveTreeIcons(locale ? localizeTreeUrls(tree, locale) : tree, config.icons);
+	const resolvedTree = resolveTreeIcons(locale ? localizeTreeUrls(applySidebarFolderIndexBehavior(tree, {
+		sidebar: config.sidebar,
+		defaultBehavior: "link"
+	}), locale) : applySidebarFolderIndexBehavior(tree, {
+		sidebar: config.sidebar,
+		defaultBehavior: "link"
+	}), config.icons);
 	const finalSidebarProps = { ...sidebarProps };
 	const sidebarFooter = sidebarProps.footer;
 	if (locale && i18n?.locales && i18n.defaultLocale) finalSidebarProps.footer = /* @__PURE__ */ jsxs("div", {

package/package.json

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

package/styles/base.css

@@ -26,6 +26,24 @@ body {
   font-family: var(--fd-font-sans, var(--font-geist-sans, ui-sans-serif, system-ui, sans-serif));
 }
 
+/*
+ * Sidebar folder rows can render as either links or toggle buttons depending on
+ * folderIndexBehavior. Reset the button chrome so both variants can share the
+ * same layout metrics once theme styles are applied.
+ */
+:where(.fd-sidebar, aside#nd-sidebar, aside#nd-sidebar-mobile)
+  button[aria-controls][aria-expanded] {
+  appearance: none;
+  -webkit-appearance: none;
+  background: none;
+  border: 0;
+  color: inherit;
+  font: inherit;
+  letter-spacing: inherit;
+  line-height: inherit;
+  text-transform: inherit;
+}
+
 code,
 kbd,
 pre,

package/styles/concrete.css

@@ -50,7 +50,8 @@
     linear-gradient(180deg, color-mix(in srgb, var(--color-fd-primary) 10%, var(--color-fd-background)), var(--color-fd-background));
 }
 
-aside a[data-active] {
+aside a[data-active],
+aside button[aria-controls][aria-expanded] {
   text-transform: uppercase;
   letter-spacing: 0.045em;
   font-size: 0.79rem;

package/styles/darkbold.css

@@ -101,12 +101,16 @@ aside a > img:first-child {
 }
 
 /* ── Sidebar links — match DarkBold: 14px, 400 weight, minimal pad ─ */
-aside a[data-active] {
+aside a[data-active],
+aside button[aria-controls][aria-expanded] {
   font-size: 0.875rem;
   line-height: 1.5;
-  font-weight: 400;
   padding: 6px 8px;
   border-radius: 6px;
+}
+
+aside a[data-active] {
+  font-weight: 400;
   color: var(--color-fd-muted-foreground);
   transition: color 150ms;
 }

package/styles/darksharp.css

@@ -253,7 +253,8 @@ article a[class*="text-fd-muted-foreground"] {
   border-color: hsl(0 0% 12%);
 }
 
-.dark aside a[data-active] {
+.dark aside a[data-active],
+.dark aside button[aria-controls][aria-expanded] {
   border-radius: 0.2rem !important;
   padding: 0.4rem 0.5rem;
   font-size: 0.8125rem;

package/styles/greentree.css

@@ -86,7 +86,8 @@ aside#nd-sidebar,
   background: var(--color-fd-background);
 }
 
-aside a[data-active] {
+aside a[data-active],
+aside button[aria-controls][aria-expanded] {
   font-size: 0.875rem;
   line-height: 1.5;
   font-weight: 500;

package/styles/hardline.css

@@ -78,12 +78,16 @@ aside#nd-sidebar,
 }
 
 /* Sidebar links and categories */
-aside a[data-active] {
-  font-weight: 600;
+aside a[data-active],
+aside button[aria-controls][aria-expanded] {
   font-size: 0.92rem;
-  letter-spacing: 0.01em;
   padding: 0.5rem 0.625rem;
   border: 1px solid transparent;
+}
+
+aside a[data-active] {
+  font-weight: 600;
+  letter-spacing: 0.01em;
   color: var(--color-fd-foreground);
 }
 

package/styles/pixel-border.css

@@ -237,18 +237,22 @@ aside .overscroll-contain > div > div:last-child {
 
 /* ── Sidebar links (all levels) ──────────────────────────────────── */
 
-aside a[data-active] {
+aside a[data-active],
+aside button[aria-controls][aria-expanded] {
   font-size: 0.875rem;
   line-height: 1.6;
   border-radius: 0 !important;
   padding: 0.5rem 0.625rem !important;
   transition: color 0.15s ease;
-  color: var(--color-fd-muted-foreground);
-  font-weight: 400;
   overflow: hidden;
   background-color: transparent !important;
 }
 
+aside a[data-active] {
+  color: var(--color-fd-muted-foreground);
+  font-weight: 400;
+}
+
 aside a[data-active="true"],
 aside a[data-active="true"]:hover {
   background: transparent !important;