panelui-web 0.10.0 → 0.11.0

package/dist/components/command-dock/index.d.ts

@@ -41,6 +41,13 @@
  * anywhere outside it.
  */
 import { type ComponentProps, type ReactNode } from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type * as ReactTypes from 'react';
+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 CommandDockProps extends Omit<ComponentProps<'div'>, 'onSubmit' | 'defaultValue'> {
     /** Whether it is open, when the caller holds that. */
     open?: boolean;
@@ -59,21 +66,21 @@ export interface CommandDockProps extends Omit<ComponentProps<'div'>, 'onSubmit'
     /** How wide it is while closed, as a CSS length. */
     closedWidth?: string;
 }
-declare function CommandDockRoot({ open: controlledOpen, defaultOpen, onOpenChange, value: controlledValue, onValueChange, onSubmit, busy, closedWidth, className, style, children, ...props }: CommandDockProps): import("react").JSX.Element;
+declare function CommandDockRoot({ open: controlledOpen, defaultOpen, onOpenChange, value: controlledValue, onValueChange, onSubmit, busy, closedWidth, className, style, children, ...props }: CommandDockProps): ReactTypes.JSX.Element;
 declare namespace CommandDockRoot {
     var displayName: string;
 }
 export interface CommandDockTriggerProps extends ComponentProps<'button'> {
 }
 /** The closed form: a button that opens the dock. */
-declare function CommandDockTrigger({ className, onClick, ...props }: CommandDockTriggerProps): import("react").JSX.Element;
+declare function CommandDockTrigger({ className, onClick, render, ...props }: CommandDockTriggerProps & RenderProp<'button'>): ReactTypes.ReactElement<unknown, string | ReactTypes.JSXElementConstructor<any>>;
 declare namespace CommandDockTrigger {
     var displayName: string;
 }
 export interface CommandDockPanelProps extends ComponentProps<'div'> {
 }
 /** The open form: the field, and the rows under it. */
-declare function CommandDockPanel({ className, ...props }: CommandDockPanelProps): import("react").JSX.Element;
+declare function CommandDockPanel({ className, render, ...props }: CommandDockPanelProps & RenderProp<'div'>): ReactTypes.ReactElement<unknown, string | ReactTypes.JSXElementConstructor<any>>;
 declare namespace CommandDockPanel {
     var displayName: string;
 }
@@ -82,7 +89,7 @@ export interface CommandDockInputProps extends Omit<ComponentProps<'input'>, 'va
     submitLabel?: string;
 }
 /** The field, with a button to send what is in it. Enter sends too. */
-declare function CommandDockInput({ className, submitLabel, 'aria-label': ariaLabel, ...props }: CommandDockInputProps): import("react").JSX.Element;
+declare function CommandDockInput({ className, submitLabel, 'aria-label': ariaLabel, ...props }: CommandDockInputProps): ReactTypes.JSX.Element;
 declare namespace CommandDockInput {
     var displayName: string;
 }
@@ -91,7 +98,7 @@ export interface CommandDockResultsProps extends ComponentProps<'div'> {
     label?: string;
 }
 /** Where the rows go. It takes no room until there is something in it. */
-declare function CommandDockResults({ className, label, children, ...props }: CommandDockResultsProps): import("react").JSX.Element;
+declare function CommandDockResults({ className, label, children, render, ...props }: CommandDockResultsProps & RenderProp<'div'>): ReactTypes.JSX.Element;
 declare namespace CommandDockResults {
     var displayName: string;
 }
@@ -100,21 +107,21 @@ export interface CommandDockRowProps extends ComponentProps<'div'> {
     onSelect?: () => void;
 }
 /** One row of the answer. It slides in when it is added. */
-declare function CommandDockRow({ className, onSelect, children, ...props }: CommandDockRowProps): import("react").JSX.Element;
+declare function CommandDockRow({ className, onSelect, children, render, ...props }: CommandDockRowProps & RenderProp<'div'>): ReactTypes.ReactElement<unknown, string | ReactTypes.JSXElementConstructor<any>>;
 declare namespace CommandDockRow {
     var displayName: string;
 }
 export interface CommandDockRowTitleProps extends ComponentProps<'span'> {
 }
 /** What a row is, in a line that takes the row's spare width and truncates. */
-declare function CommandDockRowTitle({ className, ...props }: CommandDockRowTitleProps): import("react").JSX.Element;
+declare function CommandDockRowTitle({ className, render, ...props }: CommandDockRowTitleProps & RenderProp<'span'>): ReactTypes.ReactElement<unknown, string | ReactTypes.JSXElementConstructor<any>>;
 declare namespace CommandDockRowTitle {
     var displayName: string;
 }
 export interface CommandDockRowMetaProps extends ComponentProps<'span'> {
 }
 /** Something short at the end of a row, quieter than its title: a date, a place. */
-declare function CommandDockRowMeta({ className, ...props }: CommandDockRowMetaProps): import("react").JSX.Element;
+declare function CommandDockRowMeta({ className, render, ...props }: CommandDockRowMetaProps & RenderProp<'span'>): ReactTypes.ReactElement<unknown, string | ReactTypes.JSXElementConstructor<any>>;
 declare namespace CommandDockRowMeta {
     var displayName: string;
 }
@@ -122,7 +129,7 @@ export interface CommandDockStatusProps extends ComponentProps<'div'> {
     children?: ReactNode;
 }
 /** Shown under the rows while `busy`: three dots, and words if you give it some. */
-declare function CommandDockStatus({ className, children, ...props }: CommandDockStatusProps): import("react").JSX.Element;
+declare function CommandDockStatus({ className, children, render, ...props }: CommandDockStatusProps & RenderProp<'div'>): ReactTypes.ReactElement<unknown, string | ReactTypes.JSXElementConstructor<any>>;
 declare namespace CommandDockStatus {
     var displayName: string;
 }

package/dist/components/command-dock/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";
 /**
  * CommandDock — a small button that opens into a place to ask for something,
  * with the answer arriving under it a row at a time.
@@ -44,6 +44,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { createContext, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, 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 commandDockVariants = tv({
     slots: {
         root: 'relative flex w-full justify-center',
@@ -175,23 +177,44 @@ function useInert(inert) {
     return ref;
 }
 /** The closed form: a button that opens the dock. */
-function CommandDockTrigger({ className, onClick, ...props }) {
+function CommandDockTrigger({ className, onClick, render, ...props }) {
     const dock = useDock('CommandDock.Trigger');
     const ref = useInert(dock.open);
-    return (_jsx("button", { ref: ref, type: "button", "data-dock-trigger": "", "aria-expanded": dock.open, "aria-controls": dock.panelId, className: commandDockVariants({ open: dock.open }).trigger({ className }), onClick: (event) => {
-            onClick?.(event);
-            if (!event.defaultPrevented)
-                dock.setOpen(true);
-        }, ...props }));
+    return useRender({
+        defaultTagName: 'button',
+        render,
+        props: mergeProps({
+            ref: ref,
+            type: 'button',
+            'data-dock-trigger': '',
+            'aria-expanded': dock.open,
+            'aria-controls': dock.panelId,
+            className: commandDockVariants({ open: dock.open }).trigger({ className }),
+            onClick: (event) => {
+                onClick?.(event);
+                if (!event.defaultPrevented)
+                    dock.setOpen(true);
+            },
+        }, props),
+    });
 }
 CommandDockTrigger.displayName = 'CommandDock.Trigger';
 /** The open form: the field, and the rows under it. */
-function CommandDockPanel({ className, ...props }) {
+function CommandDockPanel({ className, render, ...props }) {
     const dock = useDock('CommandDock.Panel');
     // Kept in the page while closed, so it can be seen folding away. Inert, so
     // nothing in it can be reached while it cannot be seen.
     const ref = useInert(!dock.open);
-    return (_jsx("div", { ref: ref, id: dock.panelId, "data-open": dock.open ? '' : undefined, className: commandDockVariants().panel({ className }), ...props }));
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({
+            ref: ref,
+            id: dock.panelId,
+            'data-open': dock.open ? '' : undefined,
+            className: commandDockVariants().panel({ className }),
+        }, props),
+    });
 }
 CommandDockPanel.displayName = 'CommandDock.Panel';
 /** The field, with a button to send what is in it. Enter sends too. */
@@ -213,35 +236,69 @@ function CommandDockInput({ className, submitLabel = 'Send', 'aria-label': ariaL
 }
 CommandDockInput.displayName = 'CommandDock.Input';
 /** Where the rows go. It takes no room until there is something in it. */
-function CommandDockResults({ className, label = 'Results', children, ...props }) {
+function CommandDockResults({ className, label = 'Results', children, render, ...props }) {
     const dock = useDock('CommandDock.Results');
     const rows = Array.isArray(children) ? children.flat().filter(Boolean).length : children ? 1 : 0;
     // Closed, it folds away whatever it holds.
     const filled = dock.open && (rows > 0 || dock.busy);
     const slots = commandDockVariants({ filled });
-    return (_jsx("div", { className: slots.results(), children: _jsx("div", { className: slots.resultsClip(), children: _jsx("div", { role: "list", "aria-label": label, "aria-live": "polite", className: slots.resultsInner({ className }), ...props, children: children }) }) }));
+    const element = useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({
+            role: 'list',
+            'aria-label': label,
+            'aria-live': 'polite',
+            className: slots.resultsInner({ className }),
+            children: _jsx(_Fragment, { children: children }),
+        }, props),
+    });
+    return (_jsx("div", { className: slots.results(), children: _jsx("div", { className: slots.resultsClip(), children: element }) }));
 }
 CommandDockResults.displayName = 'CommandDock.Results';
 /** One row of the answer. It slides in when it is added. */
-function CommandDockRow({ className, onSelect, children, ...props }) {
+function CommandDockRow({ className, onSelect, children, render, ...props }) {
     const slots = commandDockVariants({ interactive: onSelect !== undefined });
-    return (_jsx("div", { role: "listitem", ...props, children: onSelect ? (_jsx("button", { type: "button", onClick: onSelect, className: slots.row({ className: ['w-full text-start', className] }), children: children })) : (_jsx("div", { className: slots.row({ className }), children: children })) }));
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({
+            role: 'listitem',
+            children: (_jsx(_Fragment, { children: onSelect ? (_jsx("button", { type: "button", onClick: onSelect, className: slots.row({ className: ['w-full text-start', className] }), children: children })) : (_jsx("div", { className: slots.row({ className }), children: children })) })),
+        }, props),
+    });
 }
 CommandDockRow.displayName = 'CommandDock.Row';
 /** What a row is, in a line that takes the row's spare width and truncates. */
-function CommandDockRowTitle({ className, ...props }) {
-    return (_jsx("span", { "data-slot": "command-dock-row-title", className: commandDockVariants().rowTitle({ className }), ...props }));
+function CommandDockRowTitle({ className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'span',
+        render,
+        props: mergeProps({ 'data-slot': 'command-dock-row-title', className: commandDockVariants().rowTitle({ className }) }, props),
+    });
 }
 CommandDockRowTitle.displayName = 'CommandDock.RowTitle';
 /** Something short at the end of a row, quieter than its title: a date, a place. */
-function CommandDockRowMeta({ className, ...props }) {
-    return (_jsx("span", { "data-slot": "command-dock-row-meta", className: commandDockVariants().rowMeta({ className }), ...props }));
+function CommandDockRowMeta({ className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'span',
+        render,
+        props: mergeProps({ 'data-slot': 'command-dock-row-meta', className: commandDockVariants().rowMeta({ className }) }, props),
+    });
 }
 CommandDockRowMeta.displayName = 'CommandDock.RowMeta';
 /** Shown under the rows while `busy`: three dots, and words if you give it some. */
-function CommandDockStatus({ className, children = 'Working', ...props }) {
+function CommandDockStatus({ className, children = 'Working', render, ...props }) {
     const slots = commandDockVariants();
-    return (_jsxs("div", { role: "status", className: slots.status({ className }), ...props, children: [_jsxs("span", { "aria-hidden": "true", className: slots.dots(), children: [_jsx("span", { className: slots.dot() }), _jsx("span", { className: slots.dot({ className: '[animation-delay:150ms]' }) }), _jsx("span", { className: slots.dot({ className: '[animation-delay:300ms]' }) })] }), children] }));
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({
+            role: 'status',
+            className: slots.status({ className }),
+            children: (_jsxs(_Fragment, { children: [_jsxs("span", { "aria-hidden": "true", className: slots.dots(), children: [_jsx("span", { className: slots.dot() }), _jsx("span", { className: slots.dot({ className: '[animation-delay:150ms]' }) }), _jsx("span", { className: slots.dot({ className: '[animation-delay:300ms]' }) })] }), children] })),
+        }, props),
+    });
 }
 CommandDockStatus.displayName = 'CommandDock.Status';
 export const CommandDock = Object.assign(CommandDockRoot, {

package/dist/components/day-grid/index.d.ts

@@ -30,6 +30,12 @@
  * between days, so forty days are not forty presses of Tab.
  */
 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'];
+};
 /** How much happened on a day: 0 is nothing, 4 is the most. */
 export type DayLevel = 0 | 1 | 2 | 3 | 4;
 /** Which of the theme's roles the dots are drawn in. */
@@ -64,7 +70,7 @@ export interface DayGridProps extends Omit<ComponentProps<'div'>, 'children' | '
     /** What a screen reader calls the grid. */
     label?: string;
 }
-declare function DayGridRoot({ cells, columns, rows: perColumn, color, value, onValueChange, lens, label, className, style, onPointerMove, onPointerLeave, ...props }: DayGridProps): import("react").JSX.Element;
+declare function DayGridRoot({ cells, columns, rows: perColumn, color, value, onValueChange, lens, label, className, style, onPointerMove, onPointerLeave, render, ...props }: DayGridProps & RenderProp<'div'>): import("react").JSX.Element;
 declare namespace DayGridRoot {
     var displayName: string;
 }
@@ -77,7 +83,7 @@ export interface DayGridLegendProps extends Omit<ComponentProps<'div'>, 'childre
     more?: ReactNode;
 }
 /** The five sizes, quietest to busiest, with a word at each end. */
-declare function DayGridLegend({ color, less, more, className, ...props }: DayGridLegendProps): import("react").JSX.Element;
+declare function DayGridLegend({ color, less, more, className, render, ...props }: DayGridLegendProps & RenderProp<'div'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace DayGridLegend {
     var displayName: string;
 }
@@ -93,7 +99,7 @@ export interface DayGridWeekdaysProps extends Omit<ComponentProps<'div'>, 'child
  * Put it beside the grid, in a row with it. Hidden from screen readers, which
  * are given each day's own label.
  */
-declare function DayGridWeekdays({ labels, className, style, ...props }: DayGridWeekdaysProps): import("react").JSX.Element;
+declare function DayGridWeekdays({ labels, className, style, render, ...props }: DayGridWeekdaysProps & RenderProp<'div'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace DayGridWeekdays {
     var displayName: string;
 }
@@ -103,21 +109,21 @@ export interface DayGridCaptionProps extends ComponentProps<'div'> {
  * What the picked day holds, written out beside the grid: a `DayGrid.Title`
  * over a `DayGrid.Description`. Read out politely each time the pick changes.
  */
-declare function DayGridCaption({ className, ...props }: DayGridCaptionProps): import("react").JSX.Element;
+declare function DayGridCaption({ className, render, ...props }: DayGridCaptionProps & RenderProp<'div'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace DayGridCaption {
     var displayName: string;
 }
 export interface DayGridTitleProps extends ComponentProps<'p'> {
 }
 /** The picked day's figure: "17 merged". */
-declare function DayGridTitle({ className, ...props }: DayGridTitleProps): import("react").JSX.Element;
+declare function DayGridTitle({ className, render, ...props }: DayGridTitleProps & RenderProp<'p'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace DayGridTitle {
     var displayName: string;
 }
 export interface DayGridDescriptionProps extends ComponentProps<'p'> {
 }
 /** The picked day's date, quieter, under its figure. */
-declare function DayGridDescription({ className, ...props }: DayGridDescriptionProps): import("react").JSX.Element;
+declare function DayGridDescription({ className, render, ...props }: DayGridDescriptionProps & RenderProp<'p'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace DayGridDescription {
     var displayName: string;
 }

package/dist/components/day-grid/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";
 /**
  * DayGrid — a run of days as a field of dots, each sized by how much happened
  * on it.
@@ -33,6 +33,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { useEffect, useMemo, 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 dayGridVariants = tv({
     slots: {
         root: 'relative grid w-full gap-1',
@@ -95,7 +97,7 @@ const LEVELS = [0, 1, 2, 3, 4];
 const LENS_REACH = 2.4;
 /** Milliseconds between one diagonal of dots arriving and the next. */
 const STAGGER = 22;
-function DayGridRoot({ cells, columns = 7, rows: perColumn, color = 'primary', value = null, onValueChange, lens = true, label = 'Activity', className, style, onPointerMove, onPointerLeave, ...props }) {
+function DayGridRoot({ cells, columns = 7, rows: perColumn, color = 'primary', value = null, onValueChange, lens = true, label = 'Activity', className, style, onPointerMove, onPointerLeave, render, ...props }) {
     const slots = dayGridVariants({ color });
     const root = useRef(null);
     const nodes = useRef([]);
@@ -227,27 +229,47 @@ function DayGridRoot({ cells, columns = 7, rows: perColumn, color = 'primary', v
         nodes.current[next]?.focus();
         onValueChange(next);
     };
-    return (_jsxs("div", { ref: root, role: "group", "aria-label": summary, className: slots.root({ className }), style: layout, onPointerMove: moveLens, onPointerLeave: leave, ...props, children: [cells.map((cell, index) => {
-                const part = dayGridVariants({
-                    level: cell.level,
-                    interactive: true,
-                    selected: value === index,
-                });
-                return (_jsx("button", { ref: (node) => {
-                        nodes.current[index] = node;
-                    }, type: "button", "aria-label": cell.label ?? `Day ${index + 1}, level ${cell.level} of 4`, "aria-pressed": value === index, tabIndex: index === focusable ? 0 : -1, onClick: () => onValueChange(index), onKeyDown: (event) => onKeyDown(event, index), onFocus: (event) => {
-                        // Only for focus that came from the keyboard: a click focuses
-                        // too, and the pointer is already showing that day's tag.
-                        if (event.currentTarget.matches(':focus-visible'))
-                            setPointed(index);
-                    }, onBlur: () => setPointed((current) => (current === index ? null : current)), className: part.cell(), children: _jsx("span", { className: part.dot(), style: dotStyle(index) }) }, index));
-            }), tag] }));
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({
+            ref: root,
+            role: 'group',
+            'aria-label': summary,
+            className: slots.root({ className }),
+            style: layout,
+            onPointerMove: moveLens,
+            onPointerLeave: leave,
+            children: (_jsxs(_Fragment, { children: [cells.map((cell, index) => {
+                        const part = dayGridVariants({
+                            level: cell.level,
+                            interactive: true,
+                            selected: value === index,
+                        });
+                        return (_jsx("button", { ref: (node) => {
+                                nodes.current[index] = node;
+                            }, type: "button", "aria-label": cell.label ?? `Day ${index + 1}, level ${cell.level} of 4`, "aria-pressed": value === index, tabIndex: index === focusable ? 0 : -1, onClick: () => onValueChange(index), onKeyDown: (event) => onKeyDown(event, index), onFocus: (event) => {
+                                // Only for focus that came from the keyboard: a click focuses
+                                // too, and the pointer is already showing that day's tag.
+                                if (event.currentTarget.matches(':focus-visible'))
+                                    setPointed(index);
+                            }, onBlur: () => setPointed((current) => (current === index ? null : current)), className: part.cell(), children: _jsx("span", { className: part.dot(), style: dotStyle(index) }) }, index));
+                    }), tag] })),
+        }, props),
+    });
 }
 DayGridRoot.displayName = 'DayGrid';
 /** The five sizes, quietest to busiest, with a word at each end. */
-function DayGridLegend({ color = 'primary', less = 'Less', more = 'More', className, ...props }) {
+function DayGridLegend({ color = 'primary', less = 'Less', more = 'More', className, render, ...props }) {
     const slots = dayGridVariants({ color });
-    return (_jsxs("div", { className: slots.legend({ className }), ...props, children: [_jsx("span", { children: less }), LEVELS.map((level) => (_jsx("span", { "aria-hidden": "true", className: slots.swatch(), children: _jsx("span", { className: dayGridVariants({ level }).dot({ className: 'shadow-none' }) }) }, level))), _jsx("span", { children: more })] }));
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({
+            className: slots.legend({ className }),
+            children: (_jsxs(_Fragment, { children: [_jsx("span", { children: less }), LEVELS.map((level) => (_jsx("span", { "aria-hidden": "true", className: slots.swatch(), children: _jsx("span", { className: dayGridVariants({ level }).dot({ className: 'shadow-none' }) }) }, level))), _jsx("span", { children: more })] })),
+        }, props),
+    });
 }
 DayGridLegend.displayName = 'DayGrid.Legend';
 /**
@@ -255,27 +277,49 @@ DayGridLegend.displayName = 'DayGrid.Legend';
  * Put it beside the grid, in a row with it. Hidden from screen readers, which
  * are given each day's own label.
  */
-function DayGridWeekdays({ labels = ['Mon', '', 'Wed', '', 'Fri', '', 'Sun'], className, style, ...props }) {
+function DayGridWeekdays({ labels = ['Mon', '', 'Wed', '', 'Fri', '', 'Sun'], className, style, render, ...props }) {
     const slots = dayGridVariants();
-    return (_jsx("div", { "aria-hidden": "true", "data-slot": "day-grid-weekdays", className: slots.weekdays({ className }), style: { gridTemplateRows: `repeat(${labels.length}, minmax(0, 1fr))`, ...style }, ...props, children: labels.map((day, index) => (_jsx("span", { className: slots.weekday(), children: day }, index))) }));
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({
+            'aria-hidden': 'true',
+            'data-slot': 'day-grid-weekdays',
+            className: slots.weekdays({ className }),
+            style: { gridTemplateRows: `repeat(${labels.length}, minmax(0, 1fr))`, ...style },
+            children: (_jsx(_Fragment, { children: labels.map((day, index) => (_jsx("span", { className: slots.weekday(), children: day }, index))) })),
+        }, props),
+    });
 }
 DayGridWeekdays.displayName = 'DayGrid.Weekdays';
 /**
  * What the picked day holds, written out beside the grid: a `DayGrid.Title`
  * over a `DayGrid.Description`. Read out politely each time the pick changes.
  */
-function DayGridCaption({ className, ...props }) {
-    return (_jsx("div", { "aria-live": "polite", "data-slot": "day-grid-caption", className: dayGridVariants().caption({ className }), ...props }));
+function DayGridCaption({ className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({ 'aria-live': 'polite', 'data-slot': 'day-grid-caption', className: dayGridVariants().caption({ className }) }, props),
+    });
 }
 DayGridCaption.displayName = 'DayGrid.Caption';
 /** The picked day's figure: "17 merged". */
-function DayGridTitle({ className, ...props }) {
-    return _jsx("p", { "data-slot": "day-grid-title", className: dayGridVariants().title({ className }), ...props });
+function DayGridTitle({ className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'p',
+        render,
+        props: mergeProps({ 'data-slot': 'day-grid-title', className: dayGridVariants().title({ className }) }, props),
+    });
 }
 DayGridTitle.displayName = 'DayGrid.Title';
 /** The picked day's date, quieter, under its figure. */
-function DayGridDescription({ className, ...props }) {
-    return (_jsx("p", { "data-slot": "day-grid-description", className: dayGridVariants().description({ className }), ...props }));
+function DayGridDescription({ className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'p',
+        render,
+        props: mergeProps({ 'data-slot': 'day-grid-description', className: dayGridVariants().description({ className }) }, props),
+    });
 }
 DayGridDescription.displayName = 'DayGrid.Description';
 export const DayGrid = Object.assign(DayGridRoot, {

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

@@ -1,4 +1,11 @@
 import { type ComponentProps, type ReactElement, type ReactNode } from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type * as ReactTypes from 'react';
+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 DialogProps {
     children?: ReactNode;
     /** Whether it is open, when the caller holds that. */
@@ -14,7 +21,7 @@ export interface DialogProps {
      */
     dismissible?: boolean;
 }
-declare function DialogRoot({ children, open, defaultOpen, onOpenChange, dismissible, }: DialogProps): import("react").JSX.Element;
+declare function DialogRoot({ children, open, defaultOpen, onOpenChange, dismissible }: DialogProps): ReactTypes.JSX.Element;
 declare namespace DialogRoot {
     var displayName: string;
 }
@@ -27,7 +34,7 @@ export interface DialogTriggerProps extends Omit<ComponentProps<'button'>, 'chil
     render?: ReactElement;
 }
 /** What opens the dialog. A plain button unless `render` supplies one. */
-declare function DialogTrigger({ render, children, ...props }: DialogTriggerProps): import("react").JSX.Element;
+declare function DialogTrigger({ render, children, ...props }: DialogTriggerProps): ReactTypes.JSX.Element;
 declare namespace DialogTrigger {
     var displayName: string;
 }
@@ -51,7 +58,7 @@ export interface DialogContentProps extends Omit<ComponentProps<'div'>, 'childre
     inline?: boolean;
 }
 /** The dialog itself, with the dimmed page behind it. */
-declare function DialogContent({ variant, size, showClose, blur, inline, className, children, ...props }: DialogContentProps): import("react").JSX.Element;
+declare function DialogContent({ variant, size, showClose, blur, inline, className, children, ...props }: DialogContentProps): ReactTypes.JSX.Element;
 declare namespace DialogContent {
     var displayName: string;
 }
@@ -62,21 +69,21 @@ export interface DialogHeaderProps extends Omit<ComponentProps<'div'>, 'title'>
     description?: ReactNode;
 }
 /** The heading block. It leaves room for the close button beside the title. */
-declare function DialogHeader({ title, description, className, children, ...props }: DialogHeaderProps): import("react").JSX.Element;
+declare function DialogHeader({ title, description, className, children, render, ...props }: DialogHeaderProps & RenderProp<'div'>): ReactElement<unknown, string | ReactTypes.JSXElementConstructor<any>>;
 declare namespace DialogHeader {
     var displayName: string;
 }
 export interface DialogTitleProps extends ComponentProps<'h2'> {
 }
 /** The dialog's name, announced when it opens. */
-declare function DialogTitle({ className, ...props }: DialogTitleProps): import("react").JSX.Element;
+declare function DialogTitle({ className, ...props }: DialogTitleProps): ReactTypes.JSX.Element;
 declare namespace DialogTitle {
     var displayName: string;
 }
 export interface DialogDescriptionProps extends ComponentProps<'p'> {
 }
 /** A sentence under the title, read out after it. */
-declare function DialogDescription({ className, ...props }: DialogDescriptionProps): import("react").JSX.Element;
+declare function DialogDescription({ className, ...props }: DialogDescriptionProps): ReactTypes.JSX.Element;
 declare namespace DialogDescription {
     var displayName: string;
 }
@@ -86,7 +93,7 @@ export interface DialogBodyProps extends ComponentProps<'div'> {
  * The part that scrolls, between the header and the footer. Its children are
  * laid out in a column with a gap, so a form's fields need no wrapper.
  */
-declare function DialogBody({ className, children, ...props }: DialogBodyProps): import("react").JSX.Element;
+declare function DialogBody({ className, children, ...props }: DialogBodyProps): ReactTypes.JSX.Element;
 declare namespace DialogBody {
     var displayName: string;
 }
@@ -97,7 +104,7 @@ export interface DialogFooterProps extends ComponentProps<'div'> {
  * equal pills; in `plain` they sit at the end of a ruled strip. Keep it a
  * direct child of `Dialog.Content`, so the band can find it.
  */
-declare function DialogFooter({ className, ...props }: DialogFooterProps): import("react").JSX.Element;
+declare function DialogFooter({ className, render, ...props }: DialogFooterProps & RenderProp<'div'>): ReactElement<unknown, string | ReactTypes.JSXElementConstructor<any>>;
 declare namespace DialogFooter {
     var displayName: string;
 }
@@ -108,7 +115,7 @@ export interface DialogCloseProps extends ComponentProps<'button'> {
     icon?: boolean;
 }
 /** Closes the dialog. */
-declare function DialogClose({ render, icon, children, ...props }: DialogCloseProps): import("react").JSX.Element;
+declare function DialogClose({ render, icon, children, ...props }: DialogCloseProps): ReactTypes.JSX.Element;
 declare namespace DialogClose {
     var displayName: string;
 }
@@ -118,7 +125,7 @@ export interface DialogListProps extends ComponentProps<'div'> {
  * A list of one-line choices in the body. The arrow keys, Home and End move
  * between its items, and it opens scrolled to the selected one.
  */
-declare function DialogList({ className, onKeyDown, children, ...props }: DialogListProps): import("react").JSX.Element;
+declare function DialogList({ className, onKeyDown, children, render, ...props }: DialogListProps & RenderProp<'div'>): ReactElement<unknown, string | ReactTypes.JSXElementConstructor<any>>;
 declare namespace DialogList {
     var displayName: string;
 }
@@ -127,7 +134,7 @@ export interface DialogListGroupProps extends Omit<ComponentProps<'div'>, 'title
     label: ReactNode;
 }
 /** A run of items in `Dialog.List` under a heading of their own. */
-declare function DialogListGroup({ label, className, children, ...props }: DialogListGroupProps): import("react").JSX.Element;
+declare function DialogListGroup({ label, className, children, render, ...props }: DialogListGroupProps & RenderProp<'div'>): ReactElement<unknown, string | ReactTypes.JSXElementConstructor<any>>;
 declare namespace DialogListGroup {
     var displayName: string;
 }
@@ -142,7 +149,7 @@ export interface DialogListItemProps extends Omit<ComponentProps<'div'>, 'onSele
     disabled?: boolean;
 }
 /** One choice in `Dialog.List`, on one line. */
-declare function DialogListItem({ selected, onSelect, meta, disabled, className, onClick, onKeyDown, children, ...props }: DialogListItemProps): import("react").JSX.Element;
+declare function DialogListItem({ selected, onSelect, meta, disabled, className, onClick, onKeyDown, children, render, ...props }: DialogListItemProps & RenderProp<'div'>): ReactElement<unknown, string | ReactTypes.JSXElementConstructor<any>>;
 declare namespace DialogListItem {
     var displayName: string;
 }