@mcp-b/react-components 0.1.1 → 0.1.3

package/dist/components/Context.js

@@ -0,0 +1,309 @@
+import { t as cx } from "../class-names-9UtZwb0J.js";
+import { Button } from "./Button.js";
+import { Popover } from "./Popover.js";
+import { Separator } from "./Separator.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Context.tsx
+const ContextContext = React.createContext(null);
+function useContextContext() {
+	const ctx = React.useContext(ContextContext);
+	if (!ctx) throw new Error("Context subcomponents must be used inside <Context>.");
+	return ctx;
+}
+/**
+* Displays token / context usage with a hover card breakdown. The trigger is
+* a button showing a compact percentage indicator; hovering or clicking opens
+* a popover with category rows and total cost.
+*
+* @example
+* ```tsx
+* <Context
+*   usedTokens={42_300}
+*   maxTokens={200_000}
+*   modelId="claude-opus-4-6"
+*   usage={{ input: 30000, output: 12300 }}
+*   totalCostUsd={0.42}
+* >
+*   <ContextTrigger />
+*   <ContextContent>
+*     <ContextContentHeader />
+*     <ContextContentBody />
+*     <ContextContentFooter />
+*   </ContextContent>
+* </Context>
+* ```
+*/
+function Context({ className, usedTokens, maxTokens, usage, modelId, totalCostUsd, open, defaultOpen, onOpenChange, children, ref, ...props }) {
+	const ctxValue = React.useMemo(() => ({
+		usedTokens,
+		maxTokens,
+		usage,
+		modelId,
+		totalCostUsd
+	}), [
+		usedTokens,
+		maxTokens,
+		usage,
+		modelId,
+		totalCostUsd
+	]);
+	return /* @__PURE__ */ jsx(ContextContext.Provider, {
+		value: ctxValue,
+		children: /* @__PURE__ */ jsx("div", {
+			ref,
+			className: cx("context", className),
+			...props,
+			children: /* @__PURE__ */ jsx(Popover.Root, {
+				open,
+				defaultOpen,
+				onOpenChange,
+				children
+			})
+		})
+	});
+}
+function ContextTrigger({ className, children, ...props }) {
+	const { usedTokens, maxTokens } = useContextContext();
+	const percent = maxTokens > 0 ? usedTokens / maxTokens * 100 : 0;
+	if (React.isValidElement(children)) return /* @__PURE__ */ jsx(Popover.Trigger, { render: children });
+	if (children) return /* @__PURE__ */ jsx(Popover.Trigger, { children });
+	return /* @__PURE__ */ jsx(Popover.Trigger, { render: /* @__PURE__ */ jsxs(Button, {
+		variant: "ghost",
+		color: "neutral",
+		size: "sm",
+		className: cx("context__trigger", className),
+		"aria-label": `Context usage: ${percent.toFixed(0)}%`,
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "context__trigger-ring",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx(ProgressRing, {
+				percent,
+				size: 16,
+				stroke: 2.5
+			})
+		}), /* @__PURE__ */ jsxs("span", {
+			className: "context__trigger-label",
+			children: [percent.toFixed(0), "%"]
+		})]
+	}) });
+}
+function ContextContent({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, { children: /* @__PURE__ */ jsx(Popover.Popup, {
+		className: cx("context__content", className),
+		...props,
+		children
+	}) }) });
+}
+function ContextContentHeader({ className, children, ref, ...props }) {
+	const { usedTokens, maxTokens, modelId } = useContextContext();
+	const percent = maxTokens > 0 ? usedTokens / maxTokens * 100 : 0;
+	if (children) return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("context__header", className),
+		...props,
+		children
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cx("context__header", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "context__ring",
+			"aria-hidden": "true",
+			children: [/* @__PURE__ */ jsx(ProgressRing, {
+				percent,
+				size: 48,
+				stroke: 6
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "context__ring-label",
+				children: [percent.toFixed(0), "%"]
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "context__header-text",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "context__header-title",
+					children: "Context usage"
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "context__header-meta",
+					children: [
+						usedTokens.toLocaleString(),
+						" / ",
+						maxTokens.toLocaleString(),
+						" tokens"
+					]
+				}),
+				modelId ? /* @__PURE__ */ jsx("div", {
+					className: "context__header-model",
+					children: modelId
+				}) : null
+			]
+		})]
+	});
+}
+function ContextContentBody({ className, children, ref, ...props }) {
+	const { usage } = useContextContext();
+	if (children) return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("context__body", className),
+		...props,
+		children
+	});
+	const rows = [];
+	const inputTokens = getUsageTokens(usage, "input");
+	const outputTokens = getUsageTokens(usage, "output");
+	const reasoningTokens = getUsageTokens(usage, "reasoning");
+	const cacheTokens = getUsageTokens(usage, "cache");
+	if (inputTokens !== void 0) rows.push({
+		label: "Input",
+		tokens: inputTokens
+	});
+	if (outputTokens !== void 0) rows.push({
+		label: "Output",
+		tokens: outputTokens
+	});
+	if (reasoningTokens !== void 0) rows.push({
+		label: "Reasoning",
+		tokens: reasoningTokens
+	});
+	if (cacheTokens !== void 0) rows.push({
+		label: "Cache",
+		tokens: cacheTokens
+	});
+	if (usage?.categories) rows.push(...usage.categories);
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cx("context__body", className),
+		...props,
+		children: [/* @__PURE__ */ jsx(Separator, {}), /* @__PURE__ */ jsx("ul", {
+			className: "context__rows",
+			children: rows.map((row) => /* @__PURE__ */ jsxs("li", {
+				className: "context__row",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "context__row-label",
+						children: row.label
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "context__row-value",
+						children: row.tokens.toLocaleString()
+					}),
+					row.costUsd !== void 0 ? /* @__PURE__ */ jsxs("span", {
+						className: "context__row-cost",
+						children: ["$", row.costUsd.toFixed(4)]
+					}) : null
+				]
+			}, row.label))
+		})]
+	});
+}
+function ContextContentFooter({ className, children, ref, ...props }) {
+	const { totalCostUsd } = useContextContext();
+	if (children) return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("context__footer", className),
+		...props,
+		children
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cx("context__footer", className),
+		...props,
+		children: [/* @__PURE__ */ jsx(Separator, {}), totalCostUsd !== void 0 ? /* @__PURE__ */ jsxs("div", {
+			className: "context__footer-row",
+			children: [/* @__PURE__ */ jsx("span", { children: "Total" }), /* @__PURE__ */ jsxs("span", {
+				className: "context__footer-cost",
+				children: ["$", totalCostUsd.toFixed(4)]
+			})]
+		}) : null]
+	});
+}
+function ContextInputUsage(props) {
+	return /* @__PURE__ */ jsx(ContextUsageRow, {
+		usageKey: "input",
+		defaultLabel: "Input",
+		...props
+	});
+}
+function ContextOutputUsage(props) {
+	return /* @__PURE__ */ jsx(ContextUsageRow, {
+		usageKey: "output",
+		defaultLabel: "Output",
+		...props
+	});
+}
+function ContextReasoningUsage(props) {
+	return /* @__PURE__ */ jsx(ContextUsageRow, {
+		usageKey: "reasoning",
+		defaultLabel: "Reasoning",
+		...props
+	});
+}
+function ContextCacheUsage(props) {
+	return /* @__PURE__ */ jsx(ContextUsageRow, {
+		usageKey: "cache",
+		defaultLabel: "Cache",
+		...props
+	});
+}
+function ContextUsageRow({ className, children, label, usageKey, defaultLabel, ref, ...props }) {
+	const { usage } = useContextContext();
+	const tokens = getUsageTokens(usage, usageKey) ?? 0;
+	if (children) return children;
+	if (!tokens) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cx("context__row", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "context__row-label",
+			children: label ?? defaultLabel
+		}), /* @__PURE__ */ jsx("span", {
+			className: "context__row-value",
+			children: tokens.toLocaleString()
+		})]
+	});
+}
+function getUsageTokens(usage, key) {
+	if (!usage) return void 0;
+	if (key === "input") return usage.input ?? usage.inputTokens;
+	if (key === "output") return usage.output ?? usage.outputTokens;
+	if (key === "reasoning") return usage.reasoning ?? usage.reasoningTokens;
+	return usage.cache ?? usage.cachedInputTokens;
+}
+function ProgressRing({ percent, size, stroke }) {
+	const radius = (size - stroke) / 2;
+	const circumference = 2 * Math.PI * radius;
+	const offset = circumference - Math.max(0, Math.min(100, percent)) / 100 * circumference;
+	return /* @__PURE__ */ jsxs("svg", {
+		width: size,
+		height: size,
+		viewBox: `0 0 ${size} ${size}`,
+		focusable: "false",
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ jsx("circle", {
+			cx: size / 2,
+			cy: size / 2,
+			r: radius,
+			fill: "none",
+			stroke: "var(--sigvelo-color-neutral-border-subtle)",
+			strokeWidth: stroke
+		}), /* @__PURE__ */ jsx("circle", {
+			cx: size / 2,
+			cy: size / 2,
+			r: radius,
+			fill: "none",
+			stroke: "var(--sigvelo-color-primary-bg)",
+			strokeWidth: stroke,
+			strokeDasharray: circumference,
+			strokeDashoffset: offset,
+			strokeLinecap: "round",
+			transform: `rotate(-90 ${size / 2} ${size / 2})`
+		})]
+	});
+}
+//#endregion
+export { Context, ContextCacheUsage, ContextContent, ContextContentBody, ContextContentFooter, ContextContentHeader, ContextInputUsage, ContextOutputUsage, ContextReasoningUsage, ContextTrigger };

package/dist/components/ContextMenu.d.ts

@@ -0,0 +1,282 @@
+import * as React from "react";
+import { ContextMenu as ContextMenu$1 } from "@base-ui/react/context-menu";
+
+//#region src/components/ContextMenu.d.ts
+/**
+ * Props for the ContextMenu.Root component.
+ */
+interface ContextMenuProps extends React.ComponentPropsWithoutRef<typeof ContextMenu$1.Root> {}
+/**
+ * Props for the ContextMenu.Trigger component.
+ */
+interface ContextMenuTriggerProps extends Omit<React.ComponentPropsWithoutRef<typeof ContextMenu$1.Trigger>, "className"> {
+  /** Additional CSS class names */
+  className?: string;
+}
+/**
+ * Props for the ContextMenu.Portal component.
+ */
+interface ContextMenuPortalProps extends React.ComponentPropsWithoutRef<typeof ContextMenu$1.Portal> {}
+/**
+ * Props for the ContextMenu.Positioner component.
+ */
+interface ContextMenuPositionerProps extends Omit<React.ComponentPropsWithoutRef<typeof ContextMenu$1.Positioner>, "className"> {
+  /** Additional CSS class names */
+  className?: string;
+}
+/**
+ * Props for the ContextMenu.Popup component.
+ */
+interface ContextMenuPopupProps extends Omit<React.ComponentPropsWithoutRef<typeof ContextMenu$1.Popup>, "className"> {
+  /** Additional CSS class names */
+  className?: string;
+}
+/**
+ * Props for the ContextMenu.Item component.
+ */
+interface ContextMenuItemProps extends Omit<React.ComponentPropsWithoutRef<typeof ContextMenu$1.Item>, "className"> {
+  /** Additional CSS class names */
+  className?: string;
+  inset?: boolean;
+  variant?: "default" | "destructive";
+}
+/**
+ * Props for the ContextMenu.Separator component.
+ */
+interface ContextMenuSeparatorProps extends Omit<React.ComponentPropsWithoutRef<typeof ContextMenu$1.Separator>, "className"> {
+  /** Additional CSS class names */
+  className?: string;
+}
+interface ContextMenuGroupProps extends Omit<React.ComponentPropsWithoutRef<typeof ContextMenu$1.Group>, "className"> {
+  className?: string;
+}
+interface ContextMenuLabelProps extends Omit<React.ComponentPropsWithoutRef<typeof ContextMenu$1.GroupLabel>, "className"> {
+  className?: string;
+  inset?: boolean;
+}
+interface ContextMenuCheckboxItemProps extends Omit<React.ComponentPropsWithoutRef<typeof ContextMenu$1.CheckboxItem>, "className"> {
+  className?: string;
+}
+interface ContextMenuRadioGroupProps extends Omit<React.ComponentPropsWithoutRef<typeof ContextMenu$1.RadioGroup>, "className"> {
+  className?: string;
+}
+interface ContextMenuRadioItemProps extends Omit<React.ComponentPropsWithoutRef<typeof ContextMenu$1.RadioItem>, "className"> {
+  className?: string;
+}
+interface ContextMenuShortcutProps extends React.HTMLAttributes<HTMLSpanElement> {}
+interface ContextMenuSubProps extends React.ComponentPropsWithoutRef<typeof ContextMenu$1.SubmenuRoot> {}
+interface ContextMenuSubTriggerProps extends Omit<React.ComponentPropsWithoutRef<typeof ContextMenu$1.SubmenuTrigger>, "className"> {
+  className?: string;
+  inset?: boolean;
+}
+type ContextMenuPlacementProps = Pick<ContextMenuPositionerProps, "anchor" | "positionMethod" | "side" | "sideOffset" | "align" | "alignOffset" | "collisionBoundary" | "collisionPadding" | "sticky" | "arrowPadding" | "disableAnchorTracking" | "collisionAvoidance">;
+type ContextMenuContentProps = ContextMenuPopupProps & ContextMenuPlacementProps;
+type ContextMenuSubContentProps = ContextMenuContentProps;
+/**
+ * Root component that manages context menu state.
+ *
+ * @example
+ * ```tsx
+ * <ContextMenu.Root>
+ *   <ContextMenu.Trigger>Right click here</ContextMenu.Trigger>
+ *   <ContextMenu.Portal>
+ *     <ContextMenu.Positioner>
+ *       <ContextMenu.Popup>
+ *         <ContextMenu.Item>Cut</ContextMenu.Item>
+ *         <ContextMenu.Item>Copy</ContextMenu.Item>
+ *         <ContextMenu.Item>Paste</ContextMenu.Item>
+ *       </ContextMenu.Popup>
+ *     </ContextMenu.Positioner>
+ *   </ContextMenu.Portal>
+ * </ContextMenu.Root>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/context-menu | Base UI ContextMenu}
+ */
+declare const ContextMenuRoot: (props: ContextMenuProps) => React.JSX.Element;
+/**
+ * Interactive area that activates the menu on right-click or long-press.
+ */
+declare function ContextMenuTrigger({
+  className,
+  ref,
+  ...props
+}: ContextMenuTriggerProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+/**
+ * Renders menu content in a portal.
+ */
+declare const ContextMenuPortal: (props: ContextMenuPortalProps) => React.JSX.Element;
+/**
+ * Positions the menu at the pointer location.
+ */
+declare function ContextMenuPositioner({
+  className,
+  ref,
+  ...props
+}: ContextMenuPositionerProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+/**
+ * Container for menu items.
+ */
+declare function ContextMenuPopup({
+  className,
+  ref,
+  ...props
+}: ContextMenuPopupProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function ContextMenuContent({
+  anchor,
+  positionMethod,
+  side,
+  sideOffset,
+  align,
+  alignOffset,
+  collisionBoundary,
+  collisionPadding,
+  sticky,
+  arrowPadding,
+  disableAnchorTracking,
+  collisionAvoidance,
+  ...props
+}: ContextMenuContentProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+/**
+ * Interactive menu item.
+ */
+declare function ContextMenuItem({
+  className,
+  inset,
+  variant,
+  ref,
+  ...props
+}: ContextMenuItemProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+/**
+ * Visual separator between menu sections.
+ */
+declare function ContextMenuSeparator({
+  className,
+  ref,
+  ...props
+}: ContextMenuSeparatorProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function ContextMenuGroup({
+  className,
+  ref,
+  ...props
+}: ContextMenuGroupProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function ContextMenuLabel({
+  className,
+  inset,
+  ref,
+  ...props
+}: ContextMenuLabelProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function ContextMenuCheckboxItem({
+  className,
+  children,
+  ref,
+  ...props
+}: ContextMenuCheckboxItemProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function ContextMenuRadioGroup({
+  className,
+  ref,
+  ...props
+}: ContextMenuRadioGroupProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function ContextMenuRadioItem({
+  className,
+  children,
+  ref,
+  ...props
+}: ContextMenuRadioItemProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function ContextMenuShortcut({
+  className,
+  ref,
+  ...props
+}: ContextMenuShortcutProps & {
+  ref?: React.Ref<HTMLSpanElement>;
+}): React.JSX.Element;
+declare function ContextMenuSub(props: ContextMenuSubProps): React.JSX.Element;
+declare function ContextMenuSubContent({
+  side,
+  align,
+  sideOffset,
+  ...props
+}: ContextMenuSubContentProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function ContextMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ref,
+  ...props
+}: ContextMenuSubTriggerProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+/**
+ * A context menu that appears at the pointer on right-click or long-press.
+ * Provides keyboard navigation and supports nested submenus.
+ *
+ * @example
+ * ```tsx
+ * // Basic context menu
+ * <ContextMenu.Root>
+ *   <ContextMenu.Trigger>
+ *     <div style={{ padding: '2rem', border: '1px dashed gray' }}>
+ *       Right-click here
+ *     </div>
+ *   </ContextMenu.Trigger>
+ *   <ContextMenu.Portal>
+ *     <ContextMenu.Positioner>
+ *       <ContextMenu.Popup>
+ *         <ContextMenu.Item onClick={() => console.log('Cut')}>Cut</ContextMenu.Item>
+ *         <ContextMenu.Item onClick={() => console.log('Copy')}>Copy</ContextMenu.Item>
+ *         <ContextMenu.Item onClick={() => console.log('Paste')}>Paste</ContextMenu.Item>
+ *         <ContextMenu.Separator />
+ *         <ContextMenu.Item onClick={() => console.log('Delete')}>Delete</ContextMenu.Item>
+ *       </ContextMenu.Popup>
+ *     </ContextMenu.Positioner>
+ *   </ContextMenu.Portal>
+ * </ContextMenu.Root>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/context-menu | Base UI ContextMenu}
+ */
+declare const ContextMenu: ((props: ContextMenuProps) => React.JSX.Element) & {
+  Root: (props: ContextMenuProps) => React.JSX.Element;
+  Trigger: typeof ContextMenuTrigger;
+  Portal: (props: ContextMenuPortalProps) => React.JSX.Element;
+  Positioner: typeof ContextMenuPositioner;
+  Popup: typeof ContextMenuPopup;
+  Content: typeof ContextMenuContent;
+  Item: typeof ContextMenuItem;
+  Separator: typeof ContextMenuSeparator;
+  Group: typeof ContextMenuGroup;
+  Label: typeof ContextMenuLabel;
+  CheckboxItem: typeof ContextMenuCheckboxItem;
+  RadioGroup: typeof ContextMenuRadioGroup;
+  RadioItem: typeof ContextMenuRadioItem;
+  Shortcut: typeof ContextMenuShortcut;
+  Sub: typeof ContextMenuSub;
+  SubContent: typeof ContextMenuSubContent;
+  SubTrigger: typeof ContextMenuSubTrigger;
+};
+//#endregion
+export { ContextMenu, ContextMenuCheckboxItem, ContextMenuCheckboxItemProps, ContextMenuContent, ContextMenuContentProps, ContextMenuGroup, ContextMenuGroupProps, ContextMenuItem, ContextMenuItemProps, ContextMenuLabel, ContextMenuLabelProps, ContextMenuPopup, ContextMenuPopupProps, ContextMenuPortal, ContextMenuPortalProps, ContextMenuPositioner, ContextMenuPositionerProps, ContextMenuProps, ContextMenuRadioGroup, ContextMenuRadioGroupProps, ContextMenuRadioItem, ContextMenuRadioItemProps, ContextMenuRoot, ContextMenuSeparator, ContextMenuSeparatorProps, ContextMenuShortcut, ContextMenuShortcutProps, ContextMenuSub, ContextMenuSubContent, ContextMenuSubContentProps, ContextMenuSubProps, ContextMenuSubTrigger, ContextMenuSubTriggerProps, ContextMenuTrigger, ContextMenuTriggerProps };