panelui-web 0.10.0 → 0.11.0

package/dist/components/lane-board/index.js

@@ -1,5 +1,5 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /**
  * LaneBoard — lanes side by side, each holding cards that can be dragged
  * within a lane and from one lane to another.
@@ -46,6 +46,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ScrollArea } from '@base-ui/react/scroll-area';
 import { useCallback, useEffect, useLayoutEffect, useRef, useState, } from 'react';
 import { tv } from 'tailwind-variants';
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
 const laneBoardVariants = tv({
     slots: {
         root: 'relative w-full',
@@ -186,7 +188,7 @@ function whereIs(lanes, id) {
     }
     return null;
 }
-function LaneBoardRoot({ lanes: controlled, defaultLanes, onLanesChange, onMove, renderCard, renderLaneFooter, cardName = (card) => card.id, label = 'Board', height = '28rem', className, style, ...props }) {
+function LaneBoardRoot({ lanes: controlled, defaultLanes, onLanesChange, onMove, renderCard, renderLaneFooter, cardName = (card) => card.id, label = 'Board', height = '28rem', className, style, render, ...props }) {
     const slots = laneBoardVariants();
     const [internal, setInternal] = useState(defaultLanes ?? []);
     const settled = controlled ?? internal;
@@ -605,83 +607,121 @@ function LaneBoardRoot({ lanes: controlled, defaultLanes, onLanesChange, onMove,
     });
     const carried = carry ? whereIs(shown, carry.id) : null;
     const carriedLane = carried ? shown.find((lane) => lane.id === carried.lane) : undefined;
-    return (_jsxs("div", { ref: root, role: "group", "aria-label": label, className: slots.root({ className }), style: { height: height === 'auto' ? undefined : height, ...style }, ...props, children: [_jsxs(ScrollArea.Root, { className: slots.board(), children: [_jsx(ScrollArea.Viewport, { ref: scroller, className: slots.boardViewport(), children: _jsx("div", { className: slots.lanes(), children: shown.map((lane) => (_jsxs("section", { ref: (node) => {
-                                    if (node)
-                                        sections.current.set(lane.id, node);
-                                    else
-                                        sections.current.delete(lane.id);
-                                }, "aria-label": typeof lane.title === 'string' ? lane.title : undefined, "data-over": carried?.lane === lane.id ? '' : undefined, className: laneBoardVariants({ over: carried?.lane === lane.id }).lane(), children: [_jsxs("header", { className: slots.laneHeader(), children: [_jsxs("div", { className: slots.laneHeading(), children: [lane.color ? (_jsx("span", { "aria-hidden": "true", className: laneBoardVariants({ color: lane.color }).laneDot() })) : null, _jsx("h3", { className: slots.laneTitle(), children: lane.title })] }), _jsx("span", { className: laneBoardVariants({
-                                                    full: lane.limit !== undefined && lane.cards.length > lane.limit,
-                                                }).laneCount(), children: lane.limit === undefined
-                                                    ? lane.cards.length
-                                                    : `${lane.cards.length}/${lane.limit}` })] }), _jsxs(ScrollArea.Root, { className: slots.laneScroller(), children: [_jsx(ScrollArea.Viewport, { ref: (node) => {
-                                                    if (node)
-                                                        viewports.current.set(lane.id, node);
-                                                    else
-                                                        viewports.current.delete(lane.id);
-                                                }, className: slots.laneViewport(), children: _jsx("ol", { className: slots.list(), children: lane.cards.map((card) => {
-                                                        const isCarried = carry?.id === card.id;
-                                                        const state = !isCarried
-                                                            ? 'rest'
-                                                            : carry.by === 'pointer'
-                                                                ? 'placeholder'
-                                                                : 'held';
-                                                        return (_jsx("li", { ref: (node) => {
-                                                                if (node)
-                                                                    cards.current.set(card.id, node);
-                                                                else
-                                                                    cards.current.delete(card.id);
-                                                            }, tabIndex: 0, "aria-roledescription": "Card that can be moved", "aria-label": cardName(card), "data-card": card.id, "data-carried": isCarried ? carry.by : undefined, className: laneBoardVariants({ state }).card(), onPointerDown: (event) => onPointerDown(event, card.id), onKeyDown: (event) => onKeyDown(event, card), onBlur: () => {
-                                                                // Focus leaving a card held with the keyboard puts it
-                                                                // back: nothing is steering it any more.
-                                                                if (carry?.by === 'keys' &&
-                                                                    carry.id === card.id &&
-                                                                    !cards.current.get(card.id)?.matches(':focus')) {
-                                                                    requestAnimationFrame(() => {
-                                                                        if (document.activeElement !== cards.current.get(card.id)) {
-                                                                            setDraft(null);
-                                                                            setCarry(null);
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({
+            ref: root,
+            role: 'group',
+            'aria-label': label,
+            className: slots.root({ className }),
+            style: { height: height === 'auto' ? undefined : height, ...style },
+            children: (_jsxs(_Fragment, { children: [_jsxs(ScrollArea.Root, { className: slots.board(), children: [_jsx(ScrollArea.Viewport, { ref: scroller, className: slots.boardViewport(), children: _jsx("div", { className: slots.lanes(), children: shown.map((lane) => (_jsxs("section", { ref: (node) => {
+                                            if (node)
+                                                sections.current.set(lane.id, node);
+                                            else
+                                                sections.current.delete(lane.id);
+                                        }, "aria-label": typeof lane.title === 'string' ? lane.title : undefined, "data-over": carried?.lane === lane.id ? '' : undefined, className: laneBoardVariants({ over: carried?.lane === lane.id }).lane(), children: [_jsxs("header", { className: slots.laneHeader(), children: [_jsxs("div", { className: slots.laneHeading(), children: [lane.color ? (_jsx("span", { "aria-hidden": "true", className: laneBoardVariants({ color: lane.color }).laneDot() })) : null, _jsx("h3", { className: slots.laneTitle(), children: lane.title })] }), _jsx("span", { className: laneBoardVariants({
+                                                            full: lane.limit !== undefined && lane.cards.length > lane.limit,
+                                                        }).laneCount(), children: lane.limit === undefined ? lane.cards.length : `${lane.cards.length}/${lane.limit}` })] }), _jsxs(ScrollArea.Root, { className: slots.laneScroller(), children: [_jsx(ScrollArea.Viewport, { ref: (node) => {
+                                                            if (node)
+                                                                viewports.current.set(lane.id, node);
+                                                            else
+                                                                viewports.current.delete(lane.id);
+                                                        }, className: slots.laneViewport(), children: _jsx("ol", { className: slots.list(), children: lane.cards.map((card) => {
+                                                                const isCarried = carry?.id === card.id;
+                                                                const state = !isCarried ? 'rest' : carry.by === 'pointer' ? 'placeholder' : 'held';
+                                                                return (_jsx("li", { ref: (node) => {
+                                                                        if (node)
+                                                                            cards.current.set(card.id, node);
+                                                                        else
+                                                                            cards.current.delete(card.id);
+                                                                    }, tabIndex: 0, "aria-roledescription": "Card that can be moved", "aria-label": cardName(card), "data-card": card.id, "data-carried": isCarried ? carry.by : undefined, className: laneBoardVariants({ state }).card(), onPointerDown: (event) => onPointerDown(event, card.id), onKeyDown: (event) => onKeyDown(event, card), onBlur: () => {
+                                                                        // Focus leaving a card held with the keyboard puts it
+                                                                        // back: nothing is steering it any more.
+                                                                        if (carry?.by === 'keys' &&
+                                                                            carry.id === card.id &&
+                                                                            !cards.current.get(card.id)?.matches(':focus')) {
+                                                                            requestAnimationFrame(() => {
+                                                                                if (document.activeElement !== cards.current.get(card.id)) {
+                                                                                    setDraft(null);
+                                                                                    setCarry(null);
+                                                                                }
+                                                                            });
                                                                         }
-                                                                    });
-                                                                }
-                                                            }, children: renderCard(card, { lane, carried: isCarried }) }, card.id));
-                                                    }) }) }), _jsx(ScrollArea.Scrollbar, { orientation: "vertical", className: slots.scrollbar(), children: _jsx(ScrollArea.Thumb, { className: slots.thumb() }) })] }), _jsx("div", { className: slots.laneFooter(), children: renderLaneFooter?.(lane) })] }, lane.id))) }) }), _jsx(ScrollArea.Scrollbar, { orientation: "horizontal", className: slots.scrollbar(), children: _jsx(ScrollArea.Thumb, { className: slots.thumb() }) })] }), carry?.by === 'pointer' && carried && carriedLane ? (_jsx("div", { ref: overlay, "aria-hidden": "true", className: slots.overlay(), style: { width: drag.current?.width }, children: renderCard(carried.card, { lane: carriedLane, carried: true }) })) : null, _jsx("span", { "aria-live": "assertive", className: "sr-only", children: said })] }));
+                                                                    }, children: renderCard(card, { lane, carried: isCarried }) }, card.id));
+                                                            }) }) }), _jsx(ScrollArea.Scrollbar, { orientation: "vertical", className: slots.scrollbar(), children: _jsx(ScrollArea.Thumb, { className: slots.thumb() }) })] }), _jsx("div", { className: slots.laneFooter(), children: renderLaneFooter?.(lane) })] }, lane.id))) }) }), _jsx(ScrollArea.Scrollbar, { orientation: "horizontal", className: slots.scrollbar(), children: _jsx(ScrollArea.Thumb, { className: slots.thumb() }) })] }), carry?.by === 'pointer' && carried && carriedLane ? (_jsx("div", { ref: overlay, "aria-hidden": "true", className: slots.overlay(), style: { width: drag.current?.width }, children: renderCard(carried.card, { lane: carriedLane, carried: true }) })) : null, _jsx("span", { "aria-live": "assertive", className: "sr-only", children: said })] })),
+        }, props),
+    });
 }
 LaneBoardRoot.displayName = 'LaneBoard';
 /** A card's name. */
-function LaneBoardTitle({ className, ...props }) {
-    return _jsx("div", { className: laneBoardVariants().title({ className }), ...props });
+function LaneBoardTitle({ className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({ className: laneBoardVariants().title({ className }) }, props),
+    });
 }
 LaneBoardTitle.displayName = 'LaneBoard.Title';
 /** A card's reference, in a fixed-width face so a column of them lines up. */
-function LaneBoardCode({ className, ...props }) {
-    return _jsx("div", { className: laneBoardVariants().code({ className }), ...props });
+function LaneBoardCode({ className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({ className: laneBoardVariants().code({ className }) }, props),
+    });
 }
 LaneBoardCode.displayName = 'LaneBoard.Code';
 /** The last line of a card: something at each end. */
-function LaneBoardRow({ className, ...props }) {
-    return _jsx("div", { className: laneBoardVariants().row({ className }), ...props });
+function LaneBoardRow({ className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({ className: laneBoardVariants().row({ className }) }, props),
+    });
 }
 LaneBoardRow.displayName = 'LaneBoard.Row';
 /** How far along a card is, as a row of dashes with the done ones lit. */
-function LaneBoardSteps({ value, max = 5, color = 'primary', label = 'Progress', className, ...props }) {
+function LaneBoardSteps({ value, max = 5, color = 'primary', label = 'Progress', className, render, ...props }) {
     const slots = laneBoardVariants({ color });
-    return (_jsx("div", { role: "img", "aria-label": `${label}: ${value} of ${max}`, className: slots.steps({ className }), ...props, children: Array.from({ length: max }, (_, index) => (_jsx("span", { className: laneBoardVariants({ lit: index < value }).step() }, index))) }));
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({
+            role: 'img',
+            'aria-label': `${label}: ${value} of ${max}`,
+            className: slots.steps({ className }),
+            children: (_jsx(_Fragment, { children: Array.from({ length: max }, (_, index) => (_jsx("span", { className: laneBoardVariants({ lit: index < value }).step() }, index))) })),
+        }, props),
+    });
 }
 LaneBoardSteps.displayName = 'LaneBoard.Steps';
 /** A word in a pill, for a card's state. */
-function LaneBoardTag({ color = 'primary', className, ...props }) {
-    return _jsx("span", { className: laneBoardVariants({ color }).tag({ className }), ...props });
+function LaneBoardTag({ color = 'primary', className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'span',
+        render,
+        props: mergeProps({ className: laneBoardVariants({ color }).tag({ className }) }, props),
+    });
 }
 LaneBoardTag.displayName = 'LaneBoard.Tag';
 /** A short figure at the end of a card's last line: a time, a count. */
-function LaneBoardMeta({ className, ...props }) {
-    return _jsx("span", { className: laneBoardVariants().meta({ className }), ...props });
+function LaneBoardMeta({ className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'span',
+        render,
+        props: mergeProps({ className: laneBoardVariants().meta({ className }) }, props),
+    });
 }
 LaneBoardMeta.displayName = 'LaneBoard.Meta';
 /** Who a card belongs to, as initials in a small circle. */
-function LaneBoardAvatar({ className, ...props }) {
-    return _jsx("span", { "data-slot": "lane-board-avatar", className: laneBoardVariants().avatar({ className }), ...props });
+function LaneBoardAvatar({ className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'span',
+        render,
+        props: mergeProps({ 'data-slot': 'lane-board-avatar', className: laneBoardVariants().avatar({ className }) }, props),
+    });
 }
 LaneBoardAvatar.displayName = 'LaneBoard.Avatar';
 export const LaneBoard = Object.assign(LaneBoardRoot, {
@@ -695,4 +735,4 @@ export const LaneBoard = Object.assign(LaneBoardRoot, {
 });
 /* By name as well, for a Server Component, which cannot dot into a client
    module. */
-export { LaneBoardTitle, LaneBoardCode, LaneBoardRow, LaneBoardSteps, LaneBoardTag, LaneBoardMeta, LaneBoardAvatar, };
+export { LaneBoardTitle, LaneBoardCode, LaneBoardRow, LaneBoardSteps, LaneBoardTag, LaneBoardMeta, LaneBoardAvatar };

package/dist/components/menu/index.d.ts

@@ -42,6 +42,12 @@
  */
 import { Menu as BaseMenu } from '@base-ui/react/menu';
 import type { ComponentProps, ReactNode } from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { ElementType as RenderElementType } from 'react';
+/** Draws a part as another element, or composes it with a component: `render={<a href="/" />}`. */
+type RenderProp<Tag extends RenderElementType> = {
+    render?: useRender.ComponentProps<Tag>['render'];
+};
 export interface MenuProps extends BaseMenu.Root.Props {
 }
 /** Holds whether the menu is open. Takes `open`/`onOpenChange`, `defaultOpen` and `modal`. */
@@ -157,28 +163,28 @@ declare namespace MenuGroupLabel {
 export interface MenuSeparatorProps extends ComponentProps<'div'> {
 }
 /** A rule between groups of items. */
-declare function MenuSeparator({ className, ...props }: MenuSeparatorProps): import("react").JSX.Element;
+declare function MenuSeparator({ className, render, ...props }: MenuSeparatorProps & RenderProp<'div'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace MenuSeparator {
     var displayName: string;
 }
 export interface MenuDescriptionProps extends ComponentProps<'span'> {
 }
 /** What an item does, in quieter words after its label. */
-declare function MenuDescription({ className, ...props }: MenuDescriptionProps): import("react").JSX.Element;
+declare function MenuDescription({ className, render, ...props }: MenuDescriptionProps & RenderProp<'span'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace MenuDescription {
     var displayName: string;
 }
 export interface MenuShortcutProps extends ComponentProps<'kbd'> {
 }
 /** The keys for an item, at its end. It only shows them: wire the keys up where the action lives. */
-declare function MenuShortcut({ className, ...props }: MenuShortcutProps): import("react").JSX.Element;
+declare function MenuShortcut({ className, render, ...props }: MenuShortcutProps & RenderProp<'kbd'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace MenuShortcut {
     var displayName: string;
 }
 export interface MenuBadgeProps extends ComponentProps<'span'> {
 }
 /** A small count or flag at an item's end: how many need attention, or that something is new. */
-declare function MenuBadge({ className, ...props }: MenuBadgeProps): import("react").JSX.Element;
+declare function MenuBadge({ className, render, ...props }: MenuBadgeProps & RenderProp<'span'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace MenuBadge {
     var displayName: string;
 }

package/dist/components/menu/index.js

@@ -44,6 +44,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { Menu as BaseMenu } from '@base-ui/react/menu';
 import { tv } from 'tailwind-variants';
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
 const menuVariants = tv({
     slots: {
         positioner: 'z-50 outline-none',
@@ -113,7 +115,7 @@ function MenuCheckboxItem({ className, children, ...props }) {
 MenuCheckboxItem.displayName = 'Menu.CheckboxItem';
 /** Radio items of which one is chosen. Takes `value` and `onValueChange`. */
 function MenuRadioGroup({ className, ...props }) {
-    return _jsx(BaseMenu.RadioGroup, { "data-slot": "menu-radio-group", className: menuVariants().group({ className }), ...props });
+    return (_jsx(BaseMenu.RadioGroup, { "data-slot": "menu-radio-group", className: menuVariants().group({ className }), ...props }));
 }
 MenuRadioGroup.displayName = 'Menu.RadioGroup';
 /** One choice in a radio group, with a check at its end while chosen. */
@@ -145,27 +147,43 @@ function MenuGroup({ className, ...props }) {
 MenuGroup.displayName = 'Menu.Group';
 /** The heading of a group. Screen readers announce the group by it. */
 function MenuGroupLabel({ className, ...props }) {
-    return _jsx(BaseMenu.GroupLabel, { "data-slot": "menu-group-label", className: menuVariants().groupLabel({ className }), ...props });
+    return (_jsx(BaseMenu.GroupLabel, { "data-slot": "menu-group-label", className: menuVariants().groupLabel({ className }), ...props }));
 }
 MenuGroupLabel.displayName = 'Menu.GroupLabel';
 /** A rule between groups of items. */
-function MenuSeparator({ className, ...props }) {
-    return _jsx("div", { role: "separator", "data-slot": "menu-separator", className: menuVariants().separator({ className }), ...props });
+function MenuSeparator({ className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({ role: 'separator', 'data-slot': 'menu-separator', className: menuVariants().separator({ className }) }, props),
+    });
 }
 MenuSeparator.displayName = 'Menu.Separator';
 /** What an item does, in quieter words after its label. */
-function MenuDescription({ className, ...props }) {
-    return _jsx("span", { "data-slot": "menu-description", className: menuVariants().description({ className }), ...props });
+function MenuDescription({ className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'span',
+        render,
+        props: mergeProps({ 'data-slot': 'menu-description', className: menuVariants().description({ className }) }, props),
+    });
 }
 MenuDescription.displayName = 'Menu.Description';
 /** The keys for an item, at its end. It only shows them: wire the keys up where the action lives. */
-function MenuShortcut({ className, ...props }) {
-    return _jsx("kbd", { "data-slot": "menu-shortcut", className: menuVariants().shortcut({ className }), ...props });
+function MenuShortcut({ className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'kbd',
+        render,
+        props: mergeProps({ 'data-slot': 'menu-shortcut', className: menuVariants().shortcut({ className }) }, props),
+    });
 }
 MenuShortcut.displayName = 'Menu.Shortcut';
 /** A small count or flag at an item's end: how many need attention, or that something is new. */
-function MenuBadge({ className, ...props }) {
-    return _jsx("span", { "data-slot": "menu-badge", className: menuVariants().badge({ className }), ...props });
+function MenuBadge({ className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'span',
+        render,
+        props: mergeProps({ 'data-slot': 'menu-badge', className: menuVariants().badge({ className }) }, props),
+    });
 }
 MenuBadge.displayName = 'Menu.Badge';
 export const Menu = Object.assign(MenuRoot, {

package/dist/components/message/index.d.ts

@@ -1,4 +1,10 @@
 import { type ComponentProps, type ReactNode } from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { ElementType as RenderElementType } from 'react';
+/** Draws a part as another element, or composes it with a component: `render={<a href="/" />}`. */
+type RenderProp<Tag extends RenderElementType> = {
+    render?: useRender.ComponentProps<Tag>['render'];
+};
 export type MessageFrom = 'user' | 'assistant';
 export interface MessageProps extends ComponentProps<'div'> {
     /** Who wrote it. A person's turn is a bubble on the trailing side; the assistant's is prose. */
@@ -26,28 +32,28 @@ declare namespace MessageGroup {
 export interface MessageAvatarProps extends ComponentProps<'div'> {
 }
 /** Who it is from, beside the turn's first line. Leave it empty to keep the space. */
-declare function MessageAvatar({ className, ...props }: MessageAvatarProps): import("react").JSX.Element;
+declare function MessageAvatar({ className, render, ...props }: MessageAvatarProps & RenderProp<'div'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace MessageAvatar {
     var displayName: string;
 }
 export interface MessageContentProps extends ComponentProps<'div'> {
 }
 /** The column with the header, the bubble, the attachments and the actions. */
-declare function MessageContent({ className, ...props }: MessageContentProps): import("react").JSX.Element;
+declare function MessageContent({ className, render, ...props }: MessageContentProps & RenderProp<'div'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace MessageContent {
     var displayName: string;
 }
 export interface MessageHeaderProps extends ComponentProps<'div'> {
 }
 /** A line above the turn: a name in `<strong>`, a time, a model. */
-declare function MessageHeader({ className, ...props }: MessageHeaderProps): import("react").JSX.Element;
+declare function MessageHeader({ className, render, ...props }: MessageHeaderProps & RenderProp<'div'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace MessageHeader {
     var displayName: string;
 }
 export interface MessageBubbleProps extends ComponentProps<'div'> {
 }
 /** The surface of a person's turn. On the assistant's it draws nothing, and the text is the page's. */
-declare function MessageBubble({ className, ...props }: MessageBubbleProps): import("react").JSX.Element;
+declare function MessageBubble({ className, render, ...props }: MessageBubbleProps & RenderProp<'div'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace MessageBubble {
     var displayName: string;
 }
@@ -57,14 +63,14 @@ export interface MessageBubbleContentProps extends ComponentProps<'div'> {
  * The text. Paragraphs, lists, inline code, code blocks and headings inside
  * it are set as prose, so rendered Markdown can go straight in.
  */
-declare function MessageBubbleContent({ className, children, ...props }: MessageBubbleContentProps): import("react").JSX.Element;
+declare function MessageBubbleContent({ className, children, render, ...props }: MessageBubbleContentProps & RenderProp<'div'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace MessageBubbleContent {
     var displayName: string;
 }
 export interface MessageFooterProps extends ComponentProps<'div'> {
 }
 /** A line under the turn: sent, read, a model and how long it took. */
-declare function MessageFooter({ className, ...props }: MessageFooterProps): import("react").JSX.Element;
+declare function MessageFooter({ className, render, ...props }: MessageFooterProps & RenderProp<'div'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace MessageFooter {
     var displayName: string;
 }
@@ -107,7 +113,7 @@ export interface MessageBranchProps extends Omit<ComponentProps<'div'>, 'onChang
     onIndexChange: (index: number) => void;
 }
 /** "‹ 2 / 3 ›": steps between the versions of an answer that was retried or edited. */
-declare function MessageBranch({ count, index, onIndexChange, className, ...props }: MessageBranchProps): import("react").JSX.Element;
+declare function MessageBranch({ count, index, onIndexChange, className, render, ...props }: MessageBranchProps & RenderProp<'div'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace MessageBranch {
     var displayName: string;
 }
@@ -124,7 +130,7 @@ declare namespace MessageStatus {
 export interface MessageAttachmentsProps extends ComponentProps<'div'> {
 }
 /** The files sent with a turn, above its bubble. */
-declare function MessageAttachments({ className, ...props }: MessageAttachmentsProps): import("react").JSX.Element;
+declare function MessageAttachments({ className, render, ...props }: MessageAttachmentsProps & RenderProp<'div'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace MessageAttachments {
     var displayName: string;
 }
@@ -139,7 +145,7 @@ export interface MessageAttachmentProps extends Omit<ComponentProps<'div'>, 'chi
     icon?: ReactNode;
 }
 /** One sent file: a picture, or a card with a glyph, the name and its size. */
-declare function MessageAttachment({ name, src, meta, icon, className, ...props }: MessageAttachmentProps): import("react").JSX.Element;
+declare function MessageAttachment({ name, src, meta, icon, className, render, ...props }: MessageAttachmentProps & RenderProp<'div'>): import("react").JSX.Element;
 declare namespace MessageAttachment {
     var displayName: string;
 }

package/dist/components/message/index.js

@@ -1,5 +1,5 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Message — one turn of a conversation with an assistant.
  *
@@ -49,6 +49,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { Tooltip } from '@base-ui/react/tooltip';
 import { createContext, useContext, useEffect, useRef, useState, } from 'react';
 import { tv } from 'tailwind-variants';
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
 const messageVariants = tv({
     slots: {
         root: 'group/message flex w-full gap-3',
@@ -156,45 +158,73 @@ function MessageGroup({ from = 'assistant', className, ...props }) {
 }
 MessageGroup.displayName = 'Message.Group';
 /** Who it is from, beside the turn's first line. Leave it empty to keep the space. */
-function MessageAvatar({ className, ...props }) {
-    return _jsx("div", { "data-slot": "message-avatar", className: messageVariants().avatar({ className }), ...props });
+function MessageAvatar({ className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({ 'data-slot': 'message-avatar', className: messageVariants().avatar({ className }) }, props),
+    });
 }
 MessageAvatar.displayName = 'Message.Avatar';
 /** The column with the header, the bubble, the attachments and the actions. */
-function MessageContent({ className, ...props }) {
+function MessageContent({ className, render, ...props }) {
     const { from } = useContext(MessageContext);
-    return _jsx("div", { "data-slot": "message-content", className: messageVariants({ from }).content({ className }), ...props });
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({ 'data-slot': 'message-content', className: messageVariants({ from }).content({ className }) }, props),
+    });
 }
 MessageContent.displayName = 'Message.Content';
 /** A line above the turn: a name in `<strong>`, a time, a model. */
-function MessageHeader({ className, ...props }) {
+function MessageHeader({ className, render, ...props }) {
     const { from } = useContext(MessageContext);
-    return _jsx("div", { "data-slot": "message-header", className: messageVariants({ from }).header({ className }), ...props });
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({ 'data-slot': 'message-header', className: messageVariants({ from }).header({ className }) }, props),
+    });
 }
 MessageHeader.displayName = 'Message.Header';
 /** The surface of a person's turn. On the assistant's it draws nothing, and the text is the page's. */
-function MessageBubble({ className, ...props }) {
+function MessageBubble({ className, render, ...props }) {
     const { from } = useContext(MessageContext);
-    return _jsx("div", { "data-slot": "message-bubble", className: messageVariants({ from }).bubble({ className }), ...props });
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({ 'data-slot': 'message-bubble', className: messageVariants({ from }).bubble({ className }) }, props),
+    });
 }
 MessageBubble.displayName = 'Message.Bubble';
 /**
  * The text. Paragraphs, lists, inline code, code blocks and headings inside
  * it are set as prose, so rendered Markdown can go straight in.
  */
-function MessageBubbleContent({ className, children, ...props }) {
+function MessageBubbleContent({ className, children, render, ...props }) {
     const { from, streaming } = useContext(MessageContext);
     const slots = messageVariants({ from });
     // The caret follows the last word: after the text itself, or inside the last block.
     const plain = typeof children === 'string' || typeof children === 'number';
     const caret = streaming ? (plain ? slots.caret() : slots.caretLast()) : undefined;
-    return (_jsx("div", { "data-slot": "message-bubble-content", className: slots.bubbleContent({ className: [caret, className] }), ...props, children: children }));
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({
+            'data-slot': 'message-bubble-content',
+            className: slots.bubbleContent({ className: [caret, className] }),
+            children: _jsx(_Fragment, { children: children }),
+        }, props),
+    });
 }
 MessageBubbleContent.displayName = 'Message.BubbleContent';
 /** A line under the turn: sent, read, a model and how long it took. */
-function MessageFooter({ className, ...props }) {
+function MessageFooter({ className, render, ...props }) {
     const { from } = useContext(MessageContext);
-    return _jsx("div", { "data-slot": "message-footer", className: messageVariants({ from }).footer({ className }), ...props });
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({ 'data-slot': 'message-footer', className: messageVariants({ from }).footer({ className }) }, props),
+    });
 }
 MessageFooter.displayName = 'Message.Footer';
 /** The row of actions under a turn. */
@@ -227,9 +257,19 @@ function MessageAction({ label, children, copy, pressed, onClick, className, ...
 }
 MessageAction.displayName = 'Message.Action';
 /** "‹ 2 / 3 ›": steps between the versions of an answer that was retried or edited. */
-function MessageBranch({ count, index, onIndexChange, className, ...props }) {
+function MessageBranch({ count, index, onIndexChange, className, render, ...props }) {
     const slots = messageVariants();
-    return (_jsxs("div", { role: "group", "aria-label": "Versions", "data-slot": "message-branch", className: slots.branch({ className }), ...props, children: [_jsx("button", { type: "button", "aria-label": "Previous version", className: slots.branchButton(), disabled: index <= 0, onClick: () => onIndexChange(index - 1), children: _jsx(ChevronGlyph, { flip: true }) }), _jsxs("span", { "aria-live": "polite", className: "min-w-9 text-center", children: [index + 1, " / ", count] }), _jsx("button", { type: "button", "aria-label": "Next version", className: slots.branchButton(), disabled: index >= count - 1, onClick: () => onIndexChange(index + 1), children: _jsx(ChevronGlyph, {}) })] }));
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({
+            role: 'group',
+            'aria-label': 'Versions',
+            'data-slot': 'message-branch',
+            className: slots.branch({ className }),
+            children: (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", "aria-label": "Previous version", className: slots.branchButton(), disabled: index <= 0, onClick: () => onIndexChange(index - 1), children: _jsx(ChevronGlyph, { flip: true }) }), _jsxs("span", { "aria-live": "polite", className: "min-w-9 text-center", children: [index + 1, " / ", count] }), _jsx("button", { type: "button", "aria-label": "Next version", className: slots.branchButton(), disabled: index >= count - 1, onClick: () => onIndexChange(index + 1), children: _jsx(ChevronGlyph, {}) })] })),
+        }, props),
+    });
 }
 MessageBranch.displayName = 'Message.Branch';
 /**
@@ -241,18 +281,30 @@ function MessageStatus({ className, ...props }) {
 }
 MessageStatus.displayName = 'Message.Status';
 /** The files sent with a turn, above its bubble. */
-function MessageAttachments({ className, ...props }) {
+function MessageAttachments({ className, render, ...props }) {
     const { from } = useContext(MessageContext);
-    return (_jsx("div", { "data-slot": "message-attachments", className: messageVariants({ from }).attachments({ className }), ...props }));
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({ 'data-slot': 'message-attachments', className: messageVariants({ from }).attachments({ className }) }, props),
+    });
 }
 MessageAttachments.displayName = 'Message.Attachments';
 /** One sent file: a picture, or a card with a glyph, the name and its size. */
-function MessageAttachment({ name, src, meta, icon, className, ...props }) {
+function MessageAttachment({ name, src, meta, icon, className, render, ...props }) {
     const slots = messageVariants();
     if (src) {
         return (_jsx("div", { "data-slot": "message-attachment", className: slots.attachment({ className }), ...props, children: _jsx("img", { src: src, alt: name, className: slots.attachmentImage() }) }));
     }
-    return (_jsxs("div", { "data-slot": "message-attachment", className: slots.attachment({ className: [slots.attachmentFile(), className] }), ...props, children: [_jsx("span", { className: slots.attachmentGlyph(), children: icon ?? _jsx(FileGlyph, {}) }), _jsxs("span", { className: "min-w-0", children: [_jsx("span", { className: slots.attachmentName(), children: name }), meta ? _jsx("span", { className: slots.attachmentMeta(), children: meta }) : null] })] }));
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({
+            'data-slot': 'message-attachment',
+            className: slots.attachment({ className: [slots.attachmentFile(), className] }),
+            children: (_jsxs(_Fragment, { children: [_jsx("span", { className: slots.attachmentGlyph(), children: icon ?? _jsx(FileGlyph, {}) }), _jsxs("span", { className: "min-w-0", children: [_jsx("span", { className: slots.attachmentName(), children: name }), meta ? _jsx("span", { className: slots.attachmentMeta(), children: meta }) : null] })] })),
+        }, props),
+    });
 }
 MessageAttachment.displayName = 'Message.Attachment';
 /* -------------------------------------------------------------------------- */