@openpkg-ts/ui 0.1.6 → 0.2.0

package/dist/docskit/index.d.ts

@@ -408,4 +408,60 @@ declare function TooltipLink(props: {
 }): React.JSX.Element;
 import { AnnotationHandler as AnnotationHandler14 } from "codehike/code";
 declare const wordWrap2: AnnotationHandler14;
-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 };
+import { ReactNode as ReactNode2 } from "react";
+interface CodeTab {
+	/** Tab label */
+	label: string;
+	/** Tab content (code block) */
+	content: ReactNode2;
+	/** Raw code for copy button */
+	code: string;
+}
+interface CodeTabsProps {
+	/** Array of tabs */
+	tabs: CodeTab[];
+	/** Default selected tab index */
+	defaultIndex?: number;
+	/** Enable sticky positioning for the header */
+	sticky?: boolean;
+	/** Custom className */
+	className?: string;
+}
+/**
+* Tabbed code block wrapper with copy button per tab.
+* Uses docskit --dk-* CSS variables for consistent theming.
+*/
+declare function CodeTabs({ tabs, defaultIndex, sticky, className }: CodeTabsProps): React.ReactNode2;
+interface ImportSectionProps {
+	/** Import statement text */
+	importStatement: string;
+	/** Custom className */
+	className?: string;
+}
+/**
+* Displays a copyable import statement with one-click copy.
+* Monospace styling with copy button.
+*/
+declare function ImportSection({ importStatement, className }: ImportSectionProps): React.ReactNode;
+import * as React14 from "react";
+type TypeColor = "string" | "number" | "boolean" | "null" | "undefined" | "object" | "array" | "function" | "union" | "generic" | "default";
+/**
+* Type coloring for syntax display.
+* Follows Stripe-style: consistent colors for primitives vs complex types.
+*/
+declare const typeBadgeVariants: (props?: {
+	typeColor?: TypeColor | null;
+	className?: string;
+}) => string;
+interface TypeBadgeProps extends React14.HTMLAttributes<HTMLSpanElement> {
+	/** Type string to display */
+	type: string;
+	/** Override color detection */
+	typeColor?: TypeColor | null;
+}
+/**
+* Inline type display with syntax coloring.
+* Automatically detects type category and applies appropriate color.
+*/
+declare const TypeBadge: React14.ForwardRefExoticComponent<TypeBadgeProps & React14.RefAttributes<HTMLSpanElement>>;
+export { wordWrap2 as wordWrap, typeBadgeVariants, tooltip, toCodeGroup, theme, mark, link, lineNumbers2 as lineNumbers, hover, flagsToOptions, expandable, endpointBadgeVariants, diff, collapse, callout, addDocsKit, WithNotes, WithHover, TypeColor, TypeBadgeProps, TypeBadge, TooltipLink, TerminalSkeleton, Terminal, TabsTrigger, TabsList, TabsContent, Tabs, SingleCode, ResponseBlockProps, ResponseBlock, ParameterListProps, ParameterList, PackageInstall, MultiCode, LanguageSelectorProps, LanguageSelector, Language, InlineCodeSkeleton, ImportSectionProps, ImportSection, HttpMethod, HoverLink, EndpointHeaderProps, EndpointHeader, EndpointBadgeProps, EndpointBadge, DocsKitInlineCode, DocsKitCode, DiffStats, CopyButton, CodeTabsSkeleton, CodeTabsProps, CodeTabs, CodeTab, 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

@@ -2,7 +2,7 @@
 // src/docskit/api/api-code-panel.tsx
 import { highlight, Pre } from "codehike/code";
 import { Check, Copy, ExternalLink } from "lucide-react";
-import { useEffect as useEffect2, useState as useState3 } from "react";
+import { useEffect as useEffect2, useState as useState4 } from "react";
 
 // src/lib/utils.ts
 import { clsx } from "clsx";
@@ -11,6 +11,22 @@ function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
 
+// src/hooks/use-copy-to-clipboard.ts
+import { useCallback, useRef, useState } from "react";
+var COPY_FEEDBACK_MS = 1200;
+function useCopyToClipboard(timeout = COPY_FEEDBACK_MS) {
+  const [copied, setCopied] = useState(false);
+  const timerRef = useRef();
+  const copy = useCallback((text) => {
+    navigator.clipboard.writeText(text).then(() => {
+      setCopied(true);
+      clearTimeout(timerRef.current);
+      timerRef.current = setTimeout(() => setCopied(false), timeout);
+    });
+  }, [timeout]);
+  return [copied, copy];
+}
+
 // src/docskit/code.config.ts
 var theme = "github-from-css";
 function flagsToOptions(flags = "") {
@@ -294,7 +310,7 @@ var expandable = {
 import {
   InnerLine as InnerLine5
 } from "codehike/code";
-import { createContext, useContext, useState } from "react";
+import { createContext, useContext, useState as useState2 } from "react";
 import { jsx as jsx9 } from "react/jsx-runtime";
 
 var HoverContext = createContext({
@@ -303,7 +319,7 @@ var HoverContext = createContext({
   removeHoveredName: () => {}
 });
 function HoverProvider({ children }) {
-  const [hoveredNames, setHoveredNames] = useState([]);
+  const [hoveredNames, setHoveredNames] = useState2([]);
   const addHoveredName = (name) => {
     setHoveredNames((prev) => [...prev, name]);
   };
@@ -814,9 +830,9 @@ function APICodePanel({
   title,
   className
 }) {
-  const [selectedLang, setSelectedLang] = useState3(examples[0]?.languageId ?? languages[0]?.id);
-  const [copied, setCopied] = useState3(false);
-  const [highlighted, setHighlighted] = useState3(null);
+  const [selectedLang, setSelectedLang] = useState4(examples[0]?.languageId ?? languages[0]?.id);
+  const [copied, copy] = useCopyToClipboard();
+  const [highlighted, setHighlighted] = useState4(null);
   const currentExample = examples.find((e) => e.languageId === selectedLang);
   const code = currentExample?.code ?? "";
   const lang = currentExample?.highlightLang ?? currentExample?.languageId ?? "txt";
@@ -836,9 +852,7 @@ function APICodePanel({
     };
   }, [code, lang]);
   const handleCopy = () => {
-    navigator.clipboard.writeText(code);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 1200);
+    copy(code);
   };
   const handlers = getHandlers({ copyButton: false });
   return /* @__PURE__ */ jsxs10("div", {
@@ -1023,15 +1037,12 @@ EndpointBadge.displayName = "EndpointBadge";
 // src/docskit/api/endpoint-header.tsx
 import { Check as Check2, Copy as Copy2 } from "lucide-react";
 import * as React4 from "react";
-import { useState as useState4 } from "react";
 import { jsx as jsx24, jsxs as jsxs13 } from "react/jsx-runtime";
 
 var EndpointHeader = React4.forwardRef(({ className, method, path, copyable = true, ...props }, ref) => {
-  const [copied, setCopied] = useState4(false);
+  const [copied, copy] = useCopyToClipboard();
   const handleCopy = () => {
-    navigator.clipboard.writeText(path);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 1200);
+    copy(path);
   };
   return /* @__PURE__ */ jsxs13("div", {
     ref,
@@ -1072,15 +1083,10 @@ function NestedProperty({
   depth = 0
 }) {
   const [expanded, setExpanded] = useState5(false);
-  const [copied, setCopied] = useState5(false);
+  const [copied, copy] = useCopyToClipboard();
   const type = schema.typeString ?? schema.type ?? "unknown";
   const hasNested = schema.properties && Object.keys(schema.properties).length > 0;
   const _nestedCount = hasNested && schema.properties ? Object.keys(schema.properties).length : 0;
-  const handleCopy = () => {
-    navigator.clipboard.writeText(name);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 1200);
-  };
   return /* @__PURE__ */ jsxs14("div", {
     className: cn("border-t border-border first:border-t-0", depth > 0 && "ml-4"),
     children: [
@@ -1129,7 +1135,7 @@ function NestedProperty({
                     }),
                     /* @__PURE__ */ jsx25("button", {
                       type: "button",
-                      onClick: handleCopy,
+                      onClick: () => copy(name),
                       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__ */ jsx25(Check3, {
@@ -1171,14 +1177,9 @@ function APIParameterItem({
   className
 }) {
   const [expanded, setExpanded] = useState5(false);
-  const [copied, setCopied] = useState5(false);
+  const [copied, copy] = useCopyToClipboard();
   const hasNested = children?.properties && Object.keys(children.properties).length > 0;
   const _nestedCount = hasNested && children?.properties ? Object.keys(children.properties).length : 0;
-  const handleCopy = () => {
-    navigator.clipboard.writeText(name);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 1200);
-  };
   return /* @__PURE__ */ jsxs14("div", {
     className: cn("border-b border-border last:border-b-0", className),
     children: [
@@ -1225,7 +1226,7 @@ function APIParameterItem({
                     }),
                     /* @__PURE__ */ jsx25("button", {
                       type: "button",
-                      onClick: handleCopy,
+                      onClick: () => copy(name),
                       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__ */ jsx25(Check3, {
@@ -1305,16 +1306,13 @@ function ParameterList({
 // src/docskit/api/response-block.tsx
 import { Check as Check4, Copy as Copy4 } from "lucide-react";
 import * as React6 from "react";
-import { useState as useState7 } from "react";
 import { jsx as jsx27, jsxs as jsxs16, Fragment as Fragment4 } from "react/jsx-runtime";
 
 function ResponseBlock({ data, title, className }) {
-  const [copied, setCopied] = useState7(false);
+  const [copied, copy] = useCopyToClipboard();
   const jsonString = JSON.stringify(data, null, 2);
   const handleCopy = () => {
-    navigator.clipboard.writeText(jsonString);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 1200);
+    copy(jsonString);
   };
   return /* @__PURE__ */ jsxs16("div", {
     className: cn("group rounded-lg border border-border overflow-hidden bg-muted/30", className),
@@ -1496,7 +1494,6 @@ import { highlight as highlight2, Pre as Pre2 } from "codehike/code";
 
 // src/docskit/code.copy.tsx
 import { Check as Check5, Copy as Copy5 } from "lucide-react";
-import { useState as useState8 } from "react";
 import { jsx as jsx28 } from "react/jsx-runtime";
 
 function CopyButton({
@@ -1504,7 +1501,7 @@ function CopyButton({
   className,
   variant = "floating"
 }) {
-  const [copied, setCopied] = useState8(false);
+  const [copied, copy] = useCopyToClipboard();
   return /* @__PURE__ */ jsx28("button", {
     type: "button",
     className: cn("cursor-pointer transition-opacity duration-200", variant === "floating" && [
@@ -1512,11 +1509,7 @@ function CopyButton({
       "rounded border border-dk-border bg-dk-background",
       "opacity-0 group-hover:opacity-100"
     ], variant === "inline" && "rounded", className),
-    onClick: () => {
-      navigator.clipboard.writeText(text);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 1200);
-    },
+    onClick: () => copy(text),
     "aria-label": "Copy to clipboard",
     children: copied ? /* @__PURE__ */ jsx28(Check5, {
       size: 16,
@@ -1786,12 +1779,12 @@ import {
   Inline,
   Pre as Pre3
 } from "codehike/code";
-import { useEffect as useEffect3, useState as useState9 } from "react";
+import { useEffect as useEffect3, useState as useState7 } from "react";
 import { jsx as jsx33, jsxs as jsxs19 } from "react/jsx-runtime";
 
 function ClientDocsKitCode(props) {
   const { codeblock, handlers: extraHandlers, className: wrapperClassName } = props;
-  const [highlighted, setHighlighted] = useState9(null);
+  const [highlighted, setHighlighted] = useState7(null);
   const { title, flags } = extractFlags2(codeblock);
   const options = flagsToOptions(flags);
   useEffect3(() => {
@@ -1860,7 +1853,7 @@ function ClientDocsKitCode(props) {
 }
 function ClientTerminal(props) {
   const { codeblock, handlers: extraHandlers } = props;
-  const [highlighted, setHighlighted] = useState9(null);
+  const [highlighted, setHighlighted] = useState7(null);
   const { flags } = extractFlagsSimple(codeblock);
   const options = flagsToOptions(flags);
   useEffect3(() => {
@@ -1930,7 +1923,7 @@ function ClientTerminal(props) {
   });
 }
 function ClientInlineCode({ codeblock }) {
-  const [highlighted, setHighlighted] = useState9(null);
+  const [highlighted, setHighlighted] = useState7(null);
   useEffect3(() => {
     let cancelled = false;
     highlight3(codeblock, theme).then((result) => {
@@ -1965,7 +1958,7 @@ function extractFlagsSimple(codeblock) {
 }
 function ClientCode(props) {
   const { codeblocks, flags: groupFlags, storage } = props;
-  const [highlighted, setHighlighted] = useState9(null);
+  const [highlighted, setHighlighted] = useState7(null);
   const groupOptions = flagsToOptions(groupFlags?.startsWith("-") ? groupFlags.slice(1) : groupFlags);
   const _codeBlocksKey = codeblocks.map((b) => `${b.value}|${b.lang}|${b.meta}`).join("::");
   useEffect3(() => {
@@ -2109,7 +2102,7 @@ import {
   Pre as Pre4
 } from "codehike/code";
 import { ChevronDown as ChevronDown3, ChevronUp } from "lucide-react";
-import { useEffect as useEffect4, useState as useState10 } from "react";
+import { useEffect as useEffect4, useState as useState8 } from "react";
 import { jsx as jsx34, jsxs as jsxs20 } from "react/jsx-runtime";
 
 function StackedChevrons({ isOpen, className }) {
@@ -2135,8 +2128,8 @@ function ClientDiffCode(props) {
     className: wrapperClassName,
     defaultOpen = true
   } = props;
-  const [highlighted, setHighlighted] = useState10(null);
-  const [isOpen, setIsOpen] = useState10(defaultOpen);
+  const [highlighted, setHighlighted] = useState8(null);
+  const [isOpen, setIsOpen] = useState8(defaultOpen);
   const { title, flags } = extractFlags3(codeblock);
   const options = flagsToOptions(flags);
   const filename = filenameProp || title || "file";
@@ -2266,7 +2259,7 @@ async function DocsKitInlineCode({
   });
 }
 // src/docskit/code.package-install.tsx
-import { useState as useState11 } from "react";
+import { useState as useState9 } from "react";
 import { jsx as jsx36, jsxs as jsxs21 } from "react/jsx-runtime";
 
 var managerLabels = {
@@ -2319,7 +2312,7 @@ function PackageInstall({
   managers = ["npm", "bun", "pnpm", "yarn"],
   copyButton = true
 }) {
-  const [activeManager, setActiveManager] = useState11(managers[0]);
+  const [activeManager, setActiveManager] = useState9(managers[0]);
   const command = getInstallCommand(activeManager, pkg, { dev, global: isGlobal });
   return /* @__PURE__ */ jsxs21("div", {
     className: "group rounded overflow-hidden border border-dk-border flex flex-col my-4 not-prose",
@@ -2539,8 +2532,163 @@ function WithNotes({ children, ...rest }) {
     children
   });
 }
+// src/docskit/code.tabs-legacy.tsx
+import { Check as Check6, Copy as Copy6 } from "lucide-react";
+import { useState as useState10 } from "react";
+import { jsx as jsx40, jsxs as jsxs23 } from "react/jsx-runtime";
+
+function CodeTabs({
+  tabs,
+  defaultIndex = 0,
+  sticky = false,
+  className
+}) {
+  const [activeIndex, setActiveIndex] = useState10(defaultIndex);
+  const [copied, copy] = useCopyToClipboard();
+  const activeTab = tabs[activeIndex];
+  const handleCopy = () => {
+    if (!activeTab)
+      return;
+    copy(activeTab.code);
+  };
+  if (!tabs.length)
+    return null;
+  return /* @__PURE__ */ jsxs23("div", {
+    className: cn("group rounded-lg border border-dk-border bg-dk-background overflow-hidden", "selection:bg-dk-selection selection:text-current", className),
+    children: [
+      /* @__PURE__ */ jsxs23("div", {
+        className: cn("flex items-center border-b border-dk-border bg-dk-tabs-background", sticky && "sticky top-0 z-10"),
+        children: [
+          /* @__PURE__ */ jsx40("div", {
+            className: "flex-1 flex items-stretch",
+            children: tabs.map((tab, index) => /* @__PURE__ */ jsx40("button", {
+              type: "button",
+              onClick: () => setActiveIndex(index),
+              className: cn("px-4 py-2 text-sm font-mono transition-colors duration-200", "border-r border-dk-border last:border-r-0", index === activeIndex ? "text-dk-tab-active-foreground bg-dk-background/50" : "text-dk-tab-inactive-foreground hover:text-dk-tab-active-foreground"),
+              children: tab.label
+            }, tab.label))
+          }),
+          /* @__PURE__ */ jsx40("button", {
+            type: "button",
+            onClick: handleCopy,
+            className: cn("p-2 mx-2", "text-dk-tab-inactive-foreground hover:text-dk-tab-active-foreground", "opacity-0 group-hover:opacity-100 transition-opacity", "cursor-pointer"),
+            "aria-label": "Copy code",
+            children: copied ? /* @__PURE__ */ jsx40(Check6, {
+              size: 16
+            }) : /* @__PURE__ */ jsx40(Copy6, {
+              size: 16
+            })
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx40("div", {
+        className: "bg-dk-background",
+        children: activeTab?.content
+      })
+    ]
+  });
+}
+// src/docskit/import-section.tsx
+import { Check as Check7, Copy as Copy7 } from "lucide-react";
+import { jsx as jsx41, jsxs as jsxs24 } from "react/jsx-runtime";
+
+function ImportSection({ importStatement, className }) {
+  const [copied, copy] = useCopyToClipboard();
+  const handleCopy = () => {
+    copy(importStatement);
+  };
+  return /* @__PURE__ */ jsxs24("div", {
+    className: cn("group flex items-center justify-between gap-3", "rounded-lg border border-border bg-muted/30 px-4 py-3", className),
+    children: [
+      /* @__PURE__ */ jsx41("code", {
+        className: "font-mono text-sm text-foreground overflow-x-auto",
+        children: importStatement
+      }),
+      /* @__PURE__ */ jsx41("button", {
+        type: "button",
+        onClick: handleCopy,
+        className: cn("shrink-0 p-1.5 rounded", "text-muted-foreground hover:text-foreground", "opacity-0 group-hover:opacity-100 transition-opacity duration-200", "cursor-pointer"),
+        "aria-label": "Copy import statement",
+        children: copied ? /* @__PURE__ */ jsx41(Check7, {
+          size: 16
+        }) : /* @__PURE__ */ jsx41(Copy7, {
+          size: 16
+        })
+      })
+    ]
+  });
+}
+// src/docskit/type-badge.tsx
+import { cva as cva2 } from "class-variance-authority";
+import * as React9 from "react";
+import { jsx as jsx42 } from "react/jsx-runtime";
+var typeBadgeVariants = cva2("font-mono text-sm", {
+  variants: {
+    typeColor: {
+      string: "text-emerald-600 dark:text-emerald-400",
+      number: "text-blue-600 dark:text-blue-400",
+      boolean: "text-amber-600 dark:text-amber-400",
+      null: "text-gray-500 dark:text-gray-400",
+      undefined: "text-gray-500 dark:text-gray-400",
+      object: "text-purple-600 dark:text-purple-400",
+      array: "text-cyan-600 dark:text-cyan-400",
+      function: "text-fuchsia-600 dark:text-fuchsia-400",
+      union: "text-orange-600 dark:text-orange-400",
+      generic: "text-rose-600 dark:text-rose-400",
+      default: "text-muted-foreground"
+    }
+  },
+  defaultVariants: {
+    typeColor: "default"
+  }
+});
+function detectTypeColor(type) {
+  const normalized = type.toLowerCase().trim();
+  if (normalized === "string" || normalized.startsWith('"') || normalized.startsWith("'")) {
+    return "string";
+  }
+  if (normalized === "number" || /^\d+$/.test(normalized)) {
+    return "number";
+  }
+  if (normalized === "boolean" || normalized === "true" || normalized === "false") {
+    return "boolean";
+  }
+  if (normalized === "null") {
+    return "null";
+  }
+  if (normalized === "undefined" || normalized === "void") {
+    return "undefined";
+  }
+  if (normalized === "object" || normalized.startsWith("{")) {
+    return "object";
+  }
+  if (normalized.endsWith("[]") || normalized.startsWith("array")) {
+    return "array";
+  }
+  if (normalized.startsWith("(") || normalized.includes("=>") || normalized.startsWith("function")) {
+    return "function";
+  }
+  if (normalized.includes("|")) {
+    return "union";
+  }
+  if (normalized.includes("<") && normalized.includes(">")) {
+    return "generic";
+  }
+  return "default";
+}
+var TypeBadge = React9.forwardRef(({ className, type, typeColor, ...props }, ref) => {
+  const color2 = typeColor ?? detectTypeColor(type);
+  return /* @__PURE__ */ jsx42("span", {
+    ref,
+    className: cn(typeBadgeVariants({ typeColor: color2 }), className),
+    ...props,
+    children: type
+  });
+});
+TypeBadge.displayName = "TypeBadge";
 export {
   wordWrap,
+  typeBadgeVariants,
   tooltip,
   toCodeGroup,
   theme,
@@ -2557,6 +2705,7 @@ export {
   addDocsKit,
   WithNotes,
   WithHover,
+  TypeBadge,
   TooltipLink,
   TerminalSkeleton,
   Terminal,
@@ -2571,6 +2720,7 @@ export {
   MultiCode,
   LanguageSelector,
   InlineCodeSkeleton,
+  ImportSection,
   HoverLink,
   EndpointHeader,
   EndpointBadge,
@@ -2578,6 +2728,7 @@ export {
   DocsKitCode,
   CopyButton,
   CodeTabsSkeleton,
+  CodeTabs,
   CodeIcon,
   CodeGroup,
   CodeBlockSkeleton,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openpkg-ts/ui",
-  "version": "0.1.6",
+  "version": "0.2.0",
   "description": "UI primitives and components for OpenPkg documentation",
   "homepage": "https://github.com/ryanwaits/openpkg-ts#readme",
   "repository": {
@@ -11,13 +11,10 @@
   "type": "module",
   "sideEffects": false,
   "files": [
-    "dist"
+    "dist",
+    "src/styles"
   ],
   "exports": {
-    "./api": {
-      "types": "./dist/api/index.d.ts",
-      "import": "./dist/api/index.js"
-    },
     "./badge": {
       "types": "./dist/badge/index.d.ts",
       "import": "./dist/badge/index.js"
@@ -30,7 +27,8 @@
       "types": "./dist/lib/utils.d.ts",
       "import": "./dist/lib/utils.js"
     },
-    "./styles/tokens.css": "./src/styles/tokens.css"
+    "./styles/tokens.css": "./src/styles/tokens.css",
+    "./styles/docskit.css": "./src/styles/docskit.css"
   },
   "scripts": {
     "build": "bunup",

package/src/styles/docskit.css

@@ -0,0 +1,89 @@
+/**
+ * Docskit code block styling for Tailwind v4 consumers.
+ * Includes CodeHike theme variables, dk-* Tailwind color mappings,
+ * and selection utility.
+ *
+ * Usage: @import '@openpkg-ts/ui/styles/docskit.css';
+ */
+
+/* CodeHike github-from-css theme (dark) */
+:root {
+  --ch-0: dark;
+  --ch-1: #8b949e;
+  --ch-2: #79c0ff;
+  --ch-3: #ffa657;
+  --ch-4: #c9d1d9;
+  --ch-5: #d2a8ff;
+  --ch-6: #7ee787;
+  --ch-7: #ff7b72;
+  --ch-8: #a5d6ff;
+  --ch-9: #ffa198;
+  --ch-10: #f0f6fc;
+  --ch-11: #490202;
+  --ch-12: #04260f;
+  --ch-13: #5a1e02;
+  --ch-14: #161b22;
+  --ch-15: #8b949e;
+  --ch-16: #0d1117;
+  --ch-17: #6e76811a;
+  --ch-18: #ffffff0b;
+  --ch-19: #3794ff;
+  --ch-20: #264f78;
+  --ch-21: #1f6feb;
+  --ch-22: #010409;
+  --ch-23: #30363d;
+  --ch-24: #6e7681;
+  --ch-25: #6e768166;
+  --ch-26: #0d1117e6;
+}
+
+/* CodeHike github-from-css theme (light) */
+[data-theme="light"] {
+  --ch-0: light;
+  --ch-1: #6e7781;
+  --ch-2: #0550ae;
+  --ch-3: #953800;
+  --ch-4: #24292f;
+  --ch-5: #8250df;
+  --ch-6: #116329;
+  --ch-7: #cf222e;
+  --ch-8: #0a3069;
+  --ch-9: #82071e;
+  --ch-10: #f6f8fa;
+  --ch-11: #ffebe9;
+  --ch-12: #dafbe1;
+  --ch-13: #ffd8b5;
+  --ch-14: #eaeef2;
+  --ch-15: #57606a;
+  --ch-16: #ffffff;
+  --ch-17: #eaeef280;
+  --ch-18: #fdff0033;
+  --ch-19: #1a85ff;
+  --ch-20: #add6ff;
+  --ch-21: #0969da;
+  --ch-22: #f6f8fa;
+  --ch-23: #d0d7de;
+  --ch-24: #8c959f;
+  --ch-25: #afb8c133;
+  --ch-26: #ffffffe6;
+}
+
+/* dk-* Tailwind v4 color theme (maps to --ch-* vars) */
+@theme {
+  --color-dk-background: var(--ch-16);
+  --color-dk-border: var(--ch-23);
+  --color-dk-tabs-background: var(--ch-22);
+  --color-dk-tab-inactive-foreground: var(--ch-15);
+  --color-dk-tab-active-foreground: var(--ch-4);
+  --color-dk-selection: var(--ch-20);
+  --color-dk-line-number: var(--ch-24);
+  --color-dk-active-border: var(--ch-3);
+}
+
+/* Selection utility — Tailwind can't auto-generate this */
+@layer utilities {
+  .selection\:bg-dk-selection::selection,
+  .selection\:bg-dk-selection *::selection {
+    background-color: var(--ch-20);
+  }
+}

package/src/styles/index.ts

@@ -0,0 +1,2 @@
+// Export styles path for consumers
+export const tokensPath = '@openpkg-ts/ui/styles/tokens.css';

package/src/styles/tokens.css

@@ -0,0 +1,173 @@
+/**
+ * OpenPKG design tokens.
+ * Light by default, dark via .dark class, [data-theme="dark"], or prefers-color-scheme.
+ * Override any --openpkg-* variable to match your theme.
+ */
+
+:root {
+  /* Background colors — light default */
+  --openpkg-bg-root: #ffffff;
+  --openpkg-bg-primary: #fafafa;
+  --openpkg-bg-secondary: #f5f5f5;
+  --openpkg-bg-tertiary: #eeeeee;
+  --openpkg-bg-code: #f8f8fc;
+  --openpkg-bg-code-header: #f0f0f8;
+  --openpkg-bg-badge: #e5e5e5;
+  --openpkg-bg-chip: transparent;
+  --openpkg-bg-chip-active: transparent;
+  --openpkg-bg-collapsible: #f8f8f8;
+  --openpkg-bg-details: #fafafa;
+
+  /* Text colors */
+  --openpkg-text-primary: #1a1a1a;
+  --openpkg-text-secondary: #525252;
+  --openpkg-text-muted: #737373;
+  --openpkg-text-code: #1a1a1a;
+
+  /* Syntax highlighting — light */
+  --openpkg-syn-keyword: #8b5cf6;
+  --openpkg-syn-string: #059669;
+  --openpkg-syn-function: #dc2626;
+  --openpkg-syn-property: #7c3aed;
+  --openpkg-syn-variable: #1a1a1a;
+  --openpkg-syn-punctuation: #6b7280;
+  --openpkg-syn-number: #d97706;
+  --openpkg-syn-boolean: #be185d;
+  --openpkg-syn-comment: #9ca3af;
+
+  /* Accent colors */
+  --openpkg-accent-green: #16a34a;
+  --openpkg-accent-blue: #2563eb;
+  --openpkg-accent-purple: #7c3aed;
+  --openpkg-accent-link: #2563eb;
+
+  /* Border colors */
+  --openpkg-border-subtle: #e5e5e5;
+  --openpkg-border-medium: #d4d4d4;
+  --openpkg-border-chip: #d4d4d4;
+  --openpkg-border-chip-active: #a3a3a3;
+
+  /* Typography */
+  --openpkg-font-mono: "JetBrains Mono", "SF Mono", Consolas, monospace;
+  --openpkg-font-sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
+
+  /* Border radius */
+  --openpkg-radius-sm: 4px;
+  --openpkg-radius-md: 6px;
+  --openpkg-radius-lg: 8px;
+  --openpkg-radius-full: 9999px;
+
+  /* Animations */
+  --openpkg-transition-fast: 150ms ease;
+  --openpkg-transition-normal: 200ms ease;
+  --openpkg-transition-slow: 300ms ease;
+}
+
+/* Dark mode — explicit class or data attribute */
+.dark,
+[data-theme="dark"] {
+  --openpkg-bg-root: #0c0c0c;
+  --openpkg-bg-primary: #0f0f0f;
+  --openpkg-bg-secondary: #171717;
+  --openpkg-bg-tertiary: #1c1c1c;
+  --openpkg-bg-code: #0f0f18;
+  --openpkg-bg-code-header: #141420;
+  --openpkg-bg-badge: #262626;
+  --openpkg-bg-collapsible: #161616;
+  --openpkg-bg-details: #141414;
+  --openpkg-text-primary: #ededed;
+  --openpkg-text-secondary: #a0a0a0;
+  --openpkg-text-muted: #666666;
+  --openpkg-text-code: #e4e4e7;
+  --openpkg-accent-green: #3ecf8e;
+  --openpkg-accent-blue: #6cb6ff;
+  --openpkg-accent-purple: #c4a7e7;
+  --openpkg-accent-link: #6cb6ff;
+  --openpkg-border-subtle: #262626;
+  --openpkg-border-medium: #333333;
+  --openpkg-border-chip: #333333;
+  --openpkg-border-chip-active: #666666;
+  --openpkg-syn-keyword: #c4a7e7;
+  --openpkg-syn-string: #9ccfd8;
+  --openpkg-syn-function: #ebbcba;
+  --openpkg-syn-property: #c4a7e7;
+  --openpkg-syn-variable: #e4e4e7;
+  --openpkg-syn-punctuation: #6e6a86;
+  --openpkg-syn-number: #f6c177;
+  --openpkg-syn-boolean: #eb6f92;
+  --openpkg-syn-comment: #6e6a86;
+}
+
+/* Dark mode — system preference */
+@media (prefers-color-scheme: dark) {
+  :root:not(.light):not([data-theme="light"]) {
+    --openpkg-bg-root: #0c0c0c;
+    --openpkg-bg-primary: #0f0f0f;
+    --openpkg-bg-secondary: #171717;
+    --openpkg-bg-tertiary: #1c1c1c;
+    --openpkg-bg-code: #0f0f18;
+    --openpkg-bg-code-header: #141420;
+    --openpkg-bg-badge: #262626;
+    --openpkg-bg-collapsible: #161616;
+    --openpkg-bg-details: #141414;
+    --openpkg-text-primary: #ededed;
+    --openpkg-text-secondary: #a0a0a0;
+    --openpkg-text-muted: #666666;
+    --openpkg-text-code: #e4e4e7;
+    --openpkg-accent-green: #3ecf8e;
+    --openpkg-accent-blue: #6cb6ff;
+    --openpkg-accent-purple: #c4a7e7;
+    --openpkg-accent-link: #6cb6ff;
+    --openpkg-border-subtle: #262626;
+    --openpkg-border-medium: #333333;
+    --openpkg-border-chip: #333333;
+    --openpkg-border-chip-active: #666666;
+    --openpkg-syn-keyword: #c4a7e7;
+    --openpkg-syn-string: #9ccfd8;
+    --openpkg-syn-function: #ebbcba;
+    --openpkg-syn-property: #c4a7e7;
+    --openpkg-syn-variable: #e4e4e7;
+    --openpkg-syn-punctuation: #6e6a86;
+    --openpkg-syn-number: #f6c177;
+    --openpkg-syn-boolean: #eb6f92;
+    --openpkg-syn-comment: #6e6a86;
+  }
+}
+
+/* Animation keyframes */
+@keyframes openpkg-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes openpkg-slide-down {
+  from { opacity: 0; transform: translateY(-4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes openpkg-slide-up {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes openpkg-expand {
+  from { opacity: 0; height: 0; }
+  to { opacity: 1; height: var(--radix-collapsible-content-height); }
+}
+
+@keyframes openpkg-collapse {
+  from { opacity: 1; height: var(--radix-collapsible-content-height); }
+  to { opacity: 0; height: 0; }
+}
+
+.openpkg-animate-fade-in {
+  animation: openpkg-fade-in var(--openpkg-transition-normal) ease-out;
+}
+
+.openpkg-animate-slide-down {
+  animation: openpkg-slide-down var(--openpkg-transition-normal) ease-out;
+}
+
+.openpkg-animate-slide-up {
+  animation: openpkg-slide-up var(--openpkg-transition-normal) ease-out;
+}

package/dist/api/index.d.ts

@@ -1,114 +0,0 @@
-import { ReactNode as ReactNode2 } from "react";
-interface CodeTab {
-	/** Tab label */
-	label: string;
-	/** Tab content (code block) */
-	content: ReactNode2;
-	/** Raw code for copy button */
-	code: string;
-}
-interface CodeTabsProps {
-	/** Array of tabs */
-	tabs: CodeTab[];
-	/** Default selected tab index */
-	defaultIndex?: number;
-	/** Enable sticky positioning for the header */
-	sticky?: boolean;
-	/** Custom className */
-	className?: string;
-}
-/**
-* Tabbed code block wrapper with copy button per tab.
-* Uses docskit --dk-* CSS variables for consistent theming.
-*/
-declare function CodeTabs({ tabs, defaultIndex, sticky, className }: CodeTabsProps): React.ReactNode2;
-import * as React2 from "react";
-type ExportKind = "function" | "type" | "variable" | "class" | "interface" | "enum";
-/**
-* Kind badge variants for export cards.
-*/
-declare const kindBadgeVariants: (props?: {
-	kind?: ExportKind | null;
-	className?: string;
-}) => string;
-interface ExportCardProps extends React2.AnchorHTMLAttributes<HTMLAnchorElement> {
-	/** Export name */
-	name: string;
-	/** Description snippet */
-	description?: string;
-	/** Link to detail page */
-	href: string;
-	/** Export kind */
-	kind?: ExportKind | null;
-	/** Custom link component (for Next.js Link) */
-	as?: React2.ElementType;
-}
-/**
-* Card component for displaying exports in an index grid.
-* Features function name styling, description, kind badge, and hover effects.
-*/
-declare const ExportCard: React2.ForwardRefExoticComponent<ExportCardProps & React2.RefAttributes<HTMLAnchorElement>>;
-interface ImportSectionProps {
-	/** Import statement text */
-	importStatement: string;
-	/** Custom className */
-	className?: string;
-}
-/**
-* Displays a copyable import statement with one-click copy.
-* Monospace styling with copy button.
-*/
-declare function ImportSection({ importStatement, className }: ImportSectionProps): React.ReactNode;
-interface ParameterSchema {
-	/** Type name (e.g., "string", "number", "object") */
-	type?: string;
-	/** Formatted type string for display */
-	typeString?: string;
-	/** Description of the parameter/property */
-	description?: string;
-	/** Nested properties for object types */
-	properties?: Record<string, ParameterSchema>;
-	/** Required property names */
-	required?: string[];
-}
-interface ParameterItemProps {
-	/** Parameter name */
-	name: string;
-	/** Parameter schema */
-	schema: ParameterSchema;
-	/** Whether this parameter is required */
-	required?: boolean;
-	/** Description (overrides schema.description) */
-	description?: string;
-	/** Nesting depth for indentation */
-	depth?: number;
-	/** Custom className */
-	className?: string;
-}
-/**
-* Single parameter with expand capability for nested objects.
-* Features expandable nested params, type annotations, and required/optional badges.
-*/
-declare function ParameterItem({ name, schema, required: isRequired, description, depth, className }: ParameterItemProps): React.ReactNode;
-import * as React3 from "react";
-type TypeColor = "string" | "number" | "boolean" | "null" | "undefined" | "object" | "array" | "function" | "union" | "generic" | "default";
-/**
-* Type coloring for syntax display.
-* Follows Stripe-style: consistent colors for primitives vs complex types.
-*/
-declare const typeBadgeVariants: (props?: {
-	typeColor?: TypeColor | null;
-	className?: string;
-}) => string;
-interface TypeBadgeProps extends React3.HTMLAttributes<HTMLSpanElement> {
-	/** Type string to display */
-	type: string;
-	/** Override color detection */
-	typeColor?: TypeColor | null;
-}
-/**
-* Inline type display with syntax coloring.
-* Automatically detects type category and applies appropriate color.
-*/
-declare const TypeBadge: React3.ForwardRefExoticComponent<TypeBadgeProps & React3.RefAttributes<HTMLSpanElement>>;
-export { typeBadgeVariants, kindBadgeVariants, TypeBadgeProps, TypeBadge, ParameterSchema, ParameterItemProps, ParameterItem, ImportSectionProps, ImportSection, ExportKind, ExportCardProps, ExportCard, CodeTabsProps, CodeTabs, CodeTab };

package/dist/api/index.js

@@ -1,435 +0,0 @@
-"use client";
-// src/api/CodeTabs.tsx
-import { Check, Copy } from "lucide-react";
-import { useState } from "react";
-
-// src/lib/utils.ts
-import { clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-
-// src/api/CodeTabs.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-
-function CodeTabs({
-  tabs,
-  defaultIndex = 0,
-  sticky = false,
-  className
-}) {
-  const [activeIndex, setActiveIndex] = useState(defaultIndex);
-  const [copied, setCopied] = useState(false);
-  const activeTab = tabs[activeIndex];
-  const handleCopy = () => {
-    if (!activeTab)
-      return;
-    navigator.clipboard.writeText(activeTab.code);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 1200);
-  };
-  if (!tabs.length)
-    return null;
-  return /* @__PURE__ */ jsxs("div", {
-    className: cn("group rounded-lg border border-dk-border bg-dk-background overflow-hidden", "selection:bg-dk-selection selection:text-current", className),
-    children: [
-      /* @__PURE__ */ jsxs("div", {
-        className: cn("flex items-center border-b border-dk-border bg-dk-tabs-background", sticky && "sticky top-0 z-10"),
-        children: [
-          /* @__PURE__ */ jsx("div", {
-            className: "flex-1 flex items-stretch",
-            children: tabs.map((tab, index) => /* @__PURE__ */ jsx("button", {
-              type: "button",
-              onClick: () => setActiveIndex(index),
-              className: cn("px-4 py-2 text-sm font-mono transition-colors duration-200", "border-r border-dk-border last:border-r-0", index === activeIndex ? "text-dk-tab-active-foreground bg-dk-background/50" : "text-dk-tab-inactive-foreground hover:text-dk-tab-active-foreground"),
-              children: tab.label
-            }, tab.label))
-          }),
-          /* @__PURE__ */ jsx("button", {
-            type: "button",
-            onClick: handleCopy,
-            className: cn("p-2 mx-2", "text-dk-tab-inactive-foreground hover:text-dk-tab-active-foreground", "opacity-0 group-hover:opacity-100 transition-opacity", "cursor-pointer"),
-            "aria-label": "Copy code",
-            children: copied ? /* @__PURE__ */ jsx(Check, {
-              size: 16
-            }) : /* @__PURE__ */ jsx(Copy, {
-              size: 16
-            })
-          })
-        ]
-      }),
-      /* @__PURE__ */ jsx("div", {
-        className: "bg-dk-background",
-        children: activeTab?.content
-      })
-    ]
-  });
-}
-// src/api/ExportCard.tsx
-import { cva } from "class-variance-authority";
-import * as React from "react";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-
-var kindBadgeVariants = cva("inline-flex items-center justify-center font-mono font-medium rounded shrink-0 h-5 px-1.5 text-xs", {
-  variants: {
-    kind: {
-      function: "bg-fuchsia-500/15 text-fuchsia-600 dark:text-fuchsia-400",
-      class: "bg-amber-500/15 text-amber-600 dark:text-amber-400",
-      interface: "bg-cyan-500/15 text-cyan-600 dark:text-cyan-400",
-      type: "bg-purple-500/15 text-purple-600 dark:text-purple-400",
-      enum: "bg-emerald-500/15 text-emerald-600 dark:text-emerald-400",
-      variable: "bg-blue-500/15 text-blue-600 dark:text-blue-400"
-    }
-  },
-  defaultVariants: {
-    kind: "function"
-  }
-});
-var kindLabels = {
-  function: "fn",
-  class: "cls",
-  interface: "int",
-  type: "type",
-  enum: "enum",
-  variable: "var"
-};
-var ExportCard = React.forwardRef(({ name, description, href, kind = "function", as: Component = "a", className, ...props }, ref) => {
-  const isFunction = kind === "function";
-  return /* @__PURE__ */ jsxs2(Component, {
-    ref,
-    href,
-    className: cn("group block rounded-lg border border-border bg-card/50 p-4", "transition-all duration-200", "hover:border-border/80 hover:bg-card hover:shadow-md", "hover:-translate-y-0.5", className),
-    ...props,
-    children: [
-      /* @__PURE__ */ jsxs2("div", {
-        className: "flex items-center gap-2 mb-2",
-        children: [
-          /* @__PURE__ */ jsx2("span", {
-            className: kindBadgeVariants({ kind }),
-            children: kindLabels[kind]
-          }),
-          /* @__PURE__ */ jsx2("span", {
-            className: "font-mono text-base font-medium text-foreground group-hover:text-primary transition-colors",
-            children: name
-          }),
-          isFunction && /* @__PURE__ */ jsx2("span", {
-            className: "font-mono text-base text-muted-foreground",
-            children: "()"
-          })
-        ]
-      }),
-      description && /* @__PURE__ */ jsx2("p", {
-        className: "text-sm text-muted-foreground line-clamp-2 leading-relaxed",
-        children: description
-      })
-    ]
-  });
-});
-ExportCard.displayName = "ExportCard";
-// src/api/ImportSection.tsx
-import { Check as Check2, Copy as Copy2 } from "lucide-react";
-import { useState as useState2 } from "react";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-
-function ImportSection({ importStatement, className }) {
-  const [copied, setCopied] = useState2(false);
-  const handleCopy = () => {
-    navigator.clipboard.writeText(importStatement);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 1200);
-  };
-  return /* @__PURE__ */ jsxs3("div", {
-    className: cn("group flex items-center justify-between gap-3", "rounded-lg border border-border bg-muted/30 px-4 py-3", className),
-    children: [
-      /* @__PURE__ */ jsx3("code", {
-        className: "font-mono text-sm text-foreground overflow-x-auto",
-        children: importStatement
-      }),
-      /* @__PURE__ */ jsx3("button", {
-        type: "button",
-        onClick: handleCopy,
-        className: cn("shrink-0 p-1.5 rounded", "text-muted-foreground hover:text-foreground", "opacity-0 group-hover:opacity-100 transition-opacity duration-200", "cursor-pointer"),
-        "aria-label": "Copy import statement",
-        children: copied ? /* @__PURE__ */ jsx3(Check2, {
-          size: 16
-        }) : /* @__PURE__ */ jsx3(Copy2, {
-          size: 16
-        })
-      })
-    ]
-  });
-}
-// src/api/ParameterItem.tsx
-import { ChevronRight } from "lucide-react";
-import { useState as useState3 } from "react";
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-
-function getNestedProperties(schema) {
-  if (!schema || typeof schema !== "object")
-    return null;
-  if (schema.type === "object" && schema.properties) {
-    return schema.properties;
-  }
-  return null;
-}
-function getRequiredFields(schema) {
-  return schema.required ?? [];
-}
-function countProperties(schema) {
-  const props = getNestedProperties(schema);
-  return props ? Object.keys(props).length : 0;
-}
-function getTypeDisplay(schema) {
-  if (schema.typeString)
-    return schema.typeString;
-  return schema.type ?? "unknown";
-}
-function NestedPropertyItem({
-  name,
-  schema,
-  required = false,
-  depth = 0
-}) {
-  const [expanded, setExpanded] = useState3(false);
-  const type = getTypeDisplay(schema);
-  const nestedProps = getNestedProperties(schema);
-  const nestedCount = countProperties(schema);
-  const hasNested = nestedCount > 0;
-  return /* @__PURE__ */ jsxs4("div", {
-    className: cn("border-t border-border first:border-t-0", depth > 0 && "ml-4"),
-    children: [
-      /* @__PURE__ */ jsx4("div", {
-        className: "py-3",
-        children: /* @__PURE__ */ jsxs4("div", {
-          className: "flex items-start gap-2",
-          children: [
-            hasNested && /* @__PURE__ */ jsx4("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__ */ jsx4(ChevronRight, {
-                size: 14,
-                className: cn("transition-transform duration-200", expanded && "rotate-90")
-              })
-            }),
-            !hasNested && /* @__PURE__ */ jsx4("div", {
-              className: "w-5"
-            }),
-            /* @__PURE__ */ jsxs4("div", {
-              className: "flex-1 min-w-0",
-              children: [
-                /* @__PURE__ */ jsxs4("div", {
-                  className: "flex items-baseline gap-2 flex-wrap",
-                  children: [
-                    /* @__PURE__ */ jsxs4("span", {
-                      className: "font-mono text-sm text-foreground",
-                      children: [
-                        name,
-                        !required && /* @__PURE__ */ jsx4("span", {
-                          className: "text-muted-foreground",
-                          children: "?"
-                        })
-                      ]
-                    }),
-                    /* @__PURE__ */ jsx4("span", {
-                      className: "font-mono text-sm text-muted-foreground",
-                      children: hasNested ? "object" : type
-                    }),
-                    hasNested && /* @__PURE__ */ jsxs4("button", {
-                      type: "button",
-                      onClick: () => setExpanded(!expanded),
-                      className: "text-xs text-primary hover:underline cursor-pointer",
-                      children: [
-                        nestedCount,
-                        " ",
-                        nestedCount === 1 ? "property" : "properties"
-                      ]
-                    })
-                  ]
-                }),
-                schema.description && /* @__PURE__ */ jsx4("p", {
-                  className: "text-sm text-muted-foreground mt-1",
-                  children: schema.description
-                })
-              ]
-            })
-          ]
-        })
-      }),
-      hasNested && expanded && nestedProps && /* @__PURE__ */ jsx4("div", {
-        className: "border-l border-border ml-2",
-        children: Object.entries(nestedProps).map(([propName, propSchema]) => /* @__PURE__ */ jsx4(NestedPropertyItem, {
-          name: propName,
-          schema: propSchema,
-          required: getRequiredFields(schema).includes(propName),
-          depth: depth + 1
-        }, propName))
-      })
-    ]
-  });
-}
-function ParameterItem({
-  name,
-  schema,
-  required: isRequired = true,
-  description,
-  depth = 0,
-  className
-}) {
-  const [expanded, setExpanded] = useState3(false);
-  const type = getTypeDisplay(schema);
-  const nestedProps = getNestedProperties(schema);
-  const nestedCount = countProperties(schema);
-  const hasNested = nestedCount > 0;
-  const displayDescription = description ?? schema.description;
-  return /* @__PURE__ */ jsxs4("div", {
-    className: cn("border-b border-border last:border-b-0", className),
-    children: [
-      /* @__PURE__ */ jsx4("div", {
-        className: "py-3",
-        children: /* @__PURE__ */ jsxs4("div", {
-          className: "flex items-start gap-2",
-          children: [
-            hasNested && /* @__PURE__ */ jsx4("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__ */ jsx4(ChevronRight, {
-                size: 14,
-                className: cn("transition-transform duration-200", expanded && "rotate-90")
-              })
-            }),
-            !hasNested && /* @__PURE__ */ jsx4("div", {
-              className: "w-5"
-            }),
-            /* @__PURE__ */ jsxs4("div", {
-              className: "flex-1 min-w-0",
-              children: [
-                /* @__PURE__ */ jsxs4("div", {
-                  className: "flex items-baseline gap-2 flex-wrap",
-                  children: [
-                    /* @__PURE__ */ jsx4("span", {
-                      className: "font-mono text-sm font-medium text-foreground",
-                      children: name
-                    }),
-                    isRequired && /* @__PURE__ */ jsx4("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__ */ jsx4("span", {
-                      className: "font-mono text-sm text-muted-foreground",
-                      children: hasNested ? "object" : type
-                    }),
-                    hasNested && /* @__PURE__ */ jsxs4("button", {
-                      type: "button",
-                      onClick: () => setExpanded(!expanded),
-                      className: "text-xs text-primary hover:underline cursor-pointer",
-                      children: [
-                        nestedCount,
-                        " ",
-                        nestedCount === 1 ? "property" : "properties"
-                      ]
-                    })
-                  ]
-                }),
-                displayDescription && /* @__PURE__ */ jsx4("p", {
-                  className: "text-sm text-muted-foreground mt-1",
-                  children: displayDescription
-                })
-              ]
-            })
-          ]
-        })
-      }),
-      hasNested && expanded && nestedProps && /* @__PURE__ */ jsx4("div", {
-        className: "border-l border-border ml-2 mb-3",
-        children: Object.entries(nestedProps).map(([propName, propSchema]) => /* @__PURE__ */ jsx4(NestedPropertyItem, {
-          name: propName,
-          schema: propSchema,
-          required: getRequiredFields(schema).includes(propName),
-          depth: depth + 1
-        }, propName))
-      })
-    ]
-  });
-}
-// src/api/TypeBadge.tsx
-import { cva as cva2 } from "class-variance-authority";
-import * as React2 from "react";
-import { jsx as jsx5 } from "react/jsx-runtime";
-var typeBadgeVariants = cva2("font-mono text-sm", {
-  variants: {
-    typeColor: {
-      string: "text-emerald-600 dark:text-emerald-400",
-      number: "text-blue-600 dark:text-blue-400",
-      boolean: "text-amber-600 dark:text-amber-400",
-      null: "text-gray-500 dark:text-gray-400",
-      undefined: "text-gray-500 dark:text-gray-400",
-      object: "text-purple-600 dark:text-purple-400",
-      array: "text-cyan-600 dark:text-cyan-400",
-      function: "text-fuchsia-600 dark:text-fuchsia-400",
-      union: "text-orange-600 dark:text-orange-400",
-      generic: "text-rose-600 dark:text-rose-400",
-      default: "text-muted-foreground"
-    }
-  },
-  defaultVariants: {
-    typeColor: "default"
-  }
-});
-function detectTypeColor(type) {
-  const normalized = type.toLowerCase().trim();
-  if (normalized === "string" || normalized.startsWith('"') || normalized.startsWith("'")) {
-    return "string";
-  }
-  if (normalized === "number" || /^\d+$/.test(normalized)) {
-    return "number";
-  }
-  if (normalized === "boolean" || normalized === "true" || normalized === "false") {
-    return "boolean";
-  }
-  if (normalized === "null") {
-    return "null";
-  }
-  if (normalized === "undefined" || normalized === "void") {
-    return "undefined";
-  }
-  if (normalized === "object" || normalized.startsWith("{")) {
-    return "object";
-  }
-  if (normalized.endsWith("[]") || normalized.startsWith("array")) {
-    return "array";
-  }
-  if (normalized.startsWith("(") || normalized.includes("=>") || normalized.startsWith("function")) {
-    return "function";
-  }
-  if (normalized.includes("|")) {
-    return "union";
-  }
-  if (normalized.includes("<") && normalized.includes(">")) {
-    return "generic";
-  }
-  return "default";
-}
-var TypeBadge = React2.forwardRef(({ className, type, typeColor, ...props }, ref) => {
-  const color = typeColor ?? detectTypeColor(type);
-  return /* @__PURE__ */ jsx5("span", {
-    ref,
-    className: cn(typeBadgeVariants({ typeColor: color }), className),
-    ...props,
-    children: type
-  });
-});
-TypeBadge.displayName = "TypeBadge";
-export {
-  typeBadgeVariants,
-  kindBadgeVariants,
-  TypeBadge,
-  ParameterItem,
-  ImportSection,
-  ExportCard,
-  CodeTabs
-};