@mcp-b/react-components 0.39.0 → 0.41.0

package/dist/components/agents-sdk/AgentActivityPreview.js

@@ -1,93 +0,0 @@
-import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { C as FileIcon, J as SpinnerIcon, j as McpIcon, rt as XIcon, tt as WarningIcon } from "../../icons-B4mGvCvc.js";
-import { ActivityHeader } from "../ai-sdk/Activity.js";
-import { Button } from "../foundations/Button.js";
-import { t as NavigationLink } from "../../navigation-link-kqMa81v5.js";
-import { AgentActivityFavicon, AgentActivityIcon } from "./AgentActivity.js";
-import { AppIcon } from "../foundations/AppIcon.js";
-import "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/agents-sdk/AgentActivityPreview.tsx
-/** Compact multi-agent preview for a page overlay or secondary application rail. */
-function AgentActivityPreview({ "aria-label": ariaLabel = "Agent activity", brandIcon = /* @__PURE__ */ jsx(McpIcon, {}), className, items, onDismiss, renderAgentLink, renderWorkspaceFileLink, ref, ...props }) {
-	if (items.length === 0) return null;
-	return /* @__PURE__ */ jsxs("section", {
-		ref,
-		"aria-label": ariaLabel,
-		className: cx("agent-activity-preview", className),
-		"data-slot": "agent-activity-preview",
-		...props,
-		children: [
-			/* @__PURE__ */ jsx("div", {
-				className: "agent-activity-preview__badge",
-				"aria-hidden": "true",
-				children: brandIcon
-			}),
-			onDismiss ? /* @__PURE__ */ jsx(Button, {
-				"aria-label": "Hide agent activity",
-				className: "agent-activity-preview__dismiss",
-				color: "neutral",
-				iconOnly: true,
-				size: "sm",
-				variant: "ghost",
-				onClick: onDismiss,
-				children: /* @__PURE__ */ jsx(XIcon, {})
-			}) : null,
-			/* @__PURE__ */ jsx("ul", {
-				className: "agent-activity-preview__list",
-				role: "list",
-				children: items.map((item) => /* @__PURE__ */ jsxs("li", {
-					className: "agent-activity-preview__item",
-					children: [/* @__PURE__ */ jsx(NavigationLink, {
-						render: renderAgentLink(item),
-						className: "agent-activity-preview__row",
-						"aria-label": `${item.action}${item.detail ? ` ${item.detail}` : ""}. ${statusLabel(item.status)}. Open agent.`,
-						"data-status": item.status,
-						children: /* @__PURE__ */ jsx(ActivityHeader, {
-							icon: item.url ? /* @__PURE__ */ jsx(AgentActivityFavicon, {
-								url: item.url,
-								fallbackKind: item.iconKind
-							}) : /* @__PURE__ */ jsx(AgentActivityIcon, { kind: item.iconKind }),
-							isStreaming: item.status === "running",
-							action: item.action,
-							detail: item.detail,
-							trailing: /* @__PURE__ */ jsxs("span", {
-								className: "agent-activity-preview__trailing",
-								"aria-hidden": "true",
-								children: [item.favicons?.length ? /* @__PURE__ */ jsx(AppIcon.Stack, { children: item.favicons.map((favicon) => /* @__PURE__ */ jsxs(AppIcon.Root, {
-									size: "sm",
-									title: favicon.label,
-									children: [/* @__PURE__ */ jsx(AppIcon.Image, {
-										src: favicon.src,
-										alt: ""
-									}), /* @__PURE__ */ jsx(AppIcon.Fallback, { children: favicon.label.slice(0, 1) })]
-								}, `${favicon.src}:${favicon.label}`)) }) : null, /* @__PURE__ */ jsx(StatusIcon, { status: item.status })]
-							})
-						})
-					}), item.workspaceDestination && renderWorkspaceFileLink ? /* @__PURE__ */ jsx(NavigationLink, {
-						render: renderWorkspaceFileLink(item, item.workspaceDestination),
-						className: "agent-activity-preview__file-action",
-						"aria-label": `Open ${item.workspaceDestination.path} in workspace`,
-						children: /* @__PURE__ */ jsx(FileIcon, {})
-					}) : null]
-				}, item.id))
-			})
-		]
-	});
-}
-function StatusIcon({ status }) {
-	switch (status) {
-		case "running": return /* @__PURE__ */ jsx(SpinnerIcon, {});
-		case "input-required": return /* @__PURE__ */ jsx(WarningIcon, {});
-		case "unviewed": return /* @__PURE__ */ jsx("span", { className: "agent-activity-preview__unviewed-dot" });
-	}
-}
-function statusLabel(status) {
-	switch (status) {
-		case "running": return "Working";
-		case "input-required": return "Needs your input";
-		case "unviewed": return "Not yet viewed";
-	}
-}
-//#endregion
-export { AgentActivityPreview };

package/dist/components/agents-sdk/ThinkThreadShell.d.ts

@@ -1,38 +0,0 @@
-import { t as ResponsiveSidebarShell } from "../../ResponsiveSidebarShell-DWjULskY.js";
-import * as React from "react";
-
-//#region src/components/agents-sdk/ThinkThreadShell.d.ts
-interface ThinkThreadShellProps extends React.HTMLAttributes<HTMLDivElement> {
-  /**
-   * Thread picker or app-owned sidebar shown beside the selected child shell.
-   * Use the render form to close the compact drawer when a thread is selected.
-   */
-  sidebar: React.ComponentProps<typeof ResponsiveSidebarShell>["sidebar"];
-  /** Whether the thread drawer is open. Omit for internal state. */
-  sidebarOpen?: boolean;
-  /** Initial thread drawer state when `sidebarOpen` is uncontrolled. */
-  defaultSidebarOpen?: boolean;
-  /** Called when the thread drawer is opened or closed. */
-  onSidebarOpenChange?: (open: boolean) => void;
-  /** Application bar composed with the shell-owned thread toggle. */
-  topBar?: React.ComponentProps<typeof ResponsiveSidebarShell>["topBar"];
-}
-/**
- * Thread-specific adapter for ResponsiveSidebarShell. Callers still own the
- * parent agent, selected child agent, chat hook, and shared workspace.
- */
-declare function ThinkThreadShell({
-  sidebar,
-  sidebarOpen,
-  defaultSidebarOpen,
-  onSidebarOpenChange,
-  topBar,
-  children,
-  className,
-  ref,
-  ...props
-}: ThinkThreadShellProps & {
-  ref?: React.Ref<HTMLDivElement>;
-}): React.JSX.Element;
-//#endregion
-export { ThinkThreadShell, ThinkThreadShellProps };

package/dist/components/agents-sdk/ThinkThreadShell.js

@@ -1,27 +0,0 @@
-import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { ResponsiveSidebarShell } from "../general-purpose/ResponsiveSidebarShell.js";
-import "react";
-import { jsx } from "react/jsx-runtime";
-//#region src/components/agents-sdk/ThinkThreadShell.tsx
-/**
-* Thread-specific adapter for ResponsiveSidebarShell. Callers still own the
-* parent agent, selected child agent, chat hook, and shared workspace.
-*/
-function ThinkThreadShell({ sidebar, sidebarOpen, defaultSidebarOpen, onSidebarOpenChange, topBar, children, className, ref, ...props }) {
-	return /* @__PURE__ */ jsx(ResponsiveSidebarShell, {
-		...props,
-		ref,
-		className: cx("think-thread-shell", className),
-		sidebar,
-		sidebarLabel: "threads",
-		sidebarOpen,
-		defaultSidebarOpen,
-		onSidebarOpenChange,
-		topBar,
-		toolbarLabel: "Thread controls",
-		showMainLabel: "Show selected thread",
-		children
-	});
-}
-//#endregion
-export { ThinkThreadShell };

package/dist/components/foundations/Badge.d.ts

@@ -1,62 +0,0 @@
-import { useRender } from "@base-ui/react/use-render";
-
-//#region src/components/foundations/Badge.d.ts
-type BadgeVariant = "normal" | "outline" | "ghost" | "link";
-type BadgeColor = "neutral" | "primary" | "success" | "destructive" | "warning";
-interface BadgeVariantsOptions {
-  variant?: BadgeVariant | null;
-  color?: BadgeColor | null;
-  size?: "sm" | "md" | null;
-  className?: string;
-}
-declare function badgeVariants({
-  variant,
-  color,
-  size,
-  className
-}?: BadgeVariantsOptions): string;
-type BadgeRenderState = {
-  slot: "badge";
-  variant: BadgeVariant;
-  size: "sm" | "md";
-};
-interface BadgeProps extends Omit<useRender.ComponentProps<"span", BadgeRenderState>, "color"> {
-  /**
-   * The visual rendering style of the badge.
-   * @default 'normal'
-   */
-  variant?: BadgeVariant;
-  /**
-   * The semantic color intent of the badge.
-   * @default 'primary'
-   */
-  color?: BadgeColor;
-  /**
-   * The size of the badge.
-   * @default 'md'
-   */
-  size?: "sm" | "md";
-}
-/**
- * A badge component for highlighting status, labels, or categories.
- *
- * @example
- * ```tsx
- * <Badge>Default</Badge>
- * <Badge color="success">Active</Badge>
- * <Badge color="warning">Pending</Badge>
- * <Badge variant="outline">Info</Badge>
- * <Badge render={<a href="/docs" />}>Docs</Badge>
- * ```
- */
-declare function Badge({
-  variant,
-  color,
-  size,
-  className,
-  render,
-  ref,
-  ...props
-}: BadgeProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
-//#endregion
-export { Badge, BadgeColor, BadgeProps, BadgeVariant, BadgeVariantsOptions, badgeVariants };

package/dist/components/foundations/Badge.js

@@ -1,55 +0,0 @@
-import { useRender } from "@base-ui/react/use-render";
-//#region src/components/foundations/Badge.tsx
-const BADGE_VARIANT_DEFAULT_COLOR = {
-	normal: "primary",
-	outline: "neutral",
-	ghost: "neutral",
-	link: "primary"
-};
-function badgeVariants({ variant = "normal", color, size = "md", className } = {}) {
-	const badgeVariant = variant ?? "normal";
-	return [
-		"badge",
-		`badge--${badgeVariant}`,
-		`badge--${color ?? BADGE_VARIANT_DEFAULT_COLOR[badgeVariant]}`,
-		size !== "md" && `badge--${size}`,
-		className
-	].filter(Boolean).join(" ");
-}
-/**
-* A badge component for highlighting status, labels, or categories.
-*
-* @example
-* ```tsx
-* <Badge>Default</Badge>
-* <Badge color="success">Active</Badge>
-* <Badge color="warning">Pending</Badge>
-* <Badge variant="outline">Info</Badge>
-* <Badge render={<a href="/docs" />}>Docs</Badge>
-* ```
-*/
-function Badge({ variant = "normal", color, size = "md", className, render, ref, ...props }) {
-	const badgeVariant = variant ?? "normal";
-	const classes = badgeVariants({
-		variant,
-		color,
-		size,
-		className
-	});
-	return useRender({
-		defaultTagName: "span",
-		render,
-		ref,
-		props: {
-			...props,
-			className: classes
-		},
-		state: {
-			slot: "badge",
-			variant: badgeVariant,
-			size
-		}
-	});
-}
-//#endregion
-export { Badge, badgeVariants };

package/dist/components/foundations/StatusPill.d.ts

@@ -1,43 +0,0 @@
-import { BadgeProps } from "./Badge.js";
-import * as React from "react";
-
-//#region src/components/foundations/StatusPill.d.ts
-interface StatusPillProps extends BadgeProps {
-  /**
-   * Whether the state this reports is still ongoing. A live state pulses; a
-   * settled one holds still, so "Live" and "Ended" are told apart without
-   * reading either word.
-   */
-  busy?: boolean;
-  /**
-   * Replaces the dot for states that have a picture — a spinner while a run
-   * starts, a check once it lands.
-   */
-  icon?: React.ReactNode;
-}
-/**
- * A short state report: an indicator, then the state itself.
- *
- * This is a `Badge` with an indicator in front, not a second kind of chip, so
- * `variant`, `color`, and `size` mean here exactly what they mean there. What
- * it adds is the dot and its pulse, which several surfaces had been writing
- * out by hand.
- *
- * It reports; it does not ask. A state that needs the user to do something is
- * `AgentAttention`.
- *
- * @example
- * ```tsx
- * <StatusPill busy color="destructive" size="sm">Live</StatusPill>
- * <StatusPill color="success" icon={<CheckIcon />}>Passed</StatusPill>
- * ```
- */
-declare function StatusPill({
-  busy,
-  className,
-  icon,
-  children,
-  ...props
-}: StatusPillProps): React.JSX.Element;
-//#endregion
-export { StatusPill, StatusPillProps };

package/dist/components/foundations/StatusPill.js

@@ -1,35 +0,0 @@
-import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { Badge } from "./Badge.js";
-import "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/foundations/StatusPill.tsx
-/**
-* A short state report: an indicator, then the state itself.
-*
-* This is a `Badge` with an indicator in front, not a second kind of chip, so
-* `variant`, `color`, and `size` mean here exactly what they mean there. What
-* it adds is the dot and its pulse, which several surfaces had been writing
-* out by hand.
-*
-* It reports; it does not ask. A state that needs the user to do something is
-* `AgentAttention`.
-*
-* @example
-* ```tsx
-* <StatusPill busy color="destructive" size="sm">Live</StatusPill>
-* <StatusPill color="success" icon={<CheckIcon />}>Passed</StatusPill>
-* ```
-*/
-function StatusPill({ busy = false, className, icon, children, ...props }) {
-	return /* @__PURE__ */ jsxs(Badge, {
-		className: cx("status-pill", className),
-		"data-busy": busy || void 0,
-		...props,
-		children: [icon ?? /* @__PURE__ */ jsx("span", {
-			"aria-hidden": "true",
-			className: "status-pill__dot"
-		}), children]
-	});
-}
-//#endregion
-export { StatusPill };

package/dist/components/general-purpose/Shell.d.ts

@@ -1,149 +0,0 @@
-import * as React from "react";
-
-//#region src/components/general-purpose/Shell.d.ts
-/**
- * Props for the Shell.Root component.
- */
-interface ShellRootProps extends React.HTMLAttributes<HTMLDivElement> {
-  /** Additional CSS class names */
-  className?: string;
-  /** The heading text displayed in the header */
-  heading?: string;
-}
-/**
- * Props for the Shell.ActionBar component.
- */
-interface ShellActionBarProps extends React.HTMLAttributes<HTMLDivElement> {
-  /** Additional CSS class names */
-  className?: string;
-}
-/**
- * Props for the Shell.Action component.
- */
-interface ShellActionProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  /** Additional CSS class names */
-  className?: string;
-  /** Icon to display */
-  icon?: React.ReactNode;
-  /** Whether this action is currently active */
-  active?: boolean;
-  /** Accessible label for the action */
-  label?: string;
-}
-/**
- * Props for the Shell.Panel component.
- */
-interface ShellPanelProps extends React.HTMLAttributes<HTMLDivElement> {
-  /** Additional CSS class names */
-  className?: string;
-  /** The panel heading */
-  heading?: string;
-  /** Whether the panel is visible */
-  open?: boolean;
-}
-/**
- * Props for the Shell.Content component.
- */
-interface ShellContentProps extends React.HTMLAttributes<HTMLDivElement> {
-  /** Additional CSS class names */
-  className?: string;
-}
-/**
- * Root container for the shell layout.
- * Provides a structured layout with optional header, action bar, panel, and content areas.
- */
-declare function ShellRoot({
-  className,
-  heading,
-  children,
-  ref,
-  ...props
-}: ShellRootProps & {
-  ref?: React.Ref<HTMLDivElement>;
-}): React.JSX.Element;
-/**
- * Container for action buttons that toggle panels.
- * Typically placed on the left side of the shell.
- */
-declare function ShellActionBar({
-  className,
-  children,
-  ref,
-  ...props
-}: ShellActionBarProps & {
-  ref?: React.Ref<HTMLDivElement>;
-}): React.JSX.Element;
-/**
- * An action button within the action bar.
- */
-declare function ShellAction({
-  className,
-  icon,
-  active,
-  label,
-  ref,
-  ...props
-}: ShellActionProps & {
-  ref?: React.Ref<HTMLButtonElement>;
-}): React.JSX.Element;
-/**
- * A collapsible panel that slides in from the side.
- */
-declare function ShellPanel({
-  className,
-  heading,
-  open,
-  children,
-  ref,
-  ...props
-}: ShellPanelProps & {
-  ref?: React.Ref<HTMLDivElement>;
-}): React.JSX.Element;
-/**
- * The main content area of the shell.
- */
-declare function ShellContent({
-  className,
-  children,
-  ref,
-  ...props
-}: ShellContentProps & {
-  ref?: React.Ref<HTMLDivElement>;
-}): React.JSX.Element;
-/**
- * A shell layout component with an icon action bar, a collapsible side panel,
- * and a content canvas. Useful for map applications and other interactive
- * tools where a full chat or sidebar chrome (see ResponsiveSidebarShell) is
- * too heavy.
- *
- * @example
- * ```tsx
- * const [filterOpen, setFilterOpen] = useState(false);
- *
- * <Shell.Root heading="My Map Application">
- *   <Shell.ActionBar>
- *     <Shell.Action
- *       icon={<FilterIcon />}
- *       active={filterOpen}
- *       onClick={() => setFilterOpen(!filterOpen)}
- *       label="Filter"
- *     />
- *   </Shell.ActionBar>
- *   <Shell.Panel heading="Filter" open={filterOpen}>
- *     <p>Filter controls here</p>
- *   </Shell.Panel>
- *   <Shell.Content>
- *     <div id="map" />
- *   </Shell.Content>
- * </Shell.Root>
- * ```
- */
-declare const Shell: {
-  Root: typeof ShellRoot;
-  ActionBar: typeof ShellActionBar;
-  Action: typeof ShellAction;
-  Panel: typeof ShellPanel;
-  Content: typeof ShellContent;
-};
-//#endregion
-export { Shell, ShellActionBarProps, ShellActionProps, ShellContentProps, ShellPanelProps, ShellRootProps };

package/dist/components/general-purpose/Shell.js

@@ -1,116 +0,0 @@
-import { t as cx } from "../../class-names-BiMDVpUo.js";
-import "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/general-purpose/Shell.tsx
-/**
-* Root container for the shell layout.
-* Provides a structured layout with optional header, action bar, panel, and content areas.
-*/
-function ShellRoot({ className, heading, children, ref, ...props }) {
-	return /* @__PURE__ */ jsxs("div", {
-		ref,
-		className: cx("shell", className),
-		...props,
-		children: [heading && /* @__PURE__ */ jsx("header", {
-			className: "shell__header",
-			children: /* @__PURE__ */ jsx("h3", {
-				className: "shell__heading",
-				children: heading
-			})
-		}), /* @__PURE__ */ jsx("div", {
-			className: "shell__body",
-			children
-		})]
-	});
-}
-/**
-* Container for action buttons that toggle panels.
-* Typically placed on the left side of the shell.
-*/
-function ShellActionBar({ className, children, ref, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		ref,
-		className: cx("shell__action-bar", className),
-		...props,
-		children
-	});
-}
-/**
-* An action button within the action bar.
-*/
-function ShellAction({ className, icon, active, label, ref, ...props }) {
-	return /* @__PURE__ */ jsx("button", {
-		ref,
-		className: cx("shell__action", active && "shell__action--active", className),
-		"aria-label": label,
-		"aria-pressed": active,
-		...props,
-		children: icon
-	});
-}
-/**
-* A collapsible panel that slides in from the side.
-*/
-function ShellPanel({ className, heading, open = false, children, ref, ...props }) {
-	return /* @__PURE__ */ jsxs("div", {
-		ref,
-		className: cx("shell__panel", open && "shell__panel--open", className),
-		hidden: !open,
-		...props,
-		children: [heading && /* @__PURE__ */ jsx("div", {
-			className: "shell__panel-heading",
-			children: heading
-		}), /* @__PURE__ */ jsx("div", {
-			className: "shell__panel-content",
-			children
-		})]
-	});
-}
-/**
-* The main content area of the shell.
-*/
-function ShellContent({ className, children, ref, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		ref,
-		className: cx("shell__content", className),
-		...props,
-		children
-	});
-}
-/**
-* A shell layout component with an icon action bar, a collapsible side panel,
-* and a content canvas. Useful for map applications and other interactive
-* tools where a full chat or sidebar chrome (see ResponsiveSidebarShell) is
-* too heavy.
-*
-* @example
-* ```tsx
-* const [filterOpen, setFilterOpen] = useState(false);
-*
-* <Shell.Root heading="My Map Application">
-*   <Shell.ActionBar>
-*     <Shell.Action
-*       icon={<FilterIcon />}
-*       active={filterOpen}
-*       onClick={() => setFilterOpen(!filterOpen)}
-*       label="Filter"
-*     />
-*   </Shell.ActionBar>
-*   <Shell.Panel heading="Filter" open={filterOpen}>
-*     <p>Filter controls here</p>
-*   </Shell.Panel>
-*   <Shell.Content>
-*     <div id="map" />
-*   </Shell.Content>
-* </Shell.Root>
-* ```
-*/
-const Shell = {
-	Root: ShellRoot,
-	ActionBar: ShellActionBar,
-	Action: ShellAction,
-	Panel: ShellPanel,
-	Content: ShellContent
-};
-//#endregion
-export { Shell };