@botiverse/raft-ui 0.51.0 → 0.52.0

package/dist/components/text/text.mjs

@@ -0,0 +1,114 @@
+import { tv } from "../../lib/tv.mjs";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/text/text.tsx
+const textColorVariants = {
+	default: ["text-foreground"],
+	primary: ["text-brand-strong"],
+	information: ["text-info-strong"],
+	muted: ["text-foreground-muted"],
+	placeholder: ["text-foreground-hint"],
+	accent: ["text-attention-700"],
+	success: ["text-success"],
+	warning: ["text-warning"],
+	danger: ["text-danger"]
+};
+const heading = tv({
+	base: ["m-0 font-heading font-medium text-foreground"],
+	variants: {
+		level: {
+			1: ["text-[56px] tracking-[-0.01em] leading-16"],
+			2: ["text-5xl tracking-[-0.01em] leading-14"],
+			3: ["text-[40px] tracking-[-0.01em] leading-12"],
+			4: ["text-[32px] tracking-[-0.005em] leading-10"],
+			5: ["text-2xl leading-8"],
+			6: ["text-xl leading-7"]
+		},
+		variant: textColorVariants
+	},
+	defaultVariants: { level: 1 }
+});
+const sans = tv({
+	base: ["m-0 font-sans font-normal"],
+	variants: {
+		size: {
+			large: ["text-lg leading-7 text-foreground"],
+			body: ["text-base leading-6 text-foreground"],
+			small: ["text-sm leading-5 text-foreground-muted"],
+			caption: ["text-xs leading-4 text-foreground-muted"],
+			group: ["text-footnote font-bold text-foreground-hint"]
+		},
+		variant: textColorVariants
+	},
+	defaultVariants: { size: "body" }
+});
+const mono = tv({
+	base: ["m-0 font-mono font-normal"],
+	variants: {
+		size: {
+			code: ["text-sm leading-5 text-foreground"],
+			meta: ["text-xs leading-4 text-foreground-muted"],
+			tabular: ["text-sm tabular-nums leading-5 text-foreground"]
+		},
+		variant: textColorVariants
+	},
+	defaultVariants: { size: "code" }
+});
+function TextHeading({ level = 1, variant, className, render, ...props }) {
+	const defaultProps = { className: heading({
+		level,
+		variant,
+		className
+	}) };
+	return useRender({
+		defaultTagName: `h${level}`,
+		render,
+		props: mergeProps(defaultProps, props),
+		state: {
+			slot: "text-heading",
+			level,
+			variant
+		}
+	});
+}
+function TextSans({ size = "body", variant, className, render, ...props }) {
+	const defaultProps = { className: sans({
+		size,
+		variant,
+		className
+	}) };
+	return useRender({
+		defaultTagName: "p",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: {
+			slot: "text-sans",
+			size,
+			variant
+		}
+	});
+}
+function TextMono({ size = "code", variant, className, render, ...props }) {
+	const defaultProps = { className: mono({
+		size,
+		variant,
+		className
+	}) };
+	return useRender({
+		defaultTagName: "p",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: {
+			slot: "text-mono",
+			size,
+			variant
+		}
+	});
+}
+const Text = {
+	Heading: TextHeading,
+	Sans: TextSans,
+	Mono: TextMono
+};
+//#endregion
+export { Text, TextHeading, TextMono, TextSans };

package/dist/components/text-link/index.d.mts

@@ -0,0 +1,2 @@
+import { TextLink, TextLinkExternalIcon, TextLinkExternalIconProps, TextLinkProps, textLinkVariants } from "./text-link.mjs";
+export { TextLink, TextLinkExternalIcon, type TextLinkExternalIconProps, type TextLinkProps, textLinkVariants };

package/dist/components/text-link/text-link.d.mts

@@ -0,0 +1,36 @@
+import { VariantProps } from "../../lib/tv.mjs";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/text-link/text-link.d.ts
+export declare const textLinkVariants: import("tailwind-variants/lite").TVReturnType<{
+  variant: {
+    muted: string[];
+    strong: string[];
+  };
+}, undefined, string[], {
+  variant: {
+    muted: string[];
+    strong: string[];
+  };
+}, undefined, import("tailwind-variants/lite").TVReturnTypeLike<{
+  variant: {
+    muted: string[];
+    strong: string[];
+  };
+}, undefined>>;
+export type TextLinkProps = useRender.ComponentProps<"button"> & VariantProps<typeof textLinkVariants>;
+export declare function TextLink({ variant, className, render, ...props }: TextLinkProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type TextLinkExternalIconProps = {
+  /** Read by a screen reader after the link text, such as "(opens in a new tab)". Product copy, so the caller passes it. */
+  label?: string;
+  className?: string;
+};
+/**
+ * The ↗ after a link that leaves Raft (design/patterns/navigation.md#links-that-leave-raft):
+ * 0.857em (12px at 14px text, as the icons in a reference chip), 2px after the
+ * text, centred on the letters' cap height at every text size (0.7em/2 above
+ * the baseline; design/foundations/alignment.md#a-mark-that-leads-text). It
+ * sits in an inline-flex box, so the link's underline stops at the text and
+ * never runs under the arrow.
+ */
+export declare function TextLinkExternalIcon({ label, className }: TextLinkExternalIconProps): import("react").JSX.Element;
+//#endregion

package/dist/components/text-link/text-link.mjs

@@ -0,0 +1,60 @@
+import { cn } from "../../cn.mjs";
+import { tv } from "../../lib/tv.mjs";
+import { ArrowUpRight } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/text-link/text-link.tsx
+const textLinkVariants = tv({
+	base: [
+		"rounded-[2px]",
+		"decoration-[1.5px] underline-offset-[3px] not-disabled:hover:underline",
+		"outline-none focus-visible:shadow-focus",
+		"disabled:cursor-not-allowed disabled:text-foreground-disabled"
+	],
+	variants: { variant: {
+		muted: ["font-medium text-foreground-muted", "hover:text-foreground"],
+		strong: ["font-semibold text-foreground"]
+	} },
+	defaultVariants: { variant: "muted" }
+});
+function TextLink({ variant, className, render, ...props }) {
+	const defaultProps = {
+		className: textLinkVariants({
+			variant,
+			className
+		}),
+		...render ? {} : { type: "button" }
+	};
+	return useRender({
+		defaultTagName: "button",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "text-link" }
+	});
+}
+/**
+* The ↗ after a link that leaves Raft (design/patterns/navigation.md#links-that-leave-raft):
+* 0.857em (12px at 14px text, as the icons in a reference chip), 2px after the
+* text, centred on the letters' cap height at every text size (0.7em/2 above
+* the baseline; design/foundations/alignment.md#a-mark-that-leads-text). It
+* sits in an inline-flex box, so the link's underline stops at the text and
+* never runs under the arrow.
+*/
+function TextLinkExternalIcon({ label, className }) {
+	return /* @__PURE__ */ jsxs("span", {
+		"data-slot": "text-link-external-icon",
+		className: cn("ml-0.5 inline-flex align-[calc(0.7em/2-0.857em/2)]", className),
+		children: [/* @__PURE__ */ jsx(ArrowUpRight, {
+			"aria-hidden": "true",
+			focusable: "false",
+			className: "size-[0.857em]",
+			strokeWidth: 2
+		}), label ? /* @__PURE__ */ jsxs("span", {
+			className: "sr-only",
+			children: [" ", label]
+		}) : null]
+	});
+}
+//#endregion
+export { TextLink, TextLinkExternalIcon, textLinkVariants };

package/dist/components/text-selection-toolbar/index.d.mts

@@ -0,0 +1,3 @@
+import { TextSelectionToolbar, TextSelectionToolbarButton, TextSelectionToolbarButtonProps, TextSelectionToolbarProps, TextSelectionToolbarSeparator, TextSelectionToolbarSeparatorProps } from "./text-selection-toolbar.mjs";
+import { TextSelectionAnchor, createTextSelectionAnchor, getTextSelectionFocusRect } from "./text-selection-anchor.mjs";
+export { type TextSelectionAnchor, TextSelectionToolbar, TextSelectionToolbarButton, type TextSelectionToolbarButtonProps, type TextSelectionToolbarProps, TextSelectionToolbarSeparator, type TextSelectionToolbarSeparatorProps, createTextSelectionAnchor, getTextSelectionFocusRect };

package/dist/components/text-selection-toolbar/text-selection-anchor.d.mts

@@ -0,0 +1,22 @@
+//#region src/components/text-selection-toolbar/text-selection-anchor.d.ts
+export type TextSelectionAnchor = {
+  contextElement?: Element;
+  getBoundingClientRect: () => DOMRect;
+  getClientRects: () => DOMRect[];
+};
+/**
+ * The box of the line the selection's focus end is on: the text of the range
+ * on that line, not the whole range's bounding box (a whole-line or
+ * multi-block selection spans the row, and its center is nowhere near where
+ * the person let go). Element boxes are skipped, so a triple-click that ends
+ * at the start of the next block still lands on the last selected line.
+ */
+export declare function getTextSelectionFocusRect(range: Range, backward?: boolean): DOMRect;
+/**
+ * A positioning anchor for the toolbar over selected text: it measures the
+ * line the selection's focus end is on, each time it is read, so the toolbar
+ * follows the text when it scrolls. Pass it to `PopoverContent`'s `anchor`.
+ * Returns `null` when nothing is selected.
+ */
+export declare function createTextSelectionAnchor(selection: Selection, contextElement?: Element): TextSelectionAnchor | null;
+//#endregion

package/dist/components/text-selection-toolbar/text-selection-anchor.mjs

@@ -0,0 +1,106 @@
+//#region src/components/text-selection-toolbar/text-selection-anchor.ts
+const TEXT_NODE = 3;
+const SHOW_TEXT = 4;
+function toDOMRect({ top, right, bottom, left }) {
+	return {
+		x: left,
+		y: top,
+		top,
+		right,
+		bottom,
+		left,
+		width: right - left,
+		height: bottom - top,
+		toJSON() {
+			return {
+				x: left,
+				y: top,
+				top,
+				right,
+				bottom,
+				left,
+				width: right - left,
+				height: bottom - top
+			};
+		}
+	};
+}
+function textRects(range) {
+	const ownerDocument = range.startContainer.ownerDocument;
+	const root = range.commonAncestorContainer;
+	if (!ownerDocument) return [];
+	const rects = [];
+	const collect = (node) => {
+		const part = ownerDocument.createRange();
+		part.selectNodeContents(node);
+		if (node === range.startContainer) part.setStart(node, range.startOffset);
+		if (node === range.endContainer) part.setEnd(node, range.endOffset);
+		for (const rect of Array.from(part.getClientRects())) if (rect.width > 0 && rect.height > 0) rects.push(rect);
+	};
+	if (root.nodeType === TEXT_NODE) {
+		collect(root);
+		return rects;
+	}
+	const walker = ownerDocument.createTreeWalker(root, SHOW_TEXT);
+	for (let node = walker.nextNode(); node; node = walker.nextNode()) if (range.intersectsNode(node)) collect(node);
+	return rects;
+}
+function sameLine(a, b) {
+	return Math.min(a.bottom, b.bottom) - Math.max(a.top, b.top) > Math.min(a.bottom - a.top, b.bottom - b.top) / 2;
+}
+/**
+* The box of the line the selection's focus end is on: the text of the range
+* on that line, not the whole range's bounding box (a whole-line or
+* multi-block selection spans the row, and its center is nowhere near where
+* the person let go). Element boxes are skipped, so a triple-click that ends
+* at the start of the next block still lands on the last selected line.
+*/
+function getTextSelectionFocusRect(range, backward = false) {
+	const rects = textRects(range);
+	const focus = backward ? rects[0] : rects[rects.length - 1];
+	if (!focus) return range.getBoundingClientRect();
+	const line = {
+		top: focus.top,
+		right: focus.right,
+		bottom: focus.bottom,
+		left: focus.left
+	};
+	for (const rect of rects) {
+		if (!sameLine(rect, focus)) continue;
+		line.top = Math.min(line.top, rect.top);
+		line.right = Math.max(line.right, rect.right);
+		line.bottom = Math.max(line.bottom, rect.bottom);
+		line.left = Math.min(line.left, rect.left);
+	}
+	return toDOMRect(line);
+}
+function isBackward(selection) {
+	const direction = selection.direction;
+	if (direction) return direction === "backward";
+	const { anchorNode, anchorOffset, focusNode, focusOffset } = selection;
+	if (!anchorNode || !focusNode || !anchorNode.ownerDocument) return false;
+	if (anchorNode === focusNode) return focusOffset < anchorOffset;
+	const probe = anchorNode.ownerDocument.createRange();
+	probe.setStart(anchorNode, anchorOffset);
+	probe.setEnd(focusNode, focusOffset);
+	return probe.collapsed;
+}
+/**
+* A positioning anchor for the toolbar over selected text: it measures the
+* line the selection's focus end is on, each time it is read, so the toolbar
+* follows the text when it scrolls. Pass it to `PopoverContent`'s `anchor`.
+* Returns `null` when nothing is selected.
+*/
+function createTextSelectionAnchor(selection, contextElement) {
+	if (selection.isCollapsed || selection.rangeCount === 0) return null;
+	const range = selection.getRangeAt(0).cloneRange();
+	const backward = isBackward(selection);
+	const getBoundingClientRect = () => getTextSelectionFocusRect(range, backward);
+	return {
+		contextElement,
+		getBoundingClientRect,
+		getClientRects: () => [getBoundingClientRect()]
+	};
+}
+//#endregion
+export { createTextSelectionAnchor, getTextSelectionFocusRect };

package/dist/components/text-selection-toolbar/text-selection-toolbar.d.mts

@@ -0,0 +1,20 @@
+import { StyledProps } from "../../lib/styled-props.mjs";
+import { Toolbar } from "@base-ui/react/toolbar";
+//#region src/components/text-selection-toolbar/text-selection-toolbar.d.ts
+export type TextSelectionToolbarProps = StyledProps<Toolbar.Root.Props>;
+/**
+ * The toolbar that floats over selected text, with actions such as Quote,
+ * Copy and Comment: in a message, in an Artifact, anywhere text can be
+ * selected. Place it with `createTextSelectionAnchor` in a Popover.
+ */
+export declare function TextSelectionToolbar({ className, ...props }: TextSelectionToolbarProps): import("react").JSX.Element;
+export type TextSelectionToolbarButtonProps = StyledProps<Toolbar.Button.Props>;
+/**
+ * One action on the selected text: a 28px button with a 16px icon and a
+ * Title Case label that never wraps.
+ */
+export declare function TextSelectionToolbarButton({ className, ...props }: TextSelectionToolbarButtonProps): import("react").JSX.Element;
+export type TextSelectionToolbarSeparatorProps = StyledProps<Toolbar.Separator.Props>;
+/** A 20px line between groups of actions in the toolbar. */
+export declare function TextSelectionToolbarSeparator({ className, ...props }: TextSelectionToolbarSeparatorProps): import("react").JSX.Element;
+//#endregion

package/dist/components/text-selection-toolbar/text-selection-toolbar.mjs

@@ -0,0 +1,41 @@
+import { textSelectionToolbar } from "./text-selection-toolbar.recipe.mjs";
+import { jsx } from "react/jsx-runtime";
+import { Toolbar } from "@base-ui/react/toolbar";
+//#region src/components/text-selection-toolbar/text-selection-toolbar.tsx
+/**
+* The toolbar that floats over selected text, with actions such as Quote,
+* Copy and Comment: in a message, in an Artifact, anywhere text can be
+* selected. Place it with `createTextSelectionAnchor` in a Popover.
+*/
+function TextSelectionToolbar({ className, ...props }) {
+	const { toolbar } = textSelectionToolbar();
+	return /* @__PURE__ */ jsx(Toolbar.Root, {
+		"data-slot": "text-selection-toolbar",
+		className: toolbar({ className }),
+		...props
+	});
+}
+/**
+* One action on the selected text: a 28px button with a 16px icon and a
+* Title Case label that never wraps.
+*/
+function TextSelectionToolbarButton({ className, ...props }) {
+	const { button } = textSelectionToolbar();
+	return /* @__PURE__ */ jsx(Toolbar.Button, {
+		"data-slot": "text-selection-toolbar-button",
+		type: "button",
+		className: button({ className }),
+		...props
+	});
+}
+/** A 20px line between groups of actions in the toolbar. */
+function TextSelectionToolbarSeparator({ className, ...props }) {
+	const { separator } = textSelectionToolbar();
+	return /* @__PURE__ */ jsx(Toolbar.Separator, {
+		"data-slot": "text-selection-toolbar-separator",
+		className: separator({ className }),
+		...props
+	});
+}
+//#endregion
+export { TextSelectionToolbar, TextSelectionToolbarButton, TextSelectionToolbarSeparator };

package/dist/components/text-selection-toolbar/text-selection-toolbar.recipe.mjs

@@ -0,0 +1,19 @@
+import { tv } from "../../lib/tv.mjs";
+//#region src/components/text-selection-toolbar/text-selection-toolbar.recipe.ts
+const textSelectionToolbar = tv({ slots: {
+	toolbar: [
+		"flex min-w-0 items-center select-none",
+		"gap-1 overflow-visible rounded-container p-1 text-control font-bold",
+		"bg-layer-popover ring-1 ring-line-seam ring-inset shadow-float"
+	],
+	button: [
+		"flex shrink-0 items-center gap-1.5 outline-none transition-colors",
+		"h-7 rounded-chip px-2.5 whitespace-nowrap text-foreground",
+		"hover:bg-fill-medium active:bg-fill-medium",
+		"focus-visible:shadow-focus",
+		"[&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-foreground-muted"
+	],
+	separator: ["w-px shrink-0", "h-5 bg-line-hairline"]
+} });
+//#endregion
+export { textSelectionToolbar };

package/dist/components/textarea/index.d.mts

@@ -0,0 +1,2 @@
+import { Textarea, TextareaCounter, TextareaCounterProps, TextareaGroup, TextareaGroupProps, TextareaProps } from "./textarea.mjs";
+export { Textarea, TextareaCounter, type TextareaCounterProps, TextareaGroup, type TextareaGroupProps, type TextareaProps };

package/dist/components/textarea/textarea.d.mts

@@ -0,0 +1,16 @@
+import { DataAttributes } from "../../lib/data-attributes.mjs";
+import { WithoutChildren } from "../../lib/without-children.mjs";
+import { ComponentPropsWithRef } from "react";
+//#region src/components/textarea/textarea.d.ts
+export type TextareaProps = WithoutChildren<ComponentPropsWithRef<"textarea">> & DataAttributes;
+export type TextareaGroupProps = ComponentPropsWithRef<"div">;
+export declare function TextareaGroup({ className, ...props }: TextareaGroupProps): import("react").JSX.Element;
+export declare function Textarea({ className, "data-invalid": dataInvalid, ...props }: TextareaProps): import("react").JSX.Element;
+export interface TextareaCounterProps extends WithoutChildren<ComponentPropsWithRef<"span">> {
+  value?: string;
+  count?: number;
+  limit: number;
+  getLength?: (value: string) => number;
+}
+export declare function TextareaCounter({ value, count, limit, getLength, className, ...props }: TextareaCounterProps): import("react").JSX.Element;
+//#endregion

package/dist/components/textarea/textarea.mjs

@@ -0,0 +1,62 @@
+import { tv } from "../../lib/tv.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/textarea/textarea.tsx
+const textarea = tv({ slots: { root: [
+	"block w-full min-h-[calc(var(--field-line-height)*3+--spacing(6))] resize-y pl-3 pr-(--ta-pr,0.75rem)",
+	"scroll-pb-(--ta-scroll-pb,0)",
+	"font-heading text-field font-field outline-none",
+	"py-2.5",
+	"rounded-control border-[1.5px] border-line-field bg-layer-card",
+	"text-foreground placeholder:text-foreground-hint",
+	"shadow-none transition-shadow duration-90 ease-out focus-visible:shadow-focus",
+	"data-invalid:border-danger-strong",
+	"disabled:cursor-not-allowed disabled:resize-none disabled:border-line-hairline disabled:bg-fill-muted disabled:text-foreground-disabled disabled:placeholder:text-foreground-disabled"
+] } });
+const textareaGroup = tv({ slots: { root: ["w-full", "flex flex-col items-end gap-1.5"] } });
+const textareaCounter = tv({
+	slots: { root: [
+		"font-mono tabular-nums",
+		"text-mono-meta text-foreground-hint",
+		"group-data-[invalid]/field:font-bold group-data-invalid/field:text-danger-strong"
+	] },
+	variants: { overLimit: {
+		true: { root: ["font-bold text-danger-strong"] },
+		false: { root: "" }
+	} },
+	defaultVariants: { overLimit: false }
+});
+function TextareaGroup({ className, ...props }) {
+	const { root } = textareaGroup();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "textarea-group",
+		className: root({ className }),
+		...props
+	});
+}
+function Textarea({ className, "data-invalid": dataInvalid, ...props }) {
+	const { root } = textarea();
+	return /* @__PURE__ */ jsx("textarea", {
+		"data-slot": "textarea",
+		className: root({ className }),
+		...props,
+		"data-invalid": dataInvalid || void 0,
+		"aria-invalid": dataInvalid ? "true" : void 0
+	});
+}
+function TextareaCounter({ value, count, limit, getLength, className, ...props }) {
+	const text = value ?? "";
+	const length = count ?? getLength?.(text) ?? text.length;
+	const { root } = textareaCounter({ overLimit: length > limit });
+	return /* @__PURE__ */ jsxs("span", {
+		"data-slot": "textarea-counter",
+		className: root({ className }),
+		...props,
+		children: [
+			length,
+			"/",
+			limit
+		]
+	});
+}
+//#endregion
+export { Textarea, TextareaCounter, TextareaGroup };

package/dist/components/thread-panel/index.d.mts

@@ -0,0 +1,2 @@
+import { ThreadPanelActions, ThreadPanelActionsProps, ThreadPanelBody, ThreadPanelBodyProps, ThreadPanelContent, ThreadPanelContentProps, ThreadPanelFooter, ThreadPanelFooterProps, ThreadPanelHeader, ThreadPanelHeaderProps, ThreadPanelOriginalMessage, ThreadPanelOriginalMessageProps, ThreadPanelReplyCount, ThreadPanelReplyCountProps, ThreadPanelReplySummary, ThreadPanelReplySummaryProps, ThreadPanelRoot, ThreadPanelRootProps, ThreadPanelSearch, ThreadPanelSearchCount, ThreadPanelSearchCountProps, ThreadPanelSearchProps, ThreadPanelSearchTrailing, ThreadPanelSearchTrailingProps, ThreadPanelTitle, ThreadPanelTitleMeta, ThreadPanelTitleMetaProps, ThreadPanelTitleProps } from "./thread-panel.mjs";
+export { ThreadPanelActions, type ThreadPanelActionsProps, ThreadPanelBody, type ThreadPanelBodyProps, ThreadPanelContent, type ThreadPanelContentProps, ThreadPanelFooter, type ThreadPanelFooterProps, ThreadPanelHeader, type ThreadPanelHeaderProps, ThreadPanelOriginalMessage, type ThreadPanelOriginalMessageProps, ThreadPanelReplyCount, type ThreadPanelReplyCountProps, ThreadPanelReplySummary, type ThreadPanelReplySummaryProps, ThreadPanelRoot, type ThreadPanelRootProps, ThreadPanelSearch, ThreadPanelSearchCount, type ThreadPanelSearchCountProps, type ThreadPanelSearchProps, ThreadPanelSearchTrailing, type ThreadPanelSearchTrailingProps, ThreadPanelTitle, ThreadPanelTitleMeta, type ThreadPanelTitleMetaProps, type ThreadPanelTitleProps };

package/dist/components/thread-panel/thread-panel.d.mts

@@ -0,0 +1,31 @@
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/thread-panel/thread-panel.d.ts
+export type ThreadPanelRootProps = useRender.ComponentProps<"section">;
+export declare function ThreadPanelRoot({ className, render, ...props }: ThreadPanelRootProps): import("react").JSX.Element;
+export type ThreadPanelHeaderProps = useRender.ComponentProps<"div">;
+export declare function ThreadPanelHeader({ className, render, ...props }: ThreadPanelHeaderProps): import("react").JSX.Element;
+export type ThreadPanelContentProps = useRender.ComponentProps<"div">;
+export declare function ThreadPanelContent({ className, render, ...props }: ThreadPanelContentProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type ThreadPanelTitleProps = useRender.ComponentProps<"h2">;
+export declare function ThreadPanelTitle({ className, render, ...props }: ThreadPanelTitleProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type ThreadPanelTitleMetaProps = useRender.ComponentProps<"span">;
+export declare function ThreadPanelTitleMeta({ className, render, ...props }: ThreadPanelTitleMetaProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type ThreadPanelActionsProps = useRender.ComponentProps<"div">;
+export declare function ThreadPanelActions({ className, render, ...props }: ThreadPanelActionsProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type ThreadPanelBodyProps = useRender.ComponentProps<"div">;
+export declare function ThreadPanelBody({ className, render, ...props }: ThreadPanelBodyProps): import("react").JSX.Element;
+export type ThreadPanelOriginalMessageProps = Omit<useRender.ComponentProps<"div">, "render">;
+export declare function ThreadPanelOriginalMessage({ className, ...props }: ThreadPanelOriginalMessageProps): import("react").JSX.Element;
+export type ThreadPanelReplySummaryProps = useRender.ComponentProps<"div">;
+export declare function ThreadPanelReplySummary({ className, render, ...props }: ThreadPanelReplySummaryProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type ThreadPanelReplyCountProps = useRender.ComponentProps<"div">;
+export declare function ThreadPanelReplyCount({ className, render, ...props }: ThreadPanelReplyCountProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type ThreadPanelFooterProps = useRender.ComponentProps<"div">;
+export declare function ThreadPanelFooter({ className, render, ...props }: ThreadPanelFooterProps): import("react").JSX.Element;
+export type ThreadPanelSearchProps = useRender.ComponentProps<"div">;
+export declare function ThreadPanelSearch({ className, render, ...props }: ThreadPanelSearchProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type ThreadPanelSearchTrailingProps = useRender.ComponentProps<"div">;
+export declare function ThreadPanelSearchTrailing({ className, render, ...props }: ThreadPanelSearchTrailingProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type ThreadPanelSearchCountProps = useRender.ComponentProps<"div">;
+export declare function ThreadPanelSearchCount({ className, render, ...props }: ThreadPanelSearchCountProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion