fromsrc 0.0.0 → 0.0.2

package/dist/components/toc/index.js

@@ -0,0 +1,44 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useToc } from './hook';
+export { useToc } from './hook';
+import { TocDefault } from './default';
+import { TocMinimal } from './minimal';
+import { TocInline } from './inline';
+
+function Toc({
+  variant = "default",
+  zigzag = false,
+  multi = false,
+  title,
+  collapsible = true,
+  defaultOpen = false
+}) {
+  const { headings, active, activeRange } = useToc(variant !== "minimal" && multi);
+  if (headings.length === 0) return null;
+  if (variant === "inline") {
+    return /* @__PURE__ */ jsx(
+      TocInline,
+      {
+        headings,
+        title,
+        collapsible,
+        defaultOpen
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("aside", { className: "w-56 shrink-0 hidden lg:block py-12 pl-8", children: /* @__PURE__ */ jsxs("div", { className: "sticky top-12", children: [
+    /* @__PURE__ */ jsx("p", { className: "text-xs text-muted mb-4", children: "on this page" }),
+    variant === "minimal" ? /* @__PURE__ */ jsx(TocMinimal, { headings, active, zigzag }) : /* @__PURE__ */ jsx(
+      TocDefault,
+      {
+        headings,
+        active,
+        activeRange,
+        zigzag
+      }
+    )
+  ] }) });
+}
+
+export { Toc };

package/dist/components/toc/inline.d.ts

@@ -0,0 +1,20 @@
+import * as react from 'react';
+import { Heading } from './hook.js';
+
+/**
+ * props for the inline table of contents component
+ */
+interface TocInlineProps {
+    /** list of headings to display */
+    headings: Heading[];
+    /** title shown above the toc */
+    title?: string;
+    /** whether the toc can be collapsed */
+    collapsible?: boolean;
+    /** initial open state when collapsible */
+    defaultOpen?: boolean;
+}
+declare function TocInlineBase({ headings, title, collapsible, defaultOpen, }: TocInlineProps): React.ReactElement | null;
+declare const TocInline: react.MemoExoticComponent<typeof TocInlineBase>;
+
+export { TocInline, type TocInlineProps };

package/dist/components/toc/inline.js

@@ -0,0 +1,75 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { memo, useState, useCallback } from 'react';
+
+function TocInlineBase({
+  headings,
+  title = "on this page",
+  collapsible = true,
+  defaultOpen = false
+}) {
+  const [open, setOpen] = useState(defaultOpen);
+  const toggle = useCallback(() => {
+    setOpen((prev) => !prev);
+  }, []);
+  if (headings.length === 0) return null;
+  const content = /* @__PURE__ */ jsx("div", { className: "flex flex-col text-sm text-muted", children: headings.map((heading) => /* @__PURE__ */ jsx(
+    "a",
+    {
+      href: `#${heading.id}`,
+      className: "border-l border-line py-1.5 hover:text-fg transition-colors",
+      style: { paddingLeft: 12 * Math.max(heading.level - 1, 1) },
+      children: heading.text
+    },
+    heading.id
+  )) });
+  if (!collapsible) {
+    return /* @__PURE__ */ jsxs(
+      "nav",
+      {
+        "aria-label": "table of contents",
+        className: "my-6 rounded-lg border border-line bg-surface/30 p-4",
+        children: [
+          /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-fg mb-3", children: title }),
+          content
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "nav",
+    {
+      "aria-label": "table of contents",
+      className: "my-6 rounded-lg border border-line bg-surface/30",
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: toggle,
+            "aria-expanded": open,
+            className: "w-full flex items-center justify-between px-4 py-3 text-xs font-medium text-fg",
+            children: [
+              title,
+              /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  className: `w-4 h-4 transition-transform ${open ? "rotate-180" : ""}`,
+                  fill: "none",
+                  viewBox: "0 0 24 24",
+                  stroke: "currentColor",
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })
+                }
+              )
+            ]
+          }
+        ),
+        open && /* @__PURE__ */ jsx("div", { className: "px-4 pb-4", children: content })
+      ]
+    }
+  );
+}
+const TocInline = memo(TocInlineBase);
+
+export { TocInline };

package/dist/components/toc/minimal.d.ts

@@ -0,0 +1,22 @@
+import * as react from 'react';
+import { JSX } from 'react';
+import { Heading } from './hook.js';
+
+/**
+ * Props for the TocMinimal component
+ */
+interface Props {
+    /** List of headings to display in the table of contents */
+    headings: Heading[];
+    /** ID of the currently active heading */
+    active: string;
+    /** Enable zigzag line style instead of default vertical bar */
+    zigzag?: boolean;
+}
+declare function TocMinimalBase({ headings, active, zigzag }: Props): JSX.Element;
+/**
+ * Minimal table of contents component with scroll progress indicator
+ */
+declare const TocMinimal: react.MemoExoticComponent<typeof TocMinimalBase>;
+
+export { TocMinimal };

package/dist/components/toc/minimal.js

@@ -0,0 +1,136 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { memo, useRef, useState, useEffect } from 'react';
+import { ZigzagLine, getItemOffset, buildZigzagPath } from './zigzag';
+
+function TocMinimalBase({ headings, active, zigzag }) {
+  const containerRef = useRef(null);
+  const thumbRef = useRef(null);
+  const progressRef = useRef(null);
+  const [svg, setSvg] = useState(null);
+  useEffect(() => {
+    if (!zigzag || !containerRef.current || headings.length === 0) return;
+    const container = containerRef.current;
+    function update() {
+      const result = buildZigzagPath(headings, container);
+      if (result) setSvg(result);
+    }
+    const observer = new ResizeObserver(update);
+    update();
+    observer.observe(container);
+    return () => observer.disconnect();
+  }, [headings, zigzag]);
+  useEffect(() => {
+    const container = containerRef.current;
+    const thumb = thumbRef.current;
+    const progress = progressRef.current;
+    if (!container) return;
+    let ticking = false;
+    function update() {
+      const scrollTop = window.scrollY;
+      const docHeight = document.documentElement.scrollHeight - window.innerHeight;
+      const percent = docHeight > 0 ? scrollTop / docHeight : 0;
+      if (progress) {
+        progress.style.height = `${percent * 100}%`;
+      } else if (thumb && container) {
+        const containerHeight = container.offsetHeight;
+        const thumbHeight = 12;
+        const maxTop = containerHeight - thumbHeight;
+        const y = percent * maxTop;
+        thumb.style.transform = `translateY(${y}px)`;
+      }
+    }
+    function onScroll() {
+      if (!ticking) {
+        requestAnimationFrame(() => {
+          update();
+          ticking = false;
+        });
+        ticking = true;
+      }
+    }
+    update();
+    window.addEventListener("scroll", onScroll, { passive: true });
+    window.addEventListener("resize", update, { passive: true });
+    return () => {
+      window.removeEventListener("scroll", onScroll);
+      window.removeEventListener("resize", update);
+    };
+  }, [svg]);
+  if (zigzag) {
+    return /* @__PURE__ */ jsxs("nav", { "aria-label": "table of contents", className: "relative", children: [
+      svg && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "absolute left-0 top-0 pointer-events-none z-10",
+          style: {
+            width: svg.width,
+            height: svg.height,
+            maskImage: `url("data:image/svg+xml,${encodeURIComponent(
+              `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${svg.width} ${svg.height}"><path d="${svg.path}" stroke="black" stroke-width="1" fill="none" /></svg>`
+            )}")`
+          },
+          children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: progressRef,
+              className: "w-full bg-fg transition-[height] duration-100 ease-out"
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { ref: containerRef, className: "flex flex-col", children: headings.map((heading, i) => /* @__PURE__ */ jsxs(
+        "a",
+        {
+          href: `#${heading.id}`,
+          "aria-current": active === heading.id ? "location" : void 0,
+          className: `relative py-1.5 text-sm transition-colors ${active === heading.id ? "text-fg" : "text-muted hover:text-fg"}`,
+          style: { paddingLeft: getItemOffset(heading.level) },
+          children: [
+            /* @__PURE__ */ jsx(
+              ZigzagLine,
+              {
+                heading,
+                upper: headings[i - 1]?.level,
+                lower: headings[i + 1]?.level
+              }
+            ),
+            heading.text
+          ]
+        },
+        heading.id
+      )) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("nav", { "aria-label": "table of contents", className: "flex gap-3", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: containerRef,
+        className: "relative w-0.5 bg-line rounded-full",
+        role: "presentation",
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: thumbRef,
+            className: "absolute left-0 top-0 w-full h-3 bg-fg rounded-full",
+            style: { willChange: "transform" }
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx("ul", { role: "list", className: "space-y-1", children: headings.map((heading) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+      "a",
+      {
+        href: `#${heading.id}`,
+        "aria-current": active === heading.id ? "location" : void 0,
+        className: `block text-xs py-1 transition-colors ${heading.level === 3 ? "pl-2" : ""} ${active === heading.id ? "text-fg" : "text-muted hover:text-fg"}`,
+        children: heading.text
+      }
+    ) }, heading.id)) })
+  ] });
+}
+const TocMinimal = memo(TocMinimalBase);
+
+export { TocMinimal };

package/dist/components/toc/zigzag.d.ts

@@ -0,0 +1,18 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Heading } from './hook.js';
+
+interface Props {
+    heading: Heading;
+    upper?: number;
+    lower?: number;
+}
+declare function ZigzagLine({ heading, upper, lower }: Props): react_jsx_runtime.JSX.Element;
+declare function getItemOffset(level: number): number;
+interface ZigzagPath {
+    path: string;
+    width: number;
+    height: number;
+}
+declare function buildZigzagPath(headings: Heading[], container: HTMLElement): ZigzagPath | null;
+
+export { ZigzagLine, type ZigzagPath, buildZigzagPath, getItemOffset };

package/dist/components/toc/zigzag.js

@@ -0,0 +1,57 @@
+"use client";
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+function getLineOffset(level) {
+  return level >= 3 ? 10 : 0;
+}
+function ZigzagLine({ heading, upper = heading.level, lower = heading.level }) {
+  const offset = getLineOffset(heading.level);
+  const upperOffset = getLineOffset(upper);
+  const lowerOffset = getLineOffset(lower);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    offset !== upperOffset && /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", className: "absolute -top-1.5 left-0 size-4", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+      "line",
+      {
+        x1: upperOffset,
+        y1: "0",
+        x2: offset,
+        y2: "12",
+        className: "stroke-line",
+        strokeWidth: "1"
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `absolute inset-y-0 w-px bg-line ${offset !== upperOffset ? "top-1.5" : ""} ${offset !== lowerOffset ? "bottom-1.5" : ""}`,
+        style: { left: offset }
+      }
+    )
+  ] });
+}
+function getItemOffset(level) {
+  return level >= 3 ? 26 : 14;
+}
+function buildZigzagPath(headings, container) {
+  if (container.clientHeight === 0) return null;
+  let w = 0;
+  let h = 0;
+  const d = [];
+  for (let i = 0; i < headings.length; i++) {
+    const item = headings[i];
+    if (!item) continue;
+    const element = container.querySelector(`a[href="#${item.id}"]`);
+    if (!element) continue;
+    const styles = getComputedStyle(element);
+    const offset = item.level >= 3 ? 10.5 : 0.5;
+    const top = element.offsetTop + parseFloat(styles.paddingTop);
+    const bottom = element.offsetTop + element.clientHeight - parseFloat(styles.paddingBottom);
+    w = Math.max(offset, w);
+    h = Math.max(h, bottom);
+    d.push(`${i === 0 ? "M" : "L"}${offset} ${top}`);
+    d.push(`L${offset} ${bottom}`);
+  }
+  return { path: d.join(" "), width: w + 1, height: h };
+}
+
+export { ZigzagLine, buildZigzagPath, getItemOffset };

package/dist/components/tocprogress.d.ts

@@ -0,0 +1,17 @@
+import * as react from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface TocProgressProps {
+    headings: {
+        id: string;
+        text: string;
+        level: number;
+    }[];
+    className?: string;
+    activeClassName?: string;
+    lineColor?: string;
+}
+declare function TocProgressBase({ headings, className, activeClassName, lineColor }: TocProgressProps): react_jsx_runtime.JSX.Element;
+declare const TocProgress: react.MemoExoticComponent<typeof TocProgressBase>;
+
+export { TocProgress, type TocProgressProps };

package/dist/components/tocprogress.js

@@ -0,0 +1,67 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { memo, useState, useRef, useEffect, useCallback } from 'react';
+
+const indent = (level) => level >= 4 ? "pl-8" : level === 3 ? "pl-4" : "";
+function TocProgressBase({ headings, className, activeClassName, lineColor }) {
+  const [active, setActive] = useState("");
+  const listRef = useRef(null);
+  const [indicator, setIndicator] = useState({ top: 0, height: 0 });
+  useEffect(() => {
+    if (headings.length === 0) return;
+    const elements = headings.map((h) => document.getElementById(h.id)).filter((el) => el !== null);
+    if (elements.length === 0) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.isIntersecting) {
+            setActive(entry.target.id);
+            break;
+          }
+        }
+      },
+      { rootMargin: "-80px 0px -60% 0px", threshold: 0 }
+    );
+    for (const el of elements) observer.observe(el);
+    return () => observer.disconnect();
+  }, [headings]);
+  useEffect(() => {
+    if (!active || !listRef.current) return;
+    const current = listRef.current.querySelector(`a[href="#${active}"]`);
+    const link = current instanceof HTMLElement ? current : null;
+    if (!link) return;
+    const top = listRef.current.getBoundingClientRect().top;
+    const rect = link.getBoundingClientRect();
+    setIndicator({ top: rect.top - top, height: rect.height });
+  }, [active]);
+  const scroll = useCallback((id) => {
+    document.getElementById(id)?.scrollIntoView({ behavior: "smooth" });
+  }, []);
+  return /* @__PURE__ */ jsxs("nav", { "aria-label": "Table of contents", className: `relative ${className || ""}`, children: [
+    /* @__PURE__ */ jsx("div", { className: "absolute left-0 top-0 bottom-0 w-0.5 bg-line", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `absolute left-0 w-0.5 transition-all duration-200 ${activeClassName || "bg-fg"}`,
+        style: { top: indicator.top, height: indicator.height, backgroundColor: lineColor },
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ jsx("ul", { ref: listRef, role: "list", children: headings.map((h) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+      "a",
+      {
+        href: `#${h.id}`,
+        onClick: (e) => {
+          e.preventDefault();
+          scroll(h.id);
+        },
+        "aria-current": active === h.id ? "location" : void 0,
+        className: `block py-1 pl-4 text-sm transition-colors ${indent(h.level)} ${active === h.id ? "text-fg font-medium" : "text-muted hover:text-fg"}`,
+        children: h.text
+      }
+    ) }, h.id)) })
+  ] });
+}
+const TocProgress = memo(TocProgressBase);
+
+export { TocProgress };

package/dist/components/tooltip.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode, JSX } from 'react';
+
+/**
+ * props for tooltip component
+ * @param content - tooltip text or element
+ * @param children - trigger element
+ * @param side - tooltip position relative to trigger
+ * @param delay - show delay in milliseconds
+ * @example <Tooltip content="copy"><button>...</button></Tooltip>
+ */
+interface TooltipProps {
+    content: ReactNode;
+    children: ReactNode;
+    side?: "top" | "bottom";
+    delay?: number;
+}
+declare function Tooltip({ content, children, side, delay }: TooltipProps): JSX.Element;
+
+export { Tooltip, type TooltipProps };

package/dist/components/tooltip.js

@@ -0,0 +1,76 @@
+"use client";
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useId, useCallback, useEffect } from 'react';
+import { useEscapeKey } from '../hooks/escapekey';
+
+function Tooltip({ content, children, side = "top", delay = 200 }) {
+  const [show, setShow] = useState(false);
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+  const triggerRef = useRef(null);
+  const tooltipRef = useRef(null);
+  const timeoutRef = useRef(null);
+  const id = useId();
+  const tooltipId = `tooltip-${id}`;
+  const hide = useCallback(() => {
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    setShow(false);
+  }, []);
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    };
+  }, []);
+  useEscapeKey(hide, show);
+  const updatePosition = useCallback(() => {
+    if (!triggerRef.current || !tooltipRef.current) return;
+    const trigger = triggerRef.current.getBoundingClientRect();
+    const tooltip = tooltipRef.current.getBoundingClientRect();
+    const x = trigger.left + trigger.width / 2 - tooltip.width / 2;
+    const y = side === "top" ? trigger.top - tooltip.height - 8 : trigger.bottom + 8;
+    setPosition({ x, y });
+  }, [side]);
+  const handleEnter = useCallback(() => {
+    timeoutRef.current = setTimeout(() => {
+      setShow(true);
+      requestAnimationFrame(updatePosition);
+    }, delay);
+  }, [delay, updatePosition]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref: triggerRef,
+        onMouseEnter: handleEnter,
+        onMouseLeave: hide,
+        onFocus: handleEnter,
+        onBlur: hide,
+        tabIndex: 0,
+        "aria-describedby": show ? tooltipId : void 0,
+        className: "inline",
+        children
+      }
+    ),
+    show && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: tooltipRef,
+        id: tooltipId,
+        role: "tooltip",
+        className: "fixed z-50 px-2 py-1 text-xs bg-fg text-bg rounded shadow-lg pointer-events-none",
+        style: { left: position.x, top: position.y },
+        children: [
+          content,
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": "true",
+              className: `absolute left-1/2 -translate-x-1/2 w-2 h-2 bg-fg rotate-45 ${side === "top" ? "-bottom-1" : "-top-1"}`
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+
+export { Tooltip };

package/dist/components/trigger.d.ts

@@ -0,0 +1,8 @@
+import { JSX } from 'react';
+
+interface TriggerProps {
+    onOpen: () => void;
+}
+declare function Trigger({ onOpen }: TriggerProps): JSX.Element;
+
+export { Trigger, type TriggerProps };

package/dist/components/trigger.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { IconSearch } from './icons';
+
+function Trigger({ onOpen }) {
+  return /* @__PURE__ */ jsxs("button", { type: "button", onClick: onOpen, className: "flex items-center gap-2 w-full px-3 py-2 text-xs text-muted bg-surface border border-line rounded-lg hover:border-dim transition-colors", children: [
+    /* @__PURE__ */ jsx(IconSearch, { className: "w-3.5 h-3.5", size: 14 }),
+    /* @__PURE__ */ jsx("span", { className: "flex-1 text-left", children: "search" }),
+    /* @__PURE__ */ jsx("kbd", { className: "px-1.5 py-0.5 text-[10px] bg-bg border border-line rounded", children: "\u2318K" })
+  ] });
+}
+
+export { Trigger };

package/dist/components/twoslash.d.ts

@@ -0,0 +1,9 @@
+import * as react from 'react';
+
+interface TwoslashProps {
+    data?: string;
+    noerrors?: boolean;
+}
+declare const Twoslash: react.NamedExoticComponent<TwoslashProps>;
+
+export { Twoslash, type TwoslashProps };

package/dist/components/twoslash.js

@@ -0,0 +1,52 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { memo } from 'react';
+import { z } from 'zod';
+
+const row = z.object({
+  t: z.enum(["q", "c"]),
+  l: z.number().int().nonnegative(),
+  ch: z.number().int().nonnegative(),
+  tx: z.string().optional()
+});
+const rows = z.array(row);
+function read(data) {
+  if (!data) return [];
+  try {
+    const raw = JSON.parse(data);
+    const parsed = rows.safeParse(raw);
+    if (!parsed.success) return [];
+    return parsed.data.map((value) => ({
+      type: value.t === "q" ? "query" : "completion",
+      line: value.l,
+      character: value.ch,
+      text: value.tx
+    }));
+  } catch {
+    return [];
+  }
+}
+const TwoslashBase = memo(function TwoslashBase2({ data, noerrors }) {
+  const items = read(data);
+  if (items.length === 0 && !noerrors) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "border-t border-line/60 bg-surface/40 px-4 py-3 text-xs text-muted", "aria-label": "TypeScript notes", children: [
+    noerrors ? /* @__PURE__ */ jsx("div", { className: "mb-2 text-green-400", children: "no errors expected" }) : null,
+    items.length > 0 ? /* @__PURE__ */ jsx("ul", { className: "space-y-1", role: "list", children: items.map((value, index) => /* @__PURE__ */ jsxs("li", { className: "font-mono", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-fg", children: value.type }),
+      " ",
+      /* @__PURE__ */ jsxs("span", { className: "text-dim", children: [
+        "line ",
+        value.line + 1,
+        ", col ",
+        value.character + 1
+      ] }),
+      value.text ? /* @__PURE__ */ jsxs("span", { className: "text-muted", children: [
+        ": ",
+        value.text
+      ] }) : null
+    ] }, `${value.type}-${value.line}-${value.character}-${index}`)) }) : null
+  ] });
+});
+const Twoslash = TwoslashBase;
+
+export { Twoslash };

package/dist/components/typetable.d.ts

@@ -0,0 +1,21 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+/**
+ * @description metadata for a single property in the type table
+ */
+interface TypeInfo {
+    type: string;
+    default?: string;
+    description?: ReactNode;
+    required?: boolean;
+}
+/**
+ * @description props for the typetable component
+ */
+interface TypeTableProps {
+    data: Record<string, TypeInfo>;
+}
+declare const TypeTable: react.NamedExoticComponent<TypeTableProps>;
+
+export { type TypeInfo, TypeTable, type TypeTableProps };