@doccov/ui 0.2.1

package/dist/components/api/index.d.ts

@@ -0,0 +1,109 @@
+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 { VariantProps } from "class-variance-authority";
+import * as React2 from "react";
+/**
+* Type coloring for syntax display.
+* Follows Stripe-style: consistent colors for primitives vs complex types.
+*/
+declare const typeBadgeVariants: unknown;
+interface TypeBadgeProps extends React2.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof typeBadgeVariants> {
+	/** Type string to display */
+	type: string;
+	/** Override color detection */
+	typeColor?: VariantProps<typeof typeBadgeVariants>["typeColor"];
+}
+/**
+* Inline type display with syntax coloring.
+* Automatically detects type category and applies appropriate color.
+*/
+declare const TypeBadge: unknown;
+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 { 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 { VariantProps as VariantProps2 } from "class-variance-authority";
+import * as React3 from "react";
+type ExportKind = "function" | "type" | "variable" | "class" | "interface" | "enum";
+/**
+* Kind badge variants for export cards.
+*/
+declare const kindBadgeVariants: unknown;
+interface ExportCardProps extends React3.AnchorHTMLAttributes<HTMLAnchorElement>, VariantProps2<typeof kindBadgeVariants> {
+	/** Export name */
+	name: string;
+	/** Description snippet */
+	description?: string;
+	/** Link to detail page */
+	href: string;
+	/** Export kind */
+	kind?: ExportKind;
+	/** Custom link component (for Next.js Link) */
+	as?: React3.ElementType;
+}
+/**
+* Card component for displaying exports in an index grid.
+* Features function name styling, description, kind badge, and hover effects.
+*/
+declare const ExportCard: unknown;
+export { typeBadgeVariants, kindBadgeVariants, TypeBadgeProps, TypeBadge, ParameterSchema, ParameterItemProps, ParameterItem, ImportSectionProps, ImportSection, ExportKind, ExportCardProps, ExportCard, CodeTabsProps, CodeTabs, CodeTab };

package/dist/components/api/index.js

@@ -0,0 +1,430 @@
+"use client";
+import {
+  cn
+} from "../../lib/utils.js";
+
+// src/components/api/ParameterItem.tsx
+import { ChevronRight } from "lucide-react";
+import { useState } from "react";
+import { jsx, jsxs } 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] = useState(false);
+  const type = getTypeDisplay(schema);
+  const nestedProps = getNestedProperties(schema);
+  const nestedCount = countProperties(schema);
+  const hasNested = nestedCount > 0;
+  return /* @__PURE__ */ jsxs("div", {
+    className: cn("border-t border-border first:border-t-0", depth > 0 && "ml-4"),
+    children: [
+      /* @__PURE__ */ jsx("div", {
+        className: "py-3",
+        children: /* @__PURE__ */ jsxs("div", {
+          className: "flex items-start gap-2",
+          children: [
+            hasNested && /* @__PURE__ */ jsx("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__ */ jsx(ChevronRight, {
+                size: 14,
+                className: cn("transition-transform duration-200", expanded && "rotate-90")
+              })
+            }),
+            !hasNested && /* @__PURE__ */ jsx("div", {
+              className: "w-5"
+            }),
+            /* @__PURE__ */ jsxs("div", {
+              className: "flex-1 min-w-0",
+              children: [
+                /* @__PURE__ */ jsxs("div", {
+                  className: "flex items-baseline gap-2 flex-wrap",
+                  children: [
+                    /* @__PURE__ */ jsxs("span", {
+                      className: "font-mono text-sm text-foreground",
+                      children: [
+                        name,
+                        !required && /* @__PURE__ */ jsx("span", {
+                          className: "text-muted-foreground",
+                          children: "?"
+                        })
+                      ]
+                    }),
+                    /* @__PURE__ */ jsx("span", {
+                      className: "font-mono text-sm text-muted-foreground",
+                      children: hasNested ? "object" : type
+                    }),
+                    hasNested && /* @__PURE__ */ jsxs("button", {
+                      type: "button",
+                      onClick: () => setExpanded(!expanded),
+                      className: "text-xs text-primary hover:underline cursor-pointer",
+                      children: [
+                        nestedCount,
+                        " ",
+                        nestedCount === 1 ? "property" : "properties"
+                      ]
+                    })
+                  ]
+                }),
+                schema.description && /* @__PURE__ */ jsx("p", {
+                  className: "text-sm text-muted-foreground mt-1",
+                  children: schema.description
+                })
+              ]
+            })
+          ]
+        })
+      }),
+      hasNested && expanded && nestedProps && /* @__PURE__ */ jsx("div", {
+        className: "border-l border-border ml-2",
+        children: Object.entries(nestedProps).map(([propName, propSchema]) => /* @__PURE__ */ jsx(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] = useState(false);
+  const type = getTypeDisplay(schema);
+  const nestedProps = getNestedProperties(schema);
+  const nestedCount = countProperties(schema);
+  const hasNested = nestedCount > 0;
+  const displayDescription = description ?? schema.description;
+  return /* @__PURE__ */ jsxs("div", {
+    className: cn("border-b border-border last:border-b-0", className),
+    children: [
+      /* @__PURE__ */ jsx("div", {
+        className: "py-3",
+        children: /* @__PURE__ */ jsxs("div", {
+          className: "flex items-start gap-2",
+          children: [
+            hasNested && /* @__PURE__ */ jsx("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__ */ jsx(ChevronRight, {
+                size: 14,
+                className: cn("transition-transform duration-200", expanded && "rotate-90")
+              })
+            }),
+            !hasNested && /* @__PURE__ */ jsx("div", {
+              className: "w-5"
+            }),
+            /* @__PURE__ */ jsxs("div", {
+              className: "flex-1 min-w-0",
+              children: [
+                /* @__PURE__ */ jsxs("div", {
+                  className: "flex items-baseline gap-2 flex-wrap",
+                  children: [
+                    /* @__PURE__ */ jsx("span", {
+                      className: "font-mono text-sm font-medium text-foreground",
+                      children: name
+                    }),
+                    isRequired && /* @__PURE__ */ jsx("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__ */ jsx("span", {
+                      className: "font-mono text-sm text-muted-foreground",
+                      children: hasNested ? "object" : type
+                    }),
+                    hasNested && /* @__PURE__ */ jsxs("button", {
+                      type: "button",
+                      onClick: () => setExpanded(!expanded),
+                      className: "text-xs text-primary hover:underline cursor-pointer",
+                      children: [
+                        nestedCount,
+                        " ",
+                        nestedCount === 1 ? "property" : "properties"
+                      ]
+                    })
+                  ]
+                }),
+                displayDescription && /* @__PURE__ */ jsx("p", {
+                  className: "text-sm text-muted-foreground mt-1",
+                  children: displayDescription
+                })
+              ]
+            })
+          ]
+        })
+      }),
+      hasNested && expanded && nestedProps && /* @__PURE__ */ jsx("div", {
+        className: "border-l border-border ml-2 mb-3",
+        children: Object.entries(nestedProps).map(([propName, propSchema]) => /* @__PURE__ */ jsx(NestedPropertyItem, {
+          name: propName,
+          schema: propSchema,
+          required: getRequiredFields(schema).includes(propName),
+          depth: depth + 1
+        }, propName))
+      })
+    ]
+  });
+}
+// src/components/api/TypeBadge.tsx
+import { cva } from "class-variance-authority";
+import * as React from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var typeBadgeVariants = cva("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 = React.forwardRef(({ className, type, typeColor, ...props }, ref) => {
+  const color = typeColor ?? detectTypeColor(type);
+  return /* @__PURE__ */ jsx2("span", {
+    ref,
+    className: cn(typeBadgeVariants({ typeColor: color }), className),
+    ...props,
+    children: type
+  });
+});
+TypeBadge.displayName = "TypeBadge";
+// src/components/api/ImportSection.tsx
+import { Check, Copy } from "lucide-react";
+import { useState as useState2 } from "react";
+import { jsx as jsx3, jsxs as jsxs2 } 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__ */ jsxs2("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(Check, {
+          size: 16
+        }) : /* @__PURE__ */ jsx3(Copy, {
+          size: 16
+        })
+      })
+    ]
+  });
+}
+// src/components/api/CodeTabs.tsx
+import { Check as Check2, Copy as Copy2 } from "lucide-react";
+import { useState as useState3 } from "react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+
+function CodeTabs({
+  tabs,
+  defaultIndex = 0,
+  sticky = false,
+  className
+}) {
+  const [activeIndex, setActiveIndex] = useState3(defaultIndex);
+  const [copied, setCopied] = useState3(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__ */ jsxs3("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__ */ jsxs3("div", {
+        className: cn("flex items-center border-b border-dk-border bg-dk-tabs-background", sticky && "sticky top-0 z-10"),
+        children: [
+          /* @__PURE__ */ jsx4("div", {
+            className: "flex-1 flex items-stretch",
+            children: tabs.map((tab, index) => /* @__PURE__ */ jsx4("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__ */ jsx4("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__ */ jsx4(Check2, {
+              size: 16
+            }) : /* @__PURE__ */ jsx4(Copy2, {
+              size: 16
+            })
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx4("div", {
+        className: "bg-dk-background",
+        children: activeTab?.content
+      })
+    ]
+  });
+}
+// src/components/api/ExportCard.tsx
+import { cva as cva2 } from "class-variance-authority";
+import * as React2 from "react";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+
+var kindBadgeVariants = cva2("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 = React2.forwardRef(({ name, description, href, kind = "function", as: Component = "a", className, ...props }, ref) => {
+  const isFunction = kind === "function";
+  return /* @__PURE__ */ jsxs4(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__ */ jsxs4("div", {
+        className: "flex items-center gap-2 mb-2",
+        children: [
+          /* @__PURE__ */ jsx5("span", {
+            className: kindBadgeVariants({ kind }),
+            children: kindLabels[kind]
+          }),
+          /* @__PURE__ */ jsx5("span", {
+            className: "font-mono text-base font-medium text-foreground group-hover:text-primary transition-colors",
+            children: name
+          }),
+          isFunction && /* @__PURE__ */ jsx5("span", {
+            className: "font-mono text-base text-muted-foreground",
+            children: "()"
+          })
+        ]
+      }),
+      description && /* @__PURE__ */ jsx5("p", {
+        className: "text-sm text-muted-foreground line-clamp-2 leading-relaxed",
+        children: description
+      })
+    ]
+  });
+});
+ExportCard.displayName = "ExportCard";
+export {
+  typeBadgeVariants,
+  kindBadgeVariants,
+  TypeBadge,
+  ParameterItem,
+  ImportSection,
+  ExportCard,
+  CodeTabs
+};