@mcp-b/react-components 0.1.1 → 0.1.2

package/dist/components/TestResults.js

@@ -0,0 +1,346 @@
+import { C as SpinnerIcon, O as XIcon, c as ChevronRightIcon, o as CheckIcon } from "../icons-BsWc8g4E.js";
+import { t as cx } from "../class-names-9UtZwb0J.js";
+import { Badge } from "./Badge.js";
+import { CollapsiblePanel, CollapsibleRoot, CollapsibleTrigger } from "./Collapsible.js";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/TestResults.tsx
+const STATUS_COLOR = {
+	passed: "success",
+	failed: "destructive",
+	skipped: "warning",
+	running: "primary"
+};
+const STATUS_LABEL = {
+	passed: "PASS",
+	failed: "FAIL",
+	skipped: "SKIP",
+	running: "RUN"
+};
+const TestResultsContext = React.createContext({});
+/**
+* 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>
+* ```
+*/
+function TestResults({ className, summary, children, ref, ...props }) {
+	const overall = summary && summary.failed > 0 ? "failed" : "passed";
+	const contextValue = React.useMemo(() => ({ summary }), [summary]);
+	return /* @__PURE__ */ jsx(TestResultsContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx("div", {
+			ref,
+			className: cx("test-results", className),
+			"data-status": overall,
+			...props,
+			children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(TestResultsHeader, { children: [/* @__PURE__ */ jsx(TestResultsSummary, {}), /* @__PURE__ */ jsx(TestResultsProgress, {})] }), /* @__PURE__ */ jsx(TestResultsContent, {})] })
+		})
+	});
+}
+function TestResultsHeader({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("test-results__header", className),
+		...props,
+		children
+	});
+}
+function TestResultsDuration({ className, children, ref, ...props }) {
+	const { summary } = React.useContext(TestResultsContext);
+	if (!summary?.duration) return null;
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		className: cx("test-results__stat", className),
+		...props,
+		children: children ?? formatDuration(summary.duration)
+	});
+}
+function TestResultsSummary({ className, children, ref, ...props }) {
+	const { summary } = React.useContext(TestResultsContext);
+	if (!summary) return null;
+	const overall = summary.failed > 0 ? "failed" : "passed";
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("test-results__summary", className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Badge, {
+			color: STATUS_COLOR[overall],
+			className: "test-results__overall",
+			children: overall === "passed" ? "All tests passed" : `${summary.failed} failed`
+		}), /* @__PURE__ */ jsxs("span", {
+			className: "test-results__stats",
+			children: [
+				/* @__PURE__ */ jsxs("span", {
+					className: "test-results__stat test-results__stat--passed",
+					children: [summary.passed, " passed"]
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					className: "test-results__stat test-results__stat--failed",
+					children: [summary.failed, " failed"]
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					className: "test-results__stat test-results__stat--skipped",
+					children: [summary.skipped, " skipped"]
+				}),
+				/* @__PURE__ */ jsx(TestResultsDuration, {})
+			]
+		})] })
+	});
+}
+function TestResultsProgress({ className, children, ref, ...props }) {
+	const { summary } = React.useContext(TestResultsContext);
+	if (!summary) return null;
+	const passedPercent = summary.total > 0 ? summary.passed / summary.total * 100 : 0;
+	const failedPercent = summary.total > 0 ? summary.failed / summary.total * 100 : 0;
+	if (children) return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("test-results__progress", className),
+		...props,
+		children
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cx("test-results__progress", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			"aria-label": "Test progress",
+			"aria-valuemax": summary.total,
+			"aria-valuemin": 0,
+			"aria-valuenow": summary.passed,
+			"aria-valuetext": `${summary.passed}/${summary.total} tests passed, ${summary.failed} failed`,
+			className: "test-results__progress-track",
+			role: "progressbar",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "test-results__progress-segment test-results__progress-segment--passed",
+				style: { width: `${passedPercent}%` }
+			}), /* @__PURE__ */ jsx("div", {
+				className: "test-results__progress-segment test-results__progress-segment--failed",
+				style: { width: `${failedPercent}%` }
+			})]
+		}), /* @__PURE__ */ jsxs("span", {
+			className: "test-results__progress-label",
+			children: [
+				summary.passed,
+				"/",
+				summary.total,
+				" tests passed - ",
+				failedPercent.toFixed(0),
+				"% failed"
+			]
+		})]
+	});
+}
+function TestResultsContent({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("test-results__body", className),
+		...props,
+		children
+	});
+}
+const TestSuiteContext = React.createContext({
+	name: "",
+	status: "passed"
+});
+function TestSuite({ className, name, status, defaultOpen, children, ref, ...props }) {
+	const contextValue = React.useMemo(() => ({
+		name,
+		status
+	}), [name, status]);
+	const isComposable = hasComposableTestSuiteChildren(children);
+	return /* @__PURE__ */ jsx(TestSuiteContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx(CollapsibleRoot, {
+			ref,
+			className: cx("test-results__suite", className),
+			defaultOpen: defaultOpen ?? status === "failed",
+			"data-status": status,
+			...props,
+			unstyled: true,
+			children: isComposable ? children : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(TestSuiteName, {}), /* @__PURE__ */ jsx(TestSuiteContent, { children: /* @__PURE__ */ jsx("div", {
+				className: "test-results__suite-tests",
+				children
+			}) })] })
+		})
+	});
+}
+function TestSuiteName({ className, children, ref, ...props }) {
+	const { name, status } = React.useContext(TestSuiteContext);
+	return /* @__PURE__ */ jsxs(CollapsibleTrigger, {
+		ref,
+		className: cx("test-results__suite-trigger", className),
+		...props,
+		unstyled: true,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "test-results__suite-icon",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
+			}),
+			/* @__PURE__ */ jsx(Badge, {
+				color: STATUS_COLOR[status],
+				size: "sm",
+				children: STATUS_LABEL[status]
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "test-results__suite-name",
+				children: children ?? name
+			})
+		]
+	});
+}
+function TestSuiteStats({ className, passed = 0, failed = 0, skipped = 0, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("test-results__suite-stats", className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+			passed > 0 ? /* @__PURE__ */ jsxs("span", {
+				className: "test-results__stat test-results__stat--passed",
+				children: [passed, " passed"]
+			}) : null,
+			failed > 0 ? /* @__PURE__ */ jsxs("span", {
+				className: "test-results__stat test-results__stat--failed",
+				children: [failed, " failed"]
+			}) : null,
+			skipped > 0 ? /* @__PURE__ */ jsxs("span", {
+				className: "test-results__stat test-results__stat--skipped",
+				children: [skipped, " skipped"]
+			}) : null
+		] })
+	});
+}
+function TestSuiteContent({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx(CollapsiblePanel, {
+		ref,
+		className: cx("test-results__suite-content", className),
+		...props,
+		unstyled: true,
+		children
+	});
+}
+function hasComposableTestSuiteChildren(children) {
+	return React.Children.toArray(children).some((child) => React.isValidElement(child) && (child.type === TestSuiteName || child.type === TestSuiteContent));
+}
+const TestContext = React.createContext({
+	name: "",
+	status: "passed"
+});
+function Test({ className, name, status, duration, children, ref, ...props }) {
+	const contextValue = React.useMemo(() => ({
+		duration,
+		name,
+		status
+	}), [
+		duration,
+		name,
+		status
+	]);
+	const isComposable = hasComposableTestChildren(children);
+	return /* @__PURE__ */ jsx(TestContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx("div", {
+			ref,
+			className: cx("test-results__test", `test-results__test--${status}`, className),
+			"data-status": status,
+			...props,
+			children: isComposable ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsx(TestStatus, {}),
+				/* @__PURE__ */ jsx(TestName, {}),
+				/* @__PURE__ */ jsx(TestDuration, {}),
+				children ? /* @__PURE__ */ jsx("div", {
+					className: "test-results__test-children",
+					children
+				}) : null
+			] })
+		})
+	});
+}
+function TestStatus({ className, children, status, ref, ...props }) {
+	const testContext = React.useContext(TestContext);
+	const testStatus = status ?? testContext.status;
+	const icon = testStatus === "passed" ? /* @__PURE__ */ jsx(CheckIcon, {}) : testStatus === "failed" ? /* @__PURE__ */ jsx(XIcon, {}) : testStatus === "running" ? /* @__PURE__ */ jsx(SpinnerIcon, {}) : /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		children: "."
+	});
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		className: cx("test-results__test-status", `test-results__test-status--${testStatus}`, className),
+		title: testStatus,
+		...props,
+		children: children ?? icon
+	});
+}
+function TestName({ className, children, ref, ...props }) {
+	const { name } = React.useContext(TestContext);
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		className: cx("test-results__test-name", className),
+		...props,
+		children: children ?? name
+	});
+}
+function TestDuration({ className, children, ref, ...props }) {
+	const { duration } = React.useContext(TestContext);
+	if (duration === void 0) return null;
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		className: cx("test-results__test-duration", className),
+		...props,
+		children: children ?? `${duration}ms`
+	});
+}
+function hasComposableTestChildren(children) {
+	return React.Children.toArray(children).some((child) => React.isValidElement(child) && (child.type === TestStatus || child.type === TestName || child.type === TestDuration));
+}
+function TestError({ className, message, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("test-results__error", className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx("pre", {
+			className: "test-results__error-text",
+			children: message
+		})
+	});
+}
+function TestErrorMessage({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx("p", {
+		ref,
+		className: cx("test-results__error-message", className),
+		...props,
+		children
+	});
+}
+function TestErrorStack({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx("pre", {
+		ref,
+		className: cx("test-results__error-text", className),
+		...props,
+		children
+	});
+}
+function formatDuration(ms) {
+	return ms < 1e3 ? `${ms}ms` : `${(ms / 1e3).toFixed(2)}s`;
+}
+//#endregion
+export { Test, TestDuration, TestError, TestErrorMessage, TestErrorStack, TestName, TestResults, TestResultsContent, TestResultsDuration, TestResultsHeader, TestResultsProgress, TestResultsSummary, TestStatus, TestSuite, TestSuiteContent, TestSuiteName, TestSuiteStats };

package/dist/components/Toast.d.ts

@@ -0,0 +1,192 @@
+import * as React from "react";
+import { Toast as Toast$1 } from "@base-ui/react/toast";
+
+//#region src/components/Toast.d.ts
+/**
+ * Props for the Toast.Provider component.
+ */
+interface ToastProviderProps extends React.ComponentPropsWithoutRef<typeof Toast$1.Provider> {}
+/**
+ * Props for the Toast.Viewport component.
+ */
+interface ToastViewportProps extends Omit<React.ComponentPropsWithoutRef<typeof Toast$1.Viewport>, "className"> {
+  /** Additional CSS class names */
+  className?: string;
+}
+/**
+ * Props for the Toast.Root component.
+ */
+interface ToastRootProps extends Omit<React.ComponentPropsWithoutRef<typeof Toast$1.Root>, "className"> {
+  /** Additional CSS class names */
+  className?: string;
+}
+/**
+ * Props for the Toast.Content component.
+ */
+interface ToastContentProps extends Omit<React.ComponentPropsWithoutRef<typeof Toast$1.Content>, "className"> {
+  /** Additional CSS class names */
+  className?: string;
+}
+/**
+ * Props for the Toast.Title component.
+ */
+interface ToastTitleProps extends Omit<React.ComponentPropsWithoutRef<typeof Toast$1.Title>, "className"> {
+  /** Additional CSS class names */
+  className?: string;
+}
+/**
+ * Props for the Toast.Description component.
+ */
+interface ToastDescriptionProps extends Omit<React.ComponentPropsWithoutRef<typeof Toast$1.Description>, "className"> {
+  /** Additional CSS class names */
+  className?: string;
+}
+/**
+ * Props for the Toast.Action component.
+ */
+interface ToastActionProps extends Omit<React.ComponentPropsWithoutRef<typeof Toast$1.Action>, "className"> {
+  /** Additional CSS class names */
+  className?: string;
+}
+/**
+ * Props for the Toast.Close component.
+ */
+interface ToastCloseProps extends Omit<React.ComponentPropsWithoutRef<typeof Toast$1.Close>, "className"> {
+  /** Additional CSS class names */
+  className?: string;
+}
+/**
+ * Container for displaying toasts.
+ */
+declare function ToastViewport({
+  className,
+  ref,
+  ...props
+}: ToastViewportProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+/**
+ * Individual toast wrapper.
+ */
+declare function ToastRoot({
+  className,
+  ref,
+  ...props
+}: ToastRootProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+/**
+ * Container for the contents of a toast.
+ */
+declare function ToastContent({
+  className,
+  ref,
+  ...props
+}: ToastContentProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+/**
+ * Title that labels the toast. Renders an `<h2>` element.
+ */
+declare function ToastTitle({
+  className,
+  ref,
+  ...props
+}: ToastTitleProps & {
+  ref?: React.Ref<HTMLHeadingElement>;
+}): React.JSX.Element;
+/**
+ * Description text for the toast. Renders a `<p>` element.
+ */
+declare function ToastDescription({
+  className,
+  ref,
+  ...props
+}: ToastDescriptionProps & {
+  ref?: React.Ref<HTMLParagraphElement>;
+}): React.JSX.Element;
+/**
+ * Action button within the toast.
+ */
+declare function ToastAction({
+  className,
+  ref,
+  ...props
+}: ToastActionProps & {
+  ref?: React.Ref<HTMLButtonElement>;
+}): React.JSX.Element;
+/**
+ * Close button that dismisses the toast.
+ */
+declare function ToastClose({
+  className,
+  ref,
+  ...props
+}: ToastCloseProps & {
+  ref?: React.Ref<HTMLButtonElement>;
+}): React.JSX.Element;
+/**
+ * A toast notification system for displaying temporary messages.
+ * Supports multiple toasts, swipe-to-dismiss, and customizable positioning.
+ *
+ * @example
+ * ```tsx
+ * // Setup in your app root
+ * function App() {
+ *   return (
+ *     <Toast.Provider timeout={5000} limit={3}>
+ *       <YourApp />
+ *       <ToastViewport />
+ *     </Toast.Provider>
+ *   );
+ * }
+ *
+ * // Custom viewport that renders toasts
+ * function ToastViewport() {
+ *   const { toasts } = Toast.useToastManager();
+ *
+ *   return (
+ *     <Toast.Viewport>
+ *       {toasts.map((toast) => (
+ *         <Toast.Root key={toast.id} toast={toast}>
+ *           <Toast.Content>
+ *             <Toast.Title>{toast.title}</Toast.Title>
+ *             <Toast.Description>{toast.description}</Toast.Description>
+ *           </Toast.Content>
+ *           <Toast.Close>Dismiss</Toast.Close>
+ *         </Toast.Root>
+ *       ))}
+ *     </Toast.Viewport>
+ *   );
+ * }
+ *
+ * // Trigger toasts from anywhere
+ * function SomeComponent() {
+ *   const toastManager = Toast.useToastManager();
+ *
+ *   return (
+ *     <button onClick={() => toastManager.add({
+ *       title: 'Success',
+ *       description: 'Your changes have been saved.'
+ *     })}>
+ *       Show Toast
+ *     </button>
+ *   );
+ * }
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/toast | Base UI Toast}
+ */
+declare const Toast: {
+  Provider: (props: ToastProviderProps) => React.JSX.Element;
+  Viewport: typeof ToastViewport;
+  Root: typeof ToastRoot;
+  Content: typeof ToastContent;
+  Title: typeof ToastTitle;
+  Description: typeof ToastDescription;
+  Action: typeof ToastAction;
+  Close: typeof ToastClose; /** Hook to access the toast manager for adding/removing toasts */
+  useToastManager: typeof Toast$1.useToastManager;
+};
+//#endregion
+export { Toast, ToastActionProps, ToastCloseProps, ToastContentProps, ToastDescriptionProps, ToastProviderProps, ToastRootProps, ToastTitleProps, ToastViewportProps };

package/dist/components/Toast.js

@@ -0,0 +1,163 @@
+import "react";
+import { jsx } from "react/jsx-runtime";
+import { Toast as Toast$1 } from "@base-ui/react/toast";
+//#region src/components/Toast.tsx
+/**
+* Wraps your application to manage toast state.
+*
+* @example
+* ```tsx
+* <Toast.Provider>
+*   <App />
+*   <Toast.Viewport />
+* </Toast.Provider>
+* ```
+*
+* @see {@link https://base-ui.com/react/components/toast | Base UI Toast}
+*/
+const ToastProvider = (props) => {
+	return /* @__PURE__ */ jsx(Toast$1.Provider, { ...props });
+};
+/**
+* Container for displaying toasts.
+*/
+function ToastViewport({ className = "", ref, ...props }) {
+	const classes = ["toast__viewport", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Toast$1.Viewport, {
+		ref,
+		className: classes,
+		...props
+	});
+}
+/**
+* Individual toast wrapper.
+*/
+function ToastRoot({ className = "", ref, ...props }) {
+	const classes = ["toast", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Toast$1.Root, {
+		ref,
+		className: classes,
+		...props
+	});
+}
+/**
+* Container for the contents of a toast.
+*/
+function ToastContent({ className = "", ref, ...props }) {
+	const classes = ["toast__content", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Toast$1.Content, {
+		ref,
+		className: classes,
+		...props
+	});
+}
+/**
+* Title that labels the toast. Renders an `<h2>` element.
+*/
+function ToastTitle({ className = "", ref, ...props }) {
+	const classes = ["toast__title", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Toast$1.Title, {
+		ref,
+		className: classes,
+		...props
+	});
+}
+/**
+* Description text for the toast. Renders a `<p>` element.
+*/
+function ToastDescription({ className = "", ref, ...props }) {
+	const classes = ["toast__description", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Toast$1.Description, {
+		ref,
+		className: classes,
+		...props
+	});
+}
+/**
+* Action button within the toast.
+*/
+function ToastAction({ className = "", ref, ...props }) {
+	const classes = ["toast__action", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Toast$1.Action, {
+		ref,
+		className: classes,
+		...props
+	});
+}
+/**
+* Close button that dismisses the toast.
+*/
+function ToastClose({ className = "", ref, ...props }) {
+	const classes = ["toast__close", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Toast$1.Close, {
+		ref,
+		className: classes,
+		...props
+	});
+}
+/**
+* A toast notification system for displaying temporary messages.
+* Supports multiple toasts, swipe-to-dismiss, and customizable positioning.
+*
+* @example
+* ```tsx
+* // Setup in your app root
+* function App() {
+*   return (
+*     <Toast.Provider timeout={5000} limit={3}>
+*       <YourApp />
+*       <ToastViewport />
+*     </Toast.Provider>
+*   );
+* }
+*
+* // Custom viewport that renders toasts
+* function ToastViewport() {
+*   const { toasts } = Toast.useToastManager();
+*
+*   return (
+*     <Toast.Viewport>
+*       {toasts.map((toast) => (
+*         <Toast.Root key={toast.id} toast={toast}>
+*           <Toast.Content>
+*             <Toast.Title>{toast.title}</Toast.Title>
+*             <Toast.Description>{toast.description}</Toast.Description>
+*           </Toast.Content>
+*           <Toast.Close>Dismiss</Toast.Close>
+*         </Toast.Root>
+*       ))}
+*     </Toast.Viewport>
+*   );
+* }
+*
+* // Trigger toasts from anywhere
+* function SomeComponent() {
+*   const toastManager = Toast.useToastManager();
+*
+*   return (
+*     <button onClick={() => toastManager.add({
+*       title: 'Success',
+*       description: 'Your changes have been saved.'
+*     })}>
+*       Show Toast
+*     </button>
+*   );
+* }
+* ```
+*
+* @see {@link https://base-ui.com/react/components/toast | Base UI Toast}
+*/
+const Toast = {
+	Provider: ToastProvider,
+	Viewport: ToastViewport,
+	Root: ToastRoot,
+	Content: ToastContent,
+	Title: ToastTitle,
+	Description: ToastDescription,
+	Action: ToastAction,
+	Close: ToastClose,
+	/** Hook to access the toast manager for adding/removing toasts */
+	useToastManager: Toast$1.useToastManager
+};
+//#endregion
+export { Toast };