@farming-labs/next 0.1.64 → 0.1.65

package/dist/api-reference.mjs

@@ -3,6 +3,7 @@ import { existsSync, readFileSync, readdirSync, statSync } from "node:fs";
 import { join, relative } from "node:path";
 import { ApiReference } from "@scalar/nextjs-api-reference";
 import { buildApiReferenceOpenApiDocumentAsync, buildApiReferencePageTitle, buildApiReferenceScalarCss, resolveApiReferenceConfig, resolveApiReferenceRenderer } from "@farming-labs/docs/server";
+import { SidebarTabsDropdown } from "fumadocs-ui/components/sidebar/tabs/dropdown";
 import Link from "next/link";
 import { notFound } from "next/navigation";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -262,24 +263,13 @@ function buildNextOpenApiDocument(config) {
 		paths: buildOpenApiPaths(routes)
 	};
 }
-function SwitcherGlyph({ kind, radius, active }) {
+function SwitcherGlyph({ kind }) {
 	const isApi = kind === "api";
 	return /* @__PURE__ */ jsx("span", {
 		className: "fd-api-reference-switcher-glyph",
-		"data-active": active ? "true" : "false",
+		"data-kind": kind,
 		"aria-hidden": "true",
-		style: {
-			display: "inline-flex",
-			width: 22,
-			height: 22,
-			alignItems: "center",
-			justifyContent: "center",
-			color: active ? "var(--color-fd-primary, currentColor)" : "var(--fd-api-switcher-muted, var(--color-fd-muted-foreground, rgba(255,255,255,0.72)))",
-			borderRadius: radius
-		},
 		children: isApi ? /* @__PURE__ */ jsx("svg", {
-			width: "13",
-			height: "13",
 			viewBox: "0 0 24 24",
 			fill: "none",
 			children: /* @__PURE__ */ jsx("path", {
@@ -290,8 +280,6 @@ function SwitcherGlyph({ kind, radius, active }) {
 				strokeLinejoin: "round"
 			})
 		}) : /* @__PURE__ */ jsx("svg", {
-			width: "13",
-			height: "13",
 			viewBox: "0 0 24 24",
 			fill: "none",
 			children: /* @__PURE__ */ jsx("path", {
@@ -303,66 +291,6 @@ function SwitcherGlyph({ kind, radius, active }) {
 		})
 	});
 }
-function ChevronStack() {
-	return /* @__PURE__ */ jsxs("span", {
-		className: "fd-api-reference-switcher-chevron",
-		"aria-hidden": "true",
-		style: {
-			display: "inline-flex",
-			flexDirection: "column",
-			gap: 2
-		},
-		children: [/* @__PURE__ */ jsx("svg", {
-			width: "11",
-			height: "7",
-			viewBox: "0 0 10 6",
-			fill: "none",
-			children: /* @__PURE__ */ jsx("path", {
-				d: "M1 5L5 1L9 5",
-				stroke: "currentColor",
-				strokeWidth: "1.5",
-				strokeLinecap: "round"
-			})
-		}), /* @__PURE__ */ jsx("svg", {
-			width: "11",
-			height: "7",
-			viewBox: "0 0 10 6",
-			fill: "none",
-			children: /* @__PURE__ */ jsx("path", {
-				d: "M1 1L5 5L9 1",
-				stroke: "currentColor",
-				strokeWidth: "1.5",
-				strokeLinecap: "round"
-			})
-		})]
-	});
-}
-function getApiReferenceSwitcherTheme(config) {
-	const themeName = config.theme?.name?.toLowerCase() ?? "";
-	const isPixelBorder = themeName.includes("pixel-border");
-	const isDarksharp = themeName.includes("darksharp");
-	const isShiny = themeName.includes("shiny");
-	const radius = config.theme?.ui?.radius ?? (isPixelBorder || isDarksharp ? "0px" : "var(--radius, 0.75rem)");
-	return {
-		cardRadius: radius,
-		iconRadius: radius,
-		backgroundImage: isPixelBorder ? "repeating-linear-gradient(-45deg, color-mix(in srgb, var(--color-fd-border) 10%, transparent), color-mix(in srgb, var(--color-fd-border) 10%, transparent) 1px, transparent 1px, transparent 6px)" : void 0,
-		boxShadow: isPixelBorder || isDarksharp ? "none" : isShiny ? "0 14px 40px color-mix(in srgb, var(--color-fd-border, #2a2a2a) 18%, transparent)" : "0 0 0 1px color-mix(in srgb, var(--color-fd-border, #2a2a2a) 32%, transparent)",
-		titleStyle: {
-			fontFamily: isPixelBorder ? "var(--fd-font-mono, var(--font-geist-mono, ui-monospace, monospace))" : "var(--fd-font-sans, var(--font-geist-sans, system-ui, sans-serif))",
-			textTransform: isPixelBorder ? "uppercase" : void 0,
-			letterSpacing: isPixelBorder ? "0.08em" : void 0,
-			fontSize: isPixelBorder ? 12 : 13
-		},
-		descriptionStyle: {
-			fontFamily: isPixelBorder ? "var(--fd-font-mono, var(--font-geist-mono, ui-monospace, monospace))" : "var(--fd-font-sans, var(--font-geist-sans, system-ui, sans-serif))",
-			textTransform: isPixelBorder ? "uppercase" : void 0,
-			letterSpacing: isPixelBorder ? "0.04em" : void 0,
-			fontSize: isPixelBorder ? 11 : 11,
-			opacity: isPixelBorder ? .74 : .72
-		}
-	};
-}
 const API_REFERENCE_COLOR_MAP = {
 	primary: "--color-fd-primary",
 	primaryForeground: "--color-fd-primary-foreground",
@@ -515,131 +443,20 @@ function ApiReferenceServerUrlPatchScript({ serverUrl }) {
   })();` }
 	});
 }
-function SwitcherOption({ href, kind, title, description, current, config }) {
-	const theme = getApiReferenceSwitcherTheme(config);
-	return /* @__PURE__ */ jsxs(Link, {
-		className: "fd-api-reference-switcher-option",
-		"data-current": current ? "true" : "false",
-		href,
-		prefetch: true,
-		style: {
-			display: "grid",
-			gridTemplateColumns: "22px minmax(0, 1fr)",
-			gap: 12,
-			alignItems: "start",
-			padding: "11px 12px",
-			borderRadius: "0.625rem",
-			textDecoration: "none",
-			color: "inherit",
-			backgroundImage: current ? theme.backgroundImage : void 0
-		},
-		children: [/* @__PURE__ */ jsx("span", {
-			style: {
-				display: "inline-flex",
-				alignSelf: "start",
-				paddingTop: 1
-			},
-			children: /* @__PURE__ */ jsx(SwitcherGlyph, {
-				kind,
-				radius: theme.iconRadius,
-				active: current
-			})
-		}), /* @__PURE__ */ jsxs("span", {
-			style: {
-				display: "flex",
-				minWidth: 0,
-				flexDirection: "column",
-				gap: 3
-			},
-			children: [/* @__PURE__ */ jsx("span", {
-				style: {
-					fontWeight: 600,
-					lineHeight: 1.2,
-					...theme.titleStyle
-				},
-				children: title
-			}), /* @__PURE__ */ jsx("span", {
-				style: {
-					lineHeight: 1.4,
-					...theme.descriptionStyle
-				},
-				children: description
-			})]
-		})]
-	});
-}
-function ApiReferenceSwitcher({ docsUrl, apiUrl, current, config }) {
-	const currentLabel = current === "api" ? "API Reference" : "Documentation";
-	const theme = getApiReferenceSwitcherTheme(config);
-	const themeStyle = resolveApiReferenceThemeStyle(config);
-	const switcherStyle = {
-		position: "relative",
-		marginBottom: 16,
-		overflow: "hidden",
-		backgroundImage: theme.backgroundImage,
-		boxShadow: theme.boxShadow,
-		["--fd-api-switcher-card-radius"]: theme.cardRadius,
-		["--fd-api-switcher-icon-radius"]: theme.iconRadius,
-		["--fd-api-switcher-shadow"]: theme.boxShadow
-	};
-	return /* @__PURE__ */ jsxs("details", {
-		className: "fd-api-reference-switcher",
-		"data-theme-style": themeStyle,
-		style: switcherStyle,
-		children: [/* @__PURE__ */ jsxs("summary", {
-			className: "fd-api-reference-switcher-summary",
-			style: {
-				display: "flex",
-				alignItems: "center",
-				justifyContent: "space-between",
-				gap: 10,
-				cursor: "pointer",
-				padding: "10px 13px"
-			},
-			children: [/* @__PURE__ */ jsxs("span", {
-				style: {
-					display: "flex",
-					minWidth: 0,
-					alignItems: "center",
-					gap: 10
-				},
-				children: [/* @__PURE__ */ jsx(SwitcherGlyph, {
-					kind: current,
-					radius: theme.iconRadius,
-					active: true
-				}), /* @__PURE__ */ jsx("span", {
-					style: {
-						fontWeight: 600,
-						lineHeight: 1.2,
-						...theme.titleStyle
-					},
-					children: currentLabel
-				})]
-			}), /* @__PURE__ */ jsx(ChevronStack, {})]
-		}), /* @__PURE__ */ jsxs("div", {
-			className: "fd-api-reference-switcher-options",
-			style: {
-				display: "flex",
-				flexDirection: "column",
-				gap: 2,
-				padding: "8px 8px 9px"
-			},
-			children: [/* @__PURE__ */ jsx(SwitcherOption, {
-				href: docsUrl,
-				kind: "docs",
-				title: "Documentation",
-				description: "Guides & concepts",
-				current: current === "docs",
-				config
-			}), /* @__PURE__ */ jsx(SwitcherOption, {
-				href: apiUrl,
-				kind: "api",
-				title: "API Reference",
-				description: "Endpoints & examples",
-				current: current === "api",
-				config
-			})]
-		})]
+function ApiReferenceSwitcher({ docsUrl, apiUrl }) {
+	return /* @__PURE__ */ jsx(SidebarTabsDropdown, {
+		className: "fd-api-reference-switcher w-full mb-4",
+		options: [{
+			url: docsUrl,
+			title: "Documentation",
+			description: "Guides & concepts",
+			icon: /* @__PURE__ */ jsx(SwitcherGlyph, { kind: "docs" })
+		}, {
+			url: apiUrl,
+			title: "API Reference",
+			description: "Endpoints & examples",
+			icon: /* @__PURE__ */ jsx(SwitcherGlyph, { kind: "api" })
+		}]
 	});
 }
 function getExistingSidebarBanner(config) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farming-labs/next",
-  "version": "0.1.64",
+  "version": "0.1.65",
   "description": "Next.js adapter for @farming-labs/docs — MDX config wrapper",
   "keywords": [
     "docs",
@@ -95,8 +95,8 @@
     "tsdown": "^0.20.3",
     "typescript": "^5.9.3",
     "vitest": "^3.2.4",
-    "@farming-labs/docs": "0.1.64",
-    "@farming-labs/theme": "0.1.64"
+    "@farming-labs/docs": "0.1.65",
+    "@farming-labs/theme": "0.1.65"
   },
   "peerDependencies": {
     "@farming-labs/docs": ">=0.0.1",

package/styles/api-reference.css

@@ -39,126 +39,33 @@
   --color-fd-overlay: hsla(0, 0%, 0%, 0.2);
 }
 
-.fd-api-reference-switcher {
-  --fd-api-switcher-card-radius: var(--radius, 0.75rem);
-  --fd-api-switcher-icon-radius: var(--radius, 0.75rem);
-  --fd-api-switcher-shadow: none;
-  --fd-api-switcher-surface: var(--color-fd-card);
-  --fd-api-switcher-summary-surface: color-mix(
-    in srgb,
-    var(--color-fd-secondary) 72%,
-    var(--color-fd-card) 28%
-  );
-  --fd-api-switcher-border: color-mix(in srgb, var(--color-fd-border) 92%, transparent);
-  --fd-api-switcher-muted: rgb(71 85 105 / 0.84);
-  --fd-api-switcher-current-surface: color-mix(
-    in srgb,
-    var(--color-fd-primary, rgb(214 145 0)) 12%,
-    var(--color-fd-card) 88%
-  );
-  --fd-api-switcher-current-border: color-mix(
-    in srgb,
-    var(--color-fd-primary, rgb(214 145 0)) 22%,
-    transparent
-  );
-  --fd-api-switcher-glyph-surface: color-mix(
-    in srgb,
-    var(--color-fd-secondary) 64%,
-    var(--color-fd-card) 36%
-  );
-}
-
-.dark .fd-api-reference-switcher {
-  --fd-api-switcher-shadow: 0 0 0 1px rgb(255 255 255 / 0.06);
-  --fd-api-switcher-surface: color-mix(in srgb, rgb(20 20 20) 94%, transparent);
-  --fd-api-switcher-summary-surface: color-mix(in srgb, rgb(28 28 28) 96%, transparent);
-  --fd-api-switcher-border: rgb(255 255 255 / 0.08);
-  --fd-api-switcher-muted: rgb(255 255 255 / 0.68);
-  --fd-api-switcher-current-surface: color-mix(
-    in srgb,
-    var(--color-fd-primary, rgb(250 204 21)) 18%,
-    transparent
-  );
-  --fd-api-switcher-current-border: color-mix(
-    in srgb,
-    var(--color-fd-primary, rgb(250 204 21)) 22%,
-    rgb(255 255 255 / 0.08)
-  );
-  --fd-api-switcher-glyph-surface: color-mix(in srgb, rgb(28 28 28) 94%, transparent);
-}
-
-.fd-api-reference-switcher {
-  border: 1px solid var(--fd-api-switcher-border);
-  border-radius: var(--fd-api-switcher-card-radius);
-  background: var(--fd-api-switcher-surface);
-  box-shadow: var(--fd-api-switcher-shadow);
-}
-
-.fd-api-reference-switcher-summary {
-  list-style: none;
-  background: var(--fd-api-switcher-summary-surface);
-  border-radius: calc(var(--fd-api-switcher-card-radius) - 1px);
-  color: inherit;
-  border-bottom: 1px solid color-mix(in srgb, var(--fd-api-switcher-border) 72%, transparent);
-}
-
-.fd-api-reference-switcher-summary::-webkit-details-marker {
-  display: none;
-}
-
-.fd-api-reference-switcher-options {
-  background: var(--fd-api-switcher-surface);
-}
-
-.fd-api-reference-switcher-option {
-  border: 1px solid transparent;
-  transition:
-    background-color 150ms ease,
-    border-color 150ms ease,
-    color 150ms ease;
-}
-
-.fd-api-reference-switcher-option:hover {
-  background: color-mix(in srgb, var(--color-fd-accent) 55%, transparent);
+button.fd-api-reference-switcher {
+  width: 100%;
+  margin-bottom: 1rem;
+  border: 1px solid var(--color-fd-border) !important;
 }
 
-.fd-api-reference-switcher-option[data-current="true"] {
-  background: var(--fd-api-switcher-current-surface);
-  border-color: var(--fd-api-switcher-current-border);
+button.fd-api-reference-switcher:hover,
+button.fd-api-reference-switcher[data-state="open"] {
+  border-color: var(--color-fd-border) !important;
 }
 
 .fd-api-reference-switcher-glyph {
-  border: 1px solid var(--fd-api-switcher-border);
-  border-radius: var(--fd-api-switcher-icon-radius);
-  background: var(--fd-api-switcher-glyph-surface);
-  box-shadow: var(--fd-api-switcher-shadow);
-}
-
-.fd-api-reference-switcher-glyph[data-active="false"] {
-  color: var(--fd-api-switcher-muted);
+  display: inline-flex;
+  width: 1.25rem;
+  height: 1.25rem;
+  align-items: center;
+  justify-content: center;
+  color: color-mix(in srgb, var(--color-fd-primary) 82%, var(--color-fd-foreground));
 }
 
-.fd-api-reference-switcher-chevron {
-  color: var(--fd-api-switcher-muted);
+.fd-api-reference-switcher-glyph[data-kind="api"] {
+  color: color-mix(in srgb, var(--color-fd-primary) 64%, var(--color-fd-muted-foreground));
 }
 
-.light .fd-api-reference-switcher {
-  --fd-api-switcher-surface: var(--color-fd-card);
-  --fd-api-switcher-summary-surface: color-mix(
-    in srgb,
-    var(--color-fd-primary) 12%,
-    var(--color-fd-card) 88%
-  );
-  --fd-api-switcher-current-surface: color-mix(
-    in srgb,
-    var(--color-fd-primary) 14%,
-    var(--color-fd-card) 86%
-  );
-  --fd-api-switcher-glyph-surface: color-mix(
-    in srgb,
-    var(--color-fd-primary) 10%,
-    var(--color-fd-card) 90%
-  );
+.fd-api-reference-switcher-glyph svg {
+  width: 100%;
+  height: 100%;
 }
 
 .light .fd-api-reference-route article .border,
@@ -183,44 +90,6 @@
   color: rgb(71 85 105 / 0.9);
 }
 
-.light .fd-api-reference-switcher[data-theme-style="colorful"] .fd-api-reference-switcher-summary {
-  background: color-mix(in srgb, var(--color-fd-primary) 18%, white 82%);
-  color: var(--color-fd-primary);
-}
-
-.light .fd-api-reference-switcher[data-theme-style="colorful"] {
-  border-color: color-mix(in srgb, var(--color-fd-primary) 28%, var(--color-fd-border));
-  background: var(--color-fd-card);
-  box-shadow: none;
-}
-
-.light
-  .fd-api-reference-switcher[data-theme-style="colorful"]
-  .fd-api-reference-switcher-summary
-  .fd-api-reference-switcher-chevron {
-  color: color-mix(in srgb, var(--color-fd-primary) 78%, black 22%);
-}
-
-.light
-  .fd-api-reference-switcher[data-theme-style="colorful"]
-  .fd-api-reference-switcher-summary
-  .fd-api-reference-switcher-glyph {
-  background: color-mix(in srgb, var(--color-fd-primary) 24%, white 76%);
-  border-color: color-mix(in srgb, var(--color-fd-primary) 38%, var(--color-fd-border));
-  color: var(--color-fd-primary);
-}
-
-.light .fd-api-reference-switcher[data-theme-style="colorful"] .fd-api-reference-switcher-options {
-  background: var(--color-fd-card);
-}
-
-.light
-  .fd-api-reference-switcher[data-theme-style="colorful"]
-  .fd-api-reference-switcher-option[data-current="true"] {
-  background: color-mix(in srgb, var(--color-fd-primary) 18%, white 82%);
-  border-color: color-mix(in srgb, var(--color-fd-primary) 32%, var(--color-fd-border));
-}
-
 .light
   .fd-api-reference-route[data-theme-style="colorful"]
   .fd-api-reference-pagination-item:hover {