@mcp-b/react-components 0.1.1 → 0.1.3

package/dist/components/Commit.js

@@ -0,0 +1,282 @@
+import { c as ChevronRightIcon, l as CopyIcon, m as FileIcon, o as CheckIcon } 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 { Avatar } from "./Avatar.js";
+import { Badge } from "./Badge.js";
+import { CollapsiblePanel, CollapsibleRoot, CollapsibleTrigger } from "./Collapsible.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Commit.tsx
+const FILE_STATUS_COLOR = {
+	added: "success",
+	modified: "warning",
+	deleted: "destructive",
+	renamed: "primary"
+};
+const FILE_STATUS_LABEL = {
+	added: "A",
+	modified: "M",
+	deleted: "D",
+	renamed: "R"
+};
+/**
+* A collapsible git commit card. Compose CommitHeader with metadata
+* (CommitAuthor, CommitInfo, etc.) and CommitContent with a CommitFiles list.
+*
+* Built internally for git and agent review surfaces. Use it for commit
+* summaries with expandable file details. Do not use it as a generic
+* accordion; use Collapsible or Accordion directly.
+*
+* Styling consumes Sigvelo surface, border, spacing, radius, badge, and focus
+* tokens. Add shared metadata/file affordances here instead of forking commit
+* cards in apps.
+*
+* @example
+* ```tsx
+* <Commit defaultOpen>
+*   <CommitHeader>
+*     <CommitAuthor>
+*       <CommitAuthorAvatar initials="AN" />
+*       <CommitInfo>
+*         <CommitMessage>Improve Storybook docs</CommitMessage>
+*         <CommitMetadata>
+*           <CommitHash hash="abc1234" />
+*         </CommitMetadata>
+*       </CommitInfo>
+*     </CommitAuthor>
+*   </CommitHeader>
+*   <CommitContent>
+*     <CommitFiles>
+*       <CommitFile status="modified">
+*         <CommitFilePath>packages/react-components/src/Button.tsx</CommitFilePath>
+*       </CommitFile>
+*     </CommitFiles>
+*   </CommitContent>
+* </Commit>
+* ```
+*/
+function Commit({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx(CollapsibleRoot, {
+		ref,
+		className: cx("commit", className),
+		...props,
+		unstyled: true
+	});
+}
+function CommitHeader({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsxs(CollapsibleTrigger, {
+		ref,
+		className: cx("commit__header", className),
+		...props,
+		unstyled: true,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "commit__header-icon",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
+		}), /* @__PURE__ */ jsx("span", {
+			className: "commit__header-body",
+			children
+		})]
+	});
+}
+function CommitAuthor({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("commit__author", className),
+		...props,
+		children
+	});
+}
+function CommitAuthorAvatar({ className, initials, src, alt, ref, ...props }) {
+	return /* @__PURE__ */ jsxs(Avatar.Root, {
+		ref,
+		className: cx("commit__author-avatar", className),
+		...props,
+		children: [src ? /* @__PURE__ */ jsx(Avatar.Image, {
+			src,
+			alt: alt ?? initials
+		}) : null, /* @__PURE__ */ jsx(Avatar.Fallback, { children: initials })]
+	});
+}
+function CommitInfo({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("commit__info", className),
+		...props,
+		children
+	});
+}
+function CommitMessage({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		className: cx("commit__message", className),
+		...props,
+		children
+	});
+}
+function CommitMetadata({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("commit__metadata", className),
+		...props,
+		children
+	});
+}
+function CommitSeparator({ className, children = "•", ref, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		className: cx("commit__separator", className),
+		"aria-hidden": "true",
+		...props,
+		children
+	});
+}
+function CommitHash({ className, children, hash, ref, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		className: cx("commit__hash", className),
+		...props,
+		children: children ?? hash?.slice(0, 7)
+	});
+}
+function CommitCopyButton({ className, hash, label = "Copy hash", onClick, ...props }) {
+	const [copied, setCopied] = React.useState(false);
+	const handleClick = React.useCallback(async (e) => {
+		e.stopPropagation();
+		try {
+			await navigator.clipboard.writeText(hash);
+			setCopied(true);
+			window.setTimeout(() => setCopied(false), 1500);
+		} catch {}
+		onClick?.(e);
+	}, [hash, onClick]);
+	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx(Button, {
+		variant: "ghost",
+		size: "icon",
+		"aria-label": label,
+		className: cx("commit__copy", className),
+		...props,
+		onClick: handleClick,
+		children: copied ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx(CopyIcon, {})
+	}) }), /* @__PURE__ */ jsx(TooltipPortal, { children: /* @__PURE__ */ jsx(TooltipPositioner, { children: /* @__PURE__ */ jsx(TooltipPopup, { children: copied ? "Copied" : label }) }) })] });
+}
+function CommitTimestamp({ className, children, date, ref, ...props }) {
+	return /* @__PURE__ */ jsx("time", {
+		ref,
+		dateTime: date.toISOString(),
+		className: cx("commit__timestamp", className),
+		title: date.toLocaleString(),
+		...props,
+		children: children ?? formatRelative(date)
+	});
+}
+function CommitActions({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("commit__actions", className),
+		...props,
+		children
+	});
+}
+function CommitContent({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx(CollapsiblePanel, {
+		ref,
+		className: cx("commit__content", className),
+		...props,
+		unstyled: true,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "commit__content-inner",
+			children
+		})
+	});
+}
+function CommitFiles({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx("ul", {
+		ref,
+		className: cx("commit__files", className),
+		...props,
+		children
+	});
+}
+function CommitFile({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx("li", {
+		ref,
+		className: cx("commit__file", className),
+		...props,
+		children
+	});
+}
+function CommitFileStatus({ className, status, ref, ...props }) {
+	return /* @__PURE__ */ jsx(Badge, {
+		...props,
+		ref,
+		color: FILE_STATUS_COLOR[status],
+		size: "sm",
+		className: cx("commit__file-status", className),
+		"aria-label": status,
+		children: FILE_STATUS_LABEL[status]
+	});
+}
+function CommitFileIcon({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		className: cx("commit__file-icon", className),
+		"aria-hidden": "true",
+		...props,
+		children: /* @__PURE__ */ jsx(FileIcon, {})
+	});
+}
+function CommitFilePath({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		className: cx("commit__file-path", className),
+		...props,
+		children
+	});
+}
+const CommitFileInfo = CommitFilePath;
+function CommitFileAdditions({ className, count, ref, ...props }) {
+	if (count <= 0) return null;
+	return /* @__PURE__ */ jsxs("span", {
+		ref,
+		className: cx("commit__file-additions", className),
+		"aria-label": `${count} additions`,
+		...props,
+		children: ["+", count]
+	});
+}
+function CommitFileDeletions({ className, count, ref, ...props }) {
+	if (count <= 0) return null;
+	return /* @__PURE__ */ jsxs("span", {
+		ref,
+		className: cx("commit__file-deletions", className),
+		"aria-label": `${count} deletions`,
+		...props,
+		children: ["-", count]
+	});
+}
+function CommitFileChanges({ className, additions = 0, deletions = 0, ref, ...props }) {
+	return /* @__PURE__ */ jsxs("span", {
+		ref,
+		className: cx("commit__file-changes", className),
+		...props,
+		children: [/* @__PURE__ */ jsx(CommitFileAdditions, { count: additions }), /* @__PURE__ */ jsx(CommitFileDeletions, { count: deletions })]
+	});
+}
+function formatRelative(date) {
+	const diffMs = Date.now() - date.getTime();
+	const diffSec = Math.round(diffMs / 1e3);
+	if (diffSec < 60) return "just now";
+	const diffMin = Math.round(diffSec / 60);
+	if (diffMin < 60) return `${diffMin}m ago`;
+	const diffHr = Math.round(diffMin / 60);
+	if (diffHr < 24) return `${diffHr}h ago`;
+	const diffDay = Math.round(diffHr / 24);
+	if (diffDay < 30) return `${diffDay}d ago`;
+	const diffMo = Math.round(diffDay / 30);
+	if (diffMo < 12) return `${diffMo}mo ago`;
+	return `${Math.round(diffMo / 12)}y ago`;
+}
+//#endregion
+export { Commit, CommitActions, CommitAuthor, CommitAuthorAvatar, CommitContent, CommitCopyButton, CommitFile, CommitFileAdditions, CommitFileChanges, CommitFileDeletions, CommitFileIcon, CommitFileInfo, CommitFilePath, CommitFileStatus, CommitFiles, CommitHash, CommitHeader, CommitInfo, CommitMessage, CommitMetadata, CommitSeparator, CommitTimestamp };

package/dist/components/Context.d.ts

@@ -0,0 +1,129 @@
+import { r as ButtonProps } from "../Button-QCM8ZKgR.js";
+import { PopoverProps } from "./Popover.js";
+import * as React from "react";
+
+//#region src/components/Context.d.ts
+interface ContextUsageCategory {
+  label: string;
+  tokens: number;
+  costUsd?: number;
+}
+interface ContextUsage {
+  input?: number;
+  inputTokens?: number;
+  output?: number;
+  outputTokens?: number;
+  reasoning?: number;
+  reasoningTokens?: number;
+  cache?: number;
+  cachedInputTokens?: number;
+  categories?: ContextUsageCategory[];
+}
+interface ContextProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Tokens currently used. */
+  usedTokens: number;
+  /** Maximum context window size. */
+  maxTokens: number;
+  /** Optional usage breakdown. */
+  usage?: ContextUsage;
+  /** Optional model identifier shown in the header. */
+  modelId?: string;
+  /** Optional total cost in USD. */
+  totalCostUsd?: number;
+  open?: PopoverProps["open"];
+  defaultOpen?: PopoverProps["defaultOpen"];
+  onOpenChange?: PopoverProps["onOpenChange"];
+}
+/**
+ * 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>
+ * ```
+ */
+declare function Context({
+  className,
+  usedTokens,
+  maxTokens,
+  usage,
+  modelId,
+  totalCostUsd,
+  open,
+  defaultOpen,
+  onOpenChange,
+  children,
+  ref,
+  ...props
+}: ContextProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface ContextTriggerProps extends Omit<ButtonProps, "variant" | "color" | "className"> {
+  className?: string;
+}
+declare function ContextTrigger({
+  className,
+  children,
+  ...props
+}: ContextTriggerProps): React.JSX.Element;
+interface ContextContentProps extends React.HTMLAttributes<HTMLDivElement> {}
+declare function ContextContent({
+  className,
+  children,
+  ...props
+}: ContextContentProps): React.JSX.Element;
+interface ContextContentHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
+declare function ContextContentHeader({
+  className,
+  children,
+  ref,
+  ...props
+}: ContextContentHeaderProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface ContextContentBodyProps extends React.HTMLAttributes<HTMLDivElement> {}
+declare function ContextContentBody({
+  className,
+  children,
+  ref,
+  ...props
+}: ContextContentBodyProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface ContextContentFooterProps extends React.HTMLAttributes<HTMLDivElement> {}
+declare function ContextContentFooter({
+  className,
+  children,
+  ref,
+  ...props
+}: ContextContentFooterProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface ContextUsageRowProps extends React.HTMLAttributes<HTMLDivElement> {
+  label?: string;
+}
+type ContextInputUsageProps = ContextUsageRowProps;
+type ContextOutputUsageProps = ContextUsageRowProps;
+type ContextReasoningUsageProps = ContextUsageRowProps;
+type ContextCacheUsageProps = ContextUsageRowProps;
+declare function ContextInputUsage(props: ContextInputUsageProps): React.JSX.Element;
+declare function ContextOutputUsage(props: ContextOutputUsageProps): React.JSX.Element;
+declare function ContextReasoningUsage(props: ContextReasoningUsageProps): React.JSX.Element;
+declare function ContextCacheUsage(props: ContextCacheUsageProps): React.JSX.Element;
+//#endregion
+export { Context, ContextCacheUsage, ContextCacheUsageProps, ContextContent, ContextContentBody, ContextContentBodyProps, ContextContentFooter, ContextContentFooterProps, ContextContentHeader, ContextContentHeaderProps, ContextContentProps, ContextInputUsage, ContextInputUsageProps, ContextOutputUsage, ContextOutputUsageProps, ContextProps, ContextReasoningUsage, ContextReasoningUsageProps, ContextTrigger, ContextTriggerProps, ContextUsage, ContextUsageCategory, ContextUsageRowProps };