@doccov/ui 0.2.3 → 0.3.1

package/dist/docskit/index.d.ts

@@ -231,4 +231,175 @@ declare function TooltipLink(props: {
 });
 import { AnnotationHandler as AnnotationHandler13 } from "codehike/code";
 declare const wordWrap2: AnnotationHandler13;
-export { wordWrap2 as wordWrap, tooltip, toCodeGroup, theme, mark, link, lineNumbers2 as lineNumbers, hover, flagsToOptions, expandable, diff, collapse, callout, addDocsKit, WithNotes, WithHover, TooltipLink, TerminalSkeleton, Terminal, TabsTrigger, TabsList, TabsContent, Tabs, SingleCode, PackageInstall, MultiCode, InlineCodeSkeleton, HoverLink, DocsKitInlineCode, DocsKitCode, DiffStats, CopyButton, CodeTabsSkeleton, CodeInfo, CodeIcon, CodeGroup, CodeBlockSkeleton, Code, ClientTerminal, ClientInlineCode, ClientDocsKitCode, ClientDiffCodeProps, ClientDiffCode, ClientCode };
+import { VariantProps } from "class-variance-authority";
+import * as React5 from "react";
+type HttpMethod = "GET" | "POST" | "PUT" | "DELETE" | "PATCH";
+declare const endpointBadgeVariants: unknown;
+interface EndpointBadgeProps extends React5.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof endpointBadgeVariants> {
+	method: HttpMethod;
+}
+declare const EndpointBadge: unknown;
+import * as React6 from "react";
+interface EndpointHeaderProps extends React6.HTMLAttributes<HTMLDivElement> {
+	/** HTTP method */
+	method: HttpMethod;
+	/** API path (e.g., "/v1/customers") */
+	path: string;
+	/** Show copy button on hover */
+	copyable?: boolean;
+}
+declare const EndpointHeader: unknown;
+import * as React7 from "react";
+interface APIParameterSchema {
+	/** Type name */
+	type?: string;
+	/** Formatted type string */
+	typeString?: string;
+	/** Description */
+	description?: string;
+	/** Nested properties for object types */
+	properties?: Record<string, APIParameterSchema>;
+	/** Required property names */
+	required?: string[];
+}
+interface APIParameterItemProps {
+	/** Parameter name */
+	name: string;
+	/** Type string (e.g., "string", "object") */
+	type: string;
+	/** Is required */
+	required?: boolean;
+	/** Description */
+	description?: string;
+	/** Nested children (for expandable objects) */
+	children?: APIParameterSchema;
+	/** Nesting depth */
+	depth?: number;
+	/** Custom className */
+	className?: string;
+}
+/**
+* Single parameter row with name, type, required badge, description, and expandable children.
+* Stripe-style API reference parameter display.
+*/
+declare function APIParameterItem({ name, type, required, description, children, depth, className }: APIParameterItemProps): React7.ReactNode;
+import * as React8 from "react";
+interface ParameterListProps {
+	/** Title above the list (e.g., "Body parameters") */
+	title?: string;
+	/** Number of items to show before collapsing */
+	collapseAfter?: number;
+	/** Child parameter items */
+	children: React8.ReactNode;
+	/** Custom className */
+	className?: string;
+}
+/**
+* Container for parameter items with optional "More parameters" collapse.
+*/
+declare function ParameterList({ title, collapseAfter, children, className }: ParameterListProps): React8.ReactNode;
+import * as React9 from "react";
+interface ResponseBlockProps {
+	/** Response JSON data */
+	data: object;
+	/** Optional title (e.g., "Response", "200 OK") */
+	title?: string;
+	/** Custom className */
+	className?: string;
+}
+/**
+* JSON response preview with syntax highlighting.
+* Displays formatted JSON with copy functionality.
+*/
+declare function ResponseBlock({ data, title, className }: ResponseBlockProps): React9.ReactNode;
+import * as React10 from "react";
+interface Language {
+	/** Language identifier (e.g., "curl", "node", "python") */
+	id: string;
+	/** Display label (e.g., "cURL", "Node.js", "Python") */
+	label: string;
+}
+interface LanguageSelectorProps {
+	/** Available languages */
+	languages: Language[];
+	/** Currently selected language id */
+	value: string;
+	/** Callback when language changes */
+	onChange: (languageId: string) => void;
+	/** Custom className */
+	className?: string;
+}
+/**
+* Dropdown selector for choosing code example language.
+* Used in APICodePanel to switch between language examples.
+*/
+declare function LanguageSelector({ languages, value, onChange, className }: LanguageSelectorProps): React10.ReactNode;
+import * as React11 from "react";
+interface CodeExample {
+	/** Language identifier */
+	languageId: string;
+	/** Code content */
+	code: string;
+	/** Optional syntax highlighting language (defaults to languageId) */
+	highlightLang?: string;
+}
+interface APICodePanelProps {
+	/** Available languages for the selector */
+	languages: Language[];
+	/** Code examples keyed by language id */
+	examples: CodeExample[];
+	/** Optional external link (e.g., to API playground) */
+	externalLink?: string;
+	/** Optional title shown in header */
+	title?: string;
+	/** Custom className */
+	className?: string;
+}
+/**
+* Right-side sticky code panel for API documentation.
+* Features language dropdown, copy button, and dark bg with syntax highlighting.
+*/
+declare function APICodePanel({ languages, examples, externalLink, title, className }: APICodePanelProps): React11.ReactNode;
+import * as React12 from "react";
+interface APISectionProps {
+	/** Section title (e.g., "Create a customer", "The Customer object") */
+	title: string;
+	/** Optional anchor id for deep linking */
+	id?: string;
+	/** Optional description */
+	description?: React12.ReactNode;
+	/** Left column content (parameters, returns, etc.) */
+	children: React12.ReactNode;
+	/** Languages for code panel */
+	languages: Language[];
+	/** Code examples for the right panel */
+	examples: CodeExample[];
+	/** Optional external link for code panel */
+	externalLink?: string;
+	/** Optional code panel title */
+	codePanelTitle?: string;
+	/** Custom className */
+	className?: string;
+}
+/**
+* Single API section with two-column layout.
+* Docs/params on left, sticky code panel on right.
+*/
+declare function APISection({ title, id, description, children, languages, examples, externalLink, codePanelTitle, className }: APISectionProps): React12.ReactNode;
+import * as React13 from "react";
+interface APIReferencePageProps {
+	/** Page title */
+	title: string;
+	/** Optional page description */
+	description?: React13.ReactNode;
+	/** API sections as children */
+	children: React13.ReactNode;
+	/** Custom className */
+	className?: string;
+}
+/**
+* Full page wrapper for API reference documentation.
+* Provides max-width container and consistent spacing.
+*/
+declare function APIReferencePage({ title, description, children, className }: APIReferencePageProps): React13.ReactNode;
+export { wordWrap2 as wordWrap, tooltip, toCodeGroup, theme, mark, link, lineNumbers2 as lineNumbers, hover, flagsToOptions, expandable, endpointBadgeVariants, diff, collapse, callout, addDocsKit, WithNotes, WithHover, TooltipLink, TerminalSkeleton, Terminal, TabsTrigger, TabsList, TabsContent, Tabs, SingleCode, ResponseBlockProps, ResponseBlock, ParameterListProps, ParameterList, PackageInstall, MultiCode, LanguageSelectorProps, LanguageSelector, Language, InlineCodeSkeleton, HttpMethod, HoverLink, EndpointHeaderProps, EndpointHeader, EndpointBadgeProps, EndpointBadge, DocsKitInlineCode, DocsKitCode, DiffStats, CopyButton, CodeTabsSkeleton, CodeInfo, CodeIcon, CodeGroup, CodeExample, CodeBlockSkeleton, Code, ClientTerminal, ClientInlineCode, ClientDocsKitCode, ClientDiffCodeProps, ClientDiffCode, ClientCode, APISectionProps, APISection, APIReferencePageProps, APIReferencePage, APIParameterSchema, APIParameterItemProps, APIParameterItem, APICodePanelProps, APICodePanel };

package/dist/docskit/index.js

@@ -5341,6 +5341,750 @@ function WithNotes({ children, ...rest }) {
     children
   });
 }
+// src/components/docskit/api/endpoint-badge.tsx
+import { cva } from "class-variance-authority";
+import * as React29 from "react";
+import { jsx as jsx44 } from "react/jsx-runtime";
+var endpointBadgeVariants = cva("inline-flex items-center justify-center font-mono font-bold uppercase tracking-wide rounded shrink-0", {
+  variants: {
+    method: {
+      GET: "bg-emerald-500/15 text-emerald-500",
+      POST: "bg-blue-500/15 text-blue-500",
+      PUT: "bg-amber-500/15 text-amber-500",
+      DELETE: "bg-rose-500/15 text-rose-500",
+      PATCH: "bg-violet-500/15 text-violet-500"
+    },
+    size: {
+      sm: "h-5 px-1.5 text-[10px]",
+      md: "h-6 px-2 text-xs"
+    }
+  },
+  defaultVariants: {
+    method: "GET",
+    size: "md"
+  }
+});
+var EndpointBadge = React29.forwardRef(({ className, method, size: size4, ...props }, ref) => {
+  return /* @__PURE__ */ jsx44("span", {
+    ref,
+    className: cn(endpointBadgeVariants({ method, size: size4, className })),
+    ...props,
+    children: method
+  });
+});
+EndpointBadge.displayName = "EndpointBadge";
+// src/components/docskit/api/endpoint-header.tsx
+import { Copy as Copy2, Check as Check2 } from "lucide-react";
+import * as React30 from "react";
+import { useState as useState15 } from "react";
+import { jsx as jsx45, jsxs as jsxs16 } from "react/jsx-runtime";
+
+var EndpointHeader = React30.forwardRef(({ className, method, path, copyable = true, ...props }, ref) => {
+  const [copied, setCopied] = useState15(false);
+  const handleCopy = () => {
+    navigator.clipboard.writeText(path);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1200);
+  };
+  return /* @__PURE__ */ jsxs16("div", {
+    ref,
+    className: cn("group flex items-center gap-3 py-2 px-3 rounded-lg bg-muted/50 border border-border", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx45(EndpointBadge, {
+        method
+      }),
+      /* @__PURE__ */ jsx45("code", {
+        className: "font-mono text-sm text-foreground flex-1",
+        children: path
+      }),
+      copyable && /* @__PURE__ */ jsx45("button", {
+        type: "button",
+        onClick: handleCopy,
+        className: cn("p-1.5 rounded text-muted-foreground hover:text-foreground", "opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer"),
+        "aria-label": "Copy path",
+        children: copied ? /* @__PURE__ */ jsx45(Check2, {
+          size: 14
+        }) : /* @__PURE__ */ jsx45(Copy2, {
+          size: 14
+        })
+      })
+    ]
+  });
+});
+EndpointHeader.displayName = "EndpointHeader";
+// src/components/docskit/api/parameter-item.tsx
+import { ChevronRight, Copy as Copy3, Check as Check3 } from "lucide-react";
+import { useState as useState16 } from "react";
+import { jsx as jsx46, jsxs as jsxs17 } from "react/jsx-runtime";
+
+function NestedProperty({
+  name,
+  schema,
+  required = false,
+  depth = 0
+}) {
+  const [expanded, setExpanded] = useState16(false);
+  const [copied, setCopied] = useState16(false);
+  const type = schema.typeString ?? schema.type ?? "unknown";
+  const hasNested = schema.properties && Object.keys(schema.properties).length > 0;
+  const nestedCount = hasNested ? Object.keys(schema.properties).length : 0;
+  const handleCopy = () => {
+    navigator.clipboard.writeText(name);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1200);
+  };
+  return /* @__PURE__ */ jsxs17("div", {
+    className: cn("border-t border-border first:border-t-0", depth > 0 && "ml-4"),
+    children: [
+      /* @__PURE__ */ jsx46("div", {
+        className: "group py-4",
+        children: /* @__PURE__ */ jsxs17("div", {
+          className: "flex items-start gap-2",
+          children: [
+            hasNested ? /* @__PURE__ */ jsx46("button", {
+              type: "button",
+              onClick: () => setExpanded(!expanded),
+              className: "mt-0.5 p-0.5 text-muted-foreground hover:text-foreground transition-colors cursor-pointer",
+              "aria-label": expanded ? "Collapse" : "Expand",
+              children: /* @__PURE__ */ jsx46(ChevronRight, {
+                size: 14,
+                className: cn("transition-transform duration-200", expanded && "rotate-90")
+              })
+            }) : /* @__PURE__ */ jsx46("div", {
+              className: "w-5"
+            }),
+            /* @__PURE__ */ jsxs17("div", {
+              className: "flex-1 min-w-0",
+              children: [
+                /* @__PURE__ */ jsxs17("div", {
+                  className: "flex items-center gap-2 flex-wrap",
+                  children: [
+                    /* @__PURE__ */ jsxs17("span", {
+                      className: "font-mono text-sm font-medium text-foreground",
+                      children: [
+                        name,
+                        !required && /* @__PURE__ */ jsx46("span", {
+                          className: "text-muted-foreground",
+                          children: "?"
+                        })
+                      ]
+                    }),
+                    /* @__PURE__ */ jsx46("span", {
+                      className: "font-mono text-xs text-muted-foreground",
+                      children: type
+                    }),
+                    hasNested && /* @__PURE__ */ jsx46("button", {
+                      type: "button",
+                      onClick: () => setExpanded(!expanded),
+                      className: "text-xs text-primary hover:underline cursor-pointer",
+                      children: "Show child parameters"
+                    }),
+                    /* @__PURE__ */ jsx46("button", {
+                      type: "button",
+                      onClick: handleCopy,
+                      className: "p-1 rounded text-muted-foreground hover:text-foreground opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer",
+                      "aria-label": "Copy name",
+                      children: copied ? /* @__PURE__ */ jsx46(Check3, {
+                        size: 12
+                      }) : /* @__PURE__ */ jsx46(Copy3, {
+                        size: 12
+                      })
+                    })
+                  ]
+                }),
+                schema.description && /* @__PURE__ */ jsx46("p", {
+                  className: "text-sm text-muted-foreground mt-1",
+                  children: schema.description
+                })
+              ]
+            })
+          ]
+        })
+      }),
+      hasNested && expanded && schema.properties && /* @__PURE__ */ jsx46("div", {
+        className: "border-l border-border ml-2 mb-3",
+        children: Object.entries(schema.properties).map(([propName, propSchema]) => /* @__PURE__ */ jsx46(NestedProperty, {
+          name: propName,
+          schema: propSchema,
+          required: schema.required?.includes(propName),
+          depth: depth + 1
+        }, propName))
+      })
+    ]
+  });
+}
+function APIParameterItem({
+  name,
+  type,
+  required = false,
+  description,
+  children,
+  depth = 0,
+  className
+}) {
+  const [expanded, setExpanded] = useState16(false);
+  const [copied, setCopied] = useState16(false);
+  const hasNested = children?.properties && Object.keys(children.properties).length > 0;
+  const nestedCount = hasNested ? Object.keys(children.properties).length : 0;
+  const handleCopy = () => {
+    navigator.clipboard.writeText(name);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1200);
+  };
+  return /* @__PURE__ */ jsxs17("div", {
+    className: cn("border-b border-border last:border-b-0", className),
+    children: [
+      /* @__PURE__ */ jsx46("div", {
+        className: "group py-4",
+        children: /* @__PURE__ */ jsxs17("div", {
+          className: "flex items-start gap-2",
+          children: [
+            hasNested ? /* @__PURE__ */ jsx46("button", {
+              type: "button",
+              onClick: () => setExpanded(!expanded),
+              className: "mt-0.5 p-0.5 text-muted-foreground hover:text-foreground transition-colors cursor-pointer",
+              "aria-label": expanded ? "Collapse" : "Expand",
+              children: /* @__PURE__ */ jsx46(ChevronRight, {
+                size: 14,
+                className: cn("transition-transform duration-200", expanded && "rotate-90")
+              })
+            }) : /* @__PURE__ */ jsx46("div", {
+              className: "w-5"
+            }),
+            /* @__PURE__ */ jsxs17("div", {
+              className: "flex-1 min-w-0",
+              children: [
+                /* @__PURE__ */ jsxs17("div", {
+                  className: "flex items-center gap-2 flex-wrap",
+                  children: [
+                    /* @__PURE__ */ jsx46("span", {
+                      className: "font-mono text-sm font-medium text-foreground",
+                      children: name
+                    }),
+                    required && /* @__PURE__ */ jsx46("span", {
+                      className: "text-[10px] font-semibold px-1.5 py-0.5 rounded border border-border bg-muted text-muted-foreground uppercase tracking-wide",
+                      children: "Required"
+                    }),
+                    /* @__PURE__ */ jsx46("span", {
+                      className: "font-mono text-xs text-muted-foreground",
+                      children: type
+                    }),
+                    hasNested && /* @__PURE__ */ jsx46("button", {
+                      type: "button",
+                      onClick: () => setExpanded(!expanded),
+                      className: "text-xs text-primary hover:underline cursor-pointer",
+                      children: "Show child parameters"
+                    }),
+                    /* @__PURE__ */ jsx46("button", {
+                      type: "button",
+                      onClick: handleCopy,
+                      className: "p-1 rounded text-muted-foreground hover:text-foreground opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer",
+                      "aria-label": "Copy name",
+                      children: copied ? /* @__PURE__ */ jsx46(Check3, {
+                        size: 12
+                      }) : /* @__PURE__ */ jsx46(Copy3, {
+                        size: 12
+                      })
+                    })
+                  ]
+                }),
+                description && /* @__PURE__ */ jsx46("p", {
+                  className: "text-sm text-muted-foreground mt-1",
+                  children: description
+                })
+              ]
+            })
+          ]
+        })
+      }),
+      hasNested && expanded && children?.properties && /* @__PURE__ */ jsx46("div", {
+        className: "border-l border-border ml-2 mb-3",
+        children: Object.entries(children.properties).map(([propName, propSchema]) => /* @__PURE__ */ jsx46(NestedProperty, {
+          name: propName,
+          schema: propSchema,
+          required: children.required?.includes(propName),
+          depth: depth + 1
+        }, propName))
+      })
+    ]
+  });
+}
+// src/components/docskit/api/parameter-list.tsx
+import { ChevronDown as ChevronDown2 } from "lucide-react";
+import * as React31 from "react";
+import { useState as useState17 } from "react";
+import { jsx as jsx47, jsxs as jsxs18 } from "react/jsx-runtime";
+
+function ParameterList({
+  title,
+  collapseAfter,
+  children,
+  className
+}) {
+  const [expanded, setExpanded] = useState17(false);
+  const childArray = React31.Children.toArray(children);
+  const shouldCollapse = collapseAfter !== undefined && childArray.length > collapseAfter;
+  const visibleChildren = shouldCollapse && !expanded ? childArray.slice(0, collapseAfter) : childArray;
+  const hiddenCount = shouldCollapse ? childArray.length - collapseAfter : 0;
+  return /* @__PURE__ */ jsxs18("div", {
+    className: cn("", className),
+    children: [
+      title && /* @__PURE__ */ jsx47("h3", {
+        className: "text-sm font-medium text-foreground mb-3 uppercase tracking-wide",
+        children: title
+      }),
+      /* @__PURE__ */ jsx47("div", {
+        className: "divide-y divide-border border-t border-b border-border",
+        children: visibleChildren
+      }),
+      shouldCollapse && !expanded && /* @__PURE__ */ jsxs18("button", {
+        type: "button",
+        onClick: () => setExpanded(true),
+        className: "flex items-center gap-1 mt-3 text-sm text-primary hover:underline cursor-pointer",
+        children: [
+          /* @__PURE__ */ jsx47(ChevronDown2, {
+            size: 14
+          }),
+          "Show ",
+          hiddenCount,
+          " more ",
+          hiddenCount === 1 ? "parameter" : "parameters"
+        ]
+      })
+    ]
+  });
+}
+// src/components/docskit/api/response-block.tsx
+import { Check as Check4, Copy as Copy4 } from "lucide-react";
+import * as React32 from "react";
+import { useState as useState18 } from "react";
+import { jsx as jsx48, jsxs as jsxs19, Fragment as Fragment4 } from "react/jsx-runtime";
+
+function ResponseBlock({ data, title, className }) {
+  const [copied, setCopied] = useState18(false);
+  const jsonString = JSON.stringify(data, null, 2);
+  const handleCopy = () => {
+    navigator.clipboard.writeText(jsonString);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1200);
+  };
+  return /* @__PURE__ */ jsxs19("div", {
+    className: cn("group rounded-lg border border-border overflow-hidden bg-muted/30", className),
+    children: [
+      title && /* @__PURE__ */ jsxs19("div", {
+        className: "flex items-center justify-between px-4 py-2 border-b border-border bg-muted/50",
+        children: [
+          /* @__PURE__ */ jsx48("span", {
+            className: "text-xs font-medium text-muted-foreground uppercase tracking-wide",
+            children: title
+          }),
+          /* @__PURE__ */ jsx48("button", {
+            type: "button",
+            onClick: handleCopy,
+            className: "p-1 rounded text-muted-foreground hover:text-foreground opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer",
+            "aria-label": "Copy response",
+            children: copied ? /* @__PURE__ */ jsx48(Check4, {
+              size: 14
+            }) : /* @__PURE__ */ jsx48(Copy4, {
+              size: 14
+            })
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsxs19("div", {
+        className: "relative",
+        children: [
+          /* @__PURE__ */ jsx48("pre", {
+            className: "p-4 overflow-auto text-sm font-mono leading-relaxed",
+            children: /* @__PURE__ */ jsx48("code", {
+              children: /* @__PURE__ */ jsx48(JsonHighlight, {
+                json: data
+              })
+            })
+          }),
+          !title && /* @__PURE__ */ jsx48("button", {
+            type: "button",
+            onClick: handleCopy,
+            className: "absolute top-3 right-3 p-1.5 rounded text-muted-foreground hover:text-foreground opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer",
+            "aria-label": "Copy response",
+            children: copied ? /* @__PURE__ */ jsx48(Check4, {
+              size: 14
+            }) : /* @__PURE__ */ jsx48(Copy4, {
+              size: 14
+            })
+          })
+        ]
+      })
+    ]
+  });
+}
+function JsonHighlight({ json, depth = 0 }) {
+  const indent = "  ".repeat(depth);
+  const nextIndent = "  ".repeat(depth + 1);
+  if (json === null) {
+    return /* @__PURE__ */ jsx48("span", {
+      className: "text-orange-400",
+      children: "null"
+    });
+  }
+  if (typeof json === "boolean") {
+    return /* @__PURE__ */ jsx48("span", {
+      className: "text-orange-400",
+      children: json ? "true" : "false"
+    });
+  }
+  if (typeof json === "number") {
+    return /* @__PURE__ */ jsx48("span", {
+      className: "text-cyan-400",
+      children: json
+    });
+  }
+  if (typeof json === "string") {
+    return /* @__PURE__ */ jsxs19("span", {
+      className: "text-emerald-400",
+      children: [
+        '"',
+        json,
+        '"'
+      ]
+    });
+  }
+  if (Array.isArray(json)) {
+    if (json.length === 0) {
+      return /* @__PURE__ */ jsx48("span", {
+        className: "text-foreground",
+        children: "[]"
+      });
+    }
+    return /* @__PURE__ */ jsxs19(Fragment4, {
+      children: [
+        /* @__PURE__ */ jsx48("span", {
+          className: "text-foreground",
+          children: "["
+        }),
+        `
+`,
+        json.map((item, i) => /* @__PURE__ */ jsxs19(React32.Fragment, {
+          children: [
+            nextIndent,
+            /* @__PURE__ */ jsx48(JsonHighlight, {
+              json: item,
+              depth: depth + 1
+            }),
+            i < json.length - 1 && /* @__PURE__ */ jsx48("span", {
+              className: "text-foreground",
+              children: ","
+            }),
+            `
+`
+          ]
+        }, i)),
+        indent,
+        /* @__PURE__ */ jsx48("span", {
+          className: "text-foreground",
+          children: "]"
+        })
+      ]
+    });
+  }
+  if (typeof json === "object") {
+    const entries = Object.entries(json);
+    if (entries.length === 0) {
+      return /* @__PURE__ */ jsx48("span", {
+        className: "text-foreground",
+        children: "{}"
+      });
+    }
+    return /* @__PURE__ */ jsxs19(Fragment4, {
+      children: [
+        /* @__PURE__ */ jsx48("span", {
+          className: "text-foreground",
+          children: "{"
+        }),
+        `
+`,
+        entries.map(([key, value], i) => /* @__PURE__ */ jsxs19(React32.Fragment, {
+          children: [
+            nextIndent,
+            /* @__PURE__ */ jsxs19("span", {
+              className: "text-blue-400",
+              children: [
+                '"',
+                key,
+                '"'
+              ]
+            }),
+            /* @__PURE__ */ jsx48("span", {
+              className: "text-foreground",
+              children: ": "
+            }),
+            /* @__PURE__ */ jsx48(JsonHighlight, {
+              json: value,
+              depth: depth + 1
+            }),
+            i < entries.length - 1 && /* @__PURE__ */ jsx48("span", {
+              className: "text-foreground",
+              children: ","
+            }),
+            `
+`
+          ]
+        }, key)),
+        indent,
+        /* @__PURE__ */ jsx48("span", {
+          className: "text-foreground",
+          children: "}"
+        })
+      ]
+    });
+  }
+  return /* @__PURE__ */ jsx48("span", {
+    className: "text-foreground",
+    children: String(json)
+  });
+}
+// src/components/docskit/api/language-selector.tsx
+import { ChevronDown as ChevronDown3 } from "lucide-react";
+import * as React33 from "react";
+import { jsx as jsx49, jsxs as jsxs20 } from "react/jsx-runtime";
+
+function LanguageSelector({
+  languages,
+  value,
+  onChange,
+  className
+}) {
+  const [open, setOpen] = React33.useState(false);
+  const containerRef = React33.useRef(null);
+  const selectedLanguage = languages.find((l) => l.id === value);
+  React33.useEffect(() => {
+    const handleClickOutside = (e) => {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  return /* @__PURE__ */ jsxs20("div", {
+    ref: containerRef,
+    className: cn("relative", className),
+    children: [
+      /* @__PURE__ */ jsxs20("button", {
+        type: "button",
+        onClick: () => setOpen(!open),
+        className: cn("flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-sm font-medium", "bg-muted/50 hover:bg-muted text-foreground transition-colors cursor-pointer"),
+        children: [
+          selectedLanguage?.label ?? value,
+          /* @__PURE__ */ jsx49(ChevronDown3, {
+            size: 14,
+            className: cn("transition-transform", open && "rotate-180")
+          })
+        ]
+      }),
+      open && /* @__PURE__ */ jsx49("div", {
+        className: cn("absolute top-full left-0 mt-1 z-50 min-w-[120px]", "bg-popover border border-border rounded-md shadow-lg overflow-hidden"),
+        children: languages.map((lang) => /* @__PURE__ */ jsx49("button", {
+          type: "button",
+          onClick: () => {
+            onChange(lang.id);
+            setOpen(false);
+          },
+          className: cn("w-full px-3 py-2 text-sm text-left transition-colors cursor-pointer", lang.id === value ? "bg-primary/10 text-primary" : "text-foreground hover:bg-muted"),
+          children: lang.label
+        }, lang.id))
+      })
+    ]
+  });
+}
+// src/components/docskit/api/api-code-panel.tsx
+import { Pre as Pre5, highlight as highlight6 } from "codehike/code";
+import { Check as Check5, Copy as Copy5, ExternalLink } from "lucide-react";
+import { useEffect as useEffect12, useState as useState20 } from "react";
+import { jsx as jsx50, jsxs as jsxs21 } from "react/jsx-runtime";
+
+function APICodePanel({
+  languages,
+  examples,
+  externalLink,
+  title,
+  className
+}) {
+  const [selectedLang, setSelectedLang] = useState20(examples[0]?.languageId ?? languages[0]?.id);
+  const [copied, setCopied] = useState20(false);
+  const [highlighted, setHighlighted] = useState20(null);
+  const currentExample = examples.find((e) => e.languageId === selectedLang);
+  const code = currentExample?.code ?? "";
+  const lang = currentExample?.highlightLang ?? currentExample?.languageId ?? "txt";
+  useEffect12(() => {
+    let cancelled = false;
+    highlight6({
+      value: code,
+      lang: lang === "curl" ? "bash" : lang,
+      meta: ""
+    }, theme).then((result) => {
+      if (!cancelled) {
+        setHighlighted(result);
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [code, lang]);
+  const handleCopy = () => {
+    navigator.clipboard.writeText(code);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1200);
+  };
+  const handlers = getHandlers({ copyButton: false });
+  return /* @__PURE__ */ jsxs21("div", {
+    className: cn("rounded-lg overflow-hidden border border-dk-border", "bg-dk-background text-gray-100", "sticky top-20", className),
+    children: [
+      /* @__PURE__ */ jsxs21("div", {
+        className: "flex items-center justify-between px-4 py-3 border-b border-dk-border bg-dk-tabs-background",
+        children: [
+          /* @__PURE__ */ jsxs21("div", {
+            className: "flex items-center gap-3",
+            children: [
+              languages.length > 1 && /* @__PURE__ */ jsx50(LanguageSelector, {
+                languages,
+                value: selectedLang,
+                onChange: setSelectedLang,
+                className: "[&_button]:bg-white/5 [&_button]:hover:bg-white/10 [&_button]:text-gray-200"
+              }),
+              title && /* @__PURE__ */ jsx50("span", {
+                className: "text-sm text-dk-tab-inactive-foreground",
+                children: title
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsxs21("div", {
+            className: "flex items-center gap-2",
+            children: [
+              /* @__PURE__ */ jsx50("button", {
+                type: "button",
+                onClick: handleCopy,
+                className: "p-1.5 rounded text-dk-tab-inactive-foreground hover:text-gray-200 transition-colors cursor-pointer",
+                "aria-label": "Copy code",
+                children: copied ? /* @__PURE__ */ jsx50(Check5, {
+                  size: 16
+                }) : /* @__PURE__ */ jsx50(Copy5, {
+                  size: 16
+                })
+              }),
+              externalLink && /* @__PURE__ */ jsx50("a", {
+                href: externalLink,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                className: "p-1.5 rounded text-dk-tab-inactive-foreground hover:text-gray-200 transition-colors",
+                "aria-label": "Open in playground",
+                children: /* @__PURE__ */ jsx50(ExternalLink, {
+                  size: 16
+                })
+              })
+            ]
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx50("div", {
+        className: "overflow-auto max-h-[60vh] lg:max-h-none",
+        children: highlighted ? /* @__PURE__ */ jsx50(Pre5, {
+          code: highlighted,
+          className: "overflow-auto px-4 py-3 m-0 rounded-none !bg-dk-background selection:bg-dk-selection selection:text-current text-sm",
+          style: highlighted.style,
+          handlers
+        }) : /* @__PURE__ */ jsx50(CodeBlockSkeleton, {
+          lines: code.split(`
+`).length
+        })
+      })
+    ]
+  });
+}
+// src/components/docskit/api/api-section.tsx
+import { jsx as jsx51, jsxs as jsxs22 } from "react/jsx-runtime";
+
+function APISection({
+  title,
+  id,
+  description,
+  children,
+  languages,
+  examples,
+  externalLink,
+  codePanelTitle,
+  className
+}) {
+  return /* @__PURE__ */ jsx51("section", {
+    id,
+    className: cn("py-8 border-b border-border last:border-b-0", className),
+    children: /* @__PURE__ */ jsxs22("div", {
+      className: "grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12",
+      children: [
+        /* @__PURE__ */ jsxs22("div", {
+          className: "space-y-6",
+          children: [
+            /* @__PURE__ */ jsxs22("div", {
+              children: [
+                /* @__PURE__ */ jsx51("h2", {
+                  className: "text-2xl font-semibold text-foreground",
+                  children: title
+                }),
+                description && /* @__PURE__ */ jsx51("div", {
+                  className: "mt-3 text-muted-foreground prose prose-sm dark:prose-invert",
+                  children: description
+                })
+              ]
+            }),
+            children
+          ]
+        }),
+        /* @__PURE__ */ jsx51("div", {
+          className: "lg:pl-4",
+          children: /* @__PURE__ */ jsx51(APICodePanel, {
+            languages,
+            examples,
+            externalLink,
+            title: codePanelTitle,
+            className: "max-h-[400px] lg:max-h-none"
+          })
+        })
+      ]
+    })
+  });
+}
+// src/components/docskit/api/api-reference-page.tsx
+import { jsx as jsx52, jsxs as jsxs23 } from "react/jsx-runtime";
+
+function APIReferencePage({
+  title,
+  description,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxs23("div", {
+    className: cn("max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", className),
+    children: [
+      /* @__PURE__ */ jsxs23("header", {
+        className: "py-8 border-b border-border",
+        children: [
+          /* @__PURE__ */ jsx52("h1", {
+            className: "text-3xl font-bold text-foreground",
+            children: title
+          }),
+          description && /* @__PURE__ */ jsx52("div", {
+            className: "mt-4 text-lg text-muted-foreground prose prose-lg dark:prose-invert max-w-none",
+            children: description
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx52("div", {
+        children
+      })
+    ]
+  });
+}
 export {
   wordWrap,
   tooltip,
@@ -5352,6 +6096,7 @@ export {
   hover,
   flagsToOptions,
   expandable,
+  endpointBadgeVariants,
   diff,
   collapse,
   callout,
@@ -5366,10 +6111,15 @@ export {
   TabsContent,
   Tabs,
   SingleCode,
+  ResponseBlock,
+  ParameterList,
   PackageInstall,
   MultiCode,
+  LanguageSelector,
   InlineCodeSkeleton,
   HoverLink,
+  EndpointHeader,
+  EndpointBadge,
   DocsKitInlineCode,
   DocsKitCode,
   CopyButton,
@@ -5382,5 +6132,9 @@ export {
   ClientInlineCode,
   ClientDocsKitCode,
   ClientDiffCode,
-  ClientCode
+  ClientCode,
+  APISection,
+  APIReferencePage,
+  APIParameterItem,
+  APICodePanel
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@doccov/ui",
-  "version": "0.2.3",
+  "version": "0.3.1",
   "type": "module",
   "sideEffects": false,
   "files": [