@mcp-b/react-components 0.11.0 → 0.13.0

package/dist/Select-Dl_vF_Bt.d.ts

@@ -0,0 +1,213 @@
+import * as React from "react";
+import { Select } from "@base-ui/react/select";
+
+//#region src/components/Select.d.ts
+type SelectProps<Value = unknown> = Select.Root.Props<Value>;
+interface SelectTriggerProps extends Omit<Select.Trigger.Props, "className"> {
+  className?: string;
+  /**
+   * The size of the select trigger.
+   * @default 'default'
+   */
+  size?: "sm" | "md" | "default";
+}
+interface SelectValueProps extends Omit<Select.Value.Props, "children"> {
+  placeholder?: string;
+  children?: Select.Value.Props["children"];
+}
+interface SelectIconProps extends Omit<Select.Icon.Props, "className"> {
+  className?: string;
+}
+interface SelectPortalProps extends Select.Portal.Props {}
+interface SelectBackdropProps extends Omit<Select.Backdrop.Props, "className"> {
+  className?: string;
+}
+interface SelectPositionerProps extends Select.Positioner.Props {}
+interface SelectPopupProps extends Omit<Select.Popup.Props, "className"> {
+  className?: string;
+}
+interface SelectListProps extends Omit<Select.List.Props, "className"> {
+  className?: string;
+}
+interface SelectItemProps extends Omit<Select.Item.Props, "className"> {
+  className?: string;
+}
+interface SelectItemTextProps extends Omit<Select.ItemText.Props, "className"> {
+  className?: string;
+}
+interface SelectItemIndicatorProps extends Omit<Select.ItemIndicator.Props, "className"> {
+  className?: string;
+}
+interface SelectGroupProps extends Omit<Select.Group.Props, "className"> {
+  className?: string;
+  label?: string;
+}
+interface SelectGroupLabelProps extends Omit<Select.GroupLabel.Props, "className"> {
+  className?: string;
+}
+interface SelectSeparatorProps extends Omit<Select.Separator.Props, "className"> {
+  className?: string;
+}
+interface SelectScrollUpArrowProps extends Omit<Select.ScrollUpArrow.Props, "className"> {
+  className?: string;
+}
+interface SelectScrollDownArrowProps extends Omit<Select.ScrollDownArrow.Props, "className"> {
+  className?: string;
+}
+/**
+ * A select component for choosing from a list of options.
+ *
+ * @example
+ * ```tsx
+ * <Select.Root defaultValue="option1">
+ *   <Select.Trigger>
+ *     <Select.Value placeholder="Select..." />
+ *     <Select.Icon />
+ *   </Select.Trigger>
+ *   <Select.Portal>
+ *     <Select.Positioner>
+ *       <Select.Popup>
+ *         <Select.List>
+ *           <Select.Item value="option1"><Select.ItemText>Option 1</Select.ItemText></Select.Item>
+ *           <Select.Item value="option2"><Select.ItemText>Option 2</Select.ItemText></Select.Item>
+ *         </Select.List>
+ *       </Select.Popup>
+ *     </Select.Positioner>
+ *   </Select.Portal>
+ * </Select.Root>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/select | Base UI Select}
+ */
+declare function SelectRoot<Value>(props: SelectProps<Value>): React.JSX.Element;
+declare function SelectTrigger({
+  size,
+  className,
+  ref,
+  ...props
+}: SelectTriggerProps & {
+  ref?: React.Ref<HTMLButtonElement>;
+}): React.JSX.Element;
+declare function SelectValue({
+  placeholder,
+  children,
+  ref,
+  ...props
+}: SelectValueProps & {
+  ref?: React.Ref<HTMLSpanElement>;
+}): React.JSX.Element;
+declare function SelectIcon({
+  className,
+  children,
+  ref,
+  ...props
+}: SelectIconProps): React.JSX.Element;
+declare function SelectBackdrop({
+  className,
+  ref,
+  ...props
+}: SelectBackdropProps): React.JSX.Element;
+declare function SelectPositioner({
+  className,
+  ref,
+  ...props
+}: SelectPositionerProps & {
+  className?: string;
+} & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function SelectPopup({
+  className,
+  ref,
+  ...props
+}: SelectPopupProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function SelectList({
+  className,
+  ref,
+  ...props
+}: SelectListProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function SelectItem({
+  className,
+  value,
+  ref,
+  ...props
+}: SelectItemProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function SelectItemText({
+  className,
+  ref,
+  ...props
+}: SelectItemTextProps): React.JSX.Element;
+declare function SelectItemIndicator({
+  className,
+  children,
+  ref,
+  ...props
+}: SelectItemIndicatorProps): React.JSX.Element;
+declare function SelectGroup({
+  label,
+  className,
+  children,
+  ref,
+  ...props
+}: SelectGroupProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function SelectGroupLabel({
+  className,
+  ref,
+  ...props
+}: SelectGroupLabelProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function SelectSeparator({
+  className,
+  ref,
+  ...props
+}: SelectSeparatorProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function SelectScrollUpArrow({
+  className,
+  children,
+  ref,
+  ...props
+}: SelectScrollUpArrowProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function SelectScrollDownArrow({
+  className,
+  children,
+  ref,
+  ...props
+}: SelectScrollDownArrowProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare const Select$1: {
+  Root: typeof SelectRoot;
+  Label: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").SelectLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+  Trigger: typeof SelectTrigger;
+  Value: typeof SelectValue;
+  Icon: typeof SelectIcon;
+  Portal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").SelectPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+  Backdrop: typeof SelectBackdrop;
+  Positioner: typeof SelectPositioner;
+  Popup: typeof SelectPopup;
+  Arrow: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").SelectArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+  List: typeof SelectList;
+  Item: typeof SelectItem;
+  ItemText: typeof SelectItemText;
+  ItemIndicator: typeof SelectItemIndicator;
+  Separator: typeof SelectSeparator;
+  Group: typeof SelectGroup;
+  GroupLabel: typeof SelectGroupLabel;
+  ScrollUpArrow: typeof SelectScrollUpArrow;
+  ScrollDownArrow: typeof SelectScrollDownArrow;
+};
+//#endregion
+export { SelectTriggerProps as _, SelectIconProps as a, SelectItemTextProps as c, SelectPortalProps as d, SelectPositionerProps as f, SelectSeparatorProps as g, SelectScrollUpArrowProps as h, SelectGroupProps as i, SelectListProps as l, SelectScrollDownArrowProps as m, SelectBackdropProps as n, SelectItemIndicatorProps as o, SelectProps as p, SelectGroupLabelProps as r, SelectItemProps as s, Select$1 as t, SelectPopupProps as u, SelectValueProps as v };

package/dist/{Tabs-D9EAq09D.d.ts → Tabs-3Zc4tb9D.d.ts}

@@ -20,8 +20,6 @@ interface TabProps extends Omit<Tabs.Tab.Props, "className"> {
 interface TabPanelProps extends Omit<Tabs.Panel.Props, "className"> {
   className?: string;
 }
-type TabsTriggerProps = TabProps;
-type TabsContentProps = TabPanelProps;
 interface TabsListVariantsOptions {
   variant?: "default" | "line" | null;
   className?: string;
@@ -47,7 +45,7 @@ declare function tabsListVariants({
  *
  * @see {@link https://base-ui.com/react/components/tabs | Base UI Tabs}
  */
-declare function Tabs$1({
+declare function TabsRoot({
   orientation,
   variant,
   className,
@@ -78,7 +76,12 @@ declare function TabPanel({
 }: TabPanelProps & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
-declare const TabsTrigger: typeof Tab;
-declare const TabsContent: typeof TabPanel;
+declare const Tabs$1: {
+  Root: typeof TabsRoot;
+  List: typeof TabsList;
+  Tab: typeof Tab;
+  Indicator: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").TabsIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+  Panel: typeof TabPanel;
+};
 //#endregion
-export { Tabs$1 as a, TabsList as c, TabsProps as d, TabsTrigger as f, TabProps as i, TabsListProps as l, tabsListVariants as m, TabPanel as n, TabsContent as o, TabsTriggerProps as p, TabPanelProps as r, TabsContentProps as s, Tab as t, TabsListVariantsOptions as u };
+export { TabsListVariantsOptions as a, TabsListProps as i, TabProps as n, TabsProps as o, Tabs$1 as r, tabsListVariants as s, TabPanelProps as t };

package/dist/ThinkChat-7DQ2CogF.js

@@ -0,0 +1,222 @@
+import { Button } from "./components/Button.js";
+import { AgentChat } from "./components/AgentChat.js";
+import { ThinkChatContext, useThinkChatContext } from "./components/ThinkChatContext.js";
+import { ThinkChatActivity, createThinkChatActivityRenderer, renderThinkChatActivityPart } from "./components/ThinkChatActivity.js";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useAgentChat } from "@cloudflare/think/react";
+import { useAgent } from "agents/react";
+//#region src/components/_internal/think-approvals.ts
+/**
+* Ambient approvals belong to their stub. An explicit different stub may only
+* use approval state and settlement handlers supplied alongside that override.
+*/
+function resolveThinkApprovalProps(overrides, ambient) {
+	const inheritsAmbient = overrides.thinkStub === void 0 || overrides.thinkStub === ambient?.thinkStub;
+	return {
+		thinkStub: overrides.thinkStub ?? ambient?.thinkStub,
+		pendingApprovals: overrides.pendingApprovals ?? (inheritsAmbient ? ambient?.pendingApprovals : void 0),
+		onExecutionSettled: overrides.onExecutionSettled ?? (inheritsAmbient ? ambient?.onExecutionSettled : void 0)
+	};
+}
+//#endregion
+//#region src/components/ThinkChat.tsx
+function toAgentChatStatus(chat) {
+	if (chat.status === "submitted") return "submitted";
+	if (chat.isStreaming || chat.isRecovering) return "streaming";
+	return chat.status ?? "ready";
+}
+function useThinkPendingApprovals(stub, refreshKey) {
+	const requestIdRef = React.useRef(0);
+	const [state, setState] = React.useState(() => ({
+		source: stub,
+		pendingApprovals: []
+	}));
+	const refresh = React.useCallback(async () => {
+		const requestId = ++requestIdRef.current;
+		try {
+			const pendingApprovals = await stub.pendingApprovals();
+			if (requestId !== requestIdRef.current) return;
+			setState({
+				source: stub,
+				pendingApprovals
+			});
+		} catch {
+			if (requestId !== requestIdRef.current) return;
+			setState({
+				source: stub,
+				pendingApprovals: []
+			});
+		}
+	}, [stub]);
+	React.useEffect(() => {
+		requestIdRef.current += 1;
+		setState((current) => current.source === stub ? current : {
+			source: stub,
+			pendingApprovals: []
+		});
+		refresh();
+		return () => {
+			requestIdRef.current += 1;
+		};
+	}, [
+		refresh,
+		refreshKey,
+		stub
+	]);
+	const pendingApprovals = state.source === stub ? state.pendingApprovals : [];
+	return React.useMemo(() => ({
+		pendingApprovals,
+		refreshPendingApprovals: refresh
+	}), [pendingApprovals, refresh]);
+}
+/**
+* Chat UI for Cloudflare Think agents. Provide a `useAgentChat` value (or let
+* `ThinkChat.Root` create one) and `ThinkChat.Messages` renders the message
+* stream with agent work folded into collapsed Activity blocks.
+*/
+function ThinkChatProvider({ chat, children }) {
+	return /* @__PURE__ */ jsx(ThinkChatContext.Provider, {
+		value: chat,
+		children
+	});
+}
+/**
+* Batteries-included root: connects to the named Think agent (upstream's
+* `useAgent` + `useAgentChat`) and provides the live chat to everything
+* inside. If the app already owns the chat hook, use `ThinkChat.Provider`.
+*
+* @example
+* ```tsx
+* <ThinkChat.Root agent="my-agent" name="session-1">
+*   <ThinkChat.Messages />
+* </ThinkChat.Root>
+* ```
+*/
+function ThinkChatRoot({ agent: agentOption, name, children }) {
+	const agent = useAgent(typeof agentOption === "string" ? {
+		agent: agentOption,
+		name
+	} : {
+		...agentOption,
+		name: name ?? agentOption.name
+	});
+	const chat = useAgentChat({ agent });
+	const approvals = useThinkPendingApprovals(agent.stub, `${chat.messages.length}:${chat.status}`);
+	return /* @__PURE__ */ jsx(ThinkChatContext.Provider, {
+		value: chat,
+		children: /* @__PURE__ */ jsx(ThinkChatApprovalsContext.Provider, {
+			value: {
+				...approvals,
+				thinkStub: agent.stub
+			},
+			children
+		})
+	});
+}
+const ThinkChatApprovalsContext = React.createContext(null);
+/**
+* The full conversation surface — message list plus composer — with the
+* activity renderer as the default `renderPart`: runs of reasoning/tool parts
+* fold into one collapsed Activity block with derived labels and per-tool
+* panels. Extend for app-specific tools with `toolRenderers` (label/panel
+* inside the log) or `excludeTools` + your own `renderPart` (standalone
+* card) — see README "App-specific tools" and the Custom Tool Panel story.
+*/
+function ThinkChatMessages({ renderPart, excludeTools, toolRenderers, thinkStub, onExecutionSettled, pendingApprovals, notice, ...props }) {
+	const chat = useThinkChatContext("ThinkChat.Messages");
+	const approvals = React.useContext(ThinkChatApprovalsContext);
+	const status = toAgentChatStatus(chat);
+	const resolvedApprovals = resolveThinkApprovalProps({
+		thinkStub,
+		pendingApprovals,
+		onExecutionSettled
+	}, approvals && {
+		thinkStub: approvals.thinkStub,
+		pendingApprovals: approvals.pendingApprovals,
+		onExecutionSettled: approvals.refreshPendingApprovals
+	});
+	const defaultRenderPart = React.useMemo(() => createThinkChatActivityRenderer({
+		excludeTools,
+		toolRenderers
+	}), [excludeTools, toolRenderers]);
+	const retryMessageId = chat.error ? chat.messages.findLast((message) => message.role !== "system")?.id : void 0;
+	const defaultNotice = chat.isRecovering ? /* @__PURE__ */ jsx(Fragment, { children: "Reconnecting to the agent…" }) : chat.connectionError ? /* @__PURE__ */ jsxs("span", {
+		"data-tone": "danger",
+		children: ["Connection lost", chat.connectionError.reason ? ` — ${chat.connectionError.reason}` : ""]
+	}) : chat.error ? /* @__PURE__ */ jsxs("div", {
+		className: "agent-chat__turn-error",
+		"data-tone": "danger",
+		children: [/* @__PURE__ */ jsxs("p", {
+			className: "agent-chat__turn-error-message",
+			children: [
+				/* @__PURE__ */ jsx("strong", { children: "Response failed." }),
+				" ",
+				chat.error.message.trim() || "The response could not be completed."
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "agent-chat__turn-error-actions",
+			children: [/* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "ghost",
+				color: "neutral",
+				size: "lg",
+				onClick: chat.clearError,
+				children: "Dismiss"
+			}), retryMessageId ? /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				color: "primary",
+				size: "lg",
+				onClick: () => {
+					chat.clearError();
+					chat.regenerate({ messageId: retryMessageId });
+				},
+				children: "Try again"
+			}) : null]
+		})]
+	}) : void 0;
+	return /* @__PURE__ */ jsx(AgentChat, {
+		...props,
+		renderPart: renderPart ?? defaultRenderPart,
+		messages: chat.messages,
+		status,
+		onStop: chat.stop,
+		onApprovalResponse: chat.addToolApprovalResponse,
+		thinkStub: resolvedApprovals.thinkStub,
+		onExecutionSettled: resolvedApprovals.onExecutionSettled,
+		pendingApprovals: resolvedApprovals.pendingApprovals,
+		notice: notice ?? defaultNotice,
+		onRegenerate: (messageId) => void chat.regenerate({ messageId }),
+		onSubmit: ({ text, files }) => {
+			const trimmed = text.trim();
+			if (trimmed || files.length) chat.sendMessage({
+				text: trimmed,
+				files
+			});
+		}
+	});
+}
+/**
+* The ambient chat value from `ThinkChat.Root`/`Provider` — for custom tool
+* panels, cards, or composer actions that need `messages`, `status`, or
+* `sendMessage`. Throws outside a provider.
+*/
+function useThinkChat() {
+	return useThinkChatContext("useThinkChat");
+}
+/**
+* Namespace entry point. `Root` + `Messages` is the standard surface;
+* `Provider` + `useThinkChat` when the app owns the chat hook; `Activity`,
+* `renderActivityPart`, and `createActivityRenderer` for custom layouts and
+* app-specific tools.
+*/
+const ThinkChat = {
+	Provider: ThinkChatProvider,
+	Root: ThinkChatRoot,
+	Messages: ThinkChatMessages,
+	Activity: ThinkChatActivity,
+	renderActivityPart: renderThinkChatActivityPart,
+	createActivityRenderer: createThinkChatActivityRenderer
+};
+//#endregion
+export { useThinkChat as a, ThinkChatRoot as i, ThinkChatMessages as n, useThinkPendingApprovals as o, ThinkChatProvider as r, resolveThinkApprovalProps as s, ThinkChat as t };

package/dist/{ThinkChatActivity-B2UD95My.d.ts → ThinkChatActivity-Cuk28Js_.d.ts}

@@ -1,5 +1,5 @@
-import { a as AgentChatRenderPartContext, r as AgentChatProps } from "./AgentChat-B9LD_WF1.js";
-import { s as ThinkChatPart } from "./ThinkChatToolParts-DnUiZgCC.js";
+import { a as AgentChatRenderPartContext, r as AgentChatProps } from "./AgentChat-Br6tKEl8.js";
+import { s as ThinkChatPart } from "./ThinkChatToolParts-Cv4o7j6F.js";
 import * as React from "react";
 import { DynamicToolUIPart, ToolUIPart, UIMessage } from "ai";
 
@@ -63,10 +63,10 @@ declare function ThinkChatActivity({
  * state. Excluded tools split the run and return undefined so your own
  * renderPart (or AgentChat's generic activity row) takes over for them.
  */
-declare function createThinkChatActivityRenderer({
+declare function createThinkChatActivityRenderer<MessageT extends UIMessage = UIMessage>({
   excludeTools,
   toolRenderers
-}?: ThinkChatActivityRendererOptions): NonNullable<AgentChatProps["renderPart"]>;
+}?: ThinkChatActivityRendererOptions): NonNullable<AgentChatProps<MessageT>["renderPart"]>;
 /** Default activity renderer — `createThinkChatActivityRenderer()` with no overrides. */
 declare const renderThinkChatActivityPart: (context: AgentChatRenderPartContext<UIMessage<unknown, import("ai").UIDataTypes, import("ai").UITools>>) => React.ReactNode | undefined;
 //#endregion

package/dist/ThinkChatContext-C3Eb1Xpi.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { useAgentChat } from "@cloudflare/think/react";
+import { UIMessage } from "ai";
+
+//#region src/components/ThinkChatContext.d.ts
+/** The complete upstream Think chat hook value, preserving app state and message extensions. */
+type ThinkChatValue<State = unknown, MessageT extends UIMessage = UIMessage> = ReturnType<typeof useAgentChat<State, MessageT>>;
+/**
+ * React contexts cannot bind provider-specific generics. Keep the stored value
+ * opaque and restore the complete upstream hook type through the typed accessors.
+ */
+declare const ThinkChatContext: React.Context<unknown>;
+declare function useOptionalThinkChatContext<State = unknown, MessageT extends UIMessage = UIMessage>(): ThinkChatValue<State, MessageT> | null;
+declare function useThinkChatContext<State = unknown, MessageT extends UIMessage = UIMessage>(component: string): ThinkChatValue<State, MessageT>;
+//#endregion
+export { useThinkChatContext as i, ThinkChatValue as n, useOptionalThinkChatContext as r, ThinkChatContext as t };

package/dist/{ThinkChatToolParts-DnUiZgCC.d.ts → ThinkChatToolParts-Cv4o7j6F.d.ts}

@@ -1,7 +1,7 @@
 import { InferUITools, ToolUIPart, UIMessage } from "ai";
 import { ProxyToolInput, ProxyToolOutput } from "@cloudflare/codemode";
 import { QuickActionExtractInput, QuickActionPage, QuickActionScrapeInput, QuickActionToolName } from "@cloudflare/think/tools/browser";
-import { FetchResult } from "@cloudflare/think/tools/fetch";
+import { FetchResponseMode, FetchResult } from "@cloudflare/think/tools/fetch";
 import { WorkspaceTools } from "@cloudflare/think/tools/workspace";
 
 //#region src/components/ThinkChatToolParts.d.ts
@@ -39,11 +39,19 @@ type SkillUITools = {
 };
 type SkillToolPart = ToolUIPart<SkillUITools>;
 declare function isSkillToolPart(part: ThinkChatPart): part is SkillToolPart;
+type FetchToolInput = {
+  url: string;
+  path?: never;
+  response?: FetchResponseMode;
+  headers?: Record<string, string>;
+} | {
+  path: string;
+  url?: never;
+  response?: FetchResponseMode;
+  headers?: Record<string, string>;
+};
 type FetchToolPart = ToolUIPart<Record<string, {
-  input: {
-    url?: string;
-    path?: string;
-  };
+  input: FetchToolInput;
   output: FetchResult;
 }>>;
 declare function isFetchToolPart(part: ThinkChatPart): part is FetchToolPart;

package/dist/{attachment-preview-ChtC3HiU.js → attachment-preview-DIs50Q0h.js}

@@ -1,4 +1,4 @@
-import { Dialog, DialogContent, DialogTrigger } from "./components/Dialog.js";
+import { Dialog } from "./components/Dialog.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/_internal/attachment-preview.tsx
@@ -8,7 +8,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * the composer chips and message-side attachments.
 */
 function AttachmentPreview({ url, filename, children }) {
-	return /* @__PURE__ */ jsxs(Dialog, { children: [/* @__PURE__ */ jsx(DialogTrigger, { render: children }), /* @__PURE__ */ jsxs(DialogContent, {
+	return /* @__PURE__ */ jsxs(Dialog.Root, { children: [/* @__PURE__ */ jsx(Dialog.Trigger, { render: children }), /* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(Dialog.Backdrop, {}), /* @__PURE__ */ jsx(Dialog.Viewport, { children: /* @__PURE__ */ jsxs(Dialog.Popup, {
 		className: "attachment-preview",
 		"aria-label": filename ?? "Attachment preview",
 		children: [/* @__PURE__ */ jsx("img", {
@@ -19,7 +19,7 @@ function AttachmentPreview({ url, filename, children }) {
 			className: "attachment-preview__name",
 			children: filename
 		}) : null]
-	})] });
+	}) })] })] });
 }
 //#endregion
 export { AttachmentPreview as t };

package/dist/components/Accordion.d.ts

@@ -11,10 +11,12 @@ interface AccordionItemProps extends Omit<React.ComponentPropsWithRef<typeof Acc
 interface AccordionTriggerProps extends Omit<React.ComponentPropsWithRef<typeof Accordion$1.Trigger>, "className"> {
   className?: string;
 }
+interface AccordionHeaderProps extends Omit<Accordion$1.Header.Props, "className"> {
+  className?: string;
+}
 interface AccordionPanelProps extends Omit<React.ComponentPropsWithRef<typeof Accordion$1.Panel>, "className"> {
   className?: string;
 }
-type AccordionContentProps = AccordionPanelProps;
 /**
  * An accordion component for showing collapsible content sections.
  *
@@ -34,7 +36,7 @@ type AccordionContentProps = AccordionPanelProps;
  *
  * @see {@link https://base-ui.com/react/components/accordion | Base UI Accordion}
  */
-declare function Accordion({
+declare function AccordionRoot({
   className,
   ref,
   ...props
@@ -51,16 +53,19 @@ declare function AccordionItem({
 }: AccordionItemProps & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
+declare function AccordionHeader({
+  className,
+  ref,
+  ...props
+}: AccordionHeaderProps): React.JSX.Element;
 /**
  * The header/trigger that toggles an AccordionItem.
  */
-declare const AccordionHeader: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").AccordionHeaderProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
 /**
  * The clickable trigger button within an AccordionItem.
  */
 declare function AccordionTrigger({
   className,
-  children,
   ref,
   ...props
 }: AccordionTriggerProps & {
@@ -76,6 +81,12 @@ declare function AccordionPanel({
 }: AccordionPanelProps & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
-declare const AccordionContent: typeof AccordionPanel;
+declare const Accordion: {
+  Root: typeof AccordionRoot;
+  Item: typeof AccordionItem;
+  Header: typeof AccordionHeader;
+  Trigger: typeof AccordionTrigger;
+  Panel: typeof AccordionPanel;
+};
 //#endregion
-export { Accordion, AccordionContent, AccordionContentProps, AccordionHeader, AccordionItem, AccordionItemProps, AccordionPanel, AccordionPanelProps, AccordionProps, AccordionTrigger, AccordionTriggerProps };
+export { Accordion, AccordionHeaderProps, AccordionItemProps, AccordionPanelProps, AccordionProps, AccordionTriggerProps };