panelui-web 0.10.0 → 0.11.0

package/dist/components/kpi/index.js

@@ -1,5 +1,8 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { tv } from 'tailwind-variants';
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
 const kpiVariants = tv({
     slots: {
         root: 'flex w-full flex-col gap-2 text-foreground',
@@ -94,50 +97,82 @@ const kpiVariants = tv({
     ],
     defaultVariants: { tone: 'neutral', trendVariant: 'text', layout: 'below', color: 'primary' },
 });
-function KpiRoot({ surface = false, className, ...props }) {
-    return _jsx("div", { className: kpiVariants({ surface }).root({ className }), ...props });
+function KpiRoot({ surface = false, className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({ className: kpiVariants({ surface }).root({ className }) }, props),
+    });
 }
 KpiRoot.displayName = 'Kpi';
 /** The row over the number: an icon, the title, and anything at the end. */
-function KpiHeader({ className, ...props }) {
-    return _jsx("div", { className: kpiVariants().header({ className }), ...props });
+function KpiHeader({ className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({ className: kpiVariants().header({ className }) }, props),
+    });
 }
 KpiHeader.displayName = 'Kpi.Header';
 /** A small tile for an icon, at the start of the header. */
-function KpiIcon({ tone = 'neutral', className, ...props }) {
-    return _jsx("span", { "aria-hidden": "true", className: kpiVariants({ tone }).icon({ className }), ...props });
+function KpiIcon({ tone = 'neutral', className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'span',
+        render,
+        props: mergeProps({ 'aria-hidden': 'true', className: kpiVariants({ tone }).icon({ className }) }, props),
+    });
 }
 KpiIcon.displayName = 'Kpi.Icon';
 /** What the number measures. */
-function KpiTitle({ className, ...props }) {
-    return _jsx("div", { "data-kpi-title": "", className: kpiVariants().title({ className }), ...props });
+function KpiTitle({ className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({ 'data-kpi-title': '', className: kpiVariants().title({ className }) }, props),
+    });
 }
 KpiTitle.displayName = 'Kpi.Title';
 /** Whatever belongs at the end of the header: a period, a badge, a button. */
-function KpiActions({ className, ...props }) {
-    return _jsx("div", { className: kpiVariants().actions({ className }), ...props });
+function KpiActions({ className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({ className: kpiVariants().actions({ className }) }, props),
+    });
 }
 KpiActions.displayName = 'Kpi.Actions';
 /** The row the number is in, with a trend or a chart at its other end. */
-function KpiContent({ layout = 'below', className, ...props }) {
-    return _jsx("div", { className: kpiVariants({ layout }).content({ className }), ...props });
+function KpiContent({ layout = 'below', className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({ className: kpiVariants({ layout }).content({ className }) }, props),
+    });
 }
 KpiContent.displayName = 'Kpi.Content';
 /** Title, value and trend stacked as one block, for a row with a chart beside it. */
-function KpiStat({ className, ...props }) {
-    return _jsx("div", { className: kpiVariants().stat({ className }), ...props });
+function KpiStat({ className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({ className: kpiVariants().stat({ className }) }, props),
+    });
 }
 KpiStat.displayName = 'Kpi.Stat';
 /** The number. */
-function KpiValue({ className, ...props }) {
-    return _jsx("div", { className: kpiVariants().value({ className }), ...props });
+function KpiValue({ className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({ className: kpiVariants().value({ className }) }, props),
+    });
 }
 KpiValue.displayName = 'Kpi.Value';
 /**
  * The change. Colour comes from what the movement means, not from its sign: a
  * fall in churn is good news and is drawn as good news.
  */
-function KpiTrend({ value, format, goodDirection = 'up', variant = 'text', caption, threshold = 0, className, ...props }) {
+function KpiTrend({ value, format, goodDirection = 'up', variant = 'text', caption, threshold = 0, className, render, ...props }) {
     const flat = Math.abs(value) <= threshold;
     const rising = value > 0;
     const tone = flat
@@ -154,7 +189,16 @@ function KpiTrend({ value, format, goodDirection = 'up', variant = 'text', capti
             // dash between two words, and the sign is half the meaning.
             `${rising ? '+' : value < 0 ? '−' : ''}${Math.abs(value).toFixed(1)}%`;
     const spoken = `${flat ? 'No change' : rising ? 'Up' : 'Down'} ${Math.abs(value).toFixed(1)} percent${caption ? `, ${caption}` : ''}`;
-    return (_jsxs("span", { role: "img", "aria-label": spoken, className: slots.trend({ className }), ...props, children: [variant === 'badge' ? (_jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", className: "size-3", children: flat ? (_jsx("path", { d: "M5 12h14" })) : rising ? (_jsx("path", { d: "M12 19V5M5 12l7-7 7 7" })) : (_jsx("path", { d: "M12 5v14M19 12l-7 7-7-7" })) })) : null, _jsxs("span", { "aria-hidden": "true", children: [label, caption ? _jsxs("span", { className: slots.caption(), children: [" ", caption] }) : null] })] }));
+    return useRender({
+        defaultTagName: 'span',
+        render,
+        props: mergeProps({
+            role: 'img',
+            'aria-label': spoken,
+            className: slots.trend({ className }),
+            children: (_jsxs(_Fragment, { children: [variant === 'badge' ? (_jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", className: "size-3", children: flat ? (_jsx("path", { d: "M5 12h14" })) : rising ? (_jsx("path", { d: "M12 19V5M5 12l7-7 7 7" })) : (_jsx("path", { d: "M12 5v14M19 12l-7 7-7-7" })) })) : null, _jsxs("span", { "aria-hidden": "true", children: [label, caption ? _jsxs("span", { className: slots.caption(), children: [" ", caption] }) : null] })] })),
+        }, props),
+    });
 }
 KpiTrend.displayName = 'Kpi.Trend';
 /** The box an inline chart is given, in pixels. */
@@ -182,7 +226,7 @@ function linePath(points) {
     return path;
 }
 /** The sparkline: the shape of the number over time, with no axis and no values. */
-function KpiChart({ data, color = 'primary', filled = false, height, inline = false, strokeWidth = 2, className, style, ...props }) {
+function KpiChart({ data, color = 'primary', filled = false, height, inline = false, strokeWidth = 2, className, style, render, ...props }) {
     const slots = kpiVariants({ color });
     const low = Math.min(...data);
     const high = Math.max(...data);
@@ -195,37 +239,68 @@ function KpiChart({ data, color = 'primary', filled = false, height, inline = fa
         pad + (1 - (value - low) / span) * (GRID_HEIGHT - pad * 2),
     ]);
     const line = linePath(points);
-    return (_jsxs("svg", { role: "img", "aria-label": "Trend", viewBox: `0 0 ${GRID_WIDTH} ${GRID_HEIGHT}`, preserveAspectRatio: "none", className: slots.chart({ className }), style: {
-            height: height ?? (inline ? INLINE_HEIGHT : 56),
-            ...(inline ? { width: INLINE_WIDTH, flex: 'none' } : null),
-            ...style,
-        }, ...props, children: [filled && line ? (_jsx("path", { d: `${line} L${GRID_WIDTH} ${GRID_HEIGHT} L0 ${GRID_HEIGHT} Z`, fill: "var(--pu-color)", opacity: "0.12" })) : null, _jsx("path", { d: line, fill: "none", stroke: "var(--pu-color)", strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", 
-                // The grid is stretched to the chart's size. Without this the line
-                // would be stretched with it, thick across and thin up and down.
-                vectorEffect: "non-scaling-stroke" })] }));
+    return useRender({
+        defaultTagName: 'svg',
+        render,
+        props: mergeProps({
+            role: 'img',
+            'aria-label': 'Trend',
+            viewBox: `0 0 ${GRID_WIDTH} ${GRID_HEIGHT}`,
+            preserveAspectRatio: 'none',
+            className: slots.chart({ className }),
+            style: {
+                height: height ?? (inline ? INLINE_HEIGHT : 56),
+                ...(inline ? { width: INLINE_WIDTH, flex: 'none' } : null),
+                ...style,
+            },
+            children: (_jsxs(_Fragment, { children: [filled && line ? (_jsx("path", { d: `${line} L${GRID_WIDTH} ${GRID_HEIGHT} L0 ${GRID_HEIGHT} Z`, fill: "var(--pu-color)", opacity: "0.12" })) : null, _jsx("path", { d: line, fill: "none", stroke: "var(--pu-color)", strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", 
+                        // The grid is stretched to the chart's size. Without this the line
+                        // would be stretched with it, thick across and thin up and down.
+                        vectorEffect: "non-scaling-stroke" })] })),
+        }, props),
+    });
 }
 KpiChart.displayName = 'Kpi.Chart';
 /** Progress towards a target, under the number. */
-function KpiProgress({ value, maxValue = 100, label, showValueLabel = false, color = 'primary', className, ...props }) {
+function KpiProgress({ value, maxValue = 100, label, showValueLabel = false, color = 'primary', className, render, ...props }) {
     const slots = kpiVariants({ color });
     const share = Math.min(1, Math.max(0, maxValue === 0 ? 0 : value / maxValue));
     const percent = Math.round(share * 100);
-    return (_jsxs("div", { className: slots.progress({ className }), ...props, children: [label !== undefined || showValueLabel ? (_jsxs("div", { className: slots.progressHeader(), children: [_jsx("span", { className: "font-medium", children: label }), showValueLabel ? _jsxs("span", { className: "text-muted-foreground", children: [percent, "%"] }) : null] })) : null, _jsx("div", { role: "progressbar", "aria-valuemin": 0, "aria-valuemax": maxValue, "aria-valuenow": value, "aria-label": typeof label === 'string' ? label : 'Progress', className: slots.progressTrack(), children: _jsx("div", { className: slots.progressFill(), style: { width: `${percent}%` } }) })] }));
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({
+            className: slots.progress({ className }),
+            children: (_jsxs(_Fragment, { children: [label !== undefined || showValueLabel ? (_jsxs("div", { className: slots.progressHeader(), children: [_jsx("span", { className: "font-medium", children: label }), showValueLabel ? _jsxs("span", { className: "text-muted-foreground", children: [percent, "%"] }) : null] })) : null, _jsx("div", { role: "progressbar", "aria-valuemin": 0, "aria-valuemax": maxValue, "aria-valuenow": value, "aria-label": typeof label === 'string' ? label : 'Progress', className: slots.progressTrack(), children: _jsx("div", { className: slots.progressFill(), style: { width: `${percent}%` } }) })] })),
+        }, props),
+    });
 }
 KpiProgress.displayName = 'Kpi.Progress';
 /** A quiet line under everything: when it was measured, how long is left. */
-function KpiFooter({ className, ...props }) {
-    return _jsx("div", { className: kpiVariants().footer({ className }), ...props });
+function KpiFooter({ className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({ className: kpiVariants().footer({ className }) }, props),
+    });
 }
 KpiFooter.displayName = 'Kpi.Footer';
 /** A rule between two parts of one card. */
-function KpiSeparator({ className, ...props }) {
-    return _jsx("div", { role: "separator", className: kpiVariants().separator({ className }), ...props });
+function KpiSeparator({ className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({ role: 'separator', className: kpiVariants().separator({ className }) }, props),
+    });
 }
 KpiSeparator.displayName = 'Kpi.Separator';
 /** Several metrics as one panel, with a rule between each and the next. */
-function KpiGroup({ orientation = 'horizontal', surface = false, className, ...props }) {
-    return _jsx("div", { className: kpiVariants({ orientation, surface }).group({ className }), ...props });
+function KpiGroup({ orientation = 'horizontal', surface = false, className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({ className: kpiVariants({ orientation, surface }).group({ className }) }, props),
+    });
 }
 KpiGroup.displayName = 'Kpi.Group';
 export const Kpi = Object.assign(KpiRoot, {

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

@@ -33,6 +33,12 @@
  * through context, so a label has no client JavaScript of its own.
  */
 import type { ComponentProps } 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 LabelProps extends ComponentProps<'label'> {
     /**
      * Marks the field as one that must be filled. The mark is for the eye; set
@@ -53,14 +59,14 @@ export interface LabelProps extends ComponentProps<'label'> {
  * The label element. A string child is the label's text; for more, compose
  * `Label.Text`, `Label.Hint` and `Label.Action`.
  */
-declare function LabelRoot({ required, optional, invalid, disabled, className, children, ...props }: LabelProps): import("react").JSX.Element;
+declare function LabelRoot({ required, optional, invalid, disabled, className, children, render, ...props }: LabelProps & RenderProp<'label'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace LabelRoot {
     var displayName: string;
 }
 export interface LabelTextProps extends ComponentProps<'span'> {
 }
 /** The field's name. It truncates rather than pushing the action off the line. */
-declare function LabelText({ className, children, ...props }: LabelTextProps): import("react").JSX.Element;
+declare function LabelText({ className, children, render, ...props }: LabelTextProps & RenderProp<'span'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace LabelText {
     var displayName: string;
 }
@@ -70,14 +76,14 @@ export interface LabelHintProps extends ComponentProps<'span'> {
  * A quieter word or two after the name: a limit, a format, a unit. On an
  * invalid field it takes the destructive colour, so it can say what is wrong.
  */
-declare function LabelHint({ className, ...props }: LabelHintProps): import("react").JSX.Element;
+declare function LabelHint({ className, render, ...props }: LabelHintProps & RenderProp<'span'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace LabelHint {
     var displayName: string;
 }
 export interface LabelActionProps extends ComponentProps<'span'> {
 }
 /** Pushed to the far end of the line: a link, a count, a small button. */
-declare function LabelAction({ className, ...props }: LabelActionProps): import("react").JSX.Element;
+declare function LabelAction({ className, render, ...props }: LabelActionProps & RenderProp<'span'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace LabelAction {
     var displayName: string;
 }

package/dist/components/label/index.js

@@ -1,5 +1,8 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { tv } from 'tailwind-variants';
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
 const labelVariants = tv({
     slots: {
         root: [
@@ -31,29 +34,56 @@ const labelVariants = tv({
  * The label element. A string child is the label's text; for more, compose
  * `Label.Text`, `Label.Hint` and `Label.Action`.
  */
-function LabelRoot({ required = false, optional = false, invalid = false, disabled = false, className, children, ...props }) {
+function LabelRoot({ required = false, optional = false, invalid = false, disabled = false, className, children, render, ...props }) {
     const slots = labelVariants();
     const plain = typeof children === 'string' || typeof children === 'number';
-    return (_jsxs("label", { "data-slot": "label", "data-required": required ? '' : undefined, "data-invalid": invalid ? '' : undefined, "data-disabled": disabled ? '' : undefined, className: slots.root({ className }), ...props, children: [plain ? _jsx(LabelText, { children: children }) : children, optional ? _jsx(LabelHint, { children: "Optional" }) : null] }));
+    return useRender({
+        defaultTagName: 'label',
+        render,
+        props: mergeProps({
+            'data-slot': 'label',
+            'data-required': required ? '' : undefined,
+            'data-invalid': invalid ? '' : undefined,
+            'data-disabled': disabled ? '' : undefined,
+            className: slots.root({ className }),
+            children: (_jsxs(_Fragment, { children: [plain ? _jsx(LabelText, { children: children }) : children, optional ? _jsx(LabelHint, { children: "Optional" }) : null] })),
+        }, props),
+    });
 }
 LabelRoot.displayName = 'Label';
 /** The field's name. It truncates rather than pushing the action off the line. */
-function LabelText({ className, children, ...props }) {
+function LabelText({ className, children, render, ...props }) {
     const slots = labelVariants();
-    return (_jsx("span", { "data-slot": "label-text", className: slots.text({ className }), ...props, children: _jsx("span", { className: slots.textInner(), children: children }) }));
+    return useRender({
+        defaultTagName: 'span',
+        render,
+        props: mergeProps({
+            'data-slot': 'label-text',
+            className: slots.text({ className }),
+            children: (_jsx(_Fragment, { children: _jsx("span", { className: slots.textInner(), children: children }) })),
+        }, props),
+    });
 }
 LabelText.displayName = 'Label.Text';
 /**
  * A quieter word or two after the name: a limit, a format, a unit. On an
  * invalid field it takes the destructive colour, so it can say what is wrong.
  */
-function LabelHint({ className, ...props }) {
-    return _jsx("span", { "data-slot": "label-hint", className: labelVariants().hint({ className }), ...props });
+function LabelHint({ className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'span',
+        render,
+        props: mergeProps({ 'data-slot': 'label-hint', className: labelVariants().hint({ className }) }, props),
+    });
 }
 LabelHint.displayName = 'Label.Hint';
 /** Pushed to the far end of the line: a link, a count, a small button. */
-function LabelAction({ className, ...props }) {
-    return _jsx("span", { "data-slot": "label-action", className: labelVariants().action({ className }), ...props });
+function LabelAction({ className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'span',
+        render,
+        props: mergeProps({ 'data-slot': 'label-action', className: labelVariants().action({ className }) }, props),
+    });
 }
 LabelAction.displayName = 'Label.Action';
 export const Label = Object.assign(LabelRoot, {

package/dist/components/lane-board/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'];
+};
 /** Which of the theme's roles a part is drawn in. */
 export type LaneBoardColor = 'primary' | 'info' | 'success' | 'warning' | 'destructive';
 /** A card is anything with an id that is its own across the whole board. */
@@ -58,28 +64,28 @@ export interface LaneBoardProps<T extends LaneBoardCard> extends Omit<ComponentP
      */
     height?: number | string;
 }
-declare function LaneBoardRoot<T extends LaneBoardCard>({ lanes: controlled, defaultLanes, onLanesChange, onMove, renderCard, renderLaneFooter, cardName, label, height, className, style, ...props }: LaneBoardProps<T>): import("react").JSX.Element;
+declare function LaneBoardRoot<T extends LaneBoardCard>({ lanes: controlled, defaultLanes, onLanesChange, onMove, renderCard, renderLaneFooter, cardName, label, height, className, style, render, ...props }: LaneBoardProps<T> & RenderProp<'div'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace LaneBoardRoot {
     var displayName: string;
 }
 export interface LaneBoardTitleProps extends ComponentProps<'div'> {
 }
 /** A card's name. */
-declare function LaneBoardTitle({ className, ...props }: LaneBoardTitleProps): import("react").JSX.Element;
+declare function LaneBoardTitle({ className, render, ...props }: LaneBoardTitleProps & RenderProp<'div'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace LaneBoardTitle {
     var displayName: string;
 }
 export interface LaneBoardCodeProps extends ComponentProps<'div'> {
 }
 /** A card's reference, in a fixed-width face so a column of them lines up. */
-declare function LaneBoardCode({ className, ...props }: LaneBoardCodeProps): import("react").JSX.Element;
+declare function LaneBoardCode({ className, render, ...props }: LaneBoardCodeProps & RenderProp<'div'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace LaneBoardCode {
     var displayName: string;
 }
 export interface LaneBoardRowProps extends ComponentProps<'div'> {
 }
 /** The last line of a card: something at each end. */
-declare function LaneBoardRow({ className, ...props }: LaneBoardRowProps): import("react").JSX.Element;
+declare function LaneBoardRow({ className, render, ...props }: LaneBoardRowProps & RenderProp<'div'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace LaneBoardRow {
     var displayName: string;
 }
@@ -94,7 +100,7 @@ export interface LaneBoardStepsProps extends Omit<ComponentProps<'div'>, 'childr
     label?: string;
 }
 /** How far along a card is, as a row of dashes with the done ones lit. */
-declare function LaneBoardSteps({ value, max, color, label, className, ...props }: LaneBoardStepsProps): import("react").JSX.Element;
+declare function LaneBoardSteps({ value, max, color, label, className, render, ...props }: LaneBoardStepsProps & RenderProp<'div'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace LaneBoardSteps {
     var displayName: string;
 }
@@ -103,21 +109,21 @@ export interface LaneBoardTagProps extends Omit<ComponentProps<'span'>, 'color'>
     color?: LaneBoardColor;
 }
 /** A word in a pill, for a card's state. */
-declare function LaneBoardTag({ color, className, ...props }: LaneBoardTagProps): import("react").JSX.Element;
+declare function LaneBoardTag({ color, className, render, ...props }: LaneBoardTagProps & RenderProp<'span'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace LaneBoardTag {
     var displayName: string;
 }
 export interface LaneBoardMetaProps extends ComponentProps<'span'> {
 }
 /** A short figure at the end of a card's last line: a time, a count. */
-declare function LaneBoardMeta({ className, ...props }: LaneBoardMetaProps): import("react").JSX.Element;
+declare function LaneBoardMeta({ className, render, ...props }: LaneBoardMetaProps & RenderProp<'span'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace LaneBoardMeta {
     var displayName: string;
 }
 export interface LaneBoardAvatarProps extends ComponentProps<'span'> {
 }
 /** Who a card belongs to, as initials in a small circle. */
-declare function LaneBoardAvatar({ className, ...props }: LaneBoardAvatarProps): import("react").JSX.Element;
+declare function LaneBoardAvatar({ className, render, ...props }: LaneBoardAvatarProps & RenderProp<'span'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace LaneBoardAvatar {
     var displayName: string;
 }
@@ -130,4 +136,4 @@ export declare const LaneBoard: typeof LaneBoardRoot & {
     Meta: typeof LaneBoardMeta;
     Avatar: typeof LaneBoardAvatar;
 };
-export { LaneBoardTitle, LaneBoardCode, LaneBoardRow, LaneBoardSteps, LaneBoardTag, LaneBoardMeta, LaneBoardAvatar, };
+export { LaneBoardTitle, LaneBoardCode, LaneBoardRow, LaneBoardSteps, LaneBoardTag, LaneBoardMeta, LaneBoardAvatar };