@doccov/ui 0.2.2 → 0.3.0

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
 };