@mcp-b/react-components 0.1.1 → 0.1.2

package/dist/components/Task.js

@@ -0,0 +1,120 @@
+import { S as SearchIcon, c as ChevronRightIcon, m as FileIcon } from "../icons-BsWc8g4E.js";
+import { t as cx } from "../class-names-9UtZwb0J.js";
+import { CollapsiblePanel, CollapsibleRoot, CollapsibleTrigger } from "./Collapsible.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Task.tsx
+/**
+* A collapsible task/workflow list. Compose with TaskTrigger, TaskContent,
+* TaskItem, and TaskItemFile to show structured progress for a multi-step
+* workflow like file edits. Adapted from Vercel AI Elements and restyled
+* with Sigvelo CSS tokens.
+*
+* @example
+* ```tsx
+* <Task defaultOpen>
+*   <TaskTrigger title="Refactoring authentication module" />
+*   <TaskContent>
+*     <TaskItem>
+*       Updated <TaskItemFile name="auth.ts" /> to export the new interface
+*     </TaskItem>
+*     <TaskItem>
+*       Added tests in <TaskItemFile name="auth.test.ts" />
+*     </TaskItem>
+*   </TaskContent>
+* </Task>
+* ```
+*
+* @see {@link https://elements.ai-sdk.dev/components/task | AI Elements Task}
+*/
+function Task({ className, defaultOpen = true, ref, ...props }) {
+	return /* @__PURE__ */ jsx(CollapsibleRoot, {
+		ref,
+		className: cx("task", className),
+		defaultOpen,
+		...props,
+		unstyled: true
+	});
+}
+/**
+* Clickable header that toggles the task content.
+*/
+function TaskTrigger({ className, title, children, ref, ...props }) {
+	if (children !== void 0 && children !== null) return /* @__PURE__ */ jsx(CollapsibleTrigger, {
+		ref,
+		className: cx("task__trigger", className),
+		...props,
+		unstyled: true,
+		children
+	});
+	return /* @__PURE__ */ jsxs(CollapsibleTrigger, {
+		ref,
+		className: cx("task__trigger", className),
+		...props,
+		unstyled: true,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "task__trigger-leading-icon",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ jsx(SearchIcon, {})
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "task__trigger-title",
+				children: title
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "task__trigger-icon",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
+			})
+		]
+	});
+}
+/**
+* The collapsible panel containing TaskItem children.
+*/
+function TaskContent({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx(CollapsiblePanel, {
+		ref,
+		className: cx("task__content", className),
+		...props,
+		unstyled: true,
+		children: /* @__PURE__ */ jsx("ul", {
+			className: "task__list",
+			role: "list",
+			children
+		})
+	});
+}
+/**
+* A single task row. Free-form content; compose with TaskItemFile to
+* reference a file inline.
+*/
+function TaskItem({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx("li", {
+		ref,
+		className: cx("task__item", className),
+		...props,
+		children
+	});
+}
+/**
+* Inline file reference badge used inside TaskItem content.
+*/
+function TaskItemFile({ className, name, children, ref, ...props }) {
+	return /* @__PURE__ */ jsxs("span", {
+		ref,
+		className: cx("task__file", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "task__file-icon",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx(FileIcon, {})
+		}), /* @__PURE__ */ jsx("span", {
+			className: "task__file-name",
+			children: children ?? name
+		})]
+	});
+}
+//#endregion
+export { Task, TaskContent, TaskItem, TaskItemFile, TaskTrigger };

package/dist/components/Terminal.d.ts

@@ -0,0 +1,118 @@
+import { r as ButtonProps } from "../Button-QCM8ZKgR.js";
+import { t as CopyButtonProps } from "../copy-button-BIATcZWZ.js";
+import * as React from "react";
+
+//#region src/components/Terminal.d.ts
+interface TerminalProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Terminal output; may include ANSI escape codes. */
+  output: string;
+  /** Whether output is actively streaming. Shows a blinking cursor. */
+  isStreaming?: boolean;
+  /** Whether to auto-scroll to bottom when output changes. */
+  autoScroll?: boolean;
+  /** Called when the clear button is pressed. */
+  onClear?: () => void;
+}
+/**
+ * A console output viewer with ANSI color support, auto-scroll, and a
+ * streaming cursor. Compose with TerminalHeader and TerminalContent.
+ *
+ * @example
+ * ```tsx
+ * <Terminal output={logs} isStreaming>
+ *   <TerminalHeader>
+ *     <TerminalTitle>build.log</TerminalTitle>
+ *     <TerminalStatus status="running" />
+ *     <TerminalActions>
+ *       <TerminalCopyButton />
+ *       <TerminalClearButton />
+ *     </TerminalActions>
+ *   </TerminalHeader>
+ *   <TerminalContent />
+ * </Terminal>
+ * ```
+ */
+declare function Terminal({
+  className,
+  output,
+  isStreaming,
+  autoScroll,
+  onClear,
+  children,
+  ref,
+  ...props
+}: TerminalProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface TerminalHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
+declare function TerminalHeader({
+  className,
+  children,
+  ref,
+  ...props
+}: TerminalHeaderProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface TerminalTitleProps extends React.HTMLAttributes<HTMLSpanElement> {}
+declare function TerminalTitle({
+  className,
+  children,
+  ref,
+  ...props
+}: TerminalTitleProps & {
+  ref?: React.Ref<HTMLSpanElement>;
+}): React.JSX.Element;
+type TerminalStatusValue = "idle" | "running" | "success" | "error";
+interface TerminalStatusProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "color"> {
+  status: TerminalStatusValue;
+}
+declare function TerminalStatus({
+  className,
+  status,
+  ref,
+  ...props
+}: TerminalStatusProps & {
+  ref?: React.Ref<HTMLSpanElement>;
+}): React.JSX.Element;
+interface TerminalActionsProps extends React.HTMLAttributes<HTMLDivElement> {}
+declare function TerminalActions({
+  className,
+  children,
+  ref,
+  ...props
+}: TerminalActionsProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface TerminalContentProps extends React.HTMLAttributes<HTMLDivElement> {}
+declare function TerminalContent({
+  className,
+  ref,
+  ...props
+}: TerminalContentProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface TerminalCopyButtonProps extends Omit<CopyButtonProps, "text" | "label"> {
+  label?: string;
+  /** Milliseconds to show "Copied" before reverting. Default 2000. */
+  timeout?: number;
+}
+declare function TerminalCopyButton({
+  className,
+  label,
+  timeout,
+  onClick,
+  ...props
+}: TerminalCopyButtonProps): React.JSX.Element;
+interface TerminalClearButtonProps extends Omit<ButtonProps, "children" | "variant" | "size" | "color" | "className" | "onClick"> {
+  className?: string;
+  label?: string;
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+}
+declare function TerminalClearButton({
+  className,
+  label,
+  onClick,
+  ...props
+}: TerminalClearButtonProps): React.JSX.Element;
+//#endregion
+export { Terminal, TerminalActions, TerminalActionsProps, TerminalClearButton, TerminalClearButtonProps, TerminalContent, TerminalContentProps, TerminalCopyButton, TerminalCopyButtonProps, TerminalHeader, TerminalHeaderProps, TerminalProps, TerminalStatus, TerminalStatusProps, TerminalStatusValue, TerminalTitle, TerminalTitleProps };

package/dist/components/Terminal.js

@@ -0,0 +1,234 @@
+import { O as XIcon, T as TerminalIcon } from "../icons-BsWc8g4E.js";
+import { t as cx } from "../class-names-9UtZwb0J.js";
+import { Button } from "./Button.js";
+import { Tooltip, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipTrigger } from "./Tooltip.js";
+import { t as CopyButton } from "../copy-button-BNgclDrO.js";
+import { Badge } from "./Badge.js";
+import { ScrollArea } from "./ScrollArea.js";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import Anser from "anser";
+//#region src/components/_internal/ansi.ts
+/**
+* Maps Anser's standard 16-color RGB strings to CSS variables bound to the
+* Sigvelo palette. Values come from anser's internal PALETTE. Any RGB triple
+* not in this map falls through to a raw `rgb(...)` literal.
+*/
+const STANDARD_COLOR_MAP = {
+	"0, 0, 0": "var(--sigvelo-color-neutral-300)",
+	"187, 0, 0": "var(--sigvelo-color-danger-300)",
+	"0, 187, 0": "var(--sigvelo-color-success-300)",
+	"187, 187, 0": "var(--sigvelo-color-warning-300)",
+	"0, 0, 187": "var(--sigvelo-color-primary-300)",
+	"187, 0, 187": "var(--sigvelo-color-primary-200)",
+	"0, 187, 187": "var(--sigvelo-color-primary-200)",
+	"255, 255, 255": "var(--sigvelo-color-neutral-100)",
+	"85, 85, 85": "var(--sigvelo-color-neutral-400)",
+	"255, 85, 85": "var(--sigvelo-color-danger-300)",
+	"85, 255, 85": "var(--sigvelo-color-success-300)",
+	"255, 255, 85": "var(--sigvelo-color-warning-300)",
+	"85, 85, 255": "var(--sigvelo-color-primary-300)",
+	"255, 85, 255": "var(--sigvelo-color-primary-200)",
+	"85, 255, 255": "var(--sigvelo-color-primary-200)",
+	"187, 187, 187": "var(--sigvelo-color-neutral-300)"
+};
+function toCss(raw) {
+	if (!raw) return void 0;
+	const mapped = STANDARD_COLOR_MAP[raw];
+	if (mapped) return mapped;
+	return `rgb(${raw})`;
+}
+/**
+* Parses an ANSI-escaped string into an array of formatted segments.
+*
+* Empty segments (bare escape codes) are filtered out.
+*/
+function parseAnsi(input) {
+	return Anser.ansiToJson(input, {
+		json: true,
+		remove_empty: true
+	}).filter((c) => c.content.length > 0).map((c) => ({
+		content: c.content,
+		fg: toCss(c.fg),
+		bg: toCss(c.bg),
+		bold: c.decorations?.includes("bold") ?? false,
+		italic: c.decorations?.includes("italic") ?? false,
+		underline: c.decorations?.includes("underline") ?? false,
+		strikethrough: c.decorations?.includes("strikethrough") ?? false,
+		dim: c.decorations?.includes("dim") ?? false
+	}));
+}
+//#endregion
+//#region src/components/Terminal.tsx
+const TerminalContext = React.createContext(null);
+function useTerminalContext() {
+	const ctx = React.useContext(TerminalContext);
+	if (!ctx) throw new Error("Terminal subcomponents must be used inside <Terminal>.");
+	return ctx;
+}
+/**
+* A console output viewer with ANSI color support, auto-scroll, and a
+* streaming cursor. Compose with TerminalHeader and TerminalContent.
+*
+* @example
+* ```tsx
+* <Terminal output={logs} isStreaming>
+*   <TerminalHeader>
+*     <TerminalTitle>build.log</TerminalTitle>
+*     <TerminalStatus status="running" />
+*     <TerminalActions>
+*       <TerminalCopyButton />
+*       <TerminalClearButton />
+*     </TerminalActions>
+*   </TerminalHeader>
+*   <TerminalContent />
+* </Terminal>
+* ```
+*/
+function Terminal({ className, output, isStreaming = false, autoScroll = true, onClear, children, ref, ...props }) {
+	const ctxValue = React.useMemo(() => ({
+		output,
+		isStreaming,
+		autoScroll,
+		onClear
+	}), [
+		output,
+		isStreaming,
+		autoScroll,
+		onClear
+	]);
+	return /* @__PURE__ */ jsx(TerminalContext.Provider, {
+		value: ctxValue,
+		children: /* @__PURE__ */ jsx("div", {
+			ref,
+			className: cx("terminal", className),
+			"data-streaming": isStreaming ? "" : void 0,
+			...props,
+			children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(TerminalHeader, { children: [/* @__PURE__ */ jsx(TerminalTitle, {}), /* @__PURE__ */ jsxs(TerminalActions, { children: [/* @__PURE__ */ jsx(TerminalCopyButton, {}), onClear ? /* @__PURE__ */ jsx(TerminalClearButton, {}) : null] })] }), /* @__PURE__ */ jsx(TerminalContent, {})] })
+		})
+	});
+}
+function TerminalHeader({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("terminal__header", className),
+		...props,
+		children
+	});
+}
+function TerminalTitle({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsxs("span", {
+		ref,
+		className: cx("terminal__title", className),
+		...props,
+		children: [/* @__PURE__ */ jsx(TerminalIcon, { "aria-hidden": "true" }), children ?? "Terminal"]
+	});
+}
+const STATUS_COLOR = {
+	idle: "neutral",
+	running: "primary",
+	success: "success",
+	error: "destructive"
+};
+function TerminalStatus({ className, status, ref, ...props }) {
+	return /* @__PURE__ */ jsx(Badge, {
+		...props,
+		ref,
+		color: STATUS_COLOR[status],
+		size: "sm",
+		className: cx("terminal__status", className),
+		children: status
+	});
+}
+function TerminalActions({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("terminal__actions", className),
+		...props,
+		children
+	});
+}
+function TerminalContent({ className, ref, ...props }) {
+	const { output, isStreaming, autoScroll } = useTerminalContext();
+	const viewportRef = React.useRef(null);
+	const [stickToBottom, setStickToBottom] = React.useState(true);
+	const segments = React.useMemo(() => parseAnsi(output), [output]);
+	React.useEffect(() => {
+		if (!autoScroll || !stickToBottom) return;
+		const viewport = viewportRef.current;
+		if (!viewport) return;
+		viewport.scrollTop = viewport.scrollHeight;
+	}, [
+		output,
+		autoScroll,
+		stickToBottom
+	]);
+	const handleScroll = (e) => {
+		const target = e.currentTarget;
+		setStickToBottom(target.scrollHeight - target.scrollTop - target.clientHeight < 8);
+	};
+	return /* @__PURE__ */ jsxs(ScrollArea.Root, {
+		ref,
+		className: cx("terminal__content", className),
+		...props,
+		children: [/* @__PURE__ */ jsx(ScrollArea.Viewport, {
+			ref: viewportRef,
+			className: "terminal__content-viewport",
+			onScroll: handleScroll,
+			children: /* @__PURE__ */ jsxs("pre", {
+				className: "terminal__output",
+				children: [segments.map((seg, i) => /* @__PURE__ */ jsx("span", {
+					style: {
+						color: seg.fg,
+						backgroundColor: seg.bg,
+						fontWeight: seg.bold ? "bold" : void 0,
+						fontStyle: seg.italic ? "italic" : void 0,
+						textDecoration: seg.underline ? "underline" : seg.strikethrough ? "line-through" : void 0,
+						opacity: seg.dim ? .7 : void 0
+					},
+					children: seg.content
+				}, i)), isStreaming ? /* @__PURE__ */ jsx("span", {
+					className: "terminal__cursor",
+					"aria-hidden": "true"
+				}) : null]
+			})
+		}), /* @__PURE__ */ jsx(ScrollArea.Scrollbar, {
+			orientation: "vertical",
+			children: /* @__PURE__ */ jsx(ScrollArea.Thumb, {})
+		})]
+	});
+}
+function TerminalCopyButton({ className, label = "Copy output", timeout = 2e3, onClick, ...props }) {
+	const { output } = useTerminalContext();
+	const plain = React.useMemo(() => stripAnsi(output), [output]);
+	return /* @__PURE__ */ jsx(CopyButton, {
+		...props,
+		text: plain,
+		label,
+		timeout,
+		className: cx("terminal__copy", className),
+		onClick
+	});
+}
+function TerminalClearButton({ className, label = "Clear terminal", onClick, ...props }) {
+	const { onClear } = useTerminalContext();
+	const handleClick = React.useCallback((e) => {
+		onClear?.();
+		onClick?.(e);
+	}, [onClear, onClick]);
+	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx(Button, {
+		variant: "ghost",
+		size: "icon",
+		"aria-label": label,
+		className: cx("terminal__clear", className),
+		...props,
+		onClick: handleClick,
+		children: /* @__PURE__ */ jsx(XIcon, {})
+	}) }), /* @__PURE__ */ jsx(TooltipPortal, { children: /* @__PURE__ */ jsx(TooltipPositioner, { children: /* @__PURE__ */ jsx(TooltipPopup, { children: label }) }) })] });
+}
+const ANSI_REGEX = /\u001b\[[0-9;?]*[a-zA-Z]/g;
+function stripAnsi(input) {
+	return input.replace(ANSI_REGEX, "");
+}
+//#endregion
+export { Terminal, TerminalActions, TerminalClearButton, TerminalContent, TerminalCopyButton, TerminalHeader, TerminalStatus, TerminalTitle };

package/dist/components/TestResults.d.ts

@@ -0,0 +1,236 @@
+import { CollapsiblePanelProps, CollapsibleRootProps, CollapsibleTriggerProps } from "./Collapsible.js";
+import * as React from "react";
+
+//#region src/components/TestResults.d.ts
+type TestStatusValue = "passed" | "failed" | "skipped" | "running";
+interface TestSummary {
+  /** Number of passed tests. */
+  passed: number;
+  /** Number of failed tests. */
+  failed: number;
+  /** Number of skipped tests. */
+  skipped: number;
+  /** Total number of tests represented by the summary. */
+  total: number;
+  /** Total runtime in milliseconds. */
+  duration?: number;
+}
+interface TestResultsProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Aggregate test counts used by the summary and progress bar. */
+  summary?: TestSummary;
+  /** Additional class names for layout only; do not override status colors from apps. */
+  className?: string;
+  /** Optional custom report content; defaults to summary and empty content slots. */
+  children?: React.ReactNode;
+}
+/**
+ * Displays a test suite report with summary stats, progress bar, and
+ * collapsible per-suite results.
+ *
+ * Built internally for CI/test output in agent and developer workflows. Use it
+ * for structured test reports. Do not use it for generic status dashboards.
+ *
+ * Sigvelo changes: composes Collapsible, Badge, and Progress; maps status
+ * color and spacing to Sigvelo CSS tokens; opens failed suites by default.
+ *
+ * Suite triggers inherit Collapsible keyboard behavior. Error stacks should be
+ * text, not images. Add new statuses here before apps fork their own report UI.
+ *
+ * @example
+ * ```tsx
+ * <TestResults summary={{ passed: 10, failed: 1, skipped: 0, total: 11 }}>
+ *   <TestSuite name="auth.test.ts" status="failed">
+ *     <Test name="rejects bad tokens" status="failed">
+ *       <TestError message="Expected 401, received 500" />
+ *     </Test>
+ *   </TestSuite>
+ * </TestResults>
+ * ```
+ */
+declare function TestResults({
+  className,
+  summary,
+  children,
+  ref,
+  ...props
+}: TestResultsProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface TestResultsHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
+declare function TestResultsHeader({
+  className,
+  children,
+  ref,
+  ...props
+}: TestResultsHeaderProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface TestResultsDurationProps extends React.HTMLAttributes<HTMLSpanElement> {}
+declare function TestResultsDuration({
+  className,
+  children,
+  ref,
+  ...props
+}: TestResultsDurationProps & {
+  ref?: React.Ref<HTMLSpanElement>;
+}): React.JSX.Element | null;
+interface TestResultsSummaryProps extends React.HTMLAttributes<HTMLDivElement> {}
+declare function TestResultsSummary({
+  className,
+  children,
+  ref,
+  ...props
+}: TestResultsSummaryProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element | null;
+interface TestResultsProgressProps extends React.HTMLAttributes<HTMLDivElement> {}
+declare function TestResultsProgress({
+  className,
+  children,
+  ref,
+  ...props
+}: TestResultsProgressProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element | null;
+interface TestResultsContentProps extends React.HTMLAttributes<HTMLDivElement> {}
+declare function TestResultsContent({
+  className,
+  children,
+  ref,
+  ...props
+}: TestResultsContentProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface TestSuiteProps extends Omit<CollapsibleRootProps, "className" | "unstyled"> {
+  className?: string;
+  name: string;
+  status: TestStatusValue;
+}
+declare function TestSuite({
+  className,
+  name,
+  status,
+  defaultOpen,
+  children,
+  ref,
+  ...props
+}: TestSuiteProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+type TestSuiteNameProps = Omit<CollapsibleTriggerProps, "className" | "unstyled"> & {
+  className?: string;
+};
+declare function TestSuiteName({
+  className,
+  children,
+  ref,
+  ...props
+}: TestSuiteNameProps & {
+  ref?: React.Ref<HTMLButtonElement>;
+}): React.JSX.Element;
+interface TestSuiteStatsProps extends React.HTMLAttributes<HTMLDivElement> {
+  passed?: number;
+  failed?: number;
+  skipped?: number;
+}
+declare function TestSuiteStats({
+  className,
+  passed,
+  failed,
+  skipped,
+  children,
+  ref,
+  ...props
+}: TestSuiteStatsProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+type TestSuiteContentProps = Omit<CollapsiblePanelProps, "className" | "unstyled"> & {
+  className?: string;
+};
+declare function TestSuiteContent({
+  className,
+  children,
+  ref,
+  ...props
+}: TestSuiteContentProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface TestProps extends React.HTMLAttributes<HTMLDivElement> {
+  name: string;
+  status: TestStatusValue;
+  duration?: number;
+}
+declare function Test({
+  className,
+  name,
+  status,
+  duration,
+  children,
+  ref,
+  ...props
+}: TestProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface TestStatusProps extends React.HTMLAttributes<HTMLSpanElement> {
+  status?: TestStatusValue;
+}
+declare function TestStatus({
+  className,
+  children,
+  status,
+  ref,
+  ...props
+}: TestStatusProps & {
+  ref?: React.Ref<HTMLSpanElement>;
+}): React.JSX.Element;
+interface TestNameProps extends React.HTMLAttributes<HTMLSpanElement> {}
+declare function TestName({
+  className,
+  children,
+  ref,
+  ...props
+}: TestNameProps & {
+  ref?: React.Ref<HTMLSpanElement>;
+}): React.JSX.Element;
+interface TestDurationProps extends React.HTMLAttributes<HTMLSpanElement> {}
+declare function TestDuration({
+  className,
+  children,
+  ref,
+  ...props
+}: TestDurationProps & {
+  ref?: React.Ref<HTMLSpanElement>;
+}): React.JSX.Element | null;
+interface TestErrorProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Error message or stack trace. */
+  message?: string;
+}
+declare function TestError({
+  className,
+  message,
+  children,
+  ref,
+  ...props
+}: TestErrorProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface TestErrorMessageProps extends React.HTMLAttributes<HTMLParagraphElement> {}
+declare function TestErrorMessage({
+  className,
+  children,
+  ref,
+  ...props
+}: TestErrorMessageProps & {
+  ref?: React.Ref<HTMLParagraphElement>;
+}): React.JSX.Element;
+interface TestErrorStackProps extends React.HTMLAttributes<HTMLPreElement> {}
+declare function TestErrorStack({
+  className,
+  children,
+  ref,
+  ...props
+}: TestErrorStackProps & {
+  ref?: React.Ref<HTMLPreElement>;
+}): React.JSX.Element;
+//#endregion
+export { Test, TestDuration, TestDurationProps, TestError, TestErrorMessage, TestErrorMessageProps, TestErrorProps, TestErrorStack, TestErrorStackProps, TestName, TestNameProps, TestProps, TestResults, TestResultsContent, TestResultsContentProps, TestResultsDuration, TestResultsDurationProps, TestResultsHeader, TestResultsHeaderProps, TestResultsProgress, TestResultsProgressProps, TestResultsProps, TestResultsSummary, TestResultsSummaryProps, TestStatus, TestStatusProps, TestStatusValue, TestSuite, TestSuiteContent, TestSuiteContentProps, TestSuiteName, TestSuiteNameProps, TestSuiteProps, TestSuiteStats, TestSuiteStatsProps, TestSummary };