panelui-web 0.10.1 → 0.11.0

package/dist/components/sheet/index.js

@@ -72,6 +72,8 @@ import { Drawer } from '@base-ui/react/drawer';
 import { ScrollArea } from '@base-ui/react/scroll-area';
 import { Children, createContext, useCallback, useContext, useEffect, 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';
 /*
  * One curve for every movement: the sheet arriving, the one behind it stepping
  * back, the page receding. A fast start that eases into place reads as weight,
@@ -356,16 +358,11 @@ function SheetFrame({ children, open, onOpenChange, defaultOpen = false, side =
     return (_jsx(SheetContext.Provider, { value: context, children: _jsx(Drawer.Root, { open: isOpen, handle: drawerHandle, swipeDirection: SWIPE[side], disablePointerDismissal: !dismissible, onOpenChange: (next, details) => {
                 // The primitive has a switch for a press outside and none for
                 // Escape or a swipe, so those are refused here.
-                if (!next &&
-                    !dismissible &&
-                    details.reason !== 'close-press' &&
-                    details.reason !== 'imperative-action') {
+                if (!next && !dismissible && details.reason !== 'close-press' && details.reason !== 'imperative-action') {
                     return;
                 }
                 setOpen(next);
-            }, children: typeof children === 'function'
-                ? ({ payload }) => children(payload)
-                : children }) }));
+            }, children: typeof children === 'function' ? ({ payload }) => children(payload) : children }) }));
 }
 /**
  * What opens a sheet: its own, or with `to`, the `Sheet.Next` of that name.
@@ -435,10 +432,17 @@ SheetContent.displayName = 'Sheet.Content';
  * The heading block. It leaves room for the close button beside the title,
  * so the two share the top line instead of stacking.
  */
-function SheetHeader({ title, description, className, children, ...props }) {
+function SheetHeader({ title, description, className, children, render, ...props }) {
     const { showClose } = useSheet('Sheet.Header');
     const slots = sheetVariants();
-    return (_jsxs("div", { className: slots.header({ className: [showClose && 'pe-14', className] }), ...props, children: [title !== undefined ? _jsx(SheetTitle, { children: title }) : null, description !== undefined ? _jsx(SheetDescription, { children: description }) : null, children] }));
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({
+            className: slots.header({ className: [showClose && 'pe-14', className] }),
+            children: (_jsxs(_Fragment, { children: [title !== undefined ? _jsx(SheetTitle, { children: title }) : null, description !== undefined ? _jsx(SheetDescription, { children: description }) : null, children] })),
+        }, props),
+    });
 }
 SheetHeader.displayName = 'Sheet.Header';
 /** The sheet's name, announced when it opens. */
@@ -456,7 +460,7 @@ function SheetDescription({ className, ...props }) {
     const slots = sheetVariants();
     if (inline)
         return _jsx("p", { className: slots.description({ className }), ...props });
-    return (_jsx(Drawer.Content, { render: _jsx(Drawer.Description, { className: slots.description({ className }), ...props }) }));
+    return _jsx(Drawer.Content, { render: _jsx(Drawer.Description, { className: slots.description({ className }), ...props }) });
 }
 SheetDescription.displayName = 'Sheet.Description';
 /**
@@ -678,14 +682,12 @@ function SheetSlides({ snap = true, index, defaultIndex = 0, onIndexChange, coun
     };
     const context = useMemo(() => ({ snap, count, current, choose: settle, pressable: !snap && onIndexChange !== undefined }), [snap, count, current, settle, onIndexChange]);
     return (_jsx(SlidesContext.Provider, { value: context, children: _jsxs(ScrollArea.Root, { "data-slot": "sheet-slides", "data-snap": snap ? '' : undefined, className: slots.slides({ className }), style: { ...style, ['--slide-aspect']: aspect }, ...props, children: [_jsx(ScrollArea.Viewport, { ref: viewport, tabIndex: 0, "aria-roledescription": "carousel", "aria-label": label, onKeyDown: keys, className: slots.slidesViewport({
-                        className: snap
-                            ? 'min-h-[min(60dvh,32rem)] snap-y snap-mandatory [container-type:size]'
-                            : undefined,
+                        className: snap ? 'min-h-[min(60dvh,32rem)] snap-y snap-mandatory [container-type:size]' : undefined,
                     }), children: _jsx(ScrollArea.Content, { className: slots.slidesContent({ className: snap ? 'py-1.5' : 'gap-2 pb-3 pt-1' }), children: slides.map((slide, at) => (_jsx(SlideIndexContext.Provider, { value: at, children: slide }, at))) }) }), _jsx(ScrollArea.Scrollbar, { orientation: "vertical", className: slots.scrollbar(), children: _jsx(ScrollArea.Thumb, { className: slots.thumb() }) }), (counter ?? snap) && count > 1 ? (_jsxs("div", { "data-slot": "sheet-slides-counter", "aria-hidden": "true", className: slots.counter(), children: [current + 1, " / ", count] })) : null] }) }));
 }
 SheetSlides.displayName = 'Sheet.Slides';
 /** One slide: a rounded frame that fills with an image, a video or anything drawn. */
-function SheetSlide({ label, aspect, className, style, children, ...props }) {
+function SheetSlide({ label, aspect, className, style, children, render, ...props }) {
     const slides = useContext(SlidesContext);
     if (!slides)
         throw new Error('Sheet.Slide must be used inside <Sheet.Slides>.');
@@ -715,7 +717,17 @@ function SheetSlide({ label, aspect, className, style, children, ...props }) {
         return (_jsx("div", { "data-slot": "sheet-slide", "data-slide-frame": "", "data-index": at, "data-current": selected ? '' : undefined, role: "group", "aria-roledescription": "slide", "aria-label": name, className: frameClass, style: frameStyle, ...props, children: children }));
     }
     const frame = (_jsx("div", { "data-slide-frame": "", "data-current": selected ? '' : undefined, className: frameClass, style: frameStyle, children: children }));
-    return (_jsxs("div", { "data-slot": "sheet-slide", "data-index": at, "data-selected": selected ? '' : undefined, className: slots.slideRow(), ...props, children: [_jsx("span", { "aria-hidden": "true", className: slots.slideNumber({ className: selected ? 'text-[var(--info)]' : undefined }), children: at + 1 }), slides.pressable ? (_jsx("button", { type: "button", "aria-label": label ? name : `Slide ${place}`, "aria-current": selected ? 'true' : undefined, className: slots.slideButton(), onClick: () => slides.choose(at), children: frame })) : (_jsx("div", { role: "group", "aria-roledescription": "slide", "aria-label": name, children: frame }))] }));
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({
+            'data-slot': 'sheet-slide',
+            'data-index': at,
+            'data-selected': selected ? '' : undefined,
+            className: slots.slideRow(),
+            children: (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", className: slots.slideNumber({ className: selected ? 'text-[var(--info)]' : undefined }), children: at + 1 }), slides.pressable ? (_jsx("button", { type: "button", "aria-label": label ? name : `Slide ${place}`, "aria-current": selected ? 'true' : undefined, className: slots.slideButton(), onClick: () => slides.choose(at), children: frame })) : (_jsx("div", { role: "group", "aria-roledescription": "slide", "aria-label": name, children: frame }))] })),
+        }, props),
+    });
 }
 SheetSlide.displayName = 'Sheet.Slide';
 /**

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

@@ -37,6 +37,13 @@
  */
 import { Slider as BaseSlider } from '@base-ui/react/slider';
 import { type ComponentProps, type CSSProperties, 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 type SliderVariant = 'fill' | 'line';
 export type SliderSize = 'sm' | 'md' | 'lg';
 export type SliderColor = 'neutral' | 'primary' | 'info' | 'success' | 'warning' | 'destructive';
@@ -164,7 +171,7 @@ declare const sliderVariants: import("tailwind-variants").TVReturnType<{
     label: string;
     value: string;
     step: string[];
-}, import("tailwind-variants").TVReturnType<{
+}, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
         fill: {
             control: string;
@@ -226,7 +233,7 @@ declare const sliderVariants: import("tailwind-variants").TVReturnType<{
     label: string;
     value: string;
     step: string[];
-}, undefined, unknown, unknown, undefined>>;
+}>>;
 type SliderValue = number | number[];
 export interface SliderProps<Value extends SliderValue = number> extends Omit<BaseSlider.Root.Props<Value>, 'className' | 'style' | 'format' | 'orientation' | 'children' | 'render' | 'onValueChange' | 'value' | 'defaultValue'> {
     /** The value, when the caller holds it. Two numbers make a range with two handles. */
@@ -268,7 +275,7 @@ export interface SliderProps<Value extends SliderValue = number> extends Omit<Ba
  * A slider. `defaultValue`, or `value` with `onValueChange`; `min`, `max`
  * and `step` as for any range.
  */
-declare function SliderRoot<Value extends SliderValue = number>({ value: valueProp, defaultValue, onValueChange, variant, label, format, origin, color, size, showValue, ticks, min, max, step, disabled, locale, children, className, style, ...props }: SliderProps<Value>): import("react").JSX.Element;
+declare function SliderRoot<Value extends SliderValue = number>({ value: valueProp, defaultValue, onValueChange, variant, label, format, origin, color, size, showValue, ticks, min, max, step, disabled, locale, children, className, style, ...props }: SliderProps<Value>): ReactTypes.JSX.Element;
 declare namespace SliderRoot {
     var displayName: string;
 }
@@ -283,7 +290,7 @@ export interface SliderStepProps extends Omit<ComponentProps<'button'>, 'childre
  * in on either side of a zoom slider. It is disabled at the end it moves
  * towards.
  */
-declare function SliderStep({ by, className, disabled, onClick, ...props }: SliderStepProps): import("react").JSX.Element;
+declare function SliderStep({ by, className, disabled, onClick, render, ...props }: SliderStepProps & RenderProp<'button'>): ReactTypes.ReactElement<unknown, string | ReactTypes.JSXElementConstructor<any>>;
 declare namespace SliderStep {
     var displayName: string;
 }

package/dist/components/slider/index.js

@@ -40,6 +40,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { Slider as BaseSlider } from '@base-ui/react/slider';
 import { Children, createContext, isValidElement, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore, } from 'react';
 import { tv } from 'tailwind-variants';
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
 /** A glide with a little overshoot, for a press. A drag turns it off. */
 const GLIDE = 'duration-[420ms] ease-[cubic-bezier(0.3,1.3,0.45,1)]';
 /** How far the track gives past an end, at most, in pixels. */
@@ -119,11 +121,19 @@ const sliderVariants = tv({
             },
         },
         color: {
-            neutral: { root: '[--slider-fill:color-mix(in_oklab,var(--foreground)_11%,transparent)] [--slider-mark:var(--foreground)]' },
-            primary: { root: '[--slider-fill:color-mix(in_oklab,var(--primary)_24%,transparent)] [--slider-mark:var(--primary)]' },
+            neutral: {
+                root: '[--slider-fill:color-mix(in_oklab,var(--foreground)_11%,transparent)] [--slider-mark:var(--foreground)]',
+            },
+            primary: {
+                root: '[--slider-fill:color-mix(in_oklab,var(--primary)_24%,transparent)] [--slider-mark:var(--primary)]',
+            },
             info: { root: '[--slider-fill:color-mix(in_oklab,var(--info)_26%,transparent)] [--slider-mark:var(--info)]' },
-            success: { root: '[--slider-fill:color-mix(in_oklab,var(--success)_26%,transparent)] [--slider-mark:var(--success)]' },
-            warning: { root: '[--slider-fill:color-mix(in_oklab,var(--warning)_28%,transparent)] [--slider-mark:var(--warning)]' },
+            success: {
+                root: '[--slider-fill:color-mix(in_oklab,var(--success)_26%,transparent)] [--slider-mark:var(--success)]',
+            },
+            warning: {
+                root: '[--slider-fill:color-mix(in_oklab,var(--warning)_28%,transparent)] [--slider-mark:var(--warning)]',
+            },
             destructive: {
                 root: '[--slider-fill:color-mix(in_oklab,var(--destructive)_24%,transparent)] [--slider-mark:var(--destructive)]',
             },
@@ -323,17 +333,27 @@ function SliderSteps({ children }) {
  * in on either side of a zoom slider. It is disabled at the end it moves
  * towards.
  */
-function SliderStep({ by, className, disabled, onClick, ...props }) {
+function SliderStep({ by, className, disabled, onClick, render, ...props }) {
     const slider = useContext(SliderContext);
     if (!slider)
         throw new Error('Slider.Step must be used inside a <Slider>.');
     const slots = sliderVariants();
     const stuck = by < 0 ? slider.atMin : slider.atMax;
-    return (_jsx("button", { type: "button", "data-slot": "slider-step", disabled: disabled || slider.disabled || stuck, className: slots.step({ className }), onClick: (event) => {
-            onClick?.(event);
-            if (!event.defaultPrevented)
-                slider.nudge(by);
-        }, ...props }));
+    return useRender({
+        defaultTagName: 'button',
+        render,
+        props: mergeProps({
+            type: 'button',
+            'data-slot': 'slider-step',
+            disabled: disabled || slider.disabled || stuck,
+            className: slots.step({ className }),
+            onClick: (event) => {
+                onClick?.(event);
+                if (!event.defaultPrevented)
+                    slider.nudge(by);
+            },
+        }, props),
+    });
 }
 SliderStep.displayName = 'Slider.Step';
 export const Slider = Object.assign(SliderRoot, {

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

@@ -38,6 +38,12 @@
  * back gently instead of chattering on every sample.
  */
 import { type ComponentProps, type ReactNode, type RefObject } 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 SoundwaveVariant = 'pills' | 'bars' | 'line' | 'ambient' | 'dots' | 'radial' | 'ring';
 export type SoundwaveState = 'idle' | 'listening' | 'thinking' | 'speaking';
 /** A role from the theme. The wave never carries a colour of its own. */
@@ -126,7 +132,7 @@ export interface SoundwaveProps extends Omit<ComponentProps<'div'>, 'color' | 'c
     children?: ReactNode;
 }
 /** A voice as a wave. Draws a `level` it is handed, or runs its own motion for `state`. */
-declare function SoundwaveRoot({ variant, state, level: levelProp, source, levels, progress, bars, barWidth, barGap, height, mode, centered, fadeEdges, sensitivity, speed, color, gradient, trackColor, paused, label, className, style, children, ...props }: SoundwaveProps): import("react").JSX.Element;
+declare function SoundwaveRoot({ variant, state, level: levelProp, source, levels, progress, bars, barWidth, barGap, height, mode, centered, fadeEdges, sensitivity, speed, color, gradient, trackColor, paused, label, className, style, children, render, ...props }: SoundwaveProps & RenderProp<'div'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace SoundwaveRoot {
     var displayName: string;
 }
@@ -136,7 +142,7 @@ export interface SoundwaveCenterProps extends ComponentProps<'div'> {
  * What sits in the hole of a `radial` or `ring` wave: a person's avatar, a
  * figure, a button. It is sized to the hole and centred in it.
  */
-declare function SoundwaveCenter({ className, ...props }: SoundwaveCenterProps): import("react").JSX.Element;
+declare function SoundwaveCenter({ className, render, ...props }: SoundwaveCenterProps & RenderProp<'div'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace SoundwaveCenter {
     var displayName: string;
 }

package/dist/components/soundwave/index.js

@@ -41,6 +41,8 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  */
 import { useEffect, useId, useLayoutEffect, useRef, useState, useSyncExternalStore, } from 'react';
 import { tv } from 'tailwind-variants';
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
 /** What each state is doing, for anyone who cannot see it. */
 const STATE_LABEL = {
     idle: 'Idle',
@@ -402,7 +404,7 @@ const soundwaveVariants = tv({
     },
 });
 /** A voice as a wave. Draws a `level` it is handed, or runs its own motion for `state`. */
-function SoundwaveRoot({ variant = 'pills', state = 'listening', level: levelProp, source, levels, progress, bars, barWidth, barGap, height, mode = 'static', centered = true, fadeEdges = false, sensitivity = 1, speed = 1, color, gradient, trackColor, paused = false, label, className, style, children, ...props }) {
+function SoundwaveRoot({ variant = 'pills', state = 'listening', level: levelProp, source, levels, progress, bars, barWidth, barGap, height, mode = 'static', centered = true, fadeEdges = false, sensitivity = 1, speed = 1, color, gradient, trackColor, paused = false, label, className, style, children, render, ...props }) {
     const sourceLevel = useAudioLevel(source);
     const level = source ? sourceLevel : levelProp;
     const defaults = DEFAULTS[variant];
@@ -571,17 +573,35 @@ function SoundwaveRoot({ variant = 'pills', state = 'listening', level: levelPro
     const layer = (key, extra = {}) => (_jsx("path", { ref: (node) => {
             layers.current[key] = node;
         }, d: painted[key] ?? '', fill: "none", stroke: extra.stroke ?? stroke, strokeOpacity: extra.opacity, strokeWidth: extra.strokeWidth ?? w, strokeLinecap: "round", strokeLinejoin: "round" }));
-    return (_jsx("div", { ref: root, role: "img", "aria-label": label ?? STATE_LABEL[state], "data-slot": "soundwave", "data-variant": variant, "data-state": state, className: slots.root({ className }), style: rootStyle, ...props, children: variant === 'ambient' ? (_jsxs(_Fragment, { children: [_jsx("div", { "aria-hidden": "true", className: slots.bloom() }), _jsx("div", { "aria-hidden": "true", className: slots.rim() })] })) : (_jsxs(_Fragment, { children: [variant === 'radial' ? (_jsx("div", { ref: glow, "aria-hidden": "true", className: slots.glow(), style: { opacity: 0.25 + (painted.glow ?? 0) * 0.75 } })) : null, width > 0 ? (_jsxs("svg", { "aria-hidden": "true", width: width, height: h, viewBox: `0 0 ${width} ${h}`, className: slots.svg(), children: [gradient?.length ? (_jsx("defs", { children: _jsx("linearGradient", { id: gradientId, x1: "0", x2: "1", y1: "0", y2: "0", children: gradient.map((role, index) => (_jsx("stop", { offset: gradient.length === 1 ? 0 : index / (gradient.length - 1), style: { stopColor: COLOR_VAR[role] } }, `${role}-${index}`))) }) })) : null, variant === 'dots' || variant === 'ring' ? layer('track', { stroke: track }) : null, variant === 'radial' ? (_jsx("circle", { cx: h / 2, cy: h / 2, r: h * HOLE, fill: "none", stroke: "currentColor", strokeOpacity: 0.22, strokeWidth: 1.5 })) : null, variant === 'radial' ? layer('tip', { opacity: 0.42 }) : null, variant === 'dots' || variant === 'ring' ? layer('edge', { opacity: 0.45 }) : null, variant === 'bars' || variant === 'dots'
-                            ? layer('rest', trackColor && variant === 'bars' ? { stroke: track } : { opacity: UNPLAYED })
-                            : null, layer('ink')] })) : null, children] })) }));
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({
+            ref: root,
+            role: 'img',
+            'aria-label': label ?? STATE_LABEL[state],
+            'data-slot': 'soundwave',
+            'data-variant': variant,
+            'data-state': state,
+            className: slots.root({ className }),
+            style: rootStyle,
+            children: (_jsx(_Fragment, { children: variant === 'ambient' ? (_jsxs(_Fragment, { children: [_jsx("div", { "aria-hidden": "true", className: slots.bloom() }), _jsx("div", { "aria-hidden": "true", className: slots.rim() })] })) : (_jsxs(_Fragment, { children: [variant === 'radial' ? (_jsx("div", { ref: glow, "aria-hidden": "true", className: slots.glow(), style: { opacity: 0.25 + (painted.glow ?? 0) * 0.75 } })) : null, width > 0 ? (_jsxs("svg", { "aria-hidden": "true", width: width, height: h, viewBox: `0 0 ${width} ${h}`, className: slots.svg(), children: [gradient?.length ? (_jsx("defs", { children: _jsx("linearGradient", { id: gradientId, x1: "0", x2: "1", y1: "0", y2: "0", children: gradient.map((role, index) => (_jsx("stop", { offset: gradient.length === 1 ? 0 : index / (gradient.length - 1), style: { stopColor: COLOR_VAR[role] } }, `${role}-${index}`))) }) })) : null, variant === 'dots' || variant === 'ring' ? layer('track', { stroke: track }) : null, variant === 'radial' ? (_jsx("circle", { cx: h / 2, cy: h / 2, r: h * HOLE, fill: "none", stroke: "currentColor", strokeOpacity: 0.22, strokeWidth: 1.5 })) : null, variant === 'radial' ? layer('tip', { opacity: 0.42 }) : null, variant === 'dots' || variant === 'ring' ? layer('edge', { opacity: 0.45 }) : null, variant === 'bars' || variant === 'dots'
+                                    ? layer('rest', trackColor && variant === 'bars' ? { stroke: track } : { opacity: UNPLAYED })
+                                    : null, layer('ink')] })) : null, children] })) })),
+        }, props),
+    });
 }
 SoundwaveRoot.displayName = 'Soundwave';
 /**
  * What sits in the hole of a `radial` or `ring` wave: a person's avatar, a
  * figure, a button. It is sized to the hole and centred in it.
  */
-function SoundwaveCenter({ className, ...props }) {
-    return _jsx("div", { "data-slot": "soundwave-center", className: soundwaveVariants().center({ className }), ...props });
+function SoundwaveCenter({ className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({ 'data-slot': 'soundwave-center', className: soundwaveVariants().center({ className }) }, props),
+    });
 }
 SoundwaveCenter.displayName = 'Soundwave.Center';
 export const Soundwave = Object.assign(SoundwaveRoot, { Center: SoundwaveCenter });

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

@@ -38,17 +38,23 @@
  * done in CSS from data attributes, so a Server Component can render it.
  */
 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 StatProps extends ComponentProps<'div'> {
 }
 /** A row: the label and value on the leading side, a badge on the trailing one. */
-declare function StatRoot({ className, ...props }: StatProps): import("react").JSX.Element;
+declare function StatRoot({ className, render, ...props }: StatProps & RenderProp<'div'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace StatRoot {
     var displayName: string;
 }
 export interface StatContentProps extends ComponentProps<'div'> {
 }
 /** The label and the value, stacked. Used on its own when there is no badge. */
-declare function StatContent({ className, ...props }: StatContentProps): import("react").JSX.Element;
+declare function StatContent({ className, render, ...props }: StatContentProps & RenderProp<'div'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace StatContent {
     var displayName: string;
 }
@@ -61,14 +67,14 @@ export interface StatLabelProps extends ComponentProps<'p'> {
     weight?: 'normal' | 'medium';
 }
 /** What is measured, in a quiet line over the value. */
-declare function StatLabel({ weight, className, ...props }: StatLabelProps): import("react").JSX.Element;
+declare function StatLabel({ weight, className, render, ...props }: StatLabelProps & RenderProp<'p'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace StatLabel {
     var displayName: string;
 }
 export interface StatDescriptionProps extends ComponentProps<'p'> {
 }
 /** What the reading means, in words: "Answering slowly". Written under the label. */
-declare function StatDescription({ className, ...props }: StatDescriptionProps): import("react").JSX.Element;
+declare function StatDescription({ className, render, ...props }: StatDescriptionProps & RenderProp<'p'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace StatDescription {
     var displayName: string;
 }
@@ -77,21 +83,21 @@ export interface StatValueProps extends ComponentProps<'p'> {
     size?: 'sm' | 'md' | 'lg';
 }
 /** The figure. Put a `Stat.Unit` inside it, after the number. */
-declare function StatValue({ size, className, ...props }: StatValueProps): import("react").JSX.Element;
+declare function StatValue({ size, className, render, ...props }: StatValueProps & RenderProp<'p'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace StatValue {
     var displayName: string;
 }
 export interface StatUnitProps extends ComponentProps<'span'> {
 }
 /** The unit after the number, smaller and quieter, sized from the value it is in. */
-declare function StatUnit({ className, ...props }: StatUnitProps): import("react").JSX.Element;
+declare function StatUnit({ className, render, ...props }: StatUnitProps & RenderProp<'span'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace StatUnit {
     var displayName: string;
 }
 export interface StatBadgeProps extends ComponentProps<'span'> {
 }
 /** How the reading stands, in a pill on the row's trailing side. */
-declare function StatBadge({ className, ...props }: StatBadgeProps): import("react").JSX.Element;
+declare function StatBadge({ className, render, ...props }: StatBadgeProps & RenderProp<'span'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace StatBadge {
     var displayName: string;
 }

package/dist/components/stat/index.js

@@ -1,5 +1,7 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+'use client';
 import { tv } from 'tailwind-variants';
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
 const statVariants = tv({
     slots: {
         root: 'flex items-end justify-between gap-4',
@@ -27,38 +29,66 @@ const statVariants = tv({
     },
 });
 /** A row: the label and value on the leading side, a badge on the trailing one. */
-function StatRoot({ className, ...props }) {
-    return _jsx("div", { "data-slot": "stat", className: statVariants().root({ className }), ...props });
+function StatRoot({ className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({ 'data-slot': 'stat', className: statVariants().root({ className }) }, props),
+    });
 }
 StatRoot.displayName = 'Stat';
 /** The label and the value, stacked. Used on its own when there is no badge. */
-function StatContent({ className, ...props }) {
-    return _jsx("div", { "data-slot": "stat-content", className: statVariants().content({ className }), ...props });
+function StatContent({ className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({ 'data-slot': 'stat-content', className: statVariants().content({ className }) }, props),
+    });
 }
 StatContent.displayName = 'Stat.Content';
 /** What is measured, in a quiet line over the value. */
-function StatLabel({ weight = 'normal', className, ...props }) {
-    return _jsx("p", { "data-slot": "stat-label", className: statVariants({ weight }).label({ className }), ...props });
+function StatLabel({ weight = 'normal', className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'p',
+        render,
+        props: mergeProps({ 'data-slot': 'stat-label', className: statVariants({ weight }).label({ className }) }, props),
+    });
 }
 StatLabel.displayName = 'Stat.Label';
 /** What the reading means, in words: "Answering slowly". Written under the label. */
-function StatDescription({ className, ...props }) {
-    return (_jsx("p", { "data-slot": "stat-description", className: statVariants().description({ className }), ...props }));
+function StatDescription({ className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'p',
+        render,
+        props: mergeProps({ 'data-slot': 'stat-description', className: statVariants().description({ className }) }, props),
+    });
 }
 StatDescription.displayName = 'Stat.Description';
 /** The figure. Put a `Stat.Unit` inside it, after the number. */
-function StatValue({ size = 'lg', className, ...props }) {
-    return (_jsx("p", { "data-slot": "stat-value", "data-size": size, className: statVariants({ size }).value({ className }), ...props }));
+function StatValue({ size = 'lg', className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'p',
+        render,
+        props: mergeProps({ 'data-slot': 'stat-value', 'data-size': size, className: statVariants({ size }).value({ className }) }, props),
+    });
 }
 StatValue.displayName = 'Stat.Value';
 /** The unit after the number, smaller and quieter, sized from the value it is in. */
-function StatUnit({ className, ...props }) {
-    return _jsx("span", { "data-slot": "stat-unit", className: statVariants().unit({ className }), ...props });
+function StatUnit({ className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'span',
+        render,
+        props: mergeProps({ 'data-slot': 'stat-unit', className: statVariants().unit({ className }) }, props),
+    });
 }
 StatUnit.displayName = 'Stat.Unit';
 /** How the reading stands, in a pill on the row's trailing side. */
-function StatBadge({ className, ...props }) {
-    return _jsx("span", { "data-slot": "stat-badge", className: statVariants().badge({ className }), ...props });
+function StatBadge({ className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'span',
+        render,
+        props: mergeProps({ 'data-slot': 'stat-badge', className: statVariants().badge({ className }) }, props),
+    });
 }
 StatBadge.displayName = 'Stat.Badge';
 export const Stat = Object.assign(StatRoot, {

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

@@ -0,0 +1,128 @@
+/**
+ * Table — rows of records with the same columns, to be read across and compared down.
+ *
+ * ```tsx
+ * <Table>
+ *   <Table.Header>
+ *     <Table.Row>
+ *       <Table.Head>Invoice</Table.Head>
+ *       <Table.Head align="end">Amount</Table.Head>
+ *     </Table.Row>
+ *   </Table.Header>
+ *   <Table.Body>
+ *     <Table.Row>
+ *       <Table.Cell>INV-2041</Table.Cell>
+ *       <Table.Cell align="end">£1,280.00</Table.Cell>
+ *     </Table.Row>
+ *   </Table.Body>
+ * </Table>
+ * ```
+ *
+ * ## Numbers line up
+ *
+ * `align="end"` on a column's head and cells right-aligns it and switches the
+ * digits to equal widths, so a column of amounts lines up on its last digit
+ * and can be compared at a glance. Text columns stay at the start.
+ *
+ * ## It scrolls inside itself
+ *
+ * A table wider than the page scrolls sideways inside its own box, so the
+ * page around it does not. Give the table a `maxHeight` and the body scrolls
+ * too, with the header row pinned above it.
+ *
+ * ## Density
+ *
+ * `density="compact"` tightens the rows for a dense admin screen; the
+ * default leaves room for a second line of muted text in a cell.
+ * `striped` shades every other row, which helps a reader keep their place
+ * across a wide row with nothing in the middle of it.
+ *
+ * Every part is the native table element, so a screen reader announces the
+ * row and column of each cell. For data that is a list of things rather than
+ * a grid of values, Frame's rows read better.
+ */
+import type { ComponentProps, CSSProperties } 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 TableDensity = 'comfortable' | 'compact';
+export type TableAlign = 'start' | 'center' | 'end';
+export interface TableProps extends ComponentProps<'table'> {
+    /** Row height. `compact` for a dense screen. Default `comfortable`. */
+    density?: TableDensity;
+    /** Shades every other body row. */
+    striped?: boolean;
+    /**
+     * Draws the cells clear of the edges, for a table set inside a Card or
+     * Frame panel, whose edge the first and last columns would otherwise touch.
+     */
+    framed?: boolean;
+    /**
+     * The tallest the table gets before its body scrolls, with the header
+     * pinned above. Any CSS length.
+     */
+    maxHeight?: CSSProperties['maxHeight'];
+    /** Classes for the scrolling box around the table, rather than the table. */
+    containerClassName?: string;
+}
+/** The table, in a box that scrolls when the table is wider or taller than it. */
+declare function TableRoot({ density, striped, framed, maxHeight, containerClassName, className, render, ...props }: TableProps & RenderProp<'table'>): import("react").JSX.Element;
+declare namespace TableRoot {
+    var displayName: string;
+}
+/** The header row group. Pinned while the body scrolls, when the table has a `maxHeight`. */
+declare function TableHeader({ className, render, ...props }: ComponentProps<'thead'> & RenderProp<'thead'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+declare namespace TableHeader {
+    var displayName: string;
+}
+/** The rows of data. */
+declare function TableBody({ className, render, ...props }: ComponentProps<'tbody'> & RenderProp<'tbody'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+declare namespace TableBody {
+    var displayName: string;
+}
+/** Totals under the body. */
+declare function TableFooter({ className, render, ...props }: ComponentProps<'tfoot'> & RenderProp<'tfoot'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+declare namespace TableFooter {
+    var displayName: string;
+}
+/** One row. `aria-selected` shades it as chosen. */
+declare function TableRow({ className, render, ...props }: ComponentProps<'tr'> & RenderProp<'tr'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+declare namespace TableRow {
+    var displayName: string;
+}
+export interface TableHeadProps extends Omit<ComponentProps<'th'>, 'align'> {
+    /** Where the column's content sits. `end` for numbers. Default `start`. */
+    align?: TableAlign;
+}
+/** A column's heading. */
+declare function TableHead({ align, className, render, ...props }: TableHeadProps & RenderProp<'th'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+declare namespace TableHead {
+    var displayName: string;
+}
+export interface TableCellProps extends Omit<ComponentProps<'td'>, 'align'> {
+    /** Where the content sits. Match the column's head. `end` also gives the digits equal widths. Default `start`. */
+    align?: TableAlign;
+}
+/** One cell. */
+declare function TableCell({ align, className, render, ...props }: TableCellProps & RenderProp<'td'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+declare namespace TableCell {
+    var displayName: string;
+}
+/** What the table is, under it. Read first by a screen reader. */
+declare function TableCaption({ className, render, ...props }: ComponentProps<'caption'> & RenderProp<'caption'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+declare namespace TableCaption {
+    var displayName: string;
+}
+export declare const Table: typeof TableRoot & {
+    Header: typeof TableHeader;
+    Body: typeof TableBody;
+    Footer: typeof TableFooter;
+    Row: typeof TableRow;
+    Head: typeof TableHead;
+    Cell: typeof TableCell;
+    Caption: typeof TableCaption;
+};
+export { TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption };