@mcp-b/react-components 0.1.1 → 0.1.2

package/dist/components/Message.js

@@ -0,0 +1,245 @@
+import { n as ArrowLeftIcon, r as ArrowRightIcon } 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 * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cjk } from "@streamdown/cjk";
+import { code } from "@streamdown/code";
+import { math } from "@streamdown/math";
+import { mermaid } from "@streamdown/mermaid";
+import { Streamdown } from "streamdown";
+//#region src/components/Message.tsx
+/**
+* A chat message row. Aligns and styles itself based on {@link from}.
+* Adapted from Vercel AI Elements and restyled with Sigvelo CSS tokens.
+*
+* Compose with {@link MessageContent} for the bubble, {@link MessageActions}
+* for toolbar actions, and {@link MessageBranch} for multi-version responses.
+*
+* @example
+* ```tsx
+* <Message from="assistant">
+*   <MessageContent>Hello there!</MessageContent>
+*   <MessageActions>
+*     <MessageAction label="Copy" tooltip="Copy to clipboard">
+*       <CopyIcon />
+*     </MessageAction>
+*   </MessageActions>
+* </Message>
+* ```
+*
+* @see {@link https://elements.ai-sdk.dev/components/message | AI Elements Message}
+*/
+function Message({ className, from = "assistant", children, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("message", className),
+		"data-from": from,
+		...props,
+		children
+	});
+}
+/**
+* The visible bubble/body of a message. Styled differently based on the
+* parent {@link Message}'s `from` attribute.
+*/
+function MessageContent({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("message__content", className),
+		...props,
+		children
+	});
+}
+const streamdownPlugins = {
+	cjk,
+	code,
+	math,
+	mermaid
+};
+const MessageResponse = React.memo(function MessageResponse({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Streamdown, {
+		className: cx("message__response", className),
+		plugins: streamdownPlugins,
+		...props
+	});
+});
+/**
+* Horizontal list of action buttons (copy, retry, thumbs-up, etc.) shown
+* alongside or beneath a message.
+*/
+function MessageActions({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("message__actions", className),
+		role: "toolbar",
+		...props,
+		children
+	});
+}
+/**
+* A single icon button inside {@link MessageActions}. Always has an accessible
+* name; shows a tooltip on hover/focus when {@link tooltip} is set.
+*/
+function MessageAction({ className, label, tooltip, variant = "ghost", color = "neutral", size = "sm", children, ref, ...props }) {
+	const button = /* @__PURE__ */ jsx(Button, {
+		ref,
+		type: "button",
+		variant,
+		color,
+		size,
+		className: cx("message__action", className),
+		"aria-label": label ?? tooltip,
+		...props,
+		children
+	});
+	if (!tooltip) return button;
+	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: button }), /* @__PURE__ */ jsx(TooltipPortal, { children: /* @__PURE__ */ jsx(TooltipPositioner, {
+		sideOffset: 6,
+		children: /* @__PURE__ */ jsx(TooltipPopup, { children: tooltip })
+	}) })] });
+}
+/**
+* Horizontal container that places children in a row with space between —
+* typically a {@link MessageBranchSelector} on one side and
+* {@link MessageActions} on the other.
+*/
+function MessageToolbar({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("message__toolbar", className),
+		...props,
+		children
+	});
+}
+const MessageBranchContext = React.createContext(null);
+function useMessageBranch(component) {
+	const ctx = React.useContext(MessageBranchContext);
+	if (!ctx) throw new Error(`${component} must be used inside a <MessageBranch>.`);
+	return ctx;
+}
+/**
+* Container for a message response with multiple versions. Tracks which
+* branch is active and exposes navigation through {@link MessageBranchSelector},
+* {@link MessageBranchPrevious}, {@link MessageBranchNext}, and {@link MessageBranchPage}.
+*/
+function MessageBranch({ className, defaultBranch = 0, branch, onBranchChange, children, ref, ...props }) {
+	const [internalIndex, setInternalIndex] = React.useState(defaultBranch);
+	const [branchCount, setBranchCount] = React.useState(0);
+	const isControlled = branch !== void 0;
+	const branchIndex = isControlled ? branch : internalIndex;
+	const setBranchIndex = React.useCallback((next) => {
+		if (!isControlled) setInternalIndex(next);
+		onBranchChange?.(next);
+	}, [isControlled, onBranchChange]);
+	const ctx = React.useMemo(() => ({
+		branchIndex,
+		branchCount,
+		setBranchIndex,
+		registerCount: setBranchCount
+	}), [
+		branchCount,
+		branchIndex,
+		setBranchIndex
+	]);
+	return /* @__PURE__ */ jsx(MessageBranchContext.Provider, {
+		value: ctx,
+		children: /* @__PURE__ */ jsx("div", {
+			ref,
+			className: cx("message__branch", className),
+			...props,
+			children
+		})
+	});
+}
+/**
+* Renders only the active branch's child. Expects siblings to represent
+* alternative versions of the same response.
+*/
+function MessageBranchContent({ className, children, ref, ...props }) {
+	const { branchIndex, registerCount } = useMessageBranch("MessageBranchContent");
+	const items = React.Children.toArray(children);
+	React.useEffect(() => {
+		registerCount(items.length);
+	}, [items.length, registerCount]);
+	const safeIndex = items.length === 0 ? 0 : Math.min(Math.max(branchIndex, 0), items.length - 1);
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("message__branch-content", className),
+		...props,
+		children: items.map((item, index) => /* @__PURE__ */ jsx("div", {
+			className: "message__branch-panel",
+			hidden: index !== safeIndex,
+			children: item
+		}, React.isValidElement(item) && item.key != null ? item.key : index))
+	});
+}
+/**
+* Inline group containing branch navigation controls (previous / page /
+* next). Hidden automatically when there is only one branch.
+*/
+function MessageBranchSelector({ className, children, ref, ...props }) {
+	const { branchCount } = useMessageBranch("MessageBranchSelector");
+	if (branchCount <= 1) return null;
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("message__branch-selector", className),
+		...props,
+		children
+	});
+}
+/** Button that selects the previous branch. Disabled at the first branch. */
+function MessageBranchPrevious({ className, label = "Previous response", variant = "ghost", color = "neutral", size = "sm", children, onClick, ref, ...props }) {
+	const { branchIndex, branchCount, setBranchIndex } = useMessageBranch("MessageBranchPrevious");
+	return /* @__PURE__ */ jsx(Button, {
+		ref,
+		type: "button",
+		variant,
+		color,
+		size,
+		disabled: branchCount <= 1,
+		className: cx("message__branch-prev", className),
+		"aria-label": label,
+		onClick: (event) => {
+			onClick?.(event);
+			if (!event.defaultPrevented) setBranchIndex(branchIndex > 0 ? branchIndex - 1 : branchCount - 1);
+		},
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(ArrowLeftIcon, {})
+	});
+}
+/** Button that selects the next branch. Disabled at the last branch. */
+function MessageBranchNext({ className, label = "Next response", variant = "ghost", color = "neutral", size = "sm", children, onClick, ref, ...props }) {
+	const { branchIndex, branchCount, setBranchIndex } = useMessageBranch("MessageBranchNext");
+	return /* @__PURE__ */ jsx(Button, {
+		ref,
+		type: "button",
+		variant,
+		color,
+		size,
+		disabled: branchCount <= 1,
+		className: cx("message__branch-next", className),
+		"aria-label": label,
+		onClick: (event) => {
+			onClick?.(event);
+			if (!event.defaultPrevented) setBranchIndex(branchIndex < branchCount - 1 ? branchIndex + 1 : 0);
+		},
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(ArrowRightIcon, {})
+	});
+}
+/** Page indicator (e.g. "1 / 3") for the current branch selection. */
+function MessageBranchPage({ className, format, ref, ...props }) {
+	const { branchIndex, branchCount } = useMessageBranch("MessageBranchPage");
+	const label = format ? format(branchIndex + 1, branchCount) : `${branchIndex + 1} / ${branchCount}`;
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		className: cx("message__branch-page", className),
+		"aria-live": "polite",
+		...props,
+		children: label
+	});
+}
+//#endregion
+export { Message, MessageAction, MessageActions, MessageBranch, MessageBranchContent, MessageBranchNext, MessageBranchPage, MessageBranchPrevious, MessageBranchSelector, MessageContent, MessageResponse, MessageToolbar };

package/dist/components/Meter.d.ts

@@ -0,0 +1,151 @@
+import * as React from "react";
+import { Meter as Meter$1 } from "@base-ui/react/meter";
+
+//#region src/components/Meter.d.ts
+/**
+ * Props for the Meter.Root component.
+ */
+interface MeterRootProps extends Omit<React.ComponentPropsWithoutRef<typeof Meter$1.Root>, "className"> {
+  /** Additional CSS class names */
+  className?: string;
+}
+/**
+ * Props for the Meter.Track component.
+ */
+interface MeterTrackProps extends Omit<React.ComponentPropsWithoutRef<typeof Meter$1.Track>, "className"> {
+  /** Additional CSS class names */
+  className?: string;
+}
+/**
+ * Props for the Meter.Indicator component.
+ */
+interface MeterIndicatorProps extends Omit<React.ComponentPropsWithoutRef<typeof Meter$1.Indicator>, "className"> {
+  /** Additional CSS class names */
+  className?: string;
+}
+/**
+ * Props for the Meter.Label component.
+ */
+interface MeterLabelProps extends Omit<React.ComponentPropsWithoutRef<typeof Meter$1.Label>, "className"> {
+  /** Additional CSS class names */
+  className?: string;
+}
+/**
+ * Props for the Meter.Value component.
+ */
+interface MeterValueProps extends Omit<React.ComponentPropsWithoutRef<typeof Meter$1.Value>, "className"> {
+  /** Additional CSS class names */
+  className?: string;
+}
+/**
+ * Container that groups all meter parts. Renders a `<div>` element.
+ *
+ * @example
+ * ```tsx
+ * <Meter.Root value={75}>
+ *   <Meter.Label>Progress</Meter.Label>
+ *   <Meter.Value />
+ *   <Meter.Track>
+ *     <Meter.Indicator />
+ *   </Meter.Track>
+ * </Meter.Root>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/meter | Base UI Meter}
+ */
+declare function MeterRoot({
+  className,
+  ref,
+  ...props
+}: MeterRootProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+/**
+ * The track that contains the indicator. Represents the full range.
+ */
+declare function MeterTrack({
+  className,
+  ref,
+  ...props
+}: MeterTrackProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+/**
+ * The indicator that visualizes the current value.
+ */
+declare function MeterIndicator({
+  className,
+  ref,
+  ...props
+}: MeterIndicatorProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+/**
+ * Accessible label for the meter.
+ */
+declare function MeterLabel({
+  className,
+  ref,
+  ...props
+}: MeterLabelProps & {
+  ref?: React.Ref<HTMLSpanElement>;
+}): React.JSX.Element;
+/**
+ * Displays the current value as text.
+ */
+declare function MeterValue({
+  className,
+  ref,
+  ...props
+}: MeterValueProps & {
+  ref?: React.Ref<HTMLSpanElement>;
+}): React.JSX.Element;
+/**
+ * A graphical display of a numeric value within a range.
+ * Unlike Progress, Meter is for displaying a value, not task completion.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Meter.Root value={75}>
+ *   <Meter.Track>
+ *     <Meter.Indicator />
+ *   </Meter.Track>
+ * </Meter.Root>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With label and value display
+ * <Meter.Root value={24} max={100}>
+ *   <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+ *     <Meter.Label>Storage Used</Meter.Label>
+ *     <Meter.Value />
+ *   </div>
+ *   <Meter.Track>
+ *     <Meter.Indicator />
+ *   </Meter.Track>
+ * </Meter.Root>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With custom formatting
+ * <Meter.Root value={0.75} min={0} max={1} format={{ style: 'percent' }}>
+ *   <Meter.Track>
+ *     <Meter.Indicator />
+ *   </Meter.Track>
+ * </Meter.Root>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/meter | Base UI Meter}
+ */
+declare const Meter: {
+  Root: typeof MeterRoot;
+  Track: typeof MeterTrack;
+  Indicator: typeof MeterIndicator;
+  Label: typeof MeterLabel;
+  Value: typeof MeterValue;
+};
+//#endregion
+export { Meter, MeterIndicatorProps, MeterLabelProps, MeterRootProps, MeterTrackProps, MeterValueProps };

package/dist/components/Meter.js

@@ -0,0 +1,121 @@
+import "react";
+import { jsx } from "react/jsx-runtime";
+import { Meter as Meter$1 } from "@base-ui/react/meter";
+//#region src/components/Meter.tsx
+/**
+* Container that groups all meter parts. Renders a `<div>` element.
+*
+* @example
+* ```tsx
+* <Meter.Root value={75}>
+*   <Meter.Label>Progress</Meter.Label>
+*   <Meter.Value />
+*   <Meter.Track>
+*     <Meter.Indicator />
+*   </Meter.Track>
+* </Meter.Root>
+* ```
+*
+* @see {@link https://base-ui.com/react/components/meter | Base UI Meter}
+*/
+function MeterRoot({ className = "", ref, ...props }) {
+	const classes = ["meter", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Meter$1.Root, {
+		ref,
+		className: classes,
+		...props
+	});
+}
+/**
+* The track that contains the indicator. Represents the full range.
+*/
+function MeterTrack({ className = "", ref, ...props }) {
+	const classes = ["meter__track", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Meter$1.Track, {
+		ref,
+		className: classes,
+		...props
+	});
+}
+/**
+* The indicator that visualizes the current value.
+*/
+function MeterIndicator({ className = "", ref, ...props }) {
+	const classes = ["meter__indicator", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Meter$1.Indicator, {
+		ref,
+		className: classes,
+		...props
+	});
+}
+/**
+* Accessible label for the meter.
+*/
+function MeterLabel({ className = "", ref, ...props }) {
+	const classes = ["meter__label", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Meter$1.Label, {
+		ref,
+		className: classes,
+		...props
+	});
+}
+/**
+* Displays the current value as text.
+*/
+function MeterValue({ className = "", ref, ...props }) {
+	const classes = ["meter__value", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Meter$1.Value, {
+		ref,
+		className: classes,
+		...props
+	});
+}
+/**
+* A graphical display of a numeric value within a range.
+* Unlike Progress, Meter is for displaying a value, not task completion.
+*
+* @example
+* ```tsx
+* // Basic usage
+* <Meter.Root value={75}>
+*   <Meter.Track>
+*     <Meter.Indicator />
+*   </Meter.Track>
+* </Meter.Root>
+* ```
+*
+* @example
+* ```tsx
+* // With label and value display
+* <Meter.Root value={24} max={100}>
+*   <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+*     <Meter.Label>Storage Used</Meter.Label>
+*     <Meter.Value />
+*   </div>
+*   <Meter.Track>
+*     <Meter.Indicator />
+*   </Meter.Track>
+* </Meter.Root>
+* ```
+*
+* @example
+* ```tsx
+* // With custom formatting
+* <Meter.Root value={0.75} min={0} max={1} format={{ style: 'percent' }}>
+*   <Meter.Track>
+*     <Meter.Indicator />
+*   </Meter.Track>
+* </Meter.Root>
+* ```
+*
+* @see {@link https://base-ui.com/react/components/meter | Base UI Meter}
+*/
+const Meter = {
+	Root: MeterRoot,
+	Track: MeterTrack,
+	Indicator: MeterIndicator,
+	Label: MeterLabel,
+	Value: MeterValue
+};
+//#endregion
+export { Meter };