@mcp-b/react-components 0.1.1 → 0.1.2

package/dist/components/Queue.d.ts

@@ -0,0 +1,241 @@
+import { r as ButtonProps } from "../Button-QCM8ZKgR.js";
+import { CollapsiblePanelProps, CollapsibleRootProps, CollapsibleTriggerProps } from "./Collapsible.js";
+import { ScrollAreaRootProps } from "./ScrollArea.js";
+import * as React from "react";
+
+//#region src/components/Queue.d.ts
+interface QueueMessagePart {
+  type: string;
+  text?: string;
+  url?: string;
+  filename?: string;
+  mediaType?: string;
+}
+interface QueueMessage {
+  id: string;
+  parts: QueueMessagePart[];
+}
+interface QueueTodo {
+  id: string;
+  title: string;
+  description?: string;
+  status?: "pending" | "completed";
+}
+interface QueueProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Additional class names for layout only; do not override item states from apps. */
+  className?: string;
+  /** QueueSection children. */
+  children?: React.ReactNode;
+}
+/**
+ * Container for a grouped list of queue items (e.g. messages, todos,
+ * attachments). Compose with QueueSection as direct children. Adapted from
+ * Vercel AI Elements and restyled with Sigvelo CSS tokens.
+ *
+ * Use for agent work queues, todo groups, and attachment queues. Do not use it
+ * for navigation or arbitrary card lists.
+ *
+ * Sigvelo changes: uses shared Collapsible, ScrollArea, Badge, and Button
+ * components; normalizes Vercel-compatible `completed` status to `complete`;
+ * maps all styling to Sigvelo queue CSS tokens/classes.
+ *
+ * Section triggers inherit Collapsible keyboard behavior. Status indicators
+ * are decorative, so visible item text must carry the real meaning. Add new
+ * statuses or item affordances here when multiple apps need them.
+ *
+ * @example
+ * ```tsx
+ * <Queue>
+ *   <QueueSection>
+ *     <QueueSectionTrigger>
+ *       <QueueSectionLabel count={2}>Todos</QueueSectionLabel>
+ *     </QueueSectionTrigger>
+ *     <QueueSectionContent>
+ *       <QueueList>
+ *         <QueueItem status="active">
+ *           <QueueItemIndicator status="active" />
+ *           <QueueItemContent>Running checks</QueueItemContent>
+ *         </QueueItem>
+ *       </QueueList>
+ *     </QueueSectionContent>
+ *   </QueueSection>
+ * </Queue>
+ * ```
+ *
+ * @see {@link https://elements.ai-sdk.dev/components/queue | AI Elements Queue}
+ */
+declare function Queue({
+  className,
+  children,
+  ref,
+  ...props
+}: QueueProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface QueueSectionProps extends Omit<CollapsibleRootProps, "className" | "unstyled"> {
+  className?: string;
+}
+/**
+ * A collapsible section within a Queue. Holds a trigger label and a list
+ * of QueueItem children.
+ */
+declare function QueueSection({
+  className,
+  defaultOpen,
+  ref,
+  ...props
+}: QueueSectionProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface QueueSectionTriggerProps extends Omit<CollapsibleTriggerProps, "className" | "unstyled"> {
+  className?: string;
+}
+declare function QueueSectionTrigger({
+  className,
+  children,
+  ref,
+  ...props
+}: QueueSectionTriggerProps & {
+  ref?: React.Ref<HTMLButtonElement>;
+}): React.JSX.Element;
+interface QueueSectionLabelProps extends React.HTMLAttributes<HTMLSpanElement> {
+  /** Optional count rendered as a trailing badge. */
+  count?: number;
+  label?: string;
+  icon?: React.ReactNode;
+}
+declare function QueueSectionLabel({
+  className,
+  children,
+  count,
+  label,
+  icon,
+  ref,
+  ...props
+}: QueueSectionLabelProps & {
+  ref?: React.Ref<HTMLSpanElement>;
+}): React.JSX.Element;
+interface QueueListProps extends Omit<ScrollAreaRootProps, "className"> {
+  className?: string;
+}
+declare function QueueList({
+  className,
+  children,
+  ref,
+  ...props
+}: QueueListProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface QueueSectionContentProps extends Omit<CollapsiblePanelProps, "className" | "unstyled"> {
+  className?: string;
+}
+declare function QueueSectionContent({
+  className,
+  ref,
+  ...props
+}: QueueSectionContentProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+type QueueItemStatus = "pending" | "active" | "complete" | "completed";
+interface QueueItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
+  status?: QueueItemStatus;
+}
+declare function QueueItem({
+  className,
+  status,
+  children,
+  ref,
+  ...props
+}: QueueItemProps & {
+  ref?: React.Ref<HTMLLIElement>;
+}): React.JSX.Element;
+interface QueueItemIndicatorProps extends React.HTMLAttributes<HTMLSpanElement> {
+  status?: QueueItemStatus;
+  completed?: boolean;
+}
+declare function QueueItemIndicator({
+  className,
+  status,
+  completed,
+  ref,
+  ...props
+}: QueueItemIndicatorProps & {
+  ref?: React.Ref<HTMLSpanElement>;
+}): React.JSX.Element;
+interface QueueItemContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  completed?: boolean;
+}
+declare function QueueItemContent({
+  className,
+  children,
+  completed,
+  ref,
+  ...props
+}: QueueItemContentProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface QueueItemDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
+  completed?: boolean;
+}
+declare function QueueItemDescription({
+  className,
+  children,
+  completed,
+  ref,
+  ...props
+}: QueueItemDescriptionProps & {
+  ref?: React.Ref<HTMLParagraphElement>;
+}): React.JSX.Element;
+interface QueueItemActionsProps extends React.HTMLAttributes<HTMLDivElement> {}
+interface QueueItemActionProps extends Omit<ButtonProps, "variant" | "color" | "size" | "className"> {
+  className?: string;
+}
+declare function QueueItemActions({
+  className,
+  children,
+  ref,
+  ...props
+}: QueueItemActionsProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function QueueItemAction({
+  className,
+  ref,
+  ...props
+}: QueueItemActionProps & {
+  ref?: React.Ref<HTMLButtonElement>;
+}): React.JSX.Element;
+interface QueueItemAttachmentProps extends React.HTMLAttributes<HTMLDivElement> {}
+declare function QueueItemAttachment({
+  className,
+  children,
+  ref,
+  ...props
+}: QueueItemAttachmentProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface QueueItemImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {}
+declare function QueueItemImage({
+  className,
+  alt,
+  ref,
+  ...props
+}: QueueItemImageProps & {
+  ref?: React.Ref<HTMLImageElement>;
+}): React.JSX.Element;
+interface QueueItemFileProps extends React.HTMLAttributes<HTMLDivElement> {
+  name?: string;
+  size?: string;
+}
+declare function QueueItemFile({
+  className,
+  children,
+  name,
+  size,
+  ref,
+  ...props
+}: QueueItemFileProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+//#endregion
+export { Queue, QueueItem, QueueItemAction, QueueItemActionProps, QueueItemActions, QueueItemActionsProps, QueueItemAttachment, QueueItemAttachmentProps, QueueItemContent, QueueItemContentProps, QueueItemDescription, QueueItemDescriptionProps, QueueItemFile, QueueItemFileProps, QueueItemImage, QueueItemImageProps, QueueItemIndicator, QueueItemIndicatorProps, QueueItemProps, QueueItemStatus, QueueList, QueueListProps, QueueMessage, QueueMessagePart, QueueProps, QueueSection, QueueSectionContent, QueueSectionContentProps, QueueSectionLabel, QueueSectionLabelProps, QueueSectionProps, QueueSectionTrigger, QueueSectionTriggerProps, QueueTodo };

package/dist/components/Queue.js

@@ -0,0 +1,225 @@
+import { c as ChevronRightIcon, m as FileIcon, o as CheckIcon, u as DotIcon } from "../icons-BsWc8g4E.js";
+import { t as cx } from "../class-names-9UtZwb0J.js";
+import { Button } from "./Button.js";
+import { Badge } from "./Badge.js";
+import { CollapsiblePanel, CollapsibleRoot, CollapsibleTrigger } from "./Collapsible.js";
+import { ScrollArea } from "./ScrollArea.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Queue.tsx
+/**
+* Container for a grouped list of queue items (e.g. messages, todos,
+* attachments). Compose with QueueSection as direct children. Adapted from
+* Vercel AI Elements and restyled with Sigvelo CSS tokens.
+*
+* Use for agent work queues, todo groups, and attachment queues. Do not use it
+* for navigation or arbitrary card lists.
+*
+* Sigvelo changes: uses shared Collapsible, ScrollArea, Badge, and Button
+* components; normalizes Vercel-compatible `completed` status to `complete`;
+* maps all styling to Sigvelo queue CSS tokens/classes.
+*
+* Section triggers inherit Collapsible keyboard behavior. Status indicators
+* are decorative, so visible item text must carry the real meaning. Add new
+* statuses or item affordances here when multiple apps need them.
+*
+* @example
+* ```tsx
+* <Queue>
+*   <QueueSection>
+*     <QueueSectionTrigger>
+*       <QueueSectionLabel count={2}>Todos</QueueSectionLabel>
+*     </QueueSectionTrigger>
+*     <QueueSectionContent>
+*       <QueueList>
+*         <QueueItem status="active">
+*           <QueueItemIndicator status="active" />
+*           <QueueItemContent>Running checks</QueueItemContent>
+*         </QueueItem>
+*       </QueueList>
+*     </QueueSectionContent>
+*   </QueueSection>
+* </Queue>
+* ```
+*
+* @see {@link https://elements.ai-sdk.dev/components/queue | AI Elements Queue}
+*/
+function Queue({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("queue", className),
+		...props,
+		children
+	});
+}
+/**
+* A collapsible section within a Queue. Holds a trigger label and a list
+* of QueueItem children.
+*/
+function QueueSection({ className, defaultOpen = true, ref, ...props }) {
+	return /* @__PURE__ */ jsx(CollapsibleRoot, {
+		ref,
+		className: cx("queue__section", className),
+		defaultOpen,
+		...props,
+		unstyled: true
+	});
+}
+function QueueSectionTrigger({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsxs(CollapsibleTrigger, {
+		ref,
+		className: cx("queue__section-trigger", className),
+		...props,
+		unstyled: true,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "queue__section-icon",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
+		}), children]
+	});
+}
+function QueueSectionLabel({ className, children, count, label, icon, ref, ...props }) {
+	const content = children ?? (label ? `${count ?? ""} ${label}`.trim() : null);
+	return /* @__PURE__ */ jsxs("span", {
+		ref,
+		className: cx("queue__section-label", className),
+		...props,
+		children: [
+			icon,
+			/* @__PURE__ */ jsx("span", { children: content }),
+			children !== void 0 && count !== void 0 ? /* @__PURE__ */ jsx(Badge, {
+				color: "neutral",
+				size: "sm",
+				className: "queue__section-count",
+				children: count
+			}) : null
+		]
+	});
+}
+function QueueList({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsxs(ScrollArea, {
+		ref,
+		className: cx("queue__list", className),
+		...props,
+		children: [/* @__PURE__ */ jsx(ScrollArea.Viewport, {
+			className: "queue__list-viewport",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "queue__list-scroll",
+				children: /* @__PURE__ */ jsx("ul", {
+					className: "queue__list-inner",
+					children
+				})
+			})
+		}), /* @__PURE__ */ jsx(ScrollArea.Scrollbar, {
+			orientation: "vertical",
+			children: /* @__PURE__ */ jsx(ScrollArea.Thumb, {})
+		})]
+	});
+}
+function QueueSectionContent({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx(CollapsiblePanel, {
+		ref,
+		className: cx("queue__section-content", className),
+		...props,
+		unstyled: true
+	});
+}
+function normalizeQueueItemStatus(status) {
+	return status === "completed" ? "complete" : status;
+}
+function QueueItem({ className, status = "pending", children, ref, ...props }) {
+	const resolvedStatus = normalizeQueueItemStatus(status);
+	return /* @__PURE__ */ jsx("li", {
+		ref,
+		className: cx("queue__item", `queue__item--${resolvedStatus}`, className),
+		"data-status": resolvedStatus,
+		...props,
+		children
+	});
+}
+function QueueItemIndicator({ className, status = "pending", completed = false, ref, ...props }) {
+	const resolvedStatus = completed ? "complete" : normalizeQueueItemStatus(status);
+	const icon = resolvedStatus === "complete" ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx(DotIcon, {});
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		className: cx("queue__item-indicator", `queue__item-indicator--${resolvedStatus}`, className),
+		"aria-hidden": "true",
+		...props,
+		children: icon
+	});
+}
+function QueueItemContent({ className, children, completed = false, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("queue__item-content", completed && "queue__item-content--complete", className),
+		...props,
+		children
+	});
+}
+function QueueItemDescription({ className, children, completed = false, ref, ...props }) {
+	return /* @__PURE__ */ jsx("p", {
+		ref,
+		className: cx("queue__item-description", completed && "queue__item-description--complete", className),
+		...props,
+		children
+	});
+}
+function QueueItemActions({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("queue__item-actions", className),
+		...props,
+		children
+	});
+}
+function QueueItemAction({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx(Button, {
+		ref,
+		type: "button",
+		variant: "ghost",
+		color: "neutral",
+		size: "sm",
+		className: cx("queue__item-action", className),
+		...props
+	});
+}
+function QueueItemAttachment({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("queue__item-attachment", className),
+		...props,
+		children
+	});
+}
+function QueueItemImage({ className, alt = "", ref, ...props }) {
+	return /* @__PURE__ */ jsx("img", {
+		ref,
+		alt,
+		className: cx("queue__item-image", className),
+		...props
+	});
+}
+function QueueItemFile({ className, children, name, size, ref, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cx("queue__item-file", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "queue__item-file-icon",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ jsx(FileIcon, {})
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "queue__item-file-name",
+				children: children ?? name
+			}),
+			size ? /* @__PURE__ */ jsx("span", {
+				className: "queue__item-file-size",
+				children: size
+			}) : null
+		]
+	});
+}
+//#endregion
+export { Queue, QueueItem, QueueItemAction, QueueItemActions, QueueItemAttachment, QueueItemContent, QueueItemDescription, QueueItemFile, QueueItemImage, QueueItemIndicator, QueueList, QueueSection, QueueSectionContent, QueueSectionLabel, QueueSectionTrigger };

package/dist/components/RadioGroup.d.ts

@@ -0,0 +1,78 @@
+import * as React from "react";
+import { RadioGroup as RadioGroup$1 } from "@base-ui/react/radio-group";
+import { Radio as Radio$1 } from "@base-ui/react/radio";
+
+//#region src/components/RadioGroup.d.ts
+interface RadioGroupProps extends Omit<React.ComponentPropsWithRef<typeof RadioGroup$1>, "className"> {
+  className?: string;
+  /**
+   * The orientation of the radio group.
+   * @default 'vertical'
+   */
+  orientation?: "horizontal" | "vertical";
+}
+interface RadioProps extends Omit<React.ComponentPropsWithRef<typeof Radio$1.Root>, "className"> {
+  className?: string;
+}
+interface RadioIndicatorProps extends Omit<React.ComponentPropsWithRef<typeof Radio$1.Indicator>, "className"> {
+  className?: string;
+}
+/**
+ * A radio group component for selecting one option from a list.
+ *
+ * @example
+ * ```tsx
+ * <RadioGroup defaultValue="option1">
+ *   <div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
+ *     <Radio value="option1">
+ *       <RadioIndicator />
+ *     </Radio>
+ *     <Label>Option 1</Label>
+ *   </div>
+ *   <div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
+ *     <Radio value="option2">
+ *       <RadioIndicator />
+ *     </Radio>
+ *     <Label>Option 2</Label>
+ *   </div>
+ * </RadioGroup>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/radio-group | Base UI Radio Group}
+ */
+declare function RadioGroup({
+  orientation,
+  className,
+  ref,
+  ...props
+}: RadioGroupProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+/**
+ * A single radio button within a RadioGroup.
+ */
+declare function Radio({
+  className,
+  ref,
+  ...props
+}: RadioProps & {
+  ref?: React.Ref<HTMLButtonElement>;
+}): React.JSX.Element;
+declare function RadioGroupItem({
+  children,
+  ...props
+}: RadioProps & {
+  ref?: React.Ref<HTMLButtonElement>;
+}): React.JSX.Element;
+/**
+ * The visual indicator for a Radio button.
+ */
+declare function RadioIndicator({
+  className,
+  ref,
+  ...props
+}: RadioIndicatorProps & {
+  ref?: React.Ref<HTMLSpanElement>;
+}): React.JSX.Element;
+//#endregion
+export { Radio, RadioGroup, RadioGroupItem, RadioGroupProps, RadioIndicator, RadioIndicatorProps, RadioProps };

package/dist/components/RadioGroup.js

@@ -0,0 +1,72 @@
+import "react";
+import { jsx } from "react/jsx-runtime";
+import { RadioGroup as RadioGroup$1 } from "@base-ui/react/radio-group";
+import { Radio as Radio$1 } from "@base-ui/react/radio";
+//#region src/components/RadioGroup.tsx
+/**
+* A radio group component for selecting one option from a list.
+*
+* @example
+* ```tsx
+* <RadioGroup defaultValue="option1">
+*   <div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
+*     <Radio value="option1">
+*       <RadioIndicator />
+*     </Radio>
+*     <Label>Option 1</Label>
+*   </div>
+*   <div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
+*     <Radio value="option2">
+*       <RadioIndicator />
+*     </Radio>
+*     <Label>Option 2</Label>
+*   </div>
+* </RadioGroup>
+* ```
+*
+* @see {@link https://base-ui.com/react/components/radio-group | Base UI Radio Group}
+*/
+function RadioGroup({ orientation = "vertical", className = "", ref, ...props }) {
+	return /* @__PURE__ */ jsx(RadioGroup$1, {
+		ref,
+		"data-slot": "radio-group",
+		className: [
+			"radio-group",
+			`radio-group--${orientation}`,
+			className
+		].filter(Boolean).join(" "),
+		...props
+	});
+}
+/**
+* A single radio button within a RadioGroup.
+*/
+function Radio({ className = "", ref, ...props }) {
+	const classes = ["radio", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Radio$1.Root, {
+		ref,
+		"data-slot": "radio-group-item",
+		className: classes,
+		...props
+	});
+}
+function RadioGroupItem({ children, ...props }) {
+	return /* @__PURE__ */ jsx(Radio, {
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(RadioIndicator, {})
+	});
+}
+/**
+* The visual indicator for a Radio button.
+*/
+function RadioIndicator({ className = "", ref, ...props }) {
+	const classes = ["radio__indicator", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Radio$1.Indicator, {
+		ref,
+		"data-slot": "radio-group-indicator",
+		className: classes,
+		...props
+	});
+}
+//#endregion
+export { Radio, RadioGroup, RadioGroupItem, RadioIndicator };

package/dist/components/Reasoning.d.ts

@@ -0,0 +1,88 @@
+import { CollapsiblePanelProps, CollapsibleRootProps, CollapsibleTriggerProps } from "./Collapsible.js";
+import * as React from "react";
+
+//#region src/components/Reasoning.d.ts
+interface ReasoningContextValue {
+  isStreaming: boolean;
+  isOpen: boolean;
+  setIsOpen: (open: boolean) => void;
+  duration?: number;
+}
+declare function useReasoning(): ReasoningContextValue;
+interface ReasoningProps extends Omit<CollapsibleRootProps, "className" | "onOpenChange" | "unstyled"> {
+  className?: string;
+  /**
+   * Whether the model is currently generating reasoning. When true the
+   * component auto-opens; it auto-closes once streaming ends.
+   */
+  isStreaming?: boolean;
+  /**
+   * Elapsed reasoning time in seconds, shown in the trigger when finished.
+   * When omitted, the component measures the duration automatically.
+   */
+  duration?: number;
+  /** Called when the open state changes. */
+  onOpenChange?: (open: boolean) => void;
+}
+/**
+ * A collapsible "thinking" block for showing model reasoning (e.g. DeepSeek
+ * R1, OpenAI o-series). Auto-expands while streaming and collapses when done.
+ * Adapted from Vercel AI Elements and restyled with Sigvelo CSS tokens.
+ *
+ * @example
+ * ```tsx
+ * <Reasoning isStreaming={isThinking} duration={elapsed}>
+ *   <ReasoningTrigger />
+ *   <ReasoningContent>{reasoningText}</ReasoningContent>
+ * </Reasoning>
+ * ```
+ *
+ * @see {@link https://elements.ai-sdk.dev/components/reasoning | AI Elements Reasoning}
+ */
+declare function Reasoning({
+  className,
+  isStreaming,
+  duration,
+  open,
+  defaultOpen,
+  onOpenChange,
+  children,
+  ref,
+  ...props
+}: ReasoningProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface ReasoningTriggerProps extends Omit<CollapsibleTriggerProps, "className" | "unstyled"> {
+  className?: string;
+  getThinkingMessage?: (isStreaming: boolean, duration?: number) => React.ReactNode;
+}
+/**
+ * Trigger that toggles the reasoning panel. Shows "Thinking..." while
+ * streaming and "Thought for Ns" afterward.
+ */
+declare function ReasoningTrigger({
+  className,
+  children,
+  getThinkingMessage,
+  ref,
+  ...props
+}: ReasoningTriggerProps & {
+  ref?: React.Ref<HTMLButtonElement>;
+}): React.JSX.Element;
+interface ReasoningContentProps extends Omit<CollapsiblePanelProps, "className" | "unstyled"> {
+  className?: string;
+}
+/**
+ * The reasoning text panel. Accepts any React node but is optimized for
+ * long-form text; a muted left border visually distinguishes the block.
+ */
+declare function ReasoningContent({
+  className,
+  children,
+  ref,
+  ...props
+}: ReasoningContentProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+//#endregion
+export { Reasoning, ReasoningContent, ReasoningContentProps, ReasoningProps, ReasoningTrigger, ReasoningTriggerProps, useReasoning };