panelui-web 0.10.1 → 0.11.0

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

@@ -37,6 +37,13 @@
  * should not cut across what a screen reader is in the middle of saying.
  */
 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'];
+};
 /** The theme role an alert is drawn in. */
 export type AlertTone = 'neutral' | 'info' | 'success' | 'warning' | 'destructive';
 /** `default` is the card in a tray, `plain` one tinted box, `banner` a strip across a page. */
@@ -57,28 +64,28 @@ export interface AlertProps extends ComponentProps<'div'> {
     /** Called when `Alert.Close` asks for it to close. */
     onOpenChange?: (open: boolean) => void;
 }
-declare function AlertRoot({ tone, variant, open, defaultOpen, onOpenChange, role, className, children, ...props }: AlertProps): import("react").JSX.Element;
+declare function AlertRoot({ tone, variant, open, defaultOpen, onOpenChange, role, className, children, ...props }: AlertProps): ReactTypes.JSX.Element;
 declare namespace AlertRoot {
     var displayName: string;
 }
 export interface AlertIconProps extends ComponentProps<'span'> {
 }
 /** The glyph at the start, in the tone's colour. Without children it draws the tone's own. */
-declare function AlertIcon({ className, children, ...props }: AlertIconProps): import("react").JSX.Element;
+declare function AlertIcon({ className, children, render, ...props }: AlertIconProps & RenderProp<'span'>): ReactTypes.ReactElement<unknown, string | ReactTypes.JSXElementConstructor<any>>;
 declare namespace AlertIcon {
     var displayName: string;
 }
 export interface AlertTitleProps extends ComponentProps<'div'> {
 }
 /** What happened, in a few words. */
-declare function AlertTitle({ className, ...props }: AlertTitleProps): import("react").JSX.Element;
+declare function AlertTitle({ className, render, ...props }: AlertTitleProps & RenderProp<'div'>): ReactTypes.ReactElement<unknown, string | ReactTypes.JSXElementConstructor<any>>;
 declare namespace AlertTitle {
     var displayName: string;
 }
 export interface AlertDescriptionProps extends ComponentProps<'div'> {
 }
 /** The sentence under the title: why, and what follows from it. A link in it is underlined. */
-declare function AlertDescription({ className, ...props }: AlertDescriptionProps): import("react").JSX.Element;
+declare function AlertDescription({ className, render, ...props }: AlertDescriptionProps & RenderProp<'div'>): ReactTypes.ReactElement<unknown, string | ReactTypes.JSXElementConstructor<any>>;
 declare namespace AlertDescription {
     var displayName: string;
 }
@@ -89,14 +96,14 @@ export interface AlertActionsProps extends ComponentProps<'div'> {
  * its end; in `plain` under the words; in `banner` at the end of the line.
  * Keep it a direct child of `Alert`, so the tray can find it.
  */
-declare function AlertActions({ className, ...props }: AlertActionsProps): import("react").JSX.Element;
+declare function AlertActions({ className, render, ...props }: AlertActionsProps & RenderProp<'div'>): ReactTypes.ReactElement<unknown, string | ReactTypes.JSXElementConstructor<any>>;
 declare namespace AlertActions {
     var displayName: string;
 }
 export interface AlertCloseProps extends ComponentProps<'button'> {
 }
 /** A round cross at the end that folds the alert away. */
-declare function AlertClose({ className, onClick, 'aria-label': label, ...props }: AlertCloseProps): import("react").JSX.Element;
+declare function AlertClose({ className, onClick, 'aria-label': label, render, ...props }: AlertCloseProps & RenderProp<'button'>): ReactTypes.ReactElement<unknown, string | ReactTypes.JSXElementConstructor<any>>;
 declare namespace AlertClose {
     var displayName: string;
 }
@@ -115,14 +122,14 @@ export interface AlertDetailsProps extends Omit<ComponentProps<'div'>, 'title'>
  * an alert that sums up several things: the fields a form still needs, the
  * files an upload skipped.
  */
-declare function AlertDetails({ label, open, defaultOpen, onOpenChange, className, children, ...props }: AlertDetailsProps): import("react").JSX.Element;
+declare function AlertDetails({ label, open, defaultOpen, onOpenChange, className, children, render, ...props }: AlertDetailsProps & RenderProp<'div'>): ReactTypes.ReactElement<unknown, string | ReactTypes.JSXElementConstructor<any>>;
 declare namespace AlertDetails {
     var displayName: string;
 }
 export interface AlertItemProps extends ComponentProps<'li'> {
 }
 /** One entry in `Alert.Details`, marked with a dot in the alert's tone. */
-declare function AlertItem({ className, ...props }: AlertItemProps): import("react").JSX.Element;
+declare function AlertItem({ className, render, ...props }: AlertItemProps & RenderProp<'li'>): ReactTypes.ReactElement<unknown, string | ReactTypes.JSXElementConstructor<any>>;
 declare namespace AlertItem {
     var displayName: string;
 }

package/dist/components/alert/index.js

@@ -40,6 +40,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  */
 import { Children, createContext, isValidElement, useCallback, useContext, useEffect, useId, 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';
 /** The fold every opening and closing here uses, the one the Prompt's bands use. */
 const FOLD = 'grid transition-[grid-template-rows,opacity] duration-300 ease-[cubic-bezier(0.2,0,0,1)] motion-reduce:transition-none';
 const alertVariants = tv({
@@ -205,19 +207,36 @@ const GLYPHS = {
     destructive: (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "12", cy: "12", r: "9" }), _jsx("path", { d: "M12 7.5v5M12 16h.01" })] })),
 };
 /** The glyph at the start, in the tone's colour. Without children it draws the tone's own. */
-function AlertIcon({ className, children, ...props }) {
+function AlertIcon({ className, children, render, ...props }) {
     const { tone } = useAlert('Alert.Icon');
-    return (_jsx("span", { "data-slot": "alert-icon", "aria-hidden": "true", className: alertVariants().icon({ className }), ...props, children: children ?? (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: GLYPHS[tone] })) }));
+    return useRender({
+        defaultTagName: 'span',
+        render,
+        props: mergeProps({
+            'data-slot': 'alert-icon',
+            'aria-hidden': 'true',
+            className: alertVariants().icon({ className }),
+            children: (_jsx(_Fragment, { children: children ?? (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: GLYPHS[tone] })) })),
+        }, props),
+    });
 }
 AlertIcon.displayName = 'Alert.Icon';
 /** What happened, in a few words. */
-function AlertTitle({ className, ...props }) {
-    return _jsx("div", { "data-slot": "alert-title", className: alertVariants().title({ className }), ...props });
+function AlertTitle({ className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({ 'data-slot': 'alert-title', className: alertVariants().title({ className }) }, props),
+    });
 }
 AlertTitle.displayName = 'Alert.Title';
 /** The sentence under the title: why, and what follows from it. A link in it is underlined. */
-function AlertDescription({ className, ...props }) {
-    return _jsx("div", { "data-slot": "alert-description", className: alertVariants().description({ className }), ...props });
+function AlertDescription({ className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({ 'data-slot': 'alert-description', className: alertVariants().description({ className }) }, props),
+    });
 }
 AlertDescription.displayName = 'Alert.Description';
 /**
@@ -225,18 +244,33 @@ AlertDescription.displayName = 'Alert.Description';
  * its end; in `plain` under the words; in `banner` at the end of the line.
  * Keep it a direct child of `Alert`, so the tray can find it.
  */
-function AlertActions({ className, ...props }) {
-    return _jsx("div", { "data-slot": "alert-actions", className: alertVariants().actions({ className }), ...props });
+function AlertActions({ className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({ 'data-slot': 'alert-actions', className: alertVariants().actions({ className }) }, props),
+    });
 }
 AlertActions.displayName = 'Alert.Actions';
 /** A round cross at the end that folds the alert away. */
-function AlertClose({ className, onClick, 'aria-label': label = 'Dismiss', ...props }) {
+function AlertClose({ className, onClick, 'aria-label': label = 'Dismiss', render, ...props }) {
     const { setOpen } = useAlert('Alert.Close');
-    return (_jsx("button", { type: "button", "data-slot": "alert-close", "aria-label": label, className: alertVariants().close({ className }), onClick: (event) => {
-            onClick?.(event);
-            if (!event.defaultPrevented)
-                setOpen(false);
-        }, ...props, children: _jsx("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", fill: "none", stroke: "currentColor", strokeWidth: "2.4", strokeLinecap: "round", children: _jsx("path", { d: "M6 6l12 12M18 6L6 18" }) }) }));
+    return useRender({
+        defaultTagName: 'button',
+        render,
+        props: mergeProps({
+            type: 'button',
+            'data-slot': 'alert-close',
+            'aria-label': label,
+            className: alertVariants().close({ className }),
+            onClick: (event) => {
+                onClick?.(event);
+                if (!event.defaultPrevented)
+                    setOpen(false);
+            },
+            children: (_jsx(_Fragment, { children: _jsx("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", fill: "none", stroke: "currentColor", strokeWidth: "2.4", strokeLinecap: "round", children: _jsx("path", { d: "M6 6l12 12M18 6L6 18" }) }) })),
+        }, props),
+    });
 }
 AlertClose.displayName = 'Alert.Close';
 /**
@@ -244,7 +278,7 @@ AlertClose.displayName = 'Alert.Close';
  * an alert that sums up several things: the fields a form still needs, the
  * files an upload skipped.
  */
-function AlertDetails({ label, open, defaultOpen = false, onOpenChange, className, children, ...props }) {
+function AlertDetails({ label, open, defaultOpen = false, onOpenChange, className, children, render, ...props }) {
     useAlert('Alert.Details');
     const slots = alertVariants();
     const [internalOpen, setInternalOpen] = useState(defaultOpen);
@@ -259,12 +293,25 @@ function AlertDetails({ label, open, defaultOpen = false, onOpenChange, classNam
             setInternalOpen(!expanded);
         onOpenChange?.(!expanded);
     };
-    return (_jsxs("div", { "data-slot": "alert-details", "data-open": expanded ? '' : undefined, className: slots.details({ className }), ...props, children: [_jsxs("button", { type: "button", "aria-expanded": expanded, "aria-controls": listId, onClick: toggle, className: slots.detailsToggle(), children: [label, _jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: slots.detailsChevron({ className: expanded ? 'rotate-180' : undefined }), children: _jsx("path", { d: "m6 9 6 6 6-6" }) })] }), _jsx("div", { className: [FOLD, expanded ? 'grid-rows-[1fr]' : 'grid-rows-[0fr] opacity-0'].join(' '), children: _jsx("div", { ref: clip, className: "min-h-0 overflow-hidden", children: _jsx("ul", { id: listId, className: slots.detailsList(), children: children }) }) })] }));
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({
+            'data-slot': 'alert-details',
+            'data-open': expanded ? '' : undefined,
+            className: slots.details({ className }),
+            children: (_jsxs(_Fragment, { children: [_jsxs("button", { type: "button", "aria-expanded": expanded, "aria-controls": listId, onClick: toggle, className: slots.detailsToggle(), children: [label, _jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: slots.detailsChevron({ className: expanded ? 'rotate-180' : undefined }), children: _jsx("path", { d: "m6 9 6 6 6-6" }) })] }), _jsx("div", { className: [FOLD, expanded ? 'grid-rows-[1fr]' : 'grid-rows-[0fr] opacity-0'].join(' '), children: _jsx("div", { ref: clip, className: "min-h-0 overflow-hidden", children: _jsx("ul", { id: listId, className: slots.detailsList(), children: children }) }) })] })),
+        }, props),
+    });
 }
 AlertDetails.displayName = 'Alert.Details';
 /** One entry in `Alert.Details`, marked with a dot in the alert's tone. */
-function AlertItem({ className, ...props }) {
-    return _jsx("li", { "data-slot": "alert-item", className: alertVariants().item({ className }), ...props });
+function AlertItem({ className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'li',
+        render,
+        props: mergeProps({ 'data-slot': 'alert-item', className: alertVariants().item({ className }) }, props),
+    });
 }
 AlertItem.displayName = 'Alert.Item';
 export const Alert = Object.assign(AlertRoot, {

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

@@ -1,5 +1,11 @@
 import { type ComponentProps, type MouseEvent, type ReactElement, type ReactNode } from 'react';
 import { type ButtonProps } from '../button/index.js';
+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'];
+};
 /** The theme role the dialog's media is drawn in, which also sets its action's default colour. */
 export type AlertDialogTone = 'neutral' | 'info' | 'success' | 'warning' | 'destructive';
 export interface AlertDialogProps {
@@ -13,7 +19,7 @@ export interface AlertDialogProps {
     /** Whether a press outside it closes it, as Cancel would. Escape always does. Default `true`. */
     dismissible?: boolean;
 }
-declare function AlertDialogRoot({ children, open, defaultOpen, onOpenChange, dismissible, }: AlertDialogProps): import("react").JSX.Element;
+declare function AlertDialogRoot({ children, open, defaultOpen, onOpenChange, dismissible }: AlertDialogProps): import("react").JSX.Element;
 declare namespace AlertDialogRoot {
     var displayName: string;
 }
@@ -56,7 +62,7 @@ declare namespace AlertDialogContent {
 export interface AlertDialogMediaProps extends ComponentProps<'div'> {
 }
 /** A glyph in a disc of the dialog's tone, above the title. */
-declare function AlertDialogMedia({ className, ...props }: AlertDialogMediaProps): import("react").JSX.Element;
+declare function AlertDialogMedia({ className, render, ...props }: AlertDialogMediaProps & RenderProp<'div'>): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace AlertDialogMedia {
     var displayName: string;
 }
@@ -80,7 +86,7 @@ export interface AlertDialogFooterProps extends ComponentProps<'div'> {
  * The answers, side by side at equal widths in the band under the panel.
  * Keep it a direct child of `AlertDialog.Content`, so the band can find it.
  */
-declare function AlertDialogFooter({ className, ...props }: AlertDialogFooterProps): import("react").JSX.Element;
+declare function AlertDialogFooter({ className, render, ...props }: AlertDialogFooterProps & RenderProp<'div'>): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace AlertDialogFooter {
     var displayName: string;
 }

package/dist/components/alert-dialog/index.js

@@ -47,6 +47,8 @@ import { Dialog as Primitive } from '@base-ui/react/dialog';
 import { Children, createContext, isValidElement, useCallback, useContext, useEffect, useId, useMemo, useRef, useState, } from 'react';
 import { tv } from 'tailwind-variants';
 import { Button } from '../button/index.js';
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
 const alertDialogVariants = tv({
     slots: {
         backdrop: 'fixed inset-0 z-50 bg-black/40 transition-opacity duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0 motion-reduce:transition-none',
@@ -103,7 +105,9 @@ const alertDialogVariants = tv({
         {
             weight: 'soft',
             actionTone: 'primary',
-            className: { action: 'bg-foreground/10 text-foreground hover:not-disabled:bg-foreground/15 hover:not-disabled:text-foreground' },
+            className: {
+                action: 'bg-foreground/10 text-foreground hover:not-disabled:bg-foreground/15 hover:not-disabled:text-foreground',
+            },
         },
         {
             weight: 'soft',
@@ -129,7 +133,7 @@ function useAlertDialog(part) {
         throw new Error(`${part} must be used inside an <AlertDialog>.`);
     return context;
 }
-function AlertDialogRoot({ children, open, defaultOpen = false, onOpenChange, dismissible = true, }) {
+function AlertDialogRoot({ children, open, defaultOpen = false, onOpenChange, dismissible = true }) {
     const [internalOpen, setInternalOpen] = useState(defaultOpen);
     const resolvedOpen = open ?? internalOpen;
     const [busy, setBusy] = useState(false);
@@ -169,8 +173,16 @@ function AlertDialogContent({ tone = 'neutral', size = 'default', blur = false,
 }
 AlertDialogContent.displayName = 'AlertDialog.Content';
 /** A glyph in a disc of the dialog's tone, above the title. */
-function AlertDialogMedia({ className, ...props }) {
-    return _jsx("div", { "data-slot": "alert-dialog-media", "aria-hidden": "true", className: alertDialogVariants().media({ className }), ...props });
+function AlertDialogMedia({ className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({
+            'data-slot': 'alert-dialog-media',
+            'aria-hidden': 'true',
+            className: alertDialogVariants().media({ className }),
+        }, props),
+    });
 }
 AlertDialogMedia.displayName = 'AlertDialog.Media';
 /** The question. It is what the dialog is announced as. */
@@ -188,15 +200,19 @@ function AlertDialogDescription({ className, ...props }) {
     const slots = alertDialogVariants();
     if (inline)
         return _jsx("p", { "data-slot": "alert-dialog-description", className: slots.description({ className }), ...props });
-    return _jsx(Primitive.Description, { "data-slot": "alert-dialog-description", className: slots.description({ className }), ...props });
+    return (_jsx(Primitive.Description, { "data-slot": "alert-dialog-description", className: slots.description({ className }), ...props }));
 }
 AlertDialogDescription.displayName = 'AlertDialog.Description';
 /**
  * The answers, side by side at equal widths in the band under the panel.
  * Keep it a direct child of `AlertDialog.Content`, so the band can find it.
  */
-function AlertDialogFooter({ className, ...props }) {
-    return _jsx("div", { "data-slot": "alert-dialog-footer", className: alertDialogVariants().footer({ className }), ...props });
+function AlertDialogFooter({ className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({ 'data-slot': 'alert-dialog-footer', className: alertDialogVariants().footer({ className }) }, props),
+    });
 }
 AlertDialogFooter.displayName = 'AlertDialog.Footer';
 /** Closes the dialog without doing anything. It reads "Cancel" unless given children. */

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

@@ -1,4 +1,10 @@
-import { type ComponentProps, type ReactNode } from 'react';
+import { type ComponentProps, type ReactElement, type ReactNode } from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { ElementType as RenderElementType } from 'react';
+/** Draws a part as another element, or composes it with a component: `render={<a href="/" />}`. */
+type RenderProp<Tag extends RenderElementType> = {
+    render?: useRender.ComponentProps<Tag>['render'];
+};
 export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type AvatarShape = 'circle' | 'square';
 export type AvatarColor = 'chart-1' | 'chart-2' | 'chart-3' | 'chart-4' | 'chart-5' | 'muted';
@@ -22,7 +28,7 @@ export interface AvatarProps extends Omit<ComponentProps<'span'>, 'color'> {
     children?: ReactNode;
 }
 /** A picture of someone, or their initials in a colour of their own. */
-declare function AvatarRoot({ src, name, alt, size, shape, color, fallback, className, style, children, ...props }: AvatarProps): import("react").JSX.Element;
+declare function AvatarRoot({ src, name, alt, size, shape, color, fallback, className, style, children, render, ...props }: AvatarProps & RenderProp<'span'>): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace AvatarRoot {
     var displayName: string;
 }
@@ -40,7 +46,7 @@ export interface AvatarBadgeProps extends Omit<ComponentProps<'span'>, 'color'>
  * A dot or a small icon on the avatar's lower trailing edge. The avatar is
  * cut away round it, so it reads on any background.
  */
-declare function AvatarBadge({ status, color, label: _label, className, ...props }: AvatarBadgeProps): import("react").JSX.Element;
+declare function AvatarBadge({ status, color, label: _label, className, render, ...props }: AvatarBadgeProps & RenderProp<'span'>): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace AvatarBadge {
     var displayName: string;
 }

package/dist/components/avatar/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";
 /**
  * Avatar — a person or a team as a picture, with their initials when there
  * is no picture to show.
@@ -41,6 +41,8 @@ import { Avatar as BaseAvatar } from '@base-ui/react/avatar';
 import { Popover } from '@base-ui/react/popover';
 import { Children, createContext, isValidElement, useContext, useMemo, } from 'react';
 import { tv } from 'tailwind-variants';
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
 const SIZE = {
     xs: '1.5rem',
     sm: '2rem',
@@ -197,7 +199,7 @@ const GroupContext = createContext(null);
 /** Set on every avatar in a group but the last, which nothing overlaps. */
 const OverlappedContext = createContext(false);
 /** A picture of someone, or their initials in a colour of their own. */
-function AvatarRoot({ src, name, alt, size, shape, color, fallback, className, style, children, ...props }) {
+function AvatarRoot({ src, name, alt, size, shape, color, fallback, className, style, children, render, ...props }) {
     const group = useContext(GroupContext);
     const overlapped = useContext(OverlappedContext);
     const resolvedSize = size ?? group?.size ?? 'md';
@@ -207,12 +209,25 @@ function AvatarRoot({ src, name, alt, size, shape, color, fallback, className, s
     const badge = Children.toArray(children).find((child) => isValidElement(child) && child.type === AvatarBadge);
     const status = badge?.props.label ?? (badge?.props.status ? STATUS_LABEL[badge.props.status] : undefined);
     const label = [alt ?? name, status].filter(Boolean).join(', ') || undefined;
-    return (_jsxs("span", { "data-slot": "avatar", "data-size": resolvedSize, "data-shape": resolvedShape, role: label ? 'img' : undefined, "aria-label": label, className: slots.root({ className }), style: {
-            ['--avatar-size']: SIZE[resolvedSize],
-            // Here and not on the badge, so the face's cut and the badge's place can both read it.
-            ['--badge-size']: 'max(0.5rem, calc(var(--avatar-size) * 0.28))',
-            ...style,
-        }, ...props, children: [_jsxs(BaseAvatar.Root, { "data-slot": "avatar-face", "aria-hidden": "true", className: slots.face(), style: maskStyle(resolvedShape, badge !== undefined, overlapped), children: [src ? _jsx(BaseAvatar.Image, { src: src, alt: "", className: slots.image() }) : null, _jsx(BaseAvatar.Fallback, { className: slots.fallback(), children: fallback ?? (name ? initialsOf(name) : _jsx(PersonGlyph, {})) })] }), children] }));
+    return useRender({
+        defaultTagName: 'span',
+        render,
+        props: mergeProps({
+            'data-slot': 'avatar',
+            'data-size': resolvedSize,
+            'data-shape': resolvedShape,
+            role: label ? 'img' : undefined,
+            'aria-label': label,
+            className: slots.root({ className }),
+            style: {
+                ['--avatar-size']: SIZE[resolvedSize],
+                // Here and not on the badge, so the face's cut and the badge's place can both read it.
+                ['--badge-size']: 'max(0.5rem, calc(var(--avatar-size) * 0.28))',
+                ...style,
+            },
+            children: (_jsxs(_Fragment, { children: [_jsxs(BaseAvatar.Root, { "data-slot": "avatar-face", "aria-hidden": "true", className: slots.face(), style: maskStyle(resolvedShape, badge !== undefined, overlapped), children: [src ? _jsx(BaseAvatar.Image, { src: src, alt: "", className: slots.image() }) : null, _jsx(BaseAvatar.Fallback, { className: slots.fallback(), children: fallback ?? (name ? initialsOf(name) : _jsx(PersonGlyph, {})) })] }), children] })),
+        }, props),
+    });
 }
 AvatarRoot.displayName = 'Avatar';
 function PersonGlyph() {
@@ -222,9 +237,18 @@ function PersonGlyph() {
  * A dot or a small icon on the avatar's lower trailing edge. The avatar is
  * cut away round it, so it reads on any background.
  */
-function AvatarBadge({ status, color, label: _label, className, ...props }) {
+function AvatarBadge({ status, color, label: _label, className, render, ...props }) {
     const slots = avatarVariants({ status, color: status ? undefined : (color ?? 'muted') });
-    return (_jsx("span", { "aria-hidden": "true", "data-slot": "avatar-badge", "data-status": status, className: slots.badge({ className }), ...props }));
+    return useRender({
+        defaultTagName: 'span',
+        render,
+        props: mergeProps({
+            'aria-hidden': 'true',
+            'data-slot': 'avatar-badge',
+            'data-status': status,
+            className: slots.badge({ className }),
+        }, props),
+    });
 }
 AvatarBadge.displayName = 'Avatar.Badge';
 /** A row of overlapping avatars, that opens up when it is hovered or focused. */

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

@@ -0,0 +1,57 @@
+/**
+ * Badge — a short label that says what state something is in, or what kind of thing it is.
+ *
+ * ```tsx
+ * <Badge>New</Badge>
+ * <Badge variant="success" dot>Operational</Badge>
+ * <Badge variant="info" dot="pulse">Building</Badge>
+ * ```
+ *
+ * ## Status colours are tinted, not filled
+ *
+ * A status badge sits inside a row of other text, and a solid green or red
+ * block pulls the eye away from the row it belongs to. `success`, `info`,
+ * `warning` and `destructive` draw their colour as a light tint with text in
+ * the same hue, so a column of them reads as a column of states rather than a
+ * column of buttons. `default` is the one solid badge, for the single thing on
+ * a screen that should be seen first.
+ *
+ * ## The dot says it is live
+ *
+ * `dot` puts a small mark before the text in the badge's colour. `dot="pulse"`
+ * makes it breathe, for a state that is still changing — a build running, a
+ * call connected — and stops once the state settles. The pulse is off for
+ * readers who ask for reduced motion.
+ *
+ * A badge is not a control. For a label that can be pressed, removed or
+ * toggled, use Chip.
+ */
+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 BadgeVariant = 'default' | 'secondary' | 'outline' | 'success' | 'info' | 'warning' | 'destructive';
+export type BadgeSize = 'sm' | 'md' | 'lg';
+export interface BadgeProps extends ComponentProps<'span'> {
+    /**
+     * What it means. `default` is solid, for the one thing that should be seen
+     * first; the four states are tinted in their theme colour. Default `default`.
+     */
+    variant?: BadgeVariant;
+    /** Its height and text size. Default `md`. */
+    size?: BadgeSize;
+    /**
+     * A dot before the text in the badge's colour. `'pulse'` makes it breathe,
+     * for a state that is still changing.
+     */
+    dot?: boolean | 'pulse';
+}
+/** A short label for a state or a kind. Renders a `<span>`. */
+declare function Badge({ variant, size, dot, className, children, render, ...props }: BadgeProps & RenderProp<'span'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+declare namespace Badge {
+    var displayName: string;
+}
+export { Badge };

package/dist/components/badge/index.js

@@ -0,0 +1,61 @@
+'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 badgeVariants = tv({
+    slots: {
+        root: [
+            'inline-flex w-fit shrink-0 items-center justify-center gap-1.5 whitespace-nowrap rounded-md border font-medium',
+            'tabular-nums [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-3.5',
+        ],
+        dot: 'relative inline-flex size-1.5 shrink-0 rounded-full bg-current',
+        halo: 'absolute inset-0 rounded-full bg-current opacity-60 animate-ping motion-reduce:hidden',
+    },
+    variants: {
+        variant: {
+            default: { root: 'border-transparent bg-primary text-primary-foreground' },
+            secondary: { root: 'border-transparent bg-secondary text-secondary-foreground' },
+            outline: { root: 'border-border bg-transparent text-foreground', dot: 'text-muted-foreground' },
+            // The four states share one recipe, read from --badge-color.
+            success: { root: '[--badge-color:var(--success)]' },
+            info: { root: '[--badge-color:var(--info)]' },
+            warning: { root: '[--badge-color:var(--warning)]' },
+            destructive: { root: '[--badge-color:var(--destructive)]' },
+        },
+        tinted: {
+            true: {
+                root: [
+                    'border-[color-mix(in_oklab,var(--badge-color)_22%,var(--background))]',
+                    'bg-[color-mix(in_oklab,var(--badge-color)_10%,var(--background))] dark:bg-[color-mix(in_oklab,var(--badge-color)_16%,var(--background))]',
+                    // Text in the badge's own hue, pulled towards the foreground so it stays legible on the tint.
+                    'text-[color-mix(in_oklab,var(--badge-color),var(--foreground)_30%)]',
+                ],
+                dot: 'text-(--badge-color)',
+            },
+        },
+        size: {
+            sm: { root: 'h-5 px-1.5 text-[0.6875rem] leading-none' },
+            md: { root: 'h-6 px-2 text-xs leading-none' },
+            lg: { root: 'h-7 px-2.5 text-[0.8125rem] leading-none' },
+        },
+    },
+    defaultVariants: { variant: 'default', size: 'md', tinted: false },
+});
+const TINTED = new Set(['success', 'info', 'warning', 'destructive']);
+/** A short label for a state or a kind. Renders a `<span>`. */
+function Badge({ variant = 'default', size = 'md', dot = false, className, children, render, ...props }) {
+    const slots = badgeVariants({ variant, size, tinted: TINTED.has(variant) });
+    return useRender({
+        defaultTagName: 'span',
+        render,
+        props: mergeProps({
+            'data-slot': 'badge',
+            'data-variant': variant,
+            className: slots.root({ className }),
+            children: (_jsxs(_Fragment, { children: [dot ? (_jsx("span", { "data-slot": "badge-dot", "aria-hidden": "true", className: slots.dot(), children: dot === 'pulse' ? _jsx("span", { className: slots.halo() }) : null })) : null, children] })),
+        }, props),
+    });
+}
+Badge.displayName = 'Badge';
+export { Badge };

package/dist/components/bar-picker/index.d.ts

@@ -26,6 +26,12 @@
  * the unit, but one number can.
  */
 import { type ComponentProps, type ReactNode } from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { ElementType as RenderElementType } from 'react';
+/** Draws a part as another element, or composes it with a component: `render={<a href="/" />}`. */
+type RenderProp<Tag extends RenderElementType> = {
+    render?: useRender.ComponentProps<Tag>['render'];
+};
 export interface BarPickerBar {
     /** Written under the column: "Mon", "W3". Keep it to a few characters. */
     label: ReactNode;
@@ -55,7 +61,8 @@ export interface BarPickerProps extends Omit<ComponentProps<'div'>, 'children' |
     /** What a screen reader calls the row. */
     label?: string;
 }
-export declare function BarPicker({ data, max, value, defaultValue, onValueChange, segments, color, formatValue, label, className, ...props }: BarPickerProps): import("react").JSX.Element;
+export declare function BarPicker({ data, max, value, defaultValue, onValueChange, segments, color, formatValue, label, className, render, ...props }: BarPickerProps & RenderProp<'div'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export declare namespace BarPicker {
     var displayName: string;
 }
+export {};