panelui-web 0.10.1 → 0.11.0

package/dist/components/table/index.js

@@ -0,0 +1,145 @@
+'use client';
+import { jsx as _jsx } 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 tableVariants = tv({
+    // The parts are rendered apart from the table, so the table's own settings
+    // (density, stripes, pinning, framing) reach them as data attributes on
+    // the container rather than as variants.
+    slots: {
+        container: 'relative w-full overflow-auto',
+        table: 'w-full caption-bottom border-collapse text-sm',
+        header: [
+            // The header's line is a shadow, so it stays drawn while the row is pinned and the body scrolls under it.
+            '[&_tr]:shadow-[inset_0_-1px_0_var(--border)] [&_tr]:hover:bg-transparent',
+        ],
+        body: '[&_tr:last-child]:border-0',
+        footer: 'border-t bg-muted/40 font-medium [&>tr]:last:border-b-0',
+        row: [
+            'border-b border-border transition-colors',
+            'hover:bg-muted/40 data-[state=selected]:bg-muted aria-selected:bg-muted',
+        ],
+        head: [
+            'h-10 whitespace-nowrap px-3 text-start align-middle text-xs font-medium text-muted-foreground',
+            'first:ps-0 last:pe-0 in-data-[framed]:first:ps-4 in-data-[framed]:last:pe-4',
+        ],
+        cell: 'px-3 align-middle first:ps-0 last:pe-0 in-data-[framed]:first:ps-4 in-data-[framed]:last:pe-4',
+        caption: 'mt-3 text-xs text-muted-foreground',
+    },
+    variants: {
+        align: {
+            start: {},
+            center: { head: 'text-center', cell: 'text-center' },
+            end: { head: 'text-end', cell: 'text-end tabular-nums' },
+        },
+    },
+    defaultVariants: { align: 'start' },
+});
+/** The table, in a box that scrolls when the table is wider or taller than it. */
+function TableRoot({ density = 'comfortable', striped = false, framed = false, maxHeight, containerClassName, className, render, ...props }) {
+    const slots = tableVariants();
+    const element = useRender({
+        defaultTagName: 'table',
+        render,
+        props: mergeProps({ 'data-slot': 'table', className: slots.table({ className }) }, props),
+    });
+    return (_jsx("div", { "data-slot": "table-container", "data-density": density, "data-striped": striped ? '' : undefined, "data-framed": framed ? '' : undefined, "data-sticky": maxHeight != null ? '' : undefined, className: slots.container({ className: containerClassName }), style: maxHeight != null ? { maxHeight } : undefined, children: element }));
+}
+TableRoot.displayName = 'Table';
+/** The header row group. Pinned while the body scrolls, when the table has a `maxHeight`. */
+function TableHeader({ className, render, ...props }) {
+    const slots = tableVariants();
+    return useRender({
+        defaultTagName: 'thead',
+        render,
+        props: mergeProps({
+            'data-slot': 'table-header',
+            className: slots.header({
+                className: [
+                    'in-data-[sticky]:sticky in-data-[sticky]:top-0 in-data-[sticky]:z-10 in-data-[sticky]:bg-background',
+                    className,
+                ],
+            }),
+        }, props),
+    });
+}
+TableHeader.displayName = 'Table.Header';
+/** The rows of data. */
+function TableBody({ className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'tbody',
+        render,
+        props: mergeProps({
+            'data-slot': 'table-body',
+            className: tableVariants().body({
+                className: ['in-data-[striped]:[&>tr:nth-child(even)]:bg-muted/40', className],
+            }),
+        }, props),
+    });
+}
+TableBody.displayName = 'Table.Body';
+/** Totals under the body. */
+function TableFooter({ className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'tfoot',
+        render,
+        props: mergeProps({ 'data-slot': 'table-footer', className: tableVariants().footer({ className }) }, props),
+    });
+}
+TableFooter.displayName = 'Table.Footer';
+/** One row. `aria-selected` shades it as chosen. */
+function TableRow({ className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'tr',
+        render,
+        props: mergeProps({ 'data-slot': 'table-row', className: tableVariants().row({ className }) }, props),
+    });
+}
+TableRow.displayName = 'Table.Row';
+/** A column's heading. */
+function TableHead({ align = 'start', className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'th',
+        render,
+        props: mergeProps({
+            'data-slot': 'table-head',
+            scope: 'col',
+            className: tableVariants({ align }).head({ className: ['in-data-[density=compact]:h-8', className] }),
+        }, props),
+    });
+}
+TableHead.displayName = 'Table.Head';
+/** One cell. */
+function TableCell({ align = 'start', className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'td',
+        render,
+        props: mergeProps({
+            'data-slot': 'table-cell',
+            className: tableVariants({ align }).cell({
+                className: ['py-3 in-data-[density=compact]:py-1.5', className],
+            }),
+        }, props),
+    });
+}
+TableCell.displayName = 'Table.Cell';
+/** What the table is, under it. Read first by a screen reader. */
+function TableCaption({ className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'caption',
+        render,
+        props: mergeProps({ 'data-slot': 'table-caption', className: tableVariants().caption({ className }) }, props),
+    });
+}
+TableCaption.displayName = 'Table.Caption';
+export const Table = Object.assign(TableRoot, {
+    Header: TableHeader,
+    Body: TableBody,
+    Footer: TableFooter,
+    Row: TableRow,
+    Head: TableHead,
+    Cell: TableCell,
+    Caption: TableCaption,
+});
+export { TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption };

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

@@ -37,6 +37,12 @@
  */
 import { Tabs as BaseTabs } from '@base-ui/react/tabs';
 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 type TabsVariant = 'segmented' | 'underline' | 'pills';
 export interface TabsProps extends Omit<BaseTabs.Root.Props, 'className'> {
     /** How the tabs are drawn. Default `segmented`. */
@@ -73,7 +79,7 @@ declare namespace TabsTrigger {
 export interface TabsBadgeProps extends ComponentProps<'span'> {
 }
 /** A count beside a tab's label: unread, open, waiting. */
-declare function TabsBadge({ className, ...props }: TabsBadgeProps): import("react").JSX.Element;
+declare function TabsBadge({ className, render, ...props }: TabsBadgeProps & RenderProp<'span'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace TabsBadge {
     var displayName: string;
 }

package/dist/components/tabs/index.js

@@ -40,6 +40,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Tabs as BaseTabs } from '@base-ui/react/tabs';
 import { createContext, useContext, useEffect, useRef } from 'react';
 import { tv } from 'tailwind-variants';
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
 /** One curve for the marker and the panel, so they move as one thing. */
 const EASE = 'ease-[cubic-bezier(0.3,0.7,0.1,1)]';
 const tabsVariants = tv({
@@ -177,9 +179,13 @@ function TabsTrigger({ className, ...props }) {
 }
 TabsTrigger.displayName = 'Tabs.Trigger';
 /** A count beside a tab's label: unread, open, waiting. */
-function TabsBadge({ className, ...props }) {
+function TabsBadge({ className, render, ...props }) {
     const slots = tabsVariants({ variant: useContext(VariantContext) });
-    return _jsx("span", { "data-slot": "tabs-badge", className: slots.badge({ className }), ...props });
+    return useRender({
+        defaultTagName: 'span',
+        render,
+        props: mergeProps({ 'data-slot': 'tabs-badge', className: slots.badge({ className }) }, props),
+    });
 }
 TabsBadge.displayName = 'Tabs.Badge';
 /** What one tab shows. Only the chosen one is in the page unless `keepMounted` is set. */

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

@@ -1,26 +1,3 @@
-/**
- * Textarea — a field for more than one line, that grows as it is written in.
- *
- * ```tsx
- * <Textarea placeholder="What happened?" />
- * <Textarea minRows={1} maxRows={6} variant="ghost" />
- * ```
- *
- * ## Growing
- *
- * It starts `minRows` lines tall and grows a line at a time as text is
- * written, up to `maxRows`. Past that it scrolls, with a thin scrollbar of its
- * own rather than the browser's. Pass `autoResize={false}` for a field that
- * keeps the size `rows` gives it and can be resized by hand.
- *
- * The height is measured from the text, so it is right on the first render
- * for a value that was already there, and for a value set from outside.
- *
- * ## Ghost
- *
- * `variant="ghost"` drops the border, background and ring, for a field set
- * inside something that already draws them, such as a card or a composer.
- */
 import { type ComponentProps } from 'react';
 export interface TextareaProps extends Omit<ComponentProps<'textarea'>, 'size'> {
     /** `ghost` draws no box, for a field inside something that draws one. Default `default`. */

package/dist/components/textarea/index.js

@@ -22,7 +22,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
  *
  * `variant="ghost"` drops the border, background and ring, for a field set
  * inside something that already draws them, such as a card or a composer.
+ *
+ * ## Inside a Field
+ *
+ * Put in a `Field`, it takes the field's label, description and error without
+ * ids passed by hand, and turns invalid when the field does.
  */
+import { Field as BaseField } from '@base-ui/react/field';
 import { useCallback, useLayoutEffect, useRef } from 'react';
 import { tv } from 'tailwind-variants';
 const textareaVariants = tv({
@@ -89,13 +95,24 @@ function TextareaRoot({ variant, size, autoResize = true, minRows = 2, maxRows =
     }, [autoResize, minRows, maxRows]);
     // Before paint, so a value that was already there never shows at the wrong height.
     useLayoutEffect(fit, [fit, value]);
-    return (_jsx("textarea", { ref: (node) => {
-            field.current = node;
-            setRef(ref, node);
-        }, "data-slot": "textarea", rows: autoResize ? minRows : rows, value: value, onInput: (event) => {
+    const control = {
+        'data-slot': 'textarea',
+        rows: autoResize ? minRows : rows,
+        value,
+        onInput: (event) => {
             onInput?.(event);
             fit();
-        }, className: textareaVariants({ variant, size, autoResize, className }), style: style, ...props }));
+        },
+        className: textareaVariants({ variant, size, autoResize, className }),
+        style,
+        ...props,
+    };
+    // Rendered through the field's control, so a Field around it can label,
+    // describe and validate it. Outside a Field it is a plain textarea.
+    return (_jsx(BaseField.Control, { ref: (node) => {
+            field.current = node;
+            setRef(ref, node);
+        }, render: _jsx("textarea", {}), ...control }));
 }
 TextareaRoot.displayName = 'Textarea';
 export const Textarea = TextareaRoot;

package/dist/components/tilt-card/index.d.ts

@@ -32,6 +32,12 @@
  * for reduced motion. Whatever the card says is in its contents.
  */
 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'];
+};
 /** Which of the theme's roles the light under the pointer is drawn in. */
 export type TiltCardColor = 'primary' | 'info' | 'success' | 'warning' | 'destructive';
 export interface TiltCardProps extends Omit<ComponentProps<'div'>, 'color'> {
@@ -44,7 +50,7 @@ export interface TiltCardProps extends Omit<ComponentProps<'div'>, 'color'> {
     /** Extra classes for the card itself. `className` goes on the box round it. */
     cardClassName?: string;
 }
-declare function TiltCardRoot({ tilt, color, glare, className, cardClassName, children, onPointerMove, onPointerLeave, ...props }: TiltCardProps): import("react").JSX.Element;
+declare function TiltCardRoot({ tilt, color, glare, className, cardClassName, children, onPointerMove, onPointerLeave, render, ...props }: TiltCardProps & RenderProp<'div'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace TiltCardRoot {
     var displayName: string;
 }
@@ -53,7 +59,7 @@ export interface TiltCardLayerProps extends ComponentProps<'div'> {
     depth?: number;
 }
 /** Something lifted off the card, which moves against it as the card leans. */
-declare function TiltCardLayer({ depth, className, style, ...props }: TiltCardLayerProps): import("react").JSX.Element;
+declare function TiltCardLayer({ depth, className, style, render, ...props }: TiltCardLayerProps & RenderProp<'div'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace TiltCardLayer {
     var displayName: string;
 }
@@ -69,7 +75,7 @@ declare namespace TiltCardTitle {
 export interface TiltCardDescriptionProps extends ComponentProps<'p'> {
 }
 /** A line or two of body text, under the title. */
-declare function TiltCardDescription({ className, ...props }: TiltCardDescriptionProps): import("react").JSX.Element;
+declare function TiltCardDescription({ className, render, ...props }: TiltCardDescriptionProps & RenderProp<'p'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace TiltCardDescription {
     var displayName: string;
 }

package/dist/components/tilt-card/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";
 /**
  * TiltCard — a card that leans towards the pointer, with layers inside it
  * that move by how near they are.
@@ -33,8 +33,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * follow a finger, and it holds still for anyone who has asked their system
  * for reduced motion. Whatever the card says is in its contents.
  */
-import { useRef, } from 'react';
+import { useRef } from 'react';
 import { tv } from 'tailwind-variants';
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
 const tiltCardVariants = tv({
     slots: {
         // The eye's distance from the card. Nearer and the lean would be a lurch.
@@ -62,7 +64,7 @@ const tiltCardVariants = tv({
     },
     defaultVariants: { color: 'primary' },
 });
-function TiltCardRoot({ tilt = 8, color = 'primary', glare = true, className, cardClassName, children, onPointerMove, onPointerLeave, ...props }) {
+function TiltCardRoot({ tilt = 8, color = 'primary', glare = true, className, cardClassName, children, onPointerMove, onPointerLeave, render, ...props }) {
     const slots = tiltCardVariants({ color });
     const root = useRef(null);
     const frame = useRef(0);
@@ -103,12 +105,26 @@ function TiltCardRoot({ tilt = 8, color = 'primary', glare = true, className, ca
         for (const name of ['--pu-rx', '--pu-ry', '--pu-px', '--pu-py'])
             node.style.removeProperty(name);
     };
-    return (_jsx("div", { ref: root, className: slots.root({ className }), onPointerMove: lean, onPointerLeave: settle, ...props, children: _jsxs("div", { className: slots.card({ className: cardClassName }), children: [children, glare ? _jsx("span", { "aria-hidden": "true", className: slots.glare() }) : null] }) }));
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({
+            ref: root,
+            className: slots.root({ className }),
+            onPointerMove: lean,
+            onPointerLeave: settle,
+            children: (_jsx(_Fragment, { children: _jsxs("div", { className: slots.card({ className: cardClassName }), children: [children, glare ? _jsx("span", { "aria-hidden": "true", className: slots.glare() }) : null] }) })),
+        }, props),
+    });
 }
 TiltCardRoot.displayName = 'TiltCard';
 /** Something lifted off the card, which moves against it as the card leans. */
-function TiltCardLayer({ depth = 16, className, style, ...props }) {
-    return (_jsx("div", { className: tiltCardVariants().layer({ className }), style: { ['--pu-depth']: depth, ...style }, ...props }));
+function TiltCardLayer({ depth = 16, className, style, render, ...props }) {
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({ className: tiltCardVariants().layer({ className }), style: { ['--pu-depth']: depth, ...style } }, props),
+    });
 }
 TiltCardLayer.displayName = 'TiltCard.Layer';
 /** What the card is about. */
@@ -117,8 +133,12 @@ function TiltCardTitle({ as: Tag = 'h3', className, ...props }) {
 }
 TiltCardTitle.displayName = 'TiltCard.Title';
 /** A line or two of body text, under the title. */
-function TiltCardDescription({ className, ...props }) {
-    return (_jsx("p", { "data-slot": "tilt-card-description", className: tiltCardVariants().description({ className }), ...props }));
+function TiltCardDescription({ className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'p',
+        render,
+        props: mergeProps({ 'data-slot': 'tilt-card-description', className: tiltCardVariants().description({ className }) }, props),
+    });
 }
 TiltCardDescription.displayName = 'TiltCard.Description';
 export const TiltCard = Object.assign(TiltCardRoot, {

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

@@ -1,4 +1,11 @@
 import { type ComponentProps } 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 type TimelineColor = 'primary' | 'info' | 'success' | 'warning' | 'destructive' | 'chart-1' | 'chart-2' | 'chart-3' | 'chart-4' | 'chart-5';
 export type TimelineClipVariant = 'bar' | 'block' | 'media';
 export type TimelineTrackSize = 'sm' | 'md' | 'lg';
@@ -102,7 +109,7 @@ declare const timelineVariants: import("tailwind-variants").TVReturnType<{
     playhead: string;
     playheadLine: string;
     playheadHead: string[];
-}, import("tailwind-variants").TVReturnType<{
+}, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
         bar: {
             clip: string;
@@ -148,7 +155,7 @@ declare const timelineVariants: import("tailwind-variants").TVReturnType<{
     playhead: string;
     playheadLine: string;
     playheadHead: string[];
-}, undefined, unknown, unknown, undefined>>;
+}>>;
 /**
  * The timeline's state, for controls of your own: a play button in a
  * toolbar, a readout, a button that zooms to fit. Use it inside `<Timeline>`.
@@ -198,14 +205,14 @@ export interface TimelineProps extends Omit<ComponentProps<'div'>, 'onChange'> {
     readOnly?: boolean;
 }
 /** Holds the time, the zoom and playback for the parts inside it. */
-declare function TimelineRoot({ duration, time: timeProp, defaultTime, onTimeChange, zoom: zoomProp, defaultZoom, onZoomChange, minZoom, maxZoom, playing: playingProp, onPlayingChange, loop, snap, readOnly, className, children, ...props }: TimelineProps): import("react").JSX.Element;
+declare function TimelineRoot({ duration, time: timeProp, defaultTime, onTimeChange, zoom: zoomProp, defaultZoom, onZoomChange, minZoom, maxZoom, playing: playingProp, onPlayingChange, loop, snap, readOnly, className, children, ...props }: TimelineProps): ReactTypes.JSX.Element;
 declare namespace TimelineRoot {
     var displayName: string;
 }
 export interface TimelineHeaderProps extends ComponentProps<'div'> {
 }
 /** A row above the tracks, for a toolbar, the time and the zoom. */
-declare function TimelineHeader({ className, ...props }: TimelineHeaderProps): import("react").JSX.Element;
+declare function TimelineHeader({ className, render, ...props }: TimelineHeaderProps & RenderProp<'div'>): ReactTypes.ReactElement<unknown, string | ReactTypes.JSXElementConstructor<any>>;
 declare namespace TimelineHeader {
     var displayName: string;
 }
@@ -214,14 +221,14 @@ export interface TimelineTimeProps extends ComponentProps<'span'> {
     showDuration?: boolean;
 }
 /** Where the playhead is, written out, and how long the whole is. */
-declare function TimelineTime({ showDuration, className, ...props }: TimelineTimeProps): import("react").JSX.Element;
+declare function TimelineTime({ showDuration, className, render, ...props }: TimelineTimeProps & RenderProp<'span'>): ReactTypes.ReactElement<unknown, string | ReactTypes.JSXElementConstructor<any>>;
 declare namespace TimelineTime {
     var displayName: string;
 }
 export interface TimelineZoomProps extends Omit<ComponentProps<'div'>, 'children'> {
 }
 /** A line slider that zooms the timeline, with zoom out and zoom in either side. */
-declare function TimelineZoom({ className, ...props }: TimelineZoomProps): import("react").JSX.Element;
+declare function TimelineZoom({ className, render, ...props }: TimelineZoomProps & RenderProp<'div'>): ReactTypes.ReactElement<unknown, string | ReactTypes.JSXElementConstructor<any>>;
 declare namespace TimelineZoom {
     var displayName: string;
 }
@@ -231,14 +238,14 @@ export interface TimelineViewportProps extends ComponentProps<'div'> {
  * The part that scrolls sideways: the ruler, the tracks and the playhead go
  * in here. Pinch, or ⌘ or Ctrl with the wheel, zooms about the pointer.
  */
-declare function TimelineViewport({ className, style, children, ...props }: TimelineViewportProps): import("react").JSX.Element;
+declare function TimelineViewport({ className, style, children, ...props }: TimelineViewportProps): ReactTypes.JSX.Element;
 declare namespace TimelineViewport {
     var displayName: string;
 }
 export interface TimelineRulerProps extends ComponentProps<'div'> {
 }
 /** Ticks and times along the top. Pressing or dragging on it moves the playhead there. */
-declare function TimelineRuler({ className, ...props }: TimelineRulerProps): import("react").JSX.Element;
+declare function TimelineRuler({ className, render, ...props }: TimelineRulerProps & RenderProp<'div'>): ReactTypes.ReactElement<unknown, string | ReactTypes.JSXElementConstructor<any>>;
 declare namespace TimelineRuler {
     var displayName: string;
 }
@@ -249,7 +256,7 @@ export interface TimelineTrackProps extends ComponentProps<'div'> {
     label?: string;
 }
 /** A row of clips. Clips on one track cannot overlap. */
-declare function TimelineTrack({ size, label, className, ...props }: TimelineTrackProps): import("react").JSX.Element;
+declare function TimelineTrack({ size, label, className, ...props }: TimelineTrackProps): ReactTypes.JSX.Element;
 declare namespace TimelineTrack {
     var displayName: string;
 }
@@ -278,14 +285,14 @@ export interface TimelineClipProps extends Omit<ComponentProps<'div'>, 'onChange
     label?: string;
 }
 /** One clip. With `onChange` it moves by its middle and trims by its ends. */
-declare function TimelineClip({ start, end, onChange, onChangeEnd, onRemove, variant: variantProp, color, label, className, style, children, onKeyDown, ...props }: TimelineClipProps): import("react").JSX.Element;
+declare function TimelineClip({ start, end, onChange, onChangeEnd, onRemove, variant: variantProp, color, label, className, style, children, onKeyDown, render, ...props }: TimelineClipProps & RenderProp<'div'>): ReactTypes.ReactElement<unknown, string | ReactTypes.JSXElementConstructor<any>>;
 declare namespace TimelineClip {
     var displayName: string;
 }
 export interface TimelineClipLabelProps extends ComponentProps<'span'> {
 }
 /** Words on a clip, with an icon: its length, its speed, what it is. */
-declare function TimelineClipLabel({ className, ...props }: TimelineClipLabelProps): import("react").JSX.Element;
+declare function TimelineClipLabel({ className, render, ...props }: TimelineClipLabelProps & RenderProp<'span'>): ReactTypes.ReactElement<unknown, string | ReactTypes.JSXElementConstructor<any>>;
 declare namespace TimelineClipLabel {
     var displayName: string;
 }
@@ -294,7 +301,7 @@ export interface TimelineWaveformProps extends Omit<ComponentProps<'svg'>, 'chil
     peaks: number[];
 }
 /** The sound of a media clip, drawn as bars across it. */
-declare function TimelineWaveform({ peaks, className, ...props }: TimelineWaveformProps): import("react").JSX.Element;
+declare function TimelineWaveform({ peaks, className, render, ...props }: TimelineWaveformProps & RenderProp<'svg'>): ReactTypes.ReactElement<unknown, string | ReactTypes.JSXElementConstructor<any>>;
 declare namespace TimelineWaveform {
     var displayName: string;
 }
@@ -309,7 +316,7 @@ export interface TimelinePlayheadProps extends Omit<ComponentProps<'div'>, 'colo
  * be dragged, and with focus the arrow keys step it: a tenth of a second,
  * or a second with Shift.
  */
-declare function TimelinePlayhead({ color, showTime, className, style, ...props }: TimelinePlayheadProps): import("react").JSX.Element;
+declare function TimelinePlayhead({ color, showTime, className, style, render, ...props }: TimelinePlayheadProps & RenderProp<'div'>): ReactTypes.ReactElement<unknown, string | ReactTypes.JSXElementConstructor<any>>;
 declare namespace TimelinePlayhead {
     var displayName: string;
 }