@mcp-b/react-components 0.14.1 → 0.16.0

package/dist/components/SubagentRun.js

@@ -0,0 +1,108 @@
+import { Collapsible } from "./Collapsible.js";
+import { t as cx } from "../class-names-9UtZwb0J.js";
+import { Button } from "./Button.js";
+import { Badge } from "./Badge.js";
+import { NaniteMark } from "./NaniteScene.js";
+import { SubagentRunIndicator, getSubagentRunName, getSubagentRunTooltip } from "./SubagentRunIndicator.js";
+import { SubagentRunSelector } from "./SubagentRunSelector.js";
+import { SubagentRunList } from "./SubagentRunList.js";
+import { SubagentRunActions, SubagentRunMilestone, SubagentRunMilestones, SubagentRunProgress } from "./SubagentRunDetails.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/SubagentRun.tsx
+/**
+* Transport-neutral inline disclosure for one delegated agent run.
+*
+* @deprecated Retained subagent transcripts should open in an adjacent
+* `ThinkFullApp` workbench panel. Use `SubagentRunSelector` in the transcript.
+*/
+function SubagentRun({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx(Collapsible.Root, {
+		ref,
+		"data-slot": "subagent-run",
+		className: cx("subagent-run", className),
+		...props,
+		unstyled: true
+	});
+}
+/**
+* @deprecated Retained subagent transcripts should not expand inline. Use
+* `SubagentRunSelector` and render the child in a `ThinkFullApp` workbench panel.
+*/
+function SubagentRunTrigger({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsxs(Collapsible.Trigger, {
+		ref,
+		"data-slot": "subagent-run-trigger",
+		className: cx("subagent-run__trigger", className),
+		render: /* @__PURE__ */ jsx(Button, {
+			type: "button",
+			variant: "outline",
+			color: "neutral",
+			size: "sm"
+		}),
+		...props,
+		unstyled: true,
+		children: [/* @__PURE__ */ jsx(NaniteMark, {}), /* @__PURE__ */ jsx("span", {
+			className: "subagent-run__trigger-content",
+			children
+		})]
+	});
+}
+function SubagentRunHeading({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		className: cx("subagent-run__heading", className),
+		...props
+	});
+}
+function SubagentRunTitle({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		className: cx("subagent-run__title", className),
+		...props
+	});
+}
+function SubagentRunDescription({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		className: cx("subagent-run__description", className),
+		...props
+	});
+}
+const STATUS_COLOR = {
+	active: "primary",
+	complete: "success",
+	error: "destructive",
+	stopped: "neutral",
+	warning: "warning"
+};
+/** Visible status label. A transport adapter owns any debounced live announcement. */
+function SubagentRunStatus({ className, tone = "active", size = "sm", ...props }) {
+	return /* @__PURE__ */ jsx(Badge, {
+		"data-slot": "subagent-run-status",
+		"data-tone": tone,
+		className: cx("subagent-run__status", className),
+		color: STATUS_COLOR[tone],
+		size,
+		...props
+	});
+}
+/**
+* @deprecated Retained subagent transcripts should live in an adjacent
+* `ThinkFullApp` workbench panel, not below the selector.
+*/
+function SubagentRunContent({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx(Collapsible.Panel, {
+		ref,
+		"data-slot": "subagent-run-content",
+		className: cx("subagent-run__content", className),
+		...props,
+		unstyled: true,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "subagent-run__content-inner",
+			children
+		})
+	});
+}
+//#endregion
+export { SubagentRun, SubagentRunActions, SubagentRunContent, SubagentRunDescription, SubagentRunHeading, SubagentRunIndicator, SubagentRunList, SubagentRunMilestone, SubagentRunMilestones, SubagentRunProgress, SubagentRunSelector, SubagentRunStatus, SubagentRunTitle, SubagentRunTrigger, getSubagentRunName, getSubagentRunTooltip };

package/dist/components/SubagentRunDetails.d.ts

@@ -0,0 +1,44 @@
+import * as React from "react";
+
+//#region src/components/SubagentRunDetails.d.ts
+interface SubagentRunProgressProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Human-readable current action or phase. */
+  label: string;
+  /** Completion fraction from 0 to 1. Omit for indeterminate progress. */
+  value?: number;
+}
+declare function SubagentRunProgress({
+  className,
+  label,
+  value,
+  ref,
+  ...props
+}: SubagentRunProgressProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface SubagentRunActionsProps extends React.HTMLAttributes<HTMLDivElement> {}
+declare function SubagentRunActions({
+  className,
+  ref,
+  ...props
+}: SubagentRunActionsProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface SubagentRunMilestonesProps extends React.OlHTMLAttributes<HTMLOListElement> {}
+declare function SubagentRunMilestones({
+  className,
+  ref,
+  ...props
+}: SubagentRunMilestonesProps & {
+  ref?: React.Ref<HTMLOListElement>;
+}): React.JSX.Element;
+interface SubagentRunMilestoneProps extends React.LiHTMLAttributes<HTMLLIElement> {}
+declare function SubagentRunMilestone({
+  className,
+  ref,
+  ...props
+}: SubagentRunMilestoneProps & {
+  ref?: React.Ref<HTMLLIElement>;
+}): React.JSX.Element;
+//#endregion
+export { SubagentRunActions, SubagentRunActionsProps, SubagentRunMilestone, SubagentRunMilestoneProps, SubagentRunMilestones, SubagentRunMilestonesProps, SubagentRunProgress, SubagentRunProgressProps };

package/dist/components/SubagentRunDetails.js

@@ -0,0 +1,48 @@
+import { t as cx } from "../class-names-9UtZwb0J.js";
+import { Progress } from "./Progress.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/SubagentRunDetails.tsx
+function SubagentRunProgress({ className, label, value, ref, ...props }) {
+	const labelId = React.useId();
+	const percent = value === void 0 ? null : Math.round(Math.min(1, Math.max(0, value)) * 100);
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cx("subagent-run__progress", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("span", {
+			id: labelId,
+			className: "subagent-run__progress-label",
+			children: [/* @__PURE__ */ jsx("span", { children: label }), percent === null ? null : /* @__PURE__ */ jsxs("span", { children: [percent, "%"] })]
+		}), /* @__PURE__ */ jsx(Progress.Root, {
+			value: percent,
+			"aria-labelledby": labelId,
+			children: /* @__PURE__ */ jsx(Progress.Track, { children: /* @__PURE__ */ jsx(Progress.Indicator, {}) })
+		})]
+	});
+}
+function SubagentRunActions({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("subagent-run__actions", className),
+		...props
+	});
+}
+function SubagentRunMilestones({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("ol", {
+		ref,
+		"data-slot": "subagent-run-milestones",
+		className: cx("subagent-run__milestones", className),
+		role: "list",
+		...props
+	});
+}
+function SubagentRunMilestone({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("li", {
+		ref,
+		className: cx("subagent-run__milestone", className),
+		...props
+	});
+}
+//#endregion
+export { SubagentRunActions, SubagentRunMilestone, SubagentRunMilestones, SubagentRunProgress };

package/dist/components/SubagentRunIndicator.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { AgentToolRunPart, AgentToolRunState } from "agents/agent-tools";
+
+//#region src/components/SubagentRunIndicator.d.ts
+declare function getSubagentRunName(run: AgentToolRunState): string;
+/** Human-readable detail for a retained run selector's tooltip. */
+declare function getSubagentRunTooltip(run: AgentToolRunState): React.ReactNode;
+interface SubagentRunIndicatorProps<Part extends AgentToolRunPart = AgentToolRunPart> extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
+  /** Complete retained-run state returned by `useAgentToolEvents()`. */
+  run: AgentToolRunState<Part>;
+}
+/** Decorative status mark derived from a whole upstream retained-run record. */
+declare function SubagentRunIndicator<Part extends AgentToolRunPart = AgentToolRunPart>({
+  className,
+  run,
+  ref,
+  ...props
+}: SubagentRunIndicatorProps<Part> & {
+  ref?: React.Ref<HTMLSpanElement>;
+}): React.JSX.Element;
+//#endregion
+export { SubagentRunIndicator, SubagentRunIndicatorProps, getSubagentRunName, getSubagentRunTooltip };

package/dist/components/SubagentRunIndicator.js

@@ -0,0 +1,33 @@
+import { t as cx } from "../class-names-9UtZwb0J.js";
+import { B as SpinnerIcon, U as StopIcon, o as CheckIcon, q as WarningIcon } from "../icons-CpfUer49.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/SubagentRunIndicator.tsx
+function getSubagentRunName(run) {
+	return run.display?.name ?? run.agentType;
+}
+/** Human-readable detail for a retained run selector's tooltip. */
+function getSubagentRunTooltip(run) {
+	switch (run.status) {
+		case "running": return run.progress?.message ?? run.progress?.phase ?? "Running";
+		case "completed": return run.summary ?? "Completed";
+		case "error": return run.error ?? "Agent run failed";
+		case "aborted": return run.error ?? "Agent run stopped";
+		case "interrupted": return run.error ?? (run.childStillRunning ? "Interrupted · agent may still be running" : "Interrupted");
+	}
+}
+/** Decorative status mark derived from a whole upstream retained-run record. */
+function SubagentRunIndicator({ className, run, ref, ...props }) {
+	const icon = run.status === "running" ? /* @__PURE__ */ jsx(SpinnerIcon, {}) : run.status === "completed" ? /* @__PURE__ */ jsx(CheckIcon, {}) : run.status === "aborted" ? /* @__PURE__ */ jsx(StopIcon, {}) : /* @__PURE__ */ jsx(WarningIcon, {});
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		"data-slot": "subagent-run-indicator",
+		"data-status": run.status,
+		className: cx("subagent-run__indicator", className),
+		...props,
+		"aria-hidden": "true",
+		children: icon
+	});
+}
+//#endregion
+export { SubagentRunIndicator, getSubagentRunName, getSubagentRunTooltip };

package/dist/components/SubagentRunList.d.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { UIMessage } from "ai";
+import { AgentToolRunPart, AgentToolRunState } from "agents/agent-tools";
+
+//#region src/components/SubagentRunList.d.ts
+interface SubagentRunListProps<Part extends AgentToolRunPart = UIMessage["parts"][number]> extends Omit<React.HTMLAttributes<HTMLUListElement>, "children" | "onSelect"> {
+  /** Complete retained runs returned by `useAgentToolEvents()`, in display order. */
+  runs: readonly AgentToolRunState<Part>[];
+  selectedRunId?: string | null;
+  /** Called with the whole upstream run selected for the adjacent detail surface. */
+  onSelect?: (run: AgentToolRunState<Part>) => void;
+}
+/** Semantic, wrapping list of retained-run selectors. */
+declare function SubagentRunList<Part extends AgentToolRunPart = UIMessage["parts"][number]>({
+  className,
+  onSelect,
+  runs,
+  selectedRunId,
+  ref,
+  ...props
+}: SubagentRunListProps<Part> & {
+  ref?: React.Ref<HTMLUListElement>;
+}): React.JSX.Element;
+//#endregion
+export { SubagentRunList, SubagentRunListProps };

package/dist/components/SubagentRunList.js

@@ -0,0 +1,26 @@
+import { t as cx } from "../class-names-9UtZwb0J.js";
+import { SubagentRunSelector } from "./SubagentRunSelector.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/SubagentRunList.tsx
+/** Semantic, wrapping list of retained-run selectors. */
+function SubagentRunList({ className, onSelect, runs, selectedRunId, ref, ...props }) {
+	return /* @__PURE__ */ jsx("ul", {
+		ref,
+		"data-slot": "subagent-run-list",
+		className: cx("subagent-run__list", className),
+		...props,
+		role: "list",
+		children: runs.map((run) => /* @__PURE__ */ jsx("li", {
+			className: "subagent-run__list-item",
+			children: /* @__PURE__ */ jsx(SubagentRunSelector, {
+				run,
+				naniteIndex: run.order,
+				selected: run.runId === selectedRunId,
+				onSelect
+			})
+		}, run.runId))
+	});
+}
+//#endregion
+export { SubagentRunList };

package/dist/components/SubagentRunSelector.d.ts

@@ -0,0 +1,47 @@
+import { r as ButtonProps } from "../Button-FX_hpqxm.js";
+import * as React from "react";
+import { UIMessage } from "ai";
+import { AgentToolRunPart, AgentToolRunState } from "agents/agent-tools";
+
+//#region src/components/SubagentRunSelector.d.ts
+interface SubagentRunSelectorProps<Part extends AgentToolRunPart = UIMessage["parts"][number]> extends Omit<ButtonProps, "children" | "className" | "color" | "onSelect" | "size" | "variant"> {
+  className?: string;
+  /** Complete retained-run state returned by `useAgentToolEvents()`. */
+  run?: AgentToolRunState<Part>;
+  /**
+   * @deprecated Pass `run` so the selector derives its content from the whole
+   * upstream object. Retained for the pre-0.15 presentation-only API.
+   */
+  children?: React.ReactNode;
+  naniteIndex?: number;
+  selected?: boolean;
+  /** Short supplementary status shown on hover and keyboard focus. `false` disables it. */
+  tooltip?: React.ReactNode | false;
+  /** Called with the whole upstream run when the selector is activated. */
+  onSelect?: (run: AgentToolRunState<Part>) => void;
+}
+/**
+ * Compact selector for a retained Cloudflare Agent Tool run.
+ *
+ * The component consumes `AgentToolRunState` whole and derives its label and
+ * status from upstream fields. Selecting it should route `run.subAgent` into
+ * an adjacent detail surface; it never invents a second transcript or expands
+ * child content inline.
+ */
+declare function SubagentRunSelector<Part extends AgentToolRunPart = UIMessage["parts"][number]>({
+  className,
+  children,
+  naniteIndex,
+  onClick,
+  onSelect,
+  run,
+  selected,
+  tooltip,
+  ref,
+  "aria-label": ariaLabel,
+  ...props
+}: SubagentRunSelectorProps<Part> & {
+  ref?: React.Ref<HTMLButtonElement>;
+}): React.JSX.Element;
+//#endregion
+export { SubagentRunSelector, SubagentRunSelectorProps };

package/dist/components/SubagentRunSelector.js

@@ -0,0 +1,55 @@
+import { t as cx } from "../class-names-9UtZwb0J.js";
+import { Button } from "./Button.js";
+import { Tooltip } from "./Tooltip.js";
+import { NaniteMark } from "./NaniteScene.js";
+import { SubagentRunIndicator, getSubagentRunName, getSubagentRunTooltip } from "./SubagentRunIndicator.js";
+import "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/SubagentRunSelector.tsx
+/**
+* Compact selector for a retained Cloudflare Agent Tool run.
+*
+* The component consumes `AgentToolRunState` whole and derives its label and
+* status from upstream fields. Selecting it should route `run.subAgent` into
+* an adjacent detail surface; it never invents a second transcript or expands
+* child content inline.
+*/
+function SubagentRunSelector({ className, children, naniteIndex = 0, onClick, onSelect, run, selected = false, tooltip, ref, "aria-label": ariaLabel, ...props }) {
+	const name = run ? getSubagentRunName(run) : void 0;
+	const button = /* @__PURE__ */ jsxs(Button, {
+		ref,
+		type: "button",
+		variant: "outline",
+		color: "neutral",
+		size: "xs",
+		"data-slot": "subagent-run-selector",
+		"data-status": run?.status,
+		className: cx("subagent-run__selector", className),
+		"aria-pressed": selected,
+		"aria-label": ariaLabel ?? (run ? `Open ${name}, ${run.status}` : void 0),
+		onClick: (event) => {
+			onClick?.(event);
+			if (!event.defaultPrevented && run) onSelect?.(run);
+		},
+		...props,
+		children: [/* @__PURE__ */ jsx(NaniteMark, { index: naniteIndex }), run ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+			className: "subagent-run__title",
+			children: name
+		}), /* @__PURE__ */ jsx(SubagentRunIndicator, { run })] }) : /* @__PURE__ */ jsx("span", {
+			className: "subagent-run__trigger-content",
+			children
+		})]
+	});
+	const tooltipContent = tooltip === false ? null : tooltip ?? (run ? getSubagentRunTooltip(run) : null);
+	if (!tooltipContent) return button;
+	return /* @__PURE__ */ jsxs(Tooltip.Root, { children: [/* @__PURE__ */ jsx(Tooltip.Trigger, {
+		render: button,
+		delay: 0
+	}), /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, {
+		side: "top",
+		sideOffset: 6,
+		children: /* @__PURE__ */ jsx(Tooltip.Popup, { children: tooltipContent })
+	}) })] });
+}
+//#endregion
+export { SubagentRunSelector };

package/dist/components/Task.js

@@ -1,6 +1,6 @@
 import { Collapsible } from "./Collapsible.js";
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { c as ChevronRightIcon, h as FileIcon, j as SearchIcon } from "../icons-Ba9THQKz.js";
+import { R as SearchIcon, l as ChevronRightIcon, v as FileIcon } from "../icons-CpfUer49.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Task.tsx

package/dist/components/Terminal.js

@@ -1,8 +1,8 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { I as TerminalIcon, z as XIcon } from "../icons-Ba9THQKz.js";
+import { G as TerminalIcon, Y as XIcon } from "../icons-CpfUer49.js";
 import { Button } from "./Button.js";
 import { Tooltip } from "./Tooltip.js";
-import { t as CopyButton } from "../copy-button-DUMLYdsk.js";
+import { t as CopyButton } from "../copy-button-Dejn5heL.js";
 import { Badge } from "./Badge.js";
 import { ScrollArea } from "./ScrollArea.js";
 import * as React from "react";

package/dist/components/TestResults.js

@@ -1,6 +1,6 @@
 import { Collapsible } from "./Collapsible.js";
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { N as SpinnerIcon, a as CheckIcon, c as ChevronRightIcon, z as XIcon } from "../icons-Ba9THQKz.js";
+import { B as SpinnerIcon, Y as XIcon, l as ChevronRightIcon, o as CheckIcon } from "../icons-CpfUer49.js";
 import { Badge } from "./Badge.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/components/Textarea.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+
+//#region src/components/Textarea.d.ts
+interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  /** Allow the user to resize the control along the block axis. */
+  resize?: "none" | "vertical";
+}
+/**
+ * Multiline text control that shares the design system's field recipe.
+ * Compose it through `Field.Control` when labeling or validation is needed.
+ */
+declare function Textarea({
+  className,
+  ref,
+  resize,
+  ...props
+}: TextareaProps & {
+  ref?: React.Ref<HTMLTextAreaElement>;
+}): React.JSX.Element;
+//#endregion
+export { Textarea, TextareaProps };

package/dist/components/Textarea.js

@@ -0,0 +1,19 @@
+import { t as cx } from "../class-names-9UtZwb0J.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Textarea.tsx
+/**
+* Multiline text control that shares the design system's field recipe.
+* Compose it through `Field.Control` when labeling or validation is needed.
+*/
+function Textarea({ className, ref, resize = "vertical", ...props }) {
+	return /* @__PURE__ */ jsx("textarea", {
+		ref,
+		"data-slot": "textarea",
+		"data-resize": resize,
+		className: cx("textarea", className),
+		...props
+	});
+}
+//#endregion
+export { Textarea };

package/dist/components/ThemeModeControl.d.ts

@@ -0,0 +1,24 @@
+//#region src/components/ThemeModeControl.d.ts
+interface ThemeModeControlProps {
+  /** Show text beside each icon. @default true */
+  showLabels?: boolean;
+  /** Accessible name for the radio group. @default "Theme" */
+  "aria-label"?: string;
+  /** Name used by the radio group's hidden form input. @default "theme" */
+  name?: string;
+  disabled?: boolean;
+  className?: string;
+}
+/**
+ * A compact, mutually exclusive Light/Dark/System control modeled after the
+ * Codex Appearance settings. Arrow keys move and select within the group.
+ */
+declare function ThemeModeControl({
+  showLabels,
+  "aria-label": ariaLabel,
+  name,
+  disabled,
+  className
+}: ThemeModeControlProps): import("react").JSX.Element;
+//#endregion
+export { ThemeModeControl, ThemeModeControlProps };

package/dist/components/ThemeModeControl.js

@@ -0,0 +1,52 @@
+import { A as MoonIcon, W as SunIcon, k as MonitorIcon } from "../icons-CpfUer49.js";
+import { Radio, RadioGroup } from "./RadioGroup.js";
+import { useTheme } from "./ThemeProvider.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/ThemeModeControl.tsx
+const modes = [
+	{
+		value: "light",
+		label: "Light",
+		Icon: SunIcon
+	},
+	{
+		value: "dark",
+		label: "Dark",
+		Icon: MoonIcon
+	},
+	{
+		value: "system",
+		label: "System",
+		Icon: MonitorIcon
+	}
+];
+/**
+* A compact, mutually exclusive Light/Dark/System control modeled after the
+* Codex Appearance settings. Arrow keys move and select within the group.
+*/
+function ThemeModeControl({ showLabels = true, "aria-label": ariaLabel = "Theme", name = "theme", disabled = false, className = "" }) {
+	const { preference, setPreference } = useTheme();
+	const classes = [
+		"theme-mode-control",
+		!showLabels && "theme-mode-control--icons-only",
+		className
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(RadioGroup.Root, {
+		value: preference,
+		onValueChange: (nextValue) => setPreference(nextValue),
+		name,
+		disabled,
+		orientation: "horizontal",
+		"aria-label": ariaLabel,
+		className: classes,
+		"data-slot": "theme-mode-control",
+		children: modes.map(({ value, label, Icon }) => /* @__PURE__ */ jsxs(Radio.Root, {
+			value,
+			"aria-label": showLabels ? void 0 : `Use ${label.toLowerCase()} theme`,
+			className: "theme-mode-control__item",
+			children: [/* @__PURE__ */ jsx(Icon, {}), showLabels ? /* @__PURE__ */ jsx("span", { children: label }) : null]
+		}, value))
+	});
+}
+//#endregion
+export { ThemeModeControl };

package/dist/components/ThemeProvider.d.ts

@@ -0,0 +1,38 @@
+import { ResolvedTheme, ThemePreference } from "../utils/theme.js";
+import * as React from "react";
+
+//#region src/components/ThemeProvider.d.ts
+interface ThemeProviderProps {
+  children: React.ReactNode;
+  /** Controlled theme preference. */
+  value?: ThemePreference;
+  /** Initial uncontrolled preference when no stored preference exists. @default "system" */
+  defaultValue?: ThemePreference;
+  /** Called when a descendant requests a preference change. */
+  onValueChange?: (preference: ThemePreference) => void;
+  /** localStorage key. Pass `null` when the application owns persistence. */
+  storageKey?: string | null;
+}
+interface ThemeContextValue {
+  preference: ThemePreference;
+  resolvedTheme: ResolvedTheme;
+  setPreference: (preference: ThemePreference) => void;
+}
+/**
+ * Owns the application-wide theme preference and keeps document metadata,
+ * storage, cross-tab changes, and operating-system changes synchronized.
+ *
+ * Add `<meta name="color-scheme" content="light dark">` before styles and use
+ * `getThemeInitializationScript()` in the document head to avoid a flash when
+ * a saved override differs from the operating-system preference.
+ */
+declare function ThemeProvider({
+  children,
+  value,
+  defaultValue,
+  onValueChange,
+  storageKey
+}: ThemeProviderProps): React.JSX.Element;
+declare function useTheme(): ThemeContextValue;
+//#endregion
+export { ThemeContextValue, ThemeProvider, ThemeProviderProps, useTheme };