@mcp-b/react-components 0.20.5 → 0.22.0

package/dist/components/Dialog.js

@@ -26,9 +26,17 @@ import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
 *
 * @see {@link https://base-ui.com/react/components/dialog | Base UI Dialog}
 */
-function DialogTrigger(props) {
+function DialogTrigger({ render, className, ...props }) {
+	const classes = mergeBaseClassName(render == null ? buttonVariants({
+		variant: "normal",
+		color: "primary",
+		size: "sm",
+		className: "dialog__trigger"
+	}) : "dialog__trigger", className);
 	return /* @__PURE__ */ jsx(Dialog$1.Trigger, {
 		"data-slot": "dialog-trigger",
+		render,
+		className: classes,
 		...props
 	});
 }

package/dist/components/EmptyState.d.ts

@@ -0,0 +1,46 @@
+import * as React from "react";
+
+//#region src/components/EmptyState.d.ts
+interface EmptyStateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+  /** Optional glyph above the title, in a quiet circular well. */
+  icon?: React.ReactNode;
+  /** What is absent, as a short noun phrase. */
+  title?: React.ReactNode;
+  /** One sentence on how to make it non-empty. */
+  description?: React.ReactNode;
+}
+/**
+ * Placeholder for a region that has nothing in it yet.
+ *
+ * There is no size prop. A one-line "No results" and a full centred block are
+ * the same component with different content — pass only `description` for the
+ * first and add `icon` and `title` for the second. Filling and centring a
+ * region is the container's job, not this component's; set
+ * `--sigvelo-recipe-empty-state-padding-block` where a roomier well is wanted.
+ *
+ * `children` replaces the whole stack, for the cases that need an action.
+ *
+ * @example
+ * ```tsx
+ * <EmptyState description="No runs yet." />
+ *
+ * <EmptyState
+ *   icon={<MessageIcon />}
+ *   title="Start a conversation"
+ *   description="Ask the agent to inspect, plan, or build."
+ * />
+ * ```
+ */
+declare function EmptyState({
+  className,
+  icon,
+  title,
+  description,
+  children,
+  ref,
+  ...props
+}: EmptyStateProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+//#endregion
+export { EmptyState, EmptyStateProps };

package/dist/components/EmptyState.js

@@ -0,0 +1,50 @@
+import { t as cx } from "../class-names-BiMDVpUo.js";
+import "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/EmptyState.tsx
+/**
+* Placeholder for a region that has nothing in it yet.
+*
+* There is no size prop. A one-line "No results" and a full centred block are
+* the same component with different content — pass only `description` for the
+* first and add `icon` and `title` for the second. Filling and centring a
+* region is the container's job, not this component's; set
+* `--sigvelo-recipe-empty-state-padding-block` where a roomier well is wanted.
+*
+* `children` replaces the whole stack, for the cases that need an action.
+*
+* @example
+* ```tsx
+* <EmptyState description="No runs yet." />
+*
+* <EmptyState
+*   icon={<MessageIcon />}
+*   title="Start a conversation"
+*   description="Ask the agent to inspect, plan, or build."
+* />
+* ```
+*/
+function EmptyState({ className, icon, title, description, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("empty-state", className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+			icon ? /* @__PURE__ */ jsx("span", {
+				className: "empty-state__icon",
+				"aria-hidden": "true",
+				children: icon
+			}) : null,
+			title ? /* @__PURE__ */ jsx("div", {
+				className: "empty-state__title",
+				children: title
+			}) : null,
+			description ? /* @__PURE__ */ jsx("div", {
+				className: "empty-state__description",
+				children: description
+			}) : null
+		] })
+	});
+}
+//#endregion
+export { EmptyState };

package/dist/components/EnvironmentVariables.d.ts

@@ -1,4 +1,4 @@
-import { t as CopyButtonProps } from "../copy-button-BrvQ7z4W.js";
+import { t as CopyButtonProps } from "../copy-button-EBv_B9F6.js";
 import * as React from "react";
 
 //#region src/components/EnvironmentVariables.d.ts

package/dist/components/EnvironmentVariables.js

@@ -1,6 +1,6 @@
 import { t as cx } from "../class-names-BiMDVpUo.js";
-import { b as EyeIcon, x as EyeOffIcon } from "../icons-DyOM0EJs.js";
-import { t as CopyButton } from "../copy-button-vo1paUSi.js";
+import { S as EyeOffIcon, x as EyeIcon } from "../icons-ua6f_GH3.js";
+import { t as CopyButton } from "../copy-button-TWq8nZhc.js";
 import { Badge } from "./Badge.js";
 import { Switch } from "./Switch.js";
 import * as React from "react";

package/dist/components/FileTree.js

@@ -1,2 +1,2 @@
-import { a as FileTreeIcon, i as FileTreeFolder, n as FileTreeActions, o as FileTreeName, r as FileTreeFile, t as FileTree } from "../FileTree-CdgfccsM.js";
+import { a as FileTreeIcon, i as FileTreeFolder, n as FileTreeActions, o as FileTreeName, r as FileTreeFile, t as FileTree } from "../FileTree-DW60q1w7.js";
 export { FileTree, FileTreeActions, FileTreeFile, FileTreeFolder, FileTreeIcon, FileTreeName };

package/dist/components/IconButton.d.ts

@@ -1,32 +1,2 @@
-import { i as ButtonSize, r as ButtonProps } from "../Button-yRInko9u.js";
-import * as React from "react";
-
-//#region src/components/IconButton.d.ts
-interface IconButtonProps extends Omit<ButtonProps, "aria-label" | "children" | "size"> {
-  /** Decorative icon rendered inside the square button. */
-  children: React.ReactNode;
-  /** Accessible name and default tooltip text for the icon-only control. */
-  label: string;
-  /** Tooltip content when it should differ from the accessible name. */
-  tooltip?: React.ReactNode;
-  /** Preferred side for the tooltip. */
-  tooltipSide?: "top" | "right" | "bottom" | "left";
-  /** Square button size. */
-  size?: ButtonSize;
-}
-/**
- * A square, icon-only button with a required accessible name and matching
- * tooltip. Use text buttons for actions whose consequence an icon cannot make
- * clear on its own.
- */
-declare function IconButton({
-  children,
-  label,
-  size,
-  tooltip,
-  tooltipSide,
-  type,
-  ...props
-}: IconButtonProps): React.JSX.Element;
-//#endregion
+import { n as IconButtonProps, t as IconButton } from "../IconButton-CFKhu6OR.js";
 export { IconButton, IconButtonProps };

package/dist/components/IconButton.js

@@ -8,9 +8,10 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * tooltip. Use text buttons for actions whose consequence an icon cannot make
 * clear on its own.
 */
-function IconButton({ children, label, size = "sm", tooltip = label, tooltipSide = "top", type = "button", ...props }) {
+function IconButton({ children, label, size = "sm", tooltip = label, tooltipSide = "top", type = "button", ref, ...props }) {
 	return /* @__PURE__ */ jsxs(Tooltip.Root, { children: [/* @__PURE__ */ jsx(Tooltip.Trigger, {
 		render: /* @__PURE__ */ jsx(Button, {
+			ref,
 			type,
 			size,
 			iconOnly: true,

package/dist/components/Kbd.d.ts

@@ -0,0 +1,32 @@
+import { useRender } from "@base-ui/react/use-render";
+
+//#region src/components/Kbd.d.ts
+type KbdRenderState = {
+  slot: "kbd";
+};
+interface KbdProps extends useRender.ComponentProps<"kbd", KbdRenderState> {}
+/**
+ * A keyboard key or chord, rendered as a quiet inline chip.
+ *
+ * The chip draws itself from `currentColor`, so it reads correctly on a page
+ * surface, inside a menu row, and on the inverted surface of a tooltip without
+ * a variant prop deciding which. Put one key per element; a chord is several
+ * elements with separators between them, so a screen reader announces the keys
+ * rather than the punctuation.
+ *
+ * @example
+ * ```tsx
+ * <Kbd>⏎</Kbd>
+ * <span>
+ *   <Kbd>⌘</Kbd> <Kbd>K</Kbd>
+ * </span>
+ * ```
+ */
+declare function Kbd({
+  className,
+  render,
+  ref,
+  ...props
+}: KbdProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion
+export { Kbd, KbdProps };

package/dist/components/Kbd.js

@@ -0,0 +1,34 @@
+import { t as cx } from "../class-names-BiMDVpUo.js";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/Kbd.tsx
+/**
+* A keyboard key or chord, rendered as a quiet inline chip.
+*
+* The chip draws itself from `currentColor`, so it reads correctly on a page
+* surface, inside a menu row, and on the inverted surface of a tooltip without
+* a variant prop deciding which. Put one key per element; a chord is several
+* elements with separators between them, so a screen reader announces the keys
+* rather than the punctuation.
+*
+* @example
+* ```tsx
+* <Kbd>⏎</Kbd>
+* <span>
+*   <Kbd>⌘</Kbd> <Kbd>K</Kbd>
+* </span>
+* ```
+*/
+function Kbd({ className, render, ref, ...props }) {
+	return useRender({
+		defaultTagName: "kbd",
+		render,
+		ref,
+		props: {
+			...props,
+			className: cx("kbd", className)
+		},
+		state: { slot: "kbd" }
+	});
+}
+//#endregion
+export { Kbd };

package/dist/components/McpConnectionRequest.d.ts

@@ -1,4 +1,4 @@
-import { McpServerCard } from "../utils/mcp-server-catalog.js";
+import { o as McpServerCard } from "../mcp-server-catalog-DycejaJ5.js";
 import * as React from "react";
 import { DynamicToolUIPart, ToolUIPart } from "ai";
 import { MCPServersState } from "agents";

package/dist/components/McpConnectionRequest.js

@@ -1,6 +1,6 @@
 import { t as cx } from "../class-names-BiMDVpUo.js";
-import { A as McpIcon, K as SpinnerIcon, Q as WarningIcon, u as CheckIcon } from "../icons-DyOM0EJs.js";
 import { Button } from "./Button.js";
+import { $ as WarningIcon, d as CheckIcon, j as McpIcon, q as SpinnerIcon } from "../icons-ua6f_GH3.js";
 import { AgentAttention, AgentAttentionActions, AgentAttentionBody, AgentAttentionHeader } from "./AgentAttention.js";
 import { getMcpServerEntry, getMcpServerRuntimeState } from "../utils/mcp-server-catalog.js";
 import { DescriptionList } from "./DescriptionList.js";

package/dist/components/McpPluginCatalog.d.ts

@@ -0,0 +1,86 @@
+import { o as McpServerCard } from "../mcp-server-catalog-DycejaJ5.js";
+import { l as DialogProps } from "../Dialog-BD8NBKaE.js";
+import * as React from "react";
+import { MCPServersState } from "agents";
+
+//#region src/components/McpPluginCatalog.d.ts
+/** Optional plugin-specific copy layered over the canonical MCP server card. */
+interface McpPluginDetails {
+  developerName?: string;
+  marketplaceName?: string;
+  longDescription?: string;
+  capabilities?: readonly string[];
+  skills?: readonly string[];
+}
+interface McpPluginCatalogProps extends Omit<React.HTMLAttributes<HTMLElement>, "onSelect"> {
+  /** Canonical connector cards. The directory does not create a second plugin registry. */
+  servers: readonly McpServerCard[];
+  /** Upstream Agents MCP state used to project connected and recovery states. */
+  mcp?: MCPServersState;
+  /** Optional plugin metadata keyed by the canonical server ID. */
+  detailsByServerId?: Readonly<Record<string, McpPluginDetails | undefined>>;
+  /** Server IDs promoted into the Featured section, in display order. */
+  featuredServerIds?: readonly string[];
+  /** Host product name paired with the plugin in the connection dialog. */
+  brandName?: string;
+  /** Host product mark paired with the plugin in the connection dialog. */
+  brandLogo?: React.ReactNode;
+  /** Product-authored trust and data-sharing copy. Pass null to omit it. */
+  disclosure?: React.ReactNode;
+  /** Starts or recovers the existing MCP connection path. */
+  onConnect?: (server: McpServerCard) => void | Promise<void>;
+  /** Removes the exact upstream MCP entry. */
+  onDisconnect?: (serverId: string) => void | Promise<void>;
+  heading?: React.ReactNode;
+  description?: React.ReactNode;
+  searchLabel?: string;
+  emptyMessage?: React.ReactNode;
+}
+interface McpPluginDetailsDialogProps {
+  /** Selected canonical server card. Passing null closes the dialog. */
+  server: McpServerCard | null;
+  details?: McpPluginDetails;
+  mcp?: MCPServersState;
+  brandName?: string;
+  brandLogo?: React.ReactNode;
+  disclosure?: React.ReactNode;
+  onConnect?: (server: McpServerCard) => void | Promise<void>;
+  onDisconnect?: (serverId: string) => void | Promise<void>;
+  onOpenChange: NonNullable<DialogProps["onOpenChange"]>;
+}
+/**
+ * Searchable plugin directory backed by the same MCP cards and live Agents
+ * state as {@link McpServerPicker}. Selecting a row opens the shared details
+ * dialog; connecting still delegates to the host's existing MCP/OAuth path.
+ */
+declare function McpPluginCatalog({
+  servers,
+  mcp,
+  detailsByServerId,
+  featuredServerIds,
+  brandName,
+  brandLogo,
+  disclosure,
+  onConnect,
+  onDisconnect,
+  heading,
+  description,
+  searchLabel,
+  emptyMessage,
+  className,
+  ...props
+}: McpPluginCatalogProps): React.JSX.Element;
+/** Reference-derived plugin detail surface without a parallel install state. */
+declare function McpPluginDetailsDialog({
+  server,
+  details,
+  mcp,
+  brandName,
+  brandLogo,
+  disclosure,
+  onConnect,
+  onDisconnect,
+  onOpenChange
+}: McpPluginDetailsDialogProps): React.JSX.Element;
+//#endregion
+export { McpPluginCatalog, McpPluginCatalogProps, McpPluginDetails, McpPluginDetailsDialog, McpPluginDetailsDialogProps };