@openpkg-ts/doc-generator 0.3.3 → 0.3.4

package/README.md

@@ -81,6 +81,51 @@ import { FunctionPage, ClassPage } from '@openpkg-ts/doc-generator/react/styled'
 <ClassPage export={cls} />
 ```
 
+### Styled Components Setup (Fumadocs)
+
+Pre-styled components require CSS variables and Tailwind configuration for proper theming and syntax highlighting.
+
+#### 1. Install adapter
+
+```bash
+npm install @openpkg-ts/fumadocs-adapter
+```
+
+#### 2. Import CSS
+
+Add to your global CSS (e.g., `app/global.css`):
+
+```css
+@import 'tailwindcss';
+@import 'fumadocs-ui/css/neutral.css';
+@import 'fumadocs-ui/css/preset.css';
+@import '@openpkg-ts/fumadocs-adapter/css';
+```
+
+This provides:
+- `--dk-*` variables for DocsKit code blocks
+- `--ch-*` variables for CodeHike syntax highlighting (GitHub theme)
+- `--api-*` variables for API reference styling
+- Light/dark mode support
+
+#### 3. Tailwind v4 source scanning
+
+Tailwind v4 excludes `node_modules` by default. Add this directive to scan styled component classes:
+
+```css
+@source "../node_modules/@openpkg-ts/doc-generator/dist/**/*.js";
+```
+
+Without this, utility classes like `lg:grid-cols-[1fr,minmax(0,420px)]` won't be included in your build.
+
+#### 4. Layout requirements
+
+Styled components use a two-column layout at the `lg:` breakpoint (1024px). For best results:
+
+- Content area should be >= 1024px wide
+- In Fumadocs, consider using `full` layout for API pages or hiding the TOC to maximize content width
+- On narrower viewports, the layout stacks vertically
+
 ## API Reference
 
 ### Core Functions

package/dist/react-styled.js

@@ -23095,6 +23095,7 @@ function ExportIndexPage({
 // src/components/styled/FunctionPage.tsx
 import { cn as cn5 } from "@doccov/ui/lib/utils";
 import { CodeTabs as CodeTabs2, ImportSection as ImportSection2 } from "@doccov/ui/api";
+import { ClientDocsKitCode } from "@doccov/ui/docskit";
 import { useState as useState7 } from "react";
 import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
 
@@ -23118,15 +23119,16 @@ function FunctionPage({
     const code = typeof example === "string" ? example : example.code;
     const title = typeof example === "string" ? `Example ${index + 1}` : example.title || `Example ${index + 1}`;
     const filename = `${exp.name.toLowerCase().replace(/[^a-z0-9]/g, "-")}-${index + 1}.ts`;
+    const lang = typeof example === "string" ? "ts" : example.language || "ts";
     return {
       label: title,
       code,
-      content: renderExample ? renderExample(code, filename) : /* @__PURE__ */ jsx13("pre", {
-        className: "p-4 overflow-x-auto",
-        children: /* @__PURE__ */ jsx13("code", {
-          className: "font-mono text-sm text-foreground",
-          children: code
-        })
+      content: renderExample ? renderExample(code, filename) : /* @__PURE__ */ jsx13(ClientDocsKitCode, {
+        codeblock: {
+          value: code,
+          lang,
+          meta: "-c"
+        }
       })
     };
   }) : [];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openpkg-ts/doc-generator",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "description": "API doc generator consuming OpenPkg specs. TypeDoc alternative for modern doc frameworks.",
   "keywords": [
     "openpkg",