@mcp-b/react-components 0.1.1 → 0.1.3

package/dist/components/Toggle.d.ts

@@ -0,0 +1,69 @@
+import * as React from "react";
+import { Toggle as Toggle$1 } from "@base-ui/react/toggle";
+
+//#region src/components/Toggle.d.ts
+interface ToggleVariantsOptions {
+  variant?: "default" | "outline" | null;
+  size?: "default" | "sm" | "lg" | null;
+  className?: string;
+}
+/**
+ * Props for the Toggle component.
+ */
+interface ToggleProps extends Omit<React.ComponentPropsWithoutRef<typeof Toggle$1>, "className">, ToggleVariantsOptions {}
+declare function toggleVariants({
+  variant,
+  size,
+  className
+}?: ToggleVariantsOptions): string;
+/**
+ * A two-state button that can be on (pressed) or off.
+ * Useful for toggling a setting or mode.
+ *
+ * @example
+ * ```tsx
+ * // Basic toggle
+ * <Toggle>
+ *   Bold
+ * </Toggle>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Controlled toggle
+ * const [pressed, setPressed] = useState(false);
+ *
+ * <Toggle pressed={pressed} onPressedChange={setPressed}>
+ *   {pressed ? 'On' : 'Off'}
+ * </Toggle>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With icons
+ * <Toggle>
+ *   {({ pressed }) => pressed ? <BoldIcon filled /> : <BoldIcon />}
+ * </Toggle>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Default pressed state
+ * <Toggle defaultPressed>
+ *   Enabled
+ * </Toggle>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/toggle | Base UI Toggle}
+ */
+declare function Toggle({
+  className,
+  variant,
+  size,
+  ref,
+  ...props
+}: ToggleProps & {
+  ref?: React.Ref<HTMLButtonElement>;
+}): React.JSX.Element;
+//#endregion
+export { Toggle, ToggleProps, ToggleVariantsOptions, toggleVariants };

package/dist/components/Toggle.js

@@ -0,0 +1,66 @@
+import "react";
+import { jsx } from "react/jsx-runtime";
+import { Toggle as Toggle$1 } from "@base-ui/react/toggle";
+//#region src/components/Toggle.tsx
+function toggleVariants({ variant = "default", size = "default", className } = {}) {
+	return [
+		"toggle",
+		variant === "outline" && "toggle--outline",
+		size !== "default" && `toggle--${size}`,
+		className
+	].filter(Boolean).join(" ");
+}
+/**
+* A two-state button that can be on (pressed) or off.
+* Useful for toggling a setting or mode.
+*
+* @example
+* ```tsx
+* // Basic toggle
+* <Toggle>
+*   Bold
+* </Toggle>
+* ```
+*
+* @example
+* ```tsx
+* // Controlled toggle
+* const [pressed, setPressed] = useState(false);
+*
+* <Toggle pressed={pressed} onPressedChange={setPressed}>
+*   {pressed ? 'On' : 'Off'}
+* </Toggle>
+* ```
+*
+* @example
+* ```tsx
+* // With icons
+* <Toggle>
+*   {({ pressed }) => pressed ? <BoldIcon filled /> : <BoldIcon />}
+* </Toggle>
+* ```
+*
+* @example
+* ```tsx
+* // Default pressed state
+* <Toggle defaultPressed>
+*   Enabled
+* </Toggle>
+* ```
+*
+* @see {@link https://base-ui.com/react/components/toggle | Base UI Toggle}
+*/
+function Toggle({ className = "", variant, size, ref, ...props }) {
+	return /* @__PURE__ */ jsx(Toggle$1, {
+		ref,
+		"data-slot": "toggle",
+		className: toggleVariants({
+			variant,
+			size,
+			className
+		}),
+		...props
+	});
+}
+//#endregion
+export { Toggle, toggleVariants };

package/dist/components/ToggleGroup.d.ts

@@ -0,0 +1,69 @@
+import { ToggleVariantsOptions } from "./Toggle.js";
+import * as React from "react";
+import { ToggleGroup as ToggleGroup$1 } from "@base-ui/react/toggle-group";
+import { Toggle } from "@base-ui/react/toggle";
+
+//#region src/components/ToggleGroup.d.ts
+type ToggleGroupSize = ToggleVariantsOptions["size"] | "md";
+interface ToggleGroupProps extends Omit<React.ComponentPropsWithRef<typeof ToggleGroup$1>, "className"> {
+  className?: string;
+  variant?: ToggleVariantsOptions["variant"];
+  /**
+   * The size of the toggle group.
+   * @default 'md'
+   */
+  size?: ToggleGroupSize;
+  spacing?: number;
+}
+interface ToggleGroupItemProps extends Omit<React.ComponentPropsWithRef<typeof Toggle>, "className">, ToggleVariantsOptions {}
+/**
+ * A toggle group component for selecting one or multiple options.
+ *
+ * @example
+ * ```tsx
+ * // Single selection (defaultValue is an array)
+ * <ToggleGroup defaultValue={["center"]}>
+ *   <ToggleGroupItem value="left">Left</ToggleGroupItem>
+ *   <ToggleGroupItem value="center">Center</ToggleGroupItem>
+ *   <ToggleGroupItem value="right">Right</ToggleGroupItem>
+ * </ToggleGroup>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Multiple selection
+ * <ToggleGroup multiple defaultValue={["bold", "italic"]}>
+ *   <ToggleGroupItem value="bold">Bold</ToggleGroupItem>
+ *   <ToggleGroupItem value="italic">Italic</ToggleGroupItem>
+ *   <ToggleGroupItem value="underline">Underline</ToggleGroupItem>
+ * </ToggleGroup>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/toggle-group | Base UI Toggle Group}
+ */
+declare function ToggleGroup({
+  size,
+  spacing,
+  variant,
+  className,
+  children,
+  style,
+  ref,
+  ...props
+}: ToggleGroupProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+/**
+ * A single toggle item within a ToggleGroup.
+ */
+declare function ToggleGroupItem({
+  className,
+  variant,
+  size,
+  ref,
+  ...props
+}: ToggleGroupItemProps & {
+  ref?: React.Ref<HTMLButtonElement>;
+}): React.JSX.Element;
+//#endregion
+export { ToggleGroup, ToggleGroupItem, ToggleGroupItemProps, ToggleGroupProps };

package/dist/components/ToggleGroup.js

@@ -0,0 +1,99 @@
+import { toggleVariants } from "./Toggle.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { ToggleGroup as ToggleGroup$1 } from "@base-ui/react/toggle-group";
+import { Toggle } from "@base-ui/react/toggle";
+//#region src/components/ToggleGroup.tsx
+const ToggleGroupContext = React.createContext({
+	variant: "default",
+	size: "default",
+	spacing: 0
+});
+function normalizeSize(size) {
+	return size === "md" ? "default" : size;
+}
+/**
+* A toggle group component for selecting one or multiple options.
+*
+* @example
+* ```tsx
+* // Single selection (defaultValue is an array)
+* <ToggleGroup defaultValue={["center"]}>
+*   <ToggleGroupItem value="left">Left</ToggleGroupItem>
+*   <ToggleGroupItem value="center">Center</ToggleGroupItem>
+*   <ToggleGroupItem value="right">Right</ToggleGroupItem>
+* </ToggleGroup>
+* ```
+*
+* @example
+* ```tsx
+* // Multiple selection
+* <ToggleGroup multiple defaultValue={["bold", "italic"]}>
+*   <ToggleGroupItem value="bold">Bold</ToggleGroupItem>
+*   <ToggleGroupItem value="italic">Italic</ToggleGroupItem>
+*   <ToggleGroupItem value="underline">Underline</ToggleGroupItem>
+* </ToggleGroup>
+* ```
+*
+* @see {@link https://base-ui.com/react/components/toggle-group | Base UI Toggle Group}
+*/
+function ToggleGroup({ size = "md", spacing = 0, variant = "default", className = "", children, style, ref, ...props }) {
+	const normalizedSize = normalizeSize(size);
+	const gap = `${spacing * .25}rem`;
+	const groupStyle = typeof style === "function" ? (state) => ({
+		...style(state),
+		gap
+	}) : {
+		...style,
+		gap
+	};
+	return /* @__PURE__ */ jsx(ToggleGroup$1, {
+		ref,
+		"data-size": normalizedSize,
+		"data-slot": "toggle-group",
+		"data-spacing": spacing,
+		"data-variant": variant,
+		className: [
+			"toggle-group",
+			size !== "md" && `toggle-group--${size}`,
+			className
+		].filter(Boolean).join(" "),
+		style: groupStyle,
+		...props,
+		children: /* @__PURE__ */ jsx(ToggleGroupContext.Provider, {
+			value: {
+				variant,
+				size: normalizedSize,
+				spacing
+			},
+			children
+		})
+	});
+}
+/**
+* A single toggle item within a ToggleGroup.
+*/
+function ToggleGroupItem({ className = "", variant, size, ref, ...props }) {
+	const context = React.useContext(ToggleGroupContext);
+	const itemVariant = variant ?? context.variant;
+	const itemSize = size ?? context.size;
+	const classes = [
+		"toggle-group__item",
+		toggleVariants({
+			variant: itemVariant,
+			size: itemSize
+		}),
+		className
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Toggle, {
+		ref,
+		"data-size": itemSize,
+		"data-slot": "toggle-group-item",
+		"data-spacing": context.spacing,
+		"data-variant": itemVariant,
+		className: classes,
+		...props
+	});
+}
+//#endregion
+export { ToggleGroup, ToggleGroupItem };

package/dist/components/Tool.d.ts

@@ -0,0 +1,119 @@
+import { CollapsiblePanelProps, CollapsibleRootProps, CollapsibleTriggerProps } from "./Collapsible.js";
+import * as React from "react";
+
+//#region src/components/Tool.d.ts
+type ToolState = "input-streaming" | "input-available" | "approval-requested" | "approval-responded" | "output-available" | "output-error" | "output-denied";
+interface ToolPart {
+  state: ToolState;
+  input?: unknown;
+  output?: unknown;
+  errorText?: string;
+}
+declare function getStatusBadge(status: ToolState): React.JSX.Element;
+interface ToolProps extends Omit<CollapsibleRootProps, "className" | "unstyled"> {
+  className?: string;
+  /** Current state of the tool invocation. */
+  state?: ToolState;
+}
+/**
+ * Displays a collapsible tool invocation (name, input, output, state).
+ * The state drives the status badge color and default open behavior —
+ * `output-available`, `output-error`, and `output-denied` auto-open.
+ * Adapted from Vercel AI Elements and restyled with Sigvelo CSS tokens.
+ *
+ * @example
+ * ```tsx
+ * <Tool state="output-available">
+ *   <ToolHeader type="function" toolName="search_web" />
+ *   <ToolContent>
+ *     <ToolInput input={{ query: "weather in Tokyo" }} />
+ *     <ToolOutput output={<pre>{JSON.stringify(result, null, 2)}</pre>} />
+ *   </ToolContent>
+ * </Tool>
+ * ```
+ *
+ * @see {@link https://elements.ai-sdk.dev/components/tool | AI Elements Tool}
+ */
+declare function Tool({
+  className,
+  state,
+  defaultOpen,
+  ref,
+  ...props
+}: ToolProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface ToolHeaderProps extends Omit<CollapsibleTriggerProps, "className" | "type" | "unstyled"> {
+  className?: string;
+  /** The tool "type" (e.g. "function", "retrieval"). */
+  type: string;
+  /** The specific tool invoked (e.g. "search_web"). */
+  toolName?: string;
+  /** Optional human-readable title shown alongside the tool name. */
+  title?: string;
+  /** Current state of the tool invocation. Matches Vercel AI Elements. */
+  state?: ToolState;
+}
+/**
+ * Clickable header that shows the tool type, name, and state badge.
+ */
+declare function ToolHeader({
+  className,
+  type,
+  toolName,
+  title,
+  state: stateProp,
+  ref,
+  ...props
+}: ToolHeaderProps & {
+  ref?: React.Ref<HTMLButtonElement>;
+}): React.JSX.Element;
+interface ToolContentProps extends Omit<CollapsiblePanelProps, "className" | "unstyled"> {
+  className?: string;
+}
+/**
+ * Collapsible panel holding ToolInput and ToolOutput.
+ */
+declare function ToolContent({
+  className,
+  children,
+  ref,
+  ...props
+}: ToolContentProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface ToolInputProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** The input passed to the tool (rendered as a JSON code block). */
+  input: unknown;
+}
+/**
+ * Displays the tool input as a JSON code block.
+ */
+declare function ToolInput({
+  className,
+  input,
+  ref,
+  ...props
+}: ToolInputProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface ToolOutputProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** The tool output (any React node). Mutually exclusive with errorText. */
+  output?: unknown;
+  /** Error message, rendered with destructive styling. */
+  errorText?: string;
+}
+/**
+ * Displays the tool output or error text.
+ */
+declare function ToolOutput({
+  className,
+  output,
+  errorText,
+  ref,
+  ...props
+}: ToolOutputProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element | null;
+//#endregion
+export { Tool, ToolContent, ToolContentProps, ToolHeader, ToolHeaderProps, ToolInput, ToolInputProps, ToolOutput, ToolOutputProps, ToolPart, ToolProps, ToolState, getStatusBadge };

package/dist/components/Tool.js

@@ -0,0 +1,192 @@
+import { C as SpinnerIcon, D as WrenchIcon, E as WarningIcon, O as XIcon, c as ChevronRightIcon, o as CheckIcon, u as DotIcon } from "../icons-BsWc8g4E.js";
+import { t as cx } from "../class-names-9UtZwb0J.js";
+import { i as CodeBlockContent, r as CodeBlockContainer, t as CodeBlock } from "../CodeBlock-CttHhWcb.js";
+import { Badge } from "./Badge.js";
+import { CollapsiblePanel, CollapsibleRoot, CollapsibleTrigger } from "./Collapsible.js";
+import { formatStructuredCodeDisplay } from "../utils/structured-code.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Tool.tsx
+const STATE_TO_COLOR = {
+	"input-streaming": "primary",
+	"input-available": "neutral",
+	"approval-requested": "warning",
+	"approval-responded": "neutral",
+	"output-available": "success",
+	"output-error": "destructive",
+	"output-denied": "destructive"
+};
+const STATE_LABEL = {
+	"input-streaming": "Pending",
+	"input-available": "Running",
+	"approval-requested": "Awaiting Approval",
+	"approval-responded": "Responded",
+	"output-available": "Completed",
+	"output-error": "Error",
+	"output-denied": "Denied"
+};
+const STATE_ICON = {
+	"input-streaming": /* @__PURE__ */ jsx(DotIcon, {}),
+	"input-available": /* @__PURE__ */ jsx(SpinnerIcon, { className: "tool__status-spinner" }),
+	"approval-requested": /* @__PURE__ */ jsx(WarningIcon, {}),
+	"approval-responded": /* @__PURE__ */ jsx(CheckIcon, {}),
+	"output-available": /* @__PURE__ */ jsx(CheckIcon, {}),
+	"output-error": /* @__PURE__ */ jsx(XIcon, {}),
+	"output-denied": /* @__PURE__ */ jsx(XIcon, {})
+};
+function getStatusBadge(status) {
+	return /* @__PURE__ */ jsxs(Badge, {
+		color: STATE_TO_COLOR[status],
+		size: "sm",
+		className: "tool__header-badge",
+		children: [STATE_ICON[status], STATE_LABEL[status]]
+	});
+}
+const ToolContext = React.createContext(null);
+function useToolContext() {
+	const ctx = React.useContext(ToolContext);
+	if (!ctx) throw new Error("Tool subcomponents must be used inside <Tool>.");
+	return ctx;
+}
+/**
+* Displays a collapsible tool invocation (name, input, output, state).
+* The state drives the status badge color and default open behavior —
+* `output-available`, `output-error`, and `output-denied` auto-open.
+* Adapted from Vercel AI Elements and restyled with Sigvelo CSS tokens.
+*
+* @example
+* ```tsx
+* <Tool state="output-available">
+*   <ToolHeader type="function" toolName="search_web" />
+*   <ToolContent>
+*     <ToolInput input={{ query: "weather in Tokyo" }} />
+*     <ToolOutput output={<pre>{JSON.stringify(result, null, 2)}</pre>} />
+*   </ToolContent>
+* </Tool>
+* ```
+*
+* @see {@link https://elements.ai-sdk.dev/components/tool | AI Elements Tool}
+*/
+function Tool({ className, state, defaultOpen, ref, ...props }) {
+	const autoOpen = state === "output-available" || state === "output-error" || state === "output-denied";
+	const ctx = React.useMemo(() => ({ state }), [state]);
+	return /* @__PURE__ */ jsx(ToolContext.Provider, {
+		value: ctx,
+		children: /* @__PURE__ */ jsx(CollapsibleRoot, {
+			ref,
+			className: cx("tool", className),
+			defaultOpen: defaultOpen ?? autoOpen,
+			"data-state": state ?? void 0,
+			...props,
+			unstyled: true
+		})
+	});
+}
+/**
+* Clickable header that shows the tool type, name, and state badge.
+*/
+function ToolHeader({ className, type, toolName, title, state: stateProp, ref, ...props }) {
+	const { state: contextState } = useToolContext();
+	const state = stateProp ?? contextState ?? "input-available";
+	const derivedName = type === "dynamic-tool" && toolName ? toolName : type.startsWith("tool-") ? type.split("-").slice(1).join("-") : toolName ?? type;
+	return /* @__PURE__ */ jsxs(CollapsibleTrigger, {
+		ref,
+		className: cx("tool__header", className),
+		...props,
+		unstyled: true,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "tool__header-tool-icon",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ jsx(WrenchIcon, {})
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "tool__header-type",
+				children: type
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "tool__header-name",
+				children: title ?? derivedName
+			}),
+			/* @__PURE__ */ jsx("span", { className: "tool__header-spacer" }),
+			getStatusBadge(state),
+			/* @__PURE__ */ jsx("span", {
+				className: "tool__header-icon",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
+			})
+		]
+	});
+}
+/**
+* Collapsible panel holding ToolInput and ToolOutput.
+*/
+function ToolContent({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx(CollapsiblePanel, {
+		ref,
+		className: cx("tool__content", className),
+		...props,
+		unstyled: true,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "tool__content-inner",
+			children
+		})
+	});
+}
+/**
+* Displays the tool input as a JSON code block.
+*/
+function ToolInput({ className, input, ref, ...props }) {
+	const { state } = useToolContext();
+	const formattedInput = React.useMemo(() => formatStructuredCodeDisplay(input), [input]);
+	const isStreaming = state === "input-streaming";
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cx("tool__section", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "tool__section-label",
+			children: "Input"
+		}), /* @__PURE__ */ jsx(CodeBlock, {
+			code: formattedInput.code,
+			language: formattedInput.language,
+			className: "tool__code-block",
+			isStreaming,
+			children: /* @__PURE__ */ jsx(CodeBlockContainer, { children: /* @__PURE__ */ jsx(CodeBlockContent, {}) })
+		})]
+	});
+}
+/**
+* Displays the tool output or error text.
+*/
+function ToolOutput({ className, output, errorText, ref, ...props }) {
+	const formattedOutput = React.useMemo(() => {
+		if (output && typeof output === "object" && !React.isValidElement(output)) return formatStructuredCodeDisplay(output);
+		if (typeof output === "string") return {
+			code: output,
+			language: "json"
+		};
+		return null;
+	}, [output]);
+	const isError = errorText !== void 0;
+	if (!(output || errorText)) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cx("tool__section", isError && "tool__section--error", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "tool__section-label",
+			children: isError ? "Error" : "Output"
+		}), isError ? /* @__PURE__ */ jsx("div", {
+			className: "tool__error-text",
+			children: errorText
+		}) : formattedOutput ? /* @__PURE__ */ jsx(CodeBlock, {
+			code: formattedOutput.code,
+			language: formattedOutput.language,
+			className: "tool__code-block",
+			children: /* @__PURE__ */ jsx(CodeBlockContainer, { children: /* @__PURE__ */ jsx(CodeBlockContent, {}) })
+		}) : /* @__PURE__ */ jsx("div", { children: output })]
+	});
+}
+//#endregion
+export { Tool, ToolContent, ToolHeader, ToolInput, ToolOutput, getStatusBadge };