@mcp-b/react-components 0.40.0 → 0.42.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcp-b/react-components",
-  "version": "0.40.0",
+  "version": "0.42.0",
   "description": "MCP-B React components built on Base UI and shared design tokens, including Cloudflare Think chat primitives.",
   "homepage": "https://design-system.sigvelo.com",
   "bugs": {
@@ -39,52 +39,52 @@
   },
   "dependencies": {
     "@base-ui/react": "~1.6.0",
-    "@rrweb/replay": "^2.1.0",
+    "@rrweb/replay": "^2.1.1",
     "@shadcn/react": "^0.2.1",
     "@streamdown/cjk": "^1.0.3",
     "@streamdown/code": "^1.1.1",
-    "@tanstack/react-virtual": "^3.14.8",
-    "agent-skills-ts-sdk": "^2.4.1",
+    "@tanstack/react-virtual": "^3.14.9",
+    "agent-skills-ts-sdk": "^2.4.2",
     "anser": "^2.3.5",
-    "lucide-react": "^1.24.0",
+    "lucide-react": "^1.31.0",
     "react-icons": "^5.7.0",
     "rehype-slug": "^6.0.0",
-    "shiki": "^4.3.1",
+    "shiki": "^3.23.0",
     "streamdown": "^2.5.0",
     "unist-util-visit": "^5.1.0",
-    "yet-another-react-lightbox": "^3.32.1",
-    "@mcp-b/design-tokens": "0.40.0"
+    "yet-another-react-lightbox": "^3.32.2",
+    "@mcp-b/design-tokens": "0.42.0"
   },
   "devDependencies": {
-    "@ai-sdk/react": "^3.0.230",
-    "@cloudflare/codemode": "^0.5.0",
+    "@ai-sdk/react": "^3.0.249",
+    "@cloudflare/codemode": "^0.5.1",
     "@cloudflare/shell": "^0.4.3",
-    "@cloudflare/think": "^0.15.0",
-    "@cloudflare/voice": "^0.3.4",
-    "@cloudflare/workers-types": "^5.20260715.1",
-    "@storybook/addon-a11y": "^10.5.2",
-    "@storybook/addon-docs": "^10.5.2",
-    "@storybook/addon-vitest": "^10.5.2",
-    "@storybook/tanstack-react": "^10.5.2",
-    "@tanstack/react-form": "^1.33.2",
-    "@tanstack/react-query": "^5.101.2",
-    "@tanstack/react-router": "^1.170.18",
+    "@cloudflare/think": "^0.15.1",
+    "@cloudflare/voice": "^0.3.5",
+    "@cloudflare/workers-types": "^5.20260811.1",
+    "@storybook/addon-a11y": "^10.5.7",
+    "@storybook/addon-docs": "^10.5.7",
+    "@storybook/addon-vitest": "^10.5.7",
+    "@storybook/tanstack-react": "^10.5.7",
+    "@tanstack/react-form": "^1.33.4",
+    "@tanstack/react-query": "^5.101.4",
+    "@tanstack/react-router": "^1.170.25",
     "@tanstack/react-store": "^0.9.3",
-    "@tanstack/router-core": "^1.171.15",
-    "@types/hast": "^3.0.4",
-    "@types/node": "^26",
-    "@types/react": "^19.2.17",
-    "@types/react-dom": "^19.2.3",
+    "@tanstack/router-core": "^1.171.21",
+    "@types/hast": "^3.0.5",
+    "@types/node": "^26.2.0",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
     "@vitest/browser-playwright": "^4.1.10",
     "@vitest/coverage-v8": "^4.1.10",
     "@vitest/mocker": "^4.1.10",
-    "agents": "^0.19.0",
-    "ai": "^6.0.228",
+    "agents": "^0.20.1",
+    "ai": "^6.0.247",
     "cloudflare": "^7.0.0",
-    "playwright": "~1.61.0",
+    "playwright": "~1.61.1",
     "react": "19.3.0-canary-711c445b-20260722",
     "react-dom": "19.3.0-canary-711c445b-20260722",
-    "storybook": "^10.5.2",
+    "storybook": "^10.5.7",
     "typescript": "^6.0.3",
     "vite": "npm:@voidzero-dev/vite-plus-core@0.2.4",
     "vite-plus": "0.2.4",
@@ -92,14 +92,13 @@
   },
   "peerDependencies": {
     "@ai-sdk/react": "^3.0.230",
-    "@cloudflare/codemode": "^0.5.0",
+    "@cloudflare/codemode": "^0.5.1",
     "@cloudflare/shell": "^0.4.3",
-    "@cloudflare/think": "^0.15.0",
-    "@cloudflare/voice": "^0.3.4",
+    "@cloudflare/think": "^0.15.1",
+    "@cloudflare/voice": "^0.3.5",
     "@cloudflare/workers-types": "^5.20260715.1",
     "@tanstack/react-query": "^5.101.2",
-    "@tanstack/react-router": "^1.170.18",
-    "agents": "^0.19.0",
+    "agents": "^0.20.1",
     "ai": "^6.0.228",
     "cloudflare": "^7.0.0",
     "react": "19.3.0-canary-711c445b-20260722",
@@ -124,6 +123,9 @@
     "@cloudflare/workers-types": {
       "optional": true
     },
+    "@tanstack/react-query": {
+      "optional": true
+    },
     "agents": {
       "optional": true
     },
@@ -140,6 +142,6 @@
     "test": "vp test",
     "check": "vp check",
     "storybook": "storybook dev -p 6011",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build && node ../../scripts/audit-storybook-manifest.mjs --write-imports"
   }
 }

package/dist/ResponsiveSidebarShell-DWjULskY.d.ts

@@ -1,68 +0,0 @@
-import * as React from "react";
-
-//#region src/components/general-purpose/ResponsiveSidebarShell.d.ts
-interface ResponsiveSidebarShellControls {
-  /** Close the sidebar and move focus to the main content. */
-  closeSidebar: () => void;
-  /** Close only when the shell is currently using its compact drawer layout. */
-  closeSidebarOnCompact: () => void;
-}
-interface ResponsiveSidebarShellTopBarControls {
-  /** The shell-owned, labelled sidebar toggle to place in a top-bar slot. */
-  sidebarToggle: React.ReactNode;
-  /** Stable id for a caller-composed compact disclosure trigger. */
-  sidebarId: string;
-  /** Whether the shared sidebar surface is currently visible. */
-  sidebarOpen: boolean;
-  /** Toggle the sidebar and remember the invoking control for Escape focus restoration. */
-  toggleSidebar: (trigger?: HTMLElement) => void;
-}
-interface ResponsiveSidebarShellProps extends React.HTMLAttributes<HTMLDivElement> {
-  /** Navigation or other secondary surface shown beside the selected content. */
-  sidebar: React.ReactNode | ((controls: ResponsiveSidebarShellControls) => React.ReactNode);
-  /**
-   * Optional composable application bar. The render form receives the
-   * shell-owned sidebar toggle so callers can place it beside their own icon
-   * groups without duplicating drawer behavior.
-   */
-  topBar?: React.ReactNode | ((controls: ResponsiveSidebarShellTopBarControls) => React.ReactNode);
-  /** Short noun used by the toggle and resize control, such as “threads” or “schedules”. */
-  sidebarLabel: string;
-  /** Whether the sidebar is open. Omit for internal state. */
-  sidebarOpen?: boolean;
-  /** Initial sidebar state when `sidebarOpen` is uncontrolled. */
-  defaultSidebarOpen?: boolean;
-  /** Initial desktop sidebar width in CSS pixels. */
-  defaultSidebarWidth?: number;
-  /** Called when the sidebar is opened or closed. */
-  onSidebarOpenChange?: (open: boolean) => void;
-  /** Accessible name for the toolbar containing the sidebar toggle. */
-  toolbarLabel?: string;
-  /** Accessible name for the mobile preview target that returns to the main content. */
-  showMainLabel?: string;
-}
-/**
- * Responsive master-detail shell with a resizable desktop sidebar and a compact
- * floating sidebar that leaves the main content in place as a dismiss target.
- * The root exposes `data-sidebar-open="true" | "false"` as its public styling hook.
- */
-declare function ResponsiveSidebarShell({
-  sidebar,
-  topBar,
-  sidebarLabel,
-  sidebarOpen,
-  defaultSidebarOpen,
-  defaultSidebarWidth,
-  onSidebarOpenChange,
-  toolbarLabel,
-  showMainLabel,
-  className,
-  children,
-  ref,
-  style,
-  ...props
-}: ResponsiveSidebarShellProps & {
-  ref?: React.Ref<HTMLDivElement>;
-}): React.JSX.Element;
-//#endregion
-export { ResponsiveSidebarShellTopBarControls as i, ResponsiveSidebarShellControls as n, ResponsiveSidebarShellProps as r, ResponsiveSidebarShell as t };

package/dist/ToggleGroup-_pQMyHGM.d.ts

@@ -1,80 +0,0 @@
-import { r as ToggleVariantsOptions } from "./Toggle-DLrIf5YH.js";
-import * as React from "react";
-import { Toggle } from "@base-ui/react/toggle";
-import { ToggleGroup } from "@base-ui/react/toggle-group";
-
-//#region src/components/foundations/ToggleGroup.d.ts
-type ToggleGroupSize = ToggleVariantsOptions["size"];
-type ToggleGroupProps<Value extends string = string> = ToggleGroup.Props<Value> & {
-  variant?: ToggleVariantsOptions["variant"];
-  /**
-   * The size of the toggle group.
-   * @default 'md'
-   */
-  size?: ToggleGroupSize;
-  spacing?: number;
-  /**
-   * Draws one shared thumb that slides between segments rather than lighting up
-   * each item's own background. This is the permission-mode / view-switch
-   * control; it is a presentation of this group, not a separate component.
-   *
-   * Only meaningful for single selection — a sliding thumb cannot be in two
-   * places, so a `multiple` group ignores it.
-   */
-  segmented?: boolean;
-};
-interface ToggleGroupItemProps extends React.ComponentPropsWithRef<typeof Toggle>, Omit<ToggleVariantsOptions, "className"> {}
-/**
- * A toggle group component for selecting one or multiple options.
- *
- * @example
- * ```tsx
- * // Single selection (defaultValue is an array)
- * <ToggleGroup.Root defaultValue={["center"]}>
- *   <ToggleGroup.Item value="left">Left</ToggleGroup.Item>
- *   <ToggleGroup.Item value="center">Center</ToggleGroup.Item>
- *   <ToggleGroup.Item value="right">Right</ToggleGroup.Item>
- * </ToggleGroup.Root>
- * ```
- *
- * @example
- * ```tsx
- * // Multiple selection
- * <ToggleGroup.Root multiple defaultValue={["bold", "italic"]}>
- *   <ToggleGroup.Item value="bold">Bold</ToggleGroup.Item>
- *   <ToggleGroup.Item value="italic">Italic</ToggleGroup.Item>
- *   <ToggleGroup.Item value="underline">Underline</ToggleGroup.Item>
- * </ToggleGroup.Root>
- * ```
- *
- * @see {@link https://base-ui.com/react/components/toggle-group | Base UI Toggle Group}
- */
-declare function ToggleGroupRoot<Value extends string>({
-  size,
-  spacing,
-  segmented,
-  variant,
-  className,
-  children,
-  style,
-  ref,
-  ...props
-}: ToggleGroupProps<Value>): 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;
-declare const ToggleGroup$1: {
-  Root: typeof ToggleGroupRoot;
-  Item: typeof ToggleGroupItem;
-};
-//#endregion
-export { ToggleGroupItemProps as n, ToggleGroupProps as r, ToggleGroup$1 as t };

package/dist/components/agents-sdk/AgentActivityPreview.d.ts

@@ -1,46 +0,0 @@
-import { n as WorkspaceDestination } from "../../WorkspaceLink-Bh9-Jo1r.js";
-import { s as AgentActivitySummary } from "../../AgentActivity-Cc_oDYum.js";
-import * as React from "react";
-
-//#region src/components/agents-sdk/AgentActivityPreview.d.ts
-/** The three conditions that make an agent relevant to the transient preview. */
-type AgentActivityPreviewStatus = "running" | "input-required" | "unviewed";
-interface AgentActivityPreviewFavicon {
-  src: string;
-  label: string;
-}
-type AgentActivityPreviewItem = Omit<AgentActivitySummary, "mode"> & {
-  id: string;
-  status: AgentActivityPreviewStatus;
-  favicons?: readonly AgentActivityPreviewFavicon[];
-};
-interface AgentActivityPreviewProps extends Omit<React.HTMLAttributes<HTMLElement>, "children" | "onSelect"> {
-  /** Current agent summaries to show in the transient preview. */
-  items: readonly AgentActivityPreviewItem[];
-  /** App-authored TanStack Router Link for every durable agent destination. */
-  renderAgentLink: (item: AgentActivityPreviewItem) => React.ReactElement;
-  /** App-authored TanStack Router Link for a projected workspace file destination. */
-  renderWorkspaceFileLink?: (item: AgentActivityPreviewItem, destination: Extract<WorkspaceDestination, {
-    kind: "file";
-  }>) => React.ReactElement;
-  /** Hides the complete preview when the host supports dismissal. */
-  onDismiss?: () => void;
-  /** Product mark shown beside the agent rows. */
-  brandIcon?: React.ReactNode;
-}
-/** Compact multi-agent preview for a page overlay or secondary application rail. */
-declare function AgentActivityPreview({
-  "aria-label": ariaLabel,
-  brandIcon,
-  className,
-  items,
-  onDismiss,
-  renderAgentLink,
-  renderWorkspaceFileLink,
-  ref,
-  ...props
-}: AgentActivityPreviewProps & {
-  ref?: React.Ref<HTMLElement>;
-}): React.JSX.Element | null;
-//#endregion
-export { AgentActivityPreview, AgentActivityPreviewFavicon, AgentActivityPreviewItem, AgentActivityPreviewProps, AgentActivityPreviewStatus };

package/dist/components/agents-sdk/AgentActivityPreview.js

@@ -1,93 +0,0 @@
-import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { C as FileIcon, M as McpIcon, Y as SpinnerIcon, it as XIcon, nt as WarningIcon } from "../../icons-MmIXciMO.js";
-import { ActivityHeader } from "../ai-sdk/Activity.js";
-import { Button } from "../foundations/Button.js";
-import { t as NavigationLink } from "../../navigation-link-kqMa81v5.js";
-import { AppIcon } from "../foundations/AppIcon.js";
-import { AgentActivityFavicon, AgentActivityIcon } from "./AgentActivity.js";
-import "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/agents-sdk/AgentActivityPreview.tsx
-/** Compact multi-agent preview for a page overlay or secondary application rail. */
-function AgentActivityPreview({ "aria-label": ariaLabel = "Agent activity", brandIcon = /* @__PURE__ */ jsx(McpIcon, {}), className, items, onDismiss, renderAgentLink, renderWorkspaceFileLink, ref, ...props }) {
-	if (items.length === 0) return null;
-	return /* @__PURE__ */ jsxs("section", {
-		ref,
-		"aria-label": ariaLabel,
-		className: cx("agent-activity-preview", className),
-		"data-slot": "agent-activity-preview",
-		...props,
-		children: [
-			/* @__PURE__ */ jsx("div", {
-				className: "agent-activity-preview__badge",
-				"aria-hidden": "true",
-				children: brandIcon
-			}),
-			onDismiss ? /* @__PURE__ */ jsx(Button, {
-				"aria-label": "Hide agent activity",
-				className: "agent-activity-preview__dismiss",
-				color: "neutral",
-				iconOnly: true,
-				size: "sm",
-				variant: "ghost",
-				onClick: onDismiss,
-				children: /* @__PURE__ */ jsx(XIcon, {})
-			}) : null,
-			/* @__PURE__ */ jsx("ul", {
-				className: "agent-activity-preview__list",
-				role: "list",
-				children: items.map((item) => /* @__PURE__ */ jsxs("li", {
-					className: "agent-activity-preview__item",
-					children: [/* @__PURE__ */ jsx(NavigationLink, {
-						render: renderAgentLink(item),
-						className: "agent-activity-preview__row",
-						"aria-label": `${item.action}${item.detail ? ` ${item.detail}` : ""}. ${statusLabel(item.status)}. Open agent.`,
-						"data-status": item.status,
-						children: /* @__PURE__ */ jsx(ActivityHeader, {
-							icon: item.url ? /* @__PURE__ */ jsx(AgentActivityFavicon, {
-								url: item.url,
-								fallbackKind: item.iconKind
-							}) : /* @__PURE__ */ jsx(AgentActivityIcon, { kind: item.iconKind }),
-							isStreaming: item.status === "running",
-							action: item.action,
-							detail: item.detail,
-							trailing: /* @__PURE__ */ jsxs("span", {
-								className: "agent-activity-preview__trailing",
-								"aria-hidden": "true",
-								children: [item.favicons?.length ? /* @__PURE__ */ jsx(AppIcon.Stack, { children: item.favicons.map((favicon) => /* @__PURE__ */ jsxs(AppIcon.Root, {
-									size: "sm",
-									title: favicon.label,
-									children: [/* @__PURE__ */ jsx(AppIcon.Image, {
-										src: favicon.src,
-										alt: ""
-									}), /* @__PURE__ */ jsx(AppIcon.Fallback, { children: favicon.label.slice(0, 1) })]
-								}, `${favicon.src}:${favicon.label}`)) }) : null, /* @__PURE__ */ jsx(StatusIcon, { status: item.status })]
-							})
-						})
-					}), item.workspaceDestination && renderWorkspaceFileLink ? /* @__PURE__ */ jsx(NavigationLink, {
-						render: renderWorkspaceFileLink(item, item.workspaceDestination),
-						className: "agent-activity-preview__file-action",
-						"aria-label": `Open ${item.workspaceDestination.path} in workspace`,
-						children: /* @__PURE__ */ jsx(FileIcon, {})
-					}) : null]
-				}, item.id))
-			})
-		]
-	});
-}
-function StatusIcon({ status }) {
-	switch (status) {
-		case "running": return /* @__PURE__ */ jsx(SpinnerIcon, {});
-		case "input-required": return /* @__PURE__ */ jsx(WarningIcon, {});
-		case "unviewed": return /* @__PURE__ */ jsx("span", { className: "agent-activity-preview__unviewed-dot" });
-	}
-}
-function statusLabel(status) {
-	switch (status) {
-		case "running": return "Working";
-		case "input-required": return "Needs your input";
-		case "unviewed": return "Not yet viewed";
-	}
-}
-//#endregion
-export { AgentActivityPreview };

package/dist/components/agents-sdk/ThinkThreadShell.d.ts

@@ -1,38 +0,0 @@
-import { t as ResponsiveSidebarShell } from "../../ResponsiveSidebarShell-DWjULskY.js";
-import * as React from "react";
-
-//#region src/components/agents-sdk/ThinkThreadShell.d.ts
-interface ThinkThreadShellProps extends React.HTMLAttributes<HTMLDivElement> {
-  /**
-   * Thread picker or app-owned sidebar shown beside the selected child shell.
-   * Use the render form to close the compact drawer when a thread is selected.
-   */
-  sidebar: React.ComponentProps<typeof ResponsiveSidebarShell>["sidebar"];
-  /** Whether the thread drawer is open. Omit for internal state. */
-  sidebarOpen?: boolean;
-  /** Initial thread drawer state when `sidebarOpen` is uncontrolled. */
-  defaultSidebarOpen?: boolean;
-  /** Called when the thread drawer is opened or closed. */
-  onSidebarOpenChange?: (open: boolean) => void;
-  /** Application bar composed with the shell-owned thread toggle. */
-  topBar?: React.ComponentProps<typeof ResponsiveSidebarShell>["topBar"];
-}
-/**
- * Thread-specific adapter for ResponsiveSidebarShell. Callers still own the
- * parent agent, selected child agent, chat hook, and shared workspace.
- */
-declare function ThinkThreadShell({
-  sidebar,
-  sidebarOpen,
-  defaultSidebarOpen,
-  onSidebarOpenChange,
-  topBar,
-  children,
-  className,
-  ref,
-  ...props
-}: ThinkThreadShellProps & {
-  ref?: React.Ref<HTMLDivElement>;
-}): React.JSX.Element;
-//#endregion
-export { ThinkThreadShell, ThinkThreadShellProps };

package/dist/components/agents-sdk/ThinkThreadShell.js

@@ -1,27 +0,0 @@
-import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { ResponsiveSidebarShell } from "../general-purpose/ResponsiveSidebarShell.js";
-import "react";
-import { jsx } from "react/jsx-runtime";
-//#region src/components/agents-sdk/ThinkThreadShell.tsx
-/**
-* Thread-specific adapter for ResponsiveSidebarShell. Callers still own the
-* parent agent, selected child agent, chat hook, and shared workspace.
-*/
-function ThinkThreadShell({ sidebar, sidebarOpen, defaultSidebarOpen, onSidebarOpenChange, topBar, children, className, ref, ...props }) {
-	return /* @__PURE__ */ jsx(ResponsiveSidebarShell, {
-		...props,
-		ref,
-		className: cx("think-thread-shell", className),
-		sidebar,
-		sidebarLabel: "threads",
-		sidebarOpen,
-		defaultSidebarOpen,
-		onSidebarOpenChange,
-		topBar,
-		toolbarLabel: "Thread controls",
-		showMainLabel: "Show selected thread",
-		children
-	});
-}
-//#endregion
-export { ThinkThreadShell };

package/dist/components/foundations/Badge.d.ts

@@ -1,62 +0,0 @@
-import { useRender } from "@base-ui/react/use-render";
-
-//#region src/components/foundations/Badge.d.ts
-type BadgeVariant = "normal" | "outline" | "ghost" | "link";
-type BadgeColor = "neutral" | "primary" | "success" | "destructive" | "warning";
-interface BadgeVariantsOptions {
-  variant?: BadgeVariant | null;
-  color?: BadgeColor | null;
-  size?: "sm" | "md" | null;
-  className?: string;
-}
-declare function badgeVariants({
-  variant,
-  color,
-  size,
-  className
-}?: BadgeVariantsOptions): string;
-type BadgeRenderState = {
-  slot: "badge";
-  variant: BadgeVariant;
-  size: "sm" | "md";
-};
-interface BadgeProps extends Omit<useRender.ComponentProps<"span", BadgeRenderState>, "color"> {
-  /**
-   * The visual rendering style of the badge.
-   * @default 'normal'
-   */
-  variant?: BadgeVariant;
-  /**
-   * The semantic color intent of the badge.
-   * @default 'primary'
-   */
-  color?: BadgeColor;
-  /**
-   * The size of the badge.
-   * @default 'md'
-   */
-  size?: "sm" | "md";
-}
-/**
- * A badge component for highlighting status, labels, or categories.
- *
- * @example
- * ```tsx
- * <Badge>Default</Badge>
- * <Badge color="success">Active</Badge>
- * <Badge color="warning">Pending</Badge>
- * <Badge variant="outline">Info</Badge>
- * <Badge render={<a href="/docs" />}>Docs</Badge>
- * ```
- */
-declare function Badge({
-  variant,
-  color,
-  size,
-  className,
-  render,
-  ref,
-  ...props
-}: BadgeProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
-//#endregion
-export { Badge, BadgeColor, BadgeProps, BadgeVariant, BadgeVariantsOptions, badgeVariants };

package/dist/components/foundations/Badge.js

@@ -1,55 +0,0 @@
-import { useRender } from "@base-ui/react/use-render";
-//#region src/components/foundations/Badge.tsx
-const BADGE_VARIANT_DEFAULT_COLOR = {
-	normal: "primary",
-	outline: "neutral",
-	ghost: "neutral",
-	link: "primary"
-};
-function badgeVariants({ variant = "normal", color, size = "md", className } = {}) {
-	const badgeVariant = variant ?? "normal";
-	return [
-		"badge",
-		`badge--${badgeVariant}`,
-		`badge--${color ?? BADGE_VARIANT_DEFAULT_COLOR[badgeVariant]}`,
-		size !== "md" && `badge--${size}`,
-		className
-	].filter(Boolean).join(" ");
-}
-/**
-* A badge component for highlighting status, labels, or categories.
-*
-* @example
-* ```tsx
-* <Badge>Default</Badge>
-* <Badge color="success">Active</Badge>
-* <Badge color="warning">Pending</Badge>
-* <Badge variant="outline">Info</Badge>
-* <Badge render={<a href="/docs" />}>Docs</Badge>
-* ```
-*/
-function Badge({ variant = "normal", color, size = "md", className, render, ref, ...props }) {
-	const badgeVariant = variant ?? "normal";
-	const classes = badgeVariants({
-		variant,
-		color,
-		size,
-		className
-	});
-	return useRender({
-		defaultTagName: "span",
-		render,
-		ref,
-		props: {
-			...props,
-			className: classes
-		},
-		state: {
-			slot: "badge",
-			variant: badgeVariant,
-			size
-		}
-	});
-}
-//#endregion
-export { Badge, badgeVariants };

package/dist/components/foundations/StatusPill.d.ts

@@ -1,43 +0,0 @@
-import { BadgeProps } from "./Badge.js";
-import * as React from "react";
-
-//#region src/components/foundations/StatusPill.d.ts
-interface StatusPillProps extends BadgeProps {
-  /**
-   * Whether the state this reports is still ongoing. A live state pulses; a
-   * settled one holds still, so "Live" and "Ended" are told apart without
-   * reading either word.
-   */
-  busy?: boolean;
-  /**
-   * Replaces the dot for states that have a picture — a spinner while a run
-   * starts, a check once it lands.
-   */
-  icon?: React.ReactNode;
-}
-/**
- * A short state report: an indicator, then the state itself.
- *
- * This is a `Badge` with an indicator in front, not a second kind of chip, so
- * `variant`, `color`, and `size` mean here exactly what they mean there. What
- * it adds is the dot and its pulse, which several surfaces had been writing
- * out by hand.
- *
- * It reports; it does not ask. A state that needs the user to do something is
- * `AgentAttention`.
- *
- * @example
- * ```tsx
- * <StatusPill busy color="destructive" size="sm">Live</StatusPill>
- * <StatusPill color="success" icon={<CheckIcon />}>Passed</StatusPill>
- * ```
- */
-declare function StatusPill({
-  busy,
-  className,
-  icon,
-  children,
-  ...props
-}: StatusPillProps): React.JSX.Element;
-//#endregion
-export { StatusPill, StatusPillProps };